/* ══════════════════════════════════════════════════════
   DESIGN TOKENS  — swap these 2 vars to re-theme everything
══════════════════════════════════════════════════════ */
:root {
    /* ── Themeable (default: violet + violet) ── */
    --p:         #5B5BD6;
    --p-light:   #7B7EF4;
    --p-dark:    #3E3EA8;
    --p-soft:    rgba(91,91,214,.10);
    --p-glow:    rgba(91,91,214,.30);
  
    --s:         #7C3AED;
    --s-light:   #A78BFA;
    --s-dark:    #5B21B6;
    --s-soft:    rgba(124,58,237,.12);
  
    /* ── Semantic ── */
    --ok:        #22C997;
    --ok-soft:   rgba(34,201,151,.12);
    --err:       #FF5C7A;
    --err-soft:  rgba(255,92,122,.12);
    --warn:      #FFB648;
    --warn-soft: rgba(255,182,72,.14);
    --info:      #38BDF8;
    --info-soft: rgba(56,189,248,.12);
  
    /* ── Surface / bg ── */
    --bg:          #ECEEf8;
    --glass-bg:    rgba(255,255,255,0.55);
    --glass-bg2:   rgba(255,255,255,0.35);
    --glass-border:rgba(255,255,255,0.70);
    --glass-blur:  blur(18px);
    --surface:     #FFFFFF;
    --surface-2:   rgba(240,241,252,0.80);
    --border:      rgba(200,202,230,0.60);
  
    /* ── Text ── */
    --t1:  #1A1A3E;
    --t2:  #6B6B9A;
    --t3:  #A0A0C0;
  
    /* ── Radius / Shadow ── */
    --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px;
    --sh:   0 4px 28px rgba(91,91,214,.10);
    --sh-lg:0 16px 56px rgba(91,91,214,.16);
    --sh-glass: 0 8px 32px rgba(91,91,214,.12), inset 0 1px 0 rgba(255,255,255,.8);
  
    --font: 'Vazir', Tahoma, sans-serif;
  }
  
  /* ── Palette presets injected by JS ── */
  .theme-violet  { --p:#5B5BD6; --p-light:#7B7EF4; --p-dark:#3E3EA8; --p-soft:rgba(91,91,214,.10); --p-glow:rgba(91,91,214,.30); }
  .theme-rose    { --p:#E11D48; --p-light:#FB7185; --p-dark:#9F1239; --p-soft:rgba(225,29,72,.10);  --p-glow:rgba(225,29,72,.28); }
  .theme-emerald { --p:#059669; --p-light:#34D399; --p-dark:#065F46; --p-soft:rgba(5,150,105,.10); --p-glow:rgba(5,150,105,.26); }
  .theme-sky     { --p:#0284C7; --p-light:#38BDF8; --p-dark:#075985; --p-soft:rgba(2,132,199,.10); --p-glow:rgba(2,132,199,.28); }
  .theme-amber   { --p:#D97706; --p-light:#FCD34D; --p-dark:#92400E; --p-soft:rgba(217,119,6,.10);  --p-glow:rgba(217,119,6,.26); }
  .theme-fuchsia { --p:#A21CAF; --p-light:#E879F9; --p-dark:#701A75; --p-soft:rgba(162,28,175,.10);--p-glow:rgba(162,28,175,.28); }
  .theme-cyan    { --p:#0891B2; --p-light:#22D3EE; --p-dark:#164E63; --p-soft:rgba(8,145,178,.10);  --p-glow:rgba(8,145,178,.26); }
  .theme-orange  { --p:#EA580C; --p-light:#FB923C; --p-dark:#9A3412; --p-soft:rgba(234,88,12,.10); --p-glow:rgba(234,88,12,.28); }
  
  .sec-pink    { --s:#FF6B9D; --s-light:#FF8FB5; --s-dark:#D94F80; --s-soft:rgba(255,107,157,.12); }
  .sec-teal    { --s:#14B8A6; --s-light:#5EEAD4; --s-dark:#0F766E; --s-soft:rgba(20,184,166,.12); }
  .sec-violet  { --s:#7C3AED; --s-light:#A78BFA; --s-dark:#5B21B6; --s-soft:rgba(124,58,237,.12); }
  .sec-amber   { --s:#F59E0B; --s-light:#FCD34D; --s-dark:#B45309; --s-soft:rgba(245,158,11,.12); }
  .sec-indigo  { --s:#4F46E5; --s-light:#818CF8; --s-dark:#3730A3; --s-soft:rgba(79,70,229,.12); }
  .sec-rose    { --s:#F43F5E; --s-light:#FDA4AF; --s-dark:#BE123C; --s-soft:rgba(244,63,94,.12); }
  
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font);
    background: var(--bg);
    min-height: 100vh;
    color: var(--t1);
    /* mesh gradient background */
    background-image:
      radial-gradient(ellipse 70% 50% at 15% 10%, rgba(91,91,214,.13) 0%, transparent 60%),
      radial-gradient(ellipse 60% 40% at 85% 80%, rgba(255,107,157,.10) 0%, transparent 55%),
      radial-gradient(ellipse 50% 60% at 50% 50%, rgba(56,189,248,.06) 0%, transparent 70%);
    background-attachment: fixed;
  }
  
  /* ══════════════════════════════════════════════════════
     THEME SWITCHER PANEL
  ══════════════════════════════════════════════════════ */
  .switcher-bar {
    position: sticky; top: 0; z-index: 100;
    padding: 12px 32px;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  }
  .sw-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--t3); }
  .sw-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .sw-dot {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    border: 3px solid transparent; transition: all .18s;
    position: relative;
  }
  .sw-dot:hover { transform: scale(1.15); }
  .sw-dot.active { border-color: var(--t1); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--t1); }
  .sw-sep { width: 1px; height: 24px; background: var(--border); }
  
  /* ══════════════════════════════════════════════════════
     LAYOUT
  ══════════════════════════════════════════════════════ */
  .kit-wrapper { max-width: 1140px; margin: 0 auto; padding: 48px 28px 100px; }
  
  .kit-header { text-align: center; margin-bottom: 72px; }
  .kit-logo { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:800; color:var(--p); margin-bottom:20px; }
  .kit-logo-box { width:44px; height:44px; border-radius:13px; background:var(--p); display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 18px var(--p-glow); }
  .kit-title { font-size:46px; font-weight:800; letter-spacing:-2px; background: linear-gradient(135deg, var(--p), var(--s)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
  .kit-sub { font-size:15px; color:var(--t2); margin-top:10px; }
  
  .section { margin-bottom: 80px; }
  .section-label {
    font-size:13px; font-weight:800; letter-spacing:.4px; color:var(--t2);
    margin-bottom:24px; padding-bottom:12px; border-bottom:1.5px solid var(--border);
    display:flex; align-items:center; gap:12px;
  }
  .section-label::after { content:''; flex:1; height:1px; background:var(--border); display:none; }
  
  /* ══════════════════════════════════════════════════════
     GLASS UTILITY
  ══════════════════════════════════════════════════════ */
  .glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border);
    box-shadow: var(--sh-glass);
  }
  .glass-2 {
    background: var(--glass-bg2);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
  }
  
  /* ══════════════════════════════════════════════════════
     COLOR SWATCHES
  ══════════════════════════════════════════════════════ */
  .color-grid { display:flex; flex-wrap:wrap; gap:14px; }
  .swatch { width:110px; }
  .swatch-box { width:100%; height:64px; border-radius:var(--r-md); margin-bottom:8px; transition:transform .2s; cursor:pointer; border:1.5px solid var(--border); }
  .swatch-box:hover { transform:scale(1.06) translateY(-2px); box-shadow:var(--sh); }
  .swatch-name { font-size:12px; font-weight:600; }
  .swatch-hex  { font-size:10px; color:var(--t3); font-family:monospace; }
  
  /* ══════════════════════════════════════════════════════
     TYPOGRAPHY
  ══════════════════════════════════════════════════════ */
  .type-row { display:flex; align-items:baseline; gap:20px; padding:10px 0; border-bottom:1px solid var(--border); }
  .type-row:last-child { border:none; }
  .type-tag { width:80px; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--t3); flex-shrink:0; }
  
  /* ══════════════════════════════════════════════════════
     BUTTONS
  ══════════════════════════════════════════════════════ */
  .btn-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font); font-weight:600; border:none; cursor:pointer;
    transition:all .2s cubic-bezier(.4,0,.2,1); text-decoration:none; white-space:nowrap;
    position:relative; overflow:hidden;
  }
  .btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .2s; }
  .btn:hover::after { background:rgba(255,255,255,.08); }
  .btn:hover { transform:translateY(-2px); }
  .btn:active { transform:translateY(0) scale(.97); }
  
  .btn-p  { background:var(--p); color:#fff; padding:13px 28px; border-radius:var(--r-md); font-size:14px; box-shadow:0 6px 20px var(--p-glow); }
  .btn-p:hover { box-shadow:0 10px 32px var(--p-glow); }
  .btn-s  { background:var(--s); color:#fff; padding:13px 28px; border-radius:var(--r-md); font-size:14px; box-shadow:0 6px 20px var(--s-soft); }
  .btn-soft { background:var(--p-soft); color:var(--p); padding:13px 28px; border-radius:var(--r-md); font-size:14px; }
  .btn-soft:hover { background:var(--p); color:#fff; }
  .btn-outline { background:transparent; color:var(--p); padding:12px 28px; border-radius:var(--r-md); font-size:14px; border:2px solid var(--p); }
  .btn-outline:hover { background:var(--p); color:#fff; }
  .btn-ghost { background:transparent; color:var(--t2); padding:12px 20px; border-radius:var(--r-md); font-size:14px; }
  .btn-ghost:hover { background:var(--border); color:var(--t1); }
  .btn-glass { background:var(--glass-bg); backdrop-filter:var(--glass-blur); border:1.5px solid var(--glass-border); color:var(--p); padding:13px 28px; border-radius:var(--r-md); font-size:14px; box-shadow:var(--sh-glass); }
  .btn-err  { background:var(--err); color:#fff; padding:13px 28px; border-radius:var(--r-md); font-size:14px; box-shadow:0 6px 20px var(--err-soft); }
  .btn-ok   { background:var(--ok);  color:#fff; padding:13px 28px; border-radius:var(--r-md); font-size:14px; box-shadow:0 6px 20px var(--ok-soft); }
  .btn-warn { background:var(--warn);color:#fff; padding:13px 28px; border-radius:var(--r-md); font-size:14px; }
  .btn-grad { background:linear-gradient(135deg, var(--p), var(--s)); color:#fff; padding:13px 28px; border-radius:var(--r-md); font-size:14px; box-shadow:0 6px 24px var(--p-glow); }
  
  .btn-sm { padding:8px 16px !important; font-size:12px !important; border-radius:var(--r-sm) !important; }
  .btn-lg { padding:17px 36px !important; font-size:16px !important; border-radius:20px !important; }
  .btn-pill { border-radius:100px !important; }
  .btn-icon { width:44px; height:44px; padding:0 !important; border-radius:12px !important; }
  .btn-icon-lg { width:52px; height:52px; padding:0 !important; border-radius:16px !important; }
  .btn[disabled] { opacity:.45; pointer-events:none; }
  
  /* ══════════════════════════════════════════════════════
     CARDS  (all glass)
  ══════════════════════════════════════════════════════ */
  .card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:20px; }
  
  .card {
    border-radius:var(--r-lg); padding:24px;
    transition:box-shadow .25s, transform .25s;
  }
  .card:hover { box-shadow:var(--sh-lg) !important; transform:translateY(-4px); }
  
  /* Balance card */
  .card-balance {
    background: linear-gradient(135deg, var(--p) 0%, var(--p-dark) 55%, color-mix(in srgb, var(--p-dark) 60%, #000) 100%);
    color:#fff; position:relative; overflow:hidden;
    box-shadow: 0 12px 48px var(--p-glow);
  }
  .card-balance::before { content:''; position:absolute; top:-50px; right:-50px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.09); }
  .card-balance::after  { content:''; position:absolute; bottom:-70px; left:10px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.05); }
  .bal-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:14px; position:relative; z-index:1; }
  .bal-label { font-size:11px; opacity:.7; font-weight:500; }
  .bal-tag   { font-size:11px; font-weight:700; background:rgba(255,255,255,.18); padding:3px 9px; border-radius:20px; }
  .bal-amount{ font-size:38px; font-weight:800; letter-spacing:-1.5px; position:relative; z-index:1; margin-bottom:14px; }
  .bal-digits{ font-size:14px; letter-spacing:4px; opacity:.65; margin-bottom:5px; position:relative; z-index:1; }
  .bal-num   { font-size:15px; font-weight:700; position:relative; z-index:1; margin-bottom:20px; }
  .bal-foot  { display:flex; justify-content:space-between; position:relative; z-index:1; }
  .bal-fl    { font-size:9px; opacity:.55; text-transform:uppercase; letter-spacing:1px; }
  .bal-fv    { font-size:13px; font-weight:700; }
  
  /* Stat card */
  .card-stat { display:flex; gap:16px; align-items:flex-start; }
  .stat-ico { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .stat-lbl { font-size:13px; color:var(--t2); margin-bottom:4px; }
  .stat-val { font-size:26px; font-weight:800; letter-spacing:-1px; }
  .stat-chg { font-size:12px; font-weight:600; margin-top:4px; }
  .stat-chg.up   { color:var(--ok); }
  .stat-chg.down { color:var(--err); }
  
  /* Donut */
  .donut-wrap { position:relative; width:120px; height:120px; margin:16px auto; }
  .donut-wrap svg { transform:rotate(-90deg); }
  .d-bg   { fill:none; stroke:rgba(200,202,230,.3); stroke-width:12; }
  .d-fill { fill:none; stroke-width:12; stroke-linecap:round; }
  .d-center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
  .d-val { font-size:17px; font-weight:800; }
  .d-pct { font-size:10px; font-weight:600; color:var(--ok); background:var(--ok-soft); padding:2px 6px; border-radius:20px; }
  
  /* ══════════════════════════════════════════════════════
     SIDEBAR NAV  (exact image match)
  ══════════════════════════════════════════════════════ */
  .sidebar {
    width:200px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border);
    box-shadow: var(--sh-glass);
    border-radius: var(--r-lg);
    padding: 20px 0;
    display: flex; flex-direction: column; gap: 2px;
    overflow: hidden; position: relative;
  }
  .sidebar-logo {
    display:flex; align-items:center; gap:9px;
    padding:4px 20px 20px;
    font-size:17px; font-weight:800; color:var(--p);
    border-bottom:1px solid var(--border);
    margin-bottom:8px;
  }
  .sidebar-logo-icon { width:34px; height:34px; background:var(--p); border-radius:9px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px var(--p-glow); }
  
  .nav-link {
    display:flex; align-items:center; gap:12px;
    padding:11px 20px; margin:0 8px;
    border-radius:var(--r-sm);
    font-size:13.5px; font-weight:500;
    color:var(--t2); cursor:pointer;
    transition:all .18s; text-decoration:none;
    position:relative;
  }
  .nav-link:hover { background:var(--p-soft); color:var(--p); }
  .nav-link.active {
    color:var(--p); font-weight:700;
    background: var(--p-soft);
  }
  /* The left border accent exactly like image */
  .nav-link.active::before {
    content:''; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
    width:4px; height:60%; background:var(--p); border-radius:0 4px 4px 0;
  }
  .nav-ico {
    width:34px; height:34px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all .18s;
  }
  .nav-link.active .nav-ico { background:var(--p); }
  .nav-link.active .nav-ico svg { stroke:#fff; }
  .nav-link:not(.active) .nav-ico { background:transparent; }
  .nav-link:not(.active):hover .nav-ico { background:var(--p-soft); }
  .nav-link:not(.active):hover .nav-ico svg { stroke:var(--p); }
  .nav-ico svg { stroke:var(--t3); transition:stroke .18s; }
  
  /* ══════════════════════════════════════════════════════
     INPUTS
  ══════════════════════════════════════════════════════ */
  .inp-col { display:flex; flex-direction:column; gap:16px; max-width:400px; }
  .inp-grp { display:flex; flex-direction:column; gap:6px; }
  .inp-lbl { font-size:14px; font-weight:700; letter-spacing:.2px; color:var(--t2); }
  .inp-wrap { position:relative; }
  .inp-ico  { position:absolute; top:50%; left:14px; transform:translateY(-50%); color:var(--t3); display:flex; }
  .inp-ico-r{ left:auto; right:14px; }
  
  .inp {
    width:100%; font-family:var(--font); font-size:14px; font-weight:500; color:var(--t1);
    background:var(--glass-bg); backdrop-filter:blur(10px);
    border:1.5px solid var(--border); border-radius:var(--r-md);
    padding:12px 16px; outline:none;
    transition:border-color .2s, box-shadow .2s, background .2s;
  }
  .inp.il { padding-left:42px; }
  .inp.ir { padding-right:42px; }
  .inp:focus { border-color:var(--p); background:rgba(255,255,255,.85); box-shadow:0 0 0 4px var(--p-soft); }
  .inp::placeholder { color:var(--t3); font-weight:400; }
  .inp.err { border-color:var(--err); }
  .inp.err:focus { box-shadow:0 0 0 4px var(--err-soft); }
  .inp.ok  { border-color:var(--ok); }
  .inp-hint { font-size:11px; margin-top:4px; color:var(--t3); }
  .inp-hint.err { color:var(--err); }
  .inp-hint.ok  { color:var(--ok); }
  
  .search-bar {
    display:flex; align-items:center; gap:10px;
    background:var(--glass-bg); backdrop-filter:var(--glass-blur);
    border:1.5px solid var(--glass-border);
    border-radius:var(--r-md); padding:10px 16px; width:100%; max-width:320px;
    box-shadow:var(--sh-glass);
    transition:border-color .2s, box-shadow .2s;
  }
  .search-bar:focus-within { border-color:var(--p); box-shadow:0 0 0 4px var(--p-soft),var(--sh-glass); }
  .search-bar input { border:none; outline:none; font-family:var(--font); font-size:14px; font-weight:500; color:var(--t1); background:transparent; flex:1; }
  .search-bar input::placeholder { color:var(--t3); }
  
  /* ══════════════════════════════════════════════════════
     BADGES
  ══════════════════════════════════════════════════════ */
  .badge-wrap { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  .badge {
    display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; padding:5px 12px;
    border-radius:100px; text-transform:uppercase; letter-spacing:.5px;
  }
  .bdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .b-p    { background:var(--p-soft);  color:var(--p); }
  .b-s    { background:var(--s-soft);  color:var(--s-dark); }
  .b-ok   { background:var(--ok-soft); color:var(--ok); }
  .b-err  { background:var(--err-soft);color:var(--err); }
  .b-warn { background:var(--warn-soft);color:#8a5c00; }
  .b-info { background:var(--info-soft);color:#0369a1; }
  .b-gray { background:rgba(160,160,192,.12); color:var(--t2); border:1.5px solid var(--border); }
  .b-glass{ background:var(--glass-bg); backdrop-filter:blur(10px); border:1.5px solid var(--glass-border); color:var(--p); box-shadow:var(--sh-glass); }
  
  /* ══════════════════════════════════════════════════════
     AVATARS
  ══════════════════════════════════════════════════════ */
  .av-row { display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end; }
  .av-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; }
  .av {
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-weight:700; color:#fff; position:relative; flex-shrink:0;
  }
  .av-xs { width:28px; height:28px; font-size:11px; }
  .av-sm { width:36px; height:36px; font-size:13px; }
  .av-md { width:48px; height:48px; font-size:16px; }
  .av-lg { width:64px; height:64px; font-size:22px; }
  .av-xl { width:80px; height:80px; font-size:28px; }
  .av-status { position:absolute; bottom:1px; right:1px; width:12px; height:12px; border-radius:50%; border:2.5px solid #fff; }
  .s-on  { background:var(--ok); }
  .s-away{ background:var(--warn); }
  .s-off { background:var(--t3); }
  .av-lbl{ font-size:11px; color:var(--t3); font-weight:500; }
  
  /* ══════════════════════════════════════════════════════
     ACTION ICONS
  ══════════════════════════════════════════════════════ */
  .act-grid { display:flex; flex-wrap:wrap; gap:24px; }
  .act-item { display:flex; flex-direction:column; align-items:center; gap:8px; }
  .act-btn {
    width:54px; height:54px; border-radius:16px;
    background:var(--glass-bg); backdrop-filter:var(--glass-blur);
    border:1.5px solid var(--glass-border); box-shadow:var(--sh-glass);
    color:var(--p); display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:all .2s; font-size:20px;
  }
  .act-btn:hover { background:var(--p); color:#fff; border-color:var(--p); transform:translateY(-3px); box-shadow:0 10px 28px var(--p-glow); }
  .act-lbl { font-size:11px; font-weight:600; color:var(--t2); }
  
  /* ══════════════════════════════════════════════════════
     TRANSACTION
  ══════════════════════════════════════════════════════ */
  .tx-list { display:flex; flex-direction:column; gap:2px; }
  .tx-item {
    display:flex; align-items:center; gap:14px;
    padding:13px 14px; border-radius:var(--r-md);
    cursor:pointer; transition:background .15s;
  }
  .tx-item:hover { background:var(--p-soft); }
  .tx-info { flex:1; min-width:0; }
  .tx-name { font-size:14px; font-weight:600; margin-bottom:2px; }
  .tx-type { font-size:12px; color:var(--t3); }
  .tx-amt  { font-size:15px; font-weight:700; }
  .tx-amt.pos { color:var(--ok); }
  .tx-amt.neg { color:var(--err); }
  .tx-sec { font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--t3); padding:12px 14px 4px; }
  
  /* ══════════════════════════════════════════════════════
     BAR CHART
  ══════════════════════════════════════════════════════ */
  .bar-chart { display:flex; align-items:flex-end; gap:8px; height:120px; padding:0 4px; }
  .bar-group { display:flex; gap:4px; align-items:flex-end; flex:1; }
  .bar { flex:1; border-radius:6px 6px 0 0; transition:height .7s cubic-bezier(.4,0,.2,1); }
  .bar-p { background:linear-gradient(180deg, var(--p-light), var(--p)); }
  .bar-s { background:linear-gradient(180deg, var(--s-light), var(--s)); opacity:.75; }
  .legend-row { display:flex; gap:14px; justify-content:center; margin-top:14px; }
  .legend-dot { width:8px; height:8px; border-radius:50%; }
  .legend-item{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--t2); }
  
  /* ══════════════════════════════════════════════════════
     TOGGLE / SWITCH
  ══════════════════════════════════════════════════════ */
  .tog-list { display:flex; flex-direction:column; gap:10px; }
  .tog-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-radius:var(--r-md);
    background:var(--glass-bg); backdrop-filter:var(--glass-blur);
    border:1.5px solid var(--glass-border); box-shadow:var(--sh-glass);
    max-width:320px;
  }
  .tog-lbl { font-size:14px; font-weight:500; }
  .toggle { position:relative; width:46px; height:26px; background:var(--border); border-radius:100px; cursor:pointer; transition:background .2s; flex-shrink:0; }
  .toggle.on { background:var(--p); }
  .toggle-k { position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.15); transition:left .2s; }
  .toggle.on .toggle-k { left:23px; }
  
  /* ══════════════════════════════════════════════════════
     NOTIFICATIONS
  ══════════════════════════════════════════════════════ */
  .notif-list { display:flex; flex-direction:column; gap:10px; max-width:360px; }
  .notif {
    display:flex; gap:13px; align-items:flex-start;
    padding:14px 16px;
    background:var(--glass-bg); backdrop-filter:var(--glass-blur);
    border:1.5px solid var(--glass-border);
    border-radius:var(--r-md); box-shadow:var(--sh-glass);
    border-left:4px solid transparent; transition:transform .2s;
  }
  .notif:hover { transform:translateX(4px); }
  .notif.ok   { border-left-color:var(--ok); }
  .notif.err  { border-left-color:var(--err); }
  .notif.p    { border-left-color:var(--p); }
  .notif.warn { border-left-color:var(--warn); }
  .notif.s    { border-left-color:var(--s); }
  .notif-ico  { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:16px; }
  .notif-ttl  { font-size:14px; font-weight:600; margin-bottom:2px; }
  .notif-msg  { font-size:12px; color:var(--t2); }
  .notif-time { font-size:11px; color:var(--t3); margin-top:4px; }
  
  /* ══════════════════════════════════════════════════════
     PROGRESS
  ══════════════════════════════════════════════════════ */
  .prog-list { display:flex; flex-direction:column; gap:18px; max-width:400px; }
  .prog-head { display:flex; justify-content:space-between; margin-bottom:7px; }
  .prog-lbl  { font-size:13px; font-weight:600; }
  .prog-val  { font-size:13px; font-weight:700; }
  .prog-track{ height:8px; background:var(--border); border-radius:100px; overflow:hidden; }
  .prog-fill { height:100%; border-radius:100px; transition:width .9s cubic-bezier(.4,0,.2,1); }
  
  /* ══════════════════════════════════════════════════════
     TABS
  ══════════════════════════════════════════════════════ */
  .tab-bar {
    display:inline-flex; gap:4px; padding:5px;
    background:var(--glass-bg2); backdrop-filter:blur(12px);
    border:1.5px solid var(--glass-border); border-radius:var(--r-md);
    box-shadow:var(--sh-glass);
  }
  .tab-item {
    padding:9px 20px; border-radius:10px; font-size:13px; font-weight:600;
    color:var(--t2); cursor:pointer; transition:all .2s; border:none;
    background:transparent; font-family:var(--font);
  }
  .tab-item.active { background:var(--glass-bg); color:var(--p); box-shadow:0 2px 14px var(--p-soft); border:1px solid var(--glass-border); }
  .tab-item:hover:not(.active) { color:var(--t1); }
  
  /* ══════════════════════════════════════════════════════
     MODAL
  ══════════════════════════════════════════════════════ */
  .modal-demo {
    background:#fff;
    border:1.5px solid rgba(200,202,230,.85);
    border-radius:var(--r-xl);
    box-shadow:0 24px 64px rgba(26,26,62,.22);
    padding:32px; max-width:340px; width:100%;
    color:var(--t1);
  }
  .modal-ttl { font-size:22px; font-weight:800; margin-bottom:6px; color:var(--t1); }
  .modal-sub { font-size:13px; color:var(--t2); margin-bottom:22px; }
  .modal-foot{ display:flex; gap:12px; margin-top:22px; }
  .modal-foot .btn { flex:1; justify-content:center; }
  .modal-demo .tx-name { color:var(--t1); }
  .modal-demo .tx-type { color:var(--t2); }
  .modal-demo .b-ok   { background:rgba(34,201,151,.18); color:#0f766e; }
  .modal-demo .b-err  { background:rgba(255,92,122,.16); color:#c81e4a; }
  .modal-demo .b-warn { background:rgba(255,182,72,.22); color:#92400e; }
  .modal-demo .b-p    { background:rgba(91,91,214,.14); color:var(--p-dark); }
  
  /* ══════════════════════════════════════════════════════
     DROPDOWN
  ══════════════════════════════════════════════════════ */
  .dd {
    background:var(--glass-bg); backdrop-filter:var(--glass-blur);
    border:1.5px solid var(--glass-border); border-radius:var(--r-md);
    box-shadow:0 12px 40px rgba(91,91,214,.14);
    padding:8px; min-width:200px;
  }
  .dd-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 14px; border-radius:var(--r-sm);
    font-size:13.5px; font-weight:500; color:var(--t1);
    cursor:pointer; transition:background .15s;
  }
  .dd-item:hover { background:var(--p-soft); color:var(--p); }
  .dd-item.err { color:var(--err); }
  .dd-item.err:hover { background:var(--err-soft); }
  .dd-div { height:1px; background:var(--border); margin:6px 0; }
  
  /* ══════════════════════════════════════════════════════
     TOOLTIP
  ══════════════════════════════════════════════════════ */
  .tt-wrap { position:relative; display:inline-flex; }
  .tt-wrap .tt {
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    background:var(--t1); color:#fff; font-size:11px; font-weight:500; white-space:nowrap;
    padding:6px 12px; border-radius:8px; pointer-events:none; opacity:0; transition:opacity .2s;
  }
  .tt-wrap .tt::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--t1); }
  .tt-wrap:hover .tt { opacity:1; }
  
  /* ══════════════════════════════════════════════════════
     DIVIDER
  ══════════════════════════════════════════════════════ */
  .divider { height:1px; background:var(--border); margin:6px 0; }
  
  /* ══════════════════════════════════════════════════════
     FADE IN
  ══════════════════════════════════════════════════════ */
  @keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
  .section { animation:fadeUp .55s ease both; }
  .section:nth-child(1){animation-delay:.05s}.section:nth-child(2){animation-delay:.10s}
  .section:nth-child(3){animation-delay:.15s}.section:nth-child(4){animation-delay:.20s}
  .section:nth-child(5){animation-delay:.25s}.section:nth-child(6){animation-delay:.30s}
  .section:nth-child(7){animation-delay:.35s}.section:nth-child(8){animation-delay:.40s}
  .section:nth-child(9){animation-delay:.45s}.section:nth-child(10){animation-delay:.50s}
  .section:nth-child(11){animation-delay:.55s}.section:nth-child(12){animation-delay:.60s}
  .section:nth-child(13){animation-delay:.65s}.section:nth-child(14){animation-delay:.70s}