:root {
    --primary-orange: #FF7A45;
    --primary-green: #34C759;
    --primary-purple: #7b7bfe;
    --bg-gray: #F9F9F9;
    --text-main: #2D2D2D;
    --text-sub: #8E8E93;
    --card-bg: #ffffff;
    --radius: 40px;
    --shadow: 0 20px 50px rgba(0,0,0,0.1);
    
    /* Highlight Colors */
    --bg-blue: #E1F0FF;
    --bg-green: #E3F8E5;
    --bg-yellow: #FFF8C4;
    --border-blue: #007AFF;
    --border-green: #34C759;
    --border-yellow: #FFCC00;
    --border-purple: #7b7bfe;
    --border-pink: #ff4d9d;
}

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Patrick+Hand&display=swap');

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: #222;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.app-container {
    width: 375px;
    height: 812px;
    background-color: var(--card-bg);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 40px;
    box-shadow: var(--shadow);
    margin: 20px auto; /* Center on desktop */
}

@media (max-width: 450px) {
    .app-container {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        margin: 0;
        box-shadow: none;
    }
}

.phone-frame {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Status Bar */
.status-bar {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 14px;
    color: var(--text-main);
    z-index: 10;
    background: transparent;
}

/* --- Home Page Styles --- */
.home-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    position: relative;
    padding-top: 0; /* Status bar handles top spacing */
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding: 0 5px;
    flex-wrap: nowrap;
}

.top-nav-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.progress-container {
    width: 120px;
    height: 12px;
    background: #F0F0F0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #EEE;
    flex-shrink: 1;
    min-width: 80px;
}

.progress-bar {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, #A8EDEA 0%, #FED6E3 100%);
}

.level-tag {
    font-size: 12px;
    color: #666;
    margin-left: 5px;
}

.home-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.streak-tag {
    background: #FFF5E6;
    color: var(--primary-orange);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 4px rgba(255, 122, 69, 0.1);
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-text {
    text-align: center;
    margin-top: 60px;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text-main);
}

.highlight {
    color: var(--primary-orange);
    position: relative;
    display: inline-block;
}

.highlight::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background: radial-gradient(ellipse at center, var(--primary-orange) 0%, transparent 70%);
    border-radius: 50%;
}

.speech-bubble {
    margin: 40px auto 20px;
    background: white;
    padding: 12px 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    font-size: 14px;
    color: #888;
    position: relative;
    border: none;
}

.main-circle {
    width: 260px;
    height: 260px;
    /* Default Color */
    background: linear-gradient(135deg, #D1F2F2 0%, #E3E3FF 100%);
    box-shadow: inset 10px 10px 30px rgba(255,255,255,0.6), 
                0 20px 40px rgba(123, 97, 255, 0.2);
    /* Default Shape */
    border-radius: 45% 55% 50% 50% / 50% 45% 55% 50%;
    
    margin: 20px auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: float 6s ease-in-out infinite;
    text-decoration: none; /* For when it's an <a> tag */
}

/* Face Container */
.face {
    position: relative;
    width: 140px; /* Slightly larger for 260px circle */
    height: 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    pointer-events: none; /* Let clicks pass through to link */
}

/* Eye Common Styles */
.eye {
    width: 28px;
    height: 28px;
    background: #7B61FF;
    border-radius: 50%;
    position: relative;
    transition: all 0.3s ease;
}

/* Mouth Common Styles */
.mouth {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 12px;
    border-bottom: 5px solid #7B61FF;
    border-radius: 0 0 24px 24px;
    transition: all 0.3s ease;
}

/* --- State 1: Default --- */
.main-circle.state-default .eye {
    animation: blink 4s infinite;
}

/* --- State 2: Happy --- */
.main-circle.state-happy {
    background: linear-gradient(135deg, #FFF6B7 0%, #F6416C 100%);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    box-shadow: 0 20px 40px rgba(246, 65, 108, 0.3);
    transform: scale(1.02);
}
.main-circle.state-happy .eye {
    background: transparent;
    height: 18px;
    border-top: 5px solid #FFF;
    border-radius: 50% 50% 0 0;
    margin-top: 12px;
}
.main-circle.state-happy .mouth {
    width: 48px;
    height: 24px;
    background: #FFF;
    border: none;
    border-radius: 0 0 48px 48px;
    bottom: 0;
}

/* --- State 3: Excited --- */
.main-circle.state-excited {
    background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: bounce 0.5s infinite alternate; 
}
.main-circle.state-excited .eye {
    background: transparent;
    width: 36px;
    height: 36px;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: #D4145A;
}
.main-circle.state-excited .mouth {
    width: 36px;
    height: 18px;
    border-radius: 50%;
    background: #D4145A;
    border: none;
    bottom: 18px;
}

/* --- State 4: Sleepy --- */
.main-circle.state-sleepy {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    filter: grayscale(0.2);
    border-radius: 70% 30% 80% 20% / 20% 90% 10% 90%;
    height: 200px; /* Squish */
    width: 280px; /* Widen */
    margin-top: 50px;
}
.main-circle.state-sleepy .eye {
    height: 5px;
    width: 36px;
    background: #555;
    border-radius: 2px;
}
.main-circle.state-sleepy .mouth {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 3px solid #555;
    background: transparent;
    bottom: 18px;
}
/* Zzz Bubble */
.zzz {
    position: absolute;
    right: 30px;
    top: -30px;
    font-size: 28px;
    font-weight: bold;
    color: #888;
    opacity: 0;
    pointer-events: none;
}
.main-circle.state-sleepy .zzz {
    animation: snore 2s infinite;
}

/* --- State 5: Confused --- */
.main-circle.state-confused {
    background: linear-gradient(135deg, #E0C3FC 0%, #8EC5FC 100%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transform: rotate(-15deg);
}
.main-circle.state-confused .eye.left {
    width: 40px;
    height: 40px;
    transform: translateY(-5px);
    background: #fff;
    border: 5px solid #6c5ce7;
}
.main-circle.state-confused .eye.right {
    width: 18px;
    height: 18px;
    background: #6c5ce7;
}
.main-circle.state-confused .mouth {
    width: 18px;
    height: 5px;
    background: #6c5ce7;
    border: none;
    border-radius: 2px;
    transform: translateX(-50%) rotate(10deg);
}

/* Animations */
@keyframes bounce {
    from { transform: translateY(0) scale(1); }
    to { transform: translateY(-10px) scale(1.05); }
}

@keyframes bounce-in {
    0% { transform: scale(0.8); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(-3deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 69, 0.4); }
    50% { box-shadow: 0 0 0 15px rgba(255, 122, 69, 0); }
}

.main-circle.click-animation {
    animation: bounce-in 0.4s ease-out, wiggle 0.5s ease-in-out 0.2s;
}

.main-circle:hover {
    animation: pulse-glow 1.5s infinite;
}

@keyframes blink {
    0%, 45%, 55%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.1); }
}

@keyframes snore {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    50% { opacity: 1; transform: translate(10px, -20px) scale(1); }
    100% { opacity: 0; transform: translate(20px, -40px) scale(1.2); }
}

.bottom-actions {
    margin-top: auto;
    display: flex;
    justify-content: space-around;
    padding-bottom: 40px;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #E5F3F3;
    transition: transform 0.2s;
}

.icon-circle:active { transform: scale(0.95); }
.icon-circle.alt { background: #F3F3F7; }

.action-label {
    font-size: 12px;
    font-weight: 600;
    color: #333;
}

.home-indicator {
    width: 120px;
    height: 5px;
    background: #333;
    border-radius: 10px;
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.status-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    border: 1px solid rgba(0,0,0,0.1);
}
.status-ok {
    background: #e6ffed;
    color: #05620d;
    border-color: #b5f2c0;
}
.status-bad {
    background: #fff5f5;
    color: #9b1c1c;
    border-color: #f7c5c5;
}

/* --- Analysis/Record Page Styles --- */
.vision-layer {
    position: relative;
    flex: 1.2;
    background-color: #333;
    background-size: cover;
    background-position: center;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    overflow: hidden;
    transition: background-image 0.3s ease;
}

.header-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 20px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 10;
    pointer-events: none;
}

.back-btn-overlay {
    width: 40px; height: 40px;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 20px;
    pointer-events: auto; cursor: pointer;
    text-decoration: none;
}

.date-group { text-align: right; color: white; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.date-day { font-family: 'Georgia', serif; font-size: 32px; font-style: italic; font-weight: 700; line-height: 1; }
.date-year { font-size: 12px; opacity: 0.9; margin-top: 2px; display: block;}

.tag {
    position: absolute;
    background: #FFFFFF;
    padding: 8px 14px;
    border-radius: 20px;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 14px; font-weight: 600;
    color: var(--primary-orange);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 5;
    user-select: none;
}

.floating-tag {
    transform: translate(-50%, -50%);
}

.tag.used {
    background: var(--primary-orange);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.4);
}
.tag.used svg { stroke: white; fill: none; }

.floating-tag.used {
    transform: translate(-50%, -50%) scale(1.05);
}

.moment-badge {
    position: absolute; bottom: 24px; left: 24px;
    background: rgba(50, 50, 50, 0.7); backdrop-filter: blur(10px);
    color: white; padding: 6px 12px; border-radius: 8px;
    font-size: 12px; font-weight: 500; pointer-events: none;
}

.composition-layer {
    flex: 1;
    background: #fff;
    padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
    z-index: 2;
}

.title-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding-left: 10px; border-left: 3px solid var(--primary-orange);
    line-height: 1;
}
.section-title { font-size: 13px; color: #333; font-weight: 600; }
.want-more { background: #EFEFF4; color: #8E8E93; font-size: 11px; padding: 4px 10px; border-radius: 12px; }

.chips-wrapper { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }

.chip {
    background: #F2F2F7;
    border: 1px solid transparent;
    padding: 8px 14px; border-radius: 16px;
    font-size: 12px; color: var(--text-main);
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.chip span { color: var(--text-sub); font-size: 11px; margin-left: 2px; }

.chip.used {
    background: var(--primary-orange);
    color: white;
    border-color: var(--primary-orange);
}
.chip.used span { color: rgba(255,255,255,0.8); }

.input-area {
    flex: 1;
    border: 1px solid #E5E5EA; border-radius: 20px;
    padding: 16px; display: flex; flex-direction: column;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    position: relative;
}

#editor {
    flex: 1; border: none; outline: none;
    font-size: 15px; line-height: 1.6; color: #333;
    overflow-y: auto; white-space: pre-wrap;
}
#editor[placeholder]:empty:before {
    content: attr(placeholder);
    color: #C7C7CC; 
    cursor: text;
}

.highlight-word {
    color: var(--primary-orange);
    font-weight: 600;
    background: rgba(255, 107, 0, 0.08);
    padding: 2px 6px; border-radius: 6px; margin: 0 2px;
    display: inline-block;
}

.input-footer {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-top: 10px;
}
.btn-done {
    background: var(--primary-orange); color: white; border: none;
    padding: 10px 24px; border-radius: 20px;
    font-weight: 600; font-size: 14px;
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.3); cursor: pointer;
}

/* Diary Suggestions Vertical Layout */
.diary-suggestions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding-bottom: 16px;
}

.suggestion-chip {
    width: 100%;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    display: block;
    border-radius: 16px;
    padding: 12px 14px; /* Reduced padding */
    background: #fff;
    border: 1px solid #f0f0f0;
    border-left: 4px solid #B39DDB;
    color: #555;
    line-height: 1.35; /* Reduced line-height */
    font-size: 12px; /* Reduced font-size */
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.suggestion-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(123, 123, 254, 0.1);
    border-color: #d1c4e9;
}

.suggestion-chip:active {
    transform: scale(0.99);
    background: #fafafa;
}

.suggestion-chip span {
    display: inline;
}

/* Journal Paper Style */
.journal-paper-container {
    background-color: #fffdf6; /* Warm paper */
    background-image: linear-gradient(transparent 23px, #e8e8e8 23px, #e8e8e8 24px, transparent 24px);
    background-size: 100% 24px;
    background-attachment: local;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    border: 1px solid #f2efde;
}

/* Red Margin Line */
.journal-paper-container::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 40px;
    width: 1px;
    background-color: #ffccbc; /* Pink/Red margin */
    z-index: 1;
}

.journal-content-area {
    width: 100%;
    min-height: 200px;
    padding: 0 20px 30px 60px; /* Left padding clears margin line */
    line-height: 24px; /* Matches background grid */
    font-family: 'Patrick Hand', cursive, sans-serif;
    font-size: 16px;
    color: #4e342e;
    border: none;
    background: transparent;
    outline: none;
    resize: none;
    display: block;
}

/* Textarea specific overrides */
textarea.journal-content-area {
    height: 240px; /* Fixed height for editor */
}

/* Placeholder styling */
.journal-content-area::placeholder {
    color: #bcaaa4;
    opacity: 0.7;
}

.journal-date-tag {
    position: absolute;
    top: -10px;
    right: 20px;
    background: #e0f2f1;
    color: #00897b;
    padding: 14px 12px 4px;
    border-radius: 0 0 8px 8px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    z-index: 2;
}


/* Share Button */
.share-btn-new {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f0f2f5;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.share-btn-new:hover {
    background: #e4e6eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    color: var(--primary-purple);
}

.share-btn-new:active {
    transform: scale(0.95);
}

/* Modal Styles */
.modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 50;
    display: none;
    justify-content: center;
    align-items: flex-end;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 20px;
}
.modal-overlay.active { display: flex; opacity: 1; }

.modal-card {
    background: white;
    width: 100%;
    max-width: 380px;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    margin-bottom: 40px;
}
.modal-overlay.active .modal-card { transform: translateY(0); }

/* 确保单词卡片弹层永远在 moment 详情卡片之上 */
#mbModal {
    z-index: 90;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#mbModal .modal-card {
    margin-bottom: 0;
}

/* Premium Moment detail overlay (shared across pages, originally from momentsbook) */
.mb-moment-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(26px);
    background: #222;
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.mb-moment-overlay.active {
    display: flex;
    opacity: 1;
}

.mb-moment-overlay .card-main {
    width: 375px;
    height: 812px;
    background-color: var(--card-bg);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 40px;
    box-shadow: var(--shadow);
    margin: 20px auto 0 auto;
    padding: 0;
}

@media (max-width: 450px) {
    .mb-moment-overlay .card-main {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        margin: 0;
        box-shadow: none;
    }
}
.mb-moment-overlay .ambient-bg {
    position: absolute;
    inset: 0;
    background: #222;
    filter: none;
    opacity: 1;
    z-index: 0;
}
.mb-moment-overlay .premium-header {
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: auto;
    padding: 20px 20px 0;
    box-sizing: border-box;
}
.mb-moment-overlay .nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    color: #666;
}
.mb-moment-card-detail {
    max-width: 375px;
    width: 100%;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    pointer-events: auto;
}
.mb-moment-overlay .moment-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    box-sizing: border-box;
}
.mb-moment-overlay .card-main::before {
    content: none;
}
.mb-moment-overlay .photo-frame {
    width: 100%;
    aspect-ratio: 4/5;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 8px 25px rgba(0,0,0,0.35);
    border: 4px solid #ffffff;
    background: #ffffff;
}
.mb-moment-overlay .photo-inner {
    width: 100%;
    height: 100%;
    background-size: 112% 112%;
    background-position: center;
    transform-origin: center;
    transition: transform 0.3s ease-out;
}
.md-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.md-photo-card {
    width: 280px;
    height: 420px;
    margin: 18px auto 0 auto;
    position: relative;
    transform-style: preserve-3d;
    transform: rotate(-2.2deg);
    transition: transform 0.2s ease;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 14px 28px rgba(0,0,0,0.16);
    border: 2px solid #fff;
}
.md-photo-card:hover {
    transform: rotate(-1deg);
}

.md-photo-card .photo-frame {
    width: 100%;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    position: relative;
}

.md-photo-card .photo-inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}
.md-date-stamp {
    top: 12px;
    right: 16px;
    font-size: 16px;
    color: #ffffff;
    text-shadow: 0 3px 6px rgba(0,0,0,0.55);
    letter-spacing: 0.5px;
}
.md-moment-badge {
    bottom: 14px;
    left: 16px;
    font-size: 11px;
    background: rgba(0,0,0,0.6);
}
.md-words-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding-top: 8px;
}
.md-word-chip {
    border: 1.5px solid rgba(255, 138, 76, 0.65);
    background: #fffaf6;
    border-radius: 22px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #f97316;
    box-shadow: 0 6px 14px rgba(255, 153, 102, 0.18);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.md-word-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f97316;
}
.md-word-chip:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(255, 153, 102, 0.16);
}
.md-word-chip:nth-child(1) {
    transform: rotate(-5deg);
}
.md-word-chip:nth-child(2) {
    transform: rotate(3deg);
}
.md-word-chip:nth-child(3) {
    transform: rotate(-2deg);
}
.md-word-chip:nth-child(1):active,
.md-word-chip:nth-child(2):active,
.md-word-chip:nth-child(3):active {
    transform: translateY(1px) scale(0.98);
}
.md-text-card {
    margin: 12px auto 0 auto;
    width: 88%;
    background: #fff;
    border-radius: 20px;
    padding: 18px 18px 14px;
    box-shadow: 0 16px 32px rgba(255, 159, 110, 0.18);
    border: 1.5px solid rgba(255, 159, 110, 0.65);
}
.md-text-body {
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
    margin: 0 0 10px 0;
    text-align: left;
}
.md-text-meta {
    font-size: 11px;
    color: #9ca3af;
    text-align: right;
}

.modal-top-action {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #8E8E93;
    cursor: pointer;
    user-select: none;
}

.modal-title {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 42px;
    color: var(--primary-orange);
    margin: 0 0 8px 0;
    line-height: 1;
}

.modal-phonetic {
    font-size: 14px; color: #8E8E93;
    margin-bottom: 24px;
    font-family: sans-serif;
}
.tape-effect {
    background-color: rgba(255,255,255,0.4);
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border-radius: 8px;
}
.badge-green {
    background: rgba(43, 238, 108, 0.20);
    color: #1b7c42;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.modal-def-title { font-weight: bold; font-size: 15px; color: #000; margin-bottom: 4px; }
.modal-def-detail { font-size: 14px; color: #333; line-height: 1.5; margin-bottom: 20px;}

.modal-section-label {
    font-size: 12px;
    color: var(--primary-orange);
    margin-bottom: 8px;
    font-weight: 500;
}

.modal-sentence-en {
    font-size: 14px;
    font-weight: 600;
    color: #1C1C1E;
    line-height: 1.4;
    margin-bottom: 4px;
}

.modal-sentence-cn {
    font-size: 12px;
    color: #8E8E93;
    line-height: 1.4;
    margin-bottom: 12px;
}

.wc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.wc-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 54px;
    color: var(--primary-orange);
    line-height: 1;
    margin-bottom: 6px;
}

.wc-phonetic {
    color: #999;
    font-size: 14px;
    font-family: sans-serif;
}

.heart-icon {
    font-size: 28px;
    color: #999;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s;
}

.heart-icon.active {
    color: #FF7A45;
    transform: scale(1.1);
}

.heart-icon:active {
    transform: scale(0.9);
}

.wc-definition {
    font-size: 16px;
    color: #333;
    margin-bottom: 25px;
    line-height: 1.6;
}

.wc-definition b {
    font-weight: 600;
}

.wc-section-title {
    color: var(--primary-orange);
    font-size: 14px;
    margin-bottom: 8px;
    margin-top: 20px;
}

.wc-example-en {
    font-size: 15px;
    color: #333;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
}

.wc-example-cn {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

.refine-page {
    background: var(--bg-gray);
}

.refine-header-bg {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.refine-header-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.1) 60%, var(--bg-gray) 95%);
}

.refine-header-nav {
    position: relative;
    z-index: 10;
    padding: 20px 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    color: white;
}

.refine-nav-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: white;
}

.refine-back-icon {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.refine-date-display {
    text-align: right;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.refine-date-main {
    font-family: 'Times New Roman', serif;
    font-size: 28px;
    font-weight: 700;
    font-style: italic;
}

.refine-date-sub {
    font-size: 12px;
    font-family: sans-serif;
    display: block;
    opacity: 0.9;
    margin-top: 2px;
}

.refine-scroll-container {
    flex: 1;
    z-index: 2;
    overflow-y: auto;
    padding: 20px;
    padding-top: 110px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    scrollbar-width: none;
}

.refine-scroll-container::-webkit-scrollbar {
    display: none;
}

.refine-user-text-card {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    outline: none;
    min-height: 150px;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

/* When dragging starts (Hint) */
.refine-user-text-card.drag-hint-active {
    border-color: var(--primary-orange);
    border-width: 2px;
    background-color: #FFF3E0; /* More visible light orange */
    border-style: dashed;
    box-shadow: 0 0 0 4px rgba(255, 122, 69, 0.1); /* Outer glow ring */
    transform: scale(1.01);
}

/* When hovering over editor (Active) */
.refine-user-text-card.drag-active {
    border-color: var(--primary-orange) !important;
    border-width: 3px !important;
    background-color: #FFE0B2 !important; /* Clearly darker orange */
    border-style: solid !important;
    box-shadow: 0 0 0 6px rgba(255, 122, 69, 0.25) !important; /* Stronger outer glow */
    transform: scale(1.02);
}

.refine-segment {
    border-radius: 4px;
    padding: 2px 4px;
    margin: 0 -2px;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.refine-seg-blue { background-color: var(--bg-blue); }
.refine-seg-green { background-color: var(--bg-green); }
.refine-seg-yellow { background-color: var(--bg-yellow); }

.refine-seg-purple { background-color: rgba(123, 123, 254, 0.18); }
.refine-seg-pink { background-color: rgba(255, 105, 180, 0.16); }

.audio-icon-row,
.refine-audio-icon-row {
    margin-top: 10px;
    opacity: 0.6;
}

.animate-change {
    animation: flash 0.4s ease-out;
}

.refine-feedback-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.refine-feedback-bubble {
    background: white;
    border: 1px solid #E5E5EA;
    padding: 12px 16px;
    border-radius: 16px;
    border-bottom-right-radius: 4px;
    font-size: 13px;
    color: var(--text-main);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.refine-ai-avatar {
    width: 40px;
    height: 40px;
    /* Remove old static styles */
    /* background: linear-gradient(135deg, #E0F7FA 0%, #E1F5FE 100%); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* font-size: 12px; color: #8E8E93; font-weight: bold; */
    position: relative; /* Ensure sprite positioning works */
}

/* Override sprite animations for refine page to be subtle */
.refine-ai-avatar.main-circle {
    margin: 0; /* Reset margin from main page style */
    box-shadow: inset 2px 2px 6px rgba(255,255,255,0.6), 0 4px 10px rgba(123, 97, 255, 0.2);
    /* Ensure it scales content */
    transform-origin: center;
}

/* Adjust face scaling for mini version */
.refine-ai-avatar .face {
    width: 20px;
    height: 12px;
}

.refine-ai-avatar .eye {
    width: 4px;
    height: 4px;
}

.refine-ai-avatar .mouth {
    width: 6px;
    height: 2px;
    border-bottom: 1px solid #7B61FF;
}

/* Mini Happy State */
.refine-ai-avatar.state-happy .eye {
    height: 3px;
    border-top: 1.5px solid #FFF;
    margin-top: 2px;
}
.refine-ai-avatar.state-happy .mouth {
    width: 8px;
    height: 4px;
    bottom: 0;
}

/* Mini Confused State */
.refine-ai-avatar.state-confused .eye.left {
    width: 6px;
    height: 6px;
    border: 1px solid #6c5ce7;
}
.refine-ai-avatar.state-confused .eye.right {
    width: 3px;
    height: 3px;
}
.refine-ai-avatar.state-confused .mouth {
    width: 4px;
    height: 1px;
}

.refine-page .recommendation-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 40px;
}

.refine-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 4px;
}

.refine-orange-line {
    width: 3px;
    height: 14px;
    background-color: var(--primary-orange);
    border-radius: 2px;
}

.refine-section-title {
    font-size: 13px;
    color: #555;
    font-weight: 500;
}

.refine-want-more {
    background: #E5E5EA;
    color: #8E8E93;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 12px;
}

.refine-page .save-btn {
    width: 100%;
    background: var(--primary-orange);
    color: white;
    border: none;
    padding: 18px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.25);
    margin-bottom: 40px;
}

.refine-knowledge-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 28px;
    color: var(--primary-orange);
    line-height: 1.1;
    margin-bottom: 10px;
}

.refine-knowledge-sub {
    font-size: 14px;
    color: #444;
    line-height: 1.6;
}

/* Profile L0 */
.profile-page {
    padding: 20px;
    background: #FDFCF8; /* Cream background from image */
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    scrollbar-width: none; /* Firefox */
}

.profile-page::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.profile-header-nav {
    padding: 10px 0;
    margin-bottom: 20px;
}
.back-icon {
    color: #666;
    display: inline-flex;
    padding: 8px;
    margin-left: -8px;
    cursor: pointer;
}

/* Top Section: Avatar + Name + Stats */
.profile-top-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.profile-avatar-container {
    position: relative;
}

.avatar-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(135deg, #FFD180, #FFAB91); /* Peach gradient border */
    position: relative;
}

.avatar-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    background: #fff;
}

.edit-avatar-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 24px;
    height: 24px;
    background: #4DB6AC; /* Teal/Green edit button */
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 0;
}

.profile-identity {
    flex: 1;
}

.profile-name-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.profile-name {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    line-height: 1.2;
}

.profile-name-input {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    border: none;
    border-bottom: 2px solid #4DB6AC;
    background: transparent;
    width: 150px;
    padding: 0;
    font-family: inherit;
}
.profile-name-input:focus {
    outline: none;
}

.edit-name-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
    opacity: 0.5;
}
.edit-name-btn:hover {
    color: #4DB6AC;
    opacity: 1;
}

.profile-streak {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.streak-dot {
    color: #4DB6AC;
    font-size: 8px;
}

.profile-stats-badges {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.stat-badge {
    background: #fff;
    border-radius: 20px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.stat-badge.level { color: #FF9800; }
.stat-badge.vocab { color: #4DB6AC; }

.stat-label {
    font-size: 9px;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.6;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 14px;
    font-weight: 800;
}

/* Energy Card */
.energy-card-new {
    background: #fff;
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
}

.energy-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.energy-icon {
    width: 28px;
    height: 28px;
    background: #E0F2F1;
    color: #4DB6AC;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.energy-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #333;
    text-transform: uppercase;
    flex: 1;
}

.energy-value-text {
    font-size: 12px;
    color: #666;
    font-weight: 600;
}

.lv-tag {
    background: #E8F5E9;
    color: #4CAF50;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 10px;
    margin-left: 6px;
}

.energy-bar-new {
    height: 12px;
    background: #F5F5F5;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.energy-fill {
    height: 100%;
    background: #81C784; /* Soft Green */
    border-radius: 10px;
    transition: width 0.6s ease;
}

/* Action Grid */
.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.action-card {
    background: #fff;
    border-radius: 24px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.02);
    transition: transform 0.2s;
}
.action-card:active { transform: scale(0.98); }

.action-card.proficiency { background: #FFF3E0; border: 1px solid #FFE0B2; }
.action-card.wordbank { background: #E0F2F1; border: 1px solid #B2DFDB; }

.action-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.action-icon-circle.orange { color: #FF9800; }
.action-icon-circle.green { color: #009688; }

.action-title {
    font-size: 16px;
    font-weight: 800;
    color: #333;
}

.action-sub {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

/* Settings List */
.settings-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.setting-group-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    border: 1px solid #F0F0F0;
}

.setting-header {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    background: #fff;
}

.setting-icon-bg {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F5F5F5;
    color: #90A4AE;
    display: flex;
    align-items: center;
    justify-content: center;
}
.setting-icon-bg.green-icon {
    background: #E0F2F1;
    color: #4DB6AC;
}
.setting-icon-bg.orange-icon {
    background: #FFF3E0;
    color: #FF9800;
}

.setting-info {
    flex: 1;
}

.setting-name {
    font-size: 15px;
    font-weight: 700;
    color: #333;
}

.setting-desc {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.setting-chevron {
    transition: transform 0.3s;
}

.setting-group-card.collapsed .setting-chevron {
    transform: rotate(180deg);
}
.setting-group-card:not(.collapsed) .setting-chevron {
    transform: rotate(0deg);
}

.setting-content {
    padding: 0 16px 20px 16px; /* Expandable area */
    border-top: 1px solid #f5f5f5;
    background: #FAFAFA;
}

.setting-group-card.collapsed .setting-content {
    display: none;
}

/* Clean Form Elements inside Settings */
.clean-textarea {
    width: 100%;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    margin-top: 12px;
    resize: none;
    background: #fff;
}
.clean-textarea:focus { outline: none; border-color: #4DB6AC; }

.char-count {
    text-align: right;
    font-size: 11px;
    color: #999;
    margin-top: 6px;
    background: #eee;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    float: right;
}

.clean-select {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #eee;
    background: #fff;
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}

.pref-row {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pref-row label {
    font-size: 14px;
    font-weight: 600;
    color: #555;
}
.pref-row select {
    width: auto;
    margin-top: 0;
    padding: 6px 12px;
}

/* Modern Action Buttons */
.action-btn-modern {
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.action-btn-modern:active {
    transform: scale(0.96);
}

/* Secondary Style (Edit) */
.btn-secondary {
    background: #ffffff;
    color: #555;
    border: 1px solid #e5e5ea;
}

.btn-secondary:hover {
    background: #f9f9f9;
    border-color: #d1d1d6;
    color: #333;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* Primary Style (Save) */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-purple), #8e8efe);
    color: white;
    box-shadow: 0 4px 10px rgba(123, 123, 254, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 6px 15px rgba(123, 123, 254, 0.4);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: scale(0.96) translateY(0);
}

/* Toggle Switch Update */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { display:none; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .2s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .2s; border-radius: 50%; }
input:checked + .slider { background-color: #4DB6AC; }
input:checked + .slider:before { transform: translateX(20px); }

.bottom-space { height: 40px; }


/* Modern Search Bar */
.search-container {
    display: flex;
    align-items: center;
    background: #f0f2f5;
    border-radius: 12px;
    padding: 8px 12px;
    flex: 1;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.search-container:focus-within {
    background: #fff;
    border-color: var(--primary-purple);
    box-shadow: 0 2px 8px rgba(123, 123, 254, 0.1);
}

.search-icon {
    color: #999;
    margin-right: 8px;
}

.modern-input {
    border: none;
    background: transparent;
    font-size: 14px;
    width: 100%;
    outline: none;
    color: #333;
}

/* Modern Filter Select */
.modern-select-wrapper {
    position: relative;
    min-width: 110px;
}

.modern-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    background: #f0f2f5;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 32px 10px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.2s;
}

.modern-select:hover {
    background: #e4e6eb;
}

.modern-select:focus {
    outline: none;
    border-color: var(--primary-purple);
}

.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #888;
}

/* Scroll Fix & Layout */
.wordbank-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background: #FAFAFA;
    overflow: hidden; /* Prevent body scroll */
}

.wb-header-area {
    padding: 30px 20px 10px;
    background: #FAFAFA;
    z-index: 10;
    flex-shrink: 0; /* Don't shrink header */
}

.wb-scroll-area {
    flex: 1;
    overflow-y: auto; /* Enable scroll here */
    padding: 0 20px 40px;
    -webkit-overflow-scrolling: touch;
    height: 100%; /* Take remaining height */
}

/* --- Restored Header Styles --- */
.wb-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.wb-title-lg {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 28px;
    font-weight: 800;
    color: #333;
    position: relative;
    z-index: 1;
}

.wb-title-lg::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 8px;
    background: #FFCCBC; /* Peach underline */
    opacity: 0.6;
    z-index: -1;
    border-radius: 4px;
}

.wb-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wb-search-wrapper {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px dashed #FFAB91; /* Dashed orange border */
    border-radius: 24px;
    padding: 10px 16px;
    transition: all 0.2s;
}

.wb-search-wrapper:focus-within {
    border-color: var(--primary-orange);
    background: #FFFBF9;
}

.wb-search-input {
    border: none;
    background: transparent;
    font-size: 15px;
    width: 100%;
    outline: none;
    color: #333;
    margin-left: 8px;
}

.wb-filter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: relative;
}

.wb-filter-line {
    width: 2px;
    height: 16px;
    background: #333;
    margin-bottom: -4px;
    margin-right: 40px;
    position: relative;
    z-index: 0;
}
.wb-filter-line::after {
    content: '';
    width: 6px;
    height: 6px;
    background: #333;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: -2px;
}

.wb-filter-dropdown {
    position: relative;
    z-index: 2;
}

#wbFilterSelect {
    appearance: none;
    background: var(--primary-orange);
    color: white;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 32px 8px 16px;
    border-radius: 20px;
    border: none;
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.3);
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
}

#wbFilterSelect:focus { outline: none; }

.wb-list {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Reduced gap */
    padding-bottom: 40px;
}

.wb-card-wrapper {
    position: relative;
    /* Height will be auto now for content */
    height: auto;
}

.wb-card {
    background: white;
    border-radius: 16px; /* Slightly smaller radius */
    padding: 16px; /* Reduced padding */
    height: auto;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible; /* For tape */
    transition: transform 0.2s;
}

.wb-tape {
    position: absolute;
    top: -8px; /* Adjusted position */
    left: 50%;
    transform: translateX(-50%);
    width: 50px; /* Slightly smaller tape */
    height: 16px;
    background: rgba(255, 224, 178, 0.6); /* Semi-transparent tape */
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    z-index: 5;
}

.wb-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.wb-card-header-row {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between elements */
    margin-bottom: 2px;
}

.wb-tag {
    font-size: 10px; /* Even smaller */
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    background: #E0F2F1; 
    color: #00897B;
    align-self: center;
    margin-top: 2px; /* Align with text baseline visually */
}

.wb-fav-icon {
    color: #E0E0E0;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    font-size: 18px; 
    padding: 2px;
    margin-left: auto; /* Push to right if flex container doesn't handle it */
}
.wb-fav-icon.active {
    color: #FFB74D; 
    transform: scale(1.1);
}

.wb-main-word {
    font-size: 18px; /* Slightly smaller to fit */
    font-weight: 800;
    color: #333;
    line-height: 1.2;
}

.wb-origin {
    font-size: 12px;
    color: #999;
    font-style: italic;
    margin-bottom: 8px; /* Reduced margin */
}

.wb-meaning {
    font-size: 14px;
    color: #444;
    line-height: 1.4;
    margin-bottom: 8px; /* Reduced margin */
    font-weight: 500;
}

.wb-examples-box {
    background: #FAFAFA;
    border-radius: 10px;
    padding: 10px; /* Reduced padding */
    border-left: 3px solid #E0E0E0;
}

.wb-ex-en {
    font-size: 13px; /* Smaller font */
    color: #333;
    line-height: 1.4;
    margin-bottom: 2px;
    font-style: italic;
}

.wb-ex-cn {
    font-size: 11px; /* Smaller font */
    color: #888;
}

.wb-mastered-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(76, 175, 80, 0.9); /* Green overlay */
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 10;
}

.wb-card-wrapper[data-mastered="1"] .wb-mastered-overlay {
    /* If we wanted to show it permanently, but usually we filter them out or just mark them. 
       Let's keep it hidden unless actively animating or filtered in specific view. */
}

.wb-check-icon {
    font-size: 32px;
    margin-bottom: 4px;
    border: 2px solid white;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Recommendation Section (Refine) */
.recommendation-section {
    display: none; /* Hidden by default */
    flex-direction: column; gap: 16px;
    margin-top: 20px;
}

@keyframes flash {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

.rec-card {
    background: white; border-radius: 16px; padding: 16px;
    font-size: 14px; color: var(--text-main); line-height: 1.5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border-left-width: 4px; border-left-style: solid;
    cursor: pointer;
    transition: transform 0.1s;
    border: 1px solid #eee;
}
.rec-card:active { transform: scale(0.98); }
.rec-card.blue { border-left-color: var(--border-blue); }
.rec-card.green { border-left-color: var(--border-green); }
.rec-card.yellow { border-left-color: var(--border-yellow); }
.rec-card.purple { border-left-color: var(--border-purple); }
.rec-card.pink { border-left-color: var(--border-pink); }
.rec-card strong { color: var(--primary-orange); font-weight: 600; }

/* Momentsbook (L5) */
.momentsbook .status-bar {
    background: white;
}

.momentsbook {
    background: white;
}

.mb-header {
    padding-top: 20px;
    background: white;
    z-index: 10;
    border-bottom: 0.5px solid rgba(0,0,0,0.1);
}

.mb-nav-bar {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    gap: 14px;
}

.mb-back-btn {
    font-size: 24px;
    color: #666;
    display: inline-flex;
    align-items: center;
}

.mb-month-title {
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    margin-right: 6px;
}

.mb-week-strip {
    display: flex;
    margin-left: auto;
    gap: 10px;
}

.mb-cal-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 11px;
    color: var(--text-sub);
    gap: 4px;
    min-width: 24px;
}

.mb-cal-day.active {
    color: var(--primary-green);
    font-weight: 700;
}

.mb-cal-day.active::after {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--primary-green);
    border-radius: 50%;
}

.mb-timeline-scroll {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 40px;
    background: #fff;
}

.mb-day-section {
    padding: 10px 0 5px; /* 原为 24px 0 30px */
}.mb-day-section {
    padding: 10px 0 5px; /* 原为 24px 0 30px */
}.mb-day-section {
    padding: 10px 0 5px;
}

.mb-date-header {
    padding: 0 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mb-date-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 28px;
    color: var(--primary-green);
    letter-spacing: -0.5px;
}

.mb-date-text span {
    font-size: 12px;
    color: var(--text-main);
    font-family: sans-serif;
    margin-left: 4px;
    vertical-align: middle;
    font-weight: 400;
}

.mb-date-text.dark {
    color: var(--text-main);
}

.mb-open-btn {
    background: var(--primary-green);
    color: white;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(52, 199, 89, 0.3);
}

.mb-open-btn.dark {
    background: #2C2C2E;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.mb-card-carousel {
    position: relative;
    height: 520px;
    margin: 10px 0 10px;
    overflow: hidden;
    perspective: 1200px;
    touch-action: pan-y;
    user-select: none;
}

.mb-card-carousel::-webkit-scrollbar {
    display: none;
}

.mb-card-carousel::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 14px;
    width: 300px;
    height: 430px;
    transform: translateX(-50%);
    border-radius: 28px;
    background: rgba(0,0,0,0.04);
    filter: blur(10px);
    z-index: 0;
}

.mb-card-carousel.dragging .mb-moment-card {
    transition: none;
}

.mb-moment-card {
    width: 280px;
    height: 420px;
    border-radius: 24px;
    position: absolute;
    left: 50%;
    top: 18px;
    background-size: cover;
    background-position: center;
    transform-style: preserve-3d;
    transition: transform 420ms cubic-bezier(0.2, 0.9, 0.2, 1), filter 420ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 200ms ease;
    box-shadow: 0 14px 28px rgba(0,0,0,0.16);
    background-color: #eee;
    border: 2px solid #fff;
    will-change: transform;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.mb-moment-card.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.mb-moment-card.is-active {
    box-shadow: 0 22px 50px rgba(0,0,0,0.22);
}

.mb-tag {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #FF6B00;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    cursor: pointer;
    z-index: 5;
    transform: translateZ(20px);
    transition: all 0.2s ease;
}

.mb-tag.favorite {
    color: #ff3b30;
    background: #fff;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.25);
}

.mb-tag svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.mb-tag.favorite svg {
    fill: #ff3b30;
}

.mb-tag.pos-1 { top: 40%; left: 35%; }
.mb-tag.pos-2 { top: 55%; right: 10%; }
.mb-tag.pos-3 { bottom: 25%; left: 25%; }

.mb-moment-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 10px;
    backdrop-filter: blur(4px);
}

.mb-date-stamp {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* Diary/Moments Page */
.header-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 15px; border-bottom: 1px solid #f0f0f0; background: #fff;
    z-index: 10;
}
.tabs { display: flex; gap: 15px; font-size: 16px; font-weight: 600; }
.tab { color: #ccc; cursor: pointer; transition: color 0.3s; }
.tab.active { color: var(--primary-purple); }

.content-scroll {
    flex: 1; overflow-y: auto; padding: 20px; padding-bottom: 80px;
}

.section-header {
    font-family: Georgia, 'Times New Roman', serif;
    color: #2D2D2D;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    letter-spacing: -0.5px;
}

/* Diary Page Header */
.diary-header-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.diary-eyebrow {
    font-size: 10px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 2px;
}

.diary-date-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.section-text {
    font-size: 14px; line-height: 1.6; color: var(--text-main);
    margin-bottom: 15px; text-align: justify;
}

.image-card {
    width: 100%; height: 220px;
    border-radius: 16px; margin-bottom: 20px;
    position: relative; overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    background-size: cover; background-position: center;
}

.letter-sub {
    font-size: 12px; font-family: 'Courier New', Courier, monospace;
    color: #666; margin-bottom: 15px;
}

/* Letter Envelope Styles */
.letter-section-container {
    perspective: 1000px;
    margin-bottom: 40px;
}

.envelope-card {
    background: #fffbf2; /* Warm paper */
    border-radius: 20px;
    border: 1px solid #efe6d5;
    box-shadow: 0 8px 20px rgba(92, 64, 51, 0.06);
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.envelope-card.unread {
    background: linear-gradient(135deg, #fffbf2, #fff0d4);
    border-color: #ffe0b2;
    box-shadow: 0 10px 30px rgba(255, 167, 38, 0.15);
    transform: translateY(-2px);
}

.envelope-header {
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: transparent;
    z-index: 2;
    position: relative;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.3s;
}

.envelope-card.open .envelope-header {
    border-bottom-color: #e0d4c0;
}

.envelope-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f4eee0;
    color: #8d6e63;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.3s;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
}

.envelope-card.unread .envelope-icon-circle {
    background: #FFAB91;
    color: white;
    box-shadow: 0 4px 10px rgba(255, 171, 145, 0.4);
    animation: pulse-soft 2s infinite;
}

@keyframes pulse-soft {
    0% { box-shadow: 0 0 0 0 rgba(255, 171, 145, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 171, 145, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 171, 145, 0); }
}

.envelope-title-group {
    flex: 1;
    margin-left: 16px;
}

.envelope-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 17px;
    font-weight: 700;
    color: #4e342e;
    letter-spacing: 0.3px;
}

.envelope-subtitle {
    font-size: 12px;
    color: #8d6e63;
    margin-top: 4px;
    font-weight: 500;
}

.envelope-card.unread .envelope-subtitle {
    color: #E64A19;
    font-weight: 700;
}

.envelope-arrow {
    font-size: 12px;
    color: #bcaaa4;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.envelope-card.open .envelope-arrow {
    transform: rotate(180deg);
}

.letter-content-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fffbf2;
}

.envelope-card.open .letter-content-wrapper {
    max-height: none;
    padding-bottom: 10px;
}

.letter-inner {
    padding: 30px 24px 40px;
    background-image: radial-gradient(#d7ccc8 1px, transparent 1px);
    background-size: 24px 24px;
    position: relative;
    margin: 0 10px 10px;
    border-radius: 0 0 12px 12px;
}

/* Postmark Style */
.postmark {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 70px;
    height: 70px;
    opacity: 0.15;
    transform: rotate(-12deg);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #5d4037;
    border-radius: 50%;
}

.pm-circle {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    border: 1px dashed #5d4037;
    border-radius: 50%;
}
.pm-circle span {
    font-size: 10px; font-weight: 900; color: #5d4037; letter-spacing: 1px;
}
.pm-lines {
    position: absolute; top: 50%; left: -20px; right: -20px; height: 10px;
    border-top: 2px solid #5d4037; border-bottom: 2px solid #5d4037;
    transform: translateY(-50%) skewX(-20deg);
}

.letter-text {
    font-family: 'Patrick Hand', cursive, sans-serif;
    font-size: 19px;
    line-height: 1.5; /* Reduced line-height */
    color: #4e342e;
    white-space: pre-wrap;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    position: relative;
    z-index: 2;
}

.letter-footer {
    margin-top: 24px;
    font-size: 13px;
    color: #8d6e63;
    text-align: right;
    font-style: italic;
    font-family: Georgia, serif;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.letter-footer::before {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: #bcaaa4;
}

.loading-dots:after {
    content: ' .';
    animation: dots 1s steps(5, end) infinite;
}
@keyframes dots {
    0%, 20% { content: ' .'; }
    40% { content: ' ..'; }
    60% { content: ' ...'; }
    80%, 100% { content: ' ....'; }
}

.floating-btn {
    position: absolute; bottom: 20px; right: 20px;
    width: 60px; height: 60px;
    background: #d1e7f3; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #7b7bfe; font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    cursor: pointer; z-index: 50;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    z-index: 10;
    flex-shrink: 0;
}

.back-btn {
    font-size: 24px;
    color: #666;
    cursor: pointer;
}

.date-share {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-purple);
    font-weight: 500;
}

.section-wrapper {
    scroll-margin-top: 10px;
}

.edit-icon {
    cursor: pointer;
    font-size: 20px;
    color: #999;
    transition: color 0.2s;
}

.edit-icon:hover {
    color: var(--primary-purple);
}

.edit-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 100;
    display: none;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.edit-content {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    background: #f9f9f9;
}

.suggestion-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 600;
    border-left: 3px solid var(--primary-orange);
    padding-left: 8px;
}

.suggestion-box {
    background: #fff;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #444;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 10px;
    border: 1px solid #eee;
}

.text-editor-area {
    background: #fff;
    border-radius: 12px;
    padding: 15px;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    border: 1px solid #ddd;
    height: 220px;
    margin-top: 10px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
    font-family: inherit;
    width: 100%;
    resize: none;
}

.text-editor-area:focus {
    outline: none;
    border-color: var(--primary-purple);
}

.keyboard {
    background: #d1d4d9;
    padding: 8px 3px 20px 3px;
}

.kb-row {
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    gap: 6px;
}

.key {
    background: #fff;
    border-radius: 5px;
    height: 42px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 1px 0 #888;
    color: #000;
    max-width: 32px;
    user-select: none;
}

.key.wide {
    flex: 1.5;
    max-width: 45px;
    background: #acb3bc;
}

.key.space {
    flex: 4;
    max-width: 200px;
}

.key.blue {
    background: #007aff;
    color: white;
    font-size: 16px;
}

.explanation-card {
    background: #fff; border-radius: 16px; padding: 16px; margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #eee;
    animation: fadeIn 0.3s ease;
}
.exp-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.exp-title { font-weight:700; color:#555; font-size:14px; }
.exp-close { cursor:pointer; color:#999; font-size:18px; }
.exp-content { font-size:14px; color:#333; line-height:1.5; }
.perfect-badge-container {
    text-align: center; margin: 30px 0;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.perfect-star { font-size: 48px; margin-bottom: 10px; }
.perfect-title { font-size: 22px; font-weight: 700; color: #FFD700; margin-bottom: 4px; }
.perfect-score { font-size: 14px; color: #888; }
.drag-hint { font-size: 10px; color: #999; margin-top: 4px; font-style: italic; }
.ghost-words-container { margin: 20px 0; }
@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }