:root { --ink:#141414; --muted:#6b6b6b; --line:#dcdcdc; --bg:#f4f4f2; --card:#fff; --ok:#1d7a3a; --warn:#a15c00; --bad:#b00020; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
[hidden] { display:none !important; }
.top { background:#141414; color:#fff; padding:14px 16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.brand { display:flex; align-items:center; gap:10px; } .brand > div { display:flex; flex-direction:column; } .brand span { color:#cfcfcf; font-size:13px; }
.logo { width:44px; height:44px; border-radius:50%; background:#fff; padding:2px; }
.signin-logo { display:block; width:88px; height:88px; margin:0 auto 10px; }
#view-signin h2 { text-align:center; margin-bottom:4px; } #view-signin > p { text-align:center; }
nav { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tab { background:transparent; color:#ddd; border:1px solid #444; border-radius:8px; padding:8px 12px; font:inherit; font-size:14px; cursor:pointer; }
.tab.active { background:#fff; color:#141414; border-color:#fff; }
.link { background:none; border:none; color:#cfcfcf; text-decoration:underline; font:inherit; font-size:14px; cursor:pointer; }
main { max-width:980px; margin:0 auto; padding:16px 14px 130px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin:0 0 16px; }
.card h2 { margin:0 0 12px; font-size:17px; }
.narrow { max-width:420px; margin:40px auto; }
label { display:block; font-size:14px; font-weight:600; margin:0 0 6px; }
.hint { font-weight:400; color:var(--muted); font-size:12.5px; }
.muted { color:var(--muted); font-size:14px; margin:0 0 12px; }
.f { margin:0 0 14px; }
input, select, textarea { width:100%; font:inherit; color:inherit; padding:11px 12px; border:1px solid #c9c9c9; border-radius:8px; background:#fff; }
textarea { min-height:84px; resize:vertical; }
input:focus, select:focus, textarea:focus { outline:2px solid #141414; outline-offset:0; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.areas { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.areas textarea { min-height:80px; }
.btn { font:inherit; font-weight:600; border-radius:8px; padding:11px 16px; cursor:pointer; border:1px solid #141414; background:#141414; color:#fff; }
.btn.outline { background:#fff; color:#141414; }
.btn.small { padding:6px 10px; font-size:13px; }
.btn.wide { width:100%; margin-top:10px; }
.btn:disabled { opacity:.5; cursor:default; }
.or { text-align:center; color:var(--muted); margin:14px 0; font-size:13px; }
.msg { margin:8px 0 0; font-size:14px; } .msg.err { color:var(--bad); } .msg.ok { color:var(--ok); }
.bar { position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--line); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); }
.bar .in { max-width:980px; margin:0 auto; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.bar .msg { flex-basis:100%; margin:0; }
.bar .btn:last-child { flex:1; min-width:160px; }
.chk { display:flex; gap:8px; align-items:center; font-weight:400; margin-top:10px; } .chk input { width:auto; }
.thumbs { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.thumbs figure { margin:0; position:relative; } .thumbs img { width:84px; height:84px; object-fit:cover; border-radius:6px; border:1px solid var(--line); }
.thumbs button { position:absolute; top:2px; right:2px; border:none; background:#141414; color:#fff; border-radius:50%; width:22px; height:22px; cursor:pointer; }
#previewFrame { width:100%; height:75vh; border:1px solid var(--line); border-radius:8px; }
.filters { display:grid; grid-template-columns:2fr 1fr 1fr auto; gap:8px; margin-bottom:12px; }
.summary { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; font-size:14px; }
.summary span { background:#f1f1ef; border-radius:20px; padding:4px 10px; }
.tablewrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:top; white-space:nowrap; }
th { font-size:12.5px; color:var(--muted); font-weight:600; }
.pill { display:inline-block; border-radius:20px; padding:2px 9px; font-size:12.5px; font-weight:600; }
.p-ok { background:#e3f3e7; color:var(--ok); } .p-warn { background:#fff2dd; color:var(--warn); } .p-bad { background:#fde4e7; color:var(--bad); } .p-none { background:#eee; color:#555; }
.list .item { border-bottom:1px solid var(--line); padding:10px 0; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
dialog { border:none; border-radius:12px; max-width:720px; width:95vw; padding:18px; }
dialog::backdrop { background:rgba(0,0,0,.45); }
.dlgbar { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.kv { display:grid; grid-template-columns:180px 1fr; gap:4px 12px; font-size:14px; } .kv div:nth-child(odd) { color:var(--muted); }
.events { font-size:13px; color:#444; margin:10px 0 0; padding-left:18px; }
@media (max-width:700px){ .grid2, .areas, .filters { grid-template-columns:1fr; } .kv { grid-template-columns:1fr; } }