:root { --bg:#0b0b12; --card:#14141f; --line:#24243a; --ink:#f0f0ff; --dim:#9a9ab8; --gold:#e6b422; --green:#39d98a; --red:#ff5c6c; --blue:#5aa9ff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:15px/1.45 Inter, system-ui, sans-serif; }
header { display:flex; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:2; }
header h1 { font:600 18px Inter, sans-serif; margin:0; letter-spacing:.02em; }
header .sub { color:var(--dim); font-size:13px; }
header .right { margin-left:auto; display:flex; gap:8px; }
main { padding:16px 20px 60px; max-width:1300px; margin:0 auto; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.card h3 { margin:0 0 4px; font-size:16px; display:flex; align-items:center; gap:8px; }
.card .meta { color:var(--dim); font-size:12.5px; font-family:"Space Mono", monospace; }
.pill { display:inline-block; font:11px "Space Mono", monospace; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--dim); }
.pill.live { color:var(--green); border-color:var(--green); }
.pill.wanted { color:var(--gold); border-color:var(--gold); }
.pill.test { color:var(--blue); border-color:var(--blue); }
.pill.bug { color:var(--red); border-color:var(--red); }
.pill.ask { color:var(--gold); border-color:var(--gold); }
.pill.idea { color:var(--blue); border-color:var(--blue); }
.pill.note, .pill.done { color:var(--green); border-color:var(--green); }
.counts { display:flex; gap:14px; margin-top:10px; }
.counts div { text-align:center; }
.counts b { display:block; font:600 22px Inter, sans-serif; }
.counts span { color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
button, .btn { background:var(--gold); color:#111; border:0; border-radius:8px; padding:8px 14px; font:600 14px Inter, sans-serif; cursor:pointer; }
button.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
button.small { padding:4px 10px; font-size:12px; }
input, textarea, select { width:100%; background:#0f0f18; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:9px 11px; font:15px Inter, sans-serif; }
textarea { min-height:90px; resize:vertical; }
label { display:block; color:var(--dim); font-size:12px; margin:10px 0 4px; }
h2 { font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:var(--dim); margin:26px 0 10px; }
.update { display:grid; grid-template-columns:1fr auto; gap:10px; padding:12px 0; border-top:1px solid var(--line); }
.update:first-child { border-top:0; }
.update .who { color:var(--dim); font-size:12px; font-family:"Space Mono", monospace; }
.update .text { margin:4px 0; white-space:pre-wrap; }
.update .log { color:var(--green); font-size:13px; margin-top:4px; }
.update .acts { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.empty { color:var(--dim); padding:20px; text-align:center; border:1px dashed var(--line); border-radius:12px; }
.hero { background:linear-gradient(135deg,#1a1a2a,#14141f); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:16px; }
.hero h2 { margin:0 0 6px; color:var(--ink); font-size:20px; text-transform:none; letter-spacing:0; }
.hero p { margin:0; color:var(--dim); }
.plan { display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.plan .card { flex:1; min-width:180px; }
.plan .price { font:600 26px Inter, sans-serif; color:var(--gold); }
.signin { max-width:360px; margin:12vh auto; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
dialog { background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:14px; padding:20px; width:min(520px, 92vw); }
dialog::backdrop { background:rgba(0,0,0,.6); }
a { color:var(--blue); }
@media (max-width:600px) { main { padding:12px 16px 60px; } .update { grid-template-columns:1fr; } .update .acts { flex-direction:row; align-items:center; } }