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

@media(min-width:769px){.topic-mobile-summary .topic-mobile-progress{position:relative;display:block;height:24px;overflow:hidden;margin-top:10px;background:var(--via-bg);border:1px solid var(--via-border);border-radius:12px}.topic-mobile-summary .topic-mobile-progress>[data-topic-mobile-fill]{position:absolute;inset:0 auto 0 0;display:block;background:var(--via-accent);transition:width .4s ease}.topic-mobile-summary .topic-mobile-progress>strong,.topic-mobile-summary .topic-mobile-progress>em,.topic-mobile-summary .topic-mobile-progress>b{position:absolute;top:0;bottom:0;display:flex;align-items:center;font-size:13px;font-style:normal;font-weight:800;z-index:1}.topic-mobile-summary .topic-mobile-progress>strong{left:8px}.topic-mobile-summary .topic-mobile-progress>em{right:8px}.topic-mobile-summary .topic-mobile-progress>b{left:0;right:0;justify-content:center;background:#16a34a;color:white}}

@media(min-width:769px){.topic-mobile-summary:not([hidden]){position:fixed;right:28px;bottom:calc(18px + env(safe-area-inset-bottom));left:28px;z-index:1090;display:block;max-width:1240px;margin:0 auto;padding:14px 18px;border:1px solid var(--via-border);border-radius:12px;background:var(--via-panel);color:var(--via-text);box-shadow:0 -8px 24px rgba(0,0,0,.3)}.topic-mobile-summary-head{display:flex;align-items:center;gap:12px}.topic-mobile-summary-head>img{width:32px;height:32px;object-fit:cover;border-radius:5px}.topic-mobile-summary-head>[data-topic-summary-today]{margin-left:auto;color:#28b978;font-weight:700}.topic-mobile-progress{display:none}}

.topic-page .theory-container{max-width:1240px}.topic-page .theory-search{margin:0 0 14px;overflow:hidden;border:1px solid var(--via-border);border-radius:14px;box-shadow:var(--via-shadow);animation:topic-search-in .42s ease-out both}.topic-page .theory-search input::placeholder{color:var(--via-muted);opacity:.9}.topic-heading{align-items:center;margin:16px 0 14px;animation:topic-heading-in .48s .06s ease-out both}.topic-heading h1{margin:0;font-size:clamp(24px,3vw,38px);line-height:1.08}.topic-heading>strong{color:#9dc8ff;font-size:22px}.topic-list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px}.topic-card{align-self:start;grid-template-columns:minmax(0,1fr) 96px;grid-template-rows:96px;gap:14px;min-height:122px;padding:12px;color:var(--via-text);overflow:hidden;animation:topic-card-in .52s cubic-bezier(.2,.75,.25,1) var(--topic-delay,0ms) both}.topic-card:hover{transform:translateY(-3px) scale(1.006);border-color:rgba(97,165,255,.68);box-shadow:0 14px 34px rgba(0,0,0,.25)}.topic-card-copy{display:flex;flex-direction:column;height:96px;min-width:0;overflow:hidden}.topic-card-copy h3{display:-webkit-box;flex:0 0 auto;margin:0 0 4px;overflow:hidden;color:var(--via-text);font-size:16px;line-height:1.28;text-transform:uppercase;-webkit-box-orient:vertical;-webkit-line-clamp:1}.topic-card-copy p{display:-webkit-box;flex:0 0 auto;margin:0;overflow:hidden;color:var(--via-muted);font-size:14px;line-height:1.35;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:3}.topic-card-media{position:relative;width:96px;height:96px;overflow:hidden;border-radius:9px;background:rgba(255,255,255,.04)}.topic-card .topic-card-image{display:block;width:100%;height:100%;object-fit:cover;border-radius:0;background:transparent;transition:transform .35s ease,filter .35s ease}.topic-card:hover .topic-card-image{transform:scale(1.055);filter:saturate(1.08)}.topic-card-status{position:absolute;top:0;right:0;display:grid;place-items:center;width:32px;height:27px;background:rgba(10,15,23,.82);border-radius:0 0 0 8px;animation:topic-status-in .42s calc(var(--topic-delay,0ms) + 180ms) cubic-bezier(.2,.8,.25,1.3) both}.topic-card-status img{width:17px;height:17px;object-fit:contain;border-radius:0;background:transparent}.topic-card-status.is-complete{background:rgba(16,91,57,.88)}.topic-card-status.is-incomplete{background:rgba(118,25,25,.88)}.topic-mobile-summary{display:none}

.topic-mobile-summary[hidden],.topic-mobile-summary .topic-mobile-progress[hidden],.topic-mobile-summary .topic-mobile-progress>[hidden]{display:none}
@media(min-width:769px){.topic-page{padding-bottom:150px}}

@keyframes topic-search-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@keyframes topic-heading-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}@keyframes topic-card-in{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}@keyframes topic-status-in{from{opacity:0;transform:scale(.45) translate(7px,-7px)}to{opacity:1;transform:none}}

@media(max-width:900px) and (min-width:769px){.topic-list{grid-template-columns:1fr}}

@media(max-width:768px){.topic-page{padding:72px 12px 204px}.topic-page .theory-container{width:100%}.topic-page .theory-search{margin:0 0 12px;border-radius:13px}.topic-heading{margin:12px 0 10px}.topic-heading h1{font-size:22px}.topic-heading>strong{font-size:18px}.topic-list{grid-template-columns:1fr;gap:12px}.topic-card{grid-template-columns:minmax(0,1fr) 96px;grid-template-rows:96px;gap:12px;min-height:122px;padding:12px}.topic-card-copy{height:96px}.topic-card-copy h3{margin-bottom:4px;font-size:17px;line-height:1.24;-webkit-line-clamp:1}.topic-card-copy p{font-size:15px;line-height:1.4;-webkit-line-clamp:3}.topic-card-media{width:96px;height:96px;border-radius:7px}.topic-card-status{width:28px;height:22px;border-radius:0 0 0 6px}.topic-card-status img{width:15px;height:15px}.topic-mobile-summary{position:fixed;right:12px;bottom:calc(66px + env(safe-area-inset-bottom));left:12px;z-index:1090;display:grid;gap:8px;padding:10px 12px 12px;color:var(--via-text);background:linear-gradient(145deg,rgba(30,38,52,.98),rgba(18,23,33,.99));border:1px solid var(--via-border);border-radius:12px;box-shadow:0 -8px 24px rgba(0,0,0,.3);animation:topic-summary-in .48s .16s cubic-bezier(.2,.75,.25,1) both}.topic-mobile-summary-head{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px}.topic-mobile-summary-head>img{width:28px;height:28px;object-fit:cover;border-radius:4px}.topic-mobile-summary-head>strong{overflow:hidden;font-size:14px;line-height:1;font-weight:800;letter-spacing:.6px;text-overflow:ellipsis;white-space:nowrap}.topic-mobile-summary-head>span{color:#39c77c;font-size:13px;font-weight:800;white-space:nowrap}.topic-mobile-progress{position:relative;height:24px;overflow:hidden;background:var(--via-bg);border:1px solid var(--via-border);border-radius:14px}.topic-mobile-progress>span{position:absolute;inset:0 auto 0 0;min-width:42px;max-width:100%;background:var(--via-accent);transition:width .4s ease}.topic-mobile-progress>strong,.topic-mobile-progress>em,.topic-mobile-progress>b{position:absolute;inset-block:0;z-index:1;display:flex;align-items:center;font-size:13px;font-style:normal;font-weight:800;line-height:1}.topic-mobile-progress>strong{left:8px;color:#fff}.topic-mobile-progress>em{right:8px;color:var(--via-text)}.topic-mobile-progress>b{inset-inline:0;justify-content:center;color:#fff}.topic-mobile-progress.is-complete{background:#16a34a}.topic-mobile-progress.is-complete>span{width:100%!important;min-width:100%;background:#16a34a}.topic-mobile-progress.is-complete>strong,.topic-mobile-progress.is-complete>em{display:none}.topic-mobile-summary.is-rights{padding-bottom:10px}.topic-mobile-summary.is-rights .topic-mobile-summary-head{grid-template-columns:28px minmax(0,1fr)}.topic-mobile-summary.is-rights [data-topic-summary-today]{display:none}}

@keyframes topic-summary-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.topic-page .theory-search,.topic-heading,.topic-card,.topic-card-status,.topic-mobile-summary{animation:none}.topic-card,.topic-card .topic-card-image{transition:none}}
@media(min-width:769px){.topic-card{position:relative;z-index:1;align-self:start;transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease;overflow:hidden}.topic-card:hover,.topic-card:focus-visible{z-index:20;grid-template-rows:auto;overflow:visible;transform:translateY(-3px) scale(1.006)}.topic-card:hover .topic-card-copy,.topic-card:focus-visible .topic-card-copy{height:auto;min-height:96px;overflow:visible}.topic-card:hover .topic-card-copy p,.topic-card:focus-visible .topic-card-copy p{display:block;overflow:visible;white-space:pre-wrap;-webkit-line-clamp:unset}.topic-card:hover .topic-card-image,.topic-card:focus-visible .topic-card-image{transform:scale(1.08)}}
.topic-list{display:grid;grid-template-columns:1fr;gap:14px}.topic-card-row{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px;min-height:122px}.topic-card-row .topic-card{width:100%}
@media(max-width:900px) and (min-width:769px){.topic-card-row{grid-template-columns:1fr}}
@media(max-width:768px){.topic-list{gap:12px}.topic-card-row{grid-template-columns:1fr;gap:12px;min-height:0}}
@media(min-width:901px){.topic-card-row .topic-card:hover,.topic-card-row .topic-card:focus-visible{position:absolute;top:0;width:calc((100% - 14px)/2)}.topic-card-row .topic-card-left:hover,.topic-card-row .topic-card-left:focus-visible{left:0}.topic-card-row .topic-card-right:hover,.topic-card-row .topic-card-right:focus-visible{right:0}}
@media(min-width:769px){.topic-card-row{height:122px;min-height:122px;grid-template-rows:122px;overflow:visible}.topic-card-row .topic-card:hover,.topic-card-row .topic-card:focus-visible{position:relative;top:auto;right:auto;left:auto;width:100%}}
@media(min-width:769px){.topic-card-row{height:auto;min-height:122px;grid-template-rows:auto}}
.topic-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px}.topic-column{display:flex;flex-direction:column;gap:14px;min-width:0}.topic-column .topic-card{width:100%}
@media(max-width:900px){.topic-list{grid-template-columns:1fr;gap:12px}.topic-column{display:contents}.topic-list>.topic-card{order:var(--mobile-order,0)}}


.topic-list.is-filtering .topic-card,.topic-list.is-filtering .topic-card-status{animation:none}
.topic-card.is-locked .topic-card-image{opacity:.4}
.topic-card-lock{position:absolute;inset:0;display:grid;place-items:center}
.topic-card-lock img{width:28px;height:28px;object-fit:contain}
html[data-theme="light"] .topic-card-lock img{filter:brightness(0)}
@media(min-width:769px){.topic-card.is-locked:hover .topic-card-copy p,.topic-card.is-locked:focus-visible .topic-card-copy p{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-line-clamp:3}}
.topic-list>.topic-column[hidden],.topic-list>.theory-empty[hidden]{display:none}

/* Width and percentage share the same one-second animation frame loop. */
.topic-mobile-summary .topic-mobile-progress > [data-topic-mobile-fill]{transition:none}

/* Light surfaces and readable foregrounds; dark styling stays above. */
html[data-theme="light"] .topic-mobile-summary { background: linear-gradient(145deg,var(--via-panel),var(--via-panel-2)); }
html[data-theme="light"] .topic-heading>strong { color: var(--via-accent); }
html[data-theme="light"] :is(.topic-mobile-summary-head>span,.topic-mobile-summary-head>[data-topic-summary-today]) { color: var(--via-success); }
html[data-theme="light"] .topic-mobile-progress.is-complete,
html[data-theme="light"] .topic-mobile-progress.is-complete>span,
html[data-theme="light"] .topic-mobile-summary .topic-mobile-progress>b { background: var(--via-success); }