:root{
  --bg:#0d1014; --panel:#13181f; --raised:#1a2029; --line:#242c36;
  --ink:#e8ecf1; --mut:#8b97a6; --faint:#586273;
  --sig:#f0a33c; --sig-dim:#5f4a26; --sig-glow:rgba(240,163,60,.18);
  --warn:#d36b62; --ok:#6fbf8e;
  --mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:7px; --rs:4px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, #131922 0%, var(--bg) 60%) fixed;
  color:var(--ink); font-family:var(--ui); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; cursor:pointer}
input,textarea{font-family:inherit}
::selection{background:var(--sig-glow)}

/* ============================ GATE ============================ */
.gate{min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 20px}
.gate-inner{width:100%; max-width:440px; display:flex; flex-direction:column; gap:18px}
.wordmark{text-align:center; margin-bottom:6px; position:relative}
.wordmark h1{
  font-family:var(--mono); font-size:38px; letter-spacing:.42em; font-weight:600;
  margin:0 0 0 .42em; text-indent:.0em; padding-left:.0em;
}
.wordmark-sub{color:var(--mut); font-size:12.5px; margin:8px 0 0; letter-spacing:.02em}
.wordmark-dot{
  display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--sig);
  box-shadow:0 0 0 4px var(--sig-glow); margin-bottom:14px; animation:beat 2.6s ease-in-out infinite;
}
@keyframes beat{0%,100%{opacity:1}50%{opacity:.4}}

.op-field{display:flex; flex-direction:column; gap:6px}
.op-field label,.code-field label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.op-hint{font-size:11.5px; color:var(--faint); line-height:1.45}
.op-field input{
  background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r); padding:10px 12px; font-size:14px; outline:none;
}
.op-field input:focus{border-color:var(--sig-dim)}

.seg{display:flex; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:3px}
.seg-btn{
  flex:1; background:transparent; border:0; color:var(--mut); padding:9px 0;
  font-size:13.5px; letter-spacing:.04em; border-radius:var(--rs); transition:.15s;
}
.seg-btn.is-on{background:var(--raised); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line)}

.code-field{position:relative; display:flex; align-items:center}
.code-field input{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r); padding:15px 16px; font-family:var(--mono); font-size:20px;
  letter-spacing:.08em; outline:none;
}
.code-field input::placeholder{letter-spacing:.04em; font-size:16px}
.code-field input:focus{border-color:var(--sig); box-shadow:0 0 0 3px var(--sig-glow)}
.suggest{
  position:absolute; right:8px; background:var(--raised); border:1px solid var(--line);
  color:var(--mut); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 9px; border-radius:var(--rs);
}
.suggest:hover{color:var(--sig); border-color:var(--sig-dim)}

.gate-note{color:var(--mut); font-size:12.5px; margin:-4px 0 0; text-align:center}
.gate-error{color:var(--warn); font-size:13px; margin:-4px 0 0; text-align:center}

.go{
  background:var(--sig); color:#1a1206; border:0; border-radius:var(--r);
  padding:14px; font-size:15px; font-weight:600; letter-spacing:.02em; transition:.15s;
}
.go:hover{filter:brightness(1.08)}
.go:active{transform:translateY(1px)}

.recents{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.recents-label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.recents-list{display:flex; flex-wrap:wrap; gap:7px}
.rchip{
  background:var(--panel); border:1px solid var(--line); color:var(--mut);
  font-family:var(--mono); font-size:13px; padding:6px 11px; border-radius:var(--rs); transition:.15s;
}
.rchip:hover{color:var(--ink); border-color:var(--sig-dim)}
.gate-foot{color:var(--faint); font-size:11px; margin-top:28px; letter-spacing:.02em; text-align:center}

/* ========================== CHANNEL =========================== */
.shell{display:grid; grid-template-columns:248px 1fr; height:100%}
.side{
  border-right:1px solid var(--line); background:var(--panel);
  display:flex; flex-direction:column; min-height:0;
}
.side-op{padding:16px 16px 12px; border-bottom:1px solid var(--line)}
.side-op-label{display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.side-op-name{display:block; font-size:15px; margin-top:3px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer}
.side-new{
  margin:12px; background:var(--raised); border:1px solid var(--line); color:var(--ink);
  padding:9px; border-radius:var(--r); font-size:13px; transition:.15s;
}
.side-new:hover{border-color:var(--sig-dim); color:var(--sig)}
.side-head{padding:4px 16px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint)}
.side-list{flex:1; overflow:auto; padding:6px 8px; display:flex; flex-direction:column; gap:3px}
.side-item{
  text-align:left; background:transparent; border:1px solid transparent; color:var(--mut);
  padding:9px 10px; border-radius:var(--rs); display:flex; justify-content:space-between; gap:8px; align-items:center; transition:.12s;
}
.side-item:hover{background:var(--raised); color:var(--ink)}
.side-item.is-active{background:var(--raised); color:var(--ink); border-color:var(--sig-dim)}
.side-item .si-code{font-family:var(--mono); font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.side-item .si-n{font-size:11px; color:var(--faint); flex:none}
.side-foot{padding:12px 16px; font-size:11px; color:var(--faint); border-top:1px solid var(--line); line-height:1.4}

.stage{display:flex; flex-direction:column; min-height:0; min-width:0}
.bar{
  display:flex; align-items:center; gap:16px; padding:14px 20px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel),transparent);
}
.bar-id{display:flex; align-items:center; gap:10px; min-width:0}
.live-dot{width:9px; height:9px; border-radius:50%; background:var(--faint); flex:none}
.live-dot.is-live{background:var(--sig); box-shadow:0 0 0 4px var(--sig-glow); animation:beat 1.8s ease-in-out infinite}
.bar-code{font-family:var(--mono); font-size:20px; letter-spacing:.06em; overflow:hidden; text-overflow:ellipsis}
.bar-meta{display:flex; flex-direction:column; gap:1px; margin-left:2px}
.peers{font-size:12.5px; color:var(--sig)}
.peers.is-alone{color:var(--faint)}
.expiry{font-size:11px; color:var(--faint)}
.bar-actions{margin-left:auto; display:flex; gap:8px}
.btn-ghost,.btn-shred{
  border:1px solid var(--line); background:var(--raised); color:var(--mut);
  padding:8px 13px; border-radius:var(--rs); font-size:13px; transition:.15s;
}
.btn-ghost:hover{color:var(--ink)}
.btn-shred{color:var(--warn); border-color:#3a2624}
.btn-shred:hover{background:var(--warn); color:#1a0c0a; border-color:var(--warn)}

.drop{
  margin:18px 20px 8px; border:1.5px dashed var(--line); border-radius:var(--r);
  padding:18px; transition:.15s; background:rgba(255,255,255,.012);
}
.drop:focus,.drop.is-over{border-color:var(--sig); background:var(--sig-glow); outline:none}
.drop-core{display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center}
.drop-lead{margin:0; color:var(--mut); font-size:13.5px}
.drop-btns{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.chip{
  background:var(--raised); border:1px solid var(--line); color:var(--ink);
  padding:8px 13px; border-radius:var(--rs); font-size:13px; transition:.15s;
}
.chip:hover{border-color:var(--sig-dim); color:var(--sig)}
.chip-go{background:var(--sig); color:#1a1206; border-color:var(--sig)}
.chip-go:hover{filter:brightness(1.08); color:#1a1206}
.type-wrap{display:flex; gap:8px; width:100%; max-width:560px}
.type-area,#type-area{
  flex:1; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--rs); padding:10px; font-size:13.5px; resize:vertical; outline:none; font-family:var(--mono);
}
#type-area:focus{border-color:var(--sig-dim)}

.feed{flex:1; overflow:auto; padding:8px 20px 24px; display:flex; flex-direction:column; gap:12px; min-height:0}
.feed-empty{color:var(--faint); font-size:13px; text-align:center; padding:10px 20px 30px; margin:0}

.card{
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden;
  animation:land .28s ease;
}
@keyframes land{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.card-top{display:flex; align-items:center; gap:10px; padding:10px 13px; border-bottom:1px solid var(--line)}
.badge{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; padding:3px 7px; border-radius:3px;
  background:var(--raised); color:var(--mut); border:1px solid var(--line); flex:none;
}
.badge.k-text{color:#8fb8d8} .badge.k-image{color:#c79de0} .badge.k-file{color:var(--sig)}
.card-name{font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.card-sub{font-size:11.5px; color:var(--faint); flex:none; margin-left:auto; white-space:nowrap}
.card-body{padding:12px 13px}
.card-text{
  margin:0; font-family:var(--mono); font-size:12.5px; color:#cdd6e1; white-space:pre-wrap; word-break:break-word;
  max-height:160px; overflow:hidden; position:relative;
}
.card-text.is-clipped::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:40px;
  background:linear-gradient(transparent,var(--panel));
}
.card-img{max-width:100%; max-height:220px; border-radius:var(--rs); display:block; border:1px solid var(--line)}
.card-file{display:flex; align-items:center; gap:10px; color:var(--mut); font-size:13px}
.expand{background:none; border:0; color:var(--sig); font-size:12px; padding:6px 0 0; cursor:pointer}

.decay{padding:0 13px 6px}
.decay-track{height:3px; border-radius:2px; background:var(--line); overflow:hidden}
.decay-fill{height:100%; background:var(--sig); border-radius:2px; transition:width .6s ease}
.decay-fill.low{background:var(--warn)}
.decay-label{font-size:10.5px; color:var(--faint); margin-top:4px; letter-spacing:.04em}

.card-actions{display:flex; gap:8px; padding:10px 13px; border-top:1px solid var(--line)}
.act{
  background:var(--raised); border:1px solid var(--line); color:var(--mut);
  padding:7px 12px; border-radius:var(--rs); font-size:12.5px; transition:.15s;
}
.act:hover{color:var(--ink); border-color:var(--sig-dim)}
.act-del{margin-left:auto; color:var(--faint)}
.act-del:hover{color:var(--warn); border-color:#3a2624}

/* ============================ TOAST =========================== */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--raised); border:1px solid var(--sig-dim); color:var(--ink);
  padding:11px 18px; border-radius:var(--r); font-size:13.5px; z-index:50;
  box-shadow:0 8px 30px rgba(0,0,0,.5); animation:rise .2s ease;
}
@keyframes rise{from{opacity:0; transform:translate(-50%,8px)}to{opacity:1; transform:translateX(-50%)}}

/* =========================== MOBILE =========================== */
@media (max-width:720px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .side.is-open{display:flex; position:fixed; inset:0; z-index:40; width:100%}
  .bar{gap:10px; padding:12px 14px}
  .bar-code{font-size:17px}
  .btn-ghost,.btn-shred{padding:8px 10px}
  .drop,.feed{margin-left:12px; margin-right:12px; padding-left:12px; padding-right:12px}
  .wordmark h1{font-size:30px; letter-spacing:.34em; margin-left:.34em}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}

/* ===================== ACCOUNT + AUTH ===================== */
.acct{display:flex; align-items:center; gap:8px; justify-content:flex-end; font-size:12px; color:var(--faint); margin-bottom:2px}
.acct-name{color:var(--mut)}
.acct-link{background:none; border:0; color:var(--faint); font-size:12px; cursor:pointer; padding:2px 4px; border-radius:3px}
.acct-link:hover{color:var(--sig)}

.side-acct{padding:14px 16px 12px; border-bottom:1px solid var(--line)}
.side-acct-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.side-user{font-size:14px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500}
.side-logout{background:none; border:0; color:var(--faint); font-size:11px; cursor:pointer; flex:none}
.side-logout:hover{color:var(--warn)}
.side-admin{margin-top:10px; width:100%; background:var(--raised); border:1px solid var(--sig-dim); color:var(--sig); padding:7px; border-radius:var(--rs); font-size:12.5px; cursor:pointer}
.side-admin:hover{filter:brightness(1.1)}
.lock{font-size:12px; opacity:.65; flex:none}

/* ===================== ADMIN ===================== */
.admin{position:fixed; inset:0; background:rgba(6,8,11,.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); z-index:60; display:flex; align-items:flex-start; justify-content:center; overflow:auto; padding:32px 18px}
.admin-panel{width:100%; max-width:920px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:0 20px 70px rgba(0,0,0,.6)}
.admin-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.admin-head h2{margin:0; font-family:var(--mono); font-size:20px; letter-spacing:.04em; font-weight:600}
.admin-sub{color:var(--mut); font-size:12.5px; margin:8px 0 18px}
.admin-totals{display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:22px}
.stat{background:var(--raised); border:1px solid var(--line); border-radius:var(--rs); padding:12px}
.stat-n{font-family:var(--mono); font-size:24px; color:var(--sig)}
.stat-l{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); margin-top:3px}
.admin-h3{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin:18px 0 8px}
.admin-table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--rs)}
.admin-table{width:100%; border-collapse:collapse; font-size:12.5px}
.admin-table th{text-align:left; padding:8px 10px; color:var(--faint); font-weight:500; border-bottom:1px solid var(--line); white-space:nowrap; font-size:11px; letter-spacing:.04em}
.admin-table td{padding:8px 10px; border-bottom:1px solid var(--line); color:var(--mut); white-space:nowrap}
.admin-table tr:last-child td{border-bottom:0}
.admin-table .u-name{color:var(--ink); font-weight:500}
.tag-admin{font-family:var(--mono); font-size:10px; color:var(--sig); border:1px solid var(--sig-dim); border-radius:3px; padding:1px 6px}
.tag-user{font-family:var(--mono); font-size:10px; color:var(--faint); border:1px solid var(--line); border-radius:3px; padding:1px 6px}
.uact{background:var(--raised); border:1px solid var(--line); color:var(--mut); font-size:11px; padding:4px 8px; border-radius:3px; cursor:pointer; margin-right:4px}
.uact:hover{color:var(--ink); border-color:var(--sig-dim)}
.uact-del:hover{color:var(--warn); border-color:#3a2624}
@media (max-width:720px){ .admin-totals{grid-template-columns:repeat(2,1fr)} }

/* ===================== INVITES + NOTICE ===================== */
.invite-gen{display:flex; gap:8px; margin-bottom:10px}
.invite-gen input{flex:1; background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:var(--rs); padding:8px 10px; font-size:13px; outline:none}
.invite-gen input:focus{border-color:var(--sig-dim)}
.inv-code{font-family:var(--mono); font-size:12px; color:var(--sig)}
.inv-used{color:var(--ok)}
.inv-open{color:var(--faint)}
.notice{position:fixed; top:0; left:0; right:0; z-index:70; background:var(--raised); border-bottom:1px solid var(--sig-dim); color:var(--ink); padding:12px 18px; display:flex; align-items:flex-start; gap:12px; box-shadow:0 6px 20px rgba(0,0,0,.4)}
.notice-body{flex:1; min-width:0}
.notice-from{font-size:10.5px; color:var(--sig); letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px}
.notice-msg{white-space:pre-wrap; word-break:break-word; margin-bottom:6px}
.notice-msg:last-child{margin-bottom:0}
.notice-x{background:var(--sig); color:#1a1206; border:0; border-radius:var(--rs); padding:6px 12px; font-size:12.5px; cursor:pointer; flex:none}

/* ===================== SHARING ===================== */
.share-panel{max-width:520px}
.share-users{display:flex; flex-direction:column; gap:6px; max-height:50vh; overflow:auto}
.share-user{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--raised); border:1px solid var(--line); border-radius:var(--rs); padding:10px 12px}
.share-user .su-name{color:var(--ink); font-size:14px}
.share-user button{background:var(--sig); color:#1a1206; border:0; border-radius:var(--rs); padding:6px 12px; font-size:12.5px; cursor:pointer}
.share-empty{color:var(--faint); font-size:13px; padding:10px}
.shared-list{display:flex; flex-direction:column; gap:6px}
.shared-item{display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:var(--rs); padding:8px 11px}
.shared-item .sh-code{font-family:var(--mono); font-size:13px; color:var(--ink); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shared-item .sh-from{font-size:11px; color:var(--faint); flex:none}
.shared-item button{background:var(--raised); border:1px solid var(--line); color:var(--mut); font-size:12px; padding:5px 10px; border-radius:var(--rs); cursor:pointer; flex:none}
.shared-item button:hover{color:var(--ink); border-color:var(--sig-dim)}
.shared-item .sh-x:hover{color:var(--warn); border-color:#3a2624}