/* KorgSet web theme: warm dark + orange, the same palette and fonts as the start page (landing.html).
   (Until 2026-10-30 this was the desktop program's blue palette from App/Ui.xaml.) */
@import url("fonts.css");
:root {
    --bg: #0F0D0B; --top: #0B0A08; --panel: #181512; --panel2: #211D19; --input: #13110E; --line: #2E2924; --hover: #27221D;
    --text: #F2ECE4; --muted: #A69D92; --dim: #857C72;
    --accent: #FF7A1A; --accent-hi: #FF8F3D; --accent-text: #FF9A4D; --accent-ink: #1A0E04;
    --ok: #7BC47F; --warn: #F2C14E; --err: #F0605A; --sel: #FF8F3D; --selbg: #3D2414;
    color-scheme: dark;
}
* { box-sizing: border-box; }
/* FocusOnNavigate moves focus to the page heading (for screen readers); the heading itself must not show a focus frame */
h1:focus, h1:focus-visible, [tabindex="-1"]:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 "KS Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: inherit; }
code { background: var(--panel2); color: var(--text); padding: 1px 5px; border-radius: 4px; }
.muted { color: var(--muted); }
.brand { font-size: 18px; letter-spacing: .5px; text-decoration: none; }
.brand b { color: var(--accent); }

.btn { border: 1px solid var(--line); background: var(--panel2); color: var(--text); padding: 7px 14px; border-radius: 8px; cursor: pointer; font: inherit; text-decoration: none; display: inline-block; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn.ghost { background: transparent; }
.btn.big { padding: 11px 22px; font-size: 16px; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--text); padding: 5px 12px; border-radius: 999px; cursor: pointer; font: inherit; }
.chip.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip.sm { padding: 2px 9px; font-size: 13px; }

/* ---------------- landing */
.landing { max-width: 1040px; margin: 0 auto; padding: 0 16px 40px; }
.lnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; }
.hero { padding: 48px 0 32px; }
.eyebrow { color: var(--accent); letter-spacing: 2px; font-size: 13px; margin: 0; }
.hero h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.1; margin: 10px 0 16px; }
.hero h1 span { color: var(--muted); }
.lead { font-size: 18px; max-width: 640px; color: var(--muted); }
.cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 24px 0; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0; list-style: none; color: var(--muted); font-size: 14px; }
.trust li::before { content: "✓ "; color: var(--ok); }
section h2 { font-size: 26px; margin: 48px 0 16px; }
.cards3, .cards2 { display: grid; gap: 14px; }
.cards3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.card h3 { margin: 4px 0 6px; font-size: 17px; }
.card p { margin: 0; color: var(--muted); }
.num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.models table { width: 100%; border-collapse: collapse; background: var(--panel); border-radius: 12px; overflow: hidden; }
.models th, .models td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.models th { color: var(--muted); font-weight: 500; }
.price { max-width: 460px; }
.amount { font-size: 40px; font-weight: 700; }
.amount small { font-size: 16px; color: var(--muted); font-weight: 400; }
.price ul { padding-left: 18px; color: var(--muted); }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq p { color: var(--muted); margin: 8px 0 0; }
.lfoot { margin-top: 48px; color: var(--muted); font-size: 13px; text-align: center; }

/* ---------------- studio */
.studio { display: flex; flex-direction: column; height: 100vh; }
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--top); flex-wrap: wrap; }
.cats { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; }
.progress { position: relative; height: 26px; background: var(--panel2); }
.progress div { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--accent) 40%, transparent); transition: width .2s; }
.progress span { position: relative; padding: 0 16px; line-height: 26px; font-size: 13px; }
.alert { padding: 8px 16px; background: var(--panel2); border-bottom: 1px solid var(--line); cursor: pointer; }
.panes { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; padding: 12px; min-height: 0; }
.pane { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pane.target { border-top: 3px solid var(--accent); }
.pane-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.label { font-size: 11px; letter-spacing: 1.5px; color: var(--muted); }
.name { font-weight: 600; word-break: break-all; }
.empty { padding: 32px 20px; text-align: center; color: var(--muted); }
/* all bank chips are always visible (wrapping), never a scroll bar of their own */
.banks { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex: none; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 12px 14px; overflow: auto; align-content: start; }
.cell { display: flex; gap: 6px; align-items: baseline; text-align: left; background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 7px 8px; cursor: pointer; font: inherit; font-size: 13px; min-height: 36px; overflow: hidden; }
.cell .no { color: var(--muted); font-size: 11px; min-width: 18px; }
.cell .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell.free { background: transparent; border-style: dashed; }
.cell.sel { background: var(--selbg); border-color: var(--sel); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sel) 45%, transparent); }
.pane.source .cell.free { cursor: default; }
.mid { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; width: 150px; text-align: center; }
.mid small { color: var(--muted); }

.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; z-index: 10; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; width: min(720px, 100%); max-height: 90vh; display: flex; flex-direction: column; gap: 12px; }
.modal h2 { margin: 0; font-size: 20px; }
.plan { overflow: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: 13px/1.6 "KS Mono", ui-monospace, Consolas, monospace; max-height: 50vh; }
.pl.overwrite, .pl.warning { color: var(--warn); } .pl.error { color: var(--err); } .pl.header { color: var(--accent); margin-top: 6px; }
.row { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.opt { display: flex; gap: 8px; align-items: center; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.field input { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; }
.paystate { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--panel2); }
.paystate.paid { color: var(--ok); } .paystate.failed { color: var(--err); }

/* ---------------- v2: steps, tabs, search, toggles, meter, language */
.lnav-r { display: flex; gap: 12px; align-items: center; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.lang button { background: transparent; color: var(--muted); border: 0; padding: 5px 9px; cursor: pointer; font: inherit; font-size: 13px; }
.lang button.on { background: var(--panel2); color: var(--text); }
.steps { display: flex; gap: 4px; list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.steps li { padding: 4px 12px; border-radius: 7px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.steps li span { color: var(--accent); margin-right: 4px; }
.steps li.on { background: var(--panel2); color: var(--text); }
.steps li.done { color: var(--text); }
.actions { margin-left: auto; align-items: center; flex-wrap: wrap; }
.badge { border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; font-weight: 600; font-size: 13px; }
.status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
.dot.busy { background: var(--accent); animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: .3; } }
.progress { height: 3px; }
.alert.ok { color: var(--ok); }
.tag { color: var(--accent); font-weight: 700; letter-spacing: 1.5px; font-size: 13px; }
.grow { flex: 1; min-width: 0; }
.sub { color: var(--muted); font-size: 13px; }
.modelrow { display: flex; align-items: center; gap: 8px; padding: 8px 14px 0; }
.modelrow select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 4px 8px; font: inherit; font-size: 13px; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); margin: 8px 14px 0; }
.tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); padding: 8px 4px; cursor: pointer; font: inherit; font-weight: 600; display: flex; flex-direction: column; align-items: center; }
.tab small { font-weight: 400; font-size: 12px; }
.tab.on { color: var(--text); border-bottom-color: var(--accent); }
.search { padding: 10px 14px 0; }
.search input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font: inherit; }
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px 14px; overflow: auto; align-content: start; }
.pane-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.meter { flex: 1; min-width: 80px; height: 6px; background: var(--panel2); border-radius: 3px; overflow: hidden; }
.meter div { height: 100%; background: var(--ok); }
.meter.over div { background: var(--err); }
.srcs .chip { cursor: pointer; }
.chip .x { margin-left: 6px; opacity: .6; }
.chip .x:hover { opacity: 1; }
.mid { width: 190px; }
.toggle { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); text-align: left; font-size: 13px; cursor: pointer; }
.toggle input { display: none; }
.toggle i { width: 34px; height: 18px; border-radius: 9px; background: var(--line); position: relative; flex: none; transition: background .15s; }
.toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .15s; }
.toggle input:checked + i { background: var(--accent); }
.toggle input:checked + i::after { left: 18px; }
.guide li { margin-bottom: 8px; }
.conf { font-size: 12px; }
.conf.conf-sure, .conf.conf-chosen { color: var(--ok); }
.conf.conf-guess { color: var(--accent-text); }
.conf.conf-none { color: var(--err); }
select.conf-none { border-color: var(--err); }
select.conf-guess { border-color: var(--line); }

@media (max-width: 900px) {
    .studio { height: auto; min-height: 100vh; }
    .panes { grid-template-columns: 1fr; }
    .mid { width: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- desktop palette details */
.btn.primary:hover:not(:disabled) { background: var(--accent-hi); border-color: var(--accent-hi); }
.cell:hover:not(.free) { background: var(--hover); }
.search input, .field input, .modelrow select { background: var(--input); }
.lnav { border-bottom: 1px solid var(--line); }
.hero h1 span { color: var(--accent-text); }

/* ---------------- checkout sheet with the embedded Stripe form: the backdrop scrolls, nothing inside does */
.checkout-bg { position: fixed; inset: 0; z-index: 10; background: rgba(10,8,6,.8); overflow-y: auto; padding: 32px 16px; }
.checkout { margin: 0 auto; width: min(980px, 100%); display: grid; grid-template-columns: 340px 1fr; border-radius: 16px; overflow: hidden;
            border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.55); background: var(--panel); }
.checkout:not(.paying) { width: min(820px, 100%); }
.co-summary { background: var(--top); padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; border-right: 1px solid var(--line); }
.co-brand { font-size: 22px; font-weight: 700; } .co-brand b { color: var(--accent-text); }
.co-item { display: flex; gap: 12px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.co-ico { font-size: 26px; }
.co-name { font-weight: 600; word-break: break-all; }
.co-item .muted { font-size: 12px; }
.co-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 14px; }
.co-total b { font-size: 30px; }
.co-vat { font-size: 13px; margin-top: -10px; }
.co-trust { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; font-size: 14px; color: var(--muted); }
.co-stripe { margin-top: auto; font-size: 13px; color: var(--dim); }
.co-stripe b { color: #fff; font-size: 17px; letter-spacing: -.5px; font-family: system-ui, sans-serif; }
.co-main { padding: 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.co-main h2 { margin: 0; }
.co-pay { width: 100%; font-size: 17px; padding: 14px; }
.co-close { align-self: center; }
.gift-open { align-self: center; color: var(--muted); border: none; }
.gift-row { display: flex; gap: 8px; }
.gift-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.paybox { display: none; }
.paybox.on { display: block; background: #fff; border-radius: 12px; padding: 8px 0; }
@media (max-width: 760px) {
    .checkout { grid-template-columns: 1fr; }
    .co-summary { border-right: 0; border-bottom: 1px solid var(--line); }
    .checkout-bg { padding: 0; }
    .checkout { border-radius: 0; }
}
.paid { text-align: center; padding: 8px 0 4px; }
.paid-check { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; background: var(--ok); color: #06210f; font-size: 36px; font-weight: 800; display: grid; place-items: center; }
.paid h3 { margin: 4px 0; font-size: 22px; color: var(--ok); }
.paid .download { margin-top: 12px; width: 100%; font-size: 18px; padding: 14px; }
.cell[draggable="true"] { cursor: grab; }
.cell.drop { border-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 45%, transparent); }
.edit-modal { width: min(460px, 100%); }
.recovered { background: var(--selbg); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 12px; color: var(--text); }
.dl { margin: 16px 0 6px; text-align: left; }
.dl-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.dl-top b { font-size: 28px; }
.dl-top span { color: var(--muted); font-size: 14px; }
.dl-bar { height: 14px; border-radius: 7px; background: var(--panel2); border: 1px solid var(--line); overflow: hidden; }
.dl-bar div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width .25s ease; }
.dl-sub { margin-top: 6px; color: var(--muted); font-size: 14px; }
.small { font-size: 13px; }

/* ---------------- bank list + paged slots (10 per page) */
.browser { flex: 1; min-height: 0; display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 10px 14px; }
.banklist { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; padding-right: 4px; }
.bankrow { display: flex; justify-content: space-between; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 7px; padding: 8px 10px; cursor: pointer; font: inherit; font-size: 13px; text-align: left; }
.bankrow small { color: var(--muted); }
.bankrow.on { background: var(--selbg); border-color: var(--accent); }
.bankrow:hover:not(.on) { background: var(--hover); }
.slots { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
.grid10 { display: grid; grid-template-columns: repeat(var(--slot-columns, 2), minmax(0, 1fr)); grid-template-rows: repeat(var(--slot-rows, 5), minmax(48px, 1fr)); grid-auto-flow: column; gap: 6px; flex: 1; }
.grid10 .cell { flex-direction: column; justify-content: space-between; align-items: stretch; min-height: 48px; position: relative; padding: 8px 10px; }
.grid10 .cell .nm { font-size: 14px; }
.grid10 .cell .no { position: absolute; top: 6px; right: 8px; font-size: 11px; }
.grid10 .cell.free .nm { color: var(--dim); }
.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pg { background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; padding: 3px 9px; cursor: pointer; font: inherit; font-size: 13px; }
.pg.on { color: var(--text); border-color: var(--accent); background: var(--selbg); }
.pg:disabled { opacity: .4; cursor: default; }
.pginfo { margin-left: auto; font-size: 12px; }

/* the working area always gets the full screen height; activity + save sit below it (page scroll) */
.studio { height: auto; min-height: 100vh; }
.studio > .panes { flex: none; height: calc(100vh - 70px); min-height: 640px; }

.memory { margin-top: auto; padding: 10px 14px 12px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 13px; }
.mem-top, .mem-row { display: flex; justify-content: space-between; gap: 10px; }
.mem-row { color: var(--muted); }
.memory .meter { height: 6px; }

/* ---------------- bottom: activity + save */
.bottom { display: grid; grid-template-columns: 1fr 380px; gap: 12px; padding: 0 12px 12px; align-items: start; }
.bottom h4 { margin: 0 0 8px; font-size: 14px; }
.history, .savebox { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.hist-list { max-height: 150px; overflow-y: auto; font-size: 13px; display: grid; gap: 4px; }
.hist.ok { color: var(--ok); } .hist.err { color: var(--err); }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin: 6px 0; }
.kv span { color: var(--muted); } .kv b { text-align: right; }
.sv-price { margin: 10px 0 8px; } .sv-price b { font-size: 26px; }
.sv-btn { width: 100%; }
.sv-note { text-align: center; margin-top: 6px; }
@media (max-width: 900px) { .bottom { grid-template-columns: 1fr; } .browser { grid-template-columns: 1fr; } .banklist { flex-direction: row; overflow-x: auto; } }

/* ---------------- converter section */
.converter .soon, .desktop .soon { display: inline-block; background: var(--warn); color: #1a1206; font-weight: 800; letter-spacing: 1.5px; font-size: 13px; padding: 3px 10px; border-radius: 6px; margin-left: 10px; vertical-align: middle; }
.converter .lead { margin-top: 0; }
.conv-flow { display: flex; align-items: center; gap: 14px; margin: 18px 0; }
.conv-model { font-size: 28px; font-weight: 800; padding: 10px 22px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.conv-arrow { font-size: 32px; color: var(--accent-text); }
.conv-list { margin: 6px 0 0; padding-left: 18px; color: var(--muted); }
.conv-list li { margin: 3px 0; }
@media (max-width: 640px) { .nav-extra { display: none; } }

/* ---------------- desktop section */
.desktop .soon { display: inline-block; background: var(--warn); color: #1a1206; font-weight: 800; letter-spacing: 1.5px; font-size: 13px; padding: 3px 10px; border-radius: 6px; margin-left: 10px; vertical-align: middle; }
.desktop .lead { margin-top: 0; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 20px 0; }
.shots figure { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.shots img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.shots figcaption { padding: 10px 14px; color: var(--muted); font-size: 14px; }
.shot-hero { margin: 20px 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.shot-hero img { display: block; width: 100%; height: auto; }
.zoom { position: fixed; inset: 0; background: rgba(0,0,0,.8); display: grid; place-items: center; padding: 16px; z-index: 20; cursor: zoom-out; }
.zoom img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.feat-ico { font-size: 22px; }
.desktop-price { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; margin-top: 18px; border-color: var(--accent); }
.desktop-price .amount { font-size: 40px; font-weight: 700; }
.desktop-price .amount small, .price .amount small { margin-left: 8px; }
.desktop-price p { margin: 4px 0 0; max-width: 420px; }
.desktop-price .license { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; max-width: 460px; }
.desktop-price .license li { font-size: 15px; }
.desktop-price .license li.muted { font-size: 13px; margin-top: 4px; }

.bankrow.drop { border-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 45%, transparent); }

/* ---------------- phones and tablets: panes stack and grow with their content (the desktop rules above fix the height) */
.mobile-only { display: none; }
@media (max-width: 900px) {
    .mobile-only { display: block; }
    .studio > .panes { height: auto; min-height: 0; }
    .pane { overflow: visible; }
    .mid { width: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .browser { padding: 8px; }
    .grid10 { grid-auto-flow: column; grid-template-columns: repeat(var(--slot-columns, 2), minmax(0, 1fr)); grid-template-rows: repeat(var(--slot-rows, 5), minmax(52px, auto)); }
    .grid10 .cell { min-height: 52px; }
    .pane-head { flex-wrap: wrap; }
}

/* ---------------- KorgSet Studio: cinematic workspace skin */
.studio {
    position: relative;
    isolation: isolate;
    --target-glow: #ffb35c;
    --source-glow: #75d4c5;
    background: transparent;
}
.studio::before, .studio::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.studio::before {
    background-image:
        linear-gradient(180deg, rgba(9,9,12,.79), rgba(9,9,12,.94) 42%, rgba(9,9,12,.97)),
        url("../img/korgset-hero-stage.webp");
    background-size: cover;
    background-position: 70% 38%;
    opacity: .82;
}
.studio::after {
    background:
        radial-gradient(ellipse at 12% 8%, rgba(255,153,73,.10), transparent 34%),
        radial-gradient(ellipse at 86% 30%, rgba(91,149,153,.10), transparent 36%);
    animation: studio-atmosphere 34s ease-in-out infinite alternate;
}
.studio > :not(.topbar) { position: relative; z-index: 1; }
.studio > .topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: 68px;
    padding: 10px clamp(14px,2vw,30px);
    border-bottom: 1px solid rgba(255,232,207,.12);
    background: rgba(12,11,13,.78);
    box-shadow: 0 12px 36px rgba(0,0,0,.18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.studio .brand { font-size: 21px; letter-spacing: -.04em; }
.studio .brand b { color: var(--target-glow); }
.studio .topbar .steps {
    gap: 3px;
    padding: 4px;
    border-color: rgba(255,255,255,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
}
.studio .topbar .steps li { padding: 6px 11px; border-radius: 999px; font-size: 12px; transition: background .2s,color .2s; }
.studio .topbar .steps li span { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 5px; border-radius: 50%; background: rgba(255,255,255,.08); color: var(--muted); font-size: 11px; }
.studio .topbar .steps li.on { background: rgba(255,166,77,.15); color: #ffe0bd; }
.studio .topbar .steps li.on span, .studio .topbar .steps li.done span { background: var(--target-glow); color: #211307; }
.studio .actions { gap: 9px; }
.studio .actions .btn { border-radius: 999px; padding-inline: 14px; }
.studio .actions .btn.primary { box-shadow: 0 6px 24px rgba(255,139,51,.20); }
.studio .actions .btn.primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 9px 28px rgba(255,139,51,.32); }
.studio .status { max-width: 220px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; background: rgba(255,255,255,.035); }
.studio .dot { box-shadow: 0 0 12px rgba(123,196,127,.6); }
.studio .dot.busy { box-shadow: 0 0 14px rgba(255,166,77,.8); }
.studio .badge { border-color: rgba(255,166,77,.26); border-radius: 999px; color: #ffd2a0; background: rgba(255,166,77,.08); }
.studio .panes { grid-template-columns: minmax(0,1fr) 190px minmax(0,1fr); gap: 15px; padding: 16px clamp(14px,2vw,30px); }
.studio .pane {
    position: relative;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 18px;
    background: linear-gradient(145deg,rgba(24,22,23,.91),rgba(15,15,19,.88));
    box-shadow: 0 24px 64px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.025);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    transition: border-color .25s, box-shadow .25s;
}
.studio .pane::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; z-index: 1; border-radius: 0 0 999px 999px; background: linear-gradient(90deg,transparent,var(--target-glow),transparent); opacity: .82; box-shadow: 0 0 18px rgba(255,179,92,.32); }
.studio .pane.source::before { background: linear-gradient(90deg,transparent,var(--source-glow),transparent); box-shadow: 0 0 18px rgba(117,212,197,.26); }
.studio .pane.target { border-top: 1px solid rgba(255,255,255,.11); }
.studio .pane:hover { border-color: rgba(255,255,255,.17); box-shadow: 0 26px 70px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.035); }
.studio .pane-head { min-height: 72px; padding: 14px 16px; border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.studio .pane-head .tag { padding: 5px 9px; border: 1px solid rgba(255,179,92,.24); border-radius: 999px; background: rgba(255,179,92,.08); color: #ffd09a; font-size: 10px; letter-spacing: .13em; }
.studio .pane.source .pane-head .tag { border-color: rgba(117,212,197,.23); background: rgba(117,212,197,.07); color: #a5e6dc; }
.studio .name { font-size: 15px; }
.studio .sub { margin-top: 2px; }
.studio .pane-head .btn { border-radius: 999px; padding: 7px 12px; }
.studio .banks { gap: 7px; padding: 12px 15px; border-color: rgba(255,255,255,.075); }
.studio .banks .chip, .studio .srcs .chip { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.035); transition: transform .16s,border-color .16s,background .16s; }
.studio .banks .chip:hover, .studio .srcs .chip:hover { transform: translateY(-1px); border-color: rgba(255,179,92,.4); }
.studio .banks .chip.on, .studio .srcs .chip.on { border-color: rgba(255,179,92,.5); background: rgba(255,166,77,.16); color: #ffe0bd; }
.studio .modelrow { padding: 10px 15px 0; }
.studio .modelrow select, .studio .search input { border-color: rgba(255,255,255,.12); border-radius: 10px; background: rgba(8,8,11,.55); }
.studio .tabs { border-color: rgba(255,255,255,.09); }
.studio .tab { transition: color .16s,border-color .16s; }
.studio .tab.on { color: #ffe0bd; border-bottom-color: var(--target-glow); }
.studio .search { padding-top: 12px; }
.studio .search input { padding: 9px 12px; }
.studio .search input:focus { border-color: rgba(255,179,92,.6); box-shadow: 0 0 0 3px rgba(255,166,77,.11); outline: 0; }
.studio .bankrow { border-color: rgba(255,255,255,.075); border-radius: 10px; background: rgba(255,255,255,.035); transition: border-color .16s,background .16s,transform .16s; }
.studio .bankrow:hover:not(.on) { transform: translateX(2px); border-color: rgba(255,255,255,.18); }
.studio .bankrow.on { border-color: rgba(255,179,92,.45); background: rgba(255,166,77,.13); color: #ffe1c0; }
.studio .cell { border-color: rgba(255,255,255,.075); border-radius: 9px; background: rgba(255,255,255,.045); transition: border-color .15s,background .15s,transform .15s,box-shadow .15s; }
.studio .cell:hover:not(.free) { transform: translateY(-1px); border-color: rgba(255,179,92,.42); background: rgba(255,166,77,.10); }
.studio .cell.free { border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.018); }
.studio .cell.sel { border-color: var(--target-glow); background: rgba(255,166,77,.18); box-shadow: 0 0 0 2px rgba(255,179,92,.16),0 0 24px rgba(255,166,77,.09); }
.studio .cell.drop, .studio .bankrow.drop { border-color: var(--source-glow); box-shadow: 0 0 0 2px rgba(117,212,197,.24),0 0 24px rgba(117,212,197,.12); }
.studio .pane-foot { border-color: rgba(255,255,255,.075); background: rgba(0,0,0,.08); }
.studio .memory { border-color: rgba(255,255,255,.075); background: rgba(0,0,0,.12); }
.studio .meter { height: 7px; border-radius: 999px; background: rgba(255,255,255,.09); }
.studio .meter div { border-radius: inherit; background: linear-gradient(90deg,#7bc47f,#c2dd7d); box-shadow: 0 0 12px rgba(123,196,127,.23); }
.studio .meter.over div { background: linear-gradient(90deg,#f2c14e,#f0605a); }
.studio .mid { position: relative; width: 190px; align-self: center; padding: 12px; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; background: rgba(14,13,16,.72); box-shadow: 0 20px 52px rgba(0,0,0,.25); backdrop-filter: blur(14px); }
.studio .mid .btn { width: 100%; border-radius: 11px; white-space: normal; }
.studio .mid .btn.primary { box-shadow: 0 8px 25px rgba(255,139,51,.18); }
.studio .mid .toggle { width: 100%; justify-content: space-between; border-color: rgba(255,255,255,.09); border-radius: 11px; background: rgba(255,255,255,.035); }
.studio .mid .btn.ghost { border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.025); }
.studio .mid .btn.ghost:hover:not(:disabled) { background: rgba(255,255,255,.075); }
.studio .bottom { gap: 15px; padding: 0 clamp(14px,2vw,30px) 20px; }
.studio .history, .studio .savebox { border-color: rgba(255,255,255,.10); border-radius: 16px; background: linear-gradient(145deg,rgba(24,22,23,.88),rgba(15,15,19,.88)); box-shadow: 0 18px 48px rgba(0,0,0,.20); backdrop-filter: blur(10px); }
.studio .history h4, .studio .savebox h4 { color: #f2e8dc; font-size: 14px; letter-spacing: .02em; }
.studio .hist { padding: 4px 0; }
.studio .savebox { border-color: rgba(255,179,92,.17); }
.studio .sv-price { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.09); }
.studio .sv-price b { color: #ffd09a; font-size: 28px; }
.studio .sv-btn { border-radius: 12px; box-shadow: 0 8px 26px rgba(255,139,51,.20); }
.studio .progress { overflow: hidden; background: rgba(255,255,255,.07); }
.studio .progress div { background: linear-gradient(90deg,rgba(255,139,51,.72),rgba(255,202,123,.95)); box-shadow: 0 0 18px rgba(255,166,77,.3); }
.studio .alert { margin: 10px 16px 0; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(26,24,24,.92); box-shadow: 0 12px 36px rgba(0,0,0,.18); }
.studio .alert.ok { border-color: rgba(123,196,127,.28); }
.studio .empty { margin: 14px; border: 1px dashed rgba(255,255,255,.17); border-radius: 14px; background: linear-gradient(140deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.studio .modal-bg, .studio ~ .modal-bg { background: rgba(5,5,8,.68); backdrop-filter: blur(9px); }
.studio ~ .modal-bg .modal { border-color: rgba(255,255,255,.15); border-radius: 18px; background: linear-gradient(145deg,#211e1d,#131318); box-shadow: 0 30px 100px rgba(0,0,0,.58); animation: studio-modal-in .22s ease-out both; }
.studio ~ .modal-bg .edit-modal select {
    appearance: none;
    -webkit-appearance: none;
    color-scheme: dark;
    width: 100%;
    min-height: 48px;
    padding: 11px 44px 11px 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    background-color: #121114;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23c9c1b9' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    color: #f4eee8;
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.studio ~ .modal-bg .edit-modal select:hover { border-color: rgba(255,153,51,.55); background-color: #181619; }
.studio ~ .modal-bg .edit-modal select:focus-visible { outline: none; border-color: #ff8a1c; box-shadow: 0 0 0 3px rgba(255,138,28,.2); }
.studio ~ .modal-bg .edit-modal select option { background: #19181b; color: #f4eee8; }
.checkout-bg { background: rgba(5,5,8,.76); backdrop-filter: blur(11px); }
.checkout { border-color: rgba(255,255,255,.14); border-radius: 20px; background: #151418; box-shadow: 0 35px 110px rgba(0,0,0,.65); }
.co-summary { background: radial-gradient(ellipse at top left,rgba(255,150,65,.14),transparent 52%),#111014; }
.co-item { border-color: rgba(255,255,255,.10); border-radius: 14px; }
.co-pay { border-radius: 12px; box-shadow: 0 9px 28px rgba(255,139,51,.2); }
.recovered { border-color: rgba(255,179,92,.3); border-radius: 12px; }
@keyframes studio-atmosphere { from { transform: translate3d(-1%,0,0) scale(1); opacity: .65; } to { transform: translate3d(1%,1%,0) scale(1.04); opacity: 1; } }
@keyframes studio-modal-in { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 1100px) {
    .studio .panes { grid-template-columns: minmax(0,1fr) 160px minmax(0,1fr); }
    .studio .mid { width: 160px; }
    .studio .topbar { gap: 10px; }
    .studio .actions { gap: 6px; }
}
@media (max-width: 900px) {
    .studio .panes { grid-template-columns: minmax(0,1fr); gap: 12px; padding: 14px; }
    .studio .pane { min-height: 420px; }
    .studio .mid { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .studio .mid .btn { width: auto; min-width: 130px; }
    .studio .mid .toggle { width: auto; flex: 1 1 220px; }
    .studio .bottom { padding-inline: 14px; }
    .studio .topbar { position: relative; }
}
@media (max-width: 640px) {
    .studio .topbar { align-items: flex-start; }
    .studio .brand { padding-top: 6px; }
    .studio .topbar .steps { order: 3; width: 100%; overflow-x: auto; justify-content: flex-start; }
    .studio .topbar .steps li { flex: none; }
    .studio .actions { margin-left: auto; justify-content: flex-end; }
    .studio .actions .status, .studio .actions .badge { display: none; }
    .studio .actions .btn { padding: 6px 10px; font-size: 12px; }
    .studio .pane { min-height: 380px; }
    .studio .pane-head { gap: 8px; padding: 12px; }
    .studio .pane-head .grow { flex-basis: calc(100% - 95px); }
    .studio .pane-head > .btn { margin-left: auto; }
    .studio .browser { padding-inline: 10px; }
    .studio .results, .studio .grid { padding-inline: 10px; }
    .studio .bottom { padding-bottom: 14px; }
    .studio .checkout { border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .studio::after { animation: none; }
    .studio .pane, .studio .bankrow, .studio .cell, .studio .btn, .studio .banks .chip { transition: none !important; }
    .studio ~ .modal-bg .modal { animation: none; }
}

/* Keep the slot pager in its own row above the memory footer; the footer must never cover its buttons. */
@media (min-width: 901px) {
    .studio .pane .browser {
        position: relative;
        z-index: 4;
        flex: 1 1 0;
        min-height: 0;
        overflow: hidden;
        grid-template-rows: minmax(0,1fr);
    }
    .studio .pane .slots { height: 100%; min-height: 0; overflow: hidden; }
    .studio .pane .grid10 { flex: 1 1 0; min-height: 0; overflow-y: auto; grid-template-rows: repeat(var(--slot-rows,5),minmax(0,1fr)); }
    .studio .pane .pager {
        position: relative;
        z-index: 8;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        max-width: 100%;
        min-height: 36px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        padding: 4px 2px 2px;
        border-top: 1px solid rgba(255,255,255,.08);
        background: rgba(12,11,14,.96);
        pointer-events: auto;
    }
    .studio .pane .pager .pg { position: relative; z-index: 9; flex: 0 0 auto; min-width: 34px; pointer-events: auto; touch-action: manipulation; }
    .studio .pane .pager .pginfo { flex: 0 0 auto; white-space: nowrap; }
}
.studio .pane .memory { position: relative; z-index: 3; flex: 0 0 auto; margin-top: 0; }
.studio .memory { container-type: inline-size; }
.studio .mem-top { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 4px 14px; }
.studio .mem-top span { min-width: 0; line-height: 1.45; }
.studio .mem-top span:last-child { text-align: right; }
.studio .mem-note { font-size: 11px; line-height: 1.35; }
@container (max-width: 560px) {
    .studio .mem-top { grid-template-columns: 1fr; }
    .studio .mem-top span:last-child { text-align: left; }
}
@media (max-width: 1100px) {
    .studio .mem-top { grid-template-columns: 1fr; }
    .studio .mem-top span:last-child { text-align: left; }
}
@media (max-width: 900px) {
    .studio .pane .browser { position: relative; z-index: 4; flex: 0 0 auto; min-height: 0; overflow: visible; grid-template-rows: auto; }
    .studio .pane .slots { height: auto; overflow: visible; }
    .studio .pane .grid10 { flex: none; min-height: 0; overflow: visible; grid-auto-flow: column; grid-template-columns: repeat(var(--slot-columns,2),minmax(0,1fr)); grid-template-rows: repeat(var(--slot-rows,5),minmax(52px,auto)); }
    .studio .pane .pager { position: relative; z-index: 8; flex-wrap: wrap; overflow: visible; background: rgba(12,11,14,.96); }
    .studio .pane .pager .pg { position: relative; z-index: 9; pointer-events: auto; touch-action: manipulation; }
}