/* Shared design system for every ZEM tool and membership tier. */
:root {
  color-scheme: dark;
  --bg-color: #0b1120;
  --card-bg: #141e30;
  --input-bg: #0e1727;
  --border-color: #304057;
  --text-color: #edf2fa;
  --text-main: var(--text-color);
  --text-muted: #a6b5ca;
  --accent-color: #4263dc;
  --accent-hover: #3656ca;
  --accent-cyan: #a9baff;
  --success: #75d8b4;
  --warning: #f5ce82;
  --status-queue: var(--warning);
  --status-progress: #a9baff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  padding: 48px 24px;
  background: radial-gradient(ellipse at 50% 0, #1a2845 0, transparent 65%), var(--bg-color);
  color: var(--text-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.container, .chat-container {
  width: 100%; max-width: 800px; margin: 0 auto;
  background: var(--card-bg); border: 1px solid var(--border-color);
  border-radius: 20px; box-shadow: 0 20px 60px #0003;
}
.container { padding: 36px; }
.toolbox-page .container { max-width: 960px; }
.header, .container > header { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border-color); }
h1, h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.2; font-weight: 700; letter-spacing: -.035em; }
h1 {
  font-weight: 800;
  letter-spacing: .035em;
  color: #00d2ff;
  background: linear-gradient(135deg, #ffffff 0%, #00d2ff 60%, #00f0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 20px rgba(0, 210, 255, .4);
}
.image-page h1, .video-page h1 { text-transform: uppercase; }
.eyebrow { color: var(--accent-cyan); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.subtitle { color: var(--text-muted); margin-top: 10px; font-size: .9375rem; }
a { color: var(--accent-cyan); }
.back-btn, .btn-back {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-muted); text-decoration: none; font-size: .875rem;
  font-weight: 600; border-radius: 6px;
}
.back-btn { margin-bottom: 16px; }
.back-btn:hover, .btn-back:hover { color: var(--text-color); }
.usage-badge, .pro-badge {
  display: inline-flex; align-items: center; margin-top: 14px; padding: 5px 11px;
  background: #a9baff0d; border: 1px solid #52648c;
  border-radius: 999px; color: #c1ceff; font-size: .75rem; font-weight: 600;
}
.pro-badge { color: var(--warning); background: #f5ce820a; border-color: #746140; }
label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .8125rem; font-weight: 600; color: #cbd6e6; }
button, input, textarea, select { font: inherit; }
textarea, select, .password-input {
  display: block; width: 100%; min-width: 0; color: var(--text-color);
  background: var(--input-bg); border: 1px solid var(--border-color);
  border-radius: 10px; padding: 12px 14px; font-size: 1rem;
}
textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
textarea.negative-textarea { min-height: 88px; }
textarea::placeholder, input::placeholder { color: #92a2b9; opacity: 1; }
select { min-height: 48px; text-overflow: ellipsis; cursor: pointer; }
option:disabled { color: #8995a8; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 3px solid #a9baff; outline-offset: 3px; }
textarea:focus, select:focus, .password-input:focus { border-color: #a9baff; }
.input-group { display: flex; flex-direction: column; gap: 20px; }
.form-group { margin-bottom: 22px; min-width: 0; }
.form-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; }
.params-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 20px; background: var(--input-bg); border: 1px solid var(--border-color); border-radius: 12px; }
.param-control { min-width: 0; }
.param-control.full-width { grid-column: 1 / -1; }
.param-val { color: var(--accent-cyan); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; min-height: 44px; accent-color: #a9baff; cursor: pointer; }
button, .btn, .download-btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border: 1px solid transparent;
  border-radius: 10px; background: var(--accent-color); color: white;
  font-size: .9375rem; font-weight: 600; line-height: 1.4;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
button:hover:not(:disabled), .btn:hover:not(.disabled), .download-btn:hover { background: var(--accent-hover); }
#generateBtn { width: 100%; }
button:disabled, .btn.disabled { background: #233046; border-color: var(--border-color); color: #98a7bd; cursor: not-allowed; }
.btn.disabled { pointer-events: none; }
.section { padding: 24px; border: 1px solid var(--border-color); border-radius: 14px; background: var(--input-bg); }
.section + .section { margin-top: 20px; }
.section-header { margin-bottom: 20px; }
.section-title { font-size: 1.125rem; font-weight: 650; margin-bottom: 4px; }
.limit-badge, .patreon-badge { display: block; font-size: .8125rem; color: var(--text-muted); }
.patreon-badge { color: var(--warning); margin-top: 6px; }
.btn-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.btn-full { grid-column: 1 / -1; }
.password-controls { display: flex; gap: 10px; margin-bottom: 16px; }
.password-input { flex: 1; }
.error-message { display: none; margin: 8px 0 16px; font-size: .875rem; color: #ffadb8; }
.output-area, #resultContainer { margin-top: 28px; min-height: 220px; display: flex; align-items: center; justify-content: center; border: 1px dashed #4b5e7a; background: var(--input-bg); border-radius: 12px; overflow: hidden; }
#resultContainer { padding: 24px; }
#resultContainer:empty { display: none; }
img, video { display: block; max-width: 100%; height: auto; border-radius: 10px; }
.output-area img, video { width: 100%; }
.status-text, .status-box { color: var(--text-muted); font-size: .875rem; text-align: center; overflow-wrap: anywhere; }
.output-area > .status-text { padding: 24px; }
.status-container, .status-box { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.patience-note { color: var(--accent-cyan); font-size: .8125rem; margin-top: 8px; }
.error { color: #ffadb8; }
.limit-reached-card { padding: 18px; background: #f5ce820a; border: 1px solid #746140; border-radius: 10px; color: var(--warning); text-align: center; }
.download-btn { margin-top: 16px; }
.spinner, .loader { display: inline-block; flex-shrink: 0; width: 28px; height: 28px; border: 3px solid var(--border-color); border-top-color: var(--accent-cyan); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.chat-container { display: flex; flex-direction: column; height: min(820px, calc(100dvh - 96px)); min-height: 360px; overflow: hidden; }
.chat-header { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 20px 28px; border-bottom: 1px solid var(--border-color); }
.header-left { grid-column: 1 / -1; }
.header-center h1 { font-size: 1.5rem; }
.header-right { display: flex; justify-content: flex-end; }
.header-right .usage-badge, .header-right .pro-badge { margin-top: 0; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.message { max-width: 90%; padding: 16px 20px; border-radius: 12px; overflow-wrap: anywhere; }
.message.user { align-self: flex-end; background: var(--accent-color); white-space: pre-wrap; }
.message.assistant { align-self: flex-start; background: #202d42; border: 1px solid var(--border-color); }
.final-text { white-space: pre-wrap; }
.status-tracker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; border: 1px solid var(--border-color); border-radius: 10px; font-size: .875rem; }
.status-tracker .spinner { width: 18px; height: 18px; }
.badge { padding: 3px 8px; border-radius: 6px; font-size: .75rem; }
.badge.queue { background: #f5ce8212; color: var(--warning); }
.badge.progress { background: #a9baff12; color: var(--accent-cyan); }
.think-container { margin-bottom: 14px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: var(--input-bg); }
.think-header { display: flex; justify-content: space-between; gap: 8px; padding: 12px; cursor: pointer; color: var(--text-muted); font-size: .8125rem; }
.think-content { padding: 12px; border-top: 1px solid var(--border-color); color: var(--text-muted); white-space: pre-wrap; font-family: monospace; font-size: .8125rem; max-height: 220px; overflow: auto; }
.chat-input-container { display: flex; gap: 12px; padding: 20px 28px; border-top: 1px solid var(--border-color); }
.chat-input-container textarea { flex: 1; min-height: 52px; height: 52px; max-height: 160px; resize: vertical; }
.chat-input-container button { align-self: flex-end; }
@media (max-width: 600px) {
  body { padding: 16px 12px; }
  .container { padding: 22px 18px; border-radius: 14px; }
  .header, .container > header { margin-bottom: 22px; padding-bottom: 20px; }
  .form-row, .params-grid { grid-template-columns: minmax(0, 1fr); }
  .form-row { gap: 0; }
  .params-grid, .section { padding: 16px; }
  .password-controls { flex-direction: column; }
  .btn-group { grid-template-columns: minmax(0, 1fr); }
  .chat-container { height: calc(100dvh - 32px); min-height: 360px; border-radius: 14px; }
  .chat-header { padding: 14px 18px; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .header-right { justify-content: flex-start; }
  .chat-messages { padding: 18px; }
  .message { max-width: 100%; padding: 14px; }
  .chat-input-container { padding: 14px; gap: 8px; }
  .chat-input-container button { padding-inline: 14px; }
  .output-area { min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}