/* ===== THEMES ===== */
:root, [data-theme="rose"] {
    --bg-1: #fff5f5; --bg-2: #ffe4e6; --bg-3: #fecdd3;
    --blob-1: rgba(251, 113, 133, 0.35); --blob-2: rgba(244, 63, 94, 0.2); --blob-3: rgba(253, 164, 175, 0.3);
    --primary: #f43f5e; --primary-dark: #e11d48; --primary-light: #fff1f2;
    --primary-border: rgba(244, 63, 94, 0.15); --primary-muted: #fb7185;
    --text: #1f2937; --text-muted: #6b7280; --text-soft: #9ca3af;
    --card-bg: rgba(255, 255, 255, 0.9); --header-bg: rgba(255, 255, 255, 0.75);
    --input-border: #fecdd3; --input-focus: #fda4af;
    --gold: #d97706; --gold-light: #fef3c7;
    --shadow: rgba(244, 63, 94, 0.12); --shadow-hover: rgba(244, 63, 94, 0.18);
}
[data-theme="dark"] {
    --bg-1: #0f0a0c; --bg-2: #1a1015; --bg-3: #251820;
    --blob-1: rgba(244, 63, 94, 0.15); --blob-2: rgba(139, 92, 246, 0.1); --blob-3: rgba(251, 191, 36, 0.08);
    --primary: #fb7185; --primary-dark: #f43f5e; --primary-light: #2a1520;
    --primary-border: rgba(251, 113, 133, 0.2); --primary-muted: #fda4af;
    --text: #f3f4f6; --text-muted: #d1d5db; --text-soft: #9ca3af;
    --card-bg: rgba(30, 20, 25, 0.92); --header-bg: rgba(20, 12, 16, 0.85);
    --input-border: #4a2535; --input-focus: #fb7185;
    --gold: #fbbf24; --gold-light: #422006;
    --shadow: rgba(0, 0, 0, 0.3); --shadow-hover: rgba(251, 113, 133, 0.15);
}
[data-theme="cream"] {
    --bg-1: #fffdf7; --bg-2: #fef3c7; --bg-3: #fde68a;
    --blob-1: rgba(217, 119, 6, 0.2); --blob-2: rgba(251, 191, 36, 0.25); --blob-3: rgba(254, 243, 199, 0.5);
    --primary: #b45309; --primary-dark: #92400e; --primary-light: #fffbeb;
    --primary-border: rgba(217, 119, 6, 0.15); --primary-muted: #d97706;
    --text: #292524; --text-muted: #78716c; --text-soft: #a8a29e;
    --card-bg: rgba(255, 253, 247, 0.95); --header-bg: rgba(255, 251, 235, 0.9);
    --input-border: #fde68a; --input-focus: #fbbf24;
    --gold: #b45309; --gold-light: #fef3c7;
    --shadow: rgba(180, 83, 9, 0.1); --shadow-hover: rgba(180, 83, 9, 0.18);
}
[data-theme="lavender"] {
    --bg-1: #faf5ff; --bg-2: #f3e8ff; --bg-3: #e9d5ff;
    --blob-1: rgba(167, 139, 250, 0.3); --blob-2: rgba(139, 92, 246, 0.2); --blob-3: rgba(216, 180, 254, 0.35);
    --primary: #8b5cf6; --primary-dark: #7c3aed; --primary-light: #f5f3ff;
    --primary-border: rgba(139, 92, 246, 0.15); --primary-muted: #a78bfa;
    --text: #1f2937; --text-muted: #6b7280; --text-soft: #9ca3af;
    --card-bg: rgba(255, 255, 255, 0.9); --header-bg: rgba(250, 245, 255, 0.85);
    --input-border: #e9d5ff; --input-focus: #c4b5fd;
    --gold: #9333ea; --gold-light: #f3e8ff;
    --shadow: rgba(139, 92, 246, 0.12); --shadow-hover: rgba(139, 92, 246, 0.2);
}

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    color: var(--text);
    background: linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
    min-height: 100vh; position: relative;
}
body::after {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#app, .login-screen { position: relative; z-index: 1; }

.bg-blobs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); animation: blobFloat 20s ease-in-out infinite; }
.blob-1 { width: 400px; height: 400px; background: var(--blob-1); top: -100px; right: -80px; }
.blob-2 { width: 350px; height: 350px; background: var(--blob-2); bottom: -80px; left: -60px; animation-delay: -7s; }
.blob-3 { width: 280px; height: 280px; background: var(--blob-3); top: 40%; left: 50%; animation-delay: -14s; }
@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

.font-display { font-family: 'Playfair Display', Georgia, serif; }
.theme-text { color: var(--primary); }
.section-title { font-size: 1.125rem; font-weight: 600; color: var(--primary-dark); }

.login-screen { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-screen.hidden { display: none; }
.login-card { width: 100%; max-width: 22rem; padding: 2.5rem 2rem; text-align: center; border-radius: 1.5rem; box-shadow: 0 25px 60px var(--shadow-hover); }
.login-hearts { font-size: 1.5rem; margin-bottom: 0.5rem; opacity: 0.8; }
.login-icon { font-size: 3rem; margin-bottom: 1rem; animation: bounceSlow 2s ease infinite; }
.login-title { font-size: 1.75rem; font-weight: 700; color: var(--primary-dark); margin-bottom: 0.35rem; }
.login-subtitle { font-size: 0.875rem; color: var(--text-soft); margin-bottom: 1.5rem; }
.login-input { margin-bottom: 0.75rem; }
.auth-tabs { display: flex; gap: 0.35rem; margin: 0.5rem 0 0.75rem; padding: 0.25rem; background: var(--primary-light); border-radius: 10px; }
.auth-tab { flex: 1; border: none; background: transparent; padding: 0.45rem 0.5rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.auth-tab.active { background: var(--card-bg); color: var(--primary-dark); box-shadow: 0 1px 4px var(--shadow); }
.auth-form.hidden { display: none; }

.app-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(16px); border-bottom: 1px solid var(--primary-border); }
.app-title { font-size: 1.35rem; font-weight: 700; color: var(--primary-dark); line-height: 1.2; }
.app-subtitle { font-size: 0.8rem; color: var(--primary-muted); }
.header-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.icon-btn { width: 36px; height: 36px; border-radius: 10px; border: none; background: var(--primary-light); color: var(--primary-dark); font-size: 1rem; cursor: pointer; transition: transform 0.15s; display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { transform: scale(1.08); }
.icon-btn-muted { color: var(--text-soft); background: transparent; }
.icon-btn-logout { color: var(--text-muted); background: var(--primary-light); }
.icon-btn-logout:hover { background: #fee2e2; color: #dc2626; }

.btn-logout { padding: 0.65rem 1rem; border-radius: 0.75rem; border: 1px solid var(--primary-border); background: transparent; color: var(--text-muted); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 0.15s, color 0.15s; }
.btn-logout:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }

.search-bar { display: flex; align-items: center; gap: 0.5rem; background: var(--card-bg); border: 1px solid var(--primary-border); border-radius: 9999px; padding: 0.5rem 1rem; box-shadow: 0 2px 12px var(--shadow); }
.search-icon { font-size: 0.9rem; opacity: 0.5; }
.search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 0.9rem; color: var(--text); font-family: inherit; }
.search-input::placeholder { color: var(--text-soft); }

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.toolbar-select { padding: 0.4rem 0.75rem; border-radius: 10px; font-size: 0.8rem; border: 1px solid var(--primary-border); background: var(--card-bg); color: var(--text); font-family: inherit; }
.toolbar-fav { display: flex; align-items: center; padding: 0.4rem 0.6rem; border-radius: 10px; border: 1px solid var(--primary-border); background: var(--card-bg); cursor: pointer; font-size: 0.85rem; }
.view-tabs { display: flex; gap: 2px; padding: 3px; background: var(--card-bg); border: 1px solid var(--primary-border); border-radius: 12px; margin-left: auto; }
.view-tab-icon { width: 36px; height: 32px; border: none; border-radius: 9px; background: transparent; cursor: pointer; font-size: 1rem; transition: all 0.2s; opacity: 0.55; }
.view-tab-icon:hover { opacity: 0.85; background: var(--primary-light); }
.view-tab-icon.active { opacity: 1; background: var(--primary-light); box-shadow: 0 1px 4px var(--shadow); }

.card { background: var(--card-bg); backdrop-filter: blur(10px); border: 1px solid var(--primary-border); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.card:hover { box-shadow: 0 12px 32px var(--shadow); }

.restaurant-card { overflow: hidden; animation: cardEnter 0.4s ease both; }
@keyframes cardEnter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.restaurant-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.restaurant-card-compact { cursor: pointer; overflow: hidden; padding: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.restaurant-card-compact:hover { transform: translateY(-4px); box-shadow: 0 16px 40px var(--shadow-hover); }
.restaurant-card-compact.card-perfect { box-shadow: 0 0 0 2px #fcd34d, 0 8px 28px rgba(251, 191, 36, 0.25); }
.restaurant-card-compact .card-cover { aspect-ratio: 4 / 3; width: 100%; display: block; box-shadow: inset 0 0 30px rgba(0,0,0,0.08); }

.card-cover { width: 100%; overflow: hidden; position: relative; background: linear-gradient(135deg, var(--primary-light), var(--bg-3)); line-height: 0; }
.card-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: transform 0.4s ease; }
.card-cover:hover .card-cover-img { transform: scale(1.04); }
.cover-photo-badge { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); color: white; font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.55rem; border-radius: 99px; }
.cover-rating-badge { position: absolute; bottom: 10px; right: 10px; z-index: 3; background: rgba(255,255,255,0.93); backdrop-filter: blur(8px); border-radius: 12px; padding: 0.35rem 0.6rem; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.cover-rating-badge .score { font-size: 1.1rem; font-weight: 700; color: var(--primary); line-height: 1; }
.cover-rating-badge .stars { font-size: 0.65rem; }
.card-cover-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%); }
.card-cover-info { position: absolute; bottom: 12px; left: 16px; right: 70px; color: white; z-index: 2; line-height: normal; }
.card-cover-info h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }

.card-compact-placeholder { aspect-ratio: 4 / 3; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: linear-gradient(135deg, var(--primary-light), var(--bg-3)); position: relative; line-height: normal; }
.card-compact-placeholder .emoji { font-size: 2.5rem; }
.card-compact-placeholder .name { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; color: var(--primary-dark); text-align: center; padding: 0 1rem; }

.rating-badge { background: var(--card-bg); border: 1px solid var(--primary-border); border-radius: 14px; padding: 0.5rem 0.85rem; min-width: 68px; text-align: center; }
.detail-cover { width: 100%; aspect-ratio: 16 / 9; max-height: 220px; object-fit: cover; border-radius: 12px; margin-bottom: 1rem; }

.dashboard-section { display: flex; flex-direction: column; gap: 0.75rem; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.stat-pill { background: var(--card-bg); border: 1px solid var(--primary-border); border-radius: 12px; padding: 0.6rem 0.5rem; text-align: center; }
.stat-pill .stat-num { font-weight: 700; font-size: 1.1rem; color: var(--primary-dark); }
.stat-pill .stat-label { font-size: 0.65rem; color: var(--text-soft); margin-top: 1px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.dashboard-card { background: var(--card-bg); border: 1px solid var(--primary-border); border-radius: 1rem; padding: 0.75rem 0.5rem; text-align: center; }
.dashboard-card .dash-icon { font-size: 1.25rem; margin-bottom: 0.2rem; }
.dashboard-card .dash-value { font-weight: 700; color: var(--primary-dark); font-size: 0.85rem; line-height: 1.2; }
.dashboard-card .dash-label { font-size: 0.65rem; color: var(--text-soft); margin-top: 2px; }

.input { width: 100%; padding: 0.55rem 1rem; border-radius: 0.75rem; border: 1px solid var(--input-border); outline: none; font-family: inherit; background: var(--card-bg); color: var(--text); }
.input:focus { box-shadow: 0 0 0 2px var(--input-focus); }
.label { display: block; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.25rem; }

.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; font-weight: 600; padding: 0.75rem 2rem; border-radius: 0.75rem; border: none; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s; box-shadow: 0 4px 16px var(--shadow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px var(--shadow-hover); }
.btn-primary:active { transform: scale(0.97); }
.btn-secondary { background: var(--primary-light); color: var(--primary-dark); font-size: 0.875rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: 0.75rem; border: 1px solid var(--primary-border); cursor: pointer; }

.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); }
.modal.hidden { display: none; }
.modal-box { background: var(--card-bg); border-radius: 1.25rem; box-shadow: 0 25px 60px rgba(0,0,0,0.2); width: 100%; max-width: 32rem; padding: 1.5rem; max-height: 90vh; overflow-y: auto; color: var(--text); }
@media (max-width: 640px) {
    .modal-sheet { align-items: flex-end; padding: 0; }
    .modal-sheet .modal-box { border-radius: 1.5rem 1.5rem 0 0; max-height: 92vh; animation: slideUp 0.35s cubic-bezier(0.32, 0.72, 0, 1); }
    .modal-sheet .modal-box::before { content: ''; display: block; width: 36px; height: 4px; background: var(--primary-border); border-radius: 99px; margin: -0.5rem auto 1rem; }
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.theme-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.theme-option { padding: 0.5rem 0.2rem; border-radius: 10px; border: 2px solid transparent; text-align: center; cursor: pointer; font-size: 0.65rem; font-weight: 600; background: var(--primary-light); color: var(--text); }
.theme-option.active { border-color: var(--primary); }
.theme-swatch { width: 22px; height: 22px; border-radius: 50%; margin: 0 auto 0.2rem; }
.theme-swatch-rose { background: linear-gradient(135deg, #fecdd3, #f43f5e); }
.theme-swatch-dark { background: linear-gradient(135deg, #1a1015, #fb7185); }
.theme-swatch-cream { background: linear-gradient(135deg, #fef3c7, #b45309); }
.theme-swatch-lavender { background: linear-gradient(135deg, #e9d5ff, #8b5cf6); }

.settings-divider { height: 1px; background: var(--primary-border); margin: 0.25rem 0; }
.settings-section-title { font-weight: 600; font-size: 0.9rem; color: var(--text); margin-bottom: 0.15rem; }
.settings-hint { font-size: 0.75rem; color: var(--text-soft); }

.share-card-modal-box { max-width: 24rem; }
.share-card-preview { background: var(--primary-light); border-radius: 1rem; padding: 0.75rem; border: 1px solid var(--primary-border); }
.share-card-canvas { width: 100%; height: auto; border-radius: 0.75rem; display: block; box-shadow: 0 8px 24px var(--shadow); }

.suggest-dropdown { max-height: 200px; overflow-y: auto; background: var(--card-bg); }
.stars { display: flex; gap: 0.25rem; font-size: 1.5rem; }
.star-btn { cursor: pointer; transition: transform 0.15s; }
.star-btn:hover { transform: scale(1.2); }

.photo-section { margin-top: 1rem; padding: 0.75rem; background: linear-gradient(145deg, var(--card-bg), var(--primary-light)); border-radius: 1rem; border: 1px solid var(--primary-border); }
.photo-section-label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; font-weight: 700; color: var(--primary-dark); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
.photo-count { background: var(--input-border); color: var(--primary-dark); padding: 0.1rem 0.45rem; border-radius: 99px; font-size: 0.65rem; margin-left: auto; }
.photo-bento { display: grid; gap: 4px; border-radius: 12px; overflow: hidden; height: 130px; }
.photo-bento-1 { grid-template-columns: 1fr; }
.photo-bento-2 { grid-template-columns: 1fr 1fr; }
.photo-bento-3 { grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; }
.photo-bento-3 .photo-frame:first-child { grid-row: span 2; }
.photo-bento-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.photo-frame { position: relative; border: none; padding: 0; overflow: hidden; cursor: pointer; background: var(--primary-light); }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
.photo-frame:hover img { transform: scale(1.06); }
.photo-more { position: absolute; inset: 0; background: rgba(0,0,0,0.5); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 700; }
.photo-strip { display: flex; gap: 6px; overflow-x: auto; }
.photo-strip-item { flex-shrink: 0; width: 72px; height: 72px; border-radius: 10px; overflow: hidden; border: 2px solid var(--card-bg); box-shadow: 0 2px 8px var(--shadow); cursor: pointer; }
.photo-strip-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-upload-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.photo-upload-item { position: relative; width: 90px; background: var(--card-bg); padding: 5px 5px 16px; border-radius: 6px; box-shadow: 0 3px 12px var(--shadow); transform: rotate(-2deg); }
.photo-upload-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; cursor: pointer; }
.photo-upload-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #ef4444; color: white; border: 2px solid white; font-size: 11px; cursor: pointer; }

.lightbox { position: fixed; inset: 0; z-index: 60; background: rgba(5, 3, 8, 0.9); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; padding: 2rem 3.5rem; }
.lightbox.hidden { display: none; }
.lightbox-img { max-width: 100%; max-height: 85vh; border-radius: 12px; object-fit: contain; }
.lightbox-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); color: white; border: none; font-size: 1.5rem; cursor: pointer; }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.12); color: white; border: none; font-size: 1.75rem; cursor: pointer; }
.lightbox-prev { left: 1rem; } .lightbox-next { right: 1rem; }
.lightbox-counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.85rem; }

.agreement-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 9999px; }
.agreement-match { background: #d1fae5; color: #065f46; }
.agreement-debate { background: #fef3c7; color: #92400e; }
.tag-chip { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; background: var(--primary-light); color: var(--primary-dark); border: 1px solid var(--primary-border); }
.tag-chip.selected { background: var(--primary); color: white; }
.tag-chip.special { background: var(--gold-light); color: var(--gold); border-color: var(--gold); font-weight: 600; }

.fav-btn { font-size: 1.25rem; transition: transform 0.2s; z-index: 4; background: none; border: none; cursor: pointer; line-height: 1; }
.fav-btn-cover,
.fav-btn-placeholder {
  position: absolute;
  top: 14px;
  left: 12px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(6px);
  font-size: 1.1rem;
}
.fav-btn-placeholder { background: rgba(255,255,255,0.75); box-shadow: 0 1px 6px var(--shadow); }
.fav-btn:hover { transform: scale(1.25); }
.fav-btn.pop { animation: favPop 0.45s ease; }
@keyframes favPop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }

.timeline-item { display: flex; gap: 0.75rem; padding-bottom: 1.25rem; position: relative; }
.timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 23px; top: 52px; bottom: 0; width: 2px; background: var(--primary-border); }
.date-badge { flex-shrink: 0; width: 48px; text-align: center; background: var(--card-bg); border: 2px solid var(--primary-border); border-radius: 10px; padding: 0.35rem 0.25rem; line-height: 1.1; }
.date-badge .day { display: block; font-size: 1.1rem; font-weight: 700; color: var(--primary-dark); }
.date-badge .month { display: block; font-size: 0.6rem; font-weight: 600; color: var(--text-soft); text-transform: uppercase; }
.date-badge.special { border-color: var(--gold); background: var(--gold-light); }
.timeline-content { flex: 1; background: var(--card-bg); border-radius: 12px; padding: 1rem; border: 1px solid var(--primary-border); box-shadow: 0 2px 8px var(--shadow); }
.timeline-content.special-glow { border-color: var(--gold); box-shadow: 0 0 20px rgba(251, 191, 36, 0.15); }

.visit-history-item { border-left: 3px solid var(--primary-muted); padding-left: 1rem; margin-bottom: 1rem; }
.visit-history-item.special-memory { border-left-color: var(--gold); background: linear-gradient(90deg, var(--gold-light) 0%, transparent 100%); border-radius: 0 12px 12px 0; padding: 0.75rem; }

.wishlist-card { display: flex; align-items: center; gap: 1rem; background: var(--card-bg); border-radius: 12px; padding: 1rem; border: 1px solid rgba(139,92,246,0.25); border-left: 4px solid #8b5cf6; }

.empty-state { text-align: center; padding: 3rem 1.5rem; background: var(--card-bg); border-radius: 1.5rem; border: 2px dashed var(--primary-border); }
.empty-state .empty-icon { font-size: 3rem; margin-bottom: 0.75rem; }
.empty-state h3 { font-family: 'Playfair Display', serif; color: var(--primary-dark); font-size: 1.2rem; margin-bottom: 0.5rem; }
.empty-state p { color: var(--text-soft); font-size: 0.9rem; }
.empty-arrow { font-size: 1.5rem; margin-top: 1rem; animation: bounceSlow 1.5s ease infinite; opacity: 0.5; }

.toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(100px); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; padding: 0.7rem 1.4rem; border-radius: 9999px; font-weight: 600; font-size: 0.9rem; box-shadow: 0 8px 28px var(--shadow-hover); transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1); z-index: 100; display: flex; align-items: center; gap: 0.5rem; }
.toast.show { transform: translateX(-50%) translateY(0); }
#toast-icon { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }

.skeleton-card { aspect-ratio: 4/3; border-radius: 1rem; background: linear-gradient(90deg, var(--primary-light) 25%, var(--bg-2) 50%, var(--primary-light) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes bounceSlow { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

.fab { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: white; font-size: 1.75rem; border: none; cursor: pointer; box-shadow: 0 6px 24px var(--shadow-hover); z-index: 40; display: none; align-items: center; justify-content: center; }
@media (max-width: 640px) { .fab { display: flex; } }
.fab-menu { position: fixed; bottom: 5.5rem; right: 1.5rem; background: var(--card-bg); border-radius: 1rem; box-shadow: 0 8px 32px rgba(0,0,0,0.15); overflow: hidden; z-index: 40; min-width: 200px; border: 1px solid var(--primary-border); }
.fab-menu-item { display: block; width: 100%; text-align: left; padding: 0.75rem 1.25rem; font-size: 0.9rem; color: var(--text); background: none; border: none; cursor: pointer; }
.fab-menu-item:hover { background: var(--primary-light); }

.roulette-wrap { position: relative; width: 240px; margin: 0 auto 1.25rem; padding-top: 10px; }
.roulette-pointer { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 1.1rem; color: var(--primary-dark); z-index: 3; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.roulette-wheel { width: 220px; height: 220px; border-radius: 50%; margin: 0 auto; transition: transform 3s cubic-bezier(0.17, 0.67, 0.12, 0.99); box-shadow: 0 4px 20px var(--shadow); position: relative; overflow: hidden; border: 4px solid var(--card-bg); }
.roulette-wheel-face { width: 100%; height: 100%; border-radius: 50%; position: relative; }
.roulette-label { position: absolute; left: 50%; top: 50%; width: 78px; margin-left: -39px; text-align: center; font-size: 0.62rem; font-weight: 700; line-height: 1.15; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); transform: rotate(var(--a)) translateY(-74px) rotate(calc(-1 * var(--a))); pointer-events: none; word-break: break-word; }
.roulette-hub { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--card-bg); border: 3px solid var(--primary-border); box-shadow: 0 2px 8px var(--shadow); z-index: 2; }
.roulette-wheel-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--text-muted); background: var(--primary-light); border-radius: 50%; }
.roulette-result { text-align: center; padding: 1rem; margin-bottom: 0.75rem; background: var(--primary-light); border-radius: 12px; font-family: 'Playfair Display', serif; border: 1px solid var(--primary-border); }
.roulette-result.hidden { display: none; }
.roulette-result-kicker { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.2rem; font-family: 'DM Sans', sans-serif; }
.roulette-result-name { font-size: 1.35rem; font-weight: 700; color: var(--primary-dark); margin: 0.15rem 0; }
.roulette-result-sub { font-size: 0.85rem; color: var(--text-muted); font-family: 'DM Sans', sans-serif; }
.roulette-result-rating { font-size: 0.85rem; color: var(--gold); margin-top: 0.35rem; font-family: 'DM Sans', sans-serif; }

.file-input { font-size: 0.875rem; color: var(--text-muted); }
.file-input::file-selector-button { margin-right: 1rem; padding: 0.5rem 1rem; border-radius: 0.75rem; border: 0; background: var(--primary-light); color: var(--primary-dark); font-weight: 500; cursor: pointer; }

.leaflet-popup-content { margin: 8px 12px; }
.map-popup-img { width: 100%; height: 80px; object-fit: cover; border-radius: 8px; margin-bottom: 6px; }
.custom-marker-visited, .custom-marker-wishlist { width: 32px; height: 32px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid white; box-shadow: 0 2px 8px rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; }
.custom-marker-visited { background: var(--primary); }
.custom-marker-wishlist { background: #8b5cf6; }
.custom-marker-visited span, .custom-marker-wishlist span { transform: rotate(45deg); font-size: 14px; }

.visit-btn { transition: transform 0.15s; }
.visit-btn:active { transform: scale(0.92); }
.visit-btn.success { background: #10b981 !important; color: white !important; }