:root {
            --primary: #10b981;
            --primary-hover: #059669;
            --bg: #f3f4f6;
            --card: #ffffff;
            --text: #1f2937;
            --border: #e5e7eb;
            --red: #ef4444;
            --blue: #3b82f6;
            --purple: #8b5cf6;
            --orange: #f59e0b;
            --stat-bg: #f9fafb;
            --input-bg: #ffffff;
            --highlight: #f0f9ff;
            --muted: #6b7280;
            --loc-bg: #e0f2fe;
            --loc-text: #0369a1;
            --preview-bg: #ecfdf5;
            --preview-text: #065f46;
        }

        [data-theme="dark"] {
            --bg: #0f172a;
            --card: #1e293b;
            --text: #e2e8f0;
            --border: #334155;
            --stat-bg: #1e293b;
            --input-bg: #0f172a;
            --highlight: #1e3a5f;
            --muted: #94a3b8;
            --loc-bg: #1e3a5f;
            --loc-text: #60a5fa;
            --preview-bg: #064e3b;
            --preview-text: #6ee7b7;
        }

        * { box-sizing: border-box; }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background-color: var(--bg);
            color: var(--text);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
        }

        .container {
            max-width: 1200px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .card {
            background: var(--card);
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            padding: 20px;
            border: 1px solid var(--border);
        }

        h2, h3 { margin-top: 0; }

        /* Tabs */
        .tabs {
            display: flex;
            gap: 0;
            border-bottom: 2px solid var(--border);
            margin-bottom: 15px;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            font-weight: 600;
            color: #6b7280;
            border-bottom: 3px solid transparent;
            transition: all 0.2s;
        }
        .tab:hover { color: var(--primary); }
        .tab.active { color: var(--primary); border-bottom-color: var(--primary); }
        .tab-content { display: none; }
        .tab-content.active { display: block; }

        .is-profit { color: var(--primary); }
        .is-loss { color: var(--red); }

        /* Form */
        .form-group {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: flex-end;
            margin-bottom: 15px;
        }

        .input-wrapper {
            display: flex;
            flex-direction: column;
            gap: 5px;
            flex: 1;
            min-width: 100px;
        }

        label {
            font-size: 0.85rem;
            color: #4b5563;
            font-weight: 500;
        }

        input, select {
            padding: 10px;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 1rem;
            width: 100%;
            box-sizing: border-box;
            background: var(--input-bg);
            color: var(--text);
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        button:hover { opacity: 0.9; }

        .btn-add {
            background: var(--primary);
            color: white;
            width: 100%;
            height: 42px;
            margin-top: 5px;
            font-size: 1rem;
        }

        .btn-red { background: var(--red); color: white; padding: 4px 8px; font-size: 0.8rem; }
        .btn-blue { background: var(--blue); color: white; padding: 8px 12px; font-size: 0.9rem; }
        .btn-purple { background: var(--purple); color: white; padding: 8px 12px; font-size: 0.9rem; }
        .btn-orange { background: var(--orange); color: white; padding: 8px 12px; font-size: 0.9rem; }

        /* Table */
        .table-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

        th, td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border); }

        th {
            background: var(--stat-bg);
            font-weight: 600;
            color: var(--text);
            white-space: nowrap;
        }

        td { white-space: nowrap; }

        .profit-pos { color: var(--primary); font-weight: bold; }
        .profit-neg { color: var(--red); font-weight: bold; }

        .location-tag {
            background: var(--loc-bg);
            color: var(--loc-text);
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 0.8rem;
        }

        /* Tags */
        .entry-tags { display: flex; flex-wrap: wrap; gap: 4px; }
        .entry-tag {
            display: inline-block;
            padding: 1px 6px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
        }
        .tag-rain { background: #dbeafe; color: #1d4ed8; }
        .tag-holiday { background: #fce7f3; color: #be185d; }
        .tag-promo { background: #fef3c7; color: #92400e; }
        .tag-weekend { background: #e0e7ff; color: #3730a3; }
        .tag-good { background: #d1fae5; color: #065f46; }
        .tag-bad { background: #fee2e2; color: #991b1b; }
        .tag-custom { background: #f3e8ff; color: #6b21a8; }
        [data-theme="dark"] .tag-rain { background: #1e3a5f; color: #93c5fd; }
        [data-theme="dark"] .tag-holiday { background: #4a1942; color: #f9a8d4; }
        [data-theme="dark"] .tag-promo { background: #451a03; color: #fcd34d; }
        [data-theme="dark"] .tag-weekend { background: #1e1b4b; color: #a5b4fc; }
        [data-theme="dark"] .tag-good { background: #064e3b; color: #6ee7b7; }
        [data-theme="dark"] .tag-bad { background: #450a0a; color: #fca5a5; }
        [data-theme="dark"] .tag-custom { background: #3b0764; color: #d8b4fe; }

        .tag-selector { display: flex; flex-wrap: wrap; gap: 6px; }
        .tag-btn {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.8rem;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.15s;
            opacity: 0.6;
        }
        .tag-btn.selected { opacity: 1; border-color: var(--primary); }

        /* Theme Toggle */
        .theme-toggle {
            background: none;
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 6px 12px;
            cursor: pointer;
            font-size: 1.1rem;
            color: var(--text);
            transition: all 0.2s;
        }
        .theme-toggle:hover { border-color: var(--primary); }

        /* Sync Bar */
        .sync-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 15px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 10px;
            font-size: 0.85rem;
            flex-wrap: wrap;
            gap: 8px;
        }
        .sync-bar .user-info {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .sync-bar .user-info img {
            width: 28px;
            height: 28px;
            border-radius: 50%;
        }
        .sync-bar .sync-status {
            color: var(--muted);
            font-size: 0.8rem;
        }
        .sync-bar .sync-status.synced { color: var(--primary); }
        .sync-bar .sync-status.syncing { color: var(--orange); }
        .sync-bar .sync-status.error { color: var(--red); }
        .btn-login {
            background: #4285f4;
            color: white;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.85rem;
            cursor: pointer;
            border: none;
            font-weight: 600;
        }
        .btn-login:hover { opacity: 0.9; }
        .btn-logout {
            background: none;
            border: 1px solid var(--border);
            color: var(--muted);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.8rem;
            cursor: pointer;
        }

        /* Notebook Selector */
        .notebook-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 15px;
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .notebook-bar select {
            flex: 1;
            min-width: 120px;
            max-width: 300px;
            padding: 6px 10px;
            font-size: 0.9rem;
            font-weight: 600;
        }
        .nb-btn {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.8rem;
            cursor: pointer;
            border: 1px solid var(--border);
            background: var(--card);
            color: var(--text);
        }
        .nb-btn:hover { border-color: var(--primary); }

        /* Settings */
        .setting-row {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
        }
        .setting-row:last-child { border-bottom: none; }
        .setting-label { flex: 1; font-weight: 500; }
        .setting-input { width: 200px; }

        /* Custom Expense Tags */
        .expense-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
        .expense-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: #e0f2fe;
            color: #0369a1;
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.85rem;
        }
        .expense-tag .remove {
            cursor: pointer;
            color: #ef4444;
            font-weight: bold;
            margin-left: 4px;
        }

        /* Report */
        .report-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }
        .report-card {
            background: var(--stat-bg);
            padding: 15px;
            border-radius: 8px;
            border: 1px solid var(--border);
            text-align: center;
        }
        .report-card .value { font-size: 1.5rem; font-weight: bold; margin: 5px 0; }
        .report-card .label { font-size: 0.8rem; color: #6b7280; }

        .location-rank {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            border-bottom: 1px solid var(--border);
        }
        .location-rank:last-child { border-bottom: none; }
        .rank-num { font-weight: bold; color: var(--primary); width: 24px; }
        .rank-bar {
            flex: 1;
            height: 8px;
            background: var(--border);
            border-radius: 4px;
            overflow: hidden;
        }
        .rank-bar-fill {
            height: 100%;
            background: var(--primary);
            border-radius: 4px;
        }

        /* Compact Stats Card */
        .stats-card { padding: 0 !important; overflow: hidden; }
        .stats-hero {
            display: flex; justify-content: space-between; align-items: center;
            padding: 12px 16px; background: var(--stat-bg);
        }
        .stats-hero-label { font-size: 0.75rem; color: var(--muted); margin-bottom: 2px; }
        .stats-hero-value { font-size: 1.6rem; font-weight: 700; color: var(--primary); }
        .stats-hero-value.is-loss { color: var(--red); }
        .stats-month-select {
            padding: 4px 8px; font-size: 0.8rem; border: 1px solid var(--border);
            border-radius: 6px; background: var(--input-bg); color: var(--text);
        }
        .stats-row {
            display: grid; grid-template-columns: repeat(4, 1fr);
            border-top: 1px solid var(--border);
        }
        .stats-cell {
            padding: 10px 12px; text-align: center;
            border-right: 1px solid var(--border);
        }
        .stats-cell:last-child { border-right: none; }
        .stats-cell-label { font-size: 0.65rem; color: var(--muted); margin-bottom: 2px; }
        .stats-cell-value { font-size: 1.05rem; font-weight: 700; }
        .stats-cell-value.blue { color: #3b82f6; }
        .stats-cell-value.red { color: #ef4444; }
        .stats-cell-value.green { color: var(--primary); }
        .stats-divider { height: 3px; background: var(--border); }

        /* Chart */
        .chart-container { position: relative; height: 300px; margin-top: 15px; }

        @media (max-width: 600px) {
            .hide-mobile { display: none !important; }
            body { padding: 6px; }
            .container { max-width: 100%; }
            .card { padding: 10px; margin-bottom: 8px; }

            /* Stats card mobile: 2-col grid rows */
            .stats-card { margin-bottom: 8px; }
            .stats-row { grid-template-columns: 1fr 1fr; }
            .stats-cell {
                padding: 8px 6px;
                border-bottom: 1px solid var(--border);
            }
            .stats-cell-value { font-size: 0.95rem; }
            .stats-hero { padding: 10px 14px; }
            .stats-hero-value { font-size: 1.4rem; }

            /* Header: stack title and buttons */
            .card h2 { font-size: 1.1rem; }
            .btn-orange, .btn-red, .btn-blue, .btn-purple {
                padding: 5px 7px; font-size: 0.7rem;
            }

            /* Notebook bar */
            .notebook-bar {
                padding: 5px 8px; font-size: 0.8rem; gap: 4px;
            }
            .notebook-bar select { max-width: 120px; font-size: 0.8rem; }
            .nb-btn { padding: 3px 6px; font-size: 0.75rem; }

            /* Forms */
            .form-group { flex-direction: column; }
            .input-wrapper { width: 100%; }
            input, select { font-size: 16px; }

            /* Report */
            .report-grid { grid-template-columns: 1fr 1fr; }
            .report-card .value { font-size: 1.2rem; }
            .report-card .label { font-size: 0.7rem; }

            /* Location ranking */
            .location-rank { flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
            .location-rank span[style*="width:180px"] { width: 100% !important; }

            /* Settings */
            .setting-row { flex-direction: column; align-items: flex-start; gap: 5px; }
            .setting-input { width: 100%; }

            /* Tabs */
            .tabs { overflow-x: auto; }
            .tab { white-space: nowrap; padding: 10px 12px; font-size: 0.85rem; }

            /* Tags */
            .tag-selector { gap: 4px; }
            .tag-btn { padding: 3px 8px; font-size: 0.75rem; }

            /* Table: scrollable with min-width */
            .table-container {
                position: relative;
            }
            .table-container table { min-width: 700px; }
            table { font-size: 0.75rem; }
            th, td { padding: 6px 4px; }

            /* Sync bar */
            .sync-bar { padding: 5px 8px; font-size: 0.75rem; }
            .btn-login { padding: 4px 8px; font-size: 0.75rem; }
            .btn-logout { font-size: 0.7rem; padding: 3px 6px; }

            /* Chart */
            .chart-container { height: 200px; }
        }

        @media print {
            .no-print { display: none; }
            body { background: white; }
            .card { border: none; box-shadow: none; }
        }

        /* ==================== LOGIN GATE ==================== */
        .login-gate {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
        }
        .login-gate-logo { font-size: 4rem; margin-bottom: 10px; }
        .login-gate h1 { font-size: 1.8rem; margin-bottom: 8px; color: var(--text); }
        .login-gate p { color: var(--muted); margin-bottom: 30px; max-width: 400px; }
        .login-gate .btn-google {
            display: inline-flex; align-items: center; gap: 10px;
            background: #4285f4; color: white; padding: 12px 28px;
            border-radius: 8px; font-size: 1rem; font-weight: 600;
            cursor: pointer; border: none; transition: opacity 0.2s;
        }
        .login-gate .btn-google:hover { opacity: 0.9; }
        .login-gate .features {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
            max-width: 600px; margin-top: 40px;
        }
        .login-gate .feature-item { text-align: center; }
        .login-gate .feature-icon { font-size: 1.8rem; margin-bottom: 6px; }
        .login-gate .feature-text { font-size: 0.8rem; color: var(--muted); }
        .login-divider {
            display: flex; align-items: center; gap: 12px;
            margin: 20px 0; width: 100%; max-width: 320px; color: var(--muted); font-size: 0.85rem;
        }
        .login-divider::before, .login-divider::after {
            content: ''; flex: 1; height: 1px; background: var(--border);
        }
        .email-form {
            display: flex; flex-direction: column; gap: 10px;
            width: 100%; max-width: 320px;
        }
        .email-form input {
            padding: 11px 14px; border-radius: 8px; border: 1px solid var(--border);
            font-size: 0.95rem; background: var(--card); color: var(--text);
            outline: none; transition: border-color 0.2s;
        }
        .email-form input:focus { border-color: var(--primary); }
        .email-form .btn-email {
            padding: 11px; border-radius: 8px; border: none;
            background: var(--primary); color: white;
            font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
        }
        .email-form .btn-email:hover { opacity: 0.9; }
        .email-form .btn-email:disabled { opacity: 0.5; cursor: not-allowed; }
        .email-form .form-links {
            display: flex; justify-content: space-between; font-size: 0.8rem;
        }
        .email-form .form-links a {
            color: var(--primary); cursor: pointer; text-decoration: none;
        }
        .email-form .form-links a:hover { text-decoration: underline; }
        .email-form .form-error {
            color: #ef4444; font-size: 0.8rem; min-height: 1.2em; text-align: center;
        }
        @media (max-width: 600px) {
            .login-gate h1 { font-size: 1.4rem; }
            .login-gate .features { grid-template-columns: repeat(3, 1fr); gap: 10px; }
        }

        /* ==================== TRIAL BANNER ==================== */
        .trial-banner {
            display: none;
            background: linear-gradient(135deg, #fef3c7, #fde68a);
            color: #92400e;
            padding: 8px 16px;
            border-radius: 10px;
            margin-bottom: 10px;
            font-size: 0.85rem;
            font-weight: 500;
            text-align: center;
        }
        .trial-banner strong { color: #b45309; }
        [data-theme="dark"] .trial-banner {
            background: linear-gradient(135deg, #451a03, #78350f);
            color: #fde68a;
        }
        [data-theme="dark"] .trial-banner strong { color: #fcd34d; }

        /* ==================== PAYWALL OVERLAY ==================== */
        .paywall-overlay {
            display: none;
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at center, rgba(15, 23, 42, 0.96), rgba(3, 7, 18, 0.99)); /* 极奢深邃暗黑渐变 */
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            z-index: 9999;
            overflow-y: auto;
            padding: 30px 20px;
            box-sizing: border-box;
        }

        /* 属性选择器强行提权，将 JS 设定的 block 转化为更现代稳定的弹性 flex 居中 */
        .paywall-overlay[style*="display: block"],
        .paywall-overlay[style*="block"] {
            display: flex !important;
            justify-content: center;
            align-items: center;
        }

        .paywall-container {
            max-width: 650px; /* 适度拉宽，释放网格压力，更加大气 */
            width: 100%;
            margin: auto; /* flex 容器下自动分摊剩余空间实现完美居中 */
            text-align: center;
            background: rgba(30, 41, 59, 0.45); /* 极其高贵的磨砂半透明玻璃态 */
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 28px;
            padding: 45px 35px;
            box-shadow: 0 25px 70px -10px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            position: relative;
        }
        .paywall-container h2 {
            color: #ffffff !important; /* 彻底解耦全局明亮模式 */
            font-size: 2.1rem;
            margin-bottom: 12px;
            font-weight: 800;
            letter-spacing: -0.02em;
            text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }
        .paywall-container .paywall-sub {
            color: #94a3b8 !important; /* 解耦全局，使用高级次级灰蓝 */
            margin-bottom: 35px;
            font-size: 1.05rem;
            line-height: 1.6;
        }
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 完美的双列黄金对齐 */
            gap: 25px;
            max-width: 580px;
            width: 100%;
            margin: 0 auto;
        }
        .pricing-card {
            background: rgba(255, 255, 255, 0.03) !important; /* 高端磨砂微亮 */
            border-radius: 20px;
            padding: 35px 24px;
            border: 1px solid rgba(255, 255, 255, 0.08) !important; /* 极细高光边缘 */
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            min-height: 320px;
        }
        .pricing-card:hover { 
            border-color: rgba(255, 255, 255, 0.2) !important; 
            transform: translateY(-6px);
            background: rgba(255, 255, 255, 0.06) !important;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
        }
        .pricing-card.popular {
            border-color: #10b981 !important; /* 强制极光绿发光边缘 */
            background: rgba(16, 185, 129, 0.04) !important;
            box-shadow: 0 0 30px rgba(16, 185, 129, 0.15), inset 0 0 12px rgba(16, 185, 129, 0.05);
        }
        .pricing-card.popular:hover {
            border-color: #34d399 !important;
            background: rgba(16, 185, 129, 0.06) !important;
            box-shadow: 0 0 40px rgba(16, 185, 129, 0.3), inset 0 0 15px rgba(16, 185, 129, 0.1);
        }
        .pricing-card.popular::before {
            content: '★ 最划算 BEST VALUE';
            position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
            background: linear-gradient(135deg, #10b981, #059669);
            color: #ffffff;
            padding: 4px 16px; border-radius: 20px; font-size: 0.75rem; font-weight: 800;
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
            letter-spacing: 0.05em;
            white-space: nowrap;
        }
        .pricing-card .plan-name {
            font-size: 0.95rem; color: #94a3b8 !important; margin-bottom: 15px; font-weight: 700;
            letter-spacing: 0.05em; text-transform: uppercase;
        }
        .pricing-card .plan-price {
            font-size: 2.6rem; font-weight: 800; color: #ffffff !important; margin-bottom: 4px;
            letter-spacing: -0.03em;
        }
        .pricing-card .plan-unit { font-size: 0.88rem; color: #64748b !important; margin-bottom: 18px; }
        .pricing-card .plan-save {
            font-size: 0.85rem; color: #34d399 !important; font-weight: 700; margin-bottom: 22px;
            min-height: 18px; /* 保持空占位一致，不致参差不齐 */
        }
        .pricing-card .btn-subscribe {
            width: 100%; padding: 13px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px;
            font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.25s ease;
            background: rgba(255, 255, 255, 0.08); color: #ffffff !important;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
        .pricing-card .btn-subscribe:hover { 
            background: rgba(255, 255, 255, 0.18); 
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 4px 15px rgba(255, 255, 255, 0.08);
        }
        .pricing-card.popular .btn-subscribe {
            background: linear-gradient(135deg, #10b981, #059669);
            color: #ffffff !important;
            border: none;
            box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3);
        }
        .pricing-card.popular .btn-subscribe:hover {
            background: linear-gradient(135deg, #059669, #047857);
            box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5);
            transform: scale(1.02);
        }
        .pricing-card .btn-subscribe:disabled {
            opacity: 0.4; cursor: not-allowed;
            background: rgba(255, 255, 255, 0.05);
            color: #64748b !important;
            border-color: transparent;
        }
        .paywall-footer {
            margin-top: 35px; font-size: 0.85rem; color: #64748b !important;
        }
        @media (max-width: 600px) {
            .pricing-grid { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; gap: 20px; }
            .paywall-container { padding: 35px 20px; margin: 2vh auto; }
            .paywall-container h2 { font-size: 1.6rem; }
            .pricing-card { min-height: 280px; padding: 25px 20px; }
        }