:root {
      --bg: #f4f7fb;
      --card: #ffffff;
      --text: #172033;
      --muted: #68758c;
      --line: #dde5f0;
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --green: #16a34a;
      --red: #dc2626;
      --amber: #d97706;
      --shadow: 0 16px 40px rgba(23, 32, 51, 0.08);
      --radius: 18px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 34rem),
        linear-gradient(135deg, #f8fbff 0%, var(--bg) 100%);
    }

    .app {
      width: min(1280px, calc(100% - 32px));
      margin: 0 auto;
      padding: 32px 0 48px;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
      margin-bottom: 24px;
    }

    h1 {
      margin: 0 0 8px;
      font-size: clamp(28px, 4vw, 44px);
      letter-spacing: -0.04em;
    }

    .subtitle {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    button, .file-label {
      border: 0;
      border-radius: 12px;
      padding: 11px 16px;
      color: #fff;
      background: var(--primary);
      font-weight: 700;
      cursor: pointer;
      transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
      font-size: 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    button:hover, .file-label:hover {
      background: var(--primary-dark);
      transform: translateY(-1px);
    }

    button.secondary, .file-label.secondary {
      background: #334155;
      box-shadow: 0 8px 18px rgba(51, 65, 85, 0.18);
    }

    button.danger {
      background: var(--red);
      box-shadow: 0 8px 18px rgba(220, 38, 38, 0.18);
    }

    input[type="file"] { display: none; }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(150px, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }

    .summary-card {
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(221, 229, 240, 0.8);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px);
    }

    .summary-card span {
      display: block;
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 9px;
    }

    .summary-card strong {
      font-size: clamp(19px, 2.5vw, 28px);
      letter-spacing: -0.03em;
    }

    .profit { color: var(--green); }
    .loss { color: var(--red); }
    .warning { color: var(--amber); }

    .layout {
      display: grid;
      grid-template-columns: 390px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
    }

    .panel {
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(221, 229, 240, 0.9);
      border-radius: 24px;
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .panel-head {
      padding: 20px 22px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .panel-head h2 {
      margin: 0;
      font-size: 19px;
    }

    .panel-body { padding: 20px 22px 22px; }

    form {
      display: grid;
      gap: 14px;
    }

    .field { display: grid; gap: 7px; }

    label {
      color: #334155;
      font-size: 13px;
      font-weight: 700;
    }

    input, select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px 13px;
      font: inherit;
      color: var(--text);
      background: #fbfdff;
      outline: none;
      transition: border .15s ease, box-shadow .15s ease, background .15s ease;
    }

    input:focus, select:focus, textarea:focus {
      border-color: rgba(37, 99, 235, 0.72);
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
      background: #fff;
    }

    textarea { resize: vertical; min-height: 74px; }

    .two-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .form-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 4px;
    }

    .filter-bar {
      display: grid;
      grid-template-columns: minmax(180px, 1.4fr) minmax(110px, .8fr) minmax(100px, .7fr) repeat(2, minmax(120px, .8fr)) minmax(90px, auto);
      gap: 10px;
      margin-bottom: 14px;
    }

    .filter-bar button { white-space: nowrap; }

    .table-wrap {
      overflow: auto;
      max-height: calc(100vh - 180px);
      min-height: 860px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 1800px;
    }

    th, td {
      padding: 13px 12px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: middle;
      font-size: 14px;
    }

    th {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #f8fbff;
      color: #475569;
      font-size: 12px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    tbody tr:hover { background: #f8fbff; }

    .money { font-variant-numeric: tabular-nums; font-weight: 700; }
    .nowrap { white-space: nowrap; }
    .muted { color: var(--muted); }

    .profit-preview {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 14px 15px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #f8fbff;
    }

    .profit-preview span {
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .profit-preview strong { font-size: 21px; }

    .status-badge {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      padding: 5px 8px;
      border-radius: 999px;
      color: #334155;
      background: #e2e8f0;
      font-size: 12px;
      font-weight: 700;
    }

    .status-badge.settled { color: #166534; background: #dcfce7; }
    .status-badge.cancelled { color: #991b1b; background: #fee2e2; }
    .status-badge.shipping { color: #92400e; background: #fef3c7; }

    .row-actions {
      display: flex;
      gap: 8px;
    }

    .row-actions button {
      padding: 8px 10px;
      border-radius: 10px;
      box-shadow: none;
      font-size: 12px;
    }

    .empty {
      padding: 40px 20px;
      text-align: center;
      color: var(--muted);
    }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      padding: 13px 16px;
      background: #172033;
      color: #fff;
      border-radius: 12px;
      box-shadow: var(--shadow);
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .2s ease, transform .2s ease;
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0);
    }


    .auth-screen {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: grid;
      place-items: center;
      padding: 20px;
      background:
        radial-gradient(circle at 25% 15%, rgba(37, 99, 235, 0.28), transparent 30rem),
        linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.92));
    }

    .auth-screen.hidden { display: none; }

    .auth-card {
      width: min(460px, 100%);
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 26px;
      box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
      overflow: hidden;
    }

    .auth-head {
      padding: 24px 26px 16px;
      border-bottom: 1px solid var(--line);
    }

    .auth-head h2 {
      margin: 0 0 8px;
      font-size: 26px;
    }

    .auth-head p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .auth-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      padding: 18px 26px 0;
    }

    .auth-tab {
      background: #e2e8f0;
      color: #334155;
      box-shadow: none;
    }

    .auth-tab.active {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    }

    .auth-form {
      display: none;
      padding: 20px 26px 26px;
    }

    .auth-form.active { display: grid; }

    .auth-note {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
      margin: 2px 0 0;
    }

    .user-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 13px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.84);
      border: 1px solid var(--line);
      color: #334155;
      font-size: 13px;
      font-weight: 700;
    }
    @media (max-width: 1020px) {
      header { align-items: flex-start; flex-direction: column; }
      .actions { justify-content: flex-start; }
      .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .layout { grid-template-columns: 1fr; }
    }

    @media (max-width: 620px) {
      .app { width: min(100% - 20px, 1280px); padding-top: 20px; }
      .summary-grid, .two-cols, .form-actions, .filter-bar { grid-template-columns: 1fr; }
      .panel-head { align-items: flex-start; flex-direction: column; }
      button, .file-label { width: 100%; justify-content: center; }
      .actions { width: 100%; }
    }

    /* Modular workbench shell */
    :root {
      --ink: #182027;
      --canvas: #f6f8fa;
      --teal: #146c5a;
      --teal-dark: #0f4e43;
      --teal-soft: #e5f2ef;
      --orange: #c8662c;
      --panel-shadow: 0 10px 28px rgba(24, 32, 39, .06);
    }

    body { background: var(--canvas); color: var(--ink); }

    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 238px minmax(0, 1fr);
    }

    .app-sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      gap: 30px;
      padding: 30px 16px;
      color: #d7e9e4;
      background: #102a2b;
    }

    .brand {
      padding: 0 12px;
      color: #fff;
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -.02em;
      text-decoration: none;
    }

    .brand span { display: block; margin-top: 5px; color: #88b7ac; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
    .app-sidebar nav { display: grid; gap: 6px; }
    .app-sidebar nav a { padding: 11px 12px; border-radius: 9px; color: #b7d0c9; font-size: 14px; font-weight: 700; text-decoration: none; }
    .app-sidebar nav a:hover, .app-sidebar nav a.active { color: #fff; background: #1d4a47; }
    .sidebar-note { margin: auto 12px 0; padding-top: 17px; border-top: 1px solid #2a514e; color: #a8c5be; font-size: 12px; line-height: 1.6; }

    .app { width: min(1440px, calc(100% - 72px)); padding: 36px 0 50px; }
    header { align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 24px; }
    h1 { font-size: clamp(28px, 3vw, 38px); }
    .subtitle { max-width: 660px; }
    .actions { gap: 8px; }

    button, .file-label { border-radius: 9px; background: var(--teal); box-shadow: none; }
    button:hover, .file-label:hover { background: var(--teal-dark); }
    button.secondary, .file-label.secondary { background: #edf2f1; color: #455a58; box-shadow: none; }
    button.secondary:hover, .file-label.secondary:hover { background: #dce8e5; }
    button.danger { background: #c5524f; box-shadow: none; }
    .user-chip { background: #fff; color: #475762; }

    .summary-grid { gap: 12px; margin: 25px 0 20px; }
    .summary-card { padding: 18px; border-radius: 13px; background: #fff; box-shadow: var(--panel-shadow); backdrop-filter: none; }
    .summary-card strong { font-size: clamp(20px, 2vw, 27px); }
    .profit { color: var(--teal); }

    .layout { grid-template-columns: minmax(330px, .72fr) minmax(0, 1.28fr); gap: 20px; }
    .panel { border-radius: 14px; background: #fff; box-shadow: var(--panel-shadow); overflow: visible; }
    .panel-head { padding: 18px 20px; }
    .panel-head h2 { font-size: 17px; }
    .panel-body { padding: 18px 20px 20px; }
    input, select, textarea { border-radius: 8px; background: #fbfcfc; }
    input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20, 108, 90, .12); }
    .profit-preview { background: var(--teal-soft); border-color: #c8e5dc; }
    .filter-bar { background: #f7faf9; border-radius: 11px; padding: 12px; }
    th { background: #f3f7f6; color: #52615f; }
    td { border-bottom-color: #edf1f0; }
    .empty { background: #f6faf8; border-color: #d9e9e3; }
    .toast { background: #152d2b; }

    @media (max-width: 1020px) {
      .app-shell { grid-template-columns: 1fr; }
      .app-sidebar { position: static; height: auto; display: flex; flex-direction: row; align-items: center; padding: 14px 20px; }
      .app-sidebar nav { display: flex; margin-left: auto; }
      .sidebar-note { display: none; }
      .app { width: min(100% - 40px, 1280px); }
    }

    @media (max-width: 620px) {
      .app-sidebar { display: block; padding: 16px; }
      .app-sidebar nav { display: none; }
      .app { width: min(100% - 28px, 1280px); padding-top: 24px; }
      header { padding-bottom: 18px; }
      .summary-grid { grid-template-columns: 1fr; }
      .panel { border-radius: 12px; }
    }

    /* Aurora terminal refinement */
    body { color: #eef1ff; background: #090b19; }
    body::before, body::after { content: ""; position: fixed; z-index: -1; width: 42rem; height: 42rem; border-radius: 50%; filter: blur(100px); opacity: .42; pointer-events: none; }
    body::before { top: -25rem; left: -16rem; background: #714cff; }
    body::after { right: -18rem; bottom: -27rem; background: #00d3aa; }
    .app-shell { grid-template-columns: 96px minmax(0, 1fr); }
    .app-sidebar { margin: 16px; height: calc(100vh - 32px); border: 1px solid #ffffff18; border-radius: 26px; padding: 22px 0; align-items: center; background: #12162adc; backdrop-filter: blur(20px); }
    .brand { width: 42px; height: 42px; border-radius: 14px; padding: 0; display: grid; place-items: center; font-size: 0; background: linear-gradient(135deg, #7c4dff, #00d4aa); box-shadow: 0 8px 26px #6948ff82; }
    .brand::before { content: "C"; font-size: 20px; color: #fff; }
    .brand span, .sidebar-note { display: none; }
    .app-sidebar nav { margin-top: 22px; padding-top: 20px; border-top: 1px solid #ffffff18; }
    .app-sidebar nav a { width: 45px; height: 45px; padding: 0; display: grid; place-items: center; font-size: 0; color: #8791ad; }
    .app-sidebar nav a::before { font-size: 18px; }.app-sidebar nav a:nth-child(1)::before { content: "◫"; }.app-sidebar nav a:nth-child(2)::before { content: "＋"; }.app-sidebar nav a:nth-child(3)::before { content: "⌁"; }
    .app-sidebar nav a:hover, .app-sidebar nav a.active { background: #ffffff15; box-shadow: inset 0 0 0 1px #ffffff18, 0 8px 20px #0006; }
    .app { padding: 34px 0 52px; width: min(1480px, calc(100% - 82px)); }
    header { border: 0; padding: 0; margin-bottom: 22px; } h1 { color: #fff; font-size: 31px; } .subtitle { color: #9aa5c8; }
    .actions { background: #12172bcc; padding: 7px; border: 1px solid #ffffff16; border-radius: 14px; }.actions button, .actions .file-label { padding: 8px 10px; font-size: 12px; }
    .user-chip, button.secondary, .file-label.secondary { background: #ffffff0e; color: #cbd3ec; border-color: #ffffff18; }.user-chip { padding: 8px 10px; }
    .aurora-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; min-height: 210px; padding: 28px 34px; border-radius: 26px; background: linear-gradient(125deg, #7548ff, #3345cf 54%, #018f9b); box-shadow: 0 24px 55px #31208069; }
    .aurora-hero::after { content: ""; position: absolute; right: -30px; top: -135px; width: 330px; height: 330px; border: 45px solid #ffffff20; border-radius: 50%; }.aurora-copy { position: relative; z-index: 1; }.aurora-copy span { color: #e7ddff; font-size: 11px; letter-spacing: .15em; }.aurora-copy strong { display: block; margin: 11px 0; font-size: clamp(36px, 5vw, 52px); letter-spacing: -.07em; }.aurora-copy p { margin: 0; color: #d8eaff; font-size: 13px; }.hero-orbit { position: relative; z-index: 1; width: 108px; height: 108px; border-radius: 50%; background: conic-gradient(#00e0ba, #b697ff, #00e0ba); display: grid; place-items: center; box-shadow: 0 0 26px #00e0ba72; }.hero-orbit i { position: absolute; inset: 10px; border-radius: 50%; background: #253bb5; }.hero-orbit b { position: relative; text-align: center; font-size: 13px; line-height: 1.35; }.hero-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 72px; opacity: .5; background: linear-gradient(transparent, #00e0ba4a); clip-path: polygon(0 90%, 13% 59%, 24% 73%, 38% 28%, 51% 56%, 66% 12%, 78% 43%, 89% 10%, 100% 30%, 100% 100%, 0 100%); }
    .summary-grid { grid-template-columns: repeat(5, 1fr); gap: 13px; margin: 16px 0; }.summary-card, .panel { border-color: #ffffff16; background: #11162ab8; box-shadow: none; backdrop-filter: blur(18px); }.summary-card { border-radius: 18px; padding: 17px; }.summary-card span { color: #919cbb; }.summary-card strong { color: #fff; }.profit { color: #59e8c1; }.loss { color: #ff8b9b; }.warning { color: #ffbd62; }
    .layout { grid-template-columns: minmax(340px, .75fr) minmax(0, 1.25fr); }.panel { border-radius: 22px; }.panel-head { border-bottom-color: #ffffff14; }.panel-head h2 { color: #fff; }.muted, label { color: #9ba6c8; } input, select, textarea { color: #edf1ff; border-color: #ffffff1c; background: #080b1980; } input:focus, select:focus, textarea:focus { border-color: #9275ff; box-shadow: 0 0 0 3px #7a59ff31; }.profit-preview { background: #00d3aa18; border-color: #00d3aa35; }.filter-bar { background: #080b196b; }.table-wrap { border-color: #ffffff16; } th { background: #ffffff0b; color: #aeb9d8; } td { border-bottom-color: #ffffff10; color: #dce2f4; }.empty { background: #ffffff08; border-color: #ffffff15; color: #aeb9d8; }.toast { background: #252b49; }
    @media (max-width: 1020px) { .app-shell { grid-template-columns: 1fr; }.app-sidebar { display: none; }.app { width: min(100% - 40px, 1280px); }.summary-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 620px) { .app { width: min(100% - 28px, 1280px); }.actions { width: 100%; }.aurora-hero { min-height: 185px; padding: 23px; }.hero-orbit { width: 75px; height: 75px; }.hero-orbit i { inset: 8px; }.summary-grid { grid-template-columns: repeat(2, 1fr); }.summary-card { padding: 14px; } }

    /* Keep record detail readable and expose entry as its own view. */
    tbody tr:hover td { color: #f7f8ff; background: #202844 !important; }
    tbody tr:hover .profit { color: #6bf0c9; }
    tbody tr:hover .loss { color: #ff9eaa; }

    #new-entry { display: none; }
    .layout:has(#new-entry:target) { display: block; }
    .layout:has(#new-entry:target) > section { display: none; }
    #new-entry:target { display: block; max-width: 860px; margin: 0 auto; }
    .app:has(#new-entry:target) > header,
    .app:has(#new-entry:target) > .aurora-hero,
    .app:has(#new-entry:target) > .summary-grid { display: none; }
    .app:has(#new-entry:target) .layout { margin-top: 8vh; }
    .app:has(#new-entry:target) #new-entry .panel-head::before { content: "新增账目 / NEW RECORD"; color: #9ea9cd; font-size: 11px; letter-spacing: .14em; }
    .app:has(#new-entry:target) #new-entry .panel-head { align-items: flex-start; flex-direction: column; }

    .dashboard-visuals { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr) minmax(190px, .45fr); gap: 16px; margin: 16px 0; }
    .chart-card { min-height: 210px; padding: 20px; border: 1px solid #ffffff16; border-radius: 22px; background: #11162ab8; backdrop-filter: blur(18px); }
    .chart-head { display: flex; align-items: flex-start; justify-content: space-between; }.chart-head span, .metric-card span { color: #98a4c6; font-size: 10px; letter-spacing: .14em; }.chart-head h2 { margin: 6px 0 0; color: #fff; font-size: 16px; }.chart-head > strong { color: #67edc6; font-size: 21px; }
    .pulse-bars { height: 130px; margin-top: 15px; display: flex; align-items: end; gap: 8px; padding: 0 4px; background: repeating-linear-gradient(to bottom, transparent 0 31px, #ffffff0e 32px 33px); }.pulse-bars i { flex: 1; min-width: 9px; border-radius: 8px 8px 2px 2px; background: linear-gradient(#a78bff, #3b5cff 55%, #00d8b2); box-shadow: 0 0 15px #5c68ff4a; }.pulse-bars i:nth-child(1){height:34%}.pulse-bars i:nth-child(2){height:58%}.pulse-bars i:nth-child(3){height:43%}.pulse-bars i:nth-child(4){height:78%}.pulse-bars i:nth-child(5){height:55%}.pulse-bars i:nth-child(6){height:89%}.pulse-bars i:nth-child(7){height:63%}.pulse-bars i:nth-child(8){height:74%}.pulse-bars i:nth-child(9){height:96%}
    .ratio-body { display: flex; align-items: center; justify-content: space-around; gap: 14px; margin-top: 25px; }.ratio-ring { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#00dfb8 0 50%, #ff9d57 50% 100%); box-shadow: 0 0 25px #00dcb64a; }.ratio-ring::before { content: ""; position: absolute; width: 83px; height: 83px; border-radius: 50%; background: #151a31; }.ratio-ring b { position: relative; font-size: 18px; }.ratio-body p { margin: 0 0 12px; color: #9ba7c8; font-size: 12px; }.ratio-body strong { display: block; margin-top: 4px; color: #fff; font-size: 14px; }.metric-card { display: flex; flex-direction: column; justify-content: center; background: linear-gradient(145deg, #192243, #17152e); }.metric-card > strong { margin: 13px 0 5px; color: #ffcc73; font-size: 25px; }.metric-card small { color: #a9b3d1; }
    #records > section { display: none; } #records:target { display: block; margin-top: 6vh; } #records:target > section { display: block; width: 100%; } #records:target > aside { display: none; } .app:has(#records:target) > header, .app:has(#records:target) > .aurora-hero, .app:has(#records:target) > .summary-grid, .app:has(#records:target) > .dashboard-visuals { display: none; } .app:has(#records:target) #records .panel { min-height: 78vh; } .app:has(#records:target) #records .panel-body { padding: 24px; }
    .ratio-ring { position: relative; }
    .app-sidebar { position: relative; z-index: 10; transition: width .24s ease, padding .24s ease, align-items .24s ease; }
    .app-sidebar:hover { width: 230px; align-items: stretch; padding-inline: 14px; box-shadow: 18px 0 38px #00000044; }
    .app-sidebar:hover .brand { width: auto; height: auto; min-height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 10px; font-size: 17px; background: transparent; box-shadow: none; }
    .app-sidebar:hover .brand::before { content: "◆"; font-size: 18px; color: #66f0cb; }.app-sidebar:hover .brand span { display: block; font-size: 9px; }
    .app-sidebar:hover nav { width: 100%; }.app-sidebar:hover nav a { width: 100%; height: 46px; padding: 0 13px; display: flex; align-items: center; gap: 13px; font-size: 14px; color: #aeb8d5; }
    .app-sidebar:hover nav a::before { width: 18px; text-align: center; flex: 0 0 18px; }.app-sidebar:hover nav a.active, .app-sidebar:hover nav a:hover { color: #fff; }
    @media (max-width: 1020px) { .dashboard-visuals { grid-template-columns: 1fr 1fr; }.metric-card { min-height: 150px; } } @media (max-width: 620px) { .dashboard-visuals { grid-template-columns: 1fr; }.chart-card { min-height: 180px; }.ratio-body { justify-content: flex-start; } }