@font-face {
  font-family: "QF Display";
  src: url("qf-display.woff2") format("woff2");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --color-bg: #07090d;
  --color-primary: #f5f7fb;
  --color-secondary: rgba(232, 239, 244, .64);
  --color-border: rgba(255, 255, 255, .14);
  --color-card: rgba(8, 11, 17, .46);
  --color-card-strong: rgba(8, 11, 17, .64);
  --color-brand: #68d8d2;
  --color-brand-2: #8ca8ff;
  --color-danger: #ef7379;
  --color-success: #69d8a7;
  --qf-ink: #f5f7fb;
  --qf-muted: rgba(232, 239, 244, .64);
  --qf-line: rgba(255, 255, 255, .1);
  --qf-glass: rgba(8, 11, 17, .46);
  --qf-glass-strong: rgba(8, 11, 17, .64);
  --qf-teal: #68d8d2;
  --qf-cyan: #8ca8ff;
  --qf-shadow-near: 0 12px 34px rgba(0, 0, 0, .22);
  --qf-shadow-far: 0 36px 100px rgba(0, 0, 0, .28);
  --shadow-card: var(--qf-shadow-near), var(--qf-shadow-far), inset 0 1px 0 rgba(255, 255, 255, .12);
}

html { background: #07090d; }

body {
  color: var(--color-primary);
  background: transparent;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

body::before { display: none; }

.glass,
.stat-card,
.card-item,
.pricing-card,
.tbl-wrap,
.edl-panel {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .012)),
    rgba(7, 10, 16, .5);
  border-color: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(28px) saturate(1.14);
  backdrop-filter: blur(28px) saturate(1.14);
  box-shadow: var(--shadow-card);
}

.glass::after,
.stat-card::after,
.card-item::after,
.pricing-card::after,
.tbl-wrap::after,
.edl-panel::after {
  background:
    radial-gradient(360px circle at var(--qf-pointer-x) var(--qf-pointer-y), rgba(255, 255, 255, .16), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .025) 24%, transparent 54%, rgba(255, 255, 255, .055));
  opacity: .72;
}

.qf-console .app-shell {
  width: min(100%, 1580px);
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

.qf-console .sidebar {
  top: 14px;
  height: calc(100dvh - 28px);
  padding: 13px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015)),
    rgba(6, 9, 15, .54);
}

.qf-console .brand {
  min-height: 58px;
  border-bottom-color: rgba(255, 255, 255, .11);
}

.brand-logo,
.login-head,
.calc-logo,
.edl-logo,
.stat-card .ico-wrap,
.ledger-icon,
.avatar {
  color: #071012;
  background: linear-gradient(135deg, #92ede7, #91aaff);
  box-shadow: 0 10px 28px rgba(82, 170, 186, .26), inset 0 1px 0 rgba(255, 255, 255, .72);
}

.brand-name,
.topbar .title,
.panel h3,
.calc-title,
.edl-title,
.login-title {
  color: #fff;
  font-family: "QF Display", Inter, "PingFang SC", sans-serif;
  letter-spacing: .01em;
}

.brand-sub,
.panel .desc,
.field label,
.stat-card .label,
.stat-card .sub,
.quote,
.foot-link,
.calc-sub,
.edl-sub { color: var(--color-secondary); }

.qf-console .nav-item {
  color: rgba(235, 241, 245, .62);
  border-color: transparent;
}

.qf-console .nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, .075);
  border-color: rgba(255, 255, 255, .09);
}

.qf-console .nav-item.active {
  color: #071012;
  background: rgba(255, 255, 255, .9);
  border-color: rgba(255, 255, 255, .62);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .24), inset 0 1px 0 #fff;
}

.qf-console .nav-item.active .dot { background: #0e928c; box-shadow: 0 0 0 3px rgba(14, 146, 140, .14); }

.qf-console .sidebar > .glass {
  border-top-color: rgba(255, 255, 255, .1);
  color: rgba(235, 241, 245, .68);
}

.qf-console #logoutBtn {
  color: #ffd6d8;
  border-color: rgba(239, 115, 121, .2);
  background: rgba(116, 32, 39, .22);
}

.qf-console .topbar {
  top: 14px;
  min-height: 62px;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)),
    rgba(6, 9, 15, .5);
}

.user-chip {
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .055);
}

.qf-console .tab-panel > .quote {
  color: rgba(239, 244, 247, .74);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .012)),
    rgba(6, 9, 15, .42);
}

.quote .mark {
  color: #98efea;
  border-color: rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .07);
}

.panel > .grid-2 > .glass,
.panel .grid-2 > .glass:not(.panel) {
  border-left-color: rgba(104, 216, 210, .32);
  color: var(--color-primary);
  background: rgba(255, 255, 255, .025);
}

.input,
.textarea,
.select {
  color: #f7f9fb;
  border-color: rgba(255, 255, 255, .13);
  background: rgba(4, 7, 12, .38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .14);
}

.input::placeholder,
.textarea::placeholder { color: rgba(229, 237, 242, .38); }

.input:focus,
.textarea:focus,
.select:focus {
  color: #fff;
  border-color: rgba(104, 216, 210, .46);
  background: rgba(4, 7, 12, .64);
  box-shadow: 0 0 0 3px rgba(104, 216, 210, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.select option { color: #f5f7fb; background: #111620; }

.btn {
  color: #061012;
  background: linear-gradient(135deg, #92ede7, #91aaff);
  box-shadow: 0 10px 24px rgba(70, 155, 173, .2), inset 0 1px 0 rgba(255, 255, 255, .68);
}

.btn.ghost {
  color: #f3f7f9;
  border-color: rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .065);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.btn.ghost:hover { color: #fff; background: rgba(255, 255, 255, .11); }

.btn.danger {
  color: #fff;
  background: linear-gradient(135deg, #c44d57, #e87370);
  box-shadow: 0 9px 20px rgba(149, 44, 53, .2), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.result,
.chip,
.toolbar,
.ledger-row,
.empty-state {
  color: var(--color-primary);
  border-color: rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .045);
}

.result { color: #eaf2f5; }
.result.empty { color: var(--color-secondary); }
.chip { color: var(--color-secondary); }
.chip b { color: #fff; }

.toolbar .filter { color: rgba(235, 241, 245, .58); }
.toolbar .filter:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.toolbar .filter.active { color: #071012; background: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .6); }

.tbl-wrap { background: rgba(4, 7, 12, .32); }
.tbl thead th { color: rgba(239, 244, 247, .68); background: rgba(9, 13, 20, .92); }
.tbl th,
.tbl td { border-bottom-color: rgba(255, 255, 255, .075); }
.tbl tbody tr { color: #edf3f5; background: rgba(255, 255, 255, .025); }
.tbl tbody tr:hover { background: rgba(255, 255, 255, .07); }

.card-item,
.pricing-card,
.stat-card,
.edl-panel { background: rgba(7, 10, 16, .52); }

.stat-card .value,
.card-item .code,
.ledger-reason,
.modal .kv .v { color: #fff; }

.modal-mask { background: rgba(1, 3, 7, .58); }

.modal {
  color: #f5f7fb;
  border-color: rgba(255, 255, 255, .16);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .018)),
    rgba(7, 10, 16, .86);
  -webkit-backdrop-filter: blur(38px) saturate(1.16);
  backdrop-filter: blur(38px) saturate(1.16);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.modal h3 { color: #fff; }
.modal .kv .k { color: var(--color-secondary); }

.toast {
  color: #f5f7fb;
  border-color: rgba(255, 255, 255, .16);
  background: rgba(9, 13, 20, .88);
}

.brand-text {
  background: linear-gradient(120deg, #a2f2ed 12%, #aab8ff 72%, #e7c4ff);
  -webkit-background-clip: text;
  background-clip: text;
}

/* 登录页采用个人主页式左侧浮动玻璃卡，给人物背景留出主体空间。 */
.qf-auth .center-wrap {
  justify-content: flex-start;
  width: min(100%, 1280px);
  padding: 32px 56px;
}

.qf-auth .login-card {
  max-width: 448px;
  color: #f5f7fb;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .015)),
    rgba(6, 9, 15, .58);
}

.qf-auth .login-card > .quote { color: rgba(239, 244, 247, .64); }

.qf-auth .foot-link a { color: #b7f2ef !important; }

.qf-calc .calc-card,
.qf-edl .edl-card {
  color: #f5f7fb;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .014)),
    rgba(6, 9, 15, .56);
}

.qf-brand-photo {
  padding: 0;
  overflow: hidden;
  background: #111820;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.qf-brand-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}

.qf-calc .calc-head,
.qf-calc .calc-card > .divider,
.qf-edl .edl-head { border-color: rgba(255, 255, 255, .1); }

.qf-calc .calc-result-card { border-left-color: rgba(104, 216, 210, .34); background: rgba(255, 255, 255, .025); }
.qf-edl .edl-panel { background: rgba(7, 10, 16, .58); }
.qf-edl .status-line,
.qf-edl .step-item { color: var(--color-secondary); border-color: rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .04); }
.qf-edl .status-line span:last-child,
.qf-edl .step-item.active { color: #fff; }
.qf-edl .edl-log { border-color: rgba(255, 255, 255, .12); background: rgba(2, 5, 8, .88); }

@media (max-width: 900px) {
  .qf-console .app-shell { padding: 8px; }
  .qf-console .sidebar { top: 8px; background: rgba(6, 9, 15, .72); }
  .qf-console .topbar { background: rgba(6, 9, 15, .64); }
  .qf-auth .center-wrap { justify-content: center; padding: 18px; }
}

@media (max-width: 640px) {
  .qf-wallpaper-scrim { background: rgba(2, 4, 8, calc(var(--qf-wallpaper-dim) + .08)); }
  .qf-auth .center-wrap { padding: 8px; }
  .qf-auth .login-card { background: rgba(6, 9, 15, .68); }
}

@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .glass,
  .stat-card,
  .card-item,
  .pricing-card,
  .tbl-wrap,
  .edl-panel { background: rgba(7, 10, 16, .88); }
}

/* 手机控制台：紧凑品牌栏 + 独立底部导航，不再让桌面侧栏占满首屏。 */
@media (max-width: 900px) {
  .qf-console .app-shell {
    display: block;
    min-height: 100dvh;
    padding: 8px 8px calc(86px + env(safe-area-inset-bottom));
  }

  .qf-console .sidebar {
    position: relative;
    top: auto;
    z-index: 40;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 10px;
    overflow: visible;
    background: rgba(6, 9, 15, .82);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .qf-console .brand {
    min-width: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
  }

  .qf-console .brand-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
  }

  .qf-console .sidebar > div[style="flex:1"],
  .qf-console .sidebar > .glass { display: none; }

  .qf-console #logoutBtn {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    min-height: 42px;
    margin: 0;
    align-self: center;
  }

  .qf-console .nav {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    z-index: 120;
    display: flex;
    grid-column: auto;
    grid-row: auto;
    flex-direction: row;
    gap: 6px;
    width: auto;
    height: 68px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    background: rgba(7, 10, 16, .9);
    -webkit-backdrop-filter: blur(26px) saturate(1.18);
    backdrop-filter: blur(26px) saturate(1.18);
    box-shadow: 0 18px 54px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .1);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .qf-console .nav::-webkit-scrollbar { display: none; }

  .qf-console .nav-item {
    flex: 0 0 76px;
    min-height: 52px;
    padding: 5px 6px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    border-radius: 9px;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    scroll-snap-align: start;
  }

  .qf-console .nav-item .icn {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
  }

  .qf-console .nav-item > span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .qf-console .main {
    margin-top: 10px;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .qf-console .app-shell { padding-inline: 6px; }
  .qf-console .sidebar { padding: 9px; border-radius: 12px; }
  .qf-console .brand-name { font-size: 14px; }
  .qf-console .brand-sub { font-size: 10px; }
  .qf-console #logoutBtn { min-height: 40px; padding: 8px 11px; font-size: 11px; }
  .qf-console .nav { left: 6px; right: 6px; }
  .qf-console .nav-item { flex-basis: 70px; }
}