* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: #f8fafc;
    color: #2d3748;
    line-height: 1.6;
    padding: 0;
    min-height: 100vh;
}

.container {
    max-width: 400px;
    margin: 0 auto;
    background: white;
    min-height: 100vh;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}

/* Header */
.header {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    padding: 24px 20px 20px;
    position: relative;
}

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

.logo {
    font-size: 24px;
    font-weight: 700;
}

.settings-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.settings-btn:hover {
    background: rgba(255,255,255,0.1);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    overflow: hidden;
}

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

.user-info h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.user-info p {
    font-size: 16px;
    opacity: 0.9;
}

/* Scrolli Guidance Section */
.scrolli-section {
    background: white;
    margin: 0 20px;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transform: translateY(-10px);
    margin-bottom: 24px;
}

.scrolli-character {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 40px;
    position: relative;
    animation: gentle-bounce 3s ease-in-out infinite;
}

@keyframes gentle-bounce {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

.scrolli-message {
    text-align: center;
    margin-bottom: 20px;
}

.scrolli-message h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2d3748; /* Original gray color for white background */
}

.scrolli-message p {
    font-size: 16px;
    color: #64748b; /* Original gray color for white background */
}

.suggested-action {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 60px;
}

.suggested-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

/* Main Content */
.main-content {
    padding: 24px 20px 120px;
}

.section-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #1a202c; /* Changed from #2d3748 to darker */
}

/* Feature Cards Grid */
.feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.feature-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    position: relative;
}

.feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: white;
    font-size: 24px;
}

.feature-card h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2d3748;
}

.feature-progress {
    background: #e2e8f0;
    border-radius: 8px;
    height: 6px;
    margin-bottom: 8px;
    overflow: hidden;
}

.feature-progress-fill {
    background: linear-gradient(90deg, #FF6B35 0%, #F7931E 100%);
    height: 100%;
    transition: width 0.3s ease;
}

.feature-status {
    font-size: 12px;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    background: #FF6B35;
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.add-btn:hover {
    background: #e55a2b;
}

/* Recent Activity */
.recent-activity {
    margin-bottom: 40px;
}

.activity-item {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.activity-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.activity-icon {
    width: 40px;
    height: 40px;
    background: #81C784;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.activity-content {
    flex: 1;
}

.activity-content h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.activity-content p {
    font-size: 14px;
    color: #64748b;
}

.activity-time {
    font-size: 12px;
    color: #a0aec0;
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 400px;
    background: white;
    border-top: 1px solid #e2e8f0;
    padding: 12px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    z-index: 1000;
}

.nav-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 8px 4px;
    border: none;
    background: none;
    cursor: pointer;
    transition: color 0.2s ease;
    border-radius: 8px;
    min-width: 56px;
    text-decoration: none;
    color: #64748b !important;
    flex: 1;
    opacity: 1 !important;
    visibility: visible !important;
}

.nav-item:hover {
    background: #f8fafc;
}

.nav-item.active {
    color: #FF6B35 !important;
}

.nav-item.active .nav-icon {
    color: #FF6B35 !important;
}

.nav-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 4px;
    color: #64748b !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.nav-label {
    font-size: 11px;
    font-weight: 500;
    color: #64748b !important;
    text-align: center;
    white-space: nowrap;
    opacity: 1 !important;
    visibility: visible !important;
}

.nav-item.active .nav-label {
    color: #FF6B35 !important;
    font-weight: 600;
}

/* Memories Page Styles */
/* Header for secondary pages */
.header.secondary {
    background: white;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.back-btn:hover {
    background: #f8fafc;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.menu-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.menu-btn:hover {
    background: #f8fafc;
}

/* View Toggle */
.view-toggle {
    display: flex;
    background: #f8fafc;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    margin-top: 32px;
    margin-bottom: 32px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.toggle-btn {
    flex: 1;
    background: none;
    border: none;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 50px;
}

.toggle-btn.active {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    font-weight: 600;
}

.toggle-btn:hover:not(.active) {
    background: #e2e8f0;
    color: #2d3748;
}

/* Timeline View */
.timeline-view {
    display: block;
    margin-top: 8px;
}

.timeline-view.hidden {
    display: none;
}

.timeline-item {
    position: relative;
    margin-bottom: 32px;
    padding-left: 40px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    bottom: -32px;
    width: 2px;
    background: #e2e8f0;
}

.timeline-item:last-child::before {
    bottom: 50%;
}

.timeline-marker {
    position: absolute;
    left: 0;
    top: 8px;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    z-index: 1;
}

.memory-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.memory-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.memory-image {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    position: relative;
    overflow: hidden;
}

.memory-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.memory-content {
    padding: 20px;
}

.memory-date {
    color: #FF6B35;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.memory-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2d3748;
}

.memory-description {
    color: #64748b;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.memory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.memory-tag {
    background: rgba(255, 107, 53, 0.1);
    color: #FF6B35;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* Map View */
.map-view {
    display: none;
    margin-top: 8px;
}

.map-view.active {
    display: block;
}

.map-container {
    background: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
    height: 260px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 24px;
    position: relative;
    opacity: 0.9;
}

.world-map-image {
    background-image: url('../assets/images/worldmap2.png');
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #E3F2FD;
}

/* Responsive map height */
@media (max-width: 480px) {
    .map-container {
        height: 180px;
    }
    
    .world-map-image {
        background-size: 100%;
    }
}

.map-pin {
    position: absolute;
    width: 40px;
    height: 40px;
    background: #FF6B35;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.map-pin:hover {
    transform: rotate(-45deg) scale(1.1);
}

.map-pin::after {
    content: '📍';
    transform: rotate(45deg);
    font-size: 16px;
}

.map-pin.pin-1 { top: 70px; left: 50px; } /* California */
.map-pin.pin-2 { top: 40px; left: 160px; } /* Europe */
.map-pin.pin-3 { bottom: 80px; right: 50px; } /* Australia */
.map-pin.pin-4 { bottom: 100px; left: 110px; } /* Brazil */

.map-memories {
    display: grid;
    gap: 16px;
}

.map-memory-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.map-memory-card:hover {
    transform: translateY(-1px);
}

.map-memory-image {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.map-memory-content {
    flex: 1;
}

.map-memory-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.map-memory-location {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 4px;
}

.map-memory-date {
    font-size: 12px;
    color: #FF6B35;
    font-weight: 500;
}

/* Family Tree View */
.family-tree-view {
    display: none;
    margin-top: 8px;
}

.family-tree-view.active {
    display: block;
}

.family-tree {
    text-align: center;
    padding: 20px 0;
}

.generation {
    margin-bottom: 40px;
}

.generation-title {
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 20px;
}

.family-members {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.family-member {
    background: white;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.2s ease;
    text-align: center;
    min-width: 120px;
}

.family-member:hover {
    transform: translateY(-2px);
}

.family-member.current-user {
    border: 2px solid #FF6B35;
}

.family-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin: 0 auto 12px;
}

.family-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.family-relation {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
}

.memory-count {
    font-size: 12px;
    color: #FF6B35;
    font-weight: 500;
}

/* Add Memory Button */
.add-memory-btn {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 50;
}

.add-memory-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #2d3748;
}

.empty-state p {
    color: #64748b;
    margin-bottom: 24px;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.empty-state-btn {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border: none;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease;
    min-height: 60px;
}

.empty-state-btn:hover {
    transform: translateY(-2px);
}

/* Albums Page Styles */
.header-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.action-btn:hover {
    background: #f8fafc;
}

/* Create New Album Section */
.create-section {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 32px;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.create-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: gentle-pulse 4s ease-in-out infinite;
}

@keyframes gentle-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.create-icon {
    font-size: 64px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.create-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.create-subtitle {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

.create-btn {
    background: white;
    color: #FF6B35;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 60px;
    position: relative;
    z-index: 1;
}

.create-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Albums Grid */
.albums-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 32px;
}

.album-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.album-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.album-cover {
    width: 100%;
    height: 160px;
    background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    position: relative;
    overflow: hidden;
}

.album-cover.christmas {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
}

.album-cover.family {
    background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%);
}

.album-cover.memories {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
}

.album-status-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-draft {
    background: rgba(237, 137, 54, 0.9);
    color: white;
}

.status-ready {
    background: rgba(56, 161, 105, 0.9);
    color: white;
}

.status-published {
    background: rgba(255, 107, 53, 0.9);
    color: white;
}

/* Memory Status Badges for Timeline View */
.memory-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.memory-status-badge.status-draft {
    background: rgba(237, 137, 54, 0.9);
    color: white;
}

.memory-status-badge.status-ready {
    background: rgba(56, 161, 105, 0.9);
    color: white;
}

.memory-status-badge.status-published {
    background: rgba(255, 107, 53, 0.9);
    color: white;
}

.album-content {
    padding: 20px;
}

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

.album-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
    line-height: 1.3;
}

.album-date {
    color: #64748b;
    font-size: 14px;
}

.album-menu-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.album-menu-btn:hover {
    background: #f8fafc;
}

.album-description {
    color: #64748b;
    font-size: 16px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.album-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.album-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 14px;
}

.album-actions {
    display: flex;
    gap: 8px;
}

.album-action-btn {
    flex: 1;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
    text-align: center;
}

.album-action-btn:hover {
    border-color: #cbd5e0;
    background: #e2e8f0;
}

.album-action-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-color: transparent;
}

.album-action-btn.primary:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

/* Template Section */
.templates-section {
    margin-bottom: 32px;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.template-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.template-card:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
    transform: translateY(-2px);
}

.template-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.template-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.template-desc {
    font-size: 12px;
    color: #64748b;
}

/* Formats Section */
.formats-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 32px;
}

.formats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.format-option {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.format-option:hover, .format-option.selected {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.format-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.format-name {
    font-size: 12px;
    font-weight: 600;
    color: #2d3748;
}

/* Add Album FAB */
.add-album-btn {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 50;
}

.add-album-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

/* Progress Indicators */
.album-progress {
    background: #e2e8f0;
    border-radius: 8px;
    height: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}

.album-progress-fill {
    background: linear-gradient(90deg, #FF6B35 0%, #F7931E 100%);
    height: 100%;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 12px;
    color: #2d3748; /* Changed from #64748b to darker */
    margin-bottom: 8px;
}

/* Albums View States */
.my-albums-view {
    display: block;
}

.templates-view {
    display: none;
}

.templates-view.active {
    display: block;
}

/* Digital Vault Page Styles */
.vault-header {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    color: white;
    padding: 24px 20px 20px;
    position: relative;
    overflow: hidden;
}

.vault-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: gentle-pulse 4s ease-in-out infinite;
}

.vault-header .header-top {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.vault-header .back-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.vault-header .back-btn:hover {
    background: rgba(255,255,255,0.2);
}

.vault-header .settings-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.vault-header .settings-btn:hover {
    background: rgba(255,255,255,0.2);
}

.vault-header .page-title {
    color: white;
}

.vault-stats {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.stat-item {
    text-align: center;
    flex: 1;
}

.stat-number {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 14px;
    opacity: 0.9;
}

/* Security Banner */
.security-banner {
    background: rgba(56, 161, 105, 0.1);
    border: 2px solid #38a169;
    border-radius: 12px;
    padding: 16px;
    margin: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.security-icon {
    font-size: 24px;
}

.security-text {
    flex: 1;
}

.security-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.security-subtitle {
    font-size: 14px;
    color: #64748b;
}

/* Vault Categories */
.vault-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 32px;
}

.vault-category {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.vault-category:hover {
    border-color: #cbd5e0;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.vault-category.passwords {
    border-color: #FF6B35;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.05) 0%, rgba(247, 147, 30, 0.05) 100%);
}

.vault-category.documents {
    border-color: #3182ce;
    background: linear-gradient(135deg, rgba(49, 130, 206, 0.05) 0%, rgba(66, 153, 225, 0.05) 100%);
}

.vault-category.photos {
    border-color: #38a169;
    background: linear-gradient(135deg, rgba(56, 161, 105, 0.05) 0%, rgba(72, 187, 120, 0.05) 100%);
}

.vault-category.wills {
    border-color: #805ad5;
    background: linear-gradient(135deg, rgba(128, 90, 213, 0.05) 0%, rgba(159, 122, 234, 0.05) 100%);
}

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

.category-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 12px;
}

.category-icon.passwords {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
}

.category-icon.documents {
    background: linear-gradient(135deg, #3182ce 0%, #4299e1 100%);
    color: white;
}

.category-icon.photos {
    background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
    color: white;
}

.category-icon.wills {
    background: linear-gradient(135deg, #805ad5 0%, #9f7aea 100%);
    color: white;
}

.category-menu {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.category-menu:hover {
    background: #f8fafc;
}

.category-content {
    flex: 1;
}

.category-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2d3748;
}

.category-description {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.category-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.category-count {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 14px;
}

.category-security {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #38a169;
    font-size: 12px;
    font-weight: 500;
}

.category-actions {
    display: flex;
    gap: 8px;
}

.category-action-btn {
    flex: 1;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
    text-align: center;
}

.category-action-btn:hover {
    border-color: #cbd5e0;
    background: #e2e8f0;
}

.category-action-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-color: transparent;
}

.category-action-btn.primary:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

/* Quick Actions */
.quick-actions {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 32px;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.quick-action {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.quick-action:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
    transform: translateY(-1px);
}

.quick-action-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.quick-action-label {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

/* Security Settings */
.security-section {
    margin-bottom: 32px;
}

.security-options {
    display: grid;
    gap: 12px;
}

.security-option {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.security-option:hover {
    border-color: #cbd5e0;
    background: #f8fafc;
}

.security-option.enabled {
    border-color: #38a169;
    background: rgba(56, 161, 105, 0.05);
}

.security-option-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.security-option-icon.enabled {
    background: linear-gradient(135deg, #38a169 0%, #48bb78 100%);
    color: white;
}

.security-option-icon.disabled {
    background: #e2e8f0;
    color: #64748b;
}

.security-option-content {
    flex: 1;
}

.security-option-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.security-option-desc {
    font-size: 14px;
    color: #64748b;
}

.security-toggle {
    width: 48px;
    height: 24px;
    background: #e2e8f0;
    border-radius: 12px;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.security-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.security-toggle.enabled {
    background: #38a169;
}

.security-toggle.enabled::before {
    transform: translateX(24px);
}

/* Emergency Access */
.emergency-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 32px;
}

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

.emergency-icon {
    font-size: 24px;
}

.emergency-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.emergency-description {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.emergency-contacts {
    display: grid;
    gap: 12px;
}

.emergency-contact {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
}

.contact-info {
    flex: 1;
}

.contact-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.contact-relation {
    font-size: 14px;
    color: #64748b;
}

/* Add Entry FAB */
.add-entry-btn {
    position: fixed;
    bottom: 100px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(45, 55, 72, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    z-index: 50;
}

.add-entry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(45, 55, 72, 0.4);
}

/* Loved Ones Page Styles */
.loved-ones-header {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    padding: 24px 20px 20px;
    position: relative;
    overflow: hidden;
}

.loved-ones-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: gentle-pulse 4s ease-in-out infinite;
}

.loved-ones-header .header-top {
    position: relative;
    z-index: 1;
    margin-bottom: 20px;
}

.loved-ones-header .back-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.loved-ones-header .back-btn:hover {
    background: rgba(255,255,255,0.2);
}

.loved-ones-header .page-title {
    color: white;
    font-size: 24px;
    font-weight: 700;
}

.loved-ones-header .action-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.loved-ones-header .action-btn:hover {
    background: rgba(255,255,255,0.2);
}

.family-stats {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.family-stats .stat-item {
    text-align: center;
    flex: 1;
}

.family-stats .stat-number {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.family-stats .stat-label {
    font-size: 14px;
    opacity: 1;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
}

.toggle-buttons {
    display: flex;
    background: #f8fafc;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}

.view-content {
    display: none;
}

.view-content.active {
    display: block;
}

/* Add Person Card */
.add-person-card {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease;
    position: relative;
    overflow: hidden;
}

.add-person-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: gentle-pulse 3s ease-in-out infinite;
}

.add-person-card:hover {
    transform: translateY(-2px);
}

.add-icon {
    font-size: 48px;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.add-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.add-subtitle {
    font-size: 16px;
    opacity: 0.9;
    position: relative;
    z-index: 1;
}

/* Loved Ones Grid */
.loved-ones-grid {
    display: grid;
    gap: 16px;
}

.person-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.person-card:hover {
    border-color: #FF6B35;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.15);
}

.person-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.person-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
}

.person-avatar.online::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: #38a169;
    border: 3px solid white;
    border-radius: 50%;
}

.person-info {
    flex: 1;
}

.person-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.person-relation {
    color: #FF6B35;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.person-status {
    color: #64748b;
    font-size: 14px;
}

.person-menu {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
    position: absolute;
    top: 16px;
    right: 16px;
}

.person-menu:hover {
    background: #f8fafc;
}

.person-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.person-stat {
    text-align: center;
    flex: 1;
}

.stat-value {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 2px;
}

.stat-label {
    font-size: 12px;
    color: #64748b;
}

/* Ensure stat labels in person cards are readable */
.person-card .stat-label {
    color: #64748b !important;
    font-size: 12px;
}

/* Ensure person avatars are visible with proper styling */
.person-card .person-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
    font-size: 20px;
    font-weight: 600;
    flex-shrink: 0;
    position: relative;
}

.person-actions {
    display: flex;
    gap: 8px;
}

.person-action-btn {
    flex: 1;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
    text-align: center;
}

.person-action-btn:hover {
    border-color: #cbd5e0;
    background: #e2e8f0;
}

.person-action-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-color: transparent;
}

.person-action-btn.primary:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

/* Time Capsules */
.time-capsule-header {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    text-align: center;
}

.capsule-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.capsule-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2d3748;
}

.capsule-subtitle {
    color: #64748b;
    font-size: 16px;
}

.capsules-grid {
    display: grid;
    gap: 16px;
}

.capsule-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.capsule-card:hover {
    border-color: #cbd5e0;
    transform: translateY(-1px);
}

.capsule-card.scheduled {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.capsule-card.delivered {
    border-color: #38a169;
    background: rgba(56, 161, 105, 0.05);
}

.capsule-status {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.capsule-status.scheduled {
    background: rgba(255, 107, 53, 0.1);
    color: #FF6B35;
}

.capsule-status.delivered {
    background: rgba(56, 161, 105, 0.1);
    color: #38a169;
}

.capsule-content-header {
    margin-bottom: 16px;
}

.capsule-memory-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.capsule-delivery-date {
    color: #FF6B35;
    font-size: 14px;
    font-weight: 500;
}

.capsule-recipient {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.recipient-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.recipient-info {
    flex: 1;
}

.recipient-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #2d3748;
}

.recipient-relation {
    color: #FF6B35;
    font-size: 14px;
    font-weight: 500;
}

.capsule-message {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    font-style: italic;
    color: #2d3748;
    line-height: 1.5;
}

.capsule-actions {
    display: flex;
    gap: 8px;
}

.capsule-action-btn {
    flex: 1;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
    text-align: center;
}

.capsule-action-btn:hover {
    border-color: #cbd5e0;
    background: #e2e8f0;
}

.capsule-action-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-color: transparent;
}

.capsule-action-btn.primary:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

/* Add FAB */
.add-fab {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border: none;
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    transition: all 0.2s ease;
    z-index: 1000;
}

.add-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

/* Memory Recording Studio Styles */
.memory-recording-header {
    background: white;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.memory-recording-header .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.close-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.close-btn:hover {
    background: #f8fafc;
}

.mode-toggle {
    font-size: 14px;
    color: #64748b;
    background: #f8fafc;
    padding: 6px 12px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

/* Progress Bar */
.progress-container {
    margin-bottom: 8px;
}

.progress-bar {
    background: #e2e8f0;
    border-radius: 8px;
    height: 6px;
    overflow: hidden;
}

.progress-fill {
    background: linear-gradient(90deg, #FF6B35 0%, #F7931E 100%);
    height: 100%;
    transition: width 0.3s ease;
    width: 20%;
}

.progress-text {
    font-size: 12px;
    color: #2d3748; /* Changed from #64748b to darker */
    text-align: center;
    margin-top: 4px;
}

/* Memory Recording Page Scrolli Interaction Section */
.memory-recording-header .scrolli-section {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    margin-bottom: 32px;
    color: white;
    position: relative;
    overflow: hidden;
}

.memory-recording-header .scrolli-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: gentle-pulse 4s ease-in-out infinite;
}

.memory-recording-header .scrolli-character {
    width: 100px;
    height: 100px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 48px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
    animation: scroll-bounce 3s ease-in-out infinite;
}

@keyframes scroll-bounce {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(2deg); }
    75% { transform: translateY(-3px) rotate(-2deg); }
}

.memory-recording-header .scrolli-character:hover {
    transform: scale(1.05);
}

.scrolli-message {
    position: relative;
    z-index: 1;
}

.scrolli-message h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1a202c; /* Make sure this is dark enough */
}

.scrolli-message p {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 24px;
    line-height: 1.5;
    color: #2d3748; /* Make sure this is dark enough */
}

.talk-to-scrolli-btn {
    background: white;
    color: #FF6B35;
    border: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 60px;
    position: relative;
    z-index: 1;
}

.talk-to-scrolli-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.recording-active .talk-to-scrolli-btn {
    background: #e53e3e;
    color: white;
    animation: recording-pulse 1s ease-in-out infinite;
}

@keyframes recording-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* Recording State */
.recording-active {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
}

.recording-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255,255,255,0.3);
    overflow: hidden;
}

.recording-wave::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: white;
    animation: wave-slide 2s linear infinite;
}

@keyframes wave-slide {
    to { left: 100%; }
}

/* Success State */
.success-message {
    background: rgba(56, 161, 105, 0.1);
    border: 2px solid #38a169;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    margin-bottom: 24px;
    display: none;
}

.success-message.active {
    display: block;
}

.success-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.success-text {
    color: #38a169;
    font-weight: 600;
}

/* AI Transcript Section */
.ai-transcript {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    display: none;
}

.ai-transcript.active {
    display: block;
}

.transcript-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.transcript-title {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
}

.edit-transcript-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.transcript-content {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
    font-size: 16px;
    line-height: 1.6;
    color: #2d3748;
    max-height: 200px;
    overflow-y: auto;
}

/* Capture Options */
.capture-section {
    margin-bottom: 32px;
}

.capture-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.capture-btn {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.capture-btn:hover {
    border-color: #FF6B35;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15);
}

.capture-btn.active {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.capture-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.capture-label {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

/* Form Fields */
.form-section {
    margin-bottom: 32px;
}

.required-fields {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2d3748;
    font-size: 16px;
}

.required {
    color: #FF6B35;
}

.form-input {
    width: 100%;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 16px;
    background: white;
    transition: border-color 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #FF6B35;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

/* Image Upload */
.image-upload {
    border: 2px dashed #e2e8f0;
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.image-upload:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.image-upload.has-image {
    border-style: solid;
    border-color: #38a169;
    background: rgba(56, 161, 105, 0.05);
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.upload-text {
    font-size: 16px;
    color: #2d3748;
    font-weight: 500;
}

/* People Tags */
.people-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.person-tag {
    background: #FF6B35;
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.remove-tag {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-person-btn {
    background: #f8fafc;
    border: 2px dashed #e2e8f0;
    color: #64748b;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-person-btn:hover {
    background: #cbd5e0;
}

/* Action Buttons */
.action-buttons {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 360px;
    display: flex;
    gap: 12px;
}

.secondary-btn {
    flex: 1;
    background: #e2e8f0;
    color: #2d3748;
    border: none;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    min-height: 60px;
}

.secondary-btn:hover {
    background: #cbd5e0;
}

.primary-btn {
    flex: 2;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border: none;
    padding: 16px 20px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 60px;
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

.primary-btn:disabled {
    background: #e2e8f0;
    color: #a0aec0;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Responsive adjustments */
@media (max-width: 375px) {
    .container {
        max-width: 100%;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* Memory View Page Styles */
.memory-view-header {
    background: white;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.memory-view-header .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.memory-view-header .back-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.memory-view-header .back-btn:hover {
    background: #f8fafc;
}

.memory-view-header .header-actions {
    display: flex;
    gap: 8px;
}

.memory-view-header .action-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.memory-view-header .action-btn:hover {
    background: #f8fafc;
}

.memory-view-header .action-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
}

.memory-view-header .action-btn.primary:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

/* New Memory Success Message */
.new-memory-success {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3);
    z-index: 1000;
    animation: slideInDown 0.5s ease-out;
}

.success-content {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.success-icon {
    font-size: 24px;
    animation: sparkle 1s ease-in-out infinite alternate;
}

.success-text {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 2px;
}

.success-subtext {
    font-size: 14px;
    opacity: 0.9;
}

@keyframes slideInDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes sparkle {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.1) rotate(5deg); }
}

/* Memory Share Page Styles */
.memory-share-header {
    background: white;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.memory-share-header .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.memory-share-header .skip-btn {
    font-size: 14px;
    color: #64748b;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
}

.memory-share-header .skip-btn:hover {
    color: #2d3748;
}

/* Memory Preview */
.memory-preview {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 32px;
}

.memory-preview .memory-image {
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.memory-preview .memory-content {
    padding: 16px;
}

.memory-preview .memory-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.memory-preview .memory-date {
    color: #FF6B35;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.memory-preview .memory-description {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
}

/* Share Options */
.share-options {
    margin-bottom: 32px;
}

.share-option {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.share-option:hover {
    border-color: #cbd5e0;
    transform: translateY(-1px);
}

.share-option.selected {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.share-option.selected::after {
    content: '✓';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
    background: #FF6B35;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

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

.option-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.option-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.option-content p {
    color: #64748b;
    font-size: 16px;
    line-height: 1.5;
}

/* Time Capsule Settings */
.time-capsule-settings {
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    display: none;
}

.time-capsule-settings.active {
    display: block;
}

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

.settings-icon {
    font-size: 32px;
}

.settings-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.delivery-triggers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.trigger-btn {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.trigger-btn:hover {
    border-color: #cbd5e0;
}

.trigger-btn.selected {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.trigger-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.trigger-label {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

/* People Selection */
.people-section {
    margin-bottom: 32px;
}

.people-section .people-grid {
    display: grid;
    gap: 12px;
}

.people-section .person-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.people-section .person-card:hover {
    border-color: #cbd5e0;
}

.people-section .person-card.selected {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.people-section .person-card.selected::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    background: #FF6B35;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.people-section .person-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}

.people-section .person-info h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.people-section .person-info p {
    color: #64748b;
    font-size: 14px;
}

/* Preview Section */
.preview-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 32px;
}

.preview-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-item {
    background: white;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #64748b;
}

.preview-item strong {
    color: #2d3748;
}

/* Success Animation */
.success-animation {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 107, 53, 0.95);
    color: white;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.success-animation.active {
    display: flex;
}

.success-icon {
    font-size: 80px;
    margin-bottom: 24px;
    animation: success-bounce 0.6s ease-out;
}

@keyframes success-bounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.success-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.success-message {
    font-size: 18px;
    opacity: 0.9;
    max-width: 300px;
    line-height: 1.5;
}

/* Settings Page Styles */
.settings-header {
    background: white;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.settings-header .help-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.settings-header .help-btn:hover {
    background: #f8fafc;
}

/* Profile Section */
.profile-section {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    padding: 32px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.profile-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: gentle-pulse 4s ease-in-out infinite;
}

@keyframes gentle-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 32px;
    font-weight: 600;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.profile-avatar:hover {
    transform: scale(1.05);
}

.profile-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.profile-email {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.profile-plan {
    background: rgba(255,255,255,0.2);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    position: relative;
    z-index: 1;
}

/* Settings Sections */
.settings-section {
    padding: 24px 20px;
    border-bottom: 8px solid #f8fafc;
}

.settings-section:last-child {
    border-bottom: none;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-icon {
    font-size: 20px;
}

.settings-list {
    display: grid;
    gap: 12px;
}

.setting-item {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 16px;
}

.setting-item:hover {
    border-color: #cbd5e0;
    background: #f8fafc;
}

.setting-item.warning {
    border-color: #ed8936;
    background: rgba(237, 137, 54, 0.05);
}

.setting-item.warning:hover {
    border-color: #dd6b20;
    background: rgba(237, 137, 54, 0.1);
}

.setting-item.danger {
    border-color: #e53e3e;
    background: rgba(229, 62, 62, 0.05);
}

.setting-item.danger:hover {
    border-color: #c53030;
    background: rgba(229, 62, 62, 0.1);
}

.setting-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: #f8fafc;
    color: #64748b;
}

.setting-icon.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
}

.setting-icon.success {
    background: #38a169;
    color: white;
}

.setting-icon.warning {
    background: #ed8936;
    color: white;
}

.setting-icon.danger {
    background: #e53e3e;
    color: white;
}

.setting-content {
    flex: 1;
}

.setting-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.setting-description {
    font-size: 14px;
    color: #64748b;
    line-height: 1.4;
}

.setting-value {
    font-size: 14px;
    color: #FF6B35;
    font-weight: 500;
}

.setting-arrow {
    color: #a0aec0;
    font-size: 16px;
}

.setting-toggle {
    width: 48px;
    height: 24px;
    background: #e2e8f0;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}

.setting-toggle.enabled {
    background: #38a169;
}

.setting-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.setting-toggle.enabled::after {
    transform: translateX(24px);
}

/* Account Cards */
.account-cards {
    display: grid;
    gap: 12px;
}

.account-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-card.connected {
    border-color: #38a169;
    background: rgba(56, 161, 105, 0.05);
}

.account-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.google { background: #4285f4; color: white; }
.apple { background: #000; color: white; }
.facebook { background: #1877f2; color: white; }
.microsoft { background: #00a1f1; color: white; }

.account-info {
    flex: 1;
}

.account-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.account-status {
    font-size: 14px;
    color: #64748b;
}

.account-status.connected {
    color: #38a169;
    font-weight: 500;
}

.account-btn {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
}

.account-btn:hover {
    border-color: #cbd5e0;
    background: #e2e8f0;
}

.account-btn.disconnect {
    color: #e53e3e;
    border-color: #feb2b2;
    background: rgba(229, 62, 62, 0.05);
}

.account-btn.disconnect:hover {
    border-color: #f56565;
    background: rgba(229, 62, 62, 0.1);
}

/* Plan Card */
.plan-card {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    border-radius: 16px;
    padding: 24px;
    color: white;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.plan-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: gentle-pulse 3s ease-in-out infinite;
}

.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.plan-info h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 4px;
}

.plan-info p {
    font-size: 14px;
    opacity: 0.9;
}

.plan-price {
    text-align: right;
}

.plan-amount {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 2px;
}

.plan-billing {
    font-size: 12px;
    opacity: 0.8;
}

.plan-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.plan-feature {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.plan-actions {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.plan-btn {
    flex: 1;
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    padding: 12px 16px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.plan-btn:hover {
    background: rgba(255,255,255,0.3);
    border-color: rgba(255,255,255,0.5);
}

/* Export Card */
.export-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}

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

.export-icon {
    font-size: 24px;
}

.export-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.export-description {
    color: #64748b;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.export-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.export-btn {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
    text-align: center;
}

.export-btn:hover {
    border-color: #cbd5e0;
    background: #f8fafc;
}

.export-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Support Card */
.support-card {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}

.support-header {
    margin-bottom: 16px;
}

.support-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.support-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.support-option {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.support-option:hover {
    border-color: #cbd5e0;
    background: #f8fafc;
}

.support-option-icon {
    font-size: 24px;
}

.support-option-text {
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
}

/* Hero Image */
.hero-image {
    width: 100%;
    height: 280px;
    background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 80px;
    position: relative;
    overflow: hidden;
}

.hero-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3));
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: #FF6B35;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.play-btn:hover {
    background: white;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Memory Content */
.memory-content {
    padding: 24px 20px;
    padding-bottom: 120px; /* Space for action bar */
}

/* Memory Header */
.memory-header {
    margin-bottom: 24px;
}

.memory-date {
    color: #FF6B35;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.memory-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #2d3748;
    line-height: 1.3;
}

.memory-location {
    color: #64748b;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Story Content */
.story-section {
    margin-bottom: 32px;
}

.story-text {
    font-size: 18px;
    line-height: 1.7;
    color: #2d3748;
    margin-bottom: 20px;
}

.story-text::first-line {
    font-weight: 600;
}

/* Audio Player */
.audio-player {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.audio-play-btn {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.audio-play-btn:hover {
    transform: scale(1.05);
}

.audio-info {
    flex: 1;
}

.audio-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.audio-duration {
    color: #64748b;
    font-size: 14px;
}

.audio-waveform {
    background: #e2e8f0;
    height: 4px;
    border-radius: 2px;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}

.audio-progress {
    background: linear-gradient(90deg, #FF6B35 0%, #F7931E 100%);
    height: 100%;
    width: 35%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* People Involved */
.people-section {
    margin-bottom: 32px;
}

.people-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.person-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.person-card:hover {
    background: #e2e8f0;
    transform: translateY(-1px);
}

.person-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin: 0 auto 12px;
}

.person-name {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.person-relation {
    font-size: 12px;
    color: #64748b;
}

/* Memory Tags */
.tags-section {
    margin-bottom: 32px;
}

.memory-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.memory-tag {
    background: rgba(255, 107, 53, 0.1);
    color: #FF6B35;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

/* Photo Gallery */
.gallery-section {
    margin-bottom: 32px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.photo-item {
    aspect-ratio: 1;
    background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    cursor: pointer;
    transition: transform 0.2s ease;
    overflow: hidden;
}

.photo-item:hover {
    transform: scale(1.02);
}

.photo-item.large {
    grid-column: span 2;
    aspect-ratio: 2/1;
}

/* Navigation */
.memory-navigation {
    background: #f8fafc;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-btn {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
}

.nav-btn:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.memory-counter {
    color: #64748b;
    font-size: 14px;
}

/* Family Interactions */
.interactions-section {
    margin-bottom: 32px;
}

.reaction-bar {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reactions {
    display: flex;
    gap: 12px;
}

.reaction-btn {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.reaction-btn:hover, .reaction-btn.active {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.share-btn {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: transform 0.2s ease;
}

.share-btn:hover {
    transform: translateY(-1px);
}

.comments-section {
    margin-top: 16px;
}

.comment {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid #FF6B35;
}

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

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.comment-info {
    flex: 1;
}

.comment-author {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

.comment-time {
    font-size: 12px;
    color: #64748b;
}

.comment-text {
    color: #2d3748;
    font-size: 16px;
    line-height: 1.5;
}

/* Action Bar */
.action-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 360px;
    background: white;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    display: flex;
    gap: 12px;
}

.action-bar-btn {
    flex: 1;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 60px;
    justify-content: center;
}

.action-bar-btn:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.action-bar-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-color: transparent;
}

.action-bar-btn.primary:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

.action-icon {
    font-size: 20px;
}

.action-label {
    font-size: 12px;
    font-weight: 500;
}

/* Time Capsule Message */
.time-capsule-message {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
    text-align: center;
}

.capsule-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.capsule-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.capsule-message {
    font-size: 16px;
    opacity: 0.9;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 375px) {
    .people-grid, .photo-grid {
        grid-template-columns: 1fr;
    }
    
    .photo-item.large {
        grid-column: span 1;
        aspect-ratio: 1;
    }
}

/* Album View Styles */
.album-view-container {
  background: #1a1a1a;
  color: #2d3748;
  min-height: 100vh;
  overflow-x: hidden;
}

.album-view-container .album-header {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  border-bottom: 1px solid #e2e8f0;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  z-index: 100;
  color: white;
}

.album-view-container .album-header .back-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.album-view-container .album-header .back-btn:hover {
  background: rgba(255,255,255,0.2);
}

.album-info {
  flex: 1;
  text-align: center;
  color: white;
}

.album-title-header {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}

.page-indicator {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}

.header-actions {
  display: flex;
  gap: 8px;
}

.action-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.action-btn:hover {
  background: rgba(255,255,255,0.2);
}

/* Book Container */
.book-container {
  padding: 80px 0 80px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-page {
  width: 100%;
  max-width: 360px;
  margin: 0 20px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  overflow: hidden;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.book-page:hover {
  transform: perspective(1000px) rotateY(-5deg);
}

/* Page Content */
.page-content {
  display: none;
  animation: fadeIn 0.5s ease-in-out;
}

.page-content.active {
  display: block;
}

.page-content.page-turn-exit {
  animation: pageOut 0.3s ease-in-out;
}

.page-content.page-turn-enter {
  animation: pageIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pageOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-100%); }
}

@keyframes pageIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

/* Cover Page */
.cover-page {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  color: white;
  text-align: center;
  padding: 60px 40px;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cover-page::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: gentle-pulse 6s ease-in-out infinite;
}

@keyframes gentle-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.cover-icon {
  font-size: 80px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.cover-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
  line-height: 1.2;
}

.cover-subtitle {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.cover-author {
  font-size: 16px;
  opacity: 0.8;
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* Introduction Page */
.intro-page {
  padding: 60px 40px;
  background: #f8f9fa;
  text-align: center;
}

.intro-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #2d3748;
}

.intro-text {
  font-size: 18px;
  line-height: 1.7;
  color: #4a5568;
  margin-bottom: 32px;
}

.intro-dedication {
  background: rgba(255, 107, 53, 0.1);
  border-left: 4px solid #FF6B35;
  padding: 20px;
  border-radius: 8px;
  font-style: italic;
  color: #2d3748;
}

/* Memory Page */
.memory-page {
  padding: 40px;
  min-height: 500px;
}

.memory-header {
  text-align: center;
  margin-bottom: 32px;
}

.memory-date {
  color: #FF6B35;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.memory-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #2d3748;
}

.memory-location {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 24px;
}

.memory-image {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  margin-bottom: 24px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.memory-image:hover {
  transform: scale(1.02);
}

.memory-story {
  font-size: 16px;
  line-height: 1.8;
  color: #2d3748;
  margin-bottom: 24px;
}

.memory-story::first-line {
  font-weight: 600;
  font-size: 17px;
}

.memory-quote {
  background: #f8f9fa;
  border-left: 4px solid #FF6B35;
  padding: 20px;
  border-radius: 8px;
  font-style: italic;
  color: #2d3748;
  margin-bottom: 24px;
}

/* Audio Player */
.audio-player {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.audio-play-btn {
  background: #FF6B35;
  color: white;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.audio-play-btn:hover {
  background: #e55a2b;
}

.audio-info {
  flex: 1;
}

.audio-title {
  font-size: 14px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 8px;
}

.audio-waveform {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.audio-progress {
  height: 100%;
  background: #FF6B35;
  width: 30%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* People Avatars */
.memory-people {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.person-avatar {
  width: 40px;
  height: 40px;
  background: #FF6B35;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

/* QR Code */
.qr-code {
  width: 120px;
  height: 120px;
  background: #f8f9fa;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  margin: 24px auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.qr-code:hover {
  transform: scale(1.05);
}

.qr-caption {
  text-align: center;
  font-size: 12px;
  color: #64748b;
  margin-top: 8px;
}

/* Photo Page */
.photo-page {
  padding: 40px;
  min-height: 500px;
}

.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.photo-item {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  cursor: pointer;
  transition: transform 0.2s ease;
  height: 120px;
}

.photo-item.large {
  grid-column: 1 / -1;
  height: 180px;
  font-size: 48px;
}

.photo-item:hover {
  transform: scale(1.02);
}

.photo-caption {
  text-align: center;
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

/* Final Page */
.final-page {
  padding: 60px 40px;
  background: #f8f9fa;
  text-align: center;
  min-height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.final-icon {
  font-size: 80px;
  margin-bottom: 24px;
}

.final-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 24px;
  color: #2d3748;
}

.final-message {
  font-size: 18px;
  line-height: 1.7;
  color: #4a5568;
  margin-bottom: 32px;
}

.final-signature {
  font-size: 16px;
  color: #2d3748;
  font-style: italic;
  font-weight: 600;
}

/* Album Navigation */
.album-navigation {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: blur(10px);
  padding: 16px 24px;
  border-radius: 24px;
  z-index: 50;
}

.nav-btn {
  background: rgba(255,255,255,0.1);
  border: none;
  color: white;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: background 0.2s ease;
}

.nav-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.2);
}

.nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-dots {
  display: flex;
  gap: 8px;
}

.page-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: background 0.2s ease;
}

.page-dot.active {
  background: #FF6B35;
}

.page-dot:hover {
  background: rgba(255,255,255,0.5);
}

/* Action Menu */
.action-menu {
  position: fixed;
  right: 20px;
  bottom: 50%;
  transform: translateY(50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 50;
}

.action-menu-btn {
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: blur(10px);
  border: none;
  color: white;
  cursor: pointer;
  padding: 12px;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.action-menu-btn:hover {
  background: rgba(255, 107, 53, 0.9);
}

/* Album View Bottom Navigation Override */
.album-view-container .bottom-nav {
  background: white;
  border-top: 1px solid #e2e8f0;
}

/* Album Creation Studio Styles */
.album-creation-studio .header {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.album-creation-studio .header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.album-creation-studio .close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.album-creation-studio .close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.album-creation-studio .page-title {
  font-size: 20px;
  font-weight: 700;
  color: white;
}

.album-creation-studio .save-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.album-creation-studio .save-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Memory Recording Studio Header Styles */
.memory-recording-studio .close-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.memory-recording-studio .close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Save Draft Bar */
.save-draft-bar {
  background: white;
  border-bottom: 1px solid #e2e8f0;
  padding: 8px 20px;
  display: flex;
  justify-content: center;
}

.save-draft-btn {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.save-draft-btn:hover {
  background: #e2e8f0;
  border-color: #cbd5e0;
}

.save-draft-btn svg {
  opacity: 0.7;
}

/* Progress Steps */
.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress-steps .step {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  margin: 0 2px;
  border-radius: 2px;
  transition: background 0.3s ease;
}

.progress-steps .step.completed {
  background: rgba(255, 255, 255, 0.8);
}

.progress-steps .step.active {
  background: white;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.progress-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin-top: 4px;
}

/* Step Content */
.step-content {
  display: none;
}

.step-content.active {
  display: block;
}

.step-header {
  text-align: center;
  margin-bottom: 32px;
}

.step-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.step-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #2d3748;
}

.step-subtitle {
  color: #64748b;
  font-size: 16px;
  max-width: 300px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Format Selection */
.format-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.format-option {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.format-option:hover {
  border-color: #cbd5e0;
  transform: translateY(-2px);
}

.format-option.selected {
  border-color: #FF6B35;
  background: rgba(255, 107, 53, 0.05);
}

.format-option.selected::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  background: #FF6B35;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.format-icon {
  font-size: 32px;
  margin-bottom: 12px;
}

.format-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #2d3748;
}

.format-desc {
  font-size: 14px;
  color: #64748b;
}

/* Cover Photo Upload */
.cover-upload {
  border: 2px dashed #cbd5e0;
  border-radius: 16px;
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #f8fafc;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.cover-upload:hover {
  border-color: #FF6B35;
  background: rgba(255, 107, 53, 0.05);
}

.cover-upload.has-image {
  border-color: #38a169;
  background: rgba(56, 161, 105, 0.05);
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 12px;
  color: #cbd5e0;
}

.cover-upload:hover .upload-icon {
  color: #FF6B35;
}

.upload-text {
  color: #64748b;
  font-size: 16px;
  margin-bottom: 4px;
}

.upload-subtext {
  color: #a0aec0;
  font-size: 14px;
}

/* Theme Selection */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.theme-option {
  aspect-ratio: 1;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 3px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
}

.theme-option:hover {
  transform: scale(1.05);
}

.theme-option.selected {
  border-color: #FF6B35;
  transform: scale(1.05);
}

.theme-option.selected::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: #FF6B35;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.theme-classic { background: linear-gradient(135deg, #f7fafc 0%, #e2e8f0 100%); }
.theme-warm { background: linear-gradient(135deg, #fed7cc 0%, #f6ad55 100%); }
.theme-nature { background: linear-gradient(135deg, #c6f6d5 0%, #68d391 100%); }
.theme-elegant { background: linear-gradient(135deg, #e9d8fd 0%, #b794f6 100%); }
.theme-vintage { background: linear-gradient(135deg, #fbb6ce 0%, #f687b3 100%); }
.theme-modern { background: linear-gradient(135deg, #bee3f8 0%, #4299e1 100%); }

/* Memory Selection */
.memory-grid {
  display: grid;
  gap: 16px;
}

.memory-item {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.memory-item:hover {
  border-color: #cbd5e0;
  transform: translateY(-1px);
}

.memory-item.selected {
  border-color: #FF6B35;
  background: rgba(255, 107, 53, 0.05);
}

.memory-item.selected::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  background: #FF6B35;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.memory-thumbnail {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.memory-content {
  flex: 1;
}

.memory-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #2d3748;
}

.memory-date {
  color: #FF6B35;
  font-size: 14px;
  margin-bottom: 4px;
}

.memory-description {
  color: #64748b;
  font-size: 14px;
  line-height: 1.4;
}

/* Recipients Selection */
.recipients-grid {
  display: grid;
  gap: 12px;
}

.recipient-item {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
}

.recipient-item:hover {
  border-color: #cbd5e0;
}

.recipient-item.selected {
  border-color: #FF6B35;
  background: rgba(255, 107, 53, 0.05);
}

.recipient-item.selected::after {
  content: '✓';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  background: #FF6B35;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.recipient-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}

.recipient-info h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #2d3748;
}

.recipient-info p {
  color: #64748b;
  font-size: 14px;
}

/* Preview Section */
.preview-section {
  background: #f8fafc;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
}

.preview-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #2d3748;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-item {
  background: white;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #64748b;
}

.preview-item strong {
  color: #2d3748;
}

/* Action Buttons */
.action-buttons {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 360px;
  display: flex;
  gap: 12px;
}

.secondary-btn {
  flex: 1;
  background: #e2e8f0;
  color: #2d3748;
  border: none;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  min-height: 60px;
}

.secondary-btn:hover {
  background: #cbd5e0;
}

.primary-btn {
  flex: 2;
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  color: white;
  border: none;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 60px;
}

.primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 53, 0.4);
}

.primary-btn:disabled {
  background: #e2e8f0;
  color: #a0aec0;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Success Animation */
.success-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 107, 53, 0.95);
  color: white;
  z-index: 1000;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

.success-overlay.active {
  display: flex;
}

.success-icon {
  font-size: 80px;
  margin-bottom: 24px;
  animation: success-bounce 0.6s ease-out;
}

@keyframes success-bounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.success-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}

.success-message {
  font-size: 18px;
  opacity: 0.9;
  max-width: 300px;
  line-height: 1.5;
}

/* Helper Text */
.helper-text {
  background: rgba(255, 107, 53, 0.1);
  border-left: 4px solid #FF6B35;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.helper-text p {
  color: #2d3748;
  font-size: 14px;
  margin: 0;
}

/* Selection Counter */
.selection-counter {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  color: white;
  padding: 12px 16px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 600;
}

/* Album Print Design Layout Styles */
.album-design-layout .header {
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.album-design-layout .header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.album-design-layout .back-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.album-design-layout .back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.album-design-layout .page-title {
  font-size: 20px;
  font-weight: 700;
  color: white;
}

.album-design-layout .save-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.album-design-layout .save-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

.album-design-layout .progress-text {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  margin-top: 4px;
}

/* Memory Selection */
.memory-selector {
  margin-bottom: 32px;
}

.selector-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #2d3748;
}

.memory-dropdown {
  width: 100%;
  padding: 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 16px;
  background: white;
  cursor: pointer;
  transition: border-color 0.2s ease;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.memory-dropdown:hover {
  border-color: #cbd5e0;
}

.memory-dropdown.open {
  border-color: #FF6B35;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.dropdown-list {
  display: none;
  border: 2px solid #FF6B35;
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background: white;
  max-height: 200px;
  overflow-y: auto;
}

.dropdown-list.open {
  display: block;
}

.dropdown-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid #f8fafc;
}

.dropdown-item:hover {
  background: #f8fafc;
}

.dropdown-item:last-child {
  border-bottom: none;
}

/* Layout Options */
.layout-section {
  margin-bottom: 32px;
}

.layout-options {
  display: grid;
  gap: 16px;
}

.layout-option {
  background: white;
  border: 3px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.layout-option:hover {
  border-color: #cbd5e0;
  transform: translateY(-2px);
}

.layout-option.selected {
  border-color: #FF6B35;
  background: rgba(255, 107, 53, 0.05);
}

.layout-option.selected::after {
  content: '✓';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  background: #FF6B35;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

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

.layout-icon {
  font-size: 24px;
}

.layout-name {
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
}

.layout-description {
  color: #64748b;
  font-size: 14px;
  margin-bottom: 16px;
}

/* Page Preview */
.page-preview {
  background: #f8fafc;
  border: 2px dashed #cbd5e0;
  border-radius: 12px;
  padding: 16px;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}

.preview-qr {
  width: 40px;
  height: 40px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin: 0 auto 12px;
}

.preview-image {
  width: 100%;
  height: 80px;
  background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: white;
  margin-bottom: 12px;
}

.preview-image.small {
  width: 60px;
  height: 60px;
  float: left;
  margin-right: 12px;
  margin-bottom: 8px;
  font-size: 24px;
}

.preview-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #2d3748;
}

.preview-text {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

/* Layout-specific styles */
.layout-photo-story .preview-image {
  height: 100px;
}

.layout-story-photo .preview-text {
  margin-bottom: 12px;
}

.layout-text-focus .preview-image {
  height: 60px;
}

/* Smart Brevity Preview */
.brevity-preview {
  background: rgba(255, 107, 53, 0.1);
  border-left: 4px solid #FF6B35;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.brevity-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #2d3748;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brevity-content {
  font-size: 14px;
  color: #4a5568;
}

.brevity-bullet {
  margin: 4px 0;
}

/* Current Page Info */
.page-info {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  text-align: center;
}

.page-number {
  font-size: 24px;
  font-weight: 700;
  color: #FF6B35;
  margin-bottom: 4px;
}

.page-description {
  color: #64748b;
  font-size: 14px;
}

/* Page Navigation */
.page-navigation {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 2px solid #e2e8f0;
}

.nav-btn {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: #2d3748;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-btn:hover {
  border-color: #cbd5e0;
  background: #e2e8f0;
}

.nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-counter {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.album-view-container .nav-item {
  color: #64748b !important;
}

.album-view-container .nav-item:hover {
  background: #f8fafc;
}

.album-view-container .nav-item.active {
  color: #FF6B35 !important;
}

.album-view-container .nav-item.active .nav-icon {
  color: #FF6B35 !important;
}

.album-view-container .nav-icon {
  color: #64748b !important;
}

.album-view-container .nav-label {
  color: #64748b !important;
}

.album-view-container .nav-item.active .nav-label {
  color: #FF6B35 !important;
}

/* Responsive Design */
@media (max-width: 480px) {
  .album-navigation {
    bottom: 70px;
    padding: 12px 16px;
    gap: 16px;
  }
  
  .nav-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
  
  .action-menu {
    right: 12px;
  }
  
  .memory-page, .intro-page, .photo-page, .final-page {
    padding: 32px 24px;
  }
  
  .cover-page {
    padding: 48px 32px;
  }
}

/* AI Formatted Story Styles */
.ai-formatted-story {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.format-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e1e8ed;
}

.format-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.format-subtitle {
  font-size: 14px;
  color: #7f8c8d;
}

.edit-story-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.edit-story-btn:hover {
  background: #2980b9;
}

/* Formatted Story Content */
.formatted-story-content {
  margin-bottom: 24px;
}

.story-moment,
.story-main,
.story-meaning {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #FF6B35;
}

.story-icon {
  font-size: 20px;
  margin-right: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.story-text {
  flex: 1;
  font-size: 16px;
  line-height: 1.6;
  color: #2c3e50;
}

.story-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 20px;
}

/* Original Story Modal */
.original-story {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #e1e8ed;
}

.original-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e1e8ed;
}

.original-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.close-original-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #7f8c8d;
  cursor: pointer;
  padding: 4px;
}

.close-original-btn:hover {
  color: #2c3e50;
}

.original-content {
  font-size: 16px;
  line-height: 1.6;
  color: #2c3e50;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #95a5a6;
}

/* Detailed Story Modal */
.detailed-story {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #e1e8ed;
}

.detailed-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e1e8ed;
}

.detailed-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.detailed-subtitle {
  font-size: 14px;
  color: #7f8c8d;
}

.close-detailed-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #7f8c8d;
  cursor: pointer;
  padding: 4px;
  margin-left: 16px;
}

.close-detailed-btn:hover {
  color: #2c3e50;
}

.detailed-content {
  font-size: 16px;
  line-height: 1.6;
  color: #2c3e50;
}

.detailed-section {
  margin-bottom: 24px;
}

.detailed-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: #FF6B35;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #FF6B35;
}

.detailed-section p {
  margin-bottom: 12px;
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.detailed-section:last-child {
  margin-bottom: 0;
}

/* Media Upload Section */
.media-upload-section {
  margin-top: 24px;
}

.media-upload-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.media-upload-box {
  background: #f8f9fa;
  border: 2px dashed #e1e8ed;
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.media-upload-box:hover {
  border-color: #FF6B35;
  background: rgba(255, 107, 53, 0.05);
}

.media-upload-box .upload-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.media-upload-box .upload-text {
  font-size: 14px;
  font-weight: 500;
  color: #2c3e50;
}

/* Story Edit Mode */
.story-edit-mode {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin: 20px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #3498db;
}

.edit-header {
  margin-bottom: 24px;
  text-align: center;
}

.edit-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.edit-subtitle {
  font-size: 14px;
  color: #7f8c8d;
}

.edit-section {
  margin-bottom: 20px;
}

.edit-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 8px;
}

.edit-textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.edit-textarea:focus {
  outline: none;
  border-color: #3498db;
}

.edit-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

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

.section-icon {
  font-size: 24px;
  margin-right: 12px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-right: 12px;
}

.section-subtitle {
  font-size: 14px;
  color: #7f8c8d;
  font-style: italic;
}

.section-help {
  margin-bottom: 16px;
  padding: 12px;
  background: #e8f4f8;
  border-radius: 6px;
  border-left: 3px solid #3498db;
}

.section-help p {
  margin: 0;
  font-size: 14px;
  color: #2c3e50;
}

.story-textarea {
  min-height: 80px;
  resize: vertical;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
}

.dive-deeper-textarea {
  min-height: 150px;
  resize: vertical;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
}

.character-counter, .sentence-counter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  color: #7f8c8d;
}

.character-counter span:first-child,
.sentence-counter span:first-child {
  font-weight: 600;
  color: #2c3e50;
}

.counter-guide {
  font-size: 11px;
  color: #27ae60;
}

.dive-deeper-section {
  margin-bottom: 32px;
  padding: 20px;
  background: #f1f8ff;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

/* Album Preview */
.album-preview {
  margin-top: 24px;
  padding: 20px;
  background: #fff;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
}

.preview-header {
  text-align: center;
  margin-bottom: 20px;
}

.preview-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.preview-subtitle {
  font-size: 14px;
  color: #7f8c8d;
}

.preview-page {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e1e8ed;
}

.preview-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e1e8ed;
}

.preview-page-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.preview-qr-code {
  display: flex;
  align-items: center;
  gap: 8px;
  background: white;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #e1e8ed;
}

.qr-icon {
  font-size: 16px;
}

.qr-label {
  font-size: 12px;
  color: #7f8c8d;
}

.preview-story-content {
  margin-bottom: 20px;
}

.preview-moment,
.preview-main,
.preview-meaning {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 12px;
  background: white;
  border-radius: 6px;
  border-left: 4px solid #FF6B35;
}

.preview-icon {
  font-size: 16px;
  margin-right: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}

.preview-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #2c3e50;
}

.preview-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #e1e8ed;
  font-size: 12px;
  color: #7f8c8d;
}

.preview-date {
  font-weight: 600;
}

.preview-qr-note {
  font-style: italic;
}

/* Counter color coding */
.character-counter span:first-child.warning,
.sentence-counter span:first-child.warning {
  color: #f39c12;
}

.character-counter span:first-child.error,
.sentence-counter span:first-child.error {
  color: #e74c3c;
}

/* Album Creation Studio - New Components */
.memory-preview {
  margin-top: 8px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 3px solid #FF6B35;
}

.preview-moment,
.preview-story,
.preview-meaning {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 6px;
  color: #2c3e50;
}

.preview-moment:last-child,
.preview-story:last-child,
.preview-meaning:last-child {
  margin-bottom: 0;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.theme-option {
  aspect-ratio: 1;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.theme-option:hover {
  border-color: #FF6B35;
  transform: translateY(-2px);
}

.theme-option.selected {
  border-color: #FF6B35;
  background: #fff5f0;
}

.theme-name {
  font-size: 12px;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
}

/* Page Designer */
.page-designer {
  background: white;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #e1e8ed;
}

.page-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e1e8ed;
}

.page-indicator {
  text-align: center;
}

.page-number {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  display: block;
}

.page-counter {
  font-size: 14px;
  color: #7f8c8d;
}

.memory-selector,
.layout-selector {
  margin-bottom: 24px;
}

.selector-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
}

.memory-dropdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  cursor: pointer;
  background: white;
  transition: border-color 0.2s;
}

.memory-dropdown:hover {
  border-color: #FF6B35;
}

.memory-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: none;
}

.memory-dropdown-menu.open {
  display: block;
}

.dropdown-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.dropdown-item:hover {
  background: #f8f9fa;
}

.layout-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.layout-option {
  padding: 16px;
  border: 2px solid #e1e8ed;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.layout-option:hover {
  border-color: #FF6B35;
  transform: translateY(-2px);
}

.layout-option.selected {
  border-color: #FF6B35;
  background: #fff5f0;
}

.layout-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.layout-name {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.layout-desc {
  font-size: 14px;
  color: #7f8c8d;
}

.page-preview {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e1e8ed;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e1e8ed;
}

.preview-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.preview-qr {
  background: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  color: #7f8c8d;
  border: 1px solid #e1e8ed;
}

.preview-content {
  display: flex;
  gap: 20px;
}

.preview-photo {
  width: 120px;
  height: 120px;
  background: #e1e8ed;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  flex-shrink: 0;
}

.preview-story {
  flex: 1;
}

.story-section {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
}

.story-icon {
  font-size: 16px;
  margin-right: 12px;
  margin-top: 2px;
  flex-shrink: 0;
}

.story-text {
  font-size: 14px;
  line-height: 1.5;
  color: #2c3e50;
}

/* Album Preview */
.preview-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #e8f4f8;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 24px;
  border-left: 4px solid #3498db;
}

.notice-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.notice-text {
  font-size: 14px;
  line-height: 1.5;
  color: #2c3e50;
}

.album-preview-container {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  margin-bottom: 24px;
  border: 2px dashed #bdc3c7;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.album-preview-placeholder {
  text-align: center;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.placeholder-text {
  font-size: 18px;
  color: #7f8c8d;
  margin-bottom: 20px;
}

.preview-btn {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.preview-btn:hover {
  background: #2980b9;
}

.preview-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* Publishing Options */
.publishing-options {
  margin-bottom: 32px;
}

.publishing-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid #e1e8ed;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.section-icon {
  font-size: 24px;
  margin-right: 12px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-right: 8px;
}

.section-subtitle {
  font-size: 14px;
  color: #7f8c8d;
}

.digital-options,
.print-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.option-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  color: #2c3e50;
}

.option-checkbox input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #e1e8ed;
  border-radius: 4px;
  margin-right: 12px;
  position: relative;
  transition: all 0.2s;
}

.option-checkbox input[type="checkbox"]:checked + .checkmark {
  background: #27ae60;
  border-color: #27ae60;
}

.option-checkbox input[type="checkbox"]:checked + .checkmark::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.print-details {
  margin-top: 16px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.print-option {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.print-option label {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  min-width: 100px;
}

.form-select {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #e1e8ed;
  border-radius: 6px;
  font-size: 14px;
}

.print-cost {
  margin-top: 12px;
  padding: 12px;
  background: #fff5f0;
  border-radius: 6px;
  color: #e67e22;
  font-size: 14px;
}

.recipients-section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .theme-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .layout-options {
    grid-template-columns: 1fr;
  }
  
  .preview-content {
    flex-direction: column;
  }
  
  .preview-photo {
    width: 100%;
    height: 200px;
  }
  
  .page-navigation {
    flex-direction: column;
    gap: 12px;
  }
  
  .preview-actions {
    flex-direction: column;
  }
  
  .print-option {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .print-option label {
    min-width: auto;
    margin-bottom: 4px;
  }
}

/* Smart Scrollbox Story Layout */
.smart-scrollbox-story {
  margin: 24px 0;
  padding: 20px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.scrollbox-section {
  margin-bottom: 24px;
}

.scrollbox-section:last-child {
  margin-bottom: 0;
}

.scrollbox-section .section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.scrollbox-section .section-icon {
  font-size: 18px;
}

.scrollbox-section .section-title {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
}

.scrollbox-section .section-content {
  font-size: 15px;
  line-height: 1.6;
  color: #4a5568;
  padding-left: 26px;
}

.moment-section {
  border-left: 3px solid #fbbf24;
  padding-left: 16px;
}

.story-section {
  border-left: 3px solid #60a5fa;
  padding-left: 16px;
}

.meaning-section {
  border-left: 3px solid #f97316;
  padding-left: 16px;
}

/* Time Capsule Message - moved to top */
.time-capsule-message {
  margin: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #fed7cc 0%, #f6ad55 100%);
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.time-capsule-message .capsule-icon {
  font-size: 20px;
  margin-top: 2px;
}

.time-capsule-message .capsule-content {
  flex: 1;
}

.time-capsule-message .capsule-title {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 4px;
}

.time-capsule-message .capsule-message {
  font-size: 14px;
  color: #4a5568;
  line-height: 1.5;
}

/* Memory Header Improvements */
.memory-header {
  margin-bottom: 24px;
  padding: 0 20px;
}

.memory-header .memory-title {
  font-size: 24px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 12px;
}

.memory-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.memory-date, .memory-location {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #64748b;
}

.meta-icon {
  font-size: 16px;
}

/* Supporting Content Wrapper */
.supporting-content {
  margin-top: 32px;
}

.content-section {
  margin-bottom: 32px;
}

.content-section:last-child {
  margin-bottom: 0;
}

.content-section .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 16px;
  padding: 0 20px;
}

.content-section .section-icon {
  font-size: 20px;
}

/* People Grid Improvements */
.people-section .people-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 20px;
}

.people-section .person-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.people-section .person-card:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.people-section .person-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.people-section .person-info {
  flex: 1;
  min-width: 0;
}

.people-section .person-name {
  font-size: 14px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 2px;
}

.people-section .person-relation {
  font-size: 12px;
  color: #64748b;
}

/* Media Carousel */
.media-carousel {
  padding: 0 20px;
}

.carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 16px;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
  touch-action: pan-y;
}

.carousel-item {
  min-width: 280px;
  height: 180px;
  margin-right: 12px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  transition: all 0.2s ease;
}

.carousel-item:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
}

.carousel-item:last-child {
  margin-right: 0;
}

.media-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  background: linear-gradient(135deg, #68d391 0%, #38a169 100%);
}

.video-item .media-content {
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
}

.play-btn:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) scale(1.1);
}

.media-type {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.indicator.active {
  background: #3b82f6;
  transform: scale(1.2);
}

.indicator:hover {
  background: #94a3b8;
}

/* Tags Section Improvements */
.tags-section {
  padding: 0 20px;
}

.tags-section .memory-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags-section .memory-tag {
  background: #e2e8f0;
  color: #4a5568;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

/* Interactions Section */
.interactions-section {
  padding: 0 20px;
  margin-top: 32px;
}

.interactions-section .section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 16px;
}

.interactions-section .section-icon {
  font-size: 20px;
}

.comment-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-btn:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

/* Hero Media Wrapper */
.hero-media {
  margin-bottom: 20px;
}

.hero-media .hero-image {
  width: 100%;
  height: 200px;
  background: linear-gradient(135deg, #68d391 0%, #38a169 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 375px) {
  .scrollbox-section .section-content {
    padding-left: 20px;
  }
  
  .people-section .people-grid {
    grid-template-columns: 1fr;
  }
  
  .carousel-item {
    min-width: 240px;
  }
  
  .media-carousel {
    padding: 0 16px;
  }
}

/* ==================== LOVED ONES PERSON PAGE ==================== */

/* Person Profile Section */
.person-profile {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    padding: 32px 20px;
    position: relative;
    overflow: hidden;
}

.person-profile::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: gentle-pulse 4s ease-in-out infinite;
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.person-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 600;
    position: relative;
}

.person-avatar.online::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: #38a169;
    border: 4px solid white;
    border-radius: 50%;
}

.profile-info {
    flex: 1;
}

.person-name {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.person-relation {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 8px;
}

.person-status {
    font-size: 14px;
    opacity: 0.8;
}

.profile-stats {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.profile-stats .stat-item {
    text-align: center;
    flex: 1;
}

.profile-stats .stat-number {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.profile-stats .stat-label {
    font-size: 14px;
    opacity: 0.9;
}

/* Fix header colors for loved-ones-person page */
.loved-ones-person-page .header {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
}

.loved-ones-person-page .header .back-btn {
    color: white !important;
}

.loved-ones-person-page .header .back-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.loved-ones-person-page .header .action-btn {
    color: white !important;
}

.loved-ones-person-page .header .action-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.loved-ones-person-page .header .page-title {
    color: white !important;
}

/* Ensure all text in person profile is white */
.person-profile .person-name,
.person-profile .person-relation,
.person-profile .person-status {
    color: white !important;
}

/* Quick Actions Grid */
.quick-actions {
    padding: 20px;
    border-bottom: 8px solid #f8fafc;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.quick-action {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quick-action:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
    transform: translateY(-2px);
}

.quick-action-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.quick-action-label {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
}

/* Content Sections */
.content-section {
    padding: 24px 20px;
    border-bottom: 8px solid #f8fafc;
}

.content-section:last-child {
    border-bottom: none;
    padding-bottom: 100px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-icon {
    font-size: 20px;
}

.section-action {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
}

.section-action:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

/* Memory Cards in Person Page */
.memories-grid {
    display: grid;
    gap: 16px;
}

.memory-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.memory-card:hover {
    border-color: #cbd5e0;
    transform: translateY(-1px);
}

.memory-image {
    width: 100%;
    height: 100px;
    background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.memory-content {
    padding: 16px;
}

.memory-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.memory-date {
    color: #FF6B35;
    font-size: 14px;
    margin-bottom: 8px;
}

.memory-description {
    color: #64748b;
    font-size: 14px;
    line-height: 1.4;
}

/* Time Capsule Cards */
.capsule-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.capsule-card:hover {
    border-color: #cbd5e0;
    transform: translateY(-1px);
}

.capsule-card.scheduled {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.capsule-status {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.capsule-status.scheduled {
    background: rgba(255, 107, 53, 0.1);
    color: #FF6B35;
}

.capsule-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.capsule-delivery {
    color: #FF6B35;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.capsule-message {
    color: #64748b;
    font-size: 14px;
    line-height: 1.4;
    font-style: italic;
}

/* Access Permissions */
.permissions-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

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

.permissions-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.permissions-grid {
    display: grid;
    gap: 12px;
}

.permission-item {
    background: white;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.permission-info {
    flex: 1;
}

.permission-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.permission-description {
    font-size: 14px;
    color: #64748b;
}

.permission-toggle {
    width: 48px;
    height: 24px;
    background: #e2e8f0;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}

.permission-toggle.enabled {
    background: #38a169;
}

.permission-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.permission-toggle.enabled::after {
    transform: translateX(24px);
}

/* Estate Activation */
.estate-section {
    background: rgba(237, 137, 54, 0.1);
    border: 2px solid #ed8936;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

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

.estate-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.estate-description {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.trigger-options {
    display: grid;
    gap: 8px;
}

.trigger-option {
    background: white;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.trigger-option:hover {
    background: #f8fafc;
}

.trigger-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ed8936;
}

.trigger-label {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #2d3748;
}

/* Document Upload */
.document-upload {
    background: white;
    border: 2px dashed #cbd5e0;
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.document-upload:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.upload-icon {
    font-size: 48px;
    margin-bottom: 16px;
    color: #64748b;
}

.upload-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2d3748;
}

.upload-description {
    color: #64748b;
    font-size: 14px;
    line-height: 1.4;
}

/* Header Actions for Person Page */
.header-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.action-btn:hover {
    background: #f8fafc;
}

.action-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
}

.action-btn.primary:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

/* Notification animations */
@keyframes slideDown {
    from {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translate(-50%, 0);
        opacity: 1;
    }
    to {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
}

/* Responsive adjustments for person page */
@media (max-width: 375px) {
    .actions-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-action {
        min-height: 60px;
    }
    
    .profile-stats {
        gap: 12px;
    }
    
    .profile-stats .stat-number {
        font-size: 20px;
    }
}

/* DOCUMENT MANAGER STYLES */

/* Document Manager Header */
.document-manager-header {
    background: white;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.document-manager-header .back-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.document-manager-header .back-btn:hover {
    background: #f8fafc;
}

.document-manager-header .page-title {
    font-size: 20px;
    font-weight: 700;
    color: #2d3748;
}

.document-manager-header .header-actions {
    display: flex;
    gap: 8px;
}

.document-manager-header .action-btn {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    color: #2d3748;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.document-manager-header .action-btn:hover {
    border-color: #cbd5e0;
    background: #e2e8f0;
}

.document-manager-header .action-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border: none;
}

.document-manager-header .action-btn.primary:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

/* Upload Section */
.upload-section {
    padding: 20px;
    background: white;
    border-bottom: 8px solid #f8fafc;
}

.upload-section .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.upload-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.upload-source {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.upload-source:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.upload-source-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.upload-source-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.upload-source-subtitle {
    font-size: 11px;
    color: #64748b;
}

.scan-btn {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: background 0.2s ease;
}

.scan-btn:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

/* Document Categories */
.categories-section {
    background: white;
    padding-bottom: 100px;
}

.category-card {
    border-bottom: 1px solid #e2e8f0;
}

.category-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s ease;
}

.category-header:hover {
    background: #f8fafc;
}

.category-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.category-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
}

.category-icon.legal { 
    background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%); 
}

.category-icon.financial { 
    background: linear-gradient(135deg, #ed8936 0%, #c05621 100%); 
}

.category-icon.insurance { 
    background: linear-gradient(135deg, #805ad5 0%, #553c9a 100%); 
}

.category-icon.medical { 
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%); 
}

.category-icon.personal { 
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%); 
}

.category-details {
    flex: 1;
}

.category-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #2d3748;
}

.category-stats {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 2px;
}

.category-status {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.category-status.complete { 
    color: #38a169; 
}

.category-status.needs-attention { 
    color: #ed8936; 
}

.category-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-btn:hover {
    background: #e2e8f0;
    border-color: #cbd5e0;
}

.expand-icon {
    color: #64748b;
    transition: transform 0.2s ease;
}

.expand-icon.expanded {
    transform: rotate(90deg);
}

/* Document Items */
.document-list {
    padding: 0 20px 16px;
    background: #f8fafc;
    display: none;
}

.document-list.expanded {
    display: block;
}

.document-item {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    position: relative;
}

.document-item:hover {
    border-color: #FF6B35;
    transform: translateY(-1px);
}

.document-item.selectable {
    position: relative;
    padding-left: 48px;
}

.document-item.selected {
    background: rgba(255, 107, 53, 0.1);
    border-color: #FF6B35;
}

.document-content {
    padding: 12px 16px;
    cursor: pointer;
}

.document-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #2d3748;
}

.document-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #64748b;
}

.document-date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.document-status {
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 11px;
}

.document-status.current {
    background: #dcfce7;
    color: #16a34a;
}

.document-status.expires-soon {
    background: #fef3c7;
    color: #d97706;
}

.document-status.expired {
    background: #fee2e2;
    color: #dc2626;
}

.document-status.critical {
    background: #fee2e2;
    color: #dc2626;
}

.document-menu {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.document-menu:hover {
    background: #f8fafc;
}

.document-checkbox {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Instructions Panel */
.instructions-panel {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin: 20px;
    margin-bottom: 16px;
    border-left: 4px solid #FF6B35;
}

.instructions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.instructions-title {
    font-weight: 600;
    color: #2d3748;
    font-size: 14px;
}

.edit-instructions-btn {
    background: none;
    border: none;
    color: #FF6B35;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.edit-instructions-btn:hover {
    background: rgba(255, 107, 53, 0.1);
}

.instructions-text {
    color: #4a5568;
    font-size: 13px;
    line-height: 1.4;
}

/* Advanced Filters */
.advanced-filters {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin: 20px;
    display: none;
}

.advanced-filters.active {
    display: block;
}

.filter-section {
    margin-bottom: 16px;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.filter-section label {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
}

.filter-section select,
.filter-section input {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    background: white;
}

.filter-section select:focus,
.filter-section input:focus {
    outline: none;
    border-color: #FF6B35;
}

.filter-section span {
    margin: 0 8px;
    color: #64748b;
    font-size: 14px;
}

.clear-filters-btn {
    background: #e2e8f0;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    color: #2d3748;
    transition: all 0.2s ease;
}

.clear-filters-btn:hover {
    background: #cbd5e0;
}

/* Search Results */
.search-results {
    background: white;
    border-radius: 12px;
    margin: 20px;
    padding: 16px;
    display: none;
}

.search-results.active {
    display: block;
}

.search-results h3 {
    margin-bottom: 12px;
    color: #2d3748;
    font-size: 16px;
}

.search-result-item {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.search-result-item:hover {
    background: rgba(255, 107, 53, 0.05);
    border-color: #FF6B35;
}

.search-result-title {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 4px;
    font-size: 14px;
}

.search-result-meta {
    font-size: 12px;
    color: #64748b;
}

.search-highlight {
    background: #fef3c7;
    padding: 1px 2px;
    border-radius: 2px;
    color: #92400e;
}

/* Bulk Operations Panel */
.bulk-panel {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin: 20px;
    margin-bottom: 16px;
    border-left: 4px solid #3182ce;
    display: none;
}

.bulk-panel.active {
    display: block;
}

.bulk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bulk-title {
    font-weight: 600;
    color: #2d3748;
    font-size: 14px;
}

.bulk-count {
    background: #3182ce;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

.bulk-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bulk-action-btn {
    background: #e2e8f0;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #2d3748;
}

.bulk-action-btn:hover {
    background: #3182ce;
    color: white;
}

.bulk-action-btn.destructive {
    background: #fee2e2;
    color: #dc2626;
}

.bulk-action-btn.destructive:hover {
    background: #dc2626;
    color: white;
}

/* Document Manager Modal Styles */
.document-preview {
    text-align: center;
    margin-bottom: 20px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
}

.document-preview-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.document-preview-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
}

.document-preview-meta {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 16px;
}

.document-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.document-action-btn {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #2d3748;
}

.document-action-btn:hover {
    border-color: #cbd5e0;
    background: #e2e8f0;
}

.document-action-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border: none;
}

.document-action-btn.primary:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

.document-status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.status-item {
    text-align: center;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.status-item.success {
    background: #dcfce7;
    border-color: #16a34a;
}

.status-value {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 4px;
}

.status-label {
    font-size: 12px;
    color: #64748b;
}

.instructions-examples {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.examples-title {
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
    font-size: 14px;
}

.examples-list {
    font-size: 13px;
    color: #4a5568;
    line-height: 1.6;
}

.instructions-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 20px;
}

.instructions-textarea:focus {
    outline: none;
    border-color: #FF6B35;
}

.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.modal-btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.modal-btn.secondary {
    background: #f8fafc;
    color: #2d3748;
    border: 2px solid #e2e8f0;
}

.modal-btn.secondary:hover {
    background: #e2e8f0;
    border-color: #cbd5e0;
}

.modal-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
}

.modal-btn.primary:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

.category-info-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.category-info-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.category-info-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.category-info-icon.legal {
    background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%);
}

.category-info-icon.financial {
    background: linear-gradient(135deg, #ed8936 0%, #c05621 100%);
}

.category-info-icon.insurance {
    background: linear-gradient(135deg, #805ad5 0%, #553c9a 100%);
}

.category-info-icon.medical {
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
}

.category-info-icon.personal {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
}

.category-info-details h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 4px;
}

.category-info-details p {
    font-size: 14px;
    color: #64748b;
}

.upload-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.upload-option-modal {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-option-modal:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.upload-option-modal.selected {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.1);
}

.upload-option-modal-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.upload-option-modal-label {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 4px;
}

.upload-option-modal-subtitle {
    font-size: 12px;
    color: #64748b;
}

.conflict-options {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.document-option {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.document-option:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.document-option.selected {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.1);
}

.option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.source-name {
    font-weight: 600;
    color: #2d3748;
    font-size: 16px;
}

.verify-btn {
    background: #e2e8f0;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    color: #2d3748;
    transition: all 0.2s ease;
}

.verify-btn:hover {
    background: #cbd5e0;
}

.document-details {
    display: grid;
    gap: 8px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-label {
    font-size: 13px;
    color: #64748b;
}

.detail-value {
    font-size: 13px;
    font-weight: 500;
    color: #2d3748;
}

.resolution-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.resolution-btn {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    color: #2d3748;
}

.resolution-btn:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.keep-both-note {
    background: #e0f2fe;
    border: 1px solid #0284c7;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    color: #0c4a6e;
}

/* PASSWORD MANAGER STYLES */

/* Password Manager Header */
.password-manager-header {
    background: white;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.password-manager-header .back-btn {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.password-manager-header .back-btn:hover {
    background: #f8fafc;
}

.password-manager-header .page-title {
    font-size: 20px;
    font-weight: 700;
    color: #2d3748;
}

.password-manager-header .header-actions {
    display: flex;
    gap: 8px;
}

.password-manager-header .action-btn {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    color: #2d3748;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.password-manager-header .action-btn:hover {
    border-color: #cbd5e0;
    background: #e2e8f0;
}

.password-manager-header .action-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border: none;
}

.password-manager-header .action-btn.primary:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0861b 100%);
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 20px;
}

.modal.show {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 360px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

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

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.modal-close {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
}

.modal-close:hover {
    background: #f8fafc;
}

/* Stats Section */
.stats-section {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    padding: 20px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    text-align: center;
}

.stat-number {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    color: white;
    opacity: 0.9;
}

.last-sync {
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    opacity: 0.8;
}

/* Import Section */
.import-section {
    padding: 20px;
    background: white;
    border-bottom: 8px solid #f8fafc;
}

.import-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.import-source {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.import-source:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.import-source-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.import-source-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.import-source-subtitle {
    font-size: 11px;
    color: #64748b;
}

.sync-btn {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

/* Search Section */
.search-section {
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    margin-bottom: 12px;
}

.search-icon {
    position: absolute;
    left: 32px;
    top: 28px;
    color: #64748b;
}

.filter-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
}

.filter-chip {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.filter-chip.active {
    background: rgba(255, 107, 53, 0.1);
    border-color: #FF6B35;
    color: #FF6B35;
}

/* Categories */
.categories-section {
    background: white;
    padding-bottom: 100px;
}

.category-card {
    border-bottom: 1px solid #e2e8f0;
}

.category-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.category-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.category-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
}

.category-icon.social { 
    background: linear-gradient(135deg, #3182ce 0%, #2c5aa0 100%); 
}

.category-icon.utilities { 
    background: linear-gradient(135deg, #ed8936 0%, #c05621 100%); 
}

.category-icon.shopping { 
    background: linear-gradient(135deg, #805ad5 0%, #553c9a 100%); 
}

.category-details {
    flex: 1;
}

.category-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.category-stats {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 2px;
}

.category-status {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.category-status.complete { 
    color: #38a169; 
}

.category-status.needs-attention { 
    color: #ed8936; 
}

.category-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.edit-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
}

.expand-icon {
    color: #64748b;
    transition: transform 0.2s ease;
}

.expand-icon.expanded {
    transform: rotate(90deg);
}

/* Accounts List */
.accounts-list {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.account-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.account-item:hover {
    background: rgba(255, 107, 53, 0.05);
}

.account-item.has-conflict {
    background: rgba(237, 137, 54, 0.1);
    border-left: 4px solid #ed8936;
}

.account-item .account-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 12px;
    background: #e2e8f0;
}

.account-item .account-details {
    flex: 1;
}

.account-item .account-name {
    font-size: 14px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 2px;
}

.account-item .account-username {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
}

.account-item .account-status {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.account-item .account-status.has-instructions {
    color: #38a169;
}

.account-item .account-status.no-instructions {
    color: #64748b;
}

.account-item .account-status.conflict {
    color: #ed8936;
}

.account-item .account-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quick-action {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action:hover {
    background: #e2e8f0;
}

.resolve-btn {
    background: #ed8936;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

/* Password Manager Modals */
.conflict-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.password-option {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.password-option.selected {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.option-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.source-name {
    font-weight: 600;
    color: #2d3748;
}

.test-btn {
    background: #e2e8f0;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.test-btn:hover {
    background: #cbd5e0;
}

.test-btn.works {
    background: #38a169;
    color: white;
}

.detail-row {
    display: flex;
    margin-bottom: 4px;
}

.detail-label {
    font-size: 12px;
    color: #64748b;
    width: 70px;
    flex-shrink: 0;
}

.detail-value {
    font-size: 12px;
    color: #2d3748;
    font-family: monospace;
    word-break: break-all;
}

.password-masked {
    letter-spacing: 2px;
}

.show-password {
    background: none;
    border: none;
    color: #FF6B35;
    cursor: pointer;
    font-size: 12px;
    margin-left: 8px;
}

.resolution-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.resolution-btn {
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.resolution-btn:hover {
    border-color: #FF6B35;
    background: rgba(255, 107, 53, 0.05);
}

.resolution-btn.primary {
    background: #FF6B35;
    color: white;
    border-color: #FF6B35;
}

.keep-both-note {
    background: #f0f9ff;
    border: 1px solid #0ea5e9;
    border-radius: 8px;
    padding: 12px;
    font-size: 12px;
    color: #0369a1;
    margin-top: 12px;
}

/* Instructions Modal */
.instructions-textarea {
    width: 100%;
    min-height: 120px;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    margin-bottom: 16px;
}

.instructions-textarea:focus {
    outline: none;
    border-color: #FF6B35;
}

.instructions-examples {
    background: #f8fafc;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.examples-title {
    font-size: 12px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
}

.examples-list {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
}

.modal-actions {
    display: flex;
    gap: 12px;
}

.modal-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-btn.secondary {
    background: #e2e8f0;
    color: #2d3748;
}

.modal-btn.primary {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
}

/* Time Capsule Viewer Styles */
.time-capsule-header {
    background: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.time-capsule-header .back-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.time-capsule-header .back-btn:hover {
    background: #f8fafc;
}

.time-capsule-header .header-title {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.time-capsule-header .header-menu {
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
    font-size: 20px;
}

.time-capsule-header .header-menu:hover {
    background: #f8fafc;
}

/* Capsule Header */
.capsule-header {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
    border-radius: 20px;
    padding: 32px 24px;
    margin-bottom: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.capsule-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><defs><radialGradient id="sparkle" cx="50%" cy="50%"><stop offset="0%" stop-color="rgba(255,255,255,0.4)"/><stop offset="100%" stop-color="rgba(255,255,255,0)"/></radialGradient></defs><circle cx="20" cy="10" r="1" fill="url(%23sparkle)"/><circle cx="80" cy="5" r="0.5" fill="url(%23sparkle)"/><circle cx="60" cy="15" r="0.8" fill="url(%23sparkle)"/></svg>');
    pointer-events: none;
    opacity: 0.6;
}

.capsule-icon {
    font-size: 56px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.capsule-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.capsule-recipient {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.delivery-info {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px;
    position: relative;
    z-index: 1;
}

.delivery-label {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 4px;
}

.delivery-date {
    font-size: 18px;
    font-weight: 600;
}

/* Status Badge */
.status-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

/* Content Sections */
.content-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
    animation: slideInUp 0.3s ease forwards;
}

.content-section:nth-child(2) { animation-delay: 0.1s; }
.content-section:nth-child(3) { animation-delay: 0.2s; }
.content-section:nth-child(4) { animation-delay: 0.3s; }

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

.section-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #81C784 0%, #4CAF50 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.section-content {
    color: #4a5568;
    font-size: 16px;
    line-height: 1.6;
}

/* Delivery Message */
.delivery-message {
    background: #f8fafc;
    border-left: 4px solid #FF6B35;
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
    font-style: italic;
}

/* Media Preview */
.media-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.media-item {
    aspect-ratio: 1;
    background: #f0f9ff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
    border: 2px solid #e0f2fe;
}

.media-item:hover {
    transform: scale(1.05);
}

.media-item .icon {
    font-size: 24px;
    color: #0284c7;
}

/* Conditions List */
.conditions-list {
    margin-top: 16px;
}

.condition-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.condition-item:last-child {
    border-bottom: none;
}

.condition-icon {
    width: 24px;
    height: 24px;
    background: #dcfce7;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #16a34a;
}

.condition-text {
    flex: 1;
    font-size: 15px;
    color: #475569;
}

/* Detail Rows for Time Capsule */
.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.detail-label {
    color: #64748b;
}

.status-text {
    color: #FF6B35;
    font-weight: 600;
}

.days-text {
    color: #16a34a;
    font-weight: 600;
}

/* Bottom Spacing */
.bottom-spacing {
    height: 100px;
}

/* Animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Time Capsule Responsive */
@media (max-width: 480px) {
    .action-buttons {
        max-width: calc(100% - 32px);
    }

    .capsule-header {
        padding: 28px 20px;
    }

    .capsule-title {
        font-size: 22px;
    }
}

/* End of Time Capsule Viewer Styles */

/* Custom Confirmation Modal */
.confirmation-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    animation: fadeIn 0.2s ease-out forwards;
}

.confirmation-modal {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 340px;
    width: 90%;
    margin: 20px;
    transform: scale(0.8);
    animation: modalSlideIn 0.3s ease-out forwards;
}

.confirmation-modal-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #e2e8f0;
}

.confirmation-modal-header h3 {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
    text-align: center;
}

.confirmation-modal-body {
    padding: 16px 24px 24px;
    text-align: center;
}

.confirmation-modal-body p {
    font-size: 16px;
    color: #4a5568;
    line-height: 1.5;
    margin: 0;
}

.confirmation-modal-actions {
    padding: 0 24px 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirmation-modal-actions .secondary-btn,
.confirmation-modal-actions .primary-btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirmation-modal-actions .secondary-btn {
    background: #f7fafc;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

.confirmation-modal-actions .secondary-btn:hover {
    background: #edf2f7;
    border-color: #cbd5e0;
}

.confirmation-modal-actions .primary-btn {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: white;
}

.confirmation-modal-actions .primary-btn:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e6851a 100%);
    transform: translateY(-1px);
}

/* Modal Options */
.modal-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  text-align: left;
  border: 2px solid #e2e8f0;
  transition: all 0.2s ease;
}

.option-item:hover {
  border-color: #FF6B35;
  background: rgba(255, 107, 53, 0.05);
}

.option-icon {
  font-size: 24px;
  min-width: 40px;
  text-align: center;
}

.option-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.option-text strong {
  font-weight: 600;
  color: #2d3748;
}

.option-text span {
  font-size: 12px;
  color: #64748b;
}

/* Story Placeholder */
.story-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  background: #f8fafc;
  border-radius: 12px;
  border: 2px dashed #e2e8f0;
  margin: 20px 0;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.7;
}

.placeholder-text h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
  color: #2d3748;
}

.placeholder-text p {
  margin: 0;
  color: #64748b;
  line-height: 1.4;
}

/* Format Header with Actions */
.format-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.format-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.icon-btn {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  border-color: #FF6B35;
  background: rgba(255, 107, 53, 0.05);
  transform: translateY(-1px);
}

/* Story Variants Accordion */
.story-variants {
  margin-top: 20px;
  border-top: 1px solid #e2e8f0;
  padding-top: 16px;
}

.story-variant-item {
  margin-bottom: 8px;
}

.variant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #e2e8f0;
}

.variant-header:hover {
  background: rgba(255, 107, 53, 0.05);
  border-color: #FF6B35;
}

.variant-header.active {
  background: rgba(255, 107, 53, 0.1);
  border-color: #FF6B35;
}

.variant-icon {
  font-size: 16px;
  margin-right: 8px;
}

.variant-title {
  flex: 1;
  font-weight: 500;
  color: #2d3748;
  font-size: 14px;
}

.variant-toggle {
  font-size: 18px;
  font-weight: bold;
  color: #64748b;
  transition: transform 0.2s ease;
}

.variant-toggle.open {
  transform: rotate(45deg);
}

.variant-content {
  padding: 16px;
  background: white;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Detailed Story Content */
.detailed-story-content .story-section {
  margin-bottom: 20px;
}

.detailed-story-content .story-section:last-child {
  margin-bottom: 0;
}

.detailed-story-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detailed-story-content p {
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* Original Story Content */
.original-story-content p {
  color: #64748b;
  font-style: italic;
  margin: 0 0 12px 0;
  font-size: 14px;
}

.original-story-content blockquote {
  background: #f8fafc;
  border-left: 4px solid #FF6B35;
  padding: 16px;
  margin: 0;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #2d3748;
  line-height: 1.6;
}

/* Recording Complete State */
.recording-complete .scrolli-character {
  animation: bounce 0.5s ease-in-out;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Editing Mode */
.editing-mode {
  background: rgba(255, 107, 53, 0.05);
  border: 2px dashed #FF6B35;
  border-radius: 12px;
  padding: 16px;
  position: relative;
}

.editing-mode::before {
  content: "✏️ Editing Mode";
  position: absolute;
  top: -10px;
  left: 16px;
  background: #FF6B35;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.editable-text {
  border: 2px solid #FF6B35 !important;
  background: white !important;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.editable-text:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideIn {
    from {
        transform: scale(0.8) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@media (max-width: 375px) {
    .confirmation-modal {
        max-width: 300px;
        margin: 15px;
    }
    
    .confirmation-modal-header {
        padding: 20px 20px 14px;
    }
    
    .confirmation-modal-header h3 {
        font-size: 18px;
    }
    
    .confirmation-modal-body {
        padding: 14px 20px 20px;
    }
    
    .confirmation-modal-body p {
        font-size: 15px;
    }
    
    .confirmation-modal-actions {
        padding: 0 20px 20px;
        flex-direction: column;
    }
    
    .confirmation-modal-actions .secondary-btn,
    .confirmation-modal-actions .primary-btn {
        flex: none;
        width: 100%;
    }
}

/* =====================================================
   HEADER COLOR CODING SYSTEM - Page Headers Only
   ===================================================== */

/* Memory section - Warm orange (matching album memories gradient) */
.header.memories-header, .header.memory-header {
    background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%) !important;
    padding: 24px 20px 20px !important;
}

.header.memories-header .back-btn, .header.memory-header .back-btn {
    color: white !important;
}

.header.memories-header .back-btn:hover, .header.memory-header .back-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

.header.memories-header .page-title, .header.memory-header .page-title {
    color: white !important;
}

.header.memories-header .action-btn, .header.memory-header .action-btn {
    color: white !important;
}

.header.memories-header .action-btn:hover, .header.memory-header .action-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Memory View Header - Expanded with memory info */
.header.memory-view-header {
    padding: 24px 20px 32px !important;
}

.header-memory-info {
    margin-top: 20px;
}

.header-memory-title {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 0 0 12px 0;
}

.header-memory-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-memory-date,
.header-memory-location {
    display: flex;
    align-items: center;
    gap: 8px;
    color: white;
    font-size: 14px;
    opacity: 0.9;
}

.header-memory-date .meta-icon,
.header-memory-location .meta-icon {
    font-size: 16px;
}

/* Share Section Styles */
.share-section {
  margin: 24px 0;
}

.share-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.share-option {
  background: #f8f9fa;
  border: 2px solid #e1e8ed;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.share-option:hover {
  border-color: #FF6B35;
  background: rgba(255, 107, 53, 0.05);
}

.share-option.selected {
  border-color: #FF6B35;
  background: rgba(255, 107, 53, 0.1);
}

.share-icon {
  font-size: 24px;
  margin-top: 4px;
}

.share-label {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.share-description {
  font-size: 14px;
  color: #7f8c8d;
}

/* Memory Summary */
.memory-summary {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  border: 2px solid #e1e8ed;
}

.summary-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e1e8ed;
}

.summary-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

.summary-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-label {
  font-size: 14px;
  font-weight: 600;
  color: #7f8c8d;
  min-width: 80px;
}

.summary-value {
  font-size: 14px;
  color: #2c3e50;
  flex: 1;
}

/* Albums section - Deep blue (matching album family gradient) */
.header.albums-header {
    background: linear-gradient(135deg, #3182ce 0%, #2c5282 100%) !important;
}

.header.albums-header .action-btn {
    color: white !important;
}

.header.albums-header .action-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Time Capsule - Rich purple gradient */
.header.time-capsule-header {
    background: linear-gradient(135deg, #9f7aea 0%, #805ad5 100%) !important;
}

.header.time-capsule-header .action-btn {
    color: white !important;
}

.header.time-capsule-header .action-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Digital Vault - Forest green security theme */
.header.vault-header {
    background: linear-gradient(135deg, #38a169 0%, #2f855a 100%) !important;
}

.header.vault-header .action-btn {
    color: white !important;
}

.header.vault-header .action-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Loved Ones - Soft rose theme */
.header.loved-ones-header {
    background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%) !important;
}

.header.loved-ones-header .action-btn {
    color: white !important;
}

.header.loved-ones-header .action-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Home - Premium gold gradient */
.header.home-header {
    background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%) !important;
}

.header.home-header .settings-btn {
    color: white !important;
}

.header.home-header .settings-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Settings - Professional slate */
.header.settings-header {
    background: linear-gradient(135deg, #718096 0%, #4a5568 100%) !important;
}

.header.settings-header .action-btn {
    color: white !important;
}

.header.settings-header .action-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Stats sections for consistent header heights */
.memory-stats, .album-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.memory-stats .stat-item, .album-stats .stat-item {
    text-align: center;
}

.memory-stats .stat-number, .album-stats .stat-number {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
}

.memory-stats .stat-label, .album-stats .stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}