:root {
    --bg: #f7f5f0; --panel: #ffffff; --text: #1d1d1f; --muted: #6e6e73;
    --accent: #2f6fde; --hl: #fff1a8; --border: #e2ded6;
  }
  @media (prefers-color-scheme: dark) {
    :root { --bg: #111418; --panel: #1b1f24; --text: #e8e6e3; --muted: #9a9a9f;
            --accent: #6aa0ff; --hl: #4a4220; --border: #2c3138; }
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
    font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  button, select, input, textarea { font: inherit; color: inherit; }
  button { background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    padding: 8px 12px; cursor: pointer; }
  button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
  button:disabled { opacity: .4; cursor: default; }

  header { position: sticky; top: 0; z-index: 2; background: var(--bg);
    padding: calc(env(safe-area-inset-top) + 10px) 16px 10px; border-bottom: 1px solid var(--border);
    display: flex; gap: 8px; align-items: center; }
  header h1 { font-size: 18px; margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  main { max-width: 720px; margin: 0 auto; padding: 16px 16px 180px; }

  /* Library */
  .add { display: grid; gap: 8px; margin-bottom: 20px; }
  .add textarea { width: 100%; min-height: 110px; padding: 10px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--panel); resize: vertical; }
  .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .row input[type=url] { flex: 1; min-width: 180px; padding: 8px 10px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--panel); }
  .note { color: var(--muted); font-size: 13px; }
  .doc { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--border);
    background: var(--panel); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
  .doc .t { flex: 1; min-width: 0; }
  .doc .t b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
  .bar { height: 4px; background: var(--border); border-radius: 2px; margin-top: 6px; overflow: hidden; }
  .bar i { display: block; height: 100%; background: var(--accent); }
  .doc button { padding: 4px 10px; }

  /* Reader */
  #text { font-size: 20px; line-height: 1.7; white-space: pre-wrap; word-wrap: break-word; }
  #text span { cursor: pointer; border-radius: 4px; }
  #text span.cur { background: var(--hl); }

  .controls { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; background: var(--panel);
    border-top: 1px solid var(--border); padding: 10px 16px calc(env(safe-area-inset-bottom) + 10px); }
  .controls .inner { max-width: 720px; margin: 0 auto; display: grid; gap: 10px; }
  .transport { display: flex; justify-content: center; gap: 12px; }
  .transport button { min-width: 56px; font-size: 20px; padding: 8px 14px; }
  .transport #play { min-width: 90px; }
  .settings { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
  .settings select { flex: 1; min-width: 160px; padding: 6px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--bg); }
  .settings input[type=range] { flex: 1; min-width: 120px; }
  #progress { font-size: 12px; color: var(--muted); text-align: center; }
  .hidden { display: none !important; }

  .adapt-toggle { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; }
  .adapt-toggle input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
  .focus { width: 100%; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); }
  .status { padding: 10px 12px; border-radius: 10px; background: var(--hl); font-size: 14px; }
  .doc .t b .spark { font-weight: normal; }