/* style.css - Simple, readable styles for Fast Facts Simulator
   Keep styling minimal and well-commented for beginners. */

:root{
  /* Dark theme (default): clean black-based with blue accents */
  --bg: #0d1117; /* page background (near-black) */
  --panel: #161b22; /* panel surface (dark gray) */
  --muted: #8b949e; /* muted text (gray) */
  --accent: #58a6ff; /* primary highlight (bright blue) */
  --success: #3fb950; /* success/example color (green) */
  --danger: #f85149;
  --pill: #161b22; /* pill/select background */
  /* UI surface variables for easier theming */
  --header-start: #0d1117; /* header background */
  --header-end: #010409;
  --filters-bg: #0d1117; /* filters bar background */
  --panel-start: #161b22; /* panel background */
  --panel-end: #0d1117;
  --panel-border: rgba(240,246,252,0.1);
  --progress-bg: #30363d;
  --input-bg: #0d1117;
  --button-bg: transparent; /* buttons use outline by default */
  --button-border: #21262d;
  --button-hover-bg: rgba(88,110,148,0.12);
  --button-hover-strong: rgba(31,111,255,0.14); /* blue tint for hover highlights */
  --button-text: #c9d1d9;
  --button-text-hover: #ffffff;
  --control-bg: transparent;
  --control-border: #30363d;
  --control-bg-active: #1f6feb;
  --control-text: var(--button-text);
  --control-text-active: #ffffff;
  --text-color: #c9d1d9;
  --accent-2: #79c0ff;
  --example-start: #161b22; /* example area background */
  --example-end: #0d1117;
  --box-foreground: var(--accent);
}

/* Success (correct answer) colors */
:root {
  --correct-bg: rgba(63,185,80,0.08);
  --correct-border: #3fb950;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text-color)}
/* increase base font size so most text scales up */
html{font-size:18px}
/* Make the body a column flex container so header/main/footer can stretch */
body{display:flex;flex-direction:column;min-height:100vh}

/* Light mode overrides: toggle by adding .light-mode to body */
body.light-mode{
  --bg: #f6f8fa; /* page background */
  --header-start: #f6f8fa; /* header */
  --header-end: #f6f8fa;
  --filters-bg: var(--header-start);
  --panel-start: #ffffff; /* white panels */
  --panel-end: #ffffff;
  --panel-border: rgba(31,35,40,0.15); /* visible border */
  --muted: #57606a; /* muted text */
  --text-color: #24292f; /* main text color */
  --accent: #0969da; /* primary blue */
  --accent-2: #54aeff;
  --success: #2da44e; /* green */
  --danger: #da3633;
  --pill: #f6f8fa; /* pill background */
  --progress-bg: #dafbe1; /* pale progress track */
  --input-bg: #ffffff; /* white input */
  --button-bg: transparent;
  --button-border: #d0d7de;
  --button-hover-bg: #f3f4f6;
  --button-hover-strong: rgba(9,105,218,0.08);
  --button-text: #24292f;
  --button-text-hover: #0969da;
  --control-bg: transparent;
  --control-border: #d0d7de;
  --control-bg-active: #0969da;
  --control-text: var(--button-text);
  --control-text-active: #ffffff;
  --example-start: #ffffff;
}

.app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 24px;
  background:linear-gradient(180deg,var(--header-start),var(--header-end));
  border-bottom:1px solid var(--panel-border);
  box-shadow:0 1px 2px rgba(0,0,0,0.1);
  gap:16px;
}

.brand{
  font-weight:800;
  font-size:30px;
  color:var(--text-color);
  white-space:nowrap;
}
.header-left{display:flex;align-items:center;gap:10px}
.header-right{display:flex;align-items:center;gap:12px}
.header-readiness{display:flex;align-items:center;margin-left:12px}

.header-readiness .score-item{
  padding:6px 10px;
  border-radius:6px;
  background:transparent;
  font-size:12px;
  color:var(--button-text);
  border:1px solid var(--button-border);
  transition:background 240ms ease, border-color 240ms ease, color 200ms ease;
}

.header-readiness .score-item strong{
  font-weight:700;
  color:var(--button-text);
  margin-right:8px;
}

.header-readiness .readiness-score{
  font-weight:700;
  padding:0 6px;
  color:var(--button-text-hover);
}

/* Shared header button base: consistent font and size across all header controls */
.header-btn,
.dropdown-toggle.header-btn,
.pause-toggle,
.mode-toggle,
.settings-toggle{
  padding:8px 12px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  line-height:1.4;
  color:var(--button-text);
  background:var(--button-bg);
  border:1px solid var(--button-border);
  transition:background 180ms ease,border-color 180ms ease,color 180ms ease;
}

.header-btn:hover,
.dropdown-toggle.header-btn:hover,
.pause-toggle:hover,
.mode-toggle:hover,
.settings-toggle:hover{
  background:var(--button-hover-strong);
  border-color:var(--control-bg-active);
  color:var(--control-text-active);
}

.header-btn:focus,
.dropdown-toggle.header-btn:focus,
.pause-toggle:focus,
.mode-toggle:focus,
.settings-toggle:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Pause toggle: outline when off, filled when on */
.pause-toggle{
  border:1px solid var(--button-border);
  background:var(--button-bg);
  color:var(--button-text);
}

.pause-toggle[aria-pressed="true"]{
  background:var(--control-bg-active);
  border-color:var(--control-bg-active);
  color:var(--control-text-active);
}

/* Mode toggle (Tournament): outline when off, filled when on */
.mode-control{display:flex;align-items:center;margin:0 8px}
.mode-toggle{
  border:1px solid var(--button-border);
  background:var(--button-bg);
  color:var(--button-text);
}

.mode-toggle[aria-pressed="true"]{
  background:var(--control-bg-active);
  border-color:var(--control-bg-active);
  color:var(--control-text-active);
}

.mode-toggle:hover{
  background:var(--button-hover-bg);
}

.mode-toggle[aria-pressed="true"]:hover{
  background:#0d47a1;
  border-color:#0d47a1;
}

/* Readiness pill styling for new theme */
.header-readiness .score-item{
  padding:8px 12px;
  border-radius:6px;
  background:var(--button-bg);
  font-size:14px;
  font-weight:600;
  color:var(--button-text-hover);
  border:1px solid var(--button-border);
  transition:background 180ms ease, border-color 180ms ease, color 180ms ease;
  display:inline-flex;
  align-items:center;
}

.header-readiness .score-item strong{
  font-weight:700;
  color:var(--button-text-hover);
  margin-right:6px;
}

.header-readiness .readiness-score{
  font-weight:700;
  padding:0 6px;
  color:var(--button-text-hover);
}

/* Readiness states: outline style with color-coded border */
.header-readiness .score-item.readiness-low{
  color: #f85149;
  border-color: #f85149;
}

.header-readiness .score-item.readiness-mid{
  color: #d29922;
  border-color: #d29922;
}

.header-readiness .score-item.readiness-high{
  color: #3fb950;
  border-color: #3fb950;
}
.theme-toggle{
  background:var(--button-bg);
  border:1px solid var(--button-border);
  color:var(--button-text);
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600;
  transition:background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.theme-toggle:hover{
  background:var(--button-hover-bg);
  border-color:var(--button-border);
  color:var(--button-text-hover);
}

.controls{display:flex;gap:8px;align-items:center;overflow:visible}

.controls select{
  padding:8px 10px;
  border-radius:6px;
  border:1px solid var(--button-border);
  background:var(--button-bg);
  color:var(--button-text);
  font-weight:600;
  font-size:14px;
  transition:background 180ms ease, border-color 180ms ease;
}

.controls select:hover{
  background:var(--button-hover-bg);
  border-color:var(--button-border);
}

.controls select option{
  color:var(--text-color);
  background:var(--panel-start);
}
/* Custom dropdown (category, timer) styling: subtle filter look */
.dropdown{position:relative;z-index:1400}
.dropdown-toggle{
  background:var(--button-bg);
  border:1px solid var(--button-border);
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  color:var(--button-text);
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  transition:background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.dropdown-toggle:hover{
  background:var(--button-hover-strong);
  border-color:var(--control-bg-active);
  color:var(--button-text-hover);
}

.dropdown-toggle#categoryToggle, #categoryToggle{
  /* fixed width to avoid layout shift when category text changes */
  width: 260px;
  max-width: 320px;
  min-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-menu{
  position:absolute;
  left:0;
  top:calc(100% + 8px);
  min-width:320px;
  max-width:420px;
  background:var(--panel-start);
  border-radius:8px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  border:1px solid var(--panel-border);
  z-index:1400;
  overflow:hidden;
  display:none;
  padding:8px 0;
}

.dropdown-header{
  padding:10px 16px;
  font-weight:700;
  font-size:13px;
  color:var(--muted);
  border-bottom:1px solid var(--panel-border);
  background:transparent;
  pointer-events: none;
  user-select: none;
  cursor: default;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.dropdown-list{
  list-style:none;
  margin:0;
  padding:4px 0;
  max-height:420px;
  overflow:auto;
}

.dropdown-list li{
  padding:10px 16px;
  border-bottom:1px solid rgba(240,246,252,0.05);
  cursor:pointer;
  color:var(--text-color);
  font-weight:600;
  font-size:14px;
  position:relative;
  padding-left:40px;
  transition:background 180ms ease, color 180ms ease;
}

.dropdown-list li:hover{
  background:var(--button-hover-bg);
  color:var(--accent);
}

.dropdown-list li.selected::before{
  content:'';
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
}

.dropdown-list::-webkit-scrollbar{width:10px}
.dropdown-list::-webkit-scrollbar-thumb{
  background:var(--button-border);
  border-radius:6px;
}

/* Settings dropdown specific styling: right-align the menu */
#settingsDropdown .dropdown-menu{left:auto;right:0;min-width:240px;max-width:280px}

.settings-container{margin-left:8px;display:flex;align-items:center}

.settings-icon{
  display:inline-block;
  margin-right:6px;
  font-size:16px;
  line-height:1;
}

.settings-toggle{
  background:var(--button-bg);
  border:1px solid var(--button-border);
  padding:8px 12px;
  border-radius:6px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  font-size:14px;
  color:var(--button-text);
}

.settings-toggle:hover{
  background:var(--button-hover-bg);
  color:var(--button-text-hover);
}

/* Keep filters compact so the readiness pill can sit immediately to their left */
.header-right .filters-bar{flex:0;display:flex;align-items:center}

/* Settings menu styling */
.settings-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:6px 0;
}

.settings-list .settings-item{
  margin:0;
}

.settings-list .settings-item .dropdown-toggle{
  width:100%;
  text-align:left;
  padding:10px 14px;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
}

.settings-list .dropdown-toggle{
  display:block;
  background:var(--button-bg);
  border:1px solid var(--button-border);
  color:var(--button-text);
  transition:background 180ms ease, border-color 180ms ease;
}

.settings-list .dropdown-toggle:hover{
  background:var(--button-hover-strong);
  color:var(--control-text-active);
  border-color:var(--control-bg-active);
}

.dropdown-toggle[disabled], .dropdown-toggle.disabled{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* Tournament mode banner */
.mode-banner{display:none;margin:12px 36px;padding:12px 16px;background:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(0,0,0,0.04));border-left:4px solid var(--accent);border-radius:8px;color:var(--text-color);font-weight:800}
.mode-banner.show{display:block}
/* Main content panels */
.left,.right{
  flex:1;
  background:var(--panel-start);
  padding:20px;
  border-radius:8px;
  border:1px solid var(--panel-border);
  min-height:calc(100vh - 320px);
  display:flex;
  flex-direction:column;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  position:relative;
}
.pill{display:block}

/* Reduce top spacing between section border and section title */
.left .label, .right .label {
  margin-top: 0;
  margin-bottom: 10px;
  padding-top: 0;
}

/* Unified prominent box style for category/letter display and typing input */
.pill, .answer-input, .example .example-answer{
  background: var(--input-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text-color);
}

/* Category pill: large typography */
.pill{
  font-size:clamp(28px,3.6vw,56px);
  font-weight:900;
  text-align:center;
  display:block;
}
/* Compute a single target height for the category and letter boxes so they match exactly.
   This keeps long category names from shifting layout while preserving font-size. */
:root{--target-box-height: calc(clamp(90px,12vw,160px) + 20px)}
#categoryDisplay, #letterDisplay{
  min-height: var(--target-box-height);
  max-height: var(--target-box-height);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 20px;
  white-space:normal;
  overflow:hidden;
  text-align:center;
  word-break:break-word;
  overflow-wrap:anywhere;
  color: var(--box-foreground);
}

/* Category description area under the category pill */
.category-desc{
  margin-top:12px;
  color:var(--muted);
  font-size:0.95rem;
  font-weight:700;
  min-height:46px; /* reserve a small block so layout doesn't jump */
  line-height:1.2;
  text-align: center;
  opacity:0.95;
}
/* Score panel styles */
.score-panel{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-top:10px;
  align-items:center;
  justify-content:center;
}
.score-item{
  background: rgba(255,255,255,0.03);
  padding:6px 8px;
  border-radius:8px;
  font-weight:600;
  font-size:0.9rem;
  color:var(--muted);
  border: 2px solid transparent; /* reserve outline space so readiness border doesn't change sizing */
}
.score-item strong{ font-weight:800; margin-right:6px; color:var(--box-foreground); }
/* Readiness pill color states */
/* Readiness: same pill sizing/background as other score items.
   Only the text color and outline (border) change based on readiness level. */
.readiness-score{
  display:inline-block;
  font-weight:800;
  font-size:0.9rem;
  padding:0 6px;
  color: inherit;
}

/* Outline & text color (no gradients) */
.readiness-low{ color:#ff6b6b; border-color: rgba(255,107,107,0.22); }
.readiness-mid{ color:#ffb84d; border-color: rgba(255,184,77,0.22); }
.readiness-high{ color:#2ecc71; border-color: rgba(46,204,113,0.22); }

/* Filters bar placed directly under the header */
.filters-bar .controls{
  max-width:1200px;
  margin:0;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
  padding-left:0;
}

.header-readiness{margin-right:8px}
.main{display:flex;gap:28px;padding:32px 36px;max-width:none;width:100%;margin:8px 0;flex:1;align-items:stretch}
/* Answer input field */
.answer-input{
  width:100%;
  padding:12px 16px;
  border-radius:6px;
  border:1px solid var(--panel-border);
  background:var(--input-bg);
  color:var(--text-color);
  font-size:14px;
  font-weight:500;
  -webkit-appearance:none;
  appearance:none;
  caret-color:var(--accent);
  transition:box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.answer-input::placeholder{
  color:var(--muted);
  opacity:0.8;
  font-weight:500;
}

.answer-input:focus{
  outline:none;
  border-color:var(--accent);
  /* keep border color change but remove distracting drop-shadow/halo */
  box-shadow:0 0 0 3px rgba(88,166,255,0.06);
  background:var(--input-bg);
  transform:none;
}

/* Action buttons (Hint, Give Up) */
.actions button{
  flex:1;
  padding:12px 16px;
  border-radius:6px;
  border:1px solid var(--button-border);
  background:var(--button-bg);
  color:var(--button-text);
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  min-height:44px;
  transition:background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.actions button:hover{
  background:var(--button-hover-strong);
  border-color:var(--control-bg-active);
  color:var(--button-text-hover);
}

.actions button[disabled]{
  opacity:0.5;
  cursor:not-allowed;
}

/* Unified hover for controls: handled per-component above */

/* Make action buttons visually dim when disabled (already handled above) */
/* Example answer panel */
.example{
  margin-top:20px;
  padding:16px;
  border-radius:8px;
  border:1px solid var(--panel-border);
  background:var(--example-start);
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  display:flex;
  flex-direction:column;
  flex:1;
}

.example.hidden{display:none}
.timer-row{display:flex;justify-content:space-between;margin-top:12px;color:var(--text-color);font-size:1rem}
.progress{height:12px;background:var(--progress-bg);border-radius:999px;margin:8px 0}
.progress-inner{height:100%;width:0%;background:linear-gradient(90deg,var(--success),#b8f8cf);border-radius:999px}

.answer-label{display:block;margin-top:12px;color:var(--muted);font-weight:700}
.answer-input::placeholder{color:var(--muted);opacity:0.75;font-weight:700}
.answer-input:focus{outline:none;border-color:rgba(63,183,200,0.85);box-shadow:0 12px 30px rgba(47,143,152,0.14);transform:translateY(-1px)}

/* Input state when a correct answer was entered */
.answer-input.correct{
  background:rgba(63,185,80,0.08);
  border:1px solid #3fb950;
  box-shadow:0 0 0 3px rgba(63,185,80,0.1);
  color:var(--text-color);
  caret-color:#3fb950;
}

/* Checkmark styling */
.answer-wrap{position:relative;display:block}

.answer-wrap .checkmark{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  color:#3fb950;
  opacity:0;
  transition:opacity 200ms ease, transform 200ms ease;
  pointer-events:none;
}

.answer-wrap.correct .checkmark{
  opacity:1;
  transform:translateY(-50%) scale(1.1);
}

.answer-wrap .answer-input{padding-right:44px;}

/* Brief pulse animation for emphasis when correct */
.answer-input.correct.pulse{
  animation: pulse-correct 600ms ease-out;
}

@keyframes pulse-correct{
  0%{ 
    box-shadow: 0 0 0 0 rgba(63,185,80,0.4);
  }
  70%{ 
    box-shadow: 0 0 0 8px rgba(63,185,80,0);
  }
  100%{ 
    box-shadow: 0 0 0 0 rgba(63,185,80,0);
  }
}

/* Toast notifications */
#toastContainer{
  position:fixed;
  right:20px;
  bottom:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  z-index:2500;
}

.toast{
  background:rgba(0,0,0,0.8);
  color:var(--text-color);
  padding:12px 16px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,0.1);
  font-weight:600;
  min-width:160px;
  opacity:0;
  transform:translateY(8px) scale(0.95);
  transition:opacity 200ms ease, transform 200ms ease;
}

.toast.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

.toast.success{
  background:#3fb950;
  color:#ffffff;
  border-color:rgba(63,185,80,0.3);
}

.bottom-row{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.actions{display:flex;gap:8px;align-items:stretch}

.feedback{margin-top:16px;height:30px;color:var(--muted);font-weight:600;font-size:14px}

.big-letter{
  font-size:clamp(90px,12vw,160px);
  text-align:center;
  color:var(--accent);
  font-weight:900;
  padding:8px 12px;
  text-shadow:0 2px 8px rgba(0,0,0,0.2);
}

/* Unified section header styling */
.label, .example-title{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  margin:0 0 8px 0;
  padding:0;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.example-title{
  margin:0 0 12px 0;
  align-self:flex-start;
}

.example-answer{
  flex:1;
  font-size:clamp(30px,4vw,64px);
  text-align:center;
  color:var(--success);
  font-weight:900;
  text-shadow:0 2px 8px rgba(0,0,0,0.1);
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}

.app-footer{text-align:center;padding:14px;color:var(--muted);font-size:13px;font-weight:600}

@media (max-width:900px){
  .main{flex-direction:column;padding:12px}
  .big-letter{font-size:96px}
}

/* Ensure bottom actions anchor and span full width */
.left .bottom-row{margin-top:auto;display:flex;flex-direction:column;gap:12px;align-items:stretch}
.left .actions{display:flex;gap:16px;align-items:stretch;width:100%;margin-top:12px}
.left .actions button{align-self:stretch}
.left .actions button{margin-left:8px}
.left .actions button:first-child{margin-left:0}

/* Start button below actions: full width, larger, primary */
.start-row{margin-top:12px}
.start-row .start-button{width:100%;display:block;padding:18px 20px;font-size:20px;border-radius:16px;border:none;background:var(--control-bg);color:var(--control-text);font-weight:900;box-shadow:0 14px 30px rgba(17,68,70,0.16);cursor:pointer;transition:background 180ms ease,box-shadow 200ms ease}
.start-row .start-button:hover{background:var(--control-bg-hover)}

/* Modal dialog for Instructions */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:2000}
.modal.hidden{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,8,12,0.6)}
.modal-content{background:var(--panel-start);color:var(--text-color);padding:22px;border-radius:14px;max-width:780px;width:clamp(320px,80%,780px);box-shadow:0 30px 80px rgba(2,12,14,0.6);border:1px solid rgba(17,68,70,0.06);position:relative}
.modal-content h3{margin-top:0;margin-bottom:12px;font-size:1.15rem;font-weight:900}
.modal-content p{margin:8px 0;color:var(--muted);font-weight:700}
.modal-close{position:absolute;right:12px;top:12px;background:transparent;border:none;color:var(--text-color);font-weight:900;font-size:18px;cursor:pointer}
.modal-actions{display:flex;justify-content:flex-end;margin-top:12px}
.modal-actions button{padding:8px 12px;border-radius:10px;border:none;background:var(--control-bg);color:var(--control-text);font-weight:800;cursor:pointer}
.modal-actions button:hover{background:var(--control-bg-hover)}

/* Instructions modal improvements */
.modal-content{padding:26px;border-radius:16px;max-width:720px;background:linear-gradient(180deg, rgba(2,24,34,0.9), rgba(3,32,46,0.95));border:1px solid rgba(255,255,255,0.04)}
.modal-content{ /* avoid overflowing viewport: limit height and allow internal scroll */
  max-height: calc(100vh - 80px);
  overflow: auto;
}
.modal-content h3{font-size:1.25rem;color:var(--accent-2);text-shadow:0 6px 18px rgba(0,0,0,0.4)}
.muted-note{font-size:0.95rem;color:var(--muted);margin-bottom:10px}
.instructions-list{margin:8px 0 0 20px;padding:0 6px 0 0;color:var(--text-color);font-weight:700}
.instructions-list li{margin:8px 0;line-height:1.35}
.instructions-list li strong{color:var(--accent-2)}
.instructions-ref{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:8px}
.instructions-ref section{background:transparent;padding:0;margin:0}
@media (max-width:780px){
  .instructions-ref{grid-template-columns:1fr;padding-right:8px}
  .modal-content{max-width:calc(100% - 32px);width:calc(100% - 32px)}
}
.modal-content .tip{margin-top:12px;color:var(--muted);font-weight:700}
.modal-actions .primary{background:var(--accent);color:#012326;box-shadow:0 12px 30px rgba(59,181,255,0.12);padding:10px 14px;border-radius:12px}
.modal-close{background:rgba(0,0,0,0.12);width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center}