@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@700&family=Mochiy+Pop+One&family=RocknRoll+One&family=Roboto+Mono:wght@500&display=swap');

/* Shared Variables (Not theme-specific) */
:root {
  --duration-fast: 120ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --easing-snappy: cubic-bezier(0.22, 1, 0.36, 1);
  --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --transition: all var(--duration-normal) var(--easing-smooth);
}

/* Base Dark Theme (Default) */
:root, [data-theme="dark"] {
  /* Backgrounds */
  --bg-base: #121312;
  --bg-surface: #1C1D1C;
  --bg-elevated: #252625;
  --bg-sidebar: #0A0A0B;

  /* Accents */
  --accent-primary: #AD0013; /* Red - Actions, Badges */
  --accent-primary-hover: #D4182E;
  --accent-secondary: #A67D43; /* Gold - Borders, Icons, Timers */
  --accent-secondary-muted: #7A5D33;

  /* Text */
  --text-primary: #E8DFD0;   /* Headers, Labels, Button Text */
  --text-secondary: #8A7E6E; /* Descriptions, Helper Text */
  --text-muted: #5C5549;     /* Placeholders */
  --text-on-accent: #E8DFD0;

  /* Borders */
  --border-default: #2E2A26;
  --border-strong: #A67D43;
}

/* Pinterest-inspired Light Theme */
[data-theme="light"] {
  /* Backgrounds */
  --bg-base: #FAF7F2;      /* Warm off-white paper */
  --bg-surface: #FFFDFC;   /* Clean card white */
  --bg-elevated: #F3EEE7;  /* Soft elevated surface */
  --bg-sidebar: #F7F2EB;   /* Pale warm sidebar */

  /* Accents */
  --accent-primary: #C62828;       /* Pinterest muted red */
  --accent-primary-hover: #A61F1F;
  --accent-secondary: #B08968;     /* Warm sand / tan */
  --accent-secondary-muted: #D8C3AE;

  /* Text */
  --text-primary: #1F1B16;   /* Charcoal / Dark Wood */
  --text-secondary: #5F564B; /* Muted brown-gray */
  --text-muted: #8A7F73;     /* Muted taupe */
  --text-on-accent: #FFF8F3;

  /* Borders */
  --border-default: #E3DBD2; /* Light warm border */
  --border-strong: #D2C6B8;  /* Stronger warm border */
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

body {
  font-family: 'RocknRoll One', sans-serif;
  background-color: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
  transition: background-color 250ms ease, color 250ms ease;
}

/* Ensure smooth theme transitions */
*, *::before, *::after {
  transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease, box-shadow 250ms ease;
}

/* Ignore transitions for animations */
.animate-fade, .animate-up, .animate-scale {
  transition: none;
}

.hidden { display: none !important; }

/* === ANIMATIONS === */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { 
  from { opacity: 0; transform: translateY(12px); } 
  to { opacity: 1; transform: translateY(0); } 
}
@keyframes scaleIn { 
  from { opacity: 0; transform: scale(0.95); } 
  to { opacity: 1; transform: scale(1); } 
}
@keyframes pulseRed {
  0% { box-shadow: 0 0 0 0 rgba(173, 0, 19, 0.4); opacity: 0.8; }
  70% { box-shadow: 0 0 0 10px rgba(173, 0, 19, 0); opacity: 1; }
  100% { box-shadow: 0 0 0 0 rgba(173, 0, 19, 0); opacity: 0.8; }
}
@keyframes pulseGold {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes barGrow { from { width: 0; } to { width: 100%; } }

.animate-fade { animation: fadeIn var(--duration-normal) var(--easing-smooth) both; }
.animate-up { animation: fadeInUp var(--duration-slow) var(--easing-snappy) both; }
.animate-scale { animation: scaleIn var(--duration-slow) var(--easing-bounce) both; }

/* Stagger Helpers */
.stagger-1 { animation-delay: 60ms; }
.stagger-2 { animation-delay: 120ms; }
.stagger-3 { animation-delay: 180ms; }
.stagger-4 { animation-delay: 240ms; }
.stagger-5 { animation-delay: 300ms; }

/* === CUSTOM SCROLLBAR (Global) === */
::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  background: var(--bg-surface);
  border-left: 2px solid var(--border-default);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-secondary);
  border: 4px solid var(--bg-surface);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-primary);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--text-primary) var(--bg-surface);
}

/* === LAYOUT === */
#app-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

/* === SIDEBAR RIBBON === */
.side-ribbon {
  width: 80px;
  min-height: 100vh;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 0;
  position: fixed;
  left: 0; top: 0;
  z-index: 100;
  border-right: 2px solid var(--border-default);
}

.side-control {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 20px;
  border-radius: 50%;
  transition: var(--transition);
}

.side-control:hover {
  background: var(--bg-surface);
  transform: rotate(15deg);
}

.side-control i {
  font-size: 1.5rem;
  color: var(--accent-secondary);
}

.ribbon-stripes {
  position: absolute;
  top: 0; left: 0;
  width: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.stripe { flex: 1; width: 100%; }
.stripe-yellow { background: var(--accent-secondary); } /* Gold */
.stripe-green  { background: var(--accent-primary); }   /* Red */
.stripe-cyan   { background: var(--bg-sidebar); }      /* Deepest Black */
.stripe-pink   { background: var(--text-secondary); }        /* Muted Gray */

.side-text-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Antonio', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--text-primary); /* Creamy white */
  text-transform: uppercase;
  letter-spacing: -1px;
  margin-top: 30px;
}

.side-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  font-weight: bold;
  letter-spacing: 2px;
  color: var(--text-secondary);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  opacity: 0.8;
}

/* === MAIN CONTENT === */
.main-content {
  flex: 1;
  margin-left: 80px;
  padding: 40px;
  background-color: var(--bg-base);
  min-height: 100vh;
}

/* === CASSETTE WINDOW === */
.cassette-window {
  background: var(--bg-surface);
  padding: 30px;
  border: 4px solid var(--border-default);
  position: relative;
  box-shadow: 10px 10px 0px var(--border-default);
  margin-bottom: 30px;
}

.cassette-window::before {
  content: 'HIGH QUALITY';
  position: absolute;
  top: -14px;
  left: 20px;
  background: var(--accent-primary); /* Deep red */
  color: var(--text-on-accent); /* Warm cream or white */
  padding: 2px 12px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 2px;
  border: 2px solid var(--border-default);
}

/* === VIEWS === */
.view { display: none; }
.view.active { display: block; }

/* === HERO / HEADER === */
.hero-header {
  margin-bottom: 30px;
  border-bottom: 4px solid var(--bg-sidebar); 
  padding-bottom: 25px;
  position: relative;
  overflow: hidden;
}

.hero-header::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 4px;
  background: var(--accent-secondary);
  animation: barGrow var(--duration-slow) var(--easing-smooth) both;
}

.hero-title {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: -4px;
  margin-bottom: 10px;
}

.hero-title .outlined {
  color: transparent;
  -webkit-text-stroke: 3px var(--text-primary);
}

@media (max-width: 600px) {
  .hero-title { font-size: 2.8rem; letter-spacing: -2px; }
}

/* === TAGLINE (replaces noise reduction) === */
.tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 15px 0 5px 0;
}

.tagline-label {
  font-family: 'Antonio', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-secondary); /* Gold text */
}

.tagline-divider {
  width: 40px;
  height: 2px;
  background: var(--accent-secondary); /* Gold divider line */
}

/* === CONTROL CARDS === */
.blocky-controls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 20px;
}

@media (min-width: 800px) {
  .blocky-controls { grid-template-columns: repeat(4, 1fr); }
}

.control-card {
  padding: 15px;
  border: 2px solid var(--border-default);
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: transform var(--duration-normal) var(--easing-snappy), 
              border-color var(--duration-normal) var(--easing-snappy),
              box-shadow var(--duration-normal) var(--easing-snappy);
  will-change: transform, box-shadow;
}

.control-card:hover {
  background: var(--bg-elevated); 
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.control-text h3 {
  font-family: 'Mochiy Pop One', sans-serif;
  font-size: 1.1rem;
}

.control-text p {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.control-icon {
  font-size: 1.8rem;
  color: var(--accent-secondary); 
}

/* === BUTTONS === */
.btn {
  font-family: 'Antonio', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 11px 24px;
  background: var(--accent-primary);
  color: var(--text-on-accent);
  border: none;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--easing-snappy),
              background-color var(--duration-normal) var(--easing-smooth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  will-change: transform;
}

.btn:hover {
  background: var(--accent-primary-hover);
  transform: scale(1.02);
}

.btn:active { 
  transform: scale(0.96); 
  transition-duration: var(--duration-fast);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--accent-secondary);
  color: var(--accent-secondary);
}

.btn-outline:hover {
  background: var(--accent-secondary);
  color: var(--bg-base);
  transform: scale(1.02);
}

/* === LIBRARY === */
.library-header {
  margin-bottom: 20px;
}

.library-header h2 {
  font-family: 'RocknRoll One', sans-serif;
  font-size: 1.6rem;
  display: inline-block;
  background: var(--accent-primary); 
  color: var(--text-on-accent);
  padding: 4px 14px;
  border: 2px solid var(--border-default);
  animation: pulseRed 2s infinite ease-in-out;
}

.badge {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.9rem;
}

/* Empty State */
.empty-card {
  border: 3px dashed var(--text-primary);
  padding: 40px 20px;
  text-align: center;
  background: transparent;
}

.empty-card i {
  font-size: 3rem;
  margin-bottom: 10px;
  color: var(--text-primary);
  opacity: 0.5;
}

.empty-card h3 {
  font-family: 'Mochiy Pop One', sans-serif;
  margin-bottom: 5px;
}

.empty-card p {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem;
}

/* === IMAGE GRID (Masonry) === */
.image-grid {
  column-count: 2;
  column-gap: 12px;
  width: 100%;
}

@media (min-width: 900px) { .image-grid { column-count: 3; } }

/* === GRID ITEM — CRITICAL FIX for overlay overlap === */
.grid-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--border-default);
  padding: 3px;
  background: var(--bg-surface);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--easing-smooth),
              box-shadow var(--duration-normal) var(--easing-smooth);
  /* Force hardware acceleration without layout shifts */
  transform: translateZ(0);
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.grid-item:hover {
  border-color: var(--accent-secondary);
  box-shadow: 10px 10px 0px rgba(0,0,0,0.2);
  z-index: 10;
}

.grid-item img {
  width: 100%;
  display: block;
  transition: transform var(--duration-slow) var(--easing-smooth);
}

.grid-item:hover img {
  transform: scale(1.03);
}

/* Overlay sits INSIDE each grid-item, clipped by overflow:hidden */
.grid-item-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;  /* invisible = not clickable */
  transition: opacity 0.15s;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 10px;
  z-index: 2;
}

.grid-item:hover .grid-item-overlay {
  opacity: 1;
  pointer-events: auto;  /* visible = clickable */
}

@media (hover: none) {
  .grid-item:active .grid-item-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

/* === DELETE BUTTON — must be clickable === */
.delete-btn {
  background: var(--accent-primary); /* Deep Red */
  color: var(--text-primary); /* Cream */
  border: 2px solid var(--border-default);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  z-index: 3;
  transition: var(--transition);
}

.delete-btn:hover {
  background: var(--accent-primary-hover);
  transform: scale(1.1);
  border-color: var(--accent-secondary);
}

/* Icon inside delete btn must not steal clicks */
.delete-btn i,
.delete-btn svg {
  pointer-events: none;
}

/* === PRACTICE VIEW === */
.practice-controls-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.timer-display {
  font-family: 'Roboto Mono', monospace;
  font-size: 2.2rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  background: var(--bg-sidebar); 
  color: var(--accent-secondary); /* Gold digits for clock */
  padding: 8px 24px;
  border: 3px solid var(--border-default);
}

.practice-image-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 4px solid var(--border-default);
  background: var(--bg-sidebar); 
  padding: 10px;
  min-height: 400px;
  width: 100%;
  position: relative;
}

.practice-image-container img {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
}

.practice-controls-bottom {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}

.timer-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.timer-input-group {
  display: flex;
  align-items: stretch;
  border: 3px solid var(--border-default);
  background: var(--bg-elevated);
}

.timer-input-group .blocky-input {
  width: 50px;
  border: none;
  padding: 8px;
  font-family: 'Roboto Mono', monospace;
  font-weight: 900;
  text-align: center;
  outline: none;
  background: var(--bg-elevated);
  color: var(--text-primary); /* Warm cream */
}

.input-suffix {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--border-default);
  color: var(--accent-secondary); /* Gold suffix */
  font-family: 'Antonio', sans-serif;
  font-size: 0.8rem;
  font-weight: 900;
}

.blocky-select {
  appearance: none;
  background: var(--bg-elevated);
  color: var(--accent-secondary); /* Gold outline style */
  border: 2px solid var(--accent-secondary);
  padding: 10px 16px;
  font-family: 'Roboto Mono', monospace;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-transform: uppercase;
}

.blocky-select:hover {
  background: var(--accent-secondary);
  color: var(--bg-sidebar);
}

/* === MODALS === */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7); /* Modal backdrop */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.modal-overlay.hidden { display: none; }

.blocky-modal {
  background: var(--bg-surface);
  border: 3px solid var(--border-strong);
  width: 100%;
  max-width: 420px;
  box-shadow: 20px 20px 50px rgba(0,0,0,0.7);
  animation: scaleIn var(--duration-slow) var(--easing-bounce) both;
}

.modal-overlay {
  animation: fadeIn var(--duration-normal) var(--easing-smooth) both;
}

.blocky-modal .title-bar {
  background: var(--bg-sidebar);
  color: var(--text-primary);
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.85rem;
  font-weight: 900; 
  letter-spacing: 1.5px;
  border-bottom: 2px solid var(--border-default);
}

.blocky-modal .title-bar button {
  background: none;
  border: none;
  color: var(--accent-secondary); /* Gold close */
  font-size: 1.2rem;
  cursor: pointer;
  transition: var(--transition);
}

.blocky-modal .title-bar button:hover {
  color: var(--text-primary); /* White hover */
}

.blocky-modal .window-body {
  padding: 20px;
}

.blocky-modal .window-body p {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8rem;
  margin-bottom: 20px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.tutorial-details {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  margin-bottom: 20px;
}

.tutorial-details summary {
  padding: 10px 15px;
  cursor: pointer;
  font-family: 'Antonio', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 1px;
  color: var(--accent-secondary);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.tutorial-details summary::-webkit-details-marker {
  display: none;
}

.tutorial-details summary:hover {
  background: rgba(166, 125, 67, 0.08);
}

.tutorial-steps {
  padding: 15px 15px 15px 40px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-default);
}

.tutorial-steps li {
  margin-bottom: 10px;
}

.tutorial-steps li strong {
  color: var(--text-primary);
}

.tutorial-hint {
  padding: 12px 15px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-top: 1px dashed var(--border-default);
}

.tutorial-hint i {
  color: var(--accent-secondary-muted);
  margin-top: 1px;
}

.tutorial-hint span {
  color: var(--text-secondary);
}

.input-example {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-top: 8px;
  opacity: 0.8;
}

.input-error {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  color: var(--accent-primary);
  margin-top: 10px;
  background: rgba(173, 0, 19, 0.05);
  padding: 8px 12px;
  border-left: 2px solid var(--accent-primary);
}

.blocky-input-group {
  margin-bottom: 15px;
}

.blocky-input-group input {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border-default);
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-family: 'Roboto Mono', monospace;
  font-size: 0.9rem;
  outline: none;
}

.blocky-input-group input:focus {
  box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

.blocky-input-group input::placeholder { 
  color: var(--text-muted);
}

.blocky-input-group input:focus {
  border-color: var(--accent-secondary); /* Gold focus */
}

.modal-icon {
  font-size: 3.5rem;
  color: var(--accent-secondary); /* Gold icons */
  margin-bottom: 15px;
}

.modal-heading {
  color: var(--text-primary);
  font-family: 'Mochiy Pop One', sans-serif;
  margin-bottom: 10px;
}

/* === FULLSCREEN OVERLAY === */
#fullscreen-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.92);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#fullscreen-overlay.active { display: flex; }

#fullscreen-img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  border: 4px solid var(--bg-surface);
  cursor: default;
}

.fullscreen-close {
  position: absolute;
  top: 20px; right: 30px;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  font-family: 'Antonio', sans-serif;
}

/* === SUPPORT CARD === */
.support-container { width: 100%; margin-top: 30px; }

.support-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: var(--bg-surface);
  border: 4px solid var(--border-default);
  box-shadow: 10px 10px 0px var(--border-default);
  text-decoration: none;
  color: var(--text-primary);
  transition: transform var(--duration-normal) var(--easing-snappy), 
              border-color var(--duration-normal) var(--easing-snappy),
              box-shadow var(--duration-normal) var(--easing-snappy);
}

.support-card:hover {
  border-color: var(--accent-secondary);
  transform: translateY(-4px);
  box-shadow: 14px 14px 0px var(--accent-secondary-muted);
}

.support-icon {
  font-size: 2.2rem;
  color: var(--accent-secondary);
}

.support-text h3 {
  font-family: 'Mochiy Pop One', sans-serif !important;
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.support-text p {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.support-arrow {
  margin-left: auto;
  font-size: 1.5rem;
  opacity: 0.5;
  color: var(--accent-secondary);
}

.support-card:hover .support-arrow {
  opacity: 1;
}

/* === UTILITY === */
.full-width { width: 100%; }
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.text-center { text-align: center; }

/* === RESPONSIVE === */
@media (max-width: 600px) {
  .side-ribbon { width: 50px; }
  .main-content { margin-left: 50px; padding: 20px; }
  .side-text-vertical { font-size: 1.5rem; }
  .cassette-window { padding: 15px; }
  .hero-title { font-size: 2.5rem; }
  .blocky-controls { grid-template-columns: 1fr 1fr; gap: 8px; }
  .control-text h3 { font-size: 0.9rem; }
}

/* === TOAST NOTIFICATION === */
#pinflow-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-surface);
  color: var(--text-main);
  border: 3px solid var(--text-main);
  padding: 12px 28px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.12);
  white-space: nowrap;
}

#pinflow-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* === STATUS BADGES === */
.status-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 1px;
  border: 1px solid var(--border-default);
  z-index: 5;
  pointer-events: none;
  text-transform: uppercase;
}

.status-practiced {
  background: var(--accent-secondary);
  color: var(--bg-base);
  border-color: var(--accent-secondary);
}

.status-skipped {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-color: var(--border-default);
}

/* === PRACTICE STATUS MARKER === */
.practice-status-marker {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 16px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  border: 4px solid var(--border-default);
  z-index: 10;
  text-transform: uppercase;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.3);
  animation: scaleIn var(--duration-normal) var(--easing-bounce) both;
}

.session-counter {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  font-weight: 900;
  color: var(--text-secondary);
  background: var(--bg-sidebar);
  padding: 4px 12px;
  border: 2px solid var(--border-default);
  letter-spacing: 1px;
}

/* === SESSION SETUP TOGGLE === */
.setup-toggle-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  cursor: pointer;
  transition: var(--transition);
}

.setup-toggle-group:hover {
  border-color: var(--accent-secondary);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  background: var(--bg-sidebar);
  border: 2px solid var(--border-default);
  transition: var(--transition);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--text-secondary);
  transition: var(--transition);
}

input:checked + .toggle-switch {
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

input:checked + .toggle-switch::after {
  left: 24px;
  background: var(--bg-base);
}

.toggle-label {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.75rem;
  font-weight: bold;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* === PRACTICE VIEW SKIP BUTTON === */
.btn-skip {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 2px solid var(--border-default);
}

.btn-skip:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--text-secondary);
}

/* === RESET HISTORY BUTTON === */
.reset-history-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.65rem;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  transition: var(--transition);
  opacity: 0.6;
}

.reset-history-btn:hover {
  opacity: 1;
  color: var(--accent-primary);
}

/* === EMPTY STATE REFINEMENT === */
.empty-state-message {
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8rem;
  color: var(--accent-primary);
  margin-top: 15px;
  text-align: center;
  padding: 10px;
  border: 1px dashed var(--accent-primary);
}