:root{--ink:#07131f;--navy:#0b2138;--blue:#123e66;--gold:#e9b949;--gold-ink:#14202b;--paper:#f5f2e9;--muted:#9aabbb;--line:#24445f;--text:#f8fafc;--soft-text:#bdc9d5;--field:#081827;--card:#0a1b2b;--shadow:0 18px 55px rgba(0,0,0,.18);color-scheme:dark}
html[data-theme="light"]{--ink:#f3f7fb;--navy:#ffffff;--blue:#e8f1fb;--gold:#9b6500;--gold-ink:#ffffff;--paper:#07131f;--muted:#607286;--line:#c7d7e7;--text:#102235;--soft-text:#4e6478;--field:#f7fafd;--card:#f9fbfd;--shadow:0 16px 45px rgba(28,64,94,.10);color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;transition:background .2s ease,color .2s ease}
.shell{max-width:1200px;margin:auto;padding:32px}
header{display:flex;align-items:center;gap:14px}
.brand-mark{width:62px;height:62px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);background:linear-gradient(145deg,#fff,#eaf4ff);border-radius:17px;box-shadow:var(--shadow)}
.brand-mark img{width:58px;height:58px;object-fit:contain}
h1,h2,h3,p{margin-top:0}
header h1{font-family:Georgia,serif;margin:0}
.eyebrow{font-size:.7rem;letter-spacing:.18em;color:var(--muted);margin-bottom:4px}
.gold{color:var(--gold)}
.live{margin-left:auto;color:#37b978;font-size:.75rem}
.official-banner{display:block;width:100%;height:clamp(180px,20vw,285px);overflow:hidden;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);background:#06101e}
.official-banner img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.operator-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.hero h2{font:700 3rem/1.05 Georgia,serif}
.hero p{color:var(--soft-text);line-height:1.6}
.grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:22px}
.panel{background:var(--navy);border:1px solid var(--line);border-radius:18px;padding:24px;min-height:340px;box-shadow:var(--shadow)}
.panel-title{display:flex;justify-content:space-between}
.panel-title span,.notice{color:var(--muted);font-size:.85rem}
textarea{width:100%;min-height:190px;resize:vertical;background:var(--field);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:16px;font:inherit;line-height:1.5}
button{border:0;border-radius:10px;background:var(--gold);color:var(--gold-ink);font-weight:800;padding:12px 17px;margin-top:14px;cursor:pointer}
.match{border:1px solid var(--line);border-radius:13px;padding:16px;margin-top:12px;background:var(--card)}
.match-head{display:flex;justify-content:space-between}
.confidence{color:var(--gold);font-weight:800}
.match p{color:var(--soft-text);line-height:1.45}
.match small{color:var(--muted)}
.match .dismiss{background:transparent;color:var(--soft-text);border:1px solid var(--line);margin-left:8px}
.empty{color:var(--muted);padding:40px 0;text-align:center}
.output-body{background:transparent;display:grid;place-items:end center;min-height:100vh;padding:5vh}
.broadcast{width:min(1100px,92vw);background:linear-gradient(100deg,rgba(7,19,31,.97),rgba(18,62,102,.94));color:#f8fafc;border-left:8px solid #e9b949;padding:28px 42px;box-shadow:0 12px 50px #0008}
.broadcast h1{font:700 2.4rem Georgia,serif;color:#e9b949;margin-bottom:10px}
.broadcast #verse{font:600 1.65rem/1.4 Georgia,serif;margin-bottom:10px}
.output-label,.broadcast span{font-size:.72rem;letter-spacing:.16em;color:#b7c6d3}
.hidden{visibility:hidden}
@media(max-width:760px){.grid{grid-template-columns:1fr}.shell{padding:14px}.official-banner{height:clamp(125px,32vw,190px);border-radius:12px}.operator-toolbar{align-items:flex-start;flex-direction:column}.brand-mark{width:54px;height:54px}.brand-mark img{width:50px;height:50px}}