:root {
    --site-accent: #2563eb;
    --site-accent-dark: #1d4ed8;
    --site-ink: #1e293b;
    --site-muted: #64748b;
    --site-ground: #f7f9fc;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body {
    margin: 0;
    min-width: 320px;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    color: var(--site-ink);
    background:
        radial-gradient(circle at 8% 4%, rgba(251, 207, 232, .16), transparent 28rem),
        radial-gradient(circle at 92% 12%, rgba(191, 219, 254, .2), transparent 30rem),
        var(--site-ground);
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    font-size: 16px;
    line-height: 1.6;
}
button, input, select { font: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
a, button, select { outline-offset: 3px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .42);
    outline-offset: 3px;
}
[hidden] { display: none !important; }
#app { flex: 1; width: min(1600px, 100%); margin: 0 auto; padding: 24px; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid rgba(226, 232, 240, .85);
    box-shadow: 0 1px 5px rgba(15, 23, 42, .04);
    backdrop-filter: blur(14px);
}
.site-topbar__inner {
    width: min(1200px, 100%);
    min-height: 64px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
}
.site-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    flex-shrink: 0;
}
.site-brand img {
    display: block;
    width: auto;
    max-width: 154px;
    height: 40px;
    object-fit: contain;
}
.season-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-left: 16px;
    padding: 8px 15px;
    color: #fff;
    background: var(--site-accent);
    border-radius: 22px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, .22);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s ease, transform .18s ease;
}
.season-label strong { color: #dbeafe; margin-left: 4px; }
.season-label:hover { background: var(--site-accent-dark); transform: translateY(-1px); }
.site-nav { margin-left: 28px; display: flex; align-items: center; }
.site-nav__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 44px;
    padding: 8px 18px;
    border-radius: 22px;
    color: var(--site-muted);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color .18s ease, background .18s ease;
}
.site-nav__link:hover { color: var(--site-accent); background: #eff6ff; }
.site-nav__link.active { color: #fff; background: var(--site-accent); }

.aniimo-database .header-top { margin-bottom: 24px; }
.aniimo-database .toolbar { margin-top: 0; }
.filter-native {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 44px;
    padding-right: 36px !important;
    text-align: left;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.filter-native:hover { border-color: #cbd5e1; }
.character-card { cursor: pointer; }
.character-card[hidden] { display: none !important; }
.catalog-empty {
    min-height: 280px;
    padding: 48px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--site-muted);
    text-align: center;
    background: rgba(255, 255, 255, .8);
    border: 1px solid #e9eef5;
    border-radius: 18px;
}
.catalog-empty strong { color: var(--site-ink); font-size: 18px; }
.catalog-empty button {
    min-height: 44px;
    margin-top: 12px;
    padding: 8px 18px;
    border: 0;
    border-radius: 22px;
    color: #fff;
    background: var(--site-accent);
    cursor: pointer;
}
.catalog-empty button:hover { background: var(--site-accent-dark); }

.detail-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--site-muted);
    font-size: 14px;
}
.detail-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--site-muted);
    text-decoration: none;
}
.detail-breadcrumb a:hover { color: var(--site-accent); }
.detail-back span { margin-right: 6px; font-size: 28px; line-height: 1; }
#detail-name { color: var(--site-ink); font-weight: 600; }
#detail-tabs { overflow-x: auto; scrollbar-width: thin; }
#detail-tabs .tab-btn { min-height: 44px; flex: 0 0 auto; cursor: pointer; }
#detail-tabs .tab-btn:disabled { cursor: wait; opacity: .55; }
.tab-pane:focus { outline: none; }
.detail-loading, .detail-error, .detail-empty {
    min-height: 220px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--site-muted);
    text-align: center;
    background: #fff;
    border: 1px solid #e9eef5;
    border-radius: 16px;
}
.detail-error button {
    min-height: 44px;
    padding: 8px 18px;
    border: 0;
    border-radius: 22px;
    color: #fff;
    background: var(--site-accent);
    cursor: pointer;
}
.profile-card .profile-header { min-height: 360px; }
.profile-card .main-illustration { user-select: none; -webkit-user-drag: none; }
.htg-spawn-heading { margin-top: 18px; }

.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 48px;
    padding: 22px 24px;
    color: #94a3b8;
    background: rgba(255, 255, 255, .82);
    border-top: 1px solid #edf1f5;
    font-size: 12px;
    line-height: 1.8;
    text-align: center;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--site-accent); }
.site-footer__police { display: inline-flex; align-items: center; gap: 4px; }
.site-footer__police img { width: 14px; height: 14px; object-fit: contain; opacity: .65; }

@media (max-width: 768px) {
    .site-topbar__inner { min-height: 60px; padding: 0 16px; }
    .site-brand img { max-width: 112px; height: 34px; }
    .season-label { margin-left: 10px; padding: 7px 11px; font-size: 12px; }
    .site-nav { margin-left: auto; }
    .site-nav__link { min-width: 54px; padding: 8px 13px; font-size: 14px; }
    .aniimo-database .header-top { margin-bottom: 20px; }
    .detail-breadcrumb { margin-bottom: 10px; padding: 0 4px; }
    .profile-card .profile-header { min-height: 300px; }
    .site-footer { margin-top: 32px; padding: 18px 16px; }
}

@media (max-width: 420px) {
    .site-brand img { max-width: 92px; }
    .season-label { margin-left: 8px; padding: 7px 9px; }
    .season-label strong { margin-left: 2px; }
    .site-nav__link { min-width: 48px; padding: 8px 10px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}