:root {
  --page-max-width: 980px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
           Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
  --bg: #fcfcfd; /* brighter light base */
  --fg: #0a0a0a;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-contrast: #ffffff;
  --card: #ffffff; /* cards pure white */
  --surface: #ffffff; /* inputs/panels */
  --border: #e9eef5; /* softer border */
  --shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06);
  --radius: 10px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --focus: 0 0 0 3px rgba(37,99,235,0.35);
  --bg-vignette-alpha: 0.04;
}

/* Dark theme variables */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111827; /* lighter dark base */
    --fg: #e5e7eb;
    --muted: #a3b1c2;
    --accent: #60a5fa;
    --accent-contrast: #0b1220;
    --card: #1f2937; /* panels a bit lighter than bg */
    --surface: #1b2337;
    --border: #2b3a57;
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.4);
    --bg-vignette-alpha: 0.08;
  }
}

/* Manual theme override */
[data-theme="dark"] {
  --bg: #111827;
  --fg: #e5e7eb;
  --muted: #a3b1c2;
  --accent: #60a5fa;
  --accent-contrast: #0b1220;
  --card: #1f2937;
  --surface: #1b2337;
  --border: #2b3a57;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.4);
  --bg-vignette-alpha: 0.08;
}

/* Explicit light override to counter system-dark */
[data-theme="light"] {
  --bg: #fcfcfd;
  --fg: #0a0a0a;
  --muted: #6b7280;
  --accent: #2563eb;
  --accent-contrast: #ffffff;
  --card: #ffffff;
  --surface: #ffffff;
  --border: #e9eef5;
  --shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px rgba(0,0,0,0.06);
  --bg-vignette-alpha: 0.04;
}

html, body { margin: 0; padding: 0; }
body { font-family: var(--font); line-height: 1.6; color: var(--fg); background: radial-gradient(1200px 800px at 10% -10%, rgba(37,99,235,var(--bg-vignette-alpha)), transparent 50%), var(--bg); }
.container { max-width: var(--page-max-width); margin: 32px auto; padding: 0 20px; }
h1, h2, h3 { line-height: 1.25; }

/* Headings */
h1 {
  font-size: 28px;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
h2 {
  font-size: 20px;
  margin: 24px 0 8px;
}

/* Controls */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 24px; }

/* Buttons */
button { cursor: pointer; -webkit-tap-highlight-color: transparent; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-contrast); padding: 8px 12px; border-radius: var(--radius-xs); font-weight: 600; transition: background .2s ease, border-color .2s ease, transform .02s ease; box-shadow: var(--shadow); }
button:hover { filter: brightness(0.97); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: var(--focus); }

/* Secondary buttons in top controls */
.controls #add-task, .controls #export { background: var(--surface); color: var(--fg); border-color: var(--border); }
.controls #add-task:hover, .controls #export:hover { background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%); border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%); }

/* Ghost-like button for secondary actions */
.import-label { display: inline-flex; align-items: center; gap: 8px; border: 1px dashed var(--border); padding: 8px 12px; border-radius: var(--radius-xs); color: var(--fg); background: var(--surface); transition: border-color .2s ease, background .2s ease; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.import-label:hover { background: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%); border-color: color-mix(in srgb, var(--border) 70%, var(--accent) 30%); }
.import-label input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Inputs */
input[type="text"], input[type="number"], input[type="time"], select, textarea {
  appearance: none;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 8px 10px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input[type="text"]::placeholder, textarea::placeholder { color: var(--muted); }
input[type="text"]:focus, input[type="number"]:focus, input[type="time"]:focus, select:focus, textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--border) 40%); box-shadow: var(--focus); }

.task { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.task-header { display: flex; gap: 10px; align-items: center; }
.task-header input[type="text"] { flex: 1; }
.options { margin-top: 10px; display: grid; gap: 10px; }
.option { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; box-shadow: var(--shadow); }
.sessions { display: grid; gap: 6px; margin-top: 8px; }
.session { display: grid; grid-template-columns: 140px 130px 130px auto; gap: 8px; align-items: center; }
.session small { color: var(--muted); }

.row { display: flex; gap: 10px; align-items: center; }
.row > * { flex: 0 0 auto; }

.danger { color: #ef4444; }
.muted { color: var(--muted); }

/* Destructive actions appear as subtle/danger outline */
.task-header button:last-child,
.option .row button:last-child,
.session button:last-child {
  background: transparent;
  color: #ef4444;
  border-color: color-mix(in srgb, #ef4444 45%, var(--border) 55%);
}
.task-header button:last-child:hover,
.option .row button:last-child:hover,
.session button:last-child:hover {
  background: color-mix(in srgb, #ef4444 12%, var(--surface) 88%);
  border-color: color-mix(in srgb, #ef4444 55%, var(--border) 45%);
}

.timetable { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; align-items: start; }
.day-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; box-shadow: var(--shadow); }
.day-name { font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }
.day-slots { display: grid; gap: 8px; }
.slot { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 8px 10px; box-shadow: var(--shadow); }
.solution-score { margin: 10px 0; font-weight: 600; }

code { background: var(--card); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); }
.note { color: var(--muted); }

/* Theme toggle button */
#theme-toggle { border-color: var(--border); background: var(--surface); color: var(--fg); }
#theme-toggle:hover { border-color: color-mix(in srgb, var(--border) 60%, var(--accent) 40%); }

/* Tabs for multiple strategies */
.tabs { display: inline-flex; gap: 6px; align-items: center; margin: 8px 0; }
.tab-btn { background: var(--surface); color: var(--fg); border: 1px solid var(--border); padding: 6px 10px; border-radius: var(--radius-xs); box-shadow: var(--shadow); }
.tab-btn.tab-active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.summary-box { margin-top: 6px; }

@media (max-width: 900px) {
  .timetable { grid-template-columns: 140px 1fr; }
  .session { grid-template-columns: 130px 120px 120px auto; }
}

@media (max-width: 720px) {
  .session { grid-template-columns: 120px 110px 110px auto; }
}