@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
/* Guidelines: one font family, 10-12px radius for buttons/inputs, 14-18px for cards, subtle shadows */
:root { --radius: 12px; }
body, button, input, select, textarea { font-family: "Plus Jakarta Sans", "Lexend", system-ui, sans-serif !important; }
.card, .panel, .stat, .catgrid a, .buybox, .section-card, .qcard, .libitem, .sponsored-strip, .resultbar, .filters, table { border-radius: 16px !important; }
.card { box-shadow: 0 1px 2px rgba(15, 23, 42, .06); }
.card:hover { box-shadow: 0 8px 24px -12px rgba(15, 23, 42, .25); }
.hero, .creators, .cert { border-radius: 22px !important; }
:focus-visible { outline: 3px solid var(--margin) !important; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none !important; transform: none !important; } }
/* Appearance panel + dark-mode fixes for hard-coded light colours */
.tp-btn { background: none; border: 1px solid transparent; color: inherit; font-size: 20px; line-height: 1; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.tp-btn:hover { border-color: currentColor; }
.tp-float { position: fixed; right: 16px; bottom: 16px; z-index: 70; background: var(--paper); color: var(--text); border: 1px solid var(--rule); border-radius: 50%; width: 44px; height: 44px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.tp-panel { position: fixed; right: 16px; top: 70px; z-index: 80; width: min(320px, calc(100vw - 32px)); background: var(--paper); color: var(--text); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.28); padding: 14px; font-size: 14px; }
.tp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.tp-x { background: none; border: 0; color: var(--text); font-size: 22px; cursor: pointer; }
.tp-label { color: var(--muted); font-size: 12px; margin: 10px 0 6px; }
.tp-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tp-modes button, .tp-list button { font: inherit; color: var(--text); background: var(--desk); border: 1.5px solid var(--rule); border-radius: 8px; padding: 7px 8px; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 8px; }
.tp-modes button { justify-content: center; }
.tp-modes button[aria-pressed=true], .tp-list button[aria-pressed=true] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink-soft); font-weight: 600; }
.tp-list { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.tp-sw { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1px solid rgba(0,0,0,.15); }

html[data-mode=dark] input, html[data-mode=dark] select, html[data-mode=dark] textarea { background: var(--field, var(--desk)) !important; color: var(--text) !important; border-color: var(--rule) !important; }
html[data-mode=dark] th { background: var(--bar2, #202024) !important; }
html[data-mode=dark] .qcard, html[data-mode=dark] .section-card, html[data-mode=dark] .adslot a, html[data-mode=dark] .tabs button, html[data-mode=dark] .restabs a, html[data-mode=dark] .suggest, html[data-mode=dark] .wish, html[data-mode=dark] dialog { background: var(--paper) !important; color: var(--text) !important; }
html[data-mode=dark] .hero, html[data-mode=dark] .sheet, html[data-mode=dark] .auth, html[data-mode=dark] .page { background-color: var(--paper) !important;
  background-image: linear-gradient(to right, transparent 64px, var(--margin) 64px, var(--margin) 66px, transparent 66px), repeating-linear-gradient(to bottom, var(--paper) 0, var(--paper) 39px, var(--line, #2a2a30) 39px, var(--line, #2a2a30) 40px) !important; }
html[data-mode=dark] .topbar, html[data-mode=dark] footer, html[data-mode=dark] .creators { background: var(--bar, #0b0b0e) !important; }
html[data-mode=dark] nav.cats { background: var(--bar2, #141418) !important; }
html[data-mode=dark] form.search select { background: var(--bar2, #202024) !important; }
html[data-mode=dark] img { opacity: .92; }
html[data-mode=dark] .stars i { background: linear-gradient(90deg, #e8a33d var(--pct), #3f3f46 var(--pct)); -webkit-background-clip: text; background-clip: text; }
/* text on the brand colour (white, or dark navy when the brand colour is bright in dark mode) */
html[data-mode=dark] .btn:not(.ghost):not(.danger):not(.amber):not(.red):not(.light), html[data-mode=dark] form.search button,
html[data-mode=dark] .official, html[data-mode=dark] .restabs a[aria-current=page], html[data-mode=dark] .tabs button[aria-pressed=true],
html[data-mode=dark] .pay, html[data-mode=dark] .pv-file .ext { color: var(--on-ink, #fff) !important; }
html[data-mode=dark] .btn:not(.ghost):not(.danger):not(.amber):not(.red):not(.light):hover { background: var(--ink) !important; filter: brightness(1.1); }

/* ===== Schoolfy logo (picture). --logo follows light/dark, --logo-header writes itself once on the dark top bar ===== */
.sf-logo { display: inline-block; vertical-align: middle; width: 128px; height: 32px; background: var(--logo) no-repeat left center / contain; }
.sf-logo.on-dark { background-image: var(--logo-header); }
.sf-logo.on-dark-still { background-image: var(--logo-on-dark); }
.sf-logo.big { width: 180px; height: 44px; }
.sf-logo.sm { width: 96px; height: 24px; }
.sf-logo.sf-logo-text { background: none !important; width: auto; height: auto; font-weight: 700; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.brand .sf-logo { margin-right: 4px; vertical-align: -9px; }
@media (prefers-reduced-motion: reduce) { .sf-logo.on-dark { background-image: var(--logo-on-dark); } }