:root {
    --bg0:        #f5f9f8;
    --bg1:        #ffffff;
    --bg2:        #f5f9f8;
    --bg3:        #eaf4f1;
    --brand:      #4eb39a;
    --brand-d:    #3a9b83;
    --brand-deep: #0e2d27;
    --brand-tint: rgba(78,179,154,0.08);
    --brand-b:    rgba(78,179,154,0.2);
    --green:      #16a34a;
    --green-d:    rgba(22,163,74,0.08);
    --red:        #dc2626;
    --red-d:      rgba(220,38,38,0.08);
    --amber:      #d97706;
    --amber-d:    rgba(217,119,6,0.08);
    --blue:       #2563eb;
    --blue-d:     rgba(37,99,235,0.08);
    --purple:     #7c3aed;
    --purple-d:   rgba(124,58,237,0.08);
    --slate:      #64748b;
    --border:     rgba(78,179,154,0.15);
    --border2:    rgba(78,179,154,0.3);
    --text0:      #1a2e2b;
    --text1:      #334155;
    --text2:      #5f7a74;
    --text3:      #94aaa6;
    --mono:       'DM Mono', monospace;
    --sans:       'DM Sans', sans-serif;
    --radius:     10px;
    --shadow:     0 2px 12px rgba(0,0,0,0.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.al-page {
    font-family: var(--sans);
    background: var(--bg0);
    min-height: 100vh;
    color: var(--text0);
}

/* ── HERO ── */
.al-hero {
    background: linear-gradient(145deg, #0e2d27 0%, #1a4a3d 60%, #0e3530 100%);
    border-bottom: 1px solid rgba(78,179,154,0.2);
    padding: 2.5rem 2rem 2.25rem;
    position: relative; overflow: hidden;
}
.al-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 55% 90% at 78% 50%, rgba(78,179,154,0.09) 0%, transparent 65%);
    pointer-events: none;
}
.al-hero::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #4eb39a, #3a9b83, #4eb39a, transparent);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}
@keyframes shimmer { 0%{background-position:200%} 100%{background-position:-200%} }

.al-hero-inner {
    max-width: 1260px; margin: 0 auto; position: relative; z-index: 1;
    display: grid; grid-template-columns: 1fr 310px; gap: 3rem; align-items: center;
}
.al-hero-pills { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: .85rem; }
.al-pill {
    font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
    padding: 3px 10px; border-radius: 4px; border: 1px solid;
    letter-spacing: .05em; text-transform: uppercase;
}
.ap-green  { color: #6fd1b3; border-color: rgba(111,209,179,.3);  background: rgba(78,179,154,0.1); }
.ap-blue   { color: #93c5fd; border-color: rgba(147,197,253,.25); background: rgba(37,99,235,0.1); }
.ap-amber  { color: #fcd34d; border-color: rgba(252,211,77,.25);  background: rgba(217,119,6,0.1); }

.al-hero-kicker {
    font-family: var(--mono); font-size: 0.65rem; color: #6fd1b3;
    letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: .6rem; display: flex; align-items: center; gap: 8px;
}
.al-hero-kicker::before { content: '//'; opacity: .5; }
.al-updated-line {
    font-family: var(--mono); font-size: 0.62rem; color: rgba(255,255,255,0.35);
    margin-bottom: .5rem; letter-spacing: .01em;
}
.al-updated-line time { color: rgba(255,255,255,0.55); font-weight: 600; }
.al-hero h1 {
    font-size: clamp(1.5rem, 3.8vw, 2.3rem);
    font-weight: 700; color: #fff; line-height: 1.1;
    letter-spacing: -.02em; margin-bottom: .55rem;
}
.al-hero h1 em { font-style: normal; color: #6fd1b3; }
.al-hero p { font-size: 0.875rem; color: rgba(255,255,255,0.5); line-height: 1.8; max-width: 490px; }
.al-feat-list { display: flex; flex-direction: column; gap: 5px; margin-top: .9rem; }
.al-feat {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono); font-size: 0.62rem; color: rgba(255,255,255,0.4);
}
.al-feat::before { content: '▸'; color: #6fd1b3; font-size: 0.5rem; }

/* Score panel in hero */
.al-score-panel {
    background: rgba(0,0,0,0.22);
    border: 1px solid rgba(78,179,154,0.2);
    border-radius: 12px; padding: 1.3rem;
    display: none; backdrop-filter: blur(4px);
}
.al-score-panel.show { display: block; }
.asp-title { font-family: var(--mono); font-size: 0.6rem; color: #6fd1b3; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .85rem; }
.asp-rows { display: flex; flex-direction: column; gap: 4px; }
.asp-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.05);
    font-family: var(--mono); font-size: 0.65rem;
}
.asp-row:last-child { border-bottom: none; }
.asp-k { color: rgba(255,255,255,.4); }
.asp-v { font-weight: 700; }
.asp-v.pass  { color: #6fd1b3; }
.asp-v.warn  { color: #fcd34d; }
.asp-v.fail  { color: #fca5a5; }
.asp-v.muted { color: rgba(255,255,255,.35); }

/* Big score bar */
.asp-bar-wrap { margin: .9rem 0 .85rem; }
.asp-bar-label {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--mono); font-size: 0.62rem; margin-bottom: 5px;
}
.asp-bar-label span:first-child { color: rgba(255,255,255,.4); }
.asp-bar-label span:last-child  { color: #fff; font-weight: 700; }
.asp-bar-track { height: 6px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.asp-bar-fill  { height: 100%; border-radius: 99px; transition: width .8s ease; }

/* ── MAIN ── */
.al-main { max-width: 1260px; margin: 0 auto; padding: 2rem; }

/* ── SEC TITLE ── */
.sec-title {
    font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--text2);
    margin-bottom: .75rem; display: flex; align-items: center; gap: 10px;
}
.sec-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── CONFIG PANEL ── */
.config-panel {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); margin-bottom: 1.5rem;
}
.cfg-head {
    background: var(--brand-deep); padding: .9rem 1.5rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.cfg-title {
    font-family: var(--mono); font-size: 0.68rem; font-weight: 700;
    color: #6fd1b3; letter-spacing: .08em; text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
}
.cfg-title svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.cfg-body { padding: 1.5rem; }

/* Config grid */
.cfg-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
    gap: 14px; margin-bottom: 1.25rem;
}
.cfg-field label {
    display: block; font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
    color: var(--text2); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 5px;
}
.cfg-field select, .cfg-field input, .cfg-field textarea {
    width: 100%; background: var(--bg2); border: 1px solid rgba(78,179,154,.2);
    border-radius: 7px; padding: 8px 12px;
    font-family: var(--mono); font-size: 0.75rem; color: var(--text0);
    outline: none; transition: border-color .2s;
}
.cfg-field select:focus, .cfg-field input:focus, .cfg-field textarea:focus {
    border-color: var(--brand); background: #fff;
}
.cfg-field textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
.cfg-hint { font-family: var(--mono); font-size: 0.6rem; color: var(--text3); margin-top: 4px; }

/* Custom entries textarea */
.cfg-full { grid-column: 1/-1; }

/* Buttons */
.btn-audit {
    background: var(--brand); border: none; border-radius: 8px;
    padding: 10px 28px; font-family: var(--sans); font-size: 0.9rem; font-weight: 700;
    color: var(--brand-deep); cursor: pointer;
    transition: background .15s, transform .12s, box-shadow .15s;
    display: inline-flex; align-items: center; gap: 9px;
}
.btn-audit:hover { background: var(--brand-d); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(78,179,154,.35); }
.btn-audit:active { transform: scale(.98); }
.btn-audit:disabled { background: #d1fae5; color: #6fd1b3; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-audit svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

.btn-export {
    background: transparent; border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px; padding: 9px 18px;
    font-family: var(--sans); font-size: 0.82rem; font-weight: 600;
    color: rgba(255,255,255,.65); cursor: pointer;
    transition: all .15s; display: inline-flex; align-items: center; gap: 7px;
}
.btn-export:hover { border-color: #6fd1b3; color: #6fd1b3; }
.btn-export svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }

.btn-ghost-sm {
    background: transparent; border: 1px solid var(--border2);
    border-radius: 6px; padding: 5px 12px;
    font-family: var(--mono); font-size: 0.65rem; font-weight: 600;
    color: var(--text2); cursor: pointer; transition: all .15s;
    display: inline-flex; align-items: center; gap: 5px;
}
.btn-ghost-sm:hover { border-color: var(--brand); color: var(--brand-d); background: var(--brand-tint); }

/* Progress */
.run-progress { display: none; }
.run-progress.active { display: block; }
.progress-hdr {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: .85rem; font-family: var(--mono); font-size: 0.72rem; color: var(--text2);
}
.spinner {
    width: 15px; height: 15px; border: 2px solid rgba(78,179,154,.2);
    border-top-color: var(--brand); border-radius: 50%;
    animation: spin .7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.prog-bar-wrap { background: var(--bg3); border-radius: 99px; height: 5px; overflow: hidden; margin-bottom: .75rem; }
.prog-bar { height: 100%; border-radius: 99px; background: var(--brand); transition: width .4s ease; width: 0%; }
.check-stream {
    display: flex; flex-direction: column; gap: 3px;
    max-height: 160px; overflow-y: auto;
    padding: .5rem .75rem; background: var(--bg2);
    border-radius: 8px; border: 1px solid var(--border);
}
.cs-line {
    font-family: var(--mono); font-size: 0.63rem; color: var(--text2);
    display: flex; align-items: center; gap: 6px;
    animation: fadeUp .18s ease both;
}
@keyframes fadeUp { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
.cs-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.cs-dot.running { background: var(--brand); animation: pulse .8s ease infinite; }
.cs-dot.pass    { background: var(--green); }
.cs-dot.warn    { background: var(--amber); }
.cs-dot.fail    { background: var(--red); }
.cs-dot.info    { background: var(--blue); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── RESULTS ── */
#al-results { display: none; }

/* ── SUMMARY CARDS ── */
.summary-strip {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(130px,1fr));
    gap: 10px; margin-bottom: 1.5rem;
}
.sum-card {
    background: #fff; border: 1px solid var(--border);
    border-top: 3px solid var(--sc-color, var(--brand));
    border-radius: var(--radius); padding: .9rem 1rem;
    transition: box-shadow .15s;
}
.sum-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.sum-lbl { font-family: var(--mono); font-size: 0.58rem; color: var(--text2); letter-spacing: .07em; text-transform: uppercase; margin-bottom: .3rem; }
.sum-val { font-family: var(--sans); font-size: 1.4rem; font-weight: 700; color: var(--text0); line-height: 1; }
.sum-sub { font-family: var(--mono); font-size: 0.6rem; color: var(--text3); margin-top: 3px; }

/* ── CATEGORY SECTIONS ── */
.cat-block { margin-bottom: 2rem; }
.cat-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: .85rem;
}
.cat-icon {
    width: 28px; height: 28px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}
.cat-title-wrap { flex: 1; }
.cat-title { font-size: 0.875rem; font-weight: 700; color: var(--text0); }
.cat-desc  { font-family: var(--mono); font-size: 0.62rem; color: var(--text2); margin-top: 1px; }
.cat-stats { font-family: var(--mono); font-size: 0.65rem; color: var(--text3); white-space: nowrap; }

/* ── ENTRY TABLE ── */
.entry-table-wrap {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); margin-bottom: 1rem;
}
.et-table { width: 100%; border-collapse: collapse; }
.et-table th {
    padding: .45rem .9rem; text-align: left;
    font-family: var(--mono); font-size: 0.58rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: var(--text2);
    background: var(--bg3); border-bottom: 1px solid var(--border);
    white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.et-table td {
    padding: .45rem .9rem; font-family: var(--mono); font-size: 0.72rem; color: var(--text1);
    border-bottom: 1px solid rgba(78,179,154,.07); vertical-align: top;
}
.et-table tr:last-child td { border-bottom: none; }
.et-table tr.row-pass:hover td { background: rgba(22,163,74,.03); }
.et-table tr.row-fail:hover td { background: rgba(220,38,38,.03); }
.et-table tr.row-warn:hover td { background: rgba(217,119,6,.03); }
.et-table tr.row-info:hover td { background: rgba(37,99,235,.03); }

/* Row highlight stripes */
.row-fail td:first-child { border-left: 3px solid var(--red); }
.row-warn td:first-child { border-left: 3px solid var(--amber); }
.row-pass td:first-child { border-left: 3px solid var(--green); }
.row-info td:first-child { border-left: 3px solid var(--blue); }

/* Entry cell styles */
.entry-url {
    font-weight: 600; color: var(--text0); font-size: 0.72rem;
    word-break: break-all; max-width: 340px;
}
.entry-url.resolved { color: #166534; }
.entry-url.failed   { color: #991b1b; }

.port-pill {
    display: inline-block; padding: 1px 7px; border-radius: 4px;
    font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
    border: 1px solid; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
}
.pp-https  { color: #166534; border-color: rgba(22,163,74,.25);  background: var(--green-d); }
.pp-udp    { color: #1e40af; border-color: rgba(37,99,235,.25);  background: var(--blue-d); }
.pp-turn   { color: #5b21b6; border-color: rgba(124,58,237,.25); background: var(--purple-d); }
.pp-tcp    { color: #166534; border-color: rgba(22,163,74,.25);  background: var(--green-d); }

.status-badge {
    display: inline-block; padding: 2px 9px; border-radius: 4px;
    font-family: var(--mono); font-size: 0.6rem; font-weight: 700;
    border: 1px solid; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.sb-pass  { color: #166534; border-color: rgba(22,163,74,.25);   background: var(--green-d); }
.sb-fail  { color: #991b1b; border-color: rgba(220,38,38,.25);   background: var(--red-d); }
.sb-warn  { color: #92400e; border-color: rgba(217,119,6,.25);   background: var(--amber-d); }
.sb-info  { color: #1e40af; border-color: rgba(37,99,235,.25);   background: var(--blue-d); }
.sb-na    { color: #475569; border-color: rgba(100,116,139,.2);  background: rgba(100,116,139,.08); }
.sb-running { color: #3a9b83; border-color: rgba(78,179,154,.25); background: var(--brand-tint); }

.cat-pill {
    display: inline-block; padding: 1px 8px; border-radius: 4px;
    font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
    letter-spacing: .03em; border: 1px solid;
}
.cp-ccp     { color: #3a9b83; border-color: rgba(78,179,154,.3);  background: var(--brand-tint); }
.cp-turn    { color: #5b21b6; border-color: rgba(124,58,237,.25); background: var(--purple-d); }
.cp-cf      { color: #92400e; border-color: rgba(217,119,6,.25);  background: var(--amber-d); }
.cp-auth    { color: #1e40af; border-color: rgba(37,99,235,.25);  background: var(--blue-d); }
.cp-telemetry { color: #166534; border-color: rgba(22,163,74,.25); background: var(--green-d); }
.cp-custom  { color: #6b21a8; border-color: rgba(107,33,168,.25); background: rgba(107,33,168,.08); }

.remediation-tip {
    margin-top: 3px; font-size: 0.6rem; color: var(--text3);
    font-style: italic; line-height: 1.5;
}

/* ── MISSING ENTRIES LIST ── */
.missing-panel {
    background: #fff8f5;
    border: 1px solid rgba(220,38,38,.2);
    border-left: 4px solid var(--red);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem; display: none;
}
.missing-panel.show { display: block; }
.missing-title { font-size: 0.82rem; font-weight: 700; color: var(--red); margin-bottom: .6rem; display: flex; align-items: center; gap: 7px; }
.missing-list  { display: flex; flex-direction: column; gap: 4px; }
.missing-item  {
    font-family: var(--mono); font-size: 0.7rem; color: var(--text1);
    padding: 4px 8px; background: var(--red-d); border-radius: 5px;
    display: flex; align-items: center; gap: 8px;
}
.missing-item::before { content: '✗'; color: var(--red); font-weight: 700; flex-shrink: 0; }

/* ── REPORT BOX ── */
.report-box {
    background: var(--brand-deep); border: 1px solid rgba(78,179,154,.2);
    border-radius: var(--radius); padding: 1.5rem;
    margin-bottom: 1.5rem; display: none;
}
.report-box.show { display: block; }
.rb-title { font-family: var(--mono); font-size: 0.65rem; color: #6fd1b3; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .9rem; }
.rb-pre {
    font-family: var(--mono); font-size: 0.68rem; color: #94a3b8;
    white-space: pre-wrap; word-break: break-all; line-height: 1.7;
    max-height: 400px; overflow-y: auto;
}

/* ── ALLOWLIST COPY BLOCK ── */
.copy-block {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    box-shadow: var(--shadow); margin-bottom: 1.5rem;
}
.copy-head {
    background: var(--bg3); padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--mono); font-size: 0.68rem; font-weight: 700; color: var(--text2);
    letter-spacing: .08em; text-transform: uppercase; gap: .5rem;
}
.copy-body {
    padding: 1rem 1.1rem;
    font-family: var(--mono); font-size: 0.7rem; color: var(--text1);
    line-height: 1.8; max-height: 280px; overflow-y: auto;
}
.copy-body .url-line { padding: 2px 0; display: flex; align-items: baseline; gap: 8px; }
.copy-body .url-line .url-text { color: var(--text0); font-weight: 600; word-break: break-all; }
.copy-body .url-line .url-note { color: var(--text3); font-size: 0.6rem; white-space: nowrap; }

/* ── SEO / FAQ ── */
.seo-block {
    background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.75rem 2rem; margin-top: 2rem;
    box-shadow: var(--shadow);
}
.seo-block h2 { font-size: 1.05rem; font-weight: 700; color: var(--text0); margin-bottom: .5rem; }
.seo-block > p { font-size: 0.875rem; color: var(--text2); line-height: 1.8; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px,1fr)); gap: 10px; margin-top: 1.25rem; }
.faq-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; }
.faq-q { font-size: 0.875rem; font-weight: 700; color: var(--text0); margin-bottom: .35rem; }
.faq-a { font-size: 0.82rem; color: var(--text2); line-height: 1.7; }

/* ── TOAST ── */
.al-toast {
    position: fixed; bottom: 2rem; right: 2rem;
    background: var(--brand-deep); border: 1px solid rgba(78,179,154,.35);
    border-radius: 8px; padding: .65rem 1.1rem;
    font-family: var(--mono); font-size: 0.72rem; color: #e1f5ee;
    z-index: 999; transform: translateY(60px); opacity: 0;
    transition: all .3s; pointer-events: none;
}
.al-toast.show { transform: translateY(0); opacity: 1; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .al-hero-inner { grid-template-columns: 1fr; }
    .al-main { padding: 1rem; }
    .et-table th:nth-child(3), .et-table td:nth-child(3) { display: none; }
}
@media (max-width: 600px) {
    .summary-strip { grid-template-columns: repeat(2,1fr); }
    .cfg-grid { grid-template-columns: 1fr; }
    .al-hero { padding: 1.75rem 1.25rem 1.5rem; }
    .seo-block { padding: 1.25rem; }
}