:root { --ink:#18263d; --muted:#8693a8; --line:#e9eef5; --blue:#3475e9; --blue-deep:#205ac8; --green:#24a77c; --amber:#e99b3e; --red:#de6658; --canvas:#f5f7fb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#e7ecf3; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif; }
button,input,textarea,select { font:inherit; }
button { border:0; background:none; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline:.15rem solid #6598ff; outline-offset:.15rem; }
.phone-shell { width:min(100%,30rem); height:100dvh; min-height:35rem; margin:auto; display:flex; flex-direction:column; overflow:hidden; position:relative; background:var(--canvas); }
.topbar { display:flex; align-items:center; gap:.65rem; flex:0 0 auto; padding:.8rem 1rem .55rem; background:#f8faff; }
.brand-mark { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.85rem; background:linear-gradient(145deg,#397eff,#2560d6); color:#fff; font-size:1.2rem; box-shadow:0 .4rem .85rem #3475e930; }
.brand { display:grid; gap:.15rem; flex:1; }
.brand strong { font-size:.97rem; letter-spacing:-.02rem; }
.brand>span { color:var(--muted); font-size:.59rem; }
.top-action { width:2rem; height:2rem; display:grid; place-items:center; font-size:1.1rem; color:#64738b; position:relative; }
.notice-dot { position:absolute; width:.4rem; height:.4rem; top:.24rem; right:.28rem; background:#f16c66; border:1px solid #fff; border-radius:50%; }
.user-avatar { width:1.8rem; height:1.8rem; border-radius:50%; background:#e4ebff; color:#4266bf; font-weight:700; font-size:.72rem; }
#appMain { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:.2rem 1rem 1rem; }
#appMain::-webkit-scrollbar { display:none; }
.view[hidden] { display:none!important; }
.view { display:none; animation:appear .2s ease-out; }
.view.is-active { display:block; }
@keyframes appear { from { opacity:.6; transform:translateY(.2rem); } to { opacity:1; transform:none; } }
.greeting { display:flex; align-items:flex-end; justify-content:space-between; margin:.85rem 0 1rem; }
.greeting p { color:var(--muted); font-size:.61rem; margin:0 0 .3rem; }
.greeting h1 { font-size:1.25rem; letter-spacing:-.035rem; margin:0; font-weight:750; }
.greeting h1 span { font-size:.95rem; margin-left:.35rem; }
.demo-tag { padding:.2rem .4rem; color:#8995a8; border:1px solid #dfe5ef; background:#f7f9fc; border-radius:.35rem; font-size:.52rem; }
.site-card { display:flex; align-items:center; gap:.65rem; width:100%; padding:.72rem .8rem; background:white; border:1px solid var(--line); border-radius:.85rem; text-align:left; box-shadow:0 .2rem .8rem #20385908; }
.site-icon { width:2rem; height:2rem; display:grid; place-items:center; flex:none; border-radius:.65rem; color:var(--blue); background:#edf3ff; }
.site-copy { display:grid; gap:.2rem; flex:1; }
.site-copy small { color:var(--muted); font-size:.54rem; }
.site-copy strong { font-size:.72rem; }
.site-change { color:#75849a; font-size:.57rem; }
.site-change i { margin-left:.18rem; }
.progress-card { display:flex; align-items:center; justify-content:space-between; position:relative; isolation:isolate; overflow:hidden; margin-top:.7rem; min-height:8.35rem; padding:1rem 1.15rem; border-radius:1rem; color:white; background:linear-gradient(108deg,#1e60c8f5,#2c79e8ec 65%,#66a3f1d9),url('assets/field-inspection-v1.webp') center/cover; box-shadow:0 .55rem 1.2rem #2674e829; }
.progress-copy { display:grid; gap:.34rem; }
.progress-copy>span { color:#dfebff; font-size:.62rem; }
.progress-copy>strong { font-weight:750; font-size:2.1rem; line-height:1.12; letter-spacing:-.06rem; }
.progress-copy>strong small { color:#e4eeff; font-size:.64rem; font-weight:500; letter-spacing:0; }
.progress-copy>p { display:flex; align-items:center; gap:.25rem; color:#dceaff; font-size:.55rem; margin:0; }
.progress-copy>p i { color:#a8f0d3; }
.progress-ring { width:4.45rem; height:4.45rem; flex:none; position:relative; display:grid; place-items:center; border:5px solid #ffffff35; border-top-color:#c5f3de; border-right-color:#c5f3de; border-radius:50%; transform:rotate(-35deg); }
.progress-ring::after { content:''; position:absolute; inset:4px; border:2px solid #ffffff29; border-radius:50%; }
.progress-ring>span { display:grid; justify-items:center; transform:rotate(35deg); }
.progress-ring b { font-size:1.2rem; line-height:1.05; }
.progress-ring small { color:#daebff; font-size:.48rem; margin-top:.15rem; }
.progress-watermark { position:absolute; z-index:-1; right:3.9rem; bottom:-1.9rem; font-size:8rem; color:#ffffff0a; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; margin:1.25rem 0 .65rem; }
.eyebrow { color:#9aa7ba; font-size:.5rem; font-weight:700; letter-spacing:.11rem; }
.section-heading h2 { margin:.2rem 0 0; font-size:.87rem; font-weight:730; }
.text-action { color:var(--blue); font-size:.57rem; padding:.3rem 0; white-space:nowrap; }
.route-list { display:grid; gap:.5rem; }
.route-card { width:100%; display:flex; align-items:center; gap:.65rem; text-align:left; padding:.7rem .75rem; border:1px solid var(--line); border-radius:.85rem; background:white; box-shadow:0 .15rem .7rem #20385908; }
.route-icon { flex:none; width:2.15rem; height:2.15rem; display:grid; place-items:center; border-radius:.7rem; background:#edf3ff; color:#5280e6; font-size:.98rem; }
.route-card[data-state="done"] .route-icon { background:#e9f7f1; color:#35a782; }
.route-card[data-state="locked"] .route-icon { background:#f2f4f7; color:#9da7b5; }
.route-info { display:grid; min-width:0; flex:1; gap:.22rem; }
.route-info>strong { font-size:.67rem; }
.route-info>span { font-size:.53rem; color:var(--muted); }
.route-state { display:grid; justify-items:end; gap:.24rem; font-size:.53rem; color:#96a2b4; }
.route-state strong { font-weight:650; color:var(--blue); }
.route-card[data-state="done"] .route-state strong { color:var(--green); }
.route-mini-progress { width:3rem; height:.2rem; border-radius:1rem; background:#edf0f6; overflow:hidden; }
.route-mini-progress i { display:block; height:100%; background:#5484ed; border-radius:inherit; }
.route-card[data-state="done"] .route-mini-progress i { background:#3db28a; }
.alert-heading { margin-top:1.3rem; }
.count-badge { display:inline-grid; place-items:center; min-width:1.05rem; height:1.05rem; padding:0 .25rem; margin-left:.18rem; border-radius:1rem; color:#dc7658; background:#fff0e8; font-size:.52rem; vertical-align:.1rem; }
.alert-list { display:grid; gap:.5rem; }
.alert-card { display:flex; align-items:center; gap:.55rem; width:100%; text-align:left; padding:.68rem .72rem; border:1px solid #f3e2ca; border-radius:.8rem; background:linear-gradient(120deg,#fffaf3,#fff); }
.alert-icon { flex:none; width:1.85rem; height:1.85rem; display:grid; place-items:center; border-radius:.62rem; color:#de963e; background:#fff1dc; }
.alert-copy { flex:1; min-width:0; display:grid; gap:.23rem; }
.alert-copy strong { font-size:.61rem; }
.alert-copy small { font-size:.51rem; color:#a28c6d; }
.alert-status { color:#d48837; background:#fff0dd; border-radius:.3rem; padding:.16rem .28rem; white-space:nowrap; font-size:.48rem; }
.alert-card.is-closed { background:#fff; border-color:var(--line); opacity:.72; }
.alert-card.is-closed .alert-status { color:var(--green); background:#eaf7f2; }
.tools-heading { margin-top:1.3rem; }
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.quick-grid button { display:grid; justify-items:center; gap:.35rem; padding:.65rem .3rem; border:1px solid var(--line); border-radius:.8rem; background:white; color:#61718a; font-size:.55rem; }
.quick-grid button i { color:var(--blue); font-size:1.2rem; }
.quick-grid button:first-child i { color:var(--green); }
.quick-grid button:last-child i { color:var(--amber); }
.shift-note { display:flex; align-items:center; gap:.4rem; margin:1rem 0 .15rem; padding:.6rem .2rem; color:#8794a8; font-size:.51rem; }
.shift-note>i:first-child { font-size:.85rem; color:#38a784; }
.shift-note>i:last-child { margin-left:auto; font-size:.55rem; }
.shift-note b { color:#617087; font-weight:650; }
.shift-note span span { color:#a0aabd; }
.bottom-nav { display:grid; grid-template-columns:repeat(5,1fr); flex:0 0 auto; z-index:4; padding:.53rem .3rem calc(.52rem + env(safe-area-inset-bottom)); background:#fffffff2; border-top:1px solid #e8edf5; backdrop-filter:blur(18px); }
.bottom-nav>button { position:relative; display:grid; justify-items:center; align-content:center; gap:.16rem; min-height:2.4rem; color:#96a2b6; font-size:.5rem; }
.bottom-nav>button>i { font-size:1.05rem; }
.bottom-nav>button.active { color:var(--blue); }
.bottom-nav>button>b { position:absolute; top:0; left:calc(50% + .45rem); display:grid; place-items:center; min-width:.9rem; height:.9rem; border-radius:1rem; padding:0 .18rem; color:white; background:#ee786c; font-size:.45rem; }
.bottom-nav>button>b.nav-notice-badge { background:#ee786c; }
.bottom-nav .scan-nav { gap:.12rem; transform:translateY(-.55rem); }
.scan-nav>span { display:grid; place-items:center; width:2.65rem; height:2.65rem; color:white; background:linear-gradient(145deg,#367dfa,#255dd4); border:.23rem solid var(--canvas); border-radius:50%; box-shadow:0 .25rem .65rem #2867dd38; }
.scan-nav>span i { font-size:1.17rem; }
.scan-nav>small { font-size:.48rem; }
.page-intro { padding:.85rem 0 .75rem; }
.page-intro h1 { margin:.28rem 0 .32rem; font-size:1.28rem; font-weight:750; }
.page-intro p { margin:0; color:var(--muted); font-size:.62rem; }
.task-summary { display:flex; justify-content:space-between; margin-top:.6rem; color:#67768e; font-size:.6rem; }
.task-summary b { color:var(--ink); font-size:.9rem; }
#taskPercent { color:var(--blue); }
.progress-track { height:.32rem; overflow:hidden; border-radius:1rem; margin:.45rem 0 .85rem; background:#e8edf5; }
.progress-track>span { display:block; width:76%; height:100%; border-radius:inherit; background:linear-gradient(90deg,#3271e9,#75a5fa); transition:width .25s; }
.filter-pills,.notice-tabs { display:flex; gap:.4rem; margin:.7rem 0; }
.filter-pills button,.notice-tabs button { padding:.4rem .65rem; border:1px solid #e7ecf4; border-radius:2rem; color:#748199; background:white; font-size:.55rem; }
.filter-pills button.selected,.notice-tabs button.selected { color:#2e68d6; border-color:#dbe6fd; background:#ebf2ff; }
.filter-pills b { margin-left:.15rem; font-size:.49rem; }
.task-routes { display:grid; gap:.7rem; }
.task-route-card { padding:.85rem; border:1px solid var(--line); border-radius:.9rem; background:white; }
.task-route-title { display:flex; align-items:center; gap:.55rem; }
.task-route-title .route-icon { width:2rem; height:2rem; }
.task-route-title>div { flex:1; }
.task-route-title strong { display:block; font-size:.7rem; }
.task-route-title small { display:block; margin-top:.18rem; color:var(--muted); font-size:.52rem; }
.task-route-title>button { color:var(--blue); font-size:.56rem; }
.task-route-meta { display:flex; justify-content:space-between; margin:.7rem 0 .32rem; color:#8290a5; font-size:.52rem; }
.point-list { display:grid; gap:.48rem; margin-top:.5rem; }
.point-heading { display:flex; align-items:center; justify-content:space-between; margin:1.1rem 0 .65rem; }
.point-heading h2 { margin:0; font-size:.88rem; }
.point-heading p { margin:.2rem 0 0; color:var(--muted); font-size:.52rem; }
.point-card { display:flex; align-items:center; gap:.58rem; padding:.62rem .68rem; border:1px solid var(--line); border-radius:.78rem; background:white; }
.point-card.done { border-color:#e0f0e8; background:#fcfefd; }
.point-card.issue { border-color:#f1dfc7; background:#fffdf8; }
.point-state { flex:none; width:1.85rem; height:1.85rem; display:grid; place-items:center; border-radius:.62rem; background:#eef3ff; color:#6282cc; font-size:.9rem; }
.point-card.done .point-state { background:#e9f7f1; color:#2fa67c; }
.point-card.issue .point-state { background:#fff0df; color:#d58d35; }
.point-copy { flex:1; min-width:0; }
.point-copy strong { display:block; font-size:.59rem; }
.point-copy small { display:block; margin-top:.22rem; color:#8b96a8; font-size:.49rem; }
.point-action { padding:.35rem; color:#5380de; font-size:.6rem; white-space:nowrap; }
.point-card.done .point-action { color:#3aa17e; }
.point-card.issue .point-action { color:#cb8b3e; }
.inspection-head { display:flex; align-items:center; gap:.55rem; padding:.45rem 0 .65rem; }
.inspection-head h1 { margin:.15rem 0 0; font-size:1rem; }
.back-button { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.65rem; background:white; color:#65738b; }
.scan-mini { margin-left:auto; color:var(--blue); width:2rem; height:2rem; border-radius:.65rem; background:#eaf1ff; }
.inspection-meta { display:flex; gap:.85rem; color:#78869b; font-size:.52rem; }
.inspection-meta b { color:#438468; font-weight:600; }
.inspection-progress { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; font-size:.57rem; color:#78869b; }
.inspection-progress b { color:var(--ink); font-size:.84rem; }
#routeDonePercent { color:#4383e7; }
.inspection-view .point-list { padding-bottom:.5rem; }
.finish-route { width:100%; display:flex; justify-content:center; align-items:center; gap:.42rem; margin-top:1rem; padding:.72rem; border-radius:.7rem; color:white; background:linear-gradient(100deg,#3076e9,#4488ef); font-size:.67rem; font-weight:650; box-shadow:0 .35rem .8rem #3475e92b; }
.finish-route:disabled { color:#8b98ab; background:#e7ebf1; box-shadow:none; }
.finish-hint { text-align:center; color:#929daf; font-size:.49rem; margin:.42rem 0 .3rem; }
.notice-tabs { border-bottom:1px solid var(--line); padding-bottom:.55rem; }
.notice-list { display:grid; gap:.55rem; }
.notice-card { display:flex; gap:.6rem; padding:.72rem; border:1px solid var(--line); border-radius:.8rem; background:white; }
.notice-symbol { display:grid; place-items:center; width:2rem; height:2rem; flex:none; border-radius:.65rem; color:#d28b35; background:#fff1dd; }
.notice-symbol.green { color:#30a17a; background:#eaf7f1; }
.notice-copy { flex:1; }
.notice-copy strong { display:block; font-size:.63rem; }
.notice-copy p { margin:.23rem 0; color:#758198; font-size:.54rem; line-height:1.55; }
.notice-copy small { color:#9aa5b6; font-size:.48rem; }
.notice-card>button { align-self:center; color:var(--blue); font-size:.52rem; white-space:nowrap; }
.notice-empty { padding:2.5rem 1rem; text-align:center; color:#929eb0; font-size:.62rem; }
.profile-hero { display:flex; align-items:center; gap:.75rem; margin:.95rem 0 .75rem; padding:1rem; background:linear-gradient(110deg,#1f60c9,#478ce9); color:white; border-radius:.95rem; }
.profile-avatar { display:grid; place-items:center; width:2.7rem; height:2.7rem; border:1px solid #ffffff60; border-radius:50%; background:#ffffff20; font-size:1rem; font-weight:700; }
.profile-hero>div { display:grid; gap:.25rem; flex:1; }
.profile-hero>div strong { font-size:.85rem; }
.profile-hero>div span { color:#d9e8ff; font-size:.55rem; }
.online-dot { padding:.18rem .35rem; border-radius:2rem; background:#ffffff20; color:#e3f5ff; font-size:.5rem; }
.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); padding:.75rem .35rem; border:1px solid var(--line); border-radius:.8rem; background:white; }
.profile-stats div { display:grid; justify-items:center; gap:.2rem; border-right:1px solid var(--line); }
.profile-stats div:last-child { border:0; }
.profile-stats b { font-size:1rem; }
.profile-stats b small { font-size:.55rem; }
.profile-stats span { color:var(--muted); font-size:.5rem; }
.settings-list { margin-top:.8rem; padding:0 .75rem; background:white; border:1px solid var(--line); border-radius:.8rem; }
.settings-list button { display:flex; align-items:center; width:100%; gap:.6rem; padding:.7rem 0; text-align:left; border-bottom:1px solid var(--line); }
.settings-list button:last-child { border:0; }
.settings-list button>i:first-child { color:#6483cd; font-size:.95rem; }
.settings-list button>span { display:grid; gap:.2rem; flex:1; font-size:.59rem; }
.settings-list button>span small { color:var(--muted); font-size:.49rem; }
.settings-list button>i:last-child { color:#9ba6b7; font-size:.52rem; }
.reset-demo { width:100%; margin-top:.8rem; padding:.65rem; border:1px solid #ebeff5; border-radius:.7rem; color:#7a879a; background:white; font-size:.58rem; }
.demo-caption { color:#9aa5b6; text-align:center; font-size:.47rem; line-height:1.6; margin:.6rem 0; }
.app-dialog { width:min(calc(100% - 2rem),27rem); max-height:88dvh; overflow:auto; padding:1.1rem; border:0; border-radius:1.05rem; color:var(--ink); box-shadow:0 1rem 4rem #14213938; }
.app-dialog::backdrop { background:#111e37aa; backdrop-filter:blur(5px); }
.dialog-heading { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.85rem; }
.dialog-heading h2 { margin:.2rem 0 0; font-size:.94rem; font-weight:730; }
.close-dialog { display:grid; place-items:center; width:1.9rem; height:1.9rem; border-radius:50%; background:#f1f3f7; color:#748198; font-size:.72rem; }
.camera-stage { position:relative; display:grid; place-items:center; aspect-ratio:4/3; overflow:hidden; border-radius:.8rem; background:#142238; }
.camera-stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.camera-placeholder { display:grid; justify-items:center; gap:.45rem; color:#eaf2ff; }
.camera-placeholder>i { font-size:2.3rem; color:#8fb2ff; }
.camera-placeholder strong { font-size:.66rem; }
.camera-placeholder span { color:#acbbd0; font-size:.52rem; }
.scan-corner { position:absolute; width:1.2rem; height:1.2rem; border-color:#86b7ff; border-style:solid; }
.scan-corner.tl { top:22%; left:20%; border-width:2px 0 0 2px; border-radius:.35rem 0 0; }
.scan-corner.tr { top:22%; right:20%; border-width:2px 2px 0 0; border-radius:0 .35rem 0 0; }
.scan-corner.bl { bottom:22%; left:20%; border-width:0 0 2px 2px; border-radius:0 0 0 .35rem; }
.scan-corner.br { bottom:22%; right:20%; border-width:0 2px 2px 0; border-radius:0 0 .35rem; }
.scan-status { color:#7d8ba1; font-size:.55rem; text-align:center; margin:.55rem 0; }
.primary-button { display:flex; justify-content:center; align-items:center; gap:.4rem; width:100%; min-height:2.55rem; margin-top:.75rem; border-radius:.68rem; color:white; background:linear-gradient(100deg,#3074e7,#4386ed); font-size:.65rem; font-weight:650; }
.manual-scan { margin-top:.85rem; padding-top:.75rem; border-top:1px solid var(--line); }
.manual-scan label,.form-label { display:block; margin-bottom:.35rem; color:#68768c; font-size:.55rem; }
.manual-scan>div { display:flex; gap:.4rem; }
.manual-scan input,.form-control,.form-select { border-color:#e4eaf2; border-radius:.56rem; font-size:.62rem; min-height:2.35rem; }
.manual-scan input { min-width:0; flex:1; padding:.5rem .65rem; }
.manual-scan>div button { padding:0 .7rem; border-radius:.55rem; color:#346dd5; background:#eaf1ff; font-size:.57rem; }
#reportForm .form-label { margin-top:.68rem; }
#reportForm .form-control,#reportForm .form-select { box-shadow:none; }
#reportDescription { min-height:4rem; }
.upload-control { display:flex; align-items:center; gap:.45rem; margin-top:.65rem; padding:.6rem; border:1px dashed #d5deeb; border-radius:.6rem; color:#687992; font-size:.57rem; }
.upload-control i { font-size:.9rem; color:#5582dc; }
.upload-control input { width:7.5rem; font-size:.5rem; }
.detail-body { color:#718097; font-size:.63rem; line-height:1.8; white-space:pre-line; }
.toast-container { position:fixed; z-index:9; bottom:calc(5rem + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); display:grid; gap:.35rem; width:max-content; max-width:calc(100% - 2rem); pointer-events:none; }
.toast-message { padding:.55rem .85rem; border-radius:.7rem; color:white; background:#17263ceF; box-shadow:0 .4rem 1rem #15223b24; text-align:center; font-size:.6rem; animation:toast-in .18s ease-out; }
@keyframes toast-in { from { opacity:0; transform:translateY(.35rem); } to { opacity:1; transform:none; } }
@media (min-width:600px) { body { min-height:100dvh; display:grid; place-items:center; padding:1.25rem; } .phone-shell { width:26rem; height:min(56rem,calc(100dvh - 2.5rem)); border:.58rem solid #171e2a; border-radius:2.1rem; box-shadow:0 1.6rem 3.5rem #1c345333; } .topbar { padding-top:.9rem; } #appMain { padding-left:1rem; padding-right:1rem; } .bottom-nav { border-radius:0 0 1.45rem 1.45rem; } }
@media (max-width:359px) { .phone-shell { min-height:32rem; } .topbar { padding-left:.8rem; padding-right:.8rem; } #appMain { padding-right:.8rem; padding-left:.8rem; } .greeting h1 { font-size:1.12rem; } .route-state { font-size:.49rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Usable navigation sizing and viewport-contained mockup preview. */
.phone-shell,.app-shell{min-height:0!important}
.bottom-nav,.app-nav{box-sizing:border-box;min-height:4.2rem;padding-block:.42rem max(.48rem,env(safe-area-inset-bottom))}
.bottom-nav button,.bottom-nav a,.app-nav button,.app-nav a{box-sizing:border-box;min-width:2.75rem;min-height:2.85rem;padding:.22rem .12rem;gap:.24rem;font-size:.68rem;line-height:1.15;touch-action:manipulation}
.bottom-nav button>i,.bottom-nav a>i,.app-nav button>i,.app-nav a>i{font-size:1.3rem;line-height:1}
.bottom-nav button.scan,.bottom-nav button.nav-center{min-width:2.9rem;min-height:2.9rem}
.bottom-nav button.scan>i,.bottom-nav button.nav-center>i{font-size:1.35rem}.bottom-nav button.scan>span,.bottom-nav button.nav-center>span{font-size:.58rem}