/* ============================================================
   拉菲宝宝 (Lafei Baby) - 全局样式表 v3.0 (全新重写)
   设计风格：日系奶油色调 / 柔软卡片 / 玻璃态 / 自然大地色
   配色方案：奶油白 / 陶土色 / 树皮棕 / 苔藓绿
   ============================================================ */

/* ============================================================
   自托管字体：Nunito（答题时显示单词用）
   ------------------------------------------------------------
   站点字体栈里早就写了 'Nunito'，但一直没有 @font-face / 字体文件，
   所以从来就没生效过，一直静默回退到系统字体。
   这里自托管（不用 Google Fonts —— 国内访问会挂住）。
   只声明了一个独立家族名 'Nunito Word'，不挂到 --font-heading：
   否则全站标题的字形会跟着一起变，只改答题单词更稳妥。
   ============================================================ */
@font-face {
    font-family: 'Nunito Word';
    font-style: normal;
    font-weight: 700;
    /* swap：字体没到之前先用系统字体显示，不让文字空着 */
    font-display: swap;
    src: url('../fonts/nunito-latin-700-normal.woff2') format('woff2');
}

/* ============================================================
   CSS 变量定义
   ============================================================ */
:root {
    --surface-page:        #FEFAF6;
    --surface-card:        #FFFCF9;
    --surface-hover:       #FFF8F0;
    --surface-nav:         rgba(254,250,246,0.75);
    --brand-clay:          #D4A574;
    --brand-clay-dark:     #B8805A;
    --brand-clay-light:    #E8D5C0;
    --brand-bark:          #8B5E3C;
    --brand-bark-light:    #A78B71;
    --brand-moss:          #7D9B76;
    --brand-moss-light:    #B5C9B0;
    --text-primary:        #3D3228;
    --text-secondary:      #8A7B6E;
    --text-on-brand:       #FFFCF7;
    --text-link:           #B8805A;
    --border-default:      #E8DFD5;
    --border-focus:        #D4A574;
    --border-subtle:       rgba(61,50,40,0.08);
    --feedback-error:      #C84C4C;
    --feedback-error-bg:   rgba(200,76,76,0.06);
    --feedback-success:    #7D9B76;
    --feedback-success-bg: rgba(125,155,118,0.08);
    --shadow-color:        61 50 40;
    --shadow-soft:         0 2px 12px rgba(61,50,40,0.05);
    --shadow-medium:       0 4px 20px rgba(61,50,40,0.07);
    --shadow-strong:       0 8px 30px rgba(61,50,40,0.10);
    --shadow-hover:        0 12px 40px rgba(61,50,40,0.12);
    --shadow-focus:        0 0 0 3px rgba(212,165,116,0.3);
    --font-heading:        'Nunito', 'Noto Sans SC', system-ui, sans-serif;
    --font-body:           'Noto Sans SC', 'Nunito', system-ui, sans-serif;
    --font-mono:           'SF Mono', 'Cascadia Code', monospace;
    /* 答题单词专用：自托管的 Nunito。
       回退链一律用无衬线 —— font-display 是 swap，字体到达前会先显示回退字体，
       若回退是衬线体（Georgia），换字时会看到衬线→无衬线的明显跳动。 */
    --font-word:           'Nunito Word', 'Nunito', system-ui, 'Segoe UI', sans-serif;
    --text-hero:           clamp(2.2rem, 5vw, 3.5rem);
    --text-section-title:  clamp(1.5rem, 3.5vw, 2rem);
    --text-card-title:     1.25rem;
    --text-body:           1rem;
    --text-small:          0.875rem;
    --text-caption:        0.8rem;
    --leading-relaxed:     1.75;
    --leading-normal:      1.6;
    --leading-tight:       1.3;
    --weight-light:        300;
    --weight-regular:      400;
    --weight-medium:       500;
    --weight-semibold:     600;
    --weight-bold:         700;
    --weight-extrabold:    800;
    --space-1:  4px;  --space-2:  8px;  --space-3:  12px;
    --space-4:  16px; --space-5:  20px; --space-6:  24px;
    --space-8:  32px; --space-10: 40px; --space-12: 48px;
    --space-16: 64px; --space-20: 80px; --space-24: 96px;
    --radius-xs:   6px;  --radius-sm:   10px;
    --radius-md:   16px; --radius-lg:   24px;
    --radius-xl:   32px; --radius-full: 9999px;
    --ease-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast:    150ms;
    --duration-normal:  250ms;
    --duration-slow:    400ms;
    --z-dropdown: 100;  --z-sticky: 200;  --z-navbar: 300;
    --z-modal: 400;     --z-lightbox: 500; --z-toast: 600;
    --navbar-height:   68px;
    --container-max:   1200px;
    --container-narrow: 800px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--font-body); color: var(--text-primary);
    background-color: var(--surface-page); line-height: var(--leading-relaxed);
    overflow-x: hidden;
    background-image:
        radial-gradient(ellipse at 20% 20%, rgba(212,165,116,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(125,155,118,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(212,165,116,0.05) 0%, transparent 40%);
    background-attachment: fixed;
}
::selection { background: var(--brand-clay-light); color: var(--text-primary); }
a { color: var(--text-link); transition: color var(--duration-normal) var(--ease-out); }
a:hover { color: var(--brand-clay-dark); }
img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-primary); line-height: var(--leading-tight); }
h1 { font-size: var(--text-hero); font-weight: var(--weight-extrabold); }
h2 { font-size: var(--text-section-title); font-weight: var(--weight-bold); }
h3 { font-size: var(--text-card-title); font-weight: var(--weight-bold); }
p { margin-bottom: var(--space-4); line-height: var(--leading-relaxed); }
.text-caption { font-size: var(--text-caption); color: var(--text-secondary); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar-lafei { padding: 0.6rem 0; transition: all var(--duration-normal) var(--ease-out); z-index: var(--z-navbar); }
.navbar-lafei.scrolled { background: rgba(254,250,246,0.88); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: var(--shadow-soft); padding: 0.4rem 0; }
.navbar-brand-cute {
    font-family: var(--font-heading); font-size: 1.5rem; font-weight: var(--weight-extrabold);
    color: var(--brand-clay-dark) !important; display: flex; align-items: center; gap: var(--space-2);
    text-decoration: none;
}
.brand-paw { display: inline-flex; align-items: center; width: 36px; height: 36px; }
.brand-paw svg { width: 28px; height: 28px; fill: var(--brand-clay); }
.nav-link-cute {
    font-family: var(--font-heading); font-weight: var(--weight-semibold);
    font-size: 0.95rem; color: var(--text-primary) !important;
    padding: var(--space-2) var(--space-4) !important; border-radius: var(--radius-sm);
    transition: all var(--duration-normal) var(--ease-out); position: relative;
}
.nav-link-cute:hover { color: var(--brand-clay-dark) !important; background: rgba(212,165,116,0.06); }
.nav-link-cute.active { color: var(--brand-clay-dark) !important; background: var(--brand-clay-light); }
.navbar-toggler-cute { border: 1.5px solid var(--border-default); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.nav-spacer { height: var(--navbar-height); }

main { padding: 0 var(--space-4) var(--space-10); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-cute {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: 0.75rem 2rem; font-family: var(--font-heading); font-size: 0.95rem;
    font-weight: var(--weight-bold); color: var(--text-on-brand);
    background: linear-gradient(135deg, var(--brand-clay), var(--brand-clay-dark));
    border: none; border-radius: var(--radius-full); cursor: pointer; text-decoration: none;
    text-align: center; position: relative; overflow: hidden;
    transition: all var(--duration-normal) var(--ease-out);
}
.btn-cute:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(61,50,40,0.14); color: var(--text-on-brand); }
.btn-cute:active { transform: translateY(0) scale(0.97); }
.btn-cute-accent { background: linear-gradient(135deg, var(--brand-moss), #6A8B65); }
.btn-cute-outline { background: transparent; color: var(--brand-clay-dark); border: 2px solid var(--brand-clay); }
.btn-cute-outline:hover { background: var(--brand-clay); color: var(--text-on-brand); }
.btn-cute-sm { padding: 0.45rem 1.25rem; font-size: 0.85rem; }
.btn-cute-lg { padding: 1rem 2.75rem; font-size: 1.1rem; }
.btn-cute-danger { background: linear-gradient(135deg, var(--feedback-error), #a03838); }

/* Ripple effect */
.btn-cute .ripple {
    position: absolute; border-radius: 50%; background: rgba(255,255,255,0.35);
    transform: scale(0); animation: ripple-burst 0.6s ease-out; pointer-events: none;
}
@keyframes ripple-burst { to { transform: scale(4); opacity: 0; } }

/* ============================================================
   HERO SECTION (no background animations)
   ============================================================ */
.hero-section {
    position: relative; padding: var(--space-16) 0 var(--space-8);
    text-align: center; overflow: hidden;
    background: radial-gradient(ellipse at 50% 0%, rgba(212,165,116,0.10) 0%, transparent 60%);
}
.hero-content { position: relative; z-index: 1; }
.hero-title { font-size: var(--text-hero); font-weight: var(--weight-extrabold); color: var(--text-primary); margin-bottom: var(--space-4); }
.hero-title .highlight {
    background: linear-gradient(135deg, var(--brand-clay), var(--brand-bark));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-subtitle { font-size: 1.1rem; color: var(--text-secondary); max-width: 580px; margin: 0 auto var(--space-8); }
.hero-decorative-icon { display: block; width: 56px; height: 56px; margin: 0 auto var(--space-4); }
.hero-decorative-icon svg { width: 100%; height: 100%; fill: var(--brand-clay); opacity: 0.7; }

/* ============================================================
   CARDS
   ============================================================ */
.card-soft {
    background: var(--surface-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); padding: var(--space-6);
    box-shadow: var(--shadow-soft); transition: all var(--duration-normal) var(--ease-out);
    height: 100%;
}
.card-soft:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); border-color: var(--brand-clay-light); }

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.gallery-item {
    position: relative; border-radius: var(--radius-md); overflow: hidden;
    aspect-ratio: 1 / 1; cursor: pointer; box-shadow: var(--shadow-soft);
    transition: all var(--duration-normal) var(--ease-out);
}
.gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(transparent, rgba(0,0,0,0.5));
    color: #fff; font-size: var(--text-small); font-weight: var(--weight-medium);
}
.gallery-filter, .note-category-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); margin-bottom: var(--space-8); }
.filter-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.45rem 1.25rem; border-radius: var(--radius-full);
    font-size: var(--text-small); font-weight: var(--weight-semibold);
    color: var(--text-secondary); background: transparent;
    border: 1.5px solid var(--border-default); text-decoration: none;
    transition: all var(--duration-normal) var(--ease-out); cursor: pointer;
}
.filter-tag:hover { color: var(--brand-clay-dark); border-color: var(--brand-clay-light); background: var(--surface-hover); text-decoration: none; }
.filter-tag.active { color: var(--text-on-brand); background: linear-gradient(135deg, var(--brand-clay), var(--brand-clay-dark)); border-color: transparent; }

/* Lightbox */
.lightbox-overlay {
    position: fixed; inset: 0; z-index: var(--z-lightbox);
    background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity var(--duration-normal) var(--ease-out);
}
.lightbox-overlay.lightbox--open { opacity: 1; pointer-events: auto; }
.lightbox-overlay img { max-width: 90vw; max-height: 80vh; border-radius: var(--radius-md); transition: transform 0.25s ease, opacity 0.25s ease; }
.lightbox-overlay img.lb-slide-out-left  { transform: translateX(-60px); opacity: 0; }
.lightbox-overlay img.lb-slide-out-right { transform: translateX(60px); opacity: 0; }
.lightbox-overlay img.lb-slide-out-up    { transform: translateY(-40px); opacity: 0; }
.lightbox-overlay img.lb-slide-out-down  { transform: translateY(40px); opacity: 0; }
.lightbox-close {
    position: absolute; top: var(--space-6); right: var(--space-6);
    width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.15);
    border: none; color: #fff; cursor: pointer; display: flex;
    align-items: center; justify-content: center;
}
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255,255,255,0.12); border: none; color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s; z-index: 1;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.25); }
.lightbox-prev { left: var(--space-4); }
.lightbox-next { right: var(--space-4); }

/* ============================================================
   DIARY CARDS
   ============================================================ */
.diary-card {
    background: var(--surface-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-soft);
    transition: all var(--duration-normal) var(--ease-out); height: 100%; display: flex; flex-direction: column;
}
.diary-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); border-color: var(--brand-clay-light); }
.diary-card-inner { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; flex: 1; }
.diary-card-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.diary-card-title-link { color: var(--text-primary); text-decoration: none; }
.diary-card-title-link:hover { color: var(--brand-clay-dark); }
.diary-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.diary-card-excerpt { color: var(--text-secondary); font-size: 0.88rem; line-height: var(--leading-relaxed); margin-bottom: var(--space-3); }
.diary-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle);
}
.diary-card-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: 0.78rem; color: var(--text-secondary); }
.diary-card-readmore { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: var(--weight-semibold); color: var(--brand-clay); text-decoration: none; }

/* Mood & Weather tags */
.mood-tag, .weather-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0.2rem 0.65rem; border-radius: var(--radius-full);
    font-size: 0.76rem; font-weight: var(--weight-semibold); line-height: 1.4;
}

.mood-tag {
    background: rgba(212,165,116,0.12); color: var(--brand-clay-dark);
}
.weather-tag {
    background: rgba(125,155,118,0.1); color: #5a7a54;
}

/* ============================================================
   NOTE CARDS
   ============================================================ */
.note-card {
    background: var(--surface-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
    transition: all var(--duration-normal) var(--ease-out); height: 100%; display: flex; flex-direction: column;
    position: relative; overflow: hidden;
}
.note-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-medium); border-color: var(--brand-clay-light); }
.note-card-inner { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; flex: 1; }
.note-card-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: var(--weight-bold); margin-bottom: var(--space-3); }
.note-card-title-link { color: var(--text-primary); text-decoration: none; }
.note-card-title-link:hover { color: var(--brand-clay-dark); }
.note-card-excerpt { color: var(--text-secondary); font-size: 0.88rem; }
.note-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle);
}
.note-card-info { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 0.78rem; color: var(--text-secondary); }
.note-category-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0.2rem 0.75rem; border-radius: var(--radius-full);
    font-size: 0.76rem; font-weight: var(--weight-semibold); line-height: 1.4;
}
.note-pinned-badge { font-size: 0.72rem; padding: 0.15rem 0.65rem; border-radius: var(--radius-full); background: rgba(212,165,116,0.14); color: var(--brand-clay-dark); display: inline-flex; align-items: center; gap: 4px; }
.note-card-readmore {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.82rem; font-weight: var(--weight-semibold);
    color: var(--brand-clay); text-decoration: none;
}
.note-card-readmore:hover { color: var(--brand-clay-dark); }
.note-card-list { display: flex; flex-direction: column; gap: var(--space-5); }
.note-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer-lafei {
    background: linear-gradient(180deg, #3D3228, #2E2520);
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: var(--space-12) 0 var(--space-8); margin-top: var(--space-10);
}
.footer-brand {
    font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--weight-extrabold);
    color: var(--brand-clay-light); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
}
.footer-brand svg { width: 24px; height: 24px; fill: var(--brand-clay); }
.footer-text { font-size: 0.85rem; color: rgba(255,255,255,0.55); line-height: 1.7; }
.footer-heading { font-family: var(--font-heading); font-size: 0.95rem; font-weight: var(--weight-bold); color: rgba(255,255,255,0.85); margin-bottom: var(--space-3); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: var(--space-2); }
.footer-links a { color: rgba(255,255,255,0.55); text-decoration: none; font-size: 0.85rem; transition: color var(--duration-normal) var(--ease-out); }
.footer-links a:hover { color: var(--brand-clay-light); }
.footer-social { display: flex; gap: var(--space-3); }
.footer-social-link {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full); background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.65); text-decoration: none;
    transition: all var(--duration-normal) var(--ease-out);
}
.footer-social-link:hover { background: var(--brand-clay); color: var(--text-on-brand); }
.footer-social-link svg { width: 18px; height: 18px; fill: currentColor; }
.footer-divider { border: none; height: 1px; background: rgba(255,255,255,0.08); margin: var(--space-6) 0; }
.footer-copyright { text-align: center; font-size: 0.8rem; color: rgba(255,255,255,0.4); }
.footer-icp { text-align: center; font-size: 0.75rem; color: rgba(255,255,255,0.45); }
.footer-icp a { transition: color 0.2s; }
.footer-icp a:hover { color: rgba(255,255,255,0.8); }

/* ============================================================
   FORMS & AUTH
   ============================================================ */
.form-control {
    border: 1.5px solid var(--border-default); border-radius: var(--radius-sm);
    padding: 0.65rem 1rem; font-family: var(--font-body); font-size: var(--text-body);
    color: var(--text-primary); background: var(--surface-card);
    transition: all var(--duration-normal) var(--ease-out);
}
.form-control:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(212,165,116,0.15); outline: none; }
.form-label { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 0.9rem; margin-bottom: var(--space-2); }
.form-text { color: var(--text-secondary); font-size: var(--text-caption); margin-top: var(--space-1); }

.auth-card {
    background: var(--surface-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-medium);
}
.auth-card-heading { font-family: var(--font-heading); font-size: 1.4rem; font-weight: var(--weight-bold); text-align: center; margin-bottom: var(--space-6); }
.auth-field { margin-bottom: var(--space-4); }
.auth-submit-row { margin-top: var(--space-6); text-align: center; }
.auth-footer-text { text-align: center; margin-top: var(--space-5); font-size: var(--text-small); color: var(--text-secondary); }
.auth-link { color: var(--brand-clay-dark); font-weight: var(--weight-semibold); text-decoration: none; }
/* 字段下面那行小字提示（如「验证码 10 分钟内有效」） */
.auth-field-hint {
    margin-top: var(--space-2);
    font-size: var(--text-caption);
    color: var(--text-secondary);
    line-height: var(--leading-normal, 1.6);
}
.auth-field-hint a { color: var(--brand-clay-dark); font-weight: var(--weight-semibold); }

.alert-error {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); background: var(--feedback-error-bg);
    border: 1px solid rgba(200,76,76,0.15); border-radius: var(--radius-sm);
    color: var(--feedback-error); font-size: var(--text-small);
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
    position: fixed; bottom: 32px; right: 32px; z-index: var(--z-toast);
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-clay), var(--brand-clay-dark));
    color: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-strong);
    opacity: 0; transform: translateY(20px);
    transition: all var(--duration-normal) var(--ease-out);
    pointer-events: none;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.back-to-top svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.5; fill: none; }

/* ============================================================
   PAGINATION
   ============================================================ */
.diary-pagination { margin-top: var(--space-10); }
.diary-pagination-list { display: flex; align-items: center; justify-content: center; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.diary-pagination-link {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 0.5rem 1rem; border-radius: var(--radius-sm);
    font-size: var(--text-small); font-weight: var(--weight-semibold);
    color: var(--text-secondary); text-decoration: none;
    transition: all var(--duration-normal) var(--ease-out);
}
.diary-pagination-link:hover { color: var(--brand-clay-dark); background: var(--surface-hover); }
.diary-pagination-link--active { color: var(--text-on-brand); background: linear-gradient(135deg, var(--brand-clay), var(--brand-clay-dark)); }

/* ============================================================
   FADE-IN ANIMATION
   ============================================================ */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.fade-in-delay-1 { transition-delay: 0.1s; }
.fade-in-delay-2 { transition-delay: 0.2s; }
.fade-in-delay-3 { transition-delay: 0.3s; }
.fade-in-delay-4 { transition-delay: 0.4s; }
.fade-in-delay-5 { transition-delay: 0.5s; }

/* ============================================================
   PAGE HEADER / SECTION
   ============================================================ */
.page-header { text-align: center; margin-bottom: var(--space-8); }
.page-header-title { font-size: var(--text-section-title); font-weight: var(--weight-bold); margin-bottom: var(--space-2); }
.page-header-subtitle { color: var(--text-secondary); font-size: 1rem; }
.section-padding { padding: var(--space-20) 0; }
.section-padding-sm { padding: var(--space-12) 0; }
.section-padding-lg { padding: var(--space-24) 0; }
.bg-surface-hover { background: var(--surface-hover); }

/* ============================================================
   ABOUT / BREED / FEATURE CARDS
   ============================================================ */
.breed-info-card, .feature-card {
    background: var(--surface-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); padding: var(--space-6);
    text-align: center; box-shadow: var(--shadow-soft);
    transition: all var(--duration-normal) var(--ease-out); height: 100%;
}
.breed-info-card:hover, .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-medium); border-color: var(--brand-clay-light); }
.breed-info-icon, .feature-icon {
    width: 56px; height: 56px; margin: 0 auto var(--space-4);
    color: var(--brand-clay); display: flex; align-items: center; justify-content: center;
    background: var(--surface-hover); border-radius: 50%; padding: var(--space-3);
}

/* ============================================================
   PET DETAIL
   ============================================================ */
.pet-detail-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.pet-detail-image { width: 100%; max-height: 500px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-medium); }
.pet-detail-name { font-family: var(--font-heading); font-size: clamp(1.8rem,4vw,2.5rem); font-weight: var(--weight-extrabold); }
.pet-breed-tag { display: inline-block; padding: 0.3rem 1rem; border-radius: var(--radius-full); background: var(--brand-clay-light); color: var(--brand-clay-dark); font-size: var(--text-small); font-weight: var(--weight-semibold); }
.pet-info-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-hover); border-radius: var(--radius-sm); }
.pet-info-item { display: flex; align-items: center; gap: var(--space-3); }
.pet-info-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--surface-card); border-radius: var(--radius-sm); color: var(--brand-clay); flex-shrink: 0; }
.detail-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); }
.detail-gallery-item { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; cursor: pointer; box-shadow: var(--shadow-soft); }

/* ============================================================
   PROFILE / CONTACT
   ============================================================ */
.profile-layout { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-8); align-items: start; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }

/* ============================================================
   DIARY FORM / DELETE / SUCCESS
   ============================================================ */
.diary-form-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8); box-shadow: var(--shadow-medium); }
.diary-form-field { margin-bottom: var(--space-5); }
.diary-form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.diary-delete-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; box-shadow: var(--shadow-medium); }
.success-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-10) var(--space-6); box-shadow: var(--shadow-medium); text-align: center; }

/* ============================================================
   MOOD / WEATHER PICKERS
   ============================================================ */
.mood-picker, .weather-picker { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mood-picker-option, .weather-picker-option {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0.5rem 1rem; border-radius: var(--radius-full);
    border: 1.5px solid var(--border-default); background: var(--surface-page);
    cursor: pointer; transition: all var(--duration-normal) var(--ease-out);
}
.mood-picker-option:hover, .weather-picker-option:hover { border-color: var(--brand-clay-light); background: var(--surface-hover); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
    .pet-detail-layout, .profile-layout, .contact-layout { grid-template-columns: 1fr; }
    .navbar-collapse { background: var(--surface-card); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-3); box-shadow: var(--shadow-medium); max-height: 80vh; overflow-y: auto; }
}
@media (max-width: 767px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
    .diary-card-footer, .note-card-footer { flex-direction: column; align-items: flex-start; }
    .diary-toolbar, .note-toolbar { flex-direction: column; align-items: flex-start; }
    .hero-section { padding: var(--space-12) 0 var(--space-8); }
}
@media (max-width: 576px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
    .auth-card { padding: var(--space-6) var(--space-4); }
    .back-to-top { bottom: 20px; right: 20px; width: 42px; height: 42px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .navbar-lafei, .footer-lafei, .back-to-top, .nav-spacer { display: none !important; }
}

/* ============================================================
   博文详情
   ============================================================ */
.blog-post { max-width: 760px; margin: 0 auto; padding: var(--space-12) var(--space-4); }
.blog-back { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); text-decoration: none; font-size: var(--text-small); margin-bottom: var(--space-8); transition: color .2s; }
.blog-back:hover { color: var(--brand-clay); }
.blog-header { margin-bottom: var(--space-8); }
.blog-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
.blog-title { font-family: var(--font-heading); font-size: clamp(1.8rem,4vw,2.6rem); font-weight: 800; line-height: 1.3; color: var(--text-primary); margin: 0 0 var(--space-4); }
.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-small); }
.blog-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.blog-meta-divider { width: 3px; height: 3px; border-radius: 50%; background: var(--border-default); }
.blog-meta-edited { font-style: italic; opacity: .7; }
.blog-actions { display: flex; gap: var(--space-3); margin-bottom: var(--space-8); }
.blog-body { font-size: 1.1rem; line-height: 2; color: var(--text-primary); }
.blog-body h1 { font-size: 1.8rem; margin: 2rem 0 1rem; font-weight: 700; }
.blog-body h2 { font-size: 1.5rem; margin: 1.8rem 0 1rem; font-weight: 700; }
.blog-body h3 { font-size: 1.25rem; margin: 1.5rem 0 .8rem; font-weight: 700; }
.blog-body p { margin: 0 0 1.2rem; }
.blog-body img { max-width: 100%; border-radius: var(--radius-md); margin: 1.5rem 0; }
.blog-body blockquote { border-left: 4px solid var(--brand-clay-light); margin: 1.5rem 0; padding: var(--space-4) var(--space-6); background: var(--surface-hover); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-style: italic; color: var(--text-secondary); }
.blog-body ul, .blog-body ol { margin: 0 0 1.2rem; padding-left: 1.5rem; }
.blog-body li { margin-bottom: .5rem; }
.blog-body pre { background: #2d2d2d; color: #f8f8f2; padding: var(--space-6); border-radius: var(--radius-md); overflow-x: auto; margin: 1.5rem 0; font-size: .9rem; line-height: 1.6; }
.blog-body code { background: var(--surface-hover); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.blog-body pre code { background: none; padding: 0; }
.blog-body a { color: var(--brand-clay-dark); text-decoration: underline; }
.blog-footer { margin-top: var(--space-16); padding-top: var(--space-10); border-top: 1px solid var(--border-default); }
.blog-signature { display: flex; align-items: center; gap: var(--space-4); }
.blog-signature-avatar { width: 56px; height: 56px; color: var(--brand-clay); flex-shrink: 0; }
.blog-signature-avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.blog-signature-name { font-weight: 700; font-family: var(--font-heading); color: var(--text-primary); }
.blog-signature-bio { font-size: var(--text-small); color: var(--text-secondary); }
.blog-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--border-default); }
.blog-nav-link { display: flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); text-decoration: none; font-size: var(--text-small); padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); transition: all .2s; }
.blog-nav-link:hover { border-color: var(--brand-clay); color: var(--brand-clay); }
.blog-nav-next { justify-content: flex-end; text-align: right; }
@media (max-width: 767px) { .blog-post { padding: var(--space-6) var(--space-4); } .blog-body { font-size: 1rem; } .blog-nav { grid-template-columns: 1fr; } }

.card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; cursor: pointer; }
.card-link:hover { text-decoration: none; color: inherit; }
.nav-avatar-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand-clay-light); display: inline-block; vertical-align: middle; }
.avatar-preview { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border-default); }
.gallery-delete-btn { position: absolute; top: 8px; right: 8px; z-index: 10; width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(255,255,255,.85); color: var(--feedback-error); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; }
.gallery-item:hover .gallery-delete-btn { opacity: 1; }
.gallery-delete-btn:hover { background: var(--feedback-error); color: #fff; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); }
.home-grid-featured { grid-column: span 2; grid-row: span 2; }
.home-grid-featured .diary-card-inner { padding: var(--space-6); }
.home-grid-featured .diary-card-title { font-size: 1.5rem; }
.home-grid-featured .diary-card-excerpt { font-size: 1rem; -webkit-line-clamp: 3; }
.home-grid-notes { grid-template-columns: 1fr 1fr 1fr; }
.diary-card-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: var(--space-3); }
.home-more { text-align: center; margin-top: var(--space-10); }
.note-card-featured .note-card-inner { padding: var(--space-5); }
.note-card-featured .note-card-title { font-size: 1.35rem; }
.note-card-featured .note-card-excerpt { font-size: 0.95rem; -webkit-line-clamp: 3; }
.gallery-upload-form { display: flex; gap: var(--space-3); margin-top: var(--space-4); justify-content: center; flex-wrap: wrap; }
.gallery-upload-select { padding: var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); font-size: var(--text-small); cursor: pointer; min-width: 160px; }
.gallery-upload-caption { padding: var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--surface-card); color: var(--text-primary); font-size: var(--text-small); flex: 1; min-width: 180px; }
.gallery-upload-select:focus, .gallery-upload-caption:focus { outline: none; border-color: var(--brand-clay); box-shadow: var(--shadow-focus); }
@media (max-width: 991px) { .home-grid { grid-template-columns: 1fr 1fr; } .home-grid-featured { grid-column: span 2; grid-row: span 1; } .home-grid-featured .diary-card-inner { padding: var(--space-5); } .home-grid-featured .diary-card-title { font-size: 1.25rem; } }
@media (max-width: 767px) { .home-grid { grid-template-columns: 1fr; } .home-grid-featured { grid-column: span 1; } .section-padding { padding: var(--space-8) 0; } .section-padding-sm { padding: var(--space-6) 0; } .section-padding-lg { padding: var(--space-10) 0; } .home-grid-notes { grid-template-columns: 1fr; } .note-card-featured .note-card-inner { padding: var(--space-4); } .note-card-featured .note-card-title { font-size: 1.2rem; } }

.messages-alert { border-radius: var(--radius-sm); font-size: var(--text-small); }
.section-divider { display: flex; justify-content: center; align-items: center; padding: var(--space-6) 0; }
.section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--border-default), transparent); max-width: 200px; }
.section-divider-icon { display: flex; gap: var(--space-1); margin: 0 var(--space-3); color: var(--brand-clay-light); }

/* ============================================================
   RESTORED: Hero, About, Contact, Cards, Empty states, etc.
   ============================================================ */
.hero-silhouette { position: absolute; bottom: -20px; right: -40px; width: 300px; height: 300px; opacity: .06; pointer-events: none; }
.hero-silhouette svg { width: 100%; height: 100%; fill: var(--brand-clay); }
.about-image-placeholder { width: 100%; max-width: 350px; aspect-ratio: 1; margin: 0 auto; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--brand-clay-light), var(--brand-moss-light), var(--surface-hover)); display: flex; align-items: center; justify-content: center; border: 6px solid var(--surface-card); box-shadow: var(--shadow-medium); }
.about-image-placeholder svg { width: 80%; height: 80%; color: var(--brand-clay); opacity: .5; }
.about-story { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-8); }
.about-story p { margin-bottom: var(--space-4); }
.feature-title { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: 1.1rem; margin: var(--space-3) 0 var(--space-2); }
.feature-text { color: var(--text-secondary); font-size: var(--text-small); line-height: var(--leading-relaxed); margin: 0; }
.diary-card-author, .note-card-author { font-size: var(--text-caption); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; display: flex; align-items: center; gap: 4px; }
.diary-card-date, .note-card-date { font-size: var(--text-caption); color: var(--text-secondary); white-space: nowrap; flex-shrink: 0; }
.diary-empty { text-align: center; padding: var(--space-12) var(--space-4); color: var(--text-secondary); }
.diary-form { width: 100%; }
.pet-avatar-placeholder { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, var(--brand-clay-light), var(--brand-moss-light)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--brand-clay); }
.pet-avatar-placeholder svg, .gallery-placeholder svg { width: 50%; height: 50%; opacity: .6; }
.pet-avatar-sm { max-width: 200px; }
.pet-detail-image-placeholder { width: 100%; max-width: 300px; aspect-ratio: 1; margin: 0 auto; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--brand-clay-light), var(--brand-moss-light)); display: flex; align-items: center; justify-content: center; border: 6px solid var(--surface-card); box-shadow: var(--shadow-medium); }
.pet-info-label { font-size: var(--text-small); color: var(--text-secondary); }
.pet-info-value { font-weight: var(--weight-semibold); }
.gallery-placeholder { width: 100%; height: 100%; background: var(--surface-hover); display: flex; align-items: center; justify-content: center; color: var(--brand-clay); }
.gallery-upload-zone { border: 2px dashed var(--border-default); border-radius: var(--radius-lg); padding: var(--space-10) var(--space-6); text-align: center; cursor: pointer; transition: border-color .25s, background .25s; margin-bottom: var(--space-10); background: var(--surface-card); }
.gallery-upload-zone:hover, .gallery-upload-zone.dragover { border-color: var(--brand-clay); background: rgba(212,165,116,.06); }
.gallery-upload-icon { color: var(--brand-clay); opacity: .65; margin-bottom: var(--space-3); }
.gallery-upload-text { color: var(--text-secondary); margin: 0; font-size: var(--text-body); }
.gallery-upload-hint { color: var(--text-secondary); opacity: .6; font-size: var(--text-small); margin: var(--space-2) 0 0; }
.gallery-upload-inner { max-width: 500px; margin: 0 auto; }
.gallery-upload-progress { margin-top: var(--space-4); text-align: left; max-width: 400px; margin-left: auto; margin-right: auto; }
.upload-progress-item { margin-bottom: var(--space-2); font-size: var(--text-small); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-2); }
.upload-progress-bar { height: 4px; background: var(--brand-clay); border-radius: 2px; width: 0; transition: width .3s; min-width: 0; flex-shrink: 0; }
.contact-section-heading { font-family: var(--font-heading); font-size: 1.5rem; font-weight: var(--weight-bold); margin-bottom: var(--space-6); }
.contact-info-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-8); height: 100%; }
.contact-info-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.contact-info-item + .contact-info-item { border-top: 1px solid var(--border-subtle); }
.contact-info-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--surface-hover); border-radius: var(--radius-sm); color: var(--brand-clay); flex-shrink: 0; }
.contact-info-icon svg { width: 18px; height: 18px; }
.contact-info-label { font-size: var(--text-small); color: var(--text-secondary); width: 50px; flex-shrink: 0; }
.contact-info-value { font-weight: var(--weight-medium); color: var(--text-primary); }
.contact-note-card { background: var(--surface-hover); border-radius: var(--radius-sm); padding: var(--space-4); text-align: center; }
.contact-note-icon { color: var(--brand-clay); opacity: .5; }
.form-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-8); height: 100%; }
.auth-form { width: 100%; }
.profile-info-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-8); }
.profile-edit-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-8); }
.profile-display-name { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: 1.5rem; }
.profile-username { color: var(--text-secondary); font-size: var(--text-small); }
.profile-bio { color: var(--text-primary); margin-top: var(--space-3); }
.profile-bio-empty { color: var(--text-secondary); font-style: italic; }
.profile-meta { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.profile-meta-item { font-size: var(--text-small); color: var(--text-secondary); }
.profile-logout-area { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); }
.btn-logout { display: inline-flex; align-items: center; gap: var(--space-2); padding: .6rem 1.5rem; border: 1.5px solid var(--feedback-error); border-radius: var(--radius-full); color: var(--feedback-error); background: transparent; font-family: var(--font-heading); font-weight: var(--weight-semibold); cursor: pointer; transition: all .2s; text-decoration: none; font-size: var(--text-small); }
.btn-logout:hover { background: var(--feedback-error); color: #fff; }
.required-asterisk { color: var(--feedback-error); margin-left: 2px; }
.user-avatar-icon { display: inline-flex; align-items: center; width: 28px; height: 28px; margin-right: 4px; }
.user-avatar-icon svg { width: 28px; height: 28px; color: var(--brand-clay); }
.note-toolbar-left, .note-toolbar-right { display: flex; align-items: center; gap: var(--space-3); }
@media (max-width: 767px) {
    .hero-silhouette { width: 200px; height: 200px; right: -20px; }
    .about-image-placeholder { max-width: 250px; }
}