@import url('/screens/user/theory/index.css');

.theory-card{box-sizing:border-box;grid-template-rows:auto 1fr auto auto}.theory-card img{height:110px;object-fit:contain;background:rgba(255,255,255,.03)}.theory-card-progress{min-width:0}.mobile-hero-wrap,.rights-mobile-intro{display:none}

@media(min-width:760px){.theory-card{min-height:220px}.theory-card img{height:110px}.theory-card h3{font-size:1rem}.theory-card-progress{margin:0 2px 3px}}

@media(min-width:1100px){.theory-card{min-height:250px;height:250px;grid-template-rows:140px 1fr auto 16px}.theory-card img{height:140px}.theory-card h3{font-size:1rem;line-height:1.2}}

@media(max-width:759px){.theory-page{padding:72px 12px 88px}.theory-heading{display:none}.theory-search{margin:0 -12px 0;padding:10px 14px;border-radius:0}.important-info{gap:26px;margin-top:14px}.important-row>header{display:none}.mobile-hero-wrap{display:block}.main-row>.theory-card-grid .main-first-card,.rights-row>.theory-card-grid .rights-first-card{display:none}.theory-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.theory-card{min-width:0;width:100%;height:156px;min-height:156px;padding:0;grid-template-rows:86px 1fr 0 16px;border-radius:12px}.theory-card img{width:100%;height:86px;margin:0;object-fit:contain;background:rgba(255,255,255,.03)}.theory-card h3{min-width:0;margin:0 6px;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:18px;line-height:1.2;text-align:center;text-transform:uppercase;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;transform:translateY(8px)}.theory-card-meta{display:none!important}.theory-card-progress{width:100%;margin:0}.mobile-hero-card{display:block;height:154px;min-height:154px;overflow:hidden}.mobile-hero-card img{display:block;width:100%;height:138px;object-fit:cover}.mobile-hero-card h3{position:absolute;left:10px;right:10px;bottom:22px;height:auto;margin:0;color:#fff;font-size:16px;line-height:1.15;text-align:center;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 5px rgba(0,0,0,.8);transform:none}.mobile-hero-card .theory-card-progress{position:absolute;left:0;right:0;bottom:0}.rights-row{padding-top:14px;border-top:1px solid var(--via-border)}.rights-mobile-intro{display:grid;justify-items:center;gap:5px;margin:0 0 12px;text-align:center}.rights-mobile-intro strong{font-size:22px;font-weight:800;text-transform:uppercase}.rights-mobile-intro p{margin:0;color:var(--via-muted);font-size:14px;line-height:1.35}.rights-mobile-intro button{padding:2px 8px;color:var(--via-text);font:inherit;font-size:11px;font-weight:800;background:rgba(255,255,255,.08);border:1px solid var(--via-border);border-radius:12px;cursor:pointer}.rights-mobile-intro .rights-hidden{max-width:520px;color:var(--via-muted);font-size:13px}.rights-mobile-intro a{color:var(--via-accent);font-size:14px;text-decoration:underline}.mobile-rights-hero-card{display:block;height:154px;min-height:154px;overflow:hidden}.mobile-rights-hero-card img{display:block;width:100%;height:138px;object-fit:cover}.mobile-rights-hero-card h3{position:absolute;left:10px;right:10px;bottom:22px;height:auto;margin:0;color:#fff;font-size:16px;line-height:1.15;text-align:center;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 2px 5px rgba(0,0,0,.8);transform:none}.mobile-rights-hero-card .theory-card-progress{position:absolute;left:0;right:0;bottom:0}.rights-row .theory-card-grid{margin-top:0}.theory-card .lock{top:8px;right:8px;font-size:20px}.theory-empty{grid-column:1/-1}}
@media(min-width:760px){.theory-card h3{transform:translateY(6px)}}
.main-row .theory-card h3{display:block;white-space:nowrap;overflow:visible;text-overflow:clip;font-size:18px;letter-spacing:-.15px;transform:translateY(6px) scaleX(var(--title-scale,1));transform-origin:center}
@media(max-width:759px){.main-row .theory-card h3{font-size:18px;transform:translateY(8px) scaleX(var(--title-scale,1))}.main-row .mobile-hero-card h3{font-size:16px;letter-spacing:0;transform:translateY(0) scaleX(var(--title-scale,1))}}
.theory-card{padding:0}.theory-card-progress{margin:0!important}.main-row .theory-card h3{margin-bottom:0;text-align:left;transform:translateY(10px) scaleX(var(--title-scale,1));transform-origin:left center}
@media(max-width:759px){.main-row .theory-card h3{transform:translateY(10px) scaleX(var(--title-scale,1));transform-origin:left center}.main-row .mobile-hero-card h3{transform:translateY(0) scaleX(var(--title-scale,1));transform-origin:left center}}
.theory-card{grid-template-rows:auto 1fr auto}
@media(min-width:1100px){.theory-card{grid-template-rows:140px 1fr 16px}}
@media(max-width:759px){.theory-card{grid-template-rows:86px 1fr 16px}}
.main-row .theory-card h3{align-self:start;padding-top:6px;padding-bottom:0;transform:scaleX(var(--title-scale,1));transform-origin:left top}
@media(max-width:759px){.theory-card:not(.mobile-hero-card):not(.mobile-rights-hero-card){height:140px;min-height:140px}.main-row .theory-card h3{padding-top:4px;transform:scaleX(var(--title-scale,1));transform-origin:left top}.main-row .mobile-hero-card h3{align-self:auto;padding-top:0;padding-bottom:0;transform:scaleX(var(--title-scale,1));transform-origin:left center}}

@media(min-width:1100px){.main-row .theory-card:not(.mobile-hero-card){height:190px;min-height:190px;grid-template-rows:140px 1fr 16px}}
@media(min-width:760px) and (max-width:1099px){.main-row .theory-card:not(.mobile-hero-card){height:190px;min-height:190px;grid-template-rows:110px 1fr 16px}}
@media(max-width:759px){.main-row .theory-card:not(.mobile-hero-card){height:126px;min-height:126px;grid-template-rows:86px 1fr 16px}}

@media(min-width:1100px){.main-row .theory-card:not(.mobile-hero-card){grid-template-rows:140px 1fr 28px}.rights-row .theory-card{grid-template-rows:140px 1fr}}
@media(min-width:760px) and (max-width:1099px){.main-row .theory-card:not(.mobile-hero-card){grid-template-rows:110px 1fr 28px}.rights-row .theory-card{grid-template-rows:110px 1fr}}
@media(max-width:759px){.main-row .theory-card:not(.mobile-hero-card){grid-template-rows:86px 1fr 28px}.rights-row .theory-card{grid-template-rows:86px 1fr}}
@media(min-width:760px){.main-row .theory-card:not(.mobile-hero-card){height:202px;min-height:202px}}
@media(max-width:759px){.main-row .theory-card:not(.mobile-hero-card){height:138px;min-height:138px}.main-row .mobile-hero-card{height:154px;min-height:154px}.main-row .mobile-hero-card h3{bottom:22px}}
@media(min-width:760px){.rights-row .theory-card:not(.mobile-rights-hero-card){height:auto;min-height:0;align-self:stretch;grid-template-rows:140px 1fr;align-content:stretch}.rights-row .theory-card:not(.mobile-rights-hero-card) h3{margin:8px 6px}}
@media(max-width:759px){.rights-row .theory-card:not(.mobile-rights-hero-card){height:auto;min-height:0;align-self:stretch;grid-template-rows:86px 1fr;align-content:stretch}.rights-row .theory-card:not(.mobile-rights-hero-card) h3{margin:8px 6px}}
.main-row .theory-card:not(.mobile-hero-card) img{display:block;width:100%;margin:0;border-radius:0;object-fit:contain}
.main-row .main-first-card img,.main-row .mobile-hero-card img{object-fit:fill}
.main-row .main-first-card{padding:0!important}
.main-row .main-first-card img{width:100%!important;margin:0!important;object-fit:fill!important}
.main-row .mobile-hero-card{padding:0!important}
.main-row .mobile-hero-card img{width:100%!important;margin:0!important;object-fit:fill!important}
@media(min-width:760px){.main-row .theory-card:not(.mobile-hero-card){height:210px;min-height:210px}}
@media(max-width:759px){.main-row .theory-card:not(.mobile-hero-card){height:152px;min-height:152px}}
@media(min-width:1100px){.main-row .theory-card:not(.mobile-hero-card){height:218px;min-height:218px;grid-template-rows:140px 1fr 32px}}
@media(min-width:760px) and (max-width:1099px){.main-row .theory-card:not(.mobile-hero-card){height:218px;min-height:218px;grid-template-rows:110px 1fr 32px}}
@media(max-width:759px){.main-row .theory-card:not(.mobile-hero-card){height:160px;min-height:160px;grid-template-rows:86px 1fr 24px}}
.theory-page .theory-search{border:1px solid var(--via-border);border-radius:14px;overflow:hidden;box-shadow:var(--via-shadow)}
.theory-page .theory-search input::placeholder{color:var(--via-muted);opacity:.9}
.theory-page .theory-search{animation:theory-search-in .42s ease-out both}.theory-page .theory-heading{animation:theory-heading-in .48s .06s ease-out both}.important-row{animation:theory-section-in .52s .1s ease-out both}.theory-card{animation:theory-card-in .5s cubic-bezier(.2,.75,.25,1) var(--card-delay,0ms) both}.theory-card:hover{transform:translateY(-4px);border-color:rgba(97,165,255,.68);box-shadow:0 16px 34px rgba(0,0,0,.25)}
@keyframes theory-search-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@keyframes theory-heading-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}@keyframes theory-section-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes theory-card-in{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.theory-page .theory-search,.theory-page .theory-heading,.important-row,.theory-card,.theory-card-progress{animation:none}.theory-card{transition:none}}
.rights-row .rights-first-card img,.rights-row .mobile-rights-hero-card img{object-fit:fill}
.main-row .theory-card:not(.mobile-hero-card) h3{box-sizing:border-box;padding-bottom:6px;min-height:0}
.main-row .theory-card-progress{z-index:2;min-height:16px}
@media(max-width:759px){.main-row .theory-card:not(.mobile-hero-card){height:144px;min-height:144px}.main-row .theory-card:not(.mobile-hero-card) h3{padding-bottom:4px}}


.theory-page{padding-bottom:max(20px,env(safe-area-inset-bottom))}

#theoryContent.is-filtering .important-row,#theoryContent.is-filtering .theory-card,#theoryContent.is-filtering .theory-card-progress{animation:none}
#theoryContent [hidden]{display:none}

/* Match theory.dart: 16px track, solid fill and 400ms label switching. */
.theory-progress-fill {
  position: relative;
  height: 16px;
  overflow: hidden;
  border-radius: 0;
  background: #262626;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
html[data-theme="light"] .theory-progress-fill {
  background: #eee;
  border-top-color: rgba(0, 0, 0, .04);
}
.theory-progress-fill > span:first-child {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  max-width: 100%;
  border-radius: 0;
  background: #2d6fc7;
  transition: none;
}
.theory-progress-fill.is-filled > span:first-child { background: #18bc21; }
.theory-progress-percent, .theory-progress-count, .theory-completed-label {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
  transition: opacity 400ms;
}
.theory-progress-percent { left: 6px; color: #fff; }
.theory-progress-count { right: 6px; color: var(--via-text); }
.theory-completed-label {
  left: 0;
  right: 0;
  justify-content: center;
  color: #fff;
  opacity: 0;
}
.theory-progress-fill.is-complete .theory-progress-percent,
.theory-progress-fill.is-complete .theory-progress-count { opacity: 0; }
.theory-progress-fill.is-complete .theory-completed-label { opacity: 1; }
/* The tutorial temporarily drives the same bars with its own frame loop. */
.main-row .education-inline-progress .education-progress-bar,
.main-row .education-inline-progress .education-progress-bar.is-complete { background: #262626 !important; }
html[data-theme="light"] .main-row .education-inline-progress .education-progress-bar,
html[data-theme="light"] .main-row .education-inline-progress .education-progress-bar.is-complete { background: #eee !important; }
.main-row .education-inline-progress .education-progress-fill { background: #2d6fc7; min-width: calc(4ch + 12px) !important; }
.main-row .education-inline-progress .education-progress-fill.is-complete { background: #18bc21 !important; }
.main-row .education-inline-progress .education-progress-percent,
.main-row .education-inline-progress .education-progress-count,
.main-row .education-inline-progress .education-progress-completed { font-size: 12px; font-weight: 700; text-shadow: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .theory-progress-percent, .theory-progress-count, .theory-completed-label { transition: none; }
}

/* Light surfaces and readable foregrounds; dark styling stays above. */
html[data-theme="light"] .theory-progress-fill.is-filled > span:first-child { background: var(--via-success); }
html[data-theme="light"] .main-row .education-inline-progress .education-progress-fill.is-complete { background: var(--via-success) !important; }
html[data-theme="light"] .theory-progress-count { background: var(--via-panel-2); border-radius: 3px; padding-inline: 3px; }
/* Compact title band: equal visual space above and below the text. */
.main-row .theory-card:not(.mobile-hero-card){
  --chapter-image-height:140px;
  height:auto;min-height:0;gap:0;
  grid-template-rows:var(--chapter-image-height) 44px 16px;
}
.main-row .theory-card:not(.mobile-hero-card) h3{
  align-self:stretch;display:flex;align-items:center;justify-content:center;
  margin:0 8px!important;padding:0;min-height:0;line-height:1.2;
  text-align:center;transform:scaleX(var(--title-scale,1));transform-origin:center;
}
.main-row .theory-card:not(.mobile-hero-card) .theory-card-progress{
  margin:0!important;height:16px;min-height:16px;align-self:stretch;
}
@media(min-width:760px) and (max-width:1099px){
  .main-row .theory-card:not(.mobile-hero-card){--chapter-image-height:110px}
}
@media(max-width:759px){
  .main-row .theory-card:not(.mobile-hero-card){--chapter-image-height:86px;grid-template-rows:var(--chapter-image-height) 40px 16px}
}