/* LeanSigmaVN 5.0.1 — LMS foundation layer */
:root {
  --ls-brand: #0b7a43;
  --ls-brand-strong: #07552f;
  --ls-accent: #f5b942;
  --ls-ink: #10231a;
  --ls-text: #334155;
  --ls-muted: #64748b;
  --ls-surface: #ffffff;
  --ls-soft: #f4faf6;
  --ls-border: #dcebe1;
  --ls-radius: 16px;
  --ls-shadow: 0 12px 32px rgba(7, 85, 47, .10);
  --ls-focus: 0 0 0 4px rgba(11, 122, 67, .20);
}

/* Viewport guard: prevent fixed widgets and mobile grids from creating page-level horizontal scroll. */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, embed, object { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

.ls-container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.ls-card { background: var(--ls-surface); border: 1px solid var(--ls-border); border-radius: var(--ls-radius); box-shadow: var(--ls-shadow); }
.ls-eyebrow { color: var(--ls-brand); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ls-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .7rem 1.1rem; border: 0; border-radius: 999px; font-weight: 750; text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.ls-button:hover { transform: translateY(-2px); }
.ls-button:focus-visible, .ls-input:focus-visible, .ls-select:focus-visible { outline: 0; box-shadow: var(--ls-focus); }
.ls-button--primary { color: #fff; background: linear-gradient(135deg, var(--ls-brand), var(--ls-brand-strong)); box-shadow: 0 8px 20px rgba(11, 122, 67, .22); }
.ls-button--secondary { color: var(--ls-brand-strong); background: #e8f5ed; }
.ls-button--ghost { color: var(--ls-brand); background: transparent; border: 1px solid var(--ls-brand); }
.ls-progress { height: 8px; overflow: hidden; border-radius: 99px; background: #e5efe8; }
.ls-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ls-brand), #36b66b); }
.ls-status { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.ls-status--success { color: #166534; background: #dcfce7; }
.ls-status--locked { color: #475569; background: #e2e8f0; }
.ls-status--warning { color: #854d0e; background: #fef3c7; }
.ls-input, .ls-select { width: 100%; min-height: 44px; padding: .65rem .8rem; border: 1px solid var(--ls-border); border-radius: 10px; background: #fff; color: var(--ls-ink); }
.ls-empty, .ls-error { padding: 2rem; border: 1px dashed var(--ls-border); border-radius: var(--ls-radius); text-align: center; color: var(--ls-muted); background: var(--ls-soft); }
.ls-error { color: #991b1b; border-color: #fecaca; background: #fff7f7; }
.ls-home-cockpit { position: relative; overflow: hidden; padding: 72px 0; background: radial-gradient(circle at 90% 10%, #d9f7e4 0, transparent 34%), linear-gradient(135deg, #f7fcf8, #edf8f0); }
.ls-home-cockpit__intro { max-width: 680px; margin-bottom: 30px; }
.ls-home-cockpit h2 { margin: 8px 0 12px; color: var(--ls-ink); font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -.04em; }
.ls-home-cockpit p { max-width: 620px; color: var(--ls-text); font-size: 1.05rem; line-height: 1.65; }
.ls-home-cockpit__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ls-cockpit-card { min-height: 180px; padding: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.ls-cockpit-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(7, 85, 47, .16); }
.ls-cockpit-card h3 { margin: 28px 0 8px; color: var(--ls-ink); font-size: 1.2rem; }
.ls-cockpit-card p { margin: 0; color: var(--ls-muted); font-size: .95rem; }
.ls-dashboard { padding-block: 36px 72px; }
.ls-dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 24px 0 36px; padding: 28px; background: linear-gradient(135deg, #f0fbf3, #fff); }
.ls-dashboard-hero h2 { margin: 8px 0; color: var(--ls-ink); }
.ls-dashboard-hero p { margin: 0; color: var(--ls-muted); }
/* Catalog/course cards — 5.0.1 visual layer */
.course-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.home-course-card, .cicc-course-card { position: relative; display: flex; flex-direction: column; min-height: 100%; overflow: hidden; border: 1px solid var(--ls-border); border-radius: var(--ls-radius); background: var(--ls-surface); box-shadow: var(--ls-shadow); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.home-course-card:hover, .cicc-course-card:hover { transform: translateY(-6px); border-color: #9fd5b4; box-shadow: 0 20px 42px rgba(7, 85, 47, .16); }
.home-course-card .hcc-thumb { min-height: 190px; }
.home-course-card .hcc-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px; }
.home-course-card .hcc-body h3, .cicc-course-card h3 { margin: 0; color: var(--ls-ink); font-size: 1.05rem; line-height: 1.4; }
.home-course-card .hcc-price { margin-top: auto; color: var(--ls-brand); font-weight: 800; }
.cicc-course-card { padding: 20px; }
.cicc-course-card .cicc-progress-bar { height: 8px; overflow: hidden; margin-top: 18px; border-radius: 99px; background: #e5efe8; }
.cicc-course-card .cicc-progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ls-brand), #36b66b); }
.cicc-course-card .cicc-btn { margin-top: 18px; color: var(--ls-brand); font-weight: 800; text-decoration: none; }
/* Global shell — consistent 5.0.1 navigation and footer */
#site-header.site-header { background: rgba(255,255,255,.94); border-bottom: 1px solid var(--ls-border); box-shadow: 0 5px 24px rgba(7,85,47,.07); backdrop-filter: blur(14px); }
#site-header .main-nav a { color: var(--ls-ink); font-weight: 700; transition: color .2s ease, background .2s ease; }
#site-header .main-nav a:hover, #site-header .main-nav a:focus-visible { color: var(--ls-brand); }
#site-header .btn-primary, #site-header .btn.btn-primary { border-radius: 999px; background: linear-gradient(135deg, var(--ls-brand), var(--ls-brand-strong)); box-shadow: 0 7px 16px rgba(11,122,67,.2); }
.footer { position: relative; overflow: hidden; background: #0b2417; border-top: 4px solid var(--ls-accent); }
.footer a { transition: color .2s ease, transform .2s ease; }
.footer a:hover { color: #b9f3c9 !important; }
#mobile-bottom-nav { background: rgba(11,36,23,.96) !important; border-top-color: rgba(185,243,201,.18) !important; }
#mobile-bottom-nav .nav-item { color: rgba(255,255,255,.7) !important; }
#mobile-bottom-nav .nav-item.active, #mobile-bottom-nav .nav-item:hover { color: #b9f3c9 !important; }
/* Auth surfaces */
.auth-page{position:relative!important;overflow:hidden!important;background:radial-gradient(circle at 85% 15%,#d9f7e4 0,transparent 32%),linear-gradient(135deg,#f4faf6,#fff)!important;}
.auth-box{border:1px solid var(--ls-border)!important;border-radius:24px!important;box-shadow:0 24px 70px rgba(7,85,47,.14)!important;}
.auth-box h1{color:var(--ls-ink)!important;letter-spacing:-.04em!important;}
.auth-field input,.auth-field select{border-color:var(--ls-border)!important;border-radius:12px!important;min-height:46px!important;}
.auth-field input:focus,.auth-field select:focus{border-color:var(--ls-brand)!important;box-shadow:var(--ls-focus)!important;}
.auth-submit{border-radius:999px!important;background:linear-gradient(135deg,var(--ls-brand),var(--ls-brand-strong))!important;box-shadow:0 10px 20px rgba(11,122,67,.2)!important;}
.auth-social button{border-color:var(--ls-border)!important;border-radius:12px!important;}
.auth-ecosystem{border:1px solid var(--ls-border)!important;background:#f7fcf8!important;}
/* Checkout / payment states */
.pay-wrap{max-width:900px!important;padding-block:48px 90px!important;}
.pay-card{border-color:var(--ls-border)!important;border-radius:20px!important;box-shadow:0 14px 34px rgba(7,85,47,.08)!important;}
.pay-card h2{color:var(--ls-ink)!important;letter-spacing:-.03em!important;}
.pay-info{border-color:var(--ls-border)!important;background:#f7fcf8!important;}
.pay-info td{border-bottom-color:var(--ls-border)!important;}
.pay-ref{background:linear-gradient(135deg,#092416,#0b7a43)!important;box-shadow:0 12px 24px rgba(7,85,47,.16)!important;}
.pay-ref code{color:#b9f3c9!important;}
.pay-btn{background:linear-gradient(135deg,var(--ls-brand),var(--ls-brand-strong))!important;box-shadow:0 10px 20px rgba(11,122,67,.18)!important;}
.pay-note{border-color:#f4d47a!important;border-radius:12px!important;}
@media(max-width:640px){.pay-wrap{padding:28px 12px 60px!important;}.pay-card{padding:22px!important;}.pay-info{font-size:14px!important;}.pay-info td{padding:9px 8px!important;}}
/* Error and empty states */
.page-content .empty-state,.page-content .ach-empty,.page-content .error-state{border:1px dashed var(--ls-border)!important;border-radius:20px!important;background:#f7fcf8!important;color:var(--ls-muted)!important;}
.page-content h1,.page-content h2{color:var(--ls-ink)!important;letter-spacing:-.03em!important;}
.page-content input[type="search"],.page-content input[type="text"]{border-color:var(--ls-border)!important;border-radius:12px!important;min-height:46px!important;}
.page-content input:focus{outline:0!important;border-color:var(--ls-brand)!important;box-shadow:var(--ls-focus)!important;}
.ach-empty{max-width:620px!important;margin:36px auto!important;padding:44px 24px!important;text-align:center!important;}
.ach-empty-icon{font-size:48px!important;opacity:.8;}
/* Learner account cockpit */
.dash-vip{background:#f4faf6!important;}
.dash-sidebar,.kpi-card,.gamification-card,.course-card,.eco-card{border-color:var(--ls-border)!important;border-radius:18px!important;box-shadow:0 12px 30px rgba(7,85,47,.08)!important;}
.dash-cover{background:radial-gradient(circle at 80% 10%,rgba(185,243,201,.22),transparent 30%),linear-gradient(135deg,#092416,#0b7a43 70%,#36b66b)!important;}
.dash-main h1,.dash-main h2,.dash-sidebar h3{color:var(--ls-ink)!important;letter-spacing:-.03em!important;}
.kpi-card{transition:transform .2s ease,box-shadow .2s ease!important;}
.kpi-card:hover,.course-card:hover,.gamification-card:hover{transform:translateY(-5px)!important;box-shadow:0 22px 44px rgba(7,85,47,.15)!important;}
.xp-bar,.course-progress{background:#e5efe8!important;border-radius:99px!important;overflow:hidden!important;}
.xp-bar-fill,.course-progress-fill{border-radius:inherit!important;background:linear-gradient(90deg,var(--ls-brand),#36b66b)!important;}
.course-btn{border-radius:999px!important;font-weight:800!important;}
.cert-chip{border-color:#b9e7c6!important;background:#f0fbf3!important;border-radius:12px!important;}
@media(max-width:760px){.dash-grid{grid-template-columns:1fr!important;}.kpi-row{grid-template-columns:repeat(2,1fr)!important;}.course-grid{grid-template-columns:1fr!important;}}
@media (prefers-reduced-motion: reduce) { .ls-button { transition: none; } .ls-button:hover { transform: none; } }
@media (max-width: 760px) { .ls-home-cockpit__grid { grid-template-columns: 1fr; } .ls-dashboard-hero { align-items: stretch; flex-direction: column; } }
@media (max-width: 640px) { .ls-container { width: min(100% - 24px, 1180px); } .ls-button { width: 100%; } }