:root{
  --bg:#0b0f14; --panel:#121821; --panel2:#0e141c; --line:#1e2732;
  --ink:#e8eef6; --mut:#8a97a8; --blue:#5BA3F5; --blue-d:#2f6fd0;
  --good:#43c17a; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(1200px 700px at 70% -10%,#13202f 0%,var(--bg) 55%);
  color:var(--ink); font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}
.muted{color:var(--mut)}
.center{text-align:center}
.ac{color:var(--blue)}
.brand{font-weight:700;font-size:22px;letter-spacing:-.02em}
.brand.sm{font-size:16px}

/* buttons */
.btn{border:0;border-radius:10px;padding:12px 16px;font:inherit;font-weight:600;cursor:pointer;transition:.15s}
.btn.sm{padding:8px 12px;font-size:13px}
.btn-primary{background:var(--blue);color:#04101f}
.btn-primary:hover{background:#79b6ff}
.btn-primary:disabled{background:#26313f;color:#5b6675;cursor:not-allowed}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--blue)}
.link{background:0;border:0;color:var(--mut);cursor:pointer;font:inherit}
.link:hover{color:var(--ink)}
.err{color:#ff7d7d;min-height:18px;font-size:13px;margin:6px 0 0}

/* login */
.login{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px 30px;width:340px;text-align:center}
.login-card .sub{color:var(--mut);margin:.2em 0 22px}
.login-card label{display:block;text-align:left;font-size:13px;color:var(--mut);margin-bottom:16px}
.login-card input{width:100%;margin-top:6px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;color:var(--ink);font:inherit}
.login-card input:focus{outline:0;border-color:var(--blue)}
.login-card .btn{width:100%}

/* app shell */
.topbar{display:flex;align-items:center;gap:22px;padding:14px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(11,15,20,.85);backdrop-filter:blur(8px);z-index:5}
.tabs{display:flex;gap:4px;margin-left:8px}
.tab{background:0;border:0;color:var(--mut);padding:8px 14px;border-radius:8px;cursor:pointer;font:inherit;font-weight:600}
.tab.active{background:var(--panel);color:var(--ink)}
.topbar .link{margin-left:auto}

.tabpane{display:none;max-width:1120px;margin:0 auto;padding:24px 22px 60px}
.tabpane.active{display:block}
#tab-reply.active{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media(max-width:820px){#tab-reply.active{grid-template-columns:1fr}}

/* drop zone */
.drop{position:relative;border:1.5px dashed #2b3846;border-radius:var(--radius);background:var(--panel2);min-height:230px;display:grid;place-items:center;text-align:center;padding:20px;transition:.15s;cursor:pointer}
.drop.drag{border-color:var(--blue);background:#101a27}
.drop-ico{font-size:30px;color:#3a4a5c;margin-bottom:8px}
.drop-empty p{margin:4px 0}
.preview{max-width:100%;max-height:420px;border-radius:10px;display:block}

.fld{display:block;margin:16px 0 6px;font-size:13px}
.fld span{color:var(--mut)} .fld i{opacity:.7;font-style:normal}
.fld input{width:100%;margin-top:6px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px;color:var(--ink);font:inherit}
.fld input:focus{outline:0;border-color:var(--blue)}

.modes{display:flex;align-items:center;gap:12px;margin:14px 0 4px}
.modes-lbl{font-size:13px;color:var(--mut)}
.seg{display:inline-flex;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:3px}
.segbtn{background:0;border:0;color:var(--mut);padding:7px 12px;border-radius:8px;cursor:pointer;font:inherit;font-size:13px;font-weight:600}
.segbtn.active{background:var(--blue);color:#04101f}

.go{width:100%;margin-top:16px}
#go-hint{margin:10px 0 0}

/* results */
.results{display:flex;flex-direction:column;gap:14px;min-height:230px}
.empty-state{border:1px solid var(--line);border-radius:var(--radius);padding:40px 20px;text-align:center;background:var(--panel2)}
.post-sum{font-size:13px;color:var(--mut);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.post-sum b{color:var(--ink)}
.reply{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.reply .angle{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);background:#0f1b2b;border:1px solid #1c2f47;border-radius:6px;padding:3px 8px;margin-bottom:10px}
.reply .txt{font-size:16px;line-height:1.5}
.reply .row{display:flex;gap:8px;margin-top:12px}
.copy{background:#16202c;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.copy:hover{border-color:var(--blue)}
.copy.done{background:#12321f;border-color:#1f6b3e;color:var(--good)}
.loading{display:flex;align-items:center;gap:10px;color:var(--mut);padding:20px}
.spin{width:16px;height:16px;border:2px solid #26313f;border-top-color:var(--blue);border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* targets */
.targets-head{margin-bottom:16px}
.targets-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.tcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.tcard a.name{color:var(--ink);font-weight:600;text-decoration:none}
.tcard a.name:hover{color:var(--blue)}
.tcard .head{font-size:13px;color:var(--mut);margin:3px 0 8px}
.tcard .why{font-size:13px;color:#aeb9c8}
.tcard .open{display:inline-block;margin-top:10px;font-size:13px;color:var(--blue);text-decoration:none}
.mono{font-family:"JetBrains Mono",monospace}