/* ══════════════════════════════════════════════════════════════
NEO-OCEAN — One Piece Journey Tracker (Redesigned UI)
Fonts: Syne (headings) · Outfit (body) · DM Mono (numbers)
══════════════════════════════════════════════════════════════ */
/* ── Design Tokens ─────────────────────────────────────────────────────── */
/*
* Theme system: swapping data-theme="dark"|"light" on repoints
* all semantic variables. Accent colours are shared; surface/text
* colours are redefined per theme. Transition on body ensures a smooth
* cross-fade when toggling.
*/
/* ── Shared accents ────────────────────────────────────────────────────── */
:root {
--cyan: #00e5d4;
--cyan-dim: #006060;
--cyan-glow: rgba(0, 229, 212, 0.12);
--gold: #f0a832;
--gold-light: #f5c058;
--gold-dim: #7a5418;
--red: #e84040;
--red-bright: #ff5566;
--teal: #00c4a8;
--teal-light: #00e8c8;
--purple: #8050cc;
--purple-light: #b888ff;
--amber: #e08820;
--elbaf: #1a4fa8;
--elbaf-light: #3d8fff;
/* New Saga Atmospheric Variables */
--saga-bg: transparent;
--saga-glow: var(--cyan);
--saga-glow-opacity: 0.12;
--saga-shimmer: rgba(0, 180, 200, 0.04);
}
/* ── Dark theme (default) ────────────────────────────────────────────── */
[data-theme="dark"] {
--navy: #040b18;
--deep: #020810;
--panel: rgba(8, 18, 40, 0.86);
--border: rgba(0, 180, 190, 0.2);
--text: #9ab8d8;
--text-muted: #6f8fb3;
--text-dim: #4b6788;
--white: #d8ecff;
--glow: rgba(0, 229, 212, 0.12);
--focus-ring: 0 0 0 3px rgba(0, 229, 212, 0.4);
--input-bg: rgba(255, 255, 255, 0.06);
--input-color: var(--white);
--search-bg: rgba(255, 255, 255, 0.06);
--textarea-bg: rgba(255, 255, 255, 0.05);
}
/* ── Light theme ─────────────────────────────────────────────────────── */
[data-theme="light"] {
--navy: #eef4ff;
--deep: #dde8f8;
--panel: rgba(255, 255, 255, 0.82);
--border: rgba(0, 100, 160, 0.18);
--text: #1a2a42;
--text-muted: #3d5880;
--text-dim: #7090b8;
--white: #080e1e;
--glow: rgba(0, 100, 140, 0.07);
--focus-ring: 0 0 0 3px rgba(0, 120, 200, 0.3);
--input-bg: rgba(0, 50, 100, 0.04);
--input-color: var(--text);
--search-bg: rgba(0, 50, 100, 0.04);
--textarea-bg: rgba(0, 50, 100, 0.03);
--cyan: #006f88;
--cyan-dim: #004f66;
--cyan-glow: rgba(0, 100, 140, 0.08);
--gold: #b07010;
--gold-light: #c88820;
--gold-dim: #6a4808;
--teal: #007a6a;
--teal-light: #009988;
--elbaf-light: #1a6fd0;
}
/* ── Saga Themes (Dynamic Atmospheres) ─────────────────────────────────── */
/* 1. East Blue: Fresh / Adventure */
[data-saga="East Blue"] {
--cyan: #4FC3F7; --cyan-dim: #0288D1;
--saga-bg: linear-gradient(135deg, #040b18 0%, #01579b 100%);
--saga-glow: #4FC3F7;
--saga-glow-opacity: 0.12;
--saga-shimmer: rgba(79, 195, 247, 0.03);
}
/* 2. Alabasta: Desert / Heat */
[data-saga="Alabasta"] {
--cyan: #E0A458; --cyan-dim: #C47A2C;
--saga-bg: linear-gradient(135deg, #1a1005 0%, #3e2723 100%);
--saga-glow: #FFD180;
--saga-glow-opacity: 0.18;
--saga-shimmer: rgba(224, 164, 88, 0.05);
}
/* 3. Skypiea: Sky / Dreamy */
[data-saga="Skypiea"] {
--cyan: #81D4FA; --cyan-dim: #4FC3F7;
--saga-bg: linear-gradient(135deg, #0a1a3a 0%, #81d4fa33 100%);
--saga-glow: #FFFFFF;
--saga-glow-opacity: 0.1;
--saga-shimmer: rgba(255, 255, 255, 0.03);
}
/* 4. Water 7: Storm / Drama */
[data-saga="Water 7"] {
--cyan: #1565C0; --cyan-dim: #0D47A1;
--saga-bg: linear-gradient(135deg, #010a1a 0%, #1565c044 100%);
--saga-glow: #00E5FF;
--saga-glow-opacity: 0.15;
--saga-shimmer: rgba(0, 229, 255, 0.04);
}
/* 5. Thriller Bark: Horror / Eerie */
[data-saga="Thriller Bark"] {
--cyan: #7E57C2; --cyan-dim: #512DA8;
--saga-bg: linear-gradient(135deg, #05020a 0%, #311b9244 100%);
--saga-glow: #B388FF;
--saga-glow-opacity: 0.15;
--saga-shimmer: rgba(179, 136, 255, 0.04);
}
/* 6. Marineford: War / Fire */
[data-saga="Marineford"] {
--cyan: #E53935; --cyan-dim: #B71C1C;
--saga-bg: linear-gradient(135deg, #100202 0%, #e5393533 100%);
--saga-glow: #FF7043;
--saga-glow-opacity: 0.2;
--saga-shimmer: rgba(229, 57, 53, 0.06);
}
/* 7. Post-War: Recovery / Calm */
[data-saga="Post-War"] {
--cyan: #F48FB1; --cyan-dim: #C2185B;
--saga-bg: linear-gradient(135deg, #1a0a1a 0%, #f48fb122 100%);
--saga-glow: #90CAF9;
--saga-glow-opacity: 0.12;
--saga-shimmer: rgba(244, 143, 177, 0.04);
}
/* 8. Fish-Man Island: Deep Sea */
[data-saga="Fish-Man Island"] {
--cyan: #00ACC1; --cyan-dim: #006064;
--saga-bg: radial-gradient(circle at center, #002b36 0%, #000000 100%);
--saga-glow: #64FFDA;
--saga-glow-opacity: 0.18;
--saga-shimmer: rgba(0, 172, 193, 0.06);
}
/* 9. Dressrosa: Colorful Chaos */
[data-saga="Dressrosa"] {
--cyan: #EC407A; --cyan-dim: #AD1457;
--saga-bg: linear-gradient(135deg, #1a0510 0%, #ec407a33 100%);
--saga-glow: #FFD54F;
--saga-glow-opacity: 0.18;
--saga-shimmer: rgba(236, 64, 122, 0.06);
}
/* 10. Whole Cake Island: Sweet / Eerie */
[data-saga="Whole Cake Island"] {
--cyan: #FF80AB; --cyan-dim: #C51162;
--saga-bg: linear-gradient(135deg, #1e0a14 0%, #ff80ab22 100%);
--saga-glow: #FFE082;
--saga-glow-opacity: 0.15;
--saga-shimmer: rgba(255, 128, 171, 0.05);
}
/* 11. Wano: Traditional / Elegant */
[data-saga="Wano"] {
--cyan: #B71C1C; --cyan-dim: #7f0000;
--saga-bg: linear-gradient(135deg, #0a0000 0%, #b71c1c22 100%);
--saga-glow: #FFD54F;
--saga-glow-opacity: 0.12;
--saga-shimmer: rgba(183, 28, 28, 0.05);
}
/* 12. Final Saga: Futuristic / Cyber */
[data-saga="Final Saga"] {
--cyan: #00E5FF; --cyan-dim: #00B8D4;
--saga-bg: linear-gradient(135deg, #02040a 0%, #00e5ff11 100%);
--saga-glow: #B388FF;
--saga-glow-opacity: 0.18;
--saga-shimmer: rgba(0, 229, 255, 0.06);
}
/* ☀️ Light Mode Saga Overrides (Clarity & Softness) */
[data-theme="light"][data-saga="East Blue"] {
--cyan: #0288D1; --saga-bg: linear-gradient(135deg, #e1f5fe 0%, #b3e5fc 100%); --saga-glow-opacity: 0.06;
}
[data-theme="light"][data-saga="Alabasta"] {
--cyan: #C47A2C; --saga-bg: linear-gradient(135deg, #fff8e1 0%, #ffe0b2 100%); --saga-glow-opacity: 0.08;
}
[data-theme="light"][data-saga="Skypiea"] {
--cyan: #4FC3F7; --saga-bg: linear-gradient(135deg, #f1f8fe 0%, #e1f5fe 100%); --saga-glow-opacity: 0.05;
}
[data-theme="light"][data-saga="Water 7"] {
--cyan: #1976D2; --saga-bg: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%); --saga-glow-opacity: 0.07;
}
[data-theme="light"][data-saga="Thriller Bark"] {
--cyan: #9575CD; --saga-bg: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%); --saga-glow-opacity: 0.07;
}
[data-theme="light"][data-saga="Marineford"] {
--cyan: #D32F2F; --saga-bg: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%); --saga-glow-opacity: 0.09;
}
[data-theme="light"][data-saga="Post-War"] {
--cyan: #EC407A; --saga-bg: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%); --saga-glow-opacity: 0.06;
}
[data-theme="light"][data-saga="Fish-Man Island"] {
--cyan: #26C6DA; --saga-bg: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%); --saga-glow-opacity: 0.08;
}
[data-theme="light"][data-saga="Dressrosa"] {
--cyan: #F06292; --saga-bg: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%); --saga-glow-opacity: 0.08;
}
[data-theme="light"][data-saga="Whole Cake Island"] {
--cyan: #F8BBD0; --saga-bg: linear-gradient(135deg, #fff1f1 0%, #fce4ec 100%); --saga-glow-opacity: 0.06;
}
[data-theme="light"][data-saga="Wano"] {
--cyan: #C62828; --saga-bg: linear-gradient(135deg, #fdfaf5 0%, #f5e9e2 100%); --saga-glow-opacity: 0.05;
}
[data-theme="light"][data-saga="Final Saga"] {
--cyan: #0288D1; --saga-bg: linear-gradient(135deg, #f3e5f5 0%, #e1f5fe 100%); --saga-glow-opacity: 0.08;
}
/* ── Reset ─────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ── Base ──────────────────────────────────────────────────────────────── */
body {
background: var(--navy);
color: var(--text);
font-family: 'Outfit', system-ui, sans-serif;
font-weight: 400;
min-height: 100vh;
overflow-x: hidden;
scrollbar-gutter: stable;
transition: background .35s ease, color .35s ease;
-webkit-tap-highlight-color: transparent;
}
button,
.ep-clickable,
.btn-filler-action,
.theme-option,
.bottom-nav-btn {
touch-action: manipulation;
}
/* Layered deep aurora background */
body::before {
content: '';
position: fixed;
inset: 0;
background: var(--saga-bg);
pointer-events: none;
z-index: -2;
transition: background 1s ease;
}
/* Subtle atmospheric glow */
body::after {
content: '';
position: fixed;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
background: radial-gradient(circle at 50% 50%, var(--saga-glow), transparent 70%);
opacity: var(--saga-glow-opacity);
z-index: -1;
pointer-events: none;
filter: blur(100px);
transition: background 1s ease, opacity 1s ease;
}
/* Subtle animated scan-line shimmer (using saga shimmer color) */
.scanlines-overlay {
position: fixed;
inset: 0;
background: repeating-linear-gradient(
transparent 0px,
transparent 22px,
var(--saga-shimmer) 22px,
var(--saga-shimmer) 24px
);
pointer-events: none;
z-index: -1;
opacity: 0.5;
}
/* ── Visually Hidden (a11y utility) ────────────────────────────────────── */
@media (max-width: 500px) {
#progressModal .dialog {
width: calc(100% - 20px);
margin: 10px;
max-height: calc(100vh - 40px);
}
.progress-modal-header {
padding: 16px 18px 12px;
}
.progress-modal-body {
padding: 16px;
}
.progress-modal-footer {
padding: 14px 18px;
font-size: 11px;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ── Focus Styles ──────────────────────────────────────────────────────── */
/*
* Only show focus rings on keyboard navigation (focus-visible),
* not on mouse clicks — keeps the UI clean while remaining accessible.
*/
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 4px;
}
button:focus-visible,
.toggle-option:focus-visible {
box-shadow: var(--focus-ring);
outline: none;
}
input[type="number"]:focus-visible {
border-color: var(--gold-dim);
box-shadow: var(--focus-ring);
outline: none;
}
/* ── Layout ────────────────────────────────────────────────────────────── */
.app {
position: relative;
z-index: 1;
max-width: 1060px;
margin: 0 auto;
padding: 0 28px 80px;
}
/* ── Header ────────────────────────────────────────────────────────────── */
header {
text-align: center;
padding: 52px 0 32px;
}
header::after {
content: '';
display: block;
margin: 22px auto 0;
width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.skull-icon {
font-size: 56px;
display: block;
margin-bottom: 12px;
filter: drop-shadow(0 0 16px rgba(0, 229, 212, 0.4));
animation: float 5s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
h1 {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: clamp(22px, 4.5vw, 44px);
color: var(--white);
letter-spacing: .02em;
line-height: 1.15;
background: linear-gradient(135deg, var(--white) 30%, var(--cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.subtitle {
font-size: 14px;
font-weight: 400;
color: var(--text-muted);
font-style: italic;
margin-top: 8px;
letter-spacing: .12em;
}
/* ── Elbaf Banner ──────────────────────────────────────────────────────── */
.elbaf-banner {
background: rgba(20, 50, 110, 0.35);
border: 1px solid rgba(61, 143, 255, 0.22);
border-radius: 14px;
padding: 14px 20px;
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 14px;
position: relative;
overflow: hidden;
flex-wrap: wrap;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.elbaf-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--elbaf-light), transparent);
animation: shimmer 3.5s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { opacity: .3; }
50% { opacity: 1; }
}
.elbaf-banner-icon {
font-size: 26px;
flex-shrink: 0;
animation: float 4s ease-in-out infinite;
}
.elbaf-banner-title {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 11px;
color: var(--elbaf-light);
letter-spacing: .14em;
text-transform: uppercase;
}
.elbaf-banner-sub {
font-size: 13px;
color: var(--text-muted);
font-style: italic;
margin-top: 3px;
}
/* Live countdown chip */
.elbaf-countdown {
margin-left: auto;
flex-shrink: 0;
font-family: 'DM Mono', monospace;
font-size: 11px;
color: var(--elbaf-light);
letter-spacing: .06em;
background: rgba(30, 80, 180, 0.18);
border: 1px solid rgba(61, 143, 255, 0.25);
border-radius: 10px;
padding: 7px 14px;
text-align: center;
line-height: 1.5;
min-width: 90px;
}
.elbaf-countdown .cd-label {
font-family: 'Outfit', sans-serif;
font-size: 9px;
color: var(--text-muted);
display: block;
margin-top: 2px;
letter-spacing: .1em;
}
/* ── Main Journey Card (Merged) ───────────────────────────────────────── */
.main-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 20px;
padding: 18px;
margin-bottom: 18px;
position: relative;
overflow: hidden;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.main-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--red) 0%, var(--gold) 50%, var(--cyan) 100%);
opacity: 0.6;
}
.progress-hero-compact {
margin-bottom: 4px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.progress-bottom-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.streak-mini {
font-family: 'Syne', sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--gold);
display: flex;
align-items: center;
gap: 4px;
background: rgba(240, 168, 50, 0.08);
padding: 2px 8px;
border-radius: 6px;
border: 1px solid rgba(240, 168, 50, 0.15);
}
.controls-compact {
display: flex;
flex-direction: column;
gap: 12px;
}
.controls-row {
display: flex;
gap: 10px;
width: 100%;
}
.ep-input-group {
display: flex;
background: rgba(255, 255, 255, 0.03);
border: 1px solid var(--border);
border-radius: 12px;
flex: 1.2;
overflow: hidden;
}
.ep-input-group input {
background: transparent !important;
border: none !important;
width: 100% !important;
text-align: center;
font-size: 18px !important;
padding: 8px 0 !important;
color: var(--white);
}
.ep-input-group .btn-adjust {
background: transparent;
border: none;
color: var(--text-muted);
width: 40px;
cursor: pointer;
font-size: 20px;
transition: all .2s;
}
.ep-input-group .btn-adjust:hover {
color: var(--white);
background: rgba(255, 255, 255, 0.05);
}
.btn-watch-next {
flex: 1;
background: linear-gradient(135deg, #e84040 0%, #f0a832 100%);
color: var(--white);
box-shadow: 0 4px 15px rgba(232, 64, 64, 0.2);
}
#watchNextText {
font-size: clamp(14px, 4.5vw, 18px);
font-weight: 700;
}
.btn-full {
width: 100%;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid var(--border) !important;
color: var(--text) !important;
}
.btn-full:hover {
background: rgba(255, 255, 255, 0.08) !important;
border-color: var(--cyan-dim) !important;
}
/* ── Progress Hero ─────────────────────────────────────────────────────── */
.progress-hero {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 18px;
padding: 28px 28px 50px 28px;
margin-bottom: 18px;
position: relative;
overflow: hidden;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
transform: translateZ(0);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(0, 200, 220, 0.08);
}
.progress-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, var(--red) 0%, var(--cyan) 50%, var(--elbaf-light) 100%);
}
.progress-hero-inner {
display: flex;
align-items: center;
gap: 28px;
flex-wrap: wrap;
}
.main-forecast-note {
text-align: center;
font-size: 11px;
color: var(--text-dim);
font-style: italic;
margin: 0 0 12px;
line-height: 1.4;
display: none;
}
.big-number {
text-align: center;
min-width: 100px;
}
.big-ep {
font-family: 'DM Mono', monospace;
font-weight: 500;
font-size: 70px;
color: var(--cyan);
line-height: 1;
text-shadow: 0 0 30px rgba(0, 229, 212, 0.35), 0 0 60px rgba(0, 229, 212, 0.15);
}
.big-label {
font-family: 'Syne', sans-serif;
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
letter-spacing: .2em;
text-transform: uppercase;
margin-top: 6px;
}
.progress-info {
flex: 1;
min-width: 200px;
}
.progress-row {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 10px;
flex-wrap: nowrap;
}
.arc-name {
flex: 1;
min-width: 0;
line-height: 1.2;
container-type: inline-size; /* Enable container queries for font-size scaling */
}
.hero-arc-stack {
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
}
.hero-arc-main {
font-family: 'Syne', sans-serif;
font-weight: 800;
/* Dynamic scaling: 8% of the container width, between 14px and 24px */
font-size: clamp(14px, 8cqw, 24px);
color: var(--white);
letter-spacing: -0.04em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.hero-saga-tag {
font-family: 'Outfit', sans-serif;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--cyan);
background: var(--cyan-glow);
padding: 2px 6px;
border-radius: 4px;
align-self: flex-start;
display: inline-block;
}
.progress-bottom-row {
margin-top: 10px;
}
.progress-stats-main {
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 100%;
}
.progress-stats-left {
display: flex;
flex-direction: column;
gap: 2px;
}
.ep-fraction {
font-family: 'DM Mono', monospace;
font-size: 12px;
color: var(--text-muted);
white-space: nowrap;
letter-spacing: 0.05em;
line-height: 1;
}
.progress-pct {
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.02em;
font-style: italic;
opacity: 0.8;
text-align: left;
line-height: 1;
}
.main-forecast-note {
text-align: center;
font-size: 11px;
color: var(--text-dim);
font-style: italic;
margin: 4px 0 8px; /* Reduced from 12px */
line-height: 1.4;
display: none;
}
.progress-bar-wrap {
background: rgba(255, 255, 255, 0.04);
border-radius: 8px;
height: 8px;
overflow: hidden;
border: 1px solid var(--border);
}
.progress-bar-fill {
height: 100%;
border-radius: 8px;
background: linear-gradient(90deg, var(--red) 0%, var(--gold) 40%, var(--cyan) 100%);
transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 0 10px rgba(0, 229, 212, 0.4);
}
/* ── Total Episode Fetch Status ────────────────────────────────────────── */
.fetch-status {
font-size: 11px;
color: var(--text-dim);
font-style: italic;
font-weight: 500;
margin-top: 4px;
min-height: 16px;
transition: color .3s;
}
.fetch-status.ok { color: var(--teal-light); }
.fetch-status.error { color: rgba(232, 64, 64, .65); }
/* ── Controls Card ─────────────────────────────────────────────────────── */
.controls-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px 22px;
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.controls-label {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 10px;
color: var(--text-muted);
letter-spacing: .18em;
text-transform: uppercase;
white-space: nowrap;
}
.ep-input-wrap {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
min-width: 180px;
}
input[type="number"] {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--white);
font-family: 'DM Mono', monospace;
font-size: 20px;
padding: 8px 14px;
width: 108px;
outline: none;
transition: border-color .2s, box-shadow .2s;
-moz-appearance: textfield;
appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: .08em;
border: none;
border-radius: 10px;
cursor: pointer;
min-height: 40px;
padding: 0 18px;
transition: all .2s;
white-space: nowrap;
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1;
vertical-align: middle;
}
.btn-primary {
background: linear-gradient(135deg, #b02020 0%, #7a0e0e 100%);
color: var(--white);
border: 1px solid rgba(232, 64, 64, 0.3);
box-shadow: 0 2px 14px rgba(220, 50, 50, 0.25);
}
.btn-primary:hover {
background: linear-gradient(135deg, var(--red-bright) 0%, #aa1010 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(232, 64, 64, 0.35);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
background: rgba(255, 255, 255, 0.05);
color: var(--text-muted);
border: 1px solid var(--border);
}
.btn-ghost:hover {
color: var(--white);
border-color: rgba(0, 200, 220, 0.3);
background: rgba(0, 200, 220, 0.06);
}
.btn-danger {
background: transparent;
color: rgba(232, 64, 64, .65);
border: 1px solid rgba(232, 64, 64, .25);
font-size: 10px;
}
.btn-danger:hover {
color: var(--red-bright);
border-color: var(--red);
background: rgba(232, 64, 64, .08);
}
.btn-save {
background: transparent;
color: rgba(0, 200, 212, .65);
border: 1px solid rgba(0, 200, 212, .2);
font-size: 10px;
}
.btn-save:hover {
color: var(--cyan);
border-color: var(--cyan-dim);
background: rgba(0, 229, 212, .07);
}
/* ── Stats Row ─────────────────────────────────────────────────────────── */
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
gap: 10px;
margin: 0 auto 20px;
max-width: 800px;
}
.stat-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px 10px;
text-align: center;
transition: border-color .25s, transform .25s, box-shadow .25s;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(0, 200, 220, 0.3), transparent);
opacity: 0;
transition: opacity .25s;
}
.stat-card:hover {
border-color: rgba(0, 200, 220, 0.28);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.stat-card:hover::before { opacity: 1; }
.stat-num {
font-family: 'DM Mono', monospace;
font-weight: 500;
font-size: 26px;
color: var(--cyan);
}
.stat-desc {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 9px;
color: var(--text-muted);
letter-spacing: .12em;
text-transform: uppercase;
margin-top: 4px;
}
/* ── Section Header + Filters ──────────────────────────────────────────── */
.section-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.section-header h2 {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 12px;
color: var(--text-muted);
letter-spacing: .18em;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.section-header h2::after {
content: '';
display: inline-block;
width: 24px;
height: 1px;
background: var(--border);
}
.toggle-pill {
display: flex;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border);
border-radius: 12px;
padding: 3px;
gap: 2px;
margin-left: auto;
}
.toggle-option {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 6px 14px;
border-radius: 9px;
cursor: pointer;
border: none;
background: transparent;
color: var(--text-muted);
transition: all .2s;
}
.toggle-option.active-all { background: linear-gradient(135deg, var(--gold-dim), var(--amber)); color: #fff; }
.toggle-option.active-canon { background: linear-gradient(135deg, var(--cyan-dim), var(--teal)); color: #fff; }
.toggle-option.active-filler { background: linear-gradient(135deg, var(--purple), var(--purple-light)); color: #fff; }
.toggle-option.active-ongoing { background: linear-gradient(135deg, #16a34a, #22c55e); color: #fff; }
.toggle-option.active-sp-all { background: linear-gradient(135deg, var(--gold-dim), var(--amber)); color: #fff; }
.toggle-option.active-sp-special { background: linear-gradient(135deg, var(--cyan-dim), var(--teal)); color: #fff; }
.toggle-option.active-sp-ova { background: linear-gradient(135deg, var(--purple), var(--purple-light)); color: #fff; }
.toggle-option.active-sp-short { background: linear-gradient(135deg, var(--elbaf), var(--elbaf-light)); color: #fff; }
/* ── Tab Extra Filters (Toggle Row) ────────────────────────────────────── */
.tab-extra-filters {
margin-bottom: 12px;
}
.filter-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
background: rgba(0, 0, 0, 0.15);
border: 1px solid var(--border);
border-radius: 12px;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.filter-toggle-label {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: .05em;
color: var(--text-muted);
text-transform: uppercase;
}
/* ── Search Bar ────────────────────────────────────────────────────────── */
.search-wrap {
position: relative;
margin-bottom: 12px;
}
.search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
pointer-events: none;
color: var(--text-dim);
}
#arcSearch {
width: 100%;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border);
border-radius: 12px;
color: var(--white);
font-family: 'Outfit', sans-serif;
font-size: 15px;
padding: 10px 14px 10px 38px;
outline: none;
transition: border-color .2s, box-shadow .2s;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
#arcSearch::placeholder { color: var(--text-dim); font-style: italic; }
#arcSearch:focus {
border-color: rgba(0, 200, 220, 0.35);
box-shadow: var(--focus-ring);
}
#arcSearch:focus-visible {
outline: none;
border-color: rgba(0, 200, 220, 0.35);
box-shadow: var(--focus-ring);
}
.search-clear {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.07);
border: none;
cursor: pointer;
color: var(--text-muted);
font-size: 14px;
width: 24px;
height: 24px;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
font-family: system-ui, sans-serif;
transition: all 0.2s;
padding-bottom: 2px;
}
.search-clear.visible {
display: flex;
}
.search-clear:hover {
background: rgba(0, 200, 220, 0.15);
color: var(--white);
}
.search-clear:focus-visible {
box-shadow: var(--focus-ring);
outline: none;
}
[data-theme="light"] .search-clear { background: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .search-clear:hover { background: rgba(0, 0, 0, 0.13); color: var(--text); }
/* ── Legend ────────────────────────────────────────────────────────────── */
.legend {
display: flex;
gap: 14px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: .08em;
color: var(--text-muted);
}
.legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.dot-done { background: var(--teal); }
.dot-current { background: var(--gold-light); box-shadow: 0 0 5px var(--gold); }
.dot-canon { background: var(--gold); }
.dot-filler { background: var(--purple-light); }
.dot-upcoming { background: var(--elbaf-light); }
.dot-ongoing { background: #22c55e; box-shadow: 0 0 5px #22c55e; animation: pulse-tag 2s ease-in-out infinite; }
/* ── Saga Divider ──────────────────────────────────────────────────────── */
.saga-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 16px 0 8px;
}
.saga-divider span {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 9px;
letter-spacing: .22em;
color: var(--text-dim);
text-transform: uppercase;
white-space: nowrap;
}
.saga-divider::before,
.saga-divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* ── Arc Grid ──────────────────────────────────────────────────────────── */
.arc-grid {
display: flex;
flex-direction: column;
gap: 4px;
}
.no-results {
text-align: center;
color: var(--text-dim);
font-style: italic;
font-size: 14px;
padding: 28px 0;
}
/* ── Arc Item ────────────────────────────────────────���─────────────────── */
.arc-item {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 10px;
padding: 12px 16px;
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: 10px;
cursor: pointer;
transition: transform .2s, border-color .2s, box-shadow .2s, background .2s, opacity .2s;
position: relative;
overflow: hidden;
content-visibility: auto;
contain-intrinsic-size: 90px;
}
.arc-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--border);
transition: background .3s;
}
/* Canon states */
.arc-item.type-canon.completed { border-color: rgba(0, 196, 168, .22); background: rgba(0, 180, 155, .06); }
.arc-item.type-canon.completed::before { background: var(--teal); }
.arc-item.type-canon.current { border-color: rgba(240, 168, 50, .5); background: rgba(240, 168, 50, .1); box-shadow: 0 0 0 1px rgba(240, 168, 50, .22), 0 0 18px rgba(240, 168, 50, .14); }
.arc-item.type-canon.current::before { background: var(--gold); width: 4px; }
.arc-item.type-canon.unlocked { border-color: rgba(240, 168, 50, .12); opacity: .72; }
.arc-item.type-canon.unlocked::before { background: rgba(240, 168, 50, .25); }
/* Filler states */
.arc-item.type-filler { border-color: rgba(128, 80, 204, .18); }
.arc-item.type-filler.completed { border-color: rgba(128, 80, 204, .32); background: rgba(128, 80, 204, .06); }
.arc-item.type-filler.completed::before { background: var(--purple-light); }
.arc-item.type-filler.current { border-color: rgba(184, 136, 255, .56); background: rgba(128, 80, 204, .12); box-shadow: 0 0 0 1px rgba(184, 136, 255, .2), 0 0 16px rgba(184, 136, 255, .14); }
.arc-item.type-filler.current::before { background: var(--purple-light); width: 4px; }
.arc-item.type-canon.current .arc-title,
.arc-item.type-filler.current .arc-title { color: var(--white); }
.arc-item.type-canon.current .arc-eps,
.arc-item.type-canon.current .arc-saga,
.arc-item.type-canon.current .arc-pct-label,
.arc-item.type-filler.current .arc-eps,
.arc-item.type-filler.current .arc-saga,
.arc-item.type-filler.current .arc-pct-label { color: var(--text); }
.arc-item.type-filler.unlocked { border-color: rgba(128, 80, 204, .22); opacity: .72; }
.arc-item.type-filler.unlocked::before { background: rgba(128, 80, 204, .35); }
/* Upcoming */
.arc-item.type-upcoming { border-color: rgba(61, 143, 255, .18); opacity: .55; }
.arc-item.type-upcoming::before { background: rgba(61, 143, 255, .35); }
.arc-item.type-upcoming .arc-title { color: var(--elbaf-light); }
.arc-item.type-upcoming:hover { border-color: rgba(61, 143, 255, .42); opacity: .82; }
.arc-item:hover:not(.locked):not(.type-upcoming) { transform: translateX(4px); }
.arc-item.type-canon:hover:not(.locked) { border-color: rgba(240, 168, 50, .3); }
.arc-item.type-filler:hover:not(.locked) { border-color: rgba(128, 80, 204, .38); }
.arc-item.locked:not(.type-upcoming) { opacity: .35; cursor: default; }
.arc-item.unlocked { cursor: pointer; }
.arc-meta { flex: 1; }
.arc-title-row {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 2px;
flex-wrap: wrap;
}
.arc-title {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--white);
}
.arc-item.locked:not(.type-upcoming) .arc-title { color: var(--text-muted); }
/* Inline tags */
.tag-base {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 8px;
letter-spacing: .1em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 6px;
flex-shrink: 0;
}
.filler-tag { border: 1px solid var(--purple); color: var(--purple-light); }
.skip-tag { border: 1px solid rgba(128,80,204,.35); color: var(--text-muted); font-style: italic; }
.movie-tag { border: 1px solid var(--amber); color: var(--amber); }
.upcoming-tag { border: 1px solid var(--elbaf-light); color: var(--elbaf-light); animation: pulse-tag 2s ease-in-out infinite; }
.ongoing-tag { border: 1px solid #22c55e; color: #22c55e; animation: pulse-tag 2s ease-in-out infinite; }
@keyframes pulse-tag {
0%, 100% { opacity: .55; }
50% { opacity: 1; }
}
.arc-eps { font-size: 11px; color: var(--text-muted); font-style: italic; }
.arc-saga { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 9px; color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase; margin-top: 1px; }
.arc-note { font-size: 10px; color: var(--purple-light); font-style: italic; margin-top: 2px; opacity: .75; }
.arc-note.note-blue { color: var(--elbaf-light); }
/* Mini progress bar inside each arc row */
.arc-progress-mini {
width: 88px;
text-align: right;
}
.arc-bar {
background: rgba(255, 255, 255, .05);
border-radius: 4px;
height: 5px;
overflow: hidden;
}
.arc-bar-fill {
height: 100%;
border-radius: 3px;
transition: width .5s ease;
}
.type-canon .arc-bar-fill { background: var(--gold); }
.type-canon.completed .arc-bar-fill { background: var(--teal); }
.type-filler .arc-bar-fill { background: var(--purple-light); }
.type-filler.completed .arc-bar-fill { background: rgba(184, 136, 255, .65); }
.type-upcoming .arc-bar-fill { background: var(--elbaf-light); }
.arc-pct-label { font-family: 'DM Mono', monospace; font-size: 10px; color: var(--text-muted); margin-top: 4px; }
/* Badge circle */
.arc-badge {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
flex-shrink: 0;
}
.type-canon.completed .arc-badge { background: rgba(0, 196, 168, .18); }
.type-canon.current .arc-badge { background: rgba(240, 168, 50, .18); animation: pulse-gold 2s infinite; }
.type-filler.completed .arc-badge { background: rgba(128, 80, 204, .18); }
.type-filler.current .arc-badge { background: rgba(128, 80, 204, .18); animation: pulse-purple 2s infinite; }
.type-upcoming .arc-badge { background: rgba(61, 143, 255, .13); animation: pulse-blue 2s infinite; }
.locked:not(.type-upcoming) .arc-badge { background: rgba(255, 255, 255, .04); }
@keyframes pulse-gold { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 168, 50, .3); } 50% { box-shadow: 0 0 0 4px rgba(240, 168, 50, 0); } }
@keyframes pulse-purple { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 136, 255, .3); } 50% { box-shadow: 0 0 0 4px rgba(184, 136, 255, 0); } }
@keyframes pulse-blue { 0%, 100% { box-shadow: 0 0 0 0 rgba(61, 143, 255, .3); } 50% { box-shadow: 0 0 0 4px rgba(61, 143, 255, 0); } }
/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast {
position: fixed;
bottom: 88px;
right: 24px;
left: 24px;
transform: translateY(150px);
background: rgba(6, 14, 32, 0.92);
border: 1px solid rgba(0, 200, 220, 0.2);
border-radius: 14px;
padding: 13px 18px;
font-family: 'Outfit', sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--white);
z-index: 90;
transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .4s;
box-shadow: 0 8px 32px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 200, 220, 0.08);
white-space: normal;
word-break: break-word;
max-width: 420px;
width: calc(100% - 48px);
margin: 0 auto;
text-align: left;
pointer-events: none;
backdrop-filter: blur(16px);
opacity: 0;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.filler-toast { border-color: rgba(128, 80, 204, 0.4); color: var(--purple-light); }
.toast.elbaf-toast { border-color: rgba(61, 143, 255, 0.4); color: var(--elbaf-light); }
@media (max-width: 500px) {
.toast {
right: 12px;
left: 12px;
width: calc(100% - 24px);
bottom: 84px;
font-size: 13px;
}
}
/* ── Captain's Log ─────────────────────────────────────────────────────── */
.notes-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px 22px;
margin-top: 20px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.notes-card h3 {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 11px;
color: var(--text-muted);
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: 10px;
}
textarea {
width: 100%;
background: rgba(0, 0, 0, 0.15);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text);
font-family: 'Outfit', sans-serif;
font-size: 15px;
line-height: 1.7;
padding: 12px 14px;
resize: vertical;
min-height: 90px;
outline: none;
transition: border-color .2s, box-shadow .2s;
}
textarea:focus { border-color: rgba(0, 200, 220, 0.35); box-shadow: var(--focus-ring); }
textarea:focus-visible { outline: none; border-color: rgba(0, 200, 220, 0.35); box-shadow: var(--focus-ring); }
textarea::placeholder { color: var(--text-dim); font-style: italic; }
/* ── Footer ────────────────────────────────────────────────────────────── */
footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding-top: 32px;
font-family: 'Outfit', sans-serif;
font-size: 11px;
color: var(--text-dim);
font-style: italic;
letter-spacing: .06em;
border-top: 1px solid var(--border);
margin-top: 8px;
}
/* ── Confirm Dialog ────────────────────────────────────────────────────── */
.dialog-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .75);
z-index: 200;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .25s;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.dialog-backdrop.open {
opacity: 1;
pointer-events: all;
}
.dialog {
background: rgba(6, 14, 32, 0.92);
border: 1px solid rgba(0, 200, 220, 0.18);
border-radius: 18px;
padding: 28px 32px;
max-width: 380px;
width: 90vw;
text-align: center;
box-shadow: 0 20px 60px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 200, 220, 0.06);
transform: scale(.94) translateY(12px);
transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.dialog-backdrop.open .dialog { transform: scale(1) translateY(0); }
.dialog-icon { font-size: 34px; margin-bottom: 12px; }
.dialog h3 {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 18px;
color: var(--white);
letter-spacing: .02em;
margin-bottom: 10px;
}
.dialog p {
font-family: 'Outfit', sans-serif;
font-size: 14px;
color: var(--text-muted);
line-height: 1.65;
margin-bottom: 24px;
}
.dialog-actions {
display: flex;
gap: 10px;
justify-content: center;
}
/* ── Dual-View Segmented Control ─────────────────────────────────────── */
.view-control {
display: flex;
justify-content: center;
margin: 0 0 18px;
}
.view-pill {
display: flex;
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 4px;
gap: 3px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.view-btn {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
padding: 10px 24px;
border-radius: 10px;
cursor: pointer;
border: none;
background: transparent;
color: var(--text-muted);
transition: all .25s;
}
.view-btn.active {
background: linear-gradient(135deg, rgba(0, 180, 200, 0.25), rgba(0, 80, 140, 0.35));
color: var(--white);
border: 1px solid rgba(0, 200, 220, 0.25);
box-shadow: 0 2px 12px rgba(0, 180, 200, 0.15);
}
.view-btn:hover:not(.active) {
color: var(--text);
background: rgba(255, 255, 255, .05);
}
.view-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
/* ── Movie Grid ────────────────────────────────────────────────────────── */
.movie-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 10px;
}
.movie-item {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
overflow: hidden;
transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
cursor: default;
content-visibility: auto;
contain-intrinsic-size: 130px;
}
.movie-item::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--border);
transition: background .3s;
}
.movie-item.unwatched {
border-color: rgba(240, 168, 50, .15);
}
.movie-item.unwatched::before { background: var(--gold-dim); }
.movie-item.unwatched:hover { border-color: rgba(240, 168, 50, .32); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.movie-item.watched {
border-color: rgba(0, 196, 168, .28);
background: rgba(0, 180, 155, .05);
}
.movie-item.watched::before { background: var(--teal); }
.movie-item.locked {
opacity: .45;
cursor: default;
border-color: rgba(255, 255, 255, .05);
}
.movie-item.locked .movie-title { color: var(--text-muted); }
.movie-item.locked .movie-badge { background: rgba(255, 255, 255, .05); }
.movie-item.locked .movie-watch-btn { display: none; }
/* The explicit "Mark Watched" / "Unmark" button */
.movie-watch-btn {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
min-height: 40px;
padding: 0 14px;
border-radius: 8px;
cursor: pointer;
border: none;
white-space: nowrap;
transition: transform .16s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
align-self: flex-start;
margin-top: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1;
}
.movie-watch-btn.btn-mark {
background: rgba(240, 168, 50, 0.15);
color: var(--gold-light);
border: 1px solid rgba(240, 168, 50, 0.3);
box-shadow: 0 0 0 1px rgba(240, 168, 50, 0.08);
}
.movie-watch-btn.btn-mark:hover {
background: rgba(240, 168, 50, 0.25);
transform: translateY(-1px);
}
.movie-watch-btn.btn-unmark {
background: transparent;
color: var(--teal-light);
border: 1px solid rgba(0, 196, 168, .35);
box-shadow: 0 0 0 1px rgba(0, 196, 168, .08);
}
.movie-watch-btn.btn-unmark:hover {
background: rgba(0, 196, 168, .1);
border-color: var(--teal-light);
}
.movie-watch-btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.movie-meta { flex: 1; }
.movie-title-row {
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
margin-bottom: 3px;
}
.movie-title {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--white);
}
.movie-sub { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gold); }
.movie-note { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 3px; line-height: 1.5; }
/* Recommendation tags */
.rec-high { border: 1px solid #e5c100; color: #e5c100; }
.rec-watch { border: 1px solid var(--teal-light); color: var(--teal-light); }
.rec-skip { border: 1px solid var(--text-dim); color: var(--text-dim); }
.movie-after {
font-family: 'DM Mono', monospace;
font-size: 9px;
color: var(--text-dim);
letter-spacing: .05em;
white-space: nowrap;
}
.movie-badge {
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.movie-item.watched .movie-badge { background: rgba(0, 196, 168, .2); }
.movie-item.unwatched .movie-badge { background: rgba(240, 168, 50, .1); }
[data-theme="light"] .movie-item.locked { border-color: rgba(0, 0, 0, .05); opacity: .55; }
[data-theme="light"] .movie-item.watched { border-color: rgba(0, 120, 100, .35); background: rgba(0, 120, 100, .07); }
[data-theme="light"] .movie-item.unwatched { border-color: rgba(160, 112, 10, .2); }
@media (max-width: 500px) {
.movie-grid { grid-template-columns: 1fr; }
.movie-watch-btn { padding: 6px 10px; font-size: 8px; }
.view-btn { padding: 8px 10px; font-size: 9px; }
}
/* ── Theme Toggle Button ──────────────────────────────────────────────── */
header {
position: relative;
}
.theme-toggle{
position: absolute;
top: 16px;
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.2);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
z-index: 10;
line-height: 1;
padding: 0;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.theme-toggle { right: 0; }
/* ── Hamburger Button ─────────────────────────────────────────────────── */
.hamburger-btn {
position: absolute;
top: 16px;
left: 0;
width: 40px;
height: 40px;
border-radius: 12px;
border: 1px solid var(--border);
background: rgba(0, 0, 0, 0.2);
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
z-index: 10;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
padding: 0;
}
.ham-line {
display: block;
width: 18px;
height: 2px;
background: var(--white);
border-radius: 2px;
transition: transform .25s ease, opacity .25s ease, width .25s ease;
transform-origin: center;
}
.hamburger-btn.open .ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open .ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hamburger-btn:hover {
border-color: rgba(0, 200, 220, 0.4);
background: rgba(0, 200, 220, 0.08);
transform: scale(1.08);
box-shadow: 0 0 12px rgba(0, 200, 220, 0.15);
}
.hamburger-btn:active { transform: scale(0.93); }
.hamburger-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.theme-toggle:hover {
border-color: rgba(0, 200, 220, 0.4);
background: rgba(0, 200, 220, 0.08);
transform: scale(1.08);
box-shadow: 0 0 12px rgba(0, 200, 220, 0.15);
}
.theme-toggle:active { transform: scale(0.93); }
.theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* ── Bottom Sheet (Drawer) Overlay ───────────────────────────────────── */
.sheet-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 400;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.sheet-overlay.open { opacity: 1; pointer-events: all; }
/* ── UNIFIED BOTTOM SHEET SYSTEM ─────────────────────────────────────── */
.bottom-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 85vh;
z-index: 500;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform .4s cubic-bezier(.4, 0, .2, 1),
height .4s cubic-bezier(.4, 0, .2, 1),
background .3s ease,
border-radius .3s ease;
background: rgba(4, 10, 24, 0.98);
border-radius: 24px 24px 0 0;
overflow: hidden;
will-change: transform, height;
contain: layout paint;
box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
}
.bottom-sheet.expanded {
height: 100vh;
border-radius: 0;
}
[data-theme="light"] .bottom-sheet {
background: rgba(230, 240, 255, 0.98);
border: 1px solid rgba(0, 80, 160, 0.15);
box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
}
.bottom-sheet::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--cyan), var(--gold), var(--red));
opacity: .8;
}
.bottom-sheet.open { transform: translateY(0); }
.sheet-handle {
width: 40px;
height: 4px;
background: rgba(255,255,255,0.15);
border-radius: 2px;
margin: 12px auto 4px;
flex-shrink: 0;
}
[data-theme="light"] .sheet-handle {
background: rgba(0,0,0,0.1);
}
/* ── Sheet Header ────────────────────────────────────────────────────── */
.sheet-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 24px 16px;
border-bottom: 1px solid var(--border);
max-width: 680px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
flex-shrink: 0;
}
.sheet-title {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--white);
letter-spacing: .04em;
}
.sheet-close-btn {
width: 32px;
height: 32px;
border-radius: 8px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-muted);
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .2s;
}
.sheet-close-btn:hover { background: rgba(232,64,64,.1); color: var(--red-bright); border-color: rgba(232,64,64,.3); }
.sheet-close-btn:active { transform: scale(0.9); }
/* ── Sheet Body ──────────────────────────────────────────────────────── */
.sheet-body { flex: 1; overflow: hidden; padding: 0; position: relative; display: flex; }
/* ── Tools Panel Styles ─────────────────────────────────────────────────── */
.tools-section {
padding: 0 16px;
}
.tools-collapse-btn {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
background: transparent;
border: none;
color: var(--text-muted);
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: color 0.2s;
}
.tools-collapse-btn:hover {
color: var(--white);
}
.tools-collapse-btn .collapse-icon {
font-size: 10px;
transition: transform 0.3s ease;
}
.tools-collapse-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
opacity: 0;
}
.tools-collapse-content.open {
max-height: 300px;
opacity: 1;
}
.tools-collapse-btn.active .collapse-icon {
transform: rotate(-180deg);
}
.captain-log-textarea {
width: 100%;
height: 240px; /* INCREASED HEIGHT */
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(--border);
border-radius: 14px;
padding: 16px;
color: var(--white);
font-family: 'Outfit', sans-serif;
font-size: 15px; /* LARGER FONT */
line-height: 1.6;
resize: vertical;
transition: all 0.2s ease;
margin-bottom: 12px;
box-sizing: border-box;
}
.captain-log-textarea:focus {
outline: none;
border-color: var(--cyan);
background: rgba(0, 229, 212, 0.03);
box-shadow: 0 0 20px rgba(0, 229, 212, 0.1);
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
padding: 16px 24px;
}
.tool-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 14px;
padding: 18px 24px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
color: var(--white);
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 13px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.tool-btn:hover {
border-color: var(--cyan);
background: rgba(0, 229, 212, 0.08);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
.tool-btn-icon {
font-size: 22px;
opacity: 0.9;
}
.tool-btn.danger {
width: calc(100% - 48px);
margin: 16px 24px;
padding: 22px;
font-size: 15px;
justify-content: center;
border-color: rgba(232, 64, 64, 0.25);
background: rgba(232, 64, 64, 0.03);
}
.tool-btn.danger:hover {
background: rgba(232, 64, 64, 0.12);
border-color: var(--red-bright);
color: var(--red-bright);
}
.tools-footer {
margin-top: 24px;
padding: 20px 16px;
text-align: center;
font-family: 'Syne', sans-serif;
font-size: 10px;
color: var(--text-dim);
letter-spacing: 0.05em;
opacity: 0.6;
}
/* ── Sheet Panels (Viewport-Stable System) ────────────────── */
.sheet-panel {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: 680px;
margin: 0 auto;
overflow-y: auto;
padding: 10px 0 40px;
transform: translateX(0);
transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
opacity: 1;
background: inherit;
z-index: 1;
box-sizing: border-box;
}
.sheet-panel-hidden {
transform: translateX(30px);
opacity: 0;
pointer-events: none;
}
.sheet-panel-slide-left {
transform: translateX(-30px);
opacity: 0;
pointer-events: none;
}
/* ── Navigation Items ────────────────────────────────────────────────── */
.sheet-nav-item {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 24px;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
transition: all .2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
flex-shrink: 0;
overflow: hidden;
box-sizing: border-box;
width: 100%;
}
.sheet-nav-item:hover {
background: rgba(0, 229, 212, 0.08);
padding-left: 28px;
}
.sheet-nav-item:active { transform: scale(0.98); }
.sheet-nav-icon {
font-size: 28px;
width: 42px;
text-align: center;
flex-shrink: 0;
filter: drop-shadow(0 0 8px rgba(0, 229, 212, 0.3));
}
.sheet-nav-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.sheet-nav-title {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: 17px;
color: var(--white);
letter-spacing: 0.02em;
}
.sheet-nav-sub {
font-family: 'Outfit', sans-serif;
font-size: 12px;
color: var(--text-muted);
margin-top: 3px;
opacity: 0.8;
}
.sheet-nav-chevron {
font-size: 22px;
color: var(--text-dim);
flex-shrink: 0;
transition: all .2s ease;
margin-left: 8px;
}
.sheet-nav-item:hover .sheet-nav-chevron {
color: var(--cyan);
transform: translateX(4px);
}
.sheet-nav-item.active::before {
content: '';
position: absolute;
left: 0; top: 20%; bottom: 20%;
width: 3px;
background: var(--cyan);
border-radius: 0 3px 3px 0;
}
.sheet-divider {
height: 1px;
background: var(--border);
margin: 8px auto;
width: calc(100% - 40px);
max-width: 632px;
}
/* ── Progress Panel Header ─────────────────────────────────────────────── */
.progress-panel-header {
display: flex;
align-items: center;
gap: 10px;
padding: 16px 24px 14px;
border-bottom: 1px solid var(--border);
max-width: 680px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
flex-shrink: 0;
}
.progress-back-btn {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 12px;
color: var(--cyan);
background: transparent;
border: 1px solid rgba(0,200,220,.2);
border-radius: 8px;
padding: 5px 10px;
cursor: pointer;
transition: background .2s, border-color .2s, transform .1s;
flex-shrink: 0;
white-space: nowrap;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.progress-back-btn:hover { background: rgba(0,200,220,.1); border-color: rgba(0,200,220,.4); }
.progress-back-btn:active { transform: scale(0.93); }
.progress-back-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.progress-panel-title {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--white);
flex: 1;
}
.progress-panel-count {
font-family: 'DM Mono', monospace;
font-size: 10px;
color: var(--cyan);
background: rgba(0,229,212,.1);
border: 1px solid rgba(0,229,212,.2);
border-radius: 12px;
padding: 2px 8px;
white-space: nowrap;
}
/* ── Progress Stats ─────────────────────────────────────────────────────── */
.progress-stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 14px;
padding: 20px 24px;
max-width: 680px;
margin: 0 auto;
flex-shrink: 0;
width: 100%;
box-sizing: border-box;
}
.progress-stat-card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 14px;
padding: 20px 14px;
text-align: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 80px;
}
.progress-stat-card:hover {
border-color: var(--cyan);
background: rgba(0, 229, 212, 0.05);
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}
.progress-stat-num {
font-family: 'DM Mono', monospace;
font-weight: 600;
font-size: 24px;
color: var(--cyan);
line-height: 1.1;
}
.progress-stat-desc {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 10px;
letter-spacing: .08em;
color: var(--text-muted);
text-transform: uppercase;
margin-top: 4px;
}
/* ── Journey Forecast ──────────────────────────────────────────────────── */
.journey-forecast-card {
background: rgba(0, 200, 220, 0.05);
border: 1px solid rgba(0, 200, 220, 0.15);
border-radius: 14px;
margin: 12px auto 4px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 680px;
width: calc(100% - 32px);
box-sizing: border-box;
}
.forecast-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.forecast-title {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 13px;
color: var(--white);
}
.forecast-pace {
font-family: 'DM Mono', monospace;
font-size: 11px;
color: var(--cyan);
background: rgba(0, 229, 212, 0.1);
padding: 3px 10px;
border-radius: 12px;
}
.forecast-arrival {
display: flex;
flex-direction: column;
gap: 4px;
}
.forecast-label {
font-family: 'Syne', sans-serif;
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.forecast-date {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 17px;
color: var(--cyan-light);
}
.forecast-note {
font-size: 11px;
color: var(--text-dim);
font-style: italic;
line-height: 1.5;
}
/* ── Category Buttons ──────────────────────────────────────────────────── */
.progress-category-row {
display: flex;
gap: 12px;
padding: 12px 24px 8px;
max-width: 680px;
margin: 0 auto;
width: 100%;
box-sizing: border-box;
flex-shrink: 0;
}
.progress-cat-btn {
flex: 1;
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 13px;
letter-spacing: .04em;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-muted);
cursor: pointer;
transition: all .2s;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.progress-cat-btn.active {
background: rgba(0,200,220,.12);
border-color: rgba(0,200,220,.4);
color: var(--cyan);
box-shadow: 0 4px 12px rgba(0, 229, 212, 0.15);
}
.progress-cat-btn:hover:not(.active) { background: rgba(255,255,255,.05); color: var(--text); }
.progress-cat-btn:active { transform: scale(0.95); }
.progress-cat-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.progress-cat-btn:first-child { border-radius: 14px 8px 8px 14px; }
.progress-cat-btn:last-child { border-radius: 8px 14px 14px 8px; }
/* ── Arcs Watched Modal ─────────────────────────────────────────────── */
.modal {
position: fixed;
inset: 0;
z-index: 300;
display: none;
align-items: center;
justify-content: center;
}
.modal.open { display: flex; }
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,.65);
backdrop-filter: blur(4px);
}
.modal-content {
position: relative;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 16px;
width: min(92vw,420px);
max-height: min(80vh,600px);
display: flex;
flex-direction: column;
box-shadow: 0 24px 80px rgba(0,0,0,.5);
animation: modalIn .25s ease;
}
@keyframes modalIn {
from { opacity: 0; transform: scale(.92) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
border-bottom: 1px solid var(--border);
}
.modal-title {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--white);
}
.modal-close-btn {
width: 28px;
height: 28px;
border-radius: 8px;
border: 1px solid var(--border);
background: transparent;
color: var(--text-muted);
font-size: 14px;
cursor: pointer;
transition: all .2s;
}
.modal-close-btn:hover { background: rgba(232,64,64,.1); color: var(--red-bright); border-color: rgba(232,64,64,.3); }
.modal-body {
flex: 1;
overflow-y: auto;
padding: 8px 12px;
}
/* ── Progress Panel Body ───────────────────────────────────────────────── */
.progress-panel-body {
flex: 1;
overflow-y: auto;
padding: 4px 8px 16px;
}
/* Arc rows inside progress panel */
.pp-saga-label {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 9px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--text-dim);
padding: 10px 8px 4px;
}
.pp-arc-row {
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: 10px;
transition: background .15s;
cursor: default;
}
.pp-arc-row:hover { background: rgba(0,200,220,.06); }
.pp-arc-check {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(0,196,168,.18);
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: var(--teal-light);
flex-shrink: 0;
}
.pp-arc-name {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--white);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pp-arc-badge {
font-family: 'DM Mono', monospace;
font-size: 9px;
padding: 2px 6px;
border-radius: 6px;
flex-shrink: 0;
letter-spacing: .04em;
}
.pp-arc-badge.canon { background: rgba(240,168,50,.12); color: var(--gold); border: 1px solid rgba(240,168,50,.25); }
.pp-arc-badge.filler { background: rgba(128,80,204,.12); color: var(--purple-light); border: 1px solid rgba(128,80,204,.25); }
.pp-arc-badge.mixed { background: rgba(0,200,220,.12); color: var(--cyan); border: 1px solid rgba(0,200,220,.25); }
/* Saga rows */
.pp-saga-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 10px;
border-radius: 10px;
transition: background .15s;
}
.pp-saga-row:hover { background: rgba(0,200,220,.06); }
.pp-saga-icon {
font-size: 20px;
flex-shrink: 0;
width: 28px;
text-align: center;
}
.pp-saga-info { flex: 1; min-width: 0; }
.pp-saga-name {
font-family: 'Syne', sans-serif;
font-weight: 700;
font-size: 13px;
color: var(--white);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pp-saga-sub {
font-family: 'Outfit', sans-serif;
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.pp-saga-pct {
font-family: 'DM Mono', monospace;
font-size: 11px;
color: var(--cyan);
flex-shrink: 0;
}
/* Empty state */
.pp-empty {
text-align: center;
padding: 32px 16px;
color: var(--text-muted);
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-style: italic;
line-height: 1.7;
}
.sheet-section { padding: 14px 20px 6px; }
.sheet-section-label {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 9px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 10px;
}
.sheet-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.sheet-row:last-child { border-bottom: none; }
.sheet-action-btn {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px;
border: none;
border-bottom: 1px solid var(--border);
background: transparent;
color: var(--text);
font-family: inherit;
font-size: 14px;
cursor: pointer;
transition: all .2s;
text-align: left;
}
.sheet-action-btn:hover { background: rgba(255,255,255,.05); }
.sheet-action-btn:active { background: rgba(0,200,220,.08); }
.sheet-action-btn:last-child { border-bottom: none; }
/* Theme Selection Grid */
.theme-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0 20px 20px;
}
.theme-option {
flex: 1 1 calc(50% - 4px);
min-width: 100px;
padding: 12px 8px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--input-bg);
color: var(--text);
font-family: inherit;
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
min-height: 44px;
}
.theme-option:hover {
border-color: var(--cyan);
background: var(--cyan-glow);
}
.theme-option.active {
border-color: var(--cyan);
background: var(--cyan);
color: #fff !important;
font-weight: 600;
}
.sheet-row-info {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
min-width: 0;
}
.sheet-row-icon {
font-size: 22px;
flex-shrink: 0;
width: 34px;
text-align: center;
}
.sheet-row-title {
font-family: 'Syne', sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--white);
}
.sheet-row-sub {
font-family: 'Outfit', sans-serif;
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
/* ── Toggle Switch ────────────────────────────────────────────────────── */
/* ── Sheet toggle switches — use .toggle component below ─── */
/* ══════════════════════════════════════════════════════════════
REUSABLE TOGGLE COMPONENT
Usage:
Label
══════════════════════════════════════════════════════════════ */
/* Container */
.toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* Label — colour NEVER changes on toggle state */
.toggle-label {
font-family: 'Outfit', sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
user-select: none;
-webkit-user-select: none;
flex: 1;
min-width: 0;
cursor: pointer;
}
/* Wrapper