#flairStoreModal {
    --store-bg: #09111d;
    --store-surface: #101b2a;
    --store-surface-raised: #162335;
    --store-border: #263950;
    --store-border-bright: #3b5674;
    --store-text: #eef4fb;
    --store-muted: #91a3b8;
    --store-accent: #77adff;
    --store-accent-strong: #4d8ef7;
    --store-gold: #f2c968;
    color: var(--store-text);
}
#flairStoreModal .text-muted { color: var(--store-muted) !important; }
#flairStoreModal .storefront-shell {
    overflow: hidden;
    color: var(--store-text);
    background: var(--store-bg);
    border: 1px solid #324861;
    border-radius: 24px;
    box-shadow: 0 28px 90px #02060cbf, 0 0 0 1px #ffffff08 inset;
}
#flairStoreModal .modal-dialog { max-width: min(1180px, calc(100vw - 28px)); }
.storefront-header {
    padding: 18px 22px;
    border-bottom: 1px solid #26384c;
    background: linear-gradient(135deg, #152338, #0d1726 68%);
}
.storefront-heading { display: flex; align-items: center; gap: 12px; }
.storefront-heading-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #4b6683;
    border-radius: 13px;
    color: var(--store-gold);
    background: linear-gradient(145deg, #24364c, #111d2c);
    box-shadow: inset 0 1px #ffffff17, 0 6px 18px #0005;
}
.storefront-heading .modal-title { font-size: 1.12rem; font-weight: 750; letter-spacing: -.015em; }
#flairStoreModal .btn-close { filter: invert(1) grayscale(1); opacity: .72; }
.storefront-body {
    padding: 22px;
    background:
        radial-gradient(circle at 92% -8%, #315b8e26, transparent 31%),
        linear-gradient(180deg, #0d1724, var(--store-bg) 46%);
}
.storefront-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 17px 18px;
    border: 1px solid var(--store-border);
    border-radius: 17px;
    background: linear-gradient(125deg, #142338, #101b29 70%);
    box-shadow: inset 0 1px #ffffff0b;
}
.storefront-copy { max-width: 670px; }
.storefront-copy p { margin: 0; }
.storefront-copy #flair-store-intro { color: #e6eef8; font-size: .95rem; font-weight: 600; }
.storefront-copy #flair-store-intro + p { margin-top: 6px; line-height: 1.5; }
.storefront-wallet {
    flex: 0 0 auto;
    min-width: 184px;
    padding: 12px 14px;
    border: 1px solid #4f4a34;
    border-radius: 14px;
    background: linear-gradient(145deg, #252718, #171d20);
    box-shadow: inset 0 1px #fff1a51c;
}
.storefront-wallet > span { display: block; color: #a8b1b4; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.storefront-wallet strong { display: flex; align-items: baseline; gap: 7px; margin: 3px 0 9px; color: #fff0b5; font-size: 1.28rem; font-variant-numeric: tabular-nums; }
.storefront-wallet strong i { color: var(--store-gold); font-size: .86rem; }
.storefront-wallet strong small { color: #bcae7e; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
.storefront-wallet .btn { width: 100%; }
.storefront-wallet-inline { display: inline-block; margin: 6px 0 12px; }
#flairStoreModal .storefront-wallet .btn,
#flairStoreModal .storefront-footer .btn,
#flairStoreModal .flair-equipped-preview .btn {
    border-color: #3b526c;
    color: #c8d7e8;
    background: #142235;
    box-shadow: none;
}
#flairStoreModal .storefront-wallet .btn:hover,
#flairStoreModal .storefront-footer .btn:hover,
#flairStoreModal .flair-equipped-preview .btn:hover { border-color: #6789ae; color: white; background: #1c3049; }
.storefront-sections,
.storefront-subnav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.storefront-sections::-webkit-scrollbar,
.storefront-subnav::-webkit-scrollbar { display: none; }
.storefront-sections { margin-top: 20px; padding: 2px 0 10px; border-bottom: 1px solid #25364a; }
.storefront-subnav { margin: 10px 0 4px; }
#flairStoreModal .storefront-section,
#flairStoreModal .storefront-tab {
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #9fb0c4;
    background: transparent;
    font-size: .82rem;
    font-weight: 700;
    box-shadow: none;
}
#flairStoreModal .storefront-section { padding: 8px 14px; }
#flairStoreModal .storefront-tab { padding: 6px 12px; font-size: .76rem; }
#flairStoreModal .storefront-section:hover,
#flairStoreModal .storefront-tab:hover { color: #eef5ff; background: #19283a; border-color: #30455e; }
#flairStoreModal .storefront-section.active {
    color: white;
    border-color: #6599e1;
    background: linear-gradient(135deg, #346ebd, #27538c);
    box-shadow: 0 5px 15px #173c7166, inset 0 1px #ffffff26;
}
#flairStoreModal .storefront-tab.active { color: #d9eaff; border-color: #3f5d7e; background: #1a2d44; }
.flair-store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; margin-top: 17px; }
.flair-store-card {
    position: relative;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--store-border);
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--store-text);
    background: linear-gradient(160deg, var(--store-surface-raised), var(--store-surface));
    box-shadow: 0 10px 24px #02071166, inset 0 1px #ffffff0a;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.flair-store-card:hover { transform: translateY(-2px); border-color: var(--store-border-bright); box-shadow: 0 14px 32px #0207118c, inset 0 1px #ffffff10; }
.flair-store-card.is-equipped { border-color: #b6984e; box-shadow: 0 0 0 1px #d4b66240, 0 14px 32px #0207118c; }
.cosmetic-new-badge { position: absolute; top: 20px; left: 20px; z-index: 5; border-radius: 999px; padding: 4px 8px; background: #f5cc69; color: #29200a; font-size: .62rem; font-weight: 850; letter-spacing: .08em; line-height: 1.2; pointer-events: none; box-shadow: 0 3px 10px #0007; }
.flair-store-card p { font-size: .8rem; margin: 0; }
.flair-store-preview {
    min-height: 174px;
    padding: 18px 10px;
    border: 1px solid #2d4055;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: white;
    text-align: center;
    background:
        radial-gradient(circle at 50% 20%, #29445c, transparent 52%),
        linear-gradient(145deg, #132231, #0a121d);
    box-shadow: inset 0 1px #ffffff12, inset 0 -20px 45px #02070d66;
}
.flair-store-preview .user-flair { font-size: .8rem; padding: 7px 10px; box-shadow: 0 5px 16px #0006; }
#flairStoreModal .flair-store-preview.profile-surface[data-profile-background="plain"] { color: #fff; background-color: #132231; }
.flair-store-card-title { font-size: .98rem; font-weight: 760; letter-spacing: -.01em; }
.flair-store-card-description { min-height: 2.5em; color: var(--store-muted); line-height: 1.55; }
.flair-store-price { color: var(--store-gold); font-size: .78rem; font-weight: 800; letter-spacing: .025em; }
.flair-store-card button { margin-top: auto; }
.flair-card-actions { width: 100%; }
#flairStoreModal .flair-store-action {
    width: 100%;
    min-height: 38px;
    border: 1px solid #5f94dd;
    border-radius: 10px;
    color: white;
    background: linear-gradient(135deg, #3e80dc, #2863b4);
    font-weight: 750;
    box-shadow: inset 0 1px #ffffff2b, 0 5px 14px #0b3b7c55;
}
#flairStoreModal .flair-store-action:hover:not(:disabled) { border-color: #91bdff; background: linear-gradient(135deg, #5395ef, #3373c9); }
#flairStoreModal .is-owned:not(.is-equipped) .flair-store-action { color: #d8e9ff; border-color: #3f6288; background: #172b42; box-shadow: none; }
#flairStoreModal .flair-store-action:disabled { color: #77889a; border-color: #2c3b4c; background: #111b28; box-shadow: none; opacity: 1; }
#flairStoreModal .is-equipped .flair-store-action:disabled { color: #dfcf99; border-color: #665a36; background: #26271f; opacity: 1; }
.user-flair[style*="#00dbc7"], .user-flair[style*="#ffce32"] { color: #15212b; }

.flair-equipped-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid #25384e; border-radius: 12px; color: #cbd8e6; background: #101c2a; font-size: .8rem; }
.flair-custom-card { grid-column: 1 / -1; max-width: 560px; width: 100%; }

#flair-store-status { min-height: 1.2em; color: #9eb6cf; }
#flair-store-status.flair-store-error { color: #ff9e9e; font-weight: 650; }
#flairStoreModal #flair-store-confirm { border-color: #405671; color: #dce8f5; background: #162538; }
#flairStoreModal .flair-confirm-message { width: 100%; color: #91a3b8 !important; line-height: 1.45; }
#flairStoreModal .form-control {
    border-color: #354b64;
    color: #eef4fb;
    background: #0b1522;
    box-shadow: inset 0 1px 4px #0004;
}
#flairStoreModal .form-control:focus { border-color: #6fa4ec; box-shadow: 0 0 0 3px #4c8fe52d; }
#flairStoreModal .form-control::placeholder { color: #667a90; }
.storefront-footer { padding: 12px 20px; border-top-color: #27384b; background: #0c1521; }
.storefront-collection { max-width: 1220px; padding: 26px !important; border: 1px solid #2b4058; border-radius: 24px; color: var(--store-text); background: linear-gradient(145deg, #101c2a, #09111d); box-shadow: 0 20px 60px #07111e2b; }
.storefront-collection h1 { margin: 0; color: #f3f7fc; font-size: clamp(1.7rem, 4vw, 2.35rem); letter-spacing: -.035em; }
.storefront-collection > p { max-width: 760px; color: var(--store-muted); line-height: 1.6; }

.border-store-preview { border: 16px solid transparent; border-image-slice: 64; border-image-repeat: stretch; min-height: 130px; display: grid; place-items: center; border-radius: 0; }
.spectate-video-wrap.broadcast-bordered { box-sizing: border-box; border: 12px solid transparent; border-image-slice: 64; border-image-repeat: stretch; }

.border-art-host { position: relative; }
.border-art-overlay { position: absolute; box-sizing: border-box; border-style: solid; border-color: transparent; border-width: 1px; border-image-repeat: stretch; pointer-events: none; z-index: 2; }
.border-store-preview.border-overlay-preview { border: 0; min-height: 160px; }
.border-hover-preview { position: fixed; z-index: 1080; width: min(540px, calc(100vw - 24px), calc((100dvh - 80px) * 1.7778)); padding: 10px; background: #17222e; color: white; border: 1px solid #8190a0; border-radius: 12px; box-shadow: 0 12px 36px #0008; pointer-events: none; text-align: center; }
.border-hover-preview .border-hover-art { width: 100%; aspect-ratio: 16 / 9; min-height: 0; box-sizing: border-box; display: grid; place-items: center; background: radial-gradient(ellipse at center, #344c60, #101923); color: #b9c9d5; }
.border-hover-preview strong { display: block; margin-top: 6px; }

/* Pale curated flair colors keep readable labels in server and client-rendered badges. */
.user-flair[style*="#00dbc7" i],
.user-flair[style*="rgb(0, 219, 199)"],
.user-flair[style*="#ffce32" i],
.user-flair[style*="rgb(255, 206, 50)"],
.user-flair[style*="#eee7d8" i],
.user-flair[style*="rgb(238, 231, 216)"],
.user-flair[style*="#f2b6ca" i],
.user-flair[style*="rgb(242, 182, 202)"],
.user-flair[style*="#c4b5fd" i],
.user-flair[style*="rgb(196, 181, 253)"],
.user-flair[style*="#a5e7f0" i],
.user-flair[style*="rgb(165, 231, 240)"],
.user-flair[style*="#c0f52f" i],
.user-flair[style*="rgb(192, 245, 47)"] { color: #15212b; }

.salt-box-panel { grid-column: 1 / -1; width: 100%; box-sizing: border-box; text-align: center; padding: 24px; border-radius: 18px; color: #f5e8cd; background: radial-gradient(ellipse at 50% 25%, #4e395f, #1b2135 60%, #101725); border: 1px solid #b89650; overflow: hidden; }
.salt-box-panel > p { max-width: 550px; margin: 12px auto; color: #d5c9dd; }
.salt-box-panel button { margin: 6px; }
.salt-box-stage { height: 175px; position: relative; display: grid; place-items: center; isolation: isolate; pointer-events: none; }
.salt-box-stage::before { content: ''; position: absolute; width: 230px; height: 230px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, #ffcb6520 0deg 12deg, transparent 12deg 30deg); opacity: .5; z-index: -1; }
.salt-box-chest { width: 108px; height: 94px; display: grid; place-items: center; font-size: 56px; color: #fff4bf; border-radius: 15px; border: 3px solid #f6c96b; background: linear-gradient(135deg, #ae761f, #50321b); box-shadow: 0 12px 30px #0008, inset 0 0 20px #ffe1a633; transform: rotate(-5deg); }
.salt-box-stage.opening .salt-box-chest { animation: salt-box-rumble .2s infinite alternate; }
.salt-box-stage.opening::before { animation: salt-box-rays 2s linear infinite; }
.salt-box-stage.revealed .salt-box-chest { animation: salt-box-pop .65s ease-out both; background: linear-gradient(135deg, #ffe29b, #a36a1a); color: white; }
.salt-box-stage.revealed::before { opacity: 1; animation: salt-box-rays 12s linear infinite; }
.salt-box-result h3 { color: #ffdd86; margin: 12px 0; }
.salt-box-result { position: relative; }
.salt-box-swatch { display: block; width: 90px; height: 60px; border-radius: 12px; border: 1px solid #ffffff60; box-shadow: inset 0 10px 20px #ffffff30, 0 4px 15px #0006; }
.salt-box-sample .user-flair { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.salt-box-sample { position: relative; width: 220px; height: 150px; max-width: 100%; margin: 18px auto; display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 28px; background: #152030; border-radius: 8px; }
.salt-box-history { margin-top: 24px; border-top: 1px solid #ffffff25; padding-top: 16px; color: #d5c9dd; font-size: .8rem; }
@keyframes salt-box-rumble { from { transform: translateX(-4px) rotate(-7deg) scale(1); } to { transform: translateX(4px) rotate(7deg) scale(1.06); } }
@keyframes salt-box-rays { to { transform: rotate(360deg); } }
@keyframes salt-box-pop { 0% { transform: scale(.7); opacity: .5; } 65% { transform: scale(1.2) rotate(7deg); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .salt-box-stage::before, .salt-box-stage .salt-box-chest { animation: none !important; } }

/* Salt Box uses one fixed-height reveal area; history is paged instead of growing. */
#flairStoreModal.salt-box-mode .modal-dialog { height: calc(100dvh - 2rem); margin-top: 1rem; margin-bottom: 1rem; }
#flairStoreModal.salt-box-mode .modal-content { height: 100%; }
#flairStoreModal.salt-box-mode .modal-body { display: flex; flex-direction: column; min-height: 0; }
#flairStoreModal.salt-box-mode #flair-store-intro,
#flairStoreModal.salt-box-mode #flair-store-intro + p,
#flairStoreModal.salt-box-mode .flair-equipped-preview { display: none; }
#flairStoreModal.salt-box-mode .storefront-copy { display: none; }
#flairStoreModal.salt-box-mode .storefront-hero { justify-content: flex-end; padding: 0; border: 0; background: transparent; box-shadow: none; }
#flairStoreModal.salt-box-mode #flair-store-items { flex: 1; min-height: 0; margin-top: 8px; }
.salt-box-panel { padding: 12px 16px; display: flex; flex-direction: column; min-height: 0; }
.salt-box-panel > p { margin: 0 auto 8px; font-size: .85rem; }
.salt-box-visual { display: flex; align-items: center; justify-content: center; gap: 20px; flex: 1; min-height: 135px; }
.salt-box-stage { flex: 0 1 220px; min-width: 100px; height: 145px; }
.salt-box-stage::before { width: 150px; height: 150px; }
.salt-box-stage.revealed:has(.salt-box-sample) .salt-box-chest { display: none; }
.salt-box-sample { width: 180px; height: 125px; margin: 0; font-size: 22px; pointer-events: auto; }
.salt-box-result { max-width: 350px; font-size: .9rem; }
.salt-box-result:empty { display: none; }
.salt-box-result h3 { font-size: 1.35rem; margin: 4px 0; }
.salt-box-result p { margin-bottom: 6px; }
.salt-box-history { flex: none; margin-top: 6px; padding-top: 4px; font-size: .75rem; }
.salt-box-history p { margin: 0; }
.salt-box-history button { margin: 0 8px 4px; padding: 0 8px; }
@media (max-width: 575px), (max-height: 650px) {
    #flairStoreModal.salt-box-mode .modal-dialog { height: calc(100dvh - 1rem); margin: .5rem; }
    #flairStoreModal.salt-box-mode .modal-body { padding: 8px; }
    #flairStoreModal.salt-box-mode .modal-header, #flairStoreModal.salt-box-mode .modal-footer { padding: 6px 12px; }
    .salt-box-panel { padding: 8px; }
    .salt-box-visual { gap: 8px; min-height: 100px; }
    .salt-box-stage { flex-basis: 100px; height: 105px; }
    .salt-box-stage::before { width: 100px; height: 100px; }
    .salt-box-chest { width: 70px; height: 65px; font-size: 38px; }
    .salt-box-sample { width: 100px; height: 95px; font-size: 16px; }
    .salt-box-result { font-size: .8rem; }
    .salt-box-result h3 { font-size: 1.1rem; }
    .salt-box-panel button { padding: 4px 8px; font-size: .85rem; margin: 3px; }
}

.flair-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.flair-store-card .flair-card-actions button { margin-top: 0; }
.flair-confirm-cancel { animation: flair-confirm-in .15s ease-out; }
.flair-confirm-message { margin: 0; }
@keyframes flair-confirm-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 767px) {
    .storefront-header { padding: 14px 16px; }
    .storefront-heading-icon { width: 38px; height: 38px; border-radius: 11px; }
    .storefront-body { padding: 14px; }
    .storefront-hero { align-items: stretch; flex-direction: column; gap: 14px; padding: 15px; }
    .storefront-wallet { width: 100%; min-width: 0; }
    .storefront-wallet strong { margin-bottom: 7px; }
    .storefront-sections { margin-top: 14px; }
    .flair-store-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; }
    .flair-store-preview { min-height: 148px; }
    .storefront-collection { padding: 16px !important; border-radius: 18px; }
    #flairStoreModal.salt-box-mode .storefront-wallet { width: auto; min-width: 184px; }
}
@media (max-width: 460px) {
    #flairStoreModal .modal-dialog { max-width: calc(100vw - 12px); margin: 6px auto; }
    #flairStoreModal .storefront-shell { border-radius: 18px; }
    .flair-store-grid { grid-template-columns: 1fr; }
    .flair-store-preview { min-height: 164px; }
    .storefront-footer { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .flair-confirm-cancel { animation: none; }
    .flair-store-card { transition: none; }
    .flair-store-card:hover { transform: none; }
}