/* Zureko global accents and opt-in controls. No dependency on the home page. */
:root,html[data-theme="light"] {
    --ng-global-27:#00865a;
    --ng-global-28:#7c40d7;
    --ng-global-29:#2563dd;
    --ng-global-30:#a46b05;
    --ng-global-31:#067b97;
    --ng-global-32:#ff283f;
}
html[data-theme="dark"],.od-theme-dark-global-1 {
    --ng-global-27:#37d79b;
    --ng-global-28:#b09aff;
    --ng-global-29:#74a8ff;
    --ng-global-30:#edc36e;
    --ng-global-31:#57cde3;
}
:root,.od-theme-dark-global-1 {
    --ng-accent-green:var(--ng-global-27);
    --ng-accent-purple:var(--ng-global-28);
    --ng-accent-blue:var(--ng-global-29);
    --ng-accent-gold:var(--ng-global-30);
    --ng-accent-cyan:var(--ng-global-31);
    --ng-accent-red:var(--ng-global-32);
    --ng-neon-edge-opacity:20%;
    --ng-neon-halo-opacity:26%;
    --ng-neon-depth-opacity:60%;
    --ng-neon-halo-size:24px;
    --ng-accent-motion:.28s;
    --ng-accent-edge-width:3px;
    --ng-house-logo-surface:#f1f3f5;
    --ng-house-logo-border:#d6dbe1;
    --ng-house-logo-ink:#263141;
    --ng-validation-ink:#111;
}
html[data-theme="dark"],.od-theme-dark-global-1 { --ng-validation-ink:#fff; }

/* Shared validation badge; legacy field-error classes are aliases, not themes.
   Keep readable ink independent of red brand buttons and profit/error values. */
html[data-theme] body.od-app :is(.od-validation-badge-global-1,.od-login-modal__error,.od-profile-error,.od-guide-error,.od-lev-tracker-modal__error) {
    display:block; width:fit-content; min-width:0; max-width:100%;
    justify-self:start; align-self:start; box-sizing:border-box;
    padding:4px 8px; border:0 solid var(--ng-accent-red);
    border-radius:var(--ng-radius-sm); color:var(--ng-validation-ink);
    background:color-mix(in srgb,var(--ng-accent-red) 10%,var(--ng-surface-home-panel));
    /* An inset stroke keeps a true half-pixel edge instead of the browser
       rounding a fractional CSS border back to one device pixel. */
    box-shadow:inset 0 0 0 .5px var(--ng-accent-red),0 0 6px color-mix(in srgb,var(--ng-accent-red) 16%,transparent);
    font-size:.78rem; font-weight:var(--ng-weight-regular); line-height:1.45;
    text-align:left; white-space:normal; overflow-wrap:anywhere;
}
html[data-theme] body.od-app :is(.od-validation-badge-global-1,.od-login-modal__error,.od-profile-error,.od-guide-error,.od-lev-tracker-modal__error):is(:empty,[hidden]) { display:none; }
.od-tone-global--green { --ng-accent-color:var(--ng-accent-green); }
.od-tone-global--purple { --ng-accent-color:var(--ng-accent-purple); }
.od-tone-global--blue { --ng-accent-color:var(--ng-accent-blue); }
.od-tone-global--gold { --ng-accent-color:var(--ng-accent-gold); }
.od-tone-global--cyan { --ng-accent-color:var(--ng-accent-cyan); }
.od-tone-global--red { --ng-accent-color:var(--ng-accent-red); }

/* House identities only: opaque neutral backing in both themes. Keep each
   consumer's existing icon size and never affect team/league shields. */
html[data-theme] body.od-app :is(.od-bookmaker-logo-global-1,.od-lev-bookmaker-logo,.od-score-bookmaker-logo,.od-bookmaker-global-1__logo) {
    box-sizing:border-box;
    padding:1px;
    border:1px solid var(--ng-house-logo-border);
    border-radius:3px;
    background:var(--ng-house-logo-surface);
    color:var(--ng-house-logo-ink);
    object-fit:contain;
    flex-shrink:0;
}
html[data-theme] body.od-app i.od-bookmaker-logo-global-1 { display:inline-flex; align-items:center; justify-content:center; min-width:14px; min-height:14px; line-height:1; }

/* Compact association marker inside a cell, not an accent on the cell itself.
   Wrap a house/logo label; only the short decorative line owns the tone. */
.od-house-accent-global-1 { display:inline-flex; align-items:center; gap:8px; min-width:0; max-width:100%; vertical-align:middle; }
.od-house-accent-global-1__line { display:block; width:var(--ng-accent-edge-width); height:24px; flex:0 0 var(--ng-accent-edge-width); border-radius:999px; background:var(--ng-accent-color,var(--ng-accent-blue)); }

/* Optional shared tinted surface: same mix as Home cards, without prescribing
   padding, border width, accent placement or layout. */
html[data-theme] body.od-app .od-card-tone-surface-global-1 {
    background:color-mix(in srgb,var(--ng-accent-color,var(--ng-accent-blue)) 5%,var(--ng-surface-home-panel));
    border-color:color-mix(in srgb,var(--ng-accent-color,var(--ng-accent-blue)) 28%,var(--od-border));
}

/* Composition: card + tone + optional neon. Does not prescribe a grid. */
html[data-theme] body.od-app :is(.od-accent-card-global-1,.od-accent-frame-global-1) {
    border:var(--ng-border-width) solid color-mix(in srgb,var(--ng-accent-color,var(--ng-accent-red)) 28%,var(--od-border));
    border-top:var(--ng-accent-edge-width) solid var(--ng-accent-color,var(--ng-accent-red));
    box-shadow:0 6px 20px -16px color-mix(in srgb,var(--ng-accent-color,var(--ng-accent-red)) 35%,transparent);
}
html[data-theme] body.od-app .od-accent-card-global-1 {
    position:relative; min-width:0; padding:var(--ng-accent-card-padding,20px);
    border-radius:var(--ng-radius-md);
    /* Explicitly opted-in cards own their tint, including inside legacy panels. */
    background:color-mix(in srgb,var(--ng-accent-color,var(--ng-accent-red)) 5%,var(--ng-surface-home-panel))!important;
    color:var(--ng-text); font-family:var(--ng-font); font-weight:var(--ng-weight-regular);
}
html[data-theme] body.od-app .od-accent-card-global-1::before { content:none; background:none; }
.od-accent-card-global-1 > :is(h2,h3,h4) { font-weight:var(--ng-weight-regular); }
html[data-theme] body.od-app .od-accent-badge-global-1 {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    min-width:40px; min-height:40px; padding:8px;
    border:var(--ng-border-width) solid color-mix(in srgb,var(--ng-accent-color,var(--ng-accent-red)) 28%,var(--od-border));
    border-radius:var(--ng-radius-sm); color:var(--ng-accent-color,var(--ng-accent-red));
    background:color-mix(in srgb,var(--ng-accent-color,var(--ng-accent-red)) 11%,var(--ng-surface-home-panel));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ng-accent-color,var(--ng-accent-red)) 18%,transparent);
    font:inherit;
}
html[data-theme] body.od-app .od-accordion-global-1 {
    padding:0; border:var(--ng-border-width) solid var(--od-border);
    border-top:var(--ng-accent-edge-width) solid var(--ng-accent-color,var(--ng-accent-red));
    border-radius:var(--ng-radius-md); background:var(--ng-surface-home-panel); color:var(--ng-text);
}
html[data-theme] body.od-app .od-accordion-global-1 > summary {
    display:flex; align-items:center; justify-content:space-between; gap:18px;
    min-height:62px; padding:18px 20px; list-style:none; cursor:pointer;
}
.od-accordion-global-1 > summary::-webkit-details-marker { display:none; }
.od-accordion-global-1 > summary::marker { content:""; }
.od-accordion-global-1 > summary::after { content:"+"; flex-shrink:0; color:var(--ng-accent-color,var(--ng-accent-red)); font-size:20px; line-height:1; transition:transform .2s; }
.od-accordion-global-1[open] > summary::after { transform:rotate(45deg); }
html[data-theme] body.od-app .od-accordion-global-1 > p { padding:0 20px 20px; margin:0; line-height:1.8; color:var(--ng-text-muted); }
html[data-theme] body.od-app .od-accordion-global-1[open] { border-color:color-mix(in srgb,var(--ng-accent-color,var(--ng-accent-red)) 55%,var(--od-border)); box-shadow:0 6px 24px color-mix(in srgb,var(--ng-accent-color,var(--ng-accent-red)) 12%,transparent); }
.od-accordion-global-1 > summary:focus-visible { outline:2px solid var(--ng-accent-color,var(--ng-accent-red)); outline-offset:-5px; border-radius:var(--ng-radius-md); }

/* Explicit placement shared by cards, frames and accordions. Omitting it
   retains the original top accent for backward compatibility. */
html[data-theme] body.od-app :is(.od-accent-card-global-1,.od-accent-frame-global-1,.od-accordion-global-1):is(.od-accent-global--superior,.od-card-neon-superior-global-1) {
    border-top:var(--ng-accent-edge-width) solid var(--ng-accent-color,var(--ng-accent-red));
}
html[data-theme] body.od-app :is(.od-accent-card-global-1,.od-accent-frame-global-1,.od-accordion-global-1):is(.od-accent-global--izquierda,.od-card-neon-izquierda-global-1) {
    border-top:var(--ng-border-width) solid color-mix(in srgb,var(--ng-accent-color,var(--ng-accent-red)) 28%,var(--od-border));
    border-left:var(--ng-accent-edge-width) solid var(--ng-accent-color,var(--ng-accent-red));
}

/* Compute the halo on each control so a descendant tone/custom color works.
   This utility changes only border/shadow, never the layout or background. */
html[data-theme] body.od-app :is(.od-neon-global-1,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1,.od-neon-mobile-global-1) {
    --ng-neon-shadow:0 0 0 1px color-mix(in srgb,var(--ng-neon-color,var(--ng-accent-color,var(--ng-accent-red))) var(--ng-neon-edge-opacity),transparent),0 0 var(--ng-neon-halo-size) color-mix(in srgb,var(--ng-neon-color,var(--ng-accent-color,var(--ng-accent-red))) var(--ng-neon-halo-opacity),transparent),0 10px 28px -16px color-mix(in srgb,var(--ng-neon-color,var(--ng-accent-color,var(--ng-accent-red))) var(--ng-neon-depth-opacity),transparent);
    transition:box-shadow var(--ng-accent-motion) ease,border-color var(--ng-accent-motion) ease,transform var(--ng-accent-motion) ease;
}
html[data-theme] body.od-app :is(.od-neon-global-1,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1):is(:focus-visible,:has(:focus-visible),.is-neon-active,.is-neon-preview) {
    border-color:var(--ng-neon-color,var(--ng-accent-color,var(--ng-accent-red))); box-shadow:var(--ng-neon-shadow);
}
@media(hover:hover) and (pointer:fine) {
    html[data-theme] body.od-app :is(.od-neon-global-1,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1):hover { border-color:var(--ng-neon-color,var(--ng-accent-color,var(--ng-accent-red))); box-shadow:var(--ng-neon-shadow); }
}
/* Mobile-only default: permanent cards keep the hover-equivalent halo below
   the shared breakpoint. Desktop keeps interaction states, even on touch PCs. */
@media(max-width:991.98px) {
    html[data-theme] body.od-app :is(.od-neon-global-1,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1):not(.od-accent-global--izquierda-interactiva) {
        border-color:var(--ng-neon-color,var(--ng-accent-color,var(--ng-accent-red))); box-shadow:var(--ng-neon-shadow);
    }
}
/* LEV reuses its table as mobile calculator cards instead of its desktop
   outcome cards. This opt-in never changes desktop table rows. */
@media(max-width:991.98px) and (hover:none), (max-width:991.98px) and (pointer:coarse) {
    html[data-theme] body.od-app .od-neon-mobile-global-1 {
        border-color:var(--ng-neon-color,var(--ng-accent-color,var(--ng-accent-red))); box-shadow:var(--ng-neon-shadow);
        border-top:var(--ng-accent-edge-width) solid var(--ng-accent-color,var(--ng-accent-red));
    }
}
/* Permanent directional accent on an existing surface: reuse its background, border
   and spacing. Full cards/frames above already own their physical left border.
   A bare control uses an inset stripe, independent of its page/class name. */
:is(.od-accent-global--izquierda,.od-card-neon-izquierda-global-1,.od-accent-global--izquierda-interactiva) { --ng-neon-stripe-x:var(--ng-accent-edge-width); --ng-neon-stripe-y:0px; }
:is(.od-accent-global--superior,.od-card-neon-superior-global-1) { --ng-neon-stripe-x:0px; --ng-neon-stripe-y:var(--ng-accent-edge-width); }
html[data-theme] body.od-app :is(.od-accent-global--izquierda,.od-accent-global--superior,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1):where(:not(.od-accent-card-global-1,.od-accent-frame-global-1,.od-accordion-global-1)) {
    position:relative;
    box-shadow:inset var(--ng-neon-stripe-x) var(--ng-neon-stripe-y) 0 var(--ng-accent-color,var(--ng-accent-red));
}
/* Selection-only left accent: clean at rest. Both variants share the same
   active stripe/halo and never change padding, border width or geometry. */
:is(.od-neon-global-1,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1).od-accent-global--izquierda-interactiva { position:relative; }
html[data-theme] body.od-app :is(.od-neon-global-1,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1):is(.od-accent-global--izquierda-interactiva,:is(.od-accent-global--izquierda,.od-accent-global--superior,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1):where(:not(.od-accent-card-global-1,.od-accent-frame-global-1,.od-accordion-global-1))):is(:focus-visible,:has(:focus-visible),.is-neon-active) {
    z-index:1;
    box-shadow:inset var(--ng-neon-stripe-x,var(--ng-accent-edge-width)) var(--ng-neon-stripe-y,0px) 0 var(--ng-neon-color,var(--ng-accent-color,var(--ng-accent-red))),var(--ng-neon-inset-shadow,0 0 0 transparent),var(--ng-neon-shadow);
}
@media(hover:hover) and (pointer:fine) {
    html[data-theme] body.od-app :is(.od-neon-global-1,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1):is(.od-accent-global--izquierda-interactiva,:is(.od-accent-global--izquierda,.od-accent-global--superior,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1):where(:not(.od-accent-card-global-1,.od-accent-frame-global-1,.od-accordion-global-1))):hover {
        z-index:1;
        box-shadow:inset var(--ng-neon-stripe-x,var(--ng-accent-edge-width)) var(--ng-neon-stripe-y,0px) 0 var(--ng-neon-color,var(--ng-accent-color,var(--ng-accent-red))),var(--ng-neon-inset-shadow,0 0 0 transparent),var(--ng-neon-shadow);
    }
}
@media(max-width:991.98px) {
    html[data-theme] body.od-app :is(.od-neon-global-1,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1):is(.od-accent-global--izquierda,.od-accent-global--superior,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1):where(:not(.od-accent-card-global-1,.od-accent-frame-global-1,.od-accordion-global-1,.od-accent-global--izquierda-interactiva)) {
        box-shadow:inset var(--ng-neon-stripe-x) var(--ng-neon-stripe-y) 0 var(--ng-neon-color,var(--ng-accent-color,var(--ng-accent-red))),var(--ng-neon-inset-shadow,0 0 0 transparent),var(--ng-neon-shadow);
    }
}
@media(max-width:575.98px) {
    html[data-theme] body.od-app .od-accordion-global-1 > summary { padding:15px; min-height:56px; font-size:13px; }
    html[data-theme] body.od-app .od-accordion-global-1 > p { padding:0 15px 15px; font-size:13px; }
}
/* Reusable opt-out for controls whose highlight belongs only to desktop.
   Mobile button focus remains accessible; the surface/selection stays clean. */
@media(max-width:991.98px) {
    html[data-theme] body.od-app :is(.od-neon-global-1,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1).od-accent-global--izquierda-interactiva.od-accent-global--interaccion-desktop {
        border-color:var(--ng-accent-mobile-border,var(--ng-global-21)); background:var(--ng-accent-mobile-surface,var(--ng-global-18));
        box-shadow:none; z-index:auto; cursor:default;
    }
}
@media(prefers-reduced-motion:reduce) {
html[data-theme] body.od-app :is(.od-neon-global-1,.od-card-neon-izquierda-global-1,.od-card-neon-superior-global-1,.od-neon-mobile-global-1),.od-accordion-global-1 > summary::after { transition:none; }
}