:root {
  color-scheme: dark;
  --bg: #060a12;
  --surface: #101827;
  --surface-2: #151f31;
  --input: #0c1422;
  --border: #263650;
  --text: #e8f0fa;
  --muted: #8fa3bd;
  --blue: #2f81f7;
  --cyan: #38bdf8;
  --success: #22c55e;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--text); background: radial-gradient(circle at 15% 0%, #112b4a 0, #080d18 32%, var(--bg) 100%); }
button, input, select { font: inherit; }
.shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; padding: 34px 0 56px; }
.hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 30px; padding: 30px 32px; margin-bottom: 22px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(135deg, rgba(21,31,49,.97), rgba(12,20,34,.93)); box-shadow: 0 24px 70px rgba(0,0,0,.28); }
.hero::after { content: ""; position: absolute; width: 250px; height: 250px; right: -70px; top: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,.3), transparent 68%); }
.badge { display: inline-block; padding: 6px 12px; border: 1px solid #1d4e78; border-radius: 999px; color: var(--cyan); background: #122b4a; font-size: .73rem; font-weight: 800; letter-spacing: .13em; }
h1 { margin: 14px 0 7px; color: #f8fbff; font-size: clamp(1.75rem, 4vw, 2.35rem); line-height: 1.08; letter-spacing: -.03em; }
.hero p { margin: 0; color: var(--muted); }
.brand { z-index: 1; align-self: center; color: var(--muted); text-align: right; letter-spacing: .09em; }
.brand strong { color: var(--cyan); }
.card { border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg, rgba(21,31,49,.98), rgba(16,24,39,.98)); box-shadow: 0 16px 44px rgba(0,0,0,.22); }
.upload-card, .settings-card { padding: 18px; margin-bottom: 16px; }
.section-title { margin-bottom: 13px; color: var(--cyan); font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.section-title span { margin-right: 7px; color: #6caeff; }
.drop-zone { display: grid; justify-items: center; gap: 5px; padding: 24px; border: 1px dashed #365277; border-radius: 14px; background: var(--input); cursor: pointer; transition: .18s ease; }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--cyan); background: #10213a; box-shadow: inset 0 0 24px rgba(56,189,248,.08); }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-icon { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #3a72a8; border-radius: 12px; color: var(--cyan); background: #142a48; font-size: 1.4rem; }
.drop-zone strong { margin-top: 4px; color: #f7fbff; }
.upload-heading { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 4px; }
.upload-heading strong { margin-top: 0; }
.help-wrap { position: relative; display: inline-flex; }
.help-tip { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid #55cfff; border-radius: 50%; outline: 0; color: #dff8ff; background: linear-gradient(145deg, #1b8ee8, #1459a3); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 9px rgba(20,113,190,.38); font-size: .78rem; font-weight: 900; line-height: 1; cursor: help; transition: .16s ease; }
.help-tip:hover, .help-tip:focus-visible, .help-tip[aria-expanded="true"] { transform: translateY(-1px); border-color: #b7efff; background: linear-gradient(145deg, #32b9ff, #1670c9); box-shadow: 0 0 0 3px rgba(56,189,248,.12), 0 5px 13px rgba(20,113,190,.45); }
.help-popover { position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 12px); width: min(330px, calc(100vw - 54px)); padding: 13px 15px; border: 1px solid #3c6d9d; border-radius: 12px; color: #dceafa; background: #101d30; box-shadow: 0 18px 42px rgba(0,0,0,.42); font-size: .82rem; font-weight: 500; line-height: 1.45; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 5px); transition: .16s ease; }
.help-popover::after { content: ""; position: absolute; left: 50%; top: 100%; width: 10px; height: 10px; border-right: 1px solid #3c6d9d; border-bottom: 1px solid #3c6d9d; background: #101d30; transform: translate(-50%, -5px) rotate(45deg); }
.help-popover b { color: var(--cyan); }
.help-wrap:hover .help-popover, .help-wrap:focus-within .help-popover, .help-popover.open { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.drop-zone small { color: var(--muted); }
.tabs { display: flex; gap: 8px; padding: 6px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--input); }
.tab { flex: 1; min-height: 44px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 700; cursor: pointer; }
.tab:hover { color: #fff; background: #14233a; }
.tab.active { border-color: #315b88; color: var(--cyan); background: #152844; box-shadow: 0 8px 22px rgba(0,0,0,.2); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: reveal .18s ease; }
@keyframes reveal { from { opacity: 0; transform: translateY(3px); } }
.grid { display: grid; gap: 15px; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
label { display: grid; gap: 7px; color: #c9d7e8; font-size: .9rem; font-weight: 600; }
input[type="number"], select { width: 100%; min-height: 46px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; outline: 0; color: var(--text); background: var(--input); }
input[type="number"]:focus, select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(56,189,248,.1); }
.color-field { display: flex; align-items: center; min-height: 46px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--input); }
.color-field input { width: 36px; height: 32px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.color-field output { margin-left: 10px; color: var(--muted); font-size: .85rem; }
.check { display: flex; align-items: center; gap: 9px; margin-top: 18px; }
.check input { width: 18px; height: 18px; accent-color: var(--blue); }
.action-row { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.status { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 16px; border: 1px solid var(--border); border-radius: 14px; color: var(--muted); background: rgba(16,24,39,.9); }
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px rgba(34,197,94,.8); }
.status.error i { background: #ef4444; box-shadow: 0 0 12px rgba(239,68,68,.7); }
.status.loading i { background: var(--cyan); animation: pulse .85s infinite alternate; }
@keyframes pulse { to { transform: scale(1.45); opacity: .55; } }
.primary, .download { position: relative; min-height: 54px; padding: 0 25px; border: 2px solid #54d8ff; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #1b9bff 0%, #087cf0 52%, #075cb5 100%); box-shadow: inset 0 1px 0 #b8efff, 0 5px 0 #06356f, 0 14px 30px rgba(8,124,240,.3); font-weight: 800; letter-spacing: .025em; cursor: pointer; transition: .16s ease; }
.primary:hover, .download:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: inset 0 1px 0 #e0faff, 0 7px 0 #06356f, 0 18px 36px rgba(8,124,240,.4); }
.primary:active, .download:active { transform: translateY(4px); box-shadow: inset 0 2px 5px rgba(0,0,0,.28), 0 1px 0 #06356f; }
.primary:disabled { cursor: wait; filter: grayscale(.45); opacity: .75; }
.primary span, .download span { margin-left: 10px; font-size: 1.15rem; }
.result-card { margin-top: 20px; padding: 20px; }
.success { margin-bottom: 15px; color: #7ce7a1; font-weight: 700; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metrics article { padding: 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--input); }
.metrics small { display: block; margin-bottom: 5px; color: var(--muted); }
.metrics strong { color: #f8fbff; font-size: 1.35rem; }
.download { display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 16px; text-decoration: none; }

@media (max-width: 760px) {
  .shell { width: min(100% - 22px, 1180px); padding-top: 16px; }
  .hero { padding: 24px 20px; }
  .brand { display: none; }
  .grid.three, .metrics { grid-template-columns: 1fr; }
  .action-row { align-items: stretch; flex-direction: column; }
  .primary { width: 100%; }
  .tabs { overflow-x: auto; }
  .tab { min-width: 110px; }
}
.action-row { flex-wrap: wrap; }
.primary.earth { border-color: #75f0a1; background: linear-gradient(145deg, #24c96b 0%, #159752 52%, #08753d 100%); box-shadow: inset 0 1px 0 #c6f9d8, 0 5px 0 #07502b, 0 14px 30px rgba(21,151,82,.28); }
.primary.earth:hover { box-shadow: inset 0 1px 0 #e3ffed, 0 7px 0 #07502b, 0 18px 36px rgba(21,151,82,.38); }
.field-note { margin: 18px 0 0; padding: 13px 15px; border: 1px solid #2b4f72; border-radius: 11px; color: var(--muted); background: #0d1929; font-size: .84rem; line-height: 1.5; }
@media (max-width: 980px) { .action-row .status { flex-basis: 100%; } }