/* ============================================================
   ORBIS EXPERT — Design System v2
   Mobile-first · Dark Luxury · Dark/Light Mode · USD
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── 1. Dark Mode Tokens (default) ──────────────────────── */
:root {
  color-scheme: dark;

  /* Base backgrounds */
  --bg-base:      #0a0a0a;
  --bg-surface:   #111113;
  --bg-elevated:  #18181c;
  --bg-hover:     #1f1f24;

  /* Charcoal */
  --ch-900: #0a0a0a;
  --ch-800: #111113;
  --ch-700: #1a1a1e;
  --ch-600: #242428;
  --ch-500: #2e2e34;
  --ch-400: #3c3c44;
  --ch-300: #5a5a66;
  --ch-200: #8a8a96;

  /* Sage */
  --sage-900: #1a2618;
  --sage-800: #243320;
  --sage-700: #3a5234;
  --sage-600: #527348;
  --sage-500: #6b9260;
  --sage-400: #84b077;
  --sage-300: #a0c494;
  --sage-200: #bdd9b3;
  --sage-100: #daefd4;

  /* Glass */
  --glass-1:      rgba(255,255,255,0.03);
  --glass-2:      rgba(255,255,255,0.055);
  --glass-3:      rgba(255,255,255,0.085);
  --glass-sage:   rgba(100,168,88,0.10);
  --glass-sage-b: rgba(100,168,88,0.22);
  --glass-b1:     rgba(255,255,255,0.07);
  --glass-b2:     rgba(255,255,255,0.12);

  /* Text */
  --tx-primary:   #f2ede6;
  --tx-secondary: #9a9590;
  --tx-muted:     #5c5854;
  --tx-sage:      var(--sage-400);
  --tx-inverse:   #0a0a0a;

  /* Accents */
  --accent:       var(--sage-400);
  --accent-h:     var(--sage-300);
  --accent-glow:  rgba(132,176,119,0.28);
  --danger:       #d47a6e;
  --warning:      #d4ad6e;
  --info:         #6e9dd4;
  --locked-tint:  rgba(10,10,10,0.7);

  /* Borders */
  --b-subtle:   rgba(255,255,255,0.06);
  --b-default:  rgba(255,255,255,0.10);
  --b-strong:   rgba(255,255,255,0.18);
  --b-sage:     rgba(132,176,119,0.28);

  /* Shadows */
  --sh-sm:  0 2px 8px  rgba(0,0,0,0.40);
  --sh-md:  0 4px 20px rgba(0,0,0,0.55);
  --sh-lg:  0 8px 40px rgba(0,0,0,0.70);
  --sh-xl:  0 16px 64px rgba(0,0,0,0.80);
  --sh-sage: 0 0 28px rgba(132,176,119,0.20);

  /* Radius */
  --r-xs:  4px;   --r-sm:  8px;
  --r-md:  12px;  --r-lg:  16px;
  --r-xl:  22px;  --r-2xl: 30px;
  --r-pill:9999px;

  /* Spacing */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px;--s6:24px;--s8:32px; --s10:40px;
  --s12:48px;--s16:64px;

  /* Type */
  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body:    'DM Sans', system-ui, sans-serif;

  /* Layout */
  --sidebar-w: 260px;
  --header-h:  60px;
  --bottom-nav-h: 64px;

  /* Transitions */
  --ease: cubic-bezier(0.25,0.46,0.45,0.94);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --dur-f: 140ms; --dur-b: 240ms; --dur-s: 380ms;
}

/* ── 2. Light Mode Tokens ───────────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --bg-base:    #f0ede8;
  --bg-surface: #f8f6f2;
  --bg-elevated:#ffffff;
  --bg-hover:   #eeebe6;

  --ch-900: #f0ede8;
  --ch-800: #e8e4de;
  --ch-700: #d8d3cc;
  --ch-600: #b8b3ac;
  --ch-500: #8a8580;
  --ch-400: #6a6560;
  --ch-300: #4a4540;
  --ch-200: #2a2520;

  --glass-1:    rgba(0,0,0,0.03);
  --glass-2:    rgba(0,0,0,0.05);
  --glass-3:    rgba(0,0,0,0.08);
  --glass-sage: rgba(80,140,68,0.08);
  --glass-sage-b: rgba(80,140,68,0.18);
  --glass-b1:   rgba(0,0,0,0.08);
  --glass-b2:   rgba(0,0,0,0.12);

  --tx-primary:   #1a1814;
  --tx-secondary: #4a4844;
  --tx-muted:     #8a8580;
  --tx-inverse:   #f2ede6;
  --locked-tint:  rgba(240,237,232,0.75);

  --b-subtle:  rgba(0,0,0,0.07);
  --b-default: rgba(0,0,0,0.12);
  --b-strong:  rgba(0,0,0,0.20);
  --b-sage:    rgba(80,140,68,0.28);

  --sh-sm:  0 2px 8px  rgba(0,0,0,0.08);
  --sh-md:  0 4px 20px rgba(0,0,0,0.12);
  --sh-lg:  0 8px 40px rgba(0,0,0,0.16);
  --sh-xl:  0 16px 64px rgba(0,0,0,0.20);
  --sh-sage: 0 0 28px rgba(80,140,68,0.15);
}

/* ── 3. Reset ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;height:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--tx-primary);
  background:var(--bg-base);
  min-height:100%;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background var(--dur-b) var(--ease), color var(--dur-b) var(--ease);
}
img,svg,video{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none;transition:color var(--dur-f) var(--ease)}
a:hover{color:var(--accent-h)}
button{cursor:pointer;font-family:inherit;border:none;background:none}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
ul,ol{list-style:none}

/* ── 4. Typography ──────────────────────────────────────── */
.t-display{font-family:var(--ff-display);font-size:clamp(2rem,5vw,3.5rem);font-weight:600;line-height:1.1;letter-spacing:-0.02em}
.t-h1{font-family:var(--ff-display);font-size:clamp(1.5rem,3vw,2.25rem);font-weight:600;line-height:1.2;letter-spacing:-0.015em}
.t-h2{font-family:var(--ff-display);font-size:clamp(1.1rem,2vw,1.5rem);font-weight:500;line-height:1.25}
.t-h3{font-family:var(--ff-display);font-size:1.1rem;font-weight:500;line-height:1.3}
.t-label{font-size:0.7rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-muted)}
.t-sm{font-size:0.875rem}
.t-xs{font-size:0.75rem}

/* ── 5. Glass ───────────────────────────────────────────── */
.glass{
  background:var(--glass-1);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-b1);
  border-radius:var(--r-lg);
}
.glass-md{
  background:var(--glass-2);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid var(--glass-b2);
  border-radius:var(--r-lg);
}
.glass-sage{
  background:var(--glass-sage);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-sage-b);
  border-radius:var(--r-lg);
}

/* ── 6. Buttons ─────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 22px;font-family:var(--ff-body);font-size:0.875rem;font-weight:500;
  letter-spacing:0.02em;border-radius:var(--r-md);border:1px solid transparent;
  transition:all var(--dur-b) var(--ease);white-space:nowrap;
  min-height:44px;position:relative;overflow:hidden;cursor:pointer;
}
.btn-primary{
  background:linear-gradient(135deg,var(--sage-600),var(--sage-400));
  color:#fff;font-weight:600;
  box-shadow:0 4px 16px rgba(100,160,88,0.30);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--sage-500),var(--sage-300));
  box-shadow:0 6px 24px rgba(100,160,88,0.45);
  transform:translateY(-1px);
}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{
  background:var(--glass-1);border-color:var(--glass-b2);color:var(--tx-secondary);
}
.btn-ghost:hover{background:var(--glass-2);color:var(--tx-primary)}
.btn-danger{
  background:rgba(212,122,110,0.15);border-color:rgba(212,122,110,0.30);
  color:var(--danger);
}
.btn-danger:hover{background:rgba(212,122,110,0.25)}
.btn-sm{padding:8px 14px;font-size:0.8rem;min-height:36px;border-radius:var(--r-sm)}
.btn-full{width:100%}
.btn-icon{width:36px;height:36px;padding:0;border-radius:var(--r-sm);border:1px solid var(--b-subtle);background:var(--glass-1);color:var(--tx-secondary);display:inline-flex;align-items:center;justify-content:center;transition:all var(--dur-f) var(--ease)}
.btn-icon:hover{background:var(--glass-2);color:var(--tx-primary)}

/* ── 7. Form ────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:0.85rem;font-weight:500;color:var(--tx-secondary);letter-spacing:0.01em}
.form-input{
  width:100%;padding:13px 16px;
  background:var(--glass-1);border:1px solid var(--b-default);
  border-radius:var(--r-md);color:var(--tx-primary);
  font-size:1rem;outline:none;transition:all var(--dur-b) var(--ease);
  min-height:50px;-webkit-appearance:none;
}
.form-input::placeholder{color:var(--tx-muted)}
.form-input:focus{border-color:var(--accent);background:var(--glass-sage);box-shadow:0 0 0 3px var(--accent-glow)}
.input-wrap{position:relative}
.input-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--tx-muted);pointer-events:none}

/* ── 8. Badges ──────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:var(--r-pill);font-size:0.68rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase}
.badge-active{background:rgba(100,168,88,0.18);color:var(--sage-300);border:1px solid rgba(100,168,88,0.30)}
.badge-standby{background:rgba(212,173,110,0.18);color:var(--warning);border:1px solid rgba(212,173,110,0.30)}
.badge-locked{background:rgba(90,90,102,0.22);color:var(--ch-200);border:1px solid rgba(90,90,102,0.35)}
.badge-live{background:var(--sage-700);color:var(--sage-200);border:1px solid var(--sage-600);animation:pulseBadge 2s ease-in-out infinite}
@keyframes pulseBadge{0%,100%{box-shadow:0 0 0 0 rgba(100,168,88,0.4)}50%{box-shadow:0 0 0 4px rgba(100,168,88,0)}}

/* ── 9. Cards ───────────────────────────────────────────── */
.card{
  background:var(--glass-1);border:1px solid var(--b-subtle);
  border-radius:var(--r-lg);padding:var(--s5) var(--s6);
  transition:all var(--dur-b) var(--ease);
}
.card:hover{border-color:var(--b-default);box-shadow:var(--sh-md);transform:translateY(-1px)}
.card-title{font-family:var(--ff-display);font-size:1.05rem;font-weight:500;color:var(--tx-primary);margin-bottom:var(--s4)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4);gap:var(--s3)}

/* ── 10. Stat Card ──────────────────────────────────────── */
.stat-card{
  background:var(--glass-1);border:1px solid var(--b-subtle);
  border-radius:var(--r-lg);padding:var(--s5) var(--s6);
  display:flex;flex-direction:column;gap:var(--s2);
  transition:all var(--dur-b) var(--ease);
}
.stat-card:hover{border-color:var(--b-sage);box-shadow:var(--sh-sage);transform:translateY(-2px)}
.stat-value{font-family:var(--ff-display);font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;color:var(--tx-primary);line-height:1}
.stat-delta{font-size:0.8rem;font-weight:500;display:flex;align-items:center;gap:3px}
.stat-delta.up{color:var(--sage-400)} .stat-delta.down{color:var(--danger)}

/* ── 11. Locked card overlay ────────────────────────────── */
.agent-card{position:relative;overflow:hidden;border-radius:var(--r-lg)}
.agent-card.locked .agent-card-inner{filter:blur(4px);pointer-events:none;user-select:none}
.lock-overlay{
  position:absolute;inset:0;
  background:var(--locked-tint);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  border-radius:var(--r-lg);z-index:10;
}
.lock-icon{width:42px;height:42px;border-radius:50%;background:var(--glass-2);border:1px solid var(--b-default);display:flex;align-items:center;justify-content:center;color:var(--tx-muted)}

/* ── 12. Agent sidebar items ────────────────────────────── */
.agent-item{
  display:flex;align-items:center;gap:var(--s3);
  padding:10px var(--s3);border-radius:var(--r-md);
  cursor:pointer;transition:all var(--dur-f) var(--ease);
  position:relative;border:1px solid transparent;
  min-height:52px;
}
.agent-item:hover{background:var(--glass-2);border-color:var(--b-subtle)}
.agent-item.selected{background:var(--glass-sage);border-color:var(--glass-sage-b)}
.agent-num{font-size:0.68rem;font-weight:700;color:var(--tx-muted);letter-spacing:0.06em;min-width:20px}
.agent-name{font-size:0.85rem;font-weight:500;color:var(--tx-primary);line-height:1.3;flex:1}
.agent-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.agent-dot.active{background:var(--sage-400);box-shadow:0 0 6px var(--sage-400)}
.agent-dot.standby{background:var(--warning)}
.agent-dot.locked{background:var(--ch-300)}

/* ── 13. Revenue Chart ──────────────────────────────────── */
.chart-wrap{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:var(--s4)}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%}
.chart-track{flex:1;width:100%;background:var(--glass-1);border-radius:var(--r-xs) var(--r-xs) 0 0;position:relative;overflow:hidden}
.chart-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(180deg,var(--sage-400),var(--sage-700));border-radius:var(--r-xs) var(--r-xs) 0 0;transition:height 1s var(--ease) 0.3s;opacity:0.75}
.chart-fill.today{background:linear-gradient(180deg,var(--sage-300),var(--sage-500));opacity:1;box-shadow:0 0 10px rgba(132,176,119,0.35)}
.chart-lbl{font-size:0.65rem;color:var(--tx-muted);letter-spacing:0.04em}

/* ── 14. Action card (approve/dismiss) ──────────────────── */
.action-card{
  background:var(--glass-1);border:1px solid var(--b-subtle);
  border-radius:var(--r-lg);padding:var(--s4) var(--s5);
  display:flex;flex-direction:column;gap:var(--s3);
  transition:all var(--dur-b) var(--ease);
}
.action-card:hover{border-color:var(--b-default)}
.action-agent{font-size:0.7rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--tx-sage)}
.action-title{font-size:0.9rem;font-weight:500;color:var(--tx-primary);line-height:1.35}
.action-desc{font-size:0.8rem;color:var(--tx-secondary);line-height:1.45}
.action-btns{display:flex;gap:var(--s2)}

/* ── 15. Vault ──────────────────────────────────────────── */
.vault-item{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-radius:var(--r-md);
  border:1px solid var(--b-subtle);background:var(--glass-1);
  transition:all var(--dur-f) var(--ease);
}
.vault-item:hover{border-color:var(--b-default);background:var(--glass-2)}
.vault-icon{width:36px;height:36px;border-radius:var(--r-sm);background:var(--glass-sage);border:1px solid var(--glass-sage-b);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sage-300)}
.vault-info{flex:1;min-width:0}
.vault-name{font-size:0.85rem;font-weight:500;color:var(--tx-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vault-meta{font-size:0.72rem;color:var(--tx-muted)}
.vault-actions{display:flex;gap:var(--s2);flex-shrink:0}

/* ── 16. Theme toggle ───────────────────────────────────── */
.theme-toggle{
  width:44px;height:24px;border-radius:var(--r-pill);
  background:var(--glass-2);border:1px solid var(--b-default);
  position:relative;cursor:pointer;transition:all var(--dur-b) var(--ease);
  flex-shrink:0;
}
.theme-toggle-thumb{
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;border-radius:50%;
  background:var(--tx-muted);
  transition:all var(--dur-b) var(--spring);
  display:flex;align-items:center;justify-content:center;
}
[data-theme="light"] .theme-toggle-thumb{
  left:calc(100% - 21px);
  background:var(--sage-500);
}
.theme-toggle-icon{font-size:10px;line-height:1}

/* ── 17. Top header ─────────────────────────────────────── */
.topbar{
  height:var(--header-h);
  background:rgba(10,10,10,0.88);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--b-subtle);
  display:flex;align-items:center;padding:0 var(--s6);gap:var(--s4);
  position:sticky;top:0;z-index:200;flex-shrink:0;
  transition:background var(--dur-b) var(--ease);
}
[data-theme="light"] .topbar{background:rgba(248,246,242,0.92)}

.topbar-logo{display:flex;align-items:center;gap:var(--s2);flex-shrink:0;text-decoration:none}
.topbar-logo img{height:32px;width:auto}

.topbar-center{flex:1;display:flex;align-items:center;justify-content:center}
.restaurant-name{font-family:var(--ff-display);font-size:1rem;font-weight:500;letter-spacing:0.04em;color:var(--tx-secondary)}

.topbar-right{display:flex;align-items:center;gap:var(--s3);margin-left:auto}

.notif-btn{position:relative}
.notif-dot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--sage-400);border:1.5px solid var(--bg-base);box-shadow:0 0 5px var(--sage-400)}

.avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--sage-700),var(--sage-500));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-size:0.8rem;font-weight:600;color:#fff;
  border:1.5px solid var(--b-sage);flex-shrink:0;cursor:pointer;
}
.avatar-lg{width:44px;height:44px;font-size:1rem}

/* ── 18. App shell / sidebar layout ────────────────────── */
.app-shell{display:flex;height:100vh;height:100dvh;overflow:hidden}
.main-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.page-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--s6)}
.page-content-inner{max-width:1400px;margin:0 auto}

.sidebar{
  width:var(--sidebar-w);height:100%;
  background:var(--bg-surface);border-right:1px solid var(--b-subtle);
  display:flex;flex-direction:column;flex-shrink:0;
  overflow-y:auto;overflow-x:hidden;z-index:300;
  transition:transform var(--dur-s) var(--ease), background var(--dur-b) var(--ease);
}
.sidebar-head{padding:var(--s4) var(--s4) var(--s3);border-bottom:1px solid var(--b-subtle)}
.sidebar-title{font-size:0.68rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--tx-muted);padding:var(--s3) var(--s4) var(--s2)}
.sidebar-body{flex:1;padding:var(--s2);display:flex;flex-direction:column;gap:2px}
.sidebar-footer{padding:var(--s4);border-top:1px solid var(--b-subtle)}

/* ── 19. 3-col dashboard grid ───────────────────────────── */
.dash-grid{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:auto;
  gap:var(--s5);
}
.stats-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:var(--s4)}

/* ── 20. Overlay (mobile sidebar) ──────────────────────── */
.sb-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,0.65);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:280;opacity:0;transition:opacity var(--dur-b) var(--ease);pointer-events:none;
}
.sb-overlay.active{opacity:1;pointer-events:auto}

/* ── 21. Bottom nav (mobile) ────────────────────────────── */
.bottom-nav{
  display:none;
  height:var(--bottom-nav-h);
  background:var(--bg-surface);border-top:1px solid var(--b-subtle);
  flex-shrink:0;align-items:center;justify-content:space-around;
  transition:background var(--dur-b) var(--ease);
  position:sticky;bottom:0;z-index:200;
  padding-bottom:env(safe-area-inset-bottom);
}
.bnav-item{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 12px;border-radius:var(--r-sm);cursor:pointer;transition:all var(--dur-f) var(--ease);
  color:var(--tx-muted);font-size:0.6rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
  flex:1;
}
.bnav-item.active{color:var(--sage-400)}
.bnav-item svg{transition:transform var(--dur-f) var(--spring)}
.bnav-item.active svg{transform:scale(1.1)}

/* ── 22. Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ch-400);border-radius:var(--r-pill)}
::-webkit-scrollbar-thumb:hover{background:var(--ch-300)}

/* ── 23. Animations ─────────────────────────────────────── */
.page-enter{animation:pageIn 0.5s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn 0.4s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── 24. Toast ──────────────────────────────────────────── */
.toast-wrap{position:fixed;top:var(--s4);right:var(--s4);z-index:9999;display:flex;flex-direction:column;gap:var(--s2);pointer-events:none}
.toast{padding:10px 18px;border-radius:var(--r-md);font-size:0.85rem;font-weight:500;pointer-events:auto;animation:toastIn 0.3s var(--spring);backdrop-filter:blur(20px);max-width:300px}
.toast-success{background:rgba(58,82,52,0.9);border:1px solid var(--glass-sage-b);color:var(--sage-100)}
.toast-error{background:rgba(130,50,44,0.9);border:1px solid rgba(212,122,110,0.35);color:#f5ccc8}
@keyframes toastIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}

/* ── 25. Spinner ─────────────────────────────────────────── */
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,0.15);border-top-color:currentColor;border-radius:50%;animation:spin 0.65s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 26. Utilities ──────────────────────────────────────── */
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}
.justify-between{justify-content:space-between}.gap-2{gap:var(--s2)}.gap-3{gap:var(--s3)}
.gap-4{gap:var(--s4)}.w-full{width:100%}.text-center{text-align:center}
.text-sage{color:var(--sage-400)}.text-muted{color:var(--tx-muted)}.text-secondary{color:var(--tx-secondary)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.divider{height:1px;background:var(--b-subtle);margin:var(--s4) 0}

/* ── 27. RESPONSIVE ─────────────────────────────────────── */

/* Tablet + ────────────────────────────────────────────── */
@media(min-width:768px){
  .dash-grid{grid-template-columns:1fr 1fr}
  .dash-grid>.col-full{grid-column:1/-1}
}

/* Desktop + ────────────────────────────────────────────── */
@media(min-width:1100px){
  .dash-grid{grid-template-columns:1fr 1fr 320px}
  .dash-grid>.col-full{grid-column:1/-1}
  .dash-grid>.col-wide{grid-column:1/3}
  .sidebar{position:relative;transform:none !important}
  .sb-overlay{display:none !important}
  .bottom-nav{display:none}
  .menu-btn{display:none !important}
}

/* Mobile ───────────────────────────────────────────────── */
@media(max-width:1099px){
  .menu-btn{display:inline-flex !important}
  .sidebar{position:fixed;top:0;left:0;height:100%;transform:translateX(-100%);box-shadow:var(--sh-xl)}
  .sidebar.open{transform:translateX(0)}
  .sb-overlay{display:block}
  .bottom-nav{display:flex}
  .page-content{padding:var(--s4)}
  .top-center{display:none}
}

/* Small mobile ─────────────────────────────────────────── */
@media(max-width:479px){
  :root{--header-h:54px}
  .topbar{padding:0 var(--s4)}
  .stats-row{grid-template-columns:1fr 1fr}
  .vault-actions{flex-direction:column}
}

/* Safe areas ───────────────────────────────────────────── */
@supports(padding:max(0px)){
  .topbar{
    padding-left:max(var(--s6),env(safe-area-inset-left));
    padding-right:max(var(--s6),env(safe-area-inset-right));
  }
  .page-content{padding-bottom:max(var(--s10),calc(var(--bottom-nav-h) + env(safe-area-inset-bottom)))}
  .sidebar{padding-bottom:max(var(--s4),env(safe-area-inset-bottom))}
}