/* Synagy Studio – App-Schale im Higgsfield-Stil: dunkle Bühne, Inhalt zuerst, eine Heldenfarbe (Tang).
   Baut auf den Jelly-Tokens auf (jelly/jelly-ui.css): Asset-Farben, Federn, Schriften. Klassen mit s-. */

:root[data-theme="dark"] {
  --bg:#09090b; --bg-2:#0e0e11; --panel:#131317; --panel-2:#1a1a1f; --panel-3:#23232a; --panel-4:#2c2c35;
  --line:rgb(255 255 255 / .07); --line-2:rgb(255 255 255 / .12); --ink:#f5f4f8; --soft:#a9a7b4; --faint:#8a8796;
  --shadow:0 24px 60px -20px rgb(0 0 0 / .7); --glass:rgb(19 19 23 / .72); --scrim:rgb(4 4 6 / .72);
  color-scheme:dark;
}
:root[data-theme="light"] {
  --bg:#f3f2f6; --bg-2:#eceaf1; --panel:#fbfbfd; --panel-2:#f1f0f5; --panel-3:#e7e6ee; --panel-4:#dcdae4;
  --line:rgb(22 21 26 / .08); --line-2:rgb(22 21 26 / .14); --ink:#16151a; --soft:#55535f; --faint:#6b6977;
  --shadow:0 24px 60px -24px rgb(40 30 60 / .35); --glass:rgb(251 251 253 / .8); --scrim:rgb(20 18 30 / .45);
  color-scheme:light;
}
:root { --tang:#F26B1D; --tang-2:#FF9A4D; --volt:#D8FF45; --ok:#5CC93B; --warn:#FFC24D; --bad:#FF5A6E;
  --r1:10px; --r2:14px; --r3:20px; --r4:28px; --top:60px; }

* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); }
body { font:400 14px/1.5 var(--sans); -webkit-font-smoothing:antialiased; letter-spacing:-.005em; }
button, input, textarea, select { font:inherit; color:inherit; }
a { color:inherit; }
.ic { width:18px; height:18px; flex:none; }
::selection { background:color-mix(in oklab,var(--tang) 45%,transparent); }
* { scrollbar-width:thin; scrollbar-color:var(--panel-4) transparent; }
[hidden] { display:none !important; }
.muted { color:var(--soft); } .faint { color:var(--faint); } .mono { font-family:var(--mono); }
.row { display:flex; align-items:center; gap:8px; } .row.wrap { flex-wrap:wrap; } .grow { flex:1; min-width:0; }
.stack { display:grid; gap:12px; grid-template-columns:minmax(0,1fr); } .ell { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.serif { font-family:var(--serif); font-weight:400; letter-spacing:-.02em; }

/* ── Kopfleiste ───────────────────────────────────────────────────────────── */
.s-top { position:sticky; top:0; z-index:40; height:var(--top); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px;
  padding:0 18px; background:color-mix(in oklab,var(--bg) 82%,transparent); backdrop-filter:blur(18px) saturate(140%); border-bottom:1px solid var(--line); }
.s-logo { display:flex; align-items:center; gap:10px; text-decoration:none; font:italic 400 26px/1 var(--serif); letter-spacing:-.02em; }
.s-logo b { font-weight:400; color:var(--tang); }
.s-logo .dot { width:22px; height:22px; border-radius:7px; background:radial-gradient(circle at 32% 28%,#FFD2AE,var(--tang-2) 40%,var(--tang) 75%);
  box-shadow:inset 0 -3px 6px rgb(0 0 0 / .25), 0 6px 16px -6px var(--tang); }
.s-nav { display:flex; gap:4px; justify-content:center; overflow-x:auto; scrollbar-width:none; }
.s-nav a { display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:999px; text-decoration:none; color:var(--soft);
  font-weight:500; white-space:nowrap; transition:background .2s, color .2s; }
.s-nav a:hover { color:var(--ink); background:var(--panel-2); }
.s-nav a[aria-current="page"] { color:var(--bg); background:var(--ink); }
.s-nav a .new { font:600 9px/1 var(--mono); letter-spacing:.08em; padding:3px 5px; border-radius:5px; background:var(--volt); color:#111; }
.s-right { display:flex; align-items:center; gap:8px; }
.s-credits { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px 0 10px; border-radius:999px; background:var(--panel-2);
  border:1px solid var(--line); font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; text-decoration:none; }
.s-credits .ic { color:var(--volt); width:16px; height:16px; }
.s-credits.low .ic { color:var(--bad); }
.s-avatar { width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; font-weight:700; color:#fff;
  background:radial-gradient(circle at 30% 25%,#FFC49A,var(--tang) 60%,#B84A10); box-shadow:inset 0 -3px 6px rgb(0 0 0 / .25); }
.s-menu { position:absolute; right:14px; top:calc(var(--top) - 4px); width:260px; padding:8px; border-radius:var(--r3); background:var(--panel);
  border:1px solid var(--line-2); box-shadow:var(--shadow); z-index:60; animation:s-pop .18s ease-out; }
.s-menu .who { padding:10px 12px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.s-menu a, .s-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:none; text-decoration:none; cursor:pointer; text-align:left; }
.s-menu a:hover, .s-menu button:hover { background:var(--panel-2); }
@keyframes s-pop { from { opacity:0; transform:translateY(-6px) scale(.98); } }
.s-burger { display:none; }

/* ── Knöpfe & Eingaben ────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 16px; border-radius:12px; border:1px solid var(--line-2);
  background:var(--panel-2); cursor:pointer; font-weight:550; white-space:nowrap; text-decoration:none; transition:background .15s, transform .15s, border-color .15s; }
.btn:hover { background:var(--panel-3); }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.btn-sm { height:32px; padding:0 11px; border-radius:10px; font-size:13px; }
.btn-lg { height:52px; padding:0 22px; border-radius:16px; font-size:16px; }
.btn-icon { width:40px; padding:0; } .btn-sm.btn-icon { width:32px; }
.btn-ghost { background:transparent; border-color:transparent; } .btn-ghost:hover { background:var(--panel-2); }
.btn-white { background:var(--ink); color:var(--bg); border-color:transparent; } .btn-white:hover { background:color-mix(in oklab,var(--ink) 88%,var(--bg)); }
.btn-danger { color:var(--bad); }
.btn-primary { position:relative; overflow:hidden; isolation:isolate; border:0; color:#1a0a02; font-weight:650;
  background:radial-gradient(120% 120% at var(--mx,30%) 0%,rgb(255 255 255 / .38),transparent 45%),linear-gradient(var(--tang-2),var(--tang) 70%);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -6px 14px rgb(160 50 0 / .35), 0 14px 30px -12px var(--tang); }
.btn-primary:hover { filter:brightness(1.06); background:radial-gradient(120% 120% at var(--mx,30%) 0%,rgb(255 255 255 / .45),transparent 45%),linear-gradient(var(--tang-2),var(--tang) 70%); }
.btn-primary .cost { display:inline-flex; align-items:center; gap:4px; margin-left:4px; padding:3px 8px; border-radius:999px; background:rgb(0 0 0 / .22); font-size:13px; font-variant-numeric:tabular-nums; }
.btn-primary .cost .ic { width:13px; height:13px; color:var(--volt); }
.btn-primary[data-busy="1"]::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(100deg,transparent 30%,rgb(255 255 255 / .35),transparent 70%) 0 0/200% 100%; animation:s-shine 1.2s linear infinite; }
@keyframes s-shine { from { background-position:200% 0; } to { background-position:-200% 0; } }

.input, .textarea, .select { width:100%; border:1px solid var(--line-2); border-radius:12px; background:var(--bg-2); padding:10px 12px; outline:0; transition:border-color .15s, box-shadow .15s; }
.input { height:42px; }
.textarea { min-height:120px; resize:vertical; line-height:1.55; }
.input:focus, .textarea:focus, .select:focus { border-color:color-mix(in oklab,var(--tang) 70%,transparent); box-shadow:0 0 0 3px color-mix(in oklab,var(--tang) 22%,transparent); }
.select { height:42px; padding:0 30px 0 12px; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 8px; font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.label .hint { font:500 12px var(--sans); letter-spacing:0; text-transform:none; color:var(--faint); }
.field { display:grid; gap:0; }
.err { color:var(--bad); font-size:13px; min-height:18px; }

.chip { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--panel-2);
  cursor:pointer; font-size:13px; font-weight:500; white-space:nowrap; transition:all .15s; }
.chip:hover { border-color:var(--line-2); background:var(--panel-3); }
.chip[aria-pressed="true"] { background:color-mix(in oklab,var(--tang) 18%,var(--panel-2)); border-color:color-mix(in oklab,var(--tang) 55%,transparent); color:var(--ink); }
.chip .ic { width:15px; height:15px; }
.chip .x { margin-right:-4px; opacity:.6; }
.tag { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px; border-radius:999px; font:600 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  background:var(--panel-3); color:var(--soft); white-space:nowrap; }
.tag.volt { background:var(--volt); color:#111; } .tag.tang { background:color-mix(in oklab,var(--tang) 25%,transparent); color:var(--tang-2); }
.tag.ok { background:color-mix(in oklab,var(--ok) 20%,transparent); color:#8BE36A; } .tag.bad { background:color-mix(in oklab,var(--bad) 20%,transparent); color:#FF8C99; }
.tag.warn { background:color-mix(in oklab,var(--warn) 20%,transparent); color:var(--warn); }
.tag.k-sprite, .tag.k-image, .tag.k-texture { background:color-mix(in oklab,var(--bub-core) 22%,transparent); color:var(--bub-body); }
.tag.k-sfx, .tag.k-music { background:color-mix(in oklab,var(--sky-core) 22%,transparent); color:var(--sky-body); }
.tag.k-model3d { background:color-mix(in oklab,var(--tang-core) 22%,transparent); color:var(--tang-body); }
.tag.k-game { background:color-mix(in oklab,var(--lime-core) 22%,transparent); color:var(--lime-body); }

.seg { display:inline-flex; padding:3px; border-radius:12px; background:var(--bg-2); border:1px solid var(--line); gap:2px; }
.seg button { height:32px; padding:0 14px; border:0; border-radius:9px; background:none; color:var(--soft); cursor:pointer; font-weight:550; display:inline-flex; align-items:center; gap:6px; }
.seg button[aria-selected="true"] { background:var(--panel-3); color:var(--ink); box-shadow:0 1px 0 rgb(255 255 255 / .06) inset; }
.seg button:disabled { opacity:.4; cursor:not-allowed; }
.seg.full { display:flex; } .seg.full button { flex:1; justify-content:center; }

.switch { display:inline-block; vertical-align:middle; position:relative; width:40px; height:24px; border-radius:999px; border:0; background:var(--panel-4); cursor:pointer; flex:none; transition:background .2s; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:translate .3s var(--spring-bounce); box-shadow:0 2px 4px rgb(0 0 0 / .3); }
.switch[aria-checked="true"] { background:var(--tang); } .switch[aria-checked="true"]::after { translate:16px 0; }

/* ── Flächen ──────────────────────────────────────────────────────────────── */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r3); }
.pad { padding:16px; } .pad-l { padding:24px; }
.pick { display:flex; align-items:center; gap:12px; width:100%; padding:10px; border-radius:16px; border:1px solid var(--line-2); background:var(--panel-2); cursor:pointer; text-align:left; transition:border-color .15s, background .15s; }
.pick:hover { background:var(--panel-3); }
.pick .thumb { width:52px; height:52px; border-radius:12px; flex:none; overflow:hidden; display:grid; place-items:center; }
.pick .t { font-weight:600; } .pick .d { font-size:12.5px; color:var(--soft); }
.pick .chev { margin-left:auto; color:var(--faint); }

/* ── Seitenlayout ─────────────────────────────────────────────────────────── */
.page { width:min(1440px,100%); margin:0 auto; padding:28px 24px 120px; }
.page-h { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:6px 0 22px; flex-wrap:wrap; }
.page-h h1 { margin:0; font:400 44px/1 var(--serif); letter-spacing:-.025em; }
.page-h h1 em { color:var(--tang-2); }
.page-h p { margin:6px 0 0; color:var(--soft); max-width:560px; }
.sec-h { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:34px 0 14px; flex-wrap:wrap; }
.sec-h h2 { margin:0; font:650 18px/1.2 var(--sans); letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }

/* ── Entdecken ────────────────────────────────────────────────────────────── */
.hero { position:relative; display:grid; grid-template-columns:1.25fr 1fr; gap:14px; }
.banner { position:relative; min-height:340px; border-radius:var(--r4); overflow:hidden; padding:34px; display:flex; flex-direction:column; justify-content:flex-end; isolation:isolate;
  background:#111; border:1px solid var(--line); cursor:pointer; text-decoration:none; }
.banner .art { position:absolute; inset:0; z-index:-1; }
.banner::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 30%,rgb(0 0 0 / .78)); }
.banner h2 { margin:10px 0 8px; font:400 clamp(34px,4.2vw,58px)/.95 var(--serif); letter-spacing:-.03em; color:#fff; max-width:560px; }
.banner h2 em { color:var(--tang-2); }
.banner p { margin:0 0 18px; color:rgb(255 255 255 / .78); max-width:460px; }
.banner.small { min-height:163px; padding:22px; } .banner.small h2 { font-size:30px; margin:6px 0 4px; } .banner.small p { margin:0; font-size:13px; }
.hero .side { display:grid; gap:14px; }
.apps { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(210px,1fr); gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; }
.appcard { position:relative; aspect-ratio:3/4; border-radius:var(--r3); overflow:hidden; border:1px solid var(--line); cursor:pointer; scroll-snap-align:start; isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end; padding:14px; text-align:left; background:#111; transition:transform .35s var(--spring-soft), border-color .2s; }
.appcard:hover { transform:translateY(-4px); border-color:var(--line-2); }
.appcard .art { position:absolute; inset:0; z-index:-1; transition:transform .6s var(--ease-out); }
.appcard:hover .art { transform:scale(1.06); }
.appcard::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 45%,rgb(0 0 0 / .85)); }
.appcard .badge { position:absolute; top:12px; left:12px; }
.appcard b { color:#fff; font-size:16px; } .appcard span { color:rgb(255 255 255 / .7); font-size:12.5px; }
.appcard .go { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgb(255 255 255 / .14); backdrop-filter:blur(8px); display:grid; place-items:center; color:#fff; opacity:0; transition:opacity .2s; }
.appcard:hover .go { opacity:1; }
.art-cover { width:100%; height:100%; object-fit:cover; display:block; }
/* Echter Spiel-Screenshot erscheint beim Überfahren über der Illustration (wie Higgsfields Video-Vorschau) */
.art .shot { position:absolute; inset:0; opacity:0; transition:opacity .35s ease; }
.appcard:hover .art .shot, .appcard:focus-visible .art .shot { opacity:1; }
.art-gen { width:100%; height:100%; display:grid; place-items:center; }
.art-gen > svg { width:100%; height:100%; display:block; }

.ggrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.gcard { position:relative; border-radius:var(--r3); overflow:hidden; background:var(--panel); border:1px solid var(--line); cursor:pointer; transition:transform .3s var(--spring-soft), border-color .2s; }
.gcard:hover { transform:translateY(-3px); border-color:var(--line-2); }
.gcard .cover { aspect-ratio:16/10; background:var(--panel-2); position:relative; overflow:hidden; }
.gcard .cover img { width:100%; height:100%; object-fit:cover; display:block; }
.gcard .cover .play { position:absolute; inset:0; display:grid; place-items:center; background:rgb(0 0 0 / .35); opacity:0; transition:opacity .2s; }
.gcard:hover .cover .play { opacity:1; }
.gcard .cover .play span { width:54px; height:54px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center; }
.gcard .cover .corner { position:absolute; top:10px; left:10px; display:flex; gap:6px; }
.gcard .meta { padding:12px 14px 14px; display:grid; gap:4px; }
.gcard .meta b { font-size:14.5px; } .gcard .meta small { color:var(--faint); display:flex; gap:10px; align-items:center; }
.gcard .meta small .ic { width:13px; height:13px; }

/* ── Erstellen ────────────────────────────────────────────────────────────── */
.create { display:grid; grid-template-columns:400px minmax(0,1fr); height:calc(100vh - var(--top)); height:calc(100dvh - var(--top)); }
.create.with-versions { grid-template-columns:400px minmax(0,1fr) 290px; }
.panel { min-height:0; overflow-y:auto; border-right:1px solid var(--line); background:var(--bg-2); padding:18px 16px 24px; display:grid; align-content:start; gap:18px; }
.panel .tabs { position:sticky; top:-18px; z-index:3; margin:-18px -16px 0; padding:12px 16px; background:var(--bg-2); border-bottom:1px solid var(--line); }
.panel .gen { position:sticky; bottom:-24px; margin:0 -16px -24px; padding:14px 16px 18px; background:linear-gradient(transparent,var(--bg-2) 30%); }
.panel .gen .btn { width:100%; }
.prompt-box { position:relative; border:1px solid var(--line-2); border-radius:16px; background:var(--bg); transition:border-color .15s, box-shadow .15s; }
.prompt-box:focus-within { border-color:color-mix(in oklab,var(--tang) 70%,transparent); box-shadow:0 0 0 3px color-mix(in oklab,var(--tang) 20%,transparent); }
.prompt-box textarea { width:100%; min-height:132px; border:0; background:transparent; padding:14px 14px 4px; resize:vertical; outline:0; line-height:1.55; font-size:14.5px; }
.prompt-box .tools { display:flex; align-items:center; gap:6px; padding:6px 8px 8px; }
.prompt-box .count { margin-left:auto; font:500 11px var(--mono); color:var(--faint); }
.quick { display:flex; flex-wrap:wrap; gap:6px; }
.thumbs { display:flex; flex-wrap:wrap; gap:8px; }
.thumbs .t { position:relative; width:56px; height:56px; border-radius:12px; overflow:hidden; background:var(--panel-2); border:1px solid var(--line); display:grid; place-items:center; }
.thumbs .t img { width:100%; height:100%; object-fit:contain; }
.thumbs .t .rm { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; border:0; background:rgb(0 0 0 / .7); color:#fff; display:grid; place-items:center; cursor:pointer; padding:0; }
.thumbs .t .rm .ic { width:11px; height:11px; }
.thumbs .add { border:1px dashed var(--line-2); background:transparent; cursor:pointer; color:var(--soft); }

.stage { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; background:var(--bg); }
.stage-bar { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); min-height:58px; flex-wrap:wrap; }
.stage-bar .title { font:600 16px/1.2 var(--sans); border:1px solid transparent; background:none; border-radius:8px; padding:6px 8px; min-width:0; max-width:340px; outline:0; }
.stage-bar .title:hover, .stage-bar .title:focus { border-color:var(--line-2); background:var(--bg-2); }
.stage-body { position:relative; min-height:0; padding:16px; display:grid; }
.frame-wrap { position:relative; width:100%; height:100%; min-height:320px; border-radius:var(--r3); overflow:hidden; background:#000; border:1px solid var(--line); }
.frame-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.frame-wrap .veil { position:absolute; inset:0; display:grid; place-items:center; background:rgb(0 0 0 / .55); color:#fff; }
.stage-foot { display:flex; align-items:center; gap:8px; padding:10px 16px 14px; flex-wrap:wrap; }
.checkpill { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line); font-size:12.5px; color:var(--soft); }
.checkpill .ic { width:14px; height:14px; }
.checkpill.ok { color:#8BE36A; } .checkpill.bad { color:#FF8C99; border-color:color-mix(in oklab,var(--bad) 35%,transparent); } .checkpill.warn { color:var(--warn); }
.errors { width:100%; margin-top:4px; padding:10px 12px; border-radius:12px; background:color-mix(in oklab,var(--bad) 10%,var(--panel)); border:1px solid color-mix(in oklab,var(--bad) 30%,transparent); font:12px/1.5 var(--mono); color:#FFB3BC; max-height:120px; overflow:auto; white-space:pre-wrap; }

.versions { min-height:0; overflow-y:auto; border-left:1px solid var(--line); background:var(--bg-2); padding:16px 12px; }
.ver { display:grid; gap:3px; padding:10px 12px; border-radius:12px; cursor:pointer; border:1px solid transparent; }
.ver:hover { background:var(--panel); }
.ver[aria-current="true"] { background:var(--panel); border-color:var(--line-2); }
.ver .n { font:600 11px var(--mono); color:var(--tang-2); } .ver .note { font-size:13px; } .ver small { color:var(--faint); font-size:11.5px; }

/* Generierung läuft */
.gen-card { position:relative; border-radius:var(--r3); overflow:hidden; border:1px solid var(--line); background:#0c0c10; min-height:320px; display:grid; grid-template-rows:auto 1fr; isolation:isolate; }
.gen-card::before { content:""; position:absolute; inset:-40%; z-index:-1; opacity:.55;
  background:conic-gradient(from var(--a,0deg) at 50% 50%,var(--tang),var(--grape-core),var(--sky-core),var(--bub-core),var(--tang)); filter:blur(90px); animation:s-rot 8s linear infinite; }
@property --a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes s-rot { to { --a:360deg; } }
.gen-card .head { display:flex; align-items:center; gap:12px; padding:18px 20px; background:rgb(10 10 14 / .55); backdrop-filter:blur(8px); border-bottom:1px solid rgb(255 255 255 / .06); }
.gen-card .head b { font-size:15px; } .gen-card .head small { color:rgb(255 255 255 / .6); }
.gen-card .code { margin:0; padding:18px 20px; font:12px/1.55 var(--mono); color:rgb(255 255 255 / .72); white-space:pre-wrap; word-break:break-all; overflow:hidden;
  mask-image:linear-gradient(transparent,#000 30%); background:rgb(8 8 12 / .7); display:flex; flex-direction:column; justify-content:flex-end; }
.spinner { width:22px; height:22px; border-radius:50%; border:2.5px solid rgb(255 255 255 / .18); border-top-color:var(--tang-2); animation:s-spin .8s linear infinite; flex:none; }
@keyframes s-spin { to { rotate:360deg; } }
.stages { display:flex; gap:6px; flex-wrap:wrap; }
.stages .st { font:600 10px var(--mono); letter-spacing:.06em; text-transform:uppercase; padding:4px 7px; border-radius:6px; background:rgb(255 255 255 / .08); color:rgb(255 255 255 / .5); }
.stages .st.on { background:var(--tang); color:#1a0a02; } .stages .st.done { color:#8BE36A; }

/* ── Leere Zustände ───────────────────────────────────────────────────────── */
.empty { display:grid; justify-items:center; text-align:center; gap:10px; padding:56px 20px; color:var(--soft); }
.empty .blob { width:84px; height:84px; border-radius:40% 60% 55% 45%/50% 45% 55% 50%; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle at 32% 28%,#fff8,transparent 40%),linear-gradient(var(--tang-2),var(--tang)); animation:j-breathe 3.4s ease-in-out infinite; box-shadow:0 20px 40px -18px var(--tang); }
.empty .blob .ic { width:34px; height:34px; }
.empty h3 { margin:6px 0 0; color:var(--ink); font:400 30px/1 var(--serif); }
.empty p { margin:0; max-width:420px; }

/* ── Assets ───────────────────────────────────────────────────────────────── */
.lib { display:grid; grid-template-columns:400px minmax(0,1fr); height:calc(100vh - var(--top)); height:calc(100dvh - var(--top)); }
.lib-main { min-width:0; overflow-y:auto; padding:18px 22px 80px; }
.kinds { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.kind { display:grid; justify-items:center; gap:6px; padding:12px 6px; border-radius:14px; border:1px solid var(--line); background:var(--panel-2); cursor:pointer; font-size:12.5px; font-weight:550; color:var(--soft); }
.kind .ic { width:22px; height:22px; }
.kind:hover { background:var(--panel-3); color:var(--ink); }
.kind[aria-pressed="true"] { color:var(--ink); border-color:color-mix(in oklab,var(--hue-core) 60%,transparent); background:color-mix(in oklab,var(--hue-core) 16%,var(--panel-2)); }
.kind[aria-pressed="true"] .ic { color:var(--hue-body); }
.agrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:12px; }
.acard { border-radius:16px; overflow:hidden; background:var(--panel); border:1px solid var(--line); cursor:pointer; transition:transform .25s var(--spring-soft), border-color .2s; }
.acard:hover { transform:translateY(-2px); border-color:var(--line-2); }
.acard[aria-selected="true"] { border-color:var(--tang); box-shadow:0 0 0 2px color-mix(in oklab,var(--tang) 40%,transparent); }
.acard .pv { aspect-ratio:1; display:grid; place-items:center; background:repeating-conic-gradient(var(--panel-2) 0 25%,var(--panel-3) 0 50%) 0 0/20px 20px; position:relative; }
.acard .pv img { width:84%; height:84%; object-fit:contain; image-rendering:auto; }
.acard .pv.cover img { width:100%; height:100%; object-fit:cover; }
.acard .pv .big { width:40%; height:40%; color:var(--soft); }
.acard .pv canvas { width:100%; height:60%; }
.acard .fav { position:absolute; top:8px; right:8px; color:var(--bub-body); }
.acard .fav .ic { width:16px; height:16px; fill:currentColor; }
.acard .nm { padding:9px 11px 11px; display:flex; align-items:center; gap:6px; }
.acard .nm b { font-size:13px; font-weight:600; }
.acard .check { position:absolute; top:8px; left:8px; width:22px; height:22px; border-radius:7px; border:2px solid rgb(255 255 255 / .7); background:rgb(0 0 0 / .35); display:grid; place-items:center; }
.acard[aria-selected="true"] .check { background:var(--tang); border-color:var(--tang); }
.acard .check .ic { width:14px; height:14px; color:#fff; opacity:0; } .acard[aria-selected="true"] .check .ic { opacity:1; }
.filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; position:sticky; top:-18px; z-index:2; padding:12px 0; background:var(--bg); }

/* ── Skills & Workflows ───────────────────────────────────────────────────── */
.kgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.kcard { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; padding:16px; border-radius:var(--r3); background:var(--panel); border:1px solid var(--line); cursor:pointer; text-align:left; transition:border-color .2s, transform .25s var(--spring-soft); }
.kcard:hover { border-color:var(--line-2); transform:translateY(-2px); }
.orb { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; flex:none;
  background:radial-gradient(circle at 32% 26%,rgb(255 255 255 / .55),transparent 42%),linear-gradient(var(--hue-body),var(--hue-core));
  box-shadow:inset 0 -4px 8px color-mix(in oklab,var(--hue-core) 60%,black), 0 10px 20px -10px var(--hue-core); }
.orb .ic { width:22px; height:22px; }
.orb .ic.glyph { width:27px; height:27px; filter:drop-shadow(0 1.5px 0 rgb(0 0 0 / .16)); }
.kcard b { display:block; font-size:15px; margin-bottom:3px; } .kcard p { margin:0; color:var(--soft); font-size:13px; }
.kcard .foot { grid-column:1 / -1; display:flex; align-items:center; gap:8px; }
.chain { display:flex; align-items:center; gap:0; flex-wrap:wrap; row-gap:8px; }
.node { display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line-2); font-size:12.5px; font-weight:550; white-space:nowrap; }
.node .ic { width:14px; height:14px; color:var(--tang-2); }
.link { width:18px; height:2px; background:var(--line-2); }
.canvas { position:relative; border-radius:var(--r4); border:1px solid var(--line); min-height:420px; padding:28px; overflow:auto;
  background:radial-gradient(circle at center,var(--line) 1px,transparent 1.5px) 0 0/22px 22px, var(--bg-2); }
.flow { display:flex; align-items:stretch; gap:0; min-width:max-content; }
.bignode { position:relative; width:210px; padding:14px; border-radius:18px; background:var(--panel); border:1px solid var(--line-2); display:grid; gap:8px; align-content:start; transition:border-color .3s, box-shadow .3s; }
.bignode .role { font:600 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.bignode b { font-size:14.5px; display:flex; align-items:center; gap:8px; }
.bignode p { margin:0; font-size:12.5px; color:var(--soft); }
.bignode .sum { font-size:12.5px; color:var(--ink); background:var(--panel-2); border-radius:10px; padding:8px 10px; }
.bignode[data-state="running"] { border-color:var(--tang); box-shadow:0 0 0 4px color-mix(in oklab,var(--tang) 20%,transparent), 0 18px 40px -18px var(--tang); }
.bignode[data-state="done"] { border-color:color-mix(in oklab,var(--ok) 60%,transparent); }
.bignode[data-state="error"] { border-color:var(--bad); }
.bignode .state { position:absolute; top:12px; right:12px; }
.wire { align-self:center; width:44px; height:2px; background:var(--line-2); position:relative; }
.wire::after { content:""; position:absolute; right:-1px; top:-4px; border:5px solid transparent; border-left-color:var(--line-2); border-right:0; }
.wire.on { background:linear-gradient(90deg,var(--tang),var(--tang-2)); } .wire.on::after { border-left-color:var(--tang-2); }
.palette { display:flex; flex-wrap:wrap; gap:6px; }

/* ── Assist ───────────────────────────────────────────────────────────────── */
.assist { display:grid; grid-template-columns:260px minmax(0,1fr); height:calc(100vh - var(--top)); height:calc(100dvh - var(--top)); }
.chats { overflow-y:auto; border-right:1px solid var(--line); background:var(--bg-2); padding:14px 10px; display:grid; align-content:start; gap:4px; }
.chats a { display:block; } .chats a.btn { display:flex; } .chats a:not(.btn) { padding:9px 12px; border-radius:10px; text-decoration:none; color:var(--soft); font-size:13.5px; }
.chats a:hover, .chats a[aria-current="true"] { background:var(--panel); color:var(--ink); }
.thread { display:grid; grid-template-rows:minmax(0,1fr) auto; grid-template-columns:minmax(0,1fr); min-height:0; min-width:0; }
.msgs { overflow-y:auto; padding:28px max(24px,calc(50% - 380px)); display:grid; align-content:start; gap:18px; }
.msg { display:grid; gap:6px; max-width:100%; }
.msg.user { justify-self:end; max-width:80%; padding:12px 16px; border-radius:18px 18px 6px 18px; background:var(--panel-2); }
.msg.ai { line-height:1.65; }
.msg.ai p { margin:0 0 8px; } .msg.ai ul { margin:0 0 8px; padding-left:20px; } .msg.ai code { font-family:var(--mono); font-size:12.5px; background:var(--panel-2); padding:2px 5px; border-radius:5px; }
.msg.ai pre { background:var(--panel); border:1px solid var(--line); padding:12px; border-radius:12px; overflow:auto; font:12.5px/1.5 var(--mono); }
.msg .prompt-card { border:1px solid color-mix(in oklab,var(--tang) 45%,transparent); background:color-mix(in oklab,var(--tang) 8%,var(--panel)); border-radius:14px; padding:12px 14px; display:grid; gap:10px; }
.composer { padding:14px max(24px,calc(50% - 380px)) 22px; }
.composer .box { display:flex; align-items:flex-end; gap:8px; padding:8px; border-radius:20px; border:1px solid var(--line-2); background:var(--panel); }
.composer textarea { flex:1; border:0; background:none; resize:none; outline:0; min-height:44px; max-height:200px; padding:10px; line-height:1.5; }
.sugg { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.sugg .chip { white-space:normal; height:auto; min-height:32px; padding:7px 12px; text-align:left; }

/* ── Modal, Schublade, Popover ────────────────────────────────────────────── */
.modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:var(--scrim); backdrop-filter:blur(6px); animation:s-fade .2s ease-out; }
.modal .box { width:min(var(--w,560px),100%); max-height:calc(100vh - 40px); overflow:auto; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r4); box-shadow:var(--shadow); animation:s-pop .25s var(--spring-soft); }
.modal .box > header { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px; padding:18px 20px; background:var(--panel); border-bottom:1px solid var(--line); }
.modal .box > header h3 { margin:0; font:650 17px var(--sans); flex:1; }
.modal .box > .body { padding:20px; }
.modal .box > footer { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:8px; padding:14px 20px; background:var(--panel); border-top:1px solid var(--line); }
@keyframes s-fade { from { opacity:0; } }
.drawer { position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(480px,100%); background:var(--panel); border-left:1px solid var(--line-2); box-shadow:var(--shadow); display:grid; grid-template-rows:auto 1fr auto; animation:s-slide .3s var(--ease-out); }
@keyframes s-slide { from { transform:translateX(40px); opacity:0; } }
.drawer > header { display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); }
.drawer > .body { overflow-y:auto; padding:18px; display:grid; align-content:start; gap:16px; }
.drawer > footer { display:flex; gap:8px; padding:14px 18px; border-top:1px solid var(--line); flex-wrap:wrap; }
.pop { position:fixed; z-index:110; width:min(420px,calc(100vw - 20px)); max-height:min(560px,calc(100vh - 40px)); overflow:auto; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r3); box-shadow:var(--shadow); padding:8px; animation:s-pop .18s ease-out; }
.opt { display:flex; align-items:center; gap:12px; width:100%; padding:10px; border:0; border-radius:12px; background:none; cursor:pointer; text-align:left; }
.opt:hover, .opt[aria-selected="true"] { background:var(--panel-2); }
.opt .t { font-weight:600; font-size:14px; } .opt .d { color:var(--soft); font-size:12.5px; }
.opt .r { flex:none; margin-left:auto; text-align:right; font-size:12px; color:var(--faint); white-space:nowrap; }
.pop .sep { height:1px; background:var(--line); margin:6px 4px; }
.pop .search { position:sticky; top:-8px; margin:-8px -8px 6px; padding:8px; background:var(--panel); border-bottom:1px solid var(--line); z-index:1; }
.preview-big { border-radius:var(--r3); overflow:hidden; background:repeating-conic-gradient(var(--panel-2) 0 25%,var(--panel-3) 0 50%) 0 0/24px 24px; display:grid; place-items:center; min-height:260px; }
.preview-big img { max-width:100%; max-height:380px; object-fit:contain; }
.preview-big model-viewer { width:100%; height:340px; --poster-color:transparent; }
.kv { display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:13px; } .kv dt { color:var(--faint); } .kv dd { margin:0; word-break:break-word; }
pre.body-text { margin:0; white-space:pre-wrap; font:12.5px/1.6 var(--mono); background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:14px; }
.code-view { width:100%; min-height:60vh; font:12.5px/1.55 var(--mono); tab-size:2; white-space:pre; background:var(--bg-2); }

/* ── Job-Dock ─────────────────────────────────────────────────────────────── */
.dock { position:fixed; right:16px; bottom:16px; z-index:80; display:grid; gap:8px; width:min(340px,calc(100vw - 32px)); }
.djob { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:10px 12px; border-radius:16px; background:var(--glass); backdrop-filter:blur(16px) saturate(140%);
  border:1px solid var(--line-2); box-shadow:var(--shadow); cursor:pointer; animation:s-pop .25s var(--spring-soft); }
.djob b { font-size:13px; display:block; } .djob small { color:var(--soft); font-size:12px; display:block; }
.djob .bar { grid-column:1 / -1; height:3px; border-radius:3px; background:var(--panel-3); overflow:hidden; }
.djob .bar i { display:block; height:100%; width:40%; background:linear-gradient(90deg,var(--tang),var(--tang-2)); animation:s-indet 1.3s ease-in-out infinite; border-radius:inherit; }
@keyframes s-indet { from { transform:translateX(-100%); } to { transform:translateX(260%); } }
.djob.done .bar i { width:100%; animation:none; background:var(--ok); } .djob.error .bar i { width:100%; animation:none; background:var(--bad); }

/* ── Anmelden ─────────────────────────────────────────────────────────────── */
.auth { display:grid; grid-template-columns:1.1fr 1fr; min-height:calc(100vh - var(--top)); }
.auth .show { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:48px; isolation:isolate; border-right:1px solid var(--line); }
.auth .show::before { content:""; position:absolute; inset:-30%; z-index:-2; background:conic-gradient(from var(--a,0deg),var(--tang),var(--bub-core),var(--grape-core),var(--sky-core),var(--tang)); filter:blur(110px); opacity:.55; animation:s-rot 14s linear infinite; }
.auth .show::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(transparent 40%,var(--bg)); }
.auth .show h1 { margin:0 0 14px; font:400 clamp(48px,6vw,92px)/.9 var(--serif); letter-spacing:-.035em; }
.auth .show h1 em { color:var(--tang-2); }
.auth .show p { margin:0; max-width:460px; color:var(--soft); font-size:16px; }
.auth .tiles { position:absolute; top:48px; left:48px; right:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; opacity:.9; }
.auth .tiles div { aspect-ratio:1; border-radius:18px; overflow:hidden; border:1px solid rgb(255 255 255 / .1); }
.auth .form { display:grid; place-items:center; padding:32px 20px; }
.auth .form .card { width:min(420px,100%); padding:28px; display:grid; gap:16px; }
.auth .form h2 { margin:0; font:400 34px/1 var(--serif); }

/* ── Einstellungen / Admin ────────────────────────────────────────────────── */
.settings { display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; }
.settings > * { min-width:0; }
.snav { display:grid; align-content:start; gap:2px; position:sticky; top:calc(var(--top) + 20px); }
.snav a { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--soft); }
.snav a:hover, .snav a[aria-current="true"] { background:var(--panel); color:var(--ink); }
.tiles-4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.stat { padding:14px 16px; border-radius:16px; background:var(--panel); border:1px solid var(--line); }
.stat b { display:block; font:400 34px/1 var(--serif); margin-top:6px; } .stat small { color:var(--faint); font:600 10.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
table.t { width:100%; border-collapse:collapse; font-size:13px; }
table.t th { text-align:left; font:600 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:8px 10px; border-bottom:1px solid var(--line); }
table.t td { padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.keybox { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; border-radius:16px; border:1px solid var(--line-2); background:var(--panel-2); }
.keybox .lamp { width:12px; height:12px; border-radius:50%; background:var(--bad); box-shadow:0 0 12px var(--bad); flex:none; }
.keybox .lamp.on { background:var(--ok); box-shadow:0 0 12px var(--ok); }

/* Kleinkram */
.ic.rot90 { rotate:90deg; }

/* ── Schmal ───────────────────────────────────────────────────────────────── */
@media (max-width:1180px) {
  .create.with-versions { grid-template-columns:360px minmax(0,1fr); }
  .create .versions { display:none; }
  .create, .lib { grid-template-columns:360px minmax(0,1fr); }
}
@media (max-width:900px) {
  .s-top { grid-template-columns:auto 1fr auto; gap:8px; padding:0 10px; }
  .s-nav a { padding:0 10px; } .s-nav a span.lbl { display:none; }
  .create, .create.with-versions, .lib, .assist, .auth, .settings, .hero { grid-template-columns:minmax(0,1fr); height:auto; }
  .panel { border-right:0; border-bottom:1px solid var(--line); }
  .stage { min-height:70vh; } .frame-wrap { min-height:56vh; }
  .chats { display:none; } .auth .show { min-height:280px; padding:28px; } .auth .tiles { display:none; }
  .snav { position:static; grid-auto-flow:column; overflow-x:auto; }
  .wf-grid { grid-template-columns:minmax(0,1fr) !important; }
  .page { padding:20px 14px 100px; } .page-h h1 { font-size:34px; }
}
@media (max-width:560px) { .s-credits span.lbl, .hide-s { display:none; } .s-logo span { display:none; } }
/* Handy: Navigation als Tab-Leiste unten (wie Higgsfield mobil) */
@media (max-width:700px) {
  .s-top { grid-template-columns:auto 1fr; backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg); } /* sonst wird .s-top Bezugsrahmen für position:fixed */
  .s-right { justify-content:flex-end; }
  .s-nav { position:fixed; left:0; right:0; bottom:0; z-index:45; justify-content:space-around; gap:0; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    background:color-mix(in oklab,var(--bg) 88%,transparent); backdrop-filter:blur(18px) saturate(140%); border-top:1px solid var(--line); }
  .s-nav a { flex-direction:column; gap:3px; height:auto; padding:6px 4px; border-radius:12px; font-size:10.5px; min-width:0; flex:1; }
  .s-nav a span.lbl { display:block !important; }
  .s-nav a .new { display:none; }
  .s-nav a[aria-current="page"] { background:var(--panel-2); color:var(--ink); }
  main#view { padding-bottom:72px; }
  .dock { bottom:78px; }
  .sec-h > span.muted { display:none; }
  .sec-h > .row { width:100%; } .sec-h > .row .input { flex:1; width:auto !important; min-width:0; }
  .filters .input { width:100% !important; }
  .create .stage { order:-1; } /* Spiel zuerst, Einstellungen darunter */
  .settings .row.wrap > span.muted { width:auto !important; }
}
/* ── Templates ────────────────────────────────────────────────────────────── */
.tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.tcard { display:grid; grid-template-rows:auto 1fr; border-radius:var(--r3); overflow:hidden; background:var(--panel); border:1px solid var(--line); cursor:pointer;
  transition:transform .3s var(--spring-soft), border-color .2s; }
.tcard:hover, .tcard:focus-visible { transform:translateY(-3px); border-color:var(--line-2); }
.tcard .cover { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--panel-2); }
.tcard .cover .art-gen, .tcard .cover .art-gen svg { position:absolute; inset:0; width:100%; height:100%; }
.tcard .cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.tcard:hover .cover img { transform:scale(1.05); }
.tcard .cover .corner { position:absolute; top:10px; left:10px; display:flex; gap:6px; }
.tcard .cover .play { position:absolute; inset:0; display:grid; place-items:center; background:rgb(0 0 0 / .35); opacity:0; transition:opacity .2s; }
.tcard:hover .cover .play, .tcard:focus-visible .cover .play { opacity:1; }
.tcard .cover .play span { width:58px; height:58px; border-radius:50%; background:var(--ink); color:var(--bg); display:grid; place-items:center; }
.tcard .meta { padding:16px; display:grid; gap:10px; align-content:start; }
.tcard .meta b { font-size:17px; letter-spacing:-.01em; } .tcard .meta p { margin:-6px 0 0; color:var(--soft); font-size:13.5px; }
.tcard .feat { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:5px 10px; font-size:12.5px; color:var(--soft); }
.tcard .feat li { display:flex; align-items:center; gap:6px; min-width:0; } .tcard .feat .ic { width:13px; height:13px; color:var(--ok); }
.tcta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:34px; }

/* ── MCP & Plugins ────────────────────────────────────────────────────────── */
.mcp { width:min(1120px,100%); }
.mcp .page-h { align-items:center; margin-bottom:26px; }
.mcp-flow { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; margin:0; padding:0; list-style:none; color:var(--soft); font-size:13px; font-weight:550; }
.mcp-flow li { display:flex; align-items:center; gap:8px; white-space:nowrap; }
.mcp-flow li + li::before { content:"→"; color:var(--faint); font-weight:400; }
.mcp-flow .ic { width:15px; height:15px; color:var(--faint); }
.mcp-setup { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.mcp-pick { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:14px 32px; align-items:start; }
.mcp-col { display:grid; gap:10px; min-width:0; }
.mcp-step-h { display:flex; align-items:center; gap:10px; }
.mcp-step-h b { font-size:14px; font-weight:650; letter-spacing:-.01em; }
.mcp-step-h .hint { margin-left:auto; color:var(--faint); font-size:12.5px; }
.mcp-num { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--panel-3); color:var(--soft); font:600 10.5px/1 var(--mono); }
.brand { width:24px; height:24px; flex:none; }
.mcp-logo { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex:none; background:var(--panel-3); border:1px solid var(--line); color:var(--soft); }
.mcp-logo .ic { width:22px; height:22px; }
.mcp-engines { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.mcp-engine { display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px; border-radius:10px; border:1px solid var(--line-2); background:var(--panel);
  color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background .2s, border-color .2s; }
.mcp-engine:hover { background:var(--panel-2); }
.mcp-engine[aria-pressed="true"] { border-color:color-mix(in oklab,var(--tang) 70%,transparent); background:color-mix(in oklab,var(--tang) 9%,var(--panel)); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--tang) 40%,transparent); }
.mcp-engine .mcp-logo { width:32px; height:32px; border-radius:9px; } .mcp-engine .brand { width:18px; height:18px; }
.mcp-eng-t { display:grid; gap:2px; min-width:0; }
.mcp-eng-t b { font-size:14px; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcp-eng-t small { font:500 11px/1.2 var(--mono); color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcp-eng-t small::before { content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; vertical-align:1px; background:var(--ok); }
.mcp-eng-t small.preview::before { background:var(--warn); }
.mcp-eng-t small.soon::before { background:var(--faint); }
.mcp-agents { display:flex; flex-wrap:wrap; gap:6px; }
.mcp-blurb { margin:-2px 0 6px; max-width:860px; color:var(--soft); font-size:13.5px; line-height:1.55; }
.mcp-blurb .faint { white-space:nowrap; }
.mcp-promptbox { overflow:hidden; }
/* Noch nicht erschienenes Plugin: Hinweis über dem Prompt, Prompt nur zum Ansehen */
.mcp-soon { display:none; align-items:flex-start; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); color:var(--soft); font-size:13px; line-height:1.5; }
.mcp-soon .ic { width:16px; height:16px; flex:none; margin-top:2px; color:var(--faint); } .mcp-soon b { color:var(--ink); font-weight:600; }
.mcp-promptbox.soon .mcp-soon { display:flex; } .mcp-promptbox.soon .mcp-prompt { color:var(--soft); }
.mcp-file.soon > .mcp-logo { opacity:.7; }
/* Wortmarken (Minecraft) füllen die Kachel in der Breite statt im Quadrat */
.brand.wide, .mcp-engine .brand.wide, .mcp-th .brand.wide { height:auto; aspect-ratio:24 / 4.4; }
.mcp-logo:has(.brand.wide) { width:auto; padding:0 12px; justify-self:start; } .mcp-logo .brand.wide { width:92px; }
.mcp-engine .mcp-logo:has(.brand.wide) { padding:0 5px; } .mcp-engine .brand.wide { width:44px; }
.mcp-th .brand.wide { width:68px; margin-block:7px; }
.mcp-file.soon > .mcp-logo:has(.brand.wide) { opacity:1; }
.mcp-prompt { margin:0; padding:16px 20px; max-height:10em; overflow:hidden; font:400 12.5px/1.65 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); outline:0; background:var(--bg-2);
  -webkit-mask-image:linear-gradient(#000 45%,transparent); mask-image:linear-gradient(#000 45%,transparent); }
.mcp-promptbox.open .mcp-prompt { max-height:460px; overflow:auto; -webkit-mask-image:none; mask-image:none; }
.mcp-bar { display:flex; align-items:center; gap:14px; padding:8px 8px 8px 12px; border-top:1px solid var(--line); font-size:13px; }
.mcp-more { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 10px; border:0; border-radius:9px; background:none; color:var(--soft); font:inherit; font-weight:600; cursor:pointer; }
.mcp-more:hover { color:var(--ink); background:var(--panel-2); } .mcp-more .ic { width:15px; height:15px; }
.mcp-after { margin:0; color:var(--faint); font-size:12.5px; }
.mcp-manual { padding:0; border-top:1px solid var(--line); }
.mcp-manual summary, .mcp-faq summary { cursor:pointer; padding:16px 0; font-weight:600; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.mcp-manual summary { color:var(--soft); font-weight:550; }
.mcp-manual summary::after, .mcp-faq summary::after { content:"+"; color:var(--faint); font:400 20px/1 var(--mono); }
.mcp-manual[open] summary::after, .mcp-faq details[open] summary::after { content:"–"; }
.mcp-manual summary::-webkit-details-marker, .mcp-faq summary::-webkit-details-marker { display:none; }
.mcp-manual ol { margin:0 0 20px; padding-left:20px; max-width:760px; display:grid; gap:12px; color:var(--soft); }
.mcp-dl { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .mcp-dl small { font-weight:400; opacity:.6; font-size:12px; }
.mcp-code { margin:8px 0; padding:12px 14px; border-radius:12px; background:var(--bg-2); border:1px solid var(--line); font:400 12.5px/1.6 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); }
.mcp-cap { padding:6px 24px; overflow-x:auto; }
.mcp-cap table { min-width:560px; }
.mcp-cap th, .mcp-cap td { padding:12px 10px; text-align:center; } .mcp-cap th:first-child, .mcp-cap td:first-child { padding-left:0; text-align:left; }
.mcp-cap th:not(:first-child) { width:92px; }
.mcp-th { display:inline-grid; justify-items:center; gap:7px; } .mcp-th .brand { width:20px; height:20px; }
.mcp-cap td b { display:block; margin-bottom:2px; font:500 12.5px/1.4 var(--mono); color:var(--tang-2); } .mcp-cap td span { color:var(--soft); }
.mcp-cap .yes { display:inline-grid; color:var(--ok); } .mcp-cap .no { color:var(--faint); }
.mcp-cap p { margin:12px 0 14px; font-size:12.5px; }
.mcp-files { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
@media (max-width:1300px) { .mcp-files { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.mcp-file { display:grid; grid-template-rows:auto 1fr auto; gap:14px; padding:18px; }
.mcp-file b { display:block; font-size:14.5px; } .mcp-file .faint { margin-top:3px; font-size:12.5px; line-height:1.45; }
.mcp-file-f { display:grid; gap:10px; justify-items:start; }
.mcp-file .meta { font:400 11.5px var(--mono); color:var(--faint); overflow-wrap:anywhere; }
.mcp-file.wide { grid-column:1 / -1; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto; align-items:center; }
.mcp-file.wide .mcp-file-f { grid-auto-flow:column; align-items:center; gap:14px; }
.mcp-faq { display:grid; gap:8px; }
.mcp-faq details { padding:0 20px; }
.mcp-faq p { margin:0 0 16px; max-width:760px; }
.mcp-legal { margin:28px 0 0; color:var(--faint); font-size:12px; }
@media (max-width:1100px) { .mcp-pick { grid-template-columns:minmax(0,1fr); } }
@media (max-width:900px) { .mcp-engines, .mcp-files { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) {
  .s-nav a span.lbl[data-s] { font-size:0; } .s-nav a span.lbl[data-s]::after { content:attr(data-s); font-size:10.5px; }
  .mcp-cap, .mcp-faq details { padding-left:16px; padding-right:16px; } .mcp-step-h .hint { display:none; }
  .mcp-file.wide { grid-template-columns:auto minmax(0,1fr); } .mcp-file.wide .mcp-file-f { grid-column:1 / -1; }
  .mcp-prompt { padding:14px; }
  .tcard .feat { grid-template-columns:1fr; }
}
@media (max-width:520px) { .mcp-files { grid-template-columns:minmax(0,1fr); } }

@media (prefers-reduced-motion:reduce) { *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* Assets-Bibliothek */
.lib-step { display:grid; gap:10px; }
.lib-step .mcp-step-h { margin:0; }
.lib-up { margin-left:auto; display:inline-flex; align-items:center; gap:5px; border:0; background:none; padding:0; color:var(--soft); font-size:12.5px; font-weight:550; cursor:pointer; }
.lib-up:hover { color:var(--ink); } .lib-up .ic { width:14px; height:14px; }
.lib-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:4px 0 6px; }
.lib-head h1 { margin:0; font:650 24px/1.2 var(--sans); letter-spacing:-.02em; display:flex; align-items:center; gap:10px; }
.lib-head p { margin:4px 0 0; color:var(--soft); font-size:13.5px; }
.lib-count { font:600 12px/1 var(--mono); color:var(--soft); background:var(--panel-3); border-radius:999px; padding:5px 9px; }
.lib-search { display:flex; align-items:center; gap:8px; height:38px; width:240px; padding:0 12px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel); }
.lib-search:focus-within { border-color:color-mix(in oklab,var(--tang) 70%,transparent); box-shadow:0 0 0 3px color-mix(in oklab,var(--tang) 22%,transparent); }
.lib-search .ic { width:15px; height:15px; color:var(--faint); flex:none; }
.lib-search input { border:0; outline:0; background:none; flex:1; min-width:0; font:inherit; color:var(--ink); }
.lib-sort { height:38px; padding:0 10px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel); color:var(--ink); font:inherit; cursor:pointer; }
.lib-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); width:100%; overflow-x:auto; scrollbar-width:none; }
.lib-tabs button { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 12px; border:0; background:none; color:var(--soft); font-weight:550; cursor:pointer; white-space:nowrap; box-shadow:inset 0 -2px 0 transparent; }
.lib-tabs button:hover { color:var(--ink); }
.lib-tabs button[aria-selected="true"] { color:var(--ink); box-shadow:inset 0 -2px 0 var(--tang); }
.lib-tabs button[data-empty="true"] { opacity:.45; }
.lib-tabs .n { font:600 11px/1 var(--mono); color:var(--faint); }
.lib-main .filters { padding:6px 0 0; margin-bottom:18px; }
.lib-main .agrid { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.lib-main .acard { border-radius:14px; background:none; border:0; overflow:visible; }
.lib-main .acard .pv { border-radius:14px; overflow:hidden; border:1px solid var(--line); transition:border-color .2s, box-shadow .2s; }
.lib-main .acard:hover { transform:none; }
.lib-main .acard:hover .pv { border-color:var(--line-2); box-shadow:var(--shadow); }
.lib-main .acard .nm { padding:9px 2px 0; display:grid; gap:3px; }
.lib-main .acard .nm small { display:flex; align-items:center; gap:5px; color:var(--faint); font-size:12px; }
.lib-main .acard .nm small .ic { width:13px; height:13px; }
.acard .acts { position:absolute; top:8px; right:8px; display:flex; gap:6px; opacity:0; transition:opacity .15s; }
.acard:hover .acts, .acard:focus-within .acts, .acard .acts:has([aria-pressed="true"]) { opacity:1; }
.acard .acts > * { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:9px; background:rgb(20 20 26 / .62); color:#fff; backdrop-filter:blur(6px); cursor:pointer; }
.acard .acts > * .ic { width:15px; height:15px; }
.acard:not(:hover) .acts > :not([aria-pressed="true"]) { visibility:hidden; }
.acard .acts [aria-pressed="true"] { color:var(--bub-body); } .acard .acts [aria-pressed="true"] .ic { fill:currentColor; }
.lib-main.drop { outline:2px dashed color-mix(in oklab,var(--tang) 70%,transparent); outline-offset:-10px; border-radius:var(--r3); background:color-mix(in oklab,var(--tang) 5%,transparent); }
.lib-empty { border:1.5px dashed var(--line-2); border-radius:var(--r3); }
@media (max-width:720px) { .lib-search { width:100%; } .lib-head > .row { width:100%; } }

/* ══ Redesign 2026-10 (ui-ux-pro-max) ══════════════════════════════════════════
   Schrift: Bricolage Grotesque (Überschriften, Marke), Manrope (Bedienung), JetBrains Mono (Etiketten).
   Karten im „Cartridge“-Stil: Bild im Rahmen wie ein Bildschirm, Nummer in Mono, harter Tang-Schatten und
   3D-Neigung beim Überfahren. Bewegung nur über transform/opacity, alles aus bei prefers-reduced-motion. */
:root {
  --serif:"Bricolage Grotesque",system-ui,sans-serif; --sans:"Manrope",system-ui,sans-serif; --ui:"Manrope",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --out:cubic-bezier(.16,1,.3,1); --snap:cubic-bezier(.34,1.56,.64,1);
  --spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.099 24.3%,1.108 26%,1.1 27.9%,1.049 33.6%,1.003 40.7%,.988 46%,.995 59%,1);
}
body { font-family:var(--sans); letter-spacing:-.011em; font-feature-settings:"ss01"; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
:focus-visible { outline:2px solid var(--tang-2); outline-offset:2px; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible, .prompt-box textarea:focus-visible, .compose textarea:focus-visible { outline:0; }
:root[data-theme="light"] .tag.tang { color:#B9420A; }

/* Überschriften: kräftig, eng, Akzent ohne Kursiv */
.page-h h1, .banner h2, .start h1, .auth .show h1, .auth .form h2, .empty h3, .stat b { font-family:var(--serif); font-weight:700; letter-spacing:-.045em; font-variation-settings:"wdth" 92; }
.page-h h1 em, .banner h2 em, .start h1 em, .auth .show h1 em { font-style:normal; color:var(--tang-2); }
:root[data-theme="light"] :is(.page-h h1, .start h1, .auth .show h1) em { color:var(--tang); }
.sec-h h2 { font:700 22px/1.1 var(--serif); letter-spacing:-.035em; }
.s-logo { font:800 23px/1 var(--serif); font-style:normal; letter-spacing:-.05em; }

/* ── Kopfleiste oben, mit gleitender Markierung ───────────────────────────── */
.s-group, .s-more { display:none; }
.s-top { height:64px; --top:64px; padding:0 20px; }
:root { --top:64px; }
.s-nav { position:relative; padding:4px; border-radius:16px; background:color-mix(in oklab,var(--panel) 70%,transparent); border:1px solid var(--line); justify-self:center; max-width:100%; }
.s-nav a { position:relative; z-index:1; height:38px; padding:0 14px; border-radius:12px; font-weight:600; font-size:13.5px; transition:color .3s var(--out); }
.s-nav a:hover { background:none; color:var(--ink); }
.s-nav a[aria-current="page"] { background:none; color:var(--ink); }
.s-nav a[aria-current="page"] .ic { color:var(--tang-2); }
.s-nav a .ic { transition:transform .5s var(--spring); }
.s-nav a:hover .ic { transform:translateY(-1px) rotate(-8deg) scale(1.12); }
.s-ind { position:absolute; z-index:0; left:0; top:4px; height:38px; width:var(--w,0); transform:translateX(var(--x,0)); border-radius:12px; pointer-events:none;
  background:var(--panel-3); box-shadow:inset 0 1px 0 rgb(255 255 255 / .07), 0 6px 16px -8px rgb(0 0 0 / .6);
  transition:transform .55s var(--spring), width .55s var(--spring), opacity .2s; }
.s-ind::after { content:""; position:absolute; left:50%; bottom:-1px; width:18px; height:2px; margin-left:-9px; border-radius:2px; background:var(--tang); box-shadow:0 0 12px var(--tang); }
.s-ind[hidden] { opacity:0; }
@media (max-width:700px) {
  .s-ind { display:none; }
  .s-nav { padding:6px 4px calc(6px + env(safe-area-inset-bottom)); border:0; border-top:1px solid var(--line); border-radius:0; }
  .s-nav a[data-more] { display:none; }
  .s-nav a[href="#/explore"] { order:-1; }
  .s-more { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; min-width:0; padding:6px 4px; border:0; border-radius:12px; background:none; color:var(--soft); font-size:10.5px; font-weight:600; cursor:pointer; }
  .s-more[aria-current="page"], .s-nav a[aria-current="page"] { background:var(--panel-2); color:var(--ink); }
  .s-nav a, .s-more { min-height:52px; justify-content:center; }
}

/* ── Seiten-Layout ────────────────────────────────────────────────────────── */
.page { width:min(1360px,100%); padding:40px clamp(16px,3.4vw,48px) 140px; }
.page-h { margin:0 0 36px; padding-bottom:28px; border-bottom:1px solid var(--line); align-items:end; gap:24px; }
.page-h h1 { font-size:clamp(40px,5.2vw,76px); line-height:.92; }
.page-h p { font-size:15.5px; margin-top:12px; }
.sec-h { margin:56px 0 18px; }
.ggrid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.tgrid { grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
.kgrid { grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.apps { grid-auto-columns:minmax(230px,1fr); gap:16px; padding:4px 4px 18px; margin:0 -4px; }
.settings { gap:40px; }
.create .panel, .lib .panel { padding:22px 20px 28px; }

/* ── Cartridge-Karten ─────────────────────────────────────────────────────── */
.ggrid, .tgrid { counter-reset:cart; }
.gcard, .tcard { --rx:0deg; --ry:0deg; --lift:0px; counter-increment:cart; padding:8px; border-radius:10px; background:var(--panel); border:1px solid var(--line-2); overflow:visible;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)); transform-style:preserve-3d;
  box-shadow:0 0 0 0 var(--tang); transition:transform .6s var(--spring), box-shadow .45s var(--out), border-color .3s; }
.gcard .cover, .tcard .cover { border-radius:5px; box-shadow:inset 0 0 0 1px rgb(255 255 255 / .06); }
.gcard .cover::after, .tcard .cover::after { content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; opacity:0; transition:opacity .4s;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgb(255 255 255 / .55),transparent 60%); }
.gcard .meta, .tcard .meta { padding:14px 6px 6px; }
.gcard .meta::before, .tcard .meta::before { content:"№ " counter(cart,decimal-leading-zero); font:600 10.5px/1 var(--mono); letter-spacing:.08em; color:var(--faint); }
.gcard .meta b, .tcard .meta b { font:700 18px/1.15 var(--serif); letter-spacing:-.03em; }
.gcard:hover, .tcard:hover, .gcard:focus-visible, .tcard:focus-visible { --lift:-6px; border-color:color-mix(in oklab,var(--tang) 55%,transparent); box-shadow:8px 8px 0 -1px var(--tang); }
.gcard:hover .cover::after, .tcard:hover .cover::after { opacity:1; }
.gcard .cover img, .tcard .cover img { transition:transform .9s var(--out), filter .5s; }
.gcard:hover .cover img, .tcard:hover .cover img { transform:scale(1.07); }
.gcard .cover .play, .tcard .cover .play { background:linear-gradient(transparent 40%,rgb(0 0 0 / .55)); place-items:end start; padding:12px; }
.gcard .cover .play span, .tcard .cover .play span { width:46px; height:46px; background:var(--tang); color:#1a0a02; transform:scale(.6) rotate(-20deg); transition:transform .55s var(--spring); }
.gcard:hover .cover .play span, .tcard:hover .cover .play span { transform:none; }

/* Genre-Poster: Vollbild, große Schrift, Rahmen erst beim Überfahren */
.appcard { --rx:0deg; --ry:0deg; --lift:0px; aspect-ratio:3/4.2; border-radius:10px; padding:16px; border:1px solid var(--line-2);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift)); transition:transform .6s var(--spring), box-shadow .45s var(--out), border-color .3s; }
.appcard b { font:700 22px/1.05 var(--serif); letter-spacing:-.035em; }
.appcard:hover, .appcard:focus-visible { --lift:-6px; border-color:color-mix(in oklab,var(--tang) 60%,transparent); box-shadow:8px 8px 0 -1px var(--tang); }
.appcard .go { background:var(--tang); color:#1a0a02; transform:scale(.5) rotate(-45deg); transition:opacity .25s, transform .55s var(--spring); }
.appcard:hover .go { transform:none; }

/* Skill-, Engine- und Banner-Karten: gleiche Sprache, ohne Bild */
.kcard { border-radius:10px; border-color:var(--line-2); transition:transform .6s var(--spring), box-shadow .45s var(--out), border-color .3s, background .3s; }
.kcard:hover { transform:translate(-3px,-3px); box-shadow:6px 6px 0 -1px var(--tang); border-color:color-mix(in oklab,var(--tang) 55%,transparent); }
.kcard .orb { transition:transform .6s var(--spring); } .kcard:hover .orb { transform:rotate(-10deg) scale(1.1); }
.banner { border-radius:12px; transition:transform .6s var(--spring), box-shadow .45s var(--out); }
.banner .art { transition:transform 1.2s var(--out); }
.banner:hover { transform:translate(-3px,-3px); box-shadow:8px 8px 0 -1px var(--tang); }
.banner:hover .art { transform:scale(1.06); }
.acard .pv { border-radius:8px; }
.lib-main .acard .pv { transition:transform .5s var(--spring), border-color .2s, box-shadow .3s; }
.lib-main .acard:hover .pv { transform:translate(-2px,-2px); box-shadow:5px 5px 0 -1px var(--tang); border-color:color-mix(in oklab,var(--tang) 55%,transparent); }
.card { border-radius:12px; }

/* Knöpfe: Federn beim Drücken */
.btn { transition:background .2s, border-color .2s, transform .45s var(--spring), box-shadow .3s; font-weight:650; }
.btn:active:not(:disabled) { transform:scale(.94); transition-duration:.08s; }
.btn-primary:hover { transform:translateY(-1px); }
.chip { transition:background .2s, border-color .2s, transform .45s var(--spring); }
.chip:active { transform:scale(.93); }

/* ── Startfeld auf Entdecken ──────────────────────────────────────────────── */
.start { position:relative; isolation:isolate; display:grid; justify-items:center; text-align:center; gap:16px; padding:56px 0 48px; }
.start::before { content:""; position:absolute; inset:-60px -10% auto; height:460px; z-index:-1; pointer-events:none; opacity:.9;
  background:radial-gradient(40% 55% at 35% 35%,color-mix(in oklab,var(--tang) 26%,transparent),transparent 70%),radial-gradient(35% 50% at 70% 25%,color-mix(in oklab,var(--grape-core,#8b5cf6) 18%,transparent),transparent 70%);
  animation:s-drift 14s ease-in-out infinite alternate; }
@keyframes s-drift { to { transform:translate3d(3%,4%,0) scale(1.08); } }
.start h1 { margin:6px 0 0; font-size:clamp(48px,7vw,104px); line-height:.9; text-wrap:balance; }
.start > p { margin:0; max-width:520px; font-size:16.5px; }
.compose { width:min(780px,100%); margin-top:14px; text-align:left; border:1px solid var(--line-2); border-radius:14px; background:var(--panel); box-shadow:10px 10px 0 -2px color-mix(in oklab,var(--tang) 0%,transparent), var(--shadow);
  transition:border-color .3s, box-shadow .5s var(--out), transform .6s var(--spring); }
.compose:focus-within { border-color:var(--tang); box-shadow:10px 10px 0 -2px var(--tang), var(--shadow); transform:translate(-3px,-3px); }
.compose textarea { display:block; width:100%; min-height:96px; padding:20px 22px 6px; border:0; background:none; resize:none; outline:0; font-size:17px; line-height:1.55; }
.compose textarea::placeholder { color:var(--faint); }
.compose-bar { display:flex; align-items:center; gap:12px; padding:8px 8px 8px 22px; }
.compose-hint { flex:1; font-size:12.5px; }
.compose .btn-primary { height:48px; padding:0 22px; border-radius:10px; }
.ideas { justify-content:center; align-items:center; max-width:780px; }
.hero.duo { grid-template-columns:1fr 1fr; margin-top:8px; gap:20px; }
.hero.duo .banner.small { min-height:230px; }
.hero.duo .banner .btn { margin-top:14px; }

/* ── Bewegung: Seitenwechsel und gestaffeltes Einblenden ──────────────────── */
/* Nur opacity/transform: läuft auf dem Compositor. Kein filter:blur auf der ganzen Seite – der kostete beim Wechsel die Frames. */
@keyframes s-page { from { opacity:0; transform:translateY(8px); } }
@keyframes s-card { from { opacity:0; transform:translateY(12px); } }
main#view > .enter { animation:s-page .32s var(--out) backwards; }
.rv { opacity:0; }
.rv.in { opacity:1; animation:s-card .42s var(--out) backwards; animation-delay:calc(var(--i,0) * 35ms); }

/* Touch: kleine Knöpfe und Chips auf 44 px, keine Neigung */
@media (pointer:coarse) {
  .btn, .input, .select { min-height:44px; }
  .btn-sm { height:auto; min-height:44px; } .btn-sm.btn-icon, .btn-icon { min-width:44px; }
  .chip { height:auto; min-height:44px; } .seg button { min-height:40px; }
  .acard .acts > * { width:40px; height:40px; }
}
@media (max-width:700px) {
  .page { padding-top:24px; }
  .page-h { margin-bottom:24px; padding-bottom:20px; }
  .start { padding:28px 0 32px; }
  .compose-hint { display:none; }
  .compose .btn-primary { flex:1; }
  .hero.duo { grid-template-columns:minmax(0,1fr); }
  .tgrid { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  .rv { opacity:1; } .rv.in, main#view > .enter, .start::before { animation:none; }
  .gcard, .tcard, .appcard { transform:none !important; }
}

/* ── Skills als Liste ─────────────────────────────────────────────────────── */
.klabel { display:flex; align-items:baseline; gap:10px; margin:8px 0 10px; font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--soft); }
.klabel + .klist { margin-bottom:44px; }
.klist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:40px; border-top:1px solid var(--line); }
.krow { display:grid; grid-template-columns:28px auto minmax(0,1fr) auto 16px; align-items:center; gap:16px; padding:16px 4px; border:0; border-bottom:1px solid var(--line);
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background .2s; }
.krow:hover, .krow:focus-visible { background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--panel-2) 80%,transparent) 30%,transparent); }
.krow .kn { font:500 11.5px/1 var(--mono); color:var(--faint); }
.krow .orb { width:36px; height:36px; border-radius:11px; transition:transform .45s var(--spring); }
.krow .orb .ic.glyph { width:22px; height:22px; } .krow .orb .ic { width:18px; height:18px; }
.krow:hover .orb { transform:rotate(-8deg); }
.krow .kt { display:grid; gap:3px; min-width:0; }
.krow .kt b { font:700 16px/1.2 var(--serif); letter-spacing:-.02em; }
.krow .kt span { color:var(--soft); font-size:13px; line-height:1.45; }
.krow .ke { font:500 11px/1 var(--mono); color:var(--faint); letter-spacing:.06em; }
.krow .ka { color:var(--faint); display:grid; transition:transform .3s var(--out), color .2s; }
.krow .ka .ic { width:16px; height:16px; }
.krow:hover .ka { transform:translateX(3px); color:var(--tang-2); }
@media (max-width:900px) { .klist { grid-template-columns:minmax(0,1fr); } }
@media (max-width:520px) { .krow { grid-template-columns:auto minmax(0,1fr) 16px; gap:12px; } .krow .kn, .krow .ke { display:none; } }

/* ── Erstellen: Feinschliff einklappbar, Startseite wie die Bibliothek ────── */
.ftune { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.ftune summary { display:flex; align-items:center; gap:10px; padding:14px 0; cursor:pointer; list-style:none; }
.ftune summary::-webkit-details-marker { display:none; }
.ftune summary > .ic { margin-left:auto; width:16px; height:16px; color:var(--faint); transition:transform .3s var(--out); }
.ftune[open] summary > .ic { transform:rotate(180deg); }
.ftune summary:hover > .ic { color:var(--ink); }
.ft-t { display:grid; gap:3px; min-width:0; }
.ft-t b { font-size:15px; font-weight:650; letter-spacing:-.01em; }
.ft-sum { font:500 11.5px/1.3 var(--mono); color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ftune[open] .ft-sum { display:none; }
.ft-body { display:grid; gap:16px; padding:2px 0 18px; }
.stage > .create-home { grid-row:1 / -1; }
.create-home .lib-head { padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.ch-empty { display:grid; gap:4px; margin:0 0 16px; }
.ch-empty b { font:700 22px/1.15 var(--serif); letter-spacing:-.03em; }
.ch-empty span { color:var(--soft); font-size:14px; }
.ch-tpls { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; counter-reset:cart; }
.tcard.mini .meta { padding:12px 6px 6px; gap:6px; }
.tcard.mini .meta b { font-size:16px; }
.tcard.mini .meta p { margin:0; font-size:13px; }
.tcard.mini .meta .row { margin-top:6px; }
.tcard.mini .meta::before { display:none; }
.tcard .meta p.feat-line { margin:0; font:500 11.5px/1.5 var(--mono); color:var(--faint); }
.ch-drop { display:grid; justify-items:center; gap:6px; padding:64px 20px; text-align:center; color:var(--soft); }
.ch-drop > .ic { width:22px; height:22px; color:var(--faint); margin-bottom:6px; }
.ch-drop b { font:700 22px/1.15 var(--serif); letter-spacing:-.03em; color:var(--ink); }
.ch-drop span { max-width:420px; font-size:14px; }

/* ══ Toybox 2026-10-01 ══════════════════════════════════════════════════════════
   Weg vom KI-Template: kein Schwarz mit Leuchtnebel, keine Lime-Etiketten in Mono, keine Orange-Wort-Formel.
   Stattdessen: warme Tinte als Bühne, jeder Bereich mit eigener Jelly-Farbe, Knöpfe wie Tasten (Lippe unten),
   Aufkleber statt Pillen, Farbe sitzt in Objekten (Kacheln, Karten, Cover), nie im Hintergrund. */
:root[data-theme="dark"] {
  --bg:#111015; --bg-2:#16151b; --panel:#1b1a21; --panel-2:#222029; --panel-3:#2b2933; --panel-4:#36333f;
  --line:rgb(236 228 255 / .07); --line-2:rgb(236 228 255 / .12); --ink:#f6f3fb; --soft:#aeaabb; --faint:#8b879a;
}
:root { --butter-core:#E9A400; --butter-body:#FFD84D; --butter-rim:#FFF3C4; --ink-dark:#1b1206;
  --lip:color-mix(in oklab,var(--hue-core) 55%,#000); }
.hue-butter { --hue-core:var(--butter-core); --hue-body:var(--butter-body); --hue-rim:var(--butter-rim); }
:root[data-sec="create"] { --acc:var(--tang-core); --acc-2:var(--tang-body); }
:root[data-sec="templates"] { --acc:var(--bub-core); --acc-2:var(--bub-body); }
:root[data-sec="assets"], :root[data-sec="assist"], :root[data-sec="unity"] { --acc:var(--sky-core); --acc-2:var(--sky-body); }
:root[data-sec="explore"], :root[data-sec="settings"], :root[data-sec="admin"] { --acc:var(--grape-core); --acc-2:var(--grape-body); }
:root[data-sec="skills"], :root[data-sec="mcp"], :root[data-sec="minecraft"] { --acc:var(--lime-core); --acc-2:var(--lime-body); }
:root[data-sec="workflows"] { --acc:var(--butter-core); --acc-2:var(--butter-body); }

/* Marke: Punkt wird zur kleinen Spielfigur-Kachel */
.s-logo .dot { border-radius:8px; background:var(--tang); box-shadow:inset 0 -3px 0 rgb(0 0 0 / .22), inset 0 2px 0 rgb(255 255 255 / .35); }
.s-logo b { color:inherit; }

/* Kopfleiste: Symbole in Bereichsfarbe, Markierung tönt sich ein, „NEW“ wird zum Punkt */
.s-nav { background:transparent; border-color:transparent; }
.s-nav a .ic { color:var(--hue-body); opacity:.9; }
.s-nav a[aria-current="page"] .ic { color:var(--hue-body); opacity:1; }
.s-nav a .new { position:absolute; top:7px; left:27px; width:7px; height:7px; padding:0; border-radius:50%; background:var(--hue-body); box-shadow:0 0 0 2px var(--bg); }
.s-ind { background:color-mix(in oklab,var(--acc,var(--tang)) 16%,var(--panel-2)); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--acc,var(--tang)) 28%,transparent); }
.s-ind::after { display:none; }
.s-credits { background:transparent; }
.s-credits .ic { color:var(--butter-body); }

/* Knöpfe wie Tasten: volle Farbe, dunklere Lippe unten, beim Drücken sinkt die Taste */
.btn { box-shadow:0 2px 0 rgb(0 0 0 / .35); border-color:var(--line-2); }
.btn-ghost { box-shadow:none; border-color:transparent; }
.btn:hover:not(:disabled) { transform:translateY(-1px); }
.btn:active:not(:disabled) { transform:translateY(1px) scale(.98); box-shadow:0 1px 0 rgb(0 0 0 / .35); }
.btn-primary, .btn-primary:hover { --hue-core:var(--tang-core); background:var(--tang); color:var(--ink-dark); filter:none;
  box-shadow:inset 0 1.5px 0 rgb(255 255 255 / .35), 0 4px 0 #A9430B, 0 10px 22px -10px rgb(242 107 29 / .55); }
.btn-primary:hover:not(:disabled) { background:#FF7A2B; transform:translateY(-1px); box-shadow:inset 0 1.5px 0 rgb(255 255 255 / .35), 0 5px 0 #A9430B, 0 14px 26px -12px rgb(242 107 29 / .6); }
.btn-primary:active:not(:disabled) { transform:translateY(3px); box-shadow:inset 0 1.5px 0 rgb(255 255 255 / .3), 0 1px 0 #A9430B; }
.btn-primary .cost { background:rgb(60 20 0 / .18); }
.btn-primary .cost .ic { color:var(--ink-dark); }
.btn-white { box-shadow:0 3px 0 #9d98ad; }
.btn-white:active:not(:disabled) { box-shadow:0 1px 0 #9d98ad; }
:root[data-theme="light"] .btn-white { box-shadow:0 3px 0 #000; }

/* Aufkleber statt Lime-Pillen: Sans, schräg, Farbe der Umgebung */
.sticker, .tag.volt { display:inline-flex; align-items:center; height:auto; padding:4px 9px 5px; border-radius:8px; font:800 11.5px/1 var(--serif); letter-spacing:-.01em; text-transform:none;
  background:var(--hue-body,var(--butter-body)); color:var(--ink-dark); rotate:-3deg; box-shadow:0 2px 0 color-mix(in oklab,var(--hue-core) 60%,#000); white-space:nowrap; }
.tag.volt { --hue-body:var(--butter-body); --hue-core:var(--butter-core); rotate:0deg; padding:3px 7px 4px; font-size:11px; }
.banner .sticker { align-self:flex-start; }
.appcard .sticker.badge { position:absolute; top:12px; left:12px; }
.label, .klabel { font:650 12.5px/1 var(--sans); letter-spacing:-.005em; text-transform:none; color:var(--soft); }

/* Seitenkopf: Kachel + Titel, ohne Farbwort */
.ph { border-bottom:0; padding-bottom:0; margin-bottom:40px; }
.ph-row { display:flex; align-items:center; gap:16px; }
.ph-tile { width:56px; height:56px; border-radius:17px; display:grid; place-items:center; flex:none; color:#fff; rotate:-4deg;
  background:radial-gradient(90% 80% at 30% 20%,var(--hue-body),var(--hue-core) 70%);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -4px 0 rgb(0 0 0 / .18), 0 12px 24px -12px var(--hue-core); transition:rotate .6s var(--spring), scale .6s var(--spring); }
.ph-tile .ic { width:28px; height:28px; stroke-width:2.2; }
.ph:hover .ph-tile { rotate:6deg; scale:1.06; }
.page-h.ph h1 { font-size:clamp(38px,4.4vw,60px); line-height:1; letter-spacing:-.04em; }
.page-h.ph p { max-width:620px; font-size:16px; line-height:1.55; margin-top:14px; }
.page-h.ph .ph-main > a.muted { display:inline-block; margin-bottom:14px; }

/* Schritte: Nummer in der Bereichsfarbe */
.mcp-num { background:color-mix(in oklab,var(--acc,var(--tang)) 22%,var(--panel-2)); color:var(--acc-2,var(--tang-2)); font:800 11px/1 var(--sans); }

/* Entdecken: Startfeld links, Kartenfächer rechts */
.start { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); justify-items:stretch; text-align:left; align-items:center; gap:40px; padding:64px 0 56px; }
.start::before { display:none; }
.start-copy { display:grid; gap:18px; min-width:0; }
.start h1 { font-size:clamp(52px,6.6vw,104px); line-height:.92; letter-spacing:-.05em; margin:0; }
.start h1 .hl { color:var(--tang); }
.start-copy > p { margin:0; max-width:520px; font-size:17px; line-height:1.55; }
.start .compose { width:100%; margin-top:6px; }
.ideas { justify-content:flex-start; max-width:none; }
.chip.idea .dot { width:8px; height:8px; border-radius:50%; background:var(--hue-body); box-shadow:0 0 0 3px color-mix(in oklab,var(--hue-core) 25%,transparent); }
.chip.idea:hover { border-color:color-mix(in oklab,var(--hue-core) 55%,transparent); background:color-mix(in oklab,var(--hue-core) 12%,var(--panel-2)); }
.fan { display:grid; grid-template-columns:repeat(2,minmax(0,200px)); justify-content:center; gap:22px 26px; padding:10px 0; }
.fan-card { --r:-5deg; --y:0px; position:relative; aspect-ratio:4/5; padding:7px 7px 38px; border:0; border-radius:18px; cursor:pointer;
  background:var(--hue-body); box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), 0 5px 0 color-mix(in oklab,var(--hue-core) 60%,#000), 0 26px 40px -22px rgb(0 0 0 / .8);
  transform:translateY(var(--y)) rotate(var(--r)); transition:transform .6s var(--spring), box-shadow .4s var(--out); animation:s-deal .8s var(--spring) backwards; animation-delay:calc(var(--i) * 80ms + .12s); }
.fan-card:nth-child(2) { --r:4deg; --y:34px; } .fan-card:nth-child(3) { --r:3deg; --y:-8px; } .fan-card:nth-child(4) { --r:-4deg; --y:26px; }
.fan-card img { width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; }
.fan-card span { position:absolute; left:13px; right:10px; bottom:11px; font:800 15px/1.1 var(--serif); letter-spacing:-.02em; color:var(--ink-dark); text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fan-card:hover { transform:translateY(calc(var(--y) - 10px)) rotate(0deg) scale(1.04); }
@keyframes s-deal { from { opacity:0; transform:translateY(50px) rotate(0deg) scale(.92); } }
@media (max-width:1100px) { .start { grid-template-columns:minmax(0,1fr); } .fan { display:none; } }

/* Banner: Farbe des Banners statt immer Tang */
.banner:hover, .appcard:hover, .appcard:focus-visible { box-shadow:8px 8px 0 -1px var(--hue-core); border-color:color-mix(in oklab,var(--hue-core) 60%,transparent); }
.appcard .go { background:var(--hue-body); }
.sec-h h2 { font-size:26px; }

/* Cartridge-Karten ohne „№ 01“ */
.gcard .meta::before, .tcard .meta::before { display:none; }
.tcard .meta p.feat-line { font:500 12.5px/1.5 var(--sans); }

/* Leerer Zustand: Kachel statt Leucht-Blob */
.empty .blob { border-radius:24px; rotate:-5deg; background:radial-gradient(90% 80% at 30% 20%,var(--tang-body),var(--tang) 70%); box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -5px 0 rgb(0 0 0 / .18), 0 18px 30px -16px var(--tang); }
.empty h3 { font-size:28px; }

@media (prefers-reduced-motion:reduce) { .fan-card, .start h1 .hl::after { animation:none; } }

/* Skills-Liste: keine laufenden Nummern */
.krow { grid-template-columns:auto minmax(0,1fr) auto 16px; } .krow .kn { display:none; }

/* Vorlagen als bunte Spielmodule: Rahmen in der Genre-Farbe, dunkle Schrift, Tasten-Lippe */
.tcard.cart { background:var(--hue-body); border:0; padding:8px; border-radius:18px; color:var(--ink-dark);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), 0 5px 0 color-mix(in oklab,var(--hue-core) 62%,#000); }
.tcard.cart .cover { border-radius:12px; box-shadow:inset 0 0 0 2px rgb(0 0 0 / .12); }
.tcard.cart .meta { padding:14px 8px 6px; }
.tcard.cart .meta b { color:var(--ink-dark); }
.tcard.cart .meta p { color:rgb(27 18 6 / .72); }
.tcard.cart .meta p.feat-line { color:rgb(27 18 6 / .55); }
.tcard.cart .btn-white { background:var(--ink-dark); color:#fff; border-color:transparent; box-shadow:0 3px 0 rgb(0 0 0 / .45); }
.tcard.cart .btn-ghost { color:var(--ink-dark); }
.tcard.cart .btn-ghost:hover { background:rgb(0 0 0 / .08); }
.tcard.cart:hover, .tcard.cart:focus-visible { --lift:-6px; border-color:transparent;
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), 0 9px 0 color-mix(in oklab,var(--hue-core) 62%,#000), 0 26px 40px -20px rgb(0 0 0 / .7); }
.tcard.cart .tag.volt { background:#fff; box-shadow:0 2px 0 rgb(0 0 0 / .25); }
.tcard.cart .cover .play span { background:var(--ink-dark); color:#fff; }

/* Workflows als Rezept-Liste: Kachel, Name, Satz, Perlenkette der Rollen */
.wlist { display:grid; border-top:1px solid var(--line); margin-bottom:44px; }
.wrow { display:grid; grid-template-columns:auto minmax(220px,1fr) auto 16px; align-items:center; gap:18px; padding:18px 6px; border:0; border-bottom:1px solid var(--line);
  background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; transition:background .25s; }
.wrow:hover, .wrow:focus-visible { background:linear-gradient(90deg,color-mix(in oklab,var(--hue-core) 9%,transparent),transparent 70%); }
.wrow .orb { width:44px; height:44px; border-radius:14px; background:radial-gradient(90% 80% at 30% 20%,var(--hue-body),var(--hue-core) 70%);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -3px 0 rgb(0 0 0 / .18); rotate:-4deg; transition:rotate .5s var(--spring), scale .5s var(--spring); }
.wrow:hover .orb { rotate:6deg; scale:1.08; }
.wt { display:grid; gap:4px; min-width:0; }
.wt b { font:700 18px/1.2 var(--serif); letter-spacing:-.025em; display:flex; align-items:center; gap:10px; }
.wt span { color:var(--soft); font-size:13.5px; line-height:1.45; max-width:440px; }
.wrow .ka { color:var(--faint); display:grid; transition:transform .3s var(--out), color .2s; } .wrow .ka .ic { width:16px; height:16px; }
.wrow:hover .ka { transform:translateX(3px); color:var(--hue-body); }
.node { background:color-mix(in oklab,var(--hue-core) 14%,var(--panel)); border-color:color-mix(in oklab,var(--hue-core) 32%,transparent); }
.node .ic { color:var(--hue-body); }
.link { width:14px; background:var(--line-2); }
.wrow .chain { justify-content:flex-end; }
.klabel .faint { font-weight:500; }
@media (max-width:1000px) { .wrow { grid-template-columns:auto minmax(0,1fr) 16px; } .wrow .chain { grid-column:2 / -1; grid-row:2; justify-content:flex-start; } }

/* Asset-Arten: Symbol immer farbig, gewählte Art wird zur vollen Kachel */
.kind { border-radius:16px; transition:background .2s, border-color .2s, transform .45s var(--spring), box-shadow .3s; }
.kind .ic { color:var(--hue-body); transition:transform .5s var(--spring); }
.kind:hover .ic { transform:rotate(-8deg) scale(1.12); }
.kind[aria-pressed="true"] { background:var(--hue-body); border-color:transparent; color:var(--ink-dark);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), 0 4px 0 color-mix(in oklab,var(--hue-core) 60%,#000); transform:translateY(-2px); }
.kind[aria-pressed="true"] .ic { color:var(--ink-dark); }
.kind:active { transform:translateY(1px); }

/* Gewählte Chips in der Bereichsfarbe */
.chip[aria-pressed="true"] { background:color-mix(in oklab,var(--acc,var(--tang)) 20%,var(--panel-2)); border-color:color-mix(in oklab,var(--acc,var(--tang)) 60%,transparent); }
.seg button[aria-selected="true"] { background:var(--panel-4); }

/* Leerer Zustand in der Bereichsfarbe */
.empty .blob { background:radial-gradient(90% 80% at 30% 20%,var(--acc-2,var(--tang-body)),var(--acc,var(--tang)) 70%); box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -5px 0 rgb(0 0 0 / .18), 0 18px 30px -16px var(--acc,var(--tang)); animation:none; transition:rotate .6s var(--spring); }
.empty:hover .blob { rotate:5deg; }

/* Handy: Tab-Leiste wirklich unten (die Leisten-Regel weiter oben hatte position:fixed überschrieben) */
@media (max-width:700px) {
  .s-nav { position:fixed; left:0; right:0; bottom:0; top:auto; z-index:45; justify-self:stretch; border-radius:0;
    background:color-mix(in oklab,var(--bg) 92%,transparent); backdrop-filter:blur(18px) saturate(140%); border:0; border-top:1px solid var(--line); }
  .s-nav a[aria-current="page"] { background:color-mix(in oklab,var(--acc,var(--tang)) 16%,var(--panel-2)); }
  .s-top { grid-template-columns:1fr auto; }
  .s-logo span { display:inline; }
  .ph-tile { width:46px; height:46px; border-radius:14px; } .ph-tile .ic { width:23px; height:23px; }
  .klabel { flex-wrap:wrap; }
  .wrow .orb { width:38px; height:38px; }
}

/* ══ Hell als einziger Modus (2026-10-01) ═══════════════════════════════════════
   Warmes Papierweiß als Bühne, weiße Flächen, Tinte statt Schwarz. Farbe sitzt weiter nur in Objekten. */
:root[data-theme="light"] {
  --bg:#F7F5F0; --bg-2:#F2EFE8; --panel:#FFFFFF; --panel-2:#F3F0E9; --panel-3:#EAE6DD; --panel-4:#DDD8CD;
  --line:rgb(43 33 16 / .08); --line-2:rgb(43 33 16 / .14); --ink:#1D1913; --soft:#5E584E; --faint:#7F796E;
  --shadow:0 24px 50px -24px rgb(60 40 10 / .28); --glass:rgb(255 255 255 / .82); --scrim:rgb(29 25 19 / .4);
  --ink-dark:#1D1913;
}
:root[data-theme="light"] .s-top { background:color-mix(in oklab,var(--bg) 86%,transparent); }
:root[data-theme="light"] .s-nav a .ic, :root[data-theme="light"] .s-nav a[aria-current="page"] .ic { color:var(--hue-core); }
:root[data-theme="light"] .s-nav a .new { background:var(--hue-core); }
:root[data-theme="light"] .s-ind { background:color-mix(in oklab,var(--acc,var(--tang)) 13%,#fff); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--acc,var(--tang)) 30%,transparent), 0 2px 0 color-mix(in oklab,var(--acc,var(--tang)) 22%,transparent); }
:root[data-theme="light"] .s-credits .ic { color:var(--butter-core); }
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-white) { background:var(--panel); box-shadow:0 2px 0 var(--line-2); }
:root[data-theme="light"] .btn:not(.btn-primary):not(.btn-white):hover { background:var(--panel-2); }
:root[data-theme="light"] .btn.btn-ghost { background:transparent; box-shadow:none; }
:root[data-theme="light"] .btn.btn-ghost:hover { background:var(--panel-2); }
:root[data-theme="light"] .btn-white { background:var(--ink); color:#fff; box-shadow:0 3px 0 #000; }
:root[data-theme="light"] .btn-white:hover { background:#2d2820; }
:root[data-theme="light"] .btn-primary { color:#fff; text-shadow:0 1px 0 rgb(120 40 0 / .35); }
:root[data-theme="light"] .btn-primary .cost { background:rgb(255 255 255 / .22); }
:root[data-theme="light"] .btn-primary .cost .ic { color:#fff; }
:root[data-theme="light"] .chip { background:var(--panel); }
:root[data-theme="light"] .chip.idea .dot { background:var(--hue-core); }
:root[data-theme="light"] .input, :root[data-theme="light"] .textarea, :root[data-theme="light"] .select, :root[data-theme="light"] .prompt-box, :root[data-theme="light"] .compose { background:var(--panel); }
:root[data-theme="light"] .compose { box-shadow:0 2px 0 var(--line-2), 0 20px 40px -28px rgb(60 40 10 / .35); }
:root[data-theme="light"] .compose:focus-within { box-shadow:8px 8px 0 -1px var(--tang), 0 20px 40px -28px rgb(60 40 10 / .35); }
:root[data-theme="light"] .panel, :root[data-theme="light"] .versions, :root[data-theme="light"] .chats { background:var(--bg-2); }
:root[data-theme="light"] .panel .gen { background:linear-gradient(transparent,var(--bg-2) 30%); }
:root[data-theme="light"] .panel .tabs { background:var(--bg-2); }
:root[data-theme="light"] .fan-card { box-shadow:inset 0 2px 0 rgb(255 255 255 / .45), 0 5px 0 color-mix(in oklab,var(--hue-core) 70%,#000), 0 26px 40px -24px rgb(60 40 10 / .45); }
:root[data-theme="light"] .tcard.cart:hover { box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), 0 9px 0 color-mix(in oklab,var(--hue-core) 62%,#000), 0 26px 40px -22px rgb(60 40 10 / .4); }
:root[data-theme="light"] .tcard.cart .meta p { color:rgb(29 25 19 / .75); }
:root[data-theme="light"] .node { background:color-mix(in oklab,var(--hue-core) 10%,#fff); border-color:color-mix(in oklab,var(--hue-core) 35%,transparent); }
:root[data-theme="light"] .node .ic, :root[data-theme="light"] .kind .ic, :root[data-theme="light"] .wrow:hover .ka { color:var(--hue-core); }
:root[data-theme="light"] .kind { background:var(--panel); }
:root[data-theme="light"] .wrow:hover { background:linear-gradient(90deg,color-mix(in oklab,var(--hue-core) 8%,transparent),transparent 70%); }
:root[data-theme="light"] .mcp-num { background:color-mix(in oklab,var(--acc,var(--tang)) 16%,#fff); color:var(--acc,var(--tang)); }
:root[data-theme="light"] .seg { background:var(--panel-2); }
:root[data-theme="light"] .seg button[aria-selected="true"] { background:var(--panel); box-shadow:0 1px 0 var(--line-2), 0 1px 3px rgb(60 40 10 / .08); }
:root[data-theme="light"] .card, :root[data-theme="light"] .gcard { background:var(--panel); }
:root[data-theme="light"] .acard .pv { background:repeating-conic-gradient(#F3F0E9 0 25%,#E9E5DC 0 50%) 0 0/20px 20px; }
:root[data-theme="light"] .start h1 .hl { color:var(--tang); }
:root[data-theme="light"] .krow:hover { background:linear-gradient(90deg,transparent,var(--panel-2) 30%,transparent); }
:root[data-theme="light"] ::selection { background:color-mix(in oklab,var(--tang) 30%,transparent); }
.appcard .sticker.badge { background:#fff; color:var(--ink-dark); box-shadow:0 2px 0 rgb(0 0 0 / .25); }
:root[data-theme="light"] .kind[aria-pressed="true"] { background:var(--hue-body); color:var(--ink-dark); }
:root[data-theme="light"] .kind[aria-pressed="true"] .ic { color:var(--ink-dark); }

/* Anmelden: kein Farbnebel – Genre-Kacheln als schräge Aufkleber auf Papier */
.auth .show { background:var(--bg-2); }
.auth .show::before, .auth .show::after { display:none; }
.auth .show h1 { font-weight:800; letter-spacing:-.05em; }
.auth .show h1 .hl { color:var(--tang); }
.auth .tiles { opacity:1; gap:18px; }
.auth .tiles div { border:0; border-radius:20px; padding:6px; background:var(--hue-body); rotate:calc((var(--i) - 2.5) * 2.2deg);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), 0 5px 0 color-mix(in oklab,var(--hue-core) 65%,#000); transition:rotate .6s var(--spring), transform .6s var(--spring); }
.auth .tiles div:nth-child(even) { rotate:calc((2.5 - var(--i)) * 1.8deg); }
.auth .tiles div > svg { border-radius:14px; display:block; width:100%; height:100%; }
.auth .tiles div:hover { rotate:0deg; transform:translateY(-6px) scale(1.04); }
.auth .form h2 { font-weight:800; letter-spacing:-.045em; }

/* Spielansicht: das Spiel sitzt in einer kleinen Konsole – dunkler Rahmen, Tasten-Lippe, runde Ecken */
.frame-wrap { border:0; border-radius:24px; padding:10px; background:var(--ink); box-shadow:inset 0 2px 0 rgb(255 255 255 / .12), 0 6px 0 #000, 0 30px 50px -30px rgb(60 40 10 / .5); }
.frame-wrap iframe { inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); border-radius:15px; }
.frame-wrap .veil { inset:10px; border-radius:15px; }
.stage-body { padding:18px 20px 14px; }
:root[data-theme="light"] .checkpill { background:var(--panel); box-shadow:0 2px 0 var(--line); }
:root[data-theme="light"] .checkpill.ok { color:#2f8a14; } :root[data-theme="light"] .checkpill.bad { color:#c42238; } :root[data-theme="light"] .checkpill.warn { color:#a86b00; }
:root[data-theme="light"] .tag.ok { color:#2f8a14; } :root[data-theme="light"] .tag.bad { color:#c42238; } :root[data-theme="light"] .tag.warn { color:#a86b00; }
:root[data-theme="light"] .ver .n { color:var(--tang); }
:root[data-theme="light"] .ver[aria-current="true"] { box-shadow:0 2px 0 var(--line-2); }
:root[data-theme="light"] .errors { background:#FFF1F2; color:#9b1c2e; }
.stage-bar .title { font:800 18px/1.2 var(--serif); letter-spacing:-.03em; }
:root[data-theme="light"] .btn.btn-ghost:not(.btn-primary):not(.btn-white) { background:transparent; box-shadow:none; border-color:transparent; }
:root[data-theme="light"] .btn.btn-ghost:not(.btn-primary):not(.btn-white):hover { background:var(--panel-2); }
:root[data-theme="light"] .tcard.cart .btn.btn-ghost:not(.btn-primary):not(.btn-white) { background:rgb(255 255 255 / .55); }
:root[data-theme="light"] .tcard.cart .btn.btn-ghost:not(.btn-primary):not(.btn-white):hover { background:#fff; }
.pop a, .pop a.opt, .s-menu a { text-decoration:none; }
a.opt { text-decoration:none; color:inherit; }

/* MCP: gewählter Editor als Taste in der Bereichsfarbe; Abschnittsköpfe ohne Linien-Symbol */
.sec-h h2 > .ic { display:none; }
.mcp-engine { border-radius:14px; transition:transform .45s var(--spring), box-shadow .2s, background .2s; }
.mcp-engine:hover { transform:translateY(-1px); }
.mcp-engine[aria-pressed="true"] { border-color:color-mix(in oklab,var(--acc,var(--lime-core)) 70%,transparent); background:color-mix(in oklab,var(--acc,var(--lime-core)) 12%,#fff);
  box-shadow:0 3px 0 color-mix(in oklab,var(--acc,var(--lime-core)) 55%,transparent); transform:translateY(-2px); }

/* Assets leer: die sechs Arten als kleine, schräge Spielzeug-Kacheln */
.lib-empty { border-style:solid !important; border-color:var(--line) !important; background:var(--panel); border-radius:20px; }
.lib-toys { display:flex; gap:10px; margin-bottom:12px; }
.lib-toys span { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; color:#fff; rotate:calc((var(--i) - 2.5) * 5deg);
  background:radial-gradient(90% 80% at 30% 20%,var(--hue-body),var(--hue-core) 70%); box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -3px 0 rgb(0 0 0 / .16), 0 8px 14px -8px var(--hue-core);
  animation:s-hop .7s var(--spring) backwards; animation-delay:calc(var(--i) * 60ms); transition:transform .5s var(--spring); }
.lib-toys span:nth-child(odd) { translate:0 6px; }
.lib-toys span .ic { width:22px; height:22px; }
.lib-empty:hover .lib-toys span { transform:translateY(-4px) rotate(4deg); }
@keyframes s-hop { from { opacity:0; transform:translateY(16px) scale(.8); } }

/* Bibliothek-Tabs als Pillen in der Bereichsfarbe statt Unterstrich */
.lib-tabs { gap:4px; padding-bottom:8px; }
.lib-tabs button { height:36px; border-radius:11px; box-shadow:none; transition:background .2s, color .2s; }
.lib-tabs button:hover { background:var(--panel-2); }
.lib-tabs button[aria-selected="true"] { box-shadow:none; background:color-mix(in oklab,var(--acc,var(--tang)) 14%,#fff); color:var(--ink);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--acc,var(--tang)) 32%,transparent); }

/* Explore-Banner: Farbfläche links mit dunkler Schrift, Illustration läuft nach rechts aus */
.hero.duo .banner { border:0; background:var(--hue-body); box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), 0 5px 0 color-mix(in oklab,var(--hue-core) 65%,#000); }
.hero.duo .banner::after { background:linear-gradient(90deg,var(--hue-body) 34%,color-mix(in oklab,var(--hue-body) 70%,transparent) 55%,transparent 80%); }
.hero.duo .banner .art { left:30%; }
.hero.duo .banner h2 { color:var(--ink-dark); max-width:420px; }
.hero.duo .banner p { color:rgb(29 25 19 / .75); max-width:360px; }
.hero.duo .banner .sticker { background:#fff; box-shadow:0 2px 0 rgb(0 0 0 / .2); }
.hero.duo .banner:hover { box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), 0 9px 0 color-mix(in oklab,var(--hue-core) 65%,#000), 0 26px 40px -24px rgb(60 40 10 / .45); transform:translateY(-4px); }

/* Handy: Kartenstapel als kleine, wischbare Reihe unter dem Startfeld */
@media (max-width:1100px) {
  .fan { display:flex; gap:14px; overflow-x:auto; padding:22px 8px 22px; margin:0 -4px; scroll-snap-type:x mandatory; scrollbar-width:none; order:2; }
  .fan-card { flex:none; width:150px; scroll-snap-align:start; --y:0px !important; }
  .fan-card span { font-size:13px; }
}
@media (max-width:700px) { .hero.duo .banner .art { left:45%; } .hero.duo .banner::after { background:linear-gradient(90deg,var(--hue-body) 45%,transparent 95%); } }

/* Bibliothek- und Spiele-Kopf in der Überschriften-Schrift */
.lib-head h1 { font:800 28px/1.1 var(--serif); letter-spacing:-.04em; font-variation-settings:"wdth" 92; }
.lib-head h1 .n, .lib-head h1 > span { font:700 12px/1 var(--sans); letter-spacing:0; padding:5px 8px; border-radius:8px; background:color-mix(in oklab,var(--acc,var(--tang)) 14%,#fff); color:var(--acc,var(--tang)); }
.ch-empty b { font-weight:800; letter-spacing:-.04em; }

/* Dialoge und Schublade: Titel in der Überschriften-Schrift, weiche Kante, Feder beim Hereinkommen */
.modal .box > header h3, .drawer > header b { font:800 20px/1.2 var(--serif); letter-spacing:-.035em; }
.modal .box { border:0; border-radius:26px; box-shadow:0 6px 0 var(--line-2), 0 40px 80px -30px rgb(60 40 10 / .45); animation:s-boxin .5s var(--spring); }
@keyframes s-boxin { from { opacity:0; transform:translateY(18px) scale(.97); } }
.drawer { border:0; border-radius:26px 0 0 26px; box-shadow:-6px 0 0 var(--line), -30px 0 80px -30px rgb(60 40 10 / .35); animation:s-drawin .55s var(--spring); }
@keyframes s-drawin { from { transform:translateX(40px); opacity:0; } }
.drawer > header { padding:20px 22px; }
.drawer > .body .orb { width:52px; height:52px; border-radius:16px; rotate:-5deg; }
.drawer > .body .orb .ic.glyph { width:32px; height:32px; }
.drawer pre, .drawer .instr { border-radius:16px; }
@media (prefers-reduced-motion:reduce) { .modal .box, .drawer { animation:none; } }
.settings section.card { border-radius:22px; box-shadow:0 3px 0 var(--line); }
.settings section.card > h3 { font:800 19px/1.2 var(--serif) !important; letter-spacing:-.03em; }
:root[data-theme="light"] .snav a[aria-current="true"] { background:color-mix(in oklab,var(--acc,var(--grape-core)) 12%,#fff); color:var(--ink); box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--acc,var(--grape-core)) 28%,transparent); }
.snav a[aria-current="true"] .ic { color:var(--acc,var(--grape-core)); }

/* Workflow-Leinwand: Knoten in der Rollenfarbe, Rolle als Aufkleber, Tasten-Lippe */
.canvas { border:0; border-radius:24px; background:radial-gradient(circle at center,var(--line-2) 1px,transparent 1.5px) 0 0/22px 22px, var(--bg-2); }
.bignode { border:0; border-radius:20px; background:var(--panel); box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--hue-core) 30%,transparent), 0 4px 0 color-mix(in oklab,var(--hue-core) 35%,transparent);
  transition:transform .5s var(--spring), box-shadow .3s; }
.bignode:hover { transform:translateY(-3px); }
.bignode .role { justify-self:start; padding:4px 8px 5px; border-radius:7px; font:800 11px/1 var(--serif); letter-spacing:0; text-transform:none; color:var(--ink-dark); background:var(--hue-body); rotate:-3deg; }
.bignode b { font:800 16px/1.2 var(--serif); letter-spacing:-.02em; } .bignode b .ic { color:var(--hue-core); }
.bignode[data-state="running"] { box-shadow:inset 0 0 0 2px var(--hue-core), 0 4px 0 var(--hue-core), 0 18px 34px -16px var(--hue-core); transform:translateY(-4px); }
.bignode[data-state="done"] { box-shadow:inset 0 0 0 2px var(--lime-core), 0 4px 0 color-mix(in oklab,var(--lime-core) 60%,#000); }
.bignode[data-state="error"] { box-shadow:inset 0 0 0 2px var(--bad), 0 4px 0 #a01c2c; }
.page-h > div > a.muted:first-child { text-decoration:none; font-weight:650; display:inline-block; margin-bottom:10px; } .page-h > div > a.muted:first-child:hover { color:var(--ink); }

/* Eigene Spiele als Module wie die Vorlagen, in der Farbe ihres Genres */
.gcard.cart { background:var(--hue-body); border:0; padding:8px; border-radius:18px; box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), 0 5px 0 color-mix(in oklab,var(--hue-core) 62%,#000); }
.gcard.cart .cover { border-radius:12px; }
.gcard.cart .meta b { color:var(--ink-dark); }
.gcard.cart .meta small { color:rgb(29 25 19 / .65); }
.gcard.cart:hover, .gcard.cart:focus-visible { border-color:transparent; box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), 0 9px 0 color-mix(in oklab,var(--hue-core) 62%,#000), 0 26px 40px -22px rgb(60 40 10 / .4); }
.gcard.cart .tag.volt { background:#fff; }
.gcard.cart .cover .play span { background:var(--ink-dark); color:#fff; }
:root[data-theme="light"] .gcard.cart { background:var(--hue-body); }

/* Gerätecode für Unity (#/link, ADR 0017): Code groß und gesperrt wie im Synagy-Fenster */
.devlink .link-code { font:600 28px/1.2 var(--mono, 'JetBrains Mono', monospace); letter-spacing:.18em; text-transform:uppercase; text-align:center; padding:14px 16px; }
.devlink .link-ok { display:flex; gap:12px; align-items:center; max-width:520px; margin-top:14px; }

/* Clip „So benutzt man es“ unter der Beschreibung (Unity, Minecraft) */
.mcp-clip { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:18px; align-items:center; padding:12px; max-width:980px; }
.mcp-clip[hidden] { display:none; }
.mcp-clip video { width:100%; height:auto; max-height:520px; border-radius:12px; background:#111; display:block; object-fit:contain; }
.mcp-clip-t b { display:block; font-size:15px; margin-bottom:8px; }
.mcp-clip-t ol { margin:0; padding-left:20px; color:var(--soft); font-size:13.5px; line-height:1.7; }
@media (max-width: 720px) { .mcp-clip { grid-template-columns:1fr; } }
/* Minecraft ohne MCP: Schritte ganz zeigen, Prompt-Leiste weg */
.mcp-promptbox.nomcp .mcp-bar { display:none; }
.mcp-promptbox.nomcp .mcp-prompt { max-height:none; -webkit-mask-image:none; mask-image:none; font:400 13.5px/1.6 var(--sans); white-space:pre-line; }

/* ══ Schaufenster 2026-10-03 (#/minecraft, #/unity) ═══════════════════════════
   Bausteine aus views/showcase.js, Farbe über --acc des Bereichs. Kopf als Jelly-Objekt mit Video drin (Farbe im Rahmen, nicht im Hintergrund),
   darunter die gewohnten Karten. Medien kommen aus media/minecraft/media.json. */
.mc { width:min(1680px,100%); }
@media (min-width:1400px) { .mc .mc-hero-copy { max-width:680px; } .mc .mc-hero p { max-width:600px; } .mc .mc-screen { min-height:min(660px,78vh); padding:56px; } }
.mc .sec-h { margin-top:56px; }
.mc .sec-h h2 .ic { color:var(--acc); }

.mc-hero { padding:10px; border-radius:30px; background:var(--acc-2); rotate:-.4deg;
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .45), 0 6px 0 color-mix(in oklab,var(--acc) 62%,#000), 0 40px 60px -40px color-mix(in oklab,var(--acc) 45%,transparent);
  transition:rotate .8s var(--spring); }
.mc-hero:hover { rotate:0deg; }
.mc-screen { position:relative; isolation:isolate; overflow:hidden; display:grid; align-content:end; gap:28px; min-height:min(600px,78vh); padding:44px;
  border-radius:22px; background:#15130f; color:#fff; }
.mc-bg { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:70% 50%; scale:1.04; }
.mc-screen::before { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,rgb(16 14 10 / .95) 0%,rgb(16 14 10 / .88) 34%,rgb(16 14 10 / .4) 60%,rgb(16 14 10 / .08) 82%),
             linear-gradient(0deg,rgb(16 14 10 / .9),transparent 38%),
             linear-gradient(180deg,rgb(16 14 10 / .55),transparent 30%); }
/* Pixel-Raster als leiser Block-Anklang, nur links unter dem Text */
.mc-screen::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.07;
  background:repeating-conic-gradient(#fff 0 25%,transparent 0 50%) 0 0/16px 16px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 55%); mask-image:linear-gradient(90deg,#000,transparent 55%); }
.mc-hero-copy { display:grid; gap:18px; max-width:600px; }
.mc-badges { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.mc-mark { display:inline-grid; place-items:center; height:34px; padding:0 12px; border-radius:10px; background:rgb(255 255 255 / .12);
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / .16); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.mc-mark { display:inline-flex; gap:8px; font:750 14px/1 var(--sans); }
.mc-mark .brand { width:104px; height:auto; color:#fff !important; } .mc-mark .brand:not(.wide) { width:18px; height:18px; }
.mc-mark.dark { background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--line); } .mc-mark.dark .brand { color:var(--ink) !important; }
.mc-hero h1 { margin:0; font:800 clamp(46px,6.4vw,92px)/.9 var(--serif); letter-spacing:-.05em; font-variation-settings:"wdth" 92; color:#fff; text-wrap:balance; }
.mc-hero p { margin:0; max-width:520px; color:rgb(255 255 255 / .8); font-size:17px; line-height:1.55; }
.mc-cta { display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }
.mc-cta .btn { height:46px; padding:0 20px; font-size:15px; }
/* Gleiche Spezifität wie die helle .btn-Regel, steht später und gewinnt deshalb */
:root[data-theme] .mc-hero .btn.mc-btn-glass { background:rgb(255 255 255 / .14); color:#fff; border-color:rgb(255 255 255 / .24); box-shadow:0 3px 0 rgb(0 0 0 / .45);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
:root[data-theme] .mc-hero .btn.mc-btn-glass:hover { background:rgb(255 255 255 / .24); }
.mc-facts { display:flex; flex-wrap:wrap; gap:8px 22px; margin:0; padding:18px 0 0; list-style:none; border-top:1px solid rgb(255 255 255 / .14);
  color:rgb(255 255 255 / .78); font-size:13.5px; font-weight:600; }
.mc-facts li { display:flex; align-items:center; gap:8px; } .mc-facts .ic { width:16px; height:16px; color:var(--acc-2); }

/* Zwei Bereiche als volle Jelly-Karten */
.mc-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.mc-mode { display:grid; gap:18px; align-content:start; padding:28px; border-radius:24px; background:var(--hue-body); color:var(--ink-dark);
  box-shadow:inset 0 2px 0 rgb(255 255 255 / .45), 0 5px 0 color-mix(in oklab,var(--hue-core) 62%,#000); transition:transform .5s var(--spring), box-shadow .3s; }
.mc-mode:hover { transform:translateY(-4px); box-shadow:inset 0 2px 0 rgb(255 255 255 / .45), 0 9px 0 color-mix(in oklab,var(--hue-core) 62%,#000), 0 28px 40px -26px rgb(60 40 10 / .45); }
.mc-mode header { display:flex; align-items:center; gap:14px; }
.mc-mode-tag { margin-left:auto; align-self:flex-start; padding:5px 10px; border-radius:8px; background:rgb(255 255 255 / .7); font:750 12px/1 var(--sans); white-space:nowrap; }
.mc-mode h3 { margin:0; font:800 30px/1 var(--serif); letter-spacing:-.04em; }
.mc-mode header p { margin:4px 0 0; font-weight:650; color:rgb(29 25 19 / .68); }
.mc-mode-tile { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; flex:none; background:#fff; color:var(--hue-core); rotate:-5deg;
  box-shadow:0 3px 0 color-mix(in oklab,var(--hue-core) 55%,#000); transition:rotate .6s var(--spring); }
.mc-mode:hover .mc-mode-tile { rotate:6deg; }
.mc-mode-tile .ic { width:26px; height:26px; stroke-width:2.2; }
.mc-mode ul { margin:0; padding:0; list-style:none; display:grid; gap:10px; font-size:15px; font-weight:600; }
.mc-mode li { display:flex; gap:10px; align-items:flex-start; }
.mc-mode li .ic { width:18px; height:18px; padding:3px; margin-top:2px; border-radius:6px; background:rgb(255 255 255 / .7); color:var(--hue-core); stroke-width:3; }
.mc-ask { margin:4px 0 0; padding:14px 16px; border-radius:14px; background:rgb(255 255 255 / .62); }
.mc-ask figcaption { font:700 11.5px/1 var(--sans); color:rgb(29 25 19 / .55); margin-bottom:6px; }
.mc-ask blockquote { margin:0; font-size:15px; font-weight:600; line-height:1.45; }

/* Ablauf: fünf Karten mit Jelly-Nummer */
.mc-steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.mc-steps li { display:grid; gap:8px; align-content:start; padding:20px; border-radius:20px; }
.mc-steps b { font:750 16px/1.2 var(--serif); letter-spacing:-.02em; }
.mc-steps p { margin:0; color:var(--soft); font-size:13.5px; line-height:1.5; }
.mc-n { width:38px; height:38px; margin-bottom:6px; border-radius:12px; display:grid; place-items:center; font:800 18px/1 var(--serif); color:#fff; rotate:-4deg;
  background:radial-gradient(90% 80% at 30% 20%,var(--acc-2),var(--acc) 70%); box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -3px 0 rgb(0 0 0 / .18); }
.mc-steps li:nth-child(2) .mc-n { background:radial-gradient(90% 80% at 30% 20%,var(--sky-body),var(--sky-core) 70%); }
.mc-steps li:nth-child(3) .mc-n { background:radial-gradient(90% 80% at 30% 20%,var(--tang-body),var(--tang-core) 70%); }
.mc-steps li:nth-child(4) .mc-n { background:radial-gradient(90% 80% at 30% 20%,var(--grape-body),var(--grape-core) 70%); }
.mc-steps li:nth-child(5) .mc-n { background:radial-gradient(90% 80% at 30% 20%,var(--bub-body),var(--bub-core) 70%); }

/* Film und Bilderleiste */
.mc-reel { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:26px; align-items:center; padding:12px; border-radius:24px; }
.mc-reel-v video { display:block; width:100%; aspect-ratio:16/9; border-radius:16px; background:#15130f; object-fit:cover; }
.mc-reel-t { display:grid; gap:12px; justify-items:start; padding:8px 18px 8px 0; }
.mc-reel-t h3 { margin:0; font:800 26px/1.05 var(--serif); letter-spacing:-.035em; }
.mc-reel-t p { margin:0; font-size:14.5px; line-height:1.55; }
.mc-reel-t ol { margin:0; padding-left:20px; color:var(--soft); font-size:13.5px; line-height:1.8; }
.mc-shots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.mc-shot { display:grid; gap:10px; padding:8px 8px 12px; border-radius:18px; background:var(--panel); border:1px solid var(--line); text-decoration:none;
  box-shadow:0 3px 0 var(--line); transition:transform .5s var(--spring), box-shadow .3s; }
.mc-shot:hover { transform:translateY(-3px) rotate(-.4deg); box-shadow:0 6px 0 var(--line-2), 0 22px 34px -24px rgb(40 30 10 / .4); }
.mc-shot img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:12px; background:#15130f; }
.mc-shot span { display:grid; gap:2px; padding:0 6px; color:var(--soft); font-size:13px; line-height:1.4; }
.mc-shot b { color:var(--ink); font-size:14.5px; }

/* Bestandteile und Vertrauen */
.mc-parts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.mc-part { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; align-items:center; padding:18px 20px; border-radius:18px; }
.mc-part-i { grid-row:span 2; width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:color-mix(in oklab,var(--acc) 14%,#fff); color:var(--acc); }
.mc-part b { font-size:15px; } .mc-part p { margin:0; color:var(--soft); font-size:13px; line-height:1.45; }
.mc-trust { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.mc-tr { display:grid; gap:10px; align-content:start; padding:22px; border-radius:20px; }
.mc-tr-i { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; rotate:-4deg;
  background:radial-gradient(90% 80% at 30% 20%,var(--hue-body),var(--hue-core) 70%); box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -3px 0 rgb(0 0 0 / .16); }
.mc-tr-i .ic { width:20px; height:20px; stroke-width:2.4; }
.mc-tr b { font:750 17px/1.2 var(--serif); letter-spacing:-.02em; } .mc-tr p { margin:0; color:var(--soft); font-size:13.5px; line-height:1.55; }

/* Minecraft und MCP: zwei Wege nebeneinander */
.mc-mcp { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:24px; align-items:stretch; padding:26px; border-radius:22px; }
.mc-mcp-side { display:grid; gap:10px; align-content:start; }
.mc-mcp-k { font:700 12px/1 var(--sans); color:var(--faint); }
.mc-mcp-side > b { font:800 22px/1.1 var(--serif); letter-spacing:-.03em; }
.mc-mcp-side p { margin:0; color:var(--soft); font-size:14px; line-height:1.55; max-width:420px; }
.mc-mcp-logos { display:flex; gap:8px; flex-wrap:wrap; margin:4px 0; }
.mc-mcp-logos .mcp-logo { width:40px; height:40px; border-radius:12px; } .mc-mcp-logos .mcp-logo .brand { width:20px; height:20px; }
.mc-mcp-logos .mc-mark { height:40px; }
.mc-mcp-side .btn { justify-self:start; } .mc-mcp-side .row { margin-top:4px; }
.mc-mcp-or { align-self:center; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--panel-2); color:var(--faint); font:700 12px/1 var(--sans); }

/* Abschluss */
.mc-end { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:56px; padding:30px 34px; border-radius:26px;
  background:var(--acc-2); color:var(--ink-dark); box-shadow:inset 0 2px 0 rgb(255 255 255 / .45), 0 5px 0 color-mix(in oklab,var(--acc) 62%,#000); }
.mc-end h2 { margin:0; font:800 clamp(28px,3.4vw,42px)/1 var(--serif); letter-spacing:-.04em; }
.mc-end p { margin:8px 0 0; font-weight:600; color:rgb(29 25 19 / .7); }

@media (max-width:1100px) {
  .mc-steps { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mc-trust { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mc-reel { grid-template-columns:minmax(0,1fr); } .mc-reel-t { padding:4px 10px 10px; }
}
@media (max-width:760px) {
  .mc-hero { rotate:0deg; padding:6px; border-radius:24px; }
  /* Schmal: Video als Band oben, Text darunter auf Tinte – über dem Video wäre er nicht lesbar */
  .mc-screen { align-content:start; gap:22px; min-height:0; padding:8px 8px 22px; border-radius:19px; }
  .mc-bg { position:static; height:auto; aspect-ratio:16/10; border-radius:13px; scale:1; }
  .mc-screen::before, .mc-screen::after { display:none; }
  .mc-hero-copy, .mc-facts { margin:0 12px; }
  .mc-modes, .mc-parts, .mc-trust, .mc-mcp { grid-template-columns:minmax(0,1fr); }
  .mc-steps, .mc-shots { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mc-mcp-or { justify-self:start; }
  .mc-mode { padding:22px; }
}
@media (max-width:480px) { .mc-steps, .mc-shots { grid-template-columns:minmax(0,1fr); } }
@media (prefers-reduced-motion:reduce) { .mc-hero, .mc-mode, .mc-shot { transition:none; rotate:0deg; } }
.mcp-after a { color:var(--ink); font-weight:650; text-decoration:none; } .mcp-after a:hover { text-decoration:underline; }
:root[data-sec="unity"] .mc-steps li:nth-child(2) .mc-n { background:radial-gradient(90% 80% at 30% 20%,var(--lime-body),var(--lime-core) 70%); }
/* Kopfleiste mit elf Bereichen: erst enger, dann nur Symbole (Name als title) – außer beim aktiven Bereich */
@media (max-width:1480px) and (min-width:901px) { .s-nav a { padding:0 10px; } }
@media (max-width:1340px) and (min-width:901px) { .s-nav a:not([aria-current="page"]) span.lbl { display:none; } .s-nav a .new { left:23px; } }

/* Minecraft-Konto (views/mc-account.js): Anmeldung, Guthaben, Aufladen, Launcher */
.mc-acc { scroll-margin-top:90px; }
.mc-acc-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:12px; }
.mc-acc-card { display:grid; gap:14px; align-content:start; padding:26px; border-radius:22px; }
.mc-acc-card h3 { margin:0; font:750 22px/1.15 var(--serif); letter-spacing:-.03em; }
.mc-acc-card p { margin:0; }
.mc-acc-i { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; color:#fff; rotate:-4deg; flex:none;
  background:radial-gradient(90% 80% at 30% 20%,var(--hue-body),var(--hue-core) 70%); box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), inset 0 -3px 0 rgb(0 0 0 / .16); }
.mc-acc-i .ic { width:21px; height:21px; stroke-width:2.4; }
.mc-acc-head { display:flex; align-items:center; gap:14px; }
.mc-acc-head > div { display:grid; gap:3px; min-width:0; flex:1; }
.mc-acc-k { font:700 12px/1 var(--sans); color:var(--faint); text-transform:uppercase; letter-spacing:.06em; }
.mc-acc-who { font-weight:650; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-acc-bal { display:flex; align-items:baseline; gap:10px; padding:18px 22px; border-radius:18px; background:var(--lime-rim); color:var(--ink-dark); }
.mc-acc-bal b { font:800 clamp(40px,5vw,58px)/1 var(--serif); letter-spacing:-.045em; }
.mc-acc-bal span { font-weight:700; opacity:.7; }
.mc-acc-top { display:grid; gap:12px; padding-top:6px; border-top:1px dashed var(--line-2); }
.mc-acc-top .mc-acc-k { padding-top:12px; }
.mc-acc-chips { display:flex; gap:8px; flex-wrap:wrap; }
.mc-acc-chips .chip { font-weight:700; }
.mc-acc-pay { justify-self:start; height:48px; padding:0 20px; font-size:15.5px; }
.mc-acc-form { display:flex; gap:8px; }
.mc-acc-form .input { flex:1; min-width:0; }
.mc-acc-in { display:grid; gap:8px; }
.mc-acc-note { margin:0; font-size:13px; color:var(--faint); }
.mc-acc-note.ok { color:#2f8a14; font-weight:650; } .mc-acc-note.bad { color:#d02a40; font-weight:650; }
.mc-acc-other { display:flex; gap:14px; font-size:13.5px; }
.mc-acc-other a { color:var(--soft); font-weight:650; } .mc-acc-other a:hover { color:var(--ink); }
@media (max-width:900px) {
  .mc-acc-grid { grid-template-columns:1fr; }
  .mc-acc-form { flex-direction:column; }
  .mc-acc-pay { justify-self:stretch; }
}
/* Skill-Pakete und Hersteller-Werkzeuge auf #/mcp */
.mcp-packs, .mcp-makers { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px) { .mcp-packs, .mcp-makers { grid-template-columns:minmax(0,1fr); } }
.mcp-pack-list { margin-top:8px; font-size:12.5px; } .mcp-pack-list summary { cursor:pointer; color:var(--soft); font-weight:600; }
.mcp-pack-list .meta { margin-top:6px; line-height:1.6; }
.mcp-file .grow > .meta { margin-top:8px; } .mcp-file .meta a { color:inherit; }
.mcp-makers .mcp-code { margin:0; width:100%; font-size:11.5px; }
.genre-hint:not(:empty) { margin-top:8px; }

/* ══ Ein Konto (ADR 0018): Anmeldebildschirm und Admin-Konsole, 2026-10-04 ══════════════════════════
   Anmelden ist der ganze Bildschirm: Papierweiß, Karte in der Mitte, Spiel-Kacheln als Spielzeug drumherum. */
:root[data-sec="login"] .dock { display:none; }
:root[data-sec="login"] main#view { padding-bottom:0; }
.login { position:relative; isolation:isolate; min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:48px 16px 88px; overflow:hidden; }
.login-tiles { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.login-tile { position:absolute; width:clamp(118px,11vw,172px); aspect-ratio:3/4; border-radius:22px; overflow:hidden; border:4px solid #fff;
  box-shadow:0 6px 0 color-mix(in oklab,var(--hue-core) 55%,#000), 0 30px 50px -26px rgb(60 40 10 / .5);
  rotate:var(--r,-6deg); animation:login-in .9s var(--spring-soft) both, login-float 7s ease-in-out infinite; animation-delay:calc(var(--i) * 90ms), calc(var(--i) * -1.1s); }
.login-tile svg { display:block; width:100%; height:100%; }
.login-tile.l1 { top:9%; left:7%; --r:-8deg; } .login-tile.l2 { top:40%; left:15%; --r:5deg; width:clamp(96px,8.5vw,138px); } .login-tile.l3 { bottom:9%; left:5%; --r:-3deg; }
.login-tile.r1 { top:8%; right:8%; --r:7deg; } .login-tile.r2 { top:41%; right:15%; --r:-5deg; width:clamp(96px,8.5vw,138px); } .login-tile.r3 { bottom:10%; right:6%; --r:4deg; }
@keyframes login-in { from { opacity:0; translate:0 24px; scale:.9; } }
@keyframes login-float { 50% { translate:0 -10px; } }
@media (prefers-reduced-motion:reduce) { .login-tile { animation:none; } }

.login-card { position:relative; width:min(452px,100%); padding:36px 36px 30px; border-radius:30px; background:var(--panel); border:1px solid var(--line);
  box-shadow:0 3px 0 var(--line-2), 0 40px 70px -36px rgb(60 40 10 / .45); animation:login-in .7s var(--spring-soft) both; }
.login-main, .login-sent { display:grid; gap:18px; }
.login-sent { display:none; justify-items:center; text-align:center; padding:12px 0 4px; }
.login-card.sent .login-main { display:none; } .login-card.sent .login-sent { display:grid; }
.login-brand { display:flex; align-items:center; gap:10px; font:italic 400 28px/1 var(--serif); letter-spacing:-.02em; }
.login-brand .dot { width:24px; height:24px; border-radius:8px; background:var(--tang); box-shadow:inset 0 -3px 0 rgb(0 0 0 / .22), inset 0 2px 0 rgb(255 255 255 / .35); rotate:-6deg; }
.login-brand b { font-weight:400; }
.login-brand .sticker { margin-left:4px; font-size:12.5px; rotate:-4deg; }
.login h1 { margin:6px 0 0; font:400 clamp(40px,4.4vw,52px)/.95 var(--serif); letter-spacing:-.035em; }
.login-lead { margin:-4px 0 4px; color:var(--soft); font-size:15px; line-height:1.5; }
.login-google { width:100%; gap:12px; background:var(--panel) !important; border:1.5px solid var(--line-2) !important; font-size:15.5px; font-weight:650;
  box-shadow:0 3px 0 var(--line-2) !important; }
.login-google:hover:not(:disabled) { background:var(--bg) !important; }
.login-google .g { display:grid; place-items:center; width:22px; height:22px; }
.login-or { display:flex; align-items:center; gap:12px; color:var(--faint); font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.login-or::before, .login-or::after { content:""; flex:1; height:1px; background:var(--line-2); }
.login-field { display:flex; align-items:center; gap:6px; padding:5px 5px 5px 14px; border-radius:16px; border:1.5px solid var(--line-2); background:var(--panel);
  transition:box-shadow .2s, transform .2s var(--spring-soft), border-color .2s; }
.login-field > .ic { color:var(--faint); width:18px; height:18px; }
.login-field .input { flex:1; min-width:0; height:42px; border:0; padding:0 4px; background:transparent !important; box-shadow:none !important; font-size:15px; }
.login-field .btn { height:42px; border-radius:12px; padding:0 16px; }
.login-field:focus-within { border-color:var(--tang); box-shadow:6px 6px 0 -1px var(--tang); transform:translate(-2px,-2px); }
.login-field:focus-within > .ic { color:var(--tang); }
.login-note { margin:-8px 0 0; min-height:18px; font-size:13px; color:var(--faint); }
.login-note:empty { display:none; }
.login-note.bad { color:#d02a40; font-weight:600; }
.login-dev { display:flex; align-items:center; gap:8px; margin:0; padding:10px 12px; border-radius:12px; background:var(--panel-2); color:var(--soft); font-size:12.5px; }
.login-dev .ic { width:15px; height:15px; flex:none; }
.login-orb { width:60px; height:60px; border-radius:19px; display:grid; place-items:center; color:#fff; rotate:-5deg;
  background:radial-gradient(90% 80% at 30% 20%,var(--hue-body),var(--hue-core) 70%); box-shadow:inset 0 2px 0 rgb(255 255 255 / .4), 0 5px 0 color-mix(in oklab,var(--hue-core) 55%,#000); }
.login-orb .ic { width:28px; height:28px; }
.login-sent h2 { margin:6px 0 0; font:400 38px/1 var(--serif); letter-spacing:-.03em; }
.login-sent p { margin:0; max-width:320px; } .login-sent p b { color:var(--ink); }
.login-legal { position:absolute; left:16px; right:16px; bottom:22px; margin:0; text-align:center; font-size:12.5px; color:var(--faint); }
.login-legal a { color:var(--soft); font-weight:600; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.login-legal a:hover { color:var(--ink); }
@media (max-width:1000px) { .login-tile.l2, .login-tile.r2 { display:none; } }
@media (max-width:760px) {
  .login { place-items:start center; padding-top:28px; }
  .login-tiles { display:none; }
  .login-card { padding:28px 22px 24px; border-radius:26px; }
  .login-field { flex-wrap:wrap; padding:5px; } .login-field > .ic { display:none; }
  .login-field .input { flex-basis:100%; padding:0 10px; } .login-field .btn { flex:1; }
}

/* Admin-Konsole: Tabs wie Tasten mit Bereichs-Kachel, Tabellen auf weißen Flächen */
.adm .page-h { margin-bottom:26px; }
.adm-tabs { display:flex; gap:10px; margin:0 0 22px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; }
.adm-tabs a { display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 18px 0 7px; border-radius:16px; text-decoration:none; white-space:nowrap;
  background:var(--panel); border:1px solid var(--line-2); box-shadow:0 2px 0 var(--line-2); font-weight:650; font-size:14.5px; color:var(--soft);
  transition:transform .3s var(--spring-soft), background .2s, border-color .2s, box-shadow .2s; }
.adm-tabs a:hover { color:var(--ink); transform:translateY(-1px); }
.adm-tabs a .orb, .adm-feat .orb { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; flex:none; color:#fff; rotate:-4deg;
  background:radial-gradient(90% 80% at 30% 20%,var(--hue-body),var(--hue-core) 70%); box-shadow:inset 0 2px 0 rgb(255 255 255 / .35), 0 2px 0 color-mix(in oklab,var(--hue-core) 55%,#000);
  transition:rotate .5s var(--spring); }
.adm-tabs a .orb .ic { width:18px; height:18px; }
.adm-tabs a:hover .orb { rotate:6deg; }
.adm-tabs a[aria-current="page"] { color:var(--ink); background:color-mix(in oklab,var(--hue-core) 11%,#fff); border-color:color-mix(in oklab,var(--hue-core) 45%,transparent);
  box-shadow:0 3px 0 color-mix(in oklab,var(--hue-core) 45%,transparent); }
.adm-body { display:grid; gap:18px; min-width:0; }
.adm-panel { display:grid; gap:14px; padding:18px; border-radius:22px; background:var(--panel); border:1px solid var(--line); box-shadow:0 2px 0 var(--line-2); min-width:0; }
.adm-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.adm-bar > .muted { font-size:13px; font-variant-numeric:tabular-nums; }
.adm-search { position:relative; width:min(380px,100%); }
.adm-search > .ic { position:absolute; left:13px; top:50%; translate:0 -50%; width:17px; height:17px; color:var(--faint); pointer-events:none; }
.adm-search .input { padding-left:40px; background:var(--bg) !important; }
.adm-chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.adm-chips .chip { height:34px; font-weight:600; }
.adm-chips .chip .n { min-width:22px; padding:2px 7px; border-radius:999px; background:var(--panel-3); font:600 11.5px/1.2 var(--mono); text-align:center; color:var(--soft); }
.adm-chips .chip .dot { width:8px; height:8px; border-radius:50%; background:var(--hue-core); }
.adm-chips .chip[aria-pressed="true"] { background:color-mix(in oklab,var(--hue-core,var(--tang)) 13%,#fff); border-color:color-mix(in oklab,var(--hue-core,var(--tang)) 50%,transparent); box-shadow:0 2px 0 color-mix(in oklab,var(--hue-core,var(--tang)) 35%,transparent); }
.adm-chips .chip[aria-pressed="true"] .n { background:#fff; color:var(--ink); }
.adm-sep { width:1px; height:22px; margin:0 4px; background:var(--line-2); }
.adm-selbar { display:none; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 10px 9px 16px; border-radius:16px;
  background:color-mix(in oklab,var(--butter-body) 30%,#fff); border:1px solid color-mix(in oklab,var(--butter-core) 35%,transparent); animation:login-in .4s var(--spring-soft); }
.adm-selbar.on { display:flex; }
.adm-selbar b { margin-right:auto; font-size:14px; }
.adm-table { overflow-x:auto; margin:0 -18px; padding:0 18px; }
.adm-t { min-width:760px; font-size:13.5px; }
.adm-t th { white-space:nowrap; }
.adm-t td { padding:11px 10px; }
.adm-t tbody tr { transition:background .15s; }
.adm-t tbody tr:hover { background:var(--bg); }
.adm-t tbody tr.sel { background:color-mix(in oklab,var(--lime-core) 9%,transparent); }
.adm-t td small { display:block; margin-top:2px; font-size:11.5px; color:var(--faint); }
.adm-t .cb { width:34px; padding-right:0; }
.adm-t input[type="checkbox"] { width:17px; height:17px; accent-color:var(--tang); cursor:pointer; vertical-align:middle; }
.adm-t .c { text-align:center; } .adm-t .num { text-align:right; font-variant-numeric:tabular-nums; } .adm-t .r { text-align:right; }
.adm-mail { font-weight:600; word-break:break-all; }
.adm-status { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:999px; font-weight:650; font-size:12.5px; white-space:nowrap;
  background:color-mix(in oklab,var(--hue-core) 14%,#fff); color:color-mix(in oklab,var(--hue-core) 70%,#000); }
.adm-status .dot { width:7px; height:7px; border-radius:50%; background:var(--hue-core); }
.adm-yes { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:8px; background:var(--lime-core); color:#fff; box-shadow:0 2px 0 color-mix(in oklab,var(--lime-core) 55%,#000); }
.adm-yes .ic { width:15px; height:15px; stroke-width:3; }
.adm-bonus { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--soft); white-space:nowrap; }
.adm-bonus .ic { width:14px; height:14px; }
.adm-bonus.ok { color:#2f8a14; font-weight:650; }
.adm-none { padding:40px 10px !important; text-align:center; color:var(--faint); }
.adm-foot { display:flex; justify-content:center; } .adm-foot:has(> [hidden]:only-child) { display:none; }
.adm-hint { display:flex; align-items:center; gap:8px; margin:0 4px; color:var(--faint); font-size:13px; }
.adm-hint .ic { width:15px; height:15px; flex:none; color:var(--butter-core); }
.adm-feats { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:14px; }
.adm-feat { display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:20px; background:var(--panel); border:1px solid var(--line-2);
  box-shadow:0 2px 0 var(--line-2); cursor:pointer; transition:transform .3s var(--spring-soft), border-color .2s, background .2s, box-shadow .2s; }
.adm-feat:hover { transform:translateY(-2px); }
.adm-feat .orb { width:46px; height:46px; border-radius:15px; filter:grayscale(.9); opacity:.55; transition:filter .3s, opacity .3s, rotate .5s var(--spring); }
.adm-feat .orb .ic { width:23px; height:23px; }
.adm-feat b { font-size:15.5px; }
.adm-feat p { margin:3px 0 0; color:var(--soft); font-size:13px; line-height:1.45; }
.adm-feat.on { background:color-mix(in oklab,var(--hue-core) 7%,#fff); border-color:color-mix(in oklab,var(--hue-core) 42%,transparent); box-shadow:0 3px 0 color-mix(in oklab,var(--hue-core) 35%,transparent); }
.adm-feat.on .orb { filter:none; opacity:1; }
.adm-feat:hover .orb { rotate:6deg; }
.adm-feat .switch { width:46px; height:28px; }
.adm-feat .switch::after { width:22px; height:22px; }
.adm-feat .switch[aria-checked="true"] { background:var(--hue-core); }
.adm-feat .switch[aria-checked="true"]::after { translate:18px 0; }
.adm-who { display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:var(--panel-2); }
.adm-who .s-avatar { cursor:default; flex:none; }
.adm-presets { display:flex; gap:8px; flex-wrap:wrap; }
.adm-presets .chip { font-weight:650; font-variant-numeric:tabular-nums; }
@media (max-width:700px) {
  .adm-tabs a { height:44px; padding-right:14px; font-size:14px; }
  .adm-panel { padding:14px; border-radius:18px; } .adm-table { margin:0 -14px; padding:0 14px; }
  .adm-feats { grid-template-columns:minmax(0,1fr); }
  .adm-search { width:100%; }
}
.adm-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:700px) { .adm-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.mc-acc-waiver { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; align-items:start; font-size:13px; line-height:1.5; color:var(--soft); cursor:pointer; }
.mc-acc-waiver input { width:17px; height:17px; margin:2px 0 0; accent-color:var(--tang); }
.mc-acc-waiver a { color:var(--ink); font-weight:650; }