/* The Ruthless idea app - calm dark, one box, gold only for what is real. */
:root { --bg:#0b0b0d; --panel:#141417; --panel2:#1b1b20; --line:rgba(255,255,255,.09); --ink:#f1efe9; --dim:#9a968c; --faint:#5d5a52;
  --gold:#e9c46a; --green:#46d68c; --red:#ff5d6e; --blue:#7cc4ff; --r:16px; }
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html,body { background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; min-height:100%; }
body { padding:0 0 80px; }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
small, .dim { color:var(--dim); } .tiny { font-size:13px; }
.wrap { max-width:640px; margin:0 auto; padding:18px 16px; }
header.top { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 0 6px; }
header.top .brand { font-weight:800; letter-spacing:-.02em; font-size:18px; } header.top .brand i { color:var(--gold); font-style:normal; }
header.top nav { display:flex; gap:4px; }
header.top nav button { background:none; border:1px solid transparent; color:var(--dim); font:inherit; font-size:14px; padding:6px 10px; border-radius:10px; cursor:pointer; }
header.top nav button.on { color:var(--ink); border-color:var(--line); background:var(--panel); }
h1 { font-size:26px; letter-spacing:-.02em; line-height:1.15; } h2 { font-size:18px; letter-spacing:-.01em; }
.eyebrow { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }

/* the box */
.box { margin-top:14px; background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:14px; }
.box textarea { width:100%; min-height:110px; resize:vertical; background:transparent; border:0; color:var(--ink); font:inherit; font-size:18px; line-height:1.4; outline:none; }
.box textarea::placeholder { color:var(--faint); }
.box .row { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:6px; }
.btn { appearance:none; font:inherit; font-weight:700; color:var(--ink); background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:11px 16px; cursor:pointer; }
.btn:disabled { opacity:.45; cursor:default; }
.btn.go { background:var(--gold); color:#2a1d00; border-color:var(--gold); font-size:16px; padding:12px 20px; }
.btn.sm { padding:7px 12px; font-size:14px; } .btn.mic.on { border-color:var(--red); color:var(--red); }
.btn.quiet { background:none; }

/* the count + list */
.count { display:flex; align-items:baseline; gap:10px; margin:22px 0 6px; }
.count b { font-size:44px; font-weight:800; letter-spacing:-.03em; line-height:1; color:var(--gold); }
.list { display:grid; gap:8px; margin-top:10px; }
.item { display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; cursor:pointer; }
.item:hover { border-color:rgba(255,255,255,.2); }
.item .n { font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; } .item .n small { display:block; font-weight:500; color:var(--dim); font-size:11px; }
.item .t { font-weight:600; } .item .t small { display:block; font-weight:400; color:var(--dim); font-size:13px; }
.item .s { font-size:12px; color:var(--dim); text-align:right; white-space:nowrap; }
.item .s b { color:var(--green); display:block; font-size:14px; }
.empty { color:var(--dim); padding:18px 4px; }

/* the card */
.card { background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:18px 18px 14px; margin-top:12px; }
.card .num { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.card .num .eyebrow { color:var(--dim); }
.card h1 { margin-top:4px; }
.card .line { font-size:18px; margin-top:8px; }
.kv { display:grid; grid-template-columns:120px 1fr; gap:6px 12px; margin-top:14px; font-size:15px; }
.kv dt { color:var(--dim); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding-top:3px; } .kv dd { }
.sec { background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:16px 18px; margin-top:10px; }
.sec .h { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.sec .h h2 { display:flex; align-items:center; gap:8px; }
.sec .body { margin-top:10px; }
.sec .wait { color:var(--dim); font-size:14px; }
.sec .wait::after { content:'…'; animation:dots 1.2s steps(4) infinite; }
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }
.verdict { display:inline-block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; border-radius:999px; padding:3px 10px; border:1px solid var(--line); }
.verdict.open { color:var(--green); border-color:var(--green); } .verdict.crowded { color:var(--gold); border-color:var(--gold); } .verdict.taken { color:var(--red); border-color:var(--red); }
.found { display:grid; gap:6px; margin-top:10px; }
.found a { display:block; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:9px 12px; color:var(--ink); }
.found a b { display:block; } .found a small { color:var(--dim); }
.steps { display:grid; gap:10px; margin-top:8px; counter-reset:s; }
.step { background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.step b { display:block; } .step b::before { counter-increment:s; content:counter(s) '. '; color:var(--gold); }
.step p { margin-top:4px; font-size:15px; }
.prompt { margin-top:8px; background:#0b0b0d; border:1px dashed var(--line); border-radius:10px; padding:10px 12px; font:13px/1.5 ui-monospace,Menlo,Consolas,monospace; white-space:pre-wrap; color:#d9d4c7; position:relative; }
.prompt button { position:absolute; right:8px; top:8px; }
.tools { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } .tools span { font-size:13px; border:1px solid var(--line); border-radius:999px; padding:3px 10px; color:var(--dim); }
.nums { display:flex; gap:18px; margin-top:8px; } .nums div b { display:block; font-size:30px; font-weight:800; color:var(--gold); letter-spacing:-.02em; line-height:1; } .nums div small { font-size:12px; }
.link { display:flex; gap:8px; align-items:center; margin-top:10px; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:8px 8px 8px 12px; }
.link code { flex:1; font-size:13px; color:var(--blue); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.signups { margin-top:8px; display:grid; gap:4px; font-size:14px; } .signups span { color:var(--dim); font-size:12px; margin-left:6px; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.locked { background:linear-gradient(135deg, rgba(233,196,106,.1), transparent); border:1px solid rgba(233,196,106,.35); border-radius:22px; padding:16px 18px; margin-top:12px; }
.locked b { color:var(--gold); }
.note { font-size:14px; color:var(--dim); margin-top:8px; }
.err { color:var(--red); font-size:14px; margin-top:8px; }
input.txt { width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; color:var(--ink); font:inherit; outline:none; }
input.txt:focus { border-color:var(--gold); }
.drop { display:grid; gap:8px; margin-top:10px; }
.drop .item { grid-template-columns:1fr auto; }
.back { background:none; border:0; color:var(--dim); font:inherit; cursor:pointer; padding:6px 0; }
.back:hover { color:var(--ink); }
.toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:9px 14px; font-size:14px; z-index:9; }
@media (max-width:480px) { .kv { grid-template-columns:1fr; gap:2px 0; } .kv dt { padding-top:8px; } }

/* ---- v2: welcome, ladder, crew, notices, chart ---- */
header.top .brand { display:flex; align-items:center; gap:8px; color:var(--ink); } header.top .brand img { border-radius:7px; }
.bell { display:inline-block; min-width:18px; height:18px; border-radius:9px; background:var(--gold); color:#2a1d00; font-size:11px; font-weight:800; line-height:18px; text-align:center; margin-left:6px; padding:0 5px; }
.hero { margin-top:18px; }
.hero h1 { font-size:32px; margin-top:6px; }
.hero .say { margin-top:16px; font-size:18px; line-height:1.5; color:var(--ink); }
.hero .who { color:var(--gold); margin-top:6px; font-weight:700; }
.ladder-intro { list-style:none; margin-top:22px; display:grid; gap:6px; counter-reset:l; }
.ladder-intro li { display:grid; grid-template-columns:28px 92px 1fr; gap:10px; align-items:baseline; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.ladder-intro li::before { counter-increment:l; content:counter(l); color:var(--gold); font-weight:800; }
.ladder-intro li b { color:var(--ink); } .ladder-intro li span { color:var(--dim); font-size:14px; }
.btn.big { width:100%; margin-top:18px; font-size:18px; padding:16px; }
.working { margin-top:10px; font-size:14px; color:var(--gold); }
.working::after { content:''; display:inline-block; width:14px; text-align:left; animation:dots 1.2s steps(4) infinite; }
.count .counts { margin-left:auto; font-size:13px; color:var(--dim); } .count .counts b { color:var(--ink); }
.ladder { display:flex; gap:3px; margin-top:10px; } .ladder i { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.1); }
.ladder i.on { background:var(--gold); } .ladder i.done { background:var(--green); }
.ladder-label { display:flex; justify-content:space-between; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-top:5px; }
.ladder-label b { color:var(--gold); }
.item .st { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); } .item .st.s3, .item .st.s4 { color:var(--gold); } .item .st.s5 { color:var(--blue); } .item .st.s6 { color:var(--green); }
.take { margin-top:14px; background:linear-gradient(135deg, rgba(233,196,106,.09), transparent); border:1px solid rgba(233,196,106,.3); border-radius:14px; padding:12px 14px; }
.take .eyebrow { margin-bottom:6px; } .take p { font-size:15px; margin-top:4px; padding-left:14px; position:relative; } .take p::before { content:'—'; position:absolute; left:0; color:var(--gold); }
.feed-item { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.feed-item .t { font-weight:600; } .feed-item .t small { display:block; font-weight:400; color:var(--dim); font-size:13px; } .feed-item .t em { font-style:normal; color:var(--dim); font-size:12px; }
.feed-item .w { text-align:center; } .feed-item .w b { display:block; font-size:22px; color:var(--gold); line-height:1; } .feed-item .w small { font-size:11px; }
.feed-item .w button { margin-top:6px; } .feed-item .w button.on { border-color:var(--green); color:var(--green); }
.chart { display:flex; align-items:flex-end; gap:3px; height:60px; margin-top:10px; } .chart i { flex:1; background:var(--gold); border-radius:3px 3px 0 0; min-height:2px; opacity:.85; }
.chart-label { display:flex; justify-content:space-between; font-size:11px; color:var(--dim); margin-top:4px; }
.refs { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; } .refs span { font-size:12px; border:1px solid var(--line); border-radius:999px; padding:2px 9px; color:var(--dim); } .refs span b { color:var(--ink); }
.notices { display:grid; gap:6px; margin-top:8px; } .notices .nt { display:flex; justify-content:space-between; gap:10px; font-size:14px; padding:8px 10px; background:var(--panel2); border:1px solid var(--line); border-radius:10px; }
.notices .nt.new { border-color:var(--gold); } .notices .nt small { white-space:nowrap; }
.stage-btns { display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width: 480px) { header.top { flex-wrap: wrap; } header.top nav { width: 100%; justify-content: space-between; } header.top nav button { padding: 6px 8px; font-size: 14px; } }