@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&family=Courier+Prime:wght@400;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Space+Mono:wght@400;700&family=Playfair+Display:wght@400;600;700&family=Alegreya:wght@400;500;700&family=Quicksand:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600;700&family=Orbitron:wght@400;600;700&family=Share+Tech+Mono&family=VT323&family=Kalam:wght@400;700&display=swap');

:root{
  --paper: #F1E8D6;
  --paper-dark: #E3D6B6;
  --paper-shadow: #cbb98f;
  --ink: #241f16;
  --ink-soft: #4a4331;
  --burgundy: #6d2432;
  --burgundy-deep: #4d1521;
  --brass: #93702f;
  --brass-light: #b48f4c;
  --forest: #2f3b2e;
  --error: #8a3226;
  --good: #3c5c3f;
  --emerald: #2f9e5c;
  --emerald-deep: #227a45;
  --sapphire: #003153;
  --sapphire-deep: #00213a;
  --sapphire-tint: rgba(0,49,83,0.08);
  --rule: rgba(36,31,22,0.16);
  --on-accent: #F1E8D6;
  --glow-1: rgba(255,255,255,0.35);
  --glow-2: rgba(0,0,0,0.05);
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-mono: 'Courier Prime', monospace;
  --radius: 3px;
}

/* Midnight — the antique room after dark. Same bones, low light. */
/* Aurora — green/violet night sky over a pine ridge, deep navy panels. */
html[data-theme="aurora"]{
  --paper: #0a0f22;
  --paper-dark: #131b36;
  --paper-shadow: #060911;
  --ink: #EDEFFC;
  --ink-soft: #A6ADD6;
  --burgundy: #F04FA0;
  --burgundy-deep: #C63A82;
  --brass: #3FE0A5;
  --brass-light: #7CF2C4;
  --forest: #7C5CFC;
  --error: #FF5C7A;
  --good: #3FE0A5;
  --emerald: #34D399;
  --emerald-deep: #22B27E;
  --sapphire: #161d3f;
  --sapphire-deep: #0e1430;
  --sapphire-tint: rgba(124,92,252,0.14);
  --rule: rgba(214,214,255,0.16);
  --on-accent: #F5F3FF;
  --glow-1: rgba(124,92,252,0.16);
  --glow-2: rgba(52,211,153,0.10);
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 16px;
}
html[data-theme="aurora"] body{
  background:
    radial-gradient(ellipse 70% 45% at 18% -5%, rgba(124,92,252,0.40), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 5%, rgba(52,211,153,0.32), transparent 60%),
    radial-gradient(ellipse 80% 50% at 50% 105%, rgba(240,79,160,0.16), transparent 65%),
    linear-gradient(180deg, #060a18 0%, #0a0f22 30%, #0d1330 65%, #0a0f22 100%);
  background-attachment: fixed, fixed, fixed, fixed;
}
html[data-theme="aurora"] body::before{
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0; height: 240px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22480%22%20height%3D%22240%22%20viewBox%3D%220%200%20480%20240%22%3E%3Cpath%20d%3D%22M20%20132.0%20L7.4%20167.4%20L32.6%20167.4%20Z%20M20%20153.9%20L-0.4%20189.3%20L40.4%20189.3%20Z%20M20%20175.8%20L-8.2%20211.2%20L48.2%20211.2%20Z%20M15.5%20211.2%20L24.5%20211.2%20L24.5%20222.0%20L15.5%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M70%20152.0%20L60.2%20179.5%20L79.8%20179.5%20Z%20M70%20169.1%20L54.2%20196.6%20L85.8%20196.6%20Z%20M70%20186.1%20L48.1%20213.6%20L91.9%20213.6%20Z%20M66.5%20213.6%20L73.5%20213.6%20L73.5%20222.0%20L66.5%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M120%20122.0%20L106.0%20161.3%20L133.9%20161.3%20Z%20M120%20146.4%20L97.4%20185.6%20L142.6%20185.6%20Z%20M120%20170.7%20L88.7%20210.0%20L151.3%20210.0%20Z%20M115.0%20210.0%20L125.0%20210.0%20L125.0%20222.0%20L115.0%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M175%20142.0%20L163.8%20173.4%20L186.2%20173.4%20Z%20M175%20161.5%20L156.9%20192.9%20L193.1%20192.9%20Z%20M175%20181.0%20L150.0%20212.4%20L200.0%20212.4%20Z%20M171.0%20212.4%20L179.0%20212.4%20L179.0%20222.0%20L171.0%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M230%20127.0%20L216.7%20164.3%20L243.3%20164.3%20Z%20M230%20150.1%20L208.5%20187.5%20L251.5%20187.5%20Z%20M230%20173.3%20L200.3%20210.6%20L259.7%20210.6%20Z%20M225.3%20210.6%20L234.7%20210.6%20L234.7%20222.0%20L225.3%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M285%20147.0%20L274.5%20176.5%20L295.5%20176.5%20Z%20M285%20165.3%20L268.0%20194.7%20L302.0%20194.7%20Z%20M285%20183.5%20L261.5%20213.0%20L308.5%20213.0%20Z%20M281.3%20213.0%20L288.7%20213.0%20L288.7%20222.0%20L281.3%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M340%20117.0%20L325.4%20158.2%20L354.6%20158.2%20Z%20M340%20142.6%20L316.2%20183.8%20L363.8%20183.8%20Z%20M340%20168.2%20L307.1%20209.4%20L372.9%20209.4%20Z%20M334.8%20209.4%20L345.2%20209.4%20L345.2%20222.0%20L334.8%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M395%20137.0%20L383.1%20170.4%20L406.9%20170.4%20Z%20M395%20157.7%20L375.8%20191.1%20L414.2%20191.1%20Z%20M395%20178.4%20L368.4%20211.8%20L421.6%20211.8%20Z%20M390.8%20211.8%20L399.2%20211.8%20L399.2%20222.0%20L390.8%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M450%20130.0%20L437.2%20166.1%20L462.8%20166.1%20Z%20M450%20152.4%20L429.2%20188.6%20L470.8%20188.6%20Z%20M450%20174.8%20L421.2%20211.0%20L478.8%20211.0%20Z%20M445.4%20211.0%20L454.6%20211.0%20L454.6%20222.0%20L445.4%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M0%20110.0%20L-18.1%20161.1%20L18.1%20161.1%20Z%20M0%20141.7%20L-29.4%20192.7%20L29.4%20192.7%20Z%20M0%20173.3%20L-40.7%20224.4%20L40.7%20224.4%20Z%20M-6.4%20224.4%20L6.4%20224.4%20L6.4%20240.0%20L-6.4%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M45%20140.0%20L31.0%20179.3%20L59.0%20179.3%20Z%20M45%20164.4%20L22.4%20203.6%20L67.6%20203.6%20Z%20M45%20188.7%20L13.7%20228.0%20L76.3%20228.0%20Z%20M40.0%20228.0%20L50.0%20228.0%20L50.0%20240.0%20L40.0%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M100%2095.0%20L79.8%20152.0%20L120.2%20152.0%20Z%20M100%20130.3%20L67.2%20187.3%20L132.8%20187.3%20Z%20M100%20165.6%20L54.6%20222.6%20L145.4%20222.6%20Z%20M92.8%20222.6%20L107.2%20222.6%20L107.2%20240.0%20L92.8%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M150%20125.0%20L134.0%20170.2%20L166.0%20170.2%20Z%20M150%20153.0%20L124.0%20198.2%20L176.0%20198.2%20Z%20M150%20181.0%20L114.0%20226.2%20L186.0%20226.2%20Z%20M144.3%20226.2%20L155.7%20226.2%20L155.7%20240.0%20L144.3%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M210%2090.0%20L189.1%20148.9%20L230.9%20148.9%20Z%20M210%20126.5%20L176.1%20185.5%20L243.9%20185.5%20Z%20M210%20163.1%20L163.0%20222.0%20L257.0%20222.0%20Z%20M202.6%20222.0%20L217.4%20222.0%20L217.4%20240.0%20L202.6%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M260%20135.0%20L245.4%20176.2%20L274.6%20176.2%20Z%20M260%20160.6%20L236.2%20201.8%20L283.8%20201.8%20Z%20M260%20186.2%20L227.1%20227.4%20L292.9%20227.4%20Z%20M254.8%20227.4%20L265.2%20227.4%20L265.2%20240.0%20L254.8%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M320%20100.0%20L300.5%20155.0%20L339.5%20155.0%20Z%20M320%20134.1%20L288.3%20189.1%20L351.7%20189.1%20Z%20M320%20168.2%20L276.2%20223.2%20L363.8%20223.2%20Z%20M313.1%20223.2%20L326.9%20223.2%20L326.9%20240.0%20L313.1%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M375%20120.0%20L358.3%20167.1%20L391.7%20167.1%20Z%20M375%20149.2%20L347.8%20196.4%20L402.2%20196.4%20Z%20M375%20178.5%20L337.4%20225.6%20L412.6%20225.6%20Z%20M369.0%20225.6%20L381.0%20225.6%20L381.0%20240.0%20L369.0%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M430%2090.0%20L409.1%20148.9%20L450.9%20148.9%20Z%20M430%20126.5%20L396.1%20185.5%20L463.9%20185.5%20Z%20M430%20163.1%20L383.0%20222.0%20L477.0%20222.0%20Z%20M422.6%20222.0%20L437.4%20222.0%20L437.4%20240.0%20L422.6%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M470%20130.0%20L454.7%20173.2%20L485.3%20173.2%20Z%20M470%20156.8%20L445.1%20200.0%20L494.9%20200.0%20Z%20M470%20183.6%20L435.6%20226.8%20L504.4%20226.8%20Z%20M464.5%20226.8%20L475.5%20226.8%20L475.5%20240.0%20L464.5%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: 480px 240px;
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}
html[data-theme="aurora"] .wrap{ position: relative; z-index: 1; }
html[data-theme="aurora"] .masthead,
html[data-theme="aurora"] .card,
html[data-theme="aurora"] .settings-modal{
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -14px rgba(0,0,0,0.65), 0 0 0 1px rgba(124,92,252,0.06);
}
html[data-theme="aurora"] .subject-tile{ border-style: dashed; }

/* Aurora — light mode (Dusk): warm coral/gold horizon meeting green-violet sky, dark navy-plum panels. */
html[data-theme="aurora-dusk"]{
  --paper: #150f1f;
  --paper-dark: #1c1730;
  --paper-shadow: #0c0814;
  --ink: #F5ECE3;
  --ink-soft: #B9A9C9;
  --burgundy: #FF7A59;
  --burgundy-deep: #E0603F;
  --brass: #F2B705;
  --brass-light: #F7D34D;
  --forest: #8B5CF6;
  --error: #FF5C7A;
  --good: #F2B705;
  --emerald: #34D399;
  --emerald-deep: #22B27E;
  --sapphire: #241a3a;
  --sapphire-deep: #180f2b;
  --sapphire-tint: rgba(242,183,5,0.10);
  --rule: rgba(245,236,227,0.14);
  --on-accent: #F5ECE3;
  --glow-1: rgba(242,183,5,0.12);
  --glow-2: rgba(139,92,246,0.14);
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 16px;
}
html[data-theme="aurora-dusk"] body{
  background:
    radial-gradient(ellipse 70% 40% at 20% 0%, rgba(139,92,246,0.35), transparent 60%),
    radial-gradient(ellipse 60% 35% at 82% 8%, rgba(52,211,153,0.16), transparent 60%),
    radial-gradient(ellipse 90% 55% at 50% 115%, rgba(242,122,58,0.30), transparent 65%),
    linear-gradient(180deg, #0d0a18 0%, #150f1f 35%, #241531 70%, #2c1420 100%);
  background-attachment: fixed, fixed, fixed, fixed;
}
html[data-theme="aurora-dusk"] body::before{
  content: "";
  position: fixed; left: 0; right: 0; bottom: 0; height: 240px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22480%22%20height%3D%22240%22%20viewBox%3D%220%200%20480%20240%22%3E%3Cpath%20d%3D%22M20%20132.0%20L7.4%20167.4%20L32.6%20167.4%20Z%20M20%20153.9%20L-0.4%20189.3%20L40.4%20189.3%20Z%20M20%20175.8%20L-8.2%20211.2%20L48.2%20211.2%20Z%20M15.5%20211.2%20L24.5%20211.2%20L24.5%20222.0%20L15.5%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M70%20152.0%20L60.2%20179.5%20L79.8%20179.5%20Z%20M70%20169.1%20L54.2%20196.6%20L85.8%20196.6%20Z%20M70%20186.1%20L48.1%20213.6%20L91.9%20213.6%20Z%20M66.5%20213.6%20L73.5%20213.6%20L73.5%20222.0%20L66.5%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M120%20122.0%20L106.0%20161.3%20L133.9%20161.3%20Z%20M120%20146.4%20L97.4%20185.6%20L142.6%20185.6%20Z%20M120%20170.7%20L88.7%20210.0%20L151.3%20210.0%20Z%20M115.0%20210.0%20L125.0%20210.0%20L125.0%20222.0%20L115.0%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M175%20142.0%20L163.8%20173.4%20L186.2%20173.4%20Z%20M175%20161.5%20L156.9%20192.9%20L193.1%20192.9%20Z%20M175%20181.0%20L150.0%20212.4%20L200.0%20212.4%20Z%20M171.0%20212.4%20L179.0%20212.4%20L179.0%20222.0%20L171.0%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M230%20127.0%20L216.7%20164.3%20L243.3%20164.3%20Z%20M230%20150.1%20L208.5%20187.5%20L251.5%20187.5%20Z%20M230%20173.3%20L200.3%20210.6%20L259.7%20210.6%20Z%20M225.3%20210.6%20L234.7%20210.6%20L234.7%20222.0%20L225.3%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M285%20147.0%20L274.5%20176.5%20L295.5%20176.5%20Z%20M285%20165.3%20L268.0%20194.7%20L302.0%20194.7%20Z%20M285%20183.5%20L261.5%20213.0%20L308.5%20213.0%20Z%20M281.3%20213.0%20L288.7%20213.0%20L288.7%20222.0%20L281.3%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M340%20117.0%20L325.4%20158.2%20L354.6%20158.2%20Z%20M340%20142.6%20L316.2%20183.8%20L363.8%20183.8%20Z%20M340%20168.2%20L307.1%20209.4%20L372.9%20209.4%20Z%20M334.8%20209.4%20L345.2%20209.4%20L345.2%20222.0%20L334.8%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M395%20137.0%20L383.1%20170.4%20L406.9%20170.4%20Z%20M395%20157.7%20L375.8%20191.1%20L414.2%20191.1%20Z%20M395%20178.4%20L368.4%20211.8%20L421.6%20211.8%20Z%20M390.8%20211.8%20L399.2%20211.8%20L399.2%20222.0%20L390.8%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M450%20130.0%20L437.2%20166.1%20L462.8%20166.1%20Z%20M450%20152.4%20L429.2%20188.6%20L470.8%20188.6%20Z%20M450%20174.8%20L421.2%20211.0%20L478.8%20211.0%20Z%20M445.4%20211.0%20L454.6%20211.0%20L454.6%20222.0%20L445.4%20222.0%20Z%22%20fill%3D%22%230a1120%22%20fill-opacity%3D%220.55%22/%3E%3Cpath%20d%3D%22M0%20110.0%20L-18.1%20161.1%20L18.1%20161.1%20Z%20M0%20141.7%20L-29.4%20192.7%20L29.4%20192.7%20Z%20M0%20173.3%20L-40.7%20224.4%20L40.7%20224.4%20Z%20M-6.4%20224.4%20L6.4%20224.4%20L6.4%20240.0%20L-6.4%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M45%20140.0%20L31.0%20179.3%20L59.0%20179.3%20Z%20M45%20164.4%20L22.4%20203.6%20L67.6%20203.6%20Z%20M45%20188.7%20L13.7%20228.0%20L76.3%20228.0%20Z%20M40.0%20228.0%20L50.0%20228.0%20L50.0%20240.0%20L40.0%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M100%2095.0%20L79.8%20152.0%20L120.2%20152.0%20Z%20M100%20130.3%20L67.2%20187.3%20L132.8%20187.3%20Z%20M100%20165.6%20L54.6%20222.6%20L145.4%20222.6%20Z%20M92.8%20222.6%20L107.2%20222.6%20L107.2%20240.0%20L92.8%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M150%20125.0%20L134.0%20170.2%20L166.0%20170.2%20Z%20M150%20153.0%20L124.0%20198.2%20L176.0%20198.2%20Z%20M150%20181.0%20L114.0%20226.2%20L186.0%20226.2%20Z%20M144.3%20226.2%20L155.7%20226.2%20L155.7%20240.0%20L144.3%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M210%2090.0%20L189.1%20148.9%20L230.9%20148.9%20Z%20M210%20126.5%20L176.1%20185.5%20L243.9%20185.5%20Z%20M210%20163.1%20L163.0%20222.0%20L257.0%20222.0%20Z%20M202.6%20222.0%20L217.4%20222.0%20L217.4%20240.0%20L202.6%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M260%20135.0%20L245.4%20176.2%20L274.6%20176.2%20Z%20M260%20160.6%20L236.2%20201.8%20L283.8%20201.8%20Z%20M260%20186.2%20L227.1%20227.4%20L292.9%20227.4%20Z%20M254.8%20227.4%20L265.2%20227.4%20L265.2%20240.0%20L254.8%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M320%20100.0%20L300.5%20155.0%20L339.5%20155.0%20Z%20M320%20134.1%20L288.3%20189.1%20L351.7%20189.1%20Z%20M320%20168.2%20L276.2%20223.2%20L363.8%20223.2%20Z%20M313.1%20223.2%20L326.9%20223.2%20L326.9%20240.0%20L313.1%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M375%20120.0%20L358.3%20167.1%20L391.7%20167.1%20Z%20M375%20149.2%20L347.8%20196.4%20L402.2%20196.4%20Z%20M375%20178.5%20L337.4%20225.6%20L412.6%20225.6%20Z%20M369.0%20225.6%20L381.0%20225.6%20L381.0%20240.0%20L369.0%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M430%2090.0%20L409.1%20148.9%20L450.9%20148.9%20Z%20M430%20126.5%20L396.1%20185.5%20L463.9%20185.5%20Z%20M430%20163.1%20L383.0%20222.0%20L477.0%20222.0%20Z%20M422.6%20222.0%20L437.4%20222.0%20L437.4%20240.0%20L422.6%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3Cpath%20d%3D%22M470%20130.0%20L454.7%20173.2%20L485.3%20173.2%20Z%20M470%20156.8%20L445.1%20200.0%20L494.9%20200.0%20Z%20M470%20183.6%20L435.6%20226.8%20L504.4%20226.8%20Z%20M464.5%20226.8%20L475.5%20226.8%20L475.5%20240.0%20L464.5%20240.0%20Z%22%20fill%3D%22%23050810%22%20fill-opacity%3D%220.92%22/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-position: bottom left; background-size: 480px 240px;
  opacity: 0.9; pointer-events: none; z-index: 0;
}
html[data-theme="aurora-dusk"] .wrap{ position: relative; z-index: 1; }
html[data-theme="aurora-dusk"] .masthead,
html[data-theme="aurora-dusk"] .card,
html[data-theme="aurora-dusk"] .settings-modal{
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px -14px rgba(0,0,0,0.65), 0 0 0 1px rgba(242,183,5,0.08);
}

/* Aurora & Aurora-Dusk: the quiz "correct/incorrect" boxes use a pale pastel
   background designed for the dark-ink Antique theme. On Aurora's light text,
   that reads as near-white text on a washed-out green/red box — low contrast.
   Swap those backgrounds for translucent tints of the same accent colors,
   which stay readable against light text on the dark navy panels. */
html[data-theme="aurora"] .stage-flag.mc,
html[data-theme="aurora-dusk"] .stage-flag.mc{ background: rgba(242,183,5,0.16); }
html[data-theme="aurora"] .stage-flag.written,
html[data-theme="aurora-dusk"] .stage-flag.written{ background: rgba(63,224,165,0.16); }
html[data-theme="aurora"] .mc-option.correct,
html[data-theme="aurora-dusk"] .mc-option.correct{ background: rgba(63,224,165,0.16); }
html[data-theme="aurora"] .mc-option.incorrect,
html[data-theme="aurora-dusk"] .mc-option.incorrect{ background: rgba(255,92,122,0.16); }
html[data-theme="aurora"] .feedback-box.ok,
html[data-theme="aurora-dusk"] .feedback-box.ok{ background: rgba(63,224,165,0.14); }
html[data-theme="aurora"] .feedback-box.no,
html[data-theme="aurora-dusk"] .feedback-box.no{ background: rgba(255,92,122,0.14); }

html[data-theme="midnight"]{
  --paper: #191510;
  --paper-dark: #241f17;
  --paper-shadow: #050403;
  --ink: #ece2cd;
  --ink-soft: #b7ab8f;
  --rule: rgba(236,226,205,0.16);
  --sapphire-tint: rgba(120,170,210,0.1);
  --glow-1: rgba(255,235,200,0.04);
  --glow-2: rgba(0,0,0,0.3);
}

/* Modern — flat, bright, complementary indigo + coral. Sans-serif, rounder. */
html[data-theme="modern"]{
  --paper: #F5F6FA;
  --paper-dark: #FFFFFF;
  --paper-shadow: #E1E4EC;
  --ink: #1E2233;
  --ink-soft: #5B6270;
  --burgundy: #FF5A5F;
  --burgundy-deep: #E14348;
  --brass: #FF9F43;
  --brass-light: #FFB86B;
  --forest: #4C5FD5;
  --error: #E33A3A;
  --good: #2FB380;
  --emerald: #17A398;
  --emerald-deep: #128577;
  --sapphire: #2D9CDB;
  --sapphire-deep: #1B7AB5;
  --sapphire-tint: rgba(45,156,219,0.1);
  --rule: rgba(30,34,51,0.12);
  --on-accent: #FFFFFF;
  --glow-1: rgba(255,255,255,0.5);
  --glow-2: rgba(0,0,0,0.02);
  --font-serif: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 12px;
}

/* Modern Dark — same indigo/coral pairing, dark surface. */
html[data-theme="modern-dark"]{
  --paper: #14162B;
  --paper-dark: #1D2040;
  --paper-shadow: #0A0B1A;
  --ink: #EDEFFB;
  --ink-soft: #A3A8C9;
  --burgundy: #FF6B6F;
  --burgundy-deep: #E14348;
  --brass: #FFB067;
  --brass-light: #FFC98A;
  --forest: #6E7FFF;
  --error: #FF5C5C;
  --good: #3FD79A;
  --emerald: #2BC7B9;
  --emerald-deep: #17A398;
  --sapphire: #4FB6EE;
  --sapphire-deep: #2D9CDB;
  --sapphire-tint: rgba(79,182,238,0.12);
  --rule: rgba(237,239,251,0.14);
  --on-accent: #EDEFFB;
  --glow-1: rgba(110,127,255,0.06);
  --glow-2: rgba(0,0,0,0.25);
  --font-serif: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 12px;
}

/* Meadow — sage and moss, an outdoor field-notebook feel. */
html[data-theme="meadow"]{
  --paper: #F4F7EF;
  --paper-dark: #E6EEDC;
  --paper-shadow: #C9D9B8;
  --ink: #223021;
  --ink-soft: #55684F;
  --burgundy: #A6462F;
  --burgundy-deep: #7E331F;
  --brass: #8C9B3F;
  --brass-light: #AEBD5E;
  --forest: #3F7A4E;
  --error: #B23A2E;
  --good: #3F7A4E;
  --emerald: #2E8B57;
  --emerald-deep: #1F6B41;
  --sapphire: #3E7C86;
  --sapphire-deep: #2C5B62;
  --sapphire-tint: rgba(62,124,134,0.08);
  --rule: rgba(34,48,33,0.14);
  --on-accent: #F4F7EF;
  --glow-1: rgba(255,255,255,0.3);
  --glow-2: rgba(0,0,0,0.05);
  --font-serif: 'Lora', Georgia, serif;
  --font-mono: 'Space Mono', monospace;
  --radius: 6px;
}

/* Meadow Dark — moss and pine at night. */
html[data-theme="meadow-dark"]{
  --paper: #12180F;
  --paper-dark: #1B2417;
  --paper-shadow: #070A05;
  --ink: #E7EEDF;
  --ink-soft: #A9B89C;
  --burgundy: #C25B41;
  --burgundy-deep: #A6462F;
  --brass: #A8B850;
  --brass-light: #C3D274;
  --forest: #5FA46F;
  --error: #C25B41;
  --good: #5FA46F;
  --emerald: #3FAE7A;
  --emerald-deep: #2E8B57;
  --sapphire: #5AA3AE;
  --sapphire-deep: #3E7C86;
  --sapphire-tint: rgba(90,163,174,0.12);
  --rule: rgba(231,238,223,0.14);
  --on-accent: #E7EEDF;
  --glow-1: rgba(95,164,111,0.05);
  --glow-2: rgba(0,0,0,0.28);
  --font-serif: 'Lora', Georgia, serif;
  --font-mono: 'Space Mono', monospace;
  --radius: 6px;
}

/* Harbor — navy and teal, an old sailor's logbook. */
html[data-theme="harbor"]{
  --paper: #EEF4F7;
  --paper-dark: #DCEAF0;
  --paper-shadow: #B9D3DE;
  --ink: #142A33;
  --ink-soft: #3F5C68;
  --burgundy: #C1443B;
  --burgundy-deep: #983530;
  --brass: #C98A2C;
  --brass-light: #E0A94F;
  --forest: #1B6E8C;
  --error: #B23A2E;
  --good: #1F8A70;
  --emerald: #16A085;
  --emerald-deep: #0F7A66;
  --sapphire: #003153;
  --sapphire-deep: #00213A;
  --sapphire-tint: rgba(0,49,83,0.08);
  --rule: rgba(20,42,51,0.14);
  --on-accent: #EEF4F7;
  --glow-1: rgba(255,255,255,0.3);
  --glow-2: rgba(0,0,0,0.05);
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 5px;
}

/* Harbor Dark — the logbook by lamplight, after the crew's turned in. */
html[data-theme="harbor-dark"]{
  --paper: #0E1A20;
  --paper-dark: #16262E;
  --paper-shadow: #050B0E;
  --ink: #DCEAF0;
  --ink-soft: #8FAAB6;
  --burgundy: #D45B50;
  --burgundy-deep: #C1443B;
  --brass: #E0A94F;
  --brass-light: #F0C179;
  --forest: #2E93B8;
  --error: #D45B50;
  --good: #2FA98A;
  --emerald: #22BFA0;
  --emerald-deep: #16A085;
  --sapphire: #3D7FC9;
  --sapphire-deep: #003153;
  --sapphire-tint: rgba(61,127,201,0.14);
  --rule: rgba(220,234,240,0.14);
  --on-accent: #DCEAF0;
  --glow-1: rgba(46,147,184,0.06);
  --glow-2: rgba(0,0,0,0.28);
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 5px;
}

/* Neon — dark arcade room, cyan + violet + magenta, no rainbow. */
html[data-theme="neon"]{
  --paper: #0D0E14;
  --paper-dark: #171923;
  --paper-shadow: #05050A;
  --ink: #F2F4FF;
  --ink-soft: #A9AFC7;
  --burgundy: #FF3D71;
  --burgundy-deep: #D42A5C;
  --brass: #FFB020;
  --brass-light: #FFC850;
  --forest: #00B8D9;
  --error: #FF3D71;
  --good: #00E28A;
  --emerald: #00C97A;
  --emerald-deep: #00A366;
  --sapphire: #7B61FF;
  --sapphire-deep: #5C46D9;
  --sapphire-tint: rgba(123,97,255,0.12);
  --rule: rgba(242,244,255,0.14);
  --on-accent: #0D0E14;
  --glow-1: rgba(0,184,217,0.08);
  --glow-2: rgba(123,97,255,0.08);
  --font-serif: 'Orbitron', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --radius: 10px;
}

/* Neon Light — the arcade with the daylight let in; same hues, deepened for a white room. */
html[data-theme="neon-light"]{
  --paper: #F5F6FF;
  --paper-dark: #FFFFFF;
  --paper-shadow: #E2E4F5;
  --ink: #14162B;
  --ink-soft: #4B4F6B;
  --burgundy: #E0346B;
  --burgundy-deep: #B92457;
  --brass: #E08F00;
  --brass-light: #F5A623;
  --forest: #0090B0;
  --error: #E0346B;
  --good: #009E5C;
  --emerald: #009E86;
  --emerald-deep: #00806C;
  --sapphire: #5B3FD9;
  --sapphire-deep: #4630B0;
  --sapphire-tint: rgba(91,63,217,0.1);
  --rule: rgba(20,22,43,0.12);
  --on-accent: #FFFFFF;
  --glow-1: rgba(0,144,176,0.06);
  --glow-2: rgba(91,63,217,0.05);
  --font-serif: 'Orbitron', sans-serif;
  --font-mono: 'Share Tech Mono', monospace;
  --radius: 10px;
}

/* Desert — terracotta and sand, teal accent. */
html[data-theme="desert"]{
  --paper: #FBF3E7;
  --paper-dark: #F3E3CC;
  --paper-shadow: #E0C9A6;
  --ink: #4A2E1F;
  --ink-soft: #7A5A42;
  --burgundy: #C0432B;
  --burgundy-deep: #9B341F;
  --brass: #C98A2C;
  --brass-light: #E0A94F;
  --forest: #2E7D6B;
  --error: #C0432B;
  --good: #4E8C6B;
  --emerald: #2E7D6B;
  --emerald-deep: #205A4D;
  --sapphire: #3F6E8C;
  --sapphire-deep: #2A4F66;
  --sapphire-tint: rgba(63,110,140,0.08);
  --rule: rgba(74,46,31,0.14);
  --on-accent: #FBF3E7;
  --glow-1: rgba(255,255,255,0.3);
  --glow-2: rgba(0,0,0,0.05);
  --font-serif: 'Alegreya', Georgia, serif;
  --font-mono: 'Space Mono', monospace;
  --radius: 5px;
}
html[data-theme="desert-dark"]{
  --paper: #1F150D;
  --paper-dark: #2B1E13;
  --paper-shadow: #0D0906;
  --ink: #F1E2CC;
  --ink-soft: #C2A98A;
  --burgundy: #E06B4C;
  --burgundy-deep: #C0432B;
  --brass: #E0A94F;
  --brass-light: #F0C179;
  --forest: #4FADA0;
  --error: #E06B4C;
  --good: #6CBBA0;
  --emerald: #4FADA0;
  --emerald-deep: #2E7D6B;
  --sapphire: #6F9FBF;
  --sapphire-deep: #3F6E8C;
  --sapphire-tint: rgba(111,159,191,0.12);
  --rule: rgba(241,226,204,0.14);
  --on-accent: #1F150D;
  --glow-1: rgba(224,169,79,0.05);
  --glow-2: rgba(0,0,0,0.3);
  --font-serif: 'Alegreya', Georgia, serif;
  --font-mono: 'Space Mono', monospace;
  --radius: 5px;
}

/* Blossom — rose and green, soft and rounded. */
html[data-theme="blossom"]{
  --paper: #FBF1F3;
  --paper-dark: #F5E1E6;
  --paper-shadow: #E6C4CE;
  --ink: #3B2430;
  --ink-soft: #7A5A68;
  --burgundy: #C24D6B;
  --burgundy-deep: #9E3A54;
  --brass: #C9954A;
  --brass-light: #E0B36E;
  --forest: #4C8C5B;
  --error: #C24D6B;
  --good: #4C8C5B;
  --emerald: #3B9E6F;
  --emerald-deep: #2A7752;
  --sapphire: #8C6FB0;
  --sapphire-deep: #6B4F8C;
  --sapphire-tint: rgba(140,111,176,0.1);
  --rule: rgba(59,36,48,0.13);
  --on-accent: #FBF1F3;
  --glow-1: rgba(255,255,255,0.35);
  --glow-2: rgba(0,0,0,0.04);
  --font-serif: 'Quicksand', sans-serif;
  --font-mono: 'Quicksand', sans-serif;
  --radius: 14px;
}
html[data-theme="blossom-dark"]{
  --paper: #201720;
  --paper-dark: #2C1F2C;
  --paper-shadow: #0E080E;
  --ink: #F5E1E9;
  --ink-soft: #C29FB0;
  --burgundy: #E0729B;
  --burgundy-deep: #C24D6B;
  --brass: #E0B36E;
  --brass-light: #F0C990;
  --forest: #6BBF83;
  --error: #E0729B;
  --good: #6BBF83;
  --emerald: #4FCB92;
  --emerald-deep: #3B9E6F;
  --sapphire: #B08CE0;
  --sapphire-deep: #8C6FB0;
  --sapphire-tint: rgba(176,140,224,0.14);
  --rule: rgba(245,225,233,0.14);
  --on-accent: #201720;
  --glow-1: rgba(224,114,155,0.06);
  --glow-2: rgba(0,0,0,0.3);
  --font-serif: 'Quicksand', sans-serif;
  --font-mono: 'Quicksand', sans-serif;
  --radius: 14px;
}

/* Slate — steel and cool gray, a professional tool. */
html[data-theme="slate"]{
  --paper: #F4F6F8;
  --paper-dark: #E6EAEE;
  --paper-shadow: #CBD3DA;
  --ink: #1E2A33;
  --ink-soft: #5A6B78;
  --burgundy: #C0392B;
  --burgundy-deep: #96281B;
  --brass: #B7862F;
  --brass-light: #D4A24F;
  --forest: #3A5A7A;
  --error: #C0392B;
  --good: #2E8B57;
  --emerald: #26A96C;
  --emerald-deep: #1D7F52;
  --sapphire: #3A5A7A;
  --sapphire-deep: #24405A;
  --sapphire-tint: rgba(58,90,122,0.08);
  --rule: rgba(30,42,51,0.12);
  --on-accent: #F4F6F8;
  --glow-1: rgba(255,255,255,0.4);
  --glow-2: rgba(0,0,0,0.03);
  --font-serif: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 6px;
}
html[data-theme="slate-dark"]{
  --paper: #12181E;
  --paper-dark: #1B242C;
  --paper-shadow: #060A0D;
  --ink: #E7ECF0;
  --ink-soft: #9AACB8;
  --burgundy: #E06456;
  --burgundy-deep: #C0392B;
  --brass: #D4A24F;
  --brass-light: #E6BE78;
  --forest: #5C8FBF;
  --error: #E06456;
  --good: #4FBE85;
  --emerald: #3FCB94;
  --emerald-deep: #26A96C;
  --sapphire: #5C8FBF;
  --sapphire-deep: #3A5A7A;
  --sapphire-tint: rgba(92,143,191,0.12);
  --rule: rgba(231,236,240,0.14);
  --on-accent: #12181E;
  --glow-1: rgba(92,143,191,0.05);
  --glow-2: rgba(0,0,0,0.3);
  --font-serif: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 6px;
}

/* Royal — deep purple and gold. */
html[data-theme="royal"]{
  --paper: #F3EEF7;
  --paper-dark: #E5DAEE;
  --paper-shadow: #CBB8DC;
  --ink: #2C1B3A;
  --ink-soft: #5C4A6E;
  --burgundy: #8C2F4A;
  --burgundy-deep: #6B2138;
  --brass: #B8912F;
  --brass-light: #D4B04F;
  --forest: #5B3C8C;
  --error: #8C2F4A;
  --good: #3C7A5C;
  --emerald: #2E8B67;
  --emerald-deep: #1F6B4D;
  --sapphire: #3C4C8C;
  --sapphire-deep: #2A356B;
  --sapphire-tint: rgba(60,76,140,0.08);
  --rule: rgba(44,27,58,0.14);
  --on-accent: #F3EEF7;
  --glow-1: rgba(255,255,255,0.32);
  --glow-2: rgba(0,0,0,0.05);
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --radius: 5px;
}
html[data-theme="royal-dark"]{
  --paper: #180F20;
  --paper-dark: #241730;
  --paper-shadow: #0A060F;
  --ink: #EDE3F5;
  --ink-soft: #B49FC9;
  --burgundy: #C0507A;
  --burgundy-deep: #8C2F4A;
  --brass: #D4B04F;
  --brass-light: #E6C878;
  --forest: #8B6BC9;
  --error: #C0507A;
  --good: #4FA37B;
  --emerald: #3FC194;
  --emerald-deep: #2E8B67;
  --sapphire: #6B7BC9;
  --sapphire-deep: #3C4C8C;
  --sapphire-tint: rgba(107,123,201,0.14);
  --rule: rgba(237,227,245,0.14);
  --on-accent: #180F20;
  --glow-1: rgba(139,107,201,0.06);
  --glow-2: rgba(0,0,0,0.3);
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --radius: 5px;
}

/* Terminal — a CRT that never goes white. Amber and green phosphor. */
html[data-theme="terminal-amber"]{
  --paper: #150D02;
  --paper-dark: #241706;
  --paper-shadow: #000000;
  --ink: #FFB000;
  --ink-soft: #CC8800;
  --burgundy: #FF5C33;
  --burgundy-deep: #CC4726;
  --brass: #FFB000;
  --brass-light: #FFCB4D;
  --forest: #FFB000;
  --error: #FF5C33;
  --good: #FFD166;
  --emerald: #FFC94D;
  --emerald-deep: #E0A800;
  --sapphire: #FFB000;
  --sapphire-deep: #CC8800;
  --sapphire-tint: rgba(255,176,0,0.1);
  --rule: rgba(255,176,0,0.25);
  --on-accent: #150D02;
  --glow-1: rgba(255,176,0,0.06);
  --glow-2: rgba(0,0,0,0.4);
  --font-mono: 'VT323', monospace;
  --font-serif: var(--font-mono);
  --radius: 2px;
}
html[data-theme="terminal-green"]{
  --paper: #050A05;
  --paper-dark: #0C150C;
  --paper-shadow: #000000;
  --ink: #33FF66;
  --ink-soft: #22CC4D;
  --burgundy: #FF4D4D;
  --burgundy-deep: #CC3333;
  --brass: #33FF66;
  --brass-light: #66FF99;
  --forest: #33FF66;
  --error: #FF4D4D;
  --good: #33FF66;
  --emerald: #33FF99;
  --emerald-deep: #22CC77;
  --sapphire: #33FF66;
  --sapphire-deep: #22CC4D;
  --sapphire-tint: rgba(51,255,102,0.1);
  --rule: rgba(51,255,102,0.25);
  --on-accent: #050A05;
  --glow-1: rgba(51,255,102,0.05);
  --glow-2: rgba(0,0,0,0.4);
  --font-mono: 'VT323', monospace;
  --font-serif: var(--font-mono);
  --radius: 2px;
}

/* Chalkboard — never white either way. Greenboard by day, blackboard by night. */
html[data-theme="greenboard"]{
  --paper: #1F3D2E;
  --paper-dark: #16301F;
  --paper-shadow: #0D2016;
  --ink: #F2F2E8;
  --ink-soft: #C7CFC2;
  --burgundy: #E0574A;
  --burgundy-deep: #B8402F;
  --brass: #E8C547;
  --brass-light: #F2D877;
  --forest: #6FA8DC;
  --error: #E0574A;
  --good: #8FD19E;
  --emerald: #6FCF97;
  --emerald-deep: #4FAE7A;
  --sapphire: #6FA8DC;
  --sapphire-deep: #4A7CB0;
  --sapphire-tint: rgba(111,168,220,0.14);
  --rule: rgba(242,242,232,0.16);
  --on-accent: #16301F;
  --glow-1: rgba(242,242,232,0.03);
  --glow-2: rgba(0,0,0,0.2);
  --font-serif: 'Kalam', cursive;
  --font-mono: 'Kalam', cursive;
  --radius: 4px;
}
html[data-theme="blackboard"]{
  --paper: #0D0D0D;
  --paper-dark: #1A1A1A;
  --paper-shadow: #000000;
  --ink: #F5F5F0;
  --ink-soft: #B8B8B0;
  --burgundy: #E0574A;
  --burgundy-deep: #B8402F;
  --brass: #E8C547;
  --brass-light: #F2D877;
  --forest: #6FA8DC;
  --error: #E0574A;
  --good: #8FD19E;
  --emerald: #6FCF97;
  --emerald-deep: #4FAE7A;
  --sapphire: #6FA8DC;
  --sapphire-deep: #4A7CB0;
  --sapphire-tint: rgba(111,168,220,0.12);
  --rule: rgba(245,245,240,0.16);
  --on-accent: #0D0D0D;
  --glow-1: rgba(245,245,240,0.02);
  --glow-2: rgba(0,0,0,0.3);
  --font-serif: 'Kalam', cursive;
  --font-mono: 'Kalam', cursive;
  --radius: 4px;
}

html{ background: var(--paper); transition: background .2s ease; }


*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
button{
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease, opacity .12s ease;
  cursor: pointer;
  touch-action: manipulation;
}
.opt-btn, .category-tile, .star-row, .unit-header{
  touch-action: manipulation;
}
button:active:not(:disabled){
  transform: scale(0.94);
  filter: brightness(0.94);
}
button:disabled{ cursor: not-allowed; }
@keyframes btn-pop{
  0%{ transform: scale(0.94); }
  60%{ transform: scale(1.03); }
  100%{ transform: scale(1); }
}
button:not(:disabled):focus-visible{
  animation: btn-pop .22s ease-out;
}
body{
  background: var(--paper);
  background-image:
    radial-gradient(circle at 15% 8%, var(--glow-1), transparent 40%),
    radial-gradient(circle at 85% 92%, var(--glow-2), transparent 45%);
  color: var(--ink);
  font-family: var(--font-serif);
  min-height: 100vh;
  padding: 32px 16px 64px;
}

.wrap{ max-width: 760px; margin: 0 auto; }
.wrap.wrap-wide{ max-width: 1000px; }
/* Home's catalog tab lists every list number; phones get the compact range instead. */
.catalog-tab .tab-short{ display: none; }
@media (max-width: 680px){
  .catalog-tab .tab-long{ display: none; }
  .catalog-tab .tab-short{ display: inline; }
  /* Safety net for any tab text that still doesn't fit: trim it with an ellipsis
     instead of pushing the page sideways. */
  .catalog-tab{
    max-width: calc(100% - 24px); box-sizing: border-box;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
  }
}
/* Tablet and up: every screen spans 85% of the window. Phones keep the full-width layout above. */
@media (min-width: 681px){
  .wrap, .wrap.wrap-wide{ width: 85vw; max-width: none; }
  /* Quiz and Results have no catalog tab; drop their first card to where the tab
     screens' cards start, clear of the fixed account menu in the top-right corner. */
  .wrap > .masthead:first-child{ margin-top: 36px; }
}

.catalog-tab{
  display:inline-block;
  background: var(--forest);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 5px 14px 6px;
  border-radius: 2px 2px 0 0;
  margin-left: 24px;
}

.masthead{
  background: var(--paper-dark);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 32px 24px;
  position: relative;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 18px -12px rgba(0,0,0,0.35);
}
.masthead h1{ font-size: 40px; font-weight: 600; margin: 0 0 6px; letter-spacing: -0.01em; line-height: 1.05; }
.masthead .sub{ font-size: 15px; color: var(--ink-soft); font-style: italic; margin: 0; }
.masthead .initials{ font-size: 22px; color: var(--brass); letter-spacing: 0.06em; margin: 4px 0 8px; font-weight: 600; }
.masthead .stamp{
  position:absolute; top: 22px; right: 26px;
  border: 2px solid var(--burgundy); color: var(--burgundy);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  padding: 5px 9px; border-radius: var(--radius); transform: rotate(4deg); opacity: 0.75;
}

.card{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin-top: 22px;
  padding: 30px 32px 32px;
  position: relative;
  box-shadow: 0 10px 24px -18px rgba(0,0,0,0.4);
}
.card::before{ content:""; position:absolute; top:0; left: 44px; right: 44px; border-top: 1px dashed var(--rule); }
.punch{
  position:absolute; top: -9px; left: 24px; width: 16px; height: 16px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 50%;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.15);
}

.field-block{ margin-top: 26px; }
.field-block:first-child{ margin-top: 6px; }
.resume-banner{
  border: 1.5px solid var(--brass); background: var(--sapphire-tint);
  border-radius: var(--radius); padding: 14px 16px;
}
.resume-row{ display:flex; align-items:center; justify-content:space-between; gap: 14px; padding: 8px 0; }
.resume-row + .resume-row{ border-top: 1px dashed var(--rule); }
.resume-row-text{ display:flex; flex-direction:column; }
.resume-row-sub{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.field-label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--brass); text-transform: uppercase; margin-bottom: 10px; display:block;
}
.option-row{ display:flex; flex-wrap: wrap; gap: 10px; }
.opt-btn{
  font-family: var(--font-serif); font-size: 15px; background: transparent;
  border: 1.5px solid var(--rule); color: var(--ink-soft); padding: 10px 16px; border-radius: var(--radius);
  cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.opt-btn:hover{ border-color: var(--brass-light); color: var(--ink); }
.opt-btn.active{ background: var(--forest); border-color: var(--forest); color: var(--on-accent); }
.opt-btn:disabled{ opacity: 0.4; cursor: not-allowed; }
.opt-btn:disabled:hover{ border-color: var(--rule); color: var(--ink-soft); }
.opt-hint{ font-size: 13px; color: var(--ink-soft); margin-top: 8px; font-style: italic; }
.opt-warning{ font-size: 13px; color: var(--error); margin-top: 8px; font-weight: 600; }

.unit-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 8px;
  align-items: start;
}
.unit-block{ border: 1.5px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-dark); }
.unit-block.is-expanded{ grid-column: 1 / -1; }
.unit-block.has-selection{ border-color: var(--brass); }
.unit-header{
  width:100%; display:flex; flex-direction: column; gap: 3px;
  background: transparent; border: none; cursor:pointer;
  padding: 9px 11px; font-family: var(--font-serif); color: var(--ink);
  text-align:left; transition: background .15s ease;
}
.unit-header:hover{ background: rgba(147,112,47,0.1); }
.unit-header.is-open{ background: rgba(147,112,47,0.14); }
.unit-title-row{ display:flex; align-items:center; justify-content:space-between; gap: 6px; }
.unit-title{ font-size: 14px; font-weight: 600; }
.unit-meta{
  font-family:var(--font-mono); font-size: 10.5px; color: var(--ink-soft);
  white-space: nowrap;
}
.unit-chevron{ color: var(--brass); font-size: 12px; flex-shrink: 0; }
.unit-dropdown{
  display:flex; flex-wrap:wrap; gap: 10px;
  padding: 14px 16px; background: var(--paper);
  border-top: 1px dashed var(--rule);
}

.method-note{
  margin-top: 26px;
  border: 1.5px dashed var(--rule);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.method-note b{ color: var(--ink); }

.star-toolbar{ display:flex; justify-content: space-between; align-items:center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.star-count{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.star-mini-btn{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  background: transparent; border: 1px solid var(--rule); color: var(--ink-soft);
  padding: 5px 10px; border-radius: var(--radius); cursor: pointer;
}
.star-mini-btn:hover{ border-color: var(--brass-light); color: var(--ink); }
.star-mini-btn.active{ background: var(--forest); border-color: var(--forest); color: var(--on-accent); }
.star-mini-btn:disabled{ opacity: 0.4; cursor: not-allowed; }
.star-mini-btn:disabled:hover{ border-color: var(--rule); color: var(--ink-soft); }
.star-list{
  border: 1.5px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-dark);
}
.star-row{
  display:flex; align-items:flex-start; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.star-row:last-child{ border-bottom: none; }
.star-row:hover{ background: rgba(147,112,47,0.08); }
.star-row .star-icon{
  font-size: 18px; line-height: 1; width: 20px; text-align:center; flex-shrink:0;
  color: var(--rule);
}
.star-row.is-starred .star-icon{ color: var(--brass); }
.star-row .star-text{ min-width:0; flex:1; display:flex; align-items:baseline; flex-wrap: wrap; }
.star-row .star-term{ font-weight: 600; font-size: 14.5px; flex: 0 0 190px; margin-right: 0.75in; }
.mastery-badge{
  display: inline-block; margin-left: 8px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.04em; padding: 2px 7px; border-radius: var(--radius);
  vertical-align: middle; color: var(--on-accent);
}
.mastery-badge.mastery-mastered{ background: var(--good); }
.mastery-badge.mastery-intermediate{ background: var(--brass); }
.mastery-badge.mastery-learning{ background: var(--error); }
.star-row .star-def{
  font-size: 12.5px; color: var(--ink-soft);
  line-height: 1.45; flex: 1 1 220px; min-width: 0;
}
body.hide-terms .star-term-text{ color: transparent; background: var(--rule); border-radius: 2px; cursor: pointer; }
body.hide-terms .star-term-text.peeked{ color: inherit; background: transparent; }
body.hide-defs .star-def-text{ color: transparent; background: var(--rule); border-radius: 2px; cursor: pointer; }
body.hide-defs .star-def-text.peeked{ color: inherit; background: transparent; }

/* Accessibility & appearance button: bottom-right on every screen. On screens that
   also have a settings gear in that corner, it stacks just above the gear. */
.theme-btn{
  position: fixed; z-index: 99;
  right: calc(22px + env(safe-area-inset-right, 0px));
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--paper-dark); border: 1.5px solid var(--rule); color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.45);
  transition: color .15s ease, border-color .15s ease;
}
.theme-btn:hover{ color: var(--ink); border-color: var(--brass-light); }
.theme-btn:focus-visible{ outline: 2px solid var(--brass-light); outline-offset: 3px; }
.theme-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }

.term-def-toggle{
  position: fixed; bottom: 18px; left: 0;
  transform: translateX(-50%);
  background: var(--forest); color: var(--on-accent);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
  padding: 8px 16px; border-radius: 999px; border: none; cursor: pointer;
  box-shadow: 0 5px 14px -4px rgba(0,0,0,0.4);
  z-index: 60; transition: opacity .2s ease, background .15s ease, transform .12s ease;
  opacity: 0; pointer-events: none; white-space: nowrap;
}
.term-def-toggle.is-visible{ opacity: 1; pointer-events: auto; }
.term-def-toggle.is-active{ background: var(--burgundy-deep); }
button.term-def-toggle:active{ transform: translateX(-50%) scale(0.94); }
.star-empty{ padding: 18px 14px; font-size: 13px; color: var(--ink-soft); font-style: italic; }

.category-grid{ display:flex; flex-direction:column; gap: 20px; margin-top: 14px; }
.category-tile{
  display:block; text-align:left; width:100%;
  background: var(--sapphire); border: 1.5px solid #14110c; border-radius: var(--radius);
  outline: 3px solid #14110c; outline-offset: 3px;
  padding: 18px 20px; cursor:pointer;
  font-family: var(--font-serif);
  transition: background .15s ease, border-color .15s ease, outline-color .15s ease, transform .1s ease;
}
.category-tile:hover{ background: var(--sapphire-deep); border-color: #000; outline-color: #000; }
.category-tile:active{ transform: translateY(1px); }
.category-tile .cat-name{ font-size: 19px; font-weight: 600; color: var(--on-accent); margin-bottom: 4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.category-tile .cat-desc{ font-size: 13px; color: rgba(241,232,214,0.82); line-height: 1.45; }
.category-tile .cat-meta{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: rgba(241,232,214,0.65); margin-top: 10px; }

/* Home's mode picker: real boxes (a grid), not a stacked list. Order in the
   markup drives the layout — 3 across, then the rest wrap to a second row. */
.category-grid.modes-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch;
}
.modes-grid .category-tile{ display: flex; flex-direction: column; }
@media (max-width: 720px){
  .category-grid.modes-grid{ grid-template-columns: 1fr; }
}
.category-tile.tile-locked{
  background: var(--paper-shadow); outline-color: var(--rule); border-color: var(--rule);
  cursor: default; pointer-events: none;
}
.category-tile.tile-locked .cat-name{ color: var(--ink-soft); }
.category-tile.tile-locked .cat-desc{ color: var(--ink-soft); opacity: 0.85; }
.soon-badge{
  display:inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 2px 8px;
}
.subject-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.subject-tile{
  border: 1.5px dashed var(--rule); border-radius: var(--radius); background: var(--paper-dark);
  padding: 12px 14px; font-size: 13.5px; color: var(--ink-soft);
}
.subject-tile b{ display:block; font-size: 14.5px; color: var(--ink); margin-bottom: 3px; font-weight: 600; }
.lib-back{
  position: fixed; top: calc(16px + env(safe-area-inset-top, 0px)); left: calc(16px + env(safe-area-inset-left, 0px)); z-index: 56;
  display: inline-flex; align-items: center; height: 46px; box-sizing: border-box;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.04em;
  background: var(--paper-dark); border: 1.5px solid var(--rule); color: var(--ink-soft);
  padding: 0 17px; border-radius: 23px; cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.lib-back:hover{ border-color: var(--brass-light); color: var(--ink); }
@media (max-width: 680px){
  .lib-back{ top: calc(10px + env(safe-area-inset-top, 0px)); left: calc(10px + env(safe-area-inset-left, 0px)); height: 41px; padding: 0 12px; }
}

.flashcard-wrap{ display:flex; align-items:center; gap: 14px; margin-top: 12px; }
.flash-nav{
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--rule); background: var(--paper-dark); color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s ease;
}
.flash-nav:hover{ border-color: var(--brass-light); }
.flash-nav:disabled{ opacity: 0.35; cursor: not-allowed; }
.flash-pile-incorrect{ border-color: var(--error); color: var(--error); }
.flash-pile-incorrect:hover{ background: var(--error); color: var(--on-accent); }
.flash-pile-correct{ border-color: var(--good); color: var(--good); }
.flash-pile-correct:hover{ background: var(--good); color: var(--on-accent); }
.flashcard{ flex: 1; height: 260px; perspective: 1200px; cursor: pointer; }
.flash-inner{
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.4,.15,.2,1);
}
.flash-inner.is-flipped{ transform: rotateX(180deg); }
.flash-face{
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border: 1.5px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-dark);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px;
  box-shadow: 0 6px 10px rgba(0,0,0,0.18);
  transition: box-shadow .5s ease;
}
.flash-inner.is-flipped .flash-face{ box-shadow: 0 10px 18px rgba(0,0,0,0.3); }
.flash-back{ transform: rotateX(180deg); -webkit-transform: rotateX(180deg); }
.flash-count{
  position: absolute; top: 10px; right: 14px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
}
.flash-term{ font-size: 27px; font-weight: 600; }
.flash-pos{ font-size: 12px; color: var(--ink-soft); margin-top: 6px; font-family: var(--font-mono); }
.flash-tap-hint{
  position: absolute; bottom: 12px;
  font-size: 11px; color: var(--ink-soft); font-style: italic;
}
.flash-def{ font-size: 15px; line-height: 1.5; max-width: 92%; }
.flash-quote{ font-size: 12px; font-style: italic; color: var(--ink-soft); margin-top: 10px; max-width: 92%; }
.flash-empty{ display:flex; align-items:center; justify-content:center; height:100%; color: var(--ink-soft); font-style: italic; }

.flashcard-wrap.flash-large{ margin-top: 18px; gap: 22px; }
.flashcard-wrap.flash-large .flash-nav{ width: 58px; height: 58px; font-size: 28px; }
.flashcard.flash-large{ height: min(58vh, 440px); }
.flashcard.flash-large .flash-count{ font-size: 13px; top: 16px; right: 20px; }
.flashcard.flash-large .flash-term{ font-size: 54px; }
.flashcard.flash-large .flash-pos{ font-size: 15px; margin-top: 10px; }
.flashcard.flash-large .flash-tap-hint{ font-size: 13px; bottom: 18px; }
.flashcard.flash-large .flash-def{ font-size: 22px; max-width: 85%; }
.flashcard.flash-large .flash-quote{ font-size: 15px; margin-top: 16px; max-width: 85%; }

.flashcard.flash-status-correct{ outline: 3px solid var(--good); outline-offset: 4px; border-radius: var(--radius); }
.flashcard.flash-status-incorrect{ outline: 3px solid var(--error); outline-offset: 4px; border-radius: var(--radius); }

.flashcard{ transition: transform .26s ease, opacity .26s ease; }
.flashcard.flash-exit-up{ transform: translateY(-70px); opacity: 0; }
.flashcard.flash-exit-down{ transform: translateY(70px); opacity: 0; }
.flashcard.flash-enter-up{ animation: flashEnterFromBelow .28s ease; }
.flashcard.flash-enter-down{ animation: flashEnterFromAbove .28s ease; }
@keyframes flashEnterFromBelow{
  from{ transform: translateY(70px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
@keyframes flashEnterFromAbove{
  from{ transform: translateY(-70px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
.flashcard.flash-exit-left{ transform: translateX(-70px); opacity: 0; }
.flashcard.flash-exit-right{ transform: translateX(70px); opacity: 0; }
.flashcard.flash-enter-left{ animation: flashEnterFromLeftSide .28s ease; }
.flashcard.flash-enter-right{ animation: flashEnterFromRightSide .28s ease; }
@keyframes flashEnterFromLeftSide{
  from{ transform: translateX(-70px); opacity: 0; }
  to{ transform: translateX(0); opacity: 1; }
}
@keyframes flashEnterFromRightSide{
  from{ transform: translateX(70px); opacity: 0; }
  to{ transform: translateX(0); opacity: 1; }
}

.flashcard.flash-flash-correct .flash-face{ background: var(--good); transition: background .18s ease; }
.flashcard.flash-flash-incorrect .flash-face{ background: var(--error); transition: background .18s ease; }
.flashcard.flash-flash-correct .flash-face *,
.flashcard.flash-flash-incorrect .flash-face *{ color: var(--on-accent) !important; }

.flash-tally{
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 18px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 13px;
}
.flash-tally-correct{ color: var(--good); }
.flash-tally-incorrect{ color: var(--error); }

.match-timer-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 16px;
}
.match-timer{
  font-family: var(--font-mono); font-size: 24px; font-weight: 700;
  color: var(--burgundy); letter-spacing: 0.03em;
}
.match-grid{
  display:grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
@media (max-width: 680px){
  .match-grid{ grid-template-columns: repeat(2, 1fr); }
}
.match-card{
  min-height: 130px; border-radius: var(--radius); border: 1.5px solid var(--rule);
  background: var(--paper-dark); padding: 14px; cursor: pointer;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family: var(--font-serif); font-size: 14px; line-height: 1.4; color: var(--ink);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, opacity .3s ease, transform .3s ease;
}
.match-card .mc-text{
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical;
  overflow: hidden;
}
.match-card.is-term .mc-text{ font-weight: 600; font-size: 17px; }
.match-card:hover:not(:disabled){ border-color: var(--brass-light); }
.match-card.is-selected{ border-color: var(--brass); box-shadow: inset 0 0 0 2px var(--brass); background: rgba(147,112,47,0.12); }
.match-card.is-matched{ opacity: 0; transform: scale(0.8); pointer-events: none; }
.match-card.flash-correct{ background: var(--good); border-color: var(--good); color: var(--on-accent); }
.match-card.flash-incorrect{ background: var(--error); border-color: var(--error); color: var(--on-accent); }

.begin-row{ margin-top: 30px; display:flex; align-items:center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.count-note{ font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

.btn-primary{
  font-family: var(--font-serif); font-weight: 600; font-size: 17px;
  background: var(--burgundy); color: var(--on-accent); border: none; padding: 13px 26px;
  border-radius: var(--radius); cursor: pointer; letter-spacing: 0.01em; transition: background .15s ease, transform .1s ease;
}
.btn-primary:hover{ background: var(--burgundy-deep); }
.btn-primary:active{ transform: translateY(1px); }
.btn-primary:disabled{ background: #a99; cursor: not-allowed; opacity: .5;}

.btn-ghost{
  font-family: var(--font-serif); font-size: 15px; background: transparent;
  color: var(--burgundy); border: 1.5px solid var(--burgundy); padding: 10px 18px; border-radius: var(--radius); cursor: pointer;
}
.btn-ghost:hover{ background: rgba(109,36,50,0.08); }

.progress-line{ display:flex; align-items:center; gap: 14px; margin-bottom: 6px; }
.progress-track{ flex:1; height: 5px; background: var(--paper-shadow); border-radius: var(--radius); overflow:hidden; }
.progress-fill{ height:100%; background: var(--brass); transition: width .3s ease; }
.progress-label{ font-family:var(--font-mono); font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.score-line{ display:flex; gap: 18px; margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); flex-wrap:wrap; }
.score-line b{ color: var(--forest); }
.streak-line{
  display:inline-flex; align-items:center; gap: 6px;
  font-family:var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--burgundy-deep); background: rgba(109,36,50,0.08);
  border: 1px solid rgba(109,36,50,0.25); border-radius: var(--radius);
  padding: 4px 10px; margin-bottom: 10px;
}

.stage-flag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.stage-flag.mc{ background: #e6ddc4; color: var(--brass); border: 1px solid var(--brass-light); }
.stage-flag.written{ background: #e2ecdf; color: var(--good); border: 1px solid var(--good); }

.attempt-note{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--error);
  margin: -4px 0 14px;
}
.recall-note{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brass);
  margin: -4px 0 14px;
}

.q-kicker{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--brass); text-transform: uppercase; margin: 6px 0 12px; }
.q-prompt{ font-size: 26px; line-height: 1.3; font-weight: 600; margin: 0 0 4px; }
.q-prompt.is-def{ font-size: 19px; font-weight: 400; font-style: normal; line-height: 1.5; }
.q-source{ font-size: 13px; font-style: italic; color: var(--ink-soft); margin-top: 14px; }

.mc-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
@media (max-width: 560px){ .mc-grid{ grid-template-columns: 1fr; } }

.mc-option{
  text-align:left; font-family: var(--font-serif); font-size: 15px; line-height: 1.4;
  background: var(--paper-dark); border: 1.5px solid var(--rule); border-radius: var(--radius); padding: 14px 16px;
  cursor: pointer; color: var(--ink); transition: border-color .12s ease, background .12s ease, opacity .12s ease;
}
.mc-option .letter{ font-family:var(--font-mono); font-size: 11px; color: var(--brass); margin-right: 8px; }
.mc-option:hover:not(:disabled){ border-color: var(--brass-light); }
.mc-option.correct{ background: #e2ecdf; border-color: var(--good); }
.mc-option.incorrect{ background: #f0dfdb; border-color: var(--error); }
.mc-option.faded{ opacity: 0.45; }
.mc-option:disabled{ cursor: default; }

.written-area{ margin-top: 22px; }
.written-input{
  width:100%; font-family: var(--font-serif); font-size: 17px; padding: 13px 14px;
  border: 1.5px solid var(--rule); border-radius: var(--radius); background: var(--paper-dark); color: var(--ink);
}
.written-input:focus{ outline: none; border-color: var(--brass-light); }
textarea.written-input{ resize: vertical; min-height: 74px; font-size: 15px; line-height:1.5;}

.feedback-box{ margin-top: 18px; padding: 16px 18px; border-radius: var(--radius); border: 1.5px solid var(--rule); }
.feedback-box.ok{ background: #e2ecdf; border-color: var(--good); }
.feedback-box.no{ background: #f0dfdb; border-color: var(--error); }
.feedback-head{ font-family:var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.feedback-box.ok .feedback-head{ color: var(--good); }
.feedback-box.no .feedback-head{ color: var(--error); }
.feedback-answer{ font-size: 16px; line-height: 1.5; }
.feedback-answer b{ font-weight:600; }
.feedback-answer.feedback-yours{ color: var(--error); opacity: 0.9; margin-bottom: 6px; }
.feedback-answer.feedback-yours b{ color: inherit; }
.feedback-note{ font-size: 13px; color: var(--ink-soft); margin-top: 10px; font-style: italic; }

.self-grade{ margin-top: 12px; display:flex; gap: 10px; align-items:center; font-size: 13px; color: var(--ink-soft); flex-wrap:wrap; }
.self-grade button{
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.05em; padding: 6px 12px;
  border-radius: var(--radius); border: 1.5px solid var(--rule); background: transparent; cursor: pointer; color: var(--ink-soft);
}
.self-grade button.chosen-yes{ background: var(--good); border-color: var(--good); color: var(--on-accent); }
.self-grade button.chosen-no{ background: var(--error); border-color: var(--error); color: var(--on-accent); }

.quiz-actions{ margin-top: 26px; display:flex; justify-content: space-between; align-items:center; }
.quit-link{ font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); background:none; border:none; cursor:pointer; text-decoration: underline; letter-spacing: 0.02em; }

.results-head{ text-align:center; margin-bottom: 6px; }
.results-score{ font-size: 56px; font-weight: 700; line-height: 1; color: var(--burgundy); }
.results-caption{ font-family:var(--font-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ink-soft); text-transform: uppercase; margin-top: 10px; text-align:center; }
.results-msg{ text-align:center; font-style: italic; color: var(--ink-soft); margin-top: 14px; font-size: 15px; }

.review-list{ margin-top: 30px; }
.review-item{ border-top: 1px solid var(--rule); padding: 14px 2px; display:flex; gap: 14px; align-items:flex-start; }
.review-item:last-child{ border-bottom: 1px solid var(--rule); }
.review-mark{ font-family:var(--font-mono); font-size: 13px; margin-top: 3px; width: 16px; flex-shrink:0; }
.review-mark.ok{ color: var(--good); }
.review-mark.pending{ color: var(--brass); }
.review-body b{ font-size: 16px; }
.review-body .rd-def{ font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
.review-body .rd-tries{ font-size: 12px; margin-top: 5px; color: var(--brass); font-family:var(--font-mono); }

.results-actions{ margin-top: 30px; display:flex; gap: 12px; flex-wrap: wrap; justify-content:center; }

.spell-model{
  font-family: var(--font-serif); font-size: 28px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--ink); background: var(--paper-dark); border: 1.5px solid var(--brass-light);
  border-radius: var(--radius); padding: 14px 18px; text-align: center;
}

footer.note{ text-align:center; font-size: 12px; color: var(--ink-soft); margin-top: 26px; font-family: var(--font-mono); letter-spacing: 0.03em; }

/* Test mode's optional word bank: a column in the right margin on wide
   screens, a plain block above the footer once there's no margin to spare. */
.test-layout{ display: flex; gap: 24px; align-items: flex-start; }
.test-layout .card{ flex: 1; min-width: 0; }
.word-bank{
  flex: none; width: 200px; position: sticky; top: 24px;
  background: var(--paper-dark); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 16px; max-height: calc(100vh - 48px); overflow-y: auto;
}
.word-bank h2{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--brass); text-transform: uppercase; margin: 0 0 10px;
}
.word-bank ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.word-bank li{
  font-family: var(--font-serif); font-size: 14px; color: var(--ink);
  padding: 5px 9px; border-radius: 6px; background: var(--paper); border: 1px solid var(--rule);
}
@media (max-width: 900px){
  .test-layout{ flex-direction: column; }
  .word-bank{ width: 100%; position: static; max-height: none; }
  .word-bank ul{ flex-direction: row; flex-wrap: wrap; }
  .word-bank li{ flex: none; }
}

.settings-fab{
  position: fixed;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px)); left: calc(22px + env(safe-area-inset-left, 0px));
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--on-accent);
  border: 1px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.45);
  z-index: 100;
  transition: background .15s ease, transform .1s ease;
}
.settings-fab:hover{ background: var(--burgundy); }
.settings-fab:active{ transform: translateY(1px); }

.settings-backdrop{
  position: fixed; inset: 0;
  background: rgba(20, 16, 8, 0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 200;
}
.settings-modal{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  max-width: 480px; width: 100%;
  max-height: 85vh; overflow-y: auto;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.5);
}
.settings-modal h2{
  font-size: 22px; margin: 0 0 4px; font-weight: 600;
}
.settings-modal .settings-sub{
  font-size: 13px; color: var(--ink-soft); font-style: italic; margin: 0 0 18px;
}
.settings-modal .field-block{ margin-top: 18px; }
.settings-modal .field-block:first-of-type{ margin-top: 0; }
.settings-modal-actions{
  margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--rule);
  display: flex; gap: 8px; flex-wrap: nowrap;
}
.settings-modal-actions button{
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 11px 4px;
  font-size: 12.5px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
}
.btn-caution{
  font-family: var(--font-serif);
  background: var(--brass);
  color: var(--on-accent);
  border: 1.5px solid var(--brass);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55);
  transition: background .15s ease;
}
.btn-caution:hover{ background: #7a5c25; border-color: #7a5c25; }
.btn-caution:active{ transform: translateY(1px); }

.btn-danger{
  font-family: var(--font-serif);
  background: var(--error);
  color: var(--on-accent);
  border: 1.5px solid var(--error);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55);
  transition: background .15s ease;
}
.btn-danger:hover{ background: #6d251b; border-color: #6d251b; }
.btn-danger:active{ transform: translateY(1px); }

.btn-dark{
  font-family: var(--font-serif);
  background: #1c1a17;
  color: var(--on-accent);
  border: 1.5px solid #1c1a17;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55);
  transition: background .15s ease;
}
.btn-dark:hover{ background: #000; border-color: #000; }
.btn-dark:active{ transform: translateY(1px); }

.btn-emerald{
  font-family: var(--font-serif);
  font-weight: 600;
  background: var(--emerald);
  color: var(--on-accent);
  border: 1.5px solid var(--emerald);
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.55);
  transition: background .15s ease;
}
.btn-emerald:hover{ background: var(--emerald-deep); border-color: var(--emerald-deep); }
.btn-emerald:active{ transform: translateY(1px); }