:root{--bg:#0E0E10;--s1:#161619;--s2:#1E1E22;--s3:#26262B;--line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.12);
--t1:#EDEDF0;--t2:#A3A3AD;--t3:#6E6E78;--blue:#051BFF;--blue-t:#7C8AFF;--amber:#F0A040;--green:#4FBF85;
--ease:cubic-bezier(.23,1,.32,1);--ui:'Author',ui-sans-serif;--disp:'Clash Display',sans-serif;--mono:'JetBrains Mono',monospace}
*{box-sizing:border-box;margin:0}html{-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--t1);font:400 14px/20px var(--ui);letter-spacing:.01em;font-feature-settings:"tnum" 1}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}a{color:inherit;text-decoration:none}
.ic{flex:none}.mono{font:400 12px var(--mono);color:var(--t3)}
.mock{position:fixed;right:12px;bottom:12px;font:11px var(--mono);color:var(--t3);background:var(--s1);border:1px solid var(--line);padding:4px 8px;border-radius:6px;z-index:9}
.kbd{font:500 11px var(--mono);color:var(--t2);background:var(--s3);border-radius:5px;padding:0 5px;line-height:18px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.4)}
.btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:9px;font-weight:500;transition:transform .16s var(--ease),background-color .16s var(--ease);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--t1);color:#0E0E10}.btn.pri .kbd{background:rgba(0,0,0,.08);color:#555;box-shadow:none}
.btn.blue{background:var(--blue);color:#fff}
.btn.sec{background:var(--s2);box-shadow:inset 0 0 0 1px var(--line2)}.btn.sec:hover{background:var(--s3)}
.av{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font:600 10px var(--ui);background:var(--s3);color:var(--t2);flex:none}
.runway{display:inline-grid;grid-template-columns:repeat(48,1fr);gap:2px;width:100%;height:10px;align-items:end}
.runway i{height:6px;border-radius:1px;background:var(--s3)}.runway i.q{height:10px}
.runway i.on{background:var(--blue-t)}.runway i.on.risk{background:var(--amber)}
/* top bar */
.bar{height:52px;display:flex;align-items:center;gap:20px;padding:0 20px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(14,14,16,.85);backdrop-filter:blur(10px);z-index:3}
.bar img{height:18px}
.tabs{display:flex;gap:2px}.tabs a{height:30px;padding:0 10px;border-radius:8px;display:flex;align-items:center;gap:8px;color:var(--t2)}
.tabs a.on{background:var(--s2);color:var(--t1)}.tabs a .mono{color:var(--t3)}
.bar .sp{margin-left:auto;display:flex;align-items:center;gap:12px}
.cmd{display:flex;align-items:center;gap:8px;height:30px;padding:0 6px 0 10px;border-radius:8px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);color:var(--t3);width:220px}.cmd .kbd{margin-left:auto}
.wrap{padding:24px 20px 80px;max-width:1400px;margin:0 auto}
.hd{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px}
.hd h1{font:500 30px/34px var(--disp);letter-spacing:.005em}
.hd h1 span{color:var(--t3)}
.hd .sp{margin-left:auto;display:flex;gap:8px}
/* runway timeline */
.tl{background:var(--s1);border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);padding:16px 16px 8px;position:relative}
.tlh{display:grid;grid-template-columns:200px 1fr;margin-bottom:8px}
.ticks{display:grid;grid-template-columns:repeat(4,1fr)}.ticks span{font:11px var(--mono);color:var(--t3);border-left:1px solid var(--line);padding-left:6px}
.lane{display:grid;grid-template-columns:200px 1fr;align-items:center;height:48px;border-top:1px solid var(--line)}
.lane .nm b{font-weight:500;display:block}.lane .nm .mono{font-size:11px}
.track{position:relative;height:28px;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--line) calc(25% - 1px) 25%)}
.blk{position:absolute;top:0;bottom:0;border-radius:8px;display:flex;align-items:center;padding:0 10px;font-size:12px;font-weight:500;gap:8px;overflow:hidden;white-space:nowrap}
.blk.b{background:rgba(124,138,255,.16);box-shadow:inset 0 0 0 1px rgba(124,138,255,.35);color:#C9CEFF}
.blk.r{background:rgba(240,160,64,.14);box-shadow:inset 0 0 0 1px rgba(240,160,64,.4);color:#FFD49E}
.blk.d{background:rgba(79,191,133,.12);box-shadow:inset 0 0 0 1px rgba(79,191,133,.35);color:#A8E6C4}
.blk .fill{position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.06)}
.now{position:absolute;top:30px;bottom:8px;width:1px;background:#FF5A4E;z-index:1}
.now:before{content:"Now 11:20";position:absolute;top:-2px;left:4px;font:10px var(--mono);color:#FF8B82}
/* board */
.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:20px}
.col h3{font:500 13px var(--ui);color:var(--t2);display:flex;gap:8px;align-items:center;padding:0 4px 10px}
.col h3 .mono{margin-left:auto}
.col h3 i{width:8px;height:8px;border-radius:2px}
.card{display:block;background:var(--s1);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);padding:14px;margin-bottom:8px;transition:background-color .14s var(--ease),transform .2s var(--ease)}
.card:hover{background:var(--s2)}.card.sel{box-shadow:inset 0 0 0 1px rgba(124,138,255,.6)}
.card .t{display:flex;gap:8px;align-items:center}.card .t b{font-weight:500}
.card p{color:var(--t2);font-size:13px;margin:8px 0 12px;line-height:18px}
.card .f{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.pill{font:500 11px var(--mono);padding:2px 6px;border-radius:5px;background:var(--s3);color:var(--t2)}
.pill.b{background:rgba(5,27,255,.25);color:#C9CEFF}.pill.a{background:rgba(240,160,64,.16);color:var(--amber)}
.empty{border:1px dashed var(--line2);border-radius:14px;padding:16px;color:var(--t3);font-size:13px;text-align:center}
/* brief record */
.rec{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:0;border-top:0;min-height:calc(100vh - 52px)}
.rec .l{padding:28px 40px;max-width:820px}
.rec .r{border-left:1px solid var(--line);padding:24px;background:var(--s1)}
.back{display:inline-flex;gap:6px;align-items:center;color:var(--t3);font-size:13px;margin-bottom:20px}
.rec h1{font:500 44px/46px var(--disp)}
.rec .lead{font-size:17px;line-height:26px;color:var(--t2);margin-top:10px;max-width:600px}
.act{margin-top:24px;display:flex;gap:8px;align-items:center;padding:12px;border-radius:14px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line)}
.act .msg{flex:1;color:var(--t2);font-size:13px;padding-left:4px}
.act .msg b{color:var(--t1);font-weight:500;display:block;font-size:14px}
.qa{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qa div{background:var(--s1);border-radius:14px;padding:16px;box-shadow:inset 0 0 0 1px var(--line)}
.qa div:first-child{grid-column:1/3}
.qa dt{font-size:12px;color:var(--t3)}.qa dd{margin-top:6px;font-size:16px;line-height:22px}
.qa div:first-child dd{font:500 22px/28px var(--disp)}
.r h4{font:500 12px var(--ui);color:var(--t3);margin:20px 0 8px}.r h4:first-child{margin-top:0}
.attr{display:grid;grid-template-columns:110px 1fr;gap:8px;padding:7px 0;font-size:13px}
.attr span:first-child{color:var(--t3)}
.attr s{color:var(--t3)}
.tline{display:flex;flex-direction:column;gap:12px;font-size:13px}
.tline div{display:grid;grid-template-columns:14px 1fr;gap:10px;color:var(--t2)}
.tline i{width:8px;height:8px;border-radius:2px;background:var(--s3);margin-top:6px}
.tline .mono{display:block;font-size:11px}
/* client */
.cw{max-width:1040px;margin:0 auto;padding:20px 24px 80px}
.ctop{display:flex;align-items:center;gap:12px;height:44px;margin-bottom:32px}.ctop img{height:18px}.ctop .sp{margin-left:auto;display:flex;gap:8px;align-items:center}
.ticket{border-radius:24px;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;display:grid;grid-template-columns:1.25fr 1fr}
.ticket .a{padding:32px;border-right:1px dashed var(--line2);position:relative}
.ticket .a:before,.ticket .a:after{content:"";position:absolute;right:-10px;width:20px;height:20px;border-radius:50%;background:var(--bg)}
.ticket .a:before{top:-10px}.ticket .a:after{bottom:-10px}
.ticket .b{padding:32px;display:flex;flex-direction:column;gap:16px}
.status{display:inline-flex;align-items:center;gap:8px;font:500 12px var(--mono);color:var(--blue-t)}
.status i{width:8px;height:8px;border-radius:50%;background:var(--blue-t);animation:pulse 2s var(--ease) infinite}
.status.ok{color:var(--green)}.status.ok i{background:var(--green);animation:none}
@keyframes pulse{50%{opacity:.35}}
.huge{font:500 128px/0.9 var(--disp);letter-spacing:-.02em;margin:20px 0 12px}
.huge span{color:var(--t3);font-size:48px;letter-spacing:0}
.ticket h2{font:500 36px/40px var(--disp);margin:20px 0 12px}
.ticket p{color:var(--t2);font-size:15px;line-height:23px}
.ticket .b .k{font-size:12px;color:var(--t3)}
.ticket .b .v{font-size:17px;font-weight:500;margin-top:2px}
.ticket .b .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plan{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.plan div{background:var(--s1);border-radius:16px;padding:16px;box-shadow:inset 0 0 0 1px var(--line);color:var(--t3);font-size:13px}
.plan div b{display:block;color:var(--t2);font-weight:500;font-size:14px;margin-top:10px}
.plan .done b{color:var(--t1)}.plan .cur{box-shadow:inset 0 0 0 1px rgba(124,138,255,.5)}
.plan .cur b{color:var(--t1)}
.plan .n{font:500 12px var(--mono)}.plan .done .n{color:var(--green)}.plan .cur .n{color:var(--blue-t)}
.feed{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.box{background:var(--s1);border-radius:16px;padding:20px;box-shadow:inset 0 0 0 1px var(--line)}
.box h4{font:500 12px var(--ui);color:var(--t3);margin-bottom:12px}
.u{padding:12px 0;border-top:1px solid var(--line)}.u:first-of-type{border:0;padding-top:0}
.u b{font-weight:500}.u p{color:var(--t2);font-size:13px;margin-top:4px}
.shot{border-radius:14px;overflow:hidden;background:#121212;color:#F4EBDD;padding:20px;flex:1;min-height:200px}
.shot small{font:11px var(--mono);color:#E9B44C}.shot h5{font:600 34px/1 var(--disp);margin:8px 0 12px}
.shot .qr{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #2a2a2a;font-size:14px}.shot .qr b{color:#E9B44C;font-weight:500}
/* login/email reuse */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px}
.form{width:100%;max-width:380px;background:var(--s1);border-radius:20px;padding:28px;box-shadow:inset 0 0 0 1px var(--line),0 40px 80px -40px #000}
.form img{height:18px}.form h1{font:500 26px/30px var(--disp);margin:28px 0 6px}.form p{color:var(--t2);margin-bottom:24px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label{font-size:13px;color:var(--t2);display:flex;justify-content:space-between}.field label a{color:var(--blue-t)}
.field input{height:42px;border-radius:10px;border:0;background:var(--s2);box-shadow:inset 0 0 0 1px var(--line2);padding:0 12px;font:15px var(--ui);color:var(--t1);outline:0}
.field input:focus{box-shadow:inset 0 0 0 1px var(--blue-t),0 0 0 4px rgba(124,138,255,.15)}
.form .btn{width:100%;justify-content:center;height:42px}
.form small{display:block;margin-top:16px;color:var(--t3);font-size:12px;line-height:18px}
.mailwrap{min-height:100vh;padding:40px 16px;background:#E9E7E2;color:#16161A}
.mailmeta{max-width:600px;margin:0 auto 12px;font-size:13px;color:#5B5A57}.mailmeta b{color:#16161A;font-weight:500}
.mail{max-width:600px;margin:0 auto;background:#fff;border-radius:16px;overflow:hidden}
.mhero{background:#0E0E10;color:#EDEDF0;padding:32px 36px}
.mhero img{height:18px}.mhero h1{font:500 30px/34px var(--disp);margin:28px 0 8px}.mhero p{color:#A3A3AD;font-size:15px;line-height:23px}
.mbody{padding:28px 36px}
.cred{border:1px solid rgba(0,0,0,.1);border-radius:14px;overflow:hidden}
.cred div{display:flex;justify-content:space-between;padding:13px 16px;border-bottom:1px solid rgba(0,0,0,.07);font-size:14px}.cred div:last-child{border:0}
.cred span{color:#8E8C87}.cred code{font:500 15px var(--mono)}
.mbody .btn{background:#051BFF;color:#fff;height:46px;padding:0 20px;margin-top:20px}
.mbody p{color:#5B5A57;font-size:14px;line-height:22px;margin-top:16px}
.mft{padding:16px 36px;background:#F3F2EF;font-size:12px;color:#8E8C87}
@media (prefers-reduced-motion:no-preference){.enter>*{animation:rise .32s var(--ease) both}.enter>*:nth-child(2){animation-delay:.05s}.enter>*:nth-child(3){animation-delay:.1s}.enter>*:nth-child(4){animation-delay:.15s}}
@media (prefers-reduced-motion:reduce){.status i{animation:none}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
@media (max-width:900px){
 .tabs a:not(.on),.cmd,.kbd{display:none}.bar{padding:0 12px;gap:12px}
 .wrap{padding:16px 12px 80px}.hd{flex-wrap:wrap}.hd h1{font-size:24px;line-height:28px}.hd .sp{margin-left:0}
 .tlh{grid-template-columns:96px 1fr}.lane{grid-template-columns:96px 1fr}.lane .nm .mono{display:none}.blk span.x{display:none}
 .board{grid-template-columns:1fr;gap:4px}
 .rec{grid-template-columns:1fr}.rec .l{padding:20px 16px}.rec .r{border:0;border-top:1px solid var(--line);padding:20px 16px}
 .rec h1{font-size:34px;line-height:36px}.act{flex-wrap:wrap}.act .msg{flex-basis:100%;padding:0 0 4px}
 .qa{grid-template-columns:1fr}.qa div:first-child{grid-column:auto}
 .cw{padding:12px 14px 80px}.ctop{margin-bottom:16px}
 .ticket{grid-template-columns:1fr}.ticket .a{border-right:0;border-bottom:1px dashed var(--line2);padding:24px}.ticket .a:before,.ticket .a:after{display:none}.ticket .b{padding:24px}
 .huge{font-size:96px}.plan{grid-template-columns:1fr 1fr}.feed{grid-template-columns:1fr}
 .mhero,.mbody{padding:24px 20px}.mft{padding:14px 20px}.mailwrap{padding:16px 8px}
}