@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&family=Quicksand:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");


:root {
    /* 背景色：奶油基调（日间） */
    --color-cream: #FFF8E7;
    /* 樱花粉色背景 */
    --color-sakura-bg: #FFF0F3;
    /* 卡片底色 */
    --color-card: #FFFDF7;
    /* 边框/分隔线主色 */
    --color-border: #E8D5C4;
    /* 主色：粉色 */
    --color-primary: #E8A0BF;
    /* 副色：青绿 */
    --color-secondary: #88C9C9;
    /* 强调色：暖金 */
    --color-accent: #E8B86D;
    /* 正文文字 */
    --color-text: #2D2B2B;
    /* 次要文字/说明 */
    --color-text-muted: #8B7E74;

    /* 字体族：西文 / 日文 / 等宽 */
    --font-sans: "Quicksand", "Zen Maru Gothic", system-ui, sans-serif;
    --font-jp: "Zen Maru Gothic", "Quicksand", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", monospace;

    /* 圆角大小（便于后续统一修改） */
    --radius-card: 12px;
    --radius-pill: 999px;
    --radius-btn: 4px;
}

/* =========================================
   基础样式（日间模式）
   ========================================= */
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    /* 使用 CSS 变量控制主题色 */
    font-family: var(--font-sans);
    color: var(--color-text);
    background-color: var(--color-cream);

    /* CSS3 过渡：切换主题时平滑过渡背景与文字色 */
    transition: background-color 1.2s ease, color 1.2s ease;
}

/* =========================================
   夜间模式
   ========================================= */
html.night-mode body {
    /* 深色主题底色 */
    --color-cream: #1a1a2e;
    --color-sakura-bg: #1e1e30;
    --color-card: #242440;
    --color-border: #3a3a5c;
    --color-primary: #9b7bb8;
    --color-secondary: #5a8a8a;
    --color-accent: #b8944d;
    --color-text: #c8c4d4;
    --color-text-muted: #7a7590;
}

/* 夜间模式下，pill-btn的过渡属性设置，确保换肤柔和 */
html.night-mode body .pill-btn {
    transition:
            background-color 0.3s ease,
            color 0.3s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease;
}




html.night-mode body .sakura-petal::before {
    opacity: 0.35;
    background: #c9a0dc;
    border-radius: 50%;
    /* CSS3 多层 box-shadow，营造柔和光晕 */
    box-shadow:
            0 0 6px 2px rgba(201, 160, 220, 0.4),
            0 0 14px 4px rgba(201, 160, 220, 0.15);
    animation: petal-glow 4s ease-in-out infinite;
}

@keyframes petal-glow {
    0%, 100% {
        opacity: 0.25;
        box-shadow:
                0 0 5px 1px rgba(201, 160, 220, 0.3),
                0 0 10px 3px rgba(201, 160, 220, 0.1);
    }
    50% {
        opacity: 0.45;
        box-shadow:
                0 0 8px 3px rgba(201, 160, 220, 0.5),
                0 0 18px 6px rgba(201, 160, 220, 0.2);
    }
}


html.night-mode body .sakura-petal-0::before  { animation-delay: 0s; }
html.night-mode body .sakura-petal-1::before  { animation-delay: -1.2s; }
html.night-mode body .sakura-petal-2::before  { animation-delay: -3.1s; }
html.night-mode body .sakura-petal-3::before  { animation-delay: -0.7s; }
html.night-mode body .sakura-petal-4::before  { animation-delay: -2.5s; }
html.night-mode body .sakura-petal-5::before  { animation-delay: -1.8s; }
html.night-mode body .sakura-petal-6::before  { animation-delay: -3.6s; }
html.night-mode body .sakura-petal-7::before  { animation-delay: -0.3s; }
html.night-mode body .sakura-petal-8::before  { animation-delay: -2.9s; }
html.night-mode body .sakura-petal-9::before  { animation-delay: -1.5s; }
html.night-mode body .sakura-petal-10::before { animation-delay: -3.3s; }
html.night-mode body .sakura-petal-11::before { animation-delay: -0.9s; }
html.night-mode body .sakura-petal-12::before { animation-delay: -2.2s; }
html.night-mode body .sakura-petal-13::before { animation-delay: -1.1s; }
html.night-mode body .sakura-petal-14::before { animation-delay: -3.8s; }
html.night-mode body .sakura-petal-15::before { animation-delay: -0.5s; }
html.night-mode body .sakura-petal-16::before { animation-delay: -2.7s; }
html.night-mode body .sakura-petal-17::before { animation-delay: -1.6s; }
html.night-mode body .sakura-petal-18::before { animation-delay: -3.4s; }
html.night-mode body .sakura-petal-19::before { animation-delay: -0.8s; }

/* =========================================
   樱花飘落容器
   ========================================= */
.sakura-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* 每片花瓣的基础定位与形状 */
.sakura-petal {
    position: absolute;
    top: -30px;
}
.sakura-petal::before {
    content: "";
    display: block;
    /* 使用主色（日间/夜间会随变量变化） */
    background: var(--color-primary);
    /* 猫耳/花瓣形状：右下圆角为 0 */
    border-radius: 50% 0 50% 0;
    opacity: 0.22;
}

/* =========================================
   樱花飘落
   ========================================= */


@keyframes sakura-fall {
    0%   { transform: translateY(-30px) translateX(0) rotate(0deg) scale(1); opacity: 0; }
    3%   { opacity: 1; }
    25%  { transform: translateY(25vh) translateX(30px) rotate(90deg) scale(0.95); }
    50%  { transform: translateY(50vh) translateX(-20px) rotate(180deg) scale(1.05); }
    75%  { transform: translateY(75vh) translateX(40px) rotate(270deg) scale(0.9); }
    97%  { opacity: 0.8; }
    100% { transform: translateY(calc(100vh + 40px)) translateX(10px) rotate(360deg) scale(1); opacity: 0; }
}


@keyframes sakura-fall-alt {
    0%   { transform: translateY(-30px) translateX(0) rotate(0deg); opacity: 0; }
    3%   { opacity: 1; }
    25%  { transform: translateY(25vh) translateX(-25px) rotate(-80deg); }
    50%  { transform: translateY(50vh) translateX(35px) rotate(-170deg); }
    75%  { transform: translateY(75vh) translateX(-15px) rotate(-260deg); }
    97%  { opacity: 0.7; }
    100% { transform: translateY(calc(100vh + 40px)) translateX(20px) rotate(-360deg); opacity: 0; }
}


@keyframes sakura-fall-lazy {
    0%   { transform: translateY(-30px) translateX(0) rotate(15deg); opacity: 0; }
    4%   { opacity: 1; }
    30%  { transform: translateY(30vh) translateX(50px) rotate(100deg); }
    60%  { transform: translateY(60vh) translateX(-10px) rotate(200deg); }
    95%  { opacity: 0.6; }
    100% { transform: translateY(calc(100vh + 40px)) translateX(30px) rotate(330deg); opacity: 0; }
}

/* =========================================
   樱花粒子配置
   ========================================= */
.sakura-petal-0  { left: 3%;  animation: sakura-fall 16s linear infinite; animation-delay: 0s; }
.sakura-petal-0::before  { width: 12px; height: 12px; }

.sakura-petal-1  { left: 10%; animation: sakura-fall-alt 20s linear infinite; animation-delay: -3s; }
.sakura-petal-1::before  { width: 8px; height: 8px; opacity: 0.15; }

.sakura-petal-2  { left: 18%; animation: sakura-fall-lazy 24s linear infinite; animation-delay: -7s; }
.sakura-petal-2::before  { width: 14px; height: 14px; opacity: 0.18; }

.sakura-petal-3  { left: 25%; animation: sakura-fall 19s linear infinite; animation-delay: -11s; }
.sakura-petal-3::before  { width: 10px; height: 10px; }

.sakura-petal-4  { left: 32%; animation: sakura-fall-alt 22s linear infinite; animation-delay: -1s; }
.sakura-petal-4::before  { width: 7px; height: 7px; opacity: 0.12; }

.sakura-petal-5  { left: 40%; animation: sakura-fall 17s linear infinite; animation-delay: -14s; }
.sakura-petal-5::before  { width: 11px; height: 11px; opacity: 0.2; }

.sakura-petal-6  { left: 47%; animation: sakura-fall-lazy 25s linear infinite; animation-delay: -5s; }
.sakura-petal-6::before  { width: 9px; height: 9px; }

.sakura-petal-7  { left: 53%; animation: sakura-fall-alt 18s linear infinite; animation-delay: -9s; }
.sakura-petal-7::before  { width: 13px; height: 13px; opacity: 0.16; }

.sakura-petal-8  { left: 60%; animation: sakura-fall 21s linear infinite; animation-delay: -16s; }
.sakura-petal-8::before  { width: 8px; height: 8px; opacity: 0.14; }

.sakura-petal-9  { left: 67%; animation: sakura-fall-lazy 23s linear infinite; animation-delay: -2s; }
.sakura-petal-9::before  { width: 12px; height: 12px; }

.sakura-petal-10 { left: 73%; animation: sakura-fall-alt 19s linear infinite; animation-delay: -8s; }
.sakura-petal-10::before { width: 6px; height: 6px; opacity: 0.1; }

.sakura-petal-11 { left: 78%; animation: sakura-fall 26s linear infinite; animation-delay: -12s; }
.sakura-petal-11::before { width: 15px; height: 15px; opacity: 0.13; }

.sakura-petal-12 { left: 84%; animation: sakura-fall-lazy 20s linear infinite; animation-delay: -6s; }
.sakura-petal-12::before { width: 10px; height: 10px; }

.sakura-petal-13 { left: 90%; animation: sakura-fall 18s linear infinite; animation-delay: -15s; }
.sakura-petal-13::before { width: 9px; height: 9px; opacity: 0.17; }

.sakura-petal-14 { left: 95%; animation: sakura-fall-alt 22s linear infinite; animation-delay: -4s; }
.sakura-petal-14::before { width: 11px; height: 11px; }

.sakura-petal-15 { left: 15%; animation: sakura-fall 27s linear infinite; animation-delay: -18s; }
.sakura-petal-15::before { width: 7px; height: 7px; opacity: 0.11; }

.sakura-petal-16 { left: 35%; animation: sakura-fall-alt 15s linear infinite; animation-delay: -10s; }
.sakura-petal-16::before { width: 13px; height: 13px; opacity: 0.2; }

.sakura-petal-17 { left: 55%; animation: sakura-fall-lazy 21s linear infinite; animation-delay: -13s; }
.sakura-petal-17::before { width: 8px; height: 8px; opacity: 0.15; }

.sakura-petal-18 { left: 70%; animation: sakura-fall 24s linear infinite; animation-delay: -7s; }
.sakura-petal-18::before { width: 10px; height: 10px; }

.sakura-petal-19 { left: 88%; animation: sakura-fall-alt 17s linear infinite; animation-delay: -19s; }
.sakura-petal-19::before { width: 14px; height: 14px; opacity: 0.16; }



/* =========================================
   胶囊按钮（pill-btn）
   ========================================= */
.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-btn);
    background: var(--color-card);
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-text);
    cursor: pointer;
    /* CSS3 过渡：边框、背景、位移、阴影 */
    transition:
            border-color 0.2s,
            transform 0.1s,
            box-shadow 0.2s,
            background-color 0.2s;
}
.pill-btn:hover {
    border-color: var(--color-primary);
    background-color: var(--color-sakura-bg);
}
.pill-btn:active {
    transform: translateY(1px);
    box-shadow: none;
}

.nav-bar {
    background: var(--color-card);
    height: 60px;
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 2rem;
    margin: 20px auto;
}

.logo {
    padding-left: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--color-text);
}

.logo-image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-primary);
    transition: transform 0.3s ease;
}

.logo-image:hover {
    transform: scale(1.1);
}

.logo-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    font-family: var(--font-sans);
}

.nav-link a {
    text-decoration: none;
    color: var(--color-text);
    padding: 0 30px;
    font-size: 16px;
    transition: color 0.3s ease;
}

.nav-link a:hover {
    color: var(--color-primary);
}

.nav-right {
    padding-right: 30px;
    border-radius: 100px;
    display: flex;
    align-items: center;
}

.nav-right a {
    text-decoration: none;
}

.user-greeting {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    margin-right: 15px;
}

/* =========================================
   内容包装器样式
   ========================================= */
.content-wrapper {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* =========================================
   个人介绍样式
   ========================================= */
.profile-intro {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1000px;
    width: 100%;
    background-color: var(--color-card);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(232, 160, 191, 0.15);
    border: 2px solid var(--color-border);
}

.profile-text {
    flex: 1;
}

.profile-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 20px;
    font-family: var(--font-sans);
}

.profile-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin-bottom: 30px;
    font-family: var(--font-sans);
}

.profile-avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid var(--color-primary);
    box-shadow: 0 4px 12px rgba(232, 160, 191, 0.2);
}

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

/* =========================================
   技能标签样式
   ========================================= */
.skills {
    margin-top: 30px;
}

.skills-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 15px;
    font-family: var(--font-sans);
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.skill-tag {
    padding: 8px 16px;
    background-color: var(--color-sakura-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    font-size: 14px;
    color: var(--color-text);
    transition: all 0.3s ease;
    font-family: var(--font-sans);
}

.skill-tag:hover {
    background-color: var(--color-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(232, 160, 191, 0.3);
}

/* 夜间模式：个人介绍样式 */
html.night-mode body .profile-intro {
    box-shadow: 0 4px 12px rgba(155, 123, 184, 0.15);
}

html.night-mode body .profile-avatar {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(155, 123, 184, 0.2);
}

html.night-mode body .skill-tag {
    background-color: var(--color-sakura-bg);
    border-color: var(--color-border);
    color: var(--color-text);
}

html.night-mode body .skill-tag:hover {
    background-color: var(--color-primary);
    color: white;
    box-shadow: 0 4px 8px rgba(155, 123, 184, 0.3);
}

/* =========================================
   页脚样式
   ========================================= */
.footer {
    background-color: var(--color-card);
    border-top: 1px solid var(--color-border);
    padding: 20px 0;
    margin-top: auto;
}

.footer-bottom {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

/* Flash消息样式 */
.flash-messages {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 800px;
    width: 90%;
    z-index: 1000;
    pointer-events: none;
}

.flash-message {
    padding: 12px 16px;
    margin-bottom: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    pointer-events: auto;
}

.flash-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.flash-danger {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.flash-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

.flash-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

/* 夜间模式：Flash消息样式 */
html.night-mode body .flash-success {
    background-color: #1a3636;
    color: #a8f5a8;
    border: 1px solid #2d502d;
}

html.night-mode body .flash-danger {
    background-color: #361a1a;
    color: #f5a8a8;
    border: 1px solid #502d2d;
}

html.night-mode body .flash-info {
    background-color: #1a2c36;
    color: #a8d5f5;
    border: 1px solid #2d4050;
}

html.night-mode body .flash-warning {
    background-color: #36331a;
    color: #f5e6a8;
    border: 1px solid #504a2d;
}