/* Стили админки — из утверждённого макета prototypes/prototype-admin-cute.html («да» автора 19.10.2026),
   плюс дополнения внизу. Шрифт Nunito и синие цвета — из сайта студии. */
  :root {
    --bg: #edf1fe; --card: #ffffff; --ink: #16204a; --muted: #67709a; --line: #dbe2f8; --field: #f6f8ff;
    --blue: #1b4fd8; --blue-deep: #0e2f8c; --scatter: #7ba3f5; --soft: #dce6fb;
    --run: #1b4fd8; --run-tint: #e3ecff; --ok: #157a46; --ok-tint: #dbf5e6;
    --fail: #c22350; --fail-tint: #ffe3ea; --wait: #876200; --wait-tint: #fff1c6;
    --btn: #1b4fd8; --btn-ink: #ffffff; --btn-edge: #0e2f8c; --shade: rgba(22, 32, 74, .45);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0f1538; --card: #19214c; --ink: #eef1ff; --muted: #a6aed8; --line: #2b356e; --field: #141b42;
      --blue: #7ba3f5; --blue-deep: #3b62c9; --scatter: #4f7fec; --soft: #24306a;
      --run: #9dbbff; --run-tint: #22306b; --ok: #7fdcaa; --ok-tint: #173c33; --fail: #ff9db4; --fail-tint: #451f3a;
      --wait: #f3cd6b; --wait-tint: #3e3524; --btn: #7ba3f5; --btn-ink: #0f1538; --btn-edge: #3b62c9; --shade: rgba(0, 0, 0, .6);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0f1538; --card: #19214c; --ink: #eef1ff; --muted: #a6aed8; --line: #2b356e; --field: #141b42;
    --blue: #7ba3f5; --blue-deep: #3b62c9; --scatter: #4f7fec; --soft: #24306a;
    --run: #9dbbff; --run-tint: #22306b; --ok: #7fdcaa; --ok-tint: #173c33; --fail: #ff9db4; --fail-tint: #451f3a;
    --wait: #f3cd6b; --wait-tint: #3e3524; --btn: #7ba3f5; --btn-ink: #0f1538; --btn-edge: #3b62c9; --shade: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }

  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 Nunito, "Segoe UI", Roboto, sans-serif; }
  .wrap { max-width: 640px; margin: 0 auto; padding: 16px 16px 48px; }

  /* Шапка: знак студии и итог одной фразой — самое важное, что видно сразу. */
  header { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
  .mark { width: 44px; height: 44px; flex: none; }
  .brand { flex: 1; font-weight: 800; font-size: 17px; letter-spacing: .01em; }
  .toplink { color: var(--muted); font-weight: 600; font-size: 15px; text-decoration: none; }
  .hero { margin: 14px 0 6px; font-weight: 800; font-size: 30px; line-height: 1.15; letter-spacing: -.01em; }
  .hero-sub { margin: 0 0 18px; color: var(--muted); }
  .poll { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 18px;
          padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--card); border: 2px solid var(--line); font-size: 14px; color: var(--muted); }
  .poll button { flex: none; min-height: 36px; font-size: 14px; padding: 0 12px; }
  .poll span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .card { background: var(--card); border: 2px solid var(--line); border-radius: 24px; padding: 18px; margin-bottom: 16px;
          box-shadow: 0 5px 0 var(--line); }
  .app-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  h2 { font-size: 21px; font-weight: 800; margin: 0; }
  .site { color: var(--muted); font-size: 14px; margin: 0; }

  .pill { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 5px 12px; border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap; }
  .pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
  .pill.running { color: var(--run); background: var(--run-tint); }
  .pill.ok { color: var(--ok); background: var(--ok-tint); }
  .pill.failed { color: var(--fail); background: var(--fail-tint); }
  .pill.queued { color: var(--wait); background: var(--wait-tint); }

  .versions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; }
  .ver { background: var(--field); border-radius: 16px; padding: 10px 14px; }
  .ver dt { font-size: 13px; color: var(--muted); font-weight: 600; }
  .ver dd { margin: 0; font-size: 22px; font-weight: 800; }
  .ver dd span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }

  /* Шаги — точки «Подъёма»: пройденные выросли на стебельках, текущая покачивается. */
  .sprouts { margin: 18px 0 0; }
  .sprouts svg { display: block; width: 100%; height: 72px; }
  .sprouts .ground { stroke: var(--line); stroke-width: 3; stroke-linecap: round; }
  .sprouts .stem { stroke: var(--scatter); stroke-width: 3; stroke-linecap: round; }
  .sprouts .done { fill: var(--blue); }
  .sprouts .now { fill: var(--scatter); transform-box: fill-box; transform-origin: center; animation: bob 1.6s ease-in-out infinite; }
  .sprouts .todo { fill: var(--soft); }
  .sprouts .skip { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 3; }
  @keyframes bob { 50% { transform: translateY(-4px); } }
  @media (prefers-reduced-motion: reduce) { .sprouts .now { animation: none; } }
  .step { margin: 6px 0 0; font-size: 15px; }
  .step b { font-weight: 800; }
  .step span { color: var(--muted); }

  .problem { margin: 16px 0 0; padding: 12px 14px; border-radius: 16px; background: var(--fail-tint); color: var(--ink); font-size: 15px; }
  .hint { color: var(--muted); font-size: 14px; margin: 12px 0 0; }

  .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
  .actions .wide { grid-column: 1 / -1; }
  button {
    font: inherit; font-size: 15px; font-weight: 800;
    min-height: 46px; padding: 0 16px; border-radius: 999px; cursor: pointer;
    border: 2px solid var(--btn); background: var(--btn); color: var(--btn-ink);
    box-shadow: 0 3px 0 var(--btn-edge); transition: transform .08s, box-shadow .08s;
  }
  button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--btn-edge); }
  button.secondary { background: var(--card); color: var(--ink); border-color: var(--line); box-shadow: 0 3px 0 var(--line); }
  button.add { width: 100%; background: transparent; color: var(--blue); border: 2px dashed var(--scatter); box-shadow: none; margin-bottom: 16px; }
  button:disabled { opacity: .45; cursor: default; transform: none; }
  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--scatter); outline-offset: 2px; }

  .list { list-style: none; margin: 8px 0 0; padding: 0; }
  .list li { padding: 10px 0; border-top: 2px dotted var(--line); }
  .list li:first-child { border-top: 0; }
  .what { font-weight: 700; margin: 0; }
  .res.ok { color: var(--ok); }
  .res.fail { color: var(--fail); }
  .when { color: var(--muted); font-size: 14px; margin: 2px 0 0; }
  .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .row button { flex: none; }

  /* Экран настроек */
  .back { display: inline-block; color: var(--blue); font-weight: 700; text-decoration: none; font-size: 15px; margin: 8px 0 4px; }
  h1 { font-size: 30px; font-weight: 800; margin: 4px 0 0; line-height: 1.15; }
  h3 { font-size: 18px; font-weight: 800; margin: 0 0 12px; }
  .settings-sub { color: var(--muted); margin: 2px 0 16px; }
  .field + .field { margin-top: 12px; }
  label { display: block; font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 4px; }
  input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--field); color: var(--ink); font: inherit; }
  .secret { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 2px dotted var(--line); }
  .secret:first-of-type { border-top: 0; }
  .secret p { margin: 0; font-weight: 700; }
  .secret button { flex: none; white-space: nowrap; }
  .secret .state { font-weight: 600; font-size: 14px; margin-top: 2px; }
  .secret .state.ok { color: var(--ok); }
  .secret .state.todo { color: var(--fail); }
  .key { margin: 10px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--field); border: 2px dashed var(--line);
         font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
  .steps { margin: 8px 0 0; padding-left: 22px; font-size: 15px; }
  .steps li { margin: 2px 0; }

  .shade { position: fixed; inset: 0; background: var(--shade); display: none; align-items: flex-end; justify-content: center; }
  .shade.open { display: flex; }
  .sheet { width: 100%; max-width: 640px; background: var(--card); border-radius: 28px 28px 0 0; padding: 22px 18px 26px; }
  .sheet h3 { font-size: 21px; margin: 0 0 8px; }
  .sheet p { margin: 0 0 16px; color: var(--muted); }
  .sheet .actions { margin-top: 0; }

  /* Дополнения к макету: журнал, поля ввода, сообщения, вход */
  textarea {
    width: 100%; min-height: 140px; padding: 12px 14px; border-radius: 14px; resize: vertical;
    border: 2px solid var(--line); background: var(--field); color: var(--ink); font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace;
  }
  select { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--field); color: var(--ink); font: inherit; }
  .log { margin: 0; padding: 14px; border-radius: 18px; background: var(--field); border: 2px solid var(--line);
         font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 70vh; overflow: auto; }
  .msg { margin: 12px 0 0; font-size: 15px; font-weight: 600; }
  .msg:empty { display: none; }
  .msg.err { color: var(--fail); }
  .msg.ok { color: var(--ok); }
  .sheet .field { margin-bottom: 16px; }
  .hint a { color: var(--blue); font-weight: 700; }
  .login { max-width: 420px; margin: 10vh auto 0; }
  .login header { margin-bottom: 18px; }
  .login form .actions { grid-template-columns: 1fr; }