:root {
  color-scheme: light dark;
  --accent: #0c7a61;
  --accent-strong: #0a6250;
  --accent-soft: #dbeee8;
  --ink: #17181c;
  --ink-soft: #5a5b61;
  --ink-faint: #67686f;
  --canvas: #eae8e1;
  --surface: #ffffff;
  --line: #e3e1d9;
  --danger: #b42318;
  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --interface: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --brand-panel-bg: #0b5745;
  --brand-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'%3E%3Cg fill='%23f3f4f5' font-family='Arial, Helvetica, sans-serif' font-weight='700'%3E%3Ctext x='29' y='34' font-size='36' transform='rotate%28-47 29 34%29' text-anchor='middle' dominant-baseline='central'%3EU%3C/text%3E%3Ctext x='87' y='24' font-size='38' transform='rotate%28-33 87 24%29' text-anchor='middle' dominant-baseline='central'%3ED%3C/text%3E%3Ctext x='129' y='25' font-size='38' transform='rotate%28-14 129 25%29' text-anchor='middle' dominant-baseline='central'%3EA%3C/text%3E%3Ctext x='195' y='34' font-size='42' transform='rotate%2822 195 34%29' text-anchor='middle' dominant-baseline='central'%3EX%3C/text%3E%3Ctext x='239' y='37' font-size='38' transform='rotate%28-40 239 37%29' text-anchor='middle' dominant-baseline='central'%3EI%3C/text%3E%3Ctext x='310' y='30' font-size='42' transform='rotate%2835 310 30%29' text-anchor='middle' dominant-baseline='central'%3EH%3C/text%3E%3Ctext x='351' y='18' font-size='38' transform='rotate%2815 351 18%29' text-anchor='middle' dominant-baseline='central'%3EY%3C/text%3E%3Ctext x='423' y='35' font-size='40' transform='rotate%2835 423 35%29' text-anchor='middle' dominant-baseline='central'%3EE%3C/text%3E%3Ctext x='23' y='85' font-size='38' transform='rotate%28-13 23 85%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9C%3C/text%3E%3Ctext x='79' y='86' font-size='34' transform='rotate%2819 79 86%29' text-anchor='middle' dominant-baseline='central'%3ER%3C/text%3E%3Ctext x='140' y='75' font-size='36' transform='rotate%2822 140 75%29' text-anchor='middle' dominant-baseline='central'%3EC%3C/text%3E%3Ctext x='192' y='77' font-size='42' transform='rotate%2841 192 77%29' text-anchor='middle' dominant-baseline='central'%3ES%3C/text%3E%3Ctext x='241' y='79' font-size='34' transform='rotate%2826 241 79%29' text-anchor='middle' dominant-baseline='central'%3EN%3C/text%3E%3Ctext x='297' y='72' font-size='38' transform='rotate%28-18 297 72%29' text-anchor='middle' dominant-baseline='central'%3EB%3C/text%3E%3Ctext x='348' y='92' font-size='38' transform='rotate%286 348 92%29' text-anchor='middle' dominant-baseline='central'%3E%C3%96%3C/text%3E%3Ctext x='406' y='82' font-size='40' transform='rotate%2837 406 82%29' text-anchor='middle' dominant-baseline='central'%3EQ%3C/text%3E%3Ctext x='20' y='130' font-size='42' transform='rotate%2824 20 130%29' text-anchor='middle' dominant-baseline='central'%3EV%3C/text%3E%3Ctext x='77' y='139' font-size='40' transform='rotate%2838 77 139%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9F%3C/text%3E%3Ctext x='134' y='148' font-size='40' transform='rotate%28-35 134 148%29' text-anchor='middle' dominant-baseline='central'%3EZ%3C/text%3E%3Ctext x='184' y='128' font-size='36' transform='rotate%28-37 184 128%29' text-anchor='middle' dominant-baseline='central'%3EJ%3C/text%3E%3Ctext x='254' y='136' font-size='40' transform='rotate%28-42 254 136%29' text-anchor='middle' dominant-baseline='central'%3EP%3C/text%3E%3Ctext x='305' y='137' font-size='42' transform='rotate%28-24 305 137%29' text-anchor='middle' dominant-baseline='central'%3EL%3C/text%3E%3Ctext x='365' y='127' font-size='42' transform='rotate%2821 365 127%29' text-anchor='middle' dominant-baseline='central'%3EM%3C/text%3E%3Ctext x='418' y='143' font-size='38' transform='rotate%28-15 418 143%29' text-anchor='middle' dominant-baseline='central'%3EF%3C/text%3E%3Ctext x='26' y='191' font-size='38' transform='rotate%2844 26 191%29' text-anchor='middle' dominant-baseline='central'%3EG%3C/text%3E%3Ctext x='93' y='198' font-size='34' transform='rotate%281 93 198%29' text-anchor='middle' dominant-baseline='central'%3EW%3C/text%3E%3Ctext x='146' y='188' font-size='42' transform='rotate%2813 146 188%29' text-anchor='middle' dominant-baseline='central'%3E%C3%84%3C/text%3E%3Ctext x='186' y='190' font-size='42' transform='rotate%28-32 186 190%29' text-anchor='middle' dominant-baseline='central'%3EK%3C/text%3E%3Ctext x='257' y='195' font-size='34' transform='rotate%28-1 257 195%29' text-anchor='middle' dominant-baseline='central'%3EO%3C/text%3E%3Ctext x='312' y='201' font-size='38' transform='rotate%2832 312 201%29' text-anchor='middle' dominant-baseline='central'%3ET%3C/text%3E%3Ctext x='349' y='186' font-size='42' transform='rotate%28-16 349 186%29' text-anchor='middle' dominant-baseline='central'%3EH%3C/text%3E%3Ctext x='414' y='194' font-size='34' transform='rotate%28-47 414 194%29' text-anchor='middle' dominant-baseline='central'%3EB%3C/text%3E%3Ctext x='22' y='256' font-size='34' transform='rotate%2835 22 256%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9F%3C/text%3E%3Ctext x='83' y='243' font-size='42' transform='rotate%28-1 83 243%29' text-anchor='middle' dominant-baseline='central'%3ES%3C/text%3E%3Ctext x='129' y='257' font-size='40' transform='rotate%287 129 257%29' text-anchor='middle' dominant-baseline='central'%3EC%3C/text%3E%3Ctext x='187' y='247' font-size='34' transform='rotate%28-9 187 247%29' text-anchor='middle' dominant-baseline='central'%3EZ%3C/text%3E%3Ctext x='239' y='246' font-size='40' transform='rotate%28-7 239 246%29' text-anchor='middle' dominant-baseline='central'%3EX%3C/text%3E%3Ctext x='311' y='238' font-size='34' transform='rotate%2815 311 238%29' text-anchor='middle' dominant-baseline='central'%3EP%3C/text%3E%3Ctext x='348' y='253' font-size='34' transform='rotate%2829 348 253%29' text-anchor='middle' dominant-baseline='central'%3EY%3C/text%3E%3Ctext x='407' y='241' font-size='40' transform='rotate%28-5 407 241%29' text-anchor='middle' dominant-baseline='central'%3ER%3C/text%3E%3Ctext x='21' y='302' font-size='34' transform='rotate%2836 21 302%29' text-anchor='middle' dominant-baseline='central'%3EE%3C/text%3E%3Ctext x='81' y='310' font-size='34' transform='rotate%285 81 310%29' text-anchor='middle' dominant-baseline='central'%3ET%3C/text%3E%3Ctext x='141' y='303' font-size='34' transform='rotate%28-47 141 303%29' text-anchor='middle' dominant-baseline='central'%3EW%3C/text%3E%3Ctext x='202' y='310' font-size='40' transform='rotate%28-32 202 310%29' text-anchor='middle' dominant-baseline='central'%3EF%3C/text%3E%3Ctext x='247' y='311' font-size='36' transform='rotate%2839 247 311%29' text-anchor='middle' dominant-baseline='central'%3EI%3C/text%3E%3Ctext x='300' y='313' font-size='40' transform='rotate%28-23 300 313%29' text-anchor='middle' dominant-baseline='central'%3EU%3C/text%3E%3Ctext x='353' y='307' font-size='42' transform='rotate%2822 353 307%29' text-anchor='middle' dominant-baseline='central'%3EN%3C/text%3E%3Ctext x='416' y='302' font-size='36' transform='rotate%28-30 416 302%29' text-anchor='middle' dominant-baseline='central'%3EJ%3C/text%3E%3Ctext x='38' y='359' font-size='38' transform='rotate%284 38 359%29' text-anchor='middle' dominant-baseline='central'%3EG%3C/text%3E%3Ctext x='73' y='359' font-size='42' transform='rotate%280 73 359%29' text-anchor='middle' dominant-baseline='central'%3ED%3C/text%3E%3Ctext x='130' y='368' font-size='36' transform='rotate%28-40 130 368%29' text-anchor='middle' dominant-baseline='central'%3EO%3C/text%3E%3Ctext x='183' y='348' font-size='40' transform='rotate%2835 183 348%29' text-anchor='middle' dominant-baseline='central'%3EK%3C/text%3E%3Ctext x='239' y='366' font-size='42' transform='rotate%28-24 239 366%29' text-anchor='middle' dominant-baseline='central'%3E%C3%84%3C/text%3E%3Ctext x='292' y='348' font-size='42' transform='rotate%2815 292 348%29' text-anchor='middle' dominant-baseline='central'%3EM%3C/text%3E%3Ctext x='358' y='367' font-size='38' transform='rotate%28-28 358 367%29' text-anchor='middle' dominant-baseline='central'%3EQ%3C/text%3E%3Ctext x='407' y='355' font-size='38' transform='rotate%2816 407 355%29' text-anchor='middle' dominant-baseline='central'%3EV%3C/text%3E%3Ctext x='27' y='422' font-size='34' transform='rotate%2842 27 422%29' text-anchor='middle' dominant-baseline='central'%3EL%3C/text%3E%3Ctext x='82' y='423' font-size='34' transform='rotate%2848 82 423%29' text-anchor='middle' dominant-baseline='central'%3E%C3%96%3C/text%3E%3Ctext x='138' y='413' font-size='38' transform='rotate%28-35 138 413%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9C%3C/text%3E%3Ctext x='201' y='421' font-size='36' transform='rotate%28-13 201 421%29' text-anchor='middle' dominant-baseline='central'%3EA%3C/text%3E%3Ctext x='242' y='421' font-size='40' transform='rotate%28-43 242 421%29' text-anchor='middle' dominant-baseline='central'%3EO%3C/text%3E%3Ctext x='310' y='402' font-size='36' transform='rotate%28-16 310 402%29' text-anchor='middle' dominant-baseline='central'%3E%C3%84%3C/text%3E%3Ctext x='361' y='407' font-size='42' transform='rotate%2823 361 407%29' text-anchor='middle' dominant-baseline='central'%3ER%3C/text%3E%3Ctext x='417' y='414' font-size='36' transform='rotate%28-37 417 414%29' text-anchor='middle' dominant-baseline='central'%3EW%3C/text%3E%3C/g%3E%3C/svg%3E");
  --auth-pattern-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'%3E%3Cg fill='%2317181c' font-family='Arial, Helvetica, sans-serif' font-weight='700'%3E%3Ctext x='29' y='34' font-size='36' transform='rotate%28-47 29 34%29' text-anchor='middle' dominant-baseline='central'%3EU%3C/text%3E%3Ctext x='87' y='24' font-size='38' transform='rotate%28-33 87 24%29' text-anchor='middle' dominant-baseline='central'%3ED%3C/text%3E%3Ctext x='129' y='25' font-size='38' transform='rotate%28-14 129 25%29' text-anchor='middle' dominant-baseline='central'%3EA%3C/text%3E%3Ctext x='195' y='34' font-size='42' transform='rotate%2822 195 34%29' text-anchor='middle' dominant-baseline='central'%3EX%3C/text%3E%3Ctext x='239' y='37' font-size='38' transform='rotate%28-40 239 37%29' text-anchor='middle' dominant-baseline='central'%3EI%3C/text%3E%3Ctext x='310' y='30' font-size='42' transform='rotate%2835 310 30%29' text-anchor='middle' dominant-baseline='central'%3EH%3C/text%3E%3Ctext x='351' y='18' font-size='38' transform='rotate%2815 351 18%29' text-anchor='middle' dominant-baseline='central'%3EY%3C/text%3E%3Ctext x='423' y='35' font-size='40' transform='rotate%2835 423 35%29' text-anchor='middle' dominant-baseline='central'%3EE%3C/text%3E%3Ctext x='23' y='85' font-size='38' transform='rotate%28-13 23 85%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9C%3C/text%3E%3Ctext x='79' y='86' font-size='34' transform='rotate%2819 79 86%29' text-anchor='middle' dominant-baseline='central'%3ER%3C/text%3E%3Ctext x='140' y='75' font-size='36' transform='rotate%2822 140 75%29' text-anchor='middle' dominant-baseline='central'%3EC%3C/text%3E%3Ctext x='192' y='77' font-size='42' transform='rotate%2841 192 77%29' text-anchor='middle' dominant-baseline='central'%3ES%3C/text%3E%3Ctext x='241' y='79' font-size='34' transform='rotate%2826 241 79%29' text-anchor='middle' dominant-baseline='central'%3EN%3C/text%3E%3Ctext x='297' y='72' font-size='38' transform='rotate%28-18 297 72%29' text-anchor='middle' dominant-baseline='central'%3EB%3C/text%3E%3Ctext x='348' y='92' font-size='38' transform='rotate%286 348 92%29' text-anchor='middle' dominant-baseline='central'%3E%C3%96%3C/text%3E%3Ctext x='406' y='82' font-size='40' transform='rotate%2837 406 82%29' text-anchor='middle' dominant-baseline='central'%3EQ%3C/text%3E%3Ctext x='20' y='130' font-size='42' transform='rotate%2824 20 130%29' text-anchor='middle' dominant-baseline='central'%3EV%3C/text%3E%3Ctext x='77' y='139' font-size='40' transform='rotate%2838 77 139%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9F%3C/text%3E%3Ctext x='134' y='148' font-size='40' transform='rotate%28-35 134 148%29' text-anchor='middle' dominant-baseline='central'%3EZ%3C/text%3E%3Ctext x='184' y='128' font-size='36' transform='rotate%28-37 184 128%29' text-anchor='middle' dominant-baseline='central'%3EJ%3C/text%3E%3Ctext x='254' y='136' font-size='40' transform='rotate%28-42 254 136%29' text-anchor='middle' dominant-baseline='central'%3EP%3C/text%3E%3Ctext x='305' y='137' font-size='42' transform='rotate%28-24 305 137%29' text-anchor='middle' dominant-baseline='central'%3EL%3C/text%3E%3Ctext x='365' y='127' font-size='42' transform='rotate%2821 365 127%29' text-anchor='middle' dominant-baseline='central'%3EM%3C/text%3E%3Ctext x='418' y='143' font-size='38' transform='rotate%28-15 418 143%29' text-anchor='middle' dominant-baseline='central'%3EF%3C/text%3E%3Ctext x='26' y='191' font-size='38' transform='rotate%2844 26 191%29' text-anchor='middle' dominant-baseline='central'%3EG%3C/text%3E%3Ctext x='93' y='198' font-size='34' transform='rotate%281 93 198%29' text-anchor='middle' dominant-baseline='central'%3EW%3C/text%3E%3Ctext x='146' y='188' font-size='42' transform='rotate%2813 146 188%29' text-anchor='middle' dominant-baseline='central'%3E%C3%84%3C/text%3E%3Ctext x='186' y='190' font-size='42' transform='rotate%28-32 186 190%29' text-anchor='middle' dominant-baseline='central'%3EK%3C/text%3E%3Ctext x='257' y='195' font-size='34' transform='rotate%28-1 257 195%29' text-anchor='middle' dominant-baseline='central'%3EO%3C/text%3E%3Ctext x='312' y='201' font-size='38' transform='rotate%2832 312 201%29' text-anchor='middle' dominant-baseline='central'%3ET%3C/text%3E%3Ctext x='349' y='186' font-size='42' transform='rotate%28-16 349 186%29' text-anchor='middle' dominant-baseline='central'%3EH%3C/text%3E%3Ctext x='414' y='194' font-size='34' transform='rotate%28-47 414 194%29' text-anchor='middle' dominant-baseline='central'%3EB%3C/text%3E%3Ctext x='22' y='256' font-size='34' transform='rotate%2835 22 256%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9F%3C/text%3E%3Ctext x='83' y='243' font-size='42' transform='rotate%28-1 83 243%29' text-anchor='middle' dominant-baseline='central'%3ES%3C/text%3E%3Ctext x='129' y='257' font-size='40' transform='rotate%287 129 257%29' text-anchor='middle' dominant-baseline='central'%3EC%3C/text%3E%3Ctext x='187' y='247' font-size='34' transform='rotate%28-9 187 247%29' text-anchor='middle' dominant-baseline='central'%3EZ%3C/text%3E%3Ctext x='239' y='246' font-size='40' transform='rotate%28-7 239 246%29' text-anchor='middle' dominant-baseline='central'%3EX%3C/text%3E%3Ctext x='311' y='238' font-size='34' transform='rotate%2815 311 238%29' text-anchor='middle' dominant-baseline='central'%3EP%3C/text%3E%3Ctext x='348' y='253' font-size='34' transform='rotate%2829 348 253%29' text-anchor='middle' dominant-baseline='central'%3EY%3C/text%3E%3Ctext x='407' y='241' font-size='40' transform='rotate%28-5 407 241%29' text-anchor='middle' dominant-baseline='central'%3ER%3C/text%3E%3Ctext x='21' y='302' font-size='34' transform='rotate%2836 21 302%29' text-anchor='middle' dominant-baseline='central'%3EE%3C/text%3E%3Ctext x='81' y='310' font-size='34' transform='rotate%285 81 310%29' text-anchor='middle' dominant-baseline='central'%3ET%3C/text%3E%3Ctext x='141' y='303' font-size='34' transform='rotate%28-47 141 303%29' text-anchor='middle' dominant-baseline='central'%3EW%3C/text%3E%3Ctext x='202' y='310' font-size='40' transform='rotate%28-32 202 310%29' text-anchor='middle' dominant-baseline='central'%3EF%3C/text%3E%3Ctext x='247' y='311' font-size='36' transform='rotate%2839 247 311%29' text-anchor='middle' dominant-baseline='central'%3EI%3C/text%3E%3Ctext x='300' y='313' font-size='40' transform='rotate%28-23 300 313%29' text-anchor='middle' dominant-baseline='central'%3EU%3C/text%3E%3Ctext x='353' y='307' font-size='42' transform='rotate%2822 353 307%29' text-anchor='middle' dominant-baseline='central'%3EN%3C/text%3E%3Ctext x='416' y='302' font-size='36' transform='rotate%28-30 416 302%29' text-anchor='middle' dominant-baseline='central'%3EJ%3C/text%3E%3Ctext x='38' y='359' font-size='38' transform='rotate%284 38 359%29' text-anchor='middle' dominant-baseline='central'%3EG%3C/text%3E%3Ctext x='73' y='359' font-size='42' transform='rotate%280 73 359%29' text-anchor='middle' dominant-baseline='central'%3ED%3C/text%3E%3Ctext x='130' y='368' font-size='36' transform='rotate%28-40 130 368%29' text-anchor='middle' dominant-baseline='central'%3EO%3C/text%3E%3Ctext x='183' y='348' font-size='40' transform='rotate%2835 183 348%29' text-anchor='middle' dominant-baseline='central'%3EK%3C/text%3E%3Ctext x='239' y='366' font-size='42' transform='rotate%28-24 239 366%29' text-anchor='middle' dominant-baseline='central'%3E%C3%84%3C/text%3E%3Ctext x='292' y='348' font-size='42' transform='rotate%2815 292 348%29' text-anchor='middle' dominant-baseline='central'%3EM%3C/text%3E%3Ctext x='358' y='367' font-size='38' transform='rotate%28-28 358 367%29' text-anchor='middle' dominant-baseline='central'%3EQ%3C/text%3E%3Ctext x='407' y='355' font-size='38' transform='rotate%2816 407 355%29' text-anchor='middle' dominant-baseline='central'%3EV%3C/text%3E%3Ctext x='27' y='422' font-size='34' transform='rotate%2842 27 422%29' text-anchor='middle' dominant-baseline='central'%3EL%3C/text%3E%3Ctext x='82' y='423' font-size='34' transform='rotate%2848 82 423%29' text-anchor='middle' dominant-baseline='central'%3E%C3%96%3C/text%3E%3Ctext x='138' y='413' font-size='38' transform='rotate%28-35 138 413%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9C%3C/text%3E%3Ctext x='201' y='421' font-size='36' transform='rotate%28-13 201 421%29' text-anchor='middle' dominant-baseline='central'%3EA%3C/text%3E%3Ctext x='242' y='421' font-size='40' transform='rotate%28-43 242 421%29' text-anchor='middle' dominant-baseline='central'%3EO%3C/text%3E%3Ctext x='310' y='402' font-size='36' transform='rotate%28-16 310 402%29' text-anchor='middle' dominant-baseline='central'%3E%C3%84%3C/text%3E%3Ctext x='361' y='407' font-size='42' transform='rotate%2823 361 407%29' text-anchor='middle' dominant-baseline='central'%3ER%3C/text%3E%3Ctext x='417' y='414' font-size='36' transform='rotate%28-37 417 414%29' text-anchor='middle' dominant-baseline='central'%3EW%3C/text%3E%3C/g%3E%3C/svg%3E");
  --auth-pattern-image-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='440' height='440' viewBox='0 0 440 440'%3E%3Cg fill='%23f3f4f5' font-family='Arial, Helvetica, sans-serif' font-weight='700'%3E%3Ctext x='29' y='34' font-size='36' transform='rotate%28-47 29 34%29' text-anchor='middle' dominant-baseline='central'%3EU%3C/text%3E%3Ctext x='87' y='24' font-size='38' transform='rotate%28-33 87 24%29' text-anchor='middle' dominant-baseline='central'%3ED%3C/text%3E%3Ctext x='129' y='25' font-size='38' transform='rotate%28-14 129 25%29' text-anchor='middle' dominant-baseline='central'%3EA%3C/text%3E%3Ctext x='195' y='34' font-size='42' transform='rotate%2822 195 34%29' text-anchor='middle' dominant-baseline='central'%3EX%3C/text%3E%3Ctext x='239' y='37' font-size='38' transform='rotate%28-40 239 37%29' text-anchor='middle' dominant-baseline='central'%3EI%3C/text%3E%3Ctext x='310' y='30' font-size='42' transform='rotate%2835 310 30%29' text-anchor='middle' dominant-baseline='central'%3EH%3C/text%3E%3Ctext x='351' y='18' font-size='38' transform='rotate%2815 351 18%29' text-anchor='middle' dominant-baseline='central'%3EY%3C/text%3E%3Ctext x='423' y='35' font-size='40' transform='rotate%2835 423 35%29' text-anchor='middle' dominant-baseline='central'%3EE%3C/text%3E%3Ctext x='23' y='85' font-size='38' transform='rotate%28-13 23 85%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9C%3C/text%3E%3Ctext x='79' y='86' font-size='34' transform='rotate%2819 79 86%29' text-anchor='middle' dominant-baseline='central'%3ER%3C/text%3E%3Ctext x='140' y='75' font-size='36' transform='rotate%2822 140 75%29' text-anchor='middle' dominant-baseline='central'%3EC%3C/text%3E%3Ctext x='192' y='77' font-size='42' transform='rotate%2841 192 77%29' text-anchor='middle' dominant-baseline='central'%3ES%3C/text%3E%3Ctext x='241' y='79' font-size='34' transform='rotate%2826 241 79%29' text-anchor='middle' dominant-baseline='central'%3EN%3C/text%3E%3Ctext x='297' y='72' font-size='38' transform='rotate%28-18 297 72%29' text-anchor='middle' dominant-baseline='central'%3EB%3C/text%3E%3Ctext x='348' y='92' font-size='38' transform='rotate%286 348 92%29' text-anchor='middle' dominant-baseline='central'%3E%C3%96%3C/text%3E%3Ctext x='406' y='82' font-size='40' transform='rotate%2837 406 82%29' text-anchor='middle' dominant-baseline='central'%3EQ%3C/text%3E%3Ctext x='20' y='130' font-size='42' transform='rotate%2824 20 130%29' text-anchor='middle' dominant-baseline='central'%3EV%3C/text%3E%3Ctext x='77' y='139' font-size='40' transform='rotate%2838 77 139%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9F%3C/text%3E%3Ctext x='134' y='148' font-size='40' transform='rotate%28-35 134 148%29' text-anchor='middle' dominant-baseline='central'%3EZ%3C/text%3E%3Ctext x='184' y='128' font-size='36' transform='rotate%28-37 184 128%29' text-anchor='middle' dominant-baseline='central'%3EJ%3C/text%3E%3Ctext x='254' y='136' font-size='40' transform='rotate%28-42 254 136%29' text-anchor='middle' dominant-baseline='central'%3EP%3C/text%3E%3Ctext x='305' y='137' font-size='42' transform='rotate%28-24 305 137%29' text-anchor='middle' dominant-baseline='central'%3EL%3C/text%3E%3Ctext x='365' y='127' font-size='42' transform='rotate%2821 365 127%29' text-anchor='middle' dominant-baseline='central'%3EM%3C/text%3E%3Ctext x='418' y='143' font-size='38' transform='rotate%28-15 418 143%29' text-anchor='middle' dominant-baseline='central'%3EF%3C/text%3E%3Ctext x='26' y='191' font-size='38' transform='rotate%2844 26 191%29' text-anchor='middle' dominant-baseline='central'%3EG%3C/text%3E%3Ctext x='93' y='198' font-size='34' transform='rotate%281 93 198%29' text-anchor='middle' dominant-baseline='central'%3EW%3C/text%3E%3Ctext x='146' y='188' font-size='42' transform='rotate%2813 146 188%29' text-anchor='middle' dominant-baseline='central'%3E%C3%84%3C/text%3E%3Ctext x='186' y='190' font-size='42' transform='rotate%28-32 186 190%29' text-anchor='middle' dominant-baseline='central'%3EK%3C/text%3E%3Ctext x='257' y='195' font-size='34' transform='rotate%28-1 257 195%29' text-anchor='middle' dominant-baseline='central'%3EO%3C/text%3E%3Ctext x='312' y='201' font-size='38' transform='rotate%2832 312 201%29' text-anchor='middle' dominant-baseline='central'%3ET%3C/text%3E%3Ctext x='349' y='186' font-size='42' transform='rotate%28-16 349 186%29' text-anchor='middle' dominant-baseline='central'%3EH%3C/text%3E%3Ctext x='414' y='194' font-size='34' transform='rotate%28-47 414 194%29' text-anchor='middle' dominant-baseline='central'%3EB%3C/text%3E%3Ctext x='22' y='256' font-size='34' transform='rotate%2835 22 256%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9F%3C/text%3E%3Ctext x='83' y='243' font-size='42' transform='rotate%28-1 83 243%29' text-anchor='middle' dominant-baseline='central'%3ES%3C/text%3E%3Ctext x='129' y='257' font-size='40' transform='rotate%287 129 257%29' text-anchor='middle' dominant-baseline='central'%3EC%3C/text%3E%3Ctext x='187' y='247' font-size='34' transform='rotate%28-9 187 247%29' text-anchor='middle' dominant-baseline='central'%3EZ%3C/text%3E%3Ctext x='239' y='246' font-size='40' transform='rotate%28-7 239 246%29' text-anchor='middle' dominant-baseline='central'%3EX%3C/text%3E%3Ctext x='311' y='238' font-size='34' transform='rotate%2815 311 238%29' text-anchor='middle' dominant-baseline='central'%3EP%3C/text%3E%3Ctext x='348' y='253' font-size='34' transform='rotate%2829 348 253%29' text-anchor='middle' dominant-baseline='central'%3EY%3C/text%3E%3Ctext x='407' y='241' font-size='40' transform='rotate%28-5 407 241%29' text-anchor='middle' dominant-baseline='central'%3ER%3C/text%3E%3Ctext x='21' y='302' font-size='34' transform='rotate%2836 21 302%29' text-anchor='middle' dominant-baseline='central'%3EE%3C/text%3E%3Ctext x='81' y='310' font-size='34' transform='rotate%285 81 310%29' text-anchor='middle' dominant-baseline='central'%3ET%3C/text%3E%3Ctext x='141' y='303' font-size='34' transform='rotate%28-47 141 303%29' text-anchor='middle' dominant-baseline='central'%3EW%3C/text%3E%3Ctext x='202' y='310' font-size='40' transform='rotate%28-32 202 310%29' text-anchor='middle' dominant-baseline='central'%3EF%3C/text%3E%3Ctext x='247' y='311' font-size='36' transform='rotate%2839 247 311%29' text-anchor='middle' dominant-baseline='central'%3EI%3C/text%3E%3Ctext x='300' y='313' font-size='40' transform='rotate%28-23 300 313%29' text-anchor='middle' dominant-baseline='central'%3EU%3C/text%3E%3Ctext x='353' y='307' font-size='42' transform='rotate%2822 353 307%29' text-anchor='middle' dominant-baseline='central'%3EN%3C/text%3E%3Ctext x='416' y='302' font-size='36' transform='rotate%28-30 416 302%29' text-anchor='middle' dominant-baseline='central'%3EJ%3C/text%3E%3Ctext x='38' y='359' font-size='38' transform='rotate%284 38 359%29' text-anchor='middle' dominant-baseline='central'%3EG%3C/text%3E%3Ctext x='73' y='359' font-size='42' transform='rotate%280 73 359%29' text-anchor='middle' dominant-baseline='central'%3ED%3C/text%3E%3Ctext x='130' y='368' font-size='36' transform='rotate%28-40 130 368%29' text-anchor='middle' dominant-baseline='central'%3EO%3C/text%3E%3Ctext x='183' y='348' font-size='40' transform='rotate%2835 183 348%29' text-anchor='middle' dominant-baseline='central'%3EK%3C/text%3E%3Ctext x='239' y='366' font-size='42' transform='rotate%28-24 239 366%29' text-anchor='middle' dominant-baseline='central'%3E%C3%84%3C/text%3E%3Ctext x='292' y='348' font-size='42' transform='rotate%2815 292 348%29' text-anchor='middle' dominant-baseline='central'%3EM%3C/text%3E%3Ctext x='358' y='367' font-size='38' transform='rotate%28-28 358 367%29' text-anchor='middle' dominant-baseline='central'%3EQ%3C/text%3E%3Ctext x='407' y='355' font-size='38' transform='rotate%2816 407 355%29' text-anchor='middle' dominant-baseline='central'%3EV%3C/text%3E%3Ctext x='27' y='422' font-size='34' transform='rotate%2842 27 422%29' text-anchor='middle' dominant-baseline='central'%3EL%3C/text%3E%3Ctext x='82' y='423' font-size='34' transform='rotate%2848 82 423%29' text-anchor='middle' dominant-baseline='central'%3E%C3%96%3C/text%3E%3Ctext x='138' y='413' font-size='38' transform='rotate%28-35 138 413%29' text-anchor='middle' dominant-baseline='central'%3E%C3%9C%3C/text%3E%3Ctext x='201' y='421' font-size='36' transform='rotate%28-13 201 421%29' text-anchor='middle' dominant-baseline='central'%3EA%3C/text%3E%3Ctext x='242' y='421' font-size='40' transform='rotate%28-43 242 421%29' text-anchor='middle' dominant-baseline='central'%3EO%3C/text%3E%3Ctext x='310' y='402' font-size='36' transform='rotate%28-16 310 402%29' text-anchor='middle' dominant-baseline='central'%3E%C3%84%3C/text%3E%3Ctext x='361' y='407' font-size='42' transform='rotate%2823 361 407%29' text-anchor='middle' dominant-baseline='central'%3ER%3C/text%3E%3Ctext x='417' y='414' font-size='36' transform='rotate%28-37 417 414%29' text-anchor='middle' dominant-baseline='central'%3EW%3C/text%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Fluid root scale: 1rem stays at the user's preferred size on phones and laptops,
   then grows gently on larger desktops so type and rem-based layout adapt together.
   16px default → ~16.4px at 1920w → ~17.1px at 2560w, capped at 112.5%. */
html { font-size: clamp(100%, 90.625% + 0.1vw, 112.5%); }

html, body { min-height: 100%; margin: 0; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--interface);
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }
/* Screen headings are focused programmatically for screen-reader announcement on
   navigation; they are not interactive, so suppress the default focus ring that
   otherwise flashed a browser-orange outline on every screen change. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
button { cursor: pointer; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.auth-shell {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(440px, 39%) 1fr;
  overflow: clip;
}

.brand-panel {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100%;
  padding: clamp(48px, 5vw, 72px) clamp(40px, 4.5vw, 80px);
  overflow: hidden;
  background: var(--brand-panel-bg, var(--accent-strong));
  color: #fff;
}
.brand-pattern { position: absolute; inset: 0; background-image: var(--brand-pattern-image); background-size: 340px 340px; opacity: .08; mix-blend-mode: soft-light; pointer-events: none; }
.brand-panel-inner { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 460px; margin: auto; }

.wordmark { display: grid; gap: 0; width: max-content; }
/* Default wordmark sits on light/canvas surfaces (sidebars). The white treatment
   is scoped to the brand panel only, which has the deep teal background. */
.wordmark span { color: var(--accent-strong); font-size: 0.8125rem; font-weight: 700; letter-spacing: .16em; }
.wordmark strong { color: var(--ink); font-family: var(--display); font-size: 2.125rem; letter-spacing: -.045em; line-height: 1.05; }
.brand-panel .wordmark span { color: rgb(255 255 255 / 72%); }
.brand-panel .wordmark strong { color: #fff; }

.brand-copy { margin-top: clamp(40px, 7vh, 88px); }
/* Default eyebrow sits on light/canvas surfaces app-wide. The white variant is
   scoped to the brand panel only, which has the deep teal background. */
.eyebrow { margin: 0 0 22px; color: var(--accent-strong); font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; }
.brand-copy .eyebrow { color: rgb(255 255 255 / 78%); letter-spacing: .14em; }
.brand-copy h1 { margin: 0; font-family: var(--display); font-size: clamp(2.5rem, 3.4vw, 3.5rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.04; }
.brand-copy > p:not(.eyebrow) { margin: 22px 0 40px; max-width: 25em; color: rgb(255 255 255 / 82%); font-size: 1.0625rem; line-height: 1.6; }
.brand-copy > p em { font-style: normal; font-weight: 700; color: #fff; }
.brand-features { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.brand-features li { position: relative; padding-left: 30px; }
.brand-features li::before { position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px; background: rgb(255 255 255 / 16%); color: #fff; content: "✓"; font-size: 0.6875rem; font-weight: 700; }
.brand-features strong { display: block; color: #fff; font-size: 1rem; font-weight: 700; letter-spacing: -.01em; }
.brand-features span { display: block; margin-top: 3px; color: rgb(255 255 255 / 74%); font-size: 0.9375rem; line-height: 1.45; }
.brand-foot { margin: clamp(40px, 7vh, 72px) 0 0; color: rgb(255 255 255 / 62%); font-size: 0.8125rem; letter-spacing: .01em; }
.brand-credit { margin: 6px 0 0; color: rgb(255 255 255 / 52%); font-size: 0.8125rem; letter-spacing: .01em; }
.brand-credit strong { color: rgb(255 255 255 / 78%); font-weight: 600; }

/* Quiet authorship credit at the foot of the Account panel. */
.app-credit { margin: 18px 0 0; color: var(--ink-faint); font-size: 0.75rem; line-height: 1.125rem; text-align: center; }
.app-credit strong { color: var(--ink-soft); font-weight: 600; }

.auth-stage { position: relative; display: grid; min-width: 0; place-items: center; padding: 64px 32px; background: var(--canvas); overflow: hidden; }
.alphabet-pattern { position: absolute; inset: 0; background-image: var(--auth-pattern-image); background-size: 300px 300px; opacity: .05; user-select: none; }

.auth-card { position: relative; z-index: 1; display: grid; width: min(30rem, 100%); gap: 18px; padding: 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 10px 14px rgb(20 26 41 / 10%); }
/* Official wordmark on the sign-in card. Hidden on desktop (the brand panel already
   carries it); shown wherever the brand panel is hidden. Fills are theme-aware so
   the ink half stays visible on the dark card. */
.auth-logo { display: none; }
.auth-logo-eyebrow { fill: var(--accent-strong); }
.auth-logo-word { fill: var(--ink); }
.auth-intro { text-align: center; }
.auth-intro h2 { margin: 0; font-family: var(--display); font-size: 2rem; letter-spacing: -.035em; line-height: 1.25; }
.auth-intro p { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.5; }
.auth-message { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 0.875rem; line-height: 1.35; }
.auth-message[data-kind="error"] { background: #fef3f2; color: var(--danger); }
.auth-message[data-kind="success"] { background: var(--accent-soft); color: var(--accent-strong); }
.auth-message[data-kind="info"] { background: #f4f4f5; color: var(--ink-soft); }

.auth-form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; color: var(--ink); font-size: 0.875rem; font-weight: 600; letter-spacing: .007em; }
.field input { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: var(--surface); color: var(--ink); font-size: 1rem; line-height: 1.5rem; }
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.password-control { display: grid; align-items: center; }
.password-control input { grid-area: 1 / 1; padding-right: 72px; }
.text-button { grid-area: 1 / 1; justify-self: end; margin-right: 16px; border: 0; background: none; color: var(--accent-strong); font-size: 0.875rem; font-weight: 600; }
.forgot-link { display: inline-flex; align-items: center; justify-self: end; min-height: 44px; margin-block: -7px; padding: 0; border: 0; background: none; color: var(--accent-strong); font-size: 0.875rem; font-weight: 600; text-align: right; }
.auth-switch button { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; padding: 0 4px; }
.remember-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px; border-radius: 12px; color: var(--ink); font-size: 0.875rem; }
.remember-row input { appearance: none; display: grid; width: 22px; height: 22px; margin: 0; place-content: center; border: 1.5px solid var(--line); border-radius: 8px; background: var(--surface); }
.remember-row input::before { width: 12px; height: 12px; transform: scale(0); color: #fff; content: "✓"; font-size: 0.8125rem; line-height: 0.75rem; transition: transform 120ms ease; }
.remember-row input:checked { border-color: var(--accent); background: var(--accent); }
.remember-row input:checked::before { transform: scale(1); }
.primary-button { min-height: 56px; border: 0; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; }
.primary-button:hover { background: var(--accent-strong); }
.primary-button:disabled { cursor: wait; opacity: .7; }
.auth-switch { min-height: 30px; margin: 0; color: var(--ink-soft); font-size: 0.875rem; text-align: center; }
.auth-switch button { border: 0; background: none; color: var(--accent-strong); font-weight: 600; }
.privacy-link { justify-self: center; color: var(--ink-faint); font-size: 0.8125rem; text-underline-offset: 3px; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.password-rule { margin: -6px 0 0; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.45; }

@media (max-width: 980px) {
  .auth-shell { grid-template-columns: 1fr; }
  .brand-panel { display: none; }
  .auth-stage { min-height: 100dvh; padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom)); }
  .auth-card { width: min(30rem, 100%); gap: 16px; }
  /* On phones/tablets the wordmark is the lead brand element, so it reads larger
     than the page title below it. */
  .auth-card .auth-logo { display: block; justify-self: center; width: min(268px, 80%); height: auto; margin: 6px 0 14px; }
  .auth-card .auth-intro h2 { font-size: 1.625rem; line-height: 1.2; }
  .auth-card .auth-intro p { font-size: 0.9375rem; }
}

@media (max-width: 480px) {
  .auth-stage { align-items: start; padding-inline: 16px; }
  .auth-card { margin-top: max(28px, env(safe-area-inset-top)); padding: 24px; border-radius: 20px; }
  .auth-intro h2 { font-size: 1.75rem; }
  .two-fields { grid-template-columns: 1fr; gap: 18px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --accent: #0c7a61; --accent-strong: #86cfbd; --accent-soft: #202225; --ink: #f3f4f5; --ink-soft: #b8bcc2; --ink-faint: #90959c; --canvas: #0b0c0e; --surface: #151619; --line: #303238; --dark-muted-surface: #1c1e21; }
    html:not([data-theme]) .auth-message[data-kind="error"] { background: #26191b; color: #ffb4ab; }
  html:not([data-theme]) .auth-message[data-kind="info"] { background: #1b1f21; color: var(--ink-soft); }
  html:not([data-theme]) .progress-metrics .needs-practice { border-color: #b97512; background: #252015; color: #ffd08a; }
}

/* Every learner screen shares one recessed page tone (canvas) with an elevated
   white sidebar and elevated cards, so depth and colour stay consistent across
   all tabs in both themes. */
.dashboard { display: grid; min-height: 100dvh; grid-template-columns: 256px 1fr; background: var(--canvas); }
.app-sidebar { position: sticky; top: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; height: 100dvh; min-height: 0; padding: 24px 16px 20px; overflow: hidden; border-right: 1px solid var(--line); background: var(--surface); }
.app-wordmark { margin: 0 0 10px; }
.app-wordmark span { font-size: 0.8125rem; }
.app-wordmark strong { font-size: 1.75rem; }
.app-sidebar nav { display: grid; min-height: 0; gap: 6px; overflow-y: auto; align-content: start; scrollbar-width: thin; }
.app-sidebar nav p { margin: 18px 12px 2px; color: var(--ink-faint); font-size: 0.75rem; font-weight: 700; letter-spacing: .083em; }
.nav-item { min-height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-soft); font-weight: 600; text-align: left; }
.nav-item.active { background: var(--accent-soft); color: var(--accent-strong); }
.nav-item:disabled { cursor: default; opacity: 1; }
.account-entry { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 0; padding: 12px; border: 0; border-radius: 12px; background: var(--canvas); color: var(--ink); text-align: left; }
.account-entry > span:first-child { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 16px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.75rem; font-weight: 700; }
.account-entry strong, .account-entry small { display: block; }
.account-entry strong { font-size: 0.875rem; }
.account-entry:disabled { cursor: not-allowed; opacity: .62; }
.account-entry small { margin-top: 2px; color: var(--ink-faint); font-size: 0.75rem; }
.dashboard-content { width: min(100%, 66.5rem); padding: clamp(40px, 5vw, 64px) clamp(24px, 4.4vw, 56px); }
.dashboard-heading { display: grid; gap: 5px; }
.dashboard-heading h1 { margin: 0; font-family: var(--display); font-size: 2rem; letter-spacing: -.035em; line-height: 1.25; }
.dashboard-heading p { margin: 0; color: var(--ink-faint); font-size: 1rem; line-height: 1.5rem; }
/* Width matches the two mode cards below (2 × 300px + 16px gap) for a uniform column. */
.source-card { display: flex; align-items: center; justify-content: space-between; width: min(100%, 616px); min-height: 72px; margin-top: 36px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; }
.source-card > span:first-child { display: grid; gap: 2px; }
.source-card small { color: var(--ink-faint); font-size: 0.75rem; font-weight: 500; letter-spacing: .025em; }
.source-card strong { font-size: 0.875rem; font-weight: 500; }
.source-action { display: flex; align-items: center; gap: 8px; color: var(--accent-strong); }
.source-action span { font-size: 1.5rem; line-height: 1; }
.mode-grid { display: grid; width: min(100%, 616px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.mode-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 176px; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); text-align: left; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.mode-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 8px 20px rgb(20 26 41 / 8%); transform: translateY(-1px); }
.mode-card > span:first-child { display: grid; gap: 10px; }
.mode-card strong { font-family: var(--display); font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.mode-card small { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.mode-card > span:last-child { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; }
.mode-card b { font-weight: 600; }
.mode-card i { font-size: 1.25rem; font-style: normal; }
.progress-card { display: grid; gap: 18px; width: min(100%, 45rem); margin-top: 44px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.progress-card header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; }
.progress-card header > span { flex: 1 1 auto; min-width: 0; }
.progress-card h2 { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.3; }
.progress-card header p { margin: 2px 0 0; color: var(--ink-faint); font-size: 0.875rem; }
.progress-card header button { flex: 0 0 auto; min-height: 40px; border: 0; background: transparent; color: var(--accent-strong); font-size: 0.875rem; font-weight: 600; }
.progress-body { display: grid; grid-template-columns: 444px 1fr; gap: 24px; align-items: start; }
.progress-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
/* A tint of the ink colour reads as a gentle recessed fill inside the card in
   both themes, instead of the page tone which looked like a dark hole in dark mode. */
.progress-metrics article { display: grid; gap: 4px; min-height: 96px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
.progress-metrics article strong { font-family: var(--display); font-size: 1.5rem; }
.progress-metrics article span { color: var(--ink-faint); font-size: 0.875rem; }
.progress-metrics .needs-practice { border: 1px solid #c07f0a; background: #f8edd8; color: #8a5200; }
.progress-metrics .needs-practice span { color: inherit; }
.progress-note { margin: 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.weekly-progress { display: grid; grid-column: 1 / -1; gap: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
/* The summary number sits optically beside the label block rather than resting
   on the bar row below it. */
.weekly-progress header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.weekly-progress header > span { display: grid; gap: 2px; }
.weekly-progress header strong { color: var(--ink); font-size: 0.875rem; line-height: 1.25rem; }
.weekly-progress header small { color: var(--ink-faint); font-size: 0.8125rem; line-height: 1.125rem; }
.weekly-progress header b { color: var(--accent-strong); font-family: var(--display); font-size: 1.625rem; line-height: 1; }
.weekly-progress-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 8px; min-height: 72px; }
.weekly-progress-day { display: grid; justify-items: center; align-items: end; gap: 6px; min-width: 0; height: 72px; }
.weekly-progress-bar { display: block; width: min(100%, 1.625rem); height: var(--weekly-activity); min-height: 5px; border-radius: 999px; background: var(--accent); transition: height .2s ease; }
.weekly-progress-day small { color: var(--ink-faint); font-size: 0.625rem; line-height: 0.875rem; white-space: nowrap; }
.mobile-nav { display: none; }

.guide-content { width: min(100%, 66.5rem); padding: 64px 56px 88px; }
.guide-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; max-width: 740px; }
.guide-heading .back-button { display: none; }
.guide-heading-copy { min-width: 0; }
.guide-heading .eyebrow { margin-bottom: 12px; }
.guide-heading h1 { margin: 0; font-family: var(--display); font-size: clamp(2.25rem, 4vw, 3rem); letter-spacing: -.045em; line-height: 1.08; }
.guide-heading-copy > p:last-child { margin: 14px 0 0; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.625rem; }
.guide-section { width: min(100%, 58.5rem); margin-top: 48px; }
.guide-section > header h2 { margin: 0; font-family: var(--display); font-size: 1.5rem; letter-spacing: -.025em; line-height: 1.25; }
.guide-section > header p { margin: 7px 0 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.375rem; }
.guide-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.guide-card-grid article, .guide-mode-grid article { min-height: 166px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.guide-card-grid h3, .guide-mode-grid h3 { margin: 0; font-family: var(--display); font-size: 1.125rem; letter-spacing: -.02em; line-height: 1.3; }
.guide-card-grid p, .guide-mode-grid p { margin: 9px 0 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.guide-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.guide-mode-grid article { position: relative; min-height: 196px; padding-top: 48px; }
.guide-number { position: absolute; top: 18px; left: 20px; color: var(--accent-strong); font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; }
.guide-review-rules dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0 0; }
.guide-review-rules dl > div { min-height: 128px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.guide-review-rules dt { font-family: var(--display); font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; }
.guide-review-rules dd { margin: 7px 0 0; font-size: 0.8125rem; line-height: 1.125rem; }
.guide-review-rules .again { border-color: #d64532; background: #fbe8e5; color: #b83324; }
.guide-review-rules .hard { border-color: #c07f0a; background: #f8edd8; color: #8a5200; }
.guide-review-rules .good { border-color: #2563eb; background: #e6eefe; color: #1d4ed8; }
.guide-review-rules .easy { border-color: #168649; background: #e0f2e8; color: #126b3d; }
.guide-back-button { display: block; width: min(20rem, 100%); margin-top: 48px; }

.admin-console { display: grid; min-height: 100dvh; grid-template-columns: 256px 1fr; background: var(--canvas); }
.admin-sidebar { position: sticky; top: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px; height: 100dvh; min-height: 0; padding: 24px 16px 20px; overflow: hidden; border-right: 1px solid var(--line); background: var(--surface); }
.admin-sidebar .wordmark { display: grid; gap: 2px; }
.admin-sidebar .wordmark small { color: var(--ink-faint); font-family: var(--interface); font-size: 0.8125rem; }
.admin-sidebar nav { display: grid; min-height: 0; gap: 8px; align-content: start; overflow-y: auto; scrollbar-width: thin; }
.admin-sidebar nav > p { margin: 0 12px 2px; color: var(--ink-faint); font-size: 0.75rem; font-weight: 700; letter-spacing: .08em; }
.admin-nav-item { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink-soft); font-size: 0.9375rem; font-weight: 600; text-align: left; }
.admin-nav-item.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.admin-nav-item:disabled { cursor: default; opacity: 1; }
.admin-nav-item b { min-width: 28px; padding: 3px 7px; border: 1px solid #c07f0a; border-radius: 999px; background: #f8edd8; color: #8a5200; font-size: 0.75rem; text-align: center; }
.admin-identity { display: grid; gap: 2px; width: 100%; margin-top: auto; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--canvas); color: var(--ink); text-align: left; }
.admin-identity span { font-size: 0.875rem; font-weight: 600; }
.admin-identity small { color: var(--ink-faint); font-size: 0.75rem; }
.admin-content { width: min(67rem, 100%); padding: 54px 32px 72px; }
.admin-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.admin-heading h1 { margin: 0; font-family: var(--display); font-size: 2rem; letter-spacing: -.035em; line-height: 1.25; }
.admin-heading p { margin: 6px 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.375rem; }
.admin-heading time { padding-top: 12px; color: var(--ink-faint); font-size: 0.875rem; white-space: nowrap; }
.admin-heading-actions { display: flex; align-items: center; gap: 12px; }
.admin-heading-actions .secondary-button { min-height: 40px; padding-inline: 14px; }
.admin-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.admin-status { display: grid; align-content: start; gap: 6px; min-height: 154px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.admin-status strong { font-family: var(--display); font-size: 2rem; letter-spacing: -.035em; line-height: 2.5rem; }
.admin-status span { font-size: 0.9375rem; font-weight: 600; }
.admin-status small { margin-top: auto; color: var(--ink-soft); font-size: 0.8125rem; }
.admin-status.pending { border-color: #c07f0a; background: #f8edd8; color: #8a5200; }
.admin-status.pending small { color: inherit; }
.admin-status.info { border-color: #2563eb; background: #e6eefe; color: #1d4ed8; }
.admin-status.info small { color: inherit; }
.admin-status.accent { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.admin-status.accent small { color: var(--accent-strong); }
.admin-status.neutral { background: var(--surface); }
.admin-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 24px; margin-top: 30px; }
.admin-panel { min-height: 330px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.admin-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.admin-panel h2 { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.6875rem; }
.admin-panel header p { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.1875rem; }
.admin-panel .primary-button { min-height: 40px; padding-inline: 14px; white-space: nowrap; }
.admin-list { display: grid; gap: 12px; margin-top: 22px; }
/* Stacked so the message keeps full width; the meta reads as a footer line
   instead of a side column that crushes the content in the narrow panel. */
.admin-list-item { display: grid; gap: 6px; min-height: 0; padding: 14px 16px; border-radius: 14px; background: var(--canvas); }
.admin-list-item > span:first-child { display: grid; gap: 4px; min-width: 0; }
.admin-list-item strong, .admin-list-item small { display: block; }
.admin-list-item strong { color: var(--ink); font-size: 1rem; line-height: 1.375rem; }
.admin-list-item small { color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.25rem; overflow-wrap: anywhere; }
.admin-list-item .admin-meta { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 0.75rem; line-height: 1.125rem; text-align: left; }
.admin-list-empty { margin: 22px 0 0; color: var(--ink-faint); font-size: 0.875rem; line-height: 1.25rem; }
.admin-queue-content { width: min(67rem, 100%); }
.admin-queue-filters { display: grid; grid-template-columns: minmax(240px, 1.8fr) repeat(3, minmax(140px, 1fr)); gap: 10px; margin-top: 40px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.admin-queue-filters label { display: grid; gap: 1px; min-height: 38px; padding: 4px 12px; border-radius: 10px; background: var(--canvas); color: var(--ink-faint); font-size: 0.75rem; line-height: 0.9375rem; }
/* background-COLOR, not the background shorthand, so it does not wipe the chevron
   image the universal select rule paints. */
.admin-queue-filters input, .admin-queue-filters select { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background-color: transparent; color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1.125rem; }
.admin-queue-filters select { cursor: pointer; padding-right: 18px; }
/* One universal custom chevron on EVERY select in the app. Native arrows are
   removed and replaced with a single background chevron centred vertically on the
   control, so the indicator is identical in light/dark, desktop/mobile, and PWA.
   currentColor keeps it visible against any theme. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%2389909b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px;
}
select::-ms-expand { display: none; }
/* Compact filter pills where the select fills a padded label: nudge the chevron
   to the pill edge and keep the text clear of it. */
.admin-queue-filters select { background-position: right 0 center; background-size: 12px; }
.admin-queue-panel { min-height: 430px; margin-top: 24px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.admin-queue-panel header h2 { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.6875rem; }
.admin-queue-panel header p { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.1875rem; }
.admin-queue-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.admin-submission { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 132px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.admin-submission { width: 100%; color: var(--ink); text-align: left; }
.admin-submission:not(:disabled):hover { border-color: var(--accent); }
.admin-submission:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-submission-copy, .admin-submission-copy strong, .admin-submission-copy small, .admin-submission-english { display: block; }
.admin-submission-copy strong { color: var(--ink); font-size: 1rem; line-height: 1.3125rem; }
.admin-submission-copy strong span { font-weight: 700; }.admin-submission-copy strong .article-der { color: #1d4ed8; }.admin-submission-copy strong .article-die { color: #be185d; }.admin-submission-copy strong .article-das { color: #15803d; }
.admin-submission-english { margin-top: 5px; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.0625rem; }
.admin-submission small { display: block; margin-top: 10px; color: var(--ink-faint); font-size: 0.75rem; line-height: 1rem; }
.admin-submission small + small { margin-top: 2px; }
.admin-status-chip { flex: 0 0 auto; padding: 4px 9px; border: 1px solid #c07f0a; border-radius: 999px; background: #f8edd8; color: #8a5200; font-size: 0.75rem; font-weight: 600; line-height: 1rem; text-transform: capitalize; white-space: nowrap; }
.admin-status-chip.in_review { border-color: #2563eb; background: #e6eefe; color: #1d4ed8; }.admin-status-chip.approved { border-color: #168649; background: #e0f2e8; color: #126b3d; }.admin-status-chip.declined { border-color: #d64532; background: #fbe8e5; color: #b83324; }
.admin-back-button { display: inline-flex; width: auto; height: 40px; gap: 6px; margin-top: 24px; padding: 0 12px; font-size: 1.5rem; }
.admin-back-button span { font-family: var(--interface); font-size: 0.875rem; font-weight: 600; }
.admin-detail-panel { width: min(36.5rem, 100%); margin-top: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.admin-detail-panel header h2 { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.6875rem; }.admin-detail-panel header p { margin: 4px 0 0; color: var(--ink-faint); font-size: 0.8125rem; line-height: 1.125rem; }
.admin-pending-notice { margin: 20px 0; padding: 12px; border: 1px solid #c07f0a; border-radius: 12px; background: #f8edd8; color: #8a5200; font-size: 0.8125rem; font-weight: 600; line-height: 1.125rem; }
.admin-detail-form { display: grid; gap: 12px; }.admin-detail-form label, .admin-note-field { display: grid; gap: 4px; padding: 8px 12px; border-radius: 10px; background: var(--canvas); color: var(--ink-faint); font-size: 0.75rem; line-height: 0.9375rem; }
.admin-detail-form input, .admin-detail-form select, .admin-detail-form textarea, .admin-note-field textarea { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; resize: vertical; background-color: transparent; color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; }
.admin-detail-form textarea, .admin-note-field textarea { padding-block: 2px; font-weight: 500; }.admin-detail-form select { cursor: pointer; padding-right: 18px; background-position: right 0 center; background-size: 12px; }
.admin-submitter { margin: 4px 0 0; color: var(--ink-faint); font-size: 0.75rem; line-height: 1.0625rem; }
.admin-detail-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 8px; }
.admin-detail-actions button { white-space: nowrap; }.danger-button { min-height: 48px; padding: 0 16px; border: 1px solid #d64532; border-radius: 12px; background: var(--surface); color: #b83324; font-size: 0.875rem; font-weight: 600; }.danger-button:disabled { opacity: .65; }
.admin-decline-dialog { width: min(30rem, calc(100vw - 2rem)); }.admin-note-field { min-height: 118px; }.source-sheet footer .danger-button { min-width: 168px; }

/* Suggest correction dialog */
.correction-dialog { width: min(34rem, calc(100vw - 2rem)); }
.correction-body { display: grid; gap: 20px; }
.correction-current { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); }
.correction-current .eyebrow { margin: 0; }
.correction-current-word { display: flex; align-items: center; gap: 10px; margin: 0; }
.correction-current-word strong { font-family: var(--display); font-size: 1.25rem; letter-spacing: -.02em; }
.correction-current-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.correction-current-meta div { display: grid; gap: 2px; min-width: 0; }
.correction-current-meta dt { color: var(--ink-faint); font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.correction-current-meta dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 0.875rem; }
.correction-categories, .correction-proposed { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.correction-categories legend, .correction-proposed legend { padding: 0; font-family: var(--display); font-size: 1.0625rem; font-weight: 600; }
.correction-category-list { display: flex; flex-wrap: wrap; gap: 8px; }
.correction-chip { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 0.875rem; font-weight: 600; }
.correction-chip[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); padding-inline: 13px; }
.correction-proposed-fields { display: grid; gap: 12px; }
.correction-message-field { display: grid; gap: 8px; }
.correction-message-field textarea { min-height: 76px; padding: 12px 14px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.875rem; line-height: 1.25rem; }
.correction-message-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-color: var(--accent); }
.correction-footer { display: grid; gap: 12px; }
.correction-footer .primary-button { width: 100%; }

/* Admin corrections review detail */
.admin-correction-categories { display: flex; flex-wrap: wrap; gap: 6px; }
.correction-cat-chip { padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.75rem; font-weight: 700; }
.admin-correction-diff { display: grid; gap: 8px; }
.correction-diff-row { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.correction-diff-row dt { color: var(--ink-faint); font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.correction-diff-row dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 0.9375rem; }
.correction-diff-row s { color: var(--ink-faint); text-decoration-color: var(--ink-faint); }
.correction-diff-row i { color: var(--ink-faint); font-style: normal; }
.correction-diff-row b { color: var(--accent-strong); font-weight: 700; }
.admin-vocabulary-content { width: min(73.75rem, 100%); }
.admin-decks-filters { grid-template-columns: minmax(240px, 1.8fr) minmax(140px, 1fr); width: min(42.5rem, 100%); }
.admin-vocabulary-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); gap: 24px; align-items: start; margin-top: 24px; }
#admin-settings-layout > .admin-audit-panel { min-height: 0; margin-top: 24px; }
.admin-vocabulary-panel, .admin-word-editor { padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.admin-vocabulary-panel header h2, .admin-word-editor header h2 { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.6875rem; }
.admin-vocabulary-panel header p, .admin-word-editor header p { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.1875rem; }
.admin-vocabulary-list { display: grid; gap: 10px; margin-top: 22px; }
.admin-vocabulary-row { display: flex; width: 100%; min-height: 102px; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--canvas); color: var(--ink); text-align: left; }
.admin-vocabulary-row:hover, .admin-vocabulary-row.selected { border-color: var(--accent); background: var(--accent-soft); }
.admin-vocabulary-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-vocabulary-copy, .admin-vocabulary-copy strong, .admin-vocabulary-copy span, .admin-vocabulary-copy small { display: block; }
.admin-vocabulary-copy strong { font-size: 1rem; line-height: 1.3125rem; }.admin-vocabulary-copy strong span { display: inline; margin-right: 4px; font-weight: 700; }
.admin-vocabulary-copy strong .article-der { color: #1d4ed8; }.admin-vocabulary-copy strong .article-die { color: #be185d; }.admin-vocabulary-copy strong .article-das { color: #15803d; }
.admin-vocabulary-copy > span { margin-top: 4px; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.0625rem; }.admin-vocabulary-copy small { margin-top: 9px; color: var(--ink-faint); font-size: 0.75rem; line-height: 1rem; }
.admin-load-more { display: block; width: auto; min-height: 40px; margin: 18px auto 0; padding-inline: 16px; }
.admin-word-editor { position: sticky; top: 24px; }.admin-word-editor .admin-detail-form { margin-top: 20px; }
.admin-detail-actions > span { display: flex; gap: 8px; }.admin-detail-actions .secondary-button, .admin-detail-actions .primary-button { min-height: 44px; padding-inline: 13px; }.restore-button { border-color: var(--accent); color: var(--accent-strong); }
.admin-feedback-body { min-height: 112px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); color: var(--ink); font-size: 0.875rem; line-height: 1.55; white-space: pre-wrap; }
.admin-visible-control { display: flex !important; align-items: center; gap: 10px !important; min-height: 48px; }.admin-visible-control input { width: 18px !important; height: 18px; margin: 0; accent-color: var(--accent); }.admin-visible-control span { color: var(--ink); font-size: 0.875rem; font-weight: 600; }

.study-session { display: grid; min-height: 100dvh; grid-template-columns: 256px 1fr; background: var(--canvas); }
.study-content { width: min(61rem, 100%); margin: 0 auto; padding: 16px 32px 64px; }
.back-app-bar { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.back-app-bar h1 { margin: 0; font-family: var(--display); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.back-button { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 2px rgb(23 24 28 / 6%); color: var(--ink); font-size: 1.875rem; line-height: 1; }
.session-progress { display: grid; gap: 8px; width: min(45rem, 100%); margin: 8px auto 0; }
.session-progress header { display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.session-progress strong { color: var(--ink); font-size: 0.875rem; letter-spacing: .006em; }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface); }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 180ms ease; }
.session-message { width: min(45rem, 100%); margin: 16px auto -8px; padding: 10px 12px; border-radius: 10px; background: #fef3f2; color: var(--danger); font-size: 0.875rem; line-height: 1.25rem; }
.learn-card { display: grid; justify-items: center; gap: 16px; width: min(45rem, 100%); min-height: 198px; margin: 32px auto 0; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); text-align: center; }
.learn-term-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; min-height: 64px; }
.article-badge { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 12px; border-radius: 999px; font-size: 0.875rem; font-weight: 600; line-height: 1.125rem; }
.article-badge[data-article="der"] { background: #e6eefe; color: #1d4ed8; }
.article-badge[data-article="die"] { background: #fce7f3; color: #be185d; }
.article-badge[data-article="das"] { background: #dcfce7; color: #15803d; }
.learn-card h2 { margin: 0; font-family: var(--display); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.14; overflow-wrap: anywhere; }
.learn-card > p { margin: 0; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.75rem; }
.learn-card .learn-hint { max-width: 560px; margin-top: -4px; color: var(--ink-faint); font-size: 0.875rem; line-height: 1.25rem; }
.next-word-button { display: block; width: min(45rem, 100%); margin: 16px auto 0; }
.learn-complete { display: grid; justify-items: center; gap: 12px; width: min(45rem, 100%); margin: 32px auto 0; padding: 40px 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); text-align: center; }
.learn-complete .eyebrow { margin: 0; }
.learn-complete h2 { margin: 0; font-family: var(--display); font-size: 2rem; letter-spacing: -.035em; }
.learn-complete > p:not(.eyebrow) { max-width: 360px; margin: 0; color: var(--ink-soft); line-height: 1.5rem; }
.learn-complete .primary-button { width: min(20rem, 100%); margin-top: 8px; }
.quiz-setup-content { width: min(58.5rem, 100%); margin: 0 auto; padding: 64px 32px; }
.quiz-setup-content .back-app-bar { margin-bottom: 20px; }
.quiz-focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quiz-focus-grid button { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; min-height: 96px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink); text-align: left; }
.quiz-focus-grid button strong { font-size: 1rem; line-height: 1.25rem; }
.quiz-focus-grid button small { color: var(--ink-faint); font-size: 0.75rem; line-height: 1rem; }
.quiz-focus-grid button span { grid-column: 1 / -1; color: var(--ink-faint); font-size: 0.875rem; line-height: 1.25rem; }
.quiz-focus-grid button[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.quiz-control { display: grid; gap: 10px; margin: 32px 0 0; padding: 0; border: 0; }
.quiz-control legend { margin-bottom: 10px; font-size: 0.875rem; font-weight: 600; }
.quiz-control div { display: flex; max-width: 620px; gap: 4px; padding: 4px; border-radius: 14px; background: var(--canvas); }
.quiz-control button { flex: 1; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ink-soft); font-size: 0.875rem; font-weight: 600; }
.quiz-control button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgb(23 24 28 / 8%); }
.quiz-start { display: block; width: min(20rem, 100%); margin-top: 32px; }
.quiz-question-card { display: grid; justify-items: center; gap: 12px; width: min(45rem, 100%); min-height: 176px; margin: 32px auto 0; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); text-align: center; }
.quiz-question-card .eyebrow { margin: 0; }
.quiz-question-card h2 { margin: 0; font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.035em; line-height: 1.16; overflow-wrap: anywhere; }
.quiz-question-card > p:not(.eyebrow) { margin: 0; color: var(--ink-soft); font-size: 1rem; }
.quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(45rem, 100%); margin: 16px auto 0; }
/* der/die/das: three equal, evenly spaced cells with identical typography. */
.quiz-options.is-article { grid-template-columns: repeat(3, 1fr); }
.quiz-options.is-article button { min-height: 64px; font-size: 1.125rem; font-weight: 700; text-transform: lowercase; }
.quiz-options button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 1rem; font-weight: 600; text-align: center; }
.quiz-options button:not(:disabled):hover { border-color: var(--accent); }
.quiz-options button[aria-pressed="true"] { border-color: #d64532; background: #fbe8e5; color: #b83324; }
.quiz-options button[data-correct="true"] { border-color: #168649; background: #e0f2e8; color: #126b3d; }
.quiz-options button[data-correct-article="der"] { border-color: #2563eb; background: #e6eefe; color: #1d4ed8; }
.quiz-options button[data-correct-article="die"] { border-color: #be185d; background: #fce7f3; color: #be185d; }
.quiz-options button[data-correct-article="das"] { border-color: #168649; background: #e0f2e8; color: #126b3d; }
.writing-setup-content { width: min(41.75rem, 100%); margin: 0; padding: 64px 32px; }
.writing-setup-content .back-app-bar { margin-bottom: 20px; }
.writing-setup-content .source-card { width: min(38.75rem, 100%); margin-top: 0; }
.writing-scope { margin-top: 24px; }
.writing-guidance { width: min(38.75rem, 100%); margin: 20px 0 0; color: var(--ink-faint); font-size: 0.875rem; line-height: 1.25rem; }
.writing-card { display: grid; justify-items: center; gap: 20px; width: min(45rem, 100%); margin: 32px auto 0; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); text-align: center; }
.writing-card .eyebrow { margin: 0; }
.writing-card h2 { max-width: 600px; margin: 0; font-family: var(--display); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.035em; line-height: 1.16; overflow-wrap: anywhere; }
.writing-article-control { display: grid; gap: 10px; width: min(26.25rem, 100%); margin: 0; padding: 0; border: 0; text-align: left; }
.writing-article-control legend { font-size: 0.875rem; font-weight: 600; }
.writing-article-control > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.writing-article-control button { min-height: 44px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); color: var(--ink); font-size: 0.9375rem; font-weight: 700; }
.writing-article-control button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.writing-slots { display: flex; flex-wrap: wrap; align-items: end; justify-content: center; gap: 10px; width: min(35rem, 100%); min-height: 78px; padding: 4px 0 10px; }
.writing-slot { width: clamp(34px, 7vw, 48px); min-height: 64px; padding: 0 1px 7px; border: 0; border-bottom: 3px solid var(--line); border-radius: 0; outline: 0; background: transparent; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.75rem, 5vw, 2.375rem); font-weight: 600; line-height: 1; text-align: center; text-transform: none; }
.writing-slot:focus { border-bottom-color: var(--accent); box-shadow: 0 5px 0 -3px color-mix(in srgb, var(--accent) 35%, transparent); }
.writing-slot:disabled { color: var(--ink-soft); opacity: 1; }
.writing-slot-separator { display: grid; width: 12px; min-height: 64px; place-items: center; padding-bottom: 7px; color: var(--ink-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.5rem; line-height: 1; }
.writing-feedback { width: min(26.25rem, 100%); margin: -6px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; text-align: left; }
.writing-feedback[data-kind="error"] { border-color: #c07f0a; background: #f8edd8; color: #8a5200; }
.writing-feedback[data-kind="success"] { border-color: #168649; background: #e0f2e8; color: #126b3d; }
.writing-card .primary-button, .writing-next { width: min(26.25rem, 100%); }
.writing-next { min-height: 48px; }
.review-card { display: grid; justify-items: center; gap: 16px; width: min(45rem, 100%); min-height: 198px; margin: 32px auto 0; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); text-align: center; }
.review-card:not([aria-disabled="true"]):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.review-card[aria-disabled="true"] { cursor: default; }
.review-card h2 { margin: 0; font-family: var(--display); font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.14; overflow-wrap: anywhere; }
.review-reveal-hint { margin: 0; color: var(--accent-strong); font-size: 0.875rem; font-weight: 600; line-height: 1.25rem; }
.review-answer { margin: 0; color: var(--ink-soft); font-size: 1.125rem; line-height: 1.75rem; }
.review-ratings { display: grid; gap: 16px; width: min(45rem, 100%); margin: 16px auto 0; }
.review-ratings > p { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.25rem; }
.review-ratings > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.review-ratings button { min-height: 48px; padding: 12px 16px; border: 1px solid transparent; border-radius: 12px; font-weight: 600; }
.review-ratings button[data-review-rating="again"] { border-color: #d64532; background: #fbe8e5; color: #b83324; }
.review-ratings button[data-review-rating="hard"] { border-color: #c07f0a; background: #f8edd8; color: #8a5200; }
.review-ratings button[data-review-rating="good"] { border-color: #2563eb; background: #e6eefe; color: #1d4ed8; }
.review-ratings button[data-review-rating="easy"] { border-color: #168649; background: #e0f2e8; color: #126b3d; }
.review-ratings button:disabled { cursor: wait; opacity: .65; }

.source-dialog { width: min(38.75rem, calc(100vw - 2rem)); max-height: min(760px, calc(100dvh - 32px)); padding: 0; overflow: hidden; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgb(20 26 41 / 24%); }
.source-dialog::backdrop { background: rgb(0 0 0 / 38%); }
.source-sheet { display: grid; max-height: inherit; gap: 24px; padding: 24px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; }
.source-sheet header, .source-sheet footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.source-sheet footer { position: sticky; bottom: 0; margin-top: 8px; padding: 16px 0 0; background: var(--surface); box-shadow: 0 -12px 18px color-mix(in srgb, var(--surface) 86%, transparent); }
.source-dialog-open, .source-dialog-open body { overflow: hidden; }
#source-dialog { height: min(760px, calc(100dvh - 32px)); }
#source-form.source-sheet { grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; max-height: none; overflow: hidden; }
#source-form .source-sheet-body { display: grid; align-content: start; min-height: 0; gap: 24px; overflow-y: auto; overscroll-behavior-y: contain; padding-right: 2px; scroll-padding-block: 24px; }
#source-form.source-sheet footer { position: static; z-index: 1; margin: 0; padding: 0; box-shadow: none; }
.source-sheet h2 { margin: 0; font-family: var(--display); font-size: 1.5rem; }
.source-sheet header p { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.875rem; }
.close-sheet { width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--canvas); color: var(--ink); font-size: 1.5rem; }
.explore-dialog { width: min(32.5rem, calc(100vw - 2rem)); }
.explore-actions { display: grid; gap: 8px; }
.explore-actions button { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; width: 100%; min-height: 72px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; }
.explore-actions button:hover, .explore-actions button:focus-visible { border-color: var(--accent); outline: 0; }
.explore-actions strong { font-size: 0.9375rem; }
.explore-actions small { grid-column: 1; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.125rem; }
.explore-actions b { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent-strong); font-size: 1.5rem; font-weight: 400; }
.source-sheet fieldset { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; }
.source-sheet legend { margin-bottom: 12px; font-family: var(--display); font-size: 1.125rem; font-weight: 600; }
.check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 210px; padding-right: 8px; overflow: auto; scrollbar-gutter: stable; scrollbar-width: thin; }
.check-list label, .choice-list label { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); font-size: 0.875rem; }
.check-list .filter-all, .choice-list .filter-all { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
.choice-list { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-list label { min-height: 36px; }
.choice-list input, .check-list input { accent-color: var(--accent); }
.round-control { display: grid; gap: 8px; font-size: 0.875rem; font-weight: 600; }
.round-control input { width: 120px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }
.round-control small { color: var(--ink-faint); font-size: 0.8125rem; font-weight: 400; }
.secondary-button { min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; }

.legal-page { min-height: 100dvh; padding: max(48px, env(safe-area-inset-top)) 24px max(64px, env(safe-area-inset-bottom)); background: var(--canvas); }
.legal-content { width: min(45rem, 100%); margin: 0 auto; padding: clamp(24px, 5vw, 56px); border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.legal-back { display: inline-block; margin-bottom: 42px; color: var(--accent-strong); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.legal-content .eyebrow { margin-bottom: 12px; }
.legal-content h1 { margin: 0; font-family: var(--display); font-size: clamp(2.25rem, 7vw, 3.25rem); letter-spacing: -.04em; line-height: 1.08; }
.legal-lead { margin: 12px 0 36px; color: var(--ink-faint); font-size: 0.875rem; }
.legal-content section + section { margin-top: 28px; }
.legal-content h2 { margin: 0; font-family: var(--display); font-size: 1.3125rem; letter-spacing: -.02em; }
.legal-content section p { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.6; }
.legal-content a:not(.legal-back) { color: var(--accent-strong); }

.progress-content { width: min(100%, 66.5rem); padding: 48px 56px 80px; }
.progress-page-heading { display: flex; align-items: flex-start; gap: 12px; }
.progress-page-heading .back-button { flex: 0 0 auto; margin-top: -4px; }
.progress-page-heading h1 { margin: 0; font-family: var(--display); font-size: 1.75rem; letter-spacing: -.03em; line-height: 2.25rem; }
.progress-page-heading p { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.progress-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); gap: 12px; margin-top: 28px; }
.progress-overview article { display: grid; gap: 5px; min-height: 102px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.progress-overview strong { font-family: var(--display); font-size: 1.75rem; line-height: 2.125rem; }
.progress-overview span { color: var(--ink-faint); font-size: 0.875rem; line-height: 1.25rem; }
.progress-overview .progress-difficult { border-color: #c07f0a; background: #f8edd8; color: #8a5200; }
.progress-overview .progress-difficult span { color: inherit; }
.progress-overview .progress-mastered { border-color: #168649; background: #e0f2e8; color: #126b3d; }
.progress-overview .progress-mastered span { color: inherit; }
.progress-toolbar { display: grid; gap: 16px; margin-top: 32px; }
.progress-search { margin-top: 0; }
.progress-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.progress-filters button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 0.875rem; font-weight: 600; }
.progress-filters button.active { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.progress-list { display: grid; gap: 8px; width: min(100%, 45rem); }
.progress-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 80px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.progress-row-copy { display: grid; gap: 3px; min-width: 0; }
.progress-row-copy strong, .progress-row-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-row-copy strong { font-size: 1rem; line-height: 1.25rem; }
.progress-row-copy small { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.progress-row-meta { display: grid; justify-items: end; gap: 4px; text-align: right; }
.progress-status { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--canvas); color: var(--ink-soft); font-size: 0.75rem; font-weight: 700; }
.progress-status.difficult { border-color: #c07f0a; background: #f8edd8; color: #8a5200; }
.progress-status.remembered { border-color: #2563eb; background: #e6eefe; color: #1d4ed8; }
.progress-status.mastered { border-color: #168649; background: #e0f2e8; color: #126b3d; }
.progress-row-meta small { color: var(--ink-faint); font-size: 0.75rem; line-height: 1rem; }
.progress-empty { margin: 0; padding: 24px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface); color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.feedback-content { width: min(100%, 61rem); padding: 48px 56px; }
.feedback-content > header { margin-bottom: 16px; }
.feedback-content h1 { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.625rem; }
.feedback-form { display: grid; gap: 16px; width: min(24.5rem, 100%); padding: 16px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.feedback-form fieldset { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.feedback-form legend, .feedback-message-field > span { padding: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.125rem; }
.feedback-category { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.feedback-category button { min-height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.feedback-category button[aria-checked="true"] { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.feedback-message-field { display: grid; gap: 8px; }
.feedback-message-field textarea { min-height: 116px; padding: 14px 16px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.875rem; line-height: 1.25rem; }
.feedback-message-field textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; border-color: var(--accent); }
.feedback-correction-route { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); font-size: 0.875rem; line-height: 1.25rem; }
.feedback-correction-route strong, .feedback-correction-route b { color: var(--accent-strong); }
.feedback-form .primary-button { width: 100%; }
.contribute-content { width: min(100%, 61rem); padding: 48px 56px; }
.contribute-content .back-app-bar { margin-bottom: 16px; }
.contribution-form { display: grid; gap: 20px; width: min(45rem, 100%); margin: 0; }
.contribution-items { display: grid; gap: 20px; }
.contribution-item { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.contribution-item-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; min-width: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.contribution-item-heading > span { display: grid; gap: 3px; min-width: 0; }
.contribution-item-heading strong { font-size: 0.9375rem; line-height: 1.25rem; }
.contribution-item-heading small { color: var(--ink-faint); font-size: 0.75rem; font-weight: 500; line-height: 1rem; }
.contribution-item-heading b { flex: 0 0 auto; margin-left: auto; padding: 8px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.75rem; line-height: 1rem; white-space: nowrap; }
.contribution-item select { width: 100%; min-height: 52px; padding: 12px 14px; padding-right: 38px; border: 1px solid var(--line); border-radius: 12px; background-color: var(--surface); color: var(--ink); background-position: right 14px center; background-size: 14px; }
.contribution-matches { min-height: 0; margin: -6px 0 0; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.125rem; }
.contribution-matches:not(:empty) { padding: 10px 12px; border-radius: 12px; background: var(--canvas); }
.contribution-submit { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.contribution-community { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; width: min(45rem, 100%); margin: 32px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.contribution-community > span { display: grid; gap: 3px; min-width: 0; }
.contribution-community strong { font-size: 0.875rem; line-height: 1.125rem; }
.contribution-community small { color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.125rem; }
.contribution-community .secondary-button { flex: 0 0 auto; }
.contribution-history-open { margin-left: auto; color: var(--accent-strong); font-size: 0.875rem; font-weight: 600; white-space: nowrap; }
.contribution-history-content { width: min(100%, 61rem); padding: 48px 56px 80px; }
.contribution-history-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.contribution-history-heading .back-button { margin-top: -4px; }
.contribution-history-heading h1 { margin: 0; font-family: var(--display); font-size: 1.75rem; letter-spacing: -.03em; line-height: 2.25rem; }
.contribution-history-heading p { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.contribution-history-list { display: grid; gap: 12px; width: min(45rem, 100%); }
.contribution-history-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.contribution-history-card > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.contribution-history-card h2 { margin: 0; font-family: var(--display); font-size: 1.125rem; line-height: 1.5rem; }
.contribution-history-card header p { margin: 3px 0 0; color: var(--ink-faint); font-size: 0.8125rem; line-height: 1.125rem; }
.contribution-history-items { display: grid; gap: 8px; }
.contribution-history-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.contribution-history-item > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.contribution-history-item strong, .contribution-history-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contribution-history-item strong { font-size: 0.875rem; line-height: 1.125rem; }
.contribution-history-item small { color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.125rem; }
.contribution-status { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 9px; border: 1px solid #c07f0a; border-radius: 999px; background: #f8edd8; color: #8a5200; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.contribution-status.in_review { border-color: #2563eb; background: #e6eefe; color: #1d4ed8; }
.contribution-status.approved { border-color: #168649; background: #e0f2e8; color: #126b3d; }
.contribution-status.declined { border-color: #d64532; background: #fbe8e5; color: #b83324; }
.contribution-admin-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--canvas); color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.125rem; }
.contribution-history-item .contribution-admin-note { grid-column: 1 / -1; }
.contribution-history-empty { margin: 0; padding: 24px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface); color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.contributors-content { width: min(100%, 61rem); padding: 48px 56px 80px; }
.contributors-heading { display: flex; align-items: flex-start; gap: 12px; max-width: 620px; }
.contributors-heading .back-button { flex: 0 0 auto; margin-top: -4px; }
.contributors-heading .eyebrow { margin: 0 0 8px; }
.contributors-heading h1 { margin: 0; font-family: var(--display); font-size: 1.75rem; letter-spacing: -.03em; line-height: 2.25rem; }
.contributors-heading > span > p:last-child { margin: 5px 0 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.contributors-list { display: grid; gap: 8px; width: min(38.75rem, 100%); margin: 0; padding: 0; list-style: none; }
.contributor-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.contributor-rank { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.8125rem; font-weight: 700; }
.contributor-row > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.contributor-row strong { overflow: hidden; font-size: 1rem; line-height: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }
.contributor-row small { color: var(--ink-faint); font-size: 0.8125rem; line-height: 1.125rem; }
.contributor-row > b { color: var(--accent-strong); font-size: 0.8125rem; font-weight: 700; text-align: right; }
.contributors-empty { margin: 0; padding: 24px; border: 1px dashed var(--line); border-radius: 14px; background: var(--surface); color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.search-content { width: min(100%, 70rem); padding: 48px 56px; }
.search-content > header h1 { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.625rem; }
.search-field { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; gap: 12px; width: min(45rem, 100%); min-height: 56px; margin-top: 26px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-faint); }
.search-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.search-field > span { font-size: 1.5rem; line-height: 1; }
.search-field input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 1rem; line-height: 1.5rem; }
.search-field button { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: var(--ink-faint); font-size: 1.5rem; line-height: 1.25rem; }
.search-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.search-filters button { min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 0.875rem; font-weight: 600; }
.search-filters button.active { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.search-status { min-height: 20px; margin: 16px 0 10px; color: var(--ink-soft); font-size: 0.875rem; font-weight: 600; }
.search-layout { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(320px, 1.3fr); gap: 16px; align-items: start; min-width: 0; }
.search-layout.search-layout-idle { grid-template-columns: minmax(0, 720px); }
.search-layout.search-layout-idle .search-detail { grid-column: 1; min-height: 176px; }
.search-results { display: grid; gap: 8px; }
.search-result { display: grid; grid-template-columns: auto minmax(0, 1fr) 24px; align-items: center; gap: 12px; width: 100%; min-height: 88px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; }
.search-result.selected { border: 2px solid var(--accent); background: var(--accent-soft); }
.search-result > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.search-result strong, .search-result small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result strong { font-size: 1rem; line-height: 1.25rem; }
.search-result small { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.search-result > b { color: var(--ink-faint); font-size: 1.5rem; font-weight: 400; text-align: right; }
.search-type-badge { padding: 4px 10px; border-radius: 999px; background: var(--canvas); color: var(--ink-soft); font-size: 0.75rem; font-weight: 600; }
.search-detail { display: grid; gap: 14px; min-width: 0; min-height: 240px; padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.search-detail-empty { align-self: center; margin: 0; color: var(--ink-faint); font-size: 0.875rem; line-height: 1.25rem; }
.search-detail-title { display: flex; align-items: center; gap: 10px; }
.search-detail-title h2 { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.625rem; }
.search-detail-type { margin: -8px 0 0; color: var(--ink-faint); font-size: 0.875rem; font-weight: 600; }
.search-detail dl { display: grid; gap: 14px; margin: 0; }
.search-detail dl > div { display: grid; gap: 5px; padding-top: 14px; border-top: 1px solid var(--line); }
.search-detail dt { color: var(--ink-faint); font-size: 0.875rem; font-weight: 600; }
.search-detail dd { margin: 0; font-size: 1rem; line-height: 1.5rem; }
.search-example-translation { margin: 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.recent-searches { display: grid; gap: 8px; }
.recent-searches > div { display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); font-size: 0.875rem; }
.recent-searches button { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; }
.recent-searches > div button { min-height: 30px; border: 0; background: transparent; color: var(--accent-strong); font-weight: 600; }
.search-no-results { display: grid; gap: 10px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.search-no-results h2, .search-no-results p { margin: 0; }
.search-no-results h2 { font-family: var(--display); font-size: 1.25rem; line-height: 1.625rem; }
.search-no-results p { color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.account-screen .app-sidebar { background: var(--surface); }
.account-entry.active { background: var(--accent-soft); color: var(--accent-strong); }
.account-entry.active small { color: var(--accent-strong); }
.account-content { width: min(100%, 66.5rem); padding: 48px 56px; }
/* Flex column so leftover height collects before the delete action instead of
   stretching every row apart. */
.account-panel { display: flex; flex-direction: column; gap: 24px; width: min(37.5rem, 100%); min-height: min(680px, calc(100dvh - 96px)); padding: 28px 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.account-panel > header { display: flex; align-items: center; min-height: 48px; }
.account-panel h1 { margin: 0; font-family: var(--display); font-size: 1.5rem; letter-spacing: -.025em; line-height: 1.875rem; }
.account-profile { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 16px; border-radius: 16px; background: var(--canvas); }
.account-profile > span:last-child { display: grid; gap: 2px; min-width: 0; }
.account-avatar { display: grid; flex: 0 0 auto; width: 52px; height: 52px; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-strong); font-size: 1rem; font-weight: 600; }
.account-profile strong { font-size: 1rem; line-height: 1.25rem; overflow-wrap: anywhere; }
.account-profile small { color: var(--ink-faint); font-size: 0.875rem; line-height: 1.25rem; overflow-wrap: anywhere; }
.appearance-control { display: grid; gap: 14px; margin: 4px 0 8px; padding: 0; border: 0; }
/* A legend does not participate in the fieldset's grid gap, so it needs its own
   spacing below the theme options. float + full width keeps it on its own row. */
.appearance-control legend { float: left; width: 100%; margin-bottom: 12px; padding: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.125rem; }
.appearance-control > div { clear: both; }
.appearance-control > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; min-height: 48px; padding: 4px; border-radius: 14px; background: var(--canvas); }
.appearance-control button { min-height: 40px; border: 2px solid transparent; border-radius: 10px; background: transparent; color: var(--ink-faint); font-size: 0.875rem; font-weight: 600; }
.appearance-control button[aria-checked="true"] { border-color: var(--accent); background: var(--surface); color: var(--ink); }
.account-actions { display: grid; gap: 4px; }
.account-actions button, .delete-account-action { display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); font-size: 0.875rem; font-weight: 600; text-align: left; }
.account-actions button:hover { background: var(--canvas); }
.account-actions button > span:first-child { color: var(--ink-faint); font-size: 1.3125rem; line-height: 1; text-align: center; }
.account-actions b { color: var(--ink-faint); font-size: 1.5rem; font-weight: 400; line-height: 1; text-align: right; }
.delete-account-action { grid-template-columns: 24px minmax(0, 1fr); margin-top: auto; border-color: #d64532; color: var(--danger); }
.delete-account-action > span:first-child { font-size: 1.3125rem; line-height: 1; text-align: center; }
.account-form-message { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--canvas); color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.account-form-message[data-kind="error"] { background: #fbe8e5; color: #b83324; }
.account-form-message[data-kind="success"] { background: var(--accent-soft); color: var(--accent-strong); }
.account-security { width: min(30rem, 100%); }
.account-security > .back-app-bar { margin-bottom: 32px; }
.account-security-card, .delete-account-card { display: grid; gap: 18px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.account-security-card .eyebrow, .delete-account-card .eyebrow { margin: 0; }
.account-security-card h2, .delete-account-card h2 { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.625rem; }
.account-security-card > p:not(.eyebrow):not(.account-requirements):not(.account-form-message), .delete-account-card > p:not(.eyebrow):not(.account-form-message) { margin: 0; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.account-requirements { margin: 0; padding: 12px 14px; border-radius: 14px; background: #e6eefe; color: var(--ink-soft); font-size: 0.875rem; line-height: 1.25rem; }
.account-security-card .primary-button, .account-security-card .secondary-button, .delete-account-card .danger-button, .delete-account-card .secondary-button { width: 100%; }
.account-dialog { width: min(30rem, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: 24px; background: transparent; color: var(--ink); }
.account-dialog::backdrop { background: rgb(0 0 0 / 38%); }
.delete-account-card { border-color: #d64532; }
.delete-account-card > ul { display: grid; gap: 2px; margin: 0; padding: 14px; border-radius: 14px; background: #fbe8e5; color: #b83324; font-size: 0.875rem; line-height: 1.25rem; list-style-position: inside; }

html[data-theme="light"] { color-scheme: light; --accent: #0c7a61; --accent-strong: #0a6250; --accent-soft: #dbeee8; --ink: #17181c; --ink-soft: #5a5b61; --ink-faint: #67686f; --canvas: #eae8e1; --surface: #ffffff; --line: #e3e1d9; }
html[data-theme="dark"] { color-scheme: dark; --accent: #0c7a61; --accent-strong: #86cfbd; --accent-soft: #202225; --ink: #f3f4f5; --ink-soft: #b8bcc2; --ink-faint: #90959c; --canvas: #0b0c0e; --surface: #151619; --line: #303238; --dark-muted-surface: #1c1e21; }
html[data-theme="dark"] .auth-message[data-kind="error"] { background: #26191b; color: #ffb4ab; }
html[data-theme="dark"] .auth-message[data-kind="info"] { background: #1b1f21; color: var(--ink-soft); }
html[data-theme="dark"] .progress-metrics .needs-practice { border-color: #b97512; background: #252015; color: #ffd08a; }
html[data-theme="dark"] .article-badge[data-article="der"] { background: #192330; color: #aec7ff; }
html[data-theme="dark"] .article-badge[data-article="die"] { background: #2a1824; color: #fcb8db; }
html[data-theme="dark"] .article-badge[data-article="das"] { background: #172820; color: #a9f1bf; }
html[data-theme="dark"] .session-message { background: #26191b; color: #ffb4ab; }
html[data-theme="dark"] .review-ratings button[data-review-rating="again"], html[data-theme="dark"] .guide-review-rules .again { border-color: #d16759; background: #24191b; color: #ffb4ab; }
html[data-theme="dark"] .review-ratings button[data-review-rating="hard"], html[data-theme="dark"] .guide-review-rules .hard { border-color: #b97512; background: #252015; color: #ffd08a; }
html[data-theme="dark"] .review-ratings button[data-review-rating="good"], html[data-theme="dark"] .guide-review-rules .good { border-color: #6d9dff; background: #18222e; color: #b7cbff; }
html[data-theme="dark"] .review-ratings button[data-review-rating="easy"], html[data-theme="dark"] .guide-review-rules .easy { border-color: #5fc887; background: #172820; color: #a9f1bf; }
html[data-theme="dark"] .quiz-options button[aria-pressed="true"] { border-color: #d16759; background: #24191b; color: #ffb4ab; }
html[data-theme="dark"] .quiz-options button[data-correct="true"] { border-color: #5fc887; background: #172820; color: #a9f1bf; }
html[data-theme="dark"] .quiz-options button[data-correct-article="der"] { border-color: #6d9dff; background: #18222e; color: #b7cbff; }
html[data-theme="dark"] .quiz-options button[data-correct-article="die"] { border-color: #ea8fbe; background: #2a1824; color: #fcb8db; }
html[data-theme="dark"] .quiz-options button[data-correct-article="das"] { border-color: #5fc887; background: #172820; color: #a9f1bf; }
html[data-theme="dark"] .writing-feedback[data-kind="error"] { border-color: #b97512; background: #252015; color: #ffd08a; }
html[data-theme="dark"] .writing-feedback[data-kind="success"] { border-color: #5fc887; background: #172820; color: #a9f1bf; }
html[data-theme="dark"] .account-requirements { background: #18222e; color: #b7cbff; }
html[data-theme="dark"] .account-form-message[data-kind="error"], html[data-theme="dark"] .delete-account-card > ul { background: #24191b; color: #ffb4ab; }
html[data-theme="dark"] .progress-overview .progress-difficult, html[data-theme="dark"] .progress-status.difficult { border-color: #b97512; background: #252015; color: #ffd08a; }
html[data-theme="dark"] .progress-overview .progress-mastered, html[data-theme="dark"] .progress-status.mastered { border-color: #5fc887; background: #172820; color: #a9f1bf; }
html[data-theme="dark"] .progress-status.remembered { border-color: #6d9dff; background: #18222e; color: #b7cbff; }
html[data-theme="dark"] .contribution-status { border-color: #b97512; background: #252015; color: #ffd08a; }
html[data-theme="dark"] .contribution-status.in_review { border-color: #6d9dff; background: #18222e; color: #b7cbff; }
html[data-theme="dark"] .contribution-status.approved { border-color: #5fc887; background: #172820; color: #a9f1bf; }
html[data-theme="dark"] .contribution-status.declined { border-color: #d16759; background: #24191b; color: #ffb4ab; }
html[data-theme="dark"] .admin-nav-item b, html[data-theme="dark"] .admin-status.pending, html[data-theme="dark"] .admin-status-chip, html[data-theme="dark"] .admin-pending-notice { border-color: #b97512; background: #252015; color: #ffd08a; }
html[data-theme="dark"] .admin-status.info, html[data-theme="dark"] .admin-status-chip.in_review { border-color: #6d9dff; background: #18222e; color: #b7cbff; }
html[data-theme="dark"] .admin-status-chip.approved { border-color: #5fc887; background: #172820; color: #a9f1bf; }
html[data-theme="dark"] .admin-status-chip.declined { border-color: #d16759; background: #24191b; color: #ffb4ab; }

/* Tablet layouts keep the admin sidebar while reducing dense content to a readable single-column flow. */
@media (min-width: 701px) and (max-width: 1100px) {
  .dashboard { grid-template-columns: 224px minmax(0, 1fr); }
  .dashboard-content, .guide-content, .account-content, .progress-content, .explore-content { padding-inline: clamp(24px, 4vw, 40px); }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-body { grid-template-columns: 1fr; }
  .admin-console { grid-template-columns: 220px minmax(0, 1fr); }
  .admin-sidebar { padding-inline: 12px; }
  .admin-content { padding: 40px 24px 56px; }
  .admin-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  .admin-columns { grid-template-columns: 1fr; gap: 18px; margin-top: 24px; }
  .admin-queue-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }
  .admin-queue-list { grid-template-columns: 1fr; }
  .admin-vocabulary-layout { grid-template-columns: 1fr; }
  .admin-word-editor { position: static; }
  .guide-heading .back-button { display: grid; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .search-content { padding-inline: 32px; }
  .search-layout { grid-template-columns: 1fr; }
  .search-detail { order: -1; min-height: 184px; }
}

/* Phone layouts only. Portrait iPad and other tablets retain the sidebar. */
@media (max-width: 700px) {
  .dashboard { grid-template-columns: 1fr; padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)); }
  .app-sidebar { display: none; }
  .admin-console { grid-template-columns: 1fr; padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)); }
  .admin-sidebar { display: none; }
  .admin-content { width: 100%; padding: max(54px, calc(env(safe-area-inset-top) + 16px)) 24px 32px; }
  .admin-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-columns { grid-template-columns: 1fr; }
  .admin-queue-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-vocabulary-layout { grid-template-columns: 1fr; }
  .admin-word-editor { position: static; }
  .dashboard-content, .guide-content { width: 100%; padding: max(32px, env(safe-area-inset-top)) 24px 32px; }
  .search-content { width: 100%; padding: max(16px, env(safe-area-inset-top)) 16px 32px; }
  .contribute-content { width: 100%; padding: max(16px, env(safe-area-inset-top)) 16px 32px; }
  .contribution-community { align-items: start; flex-direction: column; }
  .contribution-community .secondary-button { width: 100%; }
  .contribution-history-content { width: 100%; padding: max(16px, env(safe-area-inset-top)) 16px 32px; }
  .contribution-history-heading { grid-template-columns: auto minmax(0, 1fr); }
  .contribution-history-heading .secondary-button { grid-column: 1 / -1; width: 100%; }
  .contribution-history-item { grid-template-columns: auto minmax(0, 1fr); }
  .contribution-history-item .contribution-status { grid-column: 2; justify-self: start; }
  .contributors-content { width: 100%; padding: max(16px, env(safe-area-inset-top)) 16px 32px; }
  .progress-content { width: 100%; padding: max(16px, env(safe-area-inset-top)) 16px 32px; }
  .progress-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .progress-overview article { min-height: 92px; padding: 12px; }
  .progress-overview strong { font-size: 1.5rem; }
  .progress-overview span { font-size: 0.75rem; line-height: 1.0625rem; }
  .progress-row { grid-template-columns: auto minmax(0, 1fr); }
  .progress-row-meta { grid-column: 2; grid-row: 2; grid-auto-flow: column; justify-content: space-between; justify-items: initial; }
  .feedback-content { width: 100%; padding: max(16px, env(safe-area-inset-top)) 16px 32px; }
  .feedback-form { width: 100%; padding: 16px; border-radius: 20px; }
  .search-layout { grid-template-columns: 1fr; }
  .search-detail { order: -1; }
  .account-content { width: 100%; padding: max(16px, env(safe-area-inset-top)) 16px 32px; }
  .account-panel { min-height: calc(100dvh - 104px); padding: 16px 0 24px; border: 0; border-radius: 0; background: var(--surface); }
  .account-panel > header { min-height: 48px; }
  .account-security { width: 100%; padding-top: max(16px, env(safe-area-inset-top)); }
  .account-security > .back-app-bar { margin-bottom: 24px; }
  .account-security-card { padding: 24px; border-radius: 20px; }
  .account-screen.security-open { padding-bottom: 0; }
  .account-screen.security-open .mobile-nav { display: none; }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-body { grid-template-columns: 1fr; }
  .mobile-nav { position: fixed; z-index: 5; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--surface); }
  /* Icon + label tabs. The icon is a CSS mask so it inherits the button colour and
     stays crisp in light, dark, and PWA standalone mode. The active tab gets an
     accent pill so the current section is identifiable at a glance. */
  .mobile-nav button { display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; padding: 6px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--ink-soft); font-size: 0.6875rem; font-weight: 600; letter-spacing: .01em; transition: color .15s ease, background-color .15s ease; }
  .mobile-nav button[data-nav]::before { content: ""; width: 23px; height: 23px; background-color: currentColor; -webkit-mask: var(--nav-icon) center / 23px 23px no-repeat; mask: var(--nav-icon) center / 23px 23px no-repeat; }
  .mobile-nav button.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; }
  .mobile-nav button:disabled { opacity: .45; }
  .mobile-nav button[data-nav="learn"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 7l9-4 9 4-9 4-9-4z'/><path d='M7 9.5V15c0 1 2.2 2.5 5 2.5s5-1.5 5-2.5V9.5'/></svg>"); }
  .mobile-nav button[data-nav="search"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6.5'/><path d='M20 20l-4-4'/></svg>"); }
  .mobile-nav button[data-nav="explore"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M15.5 8.5l-2 5-5 2 2-5 5-2z'/></svg>"); }
  .mobile-nav button[data-nav="account"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.5'/><path d='M5 20c0-3.6 3.1-5.5 7-5.5s7 1.9 7 5.5'/></svg>"); }
  .mobile-nav button[data-nav="review"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8 8 0 1 0-.6 4'/><path d='M20 5v4h-4'/></svg>"); }
  .mobile-nav button[data-nav="guide"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5.5A2.5 2.5 0 0 1 6.5 3H12v16H6.5A2.5 2.5 0 0 0 4 21.5z'/><path d='M20 5.5A2.5 2.5 0 0 0 17.5 3H12v16h5.5A2.5 2.5 0 0 1 20 21.5z'/></svg>"); }
  .mobile-nav button[data-nav="more"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='12' r='1.6'/><circle cx='12' cy='12' r='1.6'/><circle cx='19' cy='12' r='1.6'/></svg>"); }
  .mobile-nav button[data-nav="overview"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7' height='7' rx='1.5'/><rect x='13.5' y='3.5' width='7' height='7' rx='1.5'/><rect x='3.5' y='13.5' width='7' height='7' rx='1.5'/><rect x='13.5' y='13.5' width='7' height='7' rx='1.5'/></svg>"); }
  .mobile-nav button[data-nav="vocabulary"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6h12M8 12h12M8 18h12'/><circle cx='4' cy='6' r='1'/><circle cx='4' cy='12' r='1'/><circle cx='4' cy='18' r='1'/></svg>"); }
  .mobile-nav button[data-nav="decks"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l8 4.5-8 4.5-8-4.5L12 3z'/><path d='M4 12l8 4.5 8-4.5'/><path d='M4 16.5l8 4.5 8-4.5'/></svg>"); }
  .mobile-nav button[data-nav="corrections"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h4l10-10-4-4L4 16v4z'/><path d='M13.5 6.5l4 4'/></svg>"); }
  .admin-mobile-nav { grid-template-columns: repeat(5, 1fr); }.admin-mobile-nav button { font-size: 0.625rem; }
  .study-session { grid-template-columns: 1fr; padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)); }
  .study-session .app-sidebar { display: none; }
  .study-content { width: 100%; padding: max(16px, env(safe-area-inset-top)) 24px 32px; }
  .quiz-setup-content { width: 100%; padding: max(16px, env(safe-area-inset-top)) 24px 32px; }
  .writing-setup-content { width: 100%; padding: max(16px, env(safe-area-inset-top)) 24px 32px; }
}

@media (max-width: 540px) {
  .dashboard-content, .guide-content { padding-inline: 16px; }
  .account-content { padding-inline: 16px; }
  .admin-content { padding-inline: 16px; }
  .admin-heading { display: grid; gap: 4px; }
  .admin-heading h1 { font-size: 1.75rem; }
  .admin-heading time { padding-top: 0; }
  .admin-heading-actions { align-items: flex-start; flex-direction: column-reverse; gap: 6px; }
  .admin-status-grid { gap: 12px; margin-top: 28px; }
  .admin-status { min-height: 138px; padding: 16px; }
  .admin-columns { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
  .admin-panel { min-height: 0; padding: 18px 16px; border-radius: 16px; }
  .admin-queue-panel { min-height: 0; padding: 18px 16px; border-radius: 16px; }
  .admin-queue-filters { grid-template-columns: 1fr; margin-top: 28px; }
  .admin-decks-filters { grid-template-columns: 1fr; }
  .admin-queue-list { grid-template-columns: 1fr; gap: 12px; }
  .admin-detail-panel { width: 100%; padding: 18px 16px; border-radius: 16px; }
  .admin-vocabulary-panel, .admin-word-editor { padding: 18px 16px; border-radius: 16px; }
  .admin-vocabulary-layout { gap: 16px; margin-top: 20px; }
  .admin-vocabulary-row { min-height: 0; padding: 14px; }
  .admin-detail-actions { align-items: stretch; flex-direction: column; gap: 10px; }.admin-detail-actions > span { width: 100%; }.admin-detail-actions > span button, .admin-detail-actions > button { flex: 1; }
  .admin-panel header { align-items: flex-start; }
  .admin-panel .primary-button { font-size: 0.8125rem; }
  .admin-list-item { grid-template-columns: 1fr; gap: 4px; }
  .admin-list-item .admin-meta { text-align: left; }
  .dashboard-heading h1 { font-size: 1.75rem; }
  .source-card { margin-top: 24px; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-card { min-height: 156px; }
  .progress-card { margin-top: 28px; padding: 16px; }
  .progress-card header { align-items: start; }
  .progress-card header button { padding-right: 0; }
  .progress-metrics { grid-template-columns: 1fr 1fr; }
  .progress-body { gap: 16px; }
  .guide-heading h1 { font-size: 2.25rem; }
  .guide-heading .back-button { display: grid; }
  .guide-section { margin-top: 36px; }
  .guide-card-grid, .guide-mode-grid, .guide-review-rules dl { grid-template-columns: 1fr; }
  .guide-card-grid article, .guide-mode-grid article { min-height: 0; }
  .guide-review-rules dl > div { min-height: 0; }
  .source-sheet { padding: 20px; }
  .check-list { grid-template-columns: 1fr; }
  .study-content { padding-inline: 16px; }
  .session-progress { margin-top: 8px; }
  .learn-card { min-height: 184px; margin-top: 24px; padding: 24px 16px; border-radius: 20px; }
  .learn-card h2 { font-size: 2.625rem; }
  .learn-complete { margin-top: 24px; padding: 32px 20px; border-radius: 20px; }
  .quiz-setup-content { padding-inline: 16px; }
  .setup-card { gap: 24px; padding: 20px 16px; border-radius: 20px; }
  .quiz-focus-grid { grid-template-columns: 1fr; }
  .quiz-control div { flex-wrap: wrap; }
  .quiz-control button { flex-basis: 30%; }
  .quiz-question-card { margin-top: 24px; padding: 24px 16px; border-radius: 20px; }
  .quiz-options { grid-template-columns: 1fr; }
  .writing-setup-content { padding-inline: 16px; }
  .writing-card { gap: 18px; margin-top: 24px; padding: 24px 16px; border-radius: 20px; }
  .writing-card h2 { font-size: 2.25rem; }
  .writing-slots { gap: 8px; min-height: 70px; }
  .writing-slot { width: clamp(30px, 9vw, 42px); min-height: 58px; font-size: clamp(1.5rem, 8vw, 2rem); }
  .writing-slot-separator { min-height: 58px; }
  .review-card { min-height: 184px; margin-top: 24px; padding: 24px 16px; border-radius: 20px; }
  .review-card h2 { font-size: 2.625rem; }
  .review-ratings > div { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .article-badge[data-article="der"] { background: #192330; color: #aec7ff; }
  html:not([data-theme]) .article-badge[data-article="die"] { background: #2a1824; color: #fcb8db; }
  html:not([data-theme]) .article-badge[data-article="das"] { background: #172820; color: #a9f1bf; }
  html:not([data-theme]) .session-message { background: #26191b; color: #ffb4ab; }
  html:not([data-theme]) .review-ratings button[data-review-rating="again"], html:not([data-theme]) .guide-review-rules .again { border-color: #d16759; background: #24191b; color: #ffb4ab; }
  html:not([data-theme]) .review-ratings button[data-review-rating="hard"], html:not([data-theme]) .guide-review-rules .hard { border-color: #b97512; background: #252015; color: #ffd08a; }
  html:not([data-theme]) .review-ratings button[data-review-rating="good"], html:not([data-theme]) .guide-review-rules .good { border-color: #6d9dff; background: #18222e; color: #b7cbff; }
  html:not([data-theme]) .review-ratings button[data-review-rating="easy"], html:not([data-theme]) .guide-review-rules .easy { border-color: #5fc887; background: #172820; color: #a9f1bf; }
  html:not([data-theme]) .quiz-options button[aria-pressed="true"] { border-color: #d16759; background: #24191b; color: #ffb4ab; }
  html:not([data-theme]) .quiz-options button[data-correct="true"] { border-color: #5fc887; background: #172820; color: #a9f1bf; }
  html:not([data-theme]) .quiz-options button[data-correct-article="der"] { border-color: #6d9dff; background: #18222e; color: #b7cbff; }
  html:not([data-theme]) .quiz-options button[data-correct-article="die"] { border-color: #ea8fbe; background: #2a1824; color: #fcb8db; }
  html:not([data-theme]) .quiz-options button[data-correct-article="das"] { border-color: #5fc887; background: #172820; color: #a9f1bf; }
  html:not([data-theme]) .writing-feedback[data-kind="error"] { border-color: #b97512; background: #252015; color: #ffd08a; }
  html:not([data-theme]) .writing-feedback[data-kind="success"] { border-color: #5fc887; background: #172820; color: #a9f1bf; }
  html:not([data-theme]) .progress-overview .progress-difficult, html:not([data-theme]) .progress-status.difficult { border-color: #b97512; background: #252015; color: #ffd08a; }
  html:not([data-theme]) .progress-overview .progress-mastered, html:not([data-theme]) .progress-status.mastered { border-color: #5fc887; background: #172820; color: #a9f1bf; }
  html:not([data-theme]) .progress-status.remembered { border-color: #6d9dff; background: #18222e; color: #b7cbff; }
  html:not([data-theme]) .contribution-status { border-color: #b97512; background: #252015; color: #ffd08a; }
  html:not([data-theme]) .contribution-status.in_review { border-color: #6d9dff; background: #18222e; color: #b7cbff; }
  html:not([data-theme]) .contribution-status.approved { border-color: #5fc887; background: #172820; color: #a9f1bf; }
  html:not([data-theme]) .contribution-status.declined { border-color: #d16759; background: #24191b; color: #ffb4ab; }
  html:not([data-theme]) .admin-nav-item b, html:not([data-theme]) .admin-status.pending { border-color: #b97512; background: #252015; color: #ffd08a; }
  html:not([data-theme]) .admin-status.info { border-color: #6d9dff; background: #18222e; color: #b7cbff; }
}

/* Responsive guardrails: every screen owns its width and its safe-area colour. */
html, body { max-width: 100%; overflow-x: clip; }
.dashboard > *, .admin-console > *, .study-session > *, .dashboard-content, .guide-content, .admin-content, .study-content, .search-content, .contribute-content, .account-content, .progress-content, .feedback-content, .contributors-content, .contribution-history-content { min-width: 0; }
.dashboard-content, .guide-content, .admin-content, .study-content, .search-content, .contribute-content, .account-content, .progress-content, .feedback-content, .contributors-content, .contribution-history-content { overflow-wrap: anywhere; }

/* Navigation section labels read as labels rather than a second page title. */
.app-sidebar nav p, .admin-sidebar nav > p { width: calc(100% - 24px); margin: 26px 12px 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--ink-faint); font-size: 0.6875rem; font-weight: 700; letter-spacing: .11em; }
.admin-sidebar nav > p:first-child { margin-top: 0; }
.admin-identity small::before { content: "Your account · "; }

.explore-content { width: min(45rem, 100%); padding: 48px 56px 88px; }
.explore-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; }
.explore-heading .eyebrow { margin: 0 0 8px; }
.explore-heading h1 { margin: 0; font-family: var(--display); font-size: 2rem; letter-spacing: -.035em; line-height: 1.15; }
.explore-heading > span > p:last-child { max-width: 560px; margin: 5px 0 0; color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.375rem; }
.explore-content .explore-actions { width: min(35rem, 100%); margin-top: 32px; }
/* The admin appearance picker sits in a plain card; the fieldset itself must not
   carry the border, because legends render inside a fieldset's border area. */
.admin-appearance-card { width: min(26.875rem, 100%); margin: 24px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.admin-appearance-control { width: 100%; margin: 0; }

/* Panel header actions align with the heading instead of stretching. */
.admin-panel header .secondary-button { flex: 0 0 auto; min-height: 40px; padding-inline: 14px; white-space: nowrap; }

/* Inline text actions inside an app bar align with the title row. */
.back-app-bar .text-button { grid-area: auto; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 4px; }

/* Fieldset legends participate in the form's flow so spacing stays even. */
.feedback-form legend { float: left; width: 100%; margin-bottom: 12px; }
.feedback-form fieldset > div { clear: both; }

/* A shared app-bar geometry keeps the back control and title in the same place. */
.back-app-bar, .progress-page-heading, .contribution-history-heading, .contributors-heading, .explore-heading { min-width: 0; }
/* Icon-only back buttons sit in app bars at a fixed 48px. The admin "Back to
   queue" button is a labelled variant, so it must keep its natural width and its
   own spacing instead of being squeezed into the icon box. */
.back-button:not(.admin-back-button) { flex: 0 0 48px; margin-top: 0 !important; }
.back-button.admin-back-button { display: inline-flex; align-items: center; justify-content: flex-start; width: auto; min-width: 0; height: 40px; margin: 24px 0 16px; padding: 0 14px; white-space: nowrap; }
.progress-page-heading, .contributors-heading { align-items: center; }

/* Setup screens share one card so controls do not float on the canvas. */
.setup-card { display: grid; gap: 28px; width: min(45rem, 100%); margin-top: 8px; padding: 28px 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.setup-card .quiz-control { margin: 0; }
.setup-card .quiz-start, .setup-card .source-card { margin-top: 0; }
.setup-card .writing-guidance { margin: 0; }

/* Completed contribution words collapse to a compact summary row. */
.contribution-item.collapsed { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.contribution-item-summary { display: grid; gap: 3px; min-width: 0; }
.contribution-item-summary strong { overflow: hidden; font-size: 0.9375rem; line-height: 1.25rem; text-overflow: ellipsis; white-space: nowrap; }
.contribution-item-summary strong span { margin-right: 4px; font-weight: 700; }
.contribution-item-summary strong .article-der { color: #1d4ed8; }.contribution-item-summary strong .article-die { color: #be185d; }.contribution-item-summary strong .article-das { color: #15803d; }
.contribution-item-summary small { overflow: hidden; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.125rem; text-overflow: ellipsis; white-space: nowrap; }
.contribution-item-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.contribution-item-actions button { min-height: 40px; padding-inline: 14px; }

/* Admin feedback shows the learner's category apart from the message body. */
.admin-feedback-category { justify-self: start; margin: 0 0 -4px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-size: 0.75rem; font-weight: 700; }

/* Wide desktops: the dashboard and contribute screens use the empty right column.
   The breakpoint accounts for the 256px sidebar so the two columns never collide. */
@media (min-width: 1240px) {
  .dashboard-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); grid-template-rows: auto auto auto; gap: 0 44px; align-items: start; align-content: start; width: min(100%, 73.75rem); }
  .dashboard-heading { grid-column: 1 / -1; }
  .dashboard-content .source-card, .dashboard-content .mode-grid { grid-column: 1; }
  .dashboard-content .mode-grid { grid-template-columns: repeat(2, minmax(0, 300px)); }
  /* Progress card stretches across the source + mode rows so its top and bottom
     align with the left column. minmax(0,1fr) lets the body and weekly chart
     absorb the extra height instead of forcing the card taller than the column. */
  .dashboard-content .progress-card { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; grid-template-rows: auto minmax(0, 1fr); width: 100%; margin-top: 36px; }
  .dashboard-content .progress-body { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); }
  .dashboard-content .weekly-progress { grid-template-rows: auto minmax(72px, 1fr); }
  .dashboard-content .weekly-progress-bars { height: 100%; }
  .contribute-content { display: grid; grid-template-columns: minmax(0, 720px) minmax(300px, 380px); gap: 0 44px; align-items: start; width: min(100%, 73.75rem); }
  .contribute-content .back-app-bar { grid-column: 1 / -1; }
  .contribute-content .contribution-form { grid-column: 1; }
  .contribute-content .contribution-community { position: sticky; top: 24px; grid-column: 2; grid-row: 2; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; margin-top: 0; }
  .contribute-content .contribution-community .secondary-button { width: 100%; }
}


@media (max-width: 700px) {
  .dashboard, .admin-console, .study-session { min-height: 100dvh; padding-top: env(safe-area-inset-top); background: var(--canvas); }
  .dashboard-content, .guide-content, .admin-content, .study-content, .quiz-setup-content, .writing-setup-content, .search-content, .contribute-content, .account-content, .progress-content, .feedback-content, .contributors-content, .contribution-history-content, .explore-content { padding-top: max(24px, calc(env(safe-area-inset-top) + 8px)); padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
  .mobile-nav { z-index: 20; padding-bottom: max(8px, env(safe-area-inset-bottom)); background: var(--surface); }
  .mobile-nav button { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .mode-grid { display: flex; grid-template-columns: none; gap: 12px; margin-right: -16px; padding: 0 16px 8px 0; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline proximity; scrollbar-width: none; }
  .mode-grid::-webkit-scrollbar { display: none; }
  .mode-card { flex: 0 0 min(78vw, 300px); min-height: 168px; scroll-snap-align: start; }

  .account-content { padding-inline: 16px; }
  .account-screen .account-content { display: flex; min-height: calc(100dvh - 72px - env(safe-area-inset-bottom)); }
  .account-panel { min-width: 0; min-height: calc(100dvh - 136px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); padding: 20px 16px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; }
  .account-profile { min-width: 0; }
  .account-profile > span:last-child { overflow: hidden; }
  .account-profile strong, .account-profile small { overflow-wrap: anywhere; }
  .appearance-control > div { min-width: 0; }
  .appearance-control button { min-width: 0; padding-inline: 4px; font-size: 0.8125rem; }

  .contribution-form, .contribution-items, .contribution-item, .contribution-submit { min-width: 0; width: 100%; }
  .contribution-item { gap: 14px; padding: 16px; border-radius: 20px; }
  .contribution-item-heading { gap: 12px; padding-bottom: 14px; }
  .contribution-item-heading > span { overflow-wrap: anywhere; }
  .contribution-community { margin-top: 28px; padding: 16px; }

  .back-app-bar, .progress-page-heading, .contribution-history-heading, .contributors-heading, .explore-heading { align-items: center; gap: 12px; }
  .back-app-bar h1, .progress-page-heading h1, .contribution-history-heading h1, .contributors-heading h1, .explore-heading h1 { min-width: 0; font-size: 1.625rem; line-height: 2rem; overflow-wrap: anywhere; }
  .explore-content { width: 100%; padding-inline: 16px; }
  .explore-content .explore-actions { margin-top: 24px; }
  .explore-actions button { min-height: 76px; }
}

@media (max-width: 540px) {
  .mode-grid { display: flex; grid-template-columns: none; }
  .mode-card { flex-basis: min(82vw, 300px); min-height: 168px; }
  .progress-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dark mode uses neutral charcoal surfaces. Accent colours remain for text, borders,
   and the primary action only, rather than tinting whole components. */
html[data-theme="dark"] :is(
  .auth-message[data-kind="info"], .article-badge[data-article], .session-message,
  .review-ratings button, .guide-review-rules dl > div,
  .quiz-options button[aria-pressed="true"], .quiz-options button[data-correct="true"], .quiz-options button[data-correct-article],
  .writing-feedback, .account-requirements, .account-form-message[data-kind="error"], .delete-account-card > ul,
  .progress-metrics .needs-practice, .progress-overview .progress-difficult, .progress-overview .progress-mastered,
  .progress-status.difficult, .progress-status.remembered, .progress-status.mastered,
  .contribution-status, .admin-nav-item b, .admin-status, .admin-status-chip, .admin-pending-notice
) { background: var(--dark-muted-surface); }

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) :is(
    .auth-message[data-kind="info"], .article-badge[data-article], .session-message,
    .review-ratings button, .guide-review-rules dl > div,
    .quiz-options button[aria-pressed="true"], .quiz-options button[data-correct="true"], .quiz-options button[data-correct-article],
    .writing-feedback, .account-requirements, .account-form-message[data-kind="error"], .delete-account-card > ul,
    .progress-metrics .needs-practice, .progress-overview .progress-difficult, .progress-overview .progress-mastered,
    .progress-status.difficult, .progress-status.remembered, .progress-status.mastered,
    .contribution-status, .admin-nav-item b, .admin-status, .admin-status-chip, .admin-pending-notice
  ) { background: var(--dark-muted-surface); }
}

html[data-theme="dark"] .alphabet-pattern { background-image: var(--auth-pattern-image-dark); opacity: .045; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .alphabet-pattern { background-image: var(--auth-pattern-image-dark); opacity: .045; }
}


/* Bottom-bar tab icons (CSS masks, so they follow the tab's colour). */
.mobile-nav button[data-nav="learn"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='2.6' y='7' width='13.8' height='12.4' rx='2.6'/><path d='M7.4 4h11A2.6 2.6 0 0 1 21 6.6v11'/></svg>"); }
.mobile-nav button[data-nav="search"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.8-3.8'/></svg>"); }
.mobile-nav button[data-nav="explore"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M15.6 8.4l-2.1 5.1-5.1 2.1 2.1-5.1z'/></svg>"); }
.mobile-nav button[data-nav="account"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.8'/><path d='M4.5 20.5c0-4.1 3.4-6.6 7.5-6.6s7.5 2.5 7.5 6.6'/></svg>"); }
.mobile-nav button[data-nav="guide"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5.6A2.6 2.6 0 0 1 6.6 3H19v14.4H6.6A2.6 2.6 0 0 0 4 20z'/><path d='M4 20a2.6 2.6 0 0 1 2.6-2.6H19V21H6.6A2.6 2.6 0 0 1 4 20z'/></svg>"); }
.mobile-nav button[data-nav="overview"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7' height='7' rx='1.6'/><rect x='13.5' y='3.5' width='7' height='7' rx='1.6'/><rect x='3.5' y='13.5' width='7' height='7' rx='1.6'/><rect x='13.5' y='13.5' width='7' height='7' rx='1.6'/></svg>"); }
.mobile-nav button[data-nav="review"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><rect x='4.5' y='4.5' width='15' height='16' rx='2.6'/><path d='M8.6 12.2l2.5 2.5 4.4-4.9'/></svg>"); }
.mobile-nav button[data-nav="vocabulary"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 6.5H20M8.5 12H20M8.5 17.5H20'/><path d='M4.3 6.5h.01M4.3 12h.01M4.3 17.5h.01'/></svg>"); }
.mobile-nav button[data-nav="decks"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3.2l8.8 4.6L12 12.4 3.2 7.8z'/><path d='M3.4 12.6L12 17l8.6-4.4'/></svg>"); }
.mobile-nav button[data-nav="corrections"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M12.5 20.5H21'/><path d='M16.4 3.9a2.2 2.2 0 0 1 3.1 3.1L7.6 18.9l-4.1 1 1-4.1z'/></svg>"); }
.mobile-nav button[data-nav="more"] { --nav-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5.2 12h.01M12 12h.01M18.8 12h.01'/></svg>"); }