/*
THESIS: A compact command instrument floats inside one continuous midnight-to-violet operations field; it refuses the incumbent orange card stack.
OWN-WORLD: Navy perimeter, broad indigo/violet radiance, mint readiness, amber data, cool hairlines, and compact control geometry.
STORY: Verify a key, read its status, tune parameters, preview display choices, then save or launch without losing context.
FIRST VIEWPORT: A slim status rail spans the stage; product context anchors the left and the authenticated console forms one dense instrument on the right.
FORM: Pinned user reference, Operate mode; two-column command console staged from the supplied screenshot.
*/

:root {
  color-scheme: dark;
  --bg: #07111f;
  --surface: #101a34;
  --surface-soft: #17244a;
  --surface-raised: #26366b;
  --line: rgba(205, 218, 255, .14);
  --line-strong: rgba(209, 223, 255, .25);
  --text: #f8fbff;
  --muted: #b4c0d9;
  --dim: #71809f;
  --accent: #67e2d1;
  --accent2: #89f1e3;
  --accent-soft: rgba(103, 226, 209, .15);
  --accent-faint: rgba(103, 226, 209, .075);
  --ink: #07111f;
  --success: #67e2d1;
  --danger: #ff879c;
  --warning: #ffd069;
  --focus: rgba(103, 226, 209, .34);
  --violet: #6b53e5;
  --violet-deep: #37277b;
  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-soft: 0 28px 70px rgba(2, 6, 22, .36);
  --shadow-float: 0 36px 100px rgba(3, 7, 24, .48);
}

html { background: var(--bg); }

html,
body,
button,
input,
output { font-family: "LINE Seed Sans TH", var(--font-ui); }

body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 42% 76% at 49% 51%, rgba(96, 86, 238, .75) 0%, rgba(73, 56, 170, .54) 34%, rgba(31, 48, 99, .35) 61%, transparent 82%),
    radial-gradient(circle at 26% 54%, rgba(55, 126, 210, .34), transparent 36rem),
    radial-gradient(circle at 72% 44%, rgba(103, 68, 205, .28), transparent 42rem),
    linear-gradient(90deg, #06101d 0%, #0b1830 19%, #172a59 49%, #101b3c 79%, #060f1c 100%);
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 8, 18, .36), transparent 18%, transparent 78%, rgba(2, 7, 19, .44));
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .14;
  background-image: radial-gradient(rgba(221, 232, 255, .34) .45px, transparent .45px);
  background-size: 4px 4px;
  mask-image: linear-gradient(to bottom, black, rgba(0,0,0,.5) 60%, transparent);
}

.ambient { display: block; }
.ambient i:first-child {
  width: 54vw;
  height: 54vw;
  left: 23vw;
  top: 16vh;
  background: rgba(87, 96, 255, .16);
  filter: blur(90px);
}
.ambient i:last-child { display: none; }

.topbar,
footer {
  width: min(1120px, calc(100% - 48px));
  max-width: 1120px;
}

.topbar {
  min-height: 64px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(105deg, rgba(10, 26, 49, .9), rgba(42, 43, 113, .74));
  box-shadow: 0 15px 44px rgba(2, 7, 22, .24);
  backdrop-filter: blur(18px) saturate(125%);
}

.brand { gap: 11px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: #102139;
  background: linear-gradient(135deg, #70eadb, #a1e5d4 58%, #ffd568);
  box-shadow: 0 7px 18px rgba(63, 224, 202, .16);
}
.brand-mark img { display: none; }
.brand-mark span { font: 800 10px/1 var(--font-code); letter-spacing: -.04em; }
.brand b { color: var(--text); font-size: 14px; font-weight: 800; }
.brand small { margin-top: 2px; color: #7890b1; font: 600 7px/1.3 var(--font-code); letter-spacing: .08em; }

.topbar nav { gap: 8px; }
.icon-button,
.language,
.online {
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(12, 24, 56, .38);
}
.icon-button { min-height: 32px; padding-inline: 11px; color: #d1daf0; }
.icon-button > span:first-child { color: var(--warning); }
.language { padding: 2px; }
.language button {
  min-width: 34px;
  min-height: 27px;
  border-radius: 3px;
  color: #8290ad;
  font-size: 10px;
  font-weight: 700;
}
.language button.active { color: var(--ink); background: var(--accent); box-shadow: none; }
.online { min-height: 32px; padding-inline: 10px; color: #c2cbe0; font-size: 10px; }
.online i { width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 0 4px rgba(103, 226, 209, .1); }

main {
  width: min(1000px, calc(100% - 48px)) !important;
  max-width: 1000px;
  grid-template-columns: minmax(320px, 370px) minmax(0, 520px);
  gap: clamp(70px, 8vw, 112px);
  min-height: calc(100vh - 152px);
  padding: 52px 0 72px;
  align-items: center;
}

.intro { max-width: 370px; }
.node-badge {
  gap: 8px;
  margin-bottom: 22px;
  padding: 0 0 0 34px;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  background: none;
  font-size: 8px;
  letter-spacing: .02em;
  position: relative;
}
.node-badge::before { content: ""; position: absolute; left: 0; width: 25px; height: 1px; background: var(--accent); }
.node-badge .pulse { display: none; }
.node-badge span:nth-child(2) { display: none; }

.intro h1,
[lang="th"] .intro h1 {
  max-width: 370px;
  font-size: clamp(50px, 5vw, 72px);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.035em;
}
.intro h1 > span:first-child { color: #fff; }
.intro h1 > span:last-child {
  color: #a9b8ce;
  font-size: .72em;
  font-weight: 400;
  white-space: nowrap;
}
.lead { margin: 18px 0 24px; color: #aebbd2; font-size: 13px; line-height: 1.7; }

.trust-row {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(7, 20, 47, .57);
}
.trust-row > span { padding: 13px 14px; color: var(--warning); }
.trust-row > span + span { border-color: var(--line); }
.trust-row small { margin-top: 5px; color: #7e8eae; }

.gateway-visual { display: none; }
.product-guide {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(8, 25, 54, .55);
  box-shadow: 0 18px 48px rgba(2, 8, 25, .16);
}
.guide-head { color: #7083a5; }
.guide-head strong { color: var(--accent); }
.mouse-shell { border-color: rgba(159, 184, 222, .55); background: rgba(3, 14, 29, .72); }
.mouse-shell i { background: var(--warning); }
.mouse-shell b,
.mouse-shell em,
.numpad-grid kbd { border-color: var(--line-strong); border-radius: 3px; background: rgba(255,255,255,.035); }

.glass,
.console {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(79, 65, 170, .84), rgba(69, 49, 145, .88));
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(24px) saturate(125%);
}

body:has(#login-view:not(.hidden)) main {
  width: min(1000px, calc(100% - 48px)) !important;
  min-height: calc(100vh - 152px);
  grid-template-columns: minmax(320px, 370px) minmax(0, 460px);
  padding: 52px 0 72px;
}
body:has(#login-view:not(.hidden)) .intro { display: block; }
body:has(#login-view:not(.hidden)) .topbar,
body:has(#login-view:not(.hidden)) footer { display: flex; }

.auth-card {
  padding: 32px;
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(80, 66, 173, .91), rgba(58, 43, 129, .95));
}
.card-head { padding-bottom: 13px; border-color: var(--line); color: #a7b4d0; }
.access-icon,
.panel-icon { border: 0; border-radius: 4px; color: var(--accent); background: rgba(103, 226, 209, .1); }
.auth-card h2 { margin-top: 25px; color: #fff; font-size: 28px; font-weight: 800; }
.auth-card > p,
.auth-card form > label { color: #c0cae0; }
.key-field {
  min-height: 54px;
  border-color: var(--line-strong);
  border-radius: 5px;
  background: rgba(19, 22, 67, .52);
}
.key-field:focus-within { border-color: var(--accent); background: rgba(17, 31, 74, .64); box-shadow: 0 0 0 3px var(--accent-soft); }
.key-field span { color: var(--warning); border-color: var(--line); }
.key-field input { color: #fff; font-family: var(--font-code); }

.primary,
.secondary,
.ghost,
.step,
.preset { border-radius: var(--radius-xs); }
.primary { color: var(--ink); background: var(--accent); }
.primary:hover:not(:disabled) { color: var(--ink); background: var(--accent2); box-shadow: 0 9px 24px rgba(42, 226, 204, .19); transform: translateY(-1px); }
.primary:disabled { color: #677995; background: rgba(126, 144, 184, .22); opacity: 1; }
.secondary { border-color: rgba(255, 208, 105, .66); color: var(--warning); background: rgba(18, 25, 68, .28); }
.secondary:hover { border-color: var(--warning); background: rgba(255, 208, 105, .09); }
.ghost { color: #d3dcf0; }

.console { overflow: hidden; padding: 0; }
.console-heading { padding: 28px 126px 16px 28px; }
.console-heading h2 { margin-top: 7px; color: #fff; font-size: 25px; font-weight: 800; letter-spacing: -.025em; }
.console-kicker { color: var(--accent); }
.product-chip { background: var(--accent); color: var(--ink); border-radius: 3px; }

.license-strip {
  margin: 0 28px 4px;
  border-color: var(--line);
  border-radius: 5px;
  background: rgba(20, 19, 67, .5);
  box-shadow: none;
}
.license-strip > * { border-color: var(--line); }
.license-strip strong,
.expiry { color: var(--warning); }
.expiry small { color: #8797b9; }
.status-dot { width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 0 4px rgba(103,226,209,.1); }
.license-strip .ghost { top: 27px; right: 28px; border-color: var(--line-strong); background: rgba(25, 29, 83, .34); }

.console-grid { padding: 0 28px; }
.console .glass { border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.panel { padding: 22px 0 24px; }
.panel-title { margin-bottom: 18px; padding-bottom: 13px; border-color: var(--line); }
.panel-title h2 { color: #fff; font-size: 15px; font-weight: 800; }
.panel-title p { color: #8797ba; }

.aim-groups { gap: 24px; }
.aim-group { min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.aim-group-title { margin-bottom: 17px; }
.aim-group-title > span,
.preset-index { display: block; width: auto; height: auto; color: #93a5cf; background: none; font: 600 8px/1 var(--font-code); }
.aim-group-title b { color: #fff; font-size: 12px; }
.aim-group-title small { color: #7f90b2; }
.range-row { margin-bottom: 20px; }
.range-head { margin-bottom: 8px; color: #bdc8de; }
.range-head label { font-size: 11px; }
.range-head output { min-width: 30px; height: 24px; padding: 0 7px; border: 0; color: var(--accent); background: transparent; font-size: 12px; }
.range-line { grid-template-columns: 29px minmax(0,1fr) 29px; gap: 8px; }
.step { width: 29px; height: 29px; border-color: var(--line-strong); color: #adbbd6; background: rgba(84, 78, 174, .5); font-size: 16px; }
.step:hover { border-color: var(--accent); color: var(--accent); background: rgba(103,226,209,.08); }
input[type="range"] { height: 24px; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--accent) 0 var(--range-progress), rgba(174,190,226,.3) var(--range-progress) 100%); box-shadow: none; }
input[type="range"]::-webkit-slider-thumb { width: 13px; height: 13px; margin-top: -4.5px; border: 2px solid #284267; background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
input[type="range"]::-moz-range-track { height: 4px; background: rgba(174,190,226,.3); }
input[type="range"]::-moz-range-progress { height: 4px; background: var(--accent); }
input[type="range"]::-moz-range-thumb { width: 11px; height: 11px; border: 2px solid #284267; background: var(--accent); }
.range-scale { color: #8594b4; }

.visual-system-grid { border-top: 1px solid var(--line); }
.preview-panel { padding-bottom: 20px; }
.preview-workspace { min-height: 190px; border-color: var(--line); border-radius: 6px; background: rgba(8, 22, 55, .36); }
.visual-panel { border-top: 1px solid var(--line) !important; }
.visual-settings-grid { border-color: var(--line); border-radius: 5px; background: rgba(24, 25, 79, .16); }
.visual-cell { min-height: 53px; border-color: var(--line); }
.visual-cell label { color: #eef3ff; font-size: 11px; }
.visual-cell small { color: #7f91b6; }
.switch { border-color: var(--line-strong); background: rgba(111, 126, 166, .35); }
.switch::before { background: #93a1bd; }
.switch:checked { border-color: var(--accent); background: rgba(103,226,209,.2); }
.switch:checked::before { background: var(--accent); }
input[type="color"] { border-color: #17204f; border-radius: 3px; }
.color-value output { color: #91a1c1; }

.presets { border-color: var(--line); }
.preset { border-color: var(--line); color: #aab8d5; background: rgba(34, 31, 94, .24); }
.preset:hover { color: #fff; background: rgba(103,226,209,.08); }
.preset.selected { color: #171532; background: #c9bcff; border-color: #c9bcff; }
.preset small { color: inherit; opacity: .65; }

.actions { padding: 0 28px 28px; border-top-color: var(--line); }
.change-state { color: #9eb0d2; }
.change-state.dirty { color: var(--warning); }

footer { color: #7283a4; border-color: var(--line); }
.footer-brand img { display: none; }

dialog {
  border-color: var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--text);
  background: linear-gradient(145deg, #27326f, #211b58);
  box-shadow: var(--shadow-float);
}
dialog::backdrop { background: rgba(3, 8, 22, .72); backdrop-filter: blur(8px); }
.dialog-kicker { color: var(--accent); }
.hotkey-list p,
#query-result p { border-color: var(--line); background: rgba(10, 21, 54, .24); }
.hotkey-list kbd { color: var(--warning); background: rgba(255,208,105,.1); }
.toast { border-color: var(--line-strong); color: var(--text); background: #172a55; }

*:focus-visible { outline-color: var(--accent); }

@media (max-width: 980px) {
  main,
  body:has(#login-view:not(.hidden)) main {
    width: min(700px, calc(100% - 40px)) !important;
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 42px 0 64px;
  }
  .intro { max-width: 520px; }
  .intro h1 > span:last-child { white-space: normal; }
  .console,
  .auth-card { width: 100%; }
}

@media (min-width: 981px) {
  .console { zoom: .78; }
  .console-heading { padding-block: 22px 12px; }
  .console-heading h2 { margin-top: 5px; font-size: 23px; }
  .license-strip { min-height: 52px; }
  .panel { padding-block: 16px 18px; }
  .panel-title { margin-bottom: 13px; padding-bottom: 10px; }
  .aim-group-title { margin-bottom: 12px; }
  .range-row { margin-bottom: 13px; }
  .range-head { margin-bottom: 5px; }
  .visual-cell { min-height: 43px; padding-block: 7px; }
  .presets { margin-top: 16px; padding-top: 13px; }
  .preset { min-height: 48px; padding-block: 7px; }
  .visual-panel { padding-top: 16px; }
  .actions { padding-bottom: 22px; }
}

@media (max-width: 640px) {
  .topbar,
  footer { width: min(100% - 24px, 1120px); }
  .topbar { min-height: 58px; margin-top: 8px; padding: 8px 9px; }
  .brand small,
  .online span,
  .icon-button span:last-child { display: none; }
  .online { padding-inline: 9px; }
  main,
  body:has(#login-view:not(.hidden)) main { width: calc(100% - 24px) !important; padding: 34px 0 50px; }
  .intro h1,
  [lang="th"] .intro h1 { font-size: clamp(44px, 14vw, 60px); }
  .auth-card { padding: 26px 20px; }
  .console-heading { padding: 24px 110px 14px 20px; }
  .license-strip { margin: 0 20px 4px; }
  .license-strip .ghost { top: 23px; right: 20px; }
  .console-grid { padding: 0 20px; }
  .actions { padding: 0 20px 22px; }
  .aim-groups { grid-template-columns: 1fr; }
  .visual-settings-grid { grid-template-columns: 1fr; }
  .visual-cell:nth-child(odd) { border-right: 0; }
  .presets { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .auth-actions,
  .actions { grid-template-columns: 1fr; }
  .change-state { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Reference-alignment pass: preserve the supplied control flow while matching
   the upstream console's stage, density, and pointer-reactive light field. */
#galaxy-canvas,
.space-veil {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#galaxy-canvas { z-index: 0; display: block; }
.space-veil {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(1, 5, 16, .02), rgba(2, 7, 22, .045) 52%, rgba(1, 4, 14, .2)),
    linear-gradient(90deg, rgba(1, 5, 16, .13), rgba(1, 6, 20, .015) 50%, rgba(2, 5, 18, .09));
}

body {
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(140, 100, 255, .36), transparent 34rem),
    radial-gradient(circle at 32% 40%, rgba(18, 113, 255, .48), transparent 40rem),
    radial-gradient(circle at 78% 38%, rgba(107, 74, 255, .52), transparent 42rem),
    #03080a;
}

body::before,
body::after,
.ambient { display: none; }

.topbar,
main,
footer {
  position: relative;
  z-index: 2;
}

.topbar,
footer {
  width: min(1217px, calc(100% - 48px));
  max-width: 1217px;
}

.topbar {
  min-height: 78px;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
  box-shadow: 0 4px 90px rgba(0, 0, 0, .1);
  backdrop-filter: blur(10px);
}

main {
  width: min(1150px, calc(100% - 130px)) !important;
  max-width: 1150px;
  min-height: calc(100vh - 96px);
  grid-template-columns: 470px 575px;
  gap: 90px;
  padding: 46px 0 56px;
  align-items: center;
}

.intro { max-width: 470px; }
.intro h1,
[lang="th"] .intro h1 {
  max-width: 470px;
  font-size: 62px;
  line-height: 1.04;
  font-weight: 800;
}
.intro h1 > span:last-child { font-size: .72em; }

.glass,
.console {
  border-radius: 8px;
  background: rgba(255, 255, 255, .024);
  box-shadow: 0 4px 90px rgba(0, 0, 0, .1);
  backdrop-filter: blur(10px);
}

.console {
  width: 575px;
  zoom: 1;
}

.console-heading { min-height: 60px; padding: 34px 34px 12px; }
.console-heading h2 { margin-top: 7px; font-size: 26px; line-height: 1.2; }
.license-strip { min-height: 56px; margin: 8px 34px 0; }
.license-strip .ghost { top: 34px; right: 34px; }
.console-grid { padding: 0 34px; }
.aim-panel > .panel-title { display: none; }
.aim-panel { padding: 20px 0 22px; }
.aim-groups { gap: 24px; }
.aim-group-title { margin-bottom: 13px; }
.range-row { margin-bottom: 14px; }
.range-head { margin-bottom: 6px; }
.range-line { grid-template-columns: 30px minmax(0, 1fr) 30px; }
.step { width: 30px; height: 30px; }

.visual-panel { padding: 20px 0 22px; border-top: 1px solid var(--line) !important; }
.visual-panel > .panel-title { margin-bottom: 14px; padding-bottom: 11px; }
.visual-cell { min-height: 49px; padding-block: 8px; }
.presets { margin-top: 20px; padding-top: 16px; }
.preset { min-height: 52px; padding-block: 7px; }

.actions {
  min-height: 44px;
  padding: 0 34px 34px;
  display: flex;
  gap: 8px;
  border-top: 0;
}
.actions .change-state {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.actions .primary,
.actions .secondary { min-height: 44px; flex: 1 1 0; }

/* Density pass: match the reference console without scaling or blurry zoom. */
.aim-panel { padding: 16px 0 14px; }
.aim-group-title { padding-bottom: 5px; margin-bottom: 7px; }
.range-row,
.range-row:last-child { margin: 0 0 8px; }
.range-row:last-child { margin-bottom: 0; }
.range-head { margin-bottom: 3px; }
.range-scale { display: none; }

.visual-panel { padding: 16px 0 14px; }
.visual-panel > .panel-title { margin-bottom: 9px; padding-bottom: 8px; }
.visual-cell { min-height: 45px; padding-block: 5px; }
.presets { margin-top: 12px; padding-top: 11px; }
#preset-buttons { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.preset { min-height: 44px; padding: 5px 2px; border-radius: 0; }

.actions {
  min-height: 44px;
  margin: 0 34px 34px;
  padding: 0;
}
.actions .primary,
.actions .secondary { height: 44px; min-height: 44px; }

body:has(#login-view:not(.hidden)) .topbar,
body:has(#login-view:not(.hidden)) .intro,
body:has(#login-view:not(.hidden)) footer {
  display: none !important;
}

body:has(#login-view:not(.hidden)) main {
  width: min(500px, calc(100% - 32px)) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

body:has(#login-view:not(.hidden)) .auth-card {
  width: 100%;
  padding: 48px 48px 14px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 8px;
  background: rgba(255, 255, 255, .024);
  box-shadow: 0 4px 90px rgba(0, 0, 0, .1);
  backdrop-filter: blur(10px);
}

.auth-card h2 { margin-top: 0; font-size: 30px; }
.auth-card > p { margin-top: 3px; }
.auth-card form { margin-top: 1px; }
.key-field { height: 54px; min-height: 54px; background: rgba(2, 10, 13, .56); }
.auth-actions { margin-top: 36px; }
.auth-actions .primary,
.auth-actions .secondary { min-height: 44px; }

@media (max-width: 1279px) {
  main {
    width: min(1150px, calc(100% - 48px)) !important;
    grid-template-columns: minmax(0, 1fr) 575px;
    gap: clamp(28px, 4vw, 48px);
    padding: 36px 0 64px;
  }
  .intro { max-width: none; }
  .intro h1,
  [lang="th"] .intro h1 { font-size: clamp(50px, 5vw, 62px); }
  .console { width: 575px; }
}

@media (max-width: 980px) {
  main {
    width: min(700px, calc(100% - 40px)) !important;
    grid-template-columns: 1fr;
    gap: 42px;
    padding: 42px 0 64px;
  }
  .intro { width: min(520px, 100%); max-width: 520px; justify-self: center; }
  .console { width: min(575px, 100%); justify-self: center; }
}

@media (max-width: 640px) {
  .topbar,
  footer { width: calc(100% - 24px); }
  .topbar { min-height: 58px; margin-top: 8px; padding: 8px 9px; }
  main { width: calc(100% - 24px) !important; }
  body:has(#login-view:not(.hidden)) main { width: calc(100% - 24px) !important; }
  body:has(#login-view:not(.hidden)) .auth-card { padding: 28px 20px; }
  .intro h1,
  [lang="th"] .intro h1 { font-size: clamp(44px, 14vw, 60px); }
  .console-heading { padding: 24px 110px 14px 20px; }
  .license-strip { margin: 0 20px 4px; }
  .license-strip .ghost { top: 23px; right: 20px; }
  .console-grid { padding: 0 20px; }
  .actions {
    margin: 0 20px 22px;
    padding: 0;
    flex-direction: column;
    align-items: stretch;
  }
  .actions .primary,
  .actions .secondary { width: 100%; flex: 0 0 44px; }
}

/* LRQ 666 blaze-orange identity */
:root {
  --bg: #080503;
  --surface: #15100d;
  --surface-soft: #21150e;
  --surface-raised: #342014;
  --line: rgba(255, 151, 82, .16);
  --line-strong: rgba(255, 141, 61, .32);
  --text: #fff8f2;
  --muted: #d8c4b6;
  --dim: #9b7964;
  --accent: #ff5a00;
  --accent2: #ff7a18;
  --accent-soft: rgba(255, 90, 0, .17);
  --accent-faint: rgba(255, 90, 0, .08);
  --ink: #120904;
  --success: #ff6a0a;
  --danger: #ff796d;
  --warning: #ffad42;
  --focus: rgba(255, 102, 20, .38);
  --violet: #ff5a00;
  --violet-deep: #6b2100;
  --shadow-soft: 0 28px 70px rgba(0, 0, 0, .42);
  --shadow-float: 0 36px 100px rgba(0, 0, 0, .56);
}

html { background: #080503; scrollbar-color: #ff5a00 #120b07; }
body {
  background:
    radial-gradient(ellipse 44% 78% at 50% 48%, rgba(226, 65, 0, .58), rgba(94, 27, 3, .36) 42%, transparent 76%),
    radial-gradient(circle at 20% 42%, rgba(255, 112, 8, .18), transparent 35rem),
    linear-gradient(90deg, #050302, #100703 48%, #050302);
}
::selection { color: #120904; background: #ff7a18; }
* { scrollbar-color: #ff5a00 #120b07; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: #120b07; }
*::-webkit-scrollbar-thumb { border: 2px solid #120b07; background: #ff5a00; }

.space-veil {
  background:
    radial-gradient(circle at 50% 44%, transparent 0 18%, rgba(5, 2, 1, .28) 58%, rgba(3, 2, 1, .68) 100%),
    linear-gradient(180deg, rgba(8, 3, 1, .12), transparent 48%, rgba(5, 2, 1, .42));
}
body[data-renderer="css"] .space-veil {
  background:
    radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(255, 126, 30, .32), transparent 34rem),
    radial-gradient(circle at 32% 40%, rgba(255, 64, 0, .44), transparent 40rem),
    radial-gradient(circle at 78% 38%, rgba(255, 119, 0, .38), transparent 42rem),
    #080503;
}

.topbar {
  border-color: rgba(255, 130, 48, .2);
  background: linear-gradient(105deg, rgba(13, 8, 5, .92), rgba(48, 19, 5, .82));
}
.brand-mark {
  width: 40px;
  height: 40px;
  background: transparent;
  box-shadow: none;
}
.brand-mark img { display: block; width: 36px; height: 36px; object-fit: contain; }
.brand-mark > span { display: none; }
.brand b { color: #fff8f2; }
.brand small { color: #b98c70; }
.topbar nav { border-color: var(--line); background: rgba(18, 9, 4, .48); }
.icon-button,
.ghost { color: #ead7ca; }
.language { background: #130b07; }
.language button { color: #a9856e; }
.language button.active { color: #160a03; background: #ff6508; }
.online { color: #d8c1b1; }
.online i,
.status-dot { background: #ff6508; box-shadow: 0 0 0 4px rgba(255, 101, 8, .12); }

.node-badge,
.console-kicker { color: #ff8a2a; }
.intro h1 > span:first-child { color: #ff6508; }
.intro h1 > span:last-child { color: #f4dfd1; }
.lead { color: #d4b9a7; }
.trust-row { border-color: var(--line); background: rgba(18, 10, 6, .64); }
.trust-row span { color: #ffad42; }
.trust-row small { color: #a9846e; }
.product-guide { border-color: var(--line); background: rgba(14, 9, 6, .72); }
.guide-head { color: #a87c62; }
.guide-head strong,
.mouse-map kbd,
.numpad-map kbd { color: #ff8126; }
.mouse-shell { border-color: rgba(255, 133, 52, .48); background: rgba(8, 5, 3, .86); }

.glass,
.console,
.auth-card {
  border-color: rgba(255, 128, 43, .18);
  background: linear-gradient(148deg, rgba(31, 14, 6, .96), rgba(10, 7, 5, .97));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .32);
}
.card-head { border-color: var(--line); color: #cfaa91; }
.access-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 3px;
  color: transparent;
  background: rgba(255, 90, 0, .12);
}
.access-icon img { display: block; width: 36px; height: 36px; object-fit: contain; }
.auth-card h2,
.console-heading h2,
.panel-title h2,
.aim-group-title b { color: #fff8f2; }
.auth-card > p,
.auth-card form > label { color: #c9ac99; }
.key-field { border-color: var(--line); background: rgba(6, 4, 3, .78); }
.key-field:focus-within { border-color: #ff6508; background: rgba(20, 9, 3, .88); box-shadow: 0 0 0 3px rgba(255, 101, 8, .16); }
.key-field input { color: #fff8f2; caret-color: #ff6508; }
.key-field span { color: #ff8c32; }

.primary { color: #150a04; background: #ff6508; }
.primary:hover:not(:disabled) { color: #110803; background: #ff832c; box-shadow: 0 10px 26px rgba(255, 89, 0, .22); }
.primary:disabled { color: #765f50; background: rgba(116, 79, 57, .28); }
.secondary { border-color: rgba(255, 104, 13, .72); color: #ffad42; background: rgba(26, 12, 4, .44); }
.secondary:hover { border-color: #ff7a18; color: #ffd19a; background: rgba(255, 90, 0, .1); }

.console { border: 1px solid rgba(255, 130, 48, .2); }
.product-chip { color: #ff8a2a; border-color: var(--line); background: rgba(255, 90, 0, .08); }
.license-strip { border-color: var(--line); background: rgba(8, 5, 3, .56); }
.license-strip strong { color: #ffad42; }
.expiry small,
.panel-title p,
.aim-group-title small,
.range-scale,
.visual-cell small,
.color-value output { color: #9f7a63; }
.license-strip .ghost { border-color: var(--line-strong); background: rgba(29, 13, 5, .62); }

.aim-group-title,
.visual-panel,
.visual-panel > .panel-title,
.visual-cell,
.presets { border-color: var(--line) !important; }
.aim-group-title > span,
.preset-index,
.panel-icon { color: #ff8126; border-color: rgba(255, 101, 8, .3); background: rgba(255, 90, 0, .08); }
.range-head { color: #dcc2b1; }
.range-head output { color: #ff8126; }
.step { border-color: var(--line-strong); color: #d3b29d; background: rgba(79, 31, 7, .62); }
.step:hover { border-color: #ff6508; color: #ff8a2a; background: rgba(255, 90, 0, .12); }
input[type="range"] { accent-color: #ff6508; }
input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, #ff6508 0 var(--range-progress), rgba(210, 151, 113, .28) var(--range-progress) 100%); }
input[type="range"]::-webkit-slider-thumb { border-color: #4b1b06; background: #ff7a18; box-shadow: 0 0 0 1px #ff7a18; }
input[type="range"]::-moz-range-track { background: rgba(210, 151, 113, .28); }
input[type="range"]::-moz-range-progress { background: #ff6508; }
input[type="range"]::-moz-range-thumb { border-color: #4b1b06; background: #ff7a18; }

.visual-settings-grid { border-color: var(--line); background: rgba(13, 8, 5, .42); }
.visual-cell label { color: #fff1e8; }
.switch { border-color: var(--line-strong); background: rgba(126, 91, 69, .38); }
.switch::before { background: #b89a86; }
.switch:checked { border-color: #ff6508; background: rgba(255, 90, 0, .24); }
.switch:checked::before { background: #ff7a18; }
input[type="color"] { border-color: #552109; }
.preset { border-color: var(--line); color: #cdb09d; background: rgba(45, 20, 8, .42); }
.preset:hover { color: #fff8f2; background: rgba(255, 90, 0, .1); }
.preset.selected { color: #160a03; background: #ff6508; border-color: #ff6508; }

footer { color: #8d6b56; border-color: var(--line); }
dialog { border-color: var(--line-strong); color: #fff8f2; background: linear-gradient(145deg, #281207, #120b07); }
dialog::backdrop { background: rgba(5, 3, 2, .78); }
.dialog-kicker { color: #ff8126; }
.hotkey-list p,
#query-result p { border-color: var(--line); background: rgba(27, 13, 6, .58); }
.hotkey-list kbd { color: #ffad42; background: rgba(255, 106, 10, .1); }
.toast { border-color: var(--line-strong); color: #fff8f2; background: #261208; }
*:focus-visible { outline-color: #ff6508; }

/* Layout-integrity pass: this block intentionally owns final sizing after the
   legacy theme layers above. It prevents fixed control sizes and Thai glyph
   metrics from overflowing the compact console. */
.intro h1,
[lang="th"] .intro h1 {
  line-height: 1.3;
}

.console-heading {
  min-height: 0;
}

.console-heading h2 {
  line-height: 1.5;
}

.auth-card h2 {
  line-height: 1.45;
}

.panel-title h2,
.aim-group-title b,
.visual-cell label {
  line-height: 1.45;
}

.range-line {
  width: 100%;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
}

.range-line .step {
  width: 30px;
  min-width: 0;
  max-width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
}

.slider-shell,
.slider-shell input[type="range"] {
  width: 100%;
  min-width: 0;
  margin-inline: 0;
}

.license-strip {
  min-height: 62px;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr) minmax(0, 1.35fr);
}

.license-strip > * {
  min-width: 0;
  padding: 14px 12px;
}

.license-state {
  gap: 8px;
  line-height: 1.45;
}

.license-strip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.license-strip .expiry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-content: center;
  align-items: center;
}

.expiry small,
#expire-display {
  white-space: nowrap;
}

.presets {
  grid-template-columns: auto minmax(0, 1fr);
}

#preset-buttons {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.preset {
  min-width: 0;
  min-height: 48px;
  height: auto;
  padding: 7px 6px;
  line-height: 1.35;
  overflow: hidden;
}

.preset strong,
.preset small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preset strong {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.4;
}

.actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  height: auto;
  min-height: 48px;
}

.actions .primary,
.actions .secondary {
  width: 100%;
  height: auto;
  min-height: 48px;
  padding: 10px 14px;
  line-height: 1.4;
  white-space: normal;
}

@media (max-width: 760px) {
  .console-heading {
    padding: 24px 20px 14px;
  }

  .console-heading h2 {
    font-size: clamp(20px, 6vw, 24px);
  }

  .license-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .license-strip .expiry,
  .license-strip .ghost {
    grid-column: 1 / -1;
  }

  #preset-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .console-grid {
    padding-inline: 16px;
  }

  .license-strip,
  .actions {
    margin-inline: 16px;
  }

  .license-strip {
    grid-template-columns: 1fr;
  }

  .license-strip > *,
  .license-strip .expiry,
  .license-strip .ghost {
    grid-column: 1;
  }

  .license-strip .expiry {
    grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  }

  .visual-settings-grid {
    grid-template-columns: 1fr;
  }

  .visual-cell:nth-child(odd) {
    border-right: 0;
  }
}