.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:var(--shadow-sm);display:block;color:inherit}
a.card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
a.card:hover{transform:translateY(-2px);border-color:var(--primary-strong);box-shadow:var(--shadow);text-decoration:none}
.card .code{font-size:.74rem;font-weight:700;color:var(--primary);letter-spacing:.03em}
.card .title{font-weight:600;margin:.15rem 0 .35rem;color:var(--ink)}
.card .sub{font-size:.82rem;color:var(--muted)}
.card .row{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start}
.badge{font-size:.72rem;background:var(--surface-2);border:1px solid var(--line);color:var(--ink-soft);border-radius:var(--radius-pill);padding:.15rem .6rem;white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;border-radius:var(--radius-pill);padding:.2rem .65rem;background:#f1f5f9;color:#64748b;border:1px solid var(--line)}
.chip.soon{opacity:.75}
.btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--primary);color:#fff;border:0;border-radius:var(--radius-sm);padding:.6rem 1rem;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:var(--primary-strong);text-decoration:none}
.btn.secondary{background:var(--surface);color:var(--primary);border:1px solid var(--line)}
.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:1.3rem;text-align:center;color:var(--muted);background:var(--surface-2)}
.notice{background:var(--primary-soft);border:1px solid #99f6e4;border-radius:var(--radius);padding:.9rem 1rem;font-size:.88rem;color:#115e59}
.hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-sm)}
.hero h1{margin-bottom:.4rem}
.hero p{color:var(--ink-soft);max-width:60ch;margin:0}
.units{list-style:none;padding:0;margin:0}
.units li{display:flex;gap:.7rem;padding:.6rem .2rem;border-bottom:1px solid var(--line);font-size:.94rem}
.units li:last-child{border-bottom:0}
.units .u-no{flex:0 0 3.4rem;font-weight:700;color:var(--primary);font-size:.82rem}
.search-box{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.search-box input{flex:1;min-width:220px;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit}
.meta{font-size:.82rem;color:var(--muted)}
.pill-row{display:flex;flex-wrap:wrap;gap:.4rem}
.options{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem .9rem;font-size:.9rem}
.landing-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2.4rem 1.5rem;box-shadow:var(--shadow-sm);text-align:center}
.landing-hero .eyebrow{font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--primary);margin:0 0 .6rem}
.landing-hero h1{font-size:2rem;max-width:26ch;margin:0 auto .7rem}
.landing-hero .lead{color:var(--ink-soft);max-width:62ch;margin:0 auto 1.3rem}
.hero-cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.stat-band{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:1.1rem}
@media(min-width:640px){.stat-band{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1rem;text-align:center}
.stat b{display:block;font-size:1.7rem;color:var(--primary)}
.stat span{font-size:.8rem;color:var(--muted)}
.sem-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.7rem}
.sem-chip{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.75rem .9rem;display:block;color:inherit}
.sem-chip:hover{border-color:var(--primary-strong);text-decoration:none}
.sem-chip b{display:block;color:var(--primary);font-size:.95rem}
.sem-chip span{font-size:.76rem;color:var(--muted)}
.feature h3{margin:.55rem 0 .3rem}
.feature p{margin:0;color:var(--ink-soft);font-size:.9rem}
.f-ico{width:30px;height:30px;border-radius:8px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:700}
.steps{margin:0;padding-left:1.2rem;color:var(--ink-soft)}
.steps li{margin-bottom:.4rem}
.cta-band{background:linear-gradient(120deg,var(--header-from),var(--header-to));color:#fff;border-radius:var(--radius);padding:1.4rem 1.5rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-band h2{color:#fff;margin:0 0 .2rem}
.cta-band p{margin:0;color:#a7f3d0}
.footer-nav a{margin:0 .4rem;color:var(--primary)}
/* material, filed under the unit it belongs to */
.unit{justify-content:space-between;flex-wrap:wrap}
.unit .u-title{flex:1 1 15rem}
.unit-links{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.res-inline{list-style:none;padding:0;margin:0;display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.res-item{display:inline-flex;align-items:center;gap:.45rem;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.2rem .25rem .2rem .7rem;font-size:.84rem}
.res-kind{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}
.res-title{font-weight:500}
.open-btn{display:inline-flex;align-items:center;background:var(--primary);color:#fff;font-weight:600;font-size:.8rem;padding:.25rem .7rem;border-radius:999px}
.open-btn:hover{text-decoration:none;filter:brightness(1.1)}
.none{color:var(--muted);font-size:.84rem}
.subject-material{list-style:none;padding:0;margin:0;display:flex;gap:.5rem;flex-wrap:wrap}
.empty-mini{font-size:.86rem;color:var(--muted);margin:0 0 .6rem}
.sem-note{margin-bottom:1.2rem}