/* ============================================================
   PHYDB — CINEMATIC LAYER (midnight · violet→teal neon · motion)
   Loaded after app.css. Presentation only. Deep dark canvas, glowing
   gradients, glassmorphism, animated hero, neon accents, rich motion.
   ============================================================ */

/* ---------- motion ---------- */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn    { from { opacity: 0; transform: scale(.96) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes floaty   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes shimmer  { to { background-position: 200% center; } }
@keyframes glowPulse{ 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* ---------- animated neon particle canvas ---------- */
#molecular-bg { display: block !important; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .9; }
:root[data-theme="light"] #molecular-bg { opacity: .45; }

#app { animation: fadeIn .55s var(--ease-out) both; }

/* ---------- display type ---------- */
.view-head h1, .hero-title, .home-card h2, .tile .t-value, .gen-panel h2, .splash-name, .about-name, .panel h3 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em;
}
.view-head h1 { font-size: 27px; }
.view-head { animation: fadeUp .5s var(--ease-out) both; margin-bottom: 8px; }
.view-head .crumb { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- sidebar: deep glass ---------- */
#sidebar {
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4);
  border-right: 1px solid var(--glass-brd);
}
.brand-name { font-family: var(--display); font-weight: 800; letter-spacing: -.01em; }
.brand-name span { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.brand-mark svg { animation: floaty 5s ease-in-out infinite; }
.brand-mark svg rect { fill: #a855f7 !important; }
.brand-mark svg path { fill: #ffffff !important; }

.mod-tabs-4 .mod-tab { display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px !important; font-weight: 600 !important; transition: all .2s var(--ease); }
.mod-tab { border: 1px solid var(--hairline) !important; background: var(--surface) !important; color: var(--ink-2) !important; }
.mod-tab:hover { color: var(--ink) !important; border-color: var(--accent) !important; transform: translateY(-1px); }
.mod-tab.on { background: var(--grad) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 6px 22px rgba(168,85,247,.45); }
.mt-ico { display: inline-flex; } .mt-ico svg, .mod-home svg { display: block; }
.mod-home { display: inline-flex; align-items: center; justify-content: center; }

.nav-item, .sub-item, .skill-item, .topic-head { position: relative; border-radius: 11px !important; transition: color .2s, background .2s, transform .16s var(--ease); }
.nav-item:hover, .sub-item:hover, .skill-item:hover { transform: translateX(3px); }
.nav-item.active, .sub-item.active, .skill-item.active { background: linear-gradient(90deg, var(--accent-soft), transparent) !important; color: var(--ink) !important; }
.nav-item.active::before, .sub-item.active::before, .skill-item.active::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 3px;
  background: var(--grad); box-shadow: 0 0 12px rgba(168,85,247,.8); animation: fadeIn .25s var(--ease-out) both;
}
.nav-item .ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; color: var(--ink-3); transition: color .2s; }
.nav-item:hover .ico, .nav-item.active .ico { color: var(--accent); }
.nav-section-h { color: var(--ink-3); letter-spacing: .12em; }
.tnum { background: var(--accent-soft) !important; color: var(--accent) !important; font-weight: 700 !important; }
.sub-item .code, .chip.code { color: var(--accent) !important; }

/* ---------- search / top bar ---------- */
#search { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: 13px; backdrop-filter: blur(14px); transition: border-color .2s, box-shadow .25s; }
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--glow); }
.icon-btn { border-radius: 11px; transition: all .2s var(--ease); }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--glow); }

/* ---------- filters ---------- */
.f-select, .f-chip { border-radius: 11px; transition: all .18s var(--ease); }
.f-chip:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--ink); }
.f-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); box-shadow: 0 4px 16px rgba(168,85,247,.25); }

/* ---------- buttons: neon ---------- */
.btn { border-radius: 12px; transition: transform .16s var(--ease), box-shadow .25s var(--ease), border-color .2s, background .2s, filter .2s; position: relative; overflow: hidden; }
.btn:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 10px 26px rgba(0,0,0,.4); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.primary { background: var(--grad); background-size: 160% 160%; border: 0; color: #fff; font-weight: 600; box-shadow: 0 8px 24px rgba(168,85,247,.42); }
.btn.primary:hover { filter: brightness(1.1) saturate(1.1); background-position: 100% 0; box-shadow: 0 14px 34px rgba(99,102,241,.5), var(--glow); }

/* ---------- question cards: glass + neon edge ---------- */
.qgrid { gap: 22px; }
.qcard {
  position: relative;
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--glass-brd); border-radius: 20px;
  box-shadow: 0 14px 44px rgba(0,0,0,.4);
  transition: transform .3s var(--ease-out), box-shadow .32s var(--ease-out), border-color .3s;
  animation: popIn .5s var(--ease-out) both;
}
.qcard::before {
  content: ""; position: absolute; inset: 0; border-radius: 20px; padding: 1px;
  background: linear-gradient(135deg, rgba(168,85,247,.6), rgba(34,211,238,.4), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; pointer-events: none;
}
.qcard:hover { transform: translateY(-5px); box-shadow: 0 28px 64px rgba(0,0,0,.55), var(--glow); border-color: transparent; }
.qcard:hover::before { opacity: 1; }
.qcard .chip { border-radius: 999px; }
.chip.code { background: var(--accent-soft); }
.stars { color: var(--star); filter: drop-shadow(0 0 6px rgba(251,191,36,.4)); }
.qcard-top { border-bottom: 1px solid var(--hairline); }
.qcard-actions { border-top: 1px solid var(--hairline); }

/* ---------- generator panel ---------- */
.gen-panel {
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid var(--glass-brd); border-radius: 20px; box-shadow: var(--shadow);
  animation: popIn .5s var(--ease-out) both;
}
.gen-panel h2 { font-size: 19px; }
.gen-label { letter-spacing: .1em; }
.count-chip, .seg-btn { border-radius: 10px; transition: all .16s var(--ease); }
.count-chip:hover { transform: translateY(-1px); }
.count-chip.on, .seg-btn.on { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(168,85,247,.42); }
.gen-radio { border-radius: 11px; }
.gen-radio.on { background: var(--accent-soft); border-color: var(--accent); }
.gen-create { background: var(--grad) !important; background-size: 180% 180% !important; border: 0 !important; color: #fff !important; box-shadow: 0 10px 28px rgba(168,85,247,.45); transition: transform .18s var(--ease), box-shadow .25s, background-position .6s; }
.gen-create:hover { transform: translateY(-2px); background-position: 100% 0 !important; box-shadow: 0 14px 36px rgba(34,211,238,.5), var(--glow); }
.gen-mock { border-color: var(--accent) !important; color: var(--accent) !important; }

/* ---------- stats ---------- */
.tile, .panel {
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--glass-brd); border-radius: 20px; animation: popIn .5s var(--ease-out) both;
  transition: transform .25s var(--ease-out), box-shadow .3s, border-color .3s;
}
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }
.tile .t-value { font-size: 30px; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.panel h3 { font-size: 16px; }
.hbar { background: var(--grad) !important; box-shadow: 0 0 12px rgba(168,85,247,.4); border-radius: 999px !important; }
.vbar { background: var(--grad) !important; box-shadow: 0 -2px 14px rgba(168,85,247,.35); }
.heat-cell { transition: transform .18s var(--ease), box-shadow .2s; }
.heat-cell:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--glow); }

/* ---------- modals ---------- */
.modal { backdrop-filter: blur(10px); background: rgba(4,5,15,.6); }
.modal-card {
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  backdrop-filter: blur(28px) saturate(1.3); -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid var(--glass-brd); border-radius: 22px; box-shadow: var(--shadow);
  animation: popIn .35s var(--ease-out) both;
}

/* ---------- scrollbars ---------- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--surface-2); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::-webkit-scrollbar-track { background: transparent; }

svg { flex: none; }
.qimg-wrap, .p-stage, .rel-img, .cr-stage img { background: #fff; }
#view > * { animation: fadeUp .4s var(--ease-out) both; }

/* ============================================================
   HERO — cinematic, gradient headline, motion
   ============================================================ */
.hero { text-align: center; max-width: 900px; margin: 6vh auto 60px; padding: 20px; animation: fadeUp .7s var(--ease-out) both; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(12px);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 30px;
  animation: floaty 6s ease-in-out infinite;
}
.hero-badge svg { color: var(--accent); }
.hero-title {
  font-family: var(--display);
  font-size: clamp(44px, 6.8vw, 88px); line-height: 1.02; font-weight: 800; letter-spacing: -.035em;
  margin-bottom: 22px; color: var(--ink);
}
.hero-title .grad {
  background: linear-gradient(100deg, #c084fc, #818cf8, #22d3ee, #c084fc);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmer 5s linear infinite;
}
.hero-sub { font-size: clamp(15px, 1.7vw, 19px); color: var(--ink-2); max-width: 610px; margin: 0 auto 36px; line-height: 1.65; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 52px; }
.hero-btn { font-size: 15px !important; padding: 14px 28px !important; border-radius: 14px !important; display: inline-flex; align-items: center; gap: 9px; }
.hero-btn svg { display: block; }
.hero-btn.ghost { background: var(--glass) !important; border: 1px solid var(--glass-brd) !important; color: var(--ink) !important; backdrop-filter: blur(12px); }
.hero-btn.ghost:hover { border-color: var(--accent) !important; box-shadow: var(--glow); }

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 700px; margin: 0 auto; }
.hero-stat { padding: 20px 12px; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-brd); backdrop-filter: blur(14px); transition: transform .25s var(--ease-out), box-shadow .3s, border-color .3s; }
.hero-stat:hover { transform: translateY(-3px); box-shadow: var(--glow); border-color: var(--accent); }
.hs-val { font-family: var(--display); font-weight: 800; font-size: 25px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hs-label { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-top: 5px; }

/* module cards — neon gradient edge + glow */
.home-cards { max-width: 1080px; margin: 0 auto; gap: 22px; }
.home-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--glass-2), var(--glass));
  backdrop-filter: blur(20px) saturate(1.25); -webkit-backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid var(--glass-brd); border-radius: 22px; padding: 28px 26px; cursor: pointer;
  transition: transform .3s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s;
  animation: popIn .6s var(--ease-out) both;
}
.home-cards-4 .home-card:nth-child(1){animation-delay:.05s}
.home-cards-4 .home-card:nth-child(2){animation-delay:.12s}
.home-cards-4 .home-card:nth-child(3){animation-delay:.19s}
.home-cards-4 .home-card:nth-child(4){animation-delay:.26s}
.home-card::before { content:""; position:absolute; inset:0; border-radius:22px; padding:1.3px; background: var(--card-grad, var(--grad)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .35s; pointer-events:none; }
.home-card:hover { transform: translateY(-6px); box-shadow: 0 30px 70px rgba(0,0,0,.55); border-color: transparent; }
.home-card:hover::before { opacity: 1; }
.hc-glow { position: absolute; width: 240px; height: 240px; border-radius: 50%; top: -120px; right: -80px; filter: blur(66px); opacity: .28; background: var(--card-grad, var(--grad)); transition: opacity .4s, transform .5s var(--ease-out); }
.home-card:hover .hc-glow { opacity: .55; transform: scale(1.15); }
.grad-blue    { --card-grad: linear-gradient(135deg,#6366f1,#22d3ee); }
.grad-emerald { --card-grad: linear-gradient(135deg,#22d3ee,#34d399); }
.grad-violet  { --card-grad: linear-gradient(135deg,#c084fc,#a855f7); }
.grad-amber   { --card-grad: linear-gradient(135deg,#a855f7,#6366f1); }
.hc-icon { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: #fff; margin-bottom: 18px; background: var(--card-grad, var(--grad)); box-shadow: 0 10px 26px rgba(0,0,0,.4); transition: transform .35s var(--ease-out); }
.home-card:hover .hc-icon { transform: translateY(-2px) rotate(-4deg) scale(1.05); }
.home-card h2 { font-size: 21px; font-weight: 700; margin-bottom: 4px; }
.hc-sub { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.home-card ul { list-style: none; padding: 0; margin: 0 0 18px; }
.home-card li { font-size: 13px; color: var(--ink-2); padding: 4px 0 4px 18px; position: relative; }
.home-card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--card-grad, var(--grad)); }
.hc-go { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.hc-arrow { display: inline-flex; color: var(--accent); transition: transform .25s var(--ease-out); }
.home-card:hover .hc-arrow { transform: translateX(5px); }

.home-foot { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 1080px; margin: 42px auto 12px; align-items: center; }
.home-foot .btn { display: inline-flex; align-items: center; gap: 7px; }
.home-foot .btn svg { display: block; }
.home-social { width: 100%; text-align: center; margin-top: 14px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

@media (max-width: 760px) { .hero-stats { grid-template-columns: repeat(2,1fr); } .home-cards-4 { grid-template-columns: 1fr; } }

/* ============================================================
   SPLASH — neon atom
   ============================================================ */
#splash { background: radial-gradient(60% 55% at 50% 42%, rgba(168,85,247,.12), transparent 68%), var(--page); transition: opacity .5s var(--ease-out); }
#splash.done { opacity: 0; }
.splash-orb { position: absolute; width: 480px; height: 480px; border-radius: 50%; background: var(--grad); filter: blur(130px); opacity: .18; animation: glowPulse 3.2s ease-in-out infinite; }
.splash-inner { position: relative; text-align: center; animation: fadeUp .6s var(--ease-out) both; }
.splash-atom { position: relative; width: 120px; height: 120px; margin: 0 auto 26px; }
.splash-atom .nucleus { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 24px rgba(168,85,247,.9); animation: glowPulse 1.7s ease-in-out infinite; }
.splash-atom .orbit { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(168,150,255,.16); }
.splash-atom .o1 { transform: rotate(0deg) scaleY(.42); }
.splash-atom .o2 { transform: rotate(60deg) scaleY(.42); }
.splash-atom .o3 { transform: rotate(120deg) scaleY(.42); }
.splash-atom .electron { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; }
.splash-atom .e1 { background: #c084fc; box-shadow: 0 0 12px #c084fc; animation: orbit1 1.9s linear infinite; }
.splash-atom .e2 { background: #22d3ee; box-shadow: 0 0 12px #22d3ee; animation: orbit2 2.4s linear infinite; }
.splash-atom .e3 { background: #818cf8; box-shadow: 0 0 12px #818cf8; animation: orbit3 2.1s linear infinite; }
@keyframes orbit1 { from { transform: rotate(0)    translateX(56px) scaleY(2.38) rotate(0); }    to { transform: rotate(360deg) translateX(56px) scaleY(2.38) rotate(-360deg); } }
@keyframes orbit2 { from { transform: rotate(120deg) translateX(56px) scaleY(2.38) rotate(-120deg); } to { transform: rotate(480deg) translateX(56px) scaleY(2.38) rotate(-480deg); } }
@keyframes orbit3 { from { transform: rotate(240deg) translateX(56px) scaleY(2.38) rotate(-240deg); } to { transform: rotate(600deg) translateX(56px) scaleY(2.38) rotate(-600deg); } }
.splash-name { font-family: var(--display); font-size: 27px; font-weight: 800; letter-spacing: -.01em; }
.splash-name span { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.splash-sub { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.splash-bar { width: 190px; height: 3px; border-radius: 3px; background: rgba(168,150,255,.12); margin: 24px auto 0; overflow: hidden; }
.splash-fill { height: 100%; width: 40%; border-radius: 3px; background: var(--grad); animation: splashSlide 1.15s var(--ease) infinite; }
@keyframes splashSlide { 0% { transform: translateX(-140%); } 100% { transform: translateX(340%); } }
.splash-social { margin-top: 18px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* library / builder cards */
.lib-card, .b-section, .b-meta, .comb-sec, .rel-card { border-radius: 18px; }
.lib-card { transition: transform .25s var(--ease-out), box-shadow .3s, border-color .3s; }
.lib-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--accent); }

/* ---------- 6-Mark / Planning Mastery (Paper 6 planning question) ---------- */
.grad-rose { --card-grad: linear-gradient(135deg, #fb7185, #f59e0b); }
.m6-wrap { max-width: 1060px; margin: 0 auto; padding-bottom: 60px; }
.m6-head h1 { display: flex; align-items: center; gap: 10px; }
.m6-sub { color: var(--ink-2); max-width: 740px; line-height: 1.55; margin: 8px 0 14px; font-size: 14px; }
.m6-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.m6-stat { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--radius-sm); padding: 8px 14px; display: flex; flex-direction: column; min-width: 120px; }
.m6-stat b { font-size: 18px; }
.m6-stat span { font-size: 11.5px; color: var(--ink-3); }
.m6-section-h { margin: 34px 0 12px; }
.m6-section-h h2 { font-size: 19px; margin: 0 0 4px; }
.m6-section-h p { margin: 0; color: var(--ink-2); font-size: 13.5px; max-width: 700px; line-height: 1.5; }
.m6-points { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.m6-point { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--radius); padding: 14px 16px; }
.m6-point p { margin: 8px 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.m6-pt-top { display: flex; align-items: center; gap: 9px; }
.m6-badge { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; background: linear-gradient(135deg, #fb7185, #f59e0b); color: #fff; }
.m6-badge.sm { width: 22px; height: 22px; flex-basis: 22px; font-size: 12px; }
.m6-starter { font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border-radius: 9px; padding: 7px 10px; }
.m6-model { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--radius); padding: 16px 18px; }
.m6-model-task { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--glass-brd); font-size: 14px; line-height: 1.5; }
.m6-model-line { display: flex; gap: 10px; align-items: flex-start; margin: 9px 0; font-size: 13.5px; line-height: 1.55; }
.m6-copy { margin-top: 12px; }
.m6-mistakes { display: grid; gap: 8px; }
.m6-mistake { display: flex; gap: 10px; align-items: baseline; background: var(--glass); border: 1px solid var(--glass-brd); border-left: 3px solid #fb7185; border-radius: var(--radius-sm); padding: 9px 13px; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.m6-mtag { flex: 0 0 auto; font-weight: 700; color: #fb7185; font-size: 12.5px; }
.m6-years { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 16px; }
button.m6-year { appearance: none; font: inherit; cursor: pointer; }
.m6-year.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.m6-list { display: grid; gap: 18px; }
.m6-nav { border: 1px solid var(--glass-brd); background: linear-gradient(135deg, rgba(251, 113, 133, 0.12), rgba(245, 158, 11, 0.1)); }

/* ---------- mastery answer-practice pad ---------- */
.m6-pp { margin: 12px 14px 14px; padding: 12px 14px; border: 1px dashed var(--glass-brd); border-radius: var(--radius-sm); background: var(--glass); }
.m6-pp-top { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.m6-pp-marked { font-size: 11.5px; font-weight: 600; color: #f59e0b; background: rgba(245, 158, 11, 0.12); border-radius: 20px; padding: 2px 9px; }
.m6-pp-pad { width: 100%; min-height: 110px; resize: vertical; font: inherit; font-size: 13px; line-height: 1.6; color: var(--ink); background: var(--surface-2); border: 1px solid var(--glass-brd); border-radius: 10px; padding: 10px 12px; margin-top: 9px; }
.m6-pp-pad:focus { outline: none; border-color: #f59e0b; }
.m6-pp-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.m6-pp-count { font-size: 11.5px; color: var(--ink-3); }
.m6-pp-scores { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.m6-pp-lbl { font-size: 11.5px; color: var(--ink-3); }
.m6-pp-score { min-width: 27px; height: 27px; border-radius: 8px; border: 1px solid var(--glass-brd); background: transparent; color: var(--ink); font: inherit; font-size: 12.5px; cursor: pointer; }
.m6-pp-score:hover { border-color: #f59e0b; }
.m6-pp-score.on { background: linear-gradient(135deg, #fb7185, #f59e0b); border-color: transparent; color: #fff; font-weight: 700; }

/* teacher's exam-week routine line on mastery pages */
.m6-routine { margin-top: 14px; padding: 11px 15px; border-left: 3px solid #f59e0b; border-radius: 0 12px 12px 0; background: var(--glass); font-size: 13.5px; line-height: 1.6; color: var(--ink-2); max-width: 720px; }

/* ---------- combined builder: multi-topic/subtopic scope chips ---------- */
.comb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.comb-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; padding: 4px 6px 4px 11px; border-radius: 20px; border: 1px solid var(--glass-brd); background: var(--surface-2); color: var(--ink); }
.comb-chip button { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: none; background: rgba(127, 127, 127, 0.18); color: inherit; font-size: 10px; cursor: pointer; }
.comb-chip button:hover { background: #fb7185; color: #fff; }