:root{
    --ink:#14323f; --ink-soft:#2c4f5e; --paper:#f4efe3; --paper-2:#fbf8f0;
    --stamp:#b23a48; --gold:#c19a3e; --line:#d8cfba; --ok:#2f7d52;
    --shadow:0 1px 0 rgba(20,50,63,.05), 0 8px 24px -16px rgba(20,50,63,.45);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0; background:var(--paper); color:var(--ink); font-family:"Inter",system-ui,sans-serif; line-height:1.55; font-size:16px;
    background-image:radial-gradient(circle at 1px 1px, rgba(20,50,63,.05) 1px, transparent 0); background-size:22px 22px}
  .sheet{max-width:920px; margin:0 auto; padding:0 18px 70px}
  a{color:inherit}

  /* toolbar */
  .toolbar{position:sticky; top:0; z-index:20; margin:0 -18px; padding:10px 18px; background:rgba(244,239,227,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap}
  .toolbar .ttl{margin-right:auto; font-family:"Archivo",sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
  .tbtn{font-family:"Archivo",sans-serif; font-weight:700; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; border-radius:7px; padding:8px 13px; cursor:pointer; border:1.5px solid var(--ink); background:var(--paper); color:var(--ink)}
  .tbtn:hover{background:var(--ink); color:var(--paper)}
  .tbtn.primary{background:var(--ink); color:var(--paper)} .tbtn.primary:hover{background:var(--ink-soft)}
  .totscore{font-family:"Archivo",sans-serif; font-weight:900; font-size:13px; color:var(--ink); background:rgba(193,154,62,.18); border:1.5px solid var(--gold); border-radius:7px; padding:7px 11px}

  /* HOME */
  .hero{border:2px solid var(--ink); border-radius:16px; overflow:hidden; background:var(--paper-2); box-shadow:var(--shadow); margin-top:18px}
  .hero-top{background:var(--ink); color:var(--paper); padding:30px 26px; position:relative}
  .hero .eyebrow{font-family:"Archivo",sans-serif; font-weight:700; letter-spacing:.24em; text-transform:uppercase; font-size:12px; color:var(--gold)}
  .hero h1{font-family:"Archivo",sans-serif; font-weight:900; font-size:38px; line-height:1.02; margin:.18em 0 .1em; letter-spacing:-.015em}
  .hero .lead{font-size:14.5px; color:#cfe0e6; max-width:60ch}
  .hero-strip{height:7px; background:repeating-linear-gradient(90deg,var(--gold) 0 16px,transparent 16px 32px)}
  .hero-note{padding:14px 22px; font-size:14px; color:var(--ink-soft); display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .hero-note input{font-family:inherit; font-size:15px; border:0; border-bottom:1.6px solid var(--ink-soft); background:transparent; padding:2px 6px; min-width:200px; outline:none}

  .grid-h3{font-family:"Archivo",sans-serif; font-weight:700; font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin:26px 4px 12px}
  .themes{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
  .tile{display:flex; flex-direction:column; text-align:left; cursor:pointer; border:1.5px solid var(--line); border-radius:14px; background:var(--paper-2); box-shadow:var(--shadow); overflow:hidden; transition:.18s; font:inherit; color:inherit; padding:0}
  .tile:hover{transform:translateY(-3px); border-color:var(--ink)}
  .tile .t-top{display:flex; align-items:center; gap:12px; padding:16px 16px 10px}
  .tile .t-no{flex:0 0 auto; width:46px; height:46px; border:2px solid var(--ink); border-radius:9px; display:flex; align-items:center; justify-content:center; transform:rotate(-5deg); font-family:"Archivo",sans-serif; font-weight:900; font-size:20px; color:var(--ink); background:repeating-linear-gradient(45deg, rgba(178,58,72,.07) 0 4px, transparent 4px 8px)}
  .tile .t-emoji{font-size:24px; margin-left:auto}
  .tile h3{font-family:"Archivo",sans-serif; font-weight:900; font-size:17px; margin:0 16px 4px; line-height:1.12}
  .tile .t-gram{margin:0 16px 14px; font-size:12.5px; color:var(--ink-soft)}
  .tile .t-go{margin-top:auto; background:var(--ink); color:var(--paper); font-family:"Archivo",sans-serif; font-weight:700; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:9px 16px; display:flex; justify-content:space-between}
  .tile .t-done{color:var(--gold)}

  /* shared worksheet styles */
  .mast{border:2px solid var(--ink); border-radius:14px; overflow:hidden; background:var(--paper-2); box-shadow:var(--shadow); margin-top:14px}
  .mast-top{background:var(--ink); color:var(--paper); padding:18px 22px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
  .eyebrow{font-family:"Archivo",sans-serif; font-weight:700; letter-spacing:.22em; text-transform:uppercase; font-size:12px; color:var(--gold)}
  .mast-top h1{font-family:"Archivo",sans-serif; font-weight:900; font-size:28px; line-height:1.02; margin:.18em 0 0; letter-spacing:-.01em}
  .mast-top .sub{font-size:13px; color:#cfe0e6; margin-top:6px; max-width:54ch}
  .passport-mark{border:2px solid var(--gold); color:var(--gold); border-radius:50%; width:80px; height:80px; flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transform:rotate(-8deg); font-family:"Archivo",sans-serif; line-height:1}
  .passport-mark b{font-size:24px; font-weight:900} .passport-mark span{font-size:8px; letter-spacing:.14em; margin-top:3px}
  .mast-strip{height:6px; background:repeating-linear-gradient(90deg,var(--ink) 0 14px,transparent 14px 28px)}
  .mast-note{padding:13px 22px; font-size:13.5px; color:var(--ink-soft); display:flex; gap:10px; align-items:flex-start}
  .mast-note .tag{font-family:"Archivo",sans-serif; font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; background:var(--stamp); color:#fff; padding:3px 8px; border-radius:5px; white-space:nowrap; transform:rotate(-2deg)}

  .passport{margin:16px 0 4px; border:1.5px dashed var(--gold); border-radius:12px; background:var(--paper-2); padding:12px 16px}
  .passport h3{font-family:"Archivo",sans-serif; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 10px}
  .stamps{display:flex; gap:10px; flex-wrap:wrap}
  .pstamp{width:60px; height:60px; border:2px dashed var(--line); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#b9ad92; font-family:"Archivo",sans-serif; transform:rotate(-6deg); transition:.25s}
  .pstamp b{font-size:17px; font-weight:900} .pstamp span{font-size:7px; letter-spacing:.06em; margin-top:2px}
  .pstamp.earned{border:2px solid var(--ok); color:var(--ok); background:rgba(47,125,82,.10); transform:rotate(4deg)}

  .card{background:var(--paper-2); border:1.5px solid var(--line); border-radius:14px; margin:18px 0; box-shadow:var(--shadow); overflow:hidden}
  .card-head{display:flex; align-items:center; gap:14px; padding:15px 18px; border-bottom:1.5px dashed var(--line)}
  .stamp{flex:0 0 auto; width:50px; height:50px; border:2px solid var(--ink); border-radius:9px; display:flex; align-items:center; justify-content:center; transform:rotate(-5deg); font-family:"Archivo",sans-serif; font-weight:900; font-size:21px; color:var(--ink); background:repeating-linear-gradient(45deg, rgba(178,58,72,.07) 0 4px, transparent 4px 8px)}
  .card-head h2{font-family:"Archivo",sans-serif; font-weight:900; font-size:20px; margin:0}
  .card-head .focus{font-size:12.5px; color:var(--ink-soft); margin-top:2px}
  .card-head .right{margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
  .card-body{padding:6px 18px 18px}

  .ex{padding:15px 0; border-top:1px solid var(--line)} .ex:first-child{border-top:0}
  .ex h3{font-family:"Archivo",sans-serif; font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--stamp); margin:0 0 4px}
  .ex h3 .sc{color:var(--ink-soft); font-weight:400; text-transform:none; letter-spacing:0}
  .ex .task{font-size:14px; color:var(--ink-soft); margin:0 0 12px}
  ol.q{margin:0; padding-left:1.4em} ol.q>li{margin:10px 0}

  input[type=text]{font-family:inherit; font-size:16px; color:var(--ink); border:0; border-bottom:1.6px solid var(--ink-soft); background:transparent; padding:3px 6px; min-width:110px; outline:none}
  input.short{min-width:78px; width:104px; text-align:center}
  input.full{width:100%; min-width:0; margin-top:6px}
  input[type=text]:focus{border-bottom-color:var(--stamp); background:rgba(193,154,62,.10)}
  select{font-family:inherit; font-size:16px; padding:5px 6px; border:1.4px solid var(--ink-soft); border-radius:6px; background:var(--paper-2); color:var(--ink); max-width:100%}
  textarea{width:100%; min-height:140px; font-family:"Newsreader",Georgia,serif; font-size:16px; line-height:1.7; color:var(--ink); background:repeating-linear-gradient(var(--paper-2) 0 31px, var(--line) 31px 32px); border:1.4px solid var(--line); border-radius:8px; padding:6px 12px; resize:vertical; outline:none}
  textarea:focus{border-color:var(--stamp)}
  input.correct,select.correct{border-color:var(--ok)!important; background:rgba(47,125,82,.12)!important}
  input.incorrect,select.incorrect{border-color:var(--stamp)!important; background:rgba(178,58,72,.10)!important}
  .fmark{font-family:"Archivo",sans-serif; font-weight:900; font-size:14px; margin-left:5px} .fmark.ok{color:var(--ok)} .fmark.no{color:var(--stamp)}
  .score{display:none; font-family:"Archivo",sans-serif; font-weight:900; font-size:12.5px; color:var(--ink); background:rgba(193,154,62,.18); border:1.5px solid var(--gold); border-radius:7px; padding:6px 10px}

  .ans{display:none; font-family:"Archivo",sans-serif; font-weight:700; font-size:13px; color:var(--ok); background:rgba(47,125,82,.12); border:1px solid rgba(47,125,82,.4); padding:1px 7px; border-radius:5px; margin-left:6px}
  .answers-shown .ans{display:inline-block}
  .reveal,.btn{font-family:"Archivo",sans-serif; font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); background:var(--paper); border:1.5px solid var(--ink); border-radius:7px; padding:7px 11px; cursor:pointer; transition:.15s}
  .reveal:hover,.btn:hover{background:var(--ink); color:var(--paper)}
  .btn.check[aria-pressed=true]{background:var(--ok); border-color:var(--ok); color:#fff}
  .reveal[aria-pressed=true]{background:var(--gold); border-color:var(--gold); color:#3a2d05}

  table.grid{border-collapse:collapse; width:100%; margin-top:4px; font-size:14.5px}
  table.grid th, table.grid td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
  table.grid th{background:var(--ink); color:var(--paper); font-family:"Archivo",sans-serif; font-weight:700; font-size:13px}
  table.grid tr:nth-child(even) td{background:rgba(20,50,63,.03)}
  .match{display:grid; grid-template-columns:1fr 1fr; gap:8px 26px}
  .match .row{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:14.5px}
  .match .num{font-weight:700; min-width:18px}
  .bank{display:flex; flex-wrap:wrap; gap:8px; padding:10px 12px; margin:2px 0 14px; background:rgba(193,154,62,.10); border:1px dashed var(--gold); border-radius:8px; font-size:14px}
  .bank b{font-family:"Archivo",sans-serif; font-weight:700; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); align-self:center; margin-right:4px}
  .chip{background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:3px 12px}
  .chip.spk{cursor:pointer}

  .passage{font-family:"Newsreader",Georgia,serif; font-size:16.5px; line-height:1.72; background:var(--paper); border:1px solid var(--line); border-left:5px solid var(--ink); border-radius:8px; padding:14px 18px; margin:6px 0 14px}
  .passage .ptitle{font-family:"Archivo",sans-serif; font-weight:900; font-size:18px; color:var(--ink); margin:0 0 8px}
  .passage p{margin:0 0 10px} .passage p:last-child{margin-bottom:0}
  .tfnm{display:flex; gap:6px; align-items:center; flex-wrap:wrap}

  .checklist{list-style:none; margin:8px 0 0; padding:0; font-size:14.5px}
  .checklist li{position:relative; padding-left:26px; margin:7px 0}
  .checklist .box{position:absolute; left:0; top:2px; width:16px; height:16px; border:1.6px solid var(--ink-soft); border-radius:4px}

  .listen{display:inline-flex; align-items:center; gap:7px; font-family:"Archivo",sans-serif; font-weight:700; font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--ink); border:0; border-radius:20px; padding:7px 14px; cursor:pointer}
  .listen:hover{background:var(--ink-soft)} .listen.small{padding:4px 9px; font-size:11px; border-radius:14px}
  .transcript{display:none; margin-top:10px} .transcript.show{display:block}

  .rolecards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
  .rolecard{border:1.5px solid var(--ink); border-radius:10px; overflow:hidden; background:var(--paper)}
  .rolecard .rc-head{background:var(--ink); color:var(--paper); font-family:"Archivo",sans-serif; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:7px 12px}
  .rolecard ul{margin:8px 0; padding-left:18px; font-size:14px}

  .star{margin-top:14px; border:1.5px solid var(--line); border-left:5px solid var(--gold); border-radius:8px; background:rgba(193,154,62,.07); padding:11px 14px}
  .star .lvl{font-family:"Archivo",sans-serif; font-weight:900; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:#9a7a1f; margin-right:6px}
  .star p{margin:4px 0; font-size:14px}

  .fc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; margin-top:8px}
  .fc{height:86px; perspective:700px; cursor:pointer}
  .fc-inner{position:relative; width:100%; height:100%; transition:transform .45s; transform-style:preserve-3d}
  .fc.flipped .fc-inner{transform:rotateY(180deg)}
  .fc-face{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:8px; border-radius:10px; backface-visibility:hidden; font-weight:600}
  .fc-front{background:var(--ink); color:var(--paper); font-family:"Archivo",sans-serif; font-size:15px}
  .fc-back{background:var(--paper); color:var(--ink); border:1.5px solid var(--gold); transform:rotateY(180deg); font-size:15px; font-family:"Newsreader",Georgia,serif}
  .fc-spk{position:absolute; top:5px; right:7px; font-size:12px; opacity:.7}

  .candos{display:grid; gap:8px}
  .cando{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--paper); border:1px solid var(--line); border-radius:8px; font-size:14.5px}
  .cando .marks{margin-left:auto; display:flex; gap:6px}
  .cando .marks span{width:30px; height:24px; border:1.4px solid var(--ink-soft); border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--ink-soft); font-family:"Archivo",sans-serif; font-weight:700}

  .cert{display:none; border:3px double var(--gold); border-radius:14px; background:var(--paper-2); padding:26px; text-align:center; box-shadow:var(--shadow)}
  .cert.show{display:block}
  .cert .ce{font-family:"Archivo",sans-serif; font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:12px; color:var(--gold)}
  .cert h2{font-family:"Newsreader",Georgia,serif; font-weight:500; font-size:26px; margin:8px 0}
  .cert .name{font-family:"Archivo",sans-serif; font-weight:900; font-size:23px; color:var(--ink); border-bottom:2px solid var(--ink); display:inline-block; padding:2px 30px 6px; margin:6px 0 12px}
  .cert .meta{font-size:14px; color:var(--ink-soft)}
  .cert .seal{margin:14px auto 0; width:76px; height:76px; border:2px solid var(--stamp); color:var(--stamp); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:"Archivo",sans-serif; transform:rotate(-8deg)}
  .cert .seal b{font-size:20px} .cert .seal span{font-size:7px; letter-spacing:.1em}

  footer{margin-top:24px; text-align:center; font-size:12px; color:var(--ink-soft)}
  .hidden{display:none!important}

  /* progress + completion (web) */
  .hprogress{margin:20px 4px 4px}
  .hprogress .bar{height:14px; border-radius:8px; background:rgba(20,50,63,.10); border:1px solid var(--line); overflow:hidden}
  .hprogress .fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--ok)); width:0; transition:width .5s}
  .hprogress .lbl{display:flex; justify-content:space-between; align-items:center; margin-top:8px; font-size:13px; color:var(--ink-soft)}
  .hprogress .lbl b{font-family:"Archivo",sans-serif; color:var(--ink)}
  .miniReset{font-family:"Archivo",sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; border:1.5px solid var(--line); background:var(--paper); color:var(--ink-soft); border-radius:6px; padding:6px 10px; cursor:pointer}
  .miniReset:hover{border-color:var(--stamp); color:var(--stamp)}
  .tile{position:relative}
  .tile .t-badge{position:absolute; top:10px; right:10px; font-family:"Archivo",sans-serif; font-weight:900; font-size:10px; letter-spacing:.06em; text-transform:uppercase; padding:4px 9px; border-radius:20px; z-index:2}
  .tile .t-badge.done{background:var(--ok); color:#fff}
  .tile .t-badge.part{background:rgba(193,154,62,.2); color:#8a6d1c; border:1px solid var(--gold)}
  .tile.is-done{border-color:var(--ok)}

  /* teacher mode */
  .tbanner{display:none; align-items:center; gap:12px; flex-wrap:wrap; margin:14px 0 0; padding:12px 16px; border-radius:12px; background:#3a2d05; color:#f6e9c2; border:1.5px solid var(--gold); font-size:13.5px}
  body.teacher .tbanner{display:flex}
  .tbanner b{font-family:"Archivo",sans-serif; letter-spacing:.04em}
  .tbanner button{margin-left:auto; font-family:"Archivo",sans-serif; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.05em; background:var(--gold); color:#3a2d05; border:0; border-radius:6px; padding:7px 12px; cursor:pointer}
  body.teacher #themeView .ans{display:inline-block}
  .teacher-pill{font-family:"Archivo",sans-serif; font-weight:700; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; background:var(--gold); color:#3a2d05; border-radius:6px; padding:5px 9px}
  .savednote{font-size:12px; color:var(--ink-soft)}

  *{-webkit-tap-highlight-color:rgba(193,154,62,.25)}

  @media (max-width:560px){
    body{font-size:15px}
    .sheet{padding:0 12px 60px}
    .toolbar{padding:8px 12px; gap:7px} .toolbar .ttl{flex-basis:100%; margin-bottom:2px}
    .tbtn{padding:9px 12px; font-size:11px} .totscore{order:5}
    .match,.rolecards{grid-template-columns:1fr}
    .hero-top{padding:22px 18px} .hero h1{font-size:26px} .mast-top h1{font-size:21px}
    .card-body{padding:6px 13px 16px} .card-head{padding:13px 14px; gap:10px}
    .themes{grid-template-columns:1fr; gap:13px}
    .listen{padding:9px 15px} .listen.small{padding:7px 12px; font-size:11px}
    .reveal,.btn{padding:9px 12px}
    .chip{padding:6px 13px} .chip.spk{padding:7px 13px}
    .cando{flex-wrap:wrap} .cando .marks{margin-left:0; margin-top:6px}
    .fc-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
    input.short{width:92px}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}
  @media print{
    body{background:#fff; font-size:12pt}
    .toolbar,.reveal,.btn,.listen,.transcript-btn,.fc-spk,#homeView .themes,.hero-note,.tbanner,.hprogress,.t-go{display:none!important}
    .ans{display:inline-block!important} .transcript{display:block!important}
    .card,.mast,.cert{box-shadow:none; break-inside:avoid}
    .sheet{max-width:none; padding:0} .fc-inner{transform:none!important} .fc-back{position:static; transform:none; display:block} .fc-front{display:none}
  }