:root {
    --bg: #eef1f5;
    --card: rgba(255, 255, 255, .88);
    --text: #1d2330;
    --muted: #5b6475;
    --line: #d9dee7;
    --accent: #2f5bd3;
    --ok: #1f8a4c;
    --bad: #c4372d;
    --info: #8a93a3;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #12151b;
        --card: rgba(26, 30, 38, .88);
        --text: #e7eaf0;
        --muted: #a0a8b8;
        --line: #333a47;
        --accent: #7c9cff;
        --ok: #4cc37f;
        --bad: #ff7a6e;
    }
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: var(--bg) linear-gradient(135deg, #c9d6ff 0%, #e2e2e2 100%) fixed;
}
@media (prefers-color-scheme: dark) {
    body { background: var(--bg) linear-gradient(135deg, #1b2440 0%, #12151b 100%) fixed; }
}
body.has-bg { background-size: cover; background-position: center; background-attachment: fixed; }

h1 { font-size: 1.6rem; margin: .2rem 0 .4rem; }
h2 { font-size: 1.2rem; margin: 0 0 .8rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.4rem 0 .4rem; }
code { font-size: .9em; }

.card {
    background: var(--card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    min-width: 0;
}
.narrow { max-width: 420px; margin: 8vh auto; }
body.auth { padding: 0 16px; }

.eyebrow { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: .85rem; margin: .4rem 0 1rem; }

label { display: block; margin: .9rem 0; font-weight: 600; font-size: .9rem; }
input[type=text], input:not([type]), input[type=password] {
    display: block; width: 100%; margin-top: .3rem; padding: .65rem .75rem;
    font: inherit; color: var(--text); background: transparent;
    border: 1px solid var(--line); border-radius: 8px;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=file] { font: inherit; max-width: 100%; }

button {
    font: inherit; font-weight: 600; cursor: pointer;
    padding: .6rem 1.1rem; border: 0; border-radius: 8px;
    background: var(--accent); color: #fff;
}
button:hover { filter: brightness(1.08); }
button.secondary { background: transparent; color: var(--bad); border: 1px solid var(--bad); }
button.link { background: none; color: var(--accent); padding: 0 0 0 .6rem; font-weight: 500; }
form .upload, .upload { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.inline { display: inline; }

.msg { padding: .7rem .9rem; border-radius: 8px; margin: .8rem 0; font-size: .92rem; }
.msg.ok  { background: color-mix(in srgb, var(--ok) 15%, transparent);  border: 1px solid var(--ok); }
.msg.err { background: color-mix(in srgb, var(--bad) 15%, transparent); border: 1px solid var(--bad); }
.err-detail { white-space: pre-wrap; background: rgba(0,0,0,.06); padding: .8rem; border-radius: 6px; }

.topbar {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem;
    padding: .8rem 16px; background: var(--card); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.grid {
    display: grid; gap: 1.2rem; padding: 1.2rem 16px; max-width: 1200px; margin: 0 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.span { grid-column: 1 / -1; margin: 0; }
@media (max-width: 860px) { .grid { grid-template-columns: minmax(0, 1fr); } }

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
td, th { padding: .4rem .3rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-weight: 600; width: 38%; }
td.val { color: var(--muted); word-break: break-word; }
td.status { width: 1.4rem; }
.dot { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-top: .35rem; }
.dot.ok { background: var(--ok); } .dot.bad { background: var(--bad); } .dot.info { background: var(--info); }
.score { font-size: .85rem; font-weight: 600; }
.score .ok { color: var(--ok); } .score .bad { color: var(--bad); }