/* Melo Voice — one calm graphite palette for the site and the editor.
   Amber is always the voice, teal is always the music (backing, original). */
:root {
  /* "Steppe studio": night-blue graphite (a pro studio), gold for the voice, sky-blue for the music / original,
     a quiet ram-horn ornament, and one warm gradient for the few things that must stand out */
  --night: #0f141b;      /* page */
  --night-2: #151b24;    /* panels */
  --night-3: #1d2530;    /* raised: buttons, inputs */
  --line: #263040;
  --paper: #e3e8ef;      /* text */
  --mist: #8e9aab;       /* secondary text */
  --sun: #e2b15b;        /* voice — steppe gold */
  --sky: #5ec4d6;        /* music / original — sky blue */
  --alert: #e0846f;
  --violet: #a78bfa;
  --grad: linear-gradient(135deg, #f3c873 0%, #e9a165 55%, #d98a8a 100%);
  --glow: 0 0 0 1px rgba(226, 177, 91, .35), 0 6px 22px rgba(226, 177, 91, .18);
  /* surfaces and details every design sets for itself */
  --surface: linear-gradient(180deg, #161d27, #131921);
  --surface-flat: #121821;
  --bar: linear-gradient(180deg, #141a23, #10151d);
  --glass: rgba(21, 27, 36, .94);
  --glass-soft: rgba(21, 27, 36, .55);
  --tile: linear-gradient(180deg, rgba(29,37,48,.7), rgba(21,27,36,.7));
  --tile-hover: linear-gradient(180deg, rgba(36,46,60,.8), rgba(21,27,36,.8));
  --on-grad: #1b130a;
  --seg-bg: #0f141b;
  --seg-on: linear-gradient(180deg, #26303d, #1d2530);
  --accent-soft: rgba(226,177,91,.12);
  --accent-line: rgba(226,177,91,.45);
  --title-grad: linear-gradient(180deg, #ffffff, #c9d3e0);
  --hero-light: radial-gradient(40% 55% at 72% 45%, rgba(226,177,91,.14), transparent 70%), radial-gradient(35% 50% at 88% 70%, rgba(167,139,250,.12), transparent 70%);
  --orn-opacity: .16;
  --orn-size: 48px 16px;
  --dev-mid: #c99a62;
  --dev-off: #bf7f72;
  --btn-shadow: 0 4px 16px rgba(233, 161, 101, .22);
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cg fill='none' stroke='%23e2b15b' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M24 15C24 7 18 3.5 14 5.5C10 7.5 11 12.5 15 11.5C18 10.7 17 7.6 15 7.6'/%3E%3Cpath d='M24 15C24 7 30 3.5 34 5.5C38 7.5 37 12.5 33 11.5C30 10.7 31 7.6 33 7.6'/%3E%3Cpath d='M0 15H8M40 15H48'/%3E%3C/g%3E%3C/svg%3E");
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --display: "Unbounded", "Onest", system-ui, sans-serif;
  --text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--night); color: var(--paper); }
body { margin: 0; font: 400 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- shared controls (also used by the editor) */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sun); font: 700 17px var(--display); }
.brand svg { width: 28px; height: 28px; }
.brand span { color: var(--paper); }
.brand-name { display: grid; line-height: 1.05; }
.brand-name small { font: 500 10.5px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mist); margin-top: 3px; }
select, input[type=email], input[type=password], input[type=number], input[type=tel] {
  background: var(--night-3); color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s);
  padding: 8px 10px; font: inherit; font-size: 14px;
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--night-3);
  color: var(--paper); padding: 11px 20px; border-radius: 999px; font: 600 15px var(--text); cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s; }
.btn:hover { border-color: #3a4350; background: #2a313c; }
.btn.primary { background: var(--grad); border-color: transparent; color: var(--on-grad); box-shadow: var(--btn-shadow); }
.btn.primary:hover { filter: brightness(1.06); box-shadow: var(--glow); }
.btn.small { padding: 7px 14px; font-size: 13px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.ghost { background: none; border: 1px solid var(--line); color: var(--paper); border-radius: 999px; padding: 7px 16px; font: 500 14px var(--text); cursor: pointer; }
.ghost:hover { border-color: #3a4350; background: var(--night-3); }
.link { background: none; border: 0; color: var(--sky); font: 500 14px var(--text); cursor: pointer; padding: 0; }
input[type=range] { accent-color: var(--sun); width: 100%; }
output { font-variant-numeric: tabular-nums; color: var(--paper); font-size: 13px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--paper); cursor: pointer; }
.check input { accent-color: var(--sun); width: 16px; height: 16px; }
.hint { color: var(--mist); font-size: 14px; margin: 16px 0 0; max-width: 75ch; }

/* ---------- top bar */
.site .top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 20px;
  background: rgba(22, 26, 32, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top-right select { padding: 6px 8px; font-size: 13px; }
.credits { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid #4a4231; color: var(--sun); border-radius: 999px;
  padding: 6px 14px; font: 600 13px var(--text); cursor: pointer; font-variant-numeric: tabular-nums; }
.credits:hover { background: rgba(201, 164, 98, .08); }
.site[data-view=app] #openStudio { display: none; }

/* views: the landing page for guests, the studio for the work */
.site[data-view=landing] .shell { display: none; }
.site[data-view=app] .landing { display: none; }

/* ===================================================================== landing */
.landing { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; padding: 64px 0 56px; }
.hero h1 { font: 700 clamp(30px, 4.2vw, 48px)/1.14 var(--display); margin: 0 0 18px; letter-spacing: -0.01em; max-width: 16ch; }
.hero p { color: var(--mist); font-size: 18px; max-width: 42ch; margin: 0 0 28px; }
.hero-note { display: block; margin-top: 14px; color: var(--mist); font-size: 14px; }
.split { margin: 0; }
.split canvas { width: 100%; height: auto; display: block; }
.split figcaption { display: flex; justify-content: space-between; font-size: 14px; color: var(--mist); margin-top: 8px; }
.lane::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
.lane.vocal::before { background: var(--sun); }
.lane.music::before { background: var(--sky); }

.tool-grid h2, .pricing h2 { font: 700 24px var(--display); margin: 0 0 18px; }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.tile { display: grid; gap: 6px; align-content: start; padding: 22px 20px 24px; background: var(--night-2); text-decoration: none; transition: background .15s; }
.tile:hover { background: var(--night-3); }
.tile svg { width: 26px; height: 26px; color: var(--sun); margin-bottom: 8px; }
.tile b { font: 600 16px var(--text); }
.tile span { color: var(--mist); font-size: 14px; line-height: 1.45; }

.pricing { padding: 64px 0 24px; }
.pricing > p { color: var(--mist); margin: -8px 0 22px; max-width: 60ch; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pack { display: grid; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--night-2); }
.pack b { font: 600 22px var(--display); }
.pack span { color: var(--mist); }
.pack .btn { margin-top: 12px; justify-self: start; }
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 48px 0 0; padding: 24px 0;
  color: var(--mist); font-size: 13px; border-top: 1px solid var(--line); }

/* ===================================================================== studio */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr) 380px; min-height: calc(100vh - 60px); }

/* left rail: the tools */
.rail { border-right: 1px solid var(--line); padding: 18px 12px; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 60px; height: calc(100vh - 60px); }
.tools-nav { display: grid; gap: 4px; }
.tools-nav a { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 11px 12px; border-radius: 10px;
  text-decoration: none; color: var(--mist); transition: background .15s, color .15s; }
.tools-nav a svg { width: 22px; height: 22px; margin-top: 1px; }
.tools-nav a b { display: block; font: 600 14px var(--text); color: var(--paper); }
.tools-nav a small { display: block; font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.tools-nav a:hover { background: var(--night-2); }
.tools-nav a.on { background: var(--night-3); box-shadow: inset 0 0 0 1px #343c48; }
.tools-nav a.on svg { color: var(--sun); }
.meter { margin-top: auto; display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-m); font-size: 13px; color: var(--mist); }
.meter b { font: 600 20px var(--display); color: var(--paper); font-variant-numeric: tabular-nums; }
.meter-bar { display: block; height: 4px; border-radius: 2px; background: var(--night-3); overflow: hidden; }
.meter-bar i { display: block; height: 100%; background: var(--sun); width: 0; transition: width .4s; }
.meter .btn { margin-top: 6px; }

/* middle: the tool */
.stage { padding: 32px clamp(20px, 3vw, 44px) 48px; min-width: 0; }
.tool { display: none; max-width: 760px; }
.tool.on { display: block; }
.stage-title { font: 700 26px/1.2 var(--display); margin: 0 0 8px; letter-spacing: -0.01em; }
.tool-lead { color: var(--mist); margin: 0 0 22px; max-width: 62ch; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* drop zones: after upload they show the file's real waveform */
.drop { --tint: var(--sky); position: relative; display: grid; gap: 4px; align-content: center; min-height: 132px; padding: 18px 20px;
  border: 1.5px dashed #343c48; border-radius: var(--radius-m); background: var(--night-2); color: var(--mist); cursor: pointer;
  transition: border-color .15s, background .15s; overflow: hidden; }
.drop.vocal { --tint: var(--sun); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.drop::before { content: ""; width: 34px; height: 34px; border-radius: 50%; background: var(--night-3) no-repeat center / 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V7m0 0l-5 5m5-5l5 5M5 4h14' fill='none' stroke='%23858f9d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  margin-bottom: 8px; }
.drop-label { font: 500 15px var(--text); color: var(--paper); }
.drop-label .meta { display: block; font-size: 13px; color: var(--mist); font-weight: 400; margin-top: 2px; }
.drop-sub { font-size: 12.5px; color: var(--mist); }
.drop:hover { border-color: #46505e; }
.drop.over { border-color: var(--tint); background: var(--night-3); }
.drop.busy { opacity: .65; }
.drop.has { border-style: solid; border-color: color-mix(in srgb, var(--tint) 45%, var(--line)); align-content: end; min-height: 132px; }
.drop.has::before { display: none; }
.drop .wave { position: absolute; left: 0; right: 0; top: 12px; height: 62px; width: 100%; pointer-events: none; opacity: .9; }
.drop.has .drop-label { position: relative; z-index: 1; padding-top: 64px; }

/* settings */
.panel { margin-top: 18px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--night-2); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px 26px; }
.field { display: grid; gap: 8px; font-size: 13.5px; color: var(--mist); align-content: start; }
.field.range { grid-template-columns: 1fr auto; gap: 8px 10px; }
.field.range input { grid-column: 1 / -1; }
.field.range output { color: var(--paper); }
.opts .check { align-self: end; padding-bottom: 6px; }
.segmented { display: flex; padding: 3px; gap: 3px; border-radius: 10px; background: var(--night-3); border: 1px solid var(--line); }
.segmented label { flex: 1; position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.segmented span { display: block; text-align: center; padding: 7px 10px; border-radius: 7px; color: var(--mist); font-size: 13px; line-height: 1.3; }
.segmented input:checked + span { background: var(--night-2); color: var(--paper); box-shadow: 0 1px 0 rgba(0, 0, 0, .25), inset 0 0 0 1px #3a4350; }
.segmented input:focus-visible + span { outline: 2px solid var(--sky); outline-offset: 1px; }
.actions { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.cost { color: var(--mist); font-size: 14px; font-variant-numeric: tabular-nums; }

.admin { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 760px; }
.admin h2 { font: 600 16px var(--text); margin: 0 0 12px; }
.admin-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.admin-form input[type=number] { width: 110px; }

/* right: jobs */
.queue { border-left: 1px solid var(--line); padding: 26px 18px 32px; background: var(--surface-flat); }
.queue h2 { font: 600 15px var(--text); margin: 0 0 14px; display: flex; align-items: baseline; gap: 8px; }
.queue h2 small { color: var(--mist); font-weight: 400; font-size: 13px; }
.jobs { display: grid; gap: 12px; }
.queue-empty { color: var(--mist); font-size: 14px; margin: 0; padding: 28px 16px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-m); }
.queue-note { color: var(--mist); font-size: 12.5px; margin: 16px 2px 0; }
.job { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--night-2); padding: 14px; display: grid; gap: 12px; }
.job-head { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; }
.job-head svg { width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: var(--night-3); color: var(--sun); }
.job-head b { display: block; font: 600 14px var(--text); }
.job-head small { color: var(--mist); font-size: 12.5px; }
.pill { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--night-3); color: var(--mist); white-space: nowrap; }
.pill.done { color: #9cc3a0; background: rgba(140, 190, 145, .1); }
.pill.running, .pill.queued { color: var(--sun); background: rgba(201, 164, 98, .1); }
.pill.error { color: var(--alert); background: rgba(201, 130, 116, .1); }
.bar { height: 4px; border-radius: 2px; background: var(--night-3); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--sun); width: 0; transition: width .4s; }
.job .err { color: var(--alert); font-size: 13.5px; margin: 0; }
.job .btn { justify-self: start; }

/* output player: play button, waveform you can click to seek, downloads */
.outs { display: grid; gap: 10px; }
.out { --tint: var(--sky); display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; align-items: center; }
.out.vocal { --tint: var(--sun); }
.out .play { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #3a4350; background: var(--night-3);
  color: var(--tint); display: grid; place-items: center; cursor: pointer; padding: 0; }
.out .play svg { width: 16px; height: 16px; }
.out .play:hover { background: #2a313c; }
.out-top { display: flex; align-items: baseline; gap: 8px; font-size: 13px; min-width: 0; }
.out-top b { font-weight: 600; }
.out-top .t { color: var(--mist); font-variant-numeric: tabular-nums; font-size: 12px; }
.out-top .dl { margin-left: auto; display: flex; gap: 4px; }
.out-top .dl a { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--mist); text-decoration: none; padding: 2px 7px;
  border: 1px solid var(--line); border-radius: 999px; }
.out-top .dl a:hover { color: var(--paper); border-color: #3a4350; }
.out-top .dl svg { width: 12px; height: 12px; }
.out canvas { width: 100%; height: 30px; display: block; cursor: pointer; }

/* ---------- dialogs */
dialog { background: var(--night-2); color: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 28px; width: min(420px, 92vw); }
dialog::backdrop { background: rgba(10, 12, 16, .7); backdrop-filter: blur(3px); }
dialog h3 { font: 700 19px var(--display); margin: 0 0 18px; }
dialog label { display: grid; gap: 6px; margin-bottom: 14px; font-size: 14px; color: var(--mist); }
dialog label.check { display: flex; color: var(--paper); }
dialog input[type=email], dialog input[type=password], dialog input[type=tel] { padding: 10px 12px; font-size: 15px; }
dialog .err { color: var(--alert); font-size: 14px; min-height: 1.2em; margin: 4px 0 0; }
#buyBody { display: grid; gap: 10px; }
#buyBody .pack { grid-template-columns: 1fr auto; align-items: center; }
#buyBody .pack .btn { margin: 0; }

/* ---------- small screens */
@media (max-width: 1180px) {
  .shell { grid-template-columns: 220px minmax(0, 1fr); }
  .queue { grid-column: 2; border-left: 0; border-top: 1px solid var(--line); background: none; padding: 24px clamp(20px, 3vw, 44px) 40px; }
  .queue .jobs { max-width: 760px; }
}
@media (max-width: 860px) {
  .site .top { gap: 12px; padding: 0 14px; }
  .site .top .brand span { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 28px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .packs { grid-template-columns: 1fr; }
  .shell { display: block; }
  .rail { position: sticky; top: 60px; z-index: 4; height: auto; flex-direction: row; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line);
    background: rgba(22, 26, 32, .94); backdrop-filter: blur(10px); }
  .tools-nav { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .tools-nav a { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 8px 4px; gap: 4px; }
  .tools-nav a small { display: none; }
  .tools-nav a b { font-size: 12px; }
  .meter { display: none !important; }
  .stage { padding: 22px 16px 32px; }
  .pair { grid-template-columns: 1fr; }
  .queue { padding: 22px 16px 32px; }
}
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } .top-right select { max-width: 92px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


/* ===================================================================== steppe studio details */
/* a thin ram-horn ornament under the top bar */
.site .top { border-bottom: 0; }
.site .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 16px; background: var(--ornament) repeat-x center / var(--orn-size);
  opacity: var(--orn-opacity); pointer-events: none; }
.site .top::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sun) 40%, transparent), color-mix(in srgb, var(--sky) 40%, transparent), transparent); }
/* hero: soft gold and violet light behind the waveform, the ornament very faint */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -40px -10vw -20px; z-index: -1; pointer-events: none;
  background: var(--hero-light); }
.hero h1 { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.split { padding: 18px; border-radius: var(--radius-l); background: var(--glass-soft); border: 1px solid var(--line); backdrop-filter: blur(6px); }
/* tool tiles and packs: glassy cards with a gold edge on hover */
.tiles { background: none; border: 0; gap: 12px; }
.tile { border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--tile); }
.tile:hover { background: var(--tile-hover); box-shadow: var(--glow); }
.tile svg { color: var(--sun); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sun) 35%, transparent)); }
.pack { background: var(--surface); }
.pack:nth-child(2) { box-shadow: var(--glow); border-color: var(--accent-line); }
/* studio: glass panels, the active tool glows softly */
.rail { background: var(--glass-soft); }
.tools-nav a.on { background: linear-gradient(90deg, var(--accent-soft), transparent); box-shadow: inset 2px 0 0 var(--sun), inset 0 0 0 1px var(--line); }
.drop { background: var(--surface); }
.drop.over { box-shadow: 0 0 0 1px var(--tint), 0 0 24px color-mix(in srgb, var(--tint) 25%, transparent); }
.panel, .job, .meter { background: var(--surface); }
.queue { background: var(--surface-flat); }
.meter-bar i, .bar i { background: var(--grad); }
.pill.done { color: #8fd6a0; background: rgba(120, 200, 140, .1); }
.stage-title { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Kaspi payment */
.kaspi-form { display: grid; gap: 12px; }
.kp-label { margin: 0; color: var(--mist); font-size: 14px; }
.kp-packs { display: grid; gap: 8px; }
.kp-pack { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-m); cursor: pointer; }
.kp-pack:has(input:checked) { border-color: #f14635; background: color-mix(in srgb, #f14635 10%, transparent); }
.kp-pack input { accent-color: #f14635; margin: 0; }
.kp-pack b { font: 600 16px var(--display); }
.kp-pack span { color: var(--mist); font-variant-numeric: tabular-nums; }
.kp-phone { display: grid; gap: 6px; font-size: 14px; color: var(--mist); }
.kp-phone input { font-size: 17px; letter-spacing: .02em; }
.btn.kaspi-btn, a.btn.kaspi-btn { background: #f14635; background-image: none; box-shadow: none; border-color: #f14635; color: #fff; justify-content: center; text-align: center; }
.kaspi-btn:hover { filter: brightness(1.06); }
.kp-pay { display: grid; gap: 14px; }
.kp-sum { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; padding: 14px; border-radius: var(--radius-m); background: color-mix(in srgb, var(--paper) 5%, transparent); }
.kp-sum span { color: var(--mist); font-size: 13px; }
.kp-sum b { font: 700 18px var(--display); font-variant-numeric: tabular-nums; }
.kp-code { letter-spacing: .08em; }
.kp-qr { margin: 0; display: grid; justify-items: center; gap: 6px; }
.kp-qr img { width: min(220px, 70vw); aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; padding: 8px; }
.kp-qr figcaption, .kp-note { color: var(--mist); font-size: 13.5px; line-height: 1.45; margin: 0; }
.kp-wait { line-height: 1.5; }
.kp-wait.ok { color: #49c47a; font-weight: 600; }
.kp-mine { margin-top: 16px; font-size: 13.5px; }
.kp-mine summary { cursor: pointer; color: var(--mist); }
.kp-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); align-items: center; }
.kp-row .link { grid-column: 1 / -1; justify-self: start; }
.kp-st { color: var(--mist); }
.s-confirmed .kp-st { color: #49c47a; }
.s-paid .kp-st { color: #f5b83d; }
.s-rejected .kp-st { color: #f14635; }
.ao-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ao-list { display: grid; gap: 8px; margin-bottom: 28px; }
.ao-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-m); font-size: 14px; }
.ao-row.s-paid { border-color: #f5b83d; }
.ao-code { font: 700 15px var(--display); letter-spacing: .06em; }
.ao-who, .ao-when { color: var(--mist); }
.ao-row .btn.small { padding: 6px 12px; }

/* phone header: the name stays, the design picker moves to the footer */
@media (max-width: 860px) {
  .site .top .brand .brand-name { display: grid; font-size: 15px; }
}
@media (max-width: 520px) {
  .top-right { gap: 6px; }
  .top-right #theme { display: none; }
  .top-right #lang { max-width: 64px; }
  .top-right .btn.small { padding: 7px 11px; font-size: 12.5px; white-space: nowrap; }
  .top-right .ghost { padding: 6px 10px; }
  .brand-name small { font-size: 8.5px; letter-spacing: .06em; }
  .foot-theme { display: inline-flex !important; }
}
.foot-theme { display: none; align-items: center; gap: 8px; }

/* decorative glows must never make the page scroll sideways */
html, body { overflow-x: clip; }
.brand-name, .brand-name small { white-space: nowrap; }
@media (max-width: 520px) { .site .top .brand .brand-name { font-size: 14px; } }
@media (max-width: 400px) {
  .top-right #lang { display: none; }
  .foot-lang { display: inline-flex !important; }
  .site .top { gap: 8px; padding: 0 10px; }
  .top-right .btn.small { padding: 7px 10px; font-size: 12px; }
}
@media (max-width: 340px) { .brand-name small { display: none; } }
.foot-lang { display: none; align-items: center; gap: 8px; }

/* admin panel */
.ad-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 28px; }
.ad-tile { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--night-2); }
.ad-tile b { font: 700 22px var(--display); font-variant-numeric: tabular-nums; }
.ad-label { color: var(--mist); font-size: 13px; }
.ad-sub { color: var(--mist); font-size: 12px; }
.ad-search { max-width: 260px; padding: 7px 12px; font-size: 14px; }
.ad-users { display: grid; gap: 6px; margin: 10px 0 28px; max-height: 520px; overflow: auto; }
.ad-user { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-m); font-size: 14px; }
.ad-mail { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-cred { font-variant-numeric: tabular-nums; color: var(--sun); justify-self: end; }
.ad-meta { color: var(--mist); font-size: 12.5px; }
.ad-btns { display: flex; gap: 6px; justify-self: end; flex-wrap: wrap; }
.ad-btns .btn.small { padding: 5px 10px; font-size: 12.5px; }
.ad-flash { position: absolute; right: 12px; top: -10px; background: #49c47a; color: #0b1a10; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.ad-packs { display: grid; gap: 10px; margin: 10px 0 28px; }
.ad-pack { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad-pack input { width: 110px; }
.ad-unit { color: var(--mist); font-size: 13px; min-width: 52px; }
.ad-packs-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ad-free { display: inline-flex; align-items: center; gap: 8px; color: var(--mist); font-size: 13px; }
.ad-free input { width: 70px; }
@media (max-width: 520px) { .ad-user { grid-template-columns: 1fr; } .ad-cred, .ad-btns { justify-self: start; } }