/* ══════════════════════════════════════════════════════════════
   TECTOBOX — monochrome premium · AI-powered unified inbox
   Ink-black & white · gradient-border cards · glow micro-interactions
   ══════════════════════════════════════════════════════════════ */
:root{
  --accent:#18181b; --accent2:#3f3f46; --accent3:#71717a;
  --accent-rgb:24,24,27; --on-accent:#fafafa;
  --accent-grad:linear-gradient(135deg,#3f3f46,#09090b);
  --aurora-grad:linear-gradient(120deg,#e4e4e7,#a1a1aa,#52525b);
  --green:#16a34a; --red:#dc2626; --amber:#d97706; --gray:#64748b;
  --r-lg:18px; --r-md:13px; --r-pill:999px;
  /* Apple: platform system font first — optical sizing + tracking tables built in */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text",ui-sans-serif,system-ui,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,"Noto Sans Bengali",sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display",ui-sans-serif,system-ui,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  /* Apple spring-like easing: critically-damped feel, no overshoot */
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-spring:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.22,.9,.28,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  /* Translucent materials (Apple: chrome floats, content scrolls under) */
  --material-bar:rgba(255,255,255,.62);
  --material-bar-dark:rgba(13,17,26,.62);
  --material-edge:rgba(255,255,255,.5);
}

/* ── Global Defensive Image Reset ── */
img {
  max-width: 100%;
}
.sidebar-brand-icon,
.sidebar-logo-img {
  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  object-fit: cover !important;
  border-radius: 9px;
  flex-shrink: 0;
}
.login-card .brand-pill {
  max-width: 140px !important;
  max-height: 64px !important;
  height: 64px !important;
  width: auto !important;
  object-fit: contain !important;
}
.preloader-logo {
  max-width: 92px !important;
  max-height: 92px !important;
}

/* ── :root fallbacks — if data-theme fails to apply, UI still renders (dark defaults) ── */
:root{
  --bg:#070a11;
  --card:rgba(17,22,32,.72);
  --card-solid:#111622;
  --card2:rgba(24,30,43,.6);
  --ink:#f2f6fd;
  --body:#aebdce;
  --muted:#64748f;
  --line:rgba(148,163,184,.14);
  --line-hi:rgba(255,255,255,.14);
  --input-bg:rgba(10,14,22,.7);
  --input-border:rgba(148,163,184,.22);
  --hover:rgba(148,163,184,.07);
  --accent:#f4f4f5; --accent2:#d4d4d8; --accent3:#a1a1aa;
  --accent-rgb:244,244,245; --on-accent:#09090b;
  --accent-grad:linear-gradient(135deg,#fafafa,#d4d4d8);
  --active:rgba(var(--accent-rgb),.12);
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --card-border:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 40%,rgba(255,255,255,.09));
  --top-hi:inset 0 1px 0 rgba(255,255,255,.09);
  --orb1:#3f3f46; --orb2:#52525b; --orb3:#27272a; --orb-op:.5;
  --glow:0 0 0 1px rgba(var(--accent-rgb),.3),0 0 22px rgba(var(--accent-rgb),.22);
  --txt-grad:linear-gradient(100deg,#fff 20%,#e4e4e7 60%,#a1a1aa 95%);
  color-scheme:dark;
}

/* ─────────────── DARK · deep AI-lab night sky ─────────────── */
[data-theme="dark"]{
  --bg:#070a11;
  --card:rgba(17,22,32,.72);
  --card-solid:#111622;
  --card2:rgba(24,30,43,.6);
  --ink:#f2f6fd;
  --body:#aebdce;
  --muted:#64748f;
  --line:rgba(148,163,184,.14);
  --line-hi:rgba(255,255,255,.14);
  --input-bg:rgba(10,14,22,.7);
  --input-border:rgba(148,163,184,.22);
  --hover:rgba(148,163,184,.07);
  --accent:#f4f4f5; --accent2:#d4d4d8; --accent3:#a1a1aa;
  --accent-rgb:244,244,245; --on-accent:#09090b;
  --accent-grad:linear-gradient(135deg,#fafafa,#d4d4d8);
  --active:rgba(var(--accent-rgb),.12);
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --card-border:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 40%,rgba(255,255,255,.09));
  --top-hi:inset 0 1px 0 rgba(255,255,255,.09);
  --orb1:#3f3f46; --orb2:#52525b; --orb3:#27272a; --orb-op:.5;
  --glow:0 0 0 1px rgba(var(--accent-rgb),.3),0 0 22px rgba(var(--accent-rgb),.22);
  --txt-grad:linear-gradient(100deg,#fff 20%,#e4e4e7 60%,#a1a1aa 95%);
  color-scheme:dark;
}

/* ─────────────── LIGHT · morning sky ─────────────── */
[data-theme="light"]{
  --bg:#f2f5fb;
  --card:rgba(255,255,255,.78);
  --card-solid:#ffffff;
  --card2:rgba(244,247,253,.85);
  --ink:#0d1b2e;
  --body:#3c5471;
  --muted:#7d93ad;
  --line:rgba(30,64,120,.1);
  --line-hi:rgba(255,255,255,.9);
  --input-bg:rgba(255,255,255,.85);
  --input-border:rgba(30,64,120,.16);
  --hover:rgba(30,64,120,.045);
  --active:rgba(var(--accent-rgb),.1);
  --shadow:0 12px 34px rgba(35,70,130,.12);
  --accent:#18181b; --accent2:#3f3f46; --accent3:#71717a;
  --accent-rgb:24,24,27; --on-accent:#fafafa;
  --accent-grad:linear-gradient(135deg,#3f3f46,#09090b);
  --card-border:linear-gradient(160deg,rgba(255,255,255,.95),rgba(var(--accent-rgb),.1) 55%,rgba(0,0,0,.05));
  --top-hi:inset 0 1px 0 rgba(255,255,255,.95);
  --orb1:#d4d4d8; --orb2:#e4e4e7; --orb3:#a1a1aa; --orb-op:.5;
  --glow:0 0 0 1px rgba(var(--accent-rgb),.4),0 0 20px rgba(var(--accent-rgb),.28);
  --txt-grad:linear-gradient(100deg,#09090b 10%,#52525b 60%,#09090b 95%);
  color-scheme:light;
}

*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:var(--font); background:var(--bg); color:var(--body);
  font-size:14px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .35s ease,color .35s ease; overflow-x:hidden;
}

/* ═══ AURORA SKY — fixed animated background ═══ */
body::before{
  content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:
    radial-gradient(42% 34% at 18% 12%, var(--orb1), transparent 70%),
    radial-gradient(38% 32% at 82% 8%, var(--orb2), transparent 70%),
    radial-gradient(44% 38% at 55% 100%, var(--orb3), transparent 70%),
    radial-gradient(30% 26% at 88% 72%, var(--orb1), transparent 70%);
  opacity:var(--orb-op);
  filter:blur(70px) saturate(1.3);
  animation:aurora-drift 26s ease-in-out infinite alternate;
  transition:opacity .35s;
}
@keyframes aurora-drift{
  0%{transform:translate3d(-4%,-2%,0) scale(1) rotate(0deg);}
  50%{transform:translate3d(3%,4%,0) scale(1.08) rotate(4deg);}
  100%{transform:translate3d(-2%,3%,0) scale(1.03) rotate(-3deg);}
}
/* film grain — premium texture */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
[data-theme="light"] body::after{opacity:.035;}

::selection{background:rgba(var(--accent-rgb),.35); color:var(--ink);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--muted),var(--muted)); border-radius:8px; border:3px solid transparent; background-clip:content-box; opacity:.6;}
::-webkit-scrollbar-thumb:hover{background:var(--accent); background-clip:content-box; border:3px solid transparent;}
::-webkit-scrollbar-track{background:transparent;}
.hidden{display:none!important;}

/* ═══ gradient-border card — the signature surface ═══ */
.card{
  position:relative; border-radius:var(--r-lg); padding:22px;
  background:linear-gradient(var(--card),var(--card)) padding-box, var(--card-border) border-box;
  border:1.5px solid transparent;
  box-shadow:var(--top-hi), var(--shadow);
  backdrop-filter:blur(18px) saturate(1.25); -webkit-backdrop-filter:blur(18px) saturate(1.25);
  transition:background .35s,box-shadow .25s,transform .25s var(--ease);
}
.card:hover{transform:translateY(-2px);}

/* ═══ typography helpers ═══ */
.grad-text{background:var(--txt-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* ═══ LOGIN — hero ═══ */
.login-bg{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; position:relative;}
.login-card{width:460px; max-width:94vw; padding:44px 42px 34px; text-align:center; border-radius:24px;}
.login-logo{
  width:66px; height:66px; border-radius:20px; margin:0 auto 20px; position:relative;
  background:var(--accent-grad); display:flex; align-items:center; justify-content:center; color:var(--on-accent);
  box-shadow:0 12px 34px rgba(var(--accent-rgb),.5), inset 0 1px 0 rgba(255,255,255,.35);
}
@keyframes logo-float{0%,100%{transform:translateY(0) rotate(-2deg);}50%{transform:translateY(-7px) rotate(2deg);}}
.login-logo::after{
  content:""; position:absolute; inset:-6px; border-radius:26px; z-index:-1;
  background:var(--aurora-grad); filter:blur(18px); opacity:.45;
}
.login-card h1{font-size:32px; font-weight:800; letter-spacing:-.035em; background:var(--txt-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.login-sub{color:var(--muted); font-size:14px; margin:10px 0 28px; line-height:1.6;}
.login-ai-badge{
  display:inline-flex; align-items:center; gap:7px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); border:1px solid var(--input-border); border-radius:var(--r-pill); padding:6px 14px; margin-bottom:18px;
  background:var(--active);
}
[data-theme="dark"] .login-ai-badge{color:var(--accent);}
.login-ai-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent3);box-shadow:0 0 10px var(--accent3);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.75);}}
.field{text-align:left; margin-bottom:18px;}
.field label{display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:8px; text-transform:uppercase; letter-spacing:.07em;}
.input-wrap{position:relative;}
.input-wrap svg{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none;}
.input{
  width:100%; background:var(--input-bg); border:1.5px solid var(--input-border);
  border-radius:var(--r-md); padding:12px 14px 12px 42px; font-size:14px; color:var(--ink);
  transition:border-color .2s, box-shadow .2s, background .2s; backdrop-filter:blur(8px);
}
.input.no-icon{padding-left:14px;}
.input::placeholder{color:var(--muted); opacity:.65;}
.input:focus{outline:none; border-color:var(--accent); box-shadow:var(--glow); background:var(--card-solid);}
textarea.input{resize:vertical; min-height:90px; line-height:1.55;}
select.input{appearance:none; 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='%236b7d93' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center;}

/* ═══ buttons ═══ */
.btn-primary{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent-grad); color:var(--on-accent); border:none; cursor:pointer;
  border-radius:var(--r-md); padding:12px 24px; font-size:14px; font-weight:700; letter-spacing:.01em;
  box-shadow:0 8px 24px rgba(var(--accent-rgb),.4), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s var(--ease), box-shadow .18s, filter .18s;
}
.btn-primary::after{ /* shine sweep */
  content:""; position:absolute; top:0; left:-80%; width:55%; height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); transition:left .5s ease;
}
.btn-primary:hover{filter:brightness(1.07); transform:translateY(-2px); box-shadow:0 12px 30px rgba(var(--accent-rgb),.5), inset 0 1px 0 rgba(255,255,255,.3);}
.btn-primary:hover::after{left:130%;}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{opacity:.55; cursor:default; transform:none;}
.btn-block{width:100%;}
.btn-soft{
  display:inline-flex; align-items:center; gap:7px; background:var(--active); color:var(--accent);
  border:1px solid rgba(var(--accent-rgb),.25); cursor:pointer; border-radius:var(--r-md);
  padding:9px 17px; font-size:13px; font-weight:700; transition:all .18s;
}
[data-theme="dark"] .btn-soft{color:var(--accent);}
.btn-soft:hover{box-shadow:var(--glow); transform:translateY(-1px);}
.btn-danger-soft{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(220,38,38,.1); color:var(--red);
  border:1px solid rgba(220,38,38,.25); cursor:pointer; border-radius:var(--r-md);
  padding:9px 17px; font-size:13px; font-weight:700; transition:all .18s;
}
.btn-danger-soft:hover{background:rgba(220,38,38,.18); transform:translateY(-1px);}
.btn-ghost{
  background:transparent; border:1px solid var(--input-border); color:var(--body);
  border-radius:var(--r-md); padding:9px 17px; font-size:13px; font-weight:600; cursor:pointer; transition:all .18s;
}
.btn-ghost:hover{border-color:var(--accent); color:var(--ink); box-shadow:var(--glow);}
.back-btn{padding:8px 10px !important; border-radius:10px !important; line-height:0; align-self:center; flex:none;}
.login-help{color:var(--muted); font-size:12.5px; margin-top:22px; line-height:1.65;}
.login-fine{color:var(--muted); opacity:.65; font-size:11.5px; margin-top:28px;}
.login-err{
  display:none; background:rgba(220,38,38,.1); color:var(--red);
  border:1px solid rgba(220,38,38,.3); border-radius:var(--r-md);
  padding:11px 15px; font-size:13px; font-weight:600; margin-bottom:16px; text-align:left;
}
.login-err.show{display:block; animation:shake .3s;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}

/* ═══ theme toggle — morphing ═══ */
.theme-toggle{
  width:40px; height:40px; border-radius:13px; border:1px solid var(--input-border);
  background:var(--card); cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:color .25s var(--ease), background .25s var(--ease), transform .16s var(--ease-out); flex-shrink:0; overflow:hidden;
  backdrop-filter:blur(12px);
}
.theme-toggle:hover{color:var(--accent); border-color:var(--accent); box-shadow:var(--glow); transform:rotate(12deg) scale(1.05);}
.theme-toggle svg{width:18px; height:18px; animation:icon-in .3s var(--ease);}
@keyframes icon-in{from{opacity:0; transform:scale(.5) rotate(-40deg);} to{opacity:1; transform:none;}}

/* ═══ top nav ═══ */
.topnav{
  background:color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px; padding:0 20px; height:62px;
  position:sticky; top:0; z-index:40;
}
.brand{display:flex; align-items:center; gap:11px; margin-right:14px;}
.brand-mark{
  width:36px; height:36px; border-radius:12px; flex-shrink:0;
  background:var(--accent-grad); display:flex; align-items:center; justify-content:center; color:var(--on-accent);
  box-shadow:0 6px 18px rgba(var(--accent-rgb),.45), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .25s var(--ease);
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06);}
.brand-name{font-size:16px; font-weight:800; letter-spacing:-.025em; background:var(--txt-grad); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1.15;}
.brand-sub{font-size:10.5px; color:var(--muted); font-weight:600; letter-spacing:.06em; text-transform:uppercase;}
.nav-links{display:flex; align-items:center; gap:2px; margin:0 auto; background:var(--hover); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px;}
.nav-link{
  display:inline-flex; align-items:center; gap:8px; border:none; background:transparent; cursor:pointer;
  padding:8px 17px; border-radius:var(--r-pill); font-size:13.5px; font-weight:600; color:var(--muted);
  transition:all .2s var(--ease);
}
.nav-link:hover{color:var(--ink);}
.nav-link.active{color:var(--on-accent); background:var(--accent-grad); box-shadow:0 4px 14px rgba(var(--accent-rgb),.4);}
.nav-right{display:flex; align-items:center; gap:8px;}
.user-chip{
  display:inline-flex; align-items:center; gap:9px; background:var(--hover);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 14px 4px 4px;
  font-size:13px; font-weight:700; color:var(--ink); transition:border-color .2s;
}
.user-chip:hover{border-color:var(--accent);}
.avatar{
  width:29px; height:29px; border-radius:50%; background:var(--accent-grad); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0;
  box-shadow:0 3px 10px rgba(var(--accent-rgb),.4);
}
.link-btn{
  display:inline-flex; align-items:center; gap:7px; background:transparent; border:none; cursor:pointer;
  color:var(--muted); font-size:13.5px; font-weight:600; padding:9px 13px; border-radius:11px; transition:all .18s;
}
.link-btn:hover{background:var(--hover); color:var(--ink);}
/* bottom tab bar is the mobile nav — hamburger retired */

/* ═══ page layout ═══ */
.page{max-width:1300px; margin:0 auto; padding:28px 26px 70px;}
.page-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:24px; flex-wrap:wrap;}
.page-head h2{font-family:var(--font-display); font-size:30px; font-weight:800; letter-spacing:-.028em; line-height:1.08; display:flex; align-items:center; gap:11px; color:var(--ink);}
/* Apple: gradient text reserved for the brand moment (login), not every header */
.page-head h2 svg{color:var(--accent); flex-shrink:0;}
.page-head p{color:var(--muted); font-size:13.5px; margin-top:6px; max-width:660px; line-height:1.6;}
.page-head .spacer{flex:1;}
.notice{
  display:flex; align-items:center; gap:11px; border-radius:var(--r-md); padding:13px 17px;
  font-size:13.5px; color:var(--body); margin-bottom:20px;
  background:linear-gradient(var(--card),var(--card)) padding-box, var(--card-border) border-box;
  border:1.5px solid transparent; backdrop-filter:blur(14px);
}
.notice svg{color:var(--green); flex-shrink:0;}
.notice.warn svg{color:var(--amber);}

/* ═══ stat cards ═══ */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); gap:14px; margin-bottom:20px;}
.stat-card{padding:20px; display:flex; gap:14px; align-items:center; overflow:hidden; position:relative;}
.stat-card::before{content:""; position:absolute; top:0; left:18px; right:18px; height:1px; background:linear-gradient(90deg,transparent,var(--line-hi),transparent);}
.stat-ic{
  width:46px; height:46px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3);
}
.stat-card .lbl{color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:5px;}
.stat-card .num{font-size:27px; font-weight:800; color:var(--ink); letter-spacing:-.025em; font-variant-numeric:tabular-nums;}
.stat-card .num.green{color:var(--green);} .stat-card .num.red{color:var(--red);}

/* ═══ segmented tabs ═══ */
.seg{display:inline-flex; background:var(--hover); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; gap:2px; backdrop-filter:blur(8px);}
.seg button{
  border:none; background:transparent; cursor:pointer; padding:8px 19px; font-size:13px; font-weight:600;
  color:var(--muted); border-radius:var(--r-pill); transition:all .2s var(--ease);
}
.seg button:hover{color:var(--ink);}
.seg button.active{background:var(--accent-grad); color:var(--on-accent); box-shadow:0 4px 12px rgba(var(--accent-rgb),.4);}

/* ═══ pills & badges ═══ */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:4px 12px; border-radius:var(--r-pill); letter-spacing:.03em; white-space:nowrap; border:1px solid transparent;}
.pill .dot{width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor;}
.pill.green{background:rgba(22,163,74,.13); color:var(--green); border-color:rgba(22,163,74,.25);}
.pill.gray{background:rgba(100,116,139,.14); color:var(--gray); border-color:rgba(100,116,139,.25);}
.pill.red{background:rgba(220,38,38,.13); color:var(--red); border-color:rgba(220,38,38,.25);}
.pill.amber{background:rgba(217,119,6,.15); color:var(--amber); border-color:rgba(217,119,6,.28);}
.pill.blue{background:var(--active); color:var(--accent); border-color:rgba(var(--accent-rgb),.3);}
[data-theme="dark"] .pill.blue{color:var(--accent);}
.plat-dot{width:10px; height:10px; border-radius:50%; flex-shrink:0; box-shadow:0 0 8px currentColor;}
.plat-badge{width:32px; height:32px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:800; flex-shrink:0; box-shadow:0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3);}
.p-whatsapp{background:linear-gradient(135deg,#25D366,#0e9f6e);} .p-telegram{background:linear-gradient(135deg,#229ED9,#1668a8);}
.p-messenger{background:linear-gradient(135deg,#0099ff,#a033ff);}
.p-instagram{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);}
.p-webchat{background:linear-gradient(135deg,#7c5cff,#4a2fd6);}

/* ═══ tables ═══ */
.tbl-card{overflow:hidden; padding:0;}
table.tbl{width:100%; border-collapse:collapse;}
table.tbl th{
  text-align:left; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:13px 20px; border-bottom:1px solid var(--line); background:var(--card2);
}
table.tbl td{padding:13px 20px; font-size:13.5px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl tr.rowlink{cursor:pointer; transition:background .15s;}
table.tbl tr.rowlink:hover td{background:var(--hover);}
.tbl-empty{text-align:center; color:var(--muted); padding:38px 20px; font-size:13.5px;}

/* ═══ toolbar ═══ */
.toolbar{display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap;}
.search{position:relative;}
.search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted);}
.search .input{padding-left:40px; width:260px;}

/* ═══ inbox 3-pane ═══ */
.inbox{display:grid; grid-template-columns:305px minmax(0,1fr) 335px; gap:14px; height:calc(100vh - 135px); min-height:540px;}
.pane{
  border-radius:var(--r-lg); display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(var(--card),var(--card)) padding-box, var(--card-border) border-box;
  border:1.5px solid transparent; box-shadow:var(--top-hi), var(--shadow);
  backdrop-filter:blur(18px) saturate(1.25);
}
.pane-head{padding:15px 17px 13px; border-bottom:1px solid var(--line);}
.list-title{display:flex; align-items:center; font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--ink); margin-bottom:12px; padding:0 2px;}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px;}
.fchip{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--input-border); background:transparent; cursor:pointer;
  border-radius:var(--r-pill); padding:6px 13px; font-size:12.5px; font-weight:600; color:var(--muted); transition:all .18s;
}
.fchip:hover{border-color:var(--accent); color:var(--ink); transform:translateY(-1px);}
.fchip.active{background:var(--accent-grad); border-color:transparent; color:var(--on-accent); box-shadow:0 4px 12px rgba(var(--accent-rgb),.35);}
.toggle-row{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--muted); padding:2px 2px 0;}
.conv-list{flex:1; overflow-y:auto; padding:10px;}
.conv-item{display:flex; gap:12px; padding:10px 12px; border-radius:16px; cursor:pointer; align-items:center; transition:background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); border:1px solid transparent; position:relative;}
.conv-item:hover{background:var(--hover); transform:translateX(2px);}
.conv-item:active{transform:translateX(2px) scale(.985);}
.conv-item.active{background:linear-gradient(135deg, rgba(var(--accent-rgb),.13), rgba(var(--accent-rgb),.05)); border-color:rgba(var(--accent-rgb),.35); box-shadow:0 4px 18px rgba(var(--accent-rgb),.16), inset 0 1px 0 rgba(255,255,255,.35);}
.conv-item.active::before{content:""; position:absolute; left:-1px; top:22%; bottom:22%; width:3.5px; border-radius:99px; background:var(--accent-grad); box-shadow:0 0 12px rgba(var(--accent-rgb),.6);}
/* staggered list entrance — delay set inline per row */
.conv-enter{animation:conv-in .38s var(--ease) both;}
@keyframes conv-in{from{opacity:0; transform:translateX(-14px);} to{opacity:1; transform:none;}}
/* gradient avatar */
.conv-avatar{position:relative; width:54px; height:54px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg, hsl(var(--av-hue,220) 75% 58%), hsl(calc(var(--av-hue,220) + 45) 70% 45%));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px; letter-spacing:.02em;
  box-shadow:0 4px 14px hsl(var(--av-hue,220) 70% 50% / .35), inset 0 1px 0 rgba(255,255,255,.35);}
.conv-avatar.lg{width:44px; height:44px; font-size:15px;}
.av-badge{position:absolute; right:-3px; bottom:-3px; min-width:19px; height:19px; padding:0 4px; border-radius:99px;
  display:flex; align-items:center; justify-content:center; font-size:8.5px; font-weight:800; color:#fff;
  border:2px solid var(--card); box-shadow:0 2px 6px rgba(0,0,0,.25);}
.av-badge.p-whatsapp{background:#25D366;} .av-badge.p-telegram{background:#229ED9;}
.av-badge.p-webchat{background:#8b5cf6;} .av-badge.p-messenger{background:#0084FF;} .av-badge.p-instagram{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);}
.av-online{position:absolute; left:-1px; top:1px; width:13px; height:13px; border-radius:50%; background:#22c55e; border:2.5px solid var(--card); box-shadow:0 0 8px rgba(34,197,94,.7);}
.conv-main{flex:1; min-width:0;}
.conv-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px;}
.conv-name{font-weight:700; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em;}
.conv-time{font-size:11px; color:var(--muted); flex-shrink:0; font-variant-numeric:tabular-nums;}
.conv-time.unread-t{color:var(--accent); font-weight:800;}
.conv-sub{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:2px;}
.conv-prev{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.conv-prev.unread-p{color:var(--body); font-weight:700;}
.unread{background:var(--accent-grad); color:var(--on-accent); font-size:10.5px; font-weight:800; min-width:20px; height:20px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 6px; flex-shrink:0; box-shadow:0 3px 10px rgba(var(--accent-rgb),.45); animation:unread-pop .3s var(--ease);}
@keyframes unread-pop{from{transform:scale(.4); opacity:0;} to{transform:scale(1); opacity:1;}}
/* skeleton shimmer while loading */
.conv-skel{display:flex; gap:12px; padding:10px 12px; align-items:center;}
.sk-av{width:54px; height:54px; border-radius:50%; flex-shrink:0;}
.sk-lines{flex:1; display:flex; flex-direction:column; gap:8px;}
.sk-l1{height:12px; width:55%; border-radius:6px;} .sk-l2{height:10px; width:85%; border-radius:6px;}
.sk-av,.sk-l1,.sk-l2{background:linear-gradient(90deg, var(--hover) 25%, var(--line) 50%, var(--hover) 75%); background-size:200% 100%; animation:sk-shimmer 1.2s linear infinite;}
@keyframes sk-shimmer{from{background-position:200% 0;} to{background-position:-200% 0;}}
.conv-empty{text-align:center; padding:56px 26px; color:var(--muted); display:flex; flex-direction:column; gap:8px; align-items:center; animation:conv-in .4s var(--ease);}
.conv-empty-ic{font-size:44px; filter:grayscale(.2); margin-bottom:6px;}
/* chat pane entrance: slides in beside the contact */
.chat-pane.pane-enter{animation:pane-slide .34s var(--ease);}
.chat-pane.pane-enter #chat-header{animation:head-drop .34s var(--ease);}
.chat-pane.pane-enter .msg-row{animation:msg-in .3s var(--ease) both;}
.chat-pane.pane-enter .msg-row:nth-child(1){animation-delay:.02s;} .chat-pane.pane-enter .msg-row:nth-child(2){animation-delay:.05s;}
.chat-pane.pane-enter .msg-row:nth-child(3){animation-delay:.08s;} .chat-pane.pane-enter .msg-row:nth-child(4){animation-delay:.11s;}
.chat-pane.pane-enter .msg-row:nth-child(5){animation-delay:.14s;} .chat-pane.pane-enter .msg-row:nth-child(n+6){animation-delay:.17s;}
@keyframes pane-slide{from{opacity:0; transform:translateX(28px);} to{opacity:1; transform:none;}}
@keyframes head-drop{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;}}
.chat-avatar{display:none;}
.chat-head{padding:14px 19px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; background:var(--card2);}
.chat-head .nm{font-weight:800; font-size:15px; color:var(--ink); letter-spacing:-.015em;}
.chat-head .sub{font-size:12px; color:var(--muted); margin-top:2px;}
.chat-mode{margin-left:auto;}
#messages{flex:1; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:11px;}
.msg-row{display:flex; animation:msg-in .25s var(--ease);}
@keyframes msg-in{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
.msg-row.out{justify-content:flex-end;}
.bubble{max-width:74%; padding:11px 15px; font-size:13.8px; line-height:1.55; word-wrap:break-word; position:relative;}
.bubble-in{background:var(--card-solid); border:1px solid var(--line); color:var(--body); border-radius:17px 17px 17px 6px; box-shadow:0 2px 10px rgba(0,0,0,.08);}
.bubble-out{background:var(--accent-grad); color:var(--on-accent); border-radius:17px 17px 6px 17px; box-shadow:0 6px 18px rgba(var(--accent-rgb),.35), inset 0 1px 0 rgba(255,255,255,.25);}
.bubble .ts{display:block; font-size:10px; margin-top:6px; text-align:right; opacity:.55;}
.day-div{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:10.5px; font-weight:700; margin:10px 0; text-transform:uppercase; letter-spacing:.08em;}
.day-div::before,.day-div::after{content:""; flex:1; height:1px; background:var(--line);}
.composer{padding:14px 17px; border-top:1px solid var(--line); background:var(--card2);}
.composer-idle{opacity:.55;}
.composer-idle .quick button, .composer-idle #btn-send{cursor:not-allowed;}
.quick{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:11px;}
.quick button{border:1px solid var(--input-border); background:transparent; color:var(--accent); border-radius:var(--r-pill); padding:6px 14px; font-size:12.5px; font-weight:600; cursor:pointer; transition:all .16s;}
[data-theme="dark"] .quick button{color:var(--accent);}
.quick button:hover{border-color:var(--accent); background:var(--active); transform:translateY(-1px);}
.send-row{display:flex; gap:10px;}
.send-row .input{border-radius:var(--r-md); padding-left:16px;}
.side-tabs{display:flex; gap:4px; padding:13px 15px 0; border-bottom:1px solid var(--line);}
.side-tab{border:none; background:transparent; cursor:pointer; font-size:13px; font-weight:700; color:var(--muted); padding:10px 15px; position:relative; transition:color .18s;}
.side-tab:hover{color:var(--ink);}
.side-tab.active{color:var(--ink);}
.side-tab.active::after{content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2.5px; background:var(--accent-grad); border-radius:3px; box-shadow:0 0 10px rgba(var(--accent-rgb),.5);}
.side-body{flex:1; overflow-y:auto; padding:17px;}
.kv{display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px dashed var(--line); font-size:13px;}
.kv:last-child{border-bottom:none;}
.kv .k{color:var(--muted); font-weight:600;}
.kv .v{color:var(--ink); font-weight:600; text-align:right; word-break:break-word;}
.prod-row{display:flex; align-items:center; gap:11px; background:var(--card2); border:1px solid var(--line); border-radius:13px; padding:12px 14px; margin-bottom:9px; transition:all .16s;}
.prod-row:hover{border-color:var(--accent); transform:translateX(2px);}
.prod-row .inf{flex:1; min-width:0;}
.prod-row .nm{font-weight:700; font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.prod-row .meta{font-size:11.5px; color:var(--muted); margin-top:2px;}
.mini-btn{border:1px solid var(--input-border); background:transparent; color:var(--accent); border-radius:9px; padding:7px 14px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap; transition:all .16s;}
[data-theme="dark"] .mini-btn{color:var(--accent);}
.mini-btn:hover{border-color:var(--accent); background:var(--active); box-shadow:var(--glow);}
.mini-btn.danger{color:var(--red);}
.mini-btn.danger:hover{border-color:var(--red); background:rgba(220,38,38,.09); box-shadow:none;}
.qty-btn{width:29px; height:29px; border-radius:9px; border:1px solid var(--input-border); background:transparent; cursor:pointer; font-size:15px; color:var(--ink); display:flex; align-items:center; justify-content:center; transition:all .15s;}
.qty-btn:hover{border-color:var(--accent); color:var(--accent); transform:scale(1.08);}
.empty-state{padding:60px 32px; text-align:center; max-width:660px; margin:44px auto; border-radius:22px;}
.empty-state .ic{width:64px; height:64px; border-radius:19px; background:var(--accent-grad); color:var(--on-accent); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; box-shadow:0 10px 26px rgba(var(--accent-rgb),.4), inset 0 1px 0 rgba(255,255,255,.3); animation:logo-float 5s ease-in-out infinite;}
.empty-state h3{font-size:19px; font-weight:800; letter-spacing:-.02em; margin-bottom:10px; background:var(--txt-grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.empty-state p{color:var(--muted); font-size:13.5px; line-height:1.65; margin-bottom:24px;}

/* ═══ products grid ═══ */
.prod-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:14px;}
.prod-card{padding:22px; display:flex; flex-direction:column; gap:6px;}
.prod-card .nm{font-weight:800; font-size:15px; color:var(--ink); letter-spacing:-.015em;}
.prod-card .sku{font-size:11.5px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,monospace;}
.prod-card .cat{display:inline-block; align-self:flex-start;}
.prod-card .price{font-size:20px; font-weight:800; color:var(--ink); margin-top:8px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.prod-card .stock{font-size:12.5px; color:var(--muted);}
.prod-card .row{display:flex; gap:8px; margin-top:14px;}

/* ═══ connectors (multi-account) ═══ */
.chan-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; margin-top:18px;}
.chan-card{padding:24px;}
.chan-card .top{display:flex; align-items:center; gap:13px; margin-bottom:10px;}
.chan-card .nm{font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.015em;}
.chan-card .method{font-size:12px; color:var(--muted); margin-bottom:6px;}
.chan-card .note{font-size:13px; color:var(--body); line-height:1.6; margin-bottom:18px;}
.acct-list{display:flex; flex-direction:column; gap:9px; margin-bottom:15px;}
.acct-row{
  display:flex; align-items:center; gap:12px;
  background:var(--card2); border:1px solid var(--line);
  border-radius:13px; padding:11px 14px; transition:all .18s;
}
.acct-row:hover{border-color:var(--accent); box-shadow:0 4px 14px rgba(var(--accent-rgb),.12);}
.acct-row .inf{flex:1; min-width:0;}
.acct-row .nm{font-weight:700; font-size:13.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.acct-row .sub{font-size:11.5px; color:var(--muted); margin-top:1px;}
.acct-row .acts{display:flex; gap:6px; flex-shrink:0;}
.icon-btn{
  width:31px; height:31px; border-radius:10px; border:1px solid var(--input-border);
  background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:all .16s; font-size:14px;
}
.icon-btn:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px); box-shadow:var(--glow);}
.icon-btn.danger:hover{border-color:var(--red); color:var(--red); box-shadow:none;}
.add-acct{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  border:1.5px dashed var(--input-border); background:transparent;
  border-radius:13px; padding:12px; font-size:13px; font-weight:700; color:var(--accent);
  cursor:pointer; transition:all .2s var(--ease);
}
[data-theme="dark"] .add-acct{color:var(--accent);}
.add-acct:hover{border-color:var(--accent); border-style:solid; background:var(--active); transform:translateY(-1px);}
.code-box{background:var(--card2); border:1px solid var(--line); border-radius:11px; padding:11px 14px; font-family:ui-monospace,monospace; font-size:12px; color:var(--ink); word-break:break-all; margin-bottom:8px;}
.code-box .cl{font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-family:var(--font); display:block; margin-bottom:5px; font-weight:700;}
.doc-card{padding:22px; margin-bottom:14px;}
.doc-card .ttl{font-weight:800; font-size:15px; color:var(--ink); margin-bottom:8px; letter-spacing:-.01em;}
.doc-card .cnt{font-size:13.5px; color:var(--body); line-height:1.65; white-space:pre-wrap;}
.doc-card .row{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}

/* ═══ admin ═══ */
.res-icon{width:36px; height:36px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:800; flex-shrink:0; box-shadow:0 4px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.3);}
.user-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:14px;}
.user-card{padding:22px;}
.user-card .nm{font-size:15px; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:10px; letter-spacing:-.01em;}
.user-card .sub{font-size:12.5px; color:var(--muted); margin:7px 0 16px;}
.user-card .row{display:flex; align-items:center; gap:10px;}
.audit-row{display:flex; align-items:center; gap:12px; padding:13px 22px; border-bottom:1px solid var(--line); font-size:13.5px; transition:background .15s;}
.audit-row:hover{background:var(--hover);}
.audit-row:last-child{border-bottom:none;}
.audit-row .ev{font-family:ui-monospace,monospace; font-size:12.5px; color:var(--accent); font-weight:600;}
[data-theme="dark"] .audit-row .ev{color:var(--accent);}
.audit-row .right{margin-left:auto; display:flex; gap:14px; color:var(--muted); font-size:12.5px; flex-shrink:0;}
.cfg-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}

/* ═══ toggle switch ═══ */
.switch{position:relative; width:46px; height:25px; flex-shrink:0; cursor:pointer;}
.switch input{opacity:0; width:0; height:0;}
.switch .sl{position:absolute; inset:0; background:var(--input-border); border-radius:999px; transition:.2s;}
.switch .sl::before{content:""; position:absolute; width:19px; height:19px; border-radius:50%; background:#fff; top:3px; left:3px; transition:.2s var(--ease); box-shadow:0 2px 8px rgba(0,0,0,.3);}
.switch input:checked + .sl{background:var(--accent-grad); box-shadow:0 2px 12px rgba(var(--accent-rgb),.45);}
.switch input:checked + .sl::before{transform:translateX(21px);}

.modal-bg{position:fixed; inset:0; background:rgba(3,6,12,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:100; padding:20px; animation:fadeIn .2s ease;}
#thermal-label-modal{z-index:200;}
#qr-modal{z-index:250;}
#confirm-modal{z-index:300;}
.modal{
  border-radius:20px; padding:28px; width:490px; max-width:94vw; max-height:88vh; overflow-y:auto;
  background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box, var(--card-border) border-box;
  border:1.5px solid transparent; box-shadow:var(--top-hi), 0 24px 70px rgba(0,0,0,.5);
  animation:modal-in .28s var(--ease);
}
@keyframes modal-in{from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:none;}}
.modal h3{font-size:17px; font-weight:800; color:var(--ink); margin-bottom:5px; letter-spacing:-.015em;}
.modal .msub{font-size:13px; color:var(--muted); margin-bottom:20px; line-height:1.55;}
.modal .frow{margin-bottom:15px;}
.modal .frow label{display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:7px; text-transform:uppercase; letter-spacing:.06em;}
.modal .frow .input{padding-left:14px;}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; margin-top:22px;}
.qr-box{background:#fff; border-radius:15px; padding:15px; display:inline-block; margin:6px 0 14px; box-shadow:0 8px 30px rgba(var(--accent-rgb),.3);}
.qr-box img{width:220px; height:220px; display:block; border-radius:8px;}
.pick-btn{display:block; width:100%; text-align:left; background:var(--card2); border:1px solid var(--line); border-radius:13px; padding:14px 17px; margin-bottom:10px; cursor:pointer; transition:all .18s;}
.pick-btn:hover{border-color:var(--accent); background:var(--active); transform:translateX(3px);}
.pick-btn .pn{font-weight:700; font-size:14px; color:var(--ink);}
.pick-btn .pi{font-size:11.5px; color:var(--muted); margin-top:3px;}

.fade-in{animation:fadeIn .3s var(--ease);}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.muted{color:var(--muted);} .small{font-size:12.5px;}
.mt8{margin-top:8px;} .mt16{margin-top:16px;} .mb16{margin-bottom:16px;}

/* ═══ responsive ═══ */
@media(max-width:1100px){
  .inbox{grid-template-columns:280px minmax(0,1fr); height:calc(100vh - 135px);}
  .inbox .pane.side-pane{display:none;}
  .inbox.detail-open{grid-template-columns:minmax(0,1fr) 320px;}
  .inbox.detail-open .pane.list-pane{display:none;}
  .inbox.detail-open .pane.side-pane{display:flex;}
}
@media(max-width:900px){
  .cfg-grid{grid-template-columns:1fr;}
  .topnav{padding:0 14px;}
  .nav-links{
    display:none; position:absolute; top:62px; left:10px; right:10px;
    background:var(--card-solid); border:1px solid var(--line); border-radius:16px;
    flex-direction:column; align-items:stretch; padding:8px; gap:2px; box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex; animation:modal-in .25s var(--ease);}
  .nav-link{justify-content:flex-start; padding:12px 16px;}
  .brand-sub{display:none;}
  .page{padding:18px 15px 70px;}
  .inbox{grid-template-columns:1fr; height:auto;}
  .inbox .pane{margin-bottom:12px;}
  .inbox .pane.list-pane{max-height:46vh;}
  .inbox .pane.chat-pane{min-height:62vh;}
  .inbox.detail-open{grid-template-columns:1fr;}
  .inbox.detail-open .pane.side-pane{display:flex;}
  .bubble{max-width:87%;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .chan-grid{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));}
  .search .input{width:100%;}
  .search{flex:1;}
  .modal{padding:24px; border-radius:18px;}
  .qr-box img{width:200px; height:200px;}
  table.tbl{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}
@media(max-width:480px){
  .stat-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .stat-card .num{font-size:24px;}
  .page-head h2{font-size:19px;}
  .btn-primary{padding:11px 19px; font-size:13.5px;}
  .login-card{padding:32px 26px 26px;}
  .user-chip span:last-child{max-width:76px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
}

/* ═══ reduced motion — accessibility ═══ */
@media(prefers-reduced-motion:reduce){
  body::before,.login-logo,.login-logo::after,.empty-state .ic{animation:none;}
  *{transition-duration:.01ms!important;}
}

/* ══════════════════════════════════════════════════════════════
   MOBILE-FIRST UX LAYER — native app experience
   bottom tabs · chat navigation · card tables · bottom sheets
   ══════════════════════════════════════════════════════════════ */

/* ── bottom tab bar (mobile primary nav) ── */
.bottom-tabs{display:none;}
.m-back,.m-info,.m-detail-close{display:none;}

/* ── desktop refinements ── */
@media(min-width:901px){
  .inbox{height:calc(100vh - 140px);}
}

@media(max-width:900px){
  /* ── floating dock tab bar ── */
  .bottom-tabs{
    display:flex; position:fixed; z-index:50;
    left:50%; transform:translateX(-50%);
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:max-content; max-width:calc(100vw - 24px);
    background:color-mix(in srgb, var(--card-solid) 80%, transparent);
    backdrop-filter:blur(26px) saturate(1.5); -webkit-backdrop-filter:blur(26px) saturate(1.5);
    border:1px solid var(--line-hi);
    border-radius:28px; padding:6px;
    box-shadow:var(--shadow), 0 12px 40px rgba(0,0,0,.28);
  }
  .btab{
    border:none; background:transparent; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    padding:9px 13px; border-radius:21px; color:var(--muted);
    font-size:10px; font-weight:700; letter-spacing:.02em;
    min-height:54px; min-width:58px;
    transition:background .25s var(--ease), color .25s, transform .15s;
  }
  .btab svg{width:22px; height:22px; transition:transform .25s var(--ease);}
  .btab.active{background:var(--active); color:var(--accent);}
  [data-theme="dark"] .btab.active{color:var(--accent);}
  .btab.active svg{transform:scale(1.12);}
  .btab:active{transform:scale(.9);}

  /* page clearance for floating dock */
  .page{padding:16px 14px calc(108px + env(safe-area-inset-bottom));}
  #cview-inbox.page{padding-left:10px; padding-right:10px;}

  /* topnav: compact */
  .topnav{height:58px; padding:0 12px;}
  .nav-links{display:none!important;}
  .brand-name{font-size:14.5px;}
  .user-chip{padding:3px 10px 3px 3px; font-size:12px;}
  .user-chip .avatar{width:26px; height:26px;}
  #btn-signout span{display:none;}
  #btn-signout{padding:9px;}
  #btn-refresh{display:none!important;}

  /* ── page headers stack ── */
  .page-head{margin-bottom:16px;}
  .page-head h2{font-size:19px;}
  .page-head .spacer{display:none;}
  .page-head .btn-primary,.page-head .btn-soft{width:100%; justify-content:center; margin-top:4px;}

  /* ── stats: 2-col compact ── */
  .stat-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .stat-card{padding:14px; gap:11px;}
  .stat-ic{width:38px; height:38px; border-radius:12px;}
  .stat-card .num{font-size:22px;}

  /* ── toolbar ── */
  .toolbar{gap:8px;}
  .search{flex:1 1 100%;}
  .search .input{width:100%; min-height:44px;}

  /* ── INBOX: native list → chat → detail flow ── */
  .inbox{display:block; height:auto; min-height:0;}
  .inbox .pane{margin-bottom:0; border-radius:16px;}
  /* default: show list only */
  .inbox .pane.chat-pane{display:none;}
  .inbox.m-chat-open .pane.list-pane{display:none;}
  .inbox.m-chat-open .pane.chat-pane{display:flex; height:calc(100dvh - 58px - 76px - env(safe-area-inset-bottom)); min-height:420px;}
  .m-back{display:flex;}
  .m-info{display:flex;}
  .chat-head{padding:10px 12px; gap:10px;}
  .conv-item{padding:13px 12px; min-height:64px;}
  .conv-list{max-height:calc(100dvh - 320px); min-height:300px;}
  /* detail as slide-over sheet */
  .inbox .pane.side-pane{display:none;}
  .inbox.m-detail-open .pane.side-pane{
    display:flex; position:fixed; top:0; right:0; bottom:0; z-index:70;
    width:min(380px, 92vw); border-radius:0; border-left:1px solid var(--line);
    animation:sheet-in .28s var(--ease);
    padding-bottom:env(safe-area-inset-bottom);
  }
  @keyframes sheet-in{from{transform:translateX(100%);} to{transform:none;}}
  .m-detail-close{display:flex; margin-left:auto;}
  .inbox.m-detail-open::after{
    content:""; position:fixed; inset:0; z-index:65; background:rgba(0,0,0,.45);
    animation:fadeIn .2s;
  }
  #messages{padding:14px 12px;}
  .bubble{max-width:85%; font-size:14px;}
  .composer{padding:10px 12px calc(10px + env(safe-area-inset-bottom));}
  .send-row .input{min-height:46px; font-size:15px;}
  .send-row .btn-primary{padding:12px 22px; min-height:46px;}
  .quick button{padding:8px 15px; font-size:13px;}

  /* ── tables → cards ── */
  table.tbl thead{display:none;}
  table.tbl, table.tbl tbody{display:block;}
  table.tbl tr{
    display:block; margin:0 0 10px; border-radius:14px; padding:6px 4px;
    background:linear-gradient(var(--card),var(--card)) padding-box, var(--card-border) border-box;
    border:1.5px solid transparent;
  }
  table.tbl tr.rowlink:active{transform:scale(.985);}
  table.tbl td{
    display:flex; justify-content:space-between; align-items:center; gap:14px;
    border-bottom:1px dashed var(--line); padding:10px 16px; text-align:right;
  }
  table.tbl td:last-child{border-bottom:none;}
  table.tbl td::before{
    content:attr(data-label); font-size:11px; font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; color:var(--muted); flex-shrink:0;
  }
  table.tbl td.tbl-empty{display:block; text-align:center;}
  table.tbl td.tbl-empty::before{display:none;}
  .tbl-card{background:transparent; border:none; box-shadow:none; backdrop-filter:none; padding:0;}
  .tbl-card table.tbl tr{
    background:linear-gradient(var(--card),var(--card)) padding-box, var(--card-border) border-box;
    border:1.5px solid transparent; box-shadow:var(--shadow);
  }

  /* ── modals → bottom sheets ── */
  .modal-bg{align-items:flex-end; padding:0;}
  .modal{
    width:100%!important; max-width:100%; border-radius:22px 22px 0 0;
    max-height:92dvh; padding:22px 20px calc(22px + env(safe-area-inset-bottom));
    animation:sheet-up .32s var(--ease);
    border-bottom:none;
  }
  @keyframes sheet-up{from{transform:translateY(60px); opacity:0;} to{transform:none; opacity:1;}}
  .modal::before{
    content:""; display:block; width:42px; height:4.5px; border-radius:3px;
    background:var(--input-border); margin:0 auto 16px;
  }
  .modal-foot .btn-ghost,.modal-foot .btn-primary{flex:1; justify-content:center; min-height:48px;}

  /* ── forms & touch targets ── */
  .input{min-height:46px; font-size:15px;}
  .btn-primary{min-height:46px;}
  .btn-soft,.btn-danger-soft,.btn-ghost{min-height:44px;}
  .fchip{padding:9px 16px; font-size:13px; min-height:40px;}
  .seg{width:100%;}
  .seg button{flex:1; padding:10px 8px; font-size:12.5px;}
  .icon-btn{width:38px; height:38px;}
  .mini-btn{padding:9px 16px; font-size:13px;}
  .side-tab{padding:12px 14px; font-size:13.5px;}

  /* ── cards & grids ── */
  .chan-grid{grid-template-columns:1fr;}
  .prod-grid{grid-template-columns:repeat(2,1fr); gap:10px;}
  .prod-card{padding:16px;}
  .user-grid{grid-template-columns:1fr;}
  .cfg-grid{grid-template-columns:1fr;}
  .acct-row{padding:12px;}
  .doc-card{padding:18px;}
  .empty-state{padding:44px 22px; margin:24px auto;}
  .qr-box img{width:min(240px,70vw); height:min(240px,70vw);}
  .login-card{padding:34px 24px 26px;}
  .login-card h1{font-size:27px;}
}

/* small phones */
@media(max-width:480px){
  .stat-grid{grid-template-columns:repeat(2,1fr); gap:8px;}
  .stat-card{padding:12px 10px; gap:9px;}
  .stat-card .num{font-size:20px;}
  .stat-ic{width:34px; height:34px;}
  .prod-grid{grid-template-columns:repeat(2,1fr); gap:8px;}
  .page-head h2{font-size:17.5px;}
  .brand-sub{display:none;}
  .btab{font-size:10px;}
  .btab svg{width:20px; height:20px;}
}

/* login page floating theme toggle */
.login-theme-toggle{position:fixed; top:18px; right:18px; z-index:80;}

/* ═══════════════ NATIVE LAYER · floating dock · settings · chat ═══════════════ */

/* ── More / Settings (native iOS-style) ── */
.more-wrap{max-width:560px; margin:0 auto;}
.more-acct{display:flex; align-items:center; gap:14px; padding:18px;}
.more-group-title{font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:22px 6px 8px;}
.more-group{padding:0; overflow:hidden;}
.mrow{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:14px 16px; background:transparent; border:none; color:var(--ink);
  font:inherit; text-align:left;
}
.mrow + .mrow{border-top:1px solid var(--line);}
.mrow-ic{
  width:34px; height:34px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--active); color:var(--accent);
}
[data-theme="dark"] .mrow-ic{color:var(--accent);}
.mrow-tx{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;}
.mrow-tx b{font-size:14.5px; font-weight:700;}
.mrow-tx small{color:var(--muted); font-size:12px;}
.mrow.danger .mrow-tx b{color:#f87171; font-size:15px;}
.mrow.danger:active{background:rgba(248,113,113,.08);}
/* iOS toggle switch */
.switch{position:relative; display:inline-block; width:51px; height:31px; flex:none;}
.switch input{opacity:0; width:0; height:0; position:absolute;}
.switch .knob{
  position:absolute; inset:0; border-radius:31px; cursor:pointer;
  background:color-mix(in srgb, var(--muted) 35%, transparent);
  transition:background .25s var(--ease);
}
.switch .knob::before{
  content:""; position:absolute; width:27px; height:27px; border-radius:50%;
  left:2px; top:2px; background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:transform .25s var(--ease);
}
.switch input:checked + .knob{background:#34c759;}
.switch input:checked + .knob::before{transform:translateX(20px);}
.switch input:focus-visible + .knob{box-shadow:var(--glow);}

/* ── native chat header ── */
.chat-avatar{
  width:42px; height:42px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:17px; color:var(--on-accent); background:var(--accent-grad);
  box-shadow:0 3px 10px rgba(var(--accent-rgb),.4);
}
.chat-head .nm{font-size:15.5px;}
.chat-head .sub{display:flex; align-items:center; gap:5px;}
.chat-head .plat-badge{flex:none;}

/* ── native composer ── */
.composer .send-row{display:flex; gap:8px; align-items:center;}
.composer .send-row .input{
  flex:1; border-radius:24px; padding:12px 18px; min-height:46px;
}
#btn-send{
  flex:none; width:46px; height:46px; padding:0!important; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0;
}
#btn-send::after{
  content:""; width:18px; height:18px;
  background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

@media(max-width:900px){
  /* topnav: sign out lives in More now */
  #btn-signout{display:none!important;}
  /* native chat shell */
  #cview-inbox.page{padding:0;}
  .inbox .pane{border-radius:0; border-left:none; border-right:none;}
  .inbox .pane.list-pane{border-radius:0;}
  .chat-head{
    position:sticky; top:0; z-index:5;
    padding:10px 12px;
    background:color-mix(in srgb, var(--card-solid) 88%, transparent);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
  }
  .m-back{margin-left:-6px;}
  .composer{
    position:sticky; bottom:0; z-index:5;
    background:color-mix(in srgb, var(--card-solid) 88%, transparent);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--line);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    border-radius:0;
  }
  #messages{padding:14px 12px;}
  /* message bubbles: tighter native grouping */
  .msg-row .bubble{max-width:80%;}
  /* more view breathing room */
  #cview-more.page{padding-left:16px; padding-right:16px;}
}

/* ═══ FB comment automation panel (Connectors tab) ═══ */
.comment-auto{margin-top:16px; padding:16px; border-radius:18px;
  background:color-mix(in srgb, var(--card) 82%, transparent);
  border:1px solid var(--input-border); box-shadow:var(--card-shadow);}
.ca-head{font-weight:700; font-size:14px; margin-bottom:10px;}
.ca-sub{font-weight:500; font-size:11.5px; color:var(--muted); margin-left:6px;}
.ca-toggles{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.ca-toggles .toggle-row{justify-content:flex-start;}
.ca-label{font-size:12.5px; font-weight:700; color:var(--body); margin-bottom:6px;}
.ca-hint{font-weight:500; color:var(--muted); font-size:11.5px;}
.comment-auto textarea{width:100%; border-radius:12px; border:1px solid var(--input-border);
  background:var(--input-bg); color:var(--body); padding:10px 12px; font-size:13px;
  font-family:inherit; resize:vertical;}
.ca-activity{display:flex; flex-direction:column; gap:8px; max-height:280px; overflow-y:auto;}
.ca-item{padding:10px 12px; border-radius:12px; background:rgba(127,127,160,.08);
  border:1px solid var(--input-border); font-size:12.5px; line-height:1.5;}
.ca-c{color:var(--body);}
.ca-r{color:var(--muted); margin-top:4px;}
.ca-r.ca-skip{font-style:italic;}
.ca-dm{color:var(--accent); font-weight:700;}
.ca-empty{color:var(--muted); font-size:12.5px; text-align:center; padding:14px;}

/* ---- Lead Intelligence sheet ---- */
.intel-tbl th, .intel-tbl td{vertical-align:middle;}
.score-wrap{display:flex; align-items:center; gap:8px; min-width:110px;}
.score-bar{flex:1; height:8px; border-radius:99px; background:rgba(100,116,139,.18); overflow:hidden;}
.score-bar i{display:block; height:100%; border-radius:99px; transition:width .5s ease;}
.score-bar.hot i{background:linear-gradient(90deg,#f43f5e,#fb923c); box-shadow:0 0 8px rgba(244,63,94,.5);}
.score-bar.warm i{background:linear-gradient(90deg,#f59e0b,#fbbf24); box-shadow:0 0 8px rgba(245,158,11,.45);}
.score-bar.cold i{background:linear-gradient(90deg,#52525b,#a1a1aa); box-shadow:0 0 8px rgba(var(--accent-rgb),.4);}
.score-num{font-size:12.5px; font-weight:800; color:var(--ink); min-width:22px; text-align:right;}
.chip{display:inline-block; font-size:11px; font-weight:600; padding:3px 10px; border-radius:99px;
  background:rgba(var(--accent-rgb),.12); color:var(--accent); border:1px solid rgba(var(--accent-rgb),.28); margin:1px 2px; white-space:nowrap;}
[data-theme="dark"] .chip{color:var(--accent);}
.btn-icon{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:10px; border:1px solid var(--line); background:var(--glass); color:var(--accent);
  font-size:15px; cursor:pointer; transition:all .15s ease;}
.btn-icon:hover{box-shadow:var(--glow); transform:translateY(-1px);}
.btn-icon:disabled{opacity:.5; cursor:wait; transform:none;}
.intel-panel{margin-top:14px; padding:14px 16px; border-radius:var(--r-lg); border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.07), rgba(var(--accent-rgb),.03));}
.intel-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px 14px; margin-bottom:10px;}
.intel-grid .k, .intel-row .k{display:block; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:3px;}
.intel-row{padding:7px 0; border-top:1px dashed var(--line); font-size:13px; color:var(--body);}
.intel-row:first-of-type{border-top:none;}
@media (max-width:1100px){ .intel-tbl{font-size:12.5px;} .score-wrap{min-width:90px;} }

/* ---- Webchat appearance editor (Connectors > Webchat) ---- */
.wc-appear { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.wc-controls { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wc-lab { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink, #23232e); }
.wc-in { border: 1.5px solid var(--line, #e4e4ef); border-radius: 12px; padding: 9px 13px; font-size: 13.5px; font-weight: 400; background: var(--card, #fff); color: inherit; outline: none; width: 100%; }
.wc-in:focus { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124,92,255,.14); }
.wc-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.wc-opt { min-width: 38px; height: 38px; border-radius: 12px; border: 1.5px solid var(--line, #e4e4ef); background: var(--card, #fff); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 10px; transition: all .15s; }
.wc-opt b { font-size: 17px; color: #7c5cff; }
.wc-opt.wc-wide { font-size: 13px; font-weight: 600; height: 38px; color: inherit; flex: 1; }
#wc-pos.wc-pick { display: grid; grid-template-columns: 1fr 1fr; }
.wc-opt:hover { transform: translateY(-1px); }
.wc-opt.sel { border-color: #7c5cff; box-shadow: 0 0 0 3px rgba(124,92,255,.16); background: rgba(124,92,255,.07); }
.wc-swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(0,0,0,.08); cursor: pointer; transition: transform .15s; }
.wc-swatch:hover { transform: scale(1.1); }
.wc-swatch.sel { border-color: #fff; box-shadow: 0 0 0 2.5px #7c5cff; }
.wc-colorrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.wc-colorrow input[type=color] { width: 44px; height: 34px; border: 1.5px solid var(--line, #e4e4ef); border-radius: 10px; padding: 2px; background: var(--card, #fff); cursor: pointer; }
/* live preview mock */
.wc-previewwrap { display: flex; flex-direction: row; gap: 12px; align-items: flex-end; justify-content: center; background: rgba(20,20,50,.035); border-radius: 18px; padding: 14px; }
.wc-pv { width: 220px; border-radius: 20px; overflow: hidden; background: rgba(255,255,255,.9); border: 1px solid rgba(20,20,50,.08); box-shadow: 0 18px 44px rgba(25,25,60,.14); backdrop-filter: blur(12px); }
.wc-pv-head { display: flex; gap: 9px; align-items: center; padding: 11px 12px; border-bottom: 1px solid rgba(20,20,50,.06); }
.wc-pv-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; overflow: hidden; background: #efeaff; color: #7c5cff; }
.wc-pv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.wc-pv-ht { min-width: 0; }
.wc-pv-ht b { display: block; font-size: 12.5px; color: #17171f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-pv-ht span { font-size: 10px; color: #8b8b98; }
.wc-pv-msgs { padding: 10px; display: flex; flex-direction: column; gap: 6px; background: rgba(246,247,250,.6); }
.wc-pv-in, .wc-pv-out { font-size: 11px; line-height: 1.45; padding: 7px 10px; border-radius: 13px; max-width: 85%; word-break: break-word; }
.wc-pv-in { background: #fff; border: 1px solid rgba(20,20,50,.05); color: #23232e; border-bottom-left-radius: 4px; align-self: flex-start; }
.wc-pv-out { background: #7c5cff; color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.wc-pv-input { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid rgba(20,20,50,.06); }
.wc-pv-input span { flex: 1; font-size: 10.5px; color: #a2a2b0; background: rgba(20,20,50,.05); border-radius: 14px; padding: 7px 10px; }
.wc-pv-input i { width: 28px; height: 28px; border-radius: 50%; background: #7c5cff; color: #fff; font-style: normal; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wc-pv-bubwrap { display: flex; justify-content: flex-end; }

/* ── Settings: Knowledge Base ─────────────────────────── */
.kb-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.kb-preset { background: var(--card, #fff); border: 1.5px solid var(--line, #e7e7f2); border-radius: 16px; padding: 14px 15px; display: flex; flex-direction: column; gap: 8px; }
.kb-preset .ttl { font-weight: 800; color: var(--ink); font-size: 14px; }
.kb-preset .cnt { font-size: 12.5px; line-height: 1.5; flex: 1; }
.kb-preset .mini-btn { align-self: flex-start; }
.kb-prog { height: 10px; border-radius: 99px; background: rgba(120,120,180,.15); overflow: hidden; }
.kb-prog-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #7c5cff, #a78bff); transition: width .4s; }
.kb-job { background: var(--card, #fff); border: 1.5px solid var(--line, #e7e7f2); border-radius: 16px; padding: 13px 15px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.kb-job .row { display: flex; }
.kb-pages { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.kb-page { background: rgba(120,120,180,.06); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.kb-page-top { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.kb-page-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-page-url { word-break: break-all; font-size: 11.5px; }
.doc-card { background: var(--card, #fff); border: 1.5px solid var(--line, #e7e7f2); border-radius: 16px; padding: 14px 15px; margin-bottom: 10px; }
.doc-card .ttl { font-weight: 800; color: var(--ink); font-size: 14px; }
.doc-card .cnt { font-size: 13px; line-height: 1.55; color: var(--ink); opacity: .85; white-space: pre-wrap; margin: 8px 0 10px; max-height: 120px; overflow: hidden; }
.doc-card .row { display: flex; gap: 8px; }

.wc-pv-bubble { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid rgba(20,20,50,.06); box-shadow: 0 10px 26px rgba(25,25,60,.16); display: flex; align-items: center; justify-content: center; }
.wc-pv-bubble svg { width: 22px; height: 22px; fill: #7c5cff; }

/* Setup checklist (Settings top) */
.setup-steps { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.setup-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); border: 1px solid var(--border); }
.setup-step.done { opacity: .75; }
.setup-step.done b { text-decoration: line-through; text-decoration-thickness: 1px; }
.setup-check { width: 28px; height: 28px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; background: var(--bg); border: 1.5px solid var(--border); color: var(--muted); }
.setup-step.done .setup-check { background: #16a34a; border-color: #16a34a; color: #fff; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
@media (max-width: 640px) {
  .setup-step { flex-wrap: wrap; }
  .setup-step .btn-sm { width: 100%; }
}

/* ═══ Inbox v2 — premium redesign (taste skill: motivated motion, emotional UX) ═══ */

/* Message grouping: consecutive same-direction messages cluster tighter */
.msg-row.grouped{margin-top:-7px;}
.msg-row.grouped .bubble{border-top-left-radius:9px;}
.msg-row.out.grouped .bubble{border-top-right-radius:9px;}

/* Premium bubbles */
.bubble{transition:transform .18s var(--ease), box-shadow .18s var(--ease);}
.bubble-in{background:linear-gradient(180deg, var(--card-solid), var(--card2)); border:1px solid var(--line);}
.msg-row:not(.out) .bubble:hover{transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.1);}
.bubble .txt{white-space:pre-wrap; overflow-wrap:anywhere;}
.bubble .ts{font-variant-numeric:tabular-nums;}

/* Pending (optimistic) message */
.msg-row.pending .bubble{opacity:.72;}
.msg-row.pending .bubble::after{content:""; display:block; width:34px; height:3px; border-radius:99px; margin-top:7px; margin-left:auto;
  background:linear-gradient(90deg, rgba(255,255,255,.35) 25%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.35) 75%);
  background-size:200% 100%; animation:sk-shimmer 1.1s linear infinite;}

/* Floating day pills */
.day-div{position:sticky; top:8px; z-index:2; margin:14px 0 12px;}
.day-div::before,.day-div::after{display:none;}
.day-div span{background:var(--card-solid); border:1px solid var(--line); color:var(--muted); font-size:11px; font-weight:700;
  padding:5px 14px; border-radius:999px; box-shadow:0 4px 14px rgba(0,0,0,.08); backdrop-filter:blur(8px); letter-spacing:.04em;}

/* AI thinking indicator — "she is typing…" warmth */
.typing-row{display:flex; align-items:flex-end; gap:8px; animation:msg-in .25s var(--ease);}
.typing-bubble{background:var(--card-solid); border:1px solid var(--line); border-radius:17px 17px 17px 6px; padding:13px 17px;
  display:flex; gap:5px; align-items:center; box-shadow:0 2px 10px rgba(0,0,0,.08);}
.typing-bubble i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:tp-bounce 1.2s infinite;}
.typing-bubble i:nth-child(2){animation-delay:.15s;} .typing-bubble i:nth-child(3){animation-delay:.3s;}
@keyframes tp-bounce{0%,60%,100%{transform:none; opacity:.45;} 30%{transform:translateY(-5px); opacity:1;}}
.typing-label{font-size:11.5px; color:var(--muted); font-weight:600;}

/* Composer v2 */
.composer .send-row{display:flex; gap:10px; align-items:flex-end;}
#msg-input{flex:1; resize:none; max-height:130px; min-height:44px; border-radius:22px; padding:12px 18px; line-height:1.45;
  transition:border-color .18s, box-shadow .18s;}
#msg-input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.16);}
#btn-send{width:44px; height:44px; border-radius:50%; padding:0; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .16s var(--ease), box-shadow .2s, opacity .2s, background .2s;}
#btn-send:not(:disabled):hover{transform:translateY(-2px) scale(1.04); box-shadow:0 8px 20px rgba(var(--accent-rgb),.5);}
#btn-send:not(:disabled):active{transform:scale(.92);}
#btn-send:disabled{opacity:.35; filter:grayscale(.4);}
#btn-send svg{transition:transform .2s var(--ease);}
#btn-send:not(:disabled):hover svg{transform:translateX(1px) translateY(-1px);}

/* Quick replies: pill row */
.quick{display:flex; gap:8px; margin-bottom:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none;}
.quick::-webkit-scrollbar{display:none;}
.quick button{flex-shrink:0; border:1px solid var(--input-border); background:var(--card-solid); color:var(--ink);
  border-radius:999px; padding:8px 15px; font-size:12.5px; font-weight:700; cursor:pointer;
  transition:all .18s var(--ease); white-space:nowrap;}
.quick button:hover:not(:disabled){border-color:var(--accent); color:var(--accent); transform:translateY(-2px); box-shadow:0 6px 14px rgba(var(--accent-rgb),.22);}
.quick button:active:not(:disabled){transform:scale(.95);}
.quick button:disabled{opacity:.4; cursor:default;}

/* Warm empty states */
.warm-empty{text-align:center; padding:60px 30px; display:flex; flex-direction:column; align-items:center; gap:10px; animation:conv-in .45s var(--ease);}
.warm-empty .we-ic{width:76px; height:76px; border-radius:28px; display:flex; align-items:center; justify-content:center; font-size:34px;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.06)); border:1px solid rgba(var(--accent-rgb),.22);
  box-shadow:0 12px 30px rgba(var(--accent-rgb),.18), inset 0 1px 0 rgba(255,255,255,.4);}
.warm-empty b{font-size:16.5px; color:var(--ink); letter-spacing:-.01em;}
.warm-empty p{font-size:13.5px; color:var(--muted); line-height:1.6; max-width:300px; margin:0;}

/* Needs-human warm banner */
.human-banner{display:flex; align-items:center; gap:10px; margin:0 18px; padding:10px 14px; border-radius:14px;
  background:linear-gradient(135deg, rgba(245,158,11,.14), rgba(249,115,22,.08)); border:1px solid rgba(245,158,11,.35);
  font-size:12.5px; font-weight:600; color:var(--ink); animation:head-drop .3s var(--ease);}
.human-banner .dot{width:9px; height:9px; border-radius:50%; background:#f59e0b; flex-shrink:0; animation:tp-bounce 1.6s infinite;}

/* Customer hero card (detail panel) */
.cust-hero{display:flex; flex-direction:column; align-items:center; text-align:center; padding:22px 16px 18px; margin-bottom:14px;
  border-radius:20px; background:linear-gradient(160deg, rgba(var(--accent-rgb),.1), rgba(var(--accent-rgb),.04) 60%, transparent);
  border:1px solid rgba(var(--accent-rgb),.2); position:relative; overflow:hidden;}
.cust-hero::before{content:""; position:absolute; inset:0; background:radial-gradient(420px 160px at 50% -40px, rgba(var(--accent-rgb),.22), transparent 70%); pointer-events:none;}
.cust-hero .conv-avatar{width:72px; height:72px; font-size:24px; margin-bottom:10px;}
.cust-hero .nm{font-weight:800; font-size:17px; color:var(--ink); letter-spacing:-.02em;}
.cust-hero .sub{font-size:12.5px; color:var(--muted); margin-top:3px;}
.score-ring{position:relative; width:64px; height:64px; margin-top:12px;}
.score-ring svg{transform:rotate(-90deg);}
.score-ring .sc-val{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:var(--ink);}
.score-ring .sc-lb{font-size:10px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-top:2px; text-align:center;}

/* Conv list: typing preview shimmer */
.conv-prev.typing{color:var(--accent); font-weight:700;}
.conv-prev.typing::after{content:"…"; animation:tp-bounce 1.2s infinite; display:inline-block;}

/* Toast (replaces alert()) */
.toast-wrap{position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
.toast{background:rgba(20,20,35,.92); color:#fff; font-size:13.5px; font-weight:600; padding:12px 20px; border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.3); backdrop-filter:blur(10px); animation:toast-in .3s var(--ease); max-width:min(90vw,420px); text-align:center;}
.toast.err{background:rgba(153,27,27,.94);}
.toast.ok{background:rgba(20,83,45,.94);}
@keyframes toast-in{from{opacity:0; transform:translateY(14px) scale(.96);} to{opacity:1; transform:none;}}

/* Long-list perf */
.conv-item{content-visibility:auto; contain-intrinsic-size:auto 76px;}

/* Reduced motion: everything calms down (mandatory) */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  .typing-bubble i,.human-banner .dot{animation:none !important; opacity:.7;}
}

/* ══════════════════════════════════════════════════════════════
   APPLE LAYER — translucent materials, spring motion, SF type
   (Emil Kowalski apple-design skill: response, materials, craft)
   ══════════════════════════════════════════════════════════════ */

/* 1. Press physics — feedback on pointer-DOWN, instant (Apple §1).
   Critically-damped: quick settle, zero overshoot. */
.btn-primary,.btn-soft,.fchip,.quick button,.icon-btn,.nav-link,.side-tab,.conv-item{
  -webkit-tap-highlight-color:transparent;
}
.btn-primary:active,.btn-soft:active,.fchip:active,.quick button:active:not(:disabled),
.icon-btn:active,.nav-link:active,.side-tab:active{
  transform:scale(.965) !important;
  transition:transform 100ms ease-out !important;
}

/* 2. Typography — SF optical sizing; tracking is size-specific (Apple §15) */
h1,.h-display{font-family:var(--font-display); letter-spacing:-.028em; line-height:1.06; font-optical-sizing:auto;}
h2{letter-spacing:-.022em; line-height:1.12;}
h3{letter-spacing:-.016em; line-height:1.2;}
body{font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.small,.muted{letter-spacing:.01em;} /* small text: slight positive tracking for legibility */

/* 3. Materials — chrome floats, bright edge catches the light (Apple §12) */
.topnav{
  background:var(--material-bar-dark);
  backdrop-filter:blur(22px) saturate(1.8); -webkit-backdrop-filter:blur(22px) saturate(1.8);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 28px rgba(0,0,0,.18);
}
[data-theme="light"] .topnav{
  background:var(--material-bar);
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 var(--material-edge), 0 8px 28px rgba(35,70,130,.1);
}
/* Scroll edge effect: soft blur mask where content meets chrome (not a hard divider) */
.chat-head,.pane-head{
  -webkit-mask-image:linear-gradient(180deg,#000 92%,transparent);
  mask-image:linear-gradient(180deg,#000 92%,transparent);
}

/* 4. Focus — Apple-style ring, visible for keyboard (a11y, non-optional) */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}
.input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18);}

/* 5. Buttons — Apple restraint: one accent, luminous, physical */
.btn-primary{
  font-weight:700; letter-spacing:-.01em;
  box-shadow:0 8px 22px rgba(var(--accent-rgb),.38), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.12);
  transition:transform .18s var(--ease-spring), box-shadow .22s, filter .2s;
}
.btn-primary:hover:not(:disabled){filter:brightness(1.07); box-shadow:0 12px 28px rgba(var(--accent-rgb),.48), inset 0 1px 0 rgba(255,255,255,.32);}
.btn-soft{
  transition:transform .18s var(--ease-spring), background .2s, border-color .2s;
}
.btn-soft:hover{transform:translateY(-1px);}

/* 6. Inputs — quiet surfaces, confident focus */
.input{
  transition:border-color .2s, box-shadow .22s var(--ease-spring), background .2s;
}
.input:hover:not(:disabled):not(:focus){border-color:color-mix(in srgb, var(--accent) 40%, var(--input-border));}

/* 7. Login — Apple-premium: material card, calm hierarchy, deliberate type */
.login-card{
  background:linear-gradient(var(--card),var(--card)) padding-box, var(--card-border) border-box;
  border:1.5px solid transparent;
  backdrop-filter:blur(28px) saturate(1.6); -webkit-backdrop-filter:blur(28px) saturate(1.6);
  box-shadow:var(--top-hi), 0 32px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
}
.login-card h1{font-family:var(--font-display); font-size:34px;}
.login-logo{
  box-shadow:0 14px 34px rgba(var(--accent-rgb),.5), inset 0 2px 0 rgba(255,255,255,.4), inset 0 -2px 6px rgba(0,0,0,.18);
}
#login-btn{height:50px; font-size:15.5px; border-radius:15px;}
.login-card .input{height:50px; border-radius:14px; font-size:15px;}

/* 8. Nav links — pill indicator glides (spatial consistency, Apple §7) */
.nav-link{position:relative; transition:color .2s, background .25s var(--ease-spring), transform .15s;}
.nav-link.active{background:var(--active); color:var(--ink);}
.nav-link.active::after{
  content:""; position:absolute; left:50%; bottom:6px; transform:translateX(-50%);
  width:18px; height:3px; border-radius:99px; background:var(--accent-grad);
  box-shadow:0 0 10px rgba(var(--accent-rgb),.6);
}

/* 9. Cards — depth with restraint: tinted shadows, single light source */
.card,.pane,.doc-card{
  box-shadow:var(--top-hi), 0 18px 46px rgba(15,20,40,.16);
}

/* 10. View transitions — materialize, don't just fade (Apple §12) */
.page{animation:page-in .38s var(--ease-spring);}
@keyframes page-in{from{opacity:0; transform:translateY(10px) scale(.995);} to{opacity:1; transform:none;}}

/* 11. Toggles & switches — iOS-style immediacy */
.switch .sl{transition:background .22s var(--ease-spring);}
.switch input:checked + .sl{background:var(--accent-grad);}

/* 12. Reduced transparency + contrast (Apple §14 — all three signals) */
@media (prefers-reduced-transparency: reduce){
  .topnav,.pane,.login-card,.typing-bubble{backdrop-filter:none !important; -webkit-backdrop-filter:none !important;}
  .topnav{background:var(--card-solid) !important;}
}
@media (prefers-contrast: more){
  .topnav,.pane,.card{border:1.5px solid var(--ink) !important;}
  .btn-primary{box-shadow:none !important;}
}

/* Markdown-lite inside bubbles */
.bubble .txt .md-li{display:block; padding-left:16px; position:relative; margin:2px 0;}
.bubble .txt .md-li::before{content:"•"; position:absolute; left:4px; opacity:.7;}
.bubble .txt b{font-weight:800;}

/* ═══ Admin panel — Apple premium ═══ */
#view-admin .page-head h2{font-size:32px;}
#view-admin .stat-card{
  border-radius:20px; padding:22px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
#view-admin .stat-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
#view-admin .stat-card .num{font-size:32px; font-weight:800;}
.stat-ic{position:relative; overflow:hidden;}
.stat-ic::after{content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 55%);}
/* per-stat accent washes */
#view-admin .stat-card:nth-child(1) .stat-ic{background:linear-gradient(135deg,#3f3f46,#09090b);}
#view-admin .stat-card:nth-child(2) .stat-ic{background:linear-gradient(135deg,#a1a1aa,#52525b);}
#view-admin .stat-card:nth-child(3) .stat-ic{background:linear-gradient(135deg,#71717a,#3f3f46);}
#view-admin .stat-card:nth-child(4) .stat-ic{background:linear-gradient(135deg,#10b981,#059669);}
#view-admin .stat-card:nth-child(5) .stat-ic{background:linear-gradient(135deg,#f59e0b,#ef4444);}

/* user cards → identity cards with avatar */
#view-admin .user-card{border-radius:20px; padding:22px; position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
#view-admin .user-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
#view-admin .user-card .nm{font-size:16px;}
.admin-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:800; color:#fff; letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.35);
}
#view-admin .user-card .top{display:flex; align-items:center; gap:13px; margin-bottom:4px;}

/* resources table */
#view-admin .tbl-card{border-radius:20px;}
#view-admin table.tbl th{padding:14px 22px; font-size:10px; letter-spacing:.09em;}
#view-admin table.tbl td{padding:15px 22px;}
#view-admin table.tbl tbody tr{transition:background .15s var(--ease);}
#view-admin table.tbl tbody tr:hover td{background:var(--hover);}

/* audit log */
#view-admin #audit-list{border-radius:20px; overflow:hidden;}
#view-admin .audit-row{padding:14px 24px;}
#view-admin .audit-row .ev{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px;
  background:var(--hover); border:1px solid var(--line);
  padding:3px 10px; border-radius:8px;
}

/* config cards */
#view-admin .cfg-grid .card{border-radius:20px; padding:26px;}
#view-admin .cfg-grid .card > div:first-child{font-size:17px !important; letter-spacing:-.01em;}

/* admin segmented tabs — floating control */
#view-admin #admin-tabs{margin-bottom:22px;}

/* ═══════════════════════════════════════════════════════════════════
   DESIGN SYSTEM v2 — Professional Enterprise Foundation
   Density, precision, and craft for a business-grade platform.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Professional type scale */
  --text-xs:11px; --text-sm:12.5px; --text-base:13.5px; --text-md:15px;
  --text-lg:17px; --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:36px;
  /* Professional spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  /* Touch targets */
  --touch:44px;
  /* Professional radii */
  --r-xs:6px; --r-sm:8px;
}

/* ── Professional data density ── */
.page{max-width:1280px;}
.page-narrow{max-width:880px;}

/* ── Enterprise section headers ── */
.sec-head{display:flex; align-items:center; gap:12px; margin:0 0 16px;}
.sec-head h3{font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin:0;}
.sec-head .count{
  font-size:11px; font-weight:700; color:var(--muted);
  background:var(--hover); border:1px solid var(--line);
  padding:2px 9px; border-radius:99px; font-variant-numeric:tabular-nums;
}
.sec-head .spacer{flex:1;}

/* ── Professional empty states ── */
.empty{
  text-align:center; padding:56px 24px; color:var(--muted);
}
.empty .empty-ic{
  width:56px; height:56px; border-radius:18px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--hover); border:1px solid var(--line); color:var(--muted);
}
.empty h4{font-size:15px; font-weight:700; color:var(--ink); margin:0 0 6px; letter-spacing:-.01em;}
.empty p{font-size:13px; margin:0 0 16px; max-width:380px; margin-left:auto; margin-right:auto; line-height:1.6;}

/* ── Professional loading skeletons ── */
.sk{position:relative; overflow:hidden; background:var(--hover); border-radius:8px;}
.sk::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);
  animation:sksh 1.4s infinite;}
[data-theme="dark"] .sk::after{background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.08) 50%,transparent 80%);}
@keyframes sksh{from{transform:translateX(-100%);}to{transform:translateX(100%);}}

/* ── Professional form rows ── */
.frow label{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:7px; letter-spacing:.01em;}
.frow .hint{font-size:12px; color:var(--muted); margin-top:6px; line-height:1.5;}
.frow .err{font-size:12px; color:var(--red); margin-top:6px; font-weight:600;}
.input.err{border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.12);}

/* ── Professional badges ── */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 10px; border-radius:99px;
  background:var(--hover); border:1px solid var(--line); color:var(--muted);
  white-space:nowrap;
}

/* ── Professional dividers ── */
.divider{height:1px; background:var(--line); margin:20px 0; border:none;}

/* ── Touch targets (44px min) ── */
@media (pointer:coarse){
  .btn-primary,.btn-soft,.btn-ghost,.btn-danger-soft{min-height:44px;}
  .nav-link,.btab{min-height:44px;}
  .icon-btn{width:44px; height:44px;}
}

/* ── Professional focus visibility ── */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}

/* ── Reduced motion respect ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ═══ Command palette (Cmd+K) ═══ */
.cmdk{
  width:620px; max-width:calc(100vw - 40px);
  background:var(--card); border:1px solid var(--line-hi);
  border-radius:20px; overflow:hidden;
  box-shadow:var(--shadow-lg), 0 24px 80px rgba(0,0,0,.35);
  animation:cmdkIn .22s var(--ease-spring);
}
@keyframes cmdkIn{from{opacity:0; transform:translateY(-12px) scale(.98);}to{opacity:1; transform:none;}}
.cmdk-input-wrap{
  display:flex; align-items:center; gap:12px; padding:18px 20px;
  border-bottom:1px solid var(--line); color:var(--muted);
}
.cmdk-input-wrap input{
  flex:1; border:none; background:none; outline:none;
  font-size:16px; color:var(--ink); font-family:var(--font);
}
.cmdk-input-wrap input::placeholder{color:var(--muted);}
.cmdk-input-wrap kbd, .cmdk-foot kbd{
  font-family:var(--font); font-size:11px; font-weight:600; color:var(--muted);
  background:var(--hover); border:1px solid var(--line); border-bottom-width:2px;
  padding:2px 7px; border-radius:6px;
}
.cmdk-list{max-height:340px; overflow-y:auto; padding:8px;}
.cmdk-item{
  display:flex; align-items:center; gap:13px; padding:11px 13px;
  border-radius:12px; cursor:pointer; font-size:14px; color:var(--body);
  transition:background .12s var(--ease);
}
.cmdk-item .ci-ic{
  width:34px; height:34px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--hover); border:1px solid var(--line); color:var(--muted);
}
.cmdk-item .ci-tx b{display:block; font-weight:600; color:var(--ink); font-size:13.5px;}
.cmdk-item .ci-tx span{font-size:12px; color:var(--muted);}
.cmdk-item.sel{background:var(--active);}
.cmdk-item.sel .ci-ic{background:var(--accent-grad); border-color:transparent; color:var(--on-accent);}
.cmdk-foot{
  display:flex; align-items:center; gap:16px; padding:12px 20px;
  border-top:1px solid var(--line); font-size:12px; color:var(--muted);
}
.cmdk-empty{padding:32px; text-align:center; color:var(--muted); font-size:13.5px;}

/* ═══ Lead detail drawer ═══ */
.modal.lead-drawer{width:640px; max-width:calc(100vw - 40px); padding:0; overflow:hidden;}
.lead-hero{
  display:flex; align-items:center; gap:18px; padding:26px 28px;
  background:linear-gradient(135deg, var(--hover), transparent);
  border-bottom:1px solid var(--line);
}
.lead-hero .lh-avatar{
  width:64px; height:64px; border-radius:22px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.lead-hero .lh-name{font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink);}
.lead-hero .lh-sub{font-size:12.5px; color:var(--muted); margin-top:3px;}
.lead-hero .lh-pills{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.lead-hero .lh-score{margin-left:auto; text-align:center; flex-shrink:0;}
#lead-modal .seg{margin:18px 28px 0;}
#lm-tab-intel, #lm-tab-details{padding:18px 28px; max-height:50vh; overflow-y:auto;}
#lead-modal .modal-foot{padding:18px 28px; border-top:1px solid var(--line); margin:0;}

/* ═══ Professional mobile patterns ═══ */

/* Bottom-sheet modals on phones */
@media (max-width:640px){
  .modal-bg{align-items:flex-end; padding:0;}
  .modal{
    width:100% !important; max-width:100% !important;
    border-radius:24px 24px 0 0 !important;
    max-height:92vh; overflow-y:auto;
    animation:sheetUp .32s var(--ease-spring);
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  @keyframes sheetUp{from{transform:translateY(60px); opacity:0;}to{transform:none; opacity:1;}}
  .modal.lead-drawer .lead-hero{padding:20px;}
  #lm-tab-intel, #lm-tab-details{padding:14px 20px;}
  #lead-modal .seg{margin:14px 20px 0;}
  #lead-modal .modal-foot{padding:14px 20px;}
  .cmdk{border-radius:20px 20px 0 0;}
  #cmdk-bg{align-items:flex-end !important; padding-top:0 !important;}
}

/* Safe areas */
.topnav{padding-left:calc(20px + env(safe-area-inset-left)); padding-right:calc(20px + env(safe-area-inset-right));}
.page{padding-bottom:calc(28px + env(safe-area-inset-bottom));}

/* Tables → cards on small phones */
@media (max-width:640px){
  table.tbl thead{display:none;}
  table.tbl, table.tbl tbody, table.tbl tr{display:block;}
  table.tbl tr{
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    margin-bottom:10px; padding:6px 4px;
  }
  table.tbl td{
    display:flex; justify-content:space-between; align-items:center;
    border:none; padding:9px 16px; gap:12px;
  }
  table.tbl td::before{
    content:attr(data-label); font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
    flex-shrink:0;
  }
  table.tbl td:empty{display:none;}
  .tbl-card{background:none; border:none; box-shadow:none;}
}

/* ═══ Shortcuts help ═══ */
.shortcuts-list{display:flex; flex-direction:column; gap:4px; margin:8px 0 4px;}
.sc-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-radius:12px; font-size:13.5px; color:var(--body);
  transition:background .15s var(--ease);
}
.sc-row:hover{background:var(--hover);}
.sc-row span:first-child{font-weight:500;}
.sc-row kbd{
  font-family:var(--font); font-size:11px; font-weight:600; color:var(--muted);
  background:var(--hover); border:1px solid var(--line); border-bottom-width:2px;
  padding:3px 8px; border-radius:6px; margin-left:4px;
}

/* ═══ Products — professional polish ═══ */
.prod-card{
  position:relative; overflow:hidden;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.prod-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.prod-card .nm{line-height:1.3;}
.prod-card .stock-low{color:var(--amber); font-weight:700;}
.prod-card .stock-out{color:var(--red); font-weight:700;}
.prod-card .stock-ok{color:var(--green);}

/* ═══ Connectors — professional polish ═══ */
.chan-card{transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.chan-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}

/* ═══ Offline banner ═══ */
#offline-banner{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:#b45309; color:#fff; font-size:13px; font-weight:600;
  padding:10px 16px;
  animation:slideDown .3s var(--ease);
}
#offline-banner.hidden{display:none;}
@keyframes slideDown{from{transform:translateY(-100%);}to{transform:none;}}

/* Payment settings form */
.frm-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.frm-grid label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--ink);}
.frm-grid input,.frm-grid textarea,#payment-card input,#payment-card textarea{background:var(--hover);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;color:var(--ink);font-family:inherit;}
.frm-grid input:focus,#payment-card input:focus,#payment-card textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);}
@media(max-width:600px){.frm-grid{grid-template-columns:1fr;}}

/* ── Tectobox brand pill ── */
.brand-pill{ display:block; border-radius:999px; }
[data-theme="dark"] .brand-pill{ filter:invert(1); }

/* ── login brand box ── */
.login-brand-box{
  margin-top:20px; padding:11px 14px; text-align:center;
  font-size:12.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:12px; background:var(--hover);
}
.login-brand-box a{ color:var(--ink); font-weight:700; text-decoration:none; }
.login-brand-box a:hover{ text-decoration:underline; }
/* ── explicit LTR guard ── */
html{ direction:ltr; }

/* ── mobile adaptive: workspace/admin (no-scroll option access) ── */
@media(max-width:900px){
  .seg{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .seg button{ flex:0 0 auto; padding:8px 14px; font-size:12.5px; }
  #view-admin .stat-grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
  #view-admin .stat-card{ padding:12px 10px; gap:9px; flex-direction:column; align-items:flex-start; }
  #view-admin .stat-card .num{ font-size:20px; }
  #view-admin .stat-card .lbl{ font-size:10px; margin-bottom:2px; }
  .stat-ic{ width:34px; height:34px; border-radius:11px; font-size:16px; }
  .chan-card{ padding:16px; }
  .page-head{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
  .toolbar{ display:flex; flex-wrap:wrap; }
}
@media(max-width:900px){
  /* inbox filter chips: horizontal scroll, all visible */
  .chip-row{ display:flex; overflow-x:auto; gap:8px; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
  .chip-row .chip{ flex:0 0 auto; }
}

/* ── topnav center title (mobile) ── */
.topnav-title{ display:none; }
@media(max-width:900px){
  .topnav-title{
    display:block; flex:1; text-align:center;
    font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 8px;
  }
}

/* ═══ micro-interactions — taste layer (Emil Kowalski gate: feedback/subtle only) ═══ */
/* 1. press feedback — every pressable */
.btn-primary,.btn-soft,.btn-ghost,.btn-danger-soft,.mini-btn,.add-acct,
.chip,.fchip,.seg button,.btab,.icon-btn,.btn-icon,.side-tab,.nav-link,.theme-toggle{
  transition:transform 160ms var(--ease-out);
}
.btn-primary:active,.btn-soft:active,.btn-ghost:active,.btn-danger-soft:active,
.mini-btn:active,.add-acct:active,.chip:active,.fchip:active,.seg button:active,
.btab:active,.icon-btn:active,.btn-icon:active,.side-tab:active,.nav-link:active,
.theme-toggle:active{
  transform:scale(.96);
}
/* 2. view-switch — prevent teleport (subtle, 180ms) */
@keyframes view-enter{from{opacity:0; transform:translateY(7px);} to{opacity:1; transform:none;}}
.view-enter{animation:view-enter 180ms var(--ease-out);}
/* 4. stat-grid stagger — decorative, occasional view */
.stat-grid .stat-card{animation:fadeIn .32s var(--ease-out) backwards;}
.stat-grid .stat-card:nth-child(2){animation-delay:45ms;}
.stat-grid .stat-card:nth-child(3){animation-delay:90ms;}
.stat-grid .stat-card:nth-child(4){animation-delay:135ms;}
.stat-grid .stat-card:nth-child(5){animation-delay:180ms;}
.stat-grid .stat-card:nth-child(6){animation-delay:225ms;}
/* reduced motion: keep fades, drop movement */
@media(prefers-reduced-motion:reduce){
  .view-enter{animation:view-enter-fade 180ms ease;}
  @keyframes view-enter-fade{from{opacity:0;} to{opacity:1;}}
  .stat-grid .stat-card{animation:fadeIn .2s ease backwards;}
}

/* ═══ preloader splash — native app boot ═══ */
#preloader{
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  background:#0a0a0b;
  transition:opacity .45s var(--ease-out), visibility .45s;
  pointer-events:none;
}
[data-theme="light"] #preloader{ background:#fafafa; }
#preloader.done{ opacity:0; visibility:hidden; pointer-events:none; display:none !important; }
.preloader-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.preloader-logo{
  width:92px; height:92px; border-radius:24px;
  box-shadow:0 18px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  animation:preloader-breathe 2.2s ease-in-out infinite;
}
@keyframes preloader-breathe{
  0%,100%{ transform:scale(1); box-shadow:0 18px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
  50%{ transform:scale(1.045); box-shadow:0 22px 70px rgba(0,0,0,.5), 0 0 44px rgba(255,255,255,.10), 0 0 0 1px rgba(255,255,255,.12); }
}
.preloader-name{
  font-size:22px; font-weight:800; letter-spacing:-.03em; color:#fafafa;
  animation:preloader-fade 2.2s ease-in-out infinite;
}
[data-theme="light"] .preloader-name{ color:#09090b; }
@keyframes preloader-fade{ 0%,100%{opacity:.85;} 50%{opacity:1;} }
.preloader-bar{
  width:120px; height:3px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.12);
}
[data-theme="light"] .preloader-bar{ background:rgba(0,0,0,.10); }
.preloader-bar span{
  display:block; width:40%; height:100%; border-radius:99px;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  animation:preloader-slide 1.3s var(--ease-in-out) infinite;
}
[data-theme="light"] .preloader-bar span{
  background:linear-gradient(90deg,transparent,#09090b,transparent);
}
@keyframes preloader-slide{
  0%{ transform:translateX(-110%); } 100%{ transform:translateX(310%); }
}
@media(prefers-reduced-motion:reduce){
  .preloader-logo,.preloader-name,.preloader-bar span{ animation-duration:.01ms; }
}

/* ── mobile inbox: true flex fill (no clipped chat list) ── */
@media(max-width:900px){
  .inbox{display:flex; flex-direction:column; height:calc(100dvh - 58px); min-height:430px;}
  .inbox .pane{margin-bottom:0;}
  .inbox .pane.list-pane{max-height:none; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow:hidden;}
  .inbox .pane.list-pane .pane-head{flex-shrink:0;}
  .conv-list{flex:1 1 auto; min-height:0; max-height:none; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:96px;}
  .inbox .pane.chat-pane{min-height:0;}
  .inbox.m-chat-open .pane.chat-pane{flex:1 1 auto; min-height:0; height:auto; display:flex; flex-direction:column;}
}
/* ── topnav logo: never clip ── */
.brand{flex-shrink:0; min-width:0;}
.brand-pill{max-width:132px; object-fit:contain;}

/* ═══ compact inbox toolbar — filter popover · expanding search · human toggle ═══ */
.inbox-toolbar{display:flex; align-items:center; gap:10px; padding:12px 14px; position:relative; z-index:10;}
.inbox-toolbar{-webkit-mask-image:none; mask-image:none; overflow:visible; z-index:30;}
.inbox-toolbar .list-title{flex:1; min-width:0;}
.toolbar-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.toolbar-actions .icon-btn{
  width:38px; height:38px; border-radius:13px; position:relative;
  background:color-mix(in srgb, var(--card-solid) 62%, transparent);
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--line-hi);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
/* filter popover */
.pop-wrap{position:relative;}
.pop{
  position:absolute; top:calc(100% + 8px); right:0; z-index:90; min-width:190px;
  background:var(--card-solid); border:1px solid var(--line-hi); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:6px;
  transform-origin:top right;
  transition:opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.pop.hidden{display:block; opacity:0; transform:scale(.95); pointer-events:none; visibility:hidden;}
.pop-item{
  display:flex; align-items:center; gap:10px; width:100%;
  border:none; background:transparent; cursor:pointer; text-align:left;
  padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--body);
  transition:background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.pop-item:hover{background:var(--hover);}
.pop-item:active{transform:scale(.97);}
.pop-item.active{background:var(--active); color:var(--ink);}
.pop-item .tick{margin-left:auto; color:var(--accent); font-weight:800; opacity:0;}
.pop-item.active .tick{opacity:1;}
.fdir-dot{
  position:absolute; top:7px; right:7px; width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 6px rgba(var(--accent-rgb),.8);
}
/* expanding search */
.search-expand{
  display:flex; align-items:center; gap:0; border-radius:99px;
  transition:background 260ms var(--ease-out), box-shadow 260ms var(--ease-out),
             border-color 260ms var(--ease-out), padding 260ms var(--ease-out);
  border:1px solid transparent;
}
.search-expand .input{
  width:0; min-height:38px; padding:0; border:none; box-shadow:none; background:transparent;
  opacity:0; overflow:hidden; white-space:nowrap; font-size:14px;
  transition:width 300ms var(--ease-spring), opacity 220ms var(--ease-out), padding 300ms var(--ease-spring);
}
.search-expand.open{
  background:color-mix(in srgb, var(--card-solid) 78%, transparent);
  backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-color:var(--line-hi); padding:3px 5px 3px 3px;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(var(--accent-rgb),.10), 0 0 28px rgba(var(--accent-rgb),.14),
             inset 0 1px 0 rgba(255,255,255,.07);
}
.search-expand.open .input{
  width:min(190px, 40vw); opacity:1; padding:0 2px 0 8px;
}
.search-expand.open .input:focus{box-shadow:none; border:none;}
.search-expand.open #btn-search{display:none;}
.search-expand.open #btn-search-close{width:30px; height:30px; border:none; background:transparent; box-shadow:none; backdrop-filter:none;}
/* human toggle — premium icon state */
#btn-human.on{
  background:var(--accent-grad); color:var(--on-accent); border-color:transparent;
  box-shadow:0 4px 14px rgba(var(--accent-rgb),.4);
}

/* ═══ guide / documentation ═══ */
.guide-wrap{max-width:760px; margin:0 auto;}
.guide-card{padding:22px; margin-bottom:16px;}
.guide-head{display:flex; gap:14px; align-items:center; margin-bottom:18px;}
.guide-ic{
  width:44px; height:44px; border-radius:14px; flex-shrink:0;
  background:var(--accent-grad); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(var(--accent-rgb),.35);
}
.guide-title{font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink);}
.guide-steps{display:flex; flex-direction:column;}
.guide-step{display:flex; gap:14px; padding:14px 0; border-top:1px dashed var(--line);}
.guide-step:first-child{border-top:none; padding-top:0;}
.guide-num{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:var(--active); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
}
.guide-body{flex:1; min-width:0;}
.guide-step-t{font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:4px;}
.guide-step-d{font-size:13.5px; color:var(--body); line-height:1.6;}
.guide-img{
  width:100%; border-radius:12px; margin-top:10px;
  border:1px solid var(--line-hi); box-shadow:var(--shadow);
}
.guide-go{margin-top:10px;}

/* ═══ get started checklist ═══ */
/* #get-started is now the onboarding popup card (.gs-card) */
.gs-head{display:flex; align-items:center; gap:14px; margin-bottom:12px;}
.gs-head>div:first-child{flex:1;}
.gs-title{font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--ink);}
.gs-bar{width:90px; height:6px; border-radius:99px; background:var(--hover); overflow:hidden; flex-shrink:0;}
.gs-bar span{display:block; height:100%; border-radius:99px; background:var(--accent-grad); transition:width .5s var(--ease-out);}
.gs-step{
  display:flex; align-items:center; gap:12px; width:100%;
  border:none; background:transparent; cursor:pointer; text-align:left;
  padding:11px 10px; border-radius:12px;
  transition:background 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.gs-step:hover{background:var(--hover);}
.gs-step:active{transform:scale(.98);}
.gs-check{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  background:var(--hover); color:var(--muted);
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800;
}
.gs-step.done .gs-check{background:rgba(22,163,74,.15); color:var(--green);}
.gs-step.done{opacity:.75; cursor:default;}
.gs-tx{flex:1; min-width:0;}
.gs-tx b{display:block; font-size:14px; color:var(--ink);}
.gs-tx small{color:var(--muted); font-size:12.5px;}

/* Get-started onboarding popup */
.gs-overlay{position:fixed; inset:0; z-index:5000; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(15,15,25,.45); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);}
.gs-overlay.hidden{display:none;}
.gs-card{width:400px; max-width:100%; background:var(--card-solid); border:1px solid var(--line-hi);
  border-radius:22px; box-shadow:var(--shadow-lg); padding:22px; position:relative;
  animation:gs-pop .3s var(--ease-out);}
@keyframes gs-pop{from{opacity:0; transform:translateY(14px) scale(.97);}}
.gs-close{position:absolute; top:12px; right:12px; width:32px; height:32px; border:none; background:var(--hover);
  border-radius:50%; color:var(--body); font-size:16px; cursor:pointer; line-height:1;}
.gs-close:hover{background:var(--active);}
.gs-card .gs-head{margin-bottom:12px; padding-right:28px;}

/* guide image step badges */
.guide-img-wrap{position:relative; display:block; margin-top:10px; border-radius:16px; overflow:hidden;
  border:1px solid var(--line-hi); box-shadow:var(--shadow);}
.guide-img{width:100%; display:block; margin:0 !important; border:none !important; border-radius:0 !important; box-shadow:none !important;}
.guide-img-num{position:absolute; top:10px; left:10px; width:30px; height:30px; border-radius:50%;
  background:#111; color:#fff; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.35); border:2px solid #fff;}

/* ═══ LOGIN — platform-native themes ═══ */
/* Android: Material Design 3 */
#login-view[data-platform="android"]{font-family:Roboto,"Segoe UI",system-ui,sans-serif}
#login-view[data-platform="android"] .login-card{border-radius:28px;box-shadow:0 8px 32px rgba(0,0,0,.14)}
#login-view[data-platform="android"] .field label{text-transform:none;letter-spacing:.02em;font-size:12.5px}
#login-view[data-platform="android"] .input{background:rgba(0,0,0,.05);border:none;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;padding:14px 14px 14px 42px}
#login-view[data-platform="android"] .input:focus{border-bottom-color:#16a34a;box-shadow:none;background:rgba(0,0,0,.07)}
#login-view[data-platform="android"] .btn-primary{border-radius:99px;background:#16a34a;box-shadow:0 4px 14px rgba(22,163,74,.35);text-transform:none;letter-spacing:.01em}
#login-view[data-platform="android"] .btn-primary::after{display:none}
[data-theme="dark"] #login-view[data-platform="android"] .input{background:rgba(255,255,255,.07)}
[data-theme="dark"] #login-view[data-platform="android"] .input:focus{background:rgba(255,255,255,.1)}

/* iOS: native iOS */
#login-view[data-platform="ios"]{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
#login-view[data-platform="ios"] .login-card{border-radius:20px;box-shadow:0 12px 44px rgba(0,0,0,.12);border:1px solid rgba(0,0,0,.06)}
#login-view[data-platform="ios"] .field label{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600}
#login-view[data-platform="ios"] .input{background:rgba(120,120,128,.12);border:none;border-radius:12px;padding:13px 14px 13px 42px;-webkit-appearance:none}
#login-view[data-platform="ios"] .input:focus{box-shadow:0 0 0 2px #007aff;background:rgba(120,120,128,.08)}
#login-view[data-platform="ios"] .btn-primary{border-radius:12px;background:#007aff;box-shadow:none;font-weight:600}
#login-view[data-platform="ios"] .btn-primary::after{display:none}
#login-view[data-platform="ios"] .btn-primary:active{filter:brightness(.92);transform:none}

/* Windows: Fluent */
#login-view[data-platform="windows"]{font-family:"Segoe UI",system-ui,sans-serif}
#login-view[data-platform="windows"] .login-card{border-radius:8px;box-shadow:0 12px 40px rgba(0,0,0,.14);border:1px solid rgba(0,0,0,.08)}
#login-view[data-platform="windows"] .field label{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600}
#login-view[data-platform="windows"] .input{border-radius:4px;border:1px solid rgba(0,0,0,.25);border-bottom-width:2px;padding:11px 14px 11px 42px;background:#fff}
#login-view[data-platform="windows"] .input:focus{border-color:#0067c0;box-shadow:none;border-bottom-color:#0067c0}
#login-view[data-platform="windows"] .btn-primary{border-radius:4px;background:#0067c0;box-shadow:none;font-weight:600}
#login-view[data-platform="windows"] .btn-primary::after{display:none}
#login-view[data-platform="windows"] .btn-primary:hover{background:#0f6cbd;transform:none;filter:none}
[data-theme="dark"] #login-view[data-platform="windows"] .input{background:#1b1b1b;border-color:rgba(255,255,255,.25)}

/* Plans & licensing: feature checkbox grid */
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:8px;}
.check{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;background:var(--card);}
.check:hover{border-color:var(--accent);}
.check input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;}
.check span b{display:block;color:var(--ink);font-size:13px;font-weight:700;}
.check span small{display:block;color:var(--muted);font-size:12px;margin-top:2px;line-height:1.35;}

/* ── Admin panel redesign: premium hero + workspace cards + licensing flow ── */
.admin-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:26px 28px;margin-bottom:18px;
  background:linear-gradient(135deg,#0b0d12 0%,#151a24 55%,#1e2536 100%);color:#f2f6fd;
  border:1px solid rgba(255,255,255,.09);box-shadow:var(--shadow);display:flex;gap:24px;align-items:center;flex-wrap:wrap;}
.admin-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 200px at 12% 0%,rgba(255,255,255,.09),transparent 60%),
             radial-gradient(520px 260px at 95% 100%,rgba(120,140,180,.14),transparent 60%);}
.admin-hero-l{position:relative;flex:1;min-width:220px;}
.admin-hero-l h2{font-size:26px;font-weight:800;letter-spacing:-.02em;margin:6px 0 4px;
  background:linear-gradient(100deg,#fff 30%,#c9d4e8 90%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.admin-hero-l p{color:#9fb0c9;font-size:13px;margin:0;}
.admin-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.14em;color:#8fa3c4;}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
.admin-hero-stats{position:relative;display:flex;gap:10px;flex-wrap:wrap;}
.hstat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;
  padding:12px 16px;min-width:104px;backdrop-filter:blur(6px);}
.hstat .lbl{font-size:11px;color:#8fa3c4;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.hstat .num{font-size:22px;font-weight:800;color:#fff;margin-top:2px;font-variant-numeric:tabular-nums;}
.hstat .num.green{color:#4ade80;} .hstat .num.red{color:#f87171;}

/* workspace cards */
.ws-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;}
.ws-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;
  box-shadow:var(--shadow);transition:transform .18s var(--ease),box-shadow .18s var(--ease);position:relative;overflow:hidden;}
.ws-card:hover{transform:translateY(-2px);}
.ws-card.suspended{opacity:.75;}
.ws-card.suspended::after{content:"SUSPENDED";position:absolute;top:14px;right:-32px;transform:rotate(38deg);
  background:var(--red);color:#fff;font-size:10px;font-weight:800;letter-spacing:.12em;padding:4px 36px;}
.ws-top{display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.ws-avatar{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:18px;flex-shrink:0;}
.ws-name{font-weight:800;color:var(--ink);font-size:15px;line-height:1.25;}
.ws-sub{color:var(--muted);font-size:12px;margin-top:2px;}
.ws-pills{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 4px;}
.ws-lic{font-size:12px;color:var(--body);background:var(--card2);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;margin:8px 0;display:flex;justify-content:space-between;align-items:center;gap:8px;}
.ws-lic code{font-family:ui-monospace,monospace;font-weight:700;color:var(--ink);font-size:12px;}
.ws-controls{border-top:1px solid var(--line);margin-top:10px;padding-top:6px;}
.ws-ctl{display:flex;align-items:center;gap:10px;padding:9px 2px;font-size:13px;color:var(--body);}
.ws-ctl b{color:var(--ink);font-weight:700;}
.ws-ctl small{display:block;color:var(--muted);font-size:11px;margin-top:1px;}
.ws-ctl .spacer{flex:1;}
.ws-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}

/* licensing */
.lic-sec{margin-bottom:22px;}
.lic-sec-t{margin-bottom:12px;}
.lic-sec-t h3{font-size:17px;font-weight:800;color:var(--ink);margin:0 0 2px;}
.lic-sec-t p{color:var(--muted);font-size:13px;margin:0;}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-bottom:6px;}
.plan-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px;
  box-shadow:var(--shadow);transition:border-color .15s,transform .15s var(--ease);}
.plan-card:hover{transform:translateY(-2px);}
.plan-card .pn{font-weight:800;color:var(--ink);font-size:15px;margin-bottom:8px;}
.plan-card .prow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;}
.plan-card .pmeta{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.5;}
.plan-card .pdel{margin-top:4px;}
.plan-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:10px 0 4px;}
.plan-pick .plan-card{cursor:pointer;padding:14px;}
.plan-pick .plan-card.sel{border-color:var(--accent);box-shadow:var(--glow);}
.step-lbl{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);font-size:14px;margin:18px 0 4px;}
.step-lbl:first-child{margin-top:4px;}
.step-n{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;}
button.chip{border:1.5px solid var(--line);background:var(--card);color:var(--body);border-radius:var(--r-pill);
  padding:9px 16px;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;font-family:var(--font);}
button.chip:hover{border-color:var(--accent3);}
button.chip.sel{background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
details.customize{margin:16px 0;border:1px dashed var(--line);border-radius:var(--r-md);padding:12px 16px;}
details.customize summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:13px;}
.btn-issue{width:100%;margin-top:14px;padding:14px;font-size:15px;}
.lic-success{background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.3);border-radius:var(--r-md);
  padding:16px;margin-top:14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.lic-success code{font-family:ui-monospace,monospace;font-size:18px;font-weight:800;color:var(--green);letter-spacing:.06em;}
.copy-btn{border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 14px;
  font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;font-family:var(--font);}
.copy-btn:hover{border-color:var(--accent);}
@media(max-width:640px){.admin-hero{padding:20px;} .admin-hero-stats{width:100%;} .hstat{flex:1;min-width:0;}}

/* workspace deletion queue banner */
.ws-del-banner{display:flex;gap:10px;align-items:center;background:rgba(220,38,38,.08);
  border:1px solid rgba(220,38,38,.3);border-radius:var(--r-md);padding:10px 12px;margin-bottom:12px;}
.ws-del-banner svg{color:var(--red);flex-shrink:0;}
.ws-del-banner span{flex:1;min-width:0;}
.ws-del-banner b{display:block;color:var(--red);font-size:13px;}
.ws-del-banner small{display:block;color:var(--muted);font-size:11px;margin-top:1px;}

/* license create: Package | Credit toggle */
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.mode-opt{border:1.5px solid var(--line);background:var(--card);border-radius:var(--r-md);padding:14px 16px;
  cursor:pointer;text-align:left;font-family:var(--font);transition:all .15s;color:var(--body);}
.mode-opt b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px;}
.mode-opt span{font-size:12px;color:var(--muted);line-height:1.4;display:block;}
.mode-opt:hover{border-color:var(--accent3);}
.mode-opt.sel{border-color:var(--accent);background:var(--active);box-shadow:var(--glow);}
.mode-opt.sel b{color:var(--ink);}
@media(max-width:560px){.mode-toggle{grid-template-columns:1fr;}}

/* ═══ Slash command autocomplete popup ═══ */
.composer{position:relative;}
.slash-popup{
  position:absolute; bottom:calc(100% + 8px); left:12px; right:12px;
  background:var(--card-solid); border:1.5px solid var(--line);
  border-radius:14px; box-shadow:0 12px 36px rgba(0,0,0,.25);
  padding:6px; z-index:50; max-height:260px; overflow-y:auto;
  animation:modal-in .18s var(--ease);
}
.slash-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:10px; cursor:pointer; transition:all .12s; border:none;
  background:transparent; width:100%; text-align:left; color:var(--ink);
}
.slash-item:hover, .slash-item.sel{background:var(--active); color:var(--accent);}
.slash-cmd{
  font-family:ui-monospace,monospace; font-weight:700; font-size:13px;
  padding:2px 7px; border-radius:6px; background:var(--hover);
  color:var(--accent); min-width:68px; text-align:center;
}
.slash-desc{flex:1; min-width:0; font-size:12.5px; color:var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.slash-snippet{font-size:11px; color:var(--muted); font-style:italic;}

/* ═══ 4x6" Thermal Shipping Label ═══ */
.thermal-sheet{
  width:100%; max-width:420px; margin:0 auto; background:#fff; color:#000;
  padding:16px; border:2px dashed #333; border-radius:10px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
}
.ts-head{display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2px solid #000; padding-bottom:10px; margin-bottom:12px;}
.ts-store{font-size:18px; font-weight:900; text-transform:uppercase; letter-spacing:-.02em;}
.ts-courier{text-align:right;}
.ts-courier .ts-cname{font-weight:900; font-size:15px; color:#000;}
.ts-barcode{
  margin:12px 0; text-align:center; background:#f4f4f4; padding:10px; border-radius:6px;
  border:1px solid #ddd;
}
.ts-code{font-family:ui-monospace,monospace; font-size:20px; font-weight:900; letter-spacing:4px;}
.ts-recipient{border-bottom:2px solid #000; padding-bottom:12px; margin-bottom:12px;}
.ts-recipient .ts-lbl{font-size:10px; text-transform:uppercase; font-weight:800; color:#555;}
.ts-recipient .ts-name{font-size:16px; font-weight:800;}
.ts-recipient .ts-phone{font-size:15px; font-weight:900; margin:2px 0;}
.ts-recipient .ts-addr{font-size:13.5px; line-height:1.4;}
.ts-cod-box{
  background:#000; color:#fff; padding:10px 14px; border-radius:6px; margin:12px 0;
  display:flex; justify-content:space-between; align-items:center;
}
.ts-cod-box .ts-cod-title{font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase;}
.ts-cod-box .ts-cod-amt{font-size:22px; font-weight:900;}
.ts-items{font-size:12px; line-height:1.5; border-bottom:1px dashed #777; padding-bottom:8px; margin-bottom:8px;}
.ts-foot{display:flex; justify-content:space-between; font-size:10px; color:#444;}

@media print {
  body * { visibility: hidden !important; }
  #thermal-print-area, #thermal-print-area * { visibility: visible !important; }
  #thermal-print-area {
    position: fixed; left: 0; top: 0; width: 100mm; max-width: 100mm;
    margin: 0; padding: 4mm; background: #fff !important; color: #000 !important;
  }
  .thermal-sheet { border: 1px solid #000 !important; box-shadow: none !important; width: 100% !important; max-width: 100% !important; }
  @page { size: 100mm 150mm; margin: 2mm; }
}

/* ═══ MODERN SIDEBAR ARCHITECTURE (Auto-migrated) ═══ */
.app-layout {
  display: flex;
  flex-direction: row;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: var(--bg);
}
.app-layout.hidden {
  display: none !important;
}

.app-sidebar {
  --sidebar-width: 250px;
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  max-width: var(--sidebar-width);
  height: 100vh;
  background: var(--card);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 50;
  user-select: none;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.02);
  transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              min-width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.app-sidebar.is-resizing {
  transition: none !important;
}

/* Sidebar Resizer Handle */
.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 60;
  background: transparent;
  transition: background 0.15s ease;
}

.sidebar-resizer:hover,
.sidebar-resizer.active {
  background: var(--accent);
}

/* Brand Area - Clean, No Capsule */
.sidebar-brand-wrap {
  padding: 14px 14px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-brand-content {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.sidebar-brand-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  object-fit: cover;
}

.sidebar-brand-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-brand-title {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.2;
}

.sidebar-brand-badge {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
  margin-top: 1px;
}

.sidebar-toggle-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.sidebar-toggle-btn:hover {
  background: var(--hover);
  color: var(--ink);
  border-color: var(--line);
}

/* COLLAPSED STATE */
.app-sidebar.collapsed {
  --sidebar-width: 68px !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
}

.app-sidebar.collapsed .sidebar-brand-wrap {
  padding: 12px 6px 10px;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
}

.app-sidebar.collapsed .sidebar-brand-info {
  display: none !important;
}

.app-sidebar.collapsed .sidebar-group-header {
  padding: 8px 0;
  justify-content: center;
}

.app-sidebar.collapsed .sidebar-group-header span,
.app-sidebar.collapsed .cat-dot {
  display: none !important;
}

.app-sidebar.collapsed .sidebar-group-header::after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: var(--line);
}

.app-sidebar.collapsed .nav-link {
  padding: 0;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin: 4px auto;
  border-radius: 14px;
}

.app-sidebar.collapsed .nav-link .nav-text,
.app-sidebar.collapsed .nav-link .nav-active-bar {
  display: none !important;
}

.app-sidebar.collapsed .nav-link .nav-icon-badge {
  width: 34px;
  height: 34px;
  border-radius: 12px;
}

.app-sidebar.collapsed .nav-link.active {
  background: linear-gradient(135deg, #1e293b, #0f172a) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  border-radius: 14px;
}

.sidebar-divider {
  height: 1px;
  background: var(--line);
  margin: 0 14px 10px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 10px 14px;
}

.sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}

.sidebar-group {
  margin-bottom: 12px;
}

.sidebar-group-header {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #64748b;
  text-transform: uppercase;
  padding: 8px 10px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.cat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

.nav-icon-badge {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.nav-icon-badge svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2.2;
}

.app-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: #334155;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  text-align: left;
  outline: none;
  font-family: inherit;
  margin: 2px 0;
}

[data-theme="dark"] .app-sidebar .nav-link {
  color: #cbd5e1;
}

.app-sidebar .nav-link:hover {
  background: var(--hover);
  color: var(--ink);
  transform: translateX(2px);
}

.app-sidebar .nav-link:hover .nav-icon-badge {
  transform: scale(1.08);
  box-shadow: 0 4px 12px currentColor;
}

[data-theme="dark"] .app-sidebar .nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.app-sidebar .nav-active-bar {
  display: none;
}

/* Active item - Ultra modern rounded card */
.app-sidebar .nav-link.active {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98)) !important;
  color: #ffffff !important;
  font-weight: 700;
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  border-radius: 14px;
}

[data-theme="dark"] .app-sidebar .nav-link.active {
  background: linear-gradient(135deg, #1e293b, #0f172a) !important;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.app-sidebar .nav-link.active .nav-icon-badge {
  background: #ffffff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

.app-sidebar .nav-link.active .nav-icon-badge svg {
  stroke: #0f172a !important;
}

.app-sidebar .nav-link.active .nav-active-bar {
  display: block;
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3.5px;
  height: 20px;
  border-radius: 9999px;
  background: #ffffff;
}

/* REDESIGNED MODERN BOTTOM FOOTER */
.sidebar-footer {
  padding: 12px 14px 14px;
  border-top: 1px solid var(--line);
  background: var(--card);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-user-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #4338ca);
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
  position: relative;
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-status {
  font-size: 11px;
  color: #64748b;
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
}

.sidebar-foot-actions {
  display: flex;
  gap: 8px;
}

.sidebar-pill-btn,
.sidebar-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1.5px solid var(--line);
  background: var(--bg);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.sidebar-pill-btn svg,
.sidebar-action-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  flex-shrink: 0;
}

.sidebar-pill-btn:hover,
.sidebar-action-btn:hover {
  border-color: #94a3b8;
  background: var(--hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .sidebar-pill-btn:hover,
[data-theme="dark"] .sidebar-action-btn:hover {
  border-color: #64748b;
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-action-btn.signout-btn:hover {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

/* Collapsed footer */
.app-sidebar.collapsed .sidebar-footer {
  padding: 10px 4px 12px;
  align-items: center;
  gap: 8px;
}

.app-sidebar.collapsed .sidebar-user-card {
  padding: 0;
  background: transparent;
  border: none;
  justify-content: center;
  box-shadow: none;
}

.app-sidebar.collapsed .sidebar-user-info {
  display: none !important;
}

.app-sidebar.collapsed .sidebar-foot-actions {
  flex-direction: column;
  gap: 6px;
  width: 100%;
  align-items: center;
}

.app-sidebar.collapsed .sidebar-action-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  flex: none;
  justify-content: center;
}

.app-sidebar.collapsed .sidebar-action-btn .action-label {
  display: none !important;
}

.app-main {
  flex: 1;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
}

.app-main #view-client,
.app-main #view-admin {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.app-main .page {
  padding: 24px 32px;
  max-width: 1380px;
  width: 100%;
  box-sizing: border-box;
}

.app-main #cview-inbox.page {
  padding: 0;
  max-width: 100%;
  height: 100vh;
}

.orders-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .app-layout {
    flex-direction: column !important;
  }
  .app-sidebar {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .sidebar-nav {
    display: none;
  }
  .sidebar-footer {
    display: none;
  }
}