:root {
    --bg: #080908;
    --surface: #101210;
    --surface-2: #161916;
    --surface-3: #1d211d;
    --lime: #a3ff00;
    --lime-soft: rgba(163, 255, 0, .12);
    --lime-glow: rgba(163, 255, 0, .3);
    --text: #f4f7f1;
    --muted: #8d968b;
    --muted-2: #60685f;
    --border: rgba(255, 255, 255, .09);
    --danger: #ff5f62;
    --radius-xl: 28px;
    --radius-lg: 20px;
    --shadow: 0 28px 70px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
    margin: 0;
    min-height: 100vh;
    font-family: "Outfit", system-ui, sans-serif;
    color: var(--text);
    background: radial-gradient(circle at 50% -15%, rgba(163, 255, 0, .10), transparent 34rem), var(--bg);
    -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.hidden { display: none !important; }

.app-container {
    width: min(1780px, calc(100% - 32px));
    max-width: 1780px;
    margin: 24px auto 36px;
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 34px;
    background: rgba(13, 15, 13, .78);
    box-shadow: var(--shadow), inset 0 1px rgba(255, 255, 255, .04);
    backdrop-filter: blur(24px);
}
.tool-header { text-align: center; padding: 14px 16px 27px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: #b6c0b1; font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.tool-header h1 { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.045em; }
.highlight { color: var(--lime); text-shadow: 0 0 30px rgba(163, 255, 0, .22); }
.badge { padding: 6px 9px 5px; color: #081000; background: var(--lime); border-radius: 7px; box-shadow: 0 0 24px var(--lime-glow); font-size: 11px; letter-spacing: .08em; }
.tool-header p { margin: 13px auto 0; color: var(--muted); font-weight: 300; font-size: 1.05rem; }

.drop-zone {
    position: relative;
    display: grid;
    min-height: 550px;
    place-items: center;
    overflow: hidden;
    border: 1px dashed rgba(163, 255, 0, .32);
    border-radius: var(--radius-xl);
    background: linear-gradient(rgba(163, 255, 0, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(163, 255, 0, .025) 1px, transparent 1px), radial-gradient(circle at 50% 50%, rgba(163, 255, 0, .07), transparent 25rem), rgba(3, 5, 3, .58);
    background-size: 32px 32px, 32px 32px, auto, auto;
    cursor: pointer;
    transition: .25s ease;
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--lime); background-color: rgba(163, 255, 0, .025); box-shadow: inset 0 0 70px rgba(163, 255, 0, .06); }
.drop-orbit { position: absolute; border: 1px solid rgba(163, 255, 0, .08); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 420px; height: 420px; }
.orbit-two { width: 650px; height: 650px; opacity: .55; }
.drop-content { position: relative; z-index: 1; max-width: 620px; padding: 40px 22px; text-align: center; }
.drop-icon { display: grid; width: 96px; height: 96px; margin: 0 auto 22px; place-items: center; color: var(--lime); border: 1px solid rgba(163, 255, 0, .26); border-radius: 28px; background: rgba(163, 255, 0, .07); box-shadow: 0 0 55px rgba(163, 255, 0, .12), inset 0 0 24px rgba(163, 255, 0, .05); }
.drop-icon svg { width: 62px; }
.drop-content h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3vw, 2.25rem); letter-spacing: -.03em; }
.drop-content > p { margin: 0; color: var(--muted); }
kbd { padding: 2px 6px; border: 1px solid var(--border); border-bottom-color: rgba(255, 255, 255, .2); border-radius: 5px; background: var(--surface-3); font-size: .78em; }
.drop-hint { display: block; margin-top: 16px; color: var(--muted-2); font-size: 11px; font-weight: 600; letter-spacing: .09em; }
.drop-actions { display: flex; justify-content: center; gap: 10px; margin-top: 25px; }
.btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-2); font-weight: 600; cursor: pointer; transition: .2s ease; }
.btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, .18); }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn-primary { color: #071000; border-color: var(--lime); background: var(--lime); box-shadow: 0 0 22px rgba(163, 255, 0, .16); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 30px rgba(163, 255, 0, .28); }
.btn-ghost { background: rgba(255, 255, 255, .035); }
.privacy-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; color: #788276; font-size: 12px; }
.privacy-note svg, .btn svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.workspace { display: grid; grid-template-columns: 306px minmax(500px, 1fr) 290px; min-height: 750px; gap: 12px; }
.panel { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(12, 14, 12, .88); box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.settings-panel, .inspector-panel { display: flex; flex-direction: column; }
.panel-heading { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.panel-kicker { display: block; margin-bottom: 3px; color: var(--lime); font-size: 9px; font-weight: 700; letter-spacing: .14em; }
.panel-heading h2 { margin: 0; font-size: 16px; }
.icon-btn { display: inline-grid; width: 34px; height: 34px; flex: 0 0 auto; padding: 0; place-items: center; color: #a7afa4; border: 1px solid var(--border); border-radius: 9px; background: rgba(255, 255, 255, .025); cursor: pointer; }
.icon-btn:hover:not(:disabled) { color: var(--lime); border-color: rgba(163, 255, 0, .35); }
.icon-btn:disabled { opacity: .28; cursor: default; }
.icon-btn svg, .preset-card svg, .advanced-box svg, .status-chip svg, .fix-button svg, .export-card svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.settings-scroll { overflow: auto; scrollbar-width: thin; scrollbar-color: #2a3028 transparent; }
.control-section { padding: 18px; border-bottom: 1px solid var(--border); }
.section-label-row, .slider-heading, .range-labels, .inspector-title { display: flex; align-items: center; justify-content: space-between; }
.control-section label, .slider-heading label { font-size: 12px; font-weight: 600; }
.analysis-chip { padding: 3px 6px; color: var(--lime); border: 1px solid rgba(163, 255, 0, .22); border-radius: 4px; background: rgba(163, 255, 0, .06); font-size: 8px; font-weight: 700; letter-spacing: .08em; }
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.preset-card { display: grid; grid-template-columns: 23px 1fr; min-height: 58px; gap: 1px 6px; padding: 10px; text-align: left; color: #dce2d9; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .022); cursor: pointer; }
.preset-card svg { grid-row: 1 / 3; color: var(--muted); }
.preset-card span { align-self: end; font-size: 11px; font-weight: 600; }
.preset-card small { color: var(--muted-2); font-size: 9px; }
.preset-card:hover { border-color: rgba(163, 255, 0, .22); }
.preset-card.active { border-color: rgba(163, 255, 0, .55); background: rgba(163, 255, 0, .075); box-shadow: inset 0 0 17px rgba(163, 255, 0, .035); }
.preset-card.active svg { color: var(--lime); }
.slider-heading output { color: var(--lime); font-size: 11px; font-variant-numeric: tabular-nums; }
.pro-slider { width: 100%; height: 4px; margin: 14px 0 8px; appearance: none; border-radius: 999px; background: linear-gradient(90deg, var(--lime) var(--fill, 50%), #2a2e29 var(--fill, 50%)); cursor: pointer; }
.pro-slider::-webkit-slider-thumb { width: 14px; height: 14px; appearance: none; border: 2px solid #101210; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1px rgba(163, 255, 0, .6), 0 0 12px rgba(163, 255, 0, .25); }
.pro-slider::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid #101210; border-radius: 50%; background: var(--lime); }
.range-labels { color: var(--muted-2); font-size: 8px; text-transform: uppercase; letter-spacing: .04em; }
.advanced-box { border-bottom: 1px solid var(--border); }
.advanced-box summary { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; font-size: 12px; font-weight: 600; list-style: none; cursor: pointer; }
.advanced-box summary::-webkit-details-marker { display: none; }
.advanced-box summary span { display: flex; align-items: center; gap: 8px; }
.advanced-box summary span svg { color: var(--lime); }
.advanced-box .chevron { width: 13px; transition: transform .2s; }
.advanced-box[open] .chevron { transform: rotate(180deg); }
.advanced-content { padding: 0 18px 18px; }
.compact-slider { display: block; margin: 12px 0; }
.compact-slider > span { display: flex; justify-content: space-between; color: #aab1a7; font-size: 10px; }
.compact-slider output { color: var(--lime); }
.compact-slider .pro-slider { margin-top: 10px; }
.select-label { display: block; margin: 15px 0; }
.select-label > span { display: block; margin-bottom: 7px; color: #aab1a7; font-size: 10px; }
.pro-select { width: 100%; height: 38px; padding: 0 10px; color: var(--text); border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.toggle-row { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.toggle-row > span { display: flex; flex-direction: column; }
.toggle-row strong { font-size: 10px; }
.toggle-row small { color: var(--muted-2); font-size: 9px; font-weight: 400; }
.toggle-row input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-row i { position: relative; width: 32px; height: 18px; flex: 0 0 auto; border-radius: 999px; background: #30342f; transition: .2s; }
.toggle-row i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #899087; transition: .2s; }
.toggle-row input:checked + i { background: rgba(163, 255, 0, .28); }
.toggle-row input:checked + i::after { transform: translateX(14px); background: var(--lime); }