/* THIS MUST BE THE FIRST RULE. */
[data-theme="foo"] {
  --bg: #101014;
  --surface: #17171d;
  --text: #d7d7e0;
  --muted: #a2a2b2;
  --border: #262630;
  --input-bg: #1d1d25;
  --accent: #b39ddb;       /* pastel purple */
  --accent-contrast: #16161a;
  --accent-soft: #c7b7ea;  /* lighter pastel */
  --code-bg: #1a1a22;
  --shadow: 0 6px 18px rgba(68, 21, 77, 0.719);
}

/* ---------- THEME TOKENS ---------- */
[data-theme="light"] {
  --bg: #fdf6e3;           /* solarized base3 */
  --surface: #f5ecd6;
  --text: #586e75;         /* base00 */
  --muted: #6c7f86;        /* base01-ish */
  --border: #e6dcc3;
  --input-bg: #fffaf0;
  --accent: #268bd2;       /* solarized blue */
  --accent-contrast: #ffffff;
  --accent-soft: #2aa198;  /* solarized cyan */
  --code-bg: #eee8d5;      /* base2 */
  --shadow: 0 2px 10px rgba(0,0,0,.06);
}

[data-theme="dark"] {
  --bg: #101014;
  --surface: #17171d;
  --text: #d7d7e0;
  --muted: #a2a2b2;
  --border: #262630;
  --input-bg: #1d1d25;
  --accent: #b39ddb;       /* pastel purple */
  --accent-contrast: #16161a;
  --accent-soft: #c7b7ea;  /* lighter pastel */
  --code-bg: #1a1a22;
  --shadow: 0 6px 18px rgba(68, 21, 77, 0.719);
}

[data-theme="lime"] {
  --bg: #101410;
  --surface: #181d17;
  --text: #d7d7e0;
  --muted: #a2a2b2;
  --border: #283026;
  --input-bg: #2a470d;
  --accent: #a7db9d;       /* pastel purple */
  --accent-contrast: #161a16;
  --accent-soft: #c6eab7;  /* lighter pastel */
  --code-bg: #1a221f;
  --shadow: 0 6px 18px rgba(107, 146, 56, 0.397);
  --font-family: monospace;
  --border-radius: 0px;
}

[data-theme="crimson"] {
  --bg: rgb(18, 5, 5);
  --surface: #221a1a;
  --text: #d7d7e0;
  --muted: #b2a2ad;
  --border: #262630;
  --input-bg: #1d1d25;
  --accent: #d68181;       /* pastel purple */
  --accent-contrast: #291e20;
  --accent-soft: #ae6363;  /* lighter pastel */
  --code-bg: #1a1a22;
  --shadow: 0 6px 18px rgba(103, 17, 17, 0.719);
}
/* ====== 1) ROSE (light) — pink palette ====== */
html[data-theme="rose"] {
  --bg: #fff7fb;            /* soft rose wash */
  --surface: #fff0f6;       /* pale pink panel */
  --text: #5a2731;          /* plum-rose ink */
  --muted: #84515d;         /* muted rose */
  --border: #ffd4e3;        /* pink border */
  --input-bg: #fff9fc;
  --accent: #e75480;        /* deep rose */
  --accent-contrast: #ffffff;
  --accent-soft: #ff8fb3;   /* light rose */
  --code-bg: #ffeaf1;
  --shadow: 0 2px 10px rgba(231,84,128,.12);
}

/* ====== 2) AQUA (light) — blue palette ====== */
html[data-theme="aqua"] {
  --bg: #f0f8ff;            /* alice-ish blue */
  --surface: #e9f2ff;       /* pale panel */
  --text: #16324f;          /* navy-ink */
  --muted: #44617b;         /* slate-blue */
  --border: #cfe3ff;        /* soft blue border */
  --input-bg: #f7fbff;
  --accent: #2a9df4;        /* azure */
  --accent-contrast: #ffffff;
  --accent-soft: #8bc8ff;   /* sky blue */
  --code-bg: #eaf3ff;
  --shadow: 0 2px 10px rgba(42,157,244,.12);
}

/* ====== 3) DUNE (light) — sands, tans, browns ====== */
html[data-theme="dune"] {
  --bg: #fbf6ee;            /* dune sand */
  --surface: #f4ead9;       /* tan panel */
  --text: #4b3a2b;          /* deep brown */
  --muted: #7a6350;         /* warm mute */
  --border: #e6d7c0;        /* sand border */
  --input-bg: #fffaf1;
  --accent: #c28b47;        /* desert amber */
  --accent-contrast: #1d150e;
  --accent-soft: #e3b980;   /* light amber */
  --code-bg: #efe4d1;
  --shadow: 0 2px 10px rgba(194,139,71,.14);
}

/* ====== 4) TRON (dark) — greys + neon blue ====== */
html[data-theme="tron"] {
  --bg: #0c0f12;            /* near-black */
  --surface: #12171c;       /* deep grey panel */
  --text: #d7e2ef;          /* cool light */
  --muted: #98a6b8;         /* slate */
  --border: #1f2730;        /* steel edge */
  --input-bg: #161e26;
  --accent: #00d1ff;        /* neon cyan */
  --accent-contrast: #071317;
  --accent-soft: #66e3ff;   /* soft neon */
  --code-bg: #0f151b;
  --shadow: 0 8px 22px rgba(0,209,255,.18);
}

/* ====== 5) OLED (dark) — pure black/white, high-contrast ====== */
html[data-theme="oled"] {
  --bg: #000000;            /* true black */
  --surface: #0a0a0a;       /* near-black card */
  --text: #ffffff;          /* pure white */
  --muted: #cfcfcf;         /* light grey */
  --border: #1a1a1a;        /* subtle border */
  --input-bg: #0f0f0f;
  --accent: #ffffff;        /* white accents */
  --accent-contrast: #000000;
  --accent-soft: #bfbfbf;   /* soft grey */
  --code-bg: #0b0b0b;
  --shadow: 0 8px 24px rgba(255,255,255,.06);
}

/* ====== 6) FOREST (light) — greens ====== */
html[data-theme="forest"] {
  --bg: #f1f7f2;            /* mist green */
  --surface: #e6f1e7;       /* pale leaf */
  --text: #233526;          /* deep evergreen */
  --muted: #4f6b57;         /* moss */
  --border: #cfe1d4;        /* fern edge */
  --input-bg: #f7fbf8;
  --accent: #2e8b57;        /* sea green */
  --accent-contrast: #ffffff;
  --accent-soft: #79c59a;   /* light mint */
  --code-bg: #e9f4eb;
  --shadow: 0 2px 10px rgba(46,139,87,.12);
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.card {
  --angle: 0deg;
  padding: 1rem;
  border: 3px solid transparent;
  border-radius: 24px;

  background:
    linear-gradient(var(--bg),var(--bg)) padding-box,
    conic-gradient(
      from var(--angle),
/*           #ff7eb6,
      #ff9ac6,
      #d78fff,
      #8ea8ff,
      #67cfff, */
      #7ee7ff,
      #ff7eb6,
      #a97eff
    );

  box-shadow: 0 12px 30px rgba(120, 130, 180, 0.10);
  color: #3a3f55;
  animation: border-flow 12s linear infinite;
}

@keyframes border-flow {
  to {
    --angle: 360deg;
  }
}

/* ---------- BASE UI ---------- */
:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
html, body { height: 100%; }
body {
  margin: 1rem;
  max-width: 100%;
  max-height: 95vh;
  background: var(--bg); color: var(--text);
  font-family: var(--font-family);
}
#genBody {
  height:89vh;
  margin: 1rem;
  background: var(--bg); color: var(--text);
  
  overflow:auto;
}
h1 { margin: 0 0 1rem; font-size: 1.4rem; }
fieldset {
  border: 1px solid var(--border);
  border-radius: var(--border-radius); padding: 1rem; margin-bottom: 1rem;
  background: var(--surface); box-shadow: var(--shadow);
}
legend { padding: 0 .25rem; }
legend:hover {
  box-shadow: var(--shadow);
  animation: ease-in;
  font-weight: bold;
}
label { display:block; font-weight:600; margin: .5rem 0 .25rem; }
input[type="text"], input[type="number"], textarea, select {
  width: 100%; box-sizing: border-box; padding: .6rem .7rem;
  border:1px solid var(--border); border-radius: 10px; font: inherit;
  background: var(--input-bg); color: var(--text);
  outline: none;
}

textarea { min-height: 3cm; resize: vertical; }
select { cursor: pointer; padding: .4rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.inline { display:flex; gap:.5rem; align-items:center; }
.inline-check { display:flex; gap:.5rem; align-items:center; }
.muted { color: var(--muted); font-size: .9rem; }
button {
  appearance: none; border: none; background: var(--accent); color: var(--accent-contrast);
  padding: .7rem 1rem; border-radius: 10px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow);
}
button[disabled] { opacity: .6; cursor: not-allowed; }
#status { margin: .5rem 0 0; font-size: .95rem; }
#imgBox { margin-top: 1rem; }
#imgBox img { max-width: 100%; border-radius: 12px; border: 1px solid var(--border); box-shadow: var(--shadow); }
code.small { background: var(--code-bg); padding:.1rem .3rem; border-radius:6px; font-size:.85em; }
.choices { display:flex; gap: 1rem; flex-wrap: wrap; }
.choices label { font-weight: 500; display:flex; gap:.4rem; align-items:center; margin:0; }
.choices hr { width: 100%; } /* Line-breakability */
.choices br { width: 100%; color:transparent} /* Line-breakability */

/* ---------- History styles ---------- */
#historyControls { margin-top: 1rem; display:flex; gap:.5rem; align-items:center; }
#historyBox { margin-top: 1rem; display:none; }
#historyWrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .75rem;
}
#historyWrap img {
  width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border);
  display:block; box-shadow: var(--shadow);
}
#historyWrap img:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}
img {
  /* max-height:fit-content; */
  object-fit:contain;
  width:100%;
  max-height: 80vh;
}
.panel2 {
  max-height: 100%;
  overflow: scroll;
}

.root {
  display: flex;
  gap: 8px;
}
.root > .panel {
  flex: 1 1 50%;
}
.root > #genBody {
  flex: 1 1 40%;
  min-width: 280px;
}
.root > #history {
  flex: 1 1 60%;
  min-width: 320px;
}
@media (max-width: 10in) {
  .root {
    flex-direction: column;
  }
  .root > .panel {
    flex: auto;
  }
  .root > #genBody {
    height: auto;
  }
}

/* Make scrollbars comply with the theme too. */
.root {
  scrollbar-color: var(--accent) var(--accent-contrast);
}

header.tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  margin: 1rem;
  border-radius: 12px;
}

header.tab h1 {
  margin: 0;
  font-size: 1.2rem;
  flex: 1;
}

.tab-nav {
  display: flex;
  gap: 0.5rem;
}

.tab-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--accent);
}

.tab-btn.active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

/* Old tab button styles - replaced by .tab-btn */
/*
.tab button {
  background-color: inherit;
  border: outset var(--accent);
  outline: none;
  cursor: pointer;
  padding: 6px 8px;
  transition: 0.3s;
  color: var(--accent);
}
.tab button:hover {
  color: var(--accent-contrast);
  background-color: var(--accent);
  border: inset var(--accent);
}
*/
/* header {
position: fixed;
top: 0;
left: 0;
width: 100%;
} */

.toast-list {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.toast {
  min-width: 180px;
  max-width: 320px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(86, 3, 82, 0.6);
  color: rgb(255, 255, 255);
  font-weight: bold;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(-8px);
  transition:
  opacity 220ms ease,
  transform 220ms ease;
}

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

.toast.fade {
  opacity: 0;
  transform: translateY(-8px);
}

/* History grid layout */
.history-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.75rem;
  padding: 1rem;
}

.history-grid img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: block;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.history-grid img:hover {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  header.tab {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin: 0.5rem;
    padding: 0.75rem 1rem;
  }
  
  header.tab h1 {
    text-align: center;
    flex: none;
  }
  
  .tab-nav {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .history-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
}