/* =====================================================================
   SETTINGS + BELT SELECTOR — 3D REVAMP v1.0
   Loaded AFTER style.css + modern-3d.css so selectors override safely.
   Scope:
     • Settings screen (.stg-v2, .stg-group, .stg-card, .stg-row, toggles,
       theme picker, background picker, action rows, footer)
     • Belt progression timeline (.belt-progression-timeline .timeline-*)
   Strategy:
     • 3D-looking surfaces via layered inset/outset shadows + gradients
     • Pointer/touch-reactive tilt via CSS custom props (set by JS)
     • Mobile-first: tap states always give a clear depth response
     • Full prefers-reduced-motion safeguards
   ===================================================================== */

:root {
    --sb3d-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --sb3d-ease-smooth: cubic-bezier(0.22, 0.9, 0.32, 1);
    --sb3d-accent: var(--cor-primaria, #e67e22);
}

/* =====================================================================
   1. SETTINGS — Premium grouped cards, glassy toggles, 3D pickers
   ===================================================================== */

.stg-v2 {
    perspective: 1500px;
    perspective-origin: 50% 0%;
    /* Tabs handle separation now, so we don't need giant gaps between
       everything — keeps the screen visually lighter. */
    gap: 1rem !important;
    padding-bottom: 2.5rem !important;
}

/* =====================================================================
   SETTINGS TABS — sticky bar, 4 sections
   ===================================================================== */
.stg-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    border-radius: 16px;
    background:
        linear-gradient(180deg,
            rgba(22,22,27,0.92) 0%,
            rgba(16,16,20,0.85) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 10px 24px -14px rgba(0,0,0,0.6);
}
.stg-tab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--cor-texto-secundario, #9a9a9a);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    padding: 0.55rem 0.3rem;
    border-radius: 11px;
    cursor: pointer;
    font-family: inherit;
    transition:
        color 0.25s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.2s var(--sb3d-ease-spring);
}
.stg-tab-icon {
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.stg-tab-label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.stg-tab:hover {
    color: var(--cor-texto-principal, #eee);
    background: rgba(255,255,255,0.04);
}
.stg-tab.active {
    color: var(--sb3d-accent, #e67e22);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--sb3d-accent, #e67e22) 22%, transparent) 0%,
            color-mix(in srgb, var(--sb3d-accent, #e67e22)  6%, transparent) 100%);
    border-color: color-mix(in srgb, var(--sb3d-accent, #e67e22) 35%, transparent);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 0 14px -4px color-mix(in srgb, var(--sb3d-accent, #e67e22) 55%, transparent);
}
.stg-tab.active .stg-tab-icon {
    transform: translateY(-1px) scale(1.05);
}
.stg-tab:active { transform: scale(0.97); }

/* Panels — only the active one renders, rest are hidden.
   We use display:none (not just opacity) so the hidden DOM doesn't
   intercept taps and the viewport stays short and light. */
.stg-panel {
    display: none;
    flex-direction: column;
    gap: 0.9rem;
    animation: stg-panel-in 0.28s var(--sb3d-ease-smooth);
}
.stg-panel.active { display: flex; }
@keyframes stg-panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* Sub-section heading inside a panel (e.g. "Suporte" inside Conta) */
.stg-subheading {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cor-texto-secundario, #9a9a9a);
    padding: 0.25rem 0.5rem 0;
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.stg-subheading::before {
    content: '';
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        var(--sb3d-accent, #e67e22) 0%,
        rgba(230,126,34,0.35) 100%);
}

/* Responsive: on very narrow screens, shrink tab chrome further */
@media (max-width: 360px) {
    .stg-tabs { padding: 0.35rem; gap: 0.2rem; }
    .stg-tab { padding: 0.45rem 0.2rem; }
    .stg-tab-icon { font-size: 1rem; }
    .stg-tab-label { font-size: 0.56rem; letter-spacing: 0.06em; }
}

/* ── Section headers ─────────────────────────────────────────────── */
.stg-group {
    position: relative;
    transform-style: preserve-3d;
}

.stg-group-title {
    display: flex !important;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase;
    color: var(--cor-texto-secundario, #9a9a9a) !important;
    padding: 0 0.25rem 0.2rem !important;
    margin-bottom: 0.6rem !important;
}
.stg-group-title::before {
    content: '';
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: linear-gradient(180deg,
        var(--sb3d-accent) 0%,
        rgba(230,126,34,0.35) 100%);
    box-shadow: 0 0 8px rgba(230,126,34,0.4);
}

/* ── Grouped card ────────────────────────────────────────────────── */
.stg-card {
    --rx: 0deg;
    --ry: 0deg;
    --mx: 50%;
    --my: 50%;
    position: relative;
    background:
        linear-gradient(155deg,
            rgba(38,38,44,0.92) 0%,
            rgba(22,22,26,0.96) 100%) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 20px !important;
    overflow: hidden;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 12px 28px -14px rgba(0,0,0,0.6),
        0 4px 10px -4px rgba(0,0,0,0.45);
    transform:
        perspective(1200px)
        rotateX(var(--rx))
        rotateY(var(--ry))
        translateZ(0);
    transition:
        transform 0.5s var(--sb3d-ease-smooth),
        box-shadow 0.4s ease;
    transform-style: preserve-3d;
    will-change: transform;
}
.stg-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at var(--mx) var(--my),
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0.02) 30%,
            rgba(255,255,255,0) 60%),
        linear-gradient(160deg,
            rgba(255,255,255,0.04) 0%,
            rgba(255,255,255,0) 40%,
            rgba(0,0,0,0.18) 100%);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.3s ease;
    mix-blend-mode: screen;
}
.stg-card > * { position: relative; z-index: 1; }

/* ── Row layout refinements ──────────────────────────────────────── */
.stg-row {
    padding: 0.95rem 1.1rem !important;
    border-bottom-color: rgba(255,255,255,0.05) !important;
    transition: background 0.22s ease;
}
.stg-row:hover { background: rgba(255,255,255,0.025); }

/* Icon becomes a rounded tile chip for depth */
.stg-row-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px;
    font-size: 1rem !important;
    border-radius: 11px;
    background: linear-gradient(155deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.02) 60%,
        rgba(0,0,0,0.2) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.12) inset,
        0 -1px 0 rgba(0,0,0,0.35) inset,
        0 3px 6px -2px rgba(0,0,0,0.5);
    transition: transform 0.3s var(--sb3d-ease-spring), box-shadow 0.3s ease;
}
.stg-row:hover .stg-row-icon,
.stg-action-row:hover .stg-row-icon {
    transform: translateZ(4px) scale(1.06);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 6px 12px -4px rgba(0,0,0,0.6),
        0 0 14px -4px var(--sb3d-accent);
}

.stg-row-label {
    font-size: 0.92rem !important;
    letter-spacing: 0.01em;
}

/* Accent/danger action tint */
.stg-action-danger .stg-row-icon {
    background: linear-gradient(155deg,
        rgba(231,76,60,0.22) 0%,
        rgba(231,76,60,0.08) 60%,
        rgba(0,0,0,0.2) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.12) inset,
        0 -1px 0 rgba(0,0,0,0.35) inset,
        0 3px 8px -3px rgba(231,76,60,0.55);
}
.stg-action-accent .stg-row-icon {
    background: linear-gradient(155deg,
        rgba(230,126,34,0.28) 0%,
        rgba(230,126,34,0.10) 60%,
        rgba(0,0,0,0.2) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.14) inset,
        0 -1px 0 rgba(0,0,0,0.35) inset,
        0 3px 8px -3px rgba(230,126,34,0.55);
}

/* Action row: left slide + arrow glide on hover/press */
.stg-action-row {
    padding: 0.95rem 1.1rem !important;
    border-bottom-color: rgba(255,255,255,0.05) !important;
    transition:
        background 0.2s ease,
        transform 0.3s var(--sb3d-ease-smooth);
}
.stg-action-row:hover {
    background: rgba(255,255,255,0.04) !important;
    transform: translateX(3px);
}
.stg-action-row:active {
    transform: translateX(1px) scale(0.995);
    background: rgba(255,255,255,0.06) !important;
}
.stg-action-row .stg-row-arrow {
    transition: transform 0.3s var(--sb3d-ease-spring), color 0.2s ease;
}
.stg-action-row:hover .stg-row-arrow {
    transform: translateX(3px);
    color: var(--sb3d-accent) !important;
}

/* ── Premium toggle switch ───────────────────────────────────────── */
.stg-row .toggle-switch,
.stg-card .toggle-switch {
    width: 50px !important;
    height: 28px !important;
    flex-shrink: 0;
}
.stg-row .toggle-switch .slider,
.stg-card .toggle-switch .slider {
    background: linear-gradient(180deg, #2a2a30 0%, #1a1a1e 100%);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 28px;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.55) inset,
        0 -1px 0 rgba(255,255,255,0.04) inset,
        0 1px 0 rgba(255,255,255,0.03);
    transition: background 0.35s ease, box-shadow 0.35s ease;
}
.stg-row .toggle-switch .slider::before,
.stg-card .toggle-switch .slider::before {
    height: 22px !important;
    width: 22px !important;
    left: 2px !important;
    bottom: 2px !important;
    background:
        radial-gradient(circle at 30% 25%,
            rgba(255,255,255,1) 0%,
            rgba(230,230,230,0.95) 40%,
            rgba(180,180,185,0.95) 100%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.8) inset,
        0 -1px 2px rgba(0,0,0,0.25) inset,
        0 2px 4px rgba(0,0,0,0.45),
        0 1px 2px rgba(0,0,0,0.3);
    transition: transform 0.32s var(--sb3d-ease-spring), background 0.3s ease, box-shadow 0.3s ease !important;
}
.stg-row .toggle-switch input:checked + .slider,
.stg-card .toggle-switch input:checked + .slider {
    background: linear-gradient(180deg,
        var(--sb3d-accent) 0%,
        #c96f18 100%);
    border-color: rgba(230,126,34,0.5);
    box-shadow:
        0 1px 2px rgba(0,0,0,0.35) inset,
        0 0 14px rgba(230,126,34,0.45),
        0 0 0 1px rgba(230,126,34,0.25);
}
.stg-row .toggle-switch input:checked + .slider::before,
.stg-card .toggle-switch input:checked + .slider::before {
    transform: translateX(22px) !important;
    background:
        radial-gradient(circle at 30% 25%,
            rgba(255,255,255,1) 0%,
            rgba(255,245,230,0.98) 40%,
            rgba(240,220,190,0.95) 100%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.9) inset,
        0 -1px 2px rgba(0,0,0,0.25) inset,
        0 2px 5px rgba(0,0,0,0.5),
        0 0 8px rgba(230,126,34,0.35);
}
.stg-row .toggle-switch:active .slider::before,
.stg-card .toggle-switch:active .slider::before {
    width: 26px !important; /* squash on press */
}

/* ── Accent color dots — glossy spheres ──────────────────────────── */
#theme-picker-container .theme-options {
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    flex-wrap: wrap;
    padding: 0.25rem 0;
}
#theme-picker-container .theme-dot {
    position: relative;
    width: 38px !important;
    height: 38px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 -2px 6px rgba(0,0,0,0.4) inset,
        0 4px 10px -2px rgba(0,0,0,0.55);
    transition: transform 0.3s var(--sb3d-ease-spring), box-shadow 0.3s ease;
}
#theme-picker-container .theme-dot::after {
    content: '';
    position: absolute;
    top: 12%;
    left: 18%;
    width: 45%;
    height: 35%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.12) 55%,
        rgba(255,255,255,0) 80%);
    filter: blur(1px);
    pointer-events: none;
}
#theme-picker-container .theme-dot:hover {
    transform: translateY(-3px) scale(1.12);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 -2px 6px rgba(0,0,0,0.4) inset,
        0 10px 20px -4px rgba(0,0,0,0.6);
}
#theme-picker-container .theme-dot.active {
    border-color: rgba(255,255,255,0.85) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.45) inset,
        0 -2px 6px rgba(0,0,0,0.4) inset,
        0 0 0 3px rgba(255,255,255,0.12),
        0 8px 20px -4px rgba(0,0,0,0.6),
        0 0 18px -2px currentColor !important;
}

/* ── Background picker — 3D tiles ────────────────────────────────── */
#background-picker-container,
.background-picker {
    gap: 0.7rem !important;
}
#background-picker-container .bg-thumb,
.background-picker .bg-thumb {
    width: 64px !important;
    height: 64px !important;
    border-radius: 14px !important;
    border-width: 2px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -2px 6px rgba(0,0,0,0.35) inset,
        0 6px 14px -4px rgba(0,0,0,0.55) !important;
    transition: transform 0.35s var(--sb3d-ease-spring), box-shadow 0.35s ease, border-color 0.3s ease !important;
}
#background-picker-container .bg-thumb::before,
.background-picker .bg-thumb::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 45%;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 1;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
#background-picker-container .bg-thumb:hover,
.background-picker .bg-thumb:hover {
    transform: translateY(-4px) scale(1.08) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.14) inset,
        0 -2px 6px rgba(0,0,0,0.35) inset,
        0 14px 26px -6px rgba(0,0,0,0.65) !important;
}
#background-picker-container .bg-thumb.active,
.background-picker .bg-thumb.active {
    border-color: var(--sb3d-accent) !important;
    box-shadow:
        0 0 0 3px rgba(230,126,34,0.22),
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 -2px 6px rgba(0,0,0,0.35) inset,
        0 10px 22px -4px rgba(230,126,34,0.35),
        0 6px 14px -4px rgba(0,0,0,0.6) !important;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.stg-footer {
    padding-top: 1rem !important;
    letter-spacing: 0.03em;
    opacity: 0.75;
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .stg-card, .stg-card:hover,
    .stg-action-row, .stg-action-row:hover,
    .stg-row-icon, .stg-row-icon:hover,
    #theme-picker-container .theme-dot,
    #background-picker-container .bg-thumb {
        transform: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   2. BELT PROGRESSION TIMELINE — 3D belt ribbon cards
   ===================================================================== */

.belt-progression-timeline {
    /* No perspective — cards stay flat and calm like a masters' scroll. */
    padding: 0.4rem 0 1rem !important;
    gap: 0.75rem !important;
    /* Center the column of belt cards within the section */
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Each timeline row — center its content horizontally */
.belt-progression-timeline .timeline-item {
    justify-content: center;
}

/* Row */
.belt-progression-timeline .timeline-item {
    gap: 0.65rem !important;
    align-items: stretch !important;
    transform-style: preserve-3d;
}

/* ── Marker column: dot becomes a raised gem ─────────────────────── */
.belt-progression-timeline .timeline-marker {
    width: 22px !important;
    padding-top: 10px !important;
}
.belt-progression-timeline .timeline-dot {
    width: 14px !important;
    height: 14px !important;
    background:
        radial-gradient(circle at 30% 25%,
            rgba(255,255,255,0.45) 0%,
            var(--belt-color, #888) 45%,
            rgba(0,0,0,0.3) 100%) !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
    box-shadow:
        0 0 0 2px rgba(0,0,0,0.35),
        0 0 10px var(--belt-color, rgba(255,255,255,0.2)),
        0 2px 4px rgba(0,0,0,0.4) !important;
}
.belt-progression-timeline .timeline-item.studying .timeline-dot {
    width: 20px !important;
    height: 20px !important;
    animation: belt-dot-pulse 2.2s ease-in-out infinite;
}
@keyframes belt-dot-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(0,0,0,0.35),
            0 0 12px var(--belt-color, rgba(255,255,255,0.3)),
            0 0 22px var(--belt-color, rgba(255,255,255,0.15)),
            0 2px 4px rgba(0,0,0,0.4);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(0,0,0,0.35),
            0 0 20px var(--belt-color, rgba(255,255,255,0.5)),
            0 0 38px var(--belt-color, rgba(255,255,255,0.35)),
            0 2px 4px rgba(0,0,0,0.4);
    }
}

.belt-progression-timeline .timeline-line {
    width: 3px !important;
    background: linear-gradient(to bottom,
        var(--belt-color, rgba(255,255,255,0.18)) 0%,
        rgba(255,255,255,0.04) 100%) !important;
    border-radius: 2px;
    box-shadow: 0 0 6px var(--belt-color, rgba(255,255,255,0.08));
    opacity: 0.55;
}

/* ── The belt ribbon card ────────────────────────────────────────── */
.belt-progression-timeline .timeline-content {
    --mx: 50%;
    --my: 50%;
    position: relative;
    /* Fluid but capped so the card reads as a centered medallion strip,
       not a full-bleed banner. */
    width: 100%;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    padding: 0.95rem 1rem !important;
    gap: 0.9rem !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    /* The "belt" itself: darker body with top/bottom piping */
    background:
        /* Top highlight piping */
        linear-gradient(180deg,
            rgba(255,255,255,0.18) 0%,
            rgba(255,255,255,0.05) 4%,
            rgba(255,255,255,0) 8%,
            rgba(255,255,255,0) 92%,
            rgba(0,0,0,0.4) 96%,
            rgba(0,0,0,0.6) 100%),
        /* Belt color tint (enhanced) */
        linear-gradient(145deg,
            rgba(255,255,255,0.03) 0%,
            rgba(255,255,255,0.01) 100%);
    background-color: #16161b !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.15) inset,
        0 -1px 0 rgba(0,0,0,0.6) inset,
        0 18px 36px -16px rgba(0,0,0,0.75),
        0 8px 18px -8px rgba(0,0,0,0.65),
        0 0 0 1px rgba(255,255,255,0.04),
        inset 0 0 40px rgba(255,255,255,0.02) !important;
    overflow: hidden;
    transform: translateZ(0);
    transform-style: preserve-3d;
    transition:
        transform 0.5s var(--sb3d-ease-smooth),
        box-shadow 0.45s ease,
        border-color 0.3s ease !important;
}

/* Replace the old thin color strip with a richer belt stripe */
.belt-progression-timeline .timeline-content::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 7px !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.8) 0%,
        var(--belt-color, #888) 15%,
        var(--belt-color, #888) 50%,
        rgba(0,0,0,0.3) 85%,
        rgba(0,0,0,0.5) 100%) !important;
    box-shadow:
        1px 0 0 rgba(255,255,255,0.22) inset,
        -1px 0 8px rgba(0,0,0,0.7),
        2px 0 12px rgba(255,255,255,0.1) !important;
    opacity: 1 !important;
}

/* Specular sheen layer tracking pointer */
.belt-progression-timeline .timeline-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at var(--mx) var(--my),
            rgba(255,255,255,0.1) 0%,
            rgba(255,255,255,0.03) 25%,
            rgba(255,255,255,0) 55%),
        linear-gradient(160deg,
            rgba(255,255,255,0.05) 0%,
            rgba(255,255,255,0) 45%,
            rgba(0,0,0,0.18) 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0.7;
    mix-blend-mode: screen;
    border-radius: inherit;
    transition: opacity 0.3s ease;
}

.belt-progression-timeline .timeline-content > * {
    position: relative;
    z-index: 2;
}

/* ── Subtle watermark — much smaller and tucked into the corner ──── */
/* Distinct from gacha/grandmaster giant character style: now acts as
   a discreet seal/stamp in the corner, leaving room for the belt-stripe
   accent on the left edge to be the main visual signature.            */
.belt-progression-timeline .timeline-belt-watermark {
    position: absolute;
    right: 0.6rem;
    bottom: 0.4rem;
    font-family: "Noto Serif TC", "Cormorant Garamond", serif;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--belt-color, #fff) 18%, transparent);
    pointer-events: none;
    user-select: none;
    z-index: 0 !important;
    letter-spacing: 0;
    text-shadow: none;
    white-space: nowrap;
    filter: none;
    opacity: 0.7;
}

/* ── Belt-stripe accent: vertical color bar on the left edge ─────── */
/* This becomes the dominant visual identity for belt cards, replacing
   the giant background character that made them feel like gacha cards. */
.belt-progression-timeline .timeline-content::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(
        to bottom,
        color-mix(in srgb, var(--belt-color, #888) 90%, transparent) 0%,
        color-mix(in srgb, var(--belt-color, #888) 60%, transparent) 50%,
        color-mix(in srgb, var(--belt-color, #888) 30%, transparent) 100%
    );
    border-radius: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow:
        2px 0 8px color-mix(in srgb, var(--belt-color, #888) 40%, transparent),
        inset -1px 0 0 rgba(255,255,255,0.15);
    z-index: 1;
    pointer-events: none;
}
.belt-progression-timeline .timeline-item.locked .timeline-content::before {
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );
    box-shadow: none;
}
.belt-progression-timeline .timeline-item.studying .timeline-belt-watermark {
    color: color-mix(in srgb, var(--belt-color, #fff) 20%, transparent);
}
.belt-progression-timeline .timeline-item.locked .timeline-belt-watermark {
    color: rgba(255,255,255,0.05);
}

/* ── Clean centered Chinese label (foreground, above the watermark) ─ */
.belt-progression-timeline .timeline-belt-chinese {
    display: block;
    font-family: "Noto Serif TC", "Cormorant Garamond", serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    margin-bottom: 0.35rem;
    text-shadow:
        0 1px 3px rgba(0,0,0,0.6),
        0 0 14px color-mix(in srgb, var(--belt-color, #fff) 35%, transparent);
    transform: translateZ(10px);
    white-space: nowrap;
    overflow: visible;
}
.belt-progression-timeline .timeline-item.locked .timeline-belt-chinese {
    opacity: 0.5;
    filter: grayscale(0.3);
}

/* Centered info column */
.belt-progression-timeline .timeline-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.1rem;
}

/* Pinyin subtitle under the belt name */
.belt-progression-timeline .timeline-belt-pinyin {
    display: block;
    font-family: var(--font-destaque, 'Teko', sans-serif);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--belt-color, #fff) 60%, #fff);
    opacity: 0.85;
    margin: 0.1rem 0 0.4rem;
    transform: translateZ(6px);
    text-align: center;
}
.belt-progression-timeline .timeline-item.locked .timeline-belt-pinyin {
    color: rgba(255,255,255,0.35);
}

/* Belt name: bigger, bolder, with subtle shadow */
.belt-progression-timeline .timeline-belt-name {
    font-size: 1.18rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.55);
    transform: translateZ(8px);
}

/* Status becomes a pill */
.belt-progression-timeline .timeline-status {
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(6px);
    width: fit-content;
    margin: 0.25rem auto 0;
    transform: translateZ(6px);
}

.belt-progression-timeline .timeline-item.unlocked .timeline-status {
    color: rgba(255,255,255,0.92) !important;
    background: linear-gradient(180deg,
        rgba(46,204,113,0.28) 0%,
        rgba(46,204,113,0.12) 100%);
    border-color: rgba(46,204,113,0.45);
    box-shadow: 0 0 10px rgba(46,204,113,0.25);
}
.belt-progression-timeline .timeline-item.studying .timeline-status {
    color: rgba(255,255,255,0.95) !important;
    background: linear-gradient(180deg,
        rgba(241,196,15,0.28) 0%,
        rgba(241,196,15,0.12) 100%);
    border-color: rgba(241,196,15,0.5);
    box-shadow: 0 0 12px rgba(241,196,15,0.3);
    animation: belt-status-shimmer 2.5s ease-in-out infinite;
}
@keyframes belt-status-shimmer {
    0%, 100% { box-shadow: 0 0 10px rgba(241,196,15,0.25); }
    50%      { box-shadow: 0 0 18px rgba(241,196,15,0.55); }
}
.belt-progression-timeline .timeline-item.locked .timeline-status {
    color: rgba(255,255,255,0.55) !important;
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.05);
}

/* Arrow — lifted glyph */
.belt-progression-timeline .timeline-arrow {
    font-size: 1.55rem !important;
    color: rgba(255,255,255,0.55) !important;
    transform: translateZ(20px);
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: transform 0.35s var(--sb3d-ease-spring), color 0.25s ease !important;
}

/* ── States ──────────────────────────────────────────────────────── */

/* Studying — accent glow + continuous shimmer sweep */
.belt-progression-timeline .timeline-item.studying .timeline-content {
    border-color: color-mix(in srgb, var(--belt-color, #f1c40f) 50%, transparent 50%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.14) inset,
        0 -1px 0 rgba(0,0,0,0.5) inset,
        0 16px 32px -14px rgba(0,0,0,0.7),
        0 0 0 1px color-mix(in srgb, var(--belt-color, #f1c40f) 25%, transparent 75%),
        0 0 28px -6px color-mix(in srgb, var(--belt-color, #f1c40f) 55%, transparent 45%) !important;
}
/* Studying — softly float the Chinese character */
.belt-progression-timeline .timeline-item.studying .timeline-belt-chinese {
    animation: belt-chinese-float 3s ease-in-out infinite;
}
@keyframes belt-chinese-float {
    0%, 100% { transform: translateZ(10px) translateY(0); }
    50%      { transform: translateZ(16px) translateY(-2px); }
}

/* Studying shimmer sweep overlay */
.belt-progression-timeline .timeline-item.studying .timeline-content .timeline-info::after {
    content: '';
    position: absolute;
    top: -40%;
    left: -30%;
    width: 45%;
    height: 180%;
    background: linear-gradient(115deg,
        rgba(255,255,255,0) 30%,
        rgba(255,255,255,0.12) 50%,
        rgba(255,255,255,0) 70%);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: belt-shimmer-sweep 3.2s ease-in-out infinite;
    z-index: 1;
}
@keyframes belt-shimmer-sweep {
    0%        { left: -40%; opacity: 0; }
    25%       { opacity: 1; }
    100%      { left: 130%; opacity: 0; }
}
.belt-progression-timeline .timeline-info {
    position: relative;
    overflow: hidden;
}

/* Locked — desaturated parchment feel */
.belt-progression-timeline .timeline-item.locked .timeline-content {
    filter: saturate(0.35) brightness(0.78);
    opacity: 0.72;
}
.belt-progression-timeline .timeline-item.locked .timeline-content::before {
    opacity: 0.4 !important;
}
.belt-progression-timeline .timeline-item.locked .timeline-belt-chinese {
    transform: translateZ(4px);
    opacity: 0.55;
    filter: grayscale(0.4);
    color: rgba(255,255,255,0.45) !important;
    text-shadow: none !important;
}

/* Unlocked — a subtle rest-state glow */
.belt-progression-timeline .timeline-item.unlocked .timeline-content {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 -1px 0 rgba(0,0,0,0.5) inset,
        0 14px 28px -14px rgba(0,0,0,0.6),
        0 0 18px -6px color-mix(in srgb, var(--belt-color, #2ecc71) 25%, transparent 75%) !important;
}

/* ── Hover / press ───────────────────────────────────────────────── */
.belt-progression-timeline .timeline-item.unlocked .timeline-content:hover,
.belt-progression-timeline .timeline-item.studying .timeline-content:hover {
    /* Gentle lift on hover — no rotation. */
    transform: translateY(-2px) !important;
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 -1px 0 rgba(0,0,0,0.55) inset,
        0 22px 40px -16px rgba(0,0,0,0.75),
        0 6px 16px -6px rgba(0,0,0,0.5),
        0 0 28px -6px color-mix(in srgb, var(--belt-color, #f1c40f) 55%, transparent 45%) !important;
}
.belt-progression-timeline .timeline-item.unlocked .timeline-content:hover .timeline-arrow,
.belt-progression-timeline .timeline-item.studying .timeline-content:hover .timeline-arrow {
    color: var(--belt-color, #fff) !important;
    transform: translateZ(30px) translateX(4px);
}
.belt-progression-timeline .timeline-item.unlocked .timeline-content:hover .timeline-belt-chinese,
.belt-progression-timeline .timeline-item.studying .timeline-content:hover .timeline-belt-chinese {
    transform: translateZ(16px) scale(1.05);
}

.belt-progression-timeline .timeline-item.unlocked .timeline-content:active,
.belt-progression-timeline .timeline-item.studying .timeline-content:active {
    transform: translateY(0) scale(0.985) !important;
    transition-duration: 0.15s !important;
}

/* ── Belt system intro — matches belt ribbon card design ─────────── */
.belt-system-intro-expandable {
    --intro-accent: var(--sb3d-accent);
    position: relative;
    background:
        /* Top + bottom piping (same as belt cards) */
        linear-gradient(180deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0) 6%,
            rgba(255,255,255,0) 94%,
            rgba(0,0,0,0.3) 100%),
        /* Accent tint wash */
        linear-gradient(135deg,
            color-mix(in srgb, var(--intro-accent) 18%, #14141a) 0%,
            color-mix(in srgb, var(--intro-accent) 8%, #0e0e12) 100%),
        #16161b;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 -1px 0 rgba(0,0,0,0.5) inset,
        0 14px 28px -14px rgba(0,0,0,0.65),
        0 6px 14px -6px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.02);
    margin-bottom: 1.25rem;
    transition: box-shadow 0.35s ease, transform 0.5s var(--sb3d-ease-smooth);
}
/* Left-side 3D belt stripe in the accent colour */
.belt-system-intro-expandable::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--intro-accent) 120%, #fff 0%) 0%,
        var(--intro-accent) 50%,
        color-mix(in srgb, var(--intro-accent) 60%, #000 40%) 100%);
    box-shadow:
        1px 0 0 rgba(255,255,255,0.18) inset,
        -1px 0 6px rgba(0,0,0,0.6),
        2px 0 8px color-mix(in srgb, var(--intro-accent) 40%, transparent 60%);
    z-index: 1;
}
.belt-system-intro-expandable[open] {
    box-shadow:
        0 1px 0 rgba(255,255,255,0.14) inset,
        0 -1px 0 rgba(0,0,0,0.5) inset,
        0 18px 34px -14px rgba(0,0,0,0.75),
        0 6px 16px -6px rgba(0,0,0,0.5),
        0 0 24px -6px color-mix(in srgb, var(--intro-accent) 45%, transparent 55%);
}
.belt-system-intro-header {
    display: flex !important;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    padding-left: 1.35rem; /* clear the stripe */
    cursor: pointer;
    list-style: none;
    position: relative;
    z-index: 2;
}
.belt-system-intro-header::-webkit-details-marker { display: none; }

/* Raised icon tile — mirrors .timeline-belt-icon */
.belt-system-intro-icon {
    flex-shrink: 0;
    width: 54px !important;
    height: 54px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: linear-gradient(155deg,
        rgba(255,255,255,0.08) 0%,
        rgba(255,255,255,0.02) 60%,
        rgba(0,0,0,0.3) 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.15) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 4px 10px -3px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.04);
    color: var(--intro-accent);
    transition: transform 0.45s var(--sb3d-ease-spring), box-shadow 0.35s ease;
}
.belt-system-intro-expandable[open] .belt-system-intro-icon,
.belt-system-intro-header:hover .belt-system-intro-icon {
    transform: translateZ(8px) scale(1.06) rotate(-3deg);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.2) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 6px 14px -4px rgba(0,0,0,0.6),
        0 0 14px -4px var(--intro-accent),
        0 0 0 1px rgba(255,255,255,0.05);
}

/* Wooden dummy SVG sizing + glow */
.mok-yan-jong-icon {
    width: 38px;
    height: 38px;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.55));
}

.belt-system-intro-title {
    flex: 1;
    font-family: var(--font-destaque);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--cor-texto-principal);
    text-shadow: 0 2px 4px rgba(0,0,0,0.55);
}
.belt-system-intro-arrow {
    font-size: 1.55rem;
    color: rgba(255,255,255,0.55);
    transform: rotate(90deg);
    transition: transform 0.35s var(--sb3d-ease-spring), color 0.25s ease;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.belt-system-intro-expandable[open] .belt-system-intro-arrow {
    transform: rotate(270deg);
    color: var(--intro-accent);
}
.belt-system-intro-content {
    padding: 0 1.15rem 1.15rem;
    padding-left: 1.35rem;
    position: relative;
    z-index: 2;
}

/* =====================================================================
   3. SUB-MENU CARDS — belt-ribbon visual language (matches belt cards)
   Applies the same piping + left 3D stripe + accent-tinted background
   to every .sub-menu-card so the whole app reads as one design system.
   ===================================================================== */

/* Per-variant solid accent (used for the left stripe + halos).
   Declared on the `.sub-menu-card` via :has() matching its icon variant. */
.sub-menu-card:has(.sub-menu-card-icon--orange) { --card-accent-solid: #e67e22; }
.sub-menu-card:has(.sub-menu-card-icon--blue)   { --card-accent-solid: #3498db; }
.sub-menu-card:has(.sub-menu-card-icon--green)  { --card-accent-solid: #2ecc71; }
.sub-menu-card:has(.sub-menu-card-icon--purple) { --card-accent-solid: #9b59b6; }
.sub-menu-card:has(.sub-menu-card-icon--gold)   { --card-accent-solid: #f1c40f; }
.sub-menu-card:has(.sub-menu-card-icon--yellow) { --card-accent-solid: #f1c40f; }
.sub-menu-card:has(.sub-menu-card-icon--red)    { --card-accent-solid: #e74c3c; }
/* Fallback when no variant matches */
.sub-menu-card { --card-accent-solid: var(--cor-primaria, #e67e22); }

/* Surface — piping + accent-tinted diagonal, matching belt cards */
.sub-menu-card {
    /* Override legacy start/end vars so the gradient reads like belt cards */
    --card-bg-start: color-mix(in srgb, var(--card-accent-solid) 18%, #14141a);
    --card-bg-end:   color-mix(in srgb, var(--card-accent-solid) 8%,  #0e0e12);
    background:
        /* Top + bottom piping */
        linear-gradient(180deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0) 6%,
            rgba(255,255,255,0) 94%,
            rgba(0,0,0,0.3) 100%),
        /* Accent tint wash */
        linear-gradient(135deg,
            var(--card-bg-start) 0%,
            var(--card-bg-end) 100%),
        #16161b !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 -1px 0 rgba(0,0,0,0.5) inset,
        0 14px 28px -14px rgba(0,0,0,0.65),
        0 6px 14px -6px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.02) !important;
    /* Leave extra left padding for the 3D stripe */
    padding-left: 1.5rem !important;
}

/* Prominent left 3D belt stripe (re-enables ::after which style.css hid) */
.sub-menu-card::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 6px !important;
    height: auto !important;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--card-accent-solid) 120%, #fff 0%) 0%,
        var(--card-accent-solid) 50%,
        color-mix(in srgb, var(--card-accent-solid) 60%, #000 40%) 100%) !important;
    box-shadow:
        1px 0 0 rgba(255,255,255,0.18) inset,
        -1px 0 6px rgba(0,0,0,0.6),
        2px 0 8px color-mix(in srgb, var(--card-accent-solid) 40%, transparent 60%) !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    transition: none !important;
    pointer-events: none;
    z-index: 2;
}

/* Hover — lifted with an accent halo matching the belt-card treatment */
.sub-menu-card:hover {
    border-color: color-mix(in srgb, var(--card-accent-solid) 38%, rgba(255,255,255,0.08)) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.14) inset,
        0 -1px 0 rgba(0,0,0,0.55) inset,
        0 22px 40px -16px rgba(0,0,0,0.75),
        0 6px 16px -6px rgba(0,0,0,0.5),
        0 0 28px -6px color-mix(in srgb, var(--card-accent-solid) 55%, transparent 45%) !important;
}

/* Title — bold with shadow to match belt card titles */
.sub-menu-card .sub-menu-card-title {
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.55);
}

/* Keep the existing tilt/icon-lift from modern-3d.css; we only touch surface. */

/* Reduce motion safeguard (transforms remain off via modern-3d.css rule) */
@media (prefers-reduced-motion: reduce) {
    .sub-menu-card, .sub-menu-card:hover {
        box-shadow:
            0 1px 0 rgba(255,255,255,0.1) inset,
            0 -1px 0 rgba(0,0,0,0.5) inset,
            0 10px 22px -12px rgba(0,0,0,0.55) !important;
    }
}

/* =====================================================================
   4. BOTTOM NAV — fix center ring covering sibling icons
   The center logo ring is scaled + has outer box-shadow that can bleed
   onto adjacent nav items, making the Estúdio/Biblioteca icon look like
   it disappears when the center button becomes active. We pin a safe
   stacking order so nav icons are always rendered above the ring halo.
   ===================================================================== */
.bottom-nav-item {
    position: relative;
    z-index: 2;
}
.bottom-nav-item .bottom-nav-icon,
.bottom-nav-item .bottom-nav-label {
    position: relative;
    z-index: 3;
}
.bottom-nav-center {
    z-index: 1; /* ring sits BELOW sibling icons so it can't eclipse them */
}
.bottom-nav-center .bottom-nav-logo-ring {
    z-index: 1;
    /* Trim the outer shadow ring so it can't bleed into neighbours */
    box-shadow:
        0 0 16px rgba(230, 126, 34, 0.3),
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 0 0 2px var(--cor-fundo-secundario, #1a1a1a) !important;
}
.bottom-nav-center:hover .bottom-nav-logo-ring,
.bottom-nav-center.active .bottom-nav-logo-ring {
    box-shadow:
        0 0 24px rgba(230, 126, 34, 0.5),
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 0 2px var(--cor-primaria, #e67e22) !important;
}

/* =====================================================================
   5. APP-WIDE SURFACE UNIFICATION — belt-ribbon visual language
   Applies the piping + accent-tinted gradient + left stripe to panels
   and cards across Treinos Rápidos, Construtor de Exercícios,
   Biblioteca de Exercícios e Wing Chun Training. Uses per-component
   `--card-accent-solid` so each keeps its identity (green, orange,
   blue, etc.) while sharing the same design language.
   ===================================================================== */

/* ── Per-variant accent for sub-hub cards (fhub-card) ────────────── */
.fhub-card { --card-accent-solid: rgba(255,255,255,0.35); }
.fhub-card--quick   { --card-accent-solid: #2ecc71; }
.fhub-card--creator { --card-accent-solid: #e67e22; }
.fhub-card--viewer  { --card-accent-solid: #3498db; }
.fhub-card--smart   { --card-accent-solid: #f39c12; }

/* ── Shared belt-ribbon surface ──────────────────────────────────── */
.fhub-card,
.fqw-preview,
.wc-app,
.wc-summary-strip {
    position: relative !important;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0) 6%,
            rgba(255,255,255,0) 94%,
            rgba(0,0,0,0.3) 100%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--card-accent-solid, #e67e22) 18%, #14141a) 0%,
            color-mix(in srgb, var(--card-accent-solid, #e67e22) 8%,  #0e0e12) 100%),
        #16161b !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 -1px 0 rgba(0,0,0,0.5) inset,
        0 14px 28px -14px rgba(0,0,0,0.65),
        0 6px 14px -6px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.02) !important;
    padding-left: 1.5rem !important;
}

/* Default accent fallback for panels without a variant */
.fqw-preview { --card-accent-solid: var(--cor-primaria, #e67e22); }
.wc-app,
.wc-summary-strip { --card-accent-solid: var(--cor-primaria, #e67e22); }

/* ── Left 3D stripe — uses ::after, clobbering any previous ::after ── */
.fhub-card::after,
.fqw-preview::after,
.wc-app::after,
.wc-summary-strip::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 6px !important;
    height: auto !important;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--card-accent-solid, #e67e22) 120%, #fff 0%) 0%,
        var(--card-accent-solid, #e67e22) 50%,
        color-mix(in srgb, var(--card-accent-solid, #e67e22) 60%, #000 40%) 100%) !important;
    box-shadow:
        1px 0 0 rgba(255,255,255,0.18) inset,
        -1px 0 6px rgba(0,0,0,0.6),
        2px 0 8px color-mix(in srgb, var(--card-accent-solid, #e67e22) 40%, transparent 60%) !important;
    opacity: 1 !important;
    border-radius: 0 !important;
    z-index: 3;
    pointer-events: none;
}

/* The old top-shimmer line on .fhub-card::before becomes redundant — tone it down */
.fhub-card::before {
    top: auto !important;
    bottom: 0 !important;
    height: 1px !important;
    opacity: 0.3 !important;
}

/* Hover — colored halo matching the accent */
.fhub-card:hover,
.fqw-preview:hover,
.wc-app:hover {
    border-color: color-mix(in srgb, var(--card-accent-solid, #e67e22) 38%, rgba(255,255,255,0.08)) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.14) inset,
        0 -1px 0 rgba(0,0,0,0.55) inset,
        0 22px 40px -16px rgba(0,0,0,0.75),
        0 6px 16px -6px rgba(0,0,0,0.5),
        0 0 28px -6px color-mix(in srgb, var(--card-accent-solid, #e67e22) 55%, transparent 45%) !important;
}

/* Preview title — pill bar color picks up accent */
.fqw-preview-title { padding-left: 0.15rem; }
.fqw-preview-title::before {
    background: var(--card-accent-solid, var(--cor-primaria)) !important;
    width: 4px !important;
    box-shadow: 0 0 10px var(--card-accent-solid, var(--cor-primaria)) !important;
}

/* Keep wc-app inner padding balanced after the stripe */
.wc-app { padding: 1.25rem 1.1rem 1.25rem 1.5rem !important; margin: 0.75rem !important; }
.wc-summary-strip { padding: 0.9rem 1rem 0.9rem 1.5rem !important; }

/* ── Quick-workout option buttons — belt-ribbon pill look ────────── */
.fqw-option {
    --card-accent-solid: var(--cor-primaria, #e67e22);
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0) 6%,
            rgba(255,255,255,0) 94%,
            rgba(0,0,0,0.25) 100%),
        linear-gradient(135deg,
            rgba(255,255,255,0.03),
            rgba(255,255,255,0.01)),
        #16161b !important;
    border-color: rgba(255,255,255,0.08) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 10px 22px -12px rgba(0,0,0,0.55) !important;
    padding-left: 1.5rem !important;
}
.fqw-option::before {
    /* Upgrade the existing 3px strip to a proper 6px 3D stripe */
    top: 0 !important;
    bottom: 0 !important;
    width: 6px !important;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.35) 0%,
        rgba(255,255,255,0.12) 50%,
        rgba(0,0,0,0.3) 100%) !important;
    border-radius: 0 !important;
    opacity: 0.55;
    transition: background 0.3s ease, opacity 0.3s ease !important;
}
.fqw-option:hover {
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0) 6%,
            rgba(255,255,255,0) 94%,
            rgba(0,0,0,0.28) 100%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--card-accent-solid) 12%, #14141a),
            color-mix(in srgb, var(--card-accent-solid) 5%,  #0e0e12)),
        #16161b !important;
    border-color: color-mix(in srgb, var(--card-accent-solid) 30%, rgba(255,255,255,0.08)) !important;
}
.fqw-option:hover::before {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--card-accent-solid) 120%, #fff 0%) 0%,
        var(--card-accent-solid) 50%,
        color-mix(in srgb, var(--card-accent-solid) 60%, #000 40%) 100%) !important;
    opacity: 1;
}
.fqw-option.active {
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.14) 0%,
            rgba(255,255,255,0) 6%,
            rgba(255,255,255,0) 94%,
            rgba(0,0,0,0.3) 100%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--card-accent-solid) 22%, #14141a),
            color-mix(in srgb, var(--card-accent-solid) 10%, #0e0e12)),
        #16161b !important;
    border-color: color-mix(in srgb, var(--card-accent-solid) 48%, transparent) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.14) inset,
        0 -1px 0 rgba(0,0,0,0.5) inset,
        0 14px 28px -14px rgba(0,0,0,0.7),
        0 0 24px -4px color-mix(in srgb, var(--card-accent-solid) 55%, transparent) !important;
}
.fqw-option.active::before {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--card-accent-solid) 120%, #fff 0%) 0%,
        var(--card-accent-solid) 50%,
        color-mix(in srgb, var(--card-accent-solid) 60%, #000 40%) 100%) !important;
    opacity: 1;
    box-shadow:
        1px 0 0 rgba(255,255,255,0.18) inset,
        2px 0 8px color-mix(in srgb, var(--card-accent-solid) 40%, transparent 60%);
}

/* ── Exercise preview list cards (fqw-ex-card) — thin accent stripe ── */
.fqw-ex-card {
    position: relative;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.02)) !important;
    border-color: rgba(255,255,255,0.08) !important;
    padding-left: 1rem !important;
    overflow: hidden;
}
.fqw-ex-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.3),
        rgba(255,255,255,0.08));
    opacity: 0.55;
    transition: background 0.25s ease, opacity 0.25s ease;
}
.fqw-ex-card:hover::before {
    background: var(--cor-primaria, #e67e22);
    opacity: 1;
}

/* ── Workout Creator — quick-action chips + exercise cards harmonised ── */
.wc-quick-btn {
    position: relative;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.1) 0%,
            rgba(255,255,255,0) 6%,
            rgba(255,255,255,0) 94%,
            rgba(0,0,0,0.3) 100%),
        linear-gradient(135deg,
            rgba(255,255,255,0.06),
            rgba(255,255,255,0.02)) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 6px 14px -6px rgba(0,0,0,0.5) !important;
}
.wc-quick-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.14) inset,
        0 -1px 0 rgba(0,0,0,0.45) inset,
        0 12px 24px -8px rgba(0,0,0,0.6) !important;
}

.wc-exercise-card {
    position: relative;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.07),
        rgba(255,255,255,0.025)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    padding-left: 1rem !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -1px 0 rgba(0,0,0,0.35) inset,
        0 4px 10px -4px rgba(0,0,0,0.45) !important;
    overflow: hidden;
}
.wc-exercise-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.35),
        rgba(255,255,255,0.1));
    opacity: 0.5;
}
.wc-exercise-card--rest::before { background: linear-gradient(180deg, #7f8eff, #5e5ce6); opacity: 1; }
.wc-exercise-card--warmup::before { background: linear-gradient(180deg, #ffb74d, #ff9f0a); opacity: 1; }

.wc-exercise-row {
    position: relative;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.07),
        rgba(255,255,255,0.025)) !important;
    padding-left: 1rem !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -1px 0 rgba(0,0,0,0.35) inset,
        0 4px 10px -4px rgba(0,0,0,0.45) !important;
    overflow: hidden;
}

/* Summary strip already wrapped by the shared belt-ribbon surface above —
   ensure the inner chips stay readable over the new tinted background */
.wc-summary-strip .wc-stat-value,
.wc-summary-strip .wc-summary-val { text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* =====================================================================
   6. EXPLORAR EXERCÍCIOS (fvw) — Belt-ribbon grid + unified filters
   ===================================================================== */

/* Per-category accent on exercise cards */
.fvw-card[data-cat="physical_forca"]          { --card-accent-solid: #9b59b6; }
.fvw-card[data-cat="physical_cardio"]         { --card-accent-solid: #e74c3c; }
.fvw-card[data-cat="physical_estabilidade"]   { --card-accent-solid: #3498db; }
.fvw-card[data-cat="physical_flexibilidade"]  { --card-accent-solid: #2ecc71; }
.fvw-card                                      { --card-accent-solid: var(--cor-primaria, #e67e22); }

/* Filter pills — match the settings pill style */
.fvw-pills {
    gap: 0.5rem !important;
    padding: 4px 2px !important;
    margin-bottom: 1rem !important;
}
.fvw-pill {
    padding: 0.5rem 0.95rem !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0) 100%),
        rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.6) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 4px 10px -4px rgba(0,0,0,0.5) !important;
    transition: all 0.25s ease !important;
}
.fvw-pill:not(.active):hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(230,126,34,0.22) !important;
    color: #fff !important;
}
.fvw-pill.active {
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--cor-primaria) 100%, #fff 12%),
            var(--cor-primaria)) !important;
    border-color: color-mix(in srgb, var(--cor-primaria) 80%, #000 20%) !important;
    color: #fff !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.3) inset,
        0 -1px 0 rgba(0,0,0,0.25) inset,
        0 6px 14px -4px rgba(230,126,34,0.55) !important;
    transform: translateY(-1px);
}

/* Search bar — glass + orange focus ring */
.fvw-search {
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.06) 0%,
            rgba(255,255,255,0.02) 100%),
        rgba(0,0,0,0.2) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    padding: 0.75rem 0.75rem 0.75rem 2.4rem !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 4px 10px -4px rgba(0,0,0,0.4) !important;
}
.fvw-search:focus {
    border-color: rgba(230,126,34,0.55) !important;
    box-shadow:
        0 0 0 3px rgba(230,126,34,0.15),
        0 1px 0 rgba(255,255,255,0.08) inset !important;
}

/* Grid spacing — tighter and more balanced */
.fvw-cat-cards {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 0.85rem !important;
}

/* Card — belt-ribbon treatment while keeping the thumbnail-above layout */
.fvw-card {
    position: relative;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.08) 0%,
            rgba(255,255,255,0) 8%,
            rgba(255,255,255,0) 92%,
            rgba(0,0,0,0.35) 100%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--card-accent-solid) 12%, #16161b),
            color-mix(in srgb, var(--card-accent-solid) 4%,  #0e0e12)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 10px 24px -12px rgba(0,0,0,0.6),
        0 4px 10px -4px rgba(0,0,0,0.5) !important;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s, border-color 0.25s !important;
}

/* Top accent stripe in the category color */
.fvw-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--card-accent-solid) 20%,
        var(--card-accent-solid) 80%,
        transparent 100%);
    z-index: 3;
    pointer-events: none;
    opacity: 0.9;
}

.fvw-card:hover {
    transform: translateY(-4px) !important;
    border-color: color-mix(in srgb, var(--card-accent-solid) 38%, rgba(255,255,255,0.08)) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.14) inset,
        0 -1px 0 rgba(0,0,0,0.45) inset,
        0 20px 36px -14px rgba(0,0,0,0.7),
        0 0 28px -6px color-mix(in srgb, var(--card-accent-solid) 55%, transparent) !important;
}

.fvw-card-thumb {
    position: relative;
    height: 104px !important;
    background-color: color-mix(in srgb, var(--card-accent-solid) 12%, #1a1a1f) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.fvw-card-thumb::after {
    /* subtle bottom fade into the info section for legibility */
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 30%;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5));
    pointer-events: none;
}
.fvw-card-thumb-icon {
    font-size: 2.4rem !important;
    opacity: 0.85;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}

/* Difficulty badge — glass pill */
.fvw-card-diff {
    top: 8px !important;
    right: 8px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.14) inset;
    z-index: 2;
}

.fvw-card-info {
    padding: 0.7rem 0.85rem 0.85rem !important;
    position: relative;
    z-index: 2;
}
.fvw-card-name {
    font-size: 0.92rem !important;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    margin-bottom: 3px !important;
}
.fvw-card-muscle {
    font-size: 0.7rem !important;
    color: color-mix(in srgb, var(--card-accent-solid) 25%, rgba(255,255,255,0.5)) !important;
    font-weight: 600;
}

/* Empty state — centered, belt-ribbon panel */
.fvw-empty {
    margin-top: 1rem;
    padding: 2.5rem 1rem !important;
    border-radius: 18px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.04),
        rgba(255,255,255,0.015));
    border: 1px dashed rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.5) !important;
    font-size: 0.88rem !important;
}

/* =====================================================================
   7. CONSTRUTOR DE TREINO (wc-*) — Layout & hierarchy polish
   ===================================================================== */

/* Name label smaller, input larger and more prominent */
.wc-creator-name-row { margin-bottom: 1rem !important; }
.wc-name-label {
    font-size: 0.68rem !important;
    color: color-mix(in srgb, var(--cor-primaria) 80%, #fff 20%) !important;
    margin-bottom: 0.4rem !important;
}
.wc-header__title-input {
    padding: 0.9rem 1rem !important;
    background:
        linear-gradient(180deg,
            rgba(0,0,0,0.35) 0%,
            rgba(0,0,0,0.2) 100%) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 2px 6px rgba(0,0,0,0.3) inset !important;
}
.wc-header__title-input:focus {
    border-color: var(--cor-primaria) !important;
    box-shadow:
        0 0 0 3px rgba(230,126,34,0.2),
        0 2px 6px rgba(0,0,0,0.3) inset !important;
    transform: none !important;
}

/* Summary strip — 3 stats, bigger numbers, accent bars between */
.wc-summary-strip {
    gap: 0 !important;
    margin: 0 0 1.15rem 0 !important;
    border-radius: 14px !important;
}
.wc-summary-strip .wc-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    position: relative;
    padding: 0.1rem 0.3rem;
}
.wc-summary-strip .wc-stat + .wc-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 20%; bottom: 20%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent,
        rgba(255,255,255,0.15),
        transparent);
}
.wc-summary-strip .wc-stat-icon { font-size: 1.1rem; opacity: 0.85; margin-bottom: 2px; }
.wc-summary-strip .wc-stat-value {
    font-family: var(--font-destaque, inherit);
    font-size: 1.55rem !important;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}
.wc-summary-strip .wc-stat-label {
    font-size: 0.62rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
    font-weight: 600;
}

/* Quick-action bar — per-action colored ribbon buttons */
.wc-quick-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.6rem !important;
    margin-bottom: 1.15rem !important;
}
.wc-quick-btn {
    flex: initial !important;
    min-width: 0 !important;
    padding: 0.75rem 0.5rem !important;
    border-radius: 14px !important;
    font-size: 0.78rem !important;
    flex-direction: column;
    gap: 0.2rem !important;
    position: relative;
    overflow: hidden;
    padding-left: 1.1rem !important;
}
.wc-quick-btn > span:first-child { font-size: 1.3rem; line-height: 1; }
.wc-quick-btn::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: rgba(255,255,255,0.2);
    transition: background 0.25s ease;
}
/* Warmup (#wcAddWarmup) = orange */
.wc-quick-btn#wcAddWarmup::before { background: linear-gradient(180deg, #ffb74d, #ff9f0a); }
.wc-quick-btn#wcAddWarmup:hover {
    border-color: rgba(255,159,10,0.4) !important;
    box-shadow: 0 0 20px -4px rgba(255,159,10,0.4), 0 6px 14px -6px rgba(0,0,0,0.5) !important;
}
/* Rest (#wcAddRest) = blue/purple */
.wc-quick-btn#wcAddRest::before { background: linear-gradient(180deg, #7f8eff, #5e5ce6); }
.wc-quick-btn#wcAddRest:hover {
    border-color: rgba(94,92,230,0.4) !important;
    box-shadow: 0 0 20px -4px rgba(94,92,230,0.4), 0 6px 14px -6px rgba(0,0,0,0.5) !important;
}
/* Exercise (#wcAddExercise) = green */
.wc-quick-btn#wcAddExercise::before { background: linear-gradient(180deg, #58dc85, #2ecc71); }
.wc-quick-btn#wcAddExercise:hover {
    border-color: rgba(46,204,113,0.4) !important;
    box-shadow: 0 0 20px -4px rgba(46,204,113,0.4), 0 6px 14px -6px rgba(0,0,0,0.5) !important;
}

/* Canvas empty state — aligned with belt-ribbon */
.wc-canvas__empty {
    padding: 2.5rem 1rem !important;
    min-height: 220px !important;
    border-radius: 14px;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.03),
        rgba(255,255,255,0.01));
    border: 1px dashed rgba(255,255,255,0.1);
}
.wc-canvas__empty-icon { font-size: 3rem !important; }

/* Exercise list spacing */
.wc-exercise-list { gap: 0.55rem !important; }

/* Exercise card — compact on mobile, cleaner duration input */
.wc-exercise-card {
    padding: 0.7rem 0.75rem 0.7rem 1rem !important;
    border-radius: 12px !important;
    gap: 0.6rem !important;
}
.wc-exercise-name {
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.wc-duration-input {
    background:
        linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.2)) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-weight: 700;
    padding: 0.35rem 0.4rem !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 4px rgba(0,0,0,0.25) inset !important;
    width: 54px !important;
    text-align: center;
}
.wc-duration-input:focus {
    border-color: var(--cor-primaria) !important;
    box-shadow:
        0 0 0 3px rgba(230,126,34,0.2),
        0 1px 0 rgba(255,255,255,0.06) inset !important;
    outline: none;
}

/* Sticky save bar at bottom */
.wc-creator-save-row {
    display: flex !important;
    gap: 0.7rem !important;
    margin-top: 1.25rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.wc-btn {
    flex: 1;
    padding: 0.85rem 1rem !important;
    border-radius: 12px !important;
    font-weight: 800 !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent !important;
    transition: all 0.25s ease !important;
    -webkit-tap-highlight-color: transparent;
}
.wc-btn--secondary {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.7) !important;
}
.wc-btn--secondary:hover {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}
.wc-btn--primary {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-primaria) 100%, #fff 15%),
        var(--cor-primaria)) !important;
    border-color: color-mix(in srgb, var(--cor-primaria) 70%, #000 30%) !important;
    color: #fff !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.25) inset,
        0 -1px 0 rgba(0,0,0,0.25) inset,
        0 8px 18px -6px rgba(230,126,34,0.55) !important;
}
.wc-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.3) inset,
        0 -1px 0 rgba(0,0,0,0.3) inset,
        0 12px 22px -6px rgba(230,126,34,0.65) !important;
}
.wc-btn:active { transform: scale(0.98); }

/* Insert-rest divider — aligned with belt theme */
.wc-insert-divider__btn {
    border-color: rgba(94,92,230,0.45) !important;
    color: rgba(127,142,255,0.9) !important;
    background: rgba(94,92,230,0.06) !important;
}
.wc-insert-divider__btn:hover {
    background: rgba(94,92,230,0.15) !important;
    color: #fff !important;
    border-color: rgba(127,142,255,0.7) !important;
}

/* Responsive — stack quick bar on very small phones */
@media (max-width: 360px) {
    .wc-quick-bar { grid-template-columns: repeat(3, 1fr) !important; gap: 0.4rem !important; }
    .wc-quick-btn { padding: 0.6rem 0.3rem !important; font-size: 0.72rem !important; }
    .wc-summary-strip .wc-stat-value { font-size: 1.3rem !important; }
    .fvw-cat-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
}

/* =====================================================================
   8. UNIFIED BACK BUTTON — Treinos Rápidos, Construtor, Explore, etc.
   Replaces the ad-hoc tiny-pill look with a consistent belt-ribbon pill
   used across `.fqw`, `.fvw`, and the Oficina back buttons.
   ===================================================================== */
.fqw .back-to-hub-btn,
.fvw .back-to-hub-btn,
.of-back-hub.back-to-hub-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55rem !important;
    padding: 0.55rem 1rem 0.55rem 0.85rem !important;
    margin: 0 0 1rem 0 !important;
    border-radius: 999px !important;
    font-family: var(--font-destaque, inherit);
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--cor-primaria, #e67e22) 80%, #fff 20%) !important;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0) 100%),
        linear-gradient(135deg,
            rgba(230,126,34,0.12),
            rgba(230,126,34,0.04)),
        #14141a !important;
    border: 1px solid rgba(230,126,34,0.25) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.14) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 6px 14px -6px rgba(230,126,34,0.35),
        0 4px 10px -4px rgba(0,0,0,0.5) !important;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(.4,0,.2,1) !important;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}
.fqw .back-to-hub-btn::before,
.fvw .back-to-hub-btn::before,
.of-back-hub.back-to-hub-btn::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e67e22' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M12 19l-7-7 7-7'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    opacity: 0.95 !important;
    transition: transform 0.25s ease;
}
.fqw .back-to-hub-btn span,
.fvw .back-to-hub-btn span,
.of-back-hub.back-to-hub-btn span { display: inline !important; }

.fqw .back-to-hub-btn:hover,
.fvw .back-to-hub-btn:hover,
.of-back-hub.back-to-hub-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--cor-primaria) 55%, rgba(255,255,255,0.1)) !important;
    color: #fff !important;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.16) 0%,
            rgba(255,255,255,0) 100%),
        linear-gradient(135deg,
            rgba(230,126,34,0.2),
            rgba(230,126,34,0.08)),
        #16161b !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.18) inset,
        0 -1px 0 rgba(0,0,0,0.45) inset,
        0 10px 22px -8px rgba(230,126,34,0.55),
        0 0 22px -4px rgba(230,126,34,0.4) !important;
}
.fqw .back-to-hub-btn:hover::before,
.fvw .back-to-hub-btn:hover::before,
.of-back-hub.back-to-hub-btn:hover::before { transform: translateX(-3px); }

.fqw .back-to-hub-btn:active,
.fvw .back-to-hub-btn:active,
.of-back-hub.back-to-hub-btn:active {
    transform: scale(0.97) !important;
    filter: none !important;
}

/* =====================================================================
   9. WORKOUT CREATOR — Duration button (replaces the number input)
   ===================================================================== */
.wc-duration-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    min-width: 82px;
    border-radius: 999px;
    font-family: var(--font-destaque, inherit);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.14) 0%,
            rgba(255,255,255,0) 100%),
        linear-gradient(135deg,
            rgba(230,126,34,0.25),
            rgba(230,126,34,0.1)),
        #16161b;
    border: 1px solid rgba(230,126,34,0.4);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.2) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 6px 14px -6px rgba(230,126,34,0.45),
        0 4px 10px -4px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: all 0.22s cubic-bezier(.4,0,.2,1);
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.wc-duration-btn__icon { font-size: 0.95rem; line-height: 1; }
.wc-duration-btn__value {
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
}
.wc-duration-btn:hover {
    transform: translateY(-1px);
    border-color: var(--cor-primaria, #e67e22);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.22) inset,
        0 -1px 0 rgba(0,0,0,0.45) inset,
        0 10px 20px -6px rgba(230,126,34,0.65),
        0 0 24px -4px rgba(230,126,34,0.45);
}
.wc-duration-btn:active { transform: scale(0.96); }

/* Rest/Warmup cards get accent-colored duration chip */
.wc-exercise-card--rest .wc-duration-btn {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100%),
        linear-gradient(135deg, rgba(94,92,230,0.28), rgba(94,92,230,0.1)),
        #16161b;
    border-color: rgba(94,92,230,0.45);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.2) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 6px 14px -6px rgba(94,92,230,0.5);
}
.wc-exercise-card--warmup .wc-duration-btn {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 100%),
        linear-gradient(135deg, rgba(255,159,10,0.3), rgba(255,159,10,0.1)),
        #16161b;
    border-color: rgba(255,159,10,0.45);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.2) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 6px 14px -6px rgba(255,159,10,0.5);
}

/* =====================================================================
   10. DURATION PICKER MODAL
   ===================================================================== */
#duration-picker-modal .modal-content.dp-modal {
    max-width: 360px;
    padding: 1.75rem 1.5rem 1.4rem !important;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.07) 0%,
            rgba(255,255,255,0) 8%,
            rgba(255,255,255,0) 92%,
            rgba(0,0,0,0.35) 100%),
        linear-gradient(135deg, rgba(230,126,34,0.08), rgba(230,126,34,0.02)),
        #141418 !important;
    border: 1px solid rgba(230,126,34,0.18) !important;
    border-radius: 22px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.12) inset,
        0 -1px 0 rgba(0,0,0,0.55) inset,
        0 30px 60px -20px rgba(0,0,0,0.75),
        0 0 40px -8px rgba(230,126,34,0.25) !important;
}
.dp-header {
    text-align: center;
    margin-bottom: 1.2rem;
}
.dp-icon {
    display: inline-block;
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.4rem;
    filter: drop-shadow(0 4px 10px rgba(230,126,34,0.5));
}
.dp-title {
    font-family: var(--font-destaque, inherit);
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.2rem;
    letter-spacing: 0.01em;
}
.dp-subtitle {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.5);
    margin: 0;
    line-height: 1.3;
}

/* Number display with steppers */
.dp-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin: 1rem auto 1.2rem;
    padding: 0.9rem 0.6rem;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.3),
        rgba(0,0,0,0.15));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 18px;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.05) inset,
        0 3px 8px rgba(0,0,0,0.3) inset;
}
.dp-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 78px;
    position: relative;
}
.dp-step {
    width: 40px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03)),
        rgba(230,126,34,0.08);
    color: color-mix(in srgb, var(--cor-primaria, #e67e22) 80%, #fff 20%);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.12) inset,
        0 -1px 0 rgba(0,0,0,0.3) inset;
}
.dp-step:hover {
    border-color: var(--cor-primaria, #e67e22);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.15) inset,
        0 -1px 0 rgba(0,0,0,0.3) inset,
        0 0 14px -2px rgba(230,126,34,0.5);
}
.dp-step:active { transform: scale(0.94); }
.dp-num {
    font-family: var(--font-destaque, inherit);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    font-feature-settings: 'tnum' 1;
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 0 20px rgba(230,126,34,0.35),
        0 2px 4px rgba(0,0,0,0.6);
    letter-spacing: 0.02em;
    min-width: 78px;
    text-align: center;
}
.dp-unit {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.5);
    margin-top: -2px;
}
.dp-sep {
    font-family: var(--font-destaque, inherit);
    font-size: 2.4rem;
    font-weight: 800;
    color: color-mix(in srgb, var(--cor-primaria, #e67e22) 70%, #fff 30%);
    opacity: 0.7;
    line-height: 1;
    padding-bottom: 18px;
    animation: dpBlink 1.5s ease-in-out infinite;
}
@keyframes dpBlink {
    0%, 50%, 100% { opacity: 0.7; }
    25%, 75%      { opacity: 0.25; }
}

/* Preset row */
.dp-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
    margin-bottom: 1.2rem;
}
.dp-preset {
    padding: 0.5rem 0.35rem;
    border-radius: 12px;
    font-family: var(--font-destaque, inherit);
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.7);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
        rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 4px 8px -4px rgba(0,0,0,0.4);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(.4,0,.2,1);
    -webkit-tap-highlight-color: transparent;
}
.dp-preset:hover {
    color: #fff;
    border-color: rgba(230,126,34,0.3);
}
.dp-preset.is-active {
    color: #fff;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--cor-primaria, #e67e22) 100%, #fff 15%),
            var(--cor-primaria, #e67e22));
    border-color: color-mix(in srgb, var(--cor-primaria, #e67e22) 70%, #000 30%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.28) inset,
        0 -1px 0 rgba(0,0,0,0.25) inset,
        0 6px 14px -4px rgba(230,126,34,0.55);
}
.dp-preset:active { transform: scale(0.96); }

/* Actions */
.dp-actions {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 0.6rem;
}
.dp-btn {
    padding: 0.8rem 1rem;
    border-radius: 14px;
    font-family: var(--font-destaque, inherit);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.22s ease;
    -webkit-tap-highlight-color: transparent;
}
.dp-btn--ghost {
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.1);
}
.dp-btn--ghost:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
}
.dp-btn--primary {
    color: #fff;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-primaria, #e67e22) 100%, #fff 15%),
        var(--cor-primaria, #e67e22));
    border-color: color-mix(in srgb, var(--cor-primaria, #e67e22) 70%, #000 30%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.28) inset,
        0 -1px 0 rgba(0,0,0,0.28) inset,
        0 10px 22px -8px rgba(230,126,34,0.6);
}
.dp-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.3) inset,
        0 -1px 0 rgba(0,0,0,0.3) inset,
        0 14px 26px -8px rgba(230,126,34,0.7);
}
.dp-btn:active { transform: scale(0.97); }

#duration-picker-modal .close-modal {
    top: 10px; right: 12px;
    color: rgba(255,255,255,0.5);
    font-size: 1.6rem;
}
#duration-picker-modal .close-modal:hover { color: #fff; }

/* =====================================================================
   11. NUTRITION DIARY — Belt-ribbon redesign
   ===================================================================== */

/* Date bar */
#view-nutricao .nd-date-bar {
    margin-bottom: 1rem !important;
}
#view-nutricao .nd-date-input {
    background:
        linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,0.15)) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    color: #fff !important;
    padding: 0.75rem 1rem !important;
    font-weight: 700;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.06) inset,
        0 3px 8px -4px rgba(0,0,0,0.4) !important;
}

/* Hero card — calories ring + stats, belt-ribbon panel with orange stripe */
#view-nutricao .nd-hero-card {
    --card-accent-solid: var(--cor-primaria, #e67e22);
    position: relative;
    padding: 1.2rem 1.2rem 1.2rem 1.6rem !important;
    margin-bottom: 1rem !important;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.1) 0%,
            rgba(255,255,255,0) 6%,
            rgba(255,255,255,0) 94%,
            rgba(0,0,0,0.3) 100%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--card-accent-solid) 18%, #14141a),
            color-mix(in srgb, var(--card-accent-solid) 8%, #0e0e12)),
        #16161b !important;
    border: 1px solid rgba(230,126,34,0.18) !important;
    border-radius: 18px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 -1px 0 rgba(0,0,0,0.5) inset,
        0 14px 28px -14px rgba(0,0,0,0.7),
        0 6px 14px -6px rgba(0,0,0,0.55) !important;
}
#view-nutricao .nd-hero-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    border-radius: 18px 0 0 18px;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--card-accent-solid) 120%, #fff 0%) 0%,
        var(--card-accent-solid) 50%,
        color-mix(in srgb, var(--card-accent-solid) 60%, #000 40%) 100%);
    box-shadow:
        1px 0 0 rgba(255,255,255,0.18) inset,
        2px 0 10px color-mix(in srgb, var(--card-accent-solid) 40%, transparent 60%);
    pointer-events: none;
}
#view-nutricao .nd-ring-num {
    text-shadow: 0 2px 8px rgba(230,126,34,0.4);
}

/* Goal buttons — pills with belt-ribbon flair */
#view-nutricao .nd-goal-bar {
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
}
#view-nutricao .nd-goal-btn {
    flex: 1;
    padding: 0.6rem 0.5rem !important;
    border-radius: 999px !important;
    font-family: var(--font-destaque, inherit);
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.65) !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%),
        rgba(255,255,255,0.035) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 4px 10px -4px rgba(0,0,0,0.4) !important;
    transition: all 0.25s ease !important;
}
#view-nutricao .nd-goal-btn.is-active,
#view-nutricao .nd-goal-btn.active {
    color: #fff !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--cor-primaria, #e67e22) 100%, #fff 12%),
            var(--cor-primaria, #e67e22)) !important;
    border-color: color-mix(in srgb, var(--cor-primaria, #e67e22) 80%, #000 20%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.3) inset,
        0 -1px 0 rgba(0,0,0,0.25) inset,
        0 6px 14px -4px rgba(230,126,34,0.55) !important;
}

/* Macros card — belt-ribbon with left stripe */
#view-nutricao .nd-macros-card,
#view-nutricao .nd-water-card {
    position: relative;
    padding: 1rem 1rem 1rem 1.5rem !important;
    margin-bottom: 1rem !important;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.07) 0%,
            rgba(255,255,255,0) 8%,
            rgba(255,255,255,0) 92%,
            rgba(0,0,0,0.28) 100%),
        linear-gradient(135deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.015)),
        #16161b !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 -1px 0 rgba(0,0,0,0.45) inset,
        0 10px 22px -12px rgba(0,0,0,0.6) !important;
}
#view-nutricao .nd-macros-card::before,
#view-nutricao .nd-water-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    border-radius: 16px 0 0 16px;
    pointer-events: none;
    box-shadow: 1px 0 0 rgba(255,255,255,0.18) inset;
}
#view-nutricao .nd-macros-card::before {
    background: linear-gradient(180deg, #6cc8ff, #3498db 50%, #21739d);
    box-shadow:
        1px 0 0 rgba(255,255,255,0.2) inset,
        2px 0 10px rgba(52,152,219,0.35);
}
#view-nutricao .nd-water-card::before {
    background: linear-gradient(180deg, #7fe3ff, #3aa9ff 50%, #2070b5);
    box-shadow:
        1px 0 0 rgba(255,255,255,0.2) inset,
        2px 0 10px rgba(58,169,255,0.4);
}

/* Macro bars: thicker & glowy */
#view-nutricao .nd-macro-track {
    height: 10px !important;
    background: rgba(0,0,0,0.35) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4) inset !important;
}
#view-nutricao .nd-macro-fill {
    height: 100% !important;
    border-radius: inherit;
    box-shadow: 0 0 10px currentColor;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
}
#view-nutricao .nd-macro-dot {
    box-shadow: 0 0 10px currentColor;
}

/* Meal accordions — belt-ribbon style */
#view-nutricao .meal-accordion { gap: 0.6rem !important; margin-top: 1.2rem !important; }
#view-nutricao .meal-accordion-item {
    position: relative;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.07) 0%,
            rgba(255,255,255,0) 8%,
            rgba(255,255,255,0) 92%,
            rgba(0,0,0,0.25) 100%),
        rgba(255,255,255,0.02) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 14px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -1px 0 rgba(0,0,0,0.35) inset,
        0 6px 14px -8px rgba(0,0,0,0.5) !important;
    overflow: hidden;
}
#view-nutricao .meal-accordion-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.35),
        rgba(255,255,255,0.08));
    pointer-events: none;
    transition: background 0.25s ease;
}
#view-nutricao .meal-accordion-item[open] {
    border-color: rgba(230,126,34,0.3) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 -1px 0 rgba(0,0,0,0.4) inset,
        0 10px 22px -8px rgba(230,126,34,0.25),
        0 6px 14px -6px rgba(0,0,0,0.55) !important;
}
#view-nutricao .meal-accordion-item[open]::before {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cor-primaria, #e67e22) 120%, #fff 0%) 0%,
        var(--cor-primaria, #e67e22) 50%,
        color-mix(in srgb, var(--cor-primaria, #e67e22) 60%, #000 40%) 100%);
    box-shadow: 2px 0 8px rgba(230,126,34,0.4);
}
#view-nutricao .meal-accordion-header {
    padding: 0.85rem 1rem 0.85rem 1.4rem !important;
}
#view-nutricao .meal-accordion-header::before {
    left: 0.75rem !important;
}

/* ── Generic reduced-motion keeps surfaces flat ──────────────────── */
@media (prefers-reduced-motion: reduce) {
    .fhub-card, .fqw-preview, .wc-app,
    .fhub-card:hover, .fqw-preview:hover, .wc-app:hover,
    .fqw-option, .fqw-option:hover, .fqw-option.active,
    .wc-exercise-card, .wc-exercise-row, .wc-quick-btn, .wc-quick-btn:hover,
    .wc-duration-btn, .wc-duration-btn:hover,
    .dp-btn, .dp-btn:hover, .dp-preset, .dp-preset:hover, .dp-step:active,
    .fqw .back-to-hub-btn:hover, .fvw .back-to-hub-btn:hover {
        transform: none !important;
    }
    .dp-sep { animation: none !important; opacity: 0.5 !important; }
}

/* =====================================================================
   12. PERFORMANCE — Low-FX mode + content-visibility for long grids
   `.low-fx` is applied to <html> at boot time when the device reports
   <4GB RAM, <4 CPU cores, prefers-reduced-motion, or `(update: slow)`.
   It strips the most expensive effects (backdrop-filter mainly) while
   keeping the design recognizable.
   ===================================================================== */
html.low-fx *,
html.low-fx *::before,
html.low-fx *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Collapse the most expensive multi-layer shadows in low-fx mode (kept as
   a single soft drop) to reduce paint cost on low-end GPUs. */
html.low-fx .sub-menu-card,
html.low-fx .stg-card,
html.low-fx .timeline-content,
html.low-fx .wc-exercise-card,
html.low-fx .fvw-card,
html.low-fx .wc-lib-card,
html.low-fx #view-nutricao .nd-hero-card,
html.low-fx #view-nutricao .nd-macros-card,
html.low-fx #view-nutricao .nd-water-card,
html.low-fx #view-nutricao .meal-accordion-item,
html.low-fx .dp-modal {
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.55) !important;
}
/* Completely disable the pointer-tilt transform in low-fx */
html.low-fx .sub-menu-card,
html.low-fx .stg-card,
html.low-fx .timeline-content {
    transform: none !important;
}
html.low-fx .dp-sep { animation: none !important; opacity: 0.5 !important; }

/* Long grids: only paint the part of the list actually on-screen. This is
   a massive win for the arsenal, explore & library views which can render
   dozens of cards at once. `contain-intrinsic-size` reserves space so the
   scrollbar stays stable. */
.fvw-grid,
.wc-sheet__list,
#wcSheetList,
.arsenal-exercises-grid,
.smart-coach-exercise-grid,
.fvw-cat-cards {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
    contain: layout paint style;
}
/* Each card is a natural containment boundary — stops style/layout from
   propagating up when the grid refreshes. */
.fvw-card,
.wc-lib-card,
.wc-exercise-card {
    contain: layout paint;
}

/* ── Responsive: denser on very small screens ────────────────────── */
@media (max-width: 380px) {
    .belt-progression-timeline .timeline-content { padding: 0.85rem 0.9rem !important; gap: 0.5rem !important; }
    .belt-progression-timeline .timeline-belt-chinese { font-size: 1.65rem; margin-bottom: 0.25rem; }
    .belt-progression-timeline .timeline-belt-name { font-size: 1.02rem !important; }
    .belt-progression-timeline .timeline-arrow { font-size: 1.3rem !important; }
    .stg-row-icon { width: 32px !important; height: 32px; }
    .stg-card, .stg-row, .stg-action-row { padding-left: 0.9rem !important; padding-right: 0.9rem !important; }
}

/* Watermark: ensure it stays small on mobile so it doesn't overflow the card */
@media (max-width: 768px) {
    .belt-progression-timeline .timeline-belt-watermark {
        font-size: 2.4rem;
        right: 0.5rem;
        bottom: 0.3rem;
        opacity: 0.5;
    }
    .belt-progression-timeline .timeline-content::before {
        width: 5px;
    }
}
@media (max-width: 380px) {
    .belt-progression-timeline .timeline-belt-watermark {
        font-size: 1.9rem;
        opacity: 0.45;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .belt-progression-timeline .timeline-content,
    .belt-progression-timeline .timeline-content:hover,
    .belt-progression-timeline .timeline-belt-chinese,
    .belt-progression-timeline .timeline-arrow,
    .belt-progression-timeline .timeline-item.studying .timeline-belt-chinese,
    .belt-progression-timeline .timeline-item.studying .timeline-info::after,
    .belt-progression-timeline .timeline-item.studying .timeline-dot,
    .belt-progression-timeline .timeline-item.studying .timeline-status {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   12. CAMINHO DO GUERREIRO — Dossier hub cards (belt-ribbon surface)
   Applies the same piping + left 3D stripe + accent-tinted background
   used by .sub-menu-card / belt cards, so the Estudar a Sebenta /
   Treino Rápido / Ver Certificado panels match the rest of the system.
   ===================================================================== */

/* Per-card accent driven by data-dossier-view */
.training-hub-card--detailed[data-dossier-view="sebenta"],
.training-hub-card--detailed[data-dossier-view="choose-sebenta"] { --card-accent-solid: #3498db; }
.training-hub-card--detailed[data-dossier-view="wc-treino-rapido"] { --card-accent-solid: #e67e22; }
.training-hub-card--detailed[data-dossier-view="certificado"]      { --card-accent-solid: #f1c40f; }
.training-hub-card--detailed[data-dossier-view="preparacao"]       { --card-accent-solid: #9b59b6; }
.training-hub-card--detailed[data-dossier-view="exame"]            { --card-accent-solid: #2ecc71; }
.training-hub-card--detailed[data-dossier-view="tecnicas"]         { --card-accent-solid: #e74c3c; }
.training-hub-card--detailed { --card-accent-solid: var(--cor-primaria, #e67e22); }

.training-hub-card.training-hub-card--detailed {
    position: relative;
    isolation: isolate;
    border-radius: 18px !important;
    border: 1px solid color-mix(in srgb, var(--card-accent-solid) 28%, rgba(255,255,255,0.06)) !important;
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--card-accent-solid) 18%, #14141a) 0%,
            color-mix(in srgb, var(--card-accent-solid) 8%,  #0e0e12) 100%) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.12) inset,
        0 -1px 0 rgba(0,0,0,0.55) inset,
        0 10px 22px -10px rgba(0,0,0,0.65),
        0 4px 10px -4px color-mix(in srgb, var(--card-accent-solid) 30%, transparent) !important;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Top piping highlight */
.training-hub-card.training-hub-card--detailed::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg,
        rgba(255,255,255,0.18) 0%,
        rgba(255,255,255,0) 45%);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
}

/* Prominent left 3D belt stripe */
.training-hub-card.training-hub-card--detailed::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 10px !important;
    bottom: 10px !important;
    left: 6px !important;
    width: 6px !important;
    border-radius: 3px !important;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--card-accent-solid) 85%, #fff) 0%,
        var(--card-accent-solid) 55%,
        color-mix(in srgb, var(--card-accent-solid) 75%, #000) 100%) !important;
    box-shadow:
        0 0 14px -2px color-mix(in srgb, var(--card-accent-solid) 60%, transparent),
        0 2px 4px rgba(0,0,0,0.5) !important;
    z-index: 2 !important;
    animation: none !important;
    transform: none !important;
    top: 10px; /* reset any inherited shimmer rule */
}

/* Hover — lifted with accent halo */
.training-hub-card.training-hub-card--detailed:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--card-accent-solid) 45%, rgba(255,255,255,0.08)) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.16) inset,
        0 -1px 0 rgba(0,0,0,0.55) inset,
        0 16px 34px -12px rgba(0,0,0,0.75),
        0 0 28px -6px color-mix(in srgb, var(--card-accent-solid) 50%, transparent) !important;
}

/* Push content past the left stripe */
.training-hub-card.training-hub-card--detailed .training-hub-card-content {
    padding-left: 22px !important;
    position: relative;
    z-index: 2;
}

/* Title — bold with accent glow */
.training-hub-card.training-hub-card--detailed .training-hub-card-title {
    font-family: var(--font-destaque, 'Teko', sans-serif);
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--card-accent-solid) 65%, #ffffff) !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Description */
.training-hub-card.training-hub-card--detailed .training-hub-card-desc {
    color: rgba(255,255,255,0.65) !important;
}

/* Arrow accent */
.training-hub-card.training-hub-card--detailed .training-hub-card-arrow {
    color: color-mix(in srgb, var(--card-accent-solid) 70%, #ffffff) !important;
    text-shadow: 0 0 8px color-mix(in srgb, var(--card-accent-solid) 45%, transparent);
}

/* Right-side illustration — lift with a belt-tinted glow on hover */
.training-hub-card.training-hub-card--detailed .training-hub-card-image {
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.55));
    transition: transform 0.35s ease, filter 0.35s ease;
}
.training-hub-card.training-hub-card--detailed:hover .training-hub-card-image {
    filter:
        drop-shadow(0 14px 22px rgba(0,0,0,0.6))
        drop-shadow(0 0 12px color-mix(in srgb, var(--card-accent-solid) 35%, transparent));
}

/* Reduced motion / low-fx */
@media (prefers-reduced-motion: reduce) {
    .training-hub-card.training-hub-card--detailed,
    .training-hub-card.training-hub-card--detailed:hover {
        transform: none !important;
        transition: none !important;
    }
}
html.low-fx .training-hub-card.training-hub-card--detailed {
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.55) !important;
}
html.low-fx .training-hub-card.training-hub-card--detailed::before { display: none !important; }

/* =====================================================================
   13. BACKGROUND OPACITY SLIDER — premium range control
   ===================================================================== */
#bg-opacity-row .stg-row-header {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}
#bg-opacity-row .stg-row-value {
    margin-left: auto;
    font-family: var(--font-destaque, 'Teko', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--cor-primaria, #e67e22);
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cor-primaria, #e67e22) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--cor-primaria, #e67e22) 28%, transparent);
    min-width: 48px;
    text-align: center;
}
.stg-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--cor-primaria, #e67e22) 60%, transparent) 0%,
        color-mix(in srgb, var(--cor-primaria, #e67e22) 35%, transparent) var(--range-pct, 15%),
        rgba(255,255,255,0.08) var(--range-pct, 15%),
        rgba(255,255,255,0.08) 100%);
    outline: none;
    cursor: pointer;
    transition: background 0.15s ease;
    margin: 0.5rem 0 0.3rem;
}
.stg-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #fff 0%, var(--cor-primaria, #e67e22) 65%, color-mix(in srgb, var(--cor-primaria, #e67e22) 70%, #000) 100%);
    border: 2px solid rgba(255,255,255,0.85);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.45),
        0 0 0 4px color-mix(in srgb, var(--cor-primaria, #e67e22) 18%, transparent);
    cursor: grab;
    transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.stg-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #fff 0%, var(--cor-primaria, #e67e22) 65%, color-mix(in srgb, var(--cor-primaria, #e67e22) 70%, #000) 100%);
    border: 2px solid rgba(255,255,255,0.85);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.45),
        0 0 0 4px color-mix(in srgb, var(--cor-primaria, #e67e22) 18%, transparent);
    cursor: grab;
}
.stg-range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.stg-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.stg-range::-moz-range-track {
    background: transparent;
    height: 6px;
    border-radius: 999px;
}
.stg-range-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--cor-texto-secundario, rgba(255,255,255,0.5));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    padding: 0 0.15rem;
}

/* =====================================================================
   14. GRANDES MESTRES — Lineage scroll cards (modern, ceremonial)
   ===================================================================== */

.master-scroll-grid {
    --gm-gold: #d4af37;
    --gm-gold-soft: #b68d2e;
    --gm-ink: #efe6d3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0.5rem 0 2rem;
    max-width: 860px;
    margin: 0 auto;
}

.master-scroll {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 1.1rem;
    align-items: stretch;
    position: relative;
    animation: masterScrollFadeIn 0.6s cubic-bezier(.2,.9,.3,1) both;
}
.master-scroll:nth-child(n) { animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes masterScrollFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Rail (left): ordinal seal + connecting line ─────────────────── */
.master-scroll-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.master-scroll-crest {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 30% 28%,
            color-mix(in srgb, var(--gm-gold) 55%, #fff5d8) 0%,
            var(--gm-gold) 40%,
            color-mix(in srgb, var(--gm-gold) 70%, #2a1a05) 100%);
    border: 2px solid color-mix(in srgb, var(--gm-gold) 80%, #fff 10%);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.35) inset,
        0 -2px 4px rgba(0,0,0,0.35) inset,
        0 8px 18px -6px rgba(0,0,0,0.55),
        0 0 22px -6px color-mix(in srgb, var(--gm-gold) 55%, transparent);
    flex-shrink: 0;
    margin-top: 0.2rem;
    isolation: isolate;
}
.master-scroll-crest::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px dashed rgba(60, 40, 10, 0.45);
    pointer-events: none;
}
.master-scroll-number {
    font-family: var(--font-destaque, 'Teko', sans-serif);
    font-size: 2.6rem;
    font-weight: 800;
    color: #2a1a05;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255,255,255,0.45);
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
}
.master-scroll-line {
    flex: 1;
    width: 2px;
    margin-top: 0.4rem;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--gm-gold) 55%, transparent) 0%,
        color-mix(in srgb, var(--gm-gold) 18%, transparent) 60%,
        transparent 100%);
    position: relative;
}
.master-scroll-line::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gm-gold) 80%, #fff 10%);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px color-mix(in srgb, var(--gm-gold) 60%, transparent);
}

/* ── Body (right): name + title + bio ────────────────────────────── */
.master-scroll-body {
    position: relative;
    isolation: isolate;
    padding: 1.3rem 1.4rem 1.15rem;
    margin-bottom: 1.2rem;
    border-radius: 16px;
    background:
        linear-gradient(145deg,
            rgba(40, 32, 22, 0.78) 0%,
            rgba(22, 18, 14, 0.85) 100%);
    border: 1px solid color-mix(in srgb, var(--gm-gold) 24%, rgba(255,255,255,0.06));
    box-shadow:
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 -1px 0 rgba(0,0,0,0.55) inset,
        0 10px 22px -10px rgba(0,0,0,0.6),
        0 0 0 1px rgba(212, 175, 55, 0.05);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
/* Gold piping highlight at top */
.master-scroll-body::before {
    content: '';
    position: absolute;
    top: 0; left: 14%; right: 14%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--gm-gold) 75%, transparent),
        transparent);
    pointer-events: none;
    z-index: 1;
}
/* Corner ornamental dots */
.master-scroll-body::after {
    content: '';
    position: absolute;
    top: 10px; right: 12px;
    width: 18px;
    height: 18px;
    border-top: 1px solid color-mix(in srgb, var(--gm-gold) 55%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--gm-gold) 55%, transparent);
    border-top-right-radius: 6px;
    pointer-events: none;
    opacity: 0.7;
}
.master-scroll:hover .master-scroll-body {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--gm-gold) 40%, rgba(255,255,255,0.06));
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1) inset,
        0 -1px 0 rgba(0,0,0,0.55) inset,
        0 14px 28px -10px rgba(0,0,0,0.7),
        0 0 26px -10px color-mix(in srgb, var(--gm-gold) 55%, transparent);
}

/* Giant watermark kanji floating behind the text */
.master-scroll-watermark {
    position: absolute;
    right: -0.2rem;
    bottom: -1.8rem;
    font-family: "Noto Serif CJK SC", "SimSun", "Cormorant Garamond", serif;
    font-size: 11rem;
    font-weight: 700;
    line-height: 1;
    color: color-mix(in srgb, var(--gm-gold) 12%, transparent);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -0.05em;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(0,0,0,0.15);
}

.master-scroll-head { position: relative; z-index: 2; }
.master-scroll-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    margin: 0;
    font-family: var(--font-destaque, 'Teko', sans-serif);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0.01em;
}
.master-scroll-name-main {
    font-weight: 700;
    color: var(--gm-ink);
    text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.master-scroll-kanji {
    font-family: "Noto Serif CJK SC", "SimSun", serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--gm-gold) 85%, #fff);
    letter-spacing: 0.08em;
    padding: 0.1rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--gm-gold) 40%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--gm-gold) 10%, transparent);
}
.master-scroll-title {
    position: relative;
    z-index: 2;
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--gm-gold) 80%, #fff);
    opacity: 0.92;
}

/* Divider with center diamond mark */
.master-scroll-divider {
    position: relative;
    z-index: 2;
    height: 1px;
    margin: 0.9rem 0 0.9rem;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--gm-gold) 55%, transparent) 20%,
        color-mix(in srgb, var(--gm-gold) 55%, transparent) 80%,
        transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.master-scroll-divider-mark {
    width: 8px;
    height: 8px;
    background: var(--gm-gold);
    transform: rotate(45deg);
    box-shadow:
        0 0 10px color-mix(in srgb, var(--gm-gold) 70%, transparent),
        0 0 0 3px #14100a;
}

/* Bio with clamp + expand */
.master-scroll-bio {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 0.93rem;
    line-height: 1.68;
    color: rgba(239, 230, 211, 0.82);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-style: italic;
    letter-spacing: 0.01em;
    text-align: justify;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: -webkit-line-clamp 0.3s ease;
    mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent 100%);
}
.master-scroll-bio[data-expanded="true"] {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
}

.master-scroll-bio::first-letter {
    font-family: var(--font-destaque, 'Teko', sans-serif);
    font-style: normal;
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--gm-gold);
    float: left;
    line-height: 0.85;
    padding: 0.25rem 0.45rem 0 0;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Read more button */
.master-scroll-more {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding: 0.45rem 1rem;
    background: color-mix(in srgb, var(--gm-gold) 10%, rgba(0,0,0,0.3));
    border: 1px solid color-mix(in srgb, var(--gm-gold) 35%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, var(--gm-gold) 85%, #fff);
    font-family: var(--font-destaque, 'Teko', sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.25s ease;
}
.master-scroll-more:hover {
    background: color-mix(in srgb, var(--gm-gold) 22%, rgba(0,0,0,0.2));
    border-color: color-mix(in srgb, var(--gm-gold) 60%, transparent);
    box-shadow: 0 0 14px -4px color-mix(in srgb, var(--gm-gold) 60%, transparent);
}
.master-scroll-more:active { transform: scale(0.97); }
.master-scroll-more-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--gm-gold) 25%, transparent);
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
}

/* Responsive tweaks */
@media (max-width: 560px) {
    .master-scroll { grid-template-columns: 68px 1fr; gap: 0.8rem; }
    .master-scroll-crest { width: 58px; height: 58px; }
    .master-scroll-number { font-size: 2rem; }
    .master-scroll-body { padding: 1.05rem 1.1rem 1rem; }
    .master-scroll-name { font-size: 1.55rem; gap: 0.45rem; }
    .master-scroll-kanji { font-size: 1.05rem; padding: 0.08rem 0.4rem; }
    .master-scroll-title { font-size: 0.68rem; letter-spacing: 0.18em; }
    .master-scroll-bio { font-size: 0.88rem; line-height: 1.6; }
    .master-scroll-watermark { font-size: 7rem; right: -0.5rem; bottom: -1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .master-scroll { animation: none; }
    .master-scroll:hover .master-scroll-body { transform: none; }
}

/* =====================================================================
   7. SETTINGS — Belt-ribbon unification
   -------------------------------------------------------------------
   Aplica aos `.stg-card` a mesma linguagem visual "belt-ribbon" usada
   em todo o resto da app (sub-menu-card, fhub-card, timeline-content,
   etc.): fundo com tinta de acento + stripe lateral 3D de 6px. As
   abas (.stg-tabs) ficam inalteradas; muda apenas a superfície dos
   cartões dentro de cada painel. Cada separador recebe uma cor de
   acento distinta para criar identidade sem sair da mesma família.
   ===================================================================== */

.stg-v2 .stg-card {
    --stg-card-accent: var(--sb3d-accent, #e67e22);
    position: relative;
    background:
        /* Top + bottom piping (igual às timeline-content) */
        linear-gradient(180deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0) 6%,
            rgba(255,255,255,0) 94%,
            rgba(0,0,0,0.3) 100%),
        /* Accent tint wash */
        linear-gradient(135deg,
            color-mix(in srgb, var(--stg-card-accent) 14%, #14141a) 0%,
            color-mix(in srgb, var(--stg-card-accent)  6%, #0e0e12) 100%),
        #16161b !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 18px !important;
    /* Drop expensive backdrop-filter — the layered bg is enough */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    /* Flat, sem tilt 3D (fica consistente com os cartões do resto da app) */
    transform: translateZ(0) !important;
    will-change: auto !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 -1px 0 rgba(0,0,0,0.50) inset,
        0 14px 28px -14px rgba(0,0,0,0.55),
        0 6px 14px -6px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.02) !important;
}

/* Stripe lateral 3D — o traço visual que unifica a app */
.stg-v2 .stg-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--stg-card-accent) 120%, #fff 0%) 0%,
        var(--stg-card-accent) 50%,
        color-mix(in srgb, var(--stg-card-accent) 60%, #000 40%) 100%);
    box-shadow:
        1px 0 0 rgba(255,255,255,0.18) inset,
        -1px 0 6px rgba(0,0,0,0.5),
        2px 0 8px color-mix(in srgb, var(--stg-card-accent) 40%, transparent 60%);
    pointer-events: none;
    z-index: 2;
}

/* Sheen interior — troca o radial + mix-blend-mode: screen (caro) por
   um gradiente linear simples. Mantém profundidade a fracção do custo. */
.stg-v2 .stg-card::before {
    background: linear-gradient(160deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0) 45%,
        rgba(0,0,0,0.12) 100%) !important;
    mix-blend-mode: normal !important;
}

/* Linhas internas alinham-se com o stripe (mais respiração à esquerda) */
.stg-v2 .stg-card > .stg-row,
.stg-v2 .stg-card > .stg-action-row {
    padding-left: 1.4rem !important;
    position: relative;
    z-index: 1;
}
.stg-v2 .stg-card > .stg-row-expand {
    padding-left: calc(1.4rem + 36px + 0.75rem) !important;
}

/* Acento por separador — identidade visual distinta por tab, mantendo
   o mesmo design system */
.stg-panel[data-panel="general"]    .stg-card { --stg-card-accent: #e67e22; }
.stg-panel[data-panel="appearance"] .stg-card { --stg-card-accent: #9b59b6; }
.stg-panel[data-panel="widgets"]    .stg-card { --stg-card-accent: #3498db; }
.stg-panel[data-panel="account"]    .stg-card { --stg-card-accent: #f1c40f; }
/* Segunda card do painel Conta (secção Suporte) ganha outro tom */
.stg-panel[data-panel="account"] .stg-subheading + .stg-card {
    --stg-card-accent: #2ecc71;
}

/* =====================================================================
   8. MOBILE PERFORMANCE — Low-end device optimisations
   -------------------------------------------------------------------
   Viewports <= 768px (telemóveis típicos): desliga os efeitos mais
   caros para GPUs modestos:
     • animações infinitas de box-shadow (pulse, shimmer, float)
     • backdrop-filter / saturate
     • mix-blend-mode
     • filter: blur/saturate/grayscale/brightness
     • sombras com 5+ camadas → reduzidas a 2
     • transform: translateZ por filho (várias layers compositadas)
   Preserva a linguagem visual (stripe lateral, cor de acento, cantos
   arredondados, texto nítido). O ambiente desktop fica intocado.
   ===================================================================== */

@media (max-width: 768px) {
    /* ---- BELTS: animações infinitas desligadas ------------------ */
    .belt-progression-timeline .timeline-item.studying .timeline-dot,
    .belt-progression-timeline .timeline-item.studying .timeline-belt-chinese,
    .belt-progression-timeline .timeline-item.studying .timeline-status,
    .belt-progression-timeline .timeline-item.studying .timeline-arrow {
        animation: none !important;
    }
    /* Shimmer sweep repinta a cada frame — remover em mobile */
    .belt-progression-timeline .timeline-item.studying .timeline-content .timeline-info::after {
        display: none !important;
    }

    /* Dot: sombra simplificada (sem pulso) */
    .belt-progression-timeline .timeline-dot {
        box-shadow:
            0 0 0 2px rgba(0,0,0,0.35),
            0 0 8px var(--belt-color, rgba(255,255,255,0.25)) !important;
    }

    /* Status pill: sem backdrop-filter (muito caro) */
    .belt-progression-timeline .timeline-status {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Sheen overlay sem mix-blend-mode + opacidade reduzida */
    .belt-progression-timeline .timeline-content::after {
        mix-blend-mode: normal !important;
        opacity: 0.3 !important;
        background: linear-gradient(160deg,
            rgba(255,255,255,0.05) 0%,
            rgba(255,255,255,0) 45%,
            rgba(0,0,0,0.15) 100%) !important;
    }

    /* Filters caros em cartões bloqueados e watermark — eliminados */
    .belt-progression-timeline .timeline-item.locked .timeline-content {
        filter: none !important;
        opacity: 0.55 !important;
    }
    .belt-progression-timeline .timeline-item.locked .timeline-belt-chinese {
        filter: none !important;
    }
    .belt-progression-timeline .timeline-belt-watermark {
        /* O sub-pixel blur força um paint layer — fora */
        filter: none !important;
    }

    /* Elimina translateZ nos filhos — menos layers compositadas */
    .belt-progression-timeline .timeline-belt-chinese,
    .belt-progression-timeline .timeline-belt-pinyin,
    .belt-progression-timeline .timeline-belt-name,
    .belt-progression-timeline .timeline-status,
    .belt-progression-timeline .timeline-arrow {
        transform: none !important;
    }

    /* Sombras dos cartões: de 5 camadas para 2 (mantém profundidade) */
    .belt-progression-timeline .timeline-content {
        box-shadow:
            0 1px 0 rgba(255,255,255,0.08) inset,
            0 8px 18px -10px rgba(0,0,0,0.55) !important;
    }
    .belt-progression-timeline .timeline-item.studying .timeline-content {
        box-shadow:
            0 1px 0 rgba(255,255,255,0.12) inset,
            0 10px 22px -10px rgba(0,0,0,0.6),
            0 0 16px -6px color-mix(in srgb, var(--belt-color, #f1c40f) 50%, transparent 50%) !important;
    }
    .belt-progression-timeline .timeline-item.unlocked .timeline-content {
        box-shadow:
            0 1px 0 rgba(255,255,255,0.08) inset,
            0 8px 18px -10px rgba(0,0,0,0.5),
            0 0 12px -6px color-mix(in srgb, var(--belt-color, #2ecc71) 22%, transparent 78%) !important;
    }

    /* Press state mais leve (sem rotação) */
    .belt-progression-timeline .timeline-item.unlocked .timeline-content:active,
    .belt-progression-timeline .timeline-item.studying .timeline-content:active {
        transform: scale(0.985) !important;
    }

    /* Intro card (O Sistema de Graduações): sombras simplificadas */
    .belt-system-intro-expandable,
    .belt-system-intro-expandable[open] {
        box-shadow:
            0 1px 0 rgba(255,255,255,0.08) inset,
            0 6px 14px -8px rgba(0,0,0,0.5) !important;
    }

    /* ---- SETTINGS: desliga backdrop-filter + afina sombras ------ */
    .stg-tabs {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: linear-gradient(180deg,
            rgba(22,22,27,0.96) 0%,
            rgba(16,16,20,0.94) 100%) !important;
    }
    .stg-v2 .stg-card {
        box-shadow:
            0 1px 0 rgba(255,255,255,0.08) inset,
            0 6px 14px -8px rgba(0,0,0,0.5) !important;
    }
    /* Panel-in anim já é curta; desliga completamente em mobile para
       evitar frame drops ao trocar de separador */
    .stg-panel { animation: none !important; }
}

/* =====================================================================
   9. DASHBOARD STATS RADAR — Belt-ribbon card
   -------------------------------------------------------------------
   Cartão do radar de atributos (Força / Cardio / Estabilidade / Wing Chun)
   na vista do Guerreiro. Usa a mesma linguagem belt-ribbon (stripe lateral
   + fundo tintado) que o resto da app. O SVG é gerado por JS e contém
   anéis de grelha, polígono de dados, pontos coloridos por dimensão e
   etiquetas com nível.
   ===================================================================== */

.dash-stats-radar-card {
    --radar-accent: var(--cor-primaria, #e67e22);
    position: relative;
    background:
        /* Top + bottom piping */
        linear-gradient(180deg,
            rgba(255,255,255,0.12) 0%,
            rgba(255,255,255,0) 6%,
            rgba(255,255,255,0) 94%,
            rgba(0,0,0,0.3) 100%),
        /* Accent tint wash */
        linear-gradient(135deg,
            color-mix(in srgb, var(--radar-accent) 14%, #14141a) 0%,
            color-mix(in srgb, var(--radar-accent)  6%, #0e0e12) 100%),
        #16161b !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 18px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.10) inset,
        0 -1px 0 rgba(0,0,0,0.50) inset,
        0 14px 28px -14px rgba(0,0,0,0.55),
        0 6px 14px -6px rgba(0,0,0,0.45),
        0 0 0 1px rgba(255,255,255,0.02) !important;
    padding: 0 !important;
    overflow: hidden;
    margin-top: 1.5rem;
}

/* Stripe lateral 3D (cor de acento laranja por defeito) */
.dash-stats-radar-card::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    border-radius: 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--radar-accent) 120%, #fff 0%) 0%,
        var(--radar-accent) 50%,
        color-mix(in srgb, var(--radar-accent) 60%, #000 40%) 100%);
    box-shadow:
        1px 0 0 rgba(255,255,255,0.18) inset,
        -1px 0 6px rgba(0,0,0,0.5),
        2px 0 8px color-mix(in srgb, var(--radar-accent) 40%, transparent 60%);
    pointer-events: none;
    z-index: 2;
}

/* Sheen interior simplificado */
.dash-stats-radar-card::before {
    background: linear-gradient(160deg,
        rgba(255,255,255,0.05) 0%,
        rgba(255,255,255,0) 45%,
        rgba(0,0,0,0.12) 100%) !important;
    mix-blend-mode: normal !important;
}

/* Header com título */
.dash-stats-radar-header {
    position: relative;
    z-index: 1;
    padding: 0.9rem 1.15rem 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dash-stats-radar-title {
    font-family: var(--font-destaque, 'Teko', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--cor-texto-principal, #f0f0f0);
    text-shadow: 0 2px 4px rgba(0,0,0,0.55);
}

/* Corpo com o SVG */
.dash-stats-radar-body {
    position: relative;
    z-index: 1;
    padding: 0.5rem 0.75rem 0.9rem 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.dash-stats-radar-svg {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
}

/* Mobile: reduzir padding e tamanho do SVG */
@media (max-width: 768px) {
    .dash-stats-radar-card {
        margin-top: 1.2rem;
    }
    .dash-stats-radar-header {
        padding: 0.7rem 0.9rem 0.5rem 1.25rem;
    }
    .dash-stats-radar-title {
        font-size: 1rem;
    }
    .dash-stats-radar-body {
        padding: 0.4rem 0.6rem 0.7rem 1.25rem;
    }
    .dash-stats-radar-svg {
        max-width: 280px;
    }
}

/* =====================================================================
   10. WARRIOR DASHBOARD — Level badge (elegante)
   -------------------------------------------------------------------
   Badge de nível mais elegante no cartão do guerreiro.
   ===================================================================== */

.level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(230,126,34,0.9) 0%, rgba(243,156,18,0.85) 100%);
    color: #fff;
    font-family: var(--font-destaque, 'Teko', sans-serif);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.85rem;
    border-radius: 8px;
    box-shadow:
        0 2px 8px rgba(230,126,34,0.4),
        0 1px 0 rgba(255,255,255,0.15) inset;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* =====================================================================
   11. STATS MODAL — Modal de estatísticas detalhadas
   -------------------------------------------------------------------
   Modal que abre ao carregar no avatar, mostrando o radar e detalhes
   por dimensão (XP, progresso, decay).
   ===================================================================== */

.stats-modal {
    max-width: 420px;
    width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
}

.stats-modal-radar-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0 1rem;
}

.stats-modal-radar-wrap .dash-stats-radar-svg {
    max-width: 300px;
    height: auto;
}

.stats-modal-details {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-detail-row {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 0.75rem;
}

.stat-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.stat-detail-name {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cor-texto-principal, #f0f0f0);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-detail-value {
    font-family: var(--font-destaque, 'Teko', sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    flex-shrink: 0;
}

.stat-detail-progress {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.stat-detail-bar {
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
}

.stat-detail-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.stat-detail-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

.stat-decay {
    color: #e74c3c;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Mobile adjustments for stats modal */
@media (max-width: 768px) {
    .stats-modal {
        max-width: 95vw;
    }
    .stats-modal-radar-wrap .dash-stats-radar-svg {
        max-width: 260px;
    }
    .stat-detail-row {
        padding: 0.6rem;
    }
    .stat-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
    .stat-detail-name {
        white-space: normal;
        text-overflow: clip;
    }
}

/* =====================================================================
   12. HUB LEVEL COMPACT — Nível elegante com barra de progresso
   -------------------------------------------------------------------
   Componente compacto para o hub com badge e barra de progresso.
   ===================================================================== */

.hub-level-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hub-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(230,126,34,0.85) 0%, rgba(243,156,18,0.75) 100%);
    color: #fff;
    font-family: var(--font-destaque, 'Teko', sans-serif);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(230,126,34,0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    white-space: nowrap;
}

.hub-level-bar {
    width: 60px;
    height: 5px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.hub-level-fill {
    height: 100%;
    background: linear-gradient(90deg, #e67e22 0%, #f39c12 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.hub-level-xp {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* Mobile adjustments for hub level */
@media (max-width: 768px) {
    .hub-level-badge {
        font-size: 0.9rem;
        padding: 0.12rem 0.5rem;
        min-width: 2rem;
    }
    .hub-level-bar {
        width: 50px;
        height: 4px;
    }
}

/* =====================================================================
   13. DASHBOARD CIRCLE LABELS — Labels maiores para proficiência
   -------------------------------------------------------------------
   ===================================================================== */

.dash-circle-label--large {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* =====================================================================
   14. MUSIC CREDITS — Créditos das músicas nos settings
   -------------------------------------------------------------------
   ===================================================================== */

.stg-music-credits {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
}

.stg-music-credits-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stg-music-credits-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.stg-music-credit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem;
    background: rgba(255,255,255,0.02);
    border-radius: 4px;
    font-size: 0.8rem;
}

.stg-music-credit-title {
    color: rgba(255,255,255,0.85);
    font-weight: 500;
}

.stg-music-credit-artist {
    color: rgba(255,255,255,0.5);
    font-size: 0.75rem;
}

/* Mobile adjustments for music credits */
@media (max-width: 768px) {
    .stg-music-credits {
        padding: 0.6rem;
    }
    .stg-music-credit-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
}

/* Stats view removed in v3.1 (estatisticas section deprecated). */