body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Helvetica,Arial,sans-serif;}
:root {
  --bg: #f5f7ff;
  --surface: rgba(255,255,255,.88);
  --surface-strong: #ffffff;
  --line: #cfd4ea;
  --text: #1c2340;
  --muted: #69708f;
  --primary: #BA55D3;
  --primary-strong: #9d36be;
  --success: #16a34a;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow: 0 10px 30px rgba(54, 65, 124, 0.10);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(109,94,252,.16), transparent 28%),
    radial-gradient(circle at top right, rgba(73,195,241,.12), transparent 24%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { text-decoration: none; color: inherit; }
p { color: var(--muted); margin-bottom: 0; }
.app-shell { max-width: 1100px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 10px) 10px calc(72px + env(safe-area-inset-bottom)); }
.app-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 2px 10px; backdrop-filter: blur(16px);
}
.eyebrow, .section-label { color: var(--primary); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.1; }
.brand-link { display: inline-block; margin-top: 0; font-size: 1.28rem; font-weight: 800; line-height: 1.05; }
.user-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.7); border-radius: 999px; box-shadow: var(--shadow);
  font-size: .92rem; color: var(--muted);
}
.avatar-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #7c6cff, #4ec8ff); display: inline-block; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px; border: 1px solid var(--line); background: var(--surface-strong); box-shadow: var(--shadow);
}
.danger-soft { color: var(--danger); }
.app-main { display: block; }
.app-card {
  background: var(--surface); border: 1.5px solid #cfd4ea;
  border-radius: var(--radius-xl); box-shadow: var(--shadow); backdrop-filter: blur(18px);
}
.padded { padding: 22px; }
.hero-card {
  position: relative; overflow: hidden; padding: 28px; border-radius: 32px; background: linear-gradient(145deg, #20175b, #6d5efc 60%, #71dbff);
  color: white; box-shadow: 0 18px 45px rgba(78, 74, 187, .28);
}
.hero-gradient { position: absolute; inset: auto -20% -20% auto; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 60%); }
.hero-content { position: relative; z-index: 1; max-width: 720px; }
.hero-title { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.02; font-weight: 800; margin: 10px 0 14px; }
.hero-text { color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.mobile-hero { display: flex; justify-content: space-between; gap: 14px; align-items: end; }
.mobile-hero.compact { padding: 2px 2px 0; }
.screen-title { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; margin: 6px 0 8px; line-height: 1.05; }
.screen-subtitle { font-size: 1rem; line-height: 1.55; max-width: 720px; }
.section-title { font-size: 1.2rem; font-weight: 800; margin: 4px 0 0; }
.content-grid { display: grid; gap: 16px; }
.content-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-grid.cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-gap { gap: 14px; }
.auth-wrap { min-height: 70vh; display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 460px; padding: 24px; }
.stack-form { display: grid; gap: 14px; }
.field-block { display: grid; gap: 8px; }
.field-block > span { font-weight: 700; font-size: .95rem; }
.field-block small { color: var(--muted); }
.app-input, .app-select, .app-textarea {
  width: 100%; border: 1.5px solid #bcc5e0; background: #fff; color: var(--text); box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  border-radius: 18px; padding: 15px 16px; font-size: 1rem; outline: none; transition: .2s ease;
}
.app-input:focus, .app-select:focus, .app-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(186,85,211,.18); }
.app-textarea { resize: vertical; min-height: 120px; }
.app-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 18px; padding: 14px 18px; font-weight: 800; cursor: pointer; transition: transform .14s ease, box-shadow .14s ease;
}
.app-btn:hover { transform: translateY(-1px); }
.app-btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); color: #fff; box-shadow: 0 10px 24px rgba(109,94,252,.26); }
.app-btn.secondary { background: #eef1ff; color: var(--primary); }
.app-btn.danger { background: #fff1f2; color: var(--danger); }
.app-btn.small { border-radius: 14px; padding: 10px 14px; font-size: .9rem; }
.notice { border-radius: 18px; padding: 14px 16px; font-size: .95rem; }
.notice.error { background: #fff1f2; color: #991b1b; }
.notice.info { background: #eef6ff; color: #1d4ed8; }
.notice.warn { background: #fff7e6; color: #92400e; }
.notice-list { margin: 10px 0 0 18px; }
.notice-list li { margin-bottom: 6px; }
.soft-pill, .task-type-pill {
  display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 999px;
  background: #eef1ff; color: var(--primary); font-weight: 700; font-size: .84rem;
}
.soft-pill.info { background: #e8f7ff; color: #0369a1; }
.soft-pill.muted { background: #f1f3fb; color: var(--muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row.slim { gap: 6px; }
.stats-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.stats-strip.teacher { grid-template-columns: repeat(4, minmax(0,1fr)); }
.mini-stat {
  background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.75); box-shadow: var(--shadow); border-radius: 24px;
  padding: 18px 16px; display: grid; gap: 4px; text-align: center;
}
.mini-stat strong { font-size: 1.5rem; }
.mini-stat span { color: var(--muted); font-size: .92rem; }
.mini-stat.attention { background: linear-gradient(180deg, #fff6dc, #fffdf7); }
.task-card { padding: 16px; display: grid; }
.task-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.task-title { font-size: 1.1rem; font-weight: 800; margin: 10px 0 8px; }
.task-desc { line-height: 1.45; min-height: 44px; }
.status-badge {
  display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; border-radius: 999px;
  font-size: .82rem; font-weight: 800;
}
.status-badge.done { background: #eaf8ef; color: var(--success); }
.status-badge.pending { background: #fff4dd; color: var(--warning); }
.status-badge.new { background: #ede9fe; color: #6d28d9; }
.score-line { color: var(--muted); font-size: .95rem; }
.score-line strong { color: var(--text); }
.score-line.muted { opacity: .75; }
.quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.quick-link {
  background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.8); border-radius: 22px; box-shadow: var(--shadow);
  padding: 16px; font-weight: 800; text-align: center;
}
.quick-link.highlight { background: linear-gradient(135deg, #6d5efc, #8a7cff); color: #fff; }
.mobile-list { display: grid; gap: 10px; }
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid #edf0ff;
}
.list-row:last-child { border-bottom: 0; padding-bottom: 0; }
.list-row p { margin-top: 4px; font-size: .92rem; }
.list-row.actionable { transition: transform .15s ease; }
.list-row.actionable:hover { transform: translateX(2px); }
.empty-inline { color: var(--muted); padding: 12px 0 4px; }
.task-screen { max-width: 880px; margin: 0 auto; }
.task-header-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.back-link { color: var(--primary); font-weight: 800; }
.mobile-pair-row { display: grid; grid-template-columns: 1fr; gap: 10px; background: #fafbff; border: 1px solid var(--line); padding: 14px; border-radius: 20px; }
.pair-left { font-weight: 800; }
.fill-block { line-height: 2.3; font-size: 1rem; }
.inline-input { display: inline-flex; width: 160px; vertical-align: middle; margin: 0 6px; padding: 11px 12px; border-radius: 14px; }
.upload-box {
  position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: center;
  background: #f9faff; border: 1px dashed rgba(109,94,252,.35); border-radius: 22px; padding: 16px; cursor: pointer;
}
.upload-box input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-box p { margin-top: 4px; }
.upload-icon { font-size: 1.4rem; }
.result-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.score-bubble {
  min-width: 74px; text-align: center; padding: 10px 12px; background: #eef1ff; color: var(--primary); border-radius: 18px; font-weight: 800;
}
.helpbox {
  white-space: pre-wrap; background: #fafbff; border: 1px solid var(--line); padding: 16px; border-radius: 20px; color: var(--text); margin: 0;
}
.selection-card { display: grid; gap: 8px; background: #fafbff; border: 1px solid var(--line); padding: 14px; border-radius: 20px; font-weight: 700; }
.toggle-row {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; background: #fafbff; border: 1px solid var(--line);
  padding: 14px; border-radius: 20px;
}
.toggle-row input { margin-top: 4px; }
.toggle-row p { margin-top: 4px; }
.credential-card { background: #fafbff; border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.feature-list { display: grid; gap: 14px; }
.feature-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.feature-item span { font-size: 1.4rem; }
.feature-item p { margin-top: 4px; }
.demo-hint { color: var(--muted); font-size: .95rem; }
.empty-state { text-align: center; }
.empty-icon { font-size: 2rem; margin-bottom: 10px; }
.bottom-nav {
  position: fixed; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(99vw, 760px); display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 4px;
  padding: 6px; background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.92); border-radius: 20px; box-shadow: 0 14px 32px rgba(45, 56, 124, 0.16); backdrop-filter: blur(20px);
}
.bottom-nav.student-nav { grid-template-columns: repeat(3, minmax(0,1fr)); max-width: 480px; }
.bottom-nav-item {
  display: grid; justify-items: center; gap: 1px; padding: 5px 4px; color: var(--muted); border-radius: 12px; font-weight: 700; line-height: 1;
}
.bottom-nav-item span { font-size: 1rem; }
.bottom-nav-item.active { background: #eef1ff; color: var(--primary); }
.submission-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .content-grid.two-up, .content-grid.cards-grid, .quick-actions, .stats-strip, .stats-strip.teacher { grid-template-columns: 1fr; }
  .mobile-hero { display: grid; }
}
@media (max-width: 640px) {
  .app-shell { padding-inline: max(2px, env(safe-area-inset-left)); padding-top: calc(env(safe-area-inset-top) + 6px); padding-bottom: calc(52px + env(safe-area-inset-bottom)); }
  .app-topbar { padding: 2px 0 6px; gap: 4px; }
  .user-chip { max-width: 158px; overflow: hidden; padding-inline: 11px; }
  .hero-card { padding: 18px; border-radius: 24px; }
  .padded { padding: 14px; }
  .screen-title { font-size: 1.7rem; }
  .task-card { padding: 14px; }
  .inline-input { width: 100%; display: block; margin: 8px 0; }
  .stacked-mobile { align-items: start; }
  .builder-step { padding: 14px; border-radius: 20px; }
  .builder-step-head { grid-template-columns: 36px 1fr; gap: 10px; }
  .builder-step-head > span { width: 36px; height: 36px; border-radius: 14px; }
  .bottom-nav { width: calc(100vw - 2px); bottom: calc(env(safe-area-inset-bottom)); border-radius: 14px; padding: 3px 3px; gap: 1px; }
  .bottom-nav-item { padding: 4px 2px; }
}


:root { --primary-soft: #f8e8fd; }
body { background: radial-gradient(circle at top, #fff7fe, #f7f2ff 35%, #f5f7ff 70%); }
.brand-link { color: var(--text); text-decoration: none; font-size: 1.5rem; font-weight: 900; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.list-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.nav-badge { position:absolute; top:6px; right:14px; min-width:20px; height:20px; border-radius:999px; background:#efe6ff; color:var(--primary); display:grid; place-items:center; font-size:.72rem; font-weight:800; padding:0 6px; }
.nav-badge.hot { background:#ffe6f2; color:#b4235f; }
.bottom-nav-item { position:relative; }
.progress-card { overflow:hidden; }
.progress-track { width:100%; height:12px; border-radius:999px; background:#f0e6f7; overflow:hidden; }
.progress-fill { height:100%; border-radius:999px; background:linear-gradient(90deg, var(--primary), #dd7af4); }
.step-list { display:grid; gap:12px; }
.step-item { display:grid; grid-template-columns:38px 1fr; gap:12px; align-items:start; }
.step-item span { width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); font-weight:900; }
.builder-step { display:grid; gap:14px; padding:18px; border:1px solid var(--line); border-radius:24px; background:#fcfbff; }
.builder-step-head { display:grid; grid-template-columns:42px 1fr; gap:12px; align-items:start; }
.builder-step-head > span { width:42px; height:42px; border-radius:16px; display:grid; place-items:center; font-weight:900; background:var(--primary-soft); color:var(--primary); }
.builder-step-head p { margin:4px 0 0; color:var(--muted); }
.choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.choice-card { border:1px solid var(--line); background:#fff; border-radius:22px; padding:16px; text-align:left; display:grid; gap:6px; }
.choice-card.active { border-color:rgba(186,85,211,.55); box-shadow:0 0 0 4px rgba(186,85,211,.12); background:#fff7fe; }
.choice-card p { margin:0; color:var(--muted); }
.hidden { display:none !important; }
.tall-select { min-height: 210px; }
.tile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:12px; }
.tile-card { min-height:84px; border-radius:22px; border:1px solid var(--line); background:#fff; padding:14px; font-weight:800; box-shadow:var(--shadow); }
.tile-card.selected { background:#eafaf0; border-color:#5dc98d; color:#106b35; }
.tile-card.paired { background:#f3f0ff; border-color:#ceb7f8; color:#6e38a6; opacity:.78; }
.tile-card.error { background:#fff1f2; border-color:#f7a3b6; }
.pairing-status { border-radius:18px; padding:12px 14px; background:#faf5ff; color:#7f2f98; font-weight:700; min-height: 48px; display:flex; align-items:center; }
.soft-action { border:0; background:#f3ecff; color:var(--primary); border-radius:999px; padding:10px 14px; font-weight:800; }
@media (max-width: 860px) { .choice-grid { grid-template-columns:1fr; } }

/* native-like refinements */
body.ready .fade-up { animation: fadeUp .45s ease both; }
.fade-up.delay-1 { animation-delay: .06s; }
.fade-up.delay-2 { animation-delay: .12s; }
.fade-up.delay-3 { animation-delay: .18s; }
.fade-up.delay-4 { animation-delay: .24s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(186,85,211,.14); } 50% { box-shadow: 0 0 0 10px rgba(186,85,211,0); } }
.tap-pop { transition: transform .14s ease, box-shadow .18s ease, filter .18s ease; }
.tap-pop:active { transform: scale(.98); }
.interactive-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.interactive-card:hover { transform: translateY(-3px); border-color: rgba(186,85,211,.35); }
.mobile-hero-card { min-height: 280px; }
.hero-title-sm { font-size: clamp(1.6rem, 4.8vw, 2.4rem); }
.section-on-dark { color: rgba(255,255,255,.72); }
.ghost-on-dark { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(8px); }
.dashboard-accent-card { border-color: rgba(186,85,211,.14); }
.glass-highlight { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.84)); border-color: rgba(186,85,211,.16); }
.pulse-soft { animation: pulseGlow 2.6s ease infinite; }
.section-title + .screen-subtitle { margin-top: 6px; }
.flow-steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; }
.flow-step { display:grid; grid-template-columns: 34px 1fr; gap: 12px; align-items:start; border:1px solid var(--line); border-radius: 20px; background:#fff; padding:14px; }
.flow-step b { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:#f4ecff; color:var(--primary); }
.flow-step p { margin:4px 0 0; }
.flow-step.active { border-color: rgba(186,85,211,.35); box-shadow: 0 0 0 4px rgba(186,85,211,.10); }
.app-section-card { display:grid; gap: 10px; padding: 12px; border:1px solid var(--line); border-radius: 18px; background:#fcfbff; }
.fill-block-mobile { line-height: 2.6; }
.inline-input-tight { min-width: 6ch; max-width: 100%; padding-inline: 10px; text-align:center; }
.app-textarea-lg { min-height: 180px; }
.tile-grid-compact { grid-template-columns: repeat(2, minmax(0,1fr)); }
.sticky-action-bar { position: sticky; bottom: calc(54px + env(safe-area-inset-bottom)); z-index: 8; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:18px; background: rgba(255,255,255,.96); border:1px solid rgba(255,255,255,.96); box-shadow: 0 10px 24px rgba(61,55,116,.12); backdrop-filter: blur(14px); }
.sticky-copy p { margin: 2px 0 0; font-size: .92rem; }
.interactive-row { transition: transform .16s ease, border-color .16s ease; }
.interactive-row:focus-within { transform: translateY(-1px); border-color: rgba(186,85,211,.35); }
.builder-progress { display:flex; gap:8px; }
.builder-dot { width:10px; height:10px; border-radius:999px; background:#eadcf7; }
.builder-dot.active { width:26px; background: var(--primary); }
.align-start { align-items: start; }
.builder-summary { position: sticky; top: 92px; }
.summary-stack { display:grid; gap:10px; }
.summary-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #f1ecf8; }
.summary-row:last-child { border-bottom:0; }
.summary-row span { color: var(--muted); }
.task-flow-screen { padding-bottom: 130px; }
@media (max-width: 860px) {
  .builder-summary { position: static; }
}
@media (max-width: 640px) {
  .flow-steps { grid-template-columns: 1fr; }
  .sticky-action-bar { bottom: calc(56px + env(safe-area-inset-bottom)); flex-direction:row; align-items:center; padding:8px 10px; }
  .sticky-copy p { display:none; }
  .sticky-copy strong { font-size:.95rem; }
  .tile-grid-compact { grid-template-columns: 1fr 1fr; }
}


.flash-success, .flash-error { padding: 14px 16px; border-radius: 18px; font-weight: 700; }
.flash-success { background: #ecfdf3; color: #12723d; border: 1px solid #b7ebcb; }
.flash-error { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.selection-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.picker-grid { display:grid; gap:12px; }
.picker-card { display:grid; gap:6px; padding:16px; border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow: var(--shadow); cursor:pointer; transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; }
.picker-card:hover { transform: translateY(-2px); border-color: rgba(186,85,211,.35); }
.multi-select-card input { position:absolute; opacity:0; pointer-events:none; }
.multi-select-card.selected { border-color: rgba(186,85,211,.6); background: #fff7fe; box-shadow: 0 0 0 4px rgba(186,85,211,.1); }
.multi-select-card p { margin:0; color: var(--muted); }
.stack-right { display:grid; justify-items:end; gap:8px; }
.chip-stack { display:flex; flex-wrap:wrap; gap:8px; }
.sticky-submit-bar { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom)); display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 18px; border-radius:24px; background: rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.95); box-shadow: 0 18px 45px rgba(45, 56, 124, 0.16); backdrop-filter: blur(20px); }
.sticky-submit-bar .muted { margin:4px 0 0; color: var(--muted); }
@media (max-width: 860px) { .selection-grid { grid-template-columns: 1fr; } .sticky-submit-bar { flex-direction:column; align-items:stretch; } .stack-right { justify-items:start; } }

/* admin desktop panel */
.app-shell-admin { max-width: 1380px; padding-bottom: 32px; }
.desktop-admin-nav { display:flex; gap:10px; flex-wrap:wrap; margin: 0 0 18px; padding: 8px; background: rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.88); border-radius: 22px; box-shadow: var(--shadow); }
.desktop-admin-link { display:inline-flex; align-items:center; gap:8px; padding: 12px 16px; border-radius: 16px; color: var(--muted); font-weight: 700; }
.desktop-admin-link.active { background:#f5ebfb; color: var(--primary); }
.desktop-admin-link b { background: var(--primary); color: #fff; border-radius: 999px; font-size: .75rem; padding: 2px 8px; }
.admin-hero { display:flex; align-items:end; justify-content:space-between; gap: 18px; }
.admin-hero-actions { display:flex; gap: 10px; flex-wrap:wrap; }
.admin-stats-grid { display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; }
.admin-stat-card { background: var(--surface); border:1px solid rgba(255,255,255,.8); border-radius: 24px; box-shadow: var(--shadow); padding: 18px; display:grid; gap: 8px; }
.admin-stat-card span { color: var(--muted); font-weight: 700; }
.admin-stat-card strong { font-size: 2rem; line-height: 1; }
.admin-stat-card.attention { border-color: rgba(245,158,11,.32); }
.admin-layout { grid-template-columns: 360px minmax(0, 1fr); }
.desktop-table-wrap { overflow:auto; }
.admin-table { width:100%; border-collapse: collapse; min-width: 620px; }
.admin-table th, .admin-table td { text-align:left; padding: 14px 12px; border-bottom: 1px solid #f0ecf7; vertical-align: top; }
.admin-table th { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.admin-table-users { min-width: 880px; }
.inline-reset-form { display:flex; gap:10px; align-items:center; }
.muted-line { color: var(--muted); font-size: .92rem; margin-top: 4px; }
.app-input.small { min-width: 190px; }
@media (max-width: 1100px) {
  .admin-stats-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .admin-layout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .desktop-admin-nav { overflow:auto; }
  .admin-hero { flex-direction:column; align-items:flex-start; }
  .admin-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.task-image-preview{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:18px;display:block}
.image-match-card{cursor:pointer;transition:transform .18s ease, box-shadow .18s ease}
.image-match-card.selected{box-shadow:0 0 0 2px #BA55D3 inset}
.order-dropzone{min-height:64px;border:1px dashed rgba(186,85,211,.45);border-radius:18px;padding:14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#6d5b74;background:#fff}
.js-order-tile.is-used{opacity:.45}
.task-block-card{border:2px solid rgba(186,85,211,.30);border-radius:20px;padding:18px;background:#fff}
.stack-right{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.soft-action{display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;background:#f7effa;color:#6f2c7f;text-decoration:none;font-weight:600}
.soft-action:hover{filter:brightness(.98)}
.hidden{display:none!important}
.inline-details summary { list-style: none; cursor: pointer; }
.inline-details summary::-webkit-details-marker { display:none; }
.details-panel { padding-top: 10px; }
.app-btn.ghost { background:#fff; color:var(--primary); border:1px solid rgba(186,85,211,.28); }
.status-badge.archived { background:#eef0f6; color:#667085; }
.soft-action.is-active { background: var(--primary); color: #fff; }


.task-list-card { border: 1px solid #edf0ff; border-radius: 22px; padding: 0 14px; background: #fff; box-shadow: 0 8px 20px rgba(31,41,55,.04); }
.task-list-card .list-row { border-bottom: 0; }
.task-list-card:focus-visible { outline: 3px solid rgba(186,85,211,.22); }
.task-card-actions { display: none; gap: 8px; flex-wrap: wrap; padding: 0 0 14px; border-top: 1px solid #f1f3fb; margin-top: -2px; padding-top: 12px; }
.task-list-card.is-active { border-color: rgba(186,85,211,.42); box-shadow: 0 12px 28px rgba(186,85,211,.12); }
.task-list-card.is-active .task-card-actions { display: flex; }
.task-intro-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.task-hint-toggle { margin-left:auto; }
.task-hint-toggle summary { list-style:none; width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); cursor:pointer; font-size:1.2rem; box-shadow: var(--shadow); }
.task-hint-toggle summary::-webkit-details-marker { display:none; }
.task-hint-content { margin-top:8px; max-width: 420px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:10px 12px; color:var(--muted); line-height:1.42; animation: fadeInUp .18s ease; }
@media (max-width: 720px) { .task-intro-top { align-items:stretch; } .task-hint-content { max-width: 100%; } }

.assignment-list{display:flex;flex-direction:column;gap:10px}.assignment-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.03)}.assignment-copy p{margin:4px 0 0;opacity:.72;font-size:.92rem}.app-btn.small{padding:10px 14px;font-size:.92rem}.app-btn[disabled]{opacity:.45;cursor:not-allowed}
.soft-pill.danger{background:rgba(220,38,38,.12);color:#b91c1c;border:1px solid rgba(220,38,38,.18);}

.column-match{
  --pair-slot-count: 6;
  --pair-area-height: calc(100dvh - 238px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px;
  min-height:min(76dvh, var(--pair-area-height));
  height:min(76dvh, var(--pair-area-height));
}
.column-match-col{
  display:grid;
  grid-template-rows:repeat(var(--pair-slot-count), minmax(0,1fr));
  align-items:stretch;
  gap:8px;
  min-height:100%;
}
.column-pair-btn,
.column-pair-placeholder{
  min-height:0;
  height:100%;
  border-radius:18px;
}
.column-pair-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  align-content:center;
  justify-items:center;
  font-size:clamp(1.22rem, 3.9vw, 1.52rem);
  font-weight:800;
  line-height:1.15;
  padding:10px 12px;
  white-space:normal;
  word-break:break-word;
  overflow:hidden;
}
.column-pair-btn > span{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:100%;
  height:100%;
}
.column-pair-placeholder{
  border:1.5px dashed rgba(148,163,184,.45);
  background:rgba(226,232,240,.62);
  box-shadow:none;
}

@keyframes pairFadeInSlot{
  0%{background:#e2e8f0; color:#94a3b8; border-color:rgba(148,163,184,.55); opacity:1; filter:saturate(.82);}
  100%{background:#fff; color:#111827; border-color:var(--line); opacity:1; filter:saturate(1);}
}
.column-pair-btn.entering{
  will-change:background-color, color, border-color, filter;
}
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}.builder-modal-sheet{scroll-margin-top:24px}


.builder-add-menu{border:1.5px solid #cfd4ea;border-radius:18px;background:#fcfbff;padding:10px 12px}.builder-add-summary{display:inline-flex}.builder-add-panel{padding-top:12px}.task-block-card.is-collapsed .js-block-editor{display:none!important}.task-block-card:not(.is-collapsed){border-color:rgba(186,85,211,.78);box-shadow:0 0 0 4px rgba(186,85,211,.12)}.task-block-card .compact-head{grid-template-columns:42px 1fr auto;cursor:pointer}.task-block-summary{color:var(--muted);padding-top:6px}.builder-inline-actions{display:flex;justify-content:flex-end;padding-top:10px;border-top:1px solid #e7deef}.task-block-card .js-edit-block{background:#fff;border:1.5px solid rgba(186,85,211,.42)}

.device-mobile .app-card,.device-mobile .mini-stat,.device-mobile .builder-step,.device-mobile .task-card,.device-mobile .user-chip,.device-mobile .icon-btn,.device-mobile .bottom-nav,.device-mobile .app-input,.device-mobile .app-textarea,.device-mobile .app-select{border-width:1.5px;border-style:solid;border-color:#cfd4ea;}
.device-mobile .builder-step-head{align-items:center;}
.device-mobile .screen-subtitle{font-size:.96rem;}

.task-title-link{color:inherit;text-decoration:none}
.task-title-link:hover{text-decoration:underline}
.task-card-actions .soft-action{cursor:pointer;border:1px solid rgba(111,44,127,.16)}

.order-dropzone.move-mode{border-color:#BA55D3;background:#faf5ff;box-shadow:0 0 0 3px rgba(186,85,211,.12) inset}
.order-word.move-source,.js-order-tile.move-source{outline:3px solid rgba(186,85,211,.26);border-color:#BA55D3;transform:scale(1.02)}
.order-word.move-target{box-shadow:inset 0 0 0 2px rgba(93,201,141,.9)}
.order-bank-moving .js-order-tile:not(.move-source){opacity:.72}

.order-chip, .order-chip * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.order-chip {
  cursor: pointer;
  touch-action: manipulation;
}
.order-floating {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 12px 30px rgba(17, 24, 39, .18);
  background: #fff;
  border: 2px solid #BA55D3;
}
.order-insert-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px dashed rgba(186,85,211,.55);
  color: #7f2f98;
  font-size: .82rem;
  font-weight: 700;
  background: #faf5ff;
}
.order-dropzone.move-mode {
  min-height: 84px;
}

.drag-selection-lock, .drag-selection-lock * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.order-bank {
  touch-action: pan-y;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
  min-height:48px;
}
.order-chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  border-radius:999px;
  border:2px solid #d7c8ef;
  background:#fff;
  color:#3b2a46;
  font-weight:800;
  line-height:1.15;
  box-shadow:var(--shadow);
}
.order-bank-chip.is-used {
  opacity:.35;
}
.order-word {
  background:#f7effd;
  border-color:#BA55D3;
}
.order-dropzone {
  touch-action: pan-y;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-start;
  min-height:88px;
  padding:14px;
  border:2px solid #d7c8ef;
  border-radius:20px;
  background:#fff;
}
.order-drop-message {
  color:var(--muted);
  font-size:.95rem;
  line-height:1.45;
}


.fill-block-lines {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.fill-line-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  line-height: 1.65;
}

.task-card[data-href],
.js-task-selectable[data-href] {
  cursor: pointer;
}

.task-card-footer {
  display: flex;
  justify-content: flex-start;
}

.compact-task-intro {
  padding: 12px 12px .7rem;
}

.task-hint-toggle {
  margin-left: auto;
}

.task-hint-toggle > summary {
  list-style: none;
  cursor: pointer;
}
.task-hint-toggle > summary::-webkit-details-marker { display: none; }

@media (max-width: 640px) {
  .task-screen .app-card.padded { padding: 12px; }
  .task-screen .screen-title { font-size: 1.45rem; margin: 2px 0 4px; }
  .task-screen .screen-subtitle { font-size: .96rem; }
  .task-header-row { gap: 6px; }
  .pairing-status { padding: 10px 12px; font-size: .92rem; }
  .column-match {
    gap: 8px;
    margin-top: 8px;
    min-height: min(74dvh, var(--pair-area-height));
    height: min(74dvh, var(--pair-area-height));
  }
  .column-match-col { gap: 8px; }
  .column-pair-btn,
  .column-pair-placeholder {
    min-height: 0;
    height: 100%;
    border-radius: 16px;
  }
  .column-pair-btn { padding: 8px 10px; font-size: clamp(1.18rem, 4.1vw, 1.46rem); }
  .upload-box { padding: 12px; gap: 10px; border-radius: 18px; }
  .fill-block-lines { gap: .55rem; }
  .fill-line-row { gap: .35rem; line-height: 1.5; }
}

.column-pair-btn, .column-pair-btn *, .tile-card, .tile-card * {
  -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important;
}
.column-pair-btn, .tile-card {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer;
}


.column-pair-btn, .js-pair-tile, .pairing-status { box-sizing: border-box; }
.column-pair-btn.selected{background:#efe7ff !important;color:#6e38a6 !important;border-color:var(--line) !important;box-shadow:none !important}
.column-pair-btn.success{background:#dcfce7 !important;color:#166534 !important;border-color:var(--line) !important;box-shadow:none !important}
.column-pair-placeholder{color:transparent !important}
.column-pair-btn.error{background:#fee2e2 !important;color:#991b1b !important;border-color:var(--line) !important;box-shadow:none !important}
.column-pair-btn.pressed,.js-pair-tile.pressed{transform:none !important}
.js-pair-tile.selected{background:#efe7ff !important;color:#6e38a6 !important;border-color:var(--line) !important;box-shadow:none !important}

.task-flow-screen .app-card.padded{padding:10px;}
.task-flow-screen .app-section-card{padding:10px; border-radius:16px; gap:8px;}
.task-flow-screen .screen-title{margin-bottom:2px;}
.task-flow-screen .screen-subtitle{margin:0;}
.task-header-row{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.compact-task-intro{margin-bottom:10px;}
.task-intro-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.task-hint-toggle{margin-left:auto;}
.task-hint-toggle summary{list-style:none; cursor:pointer; user-select:none;}
.task-hint-toggle summary::-webkit-details-marker{display:none;}
.task-hint-content{margin-top:6px; padding:8px 10px; border-radius:12px; background:#faf5ff;}
.task-submit-footer{margin-top:12px; padding:4px 2px 10px;}
.task-submit-footer .app-btn{width:100%;}
.bundle-mobile-deck{display:grid; gap:10px;}
.bundle-lesson-shell{display:grid; gap:10px;}
.bundle-lesson-top{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.bundle-lesson-actions{display:flex; gap:8px; flex-wrap:wrap;}
.bundle-lesson-actions .soft-action[disabled]{opacity:.45; filter:saturate(.7);}
.bundle-mobile-deck{display:block;}
.bundle-mobile-page.hidden{display:none !important;}
.compact-order-top{margin-bottom:4px;}
.mcq-card{display:grid; gap:10px;}
.mcq-options{display:grid; gap:8px;}
.mcq-option{display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border:1.5px solid #cfd4ea; border-radius:14px; background:#fff; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
.mcq-option input{margin-top:2px; accent-color: var(--primary);}
.mcq-media{width:100%; border-radius:16px;}
.mcq-audio{width:100%;}
.mcq-link{text-decoration:none; width:max-content;}
@media (max-width: 640px){
  .task-flow-screen{padding-bottom:78px;}
  .task-flow-screen .app-main, .task-screen{gap:8px;}
  .task-flow-screen .app-card.padded{padding:8px;}
  .task-flow-screen .app-section-card{padding:8px; gap:6px; margin-inline:0;}
  .bundle-mobile-deck{display:block; overflow:visible; width:100%; touch-action: pan-y;}
  .bundle-mobile-page{min-width:100%; max-width:100%;}
  .bundle-lesson-top{align-items:flex-start;}
  .bundle-lesson-actions{width:100%;}
  .bundle-lesson-actions .soft-action{flex:1 1 0;}
  .sticky-action-bar{position:static; bottom:auto;}
}


.column-pair-btn{
  min-width:0;
}
.column-pair-btn span,
.column-pair-btn{
  text-align:center !important;
}
.column-pair-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.column-pair-btn > span{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  text-align:center !important;
}


/* v35 pair UI hard overrides */
.column-match{--pair-slot-count:6 !important; grid-template-columns:1fr 1fr !important;}
.column-match-col{grid-template-rows:repeat(6,minmax(0,1fr)) !important;}
.column-pair-btn,.column-pair-placeholder{min-height:0 !important;height:100% !important;}
.column-pair-btn{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  font-size:clamp(1.28rem,4.5vw,1.65rem) !important;
  line-height:1.12 !important;
  padding:8px 10px !important;
}
.column-pair-btn > span{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  text-align:center !important;
  margin:0 auto !important;
}
@keyframes pairRevealSmooth{
  0%{background:#e2e8f0; color:#94a3b8; border-color:rgba(148,163,184,.55);}
  100%{background:#fff; color:#111827; border-color:var(--line);}
}
.column-pair-btn.is-entering{
  background:#e2e8f0;
  color:#94a3b8;
  border-color:rgba(148,163,184,.55);
  animation: pairRevealSmooth 3s linear forwards;
}
.column-pair-btn.is-entering > span{color:inherit !important; opacity:1 !important;}
.column-pair-placeholder{background:rgba(226,232,240,.62) !important; border:1.5px dashed rgba(148,163,184,.45) !important;}
@media (max-width:640px){
  .column-match{gap:8px !important; margin-top:8px !important; min-height:min(74dvh,var(--pair-area-height)) !important; height:min(74dvh,var(--pair-area-height)) !important;}
  .column-match-col{gap:8px !important;}
  .column-pair-btn{font-size:clamp(1.28rem,4.8vw,1.68rem) !important; border-radius:16px !important;}
  .column-pair-placeholder{border-radius:16px !important;}
}

/* v40 game mode */
.active-game-card {
  border-color: rgba(186, 85, 211, 0.35);
}
.game-task-chip {
  min-height: 72px;
}
.game-task-chip span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.game-task-chip small {
  color: #6b7280;
}
.game-rope-board {
  overflow: hidden;
}
.game-score-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.team-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 0.95rem;
}
.team-score strong {
  font-size: 1.6rem;
  line-height: 1;
}
.team-score.red strong { color: #ef4444; }
.team-score.blue strong { color: #2563eb; }
.rope-track {
  position: relative;
  height: 84px;
  border-radius: 24px;
  background: linear-gradient(90deg, rgba(239,68,68,.12), rgba(255,255,255,.95) 50%, rgba(37,99,235,.12));
  border: 1px solid rgba(15, 23, 42, 0.1);
  overflow: hidden;
}
.rope-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #d97706 0 24px, #92400e 24px 48px);
  opacity: 0.8;
}
.rope-center {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(15, 23, 42, 0.18);
  transform: translateX(-50%);
}
.rope-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(186,85,211,.95));
  box-shadow: 0 12px 30px rgba(186, 85, 211, 0.3);
  transition: transform 0.7s ease;
  border: 3px solid rgba(255,255,255,0.95);
}
.rope-team-label {
  position: absolute;
  top: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.rope-team-label.red { left: 14px; color: #ef4444; }
.rope-team-label.blue { right: 14px; color: #2563eb; }
.muted-line {
  color: #6b7280;
  font-size: 0.9rem;
}
.row-card.tight {
  padding: 12px 14px;
}
.js-game-progress-pill {
  min-width: 92px;
  text-align: center;
}
@media (max-width: 768px) {
  .rope-track { height: 72px; }
  .rope-indicator { width: 62px; height: 62px; }
}

/* v41 game polish */
body.team-theme-red {
  --primary: #ef4444;
  --primary-strong: #dc2626;
}
body.team-theme-blue {
  --primary: #2563eb;
  --primary-strong: #1d4ed8;
}
body.team-theme-red .active-game-card,
body.team-theme-red .task-intro-card,
body.team-theme-red .app-card.game-team-emphasis {
  border-color: rgba(239,68,68,.38);
}
body.team-theme-blue .active-game-card,
body.team-theme-blue .task-intro-card,
body.team-theme-blue .app-card.game-team-emphasis {
  border-color: rgba(37,99,235,.36);
}

.game-status-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}
.game-status-inline::-webkit-scrollbar { display: none; }
.game-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(15,23,42,.08);
  font-weight: 800;
  color: var(--text);
}
.game-status-pill strong { font-size: 1.05rem; line-height: 1; }
.game-status-pill.red { color: #b91c1c; background: rgba(254,242,242,.96); }
.game-status-pill.blue { color: #1d4ed8; background: rgba(239,246,255,.96); }
.game-status-pill.current { flex: 1 0 auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.game-team-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 18px;
  font-weight: 800;
}
.game-team-banner.red { background: rgba(254,242,242,.95); color: #b91c1c; }
.game-team-banner.blue { background: rgba(239,246,255,.95); color: #1d4ed8; }
.game-team-banner b { letter-spacing: .04em; }

.game-close-note {
  background: rgba(255,255,255,.82);
  border: 1px dashed rgba(15,23,42,.12);
  border-radius: 18px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: .94rem;
}

@media (max-width: 768px) {
  .game-score-row {
    gap: 8px;
    margin-bottom: 12px;
  }
  .game-status-inline { gap: 8px; }
  .game-status-pill {
    padding: 8px 12px;
    font-size: .9rem;
  }
  .game-status-pill strong { font-size: 1rem; }
  .mobile-hero.compact .screen-subtitle { line-height: 1.35; }
}


/* v42 game animation */
.game-board-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.rope-track.thick-band{height:104px;border-radius:30px;background:linear-gradient(90deg,rgba(239,68,68,.92) 0%,rgba(239,68,68,.88) 48%,rgba(37,99,235,.88) 52%,rgba(37,99,235,.92) 100%);border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 18px 38px rgba(15,23,42,.14);}
.rope-track.thick-band::before{height:10px;background:repeating-linear-gradient(90deg,#f4d4a6 0 22px,#b9772b 22px 44px);opacity:.96;}
.rope-track .rope-zone{position:absolute;top:0;bottom:0;width:50%;opacity:.18;pointer-events:none;}
.rope-track .rope-zone.red{left:0;background:linear-gradient(90deg,rgba(255,255,255,.16),transparent);}
.rope-track .rope-zone.blue{right:0;background:linear-gradient(270deg,rgba(255,255,255,.16),transparent);}
.rope-track .rope-team-label{top:14px;color:#fff !important;text-shadow:0 1px 8px rgba(15,23,42,.24);}
.rope-track .rope-center{background:rgba(255,255,255,.5);}
.rope-track .rope-indicator{width:84px;height:84px;background:radial-gradient(circle at 34% 34%,rgba(255,255,255,.96),rgba(255,255,255,.86) 40%,rgba(15,23,42,.22) 100%);border:4px solid rgba(255,255,255,.92);box-shadow:0 18px 36px rgba(15,23,42,.24);}
.game-animation-modal{position:fixed;inset:0;z-index:140;display:flex;align-items:stretch;justify-content:center;background:rgba(2,6,23,.82);backdrop-filter:blur(8px);padding:0;}
.game-animation-modal.hidden{display:none;}
.game-animation-shell{position:relative;flex:1;display:flex;align-items:stretch;justify-content:center;}
.game-animation-stage{flex:1;display:flex;flex-direction:column;justify-content:flex-start;gap:16px;padding:18px 18px 16px;min-height:100dvh;background:linear-gradient(180deg,#f4fbff 0%,#eef2ff 52%,#d9f99d 100%);}
.game-animation-toolbar{display:flex;justify-content:flex-start;align-items:center;min-height:40px;position:relative;z-index:2;}
.game-animation-close{background:rgba(255,255,255,.92);box-shadow:0 8px 18px rgba(15,23,42,.14);}
.game-animation-headline{display:flex;align-items:center;gap:12px;justify-content:center;flex-wrap:wrap;position:relative;z-index:2;padding-inline:8px;}
.tug-stage{position:relative;flex:1;min-height:0;border-radius:36px;background:linear-gradient(180deg,#bae6fd 0%,#e0f2fe 22%,#f8fafc 56%,#bbf7d0 100%);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 24px 64px rgba(15,23,42,.16);}
.tug-sky-cloud{position:absolute;border-radius:999px;background:rgba(255,255,255,.78);filter:blur(.2px);box-shadow:0 12px 24px rgba(255,255,255,.16);}
.tug-sky-cloud::before,.tug-sky-cloud::after{content:'';position:absolute;border-radius:999px;background:inherit;}
.cloud-a{width:120px;height:36px;top:8%;left:12%;}
.cloud-a::before{width:44px;height:44px;left:12px;top:-18px;}
.cloud-a::after{width:52px;height:52px;right:16px;top:-20px;}
.cloud-b{width:144px;height:40px;top:14%;right:10%;}
.cloud-b::before{width:48px;height:48px;left:22px;top:-20px;}
.cloud-b::after{width:56px;height:56px;right:18px;top:-24px;}
.tug-ground{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(134,239,172,.78),rgba(74,222,128,.96));}
.tug-center-mark{position:absolute;left:50%;top:16%;bottom:21%;width:4px;border-radius:999px;transform:translateX(-50%);background:rgba(15,23,42,.14);z-index:1;}
 .tug-rope{position:absolute;left:7%;right:7%;top:56%;height:16px;transform:translateY(-50%);border-radius:999px;background:repeating-linear-gradient(90deg,#fff1c7 0 14px,#d8a04f 14px 28px,#8a5a1f 28px 32px);box-shadow:0 3px 0 rgba(255,255,255,.35) inset,0 10px 20px rgba(15,23,42,.22);z-index:6;}
.tug-knot{position:absolute;left:50%;top:56%;width:50px;height:50px;border-radius:999px;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 35%,#fff8e6,#d1b27b 72%);box-shadow:0 10px 24px rgba(15,23,42,.26);transition:transform .85s cubic-bezier(.22,1,.36,1);display:flex;align-items:flex-start;justify-content:center;z-index:7;}
.tug-flag-pole{position:absolute;left:50%;bottom:58%;width:3px;height:34px;background:#475569;border-radius:999px;transform:translateX(-50%);}
.tug-flag-cloth{position:absolute;left:50%;bottom:calc(58% + 16px);width:22px;height:14px;background:linear-gradient(180deg,#fbbf24,#f97316);clip-path:polygon(0 0,100% 18%,74% 50%,100% 82%,0 100%);transform:translateX(2px);box-shadow:0 4px 10px rgba(249,115,22,.2);}
.tug-team{position:absolute;bottom:8%;width:43%;display:flex;justify-content:center;pointer-events:none;z-index:5;}
.tug-team.red{left:1%;}
.tug-team.blue{right:1%;}
.kid-team{display:flex;align-items:flex-end;gap:20px;}
.kid-figure{position:relative;width:116px;height:236px;animation:kid-pull 1.9s cubic-bezier(.45,.05,.55,.95) infinite;transform-origin:58% 88%;color:#0f172a;}
.kid-figure.delay-2{animation-delay:.22s;}
.kid-figure.delay-3{animation-delay:.44s;}
.kid-figure.mirror{transform:scaleX(-1);}
.kid-figure .head{position:absolute;left:26px;top:0;width:38px;height:38px;border-radius:999px;background:#fde7c7;box-shadow:inset 0 -2px 0 rgba(15,23,42,.06);z-index:3;}
.kid-figure .eye{position:absolute;top:14px;width:4px;height:4px;border-radius:999px;background:#1f2937;}
.kid-figure .eye-a{left:11px;}
.kid-figure .eye-b{right:11px;}
.kid-figure .smile{position:absolute;left:11px;right:11px;bottom:8px;height:7px;border-bottom:2px solid #1f2937;border-radius:0 0 999px 999px;}
.kid-figure .torso{position:absolute;left:46px;top:36px;width:10px;height:84px;border-radius:999px;background:#334155;z-index:1;}
.kid-figure .shirt{position:absolute;left:24px;top:46px;width:48px;height:44px;border-radius:18px 18px 14px 14px;background:linear-gradient(180deg,var(--kid-shirt,#f87171),var(--kid-shirt-deep,#ef4444));box-shadow:0 4px 12px rgba(15,23,42,.12);z-index:2;}
.kid-figure.red{--kid-shirt:#fb7185;--kid-shirt-deep:#ef4444;}
.kid-figure.blue{--kid-shirt:#60a5fa;--kid-shirt-deep:#2563eb;}
.kid-figure .limb{position:absolute;display:block;}
.kid-figure .segment{position:absolute;display:block;height:8px;border-radius:999px;background:#334155;transform-origin:left center;}
.kid-figure .segment.lower{left:100%;top:0;}
.kid-figure .limb.arm.front{left:52px;top:62px;}
.kid-figure .limb.arm.front > .upper{width:30px;transform:rotate(-8deg);}
.kid-figure .limb.arm.front > .upper > .lower{width:34px;transform:rotate(18deg);}
.kid-figure .limb.arm.back{left:49px;top:74px;}
.kid-figure .limb.arm.back > .upper{width:26px;transform:rotate(12deg);}
.kid-figure .limb.arm.back > .upper > .lower{width:31px;transform:rotate(-12deg);}
.kid-figure .limb.leg.front{left:51px;top:120px;}
.kid-figure .limb.leg.front > .upper{width:38px;transform:rotate(128deg);}
.kid-figure .limb.leg.front > .upper > .lower{width:34px;transform:rotate(-42deg);}
.kid-figure .limb.leg.back{left:51px;top:123px;}
.kid-figure .limb.leg.back > .upper{width:40px;transform:rotate(58deg);}
.kid-figure .limb.leg.back > .upper > .lower{width:32px;transform:rotate(40deg);}
.kid-figure .grip{position:absolute;left:100%;top:50%;width:12px;height:12px;border-radius:999px;background:#fde7c7;border:2px solid rgba(15,23,42,.08);transform:translate(-20%, -50%);box-shadow:0 0 0 2px rgba(255,255,255,.28);}
.kid-figure::after{content:'';position:absolute;left:8px;right:8px;bottom:-8px;height:20px;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.18),transparent 70%);opacity:.45;filter:blur(6px);z-index:-1;}
@keyframes kid-pull{0%,100%{transform:translateY(0) rotate(0deg);}18%{transform:translateY(1px) rotate(1deg);}50%{transform:translateY(-5px) rotate(-9deg) translateX(-4px);}75%{transform:translateY(-1px) rotate(-4deg) translateX(-2px);}}
.kid-figure.mirror.delay-1,.kid-figure.mirror.delay-2,.kid-figure.mirror.delay-3{animation-name:kid-pull-mirror;}
@keyframes kid-pull-mirror{0%,100%{transform:scaleX(-1) translateY(0) rotate(0deg);}18%{transform:scaleX(-1) translateY(1px) rotate(1deg);}50%{transform:scaleX(-1) translateY(-5px) rotate(-9deg) translateX(-4px);}75%{transform:scaleX(-1) translateY(-1px) rotate(-4deg) translateX(-2px);}}
.kid-figure .limb.arm.front > .upper{animation:arm-front-upper 1.9s cubic-bezier(.45,.05,.55,.95) infinite;}
.kid-figure .limb.arm.front > .upper > .lower{animation:arm-front-lower 1.9s cubic-bezier(.45,.05,.55,.95) infinite;}
.kid-figure .limb.arm.back > .upper{animation:arm-back-upper 1.9s cubic-bezier(.45,.05,.55,.95) infinite;}
.kid-figure .limb.arm.back > .upper > .lower{animation:arm-back-lower 1.9s cubic-bezier(.45,.05,.55,.95) infinite;}
.kid-figure .limb.leg.front > .upper{animation:leg-front-upper 1.9s cubic-bezier(.45,.05,.55,.95) infinite;}
.kid-figure .limb.leg.front > .upper > .lower{animation:leg-front-lower 1.9s cubic-bezier(.45,.05,.55,.95) infinite;}
.kid-figure .limb.leg.back > .upper{animation:leg-back-upper 1.9s cubic-bezier(.45,.05,.55,.95) infinite;}
.kid-figure .limb.leg.back > .upper > .lower{animation:leg-back-lower 1.9s cubic-bezier(.45,.05,.55,.95) infinite;}
.kid-figure.delay-2 .limb .upper,.kid-figure.delay-2 .limb .lower{animation-delay:.22s;}
.kid-figure.delay-3 .limb .upper,.kid-figure.delay-3 .limb .lower{animation-delay:.44s;}
@keyframes arm-front-upper{0%,100%{transform:rotate(-8deg);}50%{transform:rotate(-20deg);}}
@keyframes arm-front-lower{0%,100%{transform:rotate(18deg);}50%{transform:rotate(42deg);}}
@keyframes arm-back-upper{0%,100%{transform:rotate(12deg);}50%{transform:rotate(-2deg);}}
@keyframes arm-back-lower{0%,100%{transform:rotate(-12deg);}50%{transform:rotate(10deg);}}
@keyframes leg-front-upper{0%,100%{transform:rotate(128deg);}50%{transform:rotate(138deg);}}
@keyframes leg-front-lower{0%,100%{transform:rotate(-42deg);}50%{transform:rotate(-28deg);}}
@keyframes leg-back-upper{0%,100%{transform:rotate(58deg);}50%{transform:rotate(46deg);}}
@keyframes leg-back-lower{0%,100%{transform:rotate(40deg);}50%{transform:rotate(28deg);}}
body.game-animation-open{overflow:hidden;}
@media (max-width:768px){
  .rope-track.thick-band{height:96px;border-radius:26px;}
  .rope-track .rope-indicator{width:76px;height:76px;}
  .game-animation-stage{padding:14px 12px 12px;gap:12px;}
  .game-animation-headline{gap:8px;}
  .tug-stage{border-radius:28px;}
  .tug-team{bottom:12%;width:47%;}
  .kid-team{gap:10px;}
  .kid-figure{width:78px;height:170px;}
  .kid-figure .head{left:18px;width:28px;height:28px;}
  .kid-figure .shirt{left:16px;top:34px;width:34px;height:30px;}
  .kid-figure .torso{left:31px;top:28px;height:62px;width:8px;}
  .kid-figure .limb.arm.front{left:34px;top:47px;}
  .kid-figure .limb.arm.front > .upper{width:20px;}
  .kid-figure .limb.arm.front > .upper > .lower{width:22px;}
  .kid-figure .limb.arm.back{left:32px;top:56px;}
  .kid-figure .limb.arm.back > .upper{width:18px;}
  .kid-figure .limb.arm.back > .upper > .lower{width:20px;}
  .kid-figure .limb.leg.front{left:33px;top:88px;}
  .kid-figure .limb.leg.front > .upper{width:25px;}
  .kid-figure .limb.leg.front > .upper > .lower{width:22px;}
  .kid-figure .limb.leg.back{left:33px;top:90px;}
  .kid-figure .limb.leg.back > .upper{width:26px;}
  .kid-figure .limb.leg.back > .upper > .lower{width:20px;}
  .kid-figure .grip{width:10px;height:10px;}
  .tug-knot{width:38px;height:38px;}
  .tug-flag-pole{height:28px;}
  .tug-flag-cloth{width:18px;height:12px;}
  .tug-rope{left:4%;right:4%;height:12px;}
}


/* v47 tug-of-war physics and visible shared rope */
.game-animation-stage .tug-stage{isolation:isolate;}
.game-animation-stage .tug-ground{height:32%;}
.game-animation-stage .tug-center-mark{top:14%;bottom:18%;opacity:.55;}
.game-animation-stage .tug-rope{
  left:4%;
  right:4%;
  top:64%;
  height:14px;
  border-radius:999px;
  background:repeating-linear-gradient(90deg,#f5e7b8 0 18px,#d19a49 18px 36px,#7e5320 36px 42px);
  box-shadow:0 2px 0 rgba(255,255,255,.25) inset,0 3px 10px rgba(15,23,42,.18),0 0 0 2px rgba(101,67,33,.15);
  z-index:9;
}
.game-animation-stage .tug-knot{top:64%;z-index:10;width:52px;height:52px;}
.game-animation-stage .tug-team{bottom:3%;width:47%;z-index:11;pointer-events:none;}
.game-animation-stage .tug-team.red{left:0%;justify-content:flex-start;padding-left:1.5%;}
.game-animation-stage .tug-team.blue{right:0%;justify-content:flex-end;padding-right:1.5%;}
.game-animation-stage .kid-team{display:flex;align-items:flex-end;gap:6px;}
.game-animation-stage .kid-figure{
  --pull-dur:2.1s;
  width:158px;
  height:320px;
  transform-origin:54% 92%;
  animation:kid-brace-left var(--pull-dur) ease-in-out infinite;
}
.game-animation-stage .kid-figure.delay-1{--pull-dur:1.92s;}
.game-animation-stage .kid-figure.delay-2{--pull-dur:2.28s;}
.game-animation-stage .kid-figure.delay-3{--pull-dur:1.74s;}
.game-animation-stage .kid-figure.mirror{animation-name:kid-brace-right;}
.game-animation-stage .kid-figure .head{left:34px;top:10px;width:48px;height:48px;z-index:6;}
.game-animation-stage .kid-figure .torso{left:61px;top:58px;width:12px;height:116px;z-index:2;background:#243244;}
.game-animation-stage .kid-figure .shirt{left:28px;top:66px;width:60px;height:58px;border-radius:22px 22px 18px 18px;z-index:3;}
.game-animation-stage .kid-figure .limb{z-index:5;}
.game-animation-stage .kid-figure .segment{height:9px;background:#243244;transform-origin:left center;}
/* two-handed pull posture */
.game-animation-stage .kid-figure .limb.arm.front{left:68px;top:94px;z-index:14;}
.game-animation-stage .kid-figure .limb.arm.front>.upper{width:40px;transform:rotate(-6deg);animation:arm-front-upper-brace var(--pull-dur) ease-in-out infinite;}
.game-animation-stage .kid-figure .limb.arm.front>.upper>.lower{width:44px;transform:rotate(12deg);animation:arm-front-lower-brace var(--pull-dur) ease-in-out infinite;}
.game-animation-stage .kid-figure .limb.arm.back{left:66px;top:112px;z-index:13;}
.game-animation-stage .kid-figure .limb.arm.back>.upper{width:36px;transform:rotate(-2deg);animation:arm-back-upper-brace var(--pull-dur) ease-in-out infinite;}
.game-animation-stage .kid-figure .limb.arm.back>.upper>.lower{width:40px;transform:rotate(20deg);animation:arm-back-lower-brace var(--pull-dur) ease-in-out infinite;}
.game-animation-stage .kid-figure .limb.leg.front{left:63px;top:176px;z-index:2;}
.game-animation-stage .kid-figure .limb.leg.front>.upper{width:58px;transform:rotate(132deg);animation:leg-front-upper-drive var(--pull-dur) ease-in-out infinite;}
.game-animation-stage .kid-figure .limb.leg.front>.upper>.lower{width:54px;transform:rotate(-38deg);animation:leg-front-lower-drive var(--pull-dur) ease-in-out infinite;}
.game-animation-stage .kid-figure .limb.leg.back{left:63px;top:184px;z-index:1;}
.game-animation-stage .kid-figure .limb.leg.back>.upper{width:54px;transform:rotate(74deg);animation:leg-back-upper-drive var(--pull-dur) ease-in-out infinite;}
.game-animation-stage .kid-figure .limb.leg.back>.upper>.lower{width:48px;transform:rotate(30deg);animation:leg-back-lower-drive var(--pull-dur) ease-in-out infinite;}
.game-animation-stage .kid-figure .grip{
  width:14px;height:14px;transform:translate(-10%,-50%);background:#fde7c7;
  box-shadow:0 0 0 2px rgba(255,255,255,.22);z-index:15;
}
.game-animation-stage .kid-figure .grip::before{
  content:'';position:absolute;left:38%;top:50%;height:10px;width:150px;transform:translateY(-50%);
  border-radius:999px;
  background:repeating-linear-gradient(90deg,#f5e7b8 0 14px,#d19a49 14px 28px,#7e5320 28px 34px);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 0 0 1px rgba(101,67,33,.12);
  z-index:-1;
}
.game-animation-stage .kid-figure::after{left:14px;right:14px;bottom:8px;height:24px;opacity:.28;}
.game-animation-stage .kid-figure.delay-2 .limb .upper,
.game-animation-stage .kid-figure.delay-2 .limb .lower{animation-delay:.26s;}
.game-animation-stage .kid-figure.delay-3 .limb .upper,
.game-animation-stage .kid-figure.delay-3 .limb .lower{animation-delay:.51s;}

@keyframes kid-brace-left{
  0%,100%{transform:translate3d(0,0,0) rotate(-24deg);}
  18%{transform:translate3d(-5px,3px,0) rotate(-27deg);}
  46%{transform:translate3d(-18px,-2px,0) rotate(-31deg);}
  62%{transform:translate3d(-12px,2px,0) rotate(-28deg);}
  82%{transform:translate3d(-8px,-1px,0) rotate(-26deg);}
}
@keyframes kid-brace-right{
  0%,100%{transform:scaleX(-1) translate3d(0,0,0) rotate(-24deg);}
  18%{transform:scaleX(-1) translate3d(5px,3px,0) rotate(-27deg);}
  46%{transform:scaleX(-1) translate3d(18px,-2px,0) rotate(-31deg);}
  62%{transform:scaleX(-1) translate3d(12px,2px,0) rotate(-28deg);}
  82%{transform:scaleX(-1) translate3d(8px,-1px,0) rotate(-26deg);}
}
@keyframes arm-front-upper-brace{0%,100%{transform:rotate(-6deg);} 40%{transform:rotate(-12deg);} 62%{transform:rotate(-2deg);} }
@keyframes arm-front-lower-brace{0%,100%{transform:rotate(12deg);} 40%{transform:rotate(26deg);} 62%{transform:rotate(8deg);} }
@keyframes arm-back-upper-brace{0%,100%{transform:rotate(-2deg);} 40%{transform:rotate(-10deg);} 62%{transform:rotate(4deg);} }
@keyframes arm-back-lower-brace{0%,100%{transform:rotate(20deg);} 40%{transform:rotate(30deg);} 62%{transform:rotate(14deg);} }
@keyframes leg-front-upper-drive{0%,100%{transform:rotate(132deg);} 35%{transform:rotate(138deg);} 60%{transform:rotate(122deg);} }
@keyframes leg-front-lower-drive{0%,100%{transform:rotate(-38deg);} 35%{transform:rotate(-22deg);} 60%{transform:rotate(-44deg);} }
@keyframes leg-back-upper-drive{0%,100%{transform:rotate(74deg);} 35%{transform:rotate(62deg);} 60%{transform:rotate(82deg);} }
@keyframes leg-back-lower-drive{0%,100%{transform:rotate(30deg);} 35%{transform:rotate(18deg);} 60%{transform:rotate(36deg);} }

@media (max-width: 768px){
  .game-animation-stage .tug-team{bottom:5%;width:49%;}
  .game-animation-stage .kid-team{gap:2px;}
  .game-animation-stage .kid-figure{width:112px;height:228px;}
  .game-animation-stage .kid-figure .head{left:24px;top:6px;width:34px;height:34px;}
  .game-animation-stage .kid-figure .torso{left:43px;top:40px;width:8px;height:82px;}
  .game-animation-stage .kid-figure .shirt{left:18px;top:46px;width:42px;height:40px;}
  .game-animation-stage .kid-figure .limb.arm.front{left:48px;top:66px;}
  .game-animation-stage .kid-figure .limb.arm.front>.upper{width:28px;}
  .game-animation-stage .kid-figure .limb.arm.front>.upper>.lower{width:34px;}
  .game-animation-stage .kid-figure .limb.arm.back{left:46px;top:78px;}
  .game-animation-stage .kid-figure .limb.arm.back>.upper{width:24px;}
  .game-animation-stage .kid-figure .limb.arm.back>.upper>.lower{width:30px;}
  .game-animation-stage .kid-figure .limb.leg.front{left:44px;top:126px;}
  .game-animation-stage .kid-figure .limb.leg.front>.upper{width:40px;}
  .game-animation-stage .kid-figure .limb.leg.front>.upper>.lower{width:36px;}
  .game-animation-stage .kid-figure .limb.leg.back{left:44px;top:132px;}
  .game-animation-stage .kid-figure .limb.leg.back>.upper{width:36px;}
  .game-animation-stage .kid-figure .limb.leg.back>.upper>.lower{width:34px;}
  .game-animation-stage .kid-figure .grip{width:11px;height:11px;}
  .game-animation-stage .kid-figure .grip::before{width:108px;height:8px;}
  .game-animation-stage .tug-rope{top:63%;height:12px;left:3%;right:3%;}
  .game-animation-stage .tug-knot{top:63%;width:42px;height:42px;}
}

.order-lesson-shell{display:grid;gap:12px}
.order-lesson-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.order-lesson-progress{font-weight:800;color:var(--text)}

.task-progress-track{position:relative;flex:1;min-width:0;height:18px;border-radius:999px;background:#e5e7eb;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(148,163,184,.18);}
.task-progress-track-lg{height:20px;}
.task-progress-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;background:linear-gradient(90deg,#22c55e,#16a34a);transition:width .35s ease;}
.task-progress-segments{position:absolute;inset:0;pointer-events:none;}
.task-progress-cut{position:absolute;top:2px;bottom:2px;width:2px;background:rgba(255,255,255,.92);transform:translateX(-50%);border-radius:999px;box-shadow:0 0 0 1px rgba(148,163,184,.08);}
.compact-progress-top{align-items:center;gap:12px;}
.compact-progress-top .bundle-lesson-actions,.compact-progress-top .soft-action{flex:0 0 auto;}
.compact-progress-top .task-progress-track{width:100%;}
.bundle-lesson-top.compact-progress-top{grid-template-columns:minmax(0,1fr) auto;display:grid;}
.order-lesson-top.compact-progress-top{grid-template-columns:minmax(0,1fr) auto;display:grid;}
@media (max-width:768px){
  .task-progress-track{height:20px;}
  .task-progress-track-lg{height:22px;}
}
.order-line-card{display:grid;gap:10px}
.task-submit-footer{display:grid;gap:10px}
.task-submit-footer .app-btn{width:100%}
.task-complete-splash{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(15,23,42,.42);backdrop-filter:blur(10px);padding:20px}
.task-complete-card{width:min(100%,420px);background:#fff;border-radius:28px;padding:26px 22px;box-shadow:0 30px 80px rgba(15,23,42,.24);display:grid;gap:12px;text-align:center}
.task-complete-badge{display:inline-flex;justify-self:center;align-items:center;padding:8px 14px;border-radius:999px;background:#f5e9ff;color:#7b2cbf;font-weight:900}
.task-complete-copy{color:var(--muted);margin:0}
.task-complete-actions{display:grid;gap:10px;margin-top:4px}
.task-fireworks{display:flex;justify-content:center;gap:14px;font-size:1.8rem}
.task-complete-splash.perfect .task-complete-card{background:linear-gradient(180deg,#fff,#fffaf0)}
.task-complete-splash.good .task-complete-card{background:linear-gradient(180deg,#fff,#f8fbff)}

.student-finish-modal{position:fixed;inset:0;z-index:160;display:flex;align-items:flex-end;justify-content:center;background:rgba(15,23,42,.44);padding:16px;}
.student-finish-modal.hidden{display:none!important;}
.student-finish-sheet{width:min(560px,100%);background:#fff;border:1px solid rgba(148,163,184,.28);border-radius:24px 24px 18px 18px;padding:18px 16px 16px;box-shadow:0 18px 40px rgba(15,23,42,.22);}
.student-finish-actions{display:grid;gap:10px;margin-top:12px;}
.app-btn.ghost{background:#fff;color:#334155;border:1px solid rgba(148,163,184,.36);}


.bundle-mobile-deck,.order-lines-stack{position:relative;overflow:hidden;}
@keyframes orderStatusBalloon{
  0%{opacity:0;transform:translateY(8px) scale(.8);}
  18%{opacity:1;transform:translateY(0) scale(1);}
  72%{opacity:1;transform:translateY(-2px) scale(1.08);}
  100%{opacity:0;transform:translateY(-8px) scale(1.18);}
}
@keyframes orderCompleteCelebrate{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7);}
  12%{opacity:1;transform:translate(-50%,-50%) scale(1);}
  65%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.14);}
}
.order-status-pop{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:10px;border-radius:18px;padding:12px 16px;font-weight:900;font-size:1rem;letter-spacing:.01em;opacity:0;pointer-events:none;transform:translateY(8px) scale(.8);}
.order-status-pop.success{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;box-shadow:0 12px 28px rgba(22,163,74,.24);}
.order-status-pop.error{background:linear-gradient(180deg,#ef4444,#dc2626);color:#fff;box-shadow:0 12px 28px rgba(220,38,38,.24);}
.order-status-pop.show{animation:orderStatusBalloon 2s ease-in-out forwards;}
.order-complete-pop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);width:min(92%,420px);background:linear-gradient(180deg,#ffffff,#f0fdf4);border:1px solid rgba(34,197,94,.26);color:#166534;border-radius:28px;padding:22px 20px;text-align:center;font-weight:900;font-size:1.18rem;line-height:1.25;box-shadow:0 20px 44px rgba(22,163,74,.18);z-index:18;opacity:0;pointer-events:none;}
.order-complete-pop.show{animation:orderCompleteCelebrate 2s ease-in-out forwards;}
.order-line-card,.solver-panel.app-section-card,.order-lesson-shell{position:relative;}
.order-dropzone.is-solved{border-color:rgba(34,197,94,.52);background:linear-gradient(180deg,#f0fdf4,#ecfdf5);box-shadow:0 0 0 3px rgba(34,197,94,.10) inset;}
.order-word.is-solved{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(22,163,74,.18);}
.order-bank-chip.is-used{opacity:.35;}
.order-line-card,.solver-panel.app-section-card{position:relative;}

.bundle-mobile-page,.order-line-card{width:100%;will-change:transform,opacity;}
.panel-slide-layer{position:absolute !important;inset:0;display:block !important;width:100%;}
.panel-current{z-index:2;}
.panel-enter-right{transform:translateX(112%);opacity:.96;}
.panel-enter-left{transform:translateX(-112%);opacity:.96;}
.panel-in{transform:translateX(0);opacity:1;}
.panel-exit-left{transform:translateX(-16%);opacity:.04;}
.panel-exit-right{transform:translateX(16%);opacity:.04;}
.panel-slide-active{transition:transform .46s cubic-bezier(.22,.9,.2,1), opacity .46s ease;}

.order-status-pop.hidden,.order-complete-pop.hidden{display:none!important;}


/* v60 UI cleanup/refactor: fewer redundant headers, tighter mobile spacing, clearer cards */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --card-border:#c9d1e6;
}
.app-topbar .brand-link{font-size:1.34rem;line-height:1;}
.app-topbar{padding-bottom:6px;}
.app-main{display:grid;gap:12px;}
.mobile-hero.compact{margin-bottom:12px!important;}
.mobile-hero .screen-title{margin-bottom:2px;}
.screen-title{letter-spacing:-.025em;}
.screen-subtitle.compact-copy,.compact-copy{line-height:1.35;max-width:58ch;}
.compact-focus-card{padding:14px 16px!important;}
.compact-focus-main{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.compact-focus-main .section-title{margin:0;}
.compact-focus-main .screen-subtitle{margin-top:4px;font-size:.94rem;}
.compact-btn{white-space:nowrap;padding-inline:18px;}
.student-mini-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;color:var(--muted);font-weight:800;font-size:.86rem;}
.student-mini-stats span{padding:6px 9px;border:1px solid rgba(148,163,184,.28);border-radius:999px;background:#fff;}
.compact-list-header{align-items:center;}
.compact-list-header .section-title{margin:0;}
.app-card{border-color:var(--card-border);}
.task-card,.task-list-card,.row-card{border-color:var(--card-border)!important;}
.task-card-top{gap:8px;}
.task-title{font-size:1.02rem;line-height:1.15;}
.task-desc{font-size:.92rem;line-height:1.35;margin-top:6px;}
.task-type-pill{font-size:.72rem;padding:5px 8px;}
.status-badge{white-space:nowrap;}
.solver-panel.app-section-card{padding:14px!important;margin-bottom:12px!important;}
.task-intro-card{padding:12px 14px!important;margin-bottom:10px!important;}
.task-header-row{margin-bottom:8px!important;}
.task-submit-footer{margin-top:12px;}
.student-finish-sheet .section-title{margin:0 0 6px;}
.builder-summary .screen-subtitle{line-height:1.35;}
.builder-step-head p{display:none;}
.builder-step{gap:10px;padding:14px;}
.stack-form{gap:10px;}
.field-block{gap:6px;}
.app-input,.app-select,.app-textarea{padding:12px 14px;border-radius:15px;}
.toggle-row{padding:12px;border-radius:16px;}
.notice{padding:11px 13px;border-radius:15px;}
.list-header{gap:8px;}
.list-header .section-label{display:none;}
.list-header .section-title{margin:0;}
.hero-card{border-radius:24px;}
.bottom-nav{z-index:70;}
@media (max-width:640px){
  .app-shell{padding-inline:max(1px,env(safe-area-inset-left));padding-bottom:calc(50px + env(safe-area-inset-bottom));}
  .app-main{gap:8px;}
  .screen-title{font-size:1.42rem;line-height:1.02;}
  .section-title{font-size:1.06rem;line-height:1.12;}
  .screen-subtitle{font-size:.9rem;line-height:1.35;}
  .padded{padding:12px!important;}
  .content-grid{gap:10px;}
  .task-card{padding:12px;}
  .user-chip{display:none;}
  .icon-btn{width:36px;height:36px;border-radius:12px;}
  .brand-link{font-size:1.2rem!important;}
  .mobile-hero{gap:8px;}
  .mobile-hero.compact{padding-inline:1px;}
  .compact-focus-card{padding:12px!important;}
  .compact-focus-main{align-items:flex-start;}
  .compact-btn{padding:11px 13px;border-radius:14px;}
  .student-mini-stats{gap:5px;font-size:.78rem;}
  .student-mini-stats span{padding:5px 7px;}
  .bottom-nav{height:auto;min-height:43px;}
  .bottom-nav-item span{font-size:.95rem;}
  .bottom-nav-item small{font-size:.68rem;}
  .app-btn{padding:12px 14px;border-radius:15px;}
  .soft-pill{font-size:.78rem;padding:6px 9px;}
  .task-screen{max-width:100%;}
  .task-intro-top{gap:8px;}
  .task-hint-toggle .task-hint-content{font-size:.88rem;line-height:1.35;}
  .student-finish-sheet{padding:14px;border-radius:20px 20px 16px 16px;}
}