:root {
    --org: #e67e22;
    --ino: #27ae60;
    --dark: #2c3e50;
    --muted: #6d7c86;
    --bg: #eef5f2;
    --panel: rgba(255,255,255,0.9);
}
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; -webkit-text-size-adjust: 100%; }
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:
      radial-gradient(circle at top left, rgba(39,174,96,0.16), transparent 34%),
      radial-gradient(circle at bottom right, rgba(230,126,34,0.13), transparent 32%),
      linear-gradient(135deg, #f7fbf9 0%, var(--bg) 48%, #edf3f7 100%);
  }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .hidden { display: none !important; }

  /* Pantalla de selecció */
  #home {
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 25px;
    padding: max(25px, env(safe-area-inset-top)) max(25px, env(safe-area-inset-right)) max(25px, env(safe-area-inset-bottom)) max(25px, env(safe-area-inset-left));
    text-align: center;
  }
  .home-shell {
    width: 100%;
    max-width: 960px;
    background: var(--panel);
    border: 1px solid rgba(255,255,255,0.72);
    border-radius: 28px;
    padding: 34px;
    box-shadow: 0 22px 60px rgba(44,62,80,0.14);
    backdrop-filter: blur(12px);
  }
  .home-hero {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 760px;
    margin: 0 auto 14px;
    padding: 8px 10px;
    border-radius: 26px;
    background: #fff;
    border: 1px solid rgba(201,234,213,0.86);
    box-shadow: 0 12px 30px rgba(39,174,96,0.13);
  }
  .brand-logo-img {
    display: block;
    width: 100%;
    height: auto;
  }
  #home .catalog-badge {
    display: flex; align-items: center; justify-content: center;
    width: max-content; max-width: 100%;
    margin: 0 0 16px; padding: 7px 14px; border-radius: 999px;
    background: #eaf7ef; color: #218c4f; border: 1px solid #bfe5cd;
    font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em;
  }
  #home p.sub { color: var(--dark); margin: 0 0 10px 0; font-size: 1.12rem; font-weight: 800; }
  #home p.intro { color: var(--muted); margin: 0 auto 0; font-size: 1rem; max-width: 670px; line-height: 1.5; }
  .selector-card {
    margin-top: 28px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(248,250,251,0.78);
    border: 1px solid #e3ece8;
  }
  #home p.prompt { color: #7f8c8d; margin: 0 0 14px 0; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  .tria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; }
  .tria-btn {
    border: 1px solid #e0e8e5; border-radius: 18px; padding: 20px 18px; cursor: pointer;
    color: var(--dark); font-size: 1rem; font-weight: 800; background: white;
    box-shadow: 0 8px 22px rgba(44,62,80,0.08);
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    display: grid; grid-template-columns: auto 1fr;
    align-items: center; gap: 13px; line-height: 1.2; text-align: left;
  }
  .tria-btn strong { display: block; font-size: 1.22rem; margin-bottom: 0; }
  .tria-btn small { display: block; color: var(--muted); font-size: 0.82rem; font-weight: 700; line-height: 1.3; }
  .tria-btn .ic {
    width: 48px; height: 48px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.5rem; box-shadow: inset 0 -10px 18px rgba(0,0,0,0.08);
  }
  .tria-btn .ic svg {
    width: 36px;
    height: 36px;
    display: block;
  }
  .ic-benze svg polygon,
  .ic-benze svg line,
  .ic-flasc svg path:not(.flasc-liquid) {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ic-flasc svg .flasc-liquid {
    fill: currentColor;
    opacity: 0.22;
    stroke: none;
  }
  .ic-flasc svg .flasc-liquid-line {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.9;
  }
  .tria-btn:active { transform: scale(0.985); box-shadow: 0 4px 12px rgba(44,62,80,0.12); }
  @media (hover:hover) {
    .tria-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(44,62,80,0.13); }
  }
  .tria-org:hover, .tria-org:focus { border-color: rgba(230,126,34,0.45); }
  .tria-ino:hover, .tria-ino:focus { border-color: rgba(39,174,96,0.45); }
  .tria-org .ic { background: var(--org); }
  .tria-ino .ic { background: var(--ino); }
  .top-menu {
    position: fixed; z-index: 40; top: 10px; top: max(10px, env(safe-area-inset-top)); right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .account-toggle,
  .top-menu-toggle {
    width: 34px;
    height: 28px;
    border: 1px solid #d5dce0;
    background: rgba(255,255,255,0.86);
    color: #8a98a1;
    border-radius: 999px;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    backdrop-filter: blur(6px);
  }
  .account-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #218c4f;
  }
  .account-toggle.account-authenticated {
    width: auto;
    padding: 0 9px 0 7px;
    gap: 5px;
  }
  .account-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 900;
  }
  .account-toggle svg {
    width: 18px;
    height: 18px;
    display: block;
  }
  .account-toggle svg circle,
  .account-toggle svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  @media (hover:hover) {
    .top-menu-toggle:hover,
    .account-toggle:hover { background: white; color: var(--dark); }
  }
  .top-menu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    padding: 8px;
    border: 1px solid #d5dce0;
    background: rgba(255,255,255,0.96);
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(24,36,44,0.18);
    backdrop-filter: blur(6px);
  }
  .account-menu-panel { right: 40px; }
  .account-menu-name {
    padding: 4px 8px 10px;
    color: #218c4f;
    font-size: 0.84rem;
    font-weight: 900;
    border-bottom: 1px solid #edf1ef;
  }
  .account-feedback {
    margin: 5px 8px 8px;
    color: #b74332;
    font-size: 0.76rem;
    line-height: 1.35;
    font-weight: 700;
  }
  .account-feedback.ok { color: #218c4f; }
  .account-logout { color: #b64332; }
  .account-delete { color: #b64332; }
  .top-menu-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--dark);
    border-radius: 11px;
    padding: 9px 10px;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
  }
  #stats-title::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: url("formularia-icon-192.png") center / cover no-repeat;
    box-shadow: 0 2px 6px rgba(24,36,44,0.14);
  }
  #stats-title {
    display: flex;
    align-items: center;
    gap: 9px;
  }
  #stats-title::before {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }
  @media (hover:hover) { .top-menu-item:hover { background: #eef5f2; } }
  .top-menu-language {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--dark);
    border-radius: 11px;
    padding: 9px 10px;
    text-align: left;
    font-size: 0.82rem;
    border-top: 1px solid #edf1ef;
    border-bottom: 1px solid #edf1ef;
  }
  .top-menu-language[hidden] { display: none !important; }
  @media (hover:hover) { .top-menu-language:hover { background: #eef5f2; } }
  .top-menu-language-label {
    color: var(--dark);
    font-size: inherit;
    font-weight: 800;
  }
  .idiomes {
    display: inline-flex; align-items: center; gap: 4px;
    border: 0; background: transparent; color: #a0abb2;
    border-radius: 999px; padding: 0; box-shadow: none;
  }
  .idioma-btn {
    border: 0; background: transparent; color: #8a98a1; cursor: pointer;
    border-radius: 999px; padding: 3px 5px; font-weight: 800; font-size: 0.68rem;
    line-height: 1;
  }
  .idioma-btn.selected { background: var(--dark); color: white; }
  .idiomes.bloquejat { opacity: 0.45; }
  .idiomes.bloquejat .idioma-btn,
  .idioma-btn:disabled { cursor: default; }
  .idioma-btn:focus { outline: 2px solid rgba(44,62,80,0.25); outline-offset: 2px; }

  /* Vista d'app (iframe) */
  #appview { display: none; flex-direction: column; height: 100vh; height: 100dvh; }
  #appbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px; position: relative;
    background: linear-gradient(135deg, #24343d 0%, #1c2930 100%); color: white;
    padding: 10px 76px 10px 14px;
    padding: max(10px, env(safe-area-inset-top)) max(76px, calc(12px + env(safe-area-inset-right))) 10px max(14px, env(safe-area-inset-left));
    box-shadow: 0 3px 14px rgba(24,36,44,0.18);
  }
  #appbar button {
    flex: 0 0 auto; position: relative; z-index: 1;
    background: rgba(255,255,255,0.86); color: #8a98a1; border: 1px solid #d5dce0;
    padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; cursor: pointer; font-weight: 800;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06); line-height: 1;
    backdrop-filter: blur(6px);
    transition: background 0.15s, color 0.15s, transform 0.15s;
  }
  @media (hover:hover) { #appbar button:hover { background: white; color: var(--dark); } }
  #appbar button:active { transform: translateY(1px); background: white; color: var(--dark); }
  #appbar .titol {
    position: absolute; left: 50%; transform: translateX(-50%);
    width: calc(100% - 190px); max-width: 360px; min-width: 0;
    font-weight: bold; font-size: 1.02rem;
    display:flex; align-items:center; justify-content:center; gap:8px;
    pointer-events: none;
  }
  #appbar .app-logo-badge {
    display:inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    background: var(--org); color: white; padding: 6px 14px;
    border-radius: 999px 999px 6px 999px; font-weight: 700; border: 2px solid rgba(255,255,255,0.55);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); line-height: 1.1; white-space: nowrap;
  }
  #appbar .app-logo-badge.ino { background: var(--ino); }
  #appbar .app-logo-badge-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(48vw, 270px);
    height: 42px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #appbar .app-logo-badge.app-logo-badge-img.ino {
    background: transparent;
  }
  #appbar .app-logo-badge-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  /* El wrap fa el scroll (no l'iframe), que ajuda dins de sheets d'iOS */
  #frame-wrap { flex: 1 1 auto; min-height: 0; position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  iframe { border: none; width: 100%; height: 100%; display: block; background: var(--bg); }
  .help-link {
    margin-top: 10px;
    border: 1px solid #d5dce0;
    background: rgba(255,255,255,0.86);
    color: #8a98a1;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    backdrop-filter: blur(6px);
  }
  @media (hover:hover) { .help-link:hover { background: white; color: var(--dark); } }
  .help-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(24,36,44,0.46);
  }
  .help-modal.visible { display: flex; }
  .help-card {
    position: relative;
    width: min(100%, 560px);
    max-height: min(86vh, 620px);
    overflow: auto;
    background: rgba(255,255,255,0.98);
    color: var(--dark);
    border-radius: 22px;
    padding: 24px;
    text-align: left;
    box-shadow: 0 22px 60px rgba(24,36,44,0.24);
    border: 1px solid rgba(255,255,255,0.72);
  }
  .help-card h2 {
    margin: 0 34px 16px 0;
    font-size: 1.35rem;
  }
  .help-section {
    padding: 14px 0;
    border-top: 1px solid #e5ece8;
  }
  .help-section h3 {
    margin: 0 0 6px;
    color: #218c4f;
    font-size: 0.98rem;
  }
  .help-section p {
    white-space: pre-line;
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
  }
  .help-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: #eef2f4;
    color: var(--dark);
    font-size: 1.25rem;
    font-weight: 900;
    cursor: pointer;
    line-height: 30px;
  }
  .stats-table-wrap {
    overflow-x: auto;
  }
  .stats-switch-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0 14px;
    border-top: 1px solid #e5ece8;
  }
  .stats-switch {
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 26px;
    cursor: pointer;
  }
  .stats-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .stats-switch span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d8e1df;
    transition: background 0.15s;
  }
  .stats-switch span::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 2px 6px rgba(24,36,44,0.22);
    transition: transform 0.15s;
  }
  .stats-switch input:checked + span {
    background: #27ae60;
  }
  .stats-switch input:checked + span::after {
    transform: translateX(20px);
  }
  .stats-save-label {
    color: var(--dark);
    font-weight: 900;
    line-height: 1.2;
  }
  .stats-save-help {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.4;
  }
  .stats-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
  }
  .stats-card {
    min-width: 0;
    border: 1px solid #dfe9e4;
    background: #fbfdfc;
    border-radius: 14px;
    padding: 11px 10px;
  }
  .stats-card small {
    display: block;
    margin-bottom: 5px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .stats-card b {
    display: block;
    color: var(--dark);
    font-size: 1rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .stats-card span {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
  }
  .stats-card-good {
    border-color: #cbead6;
    background: #f3fbf6;
  }
  .stats-card-review {
    border-color: #f3dfc4;
    background: #fffaf2;
  }
  .stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
  }
  .stats-table th,
  .stats-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #e5ece8;
    text-align: right;
    vertical-align: top;
  }
  .stats-table th:first-child,
  .stats-table td:first-child {
    text-align: left;
  }
  .stats-table tfoot td {
    font-weight: 900;
    color: var(--dark);
    border-top: 2px solid #dfe9e4;
    border-bottom: 0;
  }
  .stats-table .stats-group td {
    padding-top: 14px;
    padding-bottom: 6px;
    background: #f4faf6;
    color: #218c4f;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    border-bottom: 1px solid #dcebe2;
  }
  .stats-table .stats-group-total td {
    background: #fbfdfc;
    color: var(--dark);
    font-weight: 900;
    border-bottom: 2px solid #dfe9e4;
  }
  .stats-kind {
    display: block;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
  }
  .stats-clear {
    width: 100%;
    margin-top: 12px;
    border: 1px solid #f1c4bd;
    background: #fff5f3;
    color: #b74332;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 800;
    cursor: pointer;
  }
  @media (hover:hover) { .stats-clear:hover { background: #ffe9e5; } }
  .stats-confirm-modal {
    z-index: 96;
  }
  .stats-confirm-card {
    width: min(100%, 390px);
    text-align: center;
    padding: 24px 22px;
  }
  .stats-confirm-card h2 {
    margin: 0 0 8px;
    color: var(--dark);
    font-size: 1.18rem;
  }
  .stats-confirm-card p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
  }
  .account-delete-password {
    display: grid;
    gap: 6px;
    margin-top: 16px;
    text-align: left;
    color: var(--dark);
    font-size: 0.82rem;
    font-weight: 900;
  }
  .account-delete-password input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d6e2dc;
    border-radius: 10px;
    padding: 10px 11px;
    font: inherit;
  }
  .account-delete-password[hidden] { display: none !important; }
  .account-delete-card .premium-feedback { margin: 12px 0 -5px; }
  .stats-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
  }
  .stats-confirm-actions button {
    border: 0;
    border-radius: 12px;
    padding: 11px 12px;
    font-weight: 900;
    cursor: pointer;
  }
  .stats-confirm-cancel {
    background: #eef2f4;
    color: var(--dark);
  }
  .stats-confirm-delete {
    background: #b74332;
    color: white;
  }
  .language-confirm-accept {
    background: #218c4f;
    color: white;
  }
  .premium-modal {
    z-index: 92;
  }
  .welcome-modal { z-index: 95; }
  .welcome-card { width: min(100%, 450px); text-align: center; }
  .welcome-logo { display: block; width: min(230px, 72%); height: auto; margin: 0 auto 14px; }
  .welcome-lead { margin: 0; color: var(--muted); font-weight: 700; }
  .welcome-list { margin: 18px 0; padding-left: 22px; text-align: left; color: var(--dark); line-height: 1.45; }
  .welcome-list li + li { margin-top: 9px; }
  .welcome-start, .welcome-login { width: 100%; border: 0; border-radius: 11px; padding: 13px 16px; cursor: pointer; font: inherit; font-weight: 900; }
  .welcome-start { background: #218c4f; color: white; }
  .welcome-login { margin-top: 8px; background: transparent; color: #218c4f; }
  @media (hover:hover) { .welcome-start:hover { background: #1b7743; } .welcome-login:hover { text-decoration: underline; } }
  .premium-card {
    width: min(100%, 430px);
    max-height: min(90vh, 680px);
  }
  .premium-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    color: #218c4f;
    background: #eaf7ef;
    border: 1px solid #c6ead3;
  }
  .premium-mark svg {
    width: 25px;
    height: 25px;
  }
  .premium-mark svg circle,
  .premium-mark svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .premium-lead,
  .premium-note {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
  }
  .premium-form {
    display: grid;
    gap: 11px;
    margin-top: 18px;
  }
  .premium-form[hidden],
  .premium-google[hidden],
  .premium-note[hidden],
  .premium-login-row[hidden],
  #premium-profile[hidden],
  #premium-lead[hidden] {
    display: none !important;
  }
  .premium-form label[hidden] { display: none !important; }
  .premium-form label {
    display: grid;
    gap: 6px;
    color: var(--dark);
    font-size: 0.82rem;
    font-weight: 900;
  }
  .premium-form input {
    width: 100%;
    border: 1px solid #d6e2dc;
    border-radius: 12px;
    padding: 11px 12px;
    color: var(--dark);
    font: inherit;
    background: white;
    outline: none;
  }
  .premium-form input:focus {
    border-color: #27ae60;
    box-shadow: 0 0 0 3px rgba(39,174,96,0.14);
  }
  .premium-form small {
    color: var(--muted);
    font-weight: 700;
  }
  .premium-feedback {
    min-height: 20px;
    margin: 0;
    color: #b74332;
    font-size: 0.84rem;
    font-weight: 800;
  }
  .premium-feedback.ok {
    color: #218c4f;
  }
  .premium-submit,
  .premium-google {
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 12px;
    font-weight: 900;
    cursor: pointer;
  }
  .premium-submit {
    margin-top: 2px;
    background: #218c4f;
    color: white;
  }
  .premium-google {
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    background: white;
    color: var(--dark);
    border: 1px solid #d6e2dc;
  }
  .premium-google span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid #d6e2dc;
    color: #4285f4;
    font-weight: 900;
  }
  .premium-note {
    margin-top: 8px;
    font-size: 0.82rem;
  }
  .premium-login-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
  }
  .premium-login-row button {
    border: 0;
    background: transparent;
    color: #218c4f;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    padding: 4px;
  }
  .premium-forgot {
    display: block;
    margin: 10px auto 0;
    border: 0;
    background: transparent;
    color: #218c4f;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
  }
  @media (hover:hover) {
    .stats-confirm-cancel:hover { background: #e1e8eb; }
    .stats-confirm-delete:hover { background: #9f3527; }
    .language-confirm-accept:hover { background: #1b7743; }
    .premium-submit:hover { background: #1b7743; }
    .premium-google:hover { background: #f7fbf9; }
  }

  @media (max-width: 520px) {
    #home {
      padding: 18px;
      padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    }
    .home-shell { padding: 24px 16px; border-radius: 22px; }
    .home-hero {
      max-width: 100%;
    }
    .brand-logo {
      max-width: 100%;
      padding: 6px;
      border-radius: 18px;
    }
    .brand-logo-img {
      width: min(100%, 520px);
    }
    .selector-card { padding: 12px; margin-top: 22px; }
    .tria { grid-template-columns: 1fr; }
    .tria-btn { padding: 15px; }
    #appbar {
      gap: 8px;
      padding-right: 66px;
      padding-right: max(66px, calc(8px + env(safe-area-inset-right)));
      padding-left: max(8px, env(safe-area-inset-left));
    }
    #appbar button {
      padding: 5px 10px;
      font-size: 0.72rem;
    }
    #appbar .titol {
      width: calc(100% - 148px);
      font-size: 0.86rem;
    }
    #appbar .app-logo-badge {
      padding: 5px 8px;
      border-width: 1px;
    }
    #appbar .app-logo-badge-img {
      width: min(48vw, 210px);
      height: 34px;
      padding: 0;
    }
    .top-menu {
      right: 8px;
      gap: 6px;
    }
    .top-menu-panel {
      min-width: 178px;
    }
    .stats-cards {
      grid-template-columns: 1fr;
    }
    #stats-modal {
      padding: 10px;
    }
    #stats-modal .help-card {
      width: min(100%, 420px);
      padding: 18px 14px;
      border-radius: 18px;
    }
    #stats-modal .help-section {
      padding: 10px 0;
    }
    #stats-modal .stats-table {
      font-size: 0.82rem;
    }
    #stats-modal .stats-table th,
    #stats-modal .stats-table td {
      padding: 7px 4px;
    }
    #stats-modal .stats-kind {
      font-size: 0.64rem;
      letter-spacing: 0.02em;
    }
    .stats-confirm-card {
      width: min(100%, 340px);
      padding: 22px 16px;
    }
    .stats-confirm-actions {
      grid-template-columns: 1fr;
    }
    .idiomes {
      padding: 3px 5px;
    }
    .idioma-btn {
      padding: 3px 4px;
      font-size: 0.64rem;
    }
  }