@import url("https://fonts.googleapis.com/css2?family=Monoton&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap&subset=latin,cyrillic");

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

:root {
  --green: #7dfc8a;
  --dark-green: #3a8f4a;
  --blue: #3aa6ff;
  --red-neon: #ff4060;
  --bg-main: #0b0f10;
  --bg-panel: rgba(16, 22, 20, 0.96);
  --bg-panel-soft: rgba(20, 26, 24, 0.9);
  --border-soft: rgba(125, 252, 138, 0.22);
  --border-strong: rgba(90, 180, 120, 0.8);
  --text-main: #d5ddd5;
  --text-dim: #9aa89c;
  --accent-olive: #6fa16a;
  --accent-line: rgba(120, 180, 140, 0.5);
  --yellow: #ffd95a;
  /* UI polish tokens (shared across screens) */
  --ui-glass-bg: rgba(8, 14, 12, 0.72);
  --ui-glass-border: rgba(120, 170, 150, 0.42);
  --ui-glass-border-strong: rgba(143, 211, 255, 0.34);
  --ui-inset-surface: rgba(0, 0, 0, 0.22);
  --ui-inset-surface-border: var(--ui-pill-border);
  --ui-mp-media-title-color: rgba(143, 211, 255, 0.95);
  --ui-glass-shadow: 0 10px 24px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --ui-primary-bg: linear-gradient(135deg, #0f2215, #19412b);
  --ui-primary-text: var(--green);
  --ui-primary-border: var(--border-strong);
  --ui-primary-shadow: 0 0 8px rgba(125, 252, 138, 0.3), 0 10px 18px rgba(0, 0, 0, 0.7);
  --ui-ghost-border: rgba(120, 160, 130, 0.7);
  --ui-badge-bg: rgba(58, 166, 255, 0.2);
  --ui-badge-text: var(--blue);
  --ui-toast-border: rgba(143, 211, 255, 0.36);
  --ui-toast-bg: linear-gradient(180deg, rgba(8, 20, 16, 0.94), rgba(2, 8, 6, 0.92));
  --ui-toast-text: rgba(236, 250, 244, 0.96);
  --ui-panel-backdrop: rgba(2, 5, 4, 0.25);
  --ui-surface-row-bg: rgba(5, 10, 8, 0.55);
  --ui-surface-row-border: rgba(80, 120, 90, 0.35);
  --ui-icon-chip-bg: rgba(0, 0, 0, 0.25);
  --ui-icon-chip-border: rgba(58, 166, 255, 0.25);
  --ui-icon-chip-color: rgba(143, 211, 255, 0.95);
  --ui-secondary-btn-bg: rgba(5, 8, 6, 0.7);
  --ui-secondary-btn-border: rgba(80, 120, 90, 0.35);
  --ui-secondary-btn-hover-border: rgba(58, 166, 255, 0.55);
  --ui-secondary-btn-hover-glow: 0 0 10px rgba(58, 166, 255, 0.2);
  --ui-card-border: rgba(143, 211, 255, 0.2);
  --ui-card-bg: linear-gradient(
      165deg,
      rgba(20, 40, 55, 0.14),
      rgba(8, 14, 12, 0.38)
    ),
    radial-gradient(circle at 0 0, rgba(125, 252, 138, 0.1), transparent 55%),
    radial-gradient(circle at 100% 0, rgba(58, 166, 255, 0.1), transparent 55%);
  --ui-card-shadow: 0 20px 50px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(2, 6, 4, 0.35),
    0 0 24px rgba(58, 166, 255, 0.08);
  --ui-forum-border: rgba(125, 252, 138, 0.28);
  --ui-forum-bg: radial-gradient(
      ellipse 120% 80% at 50% -20%,
      rgba(58, 166, 255, 0.12) 0%,
      transparent 55%
    ),
    radial-gradient(circle at 100% 100%, rgba(125, 252, 138, 0.08) 0, transparent 50%),
    linear-gradient(165deg, #050a0c 0%, #020405 60%, #000 100%);
  --ui-forum-shadow: inset 0 0 0 1px rgba(58, 166, 255, 0.12),
    0 0 60px rgba(0, 0, 0, 0.85), 0 0 80px rgba(58, 166, 255, 0.06);
  --ui-chat-header-bg: linear-gradient(
    to bottom,
    rgba(8, 18, 14, 0.92),
    rgba(3, 8, 6, 0.88)
  );
  --ui-chat-input-bg: linear-gradient(
    to top,
    rgba(6, 12, 9, 0.92),
    rgba(6, 12, 9, 0.75)
  );
  --ui-chat-sep: rgba(143, 211, 255, 0.16);
  --ui-tf-brand-border: rgba(127, 252, 167, 0.22);
  --ui-tf-brand-bg: linear-gradient(
    135deg,
    rgba(12, 18, 16, 0.92),
    rgba(18, 28, 24, 0.75)
  );
  --ui-tf-composer-border: rgba(125, 252, 138, 0.22);
  --ui-tf-composer-bg: linear-gradient(
      155deg,
      rgba(18, 32, 40, 0.55),
      rgba(8, 14, 12, 0.72)
    ),
    radial-gradient(ellipse 120% 80% at 10% 0%, rgba(58, 166, 255, 0.14), transparent 52%),
    radial-gradient(ellipse 100% 60% at 100% 100%, rgba(125, 252, 138, 0.08), transparent 50%);
  --ui-tf-post-border: rgba(143, 211, 255, 0.18);
  --ui-tf-post-bg: rgba(16, 22, 20, 0.62);
  --ui-input-border: rgba(143, 211, 255, 0.2);
  --ui-input-bg: rgba(0, 0, 0, 0.25);
  --ui-pill-border: rgba(143, 211, 255, 0.18);
  --ui-pill-bg: rgba(3, 8, 6, 0.55);
  --ui-control-size: 32px;
  --ui-control-radius: 10px;
  --ui-control-border: rgba(130, 155, 185, 0.42);
  --ui-control-bg: linear-gradient(165deg, rgba(28, 36, 48, 0.98) 0%, rgba(8, 12, 20, 0.96) 100%);
  --ui-control-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07) inset,
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(90, 160, 255, 0.14);
  --ui-control-hover-border: rgba(170, 205, 235, 0.58);
  --ui-control-hover-bg: linear-gradient(165deg, rgba(38, 48, 62, 0.98) 0%, rgba(12, 18, 28, 0.97) 100%);
  --ui-control-hover-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 32px rgba(120, 190, 255, 0.22);
  --ui-glow-primary: 0 0 14px rgba(125, 252, 138, 0.28), 0 0 28px rgba(58, 166, 255, 0.18);
  --ui-glow-secondary: 0 0 10px rgba(58, 166, 255, 0.2), 0 0 18px rgba(58, 166, 255, 0.12);
  --ui-glow-tertiary: 0 0 8px rgba(160, 190, 214, 0.16);

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-premium: 8px;
  --radius-window: 8px;
  --window-border-width: 1px;
  --window-border-color: #58a872;
  --window-shadow-depth: 0 14px 36px rgba(0, 0, 0, 0.52);

  /* Viewport perimeter + column shell (overridden per theme) */
  --ui-frame-border: rgba(118, 228, 140, 0.72);
  --ui-frame-glow: 0 0 10px rgba(118, 228, 140, 0.42), 0 0 22px rgba(118, 228, 140, 0.22);
  --ui-frame-opacity: 1;
  --ui-panel-grad-a: rgba(12, 22, 30, 0.82);
  --ui-panel-grad-b: rgba(6, 10, 14, 0.98);
  --ui-panel-shell-ring: rgba(20, 40, 30, 0.9);
  --ui-seam-color: rgba(118, 228, 140, 0.55);
  --ui-seam-glow: 0 0 10px rgba(118, 228, 140, 0.28);
  --ui-panel-inset-shadow: rgba(125, 252, 138, 0.08);
  --ui-bg-texture-line: rgba(60, 80, 60, 0.18);
  --ui-bg-texture-opacity: 0.18;
  --ui-focus-ring: 0 0 0 1px rgba(125, 252, 138, 0.4), 0 0 0 3px rgba(58, 166, 255, 0.14);
  --ui-overlay-shell-bg: rgba(5, 8, 9, 0.9);
  --ui-overlay-shell-grad: rgba(10, 18, 20, 0.15);

  /* Map center + floating panels */
  --map-panel-bg: #0b0f10;
  --map-settings-bg: #060c0a;
  --map-settings-head-border: rgba(143, 211, 255, 0.12);
  --map-settings-text: rgba(220, 236, 245, 0.92);
  --map-settings-text-dim: rgba(200, 226, 250, 0.66);
  --map-settings-item-border: rgba(143, 211, 255, 0.06);
  --map-settings-input-bg: rgba(5, 12, 20, 0.86);
  --map-settings-input-border: rgba(143, 211, 255, 0.28);
  --map-settings-input-text: rgba(228, 241, 252, 0.95);
  --map-settings-seg-bg: rgba(0, 0, 0, 0.22);
  --map-settings-seg-border: rgba(143, 211, 255, 0.24);
  --map-settings-seg-text: rgba(220, 236, 245, 0.9);
  --map-settings-seg-active-bg: linear-gradient(135deg, rgba(58, 166, 255, 0.24), rgba(125, 252, 138, 0.14));
  --map-settings-seg-active-border: rgba(143, 211, 255, 0.74);
  --map-settings-save-bg: linear-gradient(135deg, rgba(58, 166, 255, 0.2), rgba(143, 211, 255, 0.14));
  --map-settings-save-border: rgba(143, 211, 255, 0.56);
  --map-settings-save-text: #eef6ff;
  --map-chat-dock-bg: rgba(6, 12, 10, 0.72);
  --map-chat-dock-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(58, 166, 255, 0.12);

  /* Node log */
  --node-log-tools-bg: linear-gradient(180deg, rgba(8, 18, 13, 0.58), rgba(6, 12, 10, 0.38));
  --node-log-tools-border: rgba(102, 164, 124, 0.38);
  --node-log-input-bg: linear-gradient(180deg, rgba(11, 23, 17, 0.86), rgba(8, 16, 12, 0.9));
  --node-log-input-border: rgba(116, 188, 146, 0.4);
  --node-log-input-focus-border: rgba(151, 230, 176, 0.62);
  --ui-place-active-bg: radial-gradient(circle at top left, rgba(18, 42, 64, 0.78), rgba(5, 10, 14, 0.92));
  --ui-place-active-border: rgba(88, 182, 255, 0.72);
  --ui-place-active-glow: 0 0 0 1px rgba(88, 182, 255, 0.34) inset, 0 0 20px rgba(58, 166, 255, 0.2);

  /* Left panel — Time Machine, Story, nodes, rank footer */
  --ui-year-input-bg: #070a08;
  --ui-year-input-border: rgba(100, 150, 110, 0.46);
  --ui-year-input-scheme: dark;
  --ui-btn-square-bg: radial-gradient(circle at top, #141d16 0, #070b08 70%);
  --ui-btn-square-border: rgba(100, 160, 120, 0.42);
  --ui-btn-square-hover-glow: 0 0 10px rgba(90, 170, 140, 0.7), 0 0 20px rgba(58, 166, 255, 0.5);
  --ui-btn-square-hover-border: rgba(140, 210, 170, 0.95);
  --ui-story-btn-bg: linear-gradient(180deg, rgba(13, 30, 20, 0.9), rgba(9, 20, 14, 0.92));
  --ui-story-btn-border: rgba(120, 194, 153, 0.44);
  --ui-story-btn-color: rgba(224, 248, 234, 0.96);
  --ui-story-btn-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.26);
  --ui-story-btn-hover-bg: linear-gradient(180deg, rgba(18, 38, 26, 0.94), rgba(11, 24, 17, 0.94));
  --ui-story-btn-hover-border: rgba(165, 236, 193, 0.64);
  --ui-story-btn-hover-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 9px 18px rgba(0, 0, 0, 0.3),
    0 0 18px rgba(117, 226, 164, 0.22);
  --node-log-search-placeholder: rgba(165, 194, 177, 0.82);
  --node-log-option-bg: #0a140f;
  --node-log-option-color: #def3e7;
  --node-log-select-arrow: rgba(179, 236, 198, 0.84);
  --ui-node-visits-color: rgba(178, 220, 252, 0.92);
  --ui-node-visits-border: rgba(88, 182, 255, 0.32);
  --ui-node-role-color: rgba(198, 230, 252, 0.96);
  --ui-node-role-border: rgba(120, 196, 255, 0.3);
  --ui-node-role-birth-color: rgba(255, 218, 188, 0.94);
  --ui-node-role-birth-border: rgba(255, 190, 130, 0.42);
  --ui-node-role-home-color: rgba(206, 237, 255, 0.94);
  --ui-node-role-home-border: rgba(142, 220, 255, 0.42);
  --ui-node-rating-num-color: rgba(143, 211, 255, 0.95);
  --ui-node-rail-bg: rgba(5, 8, 6, 0.4);
  --ui-node-rail-border: rgba(80, 120, 95, 0.22);
  --ui-node-toggle-arrow-color: rgba(143, 211, 255, 0.9);
  --ui-node-active-name-color: rgba(198, 232, 255, 0.99);
  --ui-node-active-visited-color: rgba(168, 206, 230, 0.94);
  --ui-node-active-rating-color: rgba(162, 224, 255, 0.98);
  --ui-panel-count-nodes-color: rgba(143, 211, 255, 0.88);
  --ui-accent-neon-color: #8fd3ff;
  --ui-node-rank-footer-bg: linear-gradient(180deg, rgba(6, 12, 10, 0.62), rgba(4, 8, 7, 0.88));
  --ui-node-rank-footer-border: rgba(102, 164, 124, 0.42);
  --ui-node-rank-footer-hover-bg: linear-gradient(180deg, rgba(12, 22, 18, 0.82), rgba(8, 14, 12, 0.95));
  --ui-node-rank-footer-hover-ring: rgba(125, 252, 138, 0.28);
  --ui-node-rank-line-color: rgba(210, 228, 238, 0.94);
  --ui-node-rank-sep-color: rgba(120, 160, 140, 0.55);
  --ui-node-rank-av-bg: linear-gradient(145deg, rgba(28, 48, 58, 0.95), rgba(12, 22, 18, 0.98));
  --ui-node-rank-av-border: rgba(143, 211, 255, 0.35);
  --ui-node-rank-av-color: rgba(230, 245, 255, 0.96);
  --ui-node-rank-av-gold-bg: linear-gradient(145deg, rgba(58, 42, 12, 0.95), rgba(22, 16, 8, 0.98));
  --ui-node-rank-av-gold-border: rgba(255, 196, 92, 0.55);
  --ui-node-rank-av-gold-color: rgba(255, 236, 180, 1);
  --ui-node-rank-av-you-border: rgba(125, 252, 138, 0.45);
  --ui-node-rank-av-you-color: rgba(210, 255, 225, 1);

  /* Map expanded chat */
  --ui-mini-chat-bg: rgba(5, 10, 14, 0.52);
  --ui-mini-chat-shadow: 0 12px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(125, 252, 138, 0.12),
    0 0 40px rgba(58, 166, 255, 0.1);
  --ui-mini-chat-compose-bg: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.32));
  --ui-mini-chat-compose-border: rgba(80, 140, 100, 0.28);
  --ui-mini-chat-input-border: rgba(125, 252, 138, 0.22);
  --ui-mini-chat-input-bg: rgba(0, 0, 0, 0.42);
  --ui-mini-chat-input-row-border: rgba(80, 140, 100, 0.25);
  --ui-mini-chat-msg-in-bg: rgba(255, 255, 255, 0.06);
  --ui-mini-chat-msg-in-border: rgba(80, 120, 90, 0.4);
  --ui-mini-chat-msg-out-bg: rgba(58, 166, 255, 0.12);
  --ui-mini-chat-msg-out-border: rgba(58, 166, 255, 0.35);
  --ui-mini-chat-msg-out-color: rgba(143, 211, 255, 0.95);
  --ui-mini-chat-avatar-bg: linear-gradient(145deg, #7dfc8a, #3aa6ff);
  --ui-mini-chat-avatar-text: #0a1010;
  --ui-mini-chat-photo-draft-bg: rgba(0, 0, 0, 0.28);
  --ui-mini-chat-photo-draft-border: rgba(80, 140, 100, 0.22);
  --ui-mini-chat-photo-caption-bg: rgba(0, 0, 0, 0.35);
  --ui-mini-chat-photo-caption-border: rgba(80, 120, 90, 0.5);
  --ui-mini-chat-caption-color: rgba(220, 235, 225, 0.95);

  /* My Page message bubbles */
  --ui-msg-bubble-in-bg: linear-gradient(135deg, rgba(90, 130, 180, 0.22), rgba(30, 60, 90, 0.34));
  --ui-msg-bubble-in-border: rgba(140, 190, 255, 0.85);
  --ui-msg-bubble-in-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 10px rgba(40, 80, 130, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --ui-msg-bubble-out-bg: linear-gradient(135deg, rgba(90, 200, 120, 0.26), rgba(20, 80, 40, 0.42));
  --ui-msg-bubble-out-border: rgba(125, 252, 138, 0.95);
  --ui-msg-bubble-out-shadow: 0 8px 28px rgba(0, 0, 0, 0.35), 0 0 10px rgba(80, 200, 130, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Guest strip / chips */
  --ui-guest-strip-bg: linear-gradient(90deg, rgba(255, 140, 60, 0.22), rgba(255, 100, 50, 0.08));
  --ui-guest-strip-border: rgba(255, 180, 100, 0.4);
  --ui-guest-chip-color: #ffd4a8;
  --ui-guest-chip-countdown-color: #ffc98a;
  --ui-guest-bar-label-color: #ffb86a;
  --ui-guest-chip-remove-color: rgba(255, 160, 160, 0.45);
  --ui-guest-chip-remove-hover-color: #ff7a7a;

  /* Chat popovers */
  --ui-chat-emoji-popover-bg: rgba(8, 14, 12, 0.96);
  --ui-chat-emoji-popover-border: rgba(125, 252, 138, 0.35);
  --ui-chat-plus-menu-bg: rgba(8, 14, 12, 0.96);
  --ui-chat-plus-menu-border: rgba(125, 252, 138, 0.35);

  /* Auth / registration overlay */
  --ui-auth-panel-bg: radial-gradient(circle at 0 0, #141d16 0, #050806 70%);
  --ui-auth-input-bg: #020304;
  --ui-auth-input-border: rgba(60, 110, 80, 0.9);
  --ui-auth-input-scheme: dark;
  --ui-auth-mode-btn-bg: rgba(3, 8, 10, 0.85);
  --ui-auth-mode-btn-border: rgba(143, 211, 255, 0.28);
  --ui-auth-mode-btn-active-border: rgba(125, 252, 138, 0.5);
  --ui-auth-mode-btn-active-color: rgba(125, 252, 138, 0.95);
  --ui-auth-mode-btn-active-ring: rgba(125, 252, 138, 0.14);
  --ui-auth-social-btn-bg: radial-gradient(circle at top left, #141b16 0, #050705 70%);
  --ui-auth-social-btn-border: rgba(80, 120, 90, 0.7);
  --ui-auth-link-color: rgba(143, 211, 255, 0.85);
  --ui-auth-link-border: rgba(58, 166, 255, 0.35);
  --ui-auth-link-hover-color: var(--green);
  --ui-auth-legal-link-color: rgba(143, 211, 255, 0.9);
  --ui-auth-legal-link-hover-color: rgba(125, 252, 138, 0.95);

  /* Left panel card polish */
  --ui-left-info-card-border: rgba(90, 150, 110, 0.45);
  --ui-left-info-card-shadow: inset 0 0 0 1px rgba(4, 8, 6, 0.92), 0 0 14px rgba(58, 166, 255, 0.04);
  --ui-left-info-card-hover-border: rgba(110, 190, 130, 0.55);
  --ui-left-info-card-hover-shadow: inset 0 0 0 1px rgba(4, 8, 6, 0.92), 0 0 16px rgba(125, 252, 138, 0.08);
  --ui-left-places-panel-border: rgba(90, 150, 110, 0.42);
  --ui-left-places-panel-shadow: inset 0 0 0 1px rgba(4, 8, 6, 0.9), 0 0 20px rgba(58, 166, 255, 0.05);

  /* Add-node terminal overlay */
  --ui-terminal-overlay-bg: radial-gradient(circle at 20% 0, rgba(30, 43, 35, 0.96), #020303);
  --ui-terminal-window-bg: #060c0a;
  --ui-terminal-input-bg: #050806;
  --ui-terminal-input-border: rgba(90, 150, 110, 0.9);
  --ui-terminal-input-focus-border: var(--green);
  --ui-terminal-input-focus-glow: 0 0 8px rgba(125, 252, 138, 0.5);
  --ui-terminal-visit-hint-bg: rgba(10, 26, 42, 0.45);
  --ui-terminal-visit-hint-border: rgba(118, 184, 255, 0.5);
  --ui-terminal-visit-hint-color: #b7dbff;
  --ui-terminal-suggest-bg: #050806;
  --ui-terminal-suggest-border: rgba(70, 110, 80, 0.9);
  --ui-terminal-suggest-hover: rgba(80, 140, 100, 0.35);
  --ui-terminal-rating-btn-bg: radial-gradient(circle at 0 0, #141d16 0, #050806 70%);
  --ui-terminal-rating-btn-border: rgba(90, 150, 110, 0.9);
  --ui-terminal-header-border: rgba(116, 188, 150, 0.32);
  --ui-terminal-title-color: rgba(200, 244, 214, 0.92);

  /* Footer legal / about */
  --ui-footer-legal-color: var(--blue);
  --ui-footer-legal-strong-color: var(--blue);
  --ui-footer-legal-hover-color: rgba(120, 200, 255, 0.98);
  --ui-footer-legal-btn-color: rgba(143, 211, 255, 0.65);
  --ui-footer-legal-btn-hover: rgba(125, 252, 138, 0.85);
  --ui-footer-min-line-color: rgba(180, 220, 235, 0.88);
  --ui-footer-min-text-color: rgba(200, 235, 255, 0.92);

  /* Map chat — nodus labels */
  --ui-mini-chat-nodus-status-color: rgba(170, 230, 200, 0.92);
  --ui-mini-chat-msg-who-color: rgba(150, 190, 175, 0.85);
  --ui-btn-auth-premium-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  --ui-btn-auth-premium-hover-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);

  /* Node gallery / places chips (NODE LOG rails) */
  --ui-gallery-btn-bg: rgba(5, 10, 8, 0.55);
  --ui-gallery-btn-border: rgba(80, 130, 100, 0.22);
  --ui-gallery-btn-color: rgba(160, 210, 195, 0.9);
  --ui-gallery-btn-empty-bg: rgba(4, 8, 6, 0.35);
  --ui-gallery-btn-empty-border: rgba(80, 120, 95, 0.2);
  --ui-gallery-btn-icon-filter: drop-shadow(0 0 4px rgba(58, 166, 255, 0.45));
  --ui-gallery-btn-add-color: rgba(143, 211, 255, 0.95);
  --ui-gallery-btn-hover-bg: rgba(8, 18, 14, 0.72);
  --ui-gallery-btn-hover-border: rgba(125, 252, 138, 0.35);
  --ui-gallery-btn-hover-color: rgba(200, 245, 220, 0.95);
  --ui-places-chip-active-bg: rgba(8, 18, 14, 0.72);
  --ui-places-chip-active-border: rgba(58, 166, 255, 0.55);
  --ui-places-chip-active-color: rgba(200, 245, 220, 0.95);
  --ui-places-chip-empty-bg: rgba(4, 8, 6, 0.35);
  --ui-places-chip-empty-opacity: 0.28;
  --ui-places-chip-map-add-color: rgba(143, 211, 255, 0.95);
  --ui-places-chip-map-add-hover: #7dfc8a;
  --ui-node-toggle-open-arrow: rgba(143, 211, 255, 0.95);
  --ui-node-rail-hover-border: rgba(58, 166, 255, 0.55);
  --ui-node-toggle-label-color: var(--text-dim);
  --ui-node-toggle-text-color: var(--text-main);

  /* Map controls (2D/3D, zoom, settings) */
  --ui-map-ctrl-btn-bg: rgba(235, 240, 255, 0.16);
  --ui-map-ctrl-btn-border: rgba(143, 211, 255, 0.28);
  --ui-map-ctrl-btn-color: #e8f2ff;
  --ui-map-ctrl-btn-active-bg: rgba(143, 211, 255, 0.22);
  --ui-map-ctrl-btn-active-border: rgba(143, 211, 255, 0.72);
  --ui-map-ctrl-btn-size: 58px;
  --ui-map-ctrl-btn-radius: 50%;
  --ui-map-ctrl-btn-shadow: 0 20px 30px rgba(0, 0, 0, 0.36), 0 8px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --ui-map-ctrl-btn-hover-border: rgba(143, 211, 255, 0.55);
  --ui-map-ctrl-btn-hover-shadow: 0 24px 36px rgba(0, 0, 0, 0.42), 0 10px 18px rgba(58, 166, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --ui-map-zoom-group-radius: 12px;
  --ui-map-zoom-group-shadow: 0 20px 30px rgba(0, 0, 0, 0.36), 0 8px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --ui-map-zoom-btn-color: #e8f2ff;
  --ui-map-zoom-icon-filter: drop-shadow(0 0 4px rgba(58, 166, 255, 0.4));
  --ui-map-zoom-group-bg: rgba(235, 240, 255, 0.16);
  --ui-map-zoom-group-border: rgba(143, 211, 255, 0.28);
  --ui-map-zoom-btn-hover-bg: rgba(143, 211, 255, 0.16);
  --ui-map-zoom-btn-icon-filter: brightness(0) invert(1);

  --ui-chat-rich-toolbar-border: rgba(80, 140, 100, 0.2);
  --ui-chat-rich-btn-bg: rgba(0, 0, 0, 0.3);
  --ui-chat-rich-btn-border: rgba(80, 120, 90, 0.45);
  --ui-chat-rich-btn-color: var(--text-dim);
  --ui-chat-rich-btn-hover-color: var(--blue);
  --ui-chat-rich-btn-hover-border: rgba(58, 166, 255, 0.45);

  --ui-ghost-color: var(--text-dim);
  --ui-terminal-close-bar: rgba(216, 255, 226, 0.95);
  --ui-terminal-close-bar-hover: rgba(228, 255, 236, 1);
  --ui-terminal-close-bar-glow: 0 0 8px rgba(125, 252, 138, 0.35);
  --ui-terminal-close-bar-hover-glow: 0 0 20px rgba(125, 252, 138, 0.95);
  --ui-terminal-date-indicator-filter: invert(87%) sepia(18%) saturate(578%) hue-rotate(74deg)
    brightness(94%) contrast(92%);
  --ui-terminal-date-wrap-border: rgba(124, 198, 153, 0.45);
  --ui-terminal-date-wrap-bg: rgba(8, 17, 12, 0.92);
  --ui-terminal-date-input-color: rgba(222, 250, 233, 0.96);
  --ui-terminal-date-input-caret: rgba(180, 255, 210, 0.95);
  --ui-terminal-date-placeholder: rgba(150, 190, 175, 0.55);
  --ui-terminal-date-cal-color: rgba(160, 220, 180, 0.55);
  --ui-terminal-date-cal-hover: rgba(230, 255, 240, 1);
  --ui-terminal-hub-btn-color: rgba(180, 230, 200, 0.55);
  --ui-terminal-hub-btn-hover: rgba(220, 255, 235, 1);

  /* Global close cross */
  --ui-close-bar: #f2f7fc;
  --ui-close-bar-hover: #effff4;
  --ui-close-bar-glow: 0 0 9px rgba(125, 252, 138, 0.45);
  --ui-close-bar-hover-glow: 0 0 34px rgba(125, 252, 138, 1);

  /* Node log — city / visit rows */
  --ui-node-city-name-color: rgba(232, 245, 238, 0.98);
  --ui-node-city-visit-center-color: rgba(158, 198, 178, 0.9);
  --ui-node-rating-label-color: rgba(140, 168, 158, 0.82);
  --ui-node-visit-title-color: rgba(143, 211, 255, 0.94);
  --ui-node-visit-range-color: rgba(192, 212, 203, 0.84);
  --ui-node-city-dates-color: rgba(170, 198, 188, 0.88);
  --ui-node-note-text-color: rgba(210, 235, 220, 0.82);
  --ui-node-city-active-name-color: rgba(143, 211, 255, 0.96);
  --ui-node-city-active-hover-bg: rgba(14, 24, 20, 0.5);
  --ui-node-city-active-hover-name: rgba(190, 232, 255, 0.98);
  --ui-node-city-hover-bg: rgba(12, 22, 18, 0.42);
  --ui-node-city-hover-name-color: rgba(200, 235, 220, 0.96);
  --ui-node-city-hover-card-name-color: rgba(210, 245, 228, 0.98);
  --ui-node-city-hover-title-color: #eaf3ff;
  --ui-node-city-hover-title-shadow: 0 0 6px rgba(58, 166, 255, 0.65), 0 0 14px rgba(255, 64, 96, 0.35);
  --ui-node-city-hover-bar-color: rgba(125, 252, 138, 0.95);
  --ui-node-city-active-bar-color: rgba(58, 166, 255, 0.95);

  /* Friends online cards */
  --ui-friend-row-bg: rgba(5, 10, 8, 0.55);
  --ui-friend-row-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --ui-friend-handle-color: rgba(143, 211, 255, 0.95);
  --ui-friend-loc-tap-color: rgba(143, 211, 255, 0.85);

  /* About project drawer + story modal */
  --ui-about-drawer-bg: rgba(6, 14, 12, 0.97);
  --ui-about-drawer-border: rgba(125, 252, 138, 0.22);
  --ui-about-drawer-head-border: rgba(125, 252, 138, 0.16);
  --ui-about-drawer-title-color: rgba(125, 252, 138, 0.92);
  --ui-about-drawer-lead-color: rgba(220, 235, 245, 0.92);
  --ui-about-drawer-section-color: rgba(125, 252, 138, 0.88);
  --ui-mnm-story-panel-bg: linear-gradient(180deg, rgba(8, 16, 14, 0.98), rgba(4, 8, 7, 0.99));
  --ui-mnm-story-panel-border: rgba(125, 252, 138, 0.28);
  --ui-mnm-story-title-color: rgba(125, 252, 138, 0.92);
  --ui-mnm-story-body-color: rgba(220, 235, 228, 0.92);
  --ui-mnm-story-lead-color: rgba(236, 244, 240, 0.96);

  /* Achievement help */
  --ui-achievement-help-bg: #060c0a;

  /* © emblem — single thin mark, no extra outer ring */
  --ui-legal-emblem-bg: transparent;
  --ui-legal-emblem-border: transparent;
  --ui-legal-emblem-radius: 0;
  --ui-legal-emblem-width: auto;
  --ui-legal-emblem-height: auto;
  --ui-legal-emblem-inner-color: rgba(200, 228, 218, 0.9);

  /* Feature map (quick actions) */
  --ui-feature-map-row-border: rgba(120, 160, 130, 0.18);
  --ui-feature-map-footer-border: rgba(120, 160, 130, 0.35);
  --ui-feature-map-footer-copy-color: rgba(143, 211, 255, 0.9);
  --ui-feature-map-footer-legal-color: rgba(180, 210, 200, 0.55);
  --ui-feature-map-tag-live-color: #9ef5a8;
  --ui-feature-map-tag-demo-color: #8fd3ff;
  --ui-feature-map-tag-plan-color: #a16207;
  --ui-feature-map-backlog-bg: rgba(5, 12, 10, 0.35);
  --ui-feature-map-backlog-border: rgba(120, 160, 130, 0.35);

  /* DATA & quick-action inset panels */
  --ui-data-split-outer-bg: rgba(8, 14, 12, 0.88);
  --ui-data-split-outer-border: rgba(125, 252, 138, 0.24);
  --ui-data-split-outer-shadow: 0 0 0 1px rgba(2, 8, 6, 0.95), 0 22px 56px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --ui-data-split-main-bg: rgba(4, 10, 8, 0.58);
  --ui-data-split-main-border: rgba(80, 120, 90, 0.38);
  --ui-data-split-main-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.32);
  --ui-data-split-rail-bg: rgba(3, 8, 6, 0.72);
  --ui-data-split-rail-border: rgba(80, 120, 90, 0.4);
  --ui-data-split-rail-inset: inset 0 0 0 1px rgba(0, 0, 0, 0.28);
  --ui-data-detail-toolbar-border: rgba(118, 176, 146, 0.28);
  --ui-data-detail-title-bg: linear-gradient(180deg, rgba(18, 38, 58, 0.76), rgba(10, 24, 40, 0.76));
  --ui-data-detail-title-border: rgba(114, 179, 255, 0.42);
  --ui-data-detail-title-color: rgba(213, 236, 255, 0.96);
  --ui-data-rail-title-color: rgba(200, 235, 255, 0.94);
  --ui-data-rail-lead-color: rgba(160, 200, 185, 0.75);
  --ui-data-hint-text-color: rgba(200, 230, 215, 0.88);
  --ui-app-set-group-label-color: rgba(143, 211, 255, 0.52);
  --ui-app-set-row-bg: rgba(0, 0, 0, 0.22);
  --ui-app-set-row-border: rgba(80, 120, 90, 0.3);
  --ui-app-set-row-color: rgba(230, 245, 240, 0.9);
  --ui-app-set-row-hover-bg: rgba(125, 252, 138, 0.07);
  --ui-app-set-row-hover-border: rgba(125, 252, 138, 0.38);
  --ui-app-set-row-action-color: rgba(210, 235, 255, 0.96);
  --ui-app-set-row-action-border: rgba(58, 166, 255, 0.38);
  --ui-app-theme-seg-btn-bg: rgba(0, 0, 0, 0.2);
  --ui-app-theme-seg-btn-border: rgba(80, 120, 90, 0.35);
  --ui-app-theme-seg-btn-color: rgba(212, 235, 226, 0.92);
  --ui-app-theme-seg-btn-hover-bg: rgba(58, 166, 255, 0.1);
  --ui-app-theme-seg-btn-hover-border: rgba(143, 211, 255, 0.55);
  --ui-app-theme-seg-btn-active-bg: linear-gradient(135deg, rgba(58, 166, 255, 0.2), rgba(125, 252, 138, 0.18));
  --ui-app-theme-seg-btn-active-border: rgba(143, 211, 255, 0.75);
  --ui-app-theme-seg-btn-active-color: #f2f8ff;
  --ui-friend-action-bg: rgba(255, 255, 255, 0.04);
  --ui-friend-action-hover-bg: rgba(58, 166, 255, 0.14);
  --ui-about-drawer-body-color: var(--text-dim);
  --ui-about-drawer-nodus-bg: rgba(8, 18, 24, 0.72);
  --ui-about-drawer-nodus-border: rgba(143, 211, 255, 0.22);
  --ui-about-drawer-kicker-color: rgba(125, 252, 138, 0.92);
  --ui-about-drawer-subkicker-color: rgba(160, 190, 205, 0.82);
  --ui-about-drawer-heritage-border: rgba(125, 252, 138, 0.14);
  --ui-about-drawer-heritage-lead-color: rgba(160, 190, 205, 0.82);
  --ui-mnm-story-header-border: rgba(125, 252, 138, 0.18);
  --ui-mnm-story-figcaption-color: rgba(160, 190, 205, 0.85);
  --ui-mnm-story-sign-color: rgba(125, 252, 138, 0.88);
  --ui-mnm-story-figure-border: rgba(143, 211, 255, 0.2);
  --ui-map-ctrl-btn-active-shadow: 0 24px 36px rgba(0, 0, 0, 0.44), 0 10px 18px rgba(58, 166, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);

  /* Five-dot hub trigger */
  --ui-domino-color: rgba(143, 211, 255, 0.5);
  --ui-domino-hover-color: rgba(235, 250, 255, 1);
  --ui-domino-active-color: rgba(125, 252, 138, 1);

  /* Legal / About modal */
  --ui-legal-window-bg: #060c0a;
  --ui-legal-header-border: rgba(80, 120, 90, 0.35);
  --ui-legal-tabs-border: rgba(80, 120, 90, 0.25);
  --ui-legal-tab-bg: rgba(0, 0, 0, 0.3);
  --ui-legal-tab-border: rgba(80, 120, 90, 0.4);
  --ui-legal-tab-active-border: rgba(58, 166, 255, 0.45);
  --ui-legal-tab-active-color: rgba(143, 211, 255, 0.95);
  --ui-legal-body-color: rgba(220, 235, 225, 0.9);
  --ui-legal-body-h3-color: rgba(143, 211, 255, 0.92);
  --ui-legal-foot-border: rgba(80, 120, 90, 0.18);
  --ui-legal-foot-color: rgba(200, 225, 210, 0.65);
  --ui-legal-foot-brand-color: rgba(210, 235, 220, 0.82);
  --ui-legal-foot-warn-color: rgba(175, 200, 185, 0.55);

  /* Map settings extras */
  --ui-map-settings-hint-color: rgba(156, 198, 170, 0.72);
  --ui-map-settings-unavail-hint-color: rgba(180, 195, 215, 0.72);
  --ui-map-settings-seg-hover-border: rgba(143, 211, 255, 0.5);
  --ui-map-settings-seg-hover-bg: rgba(143, 211, 255, 0.14);
  --ui-map-settings-seg-active-text: var(--map-settings-save-text);
  --ui-map-settings-select-focus-border: rgba(143, 211, 255, 0.62);
  --ui-map-settings-select-focus-glow: 0 0 0 2px rgba(143, 211, 255, 0.12);
  --ui-map-settings-color-scheme: dark;

  /* Message edit timer ring */
  --ui-msg-edit-hud-bg: rgba(0, 0, 0, 0.18);
  --ui-msg-edit-hud-ring: rgba(255, 255, 255, 0.08);
  --ui-msg-edit-hud-border: rgba(255, 217, 90, 0.22);
  --ui-msg-edit-hud-border-hover: rgba(255, 217, 90, 0.45);
  --ui-msg-edit-hud-pencil: rgba(255, 230, 160, 0.95);
  --ui-msg-edit-textarea-bg: rgba(0, 0, 0, 0.35);
  --ui-msg-edit-textarea-border: rgba(143, 211, 255, 0.35);

  /* Flatpickr calendar */
  --ui-flatpickr-bg: linear-gradient(180deg, rgba(8, 18, 12, 0.99), rgba(5, 11, 8, 0.99));
  --ui-flatpickr-border: rgba(125, 252, 138, 0.52);
  --ui-flatpickr-shadow: 0 18px 34px rgba(0, 0, 0, 0.62), 0 0 22px rgba(125, 252, 138, 0.32);
  --ui-flatpickr-text: rgba(224, 250, 234, 0.98);
  --ui-flatpickr-weekday: rgba(188, 238, 204, 0.96);
  --ui-flatpickr-day: rgba(216, 244, 226, 0.96);
  --ui-flatpickr-day-hover-bg: rgba(92, 196, 126, 0.28);
  --ui-flatpickr-day-hover-border: rgba(125, 252, 138, 0.56);
  --ui-flatpickr-day-hover-color: #ecfff1;
  --ui-flatpickr-day-today-border: rgba(156, 246, 180, 0.72);
  --ui-flatpickr-day-today-color: rgba(232, 255, 239, 0.98);
  --ui-flatpickr-day-selected-bg: linear-gradient(180deg, rgba(74, 176, 104, 0.94), rgba(50, 132, 78, 0.97));
  --ui-flatpickr-day-selected-border: rgba(172, 252, 193, 0.92);
  --ui-flatpickr-day-selected-color: #f0fff5;
  --ui-flatpickr-day-disabled: rgba(122, 160, 135, 0.62);
  --ui-flatpickr-nav-color: rgba(186, 244, 205, 0.96);
  --ui-flatpickr-option-bg: #0a140f;
  --ui-flatpickr-option-color: rgba(222, 248, 232, 0.98);

  /* Map status chip (top-left) */
  --ui-map-status-chip-bg: rgba(6, 12, 16, 0.72);
  --ui-map-status-chip-border: rgba(125, 252, 138, 0.28);
  --ui-map-status-chip-color: rgba(210, 235, 255, 0.9);
  --ui-map-status-chip-display: none;

  /* Chat compose side tools */
  --ui-mnp-polish-bg: rgba(58, 166, 255, 0.1);
  --ui-mnp-polish-border: rgba(143, 211, 255, 0.25);
  --ui-mnp-polish-color: rgba(255, 217, 120, 0.95);
  --ui-mnp-polish-hover-bg: rgba(125, 252, 138, 0.1);
  --ui-mnp-polish-hover-border: rgba(125, 252, 138, 0.4);

  /* Rating hearts (add-node terminal) */
  --ui-rating-heart-inactive: #eee8b0;
  --ui-rating-heart-inactive-shadow: 0 0 1px rgba(61, 193, 54, 0.6);
  --ui-log-heart-off-color: rgba(48, 62, 56, 0.95);

  /* Terminal date fields + window title override */
  --ui-terminal-date-bg: linear-gradient(180deg, rgba(11, 23, 17, 0.9), rgba(8, 17, 12, 0.92));
  --ui-terminal-date-border: rgba(124, 198, 153, 0.5);
  --ui-terminal-date-color: rgba(222, 250, 233, 0.96);
  --ui-terminal-date-scheme: dark;
  --ui-terminal-window-title-color: rgba(210, 244, 220, 0.96);

  /* My Page fullscreen */
  --my-page-screen-bg: radial-gradient(circle at 0 0, #1e2b23 0, #050706 55%, #000 100%);
  --my-page-shell-bg: linear-gradient(165deg, rgba(18, 32, 28, 0.42) 0%, rgba(6, 12, 10, 0.55) 45%, rgba(4, 8, 7, 0.72) 100%),
    radial-gradient(circle at 10% 0%, rgba(58, 166, 255, 0.12), transparent 50%),
    radial-gradient(circle at 90% 20%, rgba(125, 252, 138, 0.08), transparent 45%);
  --theme-my-page-card-bg: linear-gradient(165deg, rgba(10, 18, 16, 0.72) 0%, rgba(5, 10, 8, 0.88) 55%, rgba(3, 7, 6, 0.94) 100%),
    radial-gradient(circle at 0 0, rgba(58, 166, 255, 0.07), transparent 52%),
    radial-gradient(circle at 100% 0, rgba(125, 252, 138, 0.05), transparent 48%);
  --theme-my-page-card-border: rgba(143, 211, 255, 0.18);
  --theme-my-page-card-shadow: 0 16px 40px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(2, 6, 4, 0.65);
  --my-page-nav-active-border: rgba(125, 252, 138, 0.42);
  --my-page-nav-active-bg: linear-gradient(145deg, rgba(58, 166, 255, 0.14), rgba(8, 16, 12, 0.82));
  --my-page-nav-active-color: rgba(200, 245, 230, 0.98);
  --my-page-nav-active-shadow: 0 0 14px rgba(58, 166, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --my-page-color-scheme: dark;
  --my-page-rail-border: rgba(125, 252, 138, 0.16);
  --my-page-rail-bg: rgba(8, 14, 12, 0.38);
  --my-page-nav-item-text: rgba(236, 244, 240, 0.92);
  --my-page-nav-item-icon: rgba(143, 211, 255, 0.9);
  --my-page-nav-item-hover-bg: rgba(58, 166, 255, 0.1);
  --my-page-muted-text: rgba(175, 205, 190, 0.72);
  --my-page-empty-text: rgba(160, 190, 175, 0.65);
  --my-page-stat-border: rgba(143, 211, 255, 0.16);
  --my-page-stat-bg: rgba(4, 10, 8, 0.55);
  --my-page-stat-label: rgba(160, 195, 180, 0.7);
  --my-page-stat-value: rgba(210, 245, 230, 0.96);
  --my-page-stat-value-glow: 0 0 16px rgba(58, 166, 255, 0.2);
  --my-page-brand-chip-border: rgba(125, 252, 138, 0.14);
  --my-page-brand-chip-bg: rgba(6, 12, 10, 0.5);
  --my-page-btn-border: rgba(143, 211, 255, 0.22);
  --my-page-btn-bg: rgba(6, 12, 10, 0.72);
  --my-page-btn-text: rgba(210, 235, 225, 0.92);
  --my-page-btn-primary-border: rgba(125, 252, 138, 0.38);
  --my-page-btn-primary-bg: linear-gradient(145deg, rgba(58, 166, 255, 0.18), rgba(12, 22, 18, 0.88));
  --my-page-btn-primary-text: rgba(220, 250, 235, 0.98);
  --my-page-btn-hover-border: rgba(58, 166, 255, 0.45);
  --my-page-btn-hover-bg: rgba(12, 20, 16, 0.88);
  --my-page-search-border: rgba(143, 211, 255, 0.2);
  --my-page-search-bg: rgba(4, 10, 8, 0.65);
  --my-page-input-border: rgba(143, 211, 255, 0.2);
  --my-page-input-bg: rgba(4, 10, 8, 0.72);
  --my-page-dialog-active-border: rgba(125, 252, 138, 0.38);
  --my-page-dialog-active-bg: linear-gradient(180deg, rgba(20, 48, 72, 0.22), rgba(6, 12, 10, 0.78)),
    radial-gradient(circle at 0 0, rgba(58, 166, 255, 0.12), transparent 55%);
  --my-page-shell-outline: rgba(143, 211, 255, 0.52);
  --my-page-flash-outline: rgba(125, 252, 138, 0.45);
  --my-page-topbar-bg: linear-gradient(to bottom, rgba(18, 40, 54, 0.28), rgba(6, 12, 10, 0.86)),
    radial-gradient(circle at 20% 0, rgba(58, 166, 255, 0.2), transparent 55%),
    radial-gradient(circle at 80% 0, rgba(125, 252, 138, 0.14), transparent 55%);
  --my-page-topbar-border: rgba(143, 211, 255, 0.22);
  --my-page-topbar-shadow: 0 18px 34px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(2, 6, 4, 0.92);
  --my-page-global-search-border: rgba(80, 120, 90, 0.85);
  --my-page-global-search-bg: rgba(5, 8, 6, 0.96);
  --my-page-global-search-placeholder: rgba(210, 235, 220, 0.45);
  --my-page-global-btn-border: rgba(80, 120, 90, 0.85);
  --my-page-global-btn-bg: rgba(3, 8, 6, 0.72);
  --my-page-global-btn-hover-bg: rgba(58, 166, 255, 0.16);
  --my-page-global-btn-hover-border: rgba(143, 211, 255, 0.45);
  --my-page-global-btn-icon: rgba(143, 211, 255, 0.9);
  --my-page-legal-text: rgba(175, 210, 195, 0.68);
  --my-page-legal-text-dim: rgba(160, 195, 180, 0.58);
  --my-page-legal-edge: linear-gradient(
    90deg,
    rgba(58, 166, 255, 0),
    rgba(58, 166, 255, 0.45),
    rgba(125, 252, 138, 0.35),
    rgba(58, 166, 255, 0.45),
    rgba(58, 166, 255, 0)
  );
  --my-page-legal-edge-glow: 0 0 16px rgba(58, 166, 255, 0.18);
  --my-page-legal-inner-bg: linear-gradient(to top, rgba(4, 10, 8, 0.42), rgba(6, 14, 12, 0.12)),
    radial-gradient(ellipse 90% 50% at 50% 100%, rgba(58, 166, 255, 0.04), transparent 72%);
  --my-page-legal-copy: rgba(200, 228, 215, 0.72);
  --my-page-legal-brand: rgba(220, 245, 230, 0.92);
  --my-page-legal-sub: rgba(190, 218, 205, 0.65);
  --my-page-legal-rights: rgba(170, 200, 185, 0.55);
  --my-page-legal-ip: rgba(175, 205, 190, 0.58);
  --my-page-legal-ip-border: rgba(80, 120, 100, 0.2);
  --my-page-legal-link: rgba(143, 211, 255, 0.75);
  --my-page-legal-link-border: rgba(143, 211, 255, 0.28);
  --my-page-legal-link-hover: rgba(125, 252, 138, 0.85);
  --my-page-legal-link-hover-border: rgba(125, 252, 138, 0.35);
  --my-page-col-title-color: rgba(210, 245, 225, 0.96);
  --my-page-col-title-shadow: 0 0 22px rgba(125, 252, 138, 0.22), 0 1px 0 rgba(0, 0, 0, 0.45);
  --my-page-side-title-color: rgba(210, 235, 220, 0.88);
  --my-page-rail-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --ui-logo-color: var(--blue);
  --ui-logo-glow: 0 0 8px rgba(58, 166, 255, 0.9), 0 0 20px rgba(58, 166, 255, 0.5);
  --ui-body-texture: none;
  --ui-panel-texture: repeating-radial-gradient(
      circle at 0 100%,
      rgba(80, 140, 220, 0.08) 0,
      rgba(80, 140, 220, 0.08) 2px,
      transparent 2px,
      transparent 8px
    ),
    repeating-radial-gradient(
      circle at 0 0,
      rgba(80, 140, 220, 0.05) 0,
      rgba(80, 140, 220, 0.05) 4px,
      transparent 4px,
      transparent 14px
    ),
    repeating-linear-gradient(
      135deg,
      rgba(80, 140, 220, 0.04) 0,
      rgba(80, 140, 220, 0.04) 3px,
      transparent 3px,
      transparent 10px
    );
  --ui-panel-texture-opacity: 0.6;
  --ui-accent-dynamic: rgba(236, 202, 116, 0.9);
  --ui-info-location-color: rgba(143, 198, 236, 0.84);
  --ui-avatar-border: rgba(125, 252, 138, 0.95);
  --ui-avatar-bg: #020304;
  --ui-avatar-shadow:
    0 0 0 1px rgba(125, 252, 138, 0.35),
    0 0 12px rgba(125, 252, 138, 0.7),
    0 0 28px rgba(125, 252, 138, 0.4);
  --ui-profile-label-color: rgba(182, 228, 255, 0.9);
  --ui-profile-sub-color: rgba(186, 208, 226, 0.9);
  --ui-btn-auth-border: rgba(58, 166, 255, 0.6);
  --ui-btn-auth-color: var(--blue);
  --ui-btn-auth-hover-bg: rgba(58, 166, 255, 0.1);
  --ui-btn-auth-premium-bg: linear-gradient(165deg, rgba(12, 22, 28, 0.95), rgba(4, 10, 8, 0.88));
  --ui-btn-auth-premium-border: rgba(143, 211, 255, 0.38);
  --ui-btn-auth-premium-color: rgba(220, 238, 248, 0.98);
  --ui-btn-auth-premium-hover-border: rgba(125, 252, 138, 0.45);
  --ui-btn-auth-premium-hover-bg: linear-gradient(165deg, rgba(18, 32, 28, 0.98), rgba(8, 18, 14, 0.92));
  --ui-map-chat-head-color: var(--green);
  --ui-map-chat-row-bg: rgba(255, 255, 255, 0.03);
  --ui-map-chat-row-hover-shadow: 0 0 0 1px rgba(58, 166, 255, 0.12);
  --ui-map-chat-av-bg: linear-gradient(145deg, #7dfc8a, #3aa6ff);
  --ui-map-chat-av-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 0 14px rgba(125, 252, 138, 0.35);
  --ui-map-chat-av-ring: rgba(125, 252, 138, 0.45);
  --ui-map-chat-nodus-name: rgba(190, 255, 220, 0.98);
  --ui-map-chat-collapse-bg: rgba(255, 255, 255, 0.05);
  --ui-map-chat-collapse-hover-bg: rgba(255, 255, 255, 0.1);
  --ui-map-time-label: rgba(235, 240, 255, 0.85);
  --ui-travel-rank-color: rgba(156, 220, 255, 0.94);
  --ui-tf-name-color: rgba(127, 252, 167, 0.9);
  --ui-tf-desc-color: rgba(226, 232, 228, 0.78);
  --ui-tf-composer-head-color: rgba(125, 252, 138, 0.92);
  --ui-tf-composer-head-hint: rgba(143, 211, 255, 0.55);
  --ui-tf-composer-textarea-bg: rgba(0, 0, 0, 0.32);
  --ui-tf-composer-textarea-placeholder: rgba(213, 221, 213, 0.55);
  --ui-tf-composer-focus-border: rgba(125, 252, 138, 0.35);
  --ui-tf-composer-focus-shadow: inset 0 0 0 1px rgba(58, 166, 255, 0.28),
    inset 0 0 40px rgba(58, 166, 255, 0.06);
  --ui-tf-composer-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(2, 8, 6, 0.5);
  --ui-tf-composer-shine: linear-gradient(
    135deg,
    rgba(143, 211, 255, 0.06),
    transparent 40%,
    transparent 60%,
    rgba(125, 252, 138, 0.05)
  );
  --ui-tf-attach-bg: rgba(3, 8, 6, 0.65);
  --ui-tf-attach-color: rgba(125, 252, 138, 0.9);
  --ui-tf-post-btn-border: rgba(125, 252, 138, 0.4);
  --ui-tf-post-btn-bg: rgba(125, 252, 138, 0.12);
  --ui-tf-post-btn-text: rgba(125, 252, 138, 0.95);
  --ui-tf-polish-btn-bg: rgba(0, 0, 0, 0.22);
  --ui-tf-polish-btn-border: rgba(143, 211, 255, 0.28);
  --ui-tf-polish-btn-color: rgba(200, 230, 255, 0.95);
  --ui-tf-card-bg: linear-gradient(145deg, rgba(20, 28, 24, 0.9) 0%, rgba(5, 10, 8, 0.95) 100%);
  --ui-tf-card-border: rgba(80, 120, 90, 0.45);
  --ui-tf-card-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  --ui-tf-card-hover-border: rgba(125, 252, 138, 0.35);
  --ui-tf-card-hover-shadow: 0 12px 48px rgba(0, 0, 0, 0.45), 0 0 24px rgba(58, 166, 255, 0.08);
  --ui-tf-card-sponsored-bg: linear-gradient(145deg, rgba(18, 28, 42, 0.92) 0%, rgba(8, 14, 24, 0.96) 100%);
  --ui-tf-card-sponsored-title-color: rgba(205, 230, 255, 0.95);
  --ui-tf-toolbar-bg: linear-gradient(180deg, rgba(8, 14, 12, 0.72) 0%, rgba(4, 8, 6, 0.88) 100%);
  --ui-tf-toolbar-border: rgba(80, 120, 90, 0.38);
  --ui-tf-toolbar-shadow: inset 0 1px 0 rgba(125, 252, 138, 0.07), 0 4px 18px rgba(0, 0, 0, 0.22);
  --ui-tf-sidebar-bg: rgba(0, 0, 0, 0.35);
  --ui-tf-sidebar-border: rgba(58, 166, 255, 0.2);
  --ui-tf-side-label-color: rgba(168, 220, 178, 0.92);
  --ui-tf-hot-item-color: rgba(205, 225, 210, 0.88);
  --ui-tf-hot-item-border: rgba(80, 120, 90, 0.25);
  --ui-tf-hot-count-color: #a7d6ff;
  --ui-tf-tag-bg: rgba(8, 16, 12, 0.82);
  --ui-tf-tag-border: rgba(125, 252, 138, 0.42);
  --ui-tf-tag-color: rgba(232, 248, 236, 0.98);
  --ui-tf-tag-hover-bg: rgba(58, 166, 255, 0.16);
  --ui-tf-geo-bg: rgba(3, 10, 18, 0.55);
  --ui-tf-geo-border: rgba(58, 166, 255, 0.28);
  --ui-tf-geo-sep-color: rgba(200, 220, 255, 0.72);
  --ui-tf-geo-crumb-bg: rgba(0, 0, 0, 0.35);
  --ui-tf-geo-crumb-border: rgba(80, 120, 90, 0.45);
  --ui-tf-geo-crumb-color: rgba(220, 235, 225, 0.95);
  --ui-tf-action-btn-bg: rgba(0, 0, 0, 0.45);
  --ui-tf-action-btn-border: rgba(125, 252, 138, 0.55);
  --ui-tf-action-btn-color: #b8f8c4;
  --ui-tf-rules-btn-border: rgba(58, 166, 255, 0.55);
  --ui-tf-rules-btn-color: #b8e4ff;
  --ui-tf-tab-bg: rgba(0, 0, 0, 0.35);
  --ui-tf-tab-border: rgba(80, 120, 90, 0.45);
  --ui-tf-tab-color: var(--text-dim);
  --ui-tf-tab-hover-border: rgba(58, 166, 255, 0.35);
  --ui-tf-tab-active-bg: rgba(125, 252, 138, 0.08);
  --ui-tf-tab-active-border: rgba(125, 252, 138, 0.55);
  --ui-tf-tab-active-color: var(--green);
  --ui-tf-tab-active-shadow: 0 0 16px rgba(125, 252, 138, 0.2);
  --ui-tf-top-btn-bg: rgba(0, 0, 0, 0.4);
  --ui-tf-top-btn-border: rgba(58, 166, 255, 0.5);
  --ui-tf-top-btn-color: #c8e8ff;
  --ui-tf-top-btn-hover-shadow: 0 0 14px rgba(58, 166, 255, 0.2);
  --ui-tf-search-bg: rgba(0, 0, 0, 0.35);
  --ui-tf-search-border: rgba(80, 120, 90, 0.5);
  --ui-tf-sort-select-bg: rgba(0, 0, 0, 0.35);
  --ui-tf-sort-select-border: rgba(80, 120, 90, 0.5);
  --ui-tf-card-react-bg: rgba(0, 0, 0, 0.35);
  --ui-tf-card-react-border: rgba(80, 120, 90, 0.5);
  --ui-tf-card-react-color: var(--text-main);
  --ui-tf-modal-bg: #060c0a;
  --ui-tf-modal-thread-bg: #060c0a;
  --ui-tf-modal-thread-border: rgba(125, 252, 138, 0.22);
  --ui-tf-aurora-opacity: 0.5;
  --ui-tf-scanlines-opacity: 0.35;
  --ui-mp-audio-visual-bg: rgba(4, 10, 14, 0.85);
  --ui-mp-audio-visual-border: rgba(58, 166, 255, 0.22);
  --ui-mp-audio-btn-bg: rgba(5, 10, 14, 0.8);
  --ui-mp-audio-btn-record-border: rgba(255, 64, 96, 0.45);
  --ui-mp-audio-btn-record-color: var(--red-neon);
  --ui-mp-audio-btn-save-border: rgba(125, 252, 138, 0.45);
  --ui-mp-audio-btn-save-color: var(--green);
  --ui-mp-audio-preview-bg: rgba(4, 10, 8, 0.65);
  --ui-mp-audio-preview-border: rgba(125, 252, 138, 0.22);
  --ui-mp-audio-history-bg: rgba(0, 0, 0, 0.22);
  --ui-mp-field-polish-bg: rgba(0, 0, 0, 0.2);
  --ui-mp-field-polish-border: rgba(143, 211, 255, 0.22);
  --ui-mp-field-polish-color: rgba(210, 230, 245, 0.95);
  --ui-mp-field-polish-hover-border: rgba(125, 252, 138, 0.35);
  --my-page-select-option-bg: #0f1826;
  --my-page-select-option-color: rgba(220, 236, 255, 0.95);
  --my-page-select-option-checked-bg: rgba(58, 166, 255, 0.35);
  --my-page-select-option-checked-color: #ffffff;
  --my-page-input-focus-border: rgba(143, 211, 255, 0.42);
  --my-page-input-focus-shadow: inset 0 0 0 1px rgba(58, 166, 255, 0.38),
    inset 0 0 28px rgba(58, 166, 255, 0.07);
  --my-page-dialog-item-bg: linear-gradient(180deg, rgba(25, 60, 90, 0.16), rgba(6, 12, 10, 0.72)),
    radial-gradient(circle at 0 0, rgba(58, 166, 255, 0.16), transparent 55%);
  --my-page-dialog-item-border: rgba(143, 211, 255, 0.14);
  --my-page-dialog-item-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --my-page-dialog-item-active-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 18px rgba(125, 252, 138, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --my-page-dialogs-header-bg: rgba(6, 12, 10, 0.45);
  --my-page-dialogs-header-border: rgba(143, 211, 255, 0.14);
  --my-page-dialogs-header-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.45);
  --my-page-msg-input-area-bg: linear-gradient(to top, rgba(4, 10, 8, 0.96), rgba(6, 14, 12, 0.88)),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(58, 166, 255, 0.08), transparent 70%);
  --my-page-msg-input-area-border: rgba(143, 211, 255, 0.24);
  --my-page-msg-input-area-shadow: 0 -10px 28px rgba(0, 0, 0, 0.35);
  --my-page-msg-input-cloud-bg: rgba(8, 14, 12, 0.45);
  --my-page-msg-input-cloud-border: rgba(143, 211, 255, 0.22);
  --my-page-msg-input-cloud-focus-border: rgba(125, 252, 138, 0.45);
  --my-page-msg-input-cloud-focus-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(125, 252, 138, 0.28), 0 0 0 3px rgba(58, 166, 255, 0.1);
  --my-page-msg-input-cloud-bg-view: rgba(4, 10, 8, 0.78);
  --my-page-msg-input-cloud-border-view: rgba(143, 211, 255, 0.32);
  --my-page-msg-input-btn-bg: radial-gradient(circle at 0 0, #141d16 0, #050806 70%);
  --my-page-msg-input-btn-border: rgba(80, 120, 90, 0.8);
  --my-page-msg-input-btn-color: var(--text-dim);
  --my-page-msg-input-btn-send-border: rgba(125, 252, 138, 0.9);
  --my-page-msg-input-btn-send-color: var(--green);
  --ui-time-machine-bg: linear-gradient(180deg, rgba(25, 60, 90, 0.16), rgba(8, 14, 12, 0.58)),
    radial-gradient(circle at 0 0, rgba(125, 252, 138, 0.1), transparent 55%);
  --ui-time-machine-border: rgba(143, 211, 255, 0.2);
  --ui-time-machine-title: rgba(220, 236, 245, 0.92);
  --ui-time-machine-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -10px 16px rgba(0, 0, 0, 0.24),
    0 10px 20px rgba(0, 0, 0, 0.3);
  --ui-time-slider-track: rgba(2, 12, 16, 0.95);
  --ui-time-slider-track-border: rgba(58, 166, 255, 0.38);
  --ui-time-slider-thumb: radial-gradient(circle at 32% 28%, #b8e8ff, #3aa6ff 55%, #1a6aa8);
  --ui-time-slider-thumb-solid: #3aa6ff;
  --ui-time-slider-thumb-border: rgba(200, 235, 255, 0.95);
  --ui-time-slider-thumb-glow: 0 0 12px rgba(58, 166, 255, 0.85), 0 0 22px rgba(58, 166, 255, 0.35);
  --ui-time-slider-track-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6);
  --node-log-head-bg: linear-gradient(180deg, rgba(8, 16, 13, 0.72), rgba(6, 11, 9, 0.45));
  --node-log-head-border: rgba(102, 164, 124, 0.38);
  --node-log-title-color: rgba(200, 235, 220, 0.95);
  --my-page-cover-bg: linear-gradient(120deg, rgba(58, 166, 255, 0.25), transparent 40%),
    linear-gradient(300deg, rgba(125, 252, 138, 0.2), transparent 45%),
    radial-gradient(circle at 0 100%, #050706 10%, #020304 70%);
  --my-page-header-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(5, 10, 8, 0.46)),
    radial-gradient(circle at 20% 0, rgba(58, 166, 255, 0.16), transparent 60%),
    radial-gradient(circle at 80% 0, rgba(125, 252, 138, 0.12), transparent 60%);
  --my-page-header-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -12px 26px rgba(0, 0, 0, 0.55),
    0 18px 44px rgba(0, 0, 0, 0.55);
  --my-page-header-contour: linear-gradient(
    90deg,
    rgba(58, 166, 255, 0.05),
    rgba(58, 166, 255, 0.55),
    rgba(125, 252, 138, 0.75),
    rgba(58, 166, 255, 0.55),
    rgba(58, 166, 255, 0.05)
  );
  --my-page-header-contour-animation: mp-col-line-flow 5.5s ease-in-out infinite,
    mp-header-contour-pulse 4.8s ease-in-out infinite;
  --my-page-col-divider: linear-gradient(
    180deg,
    rgba(58, 166, 255, 0),
    rgba(58, 166, 255, 0.55),
    rgba(125, 252, 138, 0.35),
    rgba(58, 166, 255, 0.3),
    rgba(58, 166, 255, 0)
  );
  --my-page-col-divider-glow: 0 0 18px rgba(58, 166, 255, 0.28), 0 0 22px rgba(125, 252, 138, 0.16);
  --my-page-layout-edge: linear-gradient(
    180deg,
    rgba(58, 166, 255, 0),
    rgba(58, 166, 255, 0.38),
    rgba(125, 252, 138, 0.26),
    rgba(58, 166, 255, 0.26),
    rgba(58, 166, 255, 0)
  );
  --my-page-layout-edge-glow: 0 0 20px rgba(58, 166, 255, 0.22), 0 0 24px rgba(125, 252, 138, 0.14);

  /* Cards, info blocks, quick actions */
  --ui-card-surface: linear-gradient(145deg, #101712, #050706);
  --ui-surface-fill: radial-gradient(circle at top left, #141b16 0, #050705 70%);
  --ui-surface-border: rgba(80, 120, 90, 0.6);
  --ui-surface-inset: inset 0 0 0 1px rgba(4, 8, 6, 0.9);
  --ui-surface-hover-border: rgba(125, 252, 138, 0.8);
  --ui-surface-hover-glow: 0 0 6px rgba(125, 252, 138, 0.4);
  --ui-surface-active-fill: radial-gradient(circle at top left, rgba(10, 40, 20, 0.55) 0, rgba(5, 7, 5, 1) 70%);
  --ui-surface-active-border: rgba(125, 252, 138, 0.95);
  --ui-surface-active-glow: 0 0 12px rgba(125, 252, 138, 0.4), 0 0 20px rgba(58, 166, 255, 0.18);
  --ui-places-border: rgba(80, 110, 90, 0.7);
  --ui-panel-header-border: rgba(60, 90, 70, 0.9);
  --ui-nav-active-bg: rgba(125, 252, 138, 0.05);
  --ui-location-dot-glow: 0 0 3px rgba(125, 252, 138, 0.45);
  --ui-achievement-color: rgba(236, 202, 116, 0.9);
  --ui-achievement-glow: 0 0 3px rgba(236, 202, 116, 0.28);
  --ui-data-split-shell-bg: rgba(2, 5, 4, 0.38);
  --emoji-premium-scale: 1.35;
  --radius-lg: 6px;

  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;

  --font-xs: 9px;
  --font-sm: 10px;
  --font-md: 11px;
  --font-lg: 13px;
  /* Premium bilingual UI (RU + EN) — IBM Plex Sans; mono reserved for code/terminal */
  --font-main: "IBM Plex Sans", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-premium-ui: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mypage: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-display: "Monoton", cursive;

  --elevate-duration: 0.18s;
  --elevate-ease: ease;

  /* Calm scrollbar style, no neon highlight */
  --scroll-track: rgba(3, 10, 8, 0.96);
  --scroll-thumb: rgba(108, 130, 142, 0.52);
  --scroll-thumb-hover: rgba(128, 152, 164, 0.62);
  --scroll-thumb-border: rgba(149, 169, 180, 0.22);

  /* Side columns: fluid widths for modern monitors (no abrupt jumps) */
  --side-panel-width: clamp(300px, 22vw, 384px);
  --side-panel-width-narrow: clamp(252px, 20vw, 312px);

  /* Window chrome: close, expand, domino hub — one row, one size */
  --ui-chrome-size: 20px;
  --ui-chrome-inset: 4px;
  --ui-chrome-corner-inset: 6px;
  --ui-chrome-gap: 7px;
  --ui-chrome-close-hover: #ff5f57;
  --ui-chrome-close-glow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 1px rgba(0, 0, 0, 0.14), 0 0 12px rgba(255, 95, 87, 0.42);
  --ui-chrome-expand-hover: #28c840;
  --ui-chrome-expand-glow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 12px rgba(40, 200, 64, 0.38);
  --ui-chrome-dots-hover: #febc2e;
  --ui-chrome-dots-glow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 12px rgba(254, 188, 46, 0.38);
  --ui-chrome-ease: ease;
  --panel-crown-logo: 24px;
  --panel-crown-pad: 8px;
}

/* утилиты */
html {
  color-scheme: dark;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
}

html,
body {
  font-family: var(--font-main);
  text-rendering: geometricPrecision;
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "tnum" 1;
}

/* Native search/cancel controls often show as ugly “squares” in dark UIs — strip them */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea {
  -webkit-appearance: none;
  appearance: none;
}

input:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text-main);
  transition: background-color 9999s ease-out;
  box-shadow: 0 0 0 1000px rgba(3, 10, 18, 0.96) inset;
}

/* WebKit: все скроллы в приложении */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body:not(.tomato-mode) *::-webkit-scrollbar {
  width: var(--mnm-scroll-rail-width, 7px);
  height: var(--mnm-scroll-rail-width, 7px);
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
}

*::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: 4px;
}

body:not(.tomato-mode) *::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 99px;
}

*::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 4px;
  border: 1px solid var(--scroll-thumb-border);
  box-shadow: none;
}

body:not(.tomato-mode) *::-webkit-scrollbar-thumb {
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  box-shadow: none;
}

*::-webkit-scrollbar-corner {
  background: var(--scroll-track);
}

body:not(.tomato-mode) *::-webkit-scrollbar-corner {
  background: transparent !important;
}

/* No stepper arrows — they clash with rounded panel corners (not Tomato Battle) */
body:not(.tomato-mode) *::-webkit-scrollbar-button,
body:not(.tomato-mode) *::-webkit-scrollbar-button:single-button,
body:not(.tomato-mode) *::-webkit-scrollbar-button:vertical:start:decrement,
body:not(.tomato-mode) *::-webkit-scrollbar-button:vertical:end:increment,
body:not(.tomato-mode) *::-webkit-scrollbar-button:horizontal:start:decrement,
body:not(.tomato-mode) *::-webkit-scrollbar-button:horizontal:end:increment,
.my-page-shell *::-webkit-scrollbar-button,
.my-page-shell *::-webkit-scrollbar-button:single-button,
.my-page-shell *::-webkit-scrollbar-button:vertical:start:decrement,
.my-page-shell *::-webkit-scrollbar-button:vertical:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Inset scroll rail — thumb/track sit inside rounded window corners (no arrow clash) */
:root {
  --mnm-scroll-rail-inset: 22px;
  --mnm-scroll-rail-inset-rounded: calc(var(--mnm-rounded-panel-radius, 14px) + 16px);
  --mnm-scroll-rail-width: 7px;
  --mnm-rounded-panel-radius: 14px;
}

.mnm-scroll-rail {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

.mnm-scroll-rail::-webkit-scrollbar {
  width: var(--mnm-scroll-rail-width);
  height: var(--mnm-scroll-rail-width);
}

.mnm-scroll-rail::-webkit-scrollbar-track {
  background: transparent;
  margin-block: var(--mnm-scroll-rail-inset);
  border-radius: 99px;
}

.mnm-scroll-rail::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: none;
}

.mnm-scroll-rail::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

.mnm-rounded-scroll-host {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mnm-rounded-scroll-host > .mnm-scroll-rail {
  flex: 1 1 auto;
  min-height: 0;
}

/* Rounded modals / panels — same inset rail (class or known scroll regions) */
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-button,
body:not(.tomato-mode) .mp-newchat-list::-webkit-scrollbar-button,
body:not(.tomato-mode) .privacy-settings-body::-webkit-scrollbar-button,
body:not(.tomato-mode) .auth-captcha-modal::-webkit-scrollbar-button,
body:not(.tomato-mode) .legal-info-body::-webkit-scrollbar-button,
body:not(.tomato-mode) .achievement-help-scroll::-webkit-scrollbar-button,
body:not(.tomato-mode) .bucket-list-content::-webkit-scrollbar-button,
body:not(.tomato-mode) .notifications-list::-webkit-scrollbar-button,
body:not(.tomato-mode) .map-settings-body::-webkit-scrollbar-button,
body:not(.tomato-mode) .map-users-body::-webkit-scrollbar-button,
body:not(.tomato-mode) .terminal-body::-webkit-scrollbar-button,
body:not(.tomato-mode) .tf-modal-window--newtopic::-webkit-scrollbar-button,
body:not(.tomato-mode) .tf-thread-comments::-webkit-scrollbar-button,
body:not(.tomato-mode) .friend-rank-list::-webkit-scrollbar-button,
body:not(.tomato-mode) .travel-routes-list::-webkit-scrollbar-button,
body:not(.tomato-mode) .achievements-panel-scroll::-webkit-scrollbar-button,
.my-page-shell .mnm-scroll-rail::-webkit-scrollbar-button,
.my-page-shell .my-page-nav::-webkit-scrollbar-button,
.my-page-shell .my-page-view::-webkit-scrollbar-button,
.my-page-shell .my-page-side::-webkit-scrollbar-button,
.my-page-shell .mp-newchat-list::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .mp-newchat-list::-webkit-scrollbar-track,
body:not(.tomato-mode) .privacy-settings-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .auth-captcha-modal::-webkit-scrollbar-track,
body:not(.tomato-mode) .legal-info-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .achievement-help-scroll::-webkit-scrollbar-track,
body:not(.tomato-mode) .bucket-list-content::-webkit-scrollbar-track,
body:not(.tomato-mode) .notifications-list::-webkit-scrollbar-track,
body:not(.tomato-mode) .map-settings-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .map-users-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .terminal-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .tf-modal-window--newtopic::-webkit-scrollbar-track,
body:not(.tomato-mode) .tf-thread-comments::-webkit-scrollbar-track,
body:not(.tomato-mode) .friend-rank-list::-webkit-scrollbar-track,
body:not(.tomato-mode) .travel-routes-list::-webkit-scrollbar-track,
body:not(.tomato-mode) .achievements-panel-scroll::-webkit-scrollbar-track,
body:not(.tomato-mode) .visit-choice-list.mnm-scroll-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-track,
.my-page-shell .mnm-scroll-rail::-webkit-scrollbar-track,
.my-page-shell .my-page-nav::-webkit-scrollbar-track,
.my-page-shell .my-page-view::-webkit-scrollbar-track,
.my-page-shell .my-page-side::-webkit-scrollbar-track,
.my-page-shell .mp-newchat-list::-webkit-scrollbar-track {
  margin-block: var(--mnm-scroll-rail-inset);
  background: transparent;
  border-radius: 99px;
}

body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .friend-rank-list::-webkit-scrollbar-track,
body:not(.tomato-mode) .travel-routes-list::-webkit-scrollbar-track,
body:not(.tomato-mode) .achievements-panel-scroll::-webkit-scrollbar-track,
.my-page-shell .my-page-nav::-webkit-scrollbar-track,
.my-page-shell .my-page-view::-webkit-scrollbar-track,
.my-page-shell .my-page-side::-webkit-scrollbar-track {
  margin-block: var(--mnm-scroll-rail-inset-rounded);
}

body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .mp-newchat-list::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .privacy-settings-body::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .auth-captcha-modal::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .legal-info-body::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .achievement-help-scroll::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .bucket-list-content::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .notifications-list::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .map-settings-body::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .map-users-body::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .terminal-body::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .tf-modal-window--newtopic::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .tf-thread-comments::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .friend-rank-list::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .travel-routes-list::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .achievements-panel-scroll::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-thumb,
.my-page-shell .mnm-scroll-rail::-webkit-scrollbar-thumb,
.my-page-shell .my-page-nav::-webkit-scrollbar-thumb,
.my-page-shell .my-page-view::-webkit-scrollbar-thumb,
.my-page-shell .my-page-side::-webkit-scrollbar-thumb,
.my-page-shell .mp-newchat-list::-webkit-scrollbar-thumb {
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

body * {
  font-family: inherit;
}

/* Keep Tomato Battle typography unchanged from its identity */
body.tomato-mode,
body.tomato-mode *,
.tb-root,
.tb-root * {
  font-family: var(--font-mono);
}

/* Tomato Battle keeps classic neon perimeter even when another theme is selected */
body.tomato-mode {
  --ui-frame-border: rgba(125, 252, 138, 0.95);
  --ui-frame-glow: 0 0 18px rgba(125, 252, 138, 1), 0 0 42px rgba(125, 252, 138, 0.85);
  --ui-frame-opacity: 1;
}
.map-toggle-btn {
  position: absolute;
  top: 60px;
  left: 14px;
  right: auto;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--blue);
  color: var(--blue);
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.map-toggle-btn:hover {
  background: var(--blue);
  color: #000;
}

.notebook-header-icon i {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.hover-elevate {
  transition: transform var(--elevate-duration) var(--elevate-ease),
    box-shadow var(--elevate-duration) var(--elevate-ease),
    border-color var(--elevate-duration) var(--elevate-ease),
    color var(--elevate-duration) var(--elevate-ease);
}

.hover-elevate:hover,
.hover-float:hover,
.btn-square:hover {
  transform: translateY(-1px);
  box-shadow: var(--ui-btn-square-hover-glow);
  border-color: var(--ui-btn-square-hover-border);
}

.card-base {
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-surface-border);
  background: var(--ui-card-surface);
}

/* ЗАСТАВКА */

body.intro-active {
  background: #000000;
}

body.intro-active .neon-frame {
  visibility: hidden;
  pointer-events: none;
}

.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  overflow: hidden;
}

/* Фон-интро: canvas на весь экран */
.intro-network-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000000;
}

#introNetworkCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Стеклянная панель поверх сети (не перекрывает весь экран) */
.intro-inner {
  position: relative;
  z-index: 12;
  text-align: center;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-md);
  border: 1px solid rgba(125, 252, 138, 0.45);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.65);
  background: rgba(4, 10, 14, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
}

.intro-title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.3em;
  color: #3aa6ff;
  text-shadow: 0 0 6px rgba(58, 166, 255, 0.9), 0 0 16px rgba(58, 166, 255, 0.4);
  animation: intro-flicker 2.2s infinite;
  line-height: 1.2;
  gap: 2px;
}

.intro-title > span {
  display: block;
}

.intro-sub {
  display: block;
  margin-top: var(--space-6);
  font-size: var(--font-sm);
  letter-spacing: 0.25em;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.intro-status {
  margin-top: var(--space-8);
  font-size: var(--font-md);
  color: var(--text-main);
  display: flex;
  gap: var(--space-6);
  justify-content: center;
}

.intro-dots {
  animation: intro-dots 1s steps(2) infinite;
}

/* БАЗА */

body {
  min-height: 100vh;
  overflow: hidden;
  background: radial-gradient(circle at 0 0, #1e2b23 0, #050706 50%, #000 100%);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Заголовок NODE NOTEBOOK как COUNTRIES */

.notebook-title {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* Сабтайтл – как описание под COUNTRIES */

.notebook-subtitle {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Строка задач – как строка NODES */

/* Фильтры ALL / ACTIVE / DONE / SKIPPED в стиле табов */

.notebook-filter {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* НЕОНОВАЯ РАМКА */

.neon-frame {
  position: relative;
  min-height: 100vh;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.neon-frame::before {
  content: "";
  position: fixed;
  inset: 0;
  border-radius: 0;
  border: 1.5px solid var(--ui-frame-border);
  box-shadow: var(--ui-frame-glow);
  opacity: var(--ui-frame-opacity);
  pointer-events: none;
  z-index: 999;
}

/* ФОН ТЕКСТУРА */

.app-bg-texture {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(
      135deg,
      var(--ui-bg-texture-line) 1px,
      transparent 1px
    ),
    linear-gradient(225deg, var(--ui-bg-texture-line) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: var(--ui-bg-texture-opacity);
  mix-blend-mode: soft-light;
  z-index: 0;
}

/* ГЛАВНАЯ СЕТКА */

.app-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--side-panel-width) minmax(0, 1fr) var(--side-panel-width);
  grid-template-rows: minmax(0, 1fr);
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
  overflow: hidden;
}

/* Центральная колонка: карта / блокнот / форум — одна ячейка */
.app-shell > .left-panel {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  height: 100%;
  position: relative;
  z-index: 2;
  isolation: isolate;
}

.app-shell > .map-panel,
.app-shell > .notebook-panel,
.app-shell > .travel-forum-panel,
.app-shell > #travelForumPanel {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  z-index: 1;
  isolation: isolate;
}

.app-shell > .right-panel-wrapper {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  position: relative;
  /* Keep side columns composited above the map WebGL canvas (bucket-list / globe resize). */
  z-index: 3;
  isolation: isolate;
}

/* =============================================================================
   SHELL LAYOUT LOCK — side columns stay inside neon edge lines (2026-06)
   Tall desktop: fixed card gaps; extra height → internal row stretch only.
   Laptop (≤899px): same fixed gaps (tighter px); middle scrolls if needed.
   ============================================================================= */

.app-shell > .left-panel,
.right-panel-wrapper,
#rightPanel.right-panel {
  box-sizing: border-box;
  max-width: 100%;
}

.left-panel {
  overflow: hidden;
  min-width: 0;
}

.left-panel > * {
  min-width: 0;
  max-width: 100%;
}

.right-panel-wrapper > #rightPanel.right-panel {
  overflow-x: hidden;
}

#rightPanel.right-panel > * {
  min-width: 0;
  max-width: 100%;
}

#rightPanel .profile-nav-section,
#rightPanel .profile-block,
#rightPanel .profile-header,
#rightPanel .profile-auth-actions,
.left-panel .info-card,
.left-panel .info-row,
.left-panel .controls-row,
.left-panel .places-panel,
.left-panel .logo-block {
  box-sizing: border-box;
  max-width: 100%;
}

#rightPanel .quick-actions-grid {
  width: 100%;
  min-width: 0;
}

/* ПАНЕЛИ */

.left-panel,
.right-panel,
.map-panel {
  background: radial-gradient(circle at 0 0, var(--ui-panel-grad-a) 0, var(--ui-panel-grad-b) 55%),
    var(--bg-panel);
  border: 1px solid var(--border-soft);
  box-shadow: 0 0 0 2px var(--ui-panel-shell-ring), 0 14px 26px rgba(0, 0, 0, 0.7);
  position: relative;
}

.left-panel::before,
.right-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ui-panel-texture);
  opacity: var(--ui-panel-texture-opacity);
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* ЛЕВАЯ ПАНЕЛЬ */

.left-panel {
  display: flex;
  flex-direction: column;
  padding: var(--space-14);
  border-right: none;
  box-shadow:
    0 0 0 2px var(--ui-panel-shell-ring),
    0 14px 26px rgba(0, 0, 0, 0.7),
    inset -1px 0 12px var(--ui-panel-inset-shadow);
}

.left-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--ui-seam-color);
  /* Soft seam highlight; trail onto map is on .map-depth-grid */
  box-shadow:
    0 0 6px rgba(125, 252, 138, 0.28),
    0 0 14px rgba(118, 228, 140, 0.14);
  pointer-events: none;
  z-index: 4;
}

.right-panel-wrapper > #rightPanel.right-panel {
  border-left: none;
  height: 100%;
  min-height: 0;
  box-shadow:
    0 0 0 2px var(--ui-panel-shell-ring),
    0 14px 26px rgba(0, 0, 0, 0.7),
    inset 1px 0 12px var(--ui-panel-inset-shadow);
}

.right-panel-wrapper > #rightPanel.right-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: var(--ui-seam-color);
  box-shadow:
    0 0 6px rgba(125, 252, 138, 0.28),
    0 0 14px rgba(118, 228, 140, 0.14);
  pointer-events: none;
  z-index: 4;
}

/* ЛОГОТИП */

.logo-block {
  position: relative;
  margin-top: -6px;
  padding-bottom: 4px;
  border-bottom: none;
  margin-bottom: 4px;
  cursor: pointer;
}

.logo-block .logo-main,
.logo-block .logo-sub {
  cursor: pointer;
}

.logo-block::before,
.logo-block::after {
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(58, 166, 255, 0),
    rgba(58, 166, 255, 0.34),
    rgba(125, 252, 138, 0.26),
    rgba(58, 166, 255, 0.34),
    rgba(58, 166, 255, 0)
  );
  box-shadow: 0 0 10px rgba(58, 166, 255, 0.1);
}

.logo-block::before {
  display: none;
}

.logo-block::after {
  margin-top: 6px;
}

.logo-ascii {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.logo-main {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.32em;
  color: var(--blue);
  text-shadow: 0 0 8px rgba(58, 166, 255, 0.9), 0 0 20px rgba(58, 166, 255, 0.5);
  text-align: center;
  padding: 0 6px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  gap: 2px;
}

.logo-main > span {
  display: block;
}

.logo-cycle {
  animation: logo-color-cycle 6s infinite;
}

.logo-sub {
  font-size: var(--font-sm);
  letter-spacing: 0.25em;
  color: var(--text-dim);
  text-align: center;
}

/* ИНФО-КАРТЫ */

.info-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.info-card {
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--ui-surface-fill);
  border: 1px solid var(--ui-surface-border);
  box-shadow: var(--ui-surface-inset);
}

.info-label {
  display: block;
  font-size: var(--font-sm);
  font-weight: 700;
  color: var(--accent-olive);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.info-label i {
  margin-right: var(--space-2);
}

.info-value {
  font-size: var(--font-md);
  color: var(--text-main);
}

/* Левая панель: две отдельные карточки, строки выровнены «напротив» (subgrid) */
.left-panel .info-row {
  margin-top: var(--space-6);
  gap: var(--space-4);
}

.left-panel .info-row-paired-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 14px 14px 14px;
  gap: var(--space-4);
  margin-top: 2px;
  align-items: stretch;
}

.left-panel .info-card.info-pair-card {
  grid-row: 1 / span 3;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
  padding: 3px var(--space-6) 5px;
  text-align: center;
  align-items: center;
  justify-content: unset;
}

.left-panel .info-card.info-pair-card > .info-value {
  align-self: center;
  line-height: 1;
  margin: 0;
  padding: 0;
}

.left-panel .info-pair-card--achievement {
  grid-column: 1;
}

.left-panel .info-pair-card--stats {
  grid-column: 2;
}

.left-panel .info-pair-card > .info-label {
  grid-row: 1;
  align-self: center;
  margin-bottom: 0;
  width: 100%;
  padding-bottom: 0;
  line-height: 1;
}

.left-panel .info-pair-card--achievement #achievementText {
  grid-row: 2;
  align-self: center;
}

.left-panel .info-pair-card--achievement #infoAchievementSub {
  grid-row: 3;
  align-self: center;
}

.left-panel .info-places-contents {
  display: contents;
}

.left-panel .info-row-paired-top #infoPlaces {
  /* Override global #infoPlaces spacing so rows align with ACHIEVEMENT */
  margin-top: 0;
  font-size: inherit;
  line-height: 1;
  display: contents;
}

.left-panel .info-pair-card--stats .info-places-countries {
  grid-row: 2;
  width: 100%;
  align-self: center;
}

.left-panel .info-pair-card--stats .info-places-nodes {
  grid-row: 3;
  width: 100%;
  align-self: center;
}

.left-panel .info-achievement-line {
  display: block;
  width: 100%;
  font-size: 10px;
  line-height: 1;
  margin: 0;
  padding: 0;
}

/* Две жёлтые строки ACHIEVEMENT и COUNTRIES/NODES — одинаковый неон */
.left-panel .info-pair-card--achievement .achievement-text,
.left-panel .info-pair-card--stats .achievement-text {
  color: var(--ui-accent-dynamic);
  text-shadow: none;
  animation: none;
}

.left-panel .info-card-location-compact {
  min-height: 0;
  justify-content: flex-start;
  padding-top: 2px;
}

.left-panel .info-card-location-compact #infoLocation {
  margin-top: 2px;
  font-size: var(--font-sm);
}

.left-panel .info-card-location-compact > .info-label {
  align-self: center;
  margin-top: 0;
  margin-bottom: 0;
}

.left-panel .info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3px var(--space-6) 4px;
}

.left-panel .info-label {
  margin-bottom: 1px;
  width: 100%;
  text-align: center;
}

.left-panel #infoLocation,
.left-panel .info-pair-value {
  font-size: 10px;
  font-weight: 500;
  color: var(--ui-info-location-color);
}

.left-panel .info-pair-card--achievement #achievementText,
.left-panel .info-pair-card--achievement #infoAchievementSub,
.left-panel .info-pair-card--stats .info-places-countries,
.left-panel .info-pair-card--stats .info-places-nodes {
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  color: var(--ui-accent-dynamic);
}

.left-panel #infoLocation,
.left-panel .info-card-location-compact .info-pair-value {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  margin-top: 0;
  line-height: 1.2;
  min-height: 0;
}

.left-panel #infoLocation.info-value-location {
  gap: 6px;
  flex-wrap: wrap;
}

.left-panel #infoLocation .location-text {
  font-size: inherit;
  font-weight: inherit;
}

.left-panel .info-places-countries,
.left-panel .info-places-nodes {
  display: block;
  margin: 0;
  padding: 0;
}

.left-panel .info-places-nodes {
  opacity: 0.95;
}

/* Без subgrid: две карточки как раньше, спейсер скрыт */
@supports not (grid-template-rows: subgrid) {
  .left-panel .info-row-paired-top {
    grid-template-rows: none;
  }

  .left-panel .info-card.info-pair-card {
    grid-row: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
  }

  .left-panel .info-pair-spacer {
    display: none;
  }

  .left-panel .info-places-contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1.12;
    width: 100%;
  }
}

.left-panel .info-card-achievement {
  cursor: pointer;
  transition: border-color var(--elevate-duration) var(--elevate-ease),
    box-shadow var(--elevate-duration) var(--elevate-ease);
}

.left-panel .info-card-achievement:hover {
  border-color: rgba(255, 217, 90, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 217, 90, 0.12);
}

.left-panel .info-card-achievement:focus-visible {
  outline: 1px solid rgba(255, 217, 90, 0.5);
  outline-offset: 2px;
}

.left-panel .achievement-text {
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
}
.accent-neon {
  color: var(--ui-accent-neon-color);
}
#userStatus.accent-neon {
  font-weight: 600;
  font-size: 12px;
}
/* LOCATION ONLINE */

.info-value-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.location-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: var(--ui-location-dot-glow);
  animation: location-blink 1.4s infinite;
}

.location-text {
  font-size: var(--font-md);
}
#infoLocation {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--font-sm);
}
/* ACHIEVEMENT */

.achievement-text {
  color: var(--ui-achievement-color);
  text-shadow: var(--ui-achievement-glow);
  animation: none;
}
#infoPlaces {
  display: inline-block;
  margin-top: 4px;
  font-size: var(--font-sm);
  line-height: 1.3;
}
/* YEAR FILTER */

.info-filter {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  align-items: center;
}

.info-filter-compact {
  gap: 3px;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: hidden;
}

.year-input {
  background: var(--ui-year-input-bg);
  border: 1px solid var(--ui-year-input-border);
  color: var(--text-main);
  font-size: var(--font-md);
  font-family: inherit;
  color-scheme: var(--ui-year-input-scheme);
  box-sizing: border-box;
}

/* Стрелки number: тёмная тема + синий оттенок, без «белой капсулы» */
.year-input::-webkit-inner-spin-button,
.year-input::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 1;
  height: 22px;
  cursor: pointer;
  filter: brightness(0.75) saturate(2.2) hue-rotate(168deg)
    drop-shadow(0 0 4px rgba(58, 166, 255, 0.65));
}

/* Поле года: стрелки прижаты к правому краю окна, цифры слева не перекрыты */
.year-input-small {
  width: auto;
  height: 22px;
  padding: 0 6px 0 6px; /* по 6px слева и справа от контента */
  font-size: 10px;
  text-align: left;
  min-width: 0;
  box-sizing: border-box;
  direction: rtl; /* в RTL браузер рисует спиннер справа, цифры остаются слева */
  unicode-bidi: plaintext; /* цифры года по-прежнему слева направо (1996) */
}

/* Ровное распределение поля и кнопок в TIME MACHINE */
.info-filter-compact .year-input-small,
.info-filter-compact .btn-square {
  text-align: center;
}

.info-filter-compact .year-input-small {
  flex: 1 1 auto;
  min-width: 52px;
}

.btn-square {
  min-width: 32px;
  width: 32px;
  height: 22px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-btn-square-border);
  background: var(--ui-btn-square-bg);
  font-size: 10px;
  color: var(--text-main);
  text-transform: uppercase;
  letter-spacing: 0;
  cursor: pointer;
  box-sizing: border-box;
  flex: 0 0 32px;
  text-align: center;
  overflow: hidden;
}

.left-panel .btn-square:hover,
.left-panel .btn-square:focus-visible {
  transform: none !important;
  border-color: rgba(140, 210, 170, 0.88);
  background: var(--ui-btn-square-bg);
  color: rgba(210, 255, 228, 0.98);
  box-shadow: inset 0 0 0 1px rgba(140, 210, 170, 0.48);
  filter: brightness(1.06);
}

.btn-square-ok {
  border-color: var(--ui-btn-square-border);
  color: var(--text-main);
  flex-basis: 32px;
}

/* Slightly calmer left panel visuals (logo block intentionally untouched). */
.left-panel .info-card,
.left-panel .places-panel {
  border-color: var(--ui-places-border);
}

.left-panel .btn-main {
  box-shadow: var(--ui-primary-shadow);
}

/* КНОПКИ */

.controls-row {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.btn-main,
.btn-ghost {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-10);
  font-size: var(--font-md);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.btn-main {
  background: var(--ui-primary-bg);
  border: 1px solid var(--ui-primary-border);
  color: var(--ui-primary-text);
  box-shadow: var(--ui-primary-shadow), var(--ui-glow-primary);
}

.btn-main i {
  color: var(--ui-primary-text);
}

.btn-ghost {
  background: transparent;
  border: 1px dashed var(--ui-ghost-border);
  color: var(--ui-ghost-color, var(--text-dim));
  box-shadow: var(--ui-glow-tertiary);
}

/* Auth button */
.btn-auth {
  background: transparent;
  border: 1px solid var(--ui-btn-auth-border);
  color: var(--ui-btn-auth-color);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  cursor: pointer;
  margin-top: 4px;
  transition: all 0.2s ease;
}

.btn-auth:hover {
  background: var(--ui-btn-auth-hover-bg);
}

.profile-auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 0;
}

.btn-auth--premium {
  margin-top: 0;
  padding: 4px 10px;
  font-size: var(--font-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--ui-btn-auth-premium-border);
  background: var(--ui-btn-auth-premium-bg);
  box-shadow: var(--ui-btn-auth-premium-shadow);
  color: var(--ui-btn-auth-premium-color);
  min-height: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}

/* Login / Sign up — matte, not bold, compact type */
#authBtn.btn-auth--premium {
  font-size: 8px;
  font-weight: 400;
  color: rgba(190, 210, 220, 0.72);
  opacity: 0.82;
  text-shadow: none;
  letter-spacing: 0.08em;
}
#authBtn.btn-auth--premium:hover {
  color: rgba(210, 226, 235, 0.9);
  opacity: 0.95;
}

.btn-auth--premium:hover {
  border-color: var(--ui-btn-auth-premium-hover-border);
  background: var(--ui-btn-auth-premium-hover-bg);
  box-shadow: var(--ui-btn-auth-premium-hover-shadow);
}

#btnShowMyPage.btn-auth--premium {
  border-color: var(--ui-btn-auth-premium-border);
  color: var(--ui-btn-auth-premium-color);
}

/* ЛОГ СТРАН */

.places-panel {
  margin-top: var(--space-12);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-sm);
  background: var(--bg-panel-soft);
  border: 1px solid var(--ui-places-border);
  /* flex-bound inside .left-panel — scroll inside .panel-body only */
  min-height: 0;
  max-height: none;
  overflow: hidden;
}

.left-panel .places-panel > .panel-body {
  flex: 1;
  min-height: 0;
}

.panel-header {
  padding: var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid var(--ui-panel-header-border);
}

.panel-header-main {
  font-size: 13px;
  font-weight: 700;
}

.panel-header-sub {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.85;
  white-space: nowrap;
}

.panel-count {
  color: var(--text-dim);
  font-size: var(--font-xs);
}

.node-log-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 64px;
  align-items: center;
  gap: 6px 8px;
  padding: 7px 10px 8px;
  border-bottom: 1px solid var(--node-log-tools-border);
  background: var(--node-log-tools-bg);
}

.node-log-search,
.node-log-type-filter {
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border-radius: 2px;
  border: 1px solid var(--node-log-input-border);
  background: var(--node-log-input-bg);
  color: var(--text-main);
  outline: none;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px rgba(0, 0, 0, 0.26);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: inherit;
}

.node-log-search:focus,
.node-log-type-filter:focus {
  border-color: var(--node-log-input-focus-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 2px rgba(104, 212, 152, 0.18),
    0 8px 16px rgba(0, 0, 0, 0.28);
}

.node-log-type-filter {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 24px;
  background-image: linear-gradient(45deg, transparent 50%, var(--node-log-select-arrow) 50%),
    linear-gradient(135deg, var(--node-log-select-arrow) 50%, transparent 50%),
    linear-gradient(180deg, var(--node-log-input-bg), var(--node-log-input-bg));
  background-position: calc(100% - 12px) 12px, calc(100% - 7px) 12px, 0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
}

.node-log-type-filter option {
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--node-log-option-color);
  background: var(--node-log-option-bg);
}

.node-log-search::placeholder {
  color: var(--node-log-search-placeholder);
}

.node-log-story-btn {
  width: 100%;
  height: 30px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: inherit;
  white-space: nowrap;
  border-radius: 2px;
  border: 1px solid var(--ui-story-btn-border);
  background: var(--ui-story-btn-bg);
  color: var(--ui-story-btn-color);
  box-sizing: border-box;
  box-shadow: var(--ui-story-btn-shadow);
}

.node-log-story-btn:hover {
  border-color: var(--ui-story-btn-hover-border);
  background: var(--ui-story-btn-hover-bg);
  box-shadow: var(--ui-story-btn-hover-shadow);
}

.terminal-suggestion-kind {
  display: inline-flex;
  min-width: 52px;
  justify-content: center;
  margin-right: 8px;
  padding: 1px 6px;
  border: 1px solid rgba(118, 184, 230, 0.3);
  background: rgba(58, 166, 255, 0.1);
  color: rgba(186, 226, 255, 0.92);
  border-radius: 2px;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.node-log-story-status {
  grid-column: 1 / -1;
  display: block;
  margin-left: 0;
  padding-left: 2px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
  color: rgba(140, 187, 218, 0.72);
}

.node-log-story-status.is-running {
  color: rgba(144, 240, 180, 0.95);
}

.left-panel .panel-count {
  font-size: var(--font-md);
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 1.35;
  color: var(--text-dim);
}

.left-panel .panel-count .panel-count-nodes {
  color: var(--ui-panel-count-nodes-color);
  font-weight: 500;
  font-size: inherit;
  text-shadow: none;
}

.left-panel .panel-count .panel-count-countries {
  color: var(--text-dim);
  opacity: 0.95;
}

.panel-body {
  flex: 1;
  min-height: 0;
  padding: var(--space-12) var(--space-10);
  overflow-y: auto;
  overflow-x: hidden;
  font-size: var(--font-md);
  /* плавная прокрутка пальцем/тачем */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.left-panel .places-panel .panel-body {
  padding: var(--space-8) var(--space-8);
  --mnm-cscroll-inset: calc(var(--mnm-rounded-panel-radius, 14px) + 10px);
}

.left-panel .places-panel > .panel-header:not(.node-log-head-row) {
  padding: var(--space-4) var(--space-6);
  gap: 1px;
  align-items: center;
  text-align: center;
  font-size: var(--font-md);
  letter-spacing: 0.08em;
}

.panel-body.empty {
  color: var(--text-dim);
}

.city-places-scroll.mnm-scroll-rail {
  --mnm-cscroll-inset: calc(var(--mnm-rounded-panel-radius, 12px) + 8px);
}

.feature-map-scroll.mnm-scroll-rail {
  --mnm-cscroll-inset: calc(var(--mnm-rounded-panel-radius, 14px) + 10px);
}

.status-bar {
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: none;
  display: flex;
  justify-content: space-between;
  font-size: var(--font-xs);
  position: relative;
}

/* When the brand crown already draws the divider, drop the status-bar's own line */
.status-bar--crowned {
  margin-top: var(--panel-crown-pad);
  padding-top: var(--panel-crown-pad);
}

.status-bar--crowned::before {
  display: none;
}

.status-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(58, 166, 255, 0),
    rgba(58, 166, 255, 0.34),
    rgba(125, 252, 138, 0.22),
    rgba(58, 166, 255, 0.34),
    rgba(58, 166, 255, 0)
  );
  box-shadow: 0 0 10px rgba(58, 166, 255, 0.12);
}

.status-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

/* один синий цвет и неон для всех трёх строк */
.status-clock,
.status-users,
.status-indicator.online {
  color: var(--blue);
  text-shadow: 0 0 6px rgba(58, 166, 255, 0.8), 0 0 18px rgba(58, 166, 255, 0.6);
  font-size: var(--font-xs);
}

/* базовые настройки текста */
.status-users,
.status-indicator {
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
/* КАРТА */

.map-panel {
  position: relative;
  overflow: hidden;
  background: var(--map-panel-bg);
  /* Нижние плавающие виджеты: одна линия от низа (как свёрнутый chat dock) */
  --map-floating-bottom: 40px;
  --map-chat-collapsed-height: 44px;
  /* Мини-чат: верх не выше «ленты» под логотипами — зазор от MY NODE MAP (слева) и от TOMATO BATTLE (справа сверху) */
  --map-mini-chat-gap-under-logo: 22px;
  /* ~высота картинки TOMATO в кнопке (148px ширина) + top 14px; иначе подправь под ассет */
  --tomato-battle-img-stack-h: 92px;
  --map-mini-chat-top: max(
    calc(14px + var(--tomato-battle-img-stack-h) + var(--map-mini-chat-gap-under-logo)),
    calc(
      var(--space-14) + 116px + var(--space-10) + var(--space-10) +
        var(--map-mini-chat-gap-under-logo)
    )
  );
}

.map-panel::before {
  display: none;
}

.map-canvas-host {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 460px;
}

.map-canvas-host > #map.map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-canvas {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-canvas-host.map-loaded .map-placeholder {
  display: none;
}

/* Post-intro “pulse” around globe (class toggled from script) */
.map-canvas-host.map-earth-glow-burst {
  box-shadow:
    inset 0 0 0 1px rgba(125, 252, 138, 0.35),
    inset 0 0 50px rgba(58, 166, 255, 0.22),
    0 0 80px rgba(125, 252, 138, 0.18);
  animation: map-earth-glow-kf 4.2s ease-in-out 1;
}
@keyframes map-earth-glow-kf {
  0% {
    box-shadow:
      inset 0 0 0 1px rgba(125, 252, 138, 0.15),
      inset 0 0 20px rgba(58, 166, 255, 0.08),
      0 0 20px rgba(125, 252, 138, 0.06);
  }
  40% {
    box-shadow:
      inset 0 0 0 2px rgba(125, 252, 138, 0.55),
      inset 0 0 70px rgba(58, 166, 255, 0.35),
      0 0 120px rgba(125, 252, 138, 0.28);
  }
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(125, 252, 138, 0.2),
      inset 0 0 30px rgba(58, 166, 255, 0.12),
      0 0 40px rgba(125, 252, 138, 0.1);
  }
}

.map-canvas .mapboxgl-canvas-container,
.map-canvas canvas.mapboxgl-canvas {
  width: 100%;
  height: 100%;
}

/* mute the base map a bit (fills still visible) */
.map-canvas.mode-base canvas.mapboxgl-canvas,
.map-canvas.mode-sat canvas.mapboxgl-canvas {
  /* Don't use CSS filters on WebGL canvas; it makes everything look "foggy". */
  filter: none;
}

/* During pan/zoom: hint GPU compositing for smoother wheel zoom */
.map-canvas-host.map-camera-interacting canvas.mapboxgl-canvas {
  will-change: transform;
}

/* LOD: lighten DOM markers on whole-globe zoom */
.map-canvas-host.map-lod-globe .custom-marker,
.map-canvas-host.map-lod-globe .map-custom-pin-marker {
  opacity: 0.72;
  transform: scale(0.88);
  transform-origin: center bottom;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.map-canvas-host.map-lod-detail .custom-marker,
.map-canvas-host.map-lod-detail .map-custom-pin-marker,
.map-canvas-host.map-lod-city .custom-marker,
.map-canvas-host.map-lod-city .map-custom-pin-marker {
  opacity: 1;
  transform: none;
}

.map-dim-overlay {
  display: none;
}

.map-canvas-host .map-dim-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.map-canvas-host.map-basemap-dim .map-dim-overlay {
  display: none;
  background: linear-gradient(
    195deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.12) 48%,
    rgba(0, 0, 0, 0.16) 100%
  );
  mix-blend-mode: multiply;
}

/* Outer hit-box: padding keeps :hover while cursor is over the label (tip is position:absolute). */
.map-birthhome-pin-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
  box-sizing: border-box;
  transform: translateZ(0);
}

.map-birthhome-pin {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(18, 28, 24, 0.96), rgba(6, 12, 10, 0.92));
  border: 1px solid rgba(200, 230, 210, 0.28);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
  opacity: 0.98;
  color: rgba(235, 250, 242, 0.95);
}

.map-birthhome-pin--birth {
  color: rgba(255, 228, 190, 0.98);
  border-color: rgba(255, 190, 120, 0.55);
  background: linear-gradient(160deg, rgba(42, 24, 12, 0.96), rgba(18, 10, 6, 0.94));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(255, 150, 70, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 220, 180, 0.18);
}

.map-birthhome-pin--home {
  color: rgba(255, 248, 232, 0.98);
  border-color: rgba(245, 230, 200, 0.62);
  background: linear-gradient(160deg, rgba(38, 32, 22, 0.96), rgba(18, 14, 10, 0.94));
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(255, 236, 200, 0.28),
    0 6px 16px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 250, 235, 0.2);
}

.map-birthhome-pin-wrap:hover .map-birthhome-pin--birth {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(255, 196, 92, 0.45),
    0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 220, 180, 0.22);
}

.map-birthhome-pin-wrap:hover .map-birthhome-pin--home {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.28),
    0 0 20px rgba(255, 245, 220, 0.38),
    0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 250, 235, 0.24);
}

.map-birthhome-pin-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}

.map-birthhome-pin-svg {
  width: 14px;
  height: 14px;
  display: block;
}

/* Tooltip INSIDE marker DOM + BELOW glyph: .map-panel uses overflow:hidden and clips upward overflow. */
.mapboxgl-marker.mapboxgl-marker--birthhome-profile {
  z-index: 6 !important;
  overflow: visible !important;
  pointer-events: none;
}
.mapboxgl-marker.mapboxgl-marker--birthhome-profile:hover,
.mapboxgl-marker.mapboxgl-marker--birthhome-profile:focus-within {
  z-index: 120 !important;
}
.mapboxgl-marker.mapboxgl-marker--birthhome-profile .map-birthhome-pin-wrap {
  pointer-events: auto;
}

.map-birthhome-pin-tip {
  position: absolute;
  top: calc(var(--ui-control-size, 30px) + 8px);
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px 4px;
  border-radius: var(--radius-sm);
  font-family: var(--font-main, var(--font-mono));
  font-size: max(11px, var(--font-xs));
  font-weight: 600;
  letter-spacing: 0.045em;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  z-index: 8;
  border: 1px solid rgba(58, 166, 255, 0.32);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.55),
    0 0 16px rgba(130, 220, 255, 0.16);
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.map-birthhome-pin-tip--birth {
  border-color: rgba(255, 188, 130, 0.62);
  background: linear-gradient(135deg, rgba(34, 20, 10, 0.96), rgba(16, 12, 10, 0.94));
  color: rgba(255, 226, 194, 0.98);
  text-shadow: 0 0 8px rgba(255, 172, 95, 0.34);
}

.map-birthhome-pin-tip--home {
  border-color: rgba(245, 230, 200, 0.62);
  background: linear-gradient(135deg, rgba(34, 28, 18, 0.96), rgba(20, 16, 12, 0.94));
  color: rgba(255, 248, 232, 0.98);
  text-shadow: 0 0 8px rgba(255, 236, 200, 0.32);
}

.map-birthhome-pin-wrap:hover .map-birthhome-pin-tip {
  opacity: 1;
  visibility: visible;
}

.map-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  color: var(--text-dim);
  font-size: var(--font-md);
  pointer-events: none;
}

.map-placeholder-title {
  font-size: var(--font-lg);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-main);
}

/* компактные подсказки населённых пунктов / стран (Mapbox Popup) */
.map-hover-tip .mapboxgl-popup-content {
  padding: 3px 8px 4px;
  margin: 0;
  background: var(--bg-panel-soft);
  color: var(--text-main);
  border: 1px solid rgba(58, 166, 255, 0.32);
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  font-family: var(--font-mono);
  font-size: var(--font-xs);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.04em;
  max-width: 220px;
  pointer-events: none;
}

.map-hover-tip {
  pointer-events: none;
}

.map-hover-tip .map-hover-tip-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 204px;
}

.map-hover-tip--birthhome .mapboxgl-popup-content {
  border-width: 1px;
  border-style: solid;
  opacity: 1;
  transform: none;
  animation: none;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.58),
    0 0 18px rgba(130, 220, 255, 0.18);
}

.map-hover-tip--birthhome .map-hover-tip-inner {
  font-weight: 600;
  letter-spacing: 0.045em;
}

.map-hover-tip--birth .mapboxgl-popup-content {
  border-color: rgba(255, 188, 130, 0.62);
  background: linear-gradient(135deg, rgba(34, 20, 10, 0.93), rgba(16, 12, 10, 0.92));
}

.map-hover-tip--birth .map-hover-tip-inner {
  color: rgba(255, 226, 194, 0.98);
  text-shadow: 0 0 8px rgba(255, 172, 95, 0.34);
}

.map-hover-tip--home .mapboxgl-popup-content {
  border-color: rgba(128, 214, 255, 0.62);
  background: linear-gradient(135deg, rgba(9, 24, 34, 0.94), rgba(8, 13, 20, 0.92));
}

.map-hover-tip--home .map-hover-tip-inner {
  color: rgba(204, 239, 255, 0.98);
  text-shadow: 0 0 8px rgba(108, 201, 255, 0.34);
}

.map-hover-tip .mapboxgl-popup-tip {
  border-top-color: rgba(20, 26, 24, 0.92);
}

.map-hover-tip.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  border-bottom-color: rgba(20, 26, 24, 0.92);
}

.map-hover-tip.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  border-right-color: rgba(20, 26, 24, 0.92);
}

.map-hover-tip.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  border-left-color: rgba(20, 26, 24, 0.92);
}

.map-hover-tip.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  border-top-color: rgba(20, 26, 24, 0.92);
}

/* ПРАВАЯ ПАНЕЛЬ */

.right-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-12);
  padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  transition: transform 0.3s ease, opacity 0.25s ease;
  overflow: hidden;
  box-sizing: border-box;
}

/* чтобы правая была чуть компактнее по типографике */
.right-panel,
.profile-nav,
.profile-body,
.profile-footer {
  font-size: var(--font-sm);
}

.right-panel.collapsed {
  transform: translateX(110%);
  opacity: 0;
}

.right-panel.collapsed ~ .map-panel {
  grid-column: 2 / 4;
}

/* HEADER PROFILE */

.profile-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-10);
  padding: 2px 0 10px;
  border: none;
  background: transparent;
  box-shadow: none;
  border-bottom: none;
  margin-bottom: var(--space-10);
  flex-shrink: 0;
}

.profile-header::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(58, 166, 255, 0),
    rgba(58, 166, 255, 0.34),
    rgba(125, 252, 138, 0.22),
    rgba(58, 166, 255, 0.34),
    rgba(58, 166, 255, 0)
  );
  box-shadow: 0 0 10px rgba(58, 166, 255, 0.12);
  pointer-events: none;
}

.profile-header-main {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  width: 100%;
}

/* КРУГ АВАТАРА */

.avatar-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 2px solid var(--ui-avatar-border);
  box-shadow: var(--ui-avatar-shadow);
  background: var(--ui-avatar-bg);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#rightPanel .avatar-circle {
  border-color: var(--ui-frame-border);
  box-shadow:
    0 0 0 1px rgba(118, 228, 140, 0.28),
    0 0 10px rgba(118, 228, 140, 0.45),
    0 0 20px rgba(118, 228, 140, 0.22);
}

.avatar-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-circle img:not([src]),
.avatar-circle img[src=""],
.avatar-circle img[src="about:blank"] {
  display: none;
}

.profile-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.profile-label {
  font-size: var(--font-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ui-profile-label-color);
  text-shadow: none;
}

.profile-sub {
  font-size: var(--font-sm);
  color: var(--ui-profile-sub-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.travel-rank-row {
  cursor: pointer;
}

.travel-rank-row span:last-child {
  color: var(--ui-travel-rank-color) !important;
}

.travel-rank-row:hover span:last-child {
  color: var(--ui-travel-rank-color) !important;
  text-shadow: none;
}

.travel-rank-row[data-rank-tip] {
  position: relative;
}

.travel-rank-row[data-rank-tip]:hover::after {
  content: attr(data-rank-tip);
  position: absolute;
  left: 10px;
  top: auto;
  bottom: calc(100% + 8px);
  width: 230px;
  padding: 7px 8px;
  border: 1px solid rgba(120, 188, 234, 0.4);
  background: linear-gradient(180deg, rgba(8, 16, 26, 0.94), rgba(5, 12, 20, 0.96));
  color: rgba(210, 232, 248, 0.94);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: none;
  border-radius: 4px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45), 0 0 18px rgba(80, 170, 230, 0.14);
  z-index: 20;
  pointer-events: none;
}

/* PROFILE NAV */

.profile-nav {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  flex-shrink: 0;
}

.profile-nav-section {
  padding: var(--space-6) var(--space-8);
}

/* Keep TRAVEL FEATURES compact when extra items are added */
.profile-nav-section--travel {
  padding-top: 5px;
  padding-bottom: 5px;
}

.profile-nav-section--travel .profile-nav-list {
  gap: 2px;
}

.profile-nav-section--travel .profile-nav-item {
  padding-top: 1px;
  padding-bottom: 1px;
  min-height: 20px;
}

/* Keep SOCIAL NETWORK compact when adding quick access items */
.profile-nav-section--social {
  padding-top: 5px;
  padding-bottom: 5px;
}

.profile-nav-section--social .profile-nav-list {
  gap: 2px;
}

.profile-nav-section--social .profile-nav-item {
  padding-top: 1px;
  padding-bottom: 1px;
  min-height: 20px;
}

/* Subtle highlight for quick DATING entry in social nav */
#navDating {
  border-color: rgba(202, 150, 255, 0.22);
  background: linear-gradient(
    135deg,
    rgba(20, 14, 32, 0.42) 0%,
    rgba(12, 20, 34, 0.42) 100%
  );
}

#navDating i {
  color: rgba(244, 165, 255, 0.92);
  transform-origin: center;
  animation: nav-dating-heartbeat 1.12s ease-in-out infinite;
}

@keyframes nav-dating-heartbeat {
  0%,
  100% {
    transform: scale(1);
    color: rgba(244, 165, 255, 0.92);
    filter: drop-shadow(0 0 4px rgba(255, 140, 200, 0.35));
  }
  12% {
    transform: scale(1.24);
    color: rgba(255, 55, 85, 0.98);
    filter: drop-shadow(0 0 12px rgba(255, 40, 70, 0.75));
  }
  24% {
    transform: scale(1);
    color: rgba(244, 165, 255, 0.92);
    filter: drop-shadow(0 0 5px rgba(255, 140, 200, 0.4));
  }
  36% {
    transform: scale(1.16);
    color: rgba(255, 35, 65, 1);
    filter: drop-shadow(0 0 10px rgba(255, 30, 55, 0.68));
  }
  48%,
  100% {
    transform: scale(1);
    color: rgba(244, 165, 255, 0.92);
    filter: drop-shadow(0 0 4px rgba(255, 140, 200, 0.35));
  }
}

@media (prefers-reduced-motion: reduce) {
  #navDating i {
    animation: none !important;
  }
}

#navDating:hover {
  border-color: rgba(225, 175, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(225, 175, 255, 0.12), 0 8px 24px rgba(120, 90, 180, 0.18);
}

#navDating.active {
  border-color: rgba(245, 190, 255, 0.56);
  box-shadow: 0 0 0 1px rgba(245, 190, 255, 0.2), 0 0 16px rgba(154, 116, 255, 0.22);
}

.profile-nav-title {
  display: block;
  font-size: var(--font-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-olive);
  margin-bottom: var(--space-4);
  font-weight: 700;
  text-shadow: none;
}
.profile-nav-section:first-of-type .profile-nav-title {
  color: var(--accent-olive);
  text-shadow: none;
}
/* SYSTEM block at bottom of right panel (not :last-of-type in nav — that was the wrong section) */
.profile-nav-section--system .profile-nav-list {
  margin-top: var(--space-2);
}

.profile-nav-section--system .profile-nav-item {
  padding: 1px 8px; /* tighter to fit footer row */
  line-height: 1.15;
  margin-top: 1px;
}

.profile-nav-section--system {
  padding-top: 8px;
  padding-bottom: 10px;
  margin-bottom: 4px;
}

.profile-nav-legal-sep {
  width: calc(100% + 8px);
  margin-left: -4px;
  margin-bottom: 8px;
  height: 1px;
  border: none;
  background: linear-gradient(
    90deg,
    rgba(58, 166, 255, 0),
    rgba(58, 166, 255, 0.35),
    rgba(125, 252, 138, 0.28),
    rgba(58, 166, 255, 0.35),
    rgba(58, 166, 255, 0)
  );
  box-shadow: 0 0 12px rgba(58, 166, 255, 0.12);
}

.profile-nav-footer-credit {
  margin-top: 6px;
  padding-top: 0;
  border-top: none;
  cursor: default;
  line-height: 1.35;
  opacity: 0.94;
}

.profile-nav-footer-credit .footer-credit-line {
  display: block;
  font-size: 11px;
  color: rgba(143, 211, 255, 0.92);
  line-height: 1.5;
}

.footer-credit-line--system-strict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.footer-credit-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200, 235, 255, 0.95);
  line-height: 1.2;
}

.footer-credit-body {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(160, 200, 215, 0.78);
  line-height: 1.4;
  max-width: 100%;
}

.footer-credit-brand-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-credit-legal-hint {
  font-size: 9px !important;
  letter-spacing: 0.05em !important;
  text-transform: none !important;
  color: rgba(160, 200, 215, 0.62) !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

.profile-nav-footer-credit .footer-legal-links {
  display: block;
  margin-top: 6px;
  margin-bottom: 4px;
  padding-bottom: 2px;
  font-size: 9px;
  letter-spacing: 0.04em;
}

/* Right panel footer: centered, white copy, blue Legal — compact height */
.profile-nav-footer-credit--classic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  padding: 2px 6px 4px;
  text-align: center;
  width: 100%;
}

.profile-legal-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  max-width: 100%;
}

.profile-legal-lines--centered .profile-legal-line1,
.profile-legal-lines--centered .profile-legal-line-by,
.profile-legal-lines--centered .profile-legal-line2 {
  font-size: var(--font-xs);
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1.26;
  text-transform: none;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.profile-legal-lines--centered .profile-legal-line1 {
  color: rgba(240, 248, 244, 0.94);
}

.profile-legal-lines--centered .profile-legal-brands,
.profile-legal-lines--centered .profile-legal-by {
  color: rgba(240, 248, 244, 0.94);
  font-weight: 400;
}

.profile-legal-lines--centered .profile-legal-by {
  opacity: 0.88;
}

.profile-legal-lines--centered .profile-legal-line2 {
  color: rgba(228, 238, 232, 0.76);
  font-weight: 400;
}

.profile-legal-line1,
.profile-legal-line-by {
  display: block;
}

.profile-legal-line3 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 1px;
  line-height: 1.2;
}

.profile-legal-sep-dot {
  margin: 0 7px;
  color: rgba(125, 252, 138, 0.42);
  font-weight: 600;
  user-select: none;
}

.footer-legal-btn--line {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: var(--font-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-footer-legal-color);
  -webkit-font-smoothing: antialiased;
}

.footer-legal-btn--line strong {
  font-weight: 700;
  color: var(--ui-footer-legal-strong-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-legal-btn--line:hover strong {
  color: var(--ui-footer-legal-hover-color);
}

.profile-legal-stack--minimal {
  flex-shrink: 0;
  margin-top: 4px;
}

.profile-nav-footer-credit--minimal {
  margin-top: 4px;
  padding-bottom: 2px;
}

.profile-footer-min-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0;
  padding: 4px 4px 6px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-footer-min-line-color);
  text-align: center;
}

.profile-footer-min-line .footer-legal-btn {
  flex-shrink: 0;
  margin-left: 2px;
}

.profile-footer-min-text {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ui-footer-min-text-color);
}
.profile-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-2) var(--space-2);
  color: var(--text-dim);
  opacity: 0.96;
  cursor: pointer;
  position: relative;
}

.profile-nav-item i {
  width: 15px;
  text-align: center;
  font-size: var(--font-sm);
}

.nav-badge {
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 2px;
  background: var(--ui-badge-bg);
  color: var(--ui-badge-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nav-badge-new {
  color: var(--yellow);
  text-shadow: 0 0 4px rgba(255, 217, 90, 0.9), 0 0 10px rgba(255, 217, 90, 0.7);
  animation: star-pulse 1.4s infinite;
  font-weight: 600;
}
/* PROFILE BODY */

.profile-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-top: var(--space-8);
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

/* PC right menu: fixed inter-card gaps + internal row stretch */
#rightPanel.right-panel {
  display: flex;
  flex-direction: column;
  gap: var(--rp-section-gap);
  min-height: 0;
  padding: var(--space-14);
  padding-bottom: max(var(--space-14), env(safe-area-inset-bottom, 0px));
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}

#rightPanel > .profile-header {
  margin-bottom: 0;
  padding-bottom: var(--space-4);
  flex-shrink: 0;
}

#rightPanel > .profile-nav {
  margin-top: 0;
  gap: var(--rp-section-gap);
}

#rightPanel > .profile-header,
#rightPanel > .profile-nav-section--system,
#rightPanel > .profile-legal-stack {
  flex-shrink: 0;
}

/* Middle stack absorbs leftover height; cards keep fixed outer gaps */
#rightPanel > .profile-middle {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rp-section-gap);
  overflow: hidden;
}

#rightPanel > .profile-middle > .profile-nav {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 0;
  gap: var(--rp-section-gap);
  overflow: hidden;
}

#rightPanel > .profile-middle > .profile-body {
  flex: 1 1 0;
  min-height: 0;
  margin-top: 0;
  gap: var(--rp-section-gap);
  overflow: hidden;
}

#rightPanel .profile-body {
  flex: 1 1 0;
  min-height: 0;
  gap: var(--rp-section-gap);
  margin-top: 0;
  overflow: hidden;
}

#rightPanel .profile-nav-section--social,
#rightPanel .profile-nav-section--travel,
#rightPanel #quickActions,
#rightPanel .travel-stats-block {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list,
#rightPanel .travel-stats-block .profile-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--rp-row-gap-min, 2px);
}

#rightPanel .profile-block {
  padding: var(--space-6) var(--space-8);
}

/* Right nav rows: icon | label | badge — prevents overlap on narrow/short viewports */
#rightPanel .profile-nav-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  justify-content: unset;
  column-gap: 6px;
  row-gap: var(--rp-row-gap, 2px);
  min-height: 20px;
  line-height: 1.12;
}

#rightPanel .profile-nav-item i {
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  min-width: 18px;
  justify-self: center;
}

#rightPanel .profile-nav-item > span:not(.nav-badge) {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rightPanel .profile-nav-item .nav-badge {
  grid-column: 3;
  grid-row: 1;
  margin-left: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Quick Actions grid stretches row rhythm on tall screens */
#rightPanel #quickActions {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#rightPanel #quickActions .quick-actions-grid {
  flex: 1 1 auto;
  gap: var(--rp-row-gap-min, 4px);
  margin-top: var(--space-2);
  min-height: 0;
  align-content: space-between;
  grid-auto-rows: 1fr;
}

#rightPanel #quickActions .quick-action-btn {
  min-height: 32px;
  height: auto;
  line-height: 1.12;
  justify-content: center;
}

#rightPanel .travel-stats-block {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#rightPanel > .profile-nav-section--system {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}

#rightPanel > .profile-legal-stack {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

#rightPanel .profile-nav-legal-sep {
  margin-bottom: 0;
}

#rightPanel .profile-nav-footer-credit--classic {
  margin-top: 0;
  padding: 0 6px 2px;
}

/* Footer: one line for © + year (saves height after About was added) */
#rightPanel .profile-legal-lines {
  gap: 1px;
}

#rightPanel .profile-legal-line1,
#rightPanel .profile-legal-line-by {
  display: inline;
}

#rightPanel .profile-legal-line-by::before {
  content: " ";
}

#rightPanel .profile-legal-lines--centered .profile-legal-line1,
#rightPanel .profile-legal-lines--centered .profile-legal-line-by,
#rightPanel .profile-legal-lines--centered .profile-legal-line2 {
  line-height: 1.22;
}

#rightPanel .profile-legal-line3 {
  margin-top: 1px;
  line-height: 1.2;
  white-space: nowrap;
}

#rightPanel .footer-legal-btn--line {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

#rightPanel .footer-legal-btn--line strong {
  font-weight: 600;
}

#rightPanel .profile-legal-line3 {
  font-size: 8px;
}

.profile-block {
  padding: var(--space-8) var(--space-8);
}

/* общий стиль заголовков правых блоков */
.profile-caption {
  font-size: var(--font-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-olive);
  font-weight: 700;
}

.profile-list {
  list-style: none;
  margin-top: var(--space-4);
  color: var(--text-dim);
}

.profile-list li + li {
  margin-top: var(--space-2);
}

.profile-note {
  margin-top: var(--space-4);
  color: var(--text-dim);
}

/* TRAVEL STATS – аккуратный акцент */
.travel-stats-block .profile-list li {
  display: flex;
  justify-content: space-between; /* название слева, значение справа */
  align-items: center;
}

.travel-stats-block .profile-list li span:first-child {
  font-size: var(--font-xs);
  opacity: 0.7;
  white-space: nowrap;
}

.travel-stats-block .profile-list li span:last-child {
  font-size: var(--font-sm);
  font-weight: 500;
  color: var(--green);
  text-align: right;
  white-space: nowrap;
}
/* одна линия под каждой строкой TRAVEL STATS */
.travel-stats-block .profile-list li {
  position: relative;
  padding-bottom: 2px; /* чуть места под линию */
  margin-bottom: 2px;
}

.travel-stats-block .profile-list li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(120, 160, 130, 0),
    rgba(120, 160, 130, 0.6),
    rgba(120, 160, 130, 0)
  );
  opacity: 0.7;
}
/* PROFILE FOOTER */

.profile-footer {
  margin-top: auto;
  padding-top: var(--space-8);
  border-top: 1px solid var(--accent-line);
  color: var(--text-dim);
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-8);
}

.save-label {
  display: block;
  font-size: var(--font-xs);
}

.version-label {
  font-size: 8px;
  color: var(--text-dim);
  opacity: 0.7;
}

.footer-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.btn-export,
.btn-backup {
  width: 100%;
  padding: var(--space-4);
  background: transparent;
  border: 1px dashed rgba(120, 160, 130, 0.7);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all var(--elevate-duration) var(--elevate-ease);
}

.btn-export:hover,
.btn-backup:hover {
  border-color: rgba(125, 252, 138, 0.9);
  color: var(--green);
  background: rgba(125, 252, 138, 0.05);
}
/* PANEL HANDLE — ~1mm off left seam, Quick Actions row */

.panel-handle {
  position: absolute;
  left: 0;
  top: 52%;
  transform: translate(calc(-100% - 4px), -50%);
  width: 16px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 12;
  flex-shrink: 0;
  box-sizing: border-box;
  opacity: 0.88;
  transition: opacity 0.2s ease, filter 0.22s ease;
  pointer-events: auto;
}

.panel-handle:hover,
.panel-handle:focus-visible {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(125, 252, 138, 0.55));
}

.panel-handle:focus-visible {
  outline: 1px solid rgba(125, 252, 138, 0.45);
  outline-offset: 2px;
}

.panel-handle-glyph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 16px;
  height: 48px;
  pointer-events: none;
}

.panel-handle-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(58, 166, 255, 0.9);
  box-shadow: 0 0 5px rgba(58, 166, 255, 0.55);
  transition: background 0.2s ease, box-shadow 0.22s ease;
}

.panel-handle-arrow {
  width: 8px;
  height: 10px;
  color: rgba(125, 252, 138, 0.95);
  filter: drop-shadow(0 0 4px rgba(125, 252, 138, 0.45));
  transition: transform 0.22s ease, color 0.2s ease, filter 0.22s ease;
}

.panel-handle:hover .panel-handle-dot,
.panel-handle:focus-visible .panel-handle-dot {
  background: #7ee8ff;
  box-shadow:
    0 0 6px rgba(126, 232, 255, 1),
    0 0 14px rgba(58, 166, 255, 0.95),
    0 0 24px rgba(58, 166, 255, 0.7);
}

.panel-handle:hover .panel-handle-arrow,
.panel-handle:focus-visible .panel-handle-arrow {
  color: #b8ff9a;
  filter:
    drop-shadow(0 0 5px rgba(125, 252, 138, 1))
    drop-shadow(0 0 12px rgba(125, 252, 138, 0.95))
    drop-shadow(0 0 22px rgba(93, 255, 184, 0.75));
}

.right-panel.collapsed ~ .panel-handle .panel-handle-arrow {
  transform: rotate(180deg);
}

/* PLACES LIST */

.place-item {
  padding: var(--space-6);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-surface-border);
  background: var(--ui-surface-fill);
  box-shadow: var(--ui-surface-inset);
  margin-bottom: var(--space-6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.place-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}

.place-title {
  font-size: var(--font-md);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.place-rating-inline {
  display: inline-flex;
  gap: 3px;
}

.place-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  color: var(--text-dim);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.meta-text {
  opacity: 0.9;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.place-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.place-edit,
.place-delete {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-md);
  padding: var(--space-2) var(--space-4);
}

.place-edit:hover {
  color: var(--blue);
}

.place-country {
  position: relative;
  align-items: center;
}

.place-country-meta {
  font-size: var(--font-xs);
  color: var(--text-dim);
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.place-toggle {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--font-xs);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-4);
}

.place-toggle-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.place-toggle-arrow {
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--text-dim);
  border-bottom: 1px solid var(--text-dim);
  transform: rotate(45deg);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.place-country.open .place-toggle-arrow {
  transform: rotate(225deg);
  border-color: var(--blue);
}

.place-cities {
  margin-top: -4px;
  margin-bottom: var(--space-6);
  padding: var(--space-4) var(--space-6) var(--space-2) 14px;
  border-left: 1px solid rgba(80, 120, 95, 0.2);
  display: none;
}

.place-country.open + .place-cities {
  display: block;
}

.place-city {
  padding: 3px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  border-bottom: 1px solid rgba(80, 110, 95, 0.18);
}

/* убираем линию у последнего города в группе */
.place-cities .place-city:last-child {
  border-bottom: none;
}

.place-city-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.place-city-name {
  font-size: var(--font-sm);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.place-city-meta {
  font-size: var(--font-xs);
  color: var(--text-dim);
}

.place-delete:hover {
  color: var(--red-neon);
}

/* GEOJSON STRATA */

.country-layer {
  pointer-events: auto;
}

/* LABELS OF CITIES (красные) */

.city-label-icon {
  pointer-events: none;
}

.city-label-text {
  /* font-family: var(--font-mono);  ← удалить */
  font-size: 11px;
  color: #ff4b5c;
  text-shadow: 0 0 4px rgba(255, 75, 92, 0.9), 0 0 10px rgba(255, 75, 92, 0.6);
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
}

/* РЕЙТИНГ-СЕРДЦА */

.rating-hearts {
  display: inline-flex;
  gap: 8px;
  font-size: 18px;
}

.rating-hearts .heart {
  cursor: pointer;
  color: var(--ui-rating-heart-inactive);
  text-shadow: var(--ui-rating-heart-inactive-shadow);
  transition: color 0.15s ease, text-shadow 0.15s ease, transform 0.15s ease;
}

.rating-hearts .heart.active {
  color: var(--red-neon);
  text-shadow: 0 0 10px rgba(255, 64, 96, 1), 0 0 10px rgba(255, 64, 96, 0.9);
  transform: translateY(-1px);
}

.log-heart {
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, color 0.15s ease, filter 0.15s ease;
}

.left-panel .place-rating-inline .log-heart {
  font-size: 18px;
}

.log-heart:active {
  transform: scale(1.2);
}

.place-rating-inline.rating-flash {
  animation: rating-inline-flash 0.45s ease;
}

@keyframes rating-inline-flash {
  0% {
    filter: brightness(1);
  }
  35% {
    filter: brightness(1.35) drop-shadow(0 0 10px rgba(255, 64, 96, 0.85));
  }
  100% {
    filter: brightness(1);
  }
}

/* Node Log (left panel): компактные карточки, узкий rail, чип и Show nodes одной высоты */
.left-panel .place-item {
  border-radius: 2px;
  align-items: flex-start;
  padding: 6px 8px;
  margin-bottom: var(--space-4);
  gap: var(--space-4);
}

.left-panel .place-item.place-country {
  align-items: stretch;
}

.left-panel .place-main {
  gap: 1px;
}

.left-panel .place-main-country-stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: auto;
  width: 100%;
  gap: 0;
  line-height: 1.22;
  box-sizing: border-box;
}

.left-panel .place-country-line--nodes,
.left-panel .place-country-line--rating {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 0;
}

.left-panel .place-country-line--rating {
  justify-content: flex-start;
}

.left-panel .place-country-line--visited {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: 0;
}

.left-panel .place-country-line {
  font-size: var(--font-md);
  font-weight: 500;
  width: 100%;
}

.left-panel .place-country-name-text {
  color: var(--text-main);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.26;
  max-width: 100%;
}

.left-panel .place-country-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2px 8px;
  width: 100%;
}

.left-panel .place-country-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 0;
  line-height: 1.15;
}

.left-panel .place-country-name-text {
  margin-top: 0;
  padding-top: 0;
  line-height: 1.15;
}

.left-panel .place-country-visits-badge {
  margin-top: 0;
  padding-top: 0;
  line-height: 1.15;
}

.left-panel .place-country-name-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 4px;
  max-width: 100%;
}

.place-country-visits-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  padding: 0 0 0 6px;
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--ui-node-visits-border);
  background: transparent;
  color: var(--ui-node-visits-color);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  vertical-align: middle;
}

.place-country-role-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
  padding: 0 0 0 6px;
  border-radius: 0;
  border: 0;
  border-left: 1px solid var(--ui-node-role-border);
  background: transparent;
  color: var(--ui-node-role-color);
  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.15;
  vertical-align: middle;
  white-space: nowrap;
}

.place-country-role-badge--birth {
  border-left-color: var(--ui-node-role-birth-border);
  color: var(--ui-node-role-birth-color);
}

.place-country-role-badge--home {
  border-left-color: var(--ui-node-role-home-border);
  color: var(--ui-node-role-home-color);
}

.left-panel .place-country-top .place-main-country-stack {
  margin-top: 2px;
}

.left-panel .place-country-line--visited {
  color: var(--text-dim);
  opacity: 0.9;
  font-weight: 500;
  margin-bottom: 0;
  margin-top: 0;
}

.left-panel .place-country-line--stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  margin-bottom: 0;
  margin-top: 1px;
}

.left-panel .place-title {
  gap: 6px;
  align-items: flex-start;
  font-size: var(--font-md);
}

.left-panel .place-meta {
  font-size: var(--font-md);
  margin-top: 1px;
  opacity: 0.82;
}

.left-panel .place-country-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 5px;
  max-width: 100%;
}

.left-panel .place-country-nodes-stat {
  font-size: var(--font-md);
  font-weight: 500;
  color: var(--text-main);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

.left-panel .place-country-meta-sep {
  color: var(--text-dim);
  opacity: 0.65;
  font-size: var(--font-md);
}

.left-panel .place-country-rating-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: var(--font-md);
  color: var(--text-dim);
}

.left-panel .place-country-star {
  color: var(--yellow);
  text-shadow: 0 0 6px rgba(255, 217, 90, 0.3);
  font-size: 1em;
  line-height: 1;
}

.left-panel .place-country-rating-num {
  color: var(--ui-node-rating-num-color);
  font-variant-numeric: tabular-nums;
  text-shadow: none;
}

.left-panel .place-country-rail,
.left-panel .place-city-rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  flex-shrink: 0;
  width: 84px;
}

.left-panel .place-city-rail .place-actions {
  justify-content: flex-end;
  align-items: center;
  height: 28px;
  box-sizing: border-box;
  padding: 0 3px;
  border: 1px solid var(--ui-node-rail-border);
  border-radius: 8px;
  background: var(--ui-node-rail-bg);
  gap: 0;
}

.left-panel .place-city-rail .place-edit,
.left-panel .place-city-rail .place-delete {
  padding: 2px 5px;
  font-size: 11px;
}

.left-panel .place-country-rail .place-toggle {
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  justify-content: space-between;
  border: 1px solid var(--ui-node-rail-border);
  border-radius: 8px;
  background: var(--ui-node-rail-bg);
  padding: 0 5px 0 6px;
  margin: 0;
  gap: 6px;
}

.left-panel .place-country-rail .place-toggle-label {
  letter-spacing: 0.06em;
  font-size: 8px;
  text-align: left;
  line-height: 1.1;
  flex: 1;
  min-width: 0;
  color: var(--ui-node-toggle-label-color);
}

.left-panel .place-country-rail .place-toggle {
  color: var(--ui-node-toggle-text-color);
}

.left-panel .place-country-rail .place-toggle-arrow {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-color: var(--ui-node-toggle-arrow-color);
  opacity: 1;
}

.left-panel .place-country.open .place-country-rail .place-toggle-arrow {
  border-color: var(--ui-node-toggle-open-arrow);
}

.left-panel .place-country-rail .place-toggle:hover {
  border-color: var(--ui-node-rail-hover-border);
  color: var(--ui-node-toggle-text-color);
}

.left-panel .place-country-rail .place-toggle:hover .place-toggle-arrow {
  border-color: rgba(200, 240, 255, 1);
}

.left-panel .place-item.place-country.place-country--active {
  border-color: var(--ui-place-active-border);
  box-shadow: var(--ui-place-active-glow);
  background: var(--ui-place-active-bg);
}

.left-panel .place-item.place-country.place-country--active .place-country-name-text {
  color: var(--ui-node-active-name-color);
  text-shadow: none;
}

.left-panel .place-item.place-country.place-country--active .place-country-line--visited {
  color: var(--ui-node-active-visited-color);
}

.left-panel .place-item.place-country.place-country--active .place-country-rating-num {
  color: var(--ui-node-active-rating-color);
}

.left-panel .place-cities {
  margin-top: -6px;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-4) var(--space-2) 10px;
}

.place-visit-block {
  border-left: 1px solid rgba(78, 118, 100, 0.28);
  margin: 4px 0 8px;
  padding-left: 8px;
}

.place-visit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 2px 0 4px;
}

.place-visit-title {
  font-size: var(--font-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ui-node-visit-title-color);
  font-weight: 700;
}

.place-visit-range {
  font-size: var(--font-xs);
  color: var(--ui-node-visit-range-color);
  white-space: nowrap;
}

.left-panel .place-city {
  position: relative;
  padding: 4px 0 5px;
  gap: var(--space-3);
  border-radius: 4px;
  transition: background 0.18s ease, padding-left 0.16s ease;
  align-items: stretch;
}

/* Node Log hover indicator: crisp square bar (no rounded edges) */
.left-panel .place-city::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 0;
  background: var(--ui-node-city-hover-bar-color);
  transition: width 0.16s ease;
  pointer-events: none;
}

.left-panel .place-city:hover::before {
  width: 4px;
}

.left-panel .place-city.place-city--active::before {
  background: var(--ui-node-city-active-bar-color);
}

.left-panel .place-city.place-city--active .place-city-card-top .place-city-name,
.left-panel .place-city.place-city--active:hover .place-city-card-top .place-city-name {
  color: var(--ui-node-city-active-name-color);
}

.left-panel .place-city.place-city--active:hover {
  background: var(--ui-node-city-active-hover-bg);
}

.left-panel .place-city-main {
  gap: 0;
}

.left-panel .place-city-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
  min-height: 52px;
  flex: 1;
  min-width: 0;
  padding: 2px 0 1px;
}

.left-panel .place-city-card-top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.left-panel .place-city-card-top .place-city-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ui-node-city-name-color);
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.left-panel .place-city-card-top .node-type-badge {
  flex-shrink: 0;
  margin: 0 10px 0 0;
  font-size: 8px;
  line-height: 1.2;
}

.left-panel .place-city-card-mid {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 12px;
  padding: 3px 0 4px;
  flex: 1;
  position: relative;
}

.place-city-visit-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: var(--ui-node-city-visit-center-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.left-panel .place-city-card-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-bottom: 1px;
}

.place-rating-label {
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ui-node-rating-label-color);
  white-space: nowrap;
  flex-shrink: 0;
}

.left-panel .place-city-card-rating .place-rating-inline {
  flex-shrink: 0;
}

.left-panel .place-visit-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.left-panel .place-city-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1;
  padding-right: 6px;
  font-size: var(--font-xs);
  opacity: 1;
}

.left-panel .place-city-card + .place-city-rail {
  align-self: stretch;
}

/* Прямоугольный чип «фото + число» (без капсул) */
.node-gallery-btn,
.place-country-photos-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: 0;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--ui-gallery-btn-border);
  background: var(--ui-gallery-btn-bg);
  color: var(--ui-gallery-btn-color);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.left-panel .node-log-photo-chip {
  width: 100%;
  height: 28px;
  min-height: 28px;
  box-sizing: border-box;
  padding: 0 2px;
  gap: 2px;
  font-size: 7px;
  letter-spacing: 0.03em;
  justify-content: center;
}

.left-panel .node-gallery-btn .fa-images,
.left-panel .place-country-photos-btn .fa-images {
  font-size: 15px;
  line-height: 1;
  filter: var(--ui-gallery-btn-icon-filter);
}

.left-panel .node-log-photo-chip .node-gallery-count {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.node-gallery-btn .fa-images,
.place-country-photos-btn .fa-images {
  font-size: 12px;
  filter: var(--ui-gallery-btn-icon-filter);
}

.node-gallery-btn:hover,
.place-country-photos-btn:hover {
  border-color: var(--ui-gallery-btn-hover-border);
  background: var(--ui-gallery-btn-hover-bg);
  color: var(--ui-gallery-btn-hover-color);
}

.node-gallery-btn--empty,
.place-country-photos-btn--empty {
  opacity: 1;
  pointer-events: auto;
  cursor: default;
  position: relative;
  border-color: var(--ui-gallery-btn-empty-border) !important;
  background: var(--ui-gallery-btn-empty-bg);
}

.node-gallery-btn--empty .fa-images,
.place-country-photos-btn--empty .fa-images,
.node-gallery-btn--empty .node-gallery-count,
.place-country-photos-btn--empty .node-gallery-count {
  opacity: var(--ui-places-chip-empty-opacity);
  filter: none;
  pointer-events: none;
}

.node-gallery-btn--empty:hover,
.place-country-photos-btn--empty:hover {
  border-color: var(--ui-gallery-btn-empty-border) !important;
  background: var(--ui-gallery-btn-empty-bg);
}

.node-gallery-add {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ui-gallery-btn-add-color);
  background: transparent;
  box-shadow: none;
  pointer-events: auto;
}

.node-gallery-btn:not(.node-gallery-btn--empty) .node-gallery-add,
.place-country-photos-btn:not(.place-country-photos-btn--empty) .node-gallery-add {
  display: none;
}

/* NODE LOG: даты + заметка (разметка в .left-panel .place-city-meta выше) */

.place-city-dates {
  font-size: 10px;
  line-height: 1.2;
  color: var(--ui-node-city-dates-color);
  white-space: nowrap;
}

.left-panel .place-city-body .place-node-note {
  margin-top: 0;
}

.left-panel .place-city-body .place-node-note-text {
  font-size: 10px;
  line-height: 1.3;
}

.place-node-note {
  position: relative;
  width: 100%;
  min-width: 0;
}

.place-node-note-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.35;
  color: var(--ui-node-note-text-color);
  word-break: break-word;
}

.place-node-note.is-expanded .place-node-note-text {
  -webkit-line-clamp: unset;
}

.place-node-note-toggle {
  margin-top: 2px;
  padding: 0 0 1px;
  border: none;
  background: none;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(143, 211, 255, 0.85);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.place-node-note-toggle:hover {
  color: rgba(125, 252, 138, 0.95);
}

.node-gallery-count {
  font-variant-numeric: tabular-nums;
  min-width: 1.1em;
  text-align: center;
}

.log-heart.on {
  color: #ff5a7a;
  text-shadow:
    0 0 8px rgba(255, 64, 96, 0.95),
    0 0 14px rgba(255, 64, 96, 0.45);
}

.log-heart.off {
  color: var(--ui-log-heart-off-color);
  opacity: 0.55;
}

.place-rating-inline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

@keyframes place-city-new-pulse {
  0%,
  100% {
    background: transparent;
    box-shadow: none;
  }
  12%,
  22% {
    background: rgba(125, 252, 138, 0.12);
    box-shadow: inset 0 0 0 1px rgba(125, 252, 138, 0.45);
  }
  38%,
  48% {
    background: rgba(125, 252, 138, 0.16);
    box-shadow: inset 0 0 0 1px rgba(125, 252, 138, 0.55);
  }
  64%,
  74% {
    background: rgba(125, 252, 138, 0.1);
    box-shadow: inset 0 0 0 1px rgba(125, 252, 138, 0.4);
  }
}

.left-panel .place-city.place-city--new-pulse {
  animation: place-city-new-pulse 0.92s ease-out 1;
}

/* строка рейтинга + иконки в терминале */

.terminal-rating-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

.rating-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.rating-action-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--ui-terminal-rating-btn-border);
  background: var(--ui-terminal-rating-btn-bg);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease, color 0.15s ease;
}

.rating-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 6px rgba(125, 252, 138, 0.7);
  border-color: rgba(125, 252, 138, 0.9);
  color: var(--green);
}

.rating-action-danger {
  border-color: rgba(255, 64, 96, 0.85);
  color: var(--red-neon);
}

.rating-action-danger:hover {
  box-shadow: 0 0 6px rgba(255, 64, 96, 0.9);
}

/* превью фото (мульти) */

.terminal-photo-toolbar {
  margin-top: var(--space-2);
}

.terminal-photo-count {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.terminal-photo-preview {
  margin-top: var(--space-2);
  border-radius: 12px;
  border: none;
  padding: 6px 0;
  background: transparent;
  max-height: 200px;
  overflow-y: auto;
}

.terminal-photo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.terminal-photo-thumb-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.terminal-photo-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

.terminal-photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 64, 96, 0.85);
  background: rgba(5, 8, 6, 0.92);
  color: var(--red-neon);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
}

.terminal-photo-remove:hover {
  background: rgba(255, 64, 96, 0.25);
}

/* NODE PHOTO ALBUM — above story (12000) and guided tour (~25000) */
.photo-album-overlay {
  position: fixed;
  inset: 0;
  z-index: 26100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.photo-album-overlay.visible {
  display: flex;
}

.photo-album-overlay--stack {
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
}

.photo-album-overlay--stack .photo-album-backdrop {
  background: rgba(2, 4, 3, 0.55);
}

.photo-album-frame--stack {
  width: min(var(--side-panel-width, 384px), 92vw);
  max-width: min(var(--side-panel-width, 384px), 92vw);
  height: 100vh;
  max-height: 100vh;
  border-radius: 0;
  margin: 0;
}

.photo-album-frame--stack .photo-album-main {
  display: block;
  grid-template-columns: 1fr;
  overflow-y: auto;
  padding: 12px;
  flex: 1;
  min-height: 0;
}

.photo-album-frame--stack .photo-album-nav,
.photo-album-frame--stack .photo-album-thumbs,
.photo-album-frame--stack .photo-album-social {
  display: none;
}

.photo-album-frame--stack .photo-album-stage {
  display: block;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.photo-album-frame--stack .photo-album-stage-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: none !important;
}

.photo-album-stack-img {
  width: 100%;
  display: block;
  border-radius: 10px;
  object-fit: contain;
  height: auto;
  max-width: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.photo-album-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(
      circle at 30% 0,
      rgba(58, 166, 255, 0.12),
      transparent 45%
    ),
    radial-gradient(circle at 80% 20%, rgba(125, 252, 138, 0.08), transparent 40%),
    rgba(2, 4, 3, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.photo-album-frame {
  position: relative;
  z-index: 1;
  width: min(780px, 92vw);
  max-height: min(84vh, 760px);
  border-radius: var(--radius-window);
  border: var(--window-border-width) solid var(--window-border-color);
  box-shadow: var(--window-shadow-depth);
  background: #060c0a;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.photo-album-frame:fullscreen {
  width: 100%;
  max-height: none;
  height: 100%;
  border-radius: 0;
}

.photo-album-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  padding: 10px calc(var(--ui-chrome-inset) + var(--ui-chrome-size) * 2 + var(--ui-chrome-gap) + 10px) 8px 12px;
  border-bottom: 1px solid rgba(143, 211, 255, 0.15);
  background: linear-gradient(to bottom, rgba(8, 18, 14, 0.95), rgba(4, 8, 6, 0.88));
  flex-shrink: 0;
}

.photo-album-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-olive);
}

.photo-album-actions {
  position: absolute;
  top: var(--ui-chrome-inset);
  right: var(--ui-chrome-inset);
  z-index: 5;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-chrome-gap);
  height: var(--ui-chrome-size);
  flex-shrink: 0;
}

.photo-album-fs,
.photo-album-close.ui-close {
  width: var(--ui-chrome-size) !important;
  height: var(--ui-chrome-size) !important;
  min-width: var(--ui-chrome-size) !important;
  min-height: var(--ui-chrome-size) !important;
  max-width: var(--ui-chrome-size) !important;
  max-height: var(--ui-chrome-size) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  flex-shrink: 0;
}

.photo-album-fs {
  color: rgba(200, 240, 215, 0.55);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  transition: color 0.18s ease, text-shadow 0.18s ease, filter 0.18s ease;
}

.photo-album-fs i {
  pointer-events: none;
}

.photo-album-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  z-index: 3;
  cursor: pointer;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--ui-chrome-size);
}

.photo-album-fs:hover,
.photo-album-fs:focus-visible {
  color: rgba(235, 255, 240, 1);
  text-shadow:
    0 0 10px rgba(125, 252, 138, 0.9),
    0 0 18px rgba(58, 166, 255, 0.35);
  filter: drop-shadow(0 0 4px rgba(125, 252, 138, 0.35));
  transform: none !important;
}

.photo-album-close.ui-close::before,
.photo-album-close.ui-close::after {
  width: 12px;
  height: 2px;
  background: rgba(216, 255, 226, 0.95);
  box-shadow: 0 0 8px rgba(125, 252, 138, 0.35);
}

.photo-album-close.ui-close:hover::before,
.photo-album-close.ui-close:hover::after {
  background: rgba(228, 255, 236, 1);
  box-shadow: 0 0 20px rgba(125, 252, 138, 0.95);
}

.photo-album-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 10px 10px 6px;
  flex: 1;
  min-height: 0;
}

.photo-album-nav {
  box-sizing: border-box;
  width: var(--ui-control-size);
  height: var(--ui-control-size);
  min-width: var(--ui-control-size);
  min-height: var(--ui-control-size);
  max-width: var(--ui-control-size);
  max-height: var(--ui-control-size);
  padding: 0;
  margin: 0;
  align-self: center;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--ui-control-radius);
  border: 1px solid var(--ui-control-border);
  background: var(--ui-control-bg);
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ui-control-shadow);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
  transform: none !important;
  will-change: auto;
}

.photo-album-nav::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid #f2f7fc;
  border-bottom: 2px solid #f2f7fc;
  box-sizing: border-box;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
  transform: rotate(-45deg);
}

.photo-album-prev::before {
  transform: rotate(135deg);
}

.photo-album-next::before {
  transform: rotate(-45deg);
}

.photo-album-nav:hover {
  border-color: var(--ui-control-hover-border);
  background: var(--ui-control-hover-bg);
  box-shadow: var(--ui-control-hover-shadow);
  transform: none !important;
}

.photo-album-nav:active {
  transform: none !important;
}

.photo-album-nav:focus-visible {
  outline: none;
  border-color: rgba(154, 208, 255, 0.85);
  box-shadow:
    0 0 0 2px rgba(100, 170, 255, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 10px 28px rgba(0, 0, 0, 0.45);
}

.photo-album-stage {
  box-sizing: border-box;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(80, 120, 90, 0.5);
  background: radial-gradient(circle at 50% 30%, #0f1814, #020303);
  min-width: 0;
  min-height: 140px;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.photo-album-frame:fullscreen .photo-album-stage {
  max-height: none;
  min-height: 0;
  height: 100%;
}

.photo-album-caption {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  padding: 0 16px 8px;
  letter-spacing: 0.06em;
  flex-shrink: 0;
}

.photo-album-social {
  padding: 6px 16px 10px;
  border-top: 1px solid rgba(80, 120, 90, 0.25);
  flex-shrink: 0;
}

.pa-react-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.pa-react-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(143, 211, 255, 0.16);
  background: rgba(0, 0, 0, 0.12);
  color: rgba(245, 255, 250, 0.78);
  cursor: pointer;
  font-size: 12px;
}

.pa-react-btn.is-on {
  border-color: rgba(255, 217, 90, 0.55);
  color: rgba(255, 217, 90, 0.95);
  box-shadow: 0 0 12px rgba(255, 217, 90, 0.12);
}

.pa-emoji {
  font-size: 14px;
  line-height: 1;
}

.pa-react-count {
  font-size: 12px;
  color: rgba(213, 221, 213, 0.78);
}

.pa-comments {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 860px;
  margin: 0 auto;
}

.pa-comment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 120px;
  overflow: auto;
  padding-right: 8px;
}

.pa-comment {
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(143, 211, 255, 0.12);
  background: rgba(0, 0, 0, 0.1);
}

.pa-comment-author {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(143, 211, 255, 0.95);
  margin-bottom: 2px;
}

.pa-comment-text {
  font-size: 12px;
  color: rgba(245, 255, 250, 0.82);
  line-height: 1.35;
  word-break: break-word;
}

.pa-comment-compose {
  display: flex;
  gap: 8px;
}

.pa-comment-compose input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(143, 211, 255, 0.16);
  background: rgba(0, 0, 0, 0.1);
  color: rgba(245, 255, 250, 0.9);
  outline: none;
}

.pa-comment-compose button {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(125, 252, 138, 0.42);
  background: rgba(125, 252, 138, 0.12);
  color: rgba(125, 252, 138, 0.95);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}

.photo-album-thumbs {
  display: flex;
  gap: 10px;
  padding: 8px 12px 10px;
  overflow-x: auto;
  border-top: 1px solid rgba(80, 120, 90, 0.35);
  background: linear-gradient(to top, rgba(6, 12, 9, 0.95), rgba(4, 8, 6, 0.6));
  flex-shrink: 0;
}

.photo-album-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  cursor: pointer;
  background: #050806;
  opacity: 0.65;
  transition: opacity 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.photo-album-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.photo-album-thumb.is-active {
  opacity: 1;
  border-color: rgba(125, 252, 138, 0.85);
  box-shadow: 0 0 12px rgba(125, 252, 138, 0.35);
}

.photo-album-stage-inner {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
}

.photo-album-stage-inner img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.photo-album-frame:fullscreen .photo-album-main {
  min-height: 0;
}

.photo-album-frame:fullscreen .photo-album-stage-inner {
  cursor: grab;
  touch-action: none;
}

.photo-album-frame:fullscreen .photo-album-stage-inner.is-dragging {
  cursor: grabbing;
}

.photo-album-caption .album-fs-hint {
  opacity: 0.65;
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* ACHIEVEMENT HELP */
.achievement-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.achievement-help-overlay.visible {
  display: flex;
}

.achievement-help-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 4, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.achievement-help-window {
  position: relative;
  z-index: 1;
  width: 460px;
  max-width: 95vw;
  max-height: min(82vh, 640px);
  border-radius: var(--radius-window);
  border: var(--window-border-width) solid var(--window-border-color);
  background: var(--ui-achievement-help-bg);
  box-shadow: var(--window-shadow-depth);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--font-md);
  color: var(--text-main);
}

.achievement-help-close {
  position: absolute;
  z-index: 2;
  cursor: pointer;
}

.achievement-help-scroll {
  padding: 28px 22px 20px;
  overflow-y: auto;
  line-height: 1.45;
}

.achievement-help-title {
  font-size: var(--font-md);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
  margin-bottom: var(--space-8);
}

.achievement-help-lead {
  color: var(--text-dim);
  margin-bottom: var(--space-8);
}

.achievement-help-lead strong {
  color: var(--text-main);
}

.achievement-help-list {
  list-style: none;
  margin: 0 0 var(--space-8);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.achievement-help-list li {
  padding-left: 0;
  border-left: none;
  color: var(--text-dim);
}

.achievement-help-list .ah-rank {
  display: block;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 217, 90, 0.25);
  margin-bottom: 2px;
  letter-spacing: 0.06em;
}

.achievement-help-foot {
  font-size: var(--font-xs);
  color: var(--accent-olive);
  letter-spacing: 0.06em;
  margin: 0;
}

.achievement-help-foot strong {
  color: var(--text-main);
}

/* FRIENDS ONLINE — стеклянная панель в границах левой колонки */
.left-panel .friends-online-overlay {
  position: absolute;
  inset: 0;
  z-index: 1055;
  display: none;
  pointer-events: none;
}

.left-panel .friends-online-overlay.visible {
  display: block;
  pointer-events: auto;
}

.left-panel .friends-online-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ui-panel-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.left-panel .friends-online-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  padding: calc(var(--ui-chrome-inset) + var(--ui-chrome-size) + 10px) 14px 20px;
  border-right: none;
  background: var(--ui-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--ui-glass-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--font-md);
  color: var(--text-main);
}

.friends-online-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-right: 34px;
  letter-spacing: 0.14em;
  font-size: var(--font-md);
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
}

.friends-online-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.friends-online-restore {
  height: 30px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(125, 252, 138, 0.45);
  background: rgba(125, 252, 138, 0.08);
  color: rgba(125, 252, 138, 0.9);
  letter-spacing: 0.06em;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
}

.friends-online-restore:hover {
  background: rgba(125, 252, 138, 0.14);
}

.friends-online-close {
  cursor: pointer;
}

.friends-online-lead {
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 12px;
}

.friends-online-lead strong {
  color: var(--text-main);
}

.friends-online-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.friends-online-empty {
  color: var(--text-dim);
  font-size: var(--font-sm);
  padding: 12px 0;
}

/* NOTIFICATIONS — ecosystem inbox overlay */
.left-panel .notifications-overlay {
  position: absolute;
  inset: 0;
  z-index: 1056;
  display: none;
  pointer-events: none;
}

.left-panel .notifications-overlay.visible {
  display: block;
  pointer-events: auto;
}

.left-panel .notifications-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ui-panel-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.left-panel .notifications-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  padding: calc(var(--ui-chrome-inset) + var(--ui-chrome-size) + 8px) 8px 14px 12px;
  background: var(--ui-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--ui-glass-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--font-md);
  color: var(--text-main);
}

.notifications-header {
  position: static;
  display: block;
  flex-shrink: 0;
  margin-bottom: 10px;
  min-height: 24px;
  letter-spacing: 0.14em;
  font-size: var(--font-md);
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
}

.notifications-header > #notificationsTitle {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 78px;
  line-height: 1.2;
}

.notifications-header-actions {
  position: absolute;
  top: var(--ui-chrome-inset);
  right: var(--ui-chrome-inset);
  display: inline-flex;
  align-items: center;
  gap: var(--ui-chrome-gap);
  height: var(--ui-chrome-size);
  z-index: 2;
}

.notifications-mark-all {
  height: 22px;
  padding: 0 5px;
  margin-right: 1px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(125, 252, 138, 0.45);
  background: rgba(125, 252, 138, 0.08);
  color: rgba(125, 252, 138, 0.9);
  letter-spacing: 0.04em;
  font-size: 8px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.notifications-mark-all:hover {
  background: rgba(125, 252, 138, 0.16);
}

.notifications-close {
  cursor: pointer;
}

.notifications-lead {
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 10px;
  padding-right: 6px;
}

.notifications-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
  padding-right: 6px;
}

.notifications-tab {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(80, 120, 90, 0.35);
  background: rgba(5, 8, 6, 0.55);
  color: rgba(220, 240, 230, 0.86);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.notifications-tab.is-active {
  border-color: rgba(143, 211, 255, 0.35);
  box-shadow: 0 0 0 1px rgba(58, 166, 255, 0.12);
}

.notifications-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 0;
  margin-right: 0;
  scrollbar-gutter: auto;
  scrollbar-width: thin;
}

.notifications-list::-webkit-scrollbar {
  width: 5px;
}

.notifications-list::-webkit-scrollbar-track {
  background: transparent;
  margin-block: var(--mnm-scroll-rail-inset, 14px);
  border-radius: 99px;
}

.notifications-list::-webkit-scrollbar-thumb {
  border-radius: 3px;
  border: none;
}

.notif-row {
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-surface-row-border);
  background: var(--ui-surface-row-bg);
  padding: 10px 8px 10px 10px;
  margin-right: 2px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
}

.notif-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-icon-chip-border);
  background: var(--ui-icon-chip-bg);
  color: var(--ui-icon-chip-color);
}

.notif-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-meta {
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-dim);
}

.notif-actions {
  margin-top: 8px;
  display: flex;
  gap: 6px;
}

.notif-actions button {
  padding: 5px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-secondary-btn-border);
  background: var(--ui-secondary-btn-bg);
  color: var(--text-main);
  cursor: pointer;
}

.notif-actions button:hover {
  border-color: var(--ui-secondary-btn-hover-border);
  box-shadow: var(--ui-secondary-btn-hover-glow);
}

/* TRAVEL ROUTES overlay (left column) */
.left-panel .travel-routes-overlay {
  position: absolute;
  inset: 0;
  z-index: 1057;
  display: none;
  pointer-events: none;
}

.left-panel .travel-routes-overlay.visible {
  display: block;
  pointer-events: auto;
}

.left-panel .travel-routes-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ui-panel-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.left-panel .travel-routes-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  padding: calc(var(--ui-chrome-inset) + var(--ui-chrome-size) + 10px) 14px 20px;
  background: var(--ui-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--ui-glass-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--font-md);
  color: var(--text-main);
}

.travel-routes-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  letter-spacing: 0.14em;
  font-size: var(--font-md);
  text-transform: uppercase;
  color: rgba(125, 252, 138, 0.95);
  font-weight: 600;
}

.travel-routes-close {
  cursor: pointer;
}

.travel-routes-lead {
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.4;
  margin-bottom: 12px;
}

.travel-routes-lead strong {
  color: var(--text-main);
}

.travel-routes-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.travel-route-row {
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-surface-row-border);
  background: var(--ui-surface-row-bg);
}

.travel-route-row-title {
  font-size: var(--font-sm);
  letter-spacing: 0.06em;
  color: rgba(143, 211, 255, 0.95);
  margin-bottom: 4px;
}

.travel-route-row-meta {
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.35;
}

.travel-routes-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.travel-routes-actions .btn-ghost {
  flex: 1;
  min-width: 0;
  justify-content: center;
}

/* DATA & BACKUP overlay */
.left-panel .app-data-overlay {
  position: absolute;
  inset: 0;
  z-index: 1058;
  display: none;
  pointer-events: none;
}

/* Must cover the whole app: map column is painted after the left column, so a plain
   absolute overlay inside .left-panel stays underneath the map. */
/* Full-screen overlays live in .left-panel (z-index 2); right menu is z-index 3 —
   hide it while any app-data overlay is open so it does not peek through. */
.app-shell:has(.left-panel .app-data-overlay.visible) > .right-panel-wrapper,
.app-shell.is-country-quiz-open > .right-panel-wrapper {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.left-panel .app-data-overlay.visible {
  display: block;
  pointer-events: auto;
  position: fixed;
  inset: 0;
  z-index: 10050;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  box-sizing: border-box;
}

.left-panel .app-data-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 4, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.left-panel .app-data-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  padding: calc(var(--ui-chrome-inset) + var(--ui-chrome-size) + 10px) 14px 20px;
  background: var(--ui-glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--ui-glass-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--font-md);
  color: var(--text-main);
}

.app-data-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  letter-spacing: 0.12em;
  font-size: var(--font-md);
  text-transform: uppercase;
  color: var(--green);
  font-weight: 600;
}

.app-data-close {
  cursor: pointer;
}

.app-data-lead {
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.45;
  margin-bottom: 14px;
}

.app-data-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}

.app-data-actions .btn-main,
.app-data-actions .btn-ghost {
  width: 100%;
  justify-content: center;
}

/* DATA & BACKUP: outer shell + inset rounded split (gap between frame and cards) */
.left-panel .app-data-panel.app-data-panel--split-shell {
  justify-content: center;
  align-items: center;
  padding: 18px;
  background: var(--ui-data-split-shell-bg);
  overflow: auto;
}

.left-panel .app-data-panel--split-shell .app-data-split-outer {
  position: relative;
  width: min(960px, calc(100vw - 36px));
  max-height: min(760px, calc(100vh - 24px));
  padding: 14px;
  padding-top: calc(var(--ui-chrome-inset) + var(--ui-chrome-size) + 6px);
  border-radius: 14px;
  border: 1px solid var(--ui-data-split-outer-border);
  background: var(--ui-data-split-outer-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--ui-data-split-outer-shadow);
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: stretch;
  box-sizing: border-box;
}

.left-panel .app-data-split-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px 14px;
  border-radius: 14px;
  border: 1px solid var(--ui-data-split-main-border);
  background: var(--ui-data-split-main-bg);
  box-shadow: var(--ui-data-split-main-inset);
}

.left-panel .app-data-home-view,
.left-panel .app-data-detail-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-right: 0;
  scrollbar-gutter: stable;
}

.left-panel .app-data-home-view.mnm-scroll-rail,
.left-panel .app-data-detail-body.mnm-scroll-rail {
  flex: 1 1 auto;
  min-height: 0;
}

.left-panel .app-data-home-view[hidden],
.left-panel .app-data-detail-view[hidden] {
  display: none !important;
}

.left-panel .app-data-detail-view {
  flex: 1;
  min-height: 0;
}

.left-panel .app-data-detail-toolbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 12px;
  padding-top: 0;
  padding-bottom: 10px;
  border-top: none;
  border-bottom: 1px solid var(--ui-data-detail-toolbar-border);
  flex-shrink: 0;
}

.left-panel .app-data-detail-back {
  flex-shrink: 0;
  width: auto !important;
  align-self: flex-start;
  padding: 5px 10px !important;
  font-size: 10px !important;
}

.left-panel .app-data-detail-title {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-data-detail-title-border);
  background: var(--ui-data-detail-title-bg);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 0 16px rgba(58, 130, 255, 0.16);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-data-detail-title-color);
}

.left-panel .app-data-detail-scroll-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.left-panel .app-data-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  font-size: var(--font-sm);
}

.left-panel .app-data-detail-body .privacy-sec h3 {
  font-size: 10px;
}

.app-data-hint-detail {
  padding: 4px 2px 8px;
}

.app-data-hint-text {
  font-size: var(--font-sm);
  line-height: 1.5;
  color: var(--ui-data-hint-text-color);
  letter-spacing: 0.04em;
  margin: 0;
}

.left-panel .app-data-settings-rail {
  flex: 0 0 min(300px, 36vw);
  min-width: 210px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: var(--mnm-rounded-panel-radius, 14px);
  border: 1px solid var(--ui-data-split-rail-border);
  background: var(--ui-data-split-rail-bg);
  box-shadow: var(--ui-data-split-rail-inset);
  overflow: hidden;
  max-height: 100%;
}

.left-panel .app-data-settings-rail.mnm-scroll-rail {
  overflow-y: auto;
  overflow-x: hidden;
}

.left-panel .app-data-settings-rail.mnm-scroll-rail::-webkit-scrollbar-track,
.left-panel .app-data-detail-body.mnm-scroll-rail::-webkit-scrollbar-track {
  margin-block: var(--mnm-scroll-rail-inset-rounded);
}

body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-home-view::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.app-data-shell-close.ui-close {
  position: absolute !important;
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 12;
  margin: 0 !important;
}

.app-data-header--centered {
  justify-content: center;
  padding-right: 0 !important;
  text-align: center;
}

.app-data-header--centered #appDataTitle {
  width: 100%;
  text-align: center;
}

.app-data-rail-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-data-rail-title-color);
  text-align: center;
  width: 100%;
}

.app-data-rail-lead {
  font-size: 9px;
  color: var(--ui-data-rail-lead-color);
  line-height: 1.45;
  margin: 0 0 6px;
}

.left-panel .app-data-welcome {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 4px 12px;
  min-height: 0;
}

.left-panel .app-data-welcome .app-data-lead {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(190, 220, 235, 0.88);
}

.left-panel .app-data-welcome .app-data-roadmap {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(88, 182, 255, 0.22);
  background: rgba(8, 16, 24, 0.55);
  font-size: 10px;
  line-height: 1.45;
  color: rgba(170, 205, 230, 0.9);
}

.app-set-group {
  display: flex;
  flex-direction: column;
  gap: var(--app-set-row-gap, 5px);
}

.app-set-group-label {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-app-set-group-label-color);
  margin: 8px 4px 2px;
}

.app-set-group:first-of-type .app-set-group-label {
  margin-top: 0;
}

.app-set-group--reset {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(80, 120, 100, 0.35);
}

.app-set-reset-defaults-btn {
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(125, 252, 138, 0.45);
  background: linear-gradient(180deg, rgba(20, 48, 32, 0.85), rgba(8, 20, 14, 0.95));
  color: rgba(180, 255, 200, 0.95);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
}

.app-set-reset-defaults-btn:hover {
  border-color: rgba(125, 252, 138, 0.75);
  color: #9dffb0;
  box-shadow: 0 0 14px rgba(125, 252, 138, 0.18);
}

.app-set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ui-app-set-row-border);
  background: var(--ui-app-set-row-bg);
  color: var(--ui-app-set-row-color);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.app-set-row:disabled {
  opacity: 0.52;
  cursor: default;
}

.app-set-row:not(:disabled):hover {
  border-color: var(--ui-app-set-row-hover-border);
  background: var(--ui-app-set-row-hover-bg);
}

.app-set-row--action {
  border-color: var(--ui-app-set-row-action-border);
  color: var(--ui-app-set-row-action-color);
}

.app-set-row.is-active {
  border-color: rgba(125, 252, 138, 0.75) !important;
  background: rgba(125, 252, 138, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(125, 252, 138, 0.42);
}

.app-data-map-mirror .map-settings-item {
  margin-bottom: 6px;
}

.app-set-row--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.app-set-row--toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #7dfc8a;
  flex-shrink: 0;
}

.app-theme-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-theme-seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.app-theme-seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 10px;
  border: 1px solid var(--ui-app-theme-seg-btn-border);
  background: var(--ui-app-theme-seg-btn-bg);
  color: var(--ui-app-theme-seg-btn-color);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.app-theme-seg-btn:hover {
  border-color: var(--ui-app-theme-seg-btn-hover-border);
  background: var(--ui-app-theme-seg-btn-hover-bg);
}

.app-theme-seg-btn.is-active {
  border-color: var(--ui-app-theme-seg-btn-active-border);
  background: var(--ui-app-theme-seg-btn-active-bg);
  color: var(--ui-app-theme-seg-btn-active-color);
  box-shadow: 0 0 0 1px rgba(143, 211, 255, 0.25), 0 0 14px rgba(58, 166, 255, 0.16);
}

.app-theme-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 6px;
}

.app-theme-action-btn--save {
  width: 100%;
}

.app-theme-action-btn {
  min-width: 0;
  padding: 7px 6px;
  border-radius: 8px;
  border: 1px solid rgba(143, 211, 255, 0.32);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(228, 240, 250, 0.92);
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.app-theme-action-btn:hover {
  border-color: rgba(143, 211, 255, 0.56);
  background: rgba(143, 211, 255, 0.1);
}

.app-theme-action-btn--save {
  border-color: rgba(143, 211, 255, 0.56);
  background: linear-gradient(135deg, rgba(58, 166, 255, 0.2), rgba(143, 211, 255, 0.14));
  color: #eef6ff;
}

.app-set-chev {
  opacity: 0.5;
  font-size: 12px;
}

.left-panel .app-data-panel--split-shell .app-data-header {
  margin-bottom: 8px;
}

.left-panel .app-data-panel--split-shell .app-data-lead {
  margin-bottom: 12px;
}

.left-panel .app-data-split-main .app-data-actions {
  margin-top: 8px;
  padding-bottom: 4px;
  flex-shrink: 0;
}

.app-data-roadmap {
  font-size: var(--font-xs);
  color: rgba(160, 200, 185, 0.82);
  line-height: 1.45;
  margin: 0 0 12px;
}

.left-panel .app-data-views-main {
  width: 100%;
  max-width: min(960px, calc(100vw - 36px));
  max-height: min(760px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

@media (max-width: 780px) {
  .left-panel .app-data-panel--split-shell .app-data-split-outer {
    flex-direction: column;
    max-height: none;
  }
  .left-panel .app-data-settings-rail {
    flex: 1 1 auto;
    min-width: 0;
    max-height: min(48vh, 420px);
  }
}

/* FEATURE MAP overlay (same shell as DATA & BACKUP) */
.left-panel .feature-map-panel {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.feature-map-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  margin-right: -4px;
}

.feature-map-section-title {
  font-size: var(--font-xs);
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 14px 0 6px;
  font-weight: 600;
}

.feature-map-section-title:first-of-type {
  margin-top: 0;
}

.feature-map-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ui-feature-map-row-border);
  font-size: var(--font-xs);
  line-height: 1.35;
}

.feature-map-row strong {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.feature-map-tag {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid rgba(80, 120, 90, 0.4);
  color: var(--text-dim);
}

.feature-map-tag.fm-live {
  color: var(--ui-feature-map-tag-live-color);
  border-color: rgba(125, 252, 138, 0.45);
}

.feature-map-tag.fm-demo {
  color: var(--ui-feature-map-tag-demo-color);
  border-color: rgba(143, 211, 255, 0.35);
}

.feature-map-tag.fm-plan {
  color: var(--ui-feature-map-tag-plan-color);
  border-color: rgba(230, 200, 106, 0.4);
}

.fm-btn {
  flex-shrink: 0;
  padding: 4px 10px !important;
  font-size: 10px !important;
  min-height: 0;
  letter-spacing: 0.06em;
}

.feature-map-section--travel .feature-map-row {
  line-height: 1.5;
  padding: 9px 0;
}

.feature-map-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--ui-feature-map-footer-border);
}

.feature-map-footer-line {
  height: 0;
  margin: 0 0 8px;
}

.feature-map-footer-copy {
  font-size: 11px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--ui-feature-map-footer-copy-color);
  text-align: center;
  margin: 0;
  padding: 6px 6px 8px;
}

.feature-map-footer-legal {
  display: block;
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.06em;
  line-height: 1.45;
  color: var(--ui-feature-map-footer-legal-color);
  text-transform: none;
  max-width: 22em;
  margin-left: auto;
  margin-right: auto;
}

.feature-map-backlog-note {
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.45;
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--ui-feature-map-backlog-border);
  background: var(--ui-feature-map-backlog-bg);
}

.feature-map-footer--minimal {
  padding-top: 8px;
  border-top-color: rgba(120, 160, 130, 0.28);
}

.feature-map-footer-copy--minimal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 4px 6px 6px;
  font-size: 10px;
}

.feature-map-footer-short {
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(200, 235, 255, 0.9);
}

.feature-map-footer-copy--minimal .feature-map-legal-btn {
  flex-shrink: 0;
}

.legal-emblem-c--feature-min {
  width: auto;
  height: auto;
  min-width: 0;
  border: none;
  background: transparent;
}

.legal-emblem-c--feature-min .legal-emblem-inner {
  font-size: 1.15em;
  font-weight: 400;
}

.friend-row {
  display: flex;
  gap: 10px;
  padding: 10px 10px;
  text-align: left;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-glass-border);
  background: var(--ui-friend-row-bg);
  box-shadow: var(--ui-friend-row-inset);
}

.friend-row-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    rgba(58, 166, 255, 0.35),
    rgba(125, 252, 138, 0.2)
  );
  border: 1px solid rgba(58, 166, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-main);
  overflow: hidden;
  box-sizing: border-box;
}

.my-page-friend-card .my-page-card-avatar.avatar-circle {
  width: 88px;
  height: 88px;
  min-width: 88px;
  min-height: 88px;
  border-radius: 50%;
  flex-shrink: 0;
}

.my-page-friend-card .my-page-card-avatar.friend-av--img img,
.friend-row-avatar.friend-av--img img {
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
}

.friend-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.friend-row-top {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
}

.friend-handle {
  color: var(--ui-friend-handle-color);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.friend-name {
  font-size: var(--font-xs);
  color: var(--text-dim);
}

.friend-status {
  font-size: var(--font-sm);
  color: var(--text-main);
  opacity: 0.92;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.friend-loc-line {
  font-size: var(--font-xs);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.friend-loc-line--ok {
  color: var(--green);
}

.friend-loc-line--locked {
  color: var(--text-dim);
  cursor: pointer;
}

.friend-loc-hidden-label {
  text-decoration: line-through;
  text-decoration-color: rgba(255, 217, 90, 0.45);
}

.friend-loc-tap {
  text-decoration: none;
  color: var(--ui-friend-loc-tap-color);
  margin-left: 4px;
}

.friend-row-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 6px;
  position: relative;
  z-index: 2;
}

.friend-action-btn.friend-btn-icon {
  flex: 0 0 30px !important;
  min-width: 30px !important;
  max-width: 30px;
  padding: 5px 0 !important;
  font-size: 12px;
  gap: 0;
}

.friend-action-btn.friend-btn-icon i {
  margin: 0;
}

.friend-action-btn.friend-btn-report:hover {
  border-color: rgba(255, 200, 100, 0.45);
  color: rgba(255, 210, 120, 0.95);
}

.friend-action-btn.friend-btn-remove:hover {
  border-color: rgba(255, 120, 120, 0.45);
  color: rgba(255, 150, 150, 0.95);
}

#myPageFriendsList .friends-online-list {
  min-height: 120px;
  max-height: min(56vh, 480px);
  overflow-y: auto;
  overflow-x: hidden;
  gap: 8px;
  padding-right: 6px;
}

#myPageFriendsList .friend-row {
  padding: 8px 10px;
  gap: 12px;
  align-items: flex-start;
}

#myPageFriendsList .friend-row-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  font-size: 17px;
}

#myPageFriendsList .friend-row-actions {
  margin-top: 4px;
  gap: 5px;
}

#myPageFriendsList .friend-btn-msg,
#myPageFriendsList .friend-btn-map {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 6px;
  font-size: 9px;
}

#myPageViewFriends .my-page-card-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#myPageViewFriends #myPageFriendsList {
  flex: 1;
  min-height: 0;
}

.my-page-right,
.my-page-friend-panel,
.mp-friend-quick {
  position: relative;
  z-index: 2;
}

.mp-friend-quick .mp-mini-btn {
  position: relative;
  z-index: 1;
}

.mp-friend-safety {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.mp-friend-safety-btn {
  border: none;
  background: transparent;
  color: rgba(156, 198, 170, 0.75);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 2px 4px;
}

.mp-friend-safety-btn:hover {
  color: rgba(255, 160, 160, 0.95);
}

.mp-friend-safety-sep {
  color: rgba(100, 130, 110, 0.5);
  font-size: 10px;
}

.friend-action-btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 5px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-glass-border);
  background: rgba(5, 8, 6, 0.75);
  color: var(--text-main);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-action-btn:hover {
  border-color: var(--ui-glass-border-strong);
  box-shadow: 0 0 10px rgba(58, 166, 255, 0.2);
}

/* Friends Online panel: action buttons without hard borders */
.left-panel .friends-online-panel .friend-action-btn {
  border: none;
  background: var(--ui-friend-action-bg);
  box-shadow: none;
}

.left-panel .friends-online-panel .friend-action-btn:hover {
  background: var(--ui-friend-action-hover-bg);
  box-shadow: none;
}

.friend-btn-remove-icon {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  padding: 5px 0;
  color: rgba(255, 170, 170, 0.95);
}

.friend-btn-remove-icon:hover {
  color: rgba(255, 120, 120, 1);
}

.friend-map-pin {
  position: relative;
  width: 44px;
  height: 56px;
  cursor: pointer;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
  pointer-events: auto;
}

.friend-map-pin--trip {
  width: 34px;
  height: 44px;
}

.friend-map-pin--trip .friend-map-pin-svg {
  width: 34px;
  height: 44px;
}

.friend-map-pin--trip .friend-map-pin-hole {
  r: 10.5;
  cy: 17;
}

.friend-map-pin-aura {
  position: absolute;
  left: 50%;
  top: 16px;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  border: 2px solid rgba(125, 252, 138, 0.75);
  box-shadow: 0 0 14px rgba(58, 166, 255, 0.45);
  animation: friend-map-pin-pulse 2.2s ease-out infinite;
  pointer-events: none;
}

@keyframes friend-map-pin-pulse {
  0% {
    transform: scale(0.82);
    opacity: 0.95;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

.friend-map-pin-shell {
  position: absolute;
  inset: 0;
  display: block;
}

.friend-map-pin-svg {
  display: block;
  width: 44px;
  height: 56px;
}

.friend-map-pin-shape {
  fill: rgba(8, 18, 14, 0.94);
  stroke: url(#friendPinGrad);
  stroke-width: 2.2;
}

.friend-map-pin--trip .friend-map-pin-shape {
  stroke: rgba(88, 182, 255, 0.92);
  fill: rgba(10, 22, 34, 0.94);
}

.friend-map-pin-hole {
  fill: rgba(6, 12, 10, 0.98);
  stroke: rgba(125, 252, 138, 0.35);
  stroke-width: 1;
}

.friend-map-pin-face {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 12, 10, 0.98);
  border: 1.5px solid rgba(125, 252, 138, 0.55);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.friend-map-pin--trip .friend-map-pin-face {
  top: 6px;
  width: 20px;
  height: 20px;
  margin-left: -10px;
  border-color: rgba(88, 182, 255, 0.65);
}

.friend-map-pin-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.friend-map-pin-initial,
.friend-map-pin-stop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: rgba(226, 254, 236, 0.98);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.friend-map-pin--trip .friend-map-pin-stop {
  font-size: 10px;
  color: rgba(210, 240, 255, 0.98);
}

.friend-map-pin--selected .friend-map-pin-shape {
  stroke: rgba(255, 230, 120, 0.98);
  filter: drop-shadow(0 0 10px rgba(255, 210, 80, 0.55));
}

.friend-map-pin--selected .friend-map-pin-aura {
  border-color: rgba(255, 220, 100, 0.95);
  animation-duration: 1.4s;
}

.friend-row--selected {
  border-color: rgba(125, 252, 138, 0.72) !important;
  background: linear-gradient(135deg, rgba(12, 32, 22, 0.95), rgba(8, 20, 14, 0.98)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(125, 252, 138, 0.28),
    0 0 18px rgba(58, 200, 120, 0.18);
}

.friend-row[role="button"] {
  cursor: pointer;
}

body.friends-online-map-lock .map-panel .map-add-node-hint,
body.friends-online-map-lock .settlement-hover-add {
  pointer-events: none !important;
  opacity: 0.35 !important;
}

.friend-map-pin-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(12, 22, 18, 0.92);
  border: 2px solid rgba(125, 252, 138, 0.75);
  box-shadow: 0 0 12px rgba(58, 166, 255, 0.35);
  color: var(--text-main);
  font-weight: 700;
  font-size: 13px;
}

.friend-trip-marker {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(58, 166, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.65);
  color: #000;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 8px rgba(58, 166, 255, 0.4);
}

.friend-map-banner {
  position: fixed;
  z-index: 1065;
  left: 50%;
  top: 72px;
  transform: translateX(-50%);
  max-width: min(520px, 92vw);
  padding: 8px 14px;
  font-size: var(--font-xs);
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--text-main);
  background: rgba(10, 18, 14, 0.72);
  border: 1px solid rgba(125, 252, 138, 0.35);
  border-radius: var(--radius-md);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.friend-loc-request-overlay {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.friend-loc-request-overlay.visible {
  display: flex;
}

.friend-loc-request-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 4, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.friend-loc-request-window {
  position: relative;
  z-index: 1;
  width: min(400px, 94vw);
  padding: 22px 20px 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(125, 252, 138, 0.3);
  background: rgba(12, 20, 16, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
}

.friend-loc-request-close {
  position: absolute;
  cursor: pointer;
}

.friend-loc-request-text {
  font-size: var(--font-md);
  color: var(--text-dim);
  line-height: 1.45;
  margin: 8px 0 16px;
}

.friend-loc-request-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.traveler-card-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.traveler-card-overlay.visible {
  display: flex;
}
.traveler-card-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 5, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.traveler-card-window {
  position: relative;
  z-index: 1;
  width: min(460px, 94vw);
  max-height: min(82vh, 640px);
  padding: 22px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(8, 16, 12, 0.92);
}
.traveler-card-close {
  position: absolute;
  cursor: pointer;
}
.traveler-card-eyebrow {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(180, 230, 160, 0.72);
}
.traveler-card-title {
  margin: 4px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #eef8f0;
}
.traveler-card-rank {
  margin: 2px 0 0;
  font-size: 0.82rem;
  color: rgba(170, 210, 185, 0.88);
}
.traveler-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 6px;
}
.traveler-card-stat {
  border: 1px solid rgba(125, 252, 138, 0.18);
  border-radius: 10px;
  padding: 8px 8px 7px;
  background: rgba(0, 0, 0, 0.22);
  display: grid;
  gap: 2px;
}
.traveler-card-stat span {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(160, 200, 175, 0.72);
}
.traveler-card-stat strong {
  font-size: 1.05rem;
  color: #f2fff4;
}
.traveler-card-list-head {
  margin-top: 4px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(170, 215, 185, 0.78);
}
.traveler-card-list {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 6px;
  padding-right: 4px;
}
.traveler-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid rgba(125, 252, 138, 0.12);
  background: rgba(0, 0, 0, 0.18);
  font-size: 0.8rem;
}
.traveler-card-row b {
  color: #e8f6ea;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.traveler-card-row span {
  color: rgba(175, 210, 190, 0.85);
  white-space: nowrap;
}
.traveler-card-empty {
  padding: 16px 8px;
  text-align: center;
  color: rgba(160, 190, 170, 0.7);
  font-size: 0.85rem;
}
.traveler-card-foot {
  margin: 2px 0 0;
  font-size: 0.7rem;
  line-height: 1.35;
  color: rgba(150, 185, 165, 0.7);
}
.friend-rank-hero {
  cursor: pointer;
}
.friend-rank-row-item:not(.is-empty) {
  cursor: pointer;
}
.friend-rank-row-item:not(.is-empty):hover {
  background: rgba(125, 252, 138, 0.08);
}
.friend-rank-row-item:not(.is-empty):focus-visible {
  outline: 1px solid rgba(125, 252, 138, 0.55);
  outline-offset: 1px;
}

/* ТЕРМИНАЛ */

.terminal-overlay {
  position: fixed;
  inset: 0;
  background: var(--ui-terminal-overlay-bg);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.terminal-overlay.visible {
  display: flex;
}

.terminal-overlay.visible .terminal-window {
  animation: terminalOpenIn 0.2s ease-out;
}

@keyframes terminalOpenIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.terminal-country-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(210, 240, 220, 0.88);
  cursor: pointer;
  user-select: none;
}

.terminal-country-toggle input {
  accent-color: #5dffb8;
  width: 15px;
  height: 15px;
}

.terminal-window {
  width: 460px;
  max-width: 95vw;
  border-radius: var(--radius-window);
  border: var(--window-border-width) solid var(--window-border-color) !important;
  box-shadow: var(--window-shadow-depth) !important;
  background: var(--ui-terminal-window-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: var(--font-md);
  position: relative;
}

.terminal-window::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(186, 255, 208, 0.28), 0 0 58px rgba(125, 252, 138, 0.48);
}

body:not(.tomato-mode) .terminal-window::before {
  inset: 0;
  box-shadow: none;
}

.friend-rank-overlay {
  position: absolute;
  inset: 0;
  z-index: 62;
  display: none;
}

.friend-rank-overlay.visible {
  display: block;
}

.friend-rank-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 8, 12, 0.7);
  backdrop-filter: blur(2px);
}

.friend-rank-panel {
  position: absolute;
  inset: 0;
  border: none;
  background: linear-gradient(180deg, rgba(7, 14, 16, 0.97), rgba(4, 9, 11, 0.99));
  box-shadow: none;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.friend-rank-header {
  position: relative;
  padding: 10px 34px 10px 12px;
  border-bottom: 1px solid rgba(124, 234, 160, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(197, 244, 212, 0.92);
}

.friend-rank-lead {
  padding: 8px 12px 6px;
  color: rgba(171, 224, 189, 0.84);
  font-size: 10px;
}

.friend-rank-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 8px;
}

.friend-rank-meta-card {
  border: 1px solid rgba(123, 198, 150, 0.34);
  background: rgba(8, 16, 14, 0.82);
  padding: 7px 8px;
  display: grid;
  gap: 2px;
}

.friend-rank-meta-label {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(158, 214, 177, 0.8);
}

.friend-rank-meta-card strong {
  font-size: 14px;
  color: rgba(226, 254, 236, 0.98);
}

.friend-rank-meta-card span:last-child {
  font-size: 10px;
  color: rgba(171, 226, 191, 0.84);
}

.friend-rank-mission {
  margin: 0;
  padding: 0 12px 8px;
  color: rgba(201, 253, 220, 0.9);
  font-size: 10px;
}

.friend-rank-list {
  padding: 8px 12px 12px;
  overflow: auto;
  display: grid;
  gap: 6px;
}

.friend-rank-row-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(94, 144, 178, 0.32);
  background: rgba(10, 18, 28, 0.72);
  border-radius: 3px;
  padding: 6px 7px;
}

.friend-rank-pos {
  color: rgba(154, 214, 252, 0.92);
  font-size: 10px;
}

.friend-rank-name {
  color: rgba(220, 236, 248, 0.96);
  font-size: 11px;
}

.friend-rank-score {
  color: rgba(162, 236, 194, 0.95);
  font-size: 10px;
}

.terminal-header {
  position: relative;
  padding: 18px 12px 12px;
  border-bottom: 1px solid var(--ui-terminal-header-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
}

.terminal-title {
  margin: 0;
  padding: 0 56px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-terminal-title-color);
  line-height: 1.2;
  font-size: 10px;
  font-weight: 600;
}

.terminal-close {
  position: absolute !important;
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
  margin: 0 !important;
  cursor: pointer;
  flex: 0 0 auto;
  width: var(--ui-chrome-size) !important;
  height: var(--ui-chrome-size) !important;
  min-width: var(--ui-chrome-size) !important;
  min-height: var(--ui-chrome-size) !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.terminal-close.ui-close::before,
.terminal-close.ui-close::after {
  width: 12px;
  height: 2px;
  background: var(--ui-terminal-close-bar);
  box-shadow: var(--ui-terminal-close-bar-glow);
}

.terminal-close.ui-close:not(.ui-close--corner):hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.terminal-close.ui-close:not(.ui-close--corner):hover::before,
.terminal-close.ui-close:not(.ui-close--corner):hover::after {
  background: var(--ui-terminal-close-bar-hover);
  box-shadow: var(--ui-terminal-close-bar-hover-glow);
}

/* Hard override after global .ui-close rules */
.terminal-window .terminal-close.ui-close:not(.ui-close--corner) {
  position: absolute !important;
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
  left: auto !important;
  margin: 0 !important;
  width: var(--ui-chrome-size) !important;
  height: var(--ui-chrome-size) !important;
  min-width: var(--ui-chrome-size) !important;
  min-height: var(--ui-chrome-size) !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

.terminal-window .terminal-header {
  padding: 12px 52px 10px !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
}

.terminal-window .terminal-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: var(--ui-terminal-window-title-color) !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.terminal-field input[type="date"] {
  color-scheme: var(--ui-terminal-date-scheme);
  border: 1px solid var(--ui-terminal-date-border);
  background: var(--ui-terminal-date-bg);
  color: var(--ui-terminal-date-color);
  box-shadow: none;
}

.terminal-field input[type="date"]::-webkit-calendar-picker-indicator {
  filter: var(--ui-terminal-date-indicator-filter);
  opacity: 0.95;
}

/* Right panel section titles: keep strict terminal UI face */
.profile-nav-title,
.profile-caption,
.panel-header,
.panel-header-main,
.panel-header-sub {
  font-family: var(--font-main);
  font-weight: 700;
}

.profile-nav-title,
.profile-caption,
.profile-nav-item span:first-of-type {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.terminal-body {
  padding: var(--space-10) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.terminal-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.terminal-field label {
  font-size: var(--font-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-olive);
}

.terminal-field input,
.terminal-field textarea {
  background: var(--ui-terminal-input-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-terminal-input-border);
  padding: 5px 7px;
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--font-md);
  outline: none;
}

#terminalNote {
  width: 100%;
  min-height: 96px;
  max-height: 260px;
  resize: vertical;
}

.terminal-field input:focus,
.terminal-field textarea:focus {
  border-color: var(--ui-terminal-input-focus-border);
  box-shadow: var(--ui-terminal-input-focus-glow);
}

.terminal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8);
}

.terminal-visit-hint {
  min-height: 20px;
  padding: 4px 8px;
  border: 1px dashed var(--ui-terminal-visit-hint-border);
  border-radius: var(--radius-sm);
  color: var(--ui-terminal-visit-hint-color);
  font-size: var(--font-xs);
  letter-spacing: 0.04em;
  background: var(--ui-terminal-visit-hint-bg);
}

.visit-choice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 18, 0.72);
  backdrop-filter: blur(5px);
  z-index: 3300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.visit-choice-overlay.visible {
  display: flex;
}

.visit-choice-window {
  width: min(540px, 100%);
  max-height: min(78vh, 520px);
  border: var(--window-border-width) solid var(--window-border-color);
  border-radius: var(--radius-window);
  background: #0a1218;
  box-shadow: var(--window-shadow-depth);
  padding: 14px;
  color: #eaf3ff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.visit-choice-list.mnm-scroll-rail {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(46vh, 360px);
  overflow-y: auto;
  padding-right: 4px;
}

.visit-choice-title {
  font-size: 16px;
  font-weight: 700;
}

.visit-choice-subtitle {
  margin-top: 4px;
  color: rgba(210, 228, 255, 0.78);
  font-size: 13px;
}

.visit-choice-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.visit-choice-item {
  width: 100%;
  text-align: left;
  border: 1px solid rgba(116, 168, 255, 0.38);
  background: rgba(11, 32, 54, 0.7);
  color: #edf5ff;
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
}

.visit-choice-item:hover {
  border-color: rgba(142, 193, 255, 0.75);
  box-shadow: 0 0 18px rgba(62, 140, 255, 0.22);
}

.visit-choice-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.terminal-footer {
  padding: var(--space-8) var(--space-10);
  border-top: 1px solid var(--accent-line);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-8);
}

/* AUTOCOMPLETE */

.terminal-suggestions {
  margin-top: var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-terminal-suggest-border);
  background: var(--ui-terminal-suggest-bg);
  max-height: 140px;
  overflow-y: auto;
  font-size: var(--font-md);
  color: var(--text-main);
  display: none;
  z-index: 10;
}

.terminal-suggestions.terminal-suggestions--portal {
  position: fixed;
  margin-top: 0;
  max-height: min(220px, 40vh);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 12060;
}

.auth-suggestions {
  display: none;
}

.terminal-suggestion-item {
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
  display: flex;
  align-items: center;
}

.terminal-suggestion-item:hover {
  background: var(--ui-terminal-suggest-hover);
}

/* АНИМАЦИИ */

@keyframes intro-flicker {
  0%,
  100% {
    opacity: 0.2;
  }
  5% {
    opacity: 0.8;
  }
  10% {
    opacity: 0.3;
  }
  15% {
    opacity: 1;
  }
  40% {
    opacity: 0.6;
  }
  60% {
    opacity: 1;
  }
  80% {
    opacity: 0.4;
  }
}

@keyframes intro-dots {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

@keyframes logo-color-cycle {
  0%,
  20% {
    color: var(--blue);
    text-shadow: 0 0 8px rgba(58, 166, 255, 0.9),
      0 0 20px rgba(58, 166, 255, 0.5);
  }
  33%,
  53% {
    color: var(--green);
    text-shadow: 0 0 8px rgba(125, 252, 138, 0.9),
      0 0 20px rgba(125, 252, 138, 0.5);
  }
  66%,
  86% {
    color: var(--red-neon);
    text-shadow: 0 0 8px rgba(255, 64, 96, 0.9), 0 0 20px rgba(255, 64, 96, 0.5);
  }
  100% {
    color: var(--blue);
    text-shadow: 0 0 8px rgba(58, 166, 255, 0.9),
      0 0 20px rgba(58, 166, 255, 0.5);
  }
}

@keyframes star-pulse {
  0%,
  100% {
    transform: scale(1);
    text-shadow: 0 0 3px rgba(255, 217, 90, 0.7),
      0 0 8px rgba(255, 217, 90, 0.4);
  }
  50% {
    transform: scale(1.05);
    text-shadow: 0 0 6px rgba(255, 217, 90, 1), 0 0 14px rgba(255, 217, 90, 0.8);
  }
}

@keyframes location-blink {
  0%,
  100% {
    opacity: 0.3;
    box-shadow: 0 0 2px rgba(125, 252, 138, 0.4);
  }
  50% {
    opacity: 1;
    box-shadow: 0 0 6px rgba(125, 252, 138, 1);
  }
}

/* hover по городам */

.left-panel .place-city:hover {
  background: var(--ui-node-city-hover-bg);
  box-shadow: none;
  border-radius: 3px;
  padding-left: 10px;
}

.left-panel .place-city:hover .place-city-card-top .place-city-name {
  color: var(--ui-node-city-hover-card-name-color);
}

.place-city:hover .place-city-name {
  color: var(--ui-node-city-hover-name-color);
}

.place-city:hover .place-city-meta {
  color: var(--text-main);
}

/* Date inputs in terminal — theme tokens (Snow overrides via liquid-aurora) */
.terminal-field .flatpickr-input {
  border-color: var(--ui-terminal-date-border) !important;
  background: var(--ui-terminal-date-bg) !important;
  color: var(--ui-terminal-date-color) !important;
}

/* Flatpickr neon theme for terminal date calendar */
.flatpickr-calendar {
  background: var(--ui-flatpickr-bg);
  border: 1px solid var(--ui-flatpickr-border);
  box-shadow: var(--ui-flatpickr-shadow);
  width: 236px;
  font-size: 11px;
  color: var(--ui-flatpickr-text);
}

.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: rgba(216, 246, 222, 0.96) !important;
  background: transparent !important;
}

.flatpickr-weekday {
  color: rgba(156, 218, 170, 0.9) !important;
}

.flatpickr-day {
  color: rgba(220, 240, 226, 0.94);
  border-radius: 2px;
}

.flatpickr-day:hover {
  background: rgba(80, 168, 108, 0.28);
  border-color: rgba(125, 252, 138, 0.5);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: linear-gradient(180deg, rgba(74, 176, 104, 0.92), rgba(50, 132, 78, 0.95)) !important;
  border-color: rgba(156, 246, 180, 0.84) !important;
  color: #eaffef !important;
}

.flatpickr-day.today {
  border-color: rgba(125, 252, 138, 0.58);
}

.flatpickr-days,
.dayContainer {
  width: 216px !important;
  min-width: 216px !important;
  max-width: 216px !important;
}

.flatpickr-day {
  max-width: 30px;
  height: 30px;
  line-height: 30px;
}

/* NODE LOG: выбранная нода — стиль как синий маркер с цифрой на карте */
.place-city.place-city--active {
  background: transparent;
  box-shadow: none;
}

.node-log-map-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  margin-bottom: 1px;
  vertical-align: middle;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(58, 166, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.65);
  box-shadow: 0 0 6px rgba(58, 166, 255, 0.38);
  color: #000;
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.place-city.place-city--active .place-city-name {
  color: var(--ui-node-city-active-name-color);
  font-weight: 600;
}

.place-city.place-city--active:hover {
  background: var(--ui-node-city-active-hover-bg);
  box-shadow: none;
  border-radius: 3px;
  padding-left: 10px;
}

.place-city.place-city--active:hover .place-city-name {
  color: var(--ui-node-city-active-hover-name);
}

.place-city.place-city--active:hover .node-log-map-chip {
  transform: scale(1.06);
  box-shadow: 0 0 14px rgba(58, 166, 255, 0.55);
}

.place-city.place-city--active:hover .place-city-meta {
  color: var(--text-main);
}

/* ================== */
/* НОВЫЕ СТИЛИ */
/* ================== */

/* Quick Actions Grid */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-4);
}

.quick-action-btn {
  padding: var(--space-4);
  border: 1px solid var(--ui-surface-border);
  background: var(--ui-surface-fill);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-xs);
  cursor: pointer;
  transition: all var(--elevate-duration) var(--elevate-ease);
}

.quick-action-btn:hover {
  border-color: var(--ui-surface-hover-border);
  color: var(--green);
  transform: translateY(-1px);
  box-shadow: var(--ui-surface-hover-glow);
}

.quick-action-btn.active {
  border-color: var(--ui-surface-active-border);
  color: var(--green);
  transform: translateY(-1px);
  box-shadow: var(--ui-surface-active-glow);
  background: var(--ui-surface-active-fill);
}

.quick-action-btn i {
  font-size: 14px;
}

/* Zoom indicator */
.map-zoom-indicator {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid var(--border-soft);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  color: var(--text-dim);
  z-index: 500;
  pointer-events: none;
  white-space: nowrap;
}

.country-label-text {
  /* font-family: var(--font-mono); ← удалить */
  font-size: 10px !important;
  color: var(--blue) !important;
  text-shadow: 0 0 4px rgba(58, 166, 255, 0.9), 0 0 10px rgba(58, 166, 255, 0.6) !important;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 4px;
  border-radius: 2px;
  white-space: nowrap;
}

/* Type badge */
.node-type-badge {
  display: inline-block;
  padding: 1px 4px;
  margin-left: 6px;
  border-radius: 2px;
  font-size: 8px;
  text-transform: uppercase;
  background: rgba(58, 166, 255, 0.2);
  color: var(--blue);
  vertical-align: middle;
}

.profile-countries-block {
  border-color: rgba(72, 178, 255, 0.46);
  box-shadow: 0 0 0 1px rgba(72, 178, 255, 0.2) inset;
}

.profile-country-row .place-city-name,
.profile-country-row .place-city-meta,
.profile-country-row .node-type-badge {
  color: rgba(168, 218, 255, 0.98) !important;
}

/* Navigation active states */
.profile-nav-item {
  position: relative;
  transition: all 0.15s ease;
}

.profile-nav-item:hover {
  color: var(--green);
  padding-left: 8px;
}

.profile-nav-item.active {
  color: var(--green);
  border-left: 2px solid var(--green);
  padding-left: 10px;
  background: var(--ui-nav-active-bg);
}

.profile-nav-item.active:hover {
  padding-left: 10px;
}

/* Sound toggle button */
#soundToggleBtn.muted i {
  color: var(--text-dim);
}

#soundToggleBtn.muted:hover i {
  color: var(--text-main);
}

/* Smooth zoom transition */
.leaflet-zoom-animated {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Pulsing dot animation */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pulse-dot {
  animation: pulse 2s infinite;
}

/* Country highlight animation */
@keyframes country-highlight {
  0% {
    fill-opacity: 0.2;
  }
  50% {
    fill-opacity: 0.4;
  }
  100% {
    fill-opacity: 0.35;
  }
}

/* Media query for smaller screens */
@media (max-width: 1200px) {
  .app-shell {
    grid-template-columns: clamp(248px, 24vw, 300px) minmax(0, 1fr) clamp(248px, 24vw, 300px);
  }

  .logo-main {
    font-size: 28px;
    letter-spacing: 0.25em;
  }

  .intro-title {
    font-size: 28px;
  }
}

@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: var(--side-panel-width-narrow) minmax(0, 1fr) 0;
  }

  .right-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(calc(var(--side-panel-width) - 20px), 92vw);
    z-index: 100;
  }

  .right-panel.collapsed {
    transform: translateX(100%);
  }
}

/*
 * Laptop / scaled desktop (effective height ≤899px): compact padding, single middle scroll.
 */
@media (max-height: 899px) {
  .app-shell > .left-panel,
  #rightPanel.right-panel {
    padding: var(--space-8);
  }

  .left-panel .logo-main {
    font-size: clamp(20px, 4.2vw, 28px);
    letter-spacing: 0.18em;
  }

  .left-panel .places-panel {
    margin-top: var(--space-8);
  }

  #rightPanel > .profile-header {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
  }

  #rightPanel .avatar-circle {
    width: 64px;
    height: 64px;
  }

  #rightPanel .profile-header-main {
    gap: var(--space-6);
  }

  #rightPanel .profile-auth-actions {
    gap: 4px;
  }

  #rightPanel .btn-auth--premium {
    padding: 4px 6px;
    font-size: 8px;
    letter-spacing: 0.06em;
  }

  /* One scroll zone (not two) — only if content still taller than viewport */
  #rightPanel > .profile-middle {
    flex: 1 1 0;
    min-height: 0;
    gap: var(--rp-section-gap);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  #rightPanel > .profile-middle > .profile-nav,
  #rightPanel > .profile-middle > .profile-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    max-height: none;
  }

  #rightPanel > .profile-middle > .profile-nav {
    gap: var(--rp-section-gap);
  }

  #rightPanel > .profile-middle > .profile-body {
    gap: var(--rp-section-gap);
  }

  #rightPanel .profile-nav-section {
    padding: var(--space-4) var(--space-6);
  }

  #rightPanel .profile-nav-title {
    margin-bottom: var(--space-2);
  }

  #rightPanel .profile-nav-section--social .profile-nav-list,
  #rightPanel .profile-nav-section--travel .profile-nav-list {
    gap: var(--rp-row-gap, 2px);
  }

  #rightPanel .profile-block {
    padding: var(--space-4) var(--space-6);
  }

  #rightPanel #quickActions .quick-actions-grid {
    gap: 4px;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  #rightPanel #quickActions .quick-action-btn {
    min-height: 0;
    padding: 2px 3px;
    font-size: 7.5px;
  }

  #rightPanel #quickActions .quick-action-btn i {
    font-size: 10px;
  }

  #rightPanel .travel-stats-block .profile-list li {
    padding-bottom: 1px;
    margin-bottom: 1px;
  }

  #rightPanel > .profile-nav-section--system {
    margin-top: 0;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  #rightPanel > .profile-legal-stack {
    margin-top: 0;
  }
}

/* 1366×768 — fit without scroll when possible */
@media (max-height: 768px) {
  #rightPanel.right-panel {
    --rp-section-gap: 6px;
    --rp-row-gap-min: 2px;
    --rp-row-gap: 2px;
    padding: var(--space-8);
  }

  #rightPanel .profile-block {
    padding: var(--space-3) var(--space-5);
  }

  #rightPanel .avatar-circle {
    width: 52px;
    height: 52px;
  }

  #rightPanel > .profile-header {
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
  }

  #rightPanel > .profile-middle {
    gap: var(--rp-section-gap);
  }

  #rightPanel > .profile-middle > .profile-nav,
  #rightPanel .profile-body {
    gap: var(--rp-section-gap);
  }

  #rightPanel .profile-nav-item {
    min-height: 18px;
  }

  #rightPanel .profile-nav-section--social .profile-nav-item,
  #rightPanel .profile-nav-section--travel .profile-nav-item {
    padding-top: 0;
    padding-bottom: 0;
  }

  #rightPanel #quickActions .quick-actions-grid {
    gap: 3px;
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }

  #rightPanel #quickActions .quick-action-btn {
    min-height: 0;
    padding: 2px 3px;
    font-size: 7px;
    line-height: 1.05;
  }

  #rightPanel #quickActions .quick-action-btn span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #rightPanel .travel-stats-block .profile-list {
    margin-top: var(--space-2);
  }

  #rightPanel .travel-stats-block .profile-list li {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  #rightPanel > .profile-nav-section--system {
    margin-top: 0;
    padding-top: 2px;
    padding-bottom: 2px;
  }

  #rightPanel > .profile-legal-stack {
    margin-top: 0;
  }

  #rightPanel .profile-nav-footer-credit--classic {
    padding: var(--space-4) 4px 2px;
  }
}

/* 1280×720 — still tight; one thin scroll only if OS/browser chrome eats height */
@media (max-height: 720px) {
  #rightPanel.right-panel {
    --rp-section-gap: 6px;
    padding: var(--space-8);
  }

  #rightPanel .profile-caption,
  #rightPanel .profile-nav-title {
    letter-spacing: 0.1em;
    font-size: 8px;
  }

  #rightPanel #quickActions .quick-actions-grid {
    grid-auto-rows: minmax(24px, auto);
  }

  #rightPanel #quickActions .quick-action-btn {
    min-height: 24px;
    gap: 1px;
  }

  #rightPanel #quickActions .quick-action-btn i {
    font-size: 11px;
  }
}

/* Short laptops: thin scrollbar on whole right panel */
@media (max-height: 899px) {
  #rightPanel.right-panel::-webkit-scrollbar {
    width: 6px;
  }

  #rightPanel.right-panel::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 4px;
  }
}

/* Desktop reference (≥900px height): left places panel stretch */
@media (min-height: 900px) {
  #rightPanel > .profile-middle {
    overflow: visible;
  }

  .left-panel .places-panel {
    flex: 1 1 auto;
  }
}

/* Narrow but tall: slightly tighter side padding, same behavior */
@media (max-width: 1400px) and (min-height: 900px) {
  #rightPanel.right-panel {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .app-shell > .left-panel {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  #rightPanel > .profile-middle > .profile-nav {
    gap: var(--rp-section-gap);
  }
}

/* =============================================================================
   SIDE PANELS v46 — locked card rhythm + premium ambient surface
   ============================================================================= */

.left-panel,
#rightPanel.right-panel {
  background:
    radial-gradient(circle at 18% 9%, rgba(143, 211, 255, 0.09), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(125, 252, 138, 0.08), transparent 28%),
    linear-gradient(118deg, transparent 0 18%, rgba(143, 211, 255, 0.05) 18.2%, transparent 18.7% 44%, rgba(125, 252, 138, 0.045) 44.2%, transparent 44.7%),
    linear-gradient(38deg, transparent 0 31%, rgba(236, 202, 116, 0.035) 31.2%, transparent 31.7% 68%, rgba(143, 211, 255, 0.04) 68.2%, transparent 68.7%),
    radial-gradient(circle at 0 0, var(--ui-panel-grad-a) 0, var(--ui-panel-grad-b) 55%),
    var(--bg-panel);
  background-blend-mode: screen, screen, soft-light, soft-light, normal, normal;
}

.left-panel::before,
#rightPanel.right-panel::before {
  background-image:
    radial-gradient(circle at 22% 22%, rgba(143, 211, 255, 0.08) 0 1px, transparent 1.6px),
    radial-gradient(circle at 74% 42%, rgba(125, 252, 138, 0.075) 0 1px, transparent 1.6px),
    linear-gradient(115deg, transparent 0 24%, rgba(143, 211, 255, 0.06) 24.1%, transparent 24.55% 100%),
    linear-gradient(28deg, transparent 0 62%, rgba(125, 252, 138, 0.05) 62.1%, transparent 62.55% 100%),
    linear-gradient(72deg, transparent 0 41%, rgba(143, 211, 255, 0.035) 41.1%, transparent 41.45% 100%),
    var(--ui-panel-texture);
  background-size: 190px 230px, 220px 180px, 100% 100%, 100% 100%, 100% 100%, auto;
  opacity: 0.78;
  mix-blend-mode: soft-light;
}

#rightPanel.right-panel {
  --rp-section-gap: 10px;
  --rp-row-gap-min: 2px;
  --rp-row-gap: clamp(2px, 0.34vh, 7px);
  gap: var(--rp-section-gap);
  height: 100%;
  padding: var(--space-14);
  padding-bottom: max(var(--space-14), env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

#rightPanel > .profile-header,
#rightPanel > .profile-nav-section--system,
#rightPanel > .profile-legal-stack {
  flex: 0 0 auto;
}

#rightPanel > .profile-middle {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rp-section-gap);
  overflow: hidden;
}

#rightPanel > .profile-middle > .profile-nav,
#rightPanel > .profile-middle > .profile-body {
  display: contents;
}

#rightPanel .profile-nav-section--social,
#rightPanel .profile-nav-section--travel,
#rightPanel #quickActions,
#rightPanel .travel-stats-block {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#rightPanel .profile-nav-section--social {
  flex: 1 1 0;
}

#rightPanel .profile-nav-section--travel {
  flex: 1 1 0;
}

#rightPanel #quickActions {
  flex: 1 1 0;
}

#rightPanel .travel-stats-block {
  flex: 1 1 0;
}

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list {
  gap: 1px;
  justify-content: flex-start;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item {
  min-height: 0;
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 1.15;
}

#rightPanel > .profile-nav-section--system {
  margin-top: 0;
  margin-bottom: 0;
}

#rightPanel > .profile-legal-stack {
  margin-top: 0;
}

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list,
#rightPanel .travel-stats-block .profile-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
  overflow: hidden;
}

#rightPanel .quick-actions-grid {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 5px;
  align-content: stretch;
  overflow: hidden;
  padding-bottom: 0;
  margin-top: 2px;
}

#rightPanel .quick-action-btn {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  height: auto;
  padding: 2px 3px;
  overflow: hidden;
  line-height: 1.05;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

#rightPanel .quick-action-btn i {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

#rightPanel .quick-action-btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.05;
  font-size: 7.5px;
  letter-spacing: 0.02em;
}

#rightPanel .profile-nav-item,
#rightPanel .quick-action-btn,
.left-panel .info-card,
.left-panel .places-panel,
.left-panel .place-country,
.left-panel .place-city {
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    filter 0.18s ease;
}

#rightPanel .profile-nav-item,
#rightPanel .quick-action-btn {
  border-radius: 3px;
}

#rightPanel .profile-nav-item:hover,
#rightPanel .profile-nav-item.active {
  color: rgba(214, 255, 232, 0.98);
  background: rgba(125, 252, 138, 0.08);
  box-shadow: inset 3px 0 0 rgba(125, 252, 138, 0.88);
  border-color: rgba(125, 252, 138, 0.38);
  filter: none;
  transform: none;
}

#rightPanel .quick-action-btn:hover,
#rightPanel .quick-action-btn.active {
  color: rgba(214, 255, 232, 0.98);
  background: rgba(125, 252, 138, 0.09);
  box-shadow:
    inset 3px 0 0 rgba(125, 252, 138, 0.9),
    inset -3px 0 0 rgba(125, 252, 138, 0.9);
  border-color: rgba(125, 252, 138, 0.45);
  filter: none;
  transform: none;
}

.left-panel .info-card:hover,
.left-panel .places-panel:hover,
.left-panel .place-country:hover,
.left-panel .place-city:hover,
#rightPanel .card-base:hover {
  border-color: rgba(143, 211, 255, 0.32);
  box-shadow:
    0 0 0 1px rgba(125, 252, 138, 0.07) inset,
    0 12px 24px rgba(0, 0, 0, 0.18),
    0 0 18px rgba(58, 166, 255, 0.08);
}

@media (max-height: 899px) {
  #rightPanel.right-panel {
    --rp-section-gap: 8px;
    --rp-row-gap: 2px;
    padding: var(--space-8);
    overflow: hidden;
  }

  #rightPanel > .profile-middle {
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
  }

  #rightPanel .profile-nav-section--social {
    flex: 1 1 0;
  }

  #rightPanel .profile-nav-section--travel {
    flex: 1 1 0;
  }

  #rightPanel #quickActions {
    flex: 1 1 0;
  }

  #rightPanel .travel-stats-block {
    flex: 1 1 0;
  }

  #rightPanel .profile-nav-section--social .profile-nav-list,
  #rightPanel .profile-nav-section--travel .profile-nav-list,
  #rightPanel .travel-stats-block .profile-list {
    justify-content: flex-start;
    gap: var(--rp-row-gap);
  }

  #rightPanel .quick-actions-grid {
    grid-template-rows: repeat(4, minmax(32px, 1fr));
    gap: 4px;
  }
}

@media (max-height: 768px) {
  #rightPanel.right-panel {
    --rp-section-gap: 6px;
  }

  #rightPanel .quick-actions-grid {
    grid-template-rows: repeat(4, minmax(30px, 1fr));
  }
}

/* Print styles for export */
@media print {
  .neon-frame::before,
  .app-bg-texture,
  .panel-handle,
  .terminal-overlay,
  .intro-screen {
    display: none !important;
  }

  .app-shell {
    grid-template-columns: 1fr;
    height: auto;
  }

  .left-panel,
  .right-panel,
  .map-panel {
    border: 1px solid #000;
    box-shadow: none;
  }

  body {
    background: white;
    color: black;
    overflow: auto;
  }
}
@keyframes neon-pulse {
  0% {
    opacity: 0.8;
    text-shadow: 0 0 6px rgba(58, 166, 255, 0.7),
      0 0 14px rgba(58, 166, 255, 0.4);
  }
  50% {
    opacity: 1;
    text-shadow: 0 0 10px rgba(58, 166, 255, 1),
      0 0 22px rgba(58, 166, 255, 0.8);
  }
  100% {
    opacity: 0.8;
    text-shadow: 0 0 6px rgba(58, 166, 255, 0.7),
      0 0 14px rgba(58, 166, 255, 0.4);
  }
}

.status-clock,
.status-users,
.status-indicator.online {
  animation: neon-pulse 2.4s ease-in-out infinite;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ui-close,
  .photo-album-fs,
  .photo-album-nav,
  .map-birthhome-pin-wrap .map-birthhome-pin,
  .btn-main,
  .btn-ghost,
  button,
  [role="button"] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
/* ===== MY NODE MAP BRAND ===== */

.mnm-logo-mark-slot {
  line-height: 0;
  color: #eafff4;
}

.mnm-logo-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mnm-logo-svg .mnm-logo-art,
.mnm-logo-svg path {
  fill: currentColor;
  stroke: none;
}

.mnm-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.mnm-logo-mark-slot.mnm-logo-mark--title {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.24em;
  height: 1.24em;
  margin: 0 0.04em 0 -0.06em;
  padding: 0;
  line-height: 0;
  letter-spacing: 0;
  vertical-align: -0.22em;
  overflow: visible;
  color: inherit;
  filter: drop-shadow(0 0 5px currentColor);
}

.mnm-logo-mark--title .mnm-logo-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.logo-mymap-simple .logo-main,
.logo-mymap-simple .logo-block,
.intro-title-mymap-simple,
.intro-title-mymap-simple .intro-logo {
  overflow: visible;
}

.logo-mymap-simple .logo-main-line,
.intro-title-mymap-simple .intro-main-line {
  line-height: 1;
  display: block;
  text-align: center;
  overflow: visible;
}

.logo-mymap-simple .logo-main-line .mnm-logo-mark--title,
.intro-title-mymap-simple .intro-main-line .mnm-logo-mark--title {
  width: 1.24em;
  height: 1.24em;
  margin: 0 0.04em 0 -0.06em;
  letter-spacing: 0;
  vertical-align: -0.22em;
}

.mnm-logo-mark--shelf-hero,
.right-panel-brand-hero-img {
  display: block;
  flex-shrink: 0;
  width: min(88cqi, 248px);
  height: min(88cqi, 248px);
  margin: 0 auto;
  color: #eafff4;
  filter:
    drop-shadow(0 0 10px rgba(125, 252, 138, 0.55))
    drop-shadow(0 0 22px rgba(125, 252, 138, 0.28));
}
.right-panel-brand-shelf {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(14px, 4cqi, 22px) clamp(10px, 2.5cqi, 14px) 12px;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at 0 0, rgba(12, 22, 30, 0.82) 0, rgba(6, 10, 14, 0.98) 55%),
    var(--bg-panel);
  border: 1px solid var(--border-soft);
  box-shadow:
    0 0 0 1px rgba(20, 40, 30, 0.9),
    0 14px 26px rgba(0, 0, 0, 0.7),
    inset 1px 0 12px rgba(125, 252, 138, 0.08);
}

.right-panel-brand-shelf::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-radial-gradient(
      circle at 0 100%,
      rgba(80, 140, 220, 0.08) 0,
      rgba(80, 140, 220, 0.08) 2px,
      transparent 2px,
      transparent 8px
    ),
    repeating-radial-gradient(
      circle at 0 0,
      rgba(80, 140, 220, 0.05) 0,
      rgba(80, 140, 220, 0.05) 4px,
      transparent 4px,
      transparent 14px
    );
  opacity: 0.55;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.right-panel-wrapper:has(#rightPanel.collapsed) .right-panel-brand-shelf {
  display: flex;
}

.right-panel-brand-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}

.mnm-logo-mark--shelf-hero .mnm-logo-svg {
  shape-rendering: geometricPrecision;
}

/* Collapsed right column — large logo mark + slogan */
.right-panel-brand-slogan {
  margin: clamp(14px, 5.5cqi, 28px) 0 0;
  padding: 0 clamp(4px, 1.5cqi, 8px);
  width: 100%;
  text-align: center;
  font-family: var(--font-display);
  color: #eafff4;
  text-shadow:
    0 0 8px rgba(125, 252, 138, 0.92),
    0 0 20px rgba(125, 252, 138, 0.48);
}

.right-panel-brand-slogan-line {
  display: block;
  font-size: clamp(24px, 15cqi, 44px);
  letter-spacing: 0.14em;
  line-height: 1.02;
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
  text-shadow: inherit;
  animation: horror-lamp-flicker 2s infinite;
}

.right-panel-brand-slogan-line:nth-child(1) {
  animation-delay: 0s, 0.05s;
}

.right-panel-brand-slogan-line:nth-child(2) {
  animation-delay: 0s, 0.18s;
}

.right-panel-brand-slogan-line:nth-child(3) {
  animation-delay: 0s, 0.32s;
}

.right-panel-brand-slogan-line + .right-panel-brand-slogan-line {
  margin-top: clamp(2px, 1cqi, 6px);
}

.right-panel-brand-slogan-line.slogan-line-life {
  letter-spacing: 0.1em;
}

/* LIFE <-> LIVE morphing letter */
.slogan-morph {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  line-height: inherit;
}

.slogan-morph-rail {
  visibility: hidden;
  pointer-events: none;
}

.slogan-morph-f {
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
  animation: slogan-morph-f 3.4s steps(1, end) infinite;
}

.slogan-morph-v {
  position: absolute;
  left: -0.09em;
  top: 0;
  line-height: inherit;
  opacity: 0;
  animation: slogan-morph-v 3.4s steps(1, end) infinite;
}

@keyframes horror-lamp-flicker {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  3% {
    opacity: 0.3;
    filter: brightness(0.4);
  }
  4% {
    opacity: 0.95;
    filter: brightness(1.05);
  }
  5% {
    opacity: 0.2;
    filter: brightness(0.3);
  }
  6% {
    opacity: 1;
  }
  11% {
    opacity: 0.88;
  }
  12% {
    opacity: 0.35;
    filter: brightness(0.45);
  }
  13% {
    opacity: 1;
  }
  18% {
    opacity: 0.5;
    filter: brightness(0.55);
  }
  19% {
    opacity: 0.15;
    filter: brightness(0.25);
  }
  20% {
    opacity: 0.9;
  }
  21% {
    opacity: 1;
  }
  27% {
    opacity: 0.4;
    filter: brightness(0.5);
  }
  28% {
    opacity: 1;
  }
  33% {
    opacity: 0.25;
    filter: brightness(0.35);
  }
  34% {
    opacity: 0.85;
  }
  35% {
    opacity: 1;
  }
  42% {
    opacity: 0.55;
    filter: brightness(0.6);
  }
  43% {
    opacity: 0.12;
    filter: brightness(0.2);
  }
  44% {
    opacity: 0.7;
  }
  45% {
    opacity: 0.3;
  }
  46% {
    opacity: 1;
    filter: brightness(1.08);
  }
  52% {
    opacity: 0.45;
    filter: brightness(0.5);
  }
  53% {
    opacity: 1;
  }
  58% {
    opacity: 0.9;
  }
  59% {
    opacity: 0.22;
    filter: brightness(0.35);
  }
  60% {
    opacity: 1;
  }
  66% {
    opacity: 0.38;
    filter: brightness(0.48);
  }
  67% {
    opacity: 0.95;
  }
  68% {
    opacity: 1;
  }
  74% {
    opacity: 0.18;
    filter: brightness(0.28);
  }
  75% {
    opacity: 0.8;
  }
  76% {
    opacity: 0.35;
  }
  77% {
    opacity: 1;
  }
  83% {
    opacity: 0.5;
    filter: brightness(0.55);
  }
  84% {
    opacity: 0.1;
    filter: brightness(0.2);
  }
  85% {
    opacity: 0.92;
  }
  86% {
    opacity: 1;
  }
  92% {
    opacity: 0.42;
    filter: brightness(0.5);
  }
  93% {
    opacity: 1;
  }
}

@keyframes slogan-morph-f {
  0%, 44% { opacity: 1; }
  47% { opacity: 0.2; }
  50%, 94% { opacity: 0; }
  97% { opacity: 0.2; }
  100% { opacity: 1; }
}

@keyframes slogan-morph-v {
  0%, 44% { opacity: 0; }
  47% { opacity: 0.2; }
  50%, 94% { opacity: 1; }
  97% { opacity: 0.2; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .right-panel-brand-slogan-line {
    animation: logo-color-cycle 6s infinite;
  }

  .slogan-morph-f,
  .slogan-morph-v {
    animation: none;
  }
  .slogan-morph-v {
    opacity: 0;
  }
}

.mnm-logo-mark--page {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 10px 0 0;
  vertical-align: middle;
  color: #eafff4;
  filter: drop-shadow(0 0 7px rgba(234, 255, 244, 0.4));
}

.mnm-logo-mark--header-hero .mnm-logo-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.mnm-logo-mark--legal-hero {
  display: block;
  width: 96px;
  height: 96px;
  color: #eafff4;
  filter: drop-shadow(0 0 10px rgba(125, 252, 138, 0.32));
}

.mnm-logo-mark--about {
  display: block;
  width: 70px;
  height: 70px;
  margin: 0 auto 10px;
  color: #eafff4;
  filter: drop-shadow(0 0 12px rgba(234, 255, 244, 0.42));
}

/* Logo crowning the bottom line of left/right menus */
.panel-crown-anchor {
  position: relative;
  flex-shrink: 0;
  height: 0;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}

.panel-crown-anchor--inline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 2;
}

.panel-crown-sep {
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  height: 1px;
  border: none;
  transform: none;
  background: linear-gradient(
    90deg,
    rgba(58, 166, 255, 0),
    rgba(58, 166, 255, 0.35),
    rgba(125, 252, 138, 0.28),
    rgba(58, 166, 255, 0.35),
    rgba(58, 166, 255, 0)
  );
  box-shadow: 0 0 12px rgba(58, 166, 255, 0.12);
}

.panel-crown-anchor .mnm-logo-mark--crown {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: var(--panel-crown-logo);
  height: var(--panel-crown-logo);
  z-index: 2;
  pointer-events: none;
  color: #eafff4;
  filter: drop-shadow(0 0 8px rgba(234, 255, 244, 0.45));
}

#rightPanel > .profile-legal-stack .panel-crown-anchor {
  margin-bottom: var(--panel-crown-pad);
}

.nodus-profile-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.my-page-global-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.logo-mymap-simple .logo-main-line {
  display: block;
  font-family: var(--font-display);
  font-size: 45px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
}

.logo-mymap-simple .logo-sub-line {
  display: block;
  font-family: var(--font-display);
  font-size: 45px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 5px;
  text-align: center;
}

.intro-title-mymap-simple .intro-main-line,
.intro-title-mymap-simple .intro-sub-line {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(26px, 7.5vw, 45px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
}

.intro-title-mymap-simple .intro-main-line .mnm-logo-mark--title {
  width: 1.24em;
  height: 1.24em;
  max-width: 1.24em;
  max-height: 1.24em;
  overflow: hidden;
}

.intro-title-mymap-simple .intro-main-line {
  white-space: nowrap;
}

.intro-title-mymap-simple .intro-sub-line {
  margin-top: 5px;
}
.auth-actions-row {
  display: flex;
  gap: var(--space-4);
  justify-content: flex-end;
  align-items: center;
}
.auth-actions-row .btn-main,
.auth-actions-row .btn-ghost {
  font-size: var(--font-sm);
  padding: 8px 14px;
  height: 36px; /* фиксируем высоту */
  display: inline-flex;
  align-items: center; /* выравниваем текст по вертикали */
}
/* ===== TOMATO BATTLE ICON ON MAP ===== */

.tomato-battle-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.tomato-battle-img {
  width: 148px;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 10px rgba(255, 80, 80, 0.55))
    drop-shadow(0 0 18px rgba(0, 0, 0, 0.45));
  transform-origin: 50% 92%;
  animation: tomato-battle-sway 4.2s ease-in-out infinite;
}

@keyframes tomato-battle-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(1.1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tomato-battle-img {
    animation: none !important;
  }
}

/* ===== NoDUS peek (map corner companion) ===== */

.nodus-peek {
  position: absolute;
  right: 0;
  top: calc(14px + var(--tomato-battle-img-stack-h, 92px) + 8px);
  z-index: 1195;
  height: 80px;
  width: 120px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  transition: width 0.3s ease, filter 0.2s ease;
  filter: drop-shadow(-4px 4px 12px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 14px rgba(58, 166, 255, 0.25));
}

.nodus-peek--collapsed {
  width: 60px;
}

.nodus-peek--expanded {
  width: 120px;
}

.nodus-peek-inner {
  display: block;
  width: 120px;
  height: 80px;
  flex-shrink: 0;
}

.nodus-peek-img {
  display: block;
  width: 120px;
  height: 80px;
  object-fit: cover;
  object-position: 58% 12%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.nodus-peek {
  display: none !important;
}

.nodus-profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 14050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.nodus-profile-overlay[hidden] {
  display: none !important;
}

.nodus-profile-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 8, 0.72);
  backdrop-filter: blur(6px);
}

.nodus-profile-window {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(88vh, 640px);
  overflow: auto;
  padding: 16px 16px 18px;
  border-radius: 2px;
  border: 1px solid rgba(125, 252, 138, 0.35);
  background: linear-gradient(165deg, rgba(10, 22, 18, 0.98), rgba(4, 10, 8, 0.99));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 24px rgba(58, 166, 255, 0.12);
}

.nodus-profile-close {
  position: absolute;
  z-index: 2;
}

.nodus-profile-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-right: 28px;
}

.nodus-profile-hero {
  width: 72px;
  height: 72px;
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(125, 252, 138, 0.4);
  border-radius: 0;
  flex-shrink: 0;
}

.nodus-profile-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(210, 255, 230, 0.98);
}

.nodus-profile-tag {
  margin: 4px 0 0;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(140, 190, 210, 0.88);
}

.nodus-profile-bio {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(210, 228, 220, 0.92);
}

.nodus-profile-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.nodus-profile-shot {
  margin: 0;
  padding: 0;
  border: 1px solid rgba(102, 164, 124, 0.35);
  background: rgba(6, 14, 11, 0.85);
  text-align: center;
  overflow: hidden;
}

.nodus-profile-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center top;
}

.nodus-profile-shot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  font-size: 22px;
  color: rgba(125, 252, 138, 0.75);
  background: rgba(8, 16, 14, 0.9);
}

.nodus-profile-shot figcaption {
  padding: 4px 2px;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(160, 200, 180, 0.85);
}

.nodus-profile-actions {
  display: flex;
  justify-content: center;
}

.nodus-profile-actions .btn-main {
  min-width: 160px;
}

@media (max-width: 720px) {
  .nodus-peek {
    height: 64px;
    width: 96px;
  }

  .nodus-peek--collapsed {
    width: 48px;
  }

  .nodus-peek--expanded {
    width: 96px;
  }

  .nodus-peek-inner,
  .nodus-peek-img {
    width: 96px;
    height: 64px;
  }
}

@media (max-width: 520px) {
  .nodus-peek {
    display: none;
  }
}

/* Tomato Battle — promo card (glass, next to logo; above map canvas & intro is gone) */
.tomato-promo-card {
  position: absolute;
  top: 14px;
  right: 158px;
  z-index: 1250;
  max-width: min(260px, calc(100vw - 200px));
  pointer-events: auto;
  animation: tomato-promo-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tomato-promo-in {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.tomato-promo-inner {
  position: relative;
  padding: 12px 14px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 90, 90, 0.45);
  background: linear-gradient(
    145deg,
    rgba(120, 20, 28, 0.42) 0%,
    rgba(40, 8, 12, 0.55) 100%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 120, 120, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tomato-promo-chart {
  display: block;
  width: 100%;
  height: 44px;
  margin-bottom: 8px;
  padding: 0 2px;
  overflow: visible;
}

.tomato-promo-spark {
  display: block;
  width: 100%;
  height: 44px;
  overflow: visible;
}

.tomato-promo-spark-line {
  filter: drop-shadow(0 0 6px rgba(255, 120, 100, 0.45));
}

.tomato-promo-spark-area {
  opacity: 1;
}

.tomato-promo-kicker {
  margin: 0 0 4px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 200, 200, 0.75);
}

.tomato-promo-headline {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.tomato-promo-body {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 230, 230, 0.88);
}

.tomato-promo-cta {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 180, 160, 0.55);
  background: rgba(255, 60, 60, 0.35);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.tomato-promo-cta:hover {
  background: rgba(255, 80, 80, 0.5);
  box-shadow: 0 0 20px rgba(255, 80, 80, 0.35);
}

.tomato-promo-dismiss.ui-close {
  position: absolute;
  top: var(--ui-chrome-inset);
  right: var(--ui-chrome-inset);
}

@media (max-width: 720px) {
  .tomato-promo-card {
    right: 12px;
    top: 118px;
    max-width: calc(100vw - 24px);
  }
}

/* Mapbox controls: top-left — row1: +/- and 3D/settings; row2: world under +/- */
.mapboxgl-ctrl-top-left {
  top: 22px;
  left: 14px;
  right: auto;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  gap: 6px 8px;
  align-items: start;
}
.mapboxgl-ctrl-top-left > .mapboxgl-ctrl.mapboxgl-ctrl-group:not(.map-tilt-ctrl):not(.map-zoom-world-ctrl) {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.mapboxgl-ctrl-top-left > .map-zoom-world-ctrl {
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  margin: 0;
}
.mapboxgl-ctrl-top-left > .map-tilt-ctrl {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  margin: 0;
}
.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
  margin-bottom: 0;
}
.mapboxgl-ctrl-group {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}

/* Glass style for +/- map zoom control */
.mapboxgl-ctrl-top-left > .mapboxgl-ctrl.mapboxgl-ctrl-group:not(.map-tilt-ctrl):not(.map-zoom-world-ctrl) {
  background: var(--ui-map-zoom-group-bg);
  border: 1px solid var(--ui-map-zoom-group-border);
  border-radius: var(--ui-map-zoom-group-radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--ui-map-zoom-group-shadow);
  transform: translateY(0);
}
.mapboxgl-ctrl-top-left > .mapboxgl-ctrl.mapboxgl-ctrl-group:not(.map-tilt-ctrl):not(.map-zoom-world-ctrl)
  button.mapboxgl-ctrl-zoom-in,
.mapboxgl-ctrl-top-left > .mapboxgl-ctrl.mapboxgl-ctrl-group:not(.map-tilt-ctrl):not(.map-zoom-world-ctrl)
  button.mapboxgl-ctrl-zoom-out {
  color: var(--ui-map-zoom-btn-color);
  background: transparent;
}
.mapboxgl-ctrl-top-left > .mapboxgl-ctrl.mapboxgl-ctrl-group:not(.map-tilt-ctrl):not(.map-zoom-world-ctrl)
  .mapboxgl-ctrl-icon {
  filter: var(--ui-map-zoom-btn-icon-filter);
}
.mapboxgl-ctrl-top-left > .mapboxgl-ctrl.mapboxgl-ctrl-group:not(.map-tilt-ctrl):not(.map-zoom-world-ctrl)
  button.mapboxgl-ctrl-zoom-in:hover,
.mapboxgl-ctrl-top-left > .mapboxgl-ctrl.mapboxgl-ctrl-group:not(.map-tilt-ctrl):not(.map-zoom-world-ctrl)
  button.mapboxgl-ctrl-zoom-out:hover {
  background: var(--ui-map-zoom-btn-hover-bg);
}

/* World overview (under +/-) — inward arrows, no glass circle */
.mapboxgl-ctrl.map-zoom-world-ctrl {
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transform: translateY(0);
  width: 100%;
  height: 38px;
  padding: 0;
  margin-top: 4px;
  overflow: visible;
  justify-self: stretch;
}
.map-zoom-world-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ui-map-zoom-btn-color);
  cursor: pointer;
  line-height: 0;
  transition: transform 0.15s ease, opacity 0.2s ease, filter 0.15s ease;
}
.map-zoom-world-btn:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(58, 166, 255, 0.55));
}
.map-zoom-world-btn.is-at-world {
  opacity: 0.5;
  cursor: default;
}
.map-zoom-world-btn.is-at-world:hover {
  transform: none;
  filter: none;
}
.map-zoom-world-icon {
  width: 32px;
  height: 32px;
  display: block;
  margin: 0 auto;
  flex-shrink: 0;
  filter: var(--ui-map-zoom-icon-filter);
}

/* Put the 2D/3D button inside Mapbox controls */
.mapboxgl-ctrl.map-tilt-ctrl {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 0;
  background: transparent;
  box-shadow: none;
  border: none;
}
.mapboxgl-ctrl.map-tilt-ctrl .map-toggle-btn {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  width: var(--ui-map-ctrl-btn-size);
  height: var(--ui-map-ctrl-btn-size);
  padding: 0;
  text-align: center;
  line-height: var(--ui-map-ctrl-btn-size);
  background: var(--ui-map-ctrl-btn-bg);
  border: 1px solid var(--ui-map-ctrl-btn-border);
  border-radius: var(--ui-map-ctrl-btn-radius);
  color: var(--ui-map-ctrl-btn-color);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: var(--ui-map-ctrl-btn-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateY(0);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease,
    background 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.mapboxgl-ctrl.map-tilt-ctrl .map-toggle-btn:hover {
  transform: translateY(-1px);
  border-color: var(--ui-map-ctrl-btn-hover-border);
  box-shadow: var(--ui-map-ctrl-btn-hover-shadow);
}
.mapboxgl-ctrl.map-tilt-ctrl .map-settings-btn {
  font-size: 18px;
  letter-spacing: normal;
}
.mapboxgl-ctrl.map-tilt-ctrl .map-settings-btn.is-active,
.mapboxgl-ctrl.map-tilt-ctrl .map-toggle-btn.is-active {
  border-color: var(--ui-map-ctrl-btn-active-border);
  background: var(--ui-map-ctrl-btn-active-bg);
  box-shadow: var(--ui-map-ctrl-btn-active-shadow);
}
.map-settings-item--unavailable {
  opacity: 0.42;
  pointer-events: none;
  filter: grayscale(0.35);
}
.map-settings-item--unavailable .map-settings-hint {
  color: var(--ui-map-settings-unavail-hint-color);
}
.mapboxgl-ctrl.map-tilt-ctrl .map-settings-btn i {
  line-height: 1;
}
.map-settings-panel {
  position: absolute;
  top: 108px;
  left: 154px;
  z-index: 1300;
  width: min(268px, calc(100vw - 180px));
  max-height: min(72vh, 560px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border-radius: var(--radius-window);
  border: var(--window-border-width) solid var(--window-border-color);
  background: var(--map-settings-bg);
  color: var(--map-settings-text);
  box-shadow: var(--window-shadow-depth);
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  filter: blur(1px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.22s ease, filter 0.22s ease,
    visibility 0.22s ease;
}
.map-settings-panel.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  visibility: visible;
  pointer-events: auto;
}

.map-settings-head {
  position: relative;
  flex-shrink: 0;
  padding: calc(var(--ui-chrome-inset) + var(--ui-chrome-size) + 14px) 12px 16px;
  border-bottom: 1px solid var(--map-settings-head-border);
  text-align: center;
}

.map-settings-save-row {
  display: flex;
  justify-content: center;
  margin-top: 6px;
  padding-bottom: 4px;
}

.map-settings-head .map-settings-close-btn.ui-close {
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
}

.map-settings-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px 12px 12px;
  scrollbar-gutter: stable;
}

.map-settings-body::-webkit-scrollbar-track {
  margin-block: var(--mnm-scroll-rail-inset, 14px);
  background: transparent;
  border-radius: 99px;
}

.map-settings-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--map-settings-text);
  margin: 6px 0 0;
  padding: 0;
  text-align: center;
  width: 100%;
}
.map-settings-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: var(--map-settings-text);
  padding: 6px 0;
  border-bottom: 1px solid var(--map-settings-item-border);
  cursor: pointer;
}
.map-settings-body .map-settings-item--hint:last-of-type {
  border-bottom: none;
}
.map-settings-label {
  display: block;
  font-size: 11px;
  line-height: 1.3;
  color: var(--map-settings-text);
}
.map-settings-item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.map-settings-item--hint input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}
.map-settings-item--stack {
  align-items: stretch;
  flex-direction: column;
  gap: 5px;
}
.map-settings-select {
  width: 100%;
  min-height: 28px;
  border-radius: 8px;
  border: 1px solid var(--map-settings-input-border);
  background: var(--map-settings-input-bg);
  color: var(--map-settings-input-text);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 8px;
  outline: none;
  color-scheme: var(--ui-map-settings-color-scheme, dark);
}
.map-settings-select option {
  background: var(--map-settings-bg);
  color: var(--map-settings-input-text);
}
.map-settings-select:focus-visible {
  border-color: var(--ui-map-settings-select-focus-border);
  box-shadow: var(--ui-map-settings-select-focus-glow);
}
.map-settings-item input[type="checkbox"] {
  accent-color: var(--green, #7dfc8a);
  width: 14px;
  height: 14px;
}
.map-settings-section-title {
  margin-top: 10px;
  margin-bottom: 4px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--map-settings-text-dim);
}

.map-settings-body > .map-settings-section-title:first-child {
  margin-top: 0;
}
.map-theme-seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 8px;
}
.map-theme-seg-btn {
  min-width: 0;
  padding: 6px 4px;
  border-radius: 7px;
  border: 1px solid var(--map-settings-seg-border);
  background: var(--map-settings-seg-bg);
  color: var(--map-settings-seg-text);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.map-theme-seg-btn:hover {
  border-color: var(--ui-map-settings-seg-hover-border);
  background: var(--ui-map-settings-seg-hover-bg);
}
.map-theme-seg-btn.is-active {
  border-color: var(--map-settings-seg-active-border);
  background: var(--map-settings-seg-active-bg);
  color: var(--ui-map-settings-seg-active-text);
  box-shadow: 0 0 10px rgba(143, 211, 255, 0.22);
}
.map-settings-save-btn {
  min-width: 0;
  min-height: 26px;
  padding: 3px 12px;
  border-radius: 8px;
  font-size: 8px;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid var(--map-settings-save-border);
  background: var(--map-settings-save-bg);
  color: var(--map-settings-save-text);
  box-sizing: border-box;
}
.map-settings-save-btn:hover {
  border-color: rgba(143, 211, 255, 0.8);
  box-shadow: 0 0 10px rgba(143, 211, 255, 0.28);
}
.map-settings-close-btn {
  cursor: pointer;
  z-index: 2;
}
.map-settings-reset-btn {
  width: 100%;
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(143, 211, 255, 0.28);
  background: rgba(143, 211, 255, 0.14);
  color: #e8f2ff;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.map-settings-reset-btn:hover {
  background: rgba(143, 211, 255, 0.24);
  border-color: rgba(143, 211, 255, 0.52);
}

.map-time-machine {
  position: absolute;
  left: 12px;
  bottom: var(--map-floating-bottom, 40px);
  z-index: 12;
  width: min(268px, calc(100% - 24px));
  height: var(--map-chat-collapsed-height, 44px);
  box-sizing: border-box;
  padding: 0 8px 0 10px;
  display: flex;
  align-items: center;
  border: 1px solid var(--ui-time-machine-border);
  background: var(--ui-time-machine-bg);
  box-shadow: var(--ui-time-machine-shadow);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-md, 12px);
  pointer-events: auto;
}

.map-time-machine-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 0;
}

.map-time-title {
  flex: 0 0 46px;
  margin: 0;
  text-align: center;
  font-size: 7px;
  line-height: 1.12;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-time-machine-title);
  word-break: break-word;
}

#timeSlider {
  flex: 1;
  min-width: 0;
  width: auto;
  height: 18px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: auto !important;
  cursor: pointer;
  position: relative;
  z-index: 25;
}

/* TIME MACHINE — трек и бегунок в синем неоне (без светлой полосы) */
#timeSlider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ui-time-slider-track);
  border: 1px solid var(--ui-time-slider-track-border);
  box-shadow: var(--ui-time-slider-track-shadow);
}

#timeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--ui-time-slider-thumb);
  border: 2px solid var(--ui-time-slider-thumb-border);
  box-shadow: var(--ui-time-slider-thumb-glow);
  cursor: grab;
}

#timeSlider:active::-webkit-slider-thumb {
  cursor: grabbing;
}

#timeSlider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--ui-time-slider-track);
  border: 1px solid var(--ui-time-slider-track-border);
}

#timeSlider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ui-time-slider-thumb-solid);
  border: 2px solid var(--ui-time-slider-thumb-border);
  box-shadow: var(--ui-time-slider-thumb-glow);
  cursor: grab;
}

/* Прочие range в проекте */
input[type="range"]:not(#timeSlider) {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 20px;
}

input[type="range"]:not(#timeSlider)::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(2, 12, 16, 0.92);
  border: 1px solid rgba(58, 166, 255, 0.28);
}

input[type="range"]:not(#timeSlider)::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: #3aa6ff;
  border: 2px solid rgba(180, 230, 255, 0.9);
  box-shadow: 0 0 10px rgba(58, 166, 255, 0.65);
}

input[type="range"]:not(#timeSlider)::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: rgba(2, 12, 16, 0.92);
  border: 1px solid rgba(58, 166, 255, 0.28);
}

input[type="range"]:not(#timeSlider)::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #3aa6ff;
  border: 2px solid rgba(180, 230, 255, 0.9);
}

.map-time-label {
  flex: 0 0 36px;
  margin: 0;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ui-map-time-label);
  line-height: 1.1;
}

.map-time-all-btn {
  flex: 0 0 auto;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  font-size: 8px;
  letter-spacing: 0.1em;
}

/* Глобальная панель пользователей над TIME MACHINE */
.map-users-panel {
  position: absolute;
  left: 12px;
  bottom: calc(
    var(--map-floating-bottom, 40px) + var(--map-chat-collapsed-height, 44px) + 10px
  );
  width: min(280px, calc(100% - 24px));
  max-height: 220px;
  padding: 10px 12px 8px;
  border-radius: 14px;
  background: radial-gradient(circle at 0 0, rgba(40, 80, 60, 0.55), rgba(8, 16, 12, 0.9));
  border: 1px solid rgba(120, 200, 150, 0.7);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(230, 255, 240, 0.08),
    inset 0 -2px 6px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  display: none;
  flex-direction: column;
  gap: 6px;
  z-index: 13;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity 0.25s ease-out,
    transform 0.25s ease-out;
}

.map-users-panel.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.map-users-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 32px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(230, 255, 245, 0.9);
}

.map-users-title {
  opacity: 0.85;
}

.map-users-close {
  cursor: pointer;
}

.map-users-body {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(120, 200, 150, 0.4);
  max-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 11px;
}

.map-users-body::-webkit-scrollbar {
  width: 7px;
}

.map-users-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 2px 0;
}

.map-users-row span:first-child {
  color: rgba(230, 255, 245, 0.9);
}

.map-users-row span:last-child {
  color: rgba(170, 230, 190, 0.9);
}

/* BIRTHDAY OVERLAY */
.birthday-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 20% 0, rgba(255, 215, 0, 0.35), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(0, 200, 255, 0.35), transparent 55%),
    rgba(0, 0, 0, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.birthday-overlay.is-visible {
  display: flex;
}

.birthday-content {
  text-align: center;
  color: #fefdfb;
  max-width: 640px;
  padding: 32px 40px;
  border-radius: 20px;
  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.09), transparent 55%),
    linear-gradient(145deg, rgba(20, 40, 40, 0.85), rgba(5, 12, 10, 0.95));
  border: 1px solid rgba(160, 220, 190, 0.9);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(250, 255, 255, 0.25),
    inset 0 -10px 30px rgba(0, 0, 0, 0.8);
}

.birthday-salute {
  font-size: 26px;
  letter-spacing: 0.4em;
  margin-bottom: 10px;
  color: rgba(255, 240, 180, 0.9);
  text-shadow:
    0 0 10px rgba(255, 230, 160, 0.9),
    0 0 30px rgba(255, 128, 64, 0.8);
}

.birthday-title {
  font-size: 26px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.birthday-text {
  font-size: 15px;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.place-title span,
.place-city-name {
  cursor: pointer;
}

/* Strong "this is clickable" hover for Node Log titles */
.place-city:hover .place-city-name,
.place-item.place-country:hover .place-title span {
  color: var(--ui-node-city-hover-title-color);
  text-shadow: var(--ui-node-city-hover-title-shadow);
}

.place-city:hover .place-city-name .place-rating-inline {
  filter: drop-shadow(0 0 8px rgba(58, 166, 255, 0.35));
}

.custom-marker--custom-named {
  /* legacy alias */
}

.custom-marker--custom-pin,
.map-custom-pin-marker {
  width: 30px;
  height: 39px;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
  cursor: pointer;
}

.custom-marker-pin-svg {
  display: block;
  width: 30px;
  height: 39px;
  pointer-events: none;
}

.custom-marker-pin-num {
  display: none;
}

.node-log-map-chip--pin {
  width: 15px;
  height: 19px;
  margin-left: 11px;
  margin-right: 8px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(145deg, #ff6b6b, #c62828);
  border: 1.5px solid rgba(30, 30, 30, 0.85);
  box-shadow: 0 2px 6px rgba(255, 60, 60, 0.45);
  color: #fff;
}

.node-log-map-chip--pin .node-log-map-chip-num {
  display: block;
  transform: rotate(45deg);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  margin-top: 1px;
}

.left-panel .place-city--custom-pin.place-city--active .place-city-name .node-log-map-chip--pin {
  margin-left: 12px;
}

.place-custom-pins-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px 4px;
  margin-top: 6px;
  border-top: 1px dashed rgba(255, 100, 100, 0.35);
}

.place-custom-pins-kicker {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 150, 150, 0.95);
  font-weight: 700;
}

.place-custom-pins-meta {
  font-size: 9px;
  opacity: 0.65;
}

.place-city--custom-pin {
  border-left: 2px solid rgba(255, 90, 90, 0.55);
  background: rgba(40, 12, 12, 0.22);
}

.left-panel .place-city--custom-pin .place-city-main {
  padding-left: 12px;
}

.left-panel .place-city--custom-pin .node-log-map-chip--pin {
  margin-left: 2px;
}

.left-panel .place-city--custom-pin .node-log-photo-chip {
  height: 24px;
  min-height: 24px;
  padding: 0 4px;
  font-size: 6px;
}

.left-panel .place-city--custom-pin .node-log-photo-chip .fa-image {
  font-size: 11px;
  line-height: 1;
}

.left-panel .place-city--custom-pin .node-log-photo-chip .node-gallery-count {
  font-size: 9px;
}

.place-city-card--pin .place-city-pin-note {
  font-size: 11px;
  opacity: 0.85;
}

.place-city-card-photos--pin {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
  padding-left: 2px;
}

.place-city-pin-photo {
  padding: 0;
  border: 1px solid rgba(255, 120, 120, 0.35);
  border-radius: 8px;
  overflow: hidden;
  width: 52px;
  height: 40px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.25);
}

.place-city-pin-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.node-type-badge--pin {
  background: rgba(255, 72, 72, 0.25);
  color: #ffb4b4;
  border-color: rgba(255, 120, 120, 0.45);
}

.country-hub-custom-pin-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.country-hub-custom-pin-photo {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  display: block;
}

.country-hub-custom-pin-photo img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
}

.country-hub-custom-pin-text h4 {
  margin: 0 0 8px;
}

.country-hub-about--pin {
  margin: 0 0 12px;
}

.country-hub-pin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.country-hub-pin-meta__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(110, 255, 200, 0.28);
  background: rgba(8, 18, 14, 0.72);
  color: rgba(220, 248, 238, 0.94);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.country-hub-pin-meta__chip--muted {
  border-color: rgba(143, 211, 255, 0.22);
  color: rgba(180, 210, 230, 0.82);
}

.country-hub-pin-meta__chip--slot {
  border-color: rgba(125, 252, 138, 0.34);
  color: rgba(170, 255, 200, 0.92);
}

.country-hub-custom-pin-detail {
  display: grid;
  gap: 12px;
}

.country-hub-pin-note {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(90, 150, 110, 0.28);
  background: linear-gradient(135deg, rgba(8, 16, 14, 0.88), rgba(12, 8, 14, 0.82));
  color: rgba(236, 250, 244, 0.92);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 180px;
  overflow: auto;
}

.country-hub-pin-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.country-hub-pin-rating-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(160, 200, 220, 0.78);
}

.country-hub-pin-add-photos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(125, 252, 138, 0.32);
  background: rgba(8, 20, 14, 0.72);
  color: rgba(200, 255, 220, 0.94);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.country-hub-pin-add-photos:hover,
.country-hub-pin-add-photos:focus-visible {
  border-color: rgba(125, 252, 138, 0.55);
  box-shadow: 0 0 18px rgba(72, 220, 160, 0.14);
}

.mnm-guided-tour {
  position: fixed;
  inset: 0;
  z-index: 20000;
  pointer-events: none;
  --mnm-tour-line: rgba(125, 255, 200, 0.88);
  --mnm-tour-line-w: 2.25px;
  --mnm-tour-line-dash: 7 5;
  --mnm-tour-card-inner: rgba(125, 252, 138, 0.44);
  --mnm-tour-card-inner-w: 1px;
  --mnm-tour-card-frame-gap: 5px;
}

/* Root stays pointer-events:none — only panels + card capture clicks (hole passes through to map/iframe) */
.mnm-guided-tour:not([hidden]) {
  pointer-events: none;
}

.mnm-guided-tour__panels {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.mnm-guided-tour__panel {
  position: fixed;
  background: var(--mnm-tour-panel-bg, rgba(2, 8, 6, 0.3));
  pointer-events: auto;
  /* Only fade dim panels — "all" made hole/highlight feel laggy mid-tour */
  transition:
    opacity 0.18s ease,
    background 0.18s ease;
}

.mnm-guided-tour__vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--mnm-tour-vignette-bg, rgba(2, 8, 6, 0.28));
  pointer-events: auto;
  transition: opacity 0.35s ease;
}

.mnm-guided-tour__vignette.is-circle {
  background: var(--mnm-tour-vignette-bg, rgba(2, 8, 6, 0.32));
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    circle at var(--hole-cx) var(--hole-cy),
    transparent calc(var(--hole-r) - 1px),
    #000 calc(var(--hole-r) + 0.5px)
  );
  mask-image: radial-gradient(
    circle at var(--hole-cx) var(--hole-cy),
    transparent calc(var(--hole-r) - 1px),
    #000 calc(var(--hole-r) + 0.5px)
  );
}

.mnm-guided-tour__neon {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  box-sizing: border-box;
  border: none;
  background: transparent;
  overflow: hidden;
  border-radius: 8px;
  filter: drop-shadow(0 0 4px rgba(93, 255, 184, 0.16));
}

.mnm-guided-tour__neon--compact {
  filter: none;
}

.mnm-guided-tour__neon-dash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.mnm-guided-tour__neon-dash-rect {
  fill: none;
  stroke: var(--mnm-tour-line);
  stroke-width: var(--mnm-tour-line-w);
  stroke-dasharray: 8 6;
  stroke-linecap: round;
  animation: mnm-tour-target-dash-march 1.1s linear infinite;
}

.mnm-guided-tour__neon--compact .mnm-guided-tour__neon-dash-rect {
  stroke-width: 1.5px;
  stroke-dasharray: 5 4;
  stroke-linecap: butt;
  animation-duration: 0.95s;
}

.mnm-guided-tour__neon--sz-s .mnm-guided-tour__neon-dash-rect {
  stroke-width: 1.5px;
}

.mnm-guided-tour__neon--circle {
  border-radius: 50%;
}

.mnm-guided-tour__shield {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  background: rgba(2, 6, 5, 0.74);
}

.mnm-guided-tour__shield--frame {
  background: rgba(2, 6, 5, 0.55);
}

.mnm-guided-tour__hole-blocker {
  position: fixed;
  z-index: 1;
  pointer-events: auto;
  background: transparent;
}

@keyframes mnm-tour-rotor-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes mnm-tour-rotor-hue {
  0%,
  100% {
    filter: hue-rotate(0deg) saturate(1.04) brightness(1.04);
  }
  50% {
    filter: hue-rotate(12deg) saturate(1.14) brightness(1.1);
  }
}

@keyframes mnm-tour-bloom-breathe {
  0%,
  100% {
    opacity: 0.48;
  }
  50% {
    opacity: 0.72;
  }
}

.mnm-guided-tour-target {
  z-index: 20002 !important;
  isolation: isolate;
  outline: none !important;
  box-shadow: none !important;
  filter: brightness(1.06) saturate(1.04);
}

/* Tour highlight must not override map-corner absolute positioning */
.tomato-battle-icon.mnm-guided-tour-target,
.map-time-machine.mnm-guided-tour-target,
.map-status-chip.mnm-guided-tour-target {
  position: absolute !important;
}

/* Mapbox tilt cluster: keep flex layout — legacy .map-toggle-btn is position:absolute */
body.mnm-guided-tour-active .mapboxgl-ctrl.map-tilt-ctrl .map-toggle-btn.mnm-guided-tour-target,
body.mnm-guided-tour-active .mapboxgl-ctrl.map-tilt-ctrl .map-settings-btn.mnm-guided-tour-target,
body.mnm-guided-tour-active #toggle3d.mnm-guided-tour-target,
body.mnm-guided-tour-active #mapSettingsBtn.mnm-guided-tour-target {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

.mnm-guided-tour__card {
  position: fixed;
  width: min(420px, calc(100vw - 32px));
  padding: 20px 20px 16px;
  border-radius: 18px;
  background:
    linear-gradient(168deg, rgba(12, 32, 24, 0.97) 0%, rgba(5, 14, 10, 0.99) 52%, rgba(3, 9, 7, 1) 100%);
  border: none;
  box-shadow:
    0 26px 64px rgba(0, 0, 0, 0.72),
    0 0 0 1px rgba(125, 255, 200, 0.04);
  transition: opacity 0.12s ease;
  z-index: 4;
  pointer-events: auto;
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  overflow: visible;
  isolation: isolate;
}

.mnm-guided-tour__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 88% at 10% -8%, rgba(125, 255, 200, 0.11), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 28%);
  opacity: 0.95;
}

.mnm-guided-tour__card-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}

.mnm-guided-tour__card-frame-inner {
  fill: none;
  stroke: var(--mnm-tour-card-inner);
  stroke-width: var(--mnm-tour-card-inner-w);
  vector-effect: non-scaling-stroke;
}

.mnm-guided-tour__card-frame-rect {
  fill: none;
  stroke: var(--mnm-tour-line);
  stroke-width: var(--mnm-tour-line-w);
  stroke-dasharray: var(--mnm-tour-line-dash);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(93, 255, 184, 0.22));
}

.mnm-guided-tour__card .mnm-guided-tour__progress,
.mnm-guided-tour__card .mnm-guided-tour__title,
.mnm-guided-tour__card .mnm-guided-tour__body,
.mnm-guided-tour__card .mnm-guided-tour__hint,
.mnm-guided-tour__card .mnm-guided-tour__actions {
  position: relative;
  z-index: 2;
}

body.mnm-guided-tour-active .mnm-guided-tour__card {
  transition: opacity 0.12s ease !important;
}

.mnm-guided-tour.is-scene-loading .mnm-guided-tour__vignette {
  opacity: 0.72;
  filter: brightness(0.88);
}

.mnm-guided-tour.is-scene-loading--soft .mnm-guided-tour__vignette {
  opacity: 0.28;
  filter: none;
}

/* Keep card readable while scenes settle — never a blank tip with only buttons */
.mnm-guided-tour__card--scene-loading,
.mnm-guided-tour__card--scene-loading-soft {
  opacity: 1;
  pointer-events: auto;
  animation: none !important;
  transform: none !important;
}

/* Hidden until positionCard runs — kills left→center jump between steps */
.mnm-guided-tour__card--layout-pending {
  visibility: hidden !important;
  pointer-events: none !important;
}

.mnm-guided-tour__card--enter {
  animation: mnm-tour-card-scene-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mnm-guided-tour__card--center.mnm-guided-tour__card--enter,
.mnm-guided-tour__card--float.mnm-guided-tour__card--enter,
.mnm-guided-tour__card--map-center.mnm-guided-tour__card--enter,
.mnm-guided-tour__card--globe-left.mnm-guided-tour__card--enter,
.mnm-guided-tour__card--tomato-dock.mnm-guided-tour__card--enter {
  animation: mnm-tour-card-fade-in 0.18s ease both;
}

@keyframes mnm-tour-card-scene-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.mnm-guided-tour__neon--step-in {
  animation: none;
}

.mnm-guided-tour__link-path--draw {
  animation: none;
}

@keyframes mnm-tour-link-draw {
  from {
    stroke-dashoffset: 48;
    opacity: 0.2;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mnm-guided-tour__card--scene-loading,
  .mnm-guided-tour__card--enter,
  .mnm-guided-tour__neon--step-in,
  .mnm-guided-tour__neon-dash-rect,
  .mnm-guided-tour__link-path--draw {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.mnm-guided-tour__actions .btn-main,
.mnm-guided-tour__actions .btn-ghost {
  pointer-events: auto;
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mnm-guided-tour__actions .btn-ghost {
  border: 1px dashed rgba(125, 255, 200, 0.42) !important;
  background: rgba(4, 12, 9, 0.78) !important;
  color: rgba(196, 228, 210, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mnm-guided-tour__actions .btn-ghost:hover {
  border-color: rgba(125, 255, 200, 0.58) !important;
  color: rgba(224, 255, 238, 0.94) !important;
}

.mnm-guided-tour__actions .btn-main {
  border: 1px solid rgba(125, 255, 200, 0.72) !important;
  background: linear-gradient(180deg, rgba(18, 52, 38, 0.96), rgba(8, 28, 20, 0.98)) !important;
  color: rgba(198, 255, 224, 0.98) !important;
  box-shadow:
    0 0 14px rgba(93, 255, 184, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.mnm-guided-tour__actions .btn-main:hover {
  border-color: rgba(145, 255, 210, 0.88) !important;
  box-shadow:
    0 0 18px rgba(93, 255, 184, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mnm-guided-tour__progress {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(125, 255, 200, 0.72);
  margin-bottom: 10px;
}

.mnm-guided-tour__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(236, 255, 246, 0.98);
  text-shadow: 0 0 18px rgba(93, 255, 184, 0.12);
}

.mnm-guided-tour__body {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.58;
  color: rgba(214, 242, 226, 0.9);
}

.mnm-guided-tour__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body.mnm-guided-tour-active {
  overflow: hidden;
}

/* Hide static green panel seams while tour neon is active — avoids double contour */
body.mnm-guided-tour-active .left-panel::after,
body.mnm-guided-tour-active #rightPanel.right-panel::after,
body.mnm-guided-tour-active #countryHubPanel.country-hub-panel::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Rainbow neon is the single contour language — no second green seam */
.mnm-guided-tour-panel-scope {
  outline: none !important;
  box-shadow: none !important;
  animation: none !important;
}

body.mnm-guided-tour--panel-scope-step:not(.mnm-guided-tour--panel-neon)
  .mnm-guided-tour__neon:not(.mnm-guided-tour__neon--extra) {
  display: none !important;
}

/* Prefer rainbow rotor over static green outlines on map-settings / hub */
body.mnm-guided-tour-active #mapSettingsPanel.is-open.mnm-guided-tour-target,
body.mnm-guided-tour-active #mapSettingsPanel.is-open.mnm-guided-tour-panel-scope,
body.mnm-guided-tour-map-settings-open .map-settings-panel.is-open,
body.mnm-guided-tour-active #countryHubPanel.mnm-guided-tour-target,
body.mnm-guided-tour-active #countryHubPanel.mnm-guided-tour-panel-scope,
body.mnm-guided-tour-active .right-panel-wrapper.mnm-guided-tour-target,
body.mnm-guided-tour-active .right-panel-wrapper.mnm-guided-tour-panel-scope {
  outline: none !important;
}

/* Tour: hub must be fully on-screen — CSS slide/fade otherwise leaves a black hole */
body.mnm-guided-tour-active .right-panel-wrapper.country-hub-open #countryHubPanel {
  display: flex !important;
  transition: none !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

@keyframes mnm-tour-panel-scope-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 1px rgba(93, 255, 184, 0.18),
      0 0 20px rgba(93, 255, 184, 0.22);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(93, 255, 184, 0.32),
      0 0 34px rgba(93, 255, 184, 0.38);
  }
}

body.mnm-guided-tour-tb-wait-pick .mnm-guided-tour__panels,
body.mnm-guided-tour-tb-wait-pick .mnm-guided-tour__vignette,
body.mnm-guided-tour-tb-wait-pick .mnm-guided-tour__hole-blocker {
  pointer-events: none !important;
}

body.mnm-guided-tour-tb-wait-pick .mnm-tour-tomato-shell.is-open {
  z-index: 20010 !important;
  pointer-events: auto !important;
}

body.mnm-guided-tour-tb-wait-pick .mnm-tour-tomato-shell.is-open iframe {
  pointer-events: auto !important;
}

body.mnm-guided-tour-active #myPageScreen.mnm-guided-tour-target,
body.mnm-guided-tour-active #myPageScreen.mnm-guided-tour-panel-scope {
  pointer-events: none !important;
}

body.mnm-guided-tour-wait-click #myPageScreen.mnm-guided-tour-target {
  pointer-events: auto !important;
}

html.mnm-guided-tour-lock-app .app-shell,
html.mnm-guided-tour-lock-app .neon-frame,
html.mnm-guided-tour-lock-app .left-panel,
html.mnm-guided-tour-lock-app #rightPanel,
html.mnm-guided-tour-lock-app #countryHubPanel,
html.mnm-guided-tour-lock-app .right-panel-wrapper,
html.mnm-guided-tour-lock-app .map-panel,
html.mnm-guided-tour-lock-app .tomato-battle-icon,
html.mnm-guided-tour-lock-app .map-toggle-btn,
html.mnm-guided-tour-lock-app .map-settings-btn,
html.mnm-guided-tour-lock-app .map-time-machine,
html.mnm-guided-tour-lock-app .map-status-chip,
html.mnm-guided-tour-lock-app #quickActions,
html.mnm-guided-tour-lock-app #myPageScreen {
  pointer-events: none !important;
  user-select: none;
}

body.mnm-guided-tour-wait-click .mnm-guided-tour-target,
body.mnm-guided-tour-wait-click #countryHubPanel .mnm-guided-tour-target,
body.mnm-guided-tour-wait-click #countryHubPanel .mnm-guided-tour-target * {
  pointer-events: auto !important;
}

/* Tomato shell stays click-through during tour except wait-pick steps */
body.mnm-guided-tour-active .mnm-tour-tomato-shell.is-open {
  pointer-events: none !important;
}

body.mnm-guided-tour-tb-wait-pick .mnm-tour-tomato-shell.is-open,
body.mnm-guided-tour-tb-wait-pick .mnm-tour-tomato-shell.is-open iframe {
  pointer-events: auto !important;
}

body.mnm-guided-tour-active .mnm-guided-tour-target {
  position: relative;
  z-index: 20003;
  filter: brightness(1.1) saturate(1.05);
  outline: none !important;
  box-shadow: none !important;
}

body.mnm-guided-tour-active .map-tilt-ctrl.mnm-guided-tour-target,
body.mnm-guided-tour-active .map-tilt-ctrl .mnm-guided-tour-target,
body.mnm-guided-tour-active #toggle3d.mnm-guided-tour-target,
body.mnm-guided-tour-active #mapSettingsBtn.mnm-guided-tour-target {
  filter: brightness(1.14) saturate(1.08);
  z-index: 20004 !important;
  outline: none !important;
  box-shadow: none !important;
}

body.mnm-guided-tour-overlay-light .mnm-guided-tour__vignette {
  background: rgba(2, 8, 6, 0.16) !important;
}

body.mnm-guided-tour-overlay-light .mnm-guided-tour__panel {
  background: rgba(2, 8, 6, 0.14) !important;
}

.country-hub-panel-scroll.mnm-guided-tour-hub-scroll-locked {
  overflow: hidden !important;
  overscroll-behavior: contain;
}

body.mnm-guided-tour-active .mapboxgl-ctrl-top-left {
  z-index: 20002 !important;
}

body.mnm-guided-tour-active #countryHubPanel.mnm-guided-tour-target,
body.mnm-guided-tour-active #countryHubPanel.mnm-guided-tour-panel-scope {
  filter: brightness(1.08) saturate(1.06);
  z-index: 20004 !important;
  outline: none !important;
  box-shadow: none !important;
}

body.mnm-guided-tour-active .right-panel-wrapper.mnm-guided-tour-target,
body.mnm-guided-tour-active .right-panel-wrapper.mnm-guided-tour-panel-scope,
body.mnm-guided-tour-active #rightPanel.mnm-guided-tour-target,
body.mnm-guided-tour-active #rightPanel.mnm-guided-tour-panel-scope,
body.mnm-guided-tour-active #quickActions.mnm-guided-tour-target,
body.mnm-guided-tour-active #quickActions.mnm-guided-tour-panel-scope {
  filter: brightness(1.06) saturate(1.05);
  z-index: 20004 !important;
  position: relative;
  outline: none !important;
  box-shadow: none !important;
  animation: none !important;
}

body.mnm-guided-tour-map-settings-open .map-settings-panel.is-open {
  top: 150px;
  left: 164px;
  max-height: min(68vh, 520px);
}

body.mnm-guided-tour-map-settings-open .map-tilt-ctrl {
  z-index: 20010 !important;
}

body.mnm-guided-tour-map-settings-open .map-tilt-ctrl #toggle3d {
  opacity: 1 !important;
  visibility: visible !important;
}

body.mnm-guided-tour-active #mapSettingsPanel.is-open.mnm-guided-tour-target,
body.mnm-guided-tour-active #mapSettingsPanel.is-open.mnm-guided-tour-panel-scope,
body.mnm-guided-tour-map-settings-open .map-settings-panel.is-open {
  z-index: 20005 !important;
  filter: brightness(1.1) saturate(1.06);
  outline: none !important;
  box-shadow: none !important;
}

body.mnm-guided-tour-active #mapSettingsBtn.mnm-guided-tour-target {
  z-index: 20006 !important;
}

body.mnm-guided-tour-active #countryHubPanel .country-hub-link-btn.mnm-guided-tour-target {
  cursor: pointer;
  z-index: 20004 !important;
}

body.mnm-guided-tour-active .mnm-guided-tour__card,
body.mnm-guided-tour-active .mnm-guided-tour__card * {
  pointer-events: auto;
}

body.mnm-guided-tour-mypage-active .mnm-guided-tour {
  z-index: 25000 !important;
}

body.mnm-guided-tour-mypage-active #myPageScreen .mnm-guided-tour-target,
body.mnm-guided-tour-mypage-active #myPageScreen .my-page-nav.mnm-guided-tour-target,
body.mnm-guided-tour-mypage-active #myPageScreen #myPageViewFeed.mnm-guided-tour-target,
body.mnm-guided-tour-mypage-active #myPageScreen #myPageAvatarImg.mnm-guided-tour-target {
  position: relative;
  z-index: 25002 !important;
}

body.mnm-guided-tour-mypage-active .mnm-guided-tour__hint {
  color: rgba(93, 255, 184, 0.92);
  font-size: 11px;
  margin-top: 8px;
  line-height: 1.45;
}

body.mnm-guided-tour-map-pick .map-panel,
body.mnm-guided-tour-map-pick .map-panel .mapboxgl-canvas-container {
  pointer-events: auto !important;
}

body.mnm-guided-tour-terminal-step .terminal-overlay.visible {
  z-index: 19950;
  pointer-events: auto !important;
}

body.mnm-guided-tour-terminal-step:not(.mnm-guided-tour-wait-click) .terminal-overlay.visible,
body.mnm-guided-tour-terminal-step:not(.mnm-guided-tour-wait-click) .terminal-overlay.visible * {
  pointer-events: auto !important;
}

body.mnm-guided-tour-terminal-step.mnm-guided-tour-wait-click .terminal-overlay.visible * {
  pointer-events: none !important;
}

body.mnm-guided-tour-terminal-step.mnm-guided-tour-wait-click #terminalSaveBtn {
  pointer-events: auto !important;
  position: relative;
  z-index: 20006 !important;
}

body.mnm-guided-tour-terminal-step:not(.mnm-guided-tour-wait-click) #terminalCloseBtn {
  pointer-events: none !important;
  opacity: 0.35;
}

body.mnm-guided-tour-delete-step .places-panel {
  pointer-events: none !important;
}

body.mnm-guided-tour-delete-step .places-panel .place-delete.mnm-guided-tour-target,
body.mnm-guided-tour-delete-step .places-panel .place-delete.mnm-guided-tour-target * {
  pointer-events: auto !important;
}

body.mnm-guided-tour-finish-step .mnm-guided-tour__shield {
  background: rgba(0, 0, 0, 0.72);
}

.mnm-guided-tour--terminal .mnm-guided-tour__neon {
  z-index: 20004;
}

.mnm-guided-tour--terminal .mnm-guided-tour__card {
  z-index: 20005;
}

.mnm-guided-tour__neon--fit-target {
  overflow: hidden;
}

.mnm-guided-tour__neon--pulse-strong .mnm-guided-tour__neon-dash-rect {
  animation-duration: 0.75s;
  stroke: rgba(125, 255, 200, 1);
}

.mnm-guided-tour__neon--pulse-strong {
  filter: drop-shadow(0 0 8px rgba(93, 255, 184, 0.38));
}

.place-country.mnm-guided-tour-reveal-pulse,
.place-city.mnm-guided-tour-reveal-pulse,
.place-item.mnm-guided-tour-reveal-pulse {
  outline: 2px solid rgba(93, 255, 184, 0.95);
  outline-offset: 3px;
  box-shadow:
    0 0 0 4px rgba(93, 255, 184, 0.2),
    0 0 24px rgba(93, 255, 184, 0.45);
  animation: mnm-tour-reveal-pulse 1.1s ease-in-out infinite;
}

@keyframes mnm-tour-reveal-pulse {
  0%,
  100% {
    outline-color: rgba(93, 255, 184, 0.75);
    box-shadow:
      0 0 0 4px rgba(93, 255, 184, 0.15),
      0 0 16px rgba(93, 255, 184, 0.35);
  }
  50% {
    outline-color: rgba(125, 255, 200, 1);
    box-shadow:
      0 0 0 6px rgba(93, 255, 184, 0.28),
      0 0 32px rgba(93, 255, 184, 0.55);
  }
}

.mnm-guided-tour__neon--square {
  border-radius: 0;
}

.mnm-guided-tour__neon--soft {
  border-radius: var(--radius-sm, 2px);
}

.mnm-guided-tour__neon--rounded {
  border-radius: 8px;
}

.mnm-guided-tour__neon--pill {
  border-radius: 999px;
}

.mnm-guided-tour__link {
  position: fixed;
  inset: 0;
  z-index: 20004;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.mnm-guided-tour__link-path {
  fill: none;
  stroke: var(--mnm-tour-line);
  stroke-width: var(--mnm-tour-line-w);
  stroke-dasharray: var(--mnm-tour-line-dash);
  stroke-linecap: round;
  opacity: 0.94;
  filter: drop-shadow(0 0 2px rgba(93, 255, 184, 0.16));
}

@keyframes mnm-tour-target-dash-march {
  to {
    stroke-dashoffset: -28;
  }
}

/* Hub tour: keep right column above dim overlay */
body.mnm-guided-tour-hub-step .right-panel-wrapper.country-hub-open {
  z-index: 20008 !important;
  position: relative;
}

body.mnm-guided-tour-hub-step #countryHubPanel {
  z-index: 20009 !important;
}

.mnm-guided-tour__card--terminal-dock {
  max-width: min(360px, calc(100vw - 40px));
  animation: mnm-tour-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 20006;
}

.mnm-guided-tour--terminal .mnm-guided-tour__link {
  z-index: 20005;
}

.mnm-guided-tour__card--float {
  animation: mnm-tour-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mnm-guided-tour--vote-fx .mnm-guided-tour__panel,
.mnm-guided-tour--vote-fx .mnm-guided-tour__vignette {
  background: rgba(2, 6, 5, 0.55);
}

.mnm-guided-tour--vote-fx .mnm-tour-tomato-shell.is-open {
  filter: brightness(1.06) saturate(1.08);
}

.mnm-guided-tour__card--map-center {
  max-width: min(400px, calc(100vw - 80px));
  animation: mnm-tour-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 20006;
}

.mnm-guided-tour__link-path--alt {
  stroke-opacity: 0.72;
}

.mnm-guided-tour__card--globe-left {
  max-width: min(400px, calc(100vw - 40px));
  /* Fade only — slide animation resets translate(-100%, -50%) and covers the globe */
  animation: mnm-tour-card-fade-in 0.18s ease both;
}

.mnm-guided-tour-target--blink {
  animation: mnm-tour-target-blink 0.55s ease-in-out infinite;
}

@keyframes mnm-tour-target-blink {
  0%,
  100% {
    filter: brightness(1.1) saturate(1.08);
  }
  50% {
    filter: brightness(1.35) saturate(1.2);
  }
}

.mnm-guided-tour__card--globe-side {
  animation: mnm-tour-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mnm-guided-tour__card--hub-side,
.mnm-guided-tour__card--panel-side,
.mnm-guided-tour__card--my-page-side {
  animation: mnm-tour-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 20007;
}

.mnm-guided-tour__card--my-page-side {
  width: min(340px, calc(100vw - 32px));
  max-width: 340px;
}

.mnm-guided-tour__card--tomato-panel-side {
  width: min(360px, calc(100vw - 32px));
  max-width: 360px;
}

.mnm-guided-tour__card--globe-left,
.mnm-guided-tour__card--globe-side {
  z-index: 20007;
}

.mnm-guided-tour.mnm-guided-tour--picker-open {
  pointer-events: auto !important;
  z-index: 20050 !important;
}

.mnm-guided-tour.mnm-guided-tour--picker-open > :not(.mnm-guided-tour__picker) {
  display: none !important;
  pointer-events: none !important;
}

.mnm-guided-tour__picker {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 8, 6, 0.88);
  backdrop-filter: blur(8px);
  pointer-events: auto !important;
}

.mnm-guided-tour__picker[hidden] {
  display: none !important;
}

.mnm-guided-tour__picker-card,
.mnm-guided-tour__picker-grid,
.mnm-guided-tour__picker-actions,
.mnm-guided-tour__picker-btn,
.mnm-guided-tour__picker-actions .btn-main,
.mnm-guided-tour__picker-actions .btn-ghost {
  pointer-events: auto !important;
}

.mnm-guided-tour.mnm-guided-tour--picker-open .mnm-guided-tour__picker {
  pointer-events: auto !important;
}

.mnm-guided-tour__picker-card {
  width: min(520px, calc(100vw - 32px));
  padding: 24px 22px 20px;
  border-radius: 20px;
  border: 1px solid rgba(125, 255, 200, 0.42);
  background: linear-gradient(165deg, rgba(10, 28, 22, 0.98) 0%, rgba(4, 12, 9, 0.99) 100%);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.75);
}

.mnm-guided-tour__picker-kicker {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(125, 255, 200, 0.72);
}

.mnm-guided-tour__picker-title {
  margin: 0 0 8px;
  font-size: 22px;
  color: #e8fff5;
}

.mnm-guided-tour__picker-lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(220, 245, 235, 0.82);
}

.mnm-guided-tour__picker-grid {
  display: grid;
  gap: 10px;
}

.mnm-guided-tour__picker-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(125, 255, 200, 0.28);
  background: rgba(8, 24, 18, 0.72);
  color: #e8fff5;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}

.mnm-guided-tour__picker-btn:hover {
  border-color: rgba(125, 255, 200, 0.55);
  background: rgba(12, 34, 26, 0.9);
  transform: translateY(-1px);
}

.mnm-guided-tour__picker-btn--featured {
  border-color: rgba(125, 255, 200, 0.55);
  box-shadow: 0 0 0 1px rgba(93, 255, 184, 0.12);
}

.mnm-guided-tour__picker-btn--tomato {
  border-color: rgba(255, 120, 80, 0.45);
}

.mnm-guided-tour__picker-btn-title {
  font-size: 14px;
  font-weight: 700;
}

.mnm-guided-tour__picker-btn-desc {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(220, 245, 235, 0.75);
}

.mnm-guided-tour__picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

body.mnm-guided-tour-picker-open {
  overflow: hidden;
}

html.mnm-guided-tour-picker-open .app-shell,
html.mnm-guided-tour-picker-open .neon-frame,
html.mnm-guided-tour-picker-open .left-panel,
html.mnm-guided-tour-picker-open #rightPanel,
html.mnm-guided-tour-picker-open #countryHubPanel,
html.mnm-guided-tour-picker-open .right-panel-wrapper,
html.mnm-guided-tour-picker-open .map-panel,
html.mnm-guided-tour-picker-open .tomato-battle-icon,
html.mnm-guided-tour-picker-open .map-toggle-btn,
html.mnm-guided-tour-picker-open .map-settings-btn,
html.mnm-guided-tour-picker-open .map-time-machine,
html.mnm-guided-tour-picker-open .map-status-chip,
html.mnm-guided-tour-picker-open #quickActions {
  pointer-events: none !important;
  user-select: none;
}

@keyframes mnm-tour-link-dash {
  to {
    stroke-dashoffset: -26;
  }
}

.mnm-guided-tour__card--dock {
  animation: mnm-tour-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.mnm-guided-tour__hint {
  margin: -8px 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #ffe8c8;
  background: rgba(255, 120, 60, 0.12);
  border: 1px solid rgba(255, 140, 80, 0.35);
  animation: mnm-tour-hint-pulse 1.4s ease-in-out infinite;
}

@keyframes mnm-tour-hint-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.78;
  }
}

.mnm-guided-tour__card--center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 20007;
  max-width: min(420px, calc(100vw - 48px));
  /* Fade only — no vertical offset (that looked like a jump off-center → center) */
  animation: mnm-tour-card-fade-in 0.18s ease both;
}

.mnm-guided-tour__card--hub {
  max-width: min(400px, calc(100vw - 48px));
  z-index: 5;
  animation: mnm-tour-card-fade-in 0.18s ease both;
}

.mnm-guided-tour__card--globe-side {
  max-width: min(380px, calc(100vw - 48px));
  z-index: 5;
  animation: mnm-tour-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.mnm-guided-tour__card--tomato-dock {
  z-index: 20007;
  animation: mnm-tour-card-fade-in 0.18s ease both;
}

@keyframes mnm-tour-card-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mnm-guided-tour__card:not(.mnm-guided-tour__card--center):not(.mnm-guided-tour__card--hub):not(.mnm-guided-tour__card--globe-side):not(.mnm-guided-tour__card--globe-left):not(.mnm-guided-tour__card--map-center):not(.mnm-guided-tour__card--tomato-dock) {
  animation: mnm-tour-card-in 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes mnm-tour-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mnm-tour-card-in-center {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 8px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.mnm-guided-tour__actions .btn-main:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.mnm-guided-tour__cursor {
  position: fixed;
  z-index: 20060;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  pointer-events: none;
  display: none;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.72));
}

.mnm-guided-tour__cursor-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(0, 0, 0, 0.78);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.35),
    0 0 12px rgba(93, 255, 184, 0.45);
  transition: transform 0.1s ease;
}

.mnm-guided-tour__cursor-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 2px solid rgba(93, 255, 184, 0.95);
  opacity: 0;
  transform: scale(0.35);
  box-shadow: 0 0 14px rgba(93, 255, 184, 0.45);
}

.mnm-guided-tour__cursor-ripple {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.88);
  opacity: 0;
  transform: scale(0.2);
}

.mnm-guided-tour__cursor.is-press .mnm-guided-tour__cursor-dot {
  transform: scale(0.82);
}

.mnm-guided-tour__cursor.is-click .mnm-guided-tour__cursor-halo {
  animation: mnm-tour-cursor-click 0.5s ease-out;
}

.mnm-guided-tour__cursor.is-click .mnm-guided-tour__cursor-ripple {
  animation: mnm-tour-cursor-ripple 0.55s ease-out;
}

body.mnm-guided-tour-cinematic .mnm-guided-tour__cursor {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.8));
}

body.mnm-guided-tour-cinematic .mnm-guided-tour__cursor-dot {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
}

.mnm-guided-tour__cinematic-badge {
  display: none;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b8ffe0;
  background: rgba(6, 18, 14, 0.92);
  border: 1px solid rgba(93, 255, 184, 0.45);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  animation: mnm-tour-badge-pulse 2.4s ease-in-out infinite;
}

.mnm-guided-tour--cinematic .mnm-guided-tour__cinematic-badge {
  display: block;
}

.mnm-guided-tour--cinematic .mnm-guided-tour__actions {
  opacity: 0;
  pointer-events: none;
  height: 0;
  margin: 0;
  overflow: hidden;
}

@keyframes mnm-tour-cursor-ripple {
  0% {
    opacity: 0.9;
    transform: scale(0.25);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

@keyframes mnm-tour-badge-pulse {
  0%,
  100% {
    opacity: 0.88;
  }
  50% {
    opacity: 1;
  }
}

@keyframes mnm-tour-cursor-click {
  0% {
    opacity: 0.95;
    transform: scale(0.35);
  }
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

.mnm-tour-tomato-shell {
  position: fixed;
  inset: 0;
  z-index: 19990;
  background: rgba(2, 4, 3, 0.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.mnm-tour-tomato-shell.is-open {
  opacity: 1;
  pointer-events: none;
}

.mnm-tour-tomato-shell iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

body.mnm-guided-tour-active .mnm-tour-tomato-shell.is-open {
  z-index: 19990;
}

.mnm-mobile-hint {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5500;
  max-width: min(420px, calc(100vw - 24px));
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(8, 20, 16, 0.94);
  border: 1px solid rgba(93, 255, 184, 0.35);
  font-size: 12px;
  line-height: 1.45;
  color: #d4f5e4;
  text-align: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.mnm-mobile-hint button {
  margin-left: 8px;
}

@media (min-width: 720px) {
  .mnm-mobile-hint {
    display: none !important;
  }
}

.map-nav-ctx-menu {
  position: fixed;
  z-index: 12055;
  min-width: 210px;
  padding: 8px;
  border-radius: 12px;
  background: var(--ui-glass-bg, rgba(8, 18, 14, 0.94));
  border: 1px solid var(--ui-glass-border-strong, rgba(125, 252, 138, 0.35));
  box-shadow: var(--ui-glass-shadow, 0 12px 36px rgba(0, 0, 0, 0.45));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.map-nav-ctx-menu[hidden] {
  display: none !important;
}
.map-nav-ctx-menu__title {
  margin: 0 0 6px;
  padding: 2px 8px 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(125, 252, 138, 0.75);
  font-weight: 700;
}
.map-nav-ctx-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(230, 245, 235, 0.96);
  font-size: 0.84rem;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}
.map-nav-ctx-menu__item:hover,
.map-nav-ctx-menu__item:focus-visible {
  background: rgba(125, 252, 138, 0.1);
  outline: none;
}
.map-nav-ctx-menu__title--section {
  margin-top: 2px;
}
.map-nav-ctx-menu__title--section:first-child {
  margin-top: 0;
}
.map-nav-ctx-menu__divider {
  height: 1px;
  margin: 6px 4px;
  background: rgba(125, 252, 138, 0.14);
}
.map-nav-ctx-menu__item--action {
  margin-top: 0;
  border-top: none;
  border-radius: 8px;
  padding-top: 9px;
}
.map-nav-ctx-menu__icon {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.map-nav-ctx-menu__icon svg {
  display: block;
}
.map-nav-ctx-menu__icon--custom {
  color: rgba(125, 252, 138, 0.9);
  font-size: 14px;
}
.map-nav-ctx-menu__label {
  flex: 1;
  line-height: 1.25;
}

.map-custom-settlement-menu {
  position: fixed;
  z-index: 12050;
  width: min(320px, calc(100vw - 24px));
  max-height: min(82vh, 520px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: var(--ui-glass-bg);
  border: 1px solid var(--ui-glass-border-strong);
  box-shadow: var(--ui-glass-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.map-custom-settlement-menu__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.map-custom-settlement-menu__kicker {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(93, 255, 184, 0.92);
  font-weight: 700;
}

.map-custom-settlement-menu__country {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #e8fff4;
}

.map-custom-settlement-menu__hint {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(232, 255, 244, 0.72);
}

.map-custom-settlement-menu__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 11px;
  color: rgba(232, 255, 244, 0.65);
}

.map-custom-settlement-menu__field input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120, 170, 150, 0.45);
  background: rgba(4, 12, 10, 0.55);
  color: #e8fff4;
  font-size: 14px;
}

.map-custom-settlement-menu__field input:focus {
  outline: none;
  border-color: rgba(255, 92, 92, 0.65);
  box-shadow: 0 0 0 2px rgba(255, 72, 72, 0.18);
}

.map-custom-settlement-menu__field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(120, 170, 150, 0.45);
  background: rgba(4, 12, 10, 0.55);
  color: #e8fff4;
  font-size: 14px;
  line-height: 1.4;
  resize: vertical;
  min-height: 68px;
  max-height: 120px;
  font-family: inherit;
}

.map-custom-settlement-menu__field textarea:focus {
  outline: none;
  border-color: rgba(255, 92, 92, 0.65);
  box-shadow: 0 0 0 2px rgba(255, 72, 72, 0.18);
}

.map-custom-settlement-menu__near {
  margin: 0 0 10px;
  font-size: 12px;
  color: rgba(143, 211, 255, 0.92);
}

.map-custom-settlement-menu__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.map-custom-settlement-menu__photos {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
  flex-wrap: wrap;
}

.map-custom-settlement-photo-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(93, 255, 184, 0.35);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(232, 255, 244, 0.92);
  cursor: pointer;
  font-size: 12px;
}

.map-custom-settlement-photo-add:hover {
  border-color: rgba(93, 255, 184, 0.65);
  background: rgba(93, 255, 184, 0.08);
}

.map-custom-settlement-photo-hint {
  font-size: 11px;
  opacity: 0.65;
}

.map-custom-settlement-photo-preview {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
  max-height: 44px;
  overflow: hidden;
}

.map-custom-settlement-photo-thumb {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.map-custom-settlement-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.map-custom-settlement-photo-thumb__x {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  padding: 0;
  cursor: pointer;
}

.map-custom-settlement-menu__close {
  flex-shrink: 0;
}

.custom-marker {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(58, 166, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.7);
  box-shadow: 0 0 10px rgba(58, 166, 255, 0.45);
  color: #000;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.map-click-pulse {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(93, 255, 184, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 0 rgba(93, 255, 184, 0.7);
  animation: mapClickPulse 0.68s ease-out forwards;
  pointer-events: none;
}

@keyframes mapClickPulse {
  0% {
    transform: scale(0.35);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(93, 255, 184, 0.75);
  }
  70% {
    transform: scale(1.15);
    opacity: 0.85;
    box-shadow: 0 0 0 14px rgba(93, 255, 184, 0);
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
    box-shadow: 0 0 0 22px rgba(93, 255, 184, 0);
  }
}

#map {
  position: relative;
}

.map-click-detecting {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  z-index: 12;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(8, 16, 22, 0.82);
  border: 1px solid rgba(93, 255, 184, 0.45);
  color: #d8ffe8;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.map-click-detecting__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(93, 255, 184, 0.25);
  border-top-color: #5dffb8;
  animation: mapDetectSpin 0.75s linear infinite;
}

@keyframes mapDetectSpin {
  to {
    transform: rotate(360deg);
  }
}

.global-toast--action {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: min(92vw, 420px);
}

.global-toast__action {
  border: 1px solid rgba(93, 255, 184, 0.55);
  background: rgba(93, 255, 184, 0.12);
  color: #b8ffd8;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}

.global-toast__action:hover {
  background: rgba(93, 255, 184, 0.22);
}

.custom-marker--hover {
  box-shadow: 0 0 18px rgba(58, 166, 255, 0.6), 0 0 8px rgba(255, 64, 96, 0.25);
  border-color: rgba(58, 166, 255, 0.95);
}

.custom-marker--birth,
.custom-marker--home {
  font-size: 14px;
  background: rgba(11, 15, 16, 0.92);
  color: #eaf3ff;
  border: 1px solid rgba(58, 166, 255, 0.7);
  box-shadow: 0 0 14px rgba(58, 166, 255, 0.35);
  animation: none;
}

.footer-credit-nowrap {
  /* Footer should wrap by words, not by letters */
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

/* Right panel footer: keep legal/footer content inside panel */
.profile-nav-item.footer-meta-item {
  /* override .profile-nav-item (display:flex) so footer stacks vertically */
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
}

/* Footer should not inherit right-menu "force left align" rules */
.profile-nav-item.footer-meta-item,
.profile-nav-item.footer-meta-item span {
  text-align: center !important;
}

.footer-credit-line {
  display: block;
  width: 100%;
  line-height: 1.4; /* keep same as footer meta item */
  font-size: 10px; /* slightly larger for readability */
}

.footer-credit-line .footer-credit-nowrap {
  display: inline;
}

.footer-credit-line,
.footer-legal-links {
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.footer-credit-line,
.footer-legal-links {
  text-align: center;
}

.footer-legal-links {
  display: flex !important;
  flex-wrap: wrap; /* allow wrap to next line if ultra-narrow */
  gap: 6px; /* fit in one row */
  align-items: center;
  margin-top: 6px;
  line-height: 1.4;
  font-size: 8.5px; /* slightly smaller than 9px inline */
  justify-content: center;
}

.footer-legal-sep {
  opacity: 0.6;
}

.tomato-battle-icon .tomato-face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 0%,
    #ff8a80 0%,
    #c62828 45%,
    #4a0000 100%
  );
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(255, 120, 120, 0.9));
}

.tomato-battle-icon .tomato-label {
  white-space: nowrap;
}

.tomato-battle-icon:hover {
  transform: translateY(-1px) scale(1.02);
  filter: saturate(1.2);
}

.tomato-battle-icon:active {
  transform: translateY(0) scale(0.98);
}

@keyframes tomato-battle-shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  15% {
    transform: translate(-2px, 0) rotate(-3deg);
  }
  35% {
    transform: translate(3px, -1px) rotate(3deg);
  }
  55% {
    transform: translate(-2px, 1px) rotate(-2deg);
  }
  75% {
    transform: translate(2px, 0) rotate(2deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.tomato-battle-icon--shake {
  animation: tomato-battle-shake 0.6s ease-in-out;
}

/* ===== TOMATO BATTLE OVERLAY ===== */

.tomato-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: radial-gradient(circle at 20% 0%, rgba(255, 80, 80, 0.20), transparent 55%),
    radial-gradient(circle at 80% 100%, rgba(176, 0, 32, 0.70), rgba(10, 0, 4, 0.88));
  backdrop-filter: blur(8px) saturate(1.12);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.tomato-overlay.visible {
  display: flex;
}

.tomato-window {
  width: 100%;
  height: 100%;
  max-height: 100vh;
  border-radius: 0;
  border: none;
  /* isolate Tomato Battle from My Node Map underneath */
  background: rgba(8, 0, 3, 0.72);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #ffecec;
}

.tomato-close {
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #ffecec;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 0 12px rgba(255, 90, 90, 0.25);
}

/* map desaturate while Tomato Battle is open */
body.tomato-mode #map {
  /* Tomato Battle uses its own canvas map; keep base map quiet */
  filter: grayscale(1) contrast(1.2) brightness(0.9) saturate(0.6);
}

/* Hide all default Mapbox UI controls in Tomato Battle */
body.tomato-mode .mapboxgl-ctrl,
body.tomato-mode .mapboxgl-ctrl-top-left,
body.tomato-mode .mapboxgl-ctrl-top-right,
body.tomato-mode .mapboxgl-ctrl-bottom-left,
body.tomato-mode .mapboxgl-ctrl-bottom-right {
  display: none !important;
}

body.tomato-mode .map-dim-overlay {
  opacity: 0.16;
}

/* Tomato Manifest (typing intro) */
.tomato-manifest {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  color: #ffffff;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 55%),
    radial-gradient(circle at bottom, rgba(176, 0, 32, 0.92), rgba(10, 0, 4, 0.98));
}

.tomato-manifest[hidden] {
  display: none !important;
}

.tomato-manifest-top {
  position: absolute;
  top: 18px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tomato-manifest-timer {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: 0.95;
}

.tomato-manifest-secs {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.tomato-manifest-close {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 999px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.12);
}

.tomato-manifest-center {
  flex: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 74px 12px 150px;
}

.tomato-manifest-logo {
  display: flex;
  justify-content: center;
}

.tomato-manifest-logo img {
  width: min(300px, 62vw);
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.08));
  opacity: 0.96;
}

.tomato-manifest-text {
  font-size: clamp(18px, 2.1vw, 34px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0.02em;
  max-width: 980px;
  color: rgba(255, 255, 255, 0.84);
  white-space: pre-wrap;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.38),
    0 2px 0 rgba(0, 0, 0, 0.6),
    0 4px 10px rgba(0, 0, 0, 0.24),
    0 -1px 0 rgba(255, 255, 255, 0.09),
    0 -2px 0 rgba(255, 255, 255, 0.05);
}

.tomato-manifest-text::after {
  content: "▍";
  margin-left: 3px;
  opacity: 0.85;
  animation: tomato-cursor 0.7s infinite;
}

@keyframes tomato-cursor {
  0%,
  49% {
    opacity: 0.85;
  }
  50%,
  100% {
    opacity: 0.15;
  }
}

/* ===== TOMATO BATTLE DASHBOARD ===== */

.tomato-dash {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tomato-dash-top {
  height: 72px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 120, 120, 0.22);
  background: linear-gradient(90deg, rgba(14, 0, 5, 0.72), rgba(120, 0, 18, 0.42));
}

.tomato-dash-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
}

.tomato-dash-brand-dot {
  grid-row: 1 / span 2;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #ffb3b3, #ff2b2b 55%, #7a0000 100%);
  box-shadow: 0 0 16px rgba(255, 61, 61, 0.55);
}

.tomato-dash-brand-text {
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.05;
}

.tomato-dash-brand-sub {
  font-size: 10px;
  letter-spacing: 0.18em;
  opacity: 0.86;
}

.tomato-dash-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 120, 120, 0.22);
  background: rgba(0, 0, 0, 0.22);
}

.tomato-tab {
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 236, 236, 0.9);
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.tomato-tab:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 120, 120, 0.25);
  background: rgba(255, 43, 43, 0.10);
}

.tomato-tab.is-active {
  background: linear-gradient(90deg, rgba(255, 43, 43, 0.36), rgba(179, 0, 0, 0.30));
  border-color: rgba(255, 160, 160, 0.40);
  box-shadow: 0 0 18px rgba(255, 61, 61, 0.20);
}

.tomato-dash-top-right {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.tomato-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 120, 120, 0.22);
  background: rgba(0, 0, 0, 0.22);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tomato-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff3d3d;
  box-shadow: 0 0 18px rgba(255, 61, 61, 0.75);
  animation: tomato-live-pulse 1.2s infinite;
}

@keyframes tomato-live-pulse {
  0%,
  70% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0.25;
  }
}

.tomato-live-age {
  opacity: 0.8;
  letter-spacing: 0.08em;
  text-transform: none;
}

.tomato-arsenal {
  display: inline-flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 120, 120, 0.18);
  background: rgba(0, 0, 0, 0.18);
}

.tomato-charge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.tomato-charge-ico {
  font-size: 14px;
  opacity: 0.92;
}

.tomato-charge-num {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
}

.tomato-top-btn {
  border: 1px solid rgba(255, 120, 120, 0.25);
  background: linear-gradient(180deg, rgba(255, 43, 43, 0.22), rgba(120, 0, 18, 0.22));
  color: rgba(255, 236, 236, 0.95);
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  box-shadow: 0 0 14px rgba(255, 61, 61, 0.12);
}

.tomato-top-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 170, 170, 0.40);
  box-shadow: 0 0 20px rgba(255, 61, 61, 0.22);
}

.tomato-top-btn:active {
  transform: translateY(0);
}

.tomato-panel-toggle {
  display: none;
}

.tomato-panel-toggle-glyph {
  display: inline-flex;
  margin-left: 6px;
  font-size: 14px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 0.22s ease, opacity 0.18s ease;
}

.tomato-panel-backdrop {
  display: none;
}

.tomato-tower-handle {
  display: none;
}

.tomato-dash-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
}

/* Medium desktop / older monitors: keep 2 columns, but make right panel adaptive */
@media (max-width: 1600px) {
  .tomato-panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 88px;
  }
  .tomato-dash-main {
    grid-template-columns: minmax(0, 1fr) minmax(290px, 31vw);
  }
  .tomato-live-tower {
    padding: 10px 10px 12px;
    transition: opacity 0.22s ease, transform 0.22s ease, padding 0.22s ease,
      border-color 0.22s ease;
  }
  .tomato-tower-card {
    border-radius: 14px;
    padding: 10px 10px 12px;
  }
  .tomato-hero-counters {
    gap: 8px;
  }
  .tomato-country-callout {
    width: min(520px, calc(100% - 24px));
    padding: 12px 12px 10px;
  }
}

@media (max-width: 1600px), (max-height: 840px) {
  .tomato-panel-backdrop {
    position: absolute;
    inset: 0;
    z-index: 7;
    border: 0;
    margin: 0;
    padding: 0;
    background: linear-gradient(
      90deg,
      rgba(6, 0, 2, 0.08) 0%,
      rgba(6, 0, 2, 0.24) 55%,
      rgba(6, 0, 2, 0.44) 100%
    );
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .tomato-dash-main {
    position: relative;
    grid-template-columns: minmax(0, 1fr) 0 !important;
  }
  .tomato-dash .tomato-live-tower {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 44vw);
    max-width: calc(100% - 22px);
    z-index: 18;
    padding: 10px 10px 12px;
    border-left: 1px solid rgba(255, 120, 120, 0.22);
    border-radius: 14px 0 0 14px;
    box-shadow: -12px 0 28px rgba(0, 0, 0, 0.36);
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    overflow: auto;
    transition: opacity 0.24s ease, transform 0.24s ease, box-shadow 0.24s ease;
  }
  .tomato-tower-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 78px;
    border: 1px solid rgba(255, 120, 120, 0.28);
    border-right: none;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(180deg, rgba(28, 0, 8, 0.92), rgba(8, 0, 3, 0.92));
    color: rgba(255, 232, 232, 0.92);
    cursor: pointer;
    z-index: 19;
    box-shadow: -6px 0 16px rgba(0, 0, 0, 0.3);
  }
  .tomato-tower-handle-glyph {
    display: inline-flex;
    font-size: 18px;
    line-height: 1;
    transform: rotate(0deg);
    transition: transform 0.24s ease;
  }
  .tomato-dash--panel-collapsed .tomato-dash-main {
    grid-template-columns: minmax(0, 1fr) 0 !important;
  }
  .tomato-dash--panel-collapsed .tomato-panel-backdrop {
    opacity: 0;
    pointer-events: none;
  }
  .tomato-dash--panel-collapsed .tomato-panel-toggle-glyph {
    transform: rotate(0deg);
  }
  .tomato-dash:not(.tomato-dash--panel-collapsed) .tomato-panel-toggle-glyph {
    transform: rotate(180deg);
  }
  .tomato-dash:not(.tomato-dash--panel-collapsed) .tomato-panel-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .tomato-dash--panel-collapsed .tomato-live-tower {
    border-left-color: transparent;
    opacity: 1;
    transform: translateX(calc(100% - 24px));
    pointer-events: auto;
    box-shadow: none;
  }
  .tomato-dash--panel-collapsed .tomato-live-tower > :not(.tomato-tower-handle) {
    opacity: 0;
    pointer-events: none;
  }
  .tomato-dash:not(.tomato-dash--panel-collapsed) .tomato-live-tower > :not(.tomato-tower-handle) {
    opacity: 1;
    pointer-events: auto;
  }
  .tomato-dash--panel-collapsed .tomato-tower-handle-glyph {
    transform: rotate(180deg);
  }
}

.tomato-map-stage {
  position: relative;
  min-height: 0;
  padding: 14px 14px 18px;
  /* map will be mounted inside this stage */
  pointer-events: auto;
}

.tomato-canvas-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.tomato-map-label {
  position: absolute;
  z-index: 3;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 160, 160, 0.22);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px) saturate(1.08);
  color: rgba(255, 236, 236, 0.95);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  transform: translate(10px, 10px);
  box-shadow: 0 0 18px rgba(255, 61, 61, 0.14);
}

.tomato-map-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* subtle “engraved” world lines vibe (map is underneath) */
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,0.07), transparent 55%),
    radial-gradient(circle at 15% 65%, rgba(255,255,255,0.045), transparent 50%),
    radial-gradient(circle at 85% 70%, rgba(255,255,255,0.035), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0.65;
}

.tomato-hero-counters {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(860px, calc(100% - 28px));
  pointer-events: none;
  z-index: 2;
}

.tomato-hero-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 120, 120, 0.20);
  background: rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px) saturate(1.08);
  padding: 12px 14px;
  box-shadow: 0 0 20px rgba(255, 61, 61, 0.12);
}

.tomato-hero-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.86;
}

.tomato-hero-num {
  font-size: clamp(22px, 2.5vw, 38px);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin-top: 6px;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.55);
}

.tomato-country-callout {
  position: absolute;
  left: 14px;
  bottom: 18px;
  width: min(560px, calc(100% - 28px));
  border-radius: 18px;
  border: 1px solid rgba(255, 120, 120, 0.20);
  background: rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(10px) saturate(1.08);
  padding: 14px 14px 12px;
  box-shadow: 0 0 24px rgba(255, 61, 61, 0.12);
  pointer-events: auto;
  z-index: 2;
}

.tomato-country-name {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.tomato-country-metrics {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 0.9fr;
  gap: 10px;
}

.tomato-metric-k {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
}

.tomato-metric-v {
  margin-top: 6px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tomato-metric--big .tomato-metric-v {
  font-size: 22px;
  font-weight: 900;
}

.tomato-map-hud {
  position: absolute;
  top: 14px;
  right: 14px;
  width: min(280px, calc(100% - 28px));
  border-radius: 16px;
  border: 1px solid rgba(255, 120, 120, 0.16);
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(10px) saturate(1.08);
  padding: 10px 12px;
  pointer-events: none;
  z-index: 2;
}

.tomato-hud-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
}

.tomato-hud-k {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
}

.tomato-hud-v {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
}

.tomato-live-tower {
  border-left: 1px solid rgba(255, 120, 120, 0.18);
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px) saturate(1.08);
  padding: 12px 12px 14px;
  overflow: auto;
}

.tomato-tower-card {
  border-radius: 16px;
  border: 1px solid rgba(255, 120, 120, 0.16);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 12px 10px;
  box-shadow: 0 0 18px rgba(255, 61, 61, 0.10);
}

.tomato-tower-card + .tomato-tower-card {
  margin-top: 10px;
}

.tomato-tower-title {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.86;
  margin-bottom: 10px;
}

.tomato-leader {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}

.tomato-leader-rank {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  background: radial-gradient(circle at 30% 20%, rgba(255, 180, 180, 0.16), rgba(255, 43, 43, 0.22));
  border: 1px solid rgba(255, 160, 160, 0.25);
}

.tomato-leader-country {
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tomato-leader-gap {
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.84;
  letter-spacing: 0.06em;
}

.tomato-balance {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}

.tomato-balance-mid {
  width: 2px;
  height: 46px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 14px rgba(255, 61, 61, 0.10);
}

.tomato-balance-side {
  display: grid;
  gap: 6px;
}

.tomato-balance-num {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  opacity: 0.92;
}

.tomato-balance-bar {
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 120, 120, 0.10);
}

.tomato-balance-bar > span {
  display: block;
  height: 100%;
  width: 50%;
  border-radius: 999px;
}

.tomato-balance-side--like .tomato-balance-num {
  color: rgba(190, 255, 215, 0.92);
}

.tomato-balance-side--like .tomato-balance-bar > span {
  background: linear-gradient(90deg, rgba(32, 208, 96, 0.92), rgba(22, 160, 80, 0.72));
  box-shadow: 0 0 18px rgba(32, 208, 96, 0.12);
}

.tomato-balance-side--tomato .tomato-balance-num {
  color: rgba(255, 210, 210, 0.94);
  text-align: right;
}

.tomato-balance-side--tomato .tomato-balance-bar > span {
  margin-left: auto;
  background: linear-gradient(90deg, rgba(255, 61, 61, 0.92), rgba(179, 0, 0, 0.82));
  box-shadow: 0 0 18px rgba(255, 61, 61, 0.18);
}

.tomato-bars {
  display: grid;
  gap: 8px;
}

.tomato-bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.tomato-bar-label {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tomato-bar-num {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  opacity: 0.9;
}

.tomato-bar {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  border: 1px solid rgba(255, 120, 120, 0.10);
}

.tomato-bar > span {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 61, 61, 0.92), rgba(179, 0, 0, 0.82));
  box-shadow: 0 0 18px rgba(255, 61, 61, 0.22);
}

.tomato-bar--like > span {
  background: linear-gradient(90deg, rgba(32, 208, 96, 0.90), rgba(22, 160, 80, 0.70));
  box-shadow: 0 0 18px rgba(32, 208, 96, 0.14);
}

.tomato-momentum {
  display: grid;
  gap: 12px;
}

.tomato-momentum-k {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.82;
  margin-bottom: 6px;
}

.tomato-spark {
  width: 100%;
  height: 56px;
  display: block;
  background: rgba(0, 0, 0, 0.20);
  border-radius: 12px;
  border: 1px solid rgba(255, 120, 120, 0.12);
}

.tomato-dash-foot {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-top: 1px solid rgba(255, 120, 120, 0.16);
  background: rgba(0, 0, 0, 0.24);
  color: rgba(255, 236, 236, 0.88);
}

.tomato-foot-link {
  border: none;
  background: transparent;
  color: rgba(255, 236, 236, 0.92);
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
  padding: 8px 10px;
  border-radius: 10px;
}

.tomato-foot-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

.tomato-foot-dot {
  opacity: 0.35;
}

.tomato-foot-mini {
  font-size: 10px;
  opacity: 0.78;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* bottom sheet */
.tomato-bottom-sheet {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  width: min(860px, calc(100% - 28px));
  border-radius: 20px;
  border: 1px solid rgba(255, 120, 120, 0.22);
  background: rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(12px) saturate(1.08);
  box-shadow: 0 0 28px rgba(255, 61, 61, 0.14);
  overflow: hidden;
  pointer-events: auto;
  z-index: 3;
}

/* top bar + tower must remain interactive */
.tomato-dash-top,
.tomato-live-tower,
.tomato-dash-foot,
.tomato-share {
  pointer-events: auto;
}

/* main is interactive; map is mounted inside stage */
.tomato-dash-main {
  pointer-events: auto;
}

.tomato-bottom-sheet[hidden] {
  display: none !important;
}

.tomato-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 120, 120, 0.18);
}

.tomato-sheet-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.76;
}

.tomato-sheet-name {
  margin-left: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.tomato-sheet-close,
.tomato-share-close {
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 236, 236, 0.95);
  font-size: 24px;
  cursor: pointer;
}

.tomato-sheet-body {
  padding: 12px 14px 14px;
}

.tomato-sheet-stats {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: center;
}

.tomato-sheet-likepct-label {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.82;
}

.tomato-sheet-likepct-num {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.04em;
  margin-top: 6px;
}

.tomato-sheet-mini-sub {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 10px;
  opacity: 0.78;
  letter-spacing: 0.06em;
}

.tomato-sheet-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tomato-vote-btn {
  border: 1px solid rgba(255, 120, 120, 0.22);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 236, 236, 0.95);
  padding: 12px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.tomato-vote-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 170, 170, 0.40);
}

.tomato-vote-like {
  box-shadow: 0 0 18px rgba(32, 208, 96, 0.12);
}

.tomato-vote-tomato {
  box-shadow: 0 0 18px rgba(255, 61, 61, 0.18);
}

.tomato-moment {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 96px;
  pointer-events: none;
}

.tomato-moment[hidden] {
  display: none !important;
}

.tomato-moment-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 160, 160, 0.30);
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(12px) saturate(1.1);
  padding: 14px 16px;
  box-shadow: 0 0 40px rgba(255, 61, 61, 0.18);
  animation: tomato-moment-pop 1.6s ease both;
}

@keyframes tomato-moment-pop {
  0% {
    opacity: 0;
    transform: translateY(-14px) scale(0.96);
  }
  12% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
}

.tomato-moment-title {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.86;
}

.tomato-moment-sub {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.tomato-share {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.tomato-share[hidden] {
  display: none !important;
}

.tomato-share-card {
  width: min(980px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255, 120, 120, 0.22);
  background: rgba(10, 0, 4, 0.92);
  box-shadow: 0 0 40px rgba(255, 61, 61, 0.18);
  overflow: hidden;
}

.tomato-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 120, 120, 0.18);
}

.tomato-share-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.tomato-share-body {
  padding: 12px 14px 14px;
}

.tomato-share-preview canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(255, 120, 120, 0.12);
  background: rgba(0, 0, 0, 0.20);
}

.tomato-share-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tomato-share-hint {
  margin-top: 10px;
  font-size: 10px;
  opacity: 0.78;
  letter-spacing: 0.02em;
}

@media (max-width: 980px) {
  .tomato-dash-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .tomato-dash .tomato-live-tower {
    display: block;
    width: min(400px, 82vw);
    border-radius: 12px 0 0 12px;
  }
  .tomato-hero-counters {
    grid-template-columns: 1fr;
    width: min(520px, calc(100% - 28px));
  }
  .tomato-country-metrics {
    grid-template-columns: 1fr;
  }
  .tomato-sheet-stats {
    grid-template-columns: 1fr;
  }
}

/* Low-height screens (older 16:10 / 4:3 monitors): reduce density, avoid overlaps */
@media (max-height: 840px) {
  .tomato-panel-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 82px;
    padding: 8px 10px;
  }
  .tomato-dash-top {
    height: 64px;
    padding: 8px 12px;
    gap: 8px;
  }
  .tomato-tab {
    padding: 7px 10px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  .tomato-live-pill {
    padding: 6px 8px;
    font-size: 10px;
  }
  .tomato-hero-counters {
    top: 10px;
    left: 10px;
    width: min(760px, calc(100% - 20px));
    gap: 8px;
  }
  .tomato-hero-card {
    padding: 9px 10px;
  }
  .tomato-hero-label {
    font-size: 9px;
    letter-spacing: 0.16em;
  }
  .tomato-hero-num {
    font-size: clamp(18px, 2vw, 30px);
    margin-top: 4px;
  }
  .tomato-map-hud {
    top: 10px;
    right: 10px;
    width: min(240px, calc(100% - 20px));
    padding: 8px 10px;
  }
  .tomato-country-callout {
    left: 10px;
    bottom: 12px;
    width: min(500px, calc(100% - 20px));
    padding: 10px 10px 9px;
  }
  .tomato-country-name {
    font-size: 12px;
    letter-spacing: 0.18em;
  }
  .tomato-metric-v {
    font-size: 14px;
  }
  .tomato-metric--big .tomato-metric-v {
    font-size: 19px;
  }
  .tomato-dash-foot {
    min-height: 40px;
    padding: 6px 12px;
  }
}

/* Very constrained height: force safe one-column flow, keep controls accessible */
@media (max-height: 760px) {
  .tomato-dash-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .tomato-dash .tomato-live-tower {
    display: block;
    width: min(400px, 82vw);
    border-radius: 12px 0 0 12px;
  }
  .tomato-map-hud {
    display: none;
  }
  .tomato-hero-counters {
    grid-template-columns: 1fr;
    width: min(460px, calc(100% - 20px));
  }
  .tomato-country-metrics {
    grid-template-columns: 1fr;
  }
  .tomato-country-callout {
    bottom: 10px;
    width: min(420px, calc(100% - 20px));
  }
  .tomato-dash-top-right .tomato-live-age {
    display: none;
  }
}

.tomato-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tomato-card {
  border-radius: 14px;
  border: 1px solid rgba(255, 138, 128, 0.55);
  background: radial-gradient(
    circle at top,
    rgba(255, 82, 82, 0.12),
    rgba(10, 0, 4, 0.94)
  );
  padding: 10px;
  display: flex;
  gap: 10px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  outline: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease,
    border-color 0.12s ease, background 0.12s ease;
}

.tomato-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: radial-gradient(circle at 20% 0%, #ff8a80, #b71c1c);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffecec;
  box-shadow: 0 0 12px rgba(255, 120, 120, 0.85);
}

.tomato-card-text h3 {
  font-size: 12px;
  margin: 0 0 4px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tomato-card-text p {
  font-size: 10px;
  margin: 0;
  color: #ffdde0;
  line-height: 1.5;
}

.tomato-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(255, 120, 120, 0.95), 0 0 4px rgba(0, 0, 0, 0.85);
  border-color: rgba(255, 188, 160, 0.9);
  background: radial-gradient(
    circle at top,
    rgba(255, 120, 120, 0.25),
    rgba(10, 0, 4, 0.96)
  );
}

.tomato-card:active {
  transform: translateY(0);
  box-shadow: 0 0 10px rgba(255, 80, 80, 0.7), 0 0 3px rgba(0, 0, 0, 0.9);
}

.tomato-footer {
  padding: 10px 16px 12px;
  border-top: 1px solid rgba(255, 138, 128, 0.4);
  font-size: 10px;
  color: #ffdde0;
  opacity: 0.85;
}
.country-tooltip {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7af3ff;
  background: rgba(2, 10, 14, 0.9);
  border: 1px solid rgba(122, 243, 255, 0.4);
  box-shadow: 0 0 6px rgba(122, 243, 255, 0.25);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.leaflet-tooltip.country-tooltip {
  padding: 4px 7px;
  border-radius: 4px;
}

/* плавное появление */
.leaflet-tooltip.country-tooltip.leaflet-tooltip-open {
  opacity: 1;
  transform: translateY(0);
}

/* адаптация сетки для маленьких экранов */
@media (max-width: 720px) {
  .tomato-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tomato-overlay {
    padding: 12px;
  }
}
/* Правое меню: выравнивание текста и размер */

.profile-nav-item {
  display: flex;
  align-items: center;
  gap: 8px; /* расстояние между иконкой и текстом */
  padding: 6px 10px;
  font-size: 11px; /* немного крупнее текста */
  text-align: left; /* весь текст строго по левому краю */
}

.profile-nav-item i {
  min-width: 18px;
  text-align: center;
}

.profile-nav-item span {
  text-align: left;
}

/* подпись SOON / BETA выровнять и сделать компактнее */

.profile-nav-item .nav-badge {
  margin-left: auto;
  font-size: 9px;
  padding: 1px 6px;
}
/* Жёстко выравниваем весь текст в правом меню по левому краю */

.profile-nav-list {
  text-align: left;
}

.profile-nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 10px;
  font-size: 11px;
}

.profile-nav-item > * {
  text-align: left !important;
}

/* основной текст пункта (второй span) всегда слева */
.profile-nav-item span:nth-of-type(1) {
  text-align: left;
}

/* бейдж уходим вправо */
.profile-nav-item .nav-badge {
  margin-left: auto;
  text-align: center;
}
/* Левая панель: кнопки — выравнивание под карточки */
/* Левая панель: аккуратные кнопки */

.controls-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
  column-gap: 5px;
  width: 100%;
  box-sizing: border-box;
  align-items: stretch;
}

.controls-row #clearPlacesBtn {
  grid-column: 1;
  justify-self: stretch;
}

.controls-row #addPlaceBtn {
  grid-column: 2;
  justify-content: center;
  justify-self: center;
  font-size: 11px;
  padding: 7px 10px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.controls-row #soundToggleBtn {
  grid-column: 3;
  justify-self: stretch;
}

/* CLEAR и SOUND по краям */
.controls-row #clearPlacesBtn,
.controls-row #soundToggleBtn {
  justify-content: center;
  font-size: 8.5px;
  padding: 6px 4px;
  min-width: 0;
  overflow: hidden;
}
.controls-row #clearPlacesBtn i,
.controls-row #soundToggleBtn i {
  margin-right: 3px;
  font-size: 10px;
}

.controls-row .btn-ghost {
  min-height: 28px;
}
/* AUTH PANEL */

.auth-panel {
  padding: var(--space-12);
  background: var(--ui-auth-panel-bg);
  display: none;
  flex-direction: column;
}

.auth-panel .profile-block {
  margin-bottom: var(--space-8);
}

.auth-field {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth-field label {
  font-size: var(--font-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-olive);
}

.auth-field input {
  background: var(--ui-auth-input-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-auth-input-border);
  padding: 5px 7px;
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--font-md);
}

.auth-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}

.auth-mode-btn {
  border: 1px solid var(--ui-auth-mode-btn-border);
  background: var(--ui-auth-mode-btn-bg);
  color: var(--text-main);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.auth-mode-btn.is-active {
  border-color: var(--ui-auth-mode-btn-active-border);
  color: var(--ui-auth-mode-btn-active-color);
  box-shadow: 0 0 0 1px var(--ui-auth-mode-btn-active-ring) inset;
}

.auth-field select {
  background: var(--ui-auth-input-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-auth-input-border);
  padding: 5px 7px;
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--font-md);
}
.auth-field select option {
  background: var(--ui-auth-input-bg);
  color: var(--text-main);
}

.auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
  margin-bottom: 2px;
}

.auth-text-link {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-auth-link-color);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid var(--ui-auth-link-border);
  padding-bottom: 2px;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-text-link:hover {
  color: var(--ui-auth-link-hover-color);
  border-bottom-color: var(--ui-auth-mode-btn-active-border);
  text-shadow: none;
}

.auth-text-link:focus-visible {
  outline: 1px solid rgba(58, 166, 255, 0.55);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Стрелки года рождения: видимые, в синем неоне (как bucket / time machine) */
.auth-field input[type="number"]::-webkit-inner-spin-button,
.auth-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 1;
  height: 20px;
  cursor: pointer;
  filter: brightness(0.75) saturate(2.2) hue-rotate(168deg)
    drop-shadow(0 0 4px rgba(58, 166, 255, 0.65));
}
.auth-field input[type="number"] {
  color-scheme: var(--ui-auth-input-scheme);
}

.auth-birth-row .auth-birth-grid {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 2fr;
  gap: var(--space-4);
}

.auth-birth-grid input,
.auth-birth-grid select {
  min-width: 0;
}

.auth-religion-row {
  margin-top: var(--space-4);
  display: none;
  flex-wrap: nowrap;
  gap: var(--space-4);
  min-height: 34px;
  align-items: center;
}

.auth-religion-stub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  opacity: 0.58;
  cursor: not-allowed;
  user-select: none;
}

.auth-religion-stub-toggle input {
  cursor: not-allowed;
}

.auth-religion-soon-badge {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(160, 190, 205, 0.88);
  border: 1px solid rgba(125, 252, 138, 0.22);
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.3;
}

.auth-religion-stub-note {
  margin: 6px 0 0;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: rgba(140, 170, 185, 0.72);
}

.auth-religion-row select,
.auth-religion-row input {
  flex: 1;
  min-width: 0;
}

.auth-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.auth-social-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.auth-social-btn {
  flex: 1;
  min-width: 90px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--ui-auth-social-btn-border);
  background: var(--ui-auth-social-btn-bg);
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--font-xs);
  cursor: pointer;
}

.auth-social-btn i {
  font-size: 13px;
}

.auth-social-btn--vk {
  border-color: rgba(76, 117, 163, 0.75);
  color: rgba(170, 205, 255, 0.95);
}

.auth-social-btn--yandex {
  border-color: rgba(255, 50, 50, 0.55);
  color: rgba(255, 200, 200, 0.95);
}

.auth-zone-badge {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid rgba(125, 252, 138, 0.22);
  background: rgba(125, 252, 138, 0.06);
  color: rgba(190, 235, 200, 0.92);
}

.auth-zone-badge[data-zone="rf"] {
  border-color: rgba(120, 180, 255, 0.28);
  background: rgba(80, 140, 255, 0.08);
  color: rgba(190, 215, 255, 0.95);
}

.auth-panel.auth-panel--login {
  padding: 10px 12px 12px;
  overflow: hidden;
  justify-content: flex-start;
}

.auth-panel.auth-panel--login .profile-body {
  gap: 8px;
  margin-top: 6px;
  flex: 0 1 auto;
  min-height: 0;
  overflow: visible;
}

.auth-panel:not(.auth-panel--login) {
  position: absolute;
  inset: 0;
  z-index: 40;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

.auth-panel:not(.auth-panel--login) .profile-head {
  flex-shrink: 0;
}

.auth-panel:not(.auth-panel--login) .profile-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}

.auth-panel.auth-panel--login .auth-block--login .profile-block {
  margin-bottom: 0;
}

.auth-panel.auth-panel--login .auth-caption-tight {
  margin-top: 6px;
  display: block;
}

.auth-panel.auth-panel--login .auth-social-row--compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.auth-panel.auth-panel--login .auth-social-btn {
  padding: 5px 6px;
  font-size: 9px;
}

.auth-panel.auth-panel--login .auth-social-btn span {
  display: none;
}

.auth-panel.auth-panel--login .auth-actions-row--tight {
  margin-top: 8px;
}

/* Registration: security check in a separate overlay (not inside scroll column) */
.auth-captcha-overlay {
  position: fixed;
  inset: 0;
  z-index: 10060;
  display: grid;
  place-items: center;
  padding: 16px;
  box-sizing: border-box;
}
.auth-captcha-overlay[hidden] {
  display: none !important;
}
.auth-captcha-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 4, 0.76);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.auth-captcha-modal {
  position: relative;
  z-index: 1;
  width: min(380px, 100%);
  max-height: min(88vh, 480px);
  overflow: auto;
  padding: 18px 18px 16px;
  border-radius: 14px;
  border: 1px solid rgba(125, 252, 138, 0.32);
  background: radial-gradient(circle at 0 0, #141d16 0, #050806 78%);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.72);
}
.auth-captcha-modal-title {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-olive);
  margin: 0 0 8px;
}
.auth-captcha-modal-sub {
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
}
.auth-captcha-q {
  display: block;
  font-size: var(--font-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-olive);
  margin-bottom: 6px;
}
.auth-captcha-input {
  width: 100%;
  box-sizing: border-box;
  background: #020304;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(60, 110, 80, 0.9);
  padding: 8px 10px;
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--font-md);
}
.auth-captcha-modal-toolbar {
  margin-top: 10px;
}
.auth-captcha-modal-footer {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.auth-photo-grid {
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  max-height: 132px;
  overflow-y: auto;
  padding-right: 4px;
}

.auth-photo-grid .auth-photo-thumb {
  width: 100%;
  padding-top: 100%;
  position: relative;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(90, 150, 110, 0.9);
  overflow: hidden;
  background: #050806;
  cursor: pointer;
}

.auth-photo-grid .auth-photo-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-photo-grid .auth-photo-thumb.is-primary {
  border-color: rgba(125, 252, 138, 0.92);
  box-shadow: 0 0 0 1px rgba(125, 252, 138, 0.5), 0 0 14px rgba(125, 252, 138, 0.35);
}

.auth-photo-grid .auth-photo-thumb.is-primary::after {
  content: "MAIN";
  position: absolute;
  left: 4px;
  bottom: 4px;
  padding: 1px 4px;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: rgba(233, 255, 240, 0.98);
  border: 1px solid rgba(125, 252, 138, 0.7);
  background: rgba(5, 16, 10, 0.82);
}

.auth-photo-remove {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 130, 150, 0.65);
  background: rgba(24, 4, 8, 0.82);
  color: rgba(255, 204, 214, 0.96);
  line-height: 14px;
  text-align: center;
  font-size: 12px;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}

.auth-note {
  font-size: var(--font-xs);
  color: var(--text-dim);
  margin-top: 4px;
}

.right-panel-wrapper {
  position: relative;
  height: 100%;
}
/* auth-панель поверх правого меню, того же размера */
.auth-panel {
  display: none;
  flex-direction: column;
}
.avatar-circle {
  position: relative;
  cursor: pointer;
}

.avatar-hint {
  position: absolute;
  inset-inline: 0;
  bottom: -14px;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.avatar-circle:hover .avatar-hint {
  opacity: 1;
  transform: translateY(0);
}
.auth-legal {
  margin-top: var(--space-4);
  margin-bottom: var(--space-12);
  padding-top: var(--space-2);
  border-top: 1px solid var(--accent-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.4;
}

.auth-panel .auth-legal + .profile-block {
  margin-top: var(--space-4);
}

.auth-legal-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.auth-legal-item input[type="checkbox"] {
  margin-top: 2px;
}

.auth-legal-read-btn {
  display: inline;
  margin: 0 2px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--ui-auth-legal-link-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.auth-legal-read-btn:hover {
  color: var(--ui-auth-legal-link-hover-color);
}

.auth-legal-read-link,
.footer-legal-link {
  display: inline;
  margin: 0 2px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: var(--ui-auth-legal-link-color, var(--green));
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.auth-legal-read-link:hover,
.footer-legal-link:hover {
  color: var(--ui-auth-legal-link-hover-color, #8ef0c8);
}

.legal-info-foot-warn .footer-legal-link {
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/*Записаная книжка*/

.notebook-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: radial-gradient(
    circle at top,
    #07131b 0%,
    #02070b 40%,
    #000 100%
  );
  border-radius: var(--radius-lg);
  border: 1px solid rgba(80, 180, 255, 0.4);
  padding: var(--space-6);
  box-shadow: 0 0 0 1px rgba(3, 255, 213, 0.1), 0 20px 40px rgba(0, 0, 0, 0.7);
}

/* ИКОНКА NODE NOTEBOOK В ШАПКЕ */

.notebook-header-main {
  display: flex;
  flex-direction: column; /* вместо row */
  align-items: center; /* центр по горизонтали */
  gap: 4px;
}

.notebook-header-icon {
  width: 40px; /* было 30px */
  height: 40px; /* было 30px */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  border: 1px solid rgba(143, 211, 255, 0.7);
  background: transparent;
  transform: translateY(4px); /* вместо -8px, чуть опускаем вниз */
}

.notebook-header-icon i {
  font-size: 20px; /* было 11px */
  color: #8fd3ff;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.notebook-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  position: relative;
}

.notebook-header-row {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: -6px;
  padding: var(--ui-chrome-inset) 0 var(--space-3);
  min-height: 72px;
  box-sizing: border-box;
}

.notebook-header-row #notebookShareBtn {
  position: absolute;
  left: var(--ui-chrome-inset);
  top: var(--ui-chrome-inset);
  z-index: 5;
}

.notebook-head-btn {
  width: 82px;
  flex: 0 0 82px;
  border: 2px solid rgba(143, 211, 255, 0.62);
  background: linear-gradient(
    160deg,
    rgba(10, 24, 34, 0.86),
    rgba(6, 16, 22, 0.75)
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(208, 238, 255, 0.96);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.35);
}

.notebook-head-btn:hover {
  color: rgba(125, 252, 138, 0.9);
  border-color: rgba(125, 252, 138, 0.72);
}

.notebook-head-btn--close {
  font-weight: 700;
}

.notebook-head-btn--close.ui-close {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  flex: 0 0 28px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.notebook-close-x {
  font-size: 18px;
  line-height: 1;
  margin-left: 5px;
  transform: translateY(1px);
  display: inline-block;
}

/* Center title block — chrome buttons are absolute left/right */
.notebook-header .notebook-header-main {
  flex: 0 0 auto;
  width: auto;
  max-width: min(100%, 520px);
  justify-content: center;
  text-align: center;
  margin: 0 auto;
}

/* Share overlay: social buttons (placeholders) */
.share-social-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.share-social-btn {
  border: 1px solid rgba(58, 166, 255, 0.25);
  background: rgba(5, 12, 10, 0.35);
  color: rgba(143, 211, 255, 0.85);
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 66px;
}

.share-social-btn i {
  font-size: 18px;
}

.share-social-btn span {
  font-size: 8.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.95;
  line-height: 1.15;
  text-align: center;
}

.share-social-btn:hover {
  border-color: rgba(125, 252, 138, 0.35);
  color: rgba(125, 252, 138, 0.9);
  background: rgba(10, 20, 14, 0.45);
}

.share-social-btn--inapp {
  border-color: rgba(125, 252, 138, 0.42);
  background: linear-gradient(180deg, rgba(18, 42, 28, 0.72), rgba(8, 16, 12, 0.55));
  color: rgba(190, 255, 210, 0.96);
  box-shadow:
    inset 0 0 0 1px rgba(125, 252, 138, 0.12),
    0 0 14px rgba(58, 166, 255, 0.08);
}

.share-social-btn--inapp i {
  color: rgba(125, 252, 138, 0.95);
}

.share-social-btn--inapp:hover {
  border-color: rgba(125, 252, 138, 0.62);
  background: linear-gradient(180deg, rgba(22, 52, 34, 0.82), rgba(10, 20, 14, 0.62));
  box-shadow:
    inset 0 0 0 1px rgba(125, 252, 138, 0.2),
    0 0 18px rgba(125, 252, 138, 0.14);
}

@media (max-width: 520px) {
  .share-social-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Folder picker for safe notebook sharing from chat */
.nb-share-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nb-share-picker-window {
  width: min(420px, calc(100% - 12px));
  border-radius: 10px;
  border: 1px solid rgba(143, 211, 255, 0.38);
  background: linear-gradient(
    165deg,
    rgba(14, 24, 20, 0.96) 0%,
    rgba(4, 10, 8, 0.98) 100%
  );
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8);
  padding: 14px;
  color: var(--text-main);
}

.nb-share-picker-title {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}

.nb-share-picker-sub {
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: var(--font-xs);
  line-height: 1.4;
}

.nb-share-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notebook-title {
  text-align: center;
  font-size: 14px; /* чуть крупнее, было 18 */
}

.notebook-subtitle {
  text-align: center;
  font-size: 9px; /* можно варьировать 11–12 */
}

.notebook-close-btn {
  /* legacy selector left for compatibility (button id stays the same) */
  position: static;
}

/* ПАПКИ В БЛОКНОТЕ */

.notebook-folders-row {
  display: flex;
  flex-direction: column; /* в колонку */
  align-items: center; /* центр по горизонтали */
  gap: 6px;
  margin-top: 10px; /* отступ вниз от NODE NOTEBOOK */
  margin-bottom: 10px;
}

.notebook-folders {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* сами папки по центру */
  gap: 6px;
}

.notebook-folder {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(80, 180, 255, 0.4);
  background: rgba(3, 10, 18, 0.85);
  color: rgba(230, 243, 255, 0.9);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    transform 0.08s ease;
}
.notebook-folder:hover {
  transform: translateY(-0.5px);
  border-color: rgba(80, 180, 255, 0.9);
}

.notebook-folder.active {
  border-color: rgba(125, 252, 138, 0.85);
  background: rgba(125, 252, 138, 0.16);
  color: #e8fff0;
  box-shadow: 0 0 0 1px rgba(125, 252, 138, 0.4), 0 0 16px rgba(125, 252, 138, 0.14);
}

/* плюс для добавления папки */

.notebook-folder-add-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(80, 180, 255, 0.7);
  background: rgba(3, 10, 18, 0.95);
  color: #8fd3ff;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* всплывающий ввод папки */

.notebook-folder-add {
  display: flex;
  align-items: center;
  gap: 4px;
}

.notebook-folder-input {
  width: 120px;
  padding: 4px 6px;
  border-radius: 3px;
  border: 1px solid rgba(80, 180, 255, 0.4);
  background: rgba(3, 10, 18, 0.9);
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
}

.notebook-folder-input::placeholder {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
}

.notebook-folder-ok-btn {
  padding: 4px 7px;
  border-radius: 3px;
  border: 1px solid rgba(80, 180, 255, 0.7);
  background: rgba(3, 10, 18, 0.95);
  color: #8fd3ff;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.notebook-folder-ctx {
  position: fixed;
  z-index: 12050;
  min-width: 132px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(125, 252, 138, 0.28);
  background: linear-gradient(165deg, rgba(10, 18, 16, 0.97), rgba(4, 8, 7, 0.98));
  box-shadow:
    0 0 0 1px rgba(58, 166, 255, 0.12),
    0 14px 36px rgba(0, 0, 0, 0.65),
    0 0 24px rgba(58, 166, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: notebook-ctx-in 0.16s ease-out;
}

.notebook-folder-ctx[hidden] {
  display: none !important;
}

@keyframes notebook-ctx-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notebook-folder-ctx-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: rgba(225, 245, 235, 0.92);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.notebook-folder-ctx-btn i {
  width: 14px;
  text-align: center;
  font-size: 11px;
  color: rgba(143, 211, 255, 0.9);
}

.notebook-folder-ctx-btn--share i {
  color: rgba(100, 220, 255, 0.95);
}

.notebook-folder-ctx-btn--share:hover,
.notebook-folder-ctx-btn--share:focus-visible {
  border-color: rgba(80, 200, 255, 0.45);
  background: rgba(40, 120, 160, 0.18);
}

.notebook-folder-ctx-btn:hover,
.notebook-folder-ctx-btn:focus-visible {
  border-color: rgba(58, 166, 255, 0.35);
  background: rgba(58, 166, 255, 0.1);
}

.notebook-folder-ctx-btn--danger i {
  color: rgba(255, 140, 140, 0.95);
}

.notebook-folder-ctx-btn--danger:hover,
.notebook-folder-ctx-btn--danger:focus-visible {
  border-color: rgba(255, 100, 100, 0.4);
  background: rgba(80, 20, 20, 0.35);
  color: rgba(255, 210, 210, 0.98);
}

.notebook-folder.is-ctx-target {
  box-shadow: 0 0 0 1px rgba(125, 252, 138, 0.55), 0 0 14px rgba(125, 252, 138, 0.2);
}

/* ИНПУТ + ФИЛЬТРЫ */

.notebook-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.notebook-input {
  flex: 1 1 auto;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 180, 255, 0.4);
  background: rgba(3, 10, 18, 0.9);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  letter-spacing: 0.06em;
  /*text-transform: uppercase;*/
  caret-color: #48f6c4;
}

.notebook-input::placeholder {
  /*text-transform: uppercase;*/
  letter-spacing: 0.06em;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
}

/* маленькая кнопка справа внутри строки */

.notebook-add-btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: var(--radius-sm); /* вместо 999px */
  border: 1px solid rgba(80, 180, 255, 0.4); /* как у input */
  background: rgba(3, 10, 18, 0.9); /* как у input */
  color: rgba(230, 243, 255, 0.9);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease,
    transform 0.08s ease, color 0.15s ease;
}

.notebook-add-btn:hover {
  background: rgba(20, 120, 255, 0.18);
  border-color: rgba(80, 180, 255, 0.9);
}

.notebook-add-btn:active {
  transform: translateY(0.5px);
}

/* фильтры под инпутом */

.notebook-filters {
  display: flex;
  justify-content: center; /* центрируем по ширине */
  gap: 18px;
  margin-top: 8px;
  margin-bottom: 12px;
}

.notebook-filter {
  border: none;
  background: transparent;
  padding: 4px 0;
  font-size: 12px; /* было 11px */
  letter-spacing: 0.18em; /* чуть шире */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  position: relative;
  font-weight: 600; /* пожирнее */
}

.notebook-filter.active {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(72, 246, 196, 0.7);
}

.notebook-filter.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #48f6c4, #4fa3ff);
}

/* СПИСОК ЗАДАЧ */

.notebook-list {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.notebook-empty {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.9;
}

/* строка задачи с разделителями */

.notebook-item {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  padding: 7px 4px;
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.notebook-item-main {
  min-width: 0;
  overflow-wrap: break-word; /* перенос длинных слов/ссылок */
}

.notebook-item-main span {
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* чекбокс */

.notebook-item input[type="checkbox"] {
  width: 10px;
  height: 10px;
  border-radius: 4px;
}

/* мета-текст под задачей (если есть) */

.notebook-item-meta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

/* экшены справа */

.notebook-item-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.notebook-icon-btn {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(2, 8, 14, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease,
    transform 0.08s ease, color 0.15s ease;
}

.notebook-icon-btn i {
  font-size: 13px;
}

.notebook-icon-btn:hover {
  background: rgba(20, 120, 255, 0.18);
  border-color: rgba(80, 180, 255, 0.9);
  color: #ffffff;
  transform: translateY(-0.5px);
}

.notebook-icon-btn:active {
  transform: translateY(0);
}

/* состояния */

.notebook-item.done {
  border-color: rgba(122, 247, 193, 0.8);
}

.notebook-item.done .notebook-item-main span {
  color: rgba(180, 255, 200, 0.9);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* пропущенная задача (SKIPPED) — точечное перечёркивание */
.notebook-item.skipped .notebook-item-main span {
  color: #f6a76a;
  text-decoration: line-through;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  opacity: 0.9;
}

.notebook-item.skipped {
  border-color: rgba(246, 167, 106, 0.8);
}

.notebook-footer {
  margin-top: var(--space-3);
  font-size: var(--font-xs);
  color: var(--text-dim);
  opacity: 0.9;
}
/* (legacy block) — без синего градиента, только чёрный фон под canvas */
.intro-screen .intro-network-bg {
  background: #000000;
}

/* чтобы интро-блок не «расползался» */
.intro-screen .intro-inner {
  position: relative;
  z-index: 12;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* During intro: hide bottom screen toasts/celebrations — keep intro box (slogan + bar) visible */
body.intro-active .global-toast-root,
body.intro-active #celebrationOverlay {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Слоган-терминал */
.intro-slogan {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  font-family: var(--font-mono);
  white-space: normal;
  overflow: hidden;
  max-width: 100%;
  min-height: 1.35em;
  line-height: 1.35;
  word-break: break-word;
  padding: 0 4px;
  box-sizing: border-box;
}

/* Blinking typewriter cursor — only while typing */
.intro-slogan.is-typing::after {
  content: "_";
  display: inline-block;
  margin-left: 2px;
  vertical-align: baseline;
  animation: intro-cursor-blink 0.8s steps(1) infinite;
}

@keyframes intro-cursor-blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}

/* Блок загрузки */
.intro-loading {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.intro-loading-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  border: 1px solid rgba(125, 252, 138, 0.7);
  overflow: hidden;
  background: rgba(4, 8, 6, 0.9);
}

.intro-loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3aa6ff, #7dfc8a);
  box-shadow: 0 0 8px rgba(125, 252, 138, 0.7);
  transition: width 0.2s linear;
}

.intro-loading-text {
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--font-mono);
}

/* Плавное скрытие интро */
.intro-screen.hide {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
/* ===== MY PAGE (FULLSCREEN PROFILE) ===== */

/* Экран профиля */

.my-page-screen {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: var(--my-page-screen-bg);
  color: var(--text-main);
  color-scheme: var(--my-page-color-scheme, dark);
  font-family: var(--font-mypage);
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
  padding: 0;
}

.my-page-ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.88;
}

.my-page-screen > .my-page-shell {
  z-index: 1;
}

/* Centered column (VK / OK / classic FB width), not edge-to-edge */
.my-page-shell {
  font-family: var(--font-mypage);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --my-page-max-w: 1200px;
  width: min(var(--my-page-max-w), 100%);
  max-width: var(--my-page-max-w);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  flex: 0 1 auto;
  border-radius: 0;
  border: none;
  box-shadow: none;
  position: relative;
  isolation: isolate;
  background: rgba(5, 9, 7, 0.78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  --my-page-center-x: 10px;
  --my-page-rail-max: 216px;
  --my-page-col-gap: 8px;
  --my-page-radius-rail: 14px;
  --my-page-radius-card: 14px;
  --my-page-radius-chip: 12px;
  --my-page-card-bg: var(--theme-my-page-card-bg);
  --my-page-card-border: var(--theme-my-page-card-border);
  --my-page-card-shadow: var(--theme-my-page-card-shadow);
}

/* MY PAGE design system — darker cards, unified radius, calmer surfaces */
.my-page-shell .my-page-card,
.my-page-shell .tf-composer-premium.my-page-card {
  background: var(--my-page-card-bg) !important;
  border-color: var(--my-page-card-border) !important;
  box-shadow: var(--my-page-card-shadow) !important;
  border-radius: var(--my-page-radius-card) !important;
}

.my-page-shell .tf-composer-premium {
  border-radius: var(--my-page-radius-card) !important;
  background: var(--my-page-card-bg) !important;
  border-color: var(--my-page-card-border) !important;
  box-shadow: var(--my-page-card-shadow) !important;
}

.my-page-shell .my-page-left .my-page-nav,
.my-page-shell .my-page-right .my-page-side.my-page-side-active,
.my-page-shell .my-page-friend-panel {
  border-radius: var(--my-page-radius-rail);
}

.my-page-shell .my-page-nav-item {
  border-radius: var(--my-page-radius-chip);
  border: 1px solid transparent;
}

.my-page-shell .my-page-nav-item.is-active {
  border-color: var(--my-page-nav-active-border) !important;
  background: var(--my-page-nav-active-bg) !important;
  color: var(--my-page-nav-active-color) !important;
  box-shadow: var(--my-page-nav-active-shadow) !important;
}

.my-page-shell .message-dialog-item,
.my-page-shell .friend-row.card-base,
.my-page-shell .mp-timeline-item,
.my-page-shell .mp-audio-history-item,
.my-page-shell .mp-groups-list li,
.my-page-shell .mp-media-country,
.my-page-shell .mp-node-folder-btn {
  border-radius: var(--my-page-radius-chip);
}

.my-page-shell .my-page-section-sub,
.my-page-shell .mp-side-sub {
  color: var(--my-page-muted-text);
}

.my-page-shell .friends-online-empty {
  color: var(--my-page-empty-text);
  font-size: 10px;
  padding: 10px 8px;
  text-align: center;
}

.mp-quick-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.mp-quick-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px;
  border-radius: var(--my-page-radius-chip, 12px);
  border: 1px solid var(--my-page-stat-border);
  background: var(--my-page-stat-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mp-quick-stat-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--my-page-stat-label);
}

.mp-quick-stat-value {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--my-page-stat-value);
  text-shadow: var(--my-page-stat-value-glow);
}

.my-page-shell .tf-travel-features-brand {
  border-radius: var(--my-page-radius-chip);
  border: 1px solid var(--my-page-brand-chip-border);
  background: var(--my-page-brand-chip-bg);
}

.my-page-shell .tf-post {
  border-radius: var(--my-page-radius-card);
}

.my-page-shell .dating-card {
  border-radius: var(--my-page-radius-card);
  background: var(--my-page-card-bg);
  border-color: var(--my-page-card-border);
}

.my-page-shell .mp-mini-btn,
.my-page-shell .message-new-btn,
.my-page-shell .friend-action-btn,
.my-page-shell .mp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--my-page-btn-border);
  background: var(--my-page-btn-bg);
  color: var(--my-page-btn-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
  -webkit-font-smoothing: antialiased;
}

.my-page-shell .mp-mini-btn-primary,
.my-page-shell .message-new-btn,
.my-page-shell .mp-btn--primary {
  border-color: var(--my-page-btn-primary-border);
  background: var(--my-page-btn-primary-bg);
  color: var(--my-page-btn-primary-text);
}

.my-page-shell .mp-btn--secondary {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.88);
}

.my-page-shell .mp-btn--icon {
  width: 32px;
  min-width: 32px;
  padding: 0;
  font-size: 14px;
}

.my-page-shell .mp-mini-btn:hover,
.my-page-shell .message-new-btn:hover,
.my-page-shell .friend-action-btn:hover,
.my-page-shell .mp-btn:hover {
  border-color: var(--my-page-btn-hover-border);
  background: var(--my-page-btn-hover-bg);
}

.my-page-shell .mp-btn--primary:hover,
.my-page-shell .mp-mini-btn-primary:hover {
  box-shadow: 0 0 14px rgba(125, 252, 138, 0.18);
}

.my-page-shell .mp-btn--secondary:hover {
  border-color: rgba(236, 202, 116, 0.42);
  background: rgba(236, 202, 116, 0.08);
  color: rgba(255, 248, 232, 0.96);
}

.my-page-shell .message-dialogs-search {
  border-radius: var(--my-page-radius-chip);
  border-color: var(--my-page-search-border);
  background: var(--my-page-search-bg);
}

.my-page-shell .message-dialog-item.active {
  border-color: var(--my-page-dialog-active-border);
  background: var(--my-page-dialog-active-bg);
  box-shadow: var(--my-page-dialog-item-active-shadow);
}

.my-page-shell .message-dialog-item {
  border-color: var(--my-page-dialog-item-border);
  background: var(--my-page-dialog-item-bg);
  box-shadow: var(--my-page-dialog-item-shadow);
}

.my-page-shell .mp-filter-form .mp-field-input,
.my-page-shell .mp-field-input {
  border-radius: 8px;
  border-color: var(--my-page-input-border);
  background: var(--my-page-input-bg);
}

.my-page-shell .mp-search-flash {
  animation: mp-search-flash 1.1s ease-out 1;
  outline: 1px solid var(--my-page-flash-outline);
}

/* Outer frame: single uniform stroke on top of all MY PAGE content */
.my-page-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
  border: 1px solid var(--my-page-shell-outline);
  box-sizing: border-box;
  border-radius: 0;
}

.my-page-shell::after {
  display: none;
}

.my-page-shell > * {
  position: relative;
  z-index: 1;
}

/* My Page: one premium UI family (aligned with global app typography) */
.my-page-shell .my-page-col-title,
.my-page-shell .my-page-section-sub,
.my-page-shell .my-page-card-title,
.my-page-shell .my-page-name,
.my-page-shell .tf-composer-head-label,
.my-page-shell .message-chat .msg-text {
  font-family: var(--font-mypage);
}

.my-page-shell .my-page-meta-item,
.my-page-shell .mp-side-sub {
  font-family: var(--font-mypage);
  letter-spacing: 0.04em;
}

/* Global fixed bar (эскиз: поиск + кнопки сверху) */
.my-page-global-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: minmax(0, 158px) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  background: var(--my-page-topbar-bg);
  border-bottom: 1px solid var(--my-page-topbar-border);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--my-page-topbar-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.my-page-global-logo {
  font-family: var(--font-mypage);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-olive);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.my-page-global-logo-text {
  line-height: 1;
}

.my-page-global-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--my-page-global-search-border);
  background: var(--my-page-global-search-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.my-page-global-search i {
  color: var(--text-dim);
  font-size: 12px;
}

.my-page-global-search input {
  width: 100%;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-main);
  outline: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
}

.my-page-global-search input::placeholder {
  color: var(--my-page-global-search-placeholder);
}

/* Search: keep same chrome when focused — no inner blue ring */
.my-page-shell .my-page-global-search:focus-within {
  border-color: var(--my-page-global-search-border);
  background: var(--my-page-global-search-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.my-page-shell .my-page-global-search input:focus,
.my-page-shell .my-page-global-search input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.my-page-global-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.my-page-global-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--my-page-global-btn-border);
  background: var(--my-page-global-btn-bg);
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease,
    border-color 0.15s ease;
}

.my-page-global-btn:hover {
  background: var(--my-page-global-btn-hover-bg);
  color: var(--text-main);
  border-color: var(--my-page-global-btn-hover-border);
  transform: translateY(-1px);
}

.my-page-global-btn i {
  font-size: 12px;
  color: var(--my-page-global-btn-icon);
}

/* Legal footer: линия на всю ширину окна, затем «воздух» и блок текста (колонки выше доходят до края визуально) */
.my-page-legal-bar {
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: 2px;
  z-index: 8;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.my-page-legal-bar--compact .my-page-legal-edge {
  margin: 4px 8px 0;
  opacity: 0.85;
}

.my-page-legal-inner--compact {
  margin: 0 6px 0;
  padding: 2px 10px 4px;
  gap: 0;
  align-items: stretch;
  border-radius: 0 0 10px 10px;
  background: var(--my-page-legal-inner-bg);
}

.my-page-legal-micro {
  margin: 0;
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--my-page-legal-text);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.my-page-legal-line {
  display: block;
  max-width: 42rem;
}

.my-page-legal-line + .my-page-legal-line {
  margin-top: 1px;
  font-size: 8.5px;
  color: var(--my-page-legal-text-dim);
  line-height: 1.4;
}

.my-page-legal-link--inline {
  display: inline;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  font-weight: 600 !important;
  vertical-align: baseline;
  margin: 0 1px;
  border-bottom: 1px dashed var(--my-page-legal-link-border);
}

.my-page-legal-edge {
  height: 1px;
  margin: 0 12px 0;
  background: var(--my-page-legal-edge);
  box-shadow: var(--my-page-legal-edge-glow);
}

.my-page-legal-inner {
  margin: 0 8px;
  padding: 20px 14px 24px;
  border-radius: 0 0 12px 12px;
  background: var(--my-page-legal-inner-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.my-page-legal-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--my-page-legal-copy);
  line-height: 1.5;
  max-width: 28rem;
}

.my-page-legal-brand {
  font-family: var(--font-mypage);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--my-page-legal-brand);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.my-page-legal-sub {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--my-page-legal-sub);
}

.my-page-legal-rights {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--my-page-legal-rights);
  margin-top: 2px;
}

.my-page-legal-ip {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--my-page-legal-ip);
  line-height: 1.45;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--my-page-legal-ip-border);
}

.my-page-legal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
}

.my-page-legal-link {
  color: var(--my-page-legal-link);
  text-decoration: none;
  border: none;
  border-bottom: 1px dashed var(--my-page-legal-link-border);
  padding: 0;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.my-page-legal-link:hover {
  color: var(--my-page-legal-link-hover);
  border-bottom-color: var(--my-page-legal-link-hover-border);
}

button.my-page-legal-link {
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  background: none;
  outline: none;
}

button.my-page-legal-link:focus-visible {
  border-bottom-color: var(--my-page-legal-link-hover-border);
  color: var(--my-page-legal-link-hover);
}

.footer-legal-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--ui-footer-legal-btn-color);
  font-size: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-legal-btn:focus-visible {
  outline: none;
  color: var(--ui-footer-legal-btn-hover);
}

.footer-legal-btn:hover {
  color: var(--ui-footer-legal-btn-hover);
}

.footer-legal-sep {
  margin: 0 4px;
  color: rgba(120, 160, 130, 0.45);
}

/* Top glass bar */

.my-page-top-bar {
  position: absolute;
  top: 34px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    rgba(8, 18, 14, 0.96),
    rgba(3, 8, 6, 0.94)
  );
  border: 1px solid rgba(180, 255, 220, 0.16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7), 0 10px 24px rgba(0, 0, 0, 0.75),
    0 0 0 1px rgba(2, 6, 4, 0.9);
}

.my-page-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.my-page-top-btn i {
  font-size: 11px;
}

.my-page-top-btn:hover {
  background: rgba(58, 166, 255, 0.16);
  color: var(--text-main);
  transform: translateY(-1px);
}

.my-page-top-btn-accent {
  background: rgba(58, 166, 255, 0.22);
  color: var(--blue);
}

.my-page-top-btn-accent:hover {
  background: rgba(58, 166, 255, 0.3);
}

/* Header */

.my-page-header {
  position: sticky;
  top: 38px;
  z-index: 6;
  height: 148px;
  overflow: hidden;
  flex-shrink: 0;
}

/* Единая сетка: левое меню / центр / правые блоки */
.my-page-layout {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 6px 14px 2px;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr) 228px;
  column-gap: 14px;
  align-items: stretch;
}

.my-page-left {
  position: relative;
  padding-right: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  gap: 0;
}

.my-page-center {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: visible;
  align-items: stretch;
}

.my-page-right {
  position: relative;
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* ОДНА линия-разделитель между колонками + правая рамка */
.my-page-left::after,
.my-page-center::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -8px;
  width: 1px;
  background: var(--my-page-col-divider);
  box-shadow: var(--my-page-col-divider-glow);
  pointer-events: none;
  z-index: 4;
}

.my-page-layout::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  background: var(--my-page-layout-edge);
  box-shadow: var(--my-page-layout-edge-glow);
  pointer-events: none;
  z-index: 3;
}

.my-page-center .my-page-section {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Column headers: no dark band — title + full-width shimmer line */
.my-page-col-header {
  position: sticky;
  top: 0;
  z-index: 3;
  flex-shrink: 0;
  width: 100%;
  padding: 4px var(--my-page-center-x, 10px) 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-sizing: border-box;
}

.my-page-col-header::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 6px;
  margin-bottom: var(--my-page-col-gap, 8px);
  border-radius: 1px;
  background: linear-gradient(
    90deg,
    rgba(58, 166, 255, 0.05),
    rgba(58, 166, 255, 0.55),
    rgba(125, 252, 138, 0.75),
    rgba(58, 166, 255, 0.55),
    rgba(58, 166, 255, 0.05)
  );
  background-size: 220% 100%;
  animation: mp-col-line-flow 5.5s ease-in-out infinite;
  box-shadow: 0 0 14px rgba(58, 166, 255, 0.22), 0 0 18px rgba(125, 252, 138, 0.14);
}

@keyframes mp-col-line-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.my-page-col-title {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mypage);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--my-page-col-title-color);
  text-shadow: var(--my-page-col-title-shadow);
  position: relative;
  margin: 0;
  width: 100%;
}

.my-page-side-title {
  font-family: var(--font-mypage);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--my-page-side-title-color);
  margin: 0 0 6px;
  line-height: 1.25;
}

.my-page-col-title::after {
  display: none;
}

/* Контент в колонках начинается одинаково под линией */
.my-page-nav,
.my-page-section,
.my-page-side-section {
  padding-top: 6px;
}

/* Скролл внутри колонок (а не всей страницы) */
.my-page-left .my-page-col-header {
  width: 100%;
  max-width: var(--my-page-rail-max);
  padding-left: 0;
  padding-right: 0;
}

.my-page-left .my-page-nav {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: var(--my-page-rail-max);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  overflow: hidden !important;
  padding: 0 !important;
  margin-bottom: var(--my-page-col-gap, 12px);
  border: 1px solid var(--my-page-rail-border);
  border-radius: var(--mnm-rounded-panel-radius, 14px);
  background: var(--my-page-rail-bg);
  box-shadow: var(--my-page-rail-inset);
  box-sizing: border-box;
}

.my-page-left .my-page-nav-list.mnm-scroll-rail {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 12px 10px;
  box-sizing: border-box;
}

.my-page-center .my-page-view {
  display: none;
}
.my-page-center .my-page-col-header {
  padding-left: var(--my-page-center-x, 10px);
  padding-right: var(--my-page-center-x, 10px);
}

.my-page-center .my-page-view.my-page-view-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-left: var(--my-page-center-x, 10px);
  padding-right: var(--my-page-center-x, 10px);
  padding-bottom: var(--my-page-col-gap, 12px);
  margin-top: 0;
  scrollbar-gutter: stable both-edges;
  align-items: stretch;
  box-sizing: border-box;
}

.my-page-screen[data-mode="messages"] .my-page-center .my-page-view.my-page-view-active {
  overflow: hidden; /* в messages скролл только в логе */
}

.my-page-screen[data-mode="messages"] .my-page-legal-bar {
  display: none;
}

.my-page-screen[data-mode="messages"] .my-page-layout {
  padding-bottom: 6px;
}

.my-page-right .my-page-side {
  display: none;
}
.my-page-right .my-page-col-header {
  width: 100%;
  max-width: var(--my-page-rail-max);
  padding-left: 0;
  padding-right: 0;
}

.my-page-right .my-page-side.my-page-side-active,
.my-page-shell .my-page-side.mnm-rounded-scroll-host {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: var(--my-page-rail-max);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  overflow: hidden !important;
  padding: 0 !important;
  margin-bottom: var(--my-page-col-gap, 12px);
  border: 1px solid var(--my-page-rail-border);
  border-radius: var(--mnm-rounded-panel-radius, 14px);
  background: var(--my-page-rail-bg);
  box-shadow: var(--my-page-rail-inset);
  box-sizing: border-box;
}

.my-page-shell .my-page-side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 10px;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

.my-page-screen[data-mode="messages"] .my-page-right .my-page-side.my-page-side-active .my-page-side-scroll,
.my-page-screen[data-mode="messages"] .my-page-right .my-page-side.mnm-rounded-scroll-host .my-page-side-scroll {
  padding: 10px 8px;
}

.my-page-screen[data-mode="messages"] .message-dialogs {
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.my-page-screen[data-mode="messages"] .message-dialogs-list {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.my-page-screen[data-mode="messages"] .message-dialogs-header {
  flex-wrap: wrap;
  min-width: 0;
}

.my-page-screen[data-mode="messages"] .message-dialogs-header-actions {
  flex-wrap: wrap;
  max-width: 100%;
}

.my-page-screen[data-mode="messages"] .message-archived-btn span,
.my-page-screen[data-mode="messages"] .message-new-btn span {
  display: none;
}

.my-page-screen[data-mode="messages"] #myPageViewMessages .msg-input-hint {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.my-page-left .my-page-nav-list {
  width: 100%;
  margin: 0;
}


/* Сообщения: чат тянется по высоте и выглядит ровно */
.message-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  flex: 1;
}

.message-chat-log {
  max-height: none;
  padding: 14px 10px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: min(360px, 48vh);
  background: transparent;
  border: none;
  font-size: var(--font-sm);
}

.message-chat-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ui-chat-sep);
  background: var(--ui-chat-header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: visible;
}

.message-chat-input {
  padding: 10px 12px 12px;
  margin-top: 0;
  flex: 0 0 auto;
  background: var(--ui-chat-input-bg);
  border-top: 1px solid var(--ui-chat-sep);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Сообщения: фиксируем высоту секции, скролл только внутри лога */
#myPageViewMessages.my-page-view-active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

#myPageViewMessages .message-center-card {
  flex: 1;
  min-height: 0;
}

#myPageViewMessages .message-center-body {
  height: 100%;
  min-height: 0;
}

/* Убираем "квадрат-карточку" вокруг чата: оставляем только пузыри */
#myPageViewMessages .message-center-card {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#myPageViewMessages .message-center-body {
  padding: 0 !important;
}
#myPageViewMessages .message-chat {
  min-height: 0;
  height: 100%;
}
#myPageViewMessages .message-chat-input {
  margin-top: auto;
  flex-shrink: 0;
  padding: 12px 12px 16px;
  box-sizing: border-box;
  background: var(--my-page-msg-input-area-bg);
  border-top: 1px solid var(--my-page-msg-input-area-border);
  box-shadow: var(--my-page-msg-input-area-shadow);
}

#myPageViewMessages .msg-input-row {
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
}

#myPageViewMessages .msg-chat-plus-slot {
  align-self: center;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}

#myPageViewMessages .msg-input-send {
  align-self: center;
}

#myPageViewMessages .msg-input-btn {
  width: 42px;
  height: 42px;
  font-size: 15px;
}

#myPageViewMessages .msg-input-cloud {
  border-radius: 16px;
  border-color: var(--my-page-msg-input-cloud-border-view);
  background: var(--my-page-msg-input-cloud-bg-view);
  padding: 8px 10px 6px;
  min-height: 54px;
}

#myPageViewMessages .msg-cloud-actions {
  display: none;
}

#myPageViewMessages .msg-input-hint {
  margin-top: 6px;
  padding-left: 54px;
  font-size: 9px;
  opacity: 0.75;
}

/* Scrollbars (MY PAGE) — те же токены, что и в остальном приложении */
.my-page-shell * {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
}

.my-page-shell *::-webkit-scrollbar {
  width: var(--mnm-scroll-rail-width, 7px);
  height: var(--mnm-scroll-rail-width, 7px);
  background: transparent !important;
}

.my-page-shell *::-webkit-scrollbar-track {
  margin-block: var(--mnm-scroll-rail-inset-rounded, 30px);
  background: transparent !important;
  border-radius: 99px;
}

.my-page-shell *::-webkit-scrollbar-button,
.my-page-shell *::-webkit-scrollbar-button:single-button,
.my-page-shell *::-webkit-scrollbar-button:vertical:start:decrement,
.my-page-shell *::-webkit-scrollbar-button:vertical:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.my-page-shell *::-webkit-scrollbar-thumb {
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* MY PAGE: premium focus — inset glow only (no double “tube” ring) */
.my-page-shell input:not([type="hidden"]):not([type="file"]):focus,
.my-page-shell textarea:focus,
.my-page-shell select:focus {
  outline: none;
}
.my-page-shell select {
  color-scheme: var(--my-page-color-scheme, dark);
}
.my-page-shell select option,
.my-page-shell select optgroup {
  background: var(--my-page-select-option-bg) !important;
  color: var(--my-page-select-option-color) !important;
}
.my-page-shell select option:checked {
  background: var(--my-page-select-option-checked-bg) !important;
  color: var(--my-page-select-option-checked-color) !important;
}
.my-page-shell input:not([type="hidden"]):not([type="file"]):focus-visible,
.my-page-shell textarea:focus-visible,
.my-page-shell select:focus-visible {
  border-color: var(--my-page-input-focus-border) !important;
  box-shadow: var(--my-page-input-focus-shadow) !important;
}
.my-page-shell .my-page-global-search input:focus-visible {
  border-color: transparent !important;
  box-shadow: none !important;
}
.my-page-shell button:focus,
.my-page-shell .msg-input-btn:focus,
.my-page-shell .msg-cloud-btn:focus,
.my-page-shell .tf-attach-btn:focus,
.my-page-shell .tf-quick-react:focus,
.my-page-shell .tf-react-more-btn:focus,
.my-page-shell .tf-picker-emoji:focus {
  outline: none;
}
.my-page-shell button:focus-visible,
.my-page-shell .msg-input-btn:focus-visible,
.my-page-shell .msg-cloud-btn:focus-visible,
.my-page-shell .tf-attach-btn:focus-visible,
.my-page-shell .tf-quick-react:focus-visible,
.my-page-shell .tf-react-more-btn:focus-visible,
.my-page-shell .tf-picker-emoji:focus-visible {
  box-shadow: 0 0 0 1px rgba(143, 211, 255, 0.32), 0 0 0 3px rgba(125, 252, 138, 0.1),
    0 4px 18px rgba(0, 0, 0, 0.28) !important;
}

@keyframes mp-search-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(125, 252, 138, 0.45);
  }
  35% {
    box-shadow: 0 0 0 3px rgba(58, 166, 255, 0.25), 0 0 28px rgba(125, 252, 138, 0.12);
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.my-page-shell .mp-search-flash {
  animation: mp-search-flash 1s ease-out 1;
  border-radius: inherit;
}

/* COUNTRY QUIZ map + checklist */
.cq-map{
  height: 340px;
  border-radius: 14px;
  border: 1px solid rgba(143, 211, 255, 0.18);
  background: radial-gradient(circle at 50% 30%, rgba(15,24,20,.95), rgba(2,3,3,.98));
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.cq-checklist{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cq-check{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(80, 120, 90, 0.35);
  background: rgba(0,0,0,.12);
  color: rgba(236,250,244,.92);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cq-check span{
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cq-check b{
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: rgba(143, 211, 255, 0.95);
}
.cq-check.is-ok{
  border-color: rgba(125, 252, 138, 0.45);
  background: rgba(125, 252, 138, 0.08);
}
.cq-check.is-ok b{ color: rgba(125,252,138,.95); }
.cq-check.is-bad{
  border-color: rgba(255, 122, 140, 0.45);
  background: rgba(255, 64, 96, 0.07);
}
.cq-check.is-bad b{ color: rgba(255,122,140,.95); }

/* Quiz mode fallback: dim map details (including baked labels) */
#map.quiz-dim-mode .mapboxgl-canvas {
  filter: saturate(0.82) brightness(0.74) contrast(0.94);
}

/* ===================================================================== */
/* COUNTRY QUIZ — contour globe edition                                  */
/* ===================================================================== */
.left-panel .app-data-overlay.cq2.visible .cq2-stage,
.cq2 .cq2-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(16, 40, 32, 0.55), rgba(2, 6, 5, 0) 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(58, 166, 255, 0.12), rgba(2, 6, 5, 0) 55%),
    #040706;
}
/* faint starfield */
.cq2 .cq2-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 85% 60%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 12% 80%, rgba(255, 255, 255, 0.28), transparent),
    radial-gradient(1px 1px at 60% 85%, rgba(255, 255, 255, 0.33), transparent);
  opacity: 0.6;
  pointer-events: none;
}

.cq2-globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  z-index: 1;
}
.cq2-globe:active { cursor: grabbing; }

/* ---- HUD bars ---- */
.cq2-hud {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
}
.cq2-hud-top { top: 0; }
.cq2-hud-bottom {
  bottom: 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cq2-hud .cq2-close,
.cq2-hud .cq2-sound-btn,
.cq2-hud .cq2-chip,
.cq2-hud-bottom .cq2-dots,
.cq2-hud-bottom .cq2-hint { pointer-events: auto; }

.mnm-game-sound-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(125, 252, 138, 0.35);
  background: rgba(6, 16, 12, 0.72);
  color: var(--green);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.mnm-game-sound-btn i {
  font-size: 14px;
  pointer-events: none;
}

.mnm-game-sound-btn:hover {
  border-color: rgba(125, 252, 138, 0.65);
  box-shadow: 0 0 14px rgba(125, 252, 138, 0.22);
}

.mnm-game-sound-btn.is-muted {
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.22);
}

.mnm-game-sound-btn.is-muted:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

.cq2-hud-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cq2-hud-actions .cq2-sound-btn {
  margin-right: 8px;
}

.cq2-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cq2-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(125, 252, 138, 0.26);
  background: rgba(6, 16, 12, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.cq2-chip b {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
  color: #eafff0;
  font-variant-numeric: tabular-nums;
}
.cq2-chip--ok { border-color: rgba(125, 252, 138, 0.5); }
.cq2-chip--ok b { color: var(--green); }

/* Combo streak chip */
.cq2-chip--streak {
  border-color: rgba(255, 170, 70, 0.5);
  color: #ffd9a8;
  transition: transform 0.2s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}
.cq2-chip--streak b { color: #ffb347; }
.cq2-chip--streak.is-dim { opacity: 0.45; }
.cq2-chip--streak.is-hot {
  border-color: rgba(255, 130, 50, 0.95);
  background: rgba(40, 18, 6, 0.7);
  box-shadow: 0 0 22px rgba(255, 140, 50, 0.5);
  animation: cqHotPulse 0.7s ease-in-out infinite;
}
.cq2-chip--streak.is-hot b { color: #ffd27a; }
@keyframes cqHotPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

/* Floating +points feedback */
.cq2-gain-host { position: relative; width: 0; height: 0; align-self: center; pointer-events: none; }
.cq2-gain {
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  color: #aaffc4;
  text-shadow: 0 0 16px rgba(125, 252, 138, 0.8);
  animation: cqGainFloat 1s ease-out forwards;
}
.cq2-gain i { font-style: normal; color: #ffb347; font-size: 16px; }
@keyframes cqGainFloat {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.7); }
  25% { opacity: 1; transform: translate(-50%, -2px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -38px) scale(1); }
}

/* Radar hint button */
.cq2-radar {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(120, 220, 255, 0.5);
  background: rgba(6, 18, 26, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #cdeeff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.cq2-radar:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(110, 200, 255, 0.45);
}
.cq2-radar:active:not(:disabled) { transform: translateY(0) scale(0.96); }
.cq2-radar-ico { font-size: 15px; line-height: 1; }
.cq2-radar-count {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(110, 200, 255, 0.2);
  border: 1px solid rgba(120, 220, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 12px;
}
.cq2-radar:disabled { opacity: 0.4; cursor: not-allowed; }
.cq2-radar.is-spent { border-color: rgba(255, 120, 120, 0.4); color: #ffb3b3; }

/* ---- Live leaderboard ---- */
.cq2-board {
  position: absolute;
  right: 16px;
  top: 50%;
  z-index: 4;
  width: 212px;
  pointer-events: none;
  padding: 12px 12px 10px;
  border-radius: 16px;
  border: 1px solid rgba(125, 252, 138, 0.22);
  background: linear-gradient(180deg, rgba(8, 20, 15, 0.8), rgba(4, 10, 8, 0.7));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translate(24px, -50%);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cq2-board.is-on { opacity: 1; transform: translate(0, -50%); }

.cq2-bd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(125, 252, 138, 0.16);
}
.cq2-bd-title {
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 800;
  color: #eafff0;
}
.cq2-bd-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: #ff7a8a;
  font-weight: 700;
}
.cq2-bd-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff5a6e;
  box-shadow: 0 0 8px rgba(255, 90, 110, 0.9);
  animation: cqLiveBlink 1.2s ease-in-out infinite;
}
@keyframes cqLiveBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.cq2-bd-list { display: flex; flex-direction: column; gap: 4px; }
.cq2-bd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.cq2-bd-rank {
  width: 20px;
  text-align: center;
  font-size: 14px;
  flex: 0 0 auto;
}
.cq2-bd-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}
.cq2-bd-av { font-size: 16px; flex: 0 0 auto; }
.cq2-bd-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #d8f5e2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cq2-bd-pts {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #aaffc4;
  font-variant-numeric: tabular-nums;
}
.cq2-bd-row.is-first {
  background: linear-gradient(90deg, rgba(255, 200, 80, 0.16), rgba(255, 200, 80, 0.03));
  border-color: rgba(255, 200, 80, 0.4);
}
.cq2-bd-row.is-you {
  background: linear-gradient(90deg, rgba(125, 252, 138, 0.2), rgba(125, 252, 138, 0.04));
  border-color: rgba(125, 252, 138, 0.55);
  box-shadow: 0 0 18px rgba(125, 252, 138, 0.22);
  animation: cqYouPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cq2-bd-row.is-you .cq2-bd-name { color: #eafff0; font-weight: 800; }
.cq2-bd-row.is-you .cq2-bd-pts { color: #fff; }
.cq2-bd-row.is-you.is-first {
  background: linear-gradient(90deg, rgba(255, 215, 100, 0.28), rgba(125, 252, 138, 0.06));
  border-color: rgba(255, 215, 100, 0.7);
}
@keyframes cqYouPop {
  0% { transform: scale(0.96); }
  55% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@media (max-width: 880px) {
  .cq2-board { display: none; }
}

.cq2-close {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(125, 252, 138, 0.26);
  background: rgba(6, 16, 12, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  flex: 0 0 auto;
}

/* ---- Question block ---- */
.cq2-question {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  pointer-events: none;
  width: min(92vw, 640px);
}
.cq2-kicker {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(125, 252, 138, 0.8);
  margin-bottom: 6px;
}
.cq2-name {
  font-family: "Outfit", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 6vw, 60px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: #f3fff7;
  text-shadow: 0 0 24px rgba(125, 252, 138, 0.35), 0 2px 18px rgba(0, 0, 0, 0.6);
}
.cq2-cap {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---- Hourglass timer ---- */
.cq2-timer {
  margin: 12px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(125, 252, 138, 0.28);
  background: rgba(5, 14, 11, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 0 22px rgba(125, 252, 138, 0.12);
}
.cq2-hourglass { width: 30px; height: 46px; display: block; }
.cq2-glass {
  fill: rgba(125, 252, 138, 0.06);
  stroke: rgba(125, 252, 138, 0.6);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.cq2-glass-cap { fill: rgba(125, 252, 138, 0.7); }
.cq2-sand { fill: var(--green); transition: opacity 0.15s ease; }
.cq2-secs {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  min-width: 1.4em;
  text-align: center;
  text-shadow: 0 0 14px rgba(125, 252, 138, 0.4);
}
.cq2-timer.is-low {
  border-color: rgba(255, 90, 110, 0.6);
  box-shadow: 0 0 26px rgba(255, 90, 110, 0.28);
  animation: cq2-low-pulse 0.8s ease-in-out infinite;
}
.cq2-timer.is-low .cq2-glass { stroke: rgba(255, 110, 130, 0.85); }
.cq2-timer.is-low .cq2-glass-cap { fill: rgba(255, 110, 130, 0.9); }
.cq2-timer.is-low .cq2-sand { fill: #ff5a6e; }
.cq2-timer.is-low .cq2-secs { color: #ff7a8c; text-shadow: 0 0 16px rgba(255, 90, 110, 0.5); }
@keyframes cq2-low-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ---- Round dots + hint ---- */
.cq2-dots { display: flex; gap: 7px; }
.cq2-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(125, 252, 138, 0.16);
  border: 1px solid rgba(125, 252, 138, 0.28);
  transition: transform 0.15s ease, background 0.2s ease;
}
.cq2-dot.is-ok { background: var(--green); border-color: var(--green); box-shadow: 0 0 8px rgba(125, 252, 138, 0.6); }
.cq2-dot.is-bad { background: #ff5a6e; border-color: #ff5a6e; }
.cq2-dot.is-cur { transform: scale(1.5); background: rgba(125, 252, 138, 0.5); }
.cq2-hint {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(5, 14, 11, 0.5);
  border: 1px solid rgba(125, 252, 138, 0.16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ---- Intro / level select / result screen ---- */
.cq2-screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: radial-gradient(120% 100% at 50% 40%, rgba(2, 6, 5, 0.7), rgba(2, 6, 5, 0.92));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cq2-screen.is-on { display: flex; }
.cq2-card {
  width: min(94vw, 460px);
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 20px;
  border: 1px solid rgba(125, 252, 138, 0.28);
  background: linear-gradient(180deg, rgba(10, 22, 17, 0.96), rgba(5, 12, 10, 0.98));
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 50px rgba(125, 252, 138, 0.1);
  padding: 26px 24px 24px;
  text-align: center;
}
.cq2-card-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(125, 252, 138, 0.85);
  border: 1px solid rgba(125, 252, 138, 0.3);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 14px;
}
.cq2-card-title {
  margin: 0 0 8px;
  font-family: "Outfit", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 5vw, 38px);
  letter-spacing: 0.02em;
  color: #f3fff7;
  text-shadow: 0 0 24px rgba(125, 252, 138, 0.3);
}
.cq2-card-sub {
  margin: 0 auto 18px;
  max-width: 38ch;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(210, 235, 222, 0.78);
}
.cq2-card-sub b { color: var(--green); }

.cq2-howto {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  text-align: left;
}
.cq2-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(125, 252, 138, 0.16);
  background: rgba(125, 252, 138, 0.04);
}
.cq2-step span {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(125, 252, 138, 0.16);
  color: var(--green);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
}
.cq2-step p { margin: 0; font-size: 12.5px; color: rgba(220, 240, 228, 0.85); }

.cq2-levels { display: grid; gap: 8px; margin: 0 0 18px; }
.cq2-level {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(125, 252, 138, 0.24);
  background: rgba(8, 18, 14, 0.7);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, border-color 0.18s ease, background 0.18s ease;
}
.cq2-level:hover:not(.is-locked) {
  transform: translateY(-1px);
  border-color: rgba(125, 252, 138, 0.6);
  background: rgba(125, 252, 138, 0.08);
}
.cq2-level.is-locked { opacity: 0.45; cursor: not-allowed; }
.cq2-level-no {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(125, 252, 138, 0.14);
  color: var(--green);
  font-family: "Outfit", sans-serif;
  font-weight: 800;
  font-size: 18px;
}
.cq2-level-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cq2-level-meta b {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #eafff0;
}
.cq2-level-meta i {
  font-style: normal;
  font-size: 11px;
  color: var(--text-dim);
}
.cq2-level-state {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(125, 252, 138, 0.8);
}

.cq2-play {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(125, 252, 138, 0.5);
  background: linear-gradient(180deg, rgba(125, 252, 138, 0.22), rgba(58, 143, 74, 0.28));
  color: #eafff0;
  font-family: "Outfit", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(125, 252, 138, 0.18);
  transition: transform 0.12s ease, box-shadow 0.18s ease;
}
.cq2-play:hover { transform: translateY(-1px); box-shadow: 0 0 34px rgba(125, 252, 138, 0.3); }
.cq2-play--ghost {
  background: rgba(8, 18, 14, 0.7);
  border-color: rgba(125, 252, 138, 0.28);
  box-shadow: none;
}
.cq2-result-actions { display: grid; gap: 8px; }

/* Compact the mode-select (intro) card so it never needs an inner scroll. */
.cq2-card--intro { padding: 16px 20px 18px; }
.cq2-card--intro .cq2-card-badge { margin-bottom: 8px; padding: 4px 11px; }
.cq2-card--intro .cq2-card-title { font-size: clamp(22px, 4vw, 30px); margin-bottom: 4px; }
.cq2-card--intro .cq2-card-sub { margin-bottom: 10px; font-size: 12px; line-height: 1.4; }
.cq2-card--intro .cq2-howto { gap: 6px; margin-bottom: 10px; }
.cq2-card--intro .cq2-step { padding: 7px 10px; }
.cq2-card--intro .cq2-step span { width: 22px; height: 22px; font-size: 12px; }
.cq2-card--intro .cq2-step p { font-size: 11.5px; line-height: 1.3; }
.cq2-card--intro .cq2-toggle { padding: 8px 12px; margin-bottom: 10px; gap: 10px; }
.cq2-card--intro .cq2-toggle-knob { width: 38px; height: 22px; }
.cq2-card--intro .cq2-toggle-knob::after { width: 16px; height: 16px; }
.cq2-card--intro .cq2-toggle.is-on .cq2-toggle-knob::after { transform: translateX(16px); }
.cq2-card--intro .cq2-toggle-label b { font-size: 12px; }
.cq2-card--intro .cq2-toggle-label i { font-size: 10px; }
.cq2-card--intro .cq2-levels { gap: 6px; margin-bottom: 10px; }
.cq2-card--intro .cq2-level { padding: 7px 12px; gap: 10px; }
.cq2-card--intro .cq2-level-no { width: 28px; height: 28px; font-size: 15px; border-radius: 8px; }
.cq2-card--intro .cq2-level-meta b { font-size: 12px; }
.cq2-card--intro .cq2-level-meta i { font-size: 10px; }
.cq2-card--intro .cq2-level-best .cq2-star { font-size: 11px; }
.cq2-card--intro .cq2-play { padding: 11px 16px; font-size: 14px; }

/* Country Quiz — game hub, flag & fact modes */
.cq2-globe.is-hidden { opacity: 0; pointer-events: none; }

/* Alt modes (flag / fact) — ring timer in HUD; play card below */
.cq2-hud-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  flex-shrink: 0;
}
.cq2-ring-timer {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.cq2-ring-timer svg {
  display: block;
  width: 44px;
  height: 44px;
}
.cq2-ring-timer .cq2-ring-bg {
  stroke: rgba(125, 252, 138, 0.2);
  stroke-width: 3;
}
.cq2-ring-timer .cq2-ring-prog {
  stroke: var(--green);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}
.cq2-ring-timer.is-low .cq2-ring-prog {
  stroke: #ff7070;
}
.cq2-ring-secs {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: #f3fff7;
  line-height: 1;
}
.cq2-mode-alt .cq2-hud-top,
.cq2-mode-alt .cq2-hud-bottom,
.cq2-mode-alt .cq2-board {
  z-index: 7;
}
.cq2-mode-alt .cq2-screen.is-play {
  z-index: 4;
  inset: 58px 0 82px 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 8px 16px 12px;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}
.cq2-mode-alt .cq2-close {
  pointer-events: auto;
}
.cq2-mode-alt .cq2-hud-bottom .cq2-dots {
  pointer-events: none;
}
.cq2-radar--elim {
  border-color: rgba(125, 252, 138, 0.48);
  color: #d8ffe0;
  background: rgba(8, 22, 14, 0.78);
}
.cq2-radar--elim:hover:not(:disabled) {
  box-shadow: 0 0 26px rgba(125, 252, 138, 0.38);
}
.cq2-radar--elim .cq2-radar-count {
  background: rgba(125, 252, 138, 0.16);
  border-color: rgba(125, 252, 138, 0.42);
}
.cq2-choice.is-eliminated {
  opacity: 0.22;
  text-decoration: line-through;
  pointer-events: none;
  filter: grayscale(0.75);
  border-color: rgba(120, 130, 125, 0.25) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}
.cq2-choice.is-eliminated kbd {
  opacity: 0.35;
}
.cq2-play-mode {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(125, 252, 138, 0.8);
}
.cq2-gain-host--alt {
  position: relative;
  width: 0;
  height: 0;
  margin: 0 auto;
}
.cq2-play-timer-mount {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 18px;
  padding-top: 6px;
  min-height: 58px;
}
.cq2-mode-alt .cq2-play-card .cq2-ring-timer {
  width: 52px;
  height: 52px;
}
.cq2-mode-alt .cq2-play-card .cq2-ring-timer svg {
  width: 52px;
  height: 52px;
}
.cq2-mode-alt .cq2-play-card .cq2-ring-secs {
  font-size: 15px;
}
.cq2-timer-depot {
  display: none !important;
}
.cq2-scoreboard--mini {
  margin-top: -6px;
  margin-bottom: 10px;
}
.cq2-scoreboard--mini .cq2-score-cell b {
  font-size: 15px;
}
.cq2-unlock-note {
  color: var(--green) !important;
  margin-bottom: 6px !important;
}
.cq2-lock-note {
  color: rgba(255, 180, 120, 0.9) !important;
  margin-bottom: 6px !important;
}
.cq2-choice:disabled {
  opacity: 0.72;
  cursor: default;
  transform: none !important;
}
.cq2-games {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.cq2-game {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(125, 252, 138, 0.22);
  background: rgba(125, 252, 138, 0.05);
  color: rgba(230, 245, 240, 0.95);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.cq2-game:hover {
  border-color: rgba(125, 252, 138, 0.55);
  background: rgba(125, 252, 138, 0.1);
  transform: translateY(-1px);
}
.cq2-game-ico { font-size: 22px; line-height: 1; }
.cq2-game b { font-size: 11px; letter-spacing: 0.06em; }
.cq2-game i { font-size: 10px; font-style: normal; color: rgba(200, 225, 210, 0.75); line-height: 1.3; }
.cq2-back {
  align-self: flex-start;
  margin: 0 0 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: rgba(125, 252, 138, 0.85);
  font-size: 12px;
  cursor: pointer;
}
.cq2-back:hover { color: var(--green); }
.cq2-play-card {
  width: min(420px, 92vw);
  padding: 16px 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(125, 252, 138, 0.28);
  background: rgba(6, 14, 11, 0.94);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.cq2-flag-frame {
  width: min(320px, 80vw);
  aspect-ratio: 3 / 2;
  margin: 0 auto 14px;
  border-radius: 12px;
  border: 2px solid rgba(125, 252, 138, 0.35);
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.cq2-flag-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.cq2-play-prompt,
.cq2-fact-q {
  margin: 0 0 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(230, 245, 240, 0.95);
}
.cq2-fact-q { font-size: 15px; font-weight: 600; }
.cq2-choices { display: grid; gap: 8px; }
.cq2-choice {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(125, 252, 138, 0.28);
  background: rgba(125, 252, 138, 0.06);
  color: rgba(230, 245, 240, 0.95);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
  text-align: left;
}
.cq2-choice kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35em;
  margin-right: 8px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(125, 252, 138, 0.35);
  background: rgba(0, 0, 0, 0.35);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(200, 255, 210, 0.9);
  font-family: inherit;
}
.cq2-choice:hover:not(:disabled) {
  border-color: rgba(125, 252, 138, 0.55);
  background: rgba(125, 252, 138, 0.12);
  transform: translateY(-1px);
}
.cq2-choice.is-correct {
  border-color: rgba(125, 252, 138, 0.85);
  background: rgba(125, 252, 138, 0.22);
}
.cq2-choice.is-wrong {
  border-color: rgba(255, 120, 120, 0.65);
  background: rgba(255, 80, 80, 0.15);
  animation: cq2-shake 0.35s ease;
}
@keyframes cq2-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (max-width: 640px) {
  .cq2-games { grid-template-columns: 1fr; }
}

.cq2-result-stars { display: flex; justify-content: center; gap: 8px; margin-bottom: 12px; }
.cq2-star {
  font-size: 30px;
  color: rgba(125, 252, 138, 0.18);
  transition: transform 0.2s ease;
}
.cq2-star.is-on {
  color: var(--green);
  text-shadow: 0 0 18px rgba(125, 252, 138, 0.6);
  transform: scale(1.12);
}

/* Best score on level cards */
.cq2-level-best {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.cq2-level-best b { display: inline-flex; gap: 1px; }
.cq2-level-best .cq2-star { font-size: 12px; }
.cq2-level-best em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(125, 252, 138, 0.8);
}

/* Hardcore toggle */
.cq2-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  margin: 0 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 90, 110, 0.3);
  background: rgba(22, 8, 10, 0.5);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cq2-toggle:hover { border-color: rgba(255, 90, 110, 0.55); }
.cq2-toggle.is-on {
  border-color: rgba(255, 90, 110, 0.85);
  background: rgba(40, 10, 14, 0.6);
  box-shadow: 0 0 24px rgba(255, 80, 100, 0.28);
}
.cq2-toggle-knob {
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(120, 120, 130, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  transition: background 0.2s ease;
}
.cq2-toggle-knob::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e8e8ee;
  transition: transform 0.2s ease;
}
.cq2-toggle.is-on .cq2-toggle-knob { background: rgba(255, 80, 100, 0.65); }
.cq2-toggle.is-on .cq2-toggle-knob::after { transform: translateX(18px); }
.cq2-toggle-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cq2-toggle-label b { font-size: 13px; color: #ffd0d6; letter-spacing: 0.06em; }
.cq2-toggle-label i { font-style: normal; font-size: 11px; color: var(--text-dim); }

/* NEW BEST badge + scoreboard + hardcore result badge */
.cq2-newbest {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 5px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffd25a, #ffb347);
  color: #2a1500;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.14em;
  box-shadow: 0 0 26px rgba(255, 190, 80, 0.55);
  animation: cqNewBest 0.6s ease;
}
@keyframes cqNewBest {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.cq2-scoreboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 4px 0 14px;
}
.cq2-score-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid rgba(125, 252, 138, 0.22);
  background: rgba(6, 16, 12, 0.5);
}
.cq2-score-cell span { font-size: 9px; letter-spacing: 0.14em; color: var(--text-dim); }
.cq2-score-cell b {
  font-family: var(--font-mono);
  font-size: 18px;
  color: #eafff0;
}
.cq2-hard-badge {
  margin: 0 0 12px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 90, 110, 0.5);
  background: rgba(40, 10, 14, 0.5);
  color: #ffb3bd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  display: inline-block;
}

@media (max-width: 600px) {
  .cq2-question { top: 56px; }
  .cq2-name { font-size: clamp(26px, 8vw, 40px); }
  .cq2-chip span { display: none; }
  .cq2-chip--streak span { display: inline; }
}

/* Адаптив: чтобы на узких экранах не ломалось */
@media (max-width: 980px) {
  .my-page-shell {
    width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .my-page-global-bar {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .my-page-global-right {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .my-page-header {
    top: 0;
  }
  .my-page-layout {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 0 12px 18px;
  }
  .my-page-left,
  .my-page-right {
    display: none;
  }
}
.my-page-cover {
  position: absolute;
  inset: 0;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.my-page-header-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 120px;
  align-items: center;
  gap: 0;
  padding: 8px 16px 10px;
}

.my-page-header-pixel-canvas {
  position: absolute;
  left: 14px;
  top: 10px;
  border-radius: 14px;
  z-index: 3;
  pointer-events: none;
  opacity: 1;
}

/* стеклянная "ванна" внутри контура */
.my-page-header-inner::before {
  content: "";
  position: absolute;
  inset: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.02),
    rgba(5, 10, 8, 0.14)
  );
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  z-index: 2;
}
.my-page-header-inner::after {
  content: "";
  position: absolute;
  inset: 6px 10px;
  border-radius: 17px;
  padding: 2px;
  background: var(--my-page-header-contour);
  background-size: 220% 100%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
  animation: var(--my-page-header-contour-animation);
}

@keyframes mp-header-contour-pulse {
  0%,
  100% {
    box-shadow: 0 0 14px rgba(58, 166, 255, 0.2), 0 0 18px rgba(125, 252, 138, 0.12);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 22px rgba(58, 166, 255, 0.32), 0 0 28px rgba(125, 252, 138, 0.2),
      0 0 12px rgba(255, 255, 255, 0.06);
    filter: brightness(1.08);
  }
}

@keyframes mp-avatar-ring-pulse {
  0%,
  100% {
    border-color: rgba(230, 245, 240, 0.86);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.75), 0 0 0 2px rgba(5, 10, 8, 0.8),
      0 0 14px rgba(58, 166, 255, 0.08), 0 0 12px rgba(255, 255, 255, 0.03);
  }
  50% {
    border-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.75), 0 0 0 2px rgba(5, 10, 8, 0.8),
      0 0 26px rgba(58, 166, 255, 0.2), 0 0 18px rgba(255, 255, 255, 0.07);
  }
}

@keyframes mp-avatar-capsule-pulse {
  0%,
  100% {
    border-color: rgba(58, 166, 255, 0.38);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -14px 26px rgba(0, 0, 0, 0.6), 0 18px 44px rgba(0, 0, 0, 0.55),
      0 0 14px rgba(58, 166, 255, 0.16), 0 0 12px rgba(125, 252, 138, 0.1);
  }
  50% {
    border-color: rgba(125, 252, 138, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 -14px 26px rgba(0, 0, 0, 0.6), 0 18px 44px rgba(0, 0, 0, 0.55),
      0 0 24px rgba(58, 166, 255, 0.28), 0 0 18px rgba(125, 252, 138, 0.18);
  }
}

.my-page-avatar-block,
.my-page-logo-block,
.my-page-main-info,
.my-page-top-bar {
  position: relative;
  z-index: 4;
}

/* Avatar + header logo ring (mirrored) */

.my-page-avatar-block,
.my-page-logo-block {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.my-page-logo-block {
  cursor: pointer;
}

.my-page-avatar-block::before,
.my-page-logo-block::before {
  content: "";
  position: absolute;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.09),
      rgba(5, 10, 8, 0.5)
    ),
    radial-gradient(circle at 30% 20%, rgba(58, 166, 255, 0.22), transparent 60%),
    radial-gradient(circle at 70% 20%, rgba(125, 252, 138, 0.16), transparent 60%);
  border: 2px solid rgba(58, 166, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -14px 26px rgba(0, 0, 0, 0.6),
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 14px rgba(58, 166, 255, 0.18), 0 0 12px rgba(125, 252, 138, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: translateY(12px);
  z-index: 1;
  animation: mp-avatar-capsule-pulse 4.8s ease-in-out infinite;
}

.my-page-avatar-block::after,
.my-page-logo-block::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 96px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.6), transparent 70%);
  filter: blur(2px);
  opacity: 0.85;
}

.my-page-avatar,
.my-page-logo-mark-wrap {
  position: relative;
  z-index: 2;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  background: #0a0e12;
  border: 3px solid rgba(230, 245, 240, 0.92);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.75), 0 0 0 2px rgba(5, 10, 8, 0.85);
  transform: translateY(12px);
  animation: mp-avatar-ring-pulse 4.8s ease-in-out infinite;
}

.my-page-avatar {
  background: #11151a;
}

.my-page-logo-mark-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 38%, rgba(18, 32, 28, 0.95), rgba(5, 8, 7, 0.98));
  padding: 0;
}

.my-page-logo-mark-wrap .mnm-logo-mark--header-hero {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  color: #eafff4;
  filter: drop-shadow(0 0 10px rgba(125, 252, 138, 0.35))
    drop-shadow(0 0 16px rgba(58, 166, 255, 0.28));
}

.my-page-logo-mark-wrap .mnm-logo-mark--header-hero .mnm-logo-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 108%;
  height: 108%;
  transform: translate(-50%, -50%);
  display: block;
  max-width: none;
}

.my-page-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Main info */

.my-page-main-info {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 18px;
}

/* glass strip behind text */

/* Убираем старую "полосу" (конфликтует с новой стеклянной ванной header-inner) */
.my-page-main-info::before {
  content: "";
  position: absolute;
  left: calc(-1 * (220px + 20px));
  right: calc(-1 * 260px - 20px);
  top: -12px;
  bottom: -14px;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(8, 30, 20, 0.6),
    rgba(5, 18, 14, 0.85),
    rgba(8, 30, 20, 0.6)
  );
  border-radius: 10px;
  border: 1px solid rgba(180, 255, 220, 0.1);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 0 0 1px rgba(5, 12, 9, 0.85), 0 18px 38px rgba(0, 0, 0, 0.86);
  opacity: 0.88;
}

.my-page-main-info::before {
  content: none;
}

@media (prefers-reduced-motion: reduce) {
  .my-page-header-inner::before,
  .my-page-header-inner::after,
  .my-page-avatar-block::before,
  .my-page-logo-block::before,
  .my-page-avatar,
  .my-page-logo-mark-wrap {
    animation: none !important;
  }
}

.my-page-name-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.my-page-name {
  font-family: var(--font-mypage);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.15;
}

.my-page-status {
  font-family: var(--font-mypage);
  font-size: 11px;
  font-weight: 450;
  line-height: 1.35;
  color: var(--text-dim);
  max-width: min(100%, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-page-username {
  font-family: var(--font-mypage);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.my-page-meta-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mypage);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-dim);
  line-height: 1.35;
}

.my-page-meta-item::before {
  content: "";
  margin-right: 0;
}

/* (cleanup) Удалены дублирующие правила сетки MY PAGE ниже по файлу */

.my-page-center .my-page-card,
.my-page-center .message-center-card {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Заголовки колонок теперь фиксируются через .my-page-col-header/.my-page-col-title */

/* Left nav list */

.my-page-nav-list {
  list-style: none;
  margin-bottom: 14px;
}

.my-page-nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.my-page-nav-item span {
  font-family: var(--font-mypage);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--my-page-nav-item-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.my-page-nav-item.is-active span {
  font-weight: 600;
}

.tf-composer-card.is-hidden,
.tf-feed-home-only.is-hidden {
  display: none !important;
}

.my-page-nav-item i {
  font-size: 13px;
  width: 16px;
  text-align: center;
  color: var(--my-page-nav-item-icon);
}

.my-page-nav-item:hover {
  background: var(--my-page-nav-item-hover-bg);
  color: var(--text-main);
  transform: translateX(1px);
}

/* .my-page-nav-item.is-active — unified under .my-page-shell */

/* Secondary text */

.my-page-section-sub {
  font-family: var(--font-mypage);
  font-size: 11px;
  font-weight: 450;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.4;
}

/* Cards */

.my-page-card {
  margin-top: 12px;
  padding: 18px 18px;
  border-radius: 16px;
  border: 1px solid var(--ui-card-border);
  background: var(--ui-card-bg);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  box-shadow: var(--ui-card-shadow);
}

.my-page-card-header {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.my-page-card-header-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.my-page-card-title {
  font-size: 12px;
}

.my-page-card-meta {
  font-size: 10px;
  color: var(--text-dim);
}

.my-page-card-body {
  font-size: 11px;
  color: var(--text-main);
}

/* Right-side sections */

.my-page-side-section + .my-page-side-section {
  margin-top: 14px;
}

.my-page-stats-list {
  list-style: none;
  font-size: 11px;
  color: var(--text-dim);
}

.my-page-stats-list li {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

/* Like / dislike */

.my-page-card-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.my-page-like-btn,
.my-page-dislike-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-secondary-btn-border);
  background: var(--ui-secondary-btn-bg);
  color: var(--text-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.my-page-like-btn i,
.my-page-dislike-btn i {
  font-size: 11px;
}

.my-page-like-count,
.my-page-dislike-count {
  font-size: 10px;
  padding-left: 2px;
}

.my-page-like-btn.active {
  background: rgba(125, 252, 138, 0.18);
  color: var(--accent-olive);
}

.my-page-dislike-btn.active {
  background: rgba(255, 99, 132, 0.16);
  color: #ff7085;
}

/* Travel Features (TRAVEL FEED) */
.tf-feed-home-only {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tf-travel-features-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ui-tf-brand-border);
  background: var(--ui-tf-brand-bg);
}

.tf-tf-name {
  font-family: var(--font-main);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ui-tf-name-color);
}

.tf-tf-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--ui-tf-desc-color);
  max-width: none;
}

#myPageViewFeed.is-activity-only .tf-feed-home-only {
  display: none;
}

#myPageViewFeed.is-activity-only .my-page-feed-list {
  margin-top: 4px;
}

.my-page-feed-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
  width: 100%;
}

.my-page-center .tf-composer-card,
.my-page-center .tf-feed-home-only,
.my-page-center .tf-travel-features-brand {
  width: 100%;
}

.tf-composer-card {
  margin-top: 0;
}

.tf-composer-premium {
  position: relative;
  padding: 16px 16px 14px;
  border-radius: 20px;
  border: 1px solid var(--ui-tf-composer-border);
  background: var(--ui-tf-composer-bg);
  box-shadow: var(--ui-tf-composer-card-shadow);
}

.tf-composer-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--ui-tf-composer-shine);
}

.tf-composer-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.tf-composer-head-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--ui-tf-composer-head-color);
}

.tf-composer-head-hint {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-tf-composer-head-hint);
}

.tf-composer-toolbar {
  display: flex;
  justify-content: flex-end;
}

.tf-polish-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-tf-polish-btn-border);
  background: var(--ui-tf-polish-btn-bg);
  color: var(--ui-tf-polish-btn-color);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}

.tf-polish-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 252, 138, 0.45);
  background: rgba(125, 252, 138, 0.08);
}

.tf-polish-btn i {
  color: rgba(255, 217, 120, 0.95);
}

.tf-composer-top {
  display: flex;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.tf-composer-avatar {
  flex: 0 0 auto;
}

.tf-composer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tf-composer-textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--ui-input-border);
  background: var(--ui-tf-composer-textarea-bg);
  color: var(--text-main);
  outline: none;
  font-family: var(--font-mypage);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.tf-composer-textarea::placeholder {
  color: var(--ui-tf-composer-textarea-placeholder);
}

.my-page-shell .tf-composer-textarea:focus-visible {
  border-color: var(--ui-tf-composer-focus-border) !important;
  box-shadow: var(--ui-tf-composer-focus-shadow) !important;
}

.tf-composer-attach-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.tf-attach-btn {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid var(--ui-input-border);
  background: var(--ui-tf-attach-bg);
  color: var(--ui-tf-attach-color);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
}

.tf-attach-btn i {
  font-size: 13px;
}

.tf-attach-btn:hover {
  transform: translateY(-1px);
  background: rgba(3, 8, 6, 0.9);
}

.tf-attach-voice {
  color: rgba(255, 120, 160, 0.95);
  border-color: rgba(255, 120, 160, 0.28);
}

.tf-attach-voice:hover {
  background: rgba(255, 120, 160, 0.08);
}

.tf-attach-voice-stop {
  color: rgba(255, 200, 120, 0.95);
  border-color: rgba(255, 200, 120, 0.3);
}

.tf-attach-voice-stop:disabled {
  opacity: 0.35;
  transform: none;
}

.tf-attach-voice-clear {
  color: rgba(143, 211, 255, 0.75);
}

.tf-composer-voice-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 2px 2px 0;
  font-family: var(--font-mypage);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(180, 210, 200, 0.55);
}

.tf-composer-voice-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tf-composer-voice-hint i {
  color: rgba(125, 252, 138, 0.45);
  font-size: 11px;
}

.tf-composer-voice-status {
  color: rgba(125, 252, 138, 0.85);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.tf-composer-preview {
  border-radius: 14px;
  border: 1px solid var(--ui-pill-border);
  background: rgba(0, 0, 0, 0.12);
  padding: 8px;
  overflow: hidden;
}

.tf-composer-preview img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}

.tf-composer-preview video {
  width: 100%;
  max-height: 240px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}

.tf-post-media audio,
.tf-composer-preview .tf-post-media audio {
  width: 100%;
  margin-top: 6px;
  border-radius: 12px;
  height: 40px;
}

.tf-post-media-wrap .tf-post-media audio {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}

.tf-cam-live {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tf-cam-live video {
  width: 100%;
  max-height: 260px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}

.tf-cam-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.tf-cam-btn {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(125, 252, 138, 0.42);
  background: rgba(125, 252, 138, 0.12);
  color: rgba(125, 252, 138, 0.95);
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.tf-cam-btn.tf-cam-btn-ghost {
  border-color: rgba(143, 211, 255, 0.18);
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-dim);
}

.tf-location-label {
  font-size: 12px;
  color: rgba(143, 211, 255, 0.92);
}

.tf-composer-tag-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tf-tag-title {
  font-size: 11px;
  color: var(--text-dim);
}

.tf-tag-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tf-tag-chip {
  border-radius: 999px;
  border: 1px solid var(--ui-pill-border);
  background: var(--ui-pill-bg);
  color: var(--text-dim);
  font-size: 11px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tf-tag-chip.is-on {
  border-color: rgba(255, 217, 90, 0.55);
  background: rgba(255, 217, 90, 0.12);
  color: rgba(255, 217, 90, 0.95);
}

.tf-composer-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

.tf-post-btn {
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid var(--ui-tf-post-btn-border);
  background: var(--ui-tf-post-btn-bg);
  color: var(--ui-tf-post-btn-text);
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.tf-post {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--ui-tf-post-border);
  background: var(--ui-tf-post-bg);
  backdrop-filter: blur(16px) saturate(120%);
  padding: 14px 14px 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.tf-post--highlight {
  border-color: rgba(125, 252, 138, 0.75);
  box-shadow: 0 0 0 2px rgba(125, 252, 138, 0.35), 0 20px 50px rgba(0, 0, 0, 0.25);
}

.tf-post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.tf-post-delete {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  border: 1px solid var(--ui-pill-border);
  background: rgba(0, 0, 0, 0.12);
  color: rgba(255, 217, 90, 0.75);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}

.tf-post-delete:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 99, 132, 0.95);
}

.tf-author-handle {
  color: rgba(143, 211, 255, 0.95);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tf-author-time {
  color: var(--text-dim);
  font-size: 11px;
}

.tf-post-text {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-main);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.tf-post-media-wrap {
  margin-top: 10px;
}

.tf-post-media img {
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  display: block;
  cursor: zoom-in;
}

@media (max-height: 900px) {
  .tf-post-media img {
    max-height: 72vh;
    object-fit: contain;
  }
}

@media (max-height: 760px) {
  .tf-post-media img {
    max-height: 66vh;
  }
}

.tf-post-media video {
  width: 100%;
  max-height: 320px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
}

.tf-photo-tags {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255, 217, 90, 0.92);
}

.tf-post-actions {
  margin-top: 10px;
}

.tf-react-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tf-react-btn {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-pill-border);
  background: rgba(0, 0, 0, 0.12);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
}

.tf-react-btn.is-on {
  border-color: rgba(255, 217, 90, 0.55);
  color: rgba(255, 217, 90, 0.95);
  box-shadow: 0 0 10px rgba(255, 217, 90, 0.12);
}

.tf-react-btn span {
  font-size: 12px;
}

.tf-emoji-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tf-emoji-btn {
  width: 42px;
  padding: 6px 0;
  border-radius: 12px;
  border: 1px solid rgba(143, 211, 255, 0.16);
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.tf-emoji-btn.is-on {
  border-color: rgba(125, 252, 138, 0.45);
  color: rgba(125, 252, 138, 0.95);
}

.tf-emoji-glyph {
  font-size: 14px;
  line-height: 1;
}

.tf-emoji-count {
  font-size: 11px;
  color: var(--text-dim);
}

.tf-react-row-premium {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.tf-react-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tf-quick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.tf-quick-react {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--ui-pill-border);
  background: rgba(0, 0, 0, 0.2);
  color: rgba(226, 236, 230, 0.88);
  cursor: pointer;
  font-size: 11px;
  transition: transform 0.1s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.tf-quick-react:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 252, 138, 0.35);
}

.tf-quick-react.is-on {
  border-color: rgba(255, 217, 120, 0.55);
  color: rgba(255, 236, 200, 0.98);
  box-shadow: 0 0 14px rgba(255, 217, 120, 0.12);
  background: rgba(255, 217, 120, 0.07);
}

.tf-quick-count {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.tf-react-more-wrap {
  position: relative;
  flex: 0 0 auto;
}

.tf-react-more-btn {
  width: 40px;
  height: 36px;
  border-radius: 14px;
  border: 1px solid var(--ui-input-border);
  background: rgba(58, 166, 255, 0.1);
  color: rgba(200, 230, 255, 0.95);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: transform 0.1s ease, background 0.15s ease;
}

.tf-react-more-btn:hover {
  transform: scale(1.04);
  background: rgba(125, 252, 138, 0.12);
}

.tf-react-picker {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  min-width: 240px;
  padding: 10px 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--ui-input-border);
  background: linear-gradient(165deg, rgba(12, 20, 22, 0.98), rgba(6, 10, 9, 0.98));
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
}

.tf-react-picker-title {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(143, 211, 255, 0.65);
  margin-bottom: 8px;
}

.tf-react-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.tf-picker-emoji {
  border: 1px solid var(--ui-pill-border);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  font-size: 18px;
  line-height: 1;
  padding: 6px 0;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.1s ease;
}

.tf-picker-emoji:hover {
  background: rgba(125, 252, 138, 0.12);
  transform: scale(1.06);
}

.tf-picker-emoji.is-on {
  border-color: rgba(255, 217, 120, 0.55);
  background: rgba(255, 217, 120, 0.1);
}

.tf-emoji-aggregate {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.tf-emoji-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  border: 1px solid var(--ui-pill-border);
  background: rgba(0, 0, 0, 0.15);
  font-size: 12px;
}

.tf-emoji-chip-g {
  font-size: 14px;
  line-height: 1;
}

.tf-emoji-chip-n {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: rgba(200, 210, 205, 0.75);
}

.tf-comments {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-pill-border);
}

.tf-comment-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tf-comment {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--ui-pill-border);
  background: rgba(0, 0, 0, 0.1);
}

.tf-comment-author {
  font-size: 11px;
  color: rgba(143, 211, 255, 0.95);
  margin-bottom: 4px;
}

.tf-comment-text {
  font-size: 13px;
  color: var(--text-main);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
}

.tf-comment-compose {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.tf-comment-polish {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--ui-input-border);
  background: rgba(58, 166, 255, 0.08);
  color: rgba(255, 217, 120, 0.95);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.tf-comment-polish:hover {
  border-color: rgba(125, 252, 138, 0.4);
  background: rgba(125, 252, 138, 0.1);
}

.tf-comment-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--ui-input-border);
  background: var(--ui-input-bg);
  outline: none;
  color: var(--text-main);
  font-size: 13px;
}

.tf-comment-send {
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(125, 252, 138, 0.42);
  background: rgba(125, 252, 138, 0.12);
  color: rgba(125, 252, 138, 0.95);
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* MY PAGE: MEDIA */
.my-page-screen[data-mode="media"] .my-page-center .my-page-view.my-page-view-active {
  overflow: hidden;
  min-height: 0;
  flex: 1;
}

#myPageViewMedia.my-page-view-active {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.mp-media-toolbar {
  margin-bottom: 12px;
  flex-shrink: 0;
}

.my-page-media-list {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  scrollbar-gutter: stable;
}

.mp-media-country {
  border-radius: 16px;
  border: 1px solid var(--ui-inset-surface-border);
  background: var(--ui-inset-surface);
  backdrop-filter: blur(16px) saturate(120%);
  padding: 12px;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  isolation: isolate;
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  backface-visibility: hidden;
}

.mp-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.mp-media-title {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-mp-media-title-color);
}

.mp-media-meta {
  font-size: 11px;
  color: var(--text-dim);
}

.mp-media-toolbar-sub {
  margin-bottom: 10px;
}

.mp-media-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.mp-media-quota {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.mp-media-add-overlay {
  position: fixed;
  inset: 0;
  z-index: 1450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mp-media-add-overlay[hidden] {
  display: none !important;
}

.mp-media-add-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 4, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mp-media-add-window {
  position: relative;
  z-index: 1;
  width: min(420px, 94vw);
  max-height: min(88vh, 520px);
  overflow: auto;
}

.mp-media-add-summary {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.45;
}

.mp-media-add-hint {
  margin: 8px 0 12px;
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.4;
}

.mp-media-add-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 11px;
  color: var(--text-main);
  cursor: pointer;
}

.mp-media-add-check input {
  margin-top: 2px;
}

.mp-media-add-window select.mp-field-input {
  width: 100%;
  cursor: pointer;
  color-scheme: var(--my-page-color-scheme, dark);
  background-color: var(--my-page-input-bg, #0a1210);
  border-color: var(--my-page-input-border, rgba(143, 211, 255, 0.22));
  color: var(--text-main, rgba(230, 245, 255, 0.95));
}

.mp-media-add-window select.mp-field-input:invalid {
  color: var(--text-dim);
}

.mp-media-add-window select.mp-field-input option,
.mp-media-add-window select.mp-field-input optgroup {
  background-color: var(--my-page-select-option-bg, #0f1826);
  color: var(--my-page-select-option-color, rgba(220, 236, 255, 0.95));
}

.mp-media-add-window select.mp-field-input option:checked,
.mp-media-add-window select.mp-field-input option:hover {
  background-color: var(--my-page-select-option-checked-bg, rgba(58, 166, 255, 0.35));
  color: var(--my-page-select-option-checked-color, #fff);
}

.mp-node-folder-label {
  margin: 10px 0 6px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.mp-media-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 920px) {
  .mp-media-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mp-media-thumb {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(143, 211, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.mp-media-thumb img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
  opacity: 0.92;
}

.mp-media-cap {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-country-anchor {
  scroll-margin-top: 72px;
}

.mp-side-sub {
  font-size: 10px;
  line-height: 1.4;
  margin-bottom: 10px;
}

.mp-filter-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mp-field-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-olive);
}

.mp-field-input,
.mp-field-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ui-input-border);
  background: var(--ui-input-bg);
  color: var(--text-main);
  font-family: inherit;
  font-size: 11px;
  min-width: 0;
}

.mp-field-textarea {
  resize: vertical;
  min-height: 64px;
}

.mp-range {
  width: 100%;
  accent-color: var(--blue);
}

.mp-range-val {
  font-size: 10px;
  color: var(--text-dim);
}

.mp-filter-apply {
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(125, 252, 138, 0.45);
  background: rgba(125, 252, 138, 0.12);
  color: var(--green);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.mp-node-folder-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mp-node-folder-btn {
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ui-inset-surface-border);
  background: var(--ui-inset-surface);
  color: var(--text-main);
  font-size: 10px;
  cursor: pointer;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mp-node-folder-btn:hover {
  border-color: rgba(58, 166, 255, 0.45);
}

.mp-node-folder-btn.is-country {
  font-weight: 600;
  color: rgba(125, 252, 138, 0.9);
}

.mp-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mp-timeline-item {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ui-inset-surface-border);
  background: var(--ui-inset-surface);
  font-size: 10px;
  cursor: pointer;
  min-width: 0;
}

.mp-timeline-item time {
  display: block;
  font-size: 9px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.mp-timeline-item p {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

.mp-audio-card {
  padding: 14px;
}

.mp-audio-visual {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--ui-mp-audio-visual-border);
  background: var(--ui-mp-audio-visual-bg);
  margin-bottom: 12px;
}

.mp-audio-visual .mnm-voice-meter {
  width: 100%;
}

.mp-audio-btn-record.is-recording {
  animation: mnm-voice-lamp-blink 1s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(255, 64, 96, 0.45);
}

.mp-audio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.mp-audio-btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--ui-input-border);
  background: var(--ui-mp-audio-btn-bg);
  color: var(--text-main);
  font-size: 10px;
  cursor: pointer;
}

.mp-audio-btn-record {
  border-color: var(--ui-mp-audio-btn-record-border);
  color: var(--ui-mp-audio-btn-record-color);
}

.mp-audio-btn-save {
  border-color: var(--ui-mp-audio-btn-save-border);
  color: var(--ui-mp-audio-btn-save-color);
}

.mp-audio-preview-wrap {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--ui-mp-audio-preview-border);
  background: var(--ui-mp-audio-preview-bg);
}

.mp-audio-preview-wrap[hidden] {
  display: none !important;
}

.mp-audio-preview-el {
  width: 100%;
  margin-top: 6px;
  min-height: 36px;
}

.mp-audio-hint {
  margin-top: 10px;
  font-size: 10px;
  color: var(--text-dim);
}

.mp-audio-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mp-audio-history-item {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ui-pill-border);
  background: var(--ui-mp-audio-history-bg);
  font-size: 10px;
  min-width: 0;
}

.mp-audio-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
  min-width: 0;
}

.mp-audio-history-item h4 {
  margin: 0;
  font-size: 11px;
  overflow-wrap: anywhere;
  flex: 1;
  min-width: 0;
}

.mp-audio-history-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.mp-audio-history-action {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 8px;
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.mp-audio-history-share {
  border: 1px solid rgba(125, 200, 255, 0.28);
  background: rgba(10, 24, 36, 0.55);
  color: rgba(150, 210, 255, 0.92);
}

.mp-audio-history-share:hover {
  background: rgba(16, 36, 52, 0.8);
  border-color: rgba(125, 200, 255, 0.5);
}

.mp-audio-history-edit {
  border: 1px solid rgba(125, 252, 138, 0.28);
  background: rgba(10, 28, 18, 0.55);
  color: rgba(170, 240, 190, 0.92);
}

.mp-audio-history-edit:hover {
  background: rgba(16, 40, 26, 0.8);
  border-color: rgba(125, 252, 138, 0.5);
}

.mp-audio-history-delete {
  border: 1px solid rgba(255, 120, 120, 0.28);
  background: rgba(40, 10, 10, 0.55);
  color: rgba(255, 150, 150, 0.9);
}

.mp-audio-history-delete:hover {
  background: rgba(80, 18, 18, 0.75);
  border-color: rgba(255, 120, 120, 0.5);
  color: #ffb0b0;
}

.mp-audio-history-item.is-editing .mp-audio-history-head {
  flex-direction: column;
  align-items: stretch;
}

.mp-audio-history-edit-title,
.mp-audio-history-edit-desc {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ui-input-border);
  border-radius: 8px;
  background: rgba(4, 10, 8, 0.85);
  color: var(--text-main);
  font-size: 10px;
  padding: 6px 8px;
}

.mp-audio-history-edit-desc {
  margin-top: 6px;
  resize: vertical;
  min-height: 44px;
}

.mp-audio-history-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.mp-audio-history-edit-save,
.mp-audio-history-edit-cancel {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-input-border);
  background: rgba(5, 10, 14, 0.85);
  color: var(--text-main);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.mp-audio-history-edit-save {
  border-color: rgba(125, 252, 138, 0.45);
  color: var(--green);
}

.mp-audio-share-pop {
  position: fixed;
  z-index: 12050;
  width: min(240px, calc(100vw - 20px));
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(125, 200, 255, 0.28);
  background: rgba(6, 12, 16, 0.97);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
}

.mp-audio-share-pop-title {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(150, 210, 255, 0.85);
  margin: 0 4px 8px;
}

.mp-audio-share-pop-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.mp-audio-share-pop-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(125, 200, 255, 0.14);
  background: rgba(8, 16, 22, 0.88);
  color: var(--text-main);
  text-align: left;
  cursor: pointer;
}

.mp-audio-share-pop-item:hover {
  border-color: rgba(125, 200, 255, 0.38);
  background: rgba(12, 24, 32, 0.95);
}

.mp-audio-share-pop-name {
  font-size: 10px;
  font-weight: 600;
}

.mp-audio-share-pop-sub {
  font-size: 9px;
  color: var(--text-dim);
}

.mp-audio-history-player {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
  padding: 8px 10px;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid rgba(125, 252, 138, 0.16);
  background: linear-gradient(180deg, rgba(6, 14, 11, 0.92), rgba(3, 8, 6, 0.82));
  box-shadow: inset 0 1px 0 rgba(125, 252, 138, 0.06);
  box-sizing: border-box;
}

.mp-audio-history-player-layout {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.mp-audio-history-player-tracks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.mp-audio-history-track {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mp-audio-history-track-label {
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  min-height: 11px;
}

.mp-audio-history-time-label {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: rgba(190, 220, 205, 0.82);
}

.mp-audio-history-vol-label {
  color: rgba(170, 240, 190, 0.88);
  font-weight: 600;
}

.mp-audio-history-player-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(125, 252, 138, 0.18);
  border-radius: 50%;
  background: rgba(125, 252, 138, 0.1);
  color: var(--green);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  align-self: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.mp-audio-history-player-btn:hover {
  background: rgba(125, 252, 138, 0.2);
  border-color: rgba(125, 252, 138, 0.34);
}

.mp-audio-history-player-btn:active {
  transform: scale(0.96);
}

.mp-audio-history-time-total {
  color: #ff7b9c;
  font-weight: 600;
}

.mp-audio-history-player-bar {
  width: 100%;
  min-width: 0;
  margin: 0;
  height: 22px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.mp-audio-history-player-seek {
  --seek-pct: 0%;
}

.mp-audio-history-player-vol {
  --vol-pct: 100%;
}

.mp-audio-history-player-seek::-webkit-slider-runnable-track,
.mp-audio-history-player-vol::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
}

.mp-audio-history-player-seek::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    #ff8fab 0%,
    #ff4d6d var(--seek-pct, 0%),
    rgba(38, 46, 42, 0.82) var(--seek-pct, 0%),
    rgba(38, 46, 42, 0.82) 100%
  );
  box-shadow: inset 0 0 0 1px rgba(255, 120, 150, 0.16);
}

.mp-audio-history-player-vol::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    rgba(125, 252, 138, 0.75) 0%,
    rgba(125, 252, 138, 0.75) var(--vol-pct, 100%),
    rgba(38, 46, 42, 0.82) var(--vol-pct, 100%),
    rgba(38, 46, 42, 0.82) 100%
  );
}

.mp-audio-history-player-seek::-webkit-slider-thumb,
.mp-audio-history-player-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  border: 2px solid rgba(55, 12, 24, 0.95);
  background: linear-gradient(180deg, #ffb3c6 0%, #ff4d6d 100%);
  box-shadow: 0 0 0 1px rgba(255, 120, 150, 0.55), 0 2px 8px rgba(0, 0, 0, 0.45);
}

.mp-audio-history-player-vol::-webkit-slider-thumb {
  border-color: rgba(12, 40, 22, 0.95);
  background: linear-gradient(180deg, #c8ffd8 0%, #7dfc8a 100%);
  box-shadow: 0 0 0 1px rgba(125, 252, 138, 0.45), 0 2px 8px rgba(0, 0, 0, 0.45);
}

.mp-audio-history-player-seek::-moz-range-track,
.mp-audio-history-player-vol::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(38, 46, 42, 0.82);
  border: none;
}

.mp-audio-history-player-seek::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff8fab, #ff4d6d);
}

.mp-audio-history-player-vol::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(125, 252, 138, 0.75);
}

.mp-audio-history-player-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(55, 12, 24, 0.95);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffb3c6, #ff4d6d);
}

.mp-audio-history-player-vol::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(12, 40, 22, 0.95);
  border-radius: 50%;
  background: linear-gradient(180deg, #c8ffd8, #7dfc8a);
}

.mp-groups-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.mp-mini-btn,
.mp-mini-btn-primary {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-input-border);
  background: rgba(5, 10, 14, 0.85);
  color: var(--text-main);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.mp-mini-btn-primary {
  border-color: rgba(125, 252, 138, 0.45);
  color: var(--green);
}

.mp-groups-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.mp-groups-list li button {
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid var(--ui-inset-surface-border);
  background: var(--ui-inset-surface);
  color: var(--text-main);
  font-size: 10px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.mp-groups-list li button.is-active {
  border-color: rgba(125, 252, 138, 0.45);
  box-shadow: 0 0 12px rgba(58, 166, 255, 0.12);
}

.mp-group-hero {
  padding: 14px;
  margin-bottom: 12px;
}

.mp-group-hero-top {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.mp-group-hero-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 236px;
  min-width: 180px;
}

.mp-group-hero-photos img {
  width: 100%;
  height: 102px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(143, 211, 255, 0.2);
}

.privacy-settings-body {
  max-height: 72vh;
  overflow: auto;
  display: grid;
  gap: 14px;
  padding-right: 4px;
}

.privacy-sec {
  border: 1px solid rgba(143, 211, 255, 0.18);
  border-radius: 14px;
  background: rgba(4, 10, 12, 0.66);
  padding: 12px;
}

.privacy-sec h3 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(125, 252, 138, 0.92);
}

.privacy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--text-main);
  padding: 6px 0;
  border-top: 1px solid rgba(143, 211, 255, 0.12);
}

.privacy-row:first-of-type {
  border-top: none;
}

.privacy-row .privacy-sub {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--text-dim);
}

.privacy-select {
  min-width: 164px;
  background: rgba(5, 12, 14, 0.92);
  border: 1px solid rgba(143, 211, 255, 0.24);
  border-radius: 10px;
  color: var(--text-main);
  padding: 5px 8px;
  font-size: 10px;
}

.mp-group-hero-title {
  margin: 0 0 8px;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 217, 90, 0.92);
}

.mp-group-hero-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.mp-group-feed {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 420px;
  overflow-y: auto;
}

.mp-group-feed-item {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(143, 211, 255, 0.12);
  background: rgba(0, 0, 0, 0.2);
  font-size: 10px;
  overflow-wrap: anywhere;
}

.mp-group-compose {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(143, 211, 255, 0.1);
}

.mp-group-compose .mp-field-label {
  margin-bottom: 6px;
}

.mp-group-compose-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.mp-group-compose-row .mp-field-input {
  flex: 1;
  min-width: 0;
}

.mp-group-chat-compose {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mp-group-chat-compose .mp-field-input {
  flex: 1;
  min-width: 0;
}

.mp-group-chat-msg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.mp-group-chat-img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 10px;
  display: block;
  margin-top: 4px;
}

.mp-group-chat-msg {
  padding: 8px 0;
  border-bottom: 1px solid rgba(143, 211, 255, 0.08);
  font-size: 10px;
}

.mp-group-chat-who {
  font-weight: 700;
  color: rgba(125, 252, 138, 0.88);
  margin-right: 8px;
}

.mp-group-chat-when {
  font-size: 9px;
  color: var(--text-dim);
}

.mp-group-chat-text {
  margin-top: 4px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  color: var(--text-main);
}

.chat-media-reaction-wrap {
  margin-top: 4px;
  max-width: 100%;
}

.chat-media-reaction-wrap > .chat-media-reactions {
  margin-top: 6px;
}

.chat-media-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.chat-media-reaction-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(143, 211, 255, 0.2);
  background: rgba(0, 0, 0, 0.22);
  color: var(--text-main);
  font-size: 10px;
  cursor: pointer;
  line-height: 1;
}

.chat-media-reaction-btn:hover {
  border-color: rgba(125, 252, 138, 0.35);
}

.chat-media-reaction-btn.is-active {
  border-color: rgba(125, 252, 138, 0.55);
  background: rgba(125, 252, 138, 0.1);
}

.chat-media-reaction-ico {
  font-size: 13px;
}

.msg-bubble .chat-media-reaction-wrap {
  margin-top: 6px;
}

.msg-bubble .chat-media-reaction-wrap img,
.msg-bubble .chat-media-reaction-wrap video {
  margin-top: 0;
}

.mp-group-settings-mute {
  margin-top: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-dim);
  cursor: pointer;
}

.mp-group-settings-mute input {
  margin-top: 2px;
}

.mp-group-settings-actions {
  margin-top: 12px;
}

.mp-group-invite-card {
  padding: 12px;
  margin-top: 10px;
}

.mp-group-invite-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-olive);
}

.mp-group-invite-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.mp-group-invite-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.mp-friend-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.mp-friend-feed-note {
  margin-top: 10px;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
  max-width: 46ch;
}

.mp-friend-feed-note strong {
  color: rgba(200, 230, 210, 0.9);
  font-weight: 600;
}

.friend-row {
  cursor: pointer;
}

.friend-row.is-selected {
  border-color: rgba(125, 252, 138, 0.55) !important;
  box-shadow: 0 0 14px rgba(58, 166, 255, 0.12);
}

/* ============================
   MY PAGE: DATING (demo)
   ============================ */
.dating-card {
  padding: 14px;
}

.dating-stage-wrap {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 360px;
}

.dating-photo-nav {
  flex: 0 0 auto;
  align-self: center;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 6px 4px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(200, 240, 255, 0.55);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transform: none !important;
  transition: color 0.18s ease, text-shadow 0.18s ease, filter 0.18s ease;
}

.dating-photo-nav i {
  font-size: 18px;
  pointer-events: none;
}

.dating-photo-nav:hover:not(:disabled),
.dating-photo-nav:focus-visible:not(:disabled) {
  color: rgba(255, 255, 255, 1);
  text-shadow:
    0 0 10px rgba(90, 220, 255, 0.95),
    0 0 18px rgba(54, 184, 255, 0.55);
  filter: drop-shadow(0 0 6px rgba(90, 220, 255, 0.45));
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.dating-photo-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.dating-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 360px;
  border-radius: 18px;
  border: 1px solid rgba(143, 211, 255, 0.16);
  background: rgba(0, 0, 0, 0.18);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.dating-profile {
  position: relative;
  height: min(420px, 52vh);
  min-height: 380px;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.dating-photo {
  flex: 1 1 auto;
  background: radial-gradient(1200px 500px at 30% 20%, rgba(125, 252, 138, 0.18), transparent 55%),
    radial-gradient(900px 420px at 80% 80%, rgba(58, 166, 255, 0.16), transparent 55%),
    rgba(0, 0, 0, 0.22);
}

.dating-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

.dating-glass {
  position: absolute;
  inset: auto 0 0 0;
  padding: 12px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.08));
}

.dating-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 217, 90, 0.92);
  text-shadow: 0 0 18px rgba(255, 217, 90, 0.18);
  font-size: 14px;
}

.dating-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 10px;
  color: rgba(213, 221, 213, 0.85);
}

.dating-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(125, 252, 138, 0.18);
  background: rgba(0, 0, 0, 0.18);
}

.dating-about {
  margin-top: 8px;
  font-size: 10px;
  color: rgba(213, 221, 213, 0.72);
  line-height: 1.35;
  max-width: 92%;
}

.dating-actions {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.dating-btn {
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(143, 211, 255, 0.18);
  background: rgba(0, 0, 0, 0.16);
  color: rgba(213, 221, 213, 0.9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.dating-btn:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(125, 252, 138, 0.26);
}

.dating-btn-pass {
  color: rgba(255, 255, 255, 0.85);
}

.dating-btn-pass i {
  color: rgba(255, 64, 96, 0.9);
}

.dating-btn-like i {
  color: rgba(125, 252, 138, 0.95);
}

.dating-hint {
  margin-top: 10px;
  font-size: 9px;
  color: rgba(213, 221, 213, 0.6);
}

#myPageViewDating.my-page-view-active {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 12px;
  box-sizing: border-box;
}

#myPageViewDating .my-page-section-sub {
  flex-shrink: 0;
}

#myPageViewDating .dating-card {
  width: 100%;
  max-width: min(460px, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 6px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: calc(100% - 6px);
  overflow: hidden;
  box-sizing: border-box;
}

#myPageViewDating .dating-stage-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}

#myPageViewDating .dating-stage {
  flex: 1 1 auto;
  min-height: 240px;
  height: 100%;
  max-height: 100%;
  width: 100%;
  aspect-ratio: auto;
}

#myPageViewDating .dating-profile {
  height: 100%;
  min-height: 0;
}

#myPageViewDating .dating-actions,
#myPageViewDating .dating-hint {
  flex-shrink: 0;
}

.dating-empty {
  padding: 18px;
  color: rgba(213, 221, 213, 0.7);
  font-size: 11px;
}

.dating-swipe-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(125, 252, 138, 0.28);
  background: rgba(0, 0, 0, 0.16);
  color: rgba(125, 252, 138, 0.95);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0;
  transform: rotate(-8deg) scale(0.98);
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
}

.dating-swipe-badge.is-pass {
  border-color: rgba(255, 64, 96, 0.28);
  color: rgba(255, 64, 96, 0.95);
  transform: rotate(10deg) scale(0.98);
  left: auto;
  right: 14px;
}

.dating-swipe-badge.is-on {
  opacity: 1;
  transform: rotate(-8deg) scale(1);
}

.dating-swipe-badge.is-pass.is-on {
  transform: rotate(10deg) scale(1);
}

/* Match overlay */
.match-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
}

.match-overlay[hidden] {
  display: none;
}

.match-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 420px at 50% 40%, rgba(255, 217, 90, 0.10), transparent 55%),
    rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(10px);
}

.match-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100% - 28px));
  border-radius: 18px;
  border: 1px solid rgba(143, 211, 255, 0.2);
  background: rgba(0, 0, 0, 0.32);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  padding: 16px 16px 14px;
  overflow: hidden;
}

.match-burst {
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 90deg,
    rgba(255, 217, 90, 0.0),
    rgba(255, 217, 90, 0.18),
    rgba(125, 252, 138, 0.12),
    rgba(58, 166, 255, 0.12),
    rgba(255, 64, 96, 0.10),
    rgba(255, 217, 90, 0.0)
  );
  filter: blur(20px);
  animation: matchSpin 2.2s linear infinite;
  opacity: 0.55;
  pointer-events: none;
}

@keyframes matchSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.match-close {
  position: absolute;
  z-index: 2;
  cursor: pointer;
}

.match-title {
  position: relative;
  z-index: 2;
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 217, 90, 0.95);
  text-shadow: 0 0 22px rgba(255, 217, 90, 0.22);
  margin-top: 6px;
}

.match-sub {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  text-align: center;
  font-size: 10px;
  color: rgba(213, 221, 213, 0.78);
}

.match-avatars {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.match-av {
  width: 92px;
  height: 92px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(125, 252, 138, 0.22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  background: rgba(0, 0, 0, 0.18);
}

.match-av-them {
  border-color: rgba(255, 64, 96, 0.22);
}

.match-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.match-actions {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================
   MY PAGE: NEW CHAT overlay
   ============================ */
.mp-newchat-overlay {
  position: absolute;
  inset: 0;
  z-index: 9999;
}

.mp-newchat-overlay[hidden] {
  display: none;
}

.mp-newchat-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(10px);
}

.mp-newchat-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 28px));
  max-height: min(70vh, 560px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(143, 211, 255, 0.2);
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.55);
  padding: 14px 10px 14px 14px;
}

.mp-newchat-close {
  position: absolute;
  z-index: 2;
  cursor: pointer;
}

.mp-newchat-title {
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 217, 90, 0.92);
  text-shadow: 0 0 22px rgba(255, 217, 90, 0.18);
}

.mp-newchat-sub {
  margin-top: 6px;
  font-size: 10px;
  color: rgba(213, 221, 213, 0.72);
}

.mp-newchat-list {
  margin-top: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 10px;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.mp-newchat-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(125, 252, 138, 0.18);
  background: rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.mp-newchat-item:hover {
  transform: translateY(-1px);
  background: rgba(0, 0, 0, 0.20);
  border-color: rgba(125, 252, 138, 0.26);
}

.mp-newchat-av {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(143, 211, 255, 0.16);
  background: rgba(0, 0, 0, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(143, 211, 255, 0.9);
  font-weight: 900;
}

.mp-newchat-meta {
  display: grid;
  gap: 2px;
}

.mp-newchat-name {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 700;
}

.mp-newchat-subline {
  font-size: 10px;
  color: rgba(213, 221, 213, 0.7);
}

.mp-newchat-pill {
  font-size: 9px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(143, 211, 255, 0.16);
  color: rgba(143, 211, 255, 0.85);
  background: rgba(0, 0, 0, 0.12);
  white-space: nowrap;
}

/* View switching (center) */

.my-page-view {
  display: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.my-page-view.my-page-view-active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Right side switching */

.my-page-side {
  display: none;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.my-page-side.my-page-side-active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

/* Dialog list (right) */

.avatar-circle.avatar-circle-xs {
  width: 22px;
  height: 22px;
  overflow: hidden;
}

.msg-dialog-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.msg-dialog-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.msg-dialog-country {
  font-size: var(--font-xs);
  color: var(--text-dim);
}

.message-dialogs,
.my-page-side-section,
.my-page-card,
.my-page-nav {
  font-size: 11px;
}

.message-dialogs .msg-dialog-name {
  font-size: 11px;
}

.message-dialogs .msg-dialog-country,
.message-dialogs .msg-dialog-meta,
.message-dialogs .msg-dialog-time {
  font-size: 10px;
}

/* Dialogs: стеклянный список (в стиле MY PAGE) */
.message-dialogs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--my-page-dialogs-header-border);
  background: var(--my-page-dialogs-header-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--my-page-dialogs-header-shadow);
}

.message-dialogs-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.message-archived-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(143, 211, 255, 0.22);
  background: rgba(3, 8, 6, 0.7);
  color: rgba(160, 190, 205, 0.82);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.message-archived-btn.is-active,
.message-archived-btn:hover,
.message-archived-btn:focus-visible {
  border-color: rgba(143, 211, 255, 0.42);
  color: rgba(210, 230, 240, 0.95);
  background: rgba(8, 16, 20, 0.82);
}

.message-dialog-item.is-archived .msg-dialog-name {
  opacity: 0.82;
}

.msg-chat-load-older-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0 12px;
}

.msg-chat-load-older {
  border: 1px solid rgba(143, 211, 255, 0.28);
  background: rgba(6, 14, 18, 0.82);
  color: rgba(190, 220, 235, 0.92);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.msg-chat-load-older:hover,
.msg-chat-load-older:focus-visible {
  border-color: rgba(125, 252, 138, 0.42);
  background: rgba(8, 18, 14, 0.92);
}

.message-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(125, 252, 138, 0.35);
  background: rgba(3, 8, 6, 0.7);
  color: rgba(125, 252, 138, 0.85);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.message-dialogs-search {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--my-page-search-border);
  background: var(--my-page-search-bg);
  display: flex;
  align-items: center;
  gap: 8px;
}

.message-dialogs-search i {
  color: var(--my-page-nav-item-icon);
}

.message-dialogs-search input {
  width: 100%;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-main);
  outline: none;
  font-family: inherit;
  font-size: 11px;
}

.message-dialogs {
  min-width: 0;
  max-width: 100%;
}

.message-dialogs-list {
  list-style: none;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 0;
}

.message-dialog-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--my-page-dialog-item-border);
  background: var(--my-page-dialog-item-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--my-page-dialog-item-shadow);
  padding: 10px 10px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.msg-dialog-main {
  min-width: 0;
}

.msg-dialog-text {
  min-width: 0;
}

.msg-dialog-name,
.msg-dialog-country,
.msg-dialog-meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.message-dialog-item .msg-dialog-time {
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.msg-dialog-pin {
  flex-shrink: 0;
  align-self: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(160, 190, 205, 0.55);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.msg-dialog-pin.is-pinned,
.msg-dialog-pin:hover,
.msg-dialog-pin:focus-visible {
  color: rgba(125, 252, 138, 0.92);
  background: rgba(125, 252, 138, 0.08);
}

.message-dialog-item.active {
  border-color: var(--my-page-dialog-active-border);
  background: var(--my-page-dialog-active-bg);
  box-shadow: var(--my-page-dialog-item-active-shadow);
}

/* Chat input: стеклянная капсула */

.message-chat-input {
  border-top: 1px solid rgba(80, 120, 90, 0.7);
  padding-top: 6px;
  margin-top: 4px;
}

.msg-input-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
}

.msg-input-row > * {
  min-width: 0;
}

/* Glass buttons */

.msg-input-btn {
  border-radius: 50%;
  border: 1px solid var(--my-page-msg-input-btn-border);
  background: var(--my-page-msg-input-btn-bg);
  color: var(--my-page-msg-input-btn-color);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  box-shadow: none;
}

.msg-input-send {
  border-color: var(--my-page-msg-input-btn-send-border);
  color: var(--my-page-msg-input-btn-send-color);
}

/* Message input cloud (textarea + icons inside) */

.msg-input-cloud {
  position: relative;
  width: 100%;
  min-height: 40px;
  max-height: none;
  border-radius: 18px;
  border: 1px solid var(--my-page-msg-input-cloud-border);
  background: var(--my-page-msg-input-cloud-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 6px 4px;
  gap: 4px;
}

.msg-input-cloud:focus-within {
  border-color: var(--my-page-msg-input-cloud-focus-border);
  box-shadow: var(--my-page-msg-input-cloud-focus-shadow);
}

.my-page-shell .msg-input-cloud:focus-within {
  border-color: var(--my-page-msg-input-cloud-focus-border);
  box-shadow: var(--my-page-msg-input-cloud-focus-shadow);
}

.message-chat-input textarea#msgInput {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--font-sm);
  padding: 8px 72px 6px 10px;
  outline: none;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.42;
  font-size: 14px;
}

.msg-input-cloud-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 2px 2px;
  min-height: 0;
}

.msg-polish-btn {
  position: static;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  border: 1px solid rgba(143, 211, 255, 0.22);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(220, 235, 255, 0.92);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.msg-polish-btn i {
  color: rgba(255, 217, 120, 0.95);
  font-size: 11px;
}

.mp-field-polish-btn {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-mp-field-polish-border);
  background: var(--ui-mp-field-polish-bg);
  color: var(--ui-mp-field-polish-color);
  font-size: 11px;
  cursor: pointer;
}

.mp-field-polish-btn:hover {
  border-color: var(--ui-mp-field-polish-hover-border);
}

/* Ring on .msg-input-cloud:focus-within only — avoids a second square ring on the textarea */
.message-chat-input textarea#msgInput:focus-visible {
  box-shadow: none !important;
}

.msg-input-cloud > textarea#msgInput {
  position: relative;
  z-index: 0;
}

.msg-cloud-actions {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 2;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  pointer-events: auto;
}

.msg-cloud-btn {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(143, 211, 255, 0.18);
  background: rgba(0, 0, 0, 0.18);
  color: rgba(143, 211, 255, 0.9);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.msg-cloud-btn:hover {
  border-color: rgba(125, 252, 138, 0.45);
  color: rgba(125, 252, 138, 0.95);
}

.message-chat-input textarea::placeholder {
  color: var(--text-dim);
}

.msg-input-hint {
  font-size: 9px;
  color: var(--text-dim);
  opacity: 0.85;
  margin-top: 2px;
}

/* Chat center layout */

.message-center-card .my-page-card-body.message-center-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
}

/* Log: styles unified above (.message-chat-log) */

/* Rows */

.msg-row {
  display: flex;
  margin-bottom: 6px;
  min-width: 0;
  position: relative;
}

.msg-row-in {
  justify-content: flex-start;
}

.msg-row-out {
  justify-content: flex-end;
}

/* Glass bubbles (base) */

.msg-bubble {
  max-width: 82%;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(80, 120, 90, 0.7);
  position: relative;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: visible;
  min-width: 0;
}

.msg-bubble img,
.msg-bubble video,
.msg-bubble audio {
  max-width: 100%;
}

/* Incoming: cold glass */

.msg-bubble-in {
  background: var(--ui-msg-bubble-in-bg);
  border-color: var(--ui-msg-bubble-in-border);
  box-shadow: var(--ui-msg-bubble-in-shadow);
}

/* Outgoing: green glass */

.msg-bubble-out {
  background: var(--ui-msg-bubble-out-bg);
  border-color: var(--ui-msg-bubble-out-border);
  box-shadow: var(--ui-msg-bubble-out-shadow);
}

/* Хвосты пузырей — аккуратные треугольники */

.msg-bubble-in::before,
.msg-bubble-out::before {
  display: none;
}

.msg-bubble-in::after,
.msg-bubble-out::after {
  content: none;
  display: none;
}

.msg-meta {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 2px;
}

.msg-text {
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}

/* Compact chat audio — low height, long seek bar */
.chat-audio-player {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(300px, 100%);
  min-width: 210px;
  margin-top: 4px;
  padding: 3px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.msg-bubble .chat-audio-player {
  width: min(320px, calc(100vw - 120px));
}

.chat-audio-player-play {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(255, 105, 180, 0.55);
  background: rgba(255, 105, 180, 0.15);
  color: #ff8fc0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-size: 10px;
}

.chat-audio-player-play:hover {
  border-color: rgba(255, 140, 200, 0.85);
  color: #ffc0e0;
}

.chat-audio-player-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.chat-audio-player-label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  line-height: 1;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.chat-audio-time-sep {
  opacity: 0.55;
}

.chat-audio-player-seek {
  width: 100%;
  height: 5px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  --seek-pct: 0%;
  background: linear-gradient(
    to right,
    #ff6b9d var(--seek-pct),
    rgba(255, 255, 255, 0.14) var(--seek-pct)
  );
}

.chat-audio-player-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff8fc0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 6px rgba(255, 105, 180, 0.55);
}

.chat-audio-player-seek::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff8fc0;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.chat-audio-player-vol-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 1px;
}

.chat-audio-player-vol-label {
  flex: 0 0 30px;
  font-size: 8px;
  color: var(--text-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.chat-audio-player-vol {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  cursor: pointer;
  --vol-pct: 100%;
  background: linear-gradient(
    to right,
    #7ab8ff var(--vol-pct),
    rgba(255, 255, 255, 0.12) var(--vol-pct)
  );
}

.chat-audio-player-vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9fd0ff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.chat-audio-player-vol::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9fd0ff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.map-mini-msg .chat-audio-player {
  min-width: 180px;
  width: min(260px, 100%);
}

/* Message multi-select + forward */
.msg-row.is-select-mode {
  padding-left: 30px;
}

.map-mini-msg-row.is-select-mode {
  padding-left: 28px;
}

.msg-select-check {
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(140, 190, 255, 0.75);
  background: rgba(0, 0, 0, 0.35);
  padding: 0;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}

.msg-row.is-select-mode .msg-select-check {
  display: inline-flex;
}

.msg-select-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s ease;
}

.msg-select-check[aria-checked="true"] {
  border-color: rgba(125, 252, 138, 0.95);
  background: rgba(80, 200, 130, 0.25);
}

.msg-select-check[aria-checked="true"] .msg-select-dot {
  background: #7dfc8a;
  box-shadow: 0 0 8px rgba(125, 252, 138, 0.65);
}

.msg-row.is-selected .msg-bubble,
.msg-row.is-selected .map-mini-msg {
  outline: 1px solid rgba(125, 252, 138, 0.75);
  outline-offset: 2px;
}

.chat-forward-pop {
  position: fixed;
  z-index: 15050;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 10px;
  border: 1px solid rgba(80, 120, 90, 0.65);
  background: rgba(12, 22, 18, 0.98);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  min-width: 170px;
  pointer-events: auto;
}

.chat-forward-pop[hidden] {
  display: none !important;
}

.chat-forward-pop-btn {
  border: 1px solid rgba(80, 120, 90, 0.45);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chat-forward-pop-btn:hover {
  border-color: rgba(58, 166, 255, 0.55);
  color: var(--blue);
}

.chat-forward-pop-btn--ghost {
  opacity: 0.75;
}

.chat-forward-pop-btn--danger {
  border-color: rgba(255, 90, 110, 0.45);
  color: rgba(255, 170, 180, 0.95);
}

.chat-forward-pop-btn--danger:hover {
  border-color: rgba(255, 90, 110, 0.75);
  color: #ff8a9a;
  background: rgba(80, 16, 28, 0.35);
}

.chat-friend-pick-pop {
  position: fixed;
  z-index: 15060;
  width: min(260px, calc(100vw - 24px));
  max-height: min(360px, 70vh);
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(80, 120, 90, 0.65);
  background: rgba(10, 18, 14, 0.98);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  padding: 8px;
  pointer-events: auto;
}

.chat-friend-pick-pop[hidden] {
  display: none !important;
}

.chat-friend-pick-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  padding: 4px 6px 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chat-friend-pick-item {
  width: 100%;
  border: 1px solid rgba(80, 120, 90, 0.35);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-friend-pick-item:hover {
  border-color: rgba(58, 166, 255, 0.5);
}

.chat-friend-pick-name {
  font-size: 12px;
  font-weight: 600;
}

.chat-friend-pick-sub {
  font-size: 10px;
  color: var(--text-dim);
}

.chat-friend-pick-item--timer .chat-friend-pick-name i {
  color: #ffb347;
  margin-right: 4px;
}

.chat-friend-pick-pop--timer {
  width: min(132px, calc(100vw - 16px));
  max-height: min(220px, 38vh);
  padding: 4px;
}

.chat-friend-pick-pop--timer .chat-friend-pick-title {
  font-size: 9px;
  padding: 2px 6px 4px;
}

.chat-friend-pick-item--compact {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 5px 8px;
  margin-bottom: 2px;
  min-height: 0;
}

.chat-friend-pick-item--compact i {
  font-size: 10px;
  color: #ffb347;
  width: 12px;
  flex-shrink: 0;
}

.chat-friend-pick-item--compact span {
  font-size: 11px;
  font-weight: 600;
}

/* Chat guest pill — compact premium single-line bar */
.msg-chat-guest-bar,
.map-mini-chat-guest-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-height: 26px;
  width: 100%;
}

.msg-chat-guest-bar--inline,
.map-chat-guest-strip .msg-chat-guest-bar {
  padding: 0;
  margin: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.msg-chat-peer-col .msg-chat-guest-bar {
  margin-top: 0;
  width: 100%;
}

.map-mini-chat-guest-bar {
  width: 100%;
  margin-top: 0;
}

.map-mini-chat-guests-row {
  display: none !important;
}

.map-mini-chat-head-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.map-mini-chat-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.map-mini-chat-call-row {
  display: none !important;
}

.map-mini-chat-call-ic {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.92;
  transition:
    transform 0.16s ease,
    opacity 0.16s ease,
    filter 0.16s ease;
}

.map-mini-chat-call-ic--audio {
  color: #ff5c5c;
}

.map-mini-chat-call-ic--video {
  color: #7dfc8a;
}

.map-mini-chat-call-ic:hover {
  opacity: 1;
  transform: scale(1.1);
  filter: drop-shadow(0 0 8px currentColor);
}

.map-mini-chat--nodus .map-mini-chat-head-tools .map-mini-chat-call-ic {
  display: none;
}

.map-mini-chat-avatar {
  width: 76px;
  height: 76px;
  min-width: 76px;
  min-height: 76px;
}

.map-chat-guest-strip .msg-guest-bar-inline-list {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.chat-guest-strip.map-chat-guest-strip {
  display: block !important;
  padding: 5px 10px;
  background: linear-gradient(90deg, rgba(255, 120, 40, 0.32), rgba(255, 80, 30, 0.12));
  border-bottom: 1px solid rgba(255, 180, 80, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.15);
}

.chat-guest-strip.map-chat-guest-strip[hidden] {
  display: none !important;
}

.msg-guest-bar-label {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-guest-bar-label-color);
  font-weight: 800;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.msg-guest-bar-inline-list {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  gap: 0;
}

.msg-guest-comma {
  color: rgba(255, 200, 140, 0.55);
  font-size: 10px;
  font-weight: 600;
  margin: 0 1px;
}

.msg-chat-guest-strip .msg-chat-guest-bar,
.map-chat-guest-strip .msg-chat-guest-bar {
  width: 100%;
  align-items: center;
}

.msg-chat-guest-strip {
  display: block;
  padding: 5px 10px;
  background: linear-gradient(90deg, rgba(255, 120, 40, 0.3), rgba(255, 80, 30, 0.12));
  border-bottom: 1px solid rgba(255, 180, 80, 0.42);
}

.msg-guest-bar-chips {
  display: none;
}

.msg-guest-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 140, 60, 0.1);
  border: 1px solid rgba(255, 180, 100, 0.35);
  color: var(--ui-guest-chip-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  max-width: none;
  vertical-align: middle;
}

.msg-guest-chip--compact,
.msg-guest-chip--inline {
  padding: 1px 12px 1px 7px;
  font-size: 9px;
  background: transparent;
  border-color: transparent;
}

.msg-guest-chip--timed.msg-guest-chip--inline {
  padding: 1px 14px 1px 8px;
}

.msg-guest-ring-svg {
  display: none !important;
}

.msg-guest-chip--timed {
  padding: 2px 9px;
  border-color: transparent;
  background: rgba(255, 140, 60, 0.08);
}

.msg-guest-chip-label,
.msg-guest-chip-countdown {
  position: relative;
  z-index: 1;
}

.msg-guest-count-badge {
  font-size: 8px;
  font-weight: 800;
  color: var(--ui-guest-chip-countdown-color);
  background: rgba(255, 140, 60, 0.16);
  border: 1px solid rgba(255, 180, 100, 0.38);
  border-radius: 999px;
  padding: 1px 6px;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.chat-guest-strip {
  flex-shrink: 0;
  padding: 5px 10px;
  border-bottom: 1px solid var(--ui-guest-strip-border);
  background: var(--ui-guest-strip-bg);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.1);
  position: relative;
  z-index: 2;
}

.chat-guest-strip[hidden] {
  display: none !important;
}

.msg-text--emoji {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.08em;
  padding: 2px 4px;
}

.chat-system-notice,
.msg-system-notice,
.map-mini-msg-system {
  align-self: center;
  max-width: 92%;
  margin: 8px auto;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10px;
  text-align: center;
  color: var(--ui-guest-chip-color);
  background: rgba(255, 140, 60, 0.12);
  border: 1px solid rgba(255, 180, 100, 0.35);
  letter-spacing: 0.03em;
}

.msg-dialog-guests {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 3px 0 2px 34px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.msg-dialog-guests--inline {
  align-items: center;
}

.message-dialog-item {
  cursor: pointer;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.message-dialog-item:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 200, 255, 0.45);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

.message-dialog-item:focus-visible {
  outline: 2px solid rgba(125, 252, 138, 0.55);
  outline-offset: 2px;
}

.message-dialog-item.has-guests:not(.active) {
  border-color: rgba(255, 180, 100, 0.42);
  border-style: dashed;
  box-shadow: none;
}

.message-dialog-item.active.has-guests {
  border-style: solid;
  border-color: rgba(255, 200, 120, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 180, 100, 0.25),
    var(--my-page-dialog-item-active-shadow);
}

.message-dialog-item.active:not(.has-guests) {
  border-style: solid;
}

.map-mini-chat-call-btn {
  flex: 1 1 0;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(125, 252, 138, 0.55);
  background: linear-gradient(145deg, rgba(125, 252, 138, 0.24), rgba(58, 166, 255, 0.16));
  color: #e8fff0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 16px rgba(125, 252, 138, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.map-mini-chat-call-btn {
  line-height: 1;
}

.map-mini-chat-call-btn--video {
  border-color: rgba(255, 200, 100, 0.6);
  background: linear-gradient(145deg, rgba(255, 160, 80, 0.28), rgba(255, 100, 120, 0.15));
  color: #ffe8c8;
  box-shadow: 0 0 16px rgba(255, 160, 80, 0.28);
}

.map-mini-chat-call-btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 22px rgba(125, 252, 138, 0.45);
}

.map-mini-chat--nodus .map-mini-chat-call-row {
  display: none !important;
}

html:not([data-ui-theme]) .message-dialog-item.active {
  border-color: rgba(125, 252, 138, 0.72) !important;
  box-shadow:
    0 0 0 1px rgba(125, 252, 138, 0.35),
    0 0 22px rgba(125, 252, 138, 0.18) !important;
}

html:not([data-ui-theme]) .message-dialog-item.active .msg-dialog-name {
  color: #eafff0;
}

html:not([data-ui-theme]) .message-dialog-item--nodus.active {
  border-color: rgba(143, 211, 255, 0.65) !important;
  box-shadow:
    0 0 0 1px rgba(143, 211, 255, 0.35),
    0 0 20px rgba(58, 166, 255, 0.2) !important;
}

.map-mini-msg-text--emoji {
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: 0.08em;
  padding: 2px 4px;
}

.msg-chat-call-audio-btn,
.msg-chat-call-video-btn {
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 0 14px rgba(58, 166, 255, 0.2);
}

.msg-chat-call-audio-btn {
  border-color: rgba(125, 252, 138, 0.55) !important;
  background: linear-gradient(145deg, rgba(125, 252, 138, 0.2), rgba(0, 0, 0, 0.35)) !important;
  color: var(--green) !important;
}

.msg-chat-call-video-btn {
  border-color: rgba(255, 180, 100, 0.55) !important;
  background: linear-gradient(145deg, rgba(255, 140, 60, 0.22), rgba(0, 0, 0, 0.35)) !important;
  color: #ffc98a !important;
}

.friend-btn-call {
  min-width: 30px;
  padding: 4px 8px;
  border-color: rgba(125, 252, 138, 0.45);
  color: var(--green);
  box-shadow: 0 0 10px rgba(125, 252, 138, 0.15);
}

.friend-btn-call-video {
  border-color: rgba(255, 180, 100, 0.45);
  color: var(--ui-guest-chip-countdown-color);
  box-shadow: 0 0 10px rgba(255, 160, 80, 0.15);
}

.mnm-call-peer-panel {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 2;
  text-align: center;
  width: 100%;
  flex-shrink: 0;
  transition:
    padding 0.35s ease,
    background 0.35s ease,
    border-radius 0.35s ease;
  pointer-events: none;
  padding: 6px 8px 2px;
}

.mnm-call--connected .mnm-call-peer-panel {
  top: auto;
  transform: none;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 14px;
  padding: 8px 12px 6px;
  border: 1px solid rgba(125, 200, 255, 0.2);
  backdrop-filter: blur(8px);
}

.mnm-call--connected.mnm-call--video .mnm-call-peer-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  text-align: left;
  padding: 8px 14px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.mnm-call--connected.mnm-call--video .mnm-call-peer-panel > * {
  margin: 0;
}

.mnm-call--connected.mnm-call--video .mnm-call-peer-av {
  width: 38px;
  height: 38px;
  min-width: 38px;
  margin: 0;
  flex-shrink: 0;
  font-size: 14px;
}

.mnm-call--connected.mnm-call--video .mnm-call-peer-name {
  font-size: 13px;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mnm-call--connected.mnm-call--video .mnm-call-status {
  display: none;
}

.mnm-call--connected.mnm-call--video .mnm-call-timer {
  font-size: 15px;
  margin: 0;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.mnm-call--connected.mnm-call--video .mnm-call-wave {
  display: none !important;
}

.mnm-call--connected.mnm-call--video .mnm-call-stage {
  min-height: min(500px, calc(100vh - 200px));
}

.mnm-call--connected.mnm-call--video .mnm-call-local {
  top: auto;
  bottom: 88px;
}

.mnm-call--connected .mnm-call-peer-av {
  width: 40px;
  height: 40px;
  margin-bottom: 4px;
}

.mnm-call--connected .mnm-call-peer-name {
  font-size: 13px;
}

.mnm-call--connected .mnm-call-timer {
  font-size: 18px;
  margin-top: 2px;
}

.mnm-call-overlay.mnm-call--screen-full {
  padding: 0;
}

.mnm-call-overlay.mnm-call--screen-full .mnm-call-shell {
  width: 100vw;
  max-width: none;
  max-height: none;
  height: 100vh;
  gap: 0;
}

.mnm-call-overlay.mnm-call--screen-full .mnm-call-peer-panel {
  display: none;
}

.mnm-call-overlay.mnm-call--screen-full .mnm-call-stage {
  width: 100vw;
  height: 100vh;
  max-width: none;
  min-height: 100vh;
  border-radius: 0;
  border: none;
}

.mnm-call--screen-full .mnm-call-stage {
  width: 100vw;
  height: 100vh;
  max-width: none;
  min-height: 100vh;
  border-radius: 0;
  border: none;
}

.mnm-call--screen-full .mnm-call-remote.is-live {
  opacity: 1;
}

.mnm-call--screen-full .mnm-call-local {
  width: 140px;
  height: 88px;
  right: 18px;
  bottom: 110px;
  top: auto;
}

.mnm-call--screen-full .mnm-call-hud {
  min-height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.mnm-call--connected.mnm-call--video .mnm-call-peer-av,
.mnm-call--video .mnm-call-peer-av {
  width: 64px;
  height: 64px;
  margin-bottom: 8px;
}

.mnm-call--connected .mnm-call-wave {
  opacity: 1;
}

.mnm-call--video .mnm-call-peer-panel .mnm-call-wave {
  opacity: 0.35;
  height: 20px;
  margin-top: 6px;
}

.msg-guest-chip-ring {
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: conic-gradient(
    from -90deg,
    #ffb347 0deg,
    #ff8c3a calc(var(--ring-pct, 100) * 3.6deg),
    rgba(255, 180, 100, 0.14) calc(var(--ring-pct, 100) * 3.6deg)
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  transition: background 0.85s linear;
}

.msg-guest-chip-label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  display: inline;
}

.msg-guest-chip-countdown {
  position: relative;
  z-index: 1;
  font-size: inherit;
  font-variant-numeric: tabular-nums;
  opacity: 0.88;
  color: var(--ui-guest-chip-countdown-color);
  font-weight: 600;
}

.msg-guest-chip-remove,
.msg-chat-guest-remove,
.map-mini-guest-remove {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  padding: 0 1px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--ui-guest-chip-remove-color);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    color 0.16s ease,
    text-shadow 0.16s ease,
    filter 0.16s ease;
}

.msg-guest-chip-remove:hover,
.msg-chat-guest-remove:hover,
.map-mini-guest-remove:hover {
  color: var(--ui-guest-chip-remove-hover-color);
  border: none;
  background: transparent;
  text-shadow:
    0 0 6px rgba(255, 100, 100, 0.95),
    0 0 12px rgba(255, 70, 70, 0.65);
  filter: drop-shadow(0 0 4px rgba(255, 90, 90, 0.8));
}

.msg-guest-group-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(125, 252, 138, 0.45);
  background: rgba(125, 252, 138, 0.08);
  color: var(--green);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
}

.msg-guest-group-btn:hover {
  box-shadow: 0 0 12px rgba(125, 252, 138, 0.25);
}

/* Ephemeral P2P call overlay */
body.mnm-call-active {
  overflow: hidden;
}

.mnm-call-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mnm-call-overlay[hidden] {
  display: none !important;
}

.mnm-call-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(20, 40, 55, 0.92), rgba(4, 8, 12, 0.97));
  backdrop-filter: blur(18px);
}

.mnm-call-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(520px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
}

.mnm-call-stage {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: min(560px, calc(100vh - 180px));
  border-radius: 24px;
  border: 1px solid rgba(125, 200, 255, 0.22);
  background: linear-gradient(165deg, rgba(12, 22, 30, 0.95), rgba(6, 10, 14, 0.98));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 60px rgba(58, 166, 255, 0.08);
  overflow: hidden;
}

.mnm-call-remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(circle at 50% 40%, rgba(58, 166, 255, 0.12), transparent 60%);
}

.mnm-call-remote.is-live {
  opacity: 1;
}

.mnm-call-local {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 108px;
  height: 148px;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid rgba(125, 252, 138, 0.45);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 2;
}

.mnm-call-local.is-live {
  opacity: 1;
  transform: scale(1);
}

.mnm-call-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 20px 20px 22px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78) 45%);
  pointer-events: none;
}

.mnm-call-hud > * {
  pointer-events: auto;
}

.mnm-call-peer-av {
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 22px;
  color: var(--text-main);
  background: rgba(58, 166, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(58, 166, 255, 0.25), 0 0 40px rgba(58, 166, 255, 0.2);
  animation: mnm-call-pulse 2.4s ease-in-out infinite;
}

@keyframes mnm-call-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(58, 166, 255, 0.25), 0 0 30px rgba(58, 166, 255, 0.15); }
  50% { box-shadow: 0 0 0 6px rgba(125, 252, 138, 0.2), 0 0 50px rgba(125, 252, 138, 0.25); }
}

.mnm-call-peer-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-main);
}

.mnm-call-status {
  font-size: 11px;
  color: var(--accent-olive);
  margin-top: 4px;
}

.mnm-call-timer {
  font-size: 28px;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 8px;
  letter-spacing: 0.08em;
}

.mnm-call-encrypt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #7dfca8;
  background: rgba(125, 252, 168, 0.12);
  border: 1px solid rgba(125, 252, 168, 0.35);
  box-shadow: 0 0 18px rgba(125, 252, 168, 0.15);
}

.mnm-call-encrypt-badge[data-state="pending"] {
  color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.mnm-call-encrypt-badge[data-state="warn"] {
  color: #ffb347;
  background: rgba(255, 179, 71, 0.12);
  border-color: rgba(255, 179, 71, 0.4);
  box-shadow: 0 0 14px rgba(255, 179, 71, 0.15);
}

.mnm-call-encrypt-badge .fa-lock {
  font-size: 10px;
}

.mnm-call-wave {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  height: 32px;
  margin-bottom: 18px;
}

.mnm-call-wave span {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, #7dfca8, #3aa6ff);
  animation: mnm-call-wave 1.1s ease-in-out infinite;
}

.mnm-call-wave span:nth-child(2) { animation-delay: 0.12s; }
.mnm-call-wave span:nth-child(3) { animation-delay: 0.24s; }
.mnm-call-wave span:nth-child(4) { animation-delay: 0.36s; }
.mnm-call-wave span:nth-child(5) { animation-delay: 0.48s; }

@keyframes mnm-call-wave {
  0%, 100% { height: 8px; opacity: 0.5; }
  50% { height: 28px; opacity: 1; }
}

.mnm-call-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}

.mnm-call-ctl {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(125, 200, 255, 0.3);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.mnm-call-ctl:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.mnm-call-ctl.is-off {
  background: rgba(255, 80, 80, 0.2);
  border-color: rgba(255, 120, 120, 0.5);
  color: #ff9a9a;
}

.mnm-call-ctl.is-on {
  background: rgba(125, 252, 138, 0.15);
  border-color: rgba(125, 252, 138, 0.5);
  color: var(--green);
}

.mnm-call-ctl--end {
  background: rgba(220, 50, 50, 0.85);
  border-color: rgba(255, 100, 100, 0.6);
  width: 58px;
  height: 58px;
}

.mnm-call-footnote {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(150, 200, 255, 0.55);
  margin: 0;
  text-align: center;
}

.mnm-call--video .mnm-call-peer-av {
  opacity: 0.35;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mnm-call--video .mnm-call-wave {
  opacity: 0.4;
}

.msg-chat-guest-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 180, 100, 0.55);
  background: rgba(255, 140, 60, 0.12);
  color: var(--ui-guest-chip-color);
}

.msg-chat-guest-timer {
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

/* Terminal linked friend */
.terminal-field--linked-friend {
  margin-top: 4px;
  overflow: visible;
}

.terminal-linked-friend-wrap {
  position: relative;
  margin-top: 4px;
  overflow: visible;
}

.terminal-linked-friend-btn {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(80, 120, 90, 0.55);
  background: linear-gradient(
    180deg,
    rgba(8, 14, 12, 0.92),
    rgba(4, 8, 7, 0.96)
  );
  color: rgba(232, 248, 240, 0.95);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.terminal-linked-friend-btn::after {
  content: "▾";
  font-size: 10px;
  opacity: 0.65;
}

.terminal-linked-friend-btn:hover,
.terminal-linked-friend-btn:focus-visible {
  border-color: rgba(125, 252, 138, 0.55);
  box-shadow: 0 0 0 1px rgba(125, 252, 138, 0.12);
}

.terminal-linked-friend-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  max-height: min(240px, 40vh);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  border-radius: 8px;
  border: 1px solid rgba(236, 202, 116, 0.32);
  background: rgba(6, 12, 10, 0.98);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  padding: 4px;
}

.terminal-linked-friend-menu--portal {
  position: fixed !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-color: rgba(236, 202, 116, 0.38);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: terminal-linked-friend-menu-in 0.16s ease;
  z-index: 12050;
}

@keyframes terminal-linked-friend-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.terminal-linked-friend-menu[hidden] {
  display: none !important;
}

.terminal-linked-friend-option {
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(225, 242, 255, 0.92);
  text-align: left;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.terminal-linked-friend-option:hover,
.terminal-linked-friend-option.is-selected {
  background: rgba(236, 202, 116, 0.14);
  color: rgba(255, 248, 232, 0.98);
}

.terminal-linked-friend-select {
  display: none !important;
}

.terminal-field-hint {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-dim);
}

.place-linked-friend-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  border: 1px solid rgba(140, 190, 255, 0.45);
  background: rgba(58, 166, 255, 0.1);
  color: #9fd0ff;
  vertical-align: middle;
}

.place-linked-friend-chip i {
  font-size: 9px;
  opacity: 0.9;
}

/* Header of active dialog */

.message-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 10px 12px;
  overflow: visible;
}

.message-chat-header .msg-chat-peer-col {
  flex: 1 1 auto;
  min-width: 0;
}

.msg-chat-peer--with-av {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.msg-chat-peer-avatar {
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(125, 252, 138, 0.5);
  box-shadow:
    0 0 0 1px rgba(58, 166, 255, 0.25),
    0 0 14px rgba(125, 252, 138, 0.12);
  background: #020608;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-main);
}

.msg-chat-peer-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.msg-chat-peer-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
}

.msg-chat-peer-invites {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.msg-chat-invite-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-guest-bar-label-color);
  font-weight: 800;
  margin-right: 2px;
  flex-shrink: 0;
}

.msg-chat-peer-invites .msg-guest-chip--inline {
  font-size: 9px;
  color: var(--ui-guest-chip-color);
  padding-right: 14px;
}

.msg-chat-peer-invites .msg-guest-chip-remove {
  right: 4px;
  font-size: 8px;
}

.message-chat-header .msg-chat-peer-name {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--text-main);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-chat-header-actions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
  overflow: visible;
}

.msg-chat-action-btn {
  border: 1px solid rgba(80, 120, 90, 0.45);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-main);
  font-size: 11px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.msg-chat-action-btn i {
  font-size: 12px;
  line-height: 1;
}

.msg-chat-action-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

.msg-chat-action-btn[data-tip] {
  position: relative;
}

.msg-chat-action-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  font-size: 10px;
  letter-spacing: 0.02em;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(4, 10, 8, 0.96);
  border: 1px solid rgba(143, 211, 255, 0.28);
  color: rgba(210, 230, 240, 0.95);
  transition: opacity 0.15s ease;
  z-index: 140;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.msg-chat-header-actions .msg-chat-action-btn[data-tip]:last-child::after,
.msg-chat-header-actions .msg-chat-action-btn[data-tip]:nth-last-child(2)::after {
  left: auto;
  right: 0;
  transform: none;
}

.msg-chat-action-btn[data-tip]:hover::after,
.msg-chat-action-btn[data-tip]:focus-visible::after {
  opacity: 1;
}

.msg-chat-block-btn:hover {
  border-color: #c44;
  color: #f88;
}

.msg-chat-clear-btn:hover {
  border-color: #c66;
  color: #faa;
}

.age-gated {
  opacity: 0.45;
  cursor: not-allowed !important;
}

.map-chat-voice-pause-btn {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 90, 0.5);
  background: rgba(0, 0, 0, 0.4);
  color: var(--text-main);
  cursor: pointer;
}

.map-chat-voice-pause-btn.is-paused {
  border-color: var(--green);
  color: var(--green);
}

.mnm-report-overlay[hidden] {
  display: none !important;
}

.mnm-report-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1065;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mnm-report-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 4, 0.4);
  backdrop-filter: blur(10px);
}

.mnm-modal-chrome {
  position: relative;
  padding-top: calc(var(--ui-chrome-inset) + var(--ui-chrome-size) + 8px);
}

.mnm-modal-head {
  text-align: center;
  margin: 0 0 12px;
  padding: 0 8px;
}

.mnm-modal-title {
  margin: 0;
  text-align: center;
  width: 100%;
}

.mnm-report-window {
  position: relative;
  z-index: 1;
  width: min(420px, 94vw);
  padding: 0 18px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(125, 252, 138, 0.28);
  background: rgba(12, 20, 16, 0.96);
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.55);
}

.mnm-report-title {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}

.mnm-report-lead,
.mnm-report-foot {
  font-size: var(--font-sm);
  color: var(--text-dim);
  line-height: 1.45;
}

.mnm-report-label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-olive);
  margin: 10px 0 4px;
}

.mnm-report-select,
.mnm-report-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 90, 0.5);
  background: rgba(0, 0, 0, 0.55);
  color: var(--text-main);
  font-size: var(--font-sm);
  color-scheme: dark;
}

.mnm-report-textarea {
  resize: vertical;
  overflow-x: hidden;
}

.mnm-report-select option {
  background: #0a1210;
  color: #e8f2ea;
}

.mnm-report-select:focus,
.mnm-report-textarea:focus {
  outline: none;
  border-color: rgba(125, 252, 138, 0.55);
  box-shadow: 0 0 0 2px rgba(125, 252, 138, 0.12);
}

.mnm-report-close.ui-close {
  position: absolute !important;
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 4;
}

.message-chat-header .msg-chat-peer-route {
  font-size: 10px;
  color: var(--text-dim);
}

.msg-chat-encrypt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-olive);
  opacity: 0.92;
}

.msg-chat-encrypt-badge .fa-lock {
  font-size: 8px;
}

/* Demo: allow 2 bubbles (in + out) to look different */

#msgChatLog {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* (cleanup) Старые дубляжи сетки MY PAGE удалены: сетка задаётся выше одним блоком */

/* ============================
   Bucket List (LEFT PANEL)
   ============================ */
.bucket-list-panel {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: var(--space-14);
  background: radial-gradient(
      circle at 0 0,
      var(--ui-overlay-shell-grad) 0,
      var(--ui-overlay-shell-bg) 55%
    ),
    var(--bg-panel);
  border: 1px solid var(--border-soft);
  box-shadow: 0 0 0 1px var(--ui-panel-shell-ring), 0 14px 26px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.bucket-list-panel.bucket-list-panel--open {
  display: flex;
}

.bucket-list-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: var(--space-2);
}

.bucket-list-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.bucket-list-selected-meta {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--font-sm);
  letter-spacing: 0.06em;
  color: var(--text-muted, rgba(255, 255, 255, 0.62));
}

.bucket-list-selected-meta #bucketListSelectedCount {
  color: var(--accent-olive);
  font-weight: 600;
  transition: color 0.18s ease, transform 0.18s ease;
}

.bucket-list-selected-meta #bucketListSelectedCount.is-count-pulse {
  color: #7dfc8a;
  animation: bucket-count-pulse 0.55s ease-out 1;
}

@keyframes bucket-count-pulse {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.14);
  }
  100% {
    transform: scale(1);
  }
}

.bucket-list-title {
  font-family: var(--font-main);
  font-size: var(--font-lg);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-olive);
}

@media (prefers-reduced-motion: reduce) {
  .bucket-list-selected-meta #bucketListSelectedCount.is-count-pulse {
    animation: none !important;
  }

  .left-panel .places-panel .node-log-rank-footer.nlr-flash-leader,
  .left-panel .places-panel .node-log-rank-footer.nlr-flash-rank {
    animation: none !important;
  }
}

.bucket-list-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 6px;
}

.bucket-list-content {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

.bucket-list-content::-webkit-scrollbar {
  width: 8px;
}

.bucket-list-row {
  display: grid;
  grid-template-columns: 22px 1fr 90px;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid rgba(120, 160, 130, 0.18);
}

.bucket-check {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  filter: drop-shadow(0 0 2px rgba(58, 166, 255, 0.6));
}
.bucket-list-row.is-checked {
  background: linear-gradient(90deg, rgba(58,166,255,.16), rgba(58,166,255,.05));
  border-bottom-color: rgba(58,166,255,.45);
}
.bucket-list-row.is-checked .bucket-country-name {
  color: #c7ebff;
  font-weight: 700;
}
.bucket-list-row.is-checked .bucket-check {
  transform: scale(1.08);
  filter: drop-shadow(0 0 6px rgba(58,166,255,.95));
}
.bucket-list-row.is-completed .bucket-country-name {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(147, 222, 255, 0.9);
  opacity: 0.88;
}
.bucket-year[data-done-year="1"] {
  border-color: rgba(58, 166, 255, 0.65);
  background: rgba(18, 43, 56, 0.85);
  color: #ccefff;
  font-weight: 700;
}

.bucket-country-name {
  font-size: var(--font-sm);
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bucket-year {
  width: 90px;
  background: rgba(3, 10, 8, 0.96);
  border: 1px solid rgba(58, 166, 255, 0.35);
  color: var(--text-main);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-xs);
  outline: none;
  color-scheme: dark;
}

/* Number input spinners — синий неон, без светлой «капсулы» */
.bucket-year::-webkit-inner-spin-button,
.bucket-year::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 1;
  height: 22px;
  cursor: pointer;
  filter: brightness(0.75) saturate(2.2) hue-rotate(168deg)
    drop-shadow(0 0 4px rgba(58, 166, 255, 0.65));
}

.bucket-year:disabled {
  opacity: 0.45;
}

.bucket-year.is-year-open {
  color: rgba(175, 205, 190, 0.72);
  text-align: center;
}

.bucket-list-footer {
  padding-top: var(--space-4);
  border-top: 1px solid var(--accent-line);
  display: flex;
  gap: var(--space-4);
  align-items: center;
  justify-content: flex-end;
}

/* ——— MAP CHAT DOCK (VK-style, bottom-right on map) ——— */

.map-chat-dock {
  position: absolute;
  right: 12px;
  bottom: var(--map-floating-bottom, 40px);
  z-index: 25;
  width: min(300px, calc(100% - 24px));
  max-height: min(46vh, 360px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-glass-border);
  background: var(--map-chat-dock-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--map-chat-dock-shadow);
  pointer-events: auto;
}

/* Collapsed: keep NoDUS row visible (peek), hide other threads */
.map-chat-dock.map-chat-dock--collapsed .map-chat-dock-body {
  display: block;
}

.map-chat-dock.map-chat-dock--collapsed .map-chat-dock-list {
  max-height: 72px;
  overflow: hidden;
  padding-bottom: 4px;
}

.map-chat-dock.map-chat-dock--collapsed .map-chat-dock-row--nodus {
  min-height: 58px;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.map-chat-dock.map-chat-dock--collapsed .map-chat-dock-row:not(.map-chat-dock-row--nodus) {
  display: none !important;
}

.map-chat-dock.map-chat-dock--collapsed .map-chat-dock-collapse i {
  transform: rotate(-90deg);
}

.map-chat-dock-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: var(--map-chat-collapsed-height, 44px);
  box-sizing: border-box;
  border-bottom: 1px solid var(--ui-chat-sep);
  letter-spacing: 0.14em;
  font-size: var(--font-xs);
  text-transform: uppercase;
  color: var(--ui-map-chat-head-color);
  font-weight: 600;
}

.map-chat-dock-title {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.map-chat-dock-title i {
  opacity: 0.85;
}

.map-chat-dock-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff4060, #ff8060);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(255, 64, 96, 0.55);
}

.map-chat-dock-badge--alert {
  animation: map-chat-unread-blink 0.95s ease-in-out infinite;
}

@keyframes map-chat-unread-blink {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255, 64, 96, 0.45);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.14);
    box-shadow: 0 0 18px rgba(255, 40, 64, 0.95);
    opacity: 1;
  }
}

.map-chat-dock-collapse {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--ui-map-chat-collapse-bg);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}

.map-chat-dock-collapse:hover {
  color: var(--text-main);
  background: var(--ui-map-chat-collapse-hover-bg);
}

.map-chat-dock-collapse i {
  transition: transform 0.2s ease;
  font-size: 11px;
}

.map-chat-dock-body {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.map-chat-dock-list {
  max-height: min(38vh, 300px);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-chat-dock-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--ui-map-chat-row-bg);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.12s ease;
}

.map-chat-dock-row:hover {
  border-color: var(--ui-glass-border-strong);
  box-shadow: var(--ui-map-chat-row-hover-shadow);
  transform: translateY(-1px);
}

.map-chat-dock-row--unread {
  border-color: rgba(94, 176, 255, 0.32);
  background: rgba(58, 166, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(125, 252, 138, 0.12);
}

.map-chat-dock-av {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  background: var(--ui-map-chat-av-bg);
  box-shadow: var(--ui-map-chat-av-shadow);
  overflow: hidden;
  padding: 0;
}

.map-chat-dock-av img,
.friend-row-avatar img,
.msg-dialog-avatar img,
.mp-newchat-av img,
.map-mini-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  border-radius: 50%;
}

.friend-av--clickable,
.map-chat-dock-av.friend-av--clickable {
  cursor: pointer;
  border-color: var(--ui-map-chat-av-ring);
}

.friend-av--clickable:hover {
  box-shadow: var(--ui-map-chat-av-shadow);
}

.map-chat-dock-row--nodus .map-chat-dock-name {
  color: var(--ui-map-chat-nodus-name);
}

.msg-chat-peer--nodus {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.msg-chat-peer-bio {
  margin: 6px 0 0;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(170, 210, 195, 0.9);
  max-width: 52ch;
}

.msg-chat-peer-av-btn {
  padding: 0;
  border: 1px solid rgba(125, 252, 138, 0.4);
  background: transparent;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
}

.map-chat-dock-meta {
  flex: 1;
  min-width: 0;
}

.map-chat-dock-name {
  font-size: var(--font-sm);
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-chat-dock-snippet {
  font-size: var(--font-xs);
  color: var(--text-dim);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.map-chat-dock-time {
  font-size: 8px;
  color: var(--accent-olive);
  letter-spacing: 0.08em;
}

.map-chat-dock-row--pinned .map-chat-dock-pin i {
  color: rgba(125, 252, 138, 0.92);
}

.map-chat-dock-pin {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(160, 190, 205, 0.55);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.map-chat-dock-pin:hover,
.map-chat-dock-pin:focus-visible {
  color: rgba(125, 252, 138, 0.9);
  background: rgba(125, 252, 138, 0.08);
}

.map-chat-dock-hint {
  padding: 8px 10px 4px;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(160, 190, 205, 0.78);
  text-align: center;
}

.map-chat-dock-see-all {
  width: calc(100% - 12px);
  margin: 6px 6px 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(94, 176, 255, 0.22);
  background: rgba(58, 166, 255, 0.06);
  color: rgba(200, 225, 245, 0.92);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.map-chat-dock-see-all:hover,
.map-chat-dock-see-all:focus-visible {
  border-color: rgba(125, 252, 138, 0.35);
  background: rgba(125, 252, 138, 0.08);
  color: rgba(236, 244, 240, 0.96);
}

/* Mini chat floating on map */

/* Мини-чат: верх = ниже логотипов (зазор), не прижимаем к верхней кромке карты; вниз — над доком чатов */
.map-mini-chat {
  position: absolute;
  top: var(--map-mini-chat-top);
  right: 12px;
  bottom: max(96px, calc(var(--map-floating-bottom, 40px) + min(34vh, 260px) + 12px));
  z-index: 35;
  width: min(400px, calc(100% - 24px));
  max-width: calc(100% - 24px);
  height: auto;
  min-height: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-glass-border-strong);
  background: var(--ui-mini-chat-bg);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  box-shadow: var(--ui-mini-chat-shadow);
  pointer-events: auto;
  overflow: hidden;
}

.map-mini-chat .chat-rich-toolbar,
.map-mini-chat-compose,
.map-chat-photo-draft {
  flex-shrink: 0;
}

.map-chat-photo-draft {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-top: 1px solid var(--ui-mini-chat-photo-draft-border);
  background: var(--ui-mini-chat-photo-draft-bg);
}

.map-chat-photo-draft[hidden] {
  display: none !important;
}

.map-chat-photo-draft-preview {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(125, 252, 138, 0.25);
  background: rgba(0, 0, 0, 0.4);
}

.map-chat-photo-draft-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.map-chat-photo-draft-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-chat-photo-draft-label {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-olive);
}

.map-chat-photo-draft-caption {
  width: 100%;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--ui-mini-chat-photo-caption-border);
  background: var(--ui-mini-chat-photo-caption-bg);
  color: var(--text-main);
  font-size: var(--font-sm);
  font-family: inherit;
  line-height: 1.35;
  resize: none;
}

.map-chat-photo-draft-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.map-mini-msg-caption {
  margin-top: 6px;
  font-size: var(--font-sm);
  line-height: 1.35;
  color: var(--ui-mini-chat-caption-color);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.map-mini-chat[hidden] {
  display: none !important;
}

.map-mini-chat-header {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--ui-chat-sep);
  flex-shrink: 0;
}

.map-mini-chat-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.map-mini-chat-peer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.map-mini-chat-avatar {
  width: 76px;
  height: 76px;
  min-width: 76px;
  min-height: 76px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: var(--ui-mini-chat-avatar-text);
  background: var(--ui-mini-chat-avatar-bg);
  box-shadow:
    0 0 0 2px rgba(125, 252, 138, 0.55),
    0 0 16px rgba(125, 252, 138, 0.14);
  flex-shrink: 0;
  overflow: hidden;
}

.map-mini-chat .map-mini-chat-avatar {
  width: 76px;
  height: 76px;
  min-width: 76px;
  min-height: 76px;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid rgba(125, 252, 138, 0.55);
  box-shadow:
    0 0 0 1px rgba(58, 166, 255, 0.28),
    0 0 14px rgba(125, 252, 138, 0.15);
  background: #020608;
  overflow: hidden;
}

.map-mini-chat--nodus .map-mini-chat-avatar {
  width: 84px;
  height: 84px;
  min-width: 84px;
  min-height: 84px;
  border-color: rgba(125, 252, 138, 0.9);
  box-shadow:
    0 0 0 1px rgba(58, 166, 255, 0.5),
    0 0 22px rgba(125, 252, 138, 0.32);
}

.map-mini-chat-peer-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 auto;
  min-width: 0;
}

.map-mini-chat-name {
  display: block;
  font-size: var(--font-sm);
  color: var(--text-main);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-mini-chat-status {
  display: block;
  font-size: 10px;
  color: var(--accent-olive);
  letter-spacing: 0.02em;
  line-height: 1.35;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.map-mini-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}

.map-mini-chat-actions-maps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.map-mini-chat--nodus .map-mini-chat-actions {
  display: none !important;
}

.map-mini-chat-arrow-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--ui-glass-border-strong);
  background: rgba(58, 166, 255, 0.08);
  color: var(--blue);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease;
}

.map-mini-chat-arrow-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(58, 166, 255, 0.35);
  border-color: rgba(125, 252, 138, 0.55);
}

.map-mini-chat-arrow-their {
  border-color: rgba(125, 252, 138, 0.45);
  color: var(--green);
  background: rgba(125, 252, 138, 0.08);
}

.map-mini-chat-arrow-mine {
  border-color: rgba(255, 217, 90, 0.45);
  color: var(--yellow);
  background: rgba(255, 217, 90, 0.06);
}

.map-mini-chat-arrow-glyph {
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(58, 166, 255, 0.6));
}

.map-mini-chat-close {
  cursor: pointer;
  flex-shrink: 0;
}

.map-mini-chat-msgs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: var(--font-sm);
}

.map-mini-msg {
  box-sizing: border-box;
  width: fit-content;
  max-width: min(92%, 38ch);
  min-width: min-content;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  line-height: 1.35;
}

.map-mini-msg-text,
.map-mini-msg-loc {
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.map-mini-msg--in {
  align-self: flex-start;
  background: var(--ui-mini-chat-msg-in-bg);
  border: 1px solid var(--ui-mini-chat-msg-in-border);
  color: var(--text-main);
}

.map-mini-msg--out {
  align-self: flex-end;
  background: var(--ui-mini-chat-msg-out-bg);
  border: 1px solid var(--ui-mini-chat-msg-out-border);
  color: var(--ui-mini-chat-msg-out-color);
}

/* Исходящее + таймер редактирования: колонка, кнопка под баблом, не внутри текста */
.map-mini-msg-stack--out {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-end;
  gap: 4px;
  flex-shrink: 0;
  max-width: min(92%, 38ch);
  min-width: min-content;
}

/* Только мини-чат: кнопка редактирования под баблом, без position:absolute от .msg-edit-hud */
.map-mini-msg-edit-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: var(--ui-msg-edit-hud-bg);
  box-shadow: 0 0 0 1px var(--ui-msg-edit-hud-border);
}

.map-mini-msg-edit-btn:hover {
  box-shadow: 0 0 0 1px var(--ui-msg-edit-hud-border-hover),
    0 0 10px rgba(255, 217, 90, 0.12);
}

.map-mini-msg-edit-btn svg {
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.map-mini-msg-edit-btn .map-mini-msg-edit-ring-bg {
  fill: none;
  stroke: var(--ui-msg-edit-hud-ring);
  stroke-width: 2;
}

.map-mini-msg-edit-btn .map-mini-msg-edit-ring-prog {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 69.12;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.12s linear;
}

.map-mini-msg-edit-btn .map-mini-msg-edit-pencil {
  position: relative;
  z-index: 1;
  font-size: 7px;
  color: rgba(255, 230, 160, 0.95);
  pointer-events: none;
}

.map-mini-msg-stack--out.map-mini-msg-stack--editable {
  margin-bottom: 2px;
}

.map-mini-msg-stack--out > .map-mini-msg {
  max-width: 100%;
}

.map-mini-chat-msgs .msg-row {
  min-width: 0;
}

.map-mini-chat-msgs .msg-row > .map-mini-msg,
.map-mini-chat-msgs .msg-row > .map-mini-msg-stack--out {
  flex-shrink: 0;
}

.map-mini-chat-input-row {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding: 8px 10px 10px;
  border-top: 1px solid var(--ui-mini-chat-input-row-border);
}

.map-mini-chat-compose {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--ui-mini-chat-compose-border);
  background: var(--ui-mini-chat-compose-bg);
}

.map-mini-chat-compose-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  align-self: stretch;
  justify-content: center;
}

.map-mini-chat-compose-side .mnp-polish-icon-btn {
  width: 40px;
  height: 40px;
  margin-bottom: 0;
}

.map-mini-chat-compose .map-mini-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 88px;
  border-radius: 14px;
  padding: 10px 12px;
  border-color: var(--ui-mini-chat-input-border);
  background: var(--ui-mini-chat-input-bg);
}

.map-mini-chat-compose .map-mini-chat-send {
  flex: 0 0 52px;
  width: 52px;
  min-height: 88px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  padding: 0;
}

.map-mini-chat--nodus .map-mini-chat-status {
  color: var(--ui-mini-chat-nodus-status-color);
}

.map-mini-msg-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  max-width: 100%;
}

.map-mini-msg-line--out {
  align-items: flex-end;
}

.map-mini-msg-who {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-mini-chat-msg-who-color);
  line-height: 1;
  padding: 0 4px;
}

.map-mini-msg-line--out .map-mini-msg-who {
  color: rgba(143, 211, 255, 0.75);
}

.map-mini-msg-line--in .map-mini-msg-who {
  color: rgba(125, 252, 138, 0.8);
}

/* Shared voice level meter (map chat, MY PAGE audio, floating strip) */
.mnm-voice-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.mnm-voice-rec-lamp {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 64, 96, 0.35);
  box-shadow: 0 0 0 1px rgba(255, 64, 96, 0.4);
}

.mnm-voice-meter.is-recording .mnm-voice-rec-lamp {
  background: #ff3d5c;
  box-shadow:
    0 0 8px rgba(255, 64, 96, 0.85),
    0 0 16px rgba(255, 64, 96, 0.45);
  animation: mnm-voice-lamp-blink 1s ease-in-out infinite;
}

.mnm-voice-meter.is-recording.is-silent .mnm-voice-rec-lamp {
  opacity: 0.55;
  animation-duration: 1.4s;
}

@keyframes mnm-voice-lamp-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.88);
  }
}

.mnm-voice-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 26px;
  flex: 1;
  min-width: 48px;
}

.mnm-voice-eq-bar {
  flex: 1;
  max-width: 5px;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(125, 252, 138, 0.95), rgba(58, 166, 255, 0.75));
  transform: scaleY(0.14);
  transform-origin: center bottom;
  transition: transform 0.05s ease-out;
}

.mnm-voice-meter.is-recording .mnm-voice-eq-bar {
  background: linear-gradient(180deg, rgba(255, 140, 170, 0.95), rgba(255, 64, 96, 0.8));
}

.mnm-voice-meter-host {
  flex: 1;
  min-width: 0;
}

.mnm-voice-rec-strip {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 15040;
  padding: 8px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 64, 96, 0.45);
  background: rgba(8, 12, 16, 0.94);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

.mnm-voice-rec-strip[hidden] {
  display: none !important;
}

.mnm-voice-rec-strip-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}

.mnm-voice-rec-strip-timer {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 190, 205, 0.95);
  flex-shrink: 0;
}

.mnm-voice-rec-strip-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 120, 150, 0.9);
  flex-shrink: 0;
}

.mnm-voice-rec-strip--interactive,
.mnm-voice-rec-strip.mnm-voice-rec-strip--interactive {
  pointer-events: auto;
}

.mnm-voice-rec-strip-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mnm-voice-rec-cancel,
.mnm-voice-rec-send {
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
}

.mnm-voice-rec-cancel {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(220, 230, 240, 0.9);
}

.mnm-voice-rec-send {
  background: rgba(125, 252, 138, 0.18);
  border-color: rgba(125, 252, 138, 0.55);
  color: #b8ffc4;
}

.msg-chat-voice-rec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 10px 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 64, 96, 0.42);
  background: linear-gradient(
    135deg,
    rgba(255, 64, 96, 0.12),
    rgba(8, 12, 16, 0.55)
  );
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.msg-chat-voice-rec[hidden] {
  display: none !important;
}

.msg-chat-voice-rec-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.msg-chat-voice-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4060;
  box-shadow: 0 0 10px rgba(255, 64, 96, 0.8);
  animation: msg-voice-rec-pulse 1s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes msg-voice-rec-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.55;
    transform: scale(0.85);
  }
}

.msg-chat-voice-rec .mnm-voice-meter-host {
  flex: 1;
  min-width: 80px;
  max-width: 200px;
}

.msg-chat-voice-timer {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 190, 205, 0.95);
  flex-shrink: 0;
}

.msg-chat-voice-rec-label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 140, 160, 0.9);
  flex-shrink: 0;
}

.msg-chat-voice-rec-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.msg-chat-voice-cancel-btn,
.msg-chat-voice-send-btn {
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.msg-chat-voice-cancel-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(225, 235, 245, 0.92);
}

.msg-chat-voice-send-btn {
  background: rgba(125, 252, 138, 0.2);
  border-color: rgba(125, 252, 138, 0.6);
  color: #c8ffd0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.msg-chat-voice-send-btn:hover,
.msg-chat-voice-cancel-btn:hover {
  filter: brightness(1.08);
}

.map-chat-voice-rec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid rgba(255, 64, 96, 0.25);
  background: rgba(255, 64, 96, 0.06);
}

.map-chat-voice-rec[hidden] {
  display: none !important;
}

.map-chat-voice-eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  flex: 1;
  min-width: 0;
}

.map-voice-eq-bar {
  flex: 1;
  max-width: 6px;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 120, 160, 0.95), rgba(255, 64, 96, 0.7));
  transform: scaleY(0.2);
  transform-origin: center bottom;
  transition: transform 0.06s ease-out;
}

.map-chat-voice-timer {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 180, 200, 0.95);
  flex-shrink: 0;
}

.map-chat-voice-hint {
  display: none;
}

.chat-rich-btn.is-recording {
  color: #ff6b8a;
  border-color: rgba(255, 64, 96, 0.55);
  box-shadow: 0 0 14px rgba(255, 64, 96, 0.35);
}

.map-mini-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(58, 166, 255, 0.1);
  border: 1px solid rgba(58, 166, 255, 0.28);
  min-width: min(220px, 88%);
}

.map-mini-msg--in .map-mini-voice {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(80, 120, 90, 0.45);
}

.map-mini-voice-play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(125, 252, 138, 0.45);
  background: rgba(125, 252, 138, 0.12);
  color: var(--green);
  cursor: pointer;
  flex-shrink: 0;
}

.map-mini-voice-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 48px;
  height: 20px;
}

.map-mini-voice-bar {
  flex: 1;
  max-width: 4px;
  height: 40%;
  border-radius: 2px;
  background: rgba(125, 252, 138, 0.45);
}

.map-mini-voice.is-playing .map-mini-voice-bar {
  animation: map-voice-bar-pulse 0.55s ease-in-out infinite alternate;
}

.map-mini-voice.is-playing .map-mini-voice-bar:nth-child(odd) {
  animation-delay: 0.12s;
}

@keyframes map-voice-bar-pulse {
  from {
    transform: scaleY(0.35);
  }
  to {
    transform: scaleY(1);
  }
}

.map-mini-voice-dur {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: rgba(200, 230, 255, 0.9);
  flex-shrink: 0;
}

.map-mini-voice-speed {
  border: 1px solid rgba(255, 217, 90, 0.45);
  background: rgba(255, 217, 90, 0.08);
  color: var(--yellow);
  border-radius: 8px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}

.map-mini-voice audio {
  display: none;
}

.mnp-polish-icon-btn {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--ui-mnp-polish-border);
  background: var(--ui-mnp-polish-bg);
  color: var(--ui-mnp-polish-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-bottom: 2px;
}

.mnp-polish-icon-btn:hover {
  border-color: var(--ui-mnp-polish-hover-border);
  background: var(--ui-mnp-polish-hover-bg);
}

.map-mini-chat-input {
  flex: 1;
  min-width: 0;
  min-height: 72px;
  max-height: 200px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 90, 0.5);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-main);
  font-size: var(--font-sm);
  font-family: inherit;
  line-height: 1.35;
  resize: none;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  outline: none;
}

.map-mini-chat-input:focus {
  border-color: rgba(58, 166, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(58, 166, 255, 0.2);
}

.map-mini-chat-send {
  width: 40px;
  border: 1px solid rgba(80, 180, 255, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(58, 166, 255, 0.15);
  color: var(--blue);
  cursor: pointer;
}

.map-mini-chat-send:hover {
  background: rgba(58, 166, 255, 0.28);
}

.open-map-mini-chat .map-chat-dock {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.open-map-mini-chat .map-mini-chat {
  bottom: max(72px, calc(var(--map-floating-bottom, 40px) + 16px));
  z-index: 40;
}

/* ——— AI TRIP PLANNER (map column overlay) ——— */

.ai-planner-overlay {
  position: fixed;
  inset: 0;
  z-index: 4500;
  display: none;
  pointer-events: none;
}

.ai-planner-overlay:not([hidden]) {
  display: block;
  pointer-events: auto;
}

.ai-planner-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 4, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ai-planner-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100% - 24px));
  max-height: min(90vh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid rgba(125, 252, 138, 0.4);
  background: linear-gradient(
      165deg,
      rgba(14, 28, 22, 0.97) 0%,
      rgba(4, 10, 8, 0.99) 55%,
      rgba(8, 18, 32, 0.96) 100%
    );
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(58, 166, 255, 0.2),
    0 0 48px rgba(58, 166, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.ai-planner-hero {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 16px;
  align-items: start;
  padding: 18px 38px 12px 18px;
  border-bottom: 1px solid rgba(80, 120, 90, 0.35);
  background: linear-gradient(180deg, rgba(125, 252, 138, 0.06), transparent);
}

.ai-planner-hero-av {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(125, 252, 138, 0.65);
  box-shadow:
    0 0 0 1px rgba(58, 166, 255, 0.4),
    0 0 28px rgba(125, 252, 138, 0.28);
  cursor: pointer;
  flex-shrink: 0;
  background: #020608;
}

.ai-planner-hero-av img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ai-planner-hero-text {
  min-width: 0;
  padding-top: 4px;
}

.ai-planner-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px 4px;
}

.ai-planner-chip {
  border: 1px solid rgba(58, 166, 255, 0.35);
  background: rgba(58, 166, 255, 0.08);
  color: rgba(200, 230, 255, 0.95);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 10px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.ai-planner-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 252, 138, 0.55);
  box-shadow: 0 0 14px rgba(125, 252, 138, 0.18);
}

.ai-planner-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(80, 120, 90, 0.35);
}

.ai-planner-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(125, 252, 138, 0.95);
}

.ai-planner-sub {
  margin: 6px 0 0;
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.4;
  max-width: 36em;
}

.ai-planner-vision {
  margin: 0;
  padding: 10px 16px 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(200, 220, 210, 0.88);
  border-bottom: 1px solid rgba(80, 120, 90, 0.22);
}

.ai-planner-vision p {
  margin: 0 0 8px;
}

.ai-planner-vision p:last-child {
  margin-bottom: 0;
}

.ai-planner-close {
  flex-shrink: 0;
  cursor: pointer;
}

.ai-planner-log {
  flex: 1;
  min-height: 100px;
  max-height: 36vh;
  overflow-y: auto;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-planner-msg {
  max-width: 95%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ai-planner-msg--user {
  align-self: flex-end;
  background: rgba(58, 166, 255, 0.14);
  border: 1px solid rgba(58, 166, 255, 0.35);
  color: rgba(200, 230, 255, 0.95);
}

.ai-planner-msg--bot {
  align-self: flex-start;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(80, 120, 90, 0.45);
  color: var(--text-main);
}

.ai-planner-compose {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid rgba(80, 120, 90, 0.3);
  align-items: flex-end;
}

.ai-planner-input {
  flex: 1;
  min-height: 88px;
  max-height: 160px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 90, 0.5);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--font-sm);
  resize: none;
  outline: none;
}

.ai-planner-input:focus {
  border-color: rgba(58, 166, 255, 0.5);
}

.ai-planner-send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(125, 252, 138, 0.45);
  background: rgba(125, 252, 138, 0.1);
  color: rgba(125, 252, 138, 0.95);
  font-size: var(--font-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
}

.ai-planner-send:hover {
  box-shadow: 0 0 16px rgba(125, 252, 138, 0.2);
}

.ai-planner-foot {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 10px;
  color: var(--text-dim);
  line-height: 1.35;
}

/* ——— DEVELOPER HUB ——— */
.dev-hub-overlay {
  position: fixed;
  inset: 0;
  z-index: 4600;
  display: none;
  pointer-events: none;
}

.dev-hub-overlay:not([hidden]) {
  display: block;
  pointer-events: auto;
}

.dev-hub-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 8, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dev-hub-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100% - 28px));
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border: 1px solid rgba(143, 211, 255, 0.28);
  background: linear-gradient(165deg, rgba(14, 22, 30, 0.97), rgba(6, 10, 14, 0.99));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}

.dev-hub-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 38px 10px 16px;
  border-bottom: 1px solid rgba(80, 120, 140, 0.35);
}

.dev-hub-title {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(143, 211, 255, 0.95);
}

.dev-hub-sub {
  margin: 6px 0 0;
  font-size: var(--font-xs);
  color: var(--text-dim);
  line-height: 1.4;
  max-width: 40em;
}

.dev-hub-close {
  flex-shrink: 0;
  cursor: pointer;
}

.dev-hub-body {
  padding: 12px 16px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dev-hub-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dev-hub-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--font-xs);
  color: var(--text-dim);
}

.dev-hub-input {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 140, 0.45);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--font-sm);
}

.dev-hub-input:focus {
  outline: none;
  border-color: rgba(143, 211, 255, 0.55);
}

.dev-hub-btn {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(143, 211, 255, 0.45);
  background: rgba(58, 166, 255, 0.16);
  color: rgba(200, 230, 255, 0.95);
  font-size: var(--font-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
}

.dev-hub-btn--ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(120, 160, 170, 0.35);
}

.dev-hub-code-display {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(158, 245, 180, 0.95);
  background: rgba(0, 40, 24, 0.45);
  border: 1px solid rgba(125, 252, 138, 0.28);
}

.dev-hub-creds-hint {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
  word-break: break-all;
}

.dev-hub-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dev-hub-tab {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 140, 0.4);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.dev-hub-tab.is-active {
  border-color: rgba(143, 211, 255, 0.5);
  color: rgba(200, 230, 255, 0.95);
  background: rgba(58, 166, 255, 0.12);
}

.dev-hub-stats {
  margin: 0;
  padding: 0 0 0 18px;
  font-size: var(--font-sm);
  line-height: 1.55;
  color: var(--text-main);
}

.dev-hub-note {
  margin: 0;
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-dim);
}

.dev-hub-note--ip {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(80, 120, 100, 0.22);
  font-size: 9px;
  color: rgba(180, 205, 190, 0.72);
}

.dev-hub-note--ads {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(95, 148, 255, 0.26);
  border-radius: 10px;
  background: rgba(20, 31, 53, 0.35);
}

.dev-hub-h3 {
  margin: 8px 0 4px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(143, 211, 255, 0.85);
}

.dev-hub-pass-change {
  padding-top: 8px;
  border-top: 1px solid rgba(80, 120, 140, 0.25);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dev-hub-runbook {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* ——— OWNER CONSOLE (admin panel v72) ——— */
.owner-console-window {
  width: min(920px, calc(100% - 24px));
  max-height: min(90vh, 820px);
}

.owner-console-header {
  flex-wrap: wrap;
  gap: 12px;
}

.owner-console-product-switch {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.owner-console-product-btn {
  padding: 6px 10px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(80, 120, 140, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
}

.owner-console-product-btn.is-active {
  border-color: rgba(143, 211, 255, 0.5);
  color: rgba(200, 230, 255, 0.95);
  background: rgba(58, 166, 255, 0.14);
}

.owner-console-dash {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 12px;
  min-height: 360px;
}

.owner-console-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid rgba(80, 120, 140, 0.28);
  padding-right: 8px;
}

.owner-console-nav-btn {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
}

.owner-console-nav-btn.is-active {
  border-color: rgba(143, 211, 255, 0.35);
  background: rgba(58, 166, 255, 0.1);
  color: rgba(200, 230, 255, 0.95);
}

.owner-console-main {
  overflow-y: auto;
  max-height: min(68vh, 640px);
  padding-right: 4px;
}

.owner-console-section[hidden] {
  display: none !important;
}

.owner-console-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-xs);
  margin: 8px 0;
}

.owner-console-table th,
.owner-console-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(80, 120, 140, 0.22);
  text-align: left;
}

.owner-console-table thead th {
  position: sticky;
  top: 0;
  background: rgba(10, 16, 22, 0.95);
  z-index: 1;
}

.owner-console-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

.owner-console-num {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, monospace;
}

.owner-console-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  overflow: hidden;
  min-width: 80px;
}

.owner-console-bar span {
  display: block;
  height: 100%;
  background: rgba(58, 166, 255, 0.65);
  border-radius: 3px;
}

.owner-console-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.owner-console-kpi > div {
  padding: 8px;
  border: 1px solid rgba(80, 120, 140, 0.28);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 9px;
  color: var(--text-dim);
}

.owner-console-kpi-val {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: rgba(200, 230, 255, 0.95);
  font-variant-numeric: tabular-nums;
}

.owner-console-note {
  font-size: 10px;
  color: var(--text-dim);
  margin: 0 0 8px;
}

.owner-console-h4 {
  margin: 12px 0 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(143, 211, 255, 0.8);
}

.owner-console-input {
  width: 100%;
  box-sizing: border-box;
}

.owner-console-logout {
  margin-top: 12px;
  grid-column: 1 / -1;
}

.owner-console-audit {
  max-height: 200px;
  overflow-y: auto;
}

@media (max-width: 720px) {
  .owner-console-dash {
    grid-template-columns: 1fr;
  }
  .owner-console-nav {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid rgba(80, 120, 140, 0.28);
    padding-bottom: 8px;
  }
}

/* ——— GLOBAL LEGAL MODAL ——— */

.legal-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  pointer-events: none;
}

.legal-info-overlay:not([hidden]) {
  display: block;
  pointer-events: auto;
}

.legal-info-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.legal-info-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, calc(100% - 28px));
  max-height: min(88vh, 720px);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-window);
  border: var(--window-border-width) solid var(--window-border-color);
  background: var(--ui-legal-window-bg);
  box-shadow: var(--window-shadow-depth);
  overflow: hidden;
}

.legal-info-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 38px 14px 16px;
  border-bottom: 1px solid var(--ui-legal-header-border);
  flex-shrink: 0;
}

.legal-info-title {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.legal-info-close {
  cursor: pointer;
}

.legal-info-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ui-legal-tabs-border);
  flex-shrink: 0;
}

.legal-tab {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-legal-tab-border);
  background: var(--ui-legal-tab-bg);
  color: var(--text-dim);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.legal-tab.active {
  border-color: var(--ui-legal-tab-active-border);
  color: var(--ui-legal-tab-active-color);
  box-shadow: 0 0 12px rgba(58, 166, 255, 0.12);
}

.legal-info-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 18px 20px;
  font-size: var(--font-sm);
  line-height: 1.55;
  color: var(--ui-legal-body-color);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.legal-info-seal {
  flex-shrink: 0;
  align-self: center;
  pointer-events: none;
}

.legal-info-body h3 {
  margin: 0 0 10px;
  font-size: var(--font-md);
  color: var(--ui-legal-body-h3-color);
}

.legal-info-body p {
  margin: 0 0 12px;
}

.legal-info-body ul {
  margin: 0 0 12px;
  padding-left: 1.2em;
}

.legal-info-foot {
  margin: 0;
  padding: 12px 14px 14px 16px;
  font-size: 11px;
  color: var(--ui-legal-foot-color);
  border-top: 1px solid var(--ui-legal-foot-border);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  line-height: 1.5;
  flex-shrink: 0;
}

.legal-info-foot-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.legal-info-foot-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-legal-foot-brand-color);
  font-size: 11px;
}

.legal-emblem-c--foot {
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.legal-emblem-c--foot .legal-emblem-inner {
  font-size: 2em;
}

.legal-info-foot-warn {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ui-legal-foot-warn-color);
  max-width: 36em;
}

/* ——— Legal doc body (modal + standalone) ——— */

.legal-doc-header {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(58, 166, 255, 0.22);
  background: rgba(8, 24, 20, 0.55);
  font-size: 12px;
  line-height: 1.5;
}

.legal-doc-header p {
  margin: 0 0 6px;
}

.legal-doc-header p:last-child {
  margin-bottom: 0;
}

.legal-doc-kicker {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px !important;
}

.legal-doc-registry {
  margin-top: 8px !important;
  opacity: 0.92;
}

.legal-doc-meta {
  font-size: 11px;
  opacity: 0.75;
  margin-bottom: 14px !important;
}

.legal-doc-quote {
  padding: 10px 12px;
  border-left: 3px solid var(--green);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0 8px 8px 0;
}

.legal-inline-link,
.mnm-cookie-consent__link {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  color: var(--green);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.legal-doc-list-compact {
  font-size: 0.95em;
}

.legal-info-body h4 {
  margin: 16px 0 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ui-legal-body-h3-color);
}

.legal-info-body a {
  color: var(--green);
}

/* Standalone legal pages */

html.legal-standalone-root,
html:has(body.legal-standalone-page) {
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

body.legal-standalone-page {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: #060a09;
  color: #d8f5e8;
  overflow-x: hidden !important;
  overflow-y: visible !important;
  height: auto !important;
}

body.legal-standalone-page .legal-standalone-main.legal-info-body {
  flex: none !important;
  min-height: unset !important;
  max-height: none !important;
  overflow: visible !important;
  height: auto !important;
}

.legal-standalone-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(80, 120, 140, 0.25);
}

.legal-standalone-back {
  color: var(--green, #5fd4a0);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.legal-standalone-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.legal-standalone-footer {
  max-width: 820px;
  margin: 0 auto;
  padding: 20px 20px 32px;
  border-top: 1px solid rgba(80, 120, 140, 0.25);
  font-size: 12px;
  line-height: 1.55;
  color: rgba(200, 230, 210, 0.75);
}

.legal-standalone-registry {
  margin: 0 0 12px;
}

.site-legal-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 12px;
}

.site-legal-footer-links a {
  color: var(--green, #5fd4a0);
}

.legal-standalone-copy {
  margin: 0;
  opacity: 0.8;
}

.profile-legal-registry,
.my-page-legal-registry {
  display: block;
  font-size: 10px;
  opacity: 0.72;
  margin-top: 4px;
}

/* Cookie consent banner */

.mnm-cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6000;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(4, 12, 10, 0.96);
  border-top: 1px solid rgba(58, 166, 255, 0.28);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
}

.mnm-cookie-consent__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

.mnm-cookie-consent__text {
  margin: 0;
  flex: 1 1 280px;
  font-size: 12px;
  line-height: 1.5;
  color: #c8e8d8;
}

.mnm-cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mnm-cookie-consent__btn {
  font-size: 11px;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .mnm-cookie-consent__actions {
    width: 100%;
  }
  .mnm-cookie-consent__btn {
    flex: 1 1 auto;
  }
}

/* © in circle + shared TM line (MY PAGE, legal modal, feature map footer) */
.legal-emblem-c {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  vertical-align: middle;
}

.legal-emblem-c--sm {
  width: auto;
  height: auto;
  min-width: 0;
  border: none;
}

.legal-emblem-c--system {
  width: auto;
  height: auto;
  min-width: 0;
  border: none;
}

.legal-emblem-c--system .legal-emblem-inner {
  font-size: 1.2em;
  font-weight: 400;
}

.legal-emblem-inner {
  font-size: 1.1em;
  line-height: 1;
  font-weight: 400;
  color: var(--ui-legal-emblem-inner-color);
}

.legal-doc-emblem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  margin-right: 6px;
  border: none;
  border-radius: 0;
  font-size: 1.1em;
  font-weight: 400;
  vertical-align: middle;
  background: transparent;
  color: var(--ui-legal-emblem-inner-color);
}

/* ——— TRAVEL FORUM (center column replaces map) ——— */

.travel-forum-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-height: 0;
  height: 100%;
  padding: var(--space-10);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ui-forum-border);
  background: var(--ui-forum-bg);
  box-shadow: var(--ui-forum-shadow);
  isolation: isolate;
}

.tf-aurora {
  position: absolute;
  inset: -40% -20%;
  background: conic-gradient(
    from 180deg at 50% 50%,
    rgba(58, 166, 255, 0.12),
    transparent 25%,
    rgba(125, 252, 138, 0.1),
    transparent 50%,
    rgba(255, 64, 96, 0.06),
    transparent 75%,
    rgba(58, 166, 255, 0.08)
  );
  opacity: var(--ui-tf-aurora-opacity);
  animation: tf-aurora-spin 56s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes tf-aurora-spin {
  to {
    transform: rotate(360deg);
  }
}

.tf-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 3px
  );
  pointer-events: none;
  z-index: 1;
  opacity: var(--ui-tf-scanlines-opacity);
  mix-blend-mode: overlay;
}

.travel-forum-panel > .tf-header,
.travel-forum-panel > .tf-tabs,
.travel-forum-panel > .tf-toolbar,
.travel-forum-panel > .tf-toolbar-hint,
.travel-forum-panel > .tf-layout,
.travel-forum-panel > .tf-footer {
  position: relative;
  z-index: 72;
  pointer-events: auto;
}

.travel-forum-panel,
.travel-forum-panel .tf-card,
.travel-forum-panel .tf-card-title,
.travel-forum-panel .tf-card-meta,
.travel-forum-panel .tf-card-excerpt,
.travel-forum-panel .tf-thread-comment,
.travel-forum-panel .tf-thread-input,
.travel-forum-panel .tf-thread-send,
.travel-forum-panel .tf-media-btn,
.travel-forum-panel .tf-sort-select,
.travel-forum-panel .tf-search {
  font-family: var(--font-premium-ui);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Forum readability bump (without layout break) */
.travel-forum-panel {
  --font-xs: 10px;
  --font-sm: 12px;
  --font-md: 13px;
  --font-lg: 15px;
  --tf-control-h: 36px;
  --tf-control-radius: var(--radius-sm);
  --tf-control-pad-x: 12px;
}

.travel-forum-panel .tf-card-meta,
.travel-forum-panel .tf-sort-label-text,
.travel-forum-panel .tf-thread-comment,
.travel-forum-panel .tf-thread-input::placeholder {
  letter-spacing: 0.03em;
}

/* My Page / Messages text smoothing and slight upsize */
.my-page-shell,
.my-page-shell .message-chat,
.my-page-shell .message-chat-log,
.my-page-shell .message-chat-input,
.my-page-shell .message-dialogs {
  font-family: var(--font-mypage);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.my-page-shell .msg-dialog-name,
.my-page-shell .msg-text,
.my-page-shell .message-chat-input textarea#msgInput,
.my-page-shell .tf-composer-textarea {
  font-size: 14px;
  line-height: 1.45;
}

.tf-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  padding-right: 34px;
}

.tf-header-main {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.tf-logo-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 30%, #1a2830 0, #050a0c 70%);
  border: 1px solid rgba(125, 252, 138, 0.45);
  box-shadow: 0 0 0 1px rgba(58, 166, 255, 0.25),
    0 0 24px rgba(58, 166, 255, 0.25), inset 0 0 20px rgba(125, 252, 138, 0.08);
  color: var(--green);
  font-size: 22px;
  animation: tf-pulse-ring 4.8s ease-in-out infinite;
}

@keyframes tf-pulse-ring {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(58, 166, 255, 0.25),
      0 0 24px rgba(58, 166, 255, 0.25), inset 0 0 20px rgba(125, 252, 138, 0.08);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(125, 252, 138, 0.45),
      0 0 36px rgba(125, 252, 138, 0.2), inset 0 0 20px rgba(58, 166, 255, 0.12);
  }
}

.tf-title {
  font-size: 16px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-main);
  text-shadow: 0 0 8px rgba(58, 166, 255, 0.35);
}

.tf-subtitle {
  margin-top: 4px;
  font-size: var(--font-xs);
  color: var(--accent-olive);
  letter-spacing: 0.06em;
  max-width: 42ch;
}

.tf-close-btn {
  cursor: pointer;
  flex-shrink: 0;
}

.tf-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tf-tab {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-tf-tab-border);
  background: var(--ui-tf-tab-bg);
  color: var(--ui-tf-tab-color);
  font-size: var(--font-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
    transform 0.12s ease;
}

.tf-tab:hover {
  color: var(--text-main);
  border-color: var(--ui-tf-tab-hover-border);
  transform: translateY(-1px);
}

.tf-tab.active {
  color: var(--ui-tf-tab-active-color);
  border-color: var(--ui-tf-tab-active-border);
  box-shadow: var(--ui-tf-tab-active-shadow);
  background: var(--ui-tf-tab-active-bg);
}

.tf-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}

.tf-search {
  flex: 1 1 180px;
  min-width: 140px;
  height: var(--tf-control-h);
  box-sizing: border-box;
  padding: 0 var(--tf-control-pad-x);
  border-radius: var(--tf-control-radius);
  border: 1px solid var(--ui-tf-search-border);
  background: var(--ui-tf-search-bg);
  color: var(--text-main);
  font-size: var(--font-sm);
  outline: none;
}

.tf-search:focus {
  border-color: rgba(58, 166, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(58, 166, 255, 0.15);
}

.tf-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--tf-control-h);
  box-sizing: border-box;
  padding: 0 var(--tf-control-pad-x);
  border-radius: var(--tf-control-radius);
  border: 1px solid var(--ui-tf-action-btn-border);
  background: var(--ui-tf-action-btn-bg);
  color: var(--ui-tf-action-btn-color);
  font-size: var(--font-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.tf-share-btn:hover {
  box-shadow: var(--ui-tf-top-btn-hover-shadow);
  transform: translateY(-1px);
}

.tf-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--tf-control-h);
  box-sizing: border-box;
  padding: 0 8px 0 10px;
  border-radius: var(--tf-control-radius);
  border: 1px solid var(--ui-tf-sort-select-border);
  background: var(--ui-tf-sort-select-bg);
}

.tf-sort-label-text {
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--accent-olive);
  white-space: nowrap;
}

.tf-sort-select {
  max-width: 108px;
  height: calc(var(--tf-control-h) - 10px);
  box-sizing: border-box;
  padding: 0 6px;
  border-radius: calc(var(--tf-control-radius) - 1px);
  border: 1px solid var(--ui-tf-sort-select-border);
  background: var(--ui-tf-sort-select-bg);
  color: var(--text-main);
  font-size: var(--font-xs);
  outline: none;
  cursor: pointer;
  color-scheme: var(--my-page-color-scheme, dark);
}
.tf-sort-select option {
  background: var(--my-page-select-option-bg);
  color: var(--my-page-select-option-color);
}

.tf-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--tf-control-h);
  box-sizing: border-box;
  padding: 0 var(--tf-control-pad-x);
  border-radius: var(--tf-control-radius);
  border: 1px solid var(--ui-tf-top-btn-border);
  background: var(--ui-tf-top-btn-bg);
  color: var(--ui-tf-top-btn-color);
  font-size: var(--font-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.tf-top-btn:hover {
  box-shadow: var(--ui-tf-top-btn-hover-shadow);
}

.tf-thread-hdr-row {
  display: block;
  width: 100%;
  min-width: 0;
  padding-right: 44px;
  box-sizing: border-box;
}

.tf-thread-hdr-main {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.tf-thread-hdr-main > strong {
  display: block;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: anywhere;
}

.tf-thread-back-parent {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(143, 211, 255, 0.92);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tf-thread-back-parent:hover {
  color: var(--green);
}

.tf-thread-copy-btn {
  flex-shrink: 0;
  min-height: 30px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(80, 180, 255, 0.4);
  background: rgba(3, 10, 18, 0.95);
  color: #8fd3ff;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
}

.tf-thread-copy-btn:hover {
  border-color: rgba(125, 252, 138, 0.55);
  color: var(--green);
}

.tf-feed-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-dim);
  font-size: var(--font-sm);
  line-height: 1.5;
}

.tf-layout {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: var(--space-10);
  flex: 1;
  min-height: 0;
}

@media (max-width: 900px) {
  .tf-layout {
    grid-template-columns: 1fr;
  }

  .tf-sidebar {
    order: 2;
  }
}

.tf-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-tf-sidebar-border);
  background: var(--ui-tf-sidebar-bg);
  min-height: 0;
  overflow-y: auto;
}

.tf-side-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ui-tf-side-label-color);
  text-transform: uppercase;
}

.tf-hot-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tf-hot-item {
  font-size: var(--font-xs);
  color: var(--ui-tf-hot-item-color);
  padding: 6px 0;
  border-bottom: 1px solid var(--ui-tf-hot-item-border);
  cursor: pointer;
  transition: color 0.15s ease;
}

.tf-hot-item:hover {
  color: var(--blue);
}

.tf-hot-item--geo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tf-hot-main {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tf-hot-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.tf-hot-heat {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(58, 166, 255, 0.25);
}

.tf-hot-count {
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ui-tf-hot-count-color);
}

.tf-hot-item--low .tf-hot-heat {
  background: #5fb3ff;
}

.tf-hot-item--mid .tf-hot-heat {
  background: #ffd95a;
  box-shadow: 0 0 10px rgba(255, 217, 90, 0.35);
}

.tf-hot-item--high .tf-hot-heat {
  background: #ff6f5f;
  box-shadow: 0 0 10px rgba(255, 111, 95, 0.4);
}

.tf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tf-tag {
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-tf-tag-border);
  background: var(--ui-tf-tag-bg);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ui-tf-tag-color);
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}

.tf-tag:hover {
  border-color: var(--ui-tf-tag-border);
  color: var(--ui-tf-tag-color);
  background: var(--ui-tf-tag-hover-bg);
  box-shadow: none;
}

.tf-feed {
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, var(--space-8));
  padding-right: 4px;
}

.tf-card {
  position: relative;
  padding: clamp(10px, 1.6vh, var(--space-10));
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-tf-card-border);
  background: var(--ui-tf-card-bg);
  box-shadow: var(--ui-tf-card-shadow);
  transition: transform 0.18s ease, border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.tf-card:hover {
  transform: translateY(-2px);
  border-color: var(--ui-tf-card-hover-border);
  box-shadow: var(--ui-tf-card-hover-shadow);
}

.tf-card--sponsored {
  border-color: rgba(143, 211, 255, 0.28);
  background: var(--ui-tf-card-sponsored-bg);
}

.tf-card--sponsored .tf-card-title {
  color: var(--ui-tf-card-sponsored-title-color);
}

.tf-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-bottom: clamp(6px, 1vh, var(--space-6));
}

.tf-card-title {
  font-size: clamp(13px, 1.5vw, var(--font-lg));
  color: var(--text-main);
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.tf-card-meta {
  font-size: var(--font-xs);
  color: var(--accent-olive);
  letter-spacing: 0.06em;
}

.tf-card-excerpt {
  font-size: clamp(11px, 1.2vw, var(--font-sm));
  color: var(--text-dim);
  line-height: 1.45;
}

.tf-card-footer {
  margin-top: clamp(8px, 1.2vh, var(--space-8));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  font-size: var(--font-xs);
  color: var(--accent-olive);
}

.tf-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(58, 166, 255, 0.35);
  color: var(--blue);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tf-pill--friends {
  border-color: rgba(255, 180, 90, 0.45);
  color: #ffc978;
}

.tf-thread-share-btn {
  border-color: rgba(80, 180, 255, 0.45);
  color: #8fd3ff;
  background: rgba(58, 166, 255, 0.08);
}

.tf-thread-share-btn:hover {
  border-color: rgba(125, 252, 138, 0.5);
  color: var(--green);
}

.tf-footer {
  padding-top: var(--space-4);
  border-top: 1px solid rgba(80, 140, 100, 0.25);
}

.tf-footer-hint {
  font-size: var(--font-xs);
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.tf-toolbar--wrap {
  flex-wrap: wrap;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--ui-tf-toolbar-border);
  background: var(--ui-tf-toolbar-bg);
  box-shadow: var(--ui-tf-toolbar-shadow);
}

.tf-toolbar-hint {
  margin: 0 0 var(--space-8);
  font-size: var(--font-xs);
  line-height: 1.45;
  color: var(--accent-olive);
  letter-spacing: 0.04em;
  max-width: 720px;
}

.tf-geo-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 var(--space-8);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-tf-geo-border);
  background: var(--ui-tf-geo-bg);
}

.tf-geo-label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--blue);
}

.tf-geo-sep {
  font-size: 10px;
  color: var(--ui-tf-geo-sep-color);
}

.tf-geo-crumb,
.tf-geo-back {
  border: 1px solid var(--ui-tf-geo-crumb-border);
  border-radius: var(--radius-sm);
  background: var(--ui-tf-geo-crumb-bg);
  color: var(--ui-tf-geo-crumb-color);
  font-size: 10px;
  padding: 4px 8px;
  cursor: pointer;
}

.tf-geo-crumb:hover,
.tf-geo-back:hover {
  border-color: rgba(125, 252, 138, 0.55);
  color: var(--green);
}

.tf-geo-back {
  margin-left: auto;
}

.tf-new-topic-btn,
.tf-rules-btn,
.tf-toolbar .tf-share-btn,
.tf-toolbar .tf-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--tf-control-h);
  box-sizing: border-box;
  padding: 0 var(--tf-control-pad-x);
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-tf-action-btn-border);
  background: var(--ui-tf-action-btn-bg);
  color: var(--ui-tf-action-btn-color);
  font-size: var(--font-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

.tf-new-topic-btn i,
.tf-rules-btn i {
  flex-shrink: 0;
  opacity: 0.95;
}

.tf-rules-btn {
  border-color: var(--ui-tf-rules-btn-border);
  background: var(--ui-tf-action-btn-bg);
  color: var(--ui-tf-rules-btn-color);
}

.tf-new-topic-btn:hover,
.tf-rules-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 14px rgba(58, 166, 255, 0.2);
}

.travel-forum-panel .tf-modal-overlay {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10);
  overscroll-behavior: contain;
  pointer-events: none;
}

.travel-forum-panel .tf-modal-overlay[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.travel-forum-panel .tf-modal-overlay:not([hidden]) {
  z-index: 260;
  pointer-events: auto;
}

.travel-forum-panel.is-thread-open > .tf-header,
.travel-forum-panel.is-thread-open > .tf-tabs,
.travel-forum-panel.is-thread-open > .tf-toolbar,
.travel-forum-panel.is-thread-open > .tf-toolbar-hint,
.travel-forum-panel.is-thread-open > .tf-geo-breadcrumb,
.travel-forum-panel.is-thread-open > .tf-layout,
.travel-forum-panel.is-thread-open > .tf-footer,
.travel-forum-panel.is-forum-modal-open > .tf-header,
.travel-forum-panel.is-forum-modal-open > .tf-tabs,
.travel-forum-panel.is-forum-modal-open > .tf-toolbar,
.travel-forum-panel.is-forum-modal-open > .tf-toolbar-hint,
.travel-forum-panel.is-forum-modal-open > .tf-geo-breadcrumb,
.travel-forum-panel.is-forum-modal-open > .tf-layout,
.travel-forum-panel.is-forum-modal-open > .tf-footer {
  pointer-events: none;
}

.travel-forum-panel.is-thread-open .tf-feed,
.travel-forum-panel.is-forum-modal-open .tf-feed {
  overflow: hidden;
}

.travel-forum-panel .tf-modal-overlay:not([hidden]) .tf-modal-backdrop {
  pointer-events: auto;
}

.travel-forum-panel .tf-modal-overlay:not([hidden]) .tf-modal-window {
  pointer-events: auto;
}

#tfThreadOverlay {
  overscroll-behavior: contain;
}

.travel-forum-panel .tf-modal-overlay:not([hidden]) .tf-modal-backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.travel-forum-panel .tf-modal-overlay:not([hidden]) .tf-modal-window--thread {
  width: min(560px, calc(100% - 28px));
  height: min(92vh, 800px);
  max-height: calc(100% - 20px);
  border-radius: 8px !important;
  padding: 0 12px 12px !important;
  background: var(--ui-tf-modal-thread-bg) !important;
  border: 1px solid var(--window-border-color) !important;
  box-shadow: var(--window-shadow-depth);
  overflow: hidden;
  isolation: isolate;
  background-clip: padding-box;
}

.travel-forum-panel > .tf-header {
  z-index: 80;
}

.travel-forum-panel .tf-close-btn {
  position: absolute !important;
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
  left: auto !important;
  z-index: 90;
  pointer-events: auto;
  cursor: pointer;
}

html.tf-thread-open,
html.tf-modal-open,
body.tf-thread-open,
body.tf-modal-open {
  overflow: hidden !important;
  height: 100%;
}

.app-shell.is-forum-bg-locked {
  overflow: hidden !important;
  height: 100vh;
  height: 100dvh;
}

.app-shell.is-forum-bg-locked .left-panel,
.app-shell.is-forum-bg-locked .map-panel,
.app-shell.is-forum-bg-locked .center-panel,
.app-shell.is-forum-bg-locked .right-panel-wrapper {
  overflow: hidden !important;
}

.travel-forum-panel.is-forum-modal-open {
  overflow: hidden;
}

.tf-modal-overlay[hidden] {
  display: none !important;
}

.tf-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
}

.tf-modal-window {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(80vh, 520px);
  overflow-y: auto;
  padding: var(--space-14);
  border-radius: var(--radius-window);
  border: var(--window-border-width) solid var(--window-border-color);
  background: var(--ui-tf-modal-bg);
  box-shadow: var(--window-shadow-depth);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tf-modal-window--thread {
  width: min(480px, 100%);
  min-width: min(100%, 300px);
  height: min(92vh, 780px);
  max-height: min(92vh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 12px 12px;
  border-radius: var(--radius-window) !important;
  background: var(--ui-tf-modal-thread-bg) !important;
  border: var(--window-border-width) solid var(--window-border-color) !important;
  box-shadow: var(--window-shadow-depth);
  overflow-wrap: normal;
  word-break: normal;
}

.tf-modal-window--newtopic {
  width: min(520px, calc(100vw - 24px));
  height: auto;
  max-height: min(92vh, 860px);
  padding: 0 16px 16px;
  padding-top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  isolation: isolate;
  background-clip: padding-box;
  box-sizing: border-box;
}

.tf-modal-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-right: 34px;
}

.tf-modal-head--newtopic {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 0 10px;
  padding: 10px 34px 8px 10px;
  border-bottom: 1px solid rgba(125, 252, 138, 0.22);
  background: var(--ui-tf-modal-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tf-modal-head--newtopic .tf-modal-title {
  margin: 0;
  padding-right: 0;
}

.tf-modal-head--newtopic .tf-modal-close.ui-close {
  position: absolute !important;
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
  left: auto !important;
  z-index: 4;
  margin: 0 !important;
}

#tfNewTopicBody {
  min-height: 100px;
  max-height: 220px;
  resize: vertical;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.tf-modal-window--newtopic {
  overflow-x: hidden;
  max-height: min(92vh, 720px);
  overflow-y: auto;
  box-sizing: border-box;
}

.tf-modal-close {
  cursor: pointer;
}

.tf-modal-title {
  font-size: 14px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--space-10);
  padding-right: 40px;
}

.tf-rules-list {
  margin: 0 0 var(--space-8) 1em;
  padding: 0;
  font-size: var(--font-sm);
  color: var(--text-dim);
  line-height: 1.5;
}

.tf-rules-foot {
  font-size: var(--font-xs);
  color: var(--accent-olive);
  margin: 0;
}

.tf-form-label {
  display: block;
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--accent-olive);
  margin: 8px 0 4px;
  text-transform: uppercase;
}

.tf-form-input,
.tf-form-textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 90, 0.5);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-main);
  font-size: var(--font-sm);
}

.tf-geo-suggest {
  margin-top: 4px;
  border: 1px solid rgba(80, 120, 90, 0.5);
  border-radius: var(--radius-sm);
  background: rgba(5, 11, 9, 0.96);
  max-height: 146px;
  overflow-y: auto;
}

.tf-geo-suggest-item {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(80, 120, 90, 0.25);
  background: transparent;
  color: var(--text-main);
  text-align: left;
  padding: 8px 9px;
  font-size: var(--font-sm);
  cursor: pointer;
}

.tf-geo-suggest-item:last-child {
  border-bottom: 0;
}

.tf-geo-suggest-item:hover,
.tf-geo-suggest-item:focus-visible {
  background: rgba(125, 252, 138, 0.08);
  outline: none;
}

.tf-geo-suggest-item.is-active {
  background: rgba(125, 252, 138, 0.14);
  color: #dfffe7;
}

.tf-form-submit {
  margin-top: var(--space-10);
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(125, 252, 138, 0.5);
  border-radius: var(--radius-sm);
  background: rgba(125, 252, 138, 0.12);
  color: var(--green);
  font-size: var(--font-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
}

@media (max-height: 840px) {
  .tf-modal-window--newtopic {
    height: min(94vh, 820px);
    max-height: 94vh;
  }
}

@media (max-height: 760px) {
  #tfNewTopicOverlay {
    padding: 6px;
  }

  .tf-modal-window--newtopic {
    width: min(560px, calc(100vw - 20px));
    height: auto;
    max-height: 96vh;
    padding: 0 14px 14px;
  }

  .tf-modal-head--newtopic {
    padding: 8px 8px 7px;
    margin: 0 0 8px;
  }

  .tf-form-label {
    margin: 6px 0 3px;
  }

  .tf-form-input,
  .tf-form-textarea {
    padding: 7px 9px;
  }

  #tfNewTopicBody {
    min-height: 84px;
    max-height: 140px;
  }

  .tf-compose-tools {
    gap: 6px;
    margin-top: 8px;
  }

  .tf-form-submit {
    margin-top: 8px;
    padding: 9px;
  }
}

.tf-thread-hdr-main .tf-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tf-thread-sticky-top {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 -12px 6px;
  padding: 6px 36px 6px 10px;
  border-bottom: 1px solid var(--ui-tf-modal-thread-border, rgba(125, 252, 138, 0.22));
  background: var(--ui-tf-modal-thread-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.tf-thread-header {
  font-size: var(--font-md);
  color: var(--text-main);
  margin-bottom: 4px;
  padding-right: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.tf-thread-back-parent {
  display: block;
  width: 100%;
  margin: 0 0 4px;
  padding: 4px 6px;
  border: none;
  background: rgba(8, 22, 32, 0.65);
  color: rgba(143, 211, 255, 0.92);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 4px;
}

.tf-thread-sticky-top > .tf-modal-close.ui-close {
  position: absolute !important;
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
  left: auto !important;
  margin: 0 !important;
  z-index: 5;
}

.tf-thread-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.tf-like-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  min-height: 32px;
  min-width: 56px;
  border-radius: 999px;
  border: 1px solid rgba(255, 64, 96, 0.45);
  background: rgba(255, 64, 96, 0.08);
  color: #ff8a9e;
  cursor: pointer;
  font-size: var(--font-xs);
  letter-spacing: 0.1em;
}

.tf-like-btn.is-liked {
  border-color: rgba(255, 217, 90, 0.6);
  color: var(--yellow);
  box-shadow: 0 0 12px rgba(255, 217, 90, 0.25);
}

.tf-thread-comments {
  flex: 1;
  min-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 0;
  padding-right: 2px;
}

.tf-thread-compose-shell {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 8px -14px -14px;
  padding: 10px 14px 14px;
  border-top: 1px solid rgba(80, 120, 90, 0.28);
  background: linear-gradient(
    180deg,
    rgba(6, 12, 10, 0.86) 0%,
    rgba(6, 12, 10, 0.95) 22%,
    rgba(6, 12, 10, 0.98) 100%
  );
  backdrop-filter: blur(5px);
}

.tf-thread-comment {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 90, 0.35);
  background: rgba(0, 0, 0, 0.25);
  font-size: var(--font-sm);
  color: var(--text-dim);
}

.tf-thread-comment strong {
  color: var(--blue);
  font-weight: 600;
}

.tf-thread-comment-line {
  margin-bottom: 6px;
}

.tf-thread-comment-actions {
  margin-top: 6px;
}

.tf-comment-like-btn {
  border: 1px solid rgba(255, 64, 96, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(255, 64, 96, 0.06);
  color: #ff9eb5;
  font-size: var(--font-xs);
  letter-spacing: 0.08em;
  padding: 4px 8px;
  cursor: pointer;
}

.tf-comment-like-btn.is-liked {
  color: var(--yellow);
  border-color: rgba(255, 217, 90, 0.55);
}

.tf-thread-compose {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.tf-compose-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  position: relative;
  flex-shrink: 0;
}

#tfThreadMediaPreview {
  flex-shrink: 0;
}

.tf-emoji-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tf-emoji-btn {
  border: 1px solid rgba(80, 120, 90, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.3);
  color: var(--text-main);
  padding: 3px 8px;
  cursor: pointer;
}

.tf-media-btn.is-on {
  border-color: rgba(125, 252, 138, 0.55);
  color: var(--green);
}

.tf-emoji-picker {
  display: none !important;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 6px;
  max-height: 170px;
  overflow: auto;
  padding: 8px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: min(320px, calc(100vw - 56px));
  border: 1px solid rgba(125, 252, 138, 0.35);
  border-radius: var(--radius-sm);
  background: rgba(8, 14, 12, 0.96);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.tf-emoji-picker[hidden] {
  display: none !important;
}

.tf-emoji-picker button {
  border: 1px solid rgba(80, 120, 90, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-main);
  cursor: pointer;
  min-height: 34px;
  font-size: 20px;
}

.tf-media-btn {
  border: 1px solid rgba(58, 166, 255, 0.4);
  border-radius: var(--radius-sm);
  background: rgba(58, 166, 255, 0.1);
  color: var(--blue);
  padding: 5px 10px;
  font-size: var(--font-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.tf-media-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.tf-media-preview-item {
  position: relative;
  width: 112px;
  height: 84px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 90, 0.35);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
}

.tf-media-preview-item img,
.tf-media-preview-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tf-media-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 1px solid rgba(255, 64, 96, 0.45);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  color: #ff9eb5;
  width: 22px;
  height: 22px;
  cursor: pointer;
}

.tf-inline-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.tf-inline-media--feed {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 6px;
  border-radius: calc(var(--radius-sm) + 2px);
  border: 1px solid rgba(80, 120, 90, 0.2);
  background: linear-gradient(
    180deg,
    rgba(6, 12, 10, 0.72) 0%,
    rgba(4, 8, 7, 0.78) 100%
  );
  min-height: clamp(140px, 24vh, 260px);
  align-items: center;
}

.tf-inline-media--feed.tf-inline-media--single {
  grid-template-columns: 1fr;
}

.tf-inline-media--feed.tf-inline-media--multi {
  grid-auto-rows: minmax(120px, 1fr);
}

.tf-inline-image,
.tf-inline-video {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 90, 0.35);
  object-fit: contain;
  background: rgba(0, 0, 0, 0.35);
}

.tf-inline-media--feed .tf-inline-image,
.tf-inline-media--feed .tf-inline-video {
  display: block;
  height: 100%;
  max-height: min(44vh, 360px);
  object-fit: contain;
  cursor: zoom-in;
}

.tf-inline-media--feed-cover .tf-inline-image,
.tf-inline-media--feed-cover .tf-inline-video {
  height: 100%;
  max-height: min(42vh, 320px);
  object-fit: cover;
}

.tf-inline-media--thread .tf-inline-image,
.tf-inline-media--thread .tf-inline-video,
.tf-inline-media--comment .tf-inline-image,
.tf-inline-media--comment .tf-inline-video {
  cursor: zoom-in;
}

.tf-media-viewer-window {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100vw - 32px));
  max-height: min(88vh, 760px);
  padding: 18px 18px 40px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(58, 166, 255, 0.35);
  background: rgba(5, 10, 8, 0.96);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.tf-media-viewer-body {
  width: 100%;
  height: min(78vh, 680px);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}

.tf-media-viewer-media {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 90, 0.4);
  background: rgba(0, 0, 0, 0.45);
  will-change: transform, opacity;
  transform-origin: center center;
  transition: transform 0.15s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.tf-media-viewer-media.is-zoomable {
  cursor: zoom-in;
}

.tf-media-viewer-media.is-zoomed {
  cursor: grab;
}

.tf-media-viewer-media.is-dragging {
  cursor: grabbing;
}

.tf-media-viewer-media.is-fade-in {
  animation: tfMediaFadeIn 0.2s ease;
}

.tf-media-viewer-media.is-slide-left {
  animation: tfMediaSlideLeft 0.24s ease;
}

.tf-media-viewer-media.is-slide-right {
  animation: tfMediaSlideRight 0.24s ease;
}

@keyframes tfMediaFadeIn {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}

@keyframes tfMediaSlideLeft {
  from {
    opacity: 0.35;
    transform: translateX(18px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes tfMediaSlideRight {
  from {
    opacity: 0.35;
    transform: translateX(-18px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.tf-media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  z-index: 3;
  transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.tf-media-nav:disabled {
  opacity: 0.38;
  cursor: default;
}

.tf-media-nav--prev {
  left: 12px;
}

.tf-media-nav--next {
  right: 12px;
}

.tf-media-nav:hover:not(:disabled) {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.06);
}

.tf-media-viewer-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--accent-olive);
}

.tf-media-viewer-thumbs {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 30px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
}

.tf-media-viewer-thumb {
  position: relative;
  width: 56px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid rgba(80, 120, 90, 0.45);
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  cursor: pointer;
  flex: 0 0 auto;
}

.tf-media-viewer-thumb.is-active {
  border-color: rgba(125, 252, 138, 0.7);
  box-shadow: 0 0 12px rgba(125, 252, 138, 0.28);
}

.tf-media-viewer-thumb img,
.tf-media-viewer-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tf-media-viewer-thumb-badge {
  position: absolute;
  left: 4px;
  bottom: 3px;
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #cde8ff;
  background: rgba(3, 10, 18, 0.8);
  border: 1px solid rgba(58, 166, 255, 0.4);
  border-radius: 999px;
  padding: 1px 5px;
}

body.tf-media-viewer-open {
  overflow: hidden !important;
}

@media (max-width: 1366px), (max-height: 768px) {
  .tf-toolbar {
    gap: 6px;
  }

  .tf-card {
    padding: 10px;
  }

  .tf-card-footer {
    gap: 6px;
  }

  .tf-inline-media--feed {
    min-height: clamp(128px, 22vh, 220px);
    padding: 5px;
  }

  .tf-media-viewer-body {
    height: min(72vh, 560px);
  }

  .tf-media-viewer-thumbs {
    left: 10px;
    right: 10px;
    gap: 6px;
  }

  .tf-media-viewer-thumb {
    width: 50px;
    height: 36px;
  }
}

.tf-inline-media--thread .tf-inline-image,
.tf-inline-media--thread .tf-inline-video {
  max-height: min(20vh, 150px);
  height: min(20vh, 150px);
  object-fit: cover;
}

.tf-inline-media--thread {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 6px;
}

.tf-inline-media--comment .tf-inline-image,
.tf-inline-media--comment .tf-inline-video {
  max-height: min(28vh, 240px);
}

.tf-thread-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(80, 120, 90, 0.5);
  background: rgba(0, 0, 0, 0.35);
  color: var(--text-main);
  font-size: var(--font-sm);
}

.tf-thread-send {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(58, 166, 255, 0.45);
  background: rgba(58, 166, 255, 0.15);
  color: var(--blue);
  cursor: pointer;
  font-size: var(--font-xs);
  letter-spacing: 0.1em;
}

.tf-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--space-6);
}

.tf-post-react-wrap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tf-card-like-inline--react {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 72px;
  min-height: 44px;
  padding: 8px 14px;
  font-size: var(--font-sm);
  border-color: var(--ui-tf-card-react-border);
  background: var(--ui-tf-card-react-bg);
  color: var(--ui-tf-card-react-color);
}

.tf-card-like-inline--react .tf-react-emoji {
  font-size: 22px;
  line-height: 1;
}

.tf-card-like-inline--react .tf-react-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(220, 235, 225, 0.92);
}

.tf-card-like-inline--react.is-liked {
  border-color: rgba(255, 217, 90, 0.55);
  background: rgba(255, 217, 90, 0.1);
  box-shadow: 0 0 12px rgba(255, 217, 90, 0.18);
}

.tf-card-like-inline--react.is-liked .tf-react-count {
  color: var(--yellow);
}

.tf-card-share-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 36px;
  padding: 6px 12px;
  border-color: rgba(255, 217, 90, 0.45);
  background: rgba(255, 217, 90, 0.08);
  color: #ffe9a3;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}

.tf-card-share-inline i {
  font-size: 11px;
  opacity: 0.95;
}

.tf-card-share-inline:hover {
  border-color: rgba(255, 217, 90, 0.65);
  box-shadow: 0 0 12px rgba(255, 217, 90, 0.2);
}

.tf-card-open-btn {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(58, 166, 255, 0.4);
  background: transparent;
  color: var(--blue);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 600;
}

.tf-card-like-inline {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-tf-card-react-border);
  background: var(--ui-tf-card-react-bg);
  color: var(--ui-tf-card-react-color);
  font-size: 9px;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* Rich chat toolbar (map + My Page) */
.chat-rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 0;
  border-top: 1px solid var(--ui-chat-rich-toolbar-border);
}

.chat-rich-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-chat-rich-btn-border);
  background: var(--ui-chat-rich-btn-bg);
  color: var(--ui-chat-rich-btn-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.chat-rich-btn:hover {
  color: var(--ui-chat-rich-btn-hover-color);
  border-color: var(--ui-chat-rich-btn-hover-border);
}

.chat-rich-btn.is-recording {
  color: #ff4060;
  border-color: rgba(255, 64, 96, 0.6);
  animation: chat-rec-pulse 0.8s ease-in-out infinite;
}

@keyframes chat-rec-pulse {
  50% {
    box-shadow: 0 0 12px rgba(255, 64, 96, 0.45);
  }
}

.chat-emoji-popover {
  position: absolute;
  z-index: 10050;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 200px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--ui-chat-emoji-popover-border);
  background: var(--ui-chat-emoji-popover-bg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

.chat-emoji-popover--forum {
  max-width: min(240px, calc(100vw - 16px));
  gap: 6px;
}

.chat-emoji-popover button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.map-mini-msg-media {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin-top: 4px;
  display: block;
  cursor: zoom-in;
}

.chat-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.chat-image-lightbox[hidden] {
  display: none !important;
}

.chat-image-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
}

/* Premium unified close: bare cross, glow on hover (Tomato Battle excluded) */
.ui-close {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-chrome-size);
  height: var(--ui-chrome-size);
  min-width: var(--ui-chrome-size);
  min-height: var(--ui-chrome-size);
  padding: 0;
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  flex-shrink: 0;
  overflow: visible;
  transition: opacity 0.18s ease;
}

.ui-close::before,
.ui-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--ui-close-bar);
  box-shadow: var(--ui-close-bar-glow);
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(45deg);
}

.ui-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ui-close:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.ui-close:hover::before,
.ui-close:hover::after {
  background: var(--ui-close-bar-hover);
  box-shadow: var(--ui-close-bar-hover-glow);
}

.ui-close:active {
  transform: translateY(0);
}

.ui-close:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(128, 226, 160, 0.28),
    0 0 24px rgba(125, 252, 138, 0.32);
}

.fa,
.fas,
.far,
.fab,
[class^="fa-"],
[class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
  font-style: normal;
}

.tf-modal-close.ui-close {
  position: absolute;
  z-index: 4;
}

.chat-image-lightbox-close.ui-close {
  position: absolute;
  z-index: 2;
}

.match-close.ui-close {
  position: absolute;
  z-index: 2;
}

.achievement-help-close.ui-close {
  position: absolute;
  z-index: 2;
}

.friend-loc-request-close.ui-close {
  position: absolute;
}

.mp-newchat-close.ui-close {
  position: absolute;
  z-index: 2;
}

.chat-image-lightbox-img {
  position: relative;
  z-index: 1;
  max-width: min(96vw, 1200px);
  max-height: min(88vh, 900px);
  object-fit: contain;
  border-radius: var(--radius-md);
  border: 1px solid rgba(58, 166, 255, 0.35);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.75), 0 0 40px rgba(125, 252, 138, 0.12);
}

#msgChatLog img,
#mpGroupChatLog img {
  cursor: zoom-in;
}

.map-mini-msg-loc {
  font-size: var(--font-xs);
  color: var(--blue);
  margin-top: 4px;
}

.map-mini-msg-audio {
  width: 100%;
  margin-top: 6px;
}

.message-chat-input .chat-rich-toolbar {
  border-top: none;
  padding-top: 4px;
  padding-bottom: 4px;
}

/* MY PAGE чат: «+» и вертикальное меню вложений */
.msg-chat-plus-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}

.chat-plus-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat-plus-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.chat-plus-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  z-index: 200;
  min-width: 168px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(143, 211, 255, 0.28);
  background: rgba(6, 12, 10, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-plus-menu--premium {
  left: 0;
  right: auto;
  transform: none;
  box-sizing: border-box;
  min-width: 0;
  width: 220px;
  max-width: min(220px, calc(100vw - 16px));
  max-height: none;
  overflow: visible;
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(52px, auto);
  gap: 4px;
  border-radius: 12px;
  border-color: rgba(143, 211, 255, 0.34);
  background: linear-gradient(
      165deg,
      rgba(12, 22, 18, 0.97),
      rgba(4, 10, 8, 0.95)
    ),
    radial-gradient(circle at 0 0, rgba(58, 166, 255, 0.1), transparent 55%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(125, 252, 138, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.chat-plus-menu--premium .chat-plus-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  height: 100%;
  padding: 5px 3px;
  border-radius: 9px;
  border: 1px solid rgba(80, 120, 90, 0.25);
  background: rgba(0, 0, 0, 0.28);
  color: rgba(225, 242, 255, 0.92);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
  width: 100%;
  box-sizing: border-box;
}

.chat-plus-menu--premium .chat-plus-menu-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(58, 166, 255, 0.12);
  border: 1px solid rgba(58, 166, 255, 0.28);
  font-size: 11px;
  color: rgba(180, 220, 255, 0.95);
}

.chat-plus-menu--premium .chat-plus-menu-label {
  display: block;
  width: 100%;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 1px;
}

.chat-plus-menu--premium .chat-plus-menu-item:hover {
  border-color: rgba(125, 252, 138, 0.45);
  background: rgba(58, 166, 255, 0.14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

.chat-plus-menu--premium .chat-plus-menu-item.is-recording {
  border-color: rgba(255, 64, 96, 0.55);
  color: #ffb8c8;
}

.chat-plus-menu--premium .chat-plus-menu-item.is-recording .chat-plus-menu-icon {
  color: #ff6080;
  border-color: rgba(255, 64, 96, 0.5);
  animation: chat-rec-pulse 0.8s ease-in-out infinite;
}

.message-chat-input .chat-plus-btn {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  margin: 0;
  font-size: 16px;
  border-color: rgba(125, 252, 138, 0.42);
  color: rgba(125, 252, 138, 0.95);
  box-shadow: 0 0 0 1px rgba(58, 166, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.45);
}

.message-chat-input .chat-plus-btn.is-open {
  border-color: rgba(58, 166, 255, 0.65);
  background: rgba(58, 166, 255, 0.18);
  color: #fff;
  transform: rotate(45deg);
}

.chat-plus-menu[hidden] {
  display: none !important;
}

.chat-plus-menu:not(.chat-plus-menu--premium) button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(220, 240, 230, 0.92);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.chat-plus-menu:not(.chat-plus-menu--premium) button i {
  width: 18px;
  text-align: center;
  color: rgba(143, 211, 255, 0.9);
}

.chat-plus-menu:not(.chat-plus-menu--premium) button:hover {
  background: rgba(58, 166, 255, 0.12);
  color: #fff;
}

.chat-plus-menu:not(.chat-plus-menu--premium) button.is-recording {
  color: #ff8a9a;
}

.chat-plus-menu:not(.chat-plus-menu--premium) button.is-recording i {
  color: #ff4060;
}

/* ===== Premium global UI polish ===== */
.btn-main,
.btn-ghost,
button,
[role="button"]{
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, filter .14s ease, background-color .14s ease;
}
.btn-main:hover,
.btn-ghost:hover,
.btn-square:hover {
  transform: translateY(-1px);
}
.btn-main:hover {
  box-shadow: var(--ui-primary-shadow), var(--ui-glow-primary);
}
.btn-ghost:hover {
  box-shadow: var(--ui-glow-secondary);
  border-color: rgba(123, 184, 245, 0.62);
}
.ui-close:hover,
.photo-album-nav:hover,
.photo-album-fs:hover,
.map-birthhome-pin-wrap:hover .map-birthhome-pin,
.photo-album-nav:active,
.photo-album-fs:active {
  transform: none !important;
}
.ui-close,
.photo-album-fs,
.photo-album-nav,
.map-birthhome-pin-wrap .map-birthhome-pin {
  filter: saturate(1.06) contrast(1.02);
}
.map-birthhome-pin-wrap:hover .map-birthhome-pin--birth {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(255, 150, 70, 0.48),
    0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 220, 180, 0.22);
}
.map-birthhome-pin-wrap:hover .map-birthhome-pin--home {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(68, 214, 168, 0.45),
    0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(180, 255, 220, 0.2);
}
.btn-main:focus-visible,
.btn-ghost:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline: none;
  box-shadow: var(--ui-focus-ring);
}
body:not(.tomato-mode) .app-data-panel,
body:not(.tomato-mode) .legal-info-window,
body:not(.tomato-mode) .photo-album-frame,
body:not(.tomato-mode) .map-settings-panel {
  box-shadow: var(--window-shadow-depth);
}
body:not(.tomato-mode) .app-data-panel,
body:not(.tomato-mode) .legal-info-window {
  border-color: var(--window-border-color);
}

.terminal-window {
  border-color: var(--window-border-color) !important;
  box-shadow: var(--window-shadow-depth) !important;
}

/* Typography lock for left/right main menus (without logo/intro/Tomato Battle). */
.left-panel,
.right-panel,
.left-panel :not(.logo-main):not(.logo-main *):not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab),
.right-panel :not(.logo-main):not(.logo-main *):not(i):not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab) {
  font-family: var(--font-main);
}

.left-panel .panel-title,
.right-panel .panel-title,
.left-panel .panel-subtitle,
.right-panel .panel-subtitle,
.profile-nav-title,
.profile-caption,
.panel-header,
.panel-header-main,
.panel-header-sub {
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.right-panel,
.right-panel .profile-nav-item,
.right-panel .profile-nav-item span,
.right-panel .profile-list li,
.right-panel .profile-sub {
  font-size: 10px;
  line-height: 1.22;
}

/* Unified top-right close placement for panel headers/modals. */
.app-data-header .ui-close,
.friend-rank-header .ui-close,
.travel-routes-header .ui-close,
.friends-online-header .ui-close,
.legal-info-header .ui-close {
  position: absolute;
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
}

.notifications-header .notifications-close.ui-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.tf-modal-close.ui-close,
.chat-image-lightbox-close.ui-close,
.match-close.ui-close,
.achievement-help-close.ui-close,
.friend-loc-request-close.ui-close,
.map-settings-close-btn.ui-close,
.map-mini-chat-close.ui-close,
.ai-planner-close.ui-close,
.country-hub-panel-close.ui-close,
.hub-map-viewer-close.ui-close,
.nodus-profile-close.ui-close,
.dev-hub-close.ui-close,
.map-users-close.ui-close,
.tf-close-btn.ui-close,
.notebook-head-btn--close.ui-close,
.mp-newchat-close.ui-close,
.legal-info-close.ui-close,
.mnm-report-close.ui-close,
.mnm-story-close.ui-close,
.terminal-close.ui-close,
.app-data-close.ui-close,
.friend-rank-close.ui-close,
.travel-routes-close.ui-close,
.friends-online-close.ui-close,
.app-data-shell-close.ui-close {
  position: absolute !important;
  left: auto !important;
  bottom: auto !important;
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
  margin: 0 !important;
  z-index: 4;
}

.app-data-shell-close.ui-close,
.app-data-close.ui-close,
.friend-rank-close.ui-close,
.travel-routes-close.ui-close,
.notifications-close.ui-close,
.friends-online-close.ui-close,
.map-users-close.ui-close,
.map-mini-chat-close.ui-close,
.ai-planner-close.ui-close,
.dev-hub-close.ui-close,
.photo-album-close.ui-close,
.notebook-head-btn--close.ui-close,
.tf-close-btn.ui-close {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.app-data-header:not(.app-data-header--centered) {
  padding-right: 120px;
}

.friends-online-header,
.friend-rank-header,
.travel-routes-header,
.legal-info-header {
  padding-right: calc(var(--ui-chrome-size) + var(--ui-chrome-inset) + 8px);
}

.travel-routes-list,
.friend-rank-list,
.left-panel .app-data-panel--split-shell,
.left-panel .app-data-panel--split-shell .app-data-split-main,
.legal-info-body {
  scrollbar-gutter: stable;
}

.travel-routes-list::-webkit-scrollbar-track,
.friend-rank-list::-webkit-scrollbar-track,
.achievements-panel-scroll::-webkit-scrollbar-track,
.left-panel .app-data-panel--split-shell::-webkit-scrollbar-track,
.left-panel .app-data-panel--split-shell .app-data-split-main::-webkit-scrollbar-track,
.left-panel .app-data-settings-rail::-webkit-scrollbar-track,
.left-panel .app-data-detail-body::-webkit-scrollbar-track,
.left-panel .app-data-home-view::-webkit-scrollbar-track,
.legal-info-body::-webkit-scrollbar-track {
  margin-block: var(--mnm-scroll-rail-inset-rounded, 26px);
  background: transparent;
  border-radius: 99px;
}
.map-hover-tip .mapboxgl-popup-content{
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.left-panel,
.right-panel,
.map-panel,
.tf-modal-window,
.chat-plus-menu,
.notifications-panel,
.travel-routes-panel,
.app-data-panel{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Thread modal: global rule above must not crush titles to one char per line */
.travel-forum-panel .tf-modal-window--thread,
.tf-modal-window.tf-modal-window--thread {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.travel-forum-panel .tf-modal-window--thread .tf-thread-header,
.travel-forum-panel .tf-modal-window--thread .tf-thread-hdr-main,
.travel-forum-panel .tf-modal-window--thread .tf-thread-hdr-row,
.travel-forum-panel .tf-modal-window--thread .tf-card-title,
.travel-forum-panel .tf-modal-window--thread .tf-card-meta,
.travel-forum-panel .tf-modal-window--thread .tf-card-excerpt {
  width: 100%;
  max-width: 100%;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal;
}

/* ============================ */
/* Shared expenses overlay UX  */
/* ============================ */
#splitExpensesOverlay .app-data-panel {
  width: min(1020px, 96vw) !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 14px auto 22px !important;
  padding: 14px 14px 18px !important;
  border-radius: var(--radius-window);
  border: var(--window-border-width) solid var(--window-border-color);
  background: #0f1826;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

#splitExpensesOverlay {
  position: fixed;
  inset: 0;
  z-index: 10080;
  overflow-y: auto;
  align-items: flex-start;
  padding: 0;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  scroll-padding-bottom: 32px;
  background: #0b1220;
}

#splitExpensesOverlay .app-data-backdrop {
  display: none !important;
}

#splitExpensesOverlay .split-panel {
  display: block;
  font-family: var(--font-main);
  width: min(1020px, 96vw) !important;
  margin: 14px auto 22px !important;
  padding-bottom: 0 !important;
  background: transparent;
  border: none;
  border-left: none;
  border-right: none;
  box-shadow: none;
  position: static;
  z-index: auto;
}

#splitExpensesOverlay .split-section--expenses {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(143, 211, 255, 0.14);
  clear: both;
}

#splitExpensesOverlay .split-section--expenses .feature-map-section-title {
  margin: 0 !important;
  padding: 0 2px;
}

#splitExpensesOverlay #splitExpensesSearch {
  display: block;
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

#splitExpensesOverlay #splitExpensesSearch:focus {
  transform: none !important;
  box-shadow: 0 0 0 1px rgba(143, 211, 255, 0.34), 0 0 14px rgba(58, 166, 255, 0.22);
}

#splitExpensesOverlay #splitExpensesList {
  margin: 0 !important;
  min-height: 52px;
  max-height: 220px !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  flex-shrink: 0;
  border: 1px solid rgba(184, 219, 255, 0.12);
  border-radius: 10px;
  background: #111b2b;
}

#splitExpensesOverlay .split-tools {
  margin-top: 16px;
  margin-bottom: 0;
  display: block;
}

#splitExpensesOverlay .split-section--share {
  margin-top: 14px;
  padding-bottom: 8px;
}

#splitExpensesOverlay .share-social-grid {
  margin: 12px 2px 4px;
}

#splitExpensesOverlay .split-panel-scroll-end {
  height: calc(16px + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  pointer-events: none;
}

#splitExpensesOverlay .app-data-header {
  margin-bottom: 4px;
  position: relative;
  justify-content: center;
  text-align: center;
  padding-right: 26px;
}

#splitExpensesOverlay #splitExpensesTitle {
  font-size: 17px;
  letter-spacing: 0.09em;
}

#splitExpensesOverlay #splitExpensesClose {
  position: absolute;
  top: var(--ui-chrome-inset);
  right: var(--ui-chrome-inset);
  transform: none;
  z-index: 4;
}

#splitExpensesOverlay .app-data-lead {
  margin: 2px 2px 10px;
  opacity: 0.88;
  font-size: 13px;
  padding: 0 2px;
  text-align: center;
}

#splitExpensesOverlay .feature-map-section-title {
  margin-top: 9px !important;
  margin-bottom: 6px !important;
  padding: 0 2px;
}

#splitExpensesOverlay .friends-online-list {
  border-radius: 10px;
  border: 1px solid rgba(184, 219, 255, 0.12);
  background: #111b2b;
  padding: 0;
}

#splitExpensesOverlay .friend-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
}

#splitExpensesOverlay .friend-row + .friend-row {
  border-top: 1px dashed rgba(143, 211, 255, 0.14);
}

#splitExpensesOverlay .friend-row .btn-ghost {
  min-width: 76px;
  padding: 4px 8px !important;
}

#splitExpensesOverlay .split-expense-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, auto);
  grid-template-areas:
    "main amount"
    "actions actions";
  align-items: center;
  row-gap: 8px;
  column-gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px dashed rgba(184, 219, 255, 0.14);
}

#splitExpensesOverlay .split-expense-main {
  grid-area: main;
  min-width: 0;
}

#splitExpensesOverlay .split-expense-title {
  font-size: 16px;
  line-height: 1.24;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-right: 2px;
}

#splitExpensesOverlay .split-expense-meta {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

#splitExpensesOverlay .split-expense-amount {
  grid-area: amount;
  justify-self: end;
  flex-shrink: 0;
  min-width: 92px;
  text-align: right;
}

#splitExpensesOverlay .split-expense-actions {
  grid-area: actions;
  display: flex;
  gap: 8px;
  width: 100%;
}

#splitExpensesOverlay .split-expense-actions .btn-ghost {
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  border-color: rgba(184, 219, 255, 0.16);
  background: rgba(255, 255, 255, 0.01);
}

#splitExpensesOverlay .split-expense-action-btn {
  padding: 4px 10px !important;
  margin: 0 !important;
}

#splitExpensesOverlay .split-expense-row:last-child {
  border-bottom: none;
}

#splitExpensesOverlay #splitFriendPick,
#splitExpensesOverlay #splitAddFriendBtn {
  min-height: 38px;
}

#splitExpensesOverlay .split-row-inline {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 2px;
}

#splitExpensesOverlay .share-social-grid {
  margin: 12px 2px 0;
  width: calc(100% - 4px);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

#splitExpensesOverlay #splitShareBtn {
  margin-bottom: 10px;
}

#splitExpensesOverlay .share-social-btn {
  border-color: rgba(184, 219, 255, 0.26);
  color: rgba(205, 230, 255, 0.92);
  background: rgba(20, 30, 42, 0.5);
}

#splitExpensesOverlay .share-social-btn:hover {
  border-color: rgba(205, 230, 255, 0.56);
  color: rgba(236, 246, 255, 0.98);
  background: rgba(26, 38, 54, 0.72);
}

#splitExpensesOverlay .split-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 2px;
}

#splitExpensesOverlay .friend-row-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.24;
  font-size: 15px;
  letter-spacing: 0.01em;
}

#splitExpensesOverlay #splitMembersList {
  max-height: none !important;
  overflow: visible !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  border: none;
  background: transparent;
  padding: 0;
}

#splitExpensesOverlay #splitMembersList .friend-row + .friend-row {
  border-top: none;
}

#splitExpensesOverlay .split-member-row {
  border: 1px solid rgba(184, 219, 255, 0.2);
  background: rgba(14, 22, 30, 0.56);
  align-items: center;
  min-height: 74px;
}

#splitExpensesOverlay .split-member-main {
  flex: 1;
  min-width: 0;
}

#splitExpensesOverlay .split-member-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
}

#splitExpensesOverlay .split-member-meta {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

#splitExpensesOverlay .split-pill {
  border: 1px solid rgba(143, 211, 255, 0.24);
  border-radius: 999px;
  padding: 2px 8px;
  background: rgba(9, 16, 14, 0.45);
  font-weight: 600;
}

#splitExpensesOverlay .split-pill--neutral {
  color: var(--text-dim);
  border-color: rgba(143, 211, 255, 0.24);
  background: rgba(9, 16, 14, 0.45);
}

#splitExpensesOverlay .split-pill--plus {
  color: #9ed4ff;
  border-color: rgba(143, 211, 255, 0.52);
  background: rgba(12, 24, 36, 0.68);
  text-shadow: 0 0 10px rgba(143, 211, 255, 0.2);
}

#splitExpensesOverlay .split-pill--minus {
  color: #ff9baa;
  border-color: rgba(255, 122, 140, 0.5);
  background: rgba(41, 14, 22, 0.62);
  text-shadow: 0 0 10px rgba(255, 122, 140, 0.18);
}

#splitExpensesOverlay #splitMembersList .friend-row .btn-ghost {
  border-color: rgba(255, 122, 140, 0.45);
  color: rgba(255, 185, 194, 0.95);
}

#splitExpensesOverlay .split-member-remove {
  min-width: auto !important;
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 4px 10px !important;
  min-height: 30px;
}

#splitExpensesOverlay #splitMembersList .friend-row .btn-ghost:hover {
  border-color: rgba(255, 122, 140, 0.8);
  box-shadow: 0 0 10px rgba(255, 122, 140, 0.2);
}

#splitExpensesOverlay #splitExpenseValidation {
  font-size: 11px !important;
  line-height: 1.3;
}

#splitExpensesOverlay #splitExpenseEditBox {
  border: 1px solid rgba(58, 166, 255, 0.25);
  border-radius: 10px;
  background: rgba(8, 14, 12, 0.56);
  padding: 8px;
}

#splitExpensesOverlay .split-tools {
  margin-top: 8px;
  border: 1px solid rgba(143, 211, 255, 0.2);
  border-radius: 10px;
  background: rgba(6, 12, 10, 0.28);
  padding: 6px 8px 8px;
}

#splitExpensesOverlay .split-tools summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--text-dim);
  user-select: none;
}

#splitExpensesOverlay .split-big-value {
  font-size: 15px !important;
  font-weight: 700;
  line-height: 1.25;
}

#splitExpensesOverlay .split-summary-grid {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

#splitExpensesOverlay .split-summary-grid--top {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#splitExpensesOverlay .split-summary-grid--bottom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#splitExpensesOverlay .split-summary-card {
  padding: 10px 12px;
  border: 1px solid rgba(184, 219, 255, 0.12);
  background: #111b2b;
}

#splitExpensesOverlay .auth-input {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid rgba(184, 219, 255, 0.34);
  background: linear-gradient(180deg, rgba(20, 30, 42, 0.88), rgba(15, 23, 34, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 10px rgba(0, 0, 0, 0.22);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
  font-size: 14px;
  padding-left: 11px;
  padding-right: 11px;
}

#splitExpensesOverlay .auth-input:focus {
  border-color: rgba(143, 211, 255, 0.86);
  box-shadow: 0 0 0 1px rgba(143, 211, 255, 0.34), 0 0 14px rgba(58, 166, 255, 0.22);
  transform: none !important;
}

#splitExpensesOverlay .split-settle-row {
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#splitExpensesOverlay .split-settle-name {
  flex: 1;
  min-width: 0;
  color: var(--text-main);
  font-size: 13px;
}

#splitExpensesOverlay .split-settle-amount {
  font-size: 13px;
  padding: 4px 10px;
  margin-left: 8px;
  flex-shrink: 0;
}

#splitExpensesOverlay #splitSettlement .friends-online-list {
  padding: 2px 0;
}

#splitExpensesOverlay #splitSettlement .friends-online-list .friend-row + .friend-row {
  border-top: 1px dashed rgba(184, 219, 255, 0.14);
}

#splitExpensesOverlay .feature-map-backlog-note .feature-map-section-title {
  font-size: 12px;
}

#splitExpensesOverlay .split-summary-card .info-label {
  padding-left: 1px;
  padding-right: 1px;
}

#splitExpensesOverlay .split-summary-card .info-value {
  padding-left: 1px;
  padding-right: 1px;
}

@media (max-width: 760px) {
  #splitExpensesOverlay #splitMembersList {
    grid-template-columns: 1fr;
  }

  #splitExpensesOverlay .split-summary-grid--top {
    grid-template-columns: 1fr !important;
  }

  #splitExpensesOverlay .split-summary-grid--bottom {
    grid-template-columns: 1fr !important;
  }
}

#splitExpensesOverlay #splitUndoDeleteBtn {
  border-color: rgba(255, 122, 140, 0.45);
  color: rgba(255, 185, 194, 0.95);
}

#splitExpensesOverlay #splitShareBtn {
  margin: 0 2px;
  min-height: 38px;
  border-color: rgba(184, 219, 255, 0.2);
  color: rgba(205, 230, 255, 0.95);
  background: #162338;
  width: calc(100% - 4px);
  justify-content: center;
}

@media (max-width: 760px) {
  #splitExpensesOverlay {
    padding: 0 !important;
    scroll-padding-bottom: 48px;
  }

  #splitExpensesOverlay .split-panel {
    width: 100vw !important;
    margin: 0 !important;
    border-left: none;
    border-right: none;
    border-radius: 0;
  }

  #splitExpensesOverlay .app-data-panel {
    width: 100vw !important;
    margin: 0 !important;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

@media (max-width: 760px) {
  #splitExpensesOverlay .app-data-panel {
    width: min(96vw, 540px) !important;
    max-height: none !important;
    padding: 10px !important;
  }

  #splitExpensesOverlay .split-form-grid {
    grid-template-columns: 1fr;
  }

  #splitExpensesOverlay .split-row-inline .btn-ghost,
  #splitExpensesOverlay .split-row-inline .btn-main {
    flex: 1 1 auto;
    min-height: 36px;
  }

  #splitExpensesOverlay .share-social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #splitExpensesOverlay .split-expense-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "amount"
      "actions";
  }

  #splitExpensesOverlay .split-expense-amount {
    justify-self: start;
  }
}
.app-shell select,
.app-shell input[type="text"],
.app-shell input[type="number"],
.app-shell input[type="email"],
.app-shell input[type="password"],
.app-shell textarea{
  background-color: rgba(6,12,10,.86);
  color: var(--text-main);
}
.app-shell select option{
  background: rgba(6,12,10,.98);
  color: var(--text-main);
}

/* Non-blocking global toast (replaces alert popups) */
.global-toast-root{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9999;
  display: grid;
  gap: 8px;
  width: min(620px, calc(100% - 20px));
  pointer-events: none;
}
.global-toast{
  border: 1px solid var(--ui-toast-border);
  border-radius: 12px;
  background: var(--ui-toast-bg);
  box-shadow: 0 14px 34px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.06);
  color: var(--ui-toast-text);
  font-size: 12px;
  letter-spacing: .05em;
  line-height: 1.35;
  padding: 10px 12px;
  opacity: 0;
  transform: translateY(6px);
}
.global-toast.is-in{
  opacity: 1;
  transform: translateY(0);
}
.global-toast--success{ border-color: rgba(125,252,138,.44); }
.global-toast--warning{ border-color: rgba(255,213,122,.44); }
.global-toast--error{ border-color: rgba(255,122,140,.44); }

/* Редактирование исходящего сообщения (30 с) */
.msg-bubble-out.msg-bubble--editable {
  padding-bottom: 34px;
}

.msg-bubble-out.msg-bubble--editable .msg-meta,
.msg-bubble-out.msg-bubble--editable .msg-text,
.msg-bubble-out.msg-bubble--editable .msg-text-edit,
.msg-bubble-out.msg-bubble--editable .msg-edit-actions {
  width: 100%;
}

.msg-edit-hud {
  position: absolute;
  right: 8px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--ui-msg-edit-hud-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--ui-msg-edit-hud-border);
  transition: box-shadow .14s ease;
}

.msg-edit-hud:hover {
  box-shadow: 0 0 0 1px var(--ui-msg-edit-hud-border-hover),
    0 0 12px rgba(255, 217, 90, 0.16);
}

.msg-edit-hud svg {
  position: absolute;
  inset: 0;
  width: 28px;
  height: 28px;
  pointer-events: none;
}

.msg-edit-hud .msg-edit-ring-bg {
  fill: none;
  stroke: var(--ui-msg-edit-hud-ring);
  stroke-width: 2;
}

.msg-edit-hud .msg-edit-ring-prog {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 69.12;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.15s linear;
}

.msg-edit-hud .msg-edit-pencil {
  position: relative;
  z-index: 1;
  font-size: 10px;
  color: var(--ui-msg-edit-hud-pencil);
  pointer-events: none;
}

.msg-text-edit {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--ui-msg-edit-textarea-border);
  background: var(--ui-msg-edit-textarea-bg);
  color: var(--text-main);
  font-family: inherit;
  font-size: var(--font-sm);
  resize: vertical;
}

.msg-edit-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  justify-content: flex-end;
}

.msg-edit-actions button {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(143, 211, 255, 0.35);
  background: rgba(8, 14, 12, 0.6);
  color: var(--text-dim);
  cursor: pointer;
}

.msg-edit-actions button.msg-edit-save {
  border-color: rgba(125, 252, 138, 0.55);
  color: var(--green);
}

.avatar-upload-trigger {
  cursor: pointer;
}

/* Celebration overlay */
.celebration-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.celebration-overlay[hidden] {
  display: none !important;
}

.celebration-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 40%,
    rgba(255, 217, 90, 0.15) 0,
    rgba(0, 0, 0, 0.65) 55%,
    rgba(0, 0, 0, 0.85) 100%
  );
  pointer-events: auto;
}

.celebration-card {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 32px 40px;
  max-width: min(90vw, 520px);
  border-radius: 16px;
  border: 1px solid rgba(255, 217, 90, 0.45);
  background: rgba(10, 16, 14, 0.88);
  box-shadow: 0 0 60px rgba(255, 217, 90, 0.25),
    0 0 120px rgba(58, 166, 255, 0.12);
  pointer-events: auto;
  animation: celebration-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes celebration-pop {
  from {
    opacity: 0;
    transform: scale(0.82) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.celebration-burst {
  position: absolute;
  inset: -30%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 217, 90, 0.12),
    transparent 30%,
    rgba(58, 166, 255, 0.1),
    transparent 60%,
    rgba(125, 252, 138, 0.1),
    transparent
  );
  animation: celebration-spin 4s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

@keyframes celebration-spin {
  to {
    transform: rotate(360deg);
  }
}

.celebration-title {
  position: relative;
  font-size: clamp(22px, 5vw, 38px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 0 0 20px rgba(255, 217, 90, 0.8), 0 0 40px rgba(255, 64, 96, 0.35);
  margin: 0 0 12px;
  animation: celebration-title-glow 1.2s ease-in-out infinite;
}

@keyframes celebration-title-glow {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.15);
  }
}

.celebration-sub {
  position: relative;
  margin: 0;
  font-size: var(--font-md);
  color: var(--text-main);
  line-height: 1.45;
  letter-spacing: 0.04em;
}

/* My Page top search: strip focus ring (must load after global input:focus-visible ~13693) */
#myPageSearch:focus,
#myPageSearch:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Terminal datepicker — theme tokens (Snow overrides via liquid-aurora) */
.flatpickr-calendar,
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  background: var(--ui-flatpickr-bg) !important;
  border: 1px solid var(--ui-flatpickr-border) !important;
  box-shadow: var(--ui-flatpickr-shadow) !important;
  color: var(--ui-flatpickr-text) !important;
  width: 232px !important;
  max-width: 232px !important;
  font-size: 11px !important;
}

.flatpickr-months,
.flatpickr-weekdays {
  background: transparent !important;
}

.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-monthDropdown-month,
.flatpickr-weekday {
  color: var(--ui-flatpickr-weekday) !important;
  fill: var(--ui-flatpickr-weekday) !important;
  background: transparent !important;
}

.flatpickr-monthDropdown-months option {
  background: var(--ui-flatpickr-option-bg) !important;
  color: var(--ui-flatpickr-option-color) !important;
}

.flatpickr-prev-month,
.flatpickr-next-month,
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  color: var(--ui-flatpickr-nav-color) !important;
  fill: var(--ui-flatpickr-nav-color) !important;
}

.flatpickr-day {
  color: var(--ui-flatpickr-day) !important;
  border-color: transparent !important;
}

.flatpickr-day:hover {
  background: var(--ui-flatpickr-day-hover-bg) !important;
  border-color: var(--ui-flatpickr-day-hover-border) !important;
  color: var(--ui-flatpickr-day-hover-color) !important;
}

.flatpickr-day.today {
  border-color: var(--ui-flatpickr-day-today-border) !important;
  color: var(--ui-flatpickr-day-today-color) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--ui-flatpickr-day-selected-bg) !important;
  border-color: var(--ui-flatpickr-day-selected-border) !important;
  color: var(--ui-flatpickr-day-selected-color) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--ui-flatpickr-day-disabled) !important;
}

.flatpickr-days,
.dayContainer {
  width: 216px !important;
  min-width: 216px !important;
  max-width: 216px !important;
}

.flatpickr-day {
  max-width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
}

/* —— Roadmap P1–P7 polish (29.05.2026) —— */

.left-panel .panel-header {
  margin-top: 2px;
  margin-bottom: 4px;
}

.left-panel .controls-row {
  margin-top: 4px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: 5px;
}

.left-panel .controls-row #clearPlacesBtn,
.left-panel .controls-row #soundToggleBtn,
.left-panel .controls-row #addPlaceBtn {
  flex: none;
}

/* Компактный логотип — больше места под список нодов */
.left-panel .logo-block {
  margin-top: 0;
  padding-bottom: 2px;
  margin-bottom: 2px;
}

.left-panel .logo-block::after {
  margin-top: 5px;
}

.left-panel .logo-ascii {
  gap: 3px;
}

.left-panel .logo-main.logo-mymap-simple {
  gap: 5px;
  line-height: 1.06;
  margin-top: 2px;
}

.left-panel .logo-mymap-simple .logo-sub-line {
  margin-top: 1px;
  line-height: 1;
}

.left-panel .logo-sub {
  margin-top: 1px;
  line-height: 1.15;
}

.left-panel .info-row-paired-top {
  margin-top: 1px;
}

.left-panel .places-panel {
  margin-top: 10px;
  max-height: calc(100vh - 252px);
}

.left-panel .controls-row {
  margin-bottom: 0;
}

.left-panel .info-row {
  margin-top: 4px;
}

.right-panel.story-mode-on #rightStoryPanel {
  display: none !important;
}

.right-story-panel {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: rgba(8, 16, 14, 0.72);
  border: 1px solid rgba(125, 252, 138, 0.18);
}

.right-story-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.right-story-label {
  font-size: 9px;
  letter-spacing: 0.18em;
  color: rgba(125, 252, 138, 0.9);
}

.right-story-sub {
  font-size: 10px;
  color: var(--text-dim);
}

.right-story-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.right-story-hero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(143, 211, 255, 0.2);
}

.right-story-about {
  font-size: 10px;
  line-height: 1.45;
  color: rgba(210, 228, 238, 0.88);
  margin: 0;
}

#btnShowMyPage.btn-auth--premium {
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: var(--font-md);
  min-height: 30px;
  border-color: rgba(125, 252, 138, 0.42);
  box-shadow: var(--ui-primary-shadow), 0 0 12px rgba(125, 252, 138, 0.12);
}

.profile-auth-actions .btn-auth--premium {
  border-radius: var(--radius-sm);
}

.status-friend-rank {
  display: none !important;
}

/* Compact NODE LOG head: title + tools + friend rank strip */
.left-panel .places-panel .node-log-head {
  flex-shrink: 0;
  border-bottom: 1px solid var(--node-log-head-border);
  background: var(--node-log-head-bg);
}

.left-panel .places-panel .node-log-head-row--title.panel-header {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 8px 4px;
  margin: 0;
  border-bottom: 1px solid rgba(80, 120, 95, 0.35);
  text-align: center;
}

.left-panel .places-panel .node-log-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--node-log-title-color);
  width: 100%;
  text-align: center;
}

.left-panel .places-panel .node-log-head-row--title .panel-count {
  display: block;
  width: 100%;
  font-size: 9px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.left-panel .places-panel .node-log-head-row--title .panel-count-countries,
.left-panel .places-panel .node-log-head-row--title .panel-count-nodes,
.left-panel .places-panel .node-log-head-row--title .panel-count-sep {
  display: inline;
}

.left-panel .places-panel .node-log-head-row--tools.node-log-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 4px 6px 5px;
  border-bottom: none;
  background: transparent;
}

.left-panel .places-panel .node-log-search,
.left-panel .places-panel .node-log-type-filter,
.left-panel .places-panel .node-log-story-btn {
  height: 24px;
  min-height: 24px;
  font-size: 9px;
  padding: 0 6px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.left-panel .places-panel .node-log-type-filter {
  padding-right: 18px;
  background-position: calc(100% - 8px) 9px, calc(100% - 4px) 9px, 0 0;
  background-size: 4px 4px, 4px 4px, 100% 100%;
}

.left-panel .places-panel .node-log-rank-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px 10px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 7px 10px 8px;
  border: none;
  border-top: 1px solid var(--ui-node-rank-footer-border);
  border-radius: 0;
  background: var(--ui-node-rank-footer-bg);
  cursor: pointer;
  color: inherit;
  overflow: hidden;
  text-align: left;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.left-panel .places-panel .node-log-rank-footer.nlr-flash-leader {
  animation: nlr-flash-leader 2.4s ease-in-out 1;
}

.left-panel .places-panel .node-log-rank-footer.nlr-flash-rank {
  animation: nlr-flash-rank 2s ease-in-out 1;
}

@keyframes nlr-flash-leader {
  0%,
  100% {
    background: var(--ui-node-rank-footer-bg);
    box-shadow: none;
  }
  12%,
  36%,
  60% {
    background: rgba(255, 196, 48, 0.22);
    box-shadow:
      0 0 28px rgba(255, 196, 48, 0.55),
      inset 0 0 0 2px rgba(255, 220, 90, 0.95);
  }
  24%,
  48% {
    background: rgba(255, 160, 32, 0.12);
    box-shadow: 0 0 12px rgba(255, 196, 48, 0.28);
  }
}

@keyframes nlr-flash-rank {
  0%,
  100% {
    background: var(--ui-node-rank-footer-bg);
    box-shadow: none;
  }
  20%,
  55% {
    background: rgba(58, 166, 255, 0.18);
    box-shadow:
      0 0 22px rgba(58, 166, 255, 0.45),
      inset 0 0 0 2px rgba(125, 252, 138, 0.75);
  }
}

.left-panel .places-panel .node-log-rank-footer:hover,
.left-panel .places-panel .node-log-rank-footer:focus-visible {
  background: var(--ui-node-rank-footer-hover-bg);
  box-shadow: inset 0 0 0 1px var(--ui-node-rank-footer-hover-ring);
}

.left-panel .places-panel .nlr-chunk {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1 1 0;
}

.left-panel .places-panel .nlr-chunk--leader {
  flex: 1.15 1 0;
}

.left-panel .places-panel .nlr-chunk--you {
  flex: 1 1 0;
  justify-content: flex-end;
  margin-left: auto;
  max-width: 48%;
}

.left-panel .places-panel .nlr-sep {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--ui-node-rank-sep-color);
  padding: 0 2px;
}

.left-panel .places-panel .nlr-av {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  border: 1px solid var(--ui-node-rank-av-border);
  background: var(--ui-node-rank-av-bg);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--ui-node-rank-av-color);
}

.left-panel .places-panel .nlr-av--gold {
  border-color: var(--ui-node-rank-av-gold-border);
  background: var(--ui-node-rank-av-gold-bg);
  color: var(--ui-node-rank-av-gold-color);
}

.left-panel .places-panel .nlr-av--you {
  border-color: var(--ui-node-rank-av-you-border);
  color: var(--ui-node-rank-av-you-color);
}

.left-panel .places-panel .nlr-line {
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ui-node-rank-line-color);
}

.left-panel .places-panel .node-log-rank-footer:hover .nlr-line,
.left-panel .places-panel .node-log-rank-footer:focus-visible .nlr-line {
  color: rgba(235, 255, 245, 1);
  text-shadow: 0 0 8px rgba(125, 252, 138, 0.35);
}

.left-panel .places-panel .node-log-rank-footer:hover .nlr-av,
.left-panel .places-panel .node-log-rank-footer:focus-visible .nlr-av {
  box-shadow: 0 0 10px rgba(125, 252, 138, 0.4);
}

#travelRankRow.travel-rank-row {
  cursor: pointer;
  border-radius: 4px;
  margin-left: 0;
  margin-right: 0;
  padding: 3px 4px !important;
  box-sizing: border-box;
  transition:
    color 0.18s ease,
    text-shadow 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

#travelRankRow.travel-rank-row:hover,
#travelRankRow.travel-rank-row:focus-visible {
  color: rgba(235, 250, 255, 1);
  background: rgba(125, 252, 138, 0.07);
  text-shadow:
    0 0 8px rgba(88, 182, 255, 0.55),
    0 0 14px rgba(58, 166, 255, 0.28);
  box-shadow:
    inset 3px 0 0 rgba(125, 252, 138, 0.82),
    inset -3px 0 0 rgba(125, 252, 138, 0.82);
}

#travelRankRow.travel-rank-row:hover #statFriendsRank,
#travelRankRow.travel-rank-row:focus-visible #statFriendsRank {
  color: rgba(125, 252, 138, 1);
  text-shadow: 0 0 10px rgba(125, 252, 138, 0.85);
}

.travel-achievement-strip-row .travel-achievement-strip {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  color: rgba(190, 230, 255, 0.92);
  text-shadow: 0 0 8px rgba(58, 166, 255, 0.35);
}

#travelAchievementRow.travel-achievement-row {
  cursor: pointer;
  border-radius: 4px;
  margin-left: 0;
  margin-right: 0;
  padding: 3px 4px !important;
  box-sizing: border-box;
  transition:
    color 0.18s ease,
    text-shadow 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
}

#travelAchievementRow.travel-achievement-row:hover,
#travelAchievementRow.travel-achievement-row:focus-visible {
  color: rgba(235, 250, 255, 1);
  background: rgba(125, 252, 138, 0.07);
  text-shadow:
    0 0 8px rgba(88, 182, 255, 0.55),
    0 0 14px rgba(58, 166, 255, 0.28);
  box-shadow:
    inset 3px 0 0 rgba(125, 252, 138, 0.82),
    inset -3px 0 0 rgba(125, 252, 138, 0.82);
}

#travelAchievementRow.travel-achievement-row:hover .travel-achievement-strip,
#travelAchievementRow.travel-achievement-row:focus-visible .travel-achievement-strip {
  color: rgba(125, 252, 138, 1);
  text-shadow: 0 0 10px rgba(125, 252, 138, 0.85);
}

.achievements-panel-scroll {
  padding: 10px 12px 14px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.achievements-panel-badges {
  flex-shrink: 0;
  padding: 0 12px 8px;
  border-bottom: 1px solid rgba(125, 252, 138, 0.14);
  background: linear-gradient(180deg, rgba(6, 14, 10, 0.35), rgba(4, 10, 8, 0.12));
}

#achievementsPanelFooter.achievements-rank-footer {
  flex-shrink: 0;
  margin-top: 0;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(125, 252, 138, 0.22);
  background: linear-gradient(180deg, rgba(4, 10, 8, 0.55), rgba(4, 10, 8, 0.98));
}

.achievements-arena-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.achievements-arena-heading-row .achievements-arena-heading {
  margin: 0;
}

.achievements-calc-btn {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(88, 182, 255, 0.45);
  background: rgba(8, 18, 28, 0.75);
  color: rgba(190, 230, 255, 0.95);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.achievements-calc-btn:hover {
  border-color: rgba(88, 182, 255, 0.75);
  color: #fff;
}

.achievements-rules-lead--flash {
  animation: achievements-rules-flash 1.2s ease;
}

@keyframes achievements-rules-flash {
  0%,
  100% {
    box-shadow: none;
  }
  35% {
    box-shadow: 0 0 0 2px rgba(88, 182, 255, 0.55);
  }
}

.achievement-help-subtitle {
  margin: 16px 0 6px;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(160, 220, 255, 0.92);
}

.achievement-help-dom-lead {
  margin: 0 0 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(180, 210, 200, 0.88);
}

/* Achievements: centered column like MY PAGE — not edge-to-edge */
.left-panel #achievementsOverlay.visible {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  box-sizing: border-box;
  background: var(--my-page-screen-bg, radial-gradient(circle at 0 0, #1e2b23 0, #050706 55%, #000 100%));
}

.left-panel #achievementsOverlay .app-data-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 5, 4, 0.42);
}

.left-panel #achievementsOverlay .achievements-panel {
  display: flex;
  flex-direction: column;
  position: relative;
  inset: auto;
  width: min(var(--my-page-max-w, 1200px), 100%);
  max-width: var(--my-page-max-w, 1200px);
  height: auto;
  max-height: min(92dvh, 900px);
  min-height: min(72dvh, 560px);
  margin: 0;
  flex: 0 1 auto;
  z-index: 1;
  border-radius: 0;
  overflow: hidden;
  background: var(--my-page-shell-bg, var(--ui-glass-bg));
  border: none;
  box-shadow: none;
}

@media (max-width: 720px) {
  .left-panel #achievementsOverlay.visible {
    padding: 0;
    align-items: stretch;
  }

  .left-panel #achievementsOverlay .achievements-panel {
    width: 100%;
    max-width: none;
    max-height: 100dvh;
    min-height: 0;
    height: 100%;
  }
}

.achievements-hero {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(88, 182, 255, 0.35);
  background: linear-gradient(135deg, rgba(12, 28, 42, 0.9), rgba(8, 16, 24, 0.95));
}

.achievements-hero-rank {
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: rgba(210, 240, 255, 0.96);
}

.achievements-hero-next {
  margin-top: 6px;
  font-size: 0.78rem;
  color: rgba(160, 210, 235, 0.88);
}

.achievements-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.achievements-stat-card {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(88, 182, 255, 0.22);
  background: rgba(6, 14, 20, 0.75);
}

.achievements-stat-card--wide {
  grid-column: 1 / -1;
}

.achievements-stat-label {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(150, 190, 220, 0.85);
}

.achievements-stat-value {
  display: block;
  margin-top: 4px;
  font-size: 1.05rem;
  color: rgba(220, 245, 255, 0.96);
}

.achievements-ladder {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.achievements-ladder-row {
  display: grid;
  grid-template-columns: 18px 72px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(88, 182, 255, 0.15);
  font-size: 0.76rem;
  color: rgba(170, 205, 230, 0.88);
}

.achievements-ladder-row--achieved {
  border-color: rgba(125, 252, 138, 0.35);
  color: rgba(200, 245, 215, 0.92);
}

.achievements-ladder-row--current {
  border-color: rgba(88, 182, 255, 0.55);
  box-shadow: 0 0 12px rgba(58, 166, 255, 0.2);
}

.achievements-ladder-mark {
  text-align: center;
}

.achievements-ladder-tier {
  letter-spacing: 0.04em;
}

.achievements-ladder-name {
  font-weight: 600;
}

.achievements-ladder-req {
  font-size: 0.68rem;
  opacity: 0.85;
  text-align: right;
}

.achievements-footnote {
  margin-top: 12px;
  font-size: 0.7rem;
  color: rgba(140, 175, 200, 0.8);
  line-height: 1.4;
}

.split-split-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 6px 0 8px;
  font-size: 0.78rem;
}

.split-mode-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.split-participant-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.split-participant-row {
  display: grid;
  grid-template-columns: 18px 1fr 72px;
  gap: 8px;
  align-items: center;
}

.split-participant-name {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.split-participant-weight {
  height: 32px;
  min-width: 0;
  padding: 4px 8px;
  font-size: 0.78rem;
}

.split-participant-hint {
  margin: 6px 0 0;
  font-size: 0.68rem;
  color: rgba(150, 190, 220, 0.8);
  line-height: 1.35;
}

.map-status-chip {
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 12;
  pointer-events: none;
  display: var(--ui-map-status-chip-display);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ui-map-status-chip-border);
  background: var(--ui-map-status-chip-bg);
  color: var(--ui-map-status-chip-color);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}

html.mnm-reduce-motion *,
html.mnm-reduce-motion *::before,
html.mnm-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

.right-drawer-promo {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: rgba(2, 6, 8, 0.72);
  backdrop-filter: blur(8px);
}

.right-drawer-promo[hidden] {
  display: none !important;
}

.right-about-drawer-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--ui-about-drawer-border);
  border-radius: 0;
  background: var(--ui-about-drawer-bg);
  box-shadow: inset 0 0 0 1px rgba(143, 211, 255, 0.08);
}

.right-about-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--ui-about-drawer-head-border);
  flex-shrink: 0;
}

.right-about-drawer-title {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-about-drawer-title-color);
}

.right-about-drawer-close.ui-close {
  position: static;
  flex-shrink: 0;
}

.right-about-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 22px;
  font-size: 10px;
  line-height: 1.55;
  color: var(--ui-about-drawer-body-color);
}

.right-about-drawer-body .mnm-story-brand {
  display: flex;
  justify-content: center;
  margin: 0 28px 12px 0;
}

.right-about-drawer-body .mnm-story-lead {
  font-size: 10.5px;
  color: var(--ui-about-drawer-lead-color);
}

.right-about-drawer-body .mnm-story-section-title {
  margin: 14px 0 6px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-about-drawer-section-color);
}

.right-about-drawer-body .mnm-story-nodus {
  padding: 10px 12px;
  margin: 12px 0;
  border-radius: 8px;
  border: 1px solid var(--ui-about-drawer-nodus-border);
  background: var(--ui-about-drawer-nodus-bg);
}

.right-about-drawer-body .mnm-story-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ui-about-drawer-kicker-color);
}

.right-about-drawer-body .mnm-story-subkicker {
  margin: 0 0 10px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ui-about-drawer-subkicker-color);
}

.right-about-drawer-body .mnm-story-list {
  margin: 6px 0 10px 16px;
  padding: 0;
}

.right-about-drawer-body .mnm-story-list li {
  margin-bottom: 4px;
}

.mnm-story-heritage {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--ui-about-drawer-heritage-border);
}

.mnm-story-heritage-lead {
  margin: 0 0 8px;
  font-size: 9px;
  color: var(--ui-about-drawer-heritage-lead-color);
}

.mnm-story-heritage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.mnm-story-heritage-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.mnm-story-heritage-btn img {
  width: 100%;
  height: auto;
  min-height: 88px;
  max-height: 168px;
  object-fit: contain;
  object-position: center top;
  background: rgba(4, 10, 8, 0.72);
  border-radius: 6px;
  border: 1px solid rgba(125, 252, 138, 0.22);
  opacity: 0.96;
  transition: opacity 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.mnm-story-heritage-figure {
  margin: 0;
}

.mnm-story-heritage-figure figcaption {
  margin-top: 6px;
  font-size: 8.5px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: rgba(125, 252, 138, 0.78);
}

.mnm-story-heritage-placeholder {
  display: none;
  width: 100%;
  min-height: 72px;
  padding: 14px 10px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px dashed rgba(125, 252, 138, 0.35);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(160, 190, 205, 0.75);
  background: rgba(6, 14, 20, 0.6);
}

.mnm-story-heritage-btn--missing img {
  display: none;
}

.mnm-story-heritage-btn--missing .mnm-story-heritage-placeholder {
  display: block;
}

.mnm-story-heritage-btn:hover img,
.mnm-story-heritage-btn:focus-visible img {
  opacity: 1;
  box-shadow: 0 0 12px rgba(125, 252, 138, 0.22);
}

.right-about-drawer-body .mnm-story-sign {
  margin-top: 12px;
  color: rgba(125, 252, 138, 0.82);
}

.right-about-drawer-body a[href^="mailto:"] {
  color: rgba(143, 211, 255, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mnm-story-support {
  margin-top: 16px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(125, 252, 138, 0.2);
  background: rgba(6, 14, 20, 0.85);
}

.mnm-story-support-title {
  margin: 0 0 8px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(125, 252, 138, 0.88);
}

.mnm-story-support-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}

.mnm-story-support-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(143, 211, 255, 0.28);
  background: rgba(8, 20, 28, 0.9);
  color: rgba(220, 235, 245, 0.95);
  font-size: 11px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.mnm-story-support-btn:hover,
.mnm-story-support-btn:focus-visible {
  border-color: rgba(125, 252, 138, 0.45);
  box-shadow: 0 0 10px rgba(125, 252, 138, 0.12);
}

.mnm-story-support-btn.is-active {
  border-color: rgba(125, 252, 138, 0.65);
  background: rgba(12, 32, 28, 0.95);
  box-shadow: 0 0 12px rgba(125, 252, 138, 0.18);
}

.mnm-story-support-btn--heart.is-active {
  border-color: rgba(255, 120, 140, 0.55);
}

.mnm-story-support-btn--tomato.is-active {
  border-color: rgba(255, 140, 60, 0.55);
}

.mnm-story-support-btn-emoji {
  font-size: 16px;
  line-height: 1;
}

.mnm-story-support-btn-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.mnm-story-support-bar-wrap {
  margin-bottom: 6px;
}

.mnm-story-support-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(143, 211, 255, 0.15);
}

.mnm-story-support-bar-heart {
  background: linear-gradient(90deg, rgba(255, 90, 120, 0.85), rgba(255, 130, 150, 0.7));
  min-width: 0;
  transition: width 0.35s ease;
}

.mnm-story-support-bar-tomato {
  background: linear-gradient(90deg, rgba(220, 80, 40, 0.75), rgba(255, 120, 50, 0.85));
  min-width: 0;
  transition: width 0.35s ease;
}

.mnm-story-support-meta {
  margin: 0;
  font-size: 8.5px;
  line-height: 1.45;
  color: rgba(160, 190, 205, 0.88);
}

.mnm-story-support-meta strong {
  color: rgba(220, 235, 245, 0.95);
  font-weight: 600;
}

.mnm-story-support-vote-hint {
  margin: 0 0 10px;
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
  color: rgba(160, 190, 205, 0.88);
}

.mnm-story-mode-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
  padding: 0 0 8px;
  background: linear-gradient(180deg, rgba(6, 12, 10, 0.98) 70%, rgba(6, 12, 10, 0));
}

.mnm-story-mode-btn {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 130, 165, 0.42);
  background: rgba(28, 10, 16, 0.88);
  color: rgba(255, 170, 195, 0.96);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.mnm-story-mode-btn:hover,
.mnm-story-mode-btn:focus-visible {
  border-color: rgba(255, 130, 165, 0.72);
  background: rgba(42, 14, 22, 0.95);
  box-shadow: 0 0 14px rgba(255, 100, 140, 0.18);
}

.mnm-story-brief-lead {
  font-size: 11px !important;
  line-height: 1.6 !important;
}

.mnm-story-read-full-wrap {
  margin: 14px 0 0;
  text-align: center;
}

.mnm-story-read-full-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(125, 252, 138, 0.45);
  background: rgba(8, 22, 18, 0.9);
  color: rgba(125, 252, 138, 0.95);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.mnm-story-read-full-btn:hover,
.mnm-story-read-full-btn:focus-visible {
  border-color: rgba(125, 252, 138, 0.75);
  box-shadow: 0 0 14px rgba(125, 252, 138, 0.2);
}

.mnm-story-ps {
  margin-top: 10px !important;
  font-size: 11px;
  font-style: italic;
  color: rgba(160, 190, 205, 0.9);
}

.mnm-story-body a[href^="mailto:"] {
  color: rgba(143, 211, 255, 0.95);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mnm-story-support-btn-emoji {
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.right-drawer-promo-ad {
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 8px;
  border: 1px dashed rgba(143, 211, 255, 0.25);
  font-size: 9px;
  color: rgba(160, 190, 205, 0.85);
}

.right-drawer-promo-ad-label {
  display: block;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: rgba(143, 211, 255, 0.7);
}

.right-drawer-promo-close {
  width: 100%;
}

.right-drawer-promo-close:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.right-drawer-promo-timer {
  margin: 6px 0 0;
  font-size: 9px;
  text-align: center;
  color: rgba(140, 175, 195, 0.8);
}

body.mnm-story-open {
  overflow: hidden;
}

.mnm-story-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mnm-story-overlay[hidden] {
  display: none !important;
}

.mnm-story-overlay.is-open {
  display: flex;
}

.mnm-story-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 10, 0.72);
  backdrop-filter: blur(8px);
}

.mnm-story-panel {
  position: relative;
  z-index: 1;
  width: min(560px, 96vw);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid var(--ui-mnm-story-panel-border);
  background: var(--ui-mnm-story-panel-bg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.mnm-story-header {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 44px 12px 14px;
  border-bottom: 1px solid var(--ui-mnm-story-header-border);
}

.mnm-story-header-brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.mnm-story-header-brand .mnm-logo-mark-slot,
.mnm-logo-mark--story-hero {
  width: 96px;
  height: 96px;
  display: block;
}

.mnm-story-header-brand .mnm-logo-svg,
.mnm-story-header-brand .mnm-logo-img {
  width: 96px;
  height: 96px;
}

.mnm-story-header-main {
  flex: 1 1 auto;
  min-width: 0;
}

.mnm-story-header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.mnm-story-header .mnm-story-mode-btn {
  max-width: min(220px, 42vw);
  white-space: normal;
  text-align: center;
  line-height: 1.25;
}

.mnm-story-title {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-mnm-story-title-color);
}

.mnm-story-close.ui-close {
  position: absolute;
  top: var(--ui-chrome-inset);
  right: var(--ui-chrome-inset);
}

.mnm-story-body {
  flex: 1;
  min-height: 0;
  padding: 16px 20px 22px;
  overflow-y: auto;
  scrollbar-gutter: stable;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ui-mnm-story-body-color);
}

.mnm-story-brand {
  display: flex;
  justify-content: center;
  margin: 0 36px 14px 0;
}

.mnm-story-brand .mnm-logo-mark-slot,
.mnm-story-brand .mnm-logo-mark--story {
  width: 60px;
  height: 60px;
  display: block;
}

.mnm-story-brand .mnm-logo-svg,
.mnm-story-brand .mnm-logo-img {
  width: 60px;
  height: 60px;
}

.mnm-story-body p {
  margin: 0 0 10px;
}

.mnm-story-lead {
  font-size: 13px;
  color: var(--ui-mnm-story-lead-color);
}

.mnm-story-figure {
  margin: 12px 0;
}

.mnm-story-figure img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--ui-mnm-story-figure-border);
}

.mnm-story-figure figcaption {
  margin-top: 6px;
  font-size: 10px;
  color: var(--ui-mnm-story-figcaption-color);
}

.mnm-story-sign {
  margin-top: 14px !important;
  color: var(--ui-mnm-story-sign-color);
}

.msg-layout-btn,
.tf-layout-btn {
  margin-left: 0;
}

.my-page-right #myPageSideFriend.my-page-side-active {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.my-page-right #myPageSideFriend .my-page-friend-panel {
  margin-bottom: var(--my-page-col-gap, 12px);
}

.my-page-right .message-dialogs {
  width: 100%;
}

.my-page-friend-panel {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: var(--my-page-rail-max);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  box-sizing: border-box;
  border: 1px solid rgba(125, 252, 138, 0.16);
  border-radius: 14px;
  background: rgba(8, 14, 12, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.my-page-friend-panel-inner {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.my-page-friend-panel .my-page-friend-avatar-wrap {
  width: 104px;
  height: 104px;
  min-width: 104px;
  min-height: 104px;
  border-radius: 50%;
  margin: 2px auto 0;
  border: 2px solid rgba(58, 166, 255, 0.45);
  box-shadow: 0 0 24px rgba(58, 166, 255, 0.18);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-page-friend-panel .my-page-friend-avatar-wrap .avatar-circle {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 50%;
}

.my-page-friend-panel .my-page-friend-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-olive);
  line-height: 1.2;
}

.my-page-friend-panel .my-page-friend-meta {
  font-size: 10px;
  line-height: 1.35;
  color: var(--text-dim);
  max-width: 24ch;
}

.my-page-friend-panel .my-page-stats-list {
  width: 100%;
  margin: 0;
  text-align: left;
  font-size: 10px;
}

.my-page-friend-panel .my-page-stats-list li {
  padding: 1px 0;
}

.my-page-friend-panel .mp-friend-quick {
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  gap: 6px;
  display: flex;
  flex-wrap: wrap;
}

.my-page-friend-panel .mp-friend-feed-note {
  max-width: none;
  text-align: left;
  font-size: 9px;
  line-height: 1.35;
  margin-top: 4px;
}

.my-page-friend-panel .mp-friend-safety {
  margin-top: 2px;
}

.my-page-friend-panel .mp-mini-btn {
  flex: 1 1 calc(50% - 4px);
  min-width: 72px;
  max-width: none;
  padding: 7px 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 8px;
  border: 1px solid var(--my-page-btn-border);
  background: var(--my-page-btn-bg);
  color: var(--my-page-btn-text);
}

.my-page-friend-panel .mp-mini-btn--chat {
  border-color: rgba(125, 252, 138, 0.32);
  background: rgba(125, 252, 138, 0.07);
  color: rgba(186, 255, 202, 0.96);
}

.my-page-friend-panel .mp-mini-btn--chat:hover {
  border-color: rgba(125, 252, 138, 0.48);
  background: rgba(125, 252, 138, 0.12);
  color: rgba(210, 255, 220, 1);
}

.my-page-friend-panel .mp-mini-btn:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}

.split-help-block,
.split-help-card {
  margin: 8px 4px 18px;
  padding: 12px 14px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(125, 252, 138, 0.35);
  background: rgba(8, 18, 12, 0.72);
  font-size: var(--font-xs);
  color: rgba(210, 235, 218, 0.95);
  box-shadow: inset 0 1px 0 rgba(125, 252, 138, 0.08);
}

#splitExpensesOverlay .split-help-card {
  margin-bottom: 20px;
}

#splitExpensesOverlay .split-help-card[open] {
  margin-bottom: 22px;
}

#splitExpensesOverlay .feature-map-section-title:first-of-type {
  margin-top: 4px !important;
}

.split-help-block .split-help-steps,
.split-help-card .split-help-steps,
.split-help-block ol,
.split-help-card ol {
  margin: 8px 0 0;
  padding-left: 18px;
  line-height: 1.45;
}

.split-help-block summary,
.split-help-card summary {
  cursor: pointer;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#splitSettlement.split-settlement--pulse {
  animation: split-settle-pulse 1.2s ease-out;
  box-shadow: 0 0 0 1px rgba(125, 252, 138, 0.35), 0 0 24px rgba(125, 252, 138, 0.12);
}

@keyframes split-settle-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(125, 252, 138, 0.45);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(125, 252, 138, 0.2), 0 0 8px rgba(125, 252, 138, 0.08);
  }
}

.split-receipt-thumb {
  display: block;
  margin-top: 8px;
  max-width: 120px;
  max-height: 72px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(143, 211, 255, 0.35);
  background: rgba(0, 0, 0, 0.4);
}

.split-group-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
}

.split-receipt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 6px 0 10px;
  font-size: 10px;
}

#splitReceiptHint,
#splitPlaceHint {
  flex: 1 1 100%;
  font-size: 9px;
  color: rgba(140, 175, 195, 0.85);
}

.tf-ask-nodus-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--tf-control-h);
  box-sizing: border-box;
  padding: 0 var(--tf-control-pad-x);
  border-radius: var(--tf-control-radius);
  border: 1px solid rgba(143, 211, 255, 0.55);
  background: linear-gradient(
    180deg,
    rgba(58, 166, 255, 0.38) 0%,
    rgba(22, 58, 98, 0.72) 100%
  );
  color: #eef8ff;
  font-size: var(--font-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 2px 10px rgba(58, 166, 255, 0.28);
}

.tf-ask-nodus-btn i {
  font-size: 12px;
  filter: drop-shadow(0 0 4px rgba(143, 211, 255, 0.45));
}

.tf-ask-nodus-btn:hover {
  border-color: rgba(125, 252, 138, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 0 16px rgba(58, 166, 255, 0.35);
  transform: translateY(-1px);
}

.nodus-avatar-strip {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.nodus-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(143, 211, 255, 0.35);
  background: linear-gradient(135deg, rgba(58, 166, 255, 0.35), rgba(125, 252, 138, 0.25));
  animation: nodus-avatar-pulse 2.4s ease-in-out infinite;
}

.nodus-avatar--lead {
  width: 36px;
  height: 36px;
  box-shadow: 0 0 12px rgba(58, 166, 255, 0.35);
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  animation: none;
}

.nodus-avatar--photo:nth-child(3) {
  animation-delay: 0.3s;
}
.nodus-avatar--photo:nth-child(4) {
  animation-delay: 0.6s;
}
.nodus-avatar--photo:nth-child(5) {
  animation-delay: 0.9s;
}
.nodus-avatar--photo:nth-child(6) {
  animation-delay: 1.2s;
}

@keyframes nodus-avatar-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

.celebration-overlay--splash .celebration-card--splash {
  padding: 28px 32px;
  transform: scale(1.04);
}

.celebration-overlay--splash .celebration-burst {
  opacity: 0.95;
  animation-duration: 2.8s;
}

.celebration-overlay--splash .celebration-title {
  font-size: clamp(22px, 4vw, 32px);
}

body *:not(.tb-root):not(.tb-root *):not(.logo-main):not(.intro-logo):not(.intro-title) {
  font-family: inherit;
}

.logo-main,
.intro-logo,
.intro-title,
.intro-screen .intro-title {
  font-family: var(--font-display);
}

body.intro-active .intro-screen .intro-sub,
body.intro-active .intro-screen .intro-slogan,
body.intro-active .intro-screen .intro-loading,
body.intro-active .intro-screen .intro-loading-text {
  font-family: var(--font-mono) !important;
}

.my-page-screen .my-page-section {
  border-color: transparent;
}

.left-panel .app-data-panel--split-shell .app-data-split-outer {
  overflow: hidden;
}

#splitExpensesOverlay .app-data-header {
  position: relative;
  padding-right: 44px;
}

.map-settings-panel {
  overflow: hidden;
}

.app-data-panel .app-data-body-scroll {
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-gutter: stable;
}

/* Force bare cross on all app ui-close (not Tomato) */
body:not(.tomato-mode) .ui-close,
body:not(.tomato-mode) button.ui-close,
body:not(.tomato-mode) .app-data-close.ui-close {
  width: var(--ui-chrome-size) !important;
  height: var(--ui-chrome-size) !important;
  min-width: var(--ui-chrome-size) !important;
  min-height: var(--ui-chrome-size) !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  transition:
    background-color 0.14s var(--ui-chrome-ease),
    box-shadow 0.14s var(--ui-chrome-ease),
    opacity 0.14s ease;
}

body:not(.tomato-mode) .ui-close::before,
body:not(.tomato-mode) .ui-close::after {
  width: 9px;
  height: 1.5px;
  transition: background-color 0.14s var(--ui-chrome-ease), box-shadow 0.14s var(--ui-chrome-ease);
}

/* Mac traffic light — solid disc, soft glow (no gradient artifacts) */
body:not(.tomato-mode) .ui-close:hover,
body:not(.tomato-mode) .ui-close:focus-visible {
  background-color: var(--ui-chrome-close-hover) !important;
  box-shadow: var(--ui-chrome-close-glow) !important;
  transform: none !important;
  opacity: 1 !important;
}

body:not(.tomato-mode) .ui-close:active {
  opacity: 0.82 !important;
}

body:not(.tomato-mode) .ui-close:hover::before,
body:not(.tomato-mode) .ui-close:hover::after,
body:not(.tomato-mode) .ui-close:focus-visible::before,
body:not(.tomato-mode) .ui-close:focus-visible::after {
  background: rgba(62, 0, 0, 0.9) !important;
  box-shadow: none !important;
  width: 9px;
}

/* Expand — same footprint as close, green on hover */
body:not(.tomato-mode) .photo-album-fs,
body:not(.tomato-mode) .ui-chrome-expand {
  border-radius: 50% !important;
  transition:
    background-color 0.14s var(--ui-chrome-ease),
    box-shadow 0.14s var(--ui-chrome-ease),
    color 0.14s var(--ui-chrome-ease),
    opacity 0.14s ease;
}

body:not(.tomato-mode) .photo-album-fs:hover,
body:not(.tomato-mode) .photo-album-fs:focus-visible,
body:not(.tomato-mode) .ui-chrome-expand:hover,
body:not(.tomato-mode) .ui-chrome-expand:focus-visible {
  background-color: var(--ui-chrome-expand-hover) !important;
  color: rgba(0, 48, 12, 0.95) !important;
  box-shadow: var(--ui-chrome-expand-glow) !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

body:not(.tomato-mode) .photo-album-fs:active,
body:not(.tomato-mode) .ui-chrome-expand:active {
  opacity: 0.82 !important;
}

body:not(.tomato-mode) .photo-album-fs:hover i,
body:not(.tomato-mode) .photo-album-fs:focus-visible i,
body:not(.tomato-mode) .ui-chrome-expand:hover i,
body:not(.tomato-mode) .ui-chrome-expand:focus-visible i {
  filter: none;
  text-shadow: none;
}

/* Five-dot hub — yellow on hover, no scale shift */
body:not(.tomato-mode) .ui-domino-trigger {
  border-radius: 50% !important;
  transition:
    background-color 0.14s var(--ui-chrome-ease),
    box-shadow 0.14s var(--ui-chrome-ease),
    color 0.14s var(--ui-chrome-ease),
    opacity 0.14s ease;
}

body:not(.tomato-mode) .ui-domino-trigger:hover,
body:not(.tomato-mode) .ui-domino-trigger:focus-visible {
  background-color: var(--ui-chrome-dots-hover) !important;
  color: rgba(48, 32, 0, 0.92) !important;
  box-shadow: var(--ui-chrome-dots-glow) !important;
  text-shadow: none !important;
  transform: none !important;
}

body:not(.tomato-mode) .ui-domino-trigger:active {
  opacity: 0.82 !important;
}

body:not(.tomato-mode) .ui-domino-trigger:hover .ui-domino-dots--five i,
body:not(.tomato-mode) .ui-domino-trigger:focus-visible .ui-domino-dots--five i {
  background: rgba(48, 32, 0, 0.88) !important;
  box-shadow: none !important;
}

body:not(.tomato-mode) .ui-domino-trigger.is-active {
  transform: none !important;
}

/* Chrome rows: expand + close aligned on one axis */
body:not(.tomato-mode) .photo-album-actions,
body:not(.tomato-mode) .ui-window-chrome {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--ui-chrome-gap) !important;
  height: var(--ui-chrome-size) !important;
}

/* Terminal: domino + close on one axis (expand slot reserved when hub visible) */
body:not(.tomato-mode) .terminal-window .terminal-hub-btn {
  top: var(--ui-chrome-inset) !important;
  right: calc(var(--ui-chrome-inset) + var(--ui-chrome-size) + var(--ui-chrome-gap)) !important;
  width: var(--ui-chrome-size) !important;
  height: var(--ui-chrome-size) !important;
  min-width: var(--ui-chrome-size) !important;
  min-height: var(--ui-chrome-size) !important;
}

body:not(.tomato-mode) .terminal-window .terminal-close.ui-close:not(.ui-close--corner) {
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
  width: var(--ui-chrome-size) !important;
  height: var(--ui-chrome-size) !important;
  min-width: var(--ui-chrome-size) !important;
  min-height: var(--ui-chrome-size) !important;
}

/* Corner anchor: chrome pins to panel shell (photo-album distance), not padded header */
body:not(.tomato-mode) .travel-routes-header,
body:not(.tomato-mode) .app-data-header,
body:not(.tomato-mode) .friend-rank-header,
body:not(.tomato-mode) .friends-online-header,
body:not(.tomato-mode) .legal-info-header,
body:not(.tomato-mode) .notifications-header,
body:not(.tomato-mode) .achievements-panel .app-data-header {
  position: static !important;
}

body:not(.tomato-mode) .friends-online-panel .friends-online-header-actions,
body:not(.tomato-mode) .notifications-panel .notifications-header-actions {
  position: absolute !important;
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
  left: auto !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--ui-chrome-gap) !important;
  height: var(--ui-chrome-size) !important;
  z-index: 6;
  margin: 0 !important;
}

body:not(.tomato-mode) .friends-online-panel .friends-online-close.ui-close,
body:not(.tomato-mode) .notifications-panel .notifications-close.ui-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
}

body:not(.tomato-mode) .photo-album-actions .ui-close,
body:not(.tomato-mode) .photo-album-actions .photo-album-fs {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
}

/* Terminal flatpickr — premium month/year chrome */
.flatpickr-months {
  position: relative !important;
  height: 34px !important;
  padding: 0 30px !important;
  margin-bottom: 2px !important;
}

.flatpickr-months .flatpickr-month {
  height: 34px !important;
  overflow: visible !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.78;
  transition: opacity 0.18s ease, background 0.18s ease, filter 0.18s ease;
}

.flatpickr-months .flatpickr-prev-month {
  left: 2px !important;
}

.flatpickr-months .flatpickr-next-month {
  right: 2px !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 11px !important;
  height: 11px !important;
  fill: rgba(186, 244, 205, 0.96) !important;
  display: block !important;
  margin: auto !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover,
.flatpickr-months .flatpickr-prev-month:focus-visible,
.flatpickr-months .flatpickr-next-month:focus-visible {
  opacity: 1 !important;
  background: rgba(125, 252, 138, 0.12) !important;
  border: none !important;
  box-shadow: 0 0 14px rgba(125, 252, 138, 0.24) !important;
  filter: drop-shadow(0 0 6px rgba(125, 252, 138, 0.35));
}

.flatpickr-current-month {
  position: relative !important;
  left: 0 !important;
  width: 100% !important;
  height: 34px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-size: 11px !important;
  padding: 0 2px !important;
  margin: 0 !important;
  max-width: 48% !important;
  flex: 0 1 auto !important;
}

.flatpickr-current-month .numInputWrapper {
  width: 4.2em !important;
  min-width: 4.2em !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.flatpickr-current-month input.cur-year {
  font-size: 11px !important;
  width: 100% !important;
  min-width: 4.2em !important;
  padding: 2px 20px 2px 4px !important;
  margin: 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  opacity: 0.9 !important;
  border: none !important;
  right: 1px !important;
  width: 14px !important;
  left: auto !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp {
  top: 0 !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown {
  bottom: 0 !important;
}

.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: rgba(186, 244, 205, 0.96) !important;
}

.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: rgba(186, 244, 205, 0.96) !important;
}

.flatpickr-current-month .numInputWrapper:hover span.arrowUp:after {
  border-bottom-color: rgba(232, 255, 239, 1) !important;
}

.flatpickr-current-month .numInputWrapper:hover span.arrowDown:after {
  border-top-color: rgba(232, 255, 239, 1) !important;
}

/* Photo album header: expand + close in one row (no absolute close overlap) */
.photo-album-header .photo-album-fs,
.photo-album-header .photo-album-close.ui-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  flex: 0 0 var(--ui-chrome-size);
}

.photo-album-header .photo-album-fs {
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Unified window chrome row (close + neighbors) */
.ui-window-chrome,
.photo-album-actions,
.country-hub-head-right,
.friends-online-header-actions,
.notifications-header-actions {
  gap: var(--ui-chrome-gap);
}

.ui-window-chrome--corner,
.photo-album-actions {
  top: var(--ui-chrome-inset);
  right: var(--ui-chrome-inset);
}

.ui-domino-trigger,
.photo-album-fs,
.ui-glow-icon.ui-chrome-peer {
  width: var(--ui-chrome-size) !important;
  height: var(--ui-chrome-size) !important;
  min-width: var(--ui-chrome-size) !important;
  min-height: var(--ui-chrome-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.my-page-center .my-page-card,
.my-page-center .tf-composer-card,
.my-page-center .dating-card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Corner close: symmetric inset from host top-right (top === right) */
body:not(.tomato-mode) .tf-thread-sticky-top > .tf-modal-close.ui-close,
body:not(.tomato-mode) #splitExpensesClose.ui-close {
  top: var(--ui-chrome-inset) !important;
  right: var(--ui-chrome-inset) !important;
  left: auto !important;
  bottom: auto !important;
}

/* === Remaining tasks wave (2026-05-29) === */

body:not(.tomato-mode) .tf-modal-window,
body:not(.tomato-mode) .photo-album-frame:not(:fullscreen),
body:not(.tomato-mode) .app-data-panel.card-base,
body:not(.tomato-mode) .terminal-window,
body:not(.tomato-mode) .achievement-help-window,
body:not(.tomato-mode) .visit-choice-window,
body:not(.tomato-mode) .legal-info-window,
body:not(.tomato-mode) .map-settings-panel,
body:not(.tomato-mode) .traveler-card-window {
  border-radius: var(--radius-window) !important;
  overflow: hidden;
  position: relative;
  border: var(--window-border-width) solid var(--window-border-color) !important;
  box-shadow: var(--window-shadow-depth) !important;
  outline: none !important;
}

/* Friend rank / achievements docked in left panel: single outer edge only */
body:not(.tomato-mode) .left-panel .friend-rank-panel,
body:not(.tomato-mode) .left-panel .achievements-panel {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* The map settings panel must stay absolutely anchored to the map (it sets
   top/left/z-index); the shared rule above wrongly forced position:relative,
   which dropped it into normal flow and got clipped by the map's overflow. */
body:not(.tomato-mode) .map-settings-panel {
  position: absolute !important;
}

.tf-modal-window,
#splitExpensesOverlay .app-data-panel,
.photo-album-frame,
.friend-rank-panel,
.app-data-panel.card-base {
  border-radius: var(--radius-window) !important;
}

.travel-forum-panel .tf-modal-window--thread,
.tf-modal-window.tf-modal-window--thread {
  border-radius: var(--radius-window) !important;
  background: var(--ui-tf-modal-thread-bg) !important;
  border: var(--window-border-width) solid var(--window-border-color) !important;
  box-shadow: var(--window-shadow-depth) !important;
  outline: none !important;
}

.tf-emoji-glyph,
.tf-react-emoji,
.nodus-emoji,
.emoji-premium {
  font-size: calc(1em * var(--emoji-premium-scale));
  line-height: 1.1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.my-page-screen .photo-album-nav {
  border: none;
  background: transparent;
  box-shadow: none;
  color: rgba(220, 244, 235, 0.85);
}

.my-page-screen .photo-album-nav::before {
  border-right-color: rgba(220, 244, 235, 0.95);
  border-bottom-color: rgba(220, 244, 235, 0.95);
}

.map-settings-item--hint {
  flex-direction: row;
  align-items: flex-start;
}

.map-settings-hint {
  font-size: 9px;
  line-height: 1.35;
  color: var(--ui-map-settings-hint-color);
  letter-spacing: 0.02em;
  text-transform: none;
  padding-left: 0;
}

.map-node-reviews-on .custom-marker:not(.custom-marker--rated) {
  opacity: 0.28;
  filter: grayscale(0.35);
}

.map-node-reviews-on .custom-marker--rated {
  box-shadow: 0 0 14px rgba(255, 217, 90, 0.45);
}

.mp-friends-list-label {
  margin: 0 0 8px;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(125, 252, 138, 0.75);
}

.mp-friends-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.mp-friends-search-row .mp-field-input {
  flex: 1;
  min-width: 0;
}

.mp-friend-discover-results {
  margin-bottom: 10px;
  border: 1px solid rgba(236, 202, 116, 0.2);
  border-radius: 12px;
  background: rgba(6, 12, 10, 0.55);
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.mp-friend-discover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
}

.mp-friend-discover-row:hover {
  background: rgba(125, 252, 138, 0.08);
}

.mp-friend-share-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 4px;
  cursor: pointer;
}

.my-page-friend-panel {
  max-width: 100%;
}

.friend-map-mode-overlay {
  position: fixed;
  inset: 0;
  z-index: 11050;
  pointer-events: none;
}

.friend-map-mode-overlay:not([hidden]) {
  pointer-events: auto;
}

.friend-map-mode-panel {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  padding: 10px 14px;
  border-radius: var(--radius-premium);
  border: 1px solid rgba(125, 252, 138, 0.45);
  background: rgba(6, 14, 11, 0.92);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  max-width: min(520px, 92vw);
}

.friend-map-mode-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(220, 244, 232, 0.95);
}

.split-help-block,
.split-help-card {
  margin: 12px 8px 18px;
  padding: 14px 16px 16px;
}

#splitExpensesOverlay .split-panel {
  margin-bottom: 22px !important;
  padding-bottom: 0 !important;
}

.auth-panel:not(.auth-panel--login) .profile-body {
  padding-bottom: 16px;
  scroll-padding-bottom: 16px;
}

.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  opacity: 1 !important;
  width: 16px !important;
}

.my-page-feed-demo-note {
  font-size: 10px;
  color: rgba(156, 198, 170, 0.85);
  margin: 0 0 8px;
  letter-spacing: 0.04em;
}

/* =============================================================================
   RIGHT PANEL v44 — fixed inter-card gaps, adaptive internal row stretch
   ============================================================================= */

#rightPanel.right-panel {
  --rp-section-gap: 10px;
  --rp-row-gap-min: 2px;
  --rp-row-gap: clamp(2px, 0.35vh, 8px);
}

#rightPanel > .profile-middle,
#rightPanel > .profile-middle > .profile-nav,
#rightPanel > .profile-middle > .profile-body,
#rightPanel .profile-body {
  gap: var(--rp-section-gap);
}

#rightPanel > .profile-middle {
  padding-bottom: 0;
}

#rightPanel .travel-stats-block {
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

#rightPanel .travel-stats-block .profile-list li.travel-rank-row::after,
#rightPanel .travel-stats-block .profile-list li.travel-achievement-row::after {
  opacity: 0;
}

#rightPanel .travel-stats-block .profile-list {
  margin-top: var(--space-3);
}

#rightPanel .travel-stats-block .profile-list li,
#rightPanel .travel-stats-block .profile-list li + li,
.travel-stats-block .profile-list li + li {
  margin-top: 0;
  margin-bottom: 0;
  padding: 2px 4px;
  min-height: 0;
  line-height: 1.12;
  flex: 0 1 auto;
  overflow: hidden;
}

/* SYSTEM — fixed card; outer gap = same --rp-section-gap as other blocks */
#rightPanel > .profile-nav-section--system {
  margin-top: 0;
  margin-bottom: 0;
  flex: 0 0 auto;
  padding-top: 5px;
  padding-bottom: 5px;
}

#rightPanel .profile-nav-section--system .profile-nav-title {
  margin-bottom: var(--space-2);
}

#rightPanel .profile-nav-section--system .profile-nav-list {
  flex: 0 0 auto;
  justify-content: flex-start;
  margin-top: 0;
  gap: var(--rp-row-gap-min, 2px);
}

#rightPanel .profile-nav-section--system .profile-nav-item {
  padding-top: 1px;
  padding-bottom: 1px;
  min-height: 18px;
  line-height: 1.12;
  margin-top: 0;
}

#rightPanel #quickActions .quick-action-btn {
  min-height: 0;
  line-height: 1.05;
  padding: 2px 3px;
}

#rightPanel .profile-nav-title,
#rightPanel .profile-caption {
  font-size: var(--font-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.1;
  margin-bottom: var(--rp-row-gap-min);
  flex-shrink: 0;
  color: var(--accent-olive);
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item {
  min-height: 18px;
  padding-top: 0;
  padding-bottom: 0;
  flex-shrink: 0;
}

#rightPanel .profile-list li {
  line-height: 1.12;
  padding: 2px 4px;
  flex: 0 1 auto;
  min-height: 0;
  overflow: hidden;
}

@media (max-height: 899px) {
  #rightPanel.right-panel {
    --rp-section-gap: 8px;
    --rp-row-gap-min: 2px;
    --rp-row-gap: 2px;
  }

  #rightPanel .profile-block {
    padding: var(--space-4) var(--space-6);
  }

  #rightPanel .profile-nav-item {
    min-height: 18px;
    line-height: 1.1;
  }

  #rightPanel .profile-nav-section--social .profile-nav-list,
  #rightPanel .profile-nav-section--travel .profile-nav-list,
  #rightPanel .travel-stats-block .profile-list {
    justify-content: flex-start;
    gap: var(--rp-row-gap);
  }

  #rightPanel #quickActions .quick-actions-grid {
    align-content: stretch;
    min-height: 0;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 4px;
  }

  #rightPanel #quickActions .quick-action-btn {
    min-height: 0;
    line-height: 1.05;
    padding: 2px 3px;
  }

  #rightPanel .travel-stats-block .profile-list li {
    padding: 1px 0 2px;
    min-height: 0;
    line-height: 1.12;
  }

  #rightPanel .profile-nav-section--system .profile-nav-item {
    min-height: 17px;
    line-height: 1.1;
  }
}

/* Left panel — premium card depth + NODE LOG rhythm */
.left-panel .info-card {
  border-color: var(--ui-left-info-card-border);
  box-shadow: var(--ui-left-info-card-shadow);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.left-panel .info-card:hover {
  border-color: var(--ui-left-info-card-hover-border);
  box-shadow: var(--ui-left-info-card-hover-shadow);
}

.left-panel .places-panel {
  border-color: var(--ui-left-places-panel-border);
  box-shadow: var(--ui-left-places-panel-shadow);
}

.left-panel .place-country,
.left-panel .place-city {
  transition:
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.left-panel .place-country:hover,
.left-panel .place-city:hover {
  box-shadow: inset 0 0 0 1px rgba(125, 252, 138, 0.12);
}

.left-panel .logo-block::after {
  box-shadow: 0 0 12px rgba(58, 166, 255, 0.14);
}

#rightPanel .profile-nav-section--social,
#rightPanel .profile-nav-section--travel {
  border-color: rgba(80, 140, 200, 0.18);
}

#rightPanel .profile-block#quickActions {
  border-color: rgba(90, 160, 130, 0.2);
}

/* Shared Expenses — final layout guard (no clip, no overlap) */
body:not(.tomato-mode) #splitExpensesOverlay .app-data-panel.split-panel {
  overflow: visible !important;
  max-height: none !important;
}

#splitExpensesOverlay #splitSettlement .split-summary-grid {
  margin-bottom: 10px;
}

#splitExpensesOverlay #splitSettlement .split-settle-title {
  margin-top: 14px !important;
  margin-bottom: 8px !important;
}

#splitExpensesOverlay #splitSettlement .friends-online-list {
  margin-bottom: 10px;
}

#splitExpensesOverlay #splitExpenseValidation {
  margin-top: 8px;
  margin-bottom: 2px;
  min-height: 14px;
}

@media (max-width: 760px) {
  #splitExpensesOverlay .split-panel-scroll-end {
    height: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

.mnm-forum-panel .tf-card--unread {
  box-shadow: inset 3px 0 0 rgba(255, 196, 64, 0.95);
}
.mnm-forum-panel .tf-card--unread .tf-card-title::after {
  content: " · new";
  color: #ffc440;
  font-size: 0.82em;
  font-weight: 600;
}
.mnm-forum-panel .tf-thread-comment--reply {
  margin-left: 18px;
  border-left: 2px solid rgba(255, 255, 255, 0.14);
  padding-left: 10px;
}
.mp-friend-activity-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.mp-friend-activity-item {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  display: grid;
  gap: 4px;
}
.mp-friend-activity-item:hover {
  background: rgba(255, 255, 255, 0.08);
}
.mp-friend-activity-badge {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0.75;
  text-transform: uppercase;
}
.mp-friend-activity-excerpt {
  font-size: 0.86rem;
  opacity: 0.85;
}
.mp-friend-activity-empty {
  font-size: 0.86rem;
  opacity: 0.7;
  padding: 6px 0;
}
.mp-dating-self-card {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 8px;
}
.mp-dating-self-title {
  margin: 0;
  font-size: 0.95rem;
}
.mp-dating-bio {
  resize: vertical;
  min-height: 72px;
}

.country-hub-forum-badge {
  margin-left: 8px;
  font-size: 0.72rem;
  vertical-align: middle;
}

.my-page-screen--stack .my-page-layout {
  grid-template-columns: 1fr !important;
}
.my-page-screen--stack .my-page-side {
  order: 2;
}
.my-page-screen--stack .my-page-main {
  order: 1;
}
.my-page-screen--stack .my-page-nav {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
}
.my-page-screen--stack .my-page-nav-item {
  flex: 1 1 auto;
  min-width: 42%;
}

/* =============================================================================
   RIGHT PANEL v49 — FINAL LOCK: all rows stay inside their cards
   ============================================================================= */

#rightPanel .profile-nav-section--social,
#rightPanel .profile-nav-section--travel,
#rightPanel #quickActions,
#rightPanel .travel-stats-block {
  box-sizing: border-box;
  max-height: 100%;
}

#rightPanel .profile-block,
#rightPanel .profile-nav-section.card-base {
  box-sizing: border-box;
  min-height: 0;
  overflow: hidden;
  padding: 6px 8px;
}

#rightPanel .profile-nav-title,
#rightPanel .profile-caption {
  flex: 0 0 auto;
  margin-bottom: 3px;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item {
  flex: 0 1 auto;
  min-height: 0;
  max-height: none;
  padding: 2px 4px;
  line-height: 1.1;
}

#rightPanel .travel-stats-block .profile-list li > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rightPanel .travel-stats-block .profile-list li > span:first-child {
  flex: 0 1 auto;
  max-width: 46%;
}

#rightPanel .travel-stats-block .profile-list li > span:last-child {
  flex: 1 1 auto;
  text-align: right;
}

#rightPanel .hover-float:hover,
#rightPanel .hover-elevate:hover {
  transform: none;
}

#rightPanel #quickActions .quick-actions-grid {
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

@media (max-height: 899px) {
  #rightPanel .profile-block,
  #rightPanel .profile-nav-section.card-base {
    padding: 5px 6px;
  }

  #rightPanel #quickActions .quick-actions-grid {
    gap: 4px;
  }
}

@media (max-height: 768px) {
  #rightPanel #quickActions .quick-actions-grid {
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 3px;
  }

  #rightPanel #quickActions .quick-action-btn {
    min-height: 0;
    padding: 2px 3px;
  }

  #rightPanel #quickActions .quick-action-btn i {
    font-size: 10px;
  }

  #rightPanel #quickActions .quick-action-btn span {
    font-size: 7px;
  }
}

/* =============================================================================
   RIGHT PANEL v50 — premium stretch: gaps grow, rows stay inside cards
   ============================================================================= */

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list,
#rightPanel .travel-stats-block .profile-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2px, 0.45vh, 10px);
  overflow: hidden;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item,
#rightPanel .travel-stats-block .profile-list li {
  flex: 0 1 auto;
  min-height: 0;
  max-height: clamp(18px, 2.1vh, 24px);
  padding: clamp(1px, 0.28vh, 4px) 4px;
  overflow: hidden;
  box-sizing: border-box;
  line-height: 1.08;
}

/* Six social rows need tighter rhythm than five travel rows */
#rightPanel .profile-nav-section--social .profile-nav-list {
  gap: clamp(1px, 0.32vh, 8px);
}

#rightPanel .quick-actions-grid {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(4px, 0.55vh, 9px);
  align-content: stretch;
  overflow: hidden;
  margin-top: 2px;
}

#rightPanel .quick-action-btn {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  height: auto;
  padding: clamp(3px, 0.4vh, 5px) 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 0.3vh, 4px);
  line-height: 1.08;
}

#rightPanel .quick-action-btn i {
  font-size: clamp(11px, 1.15vh, 13px);
  line-height: 1;
  flex-shrink: 0;
}

#rightPanel .quick-action-btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(7.5px, 0.95vh, 9px);
  line-height: 1.08;
  letter-spacing: 0.02em;
}

@media (max-height: 899px) {
  #rightPanel .profile-nav-section--social .profile-nav-list,
  #rightPanel .profile-nav-section--travel .profile-nav-list,
  #rightPanel .travel-stats-block .profile-list {
    gap: clamp(2px, 0.35vh, 7px);
  }

  #rightPanel .quick-actions-grid {
    gap: clamp(3px, 0.45vh, 7px);
  }
}

@media (max-height: 768px) {
  #rightPanel .profile-nav-section--social .profile-nav-item,
  #rightPanel .profile-nav-section--travel .profile-nav-item,
  #rightPanel .travel-stats-block .profile-list li {
    min-height: 0;
    max-height: 18px;
    padding: 1px 4px;
    line-height: 1.05;
  }

  #rightPanel .profile-nav-section--social .profile-nav-list {
    gap: 1px;
  }

  #rightPanel .quick-actions-grid {
    gap: 3px;
  }

  #rightPanel .quick-action-btn i {
    font-size: 11px;
  }

  #rightPanel .quick-action-btn span {
    font-size: 7.5px;
  }
}

/* =============================================================================
   RIGHT PANEL v51 — Quick Actions: readable labels inside buttons
   ============================================================================= */

#rightPanel #quickActions .quick-actions-grid {
  grid-template-rows: repeat(4, minmax(26px, 1fr));
  gap: clamp(4px, 0.5vh, 8px);
  align-content: stretch;
  overflow: hidden;
}

#rightPanel #quickActions .quick-action-btn {
  min-height: 0;
  max-height: 100%;
  padding: clamp(3px, 0.35vh, 5px) 3px;
  gap: clamp(2px, 0.25vh, 3px);
  line-height: 1.1;
  overflow: hidden;
}

#rightPanel #quickActions .quick-action-btn i {
  font-size: clamp(10px, 1vh, 12px);
  line-height: 1;
  flex-shrink: 0;
}

#rightPanel #quickActions .quick-action-btn span {
  min-width: 0;
  flex-shrink: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(8px, 0.9vh, 9.5px);
  line-height: 1.1;
  letter-spacing: 0.01em;
}

  @media (max-height: 768px) {
  #rightPanel #quickActions .quick-actions-grid {
    grid-template-rows: repeat(4, minmax(19px, 1fr));
    gap: 1px;
  }

  #rightPanel #quickActions .quick-action-btn {
    padding: 2px 3px;
    gap: 2px;
  }

  #rightPanel #quickActions .quick-action-btn i {
    font-size: 9px;
  }

  #rightPanel #quickActions .quick-action-btn span {
    font-size: 7.5px;
    line-height: 1.05;
  }
}

/* =============================================================================
   RIGHT PANEL v52 — Quick Actions: icon + label in ONE row (no vertical squash)
   ============================================================================= */

#rightPanel #quickActions .quick-actions-grid {
  grid-template-rows: repeat(4, minmax(24px, 1fr));
  gap: clamp(3px, 0.42vh, 7px);
  align-content: stretch;
}

#rightPanel #quickActions .quick-action-btn {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(3px, 0.35vh, 5px) clamp(4px, 0.5vw, 7px);
  gap: clamp(4px, 0.45vw, 6px);
  min-height: 22px;
  max-height: 100%;
  overflow: hidden;
  line-height: 1;
}

#rightPanel #quickActions .quick-action-btn i {
  flex: 0 0 auto;
  width: 12px;
  min-width: 12px;
  font-size: clamp(10px, 1vh, 12px);
  line-height: 1;
  text-align: center;
}

#rightPanel #quickActions .quick-action-btn span {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(8px, 0.88vh, 9.5px);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-align: left;
}

@media (max-height: 768px) {
  #rightPanel #quickActions .quick-actions-grid {
    grid-template-rows: repeat(4, minmax(19px, 1fr));
    gap: 1px;
  }

  #rightPanel #quickActions .quick-action-btn {
    min-height: 18px;
    padding: 2px 3px;
    gap: 2px;
  }

  #rightPanel #quickActions .quick-action-btn i {
    width: 10px;
    min-width: 10px;
    font-size: 9px;
  }

  #rightPanel #quickActions .quick-action-btn span {
    font-size: 7.5px;
  }
}

/* Settings split shell — balanced rail padding */
.left-panel .app-data-panel--split-shell .app-data-split-outer {
  padding-top: calc(var(--ui-chrome-corner-inset) + var(--ui-chrome-size) + 4px);
}

.left-panel .app-data-settings-rail {
  padding-top: 8px;
  padding-bottom: 16px;
}

.app-data-rail-title {
  margin: 0 0 4px;
}

.app-theme-actions {
  margin-bottom: 6px;
}

/* Forum card actions — align button row */
.tf-card-actions {
  align-items: center;
}

.tf-card-open-btn,
.tf-card-like-inline {
  align-self: center;
  margin-top: 0;
}

/* =============================================================================
   SETTINGS — rounded corner scroll clip (inner rail, outer shell)
   ============================================================================= */

body:not(.tomato-mode) ::-webkit-scrollbar-corner {
  background: transparent !important;
}

.left-panel .app-data-split-main {
  overflow: hidden;
}

.left-panel .app-data-settings-rail {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 !important;
  gap: 0;
}

.left-panel .app-data-settings-rail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 16px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar {
  width: var(--mnm-scroll-rail-width, 7px);
}

body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-button:single-button,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-button:vertical:start:decrement,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-button:vertical:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-track {
  margin-block: var(--mnm-scroll-rail-inset-rounded, 26px);
  background: transparent !important;
  border-radius: 99px;
}

body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-button:single-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* =============================================================================
   RIGHT PANEL v53 — unified Social/Travel rhythm + larger Quick Actions gaps
   ============================================================================= */

#rightPanel .profile-nav-section--social.card-base,
#rightPanel .profile-nav-section--travel.card-base {
  padding: 6px 8px;
}

#rightPanel .profile-nav-section--social .profile-nav-title,
#rightPanel .profile-nav-section--travel .profile-nav-title {
  margin: 0 0 clamp(4px, 0.45vh, 6px) !important;
  padding: 0;
  line-height: 1.15;
}

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list {
  gap: clamp(4px, 0.55vh, 10px) !important;
  margin-top: 0;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item {
  min-height: 0;
  max-height: clamp(19px, 2.2vh, 26px);
  padding: clamp(2px, 0.32vh, 5px) 4px !important;
  line-height: 1.1 !important;
}

#rightPanel #quickActions .quick-actions-grid {
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(5px, 0.75vh, 12px);
  align-content: space-between;
}

#rightPanel #quickActions .quick-action-btn {
  min-height: 0;
  max-height: 100%;
  padding: clamp(4px, 0.45vh, 7px) clamp(5px, 0.55vw, 9px);
  gap: clamp(5px, 0.5vw, 7px);
}

#rightPanel #quickActions .quick-action-btn i {
  width: clamp(12px, 1.15vh, 15px);
  min-width: clamp(12px, 1.15vh, 15px);
  font-size: clamp(11px, 1.15vh, 14px);
}

#rightPanel #quickActions .quick-action-btn span {
  font-size: clamp(8.5px, 1vh, 10.5px);
  line-height: 1.2;
}

@media (max-height: 768px) {
  #rightPanel .profile-nav-section--social .profile-nav-list,
  #rightPanel .profile-nav-section--travel .profile-nav-list {
    gap: clamp(3px, 0.45vh, 7px) !important;
  }

  #rightPanel #quickActions .quick-actions-grid {
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: clamp(3px, 0.5vh, 6px);
  }

  #rightPanel #quickActions .quick-action-btn {
    min-height: 0;
    padding: 3px 5px;
  }

  #rightPanel #quickActions .quick-action-btn i {
    width: 11px;
    min-width: 11px;
    font-size: 10px;
  }

  #rightPanel #quickActions .quick-action-btn span {
    font-size: 8px;
  }
}

/* =============================================================================
   RIGHT PANEL v54 — equal Social/Travel row gaps (no space-between stretch)
   GLOBAL scroll rail — vertical track inset at rounded corners, flush right edge
   ============================================================================= */

:root {
  --rp-nav-row-gap: clamp(4px, 0.5vh, 8px);
}

body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar,
.my-page-shell .my-page-side-scroll::-webkit-scrollbar,
.my-page-shell .my-page-nav-list.mnm-scroll-rail::-webkit-scrollbar,
.my-page-shell .my-page-view.mnm-scroll-rail::-webkit-scrollbar {
  background: transparent !important;
}

body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-track,
.my-page-shell .my-page-side-scroll.mnm-scroll-rail::-webkit-scrollbar-track,
.my-page-shell .my-page-nav-list.mnm-scroll-rail::-webkit-scrollbar-track,
.my-page-shell .my-page-view.mnm-scroll-rail::-webkit-scrollbar-track {
  margin-block: var(--mnm-scroll-rail-inset-rounded, 30px) !important;
  background: transparent !important;
}

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list {
  justify-content: flex-start !important;
  align-content: flex-start !important;
  gap: var(--rp-nav-row-gap) !important;
  row-gap: var(--rp-nav-row-gap) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#rightPanel .profile-nav-section--social .profile-nav-list {
  gap: var(--rp-nav-row-gap) !important;
  row-gap: var(--rp-nav-row-gap) !important;
}

#rightPanel .profile-nav-section--social .profile-nav-title,
#rightPanel .profile-nav-section--travel .profile-nav-title {
  margin-bottom: var(--rp-nav-row-gap) !important;
  flex: 0 0 auto !important;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}

@media (max-height: 768px) {
  :root {
    --rp-nav-row-gap: clamp(3px, 0.45vh, 6px);
  }

  #rightPanel .profile-nav-section--social .profile-nav-list,
  #rightPanel .profile-nav-section--travel .profile-nav-list {
    gap: var(--rp-nav-row-gap) !important;
    row-gap: var(--rp-nav-row-gap) !important;
  }
}

/* =============================================================================
   v55 — scroll track vertical inset + equal fixed row spacing (final overrides)
   ============================================================================= */

:root {
  --app-set-row-gap: 5px;
  --rp-nav-row-gap: 5px;
}

/* WebKit scroll rail — transparent channel, inset track, no steppers */
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar,
.my-page-shell .my-page-side-scroll::-webkit-scrollbar,
.my-page-shell .my-page-nav-list.mnm-scroll-rail::-webkit-scrollbar,
.my-page-shell .my-page-view.mnm-scroll-rail::-webkit-scrollbar {
  width: var(--mnm-scroll-rail-width, 7px);
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-track,
.my-page-shell .my-page-side-scroll.mnm-scroll-rail::-webkit-scrollbar-track,
.my-page-shell .my-page-nav-list.mnm-scroll-rail::-webkit-scrollbar-track,
.my-page-shell .my-page-view.mnm-scroll-rail::-webkit-scrollbar-track,
.my-page-shell *::-webkit-scrollbar-track {
  margin-block: var(--mnm-scroll-rail-inset-rounded) !important;
  background: transparent !important;
  border-radius: 99px;
}

body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-button,
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-button:single-button,
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-button:vertical:start:decrement,
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-button:vertical:end:increment,
.my-page-shell *::-webkit-scrollbar-button,
.my-page-shell *::-webkit-scrollbar-button:single-button,
.my-page-shell *::-webkit-scrollbar-button:vertical:start:decrement,
.my-page-shell *::-webkit-scrollbar-button:vertical:end:increment {
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.left-panel .app-data-detail-scroll-host {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden !important;
}

.left-panel .app-data-settings-rail {
  overflow: hidden !important;
  padding: 0 !important;
  gap: 0 !important;
}

.left-panel .app-data-settings-rail-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px 16px;
  scrollbar-gutter: stable;
}

/* Right panel — fixed row height + identical gap (no flex stretch) */
#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list {
  justify-content: flex-start !important;
  align-content: flex-start !important;
  gap: var(--rp-nav-row-gap) !important;
  row-gap: var(--rp-nav-row-gap) !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#rightPanel .profile-nav-section--social .profile-nav-title,
#rightPanel .profile-nav-section--travel .profile-nav-title {
  margin: 0 0 var(--rp-nav-row-gap) !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item {
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  overflow: hidden !important;
  line-height: 1.1 !important;
}

#rightPanel .profile-nav-item.active {
  padding-left: 4px !important;
  border-left: none !important;
}

@media (max-height: 960px) {
  :root {
    --rp-nav-row-gap: 3px;
  }

  #rightPanel .profile-nav-section--social .profile-nav-item,
  #rightPanel .profile-nav-section--travel .profile-nav-item {
    height: 15px !important;
    min-height: 15px !important;
    max-height: 15px !important;
    padding: 1px 3px !important;
  }

  #rightPanel .profile-nav-section--social .profile-nav-list,
  #rightPanel .profile-nav-section--travel .profile-nav-list {
    gap: 3px !important;
    row-gap: 3px !important;
  }
}

@media (max-height: 768px) {
  :root {
    --rp-nav-row-gap: 2px;
  }

  #rightPanel .profile-nav-section--social .profile-nav-item,
  #rightPanel .profile-nav-section--travel .profile-nav-item {
    height: 12px !important;
    min-height: 12px !important;
    max-height: 12px !important;
    padding: 1px 3px !important;
    font-size: 8px;
  }

  #rightPanel .profile-nav-section--social .profile-nav-list,
  #rightPanel .profile-nav-section--travel .profile-nav-list {
    gap: 2px !important;
    row-gap: 2px !important;
  }
}

/* =============================================================================
   v56 — scroll: inset track + NO arrows, full-size panels (no shrink)
           right panel: compact nav lists, Quick Actions eats leftover height
   ============================================================================= */

:root {
  --mnm-scroll-rail-inset-rounded: calc(var(--mnm-rounded-panel-radius, 14px) + 18px);
}

/* Kill stepper arrows everywhere in rounded scroll zones */
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-button,
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-button:single-button,
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-button:vertical:start:decrement,
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-button:vertical:end:increment,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-button,
.my-page-shell .my-page-side.mnm-rounded-scroll-host::-webkit-scrollbar-button,
.my-page-shell .my-page-view.mnm-scroll-rail::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Rounded scroll zones — inset track, transparent channel, zero steppers */
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-split-main::-webkit-scrollbar-track,
.my-page-shell .my-page-side.mnm-rounded-scroll-host::-webkit-scrollbar-track,
.my-page-shell .my-page-side-scroll.mnm-scroll-rail::-webkit-scrollbar-track,
.my-page-shell .my-page-nav-list.mnm-scroll-rail::-webkit-scrollbar-track,
.my-page-shell .my-page-view.mnm-scroll-rail::-webkit-scrollbar-track {
  margin-block: var(--mnm-scroll-rail-inset-rounded) !important;
  background: transparent !important;
  border-radius: 99px;
}

body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-track-piece,
.my-page-shell .my-page-side.mnm-rounded-scroll-host::-webkit-scrollbar-track-piece,
.my-page-shell .my-page-view.mnm-scroll-rail::-webkit-scrollbar-track-piece {
  margin-block: var(--mnm-scroll-rail-inset-rounded) !important;
  background: transparent !important;
}

/* Settings rail — full height, scroll on outer shell (not shrunk inner box) */
.left-panel .app-data-settings-rail.mnm-rounded-scroll-host {
  flex: 0 0 min(300px, 36vw);
  min-width: 210px;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px 10px 16px !important;
  gap: 6px !important;
  border-radius: var(--mnm-rounded-panel-radius, 14px);
  scrollbar-gutter: stable;
}

.left-panel .app-data-settings-rail-scroll {
  flex: none;
  min-height: auto;
  overflow: visible !important;
  padding: 0 !important;
}

/* Detail pane — full flex height, scroll inside host */
.left-panel .app-data-detail-scroll-host {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.left-panel .app-data-detail-body.mnm-scroll-rail {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* MY PAGE side panels — full size, scroll on outer rounded shell */
.my-page-right .my-page-side.my-page-side-active,
.my-page-shell .my-page-side.mnm-rounded-scroll-host {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px 10px !important;
  scrollbar-gutter: stable;
}

.my-page-shell .my-page-side-scroll {
  flex: none;
  min-height: auto;
  overflow: visible !important;
  padding: 0 !important;
}

.my-page-left .my-page-nav.mnm-rounded-scroll-host {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 !important;
}

.my-page-left .my-page-nav-list.mnm-scroll-rail {
  flex: none;
  min-height: auto;
  padding: 12px 10px;
}

.my-page-center .my-page-view.my-page-view-active.mnm-scroll-rail {
  scrollbar-gutter: stable;
}

/* Right panel — equal compact nav gaps; Quick Actions grows */
#rightPanel .profile-nav-section--social,
#rightPanel .profile-nav-section--travel {
  flex: 0 0 auto !important;
}

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
}

#rightPanel #quickActions {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

#rightPanel .travel-stats-block {
  flex: 0 0 auto !important;
}

#rightPanel .travel-stats-block .profile-list {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
}

#rightPanel #quickActions .quick-actions-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(6px, 1vh, 14px) !important;
  align-content: stretch !important;
  overflow: hidden;
}

#rightPanel #quickActions .quick-action-btn {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: clamp(5px, 0.65vh, 10px) clamp(6px, 0.7vw, 10px) !important;
  gap: clamp(4px, 0.5vh, 8px) !important;
}

#rightPanel #quickActions .quick-action-btn i {
  width: clamp(13px, 1.3vh, 17px) !important;
  min-width: clamp(13px, 1.3vh, 17px) !important;
  font-size: clamp(11px, 1.25vh, 15px) !important;
}

#rightPanel #quickActions .quick-action-btn span {
  font-size: clamp(8.5px, 1.05vh, 11px) !important;
  line-height: 1.2 !important;
}

@media (max-height: 768px) {
  #rightPanel #quickActions .quick-actions-grid {
    gap: clamp(4px, 0.55vh, 8px) !important;
  }

  #rightPanel #quickActions .quick-action-btn {
    padding: clamp(3px, 0.45vh, 6px) clamp(4px, 0.5vw, 7px) !important;
  }

  #rightPanel #quickActions .quick-action-btn span {
    font-size: clamp(7.5px, 0.95vh, 9px) !important;
  }
}

/* =============================================================================
   v57 — MY PAGE: full-height side rail + inner scroll + inset track only
           Right panel: one unified gap rhythm across all sections
   ============================================================================= */

:root {
  --rp-unified-gap: 5px;
  --mnm-scroll-rail-inset-rounded: calc(var(--mnm-rounded-panel-radius, 14px) + 20px);
}

/* MY PAGE right/left side — outer shell full column height, scroll inside */
.my-page-right .my-page-side.my-page-side-active,
.my-page-shell .my-page-side.mnm-rounded-scroll-host {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.my-page-shell .my-page-side-scroll.mnm-scroll-rail {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px 10px !important;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

.my-page-screen[data-mode="messages"] .my-page-shell .my-page-side-scroll.mnm-scroll-rail {
  padding: 10px 8px !important;
}

/* Settings — same pattern: outer clips corners, inner scrolls */
.left-panel .app-data-settings-rail.mnm-rounded-scroll-host {
  overflow: hidden !important;
  padding: 0 !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

.left-panel .app-data-settings-rail-scroll.mnm-scroll-rail {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px 10px 16px !important;
  scrollbar-gutter: stable;
}

/* Scroll track inset + no arrows (inner scrollports only) */
body:not(.tomato-mode) .my-page-shell .my-page-side-scroll.mnm-scroll-rail::-webkit-scrollbar,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll.mnm-scroll-rail::-webkit-scrollbar,
body:not(.tomato-mode) .left-panel .app-data-detail-body.mnm-scroll-rail::-webkit-scrollbar {
  width: var(--mnm-scroll-rail-width, 7px);
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body:not(.tomato-mode) .my-page-shell .my-page-side-scroll.mnm-scroll-rail::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll.mnm-scroll-rail::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-detail-body.mnm-scroll-rail::-webkit-scrollbar-button,
body:not(.tomato-mode) .my-page-shell .my-page-side-scroll.mnm-scroll-rail::-webkit-scrollbar-button:vertical:start:decrement,
body:not(.tomato-mode) .my-page-shell .my-page-side-scroll.mnm-scroll-rail::-webkit-scrollbar-button:vertical:end:increment,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll.mnm-scroll-rail::-webkit-scrollbar-button:vertical:start:decrement,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll.mnm-scroll-rail::-webkit-scrollbar-button:vertical:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body:not(.tomato-mode) .my-page-shell .my-page-side-scroll.mnm-scroll-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll.mnm-scroll-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-detail-body.mnm-scroll-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .my-page-shell .my-page-side-scroll.mnm-scroll-rail::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .left-panel .app-data-settings-rail-scroll.mnm-scroll-rail::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .left-panel .app-data-detail-body.mnm-scroll-rail::-webkit-scrollbar-track-piece {
  margin-block: var(--mnm-scroll-rail-inset-rounded) !important;
  background: transparent !important;
  border-radius: 99px;
}

/* Right panel — balanced equal gaps, sections share height evenly */
#rightPanel .profile-nav-section--social,
#rightPanel .profile-nav-section--travel,
#rightPanel #quickActions,
#rightPanel .travel-stats-block {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list,
#rightPanel .travel-stats-block .profile-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  gap: var(--rp-unified-gap) !important;
  row-gap: var(--rp-unified-gap) !important;
}

#rightPanel .profile-nav-section--social .profile-nav-title,
#rightPanel .profile-nav-section--travel .profile-nav-title,
#rightPanel #quickActions .profile-caption,
#rightPanel .travel-stats-block .profile-caption {
  margin: 0 0 var(--rp-unified-gap) !important;
  flex: 0 0 auto !important;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item,
#rightPanel .travel-stats-block .profile-list li {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#rightPanel #quickActions .quick-actions-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--rp-unified-gap) !important;
  row-gap: var(--rp-unified-gap) !important;
  align-content: stretch !important;
  overflow: hidden;
}

#rightPanel #quickActions .quick-action-btn {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 3px 5px !important;
  gap: 3px !important;
}

#rightPanel #quickActions .quick-action-btn i {
  width: clamp(12px, 1.15vh, 14px) !important;
  min-width: clamp(12px, 1.15vh, 14px) !important;
  font-size: clamp(10px, 1.1vh, 13px) !important;
}

#rightPanel #quickActions .quick-action-btn span {
  font-size: clamp(8px, 0.95vh, 10px) !important;
  line-height: 1.15 !important;
}

@media (max-height: 768px) {
  :root {
    --rp-unified-gap: 3px;
    --mnm-scroll-rail-inset-rounded: calc(var(--mnm-rounded-panel-radius, 14px) + 14px);
  }

  #rightPanel #quickActions .quick-action-btn {
    padding: 2px 4px !important;
  }

  #rightPanel #quickActions .quick-action-btn span {
    font-size: 7.5px !important;
  }

  #rightPanel .profile-nav-section--social .profile-nav-item,
  #rightPanel .profile-nav-section--travel .profile-nav-item,
  #rightPanel .travel-stats-block .profile-list li {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* =============================================================================
   v58 — REVERT layout + scroll CSS-only inset + balanced right panel
   ============================================================================= */

:root {
  --rp-unified-gap: 3px;
  --mnm-scroll-rail-inset-rounded: calc(var(--mnm-rounded-panel-radius, 14px) + 16px);
}

/* MY PAGE right column — restored pre-scroll-refactor layout */
.my-page-right .my-page-side.my-page-side-active,
.my-page-shell .my-page-side.mnm-rounded-scroll-host {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: var(--my-page-rail-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 12px 10px !important;
  margin-bottom: var(--my-page-col-gap, 12px) !important;
  scrollbar-gutter: auto !important;
  border: 1px solid var(--my-page-rail-border) !important;
  border-radius: 14px !important;
  background: var(--my-page-rail-bg) !important;
  box-shadow: var(--my-page-rail-inset) !important;
  box-sizing: border-box !important;
}

.my-page-screen[data-mode="messages"] .my-page-right .my-page-side.my-page-side-active {
  padding: 10px 8px !important;
}

/* Settings — restored direct scroll on rail (no inner wrapper) */
.left-panel .app-data-settings-rail {
  flex: 0 0 min(300px, 36vw) !important;
  min-width: 210px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 12px calc(10px + var(--ui-chrome-size)) 12px 10px !important;
  border-radius: 14px !important;
  border: 1px solid var(--ui-data-split-rail-border) !important;
  background: var(--ui-data-split-rail-bg) !important;
  box-shadow: var(--ui-data-split-rail-inset) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: 100% !important;
  scrollbar-gutter: auto !important;
}

.left-panel .app-data-settings-rail-scroll {
  display: contents !important;
}

.left-panel .app-data-detail-scroll-host {
  display: contents !important;
}

.left-panel .app-data-detail-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
  scrollbar-gutter: auto !important;
}

/* Scroll: vertical track inset only — no arrows, no gutter steal */
body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar {
  width: var(--mnm-scroll-rail-width, 7px);
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-button,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-button,
body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar-button:vertical:start:decrement,
body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar-button:vertical:end:increment,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-button:vertical:start:decrement,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-button:vertical:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  max-width: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-track-piece {
  margin-block: var(--mnm-scroll-rail-inset-rounded) !important;
  background: transparent !important;
  border-radius: 99px;
}

.my-page-right .my-page-side.my-page-side-active,
.left-panel .app-data-settings-rail,
.left-panel .app-data-detail-body {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

/* Right panel — equal 3px gaps, sections share height, larger QA icons */
#rightPanel .profile-nav-section--social,
#rightPanel .profile-nav-section--travel,
#rightPanel #quickActions,
#rightPanel .travel-stats-block {
  flex: 1 1 0 !important;
  min-height: 0 !important;
}

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list,
#rightPanel .travel-stats-block .profile-list,
#rightPanel #quickActions .quick-actions-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  gap: var(--rp-unified-gap) !important;
  row-gap: var(--rp-unified-gap) !important;
}

#rightPanel .profile-nav-section--travel .profile-nav-list,
#rightPanel .profile-nav-section--social .profile-nav-list {
  gap: var(--rp-unified-gap) !important;
  row-gap: var(--rp-unified-gap) !important;
}

#rightPanel .profile-nav-section--social .profile-nav-title,
#rightPanel .profile-nav-section--travel .profile-nav-title,
#rightPanel #quickActions .profile-caption,
#rightPanel .travel-stats-block .profile-caption {
  margin: 0 0 var(--rp-unified-gap) !important;
  flex: 0 0 auto !important;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item,
#rightPanel .travel-stats-block .profile-list li {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  padding: 2px 4px !important;
  margin: 0 !important;
  overflow: hidden !important;
}

#rightPanel #quickActions .quick-actions-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  align-content: stretch !important;
  overflow: hidden;
}

#rightPanel #quickActions .quick-action-btn {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 3px 5px !important;
  gap: 3px !important;
}

#rightPanel #quickActions .quick-action-btn i {
  width: clamp(12px, 1.2vh, 15px) !important;
  min-width: clamp(12px, 1.2vh, 15px) !important;
  font-size: clamp(11px, 1.2vh, 14px) !important;
}

#rightPanel #quickActions .quick-action-btn span {
  font-size: clamp(8px, 0.95vh, 10px) !important;
  line-height: 1.15 !important;
}

#rightPanel .profile-nav-item.active {
  padding-left: 4px !important;
  border-left: none !important;
}

@media (max-height: 768px) {
  :root {
    --rp-unified-gap: 2px;
  }

  #rightPanel #quickActions .quick-action-btn {
    padding: 2px 4px !important;
  }

  #rightPanel #quickActions .quick-action-btn span {
    font-size: 7.5px !important;
  }
}

/* =============================================================================
   v59 — scroll: kill arrows + inset pill track; right panel: fixed row rhythm
   ============================================================================= */

:root {
  --mnm-scroll-rail-inset-rounded: calc(var(--mnm-rounded-panel-radius, 14px) + 22px);
  --rp-unified-gap: 3px;
  --rp-nav-row-h: 14px;
}

/* Zero steppers everywhere — no square arrow blocks on rounded corners */
body:not(.tomato-mode) *::-webkit-scrollbar-button,
body:not(.tomato-mode) *::-webkit-scrollbar-button:single-button,
body:not(.tomato-mode) *::-webkit-scrollbar-button:vertical:start:decrement,
body:not(.tomato-mode) *::-webkit-scrollbar-button:vertical:end:increment,
body:not(.tomato-mode) *::-webkit-scrollbar-button:vertical:decrement,
body:not(.tomato-mode) *::-webkit-scrollbar-button:vertical:increment,
body:not(.tomato-mode) *::-webkit-scrollbar-button:horizontal:start:decrement,
body:not(.tomato-mode) *::-webkit-scrollbar-button:horizontal:end:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Rounded panels — transparent channel, vertical inset, pill thumb only */
body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-shell .my-page-side::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-shell .my-page-view::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-shell .my-page-nav::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-shell .my-page-nav-list::-webkit-scrollbar,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar,
body:not(.tomato-mode) .left-panel .app-data-split-main::-webkit-scrollbar,
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar,
body:not(.tomato-mode) .mp-newchat-list::-webkit-scrollbar,
body:not(.tomato-mode) .privacy-settings-body::-webkit-scrollbar,
body:not(.tomato-mode) .auth-captcha-modal::-webkit-scrollbar,
body:not(.tomato-mode) .legal-info-body::-webkit-scrollbar,
body:not(.tomato-mode) .achievement-help-scroll::-webkit-scrollbar,
body:not(.tomato-mode) .bucket-list-content::-webkit-scrollbar,
body:not(.tomato-mode) .notifications-list::-webkit-scrollbar,
body:not(.tomato-mode) .map-settings-body::-webkit-scrollbar,
body:not(.tomato-mode) .map-users-body::-webkit-scrollbar,
body:not(.tomato-mode) .terminal-body::-webkit-scrollbar,
body:not(.tomato-mode) .tf-modal-window--newtopic::-webkit-scrollbar,
body:not(.tomato-mode) .tf-thread-comments::-webkit-scrollbar,
body:not(.tomato-mode) .friend-rank-list::-webkit-scrollbar,
body:not(.tomato-mode) .travel-routes-list::-webkit-scrollbar,
body:not(.tomato-mode) .achievements-panel-scroll::-webkit-scrollbar {
  width: var(--mnm-scroll-rail-width, 6px) !important;
  height: var(--mnm-scroll-rail-width, 6px) !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar-track,
body:not(.tomato-mode) .my-page-shell .my-page-side::-webkit-scrollbar-track,
body:not(.tomato-mode) .my-page-shell .my-page-view::-webkit-scrollbar-track,
body:not(.tomato-mode) .my-page-shell .my-page-nav::-webkit-scrollbar-track,
body:not(.tomato-mode) .my-page-shell .my-page-nav-list::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .left-panel .app-data-split-main::-webkit-scrollbar-track,
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-track,
body:not(.tomato-mode) .mp-newchat-list::-webkit-scrollbar-track,
body:not(.tomato-mode) .privacy-settings-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .auth-captcha-modal::-webkit-scrollbar-track,
body:not(.tomato-mode) .legal-info-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .achievement-help-scroll::-webkit-scrollbar-track,
body:not(.tomato-mode) .bucket-list-content::-webkit-scrollbar-track,
body:not(.tomato-mode) .notifications-list::-webkit-scrollbar-track,
body:not(.tomato-mode) .map-settings-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .map-users-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .terminal-body::-webkit-scrollbar-track,
body:not(.tomato-mode) .tf-modal-window--newtopic::-webkit-scrollbar-track,
body:not(.tomato-mode) .tf-thread-comments::-webkit-scrollbar-track,
body:not(.tomato-mode) .friend-rank-list::-webkit-scrollbar-track,
body:not(.tomato-mode) .travel-routes-list::-webkit-scrollbar-track,
body:not(.tomato-mode) .achievements-panel-scroll::-webkit-scrollbar-track,
body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .my-page-shell .my-page-side::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .my-page-shell .my-page-view::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-track-piece,
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-track-piece {
  margin-block: var(--mnm-scroll-rail-inset-rounded) !important;
  background: transparent !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
}

body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .my-page-shell .my-page-side::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .my-page-shell .my-page-view::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .my-page-shell .my-page-nav::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .mp-newchat-list::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .privacy-settings-body::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .map-settings-body::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .terminal-body::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .tf-thread-comments::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .friend-rank-list::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .travel-routes-list::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .achievements-panel-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  min-height: 28px;
  box-shadow: none !important;
}

body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar-corner,
body:not(.tomato-mode) .left-panel .app-data-settings-rail::-webkit-scrollbar-corner,
body:not(.tomato-mode) .left-panel .app-data-detail-body::-webkit-scrollbar-corner,
body:not(.tomato-mode) .mnm-scroll-rail::-webkit-scrollbar-corner {
  background: transparent !important;
}

.my-page-right .my-page-side.my-page-side-active,
.my-page-shell .my-page-side,
.my-page-shell .my-page-view,
.left-panel .app-data-settings-rail,
.left-panel .app-data-detail-body,
.mnm-scroll-rail {
  scrollbar-width: thin !important;
  scrollbar-color: var(--scroll-thumb) transparent !important;
}

/* Right panel — Social = Travel row rhythm; sections share height, QA grows most */
#rightPanel .profile-nav-section--social,
#rightPanel .profile-nav-section--travel,
#rightPanel .travel-stats-block {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#rightPanel #quickActions {
  flex: 1.35 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list,
#rightPanel .travel-stats-block .profile-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  gap: var(--rp-unified-gap) !important;
  row-gap: var(--rp-unified-gap) !important;
  overflow: hidden !important;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item {
  flex: 0 0 var(--rp-nav-row-h, 14px) !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: var(--rp-nav-row-h, 14px) !important;
  min-height: var(--rp-nav-row-h, 14px) !important;
  max-height: var(--rp-nav-row-h, 14px) !important;
  padding: 0 4px !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  align-items: center !important;
}

#rightPanel .travel-stats-block .profile-list li {
  flex: 1 1 0 !important;
  flex-grow: 1 !important;
  min-height: var(--rp-nav-row-h, 14px) !important;
  height: auto !important;
  padding: 0 4px !important;
  margin: 0 !important;
  overflow: hidden !important;
  align-items: center !important;
}

#rightPanel #quickActions .quick-actions-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--rp-unified-gap) !important;
  row-gap: var(--rp-unified-gap) !important;
  align-content: stretch !important;
}

#rightPanel #quickActions .quick-action-btn {
  height: 100% !important;
  min-height: 0 !important;
  padding: 5px 6px !important;
  gap: 4px !important;
}

#rightPanel #quickActions .quick-action-btn i {
  width: clamp(15px, 1.8vh, 22px) !important;
  min-width: clamp(15px, 1.8vh, 22px) !important;
  font-size: clamp(14px, 1.8vh, 20px) !important;
}

#rightPanel #quickActions .quick-action-btn span {
  font-size: clamp(8px, 1vh, 11px) !important;
  line-height: 1.15 !important;
}

@media (max-height: 768px) {
  :root {
    --rp-unified-gap: 2px;
    --rp-nav-row-h: 12px;
  }

  #rightPanel .profile-nav-section--social,
  #rightPanel .profile-nav-section--travel,
  #rightPanel .travel-stats-block {
    flex: 0 0 auto !important;
  }

  #rightPanel #quickActions {
    flex: 1 1 0 !important;
    min-height: 64px !important;
  }

  #rightPanel #quickActions .quick-action-btn i {
    width: clamp(13px, 1.5vh, 17px) !important;
    min-width: clamp(13px, 1.5vh, 17px) !important;
    font-size: clamp(12px, 1.5vh, 16px) !important;
  }
}

/* =============================================================================
   v60 — SYSTEM rhythm, no dead zones, card glow, custom overlay scrollbar
   ============================================================================= */

:root {
  --rp-nav-title-gap: var(--space-2);
  --rp-nav-row-gap: var(--rp-row-gap-min, 2px);
  --rp-nav-card-pad-block: 5px;
  --rp-nav-card-pad-inline: 8px;
}

/* Right panel — compact nav cards, QA absorbs leftover height */
#rightPanel > .profile-middle {
  gap: var(--rp-section-gap) !important;
}

#rightPanel .profile-nav-section--social,
#rightPanel .profile-nav-section--travel,
#rightPanel .travel-stats-block,
#rightPanel > .profile-nav-section--system {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  padding: var(--rp-nav-card-pad-block) var(--rp-nav-card-pad-inline) !important;
  overflow: visible !important;
}

#rightPanel #quickActions {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  padding: var(--rp-nav-card-pad-block) var(--rp-nav-card-pad-inline) !important;
  overflow: hidden !important;
}

#rightPanel .profile-nav-section--social .profile-nav-title,
#rightPanel .profile-nav-section--travel .profile-nav-title,
#rightPanel > .profile-nav-section--system .profile-nav-title,
#rightPanel #quickActions .profile-caption,
#rightPanel .travel-stats-block .profile-caption {
  margin: 0 0 var(--rp-nav-title-gap) !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list,
#rightPanel > .profile-nav-section--system .profile-nav-list,
#rightPanel .travel-stats-block .profile-list {
  flex: 0 0 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  gap: var(--rp-nav-row-gap) !important;
  row-gap: var(--rp-nav-row-gap) !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item,
#rightPanel > .profile-nav-section--system .profile-nav-item {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  min-height: 18px !important;
  height: auto !important;
  max-height: none !important;
  padding: 1px 8px !important;
  margin: 0 !important;
  line-height: 1.12 !important;
}

#rightPanel .travel-stats-block .profile-list li {
  flex: 0 0 auto !important;
  min-height: 18px !important;
  height: auto !important;
  padding: 1px 8px !important;
  margin: 0 !important;
  line-height: 1.12 !important;
}

#rightPanel #quickActions .quick-actions-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--rp-nav-row-gap) !important;
  row-gap: var(--rp-nav-row-gap) !important;
  align-content: stretch !important;
  overflow: hidden !important;
}

#rightPanel #quickActions .quick-action-btn {
  height: 100% !important;
  min-height: 0 !important;
  padding: 5px 6px !important;
  gap: 4px !important;
}

#rightPanel #quickActions .quick-action-btn i {
  width: clamp(15px, 1.8vh, 22px) !important;
  min-width: clamp(15px, 1.8vh, 22px) !important;
  font-size: clamp(14px, 1.8vh, 20px) !important;
}

#rightPanel #quickActions .quick-action-btn span {
  font-size: clamp(8px, 1vh, 11px) !important;
  line-height: 1.15 !important;
}

/* Nav row hover — no jump; card containers get glow */
#rightPanel .profile-nav-item.hover-float:hover,
#rightPanel .profile-nav-item.hover-elevate:hover,
#rightPanel .quick-action-btn.hover-float:hover {
  transform: none !important;
}

/* Premium chrome tokens — airy chaotic node-links (not dense hatch) */
:root {
  --mnm-premium-card-bg: linear-gradient(
    165deg,
    rgba(10, 22, 16, 0.58) 0%,
    rgba(5, 12, 9, 0.72) 100%
  );
  --mnm-premium-card-border: rgba(125, 252, 138, 0.28);
  --mnm-premium-card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(125, 252, 138, 0.06),
    0 8px 20px rgba(0, 0, 0, 0.28);
  /* Sparse node-network tile (SVG): chaotic edges + dots */
  --mnm-premium-hatch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='260' viewBox='0 0 220 260'%3E%3Cg stroke='%237dfc8a' stroke-opacity='0.16' stroke-width='0.65' fill='none'%3E%3Cline x1='18' y1='28' x2='62' y2='52'/%3E%3Cline x1='62' y1='52' x2='118' y2='34'/%3E%3Cline x1='62' y1='52' x2='88' y2='98'/%3E%3Cline x1='118' y1='34' x2='168' y2='68'/%3E%3Cline x1='88' y1='98' x2='148' y2='118'/%3E%3Cline x1='148' y1='118' x2='188' y2='92'/%3E%3Cline x1='28' y1='142' x2='72' y2='168'/%3E%3Cline x1='72' y1='168' x2='88' y2='98'/%3E%3Cline x1='72' y1='168' x2='132' y2='198'/%3E%3Cline x1='132' y1='198' x2='178' y2='172'/%3E%3Cline x1='148' y1='118' x2='132' y2='198'/%3E%3Cline x1='42' y1='220' x2='96' y2='236'/%3E%3Cline x1='96' y1='236' x2='132' y2='198'/%3E%3Cline x1='168' y1='68' x2='198' y2='128'/%3E%3Cline x1='18' y1='28' x2='28' y2='142'/%3E%3C/g%3E%3Cg stroke='%238fd3ff' stroke-opacity='0.1' stroke-width='0.55' fill='none'%3E%3Cline x1='98' y1='18' x2='148' y2='48'/%3E%3Cline x1='198' y1='40' x2='168' y2='68'/%3E%3Cline x1='198' y1='128' x2='178' y2='172'/%3E%3Cline x1='42' y1='220' x2='18' y2='180'/%3E%3C/g%3E%3Cg fill='%237dfc8a' fill-opacity='0.38'%3E%3Ccircle cx='18' cy='28' r='1.5'/%3E%3Ccircle cx='62' cy='52' r='1.7'/%3E%3Ccircle cx='118' cy='34' r='1.3'/%3E%3Ccircle cx='88' cy='98' r='1.6'/%3E%3Ccircle cx='168' cy='68' r='1.4'/%3E%3Ccircle cx='148' cy='118' r='1.5'/%3E%3Ccircle cx='28' cy='142' r='1.3'/%3E%3Ccircle cx='72' cy='168' r='1.6'/%3E%3Ccircle cx='132' cy='198' r='1.5'/%3E%3Ccircle cx='178' cy='172' r='1.3'/%3E%3Ccircle cx='96' cy='236' r='1.4'/%3E%3Ccircle cx='188' cy='92' r='1.2'/%3E%3Ccircle cx='198' cy='128' r='1.3'/%3E%3C/g%3E%3Cg fill='%238fd3ff' fill-opacity='0.28'%3E%3Ccircle cx='98' cy='18' r='1.1'/%3E%3Ccircle cx='198' cy='40' r='1.1'/%3E%3Ccircle cx='42' cy='220' r='1.1'/%3E%3Ccircle cx='18' cy='180' r='1'/%3E%3C/g%3E%3C/svg%3E");
  --mnm-premium-hatch-size: 220px 260px;
}

#rightPanel .profile-nav-section.card-base,
#rightPanel .profile-block.card-base {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}

#rightPanel .profile-nav-section--social.card-base,
#rightPanel .profile-nav-section--travel.card-base,
#rightPanel .profile-nav-section--system.card-base,
#rightPanel .profile-block.card-base {
  border-color: var(--ui-surface-border) !important;
}

#rightPanel .profile-nav-section.card-base.hover-float:hover,
#rightPanel .profile-block.card-base.hover-float:hover {
  transform: translateY(-1px) !important;
}

#rightPanel .profile-nav-section.card-base.hover-float:hover,
#rightPanel .profile-block.card-base.hover-float:hover,
#rightPanel .profile-block#quickActions.card-base.hover-float:hover,
#rightPanel .travel-stats-block.card-base.hover-float:hover,
#rightPanel > .profile-nav-section--system.card-base.hover-float:hover {
  border-color: rgba(125, 252, 138, 0.58) !important;
  box-shadow:
    0 0 0 1px rgba(125, 252, 138, 0.12) inset,
    0 0 22px rgba(125, 252, 138, 0.18),
    0 10px 24px rgba(0, 0, 0, 0.2) !important;
}

@media (max-height: 768px) {
  :root {
    --rp-nav-row-gap: 2px;
    --rp-nav-card-pad-block: 3px;
    --rp-nav-title-gap: var(--space-1, 4px);
  }

  #rightPanel .profile-nav-section--social .profile-nav-item,
  #rightPanel .profile-nav-section--travel .profile-nav-item,
  #rightPanel > .profile-nav-section--system .profile-nav-item,
  #rightPanel .travel-stats-block .profile-list li {
    min-height: 16px !important;
    padding: 0 6px !important;
    line-height: 1.1 !important;
  }

  #rightPanel #quickActions {
    min-height: 0 !important;
  }

  #rightPanel #quickActions .quick-action-btn {
    padding: 1px 2px !important;
  }

  #rightPanel #quickActions .quick-action-btn i {
    width: clamp(10px, 1.25vh, 13px) !important;
    min-width: clamp(10px, 1.25vh, 13px) !important;
    font-size: clamp(9px, 1.25vh, 12px) !important;
  }

  #rightPanel #quickActions .quick-action-btn span {
    font-size: 6.5px !important;
    line-height: 1.05 !important;
  }
}

/* Custom overlay scrollbar — padding-lane, cap dots, hints (v67) */
:root {
  --mnm-cscroll-inset: calc(var(--mnm-rounded-panel-radius, 14px) + 12px);
  --mnm-cscroll-lane: 10px;
  --mnm-cscroll-track-w: 6px;
  --mnm-cscroll-dot-size: 4px;
  --mnm-cscroll-track-bg: rgba(4, 10, 16, 0.5);
  --mnm-cscroll-track-border: rgba(80, 110, 130, 0.28);
  --mnm-cscroll-dot-bg: rgba(125, 252, 138, 0.85);
  --mnm-cscroll-dot-glow: rgba(125, 252, 138, 0.35);
  --mnm-cscroll-thumb-bg: linear-gradient(
    180deg,
    rgba(125, 252, 138, 0.82) 0%,
    rgba(72, 190, 120, 0.76) 50%,
    rgba(58, 166, 255, 0.72) 100%
  );
  --mnm-cscroll-thumb-hover-bg: linear-gradient(
    180deg,
    rgba(145, 255, 158, 0.96) 0%,
    rgba(88, 210, 140, 0.9) 50%,
    rgba(78, 186, 255, 0.88) 100%
  );
  --mnm-cscroll-thumb-glow: rgba(125, 252, 138, 0.24);
}

body:not(.tomato-mode) .country-hub-panel-scroll.mnm-scroll-rail.mnm-cscroll-host::-webkit-scrollbar,
body:not(.tomato-mode) #devHubBody.mnm-scroll-rail.mnm-cscroll-host::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
body:not(.tomato-mode) .country-hub-panel-scroll.mnm-scroll-rail.mnm-cscroll-host,
body:not(.tomato-mode) #devHubBody.mnm-scroll-rail.mnm-cscroll-host {
  scrollbar-width: none !important;
}
body:not(.tomato-mode) .mnm-cscroll-host,
body:not(.tomato-mode) .my-page-shell .my-page-side.mnm-cscroll-host,
body:not(.tomato-mode) .my-page-right .my-page-side.mnm-cscroll-host,
body:not(.tomato-mode) .my-page-shell .my-page-view.mnm-cscroll-host,
body:not(.tomato-mode) .app-data-settings-rail.mnm-cscroll-host,
body:not(.tomato-mode) .app-data-detail-body.mnm-cscroll-host,
body:not(.tomato-mode) .mnm-scroll-rail.mnm-cscroll-host {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body:not(.tomato-mode) .mnm-cscroll-host::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-shell .my-page-side.mnm-cscroll-host::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active.mnm-cscroll-host::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-shell .my-page-view.mnm-cscroll-host::-webkit-scrollbar,
body:not(.tomato-mode) .app-data-settings-rail.mnm-cscroll-host::-webkit-scrollbar,
body:not(.tomato-mode) .app-data-detail-body.mnm-cscroll-host::-webkit-scrollbar,
body:not(.tomato-mode) .mnm-scroll-rail.mnm-cscroll-host::-webkit-scrollbar,
body:not(.tomato-mode) .mnm-cscroll-host::-webkit-scrollbar-button,
body:not(.tomato-mode) .my-page-shell .my-page-side.mnm-cscroll-host::-webkit-scrollbar-button,
body:not(.tomato-mode) .my-page-right .my-page-side.mnm-cscroll-host::-webkit-scrollbar-button,
body:not(.tomato-mode) .app-data-settings-rail.mnm-cscroll-host::-webkit-scrollbar-button,
body:not(.tomato-mode) .mnm-cscroll-host::-webkit-scrollbar-track,
body:not(.tomato-mode) .mnm-cscroll-host::-webkit-scrollbar-thumb {
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.mnm-cscroll-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--mnm-cscroll-lane, 10px);
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: visible;
  z-index: 10055;
  box-sizing: border-box;
}

.mnm-cscroll-overlay.mnm-cscroll-overlay--visible {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mnm-cscroll-shell {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Track in reserved padding lane — flush to panel right edge */
.mnm-cscroll-track {
  position: absolute;
  left: 50%;
  width: var(--mnm-cscroll-track-w, 6px);
  margin-left: calc(var(--mnm-cscroll-track-w, 6px) / -2);
  border-radius: 1px;
  background: var(--mnm-cscroll-track-bg);
  border: 1px solid var(--mnm-cscroll-track-border);
  box-sizing: border-box;
  overflow: visible;
  pointer-events: auto;
}

.mnm-cscroll-dot {
  position: absolute;
  left: 50%;
  width: var(--mnm-cscroll-dot-size, 4px);
  height: var(--mnm-cscroll-dot-size, 4px);
  margin-left: calc(var(--mnm-cscroll-dot-size, 4px) / -2);
  border-radius: 50%;
  background: var(--mnm-cscroll-dot-bg);
  box-shadow: 0 0 5px var(--mnm-cscroll-dot-glow);
  pointer-events: none;
  z-index: 2;
}

.mnm-cscroll-dot--top {
  top: 0;
  transform: translateY(-50%);
}

.mnm-cscroll-dot--bottom {
  bottom: 0;
  transform: translateY(50%);
}

.mnm-cscroll-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  min-height: 18px;
  border-radius: 0;
  background: var(--mnm-cscroll-thumb-bg);
  opacity: 0.72;
  box-shadow: 0 0 4px var(--mnm-cscroll-thumb-glow);
  pointer-events: auto;
  cursor: grab;
  will-change: top, height;
  transition: opacity 0.12s ease;
}

.mnm-cscroll-thumb::before {
  content: "";
  position: absolute;
  inset: -5px -4px;
}

.mnm-cscroll-thumb:hover,
.mnm-cscroll-host.mnm-cscroll-active:hover .mnm-cscroll-thumb {
  background: var(--mnm-cscroll-thumb-hover-bg);
  opacity: 1;
}

body.mnm-cscroll-dragging .mnm-cscroll-thumb {
  cursor: grabbing;
  opacity: 1;
}

body.mnm-cscroll-dragging {
  user-select: none;
}

/* Soft double-arrow hints — hover show, scroll blink, idle hide */
.mnm-cscroll-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 1px 2px;
  border: none;
  background: transparent;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.22s ease;
  z-index: 4;
}

.mnm-cscroll-hint-chevron {
  display: block;
  width: 4px;
  height: 4px;
  border-top: 1.5px solid rgba(140, 220, 165, 0.42);
  border-right: 1.5px solid rgba(140, 220, 165, 0.42);
  transform: rotate(-45deg);
}

.mnm-cscroll-hint--bottom .mnm-cscroll-hint-chevron {
  transform: rotate(135deg);
}

@keyframes mnm-cscroll-dot-pulse {
  0%, 100% {
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 5px var(--mnm-cscroll-dot-glow);
  }
  45% {
    transform: translateY(-50%) scale(1.85);
    box-shadow: 0 0 11px var(--mnm-cscroll-dot-glow);
  }
}

@keyframes mnm-cscroll-dot-pulse-bottom {
  0%, 100% {
    transform: translateY(50%) scale(1);
    box-shadow: 0 0 5px var(--mnm-cscroll-dot-glow);
  }
  45% {
    transform: translateY(50%) scale(1.85);
    box-shadow: 0 0 11px var(--mnm-cscroll-dot-glow);
  }
}

@keyframes mnm-cscroll-hint-blink {
  0%, 100% { opacity: 0; }
  20%, 70% { opacity: 0.62; }
}

/* Portaled overlay — hover / pulse / hint rules */
.mnm-cscroll-overlay.mnm-cscroll-overlay--hovered.mnm-cscroll-overlay--visible:not(.mnm-cscroll-overlay--scrolling) .mnm-cscroll-hint {
  opacity: 0.46;
}

.mnm-cscroll-overlay.mnm-cscroll-overlay--hovered.mnm-cscroll-overlay--visible:not(.mnm-cscroll-overlay--scrolling) .mnm-cscroll-hint:hover {
  opacity: 0.72;
}

.mnm-cscroll-overlay.mnm-cscroll-overlay--scrolling.mnm-cscroll-overlay--visible .mnm-cscroll-hint {
  opacity: 0;
}

.mnm-cscroll-overlay.mnm-cscroll-overlay--pulse-up .mnm-cscroll-dot--top {
  animation: mnm-cscroll-dot-pulse 0.48s ease;
}

.mnm-cscroll-overlay.mnm-cscroll-overlay--pulse-down .mnm-cscroll-dot--bottom {
  animation: mnm-cscroll-dot-pulse-bottom 0.48s ease;
}

.mnm-cscroll-overlay.mnm-cscroll-overlay--pulse-up .mnm-cscroll-hint--top {
  animation: mnm-cscroll-hint-blink 0.52s ease;
}

.mnm-cscroll-overlay.mnm-cscroll-overlay--pulse-down .mnm-cscroll-hint--bottom {
  animation: mnm-cscroll-hint-blink 0.52s ease;
}

.mnm-cscroll-overlay.mnm-cscroll-overlay--hovered .mnm-cscroll-thumb {
  background: var(--mnm-cscroll-thumb-hover-bg);
  opacity: 1;
}

body.intro-active .mnm-cscroll-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Lane padding applied in JS (+10px to captured base) — no double !important padding */
body:not(.tomato-mode) .mnm-cscroll-host.mnm-cscroll-active {
  scrollbar-gutter: auto !important;
  box-sizing: border-box !important;
}

@media (prefers-reduced-motion: reduce) {
  .mnm-cscroll-overlay.mnm-cscroll-overlay--pulse-up .mnm-cscroll-dot--top,
  .mnm-cscroll-overlay.mnm-cscroll-overlay--pulse-down .mnm-cscroll-dot--bottom,
  .mnm-cscroll-overlay.mnm-cscroll-overlay--pulse-up .mnm-cscroll-hint--top,
  .mnm-cscroll-overlay.mnm-cscroll-overlay--pulse-down .mnm-cscroll-hint--bottom {
    animation: none !important;
  }

  .mnm-cscroll-hint {
    transition: none;
  }

  .mnm-cscroll-overlay.mnm-cscroll-overlay--visible {
    transition: none;
  }

  .mnm-cscroll-thumb {
    transition: none;
  }

  #rightPanel .profile-nav-section.card-base,
  #rightPanel .profile-block.card-base {
    transition: none !important;
  }
}

/* rp-v68 — portaled scrollbar lane + QUICK ACTIONS icon/text spacing */
#rightPanel #quickActions .quick-action-btn {
  gap: clamp(8px, 0.9vh, 12px) !important;
}

#rightPanel #quickActions .quick-action-btn i {
  margin-right: 2px !important;
}

/* =============================================================================
   v73 — unified scrollbar, Tomato forum hub accent, identity QR chips
   ============================================================================= */

.my-page-left .my-page-nav-list {
  overflow: visible;
  flex: none;
  min-height: auto;
}

.my-page-center .my-page-view.my-page-view-active {
  scrollbar-gutter: auto;
}

.my-page-screen[data-mode="messages"] .my-page-right .my-page-side.my-page-side-active {
  overflow-y: hidden !important;
}

body:not(.tomato-mode) .my-page-left .my-page-nav.mnm-cscroll-host::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-left .my-page-nav.mnm-rounded-scroll-host.mnm-cscroll-host::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.mnm-forum-panel .tf-card--tomato {
  border-color: rgba(255, 92, 72, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 120, 90, 0.12),
    0 8px 24px rgba(180, 40, 20, 0.12);
}

.mnm-forum-panel .tf-card--tomato .tf-pill {
  color: #ff8a6a;
  border-color: rgba(255, 120, 90, 0.45);
}

.mnm-forum-panel .tf-tab[data-tf-tab="tomato"].active {
  color: #ff8a6a;
  border-bottom-color: #ff6b4a;
}

.my-page-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.mnm-qr-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(125, 252, 138, 0.35);
  background: rgba(8, 20, 14, 0.72);
  color: #8dffb0;
  font-size: 12px;
  cursor: pointer;
  flex: 0 0 auto;
}

.mnm-qr-chip:hover {
  border-color: rgba(125, 252, 138, 0.65);
  color: #b8ffd0;
  background: rgba(12, 32, 22, 0.9);
}

.tf-card-meta,
.tf-post-author,
.friend-row-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.mnm-qr-modal {
  position: fixed;
  inset: 0;
  z-index: 10120;
  display: grid;
  place-items: center;
  padding: 20px;
}

.mnm-qr-modal[hidden] {
  display: none !important;
}

.mnm-qr-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 6, 0.72);
  backdrop-filter: blur(6px);
}

.mnm-qr-modal-card {
  position: relative;
  z-index: 1;
  width: min(360px, 92vw);
  padding: 22px 20px 18px;
  border-radius: 16px;
  border: 1px solid rgba(125, 252, 138, 0.28);
  background: linear-gradient(165deg, rgba(10, 24, 18, 0.98), rgba(6, 14, 10, 0.98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  text-align: center;
}

.mnm-qr-modal-title {
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.mnm-qr-modal-handle {
  margin: 0 0 12px;
  color: #8dffb0;
  font-size: 13px;
}

.mnm-qr-modal-canvas {
  display: block;
  margin: 0 auto 12px;
  border-radius: 10px;
  background: #fff;
}

.mnm-qr-modal-url {
  margin: 0 0 14px;
  font-size: 10px;
  line-height: 1.35;
  word-break: break-all;
  opacity: 0.78;
}

.mnm-qr-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

body.mnm-qr-modal-open {
  overflow: hidden;
}

.tb-btn-forum {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   v74 — MY PAGE scroll fix, chrome substrate lines, friend panel fit
   ============================================================================= */

body:not(.tomato-mode) .my-page-shell .my-page-view::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-shell .my-page-view.mnm-scroll-rail::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-shell .my-page-side::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-left .my-page-nav::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-screen[data-mode="messages"] .message-dialogs-list::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-screen[data-mode="messages"] .message-chat-log::-webkit-scrollbar,
body:not(.tomato-mode) .my-page-shell .my-page-view::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .my-page-shell .my-page-side::-webkit-scrollbar-thumb,
body:not(.tomato-mode) .my-page-right .my-page-side.my-page-side-active::-webkit-scrollbar-thumb {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

.my-page-shell .my-page-view,
.my-page-shell .my-page-side.my-page-side-active,
.my-page-left .my-page-nav.mnm-rounded-scroll-host,
.my-page-screen[data-mode="messages"] .message-dialogs-list,
.my-page-screen[data-mode="messages"] .message-chat-log {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.my-page-center .my-page-view.my-page-view-active {
  scrollbar-gutter: auto !important;
}

.my-page-screen[data-mode="messages"] .my-page-right .my-page-side.my-page-side-active {
  overflow: hidden !important;
  padding: 10px 8px !important;
}

.my-page-screen[data-mode="friends"] .my-page-right #myPageSideFriend.my-page-side-active {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

.my-page-screen[data-mode="friends"] .my-page-right #myPageSideFriend .my-page-friend-panel {
  flex: 0 0 auto !important;
  min-height: auto !important;
  overflow: visible !important;
  margin-bottom: var(--my-page-col-gap, 12px) !important;
}

.my-page-screen[data-mode="friends"] .my-page-friend-panel-inner {
  overflow: visible !important;
  min-height: auto !important;
}

/* Delicate line substrate — map + side chrome (not MY PAGE) */
.mnm-chrome-substrate {
  position: relative;
  isolation: isolate;
}

.mnm-chrome-substrate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: var(--mnm-premium-hatch);
  background-size: 240px 280px;
  background-repeat: repeat;
  opacity: 0.75;
  mix-blend-mode: normal;
}

.left-panel.mnm-chrome-substrate::before,
#rightPanel.right-panel.mnm-chrome-substrate::before {
  opacity: 0.55;
  mix-blend-mode: normal;
}

.app-shell > .map-panel.mnm-chrome-substrate::before,
.left-panel.mnm-chrome-substrate::before,
#rightPanel.right-panel.mnm-chrome-substrate::before,
.left-panel .friends-online-panel::before {
  border-radius: inherit;
}

.left-panel .friends-online-panel {
  position: relative;
  isolation: isolate;
}

.left-panel .friends-online-panel > * {
  position: relative;
  z-index: 1;
}

.mp-friend-invite-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(236, 202, 116, 0.22);
  background: linear-gradient(145deg, rgba(12, 16, 14, 0.72), rgba(6, 10, 8, 0.88));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mp-friend-invite-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.mp-friends-search-row--premium {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 10px;
}

.mp-friends-search-field {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.mp-friends-search-icon {
  position: absolute;
  left: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

.mp-friends-search-input {
  width: 100%;
  padding-left: 30px !important;
}

.mp-friends-search-input:focus {
  border-color: rgba(236, 202, 116, 0.45) !important;
  box-shadow: 0 0 0 1px rgba(236, 202, 116, 0.18);
}

.mp-friend-discover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.mp-friend-discover-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mp-friend-discover-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 248, 232, 0.95);
  border: 1px solid rgba(236, 202, 116, 0.35);
  background: rgba(236, 202, 116, 0.12);
}

.mp-friend-invite-card-title {
  margin: 0 0 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
}

.mp-friend-invite-card-sub {
  margin: 0 0 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
}

.mp-invite-qr {
  display: block;
  margin-top: 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #fff;
  padding: 6px;
}

.mp-friend-invite-label {
  flex: 1 1 100%;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(141, 255, 176, 0.88);
}

.mp-friend-invite-code {
  font-family: var(--font-mono, var(--font-mono));
  font-size: 12px;
  color: #b8ffd0;
  word-break: break-all;
}

.mp-friend-invite-url {
  flex: 1 1 100%;
  font-size: 10px;
  opacity: 0.78;
  word-break: break-all;
}

.auth-field--referral {
  margin-top: 4px;
}

body:not(.tomato-mode) .dev-hub-window > .dev-hub-close.ui-close.ui-close--corner,
body:not(.tomato-mode) .owner-console-window > .dev-hub-close.ui-close.ui-close--corner {
  background: transparent !important;
  box-shadow: none !important;
}

body:not(.tomato-mode) .dev-hub-window > .dev-hub-close.ui-close.ui-close--corner:hover,
body:not(.tomato-mode) .dev-hub-window > .dev-hub-close.ui-close.ui-close--corner:focus-visible,
body:not(.tomato-mode) .dev-hub-window > .dev-hub-close.ui-close.ui-close--corner:active,
body:not(.tomato-mode) .owner-console-window > .dev-hub-close.ui-close.ui-close--corner:hover,
body:not(.tomato-mode) .owner-console-window > .dev-hub-close.ui-close.ui-close--corner:focus-visible,
body:not(.tomato-mode) .owner-console-window > .dev-hub-close.ui-close.ui-close--corner:active {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.owner-console-geo-video-form {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.owner-console-yt-links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.owner-console-geo-field {
  position: relative;
}

.owner-geo-input-hint {
  font-size: 10px;
  color: var(--text-dim);
  margin: 4px 0 0;
}

.owner-geo-suggest-tag {
  font-size: 10px;
  opacity: 0.72;
  margin-left: 6px;
}

.owner-console-geo-save {
  margin-top: 8px;
  width: 100%;
}

.owner-console-users-toolbar {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin: 12px 0;
}

.owner-console-table--users {
  font-size: 11px;
}

.owner-console-table--users th,
.owner-console-table--users td {
  white-space: nowrap;
}

.owner-users-grant-modal {
  position: fixed;
  inset: 0;
  z-index: 14000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.owner-users-grant-modal[hidden] {
  display: none !important;
}

.owner-users-grant-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.owner-users-grant-panel {
  position: relative;
  z-index: 1;
  width: min(360px, 92vw);
  padding: 16px;
  border-radius: 10px;
  background: rgba(12, 18, 26, 0.98);
  border: 1px solid rgba(94, 176, 255, 0.25);
  display: grid;
  gap: 10px;
}

.owner-users-grant-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .owner-console-yt-links {
    grid-template-columns: 1fr;
  }
  .owner-console-users-toolbar {
    grid-template-columns: 1fr;
  }
  .owner-console-geo-save {
    width: 100%;
  }
}

.owner-console-geo-video-form .dev-hub-input {
  width: 100%;
}

.owner-console-geo-video-list {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.owner-console-geo-video-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 6px;
  align-items: center;
}

@media (max-width: 720px) {
  .owner-console-geo-video-row {
    grid-template-columns: 1fr;
  }
}


/* =============================================================================
   v75 — Friends single scroll, owner light, badge showcase, auth QR row
   ============================================================================= */

#myPageFriendsList .friends-online-list {
  max-height: none !important;
  overflow: visible !important;
  flex: none !important;
  padding-right: 0 !important;
}

.auth-username-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.auth-username-row input { flex: 1 1 auto; min-width: 0; }
.auth-username-row .mnm-qr-chip { flex: 0 0 auto; align-self: center; }

html[data-app-lang="ru"] .achievement-help-lead {
  font-size: 0.92em;
  line-height: 1.45;
}
html[data-app-lang="ru"] .achievements-rank-cta-sub,
html[data-app-lang="ru"] .achievement-help-rank-footer .achievements-rank-cta-sub {
  font-size: 0.78em;
  line-height: 1.3;
}
html[data-app-lang="ru"] .achievement-help-list li {
  line-height: 1.4;
}

.map-badge-showcase {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1180;
  pointer-events: auto;
  cursor: pointer;
  perspective: 520px;
}
.map-badge-showcase[hidden] { display: none !important; }
.map-badge-showcase-stand {
  position: relative;
  padding: 0;
}
.map-badge-showcase-glass {
  display: none;
}
.map-badge-showcase-grid {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.map-badge-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-2px);
  transition: transform 0.2s ease;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: default;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.map-badge-showcase:hover .map-badge-slot { transform: translateY(-4px); }
.map-badge-slot-pedestal {
  position: relative;
  z-index: 1;
  width: 24px;
  height: 4px;
  margin-bottom: 9px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(120, 140, 160, 0.55), rgba(40, 55, 68, 0.75));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.map-badge-slot--earned .map-badge-slot-pedestal {
  background: linear-gradient(180deg, rgba(125, 252, 138, 0.95), rgba(42, 155, 82, 0.75));
  box-shadow: 0 2px 5px rgba(125, 252, 138, 0.42);
}
/* Map awards: only pedestal bar + icon — no oval/circle frames behind */
.map-badge-showcase .ach-badge,
.map-badge-showcase .ach-badge--intl,
.map-badge-showcase .ach-badge--unlocked,
.map-badge-showcase .ach-badge--silhouette {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  margin: 0;
  gap: 0;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  filter: none;
}
.map-badge-showcase .ach-badge-art,
.map-badge-showcase .ach-badge-art--shine {
  position: relative;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.map-badge-showcase .ach-badge-art--shine::after {
  display: none !important;
}
.map-badge-showcase .ach-badge-img {
  width: 34px;
  height: 34px;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: url(#achBadgeCutBlack);
  object-fit: contain;
}
.map-badge-slot--earned .ach-badge-img {
  filter: url(#achBadgeCutBlack);
}
.map-badge-showcase .ach-badge--silhouette .ach-badge-art {
  opacity: 1;
  filter: none;
  background: transparent !important;
}
.map-badge-showcase .ach-badge--silhouette .ach-badge-img {
  opacity: 0.34;
  filter: url(#achBadgeCutBlack) grayscale(1) brightness(1.2);
}
.map-badge-showcase .ach-badge-label,
.map-badge-showcase .ach-badge-lock {
  display: none !important;
}
.map-badge-slot--earned {
  cursor: pointer;
}
.map-badge-slot--earned:focus-visible {
  outline: none;
}
.map-badge-slot--earned:focus-visible .map-badge-slot-pedestal {
  box-shadow:
    0 2px 8px rgba(125, 252, 138, 0.65),
    0 0 0 1px rgba(255, 212, 74, 0.55);
}
.map-badge-reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  pointer-events: none;
}
.map-badge-reveal-overlay[hidden] { display: none !important; }
.map-badge-reveal-overlay.is-open,
.map-badge-reveal-overlay.is-closing {
  pointer-events: auto;
}
.map-badge-reveal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.28s ease;
}
.map-badge-reveal-overlay.is-open .map-badge-reveal-backdrop { opacity: 1; }
.map-badge-reveal-overlay.is-closing .map-badge-reveal-backdrop { opacity: 0; }
.map-badge-reveal-card {
  position: relative;
  z-index: 1;
  width: min(400px, 94vw);
  min-height: min(400px, 94vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 18px 16px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 35%, rgba(255, 220, 120, 0.14), transparent 65%),
    linear-gradient(165deg, rgba(18, 14, 8, 0.97), rgba(8, 8, 10, 0.98));
  border: 5px solid #e8b820;
  border-radius: 4px;
  box-shadow:
    0 0 0 2px rgba(255, 212, 74, 0.35),
    0 0 48px rgba(255, 196, 40, 0.45),
    0 24px 64px rgba(0, 0, 0, 0.65);
  transform: scale(0.55) translateY(24px);
  opacity: 0;
  transition: transform 0.38s cubic-bezier(0.22, 1.15, 0.32, 1), opacity 0.28s ease;
}
.map-badge-reveal-overlay.is-open .map-badge-reveal-card {
  transform: scale(1) translateY(0);
  opacity: 1;
  animation: map-badge-reveal-pulse 2.4s ease-in-out 0.35s infinite;
}
.map-badge-reveal-overlay.is-closing .map-badge-reveal-card {
  transform: scale(0.88) translateY(12px);
  opacity: 0;
  animation: none;
}
@keyframes map-badge-reveal-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255, 212, 74, 0.35),
      0 0 48px rgba(255, 196, 40, 0.45),
      0 24px 64px rgba(0, 0, 0, 0.65);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(255, 230, 120, 0.55),
      0 0 72px rgba(255, 210, 60, 0.65),
      0 24px 64px rgba(0, 0, 0, 0.65);
  }
}
.map-badge-reveal-card > .map-badge-reveal-close.ui-close {
  --ui-chrome-size: 14px;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  opacity: 0.72;
}
.map-badge-reveal-card > .map-badge-reveal-close.ui-close::before,
.map-badge-reveal-card > .map-badge-reveal-close.ui-close::after {
  width: 9px;
  height: 1.5px;
  background: rgba(255, 228, 150, 0.88);
  box-shadow: 0 0 6px rgba(255, 196, 40, 0.35);
}
.map-badge-reveal-card > .map-badge-reveal-close.ui-close:hover,
.map-badge-reveal-card > .map-badge-reveal-close.ui-close:focus-visible {
  opacity: 1;
}
.map-badge-reveal-card > .map-badge-reveal-close.ui-close:hover::before,
.map-badge-reveal-card > .map-badge-reveal-close.ui-close:hover::after,
.map-badge-reveal-card > .map-badge-reveal-close.ui-close:focus-visible::before,
.map-badge-reveal-card > .map-badge-reveal-close.ui-close:focus-visible::after {
  background: #fff0b8;
  box-shadow: 0 0 10px rgba(255, 210, 60, 0.65);
}
.map-badge-reveal-art {
  width: min(320px, 82vw);
  height: min(320px, 82vw);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}
.map-badge-reveal-art .ach-badge-art {
  width: 100%;
  height: 100%;
  background: transparent;
}
.map-badge-reveal-art .ach-badge-art--shine {
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.map-badge-reveal-art .ach-badge-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  image-rendering: auto;
  filter: url(#achBadgeCutBlack);
}
.map-badge-reveal-art .ach-badge-art--shine::after {
  animation-duration: 2.8s;
}
.map-badge-reveal-name {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffe9a0;
  text-shadow: 0 0 12px rgba(255, 196, 40, 0.45);
}
body.map-badge-reveal-active { overflow: hidden; }

.place-node-recommend {
  margin-top: 10px;
  padding: 10px 10px 8px;
  border-radius: 8px;
  border: 1px solid rgba(125, 252, 138, 0.18);
  background: linear-gradient(180deg, rgba(8, 18, 14, 0.72), rgba(4, 10, 8, 0.55));
}
.place-node-recommend-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.place-node-recommend-title {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(158, 214, 177, 0.88);
  font-weight: 700;
}
.node-recommend-pill {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.node-recommend-pill--yes {
  color: #9ef0c8;
  border-color: rgba(100, 220, 150, 0.45);
  background: rgba(100, 220, 150, 0.12);
}
.node-recommend-pill--no {
  color: #ffb4b4;
  border-color: rgba(255, 120, 120, 0.4);
  background: rgba(255, 120, 120, 0.1);
}
.node-recommend-pill--pending {
  color: rgba(180, 200, 190, 0.75);
  border-color: rgba(140, 160, 150, 0.25);
}
.place-node-recommend-bar {
  display: flex;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
}
.place-node-recommend-bar-yes {
  background: linear-gradient(90deg, rgba(58, 200, 120, 0.95), rgba(125, 252, 138, 0.85));
  transition: width 0.35s ease;
}
.place-node-recommend-bar-no {
  background: linear-gradient(90deg, rgba(180, 80, 80, 0.85), rgba(120, 50, 50, 0.75));
  transition: width 0.35s ease;
}
.place-node-recommend-legend {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 10px;
  color: rgba(190, 210, 200, 0.82);
}
.place-node-recommend-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.place-node-recommend-dot--yes { background: #7dfc8a; }
.place-node-recommend-dot--no { background: #ff8a8a; }
.place-node-recommend-meta {
  margin: 6px 0 0;
  font-size: 10px;
  color: rgba(150, 175, 160, 0.85);
}
.place-node-recommend--hub {
  margin-top: 0;
}
.country-hub-section--recommend .country-hub-section-title {
  margin-bottom: 8px;
}
.country-hub-recommend .place-node-recommend {
  margin-top: 0;
}
.app-delete-account-steps {
  margin: 10px 0 12px 18px;
  color: rgba(200, 220, 210, 0.9);
  font-size: 12px;
}
.app-delete-account-actions {
  flex-direction: column;
  align-items: stretch;
}
.app-delete-account-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(200, 220, 210, 0.9);
}
.app-delete-account-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: rgba(200, 220, 210, 0.9);
}
.app-delete-account-input {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(125, 252, 138, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #e8fff0;
}
.app-delete-account-danger {
  border-color: rgba(255, 120, 120, 0.55) !important;
  color: #ffb4b4 !important;
}
.app-delete-account-danger:disabled {
  opacity: 0.45;
}
.app-delete-account-note {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(150, 170, 160, 0.8);
}
.terminal-recommend-btn {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}
.ach-badge--silhouette .ach-badge-img {
  opacity: 0.22;
  filter: url(#achBadgeCutBlack) grayscale(1) brightness(1.15);
}
.ach-badge--silhouette .ach-badge-art:not(:has(.ach-badge-img)) {
  opacity: 0.22;
  filter: grayscale(1) brightness(1.15);
}
.ach-badge--silhouette { opacity: 0.85; }

/* Owner console — native colors, compact auth, side contours only */
.dev-hub-panel[hidden],
#devHubPanelDash[hidden],
#devHubLoginStep2[hidden] {
  display: none !important;
}

/* Owner console — full screen: black wings + dark gray center column */
.owner-console-screen {
  position: fixed;
  inset: 0;
  z-index: 4800;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  overflow: hidden;
  background: #000000 !important;
  color: var(--text-main);
  font-family: var(--font-mypage, inherit);
  pointer-events: none;
}
.owner-console-screen:not([hidden]) {
  display: flex !important;
  pointer-events: auto;
}
.owner-console-shell {
  --owner-console-max-w: 1200px;
  position: relative;
  width: min(var(--owner-console-max-w), 100%);
  max-width: var(--owner-console-max-w);
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: #1a1f26;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.owner-console-screen .owner-console-close {
  z-index: 12;
}
.owner-console-screen .dev-hub-header,
.owner-console-screen .owner-console-header {
  flex-shrink: 0;
  padding: 20px 24px 14px;
  border-bottom: 1px solid rgba(70, 85, 100, 0.35);
  text-align: center;
  background: #1a1f26;
}
.owner-console-screen .dev-hub-title {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: rgba(210, 228, 245, 0.96);
}
.owner-console-screen .dev-hub-sub {
  margin: 8px auto 0;
  max-width: 36em;
  color: rgba(130, 150, 168, 0.95);
}
.owner-console-screen .owner-console-product-switch {
  justify-content: center;
  margin-top: 12px;
  width: 100%;
}
.owner-console-screen .owner-console-body,
.owner-console-screen .dev-hub-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: none;
  padding: 20px 28px 28px;
  background: #1a1f26;
  border: none;
}
.owner-console-screen .owner-console-body--auth {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 32px;
}
.owner-console-screen .owner-console-auth-gate {
  width: min(400px, 100%);
  margin: 0 auto;
}
.owner-console-screen .owner-console-auth-tabs {
  margin-bottom: 18px;
}
.owner-console-screen #devHubPanelLogin:not([hidden]),
.owner-console-screen #devHubPanelSetup:not([hidden]) {
  align-items: center;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
}
.owner-console-screen .dev-hub-h3,
.owner-console-screen .dev-hub-creds-hint,
.owner-console-screen .owner-console-otp-hint {
  text-align: center;
  width: 100%;
}
.owner-console-screen .dev-hub-label {
  width: 100%;
  align-items: stretch;
}
.owner-console-screen .dev-hub-input {
  text-align: left;
}
.owner-console-screen .dev-hub-btn {
  align-self: center;
  min-width: 168px;
  margin-top: 6px;
}

.owner-console-auth-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
}

.owner-console-auth-actions .dev-hub-btn {
  width: 100%;
  min-width: 0;
  margin-top: 0;
  align-self: stretch;
}

.owner-console-screen .owner-console-dash {
  min-height: 0;
  padding: 0 !important;
}
.owner-console-screen .owner-console-main {
  max-width: 100%;
  min-width: 0;
  text-align: left;
}

/* legacy winframe — disabled when full screen */
.owner-console-overlay.owner-console--winframe .dev-hub-backdrop {
  display: none !important;
}

.owner-console-screen:not([hidden]) .owner-console-header {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px;
}
.owner-console-screen:not(.owner-console--session) .owner-console-product-switch {
  display: none !important;
}
.owner-console-overlay.owner-console--compact:not(.owner-console-screen) .owner-console-window {
  width: min(960px, calc(100% - 24px));
  max-height: min(92vh, 860px);
  border-top: none !important;
  border-bottom: none !important;
  border-left: 4px solid #3a424c;
  border-right: 4px solid #3a424c;
  box-shadow: none;
}
.owner-console-overlay.owner-console--compact:not(.owner-console--session) .owner-console-product-switch {
  display: none !important;
}
.owner-console-overlay.owner-console--compact .dev-hub-header {
  padding: 10px 16px 8px;
  border-bottom: none;
  text-align: center;
}
.owner-console-overlay.owner-console--compact .dev-hub-title {
  margin: 0 auto;
}
.owner-console-overlay.owner-console--compact .dev-hub-sub {
  font-size: 10px;
  margin: 4px 0 0;
  text-align: center;
}
.owner-console-overlay.owner-console--compact .owner-console-body {
  overflow-y: auto;
  max-height: calc(92vh - 56px);
}
.owner-console-overlay.owner-console--compact .owner-console-body--auth {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8px 16px 20px;
}
.owner-console-overlay.owner-console--winframe .owner-console-body--auth {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4px 0 12px;
  max-height: min(78vh, 720px);
}
.owner-console-auth-gate {
  width: min(340px, 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.owner-console-auth-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 14px;
}
.owner-console-auth-tab {
  padding: 7px 16px;
  border: 1px solid rgba(70, 85, 100, 0.65);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: rgba(160, 175, 190, 0.95);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.02em;
}
.owner-console-auth-tab.is-active {
  border-color: rgba(143, 211, 255, 0.55);
  color: rgba(220, 235, 250, 0.98);
  background: rgba(58, 166, 255, 0.1);
}
.owner-console-auth-error {
  width: 100%;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 140, 160, 0.42);
  background: rgba(48, 12, 20, 0.55);
  color: rgba(255, 196, 206, 0.96);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}
.owner-console-auth-error[hidden] {
  display: none !important;
}
.owner-console-overlay.owner-console--compact #devHubPanelLogin:not([hidden]),
.owner-console-overlay.owner-console--compact #devHubPanelSetup:not([hidden]) {
  width: 100%;
  margin: 0;
  padding: 0 0 8px;
  gap: 10px;
}
.owner-console-overlay.owner-console--compact .dev-hub-h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-align: center;
  width: 100%;
}
.owner-console-overlay.owner-console--compact .dev-hub-creds-hint,
.owner-console-overlay.owner-console--compact .owner-console-otp-hint {
  text-align: center;
  margin: 0 0 10px;
  line-height: 1.45;
}
.owner-console-overlay.owner-console--compact .dev-hub-label {
  gap: 6px;
  font-size: 10px;
}
.owner-console-overlay.owner-console--compact .dev-hub-input {
  padding: 6px 9px;
  font-size: 12px;
}
.owner-console-overlay.owner-console--compact .dev-hub-btn {
  padding: 8px 14px;
  font-size: 11px;
  margin-top: 4px;
}
.owner-console-overlay.owner-console--compact .owner-console-main {
  max-height: none;
  overflow: visible;
}
.owner-console-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; pointer-events: none; }
.owner-console-otp-hint { font-size: 11px; color: var(--text-dim); margin: 4px 0 6px; }
.owner-geo-suggest {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: rgba(8, 14, 20, 0.96);
  border: 1px solid rgba(80, 120, 140, 0.45);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.owner-geo-suggest-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-main);
}
.owner-geo-suggest-item:hover { background: rgba(58, 166, 255, 0.12); }
.owner-geo-suggest-item.is-active { background: rgba(58, 166, 255, 0.22); }
.owner-geo-slot-label { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.owner-console-geo-editor { position: relative; }

/* Chat shared location */
.chat-loc-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(125, 252, 138, 0.28);
  background: rgba(6, 18, 14, 0.72);
  color: rgba(210, 240, 220, 0.95);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  max-width: 100%;
}
.chat-loc-share-btn:hover {
  border-color: rgba(125, 252, 138, 0.5);
  background: rgba(12, 28, 22, 0.88);
}
.chat-loc-share-btn i { color: rgba(125, 252, 138, 0.9); }
.map-mini-msg-loc,
.chat-loc-share-btn { max-width: 220px; }
.shared-chat-loc-marker {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  color: #7dfc8a;
  filter: drop-shadow(0 0 8px rgba(125, 252, 138, 0.85));
  pointer-events: auto;
}
.shared-chat-loc-marker .shared-chat-loc-crosshair {
  display: block;
  width: 36px;
  height: 36px;
}
.shared-chat-loc-card {
  position: fixed;
  z-index: 12500;
  min-width: 168px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(125, 252, 138, 0.32);
  background: rgba(6, 12, 16, 0.94);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}
.shared-chat-loc-card[hidden] { display: none !important; }
.shared-chat-loc-card__title {
  margin: 0 0 6px;
  font-size: 11px;
  color: rgba(210, 235, 255, 0.92);
}
.shared-chat-loc-card__actions { display: flex; flex-direction: column; gap: 4px; }
.shared-chat-loc-card__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(80, 120, 140, 0.4);
  background: rgba(0, 0, 0, 0.25);
  color: rgba(200, 230, 255, 0.95);
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.shared-chat-loc-card__btn:hover {
  border-color: rgba(143, 211, 255, 0.45);
  background: rgba(58, 166, 255, 0.12);
}

/* Settings: slightly emphasize language row (size unchanged) */
button.app-set-row[data-app-set-live="lang"] {
  border-color: rgba(125, 252, 138, 0.42);
  background: linear-gradient(
    90deg,
    rgba(125, 252, 138, 0.1),
    rgba(8, 16, 12, 0.35) 55%
  );
  box-shadow: inset 0 0 0 1px rgba(125, 252, 138, 0.08);
}
button.app-set-row[data-app-set-live="lang"]:hover {
  border-color: rgba(125, 252, 138, 0.62);
  background: linear-gradient(
    90deg,
    rgba(125, 252, 138, 0.14),
    rgba(10, 20, 14, 0.4) 55%
  );
}

/* === App i18n: language picker + RU layout safety === */
.app-lang-picker { max-width: 100%; }
.app-lang-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.app-lang-btn {
  min-width: 0;
  min-height: 36px;
  padding: 8px 6px;
  border-radius: 6px;
  border: 1px solid rgba(125, 252, 138, 0.28);
  background: rgba(8, 18, 14, 0.55);
  color: rgba(200, 230, 210, 0.92);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-lang-btn.is-active {
  border-color: rgba(125, 252, 138, 0.85);
  background: rgba(20, 48, 32, 0.65);
  box-shadow: 0 0 14px rgba(58, 200, 120, 0.28);
  color: #e8fff0;
}
.app-lang-resolved {
  margin: 10px 0 0;
  font-size: 11px;
  color: rgba(150, 180, 165, 0.85);
}
html[data-app-lang="ru"] .app-set-row > span:first-child,
html[data-app-lang="ru"] .quick-action-btn > span,
html[data-app-lang="ru"] .profile-nav-item > span:not(.nav-badge),
html[data-app-lang="ru"] .btn-auth,
html[data-app-lang="ru"] .friend-rank-arena-tab,
html[data-app-lang="ru"] .terminal-field > label,
html[data-app-lang="ru"] .tb-tab {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-app-lang="ru"] .app-theme-seg {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
html[data-app-lang="ru"] .terminal-title,
html[data-app-lang="ru"] .profile-caption,
html[data-app-lang="ru"] .profile-nav-title,
html[data-app-lang="ru"] .info-label,
html[data-app-lang="ru"] .tb-sub {
  letter-spacing: 0.04em;
}
html[data-app-lang="ru"] .app-set-group-label,
html[data-app-lang="ru"] .app-data-rail-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}