:root {
    --blue: #2f7bff;
    --blue-deep: #1d68f0;
    --ink: #1c2430;
    --muted: #8b93a1;
    --line: #e8edf3;
    --bg: #f4f7fb;
    --card: #fff;
    --red: #ff3b30;
    --green: #16a34a;
    --home-band: #DEEAFF;
    --away-band: #FFE2E2;
    --home-th: #EBF2FF;
    --away-th: #FFEDED;
    --col-ink: #9aa3b2;
    --sidebar: 256px;
    --composer-left: 17.91%;
    --composer-right: 22.97%;
    --composer-width: calc(100% - var(--composer-left) - var(--composer-right));
    --shadow: 0 12px 36px rgba(28, 45, 74, 0.12);
    --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
button, input, select { font-family: inherit; color: inherit; }
button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
img { display: block; }
[hidden] { display: none !important; }
a { color: var(--blue); }

.app { display: flex; height: 100vh; overflow: hidden; background: #fff; }
.sidebar {
    width: var(--sidebar);
    flex: none;
    height: 100vh;
    background: #fff;
    border-right: 0;
    display: flex;
    flex-direction: column;
    z-index: 20;
}
.side-brand { display: flex; align-items: center; justify-content: space-between; padding: 16px 14px 8px; }
.brand { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-width: 0; }
.brand-logo { width: 36px; height: 36px; border-radius: 10px; object-fit: cover; }
.brand-name { font-size: 22px; font-weight: 800; letter-spacing: 0.3px; }
.icon-btn, .collapse-btn {
    width: 32px; height: 32px; border: 0; background: transparent; color: #667085;
    border-radius: 8px; display: grid; place-items: center; flex: none;
}
.icon-btn svg, .collapse-btn svg, .icon-btn img, .collapse-btn img { width: 24px; height: 24px; }
.icon-btn:hover, .collapse-btn:hover { background: #f4f6f8; }
.side-nav { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; }
.nav-item {
    height: 42px; border: 0; background: transparent; border-radius: 10px;
    display: flex; align-items: center; gap: 10px; padding: 0 12px;
    color: #3a4454; font-size: 14px; text-align: left;
}
.nav-item.is-active { background: #eef3ff; color: var(--blue); font-weight: 700; }
.nav-item:hover { background: #f6f8fb; color: var(--blue); }
.nav-item.is-active:hover { background: #eef3ff; color: var(--blue); }
.nav-ico {
    width: 24px; height: 24px; display: inline-block; flex: none;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
}
.nav-ico img { display: none; }
.nav-item[data-nav="chat"] .nav-ico {
    -webkit-mask-image: url("../crests/images/icon_message_24@2x.png");
    mask-image: url("../crests/images/icon_message_24@2x.png");
}
.nav-item[data-nav="briefing"] .nav-ico {
    -webkit-mask-image: url("../crests/images/icon_calendar_24@2x.png");
    mask-image: url("../crests/images/icon_calendar_24@2x.png");
}
.nav-item[data-nav="library"] .nav-ico {
    -webkit-mask-image: url("../crests/images/icon_articl_24@2x.png");
    mask-image: url("../crests/images/icon_articl_24@2x.png");
}
.recent { flex: 1; min-height: 0; overflow: auto; padding: 8px 12px 12px; }
.recent-head {
    display: flex; align-items: center; justify-content: space-between;
    color: #a0a7b2; font-size: 13px; padding: 8px 6px;
}
.recent-tools { display: flex; align-items: center; gap: 6px; }
.archive-link {
    border: 0; background: transparent; color: #8b93a1; font-size: 12px; padding: 0 2px;
}
.archive-link:hover { color: var(--blue); }
.new-chat {
    width: 20px; height: 20px; border: 0; padding: 0; background: transparent;
    display: grid; place-items: center;
}
.new-chat img { width: 20px; height: 20px; }
.recent-list { display: flex; flex-direction: column; gap: 2px; }
.recent-empty { margin: 0; padding: 8px 10px; color: #a0a7b2; font-size: 14px; line-height: 20px; text-align: center}
.chat-row { position: relative; }
.chat-item {
    width: 100%; border: 0; background: transparent; text-align: left;
    border-radius: 8px; padding: 8px 52px 8px 10px; color: #3c4656; font-size: 14px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
}
.chat-item-title { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item:hover, .chat-item.is-active { background: #f4f7fb; }
.chat-item.is-active { color: var(--blue); }
.chat-row-ops {
    position: absolute; right: 4px; top: 8px; display: none; gap: 2px;
}
.chat-row:hover .chat-row-ops, .chat-row:focus-within .chat-row-ops { display: flex; }
.chat-row-ops button {
    border: 0; background: #fff; color: #8b93a1; font-size: 11px; line-height: 16px;
    border-radius: 6px; padding: 2px 4px;
}
.chat-row-ops button:hover { color: var(--blue); }
.archive-modal { width: min(520px, 100%); }
.archive-list { display: flex; flex-direction: column; gap: 8px; max-height: min(420px, 60vh); overflow: auto; }
.archive-row { display: flex; align-items: center; gap: 8px; background: #f5f6f8; border-radius: 8px; padding: 10px 12px; }
.archive-open { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 0; }
.archive-open strong, .archive-open em { display: block; }
.archive-open strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; color: #1c2430; }
.archive-open em { font-style: normal; color: #8b93a1; font-size: 12px; margin-top: 2px; }
.archive-row > button[data-chat-op] { border: 0; background: transparent; font-size: 13px; flex: none; }
.archive-row > button[data-chat-op="unarchive"] { color: #1b62f2; }
.archive-row > button[data-chat-op="delete"] { color: #c5363b; }
.archive-empty { margin: 8px 0; color: #8b93a1; text-align: center; }
.side-user { position: relative; display: flex; align-items: center; gap: 4px; padding: 12px; border-top: 1px solid #f2f4f7; }
.user-main {
    flex: 1; min-width: 0; border: 0; background: transparent; display: flex; align-items: center; gap: 8px;
    text-align: left; padding: 4px; border-radius: 10px;
}
.user-main:hover { background: #f6f8fb; }
.user-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.user-copy strong, .user-copy em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-copy strong { font-size: 14px; font-weight: 600; color: #1c2430; }
.user-copy em { font-style: normal; color: #3c4656; font-size: 12px; }
.avatar {
    width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex: none;
    display: grid; place-items: center; background: #7b61ff; color: #fff; font-weight: 700;
}
.avatar svg, .avatar img { width: 36px; height: 36px; object-fit: cover; display: block; }
.avatar.sm { width: 36px; height: 36px; font-size: 14px; }
.avatar.alt { background: #e8edf5; color: #667085; }
.user-more {
    position: relative;
    width: 32px; height: 32px; border: 0; background: transparent; color: #98a0aa;
    border-radius: 8px; display: grid; place-items: center; padding: 0;
}
.cs-more-badge, .cs-launch-badge {
    position: absolute; top: -2px; right: -2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: #E5484D; color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
    box-shadow: 0 0 0 2px #fff;
}
.cs-launch { position: relative; margin-left: auto; }
.profile-row em.is-alert { color: #E5484D; font-weight: 700; }
.user-more img { width: 24px; height: 24px; }
.user-more:hover { background: #f4f6f8; }
.profile-pop {
    position: absolute; left: 8px; right: 8px; bottom: 64px;
    background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(16, 24, 40, .14);
    border: 1px solid #eef1f5; padding: 12px 8px 8px; z-index: 30;
}
.profile-card { padding: 4px 10px 8px; }
.profile-card strong { display: block; margin-bottom: 12px; font-size: 16px; font-weight: 600; line-height: 22px; color: #1c2430; }
.profile-plan { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; color: #1c2430; font-size: 14px; }
.profile-plan > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upgrade { flex: none; white-space: nowrap; line-height: 28px; border: 0; background: #2f7bff; color: #fff; height: 28px; padding: 0 14px; border-radius: 14px; font-size: 13px; }
.upgrade:hover { background: #1d68f0; }
.profile-row {
    width: 100%; min-height: 40px; border: 0; background: transparent; border-radius: 8px;
    display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 14px; color: #1c2430;
}
.profile-row em { font-style: normal; color: #98a2b3; font-size: 14px; }
.profile-row:hover, .lang-list button:hover { background: #f6f8fb; }
.profile-lang { position: relative; }
.profile-lang:has(#lang-pop:not([hidden])) > .profile-row { background: #f6f8fb; }
.profile-row.danger { color: #e11d48; justify-content: flex-start; }
.lang-list {
    position: absolute; left: calc(100% + 8px); top: 0; min-width: 148px;
    padding: 6px; background: #fff; border: 1px solid #eef1f5; border-radius: 12px;
    box-shadow: 0 8px 28px rgba(16, 24, 40, .14); z-index: 31;
}
.lang-list::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 16px;
}
.lang-list button {
    width: 100%; text-align: left; border: 0; background: transparent; height: 36px;
    border-radius: 8px; padding: 0 14px; font-size: 14px; color: #1c2430;
}
.lang-list button.is-on { color: var(--blue); font-weight: 600; }

.main { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.mobile-bar { display: none; align-items: center; gap: 8px; height: 56px; padding: 0 12px; background: #fff; border-bottom: 1px solid #eef1f5; flex: none; }
.view { flex: 1; min-height: 0; overflow: auto; }
.chat-view {
    position: relative;
    display: flex; flex-direction: column; overflow: hidden;
    background-color: #fff;
}
.chat-view::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    aspect-ratio: 2579 / 610;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 52%, #fff 74%),
        linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42)),
        var(--hero);
    background-repeat: no-repeat;
    background-position: left top, left top, center center;
    background-size: 100% 100%, 100% 100%, 100% 100%;
}
.chat-banner { flex: none; position: relative; z-index: 2; }
.chat-scroll,
.composer-wrap { position: relative; z-index: 1; }
.chat-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
#thread { padding: 12px 0 20px; }
.chat-col { width: min(920px, calc(100% - 48px)); margin: 0 auto; }
.hero { text-align: left; padding: 64px 8% 0; }
.hero h1 {
    margin: 0; font-size: 32px; font-weight: 600; line-height: 32px;
    letter-spacing: 0; color: #1c2430;
}
.hero p {
    width: 100%; max-width: none; margin: 10px 0 0;
    color: #1c2430; font-size: 16px; font-weight: 400; line-height: 24px;
}
.chips { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; }
.chips button {
    border: 0; background: transparent; color: #5b6473; font-size: 18px; font-weight: 400;
    line-height: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 2px;
}
/*.chips button.is-on { color: var(--blue); font-weight: 400; }*/
.chip-ico { width: 22px; height: 22px; object-fit: contain; mix-blend-mode: multiply; }
#reco-block { margin-top: 36px; padding-bottom: 12px; }
#reco-block h2 {
    margin: 0; text-align: left; font-size: 16px; font-weight: 400;
    line-height: 22px; color: #8b93a1;
}
.reco-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.reco-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 90px;
    border: 1px solid #f0f2f5;
    background: #fff;
    border-radius: 8px;
    padding: 8px 14px;
    gap: 8px;
    text-align: left;
    box-shadow: none;
}
.reco-card:hover { background: #f7f8fa; }
.bone {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #c5d0de 0%, #b7c4d4 40%, #e8f1ff 50%, #b7c4d4 60%, #c5d0de 100%);
    background-size: 220% 100%;
    animation: bone-sheen 1.15s ease-in-out infinite;
}
.bone-card {
    box-sizing: border-box;
    height: 90px;
    border: 1px solid #d5deea;
    border-radius: 8px;
    background: #e7edf4;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.bone-line.is-short { width: 42%; }
.bone-line.is-mid { width: 68%; }
.bone-row {
    display: grid;
    grid-template-columns: 108px 72px minmax(0, 1fr) 72px;
    gap: 8px 16px;
    align-items: center;
    min-height: 56px;
    background: #e7edf4;
    border: 1px solid #d5deea;
    border-radius: 8px;
    padding: 12px 16px;
}
.bone-chip { width: 100%; height: 12px; }
.bone-wide { width: 100%; height: 14px; }
.bone-btn { width: 100%; height: 30px; border-radius: 8px; }
.bone-more { display: flex; justify-content: center; padding: 10px 0 4px; }
.bone-more span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #e8eef6;
    border-top-color: #1b62f2;
    animation: unlock-spin .7s linear infinite;
}
@keyframes bone-sheen {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
.reco-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    height: 14px;
    margin-bottom: 0;
    color: #5b6473;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
}
.reco-league, .reco-time { flex: none; white-space: nowrap; }
.reco-team {
    display: flex; align-items: center; gap: 8px;
    height: 22px;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
    font-size: 14px; font-weight: 600; line-height: 14px; color: #5b6473; padding: 0;
}
.crest {
    display: inline-grid; place-items: center; border-radius: 50%; font-weight: 800; flex: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); line-height: 1;
}
img.crest {
    display: block; border-radius: 0; box-shadow: none; background: transparent;
    object-fit: contain;
}

.composer-wrap {
    flex: none; z-index: 5;
    background: #fff;
    padding: 8px 0 calc(12px + env(safe-area-inset-bottom));
}
.composer-col { display: flex; flex-direction: column; align-items: flex-start; }
.pick-btn {
    height: 30px; border-radius: 999px; border: 1px solid #e7eaef; background: #fff;
    color: #1c2430; font-size: 14px; font-weight: 400; line-height: 20px; padding: 0 12px 0 14px;
    display: inline-flex; align-items: center; gap: 4px;
    box-shadow: 0 1px 4px rgba(28, 39, 60, .04);
}
.pick-btn:hover { color: #1c2430; border-color: #dfe4eb; }
.pick-btn img, .pick-btn svg { width: 16px; height: 16px; flex: none; }
.ask { position: relative; width: 100%; margin-top: 10px; }
.ask input {
    width: 100%; height: 48px; border-radius: 999px; border: 1px solid #e6ebf2;
    background: #fff; padding: 0 58px 0 18px; font-size: 14px; outline: none;
    box-shadow: 0 4px 16px rgba(28, 39, 60, .04);
}
.ask input:focus { border-color: #b9d2ff; }
.ask input::placeholder { color: #c5cad3; }
.send {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #fff;
    display: grid; place-items: center; padding: 0;
}
.send:hover { background: transparent; }
.send img, .send svg { width: 32px; height: 32px; }
.disclaimer { width: 100%; margin: 8px 0 0; text-align: center; color: #c5cad3; font-size: 12px; line-height: 1.6; }

.msg-time { text-align: center; color: #c5cad3; font-size: 12px; margin: 16px 0 8px; }
.think-card {
    flex: 1; min-width: 0; max-width: 360px; background: #f5f6f8; border-radius: 12px;
    padding: 12px 14px;
}
.think-card ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.think-card li { display: flex; align-items: center; gap: 8px; color: #c5cad3; font-size: 13px; line-height: 18px; }
.think-card li.is-done { color: #8b93a1; }
.think-card li.is-on { color: #1c2430; font-weight: 600; }
.think-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #d5dbe3; flex: none;
}
.think-card li.is-done .think-dot { background: #8fb4ff; }
.think-card li.is-on .think-dot { background: #1b62f2; box-shadow: 0 0 0 4px rgba(27, 98, 242, .15); }
.msg { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0; width: 100%; }
.msg-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.msg-col > .ai-text { flex: none; align-self: flex-start; width: fit-content; max-width: 100%; }
.msg-col > .ai-brief { flex: none; width: 100%; }
.msg.user { justify-content: flex-end; align-items: center; }
.bubble {
    max-width: min(72%, 480px); background: #d7e8ff; color: #2a3340;
    border-radius: 8px; padding: 8px 14px; font-size: 14px; line-height: 1.5;
}
.ai-ava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.8); }
.ask-card, .ai-text {
    flex: 1; min-width: 0; width: 100%; background: #f5f6f8; border: 0;
    border-radius: 12px; padding: 14px 12px 10px; box-shadow: none;
}
.ai-text {
    flex: none; align-self: flex-start; width: fit-content;
    max-width: calc(100% - 44px);
}
.ask-card > p, .ai-text p { margin: 0 0 10px; color: #2c3440; font-size: 14px; line-height: 1.5; }
.ai-text p:last-child, .ask-card > p:last-child { margin-bottom: 0; }
.ask-row {
    width: 100%; border: 1px solid #eceff3; background: #fff; border-radius: 6px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    min-height: 40px; padding: 6px 14px; margin-top: 16px; text-align: left;
}
.ask-row:hover { border-color: #d7e3f5; background: #fbfdff; }
.ask-meta { justify-self: start; display: inline-flex; align-items: center; gap: 16px; color: #9aa3b2; font-size: 12px; line-height: 1; white-space: nowrap; }
.ask-teams {
    grid-column: 2; justify-self: center;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    color: #1c2430; font-weight: 650; font-size: 14px; white-space: nowrap;
}
.ask-teams .side { flex: none; gap: 4px; white-space: nowrap; }
.ask-teams .crest { font-weight: 700; box-shadow: none; }
.ask-teams em { color: #98a2b3; font-size: 12px; font-weight: 500; letter-spacing: 0; }
.more-link {
    display: block; width: fit-content; margin: 12px auto 2px; padding: 0; border: 0;
    background: transparent; color: #98a2b3; font-size: 13px; line-height: 1;
}
.more-link:hover { color: #667085; }
.ai-brief {
    flex: 1; min-width: 0; border-radius: 16px; overflow: hidden; padding: 16px 16px 14px;
    background: #c5e4ff var(--brief-bg) right center / cover no-repeat;
}
.ai-brief-kicker {
    display: flex; align-items: center; justify-content: flex-start; gap: 6px;
    color: #06427F; font-weight: 700; font-size: 16px; line-height: 22px;
}
.ai-brief-kicker img { width: 24px; height: 24px; border-radius: 0; object-fit: contain; }
.ai-vs { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 14px; font-size: 22px; font-weight: 800; flex-wrap: wrap; color: #1c2430; }
.ai-vs .side { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ai-vs em { font-style: normal; color: #667085; font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.brief-panel {
    background: linear-gradient(135deg, #E9F4FF 0%, #C6E2FF 100%);
    border-radius: 16px;
    padding: 14px 14px 12px;
}
.brief-panel h3 { margin: 0 0 4px; font-size: 15px; font-weight: 750; color: #1c2430; }
.brief-panel > p { margin: 0 0 12px; color: #8b93a1; font-size: 12px; line-height: 1.6; }
.brief-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ai-brief .brief-report {
    margin: 10px 0 0;
    padding: 12px;
    border: 0;
    border-radius: 12px;
    background: #fff;
}
.ai-brief .brief-report-copy { align-items: flex-start; }
.ai-brief .brief-report-text { display: block; min-width: 0; }
.ai-brief .brief-report-copy { flex: 1; }
.ai-brief .brief-report-line { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.ai-brief .brief-report-line strong { white-space: nowrap; }
.ai-brief .brief-report-text small { display: block; margin-top: 2px; color: #8B93A1; font-size: 12px; line-height: 18px; }
.ai-brief .brief-note {
    margin: 10px 0 0;
    color: #aac1db;
    font-size: 12px;
    line-height: 20px;
}
.brief-mini {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 88px; padding: 12px 10px 12px 14px;
    background: #fff; border: 0; border-radius: 12px;
    text-align: left; min-width: 0; box-shadow: none;
}
.brief-mini:hover { background: #fbfdff; }
.brief-mini .mini-copy { flex: 1; min-width: 0; }
.brief-mini .mini-copy strong { display: block; color: #1c2430; font-size: 14px; font-weight: 750; line-height: 1.3; }
.brief-mini .mini-copy em {
    display: block; margin-top: 4px; color: #8b93a1; font-style: normal;
    font-size: 12px; line-height: 1.45;
}
.brief-mini .mini-art {
    width: 56px; height: 56px; flex: none; display: grid; place-items: center; overflow: hidden;
}
.brief-mini .mini-art img, .brief-mini .sched-art { width: 56px; height: 56px; object-fit: contain; }
.digest-page .digest-card { width: min(840px, 100%); margin: 0 auto; }
.digest-card {
    flex: none;
    min-width: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #E6EEF8;
}
.digest-head {
    padding: 16px 18px 18px;
    background:
        linear-gradient(100deg, rgba(226, 242, 255, 0.94) 0%, rgba(214, 234, 255, 0.78) 42%, rgba(214, 234, 255, 0.2) 100%),
        var(--brief-bg) right center / cover no-repeat;
}
.digest-kicker {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    color: #1C68FF;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}
.digest-kicker img { width: 22px; height: 22px; border-radius: 0; object-fit: contain; }
.digest-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 14px 0 0;
    font-size: 18px;
    font-weight: 600;
    flex-wrap: wrap;
    color: #1C2024;
}
.digest-vs .side, .ask-teams .side { display: inline-flex; align-items: center; min-width: 0; }
.digest-vs .side { gap: 8px; }
.ask-teams .side { gap: 4px; }
.digest-vs em { font-style: normal; color: #80838D; font-size: 14px; font-weight: 600; letter-spacing: 1px; }
.digest-vs .crest,
.digest-vs img.crest { width: 36px; height: 36px; border-radius: 50%; object-fit: contain; }
.digest-body { padding: 16px 16px 14px; background: #fff; }
.brief-block { margin-top: 18px; }
.brief-block:first-child { margin-top: 0; }
.brief-sec {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: #1C2024;
    line-height: 24px;
}
.brief-ico {
    width: 18px;
    height: 18px;
    flex: none;
    background: #1C68FF;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.brief-ico.is-doc {
    -webkit-mask-image: url("../crests/images/icon_articl_24@2x.png");
    mask-image: url("../crests/images/icon_articl_24@2x.png");
}
.brief-ico.is-user {
    -webkit-mask-image: url("../crests/images/icon_account_24@2x.png");
    mask-image: url("../crests/images/icon_account_24@2x.png");
}
.brief-count {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #1C68FF;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    line-height: 18px;
    text-align: center;
}
.brief-lead {
    margin: 0 0 12px;
    color: #80838D;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
}
.digest-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.digest-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 92px;
    padding: 14px 12px 14px 14px;
    overflow: hidden;
    background: #E9F6FF;
    border: 0;
    border-radius: 12px;
    text-align: left;
    min-width: 0;
}
.digest-tile:hover { background: #E9F6FF; }
.digest-tile .mini-copy { position: relative; z-index: 1; flex: 1; min-width: 0; }
.digest-tile .mini-copy strong {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #60646C;
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}
.digest-tile .tile-go { width: 16px; height: 16px; flex: none; object-fit: contain; }
.digest-tile .mini-copy em {
    display: -webkit-box;
    margin-top: 4px;
    color: #80838D;
    font-style: normal;
    font-size: 14px;
    line-height: 18px;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.digest-tile .mini-art {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 52%;
    height: auto;
    margin: 0;
    display: block;
    pointer-events: none;
}
.digest-tile .mini-art img,
.digest-tile .sched-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
}
.digest-tile .mini-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(233, 246, 255, 0) 8%, #E9F6FF 72%);
}
.brief-expert {
    margin-top: 10px;
    padding: 12px 12px 10px;
    background: #fff;
    border: 1px solid #EEF1F6;
    border-radius: 12px;
    cursor: pointer;
}
.brief-ex-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brief-expert .expert-ava { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; }
.brief-ex-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brief-ex-id strong { font-size: 14px; font-weight: 600; color: #1C2024; line-height: 20px; }
.brief-ex-id small {
    align-self: flex-start;
    max-width: 100%;
    height: 18px;
    padding: 0 4px;
    border: 1px solid #F6AF09;
    border-radius: 4px;
    background: #FFF8E6;
    color: #F6AF09;
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brief-ex-title {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #1C2024;
    line-height: 22px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.brief-ex-title .badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 18px;
    margin: 2px 6px 0 0;
    padding: 0;
    border-radius: 4px;
    vertical-align: top;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 16px;
}
.brief-ex-title .badge.live { color: #EF2F2F; background: #FECFCF; }
.brief-ex-title .badge.pack { color: #BE1AFF; background: #F7DFFF; }
.brief-ex-excerpt {
    margin: 4px 0 0;
    color: #80838D;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.brief-ex-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}
.brief-ex-foot > span:first-child { color: #B0B6C0; font-size: 12px; line-height: 18px; }
.brief-ex-unlock {
    flex: none;
    height: 28px;
    padding: 0 10px;
    border-radius: 6px;
    background: linear-gradient(115deg, #55BEFF 0%, #1C68FF 100%);
    color: #fff;
    font-size: 13px;
    line-height: 28px;
    white-space: nowrap;
}
.brief-ex-more { flex: none; color: #1C68FF; font-size: 13px; line-height: 20px; white-space: nowrap; }
.brief-more {
    display: block;
    margin: 12px auto 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1C68FF;
    font-size: 14px;
    line-height: 22px;
}
.brief-empty { padding: 28px 12px 18px; text-align: center; }
.brief-empty img { width: 120px; height: auto; margin: 0 auto 8px; object-fit: contain; }
.brief-empty strong { display: block; color: #1C2024; font-size: 15px; font-weight: 600; line-height: 22px; }
.brief-empty p { margin: 6px 0 0; color: #80838D; font-size: 13px; line-height: 20px; }
.brief-report {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #F0F2F5;
}
.brief-report-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brief-report-copy img { width: 20px; height: 20px; flex: none; object-fit: contain; }
.brief-report-copy strong { color: #1C2024; font-size: 15px; font-weight: 600; line-height: 22px; }
.brief-report-copy em {
    flex: none;
    height: 18px;
    padding: 0 6px;
    border-radius: 4px;
    background: linear-gradient(100deg, #FFBE62 0%, #FFDFA3 100%);
    color: #813A00;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
}
.brief-report-btn {
    flex: none;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(115deg, #55BEFF 0%, #1C68FF 100%);
    color: #fff;
    font-size: 13px;
    line-height: 32px;
    white-space: nowrap;
}
.brief-fine {
    margin: 10px 0 0;
    color: #B0B6C0;
    font-size: 12px;
    line-height: 18px;
}

.page { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 22px 0 40px; }
.page-intro h1, .page-title { margin: 0 0 6px; font-size: 28px; }
.page-intro p, .cycle-sub, .vip-sub { margin: 0; color: #667085; line-height: 1.7; }
.digest-list { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.digest {
    background: #fff; border-radius: 16px; padding: 16px 18px; border: 1px solid #eef2f7;
    display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center;
}
.digest-top { display: flex; gap: 10px; color: #98a0aa; font-size: 13px; }
.digest-teams { display: flex; align-items: center; gap: 8px; font-weight: 750; flex-wrap: wrap; }
.digest p { grid-column: 1; margin: 0; color: #8b93a1; font-size: 13px; }
.digest .btn-primary { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.league-row { display: flex; gap: 8px; overflow: auto; padding: 16px 0; }
.league-row button, .day-row button, .side-toggle button, .venue-tabs button {
    flex: none; height: 32px; padding: 0 12px; border-radius: 8px; border: 0; background: #eef1f6; color: #4b5563; font-size: 13px;
}
.league-row button.is-active, .day-row button.is-active, .side-toggle button.is-active, .venue-tabs button.is-active {
    background: var(--blue); color: #fff;
}
.expert-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 16px;
}
.expert-card {
    box-sizing: border-box;
    height: 193px;
    background: #fff;
    border: 1px solid #F0F0F3;
    border-radius: 16px;
    padding: 16px 16px 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
}
.expert-card.has-match { height: auto; min-height: 193px; }
.expert-top {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    flex: none;
    min-width: 0;
}
.expert-card .expert-ava {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex: none;
}
.expert-id {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    height: 44px;
}
.expert-id strong {
    display: block;
    height: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #1C2024;
    line-height: 20px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.expert-id small {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    box-sizing: border-box;
    max-width: 100%;
    height: 19px;
    padding: 0 4px;
    background: #FFF8E6;
    border: 1px solid #F6AF09;
    border-radius: 4px;
    color: #F6AF09;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.expert-card .badge {
    position: static;
    flex: none;
    width: 40px;
    height: 20px;
    margin: 2px 6px 0 0;
    padding: 0;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 16px;
}
.expert-card .badge.live { color: #EF2F2F; background: #FECFCF; }
.expert-card .badge.pack { color: #BE1AFF; background: #F7DFFF; }
.expert-title {
    margin: 10px 0 0;
    height: 48px;
    flex: none;
    font-size: 16px;
    font-weight: 400;
    color: #1C2024;
    line-height: 24px;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.expert-excerpt {
    margin: 4px 0 0;
    height: 20px;
    flex: none;
    font-size: 14px;
    font-weight: 400;
    color: #60646C;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.expert-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 28px;
    flex: none;
}
.expert-time {
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    color: #80838D;
    line-height: 20px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.expert-unlock {
    flex: none;
    width: 94px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(115deg, #55BEFF 0%, #1C68FF 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.expert-more {
    flex: none;
    color: #1C68FF;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
}
.match-line {
    margin-top: 6px;
    color: #80838D;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.back {
    border: 0; background: transparent; color: #4b5563; padding: 0 0 12px; font-size: 14px;
    display: inline-flex; align-items: center; gap: 2px;
}
.back img { width: 16px; height: 16px; transform: rotate(90deg); }
.scoreboard {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
    min-height: 168px; border-radius: 16px; padding: 18px 22px; margin-bottom: 14px;
    background: #e7f4ff var(--score-bg) center / cover no-repeat; color: #1c2430;
}
.sb-team { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; min-width: 0; }
.sb-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-team.left { justify-content: flex-end; }
.sb-score { font-size: 32px; font-weight: 800; line-height: 1; min-width: 18px; text-align: center; }
.sb-mid { text-align: center; min-width: 150px; }
.sb-league,
.sb-time {
    font-weight: 400;
    font-size: 16px;
    color: #1C2024;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}
.sb-mid b { display: block; margin-top: 4px; font-size: 16px; color: #3c4656; }
.tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tabs { display: flex; gap: 8px; overflow: auto; }
.tabs button {
    flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 8px;
    background: #eef1f6; color: #5c6570; display: inline-flex; align-items: center; gap: 4px;
}
.tabs button.is-active { background: var(--blue); color: #fff; }
.lock-mini {
    width: 16px;
    height: 16px;
    flex: none;
    background: currentColor;
    -webkit-mask: url("../crests/images/icon_password_24@2x.png") center / contain no-repeat;
    mask: url("../crests/images/icon_password_24@2x.png") center / contain no-repeat;
}
#tab-report.is-open .lock-mini { display: none; }
.msg .avatar { width: 36px; height: 36px; font-size: 14px; }
.msg.user .avatar { background: #f0b56a; color: #fff; }
.msg .avatar svg, .msg .avatar img { width: 36px; height: 36px; object-fit: cover; display: block; }
.side-toggle, .venue-tabs { display: flex; gap: 6px; flex: none; }
.panel { background: #fff; border-radius: 14px; border: 1px solid #eef2f7; overflow: hidden; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid { column-gap: 37px; }
.team-head { padding: 14px 16px; font-weight: 800; }
.team-head.home { background: var(--home-band); }
.team-head.away { background: var(--away-band); }
.panel.team-panel {
    width: 100%;
    border: 0;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}
.team-head.team-banner {
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    padding: 0 14px;
    border-radius: 0;
    display: flex;
    align-items: center;
    background-color: #DEEAFF;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
}
.team-head.team-banner.home {
    background-color: #DEEAFF;
    background-image: linear-gradient(90deg, #DEEAFF 0%, #DEEAFF 46%, rgba(222, 234, 255, .18) 100%), var(--brief-bg);
}
.team-head.team-banner.away {
    background-color: #FFE2E2;
    background-image: linear-gradient(90deg, #FFE2E2 0%, #FFE2E2 46%, rgba(255, 226, 226, .18) 100%), var(--brief-bg);
}
.panel:has(> .team-head.home) .sched thead th {
    background: var(--home-th);
    color: var(--col-ink); font-weight: 500;
}
.panel:has(> .team-head.away) .sched thead th {
    background: var(--away-th);
    color: var(--col-ink); font-weight: 500;
}
.form-col:has(.form-sum.home) .result thead th {
    background: #EBF2FF;
    color: var(--col-ink); font-weight: 500;
}
.form-col:has(.form-sum.away) .result thead th {
    background: #FFEDED;
    color: var(--col-ink); font-weight: 500;
}
.form-col .result thead th {
    height: 36px;
    padding: 0 8px;
    border-radius: 0;
    box-sizing: border-box;
    vertical-align: middle;
}
.form-sum {
    box-sizing: border-box;
    height: 88px;
    padding: 16px;
    border-radius: 8px 8px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.form-sum.home { background: #DEEAFF; }
.form-sum.away { background: #FFE2E2; }
.form-sum-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 32px;
}
.form-sum-name {
    min-width: 0;
    height: 32px;
    font-weight: 600;
    font-size: 24px;
    color: #1C2024;
    line-height: 32px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-sum-rate {
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 400;
    font-size: 16px;
    color: #1C2024;
    line-height: 24px;
    text-align: left;
}
.form-sum-rate > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-sum .wdl { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; flex: none; line-height: 24px; }
.form-sum .wdl b { font-weight: 600; }
.form-sum .wdl b.w { color: #1C68FF; }
.form-sum .wdl b.d { color: #16A34A; }
.form-sum .wdl b.l { color: #EF2F2F; }
.result thead th { background: #f7f9fc; color: #98a0aa; font-weight: 600; text-align: center; }
.result td { text-align: center; }
.sec-title { display: flex; align-items: center; gap: 8px; font-size: 15px; margin: 0; }
.sec-title::before, .block-title::before {
    content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--blue); display: inline-block;
}
.block-title { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; font-size: 15px; }
.pad { padding: 12px 14px 16px; }
.info-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 8px;
}
.info-item {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 24px;
}
.info-k,
.info-v {
    flex: none;
    height: 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    white-space: nowrap;
}
.info-k { color: #60646C; }
.info-v { color: #1C2024; }
.form-line { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 8px; }
.form-line small { color: #8b93a1; }
.wdl b.w { color: var(--green); } .wdl b.d { color: var(--blue); } .wdl b.l { color: var(--red); }
.hist-note { margin: 8px 0; color: #667085; font-size: 13px; }
.h2h { margin-top: 14px; }
.metric { margin: 0 0 14px; }
.metric:last-child { margin-bottom: 2px; }
.metric-scale {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    margin: 0 0 6px; color: #1c2430; font-size: 13px; font-weight: 700; line-height: 1;
}
.metric-scale em {
    justify-self: center; margin: 0; font-style: normal; font-weight: 400; font-size: 13px;
    color: #98a0aa; line-height: 1; white-space: nowrap;
}
.metric .bar {
    display: flex; align-items: center; gap: 18px; height: 4px; background: transparent;
}
.metric .bar .track {
    flex: 1; height: 4px; border-radius: 99px; background: #e7edf4; overflow: hidden;
}
.metric .bar .track.away { display: flex; justify-content: flex-end; }
.metric .bar .track i { display: block; height: 100%; border-radius: 99px; }
.metric .bar .track.home i { background: #3b82f6; }
.metric .bar .track.away i { background: #fb7185; }
.h2h-slot { width: 100%; }
.h2h-fit { width: 100%; }
.h2h-head {
    box-sizing: border-box;
    width: min(1071px, 100%);
    height: 172px;
    margin: 0 auto 8px;
    border-radius: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 20px;
}
.h2h-side { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 16px; font-weight: 800; }
.h2h-side b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h2h-side.right { justify-content: flex-end; }
.h2h-bars {
    width: min(720px, 100%);
    justify-self: center;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}
.h2h-metric { width: 100%; }
.h2h-metric-top {
    height: 24px;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 80px;
    align-items: center;
}
.h2h-metric-top span {
    width: 80px;
    height: 24px;
    justify-self: center;
    font-weight: 600;
    font-size: 16px;
    color: #1C2024;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}
.h2h-metric-top span:nth-child(2) {
    width: auto;
    min-width: 168px;
    max-width: 100%;
    padding: 0 8px;
    white-space: nowrap;
    justify-self: center;
}
.h2h-metric-bars {
    height: 8px;
    margin-top: 2px;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 80px;
    align-items: center;
}
.h2h-metric-bars .pair {
    grid-column: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    min-width: 0;
}
.h2h-metric-bars .home { display: flex; justify-content: flex-end; min-width: 0; }
.h2h-metric-bars .away { display: flex; justify-content: flex-start; min-width: 0; }
.h2h-metric-bars i {
    display: block;
    height: 8px;
    border-radius: 36px;
    max-width: 100%;
}
.h2h-metric-bars .home i { background: #5E93FF; }
.h2h-metric-bars .away i { background: #FF6363; }
.h2h .h2h-row {
    box-sizing: border-box;
    width: min(1071px, 100%);
    height: 65px;
    margin: 0 auto 8px;
    padding: 0 16px;
    border: 1px solid #F0F0F3;
    border-radius: 0;
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr) 164px;
    align-items: center;
    column-gap: 12px;
}
.h2h .h2h-row .when {
    width: 164px;
    height: 24px;
    font-weight: 400;
    font-size: 16px;
    color: #1C2024;
    line-height: 24px;
    text-align: left;
    font-style: normal;
}
.h2h .h2h-row .h2h-league {
    width: 164px;
    height: 24px;
    justify-self: end;
    font-weight: 400;
    font-size: 16px;
    color: #1C2024;
    line-height: 24px;
    text-align: right;
    font-style: normal;
}
.h2h .h2h-row .h2h-mid {
    display: grid;
    grid-template-columns: 80px 32px auto 32px 80px;
    justify-content: center;
    align-items: center;
    column-gap: 8px;
    min-width: 0;
}
.h2h .h2h-row .hn {
    width: 80px;
    height: 24px;
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: #1C2024;
    line-height: 24px;
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h2h .h2h-row .hn.home { text-align: right; justify-self: end; }
.h2h .h2h-row .hn.away { text-align: left; justify-self: start; }
.h2h .h2h-row .crest {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.h2h .h2h-row .hs {
    min-width: 47px;
    height: 32px;
    margin: 0;
    padding: 0;
    font-family: "Roboto Flex", "Roboto", sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #1C2024;
    line-height: 32px;
    text-align: center;
    font-style: normal;
    letter-spacing: 0;
    white-space: nowrap;
}
.plan-match {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 4px; border-bottom: 1px solid #f2f4f7; font-size: 14px;
}
.h2h-mid { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; flex-wrap: wrap; }
.badge {
    position: absolute; top: 12px; right: 12px; font-size: 12px; font-style: normal;
    padding: 2px 8px; border-radius: 999px;
}
.badge.live { color: #ef4444; background: #fff1f2; }
.badge.pack { color: #7c3aed; background: #f5f3ff; }
.plan-author .badge { position: static; margin-left: 0; }
.table-scroll { overflow: auto; width: 100%; min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 11px 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid #f3f5f8; }
.sched .col-match { text-align: center;     color: #60646C;
    line-height: 24px;
    font-style: normal;
    text-transform: none;}
.sched-when .sched-dt,
.sched-when .sched-league {
    font-size: 14px;
    font-weight: 400;
    color: #60646C;
    line-height: 22px;
}
.sched-status {
    color: #80838D;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}
.sched-bone {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 16px;
}
th { background: #f7f9fc; color: #98a0aa; font-weight: 600; }
td.num, th.num { text-align: right; }
.player { display: inline-flex; align-items: center; gap: 6px; }
.p-ava { width: 22px; height: 22px; border-radius: 50%; color: #fff; display: inline-grid; place-items: center; font-size: 11px; }
img.p-ava { object-fit: cover; }
.plus { color: #4fca8c; font-weight: 500; }
.minus { color: #f05656; font-weight: 500; }
.empty { text-align: center; color: var(--muted); padding: 28px 10px; }

.locked {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px;
}
.locked h3 {
    margin: 16px 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1c2024;
}
.locked p {
    margin: 0 0 20px;
    max-width: 560px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #8b93a1;
}
.locked .btn-primary {
    height: 36px;
    padding: 0 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
}
.unlock-wait {
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 16px 24px;
    border-radius: 16px;
    background:
        radial-gradient(420px 180px at 50% 0%, rgba(47, 123, 255, .12), transparent 70%),
        linear-gradient(180deg, #f4f8ff 0%, #fff 240px);
}
.unlock-card {
    width: min(440px, 100%);
    padding: 28px 22px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid #e5eefb;
    box-shadow: 0 12px 32px rgba(47, 123, 255, .08);
    text-align: center;
}
.unlock-orb {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
}
.unlock-orb span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(47, 123, 255, .16);
    border-top-color: #2f7bff;
    border-right-color: #8eb4ff;
    animation: unlock-spin 1.15s linear infinite;
}
.unlock-orb span:nth-child(2) {
    inset: 8px;
    border-top-color: #7aa8ff;
    border-right-color: transparent;
    animation-duration: 1.7s;
    animation-direction: reverse;
}
.unlock-orb svg {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    fill: #2f7bff;
}
.unlock-kicker {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .08em;
    color: #8b93a1;
}
.unlock-phrase {
    margin: 8px 0 0;
    min-height: 48px;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: #1c2430;
    overflow-wrap: anywhere;
}
.unlock-phrase.is-swap { animation: unlock-in .35s ease; }
.unlock-meta { margin: 2px 0 8px; }
.unlock-count { font-size: 12px; line-height: 16px; color: #8b93a1; font-variant-numeric: tabular-nums; }
.unlock-bar {
    height: 4px;
    border-radius: 99px;
    background: #e8f1ff;
    overflow: hidden;
}
.unlock-bar b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8eb6ff, #2f7bff);
    position: relative;
    overflow: hidden;
    transition: width .45s ease;
}
.unlock-bar b::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
    transform: translateX(-100%);
    animation: unlock-sheen 1.5s ease infinite;
}
.unlock-steps {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    text-align: left;
}
.unlock-steps li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 8px 8px 4px;
    border-radius: 8px;
    color: #98a2b3;
    font-size: 14px;
    line-height: 22px;
}
.unlock-steps li::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 28px;
    bottom: -8px;
    width: 1px;
    background: #e6ebf2;
}
.unlock-steps li:last-child::before { display: none; }
.unlock-steps li.is-on {
    background: #f3f7ff;
    color: #1c2430;
    font-weight: 600;
}
.unlock-steps li.is-done { color: #3c4656; font-weight: 400; }
.unlock-mark {
    width: 16px;
    height: 16px;
    margin-top: 3px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid #d5dbe3;
    background: #fff;
    position: relative;
    z-index: 1;
}
.unlock-steps .is-done .unlock-mark {
    background: #2f7bff;
    border-color: #2f7bff;
}
.unlock-steps .is-done .unlock-mark::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 1.6px 1.6px 0;
    transform: rotate(45deg);
}
.unlock-steps .is-on .unlock-mark {
    border: 0;
    background: #2f7bff;
    box-shadow: 0 0 0 4px rgba(47, 123, 255, .16);
    animation: unlock-pulse 1.1s ease infinite;
}
.unlock-line { min-width: 0; overflow-wrap: anywhere; }
.report.is-reveal { animation: unlock-in .45s ease; }
@keyframes unlock-spin { to { transform: rotate(360deg); } }
@keyframes unlock-pulse {
    50% { box-shadow: 0 0 0 7px rgba(47, 123, 255, .05); }
}
@keyframes unlock-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@keyframes unlock-sheen {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .unlock-orb span,
    .unlock-bar b::after,
    .unlock-steps .is-on .unlock-mark,
    .unlock-phrase.is-swap,
    .report.is-reveal,
    .bone,
    .bone-more span { animation: none; }
    .unlock-steps .is-on .unlock-mark { box-shadow: 0 0 0 4px rgba(47, 123, 255, .16); }
    .unlock-bar b { transition: none; }
}
.lock-art { width: 182px; height: auto; }
.muted { color: #8b93a1; font-size: 13px; }
.report {
    position: relative;
    overflow: hidden;
    border-radius: 0 16px 0 0;
    padding: 0 0 22px;
    background: #fff;
    color: #1c2024;
}
.report-sky {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    min-height: 220px;
    padding: 20px 16px 48px;
    border-radius: 0 16px 0 0;
    overflow: hidden;
    background: #e7f3ff var(--brief-bg) 82% 16% / cover no-repeat;
}
.report-sky::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .28) 42%, rgba(255, 255, 255, .78) 78%, #fff 100%);
    pointer-events: none;
}
.report-sky > * { position: relative; z-index: 1; }
.report-main {
    position: relative;
    z-index: 1;
    margin: -28px 16px 0;
    padding: 16px 16px 18px;
    background: #fff;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    box-sizing: border-box;
}
.report-main .report-stat-title { margin-top: 0; }
.report-sky .report-weather { margin-top: 16px; }
.report-expert { margin: 0; }
.review-head { display: flex; align-items: center; gap: 24px; padding: 16px 20px; border-radius: 16px; background: #f3f6ff; }
.review-who { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.review-ava { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; background: #e7eefc; }
.review-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.review-name { color: #1c2430; font-size: 18px; font-weight: 600; line-height: 26px; }
.review-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 2px; border-radius: 999px; background: #2f6bff; color: #fff; font-size: 12px; font-weight: 500; line-height: 18px; }
.review-badge svg { width: 16px; height: 16px; flex: none; }
.review-role { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; color: #8b93a1; font-size: 13px; line-height: 20px; }
.review-quote { display: flex; align-items: center; flex: 1.05; min-width: 0; margin: 0; padding: 4px 4px 4px 22px; border-left: 1px solid #d7e2f5; }
.review-quote p { position: relative; margin: 0; padding: 8px 34px; color: #5b6473; font-size: 14px; line-height: 22px; }
.review-quote p::before, .review-quote p::after { position: absolute; color: #c5d4f5; font-family: Georgia, "Times New Roman", serif; font-size: 40px; line-height: 1; }
.review-quote p::before { content: "“"; top: -4px; left: 0; }
.review-quote p::after { content: "”"; right: 0; bottom: -14px; }
.review-title { display: flex; align-items: center; gap: 8px; margin: 18px 0 12px; color: #1c2430; font-size: 16px; font-weight: 600; line-height: 24px; }
.review-title svg { width: 22px; height: 22px; flex: none; }
.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.review-card { padding: 14px 14px 12px; border: 1px solid #e6ebf5; border-radius: 12px; background: #fff; }
.review-card-top { display: flex; align-items: center; gap: 10px; }
.review-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; line-height: 0; overflow: hidden; background: #3d7eff; }
.review-mark.is-warm { background: #f08a3c; }
.review-mark.is-gold { background: #e0a106; }
.review-mark svg { display: block; width: 38px; height: 38px; }
.review-card-top b { display: block; color: #1c2430; font-size: 15px; font-weight: 600; line-height: 20px; }
.review-card-top span { display: block; color: #8b93a1; font-size: 12px; line-height: 18px; }
.review-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.review-split div { min-width: 0; padding: 10px 6px; border-radius: 8px; text-align: center; }
.review-split em { display: block; overflow: hidden; font-style: normal; color: #8b93a1; font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.review-split b { display: block; margin-top: 2px; font-size: 22px; font-weight: 600; line-height: 28px; }
.review-split.is-long b { font-size: 15px; line-height: 22px; }
.review-split .is-home { background: #f3f7ff; }
.review-split .is-home b { color: #3d7eff; }
.review-split .is-away { background: #fff4ec; }
.review-split .is-away b { color: #f08a3c; }
.review-top { margin: -4px -4px 8px; padding: 14px 14px 8px; border-radius: 16px; background: linear-gradient(180deg, #eaf3ff 0%, #f7faff 72%, #fff 100%); }
.review-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.review-brand > div { flex: 1; min-width: 0; }
.review-brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; line-height: 0; overflow: hidden; background: #2f6bff; }
.review-brand-mark svg { display: block; width: 32px; height: 32px; }
.review-brand b { display: block; color: #1c2430; font-size: 16px; font-weight: 600; line-height: 22px; }
.review-brand span { display: block; margin-top: 2px; color: #8b93a1; font-size: 12px; line-height: 18px; }
.review-done { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: 999px; background: #e7f8ee; color: #1f9d55; font-size: 13px; font-weight: 600; line-height: 18px; }
.review-done svg { width: 16px; height: 16px; flex: none; }
.review-line { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(200px, 0.95fr) minmax(0, 1.05fr); align-items: center; gap: 16px; margin-top: 14px; }
/*.review-line.has-contact { grid-template-columns: auto minmax(200px, 1fr) minmax(180px, 1fr); }*/
.review-line.has-contact .review-name { white-space: nowrap; }
.review-contact { flex: none; margin: 0 0 0 8px; padding: 8px 16px; border: 0; border-radius: 999px; background: #2f6bff; color: #fff; font-size: 13px; font-weight: 600; line-height: 20px; white-space: nowrap; cursor: pointer; }
.review-line .review-who { flex: none; }
.review-line .review-side b { font-size: 16px; line-height: 22px; }
.review-line .review-vs-mark { font-size: 22px; }
.review-vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; }
.review-bio { text-align: right; margin: 0; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .78); color: #5b6473; font-size: 13px; line-height: 22px; }
.review-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.review-side.is-away { justify-content: flex-end; text-align: right; }
.review-side b { display: block; color: #1c2430; font-size: 20px; font-weight: 600; line-height: 26px; }
.review-side em { display: block; font-style: normal; color: #8b93a1; font-size: 12px; line-height: 18px; }
.review-vs-mark { color: #2f6bff; font-size: 28px; font-weight: 700; font-style: italic; line-height: 1; }
.review-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.review-tabs button { margin: 0; padding: 10px 6px; border: 0; border-radius: 10px; background: #f3f5f8; color: #5b6473; cursor: pointer; }
.review-tabs button b, .review-tabs button span { display: block; }
.review-tabs button b { font-size: 14px; font-weight: 600; line-height: 20px; }
.review-tabs button span { margin-top: 2px; color: #8b93a1; font-size: 12px; line-height: 18px; }
.review-tabs button.is-active { background: #2f6bff; color: #fff; }
.review-tabs button.is-active span { color: rgba(255, 255, 255, .86); }
.review-observe { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: #f4f8ff; }
.review-core { display: flex; align-items: center; gap: 6px; margin: 0; color: #2f6bff; font-size: 13px; font-weight: 600; line-height: 18px; }
.review-core svg { width: 18px; height: 18px; flex: none; }
.review-observe h4 { margin: 8px 0 6px; color: #1c2430; font-size: 15px; font-weight: 600; line-height: 22px; }
.review-observe > p { margin: 0; color: #3c4656; font-size: 14px; line-height: 22px; }
.review-observe .report-copy { margin: 8px 0 0; color: #3c4656; font-size: 14px; line-height: 22px; }
.review-observe .report-copy b { color: #1c2430; font-weight: 600; }
.review-observe .review-core { color: #2f6bff; }
.report-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 28px;
    color: #06427f;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.report-title img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.report-time {
    margin: 8px 0 0;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #80838d;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.report-sky .report-copy {
    margin: 8px 0 0;
    min-height: 0;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #1c2024;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.report-copy {
    margin: 12px 0 0;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #1c2024;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.report-copy.is-after { margin-top: 16px; }
.report-stats { display: none; }
.report-weather { margin-top: 0; }
.weather-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 12px;
    margin-top: 12px;
}
.weather-card {
    background: #fff;
    border: 1px solid #f0f2f5;
    border-radius: 8px;
    min-height: 108px;
    padding: 8px 12px 10px;
    box-sizing: border-box;
}
.weather-k { display: block; font-size: 12px; line-height: 18px; color: #80838d; }
.weather-v { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 24px; color: #1c2024; }
.weather-card em { display: block; margin-top: 2px; font-style: normal; font-size: 13px; line-height: 20px; color: #80838d; }
.weather-cond { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.weather-cond img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.weather-cond .weather-v { margin-top: 0; }
.weather-line { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: 14px; line-height: 20px; color: #1c2024; }
.weather-line b { font-weight: 600; }
.report-game { margin-top: 20px; }
.game-score {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #f0f2f5;
    border-radius: 12px;
    background: #fff;
}
.game-score-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
    line-height: 20px;
    color: #80838d;
}
.game-score-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-score-mid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.game-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.game-side.is-away { justify-content: flex-end; }
.game-side b {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: #1c2024;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-score-num {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: center;
    align-items: baseline;
    column-gap: 6px;
    min-width: 88px;
}
.game-score-num strong { font-size: 28px; font-weight: 600; line-height: 32px; color: #1c2024; }
.game-score-num i { font-style: normal; color: #80838d; }
.game-score-num em {
    grid-column: 1 / -1;
    justify-self: center;
    font-style: normal;
    font-size: 12px;
    line-height: 18px;
    color: #80838d;
}
.game-venue { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: #80838d; }
.game-tabs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.game-tabs::-webkit-scrollbar { display: none; }
.game-tabs button {
    flex: none;
    height: 32px;
    padding: 0 12px;
    border: 1px solid #f0f2f5;
    border-radius: 999px;
    background: #fff;
    color: #5b6473;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
}
.game-tabs button.is-active { background: #e8f1ff; border-color: #e8f1ff; color: #1b62f2; font-weight: 600; }
.game-rings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.game-ring-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-height: 96px;
    padding: 8px;
    border: 1px solid #f0f2f5;
    border-radius: 8px;
    background: #fff;
}
.game-ring-card > span { font-size: 13px; line-height: 18px; color: #80838d; text-align: center; }
.game-ring-side { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.game-ring { width: 54px; height: 54px; }
.game-ring-side b { font-size: 13px; line-height: 18px; color: #1c2024; }
.game-bars { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.game-events { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.game-ev { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; align-items: center; }
.game-ev.is-away { grid-template-columns: minmax(0, 1fr) 52px; }
.game-ev.is-away .game-min { order: 2; text-align: right; }
.game-ev.is-away .game-ev-body { order: 1; text-align: right; }
.game-min { font-size: 13px; font-weight: 600; color: #80838d; }
.game-ev-body b { display: block; font-size: 14px; line-height: 20px; color: #1c2024; }
.game-ev-body em { font-style: normal; font-size: 12px; line-height: 18px; color: #80838d; }
.game-pitches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.game-xi-head { display: flex; justify-content: space-between; gap: 8px; margin: 0; }
.game-xi-head b { min-width: 0; font-size: 14px; font-weight: 600; line-height: 22px; color: #1c2024; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-xi-head span, .game-coach { font-size: 12px; line-height: 18px; color: #80838d; }
.game-coach { margin: 2px 0 0; }
.game-pitch {
    margin-top: 8px;
    padding: 10px 6px;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 18%, rgba(0, 0, 0, .08)),
        repeating-linear-gradient(180deg, #1f8a4d 0 12%, #187a43 12% 24%);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}
.game-pitch-row { display: flex; justify-content: space-evenly; gap: 4px; }
.game-pl { width: 64px; max-width: 22%; text-align: center; color: #fff; }
.game-pl b {
    display: flex;
    width: 22px;
    height: 22px;
    margin: 0 auto 2px;
    border-radius: 50%;
    background: #fff;
    color: #145c32;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}
.game-pl em {
    display: block;
    font-style: normal;
    font-size: 10px;
    line-height: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-xi-note { margin: 12px 0 0; font-size: 12px; line-height: 18px; color: #80838d; }
.game-board-head, .game-board-foot {
    display: grid;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
    line-height: 18px;
    color: #80838d;
}
.game-board-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.game-board-head.has-hint { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.game-board-head span:last-child, .game-board-foot span:last-child { text-align: right; }
.game-board-head .game-player-hint { margin: 0; max-width: 148px; text-align: center; }
.game-board-head b { display: block; font-size: 14px; font-weight: 600; line-height: 20px; color: #1c2024; }
.game-board-head em { font-style: normal; }
.game-board-foot { grid-template-columns: 1fr auto 1fr; }
.game-board-foot span:nth-child(2) { text-align: center; }
.game-board {
    position: relative;
    margin-top: 8px;
    min-height: 420px;
    padding: 18px 8px;
    border-radius: 12px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 18%, rgba(0, 0, 0, .08)),
        repeating-linear-gradient(90deg, #1f8a4d 0 8%, #187a43 8% 16%);
}
.game-board::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: rgba(255, 255, 255, .55);
}
.game-board::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    border: 2px solid rgba(255, 255, 255, .55);
    border-radius: 50%;
}
.game-box,
.game-goal {
    position: absolute;
    top: 22%;
    height: 56%;
    border: 2px solid rgba(255, 255, 255, .45);
}
.game-box { width: 10%; }
.game-goal { top: 34%; height: 32%; width: 4%; }
.game-box.is-left,
.game-goal.is-left { left: 0; border-left: 0; }
.game-box.is-right,
.game-goal.is-right { right: 0; border-right: 0; }
.game-board-half {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 2px;
}
.game-board .game-pitch-row {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 4px;
}
.game-board .game-pl {
    width: 72px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.game-board .game-pl em {
    font-size: 11px;
    line-height: 13px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.game-board .game-squad-photo,
.game-board .game-squad-photo img,
.game-board .game-squad-photo .p-ava {
    width: 36px;
    height: 36px;
}
.game-board .game-squad-photo img,
.game-board .game-squad-photo .p-ava {
    border: 2px solid #fff;
    box-sizing: border-box;
}
.game-board .game-pl.is-home .game-squad-photo img,
.game-board .game-pl.is-home .p-ava { border-color: #5e93ff; }
.game-board .game-pl.is-away .game-squad-photo img,
.game-board .game-pl.is-away .p-ava { border-color: #ff6363; }
button.game-pl {
    border: 0;
    background: transparent;
    padding: 4px 0;
    color: #fff;
    appearance: none;
}
button.game-pl:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }
.game-player-hint { margin: 8px 0 0; font-size: 12px; line-height: 18px; color: #80838d; }
.game-squad-wrap { margin-top: 16px; }
.game-squad-switch { margin-top: 0; }
.game-squad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 10px;
}
.game-squad-card {
    min-width: 0;
    border: 1px solid #f0f2f5;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.game-squad-card h5 {
    margin: 0;
    padding: 10px 12px;
    border-bottom: 1px solid #f0f2f5;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #1c2024;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-squad-list { overflow: hidden; }
.game-squad-empty { margin: 0; padding: 16px 12px; font-size: 13px; line-height: 20px; color: #80838d; }
.game-squad-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid #f0f2f5;
    background: #fff;
    text-align: left;
}
button.game-squad-row { cursor: pointer; }
button.game-squad-row:hover { background: #f5f6f8; }
button.game-squad-row:focus-visible { outline: 2px solid #1b62f2; outline-offset: -2px; }
.game-squad-meta { min-width: 0; flex: 0 1 auto; max-width: calc(100% - 46px); }
.game-squad-meta b {
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #1c2024;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-squad-no { margin-right: 6px; color: #5b6473; }
.game-squad-meta em {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 12px;
    line-height: 16px;
    color: #80838d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.game-squad-worth { color: #1c2024; font-weight: 600; }
.game-squad-photo { flex: none; width: 36px; height: 36px; }
.game-squad-photo img,
.game-squad-photo .p-ava {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #f5f6f8;
}
.game-squad-photo .p-ava { font-size: 14px; }
.player-modal {
    width: min(520px, 100%);
    max-height: min(88vh, 820px);
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
}
.player-modal .modal-close { z-index: 1; width: 32px; height: 32px; }
.player-modal .modal-close img { width: 24px; height: 24px; display: block; margin: 4px auto; }
#player-root { overflow: auto; min-height: 120px; padding-bottom: 8px; }
.player-head { display: flex; align-items: center; gap: 12px; padding-right: 28px; }
.player-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    background: #f5f6f8;
    flex: none;
}
.player-photo.is-empty { display: block; }
.player-head h2 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: #1c2024; }
.player-head p, .player-wait { margin: 4px 0 0; font-size: 13px; line-height: 18px; color: #80838d; }
.player-hurt {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff1f1;
    color: #ef2f2f;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    vertical-align: 1px;
}
.player-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.player-meta div { background: #f5f6f8; border-radius: 8px; padding: 8px; min-width: 0; }
.player-meta dt { font-size: 12px; line-height: 16px; color: #80838d; }
.player-meta dd { margin: 2px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; color: #1c2024; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-tabs { margin-top: 12px; }
.player-league { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; min-width: 0; color: #1c2024; font-size: 14px; line-height: 20px; }
.player-league img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.player-league span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-league select {
    flex: 1;
    min-width: 0;
    height: 36px;
    border: 1px solid #f0f2f5;
    border-radius: 8px;
    background: #f5f6f8;
    padding: 0 10px;
    font-size: 14px;
}
.player-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.player-ring { text-align: center; min-width: 0; }
.player-ring .game-ring { width: 64px; height: 64px; margin: 0 auto; }
.player-ring b { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; color: #1c2024; }
.player-ring em { font-style: normal; font-size: 11px; line-height: 16px; color: #80838d; }
.player-lines { margin-top: 8px; }
.player-line { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 8px 0; border-bottom: 1px solid #f0f2f5; font-size: 14px; line-height: 20px; }
.player-line span { color: #5b6473; }
.player-line b { color: #1c2024; font-weight: 600; }
.player-item { padding: 10px 0; border-bottom: 1px solid #f0f2f5; }
.player-item b { display: block; font-size: 14px; line-height: 20px; color: #1c2024; }
.player-item em { font-style: normal; font-size: 12px; line-height: 18px; color: #80838d; }
.player-sheet .empty { margin: 16px 0; }
.game-table-wrap { margin-top: 16px; overflow-x: auto; }
.game-table-wrap h4 { margin: 0 0 8px; font-size: 15px; font-weight: 600; line-height: 22px; color: #1c2024; }
.game-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 20px; color: #1c2024; }
.game-table th, .game-table td { padding: 8px 6px; text-align: right; white-space: nowrap; border-bottom: 1px solid #f0f2f5; }
.game-table th { font-weight: 400; color: #80838d; }
.game-table th:first-child, .game-table td:first-child { width: 1%; text-align: left; padding-left: 8px; padding-right: 16px; }
.game-table th:nth-child(2), .game-table td:nth-child(2) { text-align: left; }
.game-table tr.is-home td { background: #e8f1ff; font-weight: 600; }
.game-table tr.is-away td { font-weight: 600; }
.game-table tr.is-away td:first-child { box-shadow: inset 3px 0 0 #ff6363; }
.game-subs { margin: 8px 0 0; font-size: 12px; line-height: 18px; color: #5b6473; }
.game-subs span { display: block; margin-bottom: 2px; color: #80838d; }
.game-season { margin-top: 16px; }
.game-season h4 { margin: 0; font-size: 15px; font-weight: 600; line-height: 22px; color: #1c2024; }
.game-season-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.game-season-card { border: 1px solid #f0f2f5; border-radius: 8px; padding: 10px 12px; background: #fff; }
.game-season-top { display: flex; justify-content: space-between; gap: 8px; }
.game-season-top b { min-width: 0; font-size: 14px; line-height: 20px; color: #1c2024; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-season-top span { flex: none; font-size: 12px; line-height: 20px; color: #80838d; }
.game-season-rate { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.game-season-rate .game-ring { width: 48px; height: 48px; flex: none; }
.game-season-rate b { display: block; font-size: 18px; line-height: 24px; color: #1c2024; }
.game-season-rate em { font-style: normal; font-size: 12px; line-height: 18px; color: #80838d; }
.game-wdl { display: flex; height: 8px; margin-top: 10px; border-radius: 99px; overflow: hidden; background: #f0f2f5; }
.game-wdl i { display: block; height: 100%; }
.game-wdl .w { background: #1c68ff; }
.game-wdl .d { background: #16a34a; }
.game-wdl .l { background: #ef2f2f; }
.game-wdl-num { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 6px 0 0; font-size: 13px; line-height: 20px; }
.game-wdl-num .w { color: #1c68ff; }
.game-wdl-num .d { color: #16a34a; }
.game-wdl-num .l { color: #ef2f2f; }
.game-h2h-sum { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 12px; font-size: 14px; line-height: 22px; color: #1c2024; }
.game-h2h-sum i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 50%; vertical-align: 1px; }
.game-h2h-sum .w { background: #1c68ff; }
.game-h2h-sum .d { background: #16a34a; }
.game-h2h-sum .l { background: #ef2f2f; }
.game-h2h-sum span { color: #80838d; }
.game-meet { margin-top: 8px; }
.game-meet-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 88px;
    gap: 8px;
    align-items: center;
    min-height: 40px;
    font-size: 13px;
    line-height: 20px;
    color: #80838d;
}
.game-meet-mid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    color: #1c2024;
}
.game-meet-mid em { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-meet-mid em:last-child { text-align: right; }
.game-meet-mid b { font-weight: 600; }
.game-meet-row > span:last-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weather-grid .bone-card { height: 108px; border-radius: 8px; }
.report-stat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
    color: #1c2024;
    text-align: left;
}
.report-stat-ico { width: 24px; height: 24px; object-fit: contain; flex: none; }
.report-note {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #80838d;
    text-align: left;
}
.poss-row {
    display: grid;
    grid-template-columns: minmax(0, 380fr) minmax(0, 228fr) minmax(0, 544fr);
    column-gap: 16px;
    align-items: stretch;
    margin-top: 12px;
}
.poss-card,
.poss-mid {
    background: #fff;
    border: 1px solid #f0f2f5;
    border-radius: 8px;
    min-height: 108px;
    padding: 8px 12px 6px;
    box-sizing: border-box;
}
.poss-card {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.poss-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.poss-card .crest,
.poss-card img.crest {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: contain;
}
.poss-team {
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1c2024;
}
.poss-line {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1c2024;
    text-align: left;
}
.poss-line b { font-weight: 400; color: #1c2024; }
.poss-mid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    align-content: stretch;
    text-align: center;
}
.poss-half {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    padding-top: 2px;
    overflow: hidden;
}
.poss-half .poss-team {
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #1c2024;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-transform: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.poss-pct { font-size: 28px; font-weight: 600; line-height: 32px; }
.poss-pct.is-home { color: #16a34a; }
.poss-pct.is-away { color: #ef2f2f; }
.poss-foot {
    margin: auto 0 0;
    padding-top: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #80838d;
    text-align: center;
}
.poss-mid .poss-foot { grid-column: 1 / -1; }
.report-follow { margin-top: 20px; padding: 0 32px; }
.gnews {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 12px;
}
.gnews-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    height: 90px;
    padding: 8px 12px;
    border: 1px solid #f0f2f5;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}
.gnews-item:hover,
.gnews-item:visited { color: inherit; background: #f7f8fa; }
.gnews-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    height: 100%;
}
.gnews-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex: none;
    background: #f5f6f8;
}
.gnews-src {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 14px;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    color: #8b93a1;
}
.gnews-src > span:first-of-type {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gnews-ico { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; background: #f5f6f8; flex: none; }
.gnews-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #5b6473;
}
.gnews-item:hover .gnews-title,
.gnews-item:visited .gnews-title { color: #5b6473; }
.gnews-snip { display: none; }
.gnews-time { flex: none; font-size: 14px; font-weight: 400; line-height: 14px; color: #8b93a1; }
.report-ad {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 168px;
    margin: 20px 32px 8px;
    border-radius: 12px;
    overflow: hidden;
    background: #2c333b center / cover no-repeat;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .45);
}
.report-ad span { padding: 0 16px; }
.report-ad:hover { color: #fff; }
.report-follow .report-stat-title { margin-top: 0; }
.report-h2h-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    min-width: 0;
    max-width: 98%;
}
.report-h2h-head .report-stat-title { min-width: 0; }
.report-legend {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    min-width: 0;
    max-width: 46%;
    overflow: hidden;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #80838d;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.report-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.report-legend i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.report-legend .is-home i { background: #5e93ff; }
.report-legend .is-away i { background: #ff6363; }
.report-bars {
    max-width: none;
    margin: 16px 0 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.report-follow .table-scroll { width: 100%; }
.report-follow .result {
    width: 84%;
    table-layout: fixed;
}
.report-follow .result th,
.report-follow .result td {
    width: 20%;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: #80838d;
    line-height: 20px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}
.report-follow .result th:nth-child(1),
.report-follow .result td:nth-child(1),
.report-follow .result th:nth-child(2),
.report-follow .result td:nth-child(2) { text-align: left; }
.report-follow .result th:nth-child(3),
.report-follow .result td:nth-child(3) { text-align: right; }

.plan-page .back {
    padding: 2px 0 18px;
    color: #60646C;
    font-size: 14px;
    line-height: 22px;
}
.plan-article { max-width: 1140px; margin: 0 auto; }
.plan-author { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.plan-author .expert-ava {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}
.plan-id {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.plan-id strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1C2024;
    line-height: 20px;
}
.plan-id small {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    box-sizing: border-box;
    max-width: 100%;
    height: 19px;
    padding: 0 4px;
    background: #FFF8E6;
    border: 1px solid #F6AF09;
    border-radius: 4px;
    color: #F6AF09;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plan-time {
    margin-left: auto;
    flex: none;
    font-size: 14px;
    font-weight: 400;
    color: #80838D;
    line-height: 22px;
    white-space: nowrap;
}
.plan-title {
    margin: 16px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: #1C2024;
    line-height: 28px;
    text-align: left;
}
.plan-title .badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 20px;
    margin: 4px 8px 0 0;
    padding: 0;
    border-radius: 4px;
    vertical-align: top;
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 16px;
}
.plan-title .badge.live { color: #EF2F2F; background: #FECFCF; }
.plan-title .badge.pack { color: #BE1AFF; background: #F7DFFF; }
.plan-excerpt {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 400;
    color: #80838D;
    line-height: 22px;
}
.plan-page .plan-match {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    margin: 16px 0 0;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid #E6E8EC;
    border-radius: 8px;
    border-bottom: 1px solid #E6E8EC;
}
.plan-kick {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    color: #80838D;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    white-space: nowrap;
}
.plan-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    color: #60646C;
    line-height: 22px;
}
.plan-teams .side {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.plan-teams .side span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plan-teams em {
    font-style: normal;
    font-weight: 400;
    color: #80838D;
    font-size: 14px;
}
.plan-teams .crest,
.plan-teams img.crest {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: contain;
}
.plan-page .block-title {
    margin: 28px 0 12px;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #1C2024;
    line-height: 24px;
}
.plan-page .block-title::before { display: none; }
.plan-sec-ico { width: 20px; height: 20px; flex: none; display: block; }
.timeline { margin: 0 12px 4px; padding-left: 4px; }
.tl-item { position: relative; padding: 0 0 16px 18px; border-left: 1px dashed #D5DAE3; }
.tl-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.tl-item::before {
    content: "";
    position: absolute;
    left: -4.5px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3C99FF;
}
.tl-item p {
    display: inline-block;
    max-width: 100%;
    margin: 0;
    background: #EEF2FE;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 400;
    color: #1C2024;
    line-height: 22px;
}
.tl-item time {
    display: block;
    color: #B0B6C0;
    font-size: 12px;
    line-height: 18px;
    margin-top: 6px;
}
.star { color: var(--blue); margin-right: 4px; }
.plan-rec p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #60646C;
    line-height: 26px;
}
.plan-page .analysis h4,
.plan-page .analysis li {
    margin: 0;
    font-family: "PingFang SC", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #60646C;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.plan-page .analysis h4 { margin: 8px 0 0; }
.plan-page .analysis h4:first-child { margin-top: 0; }
.plan-page .analysis ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: plan-li;
}
.plan-page .analysis li {
    counter-increment: plan-li;
}
.plan-page .analysis li::before { content: counter(plan-li) "、"; }
.plan-page .fine-note {
    margin: 16px 0 0;
    color: #A0A4AA;
    font-size: 12px;
    line-height: 18px;
}
.plan-foot {
    margin-top: 40px;
    padding: 28px 8px 8px;
    border-top: 1px solid #EEEEF0;
    text-align: center;
}
.plan-foot .foot-top {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.plan-foot .brand-line {
    color: #1C2024;
    font-size: 14px;
    line-height: 22px;
}
.plan-foot .foot-split {
    width: 1px;
    height: 14px;
    margin: 0 16px;
    background: #D8DADF;
    flex: none;
}
.plan-foot nav { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.plan-foot nav button,
.plan-foot nav a {
    border: 0;
    background: transparent;
    padding: 0;
    color: #1C68FF;
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
}
.plan-foot .foot-disc-title {
    margin: 0 0 8px;
    color: #1C2024;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
}
.plan-foot .foot-disc,
.plan-foot .foot-addr {
    max-width: 760px;
    margin: 0 auto;
    color: #80838D;
    font-size: 12px;
    line-height: 20px;
}
.plan-foot .foot-addr { margin-top: 8px; }

.view-vip { background: #eef6fd; }
.vip-page {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: #eef6fd;
    padding: 0;
}
.vip-hero {
    position: relative;
    overflow: visible;
    border-radius: 0;
    min-height: 0;
    padding: 48px 60px 0;
    box-sizing: border-box;
    background-color: transparent;
}
.vip-hero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 640px;
    z-index: 0;
    pointer-events: none;
    background-image: var(--vip-hero);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100% auto;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .45) 68%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0, 0, 0, .45) 68%, transparent 100%);
}
.vip-hero > * {
    position: relative;
    z-index: 1;
}
.vip-title {
    margin: 0;
    max-width: 58%;
    font-weight: 600;
    font-size: 40px;
    line-height: 48px;
    color: #1C2024;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.vip-title em {
    font-style: normal;
    font-weight: 600;
    font-size: 40px;
    color: #1962F6;
    text-transform: none;
}
.vip-lead {
    margin: 0 0 12px;
    max-width: 58%;
    font-weight: 600;
    font-size: 40px;
    line-height: 48px;
    color: #1C2024;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.vip-sub {
    max-width: 640px;
    margin: 0;
    font-weight: 400;
    font-size: 18px;
    color: #1C2024;
    line-height: 28px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.vip-seg-bar {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    gap: 10px;
    margin: 20px 0 0;
    padding: 12px 60px 8px;
    background: #eef6fd;
}
.vip-seg-bar button {
    border: 0;
    height: auto;
    padding: 8px 16px;
    border-radius: 8px;
    background: #FFFFFF;
    font-weight: 400;
    font-size: 16px;
    color: #1C2024;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.vip-seg-bar button.is-active {
    background: #1962F6;
    color: #FFFFFF;
    font-weight: 600;
}
@media (min-width: 961px) {
    .vip-seg-bar { background: transparent; }
    .vip-seg-bar.is-solid { background: #FFFFFF; }
}
.vip-intro {
    position: relative;
    z-index: 1;
    margin: 12px 0 0;
    padding: 0 0 8px;
}
.vip-body {
    flex: 1;
    margin-top: 0;
    padding: 8px 60px 40px;
    background: transparent;
}
.vip-body .table-card {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
}
.vip-body > h2 { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: #1c2430; }
.vip-block h2 {
    margin: 0 0 8px;
    font-weight: 600;
    font-size: 24px;
    color: #1C2024;
    line-height: 32px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.vip-block .cycle-sub {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.spend-title { margin-top: 28px; }
.plan-grid,
.plan-grid.credits {
    display: grid;
    width: 100%;
    gap: 16px;
    margin-top: 16px;
    padding-bottom: 28px;
    align-items: stretch;
    justify-content: stretch;
}
.plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan-grid.credits { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-grid.is-hide { display: none !important; }
.plan.credit-card { min-height: 344px; height: auto; padding: 26px 22px 18px; align-items: stretch; }
.credit-price { text-align: left; padding-right: 96px; }
.plan.credit-card h3 { text-align: left; margin: 0; font-size: 20px; font-weight: 600; line-height: 28px; color: #1C2024; }
.plan.credit-card .unit { margin-top: 2px; color: #8B93A1; font-size: 12px; font-weight: 400; line-height: 18px; text-align: left; }
.plan.credit-card .price { text-align: left; margin: 8px 0 0; font-size: 32px; line-height: 40px; color: #FF3B30; font-weight: 700; }
.plan.credit-card ul { margin-top: 18px; padding-top: 16px; }
.plan.credit-card li { text-align: left; display: flex; align-items: center; gap: 8px; padding: 7px 0; color: #667085; }
.plan.credit-card .check {
    width: 16px; height: 16px; margin: 0; border-radius: 50%; border: 1.5px solid #c5ced8; flex: none; position: relative; color: transparent;
}
.plan.credit-card .check::after {
    content: ""; position: absolute; left: 4px; top: 2px; width: 4px; height: 7px;
    border: solid #98a2b3; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.plan.credit-card .ribbon { top: 14px; right: 14px; border-radius: 4px; padding: 3px 8px; }
.plan {
    position: relative; background: #fff; border: 1px solid #e8eef6; border-radius: 16px; padding: 20px 16px 16px;
    display: flex; flex-direction: column; min-height: 0;
}
.plan.featured { border-color: var(--blue); box-shadow: 0 8px 20px rgba(47,123,255,.12); }
.plan h3, .plan .price, .plan .old { text-align: center; }
.plan h3 { margin: 4px 0 8px; font-size: 16px; font-weight: 650; }
.plan .price { color: var(--red); font-size: 36px; font-weight: 800; margin: 0 0 4px; line-height: 1.1; }
.plan .price.dark { color: var(--ink); }
.plan .old { color: #b0b6c0; font-size: 13px; min-height: 20px; }
.plan .old s { margin-right: 6px; }
.save { display: inline-block; background: #fff4d6; color: #d48806; border-radius: 6px; padding: 1px 6px; font-style: normal; font-size: 12px; }
.plan ul { list-style: none; padding: 10px 0 0; margin: 10px 0 14px; border-top: 1px solid #f0f2f5; }
.plan li { text-align: center; color: #667085; font-size: 13px; padding: 4px 0; }
#plan-grid .plan,
#credit-grid .plan {
    overflow: hidden;
    width: 100%;
    height: auto;
    min-height: 344px;
    border-radius: 12px;
    border: 1px solid transparent;
    background:
        linear-gradient(#FFFFFF, #FFFFFF) padding-box,
        linear-gradient(#FFFFFF, #FFFFFF) border-box;
    box-shadow: none;
    justify-content: flex-start;
    box-sizing: border-box;
}
#plan-grid .plan {
    padding: 16px 20px 16px;
}
#credit-grid .plan {
    min-height: 344px;
    height: auto;
    padding: 26px 22px 18px;
    overflow: hidden;
}
#credit-grid .plan h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #1C2024;
    text-align: left;
}
#credit-grid .plan h3 .count-unit {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #1C2024;
    vertical-align: baseline;
}
#credit-grid .plan .unit {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #8B93A1;
    text-align: left;
}
#credit-grid .plan .price {
    margin: 8px 0 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    color: #FF3B30;
    text-align: left;
}
#plan-grid .plan:hover,
#credit-grid .plan:hover {
    background:
        linear-gradient(#FFFFFF, #FFFFFF) padding-box,
        linear-gradient(to top left, #1962F6 0%, #1496f4 50%, #09C7F6 100%) border-box;
}
#plan-grid .plan.is-hot {
    padding-top: 40px;
}
#plan-grid .plan.featured {
    border: 1px solid transparent;
    box-shadow: none;
}
#plan-grid .plan-head {
    flex: none;
    text-align: left;
}
#plan-grid .plan h3,
#plan-grid .plan .price,
#plan-grid .plan .old,
#plan-grid .plan li {
    text-align: left;
}
#plan-grid .plan h3 {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 500;
    color: #1c2430;
    line-height: 20px;
}
#plan-grid .plan .price {
    margin: 0;
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    color: #ff4040;
    font-style: normal;
    text-transform: none;
}
#plan-grid .plan .price.dark {
    color: #000;
}
#plan-grid .plan .old {
    margin-top: 4px;
    min-height: 0;
    font-size: 12px;
    line-height: 16px;
}
#plan-grid .plan .save {
    background: #fff5db;
    border-radius: 4px;
    padding: 0 6px;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: #c18700;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
#plan-grid .plan ul {
    flex: none;
    margin: 8px 0 12px;
    padding: 8px 0 0;
    border-top: 1px solid #f0f2f5;
}
#plan-grid .plan li {
    padding: 0;
    font-size: 12px;
    line-height: 18px;
    color: #8b93a1;
}
#plan-grid .plan .buy,
#credit-grid .plan .buy {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    height: 36px;
    width: 100%;
    min-width: 0;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    margin-top: auto;
    align-self: stretch;
    border-radius: 69px;
    color: #fff;
    background: linear-gradient(69deg, #226BFF 0%, #3CCBFF 100%);
    background-image: linear-gradient(69deg, #226BFF 0%, #3CCBFF 100%);
}
#plan-grid .plan .buy:hover,
#credit-grid .plan .buy:hover {
    background: linear-gradient(69deg, #1b5ef0 0%, #2bb8e8 100%);
    background-image: linear-gradient(69deg, #1b5ef0 0%, #2bb8e8 100%);
}
#plan-grid .ribbon {
    top: 12px;
    left: 20px;
    right: auto;
    background: #f6af09;
    color: #1c2024;
    border-radius: 12px 0 12px 0;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    padding: 2px 8px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.ribbon { position: absolute; top: 12px; right: 12px; background: #ffb020; color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 4px; }
#credit-grid .ribbon {
    top: 14px;
    right: 14px;
    z-index: 2;
    transform: none;
    background: #F6AF09;
    color: #1C2024;
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    padding: 4px 12px;
    border-radius: 0 12px 0 12px;
}
.hot-tag { position: absolute; top: 12px; right: 12px; background: #ffb020; color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 4px; }
.check { color: #67c23a; margin-right: 4px; }

.sheet, .table-card { background: #fff; border-radius: 16px; padding: 8px 8px 12px; border: 1px solid #eef2f7; }
.tool-row, .sec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; }
.sec-row { justify-content: space-between; }
.tool-row select, .pager select, .pager input {
    height: 34px; border: 1px solid #e6ebf2; border-radius: 8px; background: #fff; padding: 0 8px;
}
.date-range {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: 32px;
    padding: 0 12px;
    /* border: 1px solid #E0E1E6; */
    border-radius: 6px;
    background: #FFFFFF;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.date-ico {
    width: 24px;
    height: 24px;
    flex: none;
    display: block;
    object-fit: contain;
    /* 黑稿切图叠到占位色 #B9BBC6 */
    opacity: 0.27;
}
.date-sep {
    flex: none;
    font-weight: 400;
    font-size: 16px;
    color: #80838D;
    line-height: 24px;
    text-align: right;
    font-style: normal;
    text-transform: none;
}
.date-field { position: relative; display: inline-flex; align-items: center; height: 100%; min-width: 0; cursor: pointer; -webkit-user-select: none; user-select: none; }
.date-field input[type="date"] {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
    opacity: 0; pointer-events: none; overflow: hidden;
}
.date-face {
    white-space: nowrap;
    pointer-events: none;
    font-weight: 400;
    font-size: 16px;
    color: #B9BBC6;
    line-height: 24px;
    font-style: normal;
    text-transform: none;
    width: 10.5ch;
    overflow: hidden;
    text-overflow: ellipsis;
}
.date-field-start .date-face { text-align: right; }
.date-field-end .date-face { text-align: left; }
.date-face.is-set { color: #1C2024; }
#view-usage .grid,
#view-orders .grid {
    table-layout: fixed;
    width: 100%;
}
#view-usage .grid th,
#view-usage .grid td,
#view-orders .grid th,
#view-orders .grid td {
    overflow: hidden;
    text-overflow: ellipsis;
}
#view-usage .grid th:nth-child(1),
#view-usage .grid td:nth-child(1) { width: 28%; }
#view-usage .grid th:nth-child(2),
#view-usage .grid td:nth-child(2) { width: 40%; }
#view-usage .grid th:nth-child(3),
#view-usage .grid td:nth-child(3) { width: 18%; }
#view-usage .grid th:nth-child(4),
#view-usage .grid td:nth-child(4) { width: 14%; }
.date-pop {
    position: fixed;
    z-index: 200;
    width: 280px;
    padding: 12px 12px 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(28, 32, 36, 0.16);
    box-sizing: border-box;
    pointer-events: auto;
}
.date-pop[hidden] { display: none !important; }
.date-pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.date-pop-title {
    font-size: 14px;
    font-weight: 600;
    color: #1C2024;
    line-height: 24px;
    text-align: center;
    flex: 1;
}
.date-pop-nav {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: #80838D;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.date-pop-dow,
.date-pop-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}
.date-pop-dow {
    color: #80838D;
    font-size: 12px;
    line-height: 24px;
    margin-bottom: 4px;
}
.date-pop-grid { gap: 2px; }
.date-pop-day {
    height: 32px;
    border: 0;
    background: transparent;
    border-radius: 16px;
    font-size: 13px;
    color: #1C2024;
    cursor: pointer;
}
.date-pop-day.is-empty { visibility: hidden; }
.date-pop-day.is-today { color: var(--blue); font-weight: 600; }
.date-pop-day.is-on { background: var(--blue); color: #fff; font-weight: 600; }
.date-pop-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding: 8px 4px 2px;
    border-top: 1px solid #F0F2F5;
}
.date-pop-foot button {
    border: 0;
    background: transparent;
    color: var(--blue);
    font-size: 13px;
    line-height: 22px;
    cursor: pointer;
    padding: 4px 8px;
}
.btn-primary, .btn-ghost, .btn-google {
    height: 44px; border-radius: 8px; font-size: 15px; font-weight: 700;
}
.btn-primary { border: 0; background: var(--blue); color: #fff; padding: 0 18px; }
.btn-primary:hover { background: var(--blue-deep); }
.btn-primary.slim { height: 34px; font-size: 14px; }
.btn-primary.pill { border-radius: 999px; height: 36px; }
.btn-primary.buy { width: 100%; border-radius: 999px; margin-top: auto; background: linear-gradient(90deg, #5aa2ff, #2f7bff); }
.btn-ghost { border: 1px solid #e6ebf2; background: #fff; color: #4b5563; padding: 0 18px; }
.btn-google {
    width: 100%; border: 1px solid #e6ebf2; background: #fff; display: flex; align-items: center; justify-content: center; gap: 8px;
}
#view-usage {
    position: relative;
    background-color: #eef6fd;
    scrollbar-width: none;
}
#view-usage::-webkit-scrollbar { width: 0; height: 0; }
#view-usage::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 320px;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(238, 246, 253, 0.55) 68%, #eef6fd 100%),
        var(--usage-hero);
    background-repeat: no-repeat;
    background-position: 0 0, right -230px;
    background-size: 100% 100%, 100% auto;
}
#view-usage .usage-page {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 83px 3.378% 40px;
    box-sizing: border-box;
}
#view-usage .page-title {
    margin: 0 0 37px;
    font-weight: 600;
    font-size: 32px;
    color: #1C2024;
    line-height: 40px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
#view-orders {
    position: relative;
    background-color: #EBF5FD;
    scrollbar-width: none;
}
#view-orders::-webkit-scrollbar { width: 0; height: 0; }
#view-orders::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 320px;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(235, 245, 253, 0.55) 68%, #EBF5FD 100%),
        var(--usage-hero);
    background-repeat: no-repeat;
    background-position: 0 0, right -230px;
    background-size: 100% 100%, 100% auto;
}
#view-orders .orders-page {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 83px 3.378% 40px;
    box-sizing: border-box;
}
#view-orders .page-title {
    margin: 0 0 24px;
    font-weight: 600;
    font-size: 32px;
    color: #1C2024;
    line-height: 40px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
#view-orders .sheet {
    background: #FFFFFF;
    border: 0;
    border-radius: 16px;
    padding: 16px 16px 12px;
}
#view-orders .tool-row {
    gap: 12px;
    padding: 0 0 12px;
    flex-wrap: nowrap;
}
#view-orders #order-type {
    display: none;
    height: 32px;
    min-width: 120px;
    border: 1px solid #E0E1E6;
    border-radius: 6px;
    background: #FFFFFF;
    padding: 0 12px;
    font-weight: 400;
    font-size: 16px;
    color: #1C2024;
    line-height: 24px;
}
#view-orders .date-range {
    border: 1px solid #E0E1E6;
}
#view-orders .btn-primary.slim {
    height: 32px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    background: #2F7BFF;
}
#view-orders .btn-primary.slim:hover { background: #1D68F0; }
#view-orders .grid th {
    background: #F7F9FC;
    font-weight: 400;
    font-size: 14px;
    color: #8B93A1;
    line-height: 22px;
}
#view-orders .grid td {
    font-weight: 400;
    font-size: 14px;
    color: #1C2024;
    line-height: 22px;
}
#view-orders .grid th:nth-child(1),
#view-orders .grid td:nth-child(1) { width: 22%; }
#view-orders .grid th:nth-child(2),
#view-orders .grid td:nth-child(2) { width: 18%; }
#view-orders .grid th:nth-child(3),
#view-orders .grid td:nth-child(3) { width: 32%; }
#view-orders .grid th:nth-child(4),
#view-orders .grid td:nth-child(4) { width: 14%; }
#view-orders .grid th:nth-child(5),
#view-orders .grid td:nth-child(5) { width: 14%; text-align: right; }
#view-orders .btn-select {
    height: 32px;
    min-width: 64px;
    padding: 0 16px;
    border-radius: 8px;
    background: #E8F1FF;
    color: #1B62F2;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
}
.expire {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    height: 56px;
    margin: 0 0 8px;
    padding: 12px;
    background: #FFFFFF;
    border-radius: 12px;
}
.expire span {
    min-width: 0;
    font-weight: 400;
    font-size: 16px;
    color: #F6AF09;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.expire button {
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    line-height: 0;
}
.expire button img {
    width: 24px;
    height: 24px;
}
.balance-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
    height: 152px;
    padding: 16px 132px 16px 32px;
    background: linear-gradient(90deg, #ffffff 0%, #ffffff 48%, rgba(255, 255, 255, 0.88) 64%, rgba(255, 255, 255, 0.28) 82%, rgba(255, 255, 255, 0) 100%);
    border: 0;
    border-radius: 0;
    margin: 0 0 32px;
}
.balance-deco {
    position: absolute;
    right: 0;
    top: 32%;
    height: 170px;
    width: auto;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.balance-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0.28) 98%, rgba(255, 255, 255, 0.46) 100%);
}
.balance-copy { position: relative; z-index: 2; min-width: 0; }
.balance-card .btn-primary.pill {
    position: relative;
    z-index: 2;
    align-self: flex-start;
    flex: none;
    height: 40px;
    margin: 0 0 0 auto;
    padding: 0 24px;
    border: 0;
    border-radius: 69px;
    background: linear-gradient(69deg, #226BFF 0%, #3CCBFF 100%);
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-transform: none;
}
.balance-card .btn-primary.pill:hover {
    background: linear-gradient(69deg, #226BFF 0%, #3CCBFF 100%);
}
.balance-label {
    font-weight: 600;
    font-size: 16px;
    color: #1C2024;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.balance-num {
    margin: 8px 0 0;
    font-weight: bold;
    font-size: 48px;
    color: #1C2024;
    line-height: 56px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.balance-sub {
    display: flex;
    flex-wrap: wrap;
    column-gap: 24px;
    margin: 4px 0 0;
    font-weight: 400;
    font-size: 16px;
    color: #80838D;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
.balance-stat { white-space: nowrap; }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 12px 8px 4px; color: #667085; font-size: 13px; }
.pager-pages, .pager-jump { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.pager button { min-width: 28px; height: 28px; border: 1px solid #e6ebf2; background: #fff; border-radius: 6px; color: #4b5563; }
.pager button.is-active { background: var(--blue); color: #fff; border-color: var(--blue); }
.pager button:disabled { opacity: .4; cursor: default; }
.pager input { width: 42px; text-align: center; }

.site-foot { margin-top: 28px; text-align: center; color: #98a0aa; font-size: 12px; line-height: 1.8; }
.site-foot nav { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.site-foot button,
.site-foot a { border: 0; background: transparent; color: var(--blue); padding: 0; font-size: 12px; text-decoration: none; }
.site-foot .brand-line { color: #667085; }

.overlay {
    position: fixed; inset: 0; background: rgba(40, 48, 60, .45); z-index: 400;
    display: flex; align-items: center; justify-content: center; padding: 18px;
    -webkit-tap-highlight-color: transparent;
}
.overlay.is-picker {
    background: transparent;
    align-items: flex-start;
    justify-content: center;
    padding: 176px 24px 148px;
}
.modal {
    width: min(440px, 100%); max-height: min(88vh, 820px); overflow: auto;
    background: #fff; border-radius: 16px; padding: 22px 22px 18px; position: relative; box-shadow: var(--shadow);
}
.picker-modal {
    width: min(800px, 100%);
    max-height: calc(100vh - 176px - 148px);
    align-self: flex-start;
    height: auto;
    min-height: 0;
    border-radius: 16px;
    padding: 20px 24px 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 0;
    background: #fff;
    box-shadow: none;
}
.google-modal { width: min(680px, 100%); }
.modal-close { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border: 0; background: transparent; color: #98a0aa; font-size: 22px; }
.ad-modal { width: min(492px, 100%); padding: 36px 0 0; background: transparent; box-shadow: none; overflow: visible; }
.ad-modal .modal-close { top: 0; right: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(28, 32, 36, .55); color: #fff; line-height: 28px; }
.ad-modal .cs-ad { width: 100%; }
.ad-modal .cs-ad-cover { display: block; width: 100%; height: 140px; object-fit: cover; border-radius: 12px; margin: 0 0 12px; }
.login-modal h2, .verify-modal h2 { text-align: center; margin: 6px 0 16px; font-size: 22px; }
.login-modal .btn-primary, .verify-modal .btn-primary {
    width: 100%; display: block; height: 46px; margin: 0 0 14px; border-radius: 8px;
}
.login-modal .btn-primary {
    background: #8eb6ff;
    font-weight: 650;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
}
.login-modal .btn-primary:disabled { color: #fff; opacity: 1; }
.login-modal .btn-primary:not(:disabled) { cursor: pointer; }
.login-modal .btn-primary.is-ready {
    background: #2F7BFF;
    cursor: pointer;
}
.login-modal .btn-primary.is-ready:hover { background: #1D68F0; }
.login-modal .btn-primary.is-busy,
.login-modal .btn-primary.is-busy:hover,
.verify-modal .btn-primary.is-busy,
.verify-modal .btn-primary.is-busy:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #C5CDD8;
    color: #fff;
    cursor: not-allowed;
    pointer-events: none;
}
.login-modal.is-sending .btn-google,
.login-modal.is-sending .line-input {
    pointer-events: none;
}
.login-modal.is-sending .line-input {
    background: #f4f6f8;
    color: #98a2b3;
}
.login-modal.is-sending .btn-google { opacity: 0.55; }
.login-modal .btn-spin,
.verify-modal .btn-spin {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: unlock-spin .7s linear infinite;
}
.verify-modal .btn-primary { margin-top: 8px; }
.login-modal .fine, .verify-modal .fine { display: block; margin: 0 0 12px; }
.login-modal .agree { display: block; margin: 4px 0 0; }
.field-label { display: block; font-size: 14px; margin-bottom: 8px; }
.line-input { width: 100%; height: 44px; border: 1px solid #e6ebf2; border-radius: 8px; padding: 0 12px; margin-bottom: 14px; outline: none; font-size: 16px; }
.line-input:focus { border-color: #b9d2ff; }
.or { display: flex; align-items: center; gap: 12px; color: #c0c4cc; margin: 16px 0; font-size: 13px; }
.or::before, .or::after { content: ""; height: 1px; flex: 1; background: #eceff3; }
.fine { color: #98a0aa; font-size: 12px; line-height: 1.7; text-align: center; }
.agree { color: #98a0aa; font-size: 12px; text-align: center; line-height: 1.7; }
.center { text-align: center; }
.mail-badge { width: 64px; height: 64px; margin: 4px auto 8px; border-radius: 50%; background: #eef4ff; color: var(--blue); display: grid; place-items: center; }
.code-boxes { display: flex; justify-content: center; gap: 8px; margin: 16px 0; }
.code-boxes input { width: 42px; height: 48px; text-align: center; font-size: 20px; border: 1px solid #e6ebf2; border-radius: 8px; outline: none; }
.code-boxes input:focus { border-color: var(--blue); }
.resend-row { text-align: center; color: #98a0aa; font-size: 13px; }
.resend-row button { border: 0; background: transparent; color: var(--blue); padding: 0 4px; }
.resend-row button:disabled { color: #b0b6c0; }
.google-top { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #f0f2f5; font-size: 14px; }
.google-grid { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding-top: 16px; }
.google-brand img { width: 64px; height: 64px; border-radius: 16px; }
.google-brand h2 { margin: 12px 0 4px; font-size: 26px; }
.google-brand p { margin: 0; color: #667085; }
.account { width: 100%; border: 0; border-bottom: 1px solid #f2f4f7; background: transparent; display: flex; align-items: center; gap: 10px; padding: 12px 4px; text-align: left; }
.account:hover { background: #f7f9fc; }
.account strong, .account small { display: block; }
.account small { color: #667085; font-size: 12px; }
.picker-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex: none; margin: 0 0 16px; min-height: 24px;
}
.picker-modal h2 {
    margin: 0; font-size: 16px; font-weight: 600; line-height: 22px;
    text-align: left; color: #1c2430;
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}
.picker-modal .modal-close {
    position: static; width: 24px; height: 24px; padding: 0;
    display: grid; place-items: center; flex: none;
    color: inherit; font-size: 0; border-radius: 0;
}
.picker-modal .modal-close img { width: 24px; height: 24px; display: block; }
.picker-modal .modal-close:hover { background: transparent; opacity: .7; }
.search-bar {
    display: flex; align-items: center; gap: 8px; background: #f5f6f8;
    border-radius: 999px; height: 40px; padding: 0 16px; color: #c5c8ce; flex: none;
}
.search-bar svg { flex: none; }
.search-bar input { flex: 1; border: 0; background: transparent; outline: none; font-size: 14px; min-width: 0; color: #1c2430; }
.search-bar input::placeholder { color: #c5c8ce; }
.day-row { display: flex; gap: 8px; overflow: auto; margin: 12px 0; }
.picker-modal .day-row {
    gap: 8px; margin: 16px 0 12px; flex: none;
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; touch-action: pan-x;
    overscroll-behavior-x: contain; scrollbar-width: none;
}
.picker-modal .day-row::-webkit-scrollbar { display: none; }
.picker-modal .day-row button {
    height: 32px; padding: 0 16px; border-radius: 999px; border: 0;
    background: #f2f3f5; color: #5e6570; font-size: 14px; font-weight: 400;
}
.picker-modal .day-row button.is-active { background: #1b62f2; color: #fff; font-weight: 500; }
.picker-modal .day-row.is-hidden { display: none; }
.picker-list {
    flex: 1 1 auto; min-height: 0; max-height: none;
    overflow-x: hidden; overflow-y: auto; padding: 0 4px 0 0; margin-right: -2px;
    display: flex; flex-direction: column; gap: 8px;
    scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #d0d4dc transparent;
}
.picker-list::-webkit-scrollbar { width: 6px; }
.picker-list::-webkit-scrollbar-thumb { background: #d0d4dc; border-radius: 99px; }
.picker-list::-webkit-scrollbar-track { background: transparent; }
.picker-list.is-search .picker-row { grid-template-columns: 124px 72px minmax(0, 1fr) auto; }
.picker-row {
    display: grid; grid-template-columns: 108px 72px minmax(0, 1fr) auto; gap: 8px 16px; align-items: center;
    flex: none; min-height: 56px; background: #f5f6f8; border-radius: 8px; padding: 12px 16px;
}
.picker-row:hover { background: #eef1f6; }
.picker-row .teams {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
    min-width: 0; font-weight: 500; font-size: 14px; color: #1c2430;
}
.picker-row .side { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: none; }
.picker-row .side.home { justify-content: flex-end; }
.picker-row .side.away { justify-content: flex-start; }
.picker-row .tname {
    min-width: 0; overflow: hidden; font-weight: 500; font-size: 14px; color: #1c2430;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25;
    word-break: break-word;
}
.picker-row .side.home .tname { text-align: right; }
.picker-row .side.away .tname { text-align: left; }
.picker-row .teams em { font-style: normal; color: #b0b6c0; font-size: 13px; font-weight: 500; flex: none; }
.picker-row .crest { width: 22px; height: 22px; }
.when, .league-name { color: #9aa1ab; font-size: 13px; white-space: nowrap; }
.btn-select { height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: #e8f1ff; color: var(--blue); }
.picker-modal .btn-select {
    height: 32px; min-width: 64px; padding: 0 16px; border-radius: 8px;
    border: 0; background: #e8f1ff; color: #1b62f2;
    font-size: 14px; font-weight: 500;
}
.btn-select:hover { background: #1b62f2; color: #fff; }
.picker-modal .btn-select:hover,
.picker-modal .picker-row:hover .btn-select {
    background: #1b62f2; color: #fff;
}
.confirm-modal {
    width: min(420px, 100%);
    padding: 20px 24px 16px;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(28, 32, 36, 0.12);
}
.confirm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.confirm-modal h2 {
    margin: 0;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #1C2024;
}
.confirm-modal .modal-close {
    position: static;
    width: 24px;
    height: 24px;
    padding: 0;
    flex: none;
    color: #1C2024;
}
.confirm-modal .modal-close img { width: 24px; height: 24px; display: block; }
.confirm-modal #confirm-text {
    margin: 16px 0 0;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #1C2024;
}
.confirm-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
}
.confirm-actions .btn-primary,
.confirm-actions .btn-ghost {
    flex: none;
    width: auto;
    min-width: 72px;
    height: 32px;
    margin: 0;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
}
.confirm-actions .btn-ghost {
    border: 1px solid #E0E1E6;
    background: #fff;
    color: #1C2024;
}
.confirm-actions .btn-primary { background: #2F7BFF; color: #fff; }
.confirm-actions .btn-primary:hover { background: #1D68F0; }
.confirm-modal.is-single #confirm-cancel { display: none; }
.legal-body { color: #3c4656; font-size: 14px; line-height: 1.8; white-space: pre-wrap; }
.toast {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 500;
    max-width: min(320px, calc(100vw - 48px));
    padding: 14px 22px;
    border-radius: 8px;
    background: rgba(28, 32, 36, .92);
    color: #fff;
    font-size: 15px;
    line-height: 22px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .18);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.96);
    transition: .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sidebar-mask { display: none; }
:focus-visible { outline: 2px solid #93bbff; outline-offset: 2px; }

@media (min-width: 961px) {
    /* flex-basis 优先于 width：必须改 --sidebar / flex，主区白底圆角卡片才会跟着收 */
    .app.is-collapsed { --sidebar: 76px; }
    .app.is-collapsed .sidebar {
        width: var(--sidebar);
        flex: 0 0 var(--sidebar);
        overflow: hidden;
    }
    .app.is-collapsed .brand-name,
    .app.is-collapsed .nav-label,
    .app.is-collapsed .recent,
    .app.is-collapsed .user-copy { display: none; }
    .app.is-collapsed .nav-item,
    .app.is-collapsed .side-brand,
    .app.is-collapsed .user-main { justify-content: center; }
    .app.is-collapsed .side-brand {
        flex-direction: column;
        align-items: center;
        gap: 8px;
        padding: 16px 8px 8px;
    }
    .app.is-collapsed .side-nav { padding: 8px 0; }
    .app.is-collapsed .nav-item { width: 42px; padding: 0; margin: 0 auto; }
    .app.is-collapsed .side-user { margin-top: auto; justify-content: center; padding: 12px 8px; }
    .app.is-collapsed .user-more { display: none; }
}

@media (max-width: 1100px) {
    .reco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .plan-grid,
    .plan-grid.credits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .info-grid { grid-template-columns: 1fr 1fr; }
    .two-col { grid-template-columns: 1fr; }
    .hero h1 { font-size: 28px; }
}
@media (max-width: 960px) {
    .chat-row-ops { display: flex; }
    .chat-item { padding-right: 72px; }
    .overlay.is-picker {
        left: 0;
        padding: 12px;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .88);
    }
    .overlay.is-picker .picker-modal {
        width: 100%;
        max-width: calc(100vw - 24px);
        height: min(88vh, 640px);
        max-height: min(88vh, 820px);
        margin-left: 0 !important;
        align-self: center;
        overflow: hidden;
    }
    .picker-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .picker-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        flex: none;
        height: auto;
        min-height: auto;
        min-width: 0;
        gap: 8px 10px;
        padding: 12px 14px;
    }
    .picker-row .when { flex: 1 1 auto; }
    .picker-row .league-name { flex: 0 0 auto; margin-left: auto; text-align: right; }
    .picker-row .teams { flex: 1 1 100%; }
    .picker-row .btn-select { flex: 1 1 100%; width: 100%; height: 32px; min-width: 0; }
    .bone-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 10px;
        padding: 12px 14px;
    }
    .bone-row .bone-chip { flex: 1 1 38%; width: auto; }
    .bone-row .bone-wide,
    .bone-row .bone-btn { flex: 1 1 100%; width: auto; }
    .bone-row .bone-btn { height: 32px; }
    .hero { padding: 28px 16px 12px; }
    .hero h1 { font-size: 24px; font-weight: 600; line-height: 1.2; padding-right: 72px; }
    .hero p { font-size: 14px; font-weight: 400; line-height: 22px; margin-top: 18px; color: #1c2430; }
    .chips {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 0 clamp(4px, 2.2vw, 8px);
        width: 100%;
        margin-top: 16px;
    }
    .chips button {
        flex: 0 0 auto;
        min-width: 0;
        justify-content: flex-start;
        gap: clamp(2px, 1.1vw, 4px);
        padding: 4px 0;
        font-size: clamp(13px, 3vw, 16px);
        line-height: 20px;
        white-space: nowrap;
    }
    .chips .chip-ico {
        width: clamp(16px, 4.4vw, 20px);
        height: clamp(16px, 4.4vw, 20px);
        flex: none;
    }
    #reco-block { margin: 12px 0 0; width: auto; max-width: none; }
    .chat-view .pick-btn { margin-left: 0; }
    .chat-view .composer-col .ask,
    .chat-view .composer-col .disclaimer { margin-left: 0; width: 100%; }
    .chat-view .composer-col .ask { margin-top: 10px; }
    .chat-view .composer-col .ask input { height: 48px; }
    .app { display: block; }
    .sidebar {
        position: fixed; left: 0; top: 0; bottom: auto;
        width: min(300px, 86vw);
        height: 100vh;
        height: 100svh;
        height: var(--vvh, 100svh);
        max-height: var(--vvh, 100svh);
        box-sizing: border-box;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overflow: hidden;
        transform: translateX(-105%);
        transition: transform .2s ease; box-shadow: var(--shadow);
    }
    .sidebar.is-open { transform: none; }
    .sidebar.is-open.is-profile { overflow: visible; }
    .lang-list { left: auto; right: 0; top: auto; bottom: calc(100% + 8px); }
    .lang-list::before { top: 100%; right: 0; bottom: auto; left: 0; width: auto; height: 16px; }
    .side-user { flex: none; margin-top: auto; background: #fff; }
    .sidebar-mask { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 15; }
    body.nav-open .sidebar-mask { display: block; }
    .mobile-bar { display: flex; }
    /*.mobile-bar [data-action="toggle-sidebar"] { margin-left: auto; }*/
    .collapse-btn { display: none; }
    html, body { height: var(--vvh, 100svh); overflow: visible; }
    .app { height: var(--vvh, 100svh); max-height: var(--vvh, 100svh); overflow: hidden; }
    .overlay {
        align-items: center;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    }
    .modal, .pay-modal, .pay-result {
        width: 100%;
        max-height: calc(var(--vvh, 100svh) - 24px - env(safe-area-inset-bottom, 0px));
    }
    .main {
        width: 100%;
        height: var(--vvh, 100svh);
        max-height: var(--vvh, 100svh);
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .view.chat-view {
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    .chat-view::before {
        height: clamp(148px, 42vw, 220px);
        aspect-ratio: auto;
        background-size: 100% 100%, 100% 100%, auto 100%;
        background-position: left top, left top, right center;
    }
    .chat-banner { flex: none; }
    .chat-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .page, .chat-col { width: min(920px, calc(100% - 28px)); }
    .hero { padding-top: 28px; }
    .digest { grid-template-columns: 1fr; }
    .digest .btn-primary { grid-column: 1; grid-row: auto; justify-self: start; }
    .scoreboard {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        justify-items: center;
        align-items: center;
        gap: 6px 8px;
        min-height: 0;
        padding: 16px 12px;
        margin-bottom: 12px;
        text-align: center;
    }
    .sb-team {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 100%;
        font-size: 14px;
        font-weight: 600;
    }
    .sb-team span { order: 2; max-width: 100%; text-align: center; }
    .sb-team .crest { order: 1; width: 36px !important; height: 36px !important; }
    .sb-score { order: 3; font-size: 20px; min-width: 0; }
    .sb-mid { min-width: 0; }
    .sb-league, .sb-time { font-size: 12px; line-height: 18px; }
    .sb-mid b { margin-top: 2px; font-size: 13px; }
    .h2h-head {
        height: auto;
        width: 100%;
        grid-template-columns: 1fr;
        row-gap: 12px;
        margin-bottom: 12px;
    }
    .h2h-bars { width: 100%; height: auto; }
    .h2h-metric-top { grid-template-columns: auto minmax(0, 1fr) auto; }
    .h2h-metric-top span { width: auto; max-width: 100%; }
    .h2h-metric-bars { grid-template-columns: auto minmax(0, 1fr) auto; }
    .h2h-metric-bars .pair { column-gap: 10px; }
    .h2h-side.right { justify-content: flex-start; }
    .two-col, .form-col, .form-sum, .table-scroll { min-width: 0; max-width: 100%; }
    .form-sum { padding-right: 22px; }
    .form-sum .wdl { margin-right: 2px; white-space: nowrap; }
    #view-detail {
        width: 100%;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    #view-detail .pad { padding: 0; }
    .report { padding: 0 0 16px; border-radius: 16px 16px 0 0; }
    .report-sky {
        border-radius: 16px 16px 0 0;
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        min-height: 0;
        margin-inline: 0;
        padding: 16px 16px 32px;
    }
    .report-main { margin: -20px 12px 0; padding: 14px 12px 16px; }
    .review-head { flex-direction: column; align-items: stretch; gap: 12px; }
    .review-line,
    .review-line.has-contact { grid-template-columns: minmax(0, 1fr); }
    .review-line.has-contact .review-name { white-space: normal; }
    .review-bio { text-align: left; }
    .review-contact { justify-self: end; }
    .review-who { min-width: 0; }
    .review-grid { grid-template-columns: 1fr; }
    .review-banner { flex-wrap: wrap; align-items: center; row-gap: 8px; }
    .review-brand { flex: 1 1 200px; min-width: min(100%, 200px); }
    .review-done { flex: none; margin-left: auto; }
    .review-tabs { grid-template-columns: 1fr 1fr; }
    .review-side b { font-size: 16px; }
    .report-follow { padding: 0 16px; }
    .gnews { grid-template-columns: minmax(0, 1fr); }
    .report-ad { height: 140px; margin: 16px 16px 8px; font-size: 24px; }
    .report-follow .table-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .report-follow .result {
        width: max-content;
        min-width: 100%;
        table-layout: auto;
    }
    .report-follow .result th,
    .report-follow .result td {
        width: auto;
        padding: 10px 8px;
        overflow: visible;
        text-overflow: clip;
    }
    .report .poss-row { grid-template-columns: 1fr; }
    .weather-grid { grid-template-columns: 1fr 1fr; }
    .game-rings, .game-pitches, .game-season-grid { grid-template-columns: 1fr; }
    .game-board { min-height: 360px; gap: 4px; padding: 14px 4px; }
    .game-squad { gap: 8px; }
    .game-squad-row { min-height: 52px; padding: 8px 8px; }
    .game-squad-meta b { font-size: 13px; }
    .game-squad-photo,
    .game-squad-photo img,
    .game-squad-photo .p-ava { width: 32px; height: 32px; }
    .game-board .game-pl { width: 52px; }
    .game-board .game-pl em { font-size: 10px; line-height: 12px; }
    .game-board .game-squad-photo,
    .game-board .game-squad-photo img,
    .game-board .game-squad-photo .p-ava { width: 28px; height: 28px; }
    .game-board button.game-pl { min-height: 0; padding: 0; }
    .player-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .overlay.is-player {
        align-items: flex-end;
        padding: 0;
    }
    .overlay.is-player .player-modal {
        width: 100%;
        max-width: none;
        max-height: min(92vh, 100%);
        border-radius: 16px 16px 0 0;
        padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .player-ring .game-ring { width: 56px; height: 56px; }
    .game-table { font-size: 12px; }
    .game-score-mid { gap: 6px; }
    .game-side b { font-size: 13px; }
    .game-score-num strong { font-size: 22px; line-height: 28px; }
    .game-meet-row { grid-template-columns: 72px minmax(0, 1fr) 64px; gap: 6px; }
    .report-game .report-h2h-head { max-width: 100%; align-items: flex-start; }
    .report-game .report-legend { max-width: none; }
    .poss-pct { font-size: 28px; line-height: 36px; }
    .h2h .h2h-row {
        width: 100%;
        height: 48px;
        min-height: 0;
        grid-template-columns: max-content minmax(0, 1fr) max-content;
        align-items: center;
        column-gap: 6px;
        row-gap: 0;
        justify-items: stretch;
        padding: 0 8px;
        overflow: hidden;
    }
    .h2h .h2h-row .when,
    .h2h .h2h-row .h2h-league {
        width: auto;
        max-width: none;
        height: 20px;
        font-size: 11px;
        line-height: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .h2h .h2h-row .when {
        flex: none;
        text-align: left;
        justify-self: start;
        overflow: visible;
        text-overflow: clip;
    }
    .h2h .h2h-row .h2h-league {
        max-width: 64px;
        text-align: right;
        justify-self: end;
    }
    .h2h .h2h-row .h2h-mid {
        width: auto;
        min-width: 0;
        overflow: hidden;
        grid-template-columns: minmax(0, 1fr) 18px auto 18px minmax(0, 1fr);
        column-gap: 2px;
    }
    .h2h .h2h-row .hn {
        width: auto;
        min-width: 0;
        height: 18px;
        font-size: 11px;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .h2h .h2h-row .hs { width: auto; min-width: 0; height: 20px; font-size: 14px; line-height: 20px; }
    .h2h .h2h-row .crest { width: 18px !important; height: 18px !important; }
    .sb-team.left, .sb-team.right { justify-content: center; }
    .tabs-row {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
        min-width: 0;
    }
    .tabs {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .locked { min-height: 240px; padding: 28px 12px; }
    .unlock-wait {
        min-height: 0;
        padding: 12px 0 8px;
        border-radius: 12px;
        background:
            radial-gradient(280px 120px at 50% 0%, rgba(47, 123, 255, .12), transparent 72%),
            linear-gradient(180deg, #f4f8ff 0%, #fff 180px);
    }
    .unlock-card { padding: 20px 14px 10px; border-radius: 14px; box-shadow: 0 8px 22px rgba(47, 123, 255, .08); }
    .unlock-orb { width: 56px; height: 56px; margin-bottom: 10px; }
    .unlock-orb svg { width: 22px; height: 22px; }
    .unlock-phrase { min-height: 44px; font-size: 16px; line-height: 24px; }
    .unlock-steps { margin-top: 10px; }
    .unlock-steps li { font-size: 13px; line-height: 20px; padding: 7px 4px; }
    .unlock-steps li::before { left: 11px; top: 26px; }
    .google-grid { grid-template-columns: 1fr; }
    .vip-page {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        background: none;
    }
    .vip-hero {
        min-height: 0;
        padding: 20px 16px 0;
        border-radius: 0;
    }
    .vip-hero::before {
        height: 320px;
        background-position: right -56px top 0;
        background-size: auto 150px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 40%, #000 70%, #000 100%), linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .08) 40%, #000 70%, #000 100%), linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
        mask-composite: intersect;
    }
    .vip-title,
    .vip-lead,
    .vip-sub { max-width: 100%; }
    .vip-title,
    .vip-lead { padding-right: 72px; }
    .vip-sub { padding-right: 48px; }
    .vip-seg-bar {
        margin-top: 16px;
        padding: 8px 16px;
    }
    .vip-intro {
        margin: 12px 0 0;
        padding: 0 0 8px;
        background: transparent;
    }
    .vip-body { padding: 12px 16px 32px; }
    .plan-grid,
    .plan-grid.credits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        justify-content: stretch;
        gap: 12px;
        padding-bottom: 16px;
    }
    #plan-grid .plan,
    #credit-grid .plan,
    .plan.credit-card {
        height: auto;
    }
    #credit-grid .plan {
        height: auto;
        padding: 16px 16px 14px;
    }
    #plan-grid .plan {
        padding: 16px 16px 14px;
    }
    #plan-grid .plan.is-hot {
        padding-top: 36px;
    }
    #plan-grid .plan .buy,
    #credit-grid .plan .buy {
        margin-top: 16px;
    }
    .vip-title { font-size: 28px; line-height: 36px; max-width: 100%; }
    .vip-title em { font-size: 28px; }
    .vip-lead { font-size: 28px; line-height: 36px; max-width: 100%; }
    .vip-hero .vip-sub { max-width: 100%; font-size: 16px; line-height: 24px; }
    #view-usage::before,
    #view-orders::before {
        height: 280px;
        background-position: 0 0, right -20px;
        background-size: 100% 100%, auto 300px;
    }
    #view-usage .usage-page,
    #view-orders .orders-page { padding: 28px 16px 32px; }
    #view-orders .page-title { margin-bottom: 16px; }
    #view-usage .sec-row {
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
        padding: 8px 10px;
        min-width: 0;
    }
    #view-orders .tool-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 0 0 12px;
    }
    #view-usage .sec-title {
        flex: none;
        white-space: nowrap;
    }
    .date-range {
        height: 32px;
        padding: 0 8px;
        margin-top: -2px;
        min-width: 0;
    }
    #view-usage .date-range {
        flex: 1 1 auto;
        justify-content: flex-end;
    }
    .date-pop {
        left: 16px;
        right: 16px;
        width: auto;
        max-height: min(360px, calc(100vh - 24px));
        overflow: auto;
    }
    body.date-pop-open .view { overflow: hidden; }
    .date-pop-day { height: 40px; font-size: 15px; }
    #view-usage .page-title { margin-bottom: 16px; }
    .expire { height: auto; min-height: 56px; margin-bottom: 12px; }
    .balance-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        column-gap: 12px;
        height: auto;
        min-height: 200px;
        padding: 16px 16px 20px;
    }
    .balance-copy { grid-column: 1; }
    .balance-deco {
        height: 210px;
        top: 50%;
    }
    .balance-card .btn-primary.pill {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        margin: 0;
    }
    .balance-sub { flex-direction: column; column-gap: 0; }
    #view-usage .table-scroll,
    #view-orders .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    #view-usage .grid {
        width: 600px;
        min-width: 600px;
        max-width: none;
        table-layout: fixed;
    }
    #view-orders .grid {
        width: 720px;
        min-width: 720px;
        max-width: none;
        table-layout: fixed;
    }
    #view-usage .grid th:nth-child(1),
    #view-usage .grid td:nth-child(1) { width: 140px; }
    #view-usage .grid th:nth-child(2),
    #view-usage .grid td:nth-child(2) { width: 210px; }
    #view-usage .grid th:nth-child(3),
    #view-usage .grid td:nth-child(3) { width: 140px; }
    #view-usage .grid th:nth-child(4),
    #view-usage .grid td:nth-child(4) { width: 110px; }
    .ai-vs { font-size: 18px; gap: 8px; }
}
@media (max-width: 640px) {
    .expert-grid, .brief-cards, .info-grid, .poss-row { grid-template-columns: 1fr; }
    .plan-grid, .plan-grid.credits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #plan-grid .plan,
    #credit-grid .plan { padding: 14px 12px 12px; }
    #plan-grid .plan.is-hot { padding-top: 34px; }
    #plan-grid .plan .price,
    #credit-grid .plan .price { font-size: 26px; line-height: 32px; }
    #credit-grid .plan h3 { font-size: 18px; line-height: 24px; }
    #credit-grid .plan h3 .count-unit { font-size: 13px; font-weight: 400; line-height: 18px; }
    #plan-grid .plan .buy,
    #credit-grid .plan .buy { margin-top: 12px; height: 34px; }
    .reco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .reco-card { padding: 8px 10px; }
    .reco-top { width: 100%; min-width: 0; }
    .reco-league { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .reco-team { min-width: 0; overflow: hidden; }
    .plan-grid, .plan-grid.credits { padding-bottom: 16px; }
    .overlay { padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .modal { width: 100%; max-width: calc(100vw - 24px); min-width: 0; }
    .picker-modal { padding: 16px 14px 12px; }
    .msg { flex-direction: row; }
    .code-boxes { gap: 6px; }
    .code-boxes input { width: 36px; height: 42px; }
    .hero h1 { font-size: 22px; }
    .chips { flex-wrap: wrap; justify-content: flex-start; gap: 6px 14px; }
    .chips button { white-space: normal; }
    .ai-brief .brief-report,
    .digest-card .brief-report {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 10px;
    }
    .ai-brief .brief-report-copy,
    .digest-card .brief-report-copy { flex: 1 1 100%; }
    .ai-brief .brief-report-line { flex-wrap: wrap; align-items: center; }
    .ai-brief .brief-report-line strong,
    .brief-report-copy strong { white-space: normal; }
    .ai-brief .brief-report-btn,
    .digest-card .brief-report-btn {
        margin-left: auto;
        max-width: 100%;
        height: auto;
        min-height: 32px;
        padding: 6px 12px;
        line-height: 18px;
        white-space: normal;
        text-align: center;
    }
    .digest-vs { font-size: 16px; gap: 8px; }
    .digest-tiles { grid-template-columns: 1fr; }
    .digest-page .brief-report { flex-wrap: wrap; }
    .digest-page .brief-report-btn { margin-left: auto; }
    .ask-row { grid-template-columns: 1fr; align-items: flex-start; gap: 6px; }
    .ask-meta, .ask-teams { white-space: normal; }
    .ask-teams { grid-column: 1; justify-self: start; justify-content: flex-start; flex-wrap: wrap; }
    .sb-team { font-size: 14px; }
    .balance-deco { height: 120px; }
    #view-usage .balance-deco { height: 210px; }
    .pager { justify-content: flex-end; gap: 8px 6px; padding: 10px 2px 2px; }
    .pager select, .pager input { height: 28px; }
    .plan-article { max-width: none; }
    .plan-page .plan-match {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        min-height: 0;
        padding: 12px 14px;
    }
    .plan-kick { position: static; transform: none; }
    .plan-teams { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
    .plan-time { font-size: 12px; }
    .plan-foot .foot-split { display: none; }
    .plan-foot .foot-top { gap: 8px 12px; }
}

/* 桌面全屏：侧栏 256，主区铺满剩余宽度。首页间距按 1184 画板比例（%）随屏伸缩。 */
@media (min-width: 961px) {
    .app { width: 100%; max-width: none; height: 100vh; margin: 0; }
    .sidebar { flex: 0 0 var(--sidebar); height: 100vh; }
    .main {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        height: 100vh;
        background: #fff;
        border-radius: 0;
        overflow: hidden;
    }
    .view.chat-view {
        flex: 1;
        min-height: 0;
    }
    .chat-banner { flex: none; }
    .chat-view.is-thread .chat-banner { min-height: 258px; }
    .chat-view .chat-col,
    .chat-view .composer-wrap .chat-col {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .page { width: 100%; max-width: none; margin: 0; padding: 22px 24px 40px; }
    .report { container-type: inline-size; }
    .report-sky {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: auto;
        margin-inline: 0;
        min-height: 220px;
        padding: 20px 16px 48px;
        background-position: 82% 16%;
        background-size: cover;
    }
    .report-sky .report-copy {
        width: 100%;
        height: auto;
        min-height: 0;
        margin-top: 8px;
    }
    .vip-page { padding: 0; background: #eef6fd; }
    .vip-hero { padding: 48px 60px 0; min-height: 0; border-radius: 0; }
    .vip-body { padding: 8px 60px 40px; }
    .hero {
        padding: clamp(56px, 8.1vh, 83px) 28% 0 18.33%;
        text-align: left;
    }
    .hero h1 { font-size: clamp(26px, 2.22vw, 32px); font-weight: 600; line-height: 1; color: #1c2430; }
    .hero p { margin-top: 18px; font-size: clamp(14px, 1.11vw, 16px); font-weight: 400; line-height: 24px; color: #1c2430; }
    .chips { justify-content: flex-start; margin-top: 21px; gap: 10px 32px; }
    #reco-block {
        margin: 20px 16.55% 0 18.33%;
        padding: 0;
        width: auto;
        max-width: none;
    }
    #reco-block h2 { text-align: left; }
    .h2h-fit { width: 1071px; }
    #view-detail { scrollbar-gutter: stable; }
    .reco-grid {
        margin: 16px 0 0;
        width: 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
    .expert-grid { column-gap: 44px; row-gap: 16px; }
    .composer-wrap { background: transparent; padding: 0 0 calc(16px + env(safe-area-inset-bottom)); }
    .chat-view .composer-col { align-items: stretch; width: 100%; max-width: none; }
    .chat-view .pick-btn {
        margin-left: var(--composer-left);
        align-self: flex-start;
        width: auto;
        max-width: max-content;
        justify-content: flex-start;
    }
    #thread {
        margin-left: var(--composer-left);
        width: var(--composer-width);
        box-sizing: border-box;
        padding: 16px 0 20px;
    }
    .chat-view .composer-col .ask {
        margin-top: 12px;
        margin-left: var(--composer-left);
        width: var(--composer-width);
    }
    .chat-view .composer-col .ask input { height: clamp(48px, 5.86vh, 60px); font-size: 14px; padding-right: 56px; }
    .chat-view .composer-col .disclaimer {
        width: var(--composer-width);
        margin-left: var(--composer-left);
    }
    .overlay.is-picker {
        left: var(--sidebar);
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        box-sizing: border-box;
        padding: calc(242px + clamp(56px, 7.8vh, 80px)) 3.04% 148px 0;
    }
    .picker-modal {
        width: min(800px, calc(100% - var(--composer-left)));
        max-width: 800px;
        margin-left: var(--composer-left);
        flex: 1 1 0;
        height: auto;
        min-height: 0;
        max-height: none;
        box-shadow: none;
    }
    .picker-list {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }
    .picker-list > .empty { margin: auto; }
}

.pay-modal {
    width: min(760px, 100%);
    padding: 22px 22px 20px;
    border-radius: 16px;
}
.pay-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; align-items: stretch; }
.pay-back {
    display: inline-flex; align-items: center; gap: 2px;
    height: 16px; border: 0; background: transparent; padding: 0; margin: 0 0 16px 0;
    font-size: 16px; font-weight: 600; color: #1C2430; line-height: 16px;
}
.pay-back img { display: block; width: 16px; height: 16px; flex: none; }
.pay-wallet img, .pay-card-head img { display: block; width: 24px; height: 24px; flex: none; }
.pay-wallet[data-method="apple"] img { transform: scale(0.9); }
.pay-wallet[data-method="google"] img { transform: scale(0.86); }
.pay-wallet {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; height: 44px; margin-bottom: 10px;
    border: 1px solid #E6E8EC; border-radius: 8px; background: #fff;
    font-size: 16px; font-weight: 600; color: #1C2430; line-height: 24px;
}
.pay-wallet:hover { background: #F7F8FA; }
.pay-wallet.is-off,
.pay-wallet:disabled {
    background: #F5F6F8;
    color: #8B93A1;
    border-color: #F0F2F5;
    cursor: not-allowed;
}
.pay-wallet.is-off img,
.pay-wallet:disabled img { opacity: 0.4; filter: grayscale(1); }
.pay-wallet.is-off:hover,
.pay-wallet:disabled:hover { background: #F5F6F8; }
.pay-wallet.is-covered { display: none; }
.pay-express { margin: 0 0 10px; }
.pay-express:empty { display: none; margin: 0; }
.pay-or {
    display: flex; align-items: center; gap: 12px;
    margin: 6px 0 12px; color: #98A0AA; font-size: 12px;
}
.pay-or::before, .pay-or::after { content: ""; height: 1px; background: #EEF0F3; flex: 1; }
.pay-card { border: 1px solid #E6E8EC; border-radius: 10px; padding: 14px 14px 8px; }
.pay-card-head { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 10px; color: #1C2430; line-height: 24px; }
.pay-field { display: block; margin-bottom: 10px; font-size: 12px; color: #5B6473; }
.pay-field input,
.pay-stripe {
    display: block; width: 100%; height: 40px; margin-top: 6px;
    border: 1px solid #E6E8EC; border-radius: 8px; padding: 0 12px;
    font-size: 14px; color: #1C2430; background: #fff;
    box-sizing: border-box;
}
.pay-stripe { padding: 11px 12px; }
.pay-input .pay-stripe { margin-top: 0; padding: 11px 72px 11px 12px; }
.pay-input:has(.pay-cvc-ico) .pay-stripe { padding-right: 40px; }
.pay-stripe.StripeElement--focus { border-color: #2F7BFF; }
.pay-stripe.StripeElement--invalid { border-color: #E5484D; }
.pay-field input:focus { outline: none; border-color: #2F7BFF; }
.pay-input { position: relative; display: block; }
.pay-input input { padding-right: 72px; }
.pay-brands { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; margin-top: 3px; }
.pay-brands i {
    font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .02em;
    border: 1px solid #E6E8EC; border-radius: 3px; padding: 1px 3px; color: #1a4fa0; background: #fff;
}
.pay-input:has(.pay-cvc-ico) input { padding-right: 40px; }
.pay-cvc-ico {
    position: absolute; right: 8px; top: 50%; width: 24px; height: 24px;
    transform: translateY(-50%); object-fit: contain; pointer-events: none;
}
.pay-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-error { display: block; min-height: 0; color: #E5484D; font-size: 12px; line-height: 16px; }
.pay-error:empty { display: none; }
.pay-summary { display: flex; flex-direction: column; min-height: 100%; padding-top: 4px; }
.pay-actions { margin-top: auto; }
.pay-kicker { margin: 0; color: #5B6473; font-size: 14px; }
.pay-amount { margin: 8px 0 0; font-size: 32px; font-weight: 700; line-height: 36px; color: #1C2430; }
.pay-save { margin: 6px 0 14px; color: #8B93A1; font-size: 13px; }
.pay-save:empty { display: none; }
.pay-meta { margin: 0 0 16px; }
.pay-meta div, .pay-meta { display: block; }
.pay-meta-row { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-size: 14px; color: #5B6473; }
.pay-meta-row b { color: #1C2430; font-weight: 600; float: right; }
.pay-meta-row s { color: #98A0AA; font-weight: 500; }
.pay-check { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; font-size: 13px; line-height: 20px; color: #5B6473; }
.pay-check input {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; margin: 0; flex: none; border: 0; padding: 0;
    background: url("../crests/images/icon_checkbox_nor_24@2x.png") center / 20px 20px no-repeat;
    cursor: pointer;
}
.pay-check input:checked { background-image: url("../crests/images/icon_checkbox_sel_24@2x.png"); }
.pay-check input:focus-visible { outline: 2px solid #2F7BFF; outline-offset: 2px; }
.pay-check a { color: #2F7BFF; }
.pay-submit { width: 100%; height: 44px; margin-top: 8px; border-radius: 8px; font-size: 16px; }
.pay-submit:disabled { opacity: .7; }
.pay-result { width: min(360px, 100%); text-align: center; padding: 28px 24px 22px; }
.pay-mark {
    width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
    display: grid; place-items: center;
}
.pay-mark.is-ok { background: #22A06B; }
.pay-mark.is-bad { background: #E5484D; }
.pay-result h2 { margin: 0; font-size: 18px; font-weight: 600; color: #1C2430; }
.pay-result-amount { margin: 8px 0 0; color: #8B93A1; font-size: 14px; line-height: 22px; word-break: break-word; }
.pay-result-amount:empty { display: none; }
.pay-result-actions { display: flex; gap: 12px; margin-top: 22px; }
.pay-result-actions .btn-ghost, .pay-result-actions .btn-primary {
    flex: 1; height: 40px; border-radius: 8px;
}
@media (max-width: 800px) {
    .pay-grid { grid-template-columns: 1fr; }
    .pay-summary { padding-top: 0; }
}

#view-support {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #EBF5FD;
    scrollbar-width: none;
}
#view-support::-webkit-scrollbar { width: 0; height: 0; }
#view-support::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 320px;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(235, 245, 253, 0.55) 68%, #EBF5FD 100%),
        var(--cs-page-bg);
    background-repeat: no-repeat;
    background-position: 0 0, right -230px;
    background-size: 100% 100%, 100% auto;
}
#view-support .support-page {
    position: relative;
    z-index: 1;
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 83px 3.378% 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
#view-support .page-title {
    margin: 0 0 24px;
    font-weight: 600;
    font-size: 32px;
    color: #1C2024;
    line-height: 40px;
    text-align: left;
}
#view-support .support-board {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: 16px;
}
#view-support .support-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
}
#view-support .cs-sheet {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FFFFFF;
    border: 0;
    border-radius: 16px;
    padding: 20px 24px 16px;
}
#view-support .cs-ad-slot {
    flex: 0 0 312px;
    width: 312px;
    align-self: flex-start;
    max-height: 100%;
    overflow: auto;
}
#view-support .cs-ad-slot[hidden] { display: none; }
#view-support .cs-ad-slot .cs-ad { width: 100%; }
#view-support .cs-slot-card {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-sizing: border-box;
}
#view-support .cs-slot-hero {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 176px;
    overflow: hidden;
    background: #d7ecff;
}
#view-support .cs-slot-art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 168%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: right center;
    display: block;
}
#view-support .cs-slot-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(247, 251, 255, .94) 0%, rgba(247, 251, 255, .78) 46%, rgba(247, 251, 255, 0) 72%);
    z-index: 1;
}
#view-support .cs-slot-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 58%;
    padding: 16px 0 18px 16px;
}
#view-support .cs-slot-card .cs-ad-kicker {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: 100%;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #FFE7B8 0%, #FFD08A 100%);
    color: #553202;
    font-size: 12px;
    font-weight: 600;
    line-height: 26px;
}
#view-support .cs-slot-card .cs-ad-hello {
    max-width: none;
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #1C2024;
}
#view-support .cs-slot-card h3 {
    max-width: none;
    margin: 2px 0 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 34px;
    color: #1C2024;
}
#view-support .cs-slot-card .cs-ad-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1962F6 0%, #1962F6 46%, #3D8CFA 72%, #5CB2FF 100%);
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 44px;
}
#view-support .cs-ad-slot .cs-slot-hero-btn { display: none; }
#view-support .cs-slot-body { padding: 14px 16px 12px; }
#view-support .cs-slot-body .cs-ad-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: #1C2024;
}
#view-support .cs-slot-body .cs-ad-lead {
    max-width: none;
    margin: 14px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: #1C2024;
}
#view-support .cs-slot-body .cs-ad-text {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 20px;
    color: #5B6473;
}
#view-support .cs-slot-body .cs-ad-author + .cs-ad-text { margin-top: 14px; }
#view-support .cs-slot-tags {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}
#view-support .cs-slot-tags span {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 10px;
    background: #F4F7FB;
    color: #5B6473;
    font-size: 14px;
    line-height: 20px;
}
#view-support .cs-slot-tags img { width: 16px; height: 16px; }
#view-support .cs-slot-offer { margin-top: 16px; }
#view-support .cs-slot-hot {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border-radius: 4px;
    background: #FFF4DE;
    color: #F5A524;
    font-size: 12px;
    line-height: 22px;
}
#view-support .cs-slot-price {
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 32px;
    color: #1C2024;
}
#view-support .cs-slot-price strong {
    font-size: 28px;
    font-weight: 700;
    color: #E5484D;
}
#view-support .cs-slot-was {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: #8B93A1;
}
#view-support .cs-slot-body .cs-ad-btn { width: 100%; margin-top: 16px; }
#view-support .cs-slot-mark {
    margin-top: 8px;
    text-align: right;
    font-size: 12px;
    line-height: 18px;
    color: #8B93A1;
}
#view-support .cs-ad-slot .cs-ad:not([style]) {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 16px 16px 14px;
    background: linear-gradient(180deg, #EAF4FF 0px, #F7FBFF 156px, #FFFFFF 228px);
}
#view-support .cs-ad-slot .cs-ad:not([style]) .cs-ad-hello,
#view-support .cs-ad-slot .cs-ad:not([style]) .cs-ad-author { max-width: 68%; }
#view-support .cs-ad-slot .cs-ad:not([style]) h3 { max-width: 118px; }
#view-support .cs-ad-slot .cs-ad-tags {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    max-width: none;
    margin-top: 16px;
}
#view-support .cs-ad-slot .cs-ad-tags span {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    background: #F4F7FB;
}
#view-support .cs-ad-slot .cs-ad-foot { display: contents; }
#view-support .cs-ad-slot .cs-ad-hot {
    order: 20;
    align-self: flex-start;
    height: 22px;
    margin-top: 16px;
    padding: 0 8px;
    border-radius: 4px;
    background: #FFF4DE;
    font-size: 12px;
    line-height: 22px;
}
#view-support .cs-ad-slot .cs-ad-foot > span:first-child {
    order: 21;
    margin-top: 6px;
    color: #8B93A1;
    font-size: 13px;
    line-height: 18px;
}
#view-support .cs-ad-slot .cs-ad .cs-ad-kicker { align-self: flex-start; width: auto; }
#view-support .cs-ad-slot .cs-ad-btn { order: 22; width: 100%; margin-top: 14px; }
#view-support .cs-ad-slot .cs-ad-mark { order: 23; margin: 8px 0 0 auto; }
.cs-push { max-width: min(72%, 420px); }
.cs-push .cs-ad:not([style]) { width: 100%; padding: 12px 14px; }
.cs-push .cs-ad:not([style])::after { display: none; }
.cs-push .cs-ad:not([style]) h3,
.cs-push .cs-ad:not([style]) .cs-ad-hello,
.cs-push .cs-ad:not([style]) .cs-ad-author { max-width: none; }
.cs-push .cs-ad:not([style]) h3 { font-size: 16px; line-height: 22px; }
.cs-push .cs-ad:not([style]) .cs-ad-btn { height: 36px; margin-top: 12px; font-size: 14px; line-height: 36px; }
.cs-log { flex: 1; min-height: 0; overflow: auto; }
.cs-clock {
    margin: 0 0 16px;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    color: #8B93A1;
}
.cs-item { margin: 0 0 22px; }
.cs-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}
.cs-item.is-mine .cs-meta { justify-content: flex-end; }
.cs-ava {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    background: #E8F1FF;
}
.cs-ava-agent {
    display: grid;
    place-items: center;
    background: #7EB6FF;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.cs-name {
    font-size: 14px;
    font-weight: 400;
    color: #1C2024;
    line-height: 20px;
}
.cs-time {
    /*margin-left: auto;*/
    font-size: 12px;
    font-weight: 400;
    color: #8B93A1;
    line-height: 18px;
}
.cs-body { margin: 8px 0 0 44px; }
.cs-item.is-mine .cs-body {
    margin: 8px 44px 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.cs-pack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: min(72%, 520px);
}
.cs-pack .cs-bubble { max-width: none; }
.cs-bubble {
    max-width: min(72%, 520px);
    padding: 12px 14px;
    border-radius: 12px;
    background: #F4F6F8;
    color: #1C2024;
    font-size: 14px;
    line-height: 22px;
    white-space: pre-wrap;
    word-break: break-word;
}
.cs-item.is-mine .cs-bubble { background: #D6E8FF; color: #1C2430; }
.cs-read {
    margin-top: 4px;
    font-size: 12px;
    line-height: 18px;
    color: #8B93A1;
}
.cs-ad {
    position: relative;
    overflow: hidden;
    width: min(460px, 100%);
    box-sizing: border-box;
}
.cs-ad:not([style]) {
    padding: 16px 16px 12px;
    border-radius: 16px;
    background: linear-gradient(180deg, #F7FBFF 0%, #E7F3FF 100%);
    color: #1C2024;
}
.cs-ad:not([style])::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 18px;
    width: 50%;
    height: 170px;
    background: var(--cs-ad-art) right center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%);
    mask-image: linear-gradient(90deg, transparent, #000 24%);
    pointer-events: none;
}
.cs-ad:not([style]) > * { position: relative; z-index: 1; }
.cs-ad:not([style]) .cs-ad-kicker {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #FFE7B8 0%, #FFD08A 100%);
    color: #553202;
    font-size: 12px;
    font-weight: 600;
    line-height: 26px;
}
.cs-ad:not([style]) .cs-ad-hello {
    max-width: 62%;
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: #1C2024;
}
.cs-ad:not([style]) h3 {
    max-width: 70%;
    margin: 2px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 30px;
    color: #1C2024;
}
.cs-ad:not([style]) .cs-ad-author {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 62%;
    margin-top: 8px;
    font-weight: 700;
    font-size: 13px;
    line-height: 18px;
    color: #1C2024;
}
.cs-ad-author-ava,
.cs-ad-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #E5484D;
    flex: none;
}
.cs-ad:not([style]) .cs-ad-lead {
    margin: 14px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: #1C2024;
}
.cs-ad:not([style]) .cs-ad-text {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 20px;
    /*color: #5B6473;*/
}
.cs-ad:not([style]) .cs-ad-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
}
.cs-ad:not([style]) .cs-ad-tags span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: transparent;
    color: #5B6473;
    font-size: 13px;
    line-height: 18px;
}
.cs-ad-tags img { width: 16px; height: 16px; }
.cs-ad:not([style]) .cs-ad-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin-top: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, #1962F6 0%, #1962F6 46%, #3D8CFA 72%, #5CB2FF 100%);
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 44px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}
.cs-ad:not([style]) .cs-ad-btn:hover { color: #fff; background: linear-gradient(90deg, #1456E0 0%, #1456E0 46%, #2F7EFA 72%, #4AA4FF 100%); }
.cs-ad:not([style]) .cs-ad-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
    line-height: 18px;
    color: #8B93A1;
}
.cs-ad:not([style]) .cs-ad-hot { color: #F5A524; }
.cs-ad:not([style]) .cs-ad-mark { margin-left: auto; color: #2C6FF7}
.cs-ad[style] h3 { margin: 8px 0 0; font-size: 16px; line-height: 22px; }
.cs-ad[style] p { margin: 8px 0 0; font-size: 13px; line-height: 20px; }
.cs-ad[style] .cs-ad-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cs-ad[style] .cs-ad-tags span { padding: 3px 8px; border-radius: 999px; font-size: 12px; line-height: 18px; }
.cs-ad[style] .cs-ad-btn {
    display: block;
    margin-top: 10px;
    height: 36px;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    line-height: 36px;
}
.cs-ad[style] .cs-ad-foot { margin-top: 8px; font-size: 12px; line-height: 18px; }
#view-support .cs-offline {
    margin: 12px 0 0;
    width: 100%;
    color: #5B6473;
    font-size: 13px;
    line-height: 20px;
}
#view-support .cs-ask {
    position: relative;
    flex: none;
    align-self: stretch;
    width: 100%;
    margin-top: 16px;
}
#view-support .cs-ask input {
    width: 100%;
    height: 48px;
    border-radius: 999px;
    border: 1px solid #e6ebf2;
    background: #fff;
    padding: 0 58px 0 18px;
    font-size: 14px;
    outline: none;
    box-shadow: 0 4px 16px rgba(28, 39, 60, .04);
}
#view-support .cs-ask input::placeholder { color: #c5cad3; }
#view-support .cs-ask input:focus { border-color: #b9d2ff; }
#view-support .cs-ask .send {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    padding: 0;
    display: grid;
    place-items: center;
}
#view-support .cs-ask .send img { width: 32px; height: 32px; }
#view-support .cs-ticket {
    flex: none;
    align-self: stretch;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
#view-support .cs-ticket input,
#view-support .cs-ticket textarea {
    width: 100%;
    border: 1px solid #E6E8EC;
    border-radius: 12px;
    background: #fff;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 22px;
    resize: none;
}
#view-support .cs-ticket-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}
#view-support.is-expert .cs-ticket-bar { justify-content: stretch; }
#view-support.is-expert #cs-mail {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 14px;
}
#view-support .cs-ticket button {
    flex: none;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background: #2F7BFF;
    color: #fff;
    font-size: 14px;
}
.cs-pop-x { display: none; }
body.cs-pop-open { overflow: hidden; }
#view-support.is-pop {
    position: fixed;
    inset: 0;
    z-index: 360;
    display: flex !important;
    height: var(--vvh, 100dvh);
    padding: 24px 16px;
    overflow: auto;
    background: rgba(40, 48, 60, .45);
}
#view-support.is-pop::before { display: none; }
#view-support.is-pop .support-page {
    position: relative;
    margin: auto;
    flex: none;
    width: min(920px, 100%);
    height: min(760px, calc(var(--vvh, 100dvh) - 48px));
    padding: 20px 20px 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(16, 24, 40, .18);
    overflow: hidden;
}
#view-support.is-pop .page-title {
    display: block;
    margin: 0 40px 16px 0;
    font-size: 20px;
    line-height: 28px;
}
#view-support.is-pop .cs-pop-x {
    display: grid;
    place-items: center;
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
}
#view-support.is-pop .cs-pop-x img { width: 24px; height: 24px; }
@media (max-width: 960px) {
    #row-cs, .user-more .cs-more-badge { display: none !important; }
    #view-support { background: #F4F8FC; }
    #view-support::before { display: none; }
    #view-support .support-page { padding: 12px 12px 12px; }
    #view-support .page-title { display: none; }
    #view-support .support-board { flex-direction: column; gap: 12px; }
    #view-support .cs-ad-slot {
        flex: none;
        width: 100%;
        max-height: none;
        order: -1;
        overflow: visible;
    }
    #view-support .cs-sheet,
    #view-support .cs-ask,
    #view-support .cs-ticket,
    #view-support .cs-offline { width: 100%; }
    #view-support .cs-sheet { padding: 16px 14px 12px; max-height: none; }
    #view-support .cs-ad-slot .cs-ad:not([style]) {
        min-height: 132px;
        padding: 14px 16px 14px;
    }
    #view-support .cs-ad-slot .cs-ad:not([style])::after {
        top: 4px;
        right: 0;
        width: 46%;
        height: 124px;
    }
    #view-support .cs-ad-slot .cs-ad-hello,
    #view-support .cs-ad-slot .cs-ad:not([style]) h3 { max-width: 58%; }
    #view-support .cs-ad-slot .cs-ad:not([style]) h3 { font-size: 20px; line-height: 28px; }
    #view-support .cs-ad-slot .cs-ad-author,
    #view-support .cs-ad-slot .cs-ad-lead,
    #view-support .cs-ad-slot .cs-ad-text,
    #view-support .cs-ad-slot .cs-ad-tags,
    #view-support .cs-ad-slot .cs-ad-foot { display: none; }
    #view-support .cs-ad-slot .cs-ad-btn {
        width: auto;
        display: inline-flex;
        height: 32px;
        margin-top: 12px;
        padding: 0 16px;
        font-size: 14px;
        line-height: 32px;
    }
    #view-support .cs-slot-body { display: none; }
    #view-support .cs-slot-hero { min-height: 0; }
    #view-support .cs-slot-hero-copy {
        max-width: none;
        width: auto;
        padding: 14px 36% 14px 14px;
    }
    #view-support .cs-slot-card h3 { font-size: 20px; line-height: 28px; }
    #view-support .cs-ad-slot .cs-slot-hero-btn {
        display: inline-flex;
        width: auto;
        height: 32px;
        margin-top: 12px;
        padding: 0 16px;
        font-size: 14px;
        line-height: 32px;
    }
    #view-support.is-pop {
        padding: 0;
        background: #F4F8FC;
    }
    #view-support.is-pop .support-page {
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        background: #F4F8FC;
        padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        overflow-y: auto;
    }
    #view-support.is-pop .support-board,
    #view-support.is-pop .support-main { flex: none; }
    #view-support.is-pop .cs-sheet {
        flex: none;
        overflow: visible;
    }
    #view-support.is-pop .cs-log {
        flex: none;
        max-height: 36vh;
    }
    #view-support.is-pop .cs-log:empty { display: none; }
    #view-support.is-pop .cs-ticket-bar { flex-wrap: wrap; }
    #view-support.is-expert.is-pop #cs-mail { flex: 1 1 140px; }
    #view-support.is-pop .page-title { display: block; font-size: 18px; line-height: 26px; }
    #view-support.is-pop .cs-pop-x { top: 8px; right: 8px; }
    .ad-modal {
        width: min(420px, calc(100vw - 32px));
        max-height: calc(var(--vvh, 100svh) - 24px - env(safe-area-inset-bottom, 0px));
        padding: 0;
        overflow: auto;
    }
    .ad-modal .modal-close {
        top: 10px;
        right: 10px;
        z-index: 3;
        width: 28px;
        height: 28px;
        padding: 0;
        display: grid;
        place-items: center;
        line-height: 1;
        font-size: 18px;
    }
    .ad-modal .cs-ad:not([style]) { padding: 14px 14px 12px; }
    .ad-modal .cs-ad:not([style])::after {
        top: 8px;
        right: 8px;
        width: 42%;
        height: 124px;
    }
    .ad-modal .cs-ad:not([style]) .cs-ad-hello,
    .ad-modal .cs-ad:not([style]) .cs-ad-author { max-width: 58%; }
    .ad-modal .cs-ad:not([style]) h3 {
        max-width: 62%;
        font-size: 20px;
        line-height: 28px;
    }
    .ad-modal .cs-ad:not([style]) .cs-ad-lead { font-size: 14px; line-height: 20px; }
    .ad-modal .cs-ad:not([style]) .cs-ad-tags { gap: 8px 10px; }
    .ad-modal .cs-ad:not([style]) .cs-ad-btn { height: 42px; font-size: 15px; line-height: 42px; }
    .ad-modal .cs-ad:not([style]) .cs-ad-foot { flex-wrap: wrap; row-gap: 4px; }
}
@media (min-width: 1280px) {
    .vip-hero::before {
        height: 720px;
        background-position: right 0 top -28px;
        background-size: auto 500px;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 12%, #000 26%, #000 100%), linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, .4) 62%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .28) 12%, #000 26%, #000 100%), linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, .4) 62%, transparent 100%);
        mask-composite: intersect;
    }
    .vip-title,
    .vip-lead { max-width: 54%; }
    .vip-sub { max-width: 48%; }
}

.legal-view { background: #f4f7fb; }
.legal-sheet {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}
.legal-sheet h1 {
    margin: 0 0 20px;
    color: #1C2430;
    font-size: 28px;
    font-weight: 600;
    line-height: 36px;
}
.legal-copy {
    margin: 0;
    color: #3c4656;
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-wrap;
}
.legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #EEEEF0;
    font-size: 14px;
    line-height: 22px;
}
.legal-nav a { text-decoration: none; }
.legal-nav span[aria-current="page"] { color: #1C2430; }