:root { --bg:#14181c; --panel:#1f262d; --line:#34404b; --text:#f2f5f7; --muted:#9fb0bd; --accent:#2fbf8f; --accent-ink:#06261b; --warn:#f0b445; --bad:#f07a6a; --tabs:64px; }
[hidden] { display:none !important; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--text); font:17px/1.5 system-ui,-apple-system,"Noto Sans Thai","Sarabun",sans-serif; }
h1 { font-size:24px; margin:0 0 4px; } h2 { font-size:20px; margin:0 0 10px; } h3 { font-size:17px; margin:18px 0 8px; color:var(--muted); font-weight:600; }
p { margin:6px 0; } .muted { color:var(--muted); } .small { font-size:14px; }
a { color:inherit; text-decoration:none; }
.btn { appearance:none; border:1px solid var(--line); background:var(--panel); color:var(--text); font:inherit; font-weight:600; padding:12px 16px; border-radius:14px; min-height:48px; cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.danger { color:var(--bad); } .btn.big { width:100%; min-height:56px; font-size:19px; } .btn.small { min-height:40px; padding:6px 12px; font-size:15px; }
.btn:disabled { opacity:.5; }
.row { display:flex; gap:10px; align-items:center; } .row > .grow { flex:1; min-width:0; }
input[type=text],input[type=password],input[type=search],select { width:100%; font:inherit; color:var(--text); background:#10151a; border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-height:50px; }
label { display:block; margin:14px 0 6px; color:var(--muted); font-size:15px; }

/* login */
body.login { display:flex; align-items:center; justify-content:center; padding:20px; }
.login-box { width:100%; max-width:380px; text-align:center; } .login-box label { text-align:left; } .login-box .btn { margin-top:16px; }
.logo { font-size:56px; } .err { color:var(--bad); min-height:1.5em; }

/* layout */
.view { position:fixed; inset:0 0 calc(var(--tabs) + env(safe-area-inset-bottom)) 0; }
.page { overflow-y:auto; padding:18px 16px 30px; max-width:640px; margin:0 auto; }
.tabs { position:fixed; left:0; right:0; bottom:0; height:calc(var(--tabs) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); display:flex; background:#0d1114; border-top:1px solid var(--line); z-index:5; }
.tabs a { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:14px; color:var(--muted); }
.tabs a span { font-size:22px; line-height:1.1; } .tabs a.on { color:var(--accent); font-weight:700; }

/* live */
#live { background:#000; overflow:hidden; }
#cam { width:100%; height:100%; object-fit:cover; }
.hint { position:absolute; top:14px; left:50%; transform:translateX(-50%); max-width:92%; background:rgba(0,0,0,.62); padding:8px 16px; border-radius:999px; font-size:16px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hint.work::before { content:""; display:inline-block; width:12px; height:12px; margin-right:8px; border:2px solid var(--accent); border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; vertical-align:-1px; }
@keyframes spin { to { transform:rotate(360deg); } }
.modebar { position:absolute; top:0; left:0; right:0; display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px 14px; background:rgba(240,180,69,.95); color:#2a1d00; font-weight:700; z-index:2; }
.modebar + .hint { top:74px; }
.center { position:absolute; left:16px; right:16px; top:45%; width:auto; }
.shutter { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); width:84px; height:84px; border-radius:50%; border:6px solid #fff; background:var(--accent); }
.card { position:absolute; left:10px; right:10px; bottom:10px; background:rgba(22,28,34,.96); border:1px solid var(--line); border-radius:20px; padding:14px; max-height:72%; overflow-y:auto; }
.card .title { font-size:21px; font-weight:700; line-height:1.3; }
.card .home { font-size:19px; color:var(--accent); font-weight:700; }
.card .nohome { color:var(--warn); font-weight:600; }
.thumb { width:76px; height:76px; border-radius:14px; object-fit:cover; background:#000; flex:none; }
.thumb.s { width:56px; height:56px; border-radius:10px; }
.tag { display:inline-block; font-size:13px; padding:2px 10px; border-radius:999px; background:#2a343d; color:var(--muted); margin-bottom:6px; }
.tag.ok { background:#12392d; color:var(--accent); } .tag.q { background:#40330f; color:var(--warn); } .tag.bad { background:#43201b; color:var(--bad); }

/* lists */
.list { display:flex; flex-direction:column; gap:10px; }
.item { display:flex; gap:12px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:10px 12px; min-height:64px; }
.item .name { font-weight:700; } .item .sub { color:var(--muted); font-size:15px; }
.back { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); margin:-8px 0 4px; }
.box { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:14px; margin:12px 0; }
.photo { position:relative; border-radius:16px; overflow:hidden; background:#000; margin:10px 0; }
.photo img { display:block; width:100%; }
.photo.picking { outline:3px solid var(--warn); cursor:crosshair; }
.pin { position:absolute; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:#fff; border:3px solid #263038; opacity:.85; }
.pin.hl { width:30px; height:30px; margin:-15px 0 0 -15px; background:var(--accent); border-color:#fff; opacity:1; animation:pulse 1.2s ease-out infinite; }
.pin i { position:absolute; left:50%; top:calc(100% + 4px); transform:translateX(-50%); white-space:nowrap; font-style:normal; font-size:13px; background:rgba(0,0,0,.72); padding:1px 8px; border-radius:8px; }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(47,191,143,.8); } 100% { box-shadow:0 0 0 22px rgba(47,191,143,0); } }
.empty { text-align:center; color:var(--muted); padding:28px 10px; }
.toast { position:fixed; left:50%; bottom:calc(var(--tabs) + 24px); transform:translateX(-50%); background:#000; border:1px solid var(--line); padding:10px 18px; border-radius:999px; z-index:9; max-width:90%; text-align:center; }
.seg { display:flex; gap:8px; } .seg .btn { flex:1; } .seg .btn.on { border-color:var(--accent); color:var(--accent); }
@media (prefers-reduced-motion: reduce) { .pin.hl, .hint.work::before { animation:none; } }