/* Toolkit 60 Prompt Lab — UI polish v3
   Light-first, approachable, Notebook-inspired interface.
   Dark mode remains available as an explicit user choice.
*/

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8fc;
  --panel: #ffffff;
  --panel-2: #f2f5fa;
  --text: #1d2538;
  --muted: #66738a;
  --line: #dce4f0;
  --primary: #665fe8;
  --primary-2: #7a74f0;
  --accent: #15977f;
  --danger: #d94f5c;
  --warning: #bd7510;
  --shadow: 0 14px 42px rgba(55, 67, 110, .09);
  --ambient-a: rgba(114, 104, 238, .18);
  --ambient-b: rgba(73, 203, 176, .13);
  --ambient-c: rgba(255, 190, 111, .10);
  --dot: rgba(92, 106, 145, .12);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151b27;
  --panel: #1c2535;
  --panel-2: #253146;
  --text: #f6f8fc;
  --muted: #b8c2d3;
  --line: #38475e;
  --primary: #8d8af7;
  --primary-2: #a09dfb;
  --accent: #59d6b6;
  --danger: #ff7e89;
  --warning: #ffc166;
  --shadow: 0 16px 44px rgba(2, 8, 23, .22);
  --ambient-a: rgba(126, 119, 244, .16);
  --ambient-b: rgba(65, 190, 166, .11);
  --ambient-c: rgba(225, 158, 91, .07);
  --dot: rgba(181, 196, 222, .09);
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% -8%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 30rem),
    radial-gradient(circle at 94% 4%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 27rem),
    var(--bg);
}

/* Ambient brand layer: soft aurora + editorial dot texture. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 38rem 28rem at 7% 18%, var(--ambient-a), transparent 70%),
    radial-gradient(ellipse 34rem 24rem at 94% 27%, var(--ambient-b), transparent 72%),
    radial-gradient(ellipse 30rem 22rem at 62% 86%, var(--ambient-c), transparent 73%);
  opacity: .78;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.15px);
  background-size: 27px 27px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.24) 48%, transparent 88%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), rgba(0,0,0,.24) 48%, transparent 88%);
  opacity: .42;
  z-index: 0;
}

body > main,
body > footer,
body > .toast {
  position: relative;
  z-index: 1;
}

.shell { --max: 1240px; }

.topbar {
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 65%, transparent);
  backdrop-filter: blur(20px) saturate(125%);
}

.brand-mark {
  background: linear-gradient(145deg, #7772ef, #51cbb0);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 20%, transparent);
}

.brand strong { font-weight: 800; }
.brand small { opacity: .9; }

/* Tabs: clear selection without the old white-on-white dark-mode bug. */
.tabs {
  gap: 7px;
  padding: 7px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-color: color-mix(in srgb, var(--line) 88%, var(--primary) 12%);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--text) 5%, transparent);
  backdrop-filter: blur(15px) saturate(115%);
}

.tab {
  color: var(--muted);
  padding: 11px 17px;
  border: 1px solid transparent;
  transition: color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.tab:hover:not(.active) {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}

.tab.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #625ee2, #7974ef) !important;
  border-color: transparent;
  box-shadow: 0 7px 18px rgba(98, 94, 226, .22);
}

.tab-advanced { position: relative; }

.tab-advanced::after {
  content: attr(data-advanced-label);
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 800;
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
  color: var(--accent);
  vertical-align: 1px;
}

.tab-advanced.active::after {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* Softer surfaces: less developer dashboard, more content/product tool. */
.builder-card,
.preview-card,
.prompt-card,
.filter-block,
.steps article,
.feature-grid article,
.hero-panel,
.empty-state,
.search-box {
  border-color: color-mix(in srgb, var(--line) 90%, var(--primary) 10%);
}

.builder-card,
.preview-card,
.prompt-card,
.steps article,
.feature-grid article {
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--text) 3.5%, transparent);
  backdrop-filter: blur(8px);
}

/* Cleaner filter block: no redundant 'All' pills. Empty selection already means all. */
.chips .chip[data-age="all"],
.chips .chip[data-category="all"] {
  display: none !important;
}

.filter-block {
  margin-top: 18px;
  padding: 13px 17px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--primary) 4%, transparent), transparent 42%),
    color-mix(in srgb, var(--panel) 88%, transparent);
  box-shadow: 0 7px 24px color-mix(in srgb, var(--text) 3%, transparent);
  backdrop-filter: blur(13px) saturate(112%);
}

.filter-row {
  align-items: center;
  padding: 8px 0;
}

.filter-row + .filter-row {
  border-top: 1px dashed color-mix(in srgb, var(--line) 76%, transparent);
}

.filter-label {
  position: relative;
  color: var(--text);
  font-weight: 850;
  padding-top: 0;
}

.filter-label::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  margin-right: 8px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 8%, transparent);
  vertical-align: 1px;
}

.chips { gap: 8px; }

.chip {
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  transition: transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease;
}

.chip:hover {
  transform: translateY(-1px);
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
  background: color-mix(in srgb, var(--primary) 5%, var(--panel));
}

.chip.active {
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 9%, var(--panel));
  border-color: color-mix(in srgb, var(--primary) 38%, var(--line));
}

.results-line {
  padding-inline: 3px;
}

.prompt-card {
  min-height: 218px;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.prompt-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 44%, var(--line));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--primary) 9%, transparent);
}

.prompt-card h3 { line-height: 1.35; }

.search-box {
  background: color-mix(in srgb, var(--panel) 91%, transparent);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--text) 3%, transparent);
  backdrop-filter: blur(12px);
}

input,
select,
textarea {
  border-color: color-mix(in srgb, var(--line) 92%, var(--primary) 8%);
}

.search-box:focus-within,
input:focus,
select:focus,
textarea:focus {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 10%, transparent);
}

.button.primary {
  background: linear-gradient(135deg, #625ee2, #7974ef);
  box-shadow: 0 7px 18px rgba(98, 94, 226, .15);
}

.button.primary:hover {
  background: linear-gradient(135deg, #706bed, #8984f7);
}

.button.secondary {
  background: color-mix(in srgb, var(--primary) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--line));
}

.button.ghost:hover {
  background: color-mix(in srgb, var(--primary) 5%, var(--panel));
}

.prompt-editor {
  background: color-mix(in srgb, var(--panel-2) 96%, var(--primary) 4%);
  line-height: 1.68;
}

.score-badge,
.big-score {
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 9%, var(--panel)), var(--panel-2));
}

.theme-toggle {
  min-width: 88px;
  white-space: nowrap;
}

.ui-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.advanced-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.advanced-note strong { color: var(--accent); }

/* Light mode gets a touch more warmth and whitespace. */
html[data-theme="light"] .hero-panel {
  background:
    radial-gradient(circle at 8% 8%, rgba(102,95,232,.10), transparent 42%),
    radial-gradient(circle at 91% 82%, rgba(78,199,174,.07), transparent 40%),
    rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
}

html[data-theme="light"] .stat {
  background: rgba(248,249,253,.84);
}

html[data-theme="light"] .prompt-editor {
  background: #f7f9fd;
}

/* Dark mode is intentionally softer than the old near-black UI. */
html[data-theme="dark"] .prompt-dialog::backdrop {
  background: rgba(8, 15, 28, .68);
}

html[data-theme="dark"] .builder-card,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .prompt-card,
html[data-theme="dark"] .filter-block,
html[data-theme="dark"] .steps article,
html[data-theme="dark"] .feature-grid article {
  box-shadow: none;
}

@media (max-width: 900px) {
  .tab-advanced::after { display: none; }
}

@media (max-width: 640px) {
  body::after { background-size: 22px 22px; opacity: .28; }
  .theme-toggle { min-width: auto; padding-inline: 9px; }
  .theme-toggle .theme-label { display: none; }
  .tab { padding-inline: 13px; }
  .tabs { gap: 3px; }
  .filter-row { align-items: flex-start; }
  .filter-label { padding-top: 5px; }
}