:root{--bg:#e8eef6;--card:#fff;--line:#c8d3e2;--text:#0f1f35;--muted:#5f7089;--primary:#0a7a56;--danger:#b42318;--accent:#0ea5e9;--shadow:0 18px 40px #0b1d351f}*{box-sizing:border-box}html,body,#root{min-height:100%}html{font-size:clamp(13px,.3vw + 11px,16px)}body{color:var(--text);background:radial-gradient(circle at 12% -8%,#d8e8ff 0%,#edf4fb 42%,#e6f4ef 100%);margin:0;font-family:Segoe UI,Calibri,Trebuchet MS,sans-serif;line-height:1.4;overflow-x:hidden}a{color:inherit}.auth-wrap{place-items:center;min-height:100vh;padding:1rem;display:grid}.auth-card{width:min(430px,100%);box-shadow:var(--shadow);background:linear-gradient(#fff 0%,#f8fbff 100%);border:1px solid #d2dceb;border-radius:20px;padding:1.4rem}.auth-card h1{margin:0 0 .25rem}.auth-card p{color:var(--muted);margin:0 0 1rem}.app-shell{grid-template-columns:clamp(225px,17vw,280px) 1fr;align-items:start;min-height:100vh;display:grid}.sidebar{color:#f0f4fa;background:linear-gradient(#0d223f 0%,#0f1f35 100%);flex-direction:column;gap:.85rem;height:100vh;padding:.9rem;display:flex;position:sticky;top:0;overflow-y:auto}.sidebar-top{justify-content:space-between;align-items:center;gap:.6rem;display:flex}.sidebar-close,.mobile-menu-btn{color:#fff;background:#ffffff29;border:none;border-radius:10px;padding:.5rem .75rem;display:none}.brand{letter-spacing:.2px;font-size:1.1rem;font-weight:800;text-decoration:none}.role-tag{color:#9db3d1;margin:0;font-size:.82rem}.unit-box{background:#ffffff0f;border:1px solid #fff3;border-radius:12px;gap:.4rem;padding:.45rem;display:grid}.unit-photo{aspect-ratio:16/9;object-fit:cover;border:1px solid #ffffff29;border-radius:10px;width:100%}.unit-name{color:#f4f7ff;margin:0;font-size:.84rem;font-weight:600}.nav-list{gap:.45rem;display:grid}.nav-link{color:#d4dff0;border-radius:10px;padding:.6rem .7rem;text-decoration:none}.nav-link.active,.nav-link:hover{color:#fff;background:#ffffff1f}.nav-link.disabled{opacity:.45;pointer-events:none}.content{width:100%;max-width:none;min-height:100vh;margin:0;padding:.95rem}.content-header h1{letter-spacing:.2px;margin-top:0;margin-bottom:.85rem;font-size:clamp(1.7rem,2.3vw,2.9rem)}.cards-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;display:grid}.card,.panel{border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(#fff 0%,#f9fbfe 100%);border-radius:18px;padding:.95rem}.card p{color:var(--primary);margin:0;font-size:1.8rem;font-weight:700}.stack{gap:.6rem;display:grid}.stack-lg{gap:1rem;display:grid}.row-2{grid-template-columns:1fr 1fr;gap:.6rem;display:grid}input,select,textarea,button{border:1px solid var(--line);width:100%;max-width:100%;font:inherit;border-radius:12px;padding:.56rem .65rem}img{max-width:100%;display:block}input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #0ea5e924}textarea{resize:vertical;min-height:90px}button{cursor:pointer}.primary-btn{background:var(--primary);color:#fff;border:none}.primary-btn:hover{filter:brightness(1.05)}.danger-btn{background:var(--danger);color:#fff;border:none}.sidebar .danger-btn{margin-top:auto}.table-wrap{-webkit-overflow-scrolling:touch;border-radius:14px;width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:620px}th,td{border-bottom:1px solid var(--line);text-align:left;padding:.5rem;font-size:.95rem}tbody tr:hover{background:#0ea5e90f}.actions-cell{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.actions-cell>button,.actions-cell>.primary-btn,.actions-cell>.danger-btn{width:auto}.action-link{border:1px solid var(--line);border-radius:10px;width:auto;padding:.5rem .65rem;text-decoration:none;display:inline-block}.source-actions{justify-content:center}.helper-box{border:1px dashed var(--line);border-radius:12px;gap:.2rem;padding:.8rem;display:grid}.error-text{color:var(--danger);margin:0}.warning-banner{color:#8a4b00;background:#fff7e5;border:1px solid #f0c36d;border-radius:12px;margin-bottom:.85rem;padding:.65rem .75rem}.warning-banner.danger{color:#8f1f1f;background:#fff1f1;border-color:#efacac}.camera-box{gap:.6rem;display:grid}.camera-video{border:1px solid var(--line);border-radius:10px;width:100%;max-width:420px}.modal-backdrop{z-index:20;background:#0f1f359e;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.modal-card{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:14px;width:min(560px,100%);max-height:90dvh;padding:1rem;overflow-y:auto}.profile-grid{grid-template-columns:1fr 320px;align-items:start}.profile-photo-wrap{aspect-ratio:1;border:1px dashed var(--line);border-radius:12px;place-items:center;width:100%;display:grid;overflow:hidden}.profile-photo{object-fit:cover;width:100%;height:100%}.profile-photo-clickable,.table-photo-thumb{cursor:pointer}.table-photo-thumb{object-fit:cover;border:1px solid var(--line);border-radius:10px;width:46px;min-width:46px;height:46px;margin:0 auto}.image-modal{place-items:center;width:min(760px,100%);display:grid}.image-modal-photo{object-fit:contain;border-radius:14px;max-width:100%;max-height:80dvh}.area-photos-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;display:grid}.area-photo-card{border:1px solid var(--line);border-radius:12px;gap:.5rem;padding:.5rem;display:grid}.area-photo{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line);border-radius:10px;width:100%}.panel .unit-photo{aspect-ratio:16/7;object-fit:cover;border:1px solid #cdd8e6;border-radius:16px;width:min(980px,100%);max-height:300px;margin:.35rem auto;box-shadow:0 12px 30px #0f1f351f}.pool-schedule-box{background:linear-gradient(#f0f9ff 0%,#f7fcff 100%);border:1px dashed #9ec8df}.pool-day-row{grid-template-columns:120px 170px 1fr 1fr;align-items:center;gap:.5rem;display:grid}.toggle-switch{background:#d9e1ec;border:1px solid #b8c3d3;border-radius:999px;width:54px;height:30px;padding:2px;position:relative}.toggle-switch .toggle-knob{background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .2s;display:block;transform:translate(0);box-shadow:0 2px 8px #0f1f3533}.toggle-switch.active{background:#8be0bf;border-color:#52b98f}.toggle-switch.active .toggle-knob{transform:translate(24px)}td input,td select{width:100%}.sidebar-backdrop{display:none}@media (width<=920px){.app-shell{display:block}.sidebar{z-index:30;width:min(86vw,320px);height:100dvh;transition:transform .22s;position:fixed;inset:0 auto 0 0;overflow-y:auto;transform:translate(-110%)}.sidebar.open{transform:translate(0)}.sidebar-backdrop{z-index:25;background:#0812226b;display:block;position:fixed;inset:0}.sidebar-close,.mobile-menu-btn{width:auto;display:inline-flex}.mobile-menu-btn{background:#0f1f35;margin-bottom:.7rem}.row-2,.profile-grid{grid-template-columns:1fr}table{min-width:600px}.content{padding:.78rem}.pool-day-row{grid-template-columns:1fr}}@media (width<=640px){.auth-card,.card,.panel,.modal-card{padding:.75rem}.brand{font-size:1.05rem}.role-tag{font-size:.75rem}.nav-link{padding:.55rem .6rem}.card p{font-size:clamp(1.4rem,6vw,1.8rem)}table{min-width:500px}th,td{padding:.45rem;font-size:.88rem}}@media (width<=420px){.content{padding:.65rem}.stack,.stack-lg{gap:.5rem}.modal-backdrop{padding:.55rem}.camera-video{max-width:100%}}@media (width>=1500px){.content{width:100%;padding:1.1rem 1.25rem}.cards-grid{grid-template-columns:repeat(4,minmax(220px,1fr))}.panel,.card{padding:1.25rem}}@media (width>=2200px){.content{width:min(2100px,100%)}.app-shell{grid-template-columns:clamp(280px,16vw,360px) 1fr}}