:root{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#163329;background:#f4f7f4;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overscroll-behavior-y:none}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.51}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #85d6ae;outline-offset:2px}button:not(:disabled){-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}body{background:linear-gradient(#e9f3ed 0,#f4f7f4 230px)}.topbar{height:77px;display:flex;align-items:center;justify-content:space-between;padding:0 max(25px,calc((100vw - 1180px)/2));color:white;background:#0d5f46;box-shadow:0 3px 18px #083b251a}.brand{display:flex;align-items:center;gap:12px}.brand-icon{height:45px;width:45px;border-radius:13px;background:#ffffff23;overflow:hidden}.brand-icon img{width:100%;height:100%;object-fit:cover}.brand strong{font-size:18px;display:block;letter-spacing:-.5px}.brand span{font-size:11px;color:#c6e7d6;display:block;margin-top:3px;letter-spacing:1px;text-transform:uppercase}.top-actions{display:flex;align-items:center;gap:12px}.connection{display:flex;align-items:center;gap:7px;border:1px solid #ffffff3d;border-radius:20px;padding:7px 11px;font-size:12px;background:#ffffff13}.status-dot{width:7px;height:7px;background:#79e9a3;border-radius:50%}.connection.offline .status-dot{background:#f1c76c}.icon-btn{font-size:23px;border:1px solid #ffffff50;background:transparent;color:white;width:37px;height:37px;border-radius:10px}main{max-width:1200px;margin:auto;padding:26px 20px 35px}.intro{margin:0 0 24px}.eyebrow{font-size:10px;color:#0d805b;letter-spacing:1.8px;font-weight:800;margin-bottom:11px}.intro h1{font-size:clamp(24px,3.8vw,38px);letter-spacing:-1.5px;margin:0 0 9px;line-height:1.17}.intro h1 em{font-style:normal;color:#19a270}.intro p{margin:0;color:#6e8077;font-size:13px;line-height:1.6}.tabs{display:flex;gap:8px;border-bottom:1px solid #d8e3db;padding:0 0 11px;margin-bottom:18px}.tab{border:0;border-radius:8px;background:transparent;color:#789082;font-weight:750;font-size:13px;padding:12px 18px}.tab.active{background:#e0f2e8;color:#08754b}.layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr);gap:17px;align-items:start}.leftcol,.rightcol{display:flex;flex-direction:column;gap:16px;min-width:0}.panel{border-radius:16px;border:1px solid #e1e9e2;background:#fff;padding:22px;box-shadow:0 3px 20px #1a3e2310;min-width:0}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}.panel h2{font-size:16px;margin:0 0 5px;letter-spacing:-.35px}.panel-heading p,.panel>p{font-size:12px;color:#809087;margin:0;line-height:1.5}.tag{font-size:10px;border-radius:20px;background:#ecf0ed;color:#5d6e63;display:inline-flex;align-items:center;padding:7px 10px;white-space:nowrap;font-weight:800}.tag-amber{color:#986116;background:#fff3d9}.tag-green{color:#096e4b;background:#e2f7eb}.tag-red{color:#b13535;background:#fff1f0}.photo-area{width:100%;min-height:330px;border:1.5px dashed #c9dacf;background:#f0f6f1;border-radius:12px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:manipulation}.photo-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:35px;gap:8px}.photo-placeholder strong{font-size:15px;color:#465a4e}.photo-placeholder span{font-size:12px;color:#8fa399;max-width:260px;line-height:1.55}.big-camera{display:flex;align-items:center;justify-content:center;border-radius:17px;background:#dff1e6;color:#15805a;height:75px;width:75px;font-size:54px;margin-bottom:10px}.photo-area video,.photo-area canvas{max-width:100%;width:100%;height:auto;max-height:540px;object-fit:contain;display:block}.photo-area video{height:340px;object-fit:cover}.photo-chip{position:absolute;top:12px;right:12px;background:#143a2bd9;color:#fff;padding:7px 10px;font-size:11px;border-radius:8px;pointer-events:none}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:43px;border-radius:9px;padding:11px 12px;font-size:12.5px;font-weight:800;border:1px solid transparent;transition:filter .15s}.btn:not(:disabled):active{transform:scale(.99)}.btn-dark{background:#194b38;color:#fff}.btn-primary{background:#10855c;color:white}.btn-outline{border-color:#c9dfd1;color:#23654b;background:white}.btn-light{background:#eaf4ed;color:#216948}.btn-big{width:100%;margin-top:13px;min-height:50px;font-size:13px}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.camera-buttons{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.camera-buttons .btn{flex:1}.helper{font-size:11px!important;color:#88988e!important;line-height:1.6!important;margin:13px 0 0!important}.loading-area{margin-top:13px}.loading-area p{font-size:11px;color:#607a69;margin:7px 0}.meter{background:#dfeee5;height:7px;border-radius:9px;overflow:hidden}.meter>div{height:100%;width:0;background:#16a36c;transition:width .25s}.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 13px}.fields label,.manual-controls label{font-size:11px;color:#596c5d;font-weight:750;display:flex;flex-direction:column;gap:7px}.fields input,.fields select,.manual-controls select,.history-toolbar input{width:100%;font-size:12px;border:1px solid #dce5df;background:#fafdfa;border-radius:9px;padding:12px 11px;min-height:43px;outline-color:#5faf87;color:#244537}.kpi-main{background:linear-gradient(110deg,#e5f5ec,#f3fbf6);border:1px solid #d5ecdf;border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:20px 20px 17px;margin-bottom:18px}.kpi-label{font-size:10px;letter-spacing:1px;color:#579071;font-weight:800}.kpi-main strong{display:block;font-size:43px;letter-spacing:-2px;margin:4px 0 2px;color:#07563c}.kpi-main span{font-size:11px;color:#659078}.kpi-visual{width:63px;height:63px;border-radius:17px;background:#d3eedf;color:#05865a;display:grid;place-items:center;font-size:41px}.class-cards{display:flex;flex-direction:column;gap:9px}.class-card{display:flex;align-items:center;gap:11px;border:1px solid #edf1ed;border-radius:11px;padding:11px 12px}.color-dot{height:11px;width:11px;border-radius:4px;flex:0 0 11px}.class-info{flex:1;min-width:0}.class-info strong{font-size:12px;display:block}.class-info span{font-size:10px;color:#99a59c}.class-n{font-size:22px;font-weight:850;color:#1b4031;min-width:25px;text-align:right}.results-action{display:flex;gap:9px;margin-top:15px}.results-action .btn{flex:1}.manual-controls{margin-top:12px;padding:13px;background:#f3faf4;border:1px solid #dbe8dd;border-radius:10px;display:flex;flex-wrap:wrap;gap:10px;align-items:end}.manual-controls label{min-width:160px;flex:1}.manual-controls p{width:100%;margin:0;font-size:11px;color:#5b7b64}.detected-list{max-height:260px;overflow-y:auto;margin-top:13px}.detected-row{display:flex;align-items:center;gap:8px;font-size:11px;padding:7px 2px;border-bottom:1px solid #edf1ed}.detected-row .num{border-radius:5px;background:#e8f3ea;padding:5px 7px;font-weight:800}.detected-row select{flex:1;min-width:80px;border:1px solid #dce7df;border-radius:7px;background:#fff;padding:6px}.detected-row .score{color:#90a399;font-size:10px}.detected-row button{border:0;background:#ffeeee;color:#bd4b4b;padding:7px 10px;border-radius:7px}.compact{margin-top:10px}.small{min-height:35px}.history-toolbar{display:flex;gap:9px;align-items:center;margin-bottom:16px}.history-toolbar input{flex:1}.history-list{display:flex;flex-direction:column;gap:10px}.history-item{display:flex;gap:14px;padding:11px;border:1px solid #e6eee7;border-radius:12px;align-items:center}.history-thumb{width:82px;height:74px;object-fit:cover;border-radius:9px;background:#e8f1e9;flex-shrink:0}.history-text{flex:1;min-width:0}.history-text strong{font-size:13px;display:block}.history-text p{font-size:11px;color:#8a9c8f;margin:5px 0 7px;line-height:1.5}.history-text span{font-size:11px;color:#23785a;font-weight:800}.history-actions{display:flex;flex-direction:column;gap:6px}.history-actions button{border:0;border-radius:7px;padding:8px 9px;font-weight:700;background:#e7f3ea;color:#155a3f;font-size:11px}.history-actions button.danger{background:#fff0ee;color:#b44f46}.empty-state{text-align:center;padding:40px 5px;color:#8ea094;font-size:13px;line-height:1.7}.settings-row{padding:15px 0;border-bottom:1px solid #e9eee9;display:flex;gap:18px;justify-content:space-between;align-items:center}.settings-row:last-child{border:0}.settings-row strong{font-size:13px}.settings-row p{font-size:11px;line-height:1.7;color:#859587;margin:5px 0;max-width:610px}.settings-row>div:last-child{text-align:center;min-width:150px}.settings-row b{display:block;font-size:17px;color:#148459}.settings-row input[type=range]{width:155px;accent-color:#168a5a}.offline-status{border-radius:9px;background:#f2f7f3;color:#547463;padding:12px;font-size:12px;margin-top:16px;line-height:1.5}.guide{padding-left:21px;color:#667c6b;font-size:12px;line-height:1.9}.guide li{margin:6px 0}footer{font-size:10px;letter-spacing:.4px;color:#9ba99e;text-align:center;padding:32px 0 5px}.footer-dot{padding:0 6px}#toast{position:fixed;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:calc(100% - 40px);background:#143a2d;color:#fff;box-shadow:0 5px 28px #13352344;padding:13px 18px;border-radius:10px;font-size:12px;font-weight:750;z-index:1000;opacity:0;pointer-events:none;transition:opacity .2s}#toast.visible{opacity:1}@media(max-width:930px){.layout{grid-template-columns:1fr}.rightcol{order:1}}@media(max-width:520px){.topbar{padding:0 16px;height:68px}.brand strong{font-size:16px}.brand span{font-size:10px}.brand-icon{height:39px;width:39px}.connection{padding:7px 8px;font-size:10px}main{padding:22px 11px}.intro{padding:0 7px}.intro h1{font-size:28px}.tabs{justify-content:space-between;gap:3px}.tab{padding:12px 13px;font-size:12px;flex:1}.panel{padding:16px;border-radius:14px}.photo-area{min-height:265px}.photo-area video{height:290px}.panel-heading{margin-bottom:13px}.panel-heading h2{font-size:15px}.fields{gap:12px 9px}.history-item{gap:9px}.history-thumb{width:62px;height:68px}.history-actions{gap:5px}.settings-row{align-items:flex-start;flex-direction:column;gap:10px}.settings-row>div:last-child{text-align:left}.compact .btn{font-size:11px;padding:9px 6px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Live camera: canvas lines remain aligned with a cover-cropped video. */
.photo-area .live-overlay{position:absolute;left:0;top:0;width:100%;height:100%;max-height:none;display:block;pointer-events:none;object-fit:fill;z-index:5}
.photo-area .live-count{position:absolute;left:12px;bottom:12px;background:#0b533cdf;color:white;font-weight:850;font-size:12px;border-radius:8px;padding:9px 12px;z-index:2;pointer-events:none}
.photo-area .photo-chip{z-index:2}
.live-status{border-radius:9px;background:#e7f7ec;color:#0a7750;padding:11px 12px;font-weight:800;font-size:12px;margin:12px 0 0;line-height:1.5}
.live-status[data-kind=loading]{background:#fff5db;color:#806018}
.live-status[data-kind=error]{background:#ffece9;color:#ad3c30}
.live-status[data-kind=paused]{background:#e9eef1;color:#566c75}
#liveSpeed{background:#f8fcf9;border-radius:8px;border:1px solid #d6e6da;padding:10px;color:#124c36;max-width:100%;font-size:12px}
@media(max-width:520px){.camera-buttons .btn{flex:1 1 42%}}

.ai-error{margin-top:14px;border:1px solid #f4b7a9;border-left:4px solid #c84732;background:#fff5f2;padding:14px;border-radius:10px;color:#8c2d21;overflow-wrap:anywhere}
.ai-error p{font-size:13px;line-height:1.55;margin:8px 0 14px}
.ai-error[hidden]{display:none!important}

.live-metrics{font-size:11px;line-height:1.6;padding:10px 12px;margin:7px 0 0;border:1px solid #d8e6dc;border-radius:9px;color:#436650;background:#f6fbf8;word-break:break-word}


/* v2.5: immersive landscape camera with floating controls */
body.camera-fullscreen{overflow:hidden!important;overscroll-behavior:none!important;touch-action:manipulation}
body.camera-fullscreen #photoArea{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:0!important;max-height:none!important;margin:0!important;border:0!important;border-radius:0!important;z-index:950!important;background:#071a18!important;overflow:hidden!important;display:block!important;transform:none}
/* Some Android browsers refuse orientation.lock(). Rotate the CAMERA INTERFACE, not the photograph. */
body.camera-fullscreen.camera-rotated #photoArea{inset:auto!important;left:0!important;top:0!important;width:100dvh!important;height:100dvw!important;transform-origin:top left;transform:rotate(90deg) translateY(-100%)}
body.camera-fullscreen #cameraVideo{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;background:#04100c!important}
body.camera-fullscreen #liveOverlay{position:absolute!important;inset:0;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;z-index:3!important;pointer-events:none!important}
.camera-hud{position:absolute;inset:0;z-index:8;pointer-events:none;color:#fff;font-size:13px}
.camera-hud button,.camera-hud input,.camera-hud .camera-flyout{pointer-events:auto}
.camera-topbar{position:absolute;top:0;left:0;right:0;min-height:70px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 15px calc(16px + env(safe-area-inset-left,0px));background:linear-gradient(180deg,rgba(0,0,0,.75),transparent);pointer-events:none}
.camera-brand{display:flex;gap:10px;align-items:center;min-width:0;padding-top:3px}.camera-brand strong{font-size:clamp(11px,1.55vw,16px);letter-spacing:.5px;display:block;white-space:nowrap}.camera-brand small{display:block;margin-top:5px;color:#d6eee1;font-size:clamp(10px,1.2vw,12px);max-width:42vw;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.camera-rec-dot{background:#43ee8d;border:2px solid #d7ffe7;border-radius:50%;width:11px;height:11px;box-shadow:0 0 0 4px #2ef78b40;flex:none}
.camera-top-buttons{display:flex;gap:9px;pointer-events:auto}.cam-icon{height:42px;min-width:42px;padding:0 10px;border:1px solid #ffffff60;background:#11271fbf;border-radius:13px;color:#fff;font-size:20px;font-weight:800;backdrop-filter:blur(10px)}.cam-close{background:#9d372cdd}
.camera-summary{position:absolute;left:calc(16px + env(safe-area-inset-left,0px));top:clamp(75px,17%,115px);display:flex;flex-direction:column;gap:10px;align-items:flex-start;max-width:48%;pointer-events:none}
.camera-hud .live-count{position:static!important;display:inline-flex;align-items:baseline;min-height:52px;padding:10px 15px;color:#fff;background:#0b432fcf;border:1px solid #8ef4ba60;box-shadow:0 3px 18px #0007;border-radius:14px;font-size:clamp(14px,2.5vw,23px);font-weight:900;letter-spacing:.25px}
.camera-class-chips{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}.cam-class-chip{display:flex;align-items:center;gap:6px;border-radius:9px;background:#061a16c4;border:1px solid #ffffff34;padding:5px 8px;font-size:clamp(9px,1.2vw,12px);white-space:nowrap}.cam-class-chip i{width:9px;height:9px;display:block;border-radius:3px}.cam-class-chip b{font-size:1.15em}
.camera-flyout{position:absolute;right:calc(16px + env(safe-area-inset-right,0px));top:calc(62px + env(safe-area-inset-top,0px));width:min(290px,60%);max-height:calc(100% - 120px);overflow:auto;padding:15px;border-radius:15px;background:#0b2a23ee;border:1px solid #ffffff35;box-shadow:0 8px 35px #0008;backdrop-filter:blur(15px);font-size:12px;z-index:14}
.cam-flyout-title{font-size:13px;font-weight:850;margin-bottom:13px}.cam-slider-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;gap:10px}.cam-slider-label b{color:#78f4b5}.camera-flyout input[type=range]{width:100%;accent-color:#3ae999;margin:10px 0 12px;min-height:24px}.cam-option{display:block;width:100%;text-align:left;color:#fff;background:#ffffff18;border:1px solid #ffffff2b;border-radius:9px;padding:11px;margin-top:6px;font-weight:700;font-size:12px}.camera-flyout p{color:#d0e4d7;line-height:1.4;font-size:10px;margin:11px 0 0}
.camera-hud .live-status{position:absolute;left:50%;bottom:clamp(78px,17%,105px);transform:translateX(-50%);width:max-content;max-width:70%;text-align:center;margin:0;padding:6px 12px;background:#061f19dc!important;color:#e9fff1!important;border:1px solid #ffffff40;border-radius:20px;font-size:clamp(9px,1.2vw,12px);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 3px 16px #0005;pointer-events:none}
.camera-hud .live-status[data-kind=error]{color:#ffd9ca!important;border-color:#f0977c!important}
.camera-hud .live-status[data-kind=paused]{color:#ffe7b0!important}
.camera-buttons{position:absolute;bottom:calc(13px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:13px;margin:0;width:max-content;max-width:96%;pointer-events:auto}
.cam-action{height:clamp(42px,8vw,58px);border-radius:16px;border:1px solid #ffffff5a;padding:0 clamp(14px,2.8vw,26px);font-size:clamp(11px,1.55vw,15px);font-weight:900;white-space:nowrap;backdrop-filter:blur(9px);box-shadow:0 5px 22px #0005;display:flex;align-items:center;justify-content:center;gap:10px}
.cam-pause{color:#fff;background:#0c2c27d9}.cam-capture{color:#fff;background:#099e68;border-color:#b4f9d2}.shutter-mark{width:25px;height:25px;background:#fff;border:4px solid #eafff2;border-radius:50%;box-shadow:0 0 0 2px #176c51}
body.camera-fullscreen #toast{z-index:1100}
@media(max-width:760px) and (orientation:landscape){.camera-summary{top:72px}.cam-class-chip{padding:3px 6px}.camera-hud .live-count{min-height:42px;padding:6px 11px}.camera-topbar{padding-top:8px}.cam-icon{height:36px;min-width:36px;font-size:18px}.camera-hud .live-status{bottom:74px}}
@media(max-height:390px){.camera-summary{top:64px}.camera-class-chips{max-width:65vw}.camera-hud .live-status{bottom:70px}.camera-buttons{bottom:8px}.cam-action{height:42px}.camera-topbar{padding-top:6px}.cam-icon{height:34px;min-width:34px}}
/* v2.6: auto shutter and offline geospatial canvas */
.auto-camera-status{position:absolute;right:16px;top:clamp(78px,17%,115px);background:#0d664edc;border:1px solid #6af0b5a1;color:#fff;border-radius:11px;padding:8px 11px;font-size:clamp(9px,1.15vw,12px);font-weight:800;letter-spacing:.25px;box-shadow:0 3px 15px #0007;max-width:45%;text-align:right;pointer-events:none}
.gps-camera-status{position:absolute;right:16px;top:clamp(116px,25%,155px);background:#082b32d9;color:#c8ecff;border-radius:9px;padding:6px 9px;font-size:clamp(9px,1vw,11px);max-width:45%;text-align:right;pointer-events:none}
.cam-check,.auto-settings-check{display:flex;gap:8px;align-items:center;color:inherit;font-size:12px;font-weight:700;padding:9px 0}.cam-check input,.auto-settings-check input{accent-color:#26b86f;width:17px;height:17px}
.auto-settings-check{color:#155d43}
.photo-location{margin:10px 0;padding:12px 13px;border:1px solid #cfe7d8;background:#f1f9f3;border-radius:10px;color:#22644a;font-size:12px;font-weight:600;line-height:1.5}
.map-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.map-upload{cursor:pointer}.map-toolbar .btn{padding:9px 14px;min-height:38px;font-size:12px}
.map-status{background:#eaf5ee;border-radius:9px;color:#285b42;padding:10px 12px;font-size:12px;font-weight:650;margin-bottom:10px;line-height:1.5}
.map-canvas-wrap{position:relative;background:#102f25;min-height:470px;border-radius:14px;overflow:hidden;border:1px solid #6ea58a}
#blockMap{width:100%;height:470px;display:block;touch-action:none;cursor:grab}#blockMap:active{cursor:grabbing}
.map-controls{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:7px}.map-controls button{height:39px;width:39px;background:#e8f8ec;color:#10462c;border:1px solid #abd5bd;border-radius:10px;font-size:24px;font-weight:800;box-shadow:0 2px 6px #0016}
.map-legend{position:absolute;bottom:9px;left:11px;background:#031b17dc;color:white;font-size:11px;padding:8px 11px;border-radius:9px;pointer-events:none}
.map-info{font-size:12px;line-height:1.6;color:#2a604b;background:#f3f8f3;border-radius:10px;padding:11px;margin-top:12px}
@media(max-width:630px){.map-canvas-wrap{min-height:390px}#blockMap{height:390px}.map-toolbar .btn{flex:1;white-space:nowrap}.auto-camera-status{top:75px;font-size:10px}.gps-camera-status{top:112px}}
@media(max-height:390px){.auto-camera-status{top:57px}.gps-camera-status{top:90px}}

/* Peta blok TDK — pencarian cepat */
.map-search-toolbar{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}.map-search-toolbar input{flex:1 1 200px;min-width:0;border:1px solid #b2cec2;border-radius:10px;padding:11px 12px;font-size:14px}.map-search-toolbar .btn{min-height:40px}

/* 6-class model selector, consistent with the v2.7 floating camera menu */
.cam-model-select{width:100%;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:#133a32;color:#fff;font-size:13px;margin:4px 0 12px}
#detectorEngine{min-width:185px;max-width:100%;padding:10px 8px;border:1px solid #ccd9d3;border-radius:10px}

/* Hybrid class-6 review status; does not overlay the photo or modify original boxes. */
.hybrid-status{padding:10px 13px;margin:9px 0;border:1px solid #d6e1da;border-radius:10px;font-size:13px;line-height:1.5;background:#f5f9f7;color:#275345;overflow-wrap:anywhere}
.hybrid-status[data-kind="working"]{border-color:#c4d7ec;background:#eef6ff;color:#29507d}
.hybrid-status[data-kind="warning"]{border-color:#e9c987;background:#fff8e8;color:#734c1a}
.hybrid-status[data-kind="success"]{border-color:#9dd6b5;background:#eafaf0;color:#245f3d}

/* Capture-only box editing & zoom; camera livestream styles remain unchanged. */
#photoZoomToolbar[hidden],#photoZoomHint[hidden],#boxEditor[hidden],#previewCanvas[hidden],#cameraVideo[hidden]{display:none!important}
.photo-area:has(#previewCanvas:not([hidden])){touch-action:none;overscroll-behavior:contain}
.photo-area #previewCanvas:not([hidden]){width:auto;height:auto;max-width:100%;max-height:540px;display:block;flex:0 1 auto;object-fit:contain;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transform-origin:center center;cursor:grab;will-change:transform}
.photo-area #previewCanvas.photo-pan-mode{cursor:grab}
.photo-area #previewCanvas.photo-pan-mode:active{cursor:grabbing}
.photo-area.edit-armed #previewCanvas{cursor:zoom-in}
.photo-zoom-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9px;margin-top:11px;padding:10px 11px;border:1px solid #d0e6d9;background:#f6fbf7;border-radius:12px}
.photo-mode-switch,.photo-zoom-actions{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.photo-zoom-toolbar button{min-height:38px;border-radius:9px;border:1px solid #c5dacd;background:white;color:#255740;font-weight:800;padding:8px 11px;font-size:12px}
.photo-zoom-toolbar button.active{color:white;background:#126a4b;border-color:#126a4b}
.photo-zoom-actions button{font-size:17px;min-width:37px}
.photo-zoom-actions strong{min-width:54px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums;color:#24563f}
.photo-zoom-actions #photoZoomReset{font-size:12px}
.photo-zoom-hint{margin:9px 0 2px!important;color:#507965!important;font-size:12px!important;line-height:1.5!important}
.box-editor{position:absolute;left:10px;top:10px;z-index:9;width:min(290px,calc(100% - 20px));padding:12px 12px 10px;border-radius:13px;background:rgba(20,60,47,.96);backdrop-filter:blur(6px);color:#fff;border:1px solid #70ae8a;box-shadow:0 8px 24px #0d392d55}
.box-editor-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}
.box-editor-top strong{font-size:15px}
.box-editor-close{border:1px solid #ffffff50;color:#fff;background:#ffffff25;border-radius:8px;padding:7px 12px}
.box-editor-select{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;margin-bottom:11px}
.box-editor-select select{width:100%;height:42px;background:#fff;color:#113e2c;border-radius:9px;padding:8px 10px;border:1px solid #a8ddbb;font-size:13px}
.box-editor-flags{display:flex;flex-wrap:wrap;gap:8px}
.box-editor-flags label{display:flex;align-items:center;gap:8px;flex:1 1 160px;font-weight:700;font-size:12px;padding:10px;background:#ffffff1b;border:1px solid #ffffff2d;border-radius:9px}
.box-editor-flags input{width:19px;height:19px;flex-shrink:0;accent-color:#ba9dff}
.box-editor-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.box-editor-actions button{font-weight:800;font-size:12px;min-height:39px;padding:8px 11px;background:#e8f8ed;color:#14553a;border:1px solid #b9d9c4;border-radius:9px}
.box-editor-actions .danger{color:#a8282c;background:#fff0ee;border-color:#ffc8bf}
.box-editor-actions .done{color:white;background:#0d8d5d;border-color:#1ca36c}
.box-editor p{font-size:11px;line-height:1.6;color:#d3f0dd;margin:12px 0 0}
.quality-summary{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.quality-summary span{display:inline-flex;gap:6px;align-items:center;border-radius:8px;background:#f2eaff;color:#703398;font-size:11px;font-weight:800;padding:8px 9px}
.quality-summary b{font-size:16px}
.detected-row .choose-box{background:#e4f6eb;color:#136540;white-space:nowrap}
@media(max-width:520px){.photo-zoom-toolbar{gap:9px;padding:9px}.photo-mode-switch{width:100%;justify-content:space-between}.photo-mode-switch button{flex:1}.photo-zoom-actions{width:100%;justify-content:space-between}.box-editor{padding:11px}.box-editor-actions button{flex:1 1 43%}}

.photo-area .box-editor[hidden]{display:none!important}.photo-area .box-editor::after{content:'';position:absolute;left:28px;bottom:-10px;border-width:10px 9px 0 9px;border-style:solid;border-color:rgba(20,60,47,.96) transparent transparent transparent;}

/* v2.7 hybrid: the photo pans by default; only a selected rectangle moves. */
.photo-area.box-selected #previewCanvas{cursor:move}
.photo-gesture-label{font-size:11px;line-height:1.4;font-weight:750;color:#2e674b;flex:1}
.photo-zoom-toolbar{padding:7px 9px;gap:7px}
.photo-zoom-hint{font-size:11px!important}
.photo-area .box-editor{
 position:absolute;z-index:9;box-sizing:border-box;left:8px;top:8px;
 width:min(206px,calc(100% - 16px));padding:8px 9px 8px;
 border-radius:10px;background:rgba(20,53,42,.97);border:1px solid #85b89c;
 box-shadow:0 5px 18px #0d392d55;color:#fff;backdrop-filter:blur(4px);
}
.photo-area .box-editor::after{display:none}
.box-editor-top{margin:0 0 6px;gap:5px}
.box-editor-top strong{font-size:11px;line-height:1.1;letter-spacing:.1px}
.box-editor-close{padding:0;width:23px;height:23px;min-width:23px;min-height:23px;border-radius:5px;font-size:16px}
.box-category-mini{display:block;width:100%;height:32px;min-height:32px;background:white;color:#163d2c;border:0;border-radius:6px;padding:4px 5px;font-size:12px}
.box-editor-flags{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-top:6px}
.box-editor-flags label{display:flex;align-items:center;justify-content:flex-start;gap:4px;min-width:0;
 padding:4px 2px;font-size:10px;line-height:1.25;font-weight:650;border:0;background:transparent;white-space:nowrap;flex:auto}
.box-editor-flags input{width:15px;height:15px;margin:0;flex:0 0 15px}
.box-editor-actions{display:grid;grid-template-columns:30px 30px 1fr 33px;gap:4px;margin-top:6px}
.box-editor-actions button{min-height:29px;height:29px;padding:2px 3px;font-size:10px;border-radius:5px}
.box-editor-actions button:first-child,.box-editor-actions button:nth-child(2){font-size:17px}
@media(max-width:520px){.photo-area .box-editor{width:min(198px,calc(100% - 16px));padding:7px 8px}
 .box-editor-actions{display:grid;grid-template-columns:29px 29px 1fr 32px}
 .box-editor-actions button{flex:none;min-height:29px;height:29px}}

/* Mini tooltip consistently sized even with generic form rules */
.photo-area .box-editor{width:min(188px,calc(100% - 16px));padding:6px 7px}
.photo-area .box-editor-top{height:21px;min-height:21px;margin:0 0 4px}
.photo-area #boxCategorySelect.box-category-mini{display:block;box-sizing:border-box;height:28px;min-height:28px;max-height:28px;margin:0;padding:3px 5px;font-size:11px}
.photo-area .box-editor-flags{margin-top:3px;gap:2px}
.photo-area .box-editor-flags label{font-size:10px;padding:2px 0;min-height:18px}
.photo-area .box-editor-actions{margin-top:4px;grid-template-columns:28px 28px 1fr 28px;gap:3px}
.photo-area .box-editor-actions button{height:25px;min-height:25px;padding:0 2px;font-size:10px}
@media(max-width:520px){.photo-area .box-editor{width:min(180px,calc(100% - 16px));padding:6px 7px}
 .photo-area .box-editor-actions{grid-template-columns:28px 28px 1fr 28px}
 .photo-area .box-editor-actions button{height:25px;min-height:25px}}

/* Lightweight captured-photo editor: fixed-size readable tooltip (does NOT zoom with photo). */
.photo-area #previewCanvas{cursor:grab!important}
.photo-area #previewCanvas:active{cursor:grabbing!important}
.photo-area.box-selected #previewCanvas{cursor:grab!important}
.photo-zoom-toolbar .photo-gesture-label{font-size:11.5px;line-height:1.35;font-weight:700;flex:1;min-width:145px}
.photo-area #boxEditor.box-editor{width:min(210px,calc(100% - 14px));max-width:210px;padding:8px 10px;border-radius:10px;
 background:rgba(19,58,45,.97);box-shadow:0 5px 18px #081d1680;pointer-events:auto;touch-action:manipulation}
.photo-area #boxEditor .box-editor-top{height:24px;min-height:24px;margin-bottom:6px}
.photo-area #boxEditor .box-editor-top strong{font-size:12px;line-height:1.2;color:white}
.photo-area #boxEditor .box-editor-close{width:28px;height:28px;min-width:28px;min-height:28px;font-size:18px}
.photo-area #boxCategorySelect.box-category-mini{height:36px;min-height:36px;max-height:36px;font-size:12.5px;padding:5px 6px}
.photo-area #boxEditor .box-editor-flags{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.photo-area #boxEditor .box-editor-flags label{display:flex;align-items:center;gap:8px;font-size:12.5px;line-height:1.25;
 min-height:32px;padding:5px 3px;white-space:normal;cursor:pointer}
.photo-area #boxEditor .box-editor-flags input{width:18px;height:18px;flex:0 0 18px;accent-color:#8bf0b7}
.photo-area #boxEditor .box-editor-actions{display:none}
@media(max-width:520px){.photo-area #boxEditor.box-editor{width:min(205px,calc(100% - 14px));max-width:205px;padding:8px 10px}}

/* compact mutually exclusive quality options in the floating photo tooltip */
.photo-area #boxEditor .box-editor-flags{display:flex;flex-direction:column;gap:3px;margin-top:6px}
.photo-area #boxEditor .box-editor-flags label{font-size:12px;min-height:24px;display:flex;align-items:center;gap:8px;cursor:pointer}
.photo-area #boxEditor .box-editor-flags input[type="radio"]{appearance:auto;width:17px;height:17px;min-width:17px;margin:0;accent-color:#8bf0b7}
.photo-area #boxEditor.box-editor{width:min(212px,calc(100% - 14px));max-width:212px}
/* Process status remains visible between capture, review, and actual save. */
.process-progress{margin-top:10px;border-radius:10px;background:#f3f8f4;border:1px solid #d5e7d9;padding:11px 12px;color:#235c42}
.process-progress-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}
.process-progress-heading strong{font-size:11px;color:#527963;white-space:nowrap}
.process-progress-track,.process-overlay-track{height:7px;border-radius:30px;background:#dceae0;overflow:hidden;margin:8px 0 6px}
.process-progress-track span,.process-overlay-track i{display:block;background:#169968;height:100%;width:0;transition:width .23s ease;border-radius:inherit}
.process-progress small{display:block;font-size:11px;line-height:1.4;color:#6d7f73}
.process-progress[data-phase="ready"]{background:#f0f8fb;border-color:#d2e7f1}
.process-progress[data-phase="saved"]{background:#e9faef;border-color:#b8e5ca}
.process-progress[data-phase="error"]{background:#fff4f1;border-color:#f2c4bc}
.process-progress[data-phase="error"] .process-progress-track span{background:#d76951}
.process-overlay{position:fixed;inset:0;background:#0d251b88;z-index:15000;display:flex;justify-content:center;align-items:center;padding:18px;overscroll-behavior:contain}
.process-overlay[hidden]{display:none!important}
.process-overlay-card{width:min(310px,calc(100vw - 32px));padding:20px 20px 17px;border-radius:17px;background:#fff;color:#163f2e;box-shadow:0 12px 45px #0b281d66;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.process-overlay-card b{font-size:15px;line-height:1.4}
.process-overlay-card span{font-size:12px;font-weight:800;color:#1b8157}
.process-overlay-card small{font-size:12px;line-height:1.4;color:#6e8177;min-height:30px}
.process-overlay-track{width:100%;height:8px;margin:9px 0 3px}
.process-spinner{border:3px solid #e0f3e7;border-top-color:#1ca66a;width:33px;height:33px;border-radius:50%;animation:spinBD .9s linear infinite;margin-bottom:11px}
@keyframes spinBD{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.process-spinner{animation:none;border-top-color:#1ca66a}}

.build-marker{display:inline-block;vertical-align:middle;margin-left:5px;color:#127d57;background:#dff7e9;font-size:9px;border-radius:5px;letter-spacing:.2px;padding:3px 5px}

/* D: one mutually-exclusive quality selector, optimized for Android zoom. */
.photo-area #boxEditor{width:min(215px,calc(100% - 16px));padding:8px 9px 9px;}
.photo-area #boxEditor .bd-single-quality{display:flex;flex-direction:column;gap:4px;margin-top:6px;color:#e4fff0;font-weight:650;font-size:11px;}
.photo-area #boxEditor #boxQualityChoice{display:block;width:100%;height:36px;min-height:36px;max-height:36px;box-sizing:border-box;border:1px solid #a6d5bc;border-radius:7px;background:#fff;color:#143a2a;font-size:13px;padding:5px 7px;touch-action:manipulation;}
.photo-area #boxEditor .mini-note{font-size:11px;line-height:1.35;color:#d5fce6;margin-top:6px;}
#runtimeBuild{font-size:10px;font-weight:700;padding:5px 7px;}
@media(max-width:420px){#runtimeBuild{font-size:9px;padding:5px;}.photo-area #boxEditor{width:min(205px,calc(100% - 12px));}}

/* FIX E: interface capture minimal. All buttons remain in DOM for safe backwards compatibility. */
#photoZoomToolbar, #photoZoomHint, #galleryBtn, #cameraGalleryBtn, #analyzeBtn{display:none!important}
.button-grid.camera-only{grid-template-columns:minmax(0,1fr)}
.gps-block-status{display:block;line-height:1.45;font-size:11px;color:#25745e;font-weight:600;margin-top:2px;white-space:normal}
.gps-block-status.needs-review{color:#ad6b14}
.gps-block-status.error{color:#ae3e3e}

/* H: Android captured-photo interaction performance */
.photo-area #previewCanvas:not([hidden]){
 transform-origin:center center;
 will-change:transform;
 backface-visibility:hidden;
 -webkit-backface-visibility:hidden;
 contain:paint;
}
.photo-area:has(#previewCanvas:not([hidden])){overscroll-behavior:contain;touch-action:none}