/* ═══════════════════════════════════════════════════
   styles.css — DevForge global stylesheet
   ═══════════════════════════════════════════════════
   Single stylesheet for the whole app. Organized top-to-bottom in
   roughly the same order screens appear in index.html: base/reset,
   auth, topbar, home tiles, projects, upload, search, settings,
   profile, contacts, messages/chat, discover, tags, sandbox, support.
   Section headers below (/* NAME */) mark each area — search for them
   to jump around quickly.
*/
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg:      #0a0e1a;
      --surface: #111827;
      --card:    #1a2035;
      --border:  #1e2d4a;
      --cyan:    #00d4ff;
      --cdim:    rgba(0,212,255,0.10);
      --purple:  #7c6dfa;
      --text:    #e8eaf0;
      --muted:   #6b7a99;
      --red:     #ff6b6b;
      --green:   #00e676;
      --mono:    'Space Mono', monospace;
      --legal-footer-h: 34px;
    }
    html, body { height: 100%; }
    body { background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.6; overflow-x: hidden; }

    .hidden { display: none !important; }
    .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.2rem; border-radius: 8px; font-weight: 600; font-size: 0.88rem; cursor: pointer; border: none; font-family: inherit; transition: all 0.18s; }
    .btn-primary { background: var(--cyan); color: #0a0e1a; }
    .btn-primary:hover { background: #33dcff; transform: translateY(-1px); }
    .btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
    .btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
    .btn-danger { background: transparent; color: var(--red); border: 1px solid rgba(255,107,107,0.3); }
    .btn-danger-solid { background: var(--red); color: #fff; border: 1px solid var(--red); }
    .btn-danger-solid:hover { background: #ff8080; }
    .btn-danger:hover { background: rgba(255,107,107,0.1); }
    .tag { display: inline-block; font-family: var(--mono); font-size: 0.65rem; color: var(--purple); background: rgba(124,109,250,0.13); padding: 0.15rem 0.45rem; border-radius: 4px; margin: 0.15rem 0.2rem 0.15rem 0; }
    input, textarea, select { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit; font-size: 0.92rem; padding: 0.65rem 0.9rem; width: 100%; outline: none; transition: border-color 0.18s; resize: vertical; }
    input:focus, textarea:focus, select:focus { border-color: var(--cyan); }
    input::placeholder, textarea::placeholder { color: var(--muted); }
    select option { background: var(--card); }
    label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.3rem; }
    .field { margin-bottom: 0.9rem; }
    .error-msg { color: var(--red); font-size: 0.78rem; margin-top: 0.4rem; }

    /* SCREENS */
    .screen { display: none; min-height: 100vh; }
    .screen.active { display: flex; flex-direction: column; padding-bottom: 6rem; min-height: 100vh; }

    /* CENTERED SCREENS (auth, verify) */
    .screen-centered { align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 1rem; }
    canvas.bg-matrix-canvas { position: absolute; inset: 0; opacity: 0.15; pointer-events: none; }

    /* AUTH / VERIFY BOX */
    .auth-box {
      position: relative; z-index: 2;
      background: var(--card); border: 1px solid var(--border);
      border-radius: 20px; padding: 2.5rem; width: 100%; max-width: 400px;
    }
    .auth-logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.7rem; color: var(--cyan); }
    .auth-logo span { color: var(--text); }
    .auth-tagline { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); margin-bottom: 2rem; }
    .auth-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.75rem; }
    .auth-tab { flex: 1; padding: 0.55rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.18s; }
    .auth-tab.active { background: var(--cyan); color: #0a0e1a; border-color: var(--cyan); }
    .auth-form { display: none; }
    .auth-form.active { display: block; }

    /* VERIFY BOX */
    .verify-icon { font-size: 3rem; margin-bottom: 1rem; }
    .verify-box h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.4rem; margin-bottom: 0.5rem; }
    .verify-box p { color: var(--muted); font-size: 0.88rem; margin-bottom: 1.5rem; line-height: 1.6; }
    .otp-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
    .otp-input { width: 48px !important; height: 52px; text-align: center; font-size: 1.3rem; font-family: var(--mono); font-weight: 700; padding: 0; flex-shrink: 0; }
    .resend-link { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); text-align: center; margin-top: 1rem; }
    .resend-link a { color: var(--cyan); cursor: pointer; }

    /* TOP BAR */
    .topbar {
      position: sticky; top: 0; z-index: 50; height: 54px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 1.5rem;
      background: rgba(10,14,26,0.92); backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border); flex-shrink: 0;
    }
    .topbar-left { display: flex; align-items: center; gap: 0.85rem; }
    .back-btn { background: none; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 0.82rem; padding: 0.3rem 0.75rem; cursor: pointer; font-family: inherit; transition: all 0.15s; }
    .back-btn:hover { border-color: var(--cyan); color: var(--cyan); }
    .topbar-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.05rem; }
    .topbar-logo { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--cyan); cursor: pointer; }
    .topbar-logo span { color: var(--text); }
    .topbar-user { font-family: var(--mono); font-size: 0.75rem; color: var(--cyan); }
    .page-content { flex: 1; padding: 2rem 1.5rem 4rem; max-width: 1100px; width: 100%; margin: 0 auto; min-height: 0; }

    /* AD SLOTS */
    .ad-slot {
      width: 100%; background: var(--surface);
      border: 1px dashed var(--border); border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: var(--muted); font-family: var(--mono); font-size: 0.7rem;
      letter-spacing: 0.08em;
    }
    .ad-slot-banner { height: 90px; margin-bottom: 1.5rem; }
    .ad-slot-sidebar { height: 250px; }
    /*
      ADSENSE: Replace .ad-slot divs with:
      <ins class="adsbygoogle"
           style="display:block"
           data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
           data-ad-slot="YOUR_AD_SLOT_ID"
           data-ad-format="auto"
           data-full-width-responsive="true"></ins>
      <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
    */
    .house-ad { display: flex; align-items: center; gap: 0.7rem; width: 100%; height: 100%; padding: 0 1.2rem; cursor: pointer; letter-spacing: normal; }
    .house-ad:hover { background: var(--cdim); border-radius: 9px; }
    .house-ad-tag { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; color: var(--cyan); border: 1px solid rgba(0,212,255,0.3); border-radius: 4px; padding: 0.15rem 0.4rem; flex-shrink: 0; }
    .house-ad-text { font-size: 0.82rem; color: var(--text); text-align: left; }

    /* SIDEBAR AD RAIL
       Desktop-only right-side ad column flanking .page-content. Opt-in
       per screen via .page-with-sidebars (wraps topbar's content area) —
       screens that don't want side ads (e.g. project detail/workspace,
       auth, legal pages) simply don't use the wrapper, so no JS branching
       needed to hide them per-screen. Below the breakpoint there isn't
       enough room for the rail + a readable content column, so it
       collapses out entirely rather than squeezing anything — no
       tablet/mobile ad real estate, by design (see ads.js header
       comment).

       Left rail was removed per feedback: it read as sitting too close
       to the content (cut into reading comfort) even after the fixed-
       gap grid fix made left/right symmetric — sometimes the fix isn't
       "adjust the number," it's "there shouldn't be a number there."
       Right rail only now.
    */
    .page-with-sidebars {
      display: grid;
      /* FIX (2026-07-25, live gefunden beim Mobile-Check): war fest
         "minmax(0, 1100px) 160px" — die 160px-Spalte für die Sidebar-Ad
         blieb IMMER reserviert, auch weit unterhalb der 1360px-Grenze,
         ab der .sidebar-rail unten überhaupt erst sichtbar wird (display
         war nur am Kind getoggelt, nie an der Grid-Spalte selbst). Auf
         einem 375px-Handy blieben dadurch nur ~183px für den ganzen
         Seiteninhalt übrig — Text/Tiles brachen absurd schmal um. Default
         jetzt einspaltig, die zweite Spalte kommt erst mit derselben
         Media Query wie .sidebar-rail unten dazu. */
      grid-template-columns: minmax(0, 1100px);
      justify-content: center;
      column-gap: 2rem;
      flex: 1; width: 100%;
      padding: 2rem 1.5rem;
    }
    .page-with-sidebars .page-content { padding: 0; margin: 0; min-width: 0; max-width: none; }
    .sidebar-rail {
      display: none; /* shown only past the breakpoint below */
      flex-direction: column; gap: 1.25rem;
      width: 160px;
      position: sticky; top: 74px; /* topbar height (54px) + breathing room */
    }
    .ad-slot-sidebar-rail {
      width: 100%; min-height: 250px; height: auto;
      padding: 1rem 0.85rem;
      display: flex; align-items: stretch; justify-content: center;
    }
    .ad-slot-sidebar-rail .house-ad {
      flex-direction: column; align-items: flex-start; justify-content: center;
      text-align: left; padding: 0; gap: 0.6rem;
    }
    .ad-slot-sidebar-rail .house-ad-text { font-size: 0.8rem; line-height: 1.5; }
    /* Rail needs at least ~1000px of content room to not feel cramped
       (content can shrink from its 1100px ideal down to this floor
       before the rail hides entirely): 160px rail + 2×32px gap (2rem
       column-gap, grid only has one gap now but kept consistent with
       the outer padding math) + 1000px content + 2×24px outer padding
       ≈ 1232px — comfortably under a 1366px laptop panel, so the rail
       shows on virtually any real desktop monitor. */
    @media (min-width: 1360px) {
      .sidebar-rail { display: flex; }
      .page-with-sidebars { grid-template-columns: minmax(0, 1100px) 160px; }
    }

    /* GUEST MODE — small dismissible browsing notice, not a full overlay
       (see initGuestApp() in auth.js / navigateTo()'s guest allowlist in
       router.js). Sits inline above the home content, never blocks it. */
    .guest-banner {
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      background: var(--card-bg, rgba(255,255,255,0.04)); border: 1px solid var(--border, rgba(255,255,255,0.1));
      border-radius: 8px; padding: 0.7rem 1rem; margin: 0.75rem 1.5rem 0;
      font-size: 0.82rem; color: var(--muted);
    }
    .guest-banner-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; flex-shrink: 0; padding: 0.2rem 0.4rem; }
    .guest-banner-close:hover { color: var(--fg, #fff); }

    /* HOME TILES */
    #screenHome .page-content { display: flex; flex-direction: column; }
    .home-greeting { margin-bottom: 2rem; }
    .home-greeting h1 { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; }
    .home-greeting p { color: var(--muted); font-size: 0.88rem; margin-top: 0.25rem; }
    .tile-section-label { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.85rem; margin-top: 2rem; }
    .tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
    @media (max-width: 900px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 600px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } }
    .tile { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem 1.25rem; cursor: pointer; transition: border-color 0.18s, transform 0.18s; display: flex; flex-direction: column; gap: 0.6rem; position: relative; overflow: hidden; min-height: 140px; }
    .tile::before { content: ''; position: absolute; inset: 0; background: var(--tile-accent, var(--cdim)); opacity: 0; transition: opacity 0.18s; border-radius: inherit; }
    .tile:hover { border-color: var(--tile-color, var(--cyan)); transform: translateY(-3px); }
    .tile:hover::before { opacity: 1; }
    .tile-icon { font-size: 2rem; position: relative; z-index: 1; }
    .tile-name { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.95rem; position: relative; z-index: 1; }
    .tile-desc { font-size: 0.78rem; color: var(--muted); position: relative; z-index: 1; line-height: 1.4; }
    .tile-badge { position: absolute; top: 0.75rem; right: 0.75rem; font-family: var(--mono); font-size: 0.6rem; color: #0a0e1a; padding: 0.1rem 0.4rem; border-radius: 4px; font-weight: 700; }
    .tile-cyan   { --tile-color: #00d4ff; --tile-accent: rgba(0,212,255,0.08); }
    .tile-purple { --tile-color: #7c6dfa; --tile-accent: rgba(124,109,250,0.08); }
    .tile-green  { --tile-color: #00e676; --tile-accent: rgba(0,230,118,0.08); }
    .tile-orange { --tile-color: #ff9f43; --tile-accent: rgba(255,159,67,0.08); }
    .tile-pink   { --tile-color: #ff6b9d; --tile-accent: rgba(255,107,157,0.08); }
    .tile-yellow { --tile-color: #ffd43b; --tile-accent: rgba(255,212,59,0.08); }
    .tile-grey   { --tile-color: #6b7a99; --tile-accent: rgba(107,122,153,0.08); }

    /* OFFICIAL TOOL VIEWER (screenOfficialTool) */
    .tool-frame-wrap { margin-top: 1rem; }
    .tool-frame { width: 100%; height: 78vh; min-height: 480px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }

    /* PROJECT CARDS */
    .proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; margin-bottom: 2rem; }
    .proj-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: border-color 0.18s, transform 0.18s; }
    .proj-card:hover { border-color: var(--purple); transform: translateY(-2px); }
    .proj-thumb { height: 100px; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; background: linear-gradient(135deg, #111827, #1a2035); }
    .proj-body { padding: 1rem; }
    .proj-body h3 { font-family: 'Space Grotesk', sans-serif; font-size: 0.92rem; font-weight: 600; margin-bottom: 0.3rem; }
    .proj-body p { color: var(--muted); font-size: 0.8rem; margin-bottom: 0.65rem; }
    .proj-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.65rem; border-top: 1px solid var(--border); }
    .proj-footer-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
    .proj-author { font-size: 0.72rem; color: var(--muted); }
    /* ADDED (2026-08-05, Nutzer-Wunsch: "Download-Zähler... sozialer Beweis") */
    .proj-download-count, .art-badge-downloads { font-size: 0.72rem; color: var(--muted); font-family: var(--mono); flex-shrink: 0; }
    .dl-btn { font-size: 0.72rem; font-weight: 600; color: var(--cyan); border: 1px solid var(--cdim); padding: 0.22rem 0.6rem; border-radius: 6px; cursor: pointer; background: none; font-family: inherit; transition: background 0.15s; }
    .dl-btn:hover { background: var(--cdim); }
    /* FAVORITE STAR — on cards it's absolutely positioned over the
       thumbnail (top-right); on detail-page/tool-viewer titlebars it sits
       inline instead, since .proj-card is the only ancestor with
       position:relative to anchor against. */
    .fav-star { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; width: 1.8rem; height: 1.8rem; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; line-height: 1; color: var(--muted); background: rgba(10, 12, 20, 0.55); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; transition: color 0.15s, transform 0.15s; }
    .fav-star:hover { color: #ffcf4a; transform: scale(1.08); }
    .fav-star.active { color: #ffcf4a; border-color: #ffcf4a; }
    .pd-titlebar .fav-star, #officialToolFavBtn, .audio-row .fav-star { position: static; background: none; border: none; width: auto; height: auto; flex-shrink: 0; }
    /* ADDED (2026-08-02, Nutzer-Wunsch: "Stern größer und weiter nach
       rechts"): bigger + more breathing room from the waveform, audio-row
       only — doesn't touch the shared .fav-star used everywhere else. */
    .audio-row .fav-star { font-size: 1.55rem; margin-left: 0.5rem; }
    /* Sandbox-only listings show this instead of the (misleading) download
       button — see buildListingCard()'s 2026-07-22 fix. Not a button:
       there's nothing to click here, the card itself already opens the
       detail page where Launch lives. */
    .proj-footer-hint { font-size: 0.72rem; font-weight: 600; color: var(--muted); padding: 0.22rem 0.6rem; }
    .new-badge { font-family: var(--mono); font-size: 0.58rem; color: #0a0e1a; background: var(--cyan); padding: 0.1rem 0.32rem; border-radius: 3px; margin-left: 0.3rem; vertical-align: middle; }
    .empty-state { text-align: center; padding: 4rem 2rem; color: var(--muted); }
    .empty-state .big { font-size: 3rem; margin-bottom: 1rem; }
    .empty-state p { margin-bottom: 1.25rem; font-size: 0.88rem; }

    /* UPLOAD */
    .dropzone { border: 2px dashed var(--border); border-radius: 12px; padding: 2.5rem; text-align: center; cursor: pointer; transition: all 0.18s; position: relative; margin-bottom: 1.25rem; }
    .dropzone:hover, .dropzone.over { border-color: var(--cyan); background: var(--cdim); }
    .dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
    .dropzone h3 { font-family: 'Space Grotesk', sans-serif; margin: 0.5rem 0 0.25rem; }
    .dropzone p { color: var(--muted); font-size: 0.84rem; }
    .dropzone .hint { font-family: var(--mono); font-size: 0.68rem; color: var(--cyan); margin-top: 0.5rem; }
    .file-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
    .file-item { display: flex; align-items: center; gap: 0.6rem; background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 0.5rem 0.75rem; }
    .file-item-name { flex: 1; font-family: var(--mono); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .file-item-size { color: var(--muted); font-size: 0.7rem; }

    /* COVER IMAGE PICKER (New Project flow) */
    .cover-image-picker { border: 2px dashed var(--border); border-radius: 12px; cursor: pointer; transition: all 0.18s; position: relative; overflow: hidden; height: 140px; display: flex; align-items: center; justify-content: center; background: var(--surface); }
    .cover-image-picker:hover { border-color: var(--cyan); background: var(--cdim); }
    .cover-image-empty { color: var(--muted); font-size: 0.8rem; text-align: center; }
    .cover-image-preview { width: 100%; height: 100%; object-fit: cover; }
    .cover-image-remove-btn { position: absolute; top: 0.5rem; right: 0.5rem; background: rgba(5,7,14,0.75); color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; padding: 0.25rem 0.55rem; font-size: 0.7rem; cursor: pointer; }
    .cover-image-remove-btn:hover { background: rgba(255,90,90,0.85); }
    /* ADDED (2026-07-25, Nutzer-Wunsch: Screenshots-Galerie für
       Programs/Games, nicht nur Assets) — kompakte Vorschau-Reihe
       mehrerer gewählter/hochgeladener Bilder, jedes mit eigenem
       Entfernen-Button; wächst nach unten statt zu scrollen, damit
       nichts versteckt bleibt. */
    .cover-image-thumb-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.6rem; }
    .cover-image-thumb-row:empty { margin-top: 0; }
    .cover-image-thumb { position: relative; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); flex-shrink: 0; }
    .cover-image-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cover-image-thumb-remove { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(5,7,14,0.8); color: #fff; border: 1px solid rgba(255,255,255,0.25); font-size: 0.65rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
    .cover-image-thumb-remove:hover { background: rgba(255,90,90,0.9); }
    .file-remove-btn { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; }
    .file-remove-btn:hover { color: var(--red); }
    .progress-wrap { display: none; margin: 0.75rem 0; }
    .progress-wrap.active { display: block; }
    .progress-bg { background: var(--surface); border-radius: 99px; height: 5px; overflow: hidden; margin-bottom: 0.35rem; }
    .progress-fill { height: 100%; background: var(--cyan); border-radius: 99px; width: 0; transition: width 0.2s; }
    .progress-label { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
    .success-box { display: none; background: rgba(0,230,118,0.07); border: 1px solid rgba(0,230,118,0.35); border-radius: 10px; padding: 1.25rem; text-align: center; margin-top: 1rem; }
    .success-box.active { display: block; }
    .success-box h3 { font-family: 'Space Grotesk', sans-serif; color: var(--green); margin-bottom: 0.3rem; }

    /* SEARCH */
    .search-bar { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
    .search-bar input { flex: 1; }
    .filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
    .filter-chip { padding: 0.28rem 0.75rem; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 0.78rem; cursor: pointer; font-family: inherit; transition: all 0.15s; }
    .filter-chip:hover, .filter-chip.active { border-color: var(--cyan); color: var(--cyan); background: var(--cdim); }

    /* SETTINGS */
    .settings-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; margin-bottom: 1rem; max-width: 680px; }
    #settingsBio, #settingsUsername { max-width: 100%; box-sizing: border-box; }
    #settingsBio { resize: none; overflow: hidden; min-height: 2.6em; word-wrap: break-word; overflow-wrap: anywhere; white-space: pre-wrap; }
    .settings-card h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; margin-bottom: 1rem; }
    /* Settings has little content — the generic 6rem bottom padding and
       min-height:100vh used by other screens (to clear a bottom nav / leave
       breathing room) forces an unnecessary page scroll here. Pin it down. */
    #screenSettings.active { padding-bottom: calc(var(--legal-footer-h) + 1rem); min-height: auto; }
    .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
    .toggle-row:last-child { border-bottom: none; }
    .toggle-row-label { font-size: 0.86rem; }
    .toggle-row-sub { font-size: 0.74rem; color: var(--muted); margin-top: 0.15rem; }
    .switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
    .switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; position: relative; z-index: 2; }
    .switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 99px; transition: background 0.18s; }
    .switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--text); border-radius: 50%; transition: transform 0.18s; }
    .switch input:checked ~ .switch-track { background: var(--cyan); }
    .switch input:checked ~ .switch-thumb { transform: translateX(18px); background: #0a0e1a; }

    /* PROFILE (public) */
    .profile-header { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.75rem; }
    .profile-avatar { width: 76px; height: 76px; border-radius: 20px; background: linear-gradient(135deg, var(--cyan), var(--purple)); display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.7rem; color: #0a0e1a; flex-shrink: 0; }
    .profile-name { font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; font-weight: 700; }
    .profile-meta { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 0.2rem; }
    .profile-id-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
    .profile-id-chip { font-family: var(--mono); font-size: 0.72rem; color: var(--purple); background: rgba(124,109,250,0.1); border: 1px solid rgba(124,109,250,0.3); padding: 0.25rem 0.6rem; border-radius: 6px; letter-spacing: 0.03em; }
    .copy-id-btn { background: none; border: 1px solid var(--border); color: var(--muted); font-size: 0.68rem; font-family: var(--mono); padding: 0.24rem 0.5rem; border-radius: 6px; cursor: pointer; }
    .copy-id-btn:hover { border-color: var(--cyan); color: var(--cyan); }
    .find-hint { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.6; }
    .blocked-note { font-family: var(--mono); font-size: 0.7rem; color: var(--red); background: rgba(255,107,107,0.08); border: 1px solid rgba(255,107,107,0.25); padding: 0.6rem 0.85rem; border-radius: 8px; margin-bottom: 1.25rem; }
    .profile-bio { color: var(--text); font-size: 0.88rem; margin: 1rem 0 1.5rem; max-width: 520px; line-height: 1.55; }
    .profile-bio.locked { color: var(--muted); font-style: italic; }
    .profile-actions { display: flex; gap: 0.6rem; margin-bottom: 2rem; flex-wrap: wrap; }
    .friend-status-pill { font-family: var(--mono); font-size: 0.7rem; color: var(--green); background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.3); padding: 0.4rem 0.85rem; border-radius: 99px; display: inline-flex; align-items: center; gap: 0.4rem; }

    /* CONTACTS / FRIENDS */
    .contacts-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
    .contacts-tab { padding: 0.6rem 0.2rem; margin-right: 1.5rem; background: none; border: none; color: var(--muted); font-family: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
    .contacts-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
    .contacts-tab .count-badge { font-family: var(--mono); font-size: 0.62rem; background: var(--cdim); color: var(--cyan); padding: 0.05rem 0.4rem; border-radius: 99px; margin-left: 0.35rem; }
    .person-row { display: flex; align-items: center; gap: 0.85rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 0.6rem; cursor: pointer; transition: border-color 0.15s; }
    .person-row:hover { border-color: var(--cyan); }
    .person-avatar { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, var(--cyan), var(--purple)); display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.95rem; color: #0a0e1a; flex-shrink: 0; }
    .person-info { flex: 1; min-width: 0; }
    .person-name { font-weight: 600; font-size: 0.9rem; }
    .person-sub { color: var(--muted); font-size: 0.75rem; margin-top: 0.1rem; }
    .person-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
    .person-actions .btn { padding: 0.4rem 0.75rem; font-size: 0.76rem; }

    /* MESSAGES / CHAT */
    .messages-layout { display: grid; grid-template-columns: 300px 1fr; height: calc(100vh - 54px - var(--legal-footer-h)); }
    @media (max-width: 760px) { .messages-layout { grid-template-columns: 1fr; } }
    /* Messages is a fixed-height chat UI, not a scrolling page — the
       generic screen padding/min-height (meant for content pages) pushes
       the input row below the fold. Pin the screen to exactly topbar +
       layout height, leaving room for the fixed global legal footer at
       the bottom so it never overlaps the chat input row; only
       .convo-list and .chat-body should scroll. */
    #screenMessages.active { padding-bottom: var(--legal-footer-h); min-height: 0; height: 100vh; overflow: hidden; box-sizing: border-box; }
    .convo-list { border-right: 1px solid var(--border); overflow-y: auto; }
    @media (max-width: 760px) { .convo-list.chat-open { display: none; } }
    .convo-search { padding: 0.85rem; border-bottom: 1px solid var(--border); }
    .convo-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 0.85rem; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.15s; position: relative; }
    .convo-item:hover, .convo-item.active { background: var(--surface); }
    .convo-item.active { border-left: 2px solid var(--cyan); }
    .convo-avatar { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--cyan), var(--purple)); display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.85rem; color: #0a0e1a; flex-shrink: 0; }
    .convo-info { flex: 1; min-width: 0; }
    .convo-name { font-weight: 600; font-size: 0.86rem; }
    .convo-preview { color: var(--muted); font-size: 0.76rem; margin-top: 0.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
    .convo-time { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); flex-shrink: 0; }
    .convo-unread { position: absolute; right: 0.85rem; top: 0.85rem; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }

    /* FIX (2026-07-25, Nutzer-Meldung: "man kann den Chat nicht hoch und
       runterscrollen, nur die ganze Seite"): .chat-body hatte schon
       flex:1 + overflow-y:auto, aber ohne min-height:0 an JEDEM Glied der
       Flex-/Grid-Kette (.chat-pane als Grid-Item von .messages-layout,
       #chatActive als Flex-Item von .chat-pane) verweigert ein
       Flex-/Grid-Item per Default (min-height:auto) das Schrumpfen unter
       seine Inhaltsgröße — .chat-body wuchs dadurch einfach über seinen
       zugewiesenen Platz hinaus mit, statt intern zu scrollen. */
    .chat-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; }
    .chat-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .chat-header .mobile-back { display: none; }
    @media (max-width: 760px) { .chat-header .mobile-back { display: inline-flex; } }
    .chat-body { flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
    .msg-bubble { max-width: 72%; padding: 0.55rem 0.85rem; border-radius: 14px; font-size: 0.86rem; line-height: 1.45; word-wrap: break-word; }
    .msg-bubble.theirs { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
    .msg-bubble.mine { align-self: flex-end; background: var(--cyan); color: #0a0e1a; border-bottom-right-radius: 4px; }
    .msg-time { font-family: var(--mono); font-size: 0.6rem; opacity: 0.6; margin-top: 0.25rem; display: block; }
    .chat-input-row { display: flex; gap: 0.6rem; padding: 0.85rem; border-top: 1px solid var(--border); flex-shrink: 0; }
    .chat-input-row input { flex: 1; }
    .chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--muted); gap: 0.5rem; }
    .chat-empty .big { font-size: 2.5rem; }
    .encrypted-note { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); text-align: center; padding: 0.4rem; border-bottom: 1px solid var(--border); }

    /* PROJECT DETAIL */
    .pd-hero { border-radius: 16px; overflow: hidden; margin-bottom: 1.5rem; background: linear-gradient(135deg, #111827, #1a2035); border: 1px solid var(--border); }
    /* itch.io-style gallery: taller hero so a screenshot reads as the
       centerpiece instead of a cramped strip; .pd-gallery-clickable +
       the zoom hint are only toggled on for the real image-gallery branch
       of renderPdImageGallery (projects.js) — audio/soundboard heroes stay
       plain since there's nothing there to open in a lightbox. */
    .pd-gallery-main { height: 380px; position: relative; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; background: var(--surface); }
    .pd-gallery-main img { transition: transform 0.3s ease; }
    .pd-gallery-clickable { cursor: zoom-in; }
    .pd-gallery-clickable:hover img { transform: scale(1.03); }
    .pd-gallery-zoom-hint {
      position: absolute; bottom: 0.7rem; right: 0.8rem; font-family: var(--mono); font-size: 0.68rem;
      background: rgba(10,14,26,0.65); border: 1px solid var(--border); padding: 0.25rem 0.6rem; border-radius: 6px;
      color: var(--text); opacity: 0; transition: opacity 0.15s; pointer-events: none;
    }
    .pd-gallery-clickable:hover .pd-gallery-zoom-hint { opacity: 1; }
    .pd-gallery-strip { display: flex; gap: 0.5rem; padding: 0.75rem; overflow-x: auto; }
    .pd-gallery-thumb { width: 64px; height: 64px; flex-shrink: 0; border-radius: 8px; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; cursor: pointer; overflow: hidden; }
    .pd-gallery-thumb.active { border-color: var(--cyan); }

    /* Full-screen lightbox opened from the gallery hero — see
       openPdLightbox()/stepPdLightbox() in projects.js. */
    .pd-lightbox {
      position: fixed; inset: 0; background: rgba(6,9,17,0.92); display: none; align-items: center; justify-content: center;
      z-index: 200; flex-direction: column; gap: 1rem;
    }
    .pd-lightbox.open { display: flex; }
    .pd-lightbox-img { width: min(82vw, 1000px); max-height: 78vh; object-fit: contain; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
    .pd-lightbox-close {
      position: absolute; top: 1.2rem; right: 1.5rem; width: 40px; height: 40px; border-radius: 50%;
      background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 1.1rem;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .pd-lightbox-close:hover { border-color: var(--cyan); color: var(--cyan); }
    .pd-lightbox-nav {
      position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
      background: var(--card); border: 1px solid var(--border); color: var(--text); font-size: 1.2rem;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .pd-lightbox-nav:hover { border-color: var(--cyan); color: var(--cyan); }
    .pd-lightbox-prev { left: 1.5rem; } .pd-lightbox-next { right: 1.5rem; }
    .pd-lightbox-counter { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }

    /* AUDIO-ASSET DETAIL HERO — deliberately not the same gallery-strip
       look as a graphics asset (see renderPdImageGallery's comment in
       projects.js): a track needs a cover + big play control, not a
       thumbnail strip. */
    .pd-hero.pd-hero-audio { background: linear-gradient(135deg, rgba(124,109,250,0.18), rgba(0,212,255,0.1)); }
    .pd-audio-hero { height: 100%; display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
    .pd-audio-hero-art { width: 160px; height: 160px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 3.5rem; overflow: hidden; flex-shrink: 0; box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
    .pd-audio-hero-play { width: 68px; height: 68px; border-radius: 50%; background: var(--purple); color: #fff; border: none; font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.12s; }
    .pd-audio-hero-play:hover { transform: scale(1.06); }
    .pd-audio-hero-noaudio { color: var(--muted); font-size: 0.82rem; max-width: 220px; }
    .pd-audio-hero-controls { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
    /* REPLACED (2026-07-25, Nutzer-Wunsch: siehe pd-audio-hero-seek-
       Kommentar in projects.js) — war .pd-audio-hero-duration, ein reiner
       statischer Text ohne Interaktion. Jetzt eine breitere Variante der
       Discover-Zeilen-Seek-Leiste (teilt sich .audio-seek-track/-fill/
       -handle) plus ein Zeit-Paar darunter (aktuelle Position / Gesamt-
       länge), das bei jedem 'timeupdate' mitläuft. */
    /* RESTORED (2026-08-04, bugcheck): the base .audio-seek/-track/-fill/
       -handle rules got deleted outright during the 2026-08-02 Discover-row
       waveform redesign (only the .arow-seek override and this
       hero-specific width:220px survived) — but projects.js's asset-detail
       hero player (pdAudioHeroSeekFill/pdAudioHeroSeekHandle) still renders
       exactly these classes and was left with literally no box/track/fill
       styling at all (effectively invisible, non-functional-looking seek
       bar on every audio asset's detail page). The Discover row's
       .audio-seek.arow-seek override below already beats this on width/
       height/display via matching specificity + source order, so restoring
       this doesn't affect the new waveform look there. */
    .audio-seek { display: flex; align-items: center; width: 90px; min-width: 60px; height: 24px; flex-shrink: 0; position: relative; cursor: pointer; touch-action: none; }
    .audio-seek-track { position: relative; width: 100%; height: 4px; background: var(--border); border-radius: 99px; overflow: hidden; }
    .audio-seek-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: var(--purple); border-radius: 99px; }
    .audio-seek-handle { position: absolute; top: 50%; left: 0%; width: 11px; height: 11px; border-radius: 50%; background: var(--purple); transform: translate(-50%,-50%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 25%, transparent); pointer-events: none; }
    /* Two classes (not one) so this reliably beats .audio-seek's
       width:90px regardless of stylesheet order (equal specificity would
       otherwise let whichever rule comes later in the file win). */
    .audio-seek.pd-audio-hero-seek { width: 220px; }
    /* ADDED (2026-08-05, Nutzer-Wunsch: "Hero-Player auch auf echte
       Wellenform"): three classes so this reliably beats the Discover
       row's .audio-seek.arow-seek (also two classes, but this rule adds a
       third — specificity wins regardless of source order, same reasoning
       as the comment above). Wider + taller than a Discover row's inline
       waveform since the hero has the room for it. */
    .audio-seek.arow-seek.pd-audio-hero-seek { width: 260px; max-width: none; height: 40px; flex: none; }
    .pd-audio-hero-time { display: flex; justify-content: space-between; width: 260px; font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }

    /* SOUNDBOARD HERO — for a listing with multiple audio files (a sound-
       effect pack), used instead of the single-track player above (see
       renderPdImageGallery's isSoundboard branch, projects.js). A grid of
       individually playable clips, not one big hero pretending there's
       only one track. */
    .pd-hero.pd-hero-soundboard .pd-gallery-main { height: auto; max-height: 360px; overflow-y: auto; display: block; padding: 0.85rem; }
    .pd-soundboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.55rem; }
    .pd-soundboard-clip { display: flex; align-items: center; gap: 0.55rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.7rem; }
    .pd-soundboard-play { width: 30px; height: 30px; border-radius: 50%; background: var(--purple); color: #fff; border: none; font-size: 0.78rem; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .pd-soundboard-play.playing { background: var(--cyan); }
    .pd-soundboard-name { flex: 1; font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
    .pd-soundboard-duration { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); flex-shrink: 0; }
    .pd-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
    .pd-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; }
    .pd-vis-badge { font-family: var(--mono); font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 5px; display: inline-flex; align-items: center; gap: 0.3rem; }
    .pd-vis-open   { color: var(--green); background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.3); }
    .pd-vis-request{ color: var(--cyan); background: var(--cdim); border: 1px solid rgba(0,212,255,0.3); }
    .pd-vis-closed { color: var(--muted); background: var(--surface); border: 1px solid var(--border); }

    .pd-scan-badge { font-family: var(--mono); font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 5px; display: inline-flex; align-items: center; gap: 0.3rem; }
    .pd-scan-clean   { color: var(--green); background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.3); }
    .pd-scan-pending { color: #ffd43b; background: rgba(255,212,59,0.1); border: 1px solid rgba(255,212,59,0.3); }
    .pd-scan-flagged { color: #ff5a5a; background: rgba(255,90,90,0.1); border: 1px solid rgba(255,90,90,0.3); }

    /* PROJECT VOTING (like/dislike) */
    .pd-vote-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.85rem; }
    .pd-vote-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.85rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); cursor: pointer; font-family: inherit; transition: all 0.15s; }
    .pd-vote-btn:hover { border-color: var(--muted); color: var(--text); }
    .pd-vote-btn.picked-like { border-color: var(--green); color: var(--green); background: rgba(0,230,118,0.08); }
    .pd-vote-btn.picked-dislike { border-color: #ff5a5a; color: #ff5a5a; background: rgba(255,90,90,0.08); }
    .pd-vote-score { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }

    /* LEADERBOARDS */
    .lb-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; }
    .lb-tab { padding: 0.65rem 0.2rem; margin-right: 1.75rem; background: none; border: none; color: var(--muted); font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
    .lb-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
    .lb-row { display: flex; align-items: center; gap: 0.9rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1.1rem; margin-bottom: 0.55rem; cursor: pointer; transition: border-color 0.15s; }
    .lb-row:hover { border-color: var(--cyan); }
    .lb-rank { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.1rem; color: var(--muted); width: 2rem; text-align: center; flex-shrink: 0; }
    .lb-rank.lb-rank-1 { color: #ffd43b; }
    .lb-rank.lb-rank-2 { color: #c7ccd6; }
    .lb-rank.lb-rank-3 { color: #d99a5b; }
    .lb-thumb { font-size: 1.6rem; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--surface); border-radius: 8px; flex-shrink: 0; }
    .lb-info { flex: 1; min-width: 0; }
    .lb-name { font-weight: 600; font-size: 0.9rem; }
    .lb-author { color: var(--muted); font-size: 0.76rem; margin-top: 0.1rem; }
    .lb-score { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; font-family: var(--mono); font-size: 0.8rem; }
    .lb-score-value { font-weight: 700; color: var(--cyan); font-size: 0.95rem; }

    .report-reason-chip.selected { border-color: #ff5a5a; color: #ff5a5a; background: rgba(255,90,90,0.08); }

    .mod-user-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.6rem; cursor: pointer; background: var(--surface); }
    .mod-user-row:hover { border-color: var(--cyan); }
    .mod-user-info { flex: 1; }
    .mod-user-name { font-weight: 600; }
    .mod-user-meta { color: var(--muted); font-size: 0.76rem; margin-top: 0.15rem; }
    .mod-user-arrow { color: var(--muted); font-size: 1.2rem; }

    .mod-report-row { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem; margin-bottom: 0.6rem; background: var(--surface); }
    .mod-report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
    .mod-report-reason { font-weight: 600; color: #ff5a5a; font-size: 0.85rem; }
    .mod-report-time { color: var(--muted); font-size: 0.72rem; font-family: var(--mono); }
    .mod-report-source { color: var(--muted); font-size: 0.78rem; margin-top: 0.25rem; }
    .mod-report-note { font-size: 0.82rem; margin-top: 0.4rem; background: var(--cdim); border-radius: 6px; padding: 0.5rem 0.6rem; }
    .mod-report-jump { margin-top: 0.5rem; font-size: 0.75rem; padding: 0.3rem 0.7rem; }

    .mod-action-row { border: 1px solid var(--border); border-radius: 10px; padding: 0.65rem 0.75rem; margin-bottom: 0.5rem; }
    .mod-action-type { font-family: var(--mono); font-size: 0.68rem; padding: 0.15rem 0.5rem; border-radius: 5px; text-transform: uppercase; }
    .mod-action-dismissed { color: var(--muted); background: var(--surface); border: 1px solid var(--border); }
    .mod-action-warned { color: #ffd43b; background: rgba(255,212,59,0.1); border: 1px solid rgba(255,212,59,0.3); }
    .mod-action-banned { color: #ff5a5a; background: rgba(255,90,90,0.1); border: 1px solid rgba(255,90,90,0.3); }
    .mod-action-chat-review { color: var(--cyan); background: var(--cdim); border: 1px solid rgba(0,212,255,0.25); }
    .mod-action-meta { color: var(--muted); font-size: 0.75rem; margin-left: 0.5rem; }

    .notif-bell-wrap { position: relative; }
    .notif-bell-btn { background: transparent; border: none; font-size: 1.2rem; cursor: pointer; position: relative; padding: 0.3rem; line-height: 1; }
    .notif-badge { position: absolute; top: -0.2rem; right: -0.3rem; background: #ff5a5a; color: #fff; font-size: 0.62rem; font-family: var(--mono); border-radius: 99px; padding: 0.05rem 0.35rem; min-width: 1.1rem; text-align: center; }
    .notif-dropdown { position: absolute; top: calc(100% + 0.6rem); right: 0; width: min(340px, 90vw); max-height: 420px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.35); z-index: 50; }
    .notif-dropdown-header { padding: 0.75rem 1rem; font-weight: 600; border-bottom: 1px solid var(--border); }
    .notif-empty { padding: 1.5rem 1rem; color: var(--muted); font-size: 0.85rem; text-align: center; }
    .notif-row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); cursor: pointer; }
    .notif-row:last-child { border-bottom: none; }
    .notif-row:hover { background: var(--cdim); }
    .notif-row.unread { background: rgba(0,212,255,0.05); }
    .notif-icon { font-size: 1rem; margin-top: 0.1rem; }
    .notif-body { flex: 1; min-width: 0; }
    .notif-text { font-size: 0.83rem; line-height: 1.4; }
    .notif-time { font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem; }
    .notif-mute-btn { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 0.15rem; opacity: 0.6; }
    .notif-mute-btn:hover { opacity: 1; }

    .notif-mute-toggle.muted { color: var(--muted); border-color: var(--border); }
    .pd-author-row { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.82rem; margin-bottom: 1.25rem; }
    .pd-author-row .person-avatar { width: 28px; height: 28px; border-radius: 8px; font-size: 0.7rem; cursor: pointer; }
    .pd-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
    .pd-tab { padding: 0.6rem 0.2rem; margin-right: 1.5rem; background: none; border: none; color: var(--muted); font-family: inherit; font-size: 0.86rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
    .pd-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
    .pd-pane { display: none; }
    .pd-pane.active { display: block; }
    .pd-desc { line-height: 1.7; color: var(--text); font-size: 0.92rem; margin-bottom: 1.5rem; white-space: pre-wrap; }
    /* ADDED (2026-07-25, Nutzer-Wunsch: "es braucht noch ein Lizenzding...
       vielleicht direkt unter der Overview") — glanceable license summary
       at the top of the Overview tab, see renderPdLicenseCard() in
       projects.js. Clickable (whole card, not just an icon) for the
       fuller plain-language explanation via showLicenseInfo(). */
    .pd-license-card { display: flex; align-items: center; gap: 0.7rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem; margin-bottom: 1.1rem; cursor: pointer; transition: border-color 0.15s; }
    .pd-license-card:hover { border-color: var(--cyan); }
    .pd-license-card-emoji { font-size: 1.3rem; flex-shrink: 0; }
    .pd-license-card-name { font-weight: 600; font-size: 0.86rem; }
    .pd-license-card-summary { color: var(--muted); font-size: 0.78rem; margin-top: 0.1rem; }
    .pd-license-card-info { margin-left: auto; color: var(--muted); font-size: 0.8rem; flex-shrink: 0; }
    .pd-filelist { display: flex; flex-direction: column; gap: 0.4rem; }
    .pd-file-row { display: flex; align-items: center; gap: 0.6rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.65rem 0.9rem; font-family: var(--mono); font-size: 0.78rem; }
    .pd-file-row .fname { flex: 1; }
    .pd-file-row .fsize { color: var(--muted); }
    .pd-contributors { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
    .pd-contributor-chip { display: flex; align-items: center; gap: 0.45rem; background: var(--card); border: 1px solid var(--border); border-radius: 99px; padding: 0.3rem 0.8rem 0.3rem 0.3rem; cursor: pointer; }
    .pd-contributor-chip .person-avatar { width: 26px; height: 26px; border-radius: 50%; font-size: 0.65rem; }
    .pd-version-row { display: flex; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid var(--border); }
    .pd-version-row:last-child { border-bottom: none; }
    .pd-version-tag { font-family: var(--mono); font-size: 0.72rem; color: var(--purple); background: rgba(124,109,250,0.1); padding: 0.15rem 0.5rem; border-radius: 5px; height: fit-content; flex-shrink: 0; }
    .pd-version-body .vtitle { font-size: 0.85rem; font-weight: 600; }
    .pd-version-body .vnote { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }
    .pd-version-body .vdate { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); margin-top: 0.3rem; }
    .pd-comment { display: flex; gap: 0.7rem; margin-bottom: 1.1rem; }
    .pd-comment .person-avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 0.7rem; flex-shrink: 0; }
    .pd-comment-body { flex: 1; }
    .pd-comment-name { font-size: 0.82rem; font-weight: 600; }
    .pd-comment-text { font-size: 0.85rem; color: var(--text); margin-top: 0.15rem; line-height: 1.5; }
    .pd-comment-time { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); margin-top: 0.3rem; }
    .pd-comment-form { display: flex; gap: 0.6rem; margin-top: 1.25rem; }
    .pd-comment-form input { flex: 1; }
    .pd-sidebar-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem; margin-bottom: 1rem; }
    .pd-sidebar-card h4 { font-family: 'Space Grotesk', sans-serif; font-size: 0.85rem; margin-bottom: 0.7rem; }
    .pd-layout { display: grid; grid-template-columns: 1fr 260px; gap: 2rem; align-items: start; }
    @media (max-width: 800px) { .pd-layout { grid-template-columns: 1fr; } }
    /* itch.io-style sticky download/info panel — stays in view while the
       description/comments column scrolls, instead of a purchase/download
       action scrolling out of reach on a long page. 70px clears the
       sticky .topbar (54px) plus a little breathing room. Switches back to
       normal flow on the same breakpoint the layout itself stacks at
       (mobile has no room for two independently-scrolling columns). */
    .pd-sidebar-col { position: sticky; top: 70px; }
    @media (max-width: 800px) { .pd-sidebar-col { position: static; } }
    .pd-request-note { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 0.5rem; }

    /* PROJECT CREATE */
    .create-steps { display: flex; gap: 0.4rem; margin-bottom: 1.75rem; }
    .create-step-dot { flex: 1; height: 3px; background: var(--border); border-radius: 99px; }
    .create-step-dot.done { background: var(--cyan); }
    .create-step-dot.current { background: var(--purple); }
    .vis-option { display: flex; align-items: flex-start; gap: 0.85rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin-bottom: 0.7rem; cursor: pointer; transition: border-color 0.15s; }
    .vis-option:hover { border-color: var(--muted); }
    .vis-option.selected { border-color: var(--cyan); background: var(--cdim); }
    .vis-option input { width: auto; margin-top: 0.2rem; }
    .vis-option-body .vo-title { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
    .vis-option-body .vo-desc { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; line-height: 1.5; }

    /* SUPPORT HUB */
    .support-hero { text-align: center; padding: 2.5rem 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: 18px; margin-bottom: 1.75rem; }
    .support-hero .flame-big { font-size: 3rem; margin-bottom: 0.5rem; }
    .support-hero h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.3rem; margin-bottom: 0.5rem; }
    .support-hero p { color: var(--muted); font-size: 0.86rem; max-width: 420px; margin: 0 auto 1.5rem; line-height: 1.6; }
    .support-stats-row { display: flex; justify-content: center; gap: 2.5rem; margin-bottom: 1.75rem; }
    .support-stat { text-align: center; }
    .support-stat .num { font-family: 'Space Grotesk', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--cyan); }
    .support-stat .lbl { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
    .support-cooldown { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-top: 0.75rem; }

    .ad-modal-overlay { position: fixed; inset: 0; background: rgba(5,7,14,0.85); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
    .ad-modal { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 2rem; max-width: 420px; width: 100%; text-align: center; }
    .ad-modal-screen { height: 180px; background: var(--surface); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 0.6rem; margin-bottom: 1.25rem; border: 1px solid var(--border); }
    .ad-modal-timer { font-family: var(--mono); font-size: 1.6rem; color: var(--cyan); }
    .ad-modal-bar-bg { background: var(--border); border-radius: 99px; height: 5px; overflow: hidden; margin-top: 0.5rem; width: 80%; }
    .ad-modal-bar-fill { height: 100%; background: var(--cyan); width: 0%; transition: width 0.3s linear; }
    .reaction-row { display: flex; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
    .reaction-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.85rem 1.1rem; font-size: 1.4rem; cursor: pointer; transition: all 0.15s; }
    .reaction-btn:hover, .reaction-btn.picked { border-color: var(--cyan); background: var(--cdim); transform: translateY(-2px); }

    /* RELIABILITY */
    .reliability-chip { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--mono); font-size: 0.7rem; color: var(--green); background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.3); padding: 0.2rem 0.55rem; border-radius: 6px; }

    /* TEAM (per-project file slots + chat) */
    .team-files-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; }
    .team-files-header h4 { font-family: 'Space Grotesk', sans-serif; font-size: 0.9rem; }
    .team-files-hint { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-bottom: 0.9rem; line-height: 1.6; }
    .team-file-slot { background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.5rem; overflow: hidden; }
    .team-file-main { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; cursor: pointer; }
    .team-file-icon { font-size: 1.1rem; }
    .team-file-info { flex: 1; min-width: 0; }
    .team-file-name { font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; }
    .team-file-version { font-family: var(--mono); font-size: 0.65rem; color: var(--purple); background: rgba(124,109,250,0.12); padding: 0.05rem 0.4rem; border-radius: 5px; }
    .team-file-meta { font-size: 0.72rem; color: var(--muted); margin-top: 0.15rem; }
    .team-file-replace-btn { padding: 0.32rem 0.7rem; font-size: 0.72rem; flex-shrink: 0; }
    .team-file-history { border-top: 1px solid var(--border); padding: 0.6rem 0.9rem; background: var(--surface); }
    .team-file-version-row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.3rem 0; font-size: 0.76rem; }
    .team-file-version-row.current .tfv-tag { color: var(--cyan); }
    .tfv-tag { font-family: var(--mono); color: var(--muted); flex-shrink: 0; }
    .tfv-note { flex: 1; color: var(--text); }
    .tfv-meta { color: var(--muted); font-size: 0.68rem; flex-shrink: 0; }
    .team-chat-box { background: var(--card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-top: 0.7rem; }
    .team-chat-body { max-height: 340px; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; }
    .team-msg { display: flex; gap: 0.6rem; position: relative; padding: 0.2rem 0.3rem; border-radius: 8px; transition: background 0.12s; }
    .team-msg:hover { background: rgba(255,255,255,0.03); }
    .team-msg:hover .team-msg-actions { opacity: 1; pointer-events: auto; }
    .team-msg-body { flex: 1; min-width: 0; }
    .team-msg-name { font-size: 0.78rem; font-weight: 600; }
    .team-msg-time { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); font-weight: 400; margin-left: 0.3rem; }
    .team-msg-text { font-size: 0.83rem; color: var(--text); margin-top: 0.15rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
    .team-file-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; background: var(--cdim); border: 1px solid rgba(0,212,255,0.25); padding: 0.3rem 0.65rem; border-radius: 8px; margin-top: 0.25rem; }
    /* Same visual as the plain (non-clickable) pill above, but as an
       actual <button> — used when the message carries a real downloadURL
       (see renderWorkspaceMessages in workspace.js). Hover/cursor cues
       make it obvious this one actually does something. */
    .team-file-pill-clickable { cursor: pointer; font: inherit; color: var(--cyan); transition: border-color 0.12s, background 0.12s; }
    .team-file-pill-clickable:hover { border-color: var(--cyan); background: rgba(0,212,255,0.12); }
    /* Small reply/copy/delete row — invisible until the message is
       hovered (or focused, for keyboard/touch users where :hover doesn't
       apply), same "actions appear on hover" pattern most chat UIs use
       so the feed doesn't look cluttered with buttons at rest. */
    .team-msg-actions { position: absolute; top: 0; right: 0.3rem; display: flex; gap: 0.2rem; opacity: 0; pointer-events: none; transition: opacity 0.12s; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.15rem; }
    .team-msg:focus-within .team-msg-actions { opacity: 1; pointer-events: auto; }
    .team-msg-action-btn { background: transparent; border: none; color: var(--muted); font-size: 0.8rem; padding: 0.2rem 0.4rem; border-radius: 6px; cursor: pointer; line-height: 1; }
    .team-msg-action-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
    .team-msg-action-danger:hover { color: var(--red); }
    /* Quoted-message preview shown inside a reply, WhatsApp-style — a
       vertical accent bar plus the original author/text snapshot (not a
       live link: see sendWorkspaceMessage's replyTo snapshot comment). */
    .team-msg-reply-quote { border-left: 2px solid var(--cyan); padding: 0.25rem 0 0.25rem 0.5rem; margin: 0.3rem 0; opacity: 0.75; }
    .team-msg-reply-author { font-size: 0.68rem; font-weight: 600; color: var(--cyan); }
    .team-msg-reply-text { font-size: 0.75rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .team-chat-input-row { display: flex; gap: 0.6rem; padding: 0.7rem; border-top: 1px solid var(--border); }
    .team-chat-input-row input { flex: 1; }

    /* "Replying to ..." bar shown above the workspace chat's input row
       while composing a reply — see pwReplyToMessage()/pwCancelReply()
       in workspace.js. */
    .pw-reply-preview { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1rem; border-top: 1px solid var(--border); background: rgba(0,212,255,0.06); flex-shrink: 0; }
    .pw-reply-preview.hidden { display: none; }
    .pw-reply-preview-content { flex: 1; min-width: 0; border-left: 2px solid var(--cyan); padding-left: 0.5rem; }
    .pw-reply-preview-author { font-size: 0.68rem; font-weight: 600; color: var(--cyan); }
    .pw-reply-preview-text { font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pw-reply-preview-close { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 0.2rem 0.4rem; flex-shrink: 0; }
    .pw-reply-preview-close:hover { color: var(--red); }

    /* PROJECT WORKSPACE (in-progress team projects) */
    .pw-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2.5rem; max-width: 1180px; margin: 0 auto; }
    @media (max-width: 860px) { .pw-layout { grid-template-columns: 1fr; } }
    /* width:100% is required alongside max-width here — .pw-single is a
       flex item (child of .screen.active's flex column) with auto side
       margins for centering, and a flex item with auto cross-axis margins
       sizes to fit-content instead of stretching by default. That was
       invisible on tabs with wide-enough content to mask it (Chat/
       Artifacts/etc.), but collapsed hard on the Tools tab: a percentage
       width on a replaced element like <iframe> doesn't count toward
       intrinsic/fit-content sizing, so with the picker collapsed (its only
       other content is a slim header row) the whole column shrank to the
       iframe's tiny ~300px browser-default intrinsic width regardless of
       how wide the actual viewport was. FOUND 2026-08-01 (Nutzer-Meldung:
       Tool-Ansicht war "gefühlt fünfzig Pixel breit" trotz 1000+px Platz). */
    .pw-single { display: flex; flex-direction: column; gap: 1.25rem; max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem) 2.5rem; }
    .pw-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
    .pw-side { display: flex; flex-direction: column; }
    .pw-header-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.25rem 1.4rem; }
    .pw-header-top { display: flex; gap: 0.9rem; align-items: flex-start; }
    .pw-emoji { font-size: 2.1rem; line-height: 1; flex-shrink: 0; }
    .pw-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 700; }
    .pw-desc { color: var(--muted); font-size: 0.85rem; margin-top: 0.3rem; line-height: 1.55; }
    /* Team tab contributor grid — cards (avatar + name + role) instead of
       small pill chips, so the role is visible at a glance without opening
       Settings. (2026-08-01, Nutzer-Wunsch nach Redesign-Mockup-Review:
       "mit Teams, wie das jetzt da steht, das macht superviel Sinn" —
       adopted directly from workspace-redesign.html's .team-grid/.team-card.) */
    .pw-contributors { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.7rem; margin-top: 1rem; }
    .pw-team-card { display: flex; align-items: center; gap: 0.65rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.85rem; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
    .pw-team-card:hover { border-color: var(--cyan); transform: translateY(-1px); }
    .pw-team-info { min-width: 0; }
    .pw-team-name { font-weight: 700; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pw-team-role { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); margin-top: 0.15rem; }
    .pw-team-role.owner { color: var(--cyan); }
    .pw-visibility-pill { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); border: 1px solid var(--border); padding: 0.25rem 0.6rem; border-radius: 99px; white-space: nowrap; }
    .pw-visibility-pill.pw-vis-live { color: var(--green); border-color: rgba(0,230,118,0.35); background: rgba(0,230,118,0.08); }
    /* Fixed height (not just min-height) is what makes the body below
       actually scroll internally instead of growing the whole page taller
       with every new message — WhatsApp-style "chat window stays put,
       messages scroll inside it". Viewport-relative with a sane floor/
       ceiling so it still looks reasonable on short or very tall screens. */
    .pw-chat-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; height: clamp(420px, 70vh, 760px); }
    /* Chat window only (not the Team/Settings/Project tabs, which share
       .pw-chat-card but must NOT be resizable) — person can drag both
       width and height. min/max keep it from collapsing to nothing or
       overflowing the page; overflow:auto below the resize handle still
       lets the browser clip correctly instead of "swallowing" content
       (the header/input row never shrink, see flex-shrink:0 on them —
       only .pw-chat-body's flex-1 gives up space first). */
    .pw-chat-card-chat { resize: both; overflow: auto; min-width: 320px; max-width: 100%; min-height: 320px; max-height: 90vh; }
    /* BUGFIX (2026-07-23): Artifacts/Team/Settings/Project tabs reuse
       .pw-chat-card purely for the card look (border/radius/background),
       but were unintentionally inheriting its fixed height + overflow:hidden
       too — meant only for the actual chat window, which needs a fixed
       box so messages scroll inside it. On these other tabs that meant
       content longer than ~760px got silently clipped at the bottom with
       no scrollbar. This overrides both back to "grow with content". */
    .pw-card-static { height: auto; overflow: visible; }
    /* WORKSPACE TOOLS TAB — header row (active tool name + toggle button
       top-right) and the tile grid the toggle reveals. .pw-tool-tiles
       reuses the same auto-fill sizing idea as .proj-grid but at a smaller
       min width, since these tiles carry just an emoji + name (no
       description/footer) — a picker, not a full browse grid. */
    .pw-tools-header { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.8rem; }
    #pwToolsToggleBtn.active { border-color: var(--cyan); color: var(--cyan); }
    .pw-tool-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.6rem; }
    .pw-tool-tile { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 0.7rem; text-align: center; cursor: pointer; transition: border-color 0.15s, transform 0.15s; position: relative; }
    .pw-tool-tile:hover { border-color: var(--cyan); transform: translateY(-2px); }
    .pw-tool-tile.selected { border-color: var(--cyan); background: rgba(0,212,255,0.08); }
    .pw-tool-tile .pw-tool-tile-emoji { font-size: 1.6rem; margin-bottom: 0.4rem; }
    .pw-tool-tile .pw-tool-tile-name { font-size: 0.76rem; color: var(--text); line-height: 1.3; }
    .pw-tool-tile .pw-tool-tile-unpin { position: absolute; top: 0.3rem; right: 0.4rem; opacity: 0.55; font-size: 0.7rem; }
    .pw-tool-tile .pw-tool-tile-unpin:hover { opacity: 1; }
    .pw-chat-header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 1rem 1.2rem 0.7rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; flex-shrink: 0; }
    .pw-chat-header h4 { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; }
    .pw-chat-hint { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); }
    .pw-chat-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; min-height: 0; }
    .pw-chat-input-row { display: flex; gap: 0.6rem; padding: 0.8rem; border-top: 1px solid var(--border); flex-shrink: 0; align-items: flex-end; }
    /* Grows with content up to ~8 lines (see pwAutoGrowChatInput() in
       workspace.js, which sets an inline max-height in px matching this),
       then scrolls internally instead of the row growing forever or text
       being invisible past line 1. */
    .pw-chat-input-row textarea#pwChatInput { flex: 1; resize: none; overflow-y: auto; max-height: 190px; line-height: 1.4; }
    .pw-attach-btn { padding: 0.55rem 0.7rem; font-size: 1rem; flex-shrink: 0; }
    .pw-artifact-empty, .pw-chat-empty { color: var(--muted); font-size: 0.78rem; text-align: center; padding: 1.2rem 0.5rem; }

    /* ── Workspace tab bar (Chat / Artifacts / Settings) ── */
    .pw-tabbar { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin: 0 0 1.1rem; padding: 0 clamp(1rem, 4vw, 2.5rem); max-width: 1180px; margin-left: auto; margin-right: auto; }
    .pw-tab { background: none; border: none; color: var(--muted); font-family: 'Space Grotesk', sans-serif; font-size: 0.88rem; font-weight: 600; padding: 0.75rem 1rem 0.7rem; cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 0.4rem; }
    .pw-tab:hover { color: var(--text); }
    .pw-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
    .pw-tab-panel { display: none; }
    .pw-tab-panel.active { display: block; }

    /* ── Settings tab bar (Profile / Privacy / Legal / Account) ── */
    .settings-tabbar { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid var(--border); margin: 0 0 1.1rem; }
    .settings-tab { background: none; border: none; color: var(--muted); font-family: 'Space Grotesk', sans-serif; font-size: 0.88rem; font-weight: 600; padding: 0.75rem 1rem 0.7rem; cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
    .settings-tab:hover { color: var(--text); }
    .settings-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
    .settings-tab-panel { display: none; }
    .settings-tab-panel.active { display: block; }

    /* ── File explorer (Artifacts tab) ── */
    .pw-explorer-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); margin-bottom: 0.8rem; }
    .pw-explorer-crumb { cursor: pointer; padding: 0.15rem 0.4rem; border-radius: 5px; }
    .pw-explorer-crumb:hover { color: var(--cyan); background: rgba(0,212,255,0.08); }
    .pw-explorer-crumb.current { color: var(--text); cursor: default; }
    .pw-explorer-crumb.current:hover { background: none; }
    .pw-explorer-sep { color: var(--border); }
    .pw-explorer-toolbar { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
    .pw-folder-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.9rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.5rem; cursor: pointer; }
    .pw-folder-row:hover { border-color: rgba(0,212,255,0.3); }
    .pw-folder-icon { font-size: 1.1rem; }
    .pw-folder-name { flex: 1; font-size: 0.85rem; font-weight: 600; }
    .pw-folder-count { font-size: 0.72rem; color: var(--muted); font-family: var(--mono); }
    .pw-explorer-empty { color: var(--muted); font-size: 0.82rem; text-align: center; padding: 2rem 0.5rem; }
    .pw-folder-row.pw-dragover, .pw-explorer-crumb.pw-dragover { border-color: var(--cyan); background: rgba(0,212,255,0.1); box-shadow: 0 0 0 1px var(--cyan) inset; }
    #pwArtifactsList.pw-list-dragover { outline: 2px dashed var(--cyan); outline-offset: -6px; border-radius: 10px; }
    .team-file-slot[draggable="true"] { cursor: grab; }
    .team-file-slot.pw-dragging { opacity: 0.45; }
    .pw-file-actions { display: flex; align-items: center; gap: 0.3rem; flex-shrink: 0; }
    .pw-file-open-btn { padding: 0.32rem 0.55rem; font-size: 0.85rem; flex-shrink: 0; }

    /* ── Artifact preview panel (slide-in from the right) ── */
    .pw-preview-overlay { position: fixed; inset: 0; background: rgba(4,8,16,0.55); z-index: 200; display: flex; justify-content: flex-end; }
    .pw-preview-overlay.hidden { display: none; }
    .pw-preview-panel { width: min(560px, 100vw); height: 100%; background: var(--surface); border-left: 1px solid var(--border); display: flex; flex-direction: column; box-shadow: -12px 0 32px rgba(0,0,0,0.35); }
    .pw-preview-header { display: flex; align-items: flex-start; gap: 0.7rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); }
    .pw-preview-title { flex: 1; min-width: 0; }
    .pw-preview-name { font-size: 0.92rem; font-weight: 700; word-break: break-word; }
    .pw-preview-meta { font-family: var(--mono); font-size: 0.68rem; color: var(--muted); margin-top: 0.2rem; }
    .pw-preview-close { background: none; border: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0.2rem 0.4rem; flex-shrink: 0; }
    .pw-preview-close:hover { color: var(--text); }
    .pw-preview-actions { display: flex; gap: 0.5rem; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .pw-preview-body { flex: 1; overflow: auto; padding: 0; background: var(--card); }
    .pw-preview-code { margin: 0; padding: 1rem 1.1rem; font-family: var(--mono); font-size: 0.78rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--text); }
    .pw-preview-image { display: block; max-width: 100%; margin: 1rem auto; border-radius: 8px; }
    .pw-preview-audio { display: block; width: 100%; margin: 1.5rem auto; }
    .pw-preview-fallback { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 3rem 1.2rem; }
    .pw-preview-loading { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 3rem 1.2rem; }

    /* ── Roles & permissions (Settings tab) ── */
    .pw-member-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.5rem; }
    .pw-member-name { flex: 1; font-size: 0.85rem; font-weight: 600; }
    .pw-role-badge { font-family: var(--mono); font-size: 0.68rem; padding: 0.2rem 0.55rem; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); }
    .pw-role-badge.owner { color: var(--purple); border-color: rgba(124,109,250,0.35); background: rgba(124,109,250,0.1); }
    .pw-role-select { background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 0.76rem; border-radius: 7px; padding: 0.25rem 0.5rem; }
    .pw-perms-grid { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.4rem; }
    .pw-settings-section { margin-bottom: 1.6rem; }
    .pw-settings-section h4 { font-family: 'Space Grotesk', sans-serif; font-size: 0.92rem; margin-bottom: 0.6rem; }
    .pw-settings-hint { color: var(--muted); font-size: 0.78rem; margin-bottom: 0.7rem; line-height: 1.5; }

    /* DISCOVER CONTENT HUB */
    .discover-tabs { display: flex; gap: 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; }

    /* Forum */
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; font-size: 0.8rem; color: var(--muted); margin-bottom: 0.4rem; }
    .forum-thread-list { display: flex; flex-direction: column; gap: 0.75rem; }
    .forum-thread-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; cursor: pointer; transition: border-color 0.15s; }
    .forum-thread-card:hover { border-color: var(--cyan); }
    .forum-thread-cat { font-size: 0.74rem; color: var(--cyan); font-weight: 600; margin-bottom: 0.35rem; }
    .forum-thread-title { font-family: 'Space Grotesk', sans-serif; font-size: 1rem; margin-bottom: 0.35rem; }
    .forum-thread-meta { font-size: 0.78rem; color: var(--muted); }
    .forum-thread-detail { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.3rem; margin-bottom: 1.5rem; }
    .forum-thread-detail h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; margin: 0.4rem 0; }
    .forum-thread-body { font-size: 0.9rem; line-height: 1.55; white-space: pre-wrap; margin-top: 0.6rem; }
    .forum-reply { border-left: 2px solid var(--border); padding: 0.65rem 0 0.65rem 0.9rem; margin-bottom: 0.6rem; }
    .forum-reply-head { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.25rem; }
    .forum-reply-author { font-weight: 600; font-size: 0.84rem; }
    .forum-reply-time { font-size: 0.74rem; color: var(--muted); }
    .forum-reply-text { font-size: 0.87rem; line-height: 1.5; }
    .forum-reply-link { background: none; border: none; color: var(--cyan); font-size: 0.76rem; cursor: pointer; padding: 0.3rem 0; }
    .forum-reply-composer { position: sticky; bottom: 0; background: var(--bg); padding-top: 1rem; margin-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.6rem; }

    /* IDEAS BOARD (ideas.js, ADDED 2026-08-05) */
    .idea-list { display: flex; flex-direction: column; gap: 0.7rem; }
    .idea-card { display: flex; gap: 0.9rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.9rem 1.1rem; }
    .idea-vote-btn { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; background: transparent; border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.7rem; cursor: pointer; color: var(--muted); min-width: 3.2rem; height: fit-content; font-family: inherit; }
    .idea-vote-btn:hover { border-color: var(--cyan); color: var(--cyan); }
    .idea-vote-btn.voted { border-color: var(--cyan); color: var(--cyan); background: var(--cdim); }
    .idea-vote-arrow { font-size: 0.9rem; line-height: 1; }
    .idea-vote-count { font-weight: 700; font-size: 0.95rem; }
    .idea-card-body { flex: 1; min-width: 0; }
    .idea-card-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.98rem; margin-bottom: 0.3rem; }
    .idea-card-desc { font-size: 0.85rem; color: var(--text); line-height: 1.5; margin-bottom: 0.4rem; white-space: pre-wrap; }
    .idea-card-meta { font-size: 0.76rem; color: var(--muted); }

    /* ADDED (2026-07-25, Nutzer-Wunsch: internes Link-System — "im Forum
       das Projekt verlinken können") — Vorschau-Pille im Composer
       (forumNewThreadLinkPreview/forumReplyLinkPreview), Auswahl-Zeilen im
       Picker-Modal, und die fertige klickbare Pille an einem geposteten
       Thread/einer Reply (buildForumLinkedListingChip() in forum.js). */
    .forum-link-preview { display: flex; align-items: center; gap: 0.5rem; }
    .forum-link-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--cdim); color: var(--cyan); border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--border)); border-radius: 99px; padding: 0.25rem 0.7rem; font-size: 0.78rem; font-weight: 600; }
    .forum-link-chip-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 0.2rem; }
    .forum-link-chip-remove:hover { color: var(--text); }
    .forum-link-pick-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
    .forum-link-pick-row:hover { background: var(--surface); border-color: var(--border); }
    .forum-linked-listing { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.45rem 0.8rem; margin-top: 0.6rem; cursor: pointer; font-size: 0.82rem; transition: border-color 0.15s; }
    .forum-linked-listing:hover { border-color: var(--cyan); }
    .forum-linked-listing-arrow { color: var(--cyan); margin-left: auto; }
    .forum-replying-note { font-size: 0.78rem; color: var(--cyan); cursor: pointer; }
    .discover-tab { padding: 0.65rem 0.2rem; margin-right: 1.75rem; background: none; border: none; color: var(--muted); font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; }
    .discover-tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
    /* Real All/Music/Sound-Effects filter on the Discover Audio tab (see
       setAudioSubFilter() in discover.js) — a pill-toggle row, distinct
       from the tag-filter-btn look above so it doesn't get confused with
       the (unrelated) hierarchical tag filter modal. */
    .discover-audio-subfilter { display: flex; gap: 0.4rem; margin-bottom: 1rem; flex-wrap: wrap; }
    .audio-subfilter-btn { background: var(--card); border: 1px solid var(--border); border-radius: 99px; padding: 0.35rem 0.85rem; font-size: 0.78rem; color: var(--muted); cursor: pointer; font-family: inherit; transition: all 0.12s; }
    .audio-subfilter-btn:hover { border-color: var(--purple); color: var(--text); }
    .audio-subfilter-btn.active { background: var(--purple); border-color: var(--purple); color: #fff; }

    /* ADDED (2026-08-02, Nutzer-Wunsch: "erweiterte Suche... schnell Text
       aus verschiedenen Sachen einklicken"): quick-click word panel for the
       Audio tab — built from tagTaxonomy in renderAudioExtSearchPanel()
       (discover.js), same underlying activeTagFiltersByTab.audio array as
       the 🏷️ Tags modal (toggleExtTagFilter() in discover.js). */
    .ext-search-row { margin-bottom: 0.6rem; }
    .ext-search-toggle-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.85rem; font-size: 0.8rem; color: var(--muted); cursor: pointer; font-family: inherit; }
    .ext-search-toggle-btn:hover, .ext-search-toggle-btn.active { border-color: var(--cyan); color: var(--cyan); }
    .ext-search-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; margin-bottom: 1.1rem; }
    .ext-group { margin-bottom: 0.85rem; }
    .ext-group:last-child { margin-bottom: 0; }
    .ext-label { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 0.5rem; }
    .ext-words { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .ext-word { font-size: 0.78rem; padding: 0.28rem 0.7rem; border-radius: 7px; border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: all 0.15s; user-select: none; background: var(--card); }
    .ext-word:hover { border-color: var(--cyan); }
    .ext-word.active { background: var(--cyan); border-color: var(--cyan); color: #0a0e1a; font-weight: 600; }
    .ext-clear { font-size: 0.72rem; color: var(--muted); cursor: pointer; margin-top: 0.6rem; display: inline-block; }
    .ext-clear:hover { color: var(--pink, #ff6ec7); }

    /* License quick-filter chips (Graphics tab) — see setLicenseFilter()/
       renderGraphicsLicenseChips() in discover.js. Same pill look as the
       graphics-redesign-demo.html mockup's license chips. */
    .discover-license-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
    .discover-license-chip { font-family: var(--mono); font-size: 0.7rem; padding: 0.3rem 0.65rem; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: all 0.15s; }
    .discover-license-chip:hover { border-color: var(--cyan); color: var(--cyan); }
    .discover-license-chip.active { background: var(--cdim); border-color: var(--cyan); color: var(--cyan); }

    .tag-filter-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.85rem; font-size: 0.8rem; color: var(--text); cursor: pointer; font-family: inherit; }
    .tag-filter-btn:hover { border-color: var(--cyan); }
    .active-tag-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .active-tag-pill { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: 0.68rem; color: var(--cyan); background: var(--cdim); border: 1px solid rgba(0,212,255,0.3); padding: 0.22rem 0.5rem 0.22rem 0.6rem; border-radius: 99px; }
    .active-tag-pill button { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0; }

    /* AUDIO GRID (sound/music content) */
    .audio-grid { display: flex; flex-direction: column; gap: 0.5rem; }
    /* Section headers splitting Music vs Sound Effects (see
       classifyAudioListing() in discover.js) — same look as
       .tile-section-label elsewhere, minus the huge top margin since this
       sits inside a tighter list, not between dashboard sections. */
    .audio-section-label { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin: 1.1rem 0 0.5rem; }
    .audio-section-label:first-child { margin-top: 0; }
    .audio-row { display: flex; align-items: center; gap: 1rem; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 1.1rem; transition: border-color 0.15s; }
    .audio-row:hover { border-color: var(--purple); }
    /* CHANGED (2026-08-02): only the title itself opens the detail page now
       (see buildAudioRow() in discover.js) — cursor:pointer moved here from
       .audio-row so it's clear which part is actually clickable. */
    .audio-title { cursor: pointer; }
    .audio-title:hover { text-decoration: underline; }
    /* CHANGED (2026-08-02, Nutzer-Wunsch: "Struktur an Pixabay Audio
       anlehnen"): thumbnail+title/artist → waveform → actions, same row
       order Pixabay uses, instead of play-button/cover/title/seek. The
       play button now overlays the cover on hover/while-playing (like the
       Discover Graphics cards' hover-play) instead of its own persistent
       circle button taking up a separate slot. */
    .audio-cover-wrap { position: relative; flex-shrink: 0; width: 52px; height: 52px; }
    /* ADDED (2026-07-24): square cover-art thumbnail, hydrated from
       listing.coverImage by hydrateAudioCovers() (discover.js) — replaces
       the old "identical row for every track" look with something that
       actually differs per upload, same reasoning as art-card's real
       thumbnail. Falls back to a plain note-emoji tile when no cover was
       set (most existing/legacy listings). */
    .audio-cover { width: 100%; height: 100%; border-radius: 8px; background: linear-gradient(135deg, #111827, #1a2035); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; overflow: hidden; }
    .audio-play-btn.audio-cover-play {
      position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px;
      background: rgba(10,14,26,0.55); color: #fff; border: none; font-size: 1.05rem;
      display: flex; align-items: center; justify-content: center; cursor: pointer;
      opacity: 0; transition: opacity 0.15s;
    }
    .audio-cover-wrap:hover .audio-cover-play, .audio-cover-wrap.playing .audio-cover-play { opacity: 1; }
    .audio-cover-wrap.playing .audio-cover-play { background: var(--purple); }
    .audio-info { flex: 1 1 170px; max-width: 260px; min-width: 100px; }
    .audio-title { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .audio-sub { color: var(--muted); font-size: 0.76rem; margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* REPLACED (2026-07-25, Nutzer-Wunsch: "man muss sonen Balken haben,
       den man frei verschieben kann... ohne da draufzuklicken aufs Feld"):
       war .audio-wave, reine Deko (zufällige Balkenhöhen, keine Funktion).
       Jetzt eine echte, ziehbare Seek-Leiste — Logik in discover.js
       (discSeekPointerDown() + die document-weiten pointermove/pointerup-
       Listener direkt darunter).
       CHANGED (2026-08-02, Nutzer-Wunsch: "wie bei Pixabay... gedimmte
       Balken, exakt bis zur Stelle hell, kein Farbverlauf"): the old flat
       .audio-seek-track/-fill/-handle bar (still used by the project-
       detail hero player, pd-audio-hero-seek — deliberately left alone,
       out of scope here) is replaced ONLY in this row by a dim base
       waveform plus an exactly-clipped bright copy on top (see
       arowWaveformBars()/discSetSeekFill() in discover.js). flex-grow so
       it takes the real center space like Pixabay's waveform, bounded by
       max-width so it doesn't stretch absurdly wide on very large screens. */
    .audio-seek.arow-seek { display: block; flex: 2 1 160px; max-width: 460px; min-width: 90px; width: auto; height: 34px; flex-shrink: 1; position: relative; cursor: pointer; touch-action: none; }
    .arow-wave { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; pointer-events: none; }
    .arow-wave span { flex: 1 1 0; min-width: 1.5px; border-radius: 2px; }
    .arow-wave-base span { background: var(--muted); opacity: 0.4; }
    .arow-wave-lit span { background: var(--purple); }
    .arow-wave-lit-layer { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path 0.2s linear; pointer-events: none; }
    /* ADDED (2026-08-05, Nutzer-Wunsch: "rechts oder links braucht man die
       Anzeige, soundso viel von soundso viel Sekunden"): the seek bar had
       no readable position/duration at all before — just the bar itself. */
    .audio-time { flex-shrink: 0; display: flex; align-items: baseline; gap: 0.2rem; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); min-width: 68px; justify-content: flex-end; }
    .audio-time-sep { opacity: 0.6; }

    /* GRAPHICS GRID (art/sprites/icons) */
    /* GEÄNDERT (2026-07-24): 160px/130px-Karten wirkten neben echten
       Thumbnails (statt nur Emoji) zu klein für den beabsichtigten
       "richtig was sehen"-Effekt — etwas größer, damit ein Cover-Bild auch
       wirklich als Bild wirkt statt als Briefmarke. */
    .art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }

    /* MARKETPLACE (public storefront) */
    .marketplace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
    .marketplace-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; cursor: default; transition: border-color 0.15s, transform 0.15s; display: flex; flex-direction: column; gap: 0.5rem; }
    .marketplace-card[onclick] { cursor: pointer; }
    .marketplace-card[onclick]:hover { border-color: var(--cyan); transform: translateY(-2px); }
    .marketplace-card-logo { font-size: 2rem; }
    .marketplace-card-name { font-weight: 700; font-size: 0.95rem; }
    .marketplace-card-category { font-family: var(--mono); font-size: 0.68rem; color: var(--purple); text-transform: uppercase; }
    .marketplace-card-blurb { font-size: 0.82rem; color: var(--muted); line-height: 1.5; flex: 1; }
    .marketplace-card-cta { font-size: 0.78rem; color: var(--cyan); font-weight: 600; }

    /* MARKETPLACE ZONES ("aisles of the mall") */
    .marketplace-zone { margin-bottom: 2rem; }
    .marketplace-zone-title { font-family: var(--mono); font-size: 0.9rem; color: var(--text); border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; margin-bottom: 1rem; }

    /* ROOM TEMPLATES — visual presets, layered on top of .marketplace-card */
    .room-template { border-color: color-mix(in srgb, var(--room-accent, var(--cyan)) 45%, var(--border)); }
    .room-template:hover { border-color: var(--room-accent, var(--cyan)); }
    .room-template .marketplace-card-cta { color: var(--room-accent, var(--cyan)); }
    .room-template-storefront .marketplace-card-logo { font-size: 2.2rem; }
    .room-template-catalog { flex-direction: row; align-items: flex-start; gap: 0.75rem; }
    .room-template-catalog .marketplace-card-logo { font-size: 1.6rem; }
    .room-template-showcase { text-align: center; }
    .room-template-showcase .marketplace-card-logo { font-size: 2.8rem; }
    .room-template-billboard { background: color-mix(in srgb, var(--room-accent, var(--cyan)) 10%, var(--card)); }
    .room-template-billboard .marketplace-card-name { font-size: 1.15rem; letter-spacing: -0.01em; }

    /* ROOM CONTENT BLOCKS — company-authored, escaped, structured */
    .room-blocks { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.4rem; }
    .room-block-heading { font-size: 0.92rem; font-weight: 700; }
    .room-block-text { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
    .room-block-image img { width: 100%; border-radius: 8px; display: block; }
    .room-block-image figcaption { font-size: 0.72rem; color: var(--muted); margin-top: 0.25rem; }
    .room-block-product { border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem; }
    .room-block-product img { width: 100%; border-radius: 6px; margin-bottom: 0.35rem; }
    .room-block-product-name { font-weight: 600; font-size: 0.82rem; }
    .room-block-product-price { color: var(--room-accent, var(--cyan)); font-size: 0.78rem; font-weight: 600; }
    .room-block-product-link, .room-block-link-btn { display: inline-block; font-size: 0.78rem; color: var(--room-accent, var(--cyan)); font-weight: 600; margin-top: 0.25rem; }

    /* FULL-CUSTOM ROOM — sandboxed iframe, no script/origin access (see marketplace.js buildFullCustomRoomCard) */
    .room-full-custom { padding: 0; overflow: hidden; }
    .room-full-custom-frame { width: 100%; height: 260px; border: 0; display: block; background: var(--card); }
    .marketplace-card-cta-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.85rem; border-top: 1px solid var(--border); }
    .marketplace-card-cta-bar button.marketplace-card-cta { background: none; border: none; cursor: pointer; font-family: inherit; }

    /* MARKETPLACE ADMIN */
    .marketplace-admin-row { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.85rem; margin-bottom: 0.65rem; }
    .marketplace-admin-row-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
    .marketplace-admin-row-name { font-weight: 600; font-size: 0.9rem; }
    .marketplace-admin-status { font-family: var(--mono); font-size: 0.68rem; padding: 0.15rem 0.5rem; border-radius: 5px; white-space: nowrap; }
    .marketplace-status-pending { color: #ffd43b; background: rgba(255,212,59,0.1); border: 1px solid rgba(255,212,59,0.3); }
    .marketplace-status-active { color: var(--green); background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.3); }
    .marketplace-status-paused { color: var(--muted); background: var(--surface); border: 1px solid var(--border); }
    .marketplace-status-archived { color: var(--red); background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.3); }
    .marketplace-admin-row-meta { color: var(--muted); font-size: 0.78rem; margin-top: 0.3rem; }
    .marketplace-admin-row-note { font-size: 0.78rem; margin-top: 0.4rem; background: var(--cdim); border-radius: 6px; padding: 0.4rem 0.55rem; color: var(--text); }
    .marketplace-admin-row-actions { display: flex; gap: 0.4rem; margin-top: 0.6rem; flex-wrap: wrap; }
    .marketplace-admin-form { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1rem; margin-top: 1.25rem; }
    .marketplace-admin-form .field { margin-bottom: 0.75rem; }
    .marketplace-admin-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .art-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color 0.15s, transform 0.15s; }
    .art-card:hover { border-color: var(--cyan); transform: translateY(-2px); }
    .art-thumb { height: 160px; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; background: linear-gradient(135deg, #111827, #1a2035); overflow: hidden; }
    /* itch.io-style subtle zoom on the card's real thumbnail (once
       hydrateArtThumbnails() in discover.js swaps the emoji placeholder
       for an actual <img>) — no effect on the emoji fallback since that
       has no <img> to target. */
    .art-thumb img { transition: transform 0.3s ease; }
    .art-card:hover .art-thumb img { transform: scale(1.06); }
    .art-body { padding: 0.7rem 0.8rem; }
    .art-title { font-size: 0.8rem; font-weight: 600; }
    .art-author { font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem; }
    .art-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
    .art-badge { font-family: var(--mono); font-size: 0.62rem; padding: 0.12rem 0.45rem; border-radius: 99px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
    .art-badge-type { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 40%, var(--border)); }
    .art-badge-license { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }

    /* TAG PICKER MODAL */
    .tag-modal-overlay { position: fixed; inset: 0; background: rgba(5,7,14,0.85); backdrop-filter: blur(4px); z-index: 210; display: flex; align-items: flex-end; justify-content: center; }
    @media (min-width: 640px) { .tag-modal-overlay { align-items: center; } }
    .tag-modal { background: var(--card); border: 1px solid var(--border); border-radius: 18px 18px 0 0; padding: 1.5rem; max-width: 480px; width: 100%; max-height: 78vh; overflow-y: auto; }
    @media (min-width: 640px) { .tag-modal { border-radius: 18px; } }
    .tag-modal h3 { font-family: 'Space Grotesk', sans-serif; margin-bottom: 0; }
    .tag-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
    .tag-modal-close { background: none; border: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0.35rem; border-radius: 8px; transition: background 0.15s, color 0.15s; }
    .tag-modal-close:hover { background: var(--border); color: var(--text); }
    .tag-category { margin-bottom: 1.25rem; }
    .tag-category-label { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; }
    .tag-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .collab-vis-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.2rem; }
    .tag-chip { padding: 0.32rem 0.8rem; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 0.78rem; cursor: pointer; font-family: inherit; }
    .tag-chip.selected { border-color: var(--cyan); color: var(--cyan); background: var(--cdim); }
    .tag-modal-actions { display: flex; gap: 0.6rem; margin-top: 0.5rem; position: sticky; bottom: 0; background: var(--card); padding-top: 0.75rem; }

    /* DevForge Tools tag filter dropdown (programs.js, ADDED 2026-08-05) */
    .tag-dropdown { position: relative; flex: 1; min-width: 200px; }
    .tag-dropdown-btn { width: 100%; text-align: left; padding: 0.6rem 0.9rem; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: 0.85rem; cursor: pointer; font-family: inherit; }
    .tag-dropdown-btn.active { border-color: var(--cyan); color: var(--cyan); }
    .tag-dropdown-panel { position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 0.4rem; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }

    /* PROJECT SANDBOX */
    /* GEÄNDERT (2026-07-24): 360px war auf jedem nicht-winzigen Monitor viel
       zu klein für ein tatsächlich spielbares Game/Tool — an den
       Viewport gekoppelt (70vh) statt fest, mit Ober-/Untergrenze. */
    .sandbox-wrap { background: #000; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 1rem; }
    .sandbox-frame { width: 100%; height: min(70vh, 720px); min-height: 360px; border: none; display: block; background: #000; }
    .sandbox-placeholder { height: min(70vh, 720px); min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; color: var(--muted); text-align: center; padding: 1.5rem; }
    .sandbox-placeholder .big { font-size: 2.5rem; }
    .sandbox-note { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); padding: 0.5rem 0.85rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
    .sandbox-fullscreen-btn { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); background: none; border: 1px solid var(--border); border-radius: 5px; padding: 0.2rem 0.5rem; cursor: pointer; flex-shrink: 0; }
    .sandbox-fullscreen-btn:hover { color: var(--text); border-color: var(--cdim); }
    /* GEÄNDERT (2026-07-24): war die native requestFullscreen()-API auf
       dem iframe — das nimmt aber den ganzen MONITOR (echtes OS-Vollbild),
       nicht nur das Browserfenster. Bei einem halb-breiten Browserfenster
       (z.B. neben einem anderen Fenster) sprang der Bildschirm dadurch
       komplett um, statt nur den verfügbaren Platz im Fenster auszufüllen
       — genau das Gegenteil von "wie der Vollbild-Knopf über einem
       YouTube-Video". Jetzt: reines CSS-Overlay (position:fixed über den
       ganzen BROWSER-Viewport), umgeschaltet über sandboxFullscreen() in
       workspace.js — bleibt innerhalb des Browserfensters.
       Vgl. .sandbox-frame:fullscreen weiter unten. */
    .sandbox-wrap.sandbox-expanded {
      position: fixed; inset: 0; z-index: 2000; margin: 0; border-radius: 0;
      display: flex; flex-direction: column;
    }
    .sandbox-wrap.sandbox-expanded .sandbox-frame,
    .sandbox-wrap.sandbox-expanded .sandbox-placeholder {
      height: auto; min-height: 0; flex: 1 1 auto;
    }
    body.sandbox-expanded-active { overflow: hidden; }
    /* runSandboxBundle()'s loading/error text (workspace.js) — sits below
       the frame, outside the sandboxed iframe itself since it's app UI,
       not part of the untrusted bundle being run. */
    .sandbox-status { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); padding: 0.7rem 0.85rem; border-top: 1px solid var(--border); line-height: 1.5; }
    .sandbox-status.sandbox-status-error { color: #ffb43c; }
    .access-mode-badge { font-family: var(--mono); font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 5px; display: inline-flex; align-items: center; gap: 0.3rem; }
    .access-mode-download { color: var(--green); background: rgba(0,230,118,0.1); border: 1px solid rgba(0,230,118,0.3); }
    .access-mode-sandbox  { color: var(--purple); background: rgba(124,109,250,0.1); border: 1px solid rgba(124,109,250,0.3); }

    /* ═══════════════════════════════════════════════════
       ADMIN ANALYTICS DASHBOARD
       ═══════════════════════════════════════════════════ */
    .dash-page { max-width: 980px; }
    .dash-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; }
    .dash-range-row { display: flex; gap: 0.4rem; }
    .dash-range-btn { padding: 0.4rem 0.9rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.15s; }
    .dash-range-btn.selected { border-color: var(--cyan); color: var(--cyan); background: rgba(0,212,255,0.08); }
    .dash-range-btn:hover { border-color: var(--cyan); color: var(--cyan); }
    .dash-export-btn { font-size: 0.8rem; padding: 0.4rem 0.9rem; }

    .dash-demo-notice { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); background: rgba(124,109,250,0.08); border: 1px solid rgba(124,109,250,0.25); border-radius: 8px; padding: 0.7rem 0.9rem; margin-bottom: 1.25rem; }
    .dash-loading { color: var(--muted); font-size: 0.85rem; padding: 2rem 0; text-align: center; }

    .dash-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
    .dash-kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.1rem; }
    .dash-kpi-label { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
    .dash-kpi-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--cyan); line-height: 1.2; }
    .dash-kpi-sub { font-size: 0.72rem; color: var(--muted); margin-top: 0.3rem; }

    .dash-section { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
    .dash-section h3 { font-family: 'Space Grotesk', sans-serif; font-size: 0.95rem; margin-bottom: 0.75rem; }
    .dash-section-sub { color: var(--muted); font-size: 0.78rem; line-height: 1.6; margin-bottom: 0.5rem; }
    .dash-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
    @media (min-width: 720px) { .dash-grid-2 { grid-template-columns: 1fr 1fr; } }

    .dash-chart-wrap { overflow-x: auto; }
    .dash-chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; min-width: 100%; }
    .dash-bar-col { flex: 1; min-width: 6px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 0.3rem; }
    .dash-bar { width: 100%; background: linear-gradient(180deg, var(--cyan), var(--purple)); border-radius: 3px 3px 0 0; min-height: 2px; transition: opacity 0.15s; }
    .dash-bar-col:hover .dash-bar { opacity: 0.7; }
    .dash-bar-label { font-family: var(--mono); font-size: 0.6rem; color: var(--muted); white-space: nowrap; transform: rotate(-40deg); transform-origin: top left; margin-top: 0.4rem; }

    .dash-row { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); }
    .dash-row:last-child { border-bottom: none; }
    .dash-row-label { font-size: 0.82rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dash-row-bar-bg { background: var(--border); border-radius: 99px; height: 6px; overflow: hidden; }
    .dash-row-bar-fill { background: var(--cyan); height: 100%; border-radius: 99px; }
    .dash-row-value { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); text-align: right; min-width: 3.5ch; }

    .dash-ad-table { font-size: 0.82rem; }
    .dash-ad-table-head, .dash-ad-table-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0.5rem; padding: 0.55rem 0; align-items: center; }
    .dash-ad-table-head { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); }
    .dash-ad-table-row { border-bottom: 1px solid var(--border); }
    .dash-ad-table-row:last-child { border-bottom: none; }

    .dash-retention-row { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }
    .dash-retention-bar-wrap { flex: 1; min-width: 220px; }
    .dash-retention-bar-bg { background: var(--border); border-radius: 99px; height: 10px; overflow: hidden; margin-bottom: 0.5rem; }
    .dash-retention-bar-fill { background: linear-gradient(90deg, var(--cyan), var(--green)); height: 100%; border-radius: 99px; transition: width 0.3s; }
    .dash-avg-session-card { background: var(--surface, var(--bg)); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1.2rem; text-align: center; }

    .dash-empty-note { color: var(--muted); font-size: 0.82rem; padding: 0.5rem 0; }

    /* ── Internal confirm/alert/prompt modal (dialogs.js) ── */
    .app-dialog-overlay { position: fixed; inset: 0; background: rgba(5,7,14,0.85); backdrop-filter: blur(4px); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1rem; }
    .app-dialog-overlay.hidden { display: none; }
    .app-dialog-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1.4rem; width: 100%; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
    .app-dialog-message { font-size: 0.9rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
    .app-dialog-input-wrap { margin-top: 0.9rem; }
    .app-dialog-input { width: 100%; }
    .app-dialog-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.2rem; }

    /* ── Honeypot bot trap (anti-spam) ──
       Deliberately NOT display:none/visibility:hidden — bot form-fillers
       increasingly skip those two specifically. Clipped to 1x1px and
       shoved off-screen instead, so it's still a "visible" element to a
       naive DOM-fill script but invisible and unreachable (tabindex -1,
       aria-hidden) for real people and screen readers. Any submission
       with this field non-empty is treated as automated and dropped. */
    .hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

    /* ── Gate screen (anti-bot loading gate before login/guest entry) ── */
    .gate-spinner { width: 34px; height: 34px; margin: 1.4rem auto 0.8rem; border: 3px solid var(--border); border-top-color: var(--cyan); border-radius: 50%; animation: gate-spin 0.8s linear infinite; }
    @keyframes gate-spin { to { transform: rotate(360deg); } }
    .gate-loading-text { color: var(--muted); font-size: 0.85rem; text-align: center; margin-bottom: 1.2rem; }
    /* The trap below is deliberately NOT hidden like .hp-field — it must
       render as a normal, fully visible, normal-sized control. Smarter
       bots specifically check element visibility/bounding-box to detect
       and skip disguised honeypots; a plain written instruction in a
       real, visible element defeats that tier instead, since it takes
       actual language comprehension (not a visibility check) to know
       not to touch it. No border/box around it on purpose — it should
       read as one more line in the gate screen, not a separate panel. */
    .gate-trap { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 1.4rem; font-size: 0.7rem; color: var(--muted); line-height: 1.4; cursor: default; text-align: left; }
    /* The global `input { width:100%; padding:... }` rule (this file, top)
       is meant for text inputs — without overriding it here a checkbox
       stretches to the full row width and eats all the space meant for
       the instruction text next to it. */
    .gate-trap input { width: auto; padding: 0; margin-top: 0.15rem; flex-shrink: 0; }
    /* Flex items default to min-width:auto, so without this the long
       instruction text refuses to wrap and overflows past the card
       instead of breaking onto multiple lines. */
    .gate-trap span { flex: 1; min-width: 0; }