/* ============ الثيمات ============ */
:root{
  --bg:#0B1016;
  --fg:#FFF7E6;
  --quiet:#CFC7B4;
  --accent:#FFB020;
  --link:#B39DFF;
  --focus:#4DD0E1;
  --track:#1B2430;
  --line:#2B3644;
  --danger:#FF9E93;
  --fs:32px;
  --lh:1.9;
}
body[data-theme="light"]{
  --bg:#FFFFFF;
  --fg:#101418;
  --quiet:#3E464D;
  --accent:#8A5A00;
  --link:#3B2AA8;
  --focus:#0B6E7A;
  --track:#E4E8EB;
  --line:#B4BBC2;
  --danger:#8C1D18;
}
body[data-fs="m"]{ --fs:24px; }
body[data-fs="l"]{ --fs:32px; }
body[data-fs="xl"]{ --fs:44px; }

[hidden]{ display:none !important; }

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:'IBM Plex Sans Arabic','Noto Kufi Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  font-size:17px;
  line-height:1.7;
  text-align:start;
}
body.player-open{ padding-bottom:0; }

p,li,h1,h2,h3{ text-align:start; }
p{ margin:0 0 12px; line-height:var(--lh); }

button,input,select{ font-family:inherit; user-select:none; -webkit-user-select:none; }
button{ touch-action:manipulation; }

a{ color:var(--link); }

:focus{ outline:4px solid var(--focus); outline-offset:3px; }
:focus:not(:focus-visible){ outline:4px solid var(--focus); outline-offset:3px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.wrap{ max-width:720px; margin-inline:auto; padding-inline:16px; width:100%; }

.skip{
  position:absolute; inset-inline-start:8px; top:-60px; z-index:60;
  background:var(--accent); color:#0B1016; padding:12px 18px;
  border-radius:10px; font-weight:700; text-decoration:none;
}
.skip:focus{ top:8px; }

/* ============ الشريط العلوي ============ */
.topbar{
  border-bottom:2px solid var(--line);
  background:var(--bg);
  color:var(--fg);
  padding-block:10px;
}
.topbar-inner{
  display:flex; flex-wrap:wrap; gap:10px 14px;
  align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; margin:0; }
.brand-mark{ display:inline-flex; color:var(--fg); }
.brand-name{ font-weight:700; font-size:1.12rem; letter-spacing:0; }
.tools{ display:flex; flex-wrap:wrap; gap:8px; }

.chip{
  min-height:48px;
  padding:6px 14px;
  border:2px solid var(--line);
  border-radius:999px;
  background:transparent;
  color:var(--fg);
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
}
.chip:hover{ border-color:var(--accent); color:var(--accent); }
.chip[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent); }

/* ============ عام ============ */
main{ padding-block:20px 48px; }

.live{
  margin:0 0 12px;
  color:var(--quiet);
  font-size:.98rem;
  min-height:0;
}
.live:empty{ display:none; }
.live-soft{ margin:0 0 16px; color:var(--quiet); font-size:.95rem; }
.live-soft:empty{ display:none; }

h2{ font-size:1.5rem; margin:26px 0 10px; }
h3{ font-size:1.2rem; margin:26px 0 8px; }
.hint{ color:var(--quiet); font-size:.96rem; line-height:1.7; }

.lede{ font-size:1.05rem; max-width:62ch; }

.panel{
  border:2px solid var(--line);
  border-radius:12px;
  padding:16px;
  margin:20px 0;
  background:var(--bg);
  color:var(--fg);
}
.panel h3{ margin-top:0; }

.keys{ margin:0; padding-inline-start:22px; }
.keys li{ margin-block:6px; line-height:1.8; }

/* ============ الأزرار ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  padding:12px 18px;
  border:2px solid var(--line);
  border-radius:12px;
  background:transparent;
  color:var(--fg);
  font-size:1rem;
  font-weight:700;
  line-height:1.4;
  cursor:pointer;
  text-align:center;
}
.btn:hover{ border-color:var(--accent); color:var(--accent); }
.btn-primary{
  background:var(--accent);
  color:#0B1016;
  border-color:var(--accent);
  min-height:72px;
  font-size:1.15rem;
  width:100%;
}
body[data-theme="light"] .btn-primary{ color:#FFFFFF; }
.btn-primary:hover{ color:#0B1016; }
body[data-theme="light"] .btn-primary:hover{ color:#FFFFFF; }
.btn-secondary{ border-color:var(--link); color:var(--link); }
.btn-secondary:hover{ border-color:var(--link); color:var(--link); background:transparent; text-decoration:underline; }
.btn-quiet{ border-color:transparent; color:var(--link); text-decoration:underline; font-weight:700; }
.btn-quiet:hover{ border-color:transparent; color:var(--link); }
.btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; }
.ico{ display:inline-flex; }

/* ============ المكتبة ============ */
.welcome{ margin-block:8px 4px; }

.story-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.story-btn{
  display:block;
  width:100%;
  text-align:start;
  padding:16px;
  min-height:96px;
  border:2px solid var(--line);
  border-radius:14px;
  background:var(--bg);
  color:var(--fg);
  font:inherit;
  cursor:pointer;
}
.story-btn:hover{ border-color:var(--accent); }
.story-btn[aria-current="true"]{ border-color:var(--accent); }
.emblem{ display:block; width:100%; height:auto; max-height:78px; margin-block-end:12px; color:var(--fg); }
.story-head{ display:flex; align-items:baseline; gap:10px; }
.story-num{
  flex:0 0 auto;
  font-weight:700;
  font-size:1.05rem;
  color:var(--accent);
  border:2px solid var(--accent);
  border-radius:999px;
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.story-name{ font-weight:700; font-size:1.25rem; }
.story-meta{ display:block; color:var(--quiet); font-size:.95rem; margin-top:6px; }
.story-pos{ display:block; color:var(--accent); font-size:.95rem; margin-top:4px; font-weight:700; }

/* ============ المواضع المحفوظة ============ */
.bm-list{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.bm-item{
  border:2px solid var(--line);
  border-radius:12px;
  padding:14px;
  background:var(--bg);
  color:var(--fg);
}
.bm-name{ font-weight:700; margin:0 0 4px; }
.bm-meta{ color:var(--quiet); font-size:.94rem; margin:0 0 10px; }
.bm-item .btn{ margin-inline-end:8px; margin-top:6px; }

/* ============ المشغّل ============ */
.story-title{ font-size:1.55rem; margin:16px 0 6px; }
.chapter-line{ color:var(--accent); font-weight:700; margin:0 0 12px; }
.progress-wrap{ margin-block:12px 18px; }
.progress{
  height:10px;
  background:var(--track);
  border:1px solid var(--line);
  border-radius:6px;
  overflow:hidden;
}
.progress > i{ display:block; height:100%; width:0; background:var(--accent); }
.pos-text{ margin:8px 0 0; color:var(--quiet); font-size:.96rem; }

.para-list{ list-style:none; margin:0; padding:0; }
.para{
  font-size:var(--fs);
  line-height:var(--lh);
  max-width:62ch;
  padding:14px 16px;
  margin:0 0 8px;
  border-inline-start:4px solid transparent;
  border-radius:0;
  scroll-margin-block:140px 340px;
  cursor:pointer;
}
.para:hover{ border-inline-start-color:var(--line); }
.para[aria-current="true"]{
  border-inline-start-color:var(--accent);
  color:var(--accent);
  font-weight:700;
}

.mark-form{ margin:22px 0; }
.mark-form label{ display:block; font-weight:700; margin-block-end:8px; }
.mark-form input{
  width:100%;
  min-height:56px;
  padding:10px 14px;
  font-size:1.05rem;
  border:2px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--fg);
}
.mark-form input::placeholder{ color:var(--quiet); }
.mark-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }

select{
  width:100%;
  min-height:56px;
  padding:10px 14px;
  font-size:1rem;
  border:2px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--fg);
  margin-block:6px 12px;
}
.panel label{ display:block; font-weight:700; }

audio{ width:100%; margin-block:10px; }
.dl{ display:inline-block; font-weight:700; color:var(--link); text-decoration:underline; padding:10px 0; }
.tts-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ============ شريط النقل ============ */
#transport{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:20;
  background:var(--bg);
  color:var(--fg);
  border-top:2px solid var(--line);
}
.transport-inner{ display:grid; gap:8px; padding-block:10px 14px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.grid2 .btn{ min-height:60px; font-size:.98rem; padding-inline:10px; }
.grid2-quiet .btn{ min-height:52px; font-size:.96rem; }
#playBtn{ min-height:72px; }
#playerView{ padding-bottom:330px; }

/* ============ نافذة التأكيد ============ */
.modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.72);
}
body[data-theme="light"] .modal{ background:rgba(16,20,24,.6); }
.modal-card{
  width:100%;
  max-width:520px;
  max-height:88vh;
  overflow:auto;
  background:var(--bg);
  color:var(--fg);
  border:2px solid var(--line);
  border-radius:16px;
  padding:20px;
}
.modal-card h3{ margin-top:0; }
.modal-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.modal-actions .btn-primary{ width:auto; min-height:60px; padding-inline:22px; }

/* ============ احترام تفضيلات المستخدم ============ */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

@media (max-width:430px){
  .topbar-inner{ flex-direction:column; align-items:stretch; }
  .tools{ justify-content:flex-start; }
  .chip{ min-height:44px; font-size:.9rem; padding:4px 12px; }
  .story-name{ font-size:1.15rem; }
  .grid2 .btn{ font-size:.92rem; }
  .grid2-quiet .btn{ font-size:.9rem; }
  #playerView{ padding-bottom:340px; }
}
@media (min-width:900px){
  .grid2{ grid-template-columns:1fr 1fr 1fr 1fr; }
  .grid2-quiet{ grid-template-columns:1fr 1fr; max-width:420px; margin-inline-start:auto; }
}