:root { --ink:#17211b; --muted:#68726b; --paper:#f4f4ee; --card:#fbfbf7; --line:#d9ddd5; --green:#b8ff3e; --deep:#254c32; --orange:#ff7b45; font-family:"Manrope",sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--paper); }
button,a { font:inherit; }
.topbar { height:72px; padding:0 4.5vw; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; gap:12px; align-items:center; color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:-.04em; }
.mark { width:27px; height:27px; display:grid; grid-template-columns:repeat(3,1fr); align-items:end; gap:3px; transform:rotate(-7deg); }
.mark i { display:block; height:68%; background:var(--ink); border-radius:4px; }
.mark i:nth-child(2) { height:100%; background:var(--orange); }
.mark i:nth-child(3) { height:45%; background:var(--green); }
.account { display:flex; gap:12px; align-items:center; position:relative; }
.account > span { color:var(--muted); font-size:11px; }
.avatar { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:var(--card); cursor:pointer; font:500 10px "DM Mono",monospace; }
.logout { display:none; position:absolute; right:0; top:48px; z-index:5; width:110px; padding:10px; border:1px solid var(--line); border-radius:8px; background:var(--card); cursor:pointer; box-shadow:0 10px 30px #17211b18; }
.logout.visible { display:block; }
main { width:min(1050px,91vw); margin:0 auto; }
.loading { min-height:calc(100vh - 72px); display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); font:11px "DM Mono",monospace; }
.loading span { width:9px; height:9px; border:2px solid var(--line); border-top-color:var(--deep); border-radius:50%; animation:spin .7s linear infinite; }
.onboarding { width:min(560px,100%); margin:14vh auto 0; padding:54px; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 22px 75px #17211b10; }
.slack-mark { width:64px; height:64px; margin:0 auto 25px; display:grid; grid-template-columns:repeat(2,12px); grid-template-rows:repeat(2,12px); align-content:center; justify-content:center; gap:5px; border:1px solid var(--line); border-radius:16px; background:#fff; transform:rotate(45deg); }
.slack-mark i { width:12px; height:24px; border-radius:8px; background:#36c5f0; }
.slack-mark i:nth-child(2) { background:#2eb67d; transform:rotate(90deg); }.slack-mark i:nth-child(3) { background:#e01e5a; transform:rotate(90deg); }.slack-mark i:nth-child(4) { background:#ecb22e; }
.eyebrow { margin:0 0 10px; color:var(--deep); font:500 10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.12em; }
h1 { margin:0; font-size:34px; letter-spacing:-.055em; }
.lede { max-width:420px; margin:17px auto 27px; color:var(--muted); font-size:14px; line-height:1.65; }
.primary { border:1px solid var(--ink); border-radius:9px; padding:14px 20px; color:#fff; background:var(--ink); font-weight:600; font-size:13px; cursor:pointer; box-shadow:0 5px 0 #93c936; transition:transform .15s; }
.primary:hover,.secondary:hover { transform:translateY(-2px); }.primary:disabled { opacity:.6; cursor:wait; }.primary b { color:var(--green); margin-left:8px; }.mini-slack { margin-right:7px; }
.fine-print { margin:17px 0 0; color:var(--muted); font-size:10px; }
.dashboard { padding:70px 0 90px; }
.page-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:28px; }
.page-head h1 { font-size:42px; }
.secondary { padding:11px 14px; border:1px solid var(--ink); border-radius:8px; background:transparent; font-size:11px; font-weight:600; cursor:pointer; transition:transform .15s; }
.workspace-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-bottom:38px; }
.workspace { display:grid; grid-template-columns:44px 1fr auto; gap:13px; align-items:center; padding:15px; background:var(--card); border:1px solid var(--line); border-radius:11px; }
.workspace-logo { width:42px; height:42px; display:grid; place-items:center; border-radius:9px; background:var(--ink); color:var(--green); font:500 11px "DM Mono",monospace; }
.workspace b,.workspace small { display:block; }.workspace b { font-size:13px; margin-bottom:4px; }.workspace small { color:var(--muted); font-size:9px; }.workspace small i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#42b969; margin-right:5px; }.workspace a { color:var(--deep); font-size:10px; font-weight:600; }
.sessions-card { overflow:hidden; background:var(--card); border:1px solid var(--line); border-radius:13px; }
.card-head { display:flex; align-items:center; justify-content:space-between; padding:22px; border-bottom:1px solid var(--line); }.card-head h2 { margin:0 0 5px; font-size:18px; }.card-head p { margin:0; color:var(--muted); font-size:11px; }
.stream-state { padding:7px 10px; border:1px solid var(--line); border-radius:99px; color:var(--muted); font:500 9px "DM Mono",monospace; text-transform:uppercase; }.stream-state i,.status i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#aab0aa; margin-right:6px; }.stream-state.live i,.status.ready i { background:#42b969; box-shadow:0 0 0 3px #dff4e5; }
.sessions-head,.session-row { display:grid; grid-template-columns:minmax(250px,2fr) 1fr 95px 75px; gap:16px; align-items:center; }.sessions-head { padding:11px 18px; border-bottom:1px solid var(--line); color:var(--muted); font:500 9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.session-row { padding:16px 18px; border-bottom:1px solid var(--line); font-size:11px; }.session-row:last-child { border:0; }
.session-main { min-width:0; }.session-main b,.session-main span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.session-main b { margin-bottom:5px; }.session-main span,.session-row time { color:var(--muted); font:9px "DM Mono",monospace; }.status { justify-self:start; padding:5px 8px; border:1px solid var(--line); border-radius:99px; font:500 8px "DM Mono",monospace; text-transform:uppercase; }.status.running i { background:#e7a52b; animation:pulse 1.1s infinite; }.status.failed i { background:#df5454; }
.empty { padding:50px 18px; text-align:center; color:var(--muted); font-size:12px; }
.toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:12px 16px; border-radius:8px; color:#fff; background:var(--ink); font-size:12px; transition:.2s; }.toast.show { opacity:1; transform:translate(-50%,0); }
[hidden] { display:none!important; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes pulse { 50% { opacity:.3; } }
@media(max-width:700px) { .account>span{display:none}.onboarding{margin-top:7vh;padding:36px 24px}.dashboard{padding-top:45px}.page-head{align-items:center}.page-head h1{font-size:34px}.sessions-head{display:none}.session-row{grid-template-columns:1fr auto}.session-row>span:nth-child(2){display:none}.workspace{grid-template-columns:42px 1fr}.workspace a{grid-column:2}.card-head p{display:none} }