/* VocaLedger · Liquid Glass
   Shared material tokens: opaque ink, translucent surfaces, illuminated edges.
   Blur is reserved for outer surfaces; nested content remains crisp and cheap. */
:root {
  --font-cn: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", system-ui, sans-serif;
  --font-en: var(--font-display);
  --ink: #202c42; --ink-soft: #384860; --muted: #5d6d82; --muted-2: #76859a;
  --paper: #f8f3e8; --paper-2: #fffaf0; --accent: #a76a16; --accent-soft: #f8e8c6;
  --teal: var(--accent); --teal-dark: #85500b; --on-accent: #fff;
  --theme-tint: #ecd59a; --theme-secondary: #eddcdb; --soft: var(--accent-soft);
  --panel: rgba(255,255,255,.64); --panel-soft: rgba(255,255,255,.42);
  --line: rgba(75,95,126,.17); --border: var(--line); --outline: var(--line); --outline-strong: var(--line);
  --control-edge: rgba(75,95,126,.28); --glass-edge: rgba(255,255,255,.90);
  --glass-fill: linear-gradient(145deg,rgba(255,255,255,.83),rgba(255,255,255,.48));
  --glass-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff50, 0 12px 34px #304d7810, 0 2px 5px #304d7805;
  --shadow: var(--glass-shadow); --shadow-soft: 0 5px 18px #304d7810; --shadow-press: none;
  --stroke: 1px; --stroke-strong: 1px;
  --radius-lg: 28px; --radius-md: 20px; --radius-sm: 14px;
  --green: #227565; --rose: #b4415e; --amber: #946020;
}
[data-theme="ocean"] { --paper:#eef3fc; --paper-2:#f5f7fd; --accent:#2265d6; --accent-soft:#e1ebff; --teal-dark:#2158af; --theme-tint:#b6d4f6; --theme-secondary:#dfd7f5; }
[data-theme="sage"] { --paper:#edf5f0; --paper-2:#f4f9f5; --accent:#267b69; --accent-soft:#dcefe7; --teal-dark:#206150; --theme-tint:#bae1d0; --theme-secondary:#d4e0f4; }
[data-theme="rose"] { --paper:#faf0f3; --paper-2:#fdf6f8; --accent:#a84972; --accent-soft:#f7e0eb; --teal-dark:#8b395e; --theme-tint:#f0c9da; --theme-secondary:#e0d7f6; }
html { background:var(--paper); scroll-padding-block:24px 120px; }
body { background:var(--paper); color:var(--ink); isolation:isolate; line-height:1.5; }
body::before {
  content:""; display:block; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse at 3% 5%,var(--theme-tint),transparent 53%),radial-gradient(ellipse at 98% 85%,var(--theme-secondary),transparent 58%),linear-gradient(160deg,var(--paper-2),var(--paper));
  opacity:1; filter:none;
}
body::after { display:none; }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color:transparent; }
button,summary { touch-action:manipulation; }
button,a { transition:background .18s ease,box-shadow .18s ease,transform .18s ease; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
::selection { background:var(--accent-soft); color:var(--ink); }
h1,h2,h3 { font-family:var(--font-display); letter-spacing:-.035em; }
.app-layout { padding:0; }
.app-content { max-width:740px; padding:30px 22px calc(118px + var(--safe-bottom)); }
.screen-stack { gap:22px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:0 4px 5px; }
.page-eyebrow { margin:0 0 10px; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.08em; }
.page-eyebrow span { padding:0 5px; }
.page-heading h1 { font-size:32px; line-height:1.18; font-weight:700; margin:0; }
.page-subtitle { margin:9px 0 0; font-size:13px; color:var(--muted); }
.page-emblem { display:grid; place-items:center; width:52px; height:52px; border:1px solid var(--glass-edge); border-radius:18px; background:var(--glass-fill); box-shadow:var(--glass-shadow); color:var(--teal-dark); }
.page-emblem svg { width:23px; height:23px; }
.panel,.project-card,.finance-inbox,.finance-report,.next-disclosure,.next-nudge,.assistant-result,.next-finance-hero,.stats-filter-card,.stats-chart-card {
  background:var(--glass-fill); border:1px solid var(--glass-edge); border-radius:var(--radius-lg)!important;
  -webkit-backdrop-filter:blur(24px) saturate(135%); backdrop-filter:blur(24px) saturate(135%);
  box-shadow:var(--glass-shadow)!important;
}
.panel-header { padding:24px 24px 12px; border:0; background:transparent; }
.panel-body { padding:12px 24px 24px; }
.panel-title { font-size:23px; font-weight:650; }
.panel-kicker { color:var(--muted); font-size:12px; line-height:1.7; }
.entry-panel { background:transparent; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none!important; overflow:visible; }
.entry-panel>.panel-header,.entry-panel>.panel-body { padding:0!important; }
.entry-header { margin-bottom:18px; gap:12px; align-items:center; }
.entry-title-block .panel-title { font-size:22px!important; font-weight:650; }
.companion-date { font-size:11px; color:var(--muted); letter-spacing:.06em; margin:0 0 5px; }
.title-rule,.entry-title-block::after { display:none; }
.voice-pad { gap:14px; }
.voice-quota-line { order:1; justify-content:center; margin:0; font-size:11px; color:var(--muted); font-weight:450; }
.quota-spark { color:var(--teal-dark); }
.ledger-hero {
  position:relative; isolation:isolate; overflow:hidden; padding:26px; min-height:265px;
  border:1px solid #fffffff0; border-radius:28px;
  background:linear-gradient(128deg,#ffffffc7,#ffffff4d),linear-gradient(155deg,var(--accent-soft),var(--theme-secondary));
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #ffffff78,0 15px 40px #3b5e9612;
}
.ledger-hero-main { position:relative; }
.ledger-hero-label { display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:13px; }
.ledger-hero-label svg { width:17px; height:17px; }
.ledger-hero-amount { display:block; margin:12px 0 6px; font-size:clamp(30px,7vw,46px); letter-spacing:-.055em; line-height:1.18; font-weight:650; overflow-wrap:anywhere; }
.ledger-hero-caption { font-size:11px; color:var(--muted); }
.ledger-hero-metrics { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:16px; margin-top:25px; padding-top:17px; border-top:1px solid #ffffffcf; }
.ledger-hero-metrics>div+div { border-left:1px solid #ffffffcf; padding-left:20px; }
.ledger-hero-metrics span { display:block; font-size:11px; color:var(--muted); }
.ledger-hero-metrics strong { display:block; font-size:21px; font-weight:600; margin-top:4px; letter-spacing:-.025em; overflow-wrap:anywhere; }
.ledger-hero-metrics small { font-size:12px; color:var(--muted); margin-left:6px; font-weight:400; }
.ledger-hero.is-listening { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft),var(--glass-shadow); }
.button,.button.teal {
  min-height:50px; border:1px solid transparent; border-radius:17px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 85%,white),var(--accent));
  color:var(--on-accent); font-weight:600; box-shadow:inset 0 1px 0 #ffffff55,0 6px 16px color-mix(in srgb,var(--accent) 18%,transparent);
}
.button.secondary,.security-entry { background:var(--glass-fill); color:var(--ink-soft); border-color:#ffffffdd; box-shadow:inset 0 1px 0 white,0 3px 10px #304d7808; }
.button.ghost { background:transparent; color:var(--muted); box-shadow:none; border-color:transparent; }
.button.danger { background:#b4415e; color:#fff; box-shadow:none; }
.button:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.button:active:not(:disabled) { transform:scale(.98); }
.button .icon { stroke-width:1.8; }
.companion-voice,.companion-text { width:100%; }
.companion-voice { min-height:56px; font-size:15px; }
.companion-voice.is-recording { background:#b4415e; }
.companion-hint { font-size:11px; color:var(--muted); text-align:center; margin:-3px 0 0; }
.voice-status { font-size:12px; margin:0; }
.voice-status:empty { display:none; }
.segmented { padding:4px; background:#ffffff52; border:1px solid #ffffffd9; box-shadow:inset 0 1px 3px #354a7208; }
.segment { min-height:42px; font-weight:500; color:var(--muted); border:1px solid transparent; }
.segment[aria-pressed="true"] { color:var(--teal-dark); background:#fffffff0; border-color:#fff; box-shadow:0 2px 7px #304d7812; }
.entry-switch { width:136px!important; min-width:136px!important; flex-shrink:0; }
.entry-switch .segment { font-size:13px; }
input,select,textarea,.field input,.field select,.field textarea,.category-budget-row input {
  background:#ffffff85; border:1px solid var(--control-edge); border-radius:14px!important;
  color:var(--ink); font-weight:400; box-shadow:inset 0 2px 4px #304d7804; min-height:48px;
}
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
input:focus,select:focus,textarea:focus,.field input:focus,.field select:focus,.field textarea:focus {
  outline:3px solid color-mix(in srgb,var(--accent) 20%,transparent); outline-offset:1px; border-color:var(--accent); background:#fffffff0;
}
.field label { font-weight:500; font-size:13px; color:var(--ink-soft); }
.entry-text-field { padding:16px; border:1px solid #ffffffd9; border-radius:20px; background:#ffffff60; }
.entry-text-field textarea { min-height:90px; }
.entry-actions { gap:10px; }
.entry-actions .button { min-height:50px; height:auto; }
.record-item,.record-card,.project-list-card,.notification-card,.stat-card,.metric,.legend-item,.budget-item,.diagnostic-tile,.finance-alert-card {
  border:1px solid #ffffffc7; background:#ffffff55; box-shadow:inset 0 1px 0 #ffffffa8; border-radius:18px;
}
.record-item { padding:14px; }
.record-note,.budget-name,.legend-name { font-weight:600; }
.category-icon { border:1px solid #ffffffb8; border-radius:12px; background:var(--accent-soft); color:var(--teal-dark); }
.record-meta { color:var(--muted); }
.metric-value { font-weight:650; letter-spacing:-.04em; }
.stats-chart-card,.stats-filter-card { padding:22px; }
.stats-panel { background:transparent; border:0; box-shadow:none!important; backdrop-filter:none; -webkit-backdrop-filter:none; overflow:visible; }
.stats-panel>.panel-body { padding:0!important; }
.stats-dashboard { gap:18px; }
.stats-dashboard .stats-block + .stats-block { margin:0; padding-top:22px; border-top:1px solid var(--glass-edge); }
.stats-metric-grid .metric { background:var(--glass-fill); border-color:var(--glass-edge); }
.next-eyebrow,.next-footnote,.next-goal small,.next-history small,.next-nudge p,.next-alert p,.next-finance-hero p { color:var(--muted); }
.next-nudge { padding:22px; }
.next-nudge h3 { font-weight:600; }
.next-hero-amount { color:var(--ink); }
.next-goal,.next-alert,.next-history { border-color:var(--line); }
.next-disclosure>summary { min-height:44px; display:flex; align-items:center; gap:10px; }
.next-disclosure>.panel,.finance-report.is-embedded { background:transparent; box-shadow:none!important; backdrop-filter:none; -webkit-backdrop-filter:none; }
.assistant-result.next-confirm { background:#fff5dded; border-color:#dbc180; }
.assistant-result.next-error { background:#fff0f3ed; border-color:#d7a5b2; }
.bulk-preview { padding:18px; border:1px solid #ffffffcc; border-radius:20px; background:#ffffff66; }
progress { accent-color:var(--accent); background:var(--accent-soft); }
progress::-webkit-progress-bar { background:var(--accent-soft); }
progress::-webkit-progress-value { background:var(--accent); }
progress::-moz-progress-bar { background:var(--accent); }
.theme-choice { background:#ffffff66; min-height:86px; border:1px solid #fff; border-radius:20px; }
.theme-choice[aria-pressed="true"] { background:var(--accent-soft); border:2px solid var(--accent); box-shadow:0 4px 14px #304d7810; }
.theme-swatches i { border:1px solid #ffffffa0; }
.editor-backdrop { background:#223b5d30; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
body.dialog-open { overflow:hidden; }
.editor.panel { background:#f8faffed; border:1px solid white; border-radius:28px; box-shadow:0 24px 80px #1c355d26!important; }
.toast { background:#253651ed; color:white; border:1px solid #ffffff38; border-radius:18px; box-shadow:0 10px 30px #20375725; }
.auth-layout { background:transparent; }
.auth-panel { border-radius:32px!important; }
.auth-panel .brand-mark.pearl-brand { display:block; width:70px; height:70px; }
.auth-panel .brand-title { margin:0; }
.nav-brand,.nav-note { display:none; }
.bottom-nav {
  width:min(570px,calc(100vw - 28px)); gap:2px; padding:7px; bottom:calc(12px + var(--safe-bottom));
  border:1px solid #fffffff0; border-radius:28px; background:linear-gradient(150deg,#ffffffde,#ffffff99);
  backdrop-filter:blur(30px) saturate(160%); -webkit-backdrop-filter:blur(30px) saturate(160%);
  box-shadow:inset 0 1px 0 #fff,0 10px 35px #30496b20,0 1px 4px #30496b08;
}
.bottom-tab { min-height:58px; gap:3px; padding:6px 2px; border-radius:21px; font-size:11px; font-weight:500; color:var(--muted); }
.bottom-tab[aria-pressed="true"] { background:linear-gradient(145deg,#ffffffef,var(--accent-soft)); color:var(--teal-dark); box-shadow:inset 0 1px 0 white,0 2px 8px #304d7810; }
.bottom-tab-icon,.bottom-tab[aria-pressed="true"] .bottom-tab-icon { width:26px!important; height:26px!important; background:none; color:inherit; box-shadow:none; border:0; }
.bottom-tab-icon svg { width:22px!important; height:22px!important; stroke-width:1.7; }
@media(hover:hover) {
  .button:hover:not(:disabled) { filter:brightness(1.035); transform:translateY(-1px); }
  .button.secondary:hover,.theme-choice:hover { background:#ffffffdd; }
  .bottom-tab:hover { background:#ffffff90; }
}
@media(min-width:1000px) {
  .app-layout { padding-left:240px; }
  .app-content,.app-tab-stats .app-content { max-width:1220px; padding:48px 42px 60px; }
  .page-heading { margin-bottom:10px; }
  .page-heading h1 { font-size:38px; }
  .page-eyebrow { font-size:12px; }
  .page-subtitle { font-size:14px; }
  .bottom-nav,.app-tab-stats .bottom-nav {
    left:20px; top:24px; bottom:24px; width:216px; transform:none; padding:20px 13px;
    display:flex; flex-direction:column; gap:8px; border-radius:30px;
  }
  .nav-brand { display:flex; align-items:center; gap:11px; padding:8px 10px 30px; }
  .nav-brand img { width:40px; height:40px; border-radius:13px; }
  .nav-brand strong { display:block; font-size:19px; font-weight:650; letter-spacing:-.03em; }
  .nav-brand span { display:block; color:var(--muted); font-size:10px; letter-spacing:.04em; margin-top:2px; }
  .bottom-tab { display:flex; flex:none; justify-content:flex-start; gap:14px; min-height:54px; padding:12px 16px; border-radius:17px; font-size:14px; }
  .bottom-tab[aria-pressed="true"] { box-shadow:inset 0 1px 0 white,0 4px 12px #304d7812; }
  .nav-note { display:flex; gap:9px; align-items:center; margin-top:auto; padding:18px 8px 0; border-top:1px solid var(--line); font-size:10px; color:var(--muted); }
  .nav-note .icon { width:15px; height:15px; flex:none; }
  .app-tab-record .screen-stack { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:start; gap:22px; }
  .app-tab-record .page-heading { grid-column:1 / -1; }
  .app-tab-record .entry-panel { grid-column:1; grid-row:2 / span 3; }
  .app-tab-record .next-nudge { grid-column:2; }
  .app-tab-record .screen-stack>.panel:not(.entry-panel) { grid-column:2; }
  .ledger-hero { min-height:280px; }
  .ledger-hero-metrics { margin-top:35px; }
  .app-tab-mine .screen-stack { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .app-tab-mine .page-heading,.app-tab-mine .app-filing-footer { grid-column:1 / -1; }
}
@media(max-width:640px) {
  .app-content { padding:calc(24px + var(--safe-top)) 18px calc(116px + var(--safe-bottom)); }
  .screen-stack { gap:22px; }
  .panel-header { padding:20px 20px 10px!important; }
  .panel-body { padding:12px 20px 20px!important; }
  .page-heading h1 { font-size:29px; }
  .page-heading { padding-inline:2px; }
  .entry-title-block .panel-title { font-size:20px!important; }
  .entry-header { margin-bottom:14px; }
  .entry-switch .segment { padding:8px 11px!important; }
  .ledger-hero { padding:23px; min-height:244px; }
  .ledger-hero-amount { font-size:40px; }
  .ledger-hero-metrics { margin-top:22px; }
  .ledger-hero-metrics strong { font-size:20px; }
  .next-nudge { padding:20px; }
  .stats-filter-card,.stats-chart-card { padding:18px; }
}
@media(max-width:359px) {
  .app-content { padding-inline:12px; }
  .page-heading h1 { font-size:26px; }
  .entry-title-block .panel-title { font-size:18px!important; }
  .entry-switch { width:124px!important; min-width:124px!important; }
  .ledger-hero { padding:20px; }
  .ledger-hero-amount { font-size:35px; }
  .ledger-hero-metrics strong { font-size:18px; }
  .bottom-nav { width:calc(100vw - 16px); padding:5px; }
  .bottom-tab span { font-size:10px!important; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root { --glass-fill:linear-gradient(145deg,#fff,#f6f8fc); }
  .bottom-nav { background:#f7f9fd; }
}
@media(prefers-reduced-transparency:reduce) {
  :root { --glass-fill:#fff; --panel:#fff; --panel-soft:#f6f8fc; }
  .panel,.project-card,.finance-inbox,.finance-report,.next-disclosure,.next-nudge,.assistant-result,.next-finance-hero,.stats-filter-card,.stats-chart-card,.bottom-nav,.editor-backdrop { backdrop-filter:none; -webkit-backdrop-filter:none; }
  .bottom-nav,.ledger-hero,.record-item,.record-card,.project-list-card,.notification-card,.stat-card,.metric,.diagnostic-tile,.finance-alert-card { background:#fff; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media(prefers-contrast:more) {
  :root { --muted:#39485d; --line:#66758b; --control-edge:#66758b; --glass-edge:#8996a8; --glass-fill:#fff; }
  .bottom-nav,.ledger-hero { background:#fff; border-color:#8996a8; }
}
