:root {
    --bg: #070a12;
    --panel: rgba(13, 18, 33, 0.82);
    --panel-2: rgba(20, 28, 50, 0.76);
    --text: #eef4ff;
    --muted: #8d9ab7;
    --line: rgba(255, 255, 255, 0.09);
    --accent: #63f3c4;
    --accent-2: #7c5cff;
    --danger: #ff5874;
    --warning: #ffc857;
    --safe: #53e088;
    --info: #66c7ff;
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
    background:
        radial-gradient(circle at 18% 0%, rgba(124, 92, 255, 0.2), transparent 34%),
        radial-gradient(circle at 80% 10%, rgba(99, 243, 196, 0.16), transparent 30%),
        linear-gradient(135deg, #060914 0%, #10182b 48%, #060914 100%);
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.watermark-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--watermark-image);
    background-repeat: repeat;
    background-size: 320px 220px;
    opacity: 0.46;
    user-select: none;
}
.result-watermark {
    position: fixed;
    left: 50%;
    top: 52%;
    z-index: 2;
    transform: translate(-50%, -50%) rotate(-18deg);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.11);
    font-size: clamp(42px, 9vw, 120px);
    font-weight: 950;
    letter-spacing: 0.12em;
    white-space: nowrap;
    text-shadow: 0 0 30px rgba(99, 243, 196, 0.08);
    user-select: none;
}

.bg-orb {
    position: fixed;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
}
.orb-a { background: var(--accent); left: -120px; top: 180px; }
.orb-b { background: var(--accent-2); right: -160px; top: 340px; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px clamp(18px, 4vw, 56px);
    backdrop-filter: blur(18px);
    background: rgba(6, 9, 20, 0.62);
    border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #03140f;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), #d5fff1);
    box-shadow: 0 0 38px rgba(99, 243, 196, 0.35);
}
.brand strong { display: block; letter-spacing: 0.02em; }
.brand small { display: block; margin-top: 2px; color: var(--muted); }
nav a {
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
}
nav a:hover { color: var(--text); border-color: rgba(99, 243, 196, 0.4); }

.container {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 38px 0 70px;
}
.container.narrow { width: min(900px, calc(100% - 32px)); }

.hero {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 28px;
    align-items: center;
    padding: 26px 0 34px;
}
.hero-copy h1 {
    margin: 16px 0;
    font-size: clamp(34px, 6vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.06em;
}
.hero-copy p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.8;
}
.badge {
    display: inline-flex;
    padding: 8px 12px;
    border: 1px solid rgba(99, 243, 196, 0.3);
    border-radius: 999px;
    color: var(--accent);
    background: rgba(99, 243, 196, 0.08);
}

.scan-card, .panel, .score-panel, .mini-card, .alert, .disclaimer {
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: var(--shadow);
    backdrop-filter: blur(20px);
}
.scan-card {
    padding: 24px;
    border-radius: 28px;
}
label { display: block; margin: 0 0 9px; color: var(--muted); font-weight: 700; }
input, select {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.11);
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 14px 15px;
    outline: none;
}
input:focus, select:focus { border-color: rgba(99, 243, 196, 0.55); box-shadow: 0 0 0 4px rgba(99, 243, 196, 0.1); }
.input-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 10px; }
button {
    border: 0;
    border-radius: 16px;
    padding: 14px 20px;
    color: #04120e;
    font-weight: 900;
    cursor: pointer;
    background: linear-gradient(135deg, var(--accent), #b9fff0);
    box-shadow: 0 12px 34px rgba(99, 243, 196, 0.28);
}
button:hover { transform: translateY(-1px); }
button.ghost { color: var(--text); background: rgba(255, 255, 255, 0.08); box-shadow: none; border: 1px solid var(--line); }
.hint { color: var(--muted); line-height: 1.6; margin: 16px 0 0; font-size: 14px; }

.alert { border-radius: 18px; padding: 14px 18px; margin: 12px 0 22px; }
.alert p { margin: 6px 0; }
.alert.error { border-color: rgba(255, 88, 116, 0.34); color: #ffd9df; }
.alert.success { border-color: rgba(83, 224, 136, 0.34); color: #ccffde; }

.result-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 22px;
    margin: 18px 0 22px;
}
.score-panel {
    min-height: 390px;
    border-radius: 32px;
    padding: 26px;
    overflow: hidden;
    position: relative;
}
.score-panel::after {
    content: "";
    position: absolute;
    inset: auto -80px -120px auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: rgba(99, 243, 196, 0.16);
    filter: blur(20px);
}
.score-panel.danger::after { background: rgba(255, 88, 116, 0.2); }
.score-panel.warning::after, .score-panel.caution::after { background: rgba(255, 200, 87, 0.18); }
.score-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.score-meta a { color: var(--accent); }
.score-ring {
    width: 190px;
    height: 190px;
    display: grid;
    place-content: center;
    margin: 34px auto 18px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #10182b 56%, transparent 58%),
        conic-gradient(var(--accent) calc(var(--score) * 1%), rgba(255, 255, 255, 0.08) 0);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.4), 0 0 60px rgba(99, 243, 196, 0.18);
}
.score-ring strong { font-size: 54px; line-height: 1; letter-spacing: -0.08em; }
.score-ring span { color: var(--muted); text-align: center; }
.score-panel h2 { margin: 0 0 10px; font-size: 32px; text-align: center; }
.score-panel p { color: var(--muted); line-height: 1.75; text-align: center; }
.source-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; position: relative; z-index: 1; }
.source-row span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; }

.metric-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.mini-card {
    border-radius: 24px;
    padding: 22px;
    background: var(--panel-2);
}
.mini-card span { display: block; color: var(--muted); margin-bottom: 12px; }
.mini-card strong { font-size: 34px; letter-spacing: -0.04em; }

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin: 22px 0;
}
.panel { border-radius: 26px; padding: 22px; }
.panel.full { margin-top: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.panel-head h2, .panel-head h3 { margin: 0; font-size: 22px; }
.panel-head span { color: var(--muted); font-size: 13px; }

.score-parts { display: grid; gap: 16px; }
.part-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; }
.part-row strong { display: block; }
.part-row small { display: block; color: var(--muted); line-height: 1.55; margin-top: 5px; }
.part-value { text-align: right; }
.part-value span { display: block; color: var(--muted); }
.part-value b { display: block; margin-top: 4px; }
.bar { grid-column: 1 / -1; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--warning), var(--danger)); }

.candidate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
.candidate-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
}
.candidate-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.candidate-top strong { font-size: 24px; letter-spacing: -0.04em; }
.candidate-top span, .candidate-source { color: var(--muted); font-size: 13px; }
.candidate-card p { min-height: 44px; margin: 0; color: var(--muted); line-height: 1.5; }
.candidate-card code { width: max-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.candidate-stats { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.candidate-card button { width: 100%; }

.flags { display: grid; gap: 12px; }
.flag { padding: 15px; border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.flag p { margin: 7px 0 0; color: var(--muted); line-height: 1.6; }
.flag.danger { border-color: rgba(255, 88, 116, 0.34); }
.flag.warning, .flag.caution { border-color: rgba(255, 200, 87, 0.34); }
.flag.safe { border-color: rgba(83, 224, 136, 0.34); }
.flag.info { border-color: rgba(102, 199, 255, 0.34); }

.clean-list { margin: 8px 0 22px; padding-left: 20px; color: var(--muted); line-height: 1.8; }
h4 { margin: 14px 0 8px; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 12px 18px; }
.kv span { color: var(--muted); }
.kv b { text-align: right; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { padding: 14px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 13px; }
td a { color: var(--accent); }
.pill { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.pill.dex { color: var(--accent); background: rgba(99, 243, 196, 0.1); }
.pill.burn { color: var(--danger); background: rgba(255, 88, 116, 0.1); }

.ai-panel { border-color: rgba(99, 243, 196, 0.22); }
.ai-output {
    min-height: 260px;
    padding: 18px;
    border-radius: 20px;
    color: #f5fbff;
    background: linear-gradient(180deg, rgba(99, 243, 196, 0.1), rgba(124, 92, 255, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 17px;
    line-height: 1.85;
    white-space: pre-wrap;
}
.ai-output strong {
    color: #ffffff;
    font-size: 20px;
    font-weight: 950;
    text-shadow: 0 0 24px rgba(99, 243, 196, 0.18);
}
.ai-output .ai-percent {
    display: block;
    margin-bottom: 12px;
    color: var(--accent);
    font-size: clamp(28px, 5vw, 46px);
    font-weight: 950;
    letter-spacing: -0.04em;
}
.ai-refresh { padding: 10px 14px; }

.disclaimer { border-radius: 20px; padding: 18px; color: var(--muted); line-height: 1.75; margin-top: 24px; }
.disclaimer strong { color: var(--text); }
.site-footer { padding: 24px 0 0; text-align: center; color: rgba(141, 154, 183, 0.72); font-size: 12px; letter-spacing: 0.18em; }

.settings-form { display: grid; gap: 18px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .wide { grid-column: 1 / -1; }
.check-line { display: flex; align-items: center; gap: 10px; color: var(--text); }
.check-line input { width: auto; }
.auth-panel { margin-top: 36px; }
.auth-panel h1 { margin-top: 0; }
code { padding: 3px 7px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: var(--accent); }
.sticky-actions {
    position: sticky;
    bottom: 16px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(6, 9, 20, 0.8);
    backdrop-filter: blur(18px);
}

@media (max-width: 860px) {
    .topbar { align-items: flex-start; gap: 14px; flex-direction: column; padding: 14px 16px; }
    .container { width: min(100% - 24px, 1180px); padding-top: 22px; }
    .hero { gap: 18px; padding-top: 12px; }
    .hero, .result-grid, .content-grid, .candidate-grid { grid-template-columns: 1fr; }
    .input-row, .form-grid { grid-template-columns: 1fr; }
    .metric-cards { grid-template-columns: 1fr; }
    .form-grid .wide { grid-column: auto; }
    .score-meta, .panel-head, .candidate-top { align-items: flex-start; flex-direction: column; }
    .hero-copy h1 { font-size: clamp(32px, 11vw, 48px); }
    .hero-copy p { font-size: 16px; }
    .scan-card, .panel, .score-panel, .mini-card { border-radius: 20px; padding: 18px; }
    .candidate-card p { min-height: auto; }
    .score-ring { width: 156px; height: 156px; margin: 22px auto 14px; }
    .score-ring strong { font-size: 44px; }
    .mini-card strong { font-size: 28px; }
    .part-row { grid-template-columns: 1fr; }
    .part-value { text-align: left; }
    .kv { grid-template-columns: 1fr; gap: 5px; }
    .kv b { text-align: left; margin-bottom: 8px; }
    table { min-width: 680px; }
    th, td { padding: 11px 9px; }
    .sticky-actions { position: static; flex-direction: column; }
    .sticky-actions button { width: 100%; }
    .watermark-bg { background-size: 240px 170px; opacity: 0.42; }
    .result-watermark { font-size: clamp(36px, 13vw, 70px); top: 48%; white-space: normal; width: 92vw; text-align: center; }
}

@media (max-width: 420px) {
    .brand small { display: none; }
    .badge { font-size: 12px; line-height: 1.5; }
    .input-row button { width: 100%; }
    .source-row span { width: 100%; }
}