:root{--bg:#071626;--panel:#f7fbff;--ink:#06162b;--muted:#4c6078;--line:#cfe0ef;--blue:#12aee8;--blue2:#1f6df2;--green:#27c46b;--red:#d94848}
*{box-sizing:border-box} body{margin:0;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#061221,#0c263f);color:var(--ink)}
.app{width:min(1500px,94vw);margin:28px auto}.top{background:#0b2036;color:#fff;border:1px solid #24465f;border-radius:22px;padding:24px 28px;display:flex;justify-content:space-between;gap:20px;align-items:flex-start;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.top h1{margin:0 0 8px;font-size:30px}.top p{margin:0;color:#c9d8e7}.version{background:#102f4b;color:#9fe8ff;border:1px solid #2e668a;padding:8px 12px;border-radius:999px;font-weight:bold}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;margin-top:22px;padding:22px;box-shadow:0 12px 35px rgba(0,0,0,.18)}.panel h2{margin:0 0 16px}
.scan-row{display:grid;grid-template-columns:2fr .5fr .5fr auto;gap:14px;align-items:end}label{display:block;font-weight:bold;color:#08213a}input{width:100%;margin-top:6px;padding:12px 13px;border:1px solid #bcd2e4;border-radius:10px;background:#fff;font-size:15px}
button{border:0;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#00172a;font-weight:bold;padding:13px 18px;cursor:pointer;min-height:44px}button.secondary{background:#e9f4fc;border:1px solid #bdd7ea;color:#08213a}.hint{color:var(--muted)}.status{margin-top:12px;color:#173d5c;font-weight:bold}
.table-head{display:flex;justify-content:space-between;align-items:center;gap:16px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}th,td{text-align:left;border-bottom:1px solid #e2edf6;padding:10px 12px;font-size:14px;white-space:nowrap}th{background:#eaf5fc;color:#074064}.empty{text-align:center;color:#687b90;padding:28px}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:bold;font-size:12px}.ok{background:#dff8e9;color:#106d39}.no{background:#f7e7e7;color:#8a2424}.maybe{background:#fff1c7;color:#755800}.action-btn{padding:8px 10px;min-height:32px;border-radius:9px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;padding:20px}.hidden{display:none}.modal-card{width:min(900px,96vw);background:#fff;border-radius:20px;padding:24px;position:relative;border:1px solid #cfe0ef;box-shadow:0 25px 80px rgba(0,0,0,.38)}.close{position:absolute;right:16px;top:12px;background:#eef6fb;color:#092238;min-height:auto;padding:6px 11px;font-size:24px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.test-output{margin-top:16px;background:#071626;color:#d9f2ff;border-radius:12px;padding:14px;min-height:70px;white-space:pre-wrap}.preview-note{margin-top:14px;color:#4c6078;background:#f2f8fc;border:1px solid #d6e8f4;border-radius:12px;padding:12px}.device-line{color:#385670;font-weight:bold}
@media(max-width:800px){.scan-row,.grid{grid-template-columns:1fr}.top{flex-direction:column}}


/* v0.8.4 progressive scan status */
.scan-active-progress{
    display:grid;
    grid-template-columns:1fr minmax(260px,380px);
    gap:18px;
    align-items:center;
}

.scan-small{
    margin-top:6px;
    color:#244d70;
    font-size:13px;
}

.scan-progress-wrap{
    display:grid;
    gap:6px;
}

.scan-progress-label{
    text-align:right;
    font-weight:bold;
    color:#0a4773;
    font-size:13px;
}

.scan-track{
    position:relative;
    overflow:hidden;
    height:12px;
    border-radius:999px;
    background:#d8ecfb;
    border:1px solid #abd1ee;
}

.scan-track span{
    position:absolute;
    top:0;
    left:-30%;
    width:30%;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
    animation:scanGlow 1.35s linear infinite;
    z-index:2;
}

.scan-track em{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    display:block;
    border-radius:999px;
    background:linear-gradient(90deg,#12aee8,#1f6df2);
    opacity:.35;
    transition:width .25s ease;
}

@keyframes scanGlow{
    from{left:-30%;}
    to{left:100%;}
}

#deleteSavedCameraBtn{
    background:#ffe8e8 !important;
    border:1px solid #efb2b2 !important;
    color:#8d1616 !important;
}

.hidden{
    display:none !important;
}

button.disabled-save,
button:disabled.disabled-save{
    opacity:.45;
    cursor:not-allowed;
    filter:grayscale(.35);
}

@media(max-width:900px){
    .scan-active-progress{
        grid-template-columns:1fr;
    }

    .scan-progress-label{
        text-align:left;
    }
}


.snapshot-output{
    margin-top:14px;
}

.snapshot-card{
    border:1px solid #b9d8ee;
    background:#f1f8fd;
    border-radius:14px;
    padding:12px;
}

.snapshot-card strong{
    display:block;
    margin-bottom:4px;
    color:#073a5d;
}

.snapshot-note{
    color:#42617c;
    font-size:13px;
    margin-bottom:10px;
}

.snapshot-card img{
    display:block;
    width:100%;
    max-height:360px;
    object-fit:contain;
    background:#071827;
    border-radius:10px;
    border:1px solid #d5e7f4;
}


/* v0.9.1 modal usability fix */
.modal{
    position:fixed !important;
    inset:0 !important;
    z-index:9999 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:24px 16px !important;
    align-items:flex-start !important;
}

.modal.hidden{
    display:none !important;
}

.modal-card{
    position:relative !important;
    width:min(960px, calc(100vw - 32px)) !important;
    max-height:calc(100vh - 48px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    margin:0 auto !important;
    padding:24px !important;
    box-sizing:border-box !important;
}

.modal-card .close,
.close{
    position:sticky !important;
    top:0 !important;
    float:right !important;
    z-index:10001 !important;
    margin-left:auto !important;
}

.test-output{
    max-height:230px !important;
    overflow:auto !important;
    white-space:pre-wrap !important;
    word-break:break-word !important;
}

.snapshot-output{
    max-height:420px !important;
    overflow:auto !important;
}

.snapshot-card img{
    max-height:300px !important;
}

@media(max-height:700px){
    .modal{
        padding:10px !important;
    }

    .modal-card{
        max-height:calc(100vh - 20px) !important;
        padding:18px !important;
    }

    .test-output{
        max-height:170px !important;
    }

    .snapshot-card img{
        max-height:220px !important;
    }
}


.credential-memory-note{
    display:block;
    margin-top:6px;
    color:#44627b;
    font-size:12px;
    font-weight:400;
}


.auto-probe-output{
    margin-top:14px;
}

.auto-probe-card{
    border:1px solid #b9d8ee;
    background:#f1f8fd;
    border-radius:14px;
    padding:12px;
    max-height:280px;
    overflow:auto;
}

.auto-probe-card.success{
    border-color:#9ad7ae;
    background:#effbf3;
}

.auto-probe-card strong{
    display:block;
    margin-bottom:6px;
    color:#073a5d;
}

.auto-probe-card code{
    display:block;
    white-space:pre-wrap;
    word-break:break-word;
    color:#073a5d;
    background:#fff;
    border:1px solid #d5e7f4;
    border-radius:8px;
    padding:8px;
    margin-top:6px;
}

.auto-probe-row{
    border-top:1px solid #d5e7f4;
    padding:7px 0;
}

.auto-probe-row span{
    display:block;
    font-weight:700;
    color:#073a5d;
}


.auto-probe-running-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.auto-probe-current-path{
    flex:0 0 auto;
    font-size:13px;
    color:#42617c;
    background:#ffffff;
    border:1px solid #d5e7f4;
    border-radius:999px;
    padding:7px 12px;
    white-space:nowrap;
}

@media(max-width:720px){
    .auto-probe-running-row{
        align-items:flex-start;
        flex-direction:column;
    }

    .auto-probe-current-path{
        white-space:normal;
    }
}

.auto-probe-divider{
    height:1px;
    background:#cfe1ef;
    margin:10px 0;
}


/* v0.9.19 preview/save polish */
.snapshot-success{
    border-left:4px solid #1fa85b;
}

.snapshot-failed{
    border-left:4px solid #c94848;
}

.snapshot-url{
    margin:8px 0 10px;
    display:grid;
    gap:4px;
}

.snapshot-url span{
    font-size:12px;
    font-weight:700;
    color:#355a76;
}

.snapshot-url code{
    display:block;
    padding:8px 10px;
    border:1px solid #c8dff0;
    border-radius:8px;
    background:#ffffff;
    color:#063555;
    white-space:normal;
    word-break:break-all;
}

#saveConfiguredBtn{
    min-width:150px;
}

#deleteSavedCameraBtn{
    background:#ffe8e8 !important;
    border:1px solid #efb2b2 !important;
    color:#8d1616 !important;
}


/* v0.9.21 Auto Find path visibility */
.auto-probe-current-path{
    max-width:360px;
    white-space:normal !important;
    overflow-wrap:anywhere;
    word-break:break-word;
    text-align:right;
    font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size:12px;
}


/* v0.9.22 diagnostics and snapshot polish */
.tiny-tool{
    font-size:12px;
    padding:8px 10px;
}

.copy-verified-btn{
    margin-top:6px;
    width:max-content;
}

.snapshot-success img{
    border:1px solid #bcd8ea;
    background:#111;
}

.auto-probe-card strong{
    letter-spacing:.01em;
}


/* v0.9.23 camera metadata polish */
#deviceInfoBtn{
    min-width:120px;
}

.auto-probe-row span{
    min-width:110px;
}


/* v0.9.25 friendly camera-info wording */
.info-card{
    border-left:4px solid #4d8fc8;
}


/* v0.9.26 simplified Camera Info message */
.simple-info-card{
    padding:16px 18px;
}

.simple-info-card .snapshot-note{
    margin-top:6px;
}


/* v0.9.27 action hierarchy polish */
.modal-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:12px;
    margin-bottom:14px;
}

.modal-actions .btn{
    min-width:150px;
}

.modal-actions .btn-primary{
    box-shadow:0 1px 3px rgba(0,0,0,0.12);
}

.modal-actions .btn-secondary{
    opacity:0.92;
}

.status-output:empty{
    display:none !important;
}

/* softer utility button appearance */
.btn-secondary{
    background:#edf4fa;
    border:1px solid #bdd3e7;
    color:#18324b;
}

.btn-secondary:hover{
    background:#e3eef8;
}


/* v0.9.28 hide empty status output */
.hidden{
    display:none !important;
}

#testOutput.hidden,
.status-output.hidden,
.output.hidden,
pre.hidden{
    display:none !important;
}

#testOutput:empty,
.status-output:empty{
    display:none !important;
}


/* v0.9.29 Stop Scan and button restore */
#stopScanBtn{
    margin-left:8px;
}

.hidden{
    display:none !important;
}

button:disabled{
    opacity:.55;
    cursor:not-allowed;
}


/* v0.9.32 inline stop scan fix */
.scan-progress-top{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
}

.mini-stop-scan{
    min-height:26px !important;
    padding:4px 10px !important;
    border-radius:999px !important;
    border:1px solid #d8a8a8 !important;
    background:#fff2f2 !important;
    color:#8d1616 !important;
    font-size:12px !important;
    font-weight:700;
    cursor:pointer;
}

.mini-stop-scan:hover{
    background:#ffe2e2 !important;
}

.hidden{
    display:none !important;
}


/* v0.9.33 compact snapshot layout */
.verified-compact-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:12px 0 10px;
    flex-wrap:wrap;
}

.verified-by-inline{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
}

.compact-url-block{
    width:100%;
}

.verified-url-row{
    margin-bottom:12px;
}

.inline-copy-btn{
    min-width:120px;
}

.snapshot-image-wrap{
    margin-top:4px;
}


/* v0.9.34 snapshot compact top row */
.verified-compact-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin:10px 0 12px;
    flex-wrap:wrap;
}

.verified-by-inline{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:14px;
}

.inline-copy-btn{
    min-width:120px;
    height:40px;
    margin:0;
}

.verified-inline-row{
    display:none !important;
}

.snapshot-card .verified-url-row{
    margin-top:0;
}


/* v0.9.35 active snapshot card cleanup */
.snapshot-verified-clean{
    padding:14px 16px 16px;
}

.snapshot-verified-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:12px;
}

.snapshot-verified-header .inline-copy-btn{
    flex:0 0 auto;
    min-width:118px;
    margin:0;
}

.verified-meta-row{
    display:grid;
    grid-template-columns:minmax(145px, 220px) 1fr;
    gap:12px;
    align-items:end;
    margin-bottom:12px;
}

.verified-meta-item span{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#315777;
    margin-bottom:5px;
}

.verified-meta-item code{
    display:block;
    padding:8px 10px;
    border:1px solid #c7ddec;
    border-radius:8px;
    background:#fff;
    color:#073455;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.verified-url-meta code{
    word-break:break-all;
}

.snapshot-image-wrap{
    margin-top:4px;
}

.snapshot-image{
    max-width:100%;
    max-height:560px;
    border-radius:10px;
    border:1px solid #bfd6ea;
    background:#061a2f;
    object-fit:contain;
    display:block;
    margin:0 auto;
}

@media(max-width:850px){
    .snapshot-verified-header{
        flex-direction:column;
    }

    .verified-meta-row{
        grid-template-columns:1fr;
    }

    .snapshot-verified-header .inline-copy-btn{
        width:100%;
    }
}