:root {
    --blue:#1155cc; --blue2:#3b82f6; --green:#34a853; --amber:#f59e0b;
    --bg:#f4f6fb; --card:#ffffff; --line:#e2e6ee; --ink:#1f2733;
    --muted:#59626f; --danger:#cc0000;
  }
  * { box-sizing:border-box; }
  html, body { margin:0; padding:0; }
  body {
    font-family:'Segoe UI',Tahoma,Arial,sans-serif; background:var(--bg);
    color:var(--ink); line-height:1.55; font-size:14px;
  }

  /* ── Top bar ─────────────────────────────────────────────── */
  .topbar {
    background:linear-gradient(135deg,var(--blue),var(--blue2)); color:#fff;
    padding:12px 20px; display:flex; align-items:center; gap:24px;
    flex-wrap:wrap; box-shadow:0 2px 8px rgba(20,40,90,.15);
  }
  .brand { display:flex; align-items:center; gap:12px; }
  .logo { font-size:26px; }
  .brand-title { font-size:18px; font-weight:800; letter-spacing:.3px; }
  .brand-sub { font-size:11.5px; opacity:.8; }
  .nav { display:flex; gap:6px; flex-wrap:wrap; margin-inline-start:auto; }
  .nav-item {
    background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:9px;
    padding:9px 13px; font-size:13px; font-family:inherit; cursor:pointer;
    transition:.15s; white-space:nowrap;
  }
  .nav-item:hover { background:rgba(255,255,255,.25); }
  .nav-item.active { background:#fff; color:var(--blue); font-weight:700; }
  .nav-item[data-view="soon"] { opacity:.6; cursor:not-allowed; }

  /* ── Sub-navigation (per-section tabs) ─────────────────── */
  .subnav {
    background:#f4f6fb; border-bottom:1px solid var(--line); display:flex; gap:4px;
    padding:6px 20px; flex-wrap:wrap; overflow-x:auto;
  }
  .subnav-item {
    background:transparent; color:var(--muted); border:0; border-bottom:3px solid transparent;
    padding:8px 14px; font-size:13px; font-family:inherit; cursor:pointer; transition:.15s;
    white-space:nowrap;
  }
  .subnav-item:hover { color:var(--ink); }
  .subnav-item.active { color:var(--blue); border-bottom-color:var(--blue); font-weight:700; }

  /* ── Layout ──────────────────────────────────────────────── */
  .content { max-width:900px; margin:0 auto; padding:22px 16px 70px; }
  .loading { color:var(--muted); padding:40px; text-align:center; }

  .card {
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:20px 22px; margin-bottom:18px; box-shadow:0 1px 3px rgba(20,30,60,.06);
  }
  .card h2 { margin:0 0 3px; font-size:16px; }
  .card .sub { color:var(--muted); font-size:12.5px; margin-bottom:14px; }

  .row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  .grow { flex:1; }
  .muted { color:var(--muted); }
  .mono { font-family:'Consolas',monospace; direction:ltr; }

  a { color:var(--blue); text-decoration:none; font-weight:600; }
  a:hover { text-decoration:underline; }

  /* ── Buttons ─────────────────────────────────────────────── */
  /* .btn (class-based so it works for both <button> and <a>) */
  .btn {
    display:inline-block; border:0; border-radius:10px; padding:11px 16px; font-size:14px;
    font-weight:700; font-family:inherit; cursor:pointer; transition:.15s;
    text-decoration:none; text-align:center; line-height:1.2;
  }
  .btn:disabled { opacity:.5; cursor:progress; }
  .btn-green { background:var(--green); color:#ffffff; }
  .btn-blue  { background:var(--blue);  color:#ffffff; }
  .btn-ghost { background:#e4ecfb; color:#0b3d91; border:1px solid #c5d6f5; }
  .btn:hover:not(:disabled) { filter:brightness(1.03); }
  a.btn { display:inline-block; }
  a.btn:hover { text-decoration:none; }

  /* ── Book / stat chips ───────────────────────────────────── */
  .books { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; }
  .book {
    border:1px solid var(--line); border-radius:12px; padding:14px; background:#fbfcfe;
  }
  .book .bname { font-weight:700; margin-bottom:6px; }
  .book .bmeta { font-size:12px; color:var(--muted); }
  .pill { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; background:#dde8fb; color:#0b3d91; font-weight:600; }

  .empty { color:var(--muted); font-style:italic; padding:8px 0; }

  /* ── Activity chart (daily/monthly readers, line + area) ─────── */
  .actwrap { position:relative; margin-top:4px; }
  .act-tooltip {
    position:absolute; display:none; pointer-events:none; z-index:5; max-width:220px;
    transform:translate(-50%,-100%); margin-top:-10px;
    background:#1c2530; color:#fff; font-size:11.5px; padding:6px 10px; border-radius:7px;
    white-space:normal; box-shadow:0 2px 8px rgba(0,0,0,.18);
  }
  .act-tooltip b { font-size:12.5px; }
  .act-tip-books { margin-top:4px; padding-top:4px; border-top:1px solid rgba(255,255,255,.2); font-size:11px; }
  .act-tip-books div { display:flex; justify-content:space-between; gap:10px; }
  .act-tip-books b { font-size:11px; }

  /* ── Reading calendar (month grid of chapter open-days) ──────── */
  /* The 7 columns are kept at a legible minimum width and the whole grid
     scrolls sideways on a phone — shrinking them to fit would leave chapter
     names unreadable, which is the only thing a day box is there to show. */
  .calwrap { overflow-x:auto; margin-top:10px; }
  /* align-items:stretch (the grid default, stated because the layout depends on
     it): a chip that wraps onto a second line grows its day box, and every other
     box in that WEEK grows with it — so the rows stay flush instead of ragged. */
  .calgrid {
    display:grid; grid-template-columns:repeat(7,minmax(0,1fr));
    align-items:stretch; gap:6px; min-width:700px;
  }
  .calhead {
    font-size:11.5px; font-weight:700; color:var(--muted); text-align:center;
    padding:4px 0; border-bottom:1px solid var(--line);
  }
  .calday {
    min-height:76px; border:1px solid #e6eaf2; border-radius:10px; background:#fbfcfe;
    padding:5px 6px; display:flex; flex-direction:column; align-items:stretch;
    justify-content:flex-start; gap:3px;
  }
  .calday.pad { border:0; background:transparent; min-height:0; }   /* leading/trailing blanks */
  .calday.blank { background:#f4f6fa; border-color:#e6eaf2; }        /* no chapter that day */
  .calday.today { border-color:var(--blue); box-shadow:0 0 0 2px rgba(17,85,204,.14); }
  /* Fixed line-height on the number row so day boxes across a week line their
     first chip up at the same y, whether or not the day is "today". */
  .calday .cdnum {
    font-size:11.5px; font-weight:700; color:var(--muted);
    text-align:start; line-height:1.5; flex:0 0 auto;
  }
  .calday.today .cdnum { color:var(--blue); }

  /* Chapter names are long ("ملوك الاول▪12"), so a chip WRAPS rather than
     truncating — the name is the whole point of the box. break-word only splits
     a token that can't fit on a line of its own; normal names break at spaces. */
  .calchip {
    display:block; width:100%; text-align:start; font-size:11px; font-weight:600;
    line-height:1.35; padding:3px 6px; border-radius:7px; border:1px solid transparent;
    font-family:inherit; cursor:pointer; flex:0 0 auto;
    white-space:normal; overflow-wrap:break-word; word-break:normal;
  }
  .calchip:hover { filter:brightness(.97); }
  .calchip.open    { background:#e9f6ec; color:#1e6b34; border-color:#bfe3c9; }  /* مفتوح الآن */
  .calchip.closed  { background:#fdeaea; color:#a10000; border-color:#f2c2c2; }  /* أُغلق */
  .calchip.soon    { background:#eef3ff; color:#274b8f; border-color:#c9d9f7; }  /* سيُفتح لاحقًا */
  .calchip.unset   { background:#f4f6fa; color:#59626f; border-color:#e6eaf2; }  /* بلا موعد */

  .callegend { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
  /* legend labels are short — keep each on one line so the key reads as a row */
  .callegend .calchip { display:inline-block; width:auto; cursor:default; white-space:nowrap; }

  /* ── Progress bar ────────────────────────────────────────── */
  .progress-wrap { margin-top:14px; display:none; }
  .progress-wrap.show { display:block; }
  .bar { height:12px; background:#e9edf5; border-radius:999px; overflow:hidden; }
  .bar > span {
    display:block; height:100%; width:0%; border-radius:999px;
    background:linear-gradient(90deg,var(--green),#79d69a); transition:width .25s ease;
  }
  .bar-label { font-size:12px; color:var(--muted); margin-top:6px; }
  .bar-label .pct { font-weight:800; color:var(--ink); }

  .log {
    background:#0f1729; color:#cfe0ff; border-radius:10px; padding:12px 14px;
    font-family:'Consolas',monospace; font-size:12px; direction:ltr; text-align:left;
    white-space:pre-wrap; margin-top:12px; max-height:220px; overflow:auto; display:none;
  }
  .log.show { display:block; }

  /* ── Toast ───────────────────────────────────────────────── */
  .toast {
    position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(30px);
    background:#1f2733; color:#fff; padding:11px 18px; border-radius:10px;
    font-size:13.5px; opacity:0; pointer-events:none; transition:.25s; z-index:99;
    box-shadow:0 6px 20px rgba(0,0,0,.25); max-width:90vw;
  }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
  .toast.ok  { background:#1e7a43; }
  .toast.err { background:#a51f1f; }

  .spinner {
    display:inline-block; width:14px; height:14px; border:2px solid #99a; border-top-color:transparent;
    border-radius:50%; animation:spin .7s linear infinite; vertical-align:-2px;
  }
  .topbar .spinner, .btn .spinner { border-color:#ffffff80; border-top-color:#fff; }
  @keyframes spin { to { transform:rotate(360deg); } }

  .banner {
    background:#fff8e6; border:1px solid #f3e2b0; color:#7a5b12; border-radius:10px;
    padding:10px 14px; font-size:12.5px; margin-bottom:14px;
  }

  /* ── Help button + overlay ───────────────────────────────── */
  .help-btn { font-weight:800; min-width:38px; }
  .overlay {
    position:fixed; inset:0; background:rgba(15,23,41,.55); z-index:200;
    display:none; align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto;
  }
  .overlay.show { display:flex; }
  .overlay-box {
    background:#fff; border-radius:14px; padding:22px 24px; max-width:640px; width:100%;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
  }

  /* ── Log list ────────────────────────────────────────────── */
  .logrow { display:flex; gap:10px; font-size:12px; padding:6px 0; border-bottom:1px solid var(--line); }
  .logrow .lt { color:var(--muted); white-space:nowrap; direction:ltr; }
  .logrow .la { font-weight:700; }

  /* ── Scrollbars (nicer, thin) ────────────────────────────── */
  * { scrollbar-width:thin; scrollbar-color:#c2cede transparent; }
  ::-webkit-scrollbar { width:12px; height:12px; }
  ::-webkit-scrollbar-track { background:transparent; }
  ::-webkit-scrollbar-thumb { background:#c2cede; border-radius:8px; border:3px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover { background:#93a5c2; }

  /* ── Back-to-top button (for long pages) ─────────────────── */
  .to-top {
    position:fixed; bottom:20px; inset-inline-end:20px; width:46px; height:46px; border-radius:50%;
    background:var(--blue); color:#fff; border:0; font-size:22px; font-weight:800; cursor:pointer; display:none;
    box-shadow:0 6px 18px rgba(20,40,90,.35); z-index:120; transition:.15s; line-height:1;
  }
  .to-top.show { display:block; }
  .to-top:hover { filter:brightness(1.1); }

  /* ── Jobs badge ──────────────────────────────────────────── */
  .jbadge { display:inline-block; min-width:18px; padding:0 5px; margin-inline-start:5px;
    background:#ff6b6b; color:#fff; border-radius:999px; font-size:11px; font-weight:800; text-align:center; }

  /* ── Report table ────────────────────────────────────────── */
  table.rpt { border-collapse:collapse; width:100%; font-size:12.5px; }
  table.rpt th, table.rpt td { border:1px solid var(--line); padding:7px 9px; white-space:nowrap; }
  table.rpt thead th { background:#4a86e8; color:#fff; position:sticky; top:0; font-weight:700; }
  table.rpt thead th:hover { background:#3b74d0; }
  table.rpt tbody tr:nth-child(even) { background:#f6f8fc; }
  table.rpt tbody tr:hover { background:#eaf1ff; }