:root{
  --navy:#0f172a;
  --navy-2:#172033;
  --teal:#0f766e;
  --lime:#b4d620;
  --bg:#f3f7fb;
  --paper:#ffffff;
  --line:#b8c7d9;
  --text:#172033;
  --muted:#64748b;
  --soft:#f8fafc;
  --bottom-h:84px;
}
*{box-sizing:border-box;min-width:0}
html{
  min-height:100%;
  scroll-behavior:smooth;
  background:var(--bg);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  min-height:100%;
  margin:0;
  overflow-x:hidden;
  color:var(--text);
  background:var(--bg);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin-top:0}
.app-shell{
  width:100%;
  min-height:100svh;
  padding-bottom:calc(var(--bottom-h) + 24px + env(safe-area-inset-bottom));
}
.app-main{
  width:min(100%,780px);
  margin:0 auto;
  padding:14px 14px 28px;
}
.panel{display:none}
.panel.active{display:block}
.home-wordmark{
  min-width:0;
  display:flex;
  flex-direction:column;
  border:0;
}
.header-actions{display:flex;align-items:center;gap:10px}
.scorm-status{
  min-height:36px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:7px;
  color:#dbeafe;
  background:#172033;
  border:1px solid #42526c;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
.scorm-status::before{
  content:"";
  width:8px;
  height:8px;
  flex:0 0 8px;
  background:#ef4444;
  border-radius:50%;
}
.scorm-status.connected::before{background:#2dd4bf}

.offline-pill{
  display:none;
  position:fixed;
  z-index:300;
  right:12px;
  top:calc(12px + env(safe-area-inset-top));
  max-width:calc(100% - 24px);
  padding:8px 11px;
  color:#fff;
  background:#991b1b;
  border:1px solid #7f1d1d;
  border-radius:6px;
  box-shadow:0 7px 20px rgba(15,23,42,.22);
  font-size:11px;
  font-weight:700;
}
.offline-pill.visible{display:block}

.page-intro{
  margin:0 0 14px;
  padding:17px;
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  gap:13px;
  align-items:center;
}
.page-intro-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  font-size:24px;
}
.page-intro h2{
  margin:3px 0 4px;
  font-size:25px;
  line-height:1.12;
}
.page-intro p{
  margin:0;
  font-size:12px;
  line-height:1.45;
}
.page-intro span:not(.page-intro-icon){
  display:block;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.search-box{
  width:100%;
  margin:0 0 10px;
  padding:7px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 44px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
}
.search-leading{
  height:46px;
  display:grid;
  place-items:center;
  color:var(--teal);
  font-size:20px;
}
.search-box input{
  width:100%;
  min-height:46px;
  padding:8px;
  color:var(--text);
  background:#fff;
  border:0;
  outline:0;
  font-size:16px;
}
.search-box button{
  width:44px;
  height:44px;
  padding:0;
  color:#fff;
  background:var(--navy-2);
  border:0;
  font-size:21px;
}
.search-result-bar{
  min-height:38px;
  margin:0 0 9px;
  padding:9px 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--muted);
  background:#eef5fb;
  border:1px solid var(--line);
  font-size:10px;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.search-result-bar strong{
  color:var(--text);
  font-size:11px;
  white-space:nowrap;
}
.filter-chips{
  margin:0 0 10px;
  padding:1px 0 3px;
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
}
.filter-chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;
  min-height:36px;
  padding:7px 11px;
  color:var(--text);
  background:#fff;
  border:1px solid #9fb4ca;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.module-list{display:grid;gap:10px}
.module-card{
  position:relative;
  min-height:96px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
}
.module-card-main{
  min-height:96px;
  padding:13px 54px 13px 15px;
  display:block;
  color:inherit;
  text-decoration:none;
}
.module-card-head{
  margin-bottom:7px;
  display:flex;
  align-items:center;
  gap:8px;
}
.module-number{
  width:35px;
  height:27px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--teal);
  font-size:11px;
  font-weight:800;
}
.module-category{
  color:var(--teal);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.module-card h3{
  margin:0 0 6px;
  color:var(--text);
  font-size:16px;
  line-height:1.2;
}
.module-formula{
  margin:0 0 6px;
  padding:7px 9px;
  color:#153e63;
  background:#f3f7fa;
  font-family:Georgia,"Times New Roman",serif;
  font-size:14px;
  line-height:1.35;
}
.module-description{
  margin:0;
  color:var(--muted);
  font-size:11px;
  line-height:1.42;
}
.module-meta{margin-top:7px;display:flex;flex-wrap:wrap;gap:5px}
.tag{
  padding:3px 6px;
  color:#43566a;
  background:var(--soft);
  border:1px solid var(--line);
  font-size:9px;
}
.tag.done{color:#166534;background:#ecfdf5;border-color:#86efac}
.favorite-button{
  position:absolute;
  z-index:2;
  right:9px;
  top:9px;
  width:38px;
  height:38px;
  padding:0;
  display:grid;
  place-items:center;
  color:#718193;
  background:#fff;
  border:1px solid #b5c3cf;
  font-size:20px;
}
.module-open-arrow{
  position:absolute;
  right:13px;
  bottom:11px;
  color:var(--teal);
  font-size:21px;
}
.empty-state{
  padding:28px 18px;
  color:var(--muted);
  background:#fff;
  border:1px dashed #9fb4ca;
  text-align:center;
  font-size:13px;
}

.progress-dashboard{
  padding:14px;
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:12px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
}
.progress-ring{
  --progress:0deg;
  position:relative;
  width:108px;
  height:108px;
  display:grid;
  place-items:center;
  background:conic-gradient(var(--teal) var(--progress),#dfe8ee 0);
  border-radius:50%;
}
.progress-ring::before{
  content:"";
  position:absolute;
  inset:10px;
  background:#fff;
  border-radius:50%;
}
.progress-ring>div{position:relative;z-index:1;text-align:center}
.progress-ring strong{display:block;font-size:20px;line-height:1.1}
.progress-ring span{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
}
.progress-summary{display:grid;gap:7px}
.progress-card{
  padding:10px;
  background:var(--soft);
  border:1px solid var(--line);
}
.progress-card span{
  display:block;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
}
.progress-card strong{
  display:inline-block;
  margin-top:3px;
  font-size:22px;
  line-height:1;
}
.progress-card small{
  margin-left:4px;
  color:var(--muted);
  font-size:10px;
}
.progress-bar{
  height:9px;
  margin:10px 0 12px;
  overflow:hidden;
  background:#dbe5ec;
  border:1px solid var(--line);
}
.progress-bar span{
  display:block;
  width:0;
  height:100%;
  background:var(--teal);
  transition:width .25s;
}
.app-button{
  min-height:48px;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
  background:#fff;
  border:1px solid #9fb4ca;
  font-weight:700;
  text-align:center;
}
.reset-button{width:100%;color:#8a2631;border-color:#deb5ba}

.continue-card{
  position:relative;
  min-height:108px;
  padding:14px 48px 14px 14px;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:12px;
  align-items:center;
  color:inherit;
  text-decoration:none;
}
.continue-number{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  font-weight:800;
}
.continue-card h3{margin:0 0 5px;font-size:16px}
.continue-card p{margin:0;font-size:13px}
.continue-arrow{position:absolute;right:14px;bottom:13px}
.category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.category-card{
  position:relative;
  min-height:158px;
  padding:14px;
  display:flex;
  flex-direction:column;
  text-align:left;
}
.category-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
}
.category-card h3{margin:12px 0 5px;font-size:15px;line-height:1.2}
.category-card p{margin:0;font-size:11px;line-height:1.4}
.category-card strong{margin-top:auto;padding-top:9px;font-size:10px}

.app-bottom-nav{
  position:fixed;
  z-index:180;
  left:0;
  right:0;
  bottom:0;
  min-height:calc(var(--bottom-h) + env(safe-area-inset-bottom));
  padding:5px 4px env(safe-area-inset-bottom);
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.nav-item{
  position:relative;
  min-height:62px;
  padding:6px 2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#9fb4ca;
  background:transparent;
  border:0;
  font-size:9px;
  line-height:1.1;
}
.nav-icon{
  min-height:25px;
  display:grid;
  place-items:center;
  font-size:20px;
  line-height:1;
}
.nav-item.active{color:var(--lime)}

@media(min-width:700px){
  .app-main{padding:18px}
  .module-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .category-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:420px){
  .app-main{padding-left:12px;padding-right:12px}
  .page-intro{grid-template-columns:46px minmax(0,1fr);padding:15px}
  .page-intro-icon{width:46px;height:46px}
  .page-intro h2{font-size:22px}
  .progress-dashboard{grid-template-columns:98px minmax(0,1fr)}
  .progress-ring{width:94px;height:94px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}