/* Jacobmatematik authenticated-site cinematic daylight theme
   Bright enough for classroom use, with the login mockup's violet, gold,
   orange and deep-navy visual language. */

body.site-authenticated{
  --ink:#17233f;
  --muted:#6f6877;
  --paper:#fffaf2;
  --cream:#f7efe2;
  --purple:#6d4de9;
  --purple-dark:#4f34c7;
  --mint:#319a78;
  --amber:#e8a63a;
  --red:#d65c58;
  --line:#e6d6c2;
  --shadow:0 14px 36px rgba(53,36,79,.10);
  min-height:100vh;
  color:var(--ink);
  background:
    radial-gradient(circle at 5% 7%,rgba(112,76,232,.11),transparent 28rem),
    radial-gradient(circle at 96% 8%,rgba(242,169,59,.15),transparent 30rem),
    radial-gradient(circle at 76% 88%,rgba(230,126,54,.07),transparent 32rem),
    linear-gradient(180deg,#fcf7ee 0%,#f7efe3 55%,#faf4ea 100%);
}
.site-authenticated .app-shell{background:transparent}

/* Navigation */
.site-authenticated .topbar{
  height:auto;
  min-height:72px;
  padding-top:12px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(112,76,154,.13);
  background:rgba(255,250,241,.91);
  box-shadow:0 6px 24px rgba(74,47,30,.055);
  backdrop-filter:blur(16px);
}
.site-authenticated .brand{color:#17233f}
.site-authenticated .brand .brand-mark{
  background:linear-gradient(145deg,#7b60ff,#5439d5);
  box-shadow:0 7px 20px rgba(103,72,221,.28);
}
.site-authenticated .user-pill{color:#776b7d}
.site-authenticated .foodtruck-link{
  color:#5f4819;
  border-color:#e5c56f;
  background:linear-gradient(180deg,#fff7d5,#f7e8b9);
  box-shadow:0 4px 12px rgba(151,102,30,.08);
}
.site-authenticated .jacob-view-switch{
  display:inline-flex;
  flex-shrink:0;
  align-items:center;
  gap:3px;
  padding:4px;
  min-height:44px;
  border:1px solid #d8c7e7;
  border-radius:999px;
  background:#eee6f4;
  color:#665575;
  font:750 13px/1.2 system-ui,sans-serif;
  cursor:pointer;
  box-shadow:inset 0 1px 3px rgba(49,27,79,.06);
}
.site-authenticated .jacob-view-switch .jacob-view-option{
  padding:9px 13px;
  border-radius:999px;
  white-space:nowrap;
}
.site-authenticated .jacob-view-switch .jacob-view-option.active{
  color:white;
  background:linear-gradient(135deg,#7659ed,#5538bc);
  box-shadow:0 3px 8px rgba(64,35,130,.22);
}
.site-authenticated .jacob-view-switch:focus-visible{outline:3px solid #b188f7;outline-offset:3px}
.site-authenticated .top-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px}
.site-authenticated .sandbox-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:10px 0 28px}
.site-authenticated .sandbox-head h1{margin:6px 0;font-size:clamp(28px,4vw,42px)}
.site-authenticated .sandbox-head p{margin:0;color:var(--muted)}
.site-authenticated .sandbox-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px}
.site-authenticated .sandbox-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:240px;padding:26px;border:1px solid #dfcce9;border-radius:22px;background:linear-gradient(145deg,#fffdf7,#f5edf9);color:var(--ink);text-align:left;text-decoration:none;font:inherit;cursor:pointer;box-shadow:var(--shadow)}
.site-authenticated .sandbox-card:hover{border-color:#9e78cc;transform:translateY(-2px)}
.site-authenticated .sandbox-card:focus-visible{outline:3px solid #9368d4;outline-offset:3px}
.site-authenticated .sandbox-card strong{font-size:22px}
.site-authenticated .sandbox-card>span:last-child{color:var(--muted);line-height:1.5}
.site-authenticated .sandbox-icon{font-size:44px;line-height:1}
.site-authenticated .sandbox-tag{padding:5px 10px;border-radius:99px;background:#ebe0f6;color:#67478c;font-size:12px;font-weight:750}
.site-authenticated .teacher-practice{margin-bottom:22px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:rgba(255,253,248,.75)}
.site-authenticated .teacher-practice summary{cursor:pointer;font-weight:750}
.site-authenticated .teacher-practice-links{display:flex;flex-wrap:wrap;gap:10px;padding-top:16px}
@media(max-width:900px){
  .site-authenticated .topbar{position:static;flex-wrap:wrap;gap:12px;min-height:64px}
  .site-authenticated .top-actions{width:100%;justify-content:flex-start}
  .site-authenticated .sandbox-head{align-items:flex-start;flex-wrap:wrap}
  .site-authenticated .sandbox-card{min-height:210px}
}

/* Shared typography */
.site-authenticated .eyebrow,
.site-authenticated .section-label{
  color:#7250b5;
  font-weight:850;
}
.site-authenticated h1,
.site-authenticated h2,
.site-authenticated h3{color:#17233f}
.site-authenticated .hero-line h1,
.site-authenticated .dashboard-head h1{
  color:#17233f;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
.site-authenticated .hero-line p,
.site-authenticated .dashboard-head p{color:#766d79}

/* Buttons */
.site-authenticated .btn{
  border:1px solid rgba(115,87,228,.20);
  background:linear-gradient(135deg,#7558ee,#5b3ed4);
  color:white;
  box-shadow:0 7px 18px rgba(86,57,194,.18),inset 0 1px 0 rgba(255,255,255,.18);
}
.site-authenticated .btn:hover{
  background:linear-gradient(135deg,#8065f3,#6044da);
}
.site-authenticated .btn.secondary{
  color:#372952;
  border:1px solid #dec99e;
  background:linear-gradient(180deg,#fffdf8,#fff5e7);
  box-shadow:0 4px 11px rgba(99,69,34,.055);
}
.site-authenticated .btn.secondary:hover{
  color:#4c3375;
  border-color:#d6ad4f;
  background:#fff5dd;
}
.site-authenticated .btn.ghost{
  color:#665b71;
  border-color:#d9cbb9;
  background:rgba(255,250,241,.55);
}
.site-authenticated .exercise-leaderboard-link{
  color:#64470d!important;
  border-color:#dfad42!important;
  background:linear-gradient(180deg,#fff4c9,#ffe6a1)!important;
}

/* Home/menu cards */
.site-authenticated .streak,
.site-authenticated .mini-stat{
  border-color:#ead9c0;
  background:linear-gradient(145deg,#fffdf8,#fff5e7);
  box-shadow:0 7px 20px rgba(100,67,35,.06);
}
.site-authenticated .streak span,
.site-authenticated .mini-stat span{color:#8a6b75}
.site-authenticated .streak strong,
.site-authenticated .mini-stat strong{color:#3d2b65}
.site-authenticated .topic-card,
.site-authenticated .topic-tower .topic-card,
.site-authenticated .topic-tower-extras .topic-card{
  color:#17233f;
  border-color:#e6d7c5;
  background:linear-gradient(145deg,#fffdf9,#fff7ec);
  box-shadow:0 7px 19px rgba(79,54,33,.06);
}
.site-authenticated .topic-card:hover,
.site-authenticated .topic-tower .topic-card:hover,
.site-authenticated .topic-tower-extras .topic-card:hover{
  border-color:#d8ad4f;
  box-shadow:0 12px 28px rgba(105,69,28,.11);
}
.site-authenticated .topic-card .topic-icon{color:#323459}
.site-authenticated .topic-card strong{color:#17233f}
.site-authenticated .topic-card small{color:#746d79}
.site-authenticated .topic-tower-row:nth-child(even) .topic-card{
  background:linear-gradient(145deg,#fffaf1,#f6efff);
}
.site-authenticated .topic-tower-row:nth-child(3n) .topic-card{
  background:linear-gradient(145deg,#fffaf1,#fff0dd);
}
.site-authenticated .topic-card.mixed{
  color:white;
  border-color:#6949df;
  background:
    radial-gradient(circle at 87% 18%,rgba(255,201,83,.24),transparent 28%),
    linear-gradient(135deg,#7555ec,#5838ce 72%,#4629aa);
  box-shadow:0 10px 26px rgba(81,55,190,.22);
}
.site-authenticated .topic-card.mixed strong,
.site-authenticated .topic-card.mixed .topic-icon{color:#fff9e9}
.site-authenticated .topic-card.mixed small{color:#e8e0ff}
.site-authenticated .topic-tower-base,
.site-authenticated .math-tower-foundation{
  color:#ffe9b0;
  background:linear-gradient(90deg,#202d4f,#37355f 52%,#212b49);
  box-shadow:0 9px 22px rgba(32,35,71,.16);
}

/* Math tower */
.site-authenticated .math-tower h2{color:#292645}
.site-authenticated .math-tower>p,
.site-authenticated .math-tower-help{color:#776d77}
.site-authenticated .math-tower-plaque{
  background:transparent;
}
.site-authenticated .math-tower-symbol{color:#7652df}
.site-authenticated .math-tower-score{color:#1c2948}
.site-authenticated .math-tower-legend{color:#6e6470}

/* Game banners */
.site-authenticated .foodtruck-card{
  color:#493713!important;
  border-color:#dfa83c!important;
  background:
    radial-gradient(circle at 86% 18%,rgba(255,248,193,.56),transparent 28%),
    linear-gradient(110deg,#f7c65e,#eca640)!important;
  box-shadow:0 10px 25px rgba(145,92,24,.16)!important;
}
.site-authenticated .foodtruck-card strong{color:#3f3012}
.site-authenticated .foodtruck-card small{color:#6b501f!important}
.site-authenticated .home-game-links .fps-trial-entry{
  border-color:#e1af48;
  background:linear-gradient(135deg,#132f52,#273a69 58%,#644b85);
  box-shadow:0 12px 28px rgba(34,30,76,.17);
}

/* Generic exercise chrome */
.site-authenticated .topic-tag{
  color:#5a3ab1;
  border:1px solid #d5c4ef;
  background:linear-gradient(180deg,#f3ecff,#e9ddff);
}
.site-authenticated .question-card,
.site-authenticated .table-drill-card,
.site-authenticated .division-lollipop-card,
.site-authenticated .subtraction-card,
.site-authenticated .letter-learning-card{
  border-color:#e4d4c2;
  background:linear-gradient(160deg,#fffdf8,#fff8ed);
  box-shadow:0 16px 38px rgba(65,46,35,.085);
}
.site-authenticated .question-top,
.site-authenticated .lollipop-board,
.site-authenticated .subtraction-board{
  background:
    radial-gradient(circle at 86% 12%,rgba(242,177,63,.08),transparent 24%),
    linear-gradient(180deg,#fffdf8,#fff9f1);
}
.site-authenticated .answer-area,
.site-authenticated .lollipop-controls,
.site-authenticated .subtraction-controls{
  border-top-color:#eadbc7;
  background:linear-gradient(180deg,#fffaf2,#fff6e9);
}
.site-authenticated .answer-input,
.site-authenticated .table-drill-answer-preview,
.site-authenticated .fl-answer-input,
.site-authenticated .fa-page .fl-answer-input{
  color:#17233f;
  border-color:#dfcfbb;
  background:#fffdf9;
}
.site-authenticated .answer-input:focus,
.site-authenticated .fl-answer-input:focus{
  border-color:#8d72ea;
  box-shadow:0 0 0 4px rgba(119,87,225,.13);
}

/* Keypads */
.site-authenticated .key,
.site-authenticated .ft-keypad button,
.site-authenticated .lollipop-keypad .key,
.site-authenticated .subtraction-keypad .key{
  color:#1f2947;
  border-color:#e0d1bc;
  background:linear-gradient(180deg,#fffdf9,#fff5e7);
  box-shadow:0 4px 0 #ddcfbb;
}
.site-authenticated .key:hover,
.site-authenticated .ft-keypad button:hover{
  border-color:#d9ac4a;
  background:#fff0cf;
}
.site-authenticated .key.enter,
.site-authenticated .ft-submit{
  color:white;
  border-color:#6244d9;
  background:linear-gradient(135deg,#7657ee,#5839cf);
  box-shadow:0 4px 0 #4326a6;
}
.site-authenticated .key.utility{
  color:#5b3bb7;
  background:#f1eaff;
}

/* Drill tables */
.site-authenticated .table-drill-status{
  color:#625b6d;
  border-bottom-color:#eadac4;
  background:linear-gradient(90deg,#fff6e8,#f5efff);
}
.site-authenticated .table-drill-layout{background:#fffaf2}
.site-authenticated .table-drill-answer,
.site-authenticated .table-drill-complete{
  border-color:#dfcfbb;
  background:linear-gradient(160deg,#fffdf9,#fff5e8);
}
.site-authenticated .table-drill-answer-preview{
  border-color:#d9c9b5;
}
.site-authenticated .table-drill-grid th{
  color:#5e5480;
  background:#f3ebff;
}
.site-authenticated .table-drill-grid td{
  border-color:#ded8cf;
  background:#fbfaf7;
}

/* Leaderboards */
.site-authenticated .practice-leaderboard{
  border-color:#4a3774;
  background:
    radial-gradient(circle at 100% 0%,rgba(240,171,61,.15),transparent 29%),
    linear-gradient(145deg,#fff9ed,#f6efff);
  box-shadow:6px 7px 0 #33284f;
}
.site-authenticated .leaderboard-my-status{
  color:#5b431b;
  border-color:#d9bb72;
  background:#fff0c6;
}
.site-authenticated .leaderboard-list li{
  border-color:#e4d4c2;
  background:#fffdf8;
}
.site-authenticated .leaderboard-list li.is-me{
  border-color:#7758dd;
  background:#f0eaff;
}

/* Teacher/admin surfaces */
.site-authenticated .class-manager,
.site-authenticated .roster-panel,
.site-authenticated .teacher-detail,
.site-authenticated .pair-detail,
.site-authenticated .registrations-panel{
  border-color:#e5d5c1;
  background:rgba(255,250,241,.91);
  box-shadow:0 10px 28px rgba(76,49,30,.065);
}
.site-authenticated .class-kpis article,
.site-authenticated .student-kpis article{
  border-color:#e5d4bd;
  background:linear-gradient(145deg,#fffdf8,#fff5e6);
  box-shadow:0 6px 18px rgba(85,57,31,.055);
}
.site-authenticated .class-kpis article:nth-child(even),
.site-authenticated .student-kpis article:nth-child(even){
  background:linear-gradient(145deg,#fffaf2,#f5efff);
}
.site-authenticated .class-kpis article.attention{
  border-color:#e7a29a;
  background:#fff1ed;
}
.site-authenticated .panel-title>span{
  color:#684f77;
  background:#f1e7d9;
}
.site-authenticated .roster-item{
  border-color:transparent;
}
.site-authenticated .roster-item:hover{
  background:#fff2da;
}
.site-authenticated .roster-item.active{
  color:#2e2450;
  background:linear-gradient(90deg,#eee7ff,#fff0d4);
}
.site-authenticated .student-summary,
.site-authenticated .topic-row,
.site-authenticated .insight-card,
.site-authenticated .analytics-card{
  border-color:#e7d7c4;
  background:#fffaf3;
}
.site-authenticated .student-form .field input,
.site-authenticated .student-profile-editor .field input,
.site-authenticated .class-form input,
.site-authenticated .registration-search input,
.site-authenticated .registration-row select{
  color:#17233f;
  border-color:#decdb8;
  background:#fffdf9;
}
.site-authenticated .student-form .field input:focus,
.site-authenticated .student-profile-editor .field input:focus,
.site-authenticated .class-form input:focus,
.site-authenticated .registration-search input:focus{
  border-color:#8b70e8;
  box-shadow:0 0 0 3px rgba(111,78,218,.12);
}

/* Fraction lesson */
.site-authenticated .fl-page,
.site-authenticated .fa-page{
  color:#17233f;
}
.site-authenticated .fl-problem-panel,
.site-authenticated .fl-question-panel,
.site-authenticated .ff-card,
.site-authenticated .fo-card{
  border-color:#e4d4c0!important;
  background:linear-gradient(155deg,#fffdf8,#fff5e7)!important;
  box-shadow:0 11px 28px rgba(79,53,31,.075)!important;
}
.site-authenticated .fl-operation,
.site-authenticated .fl-rule,
.site-authenticated .fa-choice,
.site-authenticated .ff-divisor{
  color:#252c4d;
  border-color:#dfcfbb!important;
  background:#fffaf3!important;
}
.site-authenticated .fl-operation:hover,
.site-authenticated .fl-rule:hover,
.site-authenticated .fa-choice:hover,
.site-authenticated .ff-divisor:hover{
  border-color:#d7a943!important;
  background:#fff0d3!important;
}
.site-authenticated .fl-operation.correct,
.site-authenticated .fl-rule.correct,
.site-authenticated .fa-choice.correct,
.site-authenticated .ff-divisor.correct{
  color:#294f3e!important;
  border-color:#7fbea5!important;
  background:#eaf7f0!important;
}
.site-authenticated .fl-primary{
  color:white!important;
  background:linear-gradient(135deg,#7656ee,#5839cf)!important;
}
.site-authenticated .fl-steps li.current span,
.site-authenticated .fl-steps li.complete span{
  color:white;
  background:linear-gradient(135deg,#7656ee,#e3a83c);
}

/* Foodtruck app */
.site-authenticated.foodtruck-active{
  background:
    radial-gradient(circle at 10% 9%,rgba(111,76,232,.10),transparent 28rem),
    radial-gradient(circle at 92% 10%,rgba(239,164,56,.16),transparent 30rem),
    linear-gradient(180deg,#fff6e7,#f8e7d2);
}
.site-authenticated .ft-game{
  color:#1d2948;
}
.site-authenticated .ft-top,
.site-authenticated .ft-station,
.site-authenticated .ft-ticket,
.site-authenticated .ft-finished{
  border-color:#dfcba9!important;
  background:linear-gradient(155deg,#fffaf1,#fff0d9)!important;
  box-shadow:0 12px 28px rgba(102,64,24,.09)!important;
}
.site-authenticated .ft-submit{
  color:white!important;
  background:linear-gradient(135deg,#7656ee,#5839cf)!important;
}
.site-authenticated .ft-hint-button{
  color:#684812!important;
  border-color:#dba542!important;
  background:#fff1c9!important;
}

/* Coach / decorative rails */
.site-authenticated .obbe-drill,
.site-authenticated .fo-rail{
  border-color:#46375e;
  background:linear-gradient(145deg,#fff4dc,#f1e9ff);
}
.site-authenticated .obbe-bubble,
.site-authenticated .fo-bubble{
  border-color:#544067;
  background:#fffdf9;
}

/* Keep contrast strong, but avoid a dark classroom UI */
@media(max-width:760px){
  .site-authenticated .topbar{background:rgba(255,249,239,.95)}
}


/* Restore drill row/column guidance */
.site-authenticated .table-drill-grid td.active-row,
.site-authenticated .table-drill-grid td.active-column{
  background:#ece5f7;
}
.site-authenticated .table-drill-grid td.active-row.active-column{
  background:#e4daf6;
}
.site-authenticated .table-drill-grid .active-axis{
  color:#5233a9;
  background:#dfd2fa;
  border-radius:10px;
  box-shadow:inset 0 -3px 0 #e3aa39;
}
.site-authenticated .table-drill-grid td.active-cell{
  color:white;
  background:#32a97b;
  box-shadow:
    0 0 0 3px rgba(105,77,233,.26),
    inset 0 0 0 2px rgba(255,255,255,.34);
}
.site-authenticated .table-drill-grid td.active-cell span,
.site-authenticated .table-drill-grid td.active-cell strong{
  color:white;
}
/* Keep multiplication facts readable; match the active axis label. */
.site-authenticated .table-drill-grid:not(.division-drill-grid) td.active-cell span{
  color:#5233a9;
}


/* Borrow-step copy fallback for stale SPA sessions */
.site-authenticated .subtraction-prompt:has(.subtraction-drag-cue) h2{
  font-size:0;
  margin-bottom:3px;
}
.site-authenticated .subtraction-prompt:has(.subtraction-drag-cue) h2::after{
  content:"Så må man låne!";
  display:block;
  color:#17233f;
  font-size:clamp(30px,4vw,43px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.site-authenticated .subtraction-prompt:has(.subtraction-drag-cue) > p::before{
  content:"(Lån en 10'er)";
  display:block;
  margin:0 0 10px;
  color:var(--muted);
  font-size:14px;
  font-weight:750;
}
.site-authenticated .subtraction-prompt:has(.subtraction-drag-cue) .subtraction-borrow-subtitle{
  display:none;
}

.column-addition-slot[data-addition-drop]{cursor:pointer}
.column-addition-slot[data-addition-drop]:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.column-addition-token.selected{box-shadow:0 5px 0 var(--purple-dark),0 0 0 5px rgba(91,75,218,.16)}
.multi-page{max-width:1180px}
.multi-card{overflow:hidden;border:1px solid #e4d7c8;border-radius:26px;background:#fffdf8;box-shadow:0 16px 40px rgba(29,38,62,.08)}
.multi-card-head{min-height:84px;padding:16px clamp(20px,3vw,32px);display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #e8dac8;background:#f7f4ec}
.multi-card-head>div{display:grid;gap:4px}.multi-card-head strong{font:800 clamp(27px,3vw,37px)/1 Georgia,serif;color:var(--ink)}
.multi-card-head>span{font-size:13px;font-weight:800;color:var(--purple-dark);white-space:nowrap}
.multi-progress{height:8px;background:#ece9e2}.multi-progress>span{display:block;height:100%;background:linear-gradient(90deg,#52a78a,#6b4edd);transition:width .2s}
.multi-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);min-height:690px}
.multi-figure{min-width:0;padding:clamp(20px,3vw,36px);border-right:1px solid #e8dac8;background:radial-gradient(circle at 34% 22%,rgba(91,75,218,.07),transparent 18rem),#fffdf9}
.multi-controls{min-width:0;padding:clamp(25px,4vw,46px);display:flex;flex-direction:column;justify-content:center;background:#fffcf8}
.multi-board{display:flex;flex-wrap:wrap;justify-content:center;align-content:start;align-items:start;gap:20px 16px;min-height:620px}
.multi-calculation{--multi-cell:clamp(45px,4vw,56px);width:max-content}
.multi-row{display:grid;grid-template-columns:34px repeat(4,var(--multi-cell));min-height:var(--multi-cell);align-items:center}
.multi-row.multi-carry-row{min-height:42px}
.multi-digit,.multi-sign{display:grid;place-items:center;height:var(--multi-cell);color:var(--ink);font:800 clamp(36px,4vw,48px)/1 Georgia,serif}
.multi-sign{font-size:34px;color:var(--purple-dark)}
.multi-carry-row .multi-slot{width:35px;height:35px;font-size:25px}
.multi-empty{display:block;width:100%;height:100%;min-height:30px}
.multi-rule{height:4px;margin:4px 0 8px 34px;border-radius:4px;background:#283248}
.multi-slot{appearance:none;display:grid;place-items:center;width:calc(var(--multi-cell) - 5px);height:calc(var(--multi-cell) - 5px);margin:auto;padding:0;border:2px solid #c8c3ba;border-radius:9px;background:#fff;color:#3f32b6;box-shadow:0 3px 0 rgba(26,35,54,.1);font:800 clamp(27px,3.2vw,38px)/1 Georgia,serif}
.multi-slot.filled{border-color:#84bba4;background:#eef8f2;color:#17684e}
.multi-slot.source{border-color:#806de4;cursor:grab;touch-action:none}
.multi-slot.selected,.multi-palette-digit.selected{box-shadow:0 0 0 4px rgba(91,75,218,.25),0 4px 0 #4032ba}
.multi-slot[data-multiply-target]{cursor:pointer}
.multi-slot:focus-visible,.multi-palette-digit:focus-visible{outline:3px solid var(--purple);outline-offset:3px}
.multi-slot.dragging,.multi-palette-digit.dragging{opacity:.3}
.multi-work{--multi-cell:51px;min-width:180px;padding:15px 12px 17px;display:grid;justify-items:center;align-content:start;border:1px solid #e3d8ca;border-radius:19px;background:#faf7f0;box-shadow:0 5px 15px rgba(23,36,61,.05)}
.multi-work>strong{color:var(--ink);font-size:14px}.multi-work-label{min-height:22px;margin:5px 0 10px;color:var(--muted);font-size:13px;font-weight:750}
.multi-work-row{display:grid;grid-template-columns:26px repeat(2,var(--multi-cell));align-items:center;min-height:var(--multi-cell)}
.multi-work-sign{font:800 22px/1 Georgia,serif;color:var(--purple-dark);text-align:center}
.multi-work-rule{width:calc(2 * var(--multi-cell));height:3px;margin-left:26px;background:#344056}
.multi-work .multi-slot{font-size:31px}
.multi-palette{flex:0 1 390px;width:100%;padding:15px 18px 12px;border:1px solid #dfd3e9;border-radius:18px;background:#f8f5ff;text-align:center}
.multi-palette>span{display:block;margin-bottom:12px;color:#4e3ab4;font-size:12px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.multi-palette-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}
.multi-palette-digit{appearance:none;min-width:0;min-height:55px;border:2px solid #c9bfee;border-radius:11px;background:#fff7c6;color:var(--ink);box-shadow:0 4px 0 #d6cfc4;cursor:grab;touch-action:none;font:800 30px/1 Georgia,serif}
.multi-palette-digit:disabled{opacity:.45;cursor:default}
.multi-palette>small{display:block;margin-top:14px;color:#69647a;font-size:12px;line-height:1.4}
.multi-prompt h2,.multi-success h2{margin:8px 0 14px;color:var(--ink);font-size:clamp(30px,3.5vw,44px);line-height:1.08;letter-spacing:-.035em}
.multi-prompt>p{color:#57627a;font-size:16px;line-height:1.5}
.multi-help{margin-top:26px;color:var(--purple-dark)!important;font-size:13px!important;font-weight:750}
.multi-selected{padding:10px 12px;border-radius:10px;background:#f0ebff;color:#3c2ba5!important;font-weight:800}
.multi-error{min-height:24px;margin:18px 0 0;color:#ae403c;font-size:14px;font-weight:800}
.multi-success{padding:23px;border:1px solid #a5dcc8;border-radius:20px;background:#e8f8f0;color:#126848}
.multi-success h2{color:#126848}.multi-success p{font-size:20px}
.multi-drag-ghost{position:fixed;z-index:1000;display:grid;place-items:center;margin:0;pointer-events:none;border:3px solid #5942cb;border-radius:11px;background:#fff7c6;color:#18243d;box-shadow:0 12px 24px rgba(23,36,61,.25);font:800 32px/1 Georgia,serif;transform:rotate(-4deg)}
@media(max-width:920px){.multi-layout{grid-template-columns:minmax(0,1fr)}.multi-controls{grid-row:1;border-bottom:1px solid #e8dac8}.multi-figure{grid-row:2;border-right:0}.multi-board{min-height:0}}
@media(max-width:560px){.multi-card-head{min-height:70px}.multi-figure{padding:20px 9px}.multi-board{gap:14px 8px}.multi-calculation{--multi-cell:clamp(43px,11vw,55px)}.multi-work{--multi-cell:49px}.multi-palette{flex-basis:100%;max-width:350px}.multi-palette-digit{min-height:51px}}

.guided-multiplication-callout{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 17px;padding:17px 22px;border:1px solid #dcd2ed;border-radius:18px;background:#f8f5ff}.guided-multiplication-callout>div{display:grid;gap:4px}.guided-multiplication-callout strong{color:var(--ink);font-size:17px}.guided-multiplication-callout span{color:var(--muted);font-size:14px}.guided-multiplication-callout .btn{white-space:nowrap}@media(max-width:640px){.guided-multiplication-callout{align-items:stretch;flex-direction:column}}

/* Gangestykker: one stationary calculation, the working area beside the prompt. */
.multi-board{flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:20px;min-height:0}
.multi-calculation{position:relative}
.multi-palette{flex:none;max-width:390px}
.multi-controls .multi-work{width:max-content;min-width:200px;max-width:100%;margin:26px auto 0}
.multi-add-carry-row{position:relative;display:block;height:0;min-height:0!important}
.multi-add-carry-row>.multi-sign,.multi-add-carry-row>.multi-empty{display:none}
.multi-add-carry-row .multi-slot{position:absolute;top:-35px;left:calc(34px + var(--multi-cell) + 9px);margin:0}
@media(max-width:920px){.multi-controls .multi-work{margin-top:20px}}

.multi-expression{display:grid;grid-template-columns:repeat(2,var(--multi-cell)) 34px repeat(2,var(--multi-cell));align-items:center;min-height:var(--multi-cell)}
.multi-expression+.multi-rule{margin-left:0}

/* The current operands are marked while answer positions stay neutral. */
.multi-digit.multi-operand{border-radius:8px;background:#fff1d8;outline:2px dashed #d5742a;outline-offset:-2px}
.multi-slot.filled.multi-operand{outline:2px dashed #d5742a;outline-offset:3px}