/* 页面布局：活动壳层 / 直播页 / 结果页 / 答题页 / 榜单页 / 后台 */

/* ---- 活动壳层 ---- */
.activity-shell-header {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: clamp(1.1rem, 3vw, 1.8rem);
    border: 1px solid rgb(255 255 255 / 0.4);
    border-radius: var(--radius-card);
    color: var(--ink);
    background: #f6ebf7 url("../img/cards/banner-sky.png") center top / cover no-repeat;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 10px 30px rgb(251 114 153 / 0.25);
}

.activity-shell-header h1 {
    color: var(--ink);
}

.activity-shell-header p {
    margin: 0;
    color: var(--muted);
}

#activity-window {
    justify-self: start;
    padding: 0.25rem 0.85rem;
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    font-size: 0.88rem;
}

/* ---- 卡片容器（所有前台面板与后台壳）：玻璃质感 ---- */
#binding-panel,
#activity-panel > section,
.activity-side > section,
#activity-quiz-entry,
#draw-result-page,
#draw-result-page > section,
#quiz-page,
#leaderboard-page,
.admin-shell {
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

#binding-panel,
#draw-result-page,
#quiz-page,
#leaderboard-page,
.admin-shell {
    padding: clamp(1rem, 3vw, 2rem);
}

#activity-quiz-entry {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2vw, 1.5rem);
}

#activity-panel > section,
.activity-side > section {
    min-width: 0;
    padding: clamp(1rem, 2vw, 1.5rem);
}

/* 卡片标题渐变竖条 */
#activity-panel section h2,
#draw-result-page section h2 {
    position: relative;
    padding-left: 0.8rem;
}

#activity-panel section h2::before,
#draw-result-page section h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 4px;
    border-radius: 2px;
    background: var(--dream-gradient);
}

/* ---- 绑定面板 ---- */
#binding-panel {
    max-width: 34rem;
    margin: 3rem auto 0;
}

#qq-number {
    min-height: 48px;
    font-size: 1.2rem;
    letter-spacing: 0.06em;
}

/* ---- 直播页 ---- */
#activity-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.activity-side {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

#presentation-state {
    grid-column: 1 / -1;
}

/* 梦幻天空卡片：容器本身是一张插画（樱花粉 → 丁香紫 → 天空蓝） */
#activity-panel > #presentation-state {
    position: relative;
    overflow: hidden;
    border-color: rgb(255 255 255 / 0.4);
    background: #f6ebf7 url("../img/cards/banner-sky.png") center bottom / cover no-repeat;
    box-shadow: 0 10px 30px rgb(251 114 153 / 0.25);
    color: var(--ink);
}

#activity-panel > #presentation-state h2 {
    color: var(--ink);
}

#activity-panel > #presentation-state h2::before {
    background: var(--brand-pink);
}

.live-header {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.live-subtitle {
    margin: 0;
    color: var(--muted);
    font-size: 0.95rem;
}

/* ---- 天空装饰原语：云 / 星 / 纸飞机 / 礼物 / 孔明灯 / 图标，纯视觉，全站共享 ---- */
.sky-deco {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* 装饰容器内的内容统一浮于装饰层之上 */
.sky-deco ~ * {
    position: relative;
    z-index: 1;
}

.sd-cloud {
    position: absolute;
    background: rgb(255 255 255 / 0.32);
    border-radius: var(--radius-pill);
    filter: blur(1px);
}

.sd-cloud::before,
.sd-cloud::after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

/* 浅色玻璃卡片上的淡粉云（白云在浅底上不可见） */
.sd-cloud-soft {
    background: rgb(251 114 153 / 0.14);
}

.sd-cloud-a {
    top: -14px;
    left: -30px;
    width: 120px;
    height: 34px;
}

.sd-cloud-a::before {
    width: 44px;
    height: 44px;
    top: -18px;
    left: 22px;
}

.sd-cloud-a::after {
    width: 30px;
    height: 30px;
    top: -12px;
    left: 58px;
}

.sd-cloud-b {
    top: 34%;
    right: -36px;
    width: 110px;
    height: 30px;
    background: rgb(255 255 255 / 0.26);
}

.sd-cloud-soft.sd-cloud-b {
    background: rgb(251 114 153 / 0.12);
}

.sd-cloud-b::before {
    width: 38px;
    height: 38px;
    top: -16px;
    left: 20px;
}

.sd-cloud-b::after {
    width: 26px;
    height: 26px;
    top: -10px;
    left: 52px;
}

.sd-cloud-c {
    bottom: -12px;
    left: 22%;
    width: 130px;
    height: 32px;
    background: rgb(255 255 255 / 0.3);
}

.sd-cloud-c::before {
    width: 42px;
    height: 42px;
    top: -17px;
    left: 26px;
}

.sd-cloud-c::after {
    width: 28px;
    height: 28px;
    top: -11px;
    left: 64px;
}

.sd-star {
    position: absolute;
    font-style: normal;
    color: #ffffff;
    text-shadow: 0 0 8px rgb(255 255 255 / 0.9);
    animation: sky-twinkle 2.6s ease-in-out infinite;
}

/* 浅色卡片用品牌色星星 */
.sd-star-pink {
    color: var(--brand-pink);
    text-shadow: 0 0 8px rgb(251 114 153 / 0.5);
}

.sd-star-blue {
    color: var(--brand-blue);
    text-shadow: 0 0 8px rgb(35 173 229 / 0.5);
}

.sd-star-1 {
    top: 12%;
    left: 38%;
    font-size: 0.8rem;
}

.sd-star-2 {
    top: 22%;
    right: 22%;
    font-size: 1rem;
    color: #ffe28a;
    text-shadow: 0 0 8px rgb(255 226 138 / 0.9);
    animation-delay: 0.6s;
}

.sd-star-pink.sd-star-2 {
    color: var(--brand-pink);
    text-shadow: 0 0 8px rgb(251 114 153 / 0.5);
}

.sd-star-blue.sd-star-2 {
    color: var(--brand-blue);
    text-shadow: 0 0 8px rgb(35 173 229 / 0.5);
}

.sd-star-3 {
    top: 55%;
    left: 12%;
    font-size: 0.7rem;
    animation-delay: 1.1s;
}

.sd-star-4 {
    bottom: 24%;
    right: 10%;
    font-size: 0.85rem;
    color: #ffe28a;
    text-shadow: 0 0 8px rgb(255 226 138 / 0.9);
    animation-delay: 1.6s;
}

.sd-star-pink.sd-star-4 {
    color: var(--brand-pink);
    text-shadow: 0 0 8px rgb(251 114 153 / 0.5);
}

.sd-star-blue.sd-star-4 {
    color: var(--brand-blue);
    text-shadow: 0 0 8px rgb(35 173 229 / 0.5);
}

.sd-star-5 {
    top: 8%;
    left: 60%;
    font-size: 0.65rem;
    animation-delay: 2s;
}

.sd-gift {
    position: absolute;
    top: 10px;
    right: 16px;
    font-size: 1.4rem;
    transform: rotate(8deg);
    animation: sky-float 5s ease-in-out infinite;
}

/* 主题小图标（⚡/✨/✏️/🏆/🎉 等） */
.sd-icon {
    position: absolute;
    font-size: 1.15rem;
    opacity: 0.85;
    transform: rotate(8deg);
    animation: sky-float 5.5s ease-in-out infinite;
}

.sd-icon-a {
    top: 10px;
    right: 16px;
}

.sd-icon-b {
    bottom: 12px;
    left: 14px;
}

.sd-plane {
    position: absolute;
    top: 40%;
    left: 5%;
    width: 40px;
    filter: drop-shadow(0 4px 6px rgb(31 36 48 / 0.18));
    animation: sky-float 6.5s ease-in-out infinite;
}

.sd-plane-sm {
    top: auto;
    bottom: 10px;
    left: 14px;
    width: 26px;
}

/* 壳层头部右侧飞行纸飞机（镜像朝左飞入画面）：与现场状态卡形成区分 */
.sd-plane-r {
    top: 20%;
    left: auto;
    right: 7%;
    width: 44px;
}

.sd-plane-r svg {
    transform: scaleX(-1);
}

.sd-plane svg {
    display: block;
    width: 100%;
    height: auto;
}

.sd-lantern {
    position: absolute;
    width: 10px;
    height: 14px;
    border-radius: 45% 45% 50% 50%;
    background: #ffd9a0;
    box-shadow: 0 0 12px 4px rgb(255 205 130 / 0.55);
    animation: sky-float 7s ease-in-out infinite;
}

.sd-lantern-1 {
    top: 30%;
    left: 26%;
    animation-delay: 1.2s;
}

.sd-lantern-2 {
    top: 16%;
    right: 34%;
    scale: 0.8;
    animation-delay: 2.4s;
}

@keyframes sky-twinkle {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.15);
    }
}

/* 漂浮用 translate 属性，避免覆盖 transform 的旋转/缩放 */
@keyframes sky-float {
    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -6px;
    }
}

/* ---- B 档轻装饰容器：插画背景层（浅底插画保证深色文字可读） ---- */
#binding-panel,
.activity-shell-header,
#player-section,
#watch-state,
#screenshot-area,
#draw-area,
#activity-quiz-entry,
#quiz-page,
#leaderboard-page,
#result-prize {
    position: relative;
    overflow: hidden;
}

#binding-panel::before,
#player-section::before,
#watch-state::before,
#screenshot-area::before,
#draw-area::before,
#activity-quiz-entry::before,
#quiz-page::before,
#leaderboard-page::before,
#result-prize::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* 横向中幅浅底插画：宽型浅色卡片 */
#binding-panel::before,
#player-section::before,
#watch-state::before,
#activity-quiz-entry::before,
#result-prize::before {
    background-image: url("../img/cards/mid-light.png");
}

/* 纵向高卡浅底插画：右侧窄栏卡片 */
#screenshot-area::before,
#draw-area::before {
    background-image: url("../img/cards/tall-light.png");
}

/* 无缝平铺纹理：长内容页面 */
#quiz-page::before,
#leaderboard-page::before {
    background-image: url("../img/cards/tile-sky.png");
    background-size: 1024px 1024px;
    background-repeat: repeat;
}

/* ---- 白色玻璃胶囊组：悬浮在渐变天空中 ---- */
.live-capsules {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.live-capsule {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.live-capsule em {
    font-style: normal;
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.live-capsule strong {
    font-weight: 800;
}

/* 当前环节主胶囊：实面白底 + 粉字，视觉焦点 */
.live-capsule-hero {
    padding: 0.7rem 1.5rem;
    border-color: #ffffff;
    background: #ffffff;
    box-shadow: 0 6px 16px rgb(31 36 48 / 0.18);
    color: var(--brand-pink-deep);
    font-size: 1.1rem;
}

.live-capsule-hero em {
    color: rgb(209 68 124 / 0.7);
}

/* 状态胶囊：呼吸圆点 */
.live-state-tag::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-pink);
    animation: live-dot-pulse 1.6s ease-out infinite;
}

.live-state-tag[data-state="running"] {
    border-color: rgb(251 114 153 / 0.45);
    background: rgb(255 255 255 / 0.55);
    color: var(--brand-pink-deep);
}

.live-state-tag:not([data-state="running"]) {
    border-color: var(--glass-border);
    background: var(--glass-bg);
    color: var(--muted);
}

.live-state-tag:not([data-state="running"])::before {
    background: rgb(90 99 115 / 0.55);
    animation: none;
}

@keyframes live-dot-pulse {
    0% {
        box-shadow: 0 0 0 0 rgb(251 114 153 / 0.45);
    }

    100% {
        box-shadow: 0 0 0 8px rgb(251 114 153 / 0);
    }
}

/* 倒计时胶囊：数字略大 */
.live-countdown-capsule strong {
    font-size: 1.05rem;
}

/* 名额数值配色：剩余白 / 抢完浅玫瑰 / 未开放白 60% */
#presentation-stage-quota {
    color: var(--ink);
    font-size: 1.05rem;
}

#presentation-stage-quota.is-empty {
    color: var(--danger-deep);
}

#presentation-stage-quota.is-muted {
    color: var(--muted);
}

#presentation-total-quota {
    font-size: 1.1rem;
}

.live-unit {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.live-server-time {
    position: relative;
    z-index: 1;
    margin: 0.9rem 0 0;
    color: var(--muted);
    font-size: 0.8rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.player-frame {
    display: grid;
    width: 100%;
    aspect-ratio: 16 / 9;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    color: var(--muted);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    box-shadow: var(--glass-shadow);
}

/* 播放器 iframe 默认仅 300x150，必须显式撑满 16:9 预留区 */
.player-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

#watch-state,
#screenshot-area,
#draw-area {
    display: grid;
    gap: 0.7rem;
}

#watch-state p,
#screenshot-area p,
#draw-area p {
    margin-bottom: 0;
}

#watch-status-message,
#share-review-message,
#draw-status-message,
#quiz-status-message,
#quiz-countdown,
#leaderboard-status-message {
    min-height: 1.7rem;
    color: var(--muted);
}

/* 观看进度条：满刻度 600 秒，50% 处为 300 秒里程碑 */
.watch-progress-track {
    position: relative;
    height: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
}

.watch-progress-track::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgb(31 36 48 / 0.15);
}

.watch-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-pill);
    background: var(--dream-gradient);
    transition: width 400ms ease;
}

/* 分享截图上传区：虚线框玻璃风格 */
#share-upload-form {
    padding: 1rem;
    border: 2px dashed var(--glass-border-strong);
    border-radius: var(--radius-control);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
}

/* ---- 抽奖转盘 ---- */
#draw-area {
    justify-items: center;
    text-align: center;
}

#draw-wheel {
    position: relative;
    width: min(100%, 18rem);
    aspect-ratio: 1 / 1;
    margin: 0.5rem auto;
    border-radius: 50%;
    background: var(--pink-soft);
    box-shadow:
        inset 0 0 0 6px #ffffff,
        inset 0 0 0 8px var(--pink-soft),
        0 8px 24px rgb(251 114 153 / 0.25);
    transform-origin: center;
    animation: sky-halo 3.2s ease-in-out infinite;
}

/* 转盘外圈柔光呼吸 */
@keyframes sky-halo {
    0%,
    100% {
        box-shadow:
            inset 0 0 0 6px #ffffff,
            inset 0 0 0 8px var(--pink-soft),
            0 8px 24px rgb(251 114 153 / 0.25);
    }

    50% {
        box-shadow:
            inset 0 0 0 6px #ffffff,
            inset 0 0 0 8px var(--pink-soft),
            0 8px 34px rgb(251 114 153 / 0.45),
            0 0 0 10px rgb(251 138 180 / 0.12);
    }
}

/* 顶部固定指针 */
#draw-wheel::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    z-index: 3;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid var(--brand-pink);
    filter: drop-shadow(0 2px 3px rgb(31 36 48 / 0.25));
}

/* wheel.js 注入的旋转盘 */
.wheel-rotor {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    transform-origin: center;
}

.wheel-hub {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    pointer-events: none;
}

/* 扇区奖品文字：随 rotor 旋转到各自扇区中心角 */
.wheel-label {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    pointer-events: none;
}

.wheel-label-text {
    margin-top: 9%;
    max-width: 46%;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: break-word;
}

.wheel-hub::after {
    content: "GO";
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 8px rgb(31 36 48 / 0.18);
    color: var(--brand-pink);
    font-weight: 800;
}

/* Jinja 扇区文字降级为奖品图例 chip：放在转盘圆外的图例行，避免压住顶部指针 */
#draw-sector-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    max-width: min(100%, 18rem);
}

.draw-sector {
    display: inline-flex;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: rgb(255 240 245 / 0.6);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    color: var(--brand-pink-deep);
    font-size: 0.85rem;
    font-weight: 700;
}

#draw-button {
    min-width: min(100%, 16rem);
}

#draw-result-link {
    justify-self: center;
}

#draw-area[data-ui-state="draw-complete"] #draw-result-link {
    font-weight: 800;
}

/* ---- 结果页 ---- */
#draw-result-page {
    display: grid;
    gap: 1rem;
}

#result-prize {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 2px solid transparent;
    border-radius: var(--radius-card);
    background:
        linear-gradient(var(--glass-bg-strong), var(--glass-bg-strong)) padding-box,
        var(--dream-gradient) border-box;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    text-align: center;
}

#result-prize h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

#winning-code strong {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border: 2px dashed var(--brand-pink);
    border-radius: var(--radius-control);
    color: var(--brand-pink-deep);
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    font-variant-numeric: tabular-nums;
}

#claim-deadline strong {
    color: var(--danger);
}

#group-qr-section {
    text-align: center;
}

#group-qr {
    display: block;
    width: min(100%, 18rem);
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
}

/* ---- 答题页 ---- */
#quiz-page > header,
.admin-shell > header {
    margin-bottom: 1.25rem;
}

#quiz-countdown {
    display: inline-flex;
    padding: 0.25rem 0.85rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    background: rgb(255 240 245 / 0.6);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    color: var(--brand-pink-deep);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#quiz-questions {
    display: grid;
    gap: 1rem;
    margin: 1rem 0 1.25rem;
    padding-left: 0;
    list-style: none;
}

.quiz-question {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
}

.quiz-question fieldset {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.quiz-question legend {
    padding: 0;
    color: var(--ink);
    font-weight: 800;
}

.quiz-question label {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-control);
    background: rgb(255 255 255 / 0.6);
    color: var(--ink);
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.quiz-question label:hover {
    background: var(--blue-soft);
}

.quiz-question label:has(input:checked) {
    border-color: var(--brand-blue);
    background: var(--blue-soft);
    box-shadow: 0 0 0 3px rgb(35 173 229 / 0.15);
}

.answer-correct {
    color: #0f7a4e;
    font-weight: 700;
}

.answer-wrong {
    color: var(--danger);
    font-weight: 700;
}

/* ---- 榜单页 ---- */
#leaderboard-page > p:first-child {
    color: var(--muted);
}

#leaderboard-page tbody td:first-child {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

#leaderboard-page tbody tr:first-child {
    background: rgb(245 179 1 / 0.12);
}

#leaderboard-page tbody tr:nth-child(2) {
    background: rgb(160 174 192 / 0.14);
}

#leaderboard-page tbody tr:nth-child(3) {
    background: rgb(205 127 50 / 0.12);
}

/* ---- 后台（轻度换色，结构不变） ---- */
.admin-shell {
    overflow: hidden;
}

.admin-shell > form,
.admin-shell > section,
.admin-shell > nav,
.admin-shell > table,
.admin-shell > p {
    margin-bottom: 1.25rem;
}

.admin-shell > table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.admin-shell table form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.admin-shell table input,
.admin-shell table select,
.admin-shell table textarea {
    width: auto;
    min-width: 7rem;
}

.admin-shell table tbody tr:hover {
    background: var(--blue-soft);
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.8rem;
    margin: 1.5rem 0;
}

.admin-stat-grid > div {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
}

.admin-stat-grid dt {
    color: var(--muted);
    font-size: 0.9rem;
}

.admin-stat-grid dd {
    margin: 0.25rem 0 0;
    color: var(--brand-blue);
    font-size: 1.8rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* 后台状态消息条：按 data-kind 区分成功 / 失败 / 提示，空状态不占位 */
.admin-message {
    border-radius: var(--radius-control);
    font-weight: 600;
}

.admin-message:empty {
    display: none;
}

.admin-message[data-kind="success"],
.admin-message[data-kind="error"],
.admin-message[data-kind="info"] {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
}

.admin-message[data-kind="success"] {
    color: var(--success-deep);
    background: rgb(35 196 131 / 0.09);
    border-color: rgb(35 196 131 / 0.4);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
}

.admin-message[data-kind="error"] {
    color: var(--danger-deep);
    background: rgb(240 67 90 / 0.07);
    border-color: rgb(240 67 90 / 0.4);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
}

.admin-message[data-kind="info"] {
    color: var(--info-deep);
    background: rgb(35 173 229 / 0.1);
    border-color: rgb(35 173 229 / 0.4);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
}

/* 活动设置页运行设置表单：分组标题 + 响应式栅格，避免字段单列长排 */
.settings-group-title {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: var(--muted);
}

.settings-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem 1rem;
}

.admin-shell nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.admin-shell nav a {
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--radius-pill);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur-light);
    -webkit-backdrop-filter: var(--glass-blur-light);
    color: var(--info-deep);
    text-decoration: none;
}

#admin-login {
    max-width: 28rem;
    margin: 3rem auto 0;
}

/* ---- 后台卡片式页面 ---- */
.admin-page.admin-shell {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    gap: 1.25rem;
}

.admin-page-header {
    margin-bottom: 0;
}

.admin-page-header h1 {
    margin-bottom: 0.25rem;
}

.admin-meta {
    margin: 0 0 0.75rem;
    color: var(--muted);
}

.admin-nav a[aria-current="page"] {
    background: var(--brand-blue);
    color: #ffffff;
}

.admin-card {
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

.admin-card h2 {
    position: relative;
    margin-bottom: 1rem;
    padding-left: 0.8rem;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.admin-card h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    bottom: 0.15em;
    width: 4px;
    border-radius: 2px;
    background: var(--brand-gradient);
}

.admin-card > table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 0;
}

.admin-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
}

.admin-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.admin-item-list {
    display: grid;
    gap: 0.75rem;
}

.presentation-prize-form,
.presentation-stage-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: end;
    padding: 0.75rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    background: var(--glass-bg);
}

.presentation-prize-form label,
.presentation-stage-form label {
    margin: 0;
    font-size: 0.9rem;
}

.presentation-prize-form input,
.presentation-stage-form input,
.presentation-prize-form select,
.presentation-stage-form select {
    min-height: 40px;
}

.presentation-stage-readonly {
    padding: 0.75rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-control);
    background: var(--glass-bg);
    margin-bottom: 0.75rem;
}

.presentation-stage-readonly dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.presentation-stage-readonly dt {
    color: var(--muted);
    font-size: 0.85rem;
}

.presentation-stage-readonly dd {
    margin: 0;
    font-weight: 700;
}

#new-prize-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.admin-details-card summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.admin-details-card summary::-webkit-details-marker {
    display: none;
}

.admin-details-card summary::after {
    content: "▸";
    color: var(--brand-blue);
    font-size: 1.2rem;
    transition: transform 120ms ease;
}

.admin-details-card[open] summary::after {
    transform: rotate(90deg);
}

.admin-details-card > *:not(summary) {
    margin-top: 1rem;
}

.item-meta {
    color: var(--muted);
    font-size: 0.9rem;
}

/* ---- 状态与通用 ---- */
[data-ui-state="offline"] {
    border-color: rgb(240 67 90 / 0.45);
}

/* ---- 响应式三档 ---- */
@media (max-width: 699px) {
    main,
    body > #messages {
        width: min(calc(100% - 1rem), 1180px);
    }

    main {
        padding-top: 1rem;
    }

    #activity-panel > section,
    .activity-side > section,
    #binding-panel,
    #draw-result-page,
    #quiz-page,
    #leaderboard-page,
    .admin-shell {
        border-radius: 14px;
        padding: 1rem;
    }

    .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    th,
    td {
        padding: 0.6rem;
    }

    #quiz-submit-button {
        position: sticky;
        bottom: 0.75rem;
        justify-self: stretch;
        width: 100%;
    }
}

@media (min-width: 700px) and (max-width: 1100px) {
    main,
    body > #messages {
        width: min(calc(100% - 2rem), 1040px);
    }

    #activity-panel {
        grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
    }

    #player-section {
        grid-column: 1;
        grid-row: 3 / span 2;
    }

    .activity-side {
        display: grid;
        gap: 1rem;
        grid-column: 2;
        grid-row: 3 / span 2;
        align-self: start;
    }

    .activity-side #draw-area {
        order: -1;
    }

    #watch-state {
        grid-column: 1 / -1;
    }

    .admin-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1101px) {
    #activity-panel {
        grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
    }

    #player-section {
        grid-column: 1;
        grid-row: 3 / span 2;
    }

    #watch-state {
        grid-column: 1;
        grid-row: 5;
    }

    .activity-side {
        display: grid;
        gap: 1rem;
        grid-column: 2;
        grid-row: 3 / span 3;
        align-self: start;
        position: sticky;
        top: 1rem;
    }

    .activity-side #draw-area {
        order: -1;
    }

    #quiz-questions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .watch-progress-fill,
    .wheel-rotor {
        transition: none !important;
    }

    .live-state-tag::before,
    .sd-star,
    .sd-gift,
    .sd-plane,
    .sd-lantern,
    .sd-icon,
    #draw-wheel {
        animation: none;
    }
}