/* Koja Intelligens — prototype styles
   Design language: dark slate, off-white, fjord blue + muted green. Calm, sovereign, no neon.
   System font stack only — zero third-party calls (on-brand for a privacy product). */

:root{
  /* palette sampled from the cabin photo — blues, navy, mist, warm window. No green. */
  --bg:#070b12;
  --bg-2:#0b1119;
  --panel:#151d2d;
  --panel-2:#1d2839;
  --line:rgba(177,171,176,.12);
  --line-strong:rgba(177,171,176,.20);
  --text:#b1abb0;
  --muted:#8292ad;
  --soft:#b1abb0;
  --mist:#b1abb0;
  --fjord:#5d79a0;
  --fjord-deep:#345989;
  --blue-light:#8aa1c1;
  --amber:#cf9a5c;
  --danger:#bf7b5a;
  --radius:14px;
  --radius-sm:10px;
  --maxw:1080px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  background:radial-gradient(1200px 700px at 70% -10%, #16314a 0%, var(--bg) 55%) fixed;
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;font-weight:700;}
p{margin:0 0 1em;}
.muted{color:var(--muted);}
.accent{color:var(--fjord);}
.hint{font-size:.85rem;color:var(--muted);}

/* ---------- nav ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding:20px 24px;
}
.brand{display:flex;align-items:center;gap:10px;font-size:1.15rem;}
.brand-name{letter-spacing:.2px;font-weight:400;}
.brand-name strong{font-weight:700;}
.brand-mark{width:30px;height:30px;display:block;}
.nav-links{display:flex;align-items:center;gap:22px;font-size:.95rem;}
.nav-links a{color:var(--soft);}
.nav-links a:hover{color:var(--text);}

/* ---------- buttons ---------- */
.btn{
  font:inherit;font-size:.95rem;border:0;border-radius:var(--radius-sm);
  padding:11px 18px;cursor:pointer;transition:.15s ease;font-weight:600;
}
.btn-primary{background:linear-gradient(135deg,var(--fjord),var(--fjord-deep));color:#06121b;}
.btn-primary:hover{filter:brightness(1.08);}
.btn-ghost{background:transparent;color:var(--soft);border:1px solid var(--line-strong);}
.btn-ghost:hover{background:rgba(223,234,246,.06);}
.btn-text{background:transparent;color:var(--muted);padding:11px 8px;}
.btn-text:hover{color:var(--text);}
.btn-danger{background:transparent;color:var(--danger);border:1px solid rgba(191,123,90,.4);}
.btn-danger:hover{background:rgba(191,123,90,.1);}

/* ---------- views ---------- */
.view{display:none;}
.view.is-active{display:block;}

/* ---------- hero ---------- */
.hero{
  max-width:var(--maxw);margin:0 auto;padding:40px 24px 20px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
}
.eyebrow{color:var(--fjord);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px;}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.5px;}
.lede{color:var(--soft);font-size:1.08rem;max-width:42ch;margin-top:18px;}
.hero-cta{display:flex;gap:12px;margin:26px 0 22px;flex-wrap:wrap;}
.hero-badges{display:flex;gap:18px;list-style:none;padding:0;margin:0;color:var(--muted);font-size:.9rem;flex-wrap:wrap;}
.hero-art{
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);aspect-ratio:600/460;
}
.hero-art svg{width:100%;height:100%;display:block;}

/* ---------- props ---------- */
.props,.how{max-width:var(--maxw);margin:0 auto;padding:48px 24px;}
.props h2,.how h2{font-size:1.6rem;margin-bottom:24px;}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid article{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;
}
.grid h3{font-size:1.05rem;color:var(--text);}
.grid p{color:var(--muted);margin:0;font-size:.95rem;}

/* ---------- how ---------- */
.how ol{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px;max-width:760px;}
.how li{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;}
.how li span{
  flex:0 0 28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:rgba(93,121,160,.16);color:var(--fjord);font-weight:700;font-size:.9rem;
}

/* ---------- workspace ---------- */
.view-app{min-height:calc(100vh - 80px);}
.ws{max-width:860px;margin:0 auto;padding:24px;}
.ws-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
}
.ws-selects{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.select{display:flex;flex-direction:column;font-size:.72rem;color:var(--muted);gap:3px;}
.select select{
  font:inherit;font-size:.95rem;color:var(--text);background:var(--panel-2);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:8px 10px;
}
.model-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:7px 12px;color:var(--text);font:inherit;
}
.model-label{font-size:.95rem;}
.route-chip{font-size:.72rem;color:var(--fjord);background:rgba(93,121,160,.14);padding:1px 8px;border-radius:20px;}
.route-chip.us{color:var(--amber);background:rgba(207,154,92,.14);}
.toggle{display:flex;align-items:center;gap:7px;font-size:.9rem;color:var(--soft);cursor:pointer;}
.toggle input{accent-color:var(--fjord);width:16px;height:16px;}
.ws-storage{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);}
.meter{width:90px;height:7px;border-radius:6px;background:rgba(223,234,246,.12);overflow:hidden;}
.meter-fill{height:100%;background:linear-gradient(90deg,var(--fjord),var(--fjord));}

.chat{
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-top:14px;min-height:280px;display:flex;flex-direction:column;gap:12px;
}
.msg{max-width:80%;padding:11px 15px;border-radius:14px;font-size:.97rem;}
.msg p{margin:0;}
.msg.assistant{align-self:flex-start;background:var(--panel);border:1px solid var(--line);}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--fjord-deep),#2f6488);color:var(--mist);}
.msg.note{align-self:center;font-size:.82rem;color:var(--muted);background:transparent;border:1px dashed var(--line-strong);}

.suggestions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.chip{
  font:inherit;font-size:.85rem;background:var(--panel);border:1px solid var(--line-strong);
  color:var(--soft);padding:7px 12px;border-radius:20px;cursor:pointer;
}
.chip:hover{border-color:var(--fjord);color:var(--text);}

.composer{display:flex;gap:10px;margin-top:14px;}
.composer input{
  flex:1;font:inherit;font-size:1rem;color:var(--text);background:var(--panel);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:12px 14px;
}
.composer input:focus{outline:none;border-color:var(--fjord);}

.usage{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:14px;padding:10px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:.82rem;color:var(--muted);
}
.usage b{color:var(--soft);}
.usage-route b{color:var(--fjord);}
.usage-saved{color:var(--amber);}
.usage-saved b{color:var(--amber);}
#navPrivate{display:contents;}
#navPrivate[hidden]{display:none;}
.nav-usage{color:var(--amber);font-variant-numeric:tabular-nums;}
.nav-usage b{color:var(--amber);}
/* nav dropdown menu */
.nav-menu{position:relative;display:inline-block;}
.nav-menu[hidden],.nav-menu-list[hidden]{display:none;}
.nav-menu-btn{background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0;}
.nav-menu-list{position:absolute;right:0;top:140%;min-width:210px;background:var(--panel-2,#0b1220);border:1px solid var(--line);border-radius:8px;padding:6px;display:flex;flex-direction:column;z-index:60;box-shadow:0 8px 24px rgba(0,0,0,.4);}
.nav-menu-list a{padding:8px 10px;color:var(--mist);text-decoration:none;border-radius:6px;font-size:.92rem;}
.nav-menu-list a:hover{background:rgba(177,171,176,.08);}
.nav-menu-acct{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;display:flex;flex-direction:column;}
.nav-menu-acct .acct-id{padding:7px 10px;color:var(--soft);font-size:.82rem;}
/* conversation sidebar */
.ws-layout{display:flex;gap:14px;align-items:flex-start;}
.ws-layout .ws{flex:1;min-width:0;}
.ws-sidebar{flex:0 0 210px;display:flex;flex-direction:column;}
.new-chat.new-chat{width:100%;}
.conv-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;max-height:64vh;overflow:auto;}
.conv-item{padding:8px 10px;color:var(--mist);cursor:pointer;border-radius:6px;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.conv-item:hover{background:rgba(177,171,176,.08);}
.conv-item.active{background:rgba(52,89,137,.25);color:var(--soft);}
/* agent-scoped skill chips */
.agent-skills-wrap{position:relative;}
.agent-skills{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;margin:10px 0;min-width:0;max-width:100%;}
.agent-skills-label{color:var(--mist);font-size:.82rem;margin-right:4px;flex:none;}
/* the inline chip row is capped and clips; overflow collapses into the "＋N more" chip */
.sk-chips{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;position:relative;min-width:0;max-width:33%;}
.sk-chip{display:inline-flex;align-items:center;gap:5px;flex:none;white-space:nowrap;background:rgba(8,16,24,.5);border:1px solid var(--line);color:var(--mist);font:inherit;font-size:.82rem;padding:3px 9px;border-radius:14px;cursor:pointer;}
.sk-chip.active{border-color:var(--fjord);color:var(--soft);background:rgba(52,89,137,.18);}
.sk-chip.locked{cursor:default;}
.sk-chip .sk-tag{font-size:.62rem;text-transform:uppercase;opacity:.6;}
.sk-chip .sk-edit{opacity:.5;}
.sk-add{border-style:dashed;opacity:.85;flex:none;}
.sk-more{flex:none;color:var(--soft);}
.sk-more[hidden]{display:none;}   /* .sk-chip sets display:inline-flex, which would otherwise beat [hidden] */

/* searchable skills popover (overflow + full list) */
.skills-pop{position:absolute;top:100%;left:0;margin-top:6px;z-index:40;width:320px;max-width:92vw;
  background:rgba(6,12,18,.98);border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  padding:10px;box-shadow:0 12px 34px rgba(4,4,7,.55);}
.skills-pop[hidden]{display:none;}
.skills-pop .picker-search{margin:0 0 8px;}
.skills-pop-list{list-style:none;margin:0 0 8px;padding:0;max-height:46vh;overflow:auto;display:grid;gap:3px;}
.skills-pop-row{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--mist);}
.skills-pop-row:hover,.skills-pop-row:focus{border-color:var(--fjord);outline:none;}
.skills-pop-row.active{border-color:var(--fjord);color:var(--soft);background:rgba(52,89,137,.18);}
.skills-pop-row.locked{cursor:default;opacity:.85;}
.skills-pop-row .sp-name{flex:1;}
.skills-pop-row.active .sp-name::before{content:"\2713 ";color:var(--fjord);}
.skills-pop-row .sp-state{font-size:.66rem;text-transform:uppercase;color:var(--muted);flex:none;}
.skills-pop-row .sk-edit{opacity:.5;flex:none;}
.skills-pop-row .sk-edit:hover{opacity:1;color:var(--fjord);}

/* Mission Control — agent status + scheduled jobs */
.mission-add{display:grid;gap:8px;margin-top:14px;}
.mission-add input,.mission-add textarea{width:100%;box-sizing:border-box;padding:9px 11px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);font:inherit;font-size:.9rem;}
.mission-add textarea{min-height:60px;resize:vertical;}
.mission-cron{list-style:none;padding:0;margin:6px 0;display:grid;gap:8px;}
.mission-cron li{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:9px 11px;font-size:.9rem;}
.link-btn{background:none;border:0;color:var(--fjord);cursor:pointer;font:inherit;padding:0;text-decoration:underline;}
.agent-report{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);font-size:.92rem;}
.agent-report-h{color:var(--fjord);font-weight:600;margin-bottom:4px;text-transform:uppercase;font-size:.72rem;letter-spacing:.04em;}
.mc-modes{display:flex;align-items:center;gap:8px;margin:12px 0 8px;}
.mc-mode{padding:6px 12px;cursor:pointer;font:inherit;font-size:.85rem;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--muted);}
.mc-mode.active{border-color:var(--fjord);color:var(--text);background:rgba(93,121,160,.14);}
.mc-custom{margin-left:auto;font-size:.82rem;color:var(--fjord);}
.mc-panel{margin:8px 0;padding-top:10px;border-top:1px solid var(--line);}
.mc-panel h4{margin:0 0 6px;font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;color:var(--mist);}
/* Mission Control is data-heavy — give it a large, tall, scrollable surface (≥2× the 480px modal). */
#missionModal .modal-card{max-width:1200px;width:100%;}
#missionBody{max-height:82vh;overflow:auto;}
.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px;}              /* lean: two columns of panels */
.mc-grid .mc-panel{min-width:0;}
#missionModal .mission-cron{max-height:none;}                                /* let the ledger grow; #missionBody scrolls */
@media (max-width:680px){ #missionModal .modal-card{max-width:480px;} .mc-grid{grid-template-columns:1fr;} }
@media (max-width:760px){ .ws-layout{flex-direction:column;} .ws-sidebar{flex:auto;width:100%;} }
@media (max-width:760px){ .nav-usage .nav-usage-mo{display:none;} }
/* billing + admin modals */
.modal-card.modal-wide{max-width:760px;width:92vw;}
.billing-section{border-top:1px solid rgba(177,171,176,.15);padding:14px 0;}
.billing-section h4{margin:0 0 4px;}
.admin-totals{display:flex;flex-wrap:wrap;gap:18px;margin:6px 0 14px;font-size:.95rem;}
.admin-totals b{color:var(--fjord);}
.admin-table-wrap{max-height:52vh;overflow:auto;}
.admin-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.admin-table th,.admin-table td{text-align:left;padding:6px 8px;border-bottom:1px solid rgba(177,171,176,.12);white-space:nowrap;}
.admin-table th{color:var(--mist);font-weight:600;position:sticky;top:0;background:var(--navy,#0b1220);}
.admin-table .admin-limit{color:var(--amber);}
.usage-cap{margin-left:auto;}

.ws-nav{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.ws-nav button{
  font:inherit;font-size:.9rem;background:transparent;color:var(--soft);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:9px 14px;cursor:pointer;
}
.ws-nav button:hover{background:rgba(223,234,246,.06);}

/* ---------- pages ---------- */
.view-page{min-height:calc(100vh - 80px);}
.page{max-width:760px;margin:0 auto;padding:36px 24px;}
.page-narrow{max-width:520px;}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.page h2{font-size:1.7rem;}

.mem-list,.consent-list{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px;}
.mem-list li,.consent-list li{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 16px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
}
.mem-list .mem-body strong{display:block;}
.mem-list .mem-body small{color:var(--muted);}
.mem-tag{font-size:.7rem;color:var(--fjord);background:rgba(79,163,199,.14);padding:2px 8px;border-radius:20px;}
.forget{font:inherit;font-size:.82rem;background:transparent;color:var(--danger);border:1px solid rgba(191,123,90,.4);border-radius:8px;padding:5px 10px;cursor:pointer;white-space:nowrap;}
.forget:hover{background:rgba(191,123,90,.1);}

.consent-list .c-meta{color:var(--muted);font-size:.85rem;margin-top:4px;}
.revoke{font:inherit;font-size:.82rem;background:transparent;color:var(--soft);border:1px solid var(--line-strong);border-radius:8px;padding:5px 10px;cursor:pointer;white-space:nowrap;}
.revoke:hover{border-color:var(--danger);color:var(--danger);}

.export-tree{
  background:#081019;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px;color:var(--soft);font-size:.88rem;overflow:auto;
}
.export-actions{display:flex;gap:12px;margin:18px 0;flex-wrap:wrap;}

/* ---------- waitlist form ---------- */
.wait-form{display:grid;gap:16px;margin:20px 0;}
.wait-form label{display:grid;gap:6px;font-size:.9rem;color:var(--soft);}
.wait-form input[type=email]{
  font:inherit;font-size:1rem;color:var(--text);background:var(--panel);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:12px 14px;
}
.wait-form input:focus{outline:none;border-color:var(--fjord);}
.check{flex-direction:row;align-items:flex-start;gap:10px;font-size:.85rem;color:var(--muted);}
.check input{margin-top:3px;accent-color:var(--fjord);}
.form-msg{font-size:.9rem;margin:0;min-height:1.2em;}
.form-msg.ok{color:var(--fjord);}
.form-msg.err{color:var(--danger);}

/* ---------- modal ---------- */
/* keep the HTML `hidden` attribute working even though .modal/.warn set display:grid */
.modal[hidden],.warn[hidden]{display:none;}
.modal{position:fixed;inset:0;background:rgba(5,11,18,.72);display:grid;place-items:center;padding:20px;z-index:50;}
.modal-card{background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--radius);padding:22px;max-width:480px;width:100%;}
.modal-head{display:flex;justify-content:space-between;align-items:center;}
.modal-close{background:none;border:0;color:var(--muted);font-size:1.6rem;cursor:pointer;line-height:1;}
/* mode toggle (Simple ⇆ All OpenRouter models) */
.picker-modes{display:flex;gap:8px;margin:12px 0 0;}
.picker-mode{
  flex:1;padding:8px 10px;cursor:pointer;font:inherit;font-size:.85rem;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--muted);
}
.picker-mode.active{border-color:var(--fjord);color:var(--text);background:rgba(93,121,160,.14);}

/* type-to-filter box at the top of a picker */
.picker-search{
  width:100%;box-sizing:border-box;margin:12px 0 4px;padding:10px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--text);font:inherit;font-size:.92rem;
}
.picker-search:focus{outline:none;border-color:var(--fjord);}
.picker-search::placeholder{color:var(--muted);}

.model-list{list-style:none;padding:0;margin:10px 0;display:grid;gap:2px;max-height:46vh;overflow:auto;}
.model-list li{
  display:block;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 14px;
}
.model-list li:hover,.model-list li:focus{border-color:var(--fjord);outline:none;}
.model-list .m-head{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.model-list .m-name{font-weight:600;}
/* compact by default — description only appears on hover/keyboard focus */
.model-list .m-desc{font-size:.8rem;color:var(--muted);margin-top:5px;display:none;}
.model-list li:hover .m-desc,.model-list li:focus .m-desc,.model-list li:focus-within .m-desc{display:block;}
.model-list .m-none{cursor:default;color:var(--muted);font-size:.85rem;background:transparent;border:0;}
.model-list .m-chip{font-size:.7rem;padding:2px 8px;border-radius:20px;flex:none;}
.m-chip.eu{color:var(--fjord);background:rgba(93,121,160,.14);}
.m-chip.us{color:var(--amber);background:rgba(207,154,92,.14);}

/* ---------- privacy warn ---------- */
.warn{position:fixed;inset:0;background:rgba(5,11,18,.72);display:grid;place-items:center;padding:20px;z-index:60;}
.warn-card{background:var(--bg-2);border:1px solid rgba(207,154,92,.4);border-radius:var(--radius);padding:22px;max-width:460px;width:100%;}
.warn-card h4{color:var(--amber);}
.warn-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px;}

/* ---------- footer ---------- */
.foot{
  max-width:var(--maxw);margin:40px auto 0;padding:28px 24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;
}
.foot p{margin:.3em 0 0;}
.foot-links{display:flex;flex-direction:column;gap:6px;text-align:right;}
.foot-links a:hover{color:var(--text);}
.foot-note{font-size:.78rem;}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:28px;}
  .hero-art{order:-1;}
  .grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr;}
  .nav-links{gap:12px;}
  .usage-cap{margin-left:0;}
  .foot{flex-direction:column;}
  .foot-links{text-align:left;}
}

/* =====================================================================
   EARLY-STYLE THEME — full-bleed cabin photo as background, frameless text.
   Mirrors koja-intelligens-early: simple, no cards, no bordered/rounded
   frames around text. Strong text-shadow keeps copy readable over the photo.
   ===================================================================== */

/* photo behind everything + a soft scrim for legibility (fixed = stays put) */
body{background:var(--black,#040407);}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:url("assets/koja-cabin.jpg") center center / cover no-repeat;
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(4,4,7,.04) 0%, rgba(11,22,32,.16) 45%, rgba(4,4,7,.60) 100%),
    linear-gradient(180deg, rgba(4,4,7,.22), rgba(4,4,7,.55));
}
.nav{text-shadow:0 1px 14px rgba(4,4,7,.6);}

/* ---- frameless hero: copy sits on the right, over the photo ---- */
.hero-stage{
  min-height:calc(100vh - 84px);
  display:flex;align-items:center;justify-content:flex-end;
  padding:0 clamp(14px,2.5vw,46px) 0 clamp(24px,6vw,90px);  /* less right padding -> copy sits a bit further right */
}
.hero-copy{
  width:min(520px,46vw);display:flex;flex-direction:column;
  text-shadow:0 2px 30px rgba(4,4,7,.8);
}
.hero-copy h1{
  font-family:var(--font);   /* same system font as the top-left "Koja Intelligens" */
  font-weight:400;           /* not bold */
  color:var(--mist);         /* same mist colour as "Koja I" on the early site */
  font-size:clamp(23px,3.1vw,41px);  /* same size as the early site */
  letter-spacing:0;margin:.08em 0 .18em;
}
.hero-copy .tagline{font-size:1.3rem;color:var(--mist);margin:0 0 .55em;font-weight:600;}
.hero-copy .why-now{color:var(--mist);font-size:.92rem;margin:0 0 1.5em;max-width:42ch;}
.hero-copy .eyebrow{margin-bottom:8px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.hero-copy .fineprint{font-size:.78rem;color:var(--muted);margin:0;}
@media (max-width:860px){
  .hero-stage{justify-content:center;}
  .hero-copy{width:100%;}
}

/* ---- NO FRAMES: strip borders / boxed cards everywhere ---- */
.grid article,.how li,.hero-art,.grid{display:none;}      /* retire the old framed grid + SVG box */
.grid article,.ws-top,.chat,.usage,.page,.mem-list li,.consent-list li,
.export-tree,.modal-card,.warn-card,.msg,.model-list li{border:0 !important;}

/* value props as plain frameless columns inside a full-bleed scrim band */
.props{background:rgba(4,4,7,.34);}
.how{background:rgba(4,4,7,.30);}
.prop-list{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 34px;}
.prop-list h3{color:var(--text);font-size:1.06rem;margin:0 0 .3em;}
.prop-list p{color:var(--soft);margin:0;font-size:.95rem;}
.how ol li{background:transparent;border-radius:0;padding:7px 0;display:block;}
.how ol li b{color:var(--fjord);margin-right:8px;}
@media (max-width:860px){ .prop-list{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .prop-list{grid-template-columns:1fr;} }

/* workspace + pages: readable over the photo via a soft scrim (no border) */
.ws,.page{background:rgba(7,14,22,.60);border-radius:0;}
.ws-top,.usage{background:rgba(13,24,34,.52);}
.chat{background:rgba(8,16,24,.5);}
.msg.assistant{background:rgba(19,33,45,.72);}
.modal-card,.warn-card{background:rgba(8,16,24,.96);}
.foot{background:rgba(4,4,7,.4);}

/* =====================================================================
   FLAT WORKSPACE — frameless all the way: no chat bubbles, no scrim
   panel boxes, no pill/chip frames, square controls. Photo stays faintly
   behind; text-shadow carries legibility.
   ===================================================================== */

/* inner screens: photo shows faintly behind, no boxed reading panel */
.view-app,.view-page{background:rgba(4,4,7,.72);}
.ws,.page{background:transparent;text-shadow:0 1px 12px rgba(4,4,7,.85);}
.ws-top,.usage,.chat{background:transparent !important;border-radius:0;}

/* chat: flat text with a speaker label, no bubbles */
.msg{max-width:100%;padding:6px 0;border-radius:0;background:transparent !important;align-self:stretch;}
.msg p{margin:0;}
.msg.assistant::before{content:"Koja · ";color:var(--fjord);font-weight:600;}
.msg.user{color:var(--soft);}
.msg.user::before{content:"You · ";color:var(--muted);font-weight:600;}
.msg.note{border:0 !important;font-style:italic;color:var(--muted);text-align:left;}

/* kill elliptic frames (pills/chips) around text -> plain coloured text */
.route-chip,.mem-tag,.m-chip{background:transparent !important;border-radius:0 !important;padding:0 !important;}
.route-chip{color:var(--fjord);}
.route-chip.us{color:var(--amber);}

/* square everything to match the early build's flat look */
.btn,.chip,.composer input,.select select,.model-btn,.wait-form input[type=email],
.ws-nav button,.forget,.revoke,.modal-card,.warn-card,.meter,.meter-fill{border-radius:0 !important;}

/* lists: thin dividers, not boxes */
.mem-list li,.consent-list li,.model-list li{
  background:transparent !important;border-radius:0 !important;
  padding:12px 0 !important;border-bottom:1px solid var(--line) !important;
}

/* dialogs: flat solid surface so they read over the page */
.modal-card,.warn-card{background:rgba(6,12,18,.97) !important;}

/* =====================================================================
   LOGO + SKILLS  (photo palette: blues + warm window. No green.)
   ===================================================================== */

/* small hero logo — never large */
.hero-logo{width:40px;height:40px;display:block;margin:0 0 14px;}

/* skills bar in the workspace */
.skills-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;}
.skills-label{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;}
.skill-chips{display:flex;gap:8px;flex-wrap:wrap;}
.skill-chip{
  display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:.85rem;cursor:pointer;
  background:transparent;color:var(--soft);border:1px solid var(--line-strong);padding:6px 11px;border-radius:0;
}
.skill-chip:hover{border-color:var(--fjord);color:var(--text);}
.skill-chip.active{background:rgba(93,121,160,.20);border-color:var(--fjord);color:var(--text);}
.skill-chip.active .sk-name::before{content:"\2713 ";color:var(--blue-light);}
.skill-chip .sk-edit{opacity:.5;font-size:.95em;}
.skill-chip .sk-edit:hover{opacity:1;color:var(--fjord);}
.skill-add{
  font:inherit;font-size:.85rem;cursor:pointer;background:transparent;color:var(--fjord);
  border:1px dashed var(--line-strong);padding:6px 11px;border-radius:0;
}
.skill-add:hover{border-color:var(--fjord);}

/* skill editor (uses .modal) */
#skillModal label,#agentModal label{display:grid;gap:6px;margin:12px 0;font-size:.9rem;color:var(--soft);}
#skillModal input,#skillModal textarea,#agentModal input,#agentModal textarea{
  font:inherit;font-size:.95rem;color:var(--text);background:var(--panel);
  border:1px solid var(--line-strong);padding:10px 12px;border-radius:0;
}
#skillModal textarea,#agentModal textarea{min-height:84px;resize:vertical;}
.skill-modal-actions{display:flex;gap:10px;margin-top:10px;}

/* agent dropdown: warm window-amber text on a dark navy tone from the photo.
   appearance:none is required so Safari/Chrome actually honour the colours. */
.select select{
  -webkit-appearance:none;appearance:none;
  background-color:var(--panel-2);color:var(--mist);border:1px solid var(--line-strong);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b1abb0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;
}
.select select:focus{outline:none;border-color:var(--fjord);}
.select select option{background:var(--panel-2);color:var(--mist);}
.select select option[value="__new"]{color:var(--blue-light);}

/* reversed chat: newest turn on top, older below (scroll down for history) */
.turn{display:flex;flex-direction:column;gap:12px;}
.turn:not(:last-child){border-bottom:1px solid var(--line);padding-bottom:14px;}

/* workspace top controls: Agent / Model / Memory as equal-height boxes,
   bottoms aligned on one straight line */
.ws-selects{align-items:flex-end;}
.select select,.model-btn,.toggle{height:48px;box-sizing:border-box;}
.model-btn{justify-content:center;}
.toggle{
  background:var(--panel-2);border:1px solid var(--line-strong);border-radius:0;
  padding:0 14px;align-items:center;
}

/* workspace vertical order: controls → skills → my input → usage → chat (Koja's answers) */
.ws{display:flex;flex-direction:column;}
.ws-top{order:1;}
.skills-bar{order:2;}
.suggestions{order:3;}
.composer{order:4;}
.usage{order:5;}
.chat{order:6;}
.ws-nav{order:7;}

/* ----- skills dropdown next to agent (same look as the agent select) ----- */
.skills-select{position:relative;}
.skills-dd-btn{
  -webkit-appearance:none;appearance:none;cursor:pointer;text-align:left;
  height:48px;box-sizing:border-box;min-width:130px;
  background-color:var(--panel-2);color:var(--mist);border:1px solid var(--line-strong);
  font:inherit;font-size:.95rem;padding:0 28px 0 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b1abb0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.skills-dd-btn:focus{outline:none;border-color:var(--fjord);}
.skills-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;min-width:240px;
  background:#0b1119;border:1px solid var(--line-strong);padding:6px;
}
.skills-menu[hidden]{display:none;}
.skills-menu-row{
  display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;
  color:var(--mist);font-size:.9rem;
}
.skills-menu-row:hover{background:rgba(177,171,176,.08);}
.skills-menu-row input{accent-color:var(--fjord);width:15px;height:15px;pointer-events:none;}
.skills-menu-row .sk-name{flex:1;}
.skills-menu-row .sk-edit{opacity:.55;}
.skills-menu-row .sk-edit:hover{opacity:1;color:var(--fjord);}
.skills-menu-row.locked{cursor:default;}
.skills-menu-row.locked:hover{background:none;}
.skills-menu-row .sk-lock{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;opacity:.6;border:1px solid currentColor;border-radius:6px;padding:1px 6px;}
.skills-menu-row .sk-consent{font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;opacity:.75;color:var(--amber);border:1px solid currentColor;border-radius:6px;padding:1px 6px;}
.skills-menu .skill-add{display:block;width:100%;margin-top:6px;text-align:center;}

/* ----- storage + memory stacked; memory becomes a box under the summary ----- */
.ws-storage{flex-direction:column;align-items:flex-end;gap:8px;}
.storage-summary{display:flex;align-items:center;gap:8px;}
.memory-box{justify-content:center;}

/* skills filter box (type to narrow, alphabetical) */
.skills-search{
  width:100%;font:inherit;font-size:.9rem;color:var(--text);background:var(--panel-2);
  border:1px solid var(--line-strong);padding:8px 10px;margin-bottom:6px;border-radius:0;
}
.skills-search:focus{outline:none;border-color:var(--fjord);}
.skills-menu-empty{padding:8px 10px;color:var(--muted);font-size:.85rem;}

/* taller question box (same width); Send button sits at the bottom */
.composer{align-items:flex-end;}
.composer textarea{
  flex:1;font:inherit;font-size:1rem;color:var(--text);background:var(--panel);
  border:none;border-radius:0;padding:12px 14px;
  min-height:130px;resize:vertical;line-height:1.45;
}
.composer textarea:focus{outline:none;}

/* ----- file upload (teaching material) ----- */
.dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px dashed var(--line-strong);padding:34px 20px;cursor:pointer;text-align:center;margin:18px 0;
  color:var(--soft);background:rgba(13,24,34,.4);
}
.dropzone.drag{border-color:var(--fjord);background:rgba(93,121,160,.14);}
.dz-big{font-size:1rem;color:var(--text);}
.dz-small{font-size:.8rem;color:var(--muted);}
.file-list{list-style:none;padding:0;margin:0 0 20px;}
.file-list li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);}
.file-kind{font-size:.7rem;color:var(--fjord);min-width:62px;text-transform:uppercase;letter-spacing:.06em;}
.file-body{flex:1;}
.file-body strong{display:block;color:var(--text);}
.file-body small{color:var(--muted);}

/* ----- estimated memory value banner ----- */
.mem-value{
  border-left:3px solid var(--amber);padding:10px 14px;margin:14px 0;
  background:rgba(207,154,92,.08);color:var(--soft);font-size:.92rem;
}
.mem-value b{color:var(--amber);}

/* personal-material folders */
.files-toolbar{display:flex;gap:14px;align-items:flex-end;margin:6px 0 2px;}
.folder-head{
  display:block !important;border-bottom:0 !important;padding:16px 0 4px !important;
  color:var(--fjord);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
}

/* markdown rendering inside chat messages (tables, code, lists) */
.msg table.md-table{border-collapse:collapse;margin:8px 0;width:100%;font-size:.92rem;}
.msg .md-table th,.msg .md-table td{border:1px solid var(--line-strong);padding:6px 10px;text-align:left;vertical-align:top;}
.msg .md-table th{color:var(--text);font-weight:600;background:rgba(177,171,176,.06);}
.msg pre.md-pre{background:#070b12;border:1px solid var(--line);padding:10px 12px;overflow:auto;font-size:.85rem;margin:8px 0;}
.msg code{background:rgba(177,171,176,.14);padding:1px 5px;font-size:.9em;}
.msg pre.md-pre code{background:none;padding:0;}
.msg h3,.msg h4,.msg h5,.msg h6{margin:.5em 0 .3em;color:var(--text);}
.msg ul,.msg ol{margin:.4em 0;padding-left:1.4em;}
.msg li{margin:.2em 0;}
.msg a{color:var(--fjord);text-decoration:underline;}

/* "add from computer" buttons in the Files view */
.src-btn{font:inherit;font-size:.85rem;cursor:pointer;background:var(--panel-2);color:var(--soft);border:1px solid var(--line-strong);border-radius:0;padding:8px 12px;}
.src-btn:hover{border-color:var(--fjord);color:var(--text);}

/* login / account UI */
.auth-user{font-size:.92rem;color:var(--soft);}
.auth-user .auth-plan{color:var(--amber);text-transform:uppercase;font-size:.72rem;letter-spacing:.05em;}
.auth-user a{color:var(--fjord);}
#authModal label{display:grid;gap:6px;margin:12px 0;font-size:.9rem;color:var(--soft);}
#authModal input{font:inherit;font-size:.95rem;color:var(--text);background:var(--panel);border:1px solid var(--line-strong);padding:10px 12px;border-radius:0;}

/* parallel agent panels (1/2/3 side by side) */
.panel-count{display:flex;gap:4px;}
.pc-btn{font:inherit;font-size:.9rem;background:var(--panel-2);color:var(--soft);border:1px solid var(--line-strong);width:34px;height:48px;cursor:pointer;}
.pc-btn.active{border-color:var(--fjord);color:var(--text);}
.panels{display:flex;gap:12px;margin-top:14px;align-items:flex-start;}
.panel{flex:1;min-width:0;display:flex;flex-direction:column;background:rgba(8,16,24,.5);border:1px solid var(--line);}
.panel-head{padding:8px;border-bottom:1px solid var(--line);}
.panel-head select{width:100%;font:inherit;color:var(--mist);background:var(--panel-2);border:1px solid var(--line-strong);padding:6px 8px;}
.panel-log{padding:12px;min-height:300px;display:flex;flex-direction:column;gap:10px;}
@media (max-width:760px){ .panels{flex-direction:column;} }

/* make the hidden attribute win over .panels/.chat display:flex */
.panels[hidden]{display:none;}
.chat[hidden]{display:none;}

/* workspace 30% wider (860 -> 1118) */
.ws{max-width:1118px;}