:root{
  --bg0:#070815;
  --bg1:#02030a;
  --ink:#eaf2ff;
  --muted:rgba(234,242,255,.72);

  --accent:#6ee7ff;
  --accent2:#a78bfa;
  --accent-rgb: 110 231 255;
  --accent2-rgb: 167 139 250;
  --line:rgba(var(--accent-rgb) / .26);

  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.10);
  --shadow:0 26px 70px rgba(0,0,0,.52);
  --radius:22px;

  --good:#7cff7a;
  --bad:#ff4d7d;

  --stars-opacity:.45;
  --stars-filter:none;
  --glow-opacity:.75;
  --glow-filter:none;
  --vignette-opacity:.84;

  --fx-top-opacity: 0;
  --fx-float-opacity: 0;
  --fx-top-filter: none;
  --fx-float-filter: none;
}

html{
  height:100%;
  color-scheme: dark;
}

html[data-theme="ember"]{
  --bg0:#12060b;
  --bg1:#050208;
  --accent:#ffb86b;
  --accent2:#ff6b9a;
  --accent-rgb: 255 184 107;
  --accent2-rgb: 255 107 154;
  --line:rgba(var(--accent-rgb) / .26);
}

html[data-theme="ice"]{
  --bg0:#020813;
  --bg1:#000308;
  --ink:#ebfaff;
  --muted:rgba(235,250,255,.72);
  --accent:#8cf0ff;
  --accent2:#78a0ff;
  --accent-rgb: 140 240 255;
  --accent2-rgb: 120 160 255;
  --line:rgba(var(--accent-rgb) / .24);
  --stars-opacity:.36;
  --stars-filter: hue-rotate(190deg) saturate(165%) brightness(1.08);
  --glow-opacity:.78;
  --fx-top-opacity: .95;
  --fx-float-opacity: .85;
  --fx-top-filter: drop-shadow(0 0 18px rgba(var(--accent-rgb) / .22));
  --fx-float-filter: drop-shadow(0 0 14px rgba(255,255,255,.10));
}

html[data-theme="sakura"]{
  --bg0:#12040b;
  --bg1:#040104;
  --ink:#fff0fa;
  --muted:rgba(255,240,250,.72);
  --accent:#ff73aa;
  --accent2:#be82ff;
  --accent-rgb: 255 115 170;
  --accent2-rgb: 190 130 255;
  --line:rgba(var(--accent-rgb) / .24);
  --stars-opacity:.34;
  --stars-filter: hue-rotate(300deg) saturate(170%);
  --glow-opacity:.80;
  --fx-top-opacity: .22;
  --fx-float-opacity: .92;
  --fx-float-filter: drop-shadow(0 0 16px rgba(var(--accent-rgb) / .14));
}

html[data-theme="acid"]{
  --bg0:#050a10;
  --bg1:#010205;
  --ink:#e8ffdc;
  --muted:rgba(232,255,220,.70);
  --accent:#b4ff00;
  --accent2:#ff00dc;
  --accent-rgb: 180 255 0;
  --accent2-rgb: 255 0 220;
  --line:rgba(var(--accent-rgb) / .24);
  --stars-opacity:.30;
  --stars-filter: hue-rotate(85deg) saturate(220%);
  --glow-opacity:.78;
  --fx-top-opacity: .88;
  --fx-float-opacity: .40;
  --fx-top-filter: drop-shadow(0 0 18px rgba(var(--accent-rgb) / .16)) drop-shadow(0 0 42px rgba(var(--accent2-rgb) / .10));
}

html[data-theme="terminal"]{
  --bg0:#020806;
  --bg1:#000302;
  --ink:#dcffe6;
  --muted:rgba(220,255,230,.70);
  --accent:#6eff8c;
  --accent2:#ffd25a;
  --accent-rgb: 110 255 140;
  --accent2-rgb: 255 210 90;
  --line:rgba(var(--accent-rgb) / .18);
  --stars-opacity:.22;
  --stars-filter: hue-rotate(100deg) saturate(200%) contrast(1.05);
  --glow-opacity:.46;
  --glow-filter: saturate(140%);
  --fx-top-opacity: .22;
  --fx-float-opacity: .70;
  --fx-float-filter: drop-shadow(0 0 14px rgba(var(--accent-rgb) / .14));
}

html[data-theme="tron"]{
  --bg0:#020610;
  --bg1:#000107;
  --ink:#e8ffe7;
  --muted:rgba(232,255,231,.70);
  --accent:#7cff7a;
  --accent2:#00e5ff;
  --accent-rgb: 124 255 122;
  --accent2-rgb: 0 229 255;
  --line:rgba(var(--accent-rgb) / .22);
  --stars-opacity:.34;
  --stars-filter: hue-rotate(155deg) saturate(185%);
  --glow-opacity:.82;
  --fx-top-opacity: .35;
  --fx-float-opacity: .58;
  --fx-float-filter: drop-shadow(0 0 16px rgba(var(--accent2-rgb) / .14));
}

html[data-theme="ares"]{
  --bg0:#09060c;
  --bg1:#020104;
  --ink:#fff0e4;
  --muted:rgba(255,240,228,.70);
  --accent:#ff8c00;
  --accent2:#ff0062;
  --accent-rgb: 255 140 0;
  --accent2-rgb: 255 0 98;
  --line:rgba(var(--accent-rgb) / .22);
  --stars-opacity:.26;
  --stars-filter: hue-rotate(-10deg) saturate(190%);
  --glow-opacity:.72;
  --fx-top-opacity: .34;
  --fx-float-opacity: .46;
  --fx-float-filter: drop-shadow(0 0 18px rgba(var(--accent-rgb) / .14));
}

html[data-theme="doom"]{
  --bg0:#0b0503;
  --bg1:#020101;
  --ink:#ffece0;
  --muted:rgba(255,236,224,.70);
  --accent:#ff6e00;
  --accent2:#fadc5a;
  --accent-rgb: 255 110 0;
  --accent2-rgb: 250 220 90;
  --line:rgba(var(--accent-rgb) / .22);
  --stars-opacity:.18;
  --stars-filter: hue-rotate(-18deg) saturate(150%) contrast(1.10);
  --glow-opacity:.60;
  --fx-top-opacity: .18;
  --fx-float-opacity: .85;
  --fx-float-filter: drop-shadow(0 0 16px rgba(var(--accent-rgb) / .12));
}

html[data-theme="lightning"]{
  --bg0:#04060f;
  --bg1:#01030a;
  --ink:#dcf5ff;
  --muted:rgba(220,245,255,.70);
  --accent:#50dcff;
  --accent2:#9678ff;
  --accent-rgb: 80 220 255;
  --accent2-rgb: 150 120 255;
  --line:rgba(var(--accent-rgb) / .24);
  --stars-opacity:.42;
  --stars-filter: hue-rotate(175deg) saturate(175%);
  --glow-opacity:.86;
  --fx-top-opacity: .95;
  --fx-float-opacity: .40;
  --fx-top-filter: drop-shadow(0 0 22px rgba(var(--accent-rgb) / .24)) drop-shadow(0 0 44px rgba(var(--accent2-rgb) / .16));
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1100px 700px at 22% 8%, rgba(var(--accent-rgb) / .14) 0%, transparent 62%),
    radial-gradient(900px 600px at 92% 84%, rgba(var(--accent2-rgb) / .14) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{color:inherit}

.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

.stars{
  position:absolute;
  inset:-10%;
  background-image:
    radial-gradient(rgba(255,255,255,.45) 1px, transparent 0),
    radial-gradient(rgba(255,255,255,.22) 1px, transparent 0),
    radial-gradient(rgba(255,255,255,.14) 1px, transparent 0);
  background-size: 90px 90px, 150px 150px, 240px 240px;
  background-position: 0 0, 34px 68px, -54px 92px;
  opacity:var(--stars-opacity);
  filter: var(--stars-filter);
  transform: translateZ(0);
}

.glow{
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(var(--accent-rgb) / .16), transparent 64%),
    radial-gradient(780px 520px at 82% 72%, rgba(var(--accent2-rgb) / .14), transparent 62%),
    radial-gradient(560px 360px at 60% 10%, rgba(255,255,255,.07), transparent 70%);
  mix-blend-mode: screen;
  opacity:var(--glow-opacity);
  filter: var(--glow-filter);
}

.vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1200px 700px at 50% 10%, transparent 34%, rgba(0,0,0,.58) 100%),
    linear-gradient(180deg, rgba(0,0,0,.50), transparent 30%, rgba(0,0,0,.65));
  opacity:var(--vignette-opacity);
}

.fxTop,
.fxFloat{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.fxTop{
  opacity:var(--fx-top-opacity);
  filter: var(--fx-top-filter);
  mix-blend-mode: screen;
}

.fxFloat{
  opacity:var(--fx-float-opacity);
  filter: var(--fx-float-filter);
  mix-blend-mode: screen;
}

/* Default (no extra FX) */
html[data-theme="nebula"] .fxTop,
html[data-theme="ember"] .fxTop,
html[data-theme="nebula"] .fxFloat,
html[data-theme="ember"] .fxFloat{
  opacity:0;
}

/* ICE: icicles + snow */
html[data-theme="ice"] .fxTop{
  background:
    linear-gradient(180deg, rgba(140,240,255,.40), rgba(140,240,255,0) 70%),
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0) 0 22px,
      rgba(255,255,255,.22) 22px 24px,
      rgba(255,255,255,0) 24px 52px
    );
  background-size: auto, auto;
  background-position: 0 0, 0 0;
  mask-image: linear-gradient(#000, transparent 70%);
}
html[data-theme="ice"] .fxTop::before{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  top:-8px;
  height:120px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(140,240,255,0) 0 10px,
      rgba(140,240,255,.46) 10px 12px,
      rgba(140,240,255,0) 12px 26px
    );
  opacity:.85;
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 30%,
    96% 34%,
    92% 70%,
    88% 28%,
    84% 44%,
    80% 18%,
    76% 62%,
    72% 26%,
    68% 52%,
    64% 22%,
    60% 76%,
    56% 26%,
    52% 44%,
    48% 18%,
    44% 62%,
    40% 26%,
    36% 52%,
    32% 22%,
    28% 76%,
    24% 26%,
    20% 44%,
    16% 18%,
    12% 62%,
    8% 34%,
    4% 70%,
    0% 30%
  );
}
html[data-theme="ice"] .fxFloat{
  background-image:
    radial-gradient(rgba(255,255,255,.55) 1px, transparent 0),
    radial-gradient(rgba(255,255,255,.32) 1px, transparent 0),
    radial-gradient(rgba(140,240,255,.22) 1px, transparent 0);
  background-size: 120px 120px, 190px 190px, 260px 260px;
  background-position: 0 0, 40px 70px, -60px 110px;
  animation: snowDrift 18s linear infinite;
}

@keyframes snowDrift{
  from{transform: translate3d(0,-60px,0)}
  to{transform: translate3d(0,60px,0)}
}

/* SAKURA: petals */
html[data-theme="sakura"] .fxFloat{
  background-image:
    radial-gradient(circle at 12px 10px, rgba(255,115,170,.42) 0 2px, transparent 3px),
    radial-gradient(circle at 22px 28px, rgba(190,130,255,.26) 0 1px, transparent 3px),
    radial-gradient(circle at 40px 18px, rgba(255,180,210,.30) 0 1px, transparent 3px),
    radial-gradient(circle at 64px 44px, rgba(255,115,170,.34) 0 2px, transparent 4px),
    radial-gradient(circle at 84px 62px, rgba(190,130,255,.22) 0 2px, transparent 4px);
  background-size: 120px 120px;
  background-position: 0 0;
  animation: petalsDrift 22s linear infinite;
}
html[data-theme="sakura"] .fxFloat::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    repeating-linear-gradient(135deg, rgba(255,115,170,.05) 0 1px, transparent 1px 24px),
    radial-gradient(900px 520px at 18% 18%, rgba(255,115,170,.10), transparent 64%),
    radial-gradient(900px 520px at 82% 72%, rgba(190,130,255,.10), transparent 62%);
  opacity:.85;
  mix-blend-mode: screen;
  animation: petalsFloat 16s ease-in-out infinite alternate;
}

@keyframes petalsDrift{
  from{transform: translate3d(-10px,-20px,0)}
  to{transform: translate3d(10px,20px,0)}
}
@keyframes petalsFloat{
  from{transform: translate3d(-8px,-6px,0)}
  to{transform: translate3d(8px,6px,0)}
}

/* LIGHTNING: bolts + flash */
html[data-theme="lightning"] .fxTop{
  background:
    conic-gradient(from 220deg at 82% 18%, rgba(var(--accent-rgb) / .40), transparent 18%, rgba(var(--accent2-rgb) / .30), transparent 55%, rgba(var(--accent-rgb) / .34)),
    repeating-linear-gradient(120deg, rgba(255,255,255,.12) 0 1px, transparent 1px 32px);
  opacity:var(--fx-top-opacity);
  animation: lightningFlash 2.9s ease-in-out infinite;
}
html[data-theme="lightning"] .fxTop::before{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    linear-gradient(110deg, transparent 0 46%, rgba(var(--accent-rgb) / .38) 48%, transparent 50%),
    linear-gradient(70deg, transparent 0 60%, rgba(var(--accent2-rgb) / .34) 62%, transparent 64%),
    linear-gradient(130deg, transparent 0 22%, rgba(255,255,255,.26) 24%, transparent 26%);
  opacity:.85;
  mix-blend-mode: screen;
  filter: blur(.2px);
}

@keyframes lightningFlash{
  0%, 48%, 100%{filter: var(--fx-top-filter); opacity:.72}
  52%{opacity:1}
  54%{opacity:.50}
  56%{opacity:1}
  58%{opacity:.70}
}

/* ACID: dripping droplets */
html[data-theme="acid"] .fxTop{
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb) / .30), rgba(var(--accent-rgb) / 0) 65%),
    radial-gradient(circle at 6% 6%, rgba(var(--accent-rgb) / .52) 0 10px, transparent 11px),
    radial-gradient(circle at 14% 3%, rgba(var(--accent-rgb) / .44) 0 8px, transparent 9px),
    radial-gradient(circle at 22% 8%, rgba(var(--accent-rgb) / .50) 0 11px, transparent 12px),
    radial-gradient(circle at 36% 5%, rgba(var(--accent-rgb) / .42) 0 9px, transparent 10px),
    radial-gradient(circle at 52% 6%, rgba(var(--accent-rgb) / .54) 0 12px, transparent 13px),
    radial-gradient(circle at 66% 4%, rgba(var(--accent-rgb) / .44) 0 9px, transparent 10px),
    radial-gradient(circle at 78% 7%, rgba(var(--accent-rgb) / .52) 0 11px, transparent 12px),
    radial-gradient(circle at 92% 5%, rgba(var(--accent-rgb) / .46) 0 9px, transparent 10px);
  animation: drip 6.5s ease-in-out infinite;
  mask-image: linear-gradient(#000, transparent 75%);
}
html[data-theme="acid"] .fxTop::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 6% 0%, rgba(var(--accent-rgb) / .55) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 0%, rgba(var(--accent-rgb) / .55) 0 2px, transparent 3px),
    radial-gradient(circle at 52% 0%, rgba(var(--accent-rgb) / .55) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 0%, rgba(var(--accent-rgb) / .55) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 0%, rgba(var(--accent-rgb) / .55) 0 2px, transparent 3px);
  opacity:.75;
  animation: dripDots 3.2s ease-in-out infinite;
}
@keyframes drip{
  0%,100%{transform: translate3d(0, -8px, 0)}
  50%{transform: translate3d(0, 6px, 0)}
}
@keyframes dripDots{
  0%,100%{transform: translate3d(0,0,0); opacity:.65}
  50%{transform: translate3d(0,18px,0); opacity:1}
}

/* TERMINAL: scanlines */
html[data-theme="terminal"] .fxFloat{
  background:
    repeating-linear-gradient(0deg, rgba(var(--accent-rgb) / .10) 0 1px, transparent 1px 4px),
    radial-gradient(800px 260px at 50% 10%, rgba(var(--accent-rgb) / .08), transparent 62%),
    radial-gradient(900px 520px at 50% 120%, rgba(var(--accent-rgb) / .06), transparent 62%);
  opacity:var(--fx-float-opacity);
  mix-blend-mode: screen;
}

/* TRON / ARES: grid + scan */
html[data-theme="tron"] .fxFloat,
html[data-theme="ares"] .fxFloat{
  background:
    repeating-linear-gradient(90deg, rgba(var(--accent-rgb) / .10) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(var(--accent2-rgb) / .08) 0 1px, transparent 1px 64px),
    radial-gradient(900px 520px at 70% 15%, rgba(var(--accent2-rgb) / .12), transparent 62%),
    radial-gradient(900px 520px at 20% 80%, rgba(var(--accent-rgb) / .12), transparent 62%);
  opacity:var(--fx-float-opacity);
  animation: gridDrift 22s ease-in-out infinite alternate;
}
html[data-theme="tron"] .fxFloat::before,
html[data-theme="ares"] .fxFloat::before{
  content:"";
  position:absolute;
  inset:-10%;
  background: linear-gradient(180deg, transparent 0 45%, rgba(255,255,255,.08) 50%, transparent 55%);
  opacity:.55;
  mix-blend-mode: screen;
  animation: scan 5.2s linear infinite;
}
@keyframes gridDrift{
  from{transform: translate3d(-8px,-8px,0)}
  to{transform: translate3d(8px,8px,0)}
}
@keyframes scan{
  from{transform: translate3d(0,-40%,0)}
  to{transform: translate3d(0,40%,0)}
}

/* DOOM: ember sparks */
html[data-theme="doom"] .fxFloat{
  background-image:
    radial-gradient(rgba(255,110,0,.40) 1px, transparent 0),
    radial-gradient(rgba(250,220,90,.26) 1px, transparent 0),
    radial-gradient(rgba(255,0,0,.18) 1px, transparent 0);
  background-size: 140px 140px, 210px 210px, 280px 280px;
  background-position: 0 0, 40px 70px, -60px 110px;
  animation: embersRise 18s linear infinite;
}
@keyframes embersRise{
  from{transform: translate3d(0,60px,0)}
  to{transform: translate3d(0,-60px,0)}
}

@media (prefers-reduced-motion: reduce){
  .fxTop,
  .fxFloat,
  .fxTop::before,
  .fxFloat::before{
    animation:none !important;
    transform:none !important;
  }
}

.shell{
  position:relative;
  z-index:1;
  width:min(1200px, calc(100vw - 40px));
  margin:0 auto;
  padding:24px 0 44px;
}

.panel{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  box-shadow:0 18px 50px rgba(0,0,0,.40);
  backdrop-filter: blur(10px);
}

.header{
  display:grid;
  grid-template-columns: auto minmax(320px, 1fr) auto;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  min-width:260px;
  text-decoration:none;
}
.logo{
  width:46px;
  height:46px;
  filter: drop-shadow(0 0 18px rgba(0,0,0,.22));
}
.brandText h1{
  margin:0;
  font-size:16px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.brandText p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:12px;
}

.headerCenter{min-width:0}
.searchRow{
  display:flex;
  gap:10px;
  align-items:center;
}
.searchRow input{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.24);
  color:var(--ink);
  outline:none;
}
.searchRow input:focus{
  border-color: rgba(var(--accent-rgb) / .34);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb) / .12);
}

.hintRow{
  margin-top:8px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.58);
  font-size:12px;
}

kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  padding:2px 6px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.24);
  color:rgba(255,255,255,.92);
}

.iconBtn{
  appearance:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.88);
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
.iconBtn:hover{
  border-color: rgba(var(--accent-rgb) / .28);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb) / .10);
}
.iconBtn:active{transform: translateY(1px)}
.iconBtn:disabled{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}

.headerRight{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}

.status{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  user-select:none;
}
.status .dot{
  width:9px;
  height:9px;
  border-radius:999px;
  background: rgba(255,255,255,.30);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.status.ok .dot{background: var(--good)}
.status.bad .dot{background: var(--bad)}
.status .label{color:rgba(255,255,255,.70)}
.status .value{color:rgba(255,255,255,.92)}

.themeSelect{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(520px 180px at 20% 30%, rgba(var(--accent-rgb) / .12), transparent 62%),
    radial-gradient(520px 180px at 80% 70%, rgba(var(--accent2-rgb) / .10), transparent 62%),
    rgba(0,0,0,.18);
  color:rgba(255,255,255,.92);
  border-radius:999px;
  padding:10px 34px 10px 12px;
  cursor:pointer;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
  line-height:1;
}
.themeSelect:hover{
  border-color: rgba(var(--accent-rgb) / .30);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb) / .10);
}
.themeSelect:active{transform: translateY(1px)}
.themeSelect:focus{
  outline:none;
  border-color: rgba(var(--accent-rgb) / .34);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb) / .12);
}
.themeSelect{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%),
    linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%),
    radial-gradient(520px 180px at 20% 30%, rgba(var(--accent-rgb) / .12), transparent 62%),
    radial-gradient(520px 180px at 80% 70%, rgba(var(--accent2-rgb) / .10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.18));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%,
    0 0,
    0 0,
    0 0;
  background-size:
    6px 6px,
    6px 6px,
    auto,
    auto,
    auto;
  background-repeat:no-repeat;
}

.main{
  margin-top:16px;
  display:grid;
  grid-template-columns: 380px 1fr;
  gap:16px;
  align-items:start;
}

.sidebar{
  padding:16px;
  display:flex;
  flex-direction:column;
  min-height:540px;
}
.sidebarHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:12px;
}
.sidebarHead h2{
  margin:0;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.counts{
  font-size:12px;
  color:var(--muted);
}

.appList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.appItem{
  text-decoration:none;
  color:inherit;
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  position:relative;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.appItem:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--accent-rgb) / .26);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb) / .08);
}
.appItem:active{transform: translateY(0px)}
.appItem:focus-visible{
  outline:none;
  border-color: rgba(var(--accent-rgb) / .34);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb) / .14);
}
.appItem.active{
  border-color: rgba(var(--accent-rgb) / .34);
  background:
    radial-gradient(520px 180px at 20% 30%, rgba(var(--accent-rgb) / .14), transparent 62%),
    radial-gradient(520px 200px at 80% 80%, rgba(var(--accent2-rgb) / .12), transparent 62%),
    rgba(0,0,0,.18);
  box-shadow:
    0 18px 50px rgba(0,0,0,.36),
    0 0 0 1px rgba(var(--accent-rgb) / .16) inset;
}

.appIcon{
  width:44px;
  height:44px;
  padding:8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  opacity:.92;
  flex:0 0 auto;
  filter: drop-shadow(0 0 12px rgba(0,0,0,.28));
}

.appMeta{min-width:0; flex:1}
.appTop{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.appTitle{
  font-size:14px;
  font-weight:760;
  letter-spacing:.02em;
}
.appRoute{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.12);
  padding:4px 9px;
  border-radius:999px;
  background:rgba(0,0,0,.16);
  white-space:nowrap;
}
.appDesc{
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.noResults{
  margin-top:12px;
  padding:12px 14px;
  border-radius:18px;
  border:1px dashed rgba(var(--accent-rgb) / .22);
  background:rgba(0,0,0,.18);
  color:var(--muted);
}
.noResults code{color:rgba(255,255,255,.88)}

.footer{
  margin-top:auto;
  padding-top:14px;
  color:rgba(255,255,255,.55);
  font-size:12px;
}
.footer code{color:rgba(255,255,255,.78)}

.preview{
  padding:18px;
  position:sticky;
  top:24px;
}

.previewInner{
  min-height:540px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.previewTop{
  display:flex;
  gap:14px;
  align-items:center;
}

.previewIcon{
  width:70px;
  height:70px;
  border-radius:22px;
  border:1px solid rgba(var(--accent-rgb) / .22);
  background:rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1px rgba(var(--accent2-rgb) / .14) inset;
  flex:0 0 auto;
}
.previewIcon img{
  width:42px;
  height:42px;
  opacity:.92;
  filter: drop-shadow(0 0 12px rgba(0,0,0,.25));
}

.previewTitle h2{
  margin:0;
  font-size:24px;
  letter-spacing:.02em;
}

.badge{
  display:inline-block;
  margin-top:8px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
  border:1px solid rgba(255,255,255,.12);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.16);
}

.previewDesc{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.tags span{
  font-size:11px;
  letter-spacing:.10em;
  text-transform:uppercase;
  border:1px solid rgba(var(--accent-rgb) / .16);
  background:rgba(0,0,0,.14);
  padding:5px 10px;
  border-radius:999px;
  color:rgba(255,255,255,.78);
}

.actions{
  margin-top:8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.launchBtn,
.ghostBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius:18px;
  padding:12px 14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  user-select:none;
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}

.launchBtn{
  font-weight:860;
  color:rgba(255,255,255,.95);
  border:1px solid rgba(var(--accent-rgb) / .40);
  background:
    radial-gradient(600px 200px at 20% 30%, rgba(var(--accent-rgb) / .20), transparent 62%),
    radial-gradient(600px 220px at 80% 70%, rgba(var(--accent2-rgb) / .16), transparent 62%),
    rgba(0,0,0,.12);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb) / .18) inset;
}
.launchBtn:hover{
  border-color: rgba(var(--accent-rgb) / .52);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb) / .12), 0 0 0 1px rgba(var(--accent-rgb) / .18) inset;
}
.launchBtn:active{transform: translateY(1px)}
.launchBtn[aria-disabled="true"]{opacity:.55; pointer-events:none}

.ghostBtn{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.86);
  font-weight:740;
}
.ghostBtn:hover{
  border-color: rgba(var(--accent-rgb) / .30);
  box-shadow:0 0 0 3px rgba(var(--accent-rgb) / .10);
}
.ghostBtn:active{transform: translateY(1px)}

.micro{
  margin-top:auto;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.60);
  font-size:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.microLine{
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height:1.45;
}

.dotPulse{
  width:9px;
  height:9px;
  border-radius:999px;
  background: rgba(var(--accent-rgb) / .65);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb) / .10);
  margin-top:4px;
  animation: pulse 2.6s ease-in-out infinite;
  flex:0 0 auto;
}
@keyframes pulse{
  0%,100%{transform: scale(1); opacity:.70}
  50%{transform: scale(1.45); opacity:1}
}

.hidden{display:none}
.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip: rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 980px){
  .header{
    grid-template-columns: 1fr;
    gap:12px;
  }
  .brand{min-width:0}
  .headerRight{justify-content:space-between}
  .main{grid-template-columns: 1fr}
  .preview{position:static}
}

@media (max-width: 560px){
  .shell{width:calc(100vw - 24px)}
  .hintRow{display:none}
  .appRoute{display:none}
}

@media (prefers-reduced-motion: reduce){
  .dotPulse{animation:none}
  .appItem{transition:none}
  .launchBtn,.ghostBtn,.themeSelect,.iconBtn{transition:none}
}