/* ============================================================
   Nira App — Complete Stylesheet (Final Fixed)
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
    --brand-bg: #DCE8F0;
    --brand-accent: #C4A882;
    --brand-warm: #F0D5C7;
    --brand-text: #3D362F;
    --brand-text-secondary: #8B7D72;
    --brand-card: #FFFFFF;
    --brand-card-alt: #F5F7FA;
    --brand-border: #E0D8CE;
    --brand-danger: #B33A3A;
    --persona-heal: #F2A07B;
    --persona-casual: #8FBF8F;
    --persona-eastern: #B69E6B;
    --persona-business: #4A6FA5;
    --persona-sport: #F07B4E;
    --persona-art: #A87BBF;
    --persona-tutor: #8B6E4E;
    --persona-fashion: #B87BCC;
    --bg: var(--brand-bg);
    --text-primary: var(--brand-text);
    --text-secondary: var(--brand-text-secondary);
    --accent: var(--brand-accent);
    --border-light: var(--brand-border);
    --bubble-user-bg: #FFFFFF;
    --bubble-ai-bg: #FAF5F0;
    --bubble-user-text: #4A3F38;
    --bubble-ai-text: #4A3F38;
    --radius-card: 20px;
    --radius-btn: 24px;
    --radius-bubble: 18px;
    --ease-switch: cubic-bezier(0.4, 0, 0.2, 1);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- Theme Variants ---------- */
.theme-warm {
    --bubble-user-bg: #FFFFFF;
    --bubble-ai-bg: #FAF5F0;
    --bubble-user-text: #3D362F;
    --bubble-ai-text: #3D362F;
    --accent: #C4A882;
}
.theme-cool {
    --bubble-user-bg: #FFFFFF;
    --bubble-ai-bg: #F0F5FA;
    --bubble-user-text: #2C3E50;
    --bubble-ai-text: #2C3E50;
    --accent: #8BA4C4;
}
.gender-male   { --gender-bg: #F0F4F8; }
.gender-female { --gender-bg: #FDF4F0; }

/* ---------- Reset & Base ---------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
html, body, #root {
    height: 100dvh;
    overflow: hidden;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
    background: var(--brand-bg);
    color: var(--text-primary);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
input, textarea, select {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    border: 1px solid var(--brand-border);
    background: white;
    padding: 0 12px;
    font-family: inherit;
}
#root {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* ---------- Scrollable Utility ---------- */
.scrollable {
    -webkit-overflow-scrolling: touch;
}

/* ---------- Loading Screen ---------- */
.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.loading-logo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    animation: pulseOpacity 2s infinite;
}
.loading-text {
    margin-top: 16px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ---------- Keyframes ---------- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseOpacity {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* ---------- Nav Bar ---------- */
.nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--brand-bg);
    flex-shrink: 0;
}
.nav-left {
    display: flex;
    gap: 14px;
    align-items: center;
}
.nav-menu {
    font-size: 22px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 6px;
}
.nav-menu:active { opacity: 0.6; }
.nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-logo img {
    height: 36px;
    border-radius: 50%;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

/* ---------- Language Switcher ---------- */
.lang-current {
    background: var(--brand-card);
    border: 1px solid var(--brand-border);
    color: var(--text-primary);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    min-width: 52px;
    text-align: center;
}
.lang-current:active { background: var(--brand-card-alt); }
.lang-list {
    display: none;
    position: absolute;
    top: 44px;
    right: 0;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 60;
    min-width: 100px;
    overflow: hidden;
}
.lang-list.show { display: block; }
.lang-option {
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid #F0EDE8;
    text-align: center;
}
.lang-option:last-child { border-bottom: none; }
.lang-option:active { background: #FAF5F0; }
.lang-option.active {
    color: var(--brand-accent);
    font-weight: 600;
    background: #FDF8F3;
}

/* ---------- Auth Buttons (Nav) ---------- */
.nav-auth-btns {
    display: flex;
    gap: 6px;
    align-items: center;
}
.nav-auth-btn {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid var(--brand-border);
    background: white;
    color: var(--text-primary);
    white-space: nowrap;
    transition: transform 0.15s, opacity 0.15s;
}
.nav-auth-btn:active {
    transform: scale(0.95);
    opacity: 0.8;
}
.nav-auth-btn.primary {
    background: var(--brand-accent);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(196,168,130,0.3);
}
.nav-auth-btn.primary:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(196,168,130,0.3);
}
.nav-auth-btn.logged {
    background: var(--brand-card-alt);
    border: 1px solid var(--brand-border);
    font-size: 12px;
}

/* ---------- Page Layout ---------- */
.page {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.page-home {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ---------- Chat Area ---------- */
.chat-area {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--gender-bg, #FDF4F0);
    -webkit-overflow-scrolling: touch;
}
.message-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 85%;
    animation: fadeIn 0.25s ease;
}
.message-wrapper.user      { align-self: flex-end; }
.message-wrapper.assistant { align-self: flex-start; }
.message-bubble {
    padding: 10px 14px;
    border-radius: var(--radius-bubble);
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
}
.user .message-bubble {
    background: var(--bubble-user-bg);
    color: var(--bubble-user-text);
    border-bottom-right-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.assistant .message-bubble {
    background: var(--bubble-ai-bg);
    color: var(--bubble-ai-text);
    border-bottom-left-radius: 4px;
}
.error-bubble {
    background: #FFF3F0;
    color: var(--brand-danger);
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 14px;
    text-align: center;
}
.system-bubble {
    background: rgba(255,255,255,0.5);
    backdrop-filter: blur(4px);
    color: var(--text-secondary);
    font-size: 13px;
    text-align: center;
    padding: 6px 12px;
    border-radius: 12px;
}

/* ---------- Empty State ---------- */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    animation: fadeIn 0.6s ease;
}
.empty-state-greeting {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
    max-width: 280px;
    line-height: 1.8;
}
.empty-state-sub {
    font-size: 13px;
    color: #B0A89E;
    text-align: center;
    margin-top: 12px;
}

/* ---------- Input Bar ---------- */
.input-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    padding-bottom: max(16px, var(--safe-bottom));
    background: var(--brand-bg);
    flex-shrink: 0;
}
.msg-input {
    flex: 1;
    height: 44px;
    border-radius: 22px;
    border: 1px solid var(--brand-border);
    background: white;
    padding: 0 18px;
    font-size: 16px;
    outline: none;
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.msg-input::placeholder { color: #C0BAB2; }
.send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--brand-accent);
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.15s;
    box-shadow: 0 2px 8px rgba(196,168,130,0.3);
}
.send-btn:active { transform: scale(0.92); }
.send-btn:disabled { opacity: 0.4; transform: none; }
.voice-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}
.voice-btn:active { background: rgba(0,0,0,0.05); }
.voice-btn.recording {
    background: #FF3B30;
    color: white;
    animation: voicePulse 1.2s infinite;
}
@keyframes voicePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0.4); }
    50%      { box-shadow: 0 0 0 14px rgba(255,59,48,0); }
}

/* ================================================================
   ROUTER-MANAGED OVERLAYS
   All overlays are mounted inside #root, NOT directly on body.
   They are added/removed by the router (app.js), not by CSS toggling.
   ================================================================ */

#root > .sub-backdrop,
#root > .menu-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 90;
}
#root > .sub-backdrop  { background: rgba(0,0,0,0.3); }
#root > .menu-backdrop { background: rgba(0,0,0,0.2); backdrop-filter: blur(2px); }

#root > .menu-drawer {
    position: fixed;
    top: 0; right: 0;
    width: 82%;
    max-width: 360px;
    height: 100dvh;
    background: white;
    z-index: 99;
    box-shadow: -8px 0 32px rgba(0,0,0,0.04);
    padding: 24px 18px max(32px, var(--safe-bottom));
    overflow-y: auto;
}

#root > .sub-panel {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 24px 24px 0 0;
    padding: 24px 20px max(44px, calc(var(--safe-bottom) + 44px));
    z-index: 100;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
}

#root > .privacy-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 260;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: var(--safe-bottom);
}

#root > .call-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #1a1a2e;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: var(--safe-bottom);
    color: white;
}

#root > .sub-page {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--brand-bg);
    z-index: 95;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: max(32px, var(--safe-bottom));
}

/* ---------- Menu Drawer (inner) ---------- */
.menu-section { margin-bottom: 6px; }
.menu-section-title {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    margin-top: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 8px;
    font-weight: 600;
}
.menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 12px;
    border-radius: 14px;
    cursor: pointer;
    font-size: 15px;
    min-height: 48px;
    transition: background 0.2s;
}
.menu-item:hover  { background: #FAF5F0; }
.menu-item:active { background: #F0EDE8; transform: scale(0.98); }
.menu-item .menu-icon {
    font-size: 20px;
    width: 28px;
    text-align: center;
}
.menu-item .menu-arrow {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 14px;
}
.menu-divider {
    height: 1px;
    background: #F0EDE8;
    margin: 8px 0;
}
.menu-version {
    font-size: 11px;
    color: #B0A89E;
    text-align: center;
    padding: 16px 0 8px;
}
.menu-profile-card {
    background: linear-gradient(135deg, #FFF9F2 0%, #FFFFFF 100%);
    border: 1px solid rgba(196,168,130,0.2);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.menu-profile-card:active { transform: scale(0.98); }
.menu-profile-card img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.menu-profile-info { flex: 1; }
.menu-profile-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--brand-text);
}
.menu-profile-id {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.menu-profile-arrow {
    color: var(--brand-accent);
    font-size: 18px;
}
.featured-card {
    background: linear-gradient(135deg, #FFF9F2 0%, #FFFFFF 100%);
    border: 1.5px solid var(--brand-accent);
    border-radius: var(--radius-card);
    padding: 16px;
    margin: 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.featured-card:active { transform: scale(0.98); }
.featured-card .fc-badge {
    background: var(--brand-accent);
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: auto;
}

/* ---------- Sub Page (Login / Register / Content Pages) ---------- */
.sub-page-header {
    display: flex;
    align-items: center;
    padding: 16px;
    gap: 12px;
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--brand-border);
}
.sub-page-header .back-btn {
    font-size: 20px;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 6px;
}
.sub-page-header .back-btn:active { opacity: 0.6; }
.sub-page-header .sub-page-title {
    font-size: 18px;
    font-weight: 600;
    flex: 1;
}
.sub-page-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ---------- Auth Pages ---------- */
.auth-page-content {
    flex: 1;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.auth-page-content .msg-input { width: 100%; }
.auth-page-content .chip {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
    text-align: center;
}
.auth-toggle-row {
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}
.auth-birth-label {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 8px;
}

/* ---------- Bottom Panel (inner) ---------- */
.sub-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--brand-text);
}
.sub-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #F0EDE8;
    font-size: 15px;
    color: var(--text-primary);
    min-height: 48px;
}
.sub-row:last-child { border-bottom: none; }

/* ---------- Chip ---------- */
.chip {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    margin: 3px;
    border: 1px solid var(--brand-border);
    background: white;
    transition: transform 0.15s, opacity 0.15s, background 0.2s;
}
.chip:active {
    transform: scale(0.96);
    opacity: 0.8;
}
.chip.active {
    background: var(--brand-accent);
    color: white;
    border-color: transparent;
}
.chip.danger {
    background: var(--brand-danger);
    color: white;
    border: none;
}

/* ---------- Toggle Switch ---------- */
.toggle-switch {
    width: 48px;
    height: 28px;
    border-radius: 14px;
    background: #D9D0C7;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background 0.25s var(--ease-switch);
}
.toggle-switch:active { opacity: 0.8; }
.toggle-switch.on { background: var(--brand-accent); }
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    transition: left 0.25s var(--ease-switch);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.toggle-switch.on::after { left: 23px; }

/* ---------- Progress Bar ---------- */
.progress-bar {
    width: 100%;
    height: 6px;
    background: #E8E0D8;
    border-radius: 3px;
    margin: 8px 0;
    overflow: hidden;
}
.progress-bar .fill {
    height: 100%;
    background: var(--brand-accent);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* ---------- Wallet Card ---------- */
.wallet-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 12px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}
.wallet-card .qs-number {
    font-size: 52px;
    font-weight: 700;
    color: var(--brand-accent);
}
.wallet-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}
.wallet-actions button {
    flex: 1;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid var(--brand-border);
    background: white;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
}
.wallet-actions button:active { transform: scale(0.96); opacity: 0.8; }
.wallet-actions button.primary {
    background: var(--brand-accent);
    color: white;
    border: none;
}

/* ---------- Privacy Modal (inner) ---------- */
.privacy-modal-content {
    background: white;
    border-radius: 24px;
    padding: 24px 24px max(32px, calc(var(--safe-bottom) + 24px));
    max-width: 360px;
    width: 90%;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}
.privacy-scroll {
    flex: 1;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 16px;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}
.privacy-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid #F0EDE8;
}
.privacy-check-row input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--brand-accent);
}
.privacy-confirm-btn {
    width: 100%;
    padding: 14px;
    border-radius: var(--radius-btn);
    border: none;
    background: var(--brand-accent);
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 12px;
    transition: transform 0.15s, opacity 0.2s;
}
.privacy-confirm-btn:active { transform: scale(0.97); }
.privacy-confirm-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}
.privacy-timer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.privacy-timer-num {
    font-weight: 700;
    color: var(--brand-accent);
    min-width: 16px;
    text-align: center;
}

/* ---------- Call Screen (inner) ---------- */
.call-timer {
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 24px;
    font-variant-numeric: tabular-nums;
}
.call-video-preview {
    width: 280px;
    height: 210px;
    border-radius: 20px;
    background: #2a2a3e;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.call-video-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.call-actions {
    display: flex;
    gap: 24px;
}
.call-btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s, opacity 0.15s;
}
.call-btn:active { transform: scale(0.92); }
.call-btn.hangup {
    background: #FF3B30;
    color: white;
    width: 76px;
    height: 76px;
    font-size: 28px;
}
.call-btn.mute,
.call-btn.speaker,
.call-btn.camera-off {
    background: rgba(255,255,255,0.15);
    color: white;
}
.call-btn.active-toggle { background: rgba(255,255,255,0.3); }
.call-status {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin-top: 20px;
}

/* ---------- Avatar Window ---------- */
.avatar-window {
    position: fixed;
    bottom: 80px;
    left: 0; right: 0;
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border-radius: 24px 24px 0 0;
    padding: 20px 20px max(24px, calc(var(--safe-bottom) + 20px));
    display: none;
    z-index: 85;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
    -webkit-overflow-scrolling: touch;
}
.avatar-window.show { display: block; }
.persona-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F5F7FA;
    margin: 0 5px;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.2s;
}
.persona-dot:active { transform: scale(0.92); }
.persona-dot.active {
    background: var(--brand-accent);
    transform: scale(1.1);
}
.avatar-chip, .scene-chip {
    display: inline-block;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 5px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
}
.avatar-chip:active, .scene-chip:active { transform: scale(0.94); }
.avatar-chip.active, .scene-chip.active {
    border-color: var(--brand-accent);
    transform: scale(1.05);
}
.avatar-chip img, .scene-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.section-title {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 16px 0 8px;
    padding-left: 4px;
}
.view-all-link {
    text-align: center;
    padding: 14px;
    color: var(--brand-accent);
    cursor: pointer;
    font-size: 14px;
    display: block;
}
.view-all-link:active { opacity: 0.7; }

/* ---------- Assets ---------- */
.asset-group { margin-bottom: 24px; }
.asset-group-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}
.asset-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.asset-img-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.asset-img-item {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    overflow: hidden;
}
.asset-img-item.wide { width: 100px; }
.asset-img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Seed Card ---------- */
.seed-card {
    background: white;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}
.seed-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    margin-bottom: 12px;
}
.seed-badge.v0 { background: #B0B0B0; }
.seed-badge.v1 { background: #CD7F32; }
.seed-badge.v2 { background: #C0C0C0; }
.seed-badge.v3 { background: #FFD700; color: #3D362F; }
.seed-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.seed-progress-row .progress-bar {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: #E8E0D8;
}
.seed-progress-row .progress-bar .fill {
    height: 100%;
    border-radius: 4px;
    background: var(--brand-accent);
}