:root{--bg:#f4f5f7;--card:#fff;--ink:#16181d;--mute:#6b7280;--line:#e5e7eb;--red:#d6001c;--green:#0f9d58;--amber:#b45309;--blue:#2563eb;--r:14px}
*{box-sizing:border-box}body{margin:0;font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
header{position:sticky;top:0;z-index:5;background:#16181d;color:#fff;display:flex;align-items:center;gap:12px;padding:10px 16px}
header .logo{background:var(--red);border-radius:8px;padding:4px 8px;font-weight:800;font-size:13px}
header h1{font-size:16px;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}header a.x{color:#cbd5e1;font-size:13px}
main{max-width:1240px;margin:0 auto;padding:16px}
.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.tab{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;display:flex;gap:8px;align-items:center}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.badge{background:var(--red);color:#fff;border-radius:999px;padding:0 8px;font-size:12px;min-width:22px;text-align:center}
.tab:not(.on) .badge.g{background:#e5e7eb;color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;gap:12px;transition:.15s box-shadow}
.card:hover{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.card img{width:78px;height:100px;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--line);flex:none;background:#fafafa}
.card .b{min-width:0;flex:1}.card .t{font-weight:650;font-size:14px;word-break:break-word}
.card .q{color:var(--mute);font-size:13px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;margin-right:4px}
.pill.rev{background:#fff1f2;color:var(--red)}.pill.done{background:#e7f6ee;color:var(--green)}.pill.c{background:#f3f4f6;color:var(--mute)}
.meta{font-size:12px;color:var(--mute);margin-top:4px}
.detail{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px}
.viewer{position:sticky;top:64px}.scan{overflow:auto;height:calc(100vh - 190px);min-height:360px;border-radius:10px;background:#e9ebef;touch-action:pan-x pan-y pinch-zoom}
.scan img{display:block;width:100%;transform-origin:0 0}
.zoom{display:flex;gap:6px;margin-bottom:8px;align-items:center;flex-wrap:wrap}.zoom .sp{flex:1}
button,.btn{font:inherit;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:600}
.btn.primary,button.primary{background:var(--red);border-color:var(--red);color:#fff}
.question{background:#fffbeb;border:1px solid #fcd34d;border-radius:var(--r);padding:14px;margin-bottom:14px}
.question .lbl{font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--amber);text-transform:uppercase}
.question p{margin:6px 0 0;font-size:16px;font-weight:550}
label{display:block;font-size:12px;font-weight:700;color:var(--mute);margin:10px 0 4px;text-transform:uppercase;letter-spacing:.04em}
input,select,textarea{width:100%;font:inherit;font-size:16px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:#fff}
input:focus,textarea:focus,select:focus{outline:2px solid #93c5fd;border-color:var(--blue)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.row3{display:grid;grid-template-columns:2fr 1fr;gap:0 10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;font-size:14px}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}.chip.due.on{background:var(--red);border-color:var(--red)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{border:0;border-radius:0}.seg button.on{background:var(--ink);color:#fff}
.fname{font-family:ui-monospace,Menlo,monospace;font-size:13px;background:#0f172a;color:#e2e8f0;padding:10px 12px;border-radius:10px;word-break:break-all}
.old{font-size:12px;color:var(--mute);word-break:break-all}
details{margin-top:12px}summary{cursor:pointer;font-weight:700}pre{white-space:pre-wrap;font-size:12px;max-height:300px;overflow:auto;background:#f8fafc;padding:10px;border-radius:8px}
.actions{padding:12px 0 4px;display:flex;gap:8px;margin-top:8px}
.actions .primary{flex:1;padding:12px}
.nav{display:flex;gap:8px;align-items:center;margin-bottom:12px;font-size:13px;color:var(--mute)}.nav .sp{flex:1}
kbd{font-size:11px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:#fff;color:var(--mute)}
.keys{font-size:12px;color:var(--mute);margin-top:10px}
.login{max-width:360px;margin:12vh auto;background:#fff;padding:24px;border-radius:var(--r);border:1px solid var(--line)}
.err{color:var(--red);font-weight:600}.empty{padding:40px;text-align:center;color:var(--mute)}
@media(max-width:860px){.detail{grid-template-columns:1fr}.viewer{position:static}.scan{height:58vh}.keys,.hide-m{display:none}.grid{grid-template-columns:1fr}main{padding:12px}}