/* ============================================================ Design Tokens — "Stage to Stream" A warm, energetic visual language bridging live concert energy with clean digital playlist organization. ============================================================ */ :root { /* --- Color: Brand --- */ --color-primary: #e05a33; --color-primary-hover: #c94d2a; --color-primary-active: #b34324; --color-primary-light: #fef1ec; --color-primary-muted: #f4a991; /* --- Color: Surfaces --- */ --color-bg: #f8f6f3; --color-surface: #ffffff; --color-surface-hover: #f5f2ef; --color-border: #e8e4df; --color-border-light: #f0ece7; /* --- Color: Text --- */ --color-text: #1c1917; --color-text-secondary: #57534e; --color-text-tertiary: #a8a29e; --color-text-inverse: #ffffff; /* --- Color: Semantic --- */ --color-success: #1a7a42; --color-success-hover: #156835; --color-success-light: #e6f4ec; --color-success-border: #8fcfaa; --color-warning: #b5710f; --color-warning-light: #fef6e6; --color-warning-border: #f0c97a; --color-error: #cc3333; --color-error-light: #fde8e8; --color-info: #2563eb; --color-info-light: #eff6ff; /* --- Color: Tags --- */ --color-tag-cover-bg: #eff6ff; --color-tag-cover-text: #1d4ed8; --color-tag-tape-bg: #fef6e6; --color-tag-tape-text: #b5710f; /* --- Typography --- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif; --font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace; /* Type scale (minor third ~1.2) */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.75; /* --- Spacing (4px base unit) --- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ /* --- Border Radius --- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* --- Shadows (warm-tinted) --- */ --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.06); --shadow-md: 0 2px 8px rgba(28, 25, 23, 0.08), 0 1px 2px rgba(28, 25, 23, 0.04); --shadow-lg: 0 4px 16px rgba(28, 25, 23, 0.1), 0 2px 4px rgba(28, 25, 23, 0.05); /* --- Transitions --- */ --transition-fast: 120ms ease; --transition-normal: 200ms ease; --transition-slow: 350ms ease-out; --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Layout --- */ --content-max-width: 640px; --touch-target-min: 44px; color-scheme: light; } /* ============================================================ Dark Mode — Token Overrides Applied via data-theme="dark" on , set by JS based on user preference (light / dark / system). ============================================================ */ html[data-theme="dark"] { /* --- Color: Brand (warmed for dark backgrounds) --- */ --color-primary: #e8734f; --color-primary-hover: #f08a6a; --color-primary-active: #d4603c; --color-primary-light: #2d1a13; --color-primary-muted: #7a3d2a; /* --- Color: Surfaces --- */ --color-bg: #1a1816; --color-surface: #262320; --color-surface-hover: #302c28; --color-border: #3d3833; --color-border-light: #332f2a; /* --- Color: Text --- */ --color-text: #ede9e4; --color-text-secondary: #a8a29e; --color-text-tertiary: #6b6560; --color-text-inverse: #1a1816; /* --- Color: Semantic --- */ --color-success: #3dba6e; --color-success-hover: #34a55f; --color-success-light: #1a2e22; --color-success-border: #2a5a3e; --color-warning: #dea24a; --color-warning-light: #2e2414; --color-warning-border: #5a4420; --color-error: #e85555; --color-error-light: #2e1818; --color-info: #5b8cf5; --color-info-light: #1a2240; /* --- Color: Tags --- */ --color-tag-cover-bg: #1a2240; --color-tag-cover-text: #7ba3f7; --color-tag-tape-bg: #2e2414; --color-tag-tape-text: #dea24a; /* --- Shadows (lighter on dark) --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2); color-scheme: dark; } html[data-theme="dark"] body { background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(232, 115, 79, 0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(232, 115, 79, 0.04) 0%, transparent 50%), var(--color-bg); } html[data-theme="dark"] .brand-icon { filter: drop-shadow(0 2px 6px rgba(232, 115, 79, 0.4)); } html[data-theme="dark"] #setlist-songs li:nth-child(even) { background: rgba(255, 255, 255, 0.02); } /* Dark mode: improve button visibility — borders target 3:1+ contrast vs body bg #1a1816 */ html[data-theme="dark"] .refresh-btn { border-color: #807a74; background: #302c28; } html[data-theme="dark"] .refresh-btn:hover { background: #3d3833; border-color: #8f8882; } html[data-theme="dark"] .theme-toggle { border-color: #807a74; background: #302c28; } /* Dark mode: bump inactive toggle icon contrast to meet WCAG 3:1 */ html[data-theme="dark"] .theme-toggle-btn { color: #a8a29e; } /* Dark mode: make active toggle state more distinct */ html[data-theme="dark"] .theme-toggle-btn.active { background: rgba(232, 115, 79, 0.2); color: #f08a6a; } /* ============================================================ Skip Link — visible only on keyboard focus ============================================================ */ .skip-link { position: absolute; top: -100%; left: var(--space-3); z-index: 1000; padding: var(--space-2) var(--space-4); background: var(--color-primary); color: var(--color-text-inverse); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-semibold); text-decoration: none; transition: top var(--transition-fast); } .skip-link:focus { top: var(--space-2); } /* ============================================================ Theme Toggle ============================================================ */ /* --- Refresh Button (mobile only) --- */ .refresh-btn { display: none; /* Hidden on desktop */ } .theme-toggle { position: absolute; top: var(--space-2); right: var(--space-2); display: inline-flex; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 3px; box-shadow: var(--shadow-sm); } .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: var(--radius-full); background: transparent; color: var(--color-text-tertiary); cursor: pointer; transition: background 0.15s, color 0.15s; } .theme-toggle-btn:hover { color: var(--color-text-secondary); background: var(--color-surface-hover); } .theme-toggle-btn.active { background: var(--color-primary-light); color: var(--color-primary); } /* Button labels: hidden on desktop, visible on mobile */ .btn-label { display: none; } /* ============================================================ Base Reset & Defaults ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); background: radial-gradient(ellipse 80% 50% at 20% 0%, rgba(224, 90, 51, 0.06) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(224, 90, 51, 0.04) 0%, transparent 50%), var(--color-bg); color: var(--color-text); line-height: var(--leading-normal); padding: var(--space-8) var(--space-4); min-height: 100vh; } header { position: relative; text-align: center; margin-bottom: var(--space-8); } .brand-icon { display: inline-flex; margin-bottom: var(--space-3); filter: drop-shadow(0 2px 6px rgba(224, 90, 51, 0.3)); } header h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); letter-spacing: -0.02em; background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary) 50%, var(--color-primary-active) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: titleShimmer 8s ease-in-out infinite; } @keyframes titleShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .subtitle { color: var(--color-text-secondary); margin-top: var(--space-1); font-size: var(--text-base); } main { max-width: var(--content-max-width); margin: 0 auto; } /* ============================================================ Card ============================================================ */ .card { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-5); box-shadow: var(--shadow-md); transition: box-shadow var(--transition-normal), transform var(--transition-normal); } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .card h2 { font-size: var(--text-lg); font-weight: var(--font-semibold); margin-bottom: var(--space-4); } /* ============================================================ Input Group ============================================================ */ .input-group { display: flex; gap: var(--space-2); } .input-group input { flex: 1; padding: var(--space-3) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-base); font-family: var(--font-sans); background: var(--color-surface); color: var(--color-text); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); min-height: var(--touch-target-min); } .input-group input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } .input-group input::placeholder { color: var(--color-text-tertiary); } /* ============================================================ Buttons ============================================================ */ button { padding: var(--space-3) var(--space-5); background: var(--color-primary); color: var(--color-text-inverse); border: none; border-radius: var(--radius-md); font-size: var(--text-base); font-weight: var(--font-medium); font-family: var(--font-sans); cursor: pointer; white-space: nowrap; min-height: var(--touch-target-min); transition: background var(--transition-fast), transform var(--transition-fast); } button:hover { background: var(--color-primary-hover); } button:active { background: var(--color-primary-active); transform: scale(0.98); } button:disabled { background: var(--color-primary-muted); cursor: not-allowed; transform: none; } /* ============================================================ Focus Styles — visible focus rings for keyboard navigation ============================================================ */ /* Base focus-visible for all interactive elements */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Override the input focus style to use outline instead of just box-shadow */ .input-group input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -1px; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); } /* Theme toggle buttons */ .theme-toggle-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Review radio buttons */ .review-radio:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Review option labels — highlight when radio inside is focused */ .review-option:has(.review-radio:focus-visible) { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); } /* Override/search/action buttons with subtle backgrounds */ .override-btn:focus-visible, .search-btn:focus-visible, .auth-copy-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Swipe navigation dots */ .swipe-dot:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* Links */ a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-xs); } .error { color: var(--color-error); font-size: var(--text-sm); margin-top: var(--space-2); } /* ============================================================ Empty State / How-It-Works ============================================================ */ .empty-state { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border-light); } .how-it-works { display: flex; align-items: center; justify-content: center; gap: var(--space-3); } .how-step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; flex: 1; min-width: 0; } .how-step-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-primary-light); color: var(--color-primary); flex-shrink: 0; } .how-step-text { font-size: var(--text-xs); color: var(--color-text-secondary); font-weight: var(--font-medium); line-height: var(--leading-tight); } .how-step-arrow { color: var(--color-text-tertiary); flex-shrink: 0; margin-bottom: var(--space-5); } /* ============================================================ Artist Card & Setlist Display ============================================================ */ .setlist-card { padding: 0; overflow: hidden; } .artist-card { overflow: hidden; } /* --- Hero Section (image + overlay + name) --- */ .artist-card-hero { position: relative; min-height: 160px; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; overflow: hidden; contain: layout style; } .artist-card-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(28, 25, 23, 0.85) 0%, rgba(28, 25, 23, 0.4) 50%, rgba(28, 25, 23, 0.15) 100% ); z-index: 1; } .artist-card-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity var(--transition-slow); } /* Fade in when fully loaded */ .artist-card-image.img-loaded { opacity: 1; } /* Blur-up placeholder: tiny thumbnail shown blurred behind main image */ .artist-card-hero-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: blur(20px); transform: scale(1.1); /* prevent blurred edges from showing */ opacity: 0; transition: opacity var(--transition-fast); } .artist-card-hero-placeholder.placeholder-visible { opacity: 1; } /* Loading shimmer while waiting for any image data */ .artist-card-hero-shimmer { position: absolute; inset: 0; z-index: 0; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 200% 100%; animation: heroShimmer 1.5s ease-in-out infinite; pointer-events: none; } @keyframes heroShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* When image is loading or missing, show gradient fallback */ .artist-card-hero:not(.has-image) { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-active) 100%); } .artist-card-hero-content { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); width: 100%; } .artist-avatar { width: 56px; height: 56px; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--color-text-inverse); font-size: var(--text-lg); font-weight: var(--font-bold); letter-spacing: 0.05em; flex-shrink: 0; border: 2px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.15); } /* Hide initials avatar when image is present */ .artist-card-hero.has-image .artist-avatar { display: none; } .artist-card-info { flex: 1; min-width: 0; } .artist-name { font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: var(--leading-tight); color: var(--color-text-inverse); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .artist-meta { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.8); margin-top: var(--space-1); } /* --- Card Body (genres + description) --- */ .artist-card-body { padding: var(--space-3) var(--space-5) var(--space-4); background: var(--color-surface); } .artist-card-body:empty { display: none; } .artist-genres { display: flex; flex-wrap: wrap; gap: var(--space-1); } .genre-tag { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); background: var(--color-primary-light); border: 1px solid var(--color-primary-muted); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-primary); text-transform: capitalize; white-space: nowrap; min-height: 28px; transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .genre-tag:hover { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(224, 90, 51, 0.2); } .artist-details { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); line-height: var(--leading-relaxed); font-style: italic; } /* ============================================================ Artist Detail View — Tabs & Panels ============================================================ */ .artist-detail-view { border-top: 1px solid var(--color-border-light); } .artist-tabs { display: flex; border-bottom: 2px solid var(--color-border-light); padding: 0 var(--space-5); gap: var(--space-1); background: var(--color-surface); } .artist-tab { flex: 1; padding: var(--space-3) var(--space-4); background: none; color: var(--color-text-tertiary); font-size: var(--text-sm); font-weight: var(--font-medium); border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; min-height: var(--touch-target-min); transition: color var(--transition-fast), border-color var(--transition-fast); text-align: center; border-radius: 0; } .artist-tab:hover { color: var(--color-text-secondary); background: none; transform: none; } .artist-tab:active { background: none; transform: none; } .artist-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); background: none; } .artist-tab-panels { position: relative; overflow: hidden; touch-action: pan-y; } .artist-tab-panel { display: none; padding: var(--space-4) var(--space-5); animation: tabFadeIn var(--transition-normal); } .artist-tab-panel.active { display: block; } @keyframes tabFadeIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } } /* Overview grid */ .artist-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .artist-stat { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border-light); } .stat-label { font-size: var(--text-xs); color: var(--color-text-tertiary); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.05em; } .stat-value { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text); line-height: var(--leading-tight); } /* Bio panel */ .artist-bio-content { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-secondary); } .artist-bio-content p { margin-bottom: var(--space-3); } .artist-bio-content p:last-child { margin-bottom: 0; } .bio-placeholder { color: var(--color-text-tertiary); font-style: italic; } .bio-source-link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-primary); text-decoration: none; background: var(--color-primary-light); border-radius: var(--radius-full); transition: background var(--transition-fast); } .bio-source-link:hover { background: var(--color-primary-muted); color: var(--color-text-inverse); } /* Event info */ .setlist-event { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-light); display: flex; flex-direction: column; gap: var(--space-2); } .event-row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); } .event-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; } .event-icon::before { content: "\1F3B5"; font-size: var(--text-sm); } .event-icon-date::before { content: "\1F4C5"; } .event-icon-tour::before { content: "\1F30D"; } .event-venue { font-weight: var(--font-medium); color: var(--color-text); } .event-tour { color: var(--color-primary); font-weight: var(--font-medium); } /* Songs header */ .setlist-songs-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-5) var(--space-1); } .setlist-songs-header h3 { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); } .song-count { font-size: var(--text-xs); color: var(--color-text-tertiary); font-weight: var(--font-medium); } /* Song list */ #setlist-songs { margin: 0; padding: var(--space-2) var(--space-5) var(--space-4); list-style: none; counter-reset: song-counter; } #setlist-songs li { counter-increment: song-counter; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border-light); font-size: var(--text-sm); line-height: var(--leading-normal); border-radius: var(--radius-sm); transition: background var(--transition-fast), transform var(--transition-fast); animation: songSlideIn var(--transition-slow) both; } #setlist-songs li:nth-child(even) { background: rgba(28, 25, 23, 0.015); } #setlist-songs li:hover { background: var(--color-surface-hover); } #setlist-songs li:active { transform: scale(0.99); } @keyframes songSlideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } #setlist-songs li:last-child { border-bottom: none; } #setlist-songs li::before { content: counter(song-counter); min-width: var(--space-6); text-align: right; color: var(--color-text-tertiary); font-size: var(--text-xs); font-weight: var(--font-medium); font-variant-numeric: tabular-nums; flex-shrink: 0; } .song-list-name { flex: 1; min-width: 0; font-weight: var(--font-medium); } #setlist-songs .tape-song { color: var(--color-text-tertiary); } #setlist-songs .tape-song .song-list-name { font-style: italic; font-weight: var(--font-normal); } /* Song legend (tape explanation) */ .song-legend { padding: var(--space-2) var(--space-5) var(--space-3); } .song-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-tertiary); line-height: var(--leading-normal); } .match-options { padding: 0 var(--space-5) var(--space-3); } .toggle-option { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; } .toggle-option input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--color-primary); cursor: pointer; } .toggle-label { font-size: var(--text-sm); color: var(--color-text-secondary); } .match-btn { margin: 0 var(--space-5) var(--space-5); width: calc(100% - var(--space-5) * 2); position: sticky; bottom: var(--space-4); box-shadow: var(--shadow-lg), 0 0 0 0 rgba(224, 90, 51, 0.4); z-index: 10; animation: ctaPulse 2.5s ease-in-out infinite; } .match-btn:hover { animation: none; box-shadow: var(--shadow-lg); } @keyframes ctaPulse { 0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(224, 90, 51, 0.35); } 50% { box-shadow: var(--shadow-lg), 0 0 0 8px rgba(224, 90, 51, 0); } } /* Collapsed input section after setlist is loaded */ .input-collapsed { padding: var(--space-3) var(--space-6); margin-bottom: var(--space-3); transition: padding var(--transition-normal); } .input-collapsed h2 { display: none; } .input-collapsed .input-group { gap: var(--space-2); } .input-collapsed .input-group input { font-size: var(--text-sm); min-height: 36px; padding: var(--space-2) var(--space-3); } .input-collapsed .input-group button { font-size: var(--text-sm); min-height: 36px; padding: var(--space-2) var(--space-3); } /* ============================================================ Song Items (Match Results) ============================================================ */ .song-item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border-light); font-size: var(--text-base); border-radius: var(--radius-sm); transition: background var(--transition-fast); } .song-item:hover { background: var(--color-surface-hover); } .song-item:last-child { border-bottom: none; } .song-item-header { display: flex; align-items: baseline; gap: var(--space-2); } .song-num { color: var(--color-text-tertiary); flex-shrink: 0; font-size: var(--text-xs); font-weight: var(--font-medium); min-width: var(--space-6); text-align: right; } .song-name { flex: 1; font-weight: var(--font-medium); min-width: 0; } .song-item-detail { display: flex; align-items: center; gap: var(--space-2); padding-left: calc(var(--space-6) + var(--space-2)); } .song-tag { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); margin-left: var(--space-2); font-weight: var(--font-medium); } .tag-cover { background: var(--color-tag-cover-bg); color: var(--color-tag-cover-text); } .tag-tape { background: var(--color-tag-tape-bg); color: var(--color-tag-tape-text); } /* ============================================================ Match Summary & Result Groups ============================================================ */ .match-summary { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-light); } .match-stat { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--font-medium); white-space: nowrap; } .match-stat-total { background: var(--color-bg); color: var(--color-text); font-weight: var(--font-semibold); } .match-stat-matched { background: var(--color-success-light); color: var(--color-success); } .match-stat-review { background: var(--color-warning-light); color: var(--color-warning); } .match-stat-notfound { background: var(--color-error-light); color: var(--color-error); } .match-stat-excluded { background: var(--color-tag-tape-bg); color: var(--color-tag-tape-text); } .result-group { margin-bottom: var(--space-4); } .group-header { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); margin-bottom: var(--space-2); cursor: pointer; user-select: none; transition: border-radius 0.2s ease; } .group-header:hover { filter: brightness(0.92); } .group-header:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } [data-theme="dark"] .group-header:hover { filter: brightness(1.15); } .group-header-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--radius-full); flex-shrink: 0; } .group-auto-header { background: var(--color-success-light); color: var(--color-success); } .group-auto-header .group-header-icon { background: var(--color-success); color: var(--color-text-inverse); } .group-review-header { background: var(--color-warning-light); color: var(--color-warning); } .group-review-header .group-header-icon { background: var(--color-warning); color: var(--color-text-inverse); } .group-notfound-header { background: var(--color-error-light); color: var(--color-error); } .group-notfound-header .group-header-icon { background: var(--color-error); color: var(--color-text-inverse); } .group-excluded-header { background: var(--color-tag-tape-bg); color: var(--color-tag-tape-text); } .group-excluded-header .group-header-icon { background: var(--color-tag-tape-text); color: var(--color-text-inverse); } .group-header-count { margin-left: auto; font-size: var(--text-xs); font-weight: var(--font-normal); opacity: 0.8; } .group-explanation { margin: 0; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); font-style: italic; } /* Chevron for collapsible groups */ .group-chevron { display: flex; align-items: center; transition: transform 0.25s ease; flex-shrink: 0; } .group-chevron svg { width: 18px; height: 18px; } .result-group.group-collapsed .group-chevron { transform: rotate(-90deg); } /* Hint shown in collapsed state */ .group-collapsed-hint { display: none; font-size: var(--text-xs); font-weight: var(--font-normal); opacity: 0.7; font-style: italic; } .result-group.group-collapsed .group-collapsed-hint { display: inline; } /* Collapsible group list */ .result-group .group-list { overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s ease; opacity: 1; } .result-group.group-collapsed .group-list { max-height: 0 !important; opacity: 0; pointer-events: none; } .result-group.group-collapsed .group-header { margin-bottom: 0; border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } /* Review status inside collapsed group */ .result-group.group-collapsed .review-status { display: none; } .match-info { color: var(--color-text-secondary); font-size: var(--text-sm); flex: 1; min-width: 0; line-height: var(--leading-normal); } .confidence-badge { font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--color-bg); color: var(--color-text-secondary); flex-shrink: 0; white-space: nowrap; font-weight: var(--font-medium); border: 1px solid var(--color-border-light); } /* ============================================================ Playlist Creation ============================================================ */ .playlist-song-count { font-size: var(--text-base); color: var(--color-text); font-weight: var(--font-medium); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-info-light); border-radius: var(--radius-md); } .playlist-song-count-zero { color: var(--color-error); background: var(--color-error-light); } /* --- Quota Display --- */ .quota-display { margin-bottom: var(--space-3); padding: var(--space-3); background: var(--color-surface-hover); border-radius: var(--radius-md); font-size: var(--text-sm); } .quota-bar-wrap { display: flex; align-items: center; gap: var(--space-3); } .quota-bar { flex: 1; height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; } .quota-bar-fill { height: 100%; border-radius: 3px; background: var(--color-success); transition: width 0.4s ease, background-color 0.3s ease; } .quota-bar-fill.quota-low { background: var(--color-warning); } .quota-bar-fill.quota-exhausted { background: var(--color-error); } .quota-text { font-size: var(--text-xs); color: var(--color-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; } .quota-detail { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-text-tertiary); } .quota-warning { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); padding: var(--space-3); background: var(--color-warning-light); border: 1px solid var(--color-warning-border); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--color-warning); font-weight: var(--font-medium); } .quota-warning-icon { font-size: var(--text-base); line-height: 1; flex-shrink: 0; } .playlist-status { margin-top: var(--space-3); font-size: var(--text-sm); } .playlist-status-error { color: var(--color-error); padding: var(--space-3); background: var(--color-error-light); border-radius: var(--radius-md); font-weight: var(--font-medium); } .playlist-status-success { margin-top: var(--space-0); display: flex; flex-direction: column; gap: var(--space-3); } .playlist-success-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-success-light); border: 1px solid var(--color-success-border); border-radius: var(--radius-md); } .playlist-success-icon { display: flex; align-items: center; justify-content: center; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-full); background: var(--color-success); color: var(--color-text-inverse); font-size: var(--text-lg); font-weight: var(--font-bold); flex-shrink: 0; } .playlist-success-body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; } .playlist-success-body strong { color: var(--color-success); font-size: var(--text-base); } .playlist-success-body span { color: var(--color-text-secondary); font-size: var(--text-sm); } .playlist-open-link { padding: var(--space-2) var(--space-3); background: var(--color-success); color: var(--color-text-inverse); text-decoration: none; border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); white-space: nowrap; flex-shrink: 0; transition: background var(--transition-fast); } .playlist-open-link:hover { background: var(--color-success-hover); } .playlist-start-over { padding: var(--space-3) var(--space-4); background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: var(--font-medium); cursor: pointer; min-height: var(--touch-target-min); transition: background var(--transition-fast), color var(--transition-fast); } .playlist-start-over:hover { background: var(--color-surface-hover); color: var(--color-text); } /* ============================================================ Loading Spinner ============================================================ */ .btn-loading { position: relative; color: transparent !important; } .btn-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: var(--color-text-inverse); border-radius: var(--radius-full); animation: spin 0.6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ Review Controls ============================================================ */ .review-item { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); background: var(--color-surface); transition: border-color var(--transition-normal), opacity var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-normal); } .review-item:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--color-primary-muted); } .review-item .review-header { margin-bottom: var(--space-3); } .review-item .review-header .song-name { font-weight: var(--font-semibold); font-size: var(--text-base); line-height: var(--leading-tight); } .review-options { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-3); } .review-option { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); min-height: var(--touch-target-min); transition: background var(--transition-fast); border: 1px solid transparent; line-height: var(--leading-normal); } .review-option:hover { background: var(--color-surface-hover); border-color: var(--color-border-light); } .review-option-selected { background: var(--color-primary-light); border-color: var(--color-primary-muted); } .review-radio { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; } .review-option-content { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .review-option-title { font-weight: var(--font-medium); color: var(--color-text); } .review-option-meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-tertiary); flex-wrap: wrap; } .review-option-video-badge { display: inline-block; padding: 0 var(--space-1); font-size: 0.625rem; font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.04em; background: var(--color-warning-light); color: var(--color-warning); border-radius: var(--radius-sm); line-height: 1.4; } .review-option-ytm-link { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--color-text-tertiary); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); align-self: center; } .review-option-ytm-link:hover { background: var(--color-primary-light); color: var(--color-primary); } .review-actions { display: flex; gap: var(--space-2); margin-top: var(--space-1); } .review-btn { flex: 1; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-semibold); border-radius: var(--radius-md); min-height: var(--touch-target-min); } .review-accept-btn { background: var(--color-success); } .review-accept-btn:hover { background: var(--color-success-hover); } .review-skip-btn { background: transparent; color: var(--color-text-tertiary); border: 1px solid var(--color-border); } .review-skip-btn:hover { background: var(--color-surface-hover); color: var(--color-text-secondary); } .review-decided { opacity: 0.6; } .review-decided:hover { opacity: 0.8; } .review-decided .review-actions { display: none; } .review-decided .review-options { display: none; } .review-decided-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); } .review-decided-label { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.05em; } .review-change-btn { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-medium); border-radius: var(--radius-full); background: transparent; color: var(--color-text-tertiary); border: 1px solid var(--color-border); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .review-change-btn:hover { color: var(--color-text-secondary); border-color: var(--color-text-tertiary); background: var(--color-surface-hover); } .review-accepted { border-color: var(--color-success-border); } .review-accepted .review-decided-label { background: var(--color-success-light); color: var(--color-success); } .review-skipped { border-color: var(--color-border); } .review-skipped .review-decided-label { background: var(--color-bg); color: var(--color-text-tertiary); } .review-status { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-warning-light); border-radius: var(--radius-md); font-weight: var(--font-medium); } .review-batch-actions { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); } .review-batch-btn { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); font-weight: var(--font-semibold); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .review-batch-accept-btn { background: var(--color-success); color: #fff; border: 1px solid var(--color-success); } .review-batch-accept-btn:hover { background: var(--color-success-hover); border-color: var(--color-success-hover); } .review-batch-skip-btn { background: transparent; color: var(--color-text-tertiary); border: 1px solid var(--color-border); } .review-batch-skip-btn:hover { background: var(--color-surface-hover); color: var(--color-text-secondary); } /* ============================================================ Manual Search & Override ============================================================ */ .search-btn { margin-left: calc(var(--space-6) + var(--space-2)); margin-top: var(--space-1); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-primary); background: var(--color-primary-light); border: 1px solid var(--color-primary-muted); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast); } .search-btn:hover { background: var(--color-primary-muted); color: var(--color-text-inverse); } .override-btn { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-text-tertiary); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; flex-shrink: 0; transition: color var(--transition-fast), border-color var(--transition-fast); } .override-btn:hover { color: var(--color-primary); border-color: var(--color-primary-muted); } .manual-search-area { margin-left: calc(var(--space-6) + var(--space-2)); margin-top: var(--space-2); padding: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); } .manual-search-input-row { display: flex; gap: var(--space-2); } .manual-search-input { flex: 1; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); min-width: 0; } .manual-search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-light); } .manual-search-submit { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-inverse); background: var(--color-primary); border: none; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; transition: background var(--transition-fast); } .manual-search-submit:hover { background: var(--color-primary-hover); } .manual-search-submit:disabled { opacity: 0.6; cursor: not-allowed; } .manual-search-results { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); } .manual-search-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); } .override-info { padding-left: calc(var(--space-6) + var(--space-2)); } .override-info-row { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); } .override-badge { font-size: var(--text-xs); padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--color-info-light); color: var(--color-info); flex-shrink: 0; white-space: nowrap; font-weight: var(--font-medium); border: 1px solid transparent; } .override-undo-btn { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-text-tertiary); background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; flex-shrink: 0; transition: color var(--transition-fast), border-color var(--transition-fast); } .override-undo-btn:hover { color: var(--color-error); border-color: var(--color-error); } .review-search-btn { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-primary); background: var(--color-primary-light); border: 1px solid var(--color-primary-muted); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast); } .review-search-btn:hover { background: var(--color-primary-muted); color: var(--color-text-inverse); } .review-item .manual-search-area { margin-left: 0; margin-top: var(--space-2); } /* Color-independent status indicators — border style + text label */ .song-item-auto { border-left: 3px solid var(--color-success); } .song-item-notfound { border-left: 3px dashed var(--color-error); } .song-item-excluded { border-left: 3px dashed var(--color-tag-tape-text); opacity: 0.7; } .review-item { border-left: 3px dotted var(--color-warning); } .status-label { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: 0.05em; padding: 2px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap; } .status-label-matched { background: var(--color-success-light); color: var(--color-success); } .status-label-review { background: var(--color-warning-light); color: var(--color-warning); } .status-label-notfound { background: var(--color-error-light); color: var(--color-error); } .status-label-excluded { background: var(--color-tag-tape-bg); color: var(--color-tag-tape-text); } .song-item-accept-review { border-left: 3px solid var(--color-success-border); } .status-label-likely { background: var(--color-info-light); color: var(--color-info); } .song-item-skipped { opacity: 0.55; } .skip-likely-btn, .include-likely-btn { font-size: var(--text-xs); padding: 2px var(--space-2); } .song-item-overridden { border-left: 3px solid var(--color-info); } /* ============================================================ Auth Setup ============================================================ */ #auth-section { position: relative; border: 1px solid var(--color-warning-border); background: linear-gradient(135deg, var(--color-warning-light) 0%, var(--color-surface) 60%); overflow: hidden; } #auth-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-warning)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } #auth-section h2 { display: flex; align-items: center; gap: var(--space-2); } #auth-section h2::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-warning); flex-shrink: 0; animation: authDot 2s ease-in-out infinite; } @keyframes authDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .auth-steps { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-4) 0 var(--space-5); position: relative; } /* Vertical connector line between steps */ .auth-steps::before { content: ""; position: absolute; left: calc(1.75rem / 2); top: 1.75rem; bottom: 1.75rem; width: 2px; background: var(--color-border); } .auth-step { display: flex; align-items: flex-start; gap: var(--space-3); position: relative; z-index: 1; } .auth-step-num { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-primary); font-size: var(--text-sm); font-weight: var(--font-bold); flex-shrink: 0; border: 2px solid var(--color-primary-muted); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .auth-step-active .auth-step-num { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); } .auth-step-done .auth-step-num { background: var(--color-success); color: var(--color-text-inverse); border-color: var(--color-success); } .auth-step-done .auth-step-num::after { content: "\2713"; font-size: var(--text-xs); } .auth-step-content { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); padding-top: 2px; } .auth-step-label { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text); line-height: var(--leading-tight); } .auth-step-hint { font-size: var(--text-xs); color: var(--color-text-tertiary); line-height: var(--leading-normal); } .auth-code-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .auth-code { font-size: var(--text-lg); font-weight: var(--font-bold); letter-spacing: 0.1em; color: var(--color-primary); font-family: var(--font-mono); padding: var(--space-2) var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); user-select: all; -webkit-user-select: all; } .auth-copy-btn { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); background: var(--color-surface); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-height: var(--touch-target-min); } .auth-copy-btn:hover { background: var(--color-surface-hover); color: var(--color-text); } .auth-copy-success { background: var(--color-success-light); color: var(--color-success); border-color: var(--color-success-border); } .auth-open-btn { align-self: flex-start; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); min-height: var(--touch-target-min); } .auth-poll-status { font-size: var(--text-sm); color: var(--color-text-secondary); margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-2); } .auth-poll-status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-warning); animation: authDot 1.5s ease-in-out infinite; flex-shrink: 0; } .auth-poll-status.auth-success::before { background: var(--color-success); animation: none; } .auth-success { color: var(--color-success); font-weight: var(--font-semibold); } .auth-countdown { font-size: var(--text-xs); color: var(--color-text-tertiary); margin-top: var(--space-1); } .auth-countdown-expired { color: var(--color-error); font-weight: var(--font-medium); } #auth-start-btn { margin-top: var(--space-3); width: 100%; } /* --- Flow connector between auth and next card --- */ .auth-flow-connector { display: flex; flex-direction: column; align-items: center; padding: var(--space-1) 0; color: var(--color-text-tertiary); } .auth-flow-connector svg { opacity: 0.5; } /* ============================================================ Page Transitions & Section Reveals ============================================================ */ /* --- Section reveal: fade + slide up --- */ .section-reveal { animation: sectionSlideIn var(--transition-slow) both; } @keyframes sectionSlideIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* --- Step collapsing: smooth fold-up of completed steps --- */ .step-collapsed { overflow: hidden; max-height: 0; opacity: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; transition: max-height 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms ease, margin-bottom 400ms ease, padding-top 400ms ease, padding-bottom 400ms ease; } /* Compact step summary shown after collapse */ .step-summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); cursor: pointer; min-height: var(--touch-target-min); opacity: 0; transform: translateY(-8px); animation: summaryFadeIn 300ms ease 100ms both; transition: box-shadow var(--transition-fast), background var(--transition-fast); } .step-summary:hover { box-shadow: var(--shadow-md); background: var(--color-surface-hover); } .step-summary-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-success); color: var(--color-text-inverse); font-size: var(--text-sm); font-weight: var(--font-bold); flex-shrink: 0; } .step-summary-text { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .step-summary-action { font-size: var(--text-xs); color: var(--color-primary); font-weight: var(--font-medium); flex-shrink: 0; } @keyframes summaryFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* --- Playlist success card entrance --- */ .playlist-success-card { animation: successCardIn 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes successCardIn { from { opacity: 0; transform: scale(0.95) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* ============================================================ Swipe Navigation — Desktop defaults (transparent wrappers) ============================================================ */ .swipe-container { /* On desktop: just a block container, no horizontal scroll */ } .swipe-panel { /* On desktop: transparent wrapper, no special layout */ } .swipe-nav { /* Hidden on desktop — only shown via mobile media query */ display: none; } /* ============================================================ Swipe Navigation — Mobile (scroll-snap horizontal panels) ============================================================ */ @media (max-width: 768px) { body { height: 100vh; /* fallback for older browsers */ height: 100dvh; /* dynamic viewport height for modern browsers */ overflow-x: hidden; padding: 0; display: flex; flex-direction: column; } header { flex-shrink: 0; padding: var(--space-2) var(--space-3); margin-bottom: 0; display: flex; align-items: center; gap: var(--space-2); text-align: left; } header h1 { font-size: var(--text-lg); line-height: var(--leading-tight); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .refresh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; height: 44px; padding: 0 14px 0 10px; border: 1.5px solid var(--color-text-tertiary); border-radius: 22px; background: var(--color-surface); color: var(--color-text); cursor: pointer; box-shadow: var(--shadow-sm); transition: background 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; order: -1; /* Place before title */ } .refresh-btn svg { width: 20px; height: 20px; flex-shrink: 0; } .refresh-btn:hover { background: var(--color-surface-hover); color: var(--color-text); } .refresh-btn:active { background: var(--color-primary-light); color: var(--color-primary); } .btn-label { display: inline; font-size: 0.8125rem; font-weight: 500; line-height: 1; white-space: nowrap; } .brand-icon { display: none; } .subtitle { display: none; } /* Theme toggle: compact single-button on mobile, placed after title */ .theme-toggle { position: static; flex-shrink: 0; order: 1; width: auto; height: 44px; padding: 4px; gap: 0; align-items: center; justify-content: center; border-radius: 22px; } .theme-toggle-btn:not(.active) { display: none; } .theme-toggle-btn.active { width: auto; height: 36px; gap: 4px; padding: 0 10px 0 8px; border-radius: 18px; } .theme-toggle-btn.active svg { width: 20px; height: 20px; flex-shrink: 0; } main { flex: 1; display: flex; flex-direction: column; overflow-x: hidden; max-width: none; width: 100%; } /* Auth section sits above the swipe area — compact on mobile */ main > #auth-section { flex-shrink: 1; margin: 0 var(--space-3); border-radius: var(--radius-md); max-height: 40vh; overflow-y: auto; padding: var(--space-3) var(--space-4); } main > #auth-section h2 { font-size: var(--text-sm); margin-bottom: var(--space-2); } #auth-message { font-size: var(--text-sm); margin-bottom: var(--space-2); } .auth-steps { gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); } .auth-step-num { width: 1.25rem; height: 1.25rem; font-size: var(--text-xs); } .auth-steps::before { left: calc(1.25rem / 2); top: 1.25rem; bottom: 1.25rem; } /* Hide the flow connector arrow on mobile swipe layout */ .auth-flow-connector { display: none !important; } .swipe-container { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; /* Hide scrollbar */ scrollbar-width: none; /* Firefox */ } .swipe-container::-webkit-scrollbar { display: none; /* Chrome/Safari */ } .swipe-panel { flex: 0 0 100%; width: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; scroll-snap-align: start; overscroll-behavior-y: auto; padding: var(--space-3); } /* Hidden panels don't participate in swipe */ .swipe-panel:not(.swipe-panel-active) { display: none; } /* Cards inside panels: no hover transform, full-width */ .swipe-panel .card { margin-bottom: var(--space-3); } .swipe-panel .card:hover { transform: none; box-shadow: var(--shadow-md); } /* Dot navigation bar */ .swipe-nav { display: flex; justify-content: center; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); padding-bottom: max(var(--space-2), env(safe-area-inset-bottom)); flex-shrink: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); } .swipe-dot { width: 10px; height: 10px; min-width: 10px; min-height: 10px; border-radius: var(--radius-full); border: none; background: var(--color-border); padding: 0; margin: 0; font-size: 0; line-height: 0; appearance: none; -webkit-appearance: none; cursor: pointer; transition: background var(--transition-fast), transform var(--transition-fast); } .swipe-dot:disabled { opacity: 0.35; cursor: default; } .swipe-dot.active { background: var(--color-primary); transform: scale(1.3); } /* Review items: tighter padding on mobile */ .review-item { padding: var(--space-3); } .review-btn { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); } /* Song items: reduce detail padding on mobile */ .song-item-detail { padding-left: calc(var(--space-6) + var(--space-2)); } /* Cards: less padding on mobile */ .card { padding: var(--space-4); } /* Stack playlist input + button vertically on mobile */ #playlist-form-row { flex-direction: column; } #playlist-form-row input { width: 100%; } #playlist-form-row button { width: 100%; } /* Redesign success card: stacked layout on mobile */ .playlist-success-card { flex-direction: column; text-align: center; padding: var(--space-5) var(--space-4); } .playlist-success-body { align-items: center; } .playlist-open-link { width: 100%; text-align: center; padding: var(--space-3) var(--space-4); min-height: var(--touch-target-min); display: flex; align-items: center; justify-content: center; } .playlist-start-over { width: 100%; } /* Step summaries are hidden on mobile swipe — no collapse needed */ .step-summary { display: none; } .step-collapsed { overflow: visible; max-height: none; opacity: 1; margin-bottom: var(--space-3); padding-top: var(--space-6); padding-bottom: var(--space-6); transition: none; } } /* Landscape mobile: collapse header further */ @media (max-width: 768px) and (max-height: 450px) { header { padding: var(--space-1) var(--space-3); } header h1 { font-size: var(--text-base); } .btn-label { display: none; } .refresh-btn { width: 44px; height: 44px; padding: 0; gap: 0; } .theme-toggle { width: 44px; height: 44px; padding: 2px; } .theme-toggle-btn.active { width: 36px; height: 36px; padding: 0; gap: 0; } } /* ============================================================ Responsive: Mobile Stacking ============================================================ */ @media (max-width: 480px) { .input-group { flex-direction: column; } .input-group input { width: 100%; } .input-group button { width: 100%; } .how-it-works { gap: var(--space-2); } .how-step-icon { width: 36px; height: 36px; } .how-step-icon svg { width: 16px; height: 16px; } .how-step-text { font-size: 11px; } /* Auth: tighter code on narrow screens */ .auth-code { font-size: var(--text-base); letter-spacing: 0.08em; } .auth-code-row { gap: var(--space-2); } /* Review actions: stack vertically on narrow screens */ .review-actions { flex-direction: column; } .review-btn { width: 100%; } /* Status labels: allow wrapping on narrow screens */ .status-label { white-space: normal; font-size: 0.625rem; padding: 1px var(--space-1); letter-spacing: 0.02em; } /* Song headers: wrap for narrow screens */ .song-item-header { flex-wrap: wrap; } /* Review header: allow wrapping */ .review-item .review-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); } /* Song detail row: wrap on narrow */ .song-item-detail { flex-wrap: wrap; padding-left: calc(var(--space-6) + var(--space-2)); } /* Search button: full width on narrow */ .search-btn { margin-left: 0; width: 100%; text-align: center; } }