:root {
      color-scheme: light;
      /* Legacy aliases — kept for compatibility; values resolved from final token set below.
       * Single source of truth lives in the second :root (search for "Brand colors"). */
      --color-primary:var(--primary-red, #EF3F4D);
      --color-primary-dark:var(--primary-red-pressed, #D93240);
      --color-primary-hover:var(--primary-red-pressed, #D93240);
      --color-background:var(--light-bg, #F4F7FB);
      --color-surface:var(--card-bg, #FFFFFF);
      --color-accent-light:#FDF2F2;
      --color-accent:var(--primary-red-pressed, #D93240);
      --brand-navy-muted:#374d78;
      --app-screen-gradient:var(--light-bg, #F4F7FB);
      --white:#FFFFFF;
    }
    * { box-sizing: border-box; }
    [hidden] { display:none !important; }
    body {
      margin:0;
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "SF Pro", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Inter, Arial, sans-serif;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      color:var(--ink);
      background:var(--app-screen-gradient);
      min-height:100vh;
      min-height:100svh;
      padding-bottom:calc(64px + env(safe-area-inset-bottom));
    }
    header {
      background:rgba(255,255,255,.94);
      border-bottom:1px solid rgba(255,255,255,.55);
      padding:calc(12px + env(safe-area-inset-top)) 18px 12px;
      display:flex;
      gap:18px;
      align-items:center;
      flex-wrap:wrap;
      position:sticky;
      top:0;
      z-index:5;
      box-shadow:0 12px 30px rgba(15,23,42,.12);
    }
    header strong { color:var(--brand-red); letter-spacing:-.005em; font-weight:800; }
    .discipline-label {
      color:#B03D42;
      font-size:13px;
      font-weight:700;
      letter-spacing:0;
      max-width:100%;
      white-space:normal;
      text-align:center;
    }
    nav { display:flex; gap:8px; flex-wrap:wrap; position:relative; }
    nav a {
      min-height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      color:var(--ink);
      text-decoration:none;
      font-size:15px;
      padding:8px 14px;
      border-radius:999px;
      font-weight:700;
      position:relative;
      transition:background-color .15s ease, color .15s ease;
    }
    nav a:hover { background:rgba(215,75,80,.08); color:var(--brand-red-dark); }
    nav a[aria-current="page"] {
      color:#fff;
      background:var(--brand-red);
      box-shadow:0 6px 14px rgba(215,75,80,.22);
    }
    nav a[aria-current="page"]::after {
      content:"";
      position:absolute;
      left:14px;
      right:14px;
      bottom:4px;
      height:2px;
      border-radius:2px;
      background:rgba(255,255,255,.85);
    }
    .bottom-tabbar a[aria-current="page"]::after { display:none; }
    main { width:min(1180px, 100%); margin:0 auto; padding:26px 18px calc(84px + env(safe-area-inset-bottom)); }
    main > section + section,
    main > section + form,
    main > form + section,
    main > section + .grid,
    main > .grid + section { margin-top: clamp(24px, 4vw, 40px); }
    main > section + .desktop-panel,
    main > .desktop-panel + .desktop-panel,
    main > .desktop-panel + section { margin-top: clamp(28px, 4.5vw, 48px); }
    h1 { font-size:clamp(30px, 6vw, 68px); line-height:1.02; margin:0 0 12px; letter-spacing:0; font-weight:900; }
    h2 { font-size:clamp(18px, 2.6vw, 22px); line-height:1.2; margin:22px 0 12px; }
    p { color:var(--muted); line-height:1.55; font-size:15px; }
    .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:14px; }
    .card, form, table {
      background:#fff;
      border:1px solid var(--soft-border, rgba(230,236,244,.7));
      border-radius:var(--radius-lg, 20px);
      box-shadow:var(--elev-2, 0 6px 14px rgba(7,26,68,.08));
    }
    .card { padding:var(--space-5, 20px); transition:box-shadow var(--dur-base, 180ms) var(--ease-out, ease); }
    .card:hover { box-shadow:var(--elev-3, 0 18px 38px rgba(7,26,68,.12)); }
    form { padding:var(--space-5, 20px); display:grid; gap:var(--space-3, 12px); }
    label { display:grid; gap:7px; font-size:14px; line-height:1.3; color:#384052; font-weight:700; }
    input, select, textarea {
      width:100%;
      padding:12px 13px;
      border:1.5px solid var(--soft-border, #E2E8F0);
      border-radius:var(--radius-md, 12px);
      font:inherit;
      font-size:16px;
      background:#fff;
      color:var(--ink);
      outline:none;
      transition:border-color var(--dur-base, 180ms) var(--ease-out, ease), box-shadow var(--dur-base, 180ms) var(--ease-out, ease), background-color var(--dur-base, 180ms) var(--ease-out, ease);
    }
    input:hover:not(:focus):not(:disabled),
    select:hover:not(:focus):not(:disabled),
    textarea:hover:not(:focus):not(:disabled) { border-color:#C7D2DF; }
    select {
      appearance:none;
      padding-right:52px;
      background-color:#fff;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:right 20px center;
      background-size:14px 14px;
    }
    input:focus, select:focus, textarea:focus { border-color:var(--blue-accent, #1457C8); box-shadow:0 0 0 4px rgba(20,87,200,.14); background:#FAFCFF; }
    button:focus-visible,
    a:focus-visible,
    summary:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline:3px solid rgba(215,75,80,.42);
      outline-offset:3px;
    }
    input[type="checkbox"] { width:18px; height:18px; accent-color:var(--brand-red); }
    button {
      border:0;
      border-radius:var(--button-radius);
      min-height:46px;
      padding:12px 18px;
      background:var(--brand-red);
      color:#fff;
      font-size:16px;
      font-weight:900;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      text-align:center;
      line-height:1.15;
      overflow:hidden;
      box-shadow:0 6px 16px rgba(215,75,80,.22);
      transition:transform .08s ease, box-shadow .12s ease, background-color .14s ease, filter .14s ease, opacity .14s ease;
      -webkit-tap-highlight-color:transparent;
      touch-action:manipulation;
      user-select:none;
    }
    button.secondary { background:#344054; box-shadow:0 6px 16px rgba(52,64,84,.20); }
    button.danger { background:var(--brand-red-deep); }
    button:hover:not(:disabled) {
      background:var(--brand-red-dark);
      box-shadow:0 10px 22px rgba(215,75,80,.30);
    }
    button.secondary:hover:not(:disabled) {
      background:#1f2937;
      box-shadow:0 10px 22px rgba(52,64,84,.28);
    }
    button:active:not(:disabled) {
      transform:translateY(1px) scale(.97);
      box-shadow:0 2px 6px rgba(215,75,80,.18);
      filter:brightness(.92);
    }
    button.secondary:active:not(:disabled) { box-shadow:0 2px 6px rgba(52,64,84,.18); }
    button:disabled {
      opacity:.55;
      cursor:not-allowed;
      box-shadow:none;
      filter:saturate(.7);
    }
    .timer-button { transition:transform .08s ease, box-shadow .12s ease, background-color .14s ease, filter .14s ease, opacity .14s ease; }
    .timer-button:not(:disabled):hover { filter:brightness(1.05); box-shadow:0 22px 46px rgba(52,64,84,.28); }
    .timer-button.is-running:not(:disabled):hover { box-shadow:0 24px 50px rgba(215,75,80,.32); }
    .timer-button:not(:disabled):active { transform:translateY(2px) scale(.985); box-shadow:0 6px 14px rgba(52,64,84,.18); filter:brightness(.92); }
    .judge-action-button { transition:transform .08s ease, box-shadow .12s ease, filter .14s ease, opacity .14s ease; }
    .judge-action-button:not(:disabled):hover { filter:brightness(1.05); box-shadow:0 20px 42px rgba(22,26,42,.20); }
    .judge-action-button:not(:disabled):active { transform:translateY(2px) scale(.985); box-shadow:0 6px 14px rgba(22,26,42,.16); filter:brightness(.90); }
    .judge-secondary-actions button:not(:disabled):active,
    .penalty-actions button:not(:disabled):active { transform:translateY(1px) scale(.97); box-shadow:0 4px 10px rgba(52,64,84,.14); }
    /* green "ДА" button must never read as red — override the global red focus ring */
    .judge-action-button.is-good:focus-visible { outline-color:rgba(255,255,255,.92); }
    /* Semantic judge buttons keep their own colour on hover. The generic
       button:hover red (var(--brand-red-dark)) would otherwise win on specificity
       and, on touch where :hover sticks after a tap, leave "ЗАЧТЕНО" stuck red.
       Press feedback stays via the :active brightness/transform above. */
    .judge-action-button.is-good:hover:not(:disabled) { background:var(--success-green); }
    .judge-action-button.is-no:hover:not(:disabled) { background:var(--primary-red); }
    .judge-action-button.is-warning:hover:not(:disabled) { background:var(--warning-yellow); }
    @keyframes judgeCountedPulse {
      0% { transform:scale(1); filter:brightness(1); }
      30% { transform:scale(1.045); filter:brightness(1.22); }
      100% { transform:scale(1); filter:brightness(1); }
    }
    .judge-action-button.is-good.is-confirm { animation:judgeCountedPulse .3s ease-out; }
    @media (prefers-reduced-motion: reduce) {
      button, .timer-button, .judge-action-button { transition:none; }
      button:active:not(:disabled),
      .timer-button:not(:disabled):active,
      .judge-action-button:not(:disabled):active,
      .judge-secondary-actions button:not(:disabled):active,
      .penalty-actions button:not(:disabled):active { transform:none; }
      .judge-action-button.is-good.is-confirm { animation:none; }
    }
    table { width:100%; border-collapse:collapse; overflow:hidden; }
    th, td { text-align:left; border-bottom:1px solid var(--line); padding:10px; vertical-align:top; font-size:14px; line-height:1.35; }
    th { background:#FDF2F2; font-size:13px; letter-spacing:.01em; }
    .ok { color:#087443; font-weight:900; }
    .warn { color:#b54708; font-weight:900; }
    .pill {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:8px 18px;
      border-radius:999px;
      background:var(--cream);
      color:var(--brand-red-dark);
      font-size:13px;
      line-height:1.2;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.04em;
      text-decoration:none;
    }
    a.pill, a.pill:hover, a.pill:visited, a.pill:active { text-decoration:none; }
    .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
    .qr { border:2px dashed var(--brand-red); padding:14px; overflow-wrap:anywhere; background:var(--cream); border-radius:14px; }
    .qr-card {
      display:grid;
      justify-items:center;
      gap:10px;
      border:0;
      padding:16px;
      background:#fff;
      border-radius:18px;
      box-shadow:inset 0 0 0 1px #e6d4d2;
    }
    .qr-card svg {
      width:min(250px, 100%);
      height:auto;
      display:block;
      border-radius:12px;
    }
    .judge-login,
    .judge-session {
      display:grid;
      gap:13px;
    }
    .judge-session[hidden],
    .judge-login[hidden] { display:none; }
    .judge-topline {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:12px 14px;
      border-radius:16px;
      background:var(--cream);
      color:#B03D42;
      font-weight:900;
    }
    .scanner-video {
      width:100%;
      max-height:260px;
      background:#1a1c24;
      border-radius:16px;
      display:none;
    }
    .scanner-video.is-visible { display:block; }
    .participant-card {
      display:none;
      gap:6px;
      padding:14px;
      border-radius:16px;
      background:#fffafa;
      border:1px solid #e6d4d2;
    }
    .participant-card.is-visible { display:grid; }
    .judge-arena {
      display:grid;
      gap:18px;
      justify-items:stretch;
      padding:20px;
      border-radius:28px;
      background:rgba(255,255,255,.98);
      border:1px solid rgba(230,212,210,.95);
      box-shadow:0 24px 54px rgba(15,23,42,.15);
    }
    .timer-display {
      justify-self:center;
      font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Inter, Arial, sans-serif;
      font-size:clamp(56px, 17vw, 112px);
      line-height:.86;
      font-weight:950;
      color:var(--brand-red);
      letter-spacing:0;
      text-align:center;
      font-variant-numeric:tabular-nums;
    }
    .timer-display.is-idle { color:#344054; }
    .timer-display.is-running { color:var(--brand-red); }
    .timer-display.is-stopped { color:#087443; }
    .timer-status {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:22px;
      color:#6f7688;
      font-size:13px;
      font-weight:800;
      text-align:center;
    }
    .timer-status::before {
      content:"";
      width:10px;
      height:10px;
      border-radius:50%;
      background:#98a2b3;
      box-shadow:0 0 0 4px rgba(152,162,179,.12);
    }
    .timer-status.is-running::before { background:#16c784; box-shadow:0 0 0 4px rgba(22,199,132,.14); }
    .timer-status.is-stopped::before { background:#087443; box-shadow:0 0 0 4px rgba(8,116,67,.12); }
    .judge-score-counters {
      width:min(430px, 100%);
      justify-self:center;
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      align-items:center;
      border-radius:18px;
      overflow:hidden;
      background:#fff;
      border:1px solid #ead8d6;
    }
    .judge-counter {
      min-width:0;
      padding:11px 8px;
      display:grid;
      gap:4px;
      justify-items:center;
      text-align:center;
      color:#6f7688;
    }
    .judge-counter + .judge-counter { border-left:1px solid #ead8d6; }
    .judge-counter strong {
      font-size:clamp(22px, 6vw, 30px);
      line-height:1;
      font-weight:950;
      color:#344054;
      font-variant-numeric:tabular-nums;
      letter-spacing:-.02em;
    }
    .judge-counter.is-good strong {
      font-size:clamp(28px, 7.6vw, 38px);
      color:#087443;
    }
    .judge-counter.is-bad strong { color:var(--brand-red); }
    .judge-counter.is-warning strong { color:#b7791f; }
    .judge-counter span {
      font-size:clamp(10px, 2.6vw, 12px);
      line-height:1.1;
      font-weight:700;
      letter-spacing:0;
      overflow-wrap:anywhere;
    }
    .timer-button {
      width:100%;
      min-height:74px;
      border-radius:var(--button-radius);
      padding:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      overflow:hidden;
      background:#344054;
      color:#fff;
      font-size:clamp(24px, 7vw, 34px);
      line-height:1;
      letter-spacing:.02em;
      box-shadow:0 18px 36px rgba(52,64,84,.22);
    }
    .timer-button.is-running {
      background:var(--brand-red);
      box-shadow:0 20px 42px rgba(215,75,80,.28);
    }
    .timer-button:disabled { opacity:.45; cursor:not-allowed; }
    .judge-primary-actions {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .judge-action-button {
      min-width:0;
      min-height:132px;
      border-radius:var(--button-radius);
      padding:14px 10px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:8px;
      overflow:hidden;
      text-align:center;
      color:#fff;
      box-shadow:0 16px 34px rgba(22,26,42,.16);
    }
    .judge-action-icon {
      width:44px;
      height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:34px;
      line-height:1;
      font-weight:950;
    }
    .judge-action-label {
      max-width:100%;
      font-size:clamp(20px, 5.8vw, 32px);
      line-height:1;
      font-weight:950;
      text-transform:uppercase;
      overflow-wrap:normal;
      word-break:normal;
      hyphens:auto;
    }
    .judge-action-button.is-no { background:var(--brand-red); flex-direction:row; }
    .judge-action-button.is-warning { background:#f6bd27; color:#1f2937; }
    .judge-action-button.is-good {
      grid-column:1 / -1;
      min-height:96px;
      background:#087443;
      color:#fff;
      border:0;
      box-shadow:0 16px 34px rgba(8,116,67,.2);
      flex-direction:row;
    }
    .judge-action-button:disabled { opacity:.46; cursor:not-allowed; filter:saturate(.65); }
    .judge-secondary-actions {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .judge-secondary-actions button {
      min-height:54px;
      border-radius:var(--button-radius);
      padding:12px;
      background:#344054;
      box-shadow:0 12px 26px rgba(52,64,84,.18);
    }
    .judge-secondary-actions button.danger { background:var(--brand-red-dark); }
    .judge-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .penalty-panel {
      display:grid;
      gap:12px;
      padding:14px;
      border-radius:18px;
      background:#fffafa;
      border:1px solid #e6d4d2;
    }
    .penalty-panel.is-judge-actions {
      padding:0;
      border:0;
      background:transparent;
      gap:14px;
    }
    .penalty-summary {
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:8px;
    }
    .penalty-stat {
      min-height:64px;
      padding:10px 6px 8px;
      border-radius:16px;
      background:#fff;
      border:1px solid #e6d4d2;
      color:#344054;
      display:grid;
      justify-items:center;
      align-content:center;
      gap:4px;
      text-align:center;
    }
    .penalty-stat-symbol {
      color:var(--brand-red);
      font-size:18px;
      line-height:1;
    }
    .penalty-stat-value {
      font-size:18px;
      line-height:1;
      font-weight:900;
      color:#1d2436;
    }
    .penalty-actions {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .penalty-actions.is-utility {
      grid-template-columns:1fr 1fr;
    }
    .penalty-actions button {
      min-height:54px;
      padding:12px 14px;
      border-radius:var(--button-radius);
      background:#344054;
      color:#fff;
      box-shadow:0 12px 28px rgba(52,64,84,.18);
      font-size:15px;
      line-height:1.1;
    }
    .penalty-actions.is-utility button {
      border-radius:var(--button-radius);
      background:#344054;
      box-shadow:0 10px 22px rgba(52,64,84,.16);
    }
    .penalty-button-content {
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      width:100%;
    }
    .penalty-button-count {
      min-width:22px;
      height:22px;
      padding:0 6px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      background:rgba(255,255,255,.18);
      color:#fff;
      font-size:12px;
      font-weight:900;
      line-height:1;
    }
    .attempt-summary {
      display:grid;
      gap:10px;
      padding:12px;
      border-radius:18px;
      background:#fff;
      border:1px solid #e6d4d2;
    }
    .attempt-summary-title {
      color:#2f3b52;
      font-weight:900;
      line-height:1.1;
    }
    .attempt-summary-grid {
      display:grid;
      gap:6px;
    }
    .attempt-summary-row {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding:7px 0;
      border-bottom:1px solid #f1dddb;
      color:#657089;
      font-weight:800;
    }
    .attempt-summary-row:last-child { border-bottom:0; }
    .attempt-summary-row strong {
      color:#2f3b52;
      text-align:right;
    }
    .judge-screen-footer-actions {
      display:grid;
      gap:12px;
    }
    .judge-result {
      min-height:70px;
      border-radius:18px;
      padding:14px;
      background:#fff;
      border:1px solid #e6d4d2;
      color:#30384b;
      font-weight:900;
    }
    .judge-result:empty { display:none; }
    .admin-login-message { margin-top:16px; }
    .admin-header-row {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      margin-bottom:16px;
    }
    .admin-header-row h1 { margin-bottom:0; }
    [contenteditable="true"] {
      border-radius:8px;
      outline:0;
    }
    [contenteditable="true"]:focus {
      box-shadow:inset 0 0 0 2px rgba(215,75,80,.32);
      background:#fff;
    }
    .rating-controls {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
      gap:10px;
      margin:0 0 18px;
      padding:clamp(14px, 2.4vw, 24px);
      border-radius:20px;
      background:rgba(255,255,255,.96);
      box-shadow:0 18px 40px rgba(15,23,42,.14);
    }
    .rating-controls label,
    .rating-controls input,
    .rating-controls select {
      min-width:0;
    }
    .rating-mode-buttons {
      grid-column:1 / -1;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .rating-mode-buttons button {
      min-height:54px;
      border-radius:var(--button-radius);
      padding:14px 14px;
      background:#FDF2F2;
      color:#9b4144;
      border:1px solid #FCDADC;
      text-align:center;
      line-height:1.05;
      overflow:hidden;
      box-shadow:0 8px 18px rgba(15,23,42,.05);
      opacity:.78;
    }
    .rating-mode-buttons button.is-active {
      background:var(--brand-red-dark);
      color:#fff;
      box-shadow:inset 0 0 0 3px rgba(255,255,255,.7), 0 14px 30px rgba(215,75,80,.3);
      transform:translateY(-1px);
      opacity:1;
    }
    .rating-mode-buttons button.is-active::before {
      content:"✓";
      width:20px;
      height:20px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:#fff;
      color:var(--brand-red-dark);
      font-weight:950;
    }
    .rating-controls button {
      align-self:end;
      min-height:44px;
      border-radius:var(--button-radius);
      padding:12px 16px;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
    }
    .rating-summary {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
      gap:12px;
      margin:16px 0;
    }
    .rating-heading {
      display:grid;
      gap:2px;
      margin:clamp(14px, 2.8vw, 28px) 0 clamp(18px, 3vw, 28px);
      max-width:760px;
    }
    .rating-logo-banner {
      width:min(100%, 1120px);
      margin:0 auto clamp(18px, 3vw, 28px);
      background:linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-soft) 100%);
      border-radius:22px;
      padding:clamp(16px, 2.5vw, 26px);
      display:grid;
      gap:16px;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 22px 48px rgba(17,29,54,.18);
    }
    .rating-logo-banner .home-logo-row {
      margin:0;
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      align-items:center;
      justify-items:center;
    }
    .rating-logo-banner .home-logo-card { min-width:0; }
    .rating-logo-banner .page-discipline-pill {
      justify-self:center;
      margin:0;
      background:rgba(255,255,255,.16);
      color:#fff;
      border-color:rgba(255,255,255,.72);
      box-shadow:none;
    }
    .rating-panel {
      padding:clamp(22px, 3.8vw, 44px);
    }
    .rating-panel > .page-discipline-pill,
    .rating-panel > .rating-heading,
    .rating-panel > .rating-controls,
    .rating-panel > .rating-status,
    .rating-panel > .rating-summary,
    .rating-panel > .rating-participants-title,
    .rating-panel > .rating-table-wrap,
    .rating-panel > .pagination-row {
      width:min(100%, 1120px);
      margin-left:auto;
      margin-right:auto;
    }
    .rating-heading h2 {
      margin:0;
      color:var(--brand-red);
      font-size:clamp(28px, 7vw, 56px);
      line-height:.98;
      text-transform:uppercase;
    }
    .rating-heading p {
      margin:0;
      color:#B03D42;
      font-size:clamp(15px, 3vw, 20px);
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.03em;
    }
    .rating-status {
      min-height:18px;
      margin:0 0 10px;
      color:#B03D42;
      font-size:13px;
      font-weight:900;
    }
    .rating-status:empty { display:none; }
    .rating-participants-title {
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin:12px 0 8px;
      color:#20314f;
      font-size:15px;
      font-weight:900;
    }
    .rating-participants-title span {
      color:var(--brand-red);
      text-transform:uppercase;
      font-size:12px;
      letter-spacing:.02em;
    }
    .rating-reset-btn {
      flex:0 0 auto;
      margin-left:auto;
      min-height:32px;
      padding:6px 14px;
      border-radius:999px;
      border:1px solid rgba(239,63,77,.32);
      background:rgba(239,63,77,.08);
      color:var(--brand-red);
      font-size:12px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.02em;
      cursor:pointer;
      box-shadow:none;
    }
    .rating-reset-btn:active { transform:scale(.97); }
    .rating-table-wrap {
      overflow:auto;
      border-radius:16px;
      box-shadow:0 18px 40px rgba(15,23,42,.16);
      background:#fff;
    }
    .rating-table-wrap table {
      min-width:760px;
      box-shadow:none;
    }
    .rating-table-wrap th,
    .rating-table-wrap td {
      padding:9px 10px;
      font-size:15px;
      line-height:1.35;
      font-weight:600;
    }
    .rating-table-wrap th { font-size:13px; letter-spacing:.02em; }
    .rating-table-wrap td.mono,
    .rating-table-wrap th.mono { font-variant-numeric:tabular-nums; }
    .rating-table-wrap tbody tr.is-focused {
      background:#fff3f3;
      color:#B03D42;
      box-shadow:inset 5px 0 0 var(--brand-red);
    }
    .rating-table-wrap tbody tr.is-neighbor { background:#fffbfb; }
    .rating-table-wrap th { white-space:nowrap; }
    .rating-table-wrap th:first-child,
    .rating-table-wrap td:first-child {
      text-align:center;
      width:58px;
    }
    .rating-table-wrap td:nth-child(2),
    .rating-table-wrap td:nth-child(3) {
      max-width:92px;
      overflow-wrap:anywhere;
    }
    .rating-cards { display:none; }
    .rating-card-empty {
      list-style:none;
      padding:18px;
      color:#475467;
      background:#fff;
      border-radius:14px;
      text-align:center;
    }
    .pagination-row {
      display:grid;
      grid-template-columns:minmax(84px, auto) 1fr minmax(84px, auto);
      align-items:center;
      gap:10px;
      margin-top:12px;
    }
    .pagination-row > button {
      min-height:48px;
      min-width:84px;
      width:auto;
    }
    .pagination-row > #rating-page {
      min-width:0;
      text-align:center;
      overflow-wrap:anywhere;
      font-size:clamp(11px, 2.8vw, 13px);
      line-height:1.2;
    }
    .main-screen {
      min-height:auto;
      display:grid;
      grid-template-rows:auto auto;
      align-content:start;
      gap:clamp(18px, 3vw, 30px);
      padding-bottom:92px;
    }
    .home-intro {
      width:100%;
      display:grid;
      gap:16px;
    }
    .home-intro .brand-row {
      margin-bottom:0;
    }
    .home-intro .logo-banner {
      min-height:clamp(248px, 42vw, 392px);
      padding:clamp(24px, 5vw, 40px);
      border-radius:24px;
      display:grid;
      align-content:center;
      gap:clamp(22px, 4vw, 34px);
    }
    .home-logo-row {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .home-logo-row.secondary {
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:clamp(18px, 3.6vw, 32px);
      align-items:center;
      justify-items:center;
      width:100%;
    }
    .home-logo-card {
      width:100%;
      min-height:58px;
      display:grid;
      place-items:center;
    }
    .home-logo-card img {
      width:auto;
      max-width:100%;
      max-height:56px;
      object-fit:contain;
    }
    .home-intro .partner-logo {
      max-height:clamp(104px, 18vw, 142px);
    }
    .home-intro .partner-logo.left {
      width:min(270px, 56%);
    }
    .home-intro .partner-logo.right {
      width:min(206px, 40%);
    }
    .main-rating-card {
      overflow:hidden;
    }
    .role-actions {
      width:100%;
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      padding:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
      z-index:1;
    }
    #rating-entry {
      grid-column:1 / -1;
      min-height:112px;
    }
    .role-actions button {
      min-height:128px;
      border-radius:var(--button-radius);
      font-size:clamp(22px, 4.2vw, 28px);
      font-weight:900;
      line-height:1.05;
      letter-spacing:0;
    }
    .account-profile {
      display:grid;
      gap:12px;
    }
    .account-home-button {
      min-height:50px;
      border-radius:var(--button-radius);
      background:linear-gradient(180deg, #ff5e6c 0%, var(--brand-red) 100%);
      color:#fff;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.30),
        inset 0 -2px 0 rgba(0,0,0,.10),
        0 12px 24px rgba(239,63,77,.28);
      text-align:center;
      font-weight:700;
      letter-spacing:-.005em;
      transition:transform var(--dur-fast, 120ms) var(--ease-out, ease), box-shadow var(--dur-base, 180ms) var(--ease-out, ease), filter var(--dur-base, 180ms) var(--ease-out, ease);
      -webkit-tap-highlight-color:transparent;
      position:relative;
    }
    .account-home-button::before {
      content:"";
      width:18px;
      height:18px;
      margin-right:8px;
      background:currentColor;
      mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 10v10h14V10'/><path d='M9 20v-6h6v6'/></svg>") center/contain no-repeat;
      -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5'/><path d='M5 10v10h14V10'/><path d='M9 20v-6h6v6'/></svg>") center/contain no-repeat;
      display:inline-block;
      vertical-align:-3px;
      opacity:.95;
    }
    .account-home-button:hover { filter:brightness(1.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.30), inset 0 -2px 0 rgba(0,0,0,.10), 0 16px 32px rgba(239,63,77,.36); }
    .account-home-button:active { transform:scale(.97); box-shadow:inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(0,0,0,.18), 0 6px 14px rgba(239,63,77,.30); filter:brightness(.95); }
    .account-home-button:focus-visible { outline:3px solid rgba(255,255,255,.65); outline-offset:2px; }
    .account-nav-row {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .account-nav-row:has(> :only-child) { grid-template-columns:1fr; }
    .account-nav-button {
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:50px;
      text-decoration:none;
      border-radius:var(--button-radius);
      background:linear-gradient(180deg, #16305a 0%, var(--navy-base) 100%);
      color:#fff;
      text-align:center;
      font-weight:700;
      letter-spacing:-.005em;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        inset 0 -2px 0 rgba(0,0,0,.18),
        0 10px 22px rgba(7,26,68,.28);
      transition:transform var(--dur-fast, 120ms) var(--ease-out, ease), box-shadow var(--dur-base, 180ms) var(--ease-out, ease), filter var(--dur-base, 180ms) var(--ease-out, ease);
      -webkit-tap-highlight-color:transparent;
    }
    .account-nav-button:hover { filter:brightness(1.10); box-shadow:inset 0 1px 0 rgba(255,255,255,.20), inset 0 -2px 0 rgba(0,0,0,.18), 0 14px 28px rgba(7,26,68,.36); }
    .account-nav-button:active { transform:scale(.97); box-shadow:inset 0 1px 0 rgba(255,255,255,.15), inset 0 -1px 0 rgba(0,0,0,.22), 0 6px 14px rgba(7,26,68,.30); filter:brightness(.95); }
    .account-nav-button:focus-visible { outline:3px solid rgba(255,255,255,.55); outline-offset:2px; }
    .judge-session-nav {
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:8px;
    }
    .judge-session-nav a, .judge-session-nav button {
      flex:1 1 auto;
      min-height:44px;
    }
    .workout-choice {
      display:grid;
      gap:10px;
      margin:12px 0;
    }
    .workout-choice-buttons {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
    }
    .workout-choice-buttons button {
      background:#fff;
      color:var(--ink);
      border:1px solid #E2E8F0;
      box-shadow:none;
    }
    .workout-choice-buttons button.is-selected {
      background:var(--brand-red);
      color:#fff;
      border-color:var(--brand-red);
      box-shadow:0 12px 28px rgba(215,75,80,.26);
    }
    .workout-description {
      display:grid;
      gap:8px;
      padding:14px;
      border-radius:16px;
      background:#fffafa;
      border:1px solid #e6d4d2;
      color:#2f3b52;
      font-size:14px;
      line-height:1.5;
      font-weight:700;
    }
    .workout-description strong {
      color:#7a1f2b;
      font-weight:900;
    }
    .workout-description > strong:first-child {
      color:#2f3b52;
      font-size:17px;
      line-height:1.3;
    }
    .workout-description p:first-of-type {
      color:#657089;
      font-weight:800;
    }
    .workout-description ul {
      margin:0;
      padding-left:18px;
    }
    .workout-description li { margin:2px 0; }
    .workout-description p {
      margin:0;
    }
    .workout-description[hidden] {
      display:none;
    }
    .stage {
      min-height:calc(100vh - 78px);
      display:grid;
      place-items:start center;
    }
    .app-shell {
      width:min(430px, 100%);
      background:#fff;
      border-radius:28px;
      overflow:hidden;
      box-shadow:0 30px 70px rgba(90,8,14,.32);
      border:1px solid rgba(255,255,255,.7);
    }
    .brand-hero {
      position:relative;
      min-height:260px;
      padding:24px 22px 26px;
      color:#fff;
      background:var(--app-navy-gradient);
    }
    .brand-hero.is-compact {
      min-height:206px;
      padding-bottom:20px;
    }
    .brand-hero.is-compact .logo-strip {
      margin-bottom:18px;
    }
    .brand-hero p { color:rgba(255,255,255,.84); font-weight:700; }
    .brand-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; }
    .logo-strip {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:clamp(12px, 3vw, 24px);
      margin-bottom:28px;
      min-height:clamp(58px, 15vw, 78px);
    }
    .partner-logo {
      display:block;
      object-fit:contain;
      width:clamp(82px, 28%, 132px);
      height:clamp(38px, 9vw, 64px);
      filter:drop-shadow(0 8px 18px rgba(102,12,18,.18));
    }
    .partner-logo.left,
    .partner-logo.center,
    .partner-logo.right { object-position:center; }
    .logo-banner {
      background:linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-soft) 100%);
      border-radius:22px;
      padding:16px 18px;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
    }
    .brand-text { text-transform:uppercase; font-weight:900; font-size:13px; line-height:1.05; color:#fff; }
    .brand-mark {
      width:66px;
      height:66px;
      border:5px solid #fff;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:#fff;
      font-size:20px;
      font-weight:900;
      letter-spacing:0;
      line-height:1;
    }
    .hero-title { font-size:42px; line-height:.96; margin:0 0 14px; color:#fff; }
    .hero-subtitle { margin:0; }
    .hero-pill {
      min-width:auto;
      background:var(--brand-red);
      color:#fff;
      border:1px solid rgba(255,255,255,.45);
      box-shadow:0 12px 26px rgba(15,23,42,.18);
    }
    .brand-hero .hero-pill {
      background:rgba(255,255,255,.16);
      color:#fff;
      border-color:rgba(255,255,255,.7);
      box-shadow:none;
    }
    .page-discipline-pill {
      width:auto;
      justify-self:start;
      margin:0 0 14px;
    }
    .home-intro .page-discipline-pill {
      justify-self:center;
      margin:0;
      padding:9px 20px;
      background:rgba(255,255,255,.16);
      border-color:rgba(255,255,255,.68);
      box-shadow:none;
    }
    .form-card { border-radius:0; box-shadow:none; border:0; padding:20px; }
    .form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
    .form-grid .wide { grid-column:1 / -1; }
    .date-picker {
      position:relative;
      display:grid;
      gap:7px;
      font-size:13px;
      color:#384052;
      font-weight:700;
    }
    .date-picker input[type="hidden"] { display:none; }
    .date-trigger {
      width:100%;
      min-height:48px;
      padding:12px 48px 12px 14px;
      border:1px solid #E2E8F0;
      border-radius:14px;
      background:linear-gradient(180deg, #fff 0%, var(--cream) 100%);
      color:#253046;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font:inherit;
      font-weight:800;
      box-shadow:none;
      position:relative;
    }
    .date-trigger::before {
      content:"";
      position:absolute;
      right:18px;
      top:50%;
      width:10px;
      height:10px;
      transform:translateY(-50%);
      background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23344054' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") no-repeat center / contain;
      pointer-events:none;
      z-index:1;
    }
    .date-trigger:hover,
    .date-trigger.is-open {
      border-color:var(--brand-red);
      box-shadow:0 0 0 3px rgba(215,75,80,.16);
    }
    .date-trigger-value {
      color:#253046;
      font-weight:800;
    }
    .calendar-popover {
      position:absolute;
      top:calc(100% + 8px);
      left:0;
      z-index:8;
      width:min(320px, calc(100vw - 48px));
      padding:12px;
      border-radius:20px;
      background:#fff;
      border:1px solid #e6d4d2;
      box-shadow:0 24px 46px rgba(15,23,42,.22);
      display:grid;
      gap:10px;
      opacity:0;
      transform:translateY(-6px) scale(.985);
      transform-origin:top center;
      transition:opacity .16s ease, transform .16s ease;
    }
    .calendar-popover[hidden] { display:none; }
    .calendar-popover.is-open {
      opacity:1;
      transform:translateY(0) scale(1);
    }
    .calendar-toolbar {
      display:grid;
      grid-template-columns:40px 1fr 40px;
      align-items:center;
      gap:10px;
    }
    .calendar-nav {
      min-height:42px;
      padding:0;
      display:grid;
      place-items:center;
      border-radius:14px;
      background:var(--cream);
      color:var(--brand-red-dark);
      box-shadow:none;
      border:1px solid #e6d4d2;
      font-size:20px;
    }
    .calendar-title {
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(0, .86fr);
      gap:8px;
      align-items:center;
    }
    .calendar-period-toggle,
    .calendar-year-toggle {
      min-height:44px;
      padding:8px 10px;
      border:1px solid #e6d4d2;
      border-radius:12px;
      background:var(--cream);
      color:#344054;
      box-shadow:none;
      font-size:14px;
      font-weight:900;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      transition:background .16s ease, color .16s ease, border-color .16s ease;
    }
    .calendar-period-toggle.is-active,
    .calendar-year-toggle.is-active {
      background:var(--brand-red);
      border-color:var(--brand-red);
      color:#fff;
    }
    .calendar-month-grid,
    .calendar-year-grid {
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:6px;
      padding-top:2px;
    }
    .calendar-month-grid[hidden],
    .calendar-year-grid[hidden] { display:none; }
    .calendar-month-option,
    .calendar-year {
      min-height:38px;
      padding:0 6px;
      border-radius:12px;
      background:#fff;
      color:#344054;
      box-shadow:none;
      border:1px solid #e6d4d2;
      font-size:13px;
      font-weight:800;
    }
    .calendar-month-option.is-selected,
    .calendar-year.is-selected {
      background:var(--brand-red);
      border-color:var(--brand-red);
      color:#fff;
    }
    .calendar-year-range {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
    }
    .calendar-range-label {
      font-size:12px;
      color:#7d4a51;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .calendar-weekdays,
    .calendar-grid {
      display:grid;
      grid-template-columns:repeat(7, minmax(0, 1fr));
      gap:4px;
    }
    .calendar-weekdays[hidden],
    .calendar-grid[hidden] { display:none; }
    .calendar-weekdays span {
      text-align:center;
      font-size:10px;
      font-weight:900;
      color:#7d4a51;
      text-transform:uppercase;
    }
    .calendar-day {
      min-height:40px;
      padding:0;
      display:grid;
      place-items:center;
      border-radius:14px;
      background:#fff;
      color:#344054;
      box-shadow:none;
      border:1px solid transparent;
      font-size:14px;
      font-weight:800;
    }
    .calendar-day:hover {
      background:#FDF2F2;
      color:var(--brand-red-dark);
      border-color:#e6d4d2;
    }
    .calendar-day.is-today {
      border-color:#e6d4d2;
      color:var(--brand-red-dark);
    }
    .calendar-day.is-selected {
      background:var(--brand-red);
      color:#fff;
      border-color:var(--brand-red);
      box-shadow:0 10px 22px rgba(215,75,80,.22);
    }
    .calendar-day.is-outside {
      color:#c8a8ae;
    }
    .calendar-day:disabled {
      cursor:default;
      opacity:.45;
      color:#c8a8ae;
      background:#fff;
      border-color:transparent;
      box-shadow:none;
    }
    .consent-item {
      display:grid;
      grid-template-columns:22px 1fr;
      align-items:start;
      gap:10px;
      padding:11px 12px;
      border:1px solid #e6d4d2;
      border-radius:14px;
      background:#fffafa;
      font-weight:800;
    }
    .consent-card {
      border:1px solid #e6d4d2;
      border-radius:16px;
      background:#fffafa;
      overflow:hidden;
    }
    .consent-card summary {
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:12px;
      padding:13px 14px;
      cursor:pointer;
      font-weight:900;
      color:#30384b;
      list-style:none;
      line-height:1.4;
    }
    .consent-card summary::-webkit-details-marker { display:none; }
    .consent-card summary::after {
      content:"Открыть";
      color:var(--brand-red);
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .consent-card[open] summary::after { content:"Свернуть"; }
    .consent-card:has(input[type="checkbox"]:checked) {
      border-color:#16a34a;
      background:#f0fdf4;
      box-shadow:0 0 0 1px #16a34a inset;
    }
    .consent-card:has(input[type="checkbox"]:checked) summary {
      color:#15803d;
    }
    .consent-card:has(input[type="checkbox"]:checked) summary::after {
      content:"✓ Подписано";
      color:#15803d;
    }
    .consent-card[open]:has(input[type="checkbox"]:checked) summary::after {
      content:"✓ Подписано · Свернуть";
    }
    .consent-card:has(input[type="checkbox"]:checked) .consent-confirm {
      background:#dcfce7;
      border-color:#16a34a;
      color:#15803d;
    }
    .consent-body {
      border-top:1px solid #e6d4d2;
      padding:12px;
      display:grid;
      gap:12px;
      background:#fff;
    }
    .consent-text {
      max-height:320px;
      overflow:auto;
      padding:12px;
      border:1px solid #e6d4d2;
      border-radius:14px;
      background:#fff;
      display:grid;
      gap:8px;
      color:#475467;
      overflow-wrap:anywhere;
    }
    .consent-text p { margin:0; font-size:13px; line-height:1.45; color:#475467; }
    .consent-confirm {
      display:grid;
      grid-template-columns:22px 1fr;
      align-items:start;
      gap:10px;
      padding:10px 12px;
      border-radius:13px;
      background:var(--cream);
    }
    .age-status {
      grid-column:1 / -1;
      margin:-2px 0 0;
      padding:9px 12px;
      border-radius:13px;
      background:var(--cream);
      color:#B03D42;
      font-size:13px;
      font-weight:900;
    }
    .age-status.ok { background:#ecfdf3; color:#087443; }
    .guardian-panel {
      display:none;
      gap:12px;
      padding:14px;
      border-radius:18px;
      border:1px solid #e6d4d2;
      background:#fff7f8;
    }
    .guardian-panel.is-visible { display:grid; }
    .guardian-panel label,
    .reg-step .form-grid label,
    .reg-step > label,
    .reg-step .consent-confirm > span,
    .reg-step .consent-card summary {
      color:#1457C8;
    }
    .guardian-note { margin:0; color:#B03D42; font-weight:800; }
    .result-panel { margin:0 20px 20px; }
    .metric-card {
      position:relative;
      overflow:hidden;
      padding-left:20px;
    }
    .metric-card::before {
      content:"";
      position:absolute;
      left:0;
      top:12px;
      bottom:12px;
      width:3px;
      border-radius:3px;
      background:linear-gradient(180deg, var(--brand-red) 0%, var(--brand-red-dark) 100%);
    }
    .desktop-panel { background:rgba(255,255,255,.96); border-radius:24px; padding:22px; box-shadow:0 22px 55px rgba(92,9,15,.2); }
    .desktop-panel > h1, .desktop-panel > p { color:var(--ink); }
    .legal-panel {
      max-width:980px;
      margin-inline:auto;
    }
    .legal-panel h1 {
      max-width:900px;
      font-size:clamp(28px, 5vw, 56px);
      line-height:1.04;
    }
    .legal-panel .card {
      display:grid;
      gap:14px;
    }
    .legal-meta {
      margin:0;
      padding:12px 14px;
      border-radius:14px;
      background:#fffafa;
      border:1px solid var(--line);
      overflow-wrap:anywhere;
      color:#475467;
    }
    .support-footer {
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:6;
      min-height:38px;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:10px 16px calc(10px + env(safe-area-inset-bottom));
      background:rgba(252,246,245,.94);
      border-top:1px solid rgba(230,212,210,.9);
      color:#B03D42;
      font-size:13px;
      line-height:1.3;
      font-weight:800;
      text-align:center;
      box-shadow:0 -10px 24px rgba(15,23,42,.12);
      backdrop-filter:blur(10px);
      overflow-wrap:anywhere;
      white-space:normal;
    }
    .participant-table-wrap {
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      border-radius:16px;
      background:#fff;
    }
    .participant-table-wrap table { min-width:560px; box-shadow:none; }
    .participant-table-wrap th,
    .participant-table-wrap td { padding:9px 10px; font-size:14px; line-height:1.35; }
    .participant-table-wrap th { font-size:13px; }
    @media (max-width: 720px) {
      header { align-items:flex-start; }
      nav { gap:6px; }
      nav a { min-height:44px; font-size:13px; padding:8px 11px; }
      nav a[aria-current="page"]::after { left:11px; right:11px; }
      main { padding:14px 10px calc(88px + env(safe-area-inset-bottom)); }
      .app-shell { border-radius:20px; }
      .hero-title { font-size:36px; }
      .form-grid { grid-template-columns:1fr; }
      .role-actions button { min-height:118px; font-size:24px; }
      #rating-entry { min-height:88px; }
      .rating-controls { grid-template-columns:1fr 1fr; padding:12px; gap:9px; }
      .rating-controls label { gap:5px; font-size:12px; }
      .rating-controls input,
      .rating-controls select { padding:10px 12px; min-height:48px; font-size:16px; }
      .rating-mode-buttons { grid-template-columns:1fr; }
      .rating-mode-buttons button { min-height:50px; font-size:13px; }
      .logo-strip { gap:10px; min-height:54px; }
      .logo-strip .partner-logo { width:31%; height:46px; }
      #rating-participants-block { overflow:visible; box-shadow:none; background:transparent; border-radius:0; padding:0; }
      #rating-participants-block table { display:none; }
      .rating-cards {
        display:grid;
        gap:12px;
        list-style:none;
        margin:0;
        padding:0;
      }
      .rating-card {
        background:#fff;
        border:1px solid var(--line);
        border-radius:16px;
        padding:14px;
        box-shadow:0 12px 28px rgba(15,23,42,.10);
        display:grid;
        gap:10px;
        min-width:0;
      }
      .rating-card-top {
        display:flex;
        align-items:center;
        gap:10px;
        flex-wrap:wrap;
        min-width:0;
      }
      .rating-card-place {
        flex:0 0 auto;
        min-width:36px;
        padding:4px 10px;
        background:var(--brand-red);
        color:#fff;
        border-radius:999px;
        font-weight:900;
        font-size:14px;
        text-align:center;
        font-variant-numeric:tabular-nums;
      }
      .rating-card-id {
        flex:1 1 auto;
        font-weight:800;
        color:#20314f;
        font-size:14px;
        overflow-wrap:anywhere;
        min-width:0;
      }
      .rating-card-result {
        flex:0 0 auto;
        font-weight:900;
        color:var(--brand-red);
        font-size:15px;
        font-variant-numeric:tabular-nums;
      }
      .rating-card-name {
        font-size:16px;
        font-weight:800;
        color:#101828;
        line-height:1.2;
        overflow-wrap:anywhere;
      }
      .rating-card-meta {
        margin:0;
        display:grid;
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:6px 12px;
      }
      .rating-card-meta > div { display:grid; gap:2px; min-width:0; }
      .rating-card-meta dt {
        font-size:11px;
        text-transform:uppercase;
        letter-spacing:.04em;
        color:#6b7280;
        font-weight:700;
        margin:0;
      }
      .rating-card-meta dd {
        margin:0;
        font-size:13px;
        font-weight:600;
        color:#1f2937;
        overflow-wrap:anywhere;
      }
      .rating-card.is-focused {
        border-color:var(--brand-red);
        box-shadow:0 0 0 2px var(--brand-red), 0 14px 32px rgba(215,75,80,.20);
      }
      .rating-card.is-neighbor { background:#fffbfb; }
      .judge-arena { padding:16px; gap:14px; border-radius:22px; }
      .timer-display { font-size:clamp(54px, 18vw, 84px); }
      .timer-button { min-height:64px; border-radius:var(--button-radius); }
      .judge-primary-actions { gap:10px; }
      .judge-action-button { min-height:112px; border-radius:var(--button-radius); padding:12px 8px; }
      /* parity with .is-no — was 82px which made "зачтено" smaller than "не зачтено"
       * and biased judge attention toward the negative verdict. */
      .judge-action-button.is-good { min-height:112px; }
      .judge-action-icon { width:36px; height:36px; font-size:30px; }
      .judge-action-label { font-size:clamp(18px, 5.4vw, 24px); line-height:1.05; }
      .judge-action-button.is-warning .judge-action-label { font-size:clamp(15px, 4.5vw, 20px); }
      .judge-score-counters { border-radius:16px; }
      .judge-counter { padding:9px 5px; }
      .penalty-actions.is-utility button,
      .judge-secondary-actions button { font-size:14px; line-height:1.15; }
      .support-footer { min-height:42px; padding:9px 12px; font-size:12px; line-height:1.45; }
      .support-footer { backdrop-filter:none; }
      .calendar-nav,
      .calendar-period-toggle,
      .calendar-year-toggle,
      .calendar-day,
      .calendar-month-option,
      .calendar-year { min-height:48px; }
      .rating-table-wrap,
      .consent-text { -webkit-overflow-scrolling:touch; }
      .pagination-row {
        grid-template-columns:minmax(84px, auto) 1fr minmax(84px, auto);
        gap:8px;
      }
      .pagination-row > #rating-page {
        white-space:normal;
        overflow-wrap:anywhere;
        text-align:center;
        line-height:1.2;
        padding:6px 8px;
        font-size:clamp(11px, 2.8vw, 13px);
      }
      .pagination-row > button {
        min-height:48px;
        min-width:84px;
        width:auto;
        padding:10px 10px;
        font-size:14px;
      }
      .participant-table-wrap table { min-width:520px; }
    }
    @media (max-width: 520px) {
      .main-screen { gap:14px; }
      .home-intro .logo-banner {
        min-height:auto;
        padding:20px 16px;
        gap:18px;
      }
      .home-logo-row {
        gap:12px;
      }
      .home-logo-row.secondary {
        gap:14px;
      }
      .home-intro .partner-logo {
        max-height:86px;
      }
      .role-actions {
        grid-template-columns:1fr;
        gap:10px;
      }
      .rating-controls {
        grid-template-columns:1fr;
      }
      .rating-logo-banner .page-discipline-pill {
        width:100%;
        justify-self:stretch;
      }
      #rating-entry {
        grid-column:auto;
      }
      .role-actions button,
      #rating-entry {
        min-height:82px;
        font-size:22px;
      }
    }

    :root {
      /* Brand colors */
      --navy-base:#071A44;
      --navy-dark:#04102D;
      --navy-mid:#0B2D68;
      --blue-accent:#1457C8;
      --light-bg:#F4F7FB;
      --card-bg:#FFFFFF;
      --soft-border:#E6ECF4;
      --muted-text:#6B7890;
      --primary-red:#EF3F4D;
      --primary-red-pressed:#D93240;
      --success-green:#22A06B;
      --warning-yellow:#F6C344;
      --warning-amber:#F09F2A;
      --info-blue:#1E7AE0;
      --action-purple:#7357D9;
      --text-primary:#0B1A33;
      --brand-navy:var(--navy-base);
      --brand-navy-soft:var(--navy-mid);
      --brand-red:var(--primary-red);
      --brand-red-dark:var(--primary-red-pressed);
      --brand-red-deep:#B92835;
      --cream:#F4F7FB;
      --ink:var(--text-primary);
      --muted:var(--muted-text);
      --line:var(--soft-border);
      --bg:var(--light-bg);
      /* Type scale */
      --text-xs:11px;
      --text-sm:12px;
      --text-base:14px;
      --text-md:15px;
      --text-lg:17px;
      --text-xl:clamp(20px, 2.4vw, 24px);
      --text-2xl:clamp(24px, 3.4vw, 32px);
      --text-3xl:clamp(30px, 5vw, 44px);
      /* Spacing scale (4-base) */
      --space-1:4px;
      --space-2:8px;
      --space-3:12px;
      --space-4:16px;
      --space-5:20px;
      --space-6:24px;
      --space-8:32px;
      --space-10:40px;
      --space-12:48px;
      /* Radius scale */
      --radius-sm:10px;
      --radius-md:14px;
      --radius-lg:20px;
      --radius-pill:999px;
      --button-radius:var(--radius-md);
      /* Elevation ramp */
      --elev-1:0 1px 2px rgba(7,26,68,.05), 0 1px 1px rgba(7,26,68,.04);
      --elev-2:0 6px 14px rgba(7,26,68,.08), 0 2px 4px rgba(7,26,68,.04);
      --elev-3:0 18px 38px rgba(7,26,68,.14), 0 6px 12px rgba(7,26,68,.06);
      --elev-4:0 28px 56px rgba(7,26,68,.22), 0 10px 24px rgba(7,26,68,.10);
      --shadow-card:var(--elev-3);
      --shadow-soft:var(--elev-2);
      /* Motion */
      --ease-out:cubic-bezier(.16, 1, .3, 1);
      --dur-fast:120ms;
      --dur-base:180ms;
      --app-navy-gradient:radial-gradient(circle at 74% 20%, rgba(20,87,200,.62), transparent 34%), linear-gradient(180deg, var(--navy-base) 0%, var(--navy-dark) 100%);
      /* Shared screen backdrops — modelled on the rating screen (smooth navy→light melt). */
      --rating-screen-gradient:radial-gradient(360px 240px at 82% -30px, rgba(20,87,200,.30), transparent 72%), linear-gradient(180deg, var(--navy-base) 0px, var(--navy-base) 96px, var(--navy-mid) 160px, #4d6ea6 212px, #b4c4e0 262px, var(--light-bg) 312px, var(--light-bg) 100%);
      /* Smooth monotonic darken (no navy-mid bulge — the bulge read as a horizontal
         seam below the header). Soft top-right glow for depth, fades radially. */
      --judge-screen-gradient:radial-gradient(440px 320px at 80% -40px, rgba(20,87,200,.26), transparent 70%), linear-gradient(180deg, var(--navy-base) 0%, var(--navy-base) 20%, var(--navy-dark) 100%);
    }
    /* Global focus-visible — keyboard a11y */
    :where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
      outline:2px solid var(--blue-accent);
      outline-offset:2px;
      border-radius:var(--radius-sm);
    }
    body {
      background:radial-gradient(circle at 50% 0%, #eef5ff 0%, var(--light-bg) 45%, #eef3f9 100%);
      color:var(--text-primary);
      padding-bottom:0;
      -webkit-font-smoothing:antialiased;
    }

    /* === Tier A Apple-style polish (2026-05-24) === */
    @media (max-width: 768px) {
      .desktop-panel.geo-section { display:none; }
    }
    .rating-card { padding:var(--space-4); border-radius:var(--radius-lg); gap:var(--space-3); box-shadow:var(--elev-1); transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
    .rating-card:hover { box-shadow:var(--elev-2); transform:translateY(-1px); }
    .rating-card-top { grid-template-columns:44px 1fr auto; gap:var(--space-4); }
    .rating-card-place {
      width:30px; height:30px;
      background:#F4F7FB;
      color:var(--navy-base);
      font-size:var(--text-md);
      border:1px solid var(--soft-border);
    }
    .rating-card-name { font-size:var(--text-lg); font-weight:700; letter-spacing:-.01em; }
    .rating-card-id { font-size:var(--text-sm); font-weight:600; color:var(--muted-text); }
    .rating-card-result {
      font-size:var(--text-2xl);
      font-weight:800;
      color:var(--primary-red);
      letter-spacing:-.02em;
      font-variant-numeric:tabular-nums;
    }
    .rating-card-meta dt { font-size:var(--text-xs); color:var(--muted-text); font-weight:600; }
    .rating-card-meta dd { font-size:13px; color:var(--text-primary); font-weight:600; }
    /* Floating tab bar press feedback */
    .bottom-tabbar a { transition:transform .12s ease, background-color .15s ease; }
    .bottom-tabbar a:active { transform:scale(.94); }
    /* Apple-style button press */
    button, .btn, .primary-button, .secondary-button {
      transition:transform .12s ease, filter .15s ease, box-shadow .15s ease;
    }
    button:active, .btn:active { transform:scale(.97); }
    /* age-status: iOS info chip instead of green debug bar */
    .age-status {
      padding:10px 14px;
      border-radius:12px;
      background:#EEF4FF;
      color:var(--navy-mid);
      font-size:12px;
      font-weight:700;
      border:1px solid rgba(20,87,200,.12);
    }
    .age-status.ok {
      background:#EEF4FF;
      color:var(--navy-mid);
    }
    /* rating-card-top: ensure place circle aligns */
    .rating-card-top { align-items:center; }
    /* === end Tier A === */

    /* === Tier B Apple-style component system (2026-05-24) === */
    .ios-card {
      background:#fff;
      border-radius:var(--radius-lg);
      padding:var(--space-5);
      box-shadow:var(--elev-2);
      border:1px solid rgba(230,236,244,.7);
      transition:box-shadow var(--dur-base) var(--ease-out);
    }
    .ios-card:hover { box-shadow:var(--elev-3); }
    .ios-input {
      min-height:56px;
      width:100%;
      border:1.5px solid var(--soft-border);
      border-radius:14px;
      padding:14px 16px;
      font-size:16px;
      background:#fff;
      color:var(--text-primary);
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .ios-input:focus {
      border-color:var(--blue-accent);
      box-shadow:0 0 0 3px rgba(20,87,200,.16);
    }
    .filter-pill {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border:0;
      border-radius:999px;
      padding:8px 16px;
      font-size:13px;
      font-weight:700;
      cursor:pointer;
      background:#F0F4FA;
      color:var(--navy-base);
      transition:background-color .15s ease, color .15s ease, transform .12s ease;
    }
    .filter-pill.active {
      background:var(--navy-base);
      color:#fff;
    }
    .filter-pill:active { transform:scale(.96); }
    .primary-btn {
      width:100%;
      min-height:56px;
      border:0;
      border-radius:16px;
      padding:14px 20px;
      background:var(--primary-red);
      color:#fff;
      font-size:17px;
      font-weight:800;
      cursor:pointer;
      box-shadow:0 12px 28px rgba(239,63,77,.26);
      transition:transform .12s ease, filter .15s ease, box-shadow .15s ease;
    }
    .primary-btn:hover { filter:brightness(1.04); }
    .primary-btn:active { transform:scale(.97); }
    .primary-btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
    .secondary-btn {
      width:100%;
      min-height:48px;
      border:0;
      border-radius:16px;
      padding:12px 18px;
      background:#F0F4FA;
      color:var(--navy-base);
      font-size:15px;
      font-weight:700;
      cursor:pointer;
      transition:transform .12s ease, background-color .15s ease;
    }
    .secondary-btn:hover { background:#E2EAF5; }
    .secondary-btn:active { transform:scale(.97); }
    .sex-segment {
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      padding:4px;
      background:#F0F4FA;
      border-radius:14px;
    }
    .sex-segment button {
      min-height:44px;
      border:0;
      border-radius:10px;
      padding:10px 12px;
      background:transparent;
      color:var(--navy-base);
      font-size:15px;
      font-weight:700;
      cursor:pointer;
      transition:background-color .15s ease, color .15s ease, transform .12s ease;
    }
    .sex-segment button.active {
      background:var(--navy-base);
      color:#fff;
      box-shadow:0 6px 14px rgba(7,26,68,.18);
    }
    .sex-segment button:active { transform:scale(.97); }
    .reg-step { display:grid; gap:var(--space-4); position:relative; padding-left:var(--space-4); }
    .reg-step[hidden] { display:none; }
    .reg-step::before {
      content:"";
      position:absolute;
      left:0;
      top:8px;
      bottom:8px;
      width:3px;
      border-radius:3px;
      background:linear-gradient(180deg, var(--blue-accent) 0%, var(--navy-mid) 100%);
      opacity:.5;
    }
    .reg-step h3.reg-step-title {
      margin:0 0 var(--space-1);
      font-size:var(--text-xl);
      font-weight:800;
      letter-spacing:-.02em;
      color:var(--text-primary);
      display:flex;
      align-items:baseline;
      gap:var(--space-3);
    }
    .reg-step h3.reg-step-title::before {
      content:attr(data-step);
      font-size:var(--text-sm);
      font-weight:700;
      letter-spacing:.08em;
      color:var(--blue-accent);
      text-transform:uppercase;
    }
    .reg-step-sub {
      margin:0;
      font-size:var(--text-base);
      color:#475467;
      font-weight:500;
      line-height:1.5;
    }
    .reg-nav {
      display:grid;
      grid-template-columns:auto 1fr;
      gap:10px;
      margin-top:8px;
      align-items:center;
    }
    .reg-nav.is-first { grid-template-columns:1fr; }
    .reg-back-link {
      border:0;
      background:transparent;
      color:var(--navy-mid);
      font-size:15px;
      font-weight:700;
      padding:10px 12px;
      cursor:pointer;
      border-radius:12px;
    }
    .reg-back-link:hover { background:#F0F4FA; }
    .reg-region-input { /* cosmetic only — no name attr */ }
    /* === end Tier B === */
    main {
      width:100%;
      max-width:none;
      padding:12px 12px calc(112px + env(safe-area-inset-bottom));
    }
    h1, h2, h3, p { letter-spacing:0; }
    p { color:var(--muted-text); }
    .visually-hidden {
      position:absolute;
      width:1px;
      height:1px;
      overflow:hidden;
      clip:rect(0 0 0 0);
      white-space:nowrap;
    }
    input,
    select,
    textarea,
    .date-trigger {
      min-height:52px;
      border:1px solid var(--soft-border);
      border-radius:15px;
      background:#fff;
      color:var(--text-primary);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
    }
    input::placeholder,
    textarea::placeholder { color:#9AA7BA; }
    input:focus,
    select:focus,
    textarea:focus,
    .date-trigger.is-open {
      border-color:rgba(20,87,200,.42);
      box-shadow:0 0 0 4px rgba(20,87,200,.11);
    }
    button,
    .primary-button {
      min-height:50px;
      border-radius:14px;
      background:linear-gradient(180deg, #ff5664 0%, var(--primary-red) 100%);
      color:#fff;
      font-size:17px;
      font-weight:600;
      letter-spacing:-.01em;
      box-shadow:0 10px 22px rgba(239,63,77,.24);
      transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
    }
    button:hover { background:linear-gradient(180deg, #fb4c5a 0%, var(--primary-red-pressed) 100%); }
    button:active { transform:scale(.97); box-shadow:0 6px 14px rgba(239,63,77,.20); }
    button.secondary,
    .secondary-button {
      background:var(--navy-base);
      color:#fff;
      box-shadow:0 10px 22px rgba(7,26,68,.18);
    }
    .pill {
      min-height:34px;
      border:1px solid rgba(230,236,244,.88);
      background:#fff;
      color:var(--navy-base);
      text-transform:none;
      letter-spacing:0;
      box-shadow:none;
    }
    a.primary-cta {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:100%;
      min-height:50px;
      padding:12px 18px;
      border-radius:14px;
      background:linear-gradient(180deg, #ff5664 0%, var(--primary-red) 100%);
      color:#fff;
      font-size:17px;
      font-weight:700;
      text-decoration:none;
      box-shadow:0 10px 22px rgba(239,63,77,.24);
      transition:transform .12s ease, box-shadow .15s ease;
    }
    a.primary-cta:hover { box-shadow:0 12px 26px rgba(239,63,77,.32); }
    a.primary-cta:active { transform:scale(.97); }
    .stage {
      min-height:auto;
      display:grid;
      justify-items:center;
      align-items:start;
    }
    .app-shell {
      position:relative;
      width:min(430px, 100%);
      min-height:calc(100vh - 24px);
      min-height:calc(100svh - 24px);
      overflow:hidden;
      border-radius:30px;
      background:var(--light-bg);
      border:1px solid rgba(255,255,255,.9);
      box-shadow:0 28px 80px rgba(7,26,68,.20);
      padding-bottom:18px;
    }
    .ios-card,
    .card,
    form,
    .rating-table-wrap,
    .participant-table-wrap {
      background:var(--card-bg);
      border:1px solid rgba(230,236,244,.92);
      border-radius:18px;
      box-shadow:var(--shadow-card);
    }
    .card { padding:18px; }
    .top-brand-header {
      position:relative;
      z-index:1;
      color:#fff;
      background:var(--app-navy-gradient);
      padding:calc(env(safe-area-inset-top) + 18px) 18px 22px;
    }
    .top-brand-header-home {
      padding:calc(env(safe-area-inset-top) + 16px) 18px 18px;
    }
    .top-brand-row {
      min-height:52px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }
    .top-title-block {
      min-width:0;
    }
    .top-title-block h1 {
      margin:0 0 4px;
      color:#fff;
      font-size:clamp(19px, 5.6vw, 24px);
      line-height:1.12;
      font-weight:900;
      overflow-wrap:break-word;
    }
    .top-title-block p {
      margin:0;
      color:rgba(255,255,255,.82);
      font-size:13px;
      line-height:1.25;
      font-weight:700;
      overflow-wrap:break-word;
    }
    .top-brand-lockup {
      display:flex;
      align-items:center;
      gap:12px;
    }
    .top-brand-lockup strong {
      color:#fff;
      font-size:17px;
      line-height:1.18;
      font-weight:700;
      letter-spacing:-.01em;
    }
    .lar-logo-mark {
      width:54px;
      height:54px;
      display:inline-grid;
      place-items:center;
      border-radius:50%;
      border:3px solid rgba(255,255,255,.88);
      color:#fff;
      font-weight:950;
      font-size:13px;
      letter-spacing:0;
      box-shadow:0 10px 22px rgba(0,0,0,.12);
    }
    .notification-button {
      position:relative;
      width:48px;
      height:48px;
      min-height:48px;
      padding:0;
      border-radius:50%;
      background:rgba(255,255,255,.16);
      color:#fff;
      box-shadow:none;
      backdrop-filter:blur(16px);
    }
    .notification-button svg {
      width:21px;
      height:21px;
    }
    .notification-button span {
      position:absolute;
      top:-4px;
      right:-2px;
      width:23px;
      height:23px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:var(--primary-red);
      color:#fff;
      font-size:12px;
      font-weight:900;
      border:2px solid rgba(255,255,255,.66);
    }
    .app-progress {
      display:grid;
      grid-template-columns:1fr 1fr 1fr 1fr;
      gap:12px;
      margin-top:14px;
    }
    .app-progress span {
      height:4px;
      border-radius:999px;
      background:rgba(255,255,255,.28);
    }
    .app-progress span::before {
      content:"";
      display:block;
      width:8px;
      height:8px;
      margin-top:-2px;
      border-radius:50%;
      background:rgba(255,255,255,.38);
    }
    .app-progress span.is-active {
      background:var(--primary-red);
    }
    .app-progress span.is-active::before {
      background:var(--primary-red);
    }
    .bottom-tabbar {
      position:fixed;
      left:50%;
      bottom:calc(10px + env(safe-area-inset-bottom));
      z-index:20;
      width:min(400px, calc(100vw - 20px));
      min-height:70px;
      transform:translateX(-50%);
      display:grid;
      grid-template-columns:repeat(5, minmax(0, 1fr));
      gap:4px;
      align-items:center;
      padding:8px;
      border-radius:28px;
      background:rgba(255,255,255,.78);
      border:.5px solid rgba(255,255,255,.6);
      box-shadow:0 1px 0 rgba(60,60,67,.08), 0 18px 40px rgba(7,26,68,.16);
      backdrop-filter:blur(28px) saturate(1.8);
      -webkit-backdrop-filter:blur(28px) saturate(1.8);
    }
    /* Judge workstation has its own in-page nav (На главный экран / Рейтинг /
       Выйти). The global bottom tab-bar duplicates it and risks mis-taps
       during active judging, so hide it on the judge screen. */
    body:has(.app-shell.judge-app) .bottom-tabbar { display:none; }
    /* Tab-bar is hidden on judge, so drop its bottom-space reserve to remove
       the dead strip below the workstation card. */
    body:has(.app-shell.judge-app) main { padding-bottom:env(safe-area-inset-bottom); }
    .bottom-tabbar a {
      min-width:0;
      min-height:54px;
      display:grid;
      place-items:center;
      gap:3px;
      color:#1C1C1E;
      text-decoration:none;
      border-radius:18px;
      font-size:10px;
      line-height:1.1;
      font-weight:600;
      letter-spacing:-.01em;
      transition:transform .12s ease, background-color .15s ease, color .15s ease;
      -webkit-tap-highlight-color:transparent;
      touch-action:manipulation;
      user-select:none;
      -webkit-user-select:none;
      -webkit-touch-callout:none;
    }
    @media (hover:hover) and (pointer:fine) {
      .bottom-tabbar a:hover { background:rgba(20,87,200,.06); color:var(--navy-base); }
    }
    /* PWA install banner — sits above the bottom tab-bar */
    .pwa-install-banner {
      position:fixed;
      left:50%;
      bottom:calc(96px + env(safe-area-inset-bottom));
      z-index:25;
      width:min(400px, calc(100vw - 20px));
      transform:translateX(-50%);
      display:grid;
      grid-template-columns:44px 1fr auto auto;
      gap:12px;
      align-items:center;
      padding:10px 12px;
      border-radius:22px;
      background:rgba(255,255,255,.92);
      border:.5px solid rgba(255,255,255,.7);
      box-shadow:0 1px 0 rgba(60,60,67,.08), 0 18px 40px rgba(7,26,68,.18);
      backdrop-filter:blur(28px) saturate(1.8);
      -webkit-backdrop-filter:blur(28px) saturate(1.8);
      animation:pwa-install-rise .26s ease-out both;
    }
    @keyframes pwa-install-rise {
      from { opacity:0; transform:translate(-50%, 14px); }
      to   { opacity:1; transform:translate(-50%, 0); }
    }
    .pwa-install-icon {
      width:44px;
      height:44px;
      padding:7px;
      border-radius:12px;
      overflow:hidden;
      background:linear-gradient(180deg, #ff5664 0%, var(--primary-red) 100%);
      border:.5px solid rgba(0,0,0,.06);
      box-shadow:0 4px 10px rgba(239,63,77,.28);
      display:grid;
      place-items:center;
    }
    .pwa-install-icon img { width:100%; height:100%; object-fit:contain; display:block; }
    .pwa-install-body {
      min-width:0;
      display:grid;
      gap:1px;
      line-height:1.18;
    }
    .pwa-install-body strong {
      font-size:14px;
      font-weight:700;
      color:#0B1A33;
      letter-spacing:-.01em;
    }
    .pwa-install-body span {
      font-size:11.5px;
      color:#5C6A85;
      font-weight:500;
      overflow:hidden;
      text-overflow:ellipsis;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
    }
    .pwa-install-action {
      min-height:36px;
      padding:0 14px;
      border-radius:12px;
      background:linear-gradient(180deg, #ff5664 0%, var(--primary-red) 100%);
      color:#fff;
      font-size:13px;
      font-weight:700;
      letter-spacing:-.005em;
      border:0;
      box-shadow:0 6px 14px rgba(239,63,77,.28);
      white-space:nowrap;
    }
    .pwa-install-action:active { transform:scale(.96); }
    .pwa-install-dismiss {
      width:32px;
      height:32px;
      min-height:32px;
      padding:0;
      border-radius:50%;
      background:rgba(11,26,51,.06);
      color:#5C6A85;
      font-size:18px;
      line-height:1;
      border:0;
      display:grid;
      place-items:center;
      box-shadow:none;
    }
    .pwa-install-dismiss:active { transform:scale(.92); }
    /* iOS install instructions overlay */
    .pwa-ios-overlay {
      position:fixed;
      inset:0;
      z-index:60;
      background:rgba(7,17,38,.55);
      backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
      display:grid;
      align-items:end;
      justify-items:center;
      padding:16px;
      animation:pwa-ios-fade .18s ease-out both;
    }
    @keyframes pwa-ios-fade { from { opacity:0; } to { opacity:1; } }
    .pwa-ios-sheet {
      position:relative;
      width:min(420px, 100%);
      padding:22px 22px calc(22px + env(safe-area-inset-bottom));
      border-radius:24px 24px 24px 24px;
      background:#fff;
      box-shadow:0 -12px 40px rgba(7,17,38,.32), 0 24px 60px rgba(7,17,38,.28);
      display:grid;
      gap:16px;
      animation:pwa-ios-rise .24s cubic-bezier(.2,.8,.2,1) both;
    }
    @keyframes pwa-ios-rise {
      from { transform:translateY(40px); opacity:0; }
      to   { transform:translateY(0); opacity:1; }
    }
    .pwa-ios-close {
      position:absolute;
      top:10px;
      right:10px;
      width:34px;
      height:34px;
      min-height:34px;
      border-radius:50%;
      background:rgba(11,26,51,.06);
      color:#5C6A85;
      font-size:20px;
      line-height:1;
      border:0;
      display:grid;
      place-items:center;
      box-shadow:none;
    }
    .pwa-ios-mark {
      width:72px;
      height:72px;
      padding:12px;
      justify-self:center;
      border-radius:20px;
      overflow:hidden;
      background:linear-gradient(180deg, #ff5664 0%, var(--primary-red) 100%);
      border:.5px solid rgba(0,0,0,.06);
      box-shadow:0 10px 22px rgba(239,63,77,.32);
    }
    .pwa-ios-mark img { width:100%; height:100%; object-fit:contain; display:block; }
    .pwa-ios-sheet h2 {
      margin:0;
      text-align:center;
      font-size:18px;
      font-weight:800;
      color:#0B1A33;
      letter-spacing:-.01em;
    }
    .pwa-ios-steps ol {
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:12px;
    }
    .pwa-ios-steps li {
      display:grid;
      grid-template-columns:28px 1fr;
      gap:12px;
      align-items:flex-start;
      padding:12px;
      border-radius:14px;
      background:#F4F7FB;
      font-size:14px;
      line-height:1.4;
      color:#0B1A33;
    }
    .pwa-ios-step-num {
      width:28px;
      height:28px;
      border-radius:50%;
      background:var(--brand-red);
      color:#fff;
      font-weight:800;
      font-size:13px;
      display:grid;
      place-items:center;
    }
    .pwa-ios-share-icon {
      width:18px;
      height:18px;
      vertical-align:-4px;
      color:#1457C8;
    }
    .pwa-ios-note {
      margin:0;
      padding:12px;
      border-radius:14px;
      background:#FDF2F2;
      font-size:14px;
      line-height:1.4;
      color:#7d2b2b;
    }
    .pwa-ios-copy {
      min-height:46px;
      border-radius:14px;
      background:var(--navy-base);
      color:#fff;
      font-size:15px;
      font-weight:700;
      border:0;
    }
    .pwa-ios-copy:active { transform:scale(.97); }
    .bottom-tabbar a:active { transform:scale(.93); }
    .bottom-tabbar a:focus { outline:none; }
    .bottom-tabbar a:focus-visible { outline:2px solid var(--navy-base); outline-offset:2px; }
    .bottom-tabbar svg {
      width:24px;
      height:24px;
    }
    .bottom-tabbar a[aria-current="page"] {
      color:#fff;
      background:linear-gradient(180deg, #ff5664 0%, var(--primary-red) 100%);
      box-shadow:0 8px 18px rgba(239,63,77,.34);
      font-weight:700;
    }
    .hero-rating-card {
      position:relative;
      margin:0 18px;
      min-height:285px;
      display:grid;
      align-content:space-between;
      gap:16px;
      padding:28px 22px 20px;
      overflow:hidden;
      border-radius:22px;
      border:1px solid rgba(255,255,255,.22);
      background:radial-gradient(circle at 82% 62%, rgba(20,87,200,.92), transparent 26%), linear-gradient(145deg, #0B2D68 0%, #071A44 54%, #04102D 100%);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 42px rgba(4,16,45,.24);
      color:#fff;
    }
    .hero-logo-row {
      position:relative;
      z-index:1;
      display:flex;
      justify-content:space-evenly;
      align-items:center;
      gap:18px;
      width:100%;
    }
    .hero-logo-row img {
      flex:0 1 auto;
      width:auto;
      max-width:32%;
      height:38px;
      object-fit:contain;
      object-position:center;
      filter:brightness(0) invert(1) drop-shadow(0 8px 14px rgba(0,0,0,.12));
    }
    .hero-rating-copy {
      position:relative;
      z-index:1;
      display:grid;
      gap:4px;
    }
    .hero-rating-copy p,
    .hero-rating-copy span {
      margin:0;
      color:rgba(255,255,255,.86);
      font-weight:800;
      font-size:18px;
      line-height:1.1;
    }
    .hero-rating-copy h1 {
      margin:0;
      color:#fff;
      font-size:42px;
      line-height:.95;
      font-weight:950;
    }
    .hero-rating-mark {
      position:absolute;
      right:-32px;
      bottom:14px;
      width:220px;
      height:220px;
      object-fit:contain;
      object-position:right center;
      opacity:.14;
      pointer-events:none;
      user-select:none;
      z-index:0;
      filter:drop-shadow(0 0 22px rgba(20,87,200,.5));
    }
    .hero-rating-pill {
      position:relative;
      z-index:1;
      justify-self:center;
      min-height:39px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:0 18px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.52);
      color:#fff;
      font-size:13px;
      font-weight:900;
      letter-spacing:.02em;
      background:rgba(255,255,255,.05);
    }
    .home-app {
      background:
        radial-gradient(360px 240px at 82% -30px, rgba(20,87,200,.30), transparent 72%),
        linear-gradient(180deg,
          var(--navy-base) 0%,
          var(--navy-base) 50%,
          var(--navy-mid) 58%,
          #4d6ea6 63%,
          #b4c4e0 68%,
          var(--light-bg) 75%,
          var(--light-bg) 100%);
      padding-bottom:0;
      display:flex;
      flex-direction:column;
    }
    .home-search-panel {
      position:relative;
      z-index:2;
      margin:-2px 0 0;
      padding:18px 16px calc(28px + env(safe-area-inset-bottom));
      display:grid;
      gap:18px;
      border-radius:28px 28px 0 0;
      background:#F2F2F7;
      box-shadow:0 -10px 34px rgba(4,16,45,.10);
      /* Fill the shell so the sheet's square bottom never exposes a hard cut
         below the (expanded) geography block. align-content:start keeps rows at
         natural height; extra space is plain sheet. */
      flex:1 1 auto;
      align-content:start;
    }
    .home-search-panel label {
      display:grid;
      gap:8px;
      padding:0 4px;
      color:#6E6E73;
      font-size:13px;
      line-height:1.2;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:.04em;
    }
    .home-search-button {
      width:100%;
      min-height:44px;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:8px;
      padding:0 12px;
      border:0;
      border-radius:12px;
      background:rgba(118,118,128,.12);
      color:#8E8E93;
      box-shadow:none;
      font-size:17px;
      font-weight:400;
      letter-spacing:-.01em;
      text-align:left;
      transition:transform .12s ease, background-color .15s ease;
    }
    .home-search-button:hover { background:rgba(118,118,128,.16); }
    .home-search-button:active { transform:scale(.985); background:rgba(118,118,128,.22); }
    .home-search-button svg {
      width:18px;
      height:18px;
      color:#8E8E93;
    }
    .home-filter-list {
      display:grid;
      gap:0;
      border-radius:18px;
      background:#FFFFFF;
      overflow:hidden;
      box-shadow:0 1px 0 rgba(60,60,67,.04);
    }
    .home-filter-row {
      min-height:56px;
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:14px;
      padding:0 16px;
      border:0;
      border-radius:0;
      background:transparent;
      color:#1C1C1E;
      font-size:17px;
      line-height:1.2;
      font-weight:400;
      letter-spacing:-.01em;
      box-shadow:none;
      text-align:left;
      transition:background-color .15s ease, transform .1s ease;
      position:relative;
    }
    .home-filter-row + .home-filter-row::before {
      content:"";
      position:absolute;
      top:0;
      left:50px;
      right:0;
      height:.5px;
      background:rgba(60,60,67,.15);
    }
    .home-filter-row:hover { background:rgba(118,118,128,.06); }
    .home-filter-row:active { background:rgba(118,118,128,.12); }
    .home-filter-row svg {
      width:20px;
      height:20px;
      color:#1457C8;
    }
    .home-filter-row .chevron svg {
      width:14px;
      height:14px;
      color:#C7C7CC;
    }
    a.home-filter-row { text-decoration:none; }
    /* Personal card on home */
    .home-personal {
      margin:14px 18px 16px;
      display:grid;
      gap:10px;
    }
    .home-greeting {
      display:flex;
      align-items:baseline;
      gap:8px;
      padding:0 4px;
      color:#fff;
      text-shadow:0 1px 4px rgba(0,0,0,.28);
    }
    .home-greeting span { font-size:14px; opacity:.85; }
    .home-greeting strong { font-size:18px; font-weight:800; letter-spacing:-.01em; }
    .home-myrank-card {
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:12px;
      padding:14px 16px;
      background:rgba(255,255,255,.96);
      border-radius:18px;
      box-shadow:0 16px 32px rgba(4,16,45,.18);
      min-height:64px;
    }
    .home-myrank-place {
      display:grid;
      place-items:center;
      width:46px;
      height:46px;
      border-radius:50%;
      background:linear-gradient(180deg, #FFD15A 0%, #F0A500 100%);
      color:#3a1f00;
      font-weight:900;
      font-size:16px;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);
    }
    .home-myrank-place.is-silver { background:linear-gradient(180deg, #E6EAF0 0%, #B6BEC9 100%); color:#1a2235; }
    .home-myrank-place.is-bronze { background:linear-gradient(180deg, #E2A78D 0%, #A86B4B 100%); color:#2c1300; }
    .home-myrank-place.is-default { background:#0B2D68; color:#fff; }
    .home-myrank-meta { display:grid; gap:2px; min-width:0; }
    .home-myrank-meta .lbl { font-size:11px; color:#6E6E73; text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
    .home-myrank-meta .name { font-size:15px; font-weight:700; color:#0B1A33; line-height:1.15; }
    .home-myrank-meta .cat { font-size:12px; color:#6E6E73; }
    .home-myrank-result { display:grid; justify-items:end; gap:3px; }
    .home-myrank-result .val { font-size:18px; font-weight:900; color:#0B1A33; font-variant-numeric:tabular-nums; }
    .home-myrank-result .delta { font-size:12px; font-weight:800; display:inline-flex; align-items:center; gap:2px; }
    .delta-up { color:#087443; }
    .delta-down { color:#C14348; }
    .delta-flat { color:#8E8E93; }
    .home-myrank-card.is-empty { grid-template-columns:1fr; text-align:center; color:#6E6E73; font-size:13px; padding:18px 16px; }
    .home-myrank-card.is-empty a { color:var(--primary-red); font-weight:700; text-decoration:none; }
    /* Skeleton */
    .sk { display:inline-block; background:linear-gradient(90deg, #EEF2F7 0%, #DFE6EF 50%, #EEF2F7 100%); background-size:200% 100%; border-radius:6px; animation:sk 1.2s linear infinite; }
    .sk-h { height:14px; margin:3px 0; }
    .sk-square { width:80%; aspect-ratio:1/1; }
    @keyframes sk { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
    /* QR FAB */
    .qr-fab {
      position:fixed;
      right:max(14px, env(safe-area-inset-right));
      bottom:calc(96px + env(safe-area-inset-bottom));
      z-index:25;
      width:58px;
      height:58px;
      min-height:58px;
      padding:0;
      border-radius:50%;
      background:linear-gradient(180deg, #ff5664 0%, var(--primary-red) 100%);
      color:#fff;
      box-shadow:0 14px 28px rgba(239,63,77,.45), 0 0 0 4px rgba(255,255,255,.9);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition:transform .12s ease;
    }
    .qr-fab:active { transform:scale(.92); }
    .qr-fab svg { width:24px; height:24px; }
    /* QR overlay */
    .qr-overlay {
      position:fixed;
      inset:0;
      z-index:50;
      background:rgba(4,16,45,.78);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
      display:grid;
      place-items:center;
      padding:24px;
    }
    .qr-overlay[hidden] { display:none; }
    .qr-overlay-card {
      width:min(360px, 92vw);
      display:grid;
      gap:14px;
      padding:22px;
      background:#fff;
      border-radius:24px;
      box-shadow:0 32px 72px rgba(0,0,0,.4);
    }
    .qr-overlay-title { margin:0; font-size:14px; font-weight:700; color:#0B1A33; text-align:center; }
    .qr-overlay-svg {
      position:relative;
      display:grid;
      place-items:center;
      width:100%;
      aspect-ratio:1/1;
      background:#fff;
      border-radius:16px;
      padding:14px;
    }
    .qr-overlay-svg svg { width:100%; height:auto; display:block; }
    .qr-overlay-svg::before,
    .qr-overlay-svg::after {
      content:"";
      position:absolute;
      inset:0;
      border-radius:16px;
      pointer-events:none;
      box-shadow:0 0 0 0 rgba(239,63,77,.6);
      animation:qrPulse 2.2s ease-out infinite;
    }
    .qr-overlay-svg::after { animation-delay:1.1s; }
    @keyframes qrPulse {
      0% { box-shadow:0 0 0 0 rgba(239,63,77,.55); }
      80% { box-shadow:0 0 0 24px rgba(239,63,77,0); }
      100% { box-shadow:0 0 0 0 rgba(239,63,77,0); }
    }
    /* Corner brackets */
    .qr-overlay-card { position:relative; }
    .qr-corner { position:absolute; width:22px; height:22px; border:3px solid rgba(239,63,77,.85); }
    .qr-corner.tl { top:-4px; left:-4px; border-right:0; border-bottom:0; border-top-left-radius:10px; }
    .qr-corner.tr { top:-4px; right:-4px; border-left:0; border-bottom:0; border-top-right-radius:10px; }
    .qr-corner.bl { bottom:-4px; left:-4px; border-right:0; border-top:0; border-bottom-left-radius:10px; }
    .qr-corner.br { bottom:-4px; right:-4px; border-left:0; border-top:0; border-bottom-right-radius:10px; }
    .qr-overlay-share {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      width:100%;
      padding:12px 14px;
      border-radius:14px;
      background:#0B2D68;
      color:#fff;
      font-size:14px;
      font-weight:800;
      box-shadow:0 8px 18px rgba(11,45,104,.28);
    }
    .qr-overlay-share svg { width:16px; height:16px; }
    .qr-overlay-id { margin:0; text-align:center; font-size:18px; font-weight:900; color:#0B1A33; letter-spacing:.04em; }
    .qr-overlay-close {
      position:absolute;
      top:max(18px, env(safe-area-inset-top));
      right:18px;
      width:42px;
      height:42px;
      min-height:42px;
      padding:0;
      border-radius:50%;
      background:rgba(255,255,255,.18);
      color:#fff;
      font-size:24px;
      font-weight:700;
      backdrop-filter:blur(20px);
      box-shadow:none;
    }
    .home-rating-toggle { display:block; }
    .home-rating-toggle > summary {
      list-style:none;
      cursor:pointer;
    }
    .home-rating-toggle > summary::-webkit-details-marker { display:none; }
    .home-rating-toggle > summary::marker { display:none; content:""; }
    .home-rating-toggle[open] > summary .chevron svg {
      transform:rotate(90deg);
      transition:transform .18s ease;
    }
    .home-rating-toggle > summary .chevron svg {
      transition:transform .18s ease;
    }
    .home-rating-body {
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:6px 16px 18px;
      background:#FFFFFF;
      border-top:.5px solid rgba(60,60,67,.15);
    }
    .home-rating-body .geo-section-header h2 {
      margin:0;
      font-size:17px;
      color:var(--text-primary, var(--ink));
    }
    .home-rating-body .geo-section-sub {
      margin:6px 0 0;
      font-size:13px;
      color:var(--muted);
    }
    .home-rating-body .geo-kpi-row {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
    }
    .home-rating-body .geo-kpi {
      background:#F4F7FB;
      border:1px solid var(--line);
      border-radius:12px;
      padding:10px 12px;
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .home-rating-body .geo-kpi-label { font-size:11px; }
    .home-rating-body .geo-kpi-value { font-size:18px; }
    .home-rating-body .geo-grid {
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
    }
    .home-rating-body .geo-card {
      background:#F4F7FB;
      border:1px solid var(--line);
      border-radius:14px;
      padding:12px 14px;
    }
    .home-rating-body .geo-card h3 {
      margin:0 0 8px;
      font-size:14px;
      color:var(--text-primary, var(--ink));
    }
    .form-card {
      display:grid;
      gap:16px;
      padding:20px;
      border:0;
      border-radius:28px 28px 0 0;
      background:var(--card-bg);
      box-shadow:0 -12px 36px rgba(4,16,45,.12);
    }
    .form-section-title {
      margin:0;
      color:var(--text-primary);
      font-size:15px;
      line-height:1.2;
      font-weight:950;
    }
    .registration-app,
    .participant-app {
      background:var(--rating-screen-gradient);
      display:flex;
      flex-direction:column;
      /* No bottom padding: the white sheet flex-fills to the shell edge. Any
         padding here would expose an unfilled strip of the light melt-tail
         below the opaque sheet (a residual seam line). */
      padding-bottom:0;
    }
    /* Header must be transparent so the app-shell's navy→light melt reads as one
       continuous backdrop. An opaque header gradient here repaints solid navy over
       the melt and produces a hard seam at the header's bottom edge. Mirrors
       `.rating-app .top-brand-header`. */
    .registration-app .top-brand-header,
    .participant-app .top-brand-header {
      background:transparent;
    }
    .registration-app .form-card,
    .participant-app .form-card {
      margin-top:-12px;
      position:relative;
      z-index:2;
      padding-bottom:calc(126px + env(safe-area-inset-bottom));
      /* Stretch the white sheet to fill the shell so short/empty states don't
         expose the light melt-tail below it as a second seam. align-content:start
         keeps the cards at their natural height (the grid rows must not stretch);
         the extra height is pure white sheet below the last card. */
      flex:1 1 auto;
      align-content:start;
    }
    .form-grid { gap:12px; }
    label {
      color:var(--text-primary);
      font-size:13px;
      font-weight:850;
    }
    .workout-choice-buttons {
      gap:12px;
    }
    .workout-choice-buttons button {
      min-height:54px;
      border-radius:15px;
      background:#EEF3F8;
      color:var(--navy-base);
      border:1px solid transparent;
      box-shadow:none;
    }
    .workout-choice-buttons button.is-selected {
      background:linear-gradient(180deg, #0B2D68 0%, var(--navy-base) 100%);
      border-color:rgba(255,255,255,.3);
      color:#fff;
      box-shadow:0 12px 26px rgba(7,26,68,.20);
    }
    .age-status,
    .workout-description,
    .guardian-panel,
    .consent-card,
    .consent-item,
    .consent-confirm {
      border-color:var(--soft-border);
      background:#F8FAFD;
      border-radius:16px;
    }
    .workout-description { color:#344054; }
    .workout-description p { color:#475467; }
    .workout-description p:first-of-type { color:#344054; }
    .consent-card summary,
    .workout-description strong {
      color:#1d2436;
    }
    .result-panel {
      margin:0 20px 22px;
      box-shadow:var(--shadow-soft);
    }
    .qr-card {
      width:100%;
      gap:12px;
      padding:20px;
      border-radius:22px;
      border:1px solid var(--soft-border);
      background:#fff;
      box-shadow:none;
    }
    .qr-card svg {
      width:min(286px, 86vw);
      border-radius:18px;
      box-shadow:0 14px 28px rgba(7,26,68,.10);
    }
    .account-profile {
      gap:14px;
    }
    .account-profile .card {
      border-radius:18px;
      box-shadow:var(--shadow-soft);
    }
    .onboard-block {
      display:grid;
      gap:12px;
      padding:6px 2px;
    }
    .onboard-block h2 {
      margin:0;
      font-size:18px;
      font-weight:700;
      letter-spacing:-.01em;
      color:var(--text-primary, var(--ink));
    }
    .onboard-block p {
      margin:0;
      font-size:14px;
      line-height:1.45;
      color:var(--muted);
    }
    .onboard-block .primary-cta {
      margin-top:6px;
    }
    .qr-settings-card {
      display:grid;
      gap:12px;
    }
    .qr-settings-card h2 {
      margin:0;
      color:var(--text-primary);
      font-size:15px;
      line-height:1.2;
    }
    .qr-settings-card p {
      margin:0;
      font-size:13px;
      line-height:1.45;
    }
    .qr-settings-card .pill {
      width:100%;
      min-height:52px;
      background:var(--navy-base);
      color:#fff;
      border-color:transparent;
      border-radius:14px;
      text-decoration:none;
    }
    .profile-id-block {
      display:grid;
      justify-items:center;
      gap:4px;
      padding:4px 0 14px;
      border-bottom:1px solid var(--soft-border);
      margin-bottom:8px;
    }
    .profile-id-block span {
      color:var(--muted-text);
      font-size:11px;
      font-weight:850;
      text-transform:uppercase;
    }
    .profile-id-block strong {
      color:var(--text-primary);
      font-size:17px;
      font-weight:950;
    }
    .profile-details {
      margin:0;
      display:grid;
      gap:0;
    }
    .profile-details div {
      display:grid;
      grid-template-columns:minmax(112px, 1fr) 1.2fr;
      gap:12px;
      padding:10px 0;
      border-bottom:1px solid #EEF2F7;
    }
    .profile-details div:last-child { border-bottom:0; }
    .profile-details dt {
      margin:0;
      color:var(--muted-text);
      font-size:12px;
      font-weight:800;
    }
    .profile-details dd {
      margin:0;
      color:var(--text-primary);
      font-size:13px;
      font-weight:850;
      line-height:1.3;
      overflow-wrap:anywhere;
    }
    .profile-ranking-card {
      display:grid;
      gap:8px;
    }
    .profile-ranking-card p { margin:0; line-height:1.4; }
    .profile-ranking-card strong {
      color:var(--success-green);
      font-size:26px;
      line-height:1;
    }
    .history-list {
      display:grid;
      gap:10px;
    }
    .history-item {
      display:grid;
      grid-template-columns:1fr auto;
      gap:8px 12px;
      align-items:center;
      padding:14px;
      border:1px solid var(--soft-border);
      border-radius:16px;
      background:#fff;
      box-shadow:0 8px 18px rgba(7,26,68,.06);
    }
    .history-item time {
      color:var(--muted-text);
      font-size:11px;
      font-weight:800;
    }
    .history-title {
      color:var(--text-primary);
      font-size:13px;
      font-weight:900;
    }
    .history-meta {
      color:var(--muted-text);
      font-size:11px;
      font-weight:800;
    }
    .history-result {
      grid-row:1 / span 2;
      grid-column:2;
      color:var(--success-green);
      font-size:18px;
      font-weight:950;
      font-variant-numeric:tabular-nums;
    }
    .history-result.is-bad { color:var(--primary-red); }
    .history-result.is-pr-result { color:#B07900; text-shadow:0 0 0 #B07900; }
    /* History timeline */
    .history-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
    .history-header h2 { margin:0; font-size:15px; }
    .history-count { font-size:12px; font-weight:800; color:var(--muted-text); background:#F4F7FB; padding:3px 9px; border-radius:999px; }
    .history-list.timeline { position:relative; padding-left:18px; }
    .history-list.timeline::before {
      content:"";
      position:absolute;
      left:7px;
      top:14px;
      bottom:14px;
      width:2px;
      background:linear-gradient(180deg, rgba(11,45,104,.18), rgba(11,45,104,.04));
      border-radius:1px;
    }
    .timeline-item {
      position:relative;
      display:grid;
      grid-template-columns:1fr auto;
      gap:6px 12px;
      padding:12px 14px;
      margin-left:6px;
      border:1px solid var(--soft-border);
      border-radius:14px;
      background:#fff;
      box-shadow:0 6px 14px rgba(7,26,68,.05);
    }
    .timeline-dot {
      position:absolute;
      left:-19px;
      top:18px;
      width:12px;
      height:12px;
      border-radius:50%;
      background:#0B2D68;
      box-shadow:0 0 0 3px #fff, 0 0 0 4px rgba(11,45,104,.18);
    }
    .timeline-item.is-pr .timeline-dot { background:#F0A500; box-shadow:0 0 0 3px #fff, 0 0 0 4px rgba(240,165,0,.32); }
    .timeline-item.is-bad-item .timeline-dot { background:var(--primary-red); box-shadow:0 0 0 3px #fff, 0 0 0 4px rgba(239,63,77,.28); }
    .timeline-item.is-pr { border-color:rgba(240,165,0,.45); background:linear-gradient(180deg, #FFFBEF, #fff); }
    .timeline-body { display:grid; gap:3px; min-width:0; }
    .timeline-row1 { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
    .status-chip { font-size:10px; font-weight:900; padding:2px 8px; border-radius:999px; letter-spacing:.04em; text-transform:uppercase; }
    .status-chip.is-ok { background:#E6F4EC; color:var(--success-green, #087443); }
    .status-chip.is-bad { background:#FCE6E8; color:var(--primary-red); }
    .pr-chip { font-size:10px; font-weight:950; padding:2px 8px; border-radius:999px; background:linear-gradient(180deg, #FFD15A, #F0A500); color:#3a1f00; letter-spacing:.06em; }
    /* Badges — gamified achievements with locked/in-progress states + tiered medals */
    .badges-card { padding:18px; }
    /* .badges-head is a <header> — reset the global page-header styling
       (white frosted sticky bg) it would otherwise inherit, which broke the
       title in dark mode (white box, light text on white). */
    .badges-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; background:transparent; padding:0; border-bottom:0; box-shadow:none; position:static; z-index:auto; }
    .badges-title { margin:0; font-size:16px; font-weight:900; color:var(--text-primary, #0B1A33); letter-spacing:-.01em; }
    /* Achievements progress chip: accented earned count + thin progress bar.
       Shared by the profile badges header and the roadmap modal header. */
    .badges-progress {
      flex:0 0 auto;
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:5px;
    }
    .badges-count {
      font-size:12px;
      font-weight:700;
      color:var(--muted, #6B7890);
      letter-spacing:.01em;
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
    }
    .badges-count b { font-size:15px; font-weight:900; color:var(--brand-red); }
    .badges-progress-bar {
      width:72px;
      height:5px;
      border-radius:999px;
      background:rgba(11,45,104,.10);
      overflow:hidden;
    }
    .badges-progress-bar > span {
      display:block;
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg, var(--brand-red), #FF7A4D);
      transition:width .5s cubic-bezier(.2,.8,.2,1);
    }
    .badge-section { margin-top:18px; }
    .badge-section:first-of-type { margin-top:0; }
    .badge-section-title {
      margin:0 0 10px;
      font-size:11px;
      font-weight:900;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted-text, #6E6E73);
    }
    .badges-row {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
      gap:10px;
    }
    .badge {
      position:relative;
      display:grid;
      gap:6px;
      padding:14px 8px 12px;
      border-radius:18px;
      background:#FAFBFD;
      border:1px solid var(--soft-border);
      text-align:center;
      justify-items:center;
      min-width:0;
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .badge.is-earned { box-shadow:0 4px 12px rgba(11,26,51,.06); }
    .badge.is-earned:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(11,26,51,.12); }
    .badge-medal {
      position:relative;
      width:56px;
      height:56px;
      display:grid;
      place-items:center;
      margin-bottom:2px;
    }
    .badge-icon {
      position:relative;
      width:46px;
      height:46px;
      display:grid;
      place-items:center;
      border-radius:50%;
      color:#fff;
      background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.55) 0%, transparent 38%),
                 linear-gradient(160deg, #94A3B8 0%, #64748B 100%);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.42),
        inset 0 -3px 6px rgba(0,0,0,.18),
        0 6px 14px rgba(11,26,51,.18);
      z-index:1;
    }
    .badge-icon svg { width:22px; height:22px; transition:width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1); }
    /* Icon glyph scales proportionally with achievement grade: higher tier = larger,
       more prominent icon. Earned badges read at full size, locked stay subdued. */
    .badge.tier-bronze .badge-icon svg    { width:20px; height:20px; }
    .badge.tier-silver .badge-icon svg    { width:22px; height:22px; }
    .badge.tier-gold .badge-icon svg      { width:24px; height:24px; }
    .badge.tier-platinum .badge-icon svg  { width:26px; height:26px; }
    .badge.tier-legendary .badge-icon svg { width:28px; height:28px; }
    .badge.is-locked .badge-icon svg      { width:20px; height:20px; }
    .badge-ring {
      position:absolute;
      inset:0;
      transform:rotate(-90deg);
      pointer-events:none;
      z-index:2;
    }
    .badge-ring-track { fill:none; stroke:rgba(11,26,51,.10); stroke-width:3; }
    .badge-ring-fill {
      fill:none;
      stroke:var(--brand-red);
      stroke-width:3;
      stroke-linecap:round;
      transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1);
    }
    .badge-lock {
      position:absolute;
      right:-2px;
      bottom:-2px;
      width:20px;
      height:20px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:#64748B;
      color:#fff;
      border:2px solid var(--card-bg, #fff);
      z-index:3;
    }
    .badge-lock svg { width:10px; height:10px; }
    .badge.is-locked .badge-icon {
      background:linear-gradient(160deg, #E2E8F0 0%, #CBD5E1 100%);
      color:rgba(11,26,51,.42);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.06);
      filter:saturate(.4);
    }
    .badge.is-locked strong { color:rgba(11,26,51,.55); }
    .badge.is-locked .badge-sub { color:var(--muted-text, #6E6E73); font-variant-numeric:tabular-nums; }
    .badge strong {
      font-size:12.5px;
      font-weight:850;
      line-height:1.2;
      color:var(--text-primary, #0B1A33);
      letter-spacing:-.005em;
    }
    .badge-sub {
      font-size:10.5px;
      font-weight:700;
      line-height:1.3;
      color:var(--muted-text, #6E6E73);
    }
    /* Tier-specific medal gradients (earned only) */
    .badge.is-earned.tier-bronze .badge-icon {
      background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.6) 0%, transparent 40%),
                 linear-gradient(160deg, #E5A87B 0%, #A86B4B 100%);
      color:#2c1300;
    }
    .badge.is-earned.tier-silver .badge-icon {
      background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.75) 0%, transparent 42%),
                 linear-gradient(160deg, #EDF1F6 0%, #98A3B5 100%);
      color:#1f2937;
    }
    .badge.is-earned.tier-gold .badge-icon {
      background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.85) 0%, transparent 44%),
                 linear-gradient(160deg, #FFE085 0%, #F0A500 100%);
      color:#3a1f00;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.5),
        inset 0 -3px 6px rgba(94,55,0,.22),
        0 8px 16px rgba(240,165,0,.32),
        0 0 0 1px rgba(240,165,0,.18);
    }
    .badge.is-earned.tier-platinum .badge-icon {
      background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.9) 0%, transparent 42%),
                 linear-gradient(160deg, #E3E9FF 0%, #6B7AC9 100%);
      color:#1e293b;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.55),
        inset 0 -3px 6px rgba(20,30,80,.22),
        0 8px 16px rgba(107,122,201,.32);
    }
    .badge.is-earned.tier-legendary .badge-icon {
      background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0%, transparent 42%),
                 conic-gradient(from 220deg, #FF6F8B, #FFB347, #FFE066, #74F1A4, #74D9F1, #B79FFF, #FF6F8B);
      color:#fff;
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.6),
        inset 0 -3px 6px rgba(0,0,0,.22),
        0 10px 20px rgba(255,111,139,.35),
        0 0 0 1px rgba(255,255,255,.4);
    }
    .badge.is-earned.tier-legendary {
      border-color:rgba(255,111,139,.32);
      background:linear-gradient(180deg, #FFF7F2 0%, #FAFBFD 100%);
    }
    /* "100 попыток" (vol_100) — top milestone ENGULFED IN BLAZING FIRE (One Punch Man
       energy). Scoped by data-badge so the rainbow legendary treatment still applies to
       other legendary badges (e.g. place_first "Чемпион"). Fire ring injected by JS. */
    .badge.is-earned[data-badge="vol_100"] {
      border-color:rgba(255,90,0,.55);
      background:linear-gradient(180deg, #FFEFE2 0%, #FFF9F5 100%);
    }
    .badge.is-earned[data-badge="vol_100"] .badge-icon {
      background:
        radial-gradient(circle at 50% 26%, #FFF4CE 0%, rgba(255,244,206,0) 44%),
        radial-gradient(circle at 50% 118%, #FFC23C 0%, rgba(255,194,60,0) 60%),
        linear-gradient(165deg, #FF7A18 0%, #E11900 56%, #8E0F00 100%);
      color:#FFF7E8;
      box-shadow:
        inset 0 0 0 1px rgba(255,221,150,.6),
        inset 0 -4px 8px rgba(90,14,0,.55),
        0 8px 18px rgba(225,25,0,.5),
        0 0 18px rgba(255,122,24,.8);
    }
    /* blazing fire tongues behind the icon + pulsing heat aura */
    .badge.is-earned[data-badge="vol_100"] .vol100-fire {
      position:absolute;
      top:50%;
      left:50%;
      width:74px;                       /* medal 56 + 9px fire bleed per side */
      height:74px;
      transform:translate(-50%, -50%);  /* deterministic centering, no inset quirks */
      z-index:0;
      pointer-events:none;
      filter:drop-shadow(0 1px 2px rgba(225,25,0,.5));
    }
    .vol100-fire-outer { transform-box:fill-box; transform-origin:50% 50%; animation:vol100-flameA 1.5s ease-in-out infinite; }
    .vol100-fire-inner { transform-box:fill-box; transform-origin:50% 50%; animation:vol100-flameB 1.05s ease-in-out infinite; }
    .badge.is-earned[data-badge="vol_100"] .badge-medal::after {
      content:"";
      position:absolute;
      inset:-6px;
      top:-6px; right:-6px; bottom:-6px; left:-6px;   /* longhand fallback */
      border-radius:50%;
      pointer-events:none;
      z-index:0;
      background:radial-gradient(circle, rgba(255,110,0,.45) 0%, rgba(255,110,0,0) 70%);
      animation:vol100-pulse 2.2s ease-in-out infinite;
    }
    @keyframes vol100-flameA {
      0%, 100% { opacity:.88; transform:scaleY(1); }
      50%      { opacity:1;   transform:scaleY(1.07); }
    }
    @keyframes vol100-flameB {
      0%, 100% { opacity:.65; transform:scaleY(.95) rotate(-2deg); }
      50%      { opacity:1;   transform:scaleY(1.06) rotate(2deg); }
    }
    @keyframes vol100-pulse {
      0%, 100% { opacity:.5; transform:scale(1); }
      50%      { opacity:.9; transform:scale(1.07); }
    }
    @media (prefers-reduced-motion: reduce) {
      .badge.is-earned[data-badge="vol_100"] .vol100-fire-outer,
      .badge.is-earned[data-badge="vol_100"] .vol100-fire-inner,
      .badge.is-earned[data-badge="vol_100"] .badge-medal::after { animation:none; }
    }
    /* "Чемпион" (place_first) — ROYAL: deep purple velvet medal + gold crown, gold rim,
       pulsing gold halo. Overrides the rainbow legendary treatment (same specificity,
       declared later in source order). Crown glyph also floats + gold-glints (above). */
    .badge.is-earned.tier-legendary[data-badge="place_first"] {
      border-color:rgba(212,165,46,.55);   /* gold border = subtle royal cue */
      background:#FAFBFD;                   /* flat surface, identical to sibling cards */
    }
    .badge.is-earned.tier-legendary[data-badge="place_first"] .badge-icon {
      background:
        radial-gradient(circle at 50% 22%, rgba(255,240,200,.9) 0%, rgba(255,240,200,0) 46%),
        radial-gradient(circle at 50% 122%, #7C3AED 0%, rgba(124,58,237,0) 60%),
        linear-gradient(160deg, #5B21B6 0%, #3B0A78 56%, #25055A 100%);
      color:#FFE6A6;
      box-shadow:
        inset 0 0 0 1.5px rgba(255,214,120,.8),
        inset 0 -3px 7px rgba(18,4,46,.6),
        0 8px 18px rgba(60,20,120,.45),
        0 0 16px rgba(180,130,255,.42);
    }
    .badge.is-earned.tier-legendary[data-badge="place_first"] .badge-medal::after {
      content:"";
      position:absolute;
      inset:-6px;
      top:-6px; right:-6px; bottom:-6px; left:-6px;
      border-radius:50%;
      pointer-events:none;
      z-index:0;
      background:radial-gradient(circle, rgba(255,205,90,.5) 0%, rgba(255,205,90,0) 70%);
      animation:ic-royal-glow 2.6s ease-in-out infinite;
    }
    @keyframes ic-royal-glow {
      0%, 100% { opacity:.42; transform:scale(1); }
      50%      { opacity:.85; transform:scale(1.08); }
    }
    @media (prefers-reduced-motion: reduce) {
      .badge.is-earned.tier-legendary[data-badge="place_first"] .badge-medal::after { animation:none; }
    }
    @keyframes badge-pop {
      0%   { transform:scale(.6); opacity:0; }
      60%  { transform:scale(1.08); opacity:1; }
      100% { transform:scale(1); }
    }
    .badge.is-earned .badge-icon { animation:badge-pop .42s cubic-bezier(.2,.8,.2,1) both; }
    @media (prefers-reduced-motion: reduce) {
      .badge.is-earned .badge-icon { animation:none; }
      .badge-ring-fill { transition:none; }
      .badges-progress-bar > span { transition:none; }
    }
    /* === Per-archetype perpetual idle animations ===
       Each achievement icon gets a distinctive looping micro-motion themed to its meaning.
       Grid: plays only on earned badges (vol_100 keeps its bespoke fire above).
       Roadmap (.roadmap-medal): plays on every row — including locked — so participants
       preview the motion they can earn. Transform/opacity only; gated by reduced-motion. */
    .badge.is-earned .badge-icon[data-icon] svg,
    .roadmap-medal .badge-icon[data-icon] svg { transform-origin:center; }
    /* rocket — "Первый старт": liftoff bob + tilt */
    .badge.is-earned .badge-icon[data-icon="rocket"] svg,
    .roadmap-medal .badge-icon[data-icon="rocket"] svg { animation:ic-rocket 2.4s ease-in-out infinite; }
    /* repeat — "N попыток": loop arrows turning slowly (vol_100 excluded — it has fire) */
    .badge.is-earned:not([data-badge="vol_100"]) .badge-icon[data-icon="repeat"] svg,
    .roadmap-medal .badge-icon[data-icon="repeat"] svg { animation:ic-spin 7s linear infinite; }
    /* flame — "Серия": living flicker */
    .badge.is-earned .badge-icon[data-icon="flame"] svg,
    .roadmap-medal .badge-icon[data-icon="flame"] svg { animation:ic-flicker 1.4s ease-in-out infinite; }
    /* spark — "Личный рекорд": twinkle */
    .badge.is-earned .badge-icon[data-icon="spark"] svg,
    .roadmap-medal .badge-icon[data-icon="spark"] svg { animation:ic-twinkle 2.2s ease-in-out infinite; }
    /* trophy — "Топ-10 / Призёр": victory bob */
    .badge.is-earned .badge-icon[data-icon="trophy"] svg,
    .roadmap-medal .badge-icon[data-icon="trophy"] svg { animation:ic-bob 2.8s ease-in-out infinite; }
    /* crown — "Чемпион": regal float + sway */
    .badge.is-earned .badge-icon[data-icon="crown"] svg,
    .roadmap-medal .badge-icon[data-icon="crown"] svg { animation:ic-crown 3.4s ease-in-out infinite; }

    /* Sheen sweep for premium / identity badges — clipped to the circular medal */
    .badge-icon[data-icon="idcard"],
    .badge-icon[data-icon="trophy"],
    .badge-icon[data-icon="crown"] { overflow:hidden; }
    .badge-icon[data-icon="idcard"]::after,
    .badge-icon[data-icon="trophy"]::after,
    .badge-icon[data-icon="crown"]::after {
      content:"";
      position:absolute;
      inset:0;
      top:0; right:0; bottom:0; left:0;   /* longhand fallback */
      z-index:2;
      pointer-events:none;
      transform:translateX(-130%);
      background:linear-gradient(115deg, transparent 34%, rgba(255,255,255,.5) 50%, transparent 66%);
    }
    /* Champion crown — gold glint instead of plain white shine */
    .badge-icon[data-icon="crown"]::after {
      background:linear-gradient(115deg, transparent 30%, rgba(255,226,150,.78) 50%, transparent 70%);
    }
    /* idcard — "Участник Лиги": subtle laminate gloss */
    .badge.is-earned .badge-icon[data-icon="idcard"]::after,
    .roadmap-medal .badge-icon[data-icon="idcard"]::after { animation:ic-glint 6s ease-in-out .6s infinite; }
    /* trophy glint — brighter, paired with the bob above */
    .badge.is-earned .badge-icon[data-icon="trophy"]::after,
    .roadmap-medal .badge-icon[data-icon="trophy"]::after { animation:ic-glint 4s ease-in-out .6s infinite; }
    /* crown glint — legendary shine */
    .badge.is-earned .badge-icon[data-icon="crown"]::after,
    .roadmap-medal .badge-icon[data-icon="crown"]::after { animation:ic-glint 4.6s ease-in-out .6s infinite; }

    @keyframes ic-rocket {
      0%, 100% { transform:translateY(1px) rotate(-3deg); }
      50%      { transform:translateY(-2.5px) rotate(3deg); }
    }
    @keyframes ic-spin {
      from { transform:rotate(0); }
      to   { transform:rotate(360deg); }
    }
    @keyframes ic-flicker {
      0%, 100% { transform:scale(1) rotate(-2deg); opacity:.92; }
      35%      { transform:scaleY(1.12) scaleX(.95) rotate(2deg); opacity:1; }
      70%      { transform:scaleY(.96) scaleX(1.04) rotate(-1deg); opacity:.96; }
    }
    @keyframes ic-twinkle {
      0%, 100% { transform:scale(.9) rotate(0); opacity:.82; }
      50%      { transform:scale(1.15) rotate(18deg); opacity:1; }
    }
    @keyframes ic-bob {
      0%, 100% { transform:translateY(1.5px); }
      50%      { transform:translateY(-2px); }
    }
    @keyframes ic-crown {
      0%, 100% { transform:translateY(1.5px) rotate(-2.5deg); }
      50%      { transform:translateY(-2.5px) rotate(2.5deg); }
    }
    @keyframes ic-glint {
      0%   { transform:translateX(-130%); }
      16%  { transform:translateX(130%); }
      100% { transform:translateX(130%); }
    }
    @media (prefers-reduced-motion: reduce) {
      .badge .badge-icon[data-icon] svg,
      .roadmap-medal .badge-icon[data-icon] svg,
      .badge-icon[data-icon]::after { animation:none; }
    }
    .badge { cursor:pointer; -webkit-tap-highlight-color:transparent; }
    .badge:focus-visible { outline:2px solid var(--brand-red); outline-offset:3px; }
    .badge:active { transform:scale(.96); }
    /* Badge roadmap overlay — bottom-sheet with all achievements + how-to */
    .badge-roadmap-overlay {
      position:fixed;
      inset:0;
      z-index:70;
      background:rgba(7,17,38,.62);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      display:grid;
      align-items:end;
      justify-items:center;
      padding:0;
      animation:roadmap-fade .2s ease-out both;
    }
    .badge-roadmap-overlay[hidden] { display:none; }
    @keyframes roadmap-fade { from { opacity:0; } to { opacity:1; } }
    .badge-roadmap-sheet {
      position:relative;
      width:min(460px, 100%);
      max-height:88vh;
      display:grid;
      grid-template-rows:auto auto 1fr;
      padding:14px 18px calc(20px + env(safe-area-inset-bottom));
      border-radius:24px 24px 0 0;
      background:#fff;
      box-shadow:0 -16px 48px rgba(7,17,38,.36);
      animation:roadmap-rise .34s cubic-bezier(.2,.85,.2,1) both;
      overflow:hidden;
    }
    @keyframes roadmap-rise {
      from { transform:translateY(100%); }
      to   { transform:translateY(0); }
    }
    .badge-roadmap-grip {
      width:42px;
      height:4px;
      border-radius:999px;
      background:rgba(11,26,51,.18);
      justify-self:center;
      margin:0 0 8px;
    }
    /* Compact header: title + subtitle stacked; right padding clears the
       absolute close button in the top-right corner. */
    .badge-roadmap-header {
      display:grid;
      gap:3px;
      padding:0 44px 12px 0;
      border-bottom:1px solid var(--soft-border);
      margin-bottom:12px;
      /* <header> element — drop inherited global page-header bg/sticky/shadow. */
      background:transparent;
      box-shadow:none;
      position:static;
      z-index:auto;
    }
    .badge-roadmap-header h2 {
      margin:0;
      font-size:20px;
      font-weight:900;
      color:var(--text-primary, #0B1A33);
      letter-spacing:-.015em;
    }
    .badge-roadmap-sub {
      margin:0;
      font-size:13px;
      font-weight:500;
      color:var(--muted-text, #6E6E73);
      line-height:1.4;
    }
    .badge-roadmap-close {
      position:absolute;
      top:18px;
      right:14px;
      width:34px;
      height:34px;
      min-height:34px;
      padding:0;
      border-radius:50%;
      background:rgba(11,26,51,.06);
      color:#5C6A85;
      font-size:20px;
      line-height:1;
      border:0;
      display:grid;
      place-items:center;
      box-shadow:none;
      z-index:2;
    }
    .badge-roadmap-close svg { width:15px; height:15px; display:block; }
    .badge-roadmap-close:active { transform:scale(.92); }
    .badge-roadmap-list {
      overflow-y:auto;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
      padding-right:2px;
      display:grid;
      gap:18px;
    }
    .roadmap-section { display:grid; gap:8px; }
    .roadmap-list { display:grid; gap:10px; }
    .roadmap-row {
      display:grid;
      grid-template-columns:56px 1fr;
      gap:14px;
      align-items:center;
      padding:12px;
      border-radius:16px;
      background:#FAFBFD;
      border:1px solid var(--soft-border);
      transition:transform .2s ease, box-shadow .2s ease;
    }
    .roadmap-row.is-earned { box-shadow:0 4px 10px rgba(11,26,51,.05); }
    .roadmap-medal {
      position:relative;
      width:56px;
      height:56px;
      display:grid;
      place-items:center;
    }
    .roadmap-medal .badge-icon {
      width:48px;
      height:48px;
    }
    .roadmap-medal .badge-icon svg { width:22px; height:22px; }
    .roadmap-row.is-locked .badge-icon {
      background:linear-gradient(160deg, #E2E8F0 0%, #CBD5E1 100%);
      color:rgba(11,26,51,.42);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.06);
      filter:saturate(.4);
    }
    .roadmap-row.is-earned.tier-bronze .badge-icon {
      background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.6) 0%, transparent 40%),
                 linear-gradient(160deg, #E5A87B 0%, #A86B4B 100%);
      color:#2c1300;
    }
    .roadmap-row.is-earned.tier-silver .badge-icon {
      background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.75) 0%, transparent 42%),
                 linear-gradient(160deg, #EDF1F6 0%, #98A3B5 100%);
      color:#1f2937;
    }
    .roadmap-row.is-earned.tier-gold .badge-icon {
      background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.85) 0%, transparent 44%),
                 linear-gradient(160deg, #FFE085 0%, #F0A500 100%);
      color:#3a1f00;
    }
    .roadmap-row.is-earned.tier-platinum .badge-icon {
      background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.9) 0%, transparent 42%),
                 linear-gradient(160deg, #E3E9FF 0%, #6B7AC9 100%);
      color:#1e293b;
    }
    .roadmap-row.is-earned.tier-legendary .badge-icon {
      background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.95) 0%, transparent 42%),
                 conic-gradient(from 220deg, #FF6F8B, #FFB347, #FFE066, #74F1A4, #74D9F1, #B79FFF, #FF6F8B);
      color:#fff;
    }
    /* Champion roadmap row — royal purple + gold crown (matches grid medal) */
    .roadmap-row.is-earned.tier-legendary[data-badge-row="place_first"] .badge-icon {
      background:
        radial-gradient(circle at 50% 22%, rgba(255,240,200,.9) 0%, rgba(255,240,200,0) 46%),
        radial-gradient(circle at 50% 122%, #7C3AED 0%, rgba(124,58,237,0) 60%),
        linear-gradient(160deg, #5B21B6 0%, #3B0A78 56%, #25055A 100%);
      color:#FFE6A6;
      box-shadow:inset 0 0 0 1.5px rgba(255,214,120,.8), inset 0 -3px 7px rgba(18,4,46,.6);
    }
    /* "100 попыток" roadmap row — fire medal (matches grid, no animated tongues) */
    .roadmap-row.is-earned.tier-legendary[data-badge-row="vol_100"] .badge-icon {
      background:
        radial-gradient(circle at 50% 26%, #FFF4CE 0%, rgba(255,244,206,0) 44%),
        radial-gradient(circle at 50% 118%, #FFC23C 0%, rgba(255,194,60,0) 60%),
        linear-gradient(165deg, #FF7A18 0%, #E11900 56%, #8E0F00 100%);
      color:#FFF7E8;
      box-shadow:inset 0 0 0 1px rgba(255,221,150,.6), inset 0 -4px 8px rgba(90,14,0,.55);
    }
    .roadmap-body { display:grid; gap:5px; min-width:0; }
    .roadmap-row-head {
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
    }
    .roadmap-row-head strong {
      font-size:14px;
      font-weight:850;
      color:var(--text-primary, #0B1A33);
      letter-spacing:-.005em;
      line-height:1.2;
    }
    .roadmap-tier {
      font-size:9.5px;
      font-weight:900;
      letter-spacing:.06em;
      text-transform:uppercase;
      padding:2px 7px;
      border-radius:999px;
      background:rgba(11,45,104,.08);
      color:var(--text-primary, #0B1A33);
      line-height:1.4;
    }
    .roadmap-tier.tier-bronze { background:rgba(168,107,75,.14); color:#7a4929; }
    .roadmap-tier.tier-silver { background:rgba(152,163,181,.18); color:#475467; }
    .roadmap-tier.tier-gold { background:rgba(240,165,0,.18); color:#7a4500; }
    .roadmap-tier.tier-platinum { background:rgba(107,122,201,.18); color:#3e4a85; }
    .roadmap-tier.tier-legendary {
      background:rgba(212,165,46,.16);
      color:#8B6200;
    }
    .roadmap-howto {
      margin:0;
      font-size:12.5px;
      line-height:1.45;
      color:var(--muted-text, #6E6E73);
      font-weight:500;
    }
    .roadmap-status {
      align-self:start;
      font-size:10.5px;
      font-weight:850;
      letter-spacing:.04em;
      padding:3px 9px;
      border-radius:999px;
      line-height:1.4;
      font-variant-numeric:tabular-nums;
      width:max-content;
    }
    .roadmap-status-earned { background:#E6F4EC; color:#087443; }
    .roadmap-status-progress { background:rgba(239,63,77,.12); color:var(--primary-red, #EF3F4D); }
    .roadmap-status-locked { background:rgba(11,26,51,.06); color:var(--muted-text, #6E6E73); }
    /* Tease-unlock animation — each locked row briefly "reveals" its earned state on open,
       then locks back. Creates FOMO. Stagger delay set via --row-delay in participant.js. */
    .roadmap-row.is-locked.tier-bronze    { --tease-color:rgba(168,107,75,.55);  --tease-glow:rgba(168,107,75,.2); }
    .roadmap-row.is-locked.tier-silver    { --tease-color:rgba(152,163,181,.7);  --tease-glow:rgba(152,163,181,.2); }
    .roadmap-row.is-locked.tier-gold      { --tease-color:rgba(240,165,0,.55);   --tease-glow:rgba(240,165,0,.2); }
    .roadmap-row.is-locked.tier-platinum  { --tease-color:rgba(107,122,201,.55); --tease-glow:rgba(107,122,201,.2); }
    .roadmap-row.is-locked.tier-legendary { --tease-color:rgba(255,111,139,.55); --tease-glow:rgba(255,111,139,.2); }
    @keyframes rm-row-tease {
      0%, 58%, 100% { transform:scale(1); box-shadow:none; border-color:var(--soft-border); }
      32%            { transform:scale(1.016); box-shadow:0 0 0 1.5px var(--tease-color,rgba(240,165,0,.55)), 0 6px 20px var(--tease-glow,rgba(240,165,0,.2)); border-color:var(--tease-color,rgba(240,165,0,.55)); }
    }
    @keyframes rm-icon-tease {
      0%, 58%, 100% { filter:saturate(.4); }
      32%            { filter:saturate(1) brightness(1.08); }
    }
    @keyframes rm-lock-rattle {
      0%, 100% { transform:rotate(0); }
      20%      { transform:rotate(-12deg); }
      60%      { transform:rotate(12deg); }
      80%      { transform:rotate(-5deg); }
    }
    .roadmap-row.is-locked {
      animation:rm-row-tease 2.5s ease-in-out var(--row-delay,.3s) 1 both;
    }
    .roadmap-row.is-locked .badge-icon {
      animation:rm-icon-tease 2.5s ease-in-out var(--row-delay,.3s) 1 both;
    }
    .roadmap-row.is-locked .badge-lock {
      animation:rm-lock-rattle .38s ease-in-out calc(var(--row-delay,.3s) + 2.1s) 1 both;
    }
    @media (prefers-reduced-motion:reduce) {
      .roadmap-row.is-locked,
      .roadmap-row.is-locked .badge-icon,
      .roadmap-row.is-locked .badge-lock { animation:none; }
    }
    /* Draft restored banner */
    .draft-restored-banner {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin:0 14px 10px;
      padding:8px 14px;
      border-radius:12px;
      background:#FEF3C7;
      color:#7A4F00;
      font-size:13px;
      font-weight:700;
      box-shadow:0 8px 18px rgba(122,79,0,.12);
      transition:opacity .25s ease, transform .25s ease;
    }
    .draft-restored-banner.is-hidden { opacity:0; transform:translateY(-6px); pointer-events:none; }
    .draft-restored-banner button {
      width:24px;
      height:24px;
      min-height:24px;
      padding:0;
      border-radius:50%;
      background:rgba(122,79,0,.12);
      color:#7A4F00;
      font-size:16px;
      box-shadow:none;
    }
    .profile-id-block { display:flex; align-items:center; gap:10px; }
    .profile-id-block strong { flex:1; }
    .profile-share-btn {
      width:32px;
      height:32px;
      min-height:32px;
      padding:0;
      border-radius:50%;
      background:transparent;
      border:1px solid rgba(11,26,51,.12);
      color:var(--text-primary);
      box-shadow:none;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      transition:background-color .15s ease, transform .12s ease, border-color .15s ease;
    }
    .profile-share-btn svg { width:16px; height:16px; }
    .profile-share-btn:hover { background:rgba(11,26,51,.06); }
    .profile-share-btn:active { transform:scale(.92); }
    .profile-share-btn.is-copied {
      background:#E6F4EC;
      border-color:#16a34a;
      color:#087443;
    }
    /* Attempt detail modal */
    .attempt-detail-card {
      width:min(420px, 92vw);
      display:grid;
      gap:14px;
      padding:22px;
      background:#fff;
      border-radius:24px;
      box-shadow:0 32px 72px rgba(0,0,0,.4);
    }
    .attempt-detail-header {
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:12px;
    }
    .attempt-detail-date { font-size:13px; font-weight:800; color:var(--muted-text, #6E6E73); }
    .attempt-detail-result { font-size:30px; font-weight:950; color:#0B1A33; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
    .attempt-detail-result.is-bad { color:var(--primary-red); }
    .attempt-detail-result.is-pr { color:#B07900; }
    .attempt-detail-status { display:flex; gap:8px; flex-wrap:wrap; }
    .attempt-detail-title { margin:0; font-size:15px; font-weight:900; color:#0B1A33; }
    .attempt-detail-list {
      margin:0;
      display:grid;
      grid-template-columns:auto 1fr;
      gap:8px 14px;
      font-size:13px;
    }
    .attempt-detail-list dt { color:var(--muted-text, #6E6E73); font-weight:700; }
    .attempt-detail-list dd { margin:0; color:#0B1A33; font-weight:700; }
    /* Print stylesheet for history export */
    @media print {
      body { background:#fff; padding:0; }
      .bottom-tabbar, .qr-fab, #ptr-indicator, .qr-overlay, #attempt-detail-overlay,
      .top-brand-header, .home-personal, .home-search-panel, .account-nav-row,
      #clear-participant-profile, #export-history-btn, .qr-settings-card, #participant-qr {
        display:none !important;
      }
      .app-shell { width:100% !important; box-shadow:none !important; }
      .form-card { padding:0 !important; box-shadow:none !important; border:0 !important; }
      .timeline-item { break-inside:avoid; }
      .badges-card, .timeline-item, #participant-ranking, #participant-profile {
        background:#fff !important;
        box-shadow:none !important;
        border:1px solid #ccc !important;
        page-break-inside:avoid;
        margin-bottom:8px;
      }
    }
    .rating-app {
      background:
        radial-gradient(360px 240px at 82% -30px, rgba(20,87,200,.30), transparent 72%),
        linear-gradient(180deg,
        var(--navy-base) 0px,
        var(--navy-base) 96px,
        var(--navy-mid) 160px,
        #4d6ea6 212px,
        #b4c4e0 262px,
        var(--light-bg) 312px,
        var(--light-bg) 100%);
    }
    .rating-app .top-brand-header {
      background:transparent;
    }
    .rating-app .top-title-block h1 {
      text-transform:uppercase;
      letter-spacing:.02em;
    }
    .rating-app .rating-panel {
      margin:0;
      padding:14px 14px calc(128px + env(safe-area-inset-bottom));
      background:transparent;
      border:0;
      box-shadow:none;
      border-radius:0;
    }
    .rating-app .rating-logo-banner {
      display:none;
    }
    .rating-heading {
      display:none;
    }
    .rating-controls {
      margin:0 0 14px;
      grid-template-columns:1fr;
      gap:10px;
      padding:14px;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, var(--navy-mid) 0%, var(--navy-base) 100%);
      box-shadow:0 22px 48px rgba(7,26,68,.42);
      max-height:none;
      overflow:visible;
      overscroll-behavior:contain;
      scrollbar-width:none;
    }
    .rating-controls::-webkit-scrollbar { display:none; }
    .rating-controls label:first-child {
      grid-column:1 / -1;
    }
    .rating-controls label,
    .rating-controls input,
    .rating-controls select {
      font-size:12px;
    }
    .rating-controls input,
    .rating-controls select {
      min-height:48px;
      padding:10px 12px;
      font-size:15px;
    }
    .rating-search-row {
      display:grid;
      grid-template-columns:minmax(0, 1fr) 52px;
      gap:10px;
      align-items:end;
    }
    .rating-search-label {
      grid-column:auto !important;
      color:#fff;
    }
    .rating-advanced-filters {
      position:relative;
      min-width:0;
    }
    .rating-advanced-filters summary {
      width:52px;
      min-height:48px;
      display:grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.22);
      border-radius:14px;
      background:rgba(255,255,255,.12);
      color:#fff;
      list-style:none;
      cursor:pointer;
    }
    .rating-advanced-filters summary::-webkit-details-marker {
      display:none;
    }
    .rating-advanced-filters summary span {
      position:absolute;
      width:1px;
      height:1px;
      overflow:hidden;
      clip:rect(0 0 0 0);
    }
    .rating-advanced-grid {
      position:absolute;
      top:calc(100% + 8px);
      right:0;
      z-index:12;
      width:min(344px, calc(100vw - 28px));
      max-height:min(560px, calc(100svh - 176px));
      overflow:auto;
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:12px;
      padding:16px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:20px;
      background:linear-gradient(180deg, var(--navy-mid) 0%, var(--navy-base) 100%);
      box-shadow:0 22px 48px rgba(7,26,68,.42);
      color:#fff;
    }
    .rating-advanced-grid label {
      display:grid;
      gap:6px;
      color:#fff;
      font-size:12px;
      font-weight:600;
      letter-spacing:.01em;
    }
    .rating-advanced-grid input,
    .rating-advanced-grid select {
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.18);
      color:#fff;
      font-weight:500;
    }
    .rating-advanced-grid input::placeholder { color:rgba(255,255,255,.55); }
    .rating-advanced-grid select option { color:var(--navy-base); background:#fff; }
    .rating-advanced-grid label:nth-last-child(-n + 4),
    .rating-advanced-grid .rating-mode-buttons {
      grid-column:1 / -1;
    }
    .rating-quick-chips {
      display:grid;
      grid-template-columns:repeat(4, minmax(0, 1fr));
      gap:8px;
    }
    .rating-quick-chips button {
      min-height:34px;
      padding:7px 8px;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      color:#fff;
      box-shadow:none;
      font-size:11px;
    }
    .rating-quick-chips button.is-active {
      background:#fff;
      color:var(--navy-base);
    }
    .rating-mode-buttons {
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .rating-mode-buttons button {
      min-height:42px;
      border-radius:14px;
      background:#F1F5FA;
      color:var(--navy-base);
      border:0;
      box-shadow:none;
      font-size:12px;
    }
    .rating-mode-buttons button.is-active {
      background:var(--primary-red);
      color:#fff;
      box-shadow:0 12px 24px rgba(239,63,77,.24);
      transform:none;
    }
    .rating-summary {
      grid-template-columns:1fr;
      gap:10px;
    }
    .metric-card {
      border-left:0;
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:12px;
    }
    .metric-card h2 {
      margin:0;
      color:var(--navy-base);
      font-size:18px;
      text-align:right;
    }
    #rating-participants-block {
      overflow:visible;
      padding:0;
      background:transparent;
      border:0;
      box-shadow:none;
    }
    #rating-participants-block table {
      display:none;
    }
    .rating-cards {
      display:grid;
      gap:12px;
      list-style:none;
      margin:0;
      padding:0;
    }
    .rating-card {
      min-width:0;
      display:grid;
      gap:8px;
      padding:14px;
      border-radius:16px;
      border:1px solid var(--soft-border);
      background:#fff;
      box-shadow:0 10px 22px rgba(7,26,68,.08);
    }
    .rating-card-top {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
    }
    .rating-card-top .rating-card-id { flex:1 1 auto; min-width:0; }
    .rating-card-top .rating-card-result { flex:0 0 auto; margin-left:auto; }
    .rating-card-place {
      width:34px;
      height:34px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:#FFE4C7;
      color:#9A5B17;
      font-size:14px;
      font-weight:950;
      font-variant-numeric:tabular-nums;
    }
    .rating-card-id {
      color:var(--muted-text);
      font-size:11px;
      font-weight:850;
      overflow-wrap:anywhere;
    }
    .rating-card-result {
      color:var(--navy-base);
      font-size:16px;
      font-weight:950;
      font-variant-numeric:tabular-nums;
    }
    .rating-card-name {
      color:var(--text-primary);
      font-size:14px;
      font-weight:950;
      line-height:1.2;
    }
    .rating-card-meta {
      margin:0;
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:4px 10px;
    }
    .rating-card-meta dt {
      margin:0;
      color:var(--muted-text);
      font-size:10px;
      font-weight:800;
      text-transform:none;
      letter-spacing:0;
    }
    .rating-card-meta dd {
      margin:0;
      color:var(--text-primary);
      font-size:11px;
      font-weight:800;
      overflow-wrap:anywhere;
    }
    .rating-card.is-focused {
      border-color:var(--primary-red);
      box-shadow:0 0 0 2px rgba(239,63,77,.16), 0 14px 28px rgba(239,63,77,.16);
      animation:focusPulse 1.4s ease-out;
    }
    @keyframes focusPulse {
      0% { box-shadow:0 0 0 0 rgba(239,63,77,.55); }
      80% { box-shadow:0 0 0 16px rgba(239,63,77,0); }
      100% { box-shadow:0 0 0 2px rgba(239,63,77,.16), 0 14px 28px rgba(239,63,77,.16); }
    }
    /* Finalist visual emphasis — circles + stars */
    .rating-card.is-finalist { border-width:2px; }
    .rating-card.is-finalist.is-silver { border-color:#A4ADBC; }
    .rating-card.is-finalist.is-bronze { border-color:#A86B4B; }
    /* Gold leader — editorial hero card */
    .rating-card.is-finalist.is-gold {
      position:relative;
      padding:22px 20px 44px;
      border-color:#F0A500;
      border-width:0;
      background:
        radial-gradient(circle at 100% 0%, rgba(255,215,90,.34) 0%, transparent 60%),
        radial-gradient(circle at 0% 100%, rgba(240,165,0,.22) 0%, transparent 50%),
        linear-gradient(135deg, #0B2D68 0%, #071A44 100%);
      color:#fff;
      box-shadow:var(--elev-3), inset 0 0 0 1px rgba(255,215,90,.45);
      overflow:hidden;
    }
    .rating-card.is-finalist.is-gold::before {
      content:"";
      position:absolute;
      inset:auto -40px -40px auto;
      width:200px;
      height:200px;
      background:radial-gradient(circle, rgba(255,215,90,.18) 0%, transparent 60%);
      pointer-events:none;
    }
    .rating-card.is-finalist.is-gold::after {
      content:"ЛИДЕР";
      position:absolute;
      bottom:14px;
      right:14px;
      font-size:10px;
      font-weight:800;
      letter-spacing:.14em;
      color:#FFD15A;
      padding:5px 10px;
      border-radius:999px;
      background:rgba(255,215,90,.18);
      border:1px solid rgba(255,215,90,.40);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      z-index:2;
    }
    .rating-card.is-finalist.is-gold .rating-card-name {
      color:#fff;
      font-size:var(--text-xl);
      letter-spacing:-.02em;
      font-weight:800;
    }
    .rating-card.is-finalist.is-gold .rating-card-id { color:rgba(255,215,90,.85); font-weight:700; }
    .rating-card.is-finalist.is-gold .rating-card-result {
      color:#FFD15A;
      font-size:var(--text-3xl);
      letter-spacing:-.03em;
    }
    .rating-card.is-finalist.is-gold .rating-card-meta dt { color:rgba(255,255,255,.55); }
    .rating-card.is-finalist.is-gold .rating-card-meta dd { color:#fff; }
    .rating-card.is-finalist.is-gold .rating-card-stars { filter:drop-shadow(0 2px 8px rgba(255,215,90,.5)); }
    .rating-card-place {
      position:relative;
    }
    .rating-card-place.is-gold,
    .rating-card-place.is-silver,
    .rating-card-place.is-bronze {
      width:42px;
      height:42px;
      font-size:15px;
      box-shadow:0 6px 14px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.55);
    }
    .rating-card-place.is-gold {
      background:linear-gradient(180deg, #FFD15A 0%, #F0A500 100%);
      color:#3a1f00;
    }
    .rating-card-place.is-silver {
      background:linear-gradient(180deg, #E6EAF0 0%, #B6BEC9 100%);
      color:#1a2235;
    }
    .rating-card-place.is-bronze {
      background:linear-gradient(180deg, #E2A78D 0%, #A86B4B 100%);
      color:#2c1300;
    }
    .rating-card-stars {
      display:inline-flex;
      align-items:center;
      gap:1px;
      font-size:20px;
      line-height:1;
      letter-spacing:1px;
      filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));
    }
    .rating-card-stars.is-gold { color:#FFD15A; }
    .rating-card-stars.is-silver { color:#D8DEE8; }
    .rating-card-stars.is-bronze { color:#E2A78D; }
    .rating-findme-chip {
      min-height:34px;
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 12px;
      border-radius:999px;
      background:linear-gradient(180deg, #ff5664 0%, var(--primary-red) 100%);
      color:#fff;
      font-size:13px;
      font-weight:800;
      border:0;
      box-shadow:0 8px 18px rgba(239,63,77,.30);
      cursor:pointer;
    }
    .rating-findme-chip svg { width:14px; height:14px; }
    .rating-skeleton-card {
      min-width:0;
      display:grid;
      gap:8px;
      padding:14px;
      border-radius:16px;
      border:1px solid var(--soft-border);
      background:#fff;
      box-shadow:0 10px 22px rgba(7,26,68,.06);
    }
    .rating-skeleton-card .sk-row { display:grid; grid-template-columns:34px 1fr 60px; gap:10px; align-items:center; }
    .rating-skeleton-card .sk-circle { width:34px; height:34px; border-radius:50%; }
    /* Search history chips */
    .rating-search-history {
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      margin-top:8px;
    }
    .rating-search-history-chip {
      display:inline-flex;
      align-items:center;
      gap:5px;
      padding:5px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.10);
      color:#fff;
      font-size:12px;
      font-weight:700;
      border:1px solid rgba(255,255,255,.12);
      cursor:pointer;
    }
    .rating-search-history-chip svg { width:11px; height:11px; opacity:.6; }
    .rating-search-history-clear {
      padding:5px 10px;
      border-radius:999px;
      background:transparent;
      color:rgba(255,255,255,.55);
      font-size:11px;
      font-weight:700;
      border:1px dashed rgba(255,255,255,.18);
      box-shadow:none;
    }
    #rating-regions-block {
      padding:14px;
      border-radius:18px;
      background:#fff;
      box-shadow:var(--shadow-card);
    }
    #rating-regions-block table {
      display:table;
      min-width:0;
    }
    .pagination-row {
      grid-template-columns:minmax(74px, auto) 1fr minmax(74px, auto);
    }
    .pagination-row > button {
      min-width:74px;
      min-height:44px;
      font-size:13px;
    }
    .pagination-row > #rating-page {
      min-height:44px;
      padding:8px 10px;
      background:#fff;
      color:var(--navy-base);
      font-size:11px;
      line-height:1.18;
    }
    .judge-app {
      background:var(--judge-screen-gradient);
      color:#fff;
    }
    /* Transparent so the judge-screen-gradient reads as one continuous navy
       backdrop. The opaque header gradient (different radial-glow position) left
       a hard seam at the header's bottom edge. Mirrors rating/participant. */
    .judge-app .top-brand-header {
      background:transparent;
    }
    .judge-app .form-card {
      margin-top:0;
      background:transparent;
      box-shadow:none;
      border-radius:0;
      padding:18px 18px calc(20px + env(safe-area-inset-bottom));
    }
    .judge-app label {
      color:rgba(255,255,255,.82);
    }
    .judge-app input,
    .judge-app select,
    .judge-app textarea {
      border-color:rgba(255,255,255,.08);
      background:rgba(255,255,255,.10);
      color:#fff;
      box-shadow:none;
    }
    .judge-app input::placeholder {
      color:rgba(255,255,255,.48);
    }
    .judge-login {
      gap:14px;
      background:transparent;
      border:0;
      box-shadow:none;
      padding:0;
    }
    .judge-login-brand {
      display:flex;
      align-items:center;
      gap:12px;
      margin:4px 0 10px;
      color:#fff;
    }
    .judge-login-brand strong {
      font-size:15px;
      line-height:1.05;
    }
    .judge-login-logo {
      height:46px;
      width:auto;
      max-width:46%;
      object-fit:contain;
      flex:0 0 auto;
    }
    .judge-login-copy {
      display:grid;
      gap:4px;
      margin:0 0 8px;
    }
    .judge-login-copy h2 {
      margin:0;
      color:#fff;
      font-size:22px;
      line-height:1.1;
    }
    .judge-login-copy p,
    .judge-forgot-link {
      margin:0;
      color:rgba(255,255,255,.72);
      font-size:12px;
    }
    .judge-forgot-link {
      text-align:center;
    }
    .judge-security-note {
      margin-top:12px;
      padding:16px;
      border-radius:16px;
      background:rgba(255,255,255,.10);
      color:#fff;
    }
    .judge-security-note strong {
      display:block;
      margin-bottom:8px;
    }
    .judge-security-note p {
      margin:0;
      color:rgba(255,255,255,.76);
      font-size:12px;
      line-height:1.45;
    }
    .judge-login button {
      margin-top:6px;
    }
    .judge-session {
      gap:12px;
    }
    .judge-lookup-panel {
      display:grid;
      gap:12px;
    }
    .judge-session.has-participant .judge-lookup-panel {
      display:none;
    }
    .judge-session-nav {
      margin:0;
      display:grid;
      grid-template-columns:1fr 1fr auto;
      gap:8px;
    }
    .judge-session.has-participant .judge-session-nav {
      display:none;
    }
    .judge-session-nav a,
    .judge-session-nav button {
      min-height:44px;
      padding:10px 14px;
      font-size:13px;
      text-decoration:none;
    }
    .judge-session-nav a.account-home-button,
    .judge-session-nav a.account-nav-button {
      border-radius:var(--button-radius);
    }
    .judge-session-nav button.secondary {
      border-radius:var(--button-radius);
      background:rgba(255,255,255,.10);
      color:#fff;
      border:1px solid rgba(255,255,255,.18);
      box-shadow:none;
      transition:transform .14s ease, background-color .18s ease, border-color .18s ease;
      -webkit-tap-highlight-color:transparent;
    }
    .judge-session-nav button.secondary:hover { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.32); }
    .judge-session-nav button.secondary:active { transform:scale(.96); background:rgba(255,255,255,.06); }
    .participant-card {
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.10);
      color:#fff;
    }
    .participant-card span,
    .participant-card .pill {
      color:rgba(255,255,255,.78);
    }
    .judge-app .participant-card .pill {
      justify-self:start;
      min-height:32px;
      padding:6px 12px;
      background:rgba(255,255,255,.14);
      border-color:rgba(255,255,255,.18);
      color:#fff;
    }
    .judge-app .participant-card .pill:empty {
      display:none;
    }
    .judge-app .workout-description {
      background:rgba(255,255,255,.10);
      border-color:rgba(255,255,255,.10);
      color:rgba(255,255,255,.80);
      display:none;
    }
    .judge-app .participant-card .workout-choice-buttons button {
      min-height:44px;
      border-radius:14px;
    }
    .judge-session.has-participant #judge-workout-switch {
      display:none;
    }
    .judge-app .workout-description strong {
      color:#fff;
    }
    .scanner-video {
      border:1px solid rgba(255,255,255,.12);
      background:#020816;
    }
    .judge-arena {
      gap:12px;
      padding:0;
      border:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
    }
    .timer-display {
      color:#fff;
      font-size:clamp(64px, 19vw, 104px);
      line-height:.9;
      text-shadow:0 12px 28px rgba(0,0,0,.18);
    }
    .timer-display.is-idle,
    .timer-display.is-running,
    .timer-display.is-stopped {
      color:#fff;
    }
    .timer-status {
      color:rgba(255,255,255,.74);
      font-size:12px;
    }
    .judge-score-counters {
      width:100%;
      border:0;
      border-radius:16px;
      background:#fff;
      box-shadow:var(--shadow-soft);
    }
    .judge-counter {
      color:var(--muted-text);
    }
    .judge-counter strong {
      color:var(--navy-base);
      font-size:23px;
    }
    .judge-counter.is-good strong { color:var(--success-green); }
    .judge-counter.is-bad strong { color:var(--primary-red); }
    .judge-counter.is-warning strong { color:#E58A00; }
    .timer-button {
      min-height:66px;
      background:#fff;
      color:var(--navy-base);
      box-shadow:0 16px 32px rgba(0,0,0,.15);
    }
    .timer-button.is-running {
      background:var(--primary-red);
      color:#fff;
    }
    .judge-action-button {
      min-height:104px;
      border-radius:16px;
      box-shadow:0 12px 26px rgba(0,0,0,.22);
    }
    .judge-action-button.is-good {
      grid-column:auto;
      min-height:104px;
      background:var(--success-green);
      flex-direction:row;
    }
    .judge-action-button.is-no {
      background:var(--primary-red);
    }
    .judge-action-button.is-warning {
      background:var(--warning-yellow);
      color:#3D2B00;
    }
    .judge-action-label {
      font-size:clamp(18px, 5.4vw, 24px);
      line-height:1.05;
      font-weight:950;
    }
    .judge-action-icon {
      display:inline-flex;
      width:30px;
      height:30px;
      font-size:24px;
    }
    .judge-primary-actions {
      gap:12px;
      grid-template-columns:repeat(2, minmax(0, 1fr));
    }
    .penalty-actions button,
    .judge-secondary-actions button {
      min-height:55px;
      border-radius:13px;
      background:#fff;
      color:var(--primary-red);
      box-shadow:none;
      font-size:13px;
    }
    #false-start-button {
      background:var(--action-purple);
      color:#fff;
    }
    #undo-penalty-button {
      background:var(--navy-mid);
      color:#fff;
    }
    /* Judge identity bar */
    .judge-identity-bar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin:0 0 12px;
      padding:8px 12px;
      border-radius:14px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.1);
      backdrop-filter:blur(20px);
    }
    .judge-identity-chip { display:flex; align-items:center; gap:10px; min-width:0; }
    .judge-identity-avatar {
      width:36px;
      height:36px;
      display:grid;
      place-items:center;
      border-radius:50%;
      background:linear-gradient(180deg, #1457C8, #0B2D68);
      color:#fff;
      font-size:14px;
      font-weight:950;
      box-shadow:0 4px 10px rgba(11,45,104,.5);
      flex:0 0 auto;
    }
    .judge-identity-text { display:grid; gap:1px; min-width:0; }
    .judge-identity-text strong { color:#fff; font-size:13px; font-weight:900; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .judge-identity-text span { color:rgba(255,255,255,.55); font-size:11px; font-weight:700; }
    .judge-net-indicator { display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:rgba(8,116,67,.18); color:#7CE5A8; font-size:11px; font-weight:800; }
    .judge-net-indicator.is-offline { background:rgba(239,63,77,.22); color:#FF9AA4; }
    .judge-net-dot { width:8px; height:8px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 0 rgba(34,197,94,.7); animation:netPulse 1.6s ease-out infinite; }
    .judge-net-indicator.is-offline .judge-net-dot { background:#FF6470; animation:none; }
    @keyframes netPulse { 0% { box-shadow:0 0 0 0 rgba(34,197,94,.6); } 70% { box-shadow:0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow:0 0 0 0 rgba(34,197,94,0); } }
    /* Judge action stack (sticky) + unified utility row */
    .judge-action-stack {
      position:sticky;
      bottom:max(8px, env(safe-area-inset-bottom));
      z-index:5;
      display:grid;
      gap:10px;
      padding:10px;
      margin:8px -6px 0;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(11,17,38,.78), rgba(11,17,38,.94));
      backdrop-filter:blur(14px);
      box-shadow:0 -10px 30px rgba(0,0,0,.30);
    }
    .judge-utility-row {
      display:grid;
      grid-template-columns:repeat(6, minmax(0, 1fr));
      gap:8px;
    }
    .judge-utility-row > #interference-button,
    .judge-utility-row > #false-start-button,
    .judge-utility-row > #undo-penalty-button { grid-column:span 2; }
    .judge-utility-row > #dnf-button,
    .judge-utility-row > #dsq-button { grid-column:span 3; }
    .judge-utility-row > button {
      min-height:56px;
      padding:10px 8px;
      border-radius:14px;
      font-size:14px;
      line-height:1.15;
      font-weight:800;
      background:#fff;
      color:var(--primary-red);
      box-shadow:none;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
    }
    .judge-utility-row > button.is-warning {
      background:var(--warning-yellow);
      color:#3D2B00;
    }
    .judge-utility-row > button.danger {
      background:var(--primary-red);
      color:#fff;
    }
    .judge-utility-row #false-start-button {
      background:var(--action-purple);
      color:#fff;
    }
    .judge-utility-row #undo-penalty-button {
      background:var(--navy-mid);
      color:#fff;
    }
    .judge-utility-row button .penalty-button-content {
      display:inline-flex;
      align-items:center;
      gap:4px;
      justify-content:center;
    }
    .judge-utility-row button .penalty-button-count {
      font-size:12px;
      opacity:.85;
      min-width:18px;
      padding:0 6px;
      border-radius:999px;
      background:rgba(0,0,0,.18);
    }
    .judge-utility-row button:disabled { opacity:.45; filter:saturate(.65); }
    .judge-secondary-actions button.danger {
      background:#fff;
      color:var(--primary-red);
    }
    .attempt-summary,
    .judge-result {
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.12);
      color:#fff;
      box-shadow:none;
    }
    .attempt-summary-row {
      border-color:rgba(255,255,255,.12);
      color:rgba(255,255,255,.70);
    }
    .attempt-summary-row strong,
    .attempt-summary-title {
      color:#fff;
    }
    @media (max-width: 480px) {
      main {
        padding:0 0 calc(106px + env(safe-area-inset-bottom));
      }
      .app-shell {
        width:100%;
        min-height:100vh;
        min-height:100svh;
        border-radius:0;
        border:0;
        box-shadow:none;
      }
      .bottom-tabbar {
        width:calc(100vw - 24px);
      }
      .hero-rating-card {
        min-height:285px;
      }
    }
    /* Offline banner */
    .offline-banner {
      position:fixed;
      top:max(8px, env(safe-area-inset-top));
      left:50%;
      transform:translateX(-50%);
      z-index:55;
      padding:8px 16px;
      border-radius:999px;
      background:rgba(239,63,77,.94);
      color:#fff;
      font-size:13px;
      font-weight:800;
      box-shadow:0 14px 28px rgba(239,63,77,.32);
      backdrop-filter:blur(20px);
      letter-spacing:.01em;
    }
    .offline-banner[hidden] { display:none; }
    /* Onboarding */
    .onboarding-overlay {
      position:fixed;
      inset:0;
      z-index:70;
      background:radial-gradient(circle at 30% 0%, #1457C8 0%, #0B2D68 45%, #04102D 100%);
      color:#fff;
      display:flex;
      flex-direction:column;
      padding:max(60px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
    }
    .onboarding-overlay[hidden] { display:none; }
    .onboarding-skip {
      position:absolute;
      top:max(20px, env(safe-area-inset-top));
      right:18px;
      min-height:36px;
      padding:6px 14px;
      border-radius:999px;
      background:rgba(255,255,255,.18);
      color:#fff;
      font-size:13px;
      font-weight:700;
      box-shadow:none;
      backdrop-filter:blur(16px);
    }
    .onboarding-slides {
      flex:1;
      display:grid;
      grid-template-columns:100%;
      overflow-x:hidden;
      scroll-snap-type:x mandatory;
      scroll-behavior:smooth;
      grid-auto-flow:column;
      grid-auto-columns:100%;
    }
    .onboarding-slide {
      scroll-snap-align:center;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:18px;
      padding:20px 4px;
      text-align:center;
    }
    .onboarding-slide h2 {
      margin:0;
      font-size:28px;
      font-weight:900;
      letter-spacing:-.01em;
      line-height:1.1;
    }
    .onboarding-slide p {
      margin:0;
      max-width:340px;
      color:rgba(255,255,255,.82);
      font-size:15px;
      line-height:1.45;
      font-weight:600;
    }
    .onboarding-art {
      width:min(220px, 64vw);
      aspect-ratio:1/1;
      display:grid;
      place-items:center;
      border-radius:32px;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.10);
      backdrop-filter:blur(20px);
    }
    .onboarding-art svg { width:62%; height:62%; }
    .onboarding-art img { width:82%; height:auto; object-fit:contain; }
    .onboarding-dots {
      display:flex;
      gap:8px;
      justify-content:center;
      margin:20px 0;
    }
    .onboarding-dots span {
      width:8px;
      height:8px;
      border-radius:50%;
      background:rgba(255,255,255,.28);
      transition:width .2s ease, background .2s ease;
    }
    .onboarding-dots span.is-active {
      width:24px;
      border-radius:999px;
      background:#fff;
    }
    .onboarding-nav {
      display:flex;
      gap:10px;
      align-items:center;
    }
    .onboarding-prev {
      flex:0 0 auto;
      min-height:52px;
      padding:0 22px;
      border-radius:16px;
      background:rgba(255,255,255,.12);
      color:#fff;
      font-size:15px;
      font-weight:700;
      box-shadow:none;
    }
    .onboarding-next {
      flex:1;
      min-height:54px;
      border-radius:16px;
      background:linear-gradient(180deg, #ff5664 0%, #EF3F4D 100%);
      color:#fff;
      font-size:17px;
      font-weight:900;
      box-shadow:0 14px 28px rgba(239,63,77,.34);
    }
    /* System dark mode */
    @media (prefers-color-scheme: dark) {
      :root {
        --color-background:#04102D;
        --color-surface:#0B1A33;
        --bg:#04102D;
        --light-bg:#04102D;
        --card-bg:#0E1F3F;
        --soft-border:#1B2E55;
        --line:#1B2E55;
        --text-primary:#F1F4FA;
        --muted-text:#9AA7BA;
        --ink:#F1F4FA;
        --muted:#9AA7BA;
        --white:#0E1F3F;
      }
      body {
        background:#04102D;
        color:#F1F4FA;
      }
      .app-shell {
        background:#04102D !important;
        border-color:rgba(255,255,255,.04) !important;
      }
      .home-search-panel {
        background:#0E1F3F;
      }
      .home-search-panel label {
        color:#9AA7BA;
      }
      .home-search-button {
        background:rgba(255,255,255,.06);
        color:#9AA7BA;
      }
      .home-filter-list {
        background:#0B1A33;
      }
      .home-filter-row {
        color:#F1F4FA;
        background:transparent;
      }
      .home-filter-row svg {
        color:#7CB2FF;
      }
      .home-filter-row .chevron svg {
        color:#5C6A85;
      }
      .home-filter-row + .home-filter-row::before {
        background:rgba(255,255,255,.06);
      }
      .home-filter-row:hover {
        background:rgba(255,255,255,.04);
      }
      .home-rating-body {
        background:#0E1F3F;
        border-top-color:rgba(255,255,255,.05);
      }
      .home-rating-body .geo-section-sub { color:#9AA7BA; }
      .home-rating-body .geo-kpi,
      .home-rating-body .geo-card {
        background:#0B1A33;
        border-color:#1B2E55;
      }
      .home-rating-body .geo-kpi-value,
      .home-rating-body .geo-card h3 {
        color:#F1F4FA;
      }
      .home-myrank-card { background:#0E1F3F; }
      .home-myrank-meta .name { color:#F1F4FA; }
      .home-myrank-result .val { color:#F1F4FA; }
      .form-card,
      .card,
      .ios-card,
      .badges-card {
        background:#0E1F3F !important;
        border-color:#1B2E55 !important;
        color:#F1F4FA;
      }
      .badge { background:#0B1A33; border-color:#1B2E55; }
      /* Champion: match sibling cards in dark mode (light-mode rule hardcodes #FAFBFD,
         which would otherwise stay white on the dark theme). Keep gold royal border. */
      .badge.is-earned.tier-legendary[data-badge="place_first"] { background:#0B1A33; border-color:rgba(212,165,46,.5); }
      /* vol_100: light-mode rule hardcodes peach gradient; reset to navy in dark. Keep orange fire border. */
      .badge.is-earned[data-badge="vol_100"] { background:#0B1A33; border-color:rgba(255,90,0,.45); }
      .badge strong { color:#F1F4FA; }
      .badges-count { color:#9AA7BA; }
      .badges-count b { color:#FF6B75; }
      .badges-progress-bar { background:rgba(255,255,255,.14); }
      .badge-section-title { color:#9AA7BA; }
      .badge-sub { color:#9AA7BA; }
      .badge.is-locked .badge-icon {
        background:linear-gradient(160deg, #1B2E55 0%, #142547 100%);
        color:rgba(255,255,255,.34);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.18);
      }
      .badge.is-locked strong { color:rgba(241,244,250,.55); }
      .badge-lock { border-color:#0B1A33; background:#1B2E55; }
      .badge-ring-track { stroke:rgba(255,255,255,.12); }
      .badge.is-earned.tier-legendary {
        background:linear-gradient(180deg, #2A1424 0%, #0B1A33 100%);
        border-color:rgba(255,111,139,.32);
      }
      .badge-roadmap-sheet { background:#0E1F3F; box-shadow:0 -16px 48px rgba(0,0,0,.6); }
      .badge-roadmap-grip { background:rgba(255,255,255,.18); }
      .badge-roadmap-header { border-bottom-color:#1B2E55; }
      .badge-roadmap-header h2 { color:#F1F4FA; }
      .badge-roadmap-sub { color:#9AA7BA; }
      .badge-roadmap-close { background:rgba(255,255,255,.08); color:#9AA7BA; }
      .roadmap-row { background:#0B1A33; border-color:#1B2E55; }
      .roadmap-row-head strong { color:#F1F4FA; }
      .roadmap-howto { color:#9AA7BA; }
      .roadmap-tier { background:rgba(255,255,255,.08); color:#E8ECF3; }
      .roadmap-tier.tier-bronze { background:rgba(229,168,123,.20); color:#E5A87B; }
      .roadmap-tier.tier-silver { background:rgba(237,241,246,.14); color:#EDF1F6; }
      .roadmap-tier.tier-gold { background:rgba(255,224,133,.20); color:#FFE085; }
      .roadmap-tier.tier-platinum { background:rgba(167,184,243,.20); color:#A7B8F3; }
      .roadmap-tier.tier-legendary { background:rgba(212,165,46,.22); color:#FFE085; }
      .roadmap-status-locked { background:rgba(255,255,255,.06); color:#9AA7BA; }
      .roadmap-status-earned { background:rgba(8,116,67,.24); color:#7CE5A8; }
      .roadmap-row.is-locked .badge-icon {
        background:linear-gradient(160deg, #1B2E55 0%, #142547 100%);
        color:rgba(255,255,255,.32);
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.18);
      }
      input, select, textarea, .date-trigger {
        background:#0B1A33 !important;
        color:#F1F4FA !important;
        border-color:#1B2E55 !important;
      }
      input::placeholder, textarea::placeholder { color:#5C6A85 !important; }
      .date-picker { color:#9AA7BA; }
      .date-trigger-value { color:#F1F4FA; }
      .date-trigger::before {
        background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F1F4FA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") no-repeat center / contain;
      }
      label { color:#E8ECF3; }
      .attempt-detail-result { color:#F1F4FA; }
      .timer-display.is-idle { color:#9AA7BA; }
      .timer-display.is-stopped { color:#7CE5A8; }
      .timer-status { color:#9AA7BA; }
      .judge-score-counters {
        background:#0E1F3F;
        border-color:#1B2E55;
      }
      .judge-counter { color:#9AA7BA; }
      .judge-counter + .judge-counter { border-left-color:#1B2E55; }
      .judge-counter strong { color:#F1F4FA; }
      .judge-counter.is-good strong { color:#7CE5A8; }
      .judge-counter.is-warning strong { color:#FFD487; }
      .pwa-install-banner {
        background:rgba(14,31,63,.88);
        border-color:rgba(255,255,255,.06);
        box-shadow:0 18px 40px rgba(0,0,0,.5);
      }
      .pwa-install-body strong { color:#F1F4FA; }
      .pwa-install-body span { color:#9AA7BA; }
      .pwa-install-icon { border-color:rgba(255,255,255,.08); }
      .pwa-install-dismiss { background:rgba(255,255,255,.06); color:#9AA7BA; }
      .pwa-ios-sheet { background:#0E1F3F; box-shadow:0 -12px 40px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.55); }
      .pwa-ios-close { background:rgba(255,255,255,.08); color:#9AA7BA; }
      .pwa-ios-mark { border-color:rgba(255,255,255,.08); }
      .pwa-ios-sheet h2 { color:#F1F4FA; }
      .pwa-ios-steps li { background:#0B1A33; color:#F1F4FA; }
      .pwa-ios-note { background:rgba(239,63,77,.14); color:#FFB9BF; }
      .pwa-ios-copy { background:#1457C8; }
      .pwa-ios-share-icon { color:#7CB2FF; }
      .reg-step-sub { color:#9AA7BA; }
      .profile-share-btn {
        border-color:rgba(255,255,255,.14);
        color:#E8ECF3;
      }
      .profile-share-btn:hover { background:rgba(255,255,255,.06); }
      .timeline-item { background:#0E1F3F; border-color:#1B2E55; }
      .timeline-item.is-pr { background:linear-gradient(180deg, #2B2308, #0E1F3F); border-color:rgba(240,165,0,.35); }
      .timeline-dot { box-shadow:0 0 0 3px #04102D, 0 0 0 4px rgba(20,87,200,.32); }
      .history-count { background:#0B1A33; color:#9AA7BA; }
      .rating-card { background:#0E1F3F; border-color:#1B2E55; box-shadow:0 6px 14px rgba(0,0,0,.4); }
      .rating-card-name { color:#F1F4FA; }
      .rating-card-result { color:#7CD1FF; }
      .rating-skeleton-card { background:#0E1F3F; border-color:#1B2E55; }
      .sk { background:linear-gradient(90deg, #142547 0%, #1B2E55 50%, #142547 100%); }
      .bottom-tabbar {
        background:rgba(14,31,63,.85);
        border-color:rgba(255,255,255,.08);
      }
      .bottom-tabbar a { color:#E8ECF3; }
      .pill { background:#0E1F3F; color:#9AA7BA; border-color:#1B2E55; }
      .qr-overlay-card,
      .attempt-detail-card { background:#0E1F3F; color:#F1F4FA; }
      .qr-overlay-title,
      .qr-overlay-id { color:#F1F4FA; }
      .attempt-detail-title { color:#F1F4FA; }
      .attempt-detail-list dd { color:#F1F4FA; }
      .status-chip.is-ok { background:rgba(34,160,107,.20); color:#7CE5A8; }
      .status-chip.is-bad { background:rgba(239,63,77,.22); color:#FF9AA4; }
      .draft-restored-banner { background:#3A2A06; color:#FFD487; }
    }
    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.001ms !important;
        scroll-behavior:auto !important;
      }
    }
    /* Pull-to-refresh indicator */
    #ptr-indicator {
      position:fixed;
      top:0;
      left:50%;
      z-index:60;
      transform:translate(-50%, -100%);
      display:flex;
      align-items:center;
      justify-content:center;
      width:46px;
      height:46px;
      border-radius:50%;
      background:#fff;
      color:var(--primary-red, #EF3F4D);
      box-shadow:0 10px 22px rgba(7,26,68,.18);
      pointer-events:none;
      transition:transform .18s ease;
    }
    #ptr-indicator.is-pulling { transform:translate(-50%, calc(var(--ptr,0px) - 46px)); }
    #ptr-indicator.is-refreshing { transform:translate(-50%, 18px); }
    #ptr-indicator svg { width:22px; height:22px; }
    #ptr-indicator.is-refreshing svg { animation:ptrSpin .8s linear infinite; }
    @keyframes ptrSpin { to { transform:rotate(360deg); } }
    /* a11y: stop decorative loops for users with vestibular sensitivity */
    @media (prefers-reduced-motion: reduce) {
      .sk,
      .qr-overlay-svg,
      .judge-net-dot,
      #ptr-indicator.is-refreshing svg { animation:none; }
    }
    /* Defensive overflow guard — prevents long button text from forcing parent width past viewport */
    .app-shell { overflow-x:hidden; }
    .app-shell button,
    .app-shell .pill,
    .app-shell a.account-home-button,
    .app-shell a.account-nav-button,
    .app-shell a.primary-cta {
      max-width:100%;
      white-space:normal;
      word-break:keep-all;
    }
    .app-shell .account-nav-row > a { width:100%; box-sizing:border-box; }
    .app-shell .form-card,
    .app-shell .home-search-panel,
    .app-shell .rating-list,
    .app-shell .judge-login,
    .app-shell .judge-session,
    .app-shell .account-profile { min-width:0; max-width:100%; }

/* ===================================================================== */
/* === Codex DESIGN POLISH 2026-05 (ported from aea9954) ============== */
/* ===================================================================== */
    /* ===================================================================== */
    /* === DESIGN POLISH 2026-05 — light ================================ */
    /* ===================================================================== */
    :root {
      --el-1:0 1px 2px rgba(15,23,42,.05), 0 1px 0 rgba(255,255,255,.6) inset;
      --el-2:0 6px 16px rgba(15,23,42,.08), 0 1px 0 rgba(255,255,255,.6) inset;
      --el-3:0 18px 38px rgba(15,23,42,.12), 0 1px 0 rgba(255,255,255,.6) inset;
      --el-red:0 14px 32px rgba(239,63,77,.28);
      --elev-1:var(--el-1);
      --elev-2:var(--el-2);
      --elev-3:var(--el-3);
    }
    body { font-feature-settings:"tnum", "ss01", "cv11"; }
    .card,
    form,
    table,
    .metric-card,
    .myrank,
    .podium-pod,
    .rating-cards .rank-row,
    .home-rating-body .geo-kpi,
    .home-rating-body .geo-card { box-shadow:var(--el-1); }
    .card:hover,
    .metric-card:hover,
    .podium-pod:hover,
    .rating-cards .rank-row:hover,
    .home-rating-body .geo-kpi:hover,
    .home-rating-body .geo-card:hover { box-shadow:var(--el-2); }

    .hero-rating-card {
      position:relative;
      isolation:isolate;
      overflow:hidden;
      background:
    radial-gradient(260px 190px at 100% 0%, rgba(239,63,77,.30), transparent 62%),
    linear-gradient(160deg, var(--navy-mid) 0%, var(--navy-base) 56%, var(--navy-dark) 100%);
      box-shadow:0 24px 48px -16px rgba(14,26,53,.45), 0 6px 18px -6px rgba(14,26,53,.32);
    }
    .hero-rating-card::before {
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background-image:linear-gradient(135deg, transparent 49%, rgba(255,255,255,.045) 49.5%, rgba(255,255,255,.045) 50%, transparent 50.5%);
      background-size:18px 18px;
    }
    .hero-rating-card::after {
      content:"";
      position:absolute;
      right:-28px;
      bottom:-28px;
      z-index:0;
      width:150px;
      height:150px;
      border-radius:50%;
      background:radial-gradient(closest-side, rgba(239,63,77,.28), transparent);
      filter:blur(20px);
      pointer-events:none;
    }
    .hero-logo-row { gap:8px; align-items:center; }
    .hero-logo-row img {
      height:40px;
      padding:0 8px;
      border-left:1px solid rgba(255,255,255,.24);
    }
    .hero-logo-row img:first-child { border-left:0; padding-left:0; }
    .hero-rating-copy h1 {
      font-size:50px;
      line-height:.92;
      font-weight:950;
      letter-spacing:0;
      font-variant-numeric:tabular-nums;
    }
    .hero-rating-copy p,
    .hero-rating-copy span { letter-spacing:0; }
    .hero-rating-pill {
      border-color:rgba(255,255,255,.22);
      background:rgba(255,255,255,.12);
      -webkit-backdrop-filter:blur(8px);
      backdrop-filter:blur(8px);
    }
    @media (max-width:360px) {
      .hero-rating-card::after { display:none; }
      .hero-rating-copy h1 { font-size:42px; }
      .hero-logo-row img { height:34px; padding:0 5px; }
    }

    .bottom-tabbar {
      left:50%;
      right:auto;
      bottom:calc(14px + env(safe-area-inset-bottom));
      width:min(400px, calc(100vw - 28px));
      min-height:68px;
      transform:translateX(-50%);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:0;
      padding:6px;
      border-radius:24px;
      background:rgba(255,255,255,.85);
      border:1px solid rgba(231,236,243,.7);
      box-shadow:0 12px 30px rgba(15,23,42,.12), 0 1px 0 rgba(255,255,255,.7) inset;
      -webkit-backdrop-filter:blur(20px) saturate(180%);
      backdrop-filter:blur(20px) saturate(180%);
      z-index:30;
    }
    .bottom-tabbar a {
      position:relative;
      flex:1;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:2px;
      min-height:54px;
      padding:7px 4px;
      border-radius:18px;
      color:var(--muted);
      background:transparent;
      box-shadow:none;
      transition:color .2s ease, transform .12s ease;
    }
    .bottom-tabbar a span {
      font-size:10px;
      font-weight:600;
      letter-spacing:0;
    }
    .bottom-tabbar svg { width:22px; height:22px; }
    .bottom-tabbar a:hover { color:var(--ink); background:transparent; }
    .bottom-tabbar a[aria-current="page"] {
      color:var(--brand-red);
      background:transparent;
      box-shadow:none;
    }
    .bottom-tabbar a[aria-current="page"]::before {
      content:"";
      position:absolute;
      top:-7px;
      left:50%;
      transform:translateX(-50%);
      width:18px;
      height:3px;
      border-radius:99px;
      background:var(--brand-red);
      box-shadow:0 0 12px rgba(239,63,77,.42);
    }

    .home-greeting {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      color:#fff;
      text-shadow:none;
    }
    .home-greeting h2 {
      margin:0;
      font-size:22px;
      line-height:1.14;
      font-weight:800;
      letter-spacing:0;
      color:#fff;
    }
    .home-greeting strong {
      color:#fff;
      font-size:inherit;
      font-weight:900;
      letter-spacing:0;
    }
    .home-greeting-date {
      display:block;
      margin-top:2px;
      font-size:13px;
      color:rgba(255,255,255,.74);
      font-weight:500;
      letter-spacing:0;
    }
    .myrank {
      position:relative;
      display:flex;
      align-items:center;
      gap:14px;
      width:100%;
      min-width:0;
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      padding:14px 16px;
      overflow:hidden;
      color:var(--ink);
      text-decoration:none;
    }
    .myrank-strip {
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:4px;
      background:linear-gradient(180deg, var(--brand-red), var(--brand-red-dark));
    }
    .myrank-pos {
      font-weight:900;
      font-size:34px;
      line-height:.9;
      letter-spacing:0;
      color:var(--ink);
      font-variant-numeric:tabular-nums;
    }
    .myrank-info {
      flex:1;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .myrank-info b {
      font-size:13px;
      font-weight:700;
      color:var(--ink);
      letter-spacing:0;
    }
    .myrank-meta {
      font-size:11px;
      color:var(--muted);
      letter-spacing:0;
      text-transform:uppercase;
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .myrank-delta {
      padding:5px 10px;
      border-radius:8px;
      background:#E8F7EE;
      color:#1B7A4A;
      font-size:11px;
      font-weight:800;
      letter-spacing:0;
      text-transform:uppercase;
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
    }
    .myrank-delta.is-down { background:#FFEDEF; color:var(--brand-red-deep); }
    .myrank-delta.is-flat { background:#F1F4F9; color:var(--muted); }
    .myrank-empty { min-height:64px; }
    .myrank-cta {
      color:var(--brand-red);
      font-size:20px;
      font-weight:900;
    }
    .home-myrank-card {
      display:block;
      padding:0;
      background:transparent;
      border-radius:var(--radius-lg);
      box-shadow:none;
    }
    .home-myrank-card.is-empty { padding:0; text-align:left; }
    .home-myrank-card.is-empty a { color:inherit; }

    .home-search-button { position:relative; padding-right:74px; }
    /* Home search bar must stay a single-line search field, not a role-action tile.
       Overrides the stale #rating-entry tile sizing (font-size:22px / min-height:82px). */
    #rating-entry.home-search-button {
      min-height:48px;
      font-size:17px;
      font-weight:400;
      line-height:1.2;
    }
    #rating-entry.home-search-button > span {
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .home-search-button::after {
      content:"";
      display:none;
      position:absolute;
      right:14px;
      top:50%;
      transform:translateY(-50%);
      padding:4px 7px;
      border-radius:8px;
      background:rgba(255,255,255,.76);
      color:var(--muted);
      font-size:11px;
      font-weight:800;
      letter-spacing:0;
      box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);
    }
    .home-search-button[data-shortcut="mac"]::after { content:"⌘ K"; display:block; }
    .home-search-button[data-shortcut="pc"]::after { content:"Ctrl K"; display:block; }
    @media (max-width:767px) {
      .home-search-button { padding-right:18px; }
      .home-search-button[data-shortcut]::after { display:none; }
    }
    .home-filter-row-icon {
      display:grid;
      place-items:center;
      width:24px;
      height:24px;
      flex:0 0 auto;
    }
    .home-filter-row-text {
      flex:1;
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:1px;
    }
    .home-filter-row-text b {
      font-size:14px;
      font-weight:600;
      color:var(--ink);
      letter-spacing:0;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .home-filter-row-text small {
      font-size:11px;
      color:var(--muted);
      font-weight:500;
      letter-spacing:0;
    }

    .app-shell .home-rating-body .geo-kpi-row {
      display:grid;
      grid-template-columns:1.4fr 1fr;
      gap:8px;
    }
    .app-shell .home-rating-body .geo-kpi {
      position:relative;
      overflow:hidden;
      min-height:78px;
      padding:13px 14px;
      border-radius:var(--radius-md);
      background:#fff;
      border:1px solid var(--line);
      transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }
    .app-shell .home-rating-body .geo-kpi:hover { transform:translateY(-2px); }
    .app-shell .home-rating-body .geo-kpi.is-big { grid-row:span 2; }
    .app-shell .home-rating-body .geo-kpi.is-red {
      background:linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
      border-color:rgba(239,63,77,.32);
      box-shadow:var(--el-red);
      color:#fff;
    }
    .app-shell .home-rating-body .geo-kpi.is-navy {
      background:linear-gradient(135deg, var(--navy-mid), var(--navy-base));
      border-color:rgba(7,26,68,.22);
      color:#fff;
    }
    .app-shell .home-rating-body .geo-kpi.is-red .geo-kpi-label,
    .app-shell .home-rating-body .geo-kpi.is-red .geo-kpi-value,
    .app-shell .home-rating-body .geo-kpi.is-navy .geo-kpi-label,
    .app-shell .home-rating-body .geo-kpi.is-navy .geo-kpi-value { color:#fff; }
    .app-shell .home-rating-body .geo-kpi-label {
      font-size:10px;
      color:var(--muted);
      font-weight:700;
      letter-spacing:0;
      text-transform:uppercase;
    }
    .app-shell .home-rating-body .geo-kpi-value {
      font-size:28px;
      line-height:1;
      font-weight:900;
      color:var(--ink);
      letter-spacing:0;
      font-variant-numeric:tabular-nums;
    }
    .geo-kpi.has-icon::after {
      content:attr(data-kpi-icon);
      position:absolute;
      right:10px;
      top:10px;
      display:grid;
      place-items:center;
      width:22px;
      height:22px;
      border-radius:8px;
      background:#F1F4F9;
      color:var(--navy-base);
      font-size:10px;
      font-weight:900;
      letter-spacing:0;
    }
    .geo-kpi-bars {
      display:grid;
      grid-template-columns:repeat(16, 1fr);
      gap:3px;
      margin-top:auto;
      padding-top:10px;
    }
    .geo-kpi-bars::before {
      content:"";
      grid-column:1 / span 12;
      height:5px;
      border-radius:99px;
      background:repeating-linear-gradient(90deg, var(--brand-red) 0 5px, transparent 5px 8px);
    }
    @media (min-width:600px) {
      .app-shell .home-rating-body .geo-kpi-row { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    }

    .app-shell .home-rating-body .geo-grid > .geo-card:nth-child(1) h3 {
      color:rgba(255,255,255,.72);
      font-size:11px;
      font-weight:700;
      letter-spacing:0;
      text-transform:uppercase;
    }
    .app-shell .home-rating-body .geo-grid > .geo-card:nth-child(1) .geo-donut {
      width:110px;
      height:110px;
      box-shadow:0 18px 38px rgba(0,0,0,.20);
    }
    .app-shell .home-rating-body .geo-grid > .geo-card:nth-child(1) .geo-donut::before {
      inset:11px;
      background:var(--navy-base);
    }
    .app-shell .home-rating-body .geo-grid > .geo-card:nth-child(1) .geo-donut::after {
      content:"";
      position:absolute;
      inset:-18px;
      border-radius:50%;
      background:radial-gradient(closest-side, rgba(239,63,77,.28), transparent);
      filter:blur(16px);
      opacity:.55;
      pointer-events:none;
    }
    .app-shell .home-rating-body .geo-grid > .geo-card:nth-child(1) .geo-donut-label {
      z-index:1;
      font-size:14px;
      font-weight:900;
      letter-spacing:0;
    }
    .app-shell .home-rating-body .geo-gender-legend {
      gap:10px;
      min-width:130px;
    }
    .app-shell .home-rating-body .geo-gender-legend li {
      display:grid;
      grid-template-columns:10px 1fr;
      gap:2px 8px;
      align-items:center;
    }
    .app-shell .home-rating-body .geo-gender-legend b {
      grid-column:2;
      font-size:22px;
      line-height:1;
      font-weight:800;
      font-variant-numeric:tabular-nums;
    }
    .app-shell .home-rating-body .geo-gender-legend span:last-child {
      grid-column:2;
      color:rgba(255,255,255,.72);
      font-size:11px;
    }

    .app-shell .home-rating-body .geo-org-list {
      list-style:none;
      padding:0;
      margin:0;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .app-shell .home-rating-body .geo-org-list .geo-org-row {
      display:grid;
      grid-template-columns:54px minmax(0,1fr) 34px;
      align-items:center;
      gap:8px;
      padding:0;
      background:transparent;
      border-radius:0;
    }
    .geo-org-lbl {
      color:var(--ink);
      font-size:12px;
      font-weight:700;
    }
    .geo-org-bar {
      height:7px;
      border-radius:99px;
      background:#E9EEF6;
      overflow:hidden;
    }
    .geo-org-bar span {
      display:block;
      height:100%;
      border-radius:inherit;
      background:var(--ink);
      transition:width .25s ease;
    }
    .geo-org-bar.is-red span { background:var(--brand-red); }
    .geo-org-bar.is-navy span { background:var(--navy-mid); }
    .geo-org-bar.is-blue span { background:var(--blue-accent); }
    /* White fill needs an inset outline to stay visible on the light track. */
    .geo-org-bar.is-white span { background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
    .app-shell .home-rating-body .geo-org-list b {
      color:var(--ink);
      font-size:13px;
      font-weight:900;
      text-align:right;
      font-variant-numeric:tabular-nums;
    }

    .podium[hidden] { display:none; }
    .podium {
      display:grid;
      grid-template-columns:1fr 1.15fr 1fr;
      gap:6px;
      /* stretch keeps all three pods equal height regardless of how many
         lines the finalist name wraps to, so the 1st-place lift always
         reads as the highest pod instead of skewing under a longer name. */
      align-items:stretch;
      margin:18px 0 14px;
    }
    .podium-pod {
      position:relative;
      overflow:hidden;
      min-width:0;
      padding:14px 8px 12px;
      text-align:center;
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius-md);
    }
    .podium-pod.is-1 {
      padding-top:28px;
      background:linear-gradient(180deg, #FFF8E1 0%, #fff 62%);
      border-color:rgba(232,180,58,.4);
      transform:translateY(-8px);
    }
    .podium-crown {
      position:absolute;
      top:5px;
      left:50%;
      transform:translateX(-50%);
      font-size:14px;
      line-height:1;
      /* Force monochrome text glyph so iOS/Android don't upscale ★ into a
         color emoji that overlaps the medal below. */
      font-family:system-ui, sans-serif;
      pointer-events:none;
      color:#E8B43A;
    }
    /* Per-place crown: lift 2nd/3rd stars off their avatars (only when shown)
       and differentiate them from the larger gold 1st-place star. */
    .podium-pod.is-1 .podium-crown { font-size:16px; }
    .podium-pod.is-2 .podium-crown { font-size:11px; color:#8C99AB; }
    .podium-pod.is-3 .podium-crown { font-size:11px; color:#C9885A; }
    .podium-pod.is-2.has-crown,
    .podium-pod.is-3.has-crown { padding-top:24px; }
    .podium-av,
    .rank-av {
      display:grid;
      place-items:center;
      color:#fff;
      font-weight:800;
      letter-spacing:0;
    }
    .podium-av {
      width:44px;
      height:44px;
      border-radius:50%;
      margin:0 auto 6px;
      font-size:13px;
    }
    .podium-av::after,
    .rank-av::after { content:attr(data-initials); }
    .podium-pod.is-1 .podium-av { background:linear-gradient(135deg, #F5C44C, #E8B43A); box-shadow:0 6px 14px rgba(232,180,58,.35); }
    .podium-pod.is-2 .podium-av { background:linear-gradient(135deg, #C5CDD9, #9CA8B8); }
    .podium-pod.is-3 .podium-av { background:linear-gradient(135deg, #DDA980, #C9885A); }
    .podium-nm,
    .podium-meta {
      white-space:normal;
      overflow-wrap:anywhere;
      word-break:break-word;
    }
    .podium-nm {
      color:var(--ink);
      font-size:11px;
      font-weight:700;
      line-height:1.2;
      letter-spacing:0;
      /* Reserve a constant 2-line height (clamp longer names) so the points
         and meta rows line up across all three pods regardless of name
         length. Without this a wrapping name pushes that pod's number down
         and the finalists' results look misaligned. */
      min-height:2.4em;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .podium-pts {
      margin-top:4px;
      color:var(--ink);
      font-size:18px;
      font-weight:900;
      letter-spacing:0;
      font-variant-numeric:tabular-nums;
    }
    .podium-pod.is-1 .podium-pts { color:#B78313; font-size:22px; }
    .podium-meta {
      margin-top:2px;
      color:var(--muted);
      font-size:9px;
      letter-spacing:0;
      text-transform:uppercase;
      font-variant-numeric:tabular-nums;
    }
    @media (max-width:360px) {
      .podium { gap:4px; }
      .podium-pod { padding-left:5px; padding-right:5px; }
      .podium-av { width:38px; height:38px; }
    }

    #rating-participants-block { overflow:visible; }
    .rating-cards.rank-list {
      list-style:none;
      padding:0;
      margin:0;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .rating-cards .rank-row {
      position:relative;
      display:grid;
      grid-template-columns:26px 34px minmax(0,1fr) auto 14px;
      gap:8px;
      align-items:center;
      min-width:0;
      padding:10px 14px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:var(--radius-md);
      transition:transform .18s ease, box-shadow .18s ease;
    }
    .rating-cards .rank-row[data-expandable] { cursor:pointer; }
    .rating-cards .rank-row:hover { transform:translateX(2px); }
    /* Expand-on-tap: chevron is a trailing disclosure in its own grid column
       (last DOM child before .rank-details), vertically centred at the row's
       right edge — clear of the rank number and the result. */
    .rank-chevron {
      align-self:center;
      justify-self:center;
      width:12px;
      height:12px;
      background:currentColor;
      color:var(--muted);
      opacity:.55;
      -webkit-mask:no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      mask:no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
      transition:transform .22s var(--ease-out, ease);
    }
    .rank-row.is-expanded .rank-chevron { transform:rotate(180deg); color:var(--brand-red); opacity:1; }
    .rank-details {
      grid-column:1 / -1;
      display:grid;
      gap:6px;
      overflow:hidden;
      max-height:0;
      opacity:0;
      margin-top:0;
      transition:max-height .26s var(--ease-out, ease), opacity .2s ease, margin-top .26s var(--ease-out, ease);
    }
    .rank-row.is-expanded .rank-details {
      max-height:260px;
      opacity:1;
      margin-top:6px;
      padding-top:10px;
      border-top:1px solid var(--line);
    }
    .rank-detail {
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:12px;
    }
    .rank-detail-k {
      flex:0 0 auto;
      color:var(--muted);
      font-size:11px;
      font-weight:600;
    }
    .rank-detail-v {
      min-width:0;
      text-align:right;
      color:var(--ink);
      font-size:12.5px;
      font-weight:700;
      line-height:1.3;
    }
    @media (prefers-reduced-motion: reduce) {
      .rank-chevron, .rank-details { transition:none; }
    }
    .rating-cards .rank-row.is-finalist.is-gold {
      padding:10px 14px;
      border-width:1px;
      border-color:rgba(232,180,58,.40);
      background:#fff;
      color:var(--ink);
    }
    .rating-cards .rank-row.is-finalist.is-gold::before,
    .rating-cards .rank-row.is-finalist.is-gold::after { display:none; }
    .rating-cards .rank-row.is-finalist.is-gold .rating-card-name,
    .rating-cards .rank-row.is-finalist.is-gold .rating-card-id,
    .rating-cards .rank-row.is-finalist.is-gold .rating-card-result,
    .rating-cards .rank-row.is-finalist.is-gold .rank-tag {
      color:inherit;
      font-size:inherit;
      letter-spacing:0;
    }
    .rating-cards .rank-row.is-finalist.is-gold .rating-card-name { color:var(--ink); font-size:14px; }
    .rating-cards .rank-row.is-finalist.is-gold .rating-card-id { color:var(--muted); }
    .rating-cards .rank-row.is-finalist.is-gold .rating-card-result { color:var(--ink); font-size:15px; }
    .rating-cards .rank-row.is-finalist.is-gold .rank-tag { color:var(--muted); font-size:10px; }
    .rank-pos.rating-card-place {
      width:auto;
      height:auto;
      display:block;
      background:transparent;
      border:0;
      box-shadow:none;
      color:var(--muted);
      font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size:13px;
      font-weight:700;
      letter-spacing:0;
      text-align:right;
      font-variant-numeric:tabular-nums;
    }
    .rank-pos.rating-card-place.is-gold,
    .rank-pos.rating-card-place.is-silver,
    .rank-pos.rating-card-place.is-bronze {
      width:auto;
      height:auto;
      background:transparent;
      box-shadow:none;
    }
    .rank-pos.rating-card-place.is-gold { color:#B78313; }
    .rank-pos.rating-card-place.is-silver { color:#6B7482; }
    .rank-pos.rating-card-place.is-bronze { color:#9A5B17; }
    .rank-av {
      width:36px;
      height:36px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--navy-mid), var(--navy-base));
      font-size:12px;
    }
    .rank-row.is-gold .rank-av { background:linear-gradient(135deg, #F5C44C, #E8B43A); }
    .rank-row.is-silver .rank-av { background:linear-gradient(135deg, #C5CDD9, #9CA8B8); }
    .rank-row.is-bronze .rank-av { background:linear-gradient(135deg, #DDA980, #C9885A); }
    .rank-info {
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .rank-info .rating-card-name {
      color:var(--ink);
      font-size:14px;
      font-weight:800;
      line-height:1.2;
      letter-spacing:0;
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      overflow-wrap:anywhere;
    }
    .rank-info .rating-card-id {
      color:var(--muted);
      font-size:11px;
      font-weight:600;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .rank-right {
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:3px;
      min-width:54px;
    }
    .rank-pts.rating-card-result {
      color:var(--ink);
      font-size:15px;
      font-weight:900;
      letter-spacing:0;
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
    }
    .rank-tag {
      padding:3px 7px;
      border-radius:8px;
      background:#F1F4F9;
      color:var(--muted);
      font-size:10px;
      font-weight:800;
      letter-spacing:0;
      text-transform:uppercase;
      white-space:nowrap;
    }
    .rank-row.is-me {
      background:linear-gradient(135deg, #FFF5F6, var(--cream));
      border-color:rgba(239,63,77,.3);
    }
    .rank-row.is-me .rank-pos { color:var(--brand-red); font-weight:900; }
    .rank-row.is-me .rank-av { background:linear-gradient(135deg, var(--brand-red), var(--brand-red-dark)); }
    .bottom-tabbar a:focus-visible,
    .home-search-button:focus-visible,
    .rating-cards .rank-row:focus-visible,
    .podium-pod:focus-visible,
    .myrank:focus-visible {
      outline:2px solid var(--brand-red);
      outline-offset:3px;
      border-radius:inherit;
    }
    .home-filter-row:focus-visible {
      outline:2px solid var(--brand-red);
      outline-offset:2px;
    }
    @media (max-width:360px) {
      .rating-cards .rank-row {
        grid-template-columns:28px 32px minmax(0,1fr);
      }
      .rank-right {
        grid-column:3;
        align-items:flex-start;
        flex-direction:row;
      }
      .rank-chevron { display:none; }
    }
    @media (prefers-color-scheme: dark) {
      /* === Polish 2026-05 — dark parity === */
      .myrank {
        background:#0E1F3F;
        border-color:#1B2E55;
        color:#F1F4FA;
      }
      .myrank-info b { color:#F1F4FA; }
      .myrank-pos { color:#F1F4FA; }
      .myrank-meta { color:#9AA7BA; }
      .myrank-delta { background:#0F2A1E; color:#7FE4A8; }
      .myrank-delta.is-down { background:#2A1417; color:#FF9AA3; }
      .myrank-delta.is-flat { background:#142547; color:#9AA7BA; }

      .podium-pod {
        background:#0E1F3F;
        border-color:#1B2E55;
      }
      .podium-pod.is-1 {
        background:linear-gradient(180deg, #2A2208 0%, #0E1F3F 62%);
        border-color:rgba(232,180,58,.45);
      }
      .podium-nm { color:#F1F4FA; }
      .podium-pts { color:#F1F4FA; }
      .podium-pod.is-1 .podium-pts { color:#F5C44C; }
      .podium-meta { color:#9AA7BA; }

      .rating-cards .rank-row {
        background:#0E1F3F;
        border-color:#1B2E55;
      }
      .rating-cards .rank-row.is-finalist.is-gold {
        background:#0E1F3F;
        border-color:rgba(232,180,58,.40);
      }
      .rank-info .rating-card-name { color:#F1F4FA; }
      .rank-info .rating-card-id { color:#9AA7BA; }
      .rank-pts.rating-card-result { color:#F1F4FA; }
      .rank-pos.rating-card-place { color:#9AA7BA; }
      .rank-tag {
        background:#142547;
        color:#9AA7BA;
      }
      .rank-row.is-me {
        background:linear-gradient(135deg, #2A0F12, #1A0A0C);
        border-color:rgba(239,63,77,.45);
      }
      .rank-row.is-me .rank-pos { color:#FF6B75; }

      .bottom-tabbar {
        background:rgba(14,31,63,.85);
        border-color:rgba(255,255,255,.08);
      }
      .bottom-tabbar a { color:#9AA7BA; }
      .bottom-tabbar a:hover { color:#F1F4FA; }
      .bottom-tabbar a[aria-current="page"] { color:#FF6B75; }
      .bottom-tabbar a[aria-current="page"]::before {
        background:#FF6B75;
        box-shadow:0 0 12px rgba(255,107,117,.55);
      }

      .app-shell .home-rating-body .geo-kpi {
        background:#0B1A33;
        border-color:#1B2E55;
      }
      .app-shell .home-rating-body .geo-kpi.is-red {
        background:linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
        border-color:rgba(239,63,77,.32);
      }
      .app-shell .home-rating-body .geo-kpi.is-navy {
        background:linear-gradient(135deg, var(--navy-mid), var(--navy-base));
        border-color:rgba(7,26,68,.22);
      }
      .app-shell .home-rating-body .geo-kpi-value { color:#F1F4FA; }
      .geo-kpi.has-icon::after {
        background:#142547;
        color:#7CB2FF;
      }

      .geo-org-bar { background:#142547; }
      .geo-org-bar span { background:#F1F4FA; }
      .geo-org-bar.is-red span { background:var(--brand-red); }
      .geo-org-bar.is-navy span { background:#7CB2FF; }
      .geo-org-bar.is-blue span { background:#7CB2FF; }
      .geo-org-bar.is-white span { background:#fff; box-shadow:none; }
      .geo-org-lbl { color:#F1F4FA; }
      .app-shell .home-rating-body .geo-org-list b { color:#F1F4FA; }

      .home-search-button::after {
        background:rgba(20,37,71,.85);
        color:#9AA7BA;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
      }
      .home-filter-row-text b { color:#F1F4FA; }
      .home-filter-row-text small { color:#9AA7BA; }

      .bottom-tabbar a:focus-visible,
      .home-search-button:focus-visible,
      .rating-cards .rank-row:focus-visible,
      .podium-pod:focus-visible,
      .myrank:focus-visible,
      .home-filter-row:focus-visible {
        outline-color:#FF6B75;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .card,
      .metric-card,
      .podium-pod,
      .rating-cards .rank-row,
      .home-rating-body .geo-kpi,
      .home-rating-body .geo-card,
      .bottom-tabbar a,
      .home-search-button,
      .geo-org-bar span {
        transition:none !important;
      }
      .rating-cards .rank-row:hover,
      .home-rating-body .geo-kpi:hover,
      .home-rating-body .geo-card:hover,
      .podium-pod:hover {
        transform:none !important;
      }
    }

    /* Form validation states (profile editor) */
    .field-error { display:block; margin-top:4px; color:var(--color-primary); font-size:13px; line-height:1.3; }
    input.is-invalid { border-color:var(--color-primary); box-shadow:0 0 0 1px var(--color-primary); }
    .form-error { color:var(--color-primary); font-size:14px; margin:8px 0 0; }
    .form-ok { color:var(--success-green); font-size:14px; margin:8px 0 0; }

    /* ── Online submission + judge review (see scripts/pages/participant-submit.mjs,
          scripts/pages/judge-review.mjs). Inherits the surrounding screen's palette:
          participant-app is light, judge-app is dark, so colours stay on currentColor. */
    .online-submit-fieldset {
      border:1px solid var(--soft-border);
      border-radius:16px;
      padding:12px 14px;
      margin:12px 0;
    }
    .judge-app .online-submit-fieldset { border-color:rgba(255,255,255,.14); }
    .online-submit-fieldset legend { font-size:14px; font-weight:600; padding:0 6px; }
    .online-time-inputs { display:flex; gap:8px; }
    .online-time-inputs label { flex:1; display:flex; flex-direction:column; gap:4px; font-size:13px; }
    .online-time-inputs input { text-align:center; font-variant-numeric:tabular-nums; }
    .online-video-label { display:flex; flex-direction:column; gap:4px; }
    .online-submit-hint { font-size:13px; line-height:1.45; color:var(--muted-text); margin:8px 0 12px; }
    .judge-app .online-submit-hint { color:rgba(255,255,255,.72); }

    .online-review-queue { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
    .online-review-card {
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:14px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.08);
      color:#fff;
    }
    .online-review-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .online-review-head strong { color:#fff; }

    /* The athlete's identity on the participant (light) screen. Cannot reuse .participant-card:
       shell.css redefines that class later with white text for the dark judge screen. */
    .online-athlete-card {
      display:flex;
      flex-direction:column;
      gap:2px;
      padding:12px 14px;
      border:1px solid var(--soft-border);
      border-radius:14px;
      background:var(--color-surface);
      margin-bottom:4px;
    }
    .online-athlete-card strong { font-size:16px; }
    .online-athlete-card span { font-size:13px; color:var(--muted-text); }
    .online-review-segment,
    .online-review-comment { font-size:13px; color:rgba(255,255,255,.72); margin:0; }
    .online-review-claim { margin:0; font-variant-numeric:tabular-nums; }
    .online-review-actions { display:flex; flex-direction:column; gap:8px; }
    .online-review-actions label { display:flex; flex-direction:column; gap:4px; font-size:13px; }
    .online-review-status:empty { display:none; }
    .online-review-status { font-size:13px; color:rgba(255,255,255,.82); }

    /* Participant's own submission history — the screen where a judge's rejection reason
       finally reaches the person who filmed the run. */
    .online-history { margin-top:20px; }
    .online-history h2 { font-size:16px; margin:0 0 10px; }
    .online-history-item {
      border:1px solid var(--soft-border);
      border-left-width:4px;
      border-radius:12px;
      padding:12px 14px;
      margin-bottom:10px;
      background:var(--color-surface);
    }
    .online-history-item.is-ok { border-left-color:var(--success-green, #2E9E5B); }
    .online-history-item.is-warn { border-left-color:var(--color-primary); }
    .online-history-item.is-pending { border-left-color:var(--blue-accent); }
    .online-history-item.is-muted { border-left-color:var(--soft-border); opacity:.72; }
    .online-history-head {
      display:flex; align-items:baseline; justify-content:space-between; gap:10px;
    }
    .online-history-head strong { font-size:18px; font-variant-numeric:tabular-nums; }
    .online-history-status { font-size:13px; color:var(--muted-text); text-align:right; }
    .online-history-date { font-size:12px; color:var(--muted-text); margin:4px 0 0; }
    .online-history-reason { font-size:13px; line-height:1.45; margin:8px 0 0; }
    .online-history-video { font-size:13px; display:inline-block; margin-top:8px; }