/* GAMPEON Create (creator.js, docs ADR 0031): dieselben Bausteine wie das Portal (theme.css, chrome.css, landing.css),
   dazu nur, was Create zusätzlich braucht: Marken-Zusatz „Create“, keine Freundesleiste, Hub-Listen und die Teile der
   Landing Page für Creator. Farben nur über die Tokens, damit der helle Modus (light.css) mitzieht. */

/* ---------------------------------------------------------------- Rahmen */
.brand .brand-tag { display:inline-flex; align-items:center; height:20px; margin-left:8px; padding:0 8px; border-radius:5px; background:var(--accent);
  color:#fff; font:700 .68rem/1 var(--text); letter-spacing:.14em; text-transform:uppercase; }
.foot .brand .brand-tag { margin-left:10px; }
/* Create hat keine Freundesleiste und keine Suche; die Fläche rechts bleibt frei. */
body.site-create .rail-r, body.site-create .search { display:none !important; }
@media (min-width:1101px) {
  body.site-create:not(.guest) { padding-right:0; }
  body.site-create:not(.guest) .topbar { margin-right:0; }
}
body.site-create .top-nav { flex:1 1 auto; }
body.site-create .top-nav .tn svg.i { width:13px; height:13px; margin-left:4px; vertical-align:-1px; opacity:.7; }
@media (max-width:1280px) { body.site-create:not(.guest) .top-nav .tn:last-child { display:none; } }

/* Seitenköpfe: Illustration je Bereich (wie theme.css für das Portal). */
body[data-route="createHome"] { --ill:url(img/vk/overview.webp); }
body[data-route="teams"] { --ill:url(img/vk/groups.webp); }
body[data-route="creations"] { --ill:url(img/vk/streams.webp); }
body[data-route="myservers"] { --ill:url(img/vk/forums.webp); }
body[data-route="store"] { --ill:url(img/vk/marketplace.webp); }
body[data-route="earnings"] { --ill:url(img/vk/quests.webp); }
body[data-route="learn"] { --ill:url(img/vk/badges.webp); }
.cr-head-acts { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }

/* ---------------------------------------------------------------- Dashboard */
.cr-quick { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; margin:24px 0 0; }
.cr-quick a { display:flex; gap:12px; align-items:center; min-width:0; padding:16px; border-radius:12px; background:var(--surface); border:1px solid var(--line);
  color:var(--fg); transition:border-color .15s, transform .15s; }
.cr-quick a:hover { border-color:var(--accent); transform:translateY(-2px); color:var(--fg); }
.cr-quick svg.i { flex:none; width:38px; height:38px; padding:9px; border-radius:10px; background:rgba(239,35,60,.12); color:var(--accent); }
.cr-quick b { display:block; font:700 .95rem/1.2 var(--text); }
.cr-quick small { display:block; margin-top:3px; color:var(--muted); font-size:.76rem; line-height:1.35; }
@media (max-width:1280px) { .cr-quick { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:640px) { .cr-quick { grid-template-columns:minmax(0, 1fr); } }

.cr-proj .cr-acts { display:flex; flex-wrap:wrap; gap:6px; }
.cr-proj .tile-a { display:block; }

.cr-next .box-t { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.cr-next .meter { margin:4px 0 14px; }
.cr-next ol { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:10px; }
.cr-next li { display:flex; gap:10px; align-items:center; font-size:.9rem; }
.cr-next li svg.i { flex:none; width:18px; height:18px; padding:3px; border-radius:50%; background:var(--card-2); color:var(--muted); }
.cr-next li.done { color:var(--muted); }
.cr-next li.done span { text-decoration:line-through; text-decoration-color:var(--line); }
.cr-next li.done svg.i { background:var(--ok, #0ca30c); color:#fff; }
.cr-next a.small { display:inline-flex; align-items:center; gap:4px; font-size:.85rem; font-weight:700; }
.cr-next a.small svg.i { width:14px; height:14px; }

/* Listen für Server und Studios */
.cr-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.cr-srv { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; background:var(--surface); border:1px solid var(--line); }
.cr-srv-st { flex:none; display:grid; place-items:center; width:12px; height:12px; }
.cr-srv-st i { width:10px; height:10px; border-radius:50%; background:var(--muted-2, #6d7490); }
.cr-srv-st.on i { background:#0ca30c; box-shadow:0 0 8px rgba(12,163,12,.7); }
.cr-srv-t { flex:1; min-width:0; }
.cr-srv-t b { display:block; font:700 .98rem/1.2 var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr-srv-t small { display:block; margin-top:3px; color:var(--muted); font-size:.8rem; }
.cr-id { flex:none; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.74rem; color:var(--muted); }
@media (max-width:720px) { .cr-srv { flex-wrap:wrap; } .cr-id { order:3; max-width:none; flex:1 1 100%; } }
.cr-form { margin-top:4px; }
.cr-key { margin:10px 0; padding:10px 12px; border-radius:8px; background:var(--input, #141522); overflow-x:auto; font-size:.78rem; white-space:pre; }

/* Lernen: der Weg als Liste mit Status */
.cr-path { list-style:none; margin:24px 0 0; padding:0; display:grid; gap:10px; counter-reset:none; }
.cr-path li { display:grid; grid-template-columns:52px minmax(0, 15rem) minmax(0, 1fr) auto; gap:16px; align-items:center; padding:16px 18px;
  border-radius:12px; background:var(--surface); border:1px solid var(--line); }
.cr-path .cl-n { font:400 1.6rem/1 var(--display); color:var(--accent); }
.cr-path .cl-t b { display:block; font:700 1rem/1.2 var(--text); }
.cr-path .cl-t small { display:block; margin-top:4px; color:var(--muted); font:700 .7rem/1 var(--text); letter-spacing:.1em; text-transform:uppercase; }
.cr-path .cl-x { color:var(--muted); font-size:.9rem; line-height:1.45; }
.cr-path-a { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
@media (max-width:900px) {
  .cr-path li { grid-template-columns:40px minmax(0, 1fr); }
  .cr-path .cl-x, .cr-path-a { grid-column:2; justify-content:flex-start; }
}
.cr-tools { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.cr-tools .cr-tool { display:grid; gap:8px; align-content:start; color:var(--fg); }
.cr-tools .cr-tool b { font:700 1.05rem/1.2 var(--text); }
.cr-tools .cr-tool em { font-style:normal; font-weight:700; font-size:.85rem; color:var(--accent); display:inline-flex; align-items:center; gap:4px; }
.cr-tools .cr-tool em svg.i { width:14px; height:14px; }
.cr-tools .cr-tool:hover { color:var(--fg); box-shadow:inset 0 0 0 1px var(--accent); }
@media (max-width:1100px) { .cr-tools { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px) { .cr-tools { grid-template-columns:minmax(0, 1fr); } }
.cl-ico svg.i { width:40px; height:40px; padding:9px; border-radius:10px; background:rgba(239,35,60,.12); color:var(--accent); }

/* Status wie in der Doku (preview, planned) */
.cr-st { display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:6px; white-space:nowrap;
  font:700 .68rem/1 var(--text); letter-spacing:.08em; text-transform:uppercase; background:rgba(250,178,25,.14); color:#f3b53a; }
.cr-st small { font-weight:600; letter-spacing:.02em; text-transform:none; opacity:.85; }
.cr-st.planned { background:rgba(141,153,174,.16); color:var(--muted); }
.cr-st.draft { background:rgba(237,242,244,.1); color:#EDF2F4; }
:root[data-theme="light"] .cr-st { color:#9a6a00; }
:root[data-theme="light"] .cr-st.draft { color:#2B2D42; background:rgba(43,45,66,.08); }

.cr-auth { max-width:560px; margin:40px auto; display:grid; gap:16px; }

/* ---------------------------------------------------------------- Landing Page für Creator (auf .land aus landing.css) */
.cl .land-hero h1 .o { white-space:nowrap; }
.cl-console { width:min(520px, 42vw); margin:0; border-radius:14px; overflow:hidden; background:#151626; border:1px solid rgba(237,242,244,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(239,35,60,.08); transform:perspective(1400px) rotateY(-6deg); }
.cl-bar { display:flex; align-items:center; gap:7px; height:38px; padding:0 14px; background:#1d1f33; border-bottom:1px solid rgba(237,242,244,.06); }
.cl-bar i { width:10px; height:10px; border-radius:50%; background:#33364f; }
.cl-bar i:first-child { background:var(--accent); }
.cl-bar span { margin-left:10px; color:var(--muted); font-size:.78rem; }
.cl-body { padding:18px; display:grid; gap:14px; }
.cl-proj { display:grid; grid-template-columns:96px minmax(0, 1fr) auto; gap:14px; align-items:center; padding:12px; border-radius:10px; background:#1b1d30; }
.cl-key { display:block; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#22243a; }
.cl-key img { width:100%; height:100%; object-fit:cover; display:block; }
.cl-proj b { display:block; font:700 1.1rem/1.2 var(--text); color:#fff; }
.cl-proj small { display:block; margin-top:3px; color:var(--muted); font-size:.78rem; }
.cl-rows { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cl-rows li { display:grid; grid-template-columns:34px minmax(0, 1fr) auto; gap:12px; align-items:center; padding:10px 12px; border-radius:10px; background:#181a2c; }
.cl-rows li > svg.i { width:34px; height:34px; padding:8px; border-radius:9px; background:rgba(239,35,60,.12); color:var(--accent); }
.cl-rows b { display:block; color:#fff; font:700 .92rem/1.2 var(--text); }
.cl-rows small { display:block; margin-top:2px; color:var(--muted); font-size:.76rem; }
.cl-ok { display:inline-flex; align-items:center; gap:6px; color:#9ad79a; font:700 .74rem/1 var(--text); letter-spacing:.06em; text-transform:uppercase; }
.cl-ok svg.i { width:14px; height:14px; }
.cl-ok.live i { width:8px; height:8px; border-radius:50%; background:#0ca30c; box-shadow:0 0 8px rgba(12,163,12,.8); }
.cl-next { color:#ff8090; font:700 .74rem/1 var(--text); letter-spacing:.06em; text-transform:uppercase; }
.cl-note { margin:0; text-align:right; color:var(--muted-2); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
@media (max-width:1100px) {
  .cl .land-hero { grid-template-columns:minmax(0, 1fr); }
  .cl-console { width:100%; max-width:560px; transform:none; }
}

/* 01: der Weg als Raster mit Nummern */
.cl-path { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:12px; }
.cl-path a { position:relative; display:grid; align-content:start; gap:10px; height:100%; padding:18px 16px 16px; border-radius:12px; background:var(--card);
  border:1px solid var(--line); color:var(--fg); transition:border-color .15s, transform .15s; }
.cl-path a:hover { border-color:var(--accent); transform:translateY(-3px); }
.cl-path .cl-n { font:400 2rem/1 var(--display); color:var(--accent); }
.cl-path .cl-t b { display:block; font:700 1rem/1.2 var(--text); color:#fff; }
.cl-path .cl-t small { display:block; margin-top:5px; color:var(--muted); font:700 .68rem/1 var(--text); letter-spacing:.1em; text-transform:uppercase; }
.cl-path .cl-x { color:var(--muted); font-size:.86rem; line-height:1.45; }
.cl-path .cr-st { justify-self:start; }
@media (max-width:1200px) { .cl-path { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:760px) { .cl-path { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:480px) { .cl-path { grid-template-columns:minmax(0, 1fr); } }

/* 02: Werkzeuge */
.cl-tools { position:relative; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }
.cl-tool { display:grid; align-content:start; gap:12px; padding:24px 22px; border-radius:14px; background:rgba(15,16,24,.6); border:1px solid var(--line); color:var(--fg); }
.cl-tool:hover { border-color:var(--accent); }
.cl-tool b { font:400 1.7rem/1 var(--display); letter-spacing:.02em; text-transform:uppercase; color:#fff; }
.cl-tool span:not(.cl-ico) { color:var(--muted); line-height:1.5; }
.cl-tool em { font-style:normal; display:inline-flex; align-items:center; gap:6px; color:#ff8090; font-weight:700; }
.cl-tool em svg.i { width:15px; height:15px; }
@media (max-width:1100px) { .cl-tools { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px) { .cl-tools { grid-template-columns:minmax(0, 1fr); } }

/* 03: Bereiche des Hubs */
.cl-areas { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
.cl-area { display:flex; gap:14px; align-items:flex-start; padding:18px; border-radius:12px; background:var(--card); border:1px solid var(--line); color:var(--fg); }
.cl-area:hover { border-color:var(--accent); }
.cl-area b { display:block; font:700 1.02rem/1.2 var(--text); color:#fff; }
.cl-area small { display:block; margin-top:5px; color:var(--muted); font-size:.86rem; line-height:1.45; }
@media (max-width:1100px) { .cl-areas { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:560px) { .cl-areas { grid-template-columns:minmax(0, 1fr); } }

/* 04 und 05: Text links, Karten rechts */
.cl-split { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:48px; align-items:center; }
.cl-split .land-h { margin-bottom:0; }
.cl-cards { display:grid; gap:12px; }
.cl-card { display:grid; grid-template-columns:44px minmax(0, 1fr); gap:4px 16px; padding:20px; border-radius:14px; background:rgba(15,16,24,.6); border:1px solid var(--line); color:var(--fg); }
.cl-card:hover { border-color:var(--accent); }
.cl-card > svg.i { grid-row:span 2; width:44px; height:44px; padding:10px; border-radius:10px; background:rgba(239,35,60,.12); color:var(--accent); }
.cl-card b { font:400 1.6rem/1 var(--display); text-transform:uppercase; color:#fff; }
.cl-card span { color:var(--muted); line-height:1.5; }
.cl-earn { display:grid; gap:14px; justify-items:start; }
.cl-earn p { display:flex; gap:14px; padding:16px 18px; border-radius:12px; background:var(--card); border:1px solid var(--line); color:var(--muted); line-height:1.5; }
.cl-earn p b { color:#fff; }
.cl-earn p > svg.i { flex:none; width:22px; height:22px; color:var(--accent); margin-top:1px; }
@media (max-width:900px) { .cl-split { grid-template-columns:minmax(0, 1fr); gap:28px; } }