/* app/static/style.css */

body { font-family: 'Noto Sans TC', sans-serif; transition: background-color 0.5s ease; }

/* 淺色模式：櫻花粉 */
html:not(.dark) body { background: linear-gradient(135deg, #fff0f5 0%, #ffe4e1 100%); }
html:not(.dark) .petal { background-color: #ffc0cb; opacity: 0.6; }

/* 深色模式：夜櫻 (深紫/海軍藍) */
html.dark body { background: linear-gradient(135deg, #1f1c2c 0%, #2d2b42 100%); }
html.dark .petal { background-color: #fbcfe8; opacity: 0.3; box-shadow: 0 0 5px #fbcfe8; }

.sakura-container { position: relative; overflow-x: hidden; min-height: 100vh; }

.petal {
    position: absolute;
    border-radius: 150% 0 150% 0;
    animation: fall infinite linear;
    z-index: 0;
    pointer-events: none;
}
@keyframes fall {
    0% { transform: translate(0, -10vh) rotate(0deg); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translate(20vw, 100vh) rotate(360deg); opacity: 0; }
}

/* 玻璃擬態卡片 */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}
html.dark .glass-card {
    background: rgba(30, 30, 40, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

.input-sakura:focus { outline: none; border-color: #f472b6; box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.2); }
html.dark .input-sakura { background-color: #374151; border-color: #4b5563; color: white; }
html.dark .input-sakura:focus { border-color: #f472b6; }

/* 強制輸入框高度一致 */
.input-fixed-height { height: 3rem; }