html, body { margin: 0; padding: 0; background: #10151c; overflow-x: clip; }
  #pc-root {
    --ink: #EDE7DA;
    --ink-dim: #B9B2A2;
    --bg-deep: #10151c;
    --bg-panel: #1a232e;
    --bg-panel-2: #202b38;
    --line: #2c3a48;
    --amber: #E8A33D;
    --amber-dim: #8a6a35;
    --teal: #4FB6A6;
    --coral: #D9634B;
    font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: var(--ink);
    background: var(--bg-deep);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 28px 20px 60px;
    box-sizing: border-box;
    transition: background-color .2s ease, color .2s ease;
  }
  #pc-root.pc-light {
    --ink: #241C13;
    --ink-dim: #756B5B;
    --bg-deep: #FAF7EF;
    --bg-panel: #FFFFFF;
    --bg-panel-2: #F1ECDE;
    --line: #E3DCC8;
    --amber: #C97A1E;
    --amber-dim: #E0C29A;
    --teal: #1F8F7D;
    --coral: #C1432B;
  }
  #pc-root *, #pc-root *::before, #pc-root *::after { box-sizing: border-box; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
  .pc-mono { font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; }

  .pc-header { max-width: 920px; margin: 0 auto 22px; }
  .pc-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--amber); margin-bottom: 6px;
  }
  .pc-title { font-size: 26px; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
  .pc-sub { font-size: 13px; color: var(--ink-dim); }
  .pc-sub b { color: var(--teal); font-weight: 600; }

  .pc-toolbar {
    max-width: 920px; margin: 0 auto 18px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  }
  .pc-tabs { display: flex; background: var(--bg-panel); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
  .pc-tab {
    font-size: 12.5px; letter-spacing: 0.03em;
    padding: 7px 14px; border-radius: 8px; cursor: pointer; color: var(--ink-dim); border: none; background: none;
    transition: all .15s ease;
  }
  .pc-tab.active { background: var(--amber); color: #1a1305; font-weight: 700; }

  .pc-addbtn {
    font-size: 12.5px; font-weight: 700;
    background: var(--teal); color: #0d221e; border: none; border-radius: 8px;
    padding: 9px 16px; cursor: pointer; letter-spacing: 0.03em;
    white-space: nowrap;
  }
  .pc-addbtn:hover { filter: brightness(1.08); }

  .pc-toolbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .pc-theme-toggle {
    font-size: 12px;
    background: var(--bg-panel); border: 1px solid var(--line); color: var(--ink-dim);
    border-radius: 8px; padding: 8px 12px; cursor: pointer; white-space: nowrap;
  }
  .pc-theme-toggle:hover { border-color: var(--amber-dim); color: var(--ink); }

  .pc-form {
    max-width: 920px; margin: 0 auto 22px; background: var(--bg-panel);
    border: 1px solid var(--line); border-radius: 12px; padding: 18px;
    display: none; grid-template-columns: 1fr 1fr; gap: 12px;
  }
  .pc-form.open { display: grid; }
  .pc-form label:not(.pc-tag-choice) { font-size: 11.5px; color: var(--ink-dim); display: block; margin-bottom: 5px; }
  .pc-form input:not([type="checkbox"]), .pc-form textarea {
    width: 100%; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 7px;
    padding: 9px 10px; color: var(--ink); font-size: 14px; font-family: inherit;
  }
  .pc-form input:not([type="checkbox"]):focus, .pc-form textarea:focus { outline: none; border-color: var(--teal); }
  .pc-form .pc-full { grid-column: 1 / -1; }
  .pc-form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
  .pc-translate-word { width: 100%; margin-top: 7px; }
  .pc-form-hint { font-size: 11.5px; color: var(--ink-dim); grid-column: 1/-1; margin-top: -4px; }
  .pc-btn-ghost {
    background: none; border: 1px solid var(--line); color: var(--ink-dim);
    border-radius: 7px; padding: 8px 14px; font-size: 13px; cursor: pointer; font-family: inherit;
  }
  .pc-btn-primary {
    background: var(--amber); border: none; color: #1a1305; font-weight: 700;
    border-radius: 7px; padding: 8px 16px; font-size: 13px; cursor: pointer; font-family: inherit;
  }

  .pc-grid {
    max-width: 920px; margin: 0 auto; display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px;
  }

  .pc-card {
    background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 16px; position: relative; transition: border-color .15s ease;
  }
  .pc-card:hover { border-color: var(--amber-dim); }

  .pc-card-top {
    display: grid; grid-template-columns: minmax(0, 1fr) 96px;
    align-items: start; gap: 8px;
  }
  .pc-card-main { min-width: 0; }
  .pc-card-top-actions {
    position: absolute; top: 0; right: 0;
    display: grid; grid-template-columns: repeat(2, 44px);
    gap: 8px; width: 96px;
  }
  .pc-card-top-actions > .pc-card-icon-button:last-of-type { border-radius: 0 11px 0 7px; }
  .pc-card-icon-button {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; border-radius: 7px; background: transparent; color: var(--teal); cursor: pointer;
  }
  .pc-card-icon-button svg, .pc-card-menu-item svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .pc-card-icon-button:hover { background: color-mix(in srgb, var(--teal) 12%, transparent); }
  .pc-card-action-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 20;
    width: 168px; padding: 5px; display: grid; gap: 3px;
    border: 1px solid var(--line); border-radius: 9px;
    background: var(--bg-panel); box-shadow: 0 12px 28px rgba(0,0,0,.22);
  }
  .pc-card-menu-item {
    min-height: 44px; padding: 8px 10px; display: flex; align-items: center; gap: 9px;
    border: 0; border-radius: 7px; background: transparent; color: var(--ink);
    font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  }
  .pc-card-menu-item:hover { background: var(--bg-panel-2); }
  .pc-card-menu-item.pc-danger { color: var(--coral); }
  .pc-word { font-family: 'JetBrains Mono', monospace; font-size: 19px; font-weight: 700; letter-spacing: 0.01em; }
  .pc-word-phrase { white-space: normal; overflow-wrap: normal; }
  .pc-word-single { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pc-word-long { font-size: 17px; }
  .pc-word-extra-long { font-size: 15px; }
  .pc-word .stress { color: var(--amber); }
  .pc-zh { color: var(--teal); font-size: 14px; margin-top: 3px; }
  .pc-example { color: var(--ink-dim); font-size: 12.5px; margin-top: 8px; line-height: 1.5; font-style: italic; }

  .pc-controls { display: flex; align-items: center; gap: 8px; }
  .pc-play {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-panel-2);
    display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
  }
  .pc-play:hover { border-color: var(--teal); }
  .pc-play svg { width: 14px; height: 14px; fill: var(--ink); }
  .pc-wave { display: flex; align-items: flex-end; gap: 2px; height: 14px; margin-left: 2px; }
  .pc-wave span { width: 2.5px; background: var(--teal); border-radius: 1px; height: 3px; opacity: 0.35; }
  .pc-wave.playing span { animation: pc-bounce 0.9s ease-in-out infinite; opacity: 1; }
  .pc-wave span:nth-child(1) { animation-delay: 0s; }
  .pc-wave span:nth-child(2) { animation-delay: .12s; }
  .pc-wave span:nth-child(3) { animation-delay: .24s; }
  .pc-wave span:nth-child(4) { animation-delay: .36s; }
  @keyframes pc-bounce { 0%,100% { height: 3px; } 50% { height: 14px; } }

  .pc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
  .pc-dot.on { background: var(--teal); }

  .pc-empty {
    max-width: 920px; margin: 40px auto; text-align: center; color: var(--ink-dim); font-size: 14px;
  }
  .pc-empty .pc-mono { color: var(--amber); }

  .pc-testcard { background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; }
  .pc-testcard .pc-zh { font-size: 18px; margin-top: 0; }
  .pc-testcard .pc-example { margin-top: 10px; }
  .pc-reveal { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
  .pc-reveal .pc-word { font-size: 21px; }
  .pc-judge { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
  .pc-judge button {
    font-family: inherit; font-size: 12px; font-weight: 700; border-radius: 7px;
    padding: 8px 14px; cursor: pointer; border: none;
  }
  .pc-judge .yes { background: var(--teal); color: #0d221e; }
  .pc-judge .no { background: var(--coral); color: #2a0d06; }
  .pc-hint-tap { font-size: 12px; color: var(--ink-dim); margin-top: 12px; }

  .pc-slow-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-dim); }
  .pc-slow-toggle input { accent-color: var(--amber); }

  .pc-username { font-size: 12.5px; color: var(--ink-dim); }

  #pc-root :is(button, input, textarea, select):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--teal) 65%, transparent);
    outline-offset: 2px;
  }
  #pc-root :is(
    .pc-btn-ghost, .pc-btn-primary, .pc-addbtn, .pc-theme-toggle, .pc-module-tab,
    .pc-article-nav-link, .pc-tab, select, .pc-form input
  ) { min-height: 44px; }
  #pc-root button:disabled, #pc-root input:disabled, #pc-root select:disabled { cursor: not-allowed; opacity: .5; }
  .pc-app-shell { width: 100%; min-width: 0; }
  .pc-topnav {
    max-width: 920px; margin: 0 auto 18px; padding-bottom: 14px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border-bottom: 1px solid var(--line);
  }
  .pc-module-tabs, .pc-account-actions, .pc-article-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pc-module-tab, .pc-article-nav-link {
    border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-dim);
    padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .pc-module-tab.active { background: var(--amber); color: #1a1305; }
  .pc-article-nav { max-width: 920px; margin: 0 auto 20px; }
  .pc-article-nav-link { border-color: var(--line); }
  .pc-article-nav-link.active { border-color: var(--teal); color: var(--teal); background: var(--bg-panel); }
  .pc-view-root { min-width: 0; }
  .pc-login-header { text-align: center; }
  .pc-login-submit { width: 100%; margin-top: 18px; padding: 10px; }
  .pc-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
  .pc-word-forms { color: var(--ink-dim); font-size: 11.5px; margin-top: 3px; overflow-wrap: anywhere; }
  .pc-test-wrap { max-width: 420px; margin: 0 auto; }
  .pc-controls-center { justify-content: center; margin-top: 14px; }
  .pc-test-count { text-align: center; margin-top: 12px; color: var(--ink-dim); font-size: 12px; }
  .pc-article-toolbar { align-items: center; }
  .pc-article-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
  .pc-article-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
  .pc-article-title { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
  .pc-article-meta { display: flex; flex-direction: column; gap: 4px; color: var(--ink-dim); font-size: 12px; overflow-wrap: anywhere; }
  .pc-progress-state { color: var(--teal); font-weight: 600; }
  .pc-article-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
  .pc-article-actions button { min-height: 38px; }
  .pc-danger { color: var(--coral); }
  .pc-btn-danger {
    background: var(--coral); border: none; border-radius: 7px; color: #2a0d06;
    min-height: 44px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  }
  .pc-page-error, .pc-inline-error {
    max-width: 920px; margin: 0 auto 16px; padding: 10px 12px; border: 1px solid var(--coral);
    border-radius: 8px; color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, transparent);
    overflow-wrap: anywhere;
  }
  .pc-inline-error { grid-column: 1 / -1; }
  .pc-article-form { display: grid; }
  .pc-article-form textarea { resize: vertical; min-height: 82px; }
  .pc-field-error { min-height: 18px; margin-top: 3px; color: var(--coral); font-size: 11.5px; }

  .pc-login-wrap { max-width: 920px; margin: 60px auto; display: flex; justify-content: center; }
  .pc-login-card {
    width: 100%; max-width: 340px; background: var(--bg-panel); border: 1px solid var(--line);
    border-radius: 12px; padding: 26px;
  }
  .pc-login-card label { font-size: 11.5px; color: var(--ink-dim); display: block; margin: 14px 0 5px; }
  .pc-login-card input {
    width: 100%; background: var(--bg-deep); border: 1px solid var(--line); border-radius: 7px;
    padding: 10px 11px; color: var(--ink); font-size: 14px; font-family: inherit;
  }
  .pc-login-card input:focus { outline: none; border-color: var(--teal); }
  .pc-login-error {
    background: color-mix(in srgb, var(--coral) 15%, transparent); color: var(--coral);
    border: 1px solid var(--coral); border-radius: 7px; padding: 8px 10px; font-size: 12.5px; margin-top: 10px;
  }

  .pc-reader-header { max-width: 760px; margin-inline: auto; }
  .pc-reader-content {
    width: 100%; max-width: var(--reader-max-width, 760px); margin-inline: auto;
  }
  .pc-reader-header { display: grid; gap: 12px; margin-bottom: 22px; }
  .pc-reader-title { margin: 0; font-size: clamp(1.7rem, 5vw, 2.7rem); line-height: 1.2; overflow-wrap: anywhere; }
  .pc-reader-text {
    font-family: 'Atkinson Hyperlegible', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    white-space: pre-line; overflow-wrap: anywhere; font-size: var(--reader-font-size, 19px); line-height: var(--reader-line-height, 1.9);
  }
  .pc-reader-paragraph { margin: 0; }
  .pc-reader-paragraph + .pc-reader-paragraph { margin-top: 1.75em; }
  .pc-reader-paragraph-sentence-mode { display: grid; gap: 1em; }
  .pc-reader-sentence-unit { display: grid; gap: .28em; }
  .pc-sentence-translation-slot {
    min-height: 44px; padding: 0 0 0 14px;
    border-left: 2px solid color-mix(in srgb, var(--teal) 34%, transparent);
    color: var(--ink-dim); background: transparent;
    display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: start;
  }
  .pc-sentence-translation-action {
    min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 999px;
    background: transparent; color: var(--teal); cursor: pointer; font: inherit; font-size: .72em;
    display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px;
  }
  .pc-sentence-translation-action:hover {
    background: color-mix(in srgb, var(--teal) 9%, transparent);
  }
  .pc-sentence-translation-action svg { width: 17px; height: 17px; }
  .pc-sentence-translation-glyph {
    width: 24px; height: 24px; border: 1px solid color-mix(in srgb, var(--teal) 42%, transparent);
    border-radius: 999px; display: inline-grid; place-items: center;
    font-size: 12px; font-weight: 700; line-height: 1;
  }
  .pc-sentence-translation-controls {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-start;
  }
  .pc-sentence-translation-controls-cached {
    grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end;
  }
  .pc-sentence-translation-refresh {
    width: 44px; min-width: 44px; min-height: 44px; padding: 0; justify-content: center;
  }
  .pc-sentence-translation-status:focus { outline: 3px solid var(--teal); outline-offset: 2px; }
  .pc-sentence-translation-action:disabled { cursor: wait; opacity: .7; }
  .pc-sentence-translation-action:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
  .pc-sentence-translation-text {
    grid-column: 1; display: block; margin: 0; padding: 6px 8px 6px 0;
    color: var(--ink-dim); font-size: .84em; line-height: 1.7;
    font-family: 'Noto Sans SC', sans-serif;
  }
  .pc-sentence-translation-status, .pc-sentence-translation-error {
    grid-column: 1; padding: 8px 8px 8px 0; font-size: 12px;
  }
  .pc-sentence-translation-error { color: var(--coral); }
  .pc-reader-start-hint {
    margin-bottom: 10px;
    color: var(--ink-dim);
    font-size: 12.5px;
  }
  .pc-reader-start-hint[hidden] { display: none; }
  .pc-reader-start-selecting .pc-reader-sentence {
    outline: 1px dashed color-mix(in srgb, var(--teal) 55%, transparent);
    outline-offset: 3px;
    cursor: crosshair;
  }
  .pc-reader-start-selecting .pc-reader-sentence:hover,
  .pc-reader-start-selecting .pc-reader-sentence:focus-visible {
    outline: 3px solid var(--teal);
  }
  .pc-reader-sentence { scroll-margin-block: 20vh; border-radius: 4px; cursor: pointer; }
  .pc-reader-sentence:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
  .pc-reader-sentence.pc-sentence-speaking {
    background: color-mix(in srgb, var(--teal) 18%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent);
    border-radius: 4px;
  }
  .pc-reader-speech { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pc-reader-speech [data-action="speech-primary"],
  .pc-reader-speech [data-action="speech-previous"],
  .pc-reader-speech [data-action="speech-current"],
  .pc-reader-speech [data-action="speech-timer"] {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  .pc-speech-replay-action { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
  .pc-speech-replay-action svg { width: 16px; height: 16px; flex: 0 0 16px; }
  .pc-speech-field { display: flex; align-items: center; gap: 6px; color: var(--ink-dim); font-size: 12px; }
  .pc-speech-field input[type="range"] { width: 110px; accent-color: var(--teal); }
  .pc-speech-rate-value { color: var(--ink); font-variant-numeric: tabular-nums; min-inline-size: 3ch; }
  .pc-sleep-timer-remaining {
    color: var(--ink-dim); font-size: 12px; font-variant-numeric: tabular-nums;
    min-width: 44px; min-height: 44px; padding: 0 6px; border: 0;
    background: transparent; cursor: pointer; font-family: inherit;
    touch-action: manipulation;
  }
  .pc-sleep-timer-remaining:hover { color: var(--teal); }
  .pc-sleep-timer-remaining[hidden] { display: none; }
  .pc-speech-unavailable { color: var(--ink-dim); font-size: 12.5px; padding: 8px 10px; border-left: 3px solid var(--amber); }
  .pc-aloud-resume-entry {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    color: var(--ink-dim); font-size: 12.5px;
  }
  .pc-aloud-resume-entry[hidden] { display: none; }
  .pc-aloud-resume-copy { min-width: 0; flex: 1 1 260px; overflow-wrap: anywhere; }
  .pc-aloud-resume-entry .pc-btn-ghost { min-height: 36px; padding: 6px 10px; }
  .pc-aloud-resume-marker {
    display: inline-block; margin-inline: 2px 7px; padding: 1px 6px;
    border-radius: 999px; background: color-mix(in srgb, var(--amber) 18%, transparent);
    color: var(--amber); font-size: 11px; font-weight: 700; line-height: 1.7;
    vertical-align: .15em; white-space: nowrap;
  }
  .pc-floating-speech {
    position: fixed; z-index: 19; left: 50%;
    bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateX(-50%); display: grid; grid-template-columns: repeat(5, minmax(44px, auto));
    align-items: center; gap: 8px; max-width: calc(100vw - 24px);
    min-height: 48px; padding: 2px 8px; border: 1px solid var(--line);
    border-radius: 999px; background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
    color: var(--ink); box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .pc-floating-speech[hidden] { display: none; }
  .pc-floating-speech-action {
    appearance: none; min-width: 44px; min-height: 44px; padding-inline: 10px;
    position: relative;
    border: 0; border-radius: 999px; background: transparent; color: inherit;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
    touch-action: manipulation; transition: background-color .15s ease, color .15s ease;
  }
  .pc-floating-speech-action::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
  }
  .pc-floating-speech-action > * { pointer-events: none; }
  .pc-floating-speech-action svg { width: 18px; height: 18px; flex: 0 0 18px; }
  .pc-floating-speech-rate,
  .pc-floating-speech-timer-value { font-variant-numeric: tabular-nums; }
  .pc-floating-speech-action:hover { color: var(--teal); }
  .pc-floating-speech-action:active { background: color-mix(in srgb, var(--teal) 14%, transparent); }
  .pc-floating-speech-action:disabled { cursor: not-allowed; opacity: .45; }
  .pc-floating-speech-action:focus-visible {
    outline: 3px solid var(--teal); outline-offset: -3px;
  }
  .pc-floating-speech-divider { display: none; }
  #pc-root:has(.pc-floating-speech:not([hidden])) .pc-reader-content {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }
  .pc-play:disabled, [data-speech-control]:disabled { cursor: not-allowed; opacity: .45; }
  .pc-sleep-timer-panel {
    position: fixed; z-index: 21;
    left: var(--sleep-timer-left, 12px); top: var(--sleep-timer-top, 12px);
    width: min(312px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
    display: grid; gap: 10px; overflow-y: auto; overscroll-behavior: contain;
    padding: 16px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg-panel); box-shadow: 0 14px 36px rgba(0,0,0,.18);
  }
  .pc-sleep-timer-title { margin: 0; font-size: 16px; }
  .pc-sleep-timer-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pc-sleep-timer-presets .pc-btn-ghost,
  .pc-sleep-timer-panel > .pc-btn-ghost {
    min-height: 44px; touch-action: manipulation;
  }
  .pc-sleep-timer-custom-label { display: grid; gap: 5px; color: var(--ink-dim); font-size: 12px; }
  .pc-sleep-timer-custom {
    min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
    background: var(--bg-deep); color: var(--ink); font: inherit;
  }
  .pc-sleep-timer-custom:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
  .pc-sleep-timer-error { min-height: 1.4em; color: var(--coral); font-size: 12px; }
  .pc-reader-settings-trigger {
    min-width: 44px; min-height: 44px; padding: 8px; display: inline-grid; place-items: center;
  }
  .pc-reader-settings-trigger svg { width: 18px; height: 18px; }
  .pc-reader-translation-trigger {
    width: 44px; min-width: 44px; min-height: 44px; padding: 8px;
    display: inline-grid; place-items: center; margin-inline-start: auto;
  }
  .pc-reader-translation-trigger svg { width: 18px; height: 18px; }
  .pc-reader-translation-trigger[aria-pressed="true"] {
    color: var(--teal);
    border-color: color-mix(in srgb, var(--teal) 55%, var(--line));
    background: color-mix(in srgb, var(--teal) 10%, transparent);
  }
  .pc-reader-settings-panel {
    position: fixed; z-index: 21;
    left: var(--reader-settings-left, 12px); top: var(--reader-settings-top, 12px);
    width: min(288px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
    padding: 16px; display: grid; gap: 12px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: 12px; background: var(--bg-panel); color: var(--ink);
    box-shadow: 0 14px 36px rgba(0,0,0,.18);
  }
  .pc-reader-settings-title { margin: 0; font-size: 16px; }
  .pc-reader-settings-group { min-width: 0; margin: 0; padding: 0; border: 0; }
  .pc-reader-settings-group legend { margin-bottom: 6px; color: var(--ink-dim); font-size: 12px; }
  .pc-reader-settings-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pc-reader-settings-choice {
    min-height: 44px; padding: 7px 6px; border: 1px solid var(--line); border-radius: 7px;
    background: var(--bg-deep); color: var(--ink-dim); font: inherit; font-size: 12px; cursor: pointer;
  }
  .pc-reader-settings-choice[aria-pressed="true"] {
    border-color: var(--teal); background: color-mix(in srgb, var(--teal) 16%, var(--bg-panel)); color: var(--teal);
  }
  .pc-reader-settings-voice, .pc-settings-field { display: grid; gap: 6px; color: var(--ink-dim); font-size: 12px; }
  .pc-reader-settings-voice select, .pc-settings-field select {
    min-height: 44px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
    background: var(--bg-deep); color: var(--ink); font: inherit;
  }
  .pc-reader-translation-panel > .pc-btn-ghost { min-height: 44px; }
  .pc-reader-translation-title {
    margin: -4px 0 0; color: var(--ink-dim);
    font-size: clamp(1.05rem, 3vw, 1.35rem); line-height: 1.4;
  }
  .pc-article-translation-progress {
    margin: 0 0 1em;
    color: var(--ink-dim);
    font-size: .8em;
  }
  .pc-reader-translation {
    margin: 8px 0 18px; padding: 12px 14px; border-left: 3px solid var(--teal);
    border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--teal) 8%, var(--bg-panel));
    color: var(--ink-dim); font-family: 'Noto Sans SC', sans-serif; line-height: 1.75; white-space: pre-line;
  }
  .pc-reader-translation-pending {
    min-height: 2.5em;
    color: var(--ink-dim);
    opacity: .72;
  }
  .pc-selection-translation {
    margin-top: 10px; padding: 10px 12px; border-radius: 8px;
    background: color-mix(in srgb, var(--teal) 10%, var(--bg-deep)); color: var(--ink);
    white-space: pre-line;
  }
  .pc-offline-shell {
    width: min(520px, 100%); margin: 12vh auto 0; padding: 28px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--bg-panel); text-align: center;
  }
  .pc-offline-shell h1 { margin: 0 0 10px; color: var(--amber); }
  .pc-offline-shell p { margin: 0; color: var(--ink-dim); line-height: 1.7; }
  .pc-install-dialog {
    width: min(420px, calc(100vw - 28px)); padding: 22px; border: 1px solid var(--line);
    border-radius: 14px; background: var(--bg-panel); color: var(--ink);
  }
  .pc-install-dialog::backdrop { background: rgba(0, 0, 0, .58); }
  .pc-install-dialog h2 { margin-top: 0; }
  .pc-install-dialog p { color: var(--ink-dim); line-height: 1.7; }
  .pc-term {
    appearance: none; border: 0; border-radius: 4px; padding: 1px 2px;
    font: inherit; line-height: inherit; color: inherit; cursor: pointer;
  }
  .pc-term-pending { background: color-mix(in srgb, var(--amber) 35%, transparent); box-shadow: inset 0 -2px var(--amber); }
  .pc-term-word { background: color-mix(in srgb, var(--teal) 30%, transparent); box-shadow: inset 0 -2px var(--teal); }
  .pc-reader-popover, .pc-conversion-panel {
    border: 1px solid var(--line); border-radius: 12px; background: var(--bg-panel); box-shadow: 0 14px 36px rgba(0,0,0,.18);
  }
  .pc-reader-popover {
    position: fixed; z-index: 20;
    left: max(12px, min(var(--popover-left, 12px), calc(100vw - 324px)));
    top: max(12px, min(var(--popover-top, 70px), calc(100dvh - 96px)));
    width: min(312px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
    padding: 16px 18px 14px; overflow-y: auto; overflow-wrap: anywhere;
  }
  .pc-reader-popover-ribbon {
    position: absolute; top: 0; left: 22px; width: 18px; height: 26px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  }
  .pc-reader-popover[data-term-state="marked"] .pc-reader-popover-ribbon { background: var(--amber); }
  .pc-reader-popover[data-term-state="saved"] .pc-reader-popover-ribbon { background: var(--teal); }
  .pc-popover-icon-button {
    width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    background: transparent; color: var(--ink-dim); cursor: pointer; touch-action: manipulation;
  }
  .pc-popover-icon-button:hover { border-color: var(--line); background: var(--bg-panel-2); color: var(--ink); }
  .pc-popover-icon-button svg, .pc-reader-popover-tools svg, .pc-reader-popover-status svg { width: 17px; height: 17px; flex: 0 0 auto; }
  .pc-reader-popover-close { position: absolute; top: 4px; right: 4px; }
  .pc-reader-popover-head { min-height: 44px; padding-right: 40px; }
  .pc-reader-popover-word-block { display: grid; gap: 3px; }
  .pc-reader-popover-word-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .pc-reader-popover-word {
    min-width: 0; font: 600 20px/1.25 Georgia, 'Noto Serif SC', 'Songti SC', serif;
    color: var(--ink); overflow-wrap: anywhere;
  }
  .pc-reader-popover-bookmark.active {
    color: color-mix(in srgb, var(--amber) 72%, var(--ink));
    background: color-mix(in srgb, var(--amber) 18%, var(--bg-panel));
  }
  .pc-reader-popover-divider { height: 1px; margin: 12px 0; background: var(--line); }
  .pc-reader-popover-body { display: grid; gap: 10px; color: var(--ink); font-size: 13px; line-height: 1.65; }
  .pc-reader-popover-primary-action { width: 100%; }
  .pc-reader-popover-status {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px;
  }
  .pc-reader-popover-status-unmarked {
    color: var(--ink-dim); background: var(--bg-panel-2);
  }
  .pc-reader-popover-status-marked {
    color: color-mix(in srgb, var(--amber) 78%, var(--ink));
    background: color-mix(in srgb, var(--amber) 16%, var(--bg-panel));
  }
  .pc-reader-popover-status-saved {
    color: color-mix(in srgb, var(--teal) 78%, var(--ink));
    background: color-mix(in srgb, var(--teal) 16%, var(--bg-panel));
  }
  .pc-reader-popover-status-main { font-weight: 600; }
  .pc-reader-popover-status-sub { color: var(--ink-dim); font-size: 11px; line-height: 1.4; }
  .pc-reader-popover-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .pc-popover-secondary-action { border-color: transparent; color: var(--ink-dim); }
  .pc-popover-secondary-action:hover { color: var(--coral); }
  .pc-selection-reading {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 8px;
  }
  .pc-reader-popover-tools .pc-btn-ghost {
    min-width: 0; padding-inline: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    color: var(--ink-dim); font-size: 12px; line-height: 1.35; white-space: normal;
  }
  .pc-reader-popover-tools .pc-btn-ghost:hover { color: var(--ink); }
  .pc-conversion-panel { width: min(620px, calc(100% - 24px)); max-width: 100%; margin: 18px auto; padding: 16px; overflow-wrap: anywhere; }
  .pc-popover-actions, .pc-conflict-candidate { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
  .pc-popover-actions.pc-reader-popover-actions { display: grid; }
  .pc-conflict-candidate { padding-block: 10px; border-top: 1px solid var(--line); }
  .pc-pending-list {
    width: 100%; max-width: 920px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr; gap: 14px;
  }
  .pc-pending-row {
    min-width: 0; min-height: 96px; padding: 12px 14px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 12px; background: var(--bg-panel);
    border: 1px solid var(--line); border-radius: 12px;
  }
  .pc-pending-content { min-width: 0; }
  .pc-pending-term {
    margin: 0; color: var(--ink); font-size: 16px; line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .pc-pending-content .pc-article-meta { margin-top: 5px; }
  .pc-pending-actions { width: 76px; display: grid; gap: 6px; }
  #pc-root button.pc-pending-action {
    width: 100%; min-height: 32px; padding: 6px 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    white-space: nowrap;
  }
  .pc-pending-action svg {
    width: 13px; height: 13px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .pc-pending-remove { color: var(--coral); }
  .pc-pending-remove:hover { border-color: var(--coral); color: var(--coral); }
  .pc-pending-action:disabled { cursor: not-allowed; opacity: .5; }
  .pc-pending-term, .pc-conversion-title { overflow-wrap: anywhere; }
  .pc-stats-list { max-width: 920px; margin: 0 auto; display: grid; gap: 14px; }
  .pc-stats-card { display: grid; gap: 14px; }
  .pc-stats-metrics {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px; margin: 0;
  }
  .pc-stats-metrics div { min-width: 0; }
  .pc-stats-metrics dt { color: var(--ink-dim); font-size: 11.5px; }
  .pc-stats-metrics dd { margin: 3px 0 0; color: var(--teal); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

  .pc-dialog-backdrop {
    position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
    background: rgba(5, 9, 14, .68); backdrop-filter: blur(2px);
  }
  .pc-dialog {
    width: min(430px, 100%); padding: 20px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg-panel); box-shadow: 0 18px 48px rgba(0,0,0,.32);
  }
  .pc-dialog-title { margin: 0 0 8px; font-size: 19px; }
  .pc-dialog-message { margin: 0; color: var(--ink-dim); line-height: 1.65; overflow-wrap: anywhere; }
  .pc-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
  .pc-toast-region {
    position: fixed; right: 20px; bottom: 20px; z-index: 110; display: grid; gap: 8px;
    width: min(360px, calc(100vw - 28px)); pointer-events: none;
  }
  .pc-toast {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--bg-panel); color: var(--ink); box-shadow: 0 10px 30px rgba(0,0,0,.25); pointer-events: auto;
  }
  .pc-toast-action {
    min-height: 40px; padding: 6px 10px; border: 1px solid var(--teal); border-radius: 7px;
    background: transparent; color: var(--teal); font: inherit; font-weight: 700; cursor: pointer;
  }

  .pc-library-filters {
    max-width: 920px; margin: 0 auto 18px; display: grid;
    grid-template-columns: minmax(180px, 1.4fr) repeat(2, minmax(130px, .7fr)) auto auto auto;
    gap: 9px; align-items: center;
  }
  .pc-library-filters input, .pc-library-filters select,
  .pc-relation-dialog input, .pc-relation-dialog select {
    min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid var(--line);
    border-radius: 8px; background: var(--bg-panel); color: var(--ink); font: inherit;
  }
  .pc-tag-field { display: block; border: 0; padding: 0; }
  .pc-tag-choice {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-width: 0; max-width: 100%; min-height: 32px; margin: 0; padding: 4px 11px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--bg-panel); color: var(--ink-dim);
    font-size: 12.5px; line-height: 1.2; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; cursor: pointer; user-select: none;
  }
  .pc-tag-choice input[type="checkbox"] {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0;
  }
  .pc-tag-choice:not(:has(input:disabled)):hover {
    border-color: color-mix(in srgb, var(--teal) 65%, var(--line));
    color: var(--ink);
  }
  .pc-tag-choice:not(:has(input:disabled)):active {
    background: color-mix(in srgb, var(--teal) 10%, var(--bg-panel));
  }
  .pc-tag-choice:has(input:disabled) {
    cursor: not-allowed; opacity: .5;
  }
  .pc-tag-choice:has(input:checked) {
    border-color: var(--teal);
    background: color-mix(in srgb, var(--teal) 16%, var(--bg-panel));
    color: color-mix(in srgb, var(--teal) 78%, var(--ink));
  }
  .pc-tag-choice:has(input:focus-visible) {
    outline: 3px solid color-mix(in srgb, var(--teal) 45%, transparent);
    outline-offset: 2px;
  }
  .pc-conversion-form .pc-tag-field { display: block; }
  .pc-tag-create {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px; align-items: end; margin-bottom: 10px;
  }
  .pc-tag-create label { min-width: 0; margin: 0; }
  .pc-tag-create .pc-btn-ghost { min-height: 44px; }
  .pc-tag-options { display: flex; flex-wrap: wrap; gap: 8px; }
  .pc-tag-error { margin-top: 8px; color: var(--coral); font-size: 12px; }
  .pc-tag-retry { margin-top: 8px; min-height: 44px; }
  .pc-word-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .pc-word-tags span, .pc-state-badge {
    padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px;
    color: var(--ink-dim); font-size: 11px;
  }
  .pc-state-badge { white-space: nowrap; }
  .pc-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 20px 0; }
  .pc-pagination button { min-height: 44px; }
  .pc-relation-dialog {
    width: min(640px, 100%); max-height: min(80vh, 720px); max-height: min(80dvh, 720px);
    overflow-y: auto;
  }
  .pc-relation-dialog-head {
    position: sticky; top: -20px; z-index: 1; margin: -4px -4px 12px;
    padding: 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    background: var(--bg-panel);
  }
  .pc-relation-dialog-head .pc-dialog-title { margin: 0; overflow-wrap: anywhere; }
  .pc-relation-dialog-body { display: grid; gap: 16px; }
  .pc-relation-dialog-body h3 { margin: 0 0 9px; font-size: 15px; }
  .pc-relation-section {
    min-width: 0; padding: 16px; border: 1px solid var(--line);
    border-radius: 10px; background: color-mix(in srgb, var(--bg-panel) 94%, var(--bg));
  }
  .pc-relation-dialog form {
    display: grid; gap: 14px; margin-top: 12px;
  }
  .pc-relation-dialog form label { min-width: 0; color: var(--ink-dim); font-size: 12px; }
  .pc-relation-dialog form label :is(input, select) { width: 100%; margin-top: 5px; }
  .pc-relation-search-field {
    display: grid; grid-template-columns: minmax(0, 1fr) 96px;
    gap: 8px; align-items: end;
  }
  .pc-relation-pair {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .pc-relation-note { display: block; }
  .pc-relation-form-actions { display: flex; justify-content: flex-end; }
  .pc-relation-search-button { width: 96px; height: 44px; align-self: end; }
  .pc-relation-form-actions .pc-btn-primary { min-width: 120px; height: 44px; }
  .pc-relation-delete { min-width: 64px; min-height: 36px; padding: 6px 10px; }
  .pc-relation-empty {
    padding: 12px; border: 1px dashed var(--line); border-radius: 8px;
    color: var(--ink-dim); text-align: center;
  }
  .pc-relation-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line);
  }
  .pc-relation-copy { min-width: 0; display: flex; flex-wrap: wrap; gap: 5px 9px; align-items: baseline; overflow-wrap: anywhere; }
  .pc-settings-card {
    max-width: 720px; margin: 0 auto 14px; padding: 18px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--bg-panel);
  }
  .pc-settings-card h3 { margin-top: 0; }
  .pc-settings-card progress { width: 100%; accent-color: var(--teal); }
  .pc-export-actions { display: flex; flex-wrap: wrap; gap: 9px; }
  .pc-export-actions a { text-decoration: none; display: inline-flex; align-items: center; }
  .pc-muted { color: var(--ink-dim); font-size: 12px; }

  @media (min-width: 700px) {
    .pc-pending-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 1100px) {
    .pc-pending-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 699px) {
    .pc-pending-row { min-height: 116px; padding: 12px; }
    .pc-pending-actions { width: 82px; gap: 8px; }
    #pc-root button.pc-pending-action { min-height: 44px; }
  }

  /* ---------- Mobile ---------- */
  @media (max-width: 640px) {
    #pc-root { padding: 18px 14px 44px; }
    .pc-title { font-size: 21px; }
    .pc-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .pc-tabs { width: 100%; }
    .pc-tab { flex: 1; text-align: center; padding: 9px 10px; }
    .pc-toolbar-right { width: 100%; justify-content: space-between; }
    .pc-addbtn { flex: 1; }
    .pc-form { grid-template-columns: 1fr; padding: 14px; }
    .pc-form input, .pc-form textarea { font-size: 16px; }
    .pc-login-card input { font-size: 16px; }
    .pc-grid { grid-template-columns: 1fr; gap: 12px; }
    .pc-play { width: 44px; height: 44px; }
    .pc-play svg { width: 16px; height: 16px; }
    .pc-word { font-size: 20px; }
    .pc-word-long { font-size: 18px; }
    .pc-word-extra-long { font-size: 16px; }
    .pc-testcard { padding: 18px; }
    .pc-topnav { align-items: stretch; flex-direction: column; }
    .pc-account-actions { order: -1; width: 100%; flex-wrap: nowrap; }
    .pc-install-button { white-space: nowrap; }
    .pc-username {
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      margin-right: auto;
    }
    .pc-module-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .pc-module-tab { width: 100%; }
    .pc-article-nav { display: grid; grid-template-columns: repeat(3, 1fr); }
    .pc-article-nav-link { padding-inline: 4px; }
    .pc-article-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .pc-article-actions .pc-btn-primary { grid-column: 1 / -1; }
    .pc-reader-speech { align-items: stretch; }
    .pc-sentence-translation-slot { padding-inline-start: 10px; }
    .pc-stats-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc-dialog-backdrop { padding: 14px; }
    .pc-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .pc-toast-region { left: 14px; right: 14px; bottom: 14px; width: auto; }
    .pc-library-filters { grid-template-columns: 1fr; }
    .pc-tag-create { grid-template-columns: 1fr; align-items: stretch; }
    .pc-relation-search-field, .pc-relation-pair { grid-template-columns: 1fr; }
    .pc-relation-search-button,
    .pc-relation-form-actions .pc-btn-primary { width: 100%; }
    .pc-relation-form-actions { display: block; }
    .pc-relation-section { padding: 14px; }
    .pc-relation-row { grid-template-columns: 1fr auto; }
    .pc-library-filters input, .pc-library-filters select,
    .pc-relation-dialog input, .pc-relation-dialog select { font-size: 16px; }
    .pc-relation-dialog { width: 100%; max-height: calc(100dvh - 28px); }
    .pc-tag-create { grid-template-columns: 1fr; }
    .pc-tag-create .pc-btn-ghost { width: 100%; }
  }
  @media (max-width: 640px), (max-width: 900px) and (pointer: coarse) {
    .pc-selection-action, .pc-term-popover.pc-reader-popover {
      position: fixed; top: auto; right: 0; bottom: 0; left: 0;
      width: 100%; max-height: 70vh; max-height: 70dvh; margin: 0;
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
      overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
      border-radius: 14px 14px 0 0;
    }
    .pc-sleep-timer-panel {
      position: fixed; top: auto; right: 0; bottom: 0; left: 0;
      width: 100%; max-height: 70vh; max-height: 70dvh; margin: 0;
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
      overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
      border-radius: 14px 14px 0 0;
    }
    .pc-reader-settings-panel,
    .pc-reader-translation-panel {
      position: fixed; top: auto; right: 0; bottom: 0; left: 0;
      width: 100%; max-height: 70vh; max-height: 70dvh; margin: 0;
      padding-bottom: calc(14px + env(safe-area-inset-bottom));
      overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
      border-radius: 14px 14px 0 0;
    }
    .pc-sleep-timer-custom { font-size: 16px; }
    .pc-reader-popover-actions, .pc-selection-reading { grid-template-columns: 1fr; }
    .pc-aloud-resume-entry {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 6px;
    }
    .pc-aloud-resume-copy {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .pc-aloud-resume-entry .pc-btn-ghost {
      min-height: 44px;
      padding-inline: 10px;
      white-space: nowrap;
    }
    .pc-floating-speech {
      width: calc(100vw - 24px);
      grid-template-columns: repeat(5, minmax(44px, 1fr));
      gap: 4px;
      padding-inline: 4px;
    }
    .pc-floating-speech-action {
      min-width: 44px;
      padding-inline: 4px;
    }
    .pc-floating-speech-action svg { width: 18px; }
    .pc-floating-speech-label { display: none; }
  }
  @media (max-width: 380px) {
    .pc-toolbar-right { flex-direction: column; align-items: stretch; }
    .pc-theme-toggle, .pc-slow-toggle { justify-content: center; }
  }
  @media (prefers-reduced-motion: reduce) {
    #pc-root, #pc-root *, #pc-root *::before, #pc-root *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
    }
  }