/* MABNI v48 Design System + Visual UX Polish
   Goal: 9+ visual clarity for teacher dashboard, maze, Blockly, feedback, touch, and contrast. */
:root{
  --mabni-blue:#004E92;
  --mabni-blue-900:#063762;
  --mabni-blue-800:#075487;
  --mabni-gold:#CFA15B;
  --mabni-gold-dark:#8A5E19;
  --mabni-ink:#101828;
  --mabni-muted:#475467;
  --mabni-line:#D9E4F2;
  --mabni-bg:#F5F8FC;
  --mabni-card:#FFFFFF;
  --mabni-success:#067647;
  --mabni-success-bg:#ECFDF3;
  --mabni-warn:#B54708;
  --mabni-warn-bg:#FFFAEB;
  --mabni-error:#B42318;
  --mabni-error-bg:#FEF3F2;
  --mabni-info:#026AA2;
  --mabni-info-bg:#F0F9FF;
  --mabni-radius:22px;
  --mabni-radius-sm:14px;
  --mabni-shadow:0 18px 55px rgba(16,24,40,.12);
  --mabni-shadow-soft:0 10px 28px rgba(16,24,40,.08);
  --kenney-star:url('../assets/kenney/ui/png/Yellow/Default/star.png');
  --kenney-star-outline:url('../assets/kenney/ui/png/Grey/Default/star_outline_depth.png');
  --kenney-check:url('../assets/kenney/ui/png/Green/Default/check_round_color.png');
  --kenney-cross:url('../assets/kenney/ui/png/Red/Default/icon_cross.png');
  --kenney-blue-button:url('../assets/kenney/ui/png/Blue/Default/button_rectangle_depth_gradient.png');
  --kenney-green-button:url('../assets/kenney/ui/png/Green/Default/button_rectangle_depth_gradient.png');
  --kenney-yellow-tile:url('../assets/kenney/ui/png/Yellow/Default/button_square_depth_gradient.png');
  --kenney-green-tile:url('../assets/kenney/ui/png/Green/Default/button_square_depth_gradient.png');
  --kenney-blue-tile:url('../assets/kenney/ui/png/Blue/Default/button_square_depth_gradient.png');
  --kenney-grey-tile:url('../assets/kenney/ui/png/Grey/Default/button_square_depth_gradient.png');
}
html[data-theme="night"]{
  --mabni-bg:#0B1220;
  --mabni-card:#111A2D;
  --mabni-ink:#F8FAFC;
  --mabni-muted:#CBD5E1;
  --mabni-line:#263A59;
  --mabni-shadow:0 18px 55px rgba(0,0,0,.34);
  --mabni-shadow-soft:0 10px 30px rgba(0,0,0,.26);
}
body{background:radial-gradient(circle at top left,rgba(0,78,146,.10),transparent 34%),var(--mabni-bg);color:var(--mabni-ink)}
/* Contrast repair: gold is not used as small text on white. */
.eyebrow,.lesson-chip,.mission-chip,.badge,.pill,.muted,.muted-text{color:var(--mabni-muted)}
button,.btn,.btn-small,.primary,.secondary,.danger,.toplink{font-weight:900;letter-spacing:.01em}
.primary,.btn.primary,.big-run{background:#0B63A5!important;color:#fff!important;border-color:#084C7D!important;box-shadow:0 8px 0 rgba(5,63,104,.25),var(--mabni-shadow-soft)}
.primary:hover,.btn.primary:hover,.big-run:hover{filter:brightness(1.04);transform:translateY(-1px)}
.secondary,.btn.ghost,.btn-small.ghost{background:var(--mabni-card)!important;color:var(--mabni-blue-900)!important;border:1px solid var(--mabni-line)!important}
html[data-theme="night"] .secondary,html[data-theme="night"] .btn.ghost,html[data-theme="night"] .btn-small.ghost{color:#EAF6FF!important;background:#15233B!important;border-color:#2A456A!important}
.danger,.btn.danger,.btn-small.danger{background:#B42318!important;color:#fff!important;border-color:#7A271A!important}
:focus-visible{outline:4px solid #00B7D8!important;outline-offset:4px!important;box-shadow:0 0 0 8px rgba(0,183,216,.20)!important}
/* Student app layout polish */
.topbar,.left-panel,.right-panel,.dialog-card,.panel,.card,.teacher-wizard,.class-card{box-shadow:var(--mabni-shadow-soft);border-color:var(--mabni-line)!important}
.topbar{backdrop-filter:blur(14px);background:rgba(255,255,255,.92)}
html[data-theme="night"] .topbar{background:rgba(11,18,32,.88)}
.left-panel,.right-panel{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,251,255,.94));border:1px solid var(--mabni-line);border-radius:var(--mabni-radius)}
html[data-theme="night"] .left-panel,html[data-theme="night"] .right-panel{background:linear-gradient(180deg,rgba(17,26,45,.96),rgba(11,18,32,.94))}
.learning-focus-card{border-left:6px solid var(--mabni-blue)!important;background:linear-gradient(90deg,rgba(0,78,146,.10),rgba(255,255,255,.72));color:var(--mabni-ink);line-height:1.45}
html[data-theme="night"] .learning-focus-card{background:linear-gradient(90deg,rgba(0,183,216,.14),rgba(17,26,45,.76))}
/* Maze: clearer state language, not decorative fog. */
.visualization{position:relative;background:linear-gradient(135deg,#EAF6FF,#F6FFFB);border:1px solid var(--mabni-line);border-radius:26px;box-shadow:inset 0 2px 0 rgba(255,255,255,.65),var(--mabni-shadow-soft);overflow:hidden}
html[data-theme="night"] .visualization{background:linear-gradient(135deg,#0E1A2D,#102A37)}
.kenney-maze-tile-img.path{filter:drop-shadow(0 3px 2px rgba(16,24,40,.06))}
.kenney-maze-tile-img.wall{filter:drop-shadow(0 5px 6px rgba(0,78,146,.26)) saturate(1.08)}
.tile-frame.path{stroke:#BFD4EA!important;stroke-width:2.2!important}
.tile-frame.wall{stroke:#065986!important;stroke-width:2.4!important}
.tile-frame.trail{stroke:#067647!important;stroke-width:3!important}
.tile.current-step{stroke:#F79009!important;stroke-width:5!important;filter:drop-shadow(0 0 8px rgba(247,144,9,.7));animation:v47PulseTile .9s infinite alternate}
.tile.step-error{stroke:#D92D20!important;stroke-width:6!important;filter:drop-shadow(0 0 10px rgba(217,45,32,.75));animation:v47ErrorTile .22s 3}
.goal-item{filter:drop-shadow(0 4px 10px rgba(247,144,9,.35))}
.player-token{transition:transform .22s ease;filter:drop-shadow(0 7px 11px rgba(16,24,40,.18))}
@keyframes v47PulseTile{from{opacity:.8}to{opacity:1;transform:scale(1.015)}}
@keyframes v47ErrorTile{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.maze-legend{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:10px 2px 0;color:var(--mabni-muted);font-size:.85rem;font-weight:800}
.maze-legend span{display:inline-flex;align-items:center;gap:6px}.maze-legend .lg{width:18px;height:18px;border-radius:6px;border:2px solid var(--mabni-line);display:inline-block;background:#fff}.maze-legend .start{background-image:var(--kenney-blue-tile);background-size:100% 100%}.maze-legend .path{background:#fff}.maze-legend .wall{background-image:var(--kenney-blue-tile);background-size:100% 100%}.maze-legend .goal{background-image:var(--kenney-yellow-tile);background-size:100% 100%}.maze-legend .trail{background-image:var(--kenney-green-tile);background-size:100% 100%}
/* Execution trace */
.v47-trace-panel{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:12px;align-items:center;margin:12px 0;padding:12px 14px;border-radius:20px;border:1px solid var(--mabni-line);background:var(--mabni-info-bg);box-shadow:var(--mabni-shadow-soft)}
.v47-trace-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#0B63A5;color:#fff;font-weight:1000;font-size:1.1rem;box-shadow:0 7px 0 rgba(5,63,104,.18)}
.v47-trace-copy{min-width:0}.v47-trace-copy strong{display:block;color:var(--mabni-blue-900)}.v47-trace-copy span{display:block;overflow-wrap:anywhere;color:var(--mabni-muted);font-weight:750}.v47-trace-count{font-weight:1000;color:var(--mabni-blue-900);background:#fff;border:1px solid #B9E6FE;border-radius:999px;padding:6px 10px}
.v47-trace-panel[data-state="crash"],.v47-trace-panel[data-state="error"]{background:var(--mabni-error-bg);border-color:#FDA29B}.v47-trace-panel[data-state="crash"] .v47-trace-icon,.v47-trace-panel[data-state="error"] .v47-trace-icon{background:#D92D20;box-shadow:0 7px 0 rgba(180,35,24,.18)}
.v47-trace-panel[data-state="task"],.v47-trace-panel[data-state="score"]{background:var(--mabni-success-bg);border-color:#ABEFC6}.v47-trace-panel[data-state="task"] .v47-trace-icon,.v47-trace-panel[data-state="score"] .v47-trace-icon{background:#079455;box-shadow:0 7px 0 rgba(6,118,71,.18)}
html[data-theme="night"] .v47-trace-panel{background:#10233D}.v47-trace-panel *{min-width:0}
/* Blockly classroom skin */
#blocklyArea{border:1px solid var(--mabni-line);border-radius:24px;overflow:hidden;box-shadow:inset 0 2px 0 rgba(255,255,255,.55),var(--mabni-shadow-soft);background:linear-gradient(180deg,#F8FBFF,#EDF6FF)}
html[data-theme="night"] #blocklyArea{background:linear-gradient(180deg,#111C31,#0C1424)}
.blocklyMainBackground{stroke:var(--mabni-line)!important;fill:#FAFDFF!important}.blocklyToolboxDiv{background:#EEF6FF!important;border-right:1px solid #C7DCF1!important}.blocklyTreeRow{border-radius:12px!important;margin:4px 6px!important;min-height:38px!important}.blocklyTreeLabel{font-weight:900!important;color:#173B5F!important}.blocklySelected>.blocklyPath,.blocklyHighlightedConnectionPath,.blocklyHighlightedConnectionPathFilled{filter:drop-shadow(0 0 7px rgba(247,144,9,.95))!important;stroke:#F79009!important;stroke-width:4px!important}.blocklyFlyoutBackground{fill:#F8FBFF!important;fill-opacity:.98!important}.blocklyScrollbarHandle{fill:#0B63A5!important;opacity:.65!important}
html[data-theme="night"] .blocklyMainBackground{fill:#0F172A!important;stroke:#263A59!important}html[data-theme="night"] .blocklyToolboxDiv{background:#101B2F!important;border-color:#263A59!important}html[data-theme="night"] .blocklyTreeLabel{color:#EAF6FF!important}html[data-theme="night"] .blocklyFlyoutBackground{fill:#111C31!important}
/* Stars and feedback */
.completion-stars,.v43-star-row,.star-row{display:flex;gap:6px;justify-content:center;align-items:center}.completion-stars img,.v43-star-row img,.star-row img{width:32px;height:32px;image-rendering:auto;filter:drop-shadow(0 3px 2px rgba(16,24,40,.16))}.run-feedback-details{border-radius:22px;border:1px solid var(--mabni-line);box-shadow:var(--mabni-shadow-soft);line-height:1.5}.run-feedback-details strong{color:var(--mabni-blue-900)}html[data-theme="night"] .run-feedback-details strong{color:#B9E6FE}.feedback{border-radius:18px;border:1px solid var(--mabni-line);background:#fff}html[data-theme="night"] .feedback{background:#111A2D}.feedback.bad,.feedback[data-state="bad"]{background:var(--mabni-error-bg);border-color:#FDA29B}.feedback.good,.feedback[data-state="good"]{background:var(--mabni-success-bg);border-color:#ABEFC6}.feedback.warn,.feedback[data-state="warn"]{background:var(--mabni-warn-bg);border-color:#FEDF89}
/* Teacher dashboard language and scanability */
body.teacher-v47 .side{background:linear-gradient(180deg,#073B68,#041D34)!important;color:#fff}body.teacher-v47 .side .muted,body.teacher-v47 .side span{color:#D8ECFF!important}body.teacher-v47 .main{background:radial-gradient(circle at 10% 0%,rgba(0,78,146,.10),transparent 30%),#F5F8FC}body.teacher-v47 .panel,body.teacher-v47 .card,body.teacher-v47 .class-card{background:#fff;border:1px solid #D9E4F2;border-radius:24px;box-shadow:var(--mabni-shadow-soft)}body.teacher-v47 .nav button{border-radius:16px!important}body.teacher-v47 .nav button.active,body.teacher-v47 .nav button:hover{background:#EAF6FF!important;color:#073B68!important}body.teacher-v47 .pill.good,.badge.good{background:var(--mabni-success-bg)!important;color:var(--mabni-success)!important;border:1px solid #ABEFC6!important}body.teacher-v47 .pill.warn,.badge.warn{background:var(--mabni-warn-bg)!important;color:var(--mabni-warn)!important;border:1px solid #FEDF89!important}body.teacher-v47 .pill.bad,.badge.bad{background:var(--mabni-error-bg)!important;color:var(--mabni-error)!important;border:1px solid #FDA29B!important}.teacher-friendly-empty{display:grid;gap:8px;place-items:start;padding:22px;border:2px dashed #BFD4EA;border-radius:22px;background:#F8FBFF;color:#344054}.teacher-friendly-empty strong{font-size:1.05rem;color:#073B68}.teacher-friendly-empty span{color:#475467;line-height:1.45}.teacher-friendly-empty .empty-icon{width:42px;height:42px;background-image:var(--kenney-blue-button);background-size:100% 100%;display:grid;place-items:center;color:#fff;font-weight:1000}
.v47-quality-badge{display:inline-flex;gap:6px;align-items:center;padding:7px 10px;border-radius:999px;background:var(--mabni-success-bg);border:1px solid #ABEFC6;color:var(--mabni-success);font-weight:1000}.v47-quality-badge:before{content:"";width:18px;height:18px;background-image:var(--kenney-check);background-size:contain;background-repeat:no-repeat}
/* Stronger responsive and touch behavior */
@media(max-width:900px){.game-shell{grid-template-columns:1fr!important}.layout-splitter{display:none}.v47-trace-panel{grid-template-columns:42px minmax(0,1fr);}.v47-trace-count{grid-column:2}.workspace-head{display:grid;gap:8px}.visualization{min-height:300px}}
@media(max-width:520px){.topbar{gap:10px}.lesson-level-cluster,.user-area{width:100%}.v47-trace-panel{grid-template-columns:1fr;text-align:left}.v47-trace-icon{width:100%;height:34px;border-radius:12px}.run-dock button{min-height:52px}.maze-legend{font-size:.78rem}.maze-legend .lg{width:16px;height:16px}.completion-stars img{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.tile.current-step,.tile.step-error,.player-token,.primary:hover{animation:none!important;transition:none!important;transform:none!important}}
.v47-learning-ribbon{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:center;margin:10px auto 0;max-width:min(1180px,calc(100vw - 20px));padding:10px 16px;border-radius:999px;border:1px solid var(--mabni-line);background:linear-gradient(90deg,#EAF6FF,#ECFDF3);box-shadow:var(--mabni-shadow-soft);color:var(--mabni-blue-900);font-weight:900}.v47-learning-ribbon span{color:var(--mabni-muted)}html[data-theme="night"] .v47-learning-ribbon{background:linear-gradient(90deg,#10233D,#0E2A25);color:#EAF6FF}