/* "Presets de Cartas" tab: generated MVP builds (main) + maintenance suggestions (side
           column), same main+side-column shape as .boss-result-layout above -- reused instead of
           stacking maintenance below the build grid, which read as a second unrelated section
           bolted onto the bottom rather than something that belongs beside the builds it's about. */
        .builds-layout {
            display: flex;
            gap: 20px;
            align-items: flex-start;
            flex-wrap: wrap;
        }

        /* No wrapping box here, on purpose -- reverted after the first attempt added a whole
           extra background layer behind the .mvp-card grid instead of what was actually asked
           (fix the build CARD's own background). Unlike .builds-maint-col (a dense list of small
           .maint-item rows that genuinely benefits from one unifying container), each .mvp-card
           here is already a complete, large, self-contained unit -- wrapping a grid of those in
           ANOTHER box just doubles up the framing for no reason. */
        .builds-main-col {
            flex: 1 1 380px;
            min-width: 300px;
        }

        /* Same depth fix as .boss-result-elements above -- this column CONTAINS .maint-item rows
           that already use --skin-card-bg themselves (see below), so giving the column that same
           variable made the container and its own contents read as the identical flat shade, no
           visible nesting at all. */
        .builds-maint-col {
            flex: 0 0 320px;
            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: 8px;
            padding: 14px 16px;
        }

        .elem-rank-title {
            font-size: 0.72em;
            font-weight: 700;
            color: var(--skin-accent-text);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .elem-rank-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            padding: 3px 0;
            font-size: 0.8em;
            font-weight: 700;
            border-bottom: 1px solid var(--skin-divider);
        }

        .elem-rank-row:last-child { border-bottom: none; }
        .elem-rank-row.pos { color: #27ae60; }
        .elem-rank-row.neg { color: #e74c3c; }
        .elem-rank-row.zero { color: var(--skin-text-faint); font-weight: 600; }

        .slot-title {
            font-weight: 600;
            color: var(--skin-accent-text);
            font-size: 0.75em;
            text-transform: uppercase;
            margin-top: 8px;
            margin-bottom: 5px;
        }

        .build-slots {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            margin-bottom: 8px;
        }

        .build-card {
            position: relative;
            width: 74px;
            height: 98px;
            border-radius: 8px;
            overflow: hidden;
            border: 2px solid transparent;
            flex-shrink: 0;
            cursor: default;
        }

        .build-card img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .build-card .card-name-overlay {
            font-size: 0.62em !important;
            padding: 3px 2px !important;
        }

        .build-card.empty {
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--skin-card-bg);
            color: var(--skin-text-faint);
            font-size: 1.6em;
            border: 3px dashed var(--skin-card-border);
        }

        .build-card[data-rarity="Green"] { border-color: #63D4A8; }
        .build-card[data-rarity="Blue"] { border-color: #75C4F5; }
        .build-card[data-rarity="Purple"] { border-color: #9392ED; }
        .build-card[data-rarity="Red"] { border-color: #FF5948; }
        .build-card[data-rarity="Gold"] { border-color: #F0B85D; }

        .build-card .star-badge {
            position: absolute;
            top: 2px;
            right: 2px;
            z-index: 3;
            background: rgba(20,20,30,0.6);
            border-radius: 8px;
            padding: 1px 4px;
            font-size: 0.55em;
            color: #ffd76b;
            letter-spacing: 1px;
            line-height: 1;
        }

        @media (max-width: 1000px) {
            .cards-grid {
                grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            }

            .boss-explorer {
                flex-wrap: wrap;
            }

            .skill-planner-layout {
                flex-direction: column;
            }

            .skill-planner-sidebar {
                flex: 0 0 auto;
                width: 100%;
            }
        }

        input[type="file"] { display: none; }

        /* Content-bg, not card-bg -- a full-width page control framing the page (like .tabs/
           .filter-panel below it), not an atomic item repeated many times, so it follows the same
           "container" rule for visual consistency with everything else at this level. */
        .search-box {
            width: 100%;
            padding: 10px;
            border: 2px solid var(--skin-content-border);
            border-radius: 8px;
            margin-bottom: 15px;
            font-size: 0.9em;
            background: var(--skin-content-bg);
            backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            -webkit-backdrop-filter: blur(var(--skin-content-blur)) saturate(150%);
            color: var(--skin-content-text);
        }

        .search-box:focus {
            outline: none;
            border-color: var(--skin-accent-text);
        }

        /* Same "container" rule as .filter-panel/.tabs above -- this row groups the Filtros
           toggle, sealed toggle, and Download/Upload/Limpar into one framed unit instead of
           floating loose directly on .panel, matching everything else at this level. */
        .filter-toggle-row {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 10px;
            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: 10px;
            padding: 10px 12px;
        }

        .filter-toggle-btn, .filter-reset-btn {
            padding: 6px 12px;
            border: 2px solid var(--skin-accent-text);
            background: var(--skin-card-bg);
            color: var(--skin-accent-text);
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.8em;
            cursor: pointer;
        }

        .filter-toggle-btn:hover, .filter-reset-btn:hover {
            background: var(--skin-active-2);
            color: var(--skin-active-text);
        }

        .filter-reset-btn {
            border-color: var(--skin-card-border);
            color: var(--skin-text-muted);
        }

        .filter-reset-btn:hover {
            background: var(--skin-active-2);
            color: var(--skin-active-text);
        }

        .sealed-toggle {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.8em;
            font-weight: 600;
            color: var(--skin-text-muted);
            cursor: pointer;
        }

        /* Content-bg, not card-bg -- groups the weapon/armor slot-count radios, a container not a
           leaf, same rule as everything else in this pass. */
        .build-config {
            display: flex;
            flex-wrap: wrap;
            gap: 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: 10px;
            padding: 12px 16px;
            margin-bottom: 15px;
        }
        .build-config-group { display: flex; align-items: center; gap: 12px; }
        .build-config-label { font-weight: 700; color: var(--skin-content-text); font-size: 0.9em; white-space: nowrap; }
        .build-config-options { display: flex; gap: 12px; }
        .radio-option {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 0.9em;
            font-weight: 600;
            color: var(--skin-text-muted);
            cursor: pointer;
        }
        .radio-option input[type="radio"] { cursor: pointer; accent-color: var(--skin-accent-text); }

        .card-size-control {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8em;
            font-weight: 600;
            color: var(--skin-text-muted);
            margin-left: auto;
        }

        .card-size-control input[type="range"] {
            width: 90px;
            accent-color: var(--skin-accent-text);
        }

        .card-size-control span {
            min-width: 34px;
            text-align: right;
        }

        /* Same depth fix as .builds-maint-col above -- contains .filter-chip, which already uses
           --skin-card-bg itself, so the panel and its own chips used to read as one flat shade. */
        .filter-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: 8px;
            padding: 12px;
            margin-bottom: 15px;
        }

        .filter-group {
            margin-bottom: 10px;
        }

        .filter-group:last-child {
            margin-bottom: 0;
        }

        .filter-group-title {
            font-size: 0.75em;
            font-weight: 700;
            color: var(--skin-accent-text);
            text-transform: uppercase;
            margin-bottom: 5px;
        }

        .filter-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .filter-chip {
            padding: 4px 10px;
            border: 1px solid var(--skin-card-border);
            background: var(--skin-card-bg);
            color: var(--skin-text-muted);
            border-radius: 14px;
            font-size: 0.75em;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.15s, transform 0.15s;
        }

        .filter-chip.active {
            background: var(--skin-active-2);
            border-color: var(--skin-active-2);
            color: var(--skin-active-text);
        }

        /* The drawer is now ONE surface, not a header-pill floating above a separate body box --
           the header used to carry its own --skin-card-bg + box-shadow (an .mvp-card-style "chip"
           recipe) while .cards-grid carried a SEPARATE --skin-content-bg box below it, which read
           as two disconnected backgrounds instead of "cards live inside their rarity drawer." The
           whole .rarity-section is now the single glass surface (reusing .panel's own
           content-bg/blur, same "container" rule as .tabs/.filter-panel/etc. above) with the
           rarity's own border-left accent on the OUTER box instead of just the header -- the
           header and the card grid are just two regions of flush interior padding, not two boxes.
           overflow:hidden clips both regions' square corners/hover-tints to the section's own
           rounded corners so it still reads as one rounded shape. */
        .rarity-section {
            margin-bottom: 12px;
            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-left: 4px solid var(--rarity-accent);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            overflow: hidden;
        }

        .rarity-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            cursor: pointer;
            font-weight: 700;
            text-transform: uppercase;
            user-select: none;
            color: var(--skin-content-text);
        }

        .rarity-header:hover {
            background: var(--skin-card-bg-hover);
        }

        .rarity-header-arrow {
            font-size: 0.9em;
            width: 12px;
        }

        .rarity-header-count {
            margin-left: auto;
            font-size: 0.8em;
            font-weight: 500;
            opacity: 0.85;
        }

        /* Colors sampled directly (via a pixel-scan script, not eyeballed) from the actual
           in-game item-icon rarity backgrounds the user provided in refs/raridade *.png --
           hue-filtered pixel scan for each rarity's own color family, taking the most-saturated
           cluster as the dark stop and the highest-value cluster as the light stop. This replaces
           the earlier hand-guessed palette, which came out far off (too washed out on some, wrong
           hue on others) since eyeballing a small reference thumbnail isn't precise enough to
           reproduce as an exact hex value. Now set on .rarity-section itself (see above) rather
           than .rarity-header -- a custom property set on the header wouldn't reach the section's
           own border-left, since CSS custom properties only cascade DOWN to descendants. */
        .rarity-section-Red { --rarity-accent: #D34639; }
        .rarity-section-Gold { --rarity-accent: #FFBF42; }
        .rarity-section-Purple { --rarity-accent: #4B4993; }
        .rarity-section-Blue { --rarity-accent: #AAD5FB; }
        .rarity-section-Green { --rarity-accent: #CBEEB7; }

        /* Same single-surface merge as .rarity-section above -- the header used to be its own
           --skin-card-bg chip sitting above a separate .maint-list with no background of its own,
           reading as disconnected. Now one shared --skin-content-bg surface, header + list as two
           flush interior regions. */
        .maint-section {
            margin-bottom: 18px;
            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-left: 4px solid var(--rarity-accent);
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .maint-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            font-weight: 700;
            text-transform: uppercase;
            user-select: none;
            color: var(--skin-content-text);
        }
        .maint-header-count { margin-left: auto; font-size: 0.8em; font-weight: 500; opacity: 0.85; }
        /* Set on .maint-section now (see above), not .maint-header -- same reasoning as
           .rarity-section-* replacing .rarity-header-* (custom properties only cascade down). */
        .maint-section-destroy { --rarity-accent: #D93D2C; }
        .maint-section-farm { --rarity-accent: #3FA67F; }
        .maint-section-missing { --rarity-accent: #4A9FDE; }

        .maint-list {
            display: flex;
            flex-direction: column;
            padding: 4px 14px 4px;
            border-top: 1px solid var(--skin-content-border);
        }

        /* Plain list rows, not individually-boxed chips -- each row used to carry its own
           --skin-card-bg + rounded corners, which inside an already-boxed .maint-section drawer
           produced a box-inside-a-box look, and with several rows stacked that read as real
           visual clutter ("mta poluição visual"). A hairline divider between rows (no divider
           after the last one) reads as one coherent list instead, the same way a real list/table
           would. No weapon/armor border-left color either -- .maint-name already leads with
           typeIcon(m.type) (⚔️/🛡️), so a second, redundant color-coded signal for the same fact
           was exactly the excess the user flagged ("ja tem o icone não precisa da cor tbm"). */
        .maint-item {
            padding: 9px 10px;
            border-bottom: 1px solid var(--skin-content-border);
            font-size: 0.85em;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 10px;
        }
        .maint-item:last-child { border-bottom: none; }

        .maint-name { font-weight: 600; flex: 1 1 auto; min-width: 120px; }
        .maint-meta { font-size: 0.85em; color: var(--skin-text-muted); }

        .maint-badge {
            padding: 3px 9px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.8em;
            color: #fff;
            white-space: nowrap;
        }
        .maint-badge-excess { background: #e74c3c; }
        .maint-badge-farm { background: #27ae60; }
        .maint-badge-missing { background: #999; }

        .maint-mvp-tags { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }