/* ==========================================================================
   Kelmo client portal + auth — light & dark themes
   ========================================================================== */
.app{--bg:var(--cream);--surface:var(--cream-2);--surface-2:var(--sand);--text:var(--ink);--muted:var(--graphite);--border:var(--line);--side-bg:var(--ink);--side-text:var(--cream);--side-muted:var(--taupe);--hover:rgba(10,8,5,.05);--link:var(--sky-text)}
.app[data-theme="dark"]{--bg:#141112;--surface:#1D191A;--surface-2:#262122;--text:#F5F2E1;--muted:#B5ABA7;--border:#332D2E;--side-bg:#0A0805;--hover:rgba(255,255,255,.06);--link:#8DB4F2}
.app{background:var(--bg);color:var(--text);min-height:100dvh;font-size:15px;line-height:1.5}
.app .muted{color:var(--muted)}
.app :focus-visible{outline:2px solid #00B85E;outline-offset:2px}
.app[data-theme="dark"] .card,.app[data-theme="dark"] .table-wrap{background:var(--surface);border-color:var(--border);color:var(--text)}
.app[data-theme="dark"] .table th{background:var(--surface-2);color:var(--muted)}
.app[data-theme="dark"] .table td,.app[data-theme="dark"] .table th{border-color:var(--border)}
.app[data-theme="dark"] .input,.app[data-theme="dark"] .select,.app[data-theme="dark"] .textarea{background:#0F0C0D;border-color:#4A4344;color:var(--text)}
.app[data-theme="dark"] .select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F2E1' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
.app[data-theme="dark"] .tag{background:var(--surface-2);color:var(--text)}
.app[data-theme="dark"] .tag--green{background:#123C27;color:#7BF0B2}
.app[data-theme="dark"] .tag--amber{background:#3D2C10;color:#F2C77B}
.app[data-theme="dark"] .tag--red{background:#45190F;color:#FF9C88}
.app[data-theme="dark"] .tag--sky{background:#14284A;color:#9CC0FA}
.app[data-theme="dark"] .btn--secondary{--btn-fg:var(--text);border-color:var(--text)}
.app[data-theme="dark"] .btn--secondary:hover{--btn-bg:var(--text);--btn-fg:var(--bg)}
.app[data-theme="dark"] .btn--ink{--btn-bg:var(--text);--btn-fg:var(--bg)}
.app[data-theme="dark"] .alert--info{background:#14284A;border-color:#2C4A80;color:#CFE0FB}
.app[data-theme="dark"] .alert--error{background:#3A160E;border-color:#6E2C1D;color:#FFD2C7}
.app[data-theme="dark"] .alert--ok{background:#0F3020;border-color:#1F5C3C;color:#C8F5DC}
.app[data-theme="dark"] .alert--warn{background:#3D2C10;border-color:#6B4E1D;color:#F8DDAA}

.shell{display:grid;grid-template-columns:auto minmax(0,1fr);min-height:100dvh}
/* Sidebar */
.side{position:sticky;top:0;height:100dvh;width:252px;background:var(--side-bg);color:var(--side-text);display:flex;flex-direction:column;transition:width var(--t-med) var(--ease-out);overflow:hidden;z-index:30}
.side.is-collapsed{width:76px}
.side__top{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px 0 22px;flex:none}
.side .logo__word{font-size:26px}
.side.is-collapsed .logo__word{font-size:0}
.side.is-collapsed .side__top{justify-content:center;padding:0}
.side.is-collapsed .side__collapse{display:none}
.side__collapse{width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--side-muted);display:grid;place-items:center}
.side__collapse:hover{background:rgba(255,255,255,.08);color:var(--cream)}
.side__collapse svg{width:18px;height:18px}
.side__nav{flex:1;overflow-y:auto;padding:8px 12px 16px;scrollbar-width:thin}
.side__group{font-size:12px;font-weight:700;color:var(--side-muted);padding:16px 12px 6px;white-space:nowrap}
.side.is-collapsed .side__group{visibility:hidden;height:12px;padding:6px 0}
.side__link{display:flex;align-items:center;gap:12px;height:42px;padding:0 12px;border-radius:12px;color:var(--side-text);text-decoration:none;font-weight:600;font-size:14.5px;white-space:nowrap;position:relative}
.side__link svg{width:20px;height:20px;flex:none;color:var(--side-muted)}
.side__link:hover{background:rgba(255,255,255,.07)}
.side__link[aria-current="page"]{background:rgba(0,245,125,.12);color:var(--cream)}
.side__link[aria-current="page"] svg{color:var(--signal)}
.side__link[aria-current="page"]::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--signal)}
.side__link .lock{margin-left:auto;width:14px;height:14px;opacity:.6}
.side.is-collapsed .side__link{justify-content:center;padding:0}
.side.is-collapsed .side__link span,.side.is-collapsed .side__link .lock,.side.is-collapsed .side__link .count{display:none}
.side__link .count{margin-left:auto;font-size:12px;font-weight:700;background:var(--signal);color:var(--ink);border-radius:999px;padding:1px 8px}
.side__foot{padding:12px;border-top:1px solid #2A2526}
.side__plan{background:rgba(255,255,255,.06);border-radius:14px;padding:14px;font-size:13px;color:var(--side-muted)}
.side__plan b{display:block;color:var(--cream);font-size:14px}
.side.is-collapsed .side__plan{display:none}
/* Topbar */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:20;height:64px;display:flex;align-items:center;gap:12px;padding:0 24px;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.topbar__menu{display:none}
.loc{position:relative}
.loc__btn{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface);font-weight:700;font-size:14px;color:var(--text)}
.loc__btn svg{width:16px;height:16px;color:var(--muted)}
.cmdk-btn{display:flex;align-items:center;gap:10px;height:42px;padding:0 12px 0 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-weight:600;min-width:260px;font-size:14px}
.cmdk-btn svg{width:16px;height:16px}
.cmdk-btn kbd{margin-left:auto;font-family:var(--font-body);font-size:12px;border:1px solid var(--border);border-radius:6px;padding:1px 6px}
.topbar__actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.tb-icon{position:relative;width:42px;height:42px;border-radius:12px;border:0;background:transparent;color:var(--text);display:grid;place-items:center}
.tb-icon:hover{background:var(--hover)}
.tb-icon svg{width:20px;height:20px}
.tb-icon .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--tomato);box-shadow:0 0 0 2px var(--bg)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--signal);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.avatar--sm{width:30px;height:30px;font-size:12px}
.prof{display:flex;align-items:center;gap:10px;height:42px;padding:0 8px 0 4px;border-radius:999px;border:0;background:transparent;color:var(--text);font-weight:700;font-size:14px}
.prof:hover{background:var(--hover)}
/* Menus / popovers */
.pop{position:absolute;top:calc(100% + 8px);min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 50px -20px rgba(0,0,0,.35);padding:8px;z-index:50}
.pop--right{right:0}
.pop__item{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px 12px;border-radius:10px;border:0;background:none;text-align:left;color:var(--text);text-decoration:none;font-weight:600;font-size:14px}
.pop__item:hover,.pop__item:focus-visible{background:var(--hover)}
.pop__item svg{width:18px;height:18px;color:var(--muted)}
.pop__item[aria-checked="true"]{font-weight:800}
.pop__item[aria-checked="true"]::after{content:"";margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--signal)}
.pop__sep{height:1px;background:var(--border);margin:6px 0}
.pop__label{font-size:12px;font-weight:700;color:var(--muted);padding:8px 12px 4px}
/* Content */
.content{padding:28px 32px 96px;max-width:1440px;width:100%}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.page-head h1{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:clamp(34px,3.6vw,48px);line-height:1;letter-spacing:-.005em}
.page-head p{color:var(--muted);margin-top:6px}
.grid{display:grid;gap:16px}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:1200px){.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-main{grid-template-columns:1fr}}
@media (max-width:760px){.g-4,.g-3,.g-2{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel__head h2{font-size:16px;font-weight:800}
.kpi small{display:block;color:var(--muted);font-weight:700;font-size:13px}
.kpi b{display:block;font-family:var(--font-display);font-weight:400;font-size:40px;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:6px}
.kpi .delta{font-size:13px;font-weight:700}
.up{color:var(--leaf-text)}.down{color:var(--tomato-text)}
.app[data-theme="dark"] .up{color:#7BE0A0}.app[data-theme="dark"] .down{color:#FF9C88}
.ticker{display:grid;gap:8px}
.tick{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.tick b{font-variant-numeric:tabular-nums}
.tick .grow{flex:1;min-width:0}
.tick .grow small{display:block;color:var(--muted);font-size:12.5px}
.bars{display:flex;align-items:flex-end;gap:8px;height:140px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.bars i{width:100%;background:var(--text);border-radius:6px 6px 2px 2px;opacity:.85;min-height:4px}
.bars i.hi{background:var(--signal);opacity:1}
.bars span{font-size:12px;color:var(--muted);font-weight:700}
.meter{height:10px;border-radius:10px;background:var(--surface-2);overflow:hidden}
.meter i{display:block;height:100%;border-radius:10px;background:var(--text)}
.meter i.warn{background:var(--amber)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.toolbar .select,.toolbar .input{min-height:42px;width:auto;font-size:14px;padding-top:8px;padding-bottom:8px}
.toolbar .input{min-width:220px}
.app .table{font-size:14px;min-width:720px}
.app .table th,.app .table td{padding:12px 16px;vertical-align:middle}
.app .table tbody tr{cursor:default}
.app .table tbody tr.clickable{cursor:pointer}
.app .table tbody tr.clickable:hover td{background:var(--hover)}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;font-size:14px;color:var(--muted)}
.pager .flow{gap:6px}
.btn--xs{min-height:34px;padding:6px 12px;font-size:13.5px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto}
.tabs button{border:0;background:none;color:var(--muted);font-weight:700;font-size:14.5px;min-height:44px;padding:0 14px;border-bottom:2px solid transparent;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--text);border-color:var(--text)}
/* Toggle (86) */
.t86{position:relative;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.t86 input{position:absolute;opacity:0;width:44px;height:26px;margin:0;cursor:pointer}
.t86 i{width:44px;height:26px;border-radius:26px;background:var(--leaf);position:relative;transition:background-color .2s}
.t86 i::after{content:"";position:absolute;top:3px;left:21px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s}
.t86 input:not(:checked)+i{background:#B9B3A0}
.t86 input:not(:checked)+i::after{left:3px}
.t86 input:focus-visible+i{outline:2px solid #00B85E;outline-offset:2px}
.t86 input:disabled+i{opacity:.5}
/* Drawer */
.scrim{position:fixed;inset:0;background:rgba(10,8,5,.45);z-index:70}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--surface);color:var(--text);z-index:80;display:flex;flex-direction:column;box-shadow:-30px 0 60px -30px rgba(0,0,0,.4)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border)}
.drawer__head h2{font-size:20px;font-weight:800}
.drawer__body{flex:1;overflow-y:auto;padding:22px}
.drawer__foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.dl{display:grid;grid-template-columns:140px 1fr;gap:10px 16px;font-size:14px}
.dl dt{color:var(--muted);font-weight:700}
.dl dd{margin:0;font-weight:600}
.lines{border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:16px 0}
.lines div{display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border);font-size:14px}
.lines div:last-child{border:0;font-weight:800;background:var(--surface-2)}
.transcript{display:grid;gap:10px}
.transcript .bubble{background:var(--bg);border-color:var(--border);color:var(--text)}
.transcript .bubble--me{background:var(--text);color:var(--bg)}
/* States */
.state{display:grid;place-items:center;text-align:center;padding:56px 24px;border:1px dashed var(--border);border-radius:20px;background:var(--surface)}
.state__icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2);margin:0 auto 14px}
.state__icon svg{width:26px;height:26px}
.state h2{font-size:19px;font-weight:800;margin-bottom:6px}
.state p{color:var(--muted);max-width:44ch;margin:0 auto 18px}
.state--error .state__icon{background:#F8DCD5;color:var(--tomato-text)}
.state--locked .state__icon{background:var(--ink);color:var(--signal)}
.skel{background:linear-gradient(90deg,var(--surface-2) 0,color-mix(in srgb,var(--surface-2) 40%,var(--surface)) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:shimmer 1.2s linear infinite;border-radius:10px}
@keyframes shimmer{to{background-position:-200% 0}}
.skel-row{height:44px;margin-bottom:8px}
.skel-kpi{height:112px;border-radius:20px}
/* Toast */
.toasts{position:fixed;right:20px;bottom:20px;z-index:200;display:grid;gap:8px}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream);padding:12px 16px;border-radius:14px;font-weight:700;font-size:14px;box-shadow:0 20px 40px -16px rgba(0,0,0,.5);max-width:380px}
.toast svg{width:18px;height:18px;color:var(--signal);flex:none}
.toast--error svg{color:#FF9C88}
/* Command palette */
.cmdk{position:fixed;inset:0;z-index:150;display:grid;place-items:start center;padding-top:12vh;background:rgba(10,8,5,.45)}
.cmdk__box{width:min(620px,calc(100% - 32px));background:var(--surface);color:var(--text);border-radius:20px;border:1px solid var(--border);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);overflow:hidden}
.cmdk__input{display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--border)}
.cmdk__input svg{width:20px;height:20px;color:var(--muted)}
.cmdk__input input{flex:1;height:58px;border:0;background:transparent;font-size:17px;outline:none;color:var(--text)}
.cmdk__list{max-height:360px;overflow-y:auto;padding:8px}
.cmdk__item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:12px;border:0;background:none;text-align:left;color:var(--text);font-weight:600}
.cmdk__item[aria-selected="true"]{background:var(--hover)}
.cmdk__item svg{width:18px;height:18px;color:var(--muted)}
.cmdk__item small{margin-left:auto;color:var(--muted);font-size:12px}
/* Mobile */
.tabbar{display:none}
@media (max-width:960px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:280px;transform:translateX(-100%);transition:transform var(--t-med) var(--ease-out)}
  .side.is-open{transform:none;box-shadow:30px 0 60px -20px rgba(0,0,0,.5)}
  .side.is-collapsed{width:280px}
  .side__collapse{display:none}
  .topbar{padding:0 12px;gap:8px}
  .topbar__menu{display:grid}
  .cmdk-btn{min-width:0;width:42px;padding:0;justify-content:center}
  .cmdk-btn span,.cmdk-btn kbd{display:none}
  .prof span{display:none}
  .loc__btn{max-width:46vw;overflow:hidden}
  .loc__btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .content{padding:20px 16px calc(96px + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:60px;font-size:11.5px;font-weight:700;color:var(--muted);text-decoration:none;border:0;background:none}
  .tabbar svg{width:22px;height:22px}
  .tabbar [aria-current="page"]{color:var(--text)}
  .tabbar [aria-current="page"] svg{color:var(--text)}
  .toasts{bottom:84px;left:16px;right:16px}
  .dl{grid-template-columns:1fr}
}
@media (max-width:560px){.loc__btn svg:first-child{display:none}}
.demo-bar{background:var(--ink);color:var(--cream);font-size:13px;font-weight:600;padding:8px 24px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.demo-bar a{color:var(--signal)}
.swatch-in{width:52px;height:44px;border-radius:12px;border:1px solid var(--border);padding:2px;background:var(--surface)}
.brand-preview{border-radius:16px;padding:18px;border:1px solid var(--border)}

/* ==========================================================================
   Auth (split screen)
   ========================================================================== */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100dvh;background:var(--cream)}
.auth__form{display:flex;flex-direction:column;padding:28px clamp(20px,5vw,72px)}
.auth__top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.auth__top a.back{font-size:14px;font-weight:700;text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.auth__top a.back svg{width:16px;height:16px}
.auth__inner{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:460px;width:100%;margin:0 auto;padding:48px 0}
.auth__inner h1{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:clamp(44px,5vw,72px);line-height:.95;margin-bottom:12px}
.auth__inner .sub{color:var(--graphite);margin-bottom:28px}
.auth__panel{background:var(--ink);color:var(--cream);padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth__panel .display-2{color:var(--cream);max-width:12ch}
.tip{min-height:210px}
.tip p{color:var(--taupe);max-width:40ch;margin-top:14px}
.tip-dots{display:flex;gap:6px;margin-top:20px}
.tip-dots button{width:10px;height:10px;border-radius:10px;border:0;background:#4A4344;padding:0;transition:width .3s}
.tip-dots button[aria-current="true"]{width:28px;background:var(--signal)}
.auth__card{margin-top:32px}
.pw{position:relative}
.pw .input{padding-right:56px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;border-radius:10px;display:grid;place-items:center;color:var(--graphite)}
.pw button svg{width:20px;height:20px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.divider{display:flex;align-items:center;gap:12px;color:var(--graphite);font-size:13px;font-weight:700;margin:24px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.sso{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sso button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:var(--cream-2);font-weight:700;font-size:14px;color:var(--graphite);cursor:not-allowed}
.sso small{font-size:11px;font-weight:700;background:var(--sand);border-radius:6px;padding:1px 6px}
.otp{display:flex;gap:8px;justify-content:space-between}
.otp input{width:100%;max-width:60px;height:64px;text-align:center;font-family:var(--font-display);font-size:32px;border-radius:12px;border:1.5px solid #CFC8A8;background:var(--white)}
.otp input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,245,125,.35);outline:none}
.otp input[aria-invalid="true"]{border-color:var(--tomato)}
.demo-note{background:var(--sand);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:13.5px;margin-bottom:20px}
.demo-note code{font-weight:800;background:var(--cream-2);border-radius:6px;padding:1px 6px}
.strength{display:flex;gap:4px;margin-top:6px}
.strength i{flex:1;height:5px;border-radius:5px;background:var(--line)}
.strength i.on{background:var(--ink)}
@media (max-width:900px){.auth{grid-template-columns:1fr}.auth__panel{display:none}}
.tb-icon.topbar__menu{display:none}
@media (max-width:960px){.tb-icon.topbar__menu{display:grid}}
.app h1[tabindex="-1"]:focus,.app main:focus{outline:none}
.prof svg{width:16px;height:16px;color:var(--muted)}
.loc__btn>svg:last-child{width:14px;height:14px}
.grid>*{min-width:0}
.tick b{overflow-wrap:anywhere}
.panel__head{flex-wrap:wrap}