:root {
    --bg: #E9EEF2; --surface: #FFFFFF; --ink: #16202A; --muted: #5B6875;
    --line: #C9D2DA; --accent: #2450D6; --accent-ink: #FFFFFF;
    --tape: #F2C230; --tape-ink: #2E2500; --empty: #D6DDE3; --red: #E0453C; --green: #1E9E5A;
    --display: "Unbounded", "Arial Black", system-ui, sans-serif;
    --body: "Golos Text", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #10161C; --surface: #18212A; --ink: #E7EDF2; --muted: #93A1AE;
      --line: #2C3945; --accent: #7195FF; --accent-ink: #0B1330;
      --tape: #E5B82A; --tape-ink: #231C00; --empty: #25313C; --red: #FF6B61; --green: #3FCB84;
    }
  }
  :root[data-theme="dark"] {
    --bg: #10161C; --surface: #18212A; --ink: #E7EDF2; --muted: #93A1AE;
    --line: #2C3945; --accent: #7195FF; --accent-ink: #0B1330;
    --tape: #E5B82A; --tape-ink: #231C00; --empty: #25313C; --red: #FF6B61; --green: #3FCB84;
  }
  html { scroll-padding-top: env(safe-area-inset-top, 0px); }
  *, *::before, *::after { box-sizing: inherit; }
  body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 400 16px/1.5 var(--body); -webkit-text-size-adjust: 100%;
  }
  main { max-width: 640px; margin: 0 auto; padding: 24px 18px 48px; }
  h1 { font: 700 clamp(26px, 7vw, 40px)/1.05 var(--display); margin: 0 0 6px; letter-spacing: -0.01em; }
  h2 { font: 500 18px/1.2 var(--display); margin: 36px 0 12px; }
  p { margin: 0; }
  .muted { color: var(--muted); }
  button, input { font: inherit; color: inherit; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

  /* Заголовок и статус сохранения */
  .head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
  .sync {
    flex: none; position: relative; display: inline-flex; color: var(--muted); line-height: 0;
    border: 0; background: transparent; padding: 0; cursor: pointer;
  }
  .sync:hover { color: var(--ink); }
  .sync::after {
    content: attr(data-hint); position: absolute; top: 26px; right: 0; z-index: 5;
    width: max-content; max-width: 210px; padding: 7px 10px; border-radius: 8px;
    background: var(--ink); color: var(--bg); font: 400 12px/1.35 var(--body); text-align: left;
    opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none;
  }
  .sync:hover::after, .sync:focus-visible::after { opacity: 1; visibility: visible; }
  .sync svg { transform-origin: 50% 50%; }
  .sync .dot {
    position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--red); display: none;
    border: 2px solid var(--bg);
  }
  .sync[data-state="ok"] .dot { display: block; background: var(--green); }
  .sync[data-state="sync"] svg { animation: spin 1s linear infinite; }
  .sync[data-state="error"] .dot { display: block; }
  .sync[data-state="local"] .dot { display: block; background: var(--muted); }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) { .sync[data-state="sync"] svg { animation-duration: 3s; } }

  [hidden] { display: none !important; }   /* иначе display:grid у экрана входа перебивает атрибут */