/*
 * Unchaos Design System v1.0.0
 * Canonical runtime artifact for Portal, Wiki, Admin, and Launcher.
 * Product repositories may consume these contracts but must not fork `.u-*` rules.
 */

@font-face {
  font-family: "Beaufort";
  src: url("../../fonts/BeaufortforLOL-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Beaufort";
  src: url("../../fonts/BeaufortforLOL-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Beaufort";
  src: url("../../fonts/BeaufortforLOL-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Beaufort";
  src: url("../../fonts/BeaufortforLOL-Heavy.ttf") format("truetype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../../fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@layer unchaos.tokens, unchaos.base, unchaos.components, unchaos.products, unchaos.contract;

@layer unchaos.tokens {
  :root {
    color-scheme: dark;

    --font-beaufort: "Beaufort";

    /* Concept/1 foundations are the canonical family palette. */
    --u-color-canvas: #050608;
    --u-color-panel: rgba(8, 10, 14, 0.76);
    --u-color-panel-solid: #0b0d12;
    --u-color-raised: rgba(255, 255, 255, 0.045);
    --u-color-text: #f4f0e5;
    --u-color-muted: rgba(244, 240, 229, 0.7);
    --u-color-faint: rgba(244, 240, 229, 0.45);
    --u-color-accent: #2fa8ff;
    --u-color-accent-soft: rgba(47, 168, 255, 0.35);
    --u-color-accent-glow: rgba(47, 168, 255, 0.58);
    --u-color-success: #4ade80;
    --u-color-warning: #f5b544;
    --u-color-danger: #ff6b6b;
    --u-color-line: rgba(255, 255, 255, 0.2);
    --u-color-line-strong: rgba(255, 255, 255, 0.28);
    --u-color-focus: var(--u-color-accent);

    --u-font-display: var(--font-beaufort), "Leelawadee UI", Tahoma, "Segoe UI", sans-serif;
    --u-font-heading: var(--font-beaufort), "Leelawadee UI", Tahoma, "Segoe UI", sans-serif;
    --u-font-body: "Leelawadee UI", Tahoma, "Segoe UI", sans-serif;
    --u-font-mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace;

    --u-space-1: 0.4rem;
    --u-space-2: 0.7rem;
    --u-space-3: 1.1rem;
    --u-space-4: 1.8rem;
    --u-space-5: 3rem;
    --u-space-6: 4.5rem;

    --u-radius-sm: 0.35rem;
    --u-radius-md: clamp(0.48rem, 0.65vw, 0.6rem);
    --u-radius-lg: 0.75rem;
    --u-control-height: 44px;
    --u-hit-area: 44px;
    --u-focus-ring: 0 0 0 2px var(--u-color-canvas), 0 0 0 4px var(--u-color-focus);
    --u-motion-fast: 140ms;
    --u-motion-normal: 220ms;
    --u-reading-measure: 72ch;

    /* Stable compatibility vocabulary consumed by the existing product variants. */
    --bg: var(--u-color-canvas);
    --panel: var(--u-color-panel);
    --panel-solid: var(--u-color-panel-solid);
    --raised: var(--u-color-raised);
    --text: var(--u-color-text);
    --muted: var(--u-color-muted);
    --faint: var(--u-color-faint);
    --accent: var(--u-color-accent);
    --accent-soft: var(--u-color-accent-soft);
    --accent-glow: var(--u-color-accent-glow);
    --success: var(--u-color-success);
    --ok: var(--u-color-success);
    --warning: var(--u-color-warning);
    --warn: var(--u-color-warning);
    --danger: var(--u-color-danger);
    --line: var(--u-color-line);
    --line-strong: var(--u-color-line-strong);
    --radius-main: var(--u-radius-md);
    --radius-card: var(--u-radius-lg);
    --space-xs: var(--u-space-1);
    --space-sm: var(--u-space-2);
    --space-md: var(--u-space-3);
    --space-lg: var(--u-space-4);
    --space-xl: var(--u-space-5);
    --control-h: var(--u-control-height);
    --font-heading: var(--u-font-heading);
    --font-hero: var(--u-font-display);
    --font-body: var(--u-font-body);
    --font-mono: var(--u-font-mono);
  }

  [data-product="portal"] {
    --u-product-density: comfortable;
    --u-product-atmosphere: cinematic;
    --u-surface-alpha: 0.88;
  }

  [data-product="wiki"] {
    --u-product-density: readable;
    --u-product-atmosphere: editorial;
    --u-surface-alpha: 0.96;
  }

  [data-product="admin"] {
    --u-product-density: compact;
    --u-product-atmosphere: operational;
    --u-surface-alpha: 0.98;
    --u-color-panel: rgba(13, 16, 22, 0.72);
    --u-color-accent-glow: rgba(47, 168, 255, 0.45);
    --u-color-line: rgba(255, 255, 255, 0.1);
    --u-color-line-strong: rgba(255, 255, 255, 0.18);
    --u-radius-lg: 0.85rem;
    --u-control-height: 44px;
  }

  [data-product="launcher"] {
    --u-product-density: compact;
    --u-product-atmosphere: native;
    --u-surface-alpha: 0.94;
    --u-motion-normal: 180ms;
    --u-color-canvas: #05070a;
    --u-color-panel: rgba(8, 13, 19, 0.82);
    --u-color-panel-solid: rgba(10, 17, 25, 0.94);
    --u-color-text: #edf4f8;
    --u-color-muted: rgba(221, 232, 240, 0.66);
    --u-color-faint: rgba(221, 232, 240, 0.42);
    --u-color-accent: #58b9ff;
    --u-color-accent-soft: rgba(88, 185, 255, 0.35);
    --u-color-accent-glow: rgba(88, 185, 255, 0.5);
    --u-color-line: rgba(202, 228, 255, 0.18);
    --u-color-line-strong: rgba(123, 205, 255, 0.48);
    --panel-strong: var(--u-color-panel-solid);
    --line-bright: var(--u-color-line-strong);
    --soft: var(--u-color-faint);
    --accent-strong: #8bd3ff;
  }
}

@layer unchaos.base {
  [data-design-system^="unchaos-"] *,
  [data-design-system^="unchaos-"] *::before,
  [data-design-system^="unchaos-"] *::after {
    box-sizing: border-box;
  }

  html[data-design-system^="unchaos-"] {
    color-scheme: dark;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }

  [data-design-system^="unchaos-"] body {
    margin: 0;
    min-block-size: 100vh;
    color: var(--u-color-text);
    font-family: var(--u-font-body);
  }

  [data-design-system^="unchaos-"] :where(button, input, select, textarea) {
    font: inherit;
  }

  [data-design-system^="unchaos-"] :where(a) {
    color: inherit;
  }

  [data-design-system^="unchaos-"] :where(button, a, input, select, textarea, summary):focus-visible {
    outline: 2px solid var(--u-color-focus) !important;
    outline-offset: 2px !important;
    box-shadow: var(--u-focus-ring);
  }

  [data-design-system^="unchaos-"] :where(button, [role="button"]):disabled,
  [data-design-system^="unchaos-"] [aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
  }

  [data-design-system^="unchaos-"] :where(*)::-webkit-scrollbar {
    width: 0.55rem;
    height: 0.55rem;
  }

  [data-design-system^="unchaos-"] :where(*)::-webkit-scrollbar-track,
  [data-design-system^="unchaos-"] :where(*)::-webkit-scrollbar-corner {
    background: transparent;
  }

  [data-design-system^="unchaos-"] :where(*)::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
  }

  [data-design-system^="unchaos-"] :where(*)::-webkit-scrollbar-thumb:hover {
    background: var(--u-color-accent-soft);
  }

  /* Concept/1 document foundation. Portal, Wiki and Admin share one physical paint
     contract; product sections may place cinematic/editorial surfaces above it. */
  :where(
    [data-product="portal"],
    [data-product="wiki"],
    [data-product="admin"]
  ) body {
    position: relative;
    isolation: isolate;
    background: var(--bg);
  }

  :where(
    [data-product="portal"],
    [data-product="wiki"],
    [data-product="admin"]
  ) body::before,
  :where(
    [data-product="portal"],
    [data-product="wiki"],
    [data-product="admin"]
  ) body::after {
    content: "";
    position: fixed;
    inset: -20%;
    pointer-events: none;
  }

  :where(
    [data-product="portal"],
    [data-product="wiki"],
    [data-product="admin"]
  ) body::before {
    z-index: -2;
    opacity: 0.22;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 140px 140px;
  }

  :where(
    [data-product="portal"],
    [data-product="wiki"],
    [data-product="admin"]
  ) body::after {
    z-index: -1;
    background:
      radial-gradient(circle at 12% 0%, rgba(242, 183, 95, 0.1), transparent 38%),
      radial-gradient(circle at 88% 90%, rgba(47, 168, 255, 0.1), transparent 40%);
  }
}

@layer unchaos.components {
  .u-header {
    font-family: var(--u-font-body);
  }

  .u-header__inner,
  .u-header__utilities,
  .u-nav,
  .u-action,
  .u-icon-action,
  .u-nav__item,
  .u-brand {
    align-items: center;
  }

  .u-action,
  .u-icon-action,
  .u-nav__item {
    font-family: var(--u-font-heading);
  }

  .u-header__utilities,
  .u-nav,
  .u-action,
  .u-icon-action,
  .u-nav__item,
  .u-brand {
    display: inline-flex;
  }

  .u-action {
    justify-content: center;
    min-block-size: var(--u-hit-area);
    text-align: center;
  }

  :where(
    [data-product="portal"] .hud-btn,
    [data-product="portal"] .cta-primary,
    [data-product="portal"] .cta-secondary,
    [data-product="wiki"] .btn,
    [data-product="admin"] .btn,
    [data-product="launcher"] .small-button,
    [data-product="launcher"] .secondary-button,
    [data-product="launcher"] .play-button,
    [data-product="launcher"] .link-button
  ),
  .u-icon-action,
  .u-nav__item {
    min-block-size: var(--u-hit-area);
  }

  .u-icon-action {
    justify-content: center;
    min-inline-size: var(--u-hit-area);
  }

  .u-icon-action[data-platform="ds"] {
    --u-platform-border: rgba(88, 101, 242, 0.86);
    --u-platform-background: rgba(88, 101, 242, 0.22);
    --u-platform-ring: rgba(88, 101, 242, 0.3);
    --u-platform-glow: rgba(88, 101, 242, 0.52);
  }

  .u-icon-action[data-platform="tg"] {
    --u-platform-border: rgba(40, 167, 237, 0.86);
    --u-platform-background: rgba(40, 167, 237, 0.2);
    --u-platform-ring: rgba(40, 167, 237, 0.28);
    --u-platform-glow: rgba(40, 167, 237, 0.5);
  }

  .u-icon-action[data-platform="yt"] {
    --u-platform-border: rgba(255, 0, 0, 0.9);
    --u-platform-background: rgba(255, 0, 0, 0.2);
    --u-platform-ring: rgba(255, 0, 0, 0.3);
    --u-platform-glow: rgba(255, 0, 0, 0.46);
  }

  .u-icon-action[data-platform="vk"] {
    --u-platform-border: rgba(0, 119, 255, 0.86);
    --u-platform-background: rgba(0, 119, 255, 0.2);
    --u-platform-ring: rgba(0, 119, 255, 0.28);
    --u-platform-glow: rgba(0, 119, 255, 0.5);
  }

  .u-icon-action[data-platform]:is(:hover, :focus-visible) {
    border-color: var(--u-platform-border);
    background: var(--u-platform-background);
    box-shadow:
      0 0 0 1px var(--u-platform-ring),
      0 0 16px var(--u-platform-glow);
  }

  :where(
    .u-action,
    [data-product="portal"] .hud-btn,
    [data-product="portal"] .cta-primary,
    [data-product="portal"] .cta-secondary,
    [data-product="wiki"] .btn,
    [data-product="admin"] .btn,
    [data-product="launcher"] .small-button,
    [data-product="launcher"] .secondary-button,
    [data-product="launcher"] .play-button,
    [data-product="launcher"] .link-button
  ),
  .u-nav__item {
    text-decoration: none;
    transition:
      color var(--u-motion-fast) ease,
      border-color var(--u-motion-fast) ease,
      background-color var(--u-motion-fast) ease,
      opacity var(--u-motion-fast) ease;
  }

  .u-field {
    min-block-size: var(--u-control-height);
  }

  .u-field-group {
    display: grid;
    gap: 0.35rem;
    min-inline-size: 0;
  }

  .u-field-label {
    color: var(--u-color-text);
    font-family: var(--u-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
  }

  .u-field-hint,
  .u-field-message {
    color: var(--u-color-muted);
    font-family: var(--u-font-body);
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .u-field-message {
    min-block-size: 1.05rem;
  }

  .u-field-group[data-state="valid"] .u-field-control {
    border-color: color-mix(in srgb, var(--u-color-success) 62%, transparent);
    background: color-mix(in srgb, var(--u-color-success) 4%, var(--u-color-raised));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--u-color-success) 12%, transparent);
  }

  .u-field-group[data-state="valid"] .u-field-message {
    color: color-mix(in srgb, var(--u-color-success) 78%, white);
  }

  .u-field-group[data-state="invalid"] .u-field-control {
    border-color: color-mix(in srgb, var(--u-color-danger) 74%, transparent);
    background: color-mix(in srgb, var(--u-color-danger) 5%, var(--u-color-raised));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--u-color-danger) 14%, transparent);
  }

  .u-field-group[data-state="invalid"] .u-field-message {
    color: color-mix(in srgb, var(--u-color-danger) 72%, white);
    font-weight: 700;
  }

  .u-password-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--u-color-muted);
    font-family: var(--u-font-body);
    font-size: 0.72rem;
  }

  .u-password-requirements li::before {
    content: "○";
    margin-inline-end: 0.3rem;
  }

  .u-password-requirements li[data-met="true"] {
    color: color-mix(in srgb, var(--u-color-success) 78%, white);
  }

  .u-password-requirements li[data-met="true"]::before {
    content: "✓";
  }

  :where(
    .u-field-control,
    [data-product="portal"] .hud-input,
    [data-product="wiki"] .search-input,
    [data-product="wiki"] .filter-input,
    [data-product="wiki"] .filter-select,
    [data-product="admin"] input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"]),
    [data-product="admin"] select,
    [data-product="admin"] textarea,
    [data-product="launcher"] .auth-field input
  ) {
    inline-size: 100%;
    min-inline-size: 0;
    min-block-size: var(--u-control-height);
    border: 1px solid var(--u-color-line);
    border-radius: var(--u-radius-md);
    color: var(--u-color-text);
    background: var(--u-color-raised);
    transition:
      border-color var(--u-motion-fast) ease,
      box-shadow var(--u-motion-fast) ease,
      background-color var(--u-motion-fast) ease;
  }

  :where(
    .u-field-control,
    [data-product="portal"] .hud-input,
    [data-product="wiki"] .search-input,
    [data-product="wiki"] .filter-input,
    [data-product="admin"] input,
    [data-product="admin"] textarea,
    [data-product="launcher"] .auth-field input
  )::placeholder {
    color: var(--u-color-faint);
  }

  :where(
    .u-field-control,
    [data-product="portal"] .hud-input,
    [data-product="wiki"] .search-input,
    [data-product="wiki"] .filter-input,
    [data-product="wiki"] .filter-select,
    [data-product="admin"] input,
    [data-product="admin"] select,
    [data-product="admin"] textarea,
    [data-product="launcher"] .auth-field input
  ):focus-visible {
    border-color: var(--u-color-focus);
  }

  :where(
    .u-surface,
    [data-product="portal"] .hud-panel,
    [data-product="wiki"] .content-card,
    [data-product="wiki"] .infobox,
    [data-product="admin"] .card,
    [data-product="admin"] .auth-card,
    [data-product="launcher"] .patch-card,
    [data-product="launcher"] .auth-dialog
  ) {
    border: 1px solid var(--u-color-line);
    background: color-mix(in srgb, var(--u-color-panel-solid) calc(var(--u-surface-alpha) * 100%), transparent);
  }

  :where(
    .u-feedback,
    [data-product="portal"] .hud-form-message,
    [data-product="wiki"] .moderation-notice,
    [data-product="wiki"] .guide-editor-status,
    [data-product="admin"] .editor-status,
    [data-product="launcher"] .auth-note
  ) {
    border-inline-start: 2px solid var(--u-feedback-color, var(--u-color-line));
    background: color-mix(in srgb, var(--u-feedback-color, var(--u-color-text)) 7%, transparent);
    color: var(--u-color-muted);
  }

  .u-feedback[data-tone="info"] { --u-feedback-color: var(--u-color-accent); }
  .u-feedback[data-tone="success"] { --u-feedback-color: var(--u-color-success); }
  .u-feedback[data-tone="warning"] { --u-feedback-color: var(--u-color-warning); }
  .u-feedback[data-tone="danger"] { --u-feedback-color: var(--u-color-danger); }

  .u-status {
    display: inline-flex;
    align-items: center;
    min-block-size: 1.5rem;
    padding-inline: 0.55rem;
    border: 1px solid var(--u-status-color, var(--u-color-line));
    border-radius: 999px;
    color: var(--u-status-color, var(--u-color-muted));
    font-size: 0.75rem;
  }

  :where(
    .u-menu,
    [data-product="portal"] .lang-switcher-menu,
    [data-product="wiki"] .lang-switcher-menu,
    [data-product="wiki"] .search-suggestions,
    [data-product="admin"] .selectfield-list,
    [data-product="admin"] .calendar,
    [data-product="launcher"] .lang-menu
  ),
  .u-popover {
    border: 1px solid var(--u-color-line);
    border-radius: var(--u-radius-md);
    background: color-mix(in srgb, var(--u-color-panel-solid) 96%, transparent);
    box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.48);
  }

  :where(
    .u-dialog,
    [data-product="portal"] .hud-modal,
    [data-product="admin"] [role="dialog"],
    [data-product="launcher"] .auth-dialog
  ) {
    color: var(--u-color-text);
  }

  :where(.u-progress, [data-product="launcher"] .progress-shell) {
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--u-color-text) 8%, transparent);
  }

  :where(
    .u-table-region,
    [data-product="portal"] .hud-table-wrap,
    [data-product="wiki"] .table-scroll,
    [data-product="admin"] .table-wrap
  ) {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }

  :where(.u-disclosure, [data-product="wiki"] details, [data-product="admin"] details) > summary {
    min-block-size: var(--u-hit-area);
    cursor: pointer;
  }

  :where([data-product="portal"], [data-product="wiki"]) .lang-switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  :where([data-product="portal"], [data-product="wiki"]) .lang-switcher-menu {
    position: absolute;
    top: 0;
    right: calc(100% + 0.45rem);
    display: flex;
    gap: 0.45rem;
    opacity: 0;
    visibility: hidden;
    transform: translateX(0.4rem);
    pointer-events: none;
    transition: opacity var(--u-motion-normal) ease, transform var(--u-motion-normal) ease;
  }

  :where([data-product="portal"], [data-product="wiki"]) .lang-switcher.is-open .lang-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
  }

  :where([data-product="portal"], [data-product="launcher"]) .tag-line-morph {
    position: relative;
  }

  :where([data-product="portal"], [data-product="launcher"]) .tag-line-morph::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 52%;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: opacity var(--u-motion-normal) ease;
  }

  :where([data-product="portal"], [data-product="launcher"]) .badge-slot {
    position: relative;
    display: inline-flex;
    align-items: flex-start;
    height: 1.1em;
    overflow: hidden;
  }

  :where([data-product="portal"], [data-product="launcher"]) .badge-reel {
    display: inline-flex;
    flex-direction: column;
    transform: translateY(0);
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  :where([data-product="portal"], [data-product="launcher"]) .badge-reel > span {
    display: block;
    height: 1.1em;
    line-height: 1.1em;
    transition: color 240ms ease, opacity 240ms ease, text-shadow 240ms ease;
  }

  :where([data-product="portal"], [data-product="launcher"]) .hero-tag-anim:is(.step-old, .step-strike) .badge-reel > span:last-child {
    color: rgba(255, 255, 255, 0.44);
  }

  :where([data-product="portal"], [data-product="launcher"]) .hero-tag-anim.step-strike .tag-line-morph::after {
    opacity: 1;
    animation: u-tag-strike 360ms ease forwards;
  }

  :where([data-product="portal"], [data-product="launcher"]) .hero-tag-anim:is(.step-morph, .step-new) .badge-reel {
    transform: translateY(-50%);
  }

  :where([data-product="portal"], [data-product="launcher"]) .hero-tag-anim:is(.step-morph, .step-new) .badge-reel > span:first-child {
    color: rgba(255, 99, 99, 0.58);
    text-decoration: line-through;
    text-decoration-color: #ff3a3a;
  }

  :where([data-product="wiki"], [data-product="admin"]) .ambient-sigils {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  :where([data-product="wiki"], [data-product="admin"]) .ambient-sigil {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  :where([data-product="wiki"], [data-product="admin"]) .ambient-sigil-cold {
    animation-name: u-sigil-spin;
    animation-duration: 130s;
    background:
      repeating-radial-gradient(circle, transparent 0 10px, rgba(47, 168, 255, 0.5) 10px 11px, transparent 11px 26px),
      radial-gradient(circle, transparent 55%, rgba(47, 168, 255, 0.12) 56% 60%, transparent 61%);
  }

  :where([data-product="wiki"], [data-product="admin"]) .ambient-sigil-warm {
    animation-name: u-sigil-spin-reverse;
    animation-duration: 95s;
    background:
      repeating-conic-gradient(from 0deg, rgba(212, 175, 55, 0.45) 0deg 2deg, transparent 2deg 30deg),
      radial-gradient(circle, transparent 58%, rgba(212, 175, 55, 0.1) 59% 63%, transparent 64%);
  }
}

@keyframes u-sigil-spin {
  to { rotate: 360deg; }
}

@keyframes u-sigil-spin-reverse {
  to { rotate: -360deg; }
}

@keyframes u-tag-strike {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@layer unchaos.products {
  [data-product="admin"] .u-action,
  [data-product="admin"] .u-icon-action {
    --u-hit-area: 44px;
  }

  @media (max-width: 700px) {
    [data-product="admin"] {
      --u-control-height: 44px;
    }

    [data-product="admin"] .u-action,
    [data-product="admin"] .u-icon-action {
      --u-hit-area: 44px;
    }
  }
}

/* Immutable cross-product typography and control geometry from Concept/1.
   Product variants may change tokens, atmosphere and density, but not these roles. */
@layer unchaos.contract {
  html[data-design-system^="unchaos-"] body {
    font-family: var(--u-font-body);
  }

  [data-design-system^="unchaos-"] :where(h1, h2, h3, .u-heading) {
    font-family: var(--u-font-heading);
  }

  [data-design-system^="unchaos-"] :where(
    .u-action,
    .u-icon-action,
    .u-nav__item,
    .u-tab,
    [data-product="portal"] .hud-btn,
    [data-product="portal"] .cta-primary,
    [data-product="portal"] .cta-secondary,
    [data-product="wiki"] .btn,
    [data-product="admin"] .btn,
    [data-product="launcher"] .small-button,
    [data-product="launcher"] .secondary-button,
    [data-product="launcher"] .play-button,
    [data-product="launcher"] .link-button
  ) {
    font-family: var(--u-font-heading);
  }

  [data-design-system^="unchaos-"] :where(
    .u-action,
    [data-product="portal"] .hud-btn,
    [data-product="portal"] .cta-primary,
    [data-product="portal"] .cta-secondary,
    [data-product="wiki"] .btn,
    [data-product="admin"] .btn,
    [data-product="launcher"] .small-button,
    [data-product="launcher"] .secondary-button,
    [data-product="launcher"] .play-button,
    [data-product="launcher"] .link-button
  ) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--u-hit-area);
    min-inline-size: var(--u-hit-area);
    text-align: center;
  }

  [data-design-system^="unchaos-"] .u-icon-action {
    min-inline-size: var(--u-hit-area);
    min-block-size: var(--u-hit-area);
  }

  [data-design-system^="unchaos-"] :where(.u-nav__item, .u-tab, .u-chip-action) {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--u-hit-area);
    min-inline-size: var(--u-hit-area);
  }

  [data-design-system^="unchaos-"] .u-tab {
    justify-content: center;
    text-align: center;
  }

  [data-design-system^="unchaos-"] .u-chip-action,
  [data-design-system^="unchaos-"] .u-interactive-surface {
    min-block-size: var(--u-hit-area);
  }

  [data-design-system^="unchaos-"] .u-dot-action {
    display: inline-grid;
    place-items: center;
    inline-size: var(--u-hit-area);
    block-size: var(--u-hit-area);
    min-inline-size: var(--u-hit-area);
    min-block-size: var(--u-hit-area);
    padding: 0;
    border: 0;
    background: transparent;
  }

  [data-design-system^="unchaos-"] :where(
    .u-field-control,
    [data-product="portal"] .hud-input,
    [data-product="wiki"] .search-input,
    [data-product="wiki"] .filter-input,
    [data-product="wiki"] .filter-select,
    [data-product="admin"] input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"]),
    [data-product="admin"] select,
    [data-product="admin"] textarea,
    [data-product="launcher"] .auth-field input
  ) {
    min-block-size: var(--u-control-height);
    font-family: var(--u-font-body);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-design-system^="unchaos-"] *,
  [data-design-system^="unchaos-"] *::before,
  [data-design-system^="unchaos-"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  :where([data-product="wiki"], [data-product="admin"]) .ambient-sigil {
    animation: none !important;
  }
}

@layer unchaos.products {

/* PRODUCT: portal. Source is runtime/design-system/src/products. */
html[data-product="portal"] {
  --rail-safe: 0rem;
}

html[data-product="portal"] {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-x: hidden;
}

html[data-product="portal"] body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--font-body);
  background: var(--bg);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* `overflow-x: hidden` у body убран намеренно, и это не косметика.
   Любое non-visible переполнение делает элемент СКРОЛЛ-КОНТЕЙНЕРОМ. Пока оно стояло здесь,
   ближайшим скролл-контейнером для секций лендинга оказывался body — а прокручивается
   страница корнем (html). Секции складывали свои точки привязки в контейнер, который
   никогда не двигается, и поблочный скролл не работал, где бы ни было объявлено
   scroll-snap-type. Горизонтальное переполнение по-прежнему режется: у html оно осталось,
   а на лендинге ещё и у .page-root. */

html[data-product="portal"]::-webkit-scrollbar,
html[data-product="portal"] body::-webkit-scrollbar {
  display: none;
}

/* Полоса прокрутки спрятана выше ради лендинга: там вертикальная лента секций во весь
   экран, и полоса сбоку резала бы картинку. Но разделы портала — рейтинг, статистика,
   новости, кабинет — это обычные длинные документы, и там прятать её вредно: не видно
   ни где ты находишься, ни сколько осталось.
   Возвращаем полосу только им, в том же виде, что в вики. Разделять получается по
   обёртке: у лендинга корень .page-root, у портальных разделов — .hud-root.
   `color-scheme: dark` тут главная строка: без неё браузер рисует собственный жёлоб
   светло-серым, и это светлый шов вдоль правого края почти чёрного сайта, который
   никакими ::-webkit-scrollbar не перекрашивается. */
html[data-product="portal"]:has(.hud-root) {
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  -ms-overflow-style: auto;
}

html[data-product="portal"]:has(.hud-root) body {
  scrollbar-width: thin;
  -ms-overflow-style: auto;
}

/* Chromium/WebKit-эквивалент двух строк выше. Через `*` намеренно: белые полосы вылезают
   не только у страницы, но и в каждом внутреннем контейнере с прокруткой. */
html[data-product="portal"]:has(.hud-root)::-webkit-scrollbar,
html[data-product="portal"]:has(.hud-root) *::-webkit-scrollbar {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
}

html[data-product="portal"]:has(.hud-root) *::-webkit-scrollbar-track {
  background: transparent;
}

html[data-product="portal"]:has(.hud-root) *::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
}

html[data-product="portal"]:has(.hud-root) *::-webkit-scrollbar-thumb:hover {
  background: var(--accent-soft);
}

html[data-product="portal"]:has(.hud-root) *::-webkit-scrollbar-corner {
  background: transparent;
}

html[data-product="portal"] .page-root {
  position: relative;
  overflow-x: clip;
}

html[data-product="portal"] .social-rail,
html[data-product="portal"] .section-rail {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
}

html[data-product="portal"] .social-rail {
  left: 0.8rem;
  flex-direction: column;
  gap: 0.6rem;
}

/* Стадия promo: шапки нет, и переключатель висит в углу сам по себе — так он
   стоял на UnrealSite до появления портальной шапки. На остальных стадиях его
   положение задаёт .hud-topbar-actions, и этот класс не используется. */
html[data-product="portal"] .landing-lang-float {
  position: fixed;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 45;
}

html[data-product="portal"] .lang-switcher-trigger,
html[data-product="portal"] .lang-switcher-button {
  padding: 0;
  font-family: inherit;
  text-transform: uppercase;
  cursor: pointer;
}

html[data-product="portal"] .lang-switcher-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
}

html[data-product="portal"] .lang-flag {
  width: 1.7rem;
  height: auto;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
  display: block;
}

html[data-product="portal"] .lang-switcher-caret {
  position: absolute;
  left: -0.22rem;
  top: 50%;
  width: auto;
  color: rgba(169, 219, 255, 0.78);
  font-size: 0.68rem;
  line-height: 1;
  transform: translateY(-50%);
  text-shadow: 0 0 8px rgba(104, 194, 255, 0.2);
}

/* Языков восемь, и веером влево от флага они занимают ~312px. На узком экране (375px)
   флаг стоит у правого края, слева от него остаётся под 200px — меню уезжало за левый
   край окна примерно на 120px, и половина языков была недоступна.
   На той же границе, где шапка сворачивается в бургер, роняем меню вниз обычным
   вертикальным списком на подложке. Подложка тут обязательна: список идёт поверх
   бегущей ленты «Хроника мира», и без неё флаги и текст ленты мешались друг с другом. */
@media (max-width: 900px) {
  html[data-product="portal"] .lang-switcher-menu {
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 2; /* лента идёт следом в DOM и без этого рисовалась бы поверх */
    /* Сетка в одну колонку, а не flex: у абсолютного блока ширина по содержимому
       считается от containing block, а это .lang-switcher шириной с один флаг —
       флексом список сам собой сжимался. width: max-content обтягивает флаги. */
    display: grid;
    grid-template-columns: 2.4rem;
    width: max-content;
    padding: 0.4rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-main);
    background: rgba(8, 7, 12, 0.95);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5);
    transform: translateY(-0.4rem);
  }

  html[data-product="portal"] .lang-switcher.is-open .lang-switcher-menu {
    transform: translateY(0);
  }

  /* Раз список уходит вниз, а не влево, то и «птичка» у флага должна показывать вниз.
     Поворачиваем ту же самую на -90°, а не подменяем символ: `<` становится «вниз»
     (закрыто — раскроется вниз), `>` — «вверх» (открыто — свернётся обратно). */
  html[data-product="portal"] .lang-switcher-caret {
    left: 50%;
    top: auto;
    bottom: -0.58rem;
    transform: translateX(-50%) rotate(-90deg);
  }
}


html[data-product="portal"] .lang-switcher.is-open .lang-switcher-trigger,
html[data-product="portal"] .lang-switcher-button:hover,
html[data-product="portal"] .lang-switcher-button:focus-visible {
  border-color: rgba(129, 216, 255, 0.48);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12)),
    rgba(18, 36, 54, 0.92);
  color: #f3f8fd;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 18px rgba(77, 176, 255, 0.18);
}

html[data-product="portal"] .section-rail {
  right: -0.35rem;
  flex-direction: column;
  gap: 0.42rem;
  align-items: flex-end;
}

html[data-product="portal"] .social-dot {
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-main);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 700;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 220ms ease,
    transform 180ms ease;
}

html[data-product="portal"] .social-dot:hover,
html[data-product="portal"] .social-dot:focus-visible {
  color: #dff2ff;
  border-color: rgba(95, 190, 255, 0.78);
  background: rgba(47, 168, 255, 0.14);
  box-shadow:
    0 0 0 1px rgba(47, 168, 255, 0.28),
    0 0 16px rgba(47, 168, 255, 0.45);
  transform: translateY(-1px);
}

html[data-product="portal"] .rail-item {
  --rail-item-w: 5.4rem;
  --rail-item-h: 1.95rem;
  border: 0;
  border-radius: var(--radius-main) 0 0 var(--radius-main);
  padding: 0 0.72rem;
  background: rgba(255, 255, 255, 0.11);
  color: rgba(255, 255, 255, 0.66);
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  cursor: pointer;
  width: var(--rail-item-w);
  height: var(--rail-item-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1;
  transition:
    transform 220ms ease,
    opacity 220ms ease,
    filter 220ms ease,
    background-color 220ms ease,
    color 220ms ease;
}

html[data-product="portal"] .rail-item-label {
  display: block;
  transform: translateY(1px);
}

html[data-product="portal"] .rail-item:not(.is-active) {
  opacity: 0.62;
  filter: blur(0.3px) saturate(0.7);
  transform: translateX(0.45rem);
}

html[data-product="portal"] .rail-item:hover,
html[data-product="portal"] .rail-item:focus-visible {
  opacity: 0.9;
  filter: none;
  transform: translateX(0.14rem);
}

html[data-product="portal"] .rail-item.is-active {
  opacity: 1;
  filter: none;
  transform: translateX(0);
}

html[data-product="portal"] .rail-item.is-active {
  background: var(--accent);
  color: #061321;
}

html[data-product="portal"] .landing-section {
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Флексбокс, центрируя содержимое выше контейнера, выпускает его за ОБА края — и за
     верхний тоже, из-за чего заголовок «Классов» вылезал поверх зарезервированной полосы
     и снова оказывался под шапкой. `safe` переключает выравнивание на «от начала», как
     только содержимое перестаёт помещаться: снизу оно тогда просто прокручивается, а
     сверху ничего не срезается. Дублируем свойство — браузер без поддержки `safe`
     отбросит вторую строку и останется на обычном center. */
  align-items: safe center;
  justify-content: center;
  padding: clamp(1rem, 3.2vw, 2.2rem);
}

/* Боковая навигация зовёт scrollIntoView({ block: "start" }), а тот подводит верх секции
   к верху окна — то есть под фиксированную шапку высотой ~106px. У невысоких секций это
   незаметно, содержимое в них отцентровано; а у «Нового мира» и «Классов» оно начинается
   от верхнего края, и заголовок уезжал под полосу навигации.
   Резервируем полосу под шапку внутри самой секции, а не сдвигаем прокрутку: секция
   ровно в 100svh, сдвинутая вниз на высоту шапки, вылезала бы за нижний край экрана.
   С padding-top секция по-прежнему занимает ровно один экран, просто её содержимое
   начинается под шапкой.
   Герой исключён: у него своя раскладка с логотипом по центру свободной полосы и
   кнопками по низу, и лишний отступ сверху её бы сломал.
   Только шире 900px: там секции разворачиваются на весь экран и прокрутка идёт по ним.
   На узких они складываются в обычный поток (min-height: auto), шапку задевает лишь
   первая, и этот отступ, попав туда, оторвал бы каждую секцию от предыдущей. */
@media (min-width: 901px) {
  html[data-product="portal"] .landing-section:not(.hero) {
    padding-top: calc(var(--hud-topbar-h, 6.6rem) + clamp(1rem, 3.2vw, 2.2rem));
  }
}

html[data-product="portal"] .landing-shell {
  width: min(calc(100% - var(--rail-safe)), 74rem);
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
}

html[data-product="portal"] .section-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  padding: clamp(1rem, 2.6vw, 2rem);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(0, 0, 0, 0.22)),
    var(--panel);
  backdrop-filter: blur(8px);
}

html[data-product="portal"] .section-enter {
  transform: translateY(16px);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-product="portal"] .section-enter.is-visible {
  transform: translateY(0);
}

html[data-product="portal"] .section-content,
html[data-product="portal"] .section-panel > * {
  transition: opacity 420ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-product="portal"] .section-enter:not(.is-visible) .section-content,
html[data-product="portal"] .section-enter:not(.is-visible) .section-panel > * {
  opacity: 0;
  transform: translateY(16px);
}

html[data-product="portal"] .hero {
  position: relative;
  overflow: hidden;
}

html[data-product="portal"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(47, 168, 255, 0.2), transparent 35%),
    radial-gradient(circle at 80% 86%, rgba(117, 180, 255, 0.12), transparent 38%);
  z-index: 0;
}

html[data-product="portal"] .hero-video,
html[data-product="portal"] .hero-shade {
  position: absolute;
  inset: 0;
}

html[data-product="portal"] .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-product="portal"] .hero-shade {
  background:
    linear-gradient(to bottom, rgba(3, 5, 8, 0.34), rgba(3, 5, 8, 0.9)),
    radial-gradient(circle at 50% 34%, rgba(47, 168, 255, 0.24), transparent 42%);
}

html[data-product="portal"] .hero-content {
  position: relative;
  text-align: center;
  max-width: 62rem;
  z-index: 1;
  height: 100%;
  padding-top: clamp(2.8rem, 5.5vw, 4.4rem);
  padding-bottom: clamp(1rem, 2.4vh, 1.8rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

html[data-product="portal"] .hero-tag {
  display: inline-block;
  margin: 0;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
}

/* Чип с технологиями стоял на `top: clamp(0.85rem, 2.5vw, 1.5rem)` — с тех времён, когда
   над героем не было фиксированной шапки. Сейчас .hud-topbar (z-index 60, непрозрачный
   градиент) накрывает первые ~106px, и чип просто оказался под ней: в DOM он был, на
   экране — нет. Отсчитываем от высоты шапки, а не от края окна. */
html[data-product="portal"] .hero-tag-fixed {
  position: absolute;
  top: calc(var(--hud-topbar-h, 6.6rem) + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  transition: opacity 220ms ease, transform 220ms ease;
}

html[data-product="portal"] .hero-tag-anim {
  width: fit-content;
  max-width: 90vw;
  text-align: center;
  letter-spacing: 0.08em;
  transition:
    background-color 320ms ease,
    border-color 320ms ease,
    box-shadow 360ms ease;
}

html[data-product="portal"] .tag-line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  font-size: clamp(0.58rem, 1.05vw, 0.74rem);
  line-height: 1.1;
  white-space: nowrap;
}

html[data-product="portal"] .tag-line-morph::after {
  height: 1.6px;
  background: linear-gradient(90deg, transparent, #ff3a3a 14%, #ff3a3a 86%, transparent);
}

html[data-product="portal"] .hero-tag-anim.step-old .badge-reel > span:first-child,
html[data-product="portal"] .hero-tag-anim.step-strike .badge-reel > span:first-child {
  color: #ff9a9a;
  text-shadow: 0 0 10px rgba(255, 64, 64, 0.35);
}

html[data-product="portal"] .hero-tag-anim.step-old,
html[data-product="portal"] .hero-tag-anim.step-strike {
  background: rgba(32, 12, 12, 0.35);
  border-color: rgba(255, 116, 116, 0.4);
  box-shadow:
    0 0 0 1px rgba(255, 116, 116, 0),
    0 0 14px rgba(255, 59, 59, 0);
}

html[data-product="portal"] .hero-tag-anim.step-morph .badge-reel > span:last-child,
html[data-product="portal"] .hero-tag-anim.step-new .badge-reel > span:last-child {
  color: #9cffbe;
  text-shadow: 0 0 12px rgba(79, 255, 146, 0.34);
}

html[data-product="portal"] .hero-tag-anim.step-morph {
  background: rgba(20, 30, 22, 0.34);
  border-color: rgba(117, 255, 163, 0.4);
  box-shadow:
    0 0 0 1px rgba(120, 255, 176, 0.08),
    0 0 10px rgba(87, 255, 157, 0.12);
}

html[data-product="portal"] .hero-tag-anim.step-new {
  background: rgba(14, 40, 25, 0.4);
  border-color: rgba(120, 255, 176, 0.48);
  box-shadow:
    0 0 0 1px rgba(120, 255, 176, 0.18),
    0 0 16px rgba(87, 255, 157, 0.24);
}

html[data-product="portal"] .hero-title {
  margin: 0.85rem 0 0;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 9.6vw, 6.2rem);
  line-height: 0.95;
  position: relative;
}

/* Логотип раньше висел absolute с `top: clamp(4.5rem, 9vh, 6.5rem)` — то есть на
   фиксированном отступе от верха. Нижний блок (онлайн + кнопки) при этом прижат к низу,
   так что весь запас высоты копился между ними: чем выше окно, тем сильнее логотип
   выглядел прижатым к шапке. На 2K и на мобильных это било в глаза.
   Теперь он обычный flex-ребёнок и забирает всю свободную высоту между шапкой и нижним
   блоком, центрируясь внутри неё, — при любой высоте окна сам собой оказывается посередине. */
html[data-product="portal"] .hero-logo-title {
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  line-height: 1;
}

html[data-product="portal"] .hero-logo {
  display: block;
  width: clamp(36rem, 68vw, 65rem);
  max-width: none;
  /* Логотип позиционируется абсолютно и раньше мерился только по ширине —
     на невысоких окнах (1280x720, 1366x768, любое непол­ноэкранное) он
     наезжал на «Онлайн сейчас» и кнопки, прижатые к низу героя.
     Ограничение по высоте на больших экранах не срабатывает вовсе. */
  max-height: min(calc(100svh - 15rem), 44rem);
  height: auto;
  object-fit: contain;
}

/* Выше FullHD обе верхние границы упираются в потолок: ширина замирает на 65rem,
   высота на 44rem. На 2560x1440 логотип из-за этого занимает 40% ширины экрана против
   54% на 1080p — и читается как задранный вверх, хотя по центру свободной полосы стоит
   ровно. Поднимаем потолок так, чтобы на 1920 не поменялось ничего (50vw там — 960px,
   это меньше нижней границы clamp в 65rem), а дальше логотип рос вместе с окном. */
@media (min-width: 1920px) {
  html[data-product="portal"] .hero-logo {
    width: clamp(65rem, 50vw, 88rem);
    max-height: min(calc(100svh - 15rem), 58rem);
  }
}

html[data-product="portal"] .title-desktop,
html[data-product="portal"] .title-mobile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

html[data-product="portal"] .title-mobile {
  display: none;
}

html[data-product="portal"] .title-top {
  font-size: 1.48em;
  line-height: 0.78;
}

html[data-product="portal"] .title-bottom {
  font-size: 1em;
  line-height: 0.9;
  margin-top: 0.08em;
}

html[data-product="portal"] .title-desktop > .title-top {
  transform: scaleX(1.06);
  transform-origin: center bottom;
}

html[data-product="portal"] .desktop-bottom-block {
  margin-top: 0.08em;
}

html[data-product="portal"] .embossed-title {
  letter-spacing: clamp(-0.05em, -0.18vw, -0.02em);
}

html[data-product="portal"] .title-line {
  position: relative;
  display: inline-block;
}

html[data-product="portal"] .title-back,
html[data-product="portal"] .title-front {
  display: block;
}

html[data-product="portal"] .title-back {
  position: absolute;
  inset: 0;
  color: rgba(79, 187, 255, 0.4);
  text-shadow:
    0 0 10px rgba(52, 183, 255, 0.24),
    0 0 18px rgba(52, 183, 255, 0.14);
  filter: blur(1.25px);
  transform: translate(0.012em, 0.017em);
  opacity: 0.88;
}

html[data-product="portal"] .title-front {
  position: relative;
  z-index: 1;
  color: #eef3f8;
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f7f9fb 22%,
    #d4d8de 54%,
    #a5adb6 76%,
    #7f8994 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.68px rgba(111, 208, 255, 0.92);
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.86),
    0 0 6px rgba(78, 194, 255, 0.34),
    0 0 14px rgba(34, 162, 235, 0.18);
}

html[data-product="portal"] .hero-subtitle {
  margin: 0.8rem auto 0;
  max-width: 44rem;
  position: relative;
  z-index: 2;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(0.92rem, 2.2vw, 1.08rem);
}

html[data-product="portal"] .timer-grid {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  width: min(100%, 20rem);
  max-width: 22rem;
  margin-inline: auto;
  position: relative;
  z-index: 2;
}

html[data-product="portal"] .timer-card {
  display: grid;
  place-content: center;
  min-height: 3.75rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  padding: 0.42rem 0.5rem;
}

html[data-product="portal"] .timer-value {
  margin: 0;
  font-size: clamp(1.3rem, 3.8vw, 1.9rem);
  font-weight: 800;
}

html[data-product="portal"] .timer-label {
  margin: 0.14rem 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

html[data-product="portal"] .hero-cta {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  position: relative;
  z-index: 2;
}

html[data-product="portal"] .cta-primary,
html[data-product="portal"] .cta-secondary {
  height: 3rem;
  border-radius: var(--radius-main);
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease;
}

html[data-product="portal"] .cta-primary {
  border-color: rgba(111, 196, 255, 0.62);
  background: linear-gradient(180deg, #85d2ff 0%, #298fe2 100%);
  color: #051522;
  box-shadow: 0 0 24px rgba(47, 168, 255, 0.42);
}

html[data-product="portal"] .cta-secondary {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.07);
  color: #f3ecdf;
  box-shadow: inset 0 -8px 22px rgba(12, 18, 28, 0.4);
}

html[data-product="portal"] .cta-primary::before,
html[data-product="portal"] .cta-secondary::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 18%,
    rgba(255, 255, 255, 0.72) 47%,
    transparent 76%
  );
  transform: translateX(-125%);
  opacity: 0;
  z-index: -1;
}

html[data-product="portal"] .cta-primary::after,
html[data-product="portal"] .cta-secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, rgba(47, 168, 255, 0.24), transparent 72%);
  opacity: 0;
  z-index: -1;
}

html[data-product="portal"] .cta-primary:hover,
html[data-product="portal"] .cta-secondary:hover {
  transform: translateY(-2px) scale(1.01);
}

html[data-product="portal"] .cta-primary:hover::before,
html[data-product="portal"] .cta-secondary:hover::before {
  opacity: 0.95;
  animation: portal-cta-sweep 780ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

html[data-product="portal"] .cta-primary:hover::after,
html[data-product="portal"] .cta-secondary:hover::after {
  opacity: 1;
}

html[data-product="portal"] .cta-primary:hover {
  box-shadow:
    0 0 0 1px rgba(163, 217, 255, 0.4),
    0 0 30px rgba(47, 168, 255, 0.58),
    0 10px 24px rgba(0, 0, 0, 0.34);
}

html[data-product="portal"] .cta-secondary:hover {
  border-color: rgba(130, 195, 255, 0.62);
  box-shadow:
    0 0 0 1px rgba(130, 195, 255, 0.25),
    0 0 20px rgba(47, 168, 255, 0.32),
    inset 0 -8px 22px rgba(12, 18, 28, 0.42);
}

@keyframes portal-cta-sweep {
  0% {
    transform: translateX(-125%);
  }
  100% {
    transform: translateX(125%);
  }
}

html[data-product="portal"] .section-title {
  margin: 0;
  font-size: clamp(1.35rem, 4.5vw, 2.45rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

html[data-product="portal"] .section-title.small {
  font-size: clamp(1.2rem, 4vw, 1.9rem);
}

html[data-product="portal"] .kicker {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

html[data-product="portal"] .big-number {
  margin: 0.25rem 0 0;
  font-size: clamp(2rem, 9vw, 4.6rem);
  color: var(--accent);
  line-height: 1;
  font-weight: 800;
}

html[data-product="portal"] .money {
  margin-top: 0.8rem;
}

html[data-product="portal"] .support-merge {
  display: grid;
  column-gap: clamp(1.25rem, 2vw, 1.75rem);
  row-gap: clamp(1.25rem, 2vw, 1.75rem);
  align-items: stretch;
  min-width: 0;
}

html[data-product="portal"] .split-panel {
  position: relative;
  padding-top: 2.8rem;
  overflow: visible;
  min-width: 0;
}

html[data-product="portal"] .panel-ridge-title {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  padding: 0 1rem;
  transform: translate(-50%, -52%);
  font-family: var(--font-beaufort), "Leelawadee UI", Tahoma, "Segoe UI", sans-serif;
  font-size: clamp(1.55rem, 3.2vw, 2.6rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #eef3f8;
  white-space: nowrap;
  text-align: center;
  font-weight: 800;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.82),
    0 0 7px rgba(78, 194, 255, 0.24),
    0 0 16px rgba(34, 162, 235, 0.12);
}

html[data-product="portal"] .prereg-block,
html[data-product="portal"] .support-block {
  text-align: center;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.85rem;
  padding-top: 0.55rem;
  min-width: 0;
}

html[data-product="portal"] .support-panel .panel-ridge-title {
  font-size: clamp(1.55rem, 3.2vw, 2.6rem);
}

html[data-product="portal"] .support-panel .support-block {
  min-height: 100%;
}

html[data-product="portal"] .prereg-block .big-number,
html[data-product="portal"] .support-block .big-number {
  margin-top: 0;
}

html[data-product="portal"] .prereg-block .kicker,
html[data-product="portal"] .support-block .kicker {
  margin: 0;
}

html[data-product="portal"] .prereg-block .email-form,
html[data-product="portal"] .support-block .email-form,
html[data-product="portal"] .prereg-block .muted-copy,
html[data-product="portal"] .support-block .muted-copy {
  margin-top: 0;
}

html[data-product="portal"] .prereg-block .email-form,
html[data-product="portal"] .support-block .email-form {
  width: min(100%, 34.5rem);
  max-width: 34.5rem;
}

html[data-product="portal"] .support-form {
  width: min(100%, 34.5rem);
}

html[data-product="portal"] .prereg-reward-copy {
  white-space: pre-line;
}

html[data-product="portal"] .participants-panel {
  grid-column: 1 / -1;
  min-height: 9.5rem;
  padding-top: 2.2rem;
  padding-bottom: 2.35rem;
}

html[data-product="portal"] .panel-ridge-title-bottom {
  top: auto;
  bottom: 0;
  transform: translate(-50%, 48%);
}

html[data-product="portal"] .participants-marquee {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--radius-main) - 0.05rem);
  background:
    linear-gradient(90deg, rgba(5, 8, 12, 0.96), rgba(8, 15, 22, 0.72) 16%, rgba(8, 15, 22, 0.72) 84%, rgba(5, 8, 12, 0.96)),
    rgba(0, 0, 0, 0.22);
  padding: 1rem 0;
}

html[data-product="portal"] .participants-marquee::before,
html[data-product="portal"] .participants-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(1.5rem, 5vw, 4rem);
  z-index: 1;
  pointer-events: none;
}

html[data-product="portal"] .participants-marquee::before {
  left: 0;
  background: linear-gradient(90deg, rgba(5, 8, 12, 1), rgba(5, 8, 12, 0));
}

html[data-product="portal"] .participants-marquee::after {
  right: 0;
  background: linear-gradient(270deg, rgba(5, 8, 12, 1), rgba(5, 8, 12, 0));
}

html[data-product="portal"] .participants-track {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: max-content;
  padding-inline: 0.9rem;
  animation: portal-participants-marquee 26s linear infinite;
}

html[data-product="portal"] .participant-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 9.5rem;
  padding: 0.78rem 1.05rem 0.72rem;
  border-radius: calc(var(--radius-main) - 0.02rem);
  border: 1px solid rgba(115, 201, 255, 0.24);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.24)),
    rgba(6, 12, 18, 0.84);
  color: #edf5fb;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 16px rgba(47, 168, 255, 0.08);
}

html[data-product="portal"] .email-form {
  margin: 1rem auto 0;
  display: grid;
  gap: 0.42rem;
  max-width: 34rem;
}

html[data-product="portal"] .field-stack {
  display: grid;
  gap: 0.42rem;
  align-content: start;
}

html[data-product="portal"] .prereg-panel .field-stack,
html[data-product="portal"] .support-form .field-stack {
  position: relative;
  padding-bottom: 0.72rem;
}

html[data-product="portal"] .prereg-panel .field-message,
html[data-product="portal"] .support-form .field-message {
  position: absolute;
  top: calc(100% - 0.44rem);
  left: 0;
}

html[data-product="portal"] .email-input {
  width: 100%;
  height: 2.95rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.32);
  color: var(--text);
  padding-inline: 1rem;
  outline: none;
  font-family: inherit;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

html[data-product="portal"] .email-input::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

html[data-product="portal"] .email-input:focus {
  border-color: var(--accent);
  background: rgba(2, 8, 14, 0.54);
  box-shadow:
    0 0 0 1px rgba(130, 195, 255, 0.22),
    0 0 20px rgba(47, 168, 255, 0.14);
}

html[data-product="portal"] .email-input.is-valid {
  border-color: rgba(93, 205, 134, 0.55);
  box-shadow:
    0 0 0 1px rgba(93, 205, 134, 0.16),
    0 0 18px rgba(56, 142, 80, 0.12);
}

html[data-product="portal"] .email-input.is-invalid {
  border-color: rgba(238, 108, 93, 0.72);
  background: rgba(22, 6, 8, 0.46);
  box-shadow:
    0 0 0 1px rgba(238, 108, 93, 0.16),
    0 0 18px rgba(191, 64, 48, 0.16);
}

html[data-product="portal"] .field-message {
  min-height: 1rem;
  color: rgba(230, 238, 245, 0.42);
  font-size: 0.72rem;
  line-height: 1.45;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(-0.15rem);
  transition: opacity 180ms ease, transform 180ms ease, color 180ms ease;
}

html[data-product="portal"] .field-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html[data-product="portal"] .field-message.is-error {
  color: rgba(255, 157, 147, 0.92);
}

html[data-product="portal"] .field-message.is-success {
  color: rgba(157, 230, 178, 0.9);
}

html[data-product="portal"] .cta-primary:disabled,
html[data-product="portal"] .cta-secondary:disabled {
  cursor: wait;
  opacity: 0.86;
  transform: none;
}

html[data-product="portal"] .cta-primary:disabled::before,
html[data-product="portal"] .cta-primary:disabled::after,
html[data-product="portal"] .cta-secondary:disabled::before,
html[data-product="portal"] .cta-secondary:disabled::after {
  display: none;
}

html[data-product="portal"] .cta-inline {
  padding-inline: 1.35rem;
}

html[data-product="portal"] .cta-inline.wide {
  min-width: min(100%, 16rem);
}

html[data-product="portal"] .muted-copy {
  margin: 0.9rem auto 0;
  max-width: 44rem;
  color: var(--muted);
  line-height: 1.55;
}

html[data-product="portal"] .muted-copy.center {
  text-align: center;
}

html[data-product="portal"] .support-panel .muted-copy {
  max-width: 24rem;
}

html[data-product="portal"] .new-world-panel {
  padding-top: 2.85rem;
  padding-bottom: 1.35rem;
  display: flex;
  flex-direction: column;
}

html[data-product="portal"] .compare-wrap {
  margin-top: 1rem;
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

html[data-product="portal"] .compare-label {
  position: absolute;
  top: 0.6rem;
  z-index: 2;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid rgba(95, 190, 255, 0.24);
  background: rgba(4, 10, 16, 0.72);
  color: rgba(232, 244, 255, 0.82);
  padding: 0.3rem 0.55rem;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-product="portal"] .compare-label.left {
  left: 0.6rem;
}

html[data-product="portal"] .compare-label.right {
  right: 0.6rem;
}

html[data-product="portal"] .compare-frame {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: clamp(18rem, 52svh, 44rem);
  overflow: hidden;
}

html[data-product="portal"] .compare-before,
html[data-product="portal"] .compare-after {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

html[data-product="portal"] .compare-after {
  inset: 0 0 0 auto;
}

html[data-product="portal"] .compare-divider {
  position: absolute;
  inset-block: 0;
  width: 2px;
  background: rgba(111, 208, 255, 0.9);
  transform: translateX(-1px);
  z-index: 3;
  box-shadow: 0 0 12px rgba(47, 168, 255, 0.28);
}

html[data-product="portal"] .compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
}

html[data-product="portal"] .compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  gap: 0.18rem;
  grid-auto-flow: column;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(95, 190, 255, 0.78);
  border-radius: var(--radius-main);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12)),
    rgba(7, 14, 20, 0.92);
  box-shadow:
    0 0 0 1px rgba(111, 208, 255, 0.14),
    0 0 18px rgba(47, 168, 255, 0.16);
}

html[data-product="portal"] .compare-handle > span {
  display: inline-block;
  color: rgba(111, 208, 255, 0.94);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 8px rgba(47, 168, 255, 0.3);
}

html[data-product="portal"] .compare-controls {
  margin-top: 0.95rem;
  display: grid;
  grid-template-columns: minmax(2.75rem, 1fr) auto minmax(2.75rem, 1fr);
  align-items: center;
  column-gap: 1rem;
  width: min(100%, 26rem);
  margin-inline: auto;
}

html[data-product="portal"] .compare-controls .compare-nav:first-child {
  justify-self: end;
}

html[data-product="portal"] .compare-controls .compare-nav:last-child {
  justify-self: start;
}

html[data-product="portal"] .compare-nav {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(95, 190, 255, 0.78);
  border-radius: var(--radius-main);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(111, 208, 255, 0.96);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(47, 168, 255, 0.08),
    0 0 16px rgba(47, 168, 255, 0.12);
  font-family: inherit;
  padding: 0;
  outline: none;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  transform-origin: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}

html[data-product="portal"] .compare-nav:active {
  transform: scale(0.97);
}

html[data-product="portal"] .compare-nav > span {
  pointer-events: none;
  display: block;
  line-height: 1;
  transform: translateY(-0.06em);
}

html[data-product="portal"] .compare-nav:hover,
html[data-product="portal"] .compare-nav:focus-visible {
  background: rgba(47, 168, 255, 0.12);
  box-shadow:
    0 0 0 1px rgba(47, 168, 255, 0.14),
    0 0 20px rgba(47, 168, 255, 0.2);
}

html[data-product="portal"] .compare-pairs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

html[data-product="portal"] .compare-pair-dot {
  cursor: pointer;
}

html[data-product="portal"] .compare-pair-dot::after {
  content: "";
  display: block;
  width: 0.78rem;
  height: 0.78rem;
  border: 1px solid rgba(95, 190, 255, 0.26);
  border-radius: 0.22rem;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-product="portal"] .compare-pair-dot.is-active::after {
  border-color: rgba(95, 190, 255, 0.78);
  background: rgba(111, 208, 255, 0.92);
  box-shadow:
    0 0 0 1px rgba(47, 168, 255, 0.1),
    0 0 12px rgba(47, 168, 255, 0.24);
}

html[data-product="portal"] .roadmap-panel {
  padding-top: 2.85rem;
  padding-bottom: 1.35rem;
}

html[data-product="portal"] .classes-panel {
  padding-top: 2.85rem;
  padding-bottom: 1.35rem;
}

html[data-product="portal"] .classes-layout {
  display: grid;
  gap: 1rem;
  align-items: stretch;
}

html[data-product="portal"] .classes-stage {
  min-width: 0;
  position: relative;
  z-index: 1;
}

html[data-product="portal"] .classes-controls {
  margin-top: 0.95rem;
  display: grid;
  grid-template-columns: minmax(2.75rem, 1fr) auto minmax(2.75rem, 1fr);
  align-items: center;
  column-gap: 1rem;
  width: min(100%, 26rem);
  margin-inline: auto;
}

html[data-product="portal"] .classes-controls .class-nav:first-child {
  justify-self: end;
}

html[data-product="portal"] .classes-controls .class-nav:last-child {
  justify-self: start;
}

html[data-product="portal"] .class-nav {
  --button-sheen: rgba(255, 255, 255, 0.72);
  --button-glow: color-mix(in srgb, var(--class-glow) 30%, transparent);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--class-accent) 72%, rgba(255, 255, 255, 0.2));
  border-radius: var(--radius-main);
  background: color-mix(in srgb, var(--class-accent) 10%, rgba(255, 255, 255, 0.04));
  color: color-mix(in srgb, var(--class-accent) 82%, #f3f7fb);
  font-size: 1.65rem;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--class-accent) 10%, transparent),
    0 0 16px color-mix(in srgb, var(--class-glow) 24%, transparent);
  font-family: inherit;
  padding: 0;
  outline: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  transform-origin: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}

html[data-product="portal"] .class-nav::before,
html[data-product="portal"] .class-profession-tab::before,
html[data-product="portal"] .content-tab::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 18%,
    color-mix(in srgb, var(--button-sheen, rgba(255, 255, 255, 0.72)) 100%, transparent) 47%,
    transparent 76%
  );
  transform: translateX(-125%);
  opacity: 0;
  z-index: -1;
}

html[data-product="portal"] .class-nav::after,
html[data-product="portal"] .class-profession-tab::after,
html[data-product="portal"] .content-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, var(--button-glow, rgba(255, 255, 255, 0.2)), transparent 72%);
  opacity: 0;
  z-index: -1;
}

html[data-product="portal"] .class-nav:active {
  transform: scale(0.97);
}

html[data-product="portal"] .class-nav > span {
  pointer-events: none;
  display: block;
  line-height: 1;
  transform: translateY(-0.06em);
}

html[data-product="portal"] .class-nav:hover,
html[data-product="portal"] .class-nav:focus-visible {
  background: color-mix(in srgb, var(--class-accent) 16%, rgba(255, 255, 255, 0.04));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--class-accent) 18%, transparent),
    0 0 20px color-mix(in srgb, var(--class-glow) 36%, transparent);
}

html[data-product="portal"] .class-nav:hover::before,
html[data-product="portal"] .class-nav:focus-visible::before,
html[data-product="portal"] .class-profession-tab:hover::before,
html[data-product="portal"] .class-profession-tab:focus-visible::before,
html[data-product="portal"] .content-tab:hover::before,
html[data-product="portal"] .content-tab:focus-visible::before {
  opacity: 0.95;
  animation: portal-cta-sweep 780ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

html[data-product="portal"] .class-nav:hover::after,
html[data-product="portal"] .class-nav:focus-visible::after,
html[data-product="portal"] .class-profession-tab:hover::after,
html[data-product="portal"] .class-profession-tab:focus-visible::after,
html[data-product="portal"] .content-tab:hover::after,
html[data-product="portal"] .content-tab:focus-visible::after {
  opacity: 1;
}

html[data-product="portal"] .class-pairs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

html[data-product="portal"] .class-pair-dot {
  cursor: pointer;
  transition: transform 180ms ease;
}

html[data-product="portal"] .class-pair-dot::after {
  content: "";
  display: block;
  width: 0.78rem;
  height: 0.78rem;
  border: 1px solid color-mix(in srgb, var(--class-accent) 30%, rgba(255, 255, 255, 0.14));
  border-radius: var(--radius-main);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
  transition: background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

html[data-product="portal"] .class-pair-dot:hover,
html[data-product="portal"] .class-pair-dot:focus-visible {
  transform: translateY(-1px);
}

html[data-product="portal"] .class-pair-dot:hover::after,
html[data-product="portal"] .class-pair-dot:focus-visible::after {
  border-color: color-mix(in srgb, var(--class-accent) 52%, rgba(255, 255, 255, 0.18));
  background: color-mix(in srgb, var(--class-accent) 18%, rgba(255, 255, 255, 0.06));
}

html[data-product="portal"] .class-pair-dot.is-active::after {
  border-color: color-mix(in srgb, var(--class-accent) 68%, rgba(255, 255, 255, 0.22));
  background: color-mix(in srgb, var(--class-accent) 58%, rgba(255, 255, 255, 0.2));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--class-accent) 18%, transparent),
    0 0 18px color-mix(in srgb, var(--class-glow) 34%, transparent);
}

html[data-product="portal"] .classes-stack {
  position: relative;
  min-height: clamp(33rem, 72vh, 46rem);
  border-radius: calc(var(--radius-main) + 0.2rem);
  overflow: visible;
  background: none;
}

html[data-product="portal"] .classes-stack::before {
  content: none;
}

html[data-product="portal"] .classes-stack-touch {
  position: relative;
  min-height: inherit;
  touch-action: pan-y;
}

html[data-product="portal"] .class-card {
  --card-x: calc(var(--class-offset) * 9.5%);
  --card-rotate: calc(var(--class-offset) * 3.5deg);
  position: absolute;
  inset: 0.2rem auto 0.2rem 50%;
  width: min(22rem, calc(100% - 0.5rem));
  transform:
    translateX(calc(-50% + var(--card-x)))
    translateY(calc(var(--class-depth) * 0.28rem))
    rotate(var(--card-rotate))
    scale(calc(1 - var(--class-depth) * 0.045));
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 260ms ease,
    opacity 260ms ease;
  filter: saturate(calc(1 - var(--class-depth) * 0.12));
  opacity: calc(1 - var(--class-depth) * 0.08);
}

html[data-product="portal"] .class-card:hover,
html[data-product="portal"] .class-card:focus-visible {
  filter: none;
}

html[data-product="portal"] .class-card.is-active {
  --card-x: 0%;
  --card-rotate: 0deg;
  opacity: 1;
  filter: none;
}

html[data-product="portal"] .class-card-frame {
  position: relative;
  display: grid;
  align-content: end;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: calc(var(--radius-main) + 0.1rem);
  border: 1px solid color-mix(in srgb, var(--class-accent) 48%, rgba(255, 255, 255, 0.12));
  padding: 1rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.64)),
    rgba(8, 11, 16, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px color-mix(in srgb, var(--class-accent) 12%, transparent),
    0 28px 40px var(--class-shadow),
    0 0 26px var(--class-glow);
}

html[data-product="portal"] .class-card-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--class-portrait);
  pointer-events: none;
}

html[data-product="portal"] .class-card-frame::after {
  content: "";
  position: absolute;
  inset: auto 12% 20% 12%;
  height: 44%;
  border-radius: 50% 50% 18% 18% / 26% 26% 14% 14%;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.14), transparent 18%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(1, 2, 4, 0.78));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 34px rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
}

html[data-product="portal"] .class-card-badge {
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 2;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--class-accent) 42%, rgba(255, 255, 255, 0.14));
  background: rgba(4, 8, 12, 0.7);
  color: color-mix(in srgb, var(--class-accent) 72%, #ffffff);
  padding: 0.26rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

html[data-product="portal"] .class-card-copy {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 0.32rem;
  text-align: left;
}

html[data-product="portal"] .class-card-name {
  font-size: clamp(1.2rem, 1.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6),
    0 8px 24px rgba(0, 0, 0, 0.34);
}

html[data-product="portal"] .class-card-role {
  color: rgba(239, 245, 250, 0.72);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.58),
    0 6px 20px rgba(0, 0, 0, 0.28);
}

html[data-product="portal"] .class-detail {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--class-accent) 32%, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-main);
  background:
    radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--class-accent) 14%, transparent), transparent 28%),
    linear-gradient(155deg, color-mix(in srgb, var(--class-accent) 10%, transparent), rgba(0, 0, 0, 0.18) 45%),
    rgba(8, 12, 18, 0.86);
  padding: clamp(1rem, 2vw, 1.35rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 24px color-mix(in srgb, var(--class-glow) 58%, transparent),
    0 0 0 1px color-mix(in srgb, var(--class-accent) 8%, transparent);
}

html[data-product="portal"] .class-detail-kicker {
  margin: 0;
  color: color-mix(in srgb, var(--class-accent) 78%, #eef6ff);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

html[data-product="portal"] .class-detail-title {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 3rem);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[data-product="portal"] .class-profession-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

html[data-product="portal"] .class-profession-tab {
  --button-sheen: rgba(255, 255, 255, 0.72);
  --button-glow: color-mix(in srgb, var(--class-glow) 28%, transparent);
  border: 1px solid color-mix(in srgb, var(--class-accent) 20%, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-main);
  background: color-mix(in srgb, var(--class-accent) 7%, rgba(255, 255, 255, 0.02));
  color: rgba(240, 244, 248, 0.72);
  padding: 0.5rem 0.8rem;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

html[data-product="portal"] .class-profession-tab:hover,
html[data-product="portal"] .class-profession-tab:focus-visible {
  color: #f5f8fb;
  border-color: color-mix(in srgb, var(--class-accent) 36%, rgba(255, 255, 255, 0.1));
  transform: translateY(-1px);
}

html[data-product="portal"] .class-profession-tab.is-active {
  color: color-mix(in srgb, var(--class-accent) 52%, #f7fbff);
  border-color: color-mix(in srgb, var(--class-accent) 40%, rgba(255, 255, 255, 0.12));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--class-accent) 14%, rgba(255, 255, 255, 0.04)), rgba(0, 0, 0, 0.08)),
    rgba(8, 12, 18, 0.82);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--class-accent) 10%, transparent),
    0 0 18px color-mix(in srgb, var(--class-glow) 24%, transparent);
}

html[data-product="portal"] .class-detail-subtitle {
  margin: 0;
  color: color-mix(in srgb, var(--class-accent) 42%, #f5ead4);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.45;
}

html[data-product="portal"] .class-detail-copy {
  margin: 0;
  color: rgba(244, 240, 229, 0.78);
  font-size: 0.98rem;
  line-height: 1.7;
  min-height: 6.8em;
}

html[data-product="portal"] .class-profession-panel {
  display: grid;
  gap: 0.55rem;
  border: 1px solid color-mix(in srgb, var(--class-accent) 16%, rgba(255, 255, 255, 0.08));
  border-radius: calc(var(--radius-main) - 0.02rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--class-accent) 8%, rgba(255, 255, 255, 0.03)), rgba(0, 0, 0, 0.14)),
    rgba(7, 11, 16, 0.7);
  padding: 0.85rem 0.95rem;
  min-height: 12.6rem;
}

html[data-product="portal"] .class-profession-kicker {
  margin: 0;
  color: color-mix(in srgb, var(--class-accent) 58%, #eef6ff);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html[data-product="portal"] .class-profession-title {
  margin: 0;
  color: #f3f7fb;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-product="portal"] .class-profession-copy {
  margin: 0;
  color: rgba(244, 240, 229, 0.74);
  font-size: 0.9rem;
  line-height: 1.65;
  min-height: 6.6em;
}

html[data-product="portal"] .class-profession-focus {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

html[data-product="portal"] .class-profession-chip {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--class-accent) 18%, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--class-accent) 8%, rgba(255, 255, 255, 0.02));
  color: color-mix(in srgb, var(--class-accent) 34%, #edf6ff);
  padding: 0.34rem 0.58rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-product="portal"] .class-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.7rem;
}

html[data-product="portal"] .class-stat-card {
  display: grid;
  gap: 0.2rem;
  border: 1px solid color-mix(in srgb, var(--class-accent) 16%, rgba(255, 255, 255, 0.08));
  border-radius: calc(var(--radius-main) - 0.02rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--class-accent) 7%, rgba(255, 255, 255, 0.04)), rgba(0, 0, 0, 0.16)),
    rgba(7, 11, 16, 0.76);
  padding: 0.72rem 0.8rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

html[data-product="portal"] .class-stat-label {
  color: rgba(244, 240, 229, 0.54);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[data-product="portal"] .class-stat-value {
  color: color-mix(in srgb, var(--class-accent) 34%, #eff5fb);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-product="portal"] .content-panel {
  padding-top: 2.85rem;
  padding-bottom: 1.35rem;
}

html[data-product="portal"] .content-layout {
  display: grid;
  gap: 1rem;
}

html[data-product="portal"] .content-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

html[data-product="portal"] .content-tab {
  --button-sheen: rgba(255, 255, 255, 0.72);
  --button-glow: color-mix(in srgb, var(--content-glow) 30%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-main);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(239, 245, 250, 0.72);
  padding: 0.55rem 0.92rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

html[data-product="portal"] .content-tab:hover,
html[data-product="portal"] .content-tab:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  color: #f2f7fb;
}

html[data-product="portal"] .content-tab.is-active {
  border-color: color-mix(in srgb, var(--content-accent) 60%, rgba(255, 255, 255, 0.16));
  color: color-mix(in srgb, var(--content-accent) 44%, #f7fbff);
  background: color-mix(in srgb, var(--content-accent) 10%, rgba(255, 255, 255, 0.04));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--content-accent) 12%, transparent),
    0 0 18px color-mix(in srgb, var(--content-glow) 28%, transparent);
}

html[data-product="portal"] .content-scene {
  position: relative;
  overflow: hidden;
  min-height: clamp(28rem, 64vh, 37rem);
  border-radius: var(--radius-main);
  border: 1px solid color-mix(in srgb, var(--content-accent) 22%, rgba(255, 255, 255, 0.12));
  background:
    var(--content-haze),
    var(--content-surface),
    rgba(7, 11, 16, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px color-mix(in srgb, var(--content-accent) 8%, transparent),
    0 0 28px color-mix(in srgb, var(--content-glow) 26%, transparent);
}

html[data-product="portal"] .content-scene-layers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

html[data-product="portal"] .content-layer {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

html[data-product="portal"] .content-layer-a {
  inset: -8% auto auto -6%;
  width: 42%;
  height: 78%;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--content-accent) 24%, transparent), transparent 60%);
  filter: blur(6px);
  animation: portal-contentFloatA 14s ease-in-out infinite;
}

html[data-product="portal"] .content-layer-b {
  inset: auto -8% 4% auto;
  width: 44%;
  height: 74%;
  background:
    radial-gradient(circle at 68% 54%, color-mix(in srgb, var(--content-accent) 18%, transparent), transparent 62%);
  filter: blur(10px);
  animation: portal-contentFloatB 17s ease-in-out infinite;
}

html[data-product="portal"] .content-layer-c {
  top: -8%;
  bottom: -8%;
  left: calc(var(--content-progress) * 100% - 18%);
  width: 36%;
  background:
    linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--content-accent) 14%, transparent) 46%, transparent 100%);
  opacity: 0.72;
  filter: blur(12px);
  transform: skewX(-18deg);
}

html[data-product="portal"] .content-layer-d {
  inset: auto 8% 12% auto;
  width: 28%;
  height: 34%;
  border-radius: var(--radius-main);
  border: 1px solid color-mix(in srgb, var(--content-accent) 14%, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--content-accent) 10%, rgba(255, 255, 255, 0.03)), transparent 62%),
    rgba(255, 255, 255, 0.015);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 26px color-mix(in srgb, var(--content-glow) 22%, transparent);
  transform: rotate(-8deg);
  opacity: 0.72;
}

html[data-product="portal"] .content-scene-grid {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(18rem, 0.88fr);
  gap: 1.2rem;
  align-items: end;
  padding: clamp(1.2rem, 2.4vw, 1.8rem);
}

html[data-product="portal"] .content-copy {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  max-width: 34rem;
}

html[data-product="portal"] .content-eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--content-accent) 72%, #f1f7ff);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

html[data-product="portal"] .content-title {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4.3rem);
  line-height: 0.88;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow:
    0 0 22px color-mix(in srgb, var(--content-glow) 22%, transparent),
    0 12px 26px rgba(0, 0, 0, 0.22);
}

html[data-product="portal"] .content-subtitle {
  margin: 0;
  color: color-mix(in srgb, var(--content-accent) 28%, #f4ead9);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.55;
  max-width: 34rem;
}

html[data-product="portal"] .content-bullets {
  display: grid;
  gap: 0.58rem;
  margin-top: 0.25rem;
}

html[data-product="portal"] .content-bullet {
  margin: 0;
  max-width: 30rem;
  color: rgba(241, 238, 230, 0.8);
  font-size: 0.98rem;
  line-height: 1.6;
  padding-left: 1rem;
  position: relative;
}

html[data-product="portal"] .content-bullet::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--content-accent) 72%, #ffffff);
  box-shadow: 0 0 12px color-mix(in srgb, var(--content-glow) 36%, transparent);
}

html[data-product="portal"] .content-side {
  justify-self: end;
  width: min(100%, 22rem);
  display: grid;
  gap: 0.85rem;
  align-content: end;
}

html[data-product="portal"] .content-fact-card {
  display: grid;
  gap: 0.4rem;
  padding: 1rem 1.05rem;
  border-radius: calc(var(--radius-main) - 0.02rem);
  border: 1px solid color-mix(in srgb, var(--content-accent) 18%, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--content-accent) 9%, rgba(255, 255, 255, 0.03)), rgba(0, 0, 0, 0.18)),
    rgba(7, 11, 16, 0.74);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 24px color-mix(in srgb, var(--content-glow) 20%, transparent);
}

html[data-product="portal"] .content-fact-label {
  color: rgba(244, 240, 229, 0.56);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html[data-product="portal"] .content-fact-value {
  color: color-mix(in srgb, var(--content-accent) 28%, #f8fbff);
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

html[data-product="portal"] .content-highlight-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

html[data-product="portal"] .content-highlight-chip {
  border-radius: var(--radius-main);
  border: 1px solid color-mix(in srgb, var(--content-accent) 18%, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--content-accent) 9%, rgba(255, 255, 255, 0.03));
  color: color-mix(in srgb, var(--content-accent) 34%, #eef7ff);
  padding: 0.44rem 0.72rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 0 16px color-mix(in srgb, var(--content-glow) 16%, transparent);
}

html[data-product="portal"] .class-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

html[data-product="portal"] .class-trait-chip {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--class-accent) 22%, rgba(255, 255, 255, 0.08));
  background: color-mix(in srgb, var(--class-accent) 10%, rgba(255, 255, 255, 0.02));
  color: color-mix(in srgb, var(--class-accent) 38%, #eef6ff);
  padding: 0.42rem 0.72rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 0 14px color-mix(in srgb, var(--class-glow) 28%, transparent);
}

html[data-product="portal"] .roadmap-layout {
  display: grid;
  gap: 0.9rem;
}

@keyframes portal-contentFloatA {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(1.8%, 2.2%, 0) scale(1.05);
  }
}

@keyframes portal-contentFloatB {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-2.2%, -1.5%, 0) scale(1.04);
  }
}

html[data-product="portal"] .roadmap-steps {
  display: grid;
  gap: 0.72rem;
}

html[data-product="portal"] .roadmap-step-card {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-main);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.18)),
    rgba(7, 11, 16, 0.76);
  padding: 0.9rem 1rem;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

html[data-product="portal"] .roadmap-step-card:hover,
html[data-product="portal"] .roadmap-step-card:focus-visible {
  border-color: rgba(95, 190, 255, 0.4);
  box-shadow:
    0 0 0 1px rgba(47, 168, 255, 0.12),
    0 0 16px rgba(47, 168, 255, 0.12);
  transform: translateY(-1px);
}

html[data-product="portal"] .roadmap-step-card.is-active {
  border-color: rgba(95, 190, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(47, 168, 255, 0.11), rgba(0, 0, 0, 0.18)),
    rgba(7, 11, 16, 0.86);
  box-shadow:
    0 0 0 1px rgba(47, 168, 255, 0.18),
    0 0 20px rgba(47, 168, 255, 0.16);
}

html[data-product="portal"] .road-step-index {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: calc(var(--radius-main) - 0.06rem);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(238, 243, 248, 0.76);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
}

html[data-product="portal"] .road-step-index.is-done {
  border-color: rgba(95, 190, 255, 0.72);
  background: rgba(47, 168, 255, 0.14);
  color: #9fdcff;
}

html[data-product="portal"] .road-step-copy {
  display: grid;
  gap: 0.26rem;
  min-width: 0;
}

html[data-product="portal"] .road-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html[data-product="portal"] .road-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

html[data-product="portal"] .roadmap-detail {
  min-height: 100%;
  display: grid;
  align-content: start;
  gap: 0.7rem;
  border: 1px solid rgba(95, 190, 255, 0.16);
  border-radius: var(--radius-main);
  background:
    linear-gradient(155deg, rgba(47, 168, 255, 0.1), rgba(0, 0, 0, 0.24) 45%),
    rgba(7, 11, 16, 0.84);
  padding: clamp(1rem, 2vw, 1.35rem);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 24px rgba(47, 168, 255, 0.08);
}

html[data-product="portal"] .roadmap-detail-kicker {
  margin: 0;
  color: rgba(111, 208, 255, 0.86);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

html[data-product="portal"] .roadmap-detail-kicker.is-done,
html[data-product="portal"] .roadmap-detail-kicker.is-next {
  color: rgba(111, 208, 255, 0.86);
}

html[data-product="portal"] .roadmap-detail-kicker.is-progress {
  color: #f0c768;
  text-shadow: 0 0 10px rgba(240, 199, 104, 0.18);
}

html[data-product="portal"] .roadmap-detail-title {
  margin: 0;
  font-size: clamp(1.2rem, 2vw, 2rem);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[data-product="portal"] .roadmap-detail-copy {
  margin: 0;
  max-width: 34rem;
  color: rgba(244, 240, 229, 0.78);
  font-size: clamp(0.96rem, 1.35vw, 1.06rem);
  line-height: 1.6;
}

html[data-product="portal"] .media-panel {
  padding-top: 2.85rem;
  padding-bottom: 0.9rem;
}

html[data-product="portal"] .media-stage {
  --media-accent: #83c8ff;
  --media-glow: rgba(83, 182, 255, 0.34);
  overflow: visible;
  background:
    radial-gradient(circle at 12% 16%, color-mix(in srgb, var(--media-accent) 18%, transparent), transparent 24%),
    radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--media-accent) 14%, transparent), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.16)),
    rgba(7, 11, 16, 0.84);
}

html[data-product="portal"] .media-ridge-nav {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 1rem;
  width: min(100% - 2rem, 64rem);
  padding: 0 1rem;
  transform: translate(-50%, -52%);
}

html[data-product="portal"] .media-ridge-word {
  border: 0;
  background: transparent;
  padding: 0;
  color: rgba(220, 228, 236, 0.34);
  font-family: var(--font-beaufort), "Leelawadee UI", Tahoma, "Segoe UI", sans-serif;
  font-size: clamp(1.05rem, 2vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 220ms ease,
    text-shadow 220ms ease;
}

html[data-product="portal"] .media-ridge-word:hover,
html[data-product="portal"] .media-ridge-word:focus-visible {
  color: rgba(232, 238, 244, 0.56);
}

html[data-product="portal"] .media-ridge-word.is-active {
  color: #eef3f8;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.82),
    0 0 7px color-mix(in srgb, var(--media-glow) 70%, rgba(78, 194, 255, 0.24)),
    0 0 16px color-mix(in srgb, var(--media-glow) 38%, rgba(34, 162, 235, 0.12));
}

html[data-product="portal"] .media-stage-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  gap: 0.85rem;
  min-height: 0;
}

html[data-product="portal"] .media-hero-card {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

html[data-product="portal"] .media-feature-list {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  min-height: 0;
}

html[data-product="portal"] .media-side-list {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(7.8rem, auto);
  grid-auto-flow: dense;
  gap: 0.85rem;
  min-height: 0;
}

html[data-product="portal"] .media-layout-1 .media-side-1-1 {
  grid-column: span 1;
  grid-row: span 2;
}

html[data-product="portal"] .media-layout-2 .media-hero-card {
  min-height: clamp(18.8rem, 36vh, 23rem);
}

html[data-product="portal"] .media-layout-2 .media-feature-list {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

html[data-product="portal"] .media-layout-2 .media-side-list:empty {
  display: none;
}

html[data-product="portal"] .media-layout-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, clamp(6.7rem, 7.6vh, 7.5rem)));
}

html[data-product="portal"] .media-layout-3 .media-hero-card {
  grid-column: 2 / 3;
  grid-row: 1 / 4;
  min-height: auto;
}

html[data-product="portal"] .media-layout-3 .media-feature-list {
  grid-column: 3 / 4;
  grid-row: 1 / 4;
  grid-template-rows: 2fr 1fr;
}

html[data-product="portal"] .media-layout-3 .media-side-list {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 2fr;
  grid-auto-rows: auto;
}

html[data-product="portal"] .media-layout-3 .media-side-card {
  min-height: 0;
}

html[data-product="portal"] .media-layout-4 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, clamp(7.8rem, 8.6vh, 8.7rem)));
}

html[data-product="portal"] .media-layout-4 .media-hero-card {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  min-height: auto;
}

html[data-product="portal"] .media-layout-4 .media-feature-list {
  grid-column: 2 / 4;
  grid-row: 1 / 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 0.85rem;
}

html[data-product="portal"] .media-layout-4 .media-side-list {
  grid-column: 1 / 2;
  grid-row: 1 / 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 0.85rem;
}

html[data-product="portal"] .media-layout-4 .media-side-4-1 {
  grid-column: auto;
  grid-row: auto;
}

html[data-product="portal"] .media-layout-4 .media-feature-4-1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

html[data-product="portal"] .media-layout-4 .media-feature-4-2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

html[data-product="portal"] .media-layout-4 .media-side-4-2 {
  grid-column: auto;
  grid-row: auto;
}

html[data-product="portal"] .media-layout-4 .media-side-4-3 {
  grid-column: auto;
  grid-row: auto;
}

html[data-product="portal"] .media-layout-4 .media-feature-card,
html[data-product="portal"] .media-layout-4 .media-side-card {
  min-height: 0;
  height: 100%;
}

html[data-product="portal"] .media-hero-card {
  position: relative;
  min-height: 0;
  width: 100%;
  min-height: clamp(15.2rem, 29vh, 18.5rem);
  justify-self: stretch;
  border: 1px solid color-mix(in srgb, var(--media-accent) 24%, rgba(255, 255, 255, 0.1));
  border-radius: var(--radius-main);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(0.95rem, 2vw, 1.2rem);
  background:
    radial-gradient(circle at 84% 16%, color-mix(in srgb, var(--media-accent) 16%, transparent), transparent 18%),
    rgba(7, 11, 16, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px color-mix(in srgb, var(--media-accent) 9%, transparent),
    0 0 28px color-mix(in srgb, var(--media-glow) 24%, transparent);
}

html[data-product="portal"] .media-hero-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: calc(var(--radius-main) - 0.08rem);
  background: var(--media-hero-image) center top / cover no-repeat;
  pointer-events: none;
}

html[data-product="portal"] .media-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(6, 10, 14, 0.18) 0%, rgba(6, 10, 14, 0.38) 42%, rgba(4, 8, 12, 0.88) 100%);
  pointer-events: none;
}

html[data-product="portal"] .media-hero-copy,
html[data-product="portal"] .media-hero-meta {
  position: relative;
  z-index: 2;
}

html[data-product="portal"] .media-hero-copy {
  display: grid;
  gap: 0.42rem;
  align-content: start;
  max-width: 21rem;
  width: min(100%, 21rem);
  padding: 0.85rem 0.95rem 1rem;
  border-radius: calc(var(--radius-main) - 0.04rem);
  background:
    linear-gradient(180deg, rgba(5, 10, 15, 0.56), rgba(5, 10, 15, 0.28)),
    rgba(5, 10, 15, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(6px);
  align-self: start;
}

html[data-product="portal"] .media-hero-kicker {
  margin: 0;
  color: color-mix(in srgb, var(--media-accent) 70%, #eef7ff);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

html[data-product="portal"] .media-hero-title {
  margin: 0;
  font-size: 1.56rem;
  line-height: 0.96;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[data-product="portal"] .media-hero-text {
  margin: 0;
  color: rgba(241, 237, 228, 0.78);
  font-size: 0.88rem;
  line-height: 1.42;
}

html[data-product="portal"] .media-hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.7rem;
  align-items: end;
  align-self: end;
}

html[data-product="portal"] .media-hero-chip,
html[data-product="portal"] .media-hero-action {
  border-radius: var(--radius-main);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800;
}

html[data-product="portal"] .media-hero-chip {
  border: 1px solid color-mix(in srgb, var(--media-accent) 24%, rgba(255, 255, 255, 0.1));
  background: rgba(5, 10, 15, 0.58);
  color: color-mix(in srgb, var(--media-accent) 44%, #eef7ff);
  padding: 0.48rem 0.74rem;
  font-size: 0.68rem;
}

html[data-product="portal"] .media-hero-action {
  border: 1px solid color-mix(in srgb, var(--media-accent) 34%, rgba(255, 255, 255, 0.1));
  background: color-mix(in srgb, var(--media-accent) 12%, rgba(255, 255, 255, 0.04));
  color: #f3f7fb;
  padding: 0.62rem 0.95rem;
  font-size: 0.7rem;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px color-mix(in srgb, var(--media-glow) 18%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

html[data-product="portal"] .media-hero-action:hover,
html[data-product="portal"] .media-hero-action:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 24px color-mix(in srgb, var(--media-glow) 26%, transparent);
}

html[data-product="portal"] .media-feature-card,
html[data-product="portal"] .media-side-card {
  position: relative;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--media-accent) 18%, rgba(255, 255, 255, 0.08));
  border-radius: calc(var(--radius-main) - 0.02rem);
  overflow: hidden;
  display: grid;
  align-items: end;
  padding: 0.85rem;
  background: rgba(7, 11, 16, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px color-mix(in srgb, var(--media-glow) 12%, transparent);
}

html[data-product="portal"] .media-card-button {
  width: 100%;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

html[data-product="portal"] .media-feature-card {
  min-height: clamp(7.6rem, 8.6vw, 10.4rem);
}

html[data-product="portal"] .media-side-card {
  min-height: clamp(7.8rem, 8.4vw, 9.8rem);
}

html[data-product="portal"] .media-side-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 8, 12, 0.08), rgba(4, 8, 12, 0.74));
  transition: background 180ms ease, opacity 180ms ease;
}

html[data-product="portal"] .media-feature-card::before,
html[data-product="portal"] .media-side-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-main) - 0.08rem);
  background: var(--media-card-image) center top / cover no-repeat;
  pointer-events: none;
}

html[data-product="portal"] .media-side-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.28rem;
  transition: transform 180ms ease;
}

html[data-product="portal"] .media-side-title,
html[data-product="portal"] .media-side-meta {
  margin: 0;
}

html[data-product="portal"] .media-side-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-product="portal"] .media-side-meta {
  color: rgba(233, 239, 244, 0.68);
  font-size: 0.72rem;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-product="portal"] .media-card-action {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  z-index: 2;
  min-width: 7.35rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--media-accent) 42%, rgba(255, 255, 255, 0.14));
  border-radius: var(--u-radius-md);
  background: rgba(6, 10, 15, 0.76);
  color: #f5f8fc;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.55rem);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px color-mix(in srgb, var(--media-glow) 18%, transparent);
}

html[data-product="portal"] .media-card-button:hover,
html[data-product="portal"] .media-card-button:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--media-accent) 42%, rgba(255, 255, 255, 0.14));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--media-accent) 28%, rgba(255, 255, 255, 0.12)),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px color-mix(in srgb, var(--media-accent) 20%, transparent),
    0 0 24px color-mix(in srgb, var(--media-glow) 22%, transparent),
    0 0 42px color-mix(in srgb, var(--media-glow) 30%, transparent);
}

html[data-product="portal"] .media-card-button:hover .media-side-overlay,
html[data-product="portal"] .media-card-button:focus-visible .media-side-overlay {
  background:
    linear-gradient(180deg, rgba(4, 8, 12, 0.02), rgba(4, 8, 12, 0.88));
}

html[data-product="portal"] .media-card-button:hover .media-side-copy,
html[data-product="portal"] .media-card-button:focus-visible .media-side-copy {
  transform: translateY(-0.35rem);
}

html[data-product="portal"] .media-card-button:hover .media-card-action,
html[data-product="portal"] .media-card-button:focus-visible .media-card-action {
  opacity: 1;
  transform: translateY(0);
}

html[data-product="portal"] .media-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2, 5, 10, 0.82);
  backdrop-filter: blur(12px);
}

html[data-product="portal"] .media-lightbox {
  width: min(100%, 94rem);
  max-height: min(92vh, 58rem);
  display: grid;
  border: 1px solid color-mix(in srgb, var(--media-accent) 18%, rgba(255, 255, 255, 0.12));
  border-radius: calc(var(--radius-main) + 0.15rem);
  padding: clamp(0.85rem, 2vw, 1.2rem);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--media-accent) 14%, transparent), transparent 28%),
    linear-gradient(180deg, rgba(7, 11, 16, 0.98), rgba(5, 8, 12, 0.94));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 32px color-mix(in srgb, var(--media-glow) 24%, transparent);
}

html[data-product="portal"] .media-lightbox-stage {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  min-height: min(72vh, 44rem);
}

html[data-product="portal"] .media-lightbox-frame {
  position: relative;
  min-width: 0;
  height: 100%;
  min-height: min(68vh, 40rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: calc(var(--radius-main) - 0.02rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.16)),
    rgba(2, 5, 10, 0.92);
}

html[data-product="portal"] .media-lightbox-overlay {
  position: absolute;
  top: 0;
  left: calc(3rem + 0.85rem);
  right: calc(3rem + 0.85rem);
  z-index: 2;
  padding: 0;
  pointer-events: none;
}

html[data-product="portal"] .media-lightbox-topbar {
  position: relative;
  min-height: 0;
  pointer-events: auto;
}

html[data-product="portal"] .media-lightbox-heading {
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: 3;
  max-width: min(28rem, calc(100% - 20rem));
  transform: translateY(-52%);
  pointer-events: none;
}

html[data-product="portal"] .media-lightbox-meta {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 3;
  display: grid;
  gap: 0.24rem;
  justify-items: start;
  width: min(100%, 20rem);
  pointer-events: none;
}

html[data-product="portal"] .media-lightbox-ridge-title,
html[data-product="portal"] .media-lightbox-subtitle {
  margin: 0;
}

html[data-product="portal"] .media-lightbox-ridge-title {
  font-family: var(--font-beaufort), "Leelawadee UI", Tahoma, "Segoe UI", sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 2.1rem);
  line-height: 0.92;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #eef3f8;
  font-weight: 800;
  white-space: nowrap;
  text-align: left;
  padding: 0;
  background: transparent;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.82),
    0 0 7px rgba(78, 194, 255, 0.24),
    0 0 16px rgba(34, 162, 235, 0.12);
}

html[data-product="portal"] .media-lightbox-subtitle {
  color: rgba(231, 238, 244, 0.72);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  max-width: 20rem;
  line-height: 1.5;
}

html[data-product="portal"] .media-lightbox-actions {
  position: absolute;
  top: 0;
  right: 1rem;
  z-index: 3;
  transform: translateY(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  justify-content: end;
}

html[data-product="portal"] .media-lightbox-actions-mobile {
  display: none;
}

html[data-product="portal"] .media-lightbox-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8rem;
  min-height: 2.85rem;
  padding-inline: 1.2rem;
  border-color: color-mix(in srgb, var(--media-accent) 34%, rgba(255, 255, 255, 0.14));
  background: rgba(7, 11, 16, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px color-mix(in srgb, var(--media-glow) 12%, transparent);
  text-decoration: none;
  text-align: center;
}

html[data-product="portal"] .media-lightbox-action:hover,
html[data-product="portal"] .media-lightbox-action:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 22px color-mix(in srgb, var(--media-glow) 22%, transparent);
}

html[data-product="portal"] .media-lightbox-image,
html[data-product="portal"] .media-lightbox-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

html[data-product="portal"] .media-lightbox-nav {
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in srgb, var(--media-accent) 34%, rgba(255, 255, 255, 0.12));
  border-radius: 999px;
  background: rgba(7, 11, 16, 0.78);
  color: #f5f8fc;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 0 20px color-mix(in srgb, var(--media-glow) 16%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

html[data-product="portal"] .media-lightbox-nav:hover,
html[data-product="portal"] .media-lightbox-nav:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 0 24px color-mix(in srgb, var(--media-glow) 24%, transparent);
}

html[data-product="portal"] .media-status-line {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  color: rgba(222, 230, 238, 0.64);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html[data-product="portal"] .media-status-index,
html[data-product="portal"] .media-status-name {
  color: color-mix(in srgb, var(--media-accent) 44%, #f3f8fd);
}

html[data-product="portal"] .media-status-descriptor {
  color: rgba(237, 242, 247, 0.56);
}

@media (min-width: 900px) {
  html[data-product="portal"] .support-merge {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  html[data-product="portal"] .prereg-panel {
    min-height: 21rem;
  }

  html[data-product="portal"] .support-panel {
    min-height: 21rem;
  }

  html[data-product="portal"] .support-panel .support-block {
    gap: 1rem;
  }

  html[data-product="portal"] .prereg-panel .email-form {
    grid-template-columns: minmax(0, 1fr) auto;
    max-width: 34.5rem;
    align-items: start;
  }

  html[data-product="portal"] .prereg-panel .cta-inline {
    min-width: 9.5rem;
  }
}

@media (min-width: 1200px) {
}

@keyframes portal-participants-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

html[data-product="portal"] .popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background:
    radial-gradient(circle at 50% 26%, rgba(68, 164, 228, 0.1), transparent 24%),
    rgba(0, 0, 0, 0.8);
  display: grid;
  place-items: center;
  padding: 1rem;
  backdrop-filter: blur(12px);
}

html[data-product="portal"] .popup-card {
  width: min(100%, 30rem);
  padding-top: 2.65rem;
  overflow: visible;
}

html[data-product="portal"] .popup-ridge-title {
  font-size: clamp(1.35rem, 4vw, 2.2rem);
}

html[data-product="portal"] .popup-body {
  display: grid;
  gap: 0.95rem;
}

html[data-product="portal"] .popup-copy {
  margin-top: 0.15rem;
  max-width: 24rem;
}

html[data-product="portal"] .popup-note {
  margin: -0.15rem 0 0;
  padding: 0.72rem 0.88rem;
  border-radius: calc(var(--radius-main) - 0.02rem);
  border: 1px solid rgba(111, 208, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.12)),
    rgba(8, 14, 22, 0.68);
  color: rgba(226, 235, 244, 0.82);
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 18px rgba(47, 168, 255, 0.08);
}

html[data-product="portal"] .popup-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 14%, rgba(65, 154, 214, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 22%);
  pointer-events: none;
}

html[data-product="portal"] .popup-card::after {
  content: "";
  position: absolute;
  inset: auto 1.2rem -1px 1.2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 208, 255, 0.38), transparent);
  opacity: 0.72;
  pointer-events: none;
}

html[data-product="portal"] .popup-form {
  display: grid;
  gap: 0.75rem;
}

html[data-product="portal"] .popup-success {
  display: grid;
  gap: 0.9rem;
}

html[data-product="portal"] .popup-success-copy {
  margin: 0;
  color: rgba(238, 244, 249, 0.88);
  font-size: 1rem;
  line-height: 1.65;
  text-align: center;
}

html[data-product="portal"] .popup-success-copy strong {
  color: #f6fbff;
}

html[data-product="portal"] .popup-success-card {
  display: grid;
  gap: 0.35rem;
  padding: 0.95rem 1rem;
  border-radius: calc(var(--radius-main) - 0.02rem);
  border: 1px solid rgba(111, 208, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.14)),
    rgba(8, 14, 22, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 20px rgba(47, 168, 255, 0.08);
}

html[data-product="portal"] .popup-success-label {
  color: rgba(211, 225, 237, 0.56);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html[data-product="portal"] .popup-success-value {
  color: #f1f7fd;
  font-size: 1.18rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  word-break: break-word;
}

html[data-product="portal"] .popup-success-value-small {
  font-size: 0.96rem;
  text-transform: none;
  letter-spacing: 0.02em;
}

html[data-product="portal"] .popup-actions {
  display: grid;
  gap: 0.5rem;
}

html[data-product="portal"] .popup-close {
  width: 100%;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.76);
  font-family: inherit;
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-main);
  transition: color 180ms ease, background-color 180ms ease;
}

html[data-product="portal"] .popup-close:hover,
html[data-product="portal"] .popup-close:focus-visible {
  color: #edf6fd;
  background: rgba(255, 255, 255, 0.04);
}

@media (min-width: 700px) {
  html[data-product="portal"] .hero-cta {
    grid-template-columns: 1fr 1.25fr 1fr;
    gap: 0.7rem;
  }

  /* Отсчёт — одна строка «дни : часы : минуты : секунды». В две строки он
     читается как две отдельные пары чисел, а не как одно время. */
  html[data-product="portal"] .timer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 20rem);
    max-width: 20rem;
  }

  html[data-product="portal"] .email-form {
    grid-template-columns: 1fr auto;
  }
}

@media (min-width: 1024px) {
  html[data-product="portal"] {
    --rail-safe: 5.8rem;
  }

  html[data-product="portal"] .social-rail,
  html[data-product="portal"] .section-rail {
    display: flex;
  }

  /* Поблочный скролл объявляется на КОРНЕ, а не на body.
     Прокручивает страницу html (`document.scrollingElement` — именно он), а свойства
     scroll-snap-* с body на область просмотра не переносятся: в отличие от `overflow`,
     такого правила для них в спецификации нет. Пока объявление висело на body, оно
     просто ничего не значило — снап тихо не работал, хотя в стилях присутствовал. */
  /* Только там, где есть чему привязываться. Разделы портала — обычные длинные
     документы, и mandatory-снап на них не нужен ни на минуту. */
  html[data-product="portal"]:has(.landing-section) {
    scroll-snap-type: y mandatory;
  }

  html[data-product="portal"] .landing-section {
    height: 100dvh;
    min-height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
  }

  html[data-product="portal"] .hero-cta {
    margin-inline: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.78rem;
  }

  html[data-product="portal"] .hero-cta-main {
    width: clamp(20rem, 31vw, 25rem);
    height: 3.05rem;
    font-size: 1.05rem;
    box-shadow: 0 0 26px rgba(47, 168, 255, 0.46);
  }

  html[data-product="portal"] .hero-cta-side {
    width: clamp(10.5rem, 14vw, 13.2rem);
    height: 2.65rem;
    font-size: 0.86rem;
    opacity: 0.88;
  }

  html[data-product="portal"] .section-enter,
  html[data-product="portal"] .section-enter.is-visible {
    transform: none;
    transition: none;
  }

  @supports not (height: 100dvh) {
    html[data-product="portal"] .landing-section {
      height: 100vh;
      min-height: 100vh;
    }
  }

  html[data-product="portal"] .new-world-panel {
    /* Секция теперь резервирует полосу под фиксированную шапку, значит и панели её
       высоты уже не достаётся: со старой формулой низ сравнения «до/после» уходил
       под нижний край окна ровно на высоту шапки. */
    min-height: calc(100dvh - var(--hud-topbar-h, 6.6rem) - 5.2rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  html[data-product="portal"] .roadmap-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  html[data-product="portal"] .roadmap-layout {
    margin-top: 0.15rem;
    display: grid;
    grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
  }

  html[data-product="portal"] .classes-layout {
    grid-template-columns: minmax(26rem, 1.08fr) minmax(20rem, 0.92fr);
    gap: 0.35rem;
    align-items: stretch;
  }
}

@media (max-width: 900px) {
  html[data-product="portal"],
  html[data-product="portal"] body,
  html[data-product="portal"] .page-root {
    overflow-x: hidden;
  }

  html[data-product="portal"] .landing-section {
    min-height: auto;
    align-items: flex-start;
    padding-block: 1rem;
    overflow-x: hidden;
  }

  html[data-product="portal"] .landing-shell,
  html[data-product="portal"] .hero-content,
  html[data-product="portal"] .support-merge,
  html[data-product="portal"] .section-panel,
  html[data-product="portal"] .split-panel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  html[data-product="portal"] .support-merge {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-product="portal"] .hero.landing-section {
    min-height: 100svh;
    align-items: center;
    justify-content: center;
    padding-block: 1rem;
    padding-top: 4.6rem;
    overflow: hidden;
  }

  html[data-product="portal"] .hero-content {
    min-height: calc(100svh - 2rem);
    height: calc(100svh - 2rem);
    justify-content: flex-end;
    max-width: 100%;
    padding-top: clamp(3.8rem, 8vh, 4.4rem);
    padding-bottom: 0.6rem;
  }

  html[data-product="portal"] .hero-tag-anim {
    width: fit-content;
    max-width: 86vw;
    padding: 0.52rem 0.75rem;
  }

  html[data-product="portal"] .tag-line {
    font-size: 0.55rem;
    gap: 0.16rem;
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
    letter-spacing: 0.06em;
  }

  html[data-product="portal"] .hero-title {
    font-size: clamp(3.35rem, 19.5vw, 5.85rem);
    line-height: 0.8;
  }

  html[data-product="portal"] .hero-logo {
    width: min(28rem, 92vw);
  }

  /* И на узком экране те же четыре в ряд — просто мельче: разрывать время
     на две строки нельзя, иначе это уже не таймер. */
  html[data-product="portal"] .timer-grid {
    margin-top: 0.15rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    width: min(100%, 19.5rem);
    max-width: 19.5rem;
    margin-inline: auto;
  }

  html[data-product="portal"] .timer-card {
    min-height: 3.4rem;
    padding: 0.36rem 0.2rem;
  }

  html[data-product="portal"] .timer-value {
    font-size: clamp(1.1rem, 4.8vw, 1.45rem);
  }

  html[data-product="portal"] .timer-label {
    font-size: 0.5rem;
    letter-spacing: 0.14em;
  }

  html[data-product="portal"] .hero-cta-main {
    order: 1;
  }

  html[data-product="portal"] .hero-cta-support {
    order: 2;
  }

  html[data-product="portal"] .hero-cta-about {
    order: 3;
  }

  html[data-product="portal"] .hero-cta {
    margin-top: 0.9rem;
    padding-top: 0;
  }

  html[data-product="portal"] .title-desktop {
    display: none;
  }

  html[data-product="portal"] .title-mobile {
    display: flex;
  }

  html[data-product="portal"] .title-mobile > span {
    transform: none;
  }

  html[data-product="portal"] .title-mobile .title-top {
    font-size: 1.6em;
    line-height: 0.72;
  }

  html[data-product="portal"] .title-mobile .title-bottom {
    margin-top: 0.1em;
    font-size: 1.02em;
  }

  html[data-product="portal"] .hero-tag-fixed.is-hidden-mobile {
    opacity: 0;
    transform: translate(-50%, -8px);
    pointer-events: none;
  }

  html[data-product="portal"] .section-panel {
    padding: 0.9rem;
  }

  html[data-product="portal"] .split-panel {
    padding-top: 1rem;
  }

  html[data-product="portal"] .panel-ridge-title {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.9rem;
    padding-inline: 0;
    transform: none;
    font-size: clamp(1.15rem, 8vw, 1.85rem);
    white-space: normal;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  html[data-product="portal"] .panel-ridge-title-bottom {
    margin-top: 0.95rem;
    margin-bottom: 0;
  }

  html[data-product="portal"] .participants-panel {
    display: flex;
    flex-direction: column;
    min-height: 8.6rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  html[data-product="portal"] .participants-panel .participants-marquee {
    order: 2;
  }

  html[data-product="portal"] .participants-panel .panel-ridge-title-bottom {
    order: 1;
    margin-top: 0;
    margin-bottom: 0.95rem;
  }

  html[data-product="portal"] .participant-chip {
    min-width: 7.8rem;
    padding-inline: 0.8rem;
    font-size: 0.78rem;
  }

  html[data-product="portal"] .prereg-block,
  html[data-product="portal"] .support-block {
    margin-top: 0.25rem;
  }

  html[data-product="portal"] .muted-copy {
    margin-top: 0.65rem;
    font-size: 0.9rem;
  }

  html[data-product="portal"] .big-number {
    font-size: clamp(1.8rem, 8vw, 3rem);
  }

  html[data-product="portal"] .new-world-panel {
    min-height: auto;
    display: block;
  }

  html[data-product="portal"] .content-scene {
    height: 34rem;
    min-height: 34rem;
  }

  html[data-product="portal"] .media-ridge-nav {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
    justify-content: center;
    margin-top: -0.45rem;
    padding: 0 0 1rem;
  }

  html[data-product="portal"] .media-ridge-word {
    font-size: clamp(1.1rem, 6.2vw, 1.9rem);
  }

  html[data-product="portal"] .media-ridge-word.is-active {
    text-shadow:
      0 0 1px rgba(255, 255, 255, 0.82),
      0 0 5px color-mix(in srgb, var(--media-glow) 64%, rgba(78, 194, 255, 0.22)),
      0 0 12px color-mix(in srgb, var(--media-glow) 32%, rgba(34, 162, 235, 0.12));
  }

  html[data-product="portal"] .media-stage-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    min-height: auto;
  }

  html[data-product="portal"] .media-hero-card {
    grid-column: auto;
    grid-row: auto;
    min-height: 17.5rem;
    width: 100%;
  }

  html[data-product="portal"] .media-feature-list {
    grid-column: auto;
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: 1fr;
  }

  html[data-product="portal"] .media-layout-3 .media-hero-card,
  html[data-product="portal"] .media-layout-4 .media-hero-card,
  html[data-product="portal"] .media-layout-3 .media-feature-list,
  html[data-product="portal"] .media-layout-4 .media-feature-list,
  html[data-product="portal"] .media-layout-3 .media-side-list {
    grid-column: auto;
    grid-row: auto;
    min-height: auto;
  }

  html[data-product="portal"] .media-layout-4 .media-side-list {
    grid-column: auto;
    grid-row: auto;
    min-height: auto;
  }

  html[data-product="portal"] .media-layout-3 .media-side-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(7.4rem, auto);
  }

  html[data-product="portal"] .media-layout-4 .media-feature-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  html[data-product="portal"] .media-layout-4 .media-side-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: minmax(7.4rem, auto);
  }

  html[data-product="portal"] .media-layout-4 .media-feature-card,
  html[data-product="portal"] .media-layout-4 .media-side-card {
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    min-height: 8.9rem;
    height: 8.9rem;
  }

  html[data-product="portal"] .media-hero-copy {
    max-width: 100%;
    width: min(100%, 18rem);
    padding: 0.72rem 0.8rem 0.86rem;
    backdrop-filter: none;
    transform: none;
  }

  html[data-product="portal"] .media-side-list {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(7.4rem, auto);
    gap: 0.8rem;
  }

  html[data-product="portal"] .media-layout-1 .media-side-1-1 {
    grid-column: auto;
    grid-row: auto;
  }

  html[data-product="portal"] .media-feature-card,
  html[data-product="portal"] .media-side-card {
    transform: none;
    min-height: 8.9rem;
  }

  html[data-product="portal"] .media-side-copy {
    transform: none;
  }

  html[data-product="portal"] .email-form {
    gap: 0.34rem;
  }

  html[data-product="portal"] .prereg-panel .field-stack,
  html[data-product="portal"] .support-form .field-stack {
    padding-bottom: 0.9rem;
  }

  html[data-product="portal"] .prereg-panel .field-message,
  html[data-product="portal"] .support-form .field-message {
    top: calc(100% - 0.5rem);
    font-size: 0.68rem;
  }

  html[data-product="portal"] .prereg-panel .cta-inline,
  html[data-product="portal"] .support-form .cta-inline {
    margin-top: 0.5rem;
  }

  html[data-product="portal"] .content-scene-grid {
    min-height: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: start;
    align-content: start;
    gap: 1rem;
    padding: 1rem;
  }

  html[data-product="portal"] .content-copy,
  html[data-product="portal"] .content-side {
    max-width: 100%;
    width: 100%;
  }

  html[data-product="portal"] .content-side {
    justify-self: stretch;
    align-self: end;
  }

  html[data-product="portal"] .content-title {
    font-size: clamp(1.9rem, 10vw, 3rem);
  }

  html[data-product="portal"] .content-subtitle,
  html[data-product="portal"] .content-bullet {
    font-size: 0.92rem;
  }

  html[data-product="portal"] .content-fact-value {
    font-size: clamp(1.15rem, 7vw, 1.75rem);
  }

  html[data-product="portal"] .content-layer-d {
    opacity: 0.36;
  }

  html[data-product="portal"] .classes-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-product="portal"] .classes-controls {
    display: none;
  }

  html[data-product="portal"] .classes-stack {
    min-height: 26rem;
  }

  html[data-product="portal"] .class-card {
    --card-x: calc(var(--class-offset) * 5.2%);
    inset: 0.25rem auto 0.25rem 50%;
    width: min(17rem, calc(100% - 0.45rem));
  }

  html[data-product="portal"] .class-card-name {
    font-size: 1rem;
  }

  html[data-product="portal"] .class-card-role {
    font-size: 0.68rem;
  }

  html[data-product="portal"] .class-card-sigil {
    width: clamp(4.6rem, 22vw, 6rem);
    font-size: clamp(1.7rem, 7vw, 2.5rem);
  }

  html[data-product="portal"] .class-detail {
    gap: 0.7rem;
  }

  html[data-product="portal"] .class-detail-title {
    font-size: clamp(1.45rem, 8vw, 2.2rem);
  }

  html[data-product="portal"] .class-detail-subtitle,
  html[data-product="portal"] .class-detail-copy {
    font-size: 0.9rem;
  }

  html[data-product="portal"] .class-profession-tab {
    font-size: 0.66rem;
    padding: 0.42rem 0.65rem;
  }

  html[data-product="portal"] .class-profession-copy {
    font-size: 0.84rem;
    min-height: 5.8em;
  }

  html[data-product="portal"] .class-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  html[data-product="portal"] .class-detail-copy {
    min-height: 6.2em;
  }

  html[data-product="portal"] .class-profession-panel {
    min-height: 11.4rem;
  }

  html[data-product="portal"] .class-stat-card {
    padding: 0.62rem;
  }

  html[data-product="portal"] .class-stat-value {
    font-size: 1.05rem;
  }

  html[data-product="portal"] .class-traits {
    gap: 0.42rem;
  }

  html[data-product="portal"] .class-trait-chip {
    font-size: 0.66rem;
    padding: 0.38rem 0.62rem;
  }

  html[data-product="portal"] .roadmap-panel {
    min-height: auto;
  }

  html[data-product="portal"] .roadmap-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-product="portal"] .roadmap-step-card {
    padding: 0.8rem 0.9rem;
  }

  html[data-product="portal"] .road-step-index {
    width: 1.8rem;
    height: 1.8rem;
    font-size: 0.76rem;
  }

  html[data-product="portal"] .road-title {
    font-size: 0.9rem;
  }

  html[data-product="portal"] .road-desc,
  html[data-product="portal"] .roadmap-detail-copy {
    font-size: 0.84rem;
  }

  html[data-product="portal"] .compare-wrap {
    flex: none;
  }

  html[data-product="portal"] .compare-frame {
    flex: none;
    aspect-ratio: 16 / 9;
    min-height: 0;
    height: auto;
    max-height: none;
  }

  html[data-product="portal"] .compare-controls {
    width: min(100%, 14rem);
    margin-top: 0.75rem;
    column-gap: 0.7rem;
  }

  html[data-product="portal"] .media-panel {
    padding-top: 1.95rem;
  }

  html[data-product="portal"] .media-hero-title {
    font-size: clamp(1.35rem, 8vw, 2rem);
  }

  html[data-product="portal"] .media-hero-text {
    font-size: 0.9rem;
  }

  html[data-product="portal"] .media-side-card {
    min-height: 8.6rem;
  }

  html[data-product="portal"] .media-card-action {
    opacity: 1;
    transform: none;
  }

  html[data-product="portal"] .media-lightbox {
    max-height: 94vh;
    padding: 0.85rem;
  }

  html[data-product="portal"] .media-lightbox-stage {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    min-height: auto;
  }

  html[data-product="portal"] .media-lightbox-frame {
    min-height: min(54vh, 26rem);
  }

  html[data-product="portal"] .media-lightbox-overlay {
    top: 0.7rem;
    left: 0;
    right: 0;
  }

  html[data-product="portal"] .media-lightbox-topbar {
    min-height: 0;
  }

  html[data-product="portal"] .media-lightbox-heading {
    left: 0.7rem;
    right: 0.7rem;
    max-width: min(18rem, calc(100% - 8rem));
  }

  html[data-product="portal"] .media-lightbox-ridge-title {
    white-space: normal;
    text-wrap: balance;
  }

  html[data-product="portal"] .media-lightbox-actions {
    justify-content: stretch;
  }

  html[data-product="portal"] .media-lightbox-action {
    flex: 1 1 10rem;
  }

  html[data-product="portal"] .media-lightbox-action-desktop {
    display: none;
  }

  html[data-product="portal"] .media-lightbox-actions-mobile {
    display: flex;
    position: static;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    z-index: auto;
    transform: none;
    width: 100%;
    margin-top: 0.9rem;
    gap: 0.7rem;
    justify-content: stretch;
  }

  html[data-product="portal"] .media-lightbox-meta {
    left: 0.8rem;
    bottom: 1rem;
    width: min(100%, 16rem);
  }

  html[data-product="portal"] .media-lightbox-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
  }

  html[data-product="portal"] .media-lightbox-nav:hover,
  html[data-product="portal"] .media-lightbox-nav:focus-visible {
    transform: translateY(-50%);
  }

  html[data-product="portal"] .media-lightbox-nav-prev {
    left: 0.4rem;
  }

  html[data-product="portal"] .media-lightbox-nav-next {
    right: 0.4rem;
  }

  html[data-product="portal"] .media-status-line {
    gap: 0.45rem 0.7rem;
    font-size: 0.64rem;
  }

  html[data-product="portal"] .section-enter,
  html[data-product="portal"] .section-enter.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html[data-product="portal"] .section-enter .section-content,
  html[data-product="portal"] .section-enter .section-panel > * {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-product="portal"] {
    scroll-behavior: auto;
  }

  html[data-product="portal"] .section-enter,
  html[data-product="portal"] .section-content,
  html[data-product="portal"] .section-panel > *,
  html[data-product="portal"] .hero-tag-fixed,
  html[data-product="portal"] .cta-primary,
  html[data-product="portal"] .cta-secondary,
  html[data-product="portal"] .media-card-button,
  html[data-product="portal"] .media-side-copy,
  html[data-product="portal"] .media-card-action,
  html[data-product="portal"] .media-lightbox-action,
  html[data-product="portal"] .media-lightbox-nav {
    transition: none;
    transform: none;
  }

  html[data-product="portal"] .section-enter:not(.is-visible) .section-content,
  html[data-product="portal"] .section-enter:not(.is-visible) .section-panel > * {
    opacity: 1;
  }

  html[data-product="portal"] .cta-primary::before,
  html[data-product="portal"] .cta-primary::after,
  html[data-product="portal"] .cta-secondary::before,
  html[data-product="portal"] .cta-secondary::after,
  html[data-product="portal"] .class-nav::before,
  html[data-product="portal"] .class-nav::after,
  html[data-product="portal"] .class-profession-tab::before,
  html[data-product="portal"] .class-profession-tab::after,
  html[data-product="portal"] .content-tab::before,
  html[data-product="portal"] .content-tab::after {
    display: none;
  }

  html[data-product="portal"] .hero-tag-anim,
  html[data-product="portal"] .tag-line-morph::after,
  html[data-product="portal"] .badge-reel,
  html[data-product="portal"] .badge-reel > span {
    transition: none;
    animation: none;
  }

  html[data-product="portal"] .tag-line-morph::after {
    display: none;
  }

  html[data-product="portal"] .hero-tag-anim .badge-reel {
    transform: translateY(-50%);
  }

  html[data-product="portal"] .hero-tag-anim .badge-reel > span {
    color: inherit;
    text-shadow: none;
    text-decoration: none;
  }

  html[data-product="portal"] .participants-track {
    animation: none;
  }
}

/* ==========================================================================
   Ниже — НОВЫЕ классы для функциональной части портала (кабинет/рейтинг/донат),
   которых нет в промо-сайте (там нет таблиц, боковой навигации, авторизации).
   Используют те же токены (--bg/--panel/--text/--accent/--line/--radius-main),
   но это не перенос существующего компонента, а новый, честно отдельный UI. ==========================================================================*/

html[data-product="portal"] .portal-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-block: 1rem;
  background: transparent;
}

html[data-product="portal"] .portal-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

html[data-product="portal"] .portal-header-brand {
  font-family: var(--font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  font-size: 1rem;
}

html[data-product="portal"] .portal-header-nav,
html[data-product="portal"] .portal-header-actions {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: 0.82rem;
}

html[data-product="portal"] .portal-header-toggle {
  display: none;
  font-size: 1.1rem;
}

html[data-product="portal"] .portal-header-link {
  color: #eef3f8;
  text-decoration: none;
  font-family: var(--font-beaufort), "Leelawadee UI", Tahoma, "Segoe UI", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.82),
    0 0 7px rgba(78, 194, 255, 0.24),
    0 0 16px rgba(34, 162, 235, 0.12);
  transition: text-shadow 200ms ease;
}

html[data-product="portal"] .portal-header-link:hover,
html[data-product="portal"] .portal-header-link:focus-visible {
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.92),
    0 0 9px rgba(78, 194, 255, 0.5),
    0 0 20px rgba(34, 162, 235, 0.3);
}

@media (max-width: 900px) {
  html[data-product="portal"] .portal-header-toggle {
    display: grid;
    place-items: center;
  }

  html[data-product="portal"] .portal-header-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem clamp(1rem, 4vw, 2.5rem) 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }

  html[data-product="portal"] .portal-header-nav.is-open {
    display: flex;
  }

  html[data-product="portal"] .portal-header-nav .portal-header-link {
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  html[data-product="portal"] .portal-header-nav .portal-header-link:last-child {
    border-bottom: 0;
  }
}

html[data-product="portal"] .portal-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 900px) {
  html[data-product="portal"] .portal-shell {
    grid-template-columns: 15rem 1fr;
  }
}

html[data-product="portal"] .portal-nav {
  border-right: 1px solid var(--line);
  background: var(--panel);
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

html[data-product="portal"] .portal-nav-link {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-main);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.86rem;
  transition: color 160ms ease, background-color 160ms ease;
}

html[data-product="portal"] .portal-nav-link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}

html[data-product="portal"] .portal-main {
  padding: clamp(1rem, 3vw, 2.4rem);
  display: grid;
  gap: 1.4rem;
  align-content: start;
}

html[data-product="portal"] .portal-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

html[data-product="portal"] .portal-data-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line);
}

html[data-product="portal"] .portal-data-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text);
}

html[data-product="portal"] .portal-data-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

html[data-product="portal"] .portal-stat-tile {
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  padding: 1rem 1.2rem;
  background: var(--panel);
  display: grid;
  gap: 0.3rem;
}

html[data-product="portal"] .portal-stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

html[data-product="portal"] .portal-stat-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Герой на узких окнах (< 1024px).
   Две беды, которые лечатся вместе:
   1. Шапка портала (.hud-topbar с «Хроникой мира») фиксированная и высокая —
      около 106px. Лендинг же считал высоту героя от чистых 100svh, поэтому
      кнопки «Поддержать / Скачать / О проекте» уезжали за нижний край экрана.
   2. Диапазон 901–1023px не покрывал ни мобильный блок (max-width: 900),
      ни десктопный (min-width: 1024): .hero-content оставался без явной
      высоты, и «Онлайн сейчас» с кнопками всплывали в середину окна поверх
      логотипа.
   Держим герой ровно в один экран и отступаем сверху на высоту шапки.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  html[data-product="portal"] .hero.landing-section {
    min-height: 100svh;
    align-items: center;
    padding-block: 0;
  }

  html[data-product="portal"] .hero-content {
    min-height: 100svh;
    height: 100svh;
    justify-content: flex-end;
    padding-top: 7.6rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 901px) and (max-width: 1023px) {
  html[data-product="portal"] .hero-logo {
    width: min(40rem, 88vw);
  }
}


/* ==========================================================================
   Портальный слой UnrealPortalX, v2 — «Кинематографичное стекло + Aurora».
   Продолжение языка лендинга: стеклянные панели, тиснёные титулы, глоу.
   Фон — живые aurora-градиенты Порядка (--arc) и Хаоса (--ember).
   Отдельный неймспейс .hud-* — токены лендинга не переопределяем.
   Подключается ПОСЛЕ globals.css.
   ========================================================================== */

html[data-product="portal"] {
  --void: #08070c;
  --iron: #16131c;
  --parchment: #eee3cf;
  --parchment-dim: rgba(238, 227, 207, 0.62);
  --parchment-faint: rgba(238, 227, 207, 0.38);
  --arc: #33c6ff;
  --ember: #ff5a36;
  --gold: #e0b361;
  --gold-bright: #f4d492;
  --hud-line: rgba(238, 227, 207, 0.15);
  --hud-line-faint: rgba(238, 227, 207, 0.08);
  /* Высота фиксированной шапки: ряд навигации (padding 0.72rem сверху и снизу +
     кнопки высотой 2.4rem) плюс лента «Хроника мира». Отдельными токенами —
     потому что от них отсчитываются элементы, лежащие под шапкой: чип с
     технологиями на лендинге и выпадающий список языков на мобильном. */
  --hud-topbar-row-h: calc(0.72rem * 2 + 2.4rem);
  --hud-feed-h: 2.7rem;
  --hud-radius: 0.9rem;
  --hud-radius-sm: 0.6rem;
}

/* Итог считаем не на :root, потому что слагаемые зависят от стадии: до релиза
   нет «Хроники мира», а на промо главная живёт вообще без шапки. Стадия обнуляет
   слагаемые инлайновым стилем — на <body> (app/layout.tsx) для всего сайта и на
   .page-root (LandingClient) для одной только главной. В :root это было бы
   бесполезно: там значение уже вычислено и наследуется готовым, так что
   переопределение слагаемого ниже по дереву его не пересчитает. Отсюда и
   повторение правила на обоих уровнях. */
html[data-product="portal"] body,
html[data-product="portal"] .page-root {
  --hud-topbar-h: calc(var(--hud-topbar-row-h) + var(--hud-feed-h));
}

/* --------------------------------------------------------------------------
   Корень: глубокий фон + два дышащих aurora-пятна (Порядок / Хаос).
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-root {
  position: relative;
  min-height: 100vh;
  color: var(--parchment);
  isolation: isolate;
  background: transparent;
}

html[data-product="portal"] .hud-root::before,
html[data-product="portal"] .hud-root::after {
  content: none;
}

html[data-product="portal"] .hud-root::before {
  width: 56vw;
  height: 46vh;
  top: -14vh;
  left: -10vw;
  background: radial-gradient(circle at 40% 45%,
    rgba(51, 198, 255, 0.2),
    rgba(82, 76, 190, 0.1) 55%,
    transparent 75%);
  animation: portal-hud-aurora-a 26s ease-in-out infinite alternate;
}

html[data-product="portal"] .hud-root::after {
  width: 52vw;
  height: 44vh;
  bottom: -16vh;
  right: -10vw;
  background: radial-gradient(circle at 60% 55%,
    rgba(255, 90, 54, 0.17),
    rgba(162, 55, 130, 0.09) 55%,
    transparent 75%);
  animation: portal-hud-aurora-b 32s ease-in-out infinite alternate;
}

@keyframes portal-hud-aurora-a {
  0% { transform: translate(0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate(6vw, 4vh) scale(1.12); opacity: 1; }
  100% { transform: translate(2vw, 8vh) scale(0.95); opacity: 0.8; }
}

@keyframes portal-hud-aurora-b {
  0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(-5vw, -5vh) scale(1.1); opacity: 1; }
  100% { transform: translate(-8vw, -1vh) scale(0.94); opacity: 0.85; }
}

html[data-product="portal"] .hud-root ::selection {
  background: var(--gold);
  color: var(--void);
}

/* --------------------------------------------------------------------------
   Топбар: стеклянная шапка + «Хроника мира» одним фиксированным блоком.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: linear-gradient(180deg, rgba(8, 7, 12, 0.85), rgba(8, 7, 12, 0.62));
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 1px solid var(--hud-line-faint);
}

html[data-product="portal"] .hud-topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: min(100%, 82rem);
  margin-inline: auto;
  padding: 0.72rem clamp(1rem, 3.4vw, 2.2rem);
}

/* Флаг-переключатель языка в шапке — той же высоты, что кнопка «Войти». */
html[data-product="portal"] .hud-topbar .social-dot {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--hud-radius-sm);
}

html[data-product="portal"] .hud-nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
}

html[data-product="portal"] .hud-nav-link {
  position: relative;
  color: var(--parchment-dim);
  text-decoration: none;
  font-family: var(--font-beaufort), "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.1rem;
  transition: color 180ms ease, text-shadow 180ms ease;
}

/* Пункты-окна («Скачать», «Донат») — кнопки: сбрасываем их вид до ссылки.
   text-align обязателен: в мобильном меню пункты идут колонкой, и кнопка
   без сброса центрировала бы свой текст, а ссылки рядом прижаты влево. */
html[data-product="portal"] button.hud-nav-link {
  border: 0;
  background: none;
  cursor: pointer;
  text-align: inherit;
}

html[data-product="portal"] .hud-nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.16rem;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--arc), transparent);
  box-shadow: 0 0 8px rgba(51, 198, 255, 0.6);
  transform: translateX(-50%);
  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-product="portal"] .hud-nav-link:hover,
html[data-product="portal"] .hud-nav-link:focus-visible {
  color: var(--parchment);
  text-shadow: 0 0 12px rgba(51, 198, 255, 0.45);
}

html[data-product="portal"] .hud-nav-link:hover::after,
html[data-product="portal"] .hud-nav-link:focus-visible::after,
html[data-product="portal"] .hud-nav-link.is-active::after {
  width: 100%;
}

html[data-product="portal"] .hud-nav-link.is-active {
  color: var(--parchment);
  text-shadow: 0 0 10px rgba(51, 198, 255, 0.35);
}

html[data-product="portal"] .hud-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

html[data-product="portal"] .hud-burger {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid var(--hud-line);
  border-radius: var(--hud-radius-sm);
  background: rgba(238, 227, 207, 0.05);
  color: var(--parchment);
  font-size: 1rem;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   ХРОНИКА МИРА — лента живых событий: стеклянные капсулы, дрейф, глоу.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-feed {
  display: flex;
  align-items: center;
  height: var(--hud-feed-h);
  border-top: 1px solid var(--hud-line-faint);
  overflow: hidden;
  font-size: 0.78rem;
}

html[data-product="portal"] .hud-feed-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  align-self: stretch;
  padding-inline: clamp(0.9rem, 2.4vw, 1.8rem) 1.1rem;
  color: var(--parchment-dim);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-right: 1px solid var(--hud-line-faint);
  background: linear-gradient(90deg, rgba(51, 198, 255, 0.07), transparent);
  white-space: nowrap;
}

html[data-product="portal"] .hud-feed-pulse {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: var(--arc);
  box-shadow: 0 0 10px rgba(51, 198, 255, 0.9);
  animation: portal-hud-pulse 2s ease-in-out infinite;
}

html[data-product="portal"] .hud-feed-viewport {
  position: relative;
  flex: 1;
  align-self: stretch;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

html[data-product="portal"] .hud-feed-track {
  position: absolute;
  inset-block: 0;
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0.85rem;
  padding-inline: 1rem;
  animation: portal-hud-marquee 60s linear infinite;
}

html[data-product="portal"] .hud-feed:hover .hud-feed-track {
  animation-play-state: paused;
}

/* Капсула события: цвет типа задаёт --ev (глоу-точка, кромка, лёгкая заливка). */
html[data-product="portal"] .hud-feed-item {
  --ev: var(--arc);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.34rem 0.8rem 0.32rem 0.62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ev) 26%, rgba(255, 255, 255, 0.07));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    color-mix(in srgb, var(--ev) 7%, rgba(10, 9, 15, 0.55));
  box-shadow: 0 0 14px color-mix(in srgb, var(--ev) 14%, transparent);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

html[data-product="portal"] .hud-feed-item:hover {
  border-color: color-mix(in srgb, var(--ev) 55%, rgba(255, 255, 255, 0.1));
  box-shadow: 0 0 20px color-mix(in srgb, var(--ev) 30%, transparent);
}

html[data-product="portal"] .hud-feed-item[data-kind="pvp"],
html[data-product="portal"] .hud-feed-item[data-kind="siege"] { --ev: var(--ember); }
html[data-product="portal"] .hud-feed-item[data-kind="drop"],
html[data-product="portal"] .hud-feed-item[data-kind="vip"] { --ev: var(--gold); }

html[data-product="portal"] .hud-feed-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ev);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ev) 80%, transparent);
}

html[data-product="portal"] .hud-feed-text {
  color: var(--parchment-dim);
}

html[data-product="portal"] .hud-feed-text b {
  color: var(--parchment);
  font-weight: 700;
}

html[data-product="portal"] .hud-feed-text i {
  font-style: normal;
  color: var(--gold-bright);
}

html[data-product="portal"] .hud-feed-time {
  color: var(--parchment-faint);
  font-size: 0.86em;
}

/* --------------------------------------------------------------------------
   Каркас страницы.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-shell {
  width: min(100%, 82rem);
  margin-inline: auto;
  padding: clamp(7rem, 11vh, 8.2rem) clamp(1rem, 3.4vw, 2.2rem) clamp(2rem, 5vh, 3.4rem);
  display: grid;
  gap: 1.4rem;
  align-content: start;
}

/* У grid-детей min-width по умолчанию auto: колонка не может стать уже своего
   содержимого. Из-за этого широкая таблица рейтинга распирала панель за край
   экрана, а .hud-table-wrap со своим overflow-x так и не получал шанса
   прокрутиться — верстка «сходилась» только на полноразмерном окне. */
html[data-product="portal"] .hud-shell > *,
html[data-product="portal"] .hud-main > * {
  min-width: 0;
}

html[data-product="portal"] .hud-pagehead {
  display: grid;
  gap: 0.5rem;
}

html[data-product="portal"] .hud-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-beaufort), "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #7fd2f8;
}

html[data-product="portal"] .hud-eyebrow::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 0.1rem;
  transform: rotate(45deg);
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}

html[data-product="portal"] .hud-eyebrow::after {
  content: "";
  width: 3.2rem;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: 0.5;
}

html[data-product="portal"] .hud-eyebrow--ember { color: #ff8f6e; }
html[data-product="portal"] .hud-eyebrow--gold { color: var(--gold-bright); }

/* Тиснёный металл — приём .title-front промо-лендинга в парчмент-гамме.
   Beaufort — канонический display/heading шрифт Concept/1 для всех локалей. */
html[data-product="portal"] .hud-title {
  margin: 0;
  font-family: var(--font-beaufort), "Leelawadee UI", Tahoma, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(1.7rem, 4.6vw, 2.7rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f2ecdd;
  background: linear-gradient(
    180deg,
    #fffdf7 0%,
    #f6efe0 24%,
    #ddd2bc 54%,
    #b3a88f 78%,
    #8a8069 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.5px rgba(111, 208, 255, 0.42);
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.5),
    0 0 10px rgba(78, 194, 255, 0.2),
    0 0 22px rgba(34, 162, 235, 0.1);
}

html[data-product="portal"] .hud-title-note {
  margin: 0.15rem 0 0;
  color: var(--parchment-dim);
  font-size: 0.95rem;
  max-width: 40rem;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Стеклянная панель: blur ловит aurora-фон, внутренний свет, цветная тень.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-panel {
  --panel-tint: rgba(238, 227, 207, 0.16);
  --panel-glow: rgba(0, 0, 0, 0);
  position: relative;
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  border-radius: var(--hud-radius);
  border: 1px solid var(--panel-tint);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015) 30%, rgba(0, 0, 0, 0.06)),
    rgba(14, 12, 20, 0.55);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 24px 48px -18px rgba(0, 0, 0, 0.65),
    0 0 36px -6px var(--panel-glow);
}

html[data-product="portal"] .hud-panel--arc {
  --panel-tint: rgba(51, 198, 255, 0.32);
  --panel-glow: rgba(51, 198, 255, 0.16);
}

html[data-product="portal"] .hud-panel--ember {
  --panel-tint: rgba(255, 90, 54, 0.32);
  --panel-glow: rgba(255, 90, 54, 0.15);
}

html[data-product="portal"] .hud-panel--gold {
  --panel-tint: rgba(224, 179, 97, 0.36);
  --panel-glow: rgba(224, 179, 97, 0.16);
}

/* Наследие v1: скобки-декор упразднены, класс остался в разметке безвредным. */
html[data-product="portal"] .hud-corners {}

html[data-product="portal"] .hud-panel-kicker {
  margin: 0 0 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

html[data-product="portal"] .hud-panel-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--hud-line), transparent);
}

/* --------------------------------------------------------------------------
   Кнопки — язык cta лендинга: градиент, свип, глоу.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-btn {
  --btn-fill: linear-gradient(180deg, #85d2ff 0%, #298fe2 100%);
  --btn-ink: #051522;
  --btn-ring: rgba(111, 196, 255, 0.62);
  --btn-glow: rgba(47, 168, 255, 0.42);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.8rem;
  padding: 0 1.4rem;
  border: 1px solid var(--btn-ring);
  border-radius: var(--hud-radius-sm);
  background: var(--btn-fill);
  color: var(--btn-ink);
  font-family: var(--font-beaufort), "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 22px var(--btn-glow);
  transition:
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 240ms ease,
    border-color 240ms ease;
}

html[data-product="portal"] .hud-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.72) 47%, transparent 76%);
  transform: translateX(-125%);
  opacity: 0;
}

html[data-product="portal"] .hud-btn:hover,
html[data-product="portal"] .hud-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--btn-ring) 55%, transparent),
    0 0 30px var(--btn-glow),
    0 10px 24px rgba(0, 0, 0, 0.34);
}

html[data-product="portal"] .hud-btn:hover::before,
html[data-product="portal"] .hud-btn:focus-visible::before {
  opacity: 0.95;
  animation: portal-hud-sweep 780ms cubic-bezier(0.22, 1, 0.36, 1) 1;
}

html[data-product="portal"] .hud-btn:active {
  transform: translateY(0) scale(0.99);
}

html[data-product="portal"] .hud-btn:disabled {
  cursor: wait;
  opacity: 0.78;
  transform: none;
}

html[data-product="portal"] .hud-btn:disabled::before {
  display: none;
}

html[data-product="portal"] .hud-btn--ember {
  --btn-fill: linear-gradient(180deg, #ffa079 0%, #e04a20 100%);
  --btn-ink: #230a04;
  --btn-ring: rgba(255, 140, 100, 0.6);
  --btn-glow: rgba(255, 90, 54, 0.4);
}

html[data-product="portal"] .hud-btn--gold {
  --btn-fill: linear-gradient(180deg, #f4d492 0%, #c3963e 100%);
  --btn-ink: #241705;
  --btn-ring: rgba(240, 210, 150, 0.6);
  --btn-glow: rgba(224, 179, 97, 0.4);
}

html[data-product="portal"] .hud-btn--ghost {
  --btn-fill: rgba(238, 227, 207, 0.07);
  --btn-ink: var(--parchment);
  --btn-ring: rgba(238, 227, 207, 0.3);
  --btn-glow: rgba(0, 0, 0, 0);
}

/* Компакт для шапки: стеклянный, arc-контур. */
html[data-product="portal"] .hud-btn--arcghost {
  --btn-fill: linear-gradient(180deg, rgba(51, 198, 255, 0.14), rgba(51, 198, 255, 0.05));
  --btn-ink: #a8e2ff;
  --btn-ring: rgba(51, 198, 255, 0.45);
  --btn-glow: rgba(51, 198, 255, 0.14);
  min-height: var(--u-hit-area);
  padding: 0 1.1rem;
  text-shadow: 0 0 10px rgba(51, 198, 255, 0.4);
}

/* --------------------------------------------------------------------------
   Поля форм — email-input лендинга, акцент фракции через --field-accent.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-field {
  position: relative;
}

html[data-product="portal"] .hud-input {
  width: 100%;
  height: 2.95rem;
  border-radius: var(--hud-radius-sm);
  border: 1px solid var(--hud-line);
  background: rgba(0, 0, 0, 0.34);
  color: var(--parchment);
  padding-inline: 1rem;
  outline: none;
  font-family: var(--font-beaufort), "Segoe UI", sans-serif;
  font-size: 0.92rem;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

html[data-product="portal"] .hud-input::placeholder {
  color: var(--parchment-faint);
}

html[data-product="portal"] .hud-input:focus {
  border-color: var(--field-accent, var(--arc));
  background: rgba(2, 4, 10, 0.55);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--field-accent, var(--arc)) 25%, transparent),
    0 0 20px color-mix(in srgb, var(--field-accent, var(--arc)) 18%, transparent);
}

html[data-product="portal"] .hud-field.is-valid .hud-input {
  border-color: rgba(116, 240, 167, 0.55);
}

html[data-product="portal"] .hud-field.is-invalid .hud-input {
  border-color: rgba(255, 90, 54, 0.65);
}

html[data-product="portal"] select.hud-input {
  appearance: none;
  cursor: pointer;
}

html[data-product="portal"] .hud-input option {
  background: var(--iron);
  color: var(--parchment);
}

html[data-product="portal"] input[type="number"].hud-input::-webkit-outer-spin-button,
html[data-product="portal"] input[type="number"].hud-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

html[data-product="portal"] .hud-form-message {
  min-height: 1.05rem;
  font-size: 0.76rem;
  color: var(--parchment-faint);
  opacity: 0;
  transform: translateY(-0.15rem);
  transition: opacity 180ms ease, transform 180ms ease;
}

html[data-product="portal"] .hud-form-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

html[data-product="portal"] .hud-form-message.is-error { color: #ff9d86; }
html[data-product="portal"] .hud-form-message.is-success { color: #9de6b2; }

/* --------------------------------------------------------------------------
   Плитки статов.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem;
}

html[data-product="portal"] .hud-tile {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 240ms ease;
}

html[data-product="portal"] .hud-tile:hover {
  transform: translateY(-3px);
}

html[data-product="portal"] .hud-tile-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment-faint);
}

html[data-product="portal"] .hud-tile-value {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--parchment);
  overflow-wrap: anywhere;
}

html[data-product="portal"] .hud-tile-value small {
  font-size: 0.58em;
  font-weight: 500;
  color: var(--parchment-dim);
}

html[data-product="portal"] .hud-tile--gold .hud-tile-value {
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(224, 179, 97, 0.45);
}

html[data-product="portal"] .hud-tile--arc .hud-tile-value {
  color: #9adeff;
  text-shadow: 0 0 18px rgba(51, 198, 255, 0.4);
}

/* --------------------------------------------------------------------------
   Таблицы.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-table-wrap {
  overflow-x: auto;
  /* Если после упрощения колонок таблица всё равно не влезает — она листается
     вбок, и полоса прокрутки должна быть видна, иначе обрез читается как
     поломка. */
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 198, 255, 0.35) transparent;
  padding-bottom: 0.2rem;
  /* Меряем МЕСТО ПОД ТАБЛИЦУ, а не окно: в кабинете сайдбар съедает ширину,
     и брейкпоинты по вьюпорту врали бы. */
  container-type: inline-size;
  container-name: hudtable;
}

/* Прогрессивное упрощение: сначала уходит то, что можно понять по иконке,
   потом второстепенные числа, последней — гильдия. Ранг, класс-иконка,
   ник и уровень остаются всегда: без них таблица перестаёт быть рейтингом. */
@container hudtable (max-width: 62rem) {
  html[data-product="portal"] .hud-class-name {
    display: none;
  }

  html[data-product="portal"] .hud-class-cell {
    justify-content: center;
  }
}

@container hudtable (max-width: 52rem) {
  html[data-product="portal"] .hud-table .col-hp,
  html[data-product="portal"] .hud-table .col-mp {
    display: none;
  }
}

@container hudtable (max-width: 42rem) {
  html[data-product="portal"] .hud-table .col-kills,
  html[data-product="portal"] .hud-table .col-status {
    display: none;
  }
}

@container hudtable (max-width: 32rem) {
  html[data-product="portal"] .hud-table .col-guild {
    display: none;
  }
}

html[data-product="portal"] .hud-table-wrap::-webkit-scrollbar {
  height: 6px;
}

html[data-product="portal"] .hud-table-wrap::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(51, 198, 255, 0.35);
}

html[data-product="portal"] .hud-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

html[data-product="portal"] .hud-table th {
  padding: 0.55rem 0.8rem;
  text-align: left;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment-faint);
  border-bottom: 1px solid var(--hud-line);
  white-space: nowrap;
}

html[data-product="portal"] .hud-table td {
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid rgba(238, 227, 207, 0.06);
  color: var(--parchment);
  white-space: nowrap;
}

html[data-product="portal"] .hud-table tbody tr {
  transition: background-color 160ms ease;
}

html[data-product="portal"] .hud-table tbody tr:hover {
  background: linear-gradient(90deg, rgba(51, 198, 255, 0.08), transparent 70%);
}

html[data-product="portal"] .hud-table tr.is-top {
  background: linear-gradient(90deg, rgba(224, 179, 97, 0.12), rgba(224, 179, 97, 0.03) 46%, transparent 78%);
}

html[data-product="portal"] .hud-num {
  font-variant-numeric: tabular-nums;
}

html[data-product="portal"] .hud-rank {
  color: var(--parchment-faint);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
}

html[data-product="portal"] .hud-nick {
  font-weight: 800;
  letter-spacing: 0.03em;
}

html[data-product="portal"] .hud-class-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

html[data-product="portal"] .hud-class-icon {
  width: 1.7rem;
  height: 1.7rem;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--class-accent, var(--hud-line));
  box-shadow: 0 0 10px color-mix(in srgb, var(--class-accent, transparent) 40%, transparent);
  flex-shrink: 0;
}

html[data-product="portal"] .hud-dot {
  display: inline-block;
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: 0.04em;
  background: #74f0a7;
  box-shadow: 0 0 8px rgba(116, 240, 167, 0.7);
  animation: portal-hud-pulse 2.2s ease-in-out infinite;
}

html[data-product="portal"] .hud-dot--off {
  background: var(--parchment-faint);
  box-shadow: none;
  animation: none;
}

html[data-product="portal"] .hud-status-off {
  color: var(--parchment-faint);
}

/* --------------------------------------------------------------------------
   Табы-фильтры: пилюли с точкой в цвете класса.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

html[data-product="portal"] .hud-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.46rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--hud-line-faint);
  background: rgba(238, 227, 207, 0.05);
  color: var(--parchment-dim);
  text-decoration: none;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition:
    color 160ms ease, background-color 160ms ease,
    border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

html[data-product="portal"] .hud-tab::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--tab-accent, currentColor);
  box-shadow: 0 0 8px color-mix(in srgb, var(--tab-accent, #eee3cf) 60%, transparent);
  opacity: 0.9;
}

html[data-product="portal"] .hud-tab:hover,
html[data-product="portal"] .hud-tab:focus-visible {
  color: var(--parchment);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--tab-accent, #eee3cf) 45%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--tab-accent, #eee3cf) 20%, transparent);
}

html[data-product="portal"] .hud-tab.is-active {
  color: var(--void);
  background: var(--tab-accent, var(--parchment));
  border-color: transparent;
  box-shadow: 0 0 18px color-mix(in srgb, var(--tab-accent, #eee3cf) 45%, transparent);
}

html[data-product="portal"] .hud-tab.is-active::before {
  background: var(--void);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Подиум топ-3: стеклянное золото, чемпион в центре.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-podium {
  display: grid;
  gap: 0.9rem;
}

html[data-product="portal"] .hud-podium-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 0.4rem;
  text-align: center;
  padding: 1.3rem 1rem 1.2rem;
  /* Иначе колонка подиума растягивается по самому длинному нику или гильдии
     и третья карточка уезжает за правый край. */
  min-width: 0;
}

html[data-product="portal"] .hud-podium-nick,
html[data-product="portal"] .hud-podium-guild {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (min-width: 760px) {
  html[data-product="portal"] .hud-podium {
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
  }

  html[data-product="portal"] .hud-podium-card:nth-child(1) { order: 2; }
  html[data-product="portal"] .hud-podium-card:nth-child(2) { order: 1; }
  html[data-product="portal"] .hud-podium-card:nth-child(3) { order: 3; }

  html[data-product="portal"] .hud-podium-card.is-first {
    transform: translateY(-0.5rem);
  }
}

html[data-product="portal"] .hud-podium-card.is-first {
  --panel-tint: rgba(244, 212, 146, 0.55);
  --panel-glow: rgba(224, 179, 97, 0.26);
}

html[data-product="portal"] .hud-podium-rank {
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  color: var(--gold-bright);
  text-shadow: 0 0 14px rgba(224, 179, 97, 0.6);
}

html[data-product="portal"] .hud-podium-card .hud-class-icon {
  width: 3.1rem;
  height: 3.1rem;
  margin-block: 0.2rem;
}

html[data-product="portal"] .hud-podium-card.is-first .hud-class-icon {
  width: 3.8rem;
  height: 3.8rem;
}

html[data-product="portal"] .hud-podium-nick {
  font-size: 1.14rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

html[data-product="portal"] .hud-podium-card.is-first .hud-podium-nick {
  font-size: 1.3rem;
}

html[data-product="portal"] .hud-podium-guild {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--parchment-faint);
}

html[data-product="portal"] .hud-podium-level {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--gold-bright);
  text-shadow: 0 0 16px rgba(224, 179, 97, 0.4);
}

html[data-product="portal"] .hud-podium-level small {
  font-size: 0.56em;
  font-weight: 500;
  color: var(--parchment-dim);
  text-shadow: none;
}

/* --------------------------------------------------------------------------
   Бар-чарты статистики.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-bars {
  display: grid;
  gap: 0.55rem;
}

html[data-product="portal"] .hud-bar-row {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) 1fr auto;
  align-items: center;
  gap: 0.8rem;
}

html[data-product="portal"] .hud-bar-name {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-product="portal"] .hud-bar-name--sub {
  font-weight: 400;
  color: var(--parchment-dim);
  padding-left: 2.2rem;
  font-size: 0.8rem;
}

html[data-product="portal"] .hud-bar-track {
  position: relative;
  height: 0.56rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px var(--hud-line-faint);
}

html[data-product="portal"] .hud-bar-fill {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: calc(var(--w) * 1%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bar-accent, var(--arc)) 45%, transparent),
    var(--bar-accent, var(--arc)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--bar-accent, var(--arc)) 50%, transparent);
  transform-origin: left center;
  animation: portal-hud-grow 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html[data-product="portal"] .hud-bar-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.84rem;
  color: var(--parchment);
  min-width: 3.2rem;
  text-align: right;
}

html[data-product="portal"] .hud-bar-value small {
  color: var(--parchment-faint);
  font-weight: 400;
  font-size: 0.82em;
}

/* --------------------------------------------------------------------------
   Кабинет: стеклянная консоль с боковой навигацией.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-console {
  position: relative; /* точка отсчёта для .hud-console-lang в правом верхнем углу */
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  width: min(100%, 82rem);
  margin-inline: auto;
  padding: clamp(2rem, 5vh, 3rem) clamp(1rem, 3.4vw, 2.2rem);
  align-items: start;
}

@media (min-width: 900px) {
  html[data-product="portal"] .hud-console {
    grid-template-columns: 15.5rem 1fr;
  }
}

html[data-product="portal"] .hud-side {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  position: sticky;
  top: 2rem;
}

/* Переключатель языка в правом верхнем углу консоли. Позиционируем абсолютно, а не
   строкой в разметке: в потоке он сдвинул бы вниз заголовок раздела, а места справа от
   заголовка и так пусто. Отступы повторяют padding .hud-console, чтобы он встал ровно
   в угол панелей, а не над ними. */
html[data-product="portal"] .hud-console-lang {
  position: absolute;
  top: clamp(2rem, 5vh, 3rem);
  right: clamp(1rem, 3.4vw, 2.2rem);
  z-index: 20;
}

/* Базовый .social-dot — 3.1rem, это размер иконок соцсетей на лендинге. В кабинете флаг
   должен быть той же высоты, что кнопка рядом (2.4rem), иначе ряд «Главная» + флаг едет. */
html[data-product="portal"] .hud-console-lang .social-dot,
html[data-product="portal"] .hud-side-lang .social-dot {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--hud-radius-sm);
}

html[data-product="portal"] .hud-side-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
}

html[data-product="portal"] .hud-side-home {
  flex: 1;
  min-width: 0;
}

/* На широком экране флаг живёт в углу консоли, поэтому внутрипанельный экземпляр скрыт.
   На узком — наоборот: угол консоли там занимает сама панель, а отдельная строка ради
   одного флага съедала бы экран впустую, так что он встаёт в ряд с кнопкой «Главная». */
html[data-product="portal"] .hud-side-lang {
  display: none;
}

@media (max-width: 899px) {
  html[data-product="portal"] .hud-console-lang {
    display: none;
  }

  html[data-product="portal"] .hud-side-lang {
    display: block;
  }
}

html[data-product="portal"] .hud-side-title {
  margin: 0 0 0.7rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parchment-faint);
}

html[data-product="portal"] .hud-side-link {
  position: relative;
  display: block;
  padding: 0.58rem 0.8rem;
  border-radius: var(--hud-radius-sm);
  color: var(--parchment-dim);
  text-decoration: none;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  transition: color 160ms ease, background-color 160ms ease;
}

html[data-product="portal"] button.hud-side-link {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

html[data-product="portal"] .hud-side-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  height: 55%;
  width: 3px;
  border-radius: 3px;
  background: var(--arc);
  box-shadow: 0 0 10px rgba(51, 198, 255, 0.6);
  transform: translateY(-50%) scaleY(0);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-product="portal"] .hud-side-link:hover,
html[data-product="portal"] .hud-side-link:focus-visible {
  color: var(--parchment);
  background: linear-gradient(90deg, rgba(51, 198, 255, 0.09), transparent 70%);
}

html[data-product="portal"] .hud-side-link.is-active {
  color: var(--parchment);
  background: linear-gradient(90deg, rgba(51, 198, 255, 0.13), transparent 70%);
}

html[data-product="portal"] .hud-side-link.is-active::before,
html[data-product="portal"] .hud-side-link:hover::before {
  transform: translateY(-50%) scaleY(1);
}

html[data-product="portal"] .hud-side-user {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hud-line-faint);
  display: grid;
  gap: 0.55rem;
}

/* Значение под «глазиком» — логин и почта в «Обзоре». */
html[data-product="portal"] .hud-masked {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

html[data-product="portal"] .hud-masked-value {
  overflow-wrap: anywhere;
}

html[data-product="portal"] .hud-masked-value.is-hidden {
  letter-spacing: 0.16em;
  color: var(--parchment-faint);
}

html[data-product="portal"] .hud-masked-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid var(--hud-line-faint);
  border-radius: var(--hud-radius-sm);
  background: rgba(238, 227, 207, 0.05);
  color: var(--parchment-dim);
  cursor: pointer;
  transition:
    color 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

html[data-product="portal"] .hud-masked-toggle:hover,
html[data-product="portal"] .hud-masked-toggle:focus-visible {
  color: var(--arc);
  border-color: rgba(51, 198, 255, 0.45);
  background: rgba(51, 198, 255, 0.08);
}

html[data-product="portal"] .hud-masked-toggle svg {
  width: 1.05rem;
  height: 1.05rem;
}

html[data-product="portal"] .hud-main {
  display: grid;
  gap: 1.3rem;
  align-content: start;
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Авторизация: две нейтральные стеклянные карточки (вход / регистрация).
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-auth-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  align-items: stretch;
}

@media (min-width: 940px) {
  html[data-product="portal"] .hud-auth-grid {
    grid-template-columns: 1fr 1fr;
  }
}

html[data-product="portal"] .hud-auth-card {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.4rem, 2.8vw, 2.2rem);
}

html[data-product="portal"] .hud-auth-card form {
  display: grid;
  gap: 0.7rem;
}

html[data-product="portal"] .hud-auth-title {
  margin: 0;
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-product="portal"] .hud-auth-note {
  margin: -0.55rem 0 0;
  color: var(--parchment-dim);
  font-size: 0.88rem;
  line-height: 1.55;
}

html[data-product="portal"] .hud-auth-link {
  color: var(--parchment-dim);
  font-size: 0.84rem;
  text-align: center;
}

html[data-product="portal"] .hud-auth-link a {
  color: #7fd2f8;
  text-decoration: none;
}

html[data-product="portal"] .hud-auth-link a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   «Онлайн сейчас» в герое: пульс + число + спарклайн недели.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-online {
  position: relative;
  z-index: 2;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.8rem);
  margin: clamp(1.1rem, 2.6vh, 1.8rem) auto 0;
  padding: 0.7rem clamp(1rem, 2.2vw, 1.4rem);
  /* Скругление как у кнопок героя (.cta-primary), а не пилюлей. */
  border-radius: var(--radius-main);
  border: 1px solid rgba(51, 198, 255, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01)),
    rgba(6, 10, 16, 0.55);
  backdrop-filter: blur(12px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 34px -8px rgba(51, 198, 255, 0.5);
}

html[data-product="portal"] .hud-online-main {
  display: grid;
  gap: 0.1rem;
  text-align: left;
}

html[data-product="portal"] .hud-online-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(238, 227, 207, 0.66);
  white-space: nowrap;
}

/* Пульс «в эфире»: точка с расходящимся кольцом. */
html[data-product="portal"] .hud-online-pulse {
  position: relative;
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  background: #74f0a7;
  box-shadow: 0 0 10px rgba(116, 240, 167, 0.9);
}

html[data-product="portal"] .hud-online-pulse::after {
  content: "";
  position: absolute;
  inset: -0.22rem;
  border-radius: 50%;
  border: 1px solid rgba(116, 240, 167, 0.8);
  animation: portal-hud-online-ping 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes portal-hud-online-ping {
  0% { transform: scale(0.5); opacity: 0.9; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

html[data-product="portal"] .hud-online-value {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #eaf7ff;
  text-shadow: 0 0 18px rgba(51, 198, 255, 0.45);
}

html[data-product="portal"] .hud-online-chart {
  display: grid;
  gap: 0.25rem;
  justify-items: end;
}

/* Слева график растворяется: «неделю назад» проявляется постепенно,
   а не обрывается вертикальной линией. */
html[data-product="portal"] .hud-online-chart svg {
  width: clamp(6rem, 14vw, 8.5rem);
  height: 2.1rem;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(51, 198, 255, 0.4));
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 22%, #000 55%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.45) 22%, #000 55%);
}

html[data-product="portal"] .hud-online-peak {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(238, 227, 207, 0.5);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  html[data-product="portal"] .hud-online {
    border-radius: var(--hud-radius);
    grid-auto-flow: row;
    justify-items: center;
    gap: 0.5rem;
  }

  html[data-product="portal"] .hud-online-main {
    justify-items: center;
    text-align: center;
  }

  html[data-product="portal"] .hud-online-chart {
    justify-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-product="portal"] .hud-online-pulse::after {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Новости на лендинге: главная карточка + колонка коротких.
   Цвет тега — язык «Хроники мира»: update=arc, event=gold, server=ember.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .news-panel {
  width: min(calc(100% - var(--rail-safe)), 74rem);
}

html[data-product="portal"] .hud-news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 0.4rem;
}

@media (min-width: 900px) {
  html[data-product="portal"] .hud-news-grid {
    grid-template-columns: 1.25fr 1fr;
    align-items: stretch;
  }
}

html[data-product="portal"] .hud-news-stack {
  display: grid;
  gap: 0.9rem;
  align-content: stretch;
}

html[data-product="portal"] .hud-news-card {
  --ev: var(--arc);
  position: relative;
  display: grid;
  align-content: end;
  overflow: hidden;
  border-radius: var(--hud-radius);
  border: 1px solid color-mix(in srgb, var(--ev) 20%, rgba(255, 255, 255, 0.08));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01) 40%),
    color-mix(in srgb, var(--ev) 4%, rgba(10, 9, 15, 0.6));
  color: inherit;
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

html[data-product="portal"] .hud-news-card-body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.45rem;
  align-content: end;
  padding: 1rem 1.15rem;
}

html[data-product="portal"] .hud-news-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ev) 45%, rgba(255, 255, 255, 0.1));
  box-shadow: 0 0 26px color-mix(in srgb, var(--ev) 18%, transparent);
}

html[data-product="portal"] .hud-news-card[data-kind="event"] { --ev: var(--gold); }
html[data-product="portal"] .hud-news-card[data-kind="server"] { --ev: var(--ember); }

/* Обложка: картинка на всю карточку под градиентом — текст всегда читаем. */
html[data-product="portal"] .hud-news-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-product="portal"] .hud-news-card:hover .hud-news-cover {
  transform: scale(1.04);
}

html[data-product="portal"] .hud-news-card:has(.hud-news-cover)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(8, 7, 12, 0.2) 0%, rgba(8, 7, 12, 0.72) 46%, rgba(8, 7, 12, 0.95) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--ev) 16%, transparent), transparent 60%);
}

html[data-product="portal"] .hud-news-card--featured {
  min-height: clamp(20rem, 34vw, 26rem);
}

html[data-product="portal"] .hud-news-card--featured .hud-news-card-body {
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
}

html[data-product="portal"] .hud-news-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

html[data-product="portal"] .hud-news-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.24rem 0.62rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ev) 40%, transparent);
  background: color-mix(in srgb, var(--ev) 12%, transparent);
  color: color-mix(in srgb, var(--ev) 75%, #ffffff);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[data-product="portal"] .hud-news-tag::before {
  content: "";
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--ev);
  box-shadow: 0 0 8px color-mix(in srgb, var(--ev) 80%, transparent);
}

html[data-product="portal"] .hud-news-date {
  color: var(--parchment-faint);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

html[data-product="portal"] .hud-news-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.25;
}

html[data-product="portal"] .hud-news-card--featured .hud-news-title {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}

html[data-product="portal"] .hud-news-text {
  margin: 0;
  color: var(--parchment-dim);
  font-size: 0.88rem;
  line-height: 1.6;
}

html[data-product="portal"] .hud-news-card--featured .hud-news-text {
  font-size: 0.95rem;
}

html[data-product="portal"] .hud-news-more {
  justify-self: start;
  margin-top: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: color-mix(in srgb, var(--ev) 70%, #ffffff);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: text-shadow 180ms ease, gap 180ms ease;
}

html[data-product="portal"] .hud-news-more:hover,
html[data-product="portal"] .hud-news-more:focus-visible {
  text-shadow: 0 0 12px color-mix(in srgb, var(--ev) 60%, transparent);
  gap: 0.55rem;
}

html[data-product="portal"] .hud-news-all {
  width: fit-content;
  margin: 1rem 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--parchment-dim);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 180ms ease, gap 180ms ease;
}

html[data-product="portal"] .hud-news-all:hover,
html[data-product="portal"] .hud-news-all:focus-visible {
  color: var(--parchment);
  gap: 0.6rem;
}

/* --------------------------------------------------------------------------
   Страница /news: список анонсов с обложками.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-news-feed {
  display: grid;
  gap: 1rem;
  max-width: 56rem;
}

html[data-product="portal"] .hud-news-row {
  --ev: var(--arc);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  /* Без inset-блика .hud-panel: обложка лежит вплотную к рамке и перекрывает
     его, из-за чего рамка выглядит то в 1px (над картинкой), то в 2px. */
  box-shadow:
    0 24px 48px -18px rgba(0, 0, 0, 0.65),
    0 0 36px -6px var(--panel-glow);
}

@media (min-width: 720px) {
  html[data-product="portal"] .hud-news-row {
    grid-template-columns: 17rem 1fr;
    gap: 0;
  }
}

html[data-product="portal"] .hud-news-row[data-kind="event"] { --ev: var(--gold); }
html[data-product="portal"] .hud-news-row[data-kind="server"] { --ev: var(--ember); }

/* Высоту ряда задаёт текст: обложка тянется по нему, а не наоборот
   (иначе вертикальные арты классов растягивают карточку на пол-экрана).
   Скругление своё, а не от родителя: backdrop-filter на .hud-panel ломает
   обрезку вложенных элементов по border-radius, и угол картинки вылезал. */
html[data-product="portal"] .hud-news-row-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--hud-radius) - 1px) calc(var(--hud-radius) - 1px) 0 0;
}

@media (min-width: 720px) {
  html[data-product="portal"] .hud-news-row-media {
    aspect-ratio: auto;
    height: 100%;
    min-height: 10.5rem;
    border-radius: calc(var(--hud-radius) - 1px) 0 0 calc(var(--hud-radius) - 1px);
  }
}

html[data-product="portal"] .hud-news-row-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-product="portal"] .hud-news-row:hover .hud-news-row-media img {
  transform: scale(1.04);
}

html[data-product="portal"] .hud-news-row-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 40%, rgba(14, 12, 20, 0.85) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--ev) 14%, transparent), transparent 70%);
}

/* Без обложки — цветной градиент по типу новости, чтобы ряд не «проваливался». */
html[data-product="portal"] .hud-news-row-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 30% 30%, color-mix(in srgb, var(--ev) 30%, transparent), transparent 70%),
    linear-gradient(160deg, rgba(24, 21, 31, 0.9), rgba(12, 10, 17, 0.95));
}

html[data-product="portal"] .hud-news-row-copy {
  display: grid;
  gap: 0.5rem;
  align-content: center;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
}

html[data-product="portal"] .hud-news-row .hud-news-title {
  font-size: 1.2rem;
}

html[data-product="portal"] .hud-news-row .hud-news-title a {
  color: inherit;
  text-decoration: none;
}

html[data-product="portal"] .hud-news-row .hud-news-title a:hover {
  color: color-mix(in srgb, var(--ev) 60%, #ffffff);
}

/* --------------------------------------------------------------------------
   Страница статьи /news/<slug> — читательская колонка, как гайды Wiki.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-article {
  --ev: var(--arc);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  width: min(100%, 52rem);
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
}

/* Markdown media has an intrinsic width. Every grid item in the reader chain must be
   allowed to shrink, otherwise one wide source image expands the entire article track. */
html[data-product="portal"] .hud-article > *,
html[data-product="portal"] .hud-article-head,
html[data-product="portal"] .hud-article-body,
html[data-product="portal"] .hud-article-body > *,
html[data-product="portal"] .hud-article-figure {
  min-width: 0;
  max-width: 100%;
}

html[data-product="portal"] .hud-article[data-kind="event"] { --ev: var(--gold); }
html[data-product="portal"] .hud-article[data-kind="server"] { --ev: var(--ember); }

html[data-product="portal"] .hud-article-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--parchment-dim);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 180ms ease, gap 180ms ease;
}

html[data-product="portal"] .hud-article-back:hover,
html[data-product="portal"] .hud-article-back:focus-visible {
  color: var(--parchment);
  gap: 0.6rem;
}

html[data-product="portal"] .hud-article-cover {
  position: relative;
  border-radius: var(--hud-radius);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ev) 22%, rgba(255, 255, 255, 0.08));
  aspect-ratio: 21 / 9;
}

html[data-product="portal"] .hud-article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-product="portal"] .hud-article-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8, 7, 12, 0.15), rgba(8, 7, 12, 0.7)),
    linear-gradient(90deg, color-mix(in srgb, var(--ev) 14%, transparent), transparent 65%);
}

html[data-product="portal"] .hud-article-head {
  display: grid;
  gap: 0.6rem;
}

html[data-product="portal"] .hud-article-lead {
  margin: 0;
  color: var(--parchment-dim);
  font-size: 1.02rem;
  line-height: 1.65;
}

html[data-product="portal"] .hud-article-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

html[data-product="portal"] .hud-article-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(238, 227, 207, 0.88);
}

html[data-product="portal"] .hud-article-heading {
  margin: 0.4rem 0 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ev) 55%, #ffffff);
}

html[data-product="portal"] .hud-article-list {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.45rem;
  list-style: disc;
  color: rgba(238, 227, 207, 0.88);
  line-height: 1.65;
}

html[data-product="portal"] .hud-article-list li::marker {
  color: var(--ev);
}

html[data-product="portal"] .hud-article-quote {
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-left: 3px solid var(--ev);
  border-radius: 0 var(--hud-radius-sm) var(--hud-radius-sm) 0;
  background: color-mix(in srgb, var(--ev) 7%, rgba(0, 0, 0, 0.25));
  color: var(--parchment);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.6;
}

html[data-product="portal"] .hud-article-figure {
  margin: 0;
  display: grid;
  gap: 0.5rem;
}

html[data-product="portal"] .hud-article-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--hud-radius-sm);
  border: 1px solid var(--hud-line-faint);
}

html[data-product="portal"] .hud-article-body video,
html[data-product="portal"] .hud-article-body iframe,
html[data-product="portal"] .hud-article-body svg {
  display: block;
  max-width: 100%;
}

html[data-product="portal"] .hud-article-figure figcaption {
  color: var(--parchment-faint);
  font-size: 0.8rem;
  text-align: center;
}

html[data-product="portal"] .hud-article-untranslated {
  margin: 0;
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--hud-line-faint);
  color: var(--parchment-faint);
  font-size: 0.86rem;
}

/* Элементы, которых у прежних типизированных блоков не было, а в markdown редактор их
   напишет: нумерованный список, ссылка, код, таблица (remark-gfm). */
html[data-product="portal"] ol.hud-article-list {
  list-style: decimal;
}

html[data-product="portal"] .hud-article-body a {
  color: var(--ev);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

html[data-product="portal"] .hud-article-body a:hover {
  color: color-mix(in srgb, var(--ev) 60%, #ffffff);
}

html[data-product="portal"] .hud-article-body code {
  padding: 0.1em 0.35em;
  border-radius: var(--hud-radius-sm);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--hud-line-faint);
  font-size: 0.9em;
}

html[data-product="portal"] .hud-article-body pre {
  margin: 0;
  padding: 0.85rem 1.1rem;
  border-radius: var(--hud-radius-sm);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--hud-line-faint);
  overflow-x: auto;
}

html[data-product="portal"] .hud-article-body pre code {
  padding: 0;
  border: 0;
  background: none;
}

/* Таблица шире колонки не должна распирать страницу — прокручивается внутри себя. */
html[data-product="portal"] .hud-article-tablewrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

html[data-product="portal"] .hud-article-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

html[data-product="portal"] .hud-article-table th,
html[data-product="portal"] .hud-article-table td {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--hud-line-faint);
  text-align: left;
}

html[data-product="portal"] .hud-article-table th {
  color: var(--parchment);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

html[data-product="portal"] .hud-article-more {
  margin-top: 0.6rem;
}

html[data-product="portal"] .hud-article-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.8rem;
}

html[data-product="portal"] .hud-article-more-grid .hud-news-card {
  min-height: 0;
  align-content: start;
}

html[data-product="portal"] .hud-article-more-grid .hud-news-card-body {
  height: 100%;
  align-content: start;
}

html[data-product="portal"] .hud-article-more-grid .hud-news-title {
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Донат: платёжные системы — сетка кнопок-тумблеров (как в StockWeb).
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-providers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr));
  gap: 0.5rem;
}

html[data-product="portal"] .hud-provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--hud-line);
  border-radius: var(--hud-radius-sm);
  background: rgba(0, 0, 0, 0.3);
  color: var(--parchment-dim);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    color 160ms ease, border-color 160ms ease,
    background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

html[data-product="portal"] .hud-provider:hover,
html[data-product="portal"] .hud-provider:focus-visible {
  color: var(--parchment);
  border-color: rgba(224, 179, 97, 0.45);
  transform: translateY(-1px);
}

html[data-product="portal"] .hud-provider.is-active {
  color: var(--gold-bright);
  border-color: rgba(224, 179, 97, 0.7);
  background: rgba(224, 179, 97, 0.1);
  box-shadow:
    0 0 0 1px rgba(224, 179, 97, 0.25),
    0 0 18px rgba(224, 179, 97, 0.18);
}

/* --------------------------------------------------------------------------
   Появление контента и служебные анимации.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-enter {
  animation: portal-hud-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html[data-product="portal"] .hud-enter:nth-child(2) { animation-delay: 80ms; }
html[data-product="portal"] .hud-enter:nth-child(3) { animation-delay: 160ms; }
html[data-product="portal"] .hud-enter:nth-child(4) { animation-delay: 240ms; }
html[data-product="portal"] .hud-enter:nth-child(5) { animation-delay: 320ms; }
html[data-product="portal"] .hud-enter:nth-child(6) { animation-delay: 400ms; }

@keyframes portal-hud-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes portal-hud-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes portal-hud-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes portal-hud-sweep {
  0% { transform: translateX(-125%); }
  100% { transform: translateX(125%); }
}

@keyframes portal-hud-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Адаптив и доступность.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  html[data-product="portal"] .hud-burger {
    display: grid;
    place-items: center;
  }

  html[data-product="portal"] .hud-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.4rem clamp(1rem, 3.4vw, 2.2rem) 0.9rem;
    background: rgba(8, 7, 12, 0.96);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hud-line-faint);
  }

  html[data-product="portal"] .hud-nav.is-open {
    display: flex;
  }

  html[data-product="portal"] .hud-nav .hud-nav-link {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(238, 227, 207, 0.07);
  }

  html[data-product="portal"] .hud-nav .hud-nav-link:last-child {
    border-bottom: 0;
  }

  html[data-product="portal"] .hud-nav .hud-nav-link::after {
    display: none;
  }

  html[data-product="portal"] .hud-side {
    position: static;
  }
}

html[data-product="portal"] .hud-root a:focus-visible,
html[data-product="portal"] .hud-root button:focus-visible {
  outline: 1px solid var(--arc);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Разделы-окна: Вход, Скачать, Донат, Восстановление.
   Подложка не просто затемняет — она размывает страницу и живёт собственной
   aurora поверх размытия, поэтому окно выглядит парящим, а не наклеенным.
   -------------------------------------------------------------------------- */

html[data-product="portal"] .hud-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(0.7rem, 3vw, 2.4rem);
  overflow: hidden;
  background: radial-gradient(ellipse 110% 85% at 50% 45%,
    rgba(11, 9, 18, 0.34),
    rgba(4, 3, 8, 0.74) 78%);
  backdrop-filter: blur(26px) saturate(1.35) brightness(0.82);
  -webkit-backdrop-filter: blur(26px) saturate(1.35) brightness(0.82);
  animation: portal-hud-modal-veil 0.3s ease both;
}

/* Пятна Порядка и Хаоса — те же кривые, что у фона портала, но ярче: под
   размытием страницы они читаются как подсветка сцены. */
html[data-product="portal"] .hud-modal-backdrop::before,
html[data-product="portal"] .hud-modal-backdrop::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
}

html[data-product="portal"] .hud-modal-backdrop::before {
  width: 62vw;
  height: 58vh;
  top: -16vh;
  left: -12vw;
  background: radial-gradient(circle at 45% 50%,
    rgba(51, 198, 255, 0.34),
    rgba(82, 76, 190, 0.16) 55%,
    transparent 74%);
  animation: portal-hud-aurora-a 22s ease-in-out infinite alternate;
}

html[data-product="portal"] .hud-modal-backdrop::after {
  width: 58vw;
  height: 54vh;
  bottom: -18vh;
  right: -12vw;
  background: radial-gradient(circle at 55% 50%,
    rgba(255, 90, 54, 0.3),
    rgba(162, 55, 130, 0.14) 55%,
    transparent 74%);
  animation: portal-hud-aurora-b 26s ease-in-out infinite alternate;
}

@keyframes portal-hud-modal-veil {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes portal-hud-modal-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.972); }
  to { opacity: 1; transform: none; }
}

html[data-product="portal"] .hud-modal {
  position: relative;
  z-index: 1;
  width: min(100%, var(--modal-w, 34rem));
  max-height: min(88vh, 56rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  animation: portal-hud-modal-rise 0.44s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html[data-product="portal"] .hud-modal--narrow { --modal-w: 27rem; }
html[data-product="portal"] .hud-modal--mid { --modal-w: 42rem; }
html[data-product="portal"] .hud-modal--wide { --modal-w: 58rem; }

/* Световая нить по верхней кромке — «включённое» стекло. */
html[data-product="portal"] .hud-modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(51, 198, 255, 0.6), transparent);
  pointer-events: none;
}

html[data-product="portal"] .hud-panel--gold.hud-modal::before {
  background: linear-gradient(90deg, transparent, rgba(244, 212, 146, 0.6), transparent);
}

html[data-product="portal"] .hud-modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) clamp(1.1rem, 3vw, 2rem) clamp(0.9rem, 2vw, 1.2rem);
  border-bottom: 1px solid var(--hud-line-faint);
}

html[data-product="portal"] .hud-modal-headings {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

html[data-product="portal"] .hud-modal-title {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  /* Аварийный перенос: тайский и японский пишутся без пробелов, и без него
     титул уехал бы под кнопку закрытия. Срабатывает, только если слово
     не помещается в строку целиком. */
  overflow-wrap: break-word;
}

/* В узком окне кегль меньше: «ВОССТАНОВЛЕНИЕ ПАРОЛЯ» должно вставать
   по словам, а не рваться посередине слова. */
html[data-product="portal"] .hud-modal--narrow .hud-modal-title {
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
}

html[data-product="portal"] .hud-modal-note {
  margin: 0.15rem 0 0;
  color: var(--parchment-dim);
  font-size: 0.86rem;
  line-height: 1.55;
}

html[data-product="portal"] .hud-modal-close {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--hud-line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--parchment-dim);
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease,
    border-color 200ms ease, box-shadow 240ms ease;
}

html[data-product="portal"] .hud-modal-close:hover,
html[data-product="portal"] .hud-modal-close:focus-visible {
  color: var(--parchment);
  border-color: rgba(51, 198, 255, 0.5);
  box-shadow: 0 0 20px -4px rgba(51, 198, 255, 0.55);
  transform: rotate(90deg);
}

html[data-product="portal"] .hud-modal-body {
  padding: clamp(1.1rem, 2.6vw, 1.7rem) clamp(1.1rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

html[data-product="portal"] .hud-modal-body::-webkit-scrollbar {
  width: 8px;
}

html[data-product="portal"] .hud-modal-body::-webkit-scrollbar-thumb {
  border-radius: 99px;
  background: rgba(238, 227, 207, 0.16);
}

/* Две колонки внутри окна разделены не рамкой панели, а тонкой нитью:
   вложенное стекло в стекле выглядело бы грязно. */
html[data-product="portal"] .hud-modal-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.3rem, 2.6vw, 2.2rem);
}

html[data-product="portal"] .hud-modal-rule {
  display: none;
  background: linear-gradient(180deg,
    transparent,
    rgba(238, 227, 207, 0.28) 30%,
    rgba(238, 227, 207, 0.28) 70%,
    transparent);
}

@media (min-width: 860px) {
  html[data-product="portal"] .hud-modal-cols {
    grid-template-columns: 1fr 1px 1fr;
    align-items: start;
  }

  html[data-product="portal"] .hud-modal-rule {
    display: block;
    align-self: stretch;
  }
}

html[data-product="portal"] .hud-modal-col,
html[data-product="portal"] .hud-donate-form {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  min-width: 0;
}

html[data-product="portal"] .hud-modal-col form {
  display: grid;
  gap: 0.7rem;
}

html[data-product="portal"] .hud-donate-form {
  --field-accent: var(--gold);
  --field-glow: rgba(224, 179, 97, 0.16);
  gap: 0.75rem;
}

/* Быстрые суммы — ровный ряд, а не переносящиеся пилюли. */
html[data-product="portal"] .hud-donate-form .hud-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4rem;
}

html[data-product="portal"] .hud-donate-form .hud-tab {
  padding-inline: 0.4rem;
  justify-content: center;
}

/* Текстовая кнопка-ссылка («Забыли пароль?», «Назад ко входу»). */
html[data-product="portal"] .hud-linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.84rem;
  color: #7fd2f8;
  cursor: pointer;
  justify-self: center;
  transition: color 200ms ease, text-shadow 200ms ease;
}

html[data-product="portal"] .hud-linkbtn:hover,
html[data-product="portal"] .hud-linkbtn:focus-visible {
  color: #b6e6ff;
  text-shadow: 0 0 14px rgba(51, 198, 255, 0.5);
}

/* Варианты загрузки клиента. */
html[data-product="portal"] .hud-dl-list {
  display: grid;
  gap: 0.7rem;
}

html[data-product="portal"] .hud-dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--hud-radius-sm);
  border: 1px solid var(--hud-line);
  background: rgba(0, 0, 0, 0.28);
  color: var(--parchment);
  text-decoration: none;
  transition: border-color 200ms ease, background-color 200ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-product="portal"] .hud-dl-row:hover,
html[data-product="portal"] .hud-dl-row:focus-visible {
  border-color: rgba(51, 198, 255, 0.45);
  background: rgba(51, 198, 255, 0.08);
  transform: translateX(3px);
}

html[data-product="portal"] .hud-dl-title {
  font-weight: 700;
  letter-spacing: 0.02em;
}

html[data-product="portal"] .hud-dl-action {
  flex: none;
  padding: 0.35rem 0.9rem;
  border-radius: 99px;
  border: 1px solid var(--hud-line);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment-dim);
}

html[data-product="portal"] .hud-dl-row:hover .hud-dl-action {
  color: var(--parchment);
  border-color: rgba(51, 198, 255, 0.5);
}

html[data-product="portal"] .hud-dl-skeleton {
  height: 3.4rem;
  border-radius: var(--hud-radius-sm);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  background-size: 220% 100%;
  animation: portal-hud-skeleton 1.4s ease-in-out infinite;
}

@keyframes portal-hud-skeleton {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* Шаги «как это работает» в окне доната. */
html[data-product="portal"] .hud-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}

html[data-product="portal"] .hud-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: baseline;
}

html[data-product="portal"] .hud-step-num {
  font-weight: 800;
  color: var(--gold-bright);
  text-shadow: 0 0 12px rgba(224, 179, 97, 0.4);
}

html[data-product="portal"] .hud-step-text {
  color: var(--parchment-dim);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  html[data-product="portal"] .hud-root::before,
  html[data-product="portal"] .hud-root::after {
    animation: none;
  }

  html[data-product="portal"] .hud-modal-backdrop,
  html[data-product="portal"] .hud-modal-backdrop::before,
  html[data-product="portal"] .hud-modal-backdrop::after,
  html[data-product="portal"] .hud-modal,
  html[data-product="portal"] .hud-dl-skeleton {
    animation: none;
  }

  html[data-product="portal"] .hud-modal-close:hover,
  html[data-product="portal"] .hud-modal-close:focus-visible,
  html[data-product="portal"] .hud-dl-row:hover,
  html[data-product="portal"] .hud-dl-row:focus-visible {
    transform: none;
  }

  html[data-product="portal"] .hud-feed-track {
    animation: none;
  }

  html[data-product="portal"] .hud-feed-viewport {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
  }

  html[data-product="portal"] .hud-feed-pulse,
  html[data-product="portal"] .hud-dot {
    animation: none;
  }

  html[data-product="portal"] .hud-enter,
  html[data-product="portal"] .hud-bar-fill {
    animation: none;
  }
}



/* PRODUCT: wiki. Source is runtime/design-system/src/products. */
html[data-product="wiki"] body {
  position: relative; /* containing block for .ambient-sigils, so it spans+scrolls with the full page instead of the viewport */
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
}

/* Ambient god-war sigils: two faint rune-rings (cold Эрес / warm Аполлон) that land in a
   new random spot every page load — see AmbientSigils.tsx. Absolutely positioned against
   `body` (not `fixed` to the viewport) so they scroll away with the page like any other
   content instead of hovering in place; `overflow:hidden` still clips an edge-adjacent spot
   so it can never introduce scroll of its own. Each ring turns slowly and in opposite
   directions — two old, opposed powers that never stop moving. */
html[data-product="wiki"] .ambient-sigil {
  width: 22rem;
  height: 22rem;
  opacity: 0.32;
}

@media (max-width: 900px) {
  html[data-product="wiki"] .ambient-sigil {
    width: 15rem;
    height: 15rem;
  }
}

html[data-product="wiki"] h1,
html[data-product="wiki"] h2,
html[data-product="wiki"] h3 {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
  margin: 0 0 0.6em;
  font-weight: 700;
}

html[data-product="wiki"] h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

html[data-product="wiki"] h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

html[data-product="wiki"] h3 {
  font-size: 1.1rem;
}

html[data-product="wiki"] p {
  margin: 0 0 1em;
}

html[data-product="wiki"] a {
  color: inherit;
  text-decoration: none;
}

html[data-product="wiki"] img {
  max-width: 100%;
  display: block;
}

/* --- view transitions (DataShell nav-forward/nav-back + item/skill icon morph) --- */

html[data-product="wiki"] ::view-transition-group(site-header) {
  animation: none;
  z-index: 100;
}
html[data-product="wiki"] ::view-transition-old(site-header) {
  display: none;
}
html[data-product="wiki"] ::view-transition-new(site-header) {
  animation: none;
}

html[data-product="wiki"] ::view-transition-group(.morph) {
  animation-duration: 320ms;
}
html[data-product="wiki"] ::view-transition-image-pair(.morph) {
  animation-name: wiki-via-blur;
}
@keyframes wiki-via-blur {
  30% {
    filter: blur(2px);
  }
}

html[data-product="wiki"] ::view-transition-old(.nav-forward) {
  --slide-offset: -48px;
  animation:
    150ms ease-in both wiki-via-fade reverse,
    360ms ease-in-out both wiki-via-slide reverse;
}
html[data-product="wiki"] ::view-transition-new(.nav-forward) {
  --slide-offset: 48px;
  animation:
    200ms ease-out 150ms both wiki-via-fade,
    360ms ease-in-out both wiki-via-slide;
}

html[data-product="wiki"] ::view-transition-old(.nav-back) {
  --slide-offset: 48px;
  animation:
    150ms ease-in both wiki-via-fade reverse,
    360ms ease-in-out both wiki-via-slide reverse;
}
html[data-product="wiki"] ::view-transition-new(.nav-back) {
  --slide-offset: -48px;
  animation:
    200ms ease-out 150ms both wiki-via-fade,
    360ms ease-in-out both wiki-via-slide;
}

@keyframes wiki-via-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wiki-via-slide {
  from {
    translate: var(--slide-offset);
  }
  to {
    translate: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-product="wiki"] ::view-transition-group(*),
  html[data-product="wiki"] ::view-transition-old(*),
  html[data-product="wiki"] ::view-transition-new(*),
  html[data-product="wiki"] ::view-transition-image-pair(*) {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
  }
}

/* --- layout shell --- */

html[data-product="wiki"] .top-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  /* 57, а не 3.6rem: 3.6rem это 57.6px, и правая группа вставала на дробную
     координату, из-за чего буква в значке аккаунта округлялась не туда. За вычетом
     нижней границы остаётся 56, кнопки 36 — значит отступ ровно 10px сверху и снизу. */
  height: 57px;
  padding: 0 var(--space-md);
  background: rgba(5, 6, 8, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

html[data-product="wiki"] .top-header-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  padding-inline: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

html[data-product="wiki"] .top-header-logo-image {
  height: 1.8rem;
  width: auto;
}

html[data-product="wiki"] .top-header-search {
  flex: 1;
  max-width: 32rem;
}

/* .btn задаёт 2.3rem (36.8px) — на 0.8px выше соседних кнопок шапки, ставших целыми.
   Правим только этот экземпляр, общий .btn не трогаем. Селектор из двух классов —
   потому что сам .btn объявлен ниже по файлу и при равной специфичности победил бы. */
html[data-product="wiki"] .top-header .top-header-random {
  width: 36px;
  height: 36px;
  padding: 0;
}

/* Правая группа шапки. margin-left: auto переехал сюда с .top-header-lang: сам
   переключатель на мобильном скрыт, и без обёртки блок аккаунта прилипал бы к кубику. */
html[data-product="wiki"] .top-header-side {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

html[data-product="wiki"] .top-header-lang {
  display: flex;
  gap: 0.4rem;
}

/* Единственный след авторизации в интерфейсе вики: первая буква логина со ссылкой в
   кабинет портала либо ссылка на вход. Своих аккаунтов, профилей и страниц
   пользователей в вики нет — этот элемент никуда, кроме портала, не ведёт.
   Оправа та же, что у переключателя языка, чтобы правая группа читалась как одна. */
html[data-product="wiki"] .portal-account {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Целые пиксели, а не rem, — сознательно. 2.3rem это 36.8px, 0.86rem — 13.76px, и
     на такой геометрии значок вставал на дробную позицию, разную в шапке и в герое.
     Базовую линию текста браузер округляет до целого пикселя, округление выходило
     в разные стороны, и одна и та же буква с одним и тем же стилем выглядела
     смещённой на одной странице и ровной на другой. Целые размеры + целые
     координаты контейнеров (.top-header, .hero-lang) убирают источник расхождения. */
  width: var(--u-hit-area);
  height: var(--u-hit-area);
  flex-shrink: 0;
  border-radius: var(--radius-main);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(47, 168, 255, 0.12);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease,
    box-shadow 220ms ease, transform 180ms ease;
}

/* Никакой оптической поправки здесь нет и не нужно: при целых размерах значка и
   шрифта (см. .portal-account) буква встаёт по центру сама, с расхождением 0.17px.
   Поправка появлялась раньше только чтобы компенсировать округление базовой линии
   на дробной геометрии — и «чинила» одну страницу, ломая другую. */
html[data-product="wiki"] .portal-account-initial {
  display: block;
  line-height: 1;
}

/* Значок без подписи. Размер подобран так, чтобы силуэт занимал ту же оптическую площадь,
   что и буква, — иначе шапка заметно «дёргается» у тех, кому подпись выдали. Целые пиксели
   по той же причине, что и у .portal-account. */
html[data-product="wiki"] .portal-account-glyph {
  display: block;
  width: 20px;
  height: 20px;
  opacity: 0.85;
}

/* Не вошёл — не значок, а обычная надпись: буквы, которая что-то значила бы, ещё нет. */
html[data-product="wiki"] .portal-account.is-guest {
  width: auto;
  padding: 0 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.72);
  font-weight: 400;
}

html[data-product="wiki"] .portal-account:hover,
html[data-product="wiki"] .portal-account:focus-visible {
  color: #dff2ff;
  border-color: rgba(95, 190, 255, 0.78);
  background: rgba(47, 168, 255, 0.2);
  box-shadow: 0 0 0 1px rgba(47, 168, 255, 0.28), 0 0 16px rgba(47, 168, 255, 0.45);
  transform: translateY(-1px);
}

html[data-product="wiki"] .search-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 2.4rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 0 0.9rem;
  font-family: inherit;
  font-size: 0.92rem;
  transition: background-color 160ms ease, border-color 160ms ease;
}

html[data-product="wiki"] .search-input::-webkit-search-decoration,
html[data-product="wiki"] .search-input::-webkit-search-cancel-button,
html[data-product="wiki"] .search-input::-webkit-search-results-button,
html[data-product="wiki"] .search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

html[data-product="wiki"] .search-input::placeholder {
  color: var(--muted);
}

html[data-product="wiki"] .search-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel-solid);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- language switcher (same flags on the hero and in every header) --- */

/* Ported from UnrealSite so the family shares one control. Backgroundless on purpose: the same
   flags have to read correctly over the hero video and inside the solid header bar, and any panel
   or border around them would look bolted on in one of the two places. The flags themselves carry
   a hairline ring, which is all the separation they need. */
/* Оформление перенесено из портала (его .social-dot + .lang-switcher): семья сайтов
   держит один визуальный язык, и голые флаги без оправы из него выпадали. Размер —
   единственное отличие: у портала шапка ~106px и кнопки 3.1rem, здесь шапка 57px,
   поэтому дотсы ужаты до 36px. */
html[data-product="wiki"] .lang-switcher-trigger,
html[data-product="wiki"] .lang-switcher-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Целые пиксели по той же причине, что у .portal-account, и чтобы обе кнопки
     правой группы были одной высоты. */
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-main);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease,
    box-shadow 220ms ease, transform 180ms ease;
}

/* Шире соседей: внутри, кроме флага, стоит каретка — ровно как в портале, где триггер
   тоже шире квадратного дотса. */
html[data-product="wiki"] .lang-switcher-trigger {
  position: relative;
  width: 46px;
}

html[data-product="wiki"] .lang-flag {
  display: block;
  width: 1.4rem;
  height: auto;
  border-radius: 0.2rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
}

/* Каретка сидит НА левой рамке, а не внутри у флага: в портале она вынесена за край
   (left: -3.52px при её ширине 7.5px, то есть треть снаружи), и это заметная часть
   узнаваемости элемента. Внутри она смотрелась прижатой к флагу. */
html[data-product="wiki"] .lang-switcher-caret {
  position: absolute;
  left: -3px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(169, 219, 255, 0.78);
  font-size: 11px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(104, 194, 255, 0.2);
}

/* Абсолютом влево, а не order:-1 в потоке: так открытый список не расталкивает
   соседей в шапке — раньше при открытии уезжал вбок весь правый блок. */
html[data-product="wiki"] .lang-switcher-trigger:hover,
html[data-product="wiki"] .lang-switcher-trigger:focus-visible,
html[data-product="wiki"] .lang-switcher-button:hover,
html[data-product="wiki"] .lang-switcher-button:focus-visible {
  color: #dff2ff;
  border-color: rgba(95, 190, 255, 0.78);
  background: rgba(47, 168, 255, 0.14);
  box-shadow: 0 0 0 1px rgba(47, 168, 255, 0.28), 0 0 16px rgba(47, 168, 255, 0.45);
  transform: translateY(-1px);
}

html[data-product="wiki"] .lang-switcher.is-open .lang-switcher-trigger {
  border-color: rgba(129, 216, 255, 0.48);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.12)),
    rgba(18, 36, 54, 0.92);
  color: #f3f8fd;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 18px rgba(77, 176, 255, 0.18);
}

/* Home has no header bar to sit in, so the hero places the same controls in its own top-right —
   переключатель языка и вход/аккаунт, тем же блоком и в том же порядке, что в шапке. */
html[data-product="wiki"] .hero-lang {
  position: absolute;
  /* 18px вместо var(--space-md): токен даёт 17.6px, а от дробной координаты здесь
     зависит округление буквы в значке аккаунта (см. .portal-account). Сам токен не
     трогаем — он общий, правка только для этого блока. */
  top: 18px;
  right: 18px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Зеркало .hero-lang по другому краю: те же 18px, та же высота строки, чтобы правый и левый
   углы героя читались как одна линия, а не как два случайно поставленных элемента. */
html[data-product="wiki"] .hero-back-site {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.85rem;
  border-radius: var(--radius-main);
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(10, 14, 24, 0.45);
  backdrop-filter: blur(6px);
  color: var(--text);
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
}

html[data-product="wiki"] .hero-back-site::before {
  content: "←";
  color: var(--accent);
}

html[data-product="wiki"] .hero-back-site:hover {
  border-color: var(--accent);
  background: rgba(47, 168, 255, 0.14);
}

/* --- live search dropdown (header + hero share SiteSearchForm) --- */

/* The consumer's class (.top-header-search / .hero-search) now lands on this wrapper rather than
   the <form>, because the dropdown has to be positioned against the input's box. The form itself
   just fills the wrapper so nothing about the existing sizing rules changes. */
html[data-product="wiki"] .site-search {
  position: relative;
}

html[data-product="wiki"] .site-search form {
  width: 100%;
}

html[data-product="wiki"] .site-search-mobile-trigger,
html[data-product="wiki"] .site-search-mobile-close {
  display: none;
}

html[data-product="wiki"] .site-search-mobile-trigger svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media (max-width: 640px) {
  html[data-product="wiki"] body.wiki-search-open {
    overflow: hidden;
  }

  html[data-product="wiki"] .top-header {
    gap: 0.5rem;
    padding-inline: 0.7rem;
  }

  html[data-product="wiki"] .top-header-search {
    flex: 0 0 var(--u-hit-area);
    max-width: none;
  }

  html[data-product="wiki"] .top-header-search > form {
    display: none;
  }

  html[data-product="wiki"] .top-header-search .site-search-mobile-trigger {
    display: grid;
    place-items: center;
    width: var(--u-hit-area);
    height: var(--u-hit-area);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-main);
    background: var(--raised);
    color: var(--text);
  }

  html[data-product="wiki"] .top-header-search.is-mobile-open {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: flex-start;
    width: 100%;
    height: 100dvh;
    padding: 1rem;
    background: rgba(5, 6, 8, 0.98);
    backdrop-filter: blur(12px);
  }

  html[data-product="wiki"] .top-header-search.is-mobile-open > form {
    display: flex;
    gap: 0.5rem;
  }

  html[data-product="wiki"] .top-header-search.is-mobile-open .site-search-mobile-trigger {
    display: none;
  }

  html[data-product="wiki"] .top-header-search.is-mobile-open .site-search-mobile-close {
    display: grid;
    place-items: center;
    flex: 0 0 var(--u-hit-area);
    width: var(--u-hit-area);
    height: var(--u-hit-area);
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-main);
    background: var(--raised);
    color: var(--text);
    font-size: 1.4rem;
  }

  html[data-product="wiki"] .top-header-search.is-mobile-open .search-suggestions {
    top: calc(1rem + var(--u-hit-area) + 0.5rem);
    left: 1rem;
    right: 1rem;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
  }
}

html[data-product="wiki"] .search-suggestions {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: var(--panel-solid);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  /* A long name can't be allowed to widen the panel past the input it hangs from. */
  overflow: hidden;
}

html[data-product="wiki"] .search-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: calc(var(--radius-main) - 0.15rem);
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* One highlight state for both the mouse and the arrow keys — the component moves `active` on
   hover as well, so the keyboard cursor and the pointer can never disagree about the target. */
html[data-product="wiki"] .search-suggestion.active,
html[data-product="wiki"] .search-suggestion-all:hover {
  background: var(--accent-soft);
}

html[data-product="wiki"] .search-suggestion-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

html[data-product="wiki"] .search-suggestion-type {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[data-product="wiki"] .search-suggestion-all {
  justify-content: flex-start;
  margin-top: 0.2rem;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

html[data-product="wiki"] .page-content {
  padding: var(--space-lg);
  min-width: 0;
}

/* --- data section: top type-switcher (Данные/Ресурсы) --- */

html[data-product="wiki"] .data-topnav {
  position: sticky;
  /* Высота .top-header — держать в тех же единицах, иначе липкая полоса встаёт
     с щелью в полпикселя под шапкой. */
  top: 57px;
  z-index: 20;
  background: rgba(5, 6, 8, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

/* Resources keeps the scrolling strip — only four short pills, and it has no "everything" page to
   fall back to. The Данные strip below is the one that got too long to scroll through. */
html[data-product="wiki"] .data-topnav-scroll {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem var(--space-lg);
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Priority-nav strip: as many type tabs as the row can hold, then "Все категории". No horizontal
   scrolling — a scrollbar under a sticky header is both ugly and easy to miss, and the tabs it
   hid were unreachable in practice. `overflow: hidden` is only a safety net for the frame before
   DataTopNav measures; after that the row is trimmed to what actually fits. */
html[data-product="wiki"] .data-topnav-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.7rem var(--space-lg);
  overflow: hidden;
}

/* The hidden measuring strip. `visibility: hidden` rather than `display: none` — it has to be
   laid out to have widths at all, just not seen; absolute + zero height keeps it out of flow. */
html[data-product="wiki"] .data-topnav-measure {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  gap: 0.5rem;
  width: max-content;
}

html[data-product="wiki"] .data-tab-more {
  margin-left: auto;
  border-style: dashed;
}

html[data-product="wiki"] .data-tab-more:hover {
  border-style: solid;
}

html[data-product="wiki"] .data-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  height: var(--u-hit-area);
  padding: 0 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.84rem;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

html[data-product="wiki"] .data-tab:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

html[data-product="wiki"] .data-tab.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 700;
}

html[data-product="wiki"] .data-tab-count {
  color: var(--muted);
  font-size: 0.74rem;
}

html[data-product="wiki"] .data-tab.active .data-tab-count {
  color: inherit;
  opacity: 0.75;
}

html[data-product="wiki"] .data-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - 57px - 3.5rem);
}

html[data-product="wiki"] .data-shell.with-infobox {
  grid-template-columns: minmax(0, 1fr) 18rem;
}

html[data-product="wiki"] .data-shell .infobox {
  top: calc(57px + 3.5rem);
}

/* --- infobox --- */

html[data-product="wiki"] .infobox {
  border-left: 1px solid var(--line);
  padding: var(--space-md);
  align-self: start;
  position: sticky;
  top: 57px;
}

html[data-product="wiki"] .infobox-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}

html[data-product="wiki"] .infobox-stat-row {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.86rem;
}

html[data-product="wiki"] .infobox-stat-row:last-child {
  border-bottom: none;
}

html[data-product="wiki"] .infobox-stat-label {
  color: var(--muted);
}

/* --- buttons / links --- */

html[data-product="wiki"] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.3rem;
  padding: 0 1rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}

html[data-product="wiki"] .btn:hover {
  border-color: var(--accent-soft);
  background: rgba(47, 168, 255, 0.08);
}

html[data-product="wiki"] .btn-accent {
  border-color: var(--accent-soft);
  background: rgba(47, 168, 255, 0.14);
  color: #dff2ff;
}

html[data-product="wiki"] .btn-accent:hover {
  border-color: var(--accent);
  background: rgba(47, 168, 255, 0.22);
}

/* --- category grid --- */

html[data-product="wiki"] .category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-sm);
}

html[data-product="wiki"] .category-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  transition: border-color 160ms ease, transform 160ms ease;
}

html[data-product="wiki"] .category-card:hover {
  border-color: var(--accent-soft);
  transform: translateY(-2px);
}

html[data-product="wiki"] .category-card-icon {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

html[data-product="wiki"] .category-card-count {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.3rem;
}

/* --- entity of the day --- */

html[data-product="wiki"] .entity-of-day {
  display: block;
  background: var(--panel);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-card);
  padding: var(--space-md);
  max-width: 24rem;
  transition: border-color 160ms ease, transform 160ms ease;
}

html[data-product="wiki"] .entity-of-day:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

html[data-product="wiki"] .entity-of-day-kicker {
  display: block;
  color: var(--accent);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}

html[data-product="wiki"] .entity-of-day-body {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

html[data-product="wiki"] .entity-of-day-meta {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 0.2rem;
}

/* --- marquee (ported from UnrealSite Participants component) --- */

html[data-product="wiki"] .marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
  padding: 0.85rem 0;
}

html[data-product="wiki"] .marquee::before,
html[data-product="wiki"] .marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(1.5rem, 5vw, 4rem);
  z-index: 1;
  pointer-events: none;
}

html[data-product="wiki"] .marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg), rgba(5, 6, 8, 0));
}

html[data-product="wiki"] .marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--bg), rgba(5, 6, 8, 0));
}

html[data-product="wiki"] .marquee-track {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: max-content;
  padding-inline: 0.9rem;
  animation: wiki-marquee-scroll 34s linear infinite;
}

html[data-product="wiki"] .marquee-track:hover {
  animation-play-state: paused;
}

html[data-product="wiki"] .marquee-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.82rem;
  white-space: nowrap;
  color: var(--muted);
}

html[data-product="wiki"] .marquee-chip:hover {
  color: var(--text);
  border-color: var(--accent-soft);
}

html[data-product="wiki"] .marquee-chip-type {
  color: var(--accent);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@keyframes wiki-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* --- home hero --- */

html[data-product="wiki"] .hero {
  position: relative;
  /* Traps the negative video/shade layers inside the hero so they paint above the shared
     Concept/1 document foundation; lower sections deliberately reveal that foundation. */
  isolation: isolate;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

html[data-product="wiki"] .hero-video,
html[data-product="wiki"] .hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
}

html[data-product="wiki"] .hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html[data-product="wiki"] .hero-shade {
  background:
    linear-gradient(to bottom, rgba(5, 6, 8, 0.5), var(--bg) 92%),
    radial-gradient(circle at 50% 38%, rgba(47, 168, 255, 0.16), transparent 46%);
}

html[data-product="wiki"] .hero-cloud {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

html[data-product="wiki"] .hero-cloud-word {
  position: absolute;
  font-family: var(--font-heading);
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.03em;
  /* transform is set entirely via inline style (initial rotate in HeroCloud.tsx's
     JSX, live translate+rotate from the mousemove handler) — NOT through a
     var(--x) read from this stylesheet. Next's build-time CSS processing folds
     var(--x) to its fallback when --x is only ever set from JS and never
     declared in any CSS rule (confirmed via computedStyleMap() always showing
     translate(0px, 0px) regardless of the value actually assigned at runtime).
     No CSS transition here either — confirmed (headless) that `transition:
     transform` can leave getComputedStyle stuck on the pre-transition value
     when the page never gets a real compositor frame; smoothness instead comes
     from recalculating every mousemove via requestAnimationFrame. */
  will-change: transform;
  /* Ambient idle drift uses the standalone `translate` property (not `transform`),
     so it composes with the JS-driven `transform` (repel + base rotate) instead of
     fighting it. Direction comes from one of 4 hardcoded keyframe variants below
     (picking a class, not a CSS variable, to dodge the same var()-folding issue) —
     duration/delay vary per word via plain inline animation-duration/-delay. */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

html[data-product="wiki"] .hero-cloud-word.drift-0 {
  animation-name: wiki-hero-drift-0;
}

html[data-product="wiki"] .hero-cloud-word.drift-1 {
  animation-name: wiki-hero-drift-1;
}

html[data-product="wiki"] .hero-cloud-word.drift-2 {
  animation-name: wiki-hero-drift-2;
}

html[data-product="wiki"] .hero-cloud-word.drift-3 {
  animation-name: wiki-hero-drift-3;
}

@keyframes wiki-hero-drift-0 {
  from {
    translate: 0 0;
  }

  to {
    translate: 7px -11px;
  }
}

@keyframes wiki-hero-drift-1 {
  from {
    translate: 0 0;
  }

  to {
    translate: -9px 7px;
  }
}

@keyframes wiki-hero-drift-2 {
  from {
    translate: 0 0;
  }

  to {
    translate: 6px 10px;
  }
}

@keyframes wiki-hero-drift-3 {
  from {
    translate: 0 0;
  }

  to {
    translate: -7px -8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-product="wiki"] .hero-cloud-word {
    animation: none;
  }
}

html[data-product="wiki"] .hero-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: 44rem;
}

html[data-product="wiki"] .hero-logo-image {
  width: clamp(22rem, 60vw, 46rem);
  height: auto;
  filter: drop-shadow(0 0 40px var(--accent-soft));
}

html[data-product="wiki"] .hero-search-row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  width: 100%;
}

html[data-product="wiki"] .hero-search {
  width: 100%;
}

html[data-product="wiki"] .hero-search .search-input {
  height: 3.2rem;
  font-size: 1rem;
  border-radius: var(--radius-card);
}

html[data-product="wiki"] .hero-random {
  flex-shrink: 0;
  height: 3.2rem;
  width: 3.2rem;
  padding: 0;
  border-radius: var(--radius-card);
  font-size: 1.2rem;
}

html[data-product="wiki"] .entity-of-day-line {
  display: block;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
}

html[data-product="wiki"] .entity-of-day-line:hover {
  color: var(--text);
}

html[data-product="wiki"] .entity-of-day-line-name {
  color: var(--accent);
  font-weight: 600;
}

html[data-product="wiki"] .entity-of-day-line-meta {
  color: var(--muted);
}

html[data-product="wiki"] .hero-marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

html[data-product="wiki"] .home-categories {
  padding: var(--space-xl) var(--space-md);
  max-width: 74rem;
  margin: 0 auto;
}

/* --- category landing --- */

html[data-product="wiki"] .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--line);
}

html[data-product="wiki"] .filter-form {
  display: flex;
  flex-direction: column;
  margin: var(--space-md) 0;
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
}

html[data-product="wiki"] .filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

html[data-product="wiki"] .filter-field label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

html[data-product="wiki"] .filter-field .search-input {
  height: 2.2rem;
  min-width: 8rem;
}

html[data-product="wiki"] .filter-field input[type="number"] {
  width: 6rem;
}

html[data-product="wiki"] .filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md);
}

html[data-product="wiki"] .filter-row:not(:last-child) {
  margin-bottom: var(--space-md);
}

html[data-product="wiki"] .filter-field-grow {
  flex: 1 1 12rem;
}

html[data-product="wiki"] .filter-field-grow .search-input,
html[data-product="wiki"] .filter-field-grow select.search-input {
  width: 100%;
}

html[data-product="wiki"] .filter-range {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: var(--u-hit-area);
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  padding: 0 0.5rem;
}

html[data-product="wiki"] .filter-range input[type="number"] {
  width: 3.4rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.84rem;
  padding: 0;
  height: 100%;
  min-height: var(--u-hit-area);
  -moz-appearance: textfield;
}

html[data-product="wiki"] .filter-range input[type="number"]::-webkit-outer-spin-button,
html[data-product="wiki"] .filter-range input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

html[data-product="wiki"] .filter-range span {
  color: var(--muted);
}

html[data-product="wiki"] .filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

html[data-product="wiki"] .filter-chip {
  position: relative;
  cursor: pointer;
}

html[data-product="wiki"] .filter-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

html[data-product="wiki"] .filter-chip span {
  display: inline-flex;
  align-items: center;
  min-height: var(--u-hit-area);
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.82rem;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

html[data-product="wiki"] .filter-chip:hover span {
  border-color: var(--accent-soft);
  color: var(--text);
}

html[data-product="wiki"] .filter-chip input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text);
}

html[data-product="wiki"] .filter-chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

html[data-product="wiki"] .filter-reset {
  align-self: flex-end;
  min-height: var(--u-hit-area);
  padding: 0 0.85rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

html[data-product="wiki"] .filter-reset:hover {
  color: var(--accent);
}

html[data-product="wiki"] .monster-picker {
  position: relative;
}

html[data-product="wiki"] .monster-picker-list {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

html[data-product="wiki"] .monster-picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text);
  font-family: inherit;
  font-size: 0.86rem;
  text-align: left;
  cursor: pointer;
}

html[data-product="wiki"] .monster-picker-option:last-child {
  border-bottom: none;
}

html[data-product="wiki"] .monster-picker-option:hover {
  background: rgba(47, 168, 255, 0.1);
}

/* --- compare tool --- */

html[data-product="wiki"] .compare-table {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}

html[data-product="wiki"] .compare-row {
  display: grid;
  grid-template-columns: 10rem 1fr 1fr;
  gap: var(--space-sm);
  padding: 0.6rem var(--space-md);
  border-bottom: 1px solid var(--line);
}

html[data-product="wiki"] .compare-row:last-child {
  border-bottom: none;
}

html[data-product="wiki"] .compare-row-header {
  background: var(--panel);
  font-family: var(--font-heading);
  font-weight: 700;
}

html[data-product="wiki"] .compare-row-label {
  color: var(--muted);
}

html[data-product="wiki"] .compare-cell-better {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 640px) {
  html[data-product="wiki"] .compare-row {
    grid-template-columns: 6rem 1fr 1fr;
    font-size: 0.86rem;
  }
}

/* --- location danger map --- */

html[data-product="wiki"] .danger-map {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

html[data-product="wiki"] .danger-row {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  padding: 0.6rem var(--space-md);
  transition: border-color 160ms ease;
}

html[data-product="wiki"] .danger-row:hover {
  border-color: var(--accent-soft);
}

html[data-product="wiki"] .danger-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: 0.4rem;
}

html[data-product="wiki"] .danger-row-label {
  font-weight: 600;
}

html[data-product="wiki"] .danger-boss-badge {
  margin-left: 0.5rem;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-main);
  background: rgba(255, 90, 90, 0.18);
  color: #ff9a9a;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

html[data-product="wiki"] .danger-row-levels {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

html[data-product="wiki"] .danger-bar {
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(47, 168, 255, 0.15);
  overflow: hidden;
}

html[data-product="wiki"] .danger-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb14e, #ff5a5a);
}

html[data-product="wiki"] .filter-bar select,
html[data-product="wiki"] .filter-bar .search-input {
  height: 2.2rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 0.84rem;
  padding: 0 0.7rem;
}

html[data-product="wiki"] .entity-list {
  display: grid;
  gap: 0.4rem;
}

html[data-product="wiki"] .entity-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem var(--space-sm);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: var(--panel);
}

html[data-product="wiki"] .entity-row:hover {
  border-color: var(--accent-soft);
}

html[data-product="wiki"] .entity-row-meta {
  color: var(--muted);
  font-size: 0.82rem;
  flex-shrink: 0;
}

/* Full-text guide search hit — dropped onto its own line under the title within the same
 * flex-wrap .entity-row (see search.ts's snippet field). */
html[data-product="wiki"] .search-snippet {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

html[data-product="wiki"] .search-approximate {
  margin: var(--space-sm) 0 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-card);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.9rem;
}

html[data-product="wiki"] .search-approximate strong {
  color: var(--text);
}

html[data-product="wiki"] .entity-row-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

html[data-product="wiki"] .entity-row-main .atlas-icon {
  flex-shrink: 0;
  border-radius: 4px;
}

html[data-product="wiki"] .entity-row-main span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-product="wiki"] .pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
}

html[data-product="wiki"] .pager-info {
  color: var(--muted);
  font-size: 0.82rem;
}

html[data-product="wiki"] .pager-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

html[data-product="wiki"] .pager-page {
  color: var(--muted);
  font-size: 0.82rem;
}

html[data-product="wiki"] .btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* --- entity page --- */

html[data-product="wiki"] .entity-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--line);
}

html[data-product="wiki"] .atlas-icon {
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--line);
}

html[data-product="wiki"] .entity-header-type {
  color: var(--accent);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}

html[data-product="wiki"] .entity-body {
  max-width: 42rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

html[data-product="wiki"] .entity-body-warning {
  border-left: 2px solid rgba(255, 154, 154, 0.6);
  padding-left: var(--space-sm);
  margin-top: var(--space-lg);
}

html[data-product="wiki"] .entity-tier-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  max-width: 42rem;
}

html[data-product="wiki"] .entity-tier-link {
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

html[data-product="wiki"] .entity-tier-link:hover {
  color: var(--text);
}

html[data-product="wiki"] .entity-tier-link-next {
  margin-left: auto;
  text-align: right;
}

html[data-product="wiki"] .entity-insight-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-sm);
  max-width: 42rem;
}

html[data-product="wiki"] .faction-ladder {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 42rem;
}

html[data-product="wiki"] .faction-ladder-row {
  display: block;
}

html[data-product="wiki"] .faction-ladder-track {
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  margin-bottom: 0.3rem;
}

html[data-product="wiki"] .faction-ladder-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
}

html[data-product="wiki"] .faction-ladder-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.86rem;
}

html[data-product="wiki"] .power-level-chart {
  margin-top: var(--space-sm);
  overflow: visible;
}

html[data-product="wiki"] .power-level-chart-label {
  font-size: 8px;
  fill: var(--muted);
}

html[data-product="wiki"] .entity-insight-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  font-size: 0.78rem;
}

html[data-product="wiki"] .entity-section {
  margin-top: var(--space-lg);
  max-width: 42rem;
}

html[data-product="wiki"] .entity-section h2 {
  margin-bottom: var(--space-sm);
}

html[data-product="wiki"] .entity-section-count {
  margin-left: 0.6rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: normal;
  vertical-align: middle;
}

html[data-product="wiki"] .entity-section-more {
  margin-top: 0.4rem;
}

html[data-product="wiki"] .entity-section-more summary {
  cursor: pointer;
  padding: 0.5rem 0.1rem;
  color: var(--accent);
  font-size: 0.86rem;
  list-style: none;
}

html[data-product="wiki"] .entity-section-more summary::-webkit-details-marker {
  display: none;
}

html[data-product="wiki"] .entity-section-more summary::before {
  content: "+ ";
}

html[data-product="wiki"] .entity-section-more[open] summary::before {
  content: "− ";
}

html[data-product="wiki"] .entity-section-more summary:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

html[data-product="wiki"] .entity-section-more .entity-list {
  margin-top: 0.4rem;
}

/* --- location minimap --- */

html[data-product="wiki"] .location-map {
  margin-top: var(--space-lg);
  max-width: 42rem;
}

html[data-product="wiki"] .location-map-canvas {
  position: relative;
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  overflow: hidden;
  background: #000;
}

html[data-product="wiki"] .location-map-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

html[data-product="wiki"] .location-map-canvas-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  cursor: crosshair;
}

html[data-product="wiki"] .location-map-tooltip {
  position: absolute;
  transform: translate(-50%, -140%);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  padding: 0.25rem 0.55rem;
  font-size: 0.78rem;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

html[data-product="wiki"] .location-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-sm);
}

html[data-product="wiki"] .location-map-caption {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: var(--space-sm);
}

html[data-product="wiki"] .location-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  justify-content: center;
}

html[data-product="wiki"] .location-map-legend-item[data-hidden="true"] {
  opacity: 0.4;
}

html[data-product="wiki"] .location-map-legend-swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Modest markdown treatment for lore/description blocks embedded in normal wiki (infobox)
   pages — e.g. class/subclass descriptions. Not the dramatic .guide-markdown reading-article
   typography; those live in a different layout (GuideArticleShell) entirely. */
html[data-product="wiki"] .entity-markdown {
  max-width: 52rem;
  line-height: 1.7;
}

html[data-product="wiki"] .entity-markdown p {
  margin: 0 0 1em;
}

html[data-product="wiki"] .entity-markdown h1,
html[data-product="wiki"] .entity-markdown h2,
html[data-product="wiki"] .entity-markdown h3 {
  color: var(--text);
  margin-top: 1.6em;
}

html[data-product="wiki"] .entity-markdown strong {
  color: var(--text);
}

html[data-product="wiki"] .entity-markdown a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

html[data-product="wiki"] .entity-markdown ul,
html[data-product="wiki"] .entity-markdown ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

html[data-product="wiki"] .entity-markdown li {
  margin-bottom: 0.35em;
}

/* ==========================================================================
   Guide article — deliberately not wiki-styled. Read start to finish, so it
   gets a full-bleed magazine treatment: no rail, no infobox, a big masthead,
   a narrow reading column, and a teaser into the next article.
   ========================================================================== */

html[data-product="wiki"] .guide-article-page {
  padding: var(--space-xl) var(--space-lg) var(--space-xl);
  display: flex;
  justify-content: center;
}

html[data-product="wiki"] .guide-article {
  width: 100%;
  max-width: 44rem;
}

html[data-product="wiki"] .guide-article-topbar {
  margin-bottom: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
}

html[data-product="wiki"] .guide-article-back {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}

html[data-product="wiki"] .guide-article-edit {
  color: var(--accent);
  font-size: 0.8rem;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  padding: 0.3rem 0.7rem;
}

html[data-product="wiki"] .guide-article-edit:hover {
  border-color: var(--accent-soft);
}

html[data-product="wiki"] .guide-article-back:hover {
  color: var(--accent);
}

html[data-product="wiki"] .guide-masthead {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

html[data-product="wiki"] .guide-kicker {
  font-family: var(--font-heading);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  margin-bottom: var(--space-md);
}

html[data-product="wiki"] .guide-title {
  font-family: var(--font-hero);
  font-size: clamp(2.2rem, 5.6vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin: 0 0 var(--space-md);
  text-shadow: 0 0 42px var(--accent-glow);
}

html[data-product="wiki"] .guide-meta {
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

html[data-product="wiki"] .guide-markdown {
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--muted);
}

html[data-product="wiki"] .guide-markdown > p:first-of-type {
  font-size: 1.28rem;
  line-height: 1.6;
  color: var(--text);
}

html[data-product="wiki"] .guide-markdown p {
  margin: 0 0 1.3em;
}

html[data-product="wiki"] .guide-markdown h1,
html[data-product="wiki"] .guide-markdown h2,
html[data-product="wiki"] .guide-markdown h3 {
  font-family: var(--font-heading);
  color: var(--text);
  line-height: 1.3;
  margin: 2.2em 0 0.9em;
}

html[data-product="wiki"] .guide-markdown h1 { font-size: 1.7rem; }
html[data-product="wiki"] .guide-markdown h2 { font-size: 1.4rem; }
html[data-product="wiki"] .guide-markdown h3 { font-size: 1.15rem; }

html[data-product="wiki"] .guide-markdown h1::before,
html[data-product="wiki"] .guide-markdown h2::before {
  content: "";
  display: block;
  width: 2.6rem;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
  margin-bottom: 0.9em;
}

html[data-product="wiki"] .guide-markdown strong {
  color: var(--text);
  font-weight: 700;
}

html[data-product="wiki"] .guide-markdown a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

html[data-product="wiki"] .guide-markdown ul,
html[data-product="wiki"] .guide-markdown ol {
  margin: 0 0 1.3em;
  padding-left: 1.4em;
}

html[data-product="wiki"] .guide-markdown li {
  margin-bottom: 0.5em;
}

html[data-product="wiki"] .guide-markdown img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  margin: 1.6em 0;
}

html[data-product="wiki"] .guide-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.6em;
  font-size: 0.88rem;
  display: block;
  overflow-x: auto;
}

html[data-product="wiki"] .guide-markdown th,
html[data-product="wiki"] .guide-markdown td {
  border: 1px solid var(--line);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

html[data-product="wiki"] .guide-markdown th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}

html[data-product="wiki"] .guide-markdown blockquote {
  border-left: 2px solid var(--accent-soft);
  margin: 0 0 1.3em;
  padding: 0.2rem 1.2rem;
  font-style: italic;
  color: var(--muted);
}

html[data-product="wiki"] .guide-markdown code {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0.3rem;
  padding: 0.1em 0.4em;
  font-size: 0.9em;
}

html[data-product="wiki"] .guide-next-teaser {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(47, 168, 255, 0.08), transparent 60%);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

html[data-product="wiki"] .guide-next-teaser:hover {
  border-color: var(--accent-soft);
  background: linear-gradient(135deg, rgba(47, 168, 255, 0.14), transparent 60%);
}

html[data-product="wiki"] .guide-next-teaser-label {
  font-family: var(--font-heading);
  color: var(--accent);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

html[data-product="wiki"] .guide-next-teaser-title {
  font-family: var(--font-hero);
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1.2;
}

html[data-product="wiki"] .guide-changelog-badge {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  color: var(--accent);
  font-size: 0.74rem;
  text-transform: none;
  letter-spacing: normal;
}

html[data-product="wiki"] .guide-toc {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: var(--panel);
}

html[data-product="wiki"] .guide-toc summary {
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

html[data-product="wiki"] .guide-toc-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: var(--space-md);
}

html[data-product="wiki"] .guide-toc-link {
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
}

html[data-product="wiki"] .guide-toc-link:hover {
  color: var(--accent);
}

html[data-product="wiki"] .guide-toc-link[data-level="3"] {
  margin-left: 1.4rem;
  font-size: 0.86rem;
}

html[data-product="wiki"] .guide-see-also {
  margin-top: var(--space-xl);
}

html[data-product="wiki"] .guide-see-also-label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}

html[data-product="wiki"] .guide-see-also-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --- guide editor (/guides/[slug]/edit) — local content-authoring form, dev-only --- */

html[data-product="wiki"] .guide-editor-topbar {
  margin-bottom: var(--space-lg);
}

html[data-product="wiki"] .guide-editor-title {
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  margin-bottom: var(--space-lg);
}

/* Название/Категория/Краткое описание/Теги live in their own row above the editor grid — keeping
 * them out of the editor's own column means the textarea and the preview column both start at
 * the same y-coordinate below, instead of the textarea being pushed down by however tall the
 * metadata fields happen to be. */
html[data-product="wiki"] .guide-editor-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md) var(--space-xl);
  margin-bottom: var(--space-lg);
}

@media (max-width: 900px) {
  html[data-product="wiki"] .guide-editor-meta {
    grid-template-columns: 1fr;
  }
}

html[data-product="wiki"] .guide-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 900px) {
  html[data-product="wiki"] .guide-editor-grid {
    grid-template-columns: 1fr;
  }
}

html[data-product="wiki"] .guide-editor-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}


html[data-product="wiki"] .guide-editor-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

html[data-product="wiki"] .guide-editor-label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

html[data-product="wiki"] .guide-editor-label-grow {
  flex: 1 1 12rem;
}

html[data-product="wiki"] .guide-editor-input {
  text-transform: none;
  letter-spacing: normal;
}

/* Fixed (not min-) height, matched to .guide-editor-preview below, so the two columns line up
 * top-to-bottom — the whole point being that scrolling one while editing keeps the corresponding
 * preview text in view without having to scroll the outer page to find it. */
html[data-product="wiki"] .guide-editor-textarea {
  width: 100%;
  height: min(70vh, 44rem);
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  padding: 0.9rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.88rem;
  line-height: 1.6;
}

html[data-product="wiki"] .guide-editor-hint {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: normal;
  margin: 0.3rem 0 0.5rem;
}

/* Комментарий к правке — во всю ширину под сеткой полей: он не про гайд, а про саму правку,
   и стоять в одном ряду с заголовком и тегами ему нечего. */
html[data-product="wiki"] .guide-editor-comment {
  margin-bottom: var(--space-md);
}

html[data-product="wiki"] .guide-editor-sublabel {
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
}

html[data-product="wiki"] .guide-editor-hint code {
  color: var(--accent);
  font-family: var(--font-mono, monospace);
}

html[data-product="wiki"] .guide-editor-textarea-wrap {
  position: relative;
}

html[data-product="wiki"] .guide-editor-textarea[data-drag-over="true"] {
  border-color: var(--accent);
  background: rgba(47, 168, 255, 0.06);
}

/* Hidden native file input — the toolbar's 🖼️ button triggers it, so the OS/browser shows
 * Explorer on desktop or the Gallery/camera chooser on mobile, whichever the device provides. */
html[data-product="wiki"] .guide-editor-image-input {
  display: none;
}

/* Floating formatting toolbar — positioned via inline top/left computed from the real caret
 * offset (see textareaCaret.ts), shown just above wherever the cursor/selection currently is
 * (click, arrow-key nav, text selection) and hidden the instant you type, so it doesn't chase
 * the cursor mid-keystroke. transform shifts it fully above its anchor point instead of down
 * into the selected line. */
html[data-product="wiki"] .guide-editor-selection-toolbar {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: var(--panel-solid);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(-100%);
  margin-top: -6px;
}

html[data-product="wiki"] .guide-editor-selection-toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: none;
  border-radius: var(--radius-main);
  background: none;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

html[data-product="wiki"] .guide-editor-selection-toolbar button:hover {
  background: rgba(47, 168, 255, 0.12);
}

html[data-product="wiki"] .guide-editor-selection-toolbar-sep {
  width: 1px;
  height: 1.2rem;
  background: var(--line);
  margin: 0 0.15rem;
}

/* Positioned via inline top/left computed from the real caret offset (see textareaCaret.ts) —
 * follows where you're typing instead of sitting in a fixed spot you have to look away to find. */
html[data-product="wiki"] .guide-editor-mention-dropdown {
  position: absolute;
  z-index: 6;
  min-width: 14rem;
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: var(--panel-solid);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

html[data-product="wiki"] .guide-editor-picker-item {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 0.5rem 0.8rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}

html[data-product="wiki"] .guide-editor-picker-item:last-child {
  border-bottom: none;
}

html[data-product="wiki"] .guide-editor-picker-item:hover,
html[data-product="wiki"] .guide-editor-picker-item[data-active="true"] {
  background: rgba(47, 168, 255, 0.12);
}

html[data-product="wiki"] .guide-editor-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

html[data-product="wiki"] .guide-editor-status {
  font-size: 0.85rem;
}

html[data-product="wiki"] .guide-editor-status-ok {
  color: #4dd68c;
}

html[data-product="wiki"] .guide-editor-status-error {
  color: #ff6b6b;
}

/* Deliberately just a label + box, same shape as the editor column (label, then a bordered
 * scrollable area) — so the two boxes' top edges land on the same y instead of one column's
 * border/padding starting above where the other's label sits. */
html[data-product="wiki"] .guide-editor-preview-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  background: var(--panel);
  height: min(70vh, 44rem);
  overflow-y: auto;
}

/* (The editor's textarea/preview used to carry their own scrollbar styling here — now covered by
   the global rules at the top of this file, which say the same thing for every scroller.) */

/* Shared by both column headers ("Текст статьи" / "Предпросмотр") — same class on both sides
 * guarantees identical height, which is what keeps the textarea and preview box top-aligned. */
html[data-product="wiki"] .guide-editor-col-label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-md);
}

/* --- guides hub (/guides): category directions instead of a flat list --- */

html[data-product="wiki"] .guide-hub {
  width: 100%;
  max-width: 72rem;
}

html[data-product="wiki"] .guide-hub-masthead {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

html[data-product="wiki"] .guide-hub-intro {
  color: var(--muted);
  max-width: 32rem;
  margin: 0 auto;
}

/* Вход в написание гайда. Под вступлением, а не в шапке страницы: раздел сначала читают,
   и только у того, кто дочитал, появляется мысль написать своё. */
html[data-product="wiki"] .guide-hub-add {
  margin-top: var(--space-md);
}

html[data-product="wiki"] .guide-hub-category {
  margin-bottom: var(--space-xl);
}

html[data-product="wiki"] .guide-hub-category-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line);
}

html[data-product="wiki"] .guide-hub-category-heading h2 {
  font-family: var(--font-heading);
  color: var(--text);
  font-size: 1.3rem;
  margin: 0;
}

html[data-product="wiki"] .guide-hub-category-heading p {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0;
}

html[data-product="wiki"] .guide-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-sm);
}

/* Карточка — не ссылка целиком: теги внутри неё кликабельны сами по себе, а ссылка в ссылке
   невалидна. Ссылкой стала внутренняя часть (.guide-card-body), подсветка при этом осталась
   на всей карточке — снаружи разницы не видно. */
html[data-product="wiki"] .guide-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

html[data-product="wiki"] .guide-card:hover {
  border-color: var(--accent-soft);
  transform: translateY(-2px);
}

html[data-product="wiki"] .guide-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  text-decoration: none;
  /* Тянется на всю свободную высоту, чтобы теги прижимались к низу карточки, как раньше. */
  flex: 1;
}

html[data-product="wiki"] .guide-card-title {
  font-family: var(--font-heading);
  color: var(--text);
  font-size: 1.02rem;
  line-height: 1.3;
}

html[data-product="wiki"] .guide-card-summary {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html[data-product="wiki"] .guide-card-tags {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 0.3rem;
}

html[data-product="wiki"] .guide-card-tag {
  justify-content: center;
  font-size: 0.72rem;
  color: var(--accent);
  text-decoration: none;
  /* Тег ведёт на подборку статей с ним же. Реакция на наведение нужна именно потому, что
     раньше это был декор: без неё непонятно, что теперь по нему можно ткнуть. */
}

html[data-product="wiki"] .guide-card-tag > span {
  display: inline-flex;
  align-items: center;
  background: var(--accent-soft);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

html[data-product="wiki"] .guide-card-tag:hover > span {
  background: var(--accent);
  color: var(--bg, #0b0f16);
}

@media (max-width: 720px) {
  html[data-product="wiki"] .guide-article-page {
    padding: var(--space-lg) var(--space-md);
  }

  html[data-product="wiki"] .guide-markdown {
    font-size: 1rem;
  }

  html[data-product="wiki"] .guide-markdown > p:first-of-type {
    font-size: 1.12rem;
  }

  html[data-product="wiki"] .guide-hub-grid {
    grid-template-columns: 1fr;
  }
}

html[data-product="wiki"] .breadcrumbs {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}

html[data-product="wiki"] .breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--u-hit-area);
}

html[data-product="wiki"] .breadcrumbs a:hover {
  color: var(--text);
}

/* --- resources gallery --- */

html[data-product="wiki"] .resource-group {
  margin-top: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--space-sm) var(--space-md);
}

html[data-product="wiki"] .resource-group summary {
  cursor: pointer;
  font-family: var(--font-heading);
  color: var(--text);
  padding: 0.4rem 0;
}

html[data-product="wiki"] .resource-group-count {
  color: var(--muted);
  font-weight: 400;
}

html[data-product="wiki"] .resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

html[data-product="wiki"] .resource-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  text-decoration: none;
  overflow: hidden;
}

html[data-product="wiki"] .resource-tile:hover {
  border-color: var(--accent-soft);
}

html[data-product="wiki"] .resource-tile img {
  max-width: 100%;
  max-height: 4rem;
  object-fit: contain;
  image-rendering: pixelated;
}

html[data-product="wiki"] .resource-tile span {
  font-size: 0.65rem;
  color: var(--muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* --- responsive --- */

@media (max-width: 900px) {
  html[data-product="wiki"] .top-header-lang {
    display: none;
  }


  html[data-product="wiki"] .data-shell.with-infobox {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-product="wiki"] .infobox {
    border-left: none;
    border-top: 1px solid var(--line);
    position: static;
    order: -1;
  }
}

/* ============================================================
   Очередь модерации (Э4 плана правок гайдов)
   ============================================================ */

html[data-product="wiki"] .moderation-notice {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
}

html[data-product="wiki"] .moderation-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

html[data-product="wiki"] .moderation-item {
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: rgba(255, 255, 255, 0.02);
}

html[data-product="wiki"] .moderation-item-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Новый гайд и правка существующего разбираются по-разному — метка должна читаться
   раньше заголовка, иначе модератор открывает элемент, не зная, что его ждёт. */
html[data-product="wiki"] .moderation-kind {
  flex-shrink: 0;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line-bright, rgba(255, 255, 255, 0.24));
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

html[data-product="wiki"] .moderation-kind.is-new {
  border-color: rgba(47, 168, 255, 0.5);
  color: var(--accent);
}

html[data-product="wiki"] .moderation-item-title {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

html[data-product="wiki"] .moderation-item-title:hover {
  color: var(--accent);
}

html[data-product="wiki"] .moderation-item-slug,
html[data-product="wiki"] .moderation-item-meta {
  color: var(--muted);
  font-size: 0.85rem;
}

html[data-product="wiki"] .moderation-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.4rem;
}

/* Объяснение, почему форма закрыта. Читается как обычная страница, а не как ошибка:
   человек ничего не сломал, ему просто пока нельзя. */
html[data-product="wiki"] .propose-denied {
  text-align: center;
}

html[data-product="wiki"] .propose-denied .entity-body {
  max-width: 34rem;
  margin: 0 auto var(--space-lg);
  color: var(--muted);
}

/* Расхождение базовой ревизии. Красная рамка намеренно: одобрить такое, не разобравшись,
   значит затереть чужую правку — это не подсказка, а предупреждение. */
html[data-product="wiki"] .moderation-stale {
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--danger, #ff6b6b);
  border-left-width: 3px;
  border-radius: var(--radius-main);
  background: rgba(255, 107, 107, 0.08);
}

html[data-product="wiki"] .moderation-summary {
  margin-bottom: 1rem;
  color: var(--muted);
}

/* Записка автора к правке. Нейтральная, в отличие от красного предупреждения о расхождении:
   это не тревога, а контекст — что человек сам считает сутью правки. */
html[data-product="wiki"] .moderation-comment {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--line);
  border-radius: 0 var(--radius-main) var(--radius-main) 0;
  background: rgba(255, 255, 255, 0.03);
}

html[data-product="wiki"] .moderation-comment-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* --- диф --- */

html[data-product="wiki"] .diff-stat {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

html[data-product="wiki"] .diff-stat-added {
  color: var(--success, #4ade80);
}

html[data-product="wiki"] .diff-stat-removed {
  color: var(--danger, #ff6b6b);
}


/* pre-wrap: в Markdown переносы значимы, и «причесав» их для показа мы скрыли бы от
   модератора часть правки. */
html[data-product="wiki"] .diff-body {
  margin: 0;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: rgba(0, 0, 0, 0.25);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.6;
}

/* Цвет плюс подчёркивание/зачёркивание: только цветом различать нельзя — примерно каждый
   двенадцатый мужчина не увидит разницы между добавленным и удалённым. */
html[data-product="wiki"] .diff-ins {
  background: rgba(74, 222, 128, 0.16);
  color: var(--success, #4ade80);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

html[data-product="wiki"] .diff-del {
  background: rgba(255, 107, 107, 0.14);
  color: var(--danger, #ff6b6b);
  text-decoration: line-through;
}

html[data-product="wiki"] .diff-empty {
  margin-bottom: 1.5rem;
  color: var(--muted);
}

/* --- действия --- */

html[data-product="wiki"] .moderation-actions {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

html[data-product="wiki"] .moderation-field {
  display: grid;
  gap: 0.35rem;
  width: 100%;
}

html[data-product="wiki"] .moderation-field > span {
  font-size: 0.85rem;
  color: var(--muted);
}

html[data-product="wiki"] .moderation-field textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.6;
  resize: vertical;
}

html[data-product="wiki"] .moderation-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

html[data-product="wiki"] .moderation-sep {
  width: 100%;
  height: 1px;
  margin: 0.5rem 0;
  border: 0;
  background: var(--line);
}

html[data-product="wiki"] .moderation-message {
  color: var(--muted);
}

/* Отклонение — единственное действие в вики, которое нельзя отменить одним кликом
   (автор увидит отказ). Отделяем его цветом от обычных кнопок, но в той же оправе. */
html[data-product="wiki"] .btn-danger {
  border-color: rgba(255, 107, 107, 0.45);
  background: rgba(255, 107, 107, 0.1);
  color: #ffd8d8;
}

html[data-product="wiki"] .btn-danger:hover {
  border-color: var(--danger, #ff6b6b);
  background: rgba(255, 107, 107, 0.18);
}

html[data-product="wiki"] .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Третьестепенное действие рядом с двумя главными («Отправить» и «Сохранить черновик»):
   заметное настолько, чтобы найти, и не настолько, чтобы нажать случайно. */
html[data-product="wiki"] .btn-quiet {
  border-color: transparent;
  background: none;
  color: var(--muted);
}

html[data-product="wiki"] .btn-quiet:hover {
  border-color: var(--line);
  color: var(--text);
}

/* Ширина колонки — ровно как у настоящей страницы гайда (.guide-article, 44rem) плюс поля.
   Это не косметика: при другой ширине строки переносятся в других местах, и предпросмотр
   перестаёт показывать то, что увидит читатель. */
html[data-product="wiki"] .moderation-detail {
  max-width: calc(44rem + 2 * var(--space-lg));
  /* Центрируем: без margin-inline страница на широком мониторе прижимается влево. */
  margin-inline: auto;
}

html[data-product="wiki"] .editorial-badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: rgba(47, 168, 255, 0.18);
  color: var(--accent);
  font-size: 0.72rem;
  vertical-align: middle;
}

html[data-product="wiki"] .category-card.is-editorial {
  border-color: rgba(47, 168, 255, 0.28);
}

/* Статус присланной правки в «Моих гайдах». Цвет плюс слово — цветом одним не различаем. */
html[data-product="wiki"] .revision-status {
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--muted);
}

html[data-product="wiki"] .revision-status.is-pending {
  border-color: rgba(47, 168, 255, 0.45);
  color: var(--accent);
}

html[data-product="wiki"] .revision-status.is-approved {
  border-color: rgba(74, 222, 128, 0.45);
  color: var(--success, #4ade80);
}

html[data-product="wiki"] .revision-status.is-rejected {
  border-color: rgba(255, 107, 107, 0.5);
  color: var(--danger, #ff6b6b);
}

/* Причина отказа — то, ради чего автор сюда и заходит. Не прячем и не сокращаем. */
html[data-product="wiki"] .revision-reason {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--danger, #ff6b6b);
  border-radius: 0 var(--radius-main) var(--radius-main) 0;
  background: rgba(255, 107, 107, 0.07);
  font-size: 0.9rem;
}

/* --- черновики --- */

html[data-product="wiki"] .my-drafts {
  margin-bottom: var(--space-xl);
}

html[data-product="wiki"] .my-drafts-heading {
  font-family: var(--font-heading);
  margin: 0 0 0.3rem;
}

html[data-product="wiki"] .my-drafts-note {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 0.88rem;
}

/* Пунктир — единственное различие с присланными правками, и этого достаточно: черновик
   ничем не «хуже», он просто ещё не отправлен. */
html[data-product="wiki"] .moderation-item.is-draft {
  border-style: dashed;
}

html[data-product="wiki"] .revision-status.is-draft {
  border-color: var(--line);
  color: var(--muted);
}

/* Выглядит как соседняя ссылка «Продолжить»: два действия в одной строке, и разное
   оформление читалось бы как разная важность. */
html[data-product="wiki"] .my-drafts-delete {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

html[data-product="wiki"] .my-drafts-delete:hover:not(:disabled) {
  color: var(--danger, #ff6b6b);
}

html[data-product="wiki"] .my-drafts-delete:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Собственный комментарий автора в его же списке: заголовок у всех версий гайда один,
   и без этой строки три правки подряд выглядят одинаково. */
html[data-product="wiki"] .revision-comment {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

html[data-product="wiki"] .moderation-item.is-rejected {
  border-color: rgba(255, 107, 107, 0.28);
}

html[data-product="wiki"] .moderation-head {
  margin-bottom: 1.5rem;
}

html[data-product="wiki"] .moderation-head h1 {
  margin: 0 0 0.4rem;
}

/* ============================================================
   Разбор правки: гайд с подсвеченными изменениями
   ============================================================ */

html[data-product="wiki"] .review-stat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: baseline;
  margin: 0 0 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Один столбец во всю ширину текста: правку читают как гайд, а не сравнивают две колонки.
   Своей прокрутки нет намеренно — страница скроллится целиком, как обычная статья. */
html[data-product="wiki"] .review {
  margin-bottom: 2rem;
}

html[data-product="wiki"] .review-block {
  position: relative;
  /* Отрицательные поля гасят собственные отступы блока: неизменённый текст стоит там же,
     где на настоящей странице гайда, и подсветка ничего не сдвигает. */
  margin-inline: -0.9rem;
  padding: 0.3rem 0.9rem;
  border-radius: var(--radius-main);
  transition: background-color 140ms ease;
}

/* Первый абзац гайда крупнее — повторяем правило настоящей страницы, иначе предпросмотр
   отличался бы от того, что увидит читатель. */
html[data-product="wiki"] .review > .review-block:first-child .review-body > div > p:first-of-type {
  font-size: 1.28rem;
  line-height: 1.6;
  color: var(--text);
}

/* Цвет плюс полоса слева плюс подпись: только цветом различать нельзя. */
html[data-product="wiki"] .review-block.is-changed {
  background: rgba(245, 181, 68, 0.06);
  box-shadow: inset 3px 0 0 var(--warning, #f5b544);
}

html[data-product="wiki"] .review-block.is-added {
  background: rgba(74, 222, 128, 0.07);
  box-shadow: inset 3px 0 0 var(--success, #4ade80);
}

html[data-product="wiki"] .review-block.is-removed {
  background: rgba(255, 107, 107, 0.06);
  box-shadow: inset 3px 0 0 var(--danger, #ff6b6b);
  opacity: 0.75;
}

html[data-product="wiki"] .review-block.is-same:hover,
html[data-product="wiki"] .review-block.is-editing {
  background: rgba(255, 255, 255, 0.03);
}

/* Подпись и кнопки висят в промежутке над блоком, чтобы не раздвигать текст. */
html[data-product="wiki"] .review-meta {
  position: absolute;
  top: -0.8rem;
  right: 0.5rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* Прозрачная полоса не должна перехватывать выделение текста под ней. */
  pointer-events: none;
}

html[data-product="wiki"] .review-meta > * {
  pointer-events: auto;
}

html[data-product="wiki"] .review-badge {
  padding: 0.08rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-solid);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  white-space: nowrap;
}

html[data-product="wiki"] .review-badge.is-changed {
  color: var(--warning, #f5b544);
  border-color: rgba(245, 181, 68, 0.45);
}

html[data-product="wiki"] .review-badge.is-added {
  color: var(--success, #4ade80);
  border-color: rgba(74, 222, 128, 0.45);
}

html[data-product="wiki"] .review-badge.is-removed {
  color: var(--danger, #ff6b6b);
  border-color: rgba(255, 107, 107, 0.5);
}

html[data-product="wiki"] .review-badge.is-image {
  color: var(--accent);
  border-color: rgba(47, 168, 255, 0.5);
}

/* Кнопки появляются по наведению: иначе страница превращается в панель управления,
   а читать её нужно как гайд. */
html[data-product="wiki"] .review-tools {
  display: flex;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 140ms ease;
}

html[data-product="wiki"] .review-block:hover .review-tools,
html[data-product="wiki"] .review-block:focus-within .review-tools {
  opacity: 1;
}

/* Там, где наведения нет, прятать нечего — иначе с планшета до кнопок не добраться. */
@media (hover: none) {
  html[data-product="wiki"] .review-tools {
    opacity: 1;
  }
}

html[data-product="wiki"] .review-tool {
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-solid);
  color: var(--muted);
  font-family: inherit;
  font-size: 0.72rem;
  line-height: 1.6;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}

html[data-product="wiki"] .review-tool:hover {
  color: var(--text);
  border-color: var(--accent);
}

html[data-product="wiki"] .review-tool.is-active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(47, 168, 255, 0.16);
}

html[data-product="wiki"] .review-tool.is-edit {
  color: var(--accent);
}

html[data-product="wiki"] .review-body [hidden] {
  display: none;
}

html[data-product="wiki"] .review-body .diff-body {
  font-size: 0.8rem;
}

/* Подсветка изменившегося текста прямо в отрисованном гайде. Подчёркивание и зачёркивание
   дублируют цвет: примерно каждый двенадцатый мужчина зелёный от красного не отличит. */
html[data-product="wiki"] .review .review-ins {
  background: rgba(74, 222, 128, 0.18);
  color: var(--text);
  border-radius: 3px;
  padding: 0 0.12em;
  text-decoration: underline;
  text-decoration-color: rgba(74, 222, 128, 0.85);
  text-underline-offset: 0.18em;
}

html[data-product="wiki"] .review .review-del {
  background: rgba(255, 107, 107, 0.16);
  color: var(--text);
  border-radius: 3px;
  padding: 0 0.12em;
  text-decoration: line-through;
}

/* Подменённую картинку иначе не заметить: в разметке это одна строка, а на странице —
   просто другая картинка на том же месте. */
html[data-product="wiki"] .review .review-img-ins {
  border-color: var(--success, #4ade80);
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
}

html[data-product="wiki"] .review .review-img-del {
  border-color: var(--danger, #ff6b6b);
  box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25);
}

/* Правка на месте: блок подменяется полем с его исходником, остальной гайд остаётся на виду. */
html[data-product="wiki"] .review-editor textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-main);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.6;
  resize: vertical;
}

html[data-product="wiki"] .review-editor-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

/* --- заголовок, описание и теги правки --- */

html[data-product="wiki"] .review-meta-card {
  margin-bottom: 1.75rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: rgba(255, 255, 255, 0.02);
}

/* Изменившиеся поля отмечаем той же полосой, что и блоки текста: разбор один, значит и язык один. */
html[data-product="wiki"] .review-meta-card.is-changed {
  border-color: rgba(245, 181, 68, 0.35);
  box-shadow: inset 3px 0 0 var(--warning, #f5b544);
}

html[data-product="wiki"] .review-meta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

html[data-product="wiki"] .review-meta-head h2 {
  margin: 0;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

html[data-product="wiki"] .meta-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.6rem;
  padding: 0.3rem 0;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  html[data-product="wiki"] .meta-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

html[data-product="wiki"] .meta-label {
  color: var(--muted);
  font-size: 0.82rem;
}

html[data-product="wiki"] .meta-value {
  min-width: 0;
  color: var(--text);
  word-break: break-word;
}

html[data-product="wiki"] .meta-arrow {
  margin: 0 0.4rem;
  color: var(--muted);
}

html[data-product="wiki"] .meta-empty {
  color: var(--muted);
}

html[data-product="wiki"] .meta-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

html[data-product="wiki"] .meta-tag {
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--muted);
}

html[data-product="wiki"] .meta-tag.is-added {
  color: var(--success, #4ade80);
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(74, 222, 128, 0.12);
}

/* Снятый тег зачёркнут, а не просто красный: различать только цветом нельзя. */
html[data-product="wiki"] .meta-tag.is-removed {
  color: var(--danger, #ff6b6b);
  border-color: rgba(255, 107, 107, 0.45);
  background: rgba(255, 107, 107, 0.1);
  text-decoration: line-through;
}

html[data-product="wiki"] .meta-editor {
  display: grid;
  gap: 0.75rem;
}

html[data-product="wiki"] .meta-field {
  display: grid;
  gap: 0.25rem;
}

html[data-product="wiki"] .meta-field > span {
  font-size: 0.82rem;
  color: var(--muted);
}

html[data-product="wiki"] .meta-field > span em {
  font-style: normal;
  opacity: 0.7;
}

html[data-product="wiki"] .meta-field input,
html[data-product="wiki"] .meta-field textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

html[data-product="wiki"] .meta-field input:focus-visible,
html[data-product="wiki"] .meta-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Ссылка на соседний раздел очереди: правки и новые гайды разведены, но упираться в тупик
   модератор не должен. Показывается только когда там что-то есть. */
html[data-product="wiki"] .moderation-other {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
}

html[data-product="wiki"] .moderation-other-count {
  display: inline-block;
  min-width: 1.3rem;
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  background: rgba(47, 168, 255, 0.18);
  color: var(--accent);
  font-size: 0.78rem;
  text-align: center;
}



/* PRODUCT: admin. Source is runtime/design-system/src/products. */
/*
 * Оформление панели. Один файл на всё приложение — экранов десяток, и разносить их по
 * модулям значит потерять из виду, что кнопка на входе и кнопка в редакторе должны быть
 * одной кнопкой.
 *
 * Язык оформления взят у UnrealWiki (её src/styles/tokens.css и globals.css): те же
 * токены, тот же пепельный зернистый фон, те же вращающиеся знаки, тот же Beaufort в
 * заголовках. Панель внутренняя, но она из той же семьи, и переключаться между вики и
 * админкой не должно ощущаться как переезд в другой продукт.
 *
 * Отличия от вики намеренные и все в одну сторону — тише: знаки бледнее, свечения меньше,
 * панели спокойнее. Здесь работают часами, а не любуются.
 */

html[data-product="admin"] {
  --gold: #d4af37;
  --topbar-h: 3.4rem;
  --shell: 82rem;
}

html[data-product="admin"] body {
  position: relative; /* контейнер для .ambient-sigils: знаки живут в потоке страницы */
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}

/* Знаки войны богов: два кольца, холодное и тёплое, вращаются навстречу друг другу и
   садятся в случайное место на каждой странице (см. AmbientSigils.tsx). Позиционируются
   от body, а не от окна, поэтому уезжают вместе со страницей, как обычное содержимое.
   overflow: hidden режет то, что вылезло за край, — сами прокрутки они не создают. */
html[data-product="admin"] .ambient-sigils {
  z-index: 0;
}

html[data-product="admin"] .ambient-sigil {
  width: 26rem;
  height: 26rem;
  opacity: 0.16;
}

html[data-product="admin"] .ambient-sigil-warm {
  /* Тёплый знак — конические лучи, они читаются заметно сильнее холодных колец при той же
     прозрачности. Гасим отдельно, чтобы два знака весили одинаково. */
  opacity: 0.11;
}

@media (max-width: 900px) {
  html[data-product="admin"] .ambient-sigil {
    width: 16rem;
    height: 16rem;
  }
}

/* --- Типографика --- */

html[data-product="admin"] h1,
html[data-product="admin"] h2,
html[data-product="admin"] h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0;
}

html[data-product="admin"] code,
html[data-product="admin"] kbd {
  font-family: var(--font-mono);
}

html[data-product="admin"] a {
  color: var(--accent);
}

/* --- Поля ввода: один вид на всё приложение --- */

/* Через :not(), а не перечислением input[type=…]. Поле без атрибута type — обычный текст
   по спецификации, но `input[type="text"]` его НЕ выбирает: селектор смотрит на атрибут,
   а его нет. Такие поля (адрес, заголовок, анонс) оставались в системном оформлении —
   квадратные и светлые посреди тёмной панели. */
html[data-product="admin"] input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"], [type="range"]), html[data-product="admin"] select, html[data-product="admin"] textarea {
  width: 100%;
  min-width: 0;
  padding: 0 0.7rem;
  height: var(--control-h);
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: var(--raised);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

html[data-product="admin"] textarea {
  height: auto;
  padding: 0.7rem;
  line-height: 1.55;
  resize: vertical;
}

html[data-product="admin"] select {
  cursor: pointer;
}

html[data-product="admin"] input:focus,
html[data-product="admin"] select:focus,
html[data-product="admin"] textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

html[data-product="admin"] input::placeholder,
html[data-product="admin"] textarea::placeholder {
  color: var(--faint);
}

/* --- Кнопки --- */

html[data-product="admin"] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: var(--control-h);
  padding: 0 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-main);
  background: var(--raised);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

html[data-product="admin"] .btn:hover:not(:disabled) {
  border-color: var(--accent-soft);
  background: rgba(47, 168, 255, 0.1);
}

html[data-product="admin"] .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

html[data-product="admin"] .btn--primary {
  border-color: var(--accent-soft);
  background: linear-gradient(180deg, rgba(47, 168, 255, 0.3), rgba(47, 168, 255, 0.08));
  font-weight: 600;
}

html[data-product="admin"] .btn--primary:hover:not(:disabled) {
  box-shadow: 0 0 16px var(--accent-glow);
}

html[data-product="admin"] .btn--danger {
  color: var(--muted);
}

html[data-product="admin"] .btn--danger:hover:not(:disabled) {
  border-color: rgba(255, 107, 107, 0.55);
  background: rgba(255, 107, 107, 0.08);
  color: var(--danger);
}

/* Оранжевая: отмена уже назначенного. Не красная — ничего не разрушается, пост остаётся
   черновиком; и не серая — это отмена того, что человек включил осознанно. */
html[data-product="admin"] .btn--warn {
  border-color: rgba(255, 181, 112, 0.5);
  background: rgba(255, 181, 112, 0.12);
  color: var(--warn);
}

html[data-product="admin"] .btn--warn:hover:not(:disabled) {
  border-color: var(--warn);
  background: rgba(255, 181, 112, 0.2);
}

html[data-product="admin"] .btn--small {
  height: 1.95rem;
  padding: 0 0.65rem;
  font-size: 0.78rem;
}

html[data-product="admin"] .btn--icon {
  width: var(--control-h);
  padding: 0;
}

/* --- Карточка: базовая единица всех экранов --- */

html[data-product="admin"] .card {
  position: relative;
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    var(--panel);
  backdrop-filter: blur(16px);
}

/* Открытый календарь должен всплыть над соседней карточкой. Своего z-index ему для этого
   мало: backdrop-filter делает каждую карточку собственным контекстом наложения, а внутри
   контекста как ни поднимайся — соседа, который идёт следом по документу, не перебьёшь.
   Поднимать надо саму карточку, что и делает :has(). */
html[data-product="admin"] .card:has(.calendar),
html[data-product="admin"] .card:has(.selectfield-list) {
  z-index: 41;
}

html[data-product="admin"] .card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
}

html[data-product="admin"] .card-title {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
}

html[data-product="admin"] .card-note {
  color: var(--faint);
  font-size: 0.8rem;
}

/* --- Поле с подписью --- */

html[data-product="admin"] .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

html[data-product="admin"] .field-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
}

html[data-product="admin"] .field-hint {
  margin: 0;
  color: var(--faint);
  font-size: 0.75rem;
  line-height: 1.45;
}

html[data-product="admin"] .field-hint--warn {
  color: var(--warn);
}

/**
 * Ошибка — блоком, а не строчкой подсказки.
 *
 * Отказ выглядел ровно так же, как объяснение: тот же кегль, тот же ряд, разница только в
 * оттенке серого. Проблему надо видеть, не читая всё подряд, — отсюда заливка, полоса
 * слева и цвет опасности.
 */
html[data-product="admin"] .form-error {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  /* Отступ с обеих сторон, а не только сверху: блок встаёт то под заголовком, то над
     кнопкой, и без нижнего поля он к ним прилипал. */
  margin: var(--space-sm) 0 var(--space-md);
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(255, 107, 107, 0.4);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-main);
  background: rgba(255, 107, 107, 0.08);
  color: var(--text);
  font-size: 0.8rem;
  line-height: 1.45;
}

html[data-product="admin"] .form-error::before {
  content: "!";
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--danger);
  color: #1a0a0a;
  font-weight: 700;
  font-size: 0.7rem;
  line-height: 1.05rem;
  text-align: center;
}

/* То же самое, но про «пока нельзя»: это не поломка, а незаконченная работа. */
html[data-product="admin"] .form-warn {
  border-color: rgba(255, 181, 112, 0.4);
  border-left-color: var(--warn);
  background: rgba(255, 181, 112, 0.08);
}

html[data-product="admin"] .form-warn::before {
  background: var(--warn);
  color: #1a1207;
}

/**
 * Чип — переключатель на месте, где подпись была бы дороже пользы: в шапке карточки.
 * Не кнопка: он не делает, а держит состояние, поэтому и выглядит меткой.
 */
html[data-product="admin"] .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 1.65rem;
  padding: 0 0.6rem;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

html[data-product="admin"] .chip:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

html[data-product="admin"] .chip::before {
  content: "@";
  font-weight: 700;
  opacity: 0.6;
}

html[data-product="admin"] .chip[data-on] {
  border-style: solid;
  border-color: var(--accent-soft);
  background: rgba(47, 168, 255, 0.12);
  color: var(--text);
}

html[data-product="admin"] .chip[data-on]::before {
  opacity: 1;
  color: var(--accent);
}

html[data-product="admin"] .field-row {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

/* --- Общая оболочка --- */

html[data-product="admin"] .app-shell {
  position: relative;
  z-index: 1; /* над зернью и знаками */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

html[data-product="admin"] .app-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--line);
  background: rgba(6, 8, 12, 0.82);
  backdrop-filter: blur(18px);
}

html[data-product="admin"] .app-topbar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--shell);
  height: var(--topbar-h);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* В разметке имя панели стоит после кнопки меню. На широком экране самой кнопки нет,
   поэтому имя визуально возвращается в начало строки; мобильный порядок задан ниже. */
html[data-product="admin"] .app-brand {
  order: -1;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Свечение — как у заголовков портала (`hud.css`, .hud-title): та же холодная дуга,
     только тише. Здесь работают часами, и вывеска не должна кричать. */
  color: #eef3f8;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 0.5),
    0 0 10px rgba(78, 194, 255, 0.35),
    0 0 22px rgba(34, 162, 235, 0.18);
}

/* Разделы меню строятся из тех же правил, что закрывают роуты (SECTIONS в lib/staff.ts),
   поэтому у нулевого уровня список пуст сам собой, без отдельного условия. */
html[data-product="admin"] .app-nav {
  display: flex;
  gap: var(--space-xs);
}

html[data-product="admin"] .app-navlink {
  display: inline-flex;
  align-items: center;
  height: 1.9rem;
  padding: 0 0.7rem;
  border-radius: var(--radius-main);
  border: 1px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
}

html[data-product="admin"] .app-navlink:hover {
  border-color: var(--accent-soft);
  background: rgba(47, 168, 255, 0.08);
  color: var(--text);
}

html[data-product="admin"] .app-navlink.is-active {
  color: var(--text);
  border-color: var(--line);
}

/* Кнопка разделов. На широком экране её нет вовсе: разделов два-три, они помещаются
   строкой, и прятать их за жестом значило бы добавить работы на ровном месте. */
html[data-product="admin"] .app-burger {
  display: none;
  flex: 0 0 var(--control-h);
  width: var(--control-h);
  height: var(--control-h);
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-main);
  background: var(--raised);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

html[data-product="admin"] .app-burger:hover {
  border-color: var(--accent-soft);
}

html[data-product="admin"] .app-user {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  color: var(--text);
  font-size: 0.85rem;
}

html[data-product="admin"] .app-level {
  color: var(--faint);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}


html[data-product="admin"] .app-content {
  flex: 1;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--space-lg);
}

html[data-product="admin"] .app-empty {
  max-width: 52ch;
  margin: 10vh auto 0;
  text-align: center;
  color: var(--muted);
}

html[data-product="admin"] .app-empty h1 {
  margin-bottom: var(--space-sm);
  font-size: 1.3rem;
  color: var(--text);
}

html[data-product="admin"] .page-title {
  margin-bottom: var(--space-lg);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* В шапке отступ держит сама шапка — иначе он удваивается. */
html[data-product="admin"] .page-head .page-title {
  margin-bottom: 0;
}

html[data-product="admin"] .page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

html[data-product="admin"] .page-head p {
  margin: 0;
  color: var(--faint);
  font-size: 0.85rem;
}

html[data-product="admin"] .section-title {
  margin-bottom: var(--space-xs);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

html[data-product="admin"] .section-hint {
  margin: 0 0 var(--space-md);
  color: var(--muted);
  font-size: 0.85rem;
}

/* --- Экран входа --- */

html[data-product="admin"] .auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--space-lg);
}

html[data-product="admin"] .auth-card {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    var(--panel);
  backdrop-filter: blur(16px);
}

html[data-product="admin"] .auth-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[data-product="admin"] .auth-subtitle {
  margin: -0.6rem 0 0;
  color: var(--faint);
  font-size: 0.85rem;
}

html[data-product="admin"] .auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
}

html[data-product="admin"] .auth-field input,
html[data-product="admin"] .auth-field textarea {
  text-transform: none;
  letter-spacing: normal;
}

html[data-product="admin"] .auth-error {
  margin: 0;
  color: var(--danger);
  font-size: 0.85rem;
}

html[data-product="admin"] .auth-hint {
  text-transform: none;
  letter-spacing: normal;
  color: var(--faint);
  font-size: 0.75rem;
}

html[data-product="admin"] .auth-altlink {
  text-align: center;
  color: var(--faint);
  font-size: 0.82rem;
  text-decoration: none;
}

html[data-product="admin"] .auth-altlink:hover {
  color: var(--text);
}

/* Кнопка входа тянется на всю карточку — единственное, что отличает её от обычной
   .btn--primary. */
html[data-product="admin"] .auth-submit {
  width: 100%;
}

/* --- Список новостей --- */

/* Сеткой, а не flex-ряду: поле и кнопка делят первую строку и ровняются по низу
   (высота у обоих одна — --control-h), подпись занимает вторую целиком. */
html[data-product="admin"] .news-new {
  display: grid;
  grid-template-columns: minmax(0, 26rem) max-content;
  align-items: end;
  column-gap: var(--space-md);
  row-gap: 0.4rem;
  margin-bottom: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--panel);
  backdrop-filter: blur(16px);
}

html[data-product="admin"] .news-new-field {
  grid-column: 1;
}

html[data-product="admin"] .news-new > .btn {
  grid-column: 2;
}

/* Строго в колонке поля, а не во всю ширину: колонка кнопки — max-content, и растянутая
   на обе подпись отдала бы ей весь свой избыток ширины. Кнопка раздувалась вдвое. */
html[data-product="admin"] .news-new-hint {
  grid-column: 1;
}

html[data-product="admin"] .news-group {
  margin-bottom: var(--space-lg);
}

html[data-product="admin"] .news-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

html[data-product="admin"] .news-count {
  color: var(--faint);
  font-size: 0.8rem;
}

html[data-product="admin"] .dashboard-empty {
  margin: 0;
  color: var(--faint);
  font-size: 0.88rem;
}

html[data-product="admin"] .dashboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

html[data-product="admin"] .dashboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line);
  border-left: 2px solid transparent;
  border-radius: var(--radius-main);
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease;
}

html[data-product="admin"] a.dashboard-item:hover {
  border-color: var(--accent-soft);
  border-left-color: var(--accent);
  background: rgba(47, 168, 255, 0.06);
}

html[data-product="admin"] .dashboard-item-main {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

html[data-product="admin"] .dashboard-item-main strong {
  font-weight: 600;
}

html[data-product="admin"] .dashboard-item-main code {
  color: var(--faint);
  font-size: 0.74rem;
}

html[data-product="admin"] .dashboard-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
}

html[data-product="admin"] .status {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}

/* Запланированный черновик в списке — видно, что он уйдёт сам. */
html[data-product="admin"] .status-scheduled {
  color: var(--accent);
}

/* Языки поста: заполненный горит, обязательный без перевода — красным. Видно с одного
   взгляда, что мешает публикации. */
html[data-product="admin"] .locale-dots {
  display: flex;
  gap: 0.15rem;
}

html[data-product="admin"] .locale-dot {
  display: grid;
  place-items: center;
  width: 1.75rem;
  min-height: 1.4rem;
  padding: 0.15rem;
  border-radius: 0.25rem;
  border: 1px solid var(--line);
  color: var(--faint);
  opacity: 0.45;
}

html[data-product="admin"] .locale-dot-flag {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.08rem;
}

html[data-product="admin"] .locale-dot[data-present] {
  opacity: 1;
  border-color: var(--accent-soft);
  color: var(--text);
}

html[data-product="admin"] .locale-dot[data-required]:not([data-present]) {
  opacity: 1;
  border-color: rgba(255, 107, 107, 0.6);
  color: var(--danger);
}

/* --- Редактор новости --- */

html[data-product="admin"] .editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Панель действий липнет под шапкой: черновик длинный, а «Сохранить» нужно всегда под
   рукой — иначе за ним каждый раз крутить в самый низ. */
html[data-product="admin"] .editor-bar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) 0;
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--line);
  background: rgba(6, 8, 12, 0.86);
  backdrop-filter: blur(18px);
}

html[data-product="admin"] .editor-back {
  display: inline-flex;
  align-items: center;
  height: 1.95rem;
  padding: 0 0.6rem;
  border-radius: var(--radius-main);
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
}

html[data-product="admin"] .editor-back:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

html[data-product="admin"] .editor-bar-title {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
  margin-right: auto;
}

html[data-product="admin"] .editor-bar-title strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}

html[data-product="admin"] .editor-bar-title code {
  color: var(--faint);
  font-size: 0.72rem;
}

html[data-product="admin"] .editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: start;
}

html[data-product="admin"] .editor-grid--two {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

@media (max-width: 60rem) {
  html[data-product="admin"] .editor-grid,
  html[data-product="admin"] .editor-grid--two {
    grid-template-columns: 1fr;
  }
}

/* Адрес — поле с кнопкой в одну строку: ввод и «Переименовать» это одно действие. */
html[data-product="admin"] .editor-slug {
  display: flex;
  gap: var(--space-xs);
}

html[data-product="admin"] .editor-slug input {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

html[data-product="admin"] .editor-author {
  display: flex;
  align-items: center;
  height: var(--control-h);
  font-size: 0.92rem;
}

/* Обложка */

html[data-product="admin"] .cover-row {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

html[data-product="admin"] .cover-preview,
html[data-product="admin"] .cover-placeholder {
  width: 15rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-main);
  flex: none;
}

html[data-product="admin"] .cover-preview {
  object-fit: cover;
  border: 1px solid var(--line);
  /* Обложки бывают с прозрачностью (PNG с логотипом), и на тёмной панели такая картинка
     выглядит обрезанной. Шахматка показывает прозрачность как прозрачность. */
  background:
    repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0% 25%, transparent 0% 50%) 50% / 14px 14px;
}

html[data-product="admin"] .cover-placeholder {
  display: grid;
  place-items: center;
  padding: var(--space-sm);
  border: 1px dashed var(--line-strong);
  color: var(--faint);
  font-size: 0.8rem;
  text-align: center;
}

html[data-product="admin"] .cover-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 16rem;
  flex: 1;
}

html[data-product="admin"] .cover-actions {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

/* Переключатель режима доставки обложки. Тумблер, а не галочка: у него два равноправных
   состояния, и оба что-то значат. */
html[data-product="admin"] .switch {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}

html[data-product="admin"] .switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

html[data-product="admin"] .switch-track {
  position: relative;
  flex: none;
  width: 2.4rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--raised);
  transition: background 140ms ease, border-color 140ms ease;
}

html[data-product="admin"] .switch-track::after {
  content: "";
  position: absolute;
  top: 0.18rem;
  left: 0.2rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 160ms ease, background 140ms ease;
}

html[data-product="admin"] .switch input:checked + .switch-track {
  border-color: var(--accent-soft);
  background: rgba(47, 168, 255, 0.22);
}

html[data-product="admin"] .switch input:checked + .switch-track::after {
  transform: translateX(0.98rem);
  background: var(--accent);
}

html[data-product="admin"] .switch input:focus-visible + .switch-track {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

html[data-product="admin"] .switch-text {
  display: grid;
  gap: 0.15rem;
  font-size: 0.85rem;
}

html[data-product="admin"] .switch-text small {
  color: var(--faint);
  font-size: 0.75rem;
  line-height: 1.45;
}

/* Языки */

html[data-product="admin"] .locale-tabs {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

html[data-product="admin"] .locale-tab {
  height: 1.85rem;
  min-width: 2.4rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

html[data-product="admin"] .locale-tab[data-filled] {
  color: var(--text);
  border-color: var(--line-strong);
}

/* Язык, написанный вопреки виду: остался от прежнего региона. Вкладку не прячем — текст
   на диске никуда не делся и уйдёт на сайт, — но помечаем пунктиром, чтобы никто не решил,
   будто он попадёт и в каналы. */
html[data-product="admin"] .locale-tab[data-offscope] {
  border-style: dashed;
  border-color: var(--warn);
}

html[data-product="admin"] .locale-tab[data-required]:not([data-filled]) {
  border-color: rgba(255, 107, 107, 0.6);
  color: var(--danger);
}

html[data-product="admin"] .locale-tab[data-active] {
  border-color: var(--accent);
  background: rgba(47, 168, 255, 0.14);
  color: var(--text);
}

/* Текст и предпросмотр */

html[data-product="admin"] .editor-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  margin-top: var(--space-md);
}

@media (max-width: 56rem) {
  html[data-product="admin"] .editor-split {
    grid-template-columns: 1fr;
  }
}

html[data-product="admin"] .editor-pane {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

html[data-product="admin"] .editor-textarea-wrap {
  position: relative;
}

/* --- Шпаргалка по разметке --- */

html[data-product="admin"] .markdown-help {
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: var(--raised);
}

html[data-product="admin"] .markdown-help > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  color: var(--faint);
  font-size: 0.75rem;
  cursor: pointer;
  /* Свой маркер вместо системного треугольника: он рисуется по-разному в каждом браузере
     и ни в один из них не попадает в типографику панели. */
  list-style: none;
}

html[data-product="admin"] .markdown-help > summary::-webkit-details-marker {
  display: none;
}

html[data-product="admin"] .markdown-help > summary:hover {
  color: var(--text);
}

html[data-product="admin"] .markdown-help-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
}

html[data-product="admin"] .markdown-help[open] .markdown-help-badge {
  border-color: var(--accent);
  color: var(--accent);
}

html[data-product="admin"] .markdown-help-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.3rem 0.9rem;
  margin: 0;
  padding: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
}

html[data-product="admin"] .markdown-help-list dt code {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text);
  white-space: nowrap;
}

html[data-product="admin"] .markdown-help-list dd {
  margin: 0;
  color: var(--muted);
}

/* --- AI-кнопки --- */

/* Отличаются от обычных намеренно: они стоят денег, идут десятки секунд и возвращают не
   гарантированный результат. Человек должен видеть, что нажимает, — но акцент сдержанный,
   иначе панель превратится в витрину нейросети вместо рабочего инструмента. */
html[data-product="admin"] .btn--ai {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong));
  color: var(--accent);
}

html[data-product="admin"] .btn--ai:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(47, 168, 255, 0.12);
}

html[data-product="admin"] .btn--ai .wand {
  flex: none;
  opacity: 0.85;
}

/* Заголовок карточки и кнопка при нём — одной группой. Иначе `space-between` у card-head
   растащил бы их по разным краям, и кнопка оказалась бы посередине, ничья. */
html[data-product="admin"] .card-head-group {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

html[data-product="admin"] .cover-scene {
  margin: 0;
  padding: 0.7rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

html[data-product="admin"] .editor-textarea {
  width: 100%;
  height: min(58vh, 34rem);
  padding: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.65;
  resize: none;
}

html[data-product="admin"] .editor-textarea[data-drag-over="true"] {
  border-color: var(--accent);
  background: rgba(47, 168, 255, 0.07);
}

html[data-product="admin"] .editor-preview {
  height: min(58vh, 34rem);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: rgba(0, 0, 0, 0.28);
  overflow-y: auto;
}

/* Предпросмотр показывает то, что увидит читатель на сайте, поэтому здесь свой ритм
   текста — не такой плотный, как в интерфейсе вокруг. */
html[data-product="admin"] .editor-markdown {
  font-size: 0.92rem;
  line-height: 1.7;
}

html[data-product="admin"] .editor-markdown :is(h1, h2, h3) {
  font-family: var(--font-heading);
  margin: 1.4em 0 0.5em;
  color: var(--text);
}

html[data-product="admin"] .editor-markdown :is(h1, h2, h3):first-child {
  margin-top: 0;
}

html[data-product="admin"] .editor-markdown h1 {
  font-size: 1.35rem;
}

html[data-product="admin"] .editor-markdown h2 {
  font-size: 1.15rem;
}

html[data-product="admin"] .editor-markdown h3 {
  font-size: 1rem;
}

html[data-product="admin"] .editor-markdown p {
  margin: 0 0 1em;
}

html[data-product="admin"] .editor-markdown img {
  max-width: 100%;
  border-radius: var(--radius-main);
}

html[data-product="admin"] .editor-markdown blockquote {
  margin: 1em 0;
  padding-left: var(--space-md);
  border-left: 2px solid var(--accent-soft);
  color: var(--muted);
  font-style: italic;
}

html[data-product="admin"] .editor-markdown code {
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.86em;
}

html[data-product="admin"] .editor-markdown table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

html[data-product="admin"] .editor-markdown :is(th, td) {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  text-align: left;
}

/* Плавающая панель форматирования над выделением */

html[data-product="admin"] .editor-toolbar {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-main);
  background: var(--panel-solid);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  transform: translateY(-100%);
  margin-top: -6px;
}

html[data-product="admin"] .editor-toolbar button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: none;
  border-radius: 0.35rem;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

html[data-product="admin"] .editor-toolbar button:hover {
  background: rgba(47, 168, 255, 0.16);
}

html[data-product="admin"] .editor-toolbar-sep {
  width: 1px;
  height: 1.2rem;
  margin: 0 0.15rem;
  background: var(--line);
}

html[data-product="admin"] .editor-file-input {
  display: none;
}

/* Строка состояния сохранения */

html[data-product="admin"] .editor-status {
  font-size: 0.82rem;
  color: var(--muted);
}

html[data-product="admin"] .editor-status-ok {
  color: var(--ok);
}

html[data-product="admin"] .editor-status-error {
  color: var(--danger);
}

html[data-product="admin"] .editor-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-sm);
}

/* --- Анонсы по площадкам --- */

html[data-product="admin"] .platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (max-width: 60rem) {
  html[data-product="admin"] .platform-grid {
    grid-template-columns: 1fr;
  }
}

html[data-product="admin"] .platform-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: rgba(0, 0, 0, 0.22);
}

html[data-product="admin"] .platform-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.85rem;
  font-weight: 600;
}

html[data-product="admin"] .platform-name {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

/* Цвет площадки — единственное, что отличает три одинаковые карточки друг от друга с
   расстояния. Берём фирменные, они узнаются быстрее любой подписи. */
html[data-product="admin"] .platform-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--platform-color, var(--accent));
  box-shadow: 0 0 8px var(--platform-color, var(--accent));
}

html[data-product="admin"] .platform-card[data-platform="discord"] {
  --platform-color: #5865f2;
}

html[data-product="admin"] .platform-card[data-platform="telegram"] {
  --platform-color: #29a9eb;
}

html[data-product="admin"] .platform-card[data-platform="vk"] {
  --platform-color: #0077ff;
}

html[data-product="admin"] .platform-count {
  color: var(--faint);
  font-size: 0.75rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

html[data-product="admin"] .platform-count[data-over="true"] {
  color: var(--danger);
  font-weight: 600;
}

/* Предпросмотр — то же поле, только не редактируемое: одинаковая рамка и одинаковая
   высота, чтобы включение своего текста не дёргало сетку. */
html[data-product="admin"] .platform-preview {
  margin: 0;
  min-height: 7.5rem;
  padding: 0.7rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-main);
  background: rgba(255, 255, 255, 0.02);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

html[data-product="admin"] .platform-preview[data-empty] {
  display: grid;
  place-items: center;
  border-color: rgba(255, 107, 107, 0.45);
  color: var(--danger);
  text-align: center;
}

html[data-product="admin"] .platform-actions {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

html[data-product="admin"] .platform-card textarea {
  min-height: 7.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
}

html[data-product="admin"] .platform-card textarea[data-over="true"] {
  border-color: rgba(255, 107, 107, 0.7);
}

/* --- Публикация --- */

/* Панель публикации — сосед редактора, а не его часть: у неё своё право доступа, и
   рисуется она страницей отдельно. Отступ поэтому свой. */
/* Карточка, идущая сразу ЗА редактором, — панель публикации или рассылки. Отступ живёт
   здесь, а не в `.editor`: панель редактору не потомок, а сосед, и его flex-gap до неё
   не дотягивается. Без этого правила карточки склеивались в одну плиту. */
html[data-product="admin"] .editor-panel {
  margin-top: var(--space-md);
}

html[data-product="admin"] .publish-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

html[data-product="admin"] .publish-schedule {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

html[data-product="admin"] .publish-schedule .datefield {
  min-width: 15rem;
}

/* Удаление отжато к правому краю: это выход из ряда «что сделать с постом», а не
   следующий его пункт. */
html[data-product="admin"] .publish-delete {
  margin-left: auto;
}

html[data-product="admin"] .publish-note {
  margin: var(--space-md) 0 0;
  color: var(--faint);
  font-size: 0.8rem;
}

html[data-product="admin"] .published-actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

/* --- Журнал доставки --- */

html[data-product="admin"] .delivery-log {
  margin: var(--space-lg) 0;
  text-align: left;
}

html[data-product="admin"] .delivery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xs);
}

html[data-product="admin"] .delivery-row {
  display: grid;
  grid-template-columns: 7rem 1fr auto;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  border-radius: var(--radius-main);
  background: var(--panel);
  font-size: 0.85rem;
}

html[data-product="admin"] .delivery-platform {
  color: var(--muted);
}

html[data-product="admin"] .delivery-row[data-status="ok"] {
  border-left-color: var(--ok);
}

html[data-product="admin"] .delivery-row[data-status="ok"] .delivery-status {
  color: var(--ok);
}

html[data-product="admin"] .delivery-row[data-status="failed"] {
  border-color: rgba(255, 107, 107, 0.4);
  border-left-color: var(--danger);
}

html[data-product="admin"] .delivery-row[data-status="failed"] .delivery-status {
  color: var(--danger);
}

/* Прошлый выпуск: не успех и не отказ, а история. Гасим строку целиком, чтобы взгляд шёл
   мимо неё к тому, что происходит сейчас, — цветную полосу слева не даём вовсе. */
html[data-product="admin"] .delivery-row[data-status="stale"] {
  opacity: 0.55;
}

html[data-product="admin"] .delivery-row[data-status="stale"] .delivery-status {
  color: var(--faint);
}

html[data-product="admin"] .delivery-when {
  color: var(--faint);
}

html[data-product="admin"] .delivery-link {
  color: var(--accent);
  text-decoration: none;
}

html[data-product="admin"] .delivery-link:hover {
  text-decoration: underline;
}

/* Текст ошибки площадки — во всю ширину строки под остальными полями. */
html[data-product="admin"] .delivery-error {
  grid-column: 1 / -1;
  margin: var(--space-xs) 0 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
  html[data-product="admin"] .delivery-row {
    grid-template-columns: 1fr auto;
  }

  html[data-product="admin"] .delivery-platform {
    grid-column: 1 / -1;
  }

  /* Шапка на телефоне. Порог здесь свой, уже общего «узкого экрана»: до 40rem строка
     «имя панели + разделы + человек + выход» ещё складывается, а ниже — уже нет. */

  html[data-product="admin"] .app-burger {
    display: grid;
  }

  /* На телефоне навигационный контрол ожидаемо стоит в левом углу, затем — марка панели. */
  html[data-product="admin"] .app-brand {
    order: 0;
    font-size: 0.92rem;
    letter-spacing: 0.12em;
  }

  html[data-product="admin"] .app-brand-family {
    display: none;
  }

  /* Разделы выпадают из-под шапки во всю ширину — как в портале. Шапка липкая, то есть
     позиционированная, и служит этому списку системой координат сама. */
  html[data-product="admin"] .app-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.3rem var(--space-md) var(--space-sm);
    border-bottom: 1px solid var(--line);
    /* Почти непрозрачно: под меню едет список новостей, и его заголовки, просвечивая
       сквозь пункты, читались как второй набор пунктов. */
    background: rgba(8, 10, 14, 0.985);
    backdrop-filter: blur(18px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
  }

  html[data-product="admin"] .app-nav.is-open {
    display: flex;
  }

  html[data-product="admin"] .app-nav .app-navlink {
    height: auto;
    padding: 0.7rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    font-size: 0.95rem;
  }

  html[data-product="admin"] .app-nav .app-navlink:last-child {
    border-bottom: 0;
  }
}

/* --- Узкий экран ---
   Панель — инструмент настольный, и верстать её под телефон целиком незачем. Но
   «незачем оптимизировать» и «пусть разъезжается» — разное: с планшета и с ноутбука в
   поезде сюда заходят, и шапка не должна наезжать на кнопку сохранения. */

@media (max-width: 48rem) {
  html[data-product="admin"] .app-topbar-inner {
    gap: var(--space-sm);
    /* Внешний inset равен свободному месту над/под контролом: кнопки образуют
       симметричную рамку шапки со всех четырёх сторон. */
    padding: 0 calc((var(--topbar-h) - var(--control-h)) / 2);
  }

  html[data-product="admin"] .app-content {
    padding: var(--space-md);
  }

  html[data-product="admin"] .editor-bar {
    margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) 0;
    padding: var(--space-sm) var(--space-md);
  }

  /* Название и адрес поста в липкой панели — справка, а не управление: на узком экране
     они отбирают место у единственной кнопки, ради которой панель и липнет. */
  html[data-product="admin"] .editor-bar-title {
    display: none;
  }

  html[data-product="admin"] .editor-slug {
    flex-wrap: wrap;
  }

  html[data-product="admin"] .card {
    padding: var(--space-md);
  }

  html[data-product="admin"] .cover-preview,
  html[data-product="admin"] .cover-placeholder {
    width: 100%;
  }

  html[data-product="admin"] .cover-side {
    min-width: 0;
  }

  /* Заголовок раздела и пояснение к нему — в столбик: рядом пояснению остаётся полторы
     колонки текста, и оно рвётся на пять строк, поднимая заголовок к потолку. */
  html[data-product="admin"] .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }

  /* Поле адреса и кнопка — в столбик. Колонка кнопки была `max-content` и не сжималась,
     так что всё сжатие доставалось полю: под адрес оставалось сантиметра полтора. */
  html[data-product="admin"] .news-new {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-md);
  }

  html[data-product="admin"] .news-new > .btn {
    grid-column: 1;
  }

  /* Строка списка — в два этажа. Метки языков и статус занимают под 250px и не
     сжимаются (`flex-shrink: 0`), поэтому заголовку доставалось сорок точек, он рвался
     на пять строк, а метки вставали ровно поперёк него. */
  html[data-product="admin"] .dashboard-item {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  html[data-product="admin"] .dashboard-item-meta {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-sm);
  }

  /* Восемь языков в ряд не помещаются даже метками по 28 точек — отдаём им целую
     строку, а вид и дата встают под ними одной ровной парой. */
  html[data-product="admin"] .locale-dots {
    flex: 1 0 100%;
    flex-wrap: wrap;
  }

  html[data-product="admin"] .dashboard-item-meta .status {
    white-space: nowrap;
  }

  /* Шесть колонок на телефон не кладутся ни сжатием, ни переносом: даже пустив таблицу
     в горизонтальный скролл, до кнопки «Отключить» пришлось бы доезжать. Поэтому строка
     разворачивается в карточку — подпись слева, значение справа, — а шапка прячется:
     её работу берут на себя `data-label` у ячеек. */
  html[data-product="admin"] .staff-table thead {
    display: none;
  }

  html[data-product="admin"] .staff-table,
  html[data-product="admin"] .staff-table tbody,
  html[data-product="admin"] .staff-table tr,
  html[data-product="admin"] .staff-table td {
    display: block;
  }

  html[data-product="admin"] .staff-table tr {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--line);
  }

  html[data-product="admin"] .staff-table tr:last-child {
    border-bottom: 0;
  }

  html[data-product="admin"] .staff-table td {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-sm);
    padding: 0.3rem 0;
    border: 0;
  }

  html[data-product="admin"] .staff-table td::before {
    content: attr(data-label);
    color: var(--faint);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  /* Ячейка действия у самого себя пуста — пустая подпись ей не нужна. */
  html[data-product="admin"] .staff-table td:empty {
    display: none;
  }

  /* На колонку значения остаётся около 200 точек — селект и «Сохранить» рядом там не
     живут: кнопка наезжала на текст уровня. */
  html[data-product="admin"] .staff-table .staff-level {
    max-width: none;
    flex-direction: column;
    align-items: stretch;
  }

  html[data-product="admin"] .staff-table code {
    overflow-wrap: anywhere;
  }
}

/* --- Календарь (DateField) --- */

html[data-product="admin"] .datefield {
  position: relative;
}

html[data-product="admin"] .datefield-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  height: var(--control-h);
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: var(--raised);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

html[data-product="admin"] .datefield-trigger:hover,
html[data-product="admin"] .datefield-trigger[aria-expanded="true"] {
  border-color: var(--accent-soft);
}

html[data-product="admin"] .datefield-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

html[data-product="admin"] .datefield-trigger[data-empty] {
  color: var(--faint);
}

html[data-product="admin"] .datefield-icon {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.2;
  stroke-linecap: round;
}

html[data-product="admin"] .calendar {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 40;
  width: 17.5rem;
  padding: var(--space-sm);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--panel-solid);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

/* Панель публикации стоит внизу страницы, и календарь, раскрытый вниз, оказался бы за
   краем окна. Направление выбирается по месту — см. DateField. */
html[data-product="admin"] .calendar--up {
  top: auto;
  bottom: calc(100% + 0.35rem);
}

html[data-product="admin"] .calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

html[data-product="admin"] .calendar-month {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-product="admin"] .calendar-arrow {
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: none;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

html[data-product="admin"] .calendar-arrow:hover {
  border-color: var(--accent-soft);
  color: var(--text);
}

html[data-product="admin"] .calendar-weekdays,
html[data-product="admin"] .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.15rem;
}

html[data-product="admin"] .calendar-weekdays {
  margin-bottom: 0.2rem;
  color: var(--faint);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}

html[data-product="admin"] .calendar-day {
  height: 2rem;
  border: 1px solid transparent;
  border-radius: var(--radius-main);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

html[data-product="admin"] .calendar-day--empty {
  cursor: default;
}

html[data-product="admin"] .calendar-day:hover:not(.calendar-day--empty) {
  background: rgba(47, 168, 255, 0.12);
}

html[data-product="admin"] .calendar-day:focus-visible {
  outline: none;
  border-color: var(--accent);
}

html[data-product="admin"] .calendar-day[data-weekend] {
  color: var(--muted);
}

/* Сегодня — только рамка: это ориентир, а не выбор. Выбранный день заливается. */
html[data-product="admin"] .calendar-day[data-today] {
  border-color: var(--line-strong);
}

html[data-product="admin"] .calendar-day[data-selected] {
  border-color: var(--accent);
  background: rgba(47, 168, 255, 0.26);
  font-weight: 600;
}

html[data-product="admin"] .calendar-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

html[data-product="admin"] .calendar-time input {
  width: 7rem;
  height: 2rem;
}

html[data-product="admin"] .calendar-foot {
  display: flex;
  gap: var(--space-xs);
  justify-content: flex-end;
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

/* --- Выпадающий список (SelectField) --- */

html[data-product="admin"] .selectfield {
  position: relative;
}

html[data-product="admin"] .selectfield-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  width: 100%;
  height: var(--control-h);
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: var(--raised);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

html[data-product="admin"] .selectfield-trigger:hover:not(:disabled),
html[data-product="admin"] .selectfield-trigger[aria-expanded="true"] {
  border-color: var(--accent-soft);
}

html[data-product="admin"] .selectfield-trigger:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

html[data-product="admin"] .selectfield-trigger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

html[data-product="admin"] .selectfield-icon {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 160ms ease;
}

html[data-product="admin"] .selectfield-trigger[aria-expanded="true"] .selectfield-icon {
  rotate: 180deg;
}

html[data-product="admin"] .selectfield-list {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: 100%;
  min-width: 11rem;
  padding: 0.3rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-card);
  background: var(--panel-solid);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

html[data-product="admin"] .selectfield-option {
  padding: 0.45rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-main);
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}

html[data-product="admin"] .selectfield-option:hover {
  background: rgba(47, 168, 255, 0.12);
  color: var(--text);
}

html[data-product="admin"] .selectfield-option:focus-visible {
  outline: none;
  border-color: var(--accent);
}

html[data-product="admin"] .selectfield-option[data-selected] {
  background: rgba(47, 168, 255, 0.22);
  color: var(--text);
}

/* --- Сотрудники --- */

html[data-product="admin"] .staff-queue {
  margin-bottom: var(--space-lg);
}

html[data-product="admin"] .staff-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: var(--space-md);
}

html[data-product="admin"] .staff-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--accent-soft);
  border-radius: var(--radius-card);
  background: var(--panel);
}

html[data-product="admin"] .staff-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}

html[data-product="admin"] .staff-card-head code,
html[data-product="admin"] .staff-table code {
  color: var(--faint);
  font-size: 0.8rem;
}

/* Текст заявки писал незнакомый человек — переносим как есть и не даём разорвать вёрстку
   длинной строкой без пробелов. */
html[data-product="admin"] .staff-reason {
  margin: 0;
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

html[data-product="admin"] .staff-card-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
  color: var(--faint);
  font-size: 0.75rem;
}

html[data-product="admin"] .staff-level {
  display: flex;
  gap: var(--space-xs);
}

html[data-product="admin"] .staff-level .selectfield {
  flex: 1;
}

/* В таблице колонка уровня иначе растягивается на всё свободное место и утаскивает за
   собой «Сохранить» к середине экрана. */
html[data-product="admin"] .staff-table .staff-level {
  max-width: 18rem;
}

html[data-product="admin"] .staff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

html[data-product="admin"] .staff-table th,
html[data-product="admin"] .staff-table td {
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

html[data-product="admin"] .staff-table th {
  color: var(--faint);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

html[data-product="admin"] .staff-table tr[data-inactive] td {
  opacity: 0.5;
}

/* --- Настройки ---
   Сейчас панель управляет только новостями, поэтому верхний уровень один. Внутри него
   вкладки отвечают реальным частям публикационного контура, а не техническим файлам. */

html[data-product="admin"] .settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

html[data-product="admin"] .settings-group {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    var(--panel);
  backdrop-filter: blur(16px);
  overflow: hidden;
  transition: border-color 140ms ease;
}

html[data-product="admin"] .settings-group[data-open],
html[data-product="admin"] .settings-group:has(.settings-head:hover),
html[data-product="admin"] .settings-group:has(.settings-head:focus-visible) {
  border-color: var(--accent-soft);
}

html[data-product="admin"] .settings-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-md) var(--space-lg);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

html[data-product="admin"] .settings-head:hover {
  background: rgba(47, 168, 255, 0.05);
}

html[data-product="admin"] .settings-head:focus-visible {
  outline: none;
  background: rgba(47, 168, 255, 0.08);
}

html[data-product="admin"] .settings-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-product="admin"] .settings-note {
  flex: 1;
  color: var(--faint);
  font-size: 0.78rem;
}

/* «3 из 7» — сколько ключей вообще заполнено. Свёрнутый блок обязан отвечать, стоит ли
   его открывать. */
html[data-product="admin"] .settings-count {
  flex-shrink: 0;
  color: var(--faint);
  font-size: 0.72rem;
  white-space: nowrap;
}

html[data-product="admin"] .settings-chevron {
  flex-shrink: 0;
  width: 1.2rem;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  text-align: center;
}

html[data-product="admin"] .settings-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: 0 var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--line);
  padding-top: var(--space-md);
}

html[data-product="admin"] .settings-category-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(2.75rem, 1fr));
  border-bottom: 1px solid var(--line);
}

html[data-product="admin"] .settings-category-tab {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 2.75rem;
  padding: 0.7rem;
  border: 0;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

html[data-product="admin"] .settings-category-tab::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: -1px;
  left: 0.75rem;
  height: 2px;
  background: transparent;
}

html[data-product="admin"] .settings-category-tab:hover {
  color: var(--text);
  background: rgba(47, 168, 255, 0.04);
}

html[data-product="admin"] .settings-category-tab[data-active] {
  color: var(--text);
}

html[data-product="admin"] .settings-category-tab[data-active]::after {
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-soft);
}

html[data-product="admin"] .settings-tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0;
}

html[data-product="admin"] .settings-tab-note {
  margin: 0;
  color: var(--faint);
  font-size: 0.78rem;
}

html[data-product="admin"] .settings-field .field-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}

/* Откуда значение: из базы, из .env или ниоткуда. Без этой пометки непонятно, почему
   пустое поле работает, — а оно работает, если значение осталось в окружении. */
html[data-product="admin"] .settings-origin {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  color: var(--faint);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: none;
}

html[data-product="admin"] .settings-origin[data-origin="db"] {
  border-color: var(--accent-soft);
  color: var(--accent);
}

html[data-product="admin"] .settings-origin[data-origin="none"] {
  opacity: 0.6;
}

html[data-product="admin"] .settings-input {
  position: relative;
  display: block;
}

html[data-product="admin"] .settings-input--secret input {
  padding-right: 2.6rem;
}

html[data-product="admin"] .settings-switch {
  min-height: 2.75rem;
  width: fit-content;
  align-items: center;
}

html[data-product="admin"] .settings-switch .switch-track {
  margin-top: 0;
}

html[data-product="admin"] .settings-switch .switch-text {
  min-width: 5.5rem;
  color: var(--muted);
}

html[data-product="admin"] .settings-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: var(--space-xs);
}

html[data-product="admin"] .settings-options button {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-main);
  background: var(--raised);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}

html[data-product="admin"] .settings-options button:hover,
html[data-product="admin"] .settings-options button:focus-visible {
  border-color: var(--accent-soft);
  color: var(--text);
}

html[data-product="admin"] .settings-options button[data-active] {
  border-color: var(--accent);
  background: rgba(47, 168, 255, 0.14);
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

html[data-product="admin"] .settings-eye {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  display: grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-main);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
}

html[data-product="admin"] .settings-eye svg {
  width: 1.05rem;
  height: 1.05rem;
}

html[data-product="admin"] .settings-eye:hover {
  color: var(--text);
  background: var(--raised);
}

html[data-product="admin"] .settings-eye[aria-pressed="true"] {
  color: var(--accent);
}

html[data-product="admin"] .settings-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.72rem;
}

html[data-product="admin"] .settings-link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

html[data-product="admin"] .settings-warn {
  color: var(--warn);
}

html[data-product="admin"] .settings-probe {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

/* Ответ проверки — не подсказка, а факт: он и выглядит как строка журнала. */
html[data-product="admin"] .settings-ok {
  margin: 0;
  color: var(--ok);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

html[data-product="admin"] .settings-probe .form-error {
  margin: 0;
  flex: 1;
  min-width: 14rem;
}

html[data-product="admin"] .settings-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: 0 calc(var(--space-lg) * -1) calc(var(--space-lg) * -1);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--line);
  background: rgba(6, 8, 12, 0.38);
}

html[data-product="admin"] .settings-bar .form-error {
  margin: 0;
}

/* Подтверждение не притворяется отдельной карточкой и не спорит с главной кнопкой.
   Оно живёт недолго и визуально читается как результат выполненного действия. */
html[data-product="admin"] .settings-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ok);
  font-size: 0.78rem;
}

html[data-product="admin"] .settings-saved svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 48rem) {
  html[data-product="admin"] .btn--small,
  html[data-product="admin"] .locale-tab {
    min-height: 2.75rem;
  }

  html[data-product="admin"] .settings-head {
    flex-wrap: wrap;
    gap: 0.3rem var(--space-sm);
    padding: var(--space-md);
  }

  /* Пояснение на телефоне занимает строку целиком и уводит счётчик за экран — прячем:
     что в блоке, видно по названию, а подробности всё равно внутри. */
  html[data-product="admin"] .settings-note {
    display: none;
  }

  html[data-product="admin"] .settings-body {
    padding: var(--space-md);
  }

  html[data-product="admin"] .settings-bar {
    margin-right: calc(var(--space-md) * -1);
    margin-bottom: calc(var(--space-md) * -1);
    margin-left: calc(var(--space-md) * -1);
    padding: var(--space-md);
  }

  html[data-product="admin"] .settings-category-tabs {
    margin-right: calc(var(--space-md) * -1);
    margin-left: calc(var(--space-md) * -1);
  }

  html[data-product="admin"] .settings-eye {
    top: 0;
    right: 0;
    width: var(--control-h);
    height: var(--control-h);
  }

  /* Флаги компактнее текста: оставляем честную высоту нажатия 44px, но делим доступную
     ширину на восемь равных ячеек, чтобы языки не растягивали карточку второй строкой. */
  html[data-product="admin"] .locale-tabs:has(.locale-flag-tab) {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0.2rem;
  }
}

/* Обычные подразделы вроде «Сеть» идут друг за другом. Крупные смысловые части
   генерации переключаются вкладками и показывают ровно один такой блок. */
html[data-product="admin"] .settings-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

html[data-product="admin"] .settings-section + .settings-section {
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

html[data-product="admin"] .settings-subtitle {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Вкладки языков внутри блока — те же, что в редакторе новости: жест один, и выглядеть
   он должен одинаково. Отступ снизу — свой, здесь под ними сразу поля. */
html[data-product="admin"] .settings-tabs {
  margin-bottom: calc(var(--space-xs) * -1);
}

html[data-product="admin"] .settings-subtabs {
  align-self: flex-start;
  margin-bottom: 0;
}

html[data-product="admin"] .settings-subtabs .locale-tab {
  min-width: 5.5rem;
  text-transform: none;
}

html[data-product="admin"] .settings-tabs .locale-tab {
  min-height: 2.75rem;
}

html[data-product="admin"] .settings-tabs .locale-flag-tab {
  min-height: 0;
}

html[data-product="admin"] .locale-flag-tab {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: 1;
  padding: 0.35rem;
}

html[data-product="admin"] .locale-flag {
  width: 1.45rem;
  height: auto;
  border-radius: 0.12rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}



/* PRODUCT: launcher. Source is runtime/design-system/src/products. */
html[data-product="launcher"],
html[data-product="launcher"] body {
  width: 100%;
  min-width: 1100px;
  min-height: 720px;
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

html[data-product="launcher"] .launcher-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  width: 100vw;
  height: 100vh;
  min-width: 1100px;
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 14%, rgba(88, 185, 255, 0.16), transparent 24%),
    radial-gradient(circle at 10% 88%, rgba(149, 79, 255, 0.1), transparent 28%),
    var(--bg);
}

html[data-product="launcher"] .hero-pane {
  position: relative;
  min-width: 0;
  padding: 26px 30px 36px;
  overflow: hidden;
}

html[data-product="launcher"] .hero-backdrop,
html[data-product="launcher"] .hero-vignette {
  position: absolute;
  inset: 0;
}

html[data-product="launcher"] .hero-backdrop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.08);
}

html[data-product="launcher"] .hero-vignette {
  background:
    linear-gradient(90deg, rgba(5, 7, 10, 0.42), rgba(5, 7, 10, 0.1) 44%, rgba(5, 7, 10, 0.74)),
    linear-gradient(180deg, rgba(5, 7, 10, 0.18), rgba(5, 7, 10, 0.52) 68%, rgba(5, 7, 10, 0.92)),
    radial-gradient(circle at 36% 36%, rgba(88, 185, 255, 0.2), transparent 38%);
}

html[data-product="launcher"] .topbar,
html[data-product="launcher"] .hero-copy,
html[data-product="launcher"] .status-card {
  position: relative;
  z-index: 2;
}

html[data-product="launcher"] .topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

html[data-product="launcher"] .brand-mark {
  position: fixed;
  top: 20px;
  left: 24px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
}

html[data-product="launcher"] .brand-logo {
  height: 240px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(88, 185, 255, 0.4));
}

html[data-product="launcher"] .top-actions {
  position: fixed;
  top: 28px;
  right: 24px;
  z-index: 8;
  display: flex;
  gap: 8px;
  align-items: center;
  width: 372px;
  height: 56px;
  padding: 9px 10px;
  border: 1px solid rgba(202, 228, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018)),
    rgba(6, 12, 18, 0.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

html[data-product="launcher"] .icon-button,
html[data-product="launcher"] .window-button,
html[data-product="launcher"] .lang-trigger,
html[data-product="launcher"] .lang-option,
html[data-product="launcher"] .small-button,
html[data-product="launcher"] .secondary-button,
html[data-product="launcher"] .play-button,
html[data-product="launcher"] .link-button {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(6, 12, 18, 0.64);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 180ms ease;
}

html[data-product="launcher"] .icon-button,
html[data-product="launcher"] .window-button,
html[data-product="launcher"] .lang-trigger {
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

html[data-product="launcher"] .icon-button,
html[data-product="launcher"] .window-button {
  width: 36px;
}

html[data-product="launcher"] .lang-trigger {
  width: 44px;
  color: #dff3ff;
}

html[data-product="launcher"] .lang-flag {
  width: 22px;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.24);
  display: block;
}

html[data-product="launcher"] .social-icon {
  width: 16px;
  height: 16px;
}

html[data-product="launcher"] .top-actions .window-button:not(.close) {
  margin-left: 0;
}

html[data-product="launcher"] .window-button::before {
  content: "";
  width: 14px;
  height: 2px;
  background: currentColor;
}

html[data-product="launcher"] .window-button.close::before,
html[data-product="launcher"] .window-button.close::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background: currentColor;
}

html[data-product="launcher"] .window-button.close::before {
  transform: rotate(45deg);
}

html[data-product="launcher"] .window-button.close::after {
  transform: rotate(-45deg);
}

html[data-product="launcher"] .window-button {
  position: relative;
}

html[data-product="launcher"] .icon-button:hover,
html[data-product="launcher"] .window-button:hover,
html[data-product="launcher"] .lang-trigger:hover,
html[data-product="launcher"] .lang-trigger:focus-visible,
html[data-product="launcher"] .lang-option:hover,
html[data-product="launcher"] .lang-option:focus-visible,
html[data-product="launcher"] .small-button:hover,
html[data-product="launcher"] .secondary-button:hover,
html[data-product="launcher"] .link-button:hover {
  transform: translateY(-1px);
  border-color: var(--line-bright);
  background: rgba(18, 42, 61, 0.78);
  box-shadow: 0 0 18px rgba(88, 185, 255, 0.18);
}

html[data-product="launcher"] .window-button.close:hover {
  border-color: rgba(255, 92, 108, 0.72);
  background: rgba(82, 14, 24, 0.76);
}

html[data-product="launcher"] .lang-switcher {
  position: relative;
  margin-left: auto;
}

html[data-product="launcher"] .lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, 44px);
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(202, 228, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(6, 12, 18, 0.94);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

html[data-product="launcher"] .lang-switcher.is-open .lang-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

html[data-product="launcher"] .lang-option {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

html[data-product="launcher"] .lang-option.is-active {
  border-color: rgba(88, 185, 255, 0.68);
  background: linear-gradient(180deg, rgba(98, 196, 255, 0.2), rgba(14, 50, 78, 0.8));
  color: #eff9ff;
}

html[data-product="launcher"] .hero-copy {
  width: min(690px, 72%);
  margin-top: 250px;
}

html[data-product="launcher"] .eyebrow,
html[data-product="launcher"] .muted-label,
html[data-product="launcher"] .footer-line,
html[data-product="launcher"] .news-item span,
html[data-product="launcher"] .build-badge {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

html[data-product="launcher"] .eyebrow {
  display: inline-flex;
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid rgba(116, 240, 167, 0.28);
  border-radius: 7px;
  background: rgba(8, 28, 18, 0.4);
  color: #baf8d2;
}

html[data-product="launcher"] .hero-tag-anim {
  position: relative;
  overflow: hidden;
  min-width: 238px;
  justify-content: center;
  transition: background-color 320ms ease, border-color 320ms ease, box-shadow 360ms ease;
}

html[data-product="launcher"] .tag-line {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  line-height: 1.1;
  white-space: nowrap;
}

html[data-product="launcher"] .tag-line-morph::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, #ff4a4a 14%, #ff4a4a 86%, transparent);
}

html[data-product="launcher"] .hero-tag-anim.step-old,
html[data-product="launcher"] .hero-tag-anim.step-strike {
  border-color: rgba(255, 116, 116, 0.4);
  background: rgba(32, 12, 12, 0.42);
}

html[data-product="launcher"] .hero-tag-anim.step-old .badge-reel > span:first-child,
html[data-product="launcher"] .hero-tag-anim.step-strike .badge-reel > span:first-child {
  color: #ffaaaa;
  text-shadow: 0 0 12px rgba(255, 64, 64, 0.34);
}

html[data-product="launcher"] .hero-tag-anim.step-morph {
  border-color: rgba(117, 255, 163, 0.4);
  background: rgba(20, 30, 22, 0.38);
  box-shadow:
    0 0 0 1px rgba(120, 255, 176, 0.08),
    0 0 14px rgba(87, 255, 157, 0.12);
}

html[data-product="launcher"] .hero-tag-anim.step-new {
  border-color: rgba(120, 255, 176, 0.52);
  background: rgba(14, 40, 25, 0.46);
  box-shadow:
    0 0 0 1px rgba(120, 255, 176, 0.16),
    0 0 18px rgba(87, 255, 157, 0.24);
}

html[data-product="launcher"] .hero-tag-anim.step-morph .badge-reel > span:last-child,
html[data-product="launcher"] .hero-tag-anim.step-new .badge-reel > span:last-child {
  color: #9cffbe;
  text-shadow: 0 0 14px rgba(79, 255, 146, 0.34);
}

html[data-product="launcher"] h1 {
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 58px;
  line-height: 0.95;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(88, 185, 255, 0.24);
}

html[data-product="launcher"] .hero-copy p:last-child {
  width: min(560px, 100%);
  margin: 18px 0 0;
  color: rgba(237, 244, 248, 0.78);
  font-size: 18px;
  line-height: 1.55;
}

html[data-product="launcher"] .status-card {
  position: fixed;
  left: 30px;
  bottom: 32px;
  margin-top: 0;
  width: 230px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(6, 12, 18, 0.62);
  backdrop-filter: blur(12px);
}

html[data-product="launcher"] .status-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgba(237, 244, 248, 0.82);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

html[data-product="launcher"] .pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--success);
  box-shadow: 0 0 16px rgba(116, 240, 167, 0.7);
}

html[data-product="launcher"] .status-card strong {
  display: block;
  margin-top: 10px;
  color: var(--accent-strong);
  font-size: 34px;
  line-height: 1;
}

html[data-product="launcher"] .status-card > span {
  color: var(--soft);
  font-size: 14px;
}

html[data-product="launcher"] .control-pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 112px 24px 24px;
  border-left: 1px solid rgba(202, 228, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 24%),
    var(--panel-strong);
  box-shadow: -18px 0 46px rgba(0, 0, 0, 0.36);
}

html[data-product="launcher"] .profile-strip,
html[data-product="launcher"] .patch-card,
html[data-product="launcher"] .news-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    var(--panel);
}

html[data-product="launcher"] .profile-strip {
  position: fixed;
  left: 284px;
  bottom: 32px;
  z-index: 4;
  display: grid;
  grid-template-rows: 1fr 34px;
  gap: 9px;
  width: 384px;
  height: 118px;
  padding: 15px 18px;
  background:
    linear-gradient(90deg, rgba(88, 185, 255, 0.14), transparent 3px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(6, 12, 18, 0.68);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.22);
}

html[data-product="launcher"] .profile-strip.is-authorized {
  grid-template-rows: 1fr 34px;
}

html[data-product="launcher"] .profile-strip img {
  display: none;
}

html[data-product="launcher"] .profile-strip .muted-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}

html[data-product="launcher"] .profile-strip .muted-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: var(--danger);
  box-shadow: 0 0 14px rgba(255, 92, 108, 0.66);
}

html[data-product="launcher"] .profile-strip.is-authorized .muted-label::before {
  background: var(--success);
  box-shadow: 0 0 14px rgba(116, 240, 167, 0.66);
}

html[data-product="launcher"] .profile-strip strong,
html[data-product="launcher"] .patch-heading strong {
  display: block;
  overflow: hidden;
  color: #f7fbff;
  font-size: 18px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-product="launcher"] .profile-strip:not(.is-authorized) strong {
  color: rgba(237, 244, 248, 0.86);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

html[data-product="launcher"] .profile-copy {
  min-width: 0;
  display: grid;
  align-content: center;
}

html[data-product="launcher"] .profile-copy small {
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: var(--soft);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-product="launcher"] .profile-copy small:empty {
  display: none;
}

html[data-product="launcher"] .auth-button {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  overflow: hidden;
  border-color: rgba(123, 205, 255, 0.38);
  background:
    linear-gradient(180deg, rgba(88, 185, 255, 0.24), rgba(88, 185, 255, 0.08)),
    rgba(5, 11, 17, 0.7);
  color: #e9f7ff;
  font-size: 11px;
  letter-spacing: 0.07em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 24px rgba(88, 185, 255, 0.08);
}

html[data-product="launcher"] .profile-strip.is-authorized .auth-button {
  border-color: rgba(202, 228, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(5, 11, 17, 0.58);
  color: rgba(237, 244, 248, 0.86);
  font-size: 11px;
  letter-spacing: 0.07em;
}

html[data-product="launcher"] .small-button,
html[data-product="launcher"] .secondary-button,
html[data-product="launcher"] .play-button,
html[data-product="launcher"] .link-button {
  border-radius: 7px;
  font-weight: 800;
  text-transform: uppercase;
}

html[data-product="launcher"] .small-button {
  height: 38px;
  padding: 0 12px;
  font-size: 12px;
}

html[data-product="launcher"] .small-button.auth-button {
  height: 34px;
  padding: 0 12px;
  font-size: 11px;
}

html[data-product="launcher"] .patch-card {
  order: 4;
  padding: 18px;
}

html[data-product="launcher"] .patch-heading,
html[data-product="launcher"] .progress-meta,
html[data-product="launcher"] .panel-title,
html[data-product="launcher"] .footer-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html[data-product="launcher"] .build-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(116, 240, 167, 0.28);
  border-radius: 99px;
  background: rgba(12, 46, 27, 0.58);
  color: #baf8d2;
  line-height: 1;
  white-space: nowrap;
}

html[data-product="launcher"] .launcher-shell[data-state="checking"] .build-badge,
html[data-product="launcher"] .launcher-shell[data-state="updating"] .build-badge {
  border-color: rgba(88, 185, 255, 0.38);
  background: rgba(16, 54, 84, 0.68);
  color: #c7ebff;
}

html[data-product="launcher"] .progress-shell {
  height: 13px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(202, 228, 255, 0.16);
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.32);
}

html[data-product="launcher"] .progress-fill {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(116, 240, 167, 0.92), rgba(88, 185, 255, 0.95)),
    var(--accent);
  box-shadow: 0 0 20px rgba(88, 185, 255, 0.36);
  transition: width 280ms ease;
}

html[data-product="launcher"] .progress-meta {
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

html[data-product="launcher"] .progress-meta span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-product="launcher"] .launcher-actions {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 10px;
  margin-top: 18px;
}

html[data-product="launcher"] .secondary-button,
html[data-product="launcher"] .play-button {
  height: 56px;
}

html[data-product="launcher"] .play-button {
  border-color: rgba(139, 211, 255, 0.82);
  background: linear-gradient(180deg, #98dcff, #238ee5);
  color: #041421;
  font-size: 18px;
  box-shadow: 0 0 28px rgba(88, 185, 255, 0.42);
}

html[data-product="launcher"] .play-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px rgba(88, 185, 255, 0.62);
}

html[data-product="launcher"] .launcher-shell[data-auth="guest"] .play-button:hover {
  border-color: rgba(255, 92, 108, 0.78);
  background: linear-gradient(180deg, #ff9aaa, #d63a4d);
  color: #23070b;
  box-shadow: 0 0 36px rgba(255, 92, 108, 0.46);
}

html[data-product="launcher"] .news-panel {
  order: 3;
  flex: 1;
  min-height: 0;
  padding: 16px;
}

html[data-product="launcher"] .footer-line {
  display: none;
}

html[data-product="launcher"] .panel-title {
  margin-bottom: 12px;
}

html[data-product="launcher"] .link-button {
  height: 30px;
  padding: 0 10px;
  color: var(--accent-strong);
  font-size: 12px;
  background: transparent;
}

html[data-product="launcher"] .news-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(202, 228, 255, 0.12);
  border-radius: 8px;
  background: rgba(2, 6, 10, 0.34);
}

html[data-product="launcher"] .news-item + .news-item {
  margin-top: 10px;
}

html[data-product="launcher"] .news-item img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  object-position: top;
  border-radius: 7px;
}

html[data-product="launcher"] .news-item strong {
  display: block;
  margin-top: 4px;
  color: #f7fbff;
  font-size: 16px;
  line-height: 1.2;
}

html[data-product="launcher"] .news-item p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

html[data-product="launcher"] .footer-line {
  color: rgba(221, 232, 240, 0.36);
}

html[data-product="launcher"] .auth-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

html[data-product="launcher"] .auth-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

html[data-product="launcher"] .auth-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 28%, rgba(88, 185, 255, 0.12), transparent 26%),
    rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

html[data-product="launcher"] .auth-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(100%, 390px);
  padding: 18px;
  border: 1px solid rgba(202, 228, 255, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(7, 12, 18, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
}

html[data-product="launcher"] .auth-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

html[data-product="launcher"] .auth-heading h2 {
  margin: 4px 0 0;
  color: #f7fbff;
  font-size: 25px;
  line-height: 1;
  text-transform: uppercase;
}

html[data-product="launcher"] .auth-field {
  display: grid;
  gap: 7px;
}

html[data-product="launcher"] .auth-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[data-product="launcher"] .auth-field input {
  width: 100%;
  height: 46px;
  border: 1px solid rgba(202, 228, 255, 0.18);
  border-radius: 7px;
  padding: 0 13px;
  outline: 0;
  background: rgba(2, 6, 10, 0.52);
  color: var(--text);
  font: inherit;
}

html[data-product="launcher"] .auth-field input:focus {
  border-color: rgba(88, 185, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(88, 185, 255, 0.25);
}

html[data-product="launcher"] .auth-note {
  margin: 0;
  color: var(--soft);
  font-size: 13px;
  line-height: 1.45;
}

html[data-product="launcher"] .auth-actions {
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  gap: 10px;
}


}