/* SMXRPG auth pages - dark arcade theme, layered on top of Bootstrap 5 */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Audiowide&family=Russo+One&family=Teko:wght@400;500;600;700&family=Michroma&family=Chakra+Petch:wght@400;500;600;700&family=Exo+2:wght@400;500;600;700;800&family=Play:wght@400;700&family=Electrolize&family=Bebas+Neue&family=Anton&family=Oswald&family=Bungee&family=Bungee+Inline&family=Righteous&family=Fjalla+One&family=Archivo+Black&family=Passion+One&family=Alfa+Slab+One&family=Titan+One&family=Bangers&family=Fredoka&family=Baloo+2&family=Concert+One&family=Luckiest+Guy&family=Staatliches&family=Signika&family=Saira+Condensed&family=Squada+One&family=Kanit&family=Prompt&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed&family=Barlow+Semi+Condensed&family=Big+Shoulders+Display&family=Black+Ops+One&family=Changa&family=Chivo&family=Cabin+Condensed&family=Codystar&family=Days+One&family=Faster+One&family=Geo&family=Goldman&family=Iceland&family=Jura&family=Krona+One&family=Nova+Square&family=Quantico&family=Ruda&family=Sarpanch&family=Turret+Road&family=Wallpoet&family=Zen+Dots&family=Aldrich&family=Advent+Pro&family=Syncopate&family=Unica+One&family=VT323&family=Share+Tech+Mono&family=Space+Mono&family=JetBrains+Mono&family=IBM+Plex+Mono&family=Major+Mono+Display&family=Nova+Mono&family=Overpass+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Source+Code+Pro&family=Roboto+Mono&family=PT+Mono&family=Cutive+Mono&family=Anonymous+Pro&family=Inconsolata&family=Ubuntu+Mono&family=B612+Mono&family=Martian+Mono&family=Montserrat&family=Poppins&family=Raleway&family=Inter&family=Nunito&family=Work+Sans&family=Rubik&family=Karla&family=Manrope&family=DM+Sans&family=Sora&family=Space+Grotesk&family=Outfit&family=Lexend&family=Plus+Jakarta+Sans&family=Urbanist&family=Red+Hat+Display&family=Epilogue&family=Syne&family=Comfortaa&family=Quicksand&family=Josefin+Sans&family=Abril+Fatface&family=Bricolage+Grotesque&display=swap');

:root {
    --smx-bg: #0d0f14;
    --smx-panel: #161922;
    --smx-border: #262b38;
    --smx-text: #e6e8ee;
    --smx-muted: #8a90a2;
    --smx-accent: #2fe6d9;       /* cyan, arcade cabinet glow */
    --smx-accent-dim: #1fa89f;
    --smx-danger: #ff5c7a;
}

body {
    background-color: var(--smx-bg);
    color: var(--smx-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.smx-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.smx-card {
    width: 100%;
    max-width: 420px;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 10px;
    padding: 2.25rem 2rem;
    box-shadow: 0 0 0 1px rgba(47, 230, 217, 0.04), 0 20px 40px rgba(0, 0, 0, 0.35);
}

.smx-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
}

.smx-brand-mark {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--smx-accent);
    box-shadow: 0 0 10px 2px rgba(47, 230, 217, 0.6);
    flex-shrink: 0;
}

.smx-brand-text {
    font-family: 'Orbitron', "Segoe UI", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--smx-muted);
}

.smx-card h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: var(--smx-text);
}

.smx-subtitle {
    color: var(--smx-muted);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.smx-card .form-label {
    color: var(--smx-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.smx-card .form-control {
    background-color: #0d0f14;
    border: 1px solid var(--smx-border);
    color: var(--smx-text);
    padding: 0.65rem 0.8rem;
}

.smx-card .form-control:focus {
    background-color: #0d0f14;
    color: var(--smx-text);
    border-color: var(--smx-accent);
    box-shadow: 0 0 0 0.2rem rgba(47, 230, 217, 0.15);
}

.smx-card .form-control::placeholder {
    color: #4b5163;
}

.btn-smx {
    background-color: var(--smx-accent);
    border: 1px solid var(--smx-accent);
    color: #06110f;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.65rem 0.8rem;
    width: 100%;
}

.btn-smx:hover,
.btn-smx:focus {
    background-color: var(--smx-accent-dim);
    border-color: var(--smx-accent-dim);
    color: #06110f;
}

.smx-alert {
    background-color: rgba(255, 92, 122, 0.1);
    border: 1px solid rgba(255, 92, 122, 0.4);
    color: #ffb3c2;
    border-radius: 6px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

.smx-alert ul {
    margin: 0;
    padding-left: 1.1rem;
}

.smx-field-feedback {
    font-size: 0.8rem;
    margin-top: 0.35rem;
    min-height: 1.1rem;
}

.smx-feedback-ok {
    color: var(--smx-accent);
}

.smx-feedback-bad {
    color: var(--smx-danger);
}

.smx-checklist {
    list-style: none;
    padding-left: 0;
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
}

.smx-checklist li {
    color: var(--smx-muted);
    padding-left: 1.3rem;
    position: relative;
    margin-bottom: 0.3rem;
    transition: color 0.15s ease;
}

.smx-checklist li::before {
    content: "\2022";
    position: absolute;
    left: 0.25rem;
    color: var(--smx-muted);
}

.smx-checklist li.smx-rule-met {
    color: var(--smx-accent);
}

.smx-checklist li.smx-rule-met::before {
    content: "\2713";
    color: var(--smx-accent);
    left: 0;
}

.smx-checklist li.smx-rule-unmet::before {
    content: "\2022";
    color: var(--smx-muted);
}

/* Bootstrap validation state colors, adapted to the dark theme */
.smx-card .form-control.is-valid {
    border-color: var(--smx-accent);
    background-image: none;
}

.smx-card .form-control.is-invalid {
    border-color: var(--smx-danger);
    background-image: none;
}

.smx-footer-link {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--smx-muted);
}

.smx-footer-link a {
    color: var(--smx-accent);
    text-decoration: none;
    font-weight: 600;
}

.smx-footer-link a:hover {
    text-decoration: underline;
}

/* Dashboard-specific */

.smx-nav {
    background-color: var(--smx-panel);
    border-bottom: 1px solid var(--smx-border);
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.smx-nav .smx-brand {
    margin-bottom: 0;
}

.smx-user-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.smx-user-pill span {
    color: var(--smx-muted);
    font-size: 0.9rem;
}

.btn-smx-outline {
    background: transparent;
    border: 1px solid var(--smx-border);
    color: var(--smx-text);
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    border-radius: 6px;
    text-decoration: none;
}

.btn-smx-outline:hover {
    border-color: var(--smx-accent);
    color: var(--smx-accent);
}

.smx-dashboard-body {
    padding: 3rem 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

/* .smx-card's own base max-width (420px, see the class definition
   above) is meant for the narrow login/register forms it was
   originally built for - scoped override here so settings.php's wider
   sections (which reuse the same class for its background/border/
   padding styling) actually fill this page's own 900px container
   instead of being squeezed down to that unrelated narrower width. */
.smx-dashboard-body .smx-card {
    max-width: none;
}

.smx-dashboard-body-wide {
    padding: 3rem 1.5rem;
}

.smx-banner {
    background-color: rgba(255, 196, 0, 0.08);
    border: 1px solid rgba(255, 196, 0, 0.35);
    color: #ffe08a;
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.75rem;
    font-size: 0.92rem;
}

.smx-banner a {
    color: #ffe08a;
    font-weight: 700;
    text-decoration: underline;
}

.smx-mod-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.smx-mod-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.smx-mod-info {
    flex: 1;
    min-width: 200px;
}

.smx-mod-user {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.smx-mod-user-link {
    color: var(--smx-text);
    text-decoration: none;
}

.smx-mod-user-link:hover {
    color: var(--smx-accent);
    text-decoration: underline;
}

/* Quest tier badges */

.smx-tier-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    vertical-align: middle;
    margin-right: 0.5rem;
}

.smx-active-quest-badge {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--smx-accent);
}

.smx-tier-beginner { background-color: rgba(79, 208, 122, 0.15); color: #4fd07a; border: 1px solid rgba(79, 208, 122, 0.4); }
.smx-tier-easy     { background-color: rgba(47, 230, 217, 0.15); color: var(--smx-accent); border: 1px solid rgba(47, 230, 217, 0.4); }
.smx-tier-medium   { background-color: rgba(255, 176, 32, 0.15); color: #ffb020; border: 1px solid rgba(255, 176, 32, 0.4); }
.smx-tier-hard     { background-color: rgba(255, 138, 92, 0.15); color: #ff8a5c; border: 1px solid rgba(255, 138, 92, 0.4); }
.smx-tier-expert   { background-color: rgba(255, 92, 122, 0.15); color: var(--smx-danger); border: 1px solid rgba(255, 92, 122, 0.4); }

.smx-mode-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 0.5rem;
    background-color: var(--smx-bg);
    color: var(--smx-muted);
    border: 1px solid var(--smx-border);
}

.smx-intro-chain-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 0.5rem;
    background-color: rgba(255, 176, 32, 0.15);
    color: #ffb020;
    border: 1px solid rgba(255, 176, 32, 0.4);
}

.smx-objective-toggle {
    background: none;
    border: none;
    color: var(--smx-text);
    font-size: 0.85rem;
    padding: 0.3rem 0;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    max-width: 100%;
}

.smx-objective-toggle:hover {
    color: var(--smx-accent);
}

.smx-objective-toggle-arrow {
    flex-shrink: 0;
    font-size: 0.7rem;
}

/* Hierarchy viewer */

.smx-hierarchy-tree,
.smx-hierarchy-children {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.smx-hierarchy-children {
    padding-left: 1.6rem;
    border-left: 1px solid var(--smx-border);
    margin-left: 0.55rem;
}

.smx-hierarchy-node {
    margin: 0.35rem 0;
}

.smx-hierarchy-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
}

.smx-hierarchy-toggle {
    background: none;
    border: none;
    color: var(--smx-muted);
    cursor: pointer;
    font-size: 0.75rem;
    width: 16px;
    flex-shrink: 0;
}

.smx-hierarchy-toggle:hover {
    color: var(--smx-accent);
}

.smx-hierarchy-toggle-spacer {
    width: 16px;
    flex-shrink: 0;
}

.smx-quest-tree {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-x: auto;
}

.smx-quest-tree-node {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
}

.smx-quest-tree-node .smx-quest-row {
    align-items: flex-start;
    flex-wrap: wrap;
}

.smx-quest-tree-node .smx-quest-info {
    min-width: 240px;
    flex: 1 1 240px;
    overflow-wrap: break-word;
}

.smx-quest-tree-node .smx-mod-actions {
    flex-shrink: 0;
    flex-wrap: wrap;
}

.smx-quest-tree-toggle {
    margin-top: 0.2rem;
}

.smx-quest-tree-children {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-left: 10px;
    padding-left: 16px;
    border-left: 2px solid var(--smx-border);
}

/* Horizontal elbow stub connecting the vertical line to each child's card */
.smx-quest-tree-children > .smx-quest-tree-node::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 22px;
    width: 16px;
    height: 2px;
    background-color: var(--smx-border);
}

.smx-quest-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.smx-quest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
}

.smx-quest-info {
    flex: 1;
    min-width: 240px;
}

.smx-quest-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.25rem;
}

.smx-quest-title {
    font-weight: 700;
    color: var(--smx-text);
}

.smx-objective-list {
    list-style: none;
    padding-left: 0;
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    border-top: 1px solid var(--smx-border);
    padding-top: 0.6rem;
}

.smx-objective-list li {
    margin-bottom: 0.4rem;
    color: var(--smx-text);
}

.smx-objective-label {
    font-weight: 600;
}

.smx-quest-card {
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-top: 3px solid var(--smx-border);
    border-radius: 10px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 0.9rem;
}

.smx-quest-filter-bar {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
}

.smx-quest-filter-bar > div {
    min-width: 160px;
}

.smx-quest-filter-bar .form-label {
    font-size: 0.75rem;
    color: var(--smx-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.smx-quest-card-beginner { border-top-color: #4fd07a; }
.smx-quest-card-easy     { border-top-color: var(--smx-accent); }
.smx-quest-card-medium   { border-top-color: #ffb020; }
.smx-quest-card-hard     { border-top-color: #ff8a5c; }
.smx-quest-card-expert   { border-top-color: var(--smx-danger); }

.smx-quest-desc {
    color: var(--smx-muted);
    font-size: 0.88rem;
    margin: 0.4rem 0 0.6rem;
}

.smx-objective-checklist {
    list-style: none;
    padding-left: 0;
    margin: 0.7rem 0 0;
    border-top: 1px solid var(--smx-border);
    padding-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.smx-objective-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
}

.smx-objective-checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid var(--smx-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    margin-top: 0.15rem;
}

.smx-objective-body {
    flex: 1;
    min-width: 0;
}

.smx-objective-goal {
    font-size: 0.85rem;
    color: var(--smx-muted);
    margin-bottom: 0.3rem;
}

.smx-objective-song-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.smx-objective-song-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--smx-text);
}

.smx-chart-pill {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--smx-accent);
    background-color: rgba(47, 230, 217, 0.1);
    border: 1px solid rgba(47, 230, 217, 0.35);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

.smx-objective-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.smx-req-chip {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--smx-text);
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
}

.smx-objective-row-done {
    border-color: rgba(47, 230, 217, 0.3);
}

.smx-objective-row-done .smx-objective-checkbox {
    background-color: var(--smx-accent);
    border-color: var(--smx-accent);
    color: #06110f;
}

.smx-objective-row-done .smx-objective-song-name,
.smx-objective-row-done .smx-objective-goal {
    color: var(--smx-muted);
    text-decoration: line-through;
}

.smx-objective-row-done .smx-req-chip {
    opacity: 0.6;
}

.smx-mystery-objectives,
.smx-objective-mystery-text {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--smx-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.smx-mystery-objectives {
    margin-top: 0.7rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--smx-border);
}

.smx-mystery-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.smx-chain-progress {
    font-size: 0.8rem;
    color: #4fd07a;
    margin-bottom: 0.5rem;
}

.smx-stat-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}

.smx-stat-tile {
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.smx-stat-tile:hover {
    transform: translateY(-2px);
    border-color: var(--smx-accent);
}

.smx-stat-tile-highlight {
    background: linear-gradient(160deg, rgba(47, 230, 217, 0.12), var(--smx-panel));
    border-color: rgba(47, 230, 217, 0.35);
}

.smx-stat-tile-icon {
    font-size: 1.3rem;
    margin-bottom: 0.3rem;
    opacity: 0.9;
}

.smx-stat-tile-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--smx-accent);
    line-height: 1.2;
}

.smx-stat-tile-label {
    font-size: 0.75rem;
    color: var(--smx-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 0.2rem;
}

.smx-difficulty-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
}

.smx-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--smx-muted);
}

.smx-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.smx-chart-canvas-wrap {
    position: relative;
    height: 280px;
}

.smx-chart-canvas-wrap-short {
    height: 130px;
}

.smx-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 130px;
    color: var(--smx-muted);
    font-size: 0.9rem;
    font-style: italic;
    margin: 0;
}

.smx-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.smx-chart-card {
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 10px;
    padding: 1.25rem;
}

.smx-quest-locked {
    opacity: 0.65;
}

.smx-lock-icon {
    font-size: 0.85rem;
    margin-left: auto;
}

.smx-quest-completed {
    border-color: rgba(47, 230, 217, 0.35);
}

.smx-complete-check {
    color: var(--smx-accent);
    font-weight: 900;
    margin-left: auto;
}

.smx-cache-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 8px;
    padding: 0.75rem 1.1rem;
    font-size: 0.85rem;
    color: var(--smx-muted);
    max-width: 640px;
}

/* Song/chart search dropdown for objective authoring */

.smx-search-results {
    position: relative;
    margin-top: 0.25rem;
}

.smx-search-result-item {
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    border-top: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.smx-search-result-item:hover {
    background-color: var(--smx-panel);
    color: var(--smx-accent);
}

.smx-search-result-item:first-child {
    border-top: 1px solid var(--smx-border);
    border-radius: 6px 6px 0 0;
}

.smx-search-result-item:last-child {
    border-radius: 0 0 6px 6px;
}

.smx-search-result-empty {
    color: var(--smx-muted);
    font-size: 0.85rem;
    padding: 0.4rem 0.1rem;
}

.smx-mod-detail {
    font-size: 0.85rem;
    color: var(--smx-text);
    margin-bottom: 0.15rem;
}

.smx-muted-inline {
    color: var(--smx-muted);
    font-weight: 400;
}

.smx-mod-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.smx-mod-deny-btn {
    border-color: rgba(255, 92, 122, 0.4);
    color: var(--smx-danger);
}

.smx-mod-deny-btn:hover {
    border-color: var(--smx-danger);
    background-color: rgba(255, 92, 122, 0.08);
    color: var(--smx-danger);
}

.smx-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.smx-modal {
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 10px;
    padding: 1.75rem;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.smx-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.smx-mod-log {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.smx-mod-log-row {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
}

.smx-mod-log-time {
    color: var(--smx-muted);
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.78rem;
}

.smx-mod-log-text {
    color: var(--smx-text);
}

/* Avatars */

.smx-avatar {
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.smx-avatar-letter {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #06110f;
    font-weight: 700;
    line-height: 1;
}

.smx-profile-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.smx-profile-name {
    font-family: 'Orbitron', "Segoe UI", system-ui, sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--smx-text);
}

.smx-profile-subtext {
    font-size: 0.85rem;
    color: var(--smx-accent);
    margin-top: 0.2rem;
}

.smx-role-flair {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    margin-top: 0.25rem;
    margin-right: 0.35rem;
}

.smx-role-admin {
    background-color: rgba(255, 176, 32, 0.15);
    color: #ffb020;
    border: 1px solid rgba(255, 176, 32, 0.45);
}

.smx-role-moderator {
    background-color: rgba(124, 107, 255, 0.15);
    color: #7c6bff;
    border: 1px solid rgba(124, 107, 255, 0.4);
}

.smx-role-quest-creator {
    background-color: rgba(79, 208, 122, 0.15);
    color: #4fd07a;
    border: 1px solid rgba(79, 208, 122, 0.4);
}

.smx-earned-title {
    font-size: 0.82rem;
    font-weight: 700;
    font-style: italic;
    color: var(--smx-accent);
    letter-spacing: 0.01em;
    margin-bottom: 0.3rem;
}

.smx-profile-quick-stats {
    display: flex;
    gap: 1.1rem;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--smx-muted);
}

.smx-profile-quick-stats strong {
    color: var(--smx-accent);
    font-weight: 800;
}

.smx-activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.smx-activity-row {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-left: 4px solid var(--smx-accent);
    border-radius: 8px;
    padding: 0.95rem 1.15rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-left-color 0.15s ease;
}

.smx-activity-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

.smx-activity-row-beginner { border-left-color: #4fd07a; }
.smx-activity-row-easy     { border-left-color: #2fe6d9; }
.smx-activity-row-medium   { border-left-color: #ffb020; }
.smx-activity-row-hard     { border-left-color: #ff8a5c; }
.smx-activity-row-expert   { border-left-color: #ff5c7a; }

.smx-activity-body {
    flex: 1;
    min-width: 0;
}

.smx-activity-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.92rem;
}

.smx-activity-username {
    color: var(--smx-accent);
    font-weight: 700;
    text-decoration: none;
}

.smx-activity-username:hover {
    text-decoration: underline;
}

.smx-activity-meta {
    font-size: 0.78rem;
    color: var(--smx-muted);
    margin-top: 0.2rem;
}

.smx-nav-link-active {
    border-color: var(--smx-accent);
    color: var(--smx-accent);
}

.smx-nav-logout {
    margin-left: 0.25rem;
}

.smx-nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

.smx-nav-dropdown {
    position: relative;
}

.smx-nav-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.smx-nav-dropdown-arrow {
    font-size: 0.65rem;
}

.smx-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 200px;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 8px;
    padding: 0.5rem;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    z-index: 50;
}

.smx-nav-dropdown-menu.smx-nav-dropdown-open {
    display: block;
}

.smx-nav-dropdown-heading {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--smx-muted);
    padding: 0.3rem 0.6rem 0.2rem;
}

.smx-nav-dropdown-item {
    display: block;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--smx-text);
    text-decoration: none;
}

.smx-nav-dropdown-item:hover {
    background-color: var(--smx-bg);
    color: var(--smx-accent);
}

.smx-nav-dropdown-item-active {
    color: var(--smx-accent);
    font-weight: 700;
}

.smx-nav-dropdown-divider {
    height: 1px;
    background-color: var(--smx-border);
    margin: 0.4rem 0.2rem;
}

.smx-pending-avatar-note {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background-color: rgba(255, 196, 0, 0.08);
    border: 1px solid rgba(255, 196, 0, 0.35);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: #ffe08a;
}

.smx-xp-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.smx-xp-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--smx-text);
}

.smx-xp-bar {
    width: 100%;
    height: 10px;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    border-radius: 999px;
    overflow: hidden;
}

.smx-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--smx-accent-dim), var(--smx-accent));
    border-radius: 999px;
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.smx-xp-bar-shine {
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    animation: smx-xp-shine 2.6s ease-in-out infinite;
}

@keyframes smx-xp-shine {
    0%   { left: -60%; }
    100% { left: 130%; }
}

/* Profile card */

.smx-profile-card {
    position: relative;
    background-color: var(--smx-panel);
    background-image:
        linear-gradient(rgba(6, 8, 11, 0.78), rgba(6, 8, 11, 0.78)),
        url('backgrounds/smx-cabinet.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 1px solid var(--smx-border);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
    margin-bottom: 15px;
}

/* One unified grid: row 1 is the gradient "banner" strip (painted via a
   precisely-sized background on the grid itself, so it only covers row
   1's height - items placed there sit naturally on top since CSS
   backgrounds paint behind content), rows 2-4 are the main content area.
   An item can span rows 1-2 to straddle the seam between them. */
.smx-header-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    grid-template-rows: 76px repeat(12, minmax(0, auto));
    grid-auto-flow: dense;
    column-gap: 1.5rem;
    row-gap: 0.6rem;
    padding: 0.6rem 1.75rem 1.5rem;
    min-height: 320px;
    border-radius: 12px 12px 0 0;
    background:
        linear-gradient(120deg, rgba(47, 230, 217, 0.25), rgba(124, 107, 255, 0.2) 55%, rgba(255, 92, 122, 0.15))
            top / 100% 76px no-repeat;
}

.smx-header-grid::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 76px;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
                       linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

body.smx-profile-edit-mode .smx-header-grid {
    outline: 1px dashed rgba(255, 255, 255, 0.15);
    outline-offset: -4px;
}

/* A faint dashed line marking where the banner ends and content begins,
   visible only in edit mode, so it's clear where the "seam" actually is
   when deciding whether to straddle it. */
body.smx-profile-edit-mode .smx-header-grid::after {
    content: "";
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    border-top: 1px dashed rgba(47, 230, 217, 0.4);
    pointer-events: none;
}

.smx-profile-header {
    display: flex;
    align-items: flex-end;
    gap: 1.25rem;
    padding: 0 1.75rem;
    margin-top: -44px;
    margin-bottom: 1.25rem;
}

.smx-profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-block;
    width: max-content;
}

.smx-profile-avatar-wrap .smx-avatar {
    box-shadow: 0 0 0 4px var(--smx-panel), 0 0 0 6px var(--smx-accent), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* A shop-equipped avatar frame supplies its own colored ring - drop the
   default static teal one here, or it visually fights the frame's
   actual color and just looks like the frame "isn't working". */
.smx-profile-avatar-wrap[class*="smx-avatar-frame-"] .smx-avatar {
    box-shadow: 0 0 0 4px var(--smx-panel), 0 8px 24px rgba(0, 0, 0, 0.4);
}

.smx-verified-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--smx-accent);
    color: #06110f;
    font-size: 0.85rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--smx-panel);
}

.smx-level-badge {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-accent);
    color: var(--smx-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}

.smx-profile-card .smx-profile-name {
    margin-top: 0.6rem;
}

.smx-profile-card .smx-xp-block {
    padding: 1.5rem 1.75rem 1.75rem;
}

.smx-avatar-edit-link {
    display: block;
    border-radius: 50%;
    transition: filter 0.15s ease;
}

.smx-avatar-edit-link:hover {
    filter: brightness(0.75);
}

.smx-avatar-edit-badge {
    position: absolute;
    bottom: -4px;
    left: -4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--smx-bg);
    border: 2px solid var(--smx-accent);
    color: var(--smx-accent);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.smx-avatar-edit-badge:hover {
    background-color: var(--smx-accent);
    color: #06110f;
}

.smx-profile-footer {
    padding: 0 1.75rem 1.5rem;
}

.smx-user-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.smx-user-list-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    color: inherit;
    transition: border-color 0.15s ease;
}
.smx-user-list-item:hover {
    border-color: var(--smx-accent, #2fe6d9);
}
.smx-user-list-info {
    flex: 1;
    min-width: 0;
}
.smx-user-list-name {
    font-weight: 700;
}
.smx-user-list-stats {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

/* Deliberately NOT reusing .smx-level-badge here - that class is
   absolutely positioned (meant to sit on a profile avatar's edge,
   relative to that specific circular container). Without that same
   parent context, an absolutely-positioned badge escapes its row
   entirely and positions relative to the whole page instead - exactly
   the bug this replaces. This one stays in normal document flow. */
.smx-user-list-level-badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-accent);
    color: var(--smx-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.smx-profile-name-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.smx-profile-like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid var(--smx-border);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.85rem;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.smx-profile-like-btn:hover {
    border-color: #ff5c7a;
}
.smx-profile-like-btn:disabled {
    opacity: 0.6;
    cursor: default;
}
.smx-profile-like-count-only {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
}
.smx-like-heart {
    font-size: 1rem;
    line-height: 1;
}
.smx-profile-like-btn.smx-liked {
    color: #ff5c7a;
    border-color: rgba(255, 92, 122, 0.55);
}
.smx-profile-like-btn.smx-liked .smx-like-heart {
    color: #ff5c7a;
}

/* ==========================================================================
   Title rarity system - 32 styles across 6 tiers. Built from a handful of
   shared @keyframes reused across many classes, so each rarity class only
   needs to set its own colors and pick which pattern(s) it uses.
   ========================================================================== */

@keyframes smx-title-gradient-sweep {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes smx-title-hue-cycle {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes smx-title-flicker {
    0%, 100% { opacity: 1; }
    45%      { opacity: 1; }
    47%      { opacity: 0.55; }
    49%      { opacity: 1; }
    72%      { opacity: 1; }
    74%      { opacity: 0.65; }
    76%      { opacity: 1; }
}

@keyframes smx-title-fade-pulse {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

@keyframes smx-title-jitter {
    0%, 100% { transform: translate(0, 0); }
    20%      { transform: translate(-1px, 0.5px); }
    40%      { transform: translate(1px, -0.5px); }
    60%      { transform: translate(-0.5px, -0.5px); }
    80%      { transform: translate(0.5px, 0.5px); }
}

.smx-title-effect {
    font-weight: 800;
    display: inline-block;
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
}

/* ---- Common: subtle, mostly static ---- */
.smx-title-rarity-common_plain { color: inherit; background: none; -webkit-text-fill-color: currentColor; }
.smx-title-rarity-common_glow {
    color: var(--title-c1, #e8ecf2); background: none; -webkit-text-fill-color: var(--title-c1, #e8ecf2);
    text-shadow: 0 0 6px rgba(255,255,255,0.35);
    animation: smx-title-fade-pulse 3.5s ease-in-out infinite;
}
.smx-title-rarity-common_silver {
    background-image: linear-gradient(90deg, var(--title-c1, #b8bec9), var(--title-c2, #eef1f4), var(--title-c1, #b8bec9));
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 4s ease-in-out infinite;
}
.smx-title-rarity-common_bronze {
    background-image: linear-gradient(90deg, var(--title-c1, #9c6b3e), var(--title-c2, #d2a679), var(--title-c1, #9c6b3e));
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 4.5s ease-in-out infinite;
}
.smx-title-rarity-common_fade {
    color: var(--title-c1, #c7ccd4); background: none; -webkit-text-fill-color: var(--title-c1, #c7ccd4);
    animation: smx-title-fade-pulse 2.6s ease-in-out infinite;
}

/* ---- Uncommon: light color, gentle motion ---- */
.smx-title-rarity-uncommon_forest {
    background-image: linear-gradient(90deg, var(--title-c1, #3fae5f), var(--title-c2, #8be6a0), var(--title-c1, #3fae5f));
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 3.6s ease-in-out infinite;
}
.smx-title-rarity-uncommon_ocean {
    background-image: linear-gradient(90deg, var(--title-c1, #2f7fc2), var(--title-c2, #8fd0f0), var(--title-c1, #2f7fc2));
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 3.6s ease-in-out infinite;
}
.smx-title-rarity-uncommon_sunset {
    background-image: linear-gradient(90deg, var(--title-c1, #e2762f), var(--title-c2, #ffcf7a), var(--title-c1, #e2762f));
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 3.8s ease-in-out infinite;
}
.smx-title-rarity-uncommon_lavender {
    color: var(--title-c1, #c9aef0); background: none; -webkit-text-fill-color: var(--title-c1, #c9aef0);
    text-shadow: 0 0 8px rgba(180,140,230,0.5);
    animation: smx-title-fade-pulse 3s ease-in-out infinite;
}
.smx-title-rarity-uncommon_sandstone {
    background-image: linear-gradient(90deg, var(--title-c1, #c2a06b), var(--title-c2, #ecd9b6), var(--title-c1, #c2a06b));
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 4.2s ease-in-out infinite;
}

/* ---- Rare: vivid color + glow ---- */
.smx-title-rarity-rare_sapphire {
    background-image: linear-gradient(90deg, var(--title-c1, #1e5fb8), var(--title-c2, #6fb4ff), var(--title-c1, #1e5fb8));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px rgba(50,120,220,0.55);
    animation: smx-title-gradient-sweep 3s ease-in-out infinite;
}
.smx-title-rarity-rare_emerald {
    background-image: linear-gradient(90deg, var(--title-c1, #1f9b53), var(--title-c2, #7ef0a8), var(--title-c1, #1f9b53));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px rgba(40,180,110,0.55);
    animation: smx-title-gradient-sweep 3s ease-in-out infinite;
}
.smx-title-rarity-rare_ruby {
    background-image: linear-gradient(90deg, var(--title-c1, #c22040), var(--title-c2, #ff7a92), var(--title-c1, #c22040));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px rgba(220,40,70,0.55);
    animation: smx-title-gradient-sweep 3s ease-in-out infinite;
}
.smx-title-rarity-rare_amethyst {
    background-image: linear-gradient(90deg, var(--title-c1, #7a35c2), var(--title-c2, #c895ff), var(--title-c1, #7a35c2));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px rgba(140,60,220,0.55);
    animation: smx-title-gradient-sweep 3s ease-in-out infinite;
}
.smx-title-rarity-rare_gold {
    background-image: linear-gradient(90deg, var(--title-c1, #c9941f), var(--title-c2, #ffe08a), var(--title-c1, #c9941f));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px rgba(230,180,40,0.55);
    animation: smx-title-gradient-sweep 2.8s ease-in-out infinite;
}
.smx-title-rarity-rare_cyan {
    color: var(--title-c1, #4ff2ea); background: none; -webkit-text-fill-color: var(--title-c1, #4ff2ea);
    text-shadow: 0 0 10px rgba(47,230,217,0.7);
    animation: smx-title-flicker 2.4s ease-in-out infinite;
}

/* ---- Epic: dynamic multi-color ---- */
.smx-title-rarity-epic_rainbow {
    background-image: linear-gradient(90deg, #ff5c7a, #ffb020, #4fd07a, #2fe6d9, #7c6bff, #ff5c7a);
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 3s linear infinite, smx-title-hue-cycle 4s linear infinite;
}
.smx-title-rarity-epic_fire {
    background-image: linear-gradient(90deg, var(--title-c1, #a3220f), var(--title-c2, #ff8a2b), var(--title-c3, #ffe27a), var(--title-c2, #ff8a2b), var(--title-c1, #a3220f));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 12px rgba(255,120,30,0.5);
    animation: smx-title-gradient-sweep 2.2s ease-in-out infinite, smx-title-flicker 1.8s ease-in-out infinite;
}
.smx-title-rarity-epic_ice {
    background-image: linear-gradient(90deg, var(--title-c1, #1c6fa8), var(--title-c2, #b8ecff), var(--title-c3, #ffffff), var(--title-c2, #b8ecff), var(--title-c1, #1c6fa8));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 12px rgba(140,220,255,0.6);
    animation: smx-title-gradient-sweep 3.2s ease-in-out infinite;
}
.smx-title-rarity-epic_toxic {
    color: var(--title-c1, #9cff4a); background: none; -webkit-text-fill-color: var(--title-c1, #9cff4a);
    text-shadow: 0 0 8px var(--title-c2, #6fd42a), 0 0 18px var(--title-c3, #4fae1a);
    animation: smx-title-flicker 2s ease-in-out infinite;
}
.smx-title-rarity-epic_void {
    color: var(--title-c1, #c39bff); background: none; -webkit-text-fill-color: var(--title-c1, #c39bff);
    text-shadow: 0 0 10px var(--title-c2, #5a2ba8), 0 0 22px var(--title-c3, #2a1150);
    animation: smx-title-fade-pulse 2.4s ease-in-out infinite;
}
.smx-title-rarity-epic_holo {
    background-image: linear-gradient(90deg, var(--title-c1, #ff9ad5), var(--title-c2, #9ad5ff), var(--title-c3, #d5ff9a), var(--title-c1, #ff9ad5));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px rgba(255,255,255,0.4);
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

/* ---- Legendary: elaborate combined effects ---- */
.smx-title-rarity-legendary_cosmic {
    background-image: linear-gradient(90deg, #3a1b7a, #7c3fd6, #ff7ad1, #3fb8ff, #3a1b7a);
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 14px rgba(140,80,255,0.6);
    animation: smx-title-gradient-sweep 3.4s ease-in-out infinite, smx-title-fade-pulse 3s ease-in-out infinite;
}
.smx-title-rarity-legendary_molten {
    background-image: linear-gradient(90deg, var(--title-c1, #6b0f0f), var(--title-c2, #ff3d00), var(--title-c3, #ffb000), var(--title-c2, #ff3d00), var(--title-c1, #6b0f0f));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 16px rgba(255,80,0,0.65);
    animation: smx-title-gradient-sweep 2s ease-in-out infinite, smx-title-flicker 1.5s ease-in-out infinite;
}
.smx-title-rarity-legendary_aurora {
    background-image: linear-gradient(90deg, var(--title-c1, #1fae7a), var(--title-c2, #3fd6c9), var(--title-c3, #7a5fff), var(--title-c2, #3fd6c9), var(--title-c1, #1fae7a));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 14px rgba(60,210,180,0.55);
    animation: smx-title-gradient-sweep 4.5s ease-in-out infinite;
}
.smx-title-rarity-legendary_divine {
    background-image: linear-gradient(90deg, var(--title-c1, #c9941f), var(--title-c2, #fff6d9), var(--title-c3, #ffe08a), var(--title-c2, #fff6d9), var(--title-c1, #c9941f));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 16px rgba(255,220,140,0.7);
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite, smx-title-fade-pulse 2.6s ease-in-out infinite;
}
.smx-title-rarity-legendary_shadowflame {
    color: #d89aff; background: none; -webkit-text-fill-color: #d89aff;
    text-shadow: 0 0 10px #6a1fae, 0 0 20px #1a0530, 0 0 30px #000;
    animation: smx-title-flicker 1.6s ease-in-out infinite;
}
.smx-title-rarity-legendary_diamond {
    background-image: linear-gradient(90deg, #ffffff, #cdefff, #ffe9ff, #d9ffe9, #ffffff);
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 14px rgba(255,255,255,0.75);
    animation: smx-title-gradient-sweep 2.2s ease-in-out infinite;
}

/* ---- Mythic: the most elaborate, top-tier effects ---- */
.smx-title-rarity-mythic_glitch {
    color: var(--title-c1, #ffffff); background: none; -webkit-text-fill-color: var(--title-c1, #ffffff);
    text-shadow: -2px 0 var(--title-c2, #ff2f6e), 2px 0 var(--title-c3, #2fe6ff), 0 0 8px rgba(255,255,255,0.5);
    animation: smx-title-jitter 0.35s steps(2, end) infinite, smx-title-flicker 2.5s ease-in-out infinite;
}
.smx-title-rarity-mythic_starlight {
    color: #fdfdff; background: none; -webkit-text-fill-color: #fdfdff;
    text-shadow: 0 0 6px #fff, 0 0 14px #bcd4ff, 0 0 24px #6f9fff;
    animation: smx-title-flicker 1.2s ease-in-out infinite;
}
.smx-title-rarity-mythic_phoenix {
    background-image: linear-gradient(90deg, var(--title-c1, #6b0f0f), var(--title-c2, #ff5b00), var(--title-c3, #ffd23f), var(--title-c2, #ff5b00), var(--title-c1, #6b0f0f));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 18px rgba(255,120,20,0.75);
    animation: smx-title-gradient-sweep 1.8s ease-in-out infinite, smx-title-jitter 0.6s ease-in-out infinite;
}
.smx-title-rarity-mythic_eclipse {
    color: var(--title-c1, #ffd76a); background: none; -webkit-text-fill-color: var(--title-c1, #ffd76a);
    text-shadow: 0 0 8px var(--title-c2, #000), 0 0 18px var(--title-c2, #000), 0 0 26px rgba(255,215,100,0.6);
    animation: smx-title-fade-pulse 2s ease-in-out infinite;
}

/* ---- Additional shared keyframes for the new dramatic + per-letter effects ---- */

@keyframes smx-title-shake {
    0%, 100% { transform: translate(0, 0); }
    10%      { transform: translate(-1.5px, 1px); }
    30%      { transform: translate(1.5px, -1px); }
    50%      { transform: translate(-1px, -1.5px); }
    70%      { transform: translate(1px, 1.5px); }
    90%      { transform: translate(-0.5px, 0.5px); }
}

@keyframes smx-title-strobe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

@keyframes smx-letter-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

@keyframes smx-letter-color-cycle {
    0%   { color: #ff5c7a; }
    16%  { color: #ffb020; }
    33%  { color: #4fd07a; }
    50%  { color: #2fe6d9; }
    66%  { color: #7c6bff; }
    83%  { color: #ff5c7a; }
    100% { color: #ff5c7a; }
}

@keyframes smx-letter-flicker-solo {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

@keyframes smx-letter-scale-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.3); }
}

@keyframes smx-letter-rise-fall {
    0%, 100% { transform: translateY(0); opacity: 0.75; }
    50%      { transform: translateY(-5px); opacity: 1; }
}

@keyframes smx-letter-chase {
    0%, 100% { opacity: 0.3; text-shadow: none; }
    50%      { opacity: 1; text-shadow: 0 0 8px currentColor; }
}

@keyframes smx-letter-rainbow-hue {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes smx-letter-jitter-solo {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-1px, 1px); }
    50%      { transform: translate(1px, -1px); }
    75%      { transform: translate(-1px, -1px); }
}

/* ---- Elemental ---- */
.smx-title-rarity-elemental_inferno {
    background-image: linear-gradient(90deg, var(--title-c1, #4a0000), var(--title-c2, #ff2d00), var(--title-c3, #ffcc00), var(--title-c2, #ff2d00), var(--title-c1, #4a0000));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 20px rgba(255,60,0,0.8);
    animation: smx-title-gradient-sweep 1.6s ease-in-out infinite, smx-title-strobe 2.4s ease-in-out infinite;
}
.smx-title-rarity-elemental_tsunami {
    background-image: linear-gradient(90deg, var(--title-c1, #003a5c), var(--title-c2, #1a8fd1), var(--title-c3, #bdeeff), var(--title-c2, #1a8fd1), var(--title-c1, #003a5c));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 16px rgba(30,150,220,0.7);
    animation: smx-title-gradient-sweep 2.4s ease-in-out infinite;
}
.smx-title-rarity-elemental_earthquake {
    color: var(--title-c1, #c9a35a); background: none; -webkit-text-fill-color: var(--title-c1, #c9a35a);
    text-shadow: 0 0 6px var(--title-c2, #7a5a20);
    animation: smx-title-shake 0.5s ease-in-out infinite;
}
.smx-title-rarity-elemental_tempest {
    background-image: linear-gradient(90deg, var(--title-c1, #2b2f45), var(--title-c2, #6f7bb5), var(--title-c3, #d6dbf5), var(--title-c2, #6f7bb5), var(--title-c1, #2b2f45));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 14px rgba(140,150,220,0.6);
    animation: smx-title-gradient-sweep 1.4s ease-in-out infinite, smx-title-shake 0.9s ease-in-out infinite;
}
.smx-title-rarity-elemental_frostbite {
    color: var(--title-c1, #cdf3ff); background: none; -webkit-text-fill-color: var(--title-c1, #cdf3ff);
    text-shadow: 0 0 10px var(--title-c2, #4fc3ff), 0 0 20px var(--title-c3, #1a6f9c);
    animation: smx-title-fade-pulse 2.8s ease-in-out infinite;
}
.smx-title-rarity-elemental_thunderstorm {
    color: var(--title-c1, #f5f0ff); background: none; -webkit-text-fill-color: var(--title-c1, #f5f0ff);
    text-shadow: 0 0 10px var(--title-c2, #b89aff), 0 0 24px var(--title-c3, #6a3fd6);
    animation: smx-title-strobe 1.1s steps(1, end) infinite;
}
.smx-title-rarity-elemental_volcanic {
    background-image: linear-gradient(90deg, var(--title-c1, #3a1400), var(--title-c2, #8a2b0a), var(--title-c3, #ff5c1a), var(--title-c2, #8a2b0a), var(--title-c1, #3a1400));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 14px rgba(255,90,20,0.6);
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}
.smx-title-rarity-elemental_blizzard {
    background-image: linear-gradient(90deg, var(--title-c1, #ffffff), var(--title-c2, #dff3ff), var(--title-c3, #a9d8ff), var(--title-c2, #dff3ff), var(--title-c1, #ffffff));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 14px rgba(200,235,255,0.8);
    animation: smx-title-gradient-sweep 2s ease-in-out infinite, smx-title-jitter 1.2s ease-in-out infinite;
}

/* ---- Cosmic ---- */
.smx-title-rarity-cosmic_supernova {
    background-image: linear-gradient(90deg, #fff6d0, #ffb020, #ff2d55, #7c3fd6, #fff6d0);
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 22px rgba(255,180,60,0.75);
    animation: smx-title-gradient-sweep 1.5s ease-in-out infinite, smx-title-fade-pulse 1.5s ease-in-out infinite;
}
.smx-title-rarity-cosmic_blackhole {
    color: var(--title-c1, #b899ff); background: none; -webkit-text-fill-color: var(--title-c1, #b899ff);
    text-shadow: 0 0 10px var(--title-c2, #2a0a4a), 0 0 24px var(--title-c3, #000), 0 0 34px var(--title-c3, #000);
    animation: smx-title-fade-pulse 3.2s ease-in-out infinite;
}
.smx-title-rarity-cosmic_galaxy {
    background-image: linear-gradient(90deg, #0a0a3a, #4a2fb5, #b56fff, #2fb5d6, #0a0a3a);
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 16px rgba(150,110,255,0.65);
    animation: smx-title-gradient-sweep 4s ease-in-out infinite;
}
.smx-title-rarity-cosmic_solarflare {
    background-image: linear-gradient(90deg, var(--title-c1, #7a2000), var(--title-c2, #ff6a00), var(--title-c3, #ffe27a), var(--title-c2, #ff6a00), var(--title-c1, #7a2000));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 20px rgba(255,150,30,0.75);
    animation: smx-title-gradient-sweep 1.3s ease-in-out infinite;
}
.smx-title-rarity-cosmic_eclipse {
    color: var(--title-c1, #ffdca6); background: none; -webkit-text-fill-color: var(--title-c1, #ffdca6);
    text-shadow: 0 0 8px var(--title-c2, #000), 0 0 20px var(--title-c2, #000), 0 0 30px rgba(255,200,120,0.5);
    animation: smx-title-strobe 3s ease-in-out infinite;
}
.smx-title-rarity-cosmic_meteor {
    background-image: linear-gradient(90deg, var(--title-c1, #ff9a3f), var(--title-c2, #ffffff), var(--title-c3, #3fb5ff), var(--title-c1, #ff9a3f));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 14px rgba(255,255,255,0.6);
    animation: smx-title-gradient-sweep 1s linear infinite;
}

/* ---- Nature ---- */
.smx-title-rarity-nature_bloom {
    background-image: linear-gradient(90deg, var(--title-c1, #d63f7a), var(--title-c2, #ffb4d0), var(--title-c3, #fff6a3), var(--title-c1, #d63f7a));
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 3.4s ease-in-out infinite;
}
.smx-title-rarity-nature_autumn {
    background-image: linear-gradient(90deg, var(--title-c1, #7a3b0a), var(--title-c2, #e07a1f), var(--title-c3, #ffcf5c), var(--title-c2, #e07a1f), var(--title-c1, #7a3b0a));
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 3.6s ease-in-out infinite;
}
.smx-title-rarity-nature_oceanwave {
    background-image: linear-gradient(90deg, var(--title-c1, #003850), var(--title-c2, #1c8fb0), var(--title-c3, #9de8ff), var(--title-c2, #1c8fb0), var(--title-c1, #003850));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 12px rgba(60,180,220,0.5);
    animation: smx-title-gradient-sweep 2.8s ease-in-out infinite;
}
.smx-title-rarity-nature_lightning {
    color: var(--title-c1, #f5f9ff); background: none; -webkit-text-fill-color: var(--title-c1, #f5f9ff);
    text-shadow: 0 0 10px var(--title-c2, #cfe3ff), 0 0 22px var(--title-c3, #7ab8ff);
    animation: smx-title-strobe 0.9s steps(1, end) infinite;
}
.smx-title-rarity-nature_aurora {
    background-image: linear-gradient(90deg, #1fae7a, #3fd6c9, #7a5fff, #ff8ad1, #1fae7a);
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 14px rgba(80,210,190,0.5);
    animation: smx-title-gradient-sweep 5s ease-in-out infinite;
}
.smx-title-rarity-nature_goldenhour {
    background-image: linear-gradient(90deg, var(--title-c1, #a8590f), var(--title-c2, #ffb35c), var(--title-c3, #fff0c2), var(--title-c2, #ffb35c), var(--title-c1, #a8590f));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 14px rgba(255,180,90,0.55);
    animation: smx-title-gradient-sweep 3s ease-in-out infinite;
}

/* ---- Precious ---- */
.smx-title-rarity-precious_moltengold {
    background-image: linear-gradient(90deg, var(--title-c1, #7a4a00), var(--title-c2, #ffcc33), var(--title-c3, #fff6d0), var(--title-c2, #ffcc33), var(--title-c1, #7a4a00));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 16px rgba(255,205,60,0.65);
    animation: smx-title-gradient-sweep 2.2s ease-in-out infinite;
}
.smx-title-rarity-precious_platinum {
    background-image: linear-gradient(90deg, var(--title-c1, #9aa3ad), var(--title-c2, #f2f6fa), var(--title-c3, #c6ced6), var(--title-c2, #f2f6fa), var(--title-c1, #9aa3ad));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
    animation: smx-title-gradient-sweep 3s ease-in-out infinite;
}
.smx-title-rarity-precious_rosegold {
    background-image: linear-gradient(90deg, var(--title-c1, #b76e79), var(--title-c2, #f6c9c9), var(--title-c3, #eab0a8), var(--title-c2, #f6c9c9), var(--title-c1, #b76e79));
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 3.4s ease-in-out infinite;
}
.smx-title-rarity-precious_obsidian {
    color: var(--title-c1, #b899ff); background: none; -webkit-text-fill-color: var(--title-c1, #b899ff);
    text-shadow: 0 0 6px var(--title-c2, #1a0a30), 0 0 16px var(--title-c3, #000), 0 0 24px rgba(140,90,255,0.4);
    animation: smx-title-fade-pulse 3s ease-in-out infinite;
}
.smx-title-rarity-precious_titanium {
    background-image: linear-gradient(90deg, var(--title-c1, #5a6470), var(--title-c2, #b8c2cc), var(--title-c3, #e6ecf2), var(--title-c2, #b8c2cc), var(--title-c1, #5a6470));
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}
.smx-title-rarity-precious_chrome {
    background-image: linear-gradient(90deg, var(--title-c1, #4a4f57), var(--title-c2, #e8edf2), var(--title-c3, #8a92a0), var(--title-c2, #e8edf2), var(--title-c1, #4a4f57));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px rgba(255,255,255,0.4);
    animation: smx-title-gradient-sweep 1.8s ease-in-out infinite;
}

/* ---- Party ---- */
.smx-title-rarity-party_discoball {
    background-image: linear-gradient(90deg, #ff5c7a, #ffd23f, #4fd07a, #2fe6d9, #7c6bff, #ff5c7a);
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 1.2s linear infinite, smx-letter-rainbow-hue 3s linear infinite;
}
.smx-title-rarity-party_candyrainbow {
    background-image: linear-gradient(90deg, #ff9ad5, #ffe27a, #9affb0, #9ad5ff, #d59aff, #ff9ad5);
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.4s ease-in-out infinite;
}
.smx-title-rarity-party_bubblegum {
    color: var(--title-c1, #ff8fd6); background: none; -webkit-text-fill-color: var(--title-c1, #ff8fd6);
    text-shadow: 0 0 10px var(--title-c2, #ff5fc0), 0 0 20px var(--title-c3, #d63fae);
    animation: smx-title-fade-pulse 1.6s ease-in-out infinite;
}
.smx-title-rarity-party_neon {
    color: var(--title-c1, #fff); background: none; -webkit-text-fill-color: var(--title-c1, #fff);
    text-shadow: 0 0 6px var(--title-c2, #ff2fd6), 0 0 14px var(--title-c2, #ff2fd6), 0 0 26px var(--title-c3, #2fe6ff);
    animation: smx-title-strobe 1.4s ease-in-out infinite;
}
.smx-title-rarity-party_retrowave {
    background-image: linear-gradient(90deg, var(--title-c1, #ff2fa0), var(--title-c2, #ff8a2b), var(--title-c3, #2fe6ff), var(--title-c1, #ff2fa0));
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 14px rgba(255,50,180,0.55);
    animation: smx-title-gradient-sweep 2s ease-in-out infinite;
}
.smx-title-rarity-party_pixelsunset {
    background-image: linear-gradient(90deg, #ff5c3f, #ffb020, #ff5ca0, #7c3fd6, #ff5c3f);
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 1.8s steps(6, end) infinite;
}

/* ---- Animated Letters: each character wrapped in its own span (see
   includes/nav.php's smxApplyTitleLetters) and staggered via --i. ---- */
.smx-title-rarity-letters_rainbow_wave span,
.smx-title-rarity-letters_bounce_party span,
.smx-title-rarity-letters_disco_lights span,
.smx-title-rarity-letters_neon_flicker span,
.smx-title-rarity-letters_confetti_pop span,
.smx-title-rarity-letters_piano_wave span,
.smx-title-rarity-letters_typewriter_glow span,
.smx-title-rarity-letters_pixel_glitch span {
    display: inline-block;
}

.smx-title-rarity-letters_rainbow_wave span {
    color: var(--title-c1, #ff5c7a);
    animation: smx-letter-rainbow-hue 2s linear infinite;
    animation-delay: calc(var(--i, 0) * 0.08s);
}
.smx-title-rarity-letters_bounce_party span {
    color: var(--title-c1, #ffd23f);
    animation: smx-letter-bounce 1s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.07s);
}
.smx-title-rarity-letters_disco_lights span {
    animation: smx-letter-color-cycle 2.4s linear infinite;
    animation-delay: calc(var(--i, 0) * 0.1s);
}
.smx-title-rarity-letters_neon_flicker span {
    color: var(--title-c1, #fff);
    text-shadow: 0 0 6px var(--title-c2, #ff2fd6), 0 0 14px var(--title-c3, #2fe6ff);
    animation: smx-letter-flicker-solo 1.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.12s);
}
.smx-title-rarity-letters_confetti_pop span {
    color: var(--title-c1, #4fd07a);
    animation: smx-letter-scale-pulse 1s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.06s);
}
.smx-title-rarity-letters_piano_wave span {
    color: var(--title-c1, #7c6bff);
    animation: smx-letter-rise-fall 1.2s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.05s);
}
.smx-title-rarity-letters_typewriter_glow span {
    color: var(--title-c1, #2fe6d9);
    animation: smx-letter-chase 1.6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.09s);
}
.smx-title-rarity-letters_pixel_glitch span {
    color: var(--title-c1, #fff);
    text-shadow: -1px 0 var(--title-c2, #ff2f6e), 1px 0 var(--title-c3, #2fe6ff);
    animation: smx-letter-jitter-solo 0.4s steps(2, end) infinite;
    animation-delay: calc(var(--i, 0) * 0.03s);
}

/* ==========================================================================
   Profile widget system
   ========================================================================== */

.smx-widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
}

.smx-widget-card {
    position: relative;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 10px;
    padding: 1.25rem;
}

.smx-widget-full {
    grid-column: 1 / -1;
}

.smx-customize-panel {
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 10px;
    padding: 1.25rem;
}

.smx-customize-list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.smx-customize-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}

.smx-customize-list label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin: 0;
    cursor: pointer;
}

.smx-customize-arrows {
    display: flex;
    gap: 0.3rem;
}

.smx-customize-arrows button {
    background: none;
    border: 1px solid var(--smx-border);
    border-radius: 4px;
    color: var(--smx-muted);
    font-size: 0.7rem;
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.smx-customize-arrows button:hover {
    color: var(--smx-accent);
    border-color: var(--smx-accent);
}

/* Drag-and-drop edit mode for the profile header chips + widget grid */

.smx-header-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    position: relative;
}

.smx-drag-handle {
    display: none;
    cursor: grab;
    color: var(--smx-muted);
    font-size: 0.7rem;
    letter-spacing: -2px;
}

.smx-chip-remove,
.smx-widget-remove {
    display: none;
    background: none;
    border: none;
    color: var(--smx-danger);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

.smx-widget-edit-controls {
    display: none;
    position: absolute;
    top: -24px;
    left: 0;
    z-index: 5;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    border-radius: 4px;
    padding: 1px 4px;
    gap: 3px;
    align-items: center;
    white-space: nowrap;
}

body.smx-profile-edit-mode .smx-drag-handle,
body.smx-profile-edit-mode .smx-chip-remove,
body.smx-profile-edit-mode .smx-widget-remove,
body.smx-profile-edit-mode .smx-widget-edit-controls {
    display: flex;
}

body.smx-profile-edit-mode .smx-header-chip {
    background-color: var(--smx-bg);
    border: 1px dashed var(--smx-border);
    border-radius: 6px;
    padding: 0.15rem 0.5rem;
}

body.smx-profile-edit-mode .smx-widget-card {
    border-style: dashed;
    cursor: grab;
}

.smx-dragging {
    opacity: 0.4;
}

.smx-hidden-pool {
    background-color: var(--smx-panel);
    border: 1px dashed var(--smx-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
}

.smx-pool-pill {
    display: inline-block;
    background: none;
    border: 1px solid var(--smx-border);
    border-radius: 999px;
    color: var(--smx-muted);
    font-size: 0.78rem;
    padding: 0.25rem 0.7rem;
    margin: 0.3rem 0.3rem 0 0;
    cursor: pointer;
}

.smx-pool-pill:hover {
    border-color: var(--smx-accent);
    color: var(--smx-accent);
}

.smx-pool-pill-pending {
    border-color: #4fd07a;
    color: #4fd07a;
}

.smx-pending-note {
    color: #4fd07a;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0.6rem 0 0;
}

.smx-pool-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--smx-accent);
    margin: 0.9rem 0 0.3rem;
}

.smx-pool-section-label:first-of-type {
    margin-top: 0.4rem;
}

.smx-zone-label {
    display: none;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--smx-muted);
    border-top: 1px dashed var(--smx-border);
    padding-top: 0.75rem;
    margin: 0 0 0.75rem;
}

body.smx-profile-edit-mode .smx-zone-label {
    display: block;
}

.smx-save-pending {
    animation: smx-save-pulse 1.4s ease-in-out infinite;
}

@keyframes smx-save-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(47, 230, 217, 0.6); }
    50%      { box-shadow: 0 0 0 6px rgba(47, 230, 217, 0); }
}

/* Header block grid - avatar, username, title, flairs, SMX id, stats,
   XP bar are all independently reorderable/hideable, same mechanism as
   the body widgets below. */

.smx-header-block {
    position: relative;
    min-width: 0;
    width: fit-content;
    max-width: 100%;
    z-index: 1;
}

/* Grid items stretch to fill their full cell width by default - fine
   for most blocks (shrinking to fit keeps the edit-mode outline tight
   around the actual visible content instead of the whole cell), but the
   XP bar's progress fill specifically needs width:100% to resolve
   against, so it keeps stretching to fill its cell. */
.smx-header-block[data-header-key="xp_bar"] {
    width: 100%;
}

.smx-header-block-avatar {
    max-width: 140px;
}

body.smx-profile-edit-mode .smx-header-block {
    outline: 1px dashed var(--smx-border);
    outline-offset: 2px;
    border-radius: 8px;
    cursor: grab;
    background-color: rgba(11, 15, 20, 0.35);
}

/* Reuse the avatar-wrap styling regardless of which cell it's in */
.smx-header-block-avatar .smx-profile-avatar-wrap {
    margin: 0 auto;
}

.smx-widget-straddle {
    display: none;
    background: none;
    border: none;
    color: var(--smx-muted);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

.smx-widget-widen,
.smx-widget-narrow {
    display: none;
    background: none;
    border: none;
    color: var(--smx-muted);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

.smx-widget-widen:hover,
.smx-widget-narrow:hover {
    color: var(--smx-accent);
}

body.smx-profile-edit-mode .smx-widget-widen,
body.smx-profile-edit-mode .smx-widget-narrow {
    display: inline-block;
}

.smx-widget-straddle:hover {
    color: var(--smx-accent);
}

body.smx-profile-edit-mode .smx-widget-straddle {
    display: inline-block;
}

.smx-header-block.smx-straddling {
    box-shadow: 0 0 0 1px var(--smx-accent);
}

/* ---- Lock, nudge, and nesting ---- */

.smx-widget-lock {
    display: none;
    background: none;
    border: none;
    color: var(--smx-muted);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

.smx-widget-lock:hover {
    color: var(--smx-accent);
}

body.smx-profile-edit-mode .smx-widget-lock {
    display: inline-block;
}

.smx-widget-reset {
    display: none;
    background: none;
    border: none;
    color: var(--smx-muted);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
}

.smx-widget-reset:hover {
    color: var(--smx-accent);
}

body.smx-profile-edit-mode .smx-header-block.smx-locked.smx-active-block .smx-widget-reset {
    display: inline-block;
}

/* Every locked block gets a minimal, quiet indicator so you can still
   tell at a glance what's locked - the full glow/stripe/nudge/resize
   controls only show for the one actively selected, to avoid a cluster
   of overlapping borders when several locked blocks sit near each other. */
body.smx-profile-edit-mode .smx-header-block.smx-locked {
    box-shadow: 0 0 0 1px rgba(255, 176, 32, 0.35);
}

body.smx-profile-edit-mode .smx-header-block.smx-locked.smx-active-block {
    box-shadow: 0 0 0 1px #ffb020;
}

body.smx-profile-edit-mode .smx-header-block.smx-locked.smx-active-block::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: repeating-linear-gradient(
        135deg, rgba(255, 176, 32, 0.06), rgba(255, 176, 32, 0.06) 6px, transparent 6px, transparent 12px
    );
    pointer-events: none;
}

.smx-resize-handle {
    display: none;
    position: absolute;
    bottom: -8px;
    right: -8px;
    z-index: 3;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    border-radius: 4px;
    color: var(--smx-muted);
    font-size: 0.7rem;
    cursor: nwse-resize;
    user-select: none;
}

.smx-resize-handle:hover {
    color: var(--smx-accent);
    border-color: var(--smx-accent);
}

body.smx-profile-edit-mode .smx-header-block.smx-locked.smx-active-block .smx-resize-handle {
    display: block;
}

/* Highlighted while dragging something over a valid (locked) nest target */
.smx-header-block.smx-drop-target-hover {
    box-shadow: 0 0 0 2px #4fd07a;
}

.smx-header-nested-child {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0.15rem 0;
}

.smx-header-nested-child .smx-widget-remove {
    display: none;
    order: 2;
}

body.smx-profile-edit-mode .smx-header-nested-child .smx-widget-remove {
    display: inline-block;
}

/* Automatic "subtext" treatment when a text-type block is nested under
   another text-type block - smaller and muted, like a caption. */
.smx-header-subtext {
    font-size: 0.78em;
    opacity: 0.75;
    transform: scale(0.92);
    transform-origin: left center;
}

/* ==========================================================================
   Free-floating decorative stickers - positioned by percentage, not the
   grid, and always behind the header blocks (z-index 0 vs 1+) so
   widgets naturally layer on top of them rather than the reverse.
   ========================================================================== */

.smx-sticker-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.smx-sticker-wrap {
    position: absolute;
    pointer-events: none;
}

body.smx-profile-edit-mode .smx-sticker-wrap {
    pointer-events: auto;
    cursor: grab;
}

.smx-sticker {
    display: block;
    width: 64px;
    height: 64px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

body.smx-profile-edit-mode .smx-sticker-wrap:hover .smx-sticker {
    outline: 1px dashed var(--smx-accent);
    outline-offset: 3px;
}

.smx-sticker-remove {
    display: none;
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 1;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    background-color: var(--smx-danger);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    cursor: pointer;
    pointer-events: none;
}

body.smx-profile-edit-mode .smx-sticker-wrap:hover .smx-sticker-remove {
    display: block;
    pointer-events: auto;
}

.smx-sticker-rotate-handle,
.smx-sticker-resize-handle {
    display: none;
    position: absolute;
    z-index: 1;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    border-radius: 50%;
    color: var(--smx-muted);
    font-size: 0.7rem;
    cursor: grab;
    pointer-events: none;
}

.smx-sticker-rotate-handle {
    top: -8px;
    left: -8px;
    cursor: grab;
}

.smx-sticker-resize-handle {
    bottom: -8px;
    right: -8px;
    cursor: ns-resize;
}

.smx-sticker-rotate-handle:hover,
.smx-sticker-resize-handle:hover {
    color: var(--smx-accent);
    border-color: var(--smx-accent);
}

body.smx-profile-edit-mode .smx-sticker-wrap:hover .smx-sticker-rotate-handle,
body.smx-profile-edit-mode .smx-sticker-wrap:hover .smx-sticker-resize-handle {
    display: block;
    pointer-events: auto;
}

.smx-sticker-tray-item.smx-sticker-tray-item-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.smx-sticker-tray-item.smx-sticker-tray-item-disabled:hover {
    border-color: var(--smx-border);
}

.smx-sticker-tray {
    background-color: var(--smx-panel);
    border: 1px dashed var(--smx-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0 1.75rem 1rem;
}

.smx-sticker-tray-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    background: none;
    border: 1px solid var(--smx-border);
    border-radius: 8px;
    padding: 0.4rem;
    margin: 0.3rem 0.3rem 0 0;
    cursor: pointer;
}

.smx-sticker-tray-item:hover {
    border-color: var(--smx-accent);
}

.smx-sticker-tray-item img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.smx-sticker-tray-item span {
    font-size: 0.68rem;
    color: var(--smx-muted);
    max-width: 60px;
    text-align: center;
}

.smx-sticker-tray-item small[data-remaining] {
    display: block;
    font-size: 0.62rem;
    color: var(--smx-accent);
    margin-top: 0.1rem;
}

/* ==========================================================================
   Header border cosmetics - quest rewards, applied to .smx-profile-card.
   50 effects across 4 techniques (glow, strobe, color-cycle, spinning
   gradient ring), built from a handful of shared keyframes.
   ========================================================================== */

@keyframes smx-border-glow-pulse {
    0%, 100% { box-shadow: 0 0 8px 1px var(--bc, #2fe6d9), 0 0 0 1px var(--bc, #2fe6d9) inset; }
    50%      { box-shadow: 0 0 22px 4px var(--bc, #2fe6d9), 0 0 0 1px var(--bc, #2fe6d9) inset; }
}

@keyframes smx-border-strobe {
    0%, 100% { box-shadow: 0 0 14px 2px var(--bc, #fff), 0 0 0 2px var(--bc, #fff) inset; }
    50%      { box-shadow: 0 0 2px 0px transparent, 0 0 0 2px rgba(255,255,255,0.15) inset; }
}

/* Registering --smx-ring-angle as an actual <angle> lets the browser
   smoothly interpolate it in the keyframes below - this is what makes
   it possible to animate the gradient's rotation directly, instead of
   animating transform:rotate() on the whole element (which would spin
   the ring's own rectangular mask shape out of alignment with the
   card's actual rounded corners - looks visibly wrong on a non-circular
   shape, since the mask and the card edges drift apart as they rotate). */
@property --smx-ring-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@keyframes smx-border-spin {
    to { --smx-ring-angle: 360deg; }
}

.smx-border-cosmetic-ring-wrap {
    position: relative;
}

[class*="smx-border-cosmetic-ring_"]::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    padding: 3px;
    background: conic-gradient(from var(--smx-ring-angle), var(--ring-colors));
    animation: smx-border-spin 6s linear infinite;
    -webkit-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: 0;
}


.smx-border-cosmetic-glow_crimson {
    --bc: #ff2d55;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_inferno {
    --bc: #ff6a00;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_sunflower {
    --bc: #ffd23f;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_emerald {
    --bc: #2fd97a;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_mint {
    --bc: #3fe6c9;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_cyan {
    --bc: #2fe6d9;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_azure {
    --bc: #3f9bff;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_sapphire {
    --bc: #3f5fff;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_violet {
    --bc: #9a3fff;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_magenta {
    --bc: #ff3fd6;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_rose {
    --bc: #ff5c8a;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_gold {
    --bc: #ffb020;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_silver {
    --bc: #c8ced8;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_void {
    --bc: #6a1fae;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_toxic {
    --bc: #8aff2f;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_blood {
    --bc: #c2202f;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_ice {
    --bc: #a6e8ff;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_lava {
    --bc: #ff3d1f;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_spectral {
    --bc: #7affe0;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-glow_amber {
    --bc: #ffab2e;
    animation: smx-border-glow-pulse 2.4s ease-in-out infinite;
}

.smx-border-cosmetic-strobe_white {
    --bc: #ffffff;
    animation: smx-border-strobe 1.1s steps(1, end) infinite;
}

.smx-border-cosmetic-strobe_red {
    --bc: #ff2d3f;
    animation: smx-border-strobe 1.1s steps(1, end) infinite;
}

.smx-border-cosmetic-strobe_blue {
    --bc: #3f9bff;
    animation: smx-border-strobe 1.1s steps(1, end) infinite;
}

.smx-border-cosmetic-strobe_yellow {
    --bc: #ffe23f;
    animation: smx-border-strobe 1.1s steps(1, end) infinite;
}

.smx-border-cosmetic-strobe_purple {
    --bc: #a53fff;
    animation: smx-border-strobe 1.1s steps(1, end) infinite;
}

.smx-border-cosmetic-strobe_green {
    --bc: #3fff8a;
    animation: smx-border-strobe 1.1s steps(1, end) infinite;
}

.smx-border-cosmetic-strobe_pink {
    --bc: #ff3fb0;
    animation: smx-border-strobe 1.1s steps(1, end) infinite;
}

.smx-border-cosmetic-strobe_orange {
    --bc: #ff8a2f;
    animation: smx-border-strobe 1.1s steps(1, end) infinite;
}

.smx-border-cosmetic-strobe_teal {
    --bc: #2fe6d9;
    animation: smx-border-strobe 1.1s steps(1, end) infinite;
}

.smx-border-cosmetic-strobe_mono {
    --bc: #c8ccd6;
    animation: smx-border-strobe 1.1s steps(1, end) infinite;
}

.smx-border-cosmetic-cycle_rainbow {
    animation: smx-border-glow-pulse 3s ease-in-out infinite;
    border-image: linear-gradient(90deg, #ff2d55, #ffb020, #2fd97a, #2fe6d9, #3f5fff, #9a3fff, #ff2d55) 1;
}

.smx-border-cosmetic-cycle_fire {
    animation: smx-border-glow-pulse 3s ease-in-out infinite;
    border-image: linear-gradient(90deg, #4a0000, #ff2d00, #ffcc00, #ff2d00, #4a0000) 1;
}

.smx-border-cosmetic-cycle_ocean {
    animation: smx-border-glow-pulse 3s ease-in-out infinite;
    border-image: linear-gradient(90deg, #00243a, #1c8fd1, #a6e8ff, #1c8fd1, #00243a) 1;
}

.smx-border-cosmetic-cycle_toxic {
    animation: smx-border-glow-pulse 3s ease-in-out infinite;
    border-image: linear-gradient(90deg, #0a1f00, #6fd42a, #c8ff5c, #6fd42a, #0a1f00) 1;
}

.smx-border-cosmetic-cycle_royal {
    animation: smx-border-glow-pulse 3s ease-in-out infinite;
    border-image: linear-gradient(90deg, #1a0a3a, #7c3fd6, #ffd23f, #7c3fd6, #1a0a3a) 1;
}

.smx-border-cosmetic-ring_aurora {
    --ring-colors: #1fae7a, #3fd6c9, #7a5fff, #ff8ad1, #1fae7a;
}

.smx-border-cosmetic-ring_inferno {
    --ring-colors: #6b0f0f, #ff5b00, #ffd23f, #ff5b00, #6b0f0f;
}

.smx-border-cosmetic-ring_void {
    --ring-colors: #0a0a1a, #3a1b7a, #7c3fd6, #3a1b7a, #0a0a1a;
}

.smx-border-cosmetic-ring_electric {
    --ring-colors: #003a5c, #2fe6ff, #ffffff, #2fe6ff, #003a5c;
}

.smx-border-cosmetic-ring_candy {
    --ring-colors: #ff9ad5, #9ad5ff, #d5ff9a, #ff9ad5;
}

.smx-border-cosmetic-ring_molten {
    --ring-colors: #2a0500, #ff3d00, #ffb000, #ff3d00, #2a0500;
}

.smx-border-cosmetic-ring_spectral {
    --ring-colors: #001a1a, #2fe6d9, #ffffff, #2fe6d9, #001a1a;
}

.smx-border-cosmetic-ring_royal {
    --ring-colors: #1a0a3a, #ffd23f, #7c3fd6, #ffd23f, #1a0a3a;
}

.smx-border-cosmetic-ring_nebula {
    --ring-colors: #0a0a2a, #ff7ad1, #3fb8ff, #7a3fd6, #0a0a2a;
}

.smx-border-cosmetic-ring_venom {
    --ring-colors: #0a1a00, #9cff4a, #4fae1a, #9cff4a, #0a1a00;
}

.smx-border-cosmetic-ring_blood_moon {
    --ring-colors: #1a0000, #c2202f, #ff8a5c, #c2202f, #1a0000;
}

.smx-border-cosmetic-ring_glacier {
    --ring-colors: #001420, #a6e8ff, #ffffff, #a6e8ff, #001420;
}

.smx-border-cosmetic-ring_sunset {
    --ring-colors: #2a0a1a, #ff5c3f, #ffb020, #ff5c8a, #2a0a1a;
}

.smx-border-cosmetic-ring_cosmic {
    --ring-colors: #05001a, #7c3fd6, #2fe6d9, #ff7ad1, #05001a;
}

.smx-border-cosmetic-ring_gold_rush {
    --ring-colors: #2a1c00, #ffcc33, #fff6d0, #ffcc33, #2a1c00;
}
/* ==========================================================================
   Header stat-chip text cosmetics - quest rewards, applied to the number
   inside a stat chip (e.g. the "6" in "6 Quests Completed"). 50 effects
   reusing the same proven keyframe patterns as the title rarity system,
   under their own separate class prefix/pool.
   ========================================================================== */

@keyframes smx-stat-letters-color-cycle {
    0% { color: #ff5c7a; } 20% { color: #ffb020; } 40% { color: #4fd07a; }
    60% { color: #2fe6d9; } 80% { color: #7c6bff; } 100% { color: #ff5c7a; }
}
@keyframes smx-stat-letters-bounce {
    0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); }
}
@keyframes smx-stat-letters-wave {
    0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); }
}


.smx-stat-cosmetic-glow_ember {
    color: #ff5c2f; -webkit-text-fill-color: #ff5c2f;
    text-shadow: 0 0 6px #ff5c2f, 0 0 14px #ff5c2f;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-glow_frost {
    color: #a6e8ff; -webkit-text-fill-color: #a6e8ff;
    text-shadow: 0 0 6px #a6e8ff, 0 0 14px #a6e8ff;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-glow_venom {
    color: #8aff2f; -webkit-text-fill-color: #8aff2f;
    text-shadow: 0 0 6px #8aff2f, 0 0 14px #8aff2f;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-glow_plasma {
    color: #ff3fd6; -webkit-text-fill-color: #ff3fd6;
    text-shadow: 0 0 6px #ff3fd6, 0 0 14px #ff3fd6;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-glow_static {
    color: #2fe6ff; -webkit-text-fill-color: #2fe6ff;
    text-shadow: 0 0 6px #2fe6ff, 0 0 14px #2fe6ff;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-glow_royal {
    color: #9a3fff; -webkit-text-fill-color: #9a3fff;
    text-shadow: 0 0 6px #9a3fff, 0 0 14px #9a3fff;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-glow_honey {
    color: #ffb020; -webkit-text-fill-color: #ffb020;
    text-shadow: 0 0 6px #ffb020, 0 0 14px #ffb020;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-glow_rose {
    color: #ff5c8a; -webkit-text-fill-color: #ff5c8a;
    text-shadow: 0 0 6px #ff5c8a, 0 0 14px #ff5c8a;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-glow_mint {
    color: #3fe6c9; -webkit-text-fill-color: #3fe6c9;
    text-shadow: 0 0 6px #3fe6c9, 0 0 14px #3fe6c9;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-glow_steel {
    color: #c8ced8; -webkit-text-fill-color: #c8ced8;
    text-shadow: 0 0 6px #c8ced8, 0 0 14px #c8ced8;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_dawn {
    background-image: linear-gradient(90deg, #ff8a5c, #ffe08a, #ff8a5c);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_dusk {
    background-image: linear-gradient(90deg, #3a1b7a, #ff7ad1, #3a1b7a);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_deep_sea {
    background-image: linear-gradient(90deg, #003850, #3fd6c9, #003850);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_forge {
    background-image: linear-gradient(90deg, #6b0f0f, #ffb000, #6b0f0f);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_orchid {
    background-image: linear-gradient(90deg, #7a35c2, #ff9ad5, #7a35c2);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_jade {
    background-image: linear-gradient(90deg, #1f9b53, #c8ff5c, #1f9b53);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_slate {
    background-image: linear-gradient(90deg, #4a4f57, #e8edf2, #4a4f57);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_citrus {
    background-image: linear-gradient(90deg, #ff8a2f, #ffe23f, #ff8a2f);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_twilight {
    background-image: linear-gradient(90deg, #1a0a3a, #3f9bff, #1a0a3a);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_coral {
    background-image: linear-gradient(90deg, #ff5c5c, #ffb08a, #ff5c5c);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_arctic {
    background-image: linear-gradient(90deg, #1c6fa8, #ffffff, #1c6fa8);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_molten {
    background-image: linear-gradient(90deg, #2a0500, #ff8a2f, #2a0500);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-flicker_neon_pink {
    color: #ff2fd6; -webkit-text-fill-color: #ff2fd6;
    text-shadow: 0 0 6px #ff2fd6, 0 0 14px #ff2fd6;
    animation: smx-title-flicker 1.6s ease-in-out infinite;
}

.smx-stat-cosmetic-flicker_neon_blue {
    color: #2fe6ff; -webkit-text-fill-color: #2fe6ff;
    text-shadow: 0 0 6px #2fe6ff, 0 0 14px #2fe6ff;
    animation: smx-title-flicker 1.6s ease-in-out infinite;
}

.smx-stat-cosmetic-flicker_neon_green {
    color: #4fff6a; -webkit-text-fill-color: #4fff6a;
    text-shadow: 0 0 6px #4fff6a, 0 0 14px #4fff6a;
    animation: smx-title-flicker 1.6s ease-in-out infinite;
}

.smx-stat-cosmetic-flicker_candle {
    color: #ffb84f; -webkit-text-fill-color: #ffb84f;
    text-shadow: 0 0 6px #ffb84f, 0 0 14px #ffb84f;
    animation: smx-title-flicker 1.6s ease-in-out infinite;
}

.smx-stat-cosmetic-flicker_haunted {
    color: #8a5cff; -webkit-text-fill-color: #8a5cff;
    text-shadow: 0 0 6px #8a5cff, 0 0 14px #8a5cff;
    animation: smx-title-flicker 1.6s ease-in-out infinite;
}

.smx-stat-cosmetic-flicker_signal {
    color: #e8ecf2; -webkit-text-fill-color: #e8ecf2;
    text-shadow: 0 0 6px #e8ecf2, 0 0 14px #e8ecf2;
    animation: smx-title-flicker 1.6s ease-in-out infinite;
}

.smx-stat-cosmetic-fade_lavender {
    color: #c9aef0; -webkit-text-fill-color: #c9aef0;
    animation: smx-title-fade-pulse 2.8s ease-in-out infinite;
}

.smx-stat-cosmetic-fade_sea_foam {
    color: #8ff0d6; -webkit-text-fill-color: #8ff0d6;
    animation: smx-title-fade-pulse 2.8s ease-in-out infinite;
}

.smx-stat-cosmetic-fade_blush {
    color: #ffb0c8; -webkit-text-fill-color: #ffb0c8;
    animation: smx-title-fade-pulse 2.8s ease-in-out infinite;
}

.smx-stat-cosmetic-fade_ash {
    color: #a8adb8; -webkit-text-fill-color: #a8adb8;
    animation: smx-title-fade-pulse 2.8s ease-in-out infinite;
}

.smx-stat-cosmetic-fade_gold_dust {
    color: #e0c060; -webkit-text-fill-color: #e0c060;
    animation: smx-title-fade-pulse 2.8s ease-in-out infinite;
}

.smx-stat-cosmetic-fade_void_breath {
    color: #5a2ba8; -webkit-text-fill-color: #5a2ba8;
    animation: smx-title-fade-pulse 2.8s ease-in-out infinite;
}

.smx-stat-cosmetic-rainbow_prism {
    background-image: linear-gradient(90deg, #ff5c7a, #ffb020, #4fd07a, #2fe6d9, #7c6bff);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2s linear infinite, smx-title-hue-cycle 3s linear infinite;
}

.smx-stat-cosmetic-rainbow_spectrum {
    background-image: linear-gradient(90deg, #ff5c7a, #ffb020, #4fd07a, #2fe6d9, #7c6bff);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2s linear infinite, smx-title-hue-cycle 3s linear infinite;
}

.smx-stat-cosmetic-rainbow_holo {
    background-image: linear-gradient(90deg, #ff5c7a, #ffb020, #4fd07a, #2fe6d9, #7c6bff);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2s linear infinite, smx-title-hue-cycle 3s linear infinite;
}

.smx-stat-cosmetic-letters_bounce { display: inline-block; }
.smx-stat-cosmetic-letters_bounce span { display: inline-block; color: #ffd23f; animation: smx-stat-letters-bounce 0.9s ease-in-out infinite; }

.smx-stat-cosmetic-letters_wave { display: inline-block; }
.smx-stat-cosmetic-letters_wave span { display: inline-block; color: #7c6bff; animation: smx-stat-letters-wave 1.1s ease-in-out infinite; }

.smx-stat-cosmetic-letters_glitch { display: inline-block; }
.smx-stat-cosmetic-letters_glitch span { display: inline-block; color: #fff; text-shadow: -1px 0 #ff2f6e, 1px 0 #2fe6ff; animation: smx-title-jitter 0.4s steps(2, end) infinite; }

.smx-stat-cosmetic-letters_disco { display: inline-block; }
.smx-stat-cosmetic-letters_disco span { display: inline-block; animation: smx-stat-letters-color-cycle 2s linear infinite; }

.smx-stat-cosmetic-elemental_inferno {
    background-image: linear-gradient(90deg, #4a0000, #ff2d00, #ffcc00, #ff2d00, #4a0000);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px #ff2d00;
    animation: smx-title-gradient-sweep 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-elemental_glacial {
    background-image: linear-gradient(90deg, #001420, #a6e8ff, #ffffff, #a6e8ff, #001420);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px #a6e8ff;
    animation: smx-title-gradient-sweep 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-elemental_toxic_spill {
    background-image: linear-gradient(90deg, #0a1f00, #6fd42a, #c8ff5c, #6fd42a, #0a1f00);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px #6fd42a;
    animation: smx-title-gradient-sweep 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-elemental_cosmic_dust {
    background-image: linear-gradient(90deg, #05001a, #7c3fd6, #ff7ad1, #7c3fd6, #05001a);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px #7c3fd6;
    animation: smx-title-gradient-sweep 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-elemental_molten_core {
    background-image: linear-gradient(90deg, #2a0500, #ff3d00, #ffb000, #ff3d00, #2a0500);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 10px #ff3d00;
    animation: smx-title-gradient-sweep 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_midnight {
    background-image: linear-gradient(90deg, #1a1f3a, #3f5fff, #1a1f3a);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-sweep_sakura {
    background-image: linear-gradient(90deg, #ffb0c8, #ff5c8a, #ffb0c8);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep 2.6s ease-in-out infinite;
}

.smx-stat-cosmetic-glow_sunbeam {
    color: #ffe23f; -webkit-text-fill-color: #ffe23f;
    text-shadow: 0 0 6px #ffe23f, 0 0 14px #ffe23f;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}

.smx-stat-cosmetic-glow_deep_purple {
    color: #5a2ba8; -webkit-text-fill-color: #5a2ba8;
    text-shadow: 0 0 6px #5a2ba8, 0 0 14px #5a2ba8;
    animation: smx-title-fade-pulse 2.2s ease-in-out infinite;
}
/* ==========================================================================
   Raid boss page
   ========================================================================== */

.smx-raid-boss-card {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 92, 122, 0.12), rgba(124, 107, 255, 0.1));
    border: 1px solid var(--smx-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.smx-raid-boss-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
    flex-shrink: 0;
}

.smx-raid-boss-info {
    flex: 1;
    min-width: 0;
}

.smx-raid-boss-name {
    font-family: 'Orbitron', "Segoe UI", system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--smx-text);
    margin-bottom: 0.5rem;
}

.smx-raid-hp-bar-wrap {
    margin-bottom: 0.5rem;
}

.smx-raid-hp-bar {
    width: 100%;
    height: 22px;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.smx-raid-hp-bar-small {
    height: 14px;
}

.smx-raid-hp-bar-tiny {
    height: 6px;
    margin-top: 0.2rem;
}

.smx-raid-hp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff5c7a, #ffb020, #4fd07a);
    transition: width 0.4s ease;
}

.smx-raid-hp-bar-fill.smx-raid-hp-downed {
    background: #3a3f4a;
}

.smx-raid-hp-label {
    font-size: 0.85rem;
    color: var(--smx-muted);
    margin-top: 0.3rem;
}

.smx-raid-participant-summary {
    font-size: 0.85rem;
    color: var(--smx-muted);
}

.smx-raid-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.smx-raid-role-card {
    position: relative;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 10px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.smx-raid-role-active {
    border-color: var(--smx-accent);
    box-shadow: 0 0 0 1px var(--smx-accent);
}

.smx-raid-role-recommended {
    position: absolute;
    top: -10px;
    right: 12px;
    background-color: #4fd07a;
    color: #0b0f14;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
}

.smx-raid-role-desc {
    font-size: 0.85rem;
    color: var(--smx-muted);
    flex-grow: 1;
}

.smx-raid-role-range {
    font-size: 0.8rem;
    color: var(--smx-accent);
    font-weight: 600;
    margin: 0;
}

.smx-raid-participant-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.smx-raid-participant-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.smx-raid-participant-info {
    flex: 1;
    min-width: 0;
}

.smx-raid-participant-info a {
    color: var(--smx-text);
    text-decoration: none;
    font-size: 0.88rem;
}

.smx-raid-participant-info a:hover {
    color: var(--smx-accent);
}

/* ==========================================================================
   Raid boss page - v2 additions: role levels, HP value text, tank
   shields, leaderboards
   ========================================================================== */

.smx-raid-level-badge {
    display: inline-block;
    background-color: var(--smx-accent);
    color: #0b0f14;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.smx-raid-participant-name-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.smx-raid-level-badge-sm {
    display: inline-block;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    color: var(--smx-muted);
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}

.smx-raid-hp-value {
    font-size: 0.7rem;
    color: var(--smx-muted);
    margin-top: 0.1rem;
}

.smx-raid-role-xp-label {
    font-size: 0.75rem;
    margin-top: 0.4rem;
}

.smx-raid-xp-bar {
    width: 100%;
    height: 8px;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.5rem;
}
.smx-raid-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c6bff, #2fe6d9);
    border-radius: 999px;
    transition: width 0.3s ease;
}

.smx-raid-revive-timer {
    font-size: 0.78rem;
    color: #ff7a5c;
    margin-top: 0.4rem;
}
.smx-raid-revive-timer-sm {
    font-size: 0.7rem;
    margin-top: 0.2rem;
}

/* Attribute chips - used on both raid.php and profile.php, kept in one
   shared class set so the two stay visually consistent. */
.smx-raid-attr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.6rem;
}
.smx-raid-attr-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    border-radius: 10px;
    padding: 0.7rem 0.5rem;
}
.smx-raid-attr-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--smx-muted);
}
.smx-raid-attr-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #2fe6d9;
    margin: 0.15rem 0;
}
.smx-raid-attr-desc {
    font-size: 0.65rem;
    color: var(--smx-muted);
}

.smx-raid-shield-bar-wrap {
    margin-top: 0.6rem;
}

.smx-raid-shield-bar {
    width: 100%;
    height: 14px;
    background-color: var(--smx-bg);
    border: 1px solid rgba(63, 155, 255, 0.4);
    border-radius: 999px;
    overflow: hidden;
}

.smx-raid-shield-bar-tiny {
    height: 5px;
    border-width: 1px;
}

.smx-raid-shield-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #1c6fa8, #3f9bff, #a6e8ff);
    transition: width 0.4s ease;
}

.smx-raid-shield-bar-tiny-wrap {
    margin-top: 0.25rem;
}

.smx-raid-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.smx-raid-leaderboard-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.smx-raid-leaderboard-rank {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--smx-muted);
    width: 22px;
    flex-shrink: 0;
}

.smx-raid-leaderboard-name {
    flex: 1;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--smx-text);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smx-raid-leaderboard-name:hover {
    color: var(--smx-accent);
}

.smx-raid-leaderboard-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--smx-accent);
    flex-shrink: 0;
}

/* ==========================================================================
   Shop cosmetics - procedurally generated (technique + randomized colors
   set via inline CSS custom properties per item), rather than a fixed
   registry like the quest-reward cosmetics. Reuses the same generic
   keyframes already defined for those (smx-border-glow-pulse,
   smx-border-strobe, smx-border-spin/--smx-ring-angle, smx-title-*),
   which is what makes true per-item uniqueness practical - only the
   color/speed custom properties change per item, not the CSS itself.
   ========================================================================== */

.smx-shop-border-glow {
    animation: smx-border-glow-pulse var(--shop-speed, 2.4s) ease-in-out infinite;
}
.smx-shop-border-strobe {
    animation: smx-border-strobe var(--shop-speed, 1.1s) steps(1, end) infinite;
}
[class*="smx-shop-border-ring"]::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    padding: 3px;
    background: conic-gradient(from var(--smx-ring-angle), var(--ring-colors));
    animation: smx-border-spin var(--shop-speed, 6s) linear infinite;
    -webkit-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: 0;
}

/* Tracer - a short bright arc chasing around the edge, comet-tail
   style, rather than a full smooth gradient ring. Reuses the same
   @property --smx-ring-angle rotation mechanism as "ring". */
[class*="smx-shop-border-tracer"]::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    padding: 3px;
    background: conic-gradient(from var(--smx-ring-angle), transparent 0deg, var(--bc, #2fe6d9) 18deg, transparent 50deg, transparent 360deg);
    animation: smx-border-spin var(--shop-speed, 3s) linear infinite;
    -webkit-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: 0;
}

/* Double ring - two rings at different insets spinning in opposite
   directions (the calc(-1 *) on the already-animating custom property
   gives the second ring its counter-rotation for free). */
[class*="smx-shop-border-double_ring"]::before {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: 14px;
    padding: 2px;
    background: conic-gradient(from var(--smx-ring-angle), var(--ring-colors));
    animation: smx-border-spin var(--shop-speed, 6s) linear infinite;
    -webkit-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: 0;
}
[class*="smx-shop-border-double_ring"]::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 17px;
    padding: 2px;
    background: conic-gradient(from calc(var(--smx-ring-angle) * -1), var(--ring-colors));
    animation: smx-border-spin calc(var(--shop-speed, 6s) * 1.6) linear infinite;
    -webkit-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: 0;
}

/* Shimmer - a diagonal light band sweeping across via animated
   background-position, screen-blended so it brightens rather than
   flatly overlays whatever's underneath. */
@keyframes smx-border-shimmer-move {
    0%   { background-position: -150% 0; }
    100% { background-position: 250% 0; }
}
.smx-shop-border-shimmer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 30%, var(--bc, #2fe6d9) 50%, transparent 70%);
    background-size: 300% 100%;
    animation: smx-border-shimmer-move var(--shop-speed, 2.5s) linear infinite;
    opacity: 0.85;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}

/* Pulse ring - a radar-ping style expanding, fading ring (box-shadow
   spread growing from 0 while its color fades to transparent). */
@keyframes smx-border-pulse-ring {
    0%   { box-shadow: 0 0 0 0 var(--bc, #2fe6d9); }
    100% { box-shadow: 0 0 0 10px transparent; }
}
.smx-shop-border-pulse_ring {
    animation: smx-border-pulse-ring var(--shop-speed, 1.8s) ease-out infinite;
}

/* Static - common-rarity border/avatar_frame: a solid colored outline
   with no animation at all, deliberately the plainest option. */
.smx-shop-border-static {
    box-shadow: 0 0 0 2px var(--bc, #2fe6d9);
}

/* Avatar frames - same techniques, applied to the circular avatar wrap. */
.smx-avatar-frame-glow {
    border-radius: 50%;
    animation: smx-border-glow-pulse var(--shop-speed, 2.4s) ease-in-out infinite;
}
.smx-avatar-frame-pulse {
    border-radius: 50%;
    animation: smx-border-strobe var(--shop-speed, 1.6s) ease-in-out infinite;
}
[class*="smx-avatar-frame-ring"] {
    position: relative;
}
[class*="smx-avatar-frame-ring"]::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(from var(--smx-ring-angle), var(--ring-colors));
    animation: smx-border-spin var(--shop-speed, 5s) linear infinite;
    -webkit-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: 0;
}

/* Same 4 new techniques as the border section above, adapted to the
   circular avatar frame shape. */
[class*="smx-avatar-frame-tracer"]::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    padding: 4px;
    background: conic-gradient(from var(--smx-ring-angle), transparent 0deg, var(--bc, #2fe6d9) 18deg, transparent 50deg, transparent 360deg);
    animation: smx-border-spin var(--shop-speed, 3s) linear infinite;
    -webkit-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: 0;
}
[class*="smx-avatar-frame-double_ring"]::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from var(--smx-ring-angle), var(--ring-colors));
    animation: smx-border-spin var(--shop-speed, 5s) linear infinite;
    -webkit-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: 0;
}
[class*="smx-avatar-frame-double_ring"]::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from calc(var(--smx-ring-angle) * -1), var(--ring-colors));
    animation: smx-border-spin calc(var(--shop-speed, 5s) * 1.6) linear infinite;
    -webkit-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: 0;
}
.smx-avatar-frame-shimmer {
    border-radius: 50%;
}
.smx-avatar-frame-shimmer::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(100deg, transparent 30%, var(--bc, #2fe6d9) 50%, transparent 70%);
    background-size: 300% 100%;
    animation: smx-border-shimmer-move var(--shop-speed, 2.5s) linear infinite;
    opacity: 0.85;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}
.smx-avatar-frame-pulse_ring {
    border-radius: 50%;
    animation: smx-border-pulse-ring var(--shop-speed, 1.8s) ease-out infinite;
}

.smx-avatar-frame-static {
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--bc, #2fe6d9);
}

/* Stat text - reuses the title-rarity keyframes with inline-set colors. */
.smx-shop-text-glow {
    color: var(--shop-c1, #2fe6d9); -webkit-text-fill-color: var(--shop-c1, #2fe6d9);
    text-shadow: 0 0 6px var(--shop-c1, #2fe6d9), 0 0 14px var(--shop-c1, #2fe6d9);
    animation: smx-title-fade-pulse var(--shop-speed, 2.2s) ease-in-out infinite;
}
.smx-shop-text-sweep {
    background-image: linear-gradient(90deg, var(--shop-c1, #2fe6d9), var(--shop-c2, #7c6bff), var(--shop-c1, #2fe6d9));
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: smx-title-gradient-sweep var(--shop-speed, 2.6s) ease-in-out infinite;
}
.smx-shop-text-flicker {
    color: var(--shop-c1, #ff2fd6); -webkit-text-fill-color: var(--shop-c1, #ff2fd6);
    text-shadow: 0 0 6px var(--shop-c1, #ff2fd6), 0 0 14px var(--shop-c1, #ff2fd6);
    animation: smx-title-flicker var(--shop-speed, 1.6s) ease-in-out infinite;
}
.smx-shop-text-static {
    color: var(--shop-c1, #2fe6d9); -webkit-text-fill-color: var(--shop-c1, #2fe6d9);
}

/* Legendary shimmer - a gold diagonal sweep layered on top of whatever
   base technique/rarity effect an item already has, applied to the
   wrapper element (profile card, avatar wrap, sticker wrap, or the
   stat-text element itself) rather than an <img> directly - stickers'
   color effects already animate `filter` on the image, and a second
   animation also targeting `filter` on that same element would just
   overwrite the first rather than combine with it. Living on a
   separate element/pseudo-element sidesteps that entirely, and works
   consistently across all 4 categories with one shared class. */
@keyframes smx-legendary-shimmer-move {
    0%   { background-position: -150% 0; }
    100% { background-position: 250% 0; }
}
.smx-legendary-shimmer {
    position: relative;
}
/* border-radius: inherit on the ::after below only looks at its own
   direct parent's shape - it doesn't reach into a descendant. The
   avatar wrap itself isn't circular (its child .smx-avatar image is,
   via its own border-radius: 50%), so without this override the
   shimmer inherited the wrap's square default instead of the avatar's
   actual circular shape. */
.smx-profile-avatar-wrap.smx-legendary-shimmer::after {
    border-radius: 50%;
}
.smx-legendary-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 30%, #ffd700 50%, transparent 70%);
    background-size: 300% 100%;
    animation: smx-legendary-shimmer-move 4.5s linear infinite;
    opacity: 0.75;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
}

/* Stat-text needs a different approach entirely - it's just glyphs
   with mostly-empty space in their bounding box, so the ::after overlay
   above (built for solid opaque shapes like a card, a circle, or an
   image) rendered as a visible gold rectangle instead of blending into
   the text. A background-clip:text gradient (the obvious next idea,
   same technique the "Sweep" effect uses) turned out wrong too - it
   permanently REPLACES the text's own color/fill for the entire
   animation, not just a moment, so whatever base technique the item
   actually rolled (its own color, its own glow) was never visible at
   all, defeating "color AND animation" for legendary. This uses filter
   instead, a property none of the 4 base stat-text techniques touch
   (glow/flicker animate text-shadow, sweep uses background-clip,
   static just sets color) - so a periodic gold flash can layer on top
   with zero conflict. Applied as an additional class alongside the base
   technique class. Normal color shows the vast majority of the cycle;
   filter: none for most of it means nothing here overrides anything -
   the brief flash is the only moment this class does anything at all. */
@keyframes smx-legendary-text-shine {
    0%, 82%, 100% { filter: none; }
    88%, 94% { filter: brightness(1.6) drop-shadow(0 0 3px #ffd700) drop-shadow(0 0 8px #ffd700) drop-shadow(0 0 14px #ffd700); }
}
.smx-legendary-shimmer-text {
    animation: smx-legendary-text-shine 6s ease-in-out infinite;
}

/* ==========================================================================
   Shop + bounties pages
   ========================================================================== */

.smx-star-balance {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 999px;
    padding: 0.35rem 0.9rem;
    font-weight: 700;
    font-size: 0.9rem;
}

.smx-star-balance-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.smx-star-icon-sm {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: -2px;
}

.smx-shop-featured-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    background: linear-gradient(135deg, rgba(255, 176, 32, 0.12), rgba(124, 107, 255, 0.1));
    border: 1px solid #ffb020;
    border-radius: 12px;
    padding: 1.5rem;
}

.smx-shop-featured-badge {
    position: absolute;
    top: -12px;
    left: 20px;
    background-color: #ffb020;
    color: #0b0f14;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
}

.smx-shop-featured-preview,
.smx-shop-preview {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 12px;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Only clip for stickers specifically - border/avatar_frame ring
   effects intentionally extend a few px beyond their own box via a
   negative-inset pseudo-element, and clipping the shared preview box
   here would cut that ring off at the edge instead of letting it show
   fully. Stickers have no such need and can animate (zoom/swing/bounce)
   beyond their resting size, so THEY need the clip to avoid spilling
   out of frame during animation peaks. */
.smx-shop-preview-sticker {
    overflow: hidden;
}

/* Scoped specifically to the shop grid card context, where the preview
   should fill the card's width - a bare .smx-shop-preview override
   here (as this used to be) leaked into every other use of the class
   too, including the marketplace listing page, which relies on its own
   inline width/height instead. */
.smx-shop-card .smx-shop-preview {
    width: 100%;
    height: 80px;
    margin-bottom: 0.75rem;
}

.smx-shop-sticker-preview-img {
    max-width: 85%;
    max-height: 85%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Marketplace listing detail page - a large, dedicated preview
   showing just the item, distinct from the small shop-grid preview
   box. Sized well beyond the grid card's 90px so the item is the
   clear visual focus, with details stacked below rather than
   squeezed into a side column. */
.smx-marketplace-hero-preview {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
    border-radius: 16px;
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    display: flex;
    align-items: center;
    justify-content: center;
}
.smx-marketplace-hero-preview.smx-shop-preview-sticker {
    overflow: hidden;
}
.smx-marketplace-hero-preview .smx-shop-sticker-preview-img {
    width: 80%;
    height: 80%;
    max-width: none;
    max-height: none;
    /* object-fit scales the image to fit its box while preserving
       aspect ratio, regardless of the sticker file's own natural
       dimensions - more robust than the shop grid's max-width/height
       percentage approach, which assumes a roughly-square source image
       and can render inconsistently for anything else. */
    object-fit: contain;
}
.smx-marketplace-hero-preview .smx-shop-frame-preview-circle {
    width: 160px;
    height: 160px;
}

.smx-shop-frame-preview-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--smx-panel);
    border: 2px solid var(--smx-border);
}

.smx-shop-featured-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.smx-shop-item-name {
    font-weight: 700;
    color: var(--smx-text);
}

.smx-shop-item-price {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
    color: var(--smx-accent);
    margin-bottom: 0.4rem;
}

.smx-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}

.smx-shop-card {
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    position: relative;
    /* Grid items already stretch to fill row height (default grid
       behavior, no align-items override on .smx-shop-grid) - flex here
       is what actually anchors the Buy button to the bottom of that
       stretched height, so a longer sticker name wrapping to 2 lines no
       longer shifts its button out of alignment with shorter neighbors
       in the same row. */
    display: flex;
    flex-direction: column;
}

.smx-shop-card .smx-shop-buy-btn,
.smx-shop-card .smx-shop-equip-btn {
    margin-top: auto;
}

.smx-shop-rarity-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    z-index: 3;
}
.smx-shop-rarity-common {
    background-color: rgba(198, 206, 216, 0.15);
    color: #c8ced8;
    border: 1px solid rgba(198, 206, 216, 0.4);
}
.smx-shop-rarity-rare {
    background-color: rgba(63, 155, 255, 0.15);
    color: #3f9bff;
    border: 1px solid rgba(63, 155, 255, 0.5);
}
.smx-shop-rarity-legendary {
    background-color: rgba(255, 176, 32, 0.18);
    color: #ffd700;
    border: 1px solid rgba(255, 215, 0, 0.6);
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

/* Marketplace highlight badges (New/Hot) - opposite corner from the
   rarity badge (which sits top-right) so the two never collide on a
   listing that happens to be both e.g. legendary and newly listed. */
.smx-marketplace-highlight-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    z-index: 3;
}
.smx-marketplace-badge-new {
    background-color: rgba(63, 155, 255, 0.18);
    color: #6db4ff;
    border: 1px solid rgba(63, 155, 255, 0.5);
}
.smx-marketplace-badge-hot {
    background-color: rgba(255, 90, 60, 0.18);
    color: #ff7a5c;
    border: 1px solid rgba(255, 90, 60, 0.55);
}

.smx-collapse-chevron {
    transition: transform 0.2s ease;
    display: inline-block;
}
button[aria-expanded="true"] .smx-collapse-chevron {
    transform: rotate(180deg);
}

.smx-shop-stock-note {
    font-size: 0.72rem;
    color: var(--smx-muted);
    margin-bottom: 0.4rem;
}

.smx-shop-featured-card {
    position: relative;
}

/* ---- Bounties ---- */

.smx-bounty-card {
    position: relative;
}

.smx-bounty-complete {
    border-color: #4fd07a;
}

.smx-bounty-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.smx-bounty-mode-badge {
    background-color: var(--smx-bg);
    border: 1px solid var(--smx-border);
    color: var(--smx-accent);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.smx-bounty-star-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-left: auto;
}

.smx-bounty-reward {
    font-weight: 700;
    color: var(--smx-accent);
}

.smx-bounty-song {
    font-weight: 700;
    color: var(--smx-text);
    margin-bottom: 0.1rem;
}

.smx-bounty-done-label {
    color: #4fd07a;
    font-weight: 700;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.smx-bounty-completions {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--smx-border);
}

.smx-bounty-avatar-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.smx-bounty-more {
    font-size: 0.7rem;
    color: var(--smx-muted);
    margin-left: 0.2rem;
}

.smx-avatar-frame-preview-wrap {
    display: inline-block;
    position: relative;
}

.smx-avatar-frame-preview-circle {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--smx-bg);
    border: 2px solid var(--smx-border);
    vertical-align: middle;
}

/* ==========================================================================
   Sticker filters - animated overlays applied to sticker <img> elements.
   Color-parametrized via --shop-c1 where relevant, same inline-custom-
   property pattern as the other procedural shop cosmetics.
   ========================================================================== */

@keyframes smx-sticker-glow-pulse {
    0%, 100% { filter: drop-shadow(0 0 3px var(--shop-c1, #2fe6d9)) drop-shadow(0 0 3px var(--shop-c1, #2fe6d9)); }
    50%      { filter: drop-shadow(0 0 10px var(--shop-c1, #2fe6d9)) drop-shadow(0 0 14px var(--shop-c1, #2fe6d9)); }
}
@keyframes smx-sticker-rainbow {
    0%   { filter: hue-rotate(0deg) saturate(1.3); }
    100% { filter: hue-rotate(360deg) saturate(1.3); }
}
@keyframes smx-sticker-shake {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-6deg); }
    75%      { transform: rotate(6deg); }
}
@keyframes smx-sticker-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}
@keyframes smx-sticker-spin {
    to { transform: rotate(360deg); }
}

.smx-sticker-filter-glow {
    animation: smx-sticker-glow-pulse var(--shop-speed, 1.8s) ease-in-out infinite;
}
.smx-sticker-filter-rainbow {
    animation: smx-sticker-rainbow var(--shop-speed, 3s) linear infinite;
}
/* Shake/pulse/spin apply to the inner <img>, not the outer positioned
   wrap - the wrap already carries the user's own placement transform
   (position + their manually chosen rotation/scale), and animating
   transform on that same element would fight with and override it.
   The inner image has no transform of its own, so these layer cleanly
   on top of the wrap's positioning instead of replacing it. */
.smx-sticker-filter-shake {
    animation: smx-sticker-shake var(--shop-speed, 0.4s) ease-in-out infinite;
}
.smx-sticker-filter-pulse {
    animation: smx-sticker-pulse var(--shop-speed, 1.4s) ease-in-out infinite;
}
.smx-sticker-filter-spin {
    animation: smx-sticker-spin var(--shop-speed, 4s) linear infinite;
}

@keyframes smx-sticker-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
@keyframes smx-sticker-wobble {
    0%, 100% { transform: skewX(0deg) rotate(0deg); }
    25%      { transform: skewX(-8deg) rotate(-3deg); }
    75%      { transform: skewX(8deg) rotate(3deg); }
}
@keyframes smx-sticker-flicker {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}
@keyframes smx-sticker-zoom {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.35); }
}
@keyframes smx-sticker-swing {
    0%, 100% { transform: rotate(-14deg); }
    50%      { transform: rotate(14deg); }
}

.smx-sticker-filter-bounce {
    animation: smx-sticker-bounce var(--shop-speed, 0.6s) ease-in-out infinite;
}
.smx-sticker-filter-wobble {
    animation: smx-sticker-wobble var(--shop-speed, 0.5s) ease-in-out infinite;
}
.smx-sticker-filter-flicker {
    animation: smx-sticker-flicker var(--shop-speed, 0.3s) steps(1, end) infinite;
}
.smx-sticker-filter-zoom {
    animation: smx-sticker-zoom var(--shop-speed, 1s) ease-in-out infinite;
}
.smx-sticker-filter-swing {
    animation: smx-sticker-swing var(--shop-speed, 1.2s) ease-in-out infinite;
}

/* New motion techniques - bounce_in/bounce_out/swing_in periodically
   collapse and re-emerge (symmetric loops: 0% and 100% match the
   resting state, so the "vanish and return" reads as intentional
   rather than a jarring reset at the loop boundary). Flip is a 2D
   perspective flip. Pop is a sharper, snappier scale hit than the
   existing gentle "pulse". */
@keyframes smx-sticker-bounce-in {
    0%, 100% { transform: scale(1); }
    40%      { transform: scale(0.3); }
    60%      { transform: scale(1.2); }
    75%      { transform: scale(0.92); }
    90%      { transform: scale(1.03); }
}
@keyframes smx-sticker-bounce-out {
    0%, 100% { transform: scale(1); }
    20%      { transform: scale(1.15); }
    50%      { transform: scale(0); }
    80%      { transform: scale(1.1); }
}
@keyframes smx-sticker-swing-in {
    0%, 100% { transform: rotate(0deg) scale(1); }
    30%      { transform: rotate(-25deg) scale(0.7); }
    50%      { transform: rotate(15deg) scale(0.85); }
    70%      { transform: rotate(-8deg) scale(0.95); }
    85%      { transform: rotate(4deg) scale(1.02); }
}
@keyframes smx-sticker-flip {
    0%, 100% { transform: perspective(400px) rotateY(0deg); }
    50%      { transform: perspective(400px) rotateY(180deg); }
}
@keyframes smx-sticker-pop {
    0%, 40%, 100% { transform: scale(1); }
    10%           { transform: scale(1.4); }
    20%           { transform: scale(0.9); }
    30%           { transform: scale(1.05); }
}
.smx-sticker-filter-bounce_in {
    animation: smx-sticker-bounce-in var(--shop-speed, 2.2s) ease-in-out infinite;
}
.smx-sticker-filter-bounce_out {
    animation: smx-sticker-bounce-out var(--shop-speed, 2.2s) ease-in-out infinite;
}
.smx-sticker-filter-swing_in {
    animation: smx-sticker-swing-in var(--shop-speed, 2s) ease-in-out infinite;
}
.smx-sticker-filter-flip {
    animation: smx-sticker-flip var(--shop-speed, 2.4s) ease-in-out infinite;
}
.smx-sticker-filter-pop {
    animation: smx-sticker-pop var(--shop-speed, 1.6s) ease-in-out infinite;
}

/* New color techniques - invert (binary color inversion toggle),
   chromatic (fixed red/cyan drop-shadow offsets simulating RGB channel
   split), flash (brightness-based flashbulb strobe, distinct from the
   opacity-based "flicker"), neon (more intense/electric take on glow -
   adds saturate+brightness on top of the same drop-shadow-halo idea). */
@keyframes smx-sticker-invert {
    0%, 100% { filter: invert(0); }
    50%      { filter: invert(1); }
}
@keyframes smx-sticker-chromatic {
    0%, 100% { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 0 transparent); }
    25%      { filter: drop-shadow(2px 0 0 #ff2f6e) drop-shadow(-2px 0 0 #2fe6d9); }
    50%      { filter: drop-shadow(-3px 0 0 #ff2f6e) drop-shadow(3px 0 0 #2fe6d9); }
    75%      { filter: drop-shadow(1px 0 0 #ff2f6e) drop-shadow(-1px 0 0 #2fe6d9); }
}
@keyframes smx-sticker-flash {
    0%, 85%, 100% { filter: brightness(1); }
    90%, 95%      { filter: brightness(3) contrast(1.5); }
}
@keyframes smx-sticker-neon {
    0%, 100% { filter: drop-shadow(0 0 4px var(--shop-c1, #ff3fd6)) drop-shadow(0 0 8px var(--shop-c1, #ff3fd6)) saturate(1.5) brightness(1.1); }
    50%      { filter: drop-shadow(0 0 10px var(--shop-c1, #ff3fd6)) drop-shadow(0 0 20px var(--shop-c1, #ff3fd6)) saturate(2) brightness(1.3); }
}
.smx-sticker-filter-invert {
    animation: smx-sticker-invert var(--shop-speed, 1.6s) steps(1, end) infinite;
}
.smx-sticker-filter-chromatic {
    animation: smx-sticker-chromatic var(--shop-speed, 0.5s) steps(1, end) infinite;
}
.smx-sticker-filter-flash {
    animation: smx-sticker-flash var(--shop-speed, 1.8s) ease-in-out infinite;
}
.smx-sticker-filter-neon {
    animation: smx-sticker-neon var(--shop-speed, 1.5s) ease-in-out infinite;
}

/* Color techniques - glitch (jumpy RGB/hue corruption, using stepped
   not smooth timing for an authentic "digital glitch" feel) and matrix
   (green digital scan tint, via sepia -> hue-rotate into green territory). */
@keyframes smx-sticker-glitch {
    0%, 100% { filter: hue-rotate(0deg) contrast(1) saturate(1); }
    10%      { filter: hue-rotate(90deg) contrast(1.5) saturate(2); }
    20%      { filter: hue-rotate(-60deg) contrast(0.8) saturate(1.5); }
    30%      { filter: hue-rotate(180deg) contrast(1.3) saturate(0.7); }
    40%      { filter: hue-rotate(-120deg) contrast(1) saturate(2.5); }
    50%      { filter: hue-rotate(45deg) contrast(1.6) saturate(1); }
    60%, 100% { filter: hue-rotate(0deg) contrast(1) saturate(1); }
}
@keyframes smx-sticker-matrix {
    0%, 100% { filter: sepia(1) hue-rotate(70deg) saturate(4) brightness(0.9); }
    50%      { filter: sepia(1) hue-rotate(90deg) saturate(6) brightness(1.3); }
}
.smx-sticker-filter-glitch {
    animation: smx-sticker-glitch var(--shop-speed, 1.8s) steps(1, end) infinite;
}
.smx-sticker-filter-matrix {
    animation: smx-sticker-matrix var(--shop-speed, 1.2s) ease-in-out infinite;
}

/* Tint - a genuinely randomized single-hue color wash, distinct from
   rainbow (cycles the whole spectrum) and matrix (fixed to green) -
   this is what actually gives "randomly colored" variety per item,
   since --tint-hue is a random 0-360 value set per generated sticker. */
@keyframes smx-sticker-tint {
    0%, 100% { filter: sepia(1) hue-rotate(var(--tint-hue, 0deg)) saturate(3) brightness(1); }
    50%      { filter: sepia(1) hue-rotate(var(--tint-hue, 0deg)) saturate(4) brightness(1.2); }
}
.smx-sticker-filter-tint {
    animation: smx-sticker-tint var(--shop-speed, 2s) ease-in-out infinite;
}

.smx-mod-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    background-color: var(--smx-panel);
    border: 1px solid var(--smx-border);
    border-radius: 6px;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 2px;
}

.smx-mod-autocomplete-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--smx-text);
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    cursor: pointer;
}

.smx-mod-autocomplete-item:hover {
    background-color: var(--smx-bg);
    color: var(--smx-accent);
}