:root{--bg:#f3f6f8;--bg-deep:#0b1f2a;--surface:#fff;--surface-2:#eef3f6;--ink:#13212b;--muted:#5b6b76;--line:#d7e1e8;--brand:#0f766e;--brand-dark:#0a5c56;--brand-soft:#d9f3ef;--accent:#c45c26;--accent-soft:#fde8db;--success:#1f7a4d;--success-soft:#dff5ea;--warning:#b45309;--warning-soft:#fff1d6;--danger:#b42318;--danger-soft:#fde8e6;--info:#175cd3;--info-soft:#e8f1ff;--shadow:0 18px 40px #0b1f2a14;--radius:16px;--font:"DM Sans", sans-serif;--display:"Outfit", sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;margin:0}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;margin:0}p{margin:0}.app-shell{grid-template-columns:260px 1fr;min-height:100vh;display:grid}.sidebar{color:#e8f1f4;background:linear-gradient(#0b1f2a 0%,#123041 55%,#0f3d3a 100%);flex-direction:column;gap:1.4rem;height:100vh;padding:1.4rem 1rem 1.2rem;display:flex;position:sticky;top:0}.brand-block{border-bottom:1px solid #ffffff14;padding:.4rem .6rem .8rem}.brand-kicker{letter-spacing:.14em;text-transform:uppercase;color:#8fb9b4;margin-bottom:.35rem;font-size:.72rem}.brand-title{font-family:var(--display);font-size:1.35rem;font-weight:700;line-height:1.15}.brand-sub{color:#a9c0cb;margin-top:.35rem;font-size:.85rem}.nav-list{flex-direction:column;flex:1;gap:.35rem;display:flex}.nav-link{color:#c9dae3;border-radius:12px;align-items:center;gap:.7rem;padding:.72rem .85rem;transition:background .2s,color .2s,transform .2s;display:flex}.nav-link:hover{color:#fff;background:#ffffff0f;transform:translate(2px)}.nav-link.active{color:#fff;background:#0f766e59;box-shadow:inset 0 0 0 1px #d9f3ef2e}.user-card{background:#ffffff0f;border:1px solid #ffffff14;border-radius:14px;gap:.7rem;padding:.9rem;display:grid}.user-meta{align-items:center;gap:.7rem;display:flex}.avatar{color:#fff;background:linear-gradient(135deg,#0f766e,#c45c26);border-radius:12px;place-items:center;width:40px;height:40px;font-weight:700;display:grid}.user-name{font-size:.95rem;font-weight:600}.user-role{color:#9db5c1;font-size:.78rem}.main-area{flex-direction:column;min-width:0;display:flex}.topbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:10;background:#ffffffd1;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.6rem;display:flex;position:sticky;top:0}.page-content{gap:1.2rem;padding:1.4rem 1.6rem 2rem;display:grid}.page-title{font-size:1.55rem}.page-subtitle{color:var(--muted);margin-top:.25rem;font-size:.95rem}.btn{cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.45rem;padding:.65rem 1rem;font-weight:600;transition:transform .15s,box-shadow .15s,background .15s;display:inline-flex}.btn:hover{transform:translateY(-1px)}.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 22px #0f766e40}.btn-primary:hover{background:var(--brand-dark)}.btn-secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.btn-danger{background:var(--danger-soft);color:var(--danger)}.btn-ghost{color:#c9dae3;background:0 0;border:1px solid #ffffff1f}.btn-sm{border-radius:10px;padding:.4rem .7rem;font-size:.85rem}.grid-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;display:grid}.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.05rem 1.1rem;animation:.45s both rise}.stat-card:nth-child(2){animation-delay:50ms}.stat-card:nth-child(3){animation-delay:.1s}.stat-card:nth-child(4){animation-delay:.15s}.stat-label{color:var(--muted);margin-bottom:.45rem;font-size:.85rem}.stat-value{font-family:var(--display);font-size:1.45rem;font-weight:700}.stat-hint{color:var(--muted);margin-top:.4rem;font-size:.8rem}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem;animation:.5s both rise}.panel-header{justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:1rem;display:flex}.panel-title{font-size:1.05rem}.two-col{grid-template-columns:1.4fr 1fr;gap:1rem;display:grid}.three-col{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.table-wrap{overflow:auto}table.data-table{border-collapse:collapse;width:100%;min-width:640px}.data-table th,.data-table td{text-align:left;border-bottom:1px solid var(--line);padding:.75rem .65rem;font-size:.92rem}.data-table th{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.8rem;font-weight:600}.badge{border-radius:999px;align-items:center;padding:.22rem .55rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge-success{background:var(--success-soft);color:var(--success)}.badge-warning{background:var(--warning-soft);color:var(--warning)}.badge-danger{background:var(--danger-soft);color:var(--danger)}.badge-info{background:var(--info-soft);color:var(--info)}.badge-neutral{background:var(--surface-2);color:var(--muted)}.alert-list{gap:.7rem;display:grid}.alert-item{border:1px solid var(--line);background:var(--surface-2);border-radius:12px;grid-template-columns:auto 1fr auto;align-items:start;gap:.75rem;padding:.85rem;animation:.4s both slideIn;display:grid}.alert-item.warning{background:var(--warning-soft);border-color:#f5d7a4}.alert-item.danger{background:var(--danger-soft);border-color:#f3c4bf}.alert-item.success{background:var(--success-soft);border-color:#b9e5d0}.alert-item.info{background:var(--info-soft);border-color:#bfd4fb}.alert-icon{background:#ffffffb3;border-radius:10px;place-items:center;width:34px;height:34px;display:grid}.alert-title{font-size:.92rem;font-weight:700}.alert-msg{color:var(--muted);margin-top:.2rem;font-size:.85rem;line-height:1.4}.alert-time{color:var(--muted);white-space:nowrap;font-size:.75rem}.toolbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;display:flex}.search-input,.field input,.field select,.field textarea{border:1px solid var(--line);background:#fff;border-radius:12px;outline:none;width:100%;padding:.7rem .85rem;transition:border-color .15s,box-shadow .15s}.search-input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #0f766e26}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;display:grid}.field{gap:.35rem;display:grid}.field label{color:var(--muted);font-size:.82rem;font-weight:600}.field.full{grid-column:1/-1}.modal-backdrop{z-index:50;background:#0b1f2a73;place-items:center;padding:1rem;animation:.2s fadeIn;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:18px;width:min(820px,100%);max-height:min(90vh,900px);padding:1.2rem;animation:.25s rise;overflow:auto;box-shadow:0 24px 60px #0b1f2a40}.tabs{flex-wrap:wrap;gap:.4rem;margin-bottom:1rem;display:flex}.tab{border:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:pointer;border-radius:999px;padding:.45rem .85rem;font-size:.85rem;font-weight:600}.tab.active{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}.stack-list{gap:.75rem;display:grid}.nested-card{border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:.75rem}.info-banner{background:var(--info-soft);color:var(--info);border-radius:12px;padding:.7rem .9rem;font-size:.9rem}.name-with-photo{align-items:center;gap:.55rem;display:flex}.mini-photo{object-fit:cover;border-radius:8px;width:28px;height:28px}.mini-photo.placeholder{background:var(--brand-soft);color:var(--brand-dark);place-items:center;font-size:.75rem;font-weight:700;display:grid}.photo-upload{align-items:center;gap:.8rem;display:flex}.photo-upload img,.photo-placeholder{border:1px solid var(--line);object-fit:cover;background:var(--surface-2);border-radius:10px;width:72px;height:86px}.photo-placeholder{color:var(--muted);place-items:center;font-size:.75rem;display:grid}.softcopy-box{background:#f7fbfb;border:1px dashed #9ec9c4;border-radius:14px;margin-top:1rem;padding:.9rem}.softcopy-hint{color:var(--muted);margin-bottom:.7rem;font-size:.82rem}.attachment-list{gap:.55rem;display:grid}.attachment-item{border:1px solid var(--line);background:#fff;border-radius:10px;justify-content:space-between;align-items:center;gap:.8rem;padding:.65rem .75rem;display:flex}.field textarea{border:1px solid var(--line);resize:vertical;width:100%;font:inherit;background:#fff;border-radius:12px;outline:none;padding:.7rem .85rem}.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px #0f766e26}.modal-actions{justify-content:flex-end;gap:.6rem;margin-top:1rem;display:flex}.actions-cell{gap:.4rem;display:flex}.login-page{background:radial-gradient(circle at 15% 20%,#0f766e47,#0000 35%),radial-gradient(circle at 80% 10%,#c45c2638,#0000 30%),linear-gradient(135deg,#071820 0%,#0b2a33 45%,#0f3d3a 100%);grid-template-columns:1.1fr .9fr;min-height:100vh;display:grid}.login-hero{color:#e8f4f2;flex-direction:column;justify-content:space-between;padding:3rem;display:flex;position:relative;overflow:hidden}.login-hero:after{content:"";pointer-events:none;background:linear-gradient(120deg,#ffffff0f,#0000 50%),repeating-linear-gradient(-25deg,#ffffff09 0 2px,#0000 2px 14px);height:55%;position:absolute;inset:auto -10% -20% 20%;transform:skewY(-8deg)}.login-brand{z-index:1;position:relative}.login-brand h1{max-width:11ch;margin-top:.6rem;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.05}.login-brand p{color:#b7d0d0;max-width:38ch;margin-top:1rem;font-size:1.05rem;line-height:1.55}.login-points{z-index:1;gap:.7rem;display:grid;position:relative}.login-point{color:#d5e7e5;align-items:center;gap:.7rem;font-size:.95rem;display:flex}.login-panel-wrap{place-items:center;padding:1.5rem;display:grid}.login-card{background:#fffffff5;border-radius:22px;width:min(420px,100%);padding:1.6rem;animation:.5s rise;box-shadow:0 30px 70px #00000047}.login-card h2{font-size:1.55rem}.login-card>p{color:var(--muted);margin:.4rem 0 1.2rem}.role-chips{grid-template-columns:repeat(2,1fr);gap:.5rem;margin-bottom:1rem;display:grid}.role-chip{border:1px solid var(--line);background:var(--surface-2);cursor:pointer;text-align:left;border-radius:12px;padding:.65rem .55rem;transition:border-color .15s,background .15s,transform .15s}.role-chip:hover{border-color:#9ec9c4;transform:translateY(-1px)}.role-chip.active{border-color:var(--brand);background:var(--brand-soft)}.role-chip strong{font-size:.88rem;display:block}.role-chip span{color:var(--muted);margin-top:.15rem;font-size:.72rem;display:block}.login-form{gap:.8rem;display:grid}.error-banner{background:var(--danger-soft);color:var(--danger);border-radius:10px;padding:.65rem .8rem;font-size:.88rem}.demo-note{border-top:1px dashed var(--line);color:var(--muted);margin-top:1rem;padding-top:.9rem;font-size:.8rem;line-height:1.5}.empty-state{text-align:center;color:var(--muted);padding:2rem 1rem}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(8px)}to{opacity:1;transform:translate(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=1100px){.grid-stats,.three-col{grid-template-columns:repeat(2,minmax(0,1fr))}.two-col{grid-template-columns:1fr}}@media (width<=900px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.login-page{grid-template-columns:1fr}.login-hero{padding:2rem 1.5rem 1rem}.login-points{display:none}}@media (width<=640px){.grid-stats,.three-col,.form-grid,.role-chips{grid-template-columns:1fr}.page-content,.topbar{padding-left:1rem;padding-right:1rem}}.camera-layout{align-items:start}.camera-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;display:grid}.camera-tile{border:1px solid var(--line);color:#e8f1f4;cursor:pointer;text-align:left;background:#0b1f2a;border-radius:14px;padding:0;transition:transform .15s,box-shadow .15s;overflow:hidden}.camera-tile:hover,.camera-tile.active{border-color:var(--brand);transform:translateY(-2px);box-shadow:0 12px 28px #0b1f2a40}.camera-tile.offline{opacity:.75}.camera-feed,.camera-preview{color:#9ec9c4;background:radial-gradient(circle at 30% 20%,#0f766e59,#0000 45%),linear-gradient(160deg,#123041,#0b1f2a 70%);place-items:center;height:100px;display:grid;position:relative;overflow:hidden}.camera-preview{border-radius:12px;height:200px;margin-bottom:.9rem}.camera-preview.offline,.camera-tile.offline .camera-feed{color:#f3c4bf;background:linear-gradient(160deg,#3a1f1f,#1a1010 70%)}.camera-scan{pointer-events:none;background:linear-gradient(#0000,#d9f3ef2e,#0000);animation:2.8s linear infinite scan;position:absolute;inset:0}.live-dot{letter-spacing:.06em;background:#00000073;border-radius:6px;padding:.15rem .4rem;font-size:.65rem;font-weight:700;position:absolute;top:8px;left:8px}.live-dot.on{color:#7dffa8}.live-dot.off{color:#ff9b93}.camera-meta{background:#102633;gap:.1rem;padding:.55rem .65rem .7rem;display:grid}.camera-meta span,.camera-meta small{color:#9db5c1;font-size:.75rem}.preview-label{color:#fff;font-size:.85rem;font-weight:600;position:absolute;bottom:10px;left:12px;right:12px}.camera-detail .detail-rows,.detail-rows{gap:.55rem;margin-bottom:1rem;font-size:.92rem;display:grid}.detail-rows div{align-items:center;gap:.4rem;display:flex}@keyframes scan{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}@media (width<=900px){.camera-layout{grid-template-columns:1fr}}@media (width>=520px){.login-card .role-chips{grid-template-columns:repeat(3,1fr)}}