:root{--bg:#0f1117;--bg2:#161922;--bg3:#1e2230;--card:#1a1f2e;--border:#ffffff14;--accent:#4f8ef7;--accent2:#22d3b4;--warn:#f59e42;--danger:#f25c5c;--success:#22c55e;--text:#e8eaf0;--muted:#7a8099;--radius:14px;--radius-sm:8px;--shadow:0 18px 60px #00000073;--font:"DM Sans", ui-sans-serif, system-ui, sans-serif;--mono:"DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}html,body{min-height:100%}body{font-family:var(--font);background:radial-gradient(ellipse at 20% 15%, #4f8ef72e, transparent 35%), radial-gradient(ellipse at 80% 0%, #22d3b41f, transparent 30%), var(--bg);color:var(--text);font-size:15px;line-height:1.6}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}::selection{background:#4f8ef759}.screen{min-height:100vh}.screen.active{flex-direction:column;display:flex}.screen-shell{flex-direction:column;min-height:100vh;display:flex}.topbar{z-index:40;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);background:#1a1f2ef0;align-items:center;gap:1rem;padding:.9rem 1.25rem;display:flex;position:sticky;top:0}.topbar-logo{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#fff;width:40px;height:40px;box-shadow:var(--shadow);border-radius:12px;flex-shrink:0;place-items:center;display:grid}.topbar-title{letter-spacing:-.02em;font-size:1rem;font-weight:700}.topbar-role{color:var(--muted);font-size:.74rem}.topbar-right{align-items:center;gap:.75rem;margin-left:auto;display:flex}.avatar{background:var(--accent);color:#fff;border-radius:50%;place-items:center;width:36px;height:36px;font-size:.85rem;font-weight:700;display:grid}.main-content{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:1.25rem}.hero-shell{place-items:center;min-height:100vh;padding:2rem;display:grid}.hero-card,.login-box,.card,.modal-sheet,.notice-card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);background:#1a1f2ef5}.hero-card{text-align:center;width:min(100%,880px);padding:2rem}.hero-logo{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#fff;border-radius:22px;place-items:center;width:76px;height:76px;margin:0 auto 1.25rem;font-size:1.8rem;display:grid}.hero-title{letter-spacing:-.05em;font-size:clamp(2rem,4vw,3.2rem);font-weight:800;line-height:1.05}.hero-subtitle{color:var(--muted);margin-top:.8rem;font-size:1rem}.hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.8rem;display:grid}.role-card{border:1px solid var(--border);border-radius:var(--radius);text-align:center;background:#1e2230e0;padding:1.5rem 1rem;transition:transform .18s,border-color .18s,background .18s}.role-card:hover{background:#1f2640f2;border-color:#4f8ef7a6;transform:translateY(-2px)}.role-icon,.feature-icon{width:48px;height:48px;color:var(--accent);background:#4f8ef724;border-radius:14px;place-items:center;margin:0 auto .9rem;font-size:1.25rem;display:grid}.role-label,.login-title,.section-title,.modal-title,.card-title,.panel-title{letter-spacing:-.02em;font-weight:700}.role-desc,.hero-note,.login-sub,.muted,.help-text,.location-meta,.field-hint,.empty-state{color:var(--muted)}.hero-actions{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:1.5rem;display:flex}.login-wrap{place-items:center;min-height:100vh;padding:2rem;display:grid}.login-box{width:min(100%,420px);padding:1.5rem}.login-back{color:var(--muted);cursor:pointer;align-items:center;gap:.5rem;margin-bottom:1rem;display:inline-flex}.field{margin-bottom:1rem}.field label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.4rem;font-size:.78rem;font-weight:700;display:block}.field input,.field select,.field textarea{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text);outline:none;padding:.7rem .9rem;transition:border-color .18s,box-shadow .18s}.field input:focus,.field select:focus,.field textarea:focus{border-color:#4f8ef7e6;box-shadow:0 0 0 3px #4f8ef71f}.field select option{background:var(--bg3)}.btn{border-radius:var(--radius-sm);cursor:pointer;border:none;justify-content:center;align-items:center;gap:.45rem;padding:.72rem 1rem;font-weight:700;transition:transform .15s,background .15s,border-color .15s;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.65;cursor:not-allowed;transform:none}.btn-primary{background:var(--accent);color:#fff}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-warn{background:var(--warn);color:#1a0f00}.btn-ghost{color:var(--text);border:1px solid var(--border);background:0 0}.btn-ghost:hover{background:#ffffff0a}.btn-sm{padding:.45rem .8rem;font-size:.84rem}.btn-stack{flex-wrap:wrap;gap:.75rem;display:flex}.notice-card{margin-bottom:1rem;padding:.9rem 1rem}.nav-tabs,.bottomnav,.code-nav{border:1px solid var(--border);background:#1e2230e6;border-radius:12px;gap:.25rem;padding:4px;display:flex}.nav-tabs{margin-bottom:1rem}.nav-tab,.bottomnav-item,.code-tab{text-align:center;cursor:pointer;color:var(--muted);border-radius:10px;flex:1;padding:.6rem .5rem;font-size:.84rem;font-weight:700;transition:background .15s,color .15s}.nav-tab.active,.bottomnav-item.active,.code-tab.active{color:var(--text);background:#ffffff0f}.card{margin-bottom:1rem;padding:1.2rem}.card-title{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.8rem;font-size:.8rem}.section-header,.section-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.85rem;display:flex}.section-title{font-size:1.1rem}.stat-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem;display:grid}.stat-box{border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;background:#1e2230eb;padding:1rem}.stat-num{margin-bottom:.2rem;font-size:1.75rem;font-weight:800;line-height:1}.stat-lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}.badge{border-radius:999px;align-items:center;gap:.35rem;padding:.18rem .55rem;font-size:.72rem;font-weight:700;display:inline-flex}.badge-success{color:var(--success);background:#22c55e29}.badge-warn{color:var(--warn);background:#f59e4229}.badge-danger{color:var(--danger);background:#f25c5c29}.badge-info{color:var(--accent);background:#4f8ef729}.log-table{border-collapse:collapse;width:100%}.log-table th{text-align:left;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid var(--border);padding:.65rem .6rem;font-size:.72rem}.log-table td{vertical-align:middle;border-bottom:1px solid #ffffff0a;padding:.75rem .6rem;font-size:.88rem}.log-table tr:last-child td{border-bottom:none}.log-thumb{background:var(--bg3);width:42px;height:42px;color:var(--accent);border-radius:10px;place-items:center;display:grid;overflow:hidden}.log-thumb img{object-fit:cover;width:100%;height:100%}.loc-text,.mono,.coords{font-family:var(--mono);color:var(--muted);font-size:.78rem}.loc-item,.assigned-card{border:1px solid var(--border);border-radius:var(--radius-sm);background:#1e2230eb;align-items:center;gap:.9rem;margin-bottom:.75rem;padding:.9rem;transition:border-color .15s,background .15s;display:flex}.loc-item:hover,.assigned-card:hover{border-color:#4f8ef780}.loc-item:last-child,.assigned-card:last-child{margin-bottom:0}.loc-dot,.assigned-icon{width:42px;height:42px;color:var(--accent);background:#4f8ef71f;border-radius:12px;flex-shrink:0;place-items:center;display:grid}.loc-info,.assigned-info{flex:1}.loc-name,.assigned-name{font-weight:700}.loc-coords,.assigned-dist{color:var(--muted);margin-top:.15rem;font-size:.78rem}.loc-radius{color:var(--warn);margin-top:.2rem;font-size:.78rem}.loc-actions{flex-wrap:wrap;gap:.4rem;display:flex}.assigned-card{cursor:pointer}.assigned-card.selected{background:#22d3b414;border-color:#22d3b4bf}.gps-status-ring{border:3px solid var(--border);border-radius:50%;place-items:center;width:122px;height:122px;margin:1rem auto;font-size:2.6rem;transition:border-color .25s,box-shadow .25s;display:grid}.gps-status-ring.ok{border-color:var(--success);box-shadow:0 0 0 6px #22c55e1a}.gps-status-ring.error{border-color:var(--danger);box-shadow:0 0 0 6px #f25c5c1a}.gps-status-ring.detecting{border-color:var(--accent);animation:1.2s ease-in-out infinite pulse-ring}@keyframes pulse-ring{0%,to{box-shadow:0 0 #4f8ef747}50%{box-shadow:0 0 0 12px #4f8ef700}}.gps-label,.gps-coords,.gps-result{text-align:center}.gps-label{margin-bottom:.45rem;font-size:.95rem}.gps-coords{color:var(--accent2);font-family:var(--mono);margin-bottom:1rem;font-size:.84rem}.camera-stage{border-radius:var(--radius);aspect-ratio:4/3;background:#000;margin-bottom:1rem;display:none;position:relative;overflow:hidden}.camera-stage video,.camera-stage img,#camera-canvas,.selfie-preview{object-fit:cover;width:100%;height:100%}#camera-canvas{display:none}.camera-overlay{border:3px solid var(--accent2);border-radius:inherit;pointer-events:none;position:absolute;inset:0}.camera-corner{border-color:var(--accent2);border-style:solid;width:22px;height:22px;position:absolute}.camera-corner.tl{border-width:3px 0 0 3px;top:8px;left:8px}.camera-corner.tr{border-width:3px 3px 0 0;top:8px;right:8px}.camera-corner.bl{border-width:0 0 3px 3px;bottom:8px;left:8px}.camera-corner.br{border-width:0 3px 3px 0;bottom:8px;right:8px}.selfie-preview{border-radius:var(--radius);margin-bottom:1rem;display:none}.map-canvas{border-radius:var(--radius);border:1px solid var(--border);background:radial-gradient(circle at 20% 20%,#4f8ef714,#0000 20%),linear-gradient(#1e2230e6,#0f1117fa);width:100%;height:280px;position:relative;overflow:hidden}.map-card{padding:1rem}.map-selector{flex-wrap:wrap;gap:.5rem;margin-bottom:.9rem;display:flex}.map-selector-btn.active{color:#d8fff6;background:#22d3b41a;border-color:#22d3b4b3}.map-details{flex-direction:column;gap:.2rem;margin-bottom:.9rem;display:flex}.map-details-name{font-size:1rem;font-weight:800}.map-details-meta{color:var(--muted);font-size:.82rem}.google-map-frame-wrap{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg3);overflow:hidden}.google-map-frame{border:0;width:100%;height:360px;display:block}.map-pin{text-align:center;position:absolute;transform:translate(-50%,-100%)}.pin-dot{border:2px solid #fff;border-radius:50%;width:14px;height:14px;margin:0 auto}.pin-label{color:#fff;white-space:nowrap;background:#0009;border-radius:6px;margin-top:.2rem;padding:.15rem .4rem;font-size:.68rem}.map-legend{color:#ddd;background:#0000009e;border-radius:8px;padding:.65rem .8rem;font-size:.74rem;position:absolute;bottom:10px;left:10px}.map-legend-item{align-items:center;gap:.45rem;margin-bottom:.25rem;display:flex}.map-legend-item:last-child{margin-bottom:0}.map-legend-dot{border-radius:50%;width:8px;height:8px}.bottomnav{z-index:30;border-width:1px 0 0;border-radius:0;position:sticky;bottom:0}.bottomnav-item{padding:.8rem 0}.nav-icon{margin-bottom:.15rem;font-size:1.1rem}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:70;background:#0000009e;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.modal-overlay.hidden,.hidden{display:none!important}.modal-sheet{border-radius:var(--radius) var(--radius) 0 0;width:min(100%,720px);padding:1.4rem;animation:.22s slide-up}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-title{justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:1.05rem;display:flex}.modal-close{cursor:pointer;color:var(--muted);font-size:1.1rem}.toast{opacity:0;pointer-events:none;border:1px solid var(--border);max-width:calc(100vw - 2rem);box-shadow:var(--shadow);z-index:100;background:#1a1f2ef7;border-radius:12px;padding:.8rem 1rem;transition:opacity .2s,transform .2s;position:fixed;bottom:1.25rem;left:50%;transform:translate(-50%)translateY(10px)}.toast.show{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)}.toast.success{border-color:#22c55e59}.toast.warn{border-color:#f59e4259}.toast.danger{border-color:#f25c5c59}@media (width<=980px){.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-grid{grid-template-columns:1fr}.main-content{padding:1rem}}@media (width<=640px){.topbar{padding:.75rem 1rem}.stat-row{grid-template-columns:1fr}.log-table{font-size:.8rem}.hero-card,.login-box,.card,.modal-sheet{padding:1rem}}