/* ============================================================
   HOPE — Feuille de style complète
   Thèmes · Layout · Composants
   ============================================================ */

:root{
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;
  --tx-xs:11px; --tx-sm:12px; --tx-base:13px; --tx-md:14px;
  --tx-lg:16px; --tx-xl:20px; --tx-2xl:26px; --tx-3xl:34px;
  --bg:#0a0b0d; --bg-elevated:#111214; --bg-sunken:#06070a; --bg-hover:#171a1f;
  --border:rgba(255,255,255,0.07); --border-strong:rgba(255,255,255,0.14);
  --text:#f4f5f7; --text-secondary:rgba(244,245,247,0.68); --text-muted:rgba(244,245,247,0.42);
  --accent:#6366f1; --accent-hover:#7c7ef5; --accent-soft:rgba(99,102,241,0.14);
  --success:#10b981; --success-soft:rgba(16,185,129,0.12);
  --warning:#f59e0b; --warning-soft:rgba(245,158,11,0.12);
  --danger:#ef4444; --danger-soft:rgba(239,68,68,0.12);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.24);
  --shadow-md:0 4px 12px rgba(0,0,0,0.32), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-lg:0 12px 32px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.24);
  --chart-grid:rgba(255,255,255,0.05);
}

[data-theme="graphite"]{}
[data-theme="cyberpunk"]{ --bg:#08090d; --bg-elevated:#0f1016; --bg-sunken:#05060a; --bg-hover:#15171e; --accent:#22d3ee; --accent-hover:#67e8f9; --accent-soft:rgba(34,211,238,0.14); }
[data-theme="synthwave"]{ --bg:#0c0916; --bg-elevated:#15112a; --bg-sunken:#08060f; --bg-hover:#1d1838; --border:rgba(196,181,253,0.09); --border-strong:rgba(196,181,253,0.18); --accent:#a78bfa; --accent-hover:#c4b5fd; --accent-soft:rgba(167,139,250,0.14); }
[data-theme="matrix"]{ --bg:#07100a; --bg-elevated:#0c1a12; --bg-sunken:#040a06; --bg-hover:#12241a; --border:rgba(52,211,153,0.09); --border-strong:rgba(52,211,153,0.18); --accent:#10b981; --accent-hover:#34d399; --accent-soft:rgba(16,185,129,0.14); }
[data-theme="ocean"]{ --bg:#060d16; --bg-elevated:#0b1622; --bg-sunken:#03080e; --bg-hover:#0f1e2e; --border:rgba(56,189,248,0.09); --border-strong:rgba(56,189,248,0.2); --accent:#0ea5e9; --accent-hover:#38bdf8; --accent-soft:rgba(14,165,233,0.14); }
[data-theme="crimson"]{ --bg:#0d0607; --bg-elevated:#170a0c; --bg-sunken:#080304; --bg-hover:#200e11; --border:rgba(248,113,113,0.09); --border-strong:rgba(248,113,113,0.18); --accent:#ef4444; --accent-hover:#f87171; --accent-soft:rgba(239,68,68,0.14); }
[data-theme="gold"]{ --bg:#0c0a06; --bg-elevated:#17130a; --bg-sunken:#080604; --bg-hover:#1f1a0e; --border:rgba(251,191,36,0.09); --border-strong:rgba(251,191,36,0.18); --accent:#eab308; --accent-hover:#fbbf24; --accent-soft:rgba(234,179,8,0.14); }
[data-theme="sunset"]{ --bg:#0e0906; --bg-elevated:#1a120a; --bg-sunken:#080503; --bg-hover:#241810; --border:rgba(251,146,60,0.09); --border-strong:rgba(251,146,60,0.18); --accent:#f97316; --accent-hover:#fb923c; --accent-soft:rgba(249,115,22,0.14); }
[data-theme="royal"]{ --bg:#0a0814; --bg-elevated:#141124; --bg-sunken:#050410; --bg-hover:#1c1832; --border:rgba(168,85,247,0.09); --border-strong:rgba(168,85,247,0.18); --accent:#8b5cf6; --accent-hover:#a78bfa; --accent-soft:rgba(139,92,246,0.14); }
[data-theme="plasma"]{ --bg:#0d0610; --bg-elevated:#170b1c; --bg-sunken:#08030a; --bg-hover:#200f28; --border:rgba(236,72,153,0.09); --border-strong:rgba(236,72,153,0.18); --accent:#ec4899; --accent-hover:#f472b6; --accent-soft:rgba(236,72,153,0.14); }
[data-theme="ice"]{ --bg:#080c14; --bg-elevated:#0f1420; --bg-sunken:#050810; --bg-hover:#151c2e; --border:rgba(125,211,252,0.09); --border-strong:rgba(125,211,252,0.2); --accent:#0ea5e9; --accent-hover:#38bdf8; --accent-soft:rgba(14,165,233,0.14); }

[data-theme="light"]{
  --bg:#fafafa; --bg-elevated:#ffffff; --bg-sunken:#f4f4f5; --bg-hover:#f4f4f5;
  --border:rgba(0,0,0,0.08); --border-strong:rgba(0,0,0,0.16);
  --text:#18181b; --text-secondary:rgba(24,24,27,0.7); --text-muted:rgba(24,24,27,0.45);
  --accent:#4f46e5; --accent-hover:#6366f1; --accent-soft:rgba(79,70,229,0.1);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.08);
  --chart-grid:rgba(0,0,0,0.06);
}
[data-theme="paper"]{
  --bg:#f5f3ee; --bg-elevated:#ffffff; --bg-sunken:#ebe7df; --bg-hover:#eceadf;
  --border:rgba(60,50,35,0.1); --border-strong:rgba(60,50,35,0.2);
  --text:#1c1814; --text-secondary:rgba(28,24,20,0.7); --text-muted:rgba(28,24,20,0.45);
  --accent:#b45309; --accent-hover:#d97706; --accent-soft:rgba(180,83,9,0.1);
  --shadow-md:0 2px 6px rgba(60,50,35,0.08);
  --shadow-lg:0 8px 24px rgba(60,50,35,0.1);
  --chart-grid:rgba(60,50,35,0.07);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:var(--tx-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss01","tnum";
  transition:background-color .15s ease,color .15s ease;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;color:inherit;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
::selection{background:var(--accent);color:#fff;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:999px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}
.app{max-width:1560px;margin:0 auto;padding:0 var(--sp-5) var(--sp-8);}

/* ===================== HEADER ===================== */
.header{
  position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  margin:0 calc(-1 * var(--sp-5));
  padding:0 var(--sp-5);
}
.header-inner{display:flex;align-items:center;gap:var(--sp-4);height:56px;}
.brand{display:flex;align-items:center;gap:var(--sp-3);}
.brand-mark{
  width:28px;height:28px;border-radius:var(--r-md);
  background:var(--accent);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:14px;letter-spacing:-0.03em;
}
.brand-name{font-size:var(--tx-md);font-weight:700;letter-spacing:-0.01em;color:var(--text);}
.brand-sub{
  font-size:var(--tx-xs);color:var(--text-muted);
  border-left:1px solid var(--border);padding-left:var(--sp-3);margin-left:var(--sp-1);
  font-weight:500;
}
.header-spacer{flex:1;min-width:0;}
.header-actions{display:flex;align-items:center;gap:var(--sp-2);}

.status-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  background:var(--bg-sunken);border:1px solid var(--border);
  font-size:var(--tx-xs);font-weight:600;color:var(--text-secondary);
}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--text-muted);}
.status-pill.ok .status-dot{background:var(--success);}
.status-pill.warn .status-dot{background:var(--warning);}
.status-pill.danger .status-dot{background:var(--danger);}
.status-pill.ok{color:var(--success);border-color:color-mix(in srgb,var(--success) 30%,transparent);}
.status-pill.warn{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 30%,transparent);}
.status-pill.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent);}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 var(--sp-3);
  border-radius:var(--r-md);border:1px solid var(--border);
  background:var(--bg-elevated);color:var(--text);
  font-size:var(--tx-sm);font-weight:600;letter-spacing:-0.005em;
  transition:background .12s,border-color .12s,color .12s;
  white-space:nowrap;
}
.btn:hover{background:var(--bg-hover);border-color:var(--border-strong);}
.btn:active{transform:translateY(0.5px);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-secondary);}
.btn-ghost:hover{background:var(--bg-hover);color:var(--text);}
.btn-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,transparent);background:var(--danger-soft);}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 20%,transparent);border-color:var(--danger);color:var(--danger);}
.btn-icon{width:32px;padding:0;}
.btn-sm{height:26px;padding:0 var(--sp-2);font-size:var(--tx-xs);}
.btn-lg{height:38px;padding:0 var(--sp-4);font-size:var(--tx-md);}
.btn-install{
  background:var(--accent);color:#fff;border-color:var(--accent);
  animation:installPulse 2.4s ease-in-out infinite;
}
.btn-install:hover{background:var(--accent-hover);border-color:var(--accent-hover);}
@keyframes installPulse{0%,100%{box-shadow:0 0 0 0 var(--accent-soft);}50%{box-shadow:0 0 0 6px var(--accent-soft);}}

.select{
  height:32px;padding:0 var(--sp-3);padding-right:28px;
  border-radius:var(--r-md);border:1px solid var(--border);
  background:var(--bg-elevated);color:var(--text);
  font-size:var(--tx-sm);font-weight:500;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:12px;
  transition:border-color .12s,background .12s;
}
.select:hover{border-color:var(--border-strong);}
.select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
.select option{background:var(--bg-elevated);color:var(--text);}

/* ===================== TABS ===================== */
.tabs{
  display:flex;gap:2px;margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none;}
.tab{
  position:relative;height:40px;padding:0 var(--sp-4);
  background:transparent;border:none;color:var(--text-secondary);
  font-size:var(--tx-sm);font-weight:600;letter-spacing:-0.005em;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .12s;white-space:nowrap;
}
.tab:hover{color:var(--text);}
.tab.active{color:var(--text);}
.tab.active::after{
  content:'';position:absolute;left:var(--sp-2);right:var(--sp-2);bottom:-1px;height:2px;
  background:var(--accent);border-radius:2px 2px 0 0;
}
.tab-icon{opacity:0.65;font-size:13px;}
.tab.active .tab-icon{opacity:1;}
.pane{display:none;}
.pane.active{display:block;animation:fadeIn .18s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:none;}}

/* ===================== CARD ===================== */
.card{
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-lg);
  transition:border-color .12s;
}
.card-hd{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom:1px solid var(--border);
}
.card-hd h3{margin:0;font-size:var(--tx-sm);font-weight:600;color:var(--text);letter-spacing:-0.005em;}
.card-hd .hd-icon{
  width:22px;height:22px;border-radius:var(--r-sm);
  background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-size:12px;
}
.card-hd .hd-total{
  margin-left:auto;font-family:var(--mono);
  font-size:var(--tx-sm);font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.card-hd .hd-total.accent{color:var(--accent);}
.card-hd .hd-total.success{color:var(--success);}
.card-hd .hd-total.danger{color:var(--danger);}
.card-body{padding:var(--sp-4);}

/* ===================== MONTH BAR ===================== */
.month-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-5);
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.month-nav{display:flex;gap:2px;}
.month-nav .btn{width:30px;height:30px;padding:0;}
.month-input{
  height:32px;padding:0 var(--sp-3);border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--bg-sunken);color:var(--text);
  font-family:var(--mono);font-size:var(--tx-sm);font-weight:600;
  color-scheme:dark;
}
[data-theme="light"] .month-input,[data-theme="paper"] .month-input{color-scheme:light;}
.month-input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.month-display{
  font-size:var(--tx-md);font-weight:600;letter-spacing:-0.01em;
  text-transform:capitalize;
}
.month-bar .spacer{flex:1;min-width:8px;}

.badge{
  display:inline-flex;align-items:center;gap:5px;height:22px;
  padding:0 8px;border-radius:var(--r-sm);
  background:var(--bg-sunken);border:1px solid var(--border);
  font-size:var(--tx-xs);font-weight:600;color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
}
.badge-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);}
.badge.success{color:var(--success);border-color:color-mix(in srgb,var(--success) 25%,transparent);background:var(--success-soft);}
.badge.success .badge-dot{background:var(--success);}
.badge.warn{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 25%,transparent);background:var(--warning-soft);}
.badge.warn .badge-dot{background:var(--warning);}
.badge.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 25%,transparent);background:var(--danger-soft);}
.badge.danger .badge-dot{background:var(--danger);}

/* ===================== LAYOUT ===================== */
.layout{
  display:grid;grid-template-columns:minmax(340px,440px) minmax(0,1fr);
  gap:var(--sp-5);align-items:start;
}
@media(max-width:1100px){ .layout{grid-template-columns:1fr;} }
.col{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0;}
@media(max-width:1100px){ .app{padding:0 var(--sp-4) var(--sp-6);} .header{margin:0 calc(-1 * var(--sp-4));padding:0 var(--sp-4);} }

/* ===================== FIELDS ===================== */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-3);}
.field:last-child{margin-bottom:0;}
.field-label{
  font-size:var(--tx-xs);font-weight:600;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:0.04em;
}
.input-wrap{
  display:flex;align-items:center;gap:var(--sp-2);
  height:36px;padding:0 var(--sp-3);
  border-radius:var(--r-md);border:1px solid var(--border);
  background:var(--bg-sunken);
  transition:border-color .12s,box-shadow .12s;
}
.input-wrap:hover{border-color:var(--border-strong);}
.input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.input-wrap input{
  flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;
  font-size:var(--tx-md);font-weight:500;color:var(--text);
  font-variant-numeric:tabular-nums;
}
.input-wrap input::placeholder{color:var(--text-muted);}
.input-wrap .unit{
  font-size:var(--tx-xs);font-weight:600;color:var(--text-muted);
  font-family:var(--mono);text-transform:uppercase;
}
.input-wrap.readonly{background:var(--bg);border-style:dashed;}
.input-wrap.readonly input{color:var(--text-secondary);}

/* ===================== ITEM ROWS ===================== */
.item{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2);margin-bottom:6px;
  border-radius:var(--r-md);
  border:1px solid transparent;
  background:var(--bg-sunken);
  transition:border-color .12s,background .12s;
}
.item:hover{border-color:var(--border);}
.item:last-child{margin-bottom:0;}
.item-label{
  flex:1;min-width:0;height:32px;padding:0 var(--sp-2);
  border:0;background:transparent;outline:0;
  font-size:var(--tx-sm);font-weight:500;color:var(--text);
  border-bottom:1px dashed transparent;
}
.item-label::placeholder{color:var(--text-muted);font-weight:400;}
.item-label:hover{border-bottom-color:var(--border-strong);}
.item-label:focus{border-bottom-color:var(--accent);border-bottom-style:solid;}
.item-input{
  width:110px;height:32px;padding:0 var(--sp-2);
  border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--bg);color:var(--text);
  font-family:var(--mono);font-size:var(--tx-sm);font-weight:500;
  font-variant-numeric:tabular-nums;text-align:right;outline:0;
  transition:border-color .12s;
}
.item-input:focus{border-color:var(--accent);}
.item-select{
  height:28px;padding:0 6px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--bg);
  font-size:var(--tx-xs);font-weight:500;color:var(--text-secondary);
  outline:0;cursor:pointer;appearance:none;max-width:96px;
}
.item-select:hover{border-color:var(--border-strong);color:var(--text);}
.item-select option{background:var(--bg-elevated);color:var(--text);}
.item-icon{
  width:26px;height:26px;padding:0;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--bg);
  color:var(--text-muted);font-size:11px;
  display:grid;place-items:center;
  transition:color .12s,border-color .12s,background .12s;
}
.item-icon:hover{color:var(--text);border-color:var(--border-strong);}
.item-icon.on{color:var(--success);border-color:color-mix(in srgb,var(--success) 40%,transparent);background:var(--success-soft);}
.item-icon.danger:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:var(--danger-soft);}

.btn-add{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;height:34px;margin-top:var(--sp-2);
  border-radius:var(--r-md);border:1px dashed var(--border-strong);
  background:transparent;color:var(--text-secondary);
  font-size:var(--tx-sm);font-weight:600;
  transition:border-color .12s,color .12s,background .12s;
}
.btn-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);border-style:solid;}

/* ===================== KPI ===================== */
.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-3);
}
.kpi{
  padding:var(--sp-4);
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-lg);
  transition:border-color .12s;
}
.kpi:hover{border-color:var(--border-strong);}
.kpi-label{
  display:flex;align-items:center;gap:6px;
  font-size:var(--tx-xs);font-weight:600;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:0.04em;margin-bottom:var(--sp-2);
}
.kpi-label .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);}
.kpi-label .dot.success{background:var(--success);}
.kpi-label .dot.danger{background:var(--danger);}
.kpi-label .dot.warning{background:var(--warning);}
.kpi-value{
  font-family:var(--mono);font-size:var(--tx-xl);font-weight:600;
  letter-spacing:-0.02em;font-variant-numeric:tabular-nums;
  color:var(--text);line-height:1.15;
}
.kpi-value.pos{color:var(--success);}
.kpi-value.neg{color:var(--danger);}
.kpi-sub{
  margin-top:6px;font-size:var(--tx-xs);color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}

.dash-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--sp-5);
}

/* ===================== GAUGE ===================== */
.gauge-wrap{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;}
.gauge{position:relative;width:120px;height:120px;flex:0 0 120px;}
.gauge svg{width:100%;height:100%;display:block;}
.gauge-track{fill:none;stroke:var(--bg-sunken);stroke-width:8;}
.gauge-fill{
  fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;
  transition:stroke-dasharray .6s cubic-bezier(.4,0,.2,1),stroke .2s;
}
.gauge-num{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
.gauge-num b{
  font-family:var(--mono);font-size:26px;font-weight:700;
  color:var(--text);line-height:1;font-variant-numeric:tabular-nums;
}
.gauge-num span{
  margin-top:4px;font-size:9px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-muted);font-weight:600;
}
.gauge-info{flex:1;min-width:140px;}
.gauge-title{font-size:var(--tx-lg);font-weight:700;margin-bottom:6px;letter-spacing:-0.01em;}
.gauge-title.ok{color:var(--success);}
.gauge-title.warn{color:var(--warning);}
.gauge-title.danger{color:var(--danger);}
.gauge-desc{font-size:var(--tx-sm);color:var(--text-secondary);line-height:1.5;}

/* ===================== RATIO ===================== */
.ratio{margin-bottom:var(--sp-4);}
.ratio:last-child{margin-bottom:0;}
.ratio-hd{
  display:flex;align-items:baseline;gap:6px;margin-bottom:8px;
  font-size:var(--tx-sm);
}
.ratio-name{font-weight:600;color:var(--text);}
.ratio-hint{color:var(--text-muted);font-size:var(--tx-xs);}
.ratio-val{
  margin-left:auto;font-family:var(--mono);
  font-size:var(--tx-sm);font-variant-numeric:tabular-nums;
  color:var(--text-secondary);
}
.ratio-val b{color:var(--text);font-weight:600;}
.ratio-track{
  position:relative;height:6px;border-radius:999px;
  background:var(--bg-sunken);overflow:hidden;
}
.ratio-fill{
  height:100%;border-radius:999px;width:0;
  background:var(--accent);
  transition:width .5s cubic-bezier(.4,0,.2,1),background .2s;
}
.ratio-fill.ok{background:var(--success);}
.ratio-fill.warn{background:var(--warning);}
.ratio-fill.over{background:var(--danger);}
.ratio-mark{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--text-muted);opacity:.5;}

/* ===================== DONUT ===================== */
.donut-wrap{display:flex;gap:var(--sp-5);align-items:flex-start;flex-wrap:wrap;}
.donut-svg-wrap{position:relative;width:150px;height:150px;flex:0 0 150px;}
.donut-svg-wrap svg{width:100%;height:100%;display:block;}
.donut-center{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
.donut-center small{
  font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-muted);font-weight:600;
}
.donut-center b{
  font-family:var(--mono);font-size:14px;font-weight:700;
  color:var(--text);margin-top:4px;font-variant-numeric:tabular-nums;
}
.slice{transition:opacity .15s;cursor:pointer;}
.slice:hover{opacity:0.7;}
.legend{
  list-style:none;margin:0;padding:0;flex:1;min-width:150px;
  display:flex;flex-direction:column;gap:4px;
  max-height:150px;overflow-y:auto;
}
.legend li{
  display:flex;align-items:center;gap:8px;padding:4px 0;
  font-size:var(--tx-sm);
}
.legend .sw{width:8px;height:8px;border-radius:2px;flex:0 0 8px;background:var(--c);}
.legend .name{color:var(--text-secondary);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.legend .val{margin-left:auto;font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;color:var(--text);font-size:var(--tx-xs);}
.legend .pct{min-width:32px;text-align:right;font-family:var(--mono);font-size:var(--tx-xs);color:var(--text-muted);font-variant-numeric:tabular-nums;}
.top-list{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border);}
.top-list-title{
  font-size:var(--tx-xs);font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--sp-2);
}
.top-row{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:6px 0;font-size:var(--tx-sm);
}
.top-rank{
  width:18px;height:18px;border-radius:var(--r-sm);
  background:var(--bg-sunken);border:1px solid var(--border);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--text-secondary);flex:0 0 18px;
}
.top-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:500;}
.top-val{font-family:var(--mono);font-size:var(--tx-xs);font-weight:600;font-variant-numeric:tabular-nums;}

/* ===================== CHARTS ===================== */
.chart-wrap svg{width:100%;height:auto;display:block;overflow:visible;}
.chart-legend{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-3);
  font-size:var(--tx-xs);color:var(--text-secondary);
}
.chart-legend .legend-item{display:flex;align-items:center;gap:6px;}
.chart-legend .legend-sw{width:10px;height:10px;border-radius:3px;}
.chart-legend b{
  color:var(--text);font-family:var(--mono);font-weight:600;
  font-variant-numeric:tabular-nums;margin-left:4px;
}

/* ===================== SAVINGS HERO ===================== */
.savings-hero{
  padding:var(--sp-4);border-radius:var(--r-md);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);
  margin-bottom:var(--sp-4);
}
.savings-hero-label{
  font-size:var(--tx-xs);font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--accent);margin-bottom:6px;
}
.savings-hero-value{
  font-family:var(--mono);font-size:var(--tx-2xl);font-weight:700;
  color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-0.02em;
  line-height:1.1;
}
.savings-hero-sub{margin-top:8px;font-size:var(--tx-xs);color:var(--text-secondary);}

.savings-row{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) 0;border-bottom:1px solid var(--border);
}
.savings-row:last-child{border-bottom:none;}
.savings-row-main{flex:1;min-width:0;}
.savings-row-title{
  display:flex;align-items:center;gap:6px;margin-bottom:5px;
  font-size:var(--tx-sm);font-weight:600;color:var(--text);
}
.savings-dot{width:7px;height:7px;border-radius:2px;background:var(--sc,var(--accent));flex:0 0 7px;}
.savings-row-title .kind{
  font-size:9px;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;padding:2px 5px;border-radius:3px;
  background:var(--bg-sunken);color:var(--text-muted);
}
.savings-row-bar{
  height:5px;border-radius:999px;background:var(--bg-sunken);overflow:hidden;
  margin-bottom:5px;
}
.savings-row-fill{
  height:100%;border-radius:999px;background:var(--sc,var(--accent));
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.savings-row-meta{
  display:flex;gap:var(--sp-3);font-size:var(--tx-xs);
  color:var(--text-muted);font-variant-numeric:tabular-nums;
}
.savings-row-meta b{color:var(--text-secondary);font-weight:600;font-family:var(--mono);}
.savings-input{
  width:100px;height:32px;padding:0 var(--sp-2);
  border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--bg-sunken);color:var(--text);
  font-family:var(--mono);font-size:var(--tx-sm);font-weight:600;
  font-variant-numeric:tabular-nums;text-align:right;outline:0;
}
.savings-input:focus{border-color:var(--accent);}
.savings-done{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--tx-xs);font-weight:600;color:var(--success);
  font-family:var(--mono);
}

/* ===================== TABLES ===================== */
.tbl-wrap{overflow-x:auto;margin:0 calc(-1 * var(--sp-4));padding:0 var(--sp-4);}
.tbl{width:100%;border-collapse:collapse;font-size:var(--tx-sm);}
.tbl th{
  text-align:left;padding:8px var(--sp-3);
  font-size:var(--tx-xs);font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--text-muted);
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.tbl td{padding:10px var(--sp-3);border-bottom:1px solid var(--border);color:var(--text);}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:var(--bg-hover);}
.tbl td.num{
  font-family:var(--mono);font-size:var(--tx-xs);font-weight:500;
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;
}
.tbl td.num.pos{color:var(--success);}
.tbl td.num.neg{color:var(--danger);}
.tbl .month{font-weight:600;text-transform:capitalize;font-size:var(--tx-xs);}
.pill{
  display:inline-flex;align-items:center;height:20px;padding:0 7px;
  border-radius:var(--r-sm);font-size:10px;font-weight:600;
  letter-spacing:0.02em;text-transform:uppercase;
  background:var(--bg-sunken);color:var(--text-secondary);
  border:1px solid var(--border);
}
.pill.ok{color:var(--success);background:var(--success-soft);border-color:color-mix(in srgb,var(--success) 25%,transparent);}
.pill.warn{color:var(--warning);background:var(--warning-soft);border-color:color-mix(in srgb,var(--warning) 25%,transparent);}
.pill.danger{color:var(--danger);background:var(--danger-soft);border-color:color-mix(in srgb,var(--danger) 25%,transparent);}

.empty{padding:var(--sp-6) var(--sp-4);text-align:center;color:var(--text-muted);font-size:var(--tx-sm);}
.empty-title{font-weight:600;color:var(--text-secondary);margin-bottom:4px;font-size:var(--tx-base);}

/* ===================== FILTER BAR ===================== */
.filter-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-5);
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.filter-bar .spacer{flex:1;min-width:8px;}

/* ===================== PROJECTS / PURCHASES ===================== */
.proj-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--sp-4);
}
.proj-card{
  padding:var(--sp-4);
  background:var(--bg-elevated);border:1px solid var(--border);
  border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:var(--sp-3);
  transition:border-color .12s;
}
.proj-card:hover{border-color:var(--border-strong);}
.proj-card.achieved{opacity:0.65;}
.proj-hd{display:flex;align-items:center;gap:var(--sp-2);}
.proj-mark{width:8px;height:8px;border-radius:2px;background:var(--pm,var(--accent));flex:0 0 8px;}
.proj-name{font-size:var(--tx-base);font-weight:600;color:var(--text);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.proj-kind{
  font-size:9px;font-weight:600;letter-spacing:0.06em;
  text-transform:uppercase;padding:2px 6px;border-radius:3px;
  background:var(--bg-sunken);color:var(--text-muted);
}
.proj-progress{height:6px;border-radius:999px;background:var(--bg-sunken);overflow:hidden;}
.proj-progress-fill{
  height:100%;border-radius:999px;
  background:var(--pm,var(--accent));
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.proj-numbers{
  display:flex;justify-content:space-between;gap:var(--sp-3);
  font-size:var(--tx-xs);color:var(--text-muted);
  font-variant-numeric:tabular-nums;
}
.proj-numbers b{color:var(--text);font-family:var(--mono);font-weight:600;}
.proj-numbers .accent{color:var(--accent);}
.proj-numbers .warn{color:var(--warning);}
.proj-numbers .success{color:var(--success);}
.proj-actions{display:flex;gap:var(--sp-2);}
.proj-actions .btn{flex:1;}

/* ===================== FORM BLOCK ===================== */
.form-block{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:var(--sp-3);align-items:end;
}
.form-block .field{margin-bottom:0;}
.form-block .btn-full{align-self:end;}

/* ===================== NOTIFICATIONS PANEL ===================== */
.notif-panel{
  position:fixed;top:56px;right:var(--sp-5);
  width:min(380px,calc(100vw - 32px));max-height:calc(100vh - 80px);
  background:var(--bg-elevated);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  z-index:100;display:none;flex-direction:column;overflow:hidden;
}
.notif-panel.open{display:flex;animation:fadeIn .15s ease;}
.notif-hd{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);
}
.notif-hd h3{margin:0;font-size:var(--tx-sm);font-weight:600;flex:1;}
.notif-list{overflow-y:auto;flex:1;padding:var(--sp-2);}
.notif-item{
  padding:var(--sp-3);border-radius:var(--r-md);
  border-left:2px solid var(--nc,var(--accent));
  background:var(--bg-sunken);margin-bottom:4px;
  cursor:pointer;transition:background .12s;
}
.notif-item:hover{background:var(--bg-hover);}
.notif-item.read{opacity:0.55;}
.notif-item .nt{
  font-size:var(--tx-xs);font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--nc,var(--accent));margin-bottom:3px;
}
.notif-item .nm{font-size:var(--tx-sm);color:var(--text);line-height:1.4;}
.notif-item .ntime{font-size:10px;color:var(--text-muted);margin-top:5px;font-family:var(--mono);}
.notif-item.success{--nc:var(--success);}
.notif-item.warn{--nc:var(--warning);}
.notif-item.danger{--nc:var(--danger);}

.bell{
  position:relative;width:32px;height:32px;padding:0;
  border-radius:var(--r-md);border:1px solid var(--border);
  background:var(--bg-elevated);color:var(--text-secondary);
  display:grid;place-items:center;font-size:14px;
  transition:background .12s,color .12s;
}
.bell:hover{background:var(--bg-hover);color:var(--text);}
.bell .badge-count{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;
  padding:0 4px;border-radius:999px;background:var(--danger);
  color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;
  display:grid;place-items:center;border:2px solid var(--bg);
}
.bell .badge-count.hidden{display:none;}

/* ===================== COMMAND PALETTE ===================== */
.cmd-overlay{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);
  align-items:flex-start;justify-content:center;padding-top:14vh;
}
.cmd-overlay.open{display:flex;animation:fadeIn .15s ease;}
.cmd{
  width:min(560px,calc(100vw - 32px));max-height:60vh;
  background:var(--bg-elevated);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
}
.cmd-input{
  width:100%;height:52px;padding:0 var(--sp-4);
  border:0;border-bottom:1px solid var(--border);
  background:transparent;color:var(--text);outline:0;
  font-size:var(--tx-md);font-weight:500;
}
.cmd-input::placeholder{color:var(--text-muted);}
.cmd-results{overflow-y:auto;padding:var(--sp-2);}
.cmd-item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);
  cursor:pointer;transition:background .12s;
}
.cmd-item:hover,.cmd-item.selected{background:var(--bg-hover);}
.cmd-item .ci-icon{
  width:26px;height:26px;border-radius:var(--r-sm);
  background:var(--bg-sunken);color:var(--text-secondary);
  display:grid;place-items:center;font-size:12px;flex:0 0 26px;
}
.cmd-item .ci-body{flex:1;min-width:0;}
.cmd-item .ci-title{font-size:var(--tx-sm);font-weight:500;color:var(--text);}
.cmd-item .ci-sub{font-size:var(--tx-xs);color:var(--text-muted);margin-top:1px;}
.cmd-item .ci-kbd{
  font-family:var(--mono);font-size:10px;color:var(--text-muted);
  padding:2px 5px;border-radius:4px;background:var(--bg-sunken);
  border:1px solid var(--border);
}

/* ===================== TOASTS ===================== */
.toasts{
  position:fixed;bottom:var(--sp-5);right:var(--sp-5);z-index:300;
  display:flex;flex-direction:column;gap:var(--sp-2);
  width:min(360px,calc(100vw - 32px));pointer-events:none;
}
.toast{
  pointer-events:auto;display:flex;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);
  background:var(--bg-elevated);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  border-left:3px solid var(--tc,var(--accent));
  animation:toastIn .25s cubic-bezier(.4,0,.2,1);
}
.toast.out{animation:toastOut .2s ease forwards;}
@keyframes toastIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateY(8px);}}
.toast-body{flex:1;min-width:0;}
.toast-title{
  font-size:var(--tx-xs);font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--tc,var(--accent));margin-bottom:3px;
}
.toast-msg{font-size:var(--tx-sm);color:var(--text);line-height:1.4;}
.toast.success{--tc:var(--success);}
.toast.warn{--tc:var(--warning);}
.toast.danger{--tc:var(--danger);}

/* ===================== MODAL ===================== */
.modal-overlay{
  position:fixed;inset:0;z-index:250;display:none;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);
  align-items:center;justify-content:center;padding:var(--sp-5);
}
.modal-overlay.open{display:flex;animation:fadeIn .15s ease;}
.modal{
  width:min(520px,100%);max-height:80vh;
  background:var(--bg-elevated);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;
}
.modal-hd{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-4);border-bottom:1px solid var(--border);}
.modal-hd h3{margin:0;font-size:var(--tx-md);font-weight:600;flex:1;}
.modal-body{padding:var(--sp-4);overflow-y:auto;flex:1;}
.modal-ft{display:flex;gap:var(--sp-2);justify-content:flex-end;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);}

/* ===================== CATEGORIES ===================== */
.cat-section{margin-bottom:var(--sp-4);}
.cat-section:last-child{margin-bottom:0;}
.cat-title{
  font-size:var(--tx-xs);font-weight:600;letter-spacing:0.04em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;
}
.cat-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;}
.cat-tag{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 8px;border-radius:var(--r-sm);
  background:var(--bg-sunken);border:1px solid var(--border);
  font-size:var(--tx-xs);color:var(--text-secondary);
}
.cat-tag button{background:none;border:none;padding:0;color:inherit;cursor:pointer;font-size:12px;line-height:1;opacity:0.6;}
.cat-tag button:hover{opacity:1;color:var(--danger);}
.cat-add-row{display:flex;gap:6px;}
.cat-add-row .input-wrap{flex:1;height:32px;}

/* ===================== UPDATE BANNER ===================== */
.update-banner{
  display:none;align-items:center;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-4);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  border-radius:var(--r-lg);font-size:var(--tx-sm);color:var(--text);
}
.update-banner.show{display:flex;animation:fadeIn .2s ease;}
.update-banner .spacer{flex:1;}

/* ===================== PWA STATUS ===================== */
.pwa-status{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--sp-3);margin-bottom:var(--sp-4);
}
.pwa-status-item{
  padding:var(--sp-3);border-radius:var(--r-md);
  background:var(--bg-sunken);border:1px solid var(--border);
}
.pwa-status-item .label{
  font-size:var(--tx-xs);font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.04em;margin-bottom:4px;
}
.pwa-status-item .value{
  font-family:var(--mono);font-size:var(--tx-md);font-weight:600;
  color:var(--text);
}
.pwa-status-item .value.ok{color:var(--success);}
.pwa-status-item .value.warn{color:var(--warning);}
.pwa-status-item .value.danger{color:var(--danger);}

/* ===================== FOOTER ===================== */
.footer{
  margin-top:var(--sp-8);padding:var(--sp-5) 0;
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  font-size:var(--tx-xs);color:var(--text-muted);
}
.footer .local{display:inline-flex;align-items:center;gap:5px;color:var(--success);font-weight:600;}
.footer .local::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--success);}
.footer .spacer{flex:1;min-width:8px;}

/* ===================== RESPONSIVE ===================== */
@media(max-width:640px){
  .kpis{grid-template-columns:1fr 1fr;}
  .kpi-value{font-size:var(--tx-lg);}
  .header-inner{height:52px;gap:var(--sp-2);}
  .brand-sub{display:none;}
  .status-pill{display:none;}
  .month-bar{gap:6px;padding:var(--sp-2) var(--sp-3);}
  .month-display{font-size:var(--tx-sm);}
  .tab{padding:0 var(--sp-3);font-size:var(--tx-xs);}
  .tab-icon{display:none;}
  .item{flex-wrap:wrap;}
  .item-label{flex:1 1 100%;}
  .item-input{flex:1;}
  .gauge-wrap{justify-content:center;}
  .gauge-info{text-align:center;}
  .donut-wrap{justify-content:center;}
  .legend{max-height:none;}
  .btn-install-label{display:none;}
}
/* ===================== SYNC INDICATOR ===================== */
#authBtn { position: relative; padding-left: 18px !important; }
#authBtn::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: background .2s;
}
#authBtn.sync-syncing::before {
  background: var(--warning);
  animation: pulse-dot 1s ease-in-out infinite;
}
#authBtn.sync-synced::before { background: var(--success); }
#authBtn.sync-error::before { background: var(--danger); }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50% { opacity: .35; transform: translateY(-50%) scale(.7); }
}

/* ===================== PROFILE MENU ===================== */
.profile-menu {
  position: fixed;
  z-index: 300;
  width: 240px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  animation: fadeIn .12s ease;
}
.profile-menu.open { display: block; }
.profile-menu-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.profile-menu-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  flex: 0 0 36px;
}
.profile-menu-name {
  font-size: var(--tx-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.profile-menu-email {
  font-size: var(--tx-xs);
  color: var(--text-muted);
  margin-top: 2px;
  word-break: break-all;
}
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: var(--r-md);
  color: var(--text);
  font-size: var(--tx-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.profile-menu-item:hover { background: var(--bg-hover); }
.profile-menu-item span {
  font-size: 14px;
  color: var(--text-muted);
  width: 16px;
  text-align: center;
}
.profile-menu-item.danger { color: var(--danger); }
.profile-menu-item.danger span { color: var(--danger); }