/* AgroGuard - dark forest-green farm security UI. Dark is the default theme; light keeps the same green sidebar. */
:root,[data-theme=dark]{
 --bg:#060f0a;--bg2:#08150e;--surface:#0b1a12;--surface2:#0f2218;--raise:#132a1e;--line:#1a3324;--line2:#24442f;
 --text:#e4f1e8;--muted:#8ea999;--faint:#5f7a6a;
 --brand:#22c55e;--brand2:#16a34a;--brand-ink:#04140a;--brand-soft:rgba(34,197,94,.13);
 --accent:#f0b13a;--accent-ink:#2a1c00;
 --ok:#34d27b;--warn:#f5b13d;--bad:#f05252;--info:#4b9cf5;--off:#7f9488;
 --side:#06130c;--side2:#0a1d13;--side-line:rgba(120,200,150,.1);--side-text:#b9cfc1;--side-hi:#fff;
 --inp:#0a1811;--shadow:0 1px 0 rgba(255,255,255,.02) inset,0 10px 30px -18px rgba(0,0,0,.8);
 --head:'Figtree','Segoe UI',system-ui,sans-serif;--body:'Figtree','Segoe UI',system-ui,sans-serif;
 --r:14px;--r-sm:10px;color-scheme:dark}
[data-theme=light]{
 --bg:#edf4ef;--bg2:#e5efe8;--surface:#fff;--surface2:#f3f8f4;--raise:#eaf3ed;--line:#d8e6dc;--line2:#c6dacb;
 --text:#11241a;--muted:#5a7064;--faint:#8aa094;
 --brand:#16a34a;--brand2:#15803d;--brand-ink:#fff;--brand-soft:rgba(22,163,74,.1);
 --ok:#16a34a;--warn:#c27c0e;--bad:#dc2626;--info:#2563eb;--off:#6b7c72;
 --inp:#fff;--shadow:0 1px 2px rgba(16,40,25,.05),0 8px 24px -16px rgba(16,40,25,.22);color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);background:var(--bg);color:var(--text);font-size:14.5px;line-height:1.5}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;letter-spacing:-.01em;margin:0}
h3{font-size:16px}a{color:var(--brand)}img{max-width:100%}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.muted{color:var(--muted);font-size:13px}.faint{color:var(--faint)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.grow{flex:1;min-width:0}.nowrap{white-space:nowrap}.cap{text-transform:capitalize}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.side{background:linear-gradient(180deg,var(--side2),var(--side) 60%);color:var(--side-text);padding:18px 12px 14px;display:flex;flex-direction:column;
 position:sticky;top:0;height:100vh;z-index:30;border-right:1px solid var(--side-line);overflow:hidden}
.side::after{content:"";position:absolute;left:0;right:0;bottom:0;height:300px;background:url(img/sidebar-farm.png) left bottom/100% auto no-repeat;opacity:.55;pointer-events:none}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 20px;color:var(--side-hi);text-decoration:none;position:relative;z-index:1}
.brand img{width:40px;height:40px;flex-shrink:0}
.brand b{font:800 20px/1.1 var(--head);display:block;letter-spacing:-.02em}.brand small{font-size:12.5px;color:var(--brand);font-weight:600}
.nav{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--side-text);text-decoration:none;font-weight:600;font-size:14.5px;transition:background .15s,color .15s}
.nav a:hover{background:rgba(255,255,255,.05);color:var(--side-hi)}
.nav a.on{background:linear-gradient(90deg,rgba(34,197,94,.34),rgba(34,197,94,.14));color:var(--side-hi);box-shadow:inset 0 0 0 1px rgba(74,222,128,.22)}
.nav svg.i{width:20px;height:20px;color:#5fd38d}.nav a.on svg.i{color:#fff}
.nav .n-al svg.i{color:#f5c04d}.nav .n-dl svg.i{color:#e8a35c}.nav .n-dv svg.i{color:#9b8cf5}.nav .n-ac svg.i{color:#8fb4ff}
.count{margin-left:auto;background:var(--accent);color:var(--accent-ink);font-size:11.5px;font-weight:800;border-radius:99px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px}
.side-foot{margin-top:auto;border-top:1px solid var(--side-line);padding-top:10px;position:relative;z-index:1}
.side-foot form{margin:0}
.logout{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;background:transparent;color:var(--side-text);border:0;font:600 14.5px var(--body);cursor:pointer;text-align:left}
.logout:hover{background:rgba(240,82,82,.14);color:#ffd2d2;filter:none}
.main{min-width:0;padding:0 24px 32px;max-width:1560px;width:100%}

/* header */
.top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;padding:16px 0 14px;margin-bottom:16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);z-index:15}
.top .t-ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex-shrink:0}
.top .t-ico svg.i{width:22px;height:22px}
.top>.grow{flex:1 1 280px;min-width:0}.top h1{font-size:24px;line-height:1.15}.top .sub{color:var(--muted);font-size:13.5px;margin-top:1px}
.top .hd-right,.hd-chips,.hd-ctl{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px}.top .hd-right{margin-left:auto}
.icon-btn{background:var(--surface);border:1px solid var(--line);color:var(--text);width:38px;height:38px;border-radius:11px;padding:0;display:inline-grid;place-items:center;cursor:pointer}
.icon-btn:hover{background:var(--surface2);filter:none}
#menu{display:none}
.chip-st{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:6px 12px 6px 10px;min-width:0}
.chip-st .dot{width:10px;height:10px;border-radius:50%;background:var(--off);flex-shrink:0}
.chip-st b{display:block;font-size:13px;line-height:1.2;white-space:nowrap}.chip-st small{display:block;color:var(--muted);font-size:11.5px;line-height:1.2;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis}
.chip-st.ok .dot{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 22%,transparent)}.chip-st.ok b{color:var(--ok)}
.chip-st.bad .dot{background:var(--bad)}.chip-st.bad b{color:var(--bad)}.chip-st.warn .dot{background:var(--warn)}.chip-st.warn b{color:var(--warn)}
.chip-st svg.i{color:var(--muted)}.chip-st.ok svg.i{color:var(--ok)}.chip-st.warn svg.i{color:var(--warn)}
.sound-chip{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:12px;padding:0 10px;height:38px;font:600 12.5px var(--body);white-space:nowrap;cursor:pointer}
.sound-chip.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}.sound-chip:hover{background:var(--surface2);filter:none}
.me{position:relative}
.me>summary{list-style:none;display:flex;align-items:center;gap:9px;cursor:pointer;padding:3px 8px 3px 3px;border-radius:12px;border:1px solid var(--line);background:var(--surface)}
.me>summary::-webkit-details-marker{display:none}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--brand-soft);color:var(--brand);border:1.5px solid var(--brand);display:grid;place-items:center;font:800 14px var(--head);text-transform:uppercase;flex-shrink:0}
.me .who{font-size:13px;line-height:1.2;font-weight:700}.me .who small{display:block;color:var(--muted);font-weight:500;font-size:11.5px}
.me-pop{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:6px;box-shadow:0 18px 40px -12px rgba(0,0,0,.6);z-index:40}
.me-pop a,.me-pop button{display:flex;width:100%;gap:10px;align-items:center;padding:9px 10px;border-radius:8px;color:var(--text);text-decoration:none;background:transparent;border:0;font:600 13.5px var(--body);cursor:pointer;text-align:left}
.me-pop a:hover,.me-pop button:hover{background:var(--surface2);filter:none}.me-pop form{margin:0}
.scrim{display:none}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);min-width:0}
.card-h{display:flex;align-items:center;gap:10px;margin-bottom:12px;min-height:30px}
.card-h h3{font-size:15.5px}.card-h .grow{min-width:0}.card-h p{margin:1px 0 0;color:var(--muted);font-size:12.5px}
.card-h>svg.i{color:var(--brand);width:20px;height:20px}
.stack{display:grid;gap:16px}
.flash{background:color-mix(in srgb,var(--brand) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 35%,transparent);padding:10px 14px;border-radius:var(--r-sm);margin-bottom:14px}
.flash.err{background:color-mix(in srgb,var(--bad) 9%,var(--surface));border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);border-radius:var(--r-sm);padding:10px 12px;font-size:13px;color:var(--text)}
.note svg.i{color:var(--brand);margin-top:1px}.note.warn{background:color-mix(in srgb,var(--warn) 12%,transparent);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}.note.warn svg.i{color:var(--warn)}
.note.bad{background:color-mix(in srgb,var(--bad) 10%,transparent);border-color:color-mix(in srgb,var(--bad) 35%,transparent)}.note.bad svg.i{color:var(--bad)}
.empty{display:grid;justify-items:center;text-align:center;color:var(--muted);padding:28px 12px;gap:4px}
.empty img{width:140px;height:auto;opacity:.95;margin-bottom:6px}
.empty b{color:var(--text);font-size:15px}

/* ---------- controls ---------- */
button,.btn{background:var(--brand2);color:#fff;border:1px solid transparent;border-radius:10px;padding:0 14px;height:38px;cursor:pointer;font:700 13.5px var(--body);text-decoration:none;
 display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:filter .15s,background .15s,border-color .15s;white-space:nowrap}
button:hover,.btn:hover{filter:brightness(1.1)}
button.sec,.btn.sec{background:transparent;color:var(--text);border-color:var(--line2)}button.sec:hover,.btn.sec:hover{background:var(--surface2);filter:none}
button.ghost,.btn.ghost{background:transparent;color:var(--muted);border-color:transparent}button.ghost:hover{background:var(--surface2);color:var(--text);filter:none}
button.danger,.btn.danger{background:#dc2626;color:#fff}
button.danger-o,.btn.danger-o{background:transparent;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 55%,transparent)}button.danger-o:hover{background:color-mix(in srgb,var(--bad) 10%,transparent);filter:none}
button.sm,.btn.sm{height:32px;padding:0 11px;font-size:12.5px;border-radius:9px}
button:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;filter:none}
button.busy{position:relative;color:transparent!important}
button.busy::after{content:"";position:absolute;width:16px;height:16px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
button.sec.busy::after,button.ghost.busy::after{border-color:var(--text);border-right-color:transparent}
@keyframes spin{to{transform:rotate(360deg)}}
input,select,textarea{width:100%;height:40px;padding:0 12px;border:1px solid var(--line2);border-radius:10px;background:var(--inp);color:var(--text);font:inherit;font-size:14px}
textarea{height:auto;padding:10px 12px}
input:focus,select:focus,textarea:focus{border-color:var(--brand);outline:2px solid color-mix(in srgb,var(--brand) 25%,transparent);outline-offset:0}
input[type=checkbox]{width:17px;height:17px;accent-color:var(--brand);margin:0;cursor:pointer;flex-shrink:0}
input[type=file]{height:auto;padding:8px}
label{display:block;margin:0 0 5px;font-size:12.5px;font-weight:700;color:var(--muted)}
label.chk{display:flex;gap:9px;align-items:center;font-weight:600;color:var(--text);font-size:13.5px;margin:0;cursor:pointer}
.field{min-width:0}.field small{display:block;color:var(--faint);font-size:12px;margin-top:4px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 14px}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--text);margin:0}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch i{width:38px;height:22px;border-radius:99px;background:var(--line2);position:relative;transition:background .15s;flex-shrink:0}
.switch i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.switch input:checked+i{background:var(--brand2)}.switch input:checked+i::after{transform:translateX(16px)}
.switch input:focus-visible+i{outline:2px solid var(--brand);outline-offset:2px}.switch input:disabled+i{opacity:.4}
.badge{display:inline-flex;align-items:center;gap:6px;padding:0 10px;height:24px;border-radius:99px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--off) 16%,transparent);color:var(--off);white-space:nowrap;border:1px solid color-mix(in srgb,var(--off) 30%,transparent)}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.ok{background:color-mix(in srgb,var(--ok) 13%,transparent);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 32%,transparent)}
.badge.warn{background:color-mix(in srgb,var(--warn) 13%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.badge.bad{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 34%,transparent)}
.badge.info{background:color-mix(in srgb,var(--info) 13%,transparent);color:var(--info);border-color:color-mix(in srgb,var(--info) 34%,transparent)}
.badge.solid{background:var(--brand2);color:#fff;border-color:transparent}
.conf{display:inline-block;padding:1px 8px;border-radius:7px;font-weight:800;font-size:12px;background:var(--brand-soft);color:var(--brand)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;color:var(--muted);text-decoration:none;font-weight:700;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--text)}.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--surface);flex-wrap:wrap}
.seg a,.seg button{border:0;border-radius:9px;background:transparent;color:var(--muted);padding:0 12px;height:32px;font:700 13px var(--body);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.seg a:hover,.seg button:hover{color:var(--text);background:var(--surface2);filter:none}
.seg .on,.seg .on:hover{background:var(--brand2);color:#fff}
.seg .n{font-size:11.5px;padding:0 7px;border-radius:99px;background:var(--surface2);color:var(--muted);line-height:18px}.seg .on .n{background:rgba(0,0,0,.2);color:#fff}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar form{margin:0}
.search{position:relative;flex:1 1 190px;max-width:300px}.search svg.i{position:absolute;left:11px;top:11px;color:var(--faint)}
.search input{padding-left:36px}
.dates{display:flex;align-items:center;gap:6px}.dates input{width:134px;padding:0 8px}.dates span{color:var(--faint)}

/* ---------- tables ---------- */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--muted);font-weight:700;font-size:12.5px;white-space:nowrap;background:var(--surface2)}
tbody tr:hover td{background:color-mix(in srgb,var(--brand) 4%,transparent)}
tr:last-child td{border-bottom:0}td.c,th.c{text-align:center}td.r,th.r{text-align:right}
.tbl-sel{width:40px}
.thumb{width:72px;height:44px;object-fit:cover;border-radius:7px;display:block;border:1px solid var(--line);background:#050c08;cursor:pointer}
.thumb.none{display:grid;place-items:center;color:var(--faint);font-size:11px;cursor:default}
.typ{display:inline-flex;align-items:center;gap:7px;font-weight:700}.typ svg.i{width:17px;height:17px}
.typ.person{color:var(--ok)}.typ.motion{color:var(--info)}.typ.other{color:var(--warn)}

/* 3-dot menus: the popup is positioned by JS (fixed) so table/card overflow never clips it */
.menu{position:relative;display:inline-block}
.menu>summary{list-style:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.menu>summary::-webkit-details-marker{display:none}.menu>summary:hover,.menu[open]>summary{background:var(--surface2);color:var(--text)}
.menu-pop{position:fixed;min-width:190px;background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:5px;box-shadow:0 18px 40px -12px rgba(0,0,0,.65);z-index:60}
.menu-pop button,.menu-pop a{display:flex;width:100%;gap:9px;align-items:center;height:36px;padding:0 10px;border-radius:8px;color:var(--text);background:transparent;border:0;font:600 13px var(--body);text-decoration:none;justify-content:flex-start}
.menu-pop button:hover,.menu-pop a:hover{background:var(--surface2);filter:none}.menu-pop .danger-t{color:var(--bad)}
.menu-pop form{margin:0}

/* pager + selection bar */
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pager a,.pager span.cur{min-width:34px;height:34px;padding:0 8px;border-radius:9px;display:inline-grid;place-items:center;border:1px solid var(--line2);color:var(--text);text-decoration:none;font-weight:700;font-size:13px}
.pager span.cur{background:var(--brand2);border-color:var(--brand2);color:#fff}.pager a:hover{background:var(--surface2)}
.pager .gap{color:var(--faint);padding:0 2px}.pager a[aria-disabled=true]{opacity:.4;pointer-events:none}
.listfoot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.selbar{position:sticky;bottom:12px;z-index:12;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:10px 14px;border-radius:14px;
 background:var(--surface);border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);box-shadow:0 14px 40px -14px rgba(0,0,0,.7)}
.selbar b{font-size:14px}

/* ---------- viewfinder (live feed) ---------- */
.vf{position:relative;background:#030806;border-radius:12px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line)}
.vf .feed-stage{position:absolute;inset:0;transform-origin:center;transition:transform .2s}
.vf .feed{width:100%;height:100%;object-fit:contain;display:none}.vf.live .feed{display:block}
.vf:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border:0;border-radius:0}
.face-overlay{position:absolute;pointer-events:none}.vf:not(.live) .face-overlay,.vf:not(.live) .face-summary{display:none}
.fs-box{position:absolute;left:0;top:0;border:2px solid currentColor;border-radius:18px;color:#F4C430;box-shadow:0 0 24px -4px currentColor;
 transition:transform .15s linear,width .15s linear,height .15s linear,color .2s;pointer-events:none}
.fs-box::before{content:"";position:absolute;inset:5px;border-radius:10px;background:linear-gradient(currentColor,currentColor) left top/15px 3px no-repeat,linear-gradient(currentColor,currentColor) left top/3px 15px no-repeat,
 linear-gradient(currentColor,currentColor) right top/15px 3px no-repeat,linear-gradient(currentColor,currentColor) right top/3px 15px no-repeat,linear-gradient(currentColor,currentColor) left bottom/15px 3px no-repeat,
 linear-gradient(currentColor,currentColor) left bottom/3px 15px no-repeat,linear-gradient(currentColor,currentColor) right bottom/15px 3px no-repeat,linear-gradient(currentColor,currentColor) right bottom/3px 15px no-repeat}
.fs-sweep{position:absolute;inset:0;border-radius:16px;overflow:hidden}
.fs-sweep::after{content:"";position:absolute;left:0;right:0;height:35%;top:-40%;border-bottom:1px solid currentColor;background:linear-gradient(180deg,transparent,color-mix(in srgb,currentColor 26%,transparent));box-shadow:0 3px 18px -5px currentColor;animation:efsSweep 1.6s linear infinite}
.fs-box[data-state=verified]{color:#A8DDB0}.fs-box[data-state=verified] .fs-sweep::after{animation:efsSweep 1.1s ease-in-out 1 forwards}
.fs-box[data-state=unknown]{color:#FF5C6C;animation:efsPulse 1.2s ease-in-out infinite}
.fs-box[data-state=unknown] .fs-sweep,.fs-box[data-state=animal] .fs-sweep,.fs-box[data-state=animal]::before{display:none}
.fs-box[data-state=animal]{color:#c1d1c7;border-width:1px;border-radius:8px;box-shadow:none}
.fs-tag{position:absolute;bottom:calc(100% + 6px);padding:4px 8px;border-radius:99px;background:#06150fef;border:1px solid currentColor;
 color:#fff;font:700 11px/1.35 var(--body);width:max-content;overflow-wrap:anywhere;white-space:normal;box-shadow:0 2px 8px #0008}
.fs-tag.below{bottom:auto;top:calc(100% + 6px)}
.face-summary{position:absolute;left:10px;bottom:42px;z-index:3;max-width:calc(100% - 20px);padding:4px 9px;border-radius:99px;background:#06150fe8;border:1px solid #a8ddb044;color:#e7f6e9;font:700 11px/1.35 var(--body);pointer-events:none}
@keyframes efsSweep{to{top:105%}}@keyframes efsPulse{50%{box-shadow:0 0 12px -4px currentColor;border-color:transparent}}
@media(prefers-reduced-motion:reduce){.fs-sweep{display:none}.fs-box{animation:none;transition:none}}
.vf .off{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#8fa898;padding:20px;font-size:13px}
.vf.live .off{display:none}.vf .off b{display:block;color:#dbe9e0;font-size:16px;margin-bottom:4px}.vf .off svg.i{width:34px;height:34px;color:#4d6b5a;margin:0 auto 8px}
.vf .stamp{position:absolute;top:10px;left:10px;z-index:3;font:700 13px var(--body);color:#fff;background:rgba(0,0,0,.55);padding:3px 9px;border-radius:7px;font-variant-numeric:tabular-nums}
.vf .camtag{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;gap:7px;align-items:center;color:#fff;background:rgba(0,0,0,.6);padding:4px 10px;border-radius:8px;font-size:12.5px;font-weight:700}
.vf .camtag i{width:8px;height:8px;border-radius:50%;background:#7b8a80}.vf.live .camtag i{background:#3ddc84}
.vf:not(.live) .camtag,.vf .stamp:empty{display:none}
@media(max-width:400px){.fs-tag{font-size:10px;padding:3px 6px}.fs-box{border-radius:12px}.face-summary{font-size:10px;bottom:38px}.vf .stamp{font-size:10px}}
.livetag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:8px;font:800 12px var(--body);letter-spacing:.04em;background:color-mix(in srgb,var(--off) 18%,transparent);color:var(--off)}
.livetag i{width:7px;height:7px;border-radius:50%;background:currentColor}.livetag.on{background:var(--brand2);color:#fff}.livetag.on i{animation:rec 1.4s infinite}
@keyframes rec{50%{opacity:.25}}

/* ---------- dashboard ---------- */
.dash{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(220px,.75fr) minmax(280px,1fr);gap:16px;align-items:start}
.d-feed{grid-column:1}.d-latest{grid-column:2}.d-right{grid-column:3;grid-row:1/span 3;display:grid;gap:16px}
.d-stats{grid-column:1/span 2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.d-hist{grid-column:1}.d-feed2{grid-column:2}
.d-feed,.d-latest{grid-row:1}.d-stats{grid-row:2}.d-hist,.d-feed2{grid-row:3}
.latest img,.latest .noimg{width:100%;aspect-ratio:4/3;max-height:280px;object-fit:cover;border-radius:10px;display:block;border:1px solid var(--line);background:#050c08}
.latest .noimg{display:grid;place-items:center;color:var(--faint);font-size:13px}
.latest h4{display:flex;align-items:center;gap:8px;margin:12px 0 2px;font-size:15px;color:var(--ok)}.latest h4.motion{color:var(--info)}.latest h4.other{color:var(--warn)}
.latest .meta{color:var(--muted);font-size:13px;line-height:1.55}
.latest .note{margin-top:10px}
.stat{display:flex;gap:12px;align-items:center;padding:14px}
.stat .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--brand-soft);color:var(--brand)}
.stat .ic svg.i{width:22px;height:22px}.stat .ic.y{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.stat .ic.b{background:color-mix(in srgb,var(--info) 16%,transparent);color:var(--info)}.stat .ic.p{background:rgba(155,140,245,.16);color:#a99cf7}
.stat .lbl{font-size:12.5px;color:var(--muted);font-weight:600}.stat .n{font:800 26px/1.1 var(--head);font-variant-numeric:tabular-nums}
.stat .s{font-size:11.5px;color:var(--ok);font-weight:600}.stat .s.bad{color:var(--bad)}.stat .s a{color:var(--info);text-decoration:none}
.farm .fs-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.farm .fs-ic{width:46px;height:46px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;flex-shrink:0}.farm .fs-ic svg.i{width:24px;height:24px}
.farm h3{font-size:16px}.farm .fs-text{font-size:13px;font-weight:600;color:var(--ok)}.farm .fs-text.warn{color:var(--warn)}.farm .fs-text.bad{color:var(--bad)}.farm .fs-text.off{color:var(--muted)}
.kv{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px}
.kv>span:first-child{display:flex;align-items:center;gap:9px;color:var(--muted)}.kv svg.i{width:17px;height:17px}
.kv .v{display:flex;align-items:center;gap:7px;font-weight:700}.kv .v i{width:8px;height:8px;border-radius:50%;background:var(--off)}
.kv .v.ok i{background:var(--ok)}.kv .v.bad i{background:var(--bad)}.kv .v.warn i{background:var(--warn)}
.alarmc{border-color:color-mix(in srgb,var(--bad) 55%,transparent)}
.alarmc .card-h>svg.i{color:var(--bad)}
.alarm-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.alarm-btns button{height:56px;flex-direction:column;gap:0;font-size:14px;border-radius:12px}
.alarm-btns button small{font-weight:600;font-size:11.5px;opacity:.85}
.alarm-btns .on-btn{background:linear-gradient(180deg,#22c55e,#16a34a)}.alarm-btns .off-btn{background:linear-gradient(180deg,#f05252,#dc2626)}
.alarm-btns button[aria-pressed=true]{box-shadow:0 0 0 3px color-mix(in srgb,#fff 70%,transparent)}
.alarm-st{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:12px}
.alarm-st>div{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted);background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:7px 9px;min-width:0}
.alarm-act{display:flex;gap:8px;margin-top:10px;justify-content:flex-end;flex-wrap:wrap}.alarm-act form{margin:0}
.brandcard{position:relative;border-radius:var(--r);overflow:hidden;min-height:190px;display:grid;place-items:center;text-align:center;border:1px solid var(--line);
 background:#0b1a12 url(img/banner-farm.jpg) center/cover no-repeat}
.brandcard::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(4,14,8,.55),rgba(4,14,8,.25) 60%,rgba(4,14,8,.6))}
.brandcard>div{position:relative;padding:20px}.brandcard img{width:44px;height:44px}
.brandcard b{display:block;font:800 26px/1.1 var(--head);color:#fff;margin-top:4px}.brandcard span{color:#d7ead9;font-size:13.5px}
.timeline{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.timeline li{display:grid;grid-template-columns:18px 30px 1fr;gap:8px;align-items:center;padding:6px 0;position:relative}
.timeline li::before{content:"";position:absolute;left:8px;top:22px;bottom:-12px;width:2px;background:var(--line2)}.timeline li:last-child::before{display:none}
.timeline .td{width:12px;height:12px;border-radius:50%;background:var(--ok);margin-left:3px;position:relative;z-index:1}
.timeline .td.motion{background:var(--info)}.timeline .td.alarm{background:var(--warn)}.timeline .td.bad{background:var(--bad)}.timeline .td.other{background:var(--warn)}
.timeline .ti{width:28px;height:28px;border-radius:8px;background:var(--surface2);display:grid;place-items:center;color:var(--brand)}.timeline .ti svg.i{width:16px;height:16px}
.timeline b{display:block;font-size:13px}.timeline small{color:var(--muted);font-size:12px}

/* ---------- album ---------- */
.album{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;padding:0;text-align:left;display:flex;flex-direction:column;
 color:var(--text);font:inherit;height:auto;white-space:normal;align-items:stretch;justify-content:flex-start;gap:0;transition:border-color .15s,transform .15s}
.tile:hover{filter:none;border-color:color-mix(in srgb,var(--brand) 60%,transparent);transform:translateY(-2px)}
.tile .th{position:relative;aspect-ratio:16/10;background:#050c08;display:grid;place-items:center;color:#5d7768;overflow:hidden}
.tile .th img{width:100%;height:100%;object-fit:cover;display:block}
.tile .th .ld{position:absolute;inset:0;background:linear-gradient(90deg,#0a1711,#11251a,#0a1711);background-size:200% 100%;animation:shimmer 1.2s infinite}
.tile .th img.loaded+.ld,.tile .th .ld.done{display:none}
@keyframes shimmer{to{background-position:-200% 0}}
.tile .ov{position:absolute;top:8px;left:8px;right:8px;display:flex;justify-content:space-between;gap:6px;pointer-events:none}
.tile .ov span{background:rgba(0,0,0,.62);color:#fff;font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
.tile .play{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.66);color:#fff;border-radius:7px;padding:3px 9px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:5px}
.tile .play svg.i{width:13px;height:13px;fill:currentColor;stroke:none}
.tile .meta{padding:10px 12px 12px;display:grid;gap:3px;font-size:12.5px;color:var(--muted)}
.tile .meta .l1{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:700;font-size:14px}.tile .meta .l1 svg.i{color:var(--ok)}
.tile .meta span{display:flex;align-items:center;gap:7px}.tile .meta svg.i{width:15px;height:15px}
.tile .err{display:none;position:absolute;inset:0;place-items:center;text-align:center;font-size:12px;color:#ffb4b4;background:#0b0606;padding:10px}
.tile.broken .err{display:grid}
dialog{border:1px solid var(--line2);border-radius:16px;padding:0;background:var(--surface);color:var(--text);max-width:min(920px,94vw);width:100%;box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(2,6,4,.75);backdrop-filter:blur(2px)}
dialog .media{background:#000;display:grid;place-items:center;min-height:200px;max-height:72vh;position:relative}
dialog .media img,dialog .media video{max-width:100%;max-height:72vh;display:block}
dialog .media .msg{color:#c9dccf;padding:30px;text-align:center}
dialog .cap{padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

/* modal (confirm, details, forms) */
dialog.modal{max-width:440px}
dialog.modal.wide{max-width:640px}
.modal-b{padding:20px 20px 16px;position:relative}
.modal-b .x{position:absolute;right:10px;top:10px}
.modal-b h3{font-size:18px;display:flex;gap:10px;align-items:center;padding-right:30px}
.modal-b h3 svg.i{width:26px;height:26px;color:var(--bad)}.modal-b h3.info svg.i{color:var(--brand)}
.modal-b p{color:var(--muted);margin:10px 0 0;font-size:13.5px}
.modal-b .fld{margin-top:12px}
.modal-f{display:flex;justify-content:flex-end;gap:10px;padding:0 20px 18px}.modal-f button{min-width:110px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:14px 0 0;font-size:13.5px}.dl dt{color:var(--muted)}.dl dd{margin:0;word-break:break-word}
.det-media{margin-top:12px;border-radius:10px;overflow:hidden;background:#000}.det-media img,.det-media video{width:100%;max-height:300px;object-fit:contain;display:block}

/* ---------- events (cards) ---------- */
.evlist{display:grid;gap:10px}
.evcard{display:grid;grid-template-columns:auto 116px minmax(0,1fr) auto auto auto;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;transition:border-color .15s}
.evcard.sel{border-color:color-mix(in srgb,var(--brand) 60%,transparent);background:color-mix(in srgb,var(--brand) 5%,var(--surface))}
.evcard .th{width:116px;height:66px;border-radius:9px;object-fit:cover;display:block;background:#050c08;border:1px solid var(--line);cursor:pointer}
.evcard .th.none{display:grid;place-items:center;color:var(--faint);cursor:default}.evcard .th.none svg.i{width:24px;height:24px}
.evcard h4{font-size:15px;margin-bottom:2px}.evcard .m{color:var(--muted);font-size:12.5px;display:grid;gap:1px}.evcard .m span{display:flex;align-items:center;gap:6px}
.evcard .m svg.i{width:14px;height:14px}
.evcard .cf{text-align:center;font-size:11.5px;color:var(--muted);min-width:76px}
.evcard .act{min-width:118px;display:flex;justify-content:flex-end}

/* ---------- device log ---------- */
.dev-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,420px);gap:16px;align-items:start;margin-bottom:16px}
.dev-top .alarmc{margin:0}
.dname{display:inline-flex;align-items:center;gap:8px;font-weight:700}.dname svg.i{width:17px;height:17px;color:var(--brand)}
.dname.siren svg.i,.dname.alarm svg.i{color:var(--bad)}.dname.pir svg.i{color:var(--info)}.dname.relay svg.i{color:#a99cf7}

/* ---------- settings ---------- */
.set-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:16px;align-items:start}
.checks-col{display:grid;gap:10px;margin-top:14px}
.armbox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border-radius:12px;background:var(--surface2);border:1px solid var(--line)}
.armbox .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand)}
.armbox.off .ic{background:color-mix(in srgb,var(--off) 15%,transparent);color:var(--off)}
.cam-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.45fr) minmax(220px,.8fr);gap:16px;align-items:start}
.cam-ctl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.cam-ctl button{height:36px;font-size:12.5px;padding:0 8px}
.mem-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1fr);gap:16px;align-items:start}
.fe-angles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:14px}
.angle{border:1.5px dashed var(--line2);border-radius:11px;padding:6px;text-align:center;font-size:11.5px;color:var(--muted);display:grid;gap:6px;position:relative}
.angle .pic{position:relative;aspect-ratio:9/11;border-radius:8px;overflow:hidden;background:var(--surface2)}
.angle .pic img{width:100%;height:100%;object-fit:cover;display:block}
.angle .no{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:var(--brand2);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center}
.angle.done{border-style:solid;border-color:var(--brand)}.angle.done .no{background:var(--ok)}
.angle.bad{border-style:solid;border-color:var(--bad)}.angle.bad .no{background:var(--bad)}
.angle .st{font-size:11px;min-height:15px;line-height:1.3}.angle.done .st{color:var(--ok)}.angle.bad .st{color:var(--bad)}
.angle .ab{display:flex;gap:4px;justify-content:center}.angle .ab button{height:26px;padding:0 7px;font-size:11px;border-radius:7px}
.prog{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted);margin-top:10px}
.prog .bar{flex:1;height:6px;border-radius:99px;background:var(--surface2);overflow:hidden}.prog .bar i{display:block;height:100%;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.capture{display:grid;gap:10px}.capture video{width:100%;border-radius:10px;background:#000;max-height:50vh}
.user-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:16px;align-items:start}
.role-b{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:800}
.role-b.owner{background:var(--brand-soft);color:var(--brand)}.role-b.caretaker{background:color-mix(in srgb,var(--info) 14%,transparent);color:var(--info)}

/* ---------- account ---------- */
.acct{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.profile{display:flex;gap:14px;align-items:center}.profile .avatar{width:56px;height:56px;font-size:24px}
.roles{display:grid;gap:7px;margin:0;padding:0;list-style:none;font-size:13.5px}.roles li::before{content:"✓";color:var(--ok);font-weight:800;margin-right:8px}.roles li.no::before{content:"–";color:var(--off)}

/* ---------- auth ---------- */
.auth-page{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(380px,.9fr)}
.stage{position:relative;overflow:hidden;background:#06130c;color:#e6f1e9;display:flex;flex-direction:column;justify-content:space-between;padding:36px 44px}
.stage svg.scene{position:absolute;inset:0;width:100%;height:100%}
.stage .copy{position:relative;z-index:2}.stage h1{font-size:clamp(30px,3.4vw,46px);line-height:1.08;max-width:14ch;margin:0 0 14px}
.stage p{max-width:42ch;color:#a9c2b2;margin:0}
.stage ul{position:relative;z-index:2;max-width:330px;list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px;color:#cfe3d6}
.stage li{display:flex;gap:10px;align-items:center}.stage li span{font-size:18px}
.stage .brand{padding:0;position:relative;z-index:2}
.sweep{transform-origin:644px 382px;animation:sweep 7s ease-in-out infinite alternate}
@keyframes sweep{from{transform:rotate(-14deg)}to{transform:rotate(16deg)}}
.formside{display:flex;flex-direction:column;justify-content:center;padding:40px clamp(24px,6vw,80px);position:relative;background:var(--bg)}
.formside .tgl{position:absolute;top:18px;right:18px}
.formside .box{max-width:400px;width:100%;margin:0 auto}.formside h2{font-size:30px;margin-bottom:6px}
.formside label{margin-top:12px}
.pw{position:relative}.pw input{padding-right:64px}.pw button{position:absolute;right:4px;top:4px;height:32px;padding:0 10px;font-size:12.5px;background:transparent;color:var(--muted);border:0}
.checks{list-style:none;padding:0;margin:8px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;font-size:13px;color:var(--muted)}
.checks li::before{content:"○ ";}.checks li.ok{color:var(--ok)}.checks li.ok::before{content:"● "}
.meter{height:5px;border-radius:9px;background:var(--surface2);margin-top:10px;overflow:hidden}.meter i{display:block;height:100%;background:var(--bad);transform:scaleX(0);transform-origin:left;transition:transform .25s,background .25s}
.authlinks{display:flex;justify-content:space-between;margin-top:18px;font-size:14px}

/* ---------- notices: push banner, alarm overlay, toasts ---------- */
.push-banner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;border-radius:12px;background:color-mix(in srgb,var(--warn) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 45%,transparent)}
.push-banner span{flex:1 1 260px}
.ring{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:rgba(150,12,12,.94);animation:ringflash .9s ease-in-out infinite alternate}
.toasts:empty{display:none}
@keyframes ringflash{from{background:rgba(150,12,12,.94)}to{background:rgba(60,4,4,.96)}}
.ring-box{background:var(--surface);color:var(--text);border-radius:18px;padding:26px 24px;max-width:460px;width:calc(100% - 32px);text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.ring-ico{font-size:58px;line-height:1}.ring-box h2{margin:8px 0 4px;font:800 26px var(--head)}.ring-box p{margin:6px 0 16px;color:var(--muted)}
.ring-box .ring-lock{color:var(--bad);font-weight:700}
.toasts{position:fixed;right:16px;bottom:16px;z-index:9000;display:grid;gap:8px;max-width:min(380px,calc(100vw - 32px))}
.toast{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);color:var(--text);border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);border-radius:12px;padding:11px 14px;box-shadow:0 14px 40px -14px rgba(0,0,0,.7);font-size:13.5px}
.toast.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent)}.toast.info{border-color:color-mix(in srgb,var(--info) 45%,transparent)}
.toast span{color:var(--muted);font-size:12.5px}.toast a{margin-left:auto;font-weight:700}

/* ---------- face registration (ERAMS style: paper card + dark-green camera stage with a tick ring) ---------- */
.fe-card{--fe-ink:var(--text);--fe-muted:var(--muted);--fe-line:var(--line);--fe-tile:var(--surface2);--fe-eyebrow:#7fb592;--fe-btn:#16a34a;padding:24px;border-radius:22px}
[data-theme=light] .fe-card{--fe-ink:#173c38;--fe-muted:#62766f;--fe-line:#d7e3da;--fe-tile:#fff;--fe-eyebrow:#547264;--fe-btn:#245d51;background:#f5f8f3;border-color:#d7e3da;color:#173c38}
.fe-heading{display:flex;gap:14px;align-items:flex-start}
.fe-eyebrow{margin:0 0 4px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;font-weight:800;color:var(--fe-eyebrow)}
.fe-card h2{font-size:24px;line-height:1.15;color:var(--fe-ink)}.fe-lead{margin:6px 0 0;color:var(--fe-muted);font-size:13.5px}
.fe-status{flex:none;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:99px;font-size:12px;font-weight:800;background:color-mix(in srgb,var(--off) 18%,transparent);color:var(--fe-muted)}
.fe-status[data-state=ready]{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok)}
[data-theme=light] .fe-status{background:#e9ede6;color:#58695d}[data-theme=light] .fe-status[data-state=ready]{background:#dcebd8;color:#285a39}
.fe-prep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
.fe-prep article{background:var(--fe-tile);border:1px solid var(--fe-line);border-radius:15px;padding:12px 13px}
.fe-prep b{font-size:11px;color:var(--fe-eyebrow);letter-spacing:1px}.fe-prep h3{font-size:13.5px;margin:4px 0 3px;color:var(--fe-ink)}.fe-prep p{margin:0;font-size:12px;color:var(--fe-muted);line-height:1.45}
.fe-card label{color:var(--fe-muted)}
.fe-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.fe-actions button{min-height:46px;border-radius:12px}
.fe-actions .fe-start{background:var(--fe-btn)}
.fe-status-line{min-height:18px;margin:10px 0 0;font-size:13px;color:var(--fe-muted)}.fe-status-line.bad{color:var(--bad)}.fe-status-line.ok{color:var(--ok)}
.fe-privacy{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:12px;color:var(--fe-muted)}.fe-privacy svg.i{width:15px;height:15px;color:var(--fe-eyebrow);margin-top:1px}
.fe-attire,.fe-capture-guide{color-scheme:light}
.fe-attire{margin:auto;width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:26px;border:1px solid #d7e3da;border-radius:22px;background:#f5f8f3;color:#173c38;box-shadow:0 30px 80px #0b1f1b40}
.fe-attire::backdrop,.fe-live::backdrop{background:#0b1f1b8c}
.fe-attire h3{font-size:22px;margin-bottom:8px}.fe-attire p{color:#62766f;font-size:13.5px;margin:0 0 12px}
.fe-attire-tips{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:7px;font-size:13.5px}
.fe-attire-tips li{display:flex;gap:10px;align-items:center}.fe-attire-tips li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#547d49}
.fe-attire .fe-attire-check{display:flex;gap:10px;align-items:flex-start;padding:13px 14px;border:1px solid #d7e3da;border-radius:14px;background:#fff;font-size:14px;font-weight:600;color:#173c38;cursor:pointer;margin:0}
.fe-attire .fe-attire-check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:#245d51}
.fe-attire-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.fe-attire-actions button{min-height:44px;border-radius:12px}
.fe-attire-actions button:not(.sec){background:#245d51}.fe-attire-actions .sec{color:#173c38;border-color:#d7e3da;background:#fff}
.fe-live{width:min(880px,calc(100% - 24px));max-width:none;max-height:calc(100dvh - 24px);overflow:auto;padding:0;border:1px solid #31584e;border-radius:22px;background:#173c38}
.fe-live-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(250px,.95fr)}
.sfid-stage{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 18px;background:#173c38}
.sfid-ringwrap{position:relative;width:min(340px,100%);aspect-ratio:1}
.sfid-ring{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.sfid-tick{stroke:#c5dec435;stroke-width:3.4;stroke-linecap:round;transition:stroke .22s ease}
.sfid-tick.is-on{stroke:#cde8b7;filter:drop-shadow(0 0 3px rgba(34,197,94,.65))}
.sfid-port{position:absolute;inset:9.5%;border-radius:50%;overflow:hidden;background:#0f2f2a;border:1px solid #c5dec43d}
.sfid-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.sfid-pctchip{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:999px;background:#ffffff12;border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:600;color:#d8e6d5}
.sfid-pctchip strong{font-size:13.5px;font-variant-numeric:tabular-nums;color:#d0e9b5}
.sfid-stage .sfid-instruction{margin:0;text-align:center;font-weight:700;font-size:15px;line-height:1.5;color:#eef5e9;min-height:45px;max-width:30ch}
.sfid-stage .sfid-instruction.is-ok{color:#9be6a8}.sfid-stage .sfid-instruction.is-warn{color:#fbd38d}.sfid-stage .sfid-instruction.is-bad{color:#fca5a5}
.fe-quality{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.fe-quality span{font-size:10.5px;font-weight:700;border-radius:6px;padding:3px 8px;background:#ffffff10;color:#c4d4c8}
.fe-quality span[data-state=ready]{background:#d9eccd;color:#315a39}.fe-quality span[data-state=warn]{background:#f7e4c2;color:#825724}
.fe-quality-note{color:#bdd1c5;font-size:11px;text-align:center;max-width:34ch;margin:0}
.fe-capture-guide{padding:24px 22px;background:#f5f8f3;color:#173c38;display:flex;flex-direction:column}
.fe-capture-guide h3{font-size:22px;margin:0 0 6px}.fe-capture-guide>p{margin:0;color:#62766f;font-size:13px}.fe-capture-guide .fe-eyebrow{color:#547264}
.sfid-checklist{list-style:none;padding:0;margin:16px 0;display:grid;gap:9px}
.sfid-checklist li{display:flex;align-items:center;gap:10px;font-size:13px;color:#708078;min-height:42px}
.sfid-checklist li i{position:relative;flex:none;width:20px;height:20px;border-radius:50%;border:2px solid #c4d3c5}
.sfid-checklist li.is-active{color:#214d40;font-weight:700}.sfid-checklist li.is-active i{border-color:#6b925d;background:#e4efd9}
.sfid-checklist li.is-ok{color:#355e3e}.sfid-checklist li.is-ok i{background:#547d49;border-color:#547d49}
.sfid-checklist li.is-ok i::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #fff;border-width:0 2.2px 2.2px 0;transform:rotate(43deg)}
.sfid-checklist li img{width:34px;height:42px;object-fit:cover;border-radius:7px;margin-left:auto;border:1px solid #d7e3da}
.fe-live-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.fe-live-actions button{min-height:42px;border-radius:12px;color:#173c38;border-color:#d7e3da;background:#fff}
@media(max-width:700px){.fe-live-grid{grid-template-columns:1fr}.sfid-ringwrap{width:min(280px,100%)}.fe-prep{grid-template-columns:1fr}.sfid-checklist{grid-template-columns:1fr 1fr}.fe-card{padding:18px}}

/* ---------- responsive ---------- */
@media(max-width:1380px){
 .dash{grid-template-columns:minmax(0,1.5fr) minmax(220px,.8fr)}
 .hide-md{display:none}
 .d-right{grid-column:1/span 2;grid-row:2;grid-template-columns:repeat(2,minmax(0,1fr))}.d-stats{grid-row:3}.d-hist,.d-feed2{grid-row:4}
 .d-right .brandcard{display:none}
 .cam-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}.cam-grid .cam-side{grid-column:1/-1}
 .album{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1100px){
 .dash{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}.d-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .set-grid,.mem-grid,.user-grid,.dev-top,.acct{grid-template-columns:1fr}
 .cam-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}.cam-grid .cam-side{grid-column:1/-1}
 .evcard{grid-template-columns:auto 96px minmax(0,1fr) auto;row-gap:8px}.evcard .th{width:96px;height:58px}
 .evcard .cf{grid-column:3;text-align:left;display:flex;gap:6px;align-items:center}.evcard .stt{grid-column:3}.evcard .act{grid-column:4;grid-row:1/span 3}
 .chip-st small{display:none}
}
@media(max-width:760px){
 .dash{grid-template-columns:1fr}.dash>*{grid-row:auto!important;grid-column:1!important}.d-right{grid-template-columns:1fr}
}
@media(max-width:880px){
 .app{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;bottom:0;width:250px;transform:translateX(-100%);transition:transform .22s}
 body.nav-open .side{transform:none}body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20}
 #menu{display:inline-grid}.main{padding:0 16px 28px}.me .who,.top .sub{display:none}
 .album{grid-template-columns:repeat(2,minmax(0,1fr))}.fe-angles{grid-template-columns:repeat(3,minmax(0,1fr))}.cam-grid{grid-template-columns:1fr}
 .auth-page{grid-template-columns:1fr}.stage{min-height:300px;padding:26px}.stage ul{display:none}.formside{padding:28px 20px 40px}
 .top .t-ico{display:none}
}
@media(max-width:640px){
 .top{gap:8px}.top h1{font-size:20px}.top>.grow{flex-basis:0}.top .hd-right{display:contents}.hd-ctl{order:2;flex-wrap:nowrap}
 .hd-chips{order:3;width:100%;display:grid;grid-template-columns:1fr 1fr}.chip-st{padding:5px 8px}.chip-st b{overflow:hidden;text-overflow:ellipsis}.sound-chip{display:none}
 .album{grid-template-columns:1fr 1fr;gap:10px}.d-stats{grid-template-columns:1fr 1fr}.stat{padding:12px;gap:10px}.stat .ic{width:38px;height:38px}.stat .n{font-size:22px}
 .evcard{grid-template-columns:auto minmax(0,1fr) auto;gap:10px}.evcard .th{display:none}.evcard .cf,.evcard .stt{grid-column:2}.evcard .act{grid-column:3;grid-row:1/span 3;flex-direction:column}
 .search{max-width:none;flex-basis:100%}.dates{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);width:100%}.dates input{width:100%}
 .checks{grid-template-columns:1fr}.alarm-btns button{height:52px}.fe-angles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cam-ctl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}