:root {
  color-scheme: dark;
  --bg: #090a0d;
  --panel: rgba(20, 22, 27, .92);
  --panel-2: #111318;
  --line: rgba(255,255,255,.1);
  --line-strong: rgba(255,255,255,.18);
  --text: #f7f8fb;
  --muted: #9da3ae;
  --red: #ed2538;
  --red-dark: #a50d1b;
  --red-glow: rgba(237,37,56,.35);
  --green: #45e098;
  --radius: 20px;
  --shadow: 0 26px 80px rgba(0,0,0,.42);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0; z-index: -3; background: radial-gradient(circle at 50% -10%, rgba(237,37,56,.13), transparent 40%), linear-gradient(180deg,#08090c,#0b0c10 45%,#08090b); }
body::after { content: ""; position: fixed; inset: 0; z-index: -2; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 36px 36px; mask-image: linear-gradient(to bottom, black, transparent 75%); pointer-events: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.ambient { position: fixed; border-radius: 999px; filter: blur(90px); pointer-events: none; z-index: -1; opacity: .18; }
.ambient-one { width: 420px; height: 420px; background: var(--red); top: 12%; right: -240px; }
.ambient-two { width: 320px; height: 320px; background: #5c6574; bottom: 10%; left: -220px; }

.topbar { position: sticky; top: 0; z-index: 50; height: 76px; padding: 0 clamp(20px,5vw,80px); display: flex; align-items: center; gap: 34px; background: rgba(8,9,12,.78); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.brand-mark { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg,var(--red),var(--red-dark)); box-shadow: 0 10px 28px var(--red-glow), inset 0 1px rgba(255,255,255,.25); }
.brand-mark svg { width: 28px; fill: none; stroke: white; stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; }
.brand strong,.brand small { display: block; }
.brand strong { letter-spacing: .03em; font-size: 18px; }
.brand small { color: var(--muted); font-size: 10px; margin-top: 1px; text-transform: uppercase; letter-spacing: .15em; }
.topbar nav { display: flex; gap: 28px; color: #c9cdd5; font-size: 14px; }
.topbar nav a:hover { color: white; }
.engine-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 12px; white-space: nowrap; }
.engine-pill span { width: 7px; height: 7px; border-radius: 50%; background: #f5a524; box-shadow: 0 0 12px currentColor; }
.engine-pill.online span { background: var(--green); }
.engine-pill.offline span { background: var(--red); }

main { width: min(1440px,100%); margin: 0 auto; }
.hero { min-height: 650px; padding: 88px clamp(24px,7vw,110px) 64px; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(380px,.92fr); align-items: center; gap: 50px; }
.eyebrow,.kicker { color: #d8dbe2; font-size: 11px; font-weight: 800; letter-spacing: .25em; }
.eyebrow::before,.kicker::before { content: ""; display: inline-block; width: 28px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--red); box-shadow: 0 0 12px var(--red); }
.hero h1 { margin: 20px 0 22px; font-size: clamp(46px,6.3vw,88px); line-height: .98; letter-spacing: -.055em; max-width: 850px; }
.hero h1 em { font-style: normal; color: transparent; background: linear-gradient(90deg,#fff 0,#aeb4bf 65%,#707781); -webkit-background-clip: text; background-clip: text; }
.hero-copy > p { color: var(--muted); max-width: 690px; font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; gap: 14px; margin-top: 30px; }
.primary-button,.ghost-button { min-height: 52px; border-radius: 13px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 800; border: 1px solid transparent; }
.primary-button { background: linear-gradient(180deg,#fa3347,#c51224); box-shadow: 0 15px 35px rgba(237,37,56,.28), inset 0 1px rgba(255,255,255,.25); }
.ghost-button { color: white; background: rgba(255,255,255,.04); border-color: var(--line-strong); }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #aeb4bf; font-size: 12px; }
.trust-row span::before { content: "✓"; margin-right: 6px; color: var(--green); }

.hero-visual { min-height: 470px; display: grid; place-items: center; position: relative; perspective: 800px; }
.forge-core { position: relative; width: 270px; aspect-ratio: 1; border-radius: 38px; display: grid; place-items: center; background: linear-gradient(145deg,rgba(38,41,48,.94),rgba(10,11,15,.95)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 50px 90px rgba(0,0,0,.5), inset 0 0 70px rgba(255,255,255,.035), 0 0 90px rgba(237,37,56,.15); transform: rotateY(-8deg) rotateX(5deg); overflow: hidden; }
.forge-core::before { content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.08); border-radius:30px; }
.core-icon { width: 132px; height: 132px; border-radius: 28px; display: grid; place-items: center; background: radial-gradient(circle at 35% 25%,#ff5161,#c20d20 62%,#72000c); box-shadow: 0 0 60px rgba(237,37,56,.45), inset 0 2px rgba(255,255,255,.3); }
.core-icon svg { width: 86px; fill: none; stroke: white; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.scan-line { position:absolute; left:20px; right:20px; height:2px; top:20%; background:linear-gradient(90deg,transparent,#ff2b41,transparent); box-shadow:0 0 18px #ff2b41; animation:scan 3s ease-in-out infinite; }
@keyframes scan { 0%,100%{ transform:translateY(0); opacity:0;} 15%{opacity:1;} 75%{opacity:1;} 90%{ transform:translateY(195px); opacity:0;} }
.format-orbit { position:absolute; inset:50%; width:380px; height:380px; margin:-190px; border:1px solid rgba(255,255,255,.09); border-radius:50%; animation:rotate 28s linear infinite; }
.format-orbit span { position:absolute; padding:9px 13px; border:1px solid var(--line-strong); background:rgba(16,18,23,.92); border-radius:10px; color:#d5d8df; font-size:11px; letter-spacing:.12em; box-shadow:0 12px 30px rgba(0,0,0,.35); }
.orbit-one span:nth-child(1){top:-16px;left:48%;}.orbit-one span:nth-child(2){right:-22px;top:53%;}.orbit-one span:nth-child(3){left:-25px;top:48%;}
.orbit-two { width:520px;height:520px;margin:-260px;animation-direction:reverse;animation-duration:38s;border-style:dashed;}
.orbit-two span:nth-child(1){bottom:20px;left:16%;}.orbit-two span:nth-child(2){top:60px;right:4%;}.orbit-two span:nth-child(3){top:70px;left:4%;}
.format-orbit span { animation:counterRotate 28s linear infinite; }.orbit-two span{animation-direction:reverse;animation-duration:38s;}
@keyframes rotate{to{transform:rotate(360deg)}} @keyframes counterRotate{to{transform:rotate(-360deg)}}

.converter-shell { margin: 0 clamp(18px,4vw,62px); padding: clamp(24px,4vw,48px); background: linear-gradient(145deg,rgba(24,26,32,.96),rgba(10,11,15,.97)); border: 1px solid var(--line-strong); border-radius: 28px; box-shadow: var(--shadow); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.section-heading h2 { margin:8px 0 0; font-size:clamp(28px,4vw,46px); letter-spacing:-.04em; }
.section-heading.centered { text-align:center; justify-content:center; }
.section-heading.centered p { color:var(--muted); }
.privacy-badge { padding:10px 14px; border:1px solid rgba(69,224,152,.25); border-radius:999px; color:#b5c7bf; background:rgba(69,224,152,.05); font-size:12px; }
.privacy-badge span { color:var(--green); margin-right:6px; }
.workbench { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(320px,.72fr); gap:22px; align-items:start; }
.dropzone { min-height:410px; padding:40px 24px; border:1px dashed rgba(255,255,255,.22); border-radius:22px; background: radial-gradient(circle at 50% 25%,rgba(237,37,56,.09),transparent 45%),rgba(255,255,255,.018); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transition:.2s ease; cursor:pointer; }
.dropzone:hover,.dropzone.dragging { border-color:var(--red); background-color:rgba(237,37,56,.05); transform:translateY(-2px); box-shadow:0 0 40px rgba(237,37,56,.09); }
.drop-icon { width:84px;height:84px;display:grid;place-items:center;border-radius:24px;background:rgba(237,37,56,.1);border:1px solid rgba(237,37,56,.28);box-shadow:inset 0 0 35px rgba(237,37,56,.1); }
.drop-icon svg { width:44px;fill:none;stroke:#ff5363;stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round; }
.dropzone h3 { margin:22px 0 8px;font-size:24px; }
.dropzone p { margin:0 0 20px;color:var(--muted); }
.dropzone small { margin-top:14px;color:#767d89; }
.select-button,.add-more { cursor:pointer;border:1px solid var(--line-strong);color:white;background:linear-gradient(180deg,#272a31,#17191e);border-radius:12px;padding:12px 18px;font-weight:750;box-shadow:inset 0 1px rgba(255,255,255,.09); }
.settings-panel,.queue-panel { background:rgba(7,8,11,.55);border:1px solid var(--line);border-radius:20px;padding:20px; }
.panel-title { display:flex;justify-content:space-between;align-items:center;margin-bottom:20px; }
.panel-title strong,.panel-title span { display:block; }.panel-title strong{font-size:16px;}.panel-title span{color:var(--muted);font-size:11px;margin-top:3px;}
.field-label { display:block;color:#cdd1d8;font-size:12px;font-weight:750;margin-bottom:8px; }
select,input[type="number"],input[type="text"] { width:100%;min-height:44px;border:1px solid var(--line-strong);border-radius:11px;background:#0e1014;color:white;padding:0 12px;outline:none; }
select:focus,input:focus { border-color:rgba(237,37,56,.75);box-shadow:0 0 0 3px rgba(237,37,56,.12); }
.format-select-wrap select { min-height:52px;font-size:16px;font-weight:850;background:linear-gradient(180deg,#17191e,#0d0f13); }
.setting-group { padding:18px 0;border-bottom:1px solid var(--line); }
.setting-row { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:11px; }
.setting-row output { color:#ff5262;font-weight:800; }
input[type="range"] { width:100%;accent-color:var(--red); }
.split-fields { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.split-fields label span,.advanced-body label>span { display:block;font-size:11px;color:var(--muted);margin-bottom:6px; }
.switch-row { display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;cursor:pointer; }
.switch-row input{display:none}.switch-row span{width:30px;height:18px;border-radius:99px;background:#30333b;position:relative}.switch-row span::after{content:"";position:absolute;width:12px;height:12px;left:3px;top:3px;border-radius:50%;background:white;transition:.2s}.switch-row input:checked+span{background:var(--red)}.switch-row input:checked+span::after{transform:translateX(12px)}
.advanced-settings { border-bottom:1px solid var(--line); }
.advanced-settings summary { list-style:none;padding:17px 0;display:flex;justify-content:space-between;cursor:pointer;font-size:13px; }.advanced-settings summary::-webkit-details-marker{display:none}.advanced-settings[open] summary span{transform:rotate(45deg)}
.advanced-body { display:grid;gap:12px;padding:0 0 18px; }
.advanced-body>label:not(.check-line){display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px}.advanced-body>label:not(.check-line)>span{margin:0}.advanced-body input[type="color"]{width:100%;height:42px;padding:4px;border:1px solid var(--line-strong);background:#0e1014;border-radius:10px}.check-line{display:flex;align-items:center;gap:9px;color:#b5bac4;font-size:12px}.check-line input{accent-color:var(--red)}
.convert-button { width:100%;min-height:68px;margin-top:20px;border:0;border-radius:14px;color:white;background:linear-gradient(180deg,#fb3348,#bd0b1f);box-shadow:0 15px 35px rgba(237,37,56,.22),inset 0 1px rgba(255,255,255,.25);display:grid;grid-template-columns:34px 1fr;grid-template-rows:1fr 1fr;text-align:left;padding:12px 16px;cursor:pointer; }
.convert-button:disabled{filter:grayscale(.7);opacity:.48;cursor:not-allowed;box-shadow:none}.button-icon{grid-row:1/3;align-self:center;font-size:26px}.convert-button>span:nth-child(2){font-weight:850}.convert-button small{opacity:.72}.local-note{font-size:10px;color:#747b87;line-height:1.5;text-align:center;margin:12px 4px 0}
.queue-panel { margin-top:16px; }.text-button{border:0;background:none;color:#bcc1cb;cursor:pointer}.text-button.danger{color:#ff5b69}.file-list{display:grid;gap:8px;max-height:350px;overflow:auto;padding-right:3px}.file-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.025)}.file-thumb{width:42px;height:42px;border-radius:9px;object-fit:cover;background:#0b0c10;display:grid;place-items:center;color:#ff5161;font-size:10px;font-weight:900}.file-info{min-width:0}.file-info strong,.file-info span{display:block}.file-info strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-info span{font-size:10px;color:var(--muted);margin-top:3px}.remove-file{border:0;background:rgba(255,255,255,.04);color:#aeb4bf;border-radius:8px;width:30px;height:30px;cursor:pointer}.remove-file:hover{background:rgba(237,37,56,.12);color:#ff6472}.add-more{width:100%;margin-top:10px;background:transparent;border-style:dashed;color:#bec3cc}
.result-panel{margin-top:20px;padding:18px 20px;display:flex;align-items:center;gap:14px;border:1px solid rgba(69,224,152,.25);border-radius:16px;background:rgba(69,224,152,.055)}.result-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#08130e;font-weight:900}.result-panel strong,.result-panel span{display:block}.result-panel span{font-size:12px;color:#9fb1a9;margin-top:3px}.result-panel button{margin-left:auto;border:1px solid var(--line-strong);background:#15181d;color:white;border-radius:10px;padding:10px 13px;cursor:pointer}

.format-section,.ideas-section { padding:110px clamp(24px,7vw,110px); }
.format-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:38px; }.format-grid article,.idea-cards article{padding:24px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));}.format-grid article>span{display:inline-grid;place-items:center;min-width:54px;height:34px;padding:0 9px;border-radius:8px;background:rgba(237,37,56,.1);border:1px solid rgba(237,37,56,.25);color:#ff5363;font-size:11px;font-weight:900;letter-spacing:.08em}.format-grid h3,.idea-cards h3{margin:18px 0 8px}.format-grid p,.idea-cards p,.ideas-copy p{color:var(--muted);line-height:1.65;font-size:14px}
.ideas-section{display:grid;grid-template-columns:.7fr 1.3fr;gap:50px;align-items:start;border-top:1px solid var(--line)}.ideas-copy h2{font-size:clamp(34px,4vw,56px);letter-spacing:-.05em;margin:14px 0}.idea-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.idea-cards b{color:#ff4a5b;font-size:12px;letter-spacing:.16em}
footer{min-height:120px;border-top:1px solid var(--line);padding:28px clamp(24px,7vw,110px);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}.brand.compact .brand-mark{width:36px;height:36px}.brand.compact .brand-mark svg{width:23px}
.toast{position:fixed;right:20px;bottom:20px;z-index:100;max-width:min(380px,calc(100vw - 40px));padding:13px 16px;border:1px solid var(--line-strong);border-radius:12px;background:#17191e;color:white;box-shadow:0 20px 55px rgba(0,0,0,.45);transform:translateY(30px);opacity:0;pointer-events:none;transition:.25s}.toast.show{transform:translateY(0);opacity:1}.toast.error{border-color:rgba(237,37,56,.5)}
.progress-overlay{position:fixed;inset:0;z-index:90;background:rgba(4,5,7,.78);backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px}.progress-overlay[hidden]{display:none}.progress-card{width:min(440px,100%);padding:34px;text-align:center;border:1px solid var(--line-strong);border-radius:22px;background:linear-gradient(145deg,#1b1d23,#0d0f13);box-shadow:var(--shadow)}.spinner{width:64px;height:64px;margin:0 auto 20px;border-radius:50%;border:3px solid rgba(255,255,255,.08);border-top-color:var(--red);animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-card h3{margin:0 0 8px;font-size:24px}.progress-card p,.progress-card small{color:var(--muted)}.progress-track{height:5px;border-radius:99px;background:#090a0d;overflow:hidden;margin:22px 0}.progress-track span{display:block;width:42%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--red-dark),#ff5968);animation:progress 1.4s ease-in-out infinite}@keyframes progress{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}

@media (max-width: 1050px){.topbar nav{display:none}.hero{grid-template-columns:1fr;min-height:auto;padding-top:70px}.hero-copy{text-align:center}.hero-copy>p{margin-inline:auto}.hero-actions,.trust-row{justify-content:center}.hero-visual{min-height:440px}.workbench{grid-template-columns:1fr}.ideas-section{grid-template-columns:1fr}.format-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 680px){.topbar{height:66px;padding:0 16px}.brand small{display:none}.engine-pill{font-size:0;padding:9px}.engine-pill span{margin:0}.hero{padding:54px 18px 34px}.hero h1{font-size:44px}.hero-copy>p{font-size:15px}.hero-visual{min-height:330px;transform:scale(.78);margin:-35px 0}.converter-shell{margin:0 10px;padding:18px;border-radius:22px}.section-heading{display:block}.privacy-badge{display:inline-block;margin-top:14px}.dropzone{min-height:330px}.settings-panel,.queue-panel{padding:15px}.format-section,.ideas-section{padding:75px 18px}.format-grid,.idea-cards{grid-template-columns:1fr}.result-panel{align-items:flex-start;flex-wrap:wrap}.result-panel button{margin-left:52px}.format-orbit.orbit-two{display:none}footer{display:block;text-align:center}.brand.compact{justify-content:center;margin-bottom:12px}.split-fields{grid-template-columns:1fr}.advanced-body>label:not(.check-line){grid-template-columns:1fr;gap:4px}.advanced-body>label:not(.check-line)>span{margin-bottom:4px}}
/* IMAGEFORGE_CUSTOM_SELECT_V107_BEGIN */
/* Custom listbox replaces Windows/Chromium's native white popup so every
   format remains readable in the dark ImageForge interface. */
.native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.custom-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.custom-select-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: #0e1014;
  color: #f7f8fa;
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.format-select-wrap .custom-select-trigger {
  min-height: 52px;
  font-size: 16px;
  font-weight: 850;
  background: linear-gradient(180deg, #17191e, #0d0f13);
}

.custom-select-trigger:hover {
  border-color: rgba(255, 255, 255, .28);
}

.custom-select-trigger:focus-visible,
.custom-select.open .custom-select-trigger {
  border-color: rgba(237, 37, 56, .85);
  box-shadow: 0 0 0 3px rgba(237, 37, 56, .14);
}

.custom-select-trigger:disabled {
  opacity: .58;
  cursor: not-allowed;
}

.custom-select-value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.custom-select-arrow {
  flex: 0 0 auto;
  color: #ff5363;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform .18s ease;
}

.custom-select.open .custom-select-arrow {
  transform: rotate(180deg) translateY(1px);
}

.custom-select-menu {
  position: absolute;
  z-index: 700;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  background: #111318;
  color: #f7f8fa;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .58);
  scrollbar-color: #4d515d #111318;
}

.custom-select-menu[hidden] {
  display: none !important;
}

.custom-select-option {
  width: 100%;
  min-height: 40px;
  display: block;
  padding: 9px 11px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f7f8fa;
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
  outline: none;
}

.custom-select-option:hover,
.custom-select-option:focus-visible {
  background: #292d36;
  color: #ffffff;
}

.custom-select-option[aria-selected="true"] {
  background: rgba(237, 37, 56, .18);
  color: #ffffff;
  box-shadow: inset 3px 0 0 #ed2538;
}

.custom-select-option:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.advanced-body .custom-select-menu {
  min-width: 180px;
}

@media (max-width: 680px) {
  .custom-select-menu {
    max-height: 250px;
  }
}
/* IMAGEFORGE_CUSTOM_SELECT_V107_END */

/* IMAGEFORGE_PRO_WORKFLOW_V110_BEGIN */
.preset-description {
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.compact-field {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.compact-field > span { color: var(--muted); font-size: 11px; }

.tone-controls {
  display: grid;
  gap: 12px;
  padding: 8px 0 2px;
}
.tone-controls > label {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.tone-controls > label > span { margin: 0; }
.range-with-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
}
.range-with-value output {
  min-width: 38px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #ff6674;
  background: #0c0e12;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.result-panel.result-workspace {
  display: block;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid rgba(69,224,152,.25);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(69,224,152,.075), rgba(10,12,15,.8));
}
.result-panel.result-workspace[hidden] { display: none; }
.result-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.result-header strong,
.result-header span,
.result-header small { display: block; }
.result-header span { color: #a9bbb2; font-size: 12px; margin-top: 4px; }
.result-header small { color: #69d7a3; font-size: 11px; margin-top: 6px; }
.result-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.result-actions button,
.result-download,
.status-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 9px 13px;
  background: #15181d;
  color: white;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.result-actions .primary-small {
  border-color: rgba(237,37,56,.55);
  background: linear-gradient(180deg,#f33449,#b90b1f);
}
.result-actions button:disabled { opacity: .45; cursor: not-allowed; }
.result-list { display: grid; gap: 9px; margin-top: 18px; }
.result-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}
.result-format {
  min-height: 42px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 9px;
  background: rgba(237,37,56,.12);
  border: 1px solid rgba(237,37,56,.25);
  color: #ff6573;
  font-size: 10px;
  font-weight: 900;
}
.result-file-info { min-width: 0; }
.result-file-info strong,
.result-file-info span { display: block; }
.result-file-info strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
.result-file-info span { margin-top: 4px; color: var(--muted); font-size: 10px; }
.result-download.disabled { opacity: .4; pointer-events: none; }

.progress-emblem {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid rgba(237,37,56,.35);
  background: rgba(237,37,56,.1);
  color: #ff5262;
  font-size: 34px;
  animation: spin 1.15s linear infinite;
}
.progress-row { display: grid; grid-template-columns: minmax(0, 1fr) 42px; align-items: center; gap: 10px; margin: 22px 0; }
.progress-row .progress-track { margin: 0; }
.progress-track.determinate span {
  width: 0;
  transform: none;
  animation: none;
  transition: width .35s ease;
}
.progress-row > strong { color: #ff5c6b; font-size: 12px; text-align: right; }
.cancel-conversion {
  margin-top: 20px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px;
  background: #15171c;
  color: #d7dbe2;
  font-weight: 800;
  cursor: pointer;
}
.cancel-conversion:disabled { opacity: .45; cursor: wait; }

.status-link { margin-top: 10px; border-color: rgba(237,37,56,.35); }
.server-status-line { margin-top: 14px !important; color: #75d9aa !important; font-size: 12px !important; }

.status-main { min-height: calc(100vh - 180px); padding: 110px clamp(20px,7vw,100px) 70px; }
.status-hero h1 { margin: 8px 0 10px; font-size: clamp(38px,6vw,70px); letter-spacing: -.05em; }
.status-hero p { max-width: 700px; color: var(--muted); line-height: 1.6; }
.status-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 34px; }
.status-card { padding: 20px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.025); }
.status-card span, .status-card strong, .status-card small { display: block; }
.status-card span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.status-card strong { margin-top: 10px; font-size: 26px; }
.status-card small { margin-top: 7px; color: #8e95a1; }
.status-wide { grid-column: span 2; }
.status-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.status-actions a, .status-actions button { min-height: 44px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 11px; background: #15181d; color: white; font-weight: 800; text-decoration: none; cursor: pointer; }
.status-table { width: 100%; border-collapse: collapse; margin-top: 30px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.status-table th, .status-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12px; }
.status-table th { color: #aeb4be; background: rgba(255,255,255,.035); }
.status-table td:last-child { color: #7ddcaf; font-weight: 800; }

@media (max-width: 900px) {
  .status-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 680px) {
  .compact-field,
  .tone-controls > label { grid-template-columns: 1fr; gap: 5px; }
  .result-header { grid-template-columns: 42px minmax(0,1fr); align-items: start; }
  .result-actions { grid-column: 1 / -1; justify-content: stretch; }
  .result-actions button { flex: 1 1 150px; }
  .result-card { grid-template-columns: 44px minmax(0,1fr); }
  .result-download { grid-column: 1 / -1; width: 100%; }
  .convert-button { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 30; }
  .status-grid { grid-template-columns: 1fr; }
  .status-wide { grid-column: span 1; }
}
/* IMAGEFORGE_PRO_WORKFLOW_V110_END */