:root{--brand:#14365d;--brand2:#1f5a96;--accent:#38bda8;--bg:#f4f6fb;--side:250px}
body{background:var(--bg);font-size:.94rem}
.btn-brand{background:var(--brand);color:#fff}.btn-brand:hover{background:var(--brand2);color:#fff}
.text-brand{color:var(--brand)}
/* layout */
.sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--side);background:var(--brand);color:#cfe0f3;overflow-y:auto;z-index:1040;transition:transform .2s}
.sidebar .brand{display:flex;gap:.6rem;align-items:center;padding:1rem;color:#fff;font-weight:700;text-decoration:none}
.sidebar .brand img{width:38px;height:38px;border-radius:8px;object-fit:cover;background:#fff}
.sidebar .sec{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#87a7c9;padding:.9rem 1rem .3rem}
.sidebar a.nl{display:flex;gap:.6rem;align-items:center;padding:.45rem 1rem;color:#dbe7f5;text-decoration:none;border-left:3px solid transparent}
.sidebar a.nl:hover,.sidebar a.nl.active{background:rgba(255,255,255,.08);border-left-color:var(--accent);color:#fff}
.main{margin-left:var(--side);min-height:100vh;padding-bottom:70px}
.topbar{position:sticky;top:0;z-index:1030;background:#fff;border-bottom:1px solid #e3e8f0;padding:.55rem 1rem;display:flex;align-items:center;gap:.6rem}
.content{padding:1rem}
@media (max-width:991px){.sidebar{transform:translateX(-100%)}.sidebar.show{transform:none;box-shadow:0 0 40px rgba(0,0,0,.4)}.main{margin-left:0}}
.bottom-nav{display:none}
@media (max-width:991px){.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #dde3ec;z-index:1030;padding-bottom:env(safe-area-inset-bottom)}
 .bottom-nav a{flex:1;text-align:center;padding:.4rem 0;color:#5b6b80;text-decoration:none;font-size:.7rem}
 .bottom-nav a i{display:block;font-size:1.25rem}.bottom-nav a.active{color:var(--brand)}}
.card{border:0;box-shadow:0 1px 3px rgba(16,36,64,.08);border-radius:12px}
.card-header{background:#fff;font-weight:600;border-bottom:1px solid #eef1f6}
.kpi{border-radius:12px;padding:.9rem 1rem;background:#fff;box-shadow:0 1px 3px rgba(16,36,64,.08);height:100%}
.kpi .v{font-size:1.45rem;font-weight:700;color:var(--brand)}.kpi .l{font-size:.75rem;color:#6b7a8f;text-transform:uppercase;letter-spacing:.04em}
.table{font-size:.88rem}.table th{font-size:.74rem;text-transform:uppercase;color:#6b7a8f;font-weight:600}
.thumb{width:84px;height:84px;object-fit:cover;border-radius:8px;margin:.2rem;border:1px solid #dde3ec}
.media-thumb{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid #dde3ec}
/* building unit grid */
.bgrid{border-collapse:separate;border-spacing:8px;width:100%}
.bgrid .fl{width:56px;text-align:center;font-weight:700;color:#6b7a8f;font-size:.8rem}
.ubox{display:block;min-height:92px;border-radius:12px;padding:.55rem .6rem;text-decoration:none;color:#14243a;position:relative;border:2px solid transparent;transition:transform .1s}
.ubox:hover{transform:translateY(-2px);border-color:var(--brand2)}
.ubox.occ{background:#e3f5ee}.ubox.vac{background:#eef1f6;color:#7a879a}.ubox.mine{outline:3px solid var(--accent)}
.ubox .no{font-weight:800;font-size:1rem}.ubox .tn{font-weight:600;font-size:.86rem;line-height:1.15;margin-top:.15rem;word-break:break-word}
.ubox .ll{font-size:.72rem;color:#6b7a8f}
.ubox .vb{position:absolute;top:6px;right:8px;background:#dc3545;color:#fff;border-radius:10px;font-size:.68rem;padding:0 .4rem}
.ubox.disabled{pointer-events:none;opacity:.55}
.bphoto{width:100%;max-height:300px;object-fit:cover;border-radius:12px}
.bcard-img{height:150px;object-fit:cover;border-radius:12px 12px 0 0;background:#dfe6ef}
.bph{height:150px;border-radius:12px 12px 0 0;background:linear-gradient(135deg,#1f5a96,#14365d);display:flex;align-items:center;justify-content:center;color:#fff;font-size:3rem}
/* statuses */
.st-open{background:#0d6efd}.st-assigned{background:#6f42c1}.st-in_progress{background:#fd7e14}.st-fixed{background:#20c997}.st-closed{background:#198754}.st-cancelled{background:#6c757d}
.pr-urgent{background:#dc3545}.pr-high{background:#fd7e14}.pr-normal{background:#0dcaf0;color:#05343c}.pr-low{background:#adb5bd}
.late{color:#dc3545;font-weight:600}
/* voice */
.voice-rec{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.voice-rec .rec{animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.6}}
.voice-rec audio{height:36px;max-width:100%}
/* timeline & chat */
.tl{border-left:2px solid #dde3ec;margin-left:.4rem;padding-left:1rem}
.tl .it{position:relative;margin-bottom:.8rem}.tl .it:before{content:'';position:absolute;left:-1.37rem;top:.35rem;width:10px;height:10px;border-radius:50%;background:var(--brand2)}
.chat{max-height:60vh;overflow-y:auto;background:#efeae2;border-radius:12px;padding:1rem}
.bubble{max-width:80%;padding:.45rem .7rem;border-radius:10px;margin-bottom:.4rem;white-space:pre-wrap;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.bubble.out{background:#d9fdd3;margin-left:auto}.bubble.in{background:#fff}
.bubble small{display:block;color:#667;font-size:.68rem;text-align:right}
.sig-pad{width:100%;max-width:500px;height:170px;border:1px dashed #999;border-radius:8px;background:#fff;touch-action:none}
/* print */
.doc{background:#fff;max-width:850px;margin:auto;padding:2rem;border-radius:12px}
@media print{.sidebar,.topbar,.bottom-nav,.no-print,.alert{display:none!important}.main{margin:0}.content{padding:0}body{background:#fff}.doc{box-shadow:none;padding:0}.card{box-shadow:none}}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#14365d,#1f5a96 60%,#38bda8);padding:1rem}
.auth-card{width:100%;max-width:430px}