@import url('../vendor/css/inter-fonts.css');

/* =========================================================
   全局 box-sizing 重置
   ---------------------------------------------------------
   背景：项目使用的是 tailwind-utilities.css（精简版），
   不含 Tailwind Preflight 的全局重置，浏览器默认 content-box，
   导致 w-full + padding + border 的输入框实际宽度 = 100% + 26px，
   超出父容器右侧（如修改密码 Modal）。
   此处与 admin.css:60 保持一致，统一为 border-box。
   ========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =========================================================
   搭子电竞 · Design System (v2 — premium dark / neon gaming)
   设计令牌 → 基础 → 氛围背景 → 玻璃卡片 → 按钮 → 导航
   → 下单组件 → 交互/动效 → 无障碍
   ========================================================= */

/* ---------- 1) Design Tokens ---------- */
:root {
    /* Brand */
    --brand:        #6C5CE7;
    --brand-2:      #a29bfe;
    --brand-soft:   rgba(108, 92, 231, .45);
    --accent:       #00B894;
    --accent-2:     #55efc4;
    --rose:         #f43f5e;
    --amber:        #f59e0b;

    /* Surface */
    --bg-base:      #0B1120;
    --bg-app:       #0F172A;
    --bg-elev:      rgba(30, 41, 59, .7);

    /* Text */
    --text:         #F8FAFC;
    --text-dim:     #94A3B8;
    --text-mute:    #64748B;

    /* Line / ring */
    --line:         rgba(148, 163, 184, .12);
    --ring:         rgba(108, 92, 231, .55);

    /* Radius / shadow */
    --r-sm: .65rem;
    --r-md: 1rem;
    --r-lg: 1.25rem;
    --shadow-card:  0 10px 28px -14px rgba(0, 0, 0, .75), 0 2px 6px -3px rgba(0, 0, 0, .5);
    --shadow-brand: 0 12px 30px -10px rgba(108, 92, 231, .55);
}

/* ---------- 2) Base ---------- */
* { -webkit-tap-highlight-color: transparent; }

/* 全局 button 基础重置：保证所有 <button> 默认体面 */
button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    margin: 0;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
button:disabled { cursor: not-allowed; }

/* ---------- 统一滚动条（全局） ---------- */
/* 所有可见滚动条统一为：纤细 4px / 透明轨道 / indigo 半透明滑块 */
/* 需要隐藏滚动条的元素用 .hide-scrollbar 或单独设置 display:none 覆盖 */
*::-webkit-scrollbar { width: 4px; height: 4px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(108, 92, 231, .3); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(108, 92, 231, .5); }
* { scrollbar-width: thin; scrollbar-color: rgba(108, 92, 231, .3) transparent; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: var(--bg-base);
    color: var(--text);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Cinematic ambient backdrop — fixed inside the app frame, doesn't scroll */
.app-container {
    width: 100%;
    max-width: 430px;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-app);
    background-image:
        radial-gradient(75% 30% at 50% -4%, rgba(108, 92, 231, .22), transparent 62%),
        radial-gradient(45% 26% at 100% 6%, rgba(0, 184, 148, .13), transparent 60%),
        radial-gradient(60% 38% at 0% 102%, rgba(168, 85, 247, .12), transparent 62%);
    overflow: hidden;
    isolation: isolate;
}
/* subtle top hairline sheen on the whole frame */
.app-container::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
    z-index: 1;
    pointer-events: none;
}

.content-area {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}
.content-area::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- 3) Glass cards ---------- */
.glass-card {
    position: relative;
    background: linear-gradient(160deg, rgba(30, 41, 59, .78), rgba(30, 41, 59, .52));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: transform .22s cubic-bezier(.22, .61, .36, 1),
                border-color .22s ease, box-shadow .22s ease, background-color .15s ease;
}
.glass-card-solid {
    background: linear-gradient(160deg, rgb(30, 41, 59), rgb(35, 45, 63));
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.glass-card:hover {
    transform: translateY(-2px);
    border-color: rgba(108, 92, 231, .38);
    box-shadow: 0 18px 38px -16px rgba(0, 0, 0, .8),
                0 0 0 1px rgba(108, 92, 231, .14),
                inset 0 1px 0 rgba(255, 255, 255, .07);
}

/* ---------- 4) Buttons (signature · refined) ----------
   统一按钮系统：主按钮 / 次按钮 / 幽灵 / 危险 / 成功
   只负责"色彩、光影、扫光、状态"，尺寸由 Tailwind 工具类控制。
   ----------------------------------------------------- */
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-success {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .18s cubic-bezier(.2, .8, .2, 1),
                filter .2s ease,
                box-shadow .25s ease,
                background-color .2s ease,
                border-color .2s ease,
                color .2s ease;
}

/* 顶部内高光：营造立体感 */
.btn-primary::before,
.btn-secondary::before,
.btn-danger::before,
.btn-success::before,
.btn-warning::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 55%;
    background: linear-gradient(180deg, rgba(255, 255, 255, .26), transparent);
    pointer-events: none;
    z-index: 0;
}
.btn-primary > *,
.btn-secondary > *,
.btn-danger > *,
.btn-success > *,
.btn-warning > *,
.btn-ghost > * { position: relative; z-index: 2; }

/* Primary：标志性靛蓝渐变 */
.btn-primary {
    background: linear-gradient(135deg, #a29bfe 0%, #6C5CE7 55%, #5b4bd5 100%);
    color: #fff;
    box-shadow:
        0 10px 22px -8px rgba(108, 92, 231, .8),
        0 2px 6px -2px rgba(108, 92, 231, .35),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -1px 0 rgba(0, 0, 0, .15);
}

/* Secondary：薄荷翡翠色 */
.btn-secondary {
    background: linear-gradient(135deg, #55efc4 0%, #00B894 55%, #009b7e 100%);
    color: #fff;
    box-shadow:
        0 10px 22px -8px rgba(0, 184, 148, .75),
        0 2px 6px -2px rgba(0, 184, 148, .3),
        inset 0 1px 0 rgba(255, 255, 255, .35),
        inset 0 -1px 0 rgba(0, 0, 0, .15);
}

/* Ghost：透明磨砂 */
.btn-ghost {
    background: rgba(148, 163, 184, .12);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, .2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Danger：玫瑰红 */
.btn-danger {
    background: linear-gradient(135deg, #fb7185 0%, #f43f5e 55%, #e11d48 100%);
    color: #fff;
    box-shadow:
        0 10px 22px -8px rgba(244, 63, 94, .7),
        inset 0 1px 0 rgba(255, 255, 255, .3),
        inset 0 -1px 0 rgba(0, 0, 0, .15);
}

/* Success：翠绿 */
.btn-success {
    background: linear-gradient(135deg, #34d399 0%, #10b981 60%, #059669 100%);
    color: #fff;
    box-shadow:
        0 10px 22px -8px rgba(16, 185, 129, .65),
        inset 0 1px 0 rgba(255, 255, 255, .3),
        inset 0 -1px 0 rgba(0, 0, 0, .12);
}

/* Warning：琥珀 */
.btn-warning {
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 55%, #d97706 100%);
    color: #fff;
    box-shadow:
        0 10px 22px -8px rgba(245, 158, 11, .65),
        inset 0 1px 0 rgba(255, 255, 255, .3),
        inset 0 -1px 0 rgba(0, 0, 0, .12);
}

/* Hover */
.btn-primary:hover,
.btn-secondary:hover,
.btn-danger:hover,
.btn-success:hover,
.btn-warning:hover { filter: brightness(1.08) saturate(1.05); }
.btn-primary:hover {
    box-shadow:
        0 14px 30px -8px rgba(108, 92, 231, .9),
        0 0 0 1px rgba(162, 155, 254, .28),
        inset 0 1px 0 rgba(255, 255, 255, .4);
}
.btn-secondary:hover {
    box-shadow:
        0 14px 30px -8px rgba(0, 184, 148, .85),
        0 0 0 1px rgba(85, 239, 196, .28),
        inset 0 1px 0 rgba(255, 255, 255, .4);
}
.btn-ghost:hover {
    background: rgba(148, 163, 184, .22);
    border-color: rgba(148, 163, 184, .38);
    color: #f1f5f9;
}

/* Active：按下下沉 */
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active,
.btn-danger:active,
.btn-success:active,
.btn-warning:active {
    transform: translateY(1px) scale(.97);
    filter: brightness(.94);
}

/* Disabled / loading */
.btn-primary[disabled],
.btn-secondary[disabled],
.btn-ghost[disabled],
.btn-danger[disabled],
.btn-success[disabled],
.btn-warning[disabled],
.btn-primary.is-loading,
.btn-secondary.is-loading,
.btn-danger.is-loading,
.btn-success.is-loading,
.btn-warning.is-loading {
    opacity: .55;
    filter: saturate(.55);
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* 扫光（refined） */
.btn-primary::after,
.btn-secondary::after,
.btn-danger::after,
.btn-success::after,
.btn-warning::after {
    content: "";
    position: absolute;
    top: 0; left: -150%;
    width: 60%; height: 100%;
    background: linear-gradient(120deg,
        transparent,
        rgba(255, 255, 255, .35) 50%,
        transparent);
    transform: skewX(-18deg);
    transition: left .7s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
    z-index: 1;
}
.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-danger:hover::after,
.btn-success:hover::after,
.btn-warning:hover::after { left: 160%; }

/* ---------- 5) Text utilities ---------- */
.gradient-text {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.tab-active { color: var(--brand); }
.app-container footer a.tab-active { color: var(--brand); }

/* ---------- 6) Bottom tab bar ---------- */
.app-container > div > footer,
.app-container footer {
    background: linear-gradient(180deg, rgba(15, 23, 42, .82), rgba(15, 23, 42, .94)) !important;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: 0 -1px 0 rgba(108, 92, 231, .18), 0 -10px 24px -8px rgba(0, 0, 0, .6) !important;
}
.app-container footer a {
    position: relative;
    color: var(--text-mute);
    transition: transform .2s ease;
}
.app-container footer a:active { transform: scale(.92); }
.app-container footer a.tab-active::before {
    content: "";
    position: absolute;
    top: -2px; left: 50%;
    transform: translateX(-50%);
    width: 22px; height: 3px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 10px rgba(108, 92, 231, .8);
}
.app-container footer a.tab-active i {
    filter: drop-shadow(0 0 6px rgba(108, 92, 231, .65));
}

/* ---------- 7) Toast ---------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.toast-show { animation: fadeIn .22s ease-out; }
#toast {
    z-index: 9999;
    background: linear-gradient(160deg, rgba(30, 41, 59, .97), rgba(15, 23, 42, .97)) !important;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(108, 92, 231, .25) !important;
    transition: opacity .3s ease;
}

/* ---------- 8) Progress ---------- */
@keyframes progressPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.progress-active { animation: progressPulse 2s ease-in-out infinite; }

/* ---------- 9) Entrance reveal (staggered) ---------- */
@keyframes riseIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.content-area > * {
    animation: riseIn .5s cubic-bezier(.22, .61, .36, 1) both;
}
.content-area > *:nth-child(1) { animation-delay: .04s; }
.content-area > *:nth-child(2) { animation-delay: .09s; }
.content-area > *:nth-child(3) { animation-delay: .14s; }
.content-area > *:nth-child(4) { animation-delay: .19s; }
.content-area > *:nth-child(5) { animation-delay: .24s; }
.content-area > *:nth-child(6) { animation-delay: .29s; }
.content-area > *:nth-child(n+7) { animation-delay: .34s; }

/* =========================================================
   下单区块组件系统（护航 / 陪玩 通用）
   ========================================================= */
.section-card {
    border-radius: var(--r-md);
    border: 1px solid;
    overflow: hidden;
    position: relative;
}
/* per-card top accent line */
.section-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    opacity: .9;
}
.sec-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .85rem .55rem;
}
.sec-ic {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sec-ic i { font-size: 1.05rem; }
.sec-title {
    font-size: .75rem;
    font-weight: 700;
    color: #e2e8f0;
    flex: 1;
    min-width: 0;
    line-height: 1.2;
}
.sec-tag {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-size: .5625rem;
    font-weight: 600;
    padding: .15rem .45rem;
    border-radius: 9999px;
    flex-shrink: 0;
}
.sec-tag i { font-size: .7rem; }
.sec-body {
    padding: 0 .5rem .55rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.sec-note {
    font-size: .5625rem;
    color: var(--text-mute);
    line-height: 1.55;
    padding: .1rem .85rem .65rem;
    display: flex;
    gap: .3rem;
    align-items: flex-start;
}
.sec-note i { font-size: .8rem; margin-top: .06rem; flex-shrink: 0; }

/* 主题色：indigo */
.section-card.t-indigo { background: rgba(99,102,241,.05); border-color: rgba(99,102,241,.22); }
.section-card.t-indigo::before { background: linear-gradient(90deg, transparent, rgba(129,140,248,.8), transparent); }
.section-card.t-indigo .sec-ic { background: rgba(99,102,241,.2); color: #a5b4fc; }
.section-card.t-indigo .sec-tag { background: rgba(99,102,241,.18); color: #a5b4fc; }
/* rose */
.section-card.t-rose { background: rgba(244,63,94,.05); border-color: rgba(244,63,94,.22); }
.section-card.t-rose::before { background: linear-gradient(90deg, transparent, rgba(251,113,133,.8), transparent); }
.section-card.t-rose .sec-ic { background: rgba(244,63,94,.2); color: #fda4af; }
.section-card.t-rose .sec-tag { background: rgba(244,63,94,.18); color: #fda4af; }
/* purple */
.section-card.t-purple { background: rgba(168,85,247,.05); border-color: rgba(168,85,247,.22); }
.section-card.t-purple::before { background: linear-gradient(90deg, transparent, rgba(216,180,254,.8), transparent); }
.section-card.t-purple .sec-ic { background: rgba(168,85,247,.2); color: #d8b4fe; }
.section-card.t-purple .sec-tag { background: rgba(168,85,247,.18); color: #d8b4fe; }
/* amber */
.section-card.t-amber { background: rgba(245,158,11,.05); border-color: rgba(245,158,11,.22); }
.section-card.t-amber::before { background: linear-gradient(90deg, transparent, rgba(252,211,77,.85), transparent); }
.section-card.t-amber .sec-ic { background: rgba(245,158,11,.2); color: #fcd34d; }
.section-card.t-amber .sec-tag { background: rgba(245,158,11,.18); color: #fcd34d; }
/* emerald */
.section-card.t-emerald { background: rgba(16,185,129,.05); border-color: rgba(16,185,129,.22); }
.section-card.t-emerald::before { background: linear-gradient(90deg, transparent, rgba(110,231,183,.8), transparent); }
.section-card.t-emerald .sec-ic { background: rgba(16,185,129,.2); color: #6ee7b7; }
.section-card.t-emerald .sec-tag { background: rgba(16,185,129,.18); color: #6ee7b7; }
/* pink */
.section-card.t-pink { background: rgba(236,72,153,.05); border-color: rgba(236,72,153,.22); }
.section-card.t-pink::before { background: linear-gradient(90deg, transparent, rgba(249,168,212,.8), transparent); }
.section-card.t-pink .sec-ic { background: rgba(236,72,153,.2); color: #f9a8d4; }
.section-card.t-pink .sec-tag { background: rgba(236,72,153,.18); color: #f9a8d4; }

/* === 统一下单行 === */
.ord-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: linear-gradient(160deg, rgba(30,41,59,.6), rgba(30,41,59,.42));
    border: 1px solid rgba(51,65,85,.5);
    border-radius: .75rem;
    padding: .5rem .6rem;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .2s ease;
}
.ord-item:hover {
    border-color: rgba(108,92,231,.5);
    background-color: rgba(108,92,231,.14);
    box-shadow: 0 6px 18px -10px rgba(108,92,231,.6);
}
.ord-item:active { transform: scale(.985); }
.ord-price {
    flex-shrink: 0;
    padding: .28rem .45rem;
    border-radius: .5rem;
    background: rgba(0,184,148,.13);
    color: #34d399;
    font-weight: 800;
    font-size: .82rem;
    line-height: 1;
    white-space: nowrap;
    display: inline-flex;
    align-items: baseline;
}
.ord-unit { font-size: .58rem; font-weight: 600; opacity: .6; margin-left: .06rem; }
.ord-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.ord-title { font-size: .7rem; font-weight: 600; color: #e2e8f0; line-height: 1.3; }
.ord-sub { font-size: .5625rem; color: var(--text-mute); line-height: 1.3; }
.ord-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .35rem .7rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(108,92,231,.32), rgba(108,92,231,.18));
    color: #c4b5fd;
    border: 1px solid rgba(108,92,231,.38);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .02em;
    transition: background-color .15s ease, border-color .15s ease,
                transform .1s ease, color .15s ease, box-shadow .2s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.ord-btn i { font-size: .8rem; }
.ord-item:hover .ord-btn {
    background: linear-gradient(135deg, rgba(108,92,231,.6), rgba(108,92,231,.38));
    color: #fff;
    border-color: rgba(162,155,254,.65);
    box-shadow: 0 4px 12px -3px rgba(108,92,231,.5),
                inset 0 1px 0 rgba(255,255,255,.2);
}
.ord-btn:active { transform: scale(.92); }
/* 高亮：热门档（金色） */
.ord-item.is-hot {
    border-color: rgba(251,191,36,.5);
    background: linear-gradient(160deg, rgba(251,191,36,.09), rgba(30,41,59,.42));
}
.ord-item.is-hot .ord-price { background: rgba(251,191,36,.16); color: #fcd34d; }
/* 高亮：推荐档（紫色） */
.ord-item.is-pick {
    border-color: rgba(108,92,231,.45);
    background: linear-gradient(160deg, rgba(108,92,231,.1), rgba(30,41,59,.42));
}
.ord-item:focus-visible { outline: 2px solid rgba(108,92,231,.6); outline-offset: 1px; }

/* ---------- 陪陪排行榜名次徽标 ---------- */
#playwith-list { counter-reset: rank; }
#playwith-list > .playwith-card { counter-increment: rank; position: relative; }
#playwith-list > .playwith-card::before {
    content: counter(rank);
    position: absolute; top: 10px; right: 12px; z-index: 5;
    width: 22px; height: 22px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    background: rgba(100,116,139,.55); color: #f1f5f9;
}
#playwith-list > .playwith-card:nth-child(1)::before {
    background: linear-gradient(135deg,#fde68a,#f59e0b); color:#1e293b;
    box-shadow: 0 0 12px rgba(245,158,11,.7);
}
#playwith-list > .playwith-card:nth-child(2)::before {
    background: linear-gradient(135deg,#f1f5f9,#94a3b8); color:#1e293b;
    box-shadow: 0 0 10px rgba(203,213,225,.5);
}
#playwith-list > .playwith-card:nth-child(3)::before {
    background: linear-gradient(135deg,#fb923c,#c2410c); color:#fff;
    box-shadow: 0 0 10px rgba(234,88,12,.6);
}

/* ---------- 筛选 chip / 卡片微交互 ---------- */
.filter-tag-pw, .voice-tag {
    transition: background-color .18s ease, color .18s ease,
                opacity .18s ease, transform .12s ease, box-shadow .2s ease,
                border-color .18s ease;
}
.filter-tag-pw:active, .voice-tag:active { transform: scale(.93); }
.filter-tag-pw:hover, .voice-tag:hover { opacity: .92; }
/* 激活态：精致渐变 + 内高光 */
.filter-tag-pw.is-active,
.voice-tag.is-active {
    background: linear-gradient(135deg, #a29bfe 0%, #6C5CE7 100%) !important;
    color: #fff !important;
    border-color: transparent;
    box-shadow:
        0 4px 12px -3px rgba(108, 92, 231, .55),
        inset 0 1px 0 rgba(255, 255, 255, .3),
        inset 0 -1px 0 rgba(0, 0, 0, .12);
}

/* ---------- 9b) 场景化按钮组件（统一所有 <button> 视觉） ----------
   覆盖：图标按钮 / 行式菜单 / 小标签 / 数量加减 / 分段 Tab
   -------------------------------------------------------- */

/* === 圆形图标按钮（客服/设置/关闭/返回） === */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    background: rgba(30, 41, 59, .72);
    color: #cbd5e1;
    border: 1px solid rgba(148, 163, 184, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06),
                0 2px 6px -2px rgba(0, 0, 0, .4);
    transition: background-color .18s ease, color .18s ease,
                transform .12s ease, border-color .18s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover {
    background: rgba(51, 65, 85, .85);
    color: #f1f5f9;
    border-color: rgba(108, 92, 231, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1),
                0 4px 10px -3px rgba(108, 92, 231, .35);
}
.icon-btn:active { transform: scale(.92); }
.icon-btn.is-ghost {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.icon-btn.is-ghost:hover {
    background: rgba(148, 163, 184, .12);
    box-shadow: none;
}
.icon-btn.is-danger:hover {
    background: rgba(244, 63, 94, .18);
    color: #fda4af;
    border-color: rgba(244, 63, 94, .4);
    box-shadow: 0 4px 10px -3px rgba(244, 63, 94, .35);
}

/* === 行式菜单按钮（profile 功能项） === */
.menu-item-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .85rem 1rem;
    background: transparent;
    color: #e2e8f0;
    border: none;
    border-radius: .75rem;
    transition: background-color .18s ease, transform .1s ease;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.menu-item-btn:hover { background: rgba(30, 41, 59, .5); }
.menu-item-btn:active { transform: scale(.995); background: rgba(30, 41, 59, .7); }
.menu-item-btn.is-danger { color: #fda4af; }
.menu-item-btn.is-danger:hover { background: rgba(244, 63, 94, .12); }

/* === 小标签按钮（声音/视频/标签） === */
.tag-btn {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .625rem;
    border-radius: 9999px;
    font-size: .5625rem;
    font-weight: 600;
    background: rgba(99, 102, 241, .14);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, .22);
    transition: background-color .15s ease, color .15s ease, transform .1s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.tag-btn:hover {
    background: rgba(99, 102, 241, .26);
    color: #c7d2fe;
    border-color: rgba(129, 140, 248, .45);
}
.tag-btn:active { transform: scale(.93); }
.tag-btn.is-rose { background: rgba(244, 63, 94, .14); color: #fda4af; border-color: rgba(244, 63, 94, .22); }
.tag-btn.is-rose:hover { background: rgba(244, 63, 94, .26); color: #fecdd3; border-color: rgba(251, 113, 133, .45); }
.tag-btn.is-disabled,
.tag-btn[disabled] {
    background: rgba(51, 65, 85, .35);
    color: #64748b;
    border-color: rgba(100, 116, 139, .22);
    cursor: not-allowed;
    opacity: .75;
}

/* === 数量加减按钮 === */
.qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .65rem;
    background: linear-gradient(135deg, rgba(71, 85, 105, .9), rgba(51, 65, 85, .9));
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, .14);
    font-size: .875rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08),
                0 2px 4px -2px rgba(0, 0, 0, .5);
    transition: background-color .15s ease, transform .1s ease, color .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.qty-btn:hover {
    background: linear-gradient(135deg, rgba(108, 92, 231, .55), rgba(108, 92, 231, .35));
    color: #fff;
}
.qty-btn:active { transform: scale(.88); }

/* === 分段 Tab（护航/陪玩/订单通用） === */
.tab-seg {
    flex: 1;
    padding: .5rem .75rem;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    color: #cbd5e1;
    background: rgba(30, 41, 59, .5);
    border: 1px solid rgba(51, 65, 85, .4);
    border-radius: .75rem;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .1s ease;
    -webkit-tap-highlight-color: transparent;
}
.tab-seg:hover { color: #e2e8f0; border-color: rgba(108, 92, 231, .35); }
.tab-seg:active { transform: scale(.98); }
.tab-seg.is-active {
    background: linear-gradient(135deg, #a29bfe 0%, #6C5CE7 100%);
    color: #fff;
    border-color: transparent;
    box-shadow:
        0 6px 16px -4px rgba(108, 92, 231, .65),
        0 0 0 1px rgba(162, 155, 254, .22),
        inset 0 1px 0 rgba(255, 255, 255, .3),
        inset 0 -1px 0 rgba(0, 0, 0, .12);
}

/* === 下划线 Tab（登录页） === */
.tab-line {
    flex: 1;
    padding: .65rem 0;
    font-size: .82rem;
    font-weight: 600;
    color: #94a3b8;
    text-align: center;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    transition: color .2s ease, border-color .2s ease;
    -webkit-tap-highlight-color: transparent;
}
.tab-line.is-active {
    color: #a29bfe;
    border-bottom-color: #6C5CE7;
}

/* ---------- 10) Focus-visible (a11y) ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(108, 92, 231, .55),
        0 0 0 5px rgba(108, 92, 231, .2),
        inset 0 0 0 1px rgba(255, 255, 255, .4);
    border-radius: inherit;
    transition: box-shadow .15s ease;
}

/* ---------- 11) Selection / image polish ---------- */
::selection { background: rgba(108,92,231,.35); color: #fff; }
img { -webkit-user-drag: none; }

/* ---------- 12) Global cursor & misc ---------- */
a, button, [role="button"], summary, label[for],
input[type="submit"], input[type="button"], input[type="reset"],
.tab-btn, .ord-item, .captcha-btn, .role-btn,
.filter-tag-pw, .voice-tag { cursor: pointer; }

a, button, .ord-item { will-change: transform; }
a { text-decoration: none; }
.order-tab { transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.filter-tag-pw, .voice-tag { box-shadow: none !important; }

/* ---------- 12b) Segmented control tabs ---------- */
.seg-tab-active {
    background: linear-gradient(135deg, #a29bfe 0%, #6C5CE7 100%);
    box-shadow:
        0 6px 16px -4px rgba(108, 92, 231, .65),
        0 0 0 1px rgba(162, 155, 254, .22),
        inset 0 1px 0 rgba(255, 255, 255, .3),
        inset 0 -1px 0 rgba(0, 0, 0, .12);
    color: #fff;
}

/* ---------- 13) Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .content-area > * { animation: none !important; }
}

/* ---------- 14) Service center section gap (~10px) ---------- */
.gap-section > :not([hidden]) ~ :not([hidden]) { margin-top: 10px !important; }

/* ---------- 15) Fix space-y utilities (vendor CSS has margin direction swapped) ---------- */
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .125rem !important; margin-bottom: 0 !important; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: .25rem !important; margin-bottom: 0 !important; }
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .375rem !important; margin-bottom: 0 !important; }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem !important; margin-bottom: 0 !important; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: .75rem !important; margin-bottom: 0 !important; }
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .875rem !important; margin-bottom: 0 !important; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem !important; margin-bottom: 0 !important; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem !important; margin-bottom: 0 !important; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem !important; margin-bottom: 0 !important; }

/* ---------- 16) Modal backdrop blur (stronger) ---------- */
.modal-backdrop { backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); }

/* ---------- 17) VIP Avatar Frame System (按会员等级动态头像框) ---------- */
.vip-frame {
    position: relative;
    width: 64px;
    height: 64px;
    cursor: pointer;
    flex-shrink: 0;
}

/* 旋转渐变光环（在头像下方） */
.vip-ring {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    z-index: 0;
}

/* 头像容器（在光环上方，留出间隙显示光环） */
.vip-avatar-wrap {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    overflow: hidden;
    background: #1e293b;
    z-index: 1;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.vip-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 相机图标（右上角） */
.vip-camera {
    position: absolute;
    top: 0;
    right: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(15, 23, 42, 0.6);
    z-index: 3;
    transform: translate(3px, -3px);
}

.vip-camera i {
    font-size: 9px;
    color: #6C5CE7;
}

/* 等级徽章（右下角） */
.vip-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #1A237E;
    color: #fff;
    font-size: 7px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 9999px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(26, 35, 126, 0.5);
    border: 1px solid rgba(129, 140, 248, 0.3);
    z-index: 3;
}

/* === Tier 1: 基础（县令/太学博士） — 静态渐变环，微光 === */
.vip-frame-t1 .vip-ring {
    background: conic-gradient(from 0deg, #475569, #38bdf8, #64748b, #38bdf8, #475569);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
}

/* === Tier 2: 进阶（御史中丞/御史大夫） — 缓慢旋转，中等光晕 === */
.vip-frame-t2 .vip-ring {
    background: conic-gradient(from 0deg, #14b8a6, #10b981, #34d399, #6ee7b7, #10b981, #14b8a6);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
    animation: vip-rotate 8s linear infinite;
}

/* === Tier 3: 高阶（中书令/尚书令） — 快速旋转，强光晕 === */
.vip-frame-t3 .vip-ring {
    background: conic-gradient(from 0deg, #6C5CE7, #818cf8, #a29bfe, #c084fc, #a29bfe, #818cf8, #6C5CE7);
    box-shadow: 0 0 14px rgba(108, 92, 231, 0.45);
    animation: vip-rotate 5s linear infinite;
}

/* === Tier 4: 顶级（亲王） — 多彩旋转，脉冲光晕 === */
.vip-frame-t4 .vip-ring {
    background: conic-gradient(from 0deg,
        #fbbf24, #f59e0b, #fcd34d, #fde68a,
        #fbbf24, #f59e0b, #fcd34d, #fde68a, #fbbf24);
    box-shadow: 0 0 16px rgba(251, 191, 36, 0.5);
    animation: vip-rotate 4s linear infinite, vip-pulse-gold 2.5s ease-in-out infinite;
}

@keyframes vip-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@keyframes vip-pulse-gold {
    0%, 100% { box-shadow: 0 0 12px rgba(251, 191, 36, 0.4); }
    50%      { box-shadow: 0 0 22px rgba(251, 191, 36, 0.7); }
}