/* Shipping Practice Lab — V54.0 Enterprise Experience Foundation */
:root{
  color-scheme:light;
  --spl-font:Aptos,"Aptos Display","Segoe UI Variable","Segoe UI",Arial,sans-serif;
  --spl-page:#f4f7f8;
  --spl-page-alt:#edf2f4;
  --spl-surface:#ffffff;
  --spl-surface-2:#f7fafb;
  --spl-surface-3:#edf4f6;
  --spl-ink:#0b2435;
  --spl-text:#173448;
  --spl-muted:#607583;
  --spl-border:#d8e2e6;
  --spl-border-strong:#bccbd1;
  --spl-primary:#0f6685;
  --spl-primary-hover:#0b526d;
  --spl-primary-soft:#e7f2f5;
  --spl-success:#167252;
  --spl-warning:#a96108;
  --spl-danger:#b43c42;
  --spl-focus:#1b7fa2;
  --spl-shadow-sm:0 8px 26px rgba(8,35,51,.07);
  --spl-shadow-md:0 22px 60px rgba(8,35,51,.11);
  --spl-radius-sm:9px;
  --spl-radius-md:15px;
  --spl-radius-lg:24px;
  --spl-content:1280px;
  --spl-header-surface:rgba(255,255,255,.94);
  --spl-overlay:rgba(3,18,29,.58);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --spl-page:#07131d;
  --spl-page-alt:#0a1925;
  --spl-surface:#0d1d29;
  --spl-surface-2:#112532;
  --spl-surface-3:#162c3a;
  --spl-ink:#f2f7fa;
  --spl-text:#d9e6ec;
  --spl-muted:#9bb0bb;
  --spl-border:#29404d;
  --spl-border-strong:#3a5664;
  --spl-primary:#69bfd9;
  --spl-primary-hover:#88d1e6;
  --spl-primary-soft:#123344;
  --spl-success:#6ad1a9;
  --spl-warning:#f0b86a;
  --spl-danger:#ff9094;
  --spl-focus:#8fd8ee;
  --spl-shadow-sm:0 10px 28px rgba(0,0,0,.22);
  --spl-shadow-md:0 24px 70px rgba(0,0,0,.34);
  --spl-header-surface:rgba(7,19,29,.94);
  --spl-overlay:rgba(0,5,9,.76);
}
html{background:var(--spl-page);scroll-behavior:smooth}
html,body,button,input,select,textarea{font-family:var(--spl-font)!important}
body{background-color:var(--spl-page);color:var(--spl-text);transition:background-color .2s ease,color .2s ease}
body,main{min-width:0}
img,svg,video,canvas{max-width:100%}
button,input,select,textarea{font:inherit}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--spl-focus) 48%,transparent);outline-offset:3px}
::selection{background:color-mix(in srgb,var(--spl-primary) 25%,transparent)}

/* Shared component language */
.spl-card,[data-spl-card],.spl-panel{
  background:var(--spl-surface);color:var(--spl-text);border:1px solid var(--spl-border);
  border-radius:var(--spl-radius-md);box-shadow:var(--spl-shadow-sm)
}
.spl-button,[data-spl-button]{
  min-height:42px;padding:0 16px;border:1px solid var(--spl-border-strong);border-radius:var(--spl-radius-sm);
  background:var(--spl-surface);color:var(--spl-ink);font-weight:750;cursor:pointer;transition:.18s ease
}
.spl-button:hover,[data-spl-button]:hover{border-color:var(--spl-primary);color:var(--spl-primary);transform:translateY(-1px)}
.spl-button-primary,[data-spl-button="primary"]{background:var(--spl-primary);border-color:var(--spl-primary);color:#fff}
.spl-button-primary:hover,[data-spl-button="primary"]:hover{background:var(--spl-primary-hover);border-color:var(--spl-primary-hover);color:#fff}
.spl-field,input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea{
  border-color:var(--spl-border);color:var(--spl-text)
}
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-theme="dark"] select,html[data-theme="dark"] textarea{background-color:var(--spl-surface-2)!important;color:var(--spl-text)!important;border-color:var(--spl-border)!important}

/* Theme-safe global header */
html[data-theme="dark"] body .site-header.spl-universal-header{background:var(--spl-header-surface)!important;border-bottom-color:var(--spl-border)!important}
html[data-theme="dark"] body .site-header.spl-universal-header .brand-name,
html[data-theme="dark"] body .site-header.spl-universal-header .desktop-nav>a,
html[data-theme="dark"] body .site-header.spl-universal-header .account-link{color:var(--spl-ink)!important}
html[data-theme="dark"] body .site-header.spl-universal-header .brand-credit{color:var(--spl-muted)!important}
html[data-theme="dark"] body .site-header.spl-universal-header .desktop-nav .nav-cta,
html[data-theme="dark"] body .site-header.spl-universal-header .spl-language-menu>summary,
html[data-theme="dark"] body .site-header.spl-universal-header .spl-theme-toggle{background:var(--spl-surface-2)!important;border-color:var(--spl-border)!important;color:var(--spl-text)!important}

/* Compact global utilities */
.spl-nav-utilities{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.spl-language-menu{position:relative;margin:0}
.spl-language-menu>summary,.spl-theme-toggle{
  list-style:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:32px;min-width:40px;padding:0 9px;
  border:1px solid var(--spl-border-strong);border-radius:999px;background:var(--spl-surface);color:var(--spl-ink);
  font-size:10px;font-weight:800;line-height:1;cursor:pointer;box-shadow:none
}
.spl-language-menu>summary::-webkit-details-marker{display:none}
.spl-language-menu>summary .spl-language-flag{font-size:13px;line-height:1}
.spl-language-menu>summary .spl-language-code{letter-spacing:.04em}
.spl-language-popover{
  position:absolute;z-index:10020;top:calc(100% + 10px);right:0;width:178px;padding:7px;border:1px solid var(--spl-border);
  border-radius:13px;background:var(--spl-surface);box-shadow:var(--spl-shadow-md)
}
.spl-language-popover button{
  width:100%;display:flex;align-items:center;gap:9px;padding:9px 10px;border:0;border-radius:8px;background:transparent;
  color:var(--spl-text);text-align:left;font-size:12px;font-weight:700;cursor:pointer
}
.spl-language-popover button:hover,.spl-language-popover button.active{background:var(--spl-primary-soft);color:var(--spl-primary)}
.spl-language-popover .spl-language-flag{font-size:15px}
.spl-theme-toggle{font-size:14px;padding:0;width:32px;min-width:32px}
.spl-theme-toggle:hover,.spl-language-menu>summary:hover{border-color:var(--spl-primary);color:var(--spl-primary)}
.spl-mobile-drawer .spl-nav-utilities{justify-content:space-between;width:100%}
.spl-mobile-drawer .spl-language-menu{flex:1}
.spl-mobile-drawer .spl-language-menu>summary{width:100%;justify-content:flex-start}
.spl-mobile-drawer .spl-language-popover{left:0;right:auto;bottom:calc(100% + 8px);top:auto;width:100%}

/* Unified modal foundation */
.spl-modal-root{position:fixed;inset:0;z-index:11000;display:grid;place-items:center;padding:18px;background:var(--spl-overlay);backdrop-filter:blur(8px)}
.spl-modal-root[hidden]{display:none!important}
.spl-modal-dialog{width:min(560px,100%);max-height:min(760px,calc(100dvh - 36px));overflow:auto;background:var(--spl-surface);color:var(--spl-text);border:1px solid var(--spl-border);border-radius:var(--spl-radius-lg);box-shadow:var(--spl-shadow-md)}
.spl-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 22px 16px;border-bottom:1px solid var(--spl-border)}
.spl-modal-title{margin:0;color:var(--spl-ink);font-size:1.25rem!important;letter-spacing:-.025em}
.spl-modal-close{display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border:1px solid var(--spl-border);border-radius:999px;background:var(--spl-surface-2);color:var(--spl-text);font-size:22px;cursor:pointer}
.spl-modal-body{padding:22px}
.spl-modal-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:0 22px 22px}
html.spl-modal-open,html.spl-modal-open body{overflow:hidden}

/* Broad dark-mode compatibility for legacy sections */
html[data-theme="dark"] body :is(.card,.panel,.box,.tile,.module-card,.feature-card,.stat-card,.tool-card,.news-card,.job-card,.mg-detail,.mg-stat,.mg-toolbar,.mg-sources,.t-card,.t-card .box){
  background-color:var(--spl-surface)!important;color:var(--spl-text)!important;border-color:var(--spl-border)!important
}
html[data-theme="dark"] body :is(.mg-main,.ph-main,.page-main,.modules-section,.features-section){background-color:var(--spl-page)!important;color:var(--spl-text)!important}
html[data-theme="dark"] body :is(h1,h2,h3,h4,h5,h6,strong,.title,.card-title){color:var(--spl-ink)}
html[data-theme="dark"] body :is(p,li,.muted,.subtitle,.description,.mg-hero-copy,.explain){color:var(--spl-muted)}
html[data-theme="dark"] body :is(table,thead,tbody,tr,th,td){border-color:var(--spl-border)!important}
html[data-theme="dark"] body :is(th){background:var(--spl-surface-3)!important;color:var(--spl-ink)!important}
html[data-theme="dark"] body :is(td){background:var(--spl-surface)!important;color:var(--spl-text)!important}
html[data-theme="dark"] body :is(.mg-search input,.mg-search button,.mg-filters button,.mg-load button,.related a){background:var(--spl-surface-2)!important;color:var(--spl-text)!important;border-color:var(--spl-border)!important}

/* Responsive baseline */
@media(max-width:980px){
  .spl-language-popover{right:0}
  .spl-modal-dialog{border-radius:18px}
}
@media(max-width:640px){
  body{font-size:15px}
  .spl-modal-root{padding:10px;align-items:end}
  .spl-modal-dialog{width:100%;max-height:88dvh;border-radius:20px 20px 12px 12px}
  .spl-modal-head,.spl-modal-body{padding:18px}
  .spl-modal-actions{padding:0 18px 18px}
  .spl-modal-actions>*{flex:1 1 130px}
  table{font-size:.88rem}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Authentication follows the global theme while preserving its security UI */
html[data-theme="light"] body.spl-auth-page{
  --spl-a-bg:#eef3f5;--spl-a-panel:#ffffff;--spl-a-line:rgba(35,70,88,.16);--spl-a-text:#0c2738;
  --spl-a-muted:#607684;--spl-a-green:#0f7180;--spl-a-red:#b73f45;--spl-a-amber:#95610f;
  background:radial-gradient(circle at 15% 10%,rgba(15,113,128,.08),transparent 36%),radial-gradient(circle at 88% 18%,rgba(31,137,105,.07),transparent 30%),var(--spl-a-bg)!important
}
html[data-theme="light"] body.spl-auth-page .spl-auth-header{background:rgba(255,255,255,.9)!important}
html[data-theme="light"] body.spl-auth-page .spl-auth-layout{background:rgba(255,255,255,.96)!important;box-shadow:var(--spl-shadow-md)!important}
html[data-theme="light"] body.spl-auth-page .spl-auth-intro{background:linear-gradient(145deg,#e8f3f5,#f8fbfc)!important}
html[data-theme="light"] body.spl-auth-page .spl-auth-card{background:#fff!important}
html[data-theme="light"] body.spl-auth-page .spl-auth-field input,
html[data-theme="light"] body.spl-auth-page .spl-auth-account{background:#f5f8f9!important;color:var(--spl-a-text)!important}
html[data-theme="light"] body.spl-auth-page .spl-auth-legal span{color:var(--spl-a-text)!important}

/* Practice Hub token bridge */
html[data-theme="dark"] body.ph-body{
  --ph-ink:var(--spl-ink);--ph-ink-2:var(--spl-ink);--ph-muted:var(--spl-muted);--ph-line:var(--spl-border);
  --ph-soft:var(--spl-surface-2);--ph-paper:var(--spl-page);--ph-white:var(--spl-surface);--ph-blue:var(--spl-primary);
  background:var(--spl-page)!important;color:var(--spl-text)!important
}
html[data-theme="dark"] body.ph-body .ph-hero{background:linear-gradient(180deg,var(--spl-surface-2),var(--spl-page))!important;border-color:var(--spl-border)!important}
html[data-theme="dark"] body.ph-body .ph-hero-copy h1,
html[data-theme="dark"] body.ph-body .ph-section-heading h2,
html[data-theme="dark"] body.ph-body .ph-continue-card h3{color:var(--spl-ink)!important}
html[data-theme="dark"] body.ph-body .ph-hero-copy>p:not(.ph-kicker):not(.ph-disclaimer),
html[data-theme="dark"] body.ph-body .ph-continue-card p:last-child{color:var(--spl-muted)!important}
html[data-theme="dark"] body.ph-body :is(.ph-hero-panel,.ph-hero-numbers div,.ph-metric-grid article,.ph-skill,.ph-review-card,.ph-achievement-card,.ph-capstone-card,.ph-exam-card,.ph-certificate-card,.ph-dialog,.ph-lesson-main){background:var(--spl-surface)!important;color:var(--spl-text)!important;border-color:var(--spl-border)!important}
html[data-theme="dark"] body.ph-body :is(.ph-roadmap-mini span,.ph-continue-card,.ph-cert-requirements span,.ph-lesson-meta span,.ph-glossary-box){background:var(--spl-surface-2)!important;color:var(--spl-text)!important;border-color:var(--spl-border)!important}
html[data-theme="dark"] body.ph-body :is(.ph-concept-box,.ph-example-box){background:var(--spl-surface-3)!important;color:var(--spl-text)!important;border-color:var(--spl-border)!important}
html[data-theme="dark"] body.ph-body .ph-button-secondary{color:var(--spl-ink)!important;border-color:var(--spl-border-strong)!important}
html[data-theme="dark"] body.ph-body .ph-button-secondary:hover{background:var(--spl-surface)!important}
html[data-theme="dark"] body.ph-body .ph-dialog-close{background:var(--spl-surface-2)!important;color:var(--spl-ink)!important;border-color:var(--spl-border)!important}

/* Modules and general listing pages */
html[data-theme="dark"] body :is(.module-row,.module-list,.page-hero-modules,.section,.content-section,.dashboard-card){border-color:var(--spl-border)!important}
html[data-theme="dark"] body :is(.module-row,.dashboard-card){background:var(--spl-surface)!important;color:var(--spl-text)!important}
html[data-theme="dark"] body :is(.status-pill,.skill-tags span,.tag,.badge){background:var(--spl-primary-soft)!important;color:var(--spl-primary)!important;border-color:var(--spl-border)!important}

/* V54.2: mobile language choices open inline, not as a floating window. */
@media(max-width:980px){
  .spl-mobile-drawer .spl-language-menu[open] .spl-language-popover{
    position:static!important;inset:auto!important;width:100%!important;margin-top:8px!important;
    border-radius:10px!important;box-shadow:none!important;background:var(--spl-surface-2)!important
  }
}