/* ─── Fabula777 Skin 9-1 "定制版清新蓝" ─────────────────────────── */
:root {
    --primary:           #006CFF;
    --primary-dark:      #0051CC;
    --primary-light:     #60D0FF;
    --primary-faint:     #EEF5FF;
    --accent-green:      #00DA0F;
    --accent-red:        #FF0000;
    --accent-gold:       #F9D115;
    --neutral-1:         #4E98FE;
    --neutral-2:         #92C0FF;
    --neutral-3:         #9CC6FF;
    --bg-base:           #EEF5FF;
    --bg-surface:        #FFFFFF;
    --bg-card:           #FFFFFF;
    --bg-header:         #006CFF;
    --text-primary:      #1a2236;
    --text-secondary:    #4a6080;
    --text-muted:        #92C0FF;
    --text-inverse:      #FFFFFF;
    --border:            #BAD7FF;
    --border-light:      #DDEEFF;
    --success:           #00DA0F;
    --danger:            #FF0000;
    --warning:           #F9D115;
    --shadow-sm:         0 1px 4px rgba(0,108,255,.10);
    --shadow-md:         0 4px 16px rgba(0,108,255,.15);
    --shadow-lg:         0 8px 32px rgba(0,108,255,.18);
    --radius-sm:         6px;
    --radius-md:         10px;
    --radius-lg:         16px;
    --radius-xl:         24px;
    --font-base:         -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    --transition:        0.18s ease;
    --header-height:     52px;
    --bottom-nav-height: 60px;
    --max-width:         432px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: var(--font-base);
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh; min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}
img    { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
a      { text-decoration: none; color: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }

.main-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding-top: var(--header-height);
    padding-bottom: calc(var(--bottom-nav-height) + 6px);
    min-height: 100dvh;
    background: var(--bg-base);
    position: relative;
}
.hidden { display: none !important; }
.spin   { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

#toast-container {
    position: fixed;
    top: calc(var(--header-height) + 10px);
    left: 50%; transform: translateX(-50%);
    z-index: 9999;
    display: flex; flex-direction: column; gap: 6px;
    pointer-events: none;
    width: min(92vw, var(--max-width));
}
.toast {
    background: var(--bg-surface);
    color: var(--text-primary);
    padding: 10px 16px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 0.8125rem; font-weight: 500;
    pointer-events: all;
    border-left: 3px solid var(--primary);
    animation: toast-in 0.28s ease, toast-out 0.28s ease 2.7s forwards;
    word-break: break-word;
}
.toast--success { border-left-color: var(--success); }
.toast--error   { border-left-color: var(--danger); }
.toast--warning { border-left-color: var(--warning); }
@keyframes toast-in  { from { opacity:0; transform: translateY(-8px) scale(.96); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes toast-out { from { opacity:1; } to { opacity:0; transform: translateY(-8px) scale(.96); } }

@media (min-width: 481px) {
    body { display: flex; flex-direction: column; align-items: center; background: #b8cfe8; }
    .main-content { box-shadow: var(--shadow-lg); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}