* { transition: background-color 0.3s, border-color 0.3s, color 0.2s; margin: 0; padding: 0; box-sizing: border-box; }

    :root, [data-theme="light"] {
      --bg: #FAFBFC; --card: #FFFFFF; --border: #E8ECF0; --text: #1A2B3C; --muted: #8492A6;
      --subtle: #F4F7F9; --accent: #0A3D62; --accent-light: #4ECDC4; --input-bg: #FFFFFF;
      --sidebar-bg: #FFFFFF; --hover-bg: #F0F4F8; --shadow: rgba(10,61,98,0.06);
      --green: #27AE60; --red: #E74C3C; --gold: #D4A574; --blue: var(--accent);
      --green-soft: rgba(39,174,96,0.10); --red-soft: rgba(231,76,60,0.10);
      --gold-soft: rgba(212,165,116,0.12); --accent-soft: rgba(78,205,196,0.12);
      --green-border: rgba(39,174,96,0.25); --red-border: rgba(231,76,60,0.25);
      --gold-border: rgba(212,165,116,0.25);
      --grid-line: rgba(232,236,240,0.6);
      --accent-shadow: rgba(78,205,196,0.35);
      --accent-light-text: #FFFFFF;
    }
    [data-theme="dark"] {
      --bg: #0D1B2A; --card: #152738; --border: #1F3A52; --text: #E4ECF2; --muted: #6B8CA8;
      --subtle: #0E2233; --accent: #4ECDC4; --accent-light: #2D9CDB; --input-bg: #0D1B2A;
      --sidebar-bg: #0B1620; --hover-bg: #1A3045; --shadow: rgba(0,0,0,0.3);
      --green: #27AE60; --red: #E74C3C; --gold: #D4A574; --blue: var(--accent);
      --green-soft: rgba(39,174,96,0.12); --red-soft: rgba(231,76,60,0.12);
      --gold-soft: rgba(212,165,116,0.15); --accent-soft: rgba(45,156,219,0.15);
      --green-border: rgba(39,174,96,0.30); --red-border: rgba(231,76,60,0.30);
      --gold-border: rgba(212,165,116,0.30);
      --grid-line: rgba(31,58,82,0.5);
      --accent-shadow: rgba(45,156,219,0.35);
      --accent-light-text: #FFFFFF;
    }
    [data-theme="sand"] {
      --bg: #FAF7F2; --card: #FFFFFF; --border: #EDE6DA; --text: #2C2C2C; --muted: #8B7E6A;
      --subtle: #F5F0E8; --accent: #8B6F4E; --accent-light: #D4A574; --input-bg: #FFFFFF;
      --sidebar-bg: #F7F3EC; --hover-bg: #EDE6DA; --shadow: rgba(44,44,44,0.05);
      --green: #27AE60; --red: #E74C3C; --gold: #D4A574; --blue: #5B8BA8;
      --green-soft: rgba(39,174,96,0.10); --red-soft: rgba(231,76,60,0.10);
      --gold-soft: rgba(212,165,116,0.18); --accent-soft: rgba(212,165,116,0.18);
      --green-border: rgba(39,174,96,0.25); --red-border: rgba(231,76,60,0.25);
      --gold-border: rgba(212,165,116,0.30);
      --grid-line: rgba(237,230,218,0.6);
      --accent-shadow: rgba(139,111,78,0.30);
      --accent-light-text: #FFFFFF;
    }
    [data-theme="forest"] {
      --bg: #F2F5F4; --card: #FFFFFF; --border: #DDE5E1; --text: #1C2B26; --muted: #6B8278;
      --subtle: #ECF1EE; --accent: #2D6A4F; --accent-light: #52B788; --input-bg: #FFFFFF;
      --sidebar-bg: #EEF3F0; --hover-bg: #DDE5E1; --shadow: rgba(28,43,38,0.05);
      --green: #27AE60; --red: #E74C3C; --gold: #D4A574; --blue: #3A7CA5;
      --green-soft: rgba(39,174,96,0.10); --red-soft: rgba(231,76,60,0.10);
      --gold-soft: rgba(212,165,116,0.12); --accent-soft: rgba(82,183,136,0.15);
      --green-border: rgba(39,174,96,0.25); --red-border: rgba(231,76,60,0.25);
      --gold-border: rgba(212,165,116,0.25);
      --grid-line: rgba(221,229,225,0.6);
      --accent-shadow: rgba(82,183,136,0.35);
      --accent-light-text: #FFFFFF;
    }

    /* 涨跌颜色模式：红涨绿跌（中国习惯）；默认绿涨红跌 */
    [data-up-color="red"] {
      --green: #E74C3C;
      --red: #27AE60;
      --green-soft: rgba(231,76,60,0.12);
      --red-soft: rgba(39,174,96,0.12);
      --green-border: rgba(231,76,60,0.30);
      --red-border: rgba(39,174,96,0.30);
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 { color: var(--text); }
    a { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 1.25rem;
      box-shadow: 0 1px 3px var(--shadow), 0 1px 2px var(--shadow);
    }

    .btn {
      padding: 0.55rem 1.1rem;
      border-radius: 8px;
      border: none;
      cursor: pointer;
      font-size: 0.875rem;
      font-weight: 500;
      transition: all 0.2s;
      font-family: inherit;
    }
    .btn:active { transform: scale(0.97); }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { opacity: 0.88; }
    .btn-accent { background: var(--accent-light); color: var(--accent-light-text); }
    .btn-accent:hover { opacity: 0.88; }
    .btn-danger { background: var(--red); color: #fff; }
    .btn-danger:hover { opacity: 0.88; }
    .btn-outline {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
    }
    .btn-outline:hover { background: var(--hover-bg); }

    .input {
      background: var(--input-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.6rem 0.85rem;
      color: var(--text);
      font-size: 0.875rem;
      width: 100%;
      outline: none;
      font-family: inherit;
      transition: border-color 0.2s;
    }
    .input:focus { border-color: var(--accent); }
    .input::placeholder { color: var(--muted); }
    select.input { cursor: pointer; }

    .tab-btn {
      padding: 0.5rem 1rem;
      border-radius: 999px;
      border: 1px solid transparent;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      font-size: 0.875rem;
      font-weight: 500;
      transition: all 0.2s;
      font-family: inherit;
      white-space: nowrap;
    }
    .tab-btn.active {
      background: var(--accent);
      color: #fff;
      border-color: var(--accent);
    }
    .tab-btn:hover:not(.active) {
      background: var(--hover-bg);
      color: var(--text);
      border-color: var(--border);
    }

    .positive { color: var(--green); }
    .negative { color: var(--red); }

    .sidebar {
      position: fixed; left: 0; top: 0; bottom: 0; width: 220px;
      background: var(--sidebar-bg); border-right: 1px solid var(--border);
      display: flex; flex-direction: column; padding: 1.5rem 1rem; z-index: 10;
    }

    .main-content {
      padding: 1.5rem; max-width: 1200px; transition: margin-left 0.3s;
    }

    .mobile-nav {
      position: fixed; bottom: 0; left: 0; right: 0;
      background: var(--sidebar-bg); border-top: 1px solid var(--border);
      display: flex; justify-content: space-around; padding: 0.5rem 0.25rem; z-index: 10;
      padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    }

    .mobile-topbar {
      display: none;
      position: sticky; top: 0; z-index: 20;
      background: var(--sidebar-bg); border-bottom: 1px solid var(--border);
    }

    .refresh-btn button {
      background: var(--accent-light) !important;
      box-shadow: 0 3px 12px var(--accent-shadow) !important;
    }
    .refresh-btn button:hover { opacity: 0.9; }

    table { width: 100%; border-collapse: collapse; }
    thead tr { border-bottom: 1px solid var(--border); }
    thead th { padding: 0.6rem 0.5rem; text-align: left; font-weight: 500; color: var(--muted); font-size: 0.8rem; }
    tbody tr { border-bottom: 1px solid var(--subtle); transition: background 0.15s; }
    tbody tr:hover { background: var(--hover-bg); }
    tbody td { padding: 0.65rem 0.5rem; }

    .scrollbar::-webkit-scrollbar { width: 5px; height: 5px; }
    .scrollbar::-webkit-scrollbar-track { background: transparent; }
    .scrollbar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
    .scrollbar::-webkit-scrollbar-thumb:hover { background: var(--muted); }

    .logo-icon { display: inline-flex; align-items: center; justify-content: center; }

    .theme-switcher {
      display: flex; align-items: center; gap: 0.5rem;
      padding: 0.6rem 0; margin-bottom: 0.5rem;
    }
    .theme-switcher-label {
      font-size: 0.7rem; color: var(--muted); margin-right: 0.25rem; white-space: nowrap;
    }
    .theme-dot {
      width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
      border: 2px solid var(--border); transition: all 0.2s; flex-shrink: 0;
      position: relative; display: flex; align-items: center; justify-content: center;
      padding: 0;
    }
    .theme-dot:hover { transform: scale(1.12); }
    .theme-dot.active {
      transform: scale(1.15);
    }

    .modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.4);
      display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem;
    }

    .nav-item {
      display: flex; align-items: center; width: 100%; text-align: left;
      padding: 0.55rem 0.75rem; margin-bottom: 0.15rem;
      border-radius: 8px; border: none; background: transparent;
      color: var(--muted); cursor: pointer; font-size: 0.875rem; font-weight: 500;
      transition: all 0.2s; font-family: inherit;
    }
    .nav-item:hover { background: var(--hover-bg); color: var(--text); }
    .nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

    .mobile-nav-item {
      background: transparent; border: none; cursor: pointer;
      display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
      padding: 0.3rem 0.5rem; border-radius: 8px; min-width: 48px;
      color: var(--muted); transition: all 0.2s; font-family: inherit;
    }
    .mobile-nav-item.active { color: var(--accent); }
    .mobile-nav-label { font-size: 0.6rem; font-weight: 500; }
    .mobile-nav-add { position: relative; top: -10px; }

    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

    @media (max-width: 768px) {
      .sidebar { display: none; }
      .mobile-topbar { display: block; }
      .mobile-nav { display: flex; }
      .main-content { margin-left: 0 !important; padding: 0.75rem; padding-bottom: 5.5rem; }
      .chart-container { height: 220px !important; }
      table { font-size: 0.72rem; }
      th, td { padding: 0.4rem 0.2rem !important; }
      .refresh-btn { bottom: 75px !important; right: 0.75rem !important; }
      .refresh-label { bottom: 130px !important; }
      .card { padding: 1rem; }
    }
    @media (min-width: 769px) {
      .mobile-topbar { display: none; }
      .mobile-nav { display: none; }
      .main-content { margin-left: 220px; }
    }