:root{--bg:#0b0d10;--card:#15191f;--line:#2a2f3a;--ink:#e7ecf3;--mut:#8b97a7;
--acc:#ff6a3d;--acc2:#ff8a5c;--good:#3ecf8e;--warn:#f5b73d;--bad:#ff5d5d}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
header{display:flex;justify-content:space-between;align-items:center;
padding:14px 20px;border-bottom:1px solid var(--line);position:sticky;top:0;
background:rgba(11,13,16,.85);backdrop-filter:blur(8px);z-index:5}
.brand{font-weight:800;letter-spacing:-.5px;font-size:20px}
.brand span{color:var(--acc)}
.keybox{position:relative}
.keybox-toggle{display:flex;align-items:center;gap:7px;background:var(--card);
border:1px solid var(--line);padding:7px 13px;border-radius:999px;font:inherit;
font-size:13px;color:var(--mut);cursor:pointer}
.keybox.haskey .keybox-toggle{color:var(--ink);border-color:var(--acc)}
.keybox-toggle .caret{font-size:10px;opacity:.7}
.keybox-panel{position:absolute;right:0;top:42px;width:300px;background:var(--card);
border:1px solid var(--line);border-radius:12px;padding:14px;z-index:10;
box-shadow:0 12px 40px rgba(0,0,0,.5)}
.kp-row{display:flex;justify-content:space-between;align-items:center;
font-size:13px;color:var(--mut);padding:4px 0}
.kp-row code{color:var(--ink);font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace}
.keybox-panel input{width:100%;margin:10px 0 8px;background:#0e1218;
border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:9px;
font:12px ui-monospace,Menlo,Consolas,monospace}
.kp-actions{display:flex;gap:8px}
.kp-btn{flex:1;background:var(--acc);color:#1a0e08;border:0;border-radius:8px;
padding:8px;font-weight:700;cursor:pointer;font-size:13px}
.kp-btn.ghost{background:#2b333f;color:var(--ink)}
.kp-hint{font-size:11px;color:var(--mut);margin-top:9px}
main{max-width:640px;margin:0 auto;padding:22px 14px 70px}
.tagline{color:var(--mut);font-size:14px;margin:4px 4px 16px}
.tagline b{color:var(--ink)}

/* ---- X-style composer ---- */
.composer{background:var(--card);border:1px solid var(--line);
border-radius:16px;padding:14px 16px}
.composer-row{display:flex;gap:12px}
.avatar{flex:0 0 42px;width:42px;height:42px;border-radius:50%;
background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0e08;
display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.composer-main{flex:1;min-width:0}
#text{width:100%;background:transparent;border:0;color:var(--ink);
font:20px/1.4 inherit;resize:none;outline:none;padding:8px 0;min-height:64px}
#text::placeholder{color:#5b6675}
.attach-preview{font-size:13px;color:var(--mut);background:#0e1218;
border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin:6px 0}
.attach-preview b{color:var(--ink)}
.audience-pill{display:inline-flex;align-items:center;gap:6px;margin:6px 0 4px;
color:var(--acc);font-size:13px;font-weight:600;border:1px solid transparent;
padding:3px 4px;border-radius:999px}
.audience-pill .globe{font-size:14px}
.audience-pill select{background:transparent;border:0;color:var(--acc);
font:inherit;font-weight:600;cursor:pointer;outline:none}
.audience-pill select option{background:var(--card);color:var(--ink)}
.audience-pill .sep{color:var(--mut)}
.audience-pill .at{color:var(--mut)}
.audience-pill input{background:transparent;border:0;color:var(--acc);
font:inherit;font-weight:600;outline:none;width:120px}
.audience-pill input::placeholder{color:#5b6675;font-weight:500}
.composer-bar{display:flex;align-items:center;justify-content:space-between;
border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.tools{display:flex;align-items:center;gap:2px}
.tool{display:inline-flex;align-items:center;justify-content:center;
width:34px;height:34px;border-radius:50%;color:var(--acc);background:none;
border:0;cursor:pointer;position:relative}
.tool:hover{background:rgba(255,106,61,.12)}
.tool input[type=file]{display:none}
.link-inline{width:170px;background:#0e1218;border:1px solid var(--line);
color:var(--ink);border-radius:8px;padding:6px 8px;font:13px inherit;margin-left:6px}
.post-side{display:flex;align-items:center;gap:12px}
.ring{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
justify-content:center;font-size:11px;color:var(--mut);
background:conic-gradient(var(--acc) 0deg,var(--line) 0deg)}
.ring.warn{color:var(--warn)}.ring.bad{color:var(--bad)}
.ring span{background:var(--card);width:28px;height:28px;border-radius:50%;
display:flex;align-items:center;justify-content:center}
.divider{width:1px;height:26px;background:var(--line)}
.post-btn{background:var(--acc);color:#1a0e08;font-weight:800;border:0;
border-radius:999px;padding:9px 22px;font-size:15px;cursor:pointer}
.post-btn:hover{background:var(--acc2)}
.post-btn:disabled{opacity:.5;cursor:not-allowed}
.needkey{margin:12px 0 0 54px;font-size:13px;color:var(--warn)}

/* ---- status / results ---- */
#status{margin-top:18px}
@keyframes s{to{transform:rotate(360deg)}}
.err{color:var(--bad)}

/* ---- live pipeline log ---- */
.pipe{background:var(--card);border:1px solid var(--line);border-radius:14px;
overflow:hidden}
.pipe.err{padding:16px 18px;color:var(--bad);font-size:14px}
.pipe-h{padding:11px 16px;border-bottom:1px solid var(--line);font-size:11px;
text-transform:uppercase;letter-spacing:.7px;color:var(--mut)}
#pipeBody{max-height:340px;overflow-y:auto;padding:6px 0}
.pl{display:flex;align-items:center;gap:10px;padding:7px 16px;
font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
color:var(--ink);opacity:.92}
.pl .dot{flex:0 0 7px;width:7px;height:7px;border-radius:50%;
background:var(--good)}
.pl.active{opacity:1}
.pl.active .dot{background:var(--acc);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}
50%{opacity:.35;transform:scale(.7)}}
.pl .tag{flex:0 0 auto;font-size:11px;font-weight:700;padding:2px 8px;
border-radius:999px;letter-spacing:.3px;font-family:inherit}
.pl .tag[data-tag=modal]{background:rgba(149,128,255,.16);color:#b9adff}
.pl .tag[data-tag=bai]{background:rgba(255,106,61,.16);color:var(--acc2)}
.pl .tag[data-tag=netlify]{background:rgba(62,207,142,.16);color:var(--good)}
.pl .tag[data-tag=rules]{background:rgba(245,183,61,.16);color:var(--warn)}
.pl .tag[data-tag=score]{background:rgba(255,255,255,.10);color:var(--ink)}
.pl .tag[data-tag=auth],.pl .tag[data-tag=starting]
{background:rgba(139,151,167,.16);color:var(--mut)}
.pl .msg{flex:1;min-width:0;white-space:nowrap;overflow:hidden;
text-overflow:ellipsis}
.pl .ms{flex:0 0 auto;color:var(--mut);font-size:11px;
font-variant-numeric:tabular-nums}
#results{margin-top:18px}
.rcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.grade{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--line);
padding-bottom:14px;margin-bottom:14px}
.grade .lt{font-size:46px;font-weight:800;color:var(--acc);line-height:1}
.grade .n{font-size:15px;color:var(--mut)}
.block{margin:14px 0}
.block h4{font-size:12px;text-transform:uppercase;letter-spacing:.6px;
color:var(--mut);margin-bottom:7px}
.li{padding:8px 11px;border-radius:10px;background:#0e1218;border:1px solid var(--line);
margin:5px 0;font-size:14px}
.li.good{border-left:3px solid var(--good)}
.li.warn{border-left:3px solid var(--warn)}
.li.bad{border-left:3px solid var(--bad)}
.rewrite{background:#0e1218;border:1px dashed var(--acc);border-radius:12px;
padding:14px;margin-top:8px;font-size:15px}
.rewrite .imp{color:var(--good);font-weight:800}
.chg{font-size:13px;color:var(--mut);margin:7px 0;padding-left:10px;
border-left:2px solid var(--line)}.chg b{color:var(--ink)}
details.heads{margin-top:12px}
details.heads summary{cursor:pointer;color:var(--acc);font-size:14px}
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
td{padding:5px 7px;border-bottom:1px solid var(--line)}
td:last-child{text-align:right;color:var(--mut)}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--acc)}

/* ---- pricing / faq ---- */
.pricing{text-align:center;margin-top:38px}
.sub{color:var(--mut);font-size:14px}
.packs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.pack{background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:18px 26px;min-width:140px}
.pack.best{border-color:var(--acc)}
.pack h3{font-size:26px}.pack small{color:var(--mut)}
.pack button{margin-top:10px;background:var(--acc);color:#1a0e08;border:0;
border-radius:999px;padding:8px 20px;font-weight:800;cursor:pointer}
.finehint{font-size:13px;color:var(--mut)}
.faq{margin-top:38px}
.faq h2{margin-bottom:6px}
.faq details{background:var(--card);border:1px solid var(--line);
border-radius:12px;padding:12px 14px;margin:8px 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--mut);margin-top:8px;font-size:14px}
footer{border-top:1px solid var(--line);padding:22px;text-align:center;
color:var(--mut);font-size:12px;max-width:640px;margin:40px auto 0}

/* ---- cleaned results card ---- */
.rcard .gnum{font-size:18px;font-weight:700;color:var(--ink)}
.rcard .gnum span{color:var(--mut);font-weight:400;font-size:13px}
.grade .n{line-height:1.4}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.pill{background:rgba(62,207,142,.10);border:1px solid rgba(62,207,142,.35);
color:var(--good);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.kv>div{background:#0e1218;border:1px solid var(--line);border-radius:10px;padding:8px 11px}
.kv span{display:block;font-size:10px;color:var(--mut);text-transform:uppercase;
letter-spacing:.05em;margin-bottom:3px}
.kv b{font-size:14px;color:var(--ink);font-weight:600}
.rw-text{font-size:15px;line-height:1.55;color:var(--ink);white-space:pre-wrap}
.rw-delta{margin:11px 0;font-size:13px;border-radius:8px;padding:9px 11px}
.rw-delta.good{color:var(--good);background:rgba(62,207,142,.08);
border:1px solid rgba(62,207,142,.30)}
.rw-delta.good b{color:var(--good)}
.rw-delta.neutral{color:var(--mut);background:#0e1218;border:1px solid var(--line)}
.rw-changes{list-style:none;margin:8px 0 0;padding:0;display:flex;
flex-direction:column;gap:9px}
.rw-changes li{font-size:13px;color:var(--ink);border-left:2px solid var(--acc);
padding-left:11px;line-height:1.5}
.rw-changes .rw-why{display:block;color:var(--mut);font-size:12px;margin-top:3px}
.disc{color:var(--mut);font-size:12px;margin:8px 0;line-height:1.5}
.tagline2{color:var(--mut);font-size:13px;margin:0 4px 16px}
.tagline2 b{color:var(--ink)}
.tool-text{background:none;border:1px solid var(--line);color:var(--acc);
font:inherit;font-size:13px;border-radius:999px;padding:5px 13px;cursor:pointer;margin-left:10px}
.tool-text:hover{border-color:var(--acc);background:rgba(255,106,61,.10)}
.grade.tA .lt{color:var(--good)}
.grade.tB .lt{color:var(--acc)}
.grade.tC .lt{color:var(--bad)}
.copy-btn{margin-top:12px;background:var(--acc);color:#1a0e08;border:0;
border-radius:8px;padding:9px 18px;font-weight:800;font-size:13px;cursor:pointer}
.copy-btn:hover{background:var(--acc2)}
.copy-btn.done{background:var(--good);color:#0a1f15}
.rw-head{list-style:none;border:0!important;padding:0!important;color:var(--mut);
font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.composer.drag{border-color:var(--acc);box-shadow:0 0 0 2px rgba(255,106,61,.35)}
@media (max-width:560px){
.keybox-panel{width:min(300px,92vw)}
main{padding:18px 12px 60px}
.packs{gap:8px}
.pack{padding:14px 16px;min-width:120px}
}