:root {
  --bg: #070707;
  --panel: #101010;
  --panel-soft: #171717;
  --panel-glow: rgba(212, 168, 63, 0.12);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(212, 168, 63, 0.35);
  --text: #f5f1e8;
  --muted: #aaa196;
  --gold: #d4a83f;
  --gold-strong: #f0cf74;
  --danger: #ff7b7b;
  --success: #8ee6a6;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -15%, rgba(212,168,63,.16), transparent 34rem), linear-gradient(180deg, #090909, #050505 45rem); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.converter-shell { min-height: 100vh; }
.topbar { min-height: 64px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 clamp(1rem, 4vw, 3rem); background: rgba(7,7,7,.88); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; }
.brand { font-family: Georgia, serif; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.brand span { color: var(--gold); }
.topbar nav { display: flex; gap: 1rem; color: var(--muted); font-size: .92rem; }
.topbar nav a:hover { color: var(--gold); }
main { width: min(1240px, calc(100% - 2rem)); margin: 0 auto; padding: 3.4rem 0 4rem; }
.hero { text-align: center; margin: 0 auto 2rem; max-width: 830px; }
.eyebrow, .side-label { color: var(--gold); letter-spacing: .18em; text-transform: uppercase; font-size: .76rem; font-weight: 900; margin: 0 0 .65rem; }
h1 { font-family: Georgia, serif; font-size: clamp(2.7rem, 8vw, 5.8rem); line-height: .95; margin: 0; letter-spacing: -.04em; }
.hero-copy { color: var(--muted); font-size: 1.08rem; line-height: 1.7; margin: 1.1rem auto 0; max-width: 720px; }
.converter-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1rem; align-items: start; }
.tool-sidebar, .work-card, .roadmap-grid article { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); box-shadow: 0 24px 80px rgba(0,0,0,.35); border-radius: 22px; }
.tool-sidebar { padding: 1rem; position: sticky; top: 82px; }
.tool-tabs { display: grid; gap: .7rem; }
.tool-tab { width: 100%; text-align: left; color: var(--muted); background: #0b0b0b; border: 1px solid var(--line); border-radius: 14px; padding: .85rem .9rem; display: grid; gap: .2rem; }
.tool-tab span { color: var(--text); font-weight: 850; }
.tool-tab small { color: var(--muted); }
.tool-tab:hover, .tool-tab.active { border-color: var(--line-strong); background: rgba(212,168,63,.12); }
.tool-tab.active span { color: var(--gold-strong); }
.privacy-card { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; color: var(--muted); line-height: 1.55; }
.privacy-card strong { color: var(--text); }
.privacy-card p { margin: .45rem 0 0; }
.work-card { padding: clamp(1rem, 3vw, 2rem); }
.module-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.module-head h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.8rem, 4vw, 3rem); }
.module-head p:not(.eyebrow) { color: var(--muted); line-height: 1.6; margin: .6rem 0 0; }
.drop-zone { border: 1px dashed rgba(212,168,63,.5); border-radius: 18px; background: var(--panel-glow); min-height: 180px; display: grid; place-items: center; text-align: center; transition: .2s ease; padding: 1.6rem; }
.drop-zone:hover, .drop-zone.is-dragging { border-color: var(--gold); background: rgba(212,168,63,.22); transform: translateY(-1px); }
.drop-zone[data-disabled="true"] {
  cursor: not-allowed;
  opacity: .78;
}
.drop-zone[data-disabled="true"]:hover {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.035);
  transform: none;
}
.drop-icon { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; margin: 0 auto .85rem; border: 1px solid rgba(212,168,63,.7); color: var(--gold); font-size: 1.6rem; }
.drop-zone h3 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.4rem, 3vw, 2.15rem); }
.drop-zone p { margin: .5rem auto 0; color: var(--muted); max-width: 620px; }
.file-list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .55rem; }
.file-list li { display: flex; justify-content: space-between; gap: 1rem; border: 1px solid var(--line); background: #0a0a0a; border-radius: 12px; padding: .75rem .85rem; }
.file-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list small { color: var(--muted); white-space: nowrap; }
.tool-mount { min-height: 160px; }
.module-panel { border: 1px solid var(--line); background: rgba(0,0,0,.22); border-radius: 18px; padding: 1rem; }
.grid-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.grid-controls.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.control { display: flex; flex-direction: column; gap: .5rem; }
.control.full { grid-column: 1 / -1; }
label { color: var(--muted); font-size: .9rem; }
select, input[type="number"], input[type="text"], textarea { width: 100%; background: #090909; color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; outline: none; }
textarea { min-height: 190px; resize: vertical; line-height: 1.55; }
select:focus, input:focus, textarea:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px rgba(212,168,63,.11); }
input[type="range"] { accent-color: var(--gold); }
.button-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.action-button, .secondary-button { border: 0; border-radius: 14px; padding: .95rem 1.15rem; font-weight: 900; letter-spacing: .05em; }
.action-button { background: linear-gradient(135deg, #f0cf74, #b9841f); color: #111; }
.secondary-button { background: #151515; color: var(--text); border: 1px solid var(--line); }
.action-button:disabled, .secondary-button:disabled { opacity: .45; cursor: not-allowed; }
.status { color: var(--muted); margin: 1rem 0 0; }
.status[data-type="error"] { color: var(--danger); }
.status[data-type="success"] { color: var(--success); }
.error-box { color: var(--danger); border: 1px solid rgba(255,123,123,.35); background: rgba(255,123,123,.08); padding: 1rem; border-radius: 14px; }
.result-box { margin-top: 1rem; border: 1px solid var(--line); border-radius: 16px; background: #080808; padding: 1rem; max-height: 420px; overflow: auto; white-space: pre-wrap; color: #e9e1d5; }
.result-box h3 { margin-top: 0; color: var(--gold); font-family: Georgia, serif; }
.preview-image { display: block; max-width: 100%; max-height: 420px; margin-top: 1rem; border-radius: 16px; border: 1px solid var(--line); }
.module-loading { display: grid; place-items: center; min-height: 160px; color: var(--muted); gap: .7rem; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--gold); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.roadmap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.roadmap-grid article { padding: 1.25rem; }
.roadmap-grid h3 { margin: 0 0 .5rem; color: var(--gold); font-family: Georgia, serif; }
.roadmap-grid p { margin: 0; color: var(--muted); line-height: 1.6; }
.badge-list { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.badge { border: 1px solid var(--line); background: #0a0a0a; border-radius: 999px; padding: .35rem .6rem; color: var(--muted); font-size: .84rem; }
.check-list { margin: 1rem 0 0; color: var(--muted); line-height: 1.75; }
@media (max-width: 900px) {
  .converter-layout, .roadmap-grid, .grid-controls, .grid-controls.two { grid-template-columns: 1fr; }
  .tool-sidebar { position: static; }
  .tool-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .topbar { align-items: flex-start; height: auto; flex-direction: column; padding-top: 1rem; padding-bottom: 1rem; }
  main { padding-top: 2rem; }
  .tool-tabs { grid-template-columns: 1fr; }
  .file-list li { display: grid; }
  .file-list small { white-space: normal; }
}


.notice-box, .module-subpanel {
  border: 1px solid var(--line);
  background: rgba(212, 168, 63, 0.08);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.notice-box strong { color: var(--gold-strong); }
.notice-box p, .module-hint { color: var(--muted); line-height: 1.65; margin: .45rem 0 0; }
.module-subpanel { margin-top: 1rem; background: rgba(255,255,255,.025); }
.progress-wrap { display: flex; gap: .8rem; align-items: center; margin-top: 1rem; color: var(--muted); }
.progress-wrap progress { flex: 1; width: 100%; height: 14px; accent-color: var(--gold); }
.media-log { font-size: .82rem; max-height: 260px; white-space: pre-wrap; }

.device-card, .size-advice {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.026);
  border-radius: 16px;
  padding: 1rem;
  margin-top: 1rem;
  color: var(--muted);
  line-height: 1.55;
}
.device-card strong, .size-advice strong { color: var(--gold-strong); display: block; }
.device-card p, .size-advice p { margin: .45rem 0 0; }
.device-card small, .size-advice small { display: block; margin-top: .45rem; color: var(--muted); font-size: .82rem; }
.size-advice { background: rgba(212,168,63,.075); }
.size-advice[data-level="ok"] { border-color: rgba(142,230,166,.35); background: rgba(142,230,166,.075); }
.size-advice[data-level="ok"] strong { color: var(--success); }
.size-advice[data-level="warn"] { border-color: rgba(240,207,116,.55); background: rgba(240,207,116,.09); }
.size-advice[data-level="danger"] { border-color: rgba(255,123,123,.45); background: rgba(255,123,123,.09); }
.size-advice[data-level="danger"] strong { color: var(--danger); }
.media-device-box {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .85rem 1rem;
  background: rgba(0,0,0,.22);
  color: var(--muted);
  line-height: 1.55;
  margin: .8rem 0 0;
}
.media-device-box strong { color: var(--gold-strong); }
.media-device-box[data-level="warn"] { border-color: rgba(240,207,116,.55); background: rgba(240,207,116,.08); }
.media-device-box[data-level="danger"] { border-color: rgba(255,123,123,.45); background: rgba(255,123,123,.08); }
.media-device-box[data-level="danger"] strong { color: var(--danger); }

.history-panel {
  margin-top: 1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
  padding: 1rem;
}
.history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.history-head strong { color: var(--gold-strong); }
.secondary-button.tiny { padding: .45rem .75rem; font-size: .82rem; }
.queue-list {
  display: grid;
  gap: .65rem;
  margin-top: 1rem;
}
.queue-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border: 1px solid var(--line);
  background: #0b0b0b;
  border-radius: 13px;
  padding: .75rem .9rem;
}
.queue-item span { overflow-wrap: anywhere; }
.queue-item small { color: var(--muted); text-align: right; }
.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.preview-card {
  border: 1px solid var(--line);
  background: #090909;
  border-radius: 16px;
  padding: .9rem;
}
.preview-card strong { color: var(--gold-strong); }
.preview-card img {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  display: block;
  margin-top: .75rem;
  border-radius: 12px;
  background: #050505;
  border: 1px solid var(--line);
}
.compare-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1rem;
}
.stat-pill {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .75rem;
  background: rgba(212,168,63,.07);
}
.stat-pill small { display:block; color: var(--muted); margin-bottom: .25rem; }
.stat-pill strong { color: var(--gold-strong); }
@media (max-width: 760px) {
  .preview-grid, .compare-stats { grid-template-columns: 1fr; }
  .queue-item { display: grid; }
  .queue-item small { text-align: left; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.25rem;
}
.hero-link {
  border: 1px solid var(--line-strong);
  background: rgba(212,168,63,.12);
  color: var(--gold-strong);
  border-radius: 999px;
  padding: .72rem 1rem;
  font-weight: 850;
}
.hero-link.subtle {
  border-color: var(--line);
  background: rgba(255,255,255,.035);
  color: var(--text);
}
.small-card-link {
  display: inline-block;
  margin-top: .7rem;
  color: var(--gold-strong);
  font-weight: 800;
}
.error-box p { margin: .45rem 0; line-height: 1.6; color: var(--text); }
.error-box small { display: block; color: var(--muted); line-height: 1.5; }
.support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.support-card {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.025);
  border-radius: 16px;
  padding: 1rem;
}
.support-card h2, .support-card h3 { margin-top: 0; color: var(--gold-strong); font-family: Georgia, serif; }
.support-card p, .support-card li { color: var(--muted); line-height: 1.65; }
.test-pass { color: var(--success); }
.test-fail { color: var(--danger); }
.test-warn { color: var(--gold-strong); }
@media (max-width: 760px) { .support-grid { grid-template-columns: 1fr; } }

.file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
  margin: -.35rem 0 1rem;
}

.file-warnings {
  border: 1px solid rgba(240,207,116,.45);
  background: rgba(240,207,116,.08);
  color: var(--muted);
  border-radius: 14px;
  padding: .85rem 1rem;
  margin: -.35rem 0 1rem;
  line-height: 1.55;
}
.file-warnings strong { color: var(--gold-strong); display: block; margin-bottom: .35rem; }
.file-warnings ul { margin: .25rem 0 0 1.1rem; padding: 0; }
.file-warnings li { margin: .2rem 0; }
.file-remove {
  border: 1px solid rgba(255,123,123,.35);
  background: rgba(255,123,123,.08);
  color: #ffd0d0;
  border-radius: 999px;
  padding: .38rem .62rem;
  font-size: .8rem;
  font-weight: 800;
  white-space: nowrap;
}
.file-remove:hover, .danger-button:hover {
  border-color: rgba(255,123,123,.75);
  background: rgba(255,123,123,.14);
}
.danger-button { color: #ffd0d0; border-color: rgba(255,123,123,.35); }
@media (max-width: 560px) {
  .file-actions { display: grid; grid-template-columns: 1fr; }
  .file-remove { width: fit-content; }
}


.open-beta-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-left: .55rem;
  padding: .18rem .48rem;
  border: 1px solid rgba(212, 168, 63, 0.42);
  border-radius: 999px;
  background: rgba(212, 168, 63, 0.11);
  color: var(--gold-strong);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(.58rem, 1.2vw, .72rem);
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero h1 .open-beta-badge,
.module-head h2 .open-beta-badge { margin-left: .65rem; }