/* ==========================================================================
   SAKURA GLASS THEME · 透明粉（无磨砂）· 樱花飘落背景
   覆盖全站（base.html 最后加载，!important 优先生效）
   ========================================================================== */

:root {
    /* 玻璃面（更透明、无模糊） */
    --pk-glass: rgba(255, 255, 255, 0.22);
    --pk-glass-strong: rgba(255, 255, 255, 0.34);
    --pk-glass-hover: rgba(255, 255, 255, 0.44);
    --pk-stroke: rgba(255, 130, 185, 0.4);
    --pk-stroke-soft: rgba(255, 130, 185, 0.2);
    --pk-inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.55);

    /* 文本 */
    --pk-text: #4a2038;
    --pk-text-soft: #7a4568;
    --pk-text-mute: #a86a8c;

    /* 粉色强调 */
    --pk-primary: #ff5fa2;
    --pk-primary-deep: #e83a7d;
    --pk-accent: #ff9dcf;
    --pk-glow: rgba(255, 95, 162, 0.3);

    --pk-radius: 16px;
    --pk-radius-lg: 22px;

    /* 全局强调色对齐（覆盖 app/theme 的靛蓝） */
    --primary: #ff5fa2;
    --primary-light: #ff9dcf;
    --primary-dark: #e83a7d;
    --primary-glow: rgba(255, 95, 162, 0.3);
    --accent: #ff9dcf;
    --border: rgba(255, 130, 185, 0.3);
    --surface: rgba(255, 255, 255, 0.3);

    --pk-bg-image: none;
}

[data-color] {
    --primary: #ff5fa2 !important;
    --primary-light: #ff9dcf !important;
    --primary-dark: #e83a7d !important;
    --primary-glow: rgba(255, 95, 162, 0.3) !important;
}

/* ==========================================================================
   背景：透明粉 + 柔光（无网格磨砂）
   ========================================================================== */
html, body {
    background-color: #ffe9f4;
    color: var(--pk-text);
    min-height: 100vh;
}
body {
    position: relative;
    background-image:
        var(--pk-bg-image),
        radial-gradient(110% 80% at 12% -10%, rgba(255, 150, 200, 0.5) 0%, transparent 55%),
        radial-gradient(90% 70% at 95% 0%, rgba(255, 190, 225, 0.45) 0%, transparent 52%),
        radial-gradient(95% 90% at 0% 100%, rgba(210, 170, 255, 0.35) 0%, transparent 55%),
        radial-gradient(120% 90% at 50% 120%, rgba(255, 210, 235, 0.55) 0%, transparent 60%),
        linear-gradient(180deg, #ffe8f3 0%, #ffd9ea 55%, #ffe9f4 100%);
    background-attachment: fixed;
    background-size: cover, auto, auto, auto, auto, auto;
    background-position: center;
    background-repeat: no-repeat;
}

/* 内容浮在背景之上；樱花 canvas 在最底层 */
body > *:not(#bg-canvas) { position: relative; z-index: 1; }
#bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

/* ==========================================================================
   CARDS · 透明玻璃（无磨砂）
   ========================================================================== */
.card, .stat-card, .model-card, .key-card, .modal-box,
.gradient-border, .gradient-border-static, .feature, .preview {
    background: var(--pk-glass) !important;
    border: 1px solid var(--pk-stroke) !important;
    border-radius: var(--pk-radius) !important;
    box-shadow: 0 8px 24px rgba(255, 95, 162, 0.12), var(--pk-inner-hi) !important;
    color: var(--pk-text);
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.card:hover, .stat-card:hover, .model-card:hover, .key-card:hover, .feature:hover {
    background: var(--pk-glass-hover) !important;
    border-color: var(--pk-primary) !important;
    box-shadow: 0 14px 34px rgba(255, 95, 162, 0.2), var(--pk-inner-hi) !important;
}
.modal-box { border-radius: var(--pk-radius-lg) !important; }

/* ==========================================================================
   TEXT
   ========================================================================== */
.page-title, .section-title, .hero h2, h1, h2, h3 { color: var(--pk-text) !important; }
.stat-card .stat-value { color: var(--pk-primary-deep) !important; }
.stat-card .stat-label, .stat-card .stat-icon { color: var(--pk-text-soft) !important; }
.text-muted, .model-card .model-id, .model-card .stock { color: var(--pk-text-mute) !important; }
.model-card .model-name, .model-name { color: var(--pk-text) !important; }
.hero p { color: var(--pk-text-soft) !important; }
.text-secondary, small, .hint { color: var(--pk-text-mute) !important; }

/* ==========================================================================
   BUTTONS · 透明玻璃（无磨砂）
   ========================================================================== */
.btn, .cta {
    border-radius: 12px !important;
    font-weight: 700 !important;
    transition: transform 0.16s, box-shadow 0.18s, border-color 0.18s, background 0.18s, filter 0.18s !important;
}
.btn:hover, .cta:hover { transform: translateY(-1px); }
.btn:active, .cta:active { transform: translateY(0) scale(0.985); }

.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.btn-ghost) {
    background: var(--pk-glass-strong) !important;
    border: 1px solid var(--pk-stroke) !important;
    color: var(--pk-text) !important;
    box-shadow: var(--pk-inner-hi) !important;
}

.btn-primary, .cta.primary {
    background: linear-gradient(135deg, rgba(255, 122, 181, 0.82), rgba(255, 61, 139, 0.82)) !important;
    border: 1px solid rgba(255, 130, 185, 0.6) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px var(--pk-glow), var(--pk-inner-hi) !important;
}
.btn-primary:hover, .cta.primary:hover {
    box-shadow: 0 10px 26px rgba(255, 95, 162, 0.5), var(--pk-inner-hi) !important;
}

.btn-success {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.82), rgba(34, 197, 94, 0.82)) !important;
    border: 1px solid rgba(52, 211, 153, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(34,197,94,0.2), var(--pk-inner-hi) !important;
}
.btn-danger {
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.82), rgba(244, 63, 94, 0.82)) !important;
    border: 1px solid rgba(251, 113, 133, 0.5) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(244,63,94,0.2), var(--pk-inner-hi) !important;
}

.btn-outline, .cta.ghost {
    background: var(--pk-glass) !important;
    border: 1px solid var(--pk-stroke) !important;
    color: var(--pk-primary-deep) !important;
}
.btn-outline:hover, .cta.ghost:hover {
    background: var(--pk-glass-hover) !important;
    border-color: var(--pk-primary) !important;
    color: var(--pk-primary-deep) !important;
}

.btn-ghost { background: transparent !important; color: var(--pk-text-soft) !important; border: 1px solid transparent !important; }
.btn-ghost:hover { background: var(--pk-glass) !important; color: var(--pk-primary-deep) !important; }

/* ==========================================================================
   INPUTS
   ========================================================================== */
.input, input, textarea, select {
    background: rgba(255, 255, 255, 0.35) !important;
    border: 1px solid var(--pk-stroke) !important;
    color: var(--pk-text) !important;
    border-radius: 10px !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
.input::placeholder, input::placeholder, textarea::placeholder { color: var(--pk-text-mute) !important; }
.input:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--pk-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 95, 162, 0.16) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    outline: none !important;
}
select option { background: #fff; color: var(--pk-text); }

/* ==========================================================================
   TABLES
   ========================================================================== */
thead th {
    background: rgba(255, 200, 225, 0.4) !important;
    color: var(--pk-primary-deep) !important;
    border-bottom: 1px solid var(--pk-stroke) !important;
}
tbody td { color: var(--pk-text) !important; border-bottom: 1px solid var(--pk-stroke-soft) !important; }
tbody tr:hover { background: rgba(255, 200, 225, 0.22) !important; }

/* ==========================================================================
   BADGES
   ========================================================================== */
.badge-success { background: rgba(34,197,94,0.16) !important; color: #15803d !important; border: 1px solid rgba(34,197,94,0.3) !important; }
.badge-warning { background: rgba(245,158,11,0.18) !important; color: #b45309 !important; border: 1px solid rgba(245,158,11,0.3) !important; }
.badge-danger  { background: rgba(244,63,94,0.16) !important; color: #be123c !important; border: 1px solid rgba(244,63,94,0.3) !important; }
.badge-info    { background: rgba(96,165,250,0.18) !important; color: #1d4ed8 !important; border: 1px solid rgba(96,165,250,0.3) !important; }
.badge-primary { background: rgba(255,95,162,0.18) !important; color: var(--pk-primary-deep) !important; border: 1px solid rgba(255,95,162,0.35) !important; }

/* ==========================================================================
   SIDEBAR / NAV · 透明（无磨砂）
   ========================================================================== */
.sidebar {
    background: rgba(255, 235, 245, 0.38) !important;
    border-right: 1px solid var(--pk-stroke) !important;
}
.sidebar-brand { border-bottom: 1px solid var(--pk-stroke-soft) !important; }
.sidebar-brand h1 { color: var(--pk-primary-deep) !important; }
.sidebar-brand p { color: var(--pk-text-mute) !important; }
.sidebar-nav a { color: var(--pk-text-soft) !important; border-radius: 10px; transition: background 0.15s, color 0.15s; }
.sidebar-nav a:hover { background: var(--pk-glass) !important; color: var(--pk-primary-deep) !important; }
.sidebar-nav a.active {
    background: linear-gradient(135deg, rgba(255,122,181,0.9), rgba(255,61,139,0.9)) !important;
    border: 1px solid rgba(255,130,185,0.6) !important;
    color: #fff !important;
    box-shadow: var(--pk-inner-hi) !important;
}
.sidebar-footer { border-top: 1px solid var(--pk-stroke-soft) !important; }

.nav {
    background: rgba(255, 235, 245, 0.4) !important;
    border-bottom: 1px solid var(--pk-stroke) !important;
}
.nav-brand { color: var(--pk-primary-deep) !important; }
.currency-toggle {
    background: var(--pk-glass) !important;
    border: 1px solid var(--pk-stroke) !important;
    color: var(--pk-text-soft) !important;
    transition: border-color 0.15s, color 0.15s;
}
.currency-toggle:hover { border-color: var(--pk-primary) !important; color: var(--pk-primary-deep) !important; }

/* ==========================================================================
   MISC
   ========================================================================== */
.model-card .key-value, .key-card .key-value, .mono-cell, .key-value {
    background: rgba(255, 240, 247, 0.5) !important;
    border: 1px solid var(--pk-stroke-soft) !important;
    color: var(--pk-primary-deep) !important;
}
.progress-bar { background: rgba(255, 180, 215, 0.28) !important; }
.progress-fill, .progress-fill.green, .progress-fill.blue, .progress-fill.yellow, .progress-fill.red {
    background: linear-gradient(90deg, #ff7ab5, #ff3d8b) !important;
}
/* 弹窗兜底：无论任何祖先/动画上下文，始终视口居中、不被顶到底部、内容过高可内部滚动 */
/* 注意：不要强制 display，否则会覆盖内联的 display:none 让弹窗永远显示 */
.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    z-index: 2147483600 !important;
    background: rgba(120, 40, 75, 0.3) !important;
}
.modal-box {
    margin: auto !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}
.empty-state .empty-title { color: var(--pk-text) !important; }
.empty-state .empty-desc { color: var(--pk-text-soft) !important; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.2); }
::-webkit-scrollbar-thumb { background: rgba(255,95,162,0.4) !important; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,95,162,0.6) !important; }

[style*="background:#f8fafc"], [style*="background: #f8fafc"],
[style*="background:#fafbfc"], [style*="background:#fff"], [style*="background: #fff"],
[style*="background:#ffffff"], [style*="background: #ffffff"] {
    background: var(--pk-glass) !important;
}

/* 兜底覆盖内联靛蓝色值 */
[style*="color:#4f46e5"], [style*="color: #4f46e5"],
[style*="color:#6366f1"], [style*="color: #6366f1"] {
    color: var(--pk-primary-deep) !important;
}

.text-success { color: #16a34a !important; }
.text-danger { color: #be123c !important; }
.price, .model-card .price { color: var(--pk-primary-deep) !important; }

/* ==========================================================================
   LANDING / LOGIN / REGISTER
   ========================================================================== */
.landing .mountains {
    background:
        radial-gradient(60% 100% at 15% 100%, rgba(255,180,215,0.85) 0%, transparent 70%),
        radial-gradient(70% 100% at 55% 100%, rgba(255,160,205,0.9) 0%, transparent 72%),
        radial-gradient(60% 100% at 90% 100%, rgba(255,190,220,0.85) 0%, transparent 70%) !important;
}
.moon-real, .anime-orb {
    background: radial-gradient(circle at 35% 30%, #fff 0%, #ffd1e6 45%, #ff7ab5 100%) !important;
    box-shadow: 0 0 36px rgba(255,122,181,0.5) !important;
    border-radius: 50% !important;
}
.glass-shell, .login-card, .reg-card {
    background: rgba(255,255,255,0.3) !important;
    border: 1px solid var(--pk-stroke) !important;
    box-shadow: 0 24px 70px rgba(255,95,162,0.16), var(--pk-inner-hi) !important;
}
.brand-block .brand-title { color: var(--pk-text) !important; }
.brand-block .brand-sub { color: var(--pk-text-mute) !important; }
.lang-pill { background: var(--pk-glass) !important; border: 1px solid var(--pk-stroke) !important; color: var(--pk-text-soft) !important; }
.lede h1 {
    background: linear-gradient(135deg, #ff7ab5 0%, #ff3d8b 50%, #ffa3d0 100%) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
.lede p.sub { color: var(--pk-text-soft) !important; }
.feature .ft { color: var(--pk-text) !important; }
.feature .fd { color: var(--pk-text-mute) !important; }
.preview .pv-title { color: var(--pk-text) !important; }
.pv-card { background: var(--pk-glass) !important; border: 1px solid var(--pk-stroke-soft) !important; transition: border-color 0.15s; }
.pv-card:hover { border-color: var(--pk-primary) !important; }
.pv-card .pv-left .pv-name { color: var(--pk-text) !important; }
.pv-card .pv-left .pv-meta { color: var(--pk-text-mute) !important; }
.pv-card .pv-price { color: var(--pk-primary-deep) !important; }
.pv-bar { background: rgba(255,180,215,0.28) !important; }
.pv-bar > i { background: linear-gradient(90deg, #ff7ab5, #ff3d8b) !important; }
.pv-skel { background: rgba(255,200,225,0.3) !important; }
.pv-retry { border: 1px solid var(--pk-stroke) !important; color: var(--pk-text-soft) !important; }
.pv-retry:hover { border-color: var(--pk-primary) !important; color: var(--pk-primary-deep) !important; }

.login-left, .reg-bg {
    background: linear-gradient(160deg, #ff9ec9 0%, #ff7ab5 60%, #ffb3d6 100%) !important;
}
.login-left-content h1, .login-left-content p { color: #fff !important; text-shadow: 0 2px 10px rgba(255,61,139,0.3); }

/* ==========================================================================
   降级（无磨砂下保证可读）
   ========================================================================== */
@media (prefers-reduced-transparency: reduce) {
    .card, .stat-card, .model-card, .key-card, .modal-box, .feature, .preview {
        background: rgba(255, 240, 247, 0.92) !important;
    }
}