/* Riso notebook: the classroom slice's look (approved mockups, 2026-09-26).
   Fluorescent riso inks on grainy white, 2px blue-black rules, squircle corners. */
@import url("https://fonts.googleapis.com/css2?family=Bowlby+One&family=Space+Mono:wght@400;700&family=Hanken+Grotesk:wght@400;600;700&family=Caveat:wght@600&display=swap");

:root {
  --ink: #1B2A6B; --blue: #0078BF; --pink: #FF48B0; --yellow: #FFE800; --green: #00A95C;
  --paper: #FAFAF6; --dash: rgba(27, 42, 107, .35);
  --r-lg: 26px; --r-md: 16px; --r-sm: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.4 "Hanken Grotesk", system-ui, sans-serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .16; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .16 0 0 0 0 .42 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E"); }
main { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 32px 40px 60px; display: flex; flex-direction: column; gap: 24px; }
a { color: var(--ink); } a:hover { color: var(--pink); }
.sq { border-radius: var(--r-lg); corner-shape: squircle; }
.mono { font-family: "Space Mono", ui-monospace, monospace; }
.display { font-family: "Bowlby One", sans-serif; font-weight: 400; }
.label { font: 700 12px "Space Mono", monospace; text-transform: uppercase; letter-spacing: .02em; }
.box { border: 2px solid var(--ink); border-radius: var(--r-lg); corner-shape: squircle; }
.box.clip { overflow: hidden; }
.bar-head { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; font: 700 13px "Space Mono", monospace; text-transform: uppercase; }
.bar-head.blue { background: var(--blue); color: var(--paper); }
.bar-head.ink { background: var(--ink); color: var(--paper); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 16px; }
.logo { font: 40px/1 "Bowlby One", sans-serif; }
.chip { font: 13px "Space Mono", monospace; border: 2px solid var(--ink); padding: 6px 10px; border-radius: var(--r-lg); corner-shape: squircle; text-transform: uppercase; }
.sticker { align-self: flex-start; font: 700 14px "Space Mono", monospace; background: var(--green); color: var(--paper); padding: 4px 10px; transform: rotate(-2deg); border-radius: var(--r-sm); corner-shape: squircle; text-transform: uppercase; }
h1.title { margin: 0; font: 400 60px/.95 "Bowlby One", sans-serif; color: var(--blue); text-transform: uppercase; }
button, .btn { font: 700 14px "Space Mono", monospace; text-transform: uppercase; color: var(--ink); background: transparent;
  border: 2px solid var(--ink); border-radius: var(--r-md); corner-shape: squircle; min-height: 46px; padding: 0 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
button.pink { background: var(--pink); } button.yellow { background: var(--yellow); } button.blue { background: var(--blue); color: var(--paper); }
button:disabled { opacity: .5; cursor: default; }
.tabs { display: inline-flex; border: 2px solid var(--ink); border-radius: var(--r-md); corner-shape: squircle; overflow: hidden; align-self: flex-start; }
.tabs a { text-decoration: none; padding: 10px 16px; font: 700 13px "Space Mono", monospace; }
.tabs a + a { border-left: 2px solid var(--ink); }
.tabs a.on { background: var(--ink); color: var(--paper); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.stat { padding: 14px 16px; }
.stat .n { font: 40px/1.1 "Bowlby One", sans-serif; }
.stat .n small { font-size: 22px; }
.stat.yellow { background: var(--yellow); } .stat.green { background: var(--green); color: var(--paper); }
.stamp { font: 700 11px "Space Mono", monospace; text-transform: uppercase; padding: 2px 6px; border: 2px solid var(--green); color: var(--green); border-radius: var(--r-sm); corner-shape: squircle; white-space: nowrap; }
.stamp.practising { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.stamp.started { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.stamp.not_started { border: none; color: var(--ink); opacity: .6; }
.meter { height: 14px; border: 2px solid var(--ink); border-radius: 8px; corner-shape: squircle; overflow: hidden; }
.meter > div { height: 100%; background: var(--pink); }
.rows > div { display: grid; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--ink); }
.rows > div:last-child { border-bottom: none; }
.empty { padding: 18px; font: 14px "Space Mono", monospace; opacity: .7; }
.cell { height: 22px; border: 2px solid var(--ink); border-radius: 8px; corner-shape: squircle; }
.cell.secure { background: var(--green); } .cell.practising { background: var(--pink); } .cell.started { background: var(--yellow); }
.cell.not_started { border: 2px dashed var(--dash); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 12px 18px;
  border-radius: var(--r-md); corner-shape: squircle; font: 700 13px "Space Mono", monospace; z-index: 5; }
.page-thumb { background: #fff; border: 2px solid var(--ink); border-radius: 18px; corner-shape: squircle; overflow: hidden; }
dialog { border: 2px solid var(--ink); border-radius: var(--r-lg); corner-shape: squircle; padding: 22px; background: var(--paper); color: var(--ink); max-width: 480px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(27, 42, 107, .35); }
dialog label { display: block; margin: 12px 0 4px; font: 700 12px "Space Mono", monospace; text-transform: uppercase; }
dialog input, dialog select, dialog textarea { width: 100%; font: 16px "Hanken Grotesk", sans-serif; padding: 10px 12px; color: var(--ink); background: #fff;
  border: 2px solid var(--ink); border-radius: 12px; corner-shape: squircle; }
dialog .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 640px) {
  main { padding: 20px 16px 48px; }
  h1.title { font-size: 40px; }
  .stats { grid-template-columns: 1fr 1fr; }
}