/* Layout: Platform8 control-room language — dark-first with a light twin, Unbounded display, mono labels, pill controls; left rail for navigation, content column for each list */
:root{
  --bg:#0A0710; --bg-2:#110C18; --bg-3:#18111F; --glass:rgba(10,7,16,.78);
  --fg:#F4EEF3; --muted:#A99DAB; --dim:#6F6473;
  --line:rgba(249,163,192,.13); --line-2:rgba(249,163,192,.24);
  --rose:#F2558C; --blush:#F9A3C0; --ice:#9ED9E8; --on-rose:#FFFFFF;
  --live:#7FE0B0; --pilot:#9ED9E8; --build:#E8C27A; --plan:#8E8494; --down:#F28B7C;
  --bar-ok:#3FB37C; --bar-warn:#D9A845; --bar-down:#E0604E; --bar-none:#2A2230;
  --shadow:0 18px 40px -18px rgba(0,0,0,.7),0 0 0 1px var(--line);
  --f-display:"Unbounded","Hanken Grotesk",system-ui,sans-serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --bg:#F6F1F4; --bg-2:#FFFFFF; --bg-3:#F1E8EE; --glass:rgba(246,241,244,.85);
  --fg:#1F1622; --muted:#5D5162; --dim:#887B8C;
  --line:rgba(58,46,51,.11); --line-2:rgba(58,46,51,.22);
  --rose:#C43D6E; --blush:#A8325D; --ice:#1D7891; --on-rose:#FFFFFF;
  --live:#178350; --pilot:#1D7891; --build:#98670A; --plan:#7A6F80; --down:#B83A28;
  --bar-ok:#2E9B62; --bar-warn:#D49A2A; --bar-down:#CF4A36; --bar-none:#E6DCE2;
  --shadow:0 18px 40px -18px rgba(58,46,51,.35),0 0 0 1px var(--line);
  color-scheme:light}}
:root[data-theme="light"]{
  --bg:#F6F1F4; --bg-2:#FFFFFF; --bg-3:#F1E8EE; --glass:rgba(246,241,244,.85);
  --fg:#1F1622; --muted:#5D5162; --dim:#887B8C;
  --line:rgba(58,46,51,.11); --line-2:rgba(58,46,51,.22);
  --rose:#C43D6E; --blush:#A8325D; --ice:#1D7891; --on-rose:#FFFFFF;
  --live:#178350; --pilot:#1D7891; --build:#98670A; --plan:#7A6F80; --down:#B83A28;
  --bar-ok:#2E9B62; --bar-warn:#D49A2A; --bar-down:#CF4A36; --bar-none:#E6DCE2;
  --shadow:0 18px 40px -18px rgba(58,46,51,.35),0 0 0 1px var(--line);
  color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html,body{background:var(--bg)}
body{color:var(--fg);font:400 15px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(60% 40% at 85% 0%,color-mix(in srgb,var(--rose) 9%,transparent),transparent 70%),radial-gradient(40% 30% at 30% 0%,color-mix(in srgb,var(--ice) 6%,transparent),transparent 70%)}
.content{position:relative;z-index:1}
.side{z-index:2}
#layer{position:relative;z-index:50}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--blush);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4{margin:0;text-wrap:balance}
.mono{font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums}
svg{flex:none}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:264px minmax(0,1fr);align-items:start}
.side{position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;display:flex;flex-direction:column;background:color-mix(in srgb,var(--bg-2) 70%,transparent);border-right:1px solid var(--line);
  padding:calc(20px + env(safe-area-inset-top,0px)) 14px calc(16px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 20px;text-decoration:none;color:var(--fg)}
.b-mono{height:22px;width:auto;color:var(--blush)}
.b-word{height:10.5px;width:auto}
.brand .sep{width:1px;height:16px;background:var(--line-2)}
.brand .prod{font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.side .new{width:100%;margin-bottom:22px}
.sec{display:grid;gap:3px;margin-bottom:22px}
.sec-t{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:0 12px 10px}
.ni{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:11px;align-items:center;height:38px;padding:0 12px;border:0;border-radius:99px;background:none;color:var(--muted);font:500 13px/1 var(--f-mono);text-decoration:none;text-align:left;width:100%;transition:color .2s,background .2s}
.ni span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ni svg{color:var(--dim)}
.ni:hover{color:var(--fg);background:var(--bg-3)}
.ni[aria-current="page"]{color:var(--fg);background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2),0 0 18px -6px var(--rose)}
.ni[aria-current="page"] svg{color:var(--rose)}
.ni .n{font:500 11px/1 var(--f-mono);color:var(--dim)}
.side-foot{margin-top:auto;display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--line)}
.sysmini{display:flex;align-items:center;gap:9px;height:34px;padding:0 12px;border-radius:99px;color:var(--muted);text-decoration:none;font:500 11.5px/1 var(--f-mono);letter-spacing:.04em}
.sysmini:hover{background:var(--bg-3);color:var(--fg)}
.sysmini i{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 22%,transparent)}
.acct{position:relative}
.acct-btn{display:grid;grid-template-columns:28px minmax(0,1fr) 12px;gap:10px;align-items:center;width:100%;height:48px;padding:0 10px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);text-align:left}
.acct-btn:hover,.acct-btn[aria-expanded="true"]{border-color:var(--line-2)}
.acct-btn .nm{display:grid;line-height:1.25;min-width:0}
.acct-btn .nm b{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-btn .nm small{font:500 10.5px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.acct-btn svg{color:var(--muted)}
.acct .menu{top:auto;bottom:calc(100% + 6px);left:0;right:auto;width:224px}
.acct .opt{grid-template-columns:16px auto}
.acct .opt svg{visibility:visible;color:var(--muted)}
.side .login{width:100%}
.content{min-width:0;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}
.mtop{display:none}
@media (max-width:960px){
  .shell{display:block}
  .wrap{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
  .mtop{display:flex;align-items:center;gap:8px;position:sticky;top:env(safe-area-inset-top,0px);z-index:30;height:60px;background:var(--bg);border-bottom:1px solid var(--line);
    padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .mtop .brand{padding:0}
  .mtop .btn{margin-left:auto}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:47;width:min(292px,86vw);height:auto;background:var(--bg-2);transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.7,.2,1);box-shadow:var(--shadow);visibility:hidden}
  body.drawer .side{transform:none;visibility:visible}
  .side-scrim{position:fixed;inset:0;z-index:46;background:rgb(10 7 16 / .55)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:99px;border:1px solid var(--line-2);background:transparent;color:var(--fg);font:600 13.5px/1 var(--f-body);white-space:nowrap;transition:transform .2s,border-color .2s,background .2s}
.btn:hover{border-color:var(--blush)}
.btn.primary{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.accent{background:var(--fg);border-color:var(--fg);color:var(--bg);box-shadow:0 8px 24px -12px var(--rose)}
.btn.accent:hover{transform:translateY(-1px)}
.btn.ghost{border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--fg)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btn .sm{display:none}
@media (max-width:480px){.mtop .brand .sep,.mtop .brand .prod{display:none}.btn .lg{display:none}.btn .sm{display:inline}}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--rose),color-mix(in srgb,var(--rose) 40%,var(--ice)));color:#fff;font:600 11px/1 var(--f-mono);flex:none}
.iconbtn{width:40px;height:40px;border:1px solid var(--line);border-radius:99px;background:none;display:grid;place-items:center;color:var(--muted)}
.iconbtn:hover{color:var(--fg);border-color:var(--line-2)}

/* ---------- hero ---------- */
main{padding-block:40px 88px;flex:1}
.proto{display:flex;gap:10px;align-items:baseline;font:400 12px/1.5 var(--f-mono);color:var(--dim);margin:0 0 28px}
.tag-ex{font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px dashed var(--line-2);border-radius:99px;padding:4px 8px;white-space:nowrap}
.crumb{display:flex;flex-wrap:wrap;gap:8px;font:500 12px/1.4 var(--f-mono);color:var(--dim);margin-bottom:22px}
.crumb b{color:var(--rose);font-weight:500}
.eyebrow{font:500 12px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blush);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.head{margin-bottom:28px}
.head h1{font:400 clamp(34px,5vw,64px)/1.04 var(--f-display);letter-spacing:-.02em;margin-top:16px;max-width:18ch}
.head .lede{margin:16px 0 0;color:var(--muted);font-size:clamp(16px,1.4vw,18px);max-width:60ch}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:28px}
.stat{position:relative;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--bg-2);display:flex;flex-direction:column;gap:8px}
.stat p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.45;padding-right:36px}
.stat b{position:absolute;right:14px;top:10px;font:500 26px/1 var(--f-display);color:var(--line-2)}

/* ---------- status label (P8) ---------- */
.status,.pill{display:inline-flex;align-items:center;gap:7px;font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.status::before,.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.pill i{display:none}
.s-new{color:var(--plan)} .s-review{color:var(--pilot)} .s-doing{color:var(--blush)} .s-soon{color:var(--build)} .s-shipped{color:var(--live)}
.app{color:var(--fg)}
.kind-bug{color:var(--down)} .kind-feature{color:var(--blush)}

/* ---------- toolbar ---------- */
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.search{flex:1 1 260px;min-width:0;position:relative}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--dim)}
.search input{width:100%;height:42px;border:1px solid var(--line);border-radius:99px;background:var(--bg-2);padding:0 44px 0 38px;font-size:14px}
.search input:focus{border-color:var(--line-2);outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 12%,transparent)}
.search input::placeholder{color:var(--dim)}
.search kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:500 11px/1 var(--f-mono);color:var(--dim);border:1px solid var(--line-2);border-radius:6px;padding:3px 6px}
.filters{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.dd{position:relative}
.dd-btn{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 14px 0 16px;border:1px solid var(--line);border-radius:99px;background:var(--bg-2);white-space:nowrap;font:500 12.5px/1 var(--f-mono)}
.dd-btn:hover{border-color:var(--line-2)}
.dd-btn .k{color:var(--dim)}
.dd-btn .v{color:var(--fg)}
.dd-btn.on{border-color:var(--rose);box-shadow:0 0 18px -8px var(--rose)}
.dd-btn svg{color:var(--dim)}
.menu{position:absolute;top:calc(100% + 6px);right:-7px;z-index:35;background:var(--bg-2);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow);padding:6px;width:max-content;display:grid;gap:1px}
.menu .mh{font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:10px 12px 8px}
.opt{display:grid;grid-template-columns:16px auto 1fr;align-items:center;gap:9px;padding:0 12px;height:36px;border:0;border-radius:10px;background:none;text-align:left;white-space:nowrap;font-size:14px}
.opt .c{font:500 11.5px/1 var(--f-mono);color:var(--dim);text-align:right;padding-left:24px}
.opt:hover{background:var(--bg-3)}
.opt[aria-checked="true"]{background:var(--bg-3);font-weight:600}
.opt svg{color:var(--rose);visibility:hidden}
.opt[aria-checked="true"] svg{visibility:visible}
.menu-scrim{display:none}
@media (max-width:560px){
  .menu{position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;border-radius:20px 20px 0 0;padding:8px max(12px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
  .opt{height:46px}
  .menu-scrim{display:block;position:fixed;inset:0;z-index:34;background:rgb(10 7 16 / .55)}
  .filters{margin-left:0;width:100%;justify-content:flex-start}
  .acct .menu{position:absolute;left:0;right:auto;bottom:calc(100% + 6px);top:auto;width:224px;border-radius:16px;padding:6px}
}
.active{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px;font:500 12px/1 var(--f-mono);color:var(--dim)}
.token{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 4px 0 12px;border-radius:99px;border:1px solid var(--line-2);color:var(--blush)}
.token button{border:0;background:none;width:20px;height:20px;display:grid;place-items:center;border-radius:99px;color:var(--dim)}
.token button:hover{background:var(--bg-3);color:var(--fg)}
.linkbtn{border:0;background:none;color:var(--dim);text-decoration:underline;text-underline-offset:3px;padding:0 6px;font:inherit}
.linkbtn:hover{color:var(--fg)}

/* ---------- board / list (P8 sboard) ---------- */
.list{border:1px solid var(--line);border-radius:18px;background:var(--bg-2);overflow:hidden;margin:0;padding:0;list-style:none}
.row{display:grid;grid-template-columns:48px minmax(0,1fr) 150px;gap:18px;align-items:center;padding:18px 22px;transition:background .25s}
.row+.row{border-top:1px solid var(--line)}
.row:hover{background:var(--bg-3)}
.row-main{min-width:0;border:0;background:none;padding:0;text-align:left;display:grid;gap:5px}
.row-title{font:500 16px/1.3 var(--f-display);letter-spacing:-.01em;color:var(--fg)}
.row-desc{color:var(--muted);font-size:14px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.row-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--dim);font:500 11.5px/1.4 var(--f-mono)}
.row-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.row-meta .app{color:var(--muted)}
.wk{font-size:13.5px;color:var(--muted);margin-top:6px;display:flex;gap:8px;align-items:baseline}
.wk b{font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--build);white-space:nowrap}
.row-side{display:flex;justify-content:flex-end}
.vote{width:48px;height:52px;border:1px solid var(--line-2);border-radius:14px;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:500 13px/1 var(--f-mono);color:var(--muted);transition:border-color .2s,color .2s,box-shadow .2s}
.vote:hover{border-color:var(--rose);color:var(--fg)}
.vote[aria-pressed="true"]{border-color:var(--rose);color:var(--blush);box-shadow:0 0 18px -6px var(--rose)}
@media (max-width:700px){
  .row{grid-template-columns:48px minmax(0,1fr);padding:16px}
  .row-side{grid-column:2;justify-content:flex-start}
  .row-desc{-webkit-line-clamp:2}
}
.empty{padding:44px 16px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--fg);font:500 15px/1.3 var(--f-display);margin-bottom:6px}

/* ---------- roadmap ---------- */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;align-items:start}
@media (max-width:1280px){.board{grid-template-columns:repeat(5,236px);overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}.board .col{scroll-snap-align:start}}
@media (max-width:640px){.board{grid-template-columns:1fr;overflow:visible}}
.col{min-width:0;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--bg-2) 60%,transparent);padding:14px}
.col-h{display:flex;align-items:center;gap:9px;padding:4px 6px 14px}
.col-h .sw{width:7px;height:7px;border-radius:50%}
.col-h h2{font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.col-h .mono{margin-left:auto;font:500 22px/1 var(--f-display);color:var(--line-2)}
.col-list{display:grid;gap:8px}
.card{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);padding:14px;text-align:left;display:grid;gap:12px;width:100%;transition:border-color .25s,transform .25s,box-shadow .25s}
.card:hover{border-color:var(--rose);transform:translateY(-2px);box-shadow:0 8px 20px -10px var(--rose)}
.card h3{font:600 14.5px/1.4 var(--f-body)}
.card .ft{display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--dim);font:500 11.5px/1 var(--f-mono)}
.card .ft .mono{display:flex;align-items:center;gap:4px}

/* ---------- releases ---------- */
.rels{display:grid;border:1px solid var(--line);border-radius:18px;background:var(--bg-2);overflow:hidden}
.rel{display:grid;grid-template-columns:200px minmax(0,1fr);gap:32px;padding:28px 26px}
.rel+.rel{border-top:1px solid var(--line)}
.rel-side{display:grid;gap:8px;align-content:start}
.ver{font:500 12px/1 var(--f-mono);display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:99px;border:1px solid var(--line-2);color:var(--blush);width:max-content}
.rel-side .d{color:var(--dim);font:500 12px/1.5 var(--f-mono)}
.rel-main{min-width:0;display:grid;gap:12px}
.rel-main h2{font:500 22px/1.15 var(--f-display);letter-spacing:-.015em}
.rel-main .sub{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:var(--dim);font:500 11.5px/1 var(--f-mono)}
.rel-main .sub .app{color:var(--muted)}
.notes{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.notes li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:baseline;color:var(--muted)}
.ntag{font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.ntag::before{content:"";width:6px;height:6px;border:1.5px solid currentColor;border-radius:2px;transform:rotate(45deg)}
.ntag.new{color:var(--blush)} .ntag.imp{color:var(--pilot)} .ntag.fix{color:var(--live)}
@media (max-width:760px){.rel{grid-template-columns:1fr;gap:14px;padding:22px 18px}.rel-side{display:flex;gap:12px;align-items:center}}

/* ---------- status ---------- */
.overall{display:flex;align-items:center;gap:14px;margin-top:22px;font:500 12px/1 var(--f-mono);color:var(--dim)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px color-mix(in srgb,var(--live) 22%,transparent);animation:beat 2.4s ease-in-out infinite}
@keyframes beat{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--live) 8%,transparent)}}
.sys{border:1px solid var(--line);border-radius:18px;background:var(--bg-2);overflow:hidden}
.sys-g{padding:16px 22px 12px;font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);border-top:1px solid var(--line)}
.sys-g:first-child{border-top:0}
.comp{padding:16px 22px 18px;border-top:1px solid var(--line);display:grid;gap:12px}
.sys-g+.comp{border-top:0;padding-top:4px}
.comp-l{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.comp-l .nm{font:500 16px/1.2 var(--f-display);letter-spacing:-.01em}
.comp-l .sb{color:var(--muted);font-size:13.5px}
.comp-l .r{margin-left:auto;display:flex;gap:16px;align-items:center}
.comp-l .up{color:var(--dim)}
.comp-l .st{font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--live);display:inline-flex;align-items:center;gap:7px}
.comp-l .st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 22%,transparent)}
.bars{display:grid;grid-template-columns:repeat(90,minmax(0,1fr));gap:2px;height:32px}
.bars i{border-radius:3px;background:var(--bar-ok);opacity:.92}
.bars i:hover{opacity:1;filter:brightness(1.15)}
.bars i.w{background:var(--bar-warn)} .bars i.d{background:var(--bar-down)} .bars i.n{background:var(--bar-none)}
@media (max-width:640px){.bars{grid-template-columns:repeat(45,minmax(0,1fr))}.bars i:nth-child(-n+45){display:none}}
.axis{display:flex;justify-content:space-between;color:var(--dim);font-size:11px}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font:500 11.5px/1 var(--f-mono);color:var(--dim);align-items:center}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:10px;height:10px;border-radius:3px}
.tip{position:fixed;z-index:70;pointer-events:none;background:var(--bg-2);color:var(--fg);font:500 11.5px/1.4 var(--f-mono);border-radius:10px;padding:8px 10px;box-shadow:var(--shadow);white-space:nowrap}
.tip b{display:block;color:var(--blush);font-weight:500}
.h2row{display:flex;align-items:center;gap:12px;margin:48px 0 16px}
.h2row h2{font:400 clamp(22px,2.4vw,30px)/1.1 var(--f-display);letter-spacing:-.02em}
.inc{display:grid;grid-template-columns:130px minmax(0,1fr);gap:18px;padding:18px 22px}
.inc+.inc{border-top:1px solid var(--line)}
.inc .mono{color:var(--dim);padding-top:3px}
.inc h3{font:500 15px/1.3 var(--f-display)}
.inc p{margin:4px 0 0;color:var(--muted);font-size:14px}
@media (max-width:560px){.inc{grid-template-columns:1fr;gap:6px}}

/* ---------- side panel ---------- */
.scrim{position:fixed;inset:0;z-index:44;background:rgb(10 7 16 / .55)}
.panel{position:fixed;top:0;right:0;bottom:0;z-index:45;width:min(580px,100%);background:var(--bg);border-left:1px solid var(--line-2);display:flex;flex-direction:column;box-shadow:var(--shadow);
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.panel-h{display:flex;align-items:center;gap:12px;height:64px;padding:0 14px 0 24px;border-bottom:1px solid var(--line);flex:none;font:500 11.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.panel-h .mono{color:var(--dim)}
.panel-h .x{margin-left:auto}
.panel-b{overflow-y:auto;padding:28px 24px;display:grid;gap:26px;align-content:start}
.panel-f{border-top:1px solid var(--line);padding:14px 24px;display:flex;gap:8px;justify-content:flex-end;flex:none}
.d-title{display:grid;gap:12px}
.d-title h2{font:400 26px/1.15 var(--f-display);letter-spacing:-.02em}
.d-title p{margin:0;color:var(--muted)}
.props{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px 14px;margin:0;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);font-size:14px}
.props dt{font:500 10.5px/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.props dd{margin:0}
.sec-h{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.steps{margin:0;padding:0;list-style:none;display:grid}
.steps li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;position:relative;padding-bottom:16px}
.steps li::before{content:"";width:12px;height:12px;margin:4px 0 0 7px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--bg);z-index:1}
.steps li::after{content:"";position:absolute;left:12px;top:18px;bottom:0;width:1.5px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps li.done::before{background:var(--rose);border-color:var(--rose)}
.steps li.done::after{background:linear-gradient(var(--rose),var(--ice))}
.steps li.now::before{background:var(--bg);border-color:var(--rose);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 22%,transparent)}
.steps li.now::after{background:var(--line)}
.steps b{font-weight:600}
.steps span{display:block;color:var(--muted);font-size:13.5px}
.steps li:not(.done):not(.now) b{color:var(--dim);font-weight:500}
.cm{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px}
.cm+.cm{margin-top:16px}
.cm .who{font:500 11.5px/1.4 var(--f-mono);color:var(--dim);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cm .who b{color:var(--fg);font:600 13.5px/1.3 var(--f-body)}
.cm p{margin:4px 0 0}
.cm.team .avatar{background:var(--fg);color:var(--bg)}
.callout{border:1px solid color-mix(in srgb,var(--build) 40%,transparent);border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--build) 8%,transparent);font-size:14px}
.callout b{font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--build);margin-right:6px}

/* form */
.field{display:grid;gap:8px}
.field>label,.field>.lbl{font:500 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.field .hint{font-size:13px;color:var(--dim)}
.input,.textarea{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);padding:11px 14px;font-size:15px}
.input:focus,.textarea:focus{outline:none;border-color:var(--line-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--rose) 12%,transparent)}
.input{height:46px}
.textarea{min-height:120px;resize:vertical}
.seg{display:inline-flex;padding:4px;gap:2px;border-radius:99px;border:1px solid var(--line);background:var(--bg-2);width:max-content}
.seg button{height:34px;padding:0 16px;border:0;border-radius:99px;background:none;color:var(--muted);font:500 12.5px/1 var(--f-mono)}
.seg button[aria-pressed="true"]{background:var(--bg-3);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2),0 0 18px -6px var(--rose)}
.apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.apps button{height:42px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);text-align:left;padding:0 12px;display:flex;align-items:center;gap:10px;font-size:14px}
.apps button:hover{border-color:var(--line-2)}
.apps button[aria-pressed="true"]{border-color:var(--rose);box-shadow:0 0 18px -8px var(--rose)}
.apps .rb{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-2);flex:none}
.apps button[aria-pressed="true"] .rb{border:4px solid var(--rose)}
.dupe{border:1px solid color-mix(in srgb,var(--build) 40%,transparent);border-radius:14px;overflow:hidden}
.dupe .dh{font-size:13px;color:var(--muted);padding:10px 14px;background:color-mix(in srgb,var(--build) 8%,transparent)}
.dupe button{display:flex;gap:8px;align-items:center;width:100%;border:0;border-top:1px solid var(--line);background:var(--bg-2);padding:10px 14px;text-align:left}
.dupe button:hover{background:var(--bg-3)}
.dupe .mono{color:var(--dim);margin-left:auto}
.drop{border:1px dashed var(--line-2);border-radius:14px;padding:14px;display:flex;gap:12px;align-items:center;color:var(--muted);font-size:13px;flex-wrap:wrap}
.drop img{width:60px;height:60px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.drop input{max-width:100%}
.note{font-size:13.5px;color:var(--muted);line-height:1.55;padding:14px 16px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
.err{font-size:13.5px;color:var(--down)}

footer{position:relative;padding-block:28px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font:400 12px/1.6 var(--f-mono);color:var(--dim)}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--dim);text-decoration:none}
footer a:hover{color:var(--fg)}
footer nav{display:flex;gap:18px}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:80;background:var(--fg);color:var(--bg);border-radius:99px;padding:11px 18px;font:500 12.5px/1 var(--f-mono);box-shadow:0 8px 24px -10px var(--rose);display:flex;gap:8px;align-items:center}
@media (prefers-reduced-motion:no-preference){
  .panel{animation:pin .28s cubic-bezier(.2,.7,.2,1)}@keyframes pin{from{transform:translateX(24px);opacity:.4}}
  .menu{animation:min .14s ease-out}@keyframes min{from{transform:translateY(-4px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- page top: stat cards instead of a hero ---------- */
main{padding-block:32px 88px}
.top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.top h1{font:500 15px/1.2 var(--f-display);letter-spacing:-.01em}
.top .meta{font:500 11.5px/1.4 var(--f-mono);color:var(--dim);display:flex;align-items:center;gap:10px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-bottom:26px}
.card-s{position:relative;border:1px solid var(--line);border-radius:16px;padding:18px 18px 16px;background:var(--bg-2);display:flex;flex-direction:column;gap:14px;text-align:left;min-height:118px;transition:border-color .25s,box-shadow .25s,transform .25s}
button.card-s:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card-s[aria-pressed="true"]{border-color:var(--rose);box-shadow:0 0 22px -10px var(--rose)}
.card-s .big{font:400 clamp(30px,3.4vw,42px)/1 var(--f-display);letter-spacing:-.03em;color:var(--fg)}
.card-s .big small{font:500 13px/1 var(--f-mono);color:var(--dim);letter-spacing:0;margin-left:6px}
.card-s p{margin:0;font-size:13px;color:var(--muted);line-height:1.4}
.card-s .status{margin-bottom:-4px}

/* ---------- sidebar foot: tools + send + account together ---------- */
.tools{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:99px;background:var(--bg-2);width:max-content}
.tools .sep{width:1px;height:16px;background:var(--line-2);margin:0 2px}
.tools button{height:30px;min-width:34px;padding:0 9px;border:0;border-radius:99px;background:none;color:var(--muted);font:500 11.5px/1 var(--f-mono)}
.tools button:hover{color:var(--fg)}
.tools button[aria-pressed="true"]{background:var(--bg-3);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-2)}
.tools .theme{display:grid;place-items:center;min-width:30px;padding:0}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.side .send{width:100%}
.side .login{width:100%}

/* ---------- item panel extras ---------- */
.shot-img{max-width:100%;border-radius:12px;border:1px solid var(--line)}
.admin{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);overflow:visible}
.admin-h{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line);font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.admin-h svg{color:var(--rose)}
.aprops{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px 14px;margin:0;padding:18px;align-items:start}
.aprops dt{font:500 10.5px/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:11px}
.aprops dt label{cursor:pointer}
.aprops dd{margin:0;display:grid;gap:8px;justify-items:start;min-width:0}
.aprops dd small{font-size:12.5px;color:var(--dim);line-height:1.45}
.aprops dd>.pill{margin-top:9px}
.arow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;width:100%}
.arow .input{height:40px;border-radius:99px;flex:1 1 220px;min-width:0;font-size:13px}
.arow .ext{color:var(--ice);font:500 12px/1 var(--f-mono);white-space:nowrap}
.field-dd .dd-btn{height:40px;padding:0 12px 0 10px;gap:10px;background:var(--bg)}
.field-dd .dd-btn .pill{pointer-events:none}
.field-dd .menu{left:0;right:auto;min-width:100%}
.field-dd .opt{grid-template-columns:16px auto 1fr}
.switch{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);cursor:pointer;padding-top:9px}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch .track{width:34px;height:20px;border-radius:99px;background:var(--bg-3);border:1px solid var(--line-2);position:relative;transition:background .2s,border-color .2s;flex:none}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.switch input:checked+.track{background:var(--rose);border-color:var(--rose)}
.switch input:checked+.track::after{transform:translateX(14px);background:#fff}
.switch input:focus-visible+.track{outline:2px solid var(--blush);outline-offset:3px}
.admin-f{display:flex;justify-content:flex-end;padding:0 18px 18px}
.admin .err{margin:0 18px 12px}
.toolbar .cta{height:42px}
@media (max-width:560px){.aprops{grid-template-columns:1fr;gap:6px}.aprops dt{padding-top:10px}.toolbar .cta{width:100%}}
.chk{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted)}
.cm .hide{margin-left:auto;border:0;background:none;color:var(--dim);font:500 11px/1 var(--f-mono);text-decoration:underline;text-underline-offset:3px}
.cm.is-hidden{opacity:.45}
.hidden-tag{font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--down);border:1px solid currentColor;border-radius:99px;padding:3px 7px}
.skeleton{height:118px;border-radius:16px;background:linear-gradient(90deg,var(--bg-2),var(--bg-3),var(--bg-2));background-size:200% 100%;animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.err-box{border:1px solid color-mix(in srgb,var(--down) 45%,transparent);border-radius:16px;padding:20px;color:var(--down)}
.s-down{color:var(--down)}
.comp-l .st.st-ok{color:var(--live)} .comp-l .st.st-slow{color:var(--build)} .comp-l .st.st-down{color:var(--down)} .comp-l .st.st-none{color:var(--plan)}
:root[lang="ko"]{--f-display:"Noto Sans KR","Hanken Grotesk",system-ui,sans-serif;--f-body:"Noto Sans KR","Hanken Grotesk",system-ui,sans-serif}
:root[lang="ko"] .row-title,:root[lang="ko"] .d-title h2,:root[lang="ko"] .card-s .big{font-weight:700;letter-spacing:-.02em;word-break:keep-all}
@media (max-width:560px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card-s{min-height:0;padding:14px;gap:10px}.card-s p{font-size:12.5px}}

/* ---------- sidebar head: wordmark + language + theme + collapse ---------- */
.side-head{display:flex;align-items:center;gap:8px;padding:0 0 22px 8px;min-height:40px}
.side-head .brand{padding:0;margin-right:auto}
.b-word{height:12px}
.side-tools{display:flex;align-items:center;gap:6px}
.tpill{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:99px;background:var(--bg-2)}
.tpill .sep{width:1px;height:16px;background:var(--line-2);margin:0 2px}
.tbtn{height:28px;min-width:28px;padding:0 8px;border:0;border-radius:99px;background:none;color:var(--muted);font:500 11.5px/1 var(--f-mono);display:inline-flex;align-items:center;justify-content:center;gap:4px}
.tbtn:hover,.tbtn[aria-expanded="true"]{color:var(--fg);background:var(--bg-3)}
.tbtn.icon{padding:0;width:28px}
.side-tools .dd .menu{right:-7px}
.collapse-btn{width:34px;height:34px;border:1px solid var(--line);border-radius:99px;background:none;color:var(--muted);display:grid;place-items:center;flex:none}
.collapse-btn:hover{color:var(--fg);border-color:var(--line-2)}
.side .login{width:100%;border-color:var(--line-2);background:var(--bg-2);color:var(--fg)}
.side .login:hover{border-color:var(--blush)}
.btn .lbl{white-space:nowrap}

/* ---------- collapsed rail (desktop only) ---------- */
.shell{transition:grid-template-columns .25s cubic-bezier(.2,.7,.2,1)}
@media (min-width:961px){
  body.collapsed .shell{grid-template-columns:76px minmax(0,1fr)}
  body.collapsed .side{padding-left:14px;padding-right:14px;align-items:center;overflow:visible}
  body.collapsed .side-head{padding:0 0 22px;justify-content:center}
  body.collapsed .side-head .brand,body.collapsed .side-tools .tpill{display:none}
  body.collapsed .sec{width:100%}
  body.collapsed .ni{grid-template-columns:16px;justify-content:center;padding:0;width:46px;margin:0 auto}
  body.collapsed .ni span:not(.n),body.collapsed .ni .n{display:none}
  body.collapsed .side-foot{width:100%;justify-items:center}
  body.collapsed .sysmini{width:40px;justify-content:center;padding:0}
  body.collapsed .sysmini span{display:none}
  body.collapsed .side .send,body.collapsed .side .login{width:46px;height:46px;padding:0}
  body.collapsed .side .btn .lbl{display:none}
  body.collapsed .acct-btn{grid-template-columns:28px;width:46px;height:46px;padding:0;justify-content:center}
  body.collapsed .acct-btn .nm,body.collapsed .acct-btn>svg{display:none}
  body.collapsed .acct .menu{left:calc(100% + 24px);bottom:0;top:auto;right:auto}
}
@media (max-width:960px){.collapse-btn{display:none}}
.cards.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1280px) and (min-width:561px){.cards.c5 .card-s p{display:none}.cards.c5 .card-s{min-height:0}}
@media (max-width:560px){.cards.c5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card .wk-dot{display:inline-block;margin:6px 0 2px;font:500 10px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--build)}
.card .ft>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}