:root{--surface-2:rgba(255,255,255,.74);--border-strong:rgba(99,102,241,.22);--chip-border:rgba(37,99,235,.16);--table-head:rgba(37,99,235,.05);--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--radius-xl:28px;--radius-md:18px}
html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"],html[data-theme="dark"]{--surface-2:rgba(255,255,255,.04);--border-strong:rgba(129,140,248,.28);--chip-border:rgba(129,140,248,.22);--table-head:rgba(255,255,255,.04)}
.tool-app *{box-sizing:border-box}
.tool-app button,.tool-app input,.tool-app select,.tool-app textarea{font:inherit}
.tool-app a{color:inherit;text-decoration:none}
.wrap{max-width:1380px;margin:0 auto;padding:0 16px 28px}
.card{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-xl);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow)}
.tool-header{padding:12px 18px;background:#020617b3;backdrop-filter:blur(12px);box-shadow:0 1px 4px rgba(15,23,42,0.7);display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:80}
.tool-header img{width:34px;height:34px}
.tool-header .brand{font-weight:800;letter-spacing:-.02em;background:linear-gradient(90deg,#0b6e75,#0e7c86);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero{padding:24px 0 16px;display:grid;gap:16px}
.hero-main{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.hero-card,.hero-side{padding:24px}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-border);font-size:.8rem;font-weight:800;margin-bottom:14px}
.hero h1{margin:0 0 10px;font-size:clamp(2rem,3vw,3.35rem);line-height:1.02;letter-spacing:-.04em;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{margin:0;color:var(--muted);line-height:1.8;max-width:920px}
.mini-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.mini-stat{border:1px solid var(--border);border-radius:20px;padding:14px 15px;background:var(--surface-soft);box-shadow:var(--shadow-soft)}
.mini-stat small{display:block;color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.mini-stat strong{display:block;font-size:1rem;line-height:1.35}
.hero-side .status-panel{min-height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.status-box{border:1.5px dashed rgba(99,102,241,.34);border-radius:24px;padding:24px 18px;background:radial-gradient(circle at top left, rgba(37,99,235,.10), transparent 36%),
        radial-gradient(circle at bottom right, rgba(124,58,237,.08), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));text-align:center}
html[data-theme="dark"] .status-box,html[data-theme="dark"] .status-box,html[data-theme="dark"] .status-box,html[data-theme="dark"] .status-box,html[data-theme="dark"] .status-box,html[data-theme="dark"] .status-box,html[data-theme="dark"] .status-box,html[data-theme="dark"] .status-box{background:radial-gradient(circle at top left, rgba(37,99,235,.14), transparent 36%),
        radial-gradient(circle at bottom right, rgba(124,58,237,.12), transparent 40%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015))}
.status-icon{width:80px;height:80px;margin:0 auto 12px;display:grid;place-items:center;border-radius:24px;font-size:2rem;border:1px solid var(--border);background:linear-gradient(135deg, rgba(37,99,235,.16), rgba(124,58,237,.16));box-shadow:0 16px 30px rgba(37,99,235,.12)}
.status-box h2{margin:0 0 8px;font-size:1.35rem;letter-spacing:-.02em}
.status-box p{margin:0;color:var(--muted);line-height:1.7}
.quick-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.guide-step{padding:14px;border-radius:18px;border:1px solid var(--border);background:var(--surface-soft)}
.guide-step .num{width:30px;height:30px;display:grid;place-items:center;border-radius:999px;background:var(--accent-grad);color:#fff;font-size:.85rem;font-weight:900;margin-bottom:10px}
.guide-step strong{display:block;margin-bottom:5px;font-size:.95rem}
.guide-step span{display:block;color:var(--muted);font-size:.83rem;line-height:1.6}
.scan-shell{padding:18px;margin-top:2px}
.scan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.scan-title h3{margin:0;font-size:1.15rem;letter-spacing:-.02em}
.scan-title p{margin:6px 0 0;color:var(--muted);font-size:.88rem;line-height:1.7}
.inline-pill,.tiny-chip,.sev{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 11px;border-radius:999px;border:1px solid var(--border);background:var(--surface-soft);font-size:.76rem;font-weight:800;white-space:nowrap}
.inline-pill{padding:10px 13px;font-size:.8rem}
.success{background:var(--success-soft)}
.warning{background:var(--warning-soft)}
.danger{background:var(--danger-soft)}
.scan-zones{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;margin-bottom:14px}
.scan-panel{border:1px solid var(--border);border-radius:22px;background:var(--surface-soft);padding:16px;box-shadow:var(--shadow-soft)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.panel-head h4{margin:0;font-size:1rem;letter-spacing:-.02em}
.panel-head p{margin:4px 0 0;color:var(--muted);font-size:.83rem}
.url-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.77rem;font-weight:800;color:var(--muted-2)}
.field input,.field select{width:100%;min-height:48px;border-radius:16px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--input-text);padding:12px 14px;outline:none;transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease}
.field input:focus,.field select:focus{border-color:var(--accent1);box-shadow:0 0 0 4px rgba(37,99,235,.12);transform:translateY(-1px)}
.filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.preset-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.preset-btn{border:1px solid var(--chip-border);background:var(--chip-bg);color:var(--text);border-radius:999px;padding:10px 13px;font-size:.8rem;font-weight:800;cursor:pointer;transition:transform .16s ease, box-shadow .16s ease}
.preset-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft)}
.toolbar-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.btn-primary,.btn-outline,.btn-ghost{min-height:48px;border-radius:16px;padding:0 16px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.92rem;font-weight:800;cursor:pointer;transition:transform .16s ease, box-shadow .18s ease, opacity .18s ease}
.btn-primary{color:#fff;background:var(--accent-grad);box-shadow:0 14px 28px rgba(37,99,235,.22)}
.btn-outline{color:var(--btn-outline-text);background:var(--btn-outline-bg);border-color:var(--btn-outline-border)}
.btn-ghost{color:var(--btn-ghost-text);background:var(--btn-ghost-bg);border-color:var(--btn-ghost-border)}
.btn-primary:hover,.btn-outline:hover,.btn-ghost:hover{transform:translateY(-1px)}
.btn-primary:disabled,.btn-outline:disabled,.btn-ghost:disabled{opacity:.55;cursor:not-allowed;transform:none}
.progress-wrap{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;display:grid;gap:10px}
.progress-row{display:flex;align-items:center;gap:12px}
.progress-bar{flex:1;height:10px;border-radius:999px;overflow:hidden;background:rgba(148,163,184,.18)}
.progress-bar>div{width:0;height:100%;background:var(--accent-grad);transition:width .22s ease}
#progressText{color:var(--muted);font-size:.82rem;line-height:1.65}
.summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0 0}
.summary-card{padding:16px;border-radius:24px}
.summary-card small{display:block;margin-bottom:6px;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.summary-card strong{display:block;font-size:1.06rem;word-break:break-word}
.grade-big,.score-bar{min-height:96px;border-radius:20px;border:1px solid var(--border);background:linear-gradient(135deg, rgba(37,99,235,.14), rgba(124,58,237,.14))}
.grade-big{display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:900;letter-spacing:-.04em}
.score-bar{padding:14px}
.meter{height:12px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;margin-top:10px}
.meter>div{height:100%;width:0;background:var(--accent-grad);transition:width .25s ease}
.workspace{display:grid;grid-template-columns:1.18fr .82fr;gap:16px;margin:18px 0 20px}
.left-stack,.right-stack{display:grid;gap:16px}
.section-card{padding:18px;border-radius:26px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.section-head h3{margin:0;font-size:1.08rem;letter-spacing:-.02em}
.section-head p{margin:5px 0 0;color:var(--muted);font-size:.84rem;line-height:1.7}
.audit-grid{display:grid;gap:10px;max-height:430px;overflow:auto;padding-right:2px}
.audit-item{padding:14px;border-radius:18px;border:1px solid var(--border);background:var(--surface-soft);box-shadow:var(--shadow-soft)}
.audit-item.good{background:var(--success-soft)}
.audit-item.warn{background:var(--warning-soft)}
.audit-item.bad{background:var(--danger-soft)}
.audit-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:7px}
.audit-title{font-weight:800}
.audit-message{color:var(--muted);line-height:1.7;font-size:.89rem}
.audit-code{margin-top:8px;padding:11px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(148,163,184,.08);font-family:var(--mono);font-size:.83rem;white-space:pre-wrap;word-break:break-word;line-height:1.65}
.sev{font-size:.7rem;text-transform:uppercase}
.kv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kv{padding:13px 14px;border-radius:18px;border:1px solid var(--border);background:var(--surface-soft);box-shadow:var(--shadow-soft)}
.kv strong{display:block;margin-bottom:4px;font-size:.9rem}
.kv span{display:block;color:var(--muted);line-height:1.65;font-size:.85rem;word-break:break-word}
.table-shell{border:1px solid var(--border);border-radius:22px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));height:640px;display:flex;flex-direction:column;box-shadow:var(--shadow-soft)}
html[data-theme="dark"] .table-shell,html[data-theme="dark"] .table-shell,html[data-theme="dark"] .table-shell,html[data-theme="dark"] .table-shell,html[data-theme="dark"] .table-shell,html[data-theme="dark"] .table-shell,html[data-theme="dark"] .table-shell,html[data-theme="dark"] .table-shell{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02))}
.table-wrap{flex:1;min-height:0;overflow:auto}
.tool-app table{width:100%;border-collapse:collapse;min-width:760px}
.tool-app thead th{position:sticky;top:0;z-index:2;background:var(--table-head);text-align:left;padding:14px;border-bottom:1px solid var(--border);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
.tool-app tbody td{padding:14px;border-bottom:1px solid var(--border);vertical-align:top;font-size:.93rem;line-height:1.65}
.tool-app tbody tr:hover{background:rgba(37,99,235,.035)}
.header-name{font-family:var(--mono);font-weight:800;word-break:break-word}
.header-value{font-family:var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--muted)}
.group-chip{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-border);font-size:.72rem;font-weight:800}
.scroll-box{max-height:340px;overflow:auto;font-family:var(--mono);font-size:.88rem;line-height:1.68;color:var(--muted);white-space:pre-wrap;word-break:break-word;border:1px solid var(--border);background:var(--surface-soft);border-radius:20px;padding:14px;box-shadow:var(--shadow-soft)}
.empty{display:grid;place-items:center;text-align:center;color:var(--muted);min-height:220px;padding:28px;line-height:1.75}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compare-box{padding:14px;border:1px solid var(--border);border-radius:20px;background:var(--surface-soft);box-shadow:var(--shadow-soft)}
.compare-box h4{margin:0 0 10px;font-size:1rem;letter-spacing:-.02em}
.compare-list{display:grid;gap:8px}
.compare-row{padding:11px 12px;border-radius:14px;border:1px solid var(--border);background:rgba(148,163,184,.08)}
.compare-row strong{display:block;margin-bottom:4px}
.history-list{display:grid;gap:10px;max-height:360px;overflow:auto}
.history-item{padding:13px 14px;border-radius:16px;border:1px solid var(--border);background:var(--surface-soft);cursor:pointer;transition:transform .16s ease, background .16s ease;box-shadow:var(--shadow-soft)}
.history-item:hover{background:rgba(37,99,235,.06);transform:translateY(-1px)}
@media (max-width:1260px){
.workspace{grid-template-columns:1fr}
.summary-grid{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:1040px){
.hero-main,.scan-zones{grid-template-columns:1fr}
.summary-grid{grid-template-columns:repeat(3,1fr)}
.toolbar-actions{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
.url-grid,.filter-grid,.compare-grid,.quick-guide,.mini-stats{grid-template-columns:1fr}
.summary-grid{grid-template-columns:repeat(2,1fr)}
.kv-grid{grid-template-columns:1fr}
.toolbar-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
.wrap{padding:0 12px 24px}
.hero-card,.hero-side,.scan-shell,.section-card{padding:16px}
.toolbar-actions{grid-template-columns:1fr}
.btn-primary,.btn-outline,.btn-ghost{width:100%}
.progress-row{flex-direction:column;align-items:stretch}
.summary-grid{grid-template-columns:1fr}
.table-shell{height:560px}
.tool-app tbody td,.tool-app thead th{padding:12px}
}

/* page overrides */
.tool-app .info-card,.tool-app .upload-card,.tool-app .toolbar-card,.tool-app .summary-card,.tool-app .result-shell,.tool-app .tips-card,.tool-app .preview-card,.tool-app .output-card,.tool-app .issues-card,.tool-app .passwords-card,.tool-app .analyzer-card,.tool-app .side-card,.tool-app .panel-card{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:var(--zl-line);border-radius:20px}
.tool-app .toolbar-card{position:static}
.tool-app .file-strip{grid-template-columns:1fr}
.tool-app .file-strip .upload-card{padding:10px}
.tool-app .file-strip .upload-inner{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;text-align:left;padding:14px 16px;gap:8px 16px;border:1px dashed var(--zl-line-2);background:var(--zl-surface-2)}
.tool-app .file-strip .upload-inner p{flex:1 1 260px;font-size:.9rem;margin:0}
.tool-app .file-strip .upload-inner .zl-ui-title{flex:0 0 auto;margin:0}
.tool-app .file-strip .upload-inner.dragover{border-color:var(--zl-accent);box-shadow:none;transform:none}
.tool-app .editor-pane{height:500px}
.tool-app .toggle-chip{min-height:44px}
@media (max-width:680px){.tool-app .editor-pane{height:400px}}
@media (max-width:460px){.tool-app .summary-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.tool-app .toolbar-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-app .toolbar-actions .btn-primary{grid-column:1/-1}.tool-app .toolbar-actions button{white-space:normal;line-height:1.25}}
.tool-app .scan-wrap{padding:0 0 16px}
.tool-app .scan-wrap p{margin:0;color:var(--zl-muted);line-height:1.6}
.tool-app .card{backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;border-color:var(--zl-line);border-radius:20px}
.tool-app .scan-panel{box-shadow:none}
.tool-app .grade-big,.tool-app .score-bar{background:var(--zl-surface-2);min-height:72px}
.tool-app .meter>div,.tool-app .progress-bar>div{background:var(--zl-accent)}
.tool-app .empty{min-height:110px;padding:18px}
.tool-app .compare-title{display:block;margin:0 0 10px;font-family:var(--zl-font-head);font-size:1rem;overflow-wrap:anywhere}
.tool-app .filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.tool-app .filter-grid{grid-template-columns:1fr}}
.tool-app .toolbar-actions{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1100px){.tool-app .toolbar-actions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.tool-app .toolbar-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tool-app .table-shell{height:auto;max-height:560px;min-height:160px}
@media (max-width:720px){.tool-app .summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}