/*!
 * SAT Math Practice Hub — "Graph Paper" interface skin
 * Child-theme layer. Screen only: printed papers, PDFs and certificates are untouched.
 * Fonts are declared in gp-fonts.css (local files): Bricolage Grotesque (headings, numbers),
 *   Figtree (text), Atkinson Hyperlegible Next (access codes only).
 * Elementor-built content (sections, headings, buttons you add around the platform widget) is
 *   deliberately left to Elementor: page-level rules skip body.elementor-page and the editor.
 * :root:is(:root,#gp-skin) is expanded at build time to a high-specificity root prefix so these rules
 * sit cleanly above the parent's account skin without editing parent files.
 */

/* ───────────────────────── 1. Tokens ───────────────────────── */
:root{
  --gp-ink:#1D1B4C;        /* deep indigo ink: headers, headings */
  --gp-ink-2:#2B2870;
  --gp-pen:#4B3FD8;        /* ballpoint violet: primary actions, links */
  --gp-pen-hover:#3C31BD;
  --gp-pen-50:#F1F0FE;
  --gp-pen-100:#E3E0FD;
  --gp-pen-200:#C9C3FB;
  --gp-canvas:#F4F5FB;     /* graph paper */
  --gp-grid:rgba(75,63,216,.055);
  --gp-grid-major:rgba(75,63,216,.085);
  --gp-paper:#FFFFFF;
  --gp-line:#E2E4F2;       /* hairlines */
  --gp-border:#D6D9EC;     /* control borders */
  --gp-text:#22233A;
  --gp-muted:#575A76;
  --gp-marker:#FFC93C;     /* highlighter: achievement + "you are here" */
  --gp-marker-50:#FFF6DA;
  --gp-marker-ink:#7A5200;
  --gp-mint:#0B8F72;       /* success / teacher */
  --gp-mint-50:#E2F6EF;
  --gp-sky:#1F7FD1;
  --gp-sky-50:#E5F1FC;
  --gp-rose:#D93D44;       /* alerts */
  --gp-rose-50:#FDECEC;
  --gp-amber:#B76A00;
  --gp-amber-50:#FFF2DD;

  --gp-r-shell:28px; --gp-r-card:20px; --gp-r-ctl:12px; --gp-r-chip:999px;
  --gp-shadow-1:0 1px 2px rgba(29,27,76,.06),0 4px 14px rgba(29,27,76,.06);
  --gp-shadow-2:0 2px 4px rgba(29,27,76,.05),0 18px 44px rgba(29,27,76,.12);
  --gp-ring:0 0 0 4px rgba(75,63,216,.22);

  --gp-font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --gp-font-text:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --gp-font-code:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",var(--gp-font-text);

  /* graph-paper canvas: 24px minor, 120px major squares */
  --gp-canvas-img:
    linear-gradient(var(--gp-grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--gp-grid-major) 1px,transparent 1px),
    linear-gradient(var(--gp-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--gp-grid) 1px,transparent 1px);
  --gp-canvas-size:120px 120px,120px 120px,24px 24px,24px 24px;

  /* ink band with a plotted curve — the one decorative signature of the skin */
  --gp-band-img:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='140' viewBox='0 0 520 140' fill='none'%3E%3Cg stroke='%23ffffff' stroke-opacity='.07'%3E%3Cpath d='M0 20h520M0 50h520M0 80h520M0 110h520M40 0v140M100 0v140M160 0v140M220 0v140M280 0v140M340 0v140M400 0v140M460 0v140'/%3E%3C/g%3E%3Cpath d='M110 132 C 200 132 240 18 330 18 S 450 96 520 60' stroke='%23FFC93C' stroke-width='3' stroke-linecap='round' stroke-opacity='.9'/%3E%3Ccircle cx='330' cy='18' r='5' fill='%23FFC93C'/%3E%3Cpath d='M90 112 L 520 40' stroke='%23ffffff' stroke-opacity='.22' stroke-width='2' stroke-dasharray='2 7' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(115deg,#1D1B4C 0%,#26236A 55%,#312C86 100%);
  /* quiet variant for bars that carry buttons: grid + a faint white curve, no highlighter */
  --gp-band-quiet:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='140' viewBox='0 0 520 140' fill='none'%3E%3Cg stroke='%23ffffff' stroke-opacity='.06'%3E%3Cpath d='M0 20h520M0 50h520M0 80h520M0 110h520M40 0v140M100 0v140M160 0v140M220 0v140M280 0v140M340 0v140M400 0v140M460 0v140'/%3E%3C/g%3E%3Cpath d='M0 120 C 120 120 160 30 260 30 S 420 100 520 70' stroke='%23ffffff' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E"),
    linear-gradient(115deg,#1D1B4C 0%,#26236A 55%,#312C86 100%);
}

/* Tailwind theme variables inside the React platform → one consistent palette and type */
@media screen{
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]),
:root:is(:root,#gp-skin) .sq-shell{
  --font-sans:var(--gp-font-text);
  --default-font-family:var(--gp-font-text);
  --color-indigo-50:#F1F0FE; --color-indigo-100:#E3E0FD; --color-indigo-200:#C9C3FB; --color-indigo-300:#A79DF7;
  --color-indigo-400:#8173EF; --color-indigo-500:#6253E6; --color-indigo-600:#4B3FD8; --color-indigo-700:#3F33C4;
  --color-indigo-800:#34299E; --color-indigo-900:#2B237E; --color-indigo-950:#1D1B4C;
  --primary:#4B3FD8; --ring:#4B3FD8;
}

/* ───────────────────────── 2. Canvas + type ───────────────────────── */
:root:is(:root,#gp-skin) body:not(.elementor-page):not(.elementor-editor-active):not(.elementor-editor-preview),
:root:is(:root,#gp-skin) body.smh-portal-page,
:root:is(:root,#gp-skin) .math-surface,
:root:is(:root,#gp-skin) .student-workspace.smh-account-ui,
:root:is(:root,#gp-skin) .smh-portal-page:has(.smh-portal-header),
:root:is(:root,#gp-skin) .smh-native-platform:has(.sqm-head),
:root:is(:root,#gp-skin) body:has(>.sqm-head),
:root:is(:root,#gp-skin) .sq-shell{
  background-color:var(--gp-canvas)!important;
  background-image:var(--gp-canvas-img)!important;
  background-size:var(--gp-canvas-size)!important;
  color:var(--gp-text)!important;
  font-family:var(--gp-font-text)!important;
}
:root:is(:root,#gp-skin) body:not(.elementor-page){-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-size:16px;line-height:1.6}
/* inside an Elementor page the platform widget carries its own canvas */
:root:is(:root,#gp-skin) .elementor-widget-smh-platform .smh-native-platform{background-color:var(--gp-canvas);background-image:var(--gp-canvas-img);background-size:var(--gp-canvas-size);border-radius:var(--gp-r-card);font-family:var(--gp-font-text)}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,.smh-shell,.smh-portal-inner,.sqm-wrap,.sq-main,.smh-portal-header,.sqm-head,.sq-head,.smh-login-card,.smh-content,[data-gp-app]) :is(p,label,small,input,select,textarea,button,a,li,td,th,legend,dd,dt){font-family:var(--gp-font-text)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,.smh-shell,.smh-portal-inner,.sqm-wrap,.sq-main,.smh-portal-header,.sqm-head,.sq-head,.smh-content,[data-gp-app]) :is(h1,h2,h3,h4){
  font-family:var(--gp-font-display)!important;font-weight:700!important;letter-spacing:-.018em!important;line-height:1.18!important;color:var(--gp-ink);text-wrap:balance}
/* keep math typesetting in its own fonts */

/* the tracked ALL-CAPS labels become calm sentence-case labels */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .uppercase:not(.font-mono){text-transform:none!important;letter-spacing:.01em!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) [class*="tracking-[."],
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .tracking-widest:not(.font-mono){letter-spacing:.01em!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .text-xs.font-black.uppercase{font-size:.8125rem!important;font-weight:700!important}

/* weights: the parent flattened everything to 500/600 — restore a clear hierarchy */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .font-black{font-weight:800!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .font-bold{font-weight:700!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .font-semibold{font-weight:600!important}

/* text colours */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) :is(.text-slate-900,.text-slate-950,.text-\[\#182132\],.text-slate-800){color:var(--gp-text)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) :is(.text-slate-700,.text-slate-600,.text-slate-500,.text-slate-400){color:var(--gp-muted)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) :is(.text-indigo-600,.text-indigo-700,.text-blue-600,.text-\[\#4f46e5\]){color:var(--gp-pen)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .text-indigo-950{color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) :is(.bg-indigo-600,.bg-indigo-700,.bg-blue-600){background:var(--gp-pen)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) :is(.bg-\[\#172554\],.bg-indigo-950){background:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .hover\:bg-\[\#24356d\]:hover{background:var(--gp-ink-2)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) [class*="bg-indigo-50"]{background:var(--gp-pen-50)!important}

/* links never underline inside cards; text links keep a soft underline */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) a,
:root:is(:root,#gp-skin) :is(.smh-portal-inner,.smh-shell) a:is([class],.smh-print-center-launch),
:root:is(:root,#gp-skin) .smh-print-center-launch *{text-decoration:none!important}
:root:is(:root,#gp-skin) :is(.smh-login-card,.smh-content,.smh-card) a:not([class]){color:var(--gp-pen);text-decoration-thickness:1px!important;text-underline-offset:3px!important;text-decoration-color:rgba(75,63,216,.35)!important}
:root:is(:root,#gp-skin) :is(.smh-login-card,.smh-content,.smh-card) a:not([class]):hover{text-decoration-color:currentColor!important}

/* focus: one visible, consistent ring */
:root:is(:root,#gp-skin) :is(a,button,input,select,textarea,summary,[tabindex],[role=button]):focus-visible{outline:3px solid var(--gp-pen)!important;outline-offset:3px!important;box-shadow:none!important}

/* ───────────────────────── 3. Controls ───────────────────────── */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,.smh-shell,.smh-portal-inner,.sqm-wrap,.sq-main,.smh-login-card,[data-gp-app]) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]){
  min-height:46px!important;border:1.5px solid var(--gp-border)!important;border-radius:var(--gp-r-ctl)!important;
  background:#fff!important;color:var(--gp-text)!important;font-size:16px!important;font-weight:500!important;
  padding:10px 14px!important;box-shadow:inset 0 1px 0 rgba(29,27,76,.03)!important;transition:border-color .15s,box-shadow .15s}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,.smh-shell,.smh-portal-inner,.sqm-wrap,.sq-main,.smh-login-card,[data-gp-app]) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):hover{border-color:#B9BDDA!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,.smh-shell,.smh-portal-inner,.sqm-wrap,.sq-main,.smh-login-card,[data-gp-app]) :is(input,select,textarea):focus{border-color:var(--gp-pen)!important;box-shadow:var(--gp-ring)!important;outline:none!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,.smh-shell,.smh-portal-inner,.sqm-wrap,.sq-main,.smh-login-card,[data-gp-app]) ::placeholder{color:#8A8DA8!important;font-weight:400!important;opacity:1}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,.smh-shell,.smh-portal-inner,.sqm-wrap,.sq-main,.smh-login-card,[data-gp-app]) select{appearance:none!important;-webkit-appearance:none!important;padding-right:42px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234B3FD8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 16px center!important;background-size:12px 8px!important}
:root:is(:root,#gp-skin) input[type=checkbox],:root:is(:root,#gp-skin) input[type=radio]{accent-color:var(--gp-pen)}
:root:is(:root,#gp-skin) :is(#smh-modern-print-root,#sat-math-practice-root) input.pl-10{padding-left:40px!important}
/* access-code fields: Atkinson Hyperlegible Next disambiguates 0/O and 1/l/I */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) input.font-mono,
:root:is(:root,#gp-skin) [data-gp-app] input[maxlength="8"],
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) input[maxlength="8"]{font-family:var(--gp-font-code)!important;font-weight:700!important;letter-spacing:.24em!important;text-transform:uppercase;font-size:18px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-gp-app]) input[maxlength="8"]::placeholder{font-family:var(--gp-font-text)!important;letter-spacing:.06em!important;text-transform:none!important}

/* buttons */
:root:is(:root,#gp-skin) :is(.smh-btn,.sq-btn,.sqm-btn){min-height:44px!important;padding:10px 18px!important;border-radius:var(--gp-r-ctl)!important;font-family:var(--gp-font-text)!important;font-weight:700!important;font-size:15px!important;letter-spacing:.005em;
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px!important;transition:background-color .15s,transform .15s,box-shadow .15s!important;box-shadow:0 1px 0 rgba(29,27,76,.08)!important}
:root:is(:root,#gp-skin) :is(.smh-btn,.sq-btn,.sqm-btn):where(:not(.smh-btn-danger):not(.smh-btn-warn):not(.secondary):not(.danger):not([style*="background"])){background:var(--gp-pen)!important;border:1px solid var(--gp-pen)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(.smh-btn,.sq-btn,.sqm-btn):where(:not(.smh-btn-danger):not(.smh-btn-warn):not(.secondary):not(.danger):not([style*="background"])):is(:hover,:active){background:var(--gp-pen-hover)!important;border-color:var(--gp-pen-hover)!important;color:#fff!important;transform:translateY(-1px)}
:root:is(:root,#gp-skin) :is(.smh-btn,.sq-btn,.sqm-btn)[style*="#047857"]{background:var(--gp-mint)!important;border:1px solid var(--gp-mint)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(.smh-btn,.sq-btn,.sqm-btn)[style*="#047857"]:hover{background:#087A61!important}
:root:is(:root,#gp-skin) :is(.smh-btn-danger,.sq-btn.danger,.sqm-btn.danger){background:var(--gp-rose)!important;border:1px solid var(--gp-rose)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(.smh-btn.smh-btn-warn,.smh-btn-warn.gp-ico){background:var(--gp-amber)!important;border:1px solid var(--gp-amber)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(.sq-btn.secondary,.sqm-btn.secondary,.smh-btn.secondary){background:#fff!important;border:1.5px solid var(--gp-border)!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(.smh-btn,.sq-btn,.sqm-btn) svg{width:18px!important;height:18px!important}

/* React (shadcn) buttons */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) [data-slot=button]{border-radius:var(--gp-r-ctl)!important;font-weight:700!important;font-family:var(--gp-font-text)!important;min-height:42px}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) [data-slot=button][data-variant=outline]{background:#fff!important;border:1.5px solid var(--gp-border)!important;color:var(--gp-ink)!important;box-shadow:none!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) [data-slot=button][data-variant=outline]:hover{border-color:var(--gp-pen-200)!important;background:var(--gp-pen-50)!important;color:var(--gp-pen)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) [data-slot=button][data-variant=default]:not([class*="bg-white"]){background:var(--gp-ink)!important;color:#fff!important;box-shadow:0 10px 24px -10px rgba(29,27,76,.55)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) [data-slot=button][data-variant=default]:not([class*="bg-white"]):hover{background:var(--gp-pen)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) [data-slot=button]:disabled{background:#E7E8F3!important;color:#7C7F9C!important;box-shadow:none!important;opacity:1!important;border-color:#E7E8F3!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) button[class*="py-6"][data-slot=button]{min-height:54px;font-size:17px!important}

/* ───────────────────────── 4. Role + grade selection, login (public) ───────────────────────── */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.math-surface.place-items-center > section{
  border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-shell)!important;box-shadow:var(--gp-shadow-2)!important;
  padding:clamp(22px,4vw,48px)!important;position:relative;overflow:hidden}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.math-surface.place-items-center > section::before{
  content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--gp-pen) 0 33.3%,var(--gp-mint) 0 66.6%,var(--gp-marker) 0)}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .sat-role-heading{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .sat-role-heading-copy{text-align:left!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .sat-role-heading-copy .math-symbols{margin:0!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .sat-role-heading-image{position:static!important;width:150px!important;height:auto!important;transform:none!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center h1{font-size:clamp(2rem,4.2vw,3rem)!important;font-weight:750!important;letter-spacing:-.03em!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .math-symbols.size-14{width:52px!important;height:52px!important;border-radius:16px!important;background:var(--gp-ink)!important;box-shadow:inset 0 -3px 0 var(--gp-marker)}

/* role & grade cards: equal height, action pinned to the bottom */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center .grid > :is(button,a).group{
  display:flex!important;flex-direction:column;align-items:flex-start;height:100%;border-radius:var(--gp-r-card)!important;
  border-width:1.5px!important;background:#fff!important;box-shadow:var(--gp-shadow-1);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;padding:26px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center .grid > :is(button,a).group > span:last-child{margin-top:auto!important;padding-top:20px}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center .grid > :is(button,a).group:hover{transform:translateY(-3px)!important;box-shadow:var(--gp-shadow-2)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center .grid > :is(button,a).group h2{font-size:1.5rem!important;margin-top:18px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center .grid > :is(button,a).group p{color:var(--gp-muted)!important;line-height:1.6!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center .grid > :is(button,a).group > span:first-child{border-radius:14px!important;width:52px!important;height:52px!important}
/* role identity colours: student = pen, teacher = mint, admin = amber, grade 10 = mint */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group.border-indigo-100{border-color:var(--gp-pen-100)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group.border-indigo-100:hover{border-color:var(--gp-pen)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group:is(.border-emerald-100,.border-teal-100){border-color:#CDEBE1!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group:is(.border-emerald-100,.border-teal-100):hover{border-color:var(--gp-mint)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group.border-amber-100{border-color:#F6DFB5!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group.border-amber-100:hover{border-color:var(--gp-amber)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group :is(.bg-emerald-700,.bg-teal-700){background:var(--gp-mint)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group .bg-amber-600{background:#E08A00!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group :is(.text-emerald-700,.text-teal-700){color:var(--gp-mint)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group .text-amber-700{color:var(--gp-amber)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group > span:last-child svg{transition:transform .18s ease}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .group:hover > span:last-child svg{transform:translateX(4px)}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center button.rounded-xl.border{border-radius:var(--gp-chip,999px)!important;border:1.5px solid var(--gp-border)!important;padding:8px 16px 8px 12px!important;color:var(--gp-ink)!important;font-weight:700!important;background:#fff!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center button.rounded-xl.border:hover{border-color:var(--gp-pen)!important;color:var(--gp-pen)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center .bg-teal-700{background:var(--gp-mint)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center .text-teal-700{color:var(--gp-mint)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center button.bg-teal-700,
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) main.place-items-center button[class*="bg-teal"]{border-radius:var(--gp-r-ctl)!important;min-height:52px;font-size:16px!important}

/* Grade 11 login: a focused, narrow card instead of a full-width sheet */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .question-screen-card:has(.smh-student-login-content){max-width:620px;margin:24px auto!important;border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-shell)!important;box-shadow:var(--gp-shadow-2)!important;padding:clamp(20px,4vw,40px)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .smh-student-login-content{padding-top:0!important;padding-bottom:0!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .smh-student-change-role{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--gp-border)!important;background:#fff!important;color:var(--gp-ink)!important;border-radius:999px!important;padding:8px 16px!important;font-weight:700!important;min-height:40px}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .smh-student-change-role:hover{border-color:var(--gp-pen)!important;color:var(--gp-pen)!important}
:root:is(:root,#gp-skin) .smh-student-login-welcome{background:var(--gp-band-quiet)!important;background-size:cover,cover!important;background-position:right center,center!important;border-radius:var(--gp-r-card)!important;padding:22px 24px!important;color:#fff!important;margin-top:20px!important}
:root:is(:root,#gp-skin) .smh-student-login-welcome .sat-page-art-copy span{display:block;color:var(--gp-marker)!important;font-size:13px!important;letter-spacing:.01em!important;text-transform:none!important;font-weight:700!important}
:root:is(:root,#gp-skin) .smh-student-login-welcome .sat-page-art-copy strong{display:block;color:#fff!important;font-family:var(--gp-font-display)!important;font-weight:700!important;font-size:24px!important;line-height:1.2!important;margin-top:4px}
:root:is(:root,#gp-skin) .smh-student-login-welcome img{filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .smh-student-login-content h3{font-size:1.75rem!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .smh-student-login-content > .size-14{background:var(--gp-marker-50)!important;border-radius:16px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .smh-student-login-content form label{font-weight:700!important;color:var(--gp-ink)!important;font-size:14px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .smh-student-login-content input[readonly]{background:#F7F8FC!important;color:var(--gp-muted)!important}

/* status notes (success / info) */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .border-emerald-200.bg-emerald-50{border-color:#BFE7D9!important;background:var(--gp-mint-50)!important;color:#075E4B!important;border-radius:var(--gp-r-ctl)!important}

/* Teacher / admin sign-in card */
:root:is(:root,#gp-skin) .smh-login-card{border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-shell)!important;box-shadow:var(--gp-shadow-2)!important;padding:clamp(24px,4vw,40px)!important;position:relative;overflow:hidden;max-width:480px}
:root:is(:root,#gp-skin) .smh-login-card::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--gp-role,var(--gp-pen))}
:root:is(:root,#gp-skin) .smh-teacher-skin .smh-login-card{--gp-role:var(--gp-mint)}
:root:is(:root,#gp-skin) .smh-admin-skin .smh-login-card{--gp-role:#E08A00}
:root:is(:root,#gp-skin) .smh-login-card :is(h1,h2){font-size:1.75rem!important;margin:6px 0 4px!important}
:root:is(:root,#gp-skin) .smh-login-card label{font-weight:700!important;color:var(--gp-ink)!important;font-size:14px!important;display:block;margin-top:6px}
:root:is(:root,#gp-skin) .smh-login-card button[type=submit],:root:is(:root,#gp-skin) .smh-login-card .smh-btn{width:100%;min-height:50px!important;background:var(--gp-ink)!important;border-color:var(--gp-ink)!important;color:#fff!important;font-size:16px!important;border-radius:var(--gp-r-ctl)!important}
:root:is(:root,#gp-skin) .smh-login-card button[type=submit]:hover{background:var(--gp-pen)!important}
:root:is(:root,#gp-skin) .smh-login-card button[type=submit] + a,:root:is(:root,#gp-skin) .smh-login-card form > a{display:inline-block;margin-top:12px}

/* ───────────────────────── 5. Ink band headers (signed in) ───────────────────────── */
:root:is(:root,#gp-skin) :is(.smh-portal-header,.sqm-head,.sq-head),
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header{
  background:var(--gp-band-quiet)!important;background-size:620px 100%,cover!important;background-repeat:no-repeat!important;background-position:62% center,center!important;
  border:0!important;box-shadow:0 1px 0 rgba(255,255,255,.06),0 10px 30px -18px rgba(29,27,76,.7)!important;color:#fff!important}
:root:is(:root,#gp-skin) .smh-portal-header::before,:root:is(:root,#gp-skin) .smh-portal-header::after{display:none!important}
:root:is(:root,#gp-skin) :is(.smh-portal-header,.sqm-head,.sq-head) :is(h1,h2,strong){font-family:var(--gp-font-display)!important;font-weight:700!important;color:#fff!important;letter-spacing:-.02em!important}
:root:is(:root,#gp-skin) :is(.smh-brand-copy h1,.sqm-brand h1){font-size:26px!important;line-height:1.15!important}
:root:is(:root,#gp-skin) .sq-head .sq-brand strong{font-size:22px!important}
:root:is(:root,#gp-skin) :is(.smh-brand-copy p,.sqm-brand p,.sq-head .sq-muted){color:rgba(255,255,255,.78)!important;font-size:14px!important}
:root:is(:root,#gp-skin) .smh-staff-identity{display:flex!important;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-top:6px!important}
:root:is(:root,#gp-skin) .smh-staff-identity strong{color:#fff!important;font-family:var(--gp-font-text)!important;font-size:14px!important}
:root:is(:root,#gp-skin) .smh-staff-identity span{color:rgba(255,255,255,.7)!important;font-size:13px!important}
:root:is(:root,#gp-skin) :is(.smh-brand-mark,.sqm-shield,.sq-head .sq-icon){background:var(--gp-marker)!important;color:var(--gp-ink)!important;border-radius:14px!important;box-shadow:none!important}
:root:is(:root,#gp-skin) :is(.smh-brand-mark,.sqm-shield,.sq-head .sq-icon) svg{color:var(--gp-ink)!important;stroke:var(--gp-ink)}
/* header actions: quiet glass buttons; Sign out separated */
:root:is(:root,#gp-skin) :is(.smh-header-action,.sqm-dashboard,.sq-head .sq-btn){
  background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.22)!important;color:#fff!important;
  font-family:var(--gp-font-text)!important;font-weight:700!important;font-size:14px!important;border-radius:var(--gp-r-ctl)!important;
  min-height:42px!important;padding:9px 14px!important;backdrop-filter:blur(6px);box-shadow:none!important}
:root:is(:root,#gp-skin) .smh-native-platform.smh-portal-page:has(.smh-portal-header) :is(.smh-header-action,.smh-header-action.smh-print-center-header){background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.22)!important}
:root:is(:root,#gp-skin) :is(.smh-header-action,.sqm-dashboard,.sq-head .sq-btn):is(:hover,:focus-visible),
:root:is(:root,#gp-skin) .smh-native-platform.smh-portal-page:has(.smh-portal-header) .smh-header-action:is(:hover,:focus-visible,:active){background:#fff!important;color:var(--gp-ink)!important;border-color:#fff!important}
:root:is(:root,#gp-skin) .smh-header-action.smh-print-center-header,
:root:is(:root,#gp-skin) .smh-native-platform.smh-portal-page:has(.smh-portal-header) .smh-header-action.smh-print-center-header{background:var(--gp-marker)!important;border-color:var(--gp-marker)!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) .smh-header-action.smh-plain{margin-left:8px}
:root:is(:root,#gp-skin) .smh-header-action svg,:root:is(:root,#gp-skin) .smh-header-action .smh-svg{width:18px!important;height:18px!important;flex:0 0 18px!important}

/* student React header */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header h1{font-size:20px!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header p{color:rgba(255,255,255,.75)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header .math-symbols.size-11{background:var(--gp-marker)!important;color:var(--gp-ink)!important;border-radius:14px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header .math-symbols.text-indigo-200{color:rgba(255,255,255,.35)!important;font-family:"Cambria Math","Times New Roman",serif!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header .math-symbols.text-indigo-200 span{font-family:inherit!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header [data-slot=button][data-variant=outline]{background:rgba(255,255,255,.1)!important;border-color:rgba(255,255,255,.25)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header [data-slot=button][data-variant=outline]:hover{background:#fff!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header .rounded-full.bg-\[\#eef2ff\]{background:var(--gp-marker)!important;color:var(--gp-ink)!important;font-weight:700!important}

/* ───────────────────────── 6. Student workspace (React) ───────────────────────── */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-workspace.smh-account-ui{font-size:16px}
/* welcome strip */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-workspace > div > .rounded-2xl.bg-gradient-to-r{
  background:#fff!important;border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-card)!important;box-shadow:var(--gp-shadow-1)!important;padding:14px 22px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-workspace > div > .rounded-2xl.bg-gradient-to-r h1{font-size:clamp(1.35rem,2.4vw,1.75rem)!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-workspace > div > .rounded-2xl.bg-gradient-to-r p{color:var(--gp-muted)!important;font-size:15px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-workspace > div > .text-center h1{color:var(--gp-ink)!important;font-size:1.5rem!important}

/* side cards: assessments / progress / notebook / certificates */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"]{gap:12px!important}
@media (min-width:640px) and (max-width:1023.98px){:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > a.group{grid-column:span 2}}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > :is(a,button).group{
  background:#fff!important;border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-card)!important;box-shadow:var(--gp-shadow-1)!important;
  padding:16px 16px 16px 14px!important;min-height:92px;transition:transform .18s,box-shadow .18s,border-color .18s!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > :is(a,button).group:hover{border-color:var(--gp-pen-200)!important;box-shadow:var(--gp-shadow-2)!important;transform:translateY(-2px)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group > span:first-child{width:44px!important;height:44px!important;border-radius:14px!important;box-shadow:none!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > a.group > span:first-child{background:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > button.group:nth-of-type(1) > span:first-child{background:var(--gp-pen)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > button.group[class*="border-amber"] > span:first-child{background:var(--gp-marker)!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group .text-lg{font-family:var(--gp-font-display)!important;font-size:1.125rem!important;font-weight:700!important;color:var(--gp-ink)!important;margin-top:0!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group .text-xs{font-size:13.5px!important;line-height:1.45!important;color:var(--gp-muted)!important;font-weight:500!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group .text-amber-700{color:var(--gp-marker-ink)!important;font-size:12.5px!important;font-weight:700!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group > svg{color:#A2A5C2;transition:transform .18s,color .18s}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group:hover > svg{color:var(--gp-pen);transform:translateX(3px)}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > [data-slot=button]{min-height:46px!important;border-radius:var(--gp-r-ctl)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > [data-slot=button]:hover{border-color:#F3C1C3!important;background:var(--gp-rose-50)!important;color:var(--gp-rose)!important}

/* sidebar counts: a tidy pill in the card's top-right corner instead of a blob over the icon */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group{position:relative!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group > span:first-child{position:static!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group > span:first-child > span.absolute,
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .smh-count-badge{
  position:absolute!important;top:12px!important;right:14px!important;left:auto!important;bottom:auto!important;
  display:inline-flex!important;align-items:center;justify-content:center;gap:4px;
  min-width:24px!important;height:22px!important;padding:0 8px!important;border:0!important;border-radius:999px!important;
  font:700 12px/1 var(--gp-font-text)!important;font-variant-numeric:tabular-nums;letter-spacing:.01em;
  color:#fff!important;box-shadow:0 1px 2px rgba(29,27,76,.18)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group > span:first-child > span.bg-rose-600,
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .smh-count-badge.is-alert{background:var(--gp-rose)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group > span:first-child > span.bg-emerald-600,
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .smh-count-badge.is-success{background:var(--gp-mint)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) section[aria-label="Revision and achievements"] > .group > span:last-of-type{padding-right:36px}

/* Mistake Notebook practice */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-review{border-color:var(--gp-line)!important;border-radius:var(--gp-r-card)!important;box-shadow:var(--gp-shadow-1)!important;overflow:hidden;transition:border-color .15s,box-shadow .15s}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-review:hover,:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-review.is-open{border-color:#F4DE9C!important;box-shadow:var(--gp-shadow-2)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-review[data-practised=true]{border-left:4px solid var(--gp-mint)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-review-toggle{min-height:0!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-review-toggle:focus-visible{outline-offset:-3px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-review-meta .text-amber-700{color:var(--gp-marker-ink)!important;font-size:13px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-status{font-size:12px!important;letter-spacing:0!important;text-transform:none!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-review-cta{color:var(--gp-pen)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-practice{background:#FCFCFF;border-color:var(--gp-line)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-option{border:1.5px solid var(--gp-border)!important;border-radius:14px!important;min-height:52px}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-option:hover:not(:disabled){border-color:var(--gp-pen-200)!important;background:var(--gp-pen-50)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-option[data-state=selected]{border-color:var(--gp-pen)!important;background:var(--gp-pen-50)!important;box-shadow:0 0 0 3px rgba(75,63,216,.12)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-option[data-state=selected] .notebook-option-letter{background:var(--gp-pen)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-option[data-state=correct]{border-color:var(--gp-mint)!important;background:var(--gp-mint-50)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-option[data-state=correct] .notebook-option-letter{background:var(--gp-mint)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-option[data-state=incorrect]{border-color:var(--gp-rose)!important;background:var(--gp-rose-50)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-option[data-state=incorrect] .notebook-option-letter{background:var(--gp-rose)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .notebook-feedback{border-radius:14px!important}

/* roadmap panel */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-panel{border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-shell)!important;box-shadow:var(--gp-shadow-2)!important;padding:14px!important;background:#fff!important}
:root:is(:root,#gp-skin) .roadmap-heading,
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-heading{background:var(--gp-band-img)!important;background-size:520px 100%,cover!important;background-repeat:no-repeat!important;background-position:right center,center!important;border-radius:calc(var(--gp-r-shell) - 8px)!important;padding:18px 22px!important;margin:0 0 14px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-heading h2{font-family:var(--gp-font-display)!important;font-weight:700!important;font-size:clamp(1.5rem,2.6vw,2rem)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-heading p.text-xs{color:var(--gp-marker)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-heading p:not(.text-xs){color:rgba(255,255,255,.8)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-canvas{border-radius:calc(var(--gp-r-shell) - 10px)!important;border-color:var(--gp-line)!important}
/* roadmap hotspots: "not started" is the default state, so it no longer covers the printed domain names;
   other status chips sit just under each stop */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-canvas > button > span.bottom-1.bg-white\/90{display:none!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-canvas > button > span.bottom-1:not(.bg-white\/90){top:100%!important;bottom:auto!important;margin-top:4px;box-shadow:0 3px 8px rgba(29,27,76,.25)!important;z-index:2}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-canvas > button > span[class*="top-[58%]"]{display:none!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-canvas > button:not(:disabled):hover{border-color:var(--gp-pen)!important;background:rgba(75,63,216,.08)!important;box-shadow:0 0 0 6px rgba(75,63,216,.12)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-canvas > button > span.left-1.bg-indigo-600{background:var(--gp-marker)!important;color:var(--gp-ink)!important}

/* roadmap hero (overall progress) */
:root:is(:root,#gp-skin) .roadmap-hero,
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero{background:var(--gp-band-img)!important;background-size:520px 100%,cover!important;background-repeat:no-repeat!important;background-position:right center,center!important;border-radius:var(--gp-r-shell)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero h2{font-family:var(--gp-font-display)!important;font-weight:700!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero .bg-emerald-400{background:var(--gp-marker)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero [class*="bg-white/10"]{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.18)!important;color:#fff!important;box-shadow:none!important;border-radius:18px!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero [class*="bg-white/10"] p{color:#fff!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero [class*="bg-white/10"] p.text-xs{color:var(--gp-marker)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero [class*="bg-white/10"] p.text-sm{color:rgba(255,255,255,.75)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero p.text-slate-300{color:rgba(255,255,255,.75)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero p.text-indigo-200{color:var(--gp-marker)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero [data-slot=button]{background:#fff!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero [data-slot=button]:hover{background:var(--gp-marker)!important}


/* question screen */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .question-screen-card{border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-shell)!important;box-shadow:var(--gp-shadow-2)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .answer-card{border-width:1.5px!important;border-radius:16px!important;padding:16px 18px!important;transition:border-color .15s,background-color .15s,box-shadow .15s!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .answer-card.border-slate-200{border-color:var(--gp-border)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .answer-card:hover{border-color:var(--gp-pen-200)!important;background:var(--gp-pen-50)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .answer-card:has([aria-checked=true]){border-color:var(--gp-pen)!important;background:var(--gp-pen-50)!important;box-shadow:0 0 0 3px rgba(75,63,216,.12)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .answer-card:has([aria-checked=true]) > span.rounded-full{background:var(--gp-pen)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .answer-card > span.rounded-full{background:#EEF0F8!important;color:var(--gp-ink)!important;font-weight:800!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .question-meta .rounded-full{font-weight:700!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .question-meta .bg-slate-950,:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .question-meta .bg-slate-900{background:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) [aria-label="Diagnostic progress"] button,
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) button[title^="Question "]{border-radius:10px!important;font-weight:700!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) button[title^="Question "].bg-indigo-600{background:var(--gp-ink)!important;border-color:var(--gp-ink)!important;box-shadow:inset 0 -3px 0 var(--gp-marker)!important}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) table{border-collapse:separate;border-spacing:0}
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) aside.rounded-\[2rem\]{border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-card)!important;box-shadow:var(--gp-shadow-1)!important}

/* floating calculator tab */
:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .fixed.right-0 > button,
:root:is(:root,#gp-skin) button[aria-label*="alculator" i].fixed{background:var(--gp-ink)!important;box-shadow:-6px 8px 24px -8px rgba(29,27,76,.6)!important}

/* ───────────────────────── 7. Teacher & admin portal ───────────────────────── */
:root:is(:root,#gp-skin) :is(.smh-portal-inner,.sqm-wrap,.sq-main){max-width:1320px!important}
:root:is(:root,#gp-skin) :is(.smh-card,.sqm-panel,.sq-card,.print-controls){background:#fff!important;border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-card)!important;box-shadow:var(--gp-shadow-1)!important}
:root:is(:root,#gp-skin) :is(.smh-card,.sqm-panel,.sq-card) h2{font-size:clamp(1.4rem,2.2vw,1.75rem)!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(.smh-card,.sqm-panel,.sq-card) h3{font-size:1.125rem!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) :is(.smh-muted,.sqm-muted,.sq-muted){color:var(--gp-muted)!important}
:root:is(:root,#gp-skin) :is(.smh-portal-inner,.sqm-wrap) label{color:var(--gp-ink)!important;font-weight:700!important;font-size:14px!important}

/* section tabs: one tidy scrolling row instead of a wrapped grid */
:root:is(:root,#gp-skin) .smh-side-nav{
  display:flex!important;flex-wrap:nowrap!important;gap:2px!important;overflow-x:auto;scrollbar-width:thin;
  background:#fff!important;border:1px solid var(--gp-line)!important;border-radius:16px!important;padding:6px!important;box-shadow:var(--gp-shadow-1)!important;
  grid-template-columns:none!important}
:root:is(:root,#gp-skin) .smh-side-nav :is(button,a){
  flex:0 0 auto!important;width:auto!important;min-height:44px!important;padding:9px 12px!important;border-radius:11px!important;
  background:transparent!important;color:var(--gp-muted)!important;font-weight:600!important;font-size:14.5px!important;white-space:nowrap!important;box-shadow:none!important;border:0!important;gap:8px!important;display:inline-flex!important;align-items:center}
:root:is(:root,#gp-skin) .smh-side-nav{flex-wrap:wrap!important;overflow:visible!important;row-gap:4px!important}
:root:is(:root,#gp-skin) .smh-side-nav :is(button,a){flex:1 1 auto!important;justify-content:center!important}
:root:is(:root,#gp-skin) .smh-side-nav a.smh-modern-nav-link:first-of-type{margin-left:0!important}
:root:is(:root,#gp-skin) .smh-side-nav a.smh-modern-nav-link:first-of-type::before{display:none!important}
@media(min-width:641px){:root:is(:root,#gp-skin) .smh-side-nav :is(button,a){padding:9px 8px!important;font-size:13.5px!important;gap:6px!important}}
@media(max-width:640px){:root:is(:root,#gp-skin) .smh-side-nav :is(button,a){flex:1 1 40%!important}}
:root:is(:root,#gp-skin) .smh-side-nav .smh-nav-count{background:var(--gp-rose)!important;color:#fff!important}
:root:is(:root,#gp-skin) .smh-stat.smh-stat-live{--accent:var(--gp-stat,var(--gp-pen))}
:root:is(:root,#gp-skin) .smh-stat-live .smh-stat-note{color:var(--gp-muted)!important}
:root:is(:root,#gp-skin) .smh-support-summary .is-total{background:linear-gradient(135deg,var(--gp-ink),var(--gp-pen))!important}
:root:is(:root,#gp-skin) .smh-plan li::before{background:var(--gp-pen)!important}
:root:is(:root,#gp-skin) .smh-btn.smh-btn-soft{background:var(--gp-pen-50)!important;color:var(--gp-pen)!important;border:1px solid color-mix(in srgb,var(--gp-pen) 30%,#fff)!important;box-shadow:none!important}
:root:is(:root,#gp-skin) .smh-work-toggle{background:var(--gp-pen-50)!important;color:var(--gp-pen)!important}
:root:is(:root,#gp-skin) .smh-work-toggle[aria-expanded=true]{background:var(--gp-ink)!important;color:#fff!important;border-color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) .smh-side-nav :is(button,a) .smh-svg,:root:is(:root,#gp-skin) .smh-side-nav :is(button,a) svg{width:19px!important;height:19px!important;flex:0 0 19px!important}
:root:is(:root,#gp-skin) .smh-native-platform.smh-portal-page:has(.smh-portal-header) .smh-side-nav :is(button,a):is(:hover,:focus-visible,:active),
:root:is(:root,#gp-skin) .smh-side-nav :is(button,a):hover{background:var(--gp-pen-50)!important;color:var(--gp-pen)!important}
:root:is(:root,#gp-skin) .smh-side-nav .is-active,
:root:is(:root,#gp-skin) .smh-native-platform.smh-portal-page:has(.smh-portal-header) .smh-side-nav .is-active{background:var(--gp-ink)!important;color:#fff!important;box-shadow:inset 0 -3px 0 var(--gp-marker)!important}
:root:is(:root,#gp-skin) .smh-side-nav a.smh-modern-nav-link:first-of-type{margin-left:auto!important}
:root:is(:root,#gp-skin) .smh-side-nav a.smh-modern-nav-link:first-of-type::before{content:"";width:1px;align-self:stretch;margin:6px 8px 6px 0;background:var(--gp-line)}
:root:is(:root,#gp-skin) .smh-side-nav a.smh-modern-nav-link{color:var(--gp-pen)!important}

/* stat tiles: labels share a 2-line box so every number lines up */
:root:is(:root,#gp-skin) .smh-stat-grid{gap:14px!important}
:root:is(:root,#gp-skin) .smh-stat{
  position:relative;background:#fff!important;border:1px solid var(--gp-line)!important;border-top:1px solid var(--gp-line)!important;border-radius:18px!important;
  padding:18px 18px 14px!important;box-shadow:var(--gp-shadow-1)!important;display:flex!important;flex-direction:column;overflow:hidden}
:root:is(:root,#gp-skin) .smh-stat::before{content:"";position:absolute;left:18px;top:0;width:36px;height:4px;border-radius:0 0 4px 4px;background:var(--gp-stat,var(--gp-pen))}
:root:is(:root,#gp-skin) .smh-stat::after{display:none!important}
:root:is(:root,#gp-skin) .smh-stat.smh-stat-indigo{--gp-stat:var(--gp-pen)}
:root:is(:root,#gp-skin) .smh-stat.smh-stat-blue{--gp-stat:var(--gp-sky)}
:root:is(:root,#gp-skin) .smh-stat.smh-stat-green{--gp-stat:var(--gp-mint)}
:root:is(:root,#gp-skin) .smh-stat.smh-stat-amber{--gp-stat:#E59A00}
:root:is(:root,#gp-skin) .smh-stat.smh-stat-purple{--gp-stat:#8B4FD8}
:root:is(:root,#gp-skin) .smh-stat.smh-stat-rose{--gp-stat:var(--gp-rose)}
:root:is(:root,#gp-skin) .smh-stat > span:first-child{display:block;min-height:2.6em;font-size:13.5px!important;font-weight:700!important;line-height:1.3!important;color:var(--gp-muted)!important;letter-spacing:0!important;text-transform:none!important}
:root:is(:root,#gp-skin) .smh-stat strong{font-family:var(--gp-font-display)!important;font-size:40px!important;font-weight:700!important;line-height:1.05!important;color:var(--gp-ink)!important;margin:8px 0 10px!important;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
:root:is(:root,#gp-skin) .smh-stat button{margin-top:auto!important;align-self:flex-start;padding:4px 0!important;background:none!important;border:0!important;color:var(--gp-pen)!important;font-weight:700!important;font-size:13.5px!important;text-transform:none!important;letter-spacing:0!important}
:root:is(:root,#gp-skin) .smh-stat button:hover{text-decoration:underline!important;text-underline-offset:3px}

/* print-centre launcher → a clear highlighted strip */
:root:is(:root,#gp-skin) .smh-print-center-launch{
  display:flex!important;align-items:center;gap:16px;background:var(--gp-marker-50)!important;border:1px solid #F4DE9C!important;border-radius:var(--gp-r-card)!important;
  padding:18px 22px!important;box-shadow:none!important;color:var(--gp-ink)!important;transition:border-color .15s,box-shadow .15s}
:root:is(:root,#gp-skin) .smh-print-center-launch:hover{border-color:#E5B630!important;box-shadow:var(--gp-shadow-1)!important}
:root:is(:root,#gp-skin) .smh-print-center-launch > svg,:root:is(:root,#gp-skin) .smh-print-center-launch > .smh-svg{width:44px!important;height:44px!important;padding:10px;border-radius:14px;background:var(--gp-marker);color:var(--gp-ink)!important;flex:0 0 44px}
:root:is(:root,#gp-skin) .smh-print-center-launch strong{font-family:var(--gp-font-display)!important;font-size:19px!important;font-weight:700!important;color:var(--gp-ink)!important;display:block}
:root:is(:root,#gp-skin) .smh-print-center-launch small{color:#5B4B1C!important;font-size:14px!important}
:root:is(:root,#gp-skin) .smh-print-center-launch b{margin-left:auto;white-space:nowrap;background:var(--gp-ink);color:#fff!important;border-radius:var(--gp-r-ctl);padding:10px 16px;font-size:14px;font-weight:700}

/* overview action cards */
:root:is(:root,#gp-skin) .smh-action-grid{gap:16px!important}
:root:is(:root,#gp-skin) .smh-overview-card{background:#fff!important;border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-card)!important;box-shadow:var(--gp-shadow-1)!important;padding:22px!important;overflow:hidden}
:root:is(:root,#gp-skin) .smh-overview-card::before,:root:is(:root,#gp-skin) .smh-overview-card::after{display:none!important}
:root:is(:root,#gp-skin) .smh-overview-card :is(.smh-overview-card-head,.smh-overview-link){display:flex!important;align-items:flex-start!important;gap:14px!important;text-align:left!important}
:root:is(:root,#gp-skin) .smh-overview-card h3{font-size:1.25rem!important;margin:0 0 4px!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) .smh-overview-card p{color:var(--gp-muted)!important;font-size:15px!important;line-height:1.5!important;margin:0!important}
:root:is(:root,#gp-skin) .smh-overview-icon{width:48px!important;height:48px!important;flex:0 0 48px!important;border-radius:14px!important;display:grid!important;place-items:center;background:var(--gp-pen-50)!important;color:var(--gp-pen)!important}
:root:is(:root,#gp-skin) .smh-overview-icon.green{background:var(--gp-mint-50)!important;color:var(--gp-mint)!important}
:root:is(:root,#gp-skin) .smh-overview-icon.amber{background:var(--gp-marker-50)!important;color:var(--gp-marker-ink)!important}
:root:is(:root,#gp-skin) .smh-overview-search{display:flex!important;gap:8px!important;margin-top:18px!important}
:root:is(:root,#gp-skin) .smh-overview-search input{flex:1;min-width:0}
:root:is(:root,#gp-skin) .smh-overview-link{color:inherit!important}
:root:is(:root,#gp-skin) .smh-overview-card.amber:hover{border-color:#F4DE9C!important}

/* tables */
:root:is(:root,#gp-skin) .smh-table-wrap{border:1px solid var(--gp-line)!important;border-radius:16px!important;background:#fff}
:root:is(:root,#gp-skin) :is(.smh-portal-inner,.sqm-wrap) table{font-size:15px!important}
:root:is(:root,#gp-skin) :is(.smh-portal-inner,.sqm-wrap) th{background:#F6F7FC!important;color:var(--gp-muted)!important;font-weight:700!important;font-size:13px!important;text-transform:none!important;letter-spacing:0!important;border-bottom:1px solid var(--gp-line)!important}
:root:is(:root,#gp-skin) :is(.smh-portal-inner,.sqm-wrap) td{border-bottom:1px solid #EEF0F7!important}
:root:is(:root,#gp-skin) :is(.smh-portal-inner,.sqm-wrap) tbody tr:nth-child(even){background:#FAFBFE!important}
:root:is(:root,#gp-skin) :is(.smh-portal-inner,.sqm-wrap) tbody tr:hover{background:var(--gp-pen-50)!important}
:root:is(:root,#gp-skin) .smh-student-link{color:var(--gp-pen)!important;font-weight:700!important;text-decoration:none!important}
:root:is(:root,#gp-skin) .smh-student-link:hover{text-decoration:underline!important;text-underline-offset:3px}
:root:is(:root,#gp-skin) .smh-tag,:root:is(:root,#gp-skin) .sq-tag{display:inline-flex!important;align-items:center;gap:6px;width:fit-content;background:var(--gp-pen-50)!important;color:var(--gp-pen)!important;border-radius:999px!important;padding:4px 11px!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.02em!important}
:root:is(:root,#gp-skin) .smh-alert{border-radius:var(--gp-r-ctl)!important;background:var(--gp-mint-50)!important;color:#075E4B!important;border:1px solid #BFE7D9}
:root:is(:root,#gp-skin) .smh-report-generator{background:var(--gp-pen-50)!important;border:1px solid var(--gp-pen-100)!important;border-radius:var(--gp-r-card)!important}
:root:is(:root,#gp-skin) .smh-report-option{border-color:var(--gp-line)!important;border-radius:14px!important}
:root:is(:root,#gp-skin) :is(.smh-class-grid article){border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-card)!important;box-shadow:var(--gp-shadow-1)!important}
:root:is(:root,#gp-skin) .smh-class-badge{background:var(--gp-pen-50)!important;color:var(--gp-pen)!important;border-radius:14px!important}
:root:is(:root,#gp-skin) .smh-class-link{color:var(--gp-ink)!important;font-family:var(--gp-font-display)!important;font-weight:700!important}

/* student row controls: compact, consistent outline buttons; colour carries meaning, not bulk */
:root:is(:root,#gp-skin) .smh-roster-actions .smh-actions{display:flex!important;flex-wrap:wrap!important;gap:6px!important;align-items:center}
:root:is(:root,#gp-skin) .smh-roster-actions .smh-actions form{display:inline-flex;margin:0}
:root:is(:root,#gp-skin) .smh-roster-actions :is(.smh-btn,.smh-btn.smh-btn-warn,.smh-btn.smh-btn-danger){
  min-height:34px!important;height:34px;padding:0 12px!important;border-radius:9px!important;
  font:600 13px/1 var(--gp-font-text)!important;letter-spacing:0;white-space:nowrap;
  background:#fff!important;color:var(--gp-ink)!important;border:1px solid var(--gp-border)!important;box-shadow:none!important;transform:none!important}
:root:is(:root,#gp-skin) .smh-roster-actions .smh-btn:hover{background:var(--gp-pen-50)!important;border-color:var(--gp-pen-200)!important;color:var(--gp-pen)!important}
:root:is(:root,#gp-skin) .smh-roster-actions .smh-btn.smh-btn-warn{color:var(--gp-amber)!important;border-color:#EBCB95!important}
:root:is(:root,#gp-skin) .smh-roster-actions .smh-btn.smh-btn-warn:hover{background:var(--gp-amber-50)!important;border-color:var(--gp-amber)!important;color:var(--gp-amber)!important}
:root:is(:root,#gp-skin) .smh-roster-actions .smh-btn.smh-btn-danger{color:var(--gp-rose)!important;border-color:#F0C3C5!important}
:root:is(:root,#gp-skin) .smh-roster-actions .smh-btn.smh-btn-danger:hover{background:var(--gp-rose-50)!important;border-color:var(--gp-rose)!important;color:var(--gp-rose)!important}
:root:is(:root,#gp-skin) .smh-roster-actions .smh-student-delete-form .smh-btn.smh-btn-danger{background:var(--gp-rose)!important;color:#fff!important;border-color:var(--gp-rose)!important}
:root:is(:root,#gp-skin) .smh-roster-actions .smh-student-delete-form .smh-btn.smh-btn-danger:hover{background:#B42E35!important;border-color:#B42E35!important;color:#fff!important}
:root:is(:root,#gp-skin) .smh-native-platform.smh-portal-page:has(.smh-portal-header) .smh-roster-actions :is(.smh-btn,.smh-btn-danger,.smh-btn-warn):is(:hover,:focus-visible,:active){transform:none!important}
:root:is(:root,#gp-skin) .smh-create-student{border-top:3px solid var(--gp-pen)!important}
:root:is(:root,#gp-skin) .smh-create-student form.smh-row{display:grid!important;grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1.7fr) minmax(0,1.3fr) auto;gap:12px!important;align-items:end}
:root:is(:root,#gp-skin) .smh-create-student form.smh-row label{min-width:0!important}
:root:is(:root,#gp-skin) .smh-create-student form.smh-row .smh-btn{min-height:46px!important}
@media (max-width:900px){:root:is(:root,#gp-skin) .smh-create-student form.smh-row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){:root:is(:root,#gp-skin) .smh-create-student form.smh-row{grid-template-columns:1fr}}

/* sub-panels inside a card (unlock / redo / class tools) */
:root:is(:root,#gp-skin) .smh-card .smh-card,:root:is(:root,#gp-skin) .smh-card :is(.smh-grid > section,.smh-grid > article,.smh-grid > form.smh-card){box-shadow:none!important;border-color:var(--gp-line)!important;border-radius:16px!important;background:#FBFBFE!important}

/* standalone print-centre heading + debug badge */
:root:is(:root,#gp-skin) .smh-version-badge,:root:is(:root,#gp-skin) .smh-force-version{display:none!important}
:root:is(:root,#gp-skin) .smh-standalone-print-head{display:flex;align-items:center;gap:18px;padding:22px 26px!important;margin-bottom:20px!important;border-radius:var(--gp-r-card);
  background:var(--gp-band-quiet)!important;background-size:520px 100%,cover!important;background-repeat:no-repeat!important;background-position:right center,center!important}
:root:is(:root,#gp-skin) .smh-standalone-print-head h1{color:#fff!important;font-size:28px!important;margin:4px 0 2px!important}
:root:is(:root,#gp-skin) .smh-standalone-print-head .smh-muted{color:rgba(255,255,255,.78)!important}
:root:is(:root,#gp-skin) .smh-standalone-print-head .smh-tag{background:var(--gp-marker)!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) .smh-standalone-print-head .smh-btn{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.25)!important;color:#fff!important;order:2;margin-left:auto}
:root:is(:root,#gp-skin) .smh-standalone-print-head .smh-btn:hover{background:#fff!important;color:var(--gp-ink)!important}

/* print-centre list (screen controls only — the printed paper keeps its own styling) */
:root:is(:root,#gp-skin) #smh-modern-print-root .print-controls{padding:18px!important}
:root:is(:root,#gp-skin) #smh-modern-print-root .print-list > article{border:1px solid var(--gp-line)!important;border-radius:18px!important;box-shadow:var(--gp-shadow-1)!important;background:#fff!important;transition:box-shadow .15s,border-color .15s}
:root:is(:root,#gp-skin) #smh-modern-print-root .print-list > article:hover{border-color:var(--gp-pen-200)!important;box-shadow:var(--gp-shadow-2)!important}
:root:is(:root,#gp-skin) #smh-modern-print-root .print-list > article h3,:root:is(:root,#gp-skin) #smh-modern-print-root .print-list > article h2{font-family:var(--gp-font-display)!important;font-weight:700!important;color:var(--gp-ink)!important;font-size:1.25rem!important;letter-spacing:-.015em!important}
:root:is(:root,#gp-skin) #smh-modern-print-root .print-list > article :is(p,span).uppercase{text-transform:none!important;letter-spacing:.01em!important;font-weight:700!important;color:var(--gp-pen)!important}
:root:is(:root,#gp-skin) #smh-modern-print-root .print-list button{border-radius:var(--gp-r-ctl)!important;font-weight:700!important;font-family:var(--gp-font-text)!important}
:root:is(:root,#gp-skin) #smh-modern-print-root .print-list button[class*="bg-"]:not([class*="bg-white"]){background:var(--gp-ink)!important;color:#fff!important}
:root:is(:root,#gp-skin) #smh-modern-print-root .print-list button[class*="bg-"]:not([class*="bg-white"]):hover{background:var(--gp-pen)!important}
:root:is(:root,#gp-skin) #smh-modern-print-root .print-list button[class*="border"]:is([class*="bg-white"],:not([class*="bg-"])){border:1.5px solid var(--gp-border)!important;color:var(--gp-ink)!important}

/* ───────────────────────── 8. Secure quiz centre ───────────────────────── */
:root:is(:root,#gp-skin) .sqm-head-inner,:root:is(:root,#gp-skin) .sq-head{padding-top:18px!important;padding-bottom:18px!important}
:root:is(:root,#gp-skin) .sqm-kicker{color:var(--gp-pen)!important;text-transform:none!important;letter-spacing:.01em!important;font-size:13px!important;font-weight:700!important}
:root:is(:root,#gp-skin) .sqm-panel fieldset label{border:1px solid var(--gp-line)!important;border-radius:12px!important;background:#fff!important}
:root:is(:root,#gp-skin) .sqm-panel fieldset label:has(input:checked){border-color:var(--gp-pen)!important;background:var(--gp-pen-50)!important}
:root:is(:root,#gp-skin) :is(.sqm-wrap,.sq-main) :is(.sqm-empty,.sq-list > .sq-muted:only-child){
  border:1.5px dashed var(--gp-border)!important;background:#FBFBFE!important;border-radius:16px!important;padding:32px!important;text-align:center;color:var(--gp-muted)!important}
:root:is(:root,#gp-skin) .sq-main{max-width:1040px!important}
:root:is(:root,#gp-skin) .sq-card h1{font-size:1.75rem!important;margin:6px 0 2px!important}
:root:is(:root,#gp-skin) .sq-card .sq-row{align-items:flex-start!important}
:root:is(:root,#gp-skin) .sq-card .sq-row > .sq-tag{background:var(--gp-marker-50)!important;color:var(--gp-marker-ink)!important}
:root:is(:root,#gp-skin) .sq-shell .sq-head{border-bottom:0!important}

/* ───────────────────────── 9. Grade 10 workspace (standalone document) ───────────────────────── */
:root:is(:root,#gp-skin) [data-gp-app=grade10]{
  --navy:#1D1B4C;--blue:#2B2870;--teal:#0B8F72;--gold:#FFC93C;--ink:#22233A;--muted:#575A76;--paper:#F4F5FB;--line:#E2E4F2;--shadow:0 2px 4px rgba(29,27,76,.05),0 18px 44px rgba(29,27,76,.12)}
:root:is(:root,#gp-skin) [data-gp-app=grade10] :is(h1,h2,h3,h4,.domain-hero h2,.part-intro h3,.domain-entry-copy h2){font-family:var(--gp-font-display)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .review-top{background:#fff;border:1px solid var(--gp-line);border-radius:var(--gp-r-card);padding:10px 12px;box-shadow:var(--gp-shadow-1)}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .back{border-radius:999px!important;border:1.5px solid var(--gp-border)!important;color:var(--gp-ink)!important;font-weight:700!important;background:#fff!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .back:hover{border-color:var(--gp-rose)!important;color:var(--gp-rose)!important;background:var(--gp-rose-50)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .mode{background:var(--gp-marker-50)!important;color:var(--gp-marker-ink)!important;border-radius:999px!important;font-weight:700!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .dashboard{border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-shell)!important;box-shadow:var(--gp-shadow-2)!important;overflow:hidden;background:#fff!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .sidebar{background:var(--gp-band-img)!important;background-size:520px 140px,cover!important;background-position:left bottom,center!important;background-repeat:no-repeat!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .sidebar h2{color:#fff!important;font-size:22px!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .sidebar p{color:rgba(255,255,255,.72)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .sidebar .nav-item{font-family:var(--gp-font-text)!important;font-weight:600!important;color:rgba(255,255,255,.86)!important;text-decoration:none!important;border-radius:12px!important;background:transparent!important;min-height:44px;display:flex!important;align-items:center}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .sidebar .nav-item:hover{background:rgba(255,255,255,.1)!important;color:#fff!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .sidebar .nav-item.active{background:#fff!important;color:var(--gp-ink)!important;box-shadow:inset 4px 0 0 var(--gp-marker)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .workspace{background:#FBFBFE!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .student-welcome{background:#fff!important;border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-card)!important;box-shadow:var(--gp-shadow-1)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .student-welcome h2{color:var(--gp-ink)!important;font-size:clamp(1.5rem,2.6vw,2rem)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .stat{background:#fff!important;border:1px solid var(--gp-line)!important;border-radius:18px!important;box-shadow:var(--gp-shadow-1)!important;position:relative;overflow:hidden}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .stat::before{content:"";position:absolute;left:16px;top:0;width:32px;height:4px;border-radius:0 0 4px 4px;background:var(--gp-mint)}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .stat small{color:var(--gp-muted)!important;font-weight:700!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .stat strong{font-family:var(--gp-font-display)!important;font-weight:700!important;color:var(--gp-ink)!important;font-size:22px!important;line-height:1.2!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .panel{background:#fff!important;border:1px solid var(--gp-line)!important;border-radius:var(--gp-r-card)!important;box-shadow:var(--gp-shadow-1)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .panel > h3{font-size:1.375rem!important;color:var(--gp-ink)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .foundation-roadmap:before{background:repeating-linear-gradient(to bottom,var(--gp-mint) 0 10px,transparent 10px 16px)!important;width:3px!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .road-card{border:1px solid var(--gp-line)!important;border-radius:18px!important;box-shadow:var(--gp-shadow-1)!important;background:#fff!important;min-height:0!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .road-card.available:hover{border-color:var(--gp-mint)!important;box-shadow:var(--gp-shadow-2)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .road-card strong{font-family:var(--gp-font-display)!important;font-weight:700!important;color:var(--gp-ink)!important;font-size:19px!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .road-card small{color:var(--gp-muted)!important;font-size:14.5px!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .road-card .domain-label{color:var(--gp-mint)!important;text-transform:none!important;letter-spacing:.01em!important;font-size:13px!important;font-weight:700!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .road-card .open-label{color:var(--gp-pen)!important;font-weight:700!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .road-number{background:var(--gp-ink)!important;color:#fff!important;box-shadow:0 0 0 5px #fff,0 0 0 6px var(--gp-line)!important;font-family:var(--gp-font-display)!important;font-weight:700!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .road-number .math-typeset,:root:is(:root,#gp-skin) [data-gp-app=grade10] .road-number .katex{font-family:var(--gp-font-display)!important;font-style:normal!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .diagnostic-stop{border:1px solid var(--gp-line)!important;border-radius:18px!important;box-shadow:var(--gp-shadow-1)!important;background:var(--gp-marker-50)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .diagnostic-stop b{background:var(--gp-ink)!important;color:var(--gp-marker)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .diagnostic-stop strong{font-family:var(--gp-font-display)!important;font-weight:700!important;color:var(--gp-ink)!important;font-size:18px!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .foundation-roadmap > :last-child:is(span,div,strong,b){background:var(--gp-ink)!important}
:root:is(:root,#gp-skin) [data-gp-app=grade10] .question,:root:is(:root,#gp-skin) [data-gp-app=grade10] .lesson-section{border-color:var(--gp-line)!important;border-radius:var(--gp-r-card)!important}

/* ───────────────────────── 10. Small screens ───────────────────────── */
@media (max-width:760px){
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .sat-role-heading{grid-template-columns:1fr;text-align:left}
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .sat-role-heading-image{display:none!important}
  :root:is(:root,#gp-skin) :is(.smh-portal-header-inner,.sqm-head-inner){flex-wrap:wrap!important;padding:16px!important}
  :root:is(:root,#gp-skin) .smh-header-actions{width:100%;display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;gap:8px!important;padding-bottom:2px}
  :root:is(:root,#gp-skin) .smh-portal-brand{align-items:flex-start!important;text-align:left!important}
  :root:is(:root,#gp-skin) .smh-brand-copy{text-align:left!important}
  :root:is(:root,#gp-skin) .smh-staff-identity{justify-content:flex-start!important}
  /* roadmap: keep the map legible and let students swipe across it */
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-panel{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-canvas{min-width:760px}
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-hero{background:var(--gp-band-quiet)!important;background-size:cover,cover!important}
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-heading{background:var(--gp-band-quiet)!important;background-size:cover,cover!important;position:sticky;left:0}
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .roadmap-heading::after{content:"Swipe the map to see every stop →";display:block;margin-top:8px;color:var(--gp-marker);font-size:13px;font-weight:700}
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header-inner{flex-wrap:wrap;gap:10px;padding:12px 16px!important}
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header-inner p.text-xs{display:none}
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header-inner h1{font-size:17px!important}
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header-inner .rounded-full.bg-\[\#eef2ff\]{padding:6px 12px!important;font-size:12.5px!important}
  :root:is(:root,#gp-skin) .smh-header-action{flex:0 0 auto}
  :root:is(:root,#gp-skin) .smh-header-action.smh-plain{margin-left:0}
  :root:is(:root,#gp-skin) .smh-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  :root:is(:root,#gp-skin) .smh-stat strong{font-size:32px!important}
  :root:is(:root,#gp-skin) .smh-print-center-launch{flex-wrap:wrap}
  :root:is(:root,#gp-skin) .smh-print-center-launch b{margin-left:0;width:100%;text-align:center}
  :root:is(:root,#gp-skin) .smh-standalone-print-head{flex-direction:column;align-items:flex-start!important}
  :root:is(:root,#gp-skin) .smh-standalone-print-head .smh-btn{margin-left:0;order:0}
  :root:is(:root,#gp-skin) .smh-side-nav a.smh-modern-nav-link:first-of-type{margin-left:0!important}
  :root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header .math-symbols.text-indigo-200{display:none!important}
  :root:is(:root,#gp-skin) :is(.smh-portal-header,.sqm-head,.sq-head),:root:is(:root,#gp-skin) :is(#sat-math-practice-root,[data-slot=dialog-content]) .student-header{background-size:360px 100%,cover!important}
  :root:is(:root,#gp-skin) [data-gp-app=grade10] .review-top{padding:8px}
}
@media (max-width:480px){
  :root:is(:root,#gp-skin) .smh-shell:has(.smh-login-card),:root:is(:root,#gp-skin) .smh-portal-page:has(.smh-login-card) .smh-portal-inner{padding-left:max(16px,env(safe-area-inset-left,0px))!important;padding-right:max(16px,env(safe-area-inset-right,0px))!important;padding-top:20px!important}
  :root:is(:root,#gp-skin) .smh-stat{padding:14px!important}
  :root:is(:root,#gp-skin) .smh-overview-search{flex-direction:column}
}
} /* end @media screen */

@media (prefers-reduced-motion:reduce){
  :root:is(:root,#gp-skin) *,:root:is(:root,#gp-skin) *::before,:root:is(:root,#gp-skin) *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ───────────── 4.1.5 Button system: consistent colours and icons ───────────── */
:root:is(:root,#gp-skin) :is(.smh-btn):where(:not(.smh-btn-danger):not(.smh-btn-warn):not(.secondary):not(.smh-btn-soft):not([style*="background"])){background:linear-gradient(180deg,#5A4FE6,var(--gp-pen))!important;border:1px solid var(--gp-pen)!important;color:#fff!important;box-shadow:0 6px 14px -6px rgba(75,63,216,.55),inset 0 1px 0 rgba(255,255,255,.18)!important}
:root:is(:root,#gp-skin) :is(.smh-btn):where(:not(.smh-btn-danger):not(.smh-btn-warn):not(.secondary):not(.smh-btn-soft):not([style*="background"])):is(:hover,:focus-visible){background:linear-gradient(180deg,#4B3FD8,var(--gp-pen-hover))!important;box-shadow:0 10px 20px -8px rgba(75,63,216,.65)!important;transform:translateY(-1px)}
:root:is(:root,#gp-skin) :is(.smh-btn.smh-btn-warn,.smh-btn-warn.gp-ico){background:var(--gp-amber-50)!important;border:1px solid #F0CF93!important;color:#8A4B00!important;box-shadow:none!important}
:root:is(:root,#gp-skin) :is(.smh-btn.smh-btn-warn,.smh-btn-warn.gp-ico):is(:hover,:focus-visible){background:var(--gp-amber)!important;border-color:var(--gp-amber)!important;color:#fff!important;transform:translateY(-1px)}
:root:is(:root,#gp-skin) :is(.smh-btn.smh-btn-danger,.smh-btn-danger.gp-ico){background:var(--gp-rose-50)!important;border:1px solid #F2BFC2!important;color:#B4232C!important;box-shadow:none!important}
:root:is(:root,#gp-skin) :is(.smh-btn.smh-btn-danger,.smh-btn-danger.gp-ico):is(:hover,:focus-visible){background:var(--gp-rose)!important;border-color:var(--gp-rose)!important;color:#fff!important;transform:translateY(-1px)}
:root:is(:root,#gp-skin) :is(.smh-delete-review,.smh-student-delete-form) .smh-btn.smh-btn-danger.smh-btn-danger{background:var(--gp-rose)!important;border-color:var(--gp-rose)!important;color:#fff!important}
:root:is(:root,#gp-skin) :is(.smh-delete-review,.smh-student-delete-form) .smh-btn.smh-btn-danger.smh-btn-danger:hover{color:#fff!important;background:#B42E35!important;border-color:#B42E35!important}
:root:is(:root,#gp-skin) .smh-reset-tools > form:last-of-type,:root:is(:root,#gp-skin) section:has(> form > input[value="smh_cleanup_backup"]) > form:last-of-type{margin-top:14px}
:root:is(:root,#gp-skin) .smh-dashboard-section form:is(.smh-row,.smh-grid) > .smh-btn{align-self:end!important}
:root:is(:root,#gp-skin) .smh-dashboard-section p:has(> a.smh-btn:only-child){margin:6px 0 16px}
:root:is(:root,#gp-skin) .smh-btn[style*="#047857"]{background:linear-gradient(180deg,#12A383,var(--gp-mint))!important;box-shadow:0 6px 14px -6px rgba(11,143,114,.55)!important}
:root:is(:root,#gp-skin) .smh-btn.gp-ico::before{content:"";flex:0 0 auto;width:17px;height:17px;background:currentColor;-webkit-mask:var(--gp-ico) center/contain no-repeat;mask:var(--gp-ico) center/contain no-repeat}
:root:is(:root,#gp-skin) .smh-dashboard-section form > .smh-btn,:root:is(:root,#gp-skin) .smh-dashboard-section form .smh-actions .smh-btn{width:auto!important;justify-self:start;align-self:flex-start}
:root:is(:root,#gp-skin) .smh-side-nav :is(button,a):not(.is-active) .smh-svg{color:var(--gp-pen)!important;opacity:.85}
:root:is(:root,#gp-skin) .smh-side-nav :is(button,a):not(.is-active):hover .smh-svg{opacity:1}
:root:is(:root,#gp-skin) :is(.smh-overview-icon,.smh-class-badge,.smh-report-icon){transition:transform .25s ease}
:root:is(:root,#gp-skin) .gp-ico-key{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%228%22 cy=%2215%22 r=%224%22/%3E%3Cpath d=%22m10.8 12.2 9.2-9.2M17 6l3 3M14.5 8.5l2 2%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-block{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M5.6 5.6l12.8 12.8%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-check{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 12.5 9.5 18 20 6.5%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-trash{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13M10 11v6M14 11v6%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-download{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3v12M7 10l5 5 5-5M4 20h16%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-print{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M7 9V3h10v6M7 17h10v4H7z%22/%3E%3Cpath d=%22M6 17H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-refresh{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 11a8 8 0 1 0 1 5M20 4v7h-7%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-plus{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 5v14M5 12h14%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-save{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 3h11l3 3v15H5z%22/%3E%3Cpath d=%22M8 3v6h8M8 21v-7h8v7%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-search{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m20 20-4-4%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-unlock{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%2211%22 width=%2216%22 height=%2210%22 rx=%222%22/%3E%3Cpath d=%22M8 11V7a4 4 0 0 1 7.5-2%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-lock{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%224%22 y=%2211%22 width=%2216%22 height=%2210%22 rx=%222%22/%3E%3Cpath d=%22M8 11V7a4 4 0 0 1 8 0v4%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-x{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6 6 18%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-arrow{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14M13 6l6 6-6 6%22/%3E%3C/svg%3E")}
:root:is(:root,#gp-skin) .gp-ico-eye{--gp-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E")}