.panel {
            background: var(--skin-content-bg);
            backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            -webkit-backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            border: 1px solid var(--skin-content-border);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 10px 30px var(--skin-content-shadow);
            color: var(--skin-content-text);
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }

        /* flex-column so extra height (e.g. a tall sidebar-driven stretch on other pages) reaches
           the children (#bossSelect, .boss-explorer) instead of only the height of the tab's own
           content -- without this, a divider between columns inside a tab wouldn't reach the
           bottom of the panel. */
        .panel.main-panel {
            display: flex;
            flex-direction: column;
        }

        .panel.main-panel .tabs {
            flex-shrink: 0;
        }

        .panel.main-panel .tab-content.active {
            flex: 1;
            min-height: 0;
        }

        /* Every standalone .panel.main-panel page (i.e. every page except Simulador's old
           sidebar+content split, now gone too) is capped and centered so the whole page shrinks
           together on a wide screen instead of the white panel stretching to the site's full
           1800px container cap -- Simulador included, now that it's a single-panel page like the
           rest (its card grid just wraps to fewer columns at this width, same responsive
           behavior as any other minmax()-based grid). */
        #page-simulador .panel.main-panel,
        #page-builds .panel.main-panel,
        #page-skillplanner .panel.main-panel,
        #page-home .panel.main-panel {
            max-width: 900px;
            margin: 0 auto;
        }

        .panel h2 {
            color: var(--skin-accent-text);
            margin-bottom: 15px;
            border-bottom: 2px solid var(--skin-accent-text);
            padding-bottom: 10px;
            font-size: 1.2em;
        }

        /* Covers plain, unstyled sub-headings like "Weapon Cards"/"Armor Cards" -- these had no
           color rule of their own, so they were just inheriting .panel's body text color (fine
           for legibility, but read as a lower-importance label sitting right above section
           headers -- like .panel h2 and the rarity/maint bars -- that DO use the accent color,
           an inconsistency the user flagged as titles not following the skin). */
        .panel h3 {
            color: var(--skin-accent-text);
            font-size: 1em;
        }

        /* Segmented-pill tab control, replacing the old underline (text color + border-bottom).
           The underline was designed for the very first, plain-white version of this app; once
           the row itself grew its own accent-tinted border-bottom (see "Skin System" pass 4), the
           active tab's own underline sat right on top of that same line and visually fused with
           it -- "estaca com a parte de baixo que tem uma linha" per the user. A filled pill
           inside a glass track sidesteps that entirely (no border-bottom anywhere to collide
           with) and matches how "this is selected" is already expressed everywhere else in the
           app (.nav-link.active, .filter-chip.active, .guide-card.selected, .boss-category-item.
           selected are all filled blocks, not underlines). */
        /* Site-wide rule now: --skin-card-bg is reserved for ATOMIC leaf items (a single card, a
           single chip, a single button) -- anything that GROUPS other elements (a tab track, a
           drawer, a side panel) reuses the parent glass's own --skin-content-bg/blur instead, so
           the container reads as "one more stacked pane," always a shade deeper than whatever's
           behind it, no matter how many levels deep it sits (real backdrop-filter compositing
           against whatever's actually rendered behind it does the darkening automatically -- no
           per-depth-level override needed, unlike the earlier scoped .skill-planner-main .tabs
           exception this replaces). Individual .tab-btn items still pop against this via their own
           active/hover treatment, unaffected by the container's own color. */
        .tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 20px;
            background: var(--skin-content-bg);
            backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            -webkit-backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            border: 1px solid var(--skin-content-border);
            border-radius: 12px;
            padding: 4px;
        }

        .tab-btn {
            padding: 9px 15px;
            background: none;
            border: none;
            border-radius: 9px;
            cursor: pointer;
            font-weight: 600;
            color: var(--skin-text-muted);
            transition: opacity 0.3s, transform 0.3s;
        }

        .tab-btn:hover:not(.active) {
            background: var(--skin-card-bg-hover);
        }

        .tab-btn.active {
            background: var(--skin-active-2);
            color: var(--skin-active-text);
            box-shadow: 0 2px 8px color-mix(in srgb, var(--skin-active-2) 35%, transparent);
        }

        /* No max-height/overflow here anymore -- capping every tab's content at a fixed 600px
           with its own internal scrollbar (independent of the page's own scroll) made big content
           (the full weapon/armor card grid, especially) feel stuck in a small box instead of just
           being part of the page. Content now grows naturally and the PAGE scrolls, like every
           other page in the app already does. */
        .tab-content {
            display: none;
        }

        #cards {
            cursor: grab;
        }

        #cards.dragging {
            cursor: grabbing;
        }

        .tab-content.active {
            display: block;
        }

        button {
            padding: 10px;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.3s, transform 0.3s, filter 0.3s, box-shadow 0.3s;
            font-size: 0.85em;
        }

        /* flex: 1 is opt-in (set explicitly below on .tab-btn), not a global default -- a bare
           "button { flex: 1 }" used to apply to every button on the page, so any button dropped
           into an unrelated flex container (a sidebar nav, a category list, ...) silently
           stretched to fill it. That caused the same bug twice already (.boss-category-item,
           .nav-link) before being fixed at the root here instead of patching each new button
           with "flex: none" as the bug kept recurring. */
        .tab-btn {
            flex: 1;
        }

        .btn-primary {
            background: var(--skin-accent-text);
            color: var(--skin-active-text);
        }

        .btn-primary:hover {
            filter: brightness(0.92);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px color-mix(in srgb, var(--skin-accent-text) 40%, transparent);
        }

        .btn-secondary {
            background: var(--skin-card-bg-active);
            color: var(--skin-content-text);
        }

        .btn-secondary:hover { background: var(--skin-card-bg-hover); }

        .btn-danger {
            background: #e74c3c;
            color: white;
        }

        .btn-danger:hover { background: #c0392b; }

        /* No background of its own anymore -- it's the bottom region of .rarity-section's single
           surface (see that rule above), not a separate box. Just a hairline divider under the
           header row to separate the two regions within the one shared background. */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(calc(120px * var(--card-scale)), 1fr));
            gap: calc(15px * var(--card-scale));
            padding: 14px;
            border-top: 1px solid var(--skin-content-border);
        }