@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: #0f0f12 !important; color: var(--text) !important; border-color: var(--rule) !important; }
html[data-mode=dark] th { background: #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, #2a2a30 39px, #2a2a30 40px) !important; }
html[data-mode=dark] .topbar, html[data-mode=dark] footer, html[data-mode=dark] .creators { background: #0b0b0e !important; }
html[data-mode=dark] nav.cats { background: #141418 !important; }
html[data-mode=dark] form.search select { background: #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; }