/* ============================================================================
   TaskFlow — "Warm Charcoal + Champagne" premium theme (2026-07).
   Loaded AFTER glass.css/screens.css to override the old liquid-glass system.
   Principles (from research: Mercury/Linear/Ramp/Geist + premium dark fintech):
   near-monochrome warm dark, ONE champagne accent used <5% of area (money/CTA/
   active), depth via surface layers + hairline borders (NOT shadows/glow),
   weights 400-600, tabular-nums, small radii, line icons, no gradients.
   ============================================================================ */

:root {
  --bg-base:         #0B0A08;
  --bg-elevated:     #121110;
  --glass-fill:      #1A1815;
  --glass-fill-hi:   #201D19;
  --surface-1:       #121110;
  --surface-2:       #1A1815;
  --surface-3:       #201D19;
  --hairline:        #2A2621;
  --hairline-hi:     #3A342B;

  --accent-1:        #C9A86A;
  --accent-2:        #C9A86A;
  --accent-hover:    #DBBE86;
  --accent-soft:     rgba(201,168,106,0.12);
  --accent-ink:      #0B0A08;
  --accent-grad:     #C9A86A;

  --success:         #6FAE7E;
  --warning:         #D9A85C;
  --danger:          #C4726B;
  --info:            #8FA9C9;

  --text-1:          #F5F1EA;
  --text-2:          #C9C2B6;
  --text-3:          #8C857A;
  --text-faint:      #5E584E;

  --shadow-drop:     0 8px 24px -10px rgba(0,0,0,0.75);
  --shadow-inner:    none;
  --glow-accent:     none;
  --glass-blur:      0px;

  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px;
}

body {
  background: var(--bg-base);
  font-feature-settings: 'tnum','zero','cv01','ss03';
  letter-spacing: -0.005em;
}
.num, .money, .amount, .price, .balance-hero .main, .stat-cell .v, .kpi-cell .v,
.tx-amt, .calc-row, .v.money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum','zero';
}

/* Calm warm background — no drifting aurora, faint static wash only */
.aurora {
  inset: 0;
  background: radial-gradient(70% 45% at 50% -8%, rgba(201,168,106,0.045), transparent 70%), var(--bg-base);
  filter: none; animation: none;
}

/* ---- Surfaces: flat, hairline, no bevel/specular/glow --------------------- */
.glass {
  background: var(--surface-2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--hairline);
  box-shadow: none;
  border-radius: var(--r-lg);
}
.glass::before, .glass::after { display: none !important; content: none !important; }
.glass-card { border-radius: var(--r-lg); padding: 16px; }
.glass-card:hover { transform: none; background: var(--surface-2); }
.list-flat { gap: 10px; }
.list-flat .glass-card { background: var(--surface-2); border: 1px solid var(--hairline); }

/* ---- Typography scale ---------------------------------------------------- */
h1, h2, h3, h4 { color: var(--text-1); }
.section-title { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-1); margin: 18px 2px 10px; }
.text-grad { -webkit-text-fill-color: initial; color: var(--text-1); background: none; }
.price { color: var(--text-1) !important; font-weight: 600; letter-spacing: -0.02em; }
.text-2 { color: var(--text-2); } .text-3 { color: var(--text-3); }

/* ---- Chips / pills: flat, gold only when active -------------------------- */
.glass-pill, .chip {
  height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--text-2); border-radius: var(--r-full);
}
.glass-pill.sm { height: 24px; font-size: 11px; padding: 0 9px; }
.chip.active, .glass-pill.active { background: var(--accent-soft); border-color: rgba(201,168,106,0.35); color: var(--accent-1); }
.chips-scroll { gap: 7px; }

/* ---- Buttons: flat, gold primary with dark ink -------------------------- */
.btn { font-size: 14.5px; font-weight: 550; padding: 0 18px; height: 46px; border-radius: var(--r-md); letter-spacing: -0.01em; transition: background .15s, border-color .15s, color .15s; }
.btn:active { transform: translateY(0.5px); }
.glass-button--primary { background: var(--accent-1); color: var(--accent-ink); box-shadow: none; font-weight: 600; }
.glass-button--primary:hover { background: var(--accent-hover); }
.glass-button--primary::before { display: none !important; content: none !important; }
.glass-button--ghost { background: var(--surface-3); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--hairline); box-shadow: none; color: var(--text-1); font-weight: 500; }
.glass-button--ghost:hover { background: var(--surface-3); border-color: var(--hairline-hi); }
.glass-button--ghost::before { display: none !important; content: none !important; }
.glass-button--danger { background: transparent; border: 1px solid rgba(196,114,107,0.5); color: var(--danger); box-shadow: none; }
.glass-button--success { background: var(--success); box-shadow: none; color: #06140D; }

/* ---- Prices & money accents --------------------------------------------- */
.text-success, .money.text-success { color: var(--success); }
.text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-info { color: var(--info); }
.stars { color: var(--accent-1); }

/* ---- Header: compact, icon buttons -------------------------------------- */
.app-header { padding: calc(var(--sat) + 8px) 14px 6px; gap: 8px; }
.app-header .avatar { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-3); color: var(--accent-1); border: 1px solid var(--hairline); font-size: 14px; }
.app-header .avatar img { border-radius: 10px; }
.balance-pill { height: 34px; background: var(--surface-2); border: 1px solid var(--hairline); }
.notif-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--hairline); flex: none; color: var(--text-2); }
.notif-btn .badge { background: var(--danger); }
.segmented { padding: 3px; background: var(--surface-2); box-shadow: none; border: 1px solid var(--hairline); }
.segmented::before { display: none !important; content: none !important; }
.segmented-thumb { background: var(--accent-1); box-shadow: none; }
.segmented button { font-size: 12.5px; padding: 5px 13px; color: var(--text-2); }
.segmented button.active { color: var(--accent-ink); font-weight: 600; }

/* ---- Tab bar: flat, gold active icon ------------------------------------ */
.glass-tabbar {
  height: 58px; left: 10px; right: 10px; padding: 5px;
  border-radius: var(--r-xl); background: rgba(18,17,16,0.94);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-drop);
}
.glass-tabbar::before { display: none !important; content: none !important; }
.tabbar-indicator { background: var(--accent-soft); box-shadow: none; border-radius: var(--r-md); }
.tabbar-btn { font-size: 10px; color: var(--text-3); }
.tabbar-btn .ic { display: inline-flex; }
.tabbar-btn .ic svg { width: 22px; height: 22px; }
.tabbar-btn.active { color: var(--accent-1); }
.tabbar-btn.active .ic { transform: none; }

/* ---- Bottom sheet: flat, subtle floating shadow ------------------------- */
.glass-sheet { background: var(--bg-elevated); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--hairline); border-bottom: none; box-shadow: 0 0 0 1px rgba(255,255,255,0.03), 0 -12px 40px -12px rgba(0,0,0,0.8); }
.glass-sheet::before { display: none !important; content: none !important; }
.sheet-backdrop { background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* ---- Inputs ------------------------------------------------------------- */
.glass-input, .input, .textarea, input.glass-input, select.glass-input {
  background: var(--surface-3); border: 1px solid var(--hairline); border-radius: var(--r-md);
  color: var(--text-1); font-size: 14px;
}
.glass-input:focus, .input:focus, .textarea:focus { border-color: var(--accent-1); outline: none; box-shadow: 0 0 0 2px var(--accent-soft); }
.search-row .glass-input, .feed-search { height: 38px; }
::placeholder { color: var(--text-faint); }

/* ---- Badges: flat, muted ------------------------------------------------ */
.badge { border-radius: 7px; font-size: 11px; font-weight: 550; padding: 3px 8px; }
.badge.instant { background: rgba(111,174,126,0.13); color: var(--success); }
.badge.hold { background: rgba(217,168,92,0.13); color: var(--warning); }
.badge.info { background: rgba(143,169,201,0.13); color: var(--info); }
.badge.neutral { background: var(--surface-3); color: var(--text-2); }

/* ---- Status badges (my screen) ------------------------------------------ */
.status-badge { border-radius: 7px; font-weight: 550; }
.st-reserved { background: rgba(143,169,201,0.13); color: var(--info); }
.st-pending  { background: rgba(217,168,92,0.13); color: var(--warning); }
.st-approved { background: rgba(111,174,126,0.13); color: var(--success); }
.st-rejected { background: rgba(196,114,107,0.13); color: var(--danger); }
.st-revision { background: rgba(201,168,106,0.13); color: var(--accent-1); }

/* ---- Progress bar: thin, gold ------------------------------------------- */
.progress-bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,0.06); }
.progress-bar > span { background: var(--accent-1); border-radius: 3px; }

/* ---- Avatars: subtle surface + gold initials (not a gradient circle) ---- */
.avatar, .avatar-lg, .av, .av-lg {
  background: var(--surface-3) !important; color: var(--accent-1); font-weight: 600;
  border: 1px solid var(--hairline);
}
.avatar-lg { width: 56px; height: 56px; border-radius: 16px; font-size: 20px; }

/* ---- Toggle switch ------------------------------------------------------ */
.switch { width: 42px; height: 25px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--hairline); position: relative; flex: none; transition: background var(--t-fast); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: transform var(--t-fast) var(--ease-out), background var(--t-fast); }
.switch.on { background: var(--accent-1); border-color: transparent; }
.switch.on::after { transform: translateX(17px); background: var(--accent-ink); }

/* ---- Checkbox / radio --------------------------------------------------- */
.checkbox { border-radius: 6px; border: 1.5px solid var(--hairline-hi); }
.checkbox.on { background: var(--accent-1); border-color: transparent; color: var(--accent-ink); }
.radio-dot { border-color: var(--hairline-hi); }
.radio-item.selected .radio-dot { border-color: var(--accent-1); }
.radio-item.selected .radio-dot::after { background: var(--accent-1); }
.radio-list .radio-item.selected, .method-card.selected { border-color: var(--accent-1); background: var(--accent-soft); }

/* ---- Stat / KPI tiles --------------------------------------------------- */
.stat-cell, .kpi-cell { padding: 13px !important; border-radius: var(--r-md) !important; background: var(--surface-2); border: 1px solid var(--hairline); text-align: left; }
.stat-cell .v, .kpi-cell .v { font-size: 19px; font-weight: 600; color: var(--text-1); }
.stat-cell .k, .kpi-cell .k { color: var(--text-3); font-size: 11px; }
.stat-grid { gap: 8px; } .kpi-grid { gap: 8px; }

/* ---- Compact task card -------------------------------------------------- */
.task-card { padding: 13px !important; border-radius: var(--r-lg); }
.task-card .cat-ic { width: 38px !important; height: 38px !important; border-radius: 10px !important; background: var(--surface-3) !important; color: var(--text-2) !important; border: 1px solid var(--hairline); flex: none; }
.task-card .cat-ic svg { width: 19px; height: 19px; }
.task-card .title { font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--text-1); }
.task-card .price { font-size: 18px !important; }

/* ---- Compact filter header --------------------------------------------- */
.feed-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.feed-row { display: flex; align-items: center; gap: 7px; }

/* ---- Detail tabs / segmented content ------------------------------------ */
.detail-tabs .tab { background: var(--surface-2); border: 1px solid var(--hairline); color: var(--text-2); border-radius: var(--r-md); }
.detail-tabs .tab.active { background: var(--accent-soft); border-color: rgba(201,168,106,0.35); color: var(--accent-1); }
.step-num { background: var(--accent-soft); color: var(--accent-1); border-radius: 8px; }
.detail-tabs { gap: 7px; }

/* ---- Wallet ------------------------------------------------------------- */
.balance-hero { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 18px; }
.balance-hero .main { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; color: var(--text-1); }
.chart-wrap { background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.tx-ic { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--hairline); }
.tx-ic svg { width: 17px; height: 17px; }
.tx-group-date { color: var(--text-3); }

/* ---- List rows ---------------------------------------------------------- */
.list-row { background: transparent; border-radius: var(--r-md); }
.list-row .chev { color: var(--text-faint); }

/* ---- Section title (screens.css override) ------------------------------- */
.section-title { font-size: 15px; }

/* ---- Onboarding dots / stepper accent ----------------------------------- */
.onb-dots .d.active { background: var(--accent-1); }
.stepper .dot.done { background: var(--accent-1); }
.stepper .dot.active { background: var(--accent-1); box-shadow: none; }

/* ---- Reserve timer / warn ----------------------------------------------- */
.reserve-timer { background: rgba(217,168,92,0.12); color: var(--warning); }
.warn-block { border-left-color: var(--accent-1); background: var(--accent-soft); }
.warn-block li { color: var(--text-2); }

/* ---- Spinner ------------------------------------------------------------ */
.spinner { border-color: rgba(255,255,255,0.14); border-top-color: var(--accent-1); }

/* ---- Empty state -------------------------------------------------------- */
.empty-state { color: var(--text-3); }
.empty-state .emoji { opacity: 0.9; }