:root{
  --navy:#082f6b;
  --blue:#0b4fa3;
  --blue-bright:#0e63ce;
  --blue-soft:#eaf3ff;
  --bg:#f5f8fc;
  --card:#ffffff;
  --text:#132238;
  --muted:#64748b;
  --border:#dbe4ef;
  --border-strong:#c7d4e3;
  --green:#14843a;
  --green-soft:#e2f5e7;
  --orange:#b85d00;
  --orange-soft:#fff1da;
  --red:#b42318;
  --red-soft:#fff0ef;
  --shadow:0 7px 22px rgba(12,42,79,.08);
  --shadow-soft:0 2px 10px rgba(12,42,79,.07);
  --radius:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
body{overscroll-behavior-y:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:active{transform:translateY(1px)}
a{color:inherit}
.boot{min-height:100vh;display:grid;place-items:center;padding:40px;text-align:center;color:#48617c;font-weight:700}
.shell{min-height:100vh;max-width:760px;margin:0 auto;background:var(--bg);position:relative}

/* Header */
.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,#0d57b1 0%,#073d82 100%);color:#fff;padding:calc(11px + env(safe-area-inset-top)) 12px 11px;display:flex;align-items:center;gap:8px;box-shadow:0 2px 10px rgba(6,42,91,.22)}
.topbar h1{font-size:18px;line-height:1.2;margin:0;flex:1;text-align:center;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn,.homebtn{min-height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center}
.iconbtn{min-width:38px;background:transparent;border:0;color:inherit;font-size:23px;padding:5px}
.iconbtn svg{width:22px;height:22px}
.homebtn{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:white;padding:7px 10px;font-size:12px;font-weight:800;white-space:nowrap}
.version-badge{font-size:9px;font-weight:850;letter-spacing:.04em;opacity:.94;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:4px 6px;border-radius:999px;white-space:nowrap}

.content{padding:15px 14px calc(92px + env(safe-area-inset-bottom))}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:15px;margin-bottom:12px}
.card.clickable{cursor:pointer;transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.card.clickable:active{transform:scale(.995);box-shadow:0 3px 12px rgba(12,42,79,.08)}

/* Login */
.login-shell{min-height:100vh;max-width:760px;margin:0 auto;position:relative;overflow:hidden;background:linear-gradient(180deg,#f9fcff 0%,#edf7ff 58%,#d7ecff 100%)}
.login-shell:before,.login-shell:after{content:"";position:absolute;left:-12%;right:-12%;height:180px;border-radius:50%;border:2px solid rgba(29,119,205,.18);bottom:5%;transform:scaleX(1.2)}
.login-shell:after{bottom:0%;height:120px;border-color:rgba(29,119,205,.11)}
.login-content{position:relative;z-index:2;min-height:100vh;padding:calc(46px + env(safe-area-inset-top)) 24px calc(30px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.brand{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:3vh}
.brand-mark{width:74px;height:92px;filter:drop-shadow(0 8px 12px rgba(6,79,163,.18))}
.brand-text{color:var(--blue);font-weight:900;letter-spacing:.035em;font-size:34px;line-height:.84}
.brand-sub{font-size:13px;letter-spacing:.34em;font-weight:800;margin-top:12px;color:#315d95}
.login-panel{margin-top:42px;background:rgba(255,255,255,.82);border:1px solid rgba(185,207,229,.85);box-shadow:0 15px 45px rgba(18,73,126,.10);backdrop-filter:blur(12px);border-radius:22px;padding:22px}
.login-panel h2{text-align:center;margin:0;font-size:29px;letter-spacing:-.02em}
.login-panel .login-subtitle{text-align:center;margin:8px 0 22px;color:var(--muted);font-size:14px}
.login-field{position:relative;margin-top:12px}
.login-field svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#8b9bb0;pointer-events:none}
.login-field input,.login-field select{padding-left:45px;min-height:52px;background:#fff}
.login-footer{margin-top:auto;text-align:center;color:#52667e;font-size:11px;padding-top:26px}
.login-version{font-weight:800;color:#355b88}

/* Forms */
label{display:block;font-size:12px;font-weight:800;letter-spacing:.025em;text-transform:uppercase;color:#293c55;margin:15px 0 7px}
input,textarea,select{width:100%;padding:12px 13px;border:1px solid var(--border-strong);border-radius:11px;background:white;color:var(--text);outline:none;box-shadow:inset 0 1px 1px rgba(12,42,79,.02);transition:border-color .15s ease,box-shadow .15s ease}
input:focus,textarea:focus,select:focus{border-color:#3e82d5;box-shadow:0 0 0 3px rgba(11,79,163,.10)}
textarea{min-height:118px;resize:vertical;line-height:1.45}
.primary,.secondary,.success,.danger{width:100%;min-height:47px;padding:12px 14px;border-radius:11px;font-weight:800;margin-top:10px;border:0;transition:filter .15s ease,transform .05s ease}
.primary{background:linear-gradient(135deg,#0c55b0,#07479a);color:white;box-shadow:0 5px 12px rgba(11,79,163,.18)}
.secondary{background:white;color:var(--blue);border:1px solid #b9c9de}
.success{background:linear-gradient(135deg,#169544,#0b7b34);color:white;box-shadow:0 5px 12px rgba(20,132,58,.17)}
.danger{background:var(--red-soft);color:var(--red);border:1px solid #f3bbb6}
.small{width:auto;min-height:38px;padding:8px 12px;margin:0;font-size:12px}
.row{display:flex;gap:10px;align-items:center}.row>*{flex:1}.row>.no-flex{flex:0 0 auto}
.muted{color:var(--muted)}
.section-title{font-size:12px;letter-spacing:.035em;text-transform:uppercase;color:#30445f;font-weight:900;margin:5px 0 9px}

/* Status / notices */
.notice{font-size:13px;line-height:1.4;background:#fff8dd;border:1px solid #eadca0;color:#665700;padding:10px 12px;border-radius:10px;margin-bottom:12px}
.notice.good{background:#edf9f0;border-color:#c2e6cb;color:#17622d}.notice.bad{background:#fff0ef;border-color:#f0c3bf;color:#8c271f}
.badge{display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;font-weight:900;letter-spacing:.035em;border-radius:999px;padding:7px 9px;white-space:nowrap}
.badge.not{background:var(--orange-soft);color:var(--orange)}.badge.process{background:var(--green-soft);color:#107330}.badge.complete{background:var(--green-soft);color:#107330}

/* Home */
.welcome{padding:4px 2px 2px}.welcome h2{font-size:23px;margin:0 0 2px;letter-spacing:-.02em}.welcome-summary{font-size:14px;color:var(--muted)}
.tabs{display:flex;background:white;border:1px solid var(--border-strong);border-radius:11px;overflow:hidden;margin:14px 0;box-shadow:0 2px 6px rgba(12,42,79,.03)}
.tabs button{flex:1;padding:11px 8px;border:0;background:white;color:#24405f;font-weight:800}.tabs button.active{background:linear-gradient(135deg,#0d57b1,#08458e);color:white}
.searchrow{display:flex;gap:8px;margin-bottom:12px}.search-wrap{position:relative;flex:1}.search-wrap svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:#7b8da3}.search-wrap input{padding-left:42px;min-height:46px}
.wo-card{padding:14px 14px 13px}
.wo{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:5px 11px;align-items:start}
.wo-icon{grid-row:1 / span 4;width:46px;height:46px;border-radius:12px;background:#f0f5fb;border:1px solid #e3ebf4;color:#0b4fa3;display:grid;place-items:center}
.wo-icon svg{width:25px;height:25px}
.wo-main{min-width:0}.wo h3{margin:0;font-size:19px;letter-spacing:-.01em}.wo .type{font-size:15px;font-weight:800;margin:2px 0 4px}.wo .addr{font-size:14px;color:#284766;display:flex;align-items:flex-start;gap:5px}.wo .addr svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:#0b4fa3}.wo .desc{color:var(--muted);font-size:13px;line-height:1.35;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.wo-chevron{align-self:center;color:#7a8da3;font-size:28px;line-height:1}
.home-admin-row{display:flex;justify-content:flex-end;margin:1px 0 9px}.home-admin-row .primary{width:auto;min-height:42px;margin:0;padding:9px 14px}
.fab{position:fixed;right:max(20px,calc((100vw - 760px)/2 + 20px));bottom:calc(76px + env(safe-area-inset-bottom));z-index:18;width:56px;height:56px;border-radius:50%;border:0;background:linear-gradient(135deg,#0e63ce,#07479a);color:white;box-shadow:0 10px 24px rgba(7,71,154,.28);font-size:32px;line-height:1;display:grid;place-items:center}

/* Detail */
.detail-hero{padding:15px 15px 13px}.detail-title-row{display:flex;align-items:flex-start;gap:10px}.detail-title-row>div:first-child{min-width:0;flex:1}.detail-title-row h2{font-size:22px;margin:0;letter-spacing:-.02em}.detail-type{font-size:17px;font-weight:850;margin-top:4px}.detail-address{margin-top:8px;color:#24445f;font-size:14px;display:flex;gap:6px;align-items:flex-start}.detail-address svg{width:17px;height:17px;flex:0 0 auto;margin-top:1px;color:#0b4fa3}
.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 12px}.actions button{min-height:60px;padding:8px 5px;border-radius:11px;border:1px solid #c6d5e7;background:white;color:var(--blue);font-weight:800;font-size:12px;box-shadow:0 2px 6px rgba(12,42,79,.04)}.actions button svg{display:block;width:22px;height:22px;margin:0 auto 4px}.actions .primary-action{background:linear-gradient(135deg,#0d57b1,#08458e);color:white;border-color:#0b4fa3}.actions .call-action{background:#f1fbf3;color:#147235;border-color:#bfe3c9}
.info-section{padding:0}.info-heading{padding:11px 14px 8px;border-top:1px solid #edf1f6;font-size:10px;letter-spacing:.055em;font-weight:900;color:#35506f;text-transform:uppercase}.info-grid{display:grid;grid-template-columns:118px minmax(0,1fr);font-size:13px}.info-grid>div{padding:8px 14px;border-top:1px solid #edf1f6}.info-grid .k{color:#5e7087;font-size:11px}.info-grid .v{color:#1b2e46;overflow-wrap:anywhere}
.section-card-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}.section-card-head h3{margin:0;font-size:17px;flex:1}.note-text{white-space:pre-wrap;background:#f8fbff;border:1px solid #e3ebf5;border-left:4px solid #b8cfe9;padding:11px;border-radius:9px;font-size:13px;line-height:1.5;color:#2d425a}

/* Photos */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.photo-item{min-width:0;position:relative}.photo{aspect-ratio:1;border-radius:11px;border:1px solid var(--border);overflow:hidden;background:#eef3f9;display:flex;align-items:center;justify-content:center;color:var(--muted);box-shadow:0 2px 6px rgba(12,42,79,.05)}.photo img{width:100%;height:100%;object-fit:cover}.photo-delete{width:100%;margin-top:5px;padding:7px 4px;border-radius:8px;border:1px solid #f0b8b3;background:#fff7f6;color:var(--red);font-size:11px;font-weight:800}
.filebox{border:1.5px dashed #9fb7d2;border-radius:14px;padding:18px;text-align:center;background:#f9fcff;color:#243d5b}.filebox .photo-icon{width:48px;height:48px;margin:0 auto 9px;border-radius:13px;background:#e8f2ff;display:grid;place-items:center;color:#0b4fa3}.filebox .photo-icon svg{width:28px;height:28px}.filebox input[type=file]{margin-top:10px;background:white;font-size:12px}
.camera-panel video,.photo-preview{width:100%;max-height:58vh;object-fit:cover;border-radius:13px;background:#000;border:1px solid #ccd7e5}

/* Update / completion */
.status-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.status-picker button{padding:10px;border:1px solid var(--border-strong);background:white;border-radius:10px;font-size:12px;font-weight:800;color:#36506e}.status-picker button.active{background:linear-gradient(135deg,#0d57b1,#08458e);color:white;border-color:#0b4fa3}
.job-summary{background:#f8fbff;border:1px solid #e1eaf4;border-radius:11px;overflow:hidden;margin:14px 0}.job-summary-row{display:flex;gap:12px;justify-content:space-between;padding:9px 11px;border-top:1px solid #e7eef6;font-size:13px}.job-summary-row:first-child{border-top:0}.job-summary-row span:first-child{color:#5f7289}.complete-callout{margin-top:18px;padding:14px;border-radius:12px;background:#f2fbf4;border:1px solid #c8e8d0}.complete-callout h3{color:#117333;margin:0 0 5px;font-size:17px}.complete-callout p{margin:0;color:#536d5d;font-size:12px;line-height:1.4}

/* Admin */
.admin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.checkgroup{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:6px 0 12px}.checkitem{display:flex;align-items:center;gap:9px;margin:0;padding:10px 11px;border:1px solid var(--border);border-radius:10px;background:#fbfdff;font-weight:700;font-size:13px;text-transform:none;letter-spacing:0;color:#31465f}.checkitem input{width:auto;min-width:18px;height:18px;margin:0;padding:0;accent-color:var(--blue)}.checkitem span{flex:1}.checkitem.standalone{margin-top:12px}.admin-banner{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:#eef6ff;border:1px solid #cbdff5;color:#274d79;font-size:12px;line-height:1.4}.admin-banner svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px}

/* Bottom navigation */
.bottomnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(760px,100%);background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr);z-index:15;padding:5px 4px env(safe-area-inset-bottom);box-shadow:0 -5px 20px rgba(12,42,79,.05)}
.bottomnav button{border:0;background:transparent;padding:5px 2px 6px;font-size:10px;font-weight:650;color:#607388;min-height:54px}.bottomnav button svg{display:block;width:23px;height:23px;margin:0 auto 3px;stroke-width:2}.bottomnav button.active{color:var(--blue);font-weight:850}
.spinner{padding:30px;text-align:center;color:var(--muted);font-weight:700}.hidden{display:none!important}
.empty-state{text-align:center;padding:28px 16px}.empty-state-icon{width:52px;height:52px;margin:0 auto 10px;border-radius:14px;background:#eef4fb;color:#52769e;display:grid;place-items:center}.empty-state-icon svg{width:27px;height:27px}.empty-state b{display:block;margin-bottom:4px}
.profile-badge{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#e8f2ff;color:#0b4fa3;margin:2px auto 10px;font-size:24px;font-weight:900}.profile-card{text-align:center}.profile-card h2{margin:0 0 3px}

@media(max-width:520px){
  .admin-grid,.checkgroup{grid-template-columns:1fr}
  .content{padding-left:12px;padding-right:12px}
  .card{border-radius:14px}
  .topbar{padding-left:8px;padding-right:8px}.topbar h1{font-size:17px}.version-badge{font-size:8px;padding:4px 5px}
  .info-grid{grid-template-columns:105px minmax(0,1fr)}.info-grid>div{padding-left:11px;padding-right:11px}
  .brand-text{font-size:31px}.brand-mark{width:67px;height:84px}.login-content{padding-left:18px;padding-right:18px}.login-panel{padding:19px}
}
@media(min-width:600px){.content{padding:22px 22px calc(100px + env(safe-area-inset-bottom))}.card{padding:19px}.wo-card{padding:16px}}
.homebtn svg{width:15px;height:15px;margin-right:4px;stroke-width:2.2}
.primary svg,.secondary svg,.success svg,.danger svg{width:18px;height:18px;vertical-align:-4px;margin-right:6px;stroke-width:2.1}
.photo-delete svg{width:13px;height:13px;vertical-align:-3px;margin-right:3px}
.wo-main{grid-row:1 / span 4}.wo-chevron{grid-column:3;grid-row:2 / span 3;justify-self:center}
.details-grid{display:grid;grid-template-columns:130px minmax(0,1fr);gap:9px 12px;font-size:13px}.details-grid .k{color:var(--muted)}