/* Smart Maths Board styles. Prefix ssb- everywhere. Solid hex colours only. */
.ssb-wrap{box-sizing:border-box;width:100%;max-width:1180px;margin:0 auto;padding:0;font-family:inherit;color:#203080;line-height:1.45}
.ssb-wrap *,.ssb-wrap *::before,.ssb-wrap *::after{box-sizing:border-box}
.ssb-wrap button{font-family:inherit}

/* Tabs */
.ssb-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid #D6E3EC;margin:0 0 14px}
.ssb-tab{background:#FFFFFF;border:0;border-bottom:3px solid transparent;color:#5B6B85;cursor:pointer;font-size:15px;font-weight:600;padding:10px 10px;min-height:44px;margin-bottom:-2px}
.ssb-tab[aria-selected="true"]{color:#203080;border-bottom-color:#D80060}
.ssb-tab:focus-visible,.ssb-btn:focus-visible,.ssb-chip:focus-visible{outline:3px solid #40C0D0;outline-offset:2px}

/* Layout */
.ssb-panel{display:none}
.ssb-panel.ssb-on{display:block}
.ssb-grid{display:flex;flex-direction:column;gap:14px}
.ssb-stage{position:relative;width:100%;border:1px solid #D6E3EC;border-radius:14px;overflow:hidden;background:#14202C}
.ssb-stage-inner{position:relative;width:100%;aspect-ratio:1 / 1;height:auto}
.ssb-stage canvas{display:block;width:100%;height:100%;touch-action:none}
.ssb-canvas-abs{position:absolute;left:0;top:0;width:100%;height:100%}
.ssb-ink{position:absolute;left:0;top:0;width:100%;height:100%;display:none;cursor:crosshair}
.ssb-stage.ssb-writing .ssb-ink{display:block}
.ssb-side{width:100%}

/* Board chrome */
.ssb-toolbar{position:absolute;right:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:70%}
.ssb-toolbar .ssb-btn{min-width:40px;padding:0 9px;height:40px;font-size:13px;background:#1F3142;border-color:#33485C;color:#FFFFFF}
.ssb-toolbar .ssb-btn:hover{background:#2A4058}
.ssb-hint{position:absolute;left:10px;bottom:10px;color:#C9D8E4;font-size:12px;background:#1F3142;padding:6px 10px;border-radius:8px;max-width:calc(100% - 20px)}
.ssb-readout{position:absolute;left:10px;top:10px;color:#FFFFFF;font-size:14px;background:#1F3142;padding:6px 10px;border-radius:8px;display:none}
.ssb-readout.ssb-on{display:block}

/* Buttons and chips */
.ssb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:10px;border:1px solid #D6E3EC;background:#FFFFFF;color:#203080;font-size:15px;font-weight:600;cursor:pointer}
.ssb-btn:hover{background:#F4F9FD}
.ssb-btn.ssb-primary{background:#D80060;border-color:#D80060;color:#FFFFFF}
.ssb-btn.ssb-primary:hover{background:#B8004F}
.ssb-btn.ssb-teal{background:#178ED3;border-color:#178ED3;color:#FFFFFF}
.ssb-btn.ssb-teal:hover{background:#0F6E9E}
.ssb-btn[disabled]{opacity:.55;cursor:default}
.ssb-btn.ssb-active{background:#203080;border-color:#203080;color:#FFFFFF}
.ssb-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ssb-chip{min-height:40px;padding:6px 12px;border-radius:999px;border:1px solid #D6E3EC;background:#FFFFFF;color:#203080;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ssb-chip:hover{background:#F4F9FD}
.ssb-chip.ssb-active{background:#203080;border-color:#203080;color:#FFFFFF}
.ssb-chip svg{width:22px;height:22px}

/* Cards in side panel */
.ssb-card{border:1px solid #D6E3EC;border-radius:14px;background:#FFFFFF;padding:14px;margin-bottom:12px}
.ssb-card h3{margin:0 0 10px;font-size:17px;color:#203080;font-weight:700}
.ssb-card p{margin:0 0 8px;font-size:14px;color:#3E4C63}
.ssb-muted{color:#5B6B85;font-size:13px}
.ssb-notice{background:#E1F5F0;color:#0F6E56;border-radius:10px;padding:10px 12px;font-size:14px;margin-top:8px;display:none}
.ssb-notice.ssb-on{display:block}
.ssb-error{background:#FDECEC;color:#B42318;border-radius:10px;padding:10px 12px;font-size:14px;margin-top:8px;display:none}
.ssb-error.ssb-on{display:block}

/* Equation input */
.ssb-mf{display:block;width:100%;min-height:52px;font-size:20px;border:2px solid #D6E3EC;border-radius:10px;padding:8px 10px;background:#FFFFFF;color:#142C38}
.ssb-mf:focus-within{border-color:#178ED3}
.ssb-plain{width:100%;min-height:48px;font-size:18px;border:2px solid #D6E3EC;border-radius:10px;padding:8px 10px;font-family:inherit;color:#142C38}
.ssb-eqlist{list-style:none;margin:10px 0 0;padding:0}
.ssb-eq{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid #EAF1F6;font-size:15px}
.ssb-eq:first-child{border-top:0}
.ssb-swatch{width:14px;height:14px;border-radius:50%;flex:0 0 14px}
.ssb-eq-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#142C38}
.ssb-eq .ssb-btn{min-height:36px;padding:4px 10px;font-size:13px}
.ssb-eq.ssb-hidden .ssb-eq-label{opacity:.4;text-decoration:line-through}

/* Sliders and dimension inputs */
.ssb-slider{display:grid;grid-template-columns:36px 1fr 64px;gap:8px;align-items:center;margin:8px 0}
.ssb-slider label{font-weight:700;color:#203080}
.ssb-slider input[type="range"]{width:100%;height:40px;margin:0;accent-color:#D80060}
.ssb-slider output{font-size:14px;color:#3E4C63;text-align:right}
.ssb-dim{display:grid;grid-template-columns:1fr 92px;gap:8px;align-items:center;margin:6px 0;font-size:14px}
.ssb-dim input[type="number"]{width:100%;min-height:40px;border:1px solid #D6E3EC;border-radius:8px;padding:4px 8px;font-size:15px;font-family:inherit;color:#142C38}
.ssb-toggle{display:flex;align-items:center;gap:10px;min-height:40px;font-size:14px;color:#3E4C63;cursor:pointer}
.ssb-toggle input{width:20px;height:20px;accent-color:#D80060;margin:0}

/* Formula box */
.ssb-formula{background:#F4F9FD;border:1px solid #D6E3EC;border-radius:10px;padding:10px 12px;margin-top:8px;font-size:14px;color:#142C38;overflow-x:auto}
.ssb-formula b{color:#0F6E9E}
.ssb-formula .ssb-line{margin:4px 0}
.ssb-stat{font-size:15px;color:#142C38;margin:6px 0}
.ssb-stat strong{color:#D80060}

/* Keyboard helper row for the graph tab */
.ssb-keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ssb-keys .ssb-btn{min-height:40px;min-width:44px;padding:4px 10px;font-size:15px;font-weight:600;background:#F4F9FD}

/* Confirm bar after handwriting read */
.ssb-confirm{display:none;border:2px solid #F07800;background:#FFF6EC;border-radius:10px;padding:10px 12px;margin-top:8px}
.ssb-confirm.ssb-on{display:block}
.ssb-confirm .ssb-row{margin-top:8px}

/* Loading dots */
.ssb-busy{display:none;color:#5B6B85;font-size:14px;margin-top:6px}
.ssb-busy.ssb-on{display:block}

/* Table for solids */
.ssb-tablewrap{overflow-x:auto}
.ssb-table{width:100%;border-collapse:collapse;font-size:14px}
.ssb-table td{padding:6px 8px;border-bottom:1px solid #EAF1F6;color:#142C38;vertical-align:top}
.ssb-table td:first-child{color:#5B6B85;white-space:nowrap}

/* Desktop */
@media (min-width:900px){
  .ssb-tabs{gap:8px}
  .ssb-tab{font-size:16px;padding:12px 16px}
  .ssb-grid{flex-direction:row;align-items:flex-start}
  .ssb-stage{flex:1 1 auto;min-width:0}
  .ssb-stage-inner{aspect-ratio:16 / 10}
  .ssb-side{flex:0 0 340px;width:340px}
  .ssb-toolbar .ssb-btn{font-size:15px;padding:0 12px}
  .ssb-hint{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .ssb-wrap *{transition:none !important}
}

/* Science board additions */
.ssb-widgets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.ssb-stage-inner.ssb-tall{aspect-ratio:1 / 1.25}
.ssb-stage-inner.ssb-vt{aspect-ratio:1.4 / 1}
.ssb-stack{display:flex;flex-direction:column;gap:10px}
.ssb-mini{position:relative;width:100%;border:1px solid #D6E3EC;border-radius:12px;overflow:hidden;background:#14202C}
.ssb-mini canvas{display:block;width:100%;height:100%;touch-action:none}
.ssb-mini-inner{position:relative;width:100%;aspect-ratio:2.4 / 1}
.ssb-mini-title{position:absolute;left:10px;top:8px;color:#C9D8E4;font-size:12px}
.ssb-input{width:100%;min-height:40px;border:1px solid #D6E3EC;border-radius:8px;padding:4px 10px;font-size:16px;font-family:inherit;color:#142C38}
.ssb-tray{display:flex;flex-wrap:wrap;gap:8px}
.ssb-kv{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:14px;color:#142C38;margin:6px 0}
.ssb-kv b{color:#0F6E9E;font-weight:600}
.ssb-pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;font-weight:600;background:#E1F5F0;color:#0F6E56}
.ssb-pill.ssb-warn{background:#FFF6EC;color:#9A4B00}
.ssb-play{display:flex;gap:8px;align-items:center;margin:8px 0}
@media (min-width:900px){
  .ssb-stage-inner.ssb-tall{aspect-ratio:16 / 10}
  .ssb-stage-inner.ssb-vt{aspect-ratio:2 / 1}
  .ssb-mini-inner{aspect-ratio:3 / 1}
}

/* Teacher layout: dark full width board for a projector */
.ssb-teacher{max-width:none;background:#0E161F;color:#E2F1F8;min-height:100vh;padding:0;display:flex;flex-direction:column}
.ssb-teacher:fullscreen{width:100vw;height:100vh;overflow:auto}
.ssb-tbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:#14202C;border-bottom:1px solid #22323F;flex-wrap:wrap}
.ssb-tbar-left,.ssb-tbar-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ssb-teacher .ssb-tabs{border-bottom:0;margin:0;gap:4px}
.ssb-teacher .ssb-tab{background:transparent;color:#9FBBD1;border-radius:8px;border-bottom:0;padding:8px 12px;min-height:40px;margin:0}
.ssb-teacher .ssb-tab[aria-selected="true"]{background:#203080;color:#FFFFFF}
.ssb-teacher .ssb-tbar .ssb-btn{background:#1F3142;border-color:#33485C;color:#FFFFFF}
.ssb-teacher .ssb-tbar .ssb-btn.ssb-active{background:#D80060;border-color:#D80060}
.ssb-teacher .ssb-tbar .ssb-btn.ssb-primary{background:#178ED3;border-color:#178ED3}
.ssb-pentools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 12px;background:#1F3142;border-bottom:1px solid #33485C}
.ssb-pentools .ssb-btn{min-height:36px;padding:4px 10px;font-size:14px;background:#14202C;border-color:#33485C;color:#FFFFFF}
.ssb-pentools .ssb-btn.ssb-active{background:#D80060;border-color:#D80060}
.ssb-swatchbtn{width:30px;height:30px;border-radius:50%;border:3px solid #14202C;cursor:pointer;padding:0}
.ssb-swatchbtn.ssb-active{border-color:#FFFFFF;transform:scale(1.15)}
.ssb-tbody{position:relative;flex:1 1 auto;padding:10px 12px 16px}
.ssb-teacher .ssb-widgets{margin:0 0 10px}
.ssb-teacher .ssb-chip{background:#1F3142;border-color:#33485C;color:#E2F1F8}
.ssb-teacher .ssb-chip.ssb-active{background:#D80060;border-color:#D80060;color:#FFFFFF}
.ssb-teacher .ssb-grid{flex-direction:column}
.ssb-teacher .ssb-stage{border-color:#33485C;border-radius:10px}
.ssb-teacher .ssb-stage-inner,.ssb-teacher .ssb-stage-inner.ssb-tall,.ssb-teacher .ssb-stage-inner.ssb-vt{aspect-ratio:auto;height:min(72vh,calc(100vw * 0.56));min-height:300px}
.ssb-teacher:fullscreen .ssb-stage-inner,.ssb-teacher:fullscreen .ssb-stage-inner.ssb-tall,.ssb-teacher:fullscreen .ssb-stage-inner.ssb-vt{height:calc(100vh - 170px)}
.ssb-teacher .ssb-mini-inner{aspect-ratio:4 / 1}
.ssb-teacher .ssb-side{position:fixed;right:0;top:0;bottom:0;width:min(420px,92vw);background:#FFFFFF;overflow:auto;padding:14px;transform:translateX(105%);transition:transform .2s;z-index:9999;box-shadow:-8px 0 24px #050A0F;color:#203080}
.ssb-teacher.ssb-panel-open .ssb-side{transform:none}
.ssb-teacher .ssb-side .ssb-card{font-size:16px}
.ssb-teacher .ssb-formula,.ssb-teacher .ssb-kv,.ssb-teacher .ssb-card p{font-size:16px}
.ssb-teacher .ssb-muted{color:#9FBBD1}
.ssb-teacher .ssb-side .ssb-muted{color:#5B6B85}
.ssb-teacher .ssb-hint{font-size:15px}
.ssb-pen-host{position:absolute;inset:0;pointer-events:none;z-index:50}
.ssb-pen{position:absolute;left:0;top:0;width:100%;height:100%;display:none;touch-action:none;cursor:crosshair}
.ssb-pen-on .ssb-pen{display:block;pointer-events:auto}
.ssb-whiteboard .ssb-stage-inner{position:relative}
.ssb-whiteboard .ssb-pen{display:block;pointer-events:auto}
.ssb-whiteboard .ssb-pen-host{pointer-events:auto}
.ssb-teacher .ssb-whiteboard{margin-top:8px}
@media (prefers-reduced-motion:reduce){.ssb-teacher .ssb-side{transition:none}}

.ssb-gate{max-width:560px;margin:40px auto;padding:24px;border:1px solid #D6E3EC;border-radius:14px;text-align:center;color:#203080;font-size:17px}
.ssb-gate .ssb-btn{text-decoration:none}

.ssb-viewtag{color:#9FBBD1;font-size:14px;padding:0 6px}
.ssb-viewonly .ssb-side,.ssb-viewonly .ssb-pen-host{display:none}

/* Text boards (English, number systems) */
.ssb-textstage{display:flex;align-items:flex-start;justify-content:center;padding:18px;overflow:auto}
.ssb-textboard{display:flex;flex-wrap:wrap;gap:10px 14px;align-content:flex-start;width:100%;color:#E2F1F8;font-size:18px;line-height:1.5}
.ssb-textboard.ssb-mono{font-family:ui-monospace,Menlo,Consolas,monospace;flex-direction:column;flex-wrap:nowrap;gap:6px;font-size:17px}
.ssb-word{display:inline-flex;flex-direction:column;align-items:center;padding:6px 10px;border:1px solid #33485C;border-radius:10px;background:#1F3142}
.ssb-word b{font-size:22px}
.ssb-word small{font-size:11px;color:#9FBBD1;margin-top:2px;white-space:nowrap}
.ssb-role-subject{border-color:#40C0D0}.ssb-role-verb{border-color:#FF4D94}.ssb-role-object{border-color:#FFD166}
.ssb-textline{width:100%}
.ssb-textbig{font-size:26px;font-weight:600}
.ssb-textarrow{width:100%;color:#FFD166;font-size:16px}
.ssb-poem{line-height:1.8}
.ssb-poem mark{color:#14202C;padding:0 4px;border-radius:4px}
.ssb-textmsg{color:#C9D8E4;font-size:16px;padding:20px;text-align:center;width:100%}
.ssb-legend{display:flex;flex-wrap:wrap;gap:8px 14px;padding:8px 12px;font-size:13px;color:#C9D8E4;background:#1F3142}
.ssb-legend-item{display:inline-flex;align-items:center;gap:6px}
.ssb-legend-item i{display:inline-block;width:12px;height:12px;border-radius:3px}
.ssb-tl{width:100%;margin:2px 0}
.ssb-tl.ssb-step{padding-left:18px;color:#C9D8E4}
.ssb-tl sup,.ssb-tl sub{font-size:0.7em}
.ssb-formula.ssb-mono{font-family:ui-monospace,Menlo,Consolas,monospace}
.ssb-tt th{padding:6px 10px;border-bottom:2px solid #D6E3EC;color:#203080;text-align:center}
.ssb-tt td{text-align:center}
.ssb-tt tr.ssb-rowon td{background:#FFF6EC}
.ssb-teacher .ssb-textboard{font-size:22px}.ssb-teacher .ssb-word b{font-size:28px}.ssb-teacher .ssb-textbig{font-size:34px}