/* =============================================================
   Admin dashboard — dark cosmic control panel
   ============================================================= */
:root {
  --bg: #070912; --bg-2: #0b0f1c; --panel: #0d1322; --panel-2: #111a2e;
  --ink: #eef2fb; --muted: #97a6c4; --faint: #5f6f8f;
  --cyan: #56c7ff; --cyan-deep: #2b8fd6; --amber: #ffb14e; --amber-deep: #ff8a3d;
  --cyan-rgb: 86, 199, 255; --cyan-deep-rgb: 43, 143, 214;
  --amber-rgb: 255, 177, 78; --amber-deep-rgb: 255, 138, 61;
  --accent: var(--cyan);
  --green: #35e08a; --red: #ff6b6b;
  --line: rgba(255,255,255,0.09); --line-soft: rgba(255,255,255,0.055);
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 14px; --shadow: 0 18px 44px rgba(0,0,0,0.5);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 15% 10%, rgba(var(--cyan-deep-rgb),0.12), transparent 60%), radial-gradient(50% 40% at 90% 15%, rgba(var(--amber-deep-rgb),0.08), transparent 60%); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
input, textarea, select, button { font-family: inherit; font-size: 0.95rem; }

/* ---------------- LOGIN ---------------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 38px 34px; box-shadow: var(--shadow); }
.login-card .logo { text-align: center; margin-bottom: 6px; }
.login-card .logo img { width: 130px; margin: 0 auto 14px; }
.login-card h1 { font-family: var(--font-display); font-size: 1.4rem; text-align: center; margin-bottom: 4px; }
.login-card .sub { text-align: center; color: var(--muted); font-size: 0.88rem; margin-bottom: 26px; }
.login-hint { text-align: center; font-family: var(--font-mono); font-size: 0.74rem; color: var(--faint); margin-top: 18px; }

/* ---------------- FORM FIELDS ---------------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 7px; text-transform: uppercase; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border-radius: 10px; color: var(--ink);
  background: rgba(255,255,255,0.03); border: 1px solid var(--line); transition: border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--cyan); background: rgba(var(--cyan-rgb), 0.05); }
.field textarea { resize: vertical; min-height: 90px; }
.field.check { display: flex; align-items: center; gap: 10px; }
.field.check input { width: auto; }
.field.check label { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 0.9rem; color: var(--ink); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ---------------- BUTTONS ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-weight: 600; padding: 11px 18px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.btn:disabled { opacity: .6; cursor: default; }
.btn-primary { background: linear-gradient(120deg, var(--cyan), var(--cyan-deep)); color: #fff; box-shadow: 0 8px 20px rgba(var(--cyan-deep-rgb),0.28); }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); }
.btn-amber { background: linear-gradient(120deg, var(--amber), var(--amber-deep)); color: #1a1200; font-weight: 700; }
.btn-amber:hover:not(:disabled) { transform: translateY(-2px); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-danger { background: rgba(255,107,107,0.12); border-color: rgba(255,107,107,0.4); color: #ff9b9b; }
.btn-danger:hover { background: rgba(255,107,107,0.2); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: 0.82rem; border-radius: 8px; }

/* ---------------- APP LAYOUT ---------------- */
.app { display: grid; grid-template-columns: 250px 1fr; height: 100vh; }
.sidebar-back { display: none; }
.sidebar { background: var(--panel); border-right: 1px solid var(--line); padding: 22px 16px; height: 100vh; display: flex; flex-direction: column; overflow-y: auto; }
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; }
.sidebar .brand img { width: 120px; }
.nav-group { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); padding: 14px 12px 8px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--muted); cursor: pointer; font-size: 0.92rem; margin-bottom: 2px; transition: background .2s, color .2s; }
.nav-item i { width: 18px; text-align: center; }
.nav-item:hover { background: var(--panel-2); color: var(--ink); }
.nav-item.active { background: linear-gradient(120deg, rgba(var(--cyan-deep-rgb), 0.22), rgba(var(--cyan-rgb), 0.08)); color: var(--ink); }
.nav-item .badge { margin-left: auto; background: var(--amber); color: #1a1200; font-size: 0.68rem; font-weight: 700; padding: 1px 8px; border-radius: 20px; }
.sidebar .spacer { flex: 1; }
.sidebar .logout { color: var(--muted); }
.sidebar .logout:hover { color: var(--red); }

.main { padding: 26px 32px 60px; overflow-x: hidden; overflow-y: auto; height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; gap: 16px; flex-wrap: wrap; }
.topbar h1 { font-family: var(--font-display); font-size: 1.5rem; }
.topbar .sub { color: var(--muted); font-size: 0.88rem; }
.topbar-actions { display: flex; gap: 10px; }
.mobile-menu-btn { display: none; background: var(--panel); border: 1px solid var(--line); color: var(--ink); width: 42px; height: 42px; border-radius: 10px; cursor: pointer; }

/* ---------------- STAT CARDS ---------------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 26px; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; position: relative; overflow: hidden; }
.stat-card .ic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 14px; background: linear-gradient(135deg, rgba(var(--cyan-rgb), 0.18), rgba(var(--amber-rgb), 0.12)); }
.stat-card .val { font-family: var(--font-display); font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-card .lbl { color: var(--muted); font-size: 0.84rem; margin-top: 6px; }
.stat-card.accent-amber .ic { background: linear-gradient(135deg, rgba(var(--amber-rgb), 0.25), rgba(var(--amber-deep-rgb), 0.14)); }

/* ---------------- PANELS / TABLES ---------------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 22px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); gap: 12px; flex-wrap: wrap; }
.panel-head h2 { font-family: var(--font-display); font-size: 1.05rem; }
.panel-body { padding: 8px 8px; }

.item-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; transition: background .2s; }
.item-row:hover { background: var(--panel-2); }
.item-row + .item-row { border-top: 1px solid var(--line-soft); }
.item-thumb { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: var(--panel-2); flex: 0 0 auto; border: 1px solid var(--line); }
.item-thumb.icon { object-fit: contain; padding: 8px; }
.item-main { flex: 1; min-width: 0; }
.item-main h3 { font-family: var(--font-display); font-size: 0.98rem; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-main p { color: var(--muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-meta { font-family: var(--font-mono); font-size: 0.76rem; color: var(--faint); flex: 0 0 auto; }
.item-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.icon-btn { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); cursor: pointer; transition: .2s; }
.icon-btn:hover { color: var(--cyan); border-color: var(--cyan); }
.icon-btn.del:hover { color: var(--red); border-color: rgba(255,107,107,0.5); }

.empty { text-align: center; color: var(--faint); padding: 34px; font-size: 0.9rem; }
.pill { font-family: var(--font-mono); font-size: 0.7rem; padding: 3px 9px; border-radius: 20px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.pill.unread { background: rgba(var(--amber-rgb), 0.16); border-color: rgba(var(--amber-rgb), 0.4); color: var(--amber); }

/* ---------------- MESSAGES ---------------- */
.msg-row { cursor: pointer; }
.msg-row.unread .item-main h3::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); margin-right: 8px; vertical-align: middle; }
.msg-detail { padding: 18px 20px; border-top: 1px solid var(--line-soft); background: var(--bg-2); display: none; }
.msg-detail.open { display: block; }
.msg-detail .meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 12px; }
.msg-detail .meta a { color: var(--cyan); }
.msg-detail .body { white-space: pre-wrap; color: var(--ink); font-size: 0.94rem; }

/* ---------------- MODAL ---------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 22px; }
.modal.open { display: flex; }
.modal-back { position: absolute; inset: 0; background: rgba(4,6,12,0.72); backdrop-filter: blur(5px); }
.modal-card { position: relative; z-index: 2; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); animation: pop .25s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: var(--panel); }
.modal-head h2 { font-family: var(--font-display); font-size: 1.15rem; }
.modal-head .x { background: none; border: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; }
.modal-head .x:hover { color: var(--red); }
.modal-body { padding: 22px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line-soft); position: sticky; bottom: 0; background: var(--panel); }

/* ---------------- TOAST ---------------- */
.toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { padding: 13px 18px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); box-shadow: var(--shadow); font-size: 0.9rem; display: flex; align-items: center; gap: 10px; animation: slideIn .25s ease; }
.toast.ok { border-color: rgba(53,224,138,0.4); } .toast.ok i { color: var(--green); }
.toast.err { border-color: rgba(255,107,107,0.4); } .toast.err i { color: var(--red); }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

.note { min-height: 20px; font-size: 0.86rem; margin-top: 10px; }
.note.err { color: var(--red); } .note.ok { color: var(--green); }
.hidden { display: none !important; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; top: 0; left: 0; z-index: 90; width: 250px; transform: translateX(-100%); transition: transform .3s; }
  .sidebar.open { transform: none; }
  .sidebar-back { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 80; display: none; }
  .sidebar-back.open { display: block; }
  .mobile-menu-btn { display: grid; place-items: center; }
  .main { padding: 20px 18px 50px; }
  .two-col { grid-template-columns: 1fr; }
  .item-meta { display: none; }
}

/* ===================== ADDED: password eye, switch, sections, select ===================== */
.pw-wrap { position: relative; display: flex; align-items: center; }
.pw-wrap input { width: 100%; padding-right: 42px; }
.pw-eye {
  position: absolute; right: 8px; background: none; border: none; cursor: pointer;
  color: var(--muted); padding: 6px 8px; font-size: .95rem; border-radius: 8px;
}
.pw-eye:hover { color: var(--text); }

/* toggle switch */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: .2s;
}
.switch span::before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .2s;
}
.switch input:checked + span { background: var(--accent, #38bdf8); }
.switch input:checked + span::before { transform: translateX(18px); }

/* select styled like inputs */
.field select {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  background: var(--input, rgba(255,255,255,0.04)); color: var(--text);
  border: 1px solid var(--line); font: inherit;
}

/* section item editor block */
.sec-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 12px; background: rgba(255,255,255,0.02); }
.sec-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: .82rem; color: var(--muted); font-weight: 600; }

/* analytics live pill */
#anLive { display: inline-flex; align-items: center; gap: 6px; }

/* accent-amber card (in case not already defined) */
.stat-card.accent-amber .val { color: var(--amber, #fb923c); }

/* ===================== ADDED: photo uploader + cropper ===================== */
.photo-uploader { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.photo-preview {
  width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(56,189,248,.18), rgba(251,146,60,.18));
  border: 2px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.photo-preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.photo-uploader-actions { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.photo-uploader-actions input[type="text"] {
  padding: 9px 12px; border-radius: 10px; background: var(--input, rgba(255,255,255,0.04));
  border: 1px solid var(--line); color: var(--text); font: inherit;
}
.photo-uploader-actions .hint { font-size: .78rem; color: var(--muted); }

.cropper-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.cropper-box {
  background: var(--panel, #0d1017); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; width: 100%; max-width: 380px; text-align: center;
}
.cropper-box h3 { margin: 0 0 14px; font-size: 1.05rem; }
.cropper-canvas-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
#cropperCanvas { border-radius: 12px; cursor: grab; touch-action: none; background: var(--bg-2); }
#cropperCanvas:active { cursor: grabbing; }
.cropper-box input[type="range"] { width: 100%; margin-bottom: 8px; }
.cropper-hint { font-size: .78rem; color: var(--muted); margin: 0 0 16px; }
.cropper-actions { display: flex; gap: 10px; justify-content: center; }

/* ===================== ADDED: generic image/icon field (upload + link) ===================== */
.field-image-uploader { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.field-image-preview {
  width: 56px; height: 56px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(251,146,60,.14));
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.field-image-preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.field-image-actions { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.field-image-actions .field-img-link {
  padding: 9px 12px; border-radius: 10px; background: var(--input, rgba(255,255,255,0.04));
  border: 1px solid var(--line); color: var(--text); font: inherit; width: 100%;
}

/* ===================== ADDED: server log viewer ===================== */
.logs-box {
  background: #05070c; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; max-height: 480px; overflow-y: auto; overflow-x: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; line-height: 1.6;
  color: #d4dae4; white-space: pre-wrap; word-break: break-word;
}

/* ===================== ADDED: theme picker ===================== */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.theme-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 18px; border-radius: 14px; border: 2px solid var(--line); background: rgba(255,255,255,0.02);
  cursor: pointer; transition: border-color .2s, transform .2s; text-align: left; font: inherit; color: var(--text);
}
.theme-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.25); }
.theme-card.active { border-color: var(--accent, #38bdf8); }
.theme-swatch { display: flex; gap: 6px; }
.theme-swatch span { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); }
.theme-name { font-weight: 600; font-size: .92rem; }
.theme-check { position: absolute; top: 14px; right: 14px; color: var(--accent, #38bdf8); font-size: 1.1rem; }

/* ===================== THEMES (mirrors the public site's themes) ===================== */
html[data-theme="midnight-violet"] {
  --bg: #0d0a1a; --bg-2: #140f28; --panel: #140f28; --panel-2: #1c1638;
  --ink: #f0edfb; --muted: #b4a8d9; --faint: #7c6ea3;
  --cyan: #a78bfa; --cyan-deep: #7c5cf0; --amber: #f472b6; --amber-deep: #ec4899;
  --cyan-rgb: 167, 139, 250; --cyan-deep-rgb: 124, 92, 240;
  --amber-rgb: 244, 114, 182; --amber-deep-rgb: 236, 72, 153;
}
html[data-theme="ocean-breeze"] {
  --bg: #051014; --bg-2: #081b21; --panel: #081b21; --panel-2: #0f2830;
  --ink: #e8f7f7; --muted: #9fc9c9; --faint: #5f8a8a;
  --cyan: #2dd4bf; --cyan-deep: #14b8a6; --amber: #38bdf8; --amber-deep: #0ea5e9;
  --cyan-rgb: 45, 212, 191; --cyan-deep-rgb: 20, 184, 166;
  --amber-rgb: 56, 189, 248; --amber-deep-rgb: 14, 165, 233;
}
html[data-theme="sunset-warm"] {
  --bg: #120a08; --bg-2: #1c100b; --panel: #1c100b; --panel-2: #261811;
  --ink: #fbeee7; --muted: #d9ab97; --faint: #a3715c;
  --cyan: #fb7185; --cyan-deep: #e11d48; --amber: #fbbf24; --amber-deep: #f59e0b;
  --cyan-rgb: 251, 113, 133; --cyan-deep-rgb: 225, 29, 72;
  --amber-rgb: 251, 191, 36; --amber-deep-rgb: 245, 158, 11;
}
html[data-theme="forest-emerald"] {
  --bg: #071009; --bg-2: #0b1710; --panel: #0b1710; --panel-2: #122019;
  --ink: #eafaf0; --muted: #9fcbb0; --faint: #5f8f74;
  --cyan: #34d399; --cyan-deep: #10b981; --amber: #facc15; --amber-deep: #eab308;
  --cyan-rgb: 52, 211, 153; --cyan-deep-rgb: 16, 185, 129;
  --amber-rgb: 250, 204, 21; --amber-deep-rgb: 234, 179, 8;
}
html[data-theme="rose-gold"] {
  --bg: #120b0e; --bg-2: #1a1014; --panel: #1a1014; --panel-2: #24161c;
  --ink: #fbecf1; --muted: #d9a8bb; --faint: #a37086;
  --cyan: #f9a8d4; --cyan-deep: #ec4899; --amber: #fbbf24; --amber-deep: #f59e0b;
  --cyan-rgb: 249, 168, 212; --cyan-deep-rgb: 236, 72, 153;
  --amber-rgb: 251, 191, 36; --amber-deep-rgb: 245, 158, 11;
}
html[data-theme="monochrome-slate"] {
  --bg: #0a0a0c; --bg-2: #131316; --panel: #131316; --panel-2: #1b1b1f;
  --ink: #f1f2f4; --muted: #a8adb8; --faint: #71767f;
  --cyan: #cbd5e1; --cyan-deep: #94a3b8; --amber: #e2e8f0; --amber-deep: #cbd5e1;
  --cyan-rgb: 203, 213, 225; --cyan-deep-rgb: 148, 163, 184;
  --amber-rgb: 226, 232, 240; --amber-deep-rgb: 203, 213, 225;
}


/* ===================== 20 MORE THEMES (mirrors site) ===================== */
html[data-theme="cyberpunk-neon"] {
  --bg: #0a0014; --bg-2: #140022; --panel: #140022; --panel-2: #140022;
  --ink: #fce8ff; --muted: #d199e0; --faint: #8a5a9e;
  --cyan: #ff2e9a; --cyan-deep: #d6008a; --amber: #00f0ff; --amber-deep: #00c2d1;
  --cyan-rgb: 255, 46, 154; --cyan-deep-rgb: 214, 0, 138;
  --amber-rgb: 0, 240, 255; --amber-deep-rgb: 0, 194, 209;
}
html[data-theme="arctic-frost"] {
  --bg: #060b12; --bg-2: #0b141e; --panel: #0b141e; --panel-2: #0b141e;
  --ink: #eaf6ff; --muted: #a8c5d9; --faint: #6a8ba3;
  --cyan: #7dd3fc; --cyan-deep: #38bdf8; --amber: #e0f2fe; --amber-deep: #bae6fd;
  --cyan-rgb: 125, 211, 252; --cyan-deep-rgb: 56, 189, 248;
  --amber-rgb: 224, 242, 254; --amber-deep-rgb: 186, 230, 253;
}
html[data-theme="volcanic-ember"] {
  --bg: #0f0705; --bg-2: #1a0d09; --panel: #1a0d09; --panel-2: #1a0d09;
  --ink: #ffe9e3; --muted: #d9a394; --faint: #a3695a;
  --cyan: #ff4d4d; --cyan-deep: #dc2626; --amber: #f97316; --amber-deep: #ea580c;
  --cyan-rgb: 255, 77, 77; --cyan-deep-rgb: 220, 38, 38;
  --amber-rgb: 249, 115, 22; --amber-deep-rgb: 234, 88, 12;
}
html[data-theme="royal-sapphire"] {
  --bg: #050a18; --bg-2: #0a1428; --panel: #0a1428; --panel-2: #0a1428;
  --ink: #e8eefb; --muted: #a3b4d9; --faint: #63739e;
  --cyan: #3b82f6; --cyan-deep: #1d4ed8; --amber: #fbbf24; --amber-deep: #d97706;
  --cyan-rgb: 59, 130, 246; --cyan-deep-rgb: 29, 78, 216;
  --amber-rgb: 251, 191, 36; --amber-deep-rgb: 217, 119, 6;
}
html[data-theme="cherry-blossom"] {
  --bg: #12060d; --bg-2: #1c0d15; --panel: #1c0d15; --panel-2: #1c0d15;
  --ink: #fde8f1; --muted: #d9a3bf; --faint: #a3637f;
  --cyan: #f472b6; --cyan-deep: #db2777; --amber: #fda4af; --amber-deep: #fb7185;
  --cyan-rgb: 244, 114, 182; --cyan-deep-rgb: 219, 39, 119;
  --amber-rgb: 253, 164, 175; --amber-deep-rgb: 251, 113, 133;
}
html[data-theme="golden-hour"] {
  --bg: #120d05; --bg-2: #1c150b; --panel: #1c150b; --panel-2: #1c150b;
  --ink: #fbf3e7; --muted: #d9c197; --faint: #a3895c;
  --cyan: #fbbf24; --cyan-deep: #d97706; --amber: #fb923c; --amber-deep: #ea580c;
  --cyan-rgb: 251, 191, 36; --cyan-deep-rgb: 217, 119, 6;
  --amber-rgb: 251, 146, 60; --amber-deep-rgb: 234, 88, 12;
}
html[data-theme="deep-ocean"] {
  --bg: #040a0d; --bg-2: #071419; --panel: #071419; --panel-2: #071419;
  --ink: #e3f6f8; --muted: #93c5cd; --faint: #547e85;
  --cyan: #06b6d4; --cyan-deep: #0891b2; --amber: #22d3ee; --amber-deep: #0e7490;
  --cyan-rgb: 6, 182, 212; --cyan-deep-rgb: 8, 145, 178;
  --amber-rgb: 34, 211, 238; --amber-deep-rgb: 14, 116, 144;
}
html[data-theme="crimson-night"] {
  --bg: #0d0507; --bg-2: #170a0d; --panel: #170a0d; --panel-2: #170a0d;
  --ink: #fbe7ea; --muted: #d99aa3; --faint: #a35c68;
  --cyan: #f43f5e; --cyan-deep: #be123c; --amber: #fb7185; --amber-deep: #e11d48;
  --cyan-rgb: 244, 63, 94; --cyan-deep-rgb: 190, 18, 60;
  --amber-rgb: 251, 113, 133; --amber-deep-rgb: 225, 29, 72;
}
html[data-theme="lavender-dusk"] {
  --bg: #0d0a14; --bg-2: #161022; --panel: #161022; --panel-2: #161022;
  --ink: #f2eefb; --muted: #c2b3d9; --faint: #7f6ea3;
  --cyan: #c4b5fd; --cyan-deep: #8b5cf6; --amber: #f0abfc; --amber-deep: #d946ef;
  --cyan-rgb: 196, 181, 253; --cyan-deep-rgb: 139, 92, 246;
  --amber-rgb: 240, 171, 252; --amber-deep-rgb: 217, 70, 239;
}
html[data-theme="electric-lime"] {
  --bg: #070d05; --bg-2: #0d160a; --panel: #0d160a; --panel-2: #0d160a;
  --ink: #edfbe7; --muted: #b9d9a3; --faint: #7a9e63;
  --cyan: #a3e635; --cyan-deep: #65a30d; --amber: #4ade80; --amber-deep: #16a34a;
  --cyan-rgb: 163, 230, 53; --cyan-deep-rgb: 101, 163, 13;
  --amber-rgb: 74, 222, 128; --amber-deep-rgb: 22, 163, 74;
}
html[data-theme="copper-bronze"] {
  --bg: #120b06; --bg-2: #1c130b; --panel: #1c130b; --panel-2: #1c130b;
  --ink: #fbeee3; --muted: #d9b697; --faint: #a37c5c;
  --cyan: #f0995a; --cyan-deep: #c2661e; --amber: #fcd34d; --amber-deep: #d97706;
  --cyan-rgb: 240, 153, 90; --cyan-deep-rgb: 194, 102, 30;
  --amber-rgb: 252, 211, 77; --amber-deep-rgb: 217, 119, 6;
}
html[data-theme="aurora-borealis"] {
  --bg: #060d0f; --bg-2: #0a1618; --panel: #0a1618; --panel-2: #0a1618;
  --ink: #e3fbf5; --muted: #93d9c2; --faint: #549e8a;
  --cyan: #2dd4bf; --cyan-deep: #0d9488; --amber: #a78bfa; --amber-deep: #7c3aed;
  --cyan-rgb: 45, 212, 191; --cyan-deep-rgb: 13, 148, 136;
  --amber-rgb: 167, 139, 250; --amber-deep-rgb: 124, 58, 237;
}
html[data-theme="blood-moon"] {
  --bg: #100505; --bg-2: #1a0909; --panel: #1a0909; --panel-2: #1a0909;
  --ink: #fbe7e5; --muted: #d99e9a; --faint: #a3625c;
  --cyan: #dc2626; --cyan-deep: #991b1b; --amber: #fb923c; --amber-deep: #ea580c;
  --cyan-rgb: 220, 38, 38; --cyan-deep-rgb: 153, 27, 27;
  --amber-rgb: 251, 146, 60; --amber-deep-rgb: 234, 88, 12;
}
html[data-theme="cosmic-teal"] {
  --bg: #050d0e; --bg-2: #0a1618; --panel: #0a1618; --panel-2: #0a1618;
  --ink: #e5fbfa; --muted: #9ad9d5; --faint: #5ca3a0;
  --cyan: #14b8a6; --cyan-deep: #0f766e; --amber: #c084fc; --amber-deep: #a855f7;
  --cyan-rgb: 20, 184, 166; --cyan-deep-rgb: 15, 118, 110;
  --amber-rgb: 192, 132, 252; --amber-deep-rgb: 168, 85, 247;
}
html[data-theme="amethyst-dream"] {
  --bg: #0d0714; --bg-2: #170d21; --panel: #170d21; --panel-2: #170d21;
  --ink: #f3e9fb; --muted: #c3a3d9; --faint: #7f5ca3;
  --cyan: #a855f7; --cyan-deep: #7e22ce; --amber: #f472b6; --amber-deep: #db2777;
  --cyan-rgb: 168, 85, 247; --cyan-deep-rgb: 126, 34, 206;
  --amber-rgb: 244, 114, 182; --amber-deep-rgb: 219, 39, 119;
}
html[data-theme="solar-flare"] {
  --bg: #120902; --bg-2: #1c1005; --panel: #1c1005; --panel-2: #1c1005;
  --ink: #fbeee0; --muted: #d9b088; --faint: #a3744c;
  --cyan: #fb923c; --cyan-deep: #ea580c; --amber: #fde047; --amber-deep: #facc15;
  --cyan-rgb: 251, 146, 60; --cyan-deep-rgb: 234, 88, 12;
  --amber-rgb: 253, 224, 71; --amber-deep-rgb: 250, 204, 21;
}
html[data-theme="ice-blue"] {
  --bg: #050a0f; --bg-2: #0a141c; --panel: #0a141c; --panel-2: #0a141c;
  --ink: #e5f4fb; --muted: #9ac5d9; --faint: #5c8aa3;
  --cyan: #38bdf8; --cyan-deep: #0284c7; --amber: #93c5fd; --amber-deep: #60a5fa;
  --cyan-rgb: 56, 189, 248; --cyan-deep-rgb: 2, 132, 199;
  --amber-rgb: 147, 197, 253; --amber-deep-rgb: 96, 165, 250;
}
html[data-theme="neon-tokyo"] {
  --bg: #08020e; --bg-2: #100518; --panel: #100518; --panel-2: #100518;
  --ink: #f3e9fc; --muted: #c9a3e0; --faint: #8a5cb0;
  --cyan: #22d3ee; --cyan-deep: #0891b2; --amber: #f472b6; --amber-deep: #ec4899;
  --cyan-rgb: 34, 211, 238; --cyan-deep-rgb: 8, 145, 178;
  --amber-rgb: 244, 114, 182; --amber-deep-rgb: 236, 72, 153;
}
html[data-theme="autumn-maple"] {
  --bg: #120704; --bg-2: #1c0f08; --panel: #1c0f08; --panel-2: #1c0f08;
  --ink: #fbeee5; --muted: #d9ab8f; --faint: #a36f52;
  --cyan: #f97316; --cyan-deep: #c2410c; --amber: #dc2626; --amber-deep: #b91c1c;
  --cyan-rgb: 249, 115, 22; --cyan-deep-rgb: 194, 65, 12;
  --amber-rgb: 220, 38, 38; --amber-deep-rgb: 185, 28, 28;
}
html[data-theme="galaxy-indigo"] {
  --bg: #07050f; --bg-2: #0d0a1a; --panel: #0d0a1a; --panel-2: #0d0a1a;
  --ink: #e9e7fb; --muted: #a8a3d9; --faint: #6a63a3;
  --cyan: #6366f1; --cyan-deep: #4338ca; --amber: #e879f9; --amber-deep: #d946ef;
  --cyan-rgb: 99, 102, 241; --cyan-deep-rgb: 67, 56, 202;
  --amber-rgb: 232, 121, 249; --amber-deep-rgb: 217, 70, 239;
}