*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:
    linear-gradient(rgba(18,9,3,.50), rgba(11,5,1,.62)),
    url(assets/textures/mahogany-seamless.webp) #2a160b;
  background-size:auto, 512px;
  background-repeat:no-repeat, repeat;     /* the tile is torus-seamless, so it repeats forever with no seam */
  background-attachment:fixed, scroll;
  font-family:'Cormorant Garamond',serif;
  color:#f0d68a;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* Classroom command bar ---------------------------------------------------
   Everyday actions stay visible; teaching and administration live in a calm,
   manuscript-inspired menu instead of becoming a second row of bright pills. */
.topbar-controls{
  position:relative;z-index:55;display:flex;align-items:center;justify-content:flex-end;
  gap:8px;flex-wrap:nowrap;margin-left:auto;min-width:0;
}
.classroom-code,.topbar-primary-action,.topbar-profile,.rihal-menu>summary{
  min-height:40px;border:0;cursor:pointer;transition:transform .15s ease,filter .15s ease,box-shadow .15s ease;
}
.classroom-code:hover,.topbar-primary-action:hover,.topbar-profile:hover,.rihal-menu>summary:hover{
  filter:brightness(1.1);transform:translateY(-1px);
}
.classroom-code{
  display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;
  column-gap:9px;padding:5px 11px;border-radius:10px;color:#e8d39b;text-align:left;
  background:linear-gradient(145deg,#211307,#100904);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.72),0 0 0 1px rgba(168,126,42,.72),0 1px 0 rgba(238,207,126,.16);
}
.classroom-code-label{
  grid-column:1;font-family:'Cormorant SC',serif;font-size:8.5px;line-height:1;letter-spacing:.15em;color:#a8884e;
}
.classroom-code-value{
  grid-column:1;font-family:VT323,monospace;font-size:19px;line-height:1;letter-spacing:2.4px;color:#80e9a4;
  text-shadow:0 0 6px rgba(95,240,150,.45);
}
.classroom-code-copy{grid-column:2;grid-row:1/3;font-size:13px;color:#caa24a;}
.topbar-primary-action{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 14px;border-radius:10px;
  font-family:'Cormorant SC',serif;font-size:11px;font-weight:700;letter-spacing:.11em;color:#e9f5e8;
  background:linear-gradient(#245e3b,#103722);box-shadow:inset 0 1px 0 rgba(219,255,229,.2),0 2px 6px rgba(0,0,0,.45),0 0 0 1px #4c795a;
}
.topbar-primary-action>span:first-child{font-size:15px;color:#d9c574;}
.topbar-profile{
  display:flex;align-items:center;gap:7px;max-width:148px;padding:4px 11px 4px 5px;border-radius:22px;
  color:#f0d68a;background:linear-gradient(#3b2811,#211307);
  box-shadow:inset 0 1px 0 rgba(223,190,110,.2),0 2px 5px rgba(0,0,0,.4),0 0 0 1px #654814;
}
.topbar-profile>span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'Cormorant Garamond',serif;font-size:13.5px;font-weight:600;
}
.rihal-menu{position:relative;display:inline-block;}
.rihal-menu>summary{
  list-style:none;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;border-radius:10px;
  font-family:'Cormorant SC',serif;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:#ead9ad;
  background:linear-gradient(#3b2811,#211307);box-shadow:inset 0 1px 0 rgba(223,190,110,.2),0 2px 5px rgba(0,0,0,.4),0 0 0 1px #654814;
}
.rihal-menu>summary::-webkit-details-marker{display:none;}
.rihal-menu>summary::marker{content:'';}
.rihal-menu[open]>summary{
  color:#fff0bd;background:linear-gradient(#59401a,#2c1c0b);box-shadow:inset 0 1px 0 rgba(255,231,167,.3),0 0 0 1px #b18734,0 4px 10px rgba(0,0,0,.45);
}
.summary-star{font-size:12px;color:#d9b85d;}
.summary-chevron{display:inline-block;color:#b99855;transition:transform .18s ease;}
.rihal-menu[open]>summary .summary-chevron{transform:rotate(180deg);}
.command-menu-panel{
  position:absolute;right:0;top:calc(100% + 10px);z-index:90;width:294px;max-width:calc(100vw - 32px);
  overflow:hidden;padding:0 8px 8px;border:1px solid #88651e;border-radius:18px 18px 11px 11px;
  color:#f4e4ba;background:
    linear-gradient(rgba(20,10,4,.84),rgba(20,10,4,.92)),
    url(assets/textures/mahogany.webp) #281407;
  background-size:auto,360px;background-blend-mode:normal,multiply;
  box-shadow:inset 0 0 28px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,235,178,.26),0 18px 34px rgba(0,0,0,.68);
  animation:commandmenuin .16s ease both;
}
.command-menu-panel::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 4px rgba(26,12,4,.52),inset 0 0 0 5px rgba(201,162,74,.12);
}
.command-menu-arch{
  position:relative;height:43px;margin:0 -8px 4px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:#d5b55f;background:
    linear-gradient(rgba(7,22,35,.48),rgba(6,14,27,.7)),
    repeating-linear-gradient(45deg,transparent 0 10px,rgba(213,181,95,.14) 10px 11px),
    repeating-linear-gradient(-45deg,transparent 0 10px,rgba(213,181,95,.14) 10px 11px),#102348;
  border-bottom:1px solid rgba(209,173,75,.55);box-shadow:inset 0 -8px 18px rgba(0,0,0,.38);
}
.command-menu-arch::before,.command-menu-arch::after{content:'✦';margin:0 13px;font-size:8px;color:#a98330;}
.command-menu-arch span{font-family:'Amiri',serif;font-size:15px;letter-spacing:.08em;text-shadow:0 1px 2px #000;}
.command-menu-title{
  padding:5px 8px 7px;text-align:center;font-family:'Cormorant SC',serif;font-size:10px;font-weight:700;letter-spacing:.2em;color:#caa24a;
}
.command-menu-list{display:grid;gap:3px;}
.command-menu-item{
  position:relative;z-index:1;width:100%;display:grid;grid-template-columns:31px 1fr auto;align-items:center;gap:9px;
  min-height:49px;padding:7px 9px;border:0;border-radius:8px;text-align:left;color:#eadbb9;cursor:pointer;
  background:transparent;transition:background .14s ease,transform .14s ease;
}
.command-menu-item:hover,.command-menu-item:focus-visible{background:rgba(201,162,74,.13);transform:translateX(2px);}
.command-menu-icon{
  width:29px;height:29px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:14px;color:#e2c36d;
  background:radial-gradient(circle at 38% 28%,#58401b,#211307 75%);box-shadow:inset 0 0 0 1px rgba(231,202,122,.3);
}
.command-menu-copy{display:flex;flex-direction:column;min-width:0;}
.command-menu-copy strong{font-family:'Cormorant Garamond',serif;font-size:14.5px;font-weight:600;line-height:1.05;color:#fff0ca;}
.command-menu-copy small{margin-top:2px;font-family:'Cormorant Garamond',serif;font-size:11.5px;font-style:italic;line-height:1.15;color:#aa956a;}
.command-menu-arrow{font-size:18px;color:#806a3c;}
.command-menu-item.quran .command-menu-icon{color:#bde5c8;background:radial-gradient(circle at 38% 28%,#245738,#0c2818 75%);}
.command-menu-item.admin .command-menu-icon{color:#dab8f3;background:radial-gradient(circle at 38% 28%,#58336d,#27112e 75%);}
.command-menu-item.gold .command-menu-icon{color:#281604;background:linear-gradient(#efd477,#9e7525);}
.command-view-switch{
  position:relative;z-index:1;margin:1px 4px 7px;padding:8px;border-radius:9px;background:rgba(42,19,52,.48);box-shadow:inset 0 0 0 1px rgba(178,121,211,.26);
}
.command-section-label{margin-bottom:6px;text-align:center;font-family:'Cormorant SC',serif;font-size:8px;letter-spacing:.15em;color:#bd8ed4;}
.command-view-options{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-radius:7px;background:rgba(8,4,10,.45);box-shadow:inset 0 0 0 1px #60356f;}
.command-view-options button{padding:7px;border:0;color:#bd9acb;background:transparent;font-family:'Cormorant SC',serif;font-size:9px;font-weight:700;letter-spacing:.08em;cursor:pointer;}
.command-view-options button[aria-pressed="true"]{color:#25102c;background:linear-gradient(#d7b2e8,#9e6eb8);box-shadow:inset 0 1px 0 rgba(255,255,255,.32);}
.command-menu-leave{
  position:relative;z-index:1;width:100%;display:grid;grid-template-columns:18px minmax(0,1fr) 18px;align-items:center;gap:8px;margin-top:7px;padding:10px;border:0;border-radius:8px;
  color:#dcbba7;background:rgba(70,27,18,.38);box-shadow:inset 0 0 0 1px rgba(185,105,77,.28);
  font-family:'Cormorant SC',serif;font-size:9.5px;font-weight:700;letter-spacing:.1em;cursor:pointer;
}
.command-menu-leave::after{content:'';width:18px;}
.command-menu-leave span:nth-child(2){text-align:center;}
.command-menu-leave:hover{color:#ffe0cf;background:rgba(101,38,25,.52);}
@keyframes commandmenuin{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Library page actions: one devotional reading action and one compact shelf
   menu, balanced by gilded rules like the title page of a manuscript. */
.library-intro{text-align:center;margin-bottom:17px;}
.library-action-rail{display:flex;align-items:center;justify-content:center;gap:9px;max-width:570px;margin:14px auto 0;}
.library-action-line{height:1px;flex:1 1 80px;max-width:125px;background:linear-gradient(90deg,transparent,rgba(201,162,74,.65));}
.library-action-line:last-child{transform:scaleX(-1);}
.library-quran-action{
  min-height:38px;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:0;border-radius:20px;cursor:pointer;
  font-family:'Cormorant SC',serif;font-size:10px;font-weight:700;letter-spacing:.1em;color:#d7e8d7;
  background:linear-gradient(#17462d,#09281a);box-shadow:inset 0 1px 0 rgba(191,238,203,.18),0 2px 5px rgba(0,0,0,.38),0 0 0 1px #416b4e;
}
.library-quran-action span:first-child{font-size:15px;color:#e1ca73;}
.library-manage-menu>summary{min-height:38px;padding:8px 13px;border-radius:20px;}
.library-menu-panel{left:50%;right:auto;transform:translateX(-50%);top:calc(100% + 9px);}
.library-manage-menu[open] .library-menu-panel{animation:librarymenuin .16s ease both;}
@keyframes librarymenuin{from{opacity:0;transform:translate(-50%,-5px) scale(.985)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* On narrow screens the logo owns the first row and the controls become a
   tidy command strip. Text collapses before controls are allowed to overflow. */
@media (max-width:760px){
  .app-banner{justify-content:center !important;}
  .topbar-controls{flex-basis:100%;width:100%;justify-content:center;margin-left:0;}
  .classroom-code{flex:1 1 120px;max-width:180px;}
  .classroom-command-menu .command-menu-panel{right:0;}
}
@media (max-width:500px){
  .topbar-controls{gap:6px;}
  .topbar-profile{width:40px;flex:0 0 40px;padding:4px;justify-content:center;}
  .topbar-profile>span{display:none;}
  .classroom-code{padding:5px 8px;column-gap:5px;}
  .classroom-code-label{font-size:7.5px;}
  .classroom-code-value{font-size:17px;letter-spacing:1.8px;}
  .topbar-primary-action{padding:8px 10px;}
  .rihal-menu>summary{padding:8px 10px;}
  .library-action-line{display:none;}
  .library-menu-panel{position:fixed;left:16px;right:16px;top:auto;width:auto;max-width:none;transform:none;}
  .library-manage-menu[open] .library-menu-panel{animation:commandmenuin .16s ease both;}
}
@media (max-width:370px){
  .topbar-primary-action span:last-child,.classroom-command-menu .summary-label{display:none;}
  .topbar-primary-action,.classroom-command-menu>summary{width:40px;padding:8px;}
  .classroom-code-copy{display:none;}
}
/* THEATER — the video (and sidebook, if open) fill the whole screen.
   .theater is added alongside real fullscreen; .theater-fixed is the fallback
   overlay for browsers that refuse element-fullscreen (e.g. iPhone Safari). */
#minbar-split.theater{
  position:relative;background:#0b0603;padding:14px;gap:14px;
  /* the split carries inline flex styling — these must win over it */
  max-width:none !important;flex-wrap:nowrap !important;align-items:stretch !important;
  width:100%;height:100%;overflow:auto;
}
#minbar-split.theater.theater-fixed{position:fixed;inset:0;z-index:80;height:100vh;}
#minbar-split.theater .mb-orn,
#minbar-split.theater .mb-vrow > div[aria-hidden="true"],
#minbar-split.theater #np-meta{display:none !important;}
#minbar-split.theater #player-col{
  flex:1 1 auto;max-width:none !important;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
}
#minbar-split.theater #player-slot{aspect-ratio:auto;height:calc(100vh - 80px);}
#minbar-split.theater #sidebook-col{
  flex:0 1 480px;min-width:300px;max-width:540px;
  height:auto !important;align-self:stretch;
}
#minbar-split.theater .mb-exit{display:inline-flex !important;}
.mb-exit{
  position:absolute;top:10px;right:14px;z-index:90;align-items:center;gap:6px;
  font-family:'Cormorant SC',serif;letter-spacing:.12em;font-size:11px;font-weight:700;
  color:#e7d3b0;padding:8px 14px;border:none;border-radius:8px;cursor:pointer;
  background:rgba(20,12,4,.82);box-shadow:inset 0 0 0 1px rgba(201,162,74,.5),0 2px 6px rgba(0,0,0,.5);
}
@keyframes lcdflick{0%,97%,100%{opacity:1}98%{opacity:.82}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes toastin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes bandscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(#9a7626,#5c4112);border-radius:6px;border:2px solid #2a1709}
::-webkit-scrollbar-track{background:#2a1709}

button{font-family:inherit;}
input{font-family:inherit;}
a{color:inherit;}

/* visually-hidden but available to screen readers */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* visible keyboard focus for every interactive control (accessibility) */
:focus-visible{outline:3px solid #f3dd9a;outline-offset:2px;border-radius:3px;}
[data-act]{cursor:pointer;}

.book-color-swatch{
  width:34px;height:34px;border:0;border-radius:7px;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5);transition:transform .14s ease,box-shadow .14s ease;
}
.book-color-swatch:hover{transform:translateY(-1px);}
.book-color-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px #f3d985,0 0 0 4px #6e4f12;}

/* Book titlepiece — the same visual grammar as the Minbar: a restrained
   rectangular object built from believable layers. Gilt protects the edge,
   a narrow zellij inlay marks the threshold, and the content rests on tooled
   lapis leather. Geometry stays at the boundary so the knowledge remains the
   calm visual centre. */
.book-overview{position:relative;isolation:isolate;margin:0 0 24px;filter:drop-shadow(0 15px 23px rgba(0,0,0,.58));}
.book-overview-frame{
  position:relative;border-radius:14px;padding:6px;
  background:linear-gradient(150deg,#f6e7a8,#c69a3c 23%,#7c5c18 46%,#e9d48f 65%,#8a6a1e 84%,#5c4112);
  box-shadow:inset 0 2px 1px rgba(255,250,220,.72),inset 0 -3px 5px rgba(43,24,2,.5),0 4px 0 rgba(37,19,2,.72);
}
.book-overview-inlay{
  position:relative;border-radius:9px;padding:4px;
  background:#101f47 url(assets/textures/zellij.webp);background-size:auto 34px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.68),inset 0 0 0 1px #5e4310,0 0 0 1px rgba(255,232,157,.32);
}
.book-overview-inner-frame{
  position:relative;border-radius:7px;padding:3px;
  background:linear-gradient(150deg,#f3df9b,#a77b24 36%,#ead18a 62%,#765212);
  box-shadow:inset 0 1px 0 rgba(255,252,226,.65),inset 0 -2px 3px rgba(38,20,2,.5);
}
.book-overview-panel{
  position:relative;overflow:hidden;border-radius:5px;text-align:center;
  background:
    radial-gradient(ellipse at 50% 10%,rgba(55,101,176,.22),transparent 50%),
    linear-gradient(rgba(5,18,48,.57),rgba(3,12,33,.74)),
    #102c67 url(assets/textures/leather-lapis.webp);
  background-size:auto,auto,260px;background-blend-mode:screen,multiply,normal;
  box-shadow:inset 0 0 34px rgba(0,0,0,.62),inset 0 0 0 1px rgba(16,8,2,.86);
}
.book-overview-frieze{
  position:relative;height:24px;overflow:hidden;
  background:
    linear-gradient(90deg,rgba(2,11,29,.72),transparent 22% 78%,rgba(2,11,29,.72)),
    #0c1d44 url(assets/textures/kufic.webp);
  background-size:auto,auto 29px;border-top:1px solid rgba(242,218,143,.66);border-bottom:2px solid #8b681d;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.52),inset 0 -3px 5px rgba(0,0,0,.62);
}
.book-overview-frieze::before,.book-overview-frieze::after{
  content:'✦';position:absolute;top:50%;transform:translateY(-52%);font-size:8px;color:#ecd47e;text-shadow:0 1px 2px #000;
}
.book-overview-frieze::before{left:18px;}.book-overview-frieze::after{right:18px;}
.book-overview-frieze span{
  position:absolute;left:50%;top:50%;width:74px;height:13px;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(229,197,103,.62);background:rgba(5,17,44,.66);box-shadow:inset 0 1px 2px rgba(0,0,0,.68);
}
.book-overview-frieze span::before{content:'◆';display:block;color:#e1c56f;font-size:7px;line-height:12px;text-align:center;}
.book-overview-body{position:relative;overflow:hidden;}
.book-overview-body::before,.book-overview-body::after{
  content:'';position:absolute;z-index:2;top:8px;bottom:8px;width:9px;border-radius:3px;
  background:linear-gradient(90deg,#513307,#e0bd64 45%,#6b4910);box-shadow:inset 0 0 0 1px rgba(255,238,174,.35),0 0 0 1px rgba(28,14,2,.72);
}
.book-overview-body::before{left:8px;}.book-overview-body::after{right:8px;transform:scaleX(-1);}
.book-overview-pattern{
  position:absolute;z-index:0;inset:0;pointer-events:none;opacity:.075;
  background:
    url(assets/textures/arabesque.webp) left -16px top -8px/92px auto no-repeat,
    url(assets/textures/arabesque.webp) right -16px bottom -8px/92px auto no-repeat;
}
.book-overview-content{position:relative;z-index:1;padding:22px clamp(34px,6vw,82px) 27px;text-align:center;}
.book-overview-eyebrow{
  display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 2px;
  font-family:'Cormorant SC',serif;font-size:10.5px;font-weight:700;letter-spacing:.24em;color:#bfcff1;
  text-shadow:0 2px 3px rgba(0,0,0,.82);opacity:.88;
}
.book-overview-eyebrow::before,.book-overview-eyebrow::after{content:'';width:31px;height:1px;background:linear-gradient(90deg,transparent,#93a8d8);}
.book-overview-eyebrow::after{transform:scaleX(-1);}
.book-overview-arabic{
  margin:3px 0 0;font-family:'Amiri',serif;font-size:clamp(26px,3vw,32px);line-height:1.22;color:#f4dda0;
  text-shadow:0 2px 5px rgba(0,0,0,.84);
}
.book-overview-arabic:empty{display:none;}
.book-overview-title{
  font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(29px,5vw,39px);line-height:1.03;
  letter-spacing:.015em;color:#fff8e8;text-shadow:0 3px 4px rgba(0,0,0,.78);
}
.book-overview-meta{margin-top:4px;font-family:'Cormorant Garamond',serif;font-size:14px;font-style:italic;color:#d4dcf0;opacity:.9;}
.book-overview-meta span{margin:0 .22em;color:#d5b45c;}
.book-overview-divider{display:flex;align-items:center;justify-content:center;gap:8px;width:min(250px,68%);margin:8px auto 6px;color:#d4b355;}
.book-overview-divider span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(211,177,83,.72));}
.book-overview-divider span:last-child{transform:scaleX(-1);}
.book-overview-divider b{font-size:8px;font-weight:400;line-height:1;}
.book-overview-description{
  max-width:610px;margin:0 auto;font-family:'Cormorant Garamond',serif;font-size:15px;line-height:1.4;color:#e4e9f6;opacity:.88;text-wrap:balance;
}
.book-progress{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:15px;}
.book-progress-track{
  position:relative;border:1px solid #b98c2e;background:linear-gradient(#071532,#0c2350 48%,#06102a);
  box-shadow:inset 0 0 0 2px #020917,inset 0 3px 7px rgba(0,0,0,.84),0 2px 0 rgba(255,232,154,.15),0 3px 7px rgba(0,0,0,.45);
}
.book-progress-beads{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;padding:9px 14px;border-radius:9px;}
.book-progress-bead{display:inline-block;width:15px;height:15px;border-radius:3px;transform:perspective(30px) rotateX(6deg);}
.book-progress-fill{width:min(420px,60vw);height:17px;border-radius:9px;overflow:hidden;}
.book-progress-readout{font-size:28px;letter-spacing:2px;padding:1px 14px;white-space:nowrap;}
.book-overview-actions{display:flex;justify-content:center;margin-top:12px;}
.book-overview-tests{
  position:relative;padding:8px 17px;border:1px solid #b98c2e;border-radius:8px;cursor:pointer;
  font-family:'Cormorant SC',serif;font-size:10.5px;font-weight:700;letter-spacing:.13em;color:#f3e4b5;
  background:linear-gradient(#183a31,#0a241c 55%,#061711);text-shadow:0 1px 2px #000;
  box-shadow:inset 0 1px rgba(216,240,210,.18),inset 0 0 0 2px #06140f,0 3px 7px rgba(0,0,0,.48);
}
.book-overview-tests::before,.book-overview-tests::after{content:'◆';margin:0 7px;color:#d3b459;font-size:6px;vertical-align:middle;}
.book-overview-tests:hover{filter:brightness(1.12);}
.book-overview-tests:focus-visible{outline:2px solid #f1d57e;outline-offset:3px;}
.book-overview-plinth{position:relative;width:calc(100% - 30px);height:9px;margin:0 auto;filter:drop-shadow(0 5px 4px rgba(0,0,0,.55));}
.book-overview-plinth::before,.book-overview-plinth span{position:absolute;left:0;right:0;height:3px;border-radius:0 0 3px 3px;}
.book-overview-plinth::before{content:'';top:0;background:linear-gradient(90deg,#60400d,#e1c26d 15%,#9d7422 50%,#e1c26d 85%,#60400d);}
.book-overview-plinth span:first-child{top:3px;left:8px;right:8px;background:#6a4810;box-shadow:inset 0 1px rgba(247,224,151,.35);}
.book-overview-plinth span:last-child{top:6px;left:18px;right:18px;background:#3d2607;}

@media (max-width:600px){
  .book-overview{margin-bottom:20px;filter:drop-shadow(0 11px 16px rgba(0,0,0,.58));}
  .book-overview-frame{padding:4px;border-radius:11px;}
  .book-overview-inlay{padding:3px;border-radius:7px;background-size:auto 27px;}
  .book-overview-inner-frame{padding:2px;border-radius:6px;}
  .book-overview-panel{border-radius:4px;background-size:auto,auto,220px;}
  .book-overview-frieze{height:19px;background-size:auto,auto 23px;}
  .book-overview-frieze::before{left:10px;}.book-overview-frieze::after{right:10px;}
  .book-overview-body::before,.book-overview-body::after{width:6px;top:6px;bottom:6px;}
  .book-overview-body::before{left:5px;}.book-overview-body::after{right:5px;}
  .book-overview-content{padding:18px 24px 22px;}
  .book-overview-eyebrow{font-size:8.5px;letter-spacing:.18em;gap:6px;}
  .book-overview-eyebrow::before,.book-overview-eyebrow::after{width:16px;}
  .book-overview-arabic{font-size:26px;}
  .book-overview-title{font-size:28px;}
  .book-overview-meta{font-size:12.5px;line-height:1.24;}
  .book-overview-description{font-size:13.5px;line-height:1.34;}
  .book-overview-divider{margin:7px auto 5px;}
  .book-progress{gap:9px;margin-top:13px;}
  .book-progress-beads{gap:5px;padding:7px 9px;}
  .book-progress-bead{width:12px;height:12px;}
  .book-progress-fill{width:min(100%,420px);}
  .book-progress-readout{font-size:24px;padding:1px 11px;}
  .book-overview-tests{width:100%;padding:9px 10px;font-size:9.5px;letter-spacing:.1em;}
  .book-overview-plinth{width:calc(100% - 20px);}
}
@media (max-width:390px){
  .book-overview-content{padding-left:20px;padding-right:20px;}
  .book-overview-title{font-size:26px;}
  .book-progress-track{max-width:100%;}
}

/* Guide -------------------------------------------------------------------
   Every example is an inert HTML/CSS miniature of Rihal. No screenshots,
   image requests, controls, application state, or classroom reads are used. */
.guide-page{animation:fadein .35s ease both;}
.guide-top-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.guide-top-actions button,.guide-finish button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 15px;border:0;border-radius:8px;cursor:pointer;
  font-family:'Cormorant SC',serif;font-size:11px;font-weight:700;letter-spacing:.11em;color:#cbb06d;
  background:linear-gradient(#3a2710,#211307);box-shadow:inset 0 1px 0 rgba(201,162,74,.25),0 2px 5px rgba(0,0,0,.42),0 0 0 1px rgba(116,82,21,.62);
}
.guide-top-actions button.copy,.guide-finish button{color:#241405;background:linear-gradient(#f3d985,#c69a3c);box-shadow:inset 0 1px 0 rgba(255,248,214,.62),0 2px 5px rgba(0,0,0,.42);}
.guide-title{text-align:center;margin-bottom:15px;}
.guide-title>small{font-family:'Cormorant SC',serif;font-size:11px;font-weight:700;letter-spacing:.25em;color:#b08c4e;}
.guide-title h2{margin:3px 0 0;font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:600;line-height:1.04;color:#f0d68a;text-shadow:0 2px 1px rgba(0,0,0,.65);}
.guide-title h2 span{font-family:'Amiri',serif;font-size:21px;color:#caa24a;}
.guide-title p{margin:4px 0 0;font-size:14px;font-style:italic;color:#c2a05a;}
.guide-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:17px;}
.guide-tabs button{padding:9px 15px;border:0;border-radius:9px;cursor:pointer;font-family:'Cormorant SC',serif;font-size:11px;font-weight:700;letter-spacing:.07em;color:#e7d3b0;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(201,162,74,.5);}
.guide-tabs button[aria-pressed="true"]{color:#241405;background:linear-gradient(#f3d985,#c69a3c);box-shadow:inset 0 1px 0 rgba(255,248,214,.6),0 2px 5px rgba(0,0,0,.4);}
.guide-section{margin-bottom:17px;border-radius:15px;padding:5px;background:linear-gradient(145deg,#e9d48f,#9d7527 32%,#5c4112 51%,#d6b75e 76%,#6c4c13);box-shadow:0 10px 24px rgba(0,0,0,.42),inset 0 1px rgba(255,246,206,.45);}
.guide-section-inner{border-radius:10px;padding:19px 20px 18px;background:radial-gradient(circle at 50% 0,rgba(45,76,139,.22),transparent 54%),linear-gradient(155deg,#112b5f,#091a3b 72%);box-shadow:inset 0 0 35px rgba(0,0,0,.52),inset 0 0 0 1px rgba(8,5,2,.75);}
.guide-section h3{margin:0 0 7px;font-family:'Cormorant Garamond',serif;font-size:23px;font-weight:600;color:#f6e2a4;}
.guide-section h3 span{font-family:'Amiri',serif;font-size:16px;color:#caa24a;}
.guide-copy{font-family:'Cormorant Garamond',serif;font-size:15.5px;line-height:1.55;color:#e7ecfb;}
.guide-copy p{margin:0 0 9px;}.guide-copy p:last-child{margin-bottom:0;}
.guide-copy ul,.guide-copy ol{margin:8px 0 5px;padding-inline-start:22px;}
.guide-copy li{margin:6px 0;}.guide-green{color:#72dda0}.guide-gold{color:#edca70;}
.guide-chip{display:inline-block;padding:2px 8px;border-radius:6px;white-space:nowrap;font-family:'Cormorant SC',serif;font-size:10px;font-weight:700;letter-spacing:.045em;color:#241405;background:linear-gradient(#f3d985,#c69a3c);}
.guide-note{display:grid;gap:3px;margin:12px 0 2px;padding:11px 14px;border-radius:10px;color:#eef2ff;background:rgba(0,0,0,.27);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(198,154,60,.48);}
.guide-note strong{font-family:'Cormorant SC',serif;font-size:10.5px;letter-spacing:.1em;color:#f3c98a;}.guide-note span{font-size:14px;line-height:1.45;}
.guide-faq{margin:9px 0;border-radius:9px;background:rgba(0,0,0,.24);box-shadow:0 0 0 1px rgba(201,162,74,.45);}
.guide-faq summary{cursor:pointer;padding:11px 14px;font-size:15.5px;font-weight:600;color:#f3dd9a;}.guide-faq>div{padding:2px 14px 13px;font-size:14.5px;color:#eef2ff;line-height:1.5;}
.guide-finish{text-align:center;margin-top:7px;}

.guide-demo{position:relative;margin:15px 0 3px;padding:23px 12px 11px;border-radius:12px;pointer-events:none;user-select:none;background:linear-gradient(155deg,#0c1733,#060d1f);box-shadow:inset 0 0 0 1px rgba(201,162,74,.54),inset 0 0 26px rgba(0,0,0,.58),0 8px 18px rgba(0,0,0,.35);overflow:hidden;}
.guide-demo::before,.guide-demo::after{content:'◆';position:absolute;top:7px;font-size:7px;color:#a78231;}.guide-demo::before{left:10px}.guide-demo::after{right:10px}
.guide-demo-label{position:absolute;top:6px;left:0;right:0;text-align:center;font-family:'Cormorant SC',serif;font-size:8px;font-weight:700;letter-spacing:.14em;color:#a68c59;}
.guide-demo-stage{max-width:680px;margin:auto;color:#e8ecf7;}.guide-demo figcaption{margin-top:9px;text-align:center;font-size:12.5px;font-style:italic;line-height:1.25;color:#aebcdd;}
.gd-action,.gd-profile{display:inline-flex;align-items:center;justify-content:center;min-height:33px;padding:7px 11px;border-radius:8px;font-family:'Cormorant SC',serif;font-size:9px;font-weight:700;letter-spacing:.07em;color:#e7d8ae;background:linear-gradient(#3a2811,#1e1208);box-shadow:inset 0 1px rgba(255,233,170,.15),0 0 0 1px #634914;}
.gd-action.green{color:#e9f6e8;background:linear-gradient(#245e3b,#103722);box-shadow:inset 0 1px rgba(219,255,229,.2),0 0 0 1px #4c795a;}
.gd-toolbar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:9px;border-radius:10px;background:linear-gradient(#291707,#170c04);box-shadow:inset 0 0 0 1px rgba(200,161,70,.34);}
.gd-code{display:grid;padding:5px 10px;border-radius:8px;background:#080704;box-shadow:inset 0 0 0 1px #84621d;}.gd-code small{font-family:'Cormorant SC',serif;font-size:7px;letter-spacing:.12em;color:#a8884e}.gd-code strong{font-family:VT323,monospace;font-size:18px;letter-spacing:2px;color:#80e9a4;line-height:1;}
.gd-profile{border-radius:18px;}
.gd-heading{text-align:center;margin-bottom:9px;}.gd-heading small{display:block;font-family:'Cormorant SC',serif;font-size:8px;letter-spacing:.18em;color:#b39451}.gd-heading strong{display:block;font-size:21px;color:#f1d47d;}
.gd-shelf{height:142px;display:flex;align-items:flex-end;justify-content:center;gap:5px;padding:10px 12px 14px;border-bottom:10px solid #69400f;border-radius:8px;background:linear-gradient(rgba(25,10,3,.25),rgba(8,3,1,.6)),repeating-linear-gradient(90deg,#4a270e 0 16px,#321807 16px 18px);box-shadow:inset 0 -7px 10px rgba(0,0,0,.6),0 3px 0 #2a1507;overflow:hidden;}
.gd-book{height:106px;width:clamp(43px,16%,86px);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 5px 7px;border-radius:5px 5px 2px 2px;border-left:3px solid rgba(255,235,175,.2);box-shadow:inset -4px 0 7px rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.6);}.gd-book b{writing-mode:vertical-rl;transform:rotate(180deg);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:'Cormorant SC',serif;font-size:8px;letter-spacing:.04em;color:#f2e3bd}.gd-book i{font-size:8px;color:#bdf1c9}.gd-book.lapis{background:linear-gradient(90deg,#10275d,#1e4794,#0b1e4a)}.gd-book.emerald{height:121px;background:linear-gradient(90deg,#0f482d,#18764a,#09371f)}.gd-book.oxblood{height:96px;background:linear-gradient(90deg,#5b1714,#8a2c24,#3e100e)}.gd-book.plum{height:113px;background:linear-gradient(90deg,#491c50,#74317d,#351339)}
.gd-minbar{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(135px,.85fr);gap:8px;padding:8px;border-radius:11px;background:linear-gradient(145deg,#b8892f,#60420f);box-shadow:inset 0 1px rgba(255,240,183,.4);}.gd-video{min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:7px;color:#cfd9f6;background:radial-gradient(circle,#182855,#030712 72%);box-shadow:inset 0 0 0 1px #02040a;}.gd-video>span{font-size:27px;color:#e3c66d}.gd-video small{font-family:'Cormorant SC',serif;font-size:8px;letter-spacing:.1em}.gd-now{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:7px;text-align:center;background:linear-gradient(#172c23,#08160f);box-shadow:inset 0 0 0 1px #5e7c67}.gd-now b{font-family:'Cormorant SC',serif;font-size:8px;letter-spacing:.12em;color:#d6c36e}.gd-now span{font-family:VT323,monospace;font-size:22px;color:#7cf29f}.gd-now em{font-size:9px;color:#dce8dd}.gd-episodes{display:grid;gap:5px;margin-top:7px}.gd-episodes>div{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:8px;padding:7px 9px;border-radius:7px;background:rgba(2,9,23,.62);box-shadow:inset 0 0 0 1px rgba(118,145,194,.22)}.gd-episodes>div.current{box-shadow:inset 3px 0 #d8bd60,inset 0 0 0 1px #836927}.gd-episodes span{font-family:VT323,monospace;color:#d4bc69}.gd-episodes b{font-size:13px;color:#e9edf8}.gd-episodes i{font-family:'Cormorant SC',serif;font-size:7px;color:#d9bc5f}.gd-episodes i.done{color:#72dea0}
.gd-card,.gd-test,.gd-question,.gd-test-maker{padding:12px;border-radius:9px;background:linear-gradient(145deg,rgba(17,46,31,.88),rgba(4,18,11,.92));box-shadow:inset 0 0 0 1px rgba(99,164,116,.4),inset 0 1px rgba(255,255,255,.04)}.gd-card-title{margin-bottom:9px;font-family:'Cormorant SC',serif;font-size:9px;letter-spacing:.12em;color:#d5c273}.gd-attendance{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.gd-attendance span,.gd-access span{padding:6px 9px;border-radius:7px;font-family:'Cormorant SC',serif;font-size:8px;color:#b7cbb9;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(109,160,120,.3)}.gd-attendance span.selected,.gd-access span.selected{color:#17351f;background:linear-gradient(#a0e4ae,#55a86a)}.gd-attendance strong{margin-left:auto;font-family:VT323,monospace;font-size:17px;color:#86e6a0}.gd-test{display:flex;align-items:center;justify-content:space-between;gap:10px}.gd-test small,.gd-question small,.gd-test-maker small{font-family:'Cormorant SC',serif;font-size:8px;letter-spacing:.1em;color:#d4c171}.gd-test strong{display:block;margin-top:3px;font-size:18px;color:#f2f2df}.gd-test p{margin:2px 0 0;font-size:11px;color:#b7cbb9}.gd-question{display:grid;gap:6px;margin-top:7px;background:rgba(3,14,9,.7)}.gd-question>b{font-size:15px;color:#f0f1de}.gd-question>span{padding:6px 8px;border-radius:6px;font-size:12px;color:#c6d5c4;background:rgba(0,0,0,.27)}.gd-question>span.selected{color:#e9f8e9;box-shadow:inset 3px 0 #67bc7c}.gd-question>em{justify-self:end;font-family:'Cormorant SC',serif;font-size:8px;color:#dac568}
.gd-split{display:grid;grid-template-columns:1fr 1fr;gap:8px}.gd-video.compact{min-height:138px}.gd-page{min-height:138px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;border-radius:7px;text-align:center;color:#28170b;background:linear-gradient(145deg,#f0dfb7,#cbb887);box-shadow:inset 0 0 18px rgba(92,60,20,.22)}.gd-page small{font-family:'Cormorant SC',serif;font-size:8px;letter-spacing:.1em;color:#795f30}.gd-page b{margin:9px 0 3px;font-family:'Amiri',serif;font-size:18px}.gd-page p{margin:0;font-size:11px}.gd-live{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;background:linear-gradient(90deg,#571813,#2b0a08);box-shadow:inset 0 0 0 1px #a94a3d}.gd-live>span{font-family:'Cormorant SC',serif;font-size:9px;font-weight:700;color:#ff9688}.gd-live div{display:grid}.gd-live b{font-size:14px;color:#ffe9df}.gd-live small{font-size:10px;color:#d7aaa2}.gd-live em{padding:6px 10px;border-radius:6px;font-family:'Cormorant SC',serif;font-size:8px;color:#32130c;background:#e8c877}
.gd-share-code{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px;border-radius:7px;background:rgba(0,0,0,.3)}.gd-share-code b{font-family:VT323,monospace;font-size:21px;letter-spacing:2px;color:#81eda2}.gd-share-code span{padding:5px 7px;border-radius:5px;font-family:'Cormorant SC',serif;font-size:7px;color:#e8d49d;background:#39280f}.gd-access{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}.gd-access small{margin-right:auto;font-family:'Cormorant SC',serif;font-size:8px;color:#d4c171}.gd-form{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.gd-form label{display:grid;gap:3px;font-family:'Cormorant SC',serif;font-size:7px;letter-spacing:.08em;color:#bda65f}.gd-form label strong{overflow:hidden;padding:7px;border-radius:6px;white-space:nowrap;text-overflow:ellipsis;font-family:'Cormorant Garamond',serif;font-size:12px;font-weight:600;letter-spacing:0;color:#34210f;background:#d8c9a5}.gd-swatches{grid-column:1/-1;display:flex;gap:7px;align-items:center}.gd-swatches i{width:23px;height:23px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.55)}.gd-swatches i.selected{box-shadow:0 0 0 2px #f0d476,0 0 0 3px #654914}.gd-swatches .lapis{background:#18438c}.gd-swatches .emerald{background:#176743}.gd-swatches .oxblood{background:#7c2922}.gd-swatches .plum{background:#6f2f78}.gd-form>.gd-action{justify-self:end;grid-column:1/-1}
.gd-maker-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.gd-maker-head b{display:block;font-size:18px;color:#f0f2df}.gd-maker-head>span{padding:5px 8px;border-radius:10px;font-family:'Cormorant SC',serif;font-size:7px;color:#d2b75f;background:rgba(0,0,0,.3)}.gd-maker-settings{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}.gd-maker-settings i{padding:5px 7px;border-radius:6px;font-size:9px;color:#b9cdbb;background:rgba(0,0,0,.27)}.gd-maker-actions{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap;margin-top:8px}.gd-maker-actions>*{padding:6px 8px;border-radius:6px;font-family:'Cormorant SC',serif;font-size:7px;color:#d7c277;background:#2d210d}.gd-maker-actions strong{color:#241405;background:linear-gradient(#efd980,#bd9134)}.gd-menu{max-width:320px;margin:auto;display:grid;gap:3px;padding:8px;border-radius:12px;background:linear-gradient(#2d1a0a,#160c04);box-shadow:inset 0 0 0 1px #7c591b}.gd-menu div{display:flex;align-items:center;justify-content:space-between;padding:7px 8px;border-bottom:1px solid rgba(201,162,74,.2)}.gd-menu div b{font-family:'Cormorant SC',serif;font-size:9px;color:#e5ce86}.gd-menu div small{font-size:9px;color:#967e50}.gd-menu>span{padding:7px 9px;border-radius:6px;font-size:12px;color:#e2d4b1;background:rgba(201,162,74,.06);box-shadow:inset 0 0 0 1px rgba(201,162,74,.08)}

@media(max-width:600px){
  .guide-section-inner{padding:16px 13px}.guide-section h3{font-size:21px}.guide-copy{font-size:14.5px}.guide-tabs{display:grid;grid-template-columns:1fr 1fr}.guide-tabs button{padding:9px 6px;font-size:9px}.guide-top-actions{align-items:stretch}.guide-top-actions button{flex:1;font-size:9px;padding:8px}.guide-title h2{font-size:27px}.guide-demo{margin-left:-4px;margin-right:-4px;padding-left:7px;padding-right:7px}.gd-minbar{grid-template-columns:1fr}.gd-now{min-height:78px}.gd-split{grid-template-columns:1fr}.gd-video.compact,.gd-page{min-height:105px}.gd-form{grid-template-columns:1fr}.gd-test{align-items:flex-start}.gd-test>.gd-action{flex:0 0 auto;padding:7px}.gd-live{grid-template-columns:auto 1fr}.gd-live em{grid-column:1/-1;text-align:center}.gd-attendance strong{width:100%;margin-left:0}.gd-book{width:20%}
}

/* student quiz — reversible pass/skip state */
.quiz-shell,#quiz-body{width:100%;max-width:100%;min-width:0;}
.quiz-shell input,.quiz-shell textarea,.quiz-shell select{max-width:100%;min-width:0;}
.quiz-shell button{max-width:100%;}
.quiz-scroll{overscroll-behavior:contain;scrollbar-gutter:stable;}
.quiz-take-progress{
  margin:0 0 10px;padding:8px 12px;border-radius:9px;text-align:center;
  font-family:'Cormorant SC',serif;font-size:10px;font-weight:700;letter-spacing:.09em;
  color:#c8dac5;background:rgba(2,18,10,.42);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55),0 0 0 1px rgba(105,166,119,.26);
}
.quiz-take-question{transition:background .18s ease,box-shadow .18s ease,opacity .18s ease;}
.quiz-take-question.is-passed{
  background:linear-gradient(90deg,rgba(128,98,24,.25),rgba(0,0,0,.26)) !important;
  box-shadow:inset 4px 0 0 #c8a84a,inset 0 1px 3px rgba(0,0,0,.48),0 0 0 1px rgba(204,174,82,.48) !important;
}
.quiz-take-question.is-passed [data-quiz-answer]{opacity:.42;filter:saturate(.55);}
.quiz-pass-button{
  font-family:'Cormorant SC',serif;font-size:9.5px;font-weight:700;letter-spacing:.07em;
  color:#ead99e;padding:6px 9px;border:0;border-radius:7px;cursor:pointer;
  background:linear-gradient(#59481f,#30250d);
  box-shadow:inset 0 1px 0 rgba(255,244,187,.16),0 0 0 1px rgba(204,174,82,.48);
  transition:filter .15s ease,transform .15s ease,background .15s ease;
}
.quiz-pass-button:hover{filter:brightness(1.13);transform:translateY(-1px);}
.quiz-pass-button[aria-pressed="true"]{
  color:#1e1808;background:linear-gradient(#eedc8d,#b38c2f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px #efd77d;
}
.quiz-pass-note{
  margin:-2px 0 10px;padding:7px 10px;border-radius:8px;
  font-family:'Cormorant Garamond',serif;font-size:13px;font-style:italic;
  color:#f0d987;background:rgba(120,91,19,.2);box-shadow:inset 0 0 0 1px rgba(210,177,73,.28);
}

@media (max-width:600px){
  .quiz-modal-backdrop{padding:7px 4px !important;}
  .quiz-modal{padding:3px !important;border-radius:12px !important;}
  .quiz-modal>.modal-inner{padding:13px 10px !important;border-radius:9px !important;}
  .quiz-head{gap:6px !important;margin-bottom:11px !important;}
  .quiz-head-main{gap:7px !important;}
  .quiz-head-title{font-size:22px !important;line-height:1.05 !important;}
  .quiz-head-subtitle{font-size:12px !important;line-height:1.2;}
  .quiz-card{padding:11px !important;}
  .quiz-card-head{flex-direction:column;gap:7px !important;}
  .quiz-card-meta{gap:5px 10px !important;}
  .quiz-action-row{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));}
  .quiz-action-row>button{width:100%;white-space:normal;padding:8px 5px !important;line-height:1.15;}
  .quiz-list-tools{display:grid !important;grid-template-columns:1fr 1fr;}
  .quiz-list-tools>button{width:100%;padding:9px 6px !important;}
  .quiz-list-tools>span{grid-column:1/-1;text-align:center;line-height:1.25;}
  .quiz-editor-settings{grid-template-columns:minmax(0,1fr) !important;padding:11px !important;}
  .quiz-editor-toolbar{align-items:stretch !important;}
  .quiz-editor-toolbar>div:first-child{width:100%;text-align:center;}
  .quiz-editor-actions{width:100%;display:grid !important;grid-template-columns:1fr 1fr;}
  .quiz-editor-actions>button{width:100%;white-space:normal;padding:8px 5px !important;line-height:1.15;}
  .quiz-editor-actions>.quiz-add-question{grid-column:1/-1;}
  .quiz-question{padding:11px !important;}
  .quiz-question-head{align-items:stretch !important;}
  .quiz-question-head>div:first-child{width:100%;}
  .quiz-question-actions{width:100%;display:grid !important;grid-template-columns:36px 36px 1fr 1fr;gap:5px !important;}
  .quiz-question-actions>button{width:100%;padding:7px 3px !important;font-size:8.5px !important;letter-spacing:.03em !important;}
  .quiz-question-basics{grid-template-columns:minmax(0,1fr) 76px !important;gap:7px !important;}
  .quiz-option-row{display:grid !important;grid-template-columns:18px minmax(0,1fr) 32px;gap:7px !important;}
  .quiz-option-row>input[type="text"]{width:100% !important;}
  .quiz-option-row>button{width:32px;padding:7px 4px !important;}
  .quiz-bool-grid{display:grid !important;grid-template-columns:1fr !important;gap:7px !important;}
  .quiz-editor-footer{display:grid !important;grid-template-columns:1fr 1.3fr;}
  .quiz-editor-footer>button{width:100%;padding:10px 5px !important;}
  .quiz-take-question{padding:12px !important;}
  .quiz-take-question-head{align-items:flex-start !important;}
  .quiz-choice span{min-width:0;overflow-wrap:anywhere;}
  .quiz-match-row{grid-template-columns:minmax(0,1fr) !important;gap:6px !important;}
  .quiz-match-row select{width:100% !important;}
  .quiz-order-row{align-items:flex-start !important;}
  .quiz-submit-row>button{width:100%;}
  .quiz-result-summary{grid-template-columns:minmax(0,1fr) !important;padding:14px !important;text-align:center;}
  .quiz-result-score{margin:0 auto;}
  .quiz-review-head{flex-direction:column;gap:4px !important;}
  .quiz-review-head>span{white-space:normal !important;}
  .quiz-result-stats{gap:5px !important;}
  .quiz-result-stats>div{padding:9px 4px !important;}
  .quiz-result-stats>div>div:first-child{font-size:20px !important;}
  .quiz-result-stats>div>div:last-child{font-size:7.5px !important;letter-spacing:.05em !important;overflow-wrap:anywhere;}
  .quiz-result-row{grid-template-columns:32px minmax(0,1fr) auto !important;gap:6px !important;padding:8px !important;}
  .quiz-leaderboard-row{grid-template-columns:38px minmax(0,1fr) auto !important;gap:7px !important;padding:10px 8px !important;}
  .quiz-result-row img,.quiz-leaderboard-row img{display:none;}
}

/* private owner key — blurred until hovered/focused */
.secret-key{
  filter:blur(6px);
  transition:filter .18s ease;
  cursor:pointer;user-select:none;-webkit-user-select:none;
}
.secret-key:hover,.secret-key:focus,.secret-key.revealed{filter:blur(0);user-select:text;-webkit-user-select:text;}

/* honour reduced-transparency / high-contrast preferences */
@media (prefers-contrast: more){
  body{color:#ffe;}
}

/* 3D book on the shelf — spine-out, lifts & turns toward you on hover */
.book-slot{position:relative;width:46px;height:300px;flex:0 0 auto;cursor:pointer;perspective:1300px;perspective-origin:50% 40%;z-index:1;}
.book-slot:hover,.book-slot:focus-within{z-index:40;}
.book-inner{
  position:absolute;left:50%;top:0;width:196px;height:300px;
  transform-style:preserve-3d;pointer-events:none;will-change:transform;
  transition:transform .75s cubic-bezier(.2,.85,.25,1);
  transform:translateX(-50%) rotateY(90deg);
}
.book-slot:hover .book-inner,
.book-slot:focus-within .book-inner{
  transform:translateX(-50%) translateY(-32px) translateZ(72px) rotateY(34deg);
}
.book-slot:focus-visible{outline:none;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
  .book-inner{transition:none;}
}

/* ---- TV mode (the Android TV WebView adds body.tv via a RihalTV user agent;
   ?tv=1 forces it for testing). 10-foot UI: bigger type, a wider cabinet, and
   a focus ring bold enough to follow from the couch with a D-pad. ---- */
body.tv{font-size:17px;}
body.tv #app-shell{max-width:1160px !important;}
/* TV overscan safe area — many panels crop the outer few percent, which would
   clip the gold cabinet frame and the QR card (box-sizing is border-box, so
   this padding lives inside the 100vh wrapper without adding scroll) */
body.tv #app > div{padding:3vh 4vw !important;}
body.tv :focus-visible{outline:4px solid #ffe9a8;outline-offset:3px;box-shadow:0 0 0 2px rgba(20,10,4,.9),0 0 24px rgba(246,222,138,.6);}
/* shelf books suppress the ring in favour of the 3D lift — on TV show both */
body.tv .book-slot:focus-visible{outline:4px solid #ffe9a8;outline-offset:8px;border-radius:10px;}
/* QR sign-in card: the vendored generator emits a scalable svg — fill its box */
#tv-login-card svg{width:100%;height:100%;display:block;}
#tv-login-card .tv-qrbox{width:200px;height:200px;}

/* TV signed-out welcome — everything pinned to ONE screen so the QR can never
   be scrolled half out of view. The decorative calligraphy bands and footer
   are hidden to buy the vertical room; the cabinet centres in the viewport. */
body.tv.tv-lock{overflow:hidden;}
body.tv.tv-lock #app > div{height:100vh !important;min-height:0 !important;overflow:hidden;align-items:center;}
body.tv.tv-lock #app-shell div[aria-hidden="true"]{display:none;}
body.tv.tv-lock footer{display:none;}
body.tv.tv-lock #tv-login-card .tv-qrbox{width:250px;height:250px;}

/* TV playback bar in theater: shrink the video slot so the bar fits on the
   screen without the split scrolling */
body.tv #minbar-split.theater #player-slot{height:calc(100vh - 150px);}