/* PYOB.ME bright theme for learn.pyob.me (11 Nov 2026).
   Tokens copied from DESIGN.md in auntwalle/pyob-website. Loaded after theme.css:
   it remaps theme.css's colour variables and restyles components; layout rules stay. */

@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/fredoka/fredoka-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/fredoka/fredoka-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  /* DESIGN.md tokens */
  --pyob-blue:#57A0F9;
  --pyob-pink:#FECDDB;
  --pyob-pink-deep:#F7B4C8;
  --pyob-cream:#FFF6EE;
  --pyob-yellow:#FFE08A;
  --pyob-orange:#FFB703;
  --pyob-sky:#D7EBFF;
  --pyob-ink:#1C1915;
  --pyob-ink-soft:#3A342C;
  --pyob-font-body:'Lexend','Noto Sans HK',system-ui,sans-serif;
  --pyob-font-head:'Fredoka','Noto Sans HK',system-ui,sans-serif;
  --pyob-font-zh:'Noto Sans HK','Lexend',system-ui,sans-serif;
  --pyob-body:17px;
  --pyob-card-text:18px;
  --pyob-lead:20px;
  --pyob-nav:18px;
  --pyob-button:21.6px;
  --pyob-h3:24px;
  --pyob-h2:clamp(28px,4vw,38px);
  --pyob-h1:clamp(36px,6vw,56px);
  --pyob-border:3px solid var(--pyob-ink);
  --pyob-radius:28px;
  --pyob-radius-sm:18px;
  --pyob-shadow:4px 4px 0 var(--pyob-ink);
  --pyob-shadow-sm:3px 3px 0 var(--pyob-ink);

  /* old theme.css names, remapped so inline styles and page scripts pick up the new look */
  --cream-page:var(--pyob-blue);
  --cream-card:var(--pyob-cream);
  --cream-card-hi:var(--pyob-cream);
  --line:var(--pyob-ink);
  --ink:var(--pyob-ink);
  --ink-soft:var(--pyob-ink-soft);
  --teal:var(--pyob-ink);
  --teal-soft:var(--pyob-sky);
  --gold:var(--pyob-ink);
  --gold-soft:var(--pyob-yellow);
  --green:#2E6B1F;   --green-soft:#DDF3CF;
  --maroon:#9E2B25;  --maroon-soft:#FFDCD6;
  --radius:var(--pyob-radius);
  --radius-sm:var(--pyob-radius-sm);
  --shadow:var(--pyob-shadow);
  --shadow-hi:6px 6px 0 var(--pyob-ink);
}
@media(min-width:721px){:root{--pyob-body:18px;}}

body{font-family:var(--pyob-font-body);font-size:var(--pyob-body);line-height:1.7;background:var(--pyob-blue);color:var(--pyob-ink);overflow-x:hidden;}
h1,h2,h3{line-height:1.2;}
a{color:var(--pyob-ink);}
:focus-visible{outline:3px solid var(--pyob-ink)!important;outline-offset:3px;}
small{color:var(--pyob-ink-soft);}

/* Headings: English part in Fredoka uppercase; Chinese stays normal case in Noto Sans HK */
.hub-head h1,.ai-header h1,.auth-title,.tile h2,#gradeText,.article-box h2{font-family:var(--pyob-font-head);font-weight:700;text-transform:uppercase;}
.hub-head h1 span,.ai-header h1 span,.auth-title span,.tile h2 small{font-family:var(--pyob-font-head);font-weight:700;color:var(--pyob-ink);}
.hub h2,.ai-wrap>h2{font-family:var(--pyob-font-head);font-size:var(--pyob-h3);}

/* NAV */
.topnav{background:var(--pyob-cream);border-bottom:var(--pyob-border);padding:12px 24px;}
.nav-brand{font-family:var(--pyob-font-head);font-size:22px;font-weight:700;}
.nav-links{gap:8px;}
.nav-links a{color:var(--pyob-ink);font-size:var(--pyob-nav);font-weight:700;padding:6px 14px;border:3px solid transparent;border-radius:999px;}
.nav-links a:hover{background:var(--pyob-pink);border-color:var(--pyob-ink);}
.nav-user{color:var(--pyob-ink);font-weight:700;background:var(--pyob-pink);border:var(--pyob-border);border-radius:999px;padding:2px 14px;font-size:16px;}

/* HUB */
.hub-head .crumb{display:inline-block;background:var(--pyob-pink);color:var(--pyob-ink);border:var(--pyob-border);border-radius:999px;padding:4px 16px;font-size:16px;letter-spacing:.06em;margin-bottom:14px;}
.hub-head h1{font-size:var(--pyob-h1);}
.hub-head h1 span{font-size:.6em;}

/* CARDS */
a.tile{background:var(--pyob-cream);border:var(--pyob-border);border-radius:var(--pyob-radius);box-shadow:var(--pyob-shadow);}
a.tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pyob-ink);}
.tile-icon{width:56px;height:56px;border-radius:50%;border:var(--pyob-border);color:var(--pyob-ink)!important;}
.tile-icon svg{width:28px;height:28px;}
.tile.t1 .tile-icon{background:var(--pyob-pink);}
.tile.t2 .tile-icon{background:var(--pyob-yellow);}
.tile.t3 .tile-icon{background:var(--pyob-orange);}
.tile.t4 .tile-icon{background:var(--pyob-sky);}
.tile h2{font-size:var(--pyob-h3);}
.tile h2 small{font-size:17px;margin-top:2px;}
.tile p{font-size:var(--pyob-card-text);color:var(--pyob-ink-soft);}
.tile .go{color:var(--pyob-ink)!important;font-family:var(--pyob-font-head);text-transform:uppercase;font-size:18px;}

/* AUTH */
.auth-card{background:var(--pyob-cream);border:var(--pyob-border);border-radius:var(--pyob-radius);box-shadow:var(--pyob-shadow);}
.auth-title{font-size:clamp(30px,5vw,40px);}
.auth-title span{font-size:.62em;}
.auth-form label{font-size:17px;}
.auth-form input,.auth-form select{border:var(--pyob-border);border-radius:16px;background:#fff;font-size:18px;min-height:56px;}
.auth-form input:focus,.auth-form select:focus{outline:3px solid var(--pyob-ink);outline-offset:3px;border-color:var(--pyob-ink);}
.auth-card a{font-weight:700;color:var(--pyob-ink)!important;}

/* BUTTONS */
.btn{font-family:var(--pyob-font-head);font-size:var(--pyob-button);font-weight:700;text-transform:uppercase;letter-spacing:.02em;min-height:60px;padding:12px 28px;border-radius:999px;border:var(--pyob-border);background:var(--pyob-pink);color:var(--pyob-ink);box-shadow:var(--pyob-shadow);transition:transform .12s,box-shadow .12s,background .12s;}
.btn:hover{background:var(--pyob-pink-deep);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--pyob-ink);}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--pyob-ink);}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:var(--pyob-shadow-sm);}
.btn:disabled:hover{background:var(--pyob-pink);}
.btn-ghost{background:var(--pyob-cream);color:var(--pyob-ink);border:var(--pyob-border);}
.btn-ghost:hover{background:var(--pyob-yellow);}
.btn-sm{font-size:17px;min-height:48px;padding:8px 20px;box-shadow:var(--pyob-shadow-sm);}
.btn svg{width:22px;height:22px;}

/* ALERTS */
.alert{border:var(--pyob-border);border-radius:var(--pyob-radius-sm);color:var(--pyob-ink);font-size:17px;}
.alert-ok{background:var(--green-soft);color:var(--pyob-ink);}
.alert-error{background:var(--maroon-soft);color:var(--pyob-ink);}

/* USER LIST */
.user-row{background:var(--pyob-cream);border:var(--pyob-border);border-radius:var(--pyob-radius-sm);box-shadow:var(--pyob-shadow-sm);}
.user-email{color:var(--pyob-ink-soft);}
.badge{border:2px solid var(--pyob-ink);color:var(--pyob-ink)!important;}
.badge-child{background:var(--pyob-sky);}
.badge-admin{background:var(--pyob-yellow);}
.badge-superadmin{background:var(--pyob-pink);}

/* AI PAGES */
.ai-header h1{font-size:clamp(28px,4.5vw,38px);}
.ai-header h1 span{font-size:.62em;}
.lang-toggle{background:var(--pyob-cream);border:var(--pyob-border);border-radius:999px;padding:4px;gap:4px;}
.lang-btn{font-family:var(--pyob-font-head);font-size:17px;min-height:44px;padding:6px 16px;border:3px solid transparent;background:transparent;color:var(--pyob-ink);}
.lang-btn.active{background:var(--pyob-pink);color:var(--pyob-ink);border-color:var(--pyob-ink);}

/* UPLOAD (placeholder frame) */
.upload-zone{background:var(--pyob-cream);border:3px dashed var(--pyob-ink);border-radius:var(--pyob-radius);}
.upload-zone:hover{border-color:var(--pyob-ink);background:#fff;}
.upload-zone svg{color:var(--pyob-ink)!important;}
.upload-zone small{font-size:16px;}
.thumb{border:var(--pyob-border);border-radius:14px;background:var(--pyob-cream);}
.thumb-add{border-style:dashed;color:var(--pyob-ink);}

/* CHAT */
.msg{border:var(--pyob-border);border-radius:22px;font-size:18px;overflow-wrap:anywhere;padding-right:48px;}
.msg-ai{background:var(--pyob-cream);}
.msg-user{background:var(--pyob-pink);color:var(--pyob-ink);}
.msg-speak{opacity:.85;}
.chat-input-row input{border:var(--pyob-border);border-radius:999px;background:#fff;min-height:56px;min-width:0;}
.speak-btn{width:56px;height:56px;flex:none;border-radius:50%;border:var(--pyob-border);background:var(--pyob-sky);color:var(--pyob-ink);box-shadow:var(--pyob-shadow-sm);}
.chat-input-row .btn{flex:none;padding:12px 18px;}

/* WRITING */
.step-info{background:var(--pyob-yellow);color:var(--pyob-ink);border:var(--pyob-border);border-radius:999px;font-size:17px;}
.article-box{background:var(--pyob-cream);border:var(--pyob-border);box-shadow:var(--pyob-shadow);}

/* PILL PICKERS (question type / language / count) */
.count-pick{background:var(--pyob-cream);border:var(--pyob-border);border-radius:30px;padding:4px;gap:4px;overflow:visible;}
.count-pick button{font-size:17px;min-height:48px;padding:8px 18px;border-radius:999px;border:3px solid transparent;color:var(--pyob-ink);}
.count-pick button+button{border-left:3px solid transparent;}
.count-pick button.active{background:var(--pyob-pink);color:var(--pyob-ink);border-color:var(--pyob-ink);}

/* QUIZ: setup and result sit in cream cards on the blue page */
#genBox,#resultBox{background:var(--pyob-cream);border:var(--pyob-border);border-radius:var(--pyob-radius);box-shadow:var(--pyob-shadow);padding:28px 24px;}
#syllabusInput{border:var(--pyob-border)!important;background:#fff;}
#quizTitle{color:var(--pyob-ink)!important;background:var(--pyob-cream);border:var(--pyob-border);border-radius:999px;padding:6px 18px;display:inline-block;overflow-wrap:anywhere;}
.quiz-card{background:var(--pyob-cream)!important;border:var(--pyob-border)!important;box-shadow:var(--pyob-shadow);}
#qzh{font-size:24px!important;line-height:1.45;overflow-wrap:anywhere;}
.q-sub{font-size:19px;color:var(--pyob-ink-soft);}
.qtype-tag{background:var(--pyob-yellow);color:var(--pyob-ink);border:2px solid var(--pyob-ink);font-size:13px;}
#qcount{color:var(--pyob-ink)!important;background:var(--pyob-cream);border:var(--pyob-border);border-radius:999px;padding:2px 12px;}

/* Progress bars: cream track with ink border, pink fill */
.quiz-progress{flex:1;height:22px;background:var(--pyob-cream);border:var(--pyob-border);border-radius:999px;overflow:hidden;}
.quiz-progress span{display:block;height:100%;width:0;background:var(--pyob-pink);transition:width .3s;}
.gen-progress{height:22px;background:var(--pyob-cream);border:var(--pyob-border);}
.gen-progress span{background:var(--pyob-pink);}

/* Answer options: big, well spaced from their speaker buttons */
.quiz-options{gap:16px!important;}
.quiz-options>div{gap:14px!important;min-width:0;}
.opt-btn{font-size:20px!important;min-height:64px;padding:16px 16px!important;border-width:3px!important;border-radius:20px!important;color:var(--pyob-ink);min-width:0;overflow-wrap:anywhere;position:relative;}
.opt-btn:hover:not(:disabled){background:var(--pyob-sky)!important;}
.opt-btn.is-selected,.opt-btn.is-selected:hover{background:var(--pyob-yellow)!important;outline:3px solid var(--pyob-ink);outline-offset:0;box-shadow:var(--pyob-shadow)!important;padding-right:48px!important;}
.opt-btn.is-selected::after{content:'✓';position:absolute;right:12px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--pyob-ink);color:var(--pyob-yellow);font-size:18px;line-height:28px;text-align:center;}
.opt-spk{width:56px!important;border:var(--pyob-border)!important;border-radius:50%!important;background:var(--pyob-sky)!important;align-self:center;height:56px;}
.opt-spk:hover:not(:disabled){background:var(--pyob-yellow)!important;}
#explainBox{border:var(--pyob-border);color:var(--pyob-ink);font-size:18px!important;}
.why-wrong{border:2px solid var(--pyob-ink);border-left:6px solid var(--maroon);}
.blank{border-bottom-color:var(--pyob-ink);background:var(--pyob-sky);}
.quiz-word.speaking{background:var(--pyob-yellow)!important;}

/* Result */
.score-ring{background:var(--pyob-yellow)!important;border:var(--pyob-border);box-shadow:var(--pyob-shadow);font-family:var(--pyob-font-head);}
#scoreTotal{color:var(--pyob-ink)!important;}
#gradeText{font-size:var(--pyob-h2)!important;}
#gradeMsg{color:var(--pyob-ink-soft)!important;}
.mistake{background:var(--maroon-soft);border:var(--pyob-border);}
.regen-box{border:3px dashed var(--pyob-ink);background:#fff;}

/* HISTORY + REVIEW */
.person-tabs a{border:var(--pyob-border);background:var(--pyob-cream);color:var(--pyob-ink);}
.person-tabs a.active{background:var(--pyob-pink);color:var(--pyob-ink);border-color:var(--pyob-ink);}
.hist-summary div,.hist-card{background:var(--pyob-cream);border:var(--pyob-border);box-shadow:var(--pyob-shadow-sm);}
.hist-summary b{font-family:var(--pyob-font-head);}
.hist-version,.regen-row{border-top:2px dashed var(--pyob-ink);}
.hist-tries a{color:var(--pyob-ink);}
.score-pill{border:2px solid var(--pyob-ink);color:var(--pyob-ink)!important;}
.score-pill.ok{background:var(--pyob-yellow);}
.review-q{background:var(--pyob-cream);border:var(--pyob-border);border-left:10px solid var(--pyob-ink);}
.review-q li{border:2px solid var(--pyob-ink);font-size:17px;}
.rq-en{color:var(--pyob-ink-soft);}
.ai-wrap>p{color:var(--pyob-ink)!important;}

/* Admin stats inline cards */
.ai-wrap table{color:var(--pyob-ink);}

/* PHONES: no sideways scrolling, single-column grids */
.hub,.ai-wrap,.auth-card,.hist-card,.user-row,.tile,.review-q{min-width:0;overflow-wrap:anywhere;}
.msg{min-width:0;overflow-wrap:anywhere;}
.cards>*{min-width:0;}
.ai-header h1{min-width:0;}
@media(max-width:720px){
  .topnav{padding:10px 16px;}
  .nav-links a{font-size:16px;padding:4px 10px;}
  .ai-wrap{padding:24px 16px 64px;}
  .hub{padding:28px 16px 64px;}
  .auth-wrap{padding:16px;}
  .auth-card{padding:28px 20px;}
  #genBox,#resultBox{padding:22px 16px;}
  .quiz-card{padding:22px 16px!important;}
  .quiz-options{grid-template-columns:1fr!important;}
  .count-pick{justify-content:center;}
  .count-pick button{padding:8px 12px;}
  .regen-box{padding:16px 12px;}
  .btn{font-size:19px;padding:12px 22px;}
  .btn-sm{font-size:16px;}
  .hist-summary{grid-template-columns:1fr 1fr 1fr;gap:8px;}
  .hist-summary b{font-size:22px;}
  .user-row .btn{white-space:normal;}
  .ai-wrap>div[style*="repeat(3"]{grid-template-columns:1fr!important;}
  .ai-wrap>div[style*="overflow:hidden"]{overflow-x:auto!important;}
}
@media(max-width:360px){
  .count-pick button{padding:8px 12px;font-size:16px;}
  .btn{padding:12px 16px;}
  .score-ring{width:170px!important;height:170px!important;font-size:64px!important;}
}