/* ═══════════════════════════════════════════════════════════
   MANY MINDS OS · design system v3  (Naoko Studio®)
   Tokeny P113 + tryb "showroom" (dark editorial) i "console" (light cream)
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --mm-purple:#4542B4; --mm-blue:#1A59B6; --mm-magenta:#C1478A; --mm-red:#E44E53; --mm-orange:#F8991B;
  --mm-grad:linear-gradient(90deg,var(--mm-purple),var(--mm-blue),var(--mm-magenta),var(--mm-red),var(--mm-orange));
  --cream:#FAF6EE; --cream-2:#F2ECDF; --ink:#141416; --ink-2:#2B2B31; --mute:#6E6E78; --line:rgba(20,20,22,.10);
  --card:#FFFFFF; --bg:var(--cream); --fg:var(--ink);
  --ok:#1F9D62; --warn:#D98A00; --bad:#D6453D; --plan:#8E8E99;
  --r:18px; --r-s:12px; --shadow:0 10px 40px rgba(20,20,22,.08); --shadow-2:0 30px 80px rgba(20,20,22,.14);
  --font:'Inter',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --serif:'Instrument Serif',Georgia,serif;
  --accent-purple:var(--mm-purple); --accent-blue:var(--mm-blue); --accent-magenta:var(--mm-magenta); --accent-red:var(--mm-red); --accent-orange:var(--mm-orange);
}
.dark, [data-mode="dark"]{
  --bg:#0B0B0E; --fg:#F4F1EA; --card:#141418; --ink:#F4F1EA; --ink-2:#D9D5CC; --mute:#8B8B96; --line:rgba(244,241,234,.10);
  --shadow:0 10px 40px rgba(0,0,0,.45); --shadow-2:0 30px 80px rgba(0,0,0,.6);
}
*{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} img,video{max-width:100%;display:block}
button{font:inherit;cursor:pointer}
::selection{background:var(--mm-magenta);color:#fff}
.gradbar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--mm-grad);z-index:1000}
.mono{font-family:var(--mono)} .serif{font-family:var(--serif);font-weight:400}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.gradtext{background:var(--mm-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(18px,4vw,56px)}
.hidden{display:none!important}

/* ── pills / chips ── */
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);background:transparent;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.pill.live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.pill.beta{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.pill.plan{color:var(--plan);border-color:color-mix(in srgb,var(--plan) 40%,transparent)}
.pill.building{color:var(--mm-blue);border-color:color-mix(in srgb,var(--mm-blue) 40%,transparent)}
.pill.live i{box-shadow:0 0 0 0 var(--ok);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.chip{display:inline-block;padding:3px 9px;border-radius:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--ink-2)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);font-weight:600;font-size:14px;letter-spacing:.01em;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn.ghost{background:transparent;color:var(--fg)}
.btn.grad{background:var(--mm-grad);border:0;color:#fff}
.btn.sm{padding:9px 14px;font-size:13px}

/* ── cards & tiles ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--shadow)}
.tile{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r);min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;cursor:pointer}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.tile .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);filter:saturate(1.05)}
.tile:hover .bg{transform:scale(1.06)}
.tile .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,14,0) 20%,rgba(10,10,14,.82) 100%)}
.tile.img{color:#fff}
.tile h3{margin:6px 0 4px;font-size:22px;letter-spacing:-.02em;font-weight:700}
.tile p{margin:0;font-size:13.5px;opacity:.85;max-width:44ch}
.tile .top{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.tile.accent-purple{--a:var(--mm-purple)} .tile.accent-blue{--a:var(--mm-blue)} .tile.accent-magenta{--a:var(--mm-magenta)} .tile.accent-red{--a:var(--mm-red)} .tile.accent-orange{--a:var(--mm-orange)}
.tile .bar{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--a,var(--mm-purple))}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bento{display:grid;gap:16px;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(170px,auto)}
.bento .span2{grid-column:span 2} .bento .span3{grid-column:span 3} .bento .span4{grid-column:span 4} .bento .span6{grid-column:span 6} .bento .row2{grid-row:span 2}
@media(max-width:1100px){.grid.c4{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:repeat(2,1fr)} .bento{grid-template-columns:repeat(2,1fr)} .bento .span3,.bento .span4,.bento .span6{grid-column:span 2}}
@media(max-width:640px){.grid.c2,.grid.c3,.grid.c4,.bento{grid-template-columns:1fr} .bento .span2,.bento .span3,.bento .span4,.bento .span6{grid-column:span 1}}

/* ── KPI ── */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:14px 16px}
.kpi .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.kpi .v{font-size:26px;font-weight:700;letter-spacing:-.03em;margin-top:6px;line-height:1.1}
.kpi .s{font-size:12px;color:var(--mute);margin-top:4px}
.kpi .d{font-family:var(--mono);font-size:11px;margin-left:6px}
.kpi .d.good{color:var(--ok)} .kpi .d.bad{color:var(--bad)}
.skel{display:inline-block;height:1em;width:60%;border-radius:6px;background:linear-gradient(90deg,var(--line),color-mix(in srgb,var(--fg) 12%,transparent),var(--line));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── pipeline ── */
.pipe{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pipe span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font-size:12.5px;background:var(--card)}
.pipe span b{font-family:var(--mono);font-size:10px;color:var(--mute)}
.pipe em{opacity:.35;font-style:normal}

/* ── agents list ── */
.agents{display:grid;gap:10px}
.agent{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.agent .av{width:36px;height:36px;border-radius:10px;background:var(--mm-grad);display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}
.agent b{display:block;font-size:14px} .agent small{color:var(--mute);font-size:12.5px}

/* ── nav / sidebar (console) ── */
.shell{display:grid;grid-template-columns:264px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid var(--line);padding:18px 14px;background:color-mix(in srgb,var(--card) 70%,var(--bg))}
.side .logo{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.side .logo img{width:30px;height:30px;border-radius:8px}
.side .logo b{font-size:14px;letter-spacing:-.01em;display:block;line-height:1.1} .side .logo small{font-size:11px;color:var(--mute)}
.navgrp{margin-top:10px}
.navhdr{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);cursor:pointer;user-select:none;border-radius:8px}
.navhdr:hover{background:color-mix(in srgb,var(--fg) 5%,transparent)}
.navhdr .cnt{font-size:10px;opacity:.7}
.navgrp.closed .navitems{display:none}
.navgrp.closed .navhdr .car{transform:rotate(-90deg)}
.navhdr .car{transition:transform .2s;display:inline-block}
.navitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;font-size:13.5px;color:var(--ink-2)}
.navitem:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.navitem.on{background:var(--fg);color:var(--bg)}
.navitem .dot{width:7px;height:7px;border-radius:50%;flex:none}
.navitem .dot.live{background:var(--ok)} .navitem .dot.beta{background:var(--warn)} .navitem .dot.plan{background:var(--plan)} .navitem .dot.building{background:var(--mm-blue)}
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px clamp(16px,3vw,36px);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px)}
.crumbs{font-family:var(--mono);font-size:12px;color:var(--mute)} .crumbs b{color:var(--fg)}
.who{display:flex;align-items:center;gap:10px;font-size:13px}
.who .av{width:30px;height:30px;border-radius:50%;background:var(--mm-grad);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.content{padding:clamp(18px,3vw,36px)}
.sec{margin-bottom:34px}
.sec h2{font-size:22px;letter-spacing:-.02em;margin:0 0 4px}
.sec .sub{color:var(--mute);font-size:14px;margin:0 0 16px}
.hero-mod{position:relative;overflow:hidden;border-radius:24px;min-height:300px;color:#fff;padding:34px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;margin-bottom:26px}
.hero-mod .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.hero-mod .veil{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,8,12,.1),rgba(8,8,12,.85))}
.hero-mod h1{font-size:clamp(30px,4vw,52px);margin:8px 0 6px;letter-spacing:-.03em;line-height:1}
.hero-mod p{max-width:70ch;opacity:.9;font-size:15.5px;margin:0}
.hero-mod .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hero-mod .meta .pill{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.25)}
.two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px}
@media(max-width:1000px){.shell{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;bottom:0;width:280px;transform:translateX(-100%);transition:transform .3s;z-index:60;background:var(--bg)}.side.open{transform:none}.two{grid-template-columns:1fr}.burger{display:inline-flex!important}}
.burger{display:none;border:1px solid var(--line);background:var(--card);border-radius:10px;padding:8px 10px}

/* ── links list ── */
.links{display:grid;gap:8px}
.lnk{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px}
.lnk:hover{border-color:var(--fg)}
.lnk small{color:var(--mute)} .lnk .arr{opacity:.5}
.lnk.dead{opacity:.55;cursor:default}

/* ── assistant ── */
.assist{border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:18px}
.assist textarea{width:100%;min-height:92px;border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;background:var(--bg);color:var(--fg);resize:vertical}
.assist .out{white-space:pre-wrap;font-size:14px;line-height:1.55;margin-top:14px;padding:14px;border-radius:12px;background:var(--bg);border:1px dashed var(--line);min-height:40px}
.assist .row{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}

/* ── gate ── */
.gate{position:fixed;inset:0;z-index:500;display:grid;place-items:start center;overflow:auto;padding:5vh 0 40px;background:var(--bg)}
.gate .box{width:min(520px,92vw);background:var(--card);border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow-2)}
.gate h1{font-size:28px;letter-spacing:-.03em;margin:8px 0 4px}
.gate input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--fg);font:inherit;font-size:15px}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin:14px 0;max-height:34vh;overflow:auto;padding:2px}
.person{border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center;cursor:pointer;background:var(--bg);font-size:12.5px}
.person:hover,.person.on{border-color:var(--fg);background:var(--card)}
.person .av{width:34px;height:34px;border-radius:50%;background:var(--mm-grad);color:#fff;display:grid;place-items:center;font-weight:700;margin:0 auto 6px;font-size:12px}
.person small{display:block;color:var(--mute);font-size:10.5px;line-height:1.2;margin-top:2px}

/* ── toasts, modal ── */
.toast{position:fixed;right:18px;bottom:18px;z-index:900;background:var(--fg);color:var(--bg);padding:12px 16px;border-radius:12px;font-size:13.5px;box-shadow:var(--shadow-2);max-width:380px}
.modal{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.5);display:grid;place-items:center;padding:20px}
.modal .box{background:var(--card);border-radius:22px;padding:26px;width:min(640px,96vw);max-height:90vh;overflow:auto}
.modal input,.modal select{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font:inherit;margin:6px 0 12px}

/* ── table ── */
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.tblwrap{overflow-x:auto}

/* ── command palette ── */
.cmdk{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.45);display:grid;place-items:start center;padding-top:12vh}
.cmdk .box{width:min(640px,94vw);background:var(--card);border-radius:18px;box-shadow:var(--shadow-2);overflow:hidden}
.cmdk input{width:100%;padding:16px 18px;border:0;border-bottom:1px solid var(--line);font:inherit;font-size:16px;background:transparent;color:var(--fg);outline:0}
.cmdk .res{max-height:50vh;overflow:auto}
.cmdk .r{padding:11px 18px;display:flex;justify-content:space-between;gap:10px;cursor:pointer;font-size:14px}
.cmdk .r:hover,.cmdk .r.on{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.cmdk .r small{color:var(--mute);font-family:var(--mono);font-size:11px}
kbd{font-family:var(--mono);font-size:10.5px;border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--mute)}

/* ── reveal ── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}