/* JAWS OS · Shared design system — v2 */
:root{
  --bg:#0b0b0c;
  --surface-0:#0f0f11;
  --surface-1:#15151a;
  --surface-2:#1c1c22;
  --surface-3:#24242c;
  --line:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.12);
  --line-3:rgba(255,255,255,.22);
  --fg:#f5f4f0;
  --fg-dim:rgba(245,244,240,.62);
  --fg-mute:rgba(245,244,240,.38);
  --fg-faint:rgba(245,244,240,.22);
  --accent:oklch(0.78 0.14 85);
  --accent-2:oklch(0.72 0.13 200);
  --good:oklch(0.78 0.15 150);
  --warn:oklch(0.78 0.15 70);
  --bad:oklch(0.68 0.18 25);
  --info:oklch(0.72 0.13 240);
  --violet:oklch(0.70 0.14 310);
  --r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:14px;
  --ff:'Inter','Helvetica Neue',system-ui,sans-serif;
  --mono:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  --serif:'Fraunces','Georgia',serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:var(--ff);-webkit-font-smoothing:antialiased;font-size:13px;min-height:100%;overflow-x:hidden}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
.kicker{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);font-family:var(--mono)}
.num{font-family:var(--mono);font-feature-settings:'tnum';letter-spacing:-.01em}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row{display:flex;align-items:center;gap:8px}
.stack{display:flex;flex-direction:column;gap:8px}
.grow{flex:1;min-width:0}
.divider{height:1px;background:var(--line)}
.hide{display:none!important}
.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot.good{background:var(--good);box-shadow:0 0 8px oklch(0.78 0.15 150/.6)}
.dot.warn{background:var(--warn)}
.dot.bad{background:var(--bad)}
.dot.info{background:var(--info)}
.dot.accent{background:var(--accent)}
.dot.pulse{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:4px;border:1px solid var(--line-2);color:var(--fg-dim);font-family:var(--mono)}
.chip.good{color:var(--good);border-color:oklch(0.78 0.15 150/.3);background:oklch(0.78 0.15 150/.08)}
.chip.warn{color:var(--warn);border-color:oklch(0.78 0.15 70/.3);background:oklch(0.78 0.15 70/.08)}
.chip.bad{color:var(--bad);border-color:oklch(0.68 0.18 25/.3);background:oklch(0.68 0.18 25/.08)}
.chip.info{color:var(--info);border-color:oklch(0.72 0.13 240/.3);background:oklch(0.72 0.13 240/.08)}
.chip.accent{color:var(--accent);border-color:oklch(0.78 0.14 85/.3);background:oklch(0.78 0.14 85/.08)}
.chip.violet{color:var(--violet);border-color:oklch(0.70 0.14 310/.3);background:oklch(0.70 0.14 310/.08)}
.btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-sm);background:transparent;border:1px solid var(--line-2);color:var(--fg);font-size:12px;font-weight:500;transition:all .15s;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--line-3);background:var(--surface-2)}
.btn-p{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-p:hover{opacity:.88;background:var(--fg)}
.btn-accent{background:var(--accent);color:#1a1200;border-color:var(--accent)}
.btn-accent:hover{opacity:.9}
.btn-sm{height:24px;padding:0 10px;font-size:11px}
.btn-lg{height:36px;padding:0 18px;font-size:13px;font-weight:600}
.btn:disabled{opacity:.4;cursor:not-allowed}
.avatar{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;background:var(--surface-3);color:var(--fg);border:1px solid var(--line-2);flex-shrink:0}
.avatar.sm{width:22px;height:22px;font-size:9px}
.avatar.lg{width:36px;height:36px;font-size:13px}
.avatar.xl{width:60px;height:60px;font-size:20px}
input,select,textarea{background:var(--surface-0);border:1px solid var(--line-2);color:var(--fg);border-radius:var(--r-sm);padding:8px 11px;font-size:13px;font-family:inherit;outline:none;width:100%;transition:border-color .15s}
input:focus,select:focus,textarea:focus{border-color:var(--line-3)}
textarea{resize:vertical}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16)}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th{text-align:left;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);padding:10px 12px;border-bottom:1px solid var(--line);font-family:var(--mono)}
table.t td{padding:12px;border-bottom:1px solid var(--line);color:var(--fg-dim);vertical-align:middle}
table.t tbody tr:hover{background:var(--surface-1)}
table.t tbody tr:last-child td{border-bottom:none}
.app{display:grid;min-height:100vh}
.rail{background:var(--surface-0);border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.rail-item{display:flex;align-items:center;gap:10px;padding:8px 10px;background:transparent;border:1px solid transparent;border-radius:var(--r-sm);color:var(--fg-dim);font-size:12.5px;text-align:left;font-weight:500;width:100%;transition:all .15s}
.rail-item:hover{background:var(--surface-1);color:var(--fg)}
.rail-item.on{background:var(--surface-2);border-color:var(--line-2);color:var(--fg);font-weight:600}
.rail-item .k{width:14px;text-align:center;color:var(--fg-mute);font-family:var(--mono);font-size:13px}
.rail-item.on .k{color:var(--accent)}
.rail-item .badge{background:var(--accent);color:#1a1200;font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;font-family:var(--mono);margin-left:auto}
.topbar{height:56px;border-bottom:1px solid var(--line);padding:0 22px;display:flex;align-items:center;gap:14px;background:var(--surface-0);flex-shrink:0}
.topbar h1{font-size:15px;font-weight:600;letter-spacing:-.01em}
.topbar .sub{font-size:11px;color:var(--fg-mute);margin-top:2px}
.card{background:var(--surface-0);border:1px solid var(--line);border-radius:var(--r-md);padding:18px}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px;flex-wrap:wrap}
.card-h .title{font-size:13px;font-weight:600}
.card-h .sub{font-size:11px;color:var(--fg-mute);margin-top:2px}
.kpi{background:var(--surface-0);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;min-width:0}
.kpi .l{font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);font-family:var(--mono);margin-bottom:6px}
.kpi .v{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1;font-family:var(--mono)}
.kpi .s{font-size:11px;color:var(--fg-mute);margin-top:4px}
.kpi .v.good{color:var(--good)}.kpi .v.warn{color:var(--warn)}.kpi .v.accent{color:var(--accent)}.kpi .v.bad{color:var(--bad)}
.grid{display:grid;gap:12px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.g-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.g-5,.g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.g-5,.g-4,.g-3,.g-2{grid-template-columns:1fr}}
.bar{height:8px;background:var(--surface-3);border-radius:4px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:4px}
.bar>i.good{background:var(--good)}.bar>i.warn{background:var(--warn)}.bar>i.bad{background:var(--bad)}
.pane{display:none}.pane.on{display:block}
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:10px 14px;font-size:12.5px;color:var(--fg);min-width:200px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:slideUp .25s ease;pointer-events:auto;max-width:320px}
.toast.good{border-color:oklch(0.78 0.15 150/.4);color:var(--good)}
.toast.bad{border-color:oklch(0.68 0.18 25/.4);color:var(--bad)}
.toast.warn{border-color:oklch(0.78 0.15 70/.4);color:var(--warn)}
@keyframes slideUp{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.header-nav{display:flex;gap:2px;padding:0 22px;height:42px;background:var(--surface-0);border-bottom:1px solid var(--line);align-items:center;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.header-nav::-webkit-scrollbar{display:none}
.header-nav button{background:none;border:none;color:var(--fg-mute);font-size:12px;font-weight:500;padding:0 10px;height:100%;border-bottom:2px solid transparent;white-space:nowrap;cursor:pointer;transition:color .15s}
.header-nav button.on{color:var(--fg);border-bottom-color:var(--accent)}
.header-nav button:hover{color:var(--fg)}
/* Workspace layout */
.workspace{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.main-scroll{flex:1;overflow-y:auto;padding:20px 24px 60px}
/* Auth overlay */
.auth-overlay{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:20px}
.auth-overlay.off{display:none}
.auth-box{max-width:400px;width:100%;background:var(--surface-1);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:32px}
.auth-logo{display:flex;justify-content:center;margin-bottom:8px}
.auth-logo img{height:22px;width:auto}
.auth-tag{text-align:center;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:24px;font-family:var(--mono)}
.auth-tabs{display:flex;gap:0;margin-bottom:20px;background:var(--bg);border-radius:var(--r-sm);padding:3px}
.auth-tab{flex:1;padding:8px;background:transparent;border:none;color:var(--fg-mute);font-size:12px;font-weight:600;border-radius:var(--r-sm);cursor:pointer;transition:all .15s}
.auth-tab.on{background:var(--surface-2);color:var(--fg)}
.afield{margin-bottom:12px}
.afield label{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:6px;font-family:var(--mono)}
.afield-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-submit{width:100%;padding:13px;background:var(--fg);color:var(--bg);border:none;border-radius:var(--r-sm);font-size:13px;font-weight:700;cursor:pointer;margin-top:6px;letter-spacing:.04em;transition:opacity .15s}
.auth-submit:hover{opacity:.88}
.auth-submit:disabled{opacity:.4;cursor:not-allowed}
.auth-err{font-size:11.5px;color:var(--bad);margin-top:8px;text-align:center;min-height:16px}
/* Onboarding tour */
.tour-overlay{position:fixed;inset:0;z-index:8888;pointer-events:none}
.tour-card{position:fixed;z-index:8889;background:var(--surface-1);border:1px solid var(--line-3);border-radius:var(--r-lg);padding:20px;max-width:320px;box-shadow:0 20px 60px rgba(0,0,0,.6);pointer-events:all;animation:slideUp .3s ease}
.tour-card h4{font-size:14px;font-weight:700;margin-bottom:6px}
.tour-card p{font-size:12px;color:var(--fg-dim);line-height:1.6;margin-bottom:14px}
.tour-card .tour-steps{font-size:10px;color:var(--fg-mute);font-family:var(--mono);margin-bottom:12px}
.tour-nav{display:flex;justify-content:space-between;align-items:center;gap:8px}
/* Daniela AI agent */
.daniela-fab{position:fixed;bottom:22px;right:22px;z-index:7777;width:52px;height:52px;border-radius:50%;background:var(--fg);color:var(--bg);border:none;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.4);cursor:pointer;transition:transform .2s}
.daniela-fab:hover{transform:scale(1.08)}
.daniela-panel{position:fixed;bottom:84px;right:22px;z-index:7777;width:340px;max-height:520px;background:var(--surface-1);border:1px solid var(--line-2);border-radius:var(--r-lg);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:slideUp .25s ease}
.daniela-panel.hide{display:none}
.daniela-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.daniela-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,oklch(0.78 0.14 85),oklch(0.72 0.13 200));display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.daniela-head .name{font-size:13px;font-weight:700}
.daniela-head .sub{font-size:10px;color:var(--fg-mute);font-family:var(--mono)}
.daniela-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.daniela-msg{max-width:88%;padding:9px 12px;border-radius:10px;font-size:12.5px;line-height:1.5}
.daniela-msg.ai{background:var(--surface-2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:3px}
.daniela-msg.user{background:var(--fg);color:var(--bg);align-self:flex-end;border-bottom-right-radius:3px}
.daniela-compose{padding:10px 12px;border-top:1px solid var(--line);display:flex;gap:8px}
.daniela-compose input{flex:1;padding:9px 11px;font-size:12.5px}
.daniela-compose button{padding:9px 14px;background:var(--fg);color:var(--bg);border:none;border-radius:var(--r-sm);font-size:12px;font-weight:600;flex-shrink:0}
@media(max-width:768px){
  .daniela-panel{width:calc(100vw - 28px);right:14px;bottom:80px}
}
/* Modal */
.modal-bg{position:fixed;inset:0;z-index:6000;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.modal-bg.on{display:flex}
.modal{background:var(--surface-1);border:1px solid var(--line-2);border-radius:var(--r-lg);max-width:560px;width:100%;max-height:90vh;overflow-y:auto}
.modal-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface-1);z-index:1}
.modal-h h3{font-size:15px;font-weight:700}
.modal-x{width:28px;height:28px;background:transparent;border:1px solid var(--line);border-radius:5px;color:var(--fg-mute);font-size:16px;display:flex;align-items:center;justify-content:center}
.modal-x:hover{color:var(--fg);border-color:var(--line-2)}
.modal-b{padding:22px}
.modal-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:0;background:var(--surface-1)}
/* Mobile responsive shell */
@media(max-width:768px){
  .main-scroll{padding:14px 14px 80px}
  .topbar{padding:0 14px;height:50px}
  .header-nav{padding:0 14px}
}

/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS — applies to all portals
   ═══════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Larger touch targets */
  .btn{min-height:38px;padding:0 14px;font-size:13px}
  .btn-sm{min-height:32px;padding:0 12px}
  .btn-lg{min-height:44px}

  /* Full-width inputs on mobile */
  input,select,textarea{font-size:16px!important;} /* prevents iOS zoom on focus */

  /* Cards */
  .card{padding:14px}
  .card-h{flex-wrap:wrap;gap:8px}

  /* KPI grids — 2 col max on mobile */
  .g-5,.g-4,.g-3{grid-template-columns:repeat(2,1fr)}
  .g-2{grid-template-columns:1fr 1fr}
  .kpi{padding:12px}
  .kpi .v{font-size:20px}

  /* Tables — horizontal scroll */
  table.t{font-size:12px}
  table.t th,table.t td{padding:8px 10px}

  /* Modal — full screen on mobile */
  .modal-bg{padding:0;align-items:flex-end}
  .modal{border-radius:var(--r-lg) var(--r-lg) 0 0;max-height:92vh;max-width:100%;width:100%}

  /* Toast — above mobile nav */
  .toast-wrap{bottom:76px;right:10px;left:10px}
  .toast{min-width:unset}

  /* Daniela panel */
  .daniela-panel{width:calc(100vw - 20px);right:10px;bottom:130px;max-height:calc(100vh - 180px)}
  .daniela-fab{bottom:72px;right:14px;width:46px;height:46px}

  /* Rail hidden on mobile — use bottom nav instead */
  .rail-item .k{display:none}
}

/* Touch-friendly interactive elements */
@media(hover:none){
  .btn:active{opacity:.7;transform:scale(.97)}
  .rail-item:active,.cd-tool:active,.pipe-card:active{opacity:.7}
  .bk-card:active,.opp-card:active{transform:scale(.99)}
}

/* Safe area for notched phones (iPhone X+) */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .mobile-nav,.mnb-wrap{padding-bottom:env(safe-area-inset-bottom)}
  .main-scroll{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}