/* Interaktive Nachbildung des DarkTweak-Tools auf /product.
   Alles unter .appdemo - die Werte sind ausgedacht, nichts davon beruehrt ein echtes System. */
.appdemo-section { position: relative; overflow: hidden; background: radial-gradient(900px 520px at 50% 0%, rgba(34, 211, 238, .09), transparent 60%), #03060b; }
.appdemo-head { max-width: 760px; margin: 0 auto 46px; text-align: center; }
.appdemo-head h2 span { color: #23d7ef; }
.appdemo-head > p:last-child { margin: 18px auto 0; color: var(--muted); font-size: 15px; }
.appdemo-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 7px 14px; border: 1px solid rgba(76, 195, 240, .25); border-radius: 999px; background: rgba(76, 195, 240, .06); color: #9fe3f5; font-size: 12px; font-weight: 600; }
.appdemo-hint i { width: 7px; height: 7px; border-radius: 50%; background: #4cc3f0; box-shadow: 0 0 10px #4cc3f0; animation: adPulse 1.8s ease-in-out infinite; }
@keyframes adPulse { 50% { opacity: .35; } }

.appdemo {
  --dx-accent: #4cc3f0;
  --dx-accent-soft: rgba(76, 195, 240, .14);
  --dx-card: rgba(38, 50, 62, .46);
  --dx-line: rgba(255, 255, 255, .065);
  --dx-text: #e8f1f8;
  --dx-muted: #8395a6;
  position: relative;
  display: grid;
  grid-template-rows: 62px minmax(0, 1fr);
  width: min(1640px, calc(100% - 40px));
  height: 940px;
  margin: 0 auto;
  border: 1px solid rgba(120, 200, 230, .18);
  border-radius: 16px;
  background: radial-gradient(1100px 600px at 18% -10%, rgba(40, 110, 140, .32), transparent 60%), radial-gradient(800px 600px at 100% 100%, rgba(80, 60, 130, .18), transparent 60%), #0b131b;
  box-shadow: 0 50px 120px rgba(0, 0, 0, .55), 0 0 90px rgba(0, 200, 235, .06);
  color: var(--dx-text);
  font-family: "Segoe UI Variable", "Segoe UI", "Plus Jakarta Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  overflow: hidden;
  text-align: left;
}
.appdemo button { font: inherit; color: inherit; cursor: pointer; }
.appdemo svg { fill: none; stroke: currentColor; }

/* Titelleiste */
.dx-top { display: flex; align-items: center; gap: 14px; padding: 0 16px; }
.dx-brand { display: flex; align-items: center; gap: 8px; min-width: 190px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.dx-brand img { width: 34px; height: 30px; object-fit: contain; }
.dx-brand span span { color: var(--dx-accent); }
.dx-brand small { padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .08); color: var(--dx-muted); font-size: 10px; font-weight: 600; }
.dx-search { flex: 0 1 420px; display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; border: 1px solid var(--dx-line); border-radius: 999px; background: rgba(255, 255, 255, .035); color: #6f8293; }
.dx-search svg { width: 14px; height: 14px; stroke-width: 2; }
.dx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--dx-text); font: inherit; }
.dx-search input::placeholder { color: #6f8293; }
.dx-top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.dx-state { display: grid; grid-template-columns: 8px auto; gap: 0 9px; align-items: center; font-size: 10.5px; line-height: 1.25; }
.dx-state i { grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; }
.dx-state b { font-weight: 600; letter-spacing: .02em; }
.dx-state small { color: var(--dx-muted); font-size: 9.5px; }
.dx-pillbox { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px; border: 1px solid var(--dx-line); border-radius: 12px; background: rgba(255, 255, 255, .035); }
.dx-score small { color: var(--dx-muted); font-size: 11px; }
.dx-score b { color: #fbbf24; font-size: 15px; }
.dx-score.good b { color: #34d399; }
.dx-score i { width: 44px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.dx-score i::before { content: ""; display: block; width: var(--v, 50%); height: 100%; border-radius: inherit; background: var(--dx-accent); }
.dx-guard { font-size: 10.5px; line-height: 1.2; }
.dx-guard small { display: block; color: var(--dx-muted); font-size: 9px; }
.dx-user { display: flex; align-items: center; gap: 8px; padding-right: 12px; font-size: 12px; font-weight: 600; }
.dx-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #22d3ee); font-size: 11px; font-weight: 800; }
.dx-user i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; }
.dx-winctl { display: flex; gap: 18px; margin-left: 6px; color: #9aa9b7; }
.dx-winctl span { font-size: 13px; }

/* Seitenleiste */
.dx-body { display: grid; grid-template-columns: 90px minmax(0, 1fr); min-height: 0; }
.dx-rail { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 14px 12px; padding: 10px 6px; border: 1px solid var(--dx-line); border-radius: 18px; background: rgba(255, 255, 255, .025); overflow-y: auto; scrollbar-width: none; }
.dx-rail::-webkit-scrollbar { display: none; }
.dx-rail button { position: relative; display: grid; justify-items: center; gap: 2px; padding: 6px 2px 5px; border: 0; border-radius: 12px; background: transparent; color: #7d90a2; font-size: 10px; transition: background .2s, color .2s; }
.dx-rail button svg { width: 18px; height: 18px; stroke-width: 1.6; }
.dx-rail button:hover { background: rgba(255, 255, 255, .05); color: #d8e6f0; }
.dx-rail button.active { background: var(--dx-accent-soft); color: #fff; font-weight: 600; }
.dx-rail button.active svg { color: var(--dx-accent); }
.dx-rail button.active::before { content: ""; position: absolute; left: -7px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--dx-accent); box-shadow: 0 0 10px var(--dx-accent); }
.dx-rail .dx-badge { position: absolute; top: 3px; right: 7px; color: var(--dx-accent); font-size: 8.5px; font-weight: 700; }
.dx-rail hr { width: 50%; margin: 3px auto; border: 0; border-top: 1px solid var(--dx-line); }

/* Hauptbereich */
.dx-main { position: relative; min-height: 0; padding: 14px 26px 96px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.dx-panel { animation: adIn .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes adIn { from { opacity: 0; transform: translateY(8px); } }
.dx-chip { display: inline-block; padding: 2px 10px; border: 1px solid rgba(76, 195, 240, .35); border-radius: 999px; background: var(--dx-accent-soft); color: var(--dx-accent); font-size: 11px; }
.dx-title { margin: 8px 0 2px; font-size: 27px; font-weight: 600; letter-spacing: -.01em; }
.dx-sub { margin: 0 0 16px; color: #a9b8c5; font-size: 12.5px; }
.dx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dx-btn { min-height: 34px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; background: #243039; color: #e2ecf3; font-size: 12.5px; transition: background .2s, transform .15s, filter .2s; }
.dx-btn:hover { background: #2d3b46; }
.dx-btn:active { transform: scale(.97); }
.dx-btn.primary { background: linear-gradient(135deg, color-mix(in srgb, var(--dx-accent) 80%, #fff), var(--dx-accent)); color: #06202c; font-weight: 600; box-shadow: 0 8px 22px color-mix(in srgb, var(--dx-accent) 30%, transparent); }
.dx-btn.primary:hover { filter: brightness(1.08); }
.dx-btn.ghost { border-color: var(--dx-line); background: transparent; }
.dx-btn.small { min-height: 28px; padding: 0 12px; font-size: 11.5px; }
.dx-btn[disabled] { opacity: .5; cursor: default; }
.dx-card { position: relative; padding: 18px 20px; border: 1px solid var(--dx-line); border-radius: 16px; background: var(--dx-card); }
.dx-card + .dx-card, .dx-card + .dx-grid, .dx-grid + .dx-card, .dx-grid + .dx-grid { margin-top: 12px; }
.dx-grid { display: grid; gap: 12px; align-items: stretch; }
.dx-grid > .dx-card { margin-top: 0 !important; }
.dx-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dx-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dx-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dx-g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dx-label { margin: 0 0 6px; color: var(--dx-muted); font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dx-label.accent { color: var(--dx-accent); }
.dx-live { display: flex; align-items: center; gap: 7px; }
.dx-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 10px #34d399; animation: adPulse 1.8s ease-in-out infinite; }
.dx-big { margin: 0; font-size: 28px; font-weight: 600; line-height: 1.2; }
.dx-muted { color: var(--dx-muted); }
.dx-ok { color: #34d399; }
.dx-warn { color: #fbbf24; }
.dx-bad { color: #fb7185; }
.dx-acc { color: var(--dx-accent); }
.dx-stat b { display: block; margin: 2px 0 1px; font-size: 22px; font-weight: 600; }
.dx-stat small { color: var(--dx-muted); font-size: 11px; }
.dx-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; vertical-align: 2px; }
.dx-tag.ok { background: rgba(52, 211, 153, .14); color: #34d399; }
.dx-tag.warn { background: rgba(251, 191, 36, .14); color: #fbbf24; }
.dx-tag.bad { background: rgba(251, 113, 133, .14); color: #fb7185; }
.dx-tag.acc { background: var(--dx-accent-soft); color: var(--dx-accent); }
.dx-tag.mute { background: rgba(255, 255, 255, .07); color: #8fa1b1; }

/* Ringe und Diagramme */
.dx-ring { position: relative; width: 108px; height: 108px; margin: 0 auto; }
.dx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dx-ring circle { stroke-width: 9; fill: none; }
.dx-ring .track { stroke: rgba(255, 255, 255, .08); }
.dx-ring .val { stroke-linecap: round; transition: stroke-dashoffset .8s cubic-bezier(.2, .8, .2, 1), stroke .4s; }
.dx-ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dx-ring b { font-size: 26px; font-weight: 600; line-height: 1; }
.dx-ring small { color: var(--dx-muted); font-size: 9.5px; }
.dx-ring.lg { width: 130px; height: 130px; }
.dx-ring.lg b { font-size: 30px; }
.dx-gauge { text-align: center; }
.dx-gauge .dx-label { margin: 10px 0 2px; }
.dx-gauge p { margin: 0; color: var(--dx-muted); font-size: 11px; }
.dx-chart { height: 130px; }
.dx-chart header { display: flex; justify-content: space-between; align-items: baseline; }
.dx-chart header b { color: var(--dx-accent); font-size: 16px; font-weight: 600; }
.dx-chart svg { display: block; width: 100%; height: 82px; margin-top: 8px; }
.dx-chart polyline { stroke: var(--dx-accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.dx-chart polygon { fill: color-mix(in srgb, var(--dx-accent) 14%, transparent); stroke: none; }
.dx-cores { display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px; height: 78px; align-items: end; }
.dx-cores i { display: block; border-radius: 4px 4px 2px 2px; background: var(--dx-accent); opacity: .85; transition: height .5s ease, background .4s; }
.dx-clock { text-align: right; }
.dx-clock b { font-size: 34px; font-weight: 600; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.dx-clock small { display: block; color: var(--dx-muted); }

/* Schalter und Listen */
.dx-toggle { position: relative; flex: none; width: 42px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: #2c3843; transition: background .2s; }
.dx-toggle::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #e8eef3; transition: transform .2s; }
.dx-toggle[aria-checked="true"] { background: var(--dx-accent); }
.dx-toggle[aria-checked="true"]::after { transform: translateX(18px); }
.dx-row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border: 1px solid var(--dx-line); border-radius: 14px; background: var(--dx-card); }
.dx-row + .dx-row { margin-top: 8px; }
.dx-row > div:first-of-type { flex: 1; min-width: 0; }
.dx-row b { font-weight: 600; }
.dx-row p { margin: 2px 0 0; color: var(--dx-muted); font-size: 11.5px; }
.dx-row .dx-mono { color: #5f7283; font-size: 10px; margin-left: 6px; }
.dx-seg { display: flex; gap: 6px; }
.dx-seg button { min-width: 78px; min-height: 30px; border: 0; border-radius: 999px; background: #243039; font-size: 12px; transition: background .2s; }
.dx-seg button.on { background: var(--dx-accent); color: #06202c; font-weight: 600; }
.dx-check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 2px solid #3a4854; border-radius: 50%; background: transparent; }
.dx-check[aria-checked="true"] { border-color: var(--dx-accent); background: var(--dx-accent); }
.dx-check[aria-checked="true"]::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #06202c; border-bottom: 2px solid #06202c; transform: rotate(-45deg); }
.dx-row.sel { border-color: color-mix(in srgb, var(--dx-accent) 55%, transparent); background: color-mix(in srgb, var(--dx-accent) 8%, var(--dx-card)); }
.dx-bar { height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dx-bar i { display: block; height: 100%; width: var(--v, 0%); border-radius: inherit; background: var(--dx-accent); transition: width .7s cubic-bezier(.2, .8, .2, 1); }

/* Tweaks */
.dx-cats { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--dx-line); }
.dx-cats button { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: #243039; font-size: 12.5px; }
.dx-cats button small { margin-left: 5px; color: var(--dx-muted); }
.dx-cats button.on { background: #eef4f8; color: #0b1720; font-weight: 600; }
.dx-cats button.on small { color: #54626e; }
.dx-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.dx-filter .dx-search { flex: 0 1 320px; height: 38px; border-radius: 12px; }
.dx-select { height: 38px; padding: 0 14px; border: 1px solid var(--dx-line); border-radius: 12px; background: rgba(255, 255, 255, .035); color: #b9c7d2; display: flex; align-items: center; gap: 30px; font-size: 12px; }
.dx-tweaks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dx-tweak { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--dx-line); border-radius: 14px; background: var(--dx-card); transition: border-color .2s, background .2s; }
.dx-tweak.on { border-color: color-mix(in srgb, var(--dx-accent) 35%, transparent); background: color-mix(in srgb, var(--dx-accent) 7%, var(--dx-card)); }
.dx-tweak > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--dx-accent-soft); color: var(--dx-accent); }
.dx-tweak > span svg { width: 16px; height: 16px; stroke-width: 1.8; }
.dx-tweak b { display: block; overflow: hidden; font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.dx-tweak p { margin: 2px 0 4px; overflow: hidden; color: var(--dx-muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.dx-tweak small { color: #6f8293; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dx-tweak small em { color: #fbbf24; font-style: normal; }
.dx-dots { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: 2px; }
.dx-dots i { width: 9px; height: 3px; border-radius: 2px; background: var(--dx-accent); }
.dx-dots i.off { background: #34424e; }
.dx-footer { position: sticky; bottom: -80px; z-index: 3; display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px 16px; border: 1px solid var(--dx-line); border-radius: 16px; background: rgba(16, 24, 32, .94); backdrop-filter: blur(10px); }
.dx-footer > b { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid var(--dx-accent); border-radius: 50%; color: var(--dx-accent); }
.dx-footer p { flex: 1; margin: 0; }
.dx-footer p small { display: block; color: var(--dx-muted); font-size: 11px; }

/* Spiele */
.dx-games { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.dx-game { position: relative; padding: 16px; border: 1px solid var(--dx-line); border-radius: 14px; background: var(--dx-card); text-align: left; transition: border-color .2s, transform .2s; }
.dx-game:hover { transform: translateY(-2px); }
.dx-game.sel { border-color: #34d399; box-shadow: 0 0 0 1px rgba(52, 211, 153, .35) inset; }
.dx-game .dx-gicon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border: 1px solid; border-radius: 50%; font-size: 11px; font-weight: 700; }
.dx-game b { display: block; font-size: 13px; font-weight: 600; }
.dx-game small { display: block; overflow: hidden; color: var(--dx-muted); font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.dx-game .done { position: absolute; top: 10px; right: 12px; color: #34d399; font-size: 12px; }
.dx-progress { height: 5px; margin-top: 14px; border-radius: 5px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.dx-progress i { display: block; width: var(--v); height: 100%; background: var(--dx-accent); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.dx-list { margin: 8px 0 0; padding: 0; list-style: none; }
.dx-list li { position: relative; padding: 3px 0 3px 18px; color: #c3d0da; font-size: 12px; }
.dx-list li::before { content: "›"; position: absolute; left: 3px; color: var(--dx-accent); }

/* Booster / Benchmark */
.dx-hero { display: flex; align-items: center; gap: 26px; }
.dx-hero > div:last-child { flex: 1; min-width: 0; }
.dx-hero h4 { margin: 2px 0 4px; font-size: 22px; font-weight: 600; }
.dx-targets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dx-targets button { min-width: 42px; min-height: 30px; border: 0; border-radius: 999px; background: #243039; font-size: 12px; }
.dx-targets button.on { background: #eef4f8; color: #0b1720; font-weight: 700; }
.dx-toplist div { display: grid; grid-template-columns: 110px 1fr 54px; gap: 12px; align-items: center; padding: 4px 0; font-size: 12px; }
.dx-toplist span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.dx-tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 12px; }
.dx-tiers div { padding-top: 6px; border-top: 3px solid rgba(255, 255, 255, .1); color: var(--dx-muted); font-size: 10px; }
.dx-tiers div.on { border-color: var(--dx-accent); color: var(--dx-accent); font-weight: 700; }
.dx-hist { display: flex; align-items: flex-end; gap: 10px; height: 150px; margin-top: 10px; }
.dx-hist div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; font-size: 11px; color: var(--dx-muted); }
.dx-hist i { display: block; width: 100%; height: var(--v); border-radius: 6px 6px 3px 3px; background: rgba(255, 255, 255, .08); transition: height .8s cubic-bezier(.2, .8, .2, 1); }
.dx-hist div.last i { background: linear-gradient(180deg, color-mix(in srgb, var(--dx-accent) 85%, #fff), var(--dx-accent)); }
.dx-hist div.last { color: var(--dx-accent); font-weight: 700; }

/* RAM-Stufen */
.dx-levels .dx-card { display: flex; flex-direction: column; }
.dx-levels .dx-card p { flex: 1; margin: 6px 0 14px; color: #b7c5d0; font-size: 11.5px; }
.dx-levels h5 { margin: 0; font-size: 16px; font-weight: 600; }
.dx-levels .l1 { border-color: rgba(52, 211, 153, .45); }
.dx-levels .l2 { border-color: rgba(76, 195, 240, .45); }
.dx-levels .l3 { border-color: rgba(251, 191, 36, .45); }
.dx-levels .l4 { border-color: rgba(251, 113, 133, .5); }
.dx-levels .l1 .dx-label { color: #34d399; }
.dx-levels .l2 .dx-label { color: #4cc3f0; }
.dx-levels .l3 .dx-label { color: #fbbf24; }
.dx-levels .l4 .dx-label { color: #fb7185; }

/* Fadenkreuz */
.dx-xpreview { display: grid; place-items: center; height: 190px; border: 1px solid var(--dx-line); border-radius: 14px; background: linear-gradient(120deg, #1d3140, #24323a 45%, #3b3527); }
.dx-xpreview svg { width: 120px; height: 120px; overflow: visible; }
.dx-shapes { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-shapes button { min-height: 30px; padding: 0 13px; border: 0; border-radius: 999px; background: #243039; font-size: 12px; }
.dx-shapes button.on { background: #eef4f8; color: #0b1720; font-weight: 600; }
.dx-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.dx-colors button { width: 28px; height: 28px; padding: 0; border: 3px solid transparent; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }
.dx-colors button.on { border-color: #fff; }
.dx-steppers div { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; }
.dx-steppers span { display: flex; align-items: center; gap: 12px; }
.dx-steppers button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #243039; font-size: 15px; line-height: 1; }
.dx-steppers b { min-width: 46px; text-align: center; font-weight: 600; }

/* System */
.dx-hw { display: flex; align-items: flex-start; gap: 12px; }
.dx-hw > span { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--dx-accent-soft); color: var(--dx-accent); }
.dx-hw > span svg { width: 18px; height: 18px; stroke-width: 1.7; }
.dx-hw b { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; }
.dx-kv { display: grid; grid-template-columns: 130px 1fr; gap: 7px 16px; margin: 6px 0 0; font-size: 12px; }
.dx-kv dt { color: var(--dx-muted); }
.dx-kv dd { margin: 0; }

/* Optionen */
.dx-settings { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; }
.dx-subnav button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; text-align: left; }
.dx-subnav button.on { border-color: var(--dx-line); background: var(--dx-accent-soft); }
.dx-subnav button span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--dx-accent-soft); color: var(--dx-accent); font-size: 13px; }
.dx-subnav button b { display: block; font-size: 12.5px; font-weight: 600; }
.dx-subnav button small { color: var(--dx-muted); font-size: 10px; }
.dx-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; }
.dx-swatches button { display: grid; justify-items: center; gap: 5px; padding: 8px 2px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--dx-muted); font-size: 10px; }
.dx-swatches button i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); }
.dx-swatches button.on { border-color: var(--dx-line); background: rgba(255, 255, 255, .06); color: #fff; }
.dx-swatches button.on i { box-shadow: 0 0 0 3px #0b131b, 0 0 0 5px #fff; }

/* Hinweis unten */
.dx-toast { position: absolute; left: 50%; bottom: 22px; z-index: 5; max-width: calc(100% - 40px); padding: 11px 18px; border: 1px solid color-mix(in srgb, var(--dx-accent) 45%, transparent); border-radius: 12px; background: rgba(10, 20, 28, .96); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); color: #dff4fb; font-size: 12.5px; opacity: 0; transform: translate(-50%, 12px); transition: opacity .25s, transform .25s; pointer-events: none; }
.dx-toast.show { opacity: 1; transform: translate(-50%, 0); }
.appdemo-caption { margin: 18px auto 0; color: #5f6f82; font-size: 11px; text-align: center; }

@media (max-width: 1280px) {
  .dx-guard, .dx-winctl { display: none; }
  .dx-tweaks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .appdemo { width: calc(100% - 24px); height: auto; grid-template-rows: auto auto; }
  .dx-top { flex-wrap: wrap; padding: 12px 14px; }
  .dx-top .dx-search, .dx-state, .dx-score { display: none; }
  .dx-filter .dx-search { flex: 1 1 100%; }
  .dx-footer { flex-wrap: wrap; bottom: -86px; }
  .dx-footer p { flex: 1 1 calc(100% - 60px); }
  .dx-footer .dx-btn { flex: 1 1 auto; padding: 0 12px; }
  .dx-body { grid-template-columns: 1fr; }
  .dx-rail { flex-direction: row; margin: 0 12px; padding: 6px; overflow-x: auto; overflow-y: hidden; }
  .dx-rail button { flex: 0 0 68px; }
  .dx-rail button.active::before { left: 14px; right: 14px; top: auto; bottom: -5px; width: auto; height: 3px; }
  .dx-rail hr { display: none; }
  .dx-main { height: 680px; padding: 16px 14px 90px; }
  .dx-g4, .dx-g3, .dx-g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-tweaks, .dx-g2, .dx-settings { grid-template-columns: 1fr; }
  .dx-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dx-cores { grid-template-columns: repeat(8, 1fr); }
  .dx-hero { flex-direction: column; align-items: flex-start; }
  .dx-row { flex-wrap: wrap; }
  .dx-clock { display: none; }
}
@media (prefers-reduced-motion: reduce) { .dx-panel { animation: none; } }
/* Statuszeile oben nie umbrechen - lieber wird das Suchfeld schmaler. */
.dx-state b, .dx-state small, .dx-guard b, .dx-guard small, .dx-user { white-space: nowrap; }
.dx-search { min-width: 140px; }
@media (max-width: 1500px) { .dx-guard { display: none; } }

/* Gesperrte Bereiche und "weitere Tweaks" */
.dx-rail button.locked { opacity: .55; }
.dx-rail button.locked:hover { opacity: .85; }
.dx-rail .dx-lock { font-size: 9px; filter: grayscale(1); }
.dx-locked { display: grid; justify-items: center; gap: 4px; max-width: 520px; margin: 90px auto 0; padding: 44px 36px; border: 1px dashed rgba(255, 255, 255, .14); border-radius: 22px; background: rgba(255, 255, 255, .025); text-align: center; }
.dx-locked-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 50%; background: var(--dx-accent-soft); color: var(--dx-accent); }
.dx-locked-icon svg { width: 28px; height: 28px; }
.dx-locked h3 { margin: 0; font-size: 26px; font-weight: 600; }
.dx-locked > p:not(.dx-label) { margin: 8px 0 20px; color: #a9b8c5; font-size: 13.5px; line-height: 1.6; }
.dx-locked a.dx-btn, .dx-more a.dx-btn { display: inline-flex; align-items: center; text-decoration: none; }
.dx-more { border-style: dashed; background: transparent; }
.dx-more > span { font-size: 20px; font-weight: 300; }
@media (max-width: 960px) { .appdemo { width: calc(100% - 20px); } .dx-main { height: 720px; } }