:root { --ink:#1f1b18; --soft:#6b625b; --line:#e4ddd6; --bg:#faf7f4; --card:#fff; --accent:#8a5a3c; --ok:#2f6f4f; --warn:#9a5b00; --bad:#a23b2f; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color:var(--ink); background:var(--bg); }
header { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1rem; padding:.8rem 1rem; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--ink); text-decoration:none; }
.tag { font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--soft); border:1px solid var(--line); border-radius:99px; padding:.1rem .6rem; }
nav { margin-left:auto; display:flex; align-items:center; gap:1rem; font-size:.9rem; }
nav form { margin:0; }
.who { color:var(--soft); }
main { max-width:960px; margin:0 auto; padding:1rem 1rem 4rem; }
h1 { font-size:1.6rem; margin:.4rem 0 .8rem; }
h2 { font-size:1.15rem; margin:1.6rem 0 .6rem; }
h3 { font-size:1rem; margin:.2rem 0; }
h4 { font-size:.9rem; color:var(--soft); margin:1rem 0 .4rem; }
a { color:var(--accent); }
.crumb, .meta { color:var(--soft); font-size:.9rem; margin:.2rem 0; }
.opt { font-size:.75rem; font-weight:400; color:var(--soft); border:1px solid var(--line); border-radius:99px; padding:.05rem .5rem; margin-left:.3rem; }
.panel, .run, .sub { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem; margin:.8rem 0; }
.cards, .grid, .files, .notes { list-style:none; margin:0; padding:0; }
.cards { display:grid; gap:.6rem; }
.card { display:flex; flex-direction:column; gap:.2rem; padding:1rem; background:var(--card); border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); }
.card span, .grid span { color:var(--soft); font-size:.85rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:.8rem; margin-top:.6rem; }
.grid a { display:flex; flex-direction:column; gap:.2rem; text-decoration:none; color:var(--ink); }
.grid img { width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:10px; background:#e9e3dc; }
.empty { color:var(--soft); }
button, .button, .pick { font:inherit; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:.7rem 1rem; cursor:pointer; text-decoration:none; display:inline-block; min-height:44px; }
button.primary, .button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
button:disabled { opacity:.45; cursor:not-allowed; }
button.link { border:0; background:none; padding:0; min-height:0; color:var(--accent); text-decoration:underline; }
.pick input { position:absolute; width:1px; height:1px; opacity:0; }
label { display:block; margin:.6rem 0; font-size:.9rem; color:var(--soft); }
input[type=text], input:not([type]), textarea { display:block; width:100%; margin-top:.3rem; font:inherit; padding:.7rem; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); }
.notice { background:#fff6e5; border:1px solid #f0d9a8; border-radius:10px; padding:.7rem .9rem; font-size:.92rem; }
.msg { min-height:1.4rem; font-size:.92rem; }
.msg.err { color:var(--bad); }
.msg.ok { color:var(--ok); }
.worker { font-size:.9rem; color:var(--soft); display:flex; align-items:center; gap:.5rem; }
.dot { width:.6rem; height:.6rem; border-radius:50%; background:#bbb; flex:none; }
.worker.online .dot { background:var(--ok); }
.worker.offline .dot { background:var(--warn); }
.chip { display:inline-block; font-size:.82rem; font-weight:600; padding:.15rem .6rem; border-radius:99px; background:#eee7e0; }
.s-queued, .s-claimed { background:#fff1d6; } .s-on_mac, .s-editing { background:#e3edf7; } .s-results { background:#dff0e6; } .s-failed { background:#f7dfdb; }
.files li { border-top:1px solid var(--line); padding:.6rem 0; font-size:.92rem; }
.files .name { word-break:break-all; }
.files progress { width:100%; height:.5rem; margin:.3rem 0; }
.files .state { color:var(--soft); font-size:.85rem; display:flex; justify-content:space-between; gap:.5rem; align-items:center; }
.files .state.err { color:var(--bad); }
video { width:100%; max-width:420px; max-height:75vh; background:#000; border-radius:12px; display:block; margin:.6rem 0; }
.devlabel { display:inline-block; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--warn); border:1px solid #f0d9a8; background:#fff6e5; padding:.15rem .6rem; border-radius:6px; }
.checks { display:grid; gap:.4rem; margin:.8rem 0; font-size:.9rem; }
.checks div { display:flex; gap:.6rem; border-top:1px solid var(--line); padding-top:.4rem; }
.checks dt { flex:0 0 11rem; color:var(--soft); } .checks dd { margin:0; }
.verdicts, .row { display:flex; flex-wrap:wrap; gap:.5rem; }
.verdicts button.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.notes li { border-top:1px solid var(--line); padding:.6rem 0; } .notes p { margin:.2rem 0; }
.verdict { font-size:.8rem; font-weight:600; padding:.1rem .5rem; border-radius:99px; background:#eee7e0; }
.v-would_use { background:#dff0e6; } .v-needs_changes { background:#fff1d6; } .v-would_not_use { background:#f7dfdb; }
@media (min-width:700px) { .cards { grid-template-columns:repeat(2, 1fr); } }