/* ==========================================================================
   Vaultbound Launchpad – Aufbau, Farben und Formen nach dem Lunar-Client-Stil
   (dunkle Flächen, schmale Icon-Leiste, grüne Hauptknöpfe, Inter-Schrift).
   Lädt nach launcher.css und überschreibt dessen Design.
   ========================================================================== */
:root {
  --bg: #16171b;
  --frame: #1b1c21;
  --side: #1b1c21;
  --panel: #1f2025;
  --panel-2: #26272d;
  --panel-3: #2d2e35;
  --line: rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);
  --text: #f4f5f7;
  --muted: #a3a6af;
  --dim: #6f727b;
  --hi: #ffffff;
  --green: #22c55e;
  --green-hi: #34dd78;
  --green-lo: #17a14c;
  --green-ink: #4ade80;
  --red: #ef4444;
  --radius: 10px;
  --body-font: 'Inter', system-ui, sans-serif;
  --label-font: 'Inter', system-ui, sans-serif;
  --title-font: 'Inter', system-ui, sans-serif;
  --chrome: linear-gradient(180deg, var(--green-hi), var(--green-lo));
  --glass: var(--panel-2);
  --glass-hover: var(--panel-3);
}
html, body { background: var(--bg); }
body { font: 14px/1.4 var(--body-font); letter-spacing: 0; }
body, button, input, select, textarea { font-family: var(--body-font) !important; }
.fa-solid, .fa-regular { font-family: 'Font Awesome 6 Free' !important; }
.fa-brands { font-family: 'Font Awesome 6 Brands' !important; }
body.font-mono { --body-font: 'JetBrains Mono', monospace; }
::selection { background: rgba(34,197,94,.35); }

/* ---------- Fensteraufbau: Titelzeile oben über alles, darunter Leiste + Inhalt ---------- */
#launcher { grid-template-columns: 76px 1fr; grid-template-rows: 46px minmax(0, 1fr); background: var(--bg); min-width: 1000px; }
.topbar { grid-column: 1 / 3; grid-row: 1; height: 46px; padding: 0 10px 0 14px; gap: 6px; background: var(--bg); border: 0; box-shadow: none; backdrop-filter: none; }
#sidebar { grid-column: 1; grid-row: 2; background: var(--bg); border: 0; padding: 4px 0 14px; width: 76px; }
.viewport { grid-column: 2; grid-row: 2; margin: 0 10px 10px 0; border-radius: 14px; background: var(--frame); border: 1px solid var(--line-soft); overflow: hidden; }
#bg { display: none; }

/* Titelzeile */
.header-emblem { order: 0; width: 22px; height: 22px; object-fit: contain; filter: none; image-rendering: auto; }
.app-title { order: 1; flex-direction: row; align-items: baseline; gap: 8px; }
.app-title strong { font: 600 14px var(--body-font) !important; letter-spacing: 0; text-transform: none; color: #fff; }
.app-title small { font: 500 11px var(--body-font); color: var(--dim); }
.history { order: 2; display: flex; gap: 2px; margin: 0 4px 0 10px; }
.history button { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: #c9ccd3; font-size: 12px; }
.history button:hover:not(:disabled) { background: var(--panel-2); color: #fff; }
.history button:disabled { color: #4b4e56; }
#page-crumb { order: 3; font: 500 14px var(--body-font); color: #d9dbe0; }
.top-actions { order: 4; gap: 6px; }
.topbar .chip, .running-chip { height: 30px; padding: 0 10px; gap: 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line-soft); box-shadow: none; font: 600 13px var(--body-font) !important; letter-spacing: 0; text-transform: none; color: #eef0f3; }
.topbar .chip:hover { background: var(--panel-2); border-color: var(--line); }
.topbar .chip.square { width: 32px; padding: 0; }
.topbar .chip .profile-head { width: 20px; height: 20px; border-radius: 4px; }
.running-chip { display: inline-flex; align-items: center; color: #d9dbe0; font-weight: 500 !important; }
.icon-plain { width: 32px; height: 30px; border-radius: 8px; color: #c9ccd3; font-size: 15px; }
.icon-plain:hover { background: var(--panel-2); color: #fff; }
.window-buttons { gap: 2px; margin-left: 6px; }
.window-buttons button { width: 28px; height: 28px; border-radius: 6px; color: #e4e6ea; font-size: 14px; }
.window-buttons button:hover { background: var(--panel-2); }
.window-buttons .close:hover { background: #c42b2b; color: #fff; }

/* Seitenleiste: nur Symbole, aktive Seite mit heller Fläche */
.brand { display: none; }
#navigation { gap: 8px; padding-top: 6px; }
.nav-item { position: relative; width: 52px; min-height: 52px; border-radius: 12px; border: 0; background: transparent; box-shadow: none; }
.nav-item span { display: none !important; }
.nav-item i { font-size: 22px; color: #c3c6ce; filter: none; }
.nav-item:hover { background: var(--panel); }
.nav-item.active { background: var(--panel-2); box-shadow: none; }
.nav-item.active i { color: #fff; filter: none; }
.nav-item::after, .side-add::after, .side-settings::after { content: attr(aria-label); position: absolute; left: 60px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border-radius: 6px; background: #0d0e10; color: #fff; font: 600 12px var(--body-font); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 30; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.nav-item:hover::after, .side-add:hover::after, .side-settings:hover::after { opacity: 1; }
.side-add { position: relative; margin-top: auto; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; color: #c3c6ce; font-size: 22px; border-top: 0; }
.side-add:hover { background: var(--panel); color: #fff; }
.side-divider { width: 40px; height: 1px; margin: 6px auto; background: var(--line); }
.side-settings { position: relative; margin: 4px 0 0; width: 52px; height: 52px; border-radius: 12px; color: #c3c6ce; font-size: 22px; }
.side-settings span { display: none; }
.side-settings:hover, .side-settings.active { background: var(--panel); color: #fff; }

/* ---------- Grundbausteine ---------- */
.btn, .tool-btn, .tab, .icon-btn, .btn.outline, .btn.small, .segmented button, .pose, .font-option, .effect, .custom-color, .launch-more {
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 8px; box-shadow: none; color: #eef0f3;
  font: 600 13px var(--body-font) !important; letter-spacing: 0; text-transform: none; text-shadow: none;
}
.btn:hover, .tool-btn:hover, .tab:hover, .icon-btn:hover, .btn.outline:hover, .btn.small:hover, .segmented button:hover, .pose:hover, .font-option:hover, .effect:hover { background: var(--panel-3); border-color: var(--line); color: #fff; filter: none; }
.btn { height: 38px; padding: 0 16px; }
.btn.small { height: 34px; padding: 0 14px; }
.btn.outline { height: 42px; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--panel-2); }
.btn.danger:hover { background: #3b1518; border-color: #7f1d1d; color: #fecaca; }
/* Hauptaktionen grün */
.btn.hot, .tab.active, .segmented button.active, .pose.active, .launch-main, .tool-btn.active {
  background: linear-gradient(180deg, var(--green-hi), var(--green-lo)) !important; color: #fff !important; border: 1px solid #3ee683 !important;
  box-shadow: 0 6px 18px -8px rgba(34,197,94,.6), inset 0 1px 0 rgba(255,255,255,.25) !important; text-shadow: 0 1px 1px rgba(0,0,0,.25) !important;
}
.btn.hot:hover, .tab.active:hover, .segmented button.active:hover, .launch-main:hover { filter: brightness(1.07); }
.btn.hot:active, .launch-main:active { transform: translateY(1px); filter: brightness(.96); }
.icon-btn { width: 38px; height: 38px; }
.switch { width: 40px; height: 22px; border-radius: 999px; background: #3a3b42; border: 0; padding: 3px; }
.switch i { width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.switch[aria-checked="true"] { background: var(--green) !important; border: 0 !important; }
.switch[aria-checked="true"] i { background: #fff !important; transform: translateX(18px); }
.field, .search, .searchbar, .path-row input, select.field { background: var(--panel) !important; border: 1px solid var(--line-soft) !important; border-radius: 10px !important; color: #fff; font: 500 14px var(--body-font) !important; }
.field:focus, .searchbar:focus-within, .search:focus-within { border-color: rgba(255,255,255,.22) !important; }
.searchbar input, .search input { font: 500 15px var(--body-font) !important; color: #fff; }
.searchbar input::placeholder, .search input::placeholder { color: #8a8d96; }
.range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--green) var(--fill), #3a3b42 var(--fill)); border-radius: 4px; }
.range::-webkit-slider-thumb { background: #fff; border: 0; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.list-empty { color: var(--muted); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #3a3b42; border-radius: 8px; border: 2px solid var(--frame); }

/* ---------- Launchpad (Startseite) ---------- */
#main[data-page="play"] { display: block; }
.launchpad-home { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 396px; gap: 0; }
.launchpad-main { min-width: 0; overflow-y: auto; padding: 16px 18px 20px 18px; }
.welcome-line { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 12px; font: 500 17px var(--body-font); color: #c8cad1; }
.welcome-account { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font: 700 17px var(--body-font) !important; color: #fff; }
.welcome-account .mini-head { width: 22px; height: 22px; border-radius: 4px; display: inline-block; background-size: 800% 800%, 800% 800%; background-position: 71.4286% 14.2857%, 14.2857% 14.2857%; image-rendering: pixelated; background-repeat: no-repeat; background-image: url(assets/steve.png), url(assets/steve.png); }
.welcome-account .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.welcome-account .status-dot.on { background: var(--green); }
.welcome-account .fa-angle-down { font-size: 12px; color: var(--muted); }
.online-pill { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--body-font); color: #e6e8ec; }
.online-pill i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(34,197,94,.7); }
.hero-banner { position: relative; height: 312px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background:
  radial-gradient(1.5px 1.5px at 12% 22%, #fff9, transparent 60%), radial-gradient(1px 1px at 28% 64%, #fff7, transparent 60%), radial-gradient(1.5px 1.5px at 44% 18%, #fffa, transparent 60%),
  radial-gradient(1px 1px at 61% 40%, #fff8, transparent 60%), radial-gradient(1.5px 1.5px at 74% 12%, #fff9, transparent 60%), radial-gradient(1px 1px at 86% 58%, #fff7, transparent 60%),
  radial-gradient(1px 1px at 92% 24%, #fff8, transparent 60%), radial-gradient(1px 1px at 52% 78%, #fff6, transparent 60%), radial-gradient(1.5px 1.5px at 6% 80%, #fff7, transparent 60%),
  radial-gradient(ellipse 80% 70% at 50% 120%, #2b3a63 0%, transparent 70%), linear-gradient(180deg, #07080d 0%, #0d1220 55%, #172036 100%); }
.hero-banner .skin-holder { position: absolute; left: 3%; top: 4%; width: 300px; height: 300px; cursor: grab; }
.hero-logo { position: absolute; right: 6%; top: 50%; width: 150px; height: 150px; transform: translateY(-50%) rotate(12deg); filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); image-rendering: auto; animation: hero-float 6s ease-in-out infinite; }
@keyframes hero-float { 50% { transform: translateY(calc(-50% - 10px)) rotate(8deg); } }
body.reduce-motion .hero-logo { animation: none; }
.hero-launch { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; }
.launch-game { position: relative; width: 324px; height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 8px;
  background: linear-gradient(180deg, #33df7c 0%, #20bd5f 100%); border: 1px solid #5cf09a; box-shadow: 0 10px 30px -10px rgba(34,197,94,.8), inset 0 1px 0 rgba(255,255,255,.35); color: #fff; transition: filter .12s, transform .08s; }
.launch-game:hover { filter: brightness(1.06); }
.launch-game:active { transform: translateY(1px); }
.launch-game strong { font: 800 26px var(--body-font) !important; letter-spacing: .3px; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.launch-game small { display: flex; align-items: center; gap: 6px; font: 600 13px var(--body-font) !important; color: #effff5; }
.launch-game small img { width: 14px; height: 14px; image-rendering: auto; }
.launch-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; color: #eafff1; font-size: 12px; }
.launch-caret:hover { background: rgba(0,0,0,.15); }
.hero-settings { position: absolute; right: 14px; bottom: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(255,255,255,.92); color: #16171b; font-size: 13px; }
.hero-settings:hover { background: #fff; }
.news-heading { display: flex; align-items: center; justify-content: space-between; margin: 20px 2px 12px; }
.news-heading h2 { margin: 0; font: 700 19px var(--body-font); color: #fff; }
.news-heading h2 span { color: #c8cad1; font-weight: 600; }
.news-heading button { display: flex; align-items: center; gap: 6px; font: 500 13px var(--body-font) !important; color: #c8cad1; }
.news-heading button:hover { color: #fff; }
.news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.news-tile { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 8; background: var(--panel); transition: transform .15s, border-color .15s; }
.news-tile:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.25); }
.news-tile canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.news-unread { position: absolute; left: 10px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 2px solid #0f2a1a; }
.news-arrow { position: absolute; right: 10px; bottom: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #16171b; font-size: 13px; }
.launchpad-rail { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 16px 0; min-height: 0; overflow-y: auto; }
.server-shortcuts { display: flex; gap: 6px; padding: 8px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-soft); }
.server-shortcuts button { flex: 1; height: 44px; max-width: 58px; display: grid; place-items: center; border-radius: 10px; color: #d7d9de; font-size: 20px; }
.server-shortcuts button:hover { background: var(--panel-2); color: #fff; }
.launchpad-friends { padding: 4px 6px; }
.launchpad-friends header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.launchpad-friends h2 { margin: 0; font: 700 17px var(--body-font); color: #fff; }
.launchpad-friends h2 span { color: #c8cad1; font-weight: 600; }
.launchpad-friends header button { display: flex; align-items: center; gap: 6px; font: 500 13px var(--body-font) !important; color: #c8cad1; }
.launchpad-friends header button:hover { color: #fff; }
.friend-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; }
.friend-row img { width: 26px; height: 26px; border-radius: 4px; }
.friend-row strong { font: 600 14px var(--body-font); }
.friend-row small { display: block; color: var(--muted); font-size: 12px; }
.friend-row:hover { background: var(--panel); }
.friends-empty p { margin: 0 0 10px; color: var(--muted); }
.rail-card { margin-top: auto; padding: 16px; border-radius: 12px; background: linear-gradient(160deg, #1f2b22 0%, #1f2025 60%); border: 1px solid var(--line-soft); }
.rail-card img { width: 34px; height: 34px; image-rendering: auto; margin-bottom: 8px; }
.rail-card h3 { margin: 0 0 4px; font: 700 15px var(--body-font); }
.rail-card p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.rail-card .btn { width: 100%; }

/* ---------- Mods / Entdecken ---------- */
.mods-page { grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; padding: 14px 14px 0 16px; }
.mods-main .tabs { display: none; }
.mods-main .toolbar { gap: 10px; margin: 0 0 6px; padding: 0; border: 0; }
.mods-main .searchbar { flex: 1; width: auto; height: 46px; padding: 0 14px; gap: 10px; }
.mods-main .searchbar select { background: transparent; border: 0; outline: none; color: #fff; font: 600 14px var(--body-font) !important; cursor: pointer; padding-right: 4px; }
.mods-main .searchbar select option { background: #1f2025; }
.mods-main .searchbar .divider { width: 1px; height: 22px; background: var(--line); }
.mod-sort-control { height: 46px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-soft); color: #d7d9de; }
.mod-sort-control select { background: transparent; border: 0; outline: none; color: #fff; font: 600 14px var(--body-font) !important; cursor: pointer; text-transform: none; }
.mod-sort-control select option { background: #1f2025; }
.mods-main .tool-btn.square { display: none; }
.mods-page .sources { display: none; }
.filters .sources { display: flex; }
.target-bar { margin: 6px 0 4px; padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-soft); font: 500 13px var(--body-font); }
.target-bar select { font: 600 13px var(--body-font) !important; border-radius: 8px; background: var(--panel-2); border-color: var(--line-soft); }
.mod-list { border: 0; background: transparent; margin-bottom: 0; padding-right: 6px; }
.mod-row { gap: 18px; padding: 16px 6px 16px 0; border-bottom: 1px solid var(--line-soft); background: transparent; }
.mod-icon { width: 86px; height: 86px; border-radius: 10px; background: var(--panel); }
.mod-copy h3 { font: 700 20px var(--body-font); margin: 2px 0 2px; }
.mod-title { font: 700 20px var(--body-font) !important; color: #fff; }
.mod-title:hover { color: #fff; text-decoration: underline; }
.mod-copy p { font: 500 14px/1.4 var(--body-font); color: #c3c6ce; margin: 0 0 10px; -webkit-line-clamp: 2; }
.tags { gap: 8px; align-items: center; }
.tags span { padding: 0; background: transparent !important; font: 600 13px var(--body-font); color: #d7d9de; display: inline-flex; align-items: center; gap: 5px; }
.tags span i { color: var(--muted); font-size: 12px; }
.tags .tag-dot { color: var(--dim); }
.mod-author { color: #fff !important; }
.mod-side { justify-content: space-between; padding: 2px 0; }
.downloads { font: 500 13px var(--body-font); color: #c3c6ce; display: flex; align-items: center; gap: 6px; }
.downloads i { font-size: 12px; color: var(--muted); }
.split { gap: 8px; }
.btn.small.view-mod { height: 36px; padding: 0 16px; background: var(--panel-2); }
.btn.small.install-mod, .btn.small.is-installed { height: 36px; padding: 0 16px; background: #173322 !important; border: 1px solid #1f5c38 !important; color: var(--green-ink) !important; }
.btn.small.install-mod:hover { background: #1c4029 !important; color: #86efac !important; }
.btn.small.is-installed { background: #1b2a21 !important; color: #86efac !important; }
.btn.small.more { width: 36px; height: 36px; padding: 0; background: var(--panel-2); }
.btn.small.blocked { height: 36px; background: #2a1719 !important; border-color: #5b2227 !important; color: #fca5a5 !important; }
.filters { padding: 0 2px 20px 0; display: flex; flex-direction: column; gap: 4px; }
.filters .sources { display: flex; gap: 6px; padding: 5px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line-soft); margin-bottom: 14px; }
.filters .source { flex: 1; height: 44px; justify-content: center; border-radius: 8px; font: 700 14px var(--body-font) !important; color: #d7d9de; text-transform: none; letter-spacing: 0; background: transparent; }
.filters .source b { width: 16px; height: 16px; }
.filters .source.active { background: var(--panel-3); color: #fff; }
.filters .source.modrinth.active b { color: #1bd96a; }
.filters .source.curseforge.active b { color: #f16436; }
.filter, .filter.open { border: 0 !important; background: transparent !important; padding: 0 0 8px; }
.filter-head { min-height: 0; padding: 6px 2px 10px; font: 700 15px var(--body-font) !important; color: #fff; text-transform: none; letter-spacing: 0; cursor: default; }
.filter-head em { font: 600 13px var(--body-font); color: var(--green-ink); }
.filter.locked .filter-head { color: #fff; }
.filter-body { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: none; padding: 0; overflow: visible; }
.filter-option { height: 36px; padding: 0 12px; gap: 8px; border-radius: 8px; background: var(--panel-2); color: #e4e6ea; font: 600 13px var(--body-font) !important; justify-content: flex-start; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.filter-option i { width: auto; color: var(--muted); font-size: 12px; }
.filter-option:hover { background: var(--panel-3); }
.filter-option.active { background: #173322; color: #86efac; box-shadow: inset 0 0 0 1px #1f5c38; }
.filter-option.active i { color: var(--green-ink); }
.filter-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; font: 600 13px var(--body-font) !important; color: #c8cad1; }
.filter-more:hover { color: #fff; }
.filter-reset { margin-left: auto; color: var(--muted); }
.clear-filters { width: 100%; }
.key-box { border-radius: 14px; background: var(--panel); border-color: var(--line-soft); }

/* ---------- Versionen / Profile ---------- */
.library { padding: 18px 20px 0; }
.toolbar { border-bottom-color: var(--line-soft); }
.searchbar { height: 44px; }
.tool-btn { height: 44px; }
.list-row, .profile-row { border-radius: 12px; background: var(--panel); border: 1px solid var(--line-soft); }
.list-row.selected { border-color: rgba(34,197,94,.45); box-shadow: inset 3px 0 0 var(--green); }
.profile-row .copy strong { font: 700 18px var(--body-font); }
.profile-row .copy strong em, .skin-card .badge { font: 700 10px var(--body-font); color: var(--green-ink); border: 1px solid #1f5c38; background: #173322; border-radius: 6px; text-transform: uppercase; letter-spacing: .4px; }
.profile-row .copy small { font: 500 13px var(--body-font); }
.profile-icon { border-radius: 12px; }
.loader-tag.fabric { color: #e3c89c; } .loader-tag.quilt { color: #c4a6ff; } .loader-tag.forge { color: #93b8ff; } .loader-tag.neoforge { color: #ffb37a; }

/* Profil-Seite */
.crumbs { padding: 12px 22px; border-color: var(--line-soft); font: 500 14px var(--body-font); }
.crumb-back { font: 600 13px var(--body-font) !important; text-transform: none; }
.profile-top { padding: 20px 22px 14px; }
.profile-icon.big { width: 92px; height: 92px; border-radius: 16px; }
.profile-title h1 { font: 800 32px var(--body-font); letter-spacing: 0; }
.lock-chip { border-radius: 8px; background: var(--panel); font: 600 13px var(--body-font); }
.profile-actions .launch-main { width: 200px; height: 52px; border-radius: 8px; }
.profile-actions .launch-main strong { font: 800 17px var(--body-font) !important; letter-spacing: .3px; text-transform: uppercase; }
.icon-btn.big { width: 52px; height: 52px; }
.stats { padding: 0 22px 16px; border-color: var(--line-soft); }
.stat { border-radius: 12px; background: var(--panel); border-color: var(--line-soft); }
.stat small { font: 600 11px var(--body-font); letter-spacing: .4px; }
.stat b { font: 700 16px var(--body-font); }
.profile-main { padding: 14px 16px 0 22px; }
.content-card { border-radius: 12px; background: var(--panel); border-color: var(--line-soft); }
.content-card .mod-icon { width: 54px; height: 54px; border-radius: 10px; }
.content-copy strong { font: 700 16px var(--body-font); }
.content-copy small { font: 500 13px var(--body-font); }
.profile-side { border-color: var(--line-soft); }
.side-label { font: 700 12px var(--body-font); letter-spacing: .5px; }
.side-item { border-radius: 8px; font: 600 14px var(--body-font) !important; text-transform: none; letter-spacing: 0; }
.side-item.active { background: var(--panel-2); border-color: transparent; }
.update-btn { background: #173322 !important; border-color: #1f5c38 !important; color: var(--green-ink) !important; }
.shot, .log-row { border-radius: 10px; background: var(--panel); border-color: var(--line-soft); }

/* Skins / Capes */
.card-grid { grid-template-columns: repeat(auto-fill, 190px); gap: 14px; }
.skin-card, .cape-card { border-radius: 14px; background: var(--panel); border: 1px solid var(--line-soft); }
.skin-card:hover { border-color: rgba(255,255,255,.22); }
.skin-card strong, .cape-card strong { font: 700 16px var(--body-font); }
.skin-card.add { border-style: dashed; border-color: var(--line); }
.skin-card.add .plus { background: var(--green); color: #fff; }
.cape-card.selected { border-color: rgba(34,197,94,.6); }
.page-note { color: var(--muted); }

/* ---------- Fenster: Einstellungen, Dialoge, Popover, Hinweise ---------- */
.modal-backdrop { background: rgba(5,6,8,.65); backdrop-filter: blur(4px); }
.settings-modal { border-radius: 16px; background: var(--frame); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.settings-modal > header { background: var(--frame); border-bottom: 1px solid var(--line-soft); }
.settings-modal > header strong { font: 700 18px var(--body-font) !important; text-transform: none; letter-spacing: 0; }
.settings-modal > header .open-dir { font: 600 13px var(--body-font) !important; text-transform: none; color: var(--muted); }
.settings-nav { border-color: var(--line-soft); }
.cat { border-radius: 8px; font: 600 14px var(--body-font) !important; text-transform: none; letter-spacing: 0; color: #d7d9de; }
.cat i { color: var(--muted); }
.cat.active { background: var(--panel-2); color: #fff; box-shadow: none; }
.cat.active i { color: var(--green-ink); }
.subs { border-color: var(--line-soft); }
.subs button { font: 500 13px var(--body-font) !important; text-transform: none; letter-spacing: 0; color: var(--dim); }
.subs button.active { color: #fff; }
.subs button.active::before { background: var(--green); }
.sub-head { font: 700 15px var(--body-font) !important; text-transform: none; letter-spacing: 0; color: #fff; border-color: var(--line-soft); }
.sub-head i { color: var(--green-ink); }
.row { border-color: var(--line-soft); }
.row-text strong { font: 600 15px var(--body-font); }
.row-text p, .sub-desc { font: 500 13px var(--body-font); }
.swatch { border-radius: 8px; }
.effect.active { border-color: rgba(34,197,94,.6); background: var(--panel-3); }
.effect.active::after { background: var(--green); color: #fff; }
.popover, #dialog, .update-card { border-radius: 14px; background: var(--frame); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.popover .label { font: 700 11px var(--body-font); text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.pop-item { border-radius: 8px; font: 500 14px var(--body-font) !important; }
.pop-item:hover { background: var(--panel-2); }
.pop-item.selected { color: var(--green-ink); }
.dialog-heading { background: var(--frame); border-bottom: 1px solid var(--line-soft); }
.dialog-heading strong { font: 700 17px var(--body-font) !important; text-transform: none; letter-spacing: 0; }
.dialog-text { color: #d7d9de; }
.rpc-field span { font: 600 12px var(--body-font); text-transform: none; color: var(--muted); }
.choice { border-radius: 12px; background: var(--panel); border-color: var(--line-soft); }
.choice.big { border-color: var(--line); }
.choice strong { font: 700 17px var(--body-font); }
.choice.big strong { font-size: 22px; }
.choice-icon { border-radius: 10px; background: #173322; color: var(--green-ink); }
.or { font: 600 11px var(--body-font); text-transform: uppercase; }
#toast { border-radius: 10px; background: #26272d; border: 1px solid var(--line); font: 600 14px var(--body-font); box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.update-backdrop.boot { background: radial-gradient(ellipse 60% 55% at 50% 42%, #20222a 0%, #16171b 60%, #111215 100%); }
.update-card h2 { font: 800 24px var(--body-font) !important; letter-spacing: 0; }
.update-kicker { font: 700 12px var(--body-font); letter-spacing: .5px; color: var(--green-ink); }
.update-bar { border-radius: 8px; border-color: var(--line); background: var(--panel); }
.update-bar i { border-radius: 2px; background: #2d2e35; }
.update-bar i.on { background: var(--green) !important; box-shadow: none !important; }
.update-notes { border-radius: 10px; border-color: var(--line-soft); }
.library-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.library-heading .eyebrow { display: block; font: 700 12px var(--body-font); text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 4px; }
.library-heading h1 { margin: 0; font: 800 28px var(--body-font); color: #fff; }
.library-heading p { margin: 0; color: var(--muted); font: 500 14px var(--body-font); }
.library .tabs { margin-bottom: 14px; }
.library .tab { height: 34px; padding: 0 14px; }

/* ---------- Versionen: Karten mit Symbol ---------- */
.inst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; overflow-y: auto; padding: 2px 4px 24px 0; align-content: start; }
.inst-card { position: relative; display: flex; flex-direction: column; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-soft); overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; text-align: left; }
.inst-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.18); box-shadow: 0 16px 30px -18px rgba(0,0,0,.8); }
.inst-card.selected { border-color: rgba(34,197,94,.55); box-shadow: 0 0 0 1px rgba(34,197,94,.25); }
.inst-top { position: relative; height: 128px; display: grid; place-items: center; cursor: pointer; background: radial-gradient(ellipse 70% 80% at 50% 60%, rgba(255,255,255,.07), transparent 70%), linear-gradient(180deg, #24252b, #1c1d22); border-bottom: 1px solid var(--line-soft); }
.inst-icon { display: inline-block; width: 76px; height: 76px; border-radius: 14px; background-size: cover; background-position: center; box-shadow: 0 10px 24px -8px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .2s; }
.inst-icon.pixel { image-rendering: pixelated; }
.inst-card:hover .inst-icon { transform: scale(1.06) rotate(-2deg); }
.inst-icon.big { width: 92px; height: 92px; border-radius: 16px; }
.inst-top .star { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: rgba(0,0,0,.35); color: #8b8e97; font-size: 13px; }
.inst-top .star.on, .inst-top .star:hover { color: #facc15; }
.inst-active { position: absolute; top: 12px; left: 12px; padding: 3px 8px; border-radius: 6px; font: 700 10px var(--body-font); font-style: normal; text-transform: uppercase; letter-spacing: .4px; color: var(--green-ink); background: #173322; border: 1px solid #1f5c38; }
.inst-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 10px; cursor: pointer; min-width: 0; }
.inst-body strong { font: 700 17px var(--body-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inst-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inst-chips span { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 6px; background: var(--panel-2); font: 600 12px var(--body-font); color: #dcdee3; }
.inst-chips i { font-size: 11px; color: var(--muted); }
.inst-body small { display: flex; align-items: center; gap: 6px; color: var(--muted); font: 500 12px var(--body-font); }
.inst-body small i { font-size: 11px; }
.inst-actions { display: flex; gap: 6px; padding: 0 14px 14px; margin-top: auto; }
.inst-actions .inst-play { flex: 1; height: 38px; }
.inst-actions .icon-btn { width: 38px; height: 38px; flex: none; }
.inst-add { align-items: center; justify-content: center; gap: 6px; min-height: 270px; border-style: dashed; border-color: var(--line); background: transparent; color: #e4e6ea; }
.inst-add:hover { background: var(--panel); }
.inst-add-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #173322; color: var(--green-ink); font-size: 22px; margin-bottom: 6px; }
.inst-add strong { font: 700 16px var(--body-font); }
.inst-add small { color: var(--muted); font: 500 13px var(--body-font); }
.profile-library .toolbar { margin-bottom: 14px; }
.icon-pick { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.icon-choice { aspect-ratio: 1; border-radius: 8px; background-size: cover; background-position: center; image-rendering: pixelated; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); cursor: pointer; display: grid; place-items: center; color: var(--muted); }
.icon-choice:hover { border-color: rgba(255,255,255,.3); }
.icon-choice.active { border-color: var(--green); box-shadow: 0 0 0 2px rgba(34,197,94,.3); }
.icon-choice.upload { background-color: var(--panel-2); image-rendering: auto; }
.skin-variant { margin: 0 0 4px; }
.skin-variant button { flex: 1; justify-content: center; }
.cape-card { cursor: pointer; font: inherit; color: inherit; }
.cape-card:hover:not(:disabled) { border-color: rgba(255,255,255,.25); }
.cape-card:disabled { cursor: default; }
.cape-card small { color: var(--muted); }
.cape-card.selected small { color: var(--green-ink); }