/* GetSet ConvertAll — matches the GetSet Tools family:
   IBM Plex Sans, violet accent, zinc palette, light/dark, ad-ready layout. */
:root {
  --bg-primary: #09090B;
  --bg-secondary: #141416;
  --bg-tertiary: #1F1F23;
  --header-bg: rgba(20, 20, 22, 0.85);
  --border-color: #27272A;
  --border-hover: #3F3F46;
  --text-primary: #FAFAFA;
  --text-secondary: #A1A1AA;
  --accent: #8B5CF6;
  --accent-hover: #7C3AED;
  --on-accent: #ffffff;
  --success: #10B981;
  --danger: #EF4444;
  --shadow: rgba(0, 0, 0, 0.7);
  --card-bg: #141416;
  --sidebar-width: 300px;
  --ad-side-width: 160px;
  --radius: 10px;
  --font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
[data-theme="light"] {
  --bg-primary: #FAFAFA;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F4F4F5;
  --header-bg: rgba(255, 255, 255, 0.85);
  --border-color: #E4E4E7;
  --border-hover: #D4D4D8;
  --text-primary: #09090B;
  --text-secondary: #71717A;
  --accent-hover: #6D28D9;
  --shadow: rgba(9, 9, 11, 0.05);
  --card-bg: #FFFFFF;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); background: var(--bg-primary); color: var(--text-primary);
  line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh;
  display: flex; flex-direction: column; transition: background 0.2s, color 0.2s;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* header */
.header {
  position: sticky; top: 0; z-index: 60; background: var(--header-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
}
.header-container { max-width: 1600px; margin: 0 auto; height: 60px; padding: 0 20px; display: flex; align-items: center; gap: 12px; }
.logo { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.logo .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--mono); }
.logo .logo-suffix { color: var(--accent); }
.header .spacer { flex: 1; }
.header nav { display: flex; gap: 2px; margin-left: 8px; }
.nav-btn { border: none; background: transparent; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; padding: 8px 12px; border-radius: 8px; transition: 0.15s; }
.nav-btn:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.privacy-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(16, 185, 129, 0.35); color: var(--success); background: rgba(16, 185, 129, 0.08); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.privacy-pill svg { width: 14px; height: 14px; }
.icon-toggle { width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; }
.icon-toggle:hover { color: var(--accent); border-color: var(--border-hover); }
.icon-toggle svg { width: 18px; height: 18px; }
.history-badge { position: absolute; top: -5px; right: -5px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }

/* cross-tool "Tools" dropdown (shared across every GetSet tool) */
.tools-menu { position: relative; }
.tools-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 9px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font-size: 0.88rem; font-weight: 600; }
.tools-btn:hover { border-color: var(--border-hover); }
.tools-btn svg { width: 15px; height: 15px; }
.tools-btn .chev { width: 13px; height: 13px; transition: transform 0.18s; }
.tools-menu.open .tools-btn .chev { transform: rotate(180deg); }
.tools-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; width: 344px; max-width: calc(100vw - 32px); z-index: 80;
  background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px;
  padding: 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden;
  transform: translateY(-6px); transition: 0.16s;
}
.tools-menu.open .tools-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.tools-dropdown a { display: flex; flex-direction: column; padding: 9px 12px; border-radius: 8px; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); }
.tools-dropdown a small { color: var(--text-secondary); font-weight: 400; font-size: 0.72rem; margin-top: 2px; }
.tools-dropdown a:hover { background: var(--bg-tertiary); }
.tools-dropdown a.current { color: var(--accent); }
.tools-dropdown a.current::after { content: '●'; margin-left: auto; }
.tools-dropdown .all { border-top: 1px solid var(--border-color); margin-top: 4px; padding-top: 4px; }
.tools-dropdown .all a { flex-direction: row; align-items: center; color: var(--accent); }
@media (max-width: 760px) { .header nav, .privacy-pill { display: none; } }


/* app layout: [side ad] [main] [sidebar] */
.app-layout { display: flex; flex-direction: row; flex-grow: 1; width: 100%; max-width: 1600px; margin: 0 auto; }
.main { flex-grow: 1; min-width: 0; padding: 0 24px 40px; }
@media (max-width: 900px) { .main { padding: 0 16px 30px; } }

/* hero */
.hero { padding: 32px 0 18px; }
.hero .eyebrow { color: var(--accent); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -0.02em; margin: 8px 0 8px; }
.hero p { color: var(--text-secondary); font-size: clamp(15px, 1.6vw, 17px); max-width: 640px; margin: 0; }

/* generator tabs (category tabs use compat utility classes from app.js) */
.gen-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 20px; overflow-x: auto; }
.gen-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 9px;
  border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-secondary);
  font-weight: 600; font-size: 0.88rem; transition: 0.15s;
}
.gen-tab:hover { color: var(--text-primary); border-color: var(--border-hover); }
.gen-tab.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.gen-tab svg { width: 16px; height: 16px; }

/* generic card */
.card { border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--card-bg); padding: 20px; }

/* drop zone */
.drop {
  border: 1.5px dashed var(--border-color); border-radius: var(--radius); background: var(--bg-secondary);
  padding: 40px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center; cursor: pointer; transition: 0.15s; min-height: 180px;
}
.drop:hover, .drop.over, .drop.border-brand-accent { border-color: var(--accent); background: var(--bg-tertiary); }
.drop svg { width: 34px; height: 34px; color: var(--accent); margin-bottom: 6px; }
.drop strong { font-size: 1rem; }
.drop span { color: var(--text-secondary); font-size: 0.82rem; }
.hint { color: var(--text-secondary); font-size: 0.75rem; }

.cta {
  width: 100%; border: none; border-radius: 9px; background: var(--accent); color: var(--on-accent);
  font-weight: 700; font-size: 0.95rem; padding: 12px 16px; transition: 0.15s;
}
.cta:hover:not(:disabled) { background: var(--accent-hover); }
.cta:disabled { opacity: 0.45; cursor: not-allowed; }
.chip-btn { border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-secondary); border-radius: 8px; padding: 10px 16px; font-size: 0.82rem; font-weight: 600; }
.chip-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn { border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); border-radius: 7px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; flex-shrink: 0; }
.icon-btn:hover { color: var(--accent); border-color: var(--border-hover); }

/* files queue + config */
.files-block { margin-top: 18px; border-top: 1px solid var(--border-color); padding-top: 18px; }
.files-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 0.85rem; }
.count-badge { background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 1px 9px; border-radius: 999px; }
.files-list { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; padding-right: 4px; }
.config-row { margin-top: 16px; padding: 14px; border-radius: 9px; background: var(--bg-tertiary); border: 1px solid var(--border-color); display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; }
.config-selects { display: flex; align-items: flex-end; gap: 10px; }
.sel-col { display: flex; flex-direction: column; }
.sel-label { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); font-weight: 700; margin-bottom: 5px; }
.config-row select { min-width: 120px; width: auto; }
.swap-btn { margin-bottom: 3px; }
.convert-cta { width: auto; background: var(--success); padding: 11px 22px; }
.convert-cta:hover:not(:disabled) { background: #0da673; }

/* progress */
.progress-block { margin-top: 18px; border-top: 1px solid var(--border-color); padding-top: 16px; }
.progress-top, .progress-bottom { display: flex; align-items: center; justify-content: space-between; color: var(--text-secondary); font-size: 0.76rem; margin-bottom: 7px; }
.progress-bottom { margin: 7px 0 0; font-size: 0.68rem; }
.progress-track { width: 100%; background: var(--bg-tertiary); border-radius: 999px; height: 8px; overflow: hidden; }
.progress-fill { background: var(--success); height: 100%; width: 0; transition: width 0.3s; }

/* results */
.results-block { margin-top: 18px; border-top: 1px solid var(--border-color); padding-top: 16px; }
.results-head { display: flex; align-items: center; gap: 8px; color: var(--success); font-size: 0.9rem; margin: 0 0 12px; }
.results-list { display: flex; flex-direction: column; gap: 10px; }
.results-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }

/* inputs */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 3px; background: var(--bg-tertiary); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 2px solid var(--bg-secondary); box-shadow: 0 1px 4px var(--shadow); }
input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--accent); cursor: pointer; border: none; }
input[type="text"], input[type="number"], input[type="email"], input[type="url"], select, textarea { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font-size: 0.82rem; font-family: var(--font); }
select { width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }
input[type="color"] { padding: 0; border: 1px solid var(--border-color); border-radius: 7px; background: var(--bg-primary); cursor: pointer; }
input[type="file"] { color: var(--text-secondary); font-size: 0.8rem; }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; border-radius: 8px; border: none; background: var(--accent); color: var(--on-accent); font-size: 0.78rem; font-weight: 600; font-family: var(--font); cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: var(--accent-hover); }

/* right sidebar */
.sidebar-right { width: var(--sidebar-width); flex-shrink: 0; padding: 20px 20px 40px 0; }
.sb-section { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.sb-title { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 12px; }
.sb-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-primary); margin-bottom: 8px; font-size: 0.85rem; font-weight: 600; transition: 0.15s; }
.sb-link:hover { border-color: var(--accent); color: var(--accent); }
.sb-link small { display: block; color: var(--text-secondary); font-weight: 400; font-size: 0.72rem; margin-top: 2px; }
.sb-btn { width: 100%; flex-direction: column; align-items: flex-start; text-align: left; color: var(--text-primary); }
.clear-btn { border: none; background: transparent; color: var(--danger); font-size: 0.74rem; font-weight: 600; padding: 0; text-transform: none; letter-spacing: 0; }
.clear-btn:hover { text-decoration: underline; }
.history-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
/* on narrow screens keep the sidebar (mini-tools & history) below the main column */
@media (max-width: 1080px) {
  .app-layout { flex-direction: column; }
  .sidebar-right { width: 100%; padding: 0 16px 30px; }
}

/* seo */
.seo { margin-top: 32px; }
.seo h2 { font-size: 1.3rem; font-weight: 700; margin: 30px 0 14px; }
.seo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.seo-card { border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--bg-secondary); padding: 18px; }
.seo-card h3 { margin: 0 0 6px; font-size: 1rem; }
.seo-card p { margin: 0; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.55; }
.faq details { border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-secondary); padding: 2px 16px; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 13px 0; font-weight: 600; }
.faq p { color: var(--text-secondary); font-size: 0.88rem; margin: 0 0 12px; }

footer { border-top: 1px solid var(--border-color); padding: 24px 20px; text-align: center; color: var(--text-secondary); font-size: 0.82rem; }
footer a { color: var(--accent); }
.footer-link { border: none; background: transparent; color: var(--accent); font-size: 0.82rem; padding: 0; }
.footer-link:hover { text-decoration: underline; }

/* shell toast (GS.toast) + family toasts from js/utils/toast.js */
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--success); color: #fff; font-weight: 700; padding: 11px 20px; border-radius: 10px; opacity: 0; pointer-events: none; transition: 0.25s; z-index: 100; font-size: 0.88rem; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.gs-toasts { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 360px; width: calc(100vw - 40px); }
.gs-toast { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font-size: 0.85rem; font-weight: 500; box-shadow: 0 8px 24px var(--shadow); transition: opacity 0.3s, transform 0.3s; }
.gs-toast.success { border-color: rgba(16, 185, 129, 0.4); color: var(--success); }
.gs-toast.error { border-color: rgba(239, 68, 68, 0.4); color: var(--danger); }
.gs-toast.warning { border-color: rgba(234, 179, 8, 0.4); color: #eab308; }
.gs-toast.info { border-color: var(--border-hover); }

/* mini-tool modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(9, 9, 11, 0.7); backdrop-filter: blur(4px); z-index: 999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: var(--bg-secondary); color: var(--text-primary); border-radius: 14px; border: 1px solid var(--border-color); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); max-width: 672px; width: 100%; overflow: hidden; display: flex; flex-direction: column; max-height: 85vh; transition: transform 0.2s, opacity 0.2s; }
.modal-head { padding: 14px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; background: var(--bg-tertiary); }
.modal-head-left { display: flex; align-items: center; gap: 10px; }
.modal-title { font-weight: 700; font-size: 1rem; margin: 0; }
.modal-body { padding: 20px 22px; overflow-y: auto; flex-grow: 1; font-size: 0.875rem; }
.modal-body input[type="text"], .modal-body input[type="number"], .modal-body input[type="email"], .modal-body input[type="url"], .modal-body textarea { width: 100%; }

.tools-dropdown { max-height: min(80vh, 640px); overflow: auto; }

/* mobile: pin dropdown to the viewport so it never clips off-screen */
@media (max-width: 480px) {
  .tools-dropdown { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; max-width: none; }
}

/* ================= compat layer (generated by gen-compat.mjs) =================
   Styles the utility classes emitted by js/app.js & js/policies.js dynamic HTML. */
@keyframes caPulse { 0%,100% { opacity:1; } 50% { opacity:0.45; } }
@keyframes caSpin { to { transform:rotate(360deg); } }
@keyframes caFadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.absolute { position:absolute; }
.accent-brand-accent { accent-color:var(--accent); }
.animate-fade-in { animation:caFadeIn 0.25s ease-out; }
.animate-pulse { animation:caPulse 1.6s ease-in-out infinite; }
.animate-spin { animation:caSpin 0.9s linear infinite; }
.appearance-none { appearance:none;-webkit-appearance:none; }
.aspect-square { aspect-ratio:1/1; }
.bg-blue-500\/10 { background-color:rgba(59, 130, 246, 0.10); }
.bg-brand-accent { background-color:var(--accent); }
.bg-brand-accent\/10 { background-color:color-mix(in srgb, var(--accent) 10%, transparent); }
.bg-brand-accent\/20 { background-color:color-mix(in srgb, var(--accent) 20%, transparent); }
.bg-brand-accent\/5 { background-color:color-mix(in srgb, var(--accent) 5%, transparent); }
.bg-emerald-500 { background-color:#10b981; }
.bg-emerald-500\/10 { background-color:rgba(16, 185, 129, 0.10); }
.bg-emerald-500\/5 { background-color:rgba(16, 185, 129, 0.05); }
.bg-rose-500\/10 { background-color:rgba(244, 63, 94, 0.10); }
.bg-slate-100 { background-color:#f4f4f5; }
.bg-slate-200 { background-color:#e4e4e7; }
.bg-slate-200\/20 { background-color:rgba(228, 228, 231, 0.20); }
.bg-slate-200\/30 { background-color:rgba(228, 228, 231, 0.30); }
.bg-slate-200\/50 { background-color:rgba(228, 228, 231, 0.50); }
.bg-slate-50 { background-color:#fafafa; }
.bg-slate-55 { background-color:#f8f8f9; }
.bg-slate-700 { background-color:#3f3f46; }
.bg-slate-800 { background-color:#27272a; }
.bg-slate-900\/10 { background-color:rgba(24, 24, 27, 0.10); }
.bg-slate-950\/10 { background-color:rgba(9, 9, 11, 0.10); }
.bg-slate-950\/40 { background-color:rgba(9, 9, 11, 0.40); }
.bg-slate-950\/70 { background-color:rgba(9, 9, 11, 0.70); }
.bg-slate-950\/80 { background-color:rgba(9, 9, 11, 0.80); }
.bg-transparent { background-color:transparent; }
.bg-white { background-color:#ffffff; }
.block { display:block; }
.border { border:1px solid var(--border-color); }
.border-2 { border-width:2px;border-style:solid; }
.border-b { border-bottom:1px solid var(--border-color); }
.border-b-2 { border-bottom-width:2px;border-bottom-style:solid; }
.border-blue-500\/20 { border-color:rgba(59, 130, 246, 0.20); }
.border-blue-500\/25 { border-color:rgba(59, 130, 246, 0.25); }
.border-blue-500\/30 { border-color:rgba(59, 130, 246, 0.30); }
.border-brand-accent { border-color:var(--accent); }
.border-brand-accent\/30 { border-color:color-mix(in srgb, var(--accent) 30%, transparent); }
.border-brand-borderLight { border-color:var(--border-color); }
.border-emerald-500\/20 { border-color:rgba(16, 185, 129, 0.20); }
.border-emerald-500\/30 { border-color:rgba(16, 185, 129, 0.30); }
.border-rose-500\/30 { border-color:rgba(244, 63, 94, 0.30); }
.border-slate-200 { border-color:#e4e4e7; }
.border-slate-300 { border-color:#d4d4d8; }
.col-span-3 { grid-column:span 3 / span 3; }
.col-span-full { grid-column:1 / -1; }
.cursor-pointer { cursor:pointer; }
body[data-theme="dark"] .dark\:bg-slate-700 { background-color:#3f3f46; }
body[data-theme="dark"] .dark\:bg-slate-800 { background-color:#27272a; }
body[data-theme="dark"] .dark\:bg-slate-800\/20 { background-color:rgba(39, 39, 42, 0.20); }
body[data-theme="dark"] .dark\:bg-slate-800\/30 { background-color:rgba(39, 39, 42, 0.30); }
body[data-theme="dark"] .dark\:bg-slate-800\/50 { background-color:rgba(39, 39, 42, 0.50); }
body[data-theme="dark"] .dark\:bg-slate-900 { background-color:#18181b; }
body[data-theme="dark"] .dark\:bg-slate-900\/30 { background-color:rgba(24, 24, 27, 0.30); }
body[data-theme="dark"] .dark\:bg-slate-950 { background-color:#09090b; }
body[data-theme="dark"] .dark\:border-brand-borderDark { border-color:var(--border-color); }
body[data-theme="dark"] .dark\:border-slate-700 { border-color:#3f3f46; }
body[data-theme="dark"] .dark\:border-slate-800 { border-color:#27272a; }
body[data-theme="dark"] .dark\:hover\:bg-red-500:hover { background-color:#ef4444; }
body[data-theme="dark"] .dark\:hover\:bg-slate-600:hover { background-color:#52525b; }
body[data-theme="dark"] .dark\:hover\:bg-slate-700:hover { background-color:#3f3f46; }
body[data-theme="dark"] .dark\:hover\:bg-slate-700\/50:hover { background-color:rgba(63, 63, 70, 0.50); }
body[data-theme="dark"] .dark\:hover\:text-slate-200:hover { color:#e4e4e7; }
body[data-theme="dark"] .dark\:text-blue-400 { color:#60a5fa; }
body[data-theme="dark"] .dark\:text-red-400 { color:#f87171; }
body[data-theme="dark"] .dark\:text-slate-100 { color:#f4f4f5; }
body[data-theme="dark"] .dark\:text-slate-200 { color:#e4e4e7; }
body[data-theme="dark"] .dark\:text-slate-300 { color:#d4d4d8; }
body[data-theme="dark"] .dark\:text-slate-350 { color:#bcbcc2; }
body[data-theme="dark"] .dark\:text-slate-400 { color:#a1a1aa; }
body[data-theme="dark"] .dark\:text-slate-450 { color:#8b8b94; }
body[data-theme="dark"] .dark\:text-white { color:#ffffff; }
body[data-theme="dark"] .dark\:text-yellow-450 { color:#f2c40e; }
.disabled\:hover\:bg-slate-200:disabled:hover { background-color:#e4e4e7; }
.disabled\:opacity-40:disabled { opacity:0.4; }
.duration-150 { transition-duration:150ms; }
.file\:bg-brand-accent::file-selector-button { background-color:var(--accent); }
.file\:border-0::file-selector-button { border:0; }
.file\:font-semibold::file-selector-button { font-weight:600; }
.file\:mr-4::file-selector-button { margin-right:16px; }
.file\:px-4::file-selector-button { padding-left:16px;padding-right:16px; }
.file\:py-2::file-selector-button { padding-top:8px;padding-bottom:8px; }
.file\:rounded-lg::file-selector-button { border-radius:8px; }
.file\:text-white::file-selector-button { color:#ffffff; }
.file\:text-xs::file-selector-button { font-size:0.75rem;line-height:1.35; }
.flex { display:flex; }
.flex-col { flex-direction:column; }
.flex-grow { flex-grow:1; }
.flex-shrink-0 { flex-shrink:0; }
.flex-wrap { flex-wrap:wrap; }
.focus\:border-brand-accent:focus { border-color:var(--accent); }
.font-bold { font-weight:700; }
.font-mono { font-family:var(--mono); }
.font-sans { font-family:var(--font); }
.font-semibold { font-weight:600; }
.gap-0\.5 { gap:2px; }
.gap-1 { gap:4px; }
.gap-1\.5 { gap:6px; }
.gap-2 { gap:8px; }
.gap-2\.5 { gap:10px; }
.gap-3 { gap:12px; }
.gap-4 { gap:16px; }
.grid { display:grid; }
.grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.group:hover .group-hover\:opacity-100 { opacity:1; }
.h-1\.5 { height:6px; }
.h-16 { height:64px; }
.h-24 { height:96px; }
.h-28 { height:112px; }
.h-3 { height:12px; }
.h-3\.5 { height:14px; }
.h-32 { height:128px; }
.h-4 { height:16px; }
.h-5 { height:20px; }
.h-6 { height:24px; }
.h-full { height:100%; }
.hidden { display:none !important; }
.hover\:bg-emerald-600:hover { background-color:#059669; }
.hover\:bg-red-500:hover { background-color:#ef4444; }
.hover\:bg-slate-300:hover { background-color:#d4d4d8; }
.hover\:bg-slate-300\/50:hover { background-color:rgba(212, 212, 216, 0.50); }
.hover\:file\:opacity-95:hover::file-selector-button { opacity:0.95; }
.hover\:opacity-95:hover { opacity:0.95; }
.hover\:text-red-400:hover { color:#f87171; }
.hover\:text-slate-700:hover { color:#3f3f46; }
.hover\:text-white:hover { color:#ffffff; }
.inset-0 { inset:0; }
.italic { font-style:italic; }
.items-center { align-items:center; }
.items-start { align-items:flex-start; }
.justify-between { justify-content:space-between; }
.justify-center { justify-content:center; }
.leading-relaxed { line-height:1.625; }
.left-1\.5 { left:6px; }
.max-h-48 { max-height:192px; }
.max-h-60 { max-height:240px; }
.max-h-full { max-height:100%; }
.max-w-full { max-width:100%; }
.mb-1 { margin-bottom:4px; }
.mt-0\.5 { margin-top:2px; }
.mt-1 { margin-top:4px; }
.mt-1\.5 { margin-top:6px; }
.mt-2 { margin-top:8px; }
.mt-4 { margin-top:16px; }
.object-contain { object-fit:contain; }
.object-cover { object-fit:cover; }
.opacity-0 { opacity:0; }
.outline-none { outline:none; }
.overflow-hidden { overflow:hidden; }
.overflow-y-auto { overflow-y:auto; }
.p-1 { padding:4px; }
.p-2 { padding:8px; }
.p-2\.5 { padding:10px; }
.p-3 { padding:12px; }
.p-4 { padding:16px; }
.pr-1 { padding-right:4px; }
.pr-2 { padding-right:8px; }
.px-1 { padding-left:4px;padding-right:4px; }
.px-1\.5 { padding-left:6px;padding-right:6px; }
.px-2 { padding-left:8px;padding-right:8px; }
.px-3 { padding-left:12px;padding-right:12px; }
.px-4 { padding-left:16px;padding-right:16px; }
.py-0\.5 { padding-top:2px;padding-bottom:2px; }
.py-1 { padding-top:4px;padding-bottom:4px; }
.py-1\.5 { padding-top:6px;padding-bottom:6px; }
.py-2 { padding-top:8px;padding-bottom:8px; }
.py-2\.5 { padding-top:10px;padding-bottom:10px; }
.py-4 { padding-top:16px;padding-bottom:16px; }
.py-6 { padding-top:24px;padding-bottom:24px; }
.relative { position:relative; }
.resize-none { resize:none; }
.rounded { border-radius:4px; }
.rounded-2xl { border-radius:14px; }
.rounded-full { border-radius:9999px; }
.rounded-lg { border-radius:8px; }
.rounded-md { border-radius:6px; }
.rounded-xl { border-radius:10px; }
.scale-95 { transform:scale(0.95); }
.scale-\[1\.01\] { transform:scale(1.01); }
.select-all { user-select:all; }
.select-none { user-select:none; }
.shadow-inner { box-shadow:inset 0 2px 4px var(--shadow); }
.shadow-md { box-shadow:0 4px 8px var(--shadow); }
.shadow-sm { box-shadow:0 1px 2px var(--shadow); }
.shrink-0 { flex-shrink:0; }
.text-\[10px\] { font-size:10px;line-height:1.4; }
.text-\[11px\] { font-size:11px;line-height:1.4; }
.text-\[8px\] { font-size:8px;line-height:1.4; }
.text-\[9px\] { font-size:9px;line-height:1.4; }
.text-base { font-size:1rem; }
.text-blue-400 { color:#60a5fa; }
.text-blue-500 { color:#3b82f6; }
.text-brand-accent { color:var(--accent); }
.text-brand-success { color:var(--success); }
.text-center { text-align:center; }
.text-cyan-400 { color:#22d3ee; }
.text-emerald-400 { color:#34d399; }
.text-emerald-500\/70 { color:rgba(16, 185, 129, 0.70); }
.text-orange-400 { color:#fb923c; }
.text-purple-400 { color:#c084fc; }
.text-red-400 { color:#f87171; }
.text-red-500 { color:#ef4444; }
.text-rose-400 { color:#fb7185; }
.text-slate-350 { color:#bcbcc2; }
.text-slate-400 { color:#a1a1aa; }
.text-slate-500 { color:#71717a; }
.text-slate-550 { color:#62626b; }
.text-slate-600 { color:#52525b; }
.text-slate-800 { color:#27272a; }
.text-sm { font-size:0.875rem;line-height:1.45; }
.text-teal-400 { color:#2dd4bf; }
.text-white { color:#ffffff; }
.text-xs { font-size:0.75rem;line-height:1.35; }
.text-yellow-400 { color:#facc15; }
.text-yellow-500 { color:#eab308; }
.top-1\.5 { top:6px; }
.tracking-wider { letter-spacing:0.05em; }
.transition-all { transition:all 0.2s; }
.transition-colors { transition:color 0.15s, background-color 0.15s, border-color 0.15s; }
.transition-opacity { transition:opacity 0.2s; }
.translate-y-2 { transform:translateY(8px); }
.truncate { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.uppercase { text-transform:uppercase; }
.w-0 { width:0; }
.w-16 { width:64px; }
.w-3 { width:12px; }
.w-3\.5 { width:14px; }
.w-32 { width:128px; }
.w-4 { width:16px; }
.w-5 { width:20px; }
.w-6 { width:24px; }
.w-full { width:100%; }
.whitespace-nowrap { white-space:nowrap; }
@media (min-width: 640px) {
.sm\:flex-row { flex-direction:row; }
.sm\:grid-cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.sm\:w-auto { width:auto; }
}

/* manual extras */
.border-t-transparent { border-top-color: transparent; }