@import "tailwindcss";

:root { --ink:#10232c; --muted:#637781; --line:#dbe6e9; --bg:#f3f7f8; --panel:#fff; --cyan:#08a9bb; --green:#20c779; --yellow:#efba28; --red:#ef5350; --navy:#0c2029; }
* { box-sizing:border-box; }
html { background:var(--bg); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,select,input { font:inherit; }
button { touch-action:manipulation; }
.capture-app { min-height:100vh; padding-bottom:28px; }
.app-header { min-height:74px; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { width:192px; height:auto; display:block; object-fit:contain; }
.brand div { display:flex; flex-direction:column; }
.brand strong { font-size:20px; letter-spacing:-.025em; }
.brand small { margin-top:2px; color:var(--muted); }
.header-pills { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.header-pills span { padding:7px 10px; color:#3d5963; font-size:11px; font-weight:700; border:1px solid var(--line); border-radius:99px; background:white; }
.header-pills .ok { color:#087647; border-color:#b8ead3; background:#eaf9f2; }
.header-pills .bad { color:#a62f31; border-color:#f2c4c4; background:#fff0f0; }
.header-pills .wait { color:#855f00; border-color:#eed98a; background:#fff9dd; }
.protocol-section,.process-section,.candidate-section,.result-section,.global-result-section { margin:18px 24px 0; padding:18px; border:1px solid var(--line); border-radius:15px; background:var(--panel); box-shadow:0 5px 22px rgba(12,32,41,.05); }
.section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:15px; }
.section-title h1,.section-title h2 { margin:3px 0 0; letter-spacing:-.035em; }
.section-title h1 { font-size:22px; }
.section-title h2 { font-size:20px; }
.section-title p { max-width:530px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; text-align:right; }
.eyebrow { color:#087e8d; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.mode-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
.scenario-group+.scenario-group { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.scenario-heading { margin-bottom:10px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.scenario-heading h2 { margin:2px 0 0; font-size:16px; letter-spacing:-.025em; }
.scenario-heading p { max-width:560px; margin:0; color:var(--muted); font-size:10px; line-height:1.45; text-align:right; }
.scenario-toggle { width:100%; margin:0 0 10px; padding:8px 9px; display:flex; align-items:center; gap:12px; color:inherit; text-align:left; border:1px solid transparent; border-radius:9px; background:transparent; cursor:pointer; }
.scenario-toggle:hover { border-color:#b9dfe4; background:#f3fbfc; }
.scenario-toggle .scenario-heading { min-width:0; flex:1; margin:0; }
.scenario-toggle-label { flex:0 0 auto; color:#087e8d; font-size:9px; font-weight:850; letter-spacing:.04em; }
.detail-scenario { padding:14px; border:1px solid #cbe7ea; border-radius:12px; background:#f5fcfd; }
.detail-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.mode-card { min-height:92px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--ink); border:1px solid #cad9de; border-radius:11px; background:#fbfdfe; cursor:pointer; transition:.18s ease; }
.mode-card:hover { transform:translateY(-1px); border-color:#72cbd5; }
.mode-card.active { color:#075b67; border-color:#17b7c7; background:#eaf9fb; box-shadow:0 0 0 3px rgba(8,169,187,.1); }
.mode-card.filled:not(.active) { border-color:#a8dfc5; background:#f0fbf6; }
.hand-symbol { font-size:24px; }
.mode-card strong { font-size:12px; }
.mode-card small { color:var(--muted); font-size:9px; }
.capture-layout { margin:18px 24px 0; display:grid; grid-template-columns:minmax(0,1.75fr) minmax(300px,.75fr); gap:18px; }
.camera-stage { min-height:620px; position:relative; overflow:hidden; border-radius:15px; background:radial-gradient(circle at 50% 42%,#263c47,#0b1d25 65%); box-shadow:0 10px 30px rgba(11,29,37,.2); scroll-margin-top:12px; }
.camera-stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#071218; }
.camera-empty { position:absolute; inset:0; z-index:8; padding:28px; display:grid; place-content:center; justify-items:center; color:#d9e5e8; text-align:center; background:radial-gradient(circle at 50% 42%,#263c47,#0b1d25 65%); }
.camera-empty>span { color:#5d818c; font-size:58px; }
.camera-empty strong { margin-top:8px; font-size:20px; }
.camera-empty p { max-width:480px; margin:6px 0 0; color:#a9bbc0; font-size:13px; line-height:1.5; }
.capture-guide { position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%); border:4px solid var(--red); border-radius:9px; box-shadow:0 0 0 1px rgba(0,0,0,.24); transition:border-color .16s,box-shadow .16s; }
.guide-slap { width:76%; height:76%; }
.guide-single { width:47%; height:63%; }
.capture-guide span { position:absolute; left:8px; top:8px; padding:5px 7px; color:white; font-size:10px; font-weight:800; letter-spacing:.12em; background:rgba(5,18,24,.66); border-radius:5px; }
.tone-yellow .capture-guide { border-color:var(--yellow); box-shadow:0 0 0 4px rgba(239,186,40,.1); }
.tone-green .capture-guide { border-color:var(--green); box-shadow:0 0 0 5px rgba(32,199,121,.14); }
.pulp-overlay { position:absolute; z-index:4; display:grid; place-items:center; border:2px solid #e8f6f7; border-radius:50%; background:rgba(239,186,40,.13); box-shadow:0 0 0 1px rgba(0,0,0,.2); pointer-events:none; }
.pulp-overlay.accepted { border-color:#5bf2a8; background:rgba(32,199,121,.29); }
.pulp-overlay span { display:inline-block; padding:2px 4px; color:white; font-size:8px; font-weight:800; text-shadow:0 1px 2px #000; background:rgba(0,0,0,.34); border-radius:3px; }
.focus-pulse { position:absolute; z-index:15; width:62px; height:62px; transform:translate(-50%,-50%); border:2px solid #7ff7ff; border-radius:9px; box-shadow:0 0 0 2px rgba(0,0,0,.28),0 0 18px rgba(127,247,255,.48); pointer-events:none; animation:focus-pulse .82s ease-out forwards; }
.focus-pulse::before,.focus-pulse::after { content:""; position:absolute; background:#7ff7ff; }
.focus-pulse::before { left:50%; top:-8px; bottom:-8px; width:1px; transform:translateX(-50%); }
.focus-pulse::after { top:50%; left:-8px; right:-8px; height:1px; transform:translateY(-50%); }
@keyframes focus-pulse { 0% { opacity:0; scale:1.25; } 20% { opacity:1; } 100% { opacity:.35; scale:.86; } }
.quality-ruler { position:absolute; z-index:5; left:15px; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:7px; color:white; }
.ruler-track { width:13px; height:210px; position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.42); border-radius:8px; background:linear-gradient(to top,rgba(239,83,80,.4),rgba(239,186,40,.35) 55%,rgba(32,199,121,.35)); }
.ruler-track i { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(to top,var(--red),var(--yellow) 55%,var(--green)); transition:height .16s linear; }
.quality-ruler strong { min-width:24px; font-size:11px; }
.capture-heading { position:absolute; z-index:5; top:16px; left:50%; transform:translateX(-50%); padding:8px 12px; display:flex; flex-direction:column; align-items:center; color:white; background:rgba(4,17,23,.7); border:1px solid rgba(255,255,255,.2); border-radius:9px; backdrop-filter:blur(8px); }
.capture-heading strong { font-size:13px; }
.capture-heading span { margin-top:2px; color:#b8cbd0; font-size:10px; }
.calibration-banner { position:absolute; z-index:12; inset:0; display:grid; place-content:center; justify-items:center; color:white; text-align:center; background:rgba(4,17,23,.62); backdrop-filter:blur(2px); pointer-events:none; }
.calibration-banner strong { padding:8px 13px; color:#332500; font-size:17px; background:#ffd859; border-radius:8px; }
.calibration-banner span { margin-top:9px; padding:6px 9px; font-size:11px; background:rgba(0,0,0,.55); border-radius:6px; }
.camera-feedback { position:absolute; z-index:6; left:50%; bottom:18px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 110px); padding:10px 14px; display:flex; align-items:center; gap:9px; color:white; font-size:12px; text-align:center; background:rgba(4,17,23,.8); border:1px solid rgba(255,255,255,.2); border-radius:9px; backdrop-filter:blur(8px); }
.camera-feedback i { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--red); }
.tone-yellow .camera-feedback i { background:var(--yellow); }
.tone-green .camera-feedback i { background:var(--green); }
.control-panel { padding:18px; border:1px solid var(--line); border-radius:15px; background:white; box-shadow:0 5px 22px rgba(12,32,41,.06); }
.panel-heading h2 { margin:3px 0 0; font-size:19px; letter-spacing:-.03em; }
.panel-heading p { margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.target-list { margin-top:15px; display:grid; gap:7px; }
.target-row { padding:9px 10px; display:flex; gap:9px; align-items:center; color:#667a83; border:1px solid #e1e9ec; border-radius:9px; background:#f9fbfc; }
.target-row>span { width:23px; height:23px; display:grid; place-items:center; font-weight:800; border-radius:50%; background:#e9eff1; }
.target-row div { display:flex; flex-direction:column; }
.target-row strong { font-size:12px; }
.target-row small { margin-top:2px; font-size:9px; }
.target-row.accepted { color:#087346; border-color:#bcebd5; background:#ecfaf3; }
.target-row.accepted>span { color:white; background:var(--green); }
.capture-guidance-card { margin:12px 0 0; padding:12px; border:1px solid #d8e5e9; border-radius:10px; background:#fff; box-shadow:0 3px 12px rgba(22,52,64,.045); }
.guidance-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.guidance-heading strong { color:#20353d; font-size:11px; }
.guidance-heading small { color:#78909a; font-size:8px; line-height:1.4; text-align:right; }
.guidance-grid { margin-top:9px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.guidance-item { min-width:0; padding:8px; display:grid; grid-template-columns:8px minmax(0,1fr); column-gap:7px; row-gap:2px; border:1px solid #e0e9ec; border-radius:8px; background:#fbfdfe; }
.guidance-item .guidance-dot { width:8px; height:8px; margin-top:3px; border-radius:50%; background:#a7b6bc; box-shadow:0 0 0 3px rgba(167,182,188,.14); }
.guidance-item strong { min-width:0; color:#28414a; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.guidance-item span:not(.guidance-dot) { grid-column:2; color:#6f858e; font-size:8px; line-height:1.35; }
.guidance-item.good { border-color:#b7dfca; background:#f3fbf7; }
.guidance-item.good .guidance-dot { background:#1f9a62; box-shadow:0 0 0 3px rgba(31,154,98,.13); }
.guidance-item.warning { border-color:#ead69d; background:#fffaf0; }
.guidance-item.warning .guidance-dot { background:#d69b1e; box-shadow:0 0 0 3px rgba(214,155,30,.14); }
.guidance-item.bad { border-color:#ebc0bd; background:#fff6f5; }
.guidance-item.bad .guidance-dot { background:#d7584f; box-shadow:0 0 0 3px rgba(215,88,79,.13); }
.guidance-priority { margin-top:8px; padding:8px 9px; display:flex; gap:7px; align-items:flex-start; color:#415b65; font-size:9px; line-height:1.45; border-radius:7px; background:#f2f7f8; }
.guidance-priority b { color:#0d7481; flex:0 0 auto; }
.live-diagnostics { margin:14px 0 0; }
.live-diagnostics div { padding:8px 0; display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid #edf2f4; font-size:11px; }
.live-diagnostics dt { color:var(--muted); }
.live-diagnostics dd { margin:0; font-weight:750; text-align:right; }
.text-red { color:var(--red); }.text-yellow { color:#bb8500; }.text-green { color:#0a9b5c; }
.advanced-diagnostics { margin-top:13px; padding:11px; color:#d8e9ed; border:1px solid #254953; border-radius:10px; background:#0b2029; }
.diagnostic-title { display:flex; justify-content:space-between; gap:8px; align-items:baseline; }
.diagnostic-title strong { font-size:11px; }.diagnostic-title small { color:#86a3ab; font-size:8px; }
.advanced-diagnostics>p { margin:7px 0 0; color:#b9cdd2; font-size:9px; line-height:1.45; }
.advanced-diagnostics>.diagnostic-note { padding:6px 7px; color:#072d36; font-weight:750; border-radius:6px; background:#bff7fb; }
.diagnostic-legend { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; color:#a9bec4; font-size:8px; }
.diagnostic-legend span::before { content:""; width:8px; height:8px; margin-right:4px; display:inline-block; vertical-align:-1px; border:2px solid; }
.diagnostic-legend .legend-guide::before { border-color:#ffd94a; }.diagnostic-legend .legend-scan::before { border-color:#42e8ff; }.diagnostic-legend .legend-band::before { border-color:#2bff91; }
.diagnostic-visuals { margin-top:8px; display:grid; grid-template-columns:1fr 1fr .72fr; gap:5px; }
.diagnostic-visuals figure { min-width:0; margin:0; overflow:hidden; border:1px solid #294852; border-radius:6px; background:#061116; }
.diagnostic-visuals canvas { width:100%; height:150px; display:block; object-fit:contain; image-rendering:auto; }
.diagnostic-visuals figcaption { padding:4px; color:#8faab1; font-size:7px; text-align:center; border-top:1px solid #294852; }
.diagnostic-details { margin:7px 0 0; }
.diagnostic-details div { padding:4px 0; display:flex; justify-content:space-between; gap:8px; color:#b4c9ce; font-size:8px; border-bottom:1px solid #193640; }
.diagnostic-details dd { margin:0; color:white; font-weight:750; text-align:right; }
.error-box { margin-top:10px; padding:9px; color:#983939; font-size:10px; border:1px solid #efc3c3; border-radius:8px; background:#fff1f1; overflow-wrap:anywhere; }
.capture-actions { margin-top:15px; display:grid; gap:8px; }
.start-button,.stop-button,.outline-button { min-height:43px; padding:9px 12px; border-radius:8px; font-weight:750; cursor:pointer; }
.start-button { color:white; border:1px solid #078b50; background:linear-gradient(135deg,#22b66d,#078d50); }
.stop-button { color:white; border:1px solid #ab3e3e; background:#c64b4b; }
.outline-button { color:#28515c; border:1px solid #b9ccd2; background:white; }
.diagnostic-button { color:#075d68; border-color:#75ccd5; background:#ebfbfd; }
.trace-button { color:#663f00; border-color:#e0b550; background:#fff8df; }
.trace-button.recording { color:#9f2525; border-color:#ed7777; background:#fff0f0; animation:trace-recording 1.1s ease-in-out infinite; }
@keyframes trace-recording { 50% { box-shadow:0 0 0 4px rgba(239,83,80,.13); } }
button:disabled { opacity:.5; cursor:not-allowed; }
.camera-select { margin-top:12px; display:grid; gap:5px; color:var(--muted); font-size:10px; }
.camera-select select { width:100%; padding:9px; color:var(--ink); border:1px solid #cbdadd; border-radius:8px; background:white; }
.process-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.process-grid article { padding:14px; border:1px solid #dfe8eb; border-radius:10px; background:#fbfdfe; }
.process-grid article>span { color:var(--cyan); font-size:10px; font-weight:850; }
.process-grid strong { margin-top:6px; display:block; font-size:13px; }
.process-grid p { margin:5px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.candidate-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.candidate-card { min-height:170px; overflow:hidden; border:1px solid #dce6e9; border-radius:11px; background:#f9fbfc; }
.candidate-card.winner { border-color:var(--green); box-shadow:0 0 0 3px rgba(32,199,121,.12); }
.candidate-thumbs { height:125px; display:flex; overflow:hidden; background:#13262f; }
.candidate-thumbs img { min-width:0; flex:1; object-fit:cover; border-right:1px solid rgba(255,255,255,.2); }
.candidate-card>div:last-child:not(.empty-candidate) { padding:9px 11px; display:flex; justify-content:space-between; align-items:center; }
.candidate-card strong { font-size:12px; }
.candidate-card small { color:var(--muted); font-size:9px; }
.empty-candidate { height:170px; display:grid; place-content:center; justify-items:center; color:#8ea0a8; }
.empty-candidate span { font-size:28px; }.empty-candidate strong { margin-top:5px; }
.result-section { opacity:.82; }
.result-section.visible { opacity:1; border-color:#bde7d4; }
.result-empty { min-height:160px; display:grid; place-content:center; justify-items:center; gap:8px; color:#81939b; text-align:center; border:1px dashed #ccdadd; border-radius:10px; }
.result-empty span { font-size:34px; }
.finger-result-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.finger-result-card { overflow:hidden; border:1px solid #dce6e9; border-radius:11px; background:#fbfdfe; }
.result-images { height:245px; display:grid; grid-template-columns:1fr 1fr; background:#14262e; }
.result-images img { width:100%; height:100%; object-fit:cover; }
.processing-placeholder { height:100%; min-height:100%; padding:14px 12px; display:grid; place-content:center; justify-items:center; gap:7px; color:#28414a; text-align:center; background:#fbfdfe; }
.processing-placeholder.compact { padding:10px 8px; gap:5px; }
.processing-icon { width:44px; height:44px; display:grid; place-items:center; font-size:26px; border-radius:999px; background:#eef5f7; animation:placeholder-pulse 1.15s ease-in-out infinite; }
.processing-placeholder.compact .processing-icon { width:34px; height:34px; font-size:21px; }
.processing-placeholder strong { font-size:12px; font-weight:800; color:#20353d; }
.processing-placeholder small { font-size:9px; line-height:1.45; color:#6b848d; }
@keyframes placeholder-pulse { 0%,100%{ transform:scale(1); opacity:.72; } 50%{ transform:scale(1.06); opacity:1; } }
.result-copy { padding:12px; }.result-copy h3 { margin:0; font-size:15px; }
.result-copy dl { margin:8px 0 0; }
.result-copy dl div { padding:5px 0; display:flex; justify-content:space-between; gap:10px; border-bottom:1px solid #e8eef0; font-size:10px; }
.result-copy dt { color:var(--muted); }.result-copy dd { margin:0; font-weight:750; }
.result-warning { margin-top:12px; padding:12px; color:#705a16; font-size:11px; line-height:1.5; border:1px solid #ead995; border-radius:9px; background:#fff9e4; }
.detail-apply { margin-top:12px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid #9edfc1; border-radius:10px; background:#effbf5; }
.detail-apply>div,.global-actions>div { display:flex; flex-direction:column; gap:3px; }
.detail-apply strong,.global-actions strong { font-size:12px; }.detail-apply span,.global-actions span { color:var(--muted); font-size:9px; line-height:1.45; }
.global-result-section { border-color:#b6dfd0; background:linear-gradient(180deg,#fff,#f6fcf9); }
.global-result-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.global-finger-card { min-height:150px; padding:10px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:8px; color:#80929a; text-align:center; border:1px dashed #c8d7dc; border-radius:10px; background:#fbfdfe; }
.global-finger-card>span { font-size:25px; }.global-finger-card div { display:flex; flex-direction:column; gap:2px; }.global-finger-card strong { color:var(--ink); font-size:11px; }.global-finger-card small { font-size:8px; }
.global-finger-card.filled { padding:0; overflow:hidden; justify-content:flex-start; color:#16734a; border-style:solid; border-color:#a8dfc5; background:white; }
.global-finger-card .global-finger-images { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:0; padding:0; }
.global-finger-images figure { min-width:0; margin:0; position:relative; overflow:hidden; background:#10232c; }
.global-finger-images figure .processing-placeholder { min-height:150px; }
.global-finger-images figure+figure { border-left:1px solid rgba(255,255,255,.32); }
.global-finger-images img { width:100%; height:168px; display:block; object-fit:cover; background:#10232c; }
.global-finger-images figcaption { position:absolute; left:6px; bottom:6px; padding:3px 5px; color:white; font-size:8px; font-weight:800; border-radius:4px; background:rgba(5,18,24,.74); }
.global-finger-card.filled .global-finger-copy { width:100%; padding:8px 9px; }
.global-actions { margin-top:12px; padding-top:12px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid #d9ebe3; }
.enrollment-panel { margin-top:14px; padding:14px; border:1px solid #b9d9e0; border-radius:11px; background:#f4fafb; }
.enrollment-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.enrollment-heading h3 { margin:3px 0 0; font-size:15px; }.enrollment-heading p { max-width:540px; margin:0; color:var(--muted); font-size:9px; line-height:1.5; text-align:right; }
.enrollment-fields { margin-top:12px; display:grid; grid-template-columns:minmax(180px,.65fr) minmax(280px,1.35fr); gap:10px; }
.enrollment-fields label { display:grid; gap:5px; color:#45616b; font-size:9px; font-weight:750; }
.enrollment-fields input { width:100%; min-height:42px; padding:9px 10px; color:var(--ink); border:1px solid #b9ccd2; border-radius:8px; background:white; outline:none; }
.enrollment-fields input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(8,169,187,.10); }
.enrollment-submit { margin-top:11px; padding-top:11px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid #d4e7ea; }
.enrollment-submit>div { display:flex; flex-direction:column; gap:4px; }.enrollment-submit strong { font-size:10px; overflow-wrap:anywhere; }.enrollment-submit span { color:var(--muted); font-size:8px; line-height:1.45; }
footer { margin:18px 24px 0; padding:13px 16px; display:flex; gap:10px; color:#5b6e77; font-size:10px; border:1px solid var(--line); border-radius:10px; background:white; }
footer strong { color:#8b6500; flex:0 0 auto; }
.dialog-backdrop { position:fixed; inset:0; z-index:60; padding:20px; display:grid; place-items:center; background:rgba(5,20,27,.72); backdrop-filter:blur(7px); }
.missing-dialog { width:min(430px,100%); padding:22px; border-radius:15px; background:white; box-shadow:0 25px 70px rgba(0,0,0,.3); }
.missing-dialog h2 { margin:4px 0 0; font-size:21px; }.missing-dialog>p { margin:6px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.missing-options { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.missing-options label { padding:10px; display:flex; align-items:center; gap:8px; font-size:12px; border:1px solid #dce6e9; border-radius:8px; }
.dialog-actions { margin-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:9px; }

@media (max-width:980px) {
  .mode-grid { grid-template-columns:repeat(3,1fr); }
  .detail-grid { grid-template-columns:repeat(5,1fr); }
  .capture-layout { grid-template-columns:1fr; }
  .camera-stage { min-height:68vh; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px) {
  .app-header { padding:10px 12px; position:static; }.brand strong { font-size:16px; }.brand small { font-size:9px; }.brand-logo { width:132px; }.header-pills .version-pill { display:inline-flex; }
  .protocol-section,.process-section,.candidate-section,.result-section,.global-result-section { margin:12px 10px 0; padding:13px; }
  .capture-layout { margin:12px 10px 0; gap:12px; }
  .section-title { align-items:flex-start; flex-direction:column; gap:5px; }.section-title p { text-align:left; }
  .section-title h1 { font-size:19px; }.section-title h2 { font-size:18px; }
  .scenario-heading { align-items:flex-start; flex-direction:column; gap:4px; }.scenario-heading p { text-align:left; }.scenario-toggle { align-items:flex-start; padding:7px 5px; }.scenario-toggle-label { padding-top:2px; }.detail-scenario { padding:10px; }
  .mode-grid { grid-template-columns:repeat(3,1fr); gap:6px; }.detail-grid { grid-template-columns:repeat(2,1fr); }.mode-card { min-height:78px; padding:8px 4px; }.mode-card small { display:none; }
  .camera-stage { min-height:72vh; border-radius:12px; }.guide-slap { width:86%; height:80%; }.guide-single { width:61%; height:63%; }
  .capture-heading { top:10px; }.quality-ruler { left:7px; }.ruler-track { height:155px; width:10px; }.camera-feedback { bottom:10px; max-width:calc(100% - 36px); font-size:11px; }
  .candidate-grid { grid-template-columns:1fr; }.candidate-card { min-height:145px; }.candidate-thumbs { height:108px; }.empty-candidate { height:145px; }
  .process-grid { grid-template-columns:1fr 1fr; }.finger-result-grid { grid-template-columns:1fr; }
  .detail-apply,.global-actions,.enrollment-heading,.enrollment-submit { align-items:stretch; flex-direction:column; }.global-result-grid { grid-template-columns:1fr; }.global-finger-card { min-height:128px; }.global-finger-images img { height:150px; }.enrollment-heading p { text-align:left; }.enrollment-fields { grid-template-columns:1fr; }
  footer { margin:12px 10px 0; flex-direction:column; }
}

[hidden]{display:none!important}.overlay-layer,.focus-layer{position:absolute;inset:0;z-index:4;pointer-events:none}.focus-layer{z-index:15}.capture-heading b{font-weight:inherit}.vanilla-build{font-variant-numeric:tabular-nums}


/* CoreIDX v37 — ajustements fonctionnels sans couche visuelle lourde. */
@media (max-width:620px) {
  .brand-copy { display:none; }
  .brand { justify-content:center; }
  .app-header { flex-direction:column; align-items:center; gap:8px; }
  .header-pills { width:100%; justify-content:center; }
}

/* CoreIDX v39 — la version reste visible sur mobile. */
.header-pills .version-pill{font-variant-numeric:tabular-nums;font-weight:850}
@media(max-width:620px){.header-pills .version-pill{display:inline-flex!important}}

@media(max-width:420px){.guidance-grid{grid-template-columns:1fr 1fr}.guidance-heading{flex-direction:column}.guidance-heading small{text-align:left}}

/* CoreIDX v44 — la normalisation reste un post-traitement sans couche visuelle lourde. */