@import url("form-input.css");

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #ffffff;
      --bg-secondary: #f7f6f2;
      --text: #1a1a18;
      --text-secondary: #5f5e5a;
      --text-tertiary: #9b9a95;
      --border: rgba(0,0,0,0.12);
      --border-strong: rgba(0,0,0,0.25);
      --radius: 10px;
      --radius-sm: 6px;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #1c1c1a;
        --bg-secondary: #252523;
        --text: #f0ede4;
        --text-secondary: #b4b2a9;
        --text-tertiary: #6e6d69;
        --border: rgba(255,255,255,0.1);
        --border-strong: rgba(255,255,255,0.2);
      }
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg);
      color: var(--text);
      min-height: 100vh;
      padding: 2rem 1rem;
    }

    .container { max-width: 700px; margin: 0 auto; }

    /* Header */
    .logo {
      display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap;
      min-width: 0; flex: 1 1 180px;
    }
    .logo-name { font-size: 22px; font-weight: 600; letter-spacing: -.4px; }
    .logo-tag {
      font-size: 11px; color: var(--text-tertiary);
      border: 0.5px solid var(--border); padding: 2px 8px;
      border-radius: 20px; letter-spacing: .05em; text-transform: uppercase;
    }
    .subtitle { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 8px; }
    .about-link { font-size: 13px; margin-bottom: 2rem; }
    .about-link a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }

    .pwa-promo {
      margin-bottom: 1.25rem;
      padding: 14px 16px;
      border-radius: var(--radius);
      border: 0.5px solid var(--border-strong);
      background: var(--bg-secondary);
      position: relative;
    }
    .pwa-promo-text {
      font-size: 14px;
      line-height: 1.55;
      color: var(--text);
      padding-right: 28px;
      margin-bottom: 10px;
    }
    .pwa-promo-link {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .pwa-promo-dismiss {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 28px;
      height: 28px;
      border: none;
      background: transparent;
      color: var(--text-tertiary);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      border-radius: var(--radius-sm);
    }
    .pwa-promo-dismiss:hover { color: var(--text-secondary); }
    .header-row {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 12px; flex-wrap: wrap; margin-bottom: 6px;
    }
    .header-row:has(.share-cta-wrap:not([hidden])) { margin-bottom: 1.25rem; }
    .header-actions {
      display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
      flex-shrink: 0; max-width: 100%;
    }
    .lang-switch { display: flex; gap: 4px; flex-shrink: 0; }
    .lang-btn {
      font-size: 12px; font-family: inherit; padding: 4px 10px;
      border: 0.5px solid var(--border-strong); border-radius: 20px;
      background: transparent; color: var(--text-tertiary); cursor: pointer;
    }
    .lang-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }

    /* Input */
    textarea {
      width: 100%; min-height: 170px; padding: 14px 16px;
      font-size: 14px; font-family: inherit; line-height: 1.6;
      border: 0.5px solid var(--border-strong); border-radius: var(--radius);
      background: var(--bg); color: var(--text); resize: vertical; outline: none;
      transition: border-color .15s;
    }
    textarea:focus { border-color: var(--text-secondary); }
    textarea::placeholder { color: var(--text-tertiary); }
    .input-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
    .char-count { font-size: 12px; color: var(--text-tertiary); }
    .char-warn {
      font-size: 12px; color: #a32d2d; line-height: 1.45;
      margin-top: 8px; padding: 8px 10px;
      background: #fcebeb; border-radius: var(--radius-sm);
      border-left: 3px solid #e24b4a;
    }
    @media (prefers-color-scheme: dark) {
      .char-warn { background: #2a1010; }
    }

    .input-err {
      margin-bottom: 12px;
      padding: 14px 16px;
      border-radius: var(--radius);
      background: #fcebeb;
      border: 1px solid #e24b4a;
      color: #a32d2d;
      font-size: 14px;
      line-height: 1.55;
    }
    @media (prefers-color-scheme: dark) {
      .input-err { background: #3a1414; border-color: #e24b4a; color: #f5a8a8; }
    }
    .input-err-title { font-weight: 600; margin-bottom: 6px; }
    .input-err-msg { margin-bottom: 8px; }
    .input-err-hint { font-size: 13px; opacity: 0.92; }

    /* Buttons */
    .btn-primary {
      padding: 10px 24px; font-size: 14px; font-weight: 500; font-family: inherit;
      border: none; border-radius: var(--radius-sm);
      background: var(--text); color: var(--bg); cursor: pointer; transition: opacity .15s;
    }
    .btn-primary:disabled { opacity: .3; cursor: not-allowed; }
    .btn-secondary {
      padding: 7px 16px; font-size: 13px; font-family: inherit;
      border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
      background: transparent; color: var(--text-secondary); cursor: pointer;
    }

    /* Loader */
    .loader { border: 0.5px solid var(--border); border-radius: var(--radius); padding: 36px 24px; text-align: center; }
    .dots { display: inline-flex; gap: 6px; margin-bottom: 16px; }
    .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--text-tertiary);
      animation: blink 1.2s ease-in-out infinite;
    }
    .dot:nth-child(2) { animation-delay: .2s; }
    .dot:nth-child(3) { animation-delay: .4s; }
    @keyframes blink { 0%,80%,100% { opacity:.2; } 40% { opacity:1; } }
    .steps { display: flex; flex-direction: column; gap: 8px; max-width: 320px; margin: 0 auto; text-align: left; }
    .step { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-tertiary); }
    .step.active { color: var(--text); }
    .step.done { color: var(--text-secondary); }
    .step-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); flex-shrink: 0; }
    .step.active .step-dot { background: #639922; }
    .step.done .step-dot { background: var(--text-tertiary); }
    .step-log { font-size: 12px; color: var(--text-tertiary); font-family: monospace; margin-top: 12px; min-height: 18px; }
    .step-log-warn { color: #854f0b; font-family: inherit; font-size: 13px; line-height: 1.5; }

    /* Error */
    .error-box { border: 0.5px solid #e24b4a; border-radius: var(--radius); padding: 18px 20px; background: #fcebeb; }
    @media (prefers-color-scheme: dark) { .error-box { background: #2a1010; } }
    .error-title { font-size: 14px; font-weight: 500; color: #a32d2d; margin-bottom: 6px; }
    .error-msg { font-size: 12px; color: #a32d2d; font-family: monospace; line-height: 1.5; word-break: break-all; margin-bottom: 10px; }
    .error-hint {
      font-size: 13px; color: var(--text-secondary); line-height: 1.6;
      padding: 10px 12px; background: var(--bg-secondary);
      border-radius: var(--radius-sm); border-left: 3px solid var(--border-strong);
    }

    /* Results header */
    .res-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
    .res-topic-btn {
      display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%;
      padding: 0; border: none; background: none; cursor: pointer; text-align: left;
      font: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--text);
    }
    .res-topic-btn:hover .res-topic-text { text-decoration: underline; }
    .res-topic-btn:disabled { cursor: default; }
    .res-topic-btn:disabled:hover .res-topic-text { text-decoration: none; }
    .res-topic-chev { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; flex-shrink: 0; }
    .res-source-link {
      display: block; max-width: 100%; margin-top: 2px;
      font-size: 12px; line-height: 1.4; color: var(--text-secondary);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .res-source-link:hover { color: var(--text); text-decoration: underline; }
    .res-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 3px; }

    .source-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
    .source-modal[hidden] { display: none; }
    .source-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
    .source-modal-panel {
      position: relative; width: min(640px, 100%); max-height: min(420px, 70vh);
      display: flex; flex-direction: column;
      background: var(--bg); border: 0.5px solid var(--border); border-radius: var(--radius);
      box-shadow: 0 12px 40px rgba(0,0,0,.18);
    }
    .source-modal-head {
      display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
      padding: 12px 14px; border-bottom: 0.5px solid var(--border); flex-shrink: 0;
    }
    .source-modal-head strong { font-size: 14px; line-height: 1.4; flex: 1; }
    .source-modal-close {
      border: none; background: var(--bg-secondary); color: var(--text-secondary);
      width: 28px; height: 28px; border-radius: var(--radius-sm); cursor: pointer; font-size: 18px; line-height: 1;
    }
    .source-modal-body {
      padding: 12px 14px; overflow-y: auto; font-size: 13px; line-height: 1.65;
      color: var(--text-secondary); white-space: pre-wrap; word-break: break-word;
    }

    /* Summary grid */
    .sum-progress {
      font-size: 11px; color: var(--text-tertiary); margin-bottom: 6px;
      font-variant-numeric: tabular-nums; letter-spacing: .01em;
    }
    .sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 7px; margin-bottom: 16px; }
    .sum-cell { border-radius: var(--radius-sm); padding: 10px 8px; text-align: center; }
    .sum-n { font-size: 22px; font-weight: 600; line-height: 1; }
    .sum-l { font-size: 11px; line-height: 1.3; margin-top: 3px; overflow-wrap: break-word; }
    .sum-grid--techno .sum-n {
      font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    }
    .sum-grid--med .sum-l { font-weight: 600; letter-spacing: -.01em; }
    .sum-grid--insider .sum-n { font-size: 24px; }
    .sum-grid--cute .sum-cell { border-radius: 12px; }
    .sum-grid--friend .sum-n { font-size: 24px; }

    /* Overall summary */
    .overall-summary {
      font-size: 14px; line-height: 1.6; font-style: normal; font-weight: 400;
      color: var(--text); margin: 0 0 16px; padding: 0 2px;
    }
    .overall-summary--loading { color: var(--text-tertiary); }

    /* Плашка о непроверяемых утверждениях (не влияют на шкалу) */
    .unverifiable-note {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 10px 12px;
      margin: 0 0 16px;
      background: #F1EFE8;
      border-radius: var(--radius-sm);
      border-left: 3px solid #B4B2A9;
    }
    .unverifiable-note[hidden] { display: none; }
    .unverifiable-note-icon {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #5F5E5A;
      color: #F1EFE8;
      font-size: 12px;
      font-weight: 700;
      line-height: 18px;
      text-align: center;
      margin-top: 1px;
    }
    .unverifiable-note-title {
      font-size: 12px;
      font-weight: 600;
      color: #4A4945;
      margin-bottom: 2px;
    }
    .unverifiable-note-text {
      font-size: 12px;
      line-height: 1.5;
      color: #5F5E5A;
    }

    /* Claims */
    .claims { display: flex; flex-direction: column; gap: 8px; }
    .card { border: 0.5px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
    .card-head { display: flex; align-items: stretch; cursor: pointer; }
    .vbar { width: 4px; flex-shrink: 0; }
    .card-inner { flex: 1; min-width: 0; padding: 12px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .claim-text { font-size: 14px; font-weight: 500; line-height: 1.5; flex: 1; min-width: 0; }
    .vbadge { font-size: 11px; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; margin-top: 1px; }
    .vbadge-rhetoric { font-weight: 600; }
    .vbadge-rhetoric.sev-minor       { box-shadow: 0 0 0 1px rgba(190,18,60,.3); }
    .vbadge-rhetoric.sev-notable     { box-shadow: 0 0 0 1px rgba(159,18,57,.4); }
    .vbadge-rhetoric.sev-significant { box-shadow: 0 0 0 1px rgba(220,38,38,.5); }
    .truncated-bar {
      font-size: 13px; color: #854F0B; line-height: 1.55;
      padding: 10px 12px; margin-bottom: 14px;
      background: #FAEEDA; border-radius: var(--radius-sm);
      border-left: 3px solid #EF9F27;
    }
    @media (prefers-color-scheme: dark) {
      .truncated-bar { background: #2a1d08; }
    }
    .registration-gate-cta {
      margin: 16px 0 8px;
      padding: 20px;
      border-radius: 12px;
      border: 1px dashed var(--border);
      background: var(--surface-2, rgba(255,255,255,0.04));
      text-align: center;
    }
    .registration-gate-text {
      margin: 0 0 14px;
      color: var(--text-secondary);
      font-size: 14px;
      line-height: 1.5;
    }
    .registration-gate-btn { min-width: 180px; }
    .repeat-bar {
      font-size: 13px; color: var(--text-secondary); line-height: 1.55;
      padding: 12px 14px; margin-top: 16px; margin-bottom: 4px;
      background: var(--bg-secondary); border-radius: var(--radius-sm);
      border: 1px solid var(--border); text-align: center;
    }
    .repeat-bar-text { margin: 0; }
    .repeat-bar-actions {
      display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
      align-items: center; margin-top: 10px;
    }
    .repeat-bar-remaining { font-size: 12px; color: var(--text-tertiary); }
    .repeat-bar-limit { font-size: 12px; color: var(--text-tertiary); margin: 0; }
    .strictness-bar {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      font-size: 12px; color: var(--text-tertiary);
      padding: 7px 10px; margin-bottom: 14px;
      background: var(--bg-secondary); border-radius: var(--radius-sm);
      border-left: 3px solid var(--border-strong);
    }
    .strictness-icon { font-size: 14px; flex-shrink: 0; }
    .strictness-bar.style-scientific   { border-color: #639922; }
    .strictness-bar.style-popular      { border-color: #EF9F27; }
    .strictness-bar.style-opinion      { border-color: #B4B2A9; }
    .strictness-bar.style-news         { border-color: #5B7FA6; }
    .claims-hint-bar {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.5;
      padding: 8px 10px;
      margin-bottom: 10px;
      background: var(--bg-secondary);
      border-radius: var(--radius-sm);
      border-left: 3px solid var(--border-strong);
    }
    .claims-hint-icon { font-size: 14px; flex-shrink: 0; line-height: 1.35; }
    .confirm-modal-actions {
      display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
      padding: 12px 14px; border-top: 0.5px solid var(--border);
    }

    /* Substantiation scale */
    .sub-scale {
      position: relative;
      margin-bottom: 16px;
      padding: 12px 14px;
      background: var(--bg-secondary);
      border-radius: var(--radius);
      border: 0.5px solid var(--border);
    }
    .sub-scale-top {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px; margin-bottom: 10px;
    }
    .sub-scale-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .sub-copy-wrap {
      display: inline-flex;
      flex-direction: row-reverse;
      align-items: center;
      flex-shrink: 0;
    }
    .sub-copy-anchor { display: inline-flex; }
    .sub-copy-popout {
      display: flex;
      align-items: center;
      gap: 4px;
      max-width: 0;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transition: max-width .15s ease, opacity .12s ease;
    }
    .sub-copy-wrap:hover .sub-copy-popout,
    .sub-copy-wrap:focus-within .sub-copy-popout,
    .sub-copy-wrap.is-open .sub-copy-popout {
      max-width: 90px;
      opacity: 1;
      pointer-events: auto;
    }
    .sub-copy-popout .sub-share-btn {
      box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.14);
    }
    .sub-scale--techno .sub-copy-popout .sub-share-btn,
    .sub-scale--friend .sub-copy-popout .sub-share-btn {
      box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 2px 10px rgba(0,0,0,.45);
    }
    .sub-scale-title { font-size: 12px; font-weight: 500; color: var(--text-tertiary); flex: 1; min-width: 0; }
    .sub-tone-select {
      flex-shrink: 0; max-width: min(148px, 42vw);
      font-size: 12px; padding: 4px 8px;
      border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
      background: var(--bg); color: var(--text);
    }
    .sub-scale-headline {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; margin-bottom: 10px;
    }
    .sub-scale-index-num {
      flex-shrink: 0;
      font-size: 28px; font-weight: 700; line-height: 1;
      letter-spacing: -.02em; color: var(--text);
      font-variant-numeric: tabular-nums;
    }
    @keyframes analyzing-pulse {
      0%, 100% { opacity: 1; }
      50%       { opacity: .12; }
    }
    @keyframes skeleton-border-pulse {
      0%, 100% { border-color: var(--border);           box-shadow: none; }
      50%       { border-color: var(--text-secondary);  box-shadow: 0 0 0 2.5px rgba(0,0,0,.09); }
    }
    /* Both use 1.5s so JS can sync them via animation-delay */
    .sub-scale.sub-scale--streaming .sub-scale-index-num {
      animation: analyzing-pulse 1.5s ease-in-out infinite !important;
    }
    .card-skeleton {
      animation: skeleton-border-pulse 1.5s ease-in-out infinite;
    }
    .card-skeleton .vbadge {
      animation: analyzing-pulse 1.5s ease-in-out infinite;
    }
    .sub-share-btn {
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      width: 26px; height: 26px; padding: 0;
      border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
      background: var(--bg); color: var(--text-secondary); cursor: pointer;
    }
    .sub-share-btn:hover:not(:disabled) { border-color: var(--text-secondary); }
    .sub-scale--neutral .sub-share-btn:hover:not(:disabled),
    .sub-scale--med .sub-share-btn:hover:not(:disabled),
    .sub-scale--cute .sub-share-btn:hover:not(:disabled),
    .sub-scale--insider .sub-share-btn:hover:not(:disabled) {
      color: var(--text);
    }
    .sub-scale--techno .sub-share-btn:hover:not(:disabled) {
      color: #f0f6fc;
      background: #21262d;
      border-color: rgba(88, 166, 255, 0.95);
    }
    .sub-scale--friend .sub-share-btn:hover:not(:disabled) {
      color: #fff;
      background: #3d3654;
      border-color: rgba(196, 181, 253, 0.9);
    }
    .sub-share-btn:disabled,
    .sub-share-btn.is-busy { opacity: .45; cursor: wait; }
    @keyframes share-pulse {
      0%, 100% {
        box-shadow: 0 0 0 0 transparent;
        border-color: var(--border-strong);
      }
      50% {
        box-shadow: 0 0 0 4px rgba(99,153,34,.5), 0 0 14px rgba(99,153,34,.45);
        border-color: #639922;
      }
    }
    .sub-share-btn--pulse,
    .sub-tone-select--pulse { animation: share-pulse 1.6s ease-in-out 30; }
    .sub-scale--techno .sub-share-btn--pulse,
    .sub-scale--techno .sub-tone-select--pulse {
      animation-name: share-pulse-techno;
    }
    .sub-scale--friend .sub-share-btn--pulse,
    .sub-scale--friend .sub-tone-select--pulse {
      animation-name: share-pulse-friend;
    }
    @keyframes share-pulse-techno {
      0%, 100% { box-shadow: none; border-color: rgba(56, 139, 253, 0.45); }
      50% {
        box-shadow: 0 0 0 4px rgba(56, 139, 253, .45), 0 0 16px rgba(56, 139, 253, .35);
        border-color: rgba(88, 166, 255, 0.95);
      }
    }
    @keyframes share-pulse-friend {
      0%, 100% { box-shadow: none; border-color: rgba(167, 139, 250, 0.45); }
      50% {
        box-shadow: 0 0 0 4px rgba(167, 139, 250, .45), 0 0 16px rgba(167, 139, 250, .35);
        border-color: rgba(196, 181, 253, 0.95);
      }
    }
    .sub-share-btn--pulse:hover,
    .sub-tone-select--pulse:hover,
    .sub-tone-select--pulse:focus { animation: none; }
    .sub-share-icon { display: block; }
    .sub-scale-no-claims .sub-scale-headline { grid-template-columns: 1fr; }
    .sub-scale-no-claims .sub-scale-index-num { display: none; }
    .sub-scale-level {
      flex: 1; min-width: 0;
      font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text);
    }
    .sub-track-wrap { position: relative; padding: 0 2px 4px; }
    .sub-axis {
      display: flex; justify-content: space-between;
      font-size: 10px; color: var(--text-tertiary); margin-bottom: 6px;
    }
    .sub-track-row { position: relative; height: 28px; margin-bottom: 2px; }
    .sub-track {
      position: absolute; left: 0; right: 0; top: 50%;
      transform: translateY(-50%);
      display: grid; grid-template-columns: repeat(7, 1fr);
      gap: 2px; height: 12px; border-radius: 6px; overflow: hidden;
    }
    .sub-zone { min-height: 12px; }
    .sub-zone.z1 { background: #DC2626; }
    .sub-zone.z2 { background: #EA580C; }
    .sub-zone.z3 { background: #F59E0B; }
    .sub-zone.z4 { background: #A3A3A3; }
    .sub-zone.z5 { background: #84CC16; }
    .sub-zone.z6 { background: #22C55E; }
    .sub-zone.z7 { background: #15803D; }
    .sub-marker-emoji {
      position: absolute; top: 50%; z-index: 2;
      transform: translate(-50%, -50%);
      font-size: 22px; line-height: 1;
      pointer-events: none;
      transition: left .35s ease;
      filter: drop-shadow(0 0 2px var(--bg)) drop-shadow(0 1px 4px rgba(0,0,0,.3));
    }
    .sub-ticks {
      display: grid; grid-template-columns: repeat(7, 1fr);
      margin-top: 4px; font-size: 14px; line-height: 1; text-align: center;
      opacity: .45;
    }
    .sub-ticks span {
      cursor: help;
      display: inline-block;
      transition: transform .12s ease, opacity .12s ease;
    }
    .sub-zone[data-tip] { cursor: help; }
    .sub-ticks span[data-tip]:hover {
      opacity: 1;
      transform: scale(1.15);
    }

    /* Tone visuals — neutral keeps defaults above */
    .sub-scale--techno {
      background: #1c2128;
      border-color: rgba(56, 139, 253, 0.45);
      border-radius: 4px;
      box-shadow: none;
      color: #c9d1d9;
    }
    .sub-scale--techno .sub-scale-title,
    .sub-scale--techno .sub-axis,
    .sub-scale--techno .sub-scale-level,
    .sub-scale--techno .sub-scale-index-num {
      color: #c9d1d9;
    }
    .sub-scale--techno .sub-scale-index-num {
      font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    }
    .sub-scale--techno .sub-tone-select,
    .sub-scale--techno .sub-share-btn {
      background: #161b22;
      border-color: rgba(56, 139, 253, 0.45);
      color: #c9d1d9;
      border-radius: 2px;
    }
    .sub-scale--techno .sub-tone-select:hover,
    .sub-scale--techno .sub-tone-select:focus {
      color: #f0f6fc;
      border-color: rgba(88, 166, 255, 0.95);
      background: #21262d;
    }
    .sub-scale--techno .sub-track { border-radius: 0; }
    .sub-scale--techno .sub-help-btn {
      border-color: rgba(56, 139, 253, 0.45);
      color: #8b949e;
    }
    .sub-scale--techno .sub-help-bubble {
      background: #161b22;
      border-color: rgba(56, 139, 253, 0.35);
      color: #c9d1d9;
    }
    .sub-scale--techno .sub-help-bubble a { color: #58a6ff; }

    .sub-scale--med {
      background: #ffffff;
      border-color: #90c2e0;
      border-radius: 6px;
      box-shadow: none;
    }
    .sub-scale--med .sub-tone-select,
    .sub-scale--med .sub-share-btn { border-color: #0077B6; border-radius: 3px; }
    .sub-scale--med .sub-track { border-radius: 2px; }
    .sub-scale--med .sub-scale-index-num { color: #0077B6; }
    .sub-scale--med .sub-scale-title,
    .sub-scale--med .sub-axis { color: #5a7a8c; }
    .sub-scale--med .sub-scale-level { font-weight: 600; letter-spacing: -.01em; }

    .sub-scale--insider {
      background: #f5efe4;
      border-color: rgba(234, 88, 12, 0.35);
      border-radius: 14px;
    }
    .sub-scale--insider .sub-scale-level { font-size: 16px; font-weight: 700; }
    .sub-scale--insider .sub-marker-emoji { font-size: 28px; }
    .sub-scale--insider .sub-ticks { font-size: 17px; opacity: .6; }
    .sub-scale--insider .sub-scale-index-num { color: #c2410c; }

    .sub-scale--cute {
      background: #fff0eb;
      border-color: rgba(232, 165, 152, 0.45);
      border-radius: 18px;
    }
    .sub-scale--cute .sub-tone-select,
    .sub-scale--cute .sub-share-btn { border-radius: 10px; }
    .sub-scale--cute .sub-track { border-radius: 10px; }
    .sub-scale--cute .sub-scale-level { font-weight: 600; color: #4a3530; }
    .sub-scale--cute .sub-scale-index-num { color: #c08070; }
    .sub-scale--cute .sub-scale-title,
    .sub-scale--cute .sub-axis { color: #a08078; }
    .sub-scale--cute .sub-marker-emoji { font-size: 24px; }
    .sub-scale--cute .sub-ticks { font-size: 15px; opacity: .55; }

    .sub-scale--friend {
      background: #342e48;
      border-color: rgba(167, 139, 250, 0.4);
      border-radius: 14px;
      color: #f5f3ff;
    }
    .sub-scale--friend .sub-scale-title,
    .sub-scale--friend .sub-axis,
    .sub-scale--friend .sub-scale-level,
    .sub-scale--friend .sub-scale-index-num { color: #f5f3ff; }
    .sub-scale--friend .sub-tone-select,
    .sub-scale--friend .sub-share-btn {
      background: #2a2538;
      border-color: rgba(167, 139, 250, 0.45);
      color: #f5f3ff;
    }
    .sub-scale--friend .sub-tone-select:hover,
    .sub-scale--friend .sub-tone-select:focus {
      color: #fff;
      border-color: rgba(196, 181, 253, 0.9);
      background: #3d3654;
    }
    .sub-scale--friend .sub-scale-level { font-size: 16px; font-weight: 700; }
    .sub-scale--friend .sub-marker-emoji { font-size: 30px; filter: drop-shadow(0 0 2px #342e48); }
    .sub-scale--friend .sub-ticks { font-size: 18px; opacity: .75; }
    .sub-scale--friend .sub-help-btn {
      border-color: rgba(167, 139, 250, 0.45);
      color: #ddd6fe;
    }
    .sub-scale--friend .sub-help-bubble {
      background: #2a2538;
      border-color: rgba(167, 139, 250, 0.35);
      color: #f5f3ff;
    }
    .sub-scale--friend .sub-help-bubble a { color: #c4b5fd; }

    .sub-scale--professor {
      background: #faf7f0;
      border-color: #c4b89a;
      border-radius: 6px;
    }
    .sub-scale--professor .sub-tone-select,
    .sub-scale--professor .sub-share-btn { border-color: #5c1a1a; border-radius: 3px; }
    .sub-scale--professor .sub-track { border-radius: 4px; }
    .sub-scale--professor .sub-scale-index-num { color: #5c1a1a; }
    .sub-scale--professor .sub-scale-title,
    .sub-scale--professor .sub-axis { color: #6b6358; }
    .sub-scale--professor .sub-scale-level { font-weight: 600; letter-spacing: -.01em; color: #1a1814; }
    .sub-scale--professor .sub-share-btn:hover:not(:disabled) {
      background: #5c1a1a;
      border-color: #5c1a1a;
      color: #fffef9;
    }

    .app-tooltip {
      position: fixed;
      z-index: 1100;
      left: 0;
      top: 0;
      transform: translate(-50%, calc(-100% - 8px));
      max-width: min(240px, calc(100vw - 2rem));
      padding: 8px 11px;
      border-radius: var(--radius-sm);
      border: 0.5px solid var(--border-strong);
      background: var(--bg);
      box-shadow: 0 6px 20px rgba(0,0,0,.12);
      font-size: 12px;
      line-height: 1.4;
      color: var(--text);
      text-align: center;
      pointer-events: none;
      opacity: 0;
      transition: opacity .12s ease;
    }
    .app-tooltip.visible { opacity: 1; }
    .app-tooltip[hidden] { display: none; }
    .app-tooltip-inner {
      display: inline-flex;
      align-items: flex-start;
      gap: 6px;
      text-align: left;
    }
    .app-tooltip-emoji { font-size: 15px; line-height: 1; flex-shrink: 0; }
    .app-tooltip-emoji[hidden] { display: none; }
    .app-tooltip-label { min-width: 0; }
    .app-tooltip::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -5px;
      transform: translateX(-50%);
      border: 5px solid transparent;
      border-top-color: var(--bg);
      filter: drop-shadow(0 1px 0 var(--border-strong));
    }

    .sub-scale-level-wrap {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 6px;
      flex: 1;
      min-width: 0;
    }
    .sub-help-btn {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      padding: 0;
      border: 0.5px solid var(--border-strong);
      border-radius: 50%;
      background: var(--bg);
      color: var(--text-tertiary);
      font-size: 11px;
      font-weight: 600;
      font-family: inherit;
      line-height: 1;
      cursor: pointer;
    }
    .sub-help-btn:hover,
    .sub-help-btn[aria-expanded="true"] {
      color: var(--text);
      border-color: var(--text-secondary);
    }
    .sub-help-bubble {
      position: absolute;
      left: 0;
      top: calc(100% + 6px);
      z-index: 20;
      width: min(240px, calc(100vw - 2rem));
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      border: 0.5px solid var(--border-strong);
      background: var(--bg);
      box-shadow: 0 6px 20px rgba(0,0,0,.12);
      font-size: 12px;
      line-height: 1.45;
      color: var(--text-secondary);
    }
    .sub-help-bubble[hidden] { display: none; }
    .sub-help-bubble p { margin: 0 0 8px; }
    .sub-help-bubble a {
      color: var(--text);
      font-weight: 500;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* Share modal */
    .share-modal-panel { width: min(380px, 100%); max-height: min(90vh, 720px); }
    .share-modal-body { padding: 14px 16px; overflow-y: auto; }
    .share-panel-title { display: none; }
    .share-badge-preview-wrap {
      position: relative; margin-bottom: 12px;
      border-radius: var(--radius); overflow: hidden;
      border: 0.5px solid var(--border);
      background: var(--bg-secondary);
      min-height: 120px;
    }
    .share-badge-preview-wrap:has(.share-badge-preview:not([hidden])) {
      cursor: pointer;
    }
    .share-badge-preview {
      display: block; width: 100%; height: auto; vertical-align: top;
    }
    .share-badge-preview[hidden] { display: none; }
    .share-badge-loading {
      display: flex; align-items: center; justify-content: center;
      min-height: 180px; font-size: 12px; color: var(--text-tertiary);
    }
    .share-badge-loading[hidden] { display: none; }
    .share-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .share-icon-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; padding: 0;
      border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
      background: var(--bg); color: var(--text-secondary); cursor: pointer;
    }
    .share-icon-btn:hover:not(:disabled) { border-color: var(--text-secondary); color: var(--text); }
    .share-icon-btn:disabled { opacity: .45; cursor: default; }
    .share-icon-btn.is-busy { opacity: .45; cursor: wait; }
    .share-social { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
    .share-social-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; padding: 0;
      border: 0.5px solid var(--border-strong); border-radius: var(--radius-sm);
      background: var(--bg); color: var(--text-secondary); cursor: pointer;
    }
    .share-social-btn:hover { border-color: var(--text-secondary); }
    .share-social-icon { width: 18px; height: 18px; display: block; }
    .share-social-btn[data-social="telegram"] { color: #229ed9; }
    .share-social-btn[data-social="whatsapp"] { color: #25d366; }
    .share-social-btn[data-social="twitter"]  { color: #000; }
    .share-social-btn[data-social="facebook"] { color: #1877f2; }
    .share-og-hint {
      font-size: 11px; line-height: 1.4; color: var(--text-tertiary);
      margin: 0 0 6px;
    }
    .share-msg { font-size: 12px; color: #639922; margin-top: 6px; }
    .share-err { font-size: 12px; color: #a32d2d; margin-top: 6px; }
    .share-cta-wrap { margin-bottom: 0; }
    .share-cta-wrap:not([hidden]) { display: block; }
    .share-cta-wrap .btn-primary {
      display: inline-block; max-width: 100%;
      font-size: 13px; padding: 8px 14px; line-height: 1.3;
      text-align: center; white-space: normal;
    }
    @media (max-width: 480px) {
      .header-actions {
        flex-basis: 100%;
        align-items: stretch;
      }
      .lang-switch { justify-content: flex-end; }
      .share-cta-wrap { text-align: right; }
      .share-cta-wrap .btn-primary { max-width: 100%; }
    }

    .vbadge-sci { opacity: .92; }
    .card-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
    .chev { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; margin-top: 3px; }
    .card-body { padding: 0 14px 14px 18px; border-top: 0.5px solid var(--border); display: none; }
    .body-summary { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin: 12px 0 10px; }
    .dims { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
    .dims .dim { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: 8px 6px; text-align: center; }
    .dim-label { font-size: 11px; color: var(--text-tertiary); margin-bottom: 3px; }
    .dim-value { font-size: 13px; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; }
    @media (max-width: 540px) {
      .sum-grid { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
      .card-badges { min-width: 0; max-width: 42%; }
      .vbadge {
        white-space: normal;
        line-height: 1.25;
        text-align: center;
        overflow-wrap: break-word;
        flex-shrink: 1;
        max-width: 100%;
      }
      .dims { grid-template-columns: repeat(2, 1fr); }
    }
    .papers-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
    .comment-label { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 6px; }
    .paper { padding: 8px 11px; border-left: 2px solid var(--border-strong); margin-bottom: 6px; }
    .paper-title { font-size: 13px; color: #185fa5; text-decoration: none; line-height: 1.4; display: block; margin-bottom: 3px; }
    .paper-title:hover { text-decoration: underline; }
    .paper-meta { font-size: 12px; color: var(--text-tertiary); }
    .paper-quote { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; font-style: italic; }

    .nuance {
      font-size: 13px; color: var(--text-secondary); line-height: 1.6;
      padding: 9px 11px; background: var(--bg-secondary);
      border-radius: var(--radius-sm); border-left: 3px solid var(--border-strong); margin-top: 8px;
    }
    .no-papers { font-size: 13px; color: var(--text-tertiary); font-style: italic; padding: 4px 0; }

    /* Skeleton loading state */
    .card-skeleton .card-head { cursor: default; }
    .card-skeleton .claim-text { opacity: 0.65; }
    .card-pending .card-pending-body,
    .card-retrying .card-pending-body {
      padding: 10px 14px 14px 22px;
      border-top: 0.5px solid var(--border);
    }
    .claim-retry-bar { margin-top: 4px; }
    .claim-retry-actions {
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    }
    .claim-retry-btn { font-size: 12px; padding: 6px 12px; }
    .claim-retry-remaining,
    .claim-retry-limit,
    .claim-retry-status,
    .claim-retry-error {
      font-size: 12px; color: var(--text-tertiary); margin: 0;
    }
    .claim-retry-error { color: #b45309; }
    .claim-retry-status { color: var(--text-secondary); }
    .rloading-bar { text-align: center; padding: 20px 0 10px; }
    .rloading-bar .step-log { margin-top: 8px; font-size: 13px; }
    .overload-msg {
      margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm);
      background: #fff8e6; border: 1px solid #e6c850; color: #7a5800;
      font-size: 13px; line-height: 1.5;
    }

    /* Footer */
    .footer { font-size: 12px; color: var(--text-tertiary); text-align: center; margin-top: 16px; line-height: 1.7; }
    .disclaimer { font-size: 11px; color: var(--text-tertiary); border-top: 1px solid var(--border); margin-top: 20px; padding-top: 12px; line-height: 1.6; text-align: center; }
    .footer a { color: var(--text-tertiary); }

    /* Result CTA */
    .result-cta {
      display: none;
      margin-top: 20px;
      padding: 14px 16px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--bg-subtle, #f8f8f6);
      text-align: center;
    }
    .result-cta[data-active] { display: block; }
    .result-cta-slot { display: none; }
    .result-cta-slot[data-visible] { display: block; }
    .result-cta-label {
      font-size: 13px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.4;
    }
    .result-cta-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 16px; font-size: 13px; font-weight: 500; cursor: pointer;
      border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
      background: var(--bg); color: var(--text); text-decoration: none;
      transition: border-color .15s, background .15s;
    }
    .result-cta-btn:hover { border-color: var(--text-secondary); background: var(--bg-subtle, #f4f4f2); }
    .result-cta-dots {
      display: flex; justify-content: center; gap: 5px; margin-top: 10px;
    }
    .result-cta-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--border-strong); cursor: pointer; transition: background .2s;
    }
    .result-cta-dot[data-active] { background: var(--text-secondary); }

    /* Editorial landing */
    body.landing-active {
      background: #faf8f3;
      color: #1a1917;
      padding: 0;
      font-family: 'Manrope', sans-serif;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    body.landing-active .app-main,
    body.landing-active #rfooter { display: none !important; }
    body:not(.landing-active) { padding: 2rem 1rem; overflow: auto; }
    body:not(.landing-active) .landing-only { display: none !important; }

    nav.site-nav {
      display: flex; justify-content: space-between; align-items: center;
      padding: 1.4vh 4vw;
      border-bottom: 1.5px solid #1a1917;
      flex-shrink: 0;
    }
    .logo-block {
      display: flex; flex-direction: column; line-height: 1;
    }
    .site-logo {
      display: flex; align-items: baseline; gap: 0;
      font-family: 'Playfair Display', serif;
      font-size: clamp(20px, 2.8vw, 28px);
      font-weight: 900;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }
    .site-logo > span {
      padding: 0 !important; margin: 0 !important;
      background: none !important; border: none !important;
      border-radius: 0 !important; text-align: inherit !important;
    }
    .site-logo .logo-a { color: #1a1917; }
    .site-logo .logo-b { color: #c0bdb6; }
    .tagline {
      font-size: clamp(11px, 1vw, 13px);
      font-weight: 500; color: #888;
      letter-spacing: 0.08em; margin-top: 0.4vh;
    }
    .nav-right { display: flex; align-items: center; gap: 2vw; flex-shrink: 0; }
    .nav-links {
      display: flex; align-items: center; gap: 2vw;
      font-size: clamp(11px, 1vw, 13px); font-weight: 500; color: #aaa; letter-spacing: 0.06em;
      line-height: 1;
    }
    .nav-links a { color: inherit; text-decoration: none; line-height: 1; }
    .nav-links a:hover { color: #1a1917; }
    .nav-links .lang-switch { display: inline-flex; align-items: center; line-height: 1; }
    .nav-lang {
      background: none; border: none; padding: 0; margin: 0;
      font: inherit; font-size: inherit; font-weight: inherit;
      color: inherit; letter-spacing: inherit; line-height: 1;
      cursor: pointer; appearance: none; -webkit-appearance: none;
    }
    .nav-lang:hover { color: #1a1917; }
    .btn-support {
      background: #e8420a; border: none; color: #fff; font-family: 'Manrope', sans-serif;
      font-size: clamp(11px, 1vw, 13px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      padding: 0.8vh 1.4vw; cursor: pointer; white-space: nowrap; transition: background 0.15s;
    }
    .btn-support:hover { background: #d13a08; }

    .hero {
      flex: 1;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 2vh 4vw;
      text-align: center;
      min-height: 0;
    }
    .hero .desc {
      font-size: clamp(14px, 1.2vw, 17px); font-weight: 300; color: #888; line-height: 1.7;
      max-width: min(36vw, 520px); margin: 0 auto 2.5vh;
    }
    .hero .desc strong { color: #1a1917; font-weight: 500; }

    .input-zone { max-width: min(50vw, 680px); width: 100%; margin: 0 auto; }
    .textarea-wrap { border: 1.5px solid #1a1917; background: #fff; }
    .textarea-wrap textarea {
      display: block; width: 100%; border: none; outline: none;
      font-family: 'Manrope', sans-serif; font-size: clamp(13px, 1vw, 16px); font-weight: 400;
      line-height: 1.6; padding: 1.4vh 1.4vw;
      background: transparent; color: #1a1917; resize: none;
      height: clamp(88px, 13vh, 140px);
      border-radius: 0;
    }
    .textarea-wrap textarea::placeholder { color: #ccc; }
    .textarea-footer {
      display: flex; justify-content: space-between; align-items: center;
      padding: 1vh 1vw 1vh 1.4vw; border-top: 1px solid #e8e5de;
    }
    body.landing-active .char-count { font-size: clamp(11px, 0.8vw, 13px); color: #ccc; }
    .input-btn {
      background: #1a1917; border: none; color: #faf8f3; font-family: 'Manrope', sans-serif;
      font-size: clamp(10px, 0.8vw, 12px); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      padding: 0.8vh 2vw; cursor: pointer; white-space: nowrap; transition: background 0.15s;
      border-radius: 0;
    }
    .input-btn:hover:not(:disabled) { background: #2e2c28; }
    .input-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    .powered { margin-top: 0.8vh; font-size: clamp(11px, 0.8vw, 13px); color: #ccc; text-align: center; }
    .powered a { color: #bbb; text-decoration: none; }
    .powered a:hover { color: #888; }

    .landing-stats {
      display: grid; grid-template-columns: repeat(4, 1fr);
      border-top: 1.5px solid #1a1917; flex-shrink: 0;
    }
    .landing-stats .stat { padding: 1.6vh 2vw; border-right: 1.5px solid #1a1917; }
    .landing-stats .stat:last-child { border-right: none; }
    .landing-stats .stat-n {
      font-family: 'Playfair Display', serif; font-size: clamp(22px, 3vw, 36px); font-weight: 900;
      color: #1a1917; display: block; line-height: 1;
    }
    .landing-stats .stat-l {
      font-size: clamp(9px, 0.7vw, 11px); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
      color: #bbb; margin-top: 0.4vh; display: block; line-height: 1.3;
    }

    .site-footer {
      padding: 1vh 4vw; border-top: 1.5px solid #1a1917;
      flex-shrink: 0;
    }
    .footer-links {
      display: flex; flex-wrap: wrap; justify-content: center;
      gap: 8px 20px; padding: 1.2vh 4vw;
      border-top: 1.5px solid #1a1917;
      font-size: clamp(10px, 0.75vw, 12px);
    }
    .footer-links a { color: #aaa; text-decoration: none; letter-spacing: 0.04em; }
    .footer-links a:hover { color: #1a1917; text-decoration: underline; }
    .footer-meta {
      display: flex; justify-content: space-between; align-items: center;
      padding: 1vh 4vw;
      font-size: clamp(11px, 0.8vw, 13px); color: #ccc; letter-spacing: 0.05em;
    }
    .footer-meta a.footer-email { color: inherit; text-decoration: none; }
    .footer-meta a.footer-email:hover { color: #1a1917; text-decoration: underline; }

    body.landing-active.pwa-promo-visible { overflow-y: auto; }
    body.landing-active .pwa-promo {
      max-width: min(50vw, 680px); width: 100%; margin: 0 auto 1.25rem; text-align: left;
      border: 1.5px solid #e8e5de; background: #fff;
      flex-shrink: 0;
    }
    body.landing-active .pwa-promo-text {
      font-size: clamp(13px, 0.95vw, 15px);
      line-height: 1.55; color: #444;
      padding-right: 28px; margin-bottom: 8px;
    }
    body.landing-active .pwa-promo-link {
      font-size: clamp(12px, 0.85vw, 14px);
      font-weight: 500; color: #1a1917;
      text-decoration: underline; text-underline-offset: 2px;
    }
    body.landing-active .pwa-promo-dismiss { color: #bbb; }
    body.landing-active .input-err {
      max-width: min(50vw, 680px); width: 100%; margin: 0 auto 1rem;
    }
    body.landing-active #vi.view.active { width: 100%; }

    body:not(.landing-active) nav.site-nav {
      border-bottom-color: var(--border-strong);
      margin: -2rem -1rem 1.5rem;
      padding: 0 1rem 1rem;
    }
    body:not(.landing-active) .tagline { display: none; }
    body:not(.landing-active) .site-logo .logo-a { color: var(--text); }
    body:not(.landing-active) .nav-links { color: var(--text-tertiary); }
    body:not(.landing-active) .nav-links a:hover,
    body:not(.landing-active) .nav-lang:hover { color: var(--text); }

    @media (max-width: 768px) {
      nav.site-nav { padding: 12px 16px; flex-wrap: wrap; gap: 10px; }
      .nav-right { gap: 12px; flex-wrap: wrap; }
      .btn-support { padding: 8px 12px; }
      .hero { padding: 16px; }
      .hero .desc { max-width: 100%; margin-bottom: 16px; }
      .input-zone { max-width: 100%; }
      .landing-stats { grid-template-columns: repeat(2, 1fr); }
      .landing-stats .stat:nth-child(2) { border-right: none; }
      .landing-stats .stat:nth-child(1),
      .landing-stats .stat:nth-child(2) { border-bottom: 1.5px solid #1a1917; }
      .site-footer { padding: 0; }
      .footer-meta { flex-direction: column; gap: 4px; padding: 10px 16px; }
      .footer-links { padding: 10px 16px; gap: 6px 16px; justify-content: flex-start; }
      body.landing-active { overflow-y: auto; height: auto; min-height: 100dvh; }
      body.landing-active .hero { justify-content: flex-start; padding-top: 12px; }
      body.landing-active .textarea-wrap textarea { height: clamp(72px, 11vh, 120px); }
    }

    /* Mobile landscape & other short viewports (width may exceed 768px) */
    @media (max-height: 520px) {
      body.landing-active {
        overflow: hidden;
        height: 100dvh;
        min-height: 0;
      }
      nav.site-nav { padding: 6px 16px; flex-wrap: nowrap; }
      body.landing-active .tagline { display: none; }
      body.landing-active .hero {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 4px 16px 4px;
      }
      body.landing-active .hero .desc {
        flex-shrink: 0;
        margin-bottom: 6px;
        font-size: 12px;
        line-height: 1.4;
        max-width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      body.landing-active .pwa-promo {
        flex-shrink: 0;
        margin-bottom: 6px;
        padding: 8px 12px;
      }
      body.landing-active .pwa-promo-text { margin-bottom: 4px; font-size: 12px; }
      body.landing-active #vi.view.active {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
      body.landing-active .input-zone {
        flex: 1;
        min-height: 0;
        max-width: 100%;
        display: flex;
        flex-direction: column;
      }
      body.landing-active .textarea-wrap {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
      }
      body.landing-active .textarea-wrap textarea {
        flex: 1;
        min-height: 32px;
        height: auto;
        padding: 8px 12px;
        font-size: 13px;
        line-height: 1.45;
      }
      body.landing-active .textarea-footer { flex-shrink: 0; padding: 6px 10px 6px 12px; }
      body.landing-active .powered { flex-shrink: 0; margin-top: 4px; font-size: 11px; }
      body.landing-active .input-err { flex-shrink: 0; margin-bottom: 6px; padding: 8px 12px; font-size: 13px; }
      .landing-stats .stat { padding: 6px 10px; }
      .landing-stats .stat-n { font-size: clamp(16px, 4.5vh, 24px); }
      .landing-stats .stat-l { margin-top: 2px; font-size: 9px; }
      .site-footer { padding: 0; }
      .footer-links { padding: 4px 16px; font-size: 10px; }
      .footer-meta { flex-direction: row; padding: 4px 16px; font-size: 10px; }
    }

    /* Views */
    .view { display: none; }
    .view.active { display: block; }

    .admin-mode-badge {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .03em;
      text-transform: uppercase;
      color: #166534;
      background: #dcfce7;
      border: 1px solid #86efac;
      border-radius: 999px;
      padding: 3px 10px;
    }

    .admin-login-overlay {
      position: fixed;
      inset: 0;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      background: rgba(250, 248, 243, .92);
      backdrop-filter: blur(4px);
    }
    .admin-login-overlay[hidden] { display: none; }
    body.admin-login-blocked .hero,
    body.admin-login-blocked nav.site-nav { pointer-events: none; user-select: none; opacity: .45; }

    .admin-login-panel {
      width: min(380px, 100%);
      background: #fff;
      border: 1.5px solid #1a1917;
      border-radius: 14px;
      padding: 24px;
      box-shadow: 0 12px 40px rgba(26, 25, 23, .12);
    }
    .admin-login-panel h2 {
      font-family: "Playfair Display", Georgia, serif;
      font-size: 22px;
      margin-bottom: 8px;
    }
    .admin-login-desc {
      font-size: 14px;
      color: var(--text-secondary, #5c5a54);
      margin-bottom: 14px;
      line-height: 1.5;
    }
    .admin-login-panel input {
      width: 100%;
      margin-bottom: 12px;
    }
    .admin-login-panel .btn-support { width: 100%; }
    .admin-login-err {
      margin-top: 10px;
      font-size: 13px;
      color: #b91c1c;
    }
    .admin-login-err[hidden] { display: none; }

    .nav-auth-btn {
      background: none;
      border: none;
      font: inherit;
      font-size: clamp(11px, 1vw, 13px);
      font-weight: 500;
      letter-spacing: 0.06em;
      line-height: 1;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
      color: #aaa;
      padding: 0;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
      flex-shrink: 0;
    }
    .nav-auth-btn:hover { color: #1a1917; }
    body:not(.landing-active) .nav-auth-btn { color: var(--text-tertiary); }
    body:not(.landing-active) .nav-auth-btn:hover { color: var(--text); }
    .nav-auth-btn[hidden] { display: none !important; }
    .user-menu-wrap {
      position: relative;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      font-size: clamp(11px, 1vw, 13px);
      font-weight: 500;
      letter-spacing: 0.06em;
      line-height: 1;
      color: #aaa;
    }
    .user-menu-wrap[hidden] { display: none !important; }
    body:not(.landing-active) .user-menu-wrap { color: var(--text-tertiary); }
    .user-menu-btn {
      background: none;
      border: none;
      font: inherit;
      font-size: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      line-height: 1;
      color: inherit;
      padding: 0;
      margin: 0;
      cursor: pointer;
      max-width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      appearance: none;
      -webkit-appearance: none;
    }
    .user-menu-btn:hover { color: #1a1917; }
    body:not(.landing-active) .user-menu-btn:hover { color: var(--text); }
    .user-menu-popout {
      position: absolute;
      right: 0;
      top: calc(100% + 6px);
      min-width: 180px;
      background: #faf8f3;
      border: 1.5px solid #1a1917;
      border-radius: 10px;
      padding: 6px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      z-index: 50;
      box-shadow: 0 8px 24px rgba(0,0,0,.08);
    }
    .user-menu-popout[hidden] { display: none; }
    .user-menu-popout a,
    .user-menu-popout button {
      display: block;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      font: inherit;
      font-size: 13px;
      padding: 8px 10px;
      border-radius: 6px;
      cursor: pointer;
      color: inherit;
      text-decoration: none;
    }
    .user-menu-popout a:hover,
    .user-menu-popout button:hover { background: rgba(0,0,0,.06); }

    .auth-user-overlay {
      position: fixed;
      inset: 0;
      z-index: 1200;
      background: rgba(26,25,23,.45);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .auth-user-overlay.auth-user-overlay--gate { z-index: 10001; }
    .auth-user-overlay[hidden] { display: none; }
    .auth-user-panel {
      position: relative;
      width: min(420px, 100%);
      background: #faf8f3;
      border: 1.5px solid #1a1917;
      border-radius: 14px;
      padding: 24px 22px 20px;
    }
    .auth-user-close {
      position: absolute;
      top: 10px;
      right: 12px;
      background: none;
      border: none;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }
    .auth-user-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    .auth-user-tab {
      flex: 1;
      background: none;
      border: 1.5px solid #1a1917;
      border-radius: 999px;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 12px;
      cursor: pointer;
    }
    .auth-user-tab.active { background: #1a1917; color: #faf8f3; }
    .auth-registration-gate-notice {
      margin: 0 0 14px;
      padding: 12px 14px;
      border-radius: 10px;
      background: #FAEEDA;
      border-left: 3px solid #EF9F27;
      font-size: 13px;
      line-height: 1.55;
      color: #854F0B;
    }
    .auth-registration-gate-notice[hidden] { display: none; }
    @media (prefers-color-scheme: dark) {
      .auth-registration-gate-notice { background: #2a1d08; color: #EF9F27; }
    }
    .auth-user-form { display: flex; flex-direction: column; gap: 12px; }
    .auth-user-form[hidden] { display: none; }
    .auth-user-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
    .auth-user-panel .btn-support { width: 100%; text-align: center; }
    .auth-forgot-link, .auth-forgot-back, .auth-resend-btn {
      background: none; border: none; padding: 0; font: inherit; font-size: 13px;
      color: var(--text-tertiary); cursor: pointer; text-align: left; margin-top: 4px;
    }
    .auth-forgot-link:hover, .auth-forgot-back:hover, .auth-resend-btn:hover { color: var(--text); }
    .auth-forgot-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
    .auth-user-ok { margin-top: 10px; font-size: 13px; color: #166534; }
    .auth-user-ok[hidden] { display: none; }
    .auth-user-err { margin-top: 10px; font-size: 13px; color: #b91c1c; }
    .auth-user-err[hidden] { display: none; }
    .auth-consent-label {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.45;
      color: #444;
      cursor: pointer;
    }
    .auth-consent-label input { margin-top: 3px; flex-shrink: 0; }
    .auth-consent-label a { color: #1a1917; }

    .cookie-consent-banner {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 10000;
      background: #1a1917;
      color: #faf8f3;
      padding: 16px 20px;
      box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);
    }
    .cookie-consent-inner { max-width: 720px; margin: 0 auto; }
    .cookie-consent-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
    .cookie-consent-text { font-size: 13px; line-height: 1.55; color: #d4d2cc; margin-bottom: 12px; }
    .cookie-consent-text a { color: #faf8f3; }
    .cookie-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
    .cookie-consent-btn {
      font-family: 'Manrope', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 10px 16px;
      border: none;
      cursor: pointer;
    }
    .cookie-consent-btn-primary { background: #e8420a; color: #fff; }
    .cookie-consent-btn-secondary { background: transparent; color: #faf8f3; border: 1.5px solid #666; }
    body.cookie-consent-visible { padding-bottom: 120px; }
    @media (max-width: 768px) {
      body.cookie-consent-visible { padding-bottom: 160px; }
    }