* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        :root {
            --bg-primary: #FFFFFF; --bg-card: #FFFFFF; --bg-input: #FFFFFF;
            --text-primary: #000000; --text-secondary: #3C3C43; --text-tertiary: #6C6C70;
            --text-placeholder: #C7C7CC; --color-blue: #007AFF; --color-green: #34C759;
            --color-red: #FF3B30; --color-orange: #FF9500; --color-purple: #5856D6;
            --separator: rgba(0,0,0,0.1); --shadow-card: 0 2px 16px rgba(0,0,0,0.08);
            --radius-card: 16px; --radius-input: 12px; --radius-btn: 14px;
            color-scheme: light only;
        }
        html { background: #FFFFFF; color-scheme: light only; }
        html, body { height: 100%; width: 100%; overflow: hidden; position: fixed;
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
            color: var(--text-primary); background-color: #FFFFFF !important; }
        body { background: url('https://tc.qqij.cn/view.php/c419ba766bb2957e384604f421cdd3d9.jpeg') center/cover fixed; transition: background-image 0.3s; }
        body.admin-body { background: url('https://tc.qqij.cn/view.php/c419ba766bb2957e384604f421cdd3d9.jpeg') center/cover fixed; }

        .view { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
        .view.hidden { display: none !important; }

        .card { background: rgba(255,255,255,0.92); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); width: 90%; max-width: 380px; padding: 32px 24px 28px; border-radius: var(--radius-card); box-shadow: 0 8px 40px rgba(0,0,0,0.14), 0 1px 4px rgba(0,0,0,0.06); }

        #homeView { background: none !important; backdrop-filter: none !important; border: none !important; box-shadow: none !important; padding: 20px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; position: relative; overflow-y: auto; }

        #adContainer { width: 100%; overflow: hidden; padding: 6px 10px 6px 50px; box-sizing: border-box; color: #FFCC00; font-size: 13px; display: none; white-space: nowrap; position: relative; background: rgba(0,0,0,0.28); }
        #adText { display: inline-block; animation: scrollAd 15s linear infinite; padding-left: 100%; }
        @keyframes scrollAd { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } }

        h2 { text-align: center; margin-bottom: 24px; font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.3px; }

        .input-group { margin-bottom: 16px; position: relative; }
        label { display: block; font-size: 13px; font-weight: 600; color: var(--text-tertiary); letter-spacing: 0.3px; margin-bottom: 7px; }
        input, .captcha-box, .file-input, textarea, select { width: 100%; padding: 12px 14px; background: var(--bg-input); border: 1.5px solid transparent; color: var(--text-primary); font-size: 16px; border-radius: var(--radius-input); outline: none; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; font-family: inherit; }
        textarea { min-height: 80px; resize: vertical; }
        input::placeholder, textarea::placeholder { color: var(--text-placeholder); }
        input:focus, textarea:focus, select:focus { background: #FFFFFF; border-color: var(--color-blue); box-shadow: 0 0 0 4px rgba(0,122,255,0.12); }
        .file-input::-webkit-file-upload-button { background: #E5E5EA; border: none; color: var(--text-secondary); padding: 6px 12px; border-radius: 8px; margin-right: 10px; cursor: pointer; font-family: inherit; }

        /* 图片预览样式（上传图片显示在下方） */
        .img-preview-wrap { margin-top: 8px; }
        .img-preview-wrap img, .img-preview-wrap video { max-width: 100%; max-height: 120px; border-radius: 10px; border: 1px solid var(--separator); display: block; }
        .media-preview { max-width: 100%; }
        .img-preview-label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 4px; }

        button { width: 100%; padding: 13px 16px; background: var(--color-blue); border: none; border-radius: var(--radius-btn); font-weight: 600; cursor: pointer; margin-top: 8px; color: #FFFFFF; font-size: 16px; transition: opacity 0.15s, transform 0.1s; font-family: inherit; }
        button:hover:not(:disabled) { opacity: 0.88; }
        button:active:not(:disabled) { transform: scale(0.98); opacity: 0.80; }
        button:disabled { opacity: 0.45; cursor: not-allowed; }

        .captcha-wrapper { display: flex; gap: 10px; align-items: center; }
        .captcha-img { width: 100px; height: 40px; cursor: pointer; border-radius: 8px; overflow: hidden; border: 1.5px solid var(--separator); flex-shrink: 0; }
        .captcha-img img { width: 100%; height: 100%; display: block; }

        .error, .success, .info { padding: 11px 14px; margin-bottom: 14px; font-size: 14px; border-radius: 10px; line-height: 1.4; }
        .error { background: rgba(255,59,48,0.10); border: 1px solid rgba(255,59,48,0.2); color: var(--color-red); }
        .success { background: rgba(52,199,89,0.10); border: 1px solid rgba(52,199,89,0.2); color: var(--color-green); }
        .info { background: rgba(255,149,0,0.10); border: 1px solid rgba(255,149,0,0.2); color: var(--color-orange); }

        .switch-link { text-align: center; margin-top: 18px; }
        .switch-link a { color: var(--color-blue); text-decoration: none; font-size: 15px; font-weight: 500; cursor: pointer; }
        .switch-link a:hover { text-decoration: underline; }
        .hidden { display: none !important; }

        /* 首页头部 */
        .home-header { text-align: center; margin-bottom: 12px; padding: 0 16px; width: 100%; position: relative; }
        .avatar-container { margin: 0 auto 12px; width: 76px; height: 76px; }
        .rotating-avatar { width: 100%; height: 100%; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--color-blue), var(--color-purple)); animation: rotateAvatar 10s linear infinite; box-shadow: 0 4px 16px rgba(0,122,255,0.35); }
        @keyframes rotateAvatar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        .rotating-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
        .welcome { font-size: 20px; font-weight: 700; color: #FFFFFF; text-shadow: 0 2px 8px rgba(0,0,0,0.4); margin-bottom: 4px; }
        .current-time { font-size: 16px; color: rgba(255,255,255,0.85); text-shadow: 0 1px 4px rgba(0,0,0,0.3); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
        .username-check { font-size: 12px; margin-top: 5px; padding-left: 4px; color: var(--text-tertiary); }
        .username-check.valid { color: var(--color-green); }
        .username-check.invalid { color: var(--color-red); }

        /* 通知铃铛 */
        .notif-bell-wrap { position: absolute; top: 0; right: 16px; z-index: 20; }
        .notif-bell-btn { width: 44px; height: 44px; background: rgba(255,255,255,0.88); backdrop-filter: blur(8px); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.12); margin: 0; padding: 0; width: 44px; }
        .notif-badge { position: absolute; top: -4px; right: -4px; background: var(--color-red); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; }
        .notif-badge.hidden { display: none; }

        /* 通知面板 */
        .notif-panel { position: fixed; top: 0; right: 0; width: 320px; max-width: 92vw; height: 100%; background: rgba(255,255,255,0.98); backdrop-filter: blur(24px); z-index: 500; box-shadow: -4px 0 24px rgba(0,0,0,0.12); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; }
        .notif-panel.open { transform: translateX(0); }
        .notif-panel-header { padding: 20px 16px 14px; border-bottom: 1px solid var(--separator); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
        .notif-panel-title { font-size: 18px; font-weight: 700; }
        .notif-panel-close { background: var(--bg-input); border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; color: var(--text-tertiary); }
        .notif-panel-actions { padding: 8px 16px; border-bottom: 1px solid var(--separator); flex-shrink: 0; }
        .notif-panel-actions button { background: var(--bg-input); color: var(--text-secondary); font-size: 13px; padding: 6px 12px; border-radius: 8px; margin: 0; width: auto; }
        .notif-list { flex: 1; overflow-y: auto; padding: 8px 0; }
        .notif-item { padding: 14px 16px; border-bottom: 1px solid var(--separator); cursor: pointer; transition: background 0.15s; }
        .notif-item:hover { background: var(--bg-input); }
        .notif-item.unread { background: rgba(0,122,255,0.05); }
        .notif-item-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
        .notif-item-dot { width: 8px; height: 8px; background: var(--color-blue); border-radius: 50%; flex-shrink: 0; }
        .notif-item-content { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
        .notif-item-time { font-size: 11px; color: var(--text-placeholder); margin-top: 4px; }
        .notif-appeal-btn { margin-top: 8px; background: var(--color-orange); color: white; padding: 6px 12px; border-radius: 8px; font-size: 12px; width: auto; margin: 6px 0 0; }
        .notif-empty { text-align: center; color: var(--text-tertiary); padding: 40px 16px; font-size: 14px; }

        /* 汉堡菜单 */
        .menu-btn { position: absolute; top: 16px; left: 16px; font-size: 18px; color: rgba(255,255,255,0.90); cursor: pointer; z-index: 20; background: rgba(0,0,0,0.25); border: none; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; backdrop-filter: blur(8px); transition: background 0.2s; }
        .menu-btn:hover { background: rgba(0,0,0,0.40); }

        /* 侧边栏 */
        .sidebar { position: fixed; top: 0; left: -290px; width: 270px; height: 100%; background: rgba(255,255,255,0.96); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 4px 0 24px rgba(0,0,0,0.12); transition: left 0.3s cubic-bezier(0.4,0,0.2,1); z-index: 30; padding: 56px 20px 24px; overflow-y: auto; }
        .sidebar.open { left: 0; }
        .sidebar-close { position: absolute; top: 12px; right: 16px; font-size: 20px; cursor: pointer; color: var(--text-tertiary); background: var(--bg-input); width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; }
        .sidebar-close:hover { color: var(--text-primary); }
        .sidebar h3 { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--separator); color: var(--text-tertiary); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
        .sidebar-item { margin-bottom: 8px; }
        .sidebar-btn { width: 100%; padding: 12px 14px; background: var(--bg-input); border: none; border-radius: 12px; color: var(--text-primary); cursor: pointer; text-align: left; font-size: 15px; font-weight: 500; margin-bottom: 4px; transition: background 0.15s; }
        .sidebar-btn:hover { background: #E5E5EA; }
        .admin-only, .user-only { display: block; }
        .admin-only.hidden, .user-only.hidden { display: none; }
        .password-form { margin-top: 10px; padding: 14px; background: var(--bg-input); border-radius: 12px; display: none; }
        .password-form.show { display: block; }
        .password-form input { margin-bottom: 8px; background: #FFFFFF; }
        .small-note { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
        .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); z-index: 25; display: none; }
        .overlay.show { display: block; }

        /* 管理员快捷按钮 */
        .admin-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 12px; flex-wrap: wrap; padding: 0 8px; }
        .admin-circle-btn { width: 68px; height: 68px; background: rgba(255,255,255,0.88); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.6); border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; color: var(--text-secondary); font-weight: 500; transition: background 0.15s, transform 0.1s; box-shadow: 0 2px 8px rgba(0,0,0,0.10); margin: 0; padding: 0; }
        .admin-circle-btn span { font-size: 26px; margin-bottom: 3px; line-height: 1; }
        .admin-circle-btn:hover { background: rgba(255,255,255,0.98); }
        .admin-circle-btn:active { transform: scale(0.95); }
        #totalFeeBtn { width: 68px; height: 68px; }
        #totalFeeDisplay { font-size: 11px; line-height: 1.2; word-break: break-word; color: var(--color-blue); font-weight: 700; }

        /* 通知弹窗 */
        .notice-float { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 280px; max-width: 85%; background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); border-radius: 20px; box-shadow: 0 8px 40px rgba(0,0,0,0.18); padding: 24px 20px 20px; z-index: 200; text-align: center; }
        .notice-float.hidden { display: none; }
        .notice-header { font-weight: 700; color: var(--text-primary); font-size: 17px; margin-bottom: 12px; }
        .notice-content { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin-bottom: 20px; word-break: break-word; }
        .notice-btn { background: var(--color-blue); border: none; color: white; padding: 10px 28px; font-size: 15px; font-weight: 600; cursor: pointer; border-radius: 12px; transition: opacity 0.2s; min-width: 80px; margin: 0 auto; width: auto; display: inline-block; }
        .notice-btn.disabled { opacity: 0.5; pointer-events: none; }
        .notice-btn:hover:not(.disabled) { opacity: 0.88; }

        /* 余额信息栏 */
        .balance-info { display: flex; justify-content: space-around; align-items: center; margin: 10px 16px; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px); border-radius: 16px; padding: 12px 16px; color: var(--text-primary); font-size: 14px; width: calc(100% - 32px); max-width: 800px; gap: 10px; flex-wrap: wrap; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
        .balance-info > div { color: var(--text-secondary); font-size: 13px; font-weight: 500; }
        .balance-info > div span { color: var(--color-blue); font-weight: 700; font-size: 15px; }
        .balance-info button { background: var(--color-blue); border: none; padding: 7px 16px; color: white; cursor: pointer; border-radius: 10px; font-size: 13px; font-weight: 600; width: auto; margin-top: 0; }
        .withdraw-options { display: flex; gap: 8px; margin-left: 4px; }
        .withdraw-options.hidden { display: none; }

        /* 商品容器 */
        .goods-container { width: 100%; max-width: 800px; margin-top: 12px; padding: 0 16px 24px; overflow-y: auto; flex: 1; }
        .goods-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
        .create-goods-btn { width: auto; padding: 8px 14px; background: var(--color-blue); font-size: 14px; font-weight: 600; border-radius: 10px; margin: 0; }
        .goods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
        .goods-item { background: rgba(255,255,255,0.90); backdrop-filter: blur(8px); border-radius: 14px; border: 1px solid rgba(255,255,255,0.6); padding: 14px; display: flex; box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
        .goods-img { width: 68px; height: 68px; object-fit: cover; margin-right: 12px; border-radius: 10px; border: 1px solid var(--separator); }
        .goods-info { flex: 1; font-size: 13px; color: var(--text-secondary); }
        .goods-info p { margin: 3px 0; }
        .goods-info strong { color: var(--text-primary); font-size: 14px; }
        .goods-link-line { margin: 8px 0 4px; font-size: 11px; background: var(--bg-input); padding: 6px 8px; border-radius: 8px; border-left: 3px solid var(--color-blue); word-break: break-all; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .goods-link-text { color: var(--color-blue); flex: 1; min-width: 100px; }
        .copy-link-btn { background: var(--color-blue); border: none; color: white; padding: 4px 10px; font-size: 11px; font-weight: 600; cursor: pointer; width: auto; margin: 0; border-radius: 6px; white-space: nowrap; }
        .goods-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
        .goods-actions button { padding: 5px 10px; font-size: 12px; font-weight: 500; background: var(--bg-input); border: 1px solid var(--separator); color: var(--text-secondary); cursor: pointer; margin: 0; width: auto; border-radius: 8px; }
        .goods-actions button:hover { background: #E5E5EA; }

        /* 浮层 */
        .goods-form-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.40); backdrop-filter: blur(6px); z-index: 300; display: flex; align-items: center; justify-content: center; }
        .goods-form-card { width: 92%; max-width: 450px; max-height: 90vh; overflow-y: auto; background: rgba(255,255,255,0.98); border-radius: 20px; box-shadow: 0 12px 48px rgba(0,0,0,0.18); padding: 28px 24px; color: var(--text-primary); }
        .goods-form-card h3 { text-align: center; margin-bottom: 20px; color: var(--text-primary); font-size: 18px; font-weight: 700; }
        .goods-form-card .input-group { margin-bottom: 14px; }
        .goods-form-card label { color: var(--text-tertiary); }
        .goods-form-card .file-hint { font-size: 12px; color: var(--text-placeholder); margin-top: 4px; }
        .goods-form-card .form-actions { display: flex; gap: 10px; margin-top: 20px; }
        .goods-form-card .form-actions button { margin: 0; flex: 1; }
        .cancel-btn { background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--separator); }
        .cancel-btn:hover { background: #E5E5EA; }
        .import-file-btn { background: var(--bg-input); padding: 9px 12px; margin-top: 6px; font-size: 13px; cursor: pointer; border: 1px dashed var(--separator); border-radius: 10px; text-align: center; color: var(--text-secondary); font-weight: 500; width: 100%; }
        .import-file-btn:hover { background: #E5E5EA; }
        #goodsManageList .goods-item { margin-bottom: 10px; padding: 10px; background: var(--bg-input); }
        .goods-manage-header { display: flex; justify-content: space-between; margin-bottom: 14px; }
        .loan-user-item { color: var(--text-secondary); }
        .loan-request-item { border-left: 3px solid var(--color-blue); background: var(--bg-input); border-radius: 10px; margin-bottom: 12px; padding: 12px; }
        #withdrawRecordList p { margin: 5px 0; color: var(--text-secondary); }
        .preview-img { max-width: 100%; max-height: 100px; margin-top: 6px; border-radius: 8px; border: 1px solid var(--separator); }

        /* 申诉相关 */
        .appeal-box { background: rgba(255,149,0,0.08); border: 1px solid rgba(255,149,0,0.25); border-radius: 10px; padding: 12px; margin-top: 8px; }
        .appeal-box textarea { min-height: 60px; }

        /* ========== 平滑动画与过渡增强 ========== */
        /* 浮层淡入动画 */
        .goods-form-overlay:not(.hidden) { animation: overlayFadeIn 0.22s cubic-bezier(0.22,1,0.36,1); }
        @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }
        .goods-form-card { animation: cardSlideUp 0.26s cubic-bezier(0.22,1,0.36,1); }
        @keyframes cardSlideUp { from { opacity: 0; transform: translateY(28px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

        /* 分类/商品卡片悬停动画 */
        .goods-item { transition: box-shadow 0.18s, transform 0.15s; }
        .goods-item:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.13); transform: translateY(-2px); }

        /* 按钮按压反馈已有，增强圆角按钮动画 */
        .admin-circle-btn { transition: background 0.15s, transform 0.12s, box-shadow 0.15s; }
        .admin-circle-btn:hover { box-shadow: 0 4px 16px rgba(0,122,255,0.22); }

        /* 余额信息栏平滑数字切换 */
        #withdrawableDisplay, #todayIncomeDisplay, #todayCountDisplay { transition: color 0.3s; }

        /* 侧边栏项目悬停 */
        .sidebar-btn { transition: background 0.15s, transform 0.1s; }
        .sidebar-btn:active { transform: scale(0.97); }

        /* 通知面板平滑 */
        .notif-item { transition: background 0.15s, transform 0.1s; }

        /* 输入框聚焦动画已有，增强占位 */
        input, textarea, select { transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }

        /* 登录/注册卡片入场 */
        #loginView .card, #registerView .card { animation: cardSlideUp 0.3s cubic-bezier(0.22,1,0.36,1); }

        /* Toast提示更圆润 */
        #toastContainer { transition: opacity 0.25s; }