:root {
    color-scheme: light;
    --bg: #f3f6fb;
    --card: rgba(255, 255, 255, .96);
    --text: #182230;
    --muted: #667085;
    --line: #e4e9f1;
    --primary: #4355d9;
    --primary-dark: #3545bd;
    --danger: #c9364f;
    --radius: 18px;
    --shadow: 0 18px 55px rgba(37, 47, 76, .08);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100vh;
    margin: 0;
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background:
        radial-gradient(circle at 12% 8%, rgba(93, 111, 255, .10), transparent 28rem),
        radial-gradient(circle at 88% 92%, rgba(65, 189, 167, .09), transparent 30rem),
        var(--bg);
    color: var(--text);
    line-height: 1.55;
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; }

.container { width: min(1220px, calc(100% - 36px)); margin: 34px auto; }
.narrow { max-width: 680px; }
.card {
    margin-bottom: 20px;
    padding: 25px;
    border: 1px solid rgba(221, 227, 237, .9);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}
h1, h2 { margin: 0; letter-spacing: -.025em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h2 { font-size: 1.18rem; }
p { margin: .55rem 0; }
.muted { color: var(--muted); }

.brand-mark {
    display: grid;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    place-items: center;
    border-radius: 15px;
    background: linear-gradient(145deg, #5d6fff, #3545bd);
    box-shadow: 0 12px 24px rgba(67, 85, 217, .24);
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
}
.small-mark { width: 42px; height: 42px; margin: 0; border-radius: 13px; }
.brand-line { display: flex; align-items: center; gap: 13px; }
.brand-line p { margin-bottom: 0; }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.topbar nav, .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.tabbar { display: flex; gap: 6px; margin: -4px 0 22px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .78); box-shadow: 0 8px 30px rgba(37, 47, 76, .05); }
.tab { min-width: 110px; padding: 9px 16px; border-radius: 9px; color: var(--muted); text-align: center; font-size: 14px; font-weight: 700; }
.tab:hover { background: #f2f4fa; text-decoration: none; }
.tab.active { background: var(--primary); color: #fff; box-shadow: 0 7px 16px rgba(67, 85, 217, .18); }
.btn {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border: 1px solid #d5dbe6;
    border-radius: 11px;
    background: #fff;
    color: #263043;
    cursor: pointer;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.btn:hover { background: #f9faff; border-color: #bdc6d5; text-decoration: none; transform: translateY(-1px); }
.btn:focus-visible, input:focus-visible { outline: 3px solid rgba(67, 85, 217, .20); outline-offset: 2px; }
.btn.primary { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 8px 18px rgba(67, 85, 217, .18); }
.btn.primary:hover { border-color: var(--primary-dark); background: var(--primary-dark); }
.btn.danger { border-color: #f0c7cf; color: var(--danger); }
.btn.small { min-height: 32px; padding: 6px 9px; border-radius: 8px; font-size: 12px; }
.btn.wide { width: 100%; margin-top: 4px; }

form label { display: grid; gap: 7px; color: #354052; font-size: 14px; font-weight: 650; }
input {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #cfd7e4;
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font-weight: 400;
    transition: border-color .18s, box-shadow .18s;
}
input:hover { border-color: #aeb9ca; }
input:focus { border-color: #7584e7; box-shadow: 0 0 0 3px rgba(67, 85, 217, .10); outline: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.stack-form { display: grid; gap: 16px; margin-top: 24px; text-align: left; }
.full-field { grid-column: 1 / -1; }
.form-actions { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.check { display: flex; align-items: center; align-self: end; min-height: 44px; gap: 9px; }
.check input { width: auto; min-height: auto; accent-color: var(--primary); }
.inline { display: inline-flex; }

.alert { margin-bottom: 17px; padding: 12px 14px; border: 1px solid; border-radius: 12px; }
.alert.success { border-color: #9ee2c7; background: #ecfbf4; color: #176345; }
.alert.danger { border-color: #f0bac5; background: #fff1f3; color: #96283d; }
.grid { display: grid; gap: 16px; }
.stats-grid { grid-template-columns: repeat(3, 1fr); margin-bottom: 20px; }
.dashboard-stats { grid-template-columns: repeat(4, 1fr); }
.stat { margin: 0; padding: 20px 22px; }
.stat span { display: block; color: var(--muted); font-size: 13px; font-weight: 650; }
.stat b { display: block; margin-top: 2px; font-size: 31px; letter-spacing: -.04em; }
.stat small { display: block; margin-top: 3px; color: #8992a3; font-size: 12px; }
.accent-stat { border-color: rgba(67, 85, 217, .28); background: linear-gradient(145deg, #fff, #f1f3ff); }
.accent-stat b { color: var(--primary); }
.section-card { padding: 0; overflow: hidden; }
.section-card > form, .section-card > .table-wrap, .section-card > .pagination { margin: 0 24px 24px; }
.section-title, .list-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 23px 24px 18px; }
.section-title p, .list-head p { margin-bottom: 0; font-size: 13px; }
.search { display: flex; min-width: min(400px, 100%); gap: 8px; }
.search input { min-height: 40px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; }
table { width: 100%; min-width: 980px; border-collapse: collapse; }
th, td { padding: 13px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { background: #f8f9fc; color: #697386; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; }
tbody tr:hover { background: #fbfcff; }
.url { max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.short-cell { display: flex; align-items: center; gap: 6px; }
.badge { display: inline-block; padding: 4px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.badge.ok { background: #dcf8eb; color: #176345; }
.badge.off { background: #fde8ec; color: #9b2940; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.copy { padding: 4px 7px; border: 0; border-radius: 7px; background: #eef0ff; color: var(--primary); cursor: pointer; font-size: 12px; }
.empty { padding: 32px; text-align: center; color: var(--muted); }
.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }

.analytics-card { overflow: hidden; }
.trend-wrap { margin: 0 24px 24px; padding: 16px 18px 11px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, #fafbff, #fff); }
.trend-chart { display: block; width: 100%; height: 230px; overflow: visible; }
.chart-grid-line { stroke: #e7eaf2; stroke-width: 1; stroke-dasharray: 5 5; }
.trend-area { fill: rgba(67, 85, 217, .10); }
.trend-line { fill: none; stroke: var(--primary); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.trend-dot { fill: #fff; stroke: var(--primary); stroke-width: 3; }
.trend-labels { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.trend-labels span { display: grid; gap: 1px; color: #8a93a5; text-align: center; font-size: 10px; }
.trend-labels b { color: #364052; font-size: 12px; }
.analytics-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; }
.compact-card { min-width: 0; }
.compact-card .section-title { padding-bottom: 12px; }
.rank-list { padding: 0 24px 22px; }
.rank-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rank-item:last-child { border-bottom: 0; }
.rank-number { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: #eef0ff; color: var(--primary); font-size: 12px; font-weight: 800; }
.rank-item div { min-width: 0; }
.rank-item a, .rank-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-item small { color: var(--muted); font-size: 11px; }
.rank-item > b { font-size: 18px; }
.compact-empty { margin: 8px 0 0; }
.breakdown-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 0 24px 24px; }
.breakdown-columns h3 { margin: 0 0 10px; color: #596477; font-size: 13px; }
.metric-list { display: grid; gap: 10px; }
.metric-list span { display: flex; min-width: 0; justify-content: space-between; gap: 10px; overflow: hidden; color: #596477; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.metric-list b { color: #263043; }
.metric-list progress { width: 100%; height: 7px; border: 0; border-radius: 99px; overflow: hidden; background: #eef1f6; }
.metric-list progress::-webkit-progress-bar { border-radius: 99px; background: #eef1f6; }
.metric-list progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #7180e8, #4355d9); }
.metric-list progress::-moz-progress-bar { border-radius: 99px; background: #4355d9; }
.badge.neutral { background: #edf0f5; color: #4f5b6f; }
.click-table code { padding: 3px 6px; border-radius: 6px; background: #f1f3f7; color: #4f5b6f; font-size: 12px; }

.auth-shell, .public-shell { display: grid; min-height: calc(100vh - 68px); place-items: center; }
.auth-card { width: 100%; max-width: 500px; padding: 38px; text-align: center; }
.back-link { margin-top: 20px; font-size: 14px; }
.hero { width: 100%; padding: 52px 38px; text-align: center; }
.hero-mark { width: 58px; height: 58px; border-radius: 18px; font-size: 1.45rem; }
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.hero h1 { margin: 10px auto 8px; max-width: 520px; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.12; }
.lead { color: var(--muted); font-size: 1.05rem; }
.stats { display: flex; justify-content: center; gap: 18px; }
.public-stats { margin: 30px 0; }
.public-stats span { min-width: 135px; padding: 15px 22px; border: 1px solid var(--line); border-radius: 14px; background: #fafbfe; }
.public-stats b, .public-stats small { display: block; }
.public-stats b { font-size: 1.65rem; }
.public-stats small { color: var(--muted); }
.message-card { width: 100%; padding: 42px; text-align: center; }

@media (max-width: 800px) {
    .container { width: min(100% - 24px, 1220px); margin: 18px auto; }
    .topbar, .list-head { align-items: stretch; flex-direction: column; }
    .topbar nav, .toolbar { width: 100%; }
    .topbar nav > *, .toolbar > * { flex: 1 1 auto; }
    .topbar nav .btn, .toolbar .btn { width: 100%; }
    .form-grid, .stats-grid, .dashboard-stats, .analytics-grid { grid-template-columns: 1fr; }
    .full-field { grid-column: auto; }
    .section-card > form, .section-card > .table-wrap, .section-card > .pagination { margin-right: 15px; margin-left: 15px; }
    .section-title, .list-head { padding-right: 15px; padding-left: 15px; }
    .search { min-width: 100%; }
    .auth-shell, .public-shell { min-height: calc(100vh - 36px); }
    .auth-card, .hero { padding: 32px 20px; }
    .tabbar { overflow-x: auto; }
    .tab { flex: 1 0 auto; min-width: 100px; }
    .trend-wrap { margin-right: 15px; margin-left: 15px; padding-right: 8px; padding-left: 8px; }
    .trend-chart { height: 180px; }
    .trend-labels span:nth-child(even) { visibility: hidden; }
    .breakdown-columns { grid-template-columns: 1fr; padding-right: 15px; padding-left: 15px; }
    .rank-list { padding-right: 15px; padding-left: 15px; }
}

@media (max-width: 480px) {
    .public-stats { gap: 9px; }
    .public-stats span { min-width: 0; flex: 1; padding: 13px 10px; }
    .form-actions .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}