/* =========================================================================
   Public landing page — dark marketing design (translated from the React
   prototype's PublicLandingPage). Scoped to .publicLanding so nothing leaks.
   ========================================================================= */

/* Hide the shared light chrome + go full-bleed on the landing & dashboard pages */
body:has(.pl-page) { background-color: #040b16 !important; }
body:has(.pl-page) #trueHeader,
body:has(.pl-page) .footerContainer { display: none !important; }
body:has(.pl-page) main { margin-bottom: 0 !important; }
body:has(.pl-page) main > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

.pl-page {
    min-height: 100vh;
    background: radial-gradient(circle at top, #0f274b 0%, #07111f 32%, #040b16 100%);
    color: #eef4ff;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---- Week strip ---- */
/* Reserve the bar's height up front so games don't pop in and shift the page */
.pl-weekstrip { position: relative; display: flex; min-height: 66px; background: rgba(4,11,22,0.94); border-bottom: 1px solid rgba(70,102,155,0.45); overflow-x: auto; }
/* Centered across the strip (right of the 74px WEEK label) while games load */
.pl-week-loading { position: absolute; top: 0; bottom: 0; left: 74px; right: 0; display: flex; align-items: center; justify-content: center; }
.pl-week-game { animation: plFadeIn .3s ease; }
@keyframes plFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pl-week-label { width: 74px; min-width: 74px; background: linear-gradient(180deg,#0e4cc6 0%,#072561 100%); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid rgba(99,141,214,0.35); }
.pl-week-label div { font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.pl-week-label strong { font-size: 24px; font-weight: 800; }
.pl-week-games { display: flex; }
.pl-week-game { min-width: 116px; padding: 6px 12px; border-right: 1px solid rgba(70,102,155,0.35); }
.pl-week-time { font-size: 11px; font-weight: 600; color: #4fa2ff; margin-bottom: 8px; white-space: nowrap; }
.pl-week-team { display: flex; justify-content: space-between; align-items: center; white-space: nowrap; gap: 8px; margin-bottom: 4px; }
.pl-week-team-name { display: flex; align-items: center; gap: 8px; }
.pl-week-team-name span { font-weight: 700; font-size: 12px; }
.pl-week-team small { color: #c4d4ef; font-size: 12px; }
.pl-week-logo { width: 16px; height: 16px; object-fit: contain; }

/* ---- Nav ---- */
.pl-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 24px; background: rgba(3,8,18,0.68); border-bottom: 1px solid rgba(70,102,155,0.22); backdrop-filter: blur(10px); }
.pl-nav-left, .pl-nav-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pl-brand { font-weight: 800; font-size: 20px; color: #fff; }
.pl-nav-link { color: #b9c8e6; text-decoration: none; }
.pl-nav-link:hover { color: #fff; }
.pl-nav-muted { color: #b9c8e6; }
/* Rules link + theme toggle share the Sign In button's size (.pl-btn metrics) */
.pl-nav-right .pl-nav-link { padding: 8px 0; font-size: 16px; font-weight: 600; line-height: normal; }
.pl-nav-right .themeToggleBtn { padding: 8px 14px; font-size: 16px; line-height: normal; }

/* ---- Container ---- */
.pl-container { max-width: 1460px; margin: 0 auto; padding: 24px; }
@media (min-width: 1200px) { .pl-container { padding: 40px 48px; } }

/* ---- Buttons ---- */
.pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 8px; padding: 8px 18px; font-weight: 600; text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease, color .15s ease; white-space: nowrap; }
.pl-btn-primary { background: #2d7cff; color: #fff; }
.pl-btn-primary:hover:not([disabled]) { background: #1f6bec; color: #fff; }
.pl-btn-outline { background: transparent; color: #eef4ff; border-color: rgba(255,255,255,0.5); }
.pl-btn-outline:hover { background: rgba(255,255,255,0.1); color: #fff; }
.pl-btn-lg { padding: 14px 26px; font-size: 18px; }
.pl-btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }

/* ---- Hero ---- */
.pl-hero { position: relative; min-height: 470px; height: 100%; border-radius: 20px; overflow: hidden;
    background: radial-gradient(circle at 78% 22%, rgba(58,123,255,0.42) 0%, rgba(58,123,255,0.14) 24%, rgba(0,0,0,0) 46%), linear-gradient(120deg,#020814 0%,#061327 38%,#0a1f45 66%,#0c2d63 100%);
    border: 1px solid rgba(80,118,189,0.25); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
.pl-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,7,18,0.96) 0%, rgba(3,10,22,0.88) 34%, rgba(3,10,22,0.46) 62%, rgba(3,10,22,0.08) 100%); }
.pl-hero-body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 40px; max-width: 620px; }
@media (min-width: 1200px) { .pl-hero-body { padding: 48px; } }
.pl-hero-title { font-size: clamp(40px, 6vw, 84px); font-weight: 800; line-height: 1; letter-spacing: -0.05em; color: #f5f8ff; margin-bottom: 16px; }
.pl-accent { color: #2d7cff; }
.pl-hero-sub { font-size: clamp(20px, 2.4vw, 30px); font-weight: 600; color: #c9d6ee; margin-bottom: 16px; max-width: 560px; }
.pl-hero-text { max-width: 560px; color: #aebbd5; font-size: 18px; line-height: 1.55; margin-bottom: 24px; }
.pl-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.pl-hero-tags { display: flex; gap: 24px; flex-wrap: wrap; color: #bfd0eb; }

/* ---- Public leagues card ---- */
.pl-card { border-radius: 20px; }
.pl-leagues { height: 100%; padding: 16px; background: linear-gradient(180deg, rgba(7,20,43,0.95) 0%, rgba(5,14,30,0.92) 100%); border: 1px solid rgba(80,118,189,0.25); box-shadow: 0 24px 60px rgba(0,0,0,0.30); display: flex; flex-direction: column; }
@media (min-width: 1200px) { .pl-leagues { padding: 24px; } }
.pl-leagues-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pl-leagues-viewall { color: #7fb0ff; font-size: 14px; text-decoration: none; white-space: nowrap; }
.pl-leagues-viewall:hover { color: #bcd3ff; text-decoration: underline; }
html:not(.theme-dark) .pl-leagues-viewall { color: var(--ac-accent); }
html:not(.theme-dark) .pl-leagues-viewall:hover { color: #1d4ed8; }
.pl-leagues-title { font-weight: 600; font-size: 28px; color: #fff; }
.pl-leagues-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
/* Long league lists scroll inside the card instead of stretching the hero row.
   ≥1200px (side-by-side): flex-basis 0 keeps the list out of the card's intrinsic
   height, so the HERO alone sets the row height and the list fills + scrolls.
   <1200px (stacked): plain max-height cap. */
@media (min-width: 1200px) {
    .publicLanding .pl-leagues-list { flex: 1 1 0; min-height: 0; overflow-y: auto; }
}
@media (max-width: 1199.98px) {
    .publicLanding .pl-leagues-list { max-height: 420px; overflow-y: auto; }
}
/* Slim dark scrollbar for the list */
.publicLanding .pl-leagues-list::-webkit-scrollbar { width: 8px; }
.publicLanding .pl-leagues-list::-webkit-scrollbar-thumb { background: rgba(124,164,233,0.28); border-radius: 4px; }
.publicLanding .pl-leagues-list::-webkit-scrollbar-thumb:hover { background: rgba(124,164,233,0.45); }
.publicLanding .pl-leagues-list { scrollbar-width: thin; scrollbar-color: rgba(124,164,233,0.28) transparent; }
.pl-leagues-loading { text-align: center; padding: 20px; }
.pl-league { border-radius: 16px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(90,122,180,0.22); }
.pl-league-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-avatar { width: 42px; height: 42px; min-width: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; background: rgba(255,255,255,0.08); color: #dce6f7; }
.pl-league-copy { min-width: 0; }
.pl-league-name { font-weight: 600; font-size: 18px; color: #f0f5ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-league-sub { color: #97abc8; font-size: 13px; }

/* ---- Feature cards ---- */
/* Bootstrap 5.0.2's minified grid orders the bare .col-xl{flex:1 0 0%} rule
   BEFORE the explicit .col-md-6{width:50%} rule in the same file — same
   specificity, later wins, so col-md-6 silently beats col-xl at >=1200px and
   any "col-12 col-md-6 col-xl" row never collapses to one row (feature cards,
   Why Join). Force it back for every such row on the landing page. */
@media (min-width: 1200px) {
    /* [class~="col-xl"] matches only the exact "col-xl" token — NOT "col-xl-8"/
       "col-xl-4" (the hero/leagues row), which must keep their 8:4 split. */
    .publicLanding .row > [class~="col-xl"] {
        flex: 1 0 0% !important;
        width: auto !important;
        max-width: 100% !important;
    }
}

.pl-feature { height: 100%; padding: 24px; background: rgba(7,20,43,0.88); border: 1px solid rgba(80,118,189,0.22); box-shadow: 0 18px 40px rgba(0,0,0,0.20); }
.pl-feature-icon {
    width: 52px; height: 52px; border-radius: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 16px; color: #fff; font-size: 22px;
}
.pl-feature-title { font-weight: 600; font-size: 24px; color: #fff; margin-bottom: 8px; }
.pl-feature-desc { color: #aebbd5; line-height: 1.5; }

/* ---- Why join ---- */
.pl-why { border-radius: 20px; padding: 24px; background: rgba(5,15,33,0.72); border: 1px solid rgba(80,118,189,0.18); }
@media (min-width: 1200px) { .pl-why { padding: 48px; } }
.pl-why-title { text-align: center; font-weight: 800; font-size: clamp(30px, 4vw, 46px); color: #fff; margin-bottom: 24px; }
.pl-why-item { height: 100%; display: flex; flex-direction: column; gap: 8px; }
.pl-why-item-title { font-weight: 600; font-size: 24px; color: #fff; }
.pl-why-item-desc { color: #aebbd5; line-height: 1.5; }

/* ============ Signed-in dashboard (light — uses the app's --ac-* tokens
   so it matches the picks page and flips automatically under a dark toggle) ============ */
.pl-dash { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
/* Dashboard is full-width like the prototype (so the 5 metric cards fit inline).
   jsx page wrapper: px-2 px-lg-3 py-3 → 16px all around at desktop */
/* :not(.footerContainer) — the fixed footer is also a main > .container and
   must not inherit this padding (it lifted the bar off the viewport bottom) */
body:has(.pl-dash) main > .container:not(.footerContainer) {
    max-width: 100% !important;
    width: 100% !important;
    padding: 16px 8px !important; /* jsx: px-2 py-3 = 8px sides, 16px top/bottom */
}
@media (min-width: 992px) {
    body:has(.pl-dash) main > .container:not(.footerContainer) { padding: 16px !important; } /* jsx: px-lg-3 = 16px sides at lg+ */
}
/* jsx: row g-3 = 16px gutters — our 12px root renders the rem-based utility at 12px,
   so pin the gutter custom props in px (outer main row + inner #dashLeagues row) */
.pl-dash .row.g-3 { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }
/* jsx: header mb-3 (16px), h1 28px weight 700 */
.pl-dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pl-dash-title { font-size: 28px; font-weight: 700; color: var(--ac-ink); margin: 0; }
.pl-dash-sub { color: var(--ac-muted); font-size: 14px; margin-top: 4px; }
.pl-dash-loading { display: flex; justify-content: center; padding: 40px; width: 100%; }

/* Metric row: explicit grid so all 5 cards sit inline on desktop no matter
   what the bootstrap col classes resolve to */
/* jsx: row g-2 mb-3 → 8px gutters, 16px below */
#dashMetrics { display: grid !important; grid-template-columns: 1fr; gap: 8px; margin: 0 0 16px 0 !important; }
/* minmax(min-content, 1fr): columns default to an equal share, but a column
   whose own content needs more than that (e.g. Weekly Record's two side-by-
   side "Confidence · 62.5% win rate" labels) grows to fit it — the rest
   split whatever space is left. No fixed ratio; self-adjusts to content. */
@media (min-width: 768px)  { #dashMetrics { grid-template-columns: repeat(2, minmax(min-content, 1fr)); } }
@media (min-width: 1200px) { #dashMetrics { grid-template-columns: repeat(5, minmax(min-content, 1fr)); } }
#dashMetrics > div { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin: 0 !important; }

/* jsx metric card: card-body p-2 (8px), radius 14, 42px icon, value mt-3 (16px) */
.pl-metric { height: 100%; border-radius: 14px; padding: 8px; background: var(--ac-surface); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); }
.pl-metric-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
/* jsx: every icon circle shares one neutral softBg — only the glyph itself is
   accent-colored (the dashMetricCard() JS still passes an inline color:accent,
   but background now comes from here, not a per-card accent tint) */
.pl-metric-icon { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: #f7f9fc !important; }
html.theme-dark .pl-metric-icon { background: #1b2a3d !important; }
.pl-metric-label { text-transform: uppercase; font-weight: 700; font-size: 10px; letter-spacing: .08em; color: var(--ac-muted); text-align: right; }
.pl-metric-value { margin-top: 16px; font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--ac-ink); }
.pl-metric-sub { color: var(--ac-muted); font-size: 13px; margin-top: 0; } /* jsx: subtext has no margin */

/* Split metric (e.g. Weekly Record: confidence | survival) — same margin-top/
   font-weight/line-height as .pl-metric-value so its value box lines up with
   the plain single-value cards beside it in the same stat row */
.pl-msplit { display: flex; gap: 14px; margin-top: 16px; }
.pl-msplit-col { flex: 1; min-width: 0; }
.pl-msplit-col + .pl-msplit-col { border-left: 1px solid var(--ac-border); padding-left: 14px; }
.pl-msplit-val { font-weight: 700; font-size: 24px; color: var(--ac-ink); line-height: 1.2; }

/* jsx wrapper cards: card-body p-2 (8px), radius 14, semibold 18px titles */
.pl-dcard { border-radius: 14px; padding: 8px; background: var(--ac-surface); border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); }
.pl-dcard-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } /* jsx: gap-2 mb-3 */
.pl-dcard-title { font-weight: 600; font-size: 18px; color: var(--ac-ink); }

/* jsx: league card = softBg (tinted), inner boxes = cardBg (white) — inner is LIGHTER */
.pl-lcard { height: 100%; border-radius: 16px; padding: 16px; background: #f7f9fc; display: flex; flex-direction: column; }
html.theme-dark .pl-lcard { background: #1b2a3d; }
.pl-lcard-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; } /* jsx: gap-2 mb-2 */
.pl-lcard-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--ac-ink); }
.pl-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.pl-lcard-type { font-size: 11px; color: var(--ac-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; } /* jsx: title row mb-1 = 4px */
.pl-lcard-rankbox { text-align: right; flex: 0 0 auto; }
.pl-lcard-rank-label { font-size: 10px; color: var(--ac-muted); text-transform: uppercase; letter-spacing: .06em; }
.pl-lcard-rank-val { font-weight: 700; font-size: 13px; }
.pl-lcard-outof { font-size: 11px; color: var(--ac-muted); }
.pl-lcard-badge { display: inline-flex; align-self: flex-start; border-radius: 999px; padding: 4px 8px; font-size: 11px; font-weight: 700; margin-bottom: 12px; } /* jsx: px-2 py-1 = 8px/4px */
/* jsx leaders box: rounded-3 p-2 mb-3, cardBg (lighter than the card around it) */
.pl-lcard-leaders { border-radius: 8px; padding: 8px; margin-bottom: 16px; background: var(--ac-surface); border: 1px solid var(--ac-border); }
.pl-lcard-leader { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ac-ink); }
.pl-lcard-leader + .pl-lcard-leader { margin-top: 8px; }
.pl-lcard-leader span:last-child { color: var(--ac-muted); }
.pl-lcard .pl-btn { margin-top: auto; }

.pl-featured { border-radius: 16px; padding: 16px; background: #f7f9fc; border: 1px solid var(--ac-border); }
html.theme-dark .pl-featured { background: #1b2a3d; }
.pl-featured-name { font-weight: 800; font-size: 20px; color: var(--ac-ink); margin-bottom: 8px; }
.pl-featured-desc { color: var(--ac-muted); font-size: 16px; line-height: 1.6; margin-bottom: 16px; } /* jsx: mb-3 = 16px */

.pl-empty { color: var(--ac-muted); padding: 24px; text-align: center; width: 100%; }

/* =====================================================================
   LIGHT-MODE landing. The landing was authored dark (matching the jsx),
   so when the html is NOT .theme-dark we re-skin the chrome to light.
   The hero keeps its dark-navy showcase look in both themes.
   ===================================================================== */
html:not(.theme-dark) body:has(.publicLanding) { background-color: var(--ac-bg) !important; }
html:not(.theme-dark) .publicLanding {
    background: var(--ac-bg);
    color: var(--ac-ink);
}
/* Week strip */
html:not(.theme-dark) .publicLanding .pl-weekstrip { background: #fff; border-bottom: 1px solid var(--ac-border); }
html:not(.theme-dark) .publicLanding .pl-week-game { border-color: var(--ac-border); }
html:not(.theme-dark) .publicLanding .pl-week-time { color: var(--ac-accent); }
html:not(.theme-dark) .publicLanding .pl-week-team-name span { color: var(--ac-ink); }
html:not(.theme-dark) .publicLanding .pl-week-team small { color: var(--ac-muted); }
/* Nav */
html:not(.theme-dark) .publicLanding .pl-nav { background: #fff; border-bottom: 1px solid var(--ac-border); backdrop-filter: none; }
html:not(.theme-dark) .publicLanding .pl-brand { color: var(--ac-ink); }
html:not(.theme-dark) .publicLanding .pl-nav-link,
html:not(.theme-dark) .publicLanding .pl-nav-muted { color: var(--ac-muted); }
html:not(.theme-dark) .publicLanding .pl-nav-link:hover { color: var(--ac-ink); }
html:not(.theme-dark) .publicLanding .pl-btn-outline { background: #fff; color: var(--ac-ink); border-color: var(--ac-border); }
html:not(.theme-dark) .publicLanding .pl-btn-outline:hover { background: var(--ac-bg); color: var(--ac-ink); }
/* Hero stays dark navy; only its outer shadow tones down on light */
html:not(.theme-dark) .publicLanding .pl-hero { box-shadow: var(--ac-shadow-md); }
/* Public Leagues card */
html:not(.theme-dark) .publicLanding .pl-leagues { background: #fff; border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); }
html:not(.theme-dark) .publicLanding .pl-leagues-title { color: var(--ac-ink); }
html:not(.theme-dark) .publicLanding .pl-league { background: #f6f8fc; border: 1px solid var(--ac-border); }
html:not(.theme-dark) .publicLanding .pl-league-name { color: var(--ac-ink); }
html:not(.theme-dark) .publicLanding .pl-league-sub { color: var(--ac-muted); }
html:not(.theme-dark) .publicLanding .pl-avatar { background: #e8f0ff; color: #2556c6; }
html:not(.theme-dark) .publicLanding .pl-leagues .pl-btn-outline { color: var(--ac-accent); border-color: #93c5fd; }
/* Feature cards + why-join */
html:not(.theme-dark) .publicLanding .pl-feature { background: #fff; border: 1px solid var(--ac-border); box-shadow: var(--ac-shadow-sm); }
html:not(.theme-dark) .publicLanding .pl-feature-title { color: var(--ac-ink); }
html:not(.theme-dark) .publicLanding .pl-feature-desc { color: var(--ac-muted); }
html:not(.theme-dark) .publicLanding .pl-why { background: #fff; border: 1px solid var(--ac-border); }
html:not(.theme-dark) .publicLanding .pl-why-title,
html:not(.theme-dark) .publicLanding .pl-why-item-title { color: var(--ac-ink); }
html:not(.theme-dark) .publicLanding .pl-why-item-desc { color: var(--ac-muted); }
/* Loading spinners on light */
html:not(.theme-dark) .publicLanding .spinner-border.text-light { color: var(--ac-accent) !important; }

/* Public Leagues card on the (light) dashboard — the .pl-league rows were
   designed for the dark landing, so re-skin them with the app tokens here */
.pl-dash .pl-league { background: #f7f9fc; border: 1px solid var(--ac-border); }
html.theme-dark .pl-dash .pl-league { background: #1b2a3d; }
.pl-dash .pl-league-name { color: var(--ac-ink); }
.pl-dash .pl-league-sub { color: var(--ac-muted); }
.pl-dash .pl-avatar { background: #e8f0ff; color: #2556c6; }
html.theme-dark .pl-dash .pl-avatar { background: #1d3a66; color: #bcd3ff; }
.pl-dash .pl-leagues-loading { text-align: center; padding: 16px; }
.pl-dash .pl-btn[disabled] { opacity: .5; pointer-events: none; }

/* Upcoming Deadlines rows — jsx: vstack gap-3 (16px apart), no dividers */
.pl-deadline-row {
    display: flex; justify-content: space-between; align-items: center; gap: 8px; /* jsx: gap-2 */
    padding: 0; text-decoration: none;
}
.pl-deadline-row + .pl-deadline-row { margin-top: 16px; }
.pl-deadline-row:hover .pl-deadline-league { color: var(--ac-accent); }
.pl-deadline-league { display: block; font-size: 13px; font-weight: 600; color: var(--ac-ink); }
.pl-deadline-sub { display: block; font-size: 11px; color: var(--ac-muted); }
.pl-deadline-time { font-size: 12px; font-weight: 700; color: #ef4444; white-space: nowrap; }

/* Dashboard buttons (light, like the picks-page buttons) */
.pl-dash .pl-btn { border-radius: 8px; padding: 8px 14px; font-weight: 700; font-size: .85rem; }
.pl-dash .pl-btn-outline { background: #fff; color: var(--ac-accent); border: 1px solid #93c5fd; }
.pl-dash .pl-btn-outline:hover { background: #dbeafe; color: var(--ac-accent); }
html.theme-dark .pl-dash .pl-btn-outline { background: transparent; color: #7fb0ff; border-color: #31517a; }
html.theme-dark .pl-dash .pl-btn-outline:hover { background: rgba(127,176,255,.12); color: #bcd3ff; }
.pl-dash .pl-btn-primary { background: var(--ac-accent); color: #fff; border: 1px solid var(--ac-accent); }