:root{
  --bg:#100c0a;
  --bg-2:#171009;
  --surf:#1d150f;
  --surf-2:#261c14;
  --line:rgba(244,236,226,.09);
  --line-2:rgba(244,236,226,.16);
  --ink:#f4ece2;
  --ink-2:#b9a795;
  --ink-3:#8a7a6b;
  --accent:#e2603d;
  --accent-2:#f0a58a;
  --accent-ink:#1a0b06;
  --indigo:#8b83ff;
  --danger:#ff6b6b;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:max(16px,env(safe-area-inset-left));
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Onest",-apple-system,system-ui,sans-serif;
  font-size:16px; line-height:1.4; letter-spacing:-.01em;
  overflow-x:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.mono{font-family:"Space Mono",monospace}

/* ---------- gate ---------- */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px;overflow:hidden}
.gate-orb{position:absolute;width:70vmax;height:70vmax;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(92,228,166,.22),transparent 60%),
             radial-gradient(circle at 70% 70%,rgba(90,140,255,.14),transparent 60%);
  filter:blur(40px);animation:drift 18s ease-in-out infinite alternate;pointer-events:none}
@keyframes drift{from{transform:translate(-8%,-6%) scale(1)}to{transform:translate(8%,6%) scale(1.15)}}
.gate-card{position:relative;text-align:center;max-width:360px}
.gate-kicker{font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);font-size:12px;margin-bottom:18px}
.gate-card h1{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.02;margin:0 0 12px}
.gate-card p{color:var(--ink-2);margin:0 0 28px}
.btn-tg{display:inline-flex;gap:10px;align-items:center;justify-content:center;width:100%;
  background:var(--ink);color:#0a0a0b;font-weight:700;padding:15px;border-radius:16px;transition:transform .15s var(--spring)}
.btn-tg:active{transform:scale(.97)}
.dev-login{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.dev-login a{font-size:13px;color:var(--ink-2);border:1px solid var(--line);padding:8px 12px;border-radius:12px;text-decoration:none}

/* ---------- hud ---------- */
.hud{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:calc(env(safe-area-inset-top) + 12px) var(--pad) 12px;
  background:linear-gradient(var(--bg) 70%,transparent)}
.hud-logo{font-weight:800;letter-spacing:-.02em;font-size:20px}
.hud-left{flex:0 0 auto;display:flex;align-items:center;gap:12px}
.hud-tab{font-size:14px;font-weight:600;color:var(--ink-2);padding:7px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--surf);transition:.16s var(--spring)}
.hud-tab:active{transform:scale(.94)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:6px 20px 10px;border-bottom:1px solid var(--line)}
.recaps-title{font-weight:700;font-size:17px}
.icon{background:transparent;border:0;color:var(--ink-3);font-size:18px}
.recap-item{padding:16px 0;border-bottom:1px solid var(--line)}
.recap-item:last-child{border-bottom:0}
.recap-day{font-family:"Space Mono",monospace;font-size:12px;color:var(--accent);font-weight:700;margin-bottom:8px}
.recap-text{white-space:pre-wrap;color:var(--ink);font-size:14.5px;line-height:1.5}
.hud-metrics{flex:1;display:flex;gap:8px;overflow:hidden;justify-content:flex-end}
.metric{display:flex;align-items:center;gap:7px;background:var(--surf);border:1px solid var(--line);
  padding:7px 12px;border-radius:999px;font-size:13px;white-space:nowrap}
.metric b{font-family:"Space Mono",monospace;font-weight:700}
.metric .ring{--p:0;width:20px;height:20px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--surf-2) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent 58%,#000 60%);
  mask:radial-gradient(farthest-side,transparent 58%,#000 60%)}
.metric.fuel b{color:var(--accent-2)}
.flame{color:#ff9d4d}
.pulse{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto}
.pulse::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--accent);
  animation:ping 2.2s var(--ease) infinite}
@keyframes ping{from{transform:scale(1);opacity:.55}to{transform:scale(3.4);opacity:0}}
.hud-me{width:38px;height:38px;border-radius:50%;background:var(--surf-2);border:1px solid var(--line-2);
  font-weight:700;display:grid;place-items:center;flex:0 0 auto;transition:transform .15s var(--spring)}
.hud-me:active{transform:scale(.9)}
.me-menu{position:absolute;top:64px;right:var(--pad);z-index:30;background:var(--surf-2);border:1px solid var(--line-2);
  border-radius:14px;padding:10px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 20px 40px -20px #000}
.me-menu span{color:var(--ink-2);font-size:13px}
.me-menu a{color:var(--ink);text-decoration:none;font-weight:600}

/* ---------- stage rail ---------- */
.rail{position:sticky;top:64px;z-index:15;display:flex;gap:8px;padding:6px var(--pad) 12px;
  overflow-x:auto;scrollbar-width:none;background:linear-gradient(var(--bg) 60%,transparent)}
.rail::-webkit-scrollbar{display:none}
.rail button{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;
  background:var(--surf);border:1px solid var(--line);color:var(--ink-2);font-weight:600;font-size:14px;
  white-space:nowrap;transition:.2s var(--ease);flex:0 0 auto}
.rail button .n{font-family:"Space Mono",monospace;font-size:12px;opacity:.7}
.rail button.on{background:var(--ink);color:#0a0a0b;border-color:var(--ink)}
.rail button.on .n{opacity:.55}
.rail button:active{transform:scale(.95)}

/* ---------- feed ---------- */
.feed{max-width:1500px;margin:0 auto;padding:4px var(--pad) 120px;display:flex;flex-direction:column;gap:14px}
/* desktop pipeline: dense multi-column grid — see the whole plan at a glance */
@media(min-width:760px){
  .feed.pipeline{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;align-content:start}
  .card{min-height:150px}
  .card h3{font-size:18px;-webkit-line-clamp:4}
}
@media(min-width:1200px){.feed.pipeline{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}

/* view tabs */
.views{display:flex;gap:8px;padding:2px var(--pad) 8px;max-width:1500px;margin:0 auto;width:100%}
.views button{padding:9px 16px;border-radius:12px;background:transparent;border:1px solid transparent;
  color:var(--ink-3);font-weight:700;font-size:15px;transition:.18s var(--ease)}
.views button.on{color:var(--ink);background:var(--surf);border-color:var(--line)}
.views button:active{transform:scale(.95)}

/* media library + published grids */
.lib-section{margin-bottom:8px}
.lib-section h2{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  display:flex;gap:8px;align-items:center;margin:6px 0 12px}
.lib-section h2 span{font-family:"Space Mono",monospace;background:var(--surf);border:1px solid var(--line);
  border-radius:999px;padding:1px 8px;font-size:11px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:7px;text-decoration:none;color:var(--ink);
  animation:rise .4s var(--ease) both}
.tile-thumb{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--surf-2);
  border:1px solid var(--line)}
.tile-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tile:active .tile-thumb{transform:scale(.98)}
.no-thumb{width:100%;height:100%;display:grid;place-items:center;color:var(--ink-3);font-size:13px;font-weight:600;text-transform:uppercase}
.dur{position:absolute;right:7px;bottom:7px;background:rgba(16,12,10,.75);border-radius:6px;padding:2px 6px;font-size:11px;font-weight:700;font-family:"Space Mono",monospace}
.badge{position:absolute;left:7px;top:7px;background:rgba(16,12,10,.7);backdrop-filter:blur(6px);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700}
.linked{position:absolute;right:7px;top:7px;background:var(--accent);color:#fff;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700}
.tile-name{font-size:13px;line-height:1.3;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pub .pub-metrics{font-size:12px;font-weight:600;color:var(--accent-2);font-family:"Space Mono",monospace}
.pub-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.pub-hint{color:var(--ink-3);font-size:14px}
.card{position:relative;border-radius:26px;padding:20px;min-height:186px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;
  border:1px solid var(--line);isolation:isolate;
  animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*40ms);
  transition:transform .5s var(--spring),box-shadow .3s var(--ease);
  touch-action:pan-y}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.card::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(150deg,hsl(var(--h) 34% 26%),hsl(calc(var(--h) + 24) 40% 13%))}
.card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 85% 8%,transparent,rgba(16,12,10,.6)),
             linear-gradient(0deg,rgba(16,12,10,.6),transparent 60%)}
.card:hover{box-shadow:0 24px 50px -24px hsl(var(--h) 60% 20%)}
.card:active{transform:scale(.985)}
.card.dragging{transition:none;cursor:grabbing;z-index:5}
.card.fly{transition:transform .35s var(--ease),opacity .35s var(--ease)}
.card-top{position:absolute;top:16px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.pill{backdrop-filter:blur(8px);background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:5px 11px;font-size:12px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.pill.stage{color:#fff}
.plats{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.plat{background:rgba(255,255,255,.14);border-radius:999px;padding:4px 9px;font-size:11px;font-weight:600}
.card h3{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.18;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.card-meta{display:flex;align-items:center;gap:12px;margin-top:12px;font-size:13px;color:rgba(255,255,255,.82)}
.card-meta .who{display:flex;align-items:center;gap:6px}
.avatar{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.9);color:#111;
  display:grid;place-items:center;font-size:11px;font-weight:700}
.dots{display:flex;gap:5px;margin-left:auto}
.dot{width:8px;height:8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5)}
.dot.on{background:var(--accent);border-color:var(--accent)}
.swipe-hint{position:absolute;top:50%;transform:translateY(-50%);font-weight:800;font-size:14px;
  letter-spacing:.05em;padding:8px 12px;border-radius:12px;opacity:0;pointer-events:none;z-index:2}
.swipe-hint.next{right:18px;color:var(--accent-ink);background:var(--accent)}
.swipe-hint.prev{left:18px;color:#fff;background:rgba(0,0,0,.5);border:1px solid var(--line-2)}

.empty{text-align:center;color:var(--ink-3);padding:64px 20px}
.empty svg{opacity:.5;margin-bottom:14px}
.empty b{display:block;color:var(--ink-2);font-size:17px;margin-bottom:4px}
.skel{height:186px;border-radius:26px;background:linear-gradient(100deg,var(--surf) 30%,var(--surf-2) 50%,var(--surf) 70%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---------- fab ---------- */
.fab{position:fixed;right:var(--pad);bottom:calc(env(safe-area-inset-bottom) + 20px);z-index:18;
  display:flex;align-items:center;gap:7px;background:var(--accent);color:#fff;
  font-weight:800;padding:15px 20px;border-radius:999px;box-shadow:0 14px 34px -10px rgba(226,96,61,.55);
  transition:transform .18s var(--spring)}
.fab:active{transform:scale(.92)}
.fab span{font-size:15px}

/* ---------- editor sheet ---------- */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}}
.sheet{width:min(560px,100%);max-height:92vh;background:var(--bg-2);border:1px solid var(--line);
  border-radius:28px 28px 0 0;display:flex;flex-direction:column;animation:up .4s var(--spring)}
@media(min-width:600px){.scrim{align-items:center}.sheet{border-radius:28px}}
@keyframes up{from{transform:translateY(30px);opacity:.4}}
.sheet-grab{width:38px;height:4px;border-radius:2px;background:var(--line-2);margin:12px auto 4px}
.sheet-scroll{overflow-y:auto;padding:8px 20px 4px;display:flex;flex-direction:column;gap:18px}
.hook-input{width:100%;background:none;border:0;resize:none;font-size:23px;font-weight:700;
  letter-spacing:-.02em;line-height:1.2;outline:none;padding:6px 0}
.hook-input::placeholder{color:var(--ink-3)}
.field-block{display:flex;flex-direction:column;gap:9px}
.lbl{font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 14px;border-radius:12px;background:var(--surf);border:1px solid var(--line);
  color:var(--ink-2);font-weight:600;font-size:14px;transition:.16s var(--spring)}
.chip:active{transform:scale(.94)}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.stage-chips .chip.on{background:var(--ink);color:#0a0a0b;border-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:7px}
.field input,.field textarea{background:var(--surf);border:1px solid var(--line);border-radius:12px;
  padding:12px 13px;outline:none;resize:none;transition:border-color .15s}
.field input:focus,.field textarea:focus,.hook-input:focus{border-color:var(--line-2)}
.field input:focus{border-color:var(--accent)}
.post-card{background:var(--surf);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.post-card summary{list-style:none;cursor:pointer;padding:15px 16px;display:flex;align-items:center;gap:10px}
.post-card summary::-webkit-details-marker{display:none}
.post-title{font-weight:700}
.post-sub{color:var(--ink-3);font-size:13px}
.post-progress{margin-left:auto;font-size:12px;font-weight:700;font-family:"Space Mono",monospace;color:var(--ink-3)}
.post-progress.ok{color:var(--accent)}
.post-body{padding:0 16px 16px;display:flex;flex-direction:column;gap:14px}
.cover-drop{display:flex;flex-direction:column;gap:12px}
#cover-preview{width:100%;max-height:190px;object-fit:cover;border-radius:12px;display:none;background:var(--surf-2)}
#cover-preview.show{display:block}
.drive-pick{display:flex;gap:8px;flex-wrap:wrap}
.drive-pick button{font-size:13px;padding:8px 12px;border-radius:10px;background:var(--surf-2);border:1px solid var(--line)}
.drive-file{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:10px;
  background:var(--surf-2);border:1px solid var(--line);font-size:13px;cursor:pointer;align-items:center}
.drive-file:active{transform:scale(.99)}
.publish-box{padding:13px 15px;border-radius:14px;background:var(--surf);border:1px solid var(--line);
  font-size:14px;color:var(--ink-2)}
.publish-box.ok{border-color:rgba(226,96,61,.4);color:var(--accent-2)}
.danger-zone{border-color:rgba(255,107,107,.45);background:rgba(255,107,107,.06);display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.danger-zone b{color:#ff8f8f}
.dz-preview{font-size:13px;color:var(--ink-2);border-left:2px solid var(--line-2);padding-left:10px}
.danger-zone input{background:var(--surf-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:none}
.danger-zone input:focus{border-color:var(--danger)}
.btn-danger{background:var(--danger);color:#2a0808;font-weight:800;border-radius:11px;padding:12px;transition:transform .15s var(--spring),opacity .2s}
.btn-danger:disabled{opacity:.4;cursor:not-allowed}
.btn-danger:not(:disabled):active{transform:scale(.97)}
.sheet-foot{display:flex;gap:10px;align-items:center;padding:14px 20px calc(env(safe-area-inset-bottom) + 14px);
  border-top:1px solid var(--line)}
.btn-ghost{border:1px solid var(--line);background:var(--surf);border-radius:13px;padding:12px 16px;font-weight:600;transition:transform .15s var(--spring)}
.btn-ghost:active{transform:scale(.95)}
.btn-ghost.danger{color:var(--danger);margin-right:auto}
.btn-primary{flex:1;background:var(--accent);color:#fff;border-radius:13px;padding:13px;font-weight:800;transition:transform .15s var(--spring)}
.btn-primary:active{transform:scale(.97)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 90px);transform:translateX(-50%) translateY(14px);
  z-index:60;background:var(--ink);color:#0a0a0b;font-weight:700;padding:11px 18px;border-radius:999px;
  opacity:0;transition:.3s var(--spring);pointer-events:none;box-shadow:0 12px 30px -10px #000}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}