.home-header { margin-bottom:16px; border-top:0; background-size:cover; background-position:center top; }
.home-view-toggle { display:flex; justify-content:center; align-items:stretch; gap:4px; width:840px; max-width:100%; min-width:0; box-sizing:border-box; border:1px solid #91b775; border-radius:16px; margin:0 auto 16px; padding:5px; background:#c2e4a6; color:#365024; box-shadow:0 2px 6px rgba(48,79,32,.08); }
.home-view-toggle[hidden] { display:none !important; }
.home-view-toggle legend { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.home-view-toggle label { display:flex; justify-content:center; align-items:center; gap:12px; flex:1 1 0; min-width:0; min-height:56px; box-sizing:border-box; padding:8px 18px; border:1px solid transparent; border-radius:11px; cursor:pointer; margin:0; font-size:25px; line-height:1.5; white-space:normal; text-align:center; transition:background-color .15s ease,color .15s ease,box-shadow .15s ease; }
.home-view-toggle label:hover { background:#d1f4b0; }
.home-view-toggle label:has(input:checked) { background:#4c6b30; border-color:#405d28; color:#f0ffdf; box-shadow:0 2px 4px rgba(38,56,26,.18); }
.home-view-toggle label:has(input:checked):hover { background:#405d28; }
.home-view-toggle label:has(input:focus-visible) { outline:3px solid #97751d; outline-offset:3px; }
.home-view-toggle input { accent-color:#4c6b30; width:24px; height:24px; flex-shrink:0; margin:0; cursor:pointer; }
.home-view-toggle label:has(input:checked) input { accent-color:#f0ffdf; }
body.grouped-home { background:#c1e2a5; background-image:none; }
#grouped-writers[hidden], .writer-list[hidden] { display:none !important; }
.reader-group { margin:0 0 30px; padding-top:0; color:#577842; }
.reader-group h2 { display:flex; align-items:center; justify-content:center; font-size:23px; font-weight:600; text-align:center; background:#658f43; color:#d1efb5; border-radius:10px 10px 0 0; width:var(--heading-tab-width, max-content); height:50px; max-width:100%; box-sizing:border-box; line-height:1.6; margin:0 auto; padding:8px 16px; }
.reader-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; background:#658f43; border-radius:10px; padding:10px; }
.riwayah-panel { display:grid; grid-template-columns:1fr 1fr 1.05fr; border-radius:9px; overflow:hidden; background:#d1f4b0; min-height:184px; }
.riwayah-name { display:flex; align-items:center; justify-content:center; color:inherit; font-size:36px; padding:12px; text-align:center; background:transparent; border:0; font-family:inherit; }
.narrator-branches { display:grid; grid-auto-rows:1fr; border-right:1px solid #bedca3; }
.narrator-branches span { display:flex; align-items:center; justify-content:center; text-align:center; padding:5px 10px; font-size:28px; line-height:1.5; }
.narrator-branches span + span { border-top:1px solid #bedca3; }
.narrator-leaves button { display:flex; align-items:center; justify-content:center; width:100%; background:transparent; border:0; color:inherit; font-family:inherit; font-size:19px; line-height:1.5; padding:3px 8px; cursor:pointer; }
.narrator-leaves button + button { border-top:1px solid #bedca3; }
.narrator-leaves button:hover { background:#bce697; color:#304f20; }
.narrator-leaves button:focus-visible { outline:3px solid #355324; outline-offset:-3px; }
.grouped-error { text-align:center; padding:25px; }
@media(max-width:767px) {
 .home-view-toggle { gap:4px; padding:5px; flex-direction:column; }
 .home-view-toggle label { gap:10px; min-height:48px; padding:7px 12px; font-size:21px; }
 .reader-pair { gap:16px; padding:16px; grid-template-columns:1fr; }
 .reader-group h2 { height:88px; font-size:21px; padding:8px 16px; }
 .riwayah-panel { min-height:154px; }
 .riwayah-name { font-size:29px; }
 .narrator-branches span { font-size:23px; }
 .narrator-leaves button { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
 .home-view-toggle label { transition:none; }
}