/* ============================================================================
   BARAMO — design system. Official, premium, monochrome-dark.
   Tokens + every component class. Authored centrally; pages only consume.
   ========================================================================== */

:root {
  --bg:#000000; --bg-1:#070809; --bg-2:#0d0f12; --bg-3:#131619; --bg-4:#1a1e23;
  --line:#22262e; --line-soft:#161a1f;
  --text:#f5f7fa; --text-2:#a7b0bd; --text-3:#6a7280;
  --white:#ffffff;
  --accent:#dfe7ef; --accent-2:#9fb0c2; --accent-ink:#05070a;
  --silver-glow:rgba(223,231,239,.14);
  --ok:#5fb37a; --warn:#d8a657; --bad:#e5667a; --info:#7fa6d6;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px; --pill:999px;
  --shadow:0 10px 40px rgba(0,0,0,.55); --shadow-sm:0 4px 18px rgba(0,0,0,.45);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.45s;
  --maxw:1120px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --display:'Manrope',var(--sans);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text);
  font:15px/1.6 var(--sans);
  min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection { background:rgba(223,231,239,.22); }
a { color:var(--text); text-decoration:none; transition:color .15s; }
a:hover { color:var(--white); }
h1,h2,h3,h4 { font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.12; margin:0; }
h1 { font-size:clamp(34px,6vw,64px); }
h2 { font-size:clamp(24px,3.4vw,38px); }
h3 { font-size:19px; font-weight:700; }
p { margin:0 0 0; }
img { max-width:100%; display:block; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--bg-4); border-radius:10px; border:2px solid var(--bg); }
::-webkit-scrollbar-track { background:transparent; }

/* layout helpers */
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.muted { color:var(--text-2); }
.faint { color:var(--text-3); }
.small { font-size:13px; }
.tiny { font-size:11.5px; }
.mono { font-family:var(--mono); }
.center { text-align:center; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.spread { display:flex; justify-content:space-between; align-items:center; gap:14px; }
.col { display:flex; flex-direction:column; }
.grid { display:grid; gap:16px; }
.wrap { display:flex; gap:16px; flex-wrap:wrap; }
.spacer { flex:1 1 auto; }
.hidden { display:none !important; }
.nowrap { white-space:nowrap; }

/* wordmark / logo */
.wordmark { font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.34em; color:var(--white); }
.logo { display:inline-flex; align-items:center; gap:12px; color:var(--white); }
.logo svg, .logo img { height:30px; width:auto; display:block; }
.logo .wordmark { font-size:18px; }

/* buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-size:14px; font-weight:600; line-height:1; cursor:pointer;
  padding:11px 18px; border-radius:var(--pill); border:1px solid transparent;
  background:var(--white); color:var(--accent-ink);
  transition:transform .15s var(--ease), background .2s, box-shadow .25s, border-color .2s, opacity .2s;
  white-space:nowrap; user-select:none;
}
.btn:hover { background:#e9eef4; transform:translateY(-1px); box-shadow:0 6px 22px var(--silver-glow); }
.btn:active { transform:translateY(0); }
.btn .ic, .btn svg { width:17px; height:17px; }
.btn.ghost { background:transparent; color:var(--text); border-color:var(--line); }
.btn.ghost:hover { background:var(--bg-3); border-color:#323843; color:var(--white); box-shadow:none; }
.btn.subtle { background:var(--bg-3); color:var(--text); border-color:var(--line); }
.btn.subtle:hover { background:var(--bg-4); color:var(--white); box-shadow:none; }
.btn.danger { background:transparent; color:var(--bad); border-color:rgba(229,102,122,.32); }
.btn.danger:hover { background:rgba(229,102,122,.10); color:#ff8497; box-shadow:none; }
.btn.sm { padding:7px 12px; font-size:13px; }
.btn.lg { padding:14px 26px; font-size:15px; }
.btn.block { width:100%; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn.icon { padding:9px; border-radius:10px; }

/* surfaces */
.card {
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:22px;
}
.panel { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg); }
.card.glass { background:rgba(13,15,18,.72); backdrop-filter:blur(14px); }
.hover-lift { transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.hover-lift:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#2c333d; }
.divider { height:1px; background:var(--line); margin:18px 0; border:0; }

/* stat tile */
.tile { background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; display:flex; flex-direction:column; gap:6px; position:relative; overflow:hidden; }
.tile .tile-h { display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:13px; font-weight:500; }
.tile .n { font-family:var(--display); font-size:30px; font-weight:800; letter-spacing:-.02em; }
.tile .delta { font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:3px; }
.tile .delta.up { color:var(--ok); } .tile .delta.down { color:var(--bad); }
.tile .spark { position:absolute; right:0; bottom:0; left:0; height:34px; opacity:.7; }

/* emoji chip — the "2D professional emoji" accent */
.emoji-chip { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:11px; background:radial-gradient(120% 120% at 30% 20%,var(--bg-4),var(--bg-1)); border:1px solid var(--line); font-size:18px; line-height:1; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); flex:none; }
.emoji-chip.sm { width:26px; height:26px; font-size:14px; border-radius:9px; }
.emoji-chip.lg { width:48px; height:48px; font-size:24px; border-radius:14px; }
.section-h { display:flex; align-items:center; gap:12px; margin:0 0 18px; }
.section-h h2,.section-h h3 { margin:0; }

/* fields */
label { display:block; font-size:13px; color:var(--text-2); margin:0 0 6px; font-weight:500; }
.field { margin-bottom:14px; }
.input,.select,.textarea,input[type=text],input[type=number],input[type=email],input[type=password],select,textarea {
  width:100%; background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:11px 13px; font:14px var(--sans); transition:border-color .2s, box-shadow .2s;
}
.input:focus,select:focus,textarea:focus,input:focus { outline:none; border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(159,176,194,.12); }
textarea { resize:vertical; min-height:90px; line-height:1.5; }
.input::placeholder,textarea::placeholder { color:var(--text-3); }
.input-wrap { position:relative; } .input-wrap .ic-left { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-3); }
.input-wrap .input { padding-left:38px; }

/* badges & chips */
.badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:var(--pill); font-size:12px; font-weight:600; line-height:1.5; border:1px solid transparent; }
.badge.ok { background:rgba(95,179,122,.12); color:#7fd49a; border-color:rgba(95,179,122,.25); }
.badge.warn { background:rgba(216,166,87,.12); color:#e8c07a; border-color:rgba(216,166,87,.25); }
.badge.bad { background:rgba(229,102,122,.12); color:#f08597; border-color:rgba(229,102,122,.25); }
.badge.info { background:rgba(127,166,214,.12); color:#9dc0ea; border-color:rgba(127,166,214,.25); }
.badge.neutral { background:var(--bg-3); color:var(--text-2); border-color:var(--line); }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--pill); background:var(--bg-2); border:1px solid var(--line); font-size:13px; color:var(--text-2); }
.dot { width:7px; height:7px; border-radius:50%; background:var(--text-3); flex:none; }
.dot.ok { background:var(--ok); box-shadow:0 0 8px rgba(95,179,122,.6); } .dot.bad { background:var(--bad); } .dot.warn { background:var(--warn); }

/* kv rows, progress */
.kv { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:3px 0; }
.kv .k { color:var(--text-2); }
.progress { height:7px; background:var(--bg-3); border-radius:var(--pill); overflow:hidden; }
.progress > i { display:block; height:100%; background:linear-gradient(90deg,var(--accent-2),var(--accent)); border-radius:var(--pill); transition:width .8s var(--ease); }
.progress.warn > i { background:linear-gradient(90deg,#caa15f,var(--warn)); }
.progress.bad > i { background:linear-gradient(90deg,#c95a6e,var(--bad)); }

/* tabs / nav */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:22px; overflow-x:auto; }
.tab { padding:11px 16px; cursor:pointer; color:var(--text-2); font-size:14px; font-weight:600; border-bottom:2px solid transparent; white-space:nowrap; transition:color .2s,border-color .2s; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--white); border-bottom-color:var(--accent); }
.tab .ic { width:17px; height:17px; vertical-align:-3px; margin-right:6px; }

.nav { display:flex; align-items:center; gap:8px; }
.nav a, .navlink { display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px; color:var(--text-2); font-weight:600; font-size:14px; cursor:pointer; transition:background .2s,color .2s; }
.nav a:hover,.navlink:hover { color:var(--white); background:var(--bg-2); }
.navlink.active { color:var(--white); background:var(--bg-3); }
.navlink .ic { width:18px; height:18px; }

/* topbar */
.topbar { position:sticky; top:0; z-index:40; background:rgba(0,0,0,.6); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); }
.topbar .inner { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px; }

/* table */
.table-wrap { border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
table { width:100%; border-collapse:collapse; font-size:13.5px; }
th,td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-soft); }
thead th { color:var(--text-2); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; background:var(--bg-1); position:sticky; top:0; }
tbody tr { transition:background .15s; }
tbody tr:hover td { background:var(--bg-2); }
tbody tr:last-child td { border-bottom:none; }
td.actions { text-align:right; white-space:nowrap; }

/* modal */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.66); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:18px; z-index:80; animation:fadeIn .2s var(--ease); }
.modal { background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); border:1px solid var(--line); border-radius:var(--r-xl); padding:26px; width:100%; max-width:460px; box-shadow:var(--shadow); animation:popIn .26s var(--ease); max-height:90vh; overflow:auto; }
.modal.wide { max-width:720px; }
.modal h3 { margin:0 0 6px; }
.drawer { position:fixed; top:0; right:0; height:100%; width:min(520px,100%); background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); border-left:1px solid var(--line); z-index:80; box-shadow:var(--shadow); animation:slideIn .3s var(--ease); overflow:auto; padding:24px; }

/* toast */
.toast-wrap { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast { background:var(--bg-3); border:1px solid var(--line); color:var(--text); padding:12px 18px; border-radius:12px; font-size:14px; box-shadow:var(--shadow); animation:popIn .26s var(--ease); display:flex; align-items:center; gap:9px; }
.toast.ok { border-color:rgba(95,179,122,.4); } .toast.bad { border-color:rgba(229,102,122,.4); }

/* qr */
.qr { background:#fff; padding:12px; border-radius:14px; display:inline-block; line-height:0; }

/* footer */
.footer { border-top:1px solid var(--line-soft); margin-top:80px; padding:48px 0 40px; color:var(--text-2); }
.footer a { color:var(--text-2); } .footer a:hover { color:var(--white); }

/* fog */
.fog-host { position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.fog-host canvas { position:absolute; inset:0; width:100%; height:100%; }
.fog-dots { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:5px 5px; mask-image:radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%); -webkit-mask-image:radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 78%); opacity:.6; }

/* skeleton */
.skeleton { background:linear-gradient(90deg,var(--bg-2),var(--bg-3),var(--bg-2)); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:8px; }

/* reveal-on-scroll */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* hero / landing helpers */
.hero { position:relative; padding:120px 0 90px; text-align:center; }
.hero-inner { position:relative; z-index:2; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--pill); border:1px solid var(--line); background:rgba(13,15,18,.6); color:var(--text-2); font-size:13px; font-weight:600; margin-bottom:24px; }
.lead { font-size:clamp(16px,2vw,19px); color:var(--text-2); max-width:620px; margin:20px auto 0; }
.feature-ic { width:44px; height:44px; border-radius:13px; background:radial-gradient(120% 120% at 30% 20%,var(--bg-4),var(--bg-1)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--accent); margin-bottom:14px; }
.feature-ic svg { width:22px; height:22px; }
.price { font-family:var(--display); font-size:40px; font-weight:800; letter-spacing:-.02em; }
.price small { font-size:14px; color:var(--text-2); font-weight:500; }
.plan.featured { border-color:var(--accent-2); box-shadow:0 0 0 1px var(--accent-2),0 14px 50px rgba(0,0,0,.5); }
.accordion-item { border-bottom:1px solid var(--line); }
.accordion-q { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 0; cursor:pointer; font-weight:600; }
.accordion-a { overflow:hidden; max-height:0; transition:max-height .35s var(--ease); color:var(--text-2); }
.accordion-item.open .accordion-a { max-height:240px; }
.accordion-item.open .accordion-q .ic { transform:rotate(180deg); }
.accordion-q .ic { transition:transform .3s; }

/* doc (legal) */
.doc { max-width:780px; margin:0 auto; padding:40px 0 80px; }
.doc h1 { font-size:34px; margin-bottom:8px; } .doc h2 { font-size:22px; margin:34px 0 12px; }
.doc p,.doc li { color:var(--text-2); line-height:1.75; margin:0 0 12px; }
.doc .placeholder-note { background:rgba(216,166,87,.08); border:1px solid rgba(216,166,87,.3); color:#e8c07a; padding:12px 16px; border-radius:12px; margin-bottom:28px; font-size:14px; }
.doc mark { background:rgba(216,166,87,.18); color:#f0d49a; padding:0 4px; border-radius:4px; }

/* anims */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes popIn { from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none} }
@keyframes slideIn { from{transform:translateX(40px); opacity:.4} to{transform:none; opacity:1} }
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.floaty { animation:floaty 6s ease-in-out infinite; }

/* responsive */
@media (max-width:780px){
  .hero { padding:90px 0 64px; }
  .hide-mobile { display:none !important; }
  .modal { padding:20px; border-radius:var(--r-lg); }
  .drawer { width:100%; }
  th,td { padding:10px; }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}

/* ---- admin device-control / config-viewer (append-only) ---- */
.tab-pane { animation:fadeIn .2s var(--ease); }
.conf-link { width:100%; font-size:12.5px; background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; color:var(--text); }
.cfg-modal .tabs { margin-bottom:16px; }
.dev-info { background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; }
.dev-info .kv { padding:4px 0; }
.dev-ctl .input[type=date]::-webkit-calendar-picker-indicator { filter:invert(.75); }