/* \u2500\u2500 Reset & page \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
#msv-locker-wrap [hidden] { display: none !important; }

body.msv-locker-page #wpadminbar { display: none !important; }
body.msv-locker-page {
    background: #080d1a;
    overflow-x: hidden;
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
}

/* \u2500\u2500 Locker root \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-locker {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #e8e8e8;
    background: transparent;
    min-height: 100vh;
    width: 100%;
    position: relative;
}

/* \u2500\u2500 Loading / guest / wrong-role \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-locker-loading,
.msv-locker-guest,
.msv-locker-wrong-role {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    flex-direction: column;
    gap: 16px;
    padding: 2rem;
    text-align: center;
}

.msv-locker-spinner {
    width: 32px; height: 32px;
    border: 2px solid rgba(255,255,255,0.08);
    border-top-color: var(--msv-accent-400, #378ADD);
    border-radius: 50%;
    animation: msv-spin 0.7s linear infinite;
}
.msv-spinner-sm { width: 20px; height: 20px; }

@keyframes msv-spin { to { transform: rotate(360deg); } }

.msv-state-icon { font-size: 2.5rem; }
.msv-locker-state-inner h2 { font-size: 1.3rem; font-weight: 500; color: #fff; margin: 0 0 8px; }
.msv-locker-state-inner p  { font-size: 0.9rem; color: #888; margin: 0 0 20px; }

/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500;
    border: none; cursor: pointer; transition: opacity 0.15s;
    font-family: inherit;
}
.msv-btn:active { opacity: 0.8; }
.msv-btn-primary  { background: var(--msv-accent-500, #185FA5); color: #fff; }
.msv-btn-ghost    { background: transparent; border: 0.5px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); }
.msv-save-msg     { font-size: 12px; color: var(--msv-accent-400, #378ADD); }

.msv-pill-btn {
    padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
    background: rgba(255,255,255,0.06); border: 0.5px solid rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.55); cursor: pointer; transition: all 0.12s;
    font-family: inherit;
}
.msv-pill-btn.active {
    background: var(--msv-accent-400, #378ADD);
    border-color: var(--msv-accent-400, #378ADD);
    color: #fff;
}

/* \u2500\u2500 Main locker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-locker-main {
    display: block;
    min-height: 100vh;
    position: relative;
}

/* \u2500\u2500 Top bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-locker-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px 6px;
    position: relative;
    z-index: 2;
    /* Scrim: subtle gradient so topbar always reads regardless of bg */
    --msv-tb-color: var(--msv-topbar-color, rgba(255,255,255,0.85));
    --msv-tb-muted: var(--msv-topbar-muted, rgba(255,255,255,0.45));
    --msv-tb-border: var(--msv-topbar-border, rgba(255,255,255,0.18));
}
.msv-locker-topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0) 100%);
    pointer-events: none;
    z-index: -1;
}
.msv-locker-home-link {
    font-size: 12px;
    color: var(--msv-tb-muted);
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: color 0.2s;
}
.msv-locker-home-link:hover { color: var(--msv-tb-color); }
.msv-locker-topbar-label {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 26px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--msv-tb-color);
    text-shadow:
        0 1px 0 rgba(255,255,255,0.2),
        0 -1px 0 rgba(0,0,0,0.4),
        0 2px 10px rgba(0,0,0,0.5),
        0 0 24px rgba(0,0,0,0.2);
    line-height: 1;
}
.msv-locker-edit-btn {
    font-size: 11px; padding: 4px 12px;
    border-radius: 20px;
    border: 0.5px solid var(--msv-tb-border);
    background: rgba(0,0,0,0.15);
    color: var(--msv-tb-muted);
    cursor: pointer; font-family: inherit;
    transition: all 0.12s;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.msv-locker-edit-btn.msv-edit-btn-active {
    background: rgba(55,138,221,0.2);
    border-color: rgba(55,138,221,0.35);
    color: var(--msv-accent-300, #85B7EB);
}

/* \u2500\u2500 Grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-locker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 44px;
    gap: 7px;
    padding: 8px 12px 80px;
    position: relative;
    z-index: 1;
}

/* \u2500\u2500 Tiles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-locker-wrap, #msv-locker-wrap {
    --msv-card-font-family: system-ui,-apple-system,sans-serif;
    --msv-card-font-weight: 500;
    --msv-card-font-size:   9.5px;
}

.msv-tile {
    border-radius: 14px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 6px; cursor: pointer;
    padding: 10px 8px;
    position: relative; overflow: hidden;
    transition: transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    background: var(--msv-surface-bg, #111827);
    border: 0.5px solid var(--msv-surface-border, rgba(255,255,255,0.10));
}
.msv-tile:active { transform: scale(0.95); }

.msv-tile-icon  { font-size: 26px; line-height: 1; }
.msv-tile-label {
    font-size: var(--msv-card-font-size, 9.5px);
    font-weight: var(--msv-card-font-weight, 500);
    font-family: var(--msv-card-font-family, inherit);
    text-align: center;
    line-height: 1.25;
    color: var(--msv-surface-text, #F0F4FF);
}

/* Empty / add tiles */
.msv-tile-empty {
    background: transparent;
    border: 1.5px dashed rgba(255,255,255,0.08);
    cursor: default;
}
.msv-tile-empty .msv-tile-add-icon {
    font-size: 16px; opacity: 0.2; font-style: normal; line-height: 1;
}
.msv-tile-empty .msv-tile-label { color: rgba(255,255,255,0.18); }
.msv-tile-empty:active { transform: none; }

.msv-tile-placeable {
    background: rgba(55,138,221,0.08);
    border: 1.5px dashed var(--msv-accent-400, #378ADD);
    cursor: pointer; animation: msv-pulse 1.5s ease-in-out infinite;
}
.msv-tile-placeable:active { transform: scale(0.97); }

.msv-tile-blocked {
    background: transparent;
    border: 1.5px dashed rgba(255,255,255,0.04);
    opacity: 0.4; cursor: not-allowed;
}

.msv-tile-add-btn {
    background: transparent;
    border: 1.5px dashed rgba(255,255,255,0.12);
    height: 48px;
    cursor: pointer;
    flex-direction: row; gap: 8px;
}
.msv-tile-add-btn .msv-tile-add-icon { font-size: 16px; opacity: 0.3; }
.msv-tile-add-btn .msv-tile-label { color: rgba(255,255,255,0.25); }

@keyframes msv-pulse {
    0%, 100% { border-color: rgba(55,138,221,0.4); }
    50%       { border-color: rgba(55,138,221,0.9); }
}

/* Edit mode outlines */
.msv-edit-mode .msv-tile:not(.msv-tile-empty):not(.msv-tile-add-btn) {
    outline: 1.5px dashed rgba(255,255,255,0.15);
    outline-offset: -1px;
}

/* Remove button */
.msv-tile-remove {
    position: absolute; top: 5px; right: 5px;
    width: 18px; height: 18px;
    background: rgba(224,74,74,0.35); border-radius: 50%;
    border: none; color: #F09595; font-size: 11px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 2; font-family: inherit;
}
.msv-tile-remove:active { background: rgba(224,74,74,0.6); }

/* \u2500\u2500 Identity tile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-tile-identity {
    background: rgba(55,138,221,0.12);
    border-color: rgba(55,138,221,0.28);
}
.msv-identity-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(55,138,221,0.3);
    border: 1.5px solid rgba(55,138,221,0.5);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 500; color: #B5D4F4;
}
.msv-identity-name { font-size: var(--msv-card-font-size, 11px); font-weight: var(--msv-card-font-weight, 500); font-family: var(--msv-card-font-family, inherit); color: #E6F1FB; text-align: center; }
.msv-identity-team { font-size: 9px; color: rgba(181,212,244,0.55); text-align: center; }

/* \u2500\u2500 Quote tile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-tile-quote {
    background: rgba(127,119,221,0.10);
    border-color: rgba(127,119,221,0.22);
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
}
.msv-quote-mark { font-size: 14px; color: rgba(175,169,236,0.35); line-height: 1; }
.msv-quote-text { font-size: 10px; color: #CECBF6; line-height: 1.45; font-style: italic; margin-top: 2px; }

/* \u2500\u2500 Photo tile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-tile-photo {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    padding: 0; overflow: hidden;
}
.msv-photo-bg {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
}

/* \u2500\u2500 Module overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-module-overlay {
    position: fixed;
    inset: 0;
    background: #080d1a;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.msv-module-overlay.msv-overlay-open {
    transform: translateY(0);
}
.msv-module-overlay[hidden] {
    display: none !important;
}

.msv-module-overlay-top {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px 12px;
    border-bottom: 0.5px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
    background: linear-gradient(
        to right,
        rgba(var(--msv-accent-rgb, 55,138,221), 0.15) 0%,
        transparent 70%
    );
}
.msv-overlay-back {
    font-size: 12px; padding: 5px 12px;
    border-radius: 20px;
    border: 0.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.55); cursor: pointer;
    font-family: inherit;
}
.msv-overlay-back:active { background: rgba(255,255,255,0.1); }
.msv-overlay-title { font-size: 15px; font-weight: 500; color: #E6F1FF; }

.msv-module-overlay-body {
    flex: 1; overflow-y: auto;
    padding: 0;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

/* \u2500\u2500 Add sheet \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-add-sheet,
.msv-settings-sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex; align-items: flex-end;
    background: rgba(0,0,0,0);
    transition: background 0.2s;
}
.msv-add-sheet:not([hidden]),
.msv-settings-sheet:not([hidden]) {
    background: rgba(0,0,0,0.55);
}

.msv-add-sheet-bg {
    position: absolute; inset: 0; z-index: 0;
}

.msv-add-sheet-inner {
    position: relative; z-index: 1;
    width: 100%;
    background: #111828;
    border-radius: 18px 18px 0 0;
    padding: 16px 14px 32px;
    max-height: 70vh;
    overflow-y: auto;
}

.msv-add-sheet-title {
    font-size: 13px; font-weight: 500;
    color: rgba(255,255,255,0.55);
    margin: 0 0 12px;
}

/* Module picker grid */
.msv-add-module-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.msv-add-opt {
    background: rgba(255,255,255,0.05);
    border: 0.5px solid rgba(255,255,255,0.09);
    border-radius: 11px; padding: 12px 6px;
    display: flex; flex-direction: column;
    align-items: center; gap: 5px; cursor: pointer;
    transition: background 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.msv-add-opt:active { background: rgba(255,255,255,0.12); }
.msv-add-opt span   { font-size: 20px; line-height: 1; }
.msv-add-opt p      { font-size: 9px; color: rgba(255,255,255,0.5); text-align: center; line-height: 1.3; }

/* Size picker grid */
.msv-add-size-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-bottom: 8px;
}
.msv-size-opt {
    background: rgba(255,255,255,0.04);
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: 11px; padding: 10px 6px;
    display: flex; flex-direction: column;
    align-items: center; gap: 6px; cursor: pointer;
    transition: all 0.1s;
}
.msv-size-opt:active {
    background: rgba(55,138,221,0.15);
    border-color: rgba(55,138,221,0.35);
}
.msv-size-opt-mini {
    border-color: rgba(186,117,23,0.4);
    background: rgba(186,117,23,0.06);
    grid-column: span 3;
    flex-direction: row; gap: 12px; padding: 8px 14px;
    justify-content: center;
}
.msv-size-opt-mini:active {
    background: rgba(186,117,23,0.15);
    border-color: rgba(186,117,23,0.6);
}
.msv-size-opt p      { font-size: 9px; color: rgba(255,255,255,0.4); text-align: center; line-height: 1.4; margin: 0; }
.msv-size-opt p span { display: block; opacity: 0.6; font-size: 8px; }

.msv-add-place-hint {
    font-size: 11px; color: rgba(255,255,255,0.3);
    text-align: center; padding: 8px 0 0; line-height: 1.5;
}

/* Settings sheet sections */
.msv-settings-section { margin-bottom: 20px; }
.msv-settings-sublabel {
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.35); margin: 0 0 10px;
}
.msv-settings-save-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; }

/* Skin picker (built by theme.js) */
.msv-skin-grid, .msv-cardstyle-grid {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.msv-skin-btn, .msv-cardstyle-btn {
    padding: 6px 14px; border-radius: 20px; font-size: 12px;
    border: 0.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6);
    cursor: pointer; font-family: inherit; transition: all 0.12s;
}
.msv-skin-btn.active, .msv-cardstyle-btn.active {
    background: var(--msv-accent-400, #378ADD);
    border-color: var(--msv-accent-400, #378ADD);
    color: #fff;
}

/* \u2500\u2500 Module content \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
.msv-empty {
    padding: 24px 0; text-align: center;
    color: rgba(255,255,255,0.3); font-size: 13px;
}

.msv-season-pills {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}

/* Tables */
.msv-times-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.msv-times-table thead th {
    text-align: left; font-size: 10px; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: rgba(255,255,255,0.35); padding: 0 8px 10px 0;
    border-bottom: 0.5px solid rgba(255,255,255,0.07);
}
.msv-table-row td {
    padding: 11px 8px 11px 0;
    border-bottom: 0.5px solid rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.8); vertical-align: middle;
}
.msv-time-val { font-weight: 500; color: var(--msv-accent-400, #378ADD); }
.msv-rank-val { font-weight: 500; color: var(--msv-accent-300, #85B7EB); }
.msv-muted    { color: rgba(255,255,255,0.35); font-size: 12px; }

/* Progression chart */
.msv-prog-events { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.msv-prog-chart-wrap {
    position: relative;
    width: 100%;
    margin-top: 8px;
}
.msv-prog-chart-wrap canvas {
    width: 100% !important;
    max-height: 280px;
}

/* Portfolio canvas */
.msv-portfolio-canvas { max-width: 100%; }

/* Half tiles */
.msv-tile-half {
    flex-direction: row;
    justify-content: flex-start;
    gap: 5px;
    padding: 0 8px;
}
.msv-tile-icon-mini  { font-size: 14px; line-height: 1; flex-shrink: 0; }
.msv-tile-label-mini { font-size: 9px; font-weight: 500; color: var(--msv-surface-text, #F0F4FF); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.msv-tile-half-orphan {
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.10);
    cursor: default;
}
.msv-edit-mode .msv-tile-half-orphan {
    border-color: rgba(255,255,255,0.18);
    cursor: pointer;
}


#msv-quote-input:focus { outline: none; border-color: var(--msv-accent-400, #378ADD) !important; }

/* \u2500\u2500 Responsive tweaks \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@media (max-width: 380px) {
    .msv-locker-grid { gap: 5px; padding: 6px 10px 80px; }
    .msv-tile { border-radius: 11px; }
}
@media (min-width: 540px) {
    .msv-locker-grid {
        max-width: 480px;
        margin: 0 auto;
    }
    .msv-add-sheet-inner,
    .msv-add-sheet-inner {
        max-width: 480px;
        margin: 0 auto;
    }
}
/* ── Topbar actions ────────────────────────────────────────────────────────── */
.msv-locker-topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.msv-locker-settings-btn {
    font-size: 16px;
    padding: 3px 6px;
    border-radius: 20px;
    border: 0.5px solid var(--msv-tb-border, rgba(255,255,255,0.15));
    background: rgba(0,0,0,0.15);
    color: var(--msv-tb-muted, rgba(255,255,255,0.55));
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.msv-locker-settings-btn:hover {
    background: rgba(0,0,0,0.25);
    color: var(--msv-tb-color, rgba(255,255,255,0.9));
}

/* ── Background applied to locker ──────────────────────────────────────────── */
.msv-locker[data-bg] {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* ── Settings sheet (new background picker) ────────────────────────────────── */
.msv-settings-sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,0);
    transition: background 0.2s;
}
.msv-settings-sheet:not([hidden]) {
    background: rgba(0,0,0,0.55);
}

.msv-settings-sheet-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    background: #0e1525;
    border-radius: 20px 20px 0 0;
    border-top: 0.5px solid rgba(255,255,255,0.08);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: pan-y;
}

.msv-settings-handle {
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    margin: 12px auto 0;
    flex-shrink: 0;
    cursor: grab;
}

.msv-settings-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 6px;
    flex-shrink: 0;
}

.msv-settings-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.msv-settings-done {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 0;
    transition: color 0.12s;
}
.msv-settings-done:hover { color: rgba(255,255,255,0.9); }

.msv-settings-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.msv-settings-shuffle-row {
    padding: 4px 14px 6px;
    flex-shrink: 0;
}

.msv-settings-shuffle-btn {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    border: 0.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.65);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.msv-settings-shuffle-btn:active { background: rgba(255,255,255,0.12); transform: scale(0.98); }

.msv-settings-divider {
    height: 0.5px;
    background: rgba(255,255,255,0.06);
    margin: 4px 0;
    flex-shrink: 0;
}

/* Scrollable body containing all rows */
#msv-bg-dynamic-rows,
#msv-bg-category-rows {
    overflow-y: visible;
}

/* Category row */
.msv-bg-cat-row { margin-bottom: 2px; }

.msv-bg-cat-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    padding: 10px 16px 7px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.msv-bg-cat-scroll {
    display: flex;
    gap: 8px;
    padding: 0 16px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.msv-bg-cat-scroll::-webkit-scrollbar { display: none; }

/* Background card in scroll row */
.msv-bgcard {
    flex-shrink: 0;
    width: 72px;
    height: 96px;
    border-radius: 12px;
    cursor: pointer;
    border: 2.5px solid transparent;
    transition: border-color 0.15s, transform 0.12s;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 6px;
    -webkit-tap-highlight-color: transparent;
}
.msv-bgcard:active { transform: scale(0.93); }
.msv-bgcard.msv-bgcard-sel {
    border-color: white;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}

.msv-bgcard-name {
    font-size: 8px;
    font-weight: 800;
    text-shadow: 0 1px 5px rgba(0,0,0,0.7);
    line-height: 1;
    position: relative;
    z-index: 1;
}

.msv-bgcard-check {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: white;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #111;
    z-index: 2;
    font-style: normal;
}
.msv-bgcard.msv-bgcard-sel .msv-bgcard-check { display: flex; }

.msv-bgcard-fav {
    position: absolute;
    top: 5px;
    left: 6px;
    font-size: 11px;
    cursor: pointer;
    z-index: 3;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s;
    background: none;
    border: none;
    padding: 0;
}
.msv-bgcard:hover .msv-bgcard-fav,
.msv-bgcard.msv-bgcard-faved .msv-bgcard-fav { opacity: 1; }

/* Toast notification */
.msv-bg-toast {
    position: fixed;
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(30,30,50,0.95);
    border: 0.5px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 200;
    white-space: nowrap;
    pointer-events: none;
    font-family: inherit;
}
.msv-bg-toast.msv-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (min-width: 540px) {
    .msv-settings-sheet-inner { max-width: 480px; margin: 0 auto; }
}

/* ── Quote tile font rendering ───────────────────────────────────────────────── */
.msv-tile-quote .msv-quote-text {
    font-size: 11px;
    line-height: 1.35;
    word-break: break-word;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

/* ── Quote editor ────────────────────────────────────────────────────────────── */
.msv-quote-editor-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--msv-surface-muted);
    margin-bottom: 8px;
}

.msv-quote-textarea {
    width: 100%;
    height: 100px;
    background: rgba(255,255,255,0.06);
    border: 0.5px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    padding: 10px 12px;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    margin-bottom: 12px;
}
.msv-quote-textarea:focus { outline: none; border-color: var(--msv-accent-400); }

/* Live preview */
.msv-quote-preview-wrap {
    background: rgba(255,255,255,0.04);
    border: 0.5px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 14px 14px 12px;
    min-height: 64px;
    display: flex;
    align-items: center;
}
.msv-quote-preview {
    font-size: 16px;
    line-height: 1.35;
    word-break: break-word;
    transition: font-family 0.2s, color 0.2s;
}

/* Font picker grid */
.msv-qf-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
}

.msv-qf-btn {
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border-radius: 8px;
    border: 0.5px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.75);
    font-size: 17px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
}
.msv-qf-btn:active { background: rgba(255,255,255,0.12); }
.msv-qf-btn.msv-qf-active {
    background: rgba(255,255,255,0.10);
    border-color: var(--msv-accent-400);
    color: #fff;
}

/* Color swatches */
.msv-qc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}
.msv-qc-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2.5px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.msv-qc-swatch:active { transform: scale(0.88); }
.msv-qc-swatch.msv-qc-active {
    border-color: var(--msv-accent-400);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.3);
}

/* ── Quote size nudge ────────────────────────────────────────────────────────── */
.msv-qsz-row {
    display: flex;
    gap: 8px;
}
.msv-qsz-btn {
    flex: 1;
    padding: 10px 8px;
    border-radius: 10px;
    border: 0.5px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    transition: all 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    -webkit-tap-highlight-color: transparent;
}
.msv-qsz-btn span { font-size: 11px; opacity: 0.7; }
.msv-qsz-btn:active { background: rgba(255,255,255,0.12); }
.msv-qsz-btn.msv-qsz-active {
    background: rgba(255,255,255,0.10);
    border-color: var(--msv-accent-400);
    color: #fff;
}

/* ── Tile vibe picker sheet ──────────────────────────────────────────────────── */
.msv-vibe-sheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,0);
    transition: background 0.2s;
    pointer-events: none;
}
.msv-vibe-sheet.msv-vibe-open {
    background: rgba(0,0,0,0.6);
    pointer-events: all;
}
.msv-vibe-sheet-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.msv-vibe-sheet-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: #0e1525;
    border-radius: 20px 20px 0 0;
    border-top: 0.5px solid rgba(255,255,255,0.08);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32,0.72,0,1);
}
.msv-vibe-sheet.msv-vibe-open .msv-vibe-sheet-inner {
    transform: translateY(0);
}
.msv-vibe-handle {
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    margin: 12px auto 0;
    flex-shrink: 0;
}
.msv-vibe-sheet-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    padding: 10px 16px 8px;
    flex-shrink: 0;
}
.msv-vibe-body {
    overflow-y: auto;
    padding: 0 14px 24px;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}
.msv-vibe-cat-lbl {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    padding: 12px 2px 7px;
}
.msv-vibe-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 7px;
    margin-bottom: 4px;
}
.msv-vibe-opt {
    border-radius: 11px;
    padding: 11px 11px 9px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.12s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    -webkit-tap-highlight-color: transparent;
}
.msv-vibe-opt:active { transform: scale(0.95); }
.msv-vibe-opt-sel { border-color: white !important; }
.msv-vibe-opt-name {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
}
.msv-vibe-opt-feel {
    font-size: 8.5px;
    opacity: 0.72;
    line-height: 1.3;
}

/* ── Tile vibe overrides — attribute selector beats class selector ──────────── */
/* These ensure vibe bg/border always wins over .msv-tile defaults */
.msv-tile[data-vibe] {
    background: var(--msv-vibe-bg) !important;
    border-color: var(--msv-vibe-border) !important;
}

/* ── Card font picker ─────────────────────────────────────────────────────────── */
.msv-font-card {
    flex-shrink: 0;
    width: 70px;
    height: 80px;
    border-radius: 12px;
    cursor: pointer;
    border: 2.5px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    transition: border-color .15s, background .12s, transform .12s;
    -webkit-tap-highlight-color: transparent;
}
.msv-font-card:active { transform: scale(0.93); }
.msv-font-card.msv-font-card-sel {
    border-color: white;
    background: rgba(255,255,255,0.10);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.2);
}
.msv-font-card-sample {
    font-size: 26px;
    line-height: 1;
    color: #fff;
}
.msv-font-card-name {
    font-size: 8px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    text-align: center;
    line-height: 1.2;
    font-family: system-ui, sans-serif;
}
.msv-font-card-sel .msv-font-card-name {
    color: rgba(255,255,255,0.9);
}

/* ── Card font picker ────────────────────────────────────────────────────────── */
.msv-font-picker-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0 16px 16px;
}
.msv-font-btn {
    padding: 7px 12px;
    border-radius: 20px;
    border: 0.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.12s;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}
.msv-font-btn:active { background: rgba(255,255,255,0.12); }
.msv-font-btn.msv-font-btn-active {
    background: rgba(255,255,255,0.12);
    border-color: var(--msv-accent-400, #378ADD);
    color: #fff;
}

/* ── Settings section headings ───────────────────────────────────────────────── */
.msv-settings-section-hed {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    padding: 14px 16px 6px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

/* ── Vibe + Icon picker tabs ─────────────────────────────────────────────────── */
.msv-picker-tabs {
    display: flex;
    gap: 0;
    padding: 0 16px 0;
    border-bottom: 0.5px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.msv-picker-tab {
    flex: 1;
    padding: 10px 0;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    cursor: pointer;
    font-family: inherit;
    border-bottom: 2px solid transparent;
    transition: color 0.12s, border-color 0.12s;
    margin-bottom: -0.5px;
}
.msv-picker-tab.msv-picker-tab-active {
    color: #fff;
    border-bottom-color: #fff;
}

/* ── Icon grid in picker sheet ───────────────────────────────────────────────── */
.msv-icon-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 4px;
}
.msv-icon-opt {
    border-radius: 10px;
    padding: 10px 6px 7px;
    cursor: pointer;
    border: 2px solid transparent;
    background: rgba(255,255,255,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: border-color 0.15s, background 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.msv-icon-opt:active { transform: scale(0.93); }
.msv-icon-opt.msv-icon-opt-sel {
    border-color: white;
    background: rgba(255,255,255,0.1);
}
.msv-icon-opt-img {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msv-icon-opt-img svg {
    width: 28px;
    height: 28px;
}
.msv-icon-opt-lbl {
    font-size: 7px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    line-height: 1.2;
}

/* ── Icon sizing in tile ─────────────────────────────────────────────────────── */
.msv-tile-icon svg {
    width: 22px;
    height: 22px;
}
.msv-tile-icon-mini svg {
    width: 14px;
    height: 14px;
}

/* ── Team Logo tile ──────────────────────────────────────────────────────────── */
.msv-team-logo-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6%;
}
.msv-team-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    /* Transparent PNG — drop shadow so it reads on any tile vibe */
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.35));
}
.msv-team-logo-fallback {
    background: rgba(255,255,255,0.05);
}
.msv-team-logo-abbr {
    font-size: 18px;
    font-weight: 800;
    color: var(--msv-surface-text, #fff);
    letter-spacing: 0.05em;
    opacity: 0.6;
}

/* ── Photo tile display ──────────────────────────────────────────────────────── */
.msv-photo-img {
    width: 100%;
    height: 100%;
    display: block;
}
.msv-photo-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1.5px dashed rgba(255,255,255,0.15);
    border-radius: 14px;
}
.msv-photo-empty-icon {
    font-size: 20px;
    opacity: 0.3;
    line-height: 1;
}
.msv-photo-empty-lbl {
    font-size: 9px;
    color: rgba(255,255,255,0.3);
    font-weight: 500;
}

/* ── Photo sheet body ────────────────────────────────────────────────────────── */
.msv-photo-cur-wrap {
    width: 100%;
    /* height driven by padding-bottom from JS for tile aspect ratio */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}
.msv-photo-cur-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.msv-photo-cur-change {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.6);
    border: none;
    color: #fff;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
}
.msv-photo-upload-zone {
    border: 1.5px dashed rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 28px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: rgba(255,255,255,0.03);
    transition: border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.msv-photo-upload-zone:active { border-color: rgba(255,255,255,0.5); }
.msv-photo-upload-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: rgba(255,255,255,0.5);
    line-height: 1;
}
.msv-photo-upload-lbl {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
}
.msv-photo-upload-sub {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
}
.msv-photo-remove-btn {
    width: 100%;
    padding: 8px;
    border-radius: 10px;
    border: 0.5px solid rgba(255,80,80,0.4);
    background: rgba(255,80,80,0.08);
    color: rgba(255,120,120,0.8);
    font-size: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.12s;
}
.msv-photo-remove-btn:active { background: rgba(255,80,80,0.15); }
.msv-photo-section-lbl {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
    margin-bottom: 6px;
}
.msv-photo-fit-row {
    display: flex;
    gap: 8px;
}
.msv-photo-fit-btn {
    flex: 1;
    padding: 8px 0;
    border-radius: 8px;
    border: 0.5px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}
.msv-photo-fit-on {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
}

/* ── Focus point picker ──────────────────────────────────────────────────────── */
.msv-focus-wrap {
    position: relative;
    width: 100%;
    /* height set via padding-bottom by JS for correct tile aspect ratio */
    border-radius: 10px;
    overflow: hidden;
    cursor: crosshair;
    -webkit-tap-highlight-color: transparent;
}
.msv-focus-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}
.msv-focus-dot {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    background: rgba(255,255,255,0.25);
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 0 0 1.5px rgba(0,0,0,0.4);
    z-index: 3;
}
.msv-focus-crosshair-h {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0.5px;
    background: rgba(255,255,255,0.2);
    pointer-events: none;
    transition: top 0.05s;
}
.msv-focus-crosshair-v {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 0.5px;
    background: rgba(255,255,255,0.2);
    pointer-events: none;
    transition: left 0.05s;
}
.msv-photo-save-btn {
    width: 100%;
    padding: 11px;
    border-radius: 10px;
    border: none;
    background: #378ADD;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    margin-top: 12px;
    transition: opacity 0.12s;
}
.msv-photo-save-btn:active { opacity: 0.85; }

/* ── Drag to rearrange ───────────────────────────────────────────────────────── */
.msv-edit-mode .msv-tile:not(.msv-tile-empty) {
    cursor: grab;
}
.msv-edit-mode .msv-tile:not(.msv-tile-empty):active {
    cursor: grabbing;
}
.msv-drag-over.msv-tile-empty {
    background: rgba(55,138,221,0.2) !important;
    border: 2px dashed rgba(55,138,221,0.7) !important;
}
.msv-drag-over:not(.msv-tile-empty) {
    outline: 2.5px solid rgba(55,138,221,0.8) !important;
    outline-offset: 2px;
}
#msv-drag-ghost {
    will-change: transform;
    border-radius: 14px;
}

/* Invalid drag target — different size tile */
.msv-drag-invalid {
    outline: 2.5px solid rgba(255,80,80,0.6) !important;
    outline-offset: 2px;
}

/* ── Best Times card list ─────────────────────────────────────────────────────── */
.msv-bt-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 4px;
}
.msv-bt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 0.5px solid rgba(255,255,255,0.06);
    gap: 12px;
}
.msv-bt-row:last-child { border-bottom: none; }
.msv-bt-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.msv-bt-event {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    line-height: 1.2;
}
.msv-bt-meet {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msv-bt-season {
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    text-transform: capitalize;
}
.msv-bt-time {
    font-size: 20px;
    font-weight: 600;
    color: var(--msv-accent-400, #378ADD);
    letter-spacing: -0.02em;
    flex-shrink: 0;
    text-align: right;
}

/* Progression season pills row */
.msv-prog-seasons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    margin-top: -4px;
}

/* ── My Events — small pill events and never swum ───────────────────────────── */
.msv-me-pill-events {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 0 4px;
    border-top: 0.5px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}
.msv-me-small-pill {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    background: var(--msv-accent-400, #378ADD);
    color: rgba(255,255,255,0.9);
    border: none;
    opacity: 0.75;
}
.msv-me-never-swum {
    padding: 10px 0 4px;
    border-top: 0.5px solid rgba(255,255,255,0.06);
    margin-top: 4px;
}
.msv-me-never-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    margin-bottom: 6px;
}
.msv-me-never-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.msv-me-never-pill {
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    background: transparent;
    color: rgba(255,255,255,0.2);
    border: 0.5px solid rgba(255,255,255,0.08);
}

/* ── My Events — bar list ────────────────────────────────────────────────────── */
.msv-me-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}
.msv-me-item {}
.msv-me-item-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
}
.msv-me-item-event {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
}
.msv-me-item-count {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
}
.msv-me-item-pct {
    font-size: 10px;
    color: rgba(255,255,255,0.3);
}
.msv-me-bar-track {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow: hidden;
}
.msv-me-bar-fill {
    height: 100%;
    background: var(--msv-accent-400, #378ADD);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ── Rankings list ────────────────────────────────────────────────────────── */
.msv-rk-list {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}
/* header row */
.msv-rk-list::before {
    content: 'Event  ·  Time  ·  Team  ·  Class  ·  State';
    display: none; /* handled by JS header row */
}
.msv-rk-header {
    display: grid;
    grid-template-columns: 1fr 62px 36px 36px 36px;
    gap: 6px;
    padding: 0 0 7px;
    border-bottom: 0.5px solid rgba(255,255,255,0.1);
    margin-bottom: 2px;
}
.msv-rk-header span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    text-align: right;
}
.msv-rk-header span:first-child { text-align: left; }
.msv-rk-row {
    display: grid;
    grid-template-columns: 1fr 56px 34px 34px 34px;
    gap: 4px;
    align-items: center;
    padding: 9px 0;
    border-bottom: 0.5px solid rgba(255,255,255,0.06);
}
.msv-rk-row:last-child { border-bottom: none; }
.msv-rk-event {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msv-rk-time {
    font-size: 14px;
    font-weight: 600;
    color: var(--msv-accent-400, #378ADD);
    letter-spacing: -0.01em;
    text-align: right;
}
.msv-rk-badge {
    font-size: 11px;
    font-weight: 600;
    text-align: right;
}
.msv-rk-state { color: #85B7EB; }
.msv-rk-class { color: #EF9F27; }
.msv-rk-team  { color: #8ecf9a; }

/* ═══════════════════════════════════════════════════════════════════
   PLAYLIST TILE & EDITOR
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tile: empty state ─────────────────────────────────────────────── */
.msv-playlist-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 100%;
    opacity: 0.7;
}
.msv-playlist-icon-wrap { line-height: 1; }
.msv-playlist-empty-lbl {
    font-size: 12px;
    color: var(--msv-surface-text);
    letter-spacing: 0.02em;
}

/* ── Tile: linked state ────────────────────────────────────────────── */
.msv-playlist-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 0 2px;
}
.msv-playlist-platform-icon { flex-shrink: 0; line-height: 1; }
.msv-playlist-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msv-playlist-platform-lbl {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--msv-accent-mid);
    line-height: 1;
}
.msv-playlist-name {
    font-size: 12px;
    color: var(--msv-surface-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.msv-playlist-open-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--msv-accent-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.15s;
}
.msv-playlist-open-btn:hover { opacity: 0.8; }
.msv-playlist-open-btn svg { width: 14px; height: 14px; }

/* ── Editor ────────────────────────────────────────────────────────── */
.msv-playlist-editor {
    padding: 20px 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.msv-playlist-editor-lbl {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--msv-surface-muted);
    margin: 0;
}
.msv-playlist-editor-hint {
    font-size: 12px;
    color: var(--msv-accent-mid);
    margin: 0;
    min-height: 18px;
    transition: color 0.2s;
}

/* URL + name inputs */
.msv-pl-url-input,
.msv-pl-name-input {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--msv-surface-border, rgba(255,255,255,0.15));
    background: var(--msv-surface-input, rgba(255,255,255,0.07));
    color: var(--msv-surface-text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    margin-top: 4px;
}
.msv-pl-url-input:focus,
.msv-pl-name-input:focus {
    border-color: var(--msv-accent-mid);
}
.msv-pl-url-input::placeholder,
.msv-pl-name-input::placeholder { opacity: 0.4; }

/* Preview row */
.msv-playlist-input-wrap { margin-bottom: 4px; }
.msv-pl-preview-empty {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--msv-surface-input, rgba(255,255,255,0.05));
    font-size: 12px;
    color: var(--msv-surface-muted);
    text-align: center;
}
.msv-pl-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--msv-surface-input, rgba(255,255,255,0.07));
    border: 1.5px solid var(--msv-accent-mid);
}
.msv-pl-preview-icon { flex-shrink: 0; line-height: 1; }
.msv-pl-preview-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.msv-pl-preview-platform {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--msv-accent-mid);
}
.msv-pl-preview-name {
    font-size: 13px;
    color: var(--msv-surface-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msv-pl-preview-open {
    font-size: 12px;
    color: var(--msv-accent-mid);
    text-decoration: none;
    flex-shrink: 0;
    font-weight: 600;
}
.msv-pl-preview-open:hover { opacity: 0.7; }