/* Fonts loaded via in index.html — avoid duplicate @import fetch */
* {
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.45), 0 0 10px rgba(72, 158, 95, 0.22);
--ui-map-chat-av-ring: rgba(72, 158, 95, 0.55);
--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.4;
--ui-tf-scanlines-opacity: 0;
--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;
--font-ui-tracking: 0.06em;
--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: fixed design width (do not shrink — QA labels clip) */
--side-panel-width: 384px;
--side-panel-width-narrow: 312px;
/* Window chrome: close, expand, domino hub — one row, one size */
--ui-chrome-size: 20px;
--ui-chrome-inset: var(--ui-chrome-corner-inset);
--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;
width: 100%;
height: 100%;
min-height: 100dvh;
margin: 0;
overflow: hidden;
}
/* 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 {
opacity: 0;
visibility: visible;
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;
max-width: 420px;
width: 100%;
}
.intro-stack {
position: relative;
z-index: 12;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.intro-below {
width: min(420px, 92vw);
text-align: center;
}
.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;
min-height: 100dvh;
height: 100%;
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;
}
/* Phone / tablet: true full-bleed shell (safe-area aware, no letterbox gaps) */
@media (max-width: 1024px) {
html,
body {
height: 100%;
height: 100dvh;
max-height: 100dvh;
overflow: hidden;
overscroll-behavior: none;
}
.app-shell {
width: 100%;
height: 100%;
height: 100dvh;
max-height: 100dvh;
min-height: 100dvh;
padding:
env(safe-area-inset-top, 0px)
env(safe-area-inset-right, 0px)
env(safe-area-inset-bottom, 0px)
env(safe-area-inset-left, 0px);
box-sizing: border-box;
}
}
/* Phone landscape: fit full UI on screen without overflow (desktop/tablet drawer mode exempt) */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 520px) {
html:not(.mnm-mobile-swipe-panels) .app-shell {
grid-template-columns: minmax(168px, 22vw) minmax(0, 1fr) 0;
}
.left-panel {
padding: 6px 8px;
font-size: 11px;
}
.left-panel .logo-main {
font-size: clamp(16px, 3.5vw, 22px);
letter-spacing: 0.12em;
}
.left-panel .places-panel {
margin-top: 4px;
}
.left-panel .panel-header {
padding: 4px 6px;
}
.map-mini-chat {
width: min(340px, 42vw);
top: max(8px, env(safe-area-inset-top, 0px));
bottom: max(72px, calc(var(--map-floating-bottom, 32px) + 120px));
}
.mnm-glass-notice {
padding: 8px 10px;
align-items: flex-start;
justify-content: center;
}
.mnm-glass-notice__panel {
max-width: min(72vw, 400px);
padding: 12px 14px;
font-size: 11px;
}
.mnm-glass-notice__title {
font-size: 13px;
margin-bottom: 4px;
}
.mnm-glass-notice__line {
font-size: 11px;
line-height: 1.32;
}
.intro-inner {
max-width: min(72vw, 420px);
padding: 12px 14px;
}
}
/* Заголовок 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;
}
/* НЕОНОВАЯ РАМКА — always full-bleed (no centered letterbox) */
.neon-frame {
position: relative;
width: 100%;
max-width: 100%;
height: 100%;
min-height: 100dvh;
max-height: 100dvh;
padding: 0;
display: flex;
align-items: stretch;
justify-content: stretch;
overflow: hidden;
box-sizing: border-box;
}
.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;
}
/* ГЛАВНАЯ СЕТКА — width fills screen; map column absorbs extra width (sky). */
.app-shell {
position: relative;
z-index: 1;
width: 100%;
max-width: 100%;
height: 100%;
height: 100dvh;
max-height: 100dvh;
min-height: 0;
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;
box-sizing: border-box;
}
/* Short desktop monitors: compress chrome, keep height inside viewport */
html.mnm-viewport-compact .app-shell,
html.mnm-viewport-tight .app-shell {
height: 100dvh;
max-height: 100dvh;
}
html.mnm-viewport-compact #rightPanel.right-panel,
html.mnm-viewport-tight #rightPanel.right-panel {
--rp-section-gap: 6px;
padding-top: var(--space-8);
padding-bottom: max(var(--space-8), env(safe-area-inset-bottom, 0px));
}
html.mnm-viewport-tight #rightPanel.right-panel {
--rp-section-gap: 4px;
padding-top: 6px;
padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
}
html.mnm-viewport-compact .left-panel,
html.mnm-viewport-tight .left-panel {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
html.mnm-viewport-tight .left-panel {
padding-top: 6px;
padding-bottom: 6px;
}
html.mnm-viewport-compact .left-panel .logo-main,
html.mnm-viewport-tight .left-panel .logo-main {
font-size: clamp(18px, 2.4vw, 26px);
}
html.mnm-viewport-tight .left-panel .logo-main {
font-size: clamp(16px, 2.2vw, 22px);
}
/* Центральная колонка: карта / блокнот / форум — одна ячейка */
.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;
}
#userStatusHandle.profile-handle {
font-size: 11px;
font-weight: 500;
line-height: 1.2;
letter-spacing: 0.06em;
opacity: 0.82;
}
/* 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: visible;
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;
}
.crimea-territory-label {
position: absolute;
z-index: 5;
transform: translate(-50%, -50%);
pointer-events: none;
font-family: "JetBrains Mono", monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
color: rgba(210, 228, 240, 0.9);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.85), 0 1px 2px rgba(0, 0, 0, 0.9);
white-space: nowrap;
}
.map-canvas-host > #map.map-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: #000000;
}
.map-canvas-host {
background: #0a1410;
}
.map-canvas-host:not(.map-loaded) canvas.mapboxgl-canvas {
opacity: 0;
}
.map-canvas-host:not(.map-loaded) .mapboxgl-ctrl-top-left,
.map-canvas-host:not(.map-loaded) #toggle3d,
.map-canvas-host:not(.map-loaded) #mapSettingsBtn,
.map-canvas-host:not(.map-loaded) .map-toggle-btn {
visibility: hidden;
pointer-events: none;
}
.map-boot-loader {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
pointer-events: none;
background: radial-gradient(circle at 50% 42%, rgba(18, 36, 28, 0.55), rgba(0, 0, 0, 0.92) 68%);
}
.map-boot-loader-orbit {
position: relative;
width: 84px;
height: 84px;
}
.map-boot-loader-planet {
position: absolute;
inset: 18px;
border-radius: 50%;
background:
radial-gradient(circle at 32% 28%, rgba(125, 252, 138, 0.95), rgba(34, 120, 78, 0.85) 42%, rgba(8, 18, 14, 0.98) 78%);
box-shadow:
inset -8px -10px 18px rgba(0, 0, 0, 0.45),
0 0 24px rgba(125, 252, 138, 0.22);
}
.map-boot-loader-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid transparent;
border-top-color: rgba(125, 252, 138, 0.9);
border-right-color: rgba(58, 166, 255, 0.45);
animation: map-boot-orbit-spin 1.1s linear infinite;
}
.map-boot-loader-sat {
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin: -5px 0 0 36px;
border-radius: 50%;
background: #7dfc8a;
box-shadow: 0 0 10px rgba(125, 252, 138, 0.8);
animation: map-boot-sat-orbit 1.1s linear infinite;
transform-origin: -31px 0;
}
.map-boot-loader-label {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(180, 210, 190, 0.82);
}
@keyframes map-boot-orbit-spin {
to {
transform: rotate(360deg);
}
}
@keyframes map-boot-sat-orbit {
to {
transform: rotate(360deg);
}
}
.map-canvas-host.map-loaded .map-boot-loader {
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease-out, visibility 0.18s ease-out;
}
.map-canvas-host.map-loaded canvas.mapboxgl-canvas {
opacity: 1;
transition: opacity 0.14s ease-out;
}
.map-canvas {
position: relative;
width: 100%;
height: 100%;
}
.map-canvas-host.map-loaded .map-placeholder {
display: none;
}
#toggle3d,
#mapSettingsBtn {
visibility: hidden;
pointer-events: none;
}
.map-tilt-ctrl #toggle3d,
.map-tilt-ctrl #mapSettingsBtn {
visibility: visible;
pointer-events: auto;
}
/* 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;
}
/* Do NOT set will-change/transform on the WebGL canvas — under load Windows
compositor leaves border “ghost trails” (каракули) while panning/zooming. */
/* No transform transition while globe moves — prevents marker drag/lag */
.map-canvas-host.map-camera-interacting .mapboxgl-marker,
.map-canvas-host.map-camera-interacting .custom-marker,
.map-canvas-host.map-camera-interacting .map-custom-pin-marker {
transition: none !important;
}
/* 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;
}
.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) —
fixed dark glass — never inherit light theme panel vars (white-on-white) */
.map-hover-tip .mapboxgl-popup-content {
padding: 3px 8px 4px;
margin: 0;
background: rgba(8, 18, 14, 0.88);
color: rgba(230, 255, 240, 0.98);
border: 1px solid rgba(125, 252, 138, 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;
overflow: visible;
}
.profile-nav-item i {
width: 15px;
text-align: center;
font-size: var(--font-sm);
}
.nav-badge {
font-size: 8px;
padding: 0;
border-radius: 0;
border: none;
background: transparent;
color: rgba(200, 230, 210, 0.78);
text-transform: uppercase;
letter-spacing: 0.08em;
box-shadow: none;
}
.nav-badge-new {
color: var(--yellow);
text-shadow:
0 0 4px rgba(255, 217, 90, 0.85),
0 0 10px rgba(255, 217, 90, 0.45);
animation: nav-badge-new-pulse 1.6s ease-in-out infinite;
font-weight: 600;
padding: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
}
@keyframes nav-badge-new-pulse {
0%,
100% {
opacity: 1;
filter: brightness(1);
}
50% {
opacity: 0.88;
filter: brightness(1.12);
}
}
.nav-badge:has(.nav-badge-new) {
box-shadow: none;
overflow: visible;
}
.nav-badge.nav-badge--unread-live {
animation: none;
background: transparent;
color: #dfffea;
box-shadow: none;
}
.nav-badge.nav-badge--flash {
animation: mnm-nav-badge-flash 0.5s ease-in-out 5;
box-shadow: none;
}
.nav-badge.nav-badge--friend-request {
color: #ff8a8a;
}
.nav-badge-new--alert {
color: #ff6b6b !important;
text-shadow:
0 0 6px rgba(255, 90, 90, 0.85),
0 0 14px rgba(255, 60, 60, 0.45);
}
@keyframes mnm-nav-badge-pulse {
0%,
100% {
filter: brightness(1);
box-shadow:
inset 0 0 0 1px rgba(125, 252, 138, 0.3),
0 0 5px rgba(125, 252, 138, 0.1);
}
50% {
filter: brightness(1.1);
box-shadow:
inset 0 0 0 1px rgba(125, 252, 138, 0.52),
0 0 9px rgba(125, 252, 138, 0.2);
}
}
@keyframes mnm-nav-badge-flash {
0%,
100% {
filter: brightness(1);
opacity: 1;
}
50% {
filter: brightness(1.18);
opacity: 0.88;
}
}
/* legacy alias */
@keyframes mnm-msg-badge-live {
0%,
100% {
filter: brightness(1);
box-shadow:
inset 0 0 0 1px rgba(125, 252, 138, 0.3),
0 0 5px rgba(125, 252, 138, 0.1);
}
50% {
filter: brightness(1.1);
box-shadow:
inset 0 0 0 1px rgba(125, 252, 138, 0.52),
0 0 9px rgba(125, 252, 138, 0.2);
}
}
@keyframes mnm-msg-badge-flash {
0%,
100% {
filter: brightness(1);
opacity: 1;
}
50% {
filter: brightness(1.18);
opacity: 0.88;
}
}
.message-dialogs-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px 8px;
font-size: 11px;
letter-spacing: 0.04em;
color: rgba(180, 210, 220, 0.75);
}
.msg-dialogs-summary-new.is-hot {
color: var(--yellow, #ffd95a);
font-weight: 700;
}
.msg-dialogs-summary-new.is-flashing {
animation: mnm-msg-badge-flash 0.42s ease-in-out 7;
}
.message-dialog-item.has-unread {
border-color: rgba(255, 217, 90, 0.35);
}
.msg-dialog-unread-pill {
display: none !important;
}
.msg-dialog-counts-total {
opacity: 0.72;
}
.msg-dialog-counts-new {
font-weight: 700;
color: rgba(255, 220, 100, 0.88);
}
.msg-dialog-counts-new.is-hot {
color: #ffe27a;
text-shadow: 0 0 10px rgba(255, 200, 60, 0.45);
}
.msg-dialog-counts-sep {
opacity: 0.5;
}
.friend-row--request {
border-color: rgba(255, 200, 80, 0.35);
}
.friend-row--incoming {
border-color: rgba(90, 220, 140, 0.55);
box-shadow: 0 0 0 1px rgba(90, 220, 140, 0.2);
background: rgba(40, 90, 60, 0.18);
}
.friend-row--incoming.is-flash-accept {
animation: mnm-friend-accept-flash 1.1s ease;
}
@keyframes mnm-friend-accept-flash {
0%,
100% {
box-shadow: 0 0 0 1px rgba(90, 220, 140, 0.2);
}
40% {
box-shadow: 0 0 0 3px rgba(125, 252, 138, 0.65);
}
}
.mp-friend-requests-banner {
margin: 10px 0 12px;
padding: 12px 12px 10px;
border-radius: 10px;
border: 1px solid rgba(125, 252, 138, 0.45);
background: linear-gradient(165deg, rgba(40, 100, 65, 0.42), rgba(18, 36, 28, 0.55));
}
.mp-friend-requests-banner[hidden] {
display: none !important;
}
.mp-friend-requests-banner-title {
margin: 0 0 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #9dffb0;
}
.mp-friend-requests-banner-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-top: 8px;
}
.mp-friend-requests-banner-who {
flex: 1 1 120px;
min-width: 0;
font-size: 13px;
font-weight: 600;
color: rgba(230, 240, 235, 0.95);
}
.mp-friend-requests-banner-who small {
display: block;
margin-top: 2px;
font-size: 11px;
font-weight: 500;
color: rgba(180, 210, 190, 0.75);
}
.mp-friend-requests-banner-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mp-friend-request-actions {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
margin: 8px 0 10px;
}
.mp-friend-request-actions[hidden] {
display: none !important;
}
.mp-friend-request-actions-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.mp-friend-request-actions .friend-btn-accept,
.mp-friend-requests-banner .friend-btn-accept {
flex: 1 1 auto;
min-width: 110px;
}
.mp-friend-request-hint {
margin: 0;
font-size: 11px;
color: rgba(200, 220, 205, 0.75);
}
.friends-request-section {
margin: 10px 0 6px;
padding: 0 2px;
}
.friends-request-section-title {
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(180, 255, 200, 0.85);
font-weight: 700;
}
.friends-request-section--incoming .friends-request-section-title {
color: #7dfc8a;
}
.friends-request-section--outgoing .friends-request-section-title {
color: #ffd95a;
}
.friends-request-section-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.4em;
padding: 0 6px;
border-radius: 999px;
background: rgba(125, 252, 138, 0.18);
color: #7dfc8a;
font-size: 10px;
}
.friend-status--pending {
color: #ffd95a;
font-weight: 600;
}
.friend-pending-chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 10px;
letter-spacing: 0.04em;
background: rgba(255, 217, 90, 0.16);
color: #ffd95a;
}
.friend-row-actions--request {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.friend-btn-accept {
min-height: 34px !important;
padding: 6px 16px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: 0.03em;
background: rgba(80, 200, 120, 0.35) !important;
color: #b8ffc4 !important;
border: 1px solid rgba(125, 252, 138, 0.55) !important;
border-radius: 8px !important;
cursor: pointer;
}
.friend-btn-reject-text,
.friend-btn-cancel-text {
min-height: 34px !important;
padding: 6px 12px !important;
font-size: 12px !important;
font-weight: 600 !important;
background: rgba(180, 60, 60, 0.18) !important;
color: #ffb0b0 !important;
border: 1px solid rgba(255, 120, 120, 0.35) !important;
border-radius: 8px !important;
cursor: pointer;
}
.friend-btn-cancel-request,
.friend-row--request .friend-btn-reject {
width: 28px !important;
min-width: 28px !important;
height: 28px !important;
padding: 0 !important;
}
/* 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 {
--rp-qa-btn-min: 32px;
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;
overflow: visible;
}
#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;
position: relative;
z-index: 1;
overflow: visible;
max-width: 100%;
justify-self: end;
}
/* 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: stretch;
grid-auto-rows: minmax(var(--rp-qa-btn-min, 32px), 1fr);
}
#rightPanel #quickActions .quick-action-btn {
min-height: var(--rp-qa-btn-min, 32px);
height: auto;
line-height: 1.12;
justify-content: center;
flex-shrink: 0;
}
#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;
}
.place-city-card-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
max-width: 100%;
}
.place-city-visit-center {
display: block;
max-width: 100%;
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;
}
.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: 0 0 clamp(260px, 48vh, 460px);
height: clamp(260px, 48vh, 460px);
min-height: clamp(260px, 48vh, 460px);
max-height: clamp(260px, 48vh, 460px);
min-width: 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: 0;
flex: 1 1 auto;
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.is-broken {
opacity: 0.35;
min-height: 120px;
min-width: 120px;
}
.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 {
flex: 1 1 auto;
height: auto;
min-height: 0;
}
.photo-album-frame--stack .photo-album-main {
flex: 1 1 auto;
height: auto;
}
.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 {
width: 100%;
height: 40px;
padding: 0 14px;
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: var(--font-sm);
text-transform: uppercase;
cursor: pointer;
}
.friends-online-footer {
flex-shrink: 0;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(125, 252, 138, 0.22);
}
.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-sync-status {
margin: 4px 12px 8px;
font-size: var(--font-xs);
color: var(--ui-app-set-group-label-color);
letter-spacing: 0.06em;
line-height: 1.35;
}
.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);
}
.chat-friend-pick-note {
margin: 0 0 8px;
padding: 6px 8px;
font-size: 11px;
line-height: 1.35;
color: rgba(180, 210, 235, 0.82);
border-radius: 8px;
background: rgba(20, 40, 60, 0.45);
}
.app-set-row--soon {
opacity: 0.72;
}
.app-set-row--soon .app-set-chev {
display: none;
}
.app-set-row--soon::after {
content: attr(data-soon-label);
flex-shrink: 0;
margin-left: auto;
font-size: 9px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(160, 200, 230, 0.75);
}
.app-set-row--soon:not([data-soon-label])::after {
content: "Soon";
}
html[data-app-lang="ru"] .app-set-row--soon:not([data-soon-label])::after {
content: "Скоро";
}
.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--select {
cursor: default;
}
.app-set-row--select select {
min-width: 94px;
max-width: 46%;
border: 1px solid rgba(143, 211, 255, 0.28);
border-radius: 8px;
padding: 5px 24px 5px 8px;
background: rgba(2, 10, 8, 0.9);
color: var(--ui-app-set-row-color);
font: inherit;
cursor: pointer;
}
.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-seg-btn.ui-theme-soon,
.map-theme-seg-btn.ui-theme-soon {
opacity: 0.62;
cursor: default;
}
.app-theme-seg-btn.ui-theme-soon:hover,
.map-theme-seg-btn.ui-theme-soon:hover {
border-color: var(--ui-app-theme-seg-btn-border, var(--map-settings-seg-border));
background: var(--ui-app-theme-seg-btn-bg, var(--map-settings-seg-bg));
box-shadow: none;
}
.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-row-hit > span:first-child,
.app-set-row > span:first-child {
flex: 1 1 auto;
min-width: 0;
}
.app-set-status {
flex: 0 0 auto;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
font-size: 9px;
letter-spacing: 0.05em;
text-transform: uppercase;
border: 1px solid rgba(143, 211, 255, 0.28);
color: rgba(200, 225, 245, 0.88);
background: rgba(8, 18, 28, 0.55);
}
.app-set-status[data-tone="ok"] {
border-color: rgba(125, 252, 138, 0.45);
color: rgba(210, 255, 220, 0.95);
background: rgba(125, 252, 138, 0.1);
}
.app-set-status[data-tone="warn"] {
border-color: rgba(255, 176, 84, 0.5);
color: rgba(255, 220, 170, 0.95);
background: rgba(255, 140, 40, 0.12);
}
.app-set-chev {
opacity: 0.5;
font-size: 12px;
flex-shrink: 0;
}
.app-set-row-wrap {
display: flex;
align-items: center;
gap: 0;
padding: 0;
overflow: hidden;
}
.app-set-row-wrap.app-set-row {
cursor: default;
}
.app-set-row-wrap.app-set-row:not(.is-active):not(.is-help-hover) {
background: var(--ui-app-set-row-bg);
}
.app-set-row-wrap.is-help-hover,
.app-set-row-wrap.is-help-hover .app-set-row-hit {
border-color: var(--ui-app-set-row-hover-border);
background: var(--ui-app-set-row-hover-bg);
}
.app-set-row-hit {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
flex: 1 1 auto;
min-width: 0;
min-height: 36px;
padding: 8px 6px 8px 10px;
border: 0;
background: transparent;
color: inherit;
font: inherit;
letter-spacing: inherit;
text-align: left;
cursor: pointer;
}
.app-set-row-wrap > .app-set-chev {
padding-right: 10px;
}
.app-set-help-btn {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 0 2px 0 0;
padding: 0;
border-radius: 999px;
border: 1px solid rgba(143, 211, 255, 0.45);
background: rgba(8, 18, 28, 0.72);
color: rgba(190, 225, 255, 0.95);
font-size: 11px;
font-weight: 700;
line-height: 1;
cursor: help;
transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.app-set-help-btn:hover,
.app-set-help-btn:focus-visible {
border-color: rgba(125, 252, 138, 0.72);
background: rgba(125, 252, 138, 0.16);
color: #eaffef;
transform: scale(1.06);
outline: none;
}
.app-set-reset-wrap {
display: flex;
align-items: center;
gap: 6px;
}
.app-set-reset-wrap .app-set-reset-defaults-btn {
flex: 1 1 auto;
min-width: 0;
}
.app-set-reset-wrap.is-help-hover .app-set-reset-defaults-btn {
border-color: rgba(125, 252, 138, 0.55);
background: rgba(125, 252, 138, 0.08);
}
.app-set-help-popover-shell {
position: fixed;
inset: 0;
z-index: 12050;
pointer-events: none;
}
.app-set-help-connector {
position: fixed;
height: 1px;
transform-origin: 0 50%;
background: linear-gradient(90deg, rgba(125, 252, 138, 0.72), rgba(143, 211, 255, 0.42));
box-shadow: 0 0 6px rgba(125, 252, 138, 0.25);
pointer-events: none;
}
.app-set-help-popover-shell .app-set-help-popover {
position: fixed;
pointer-events: auto;
}
.app-set-help-popover {
position: fixed;
z-index: 12051;
width: min(320px, calc(100vw - 24px));
padding: 12px 12px 10px;
border-radius: 12px;
border: 1px solid rgba(125, 252, 138, 0.42);
background: linear-gradient(160deg, rgba(8, 16, 24, 0.97), rgba(12, 28, 36, 0.98));
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(143, 211, 255, 0.08);
color: rgba(232, 245, 240, 0.94);
pointer-events: auto;
}
.app-set-help-popover-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
}
.app-set-help-popover-title {
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: rgba(190, 235, 255, 0.98);
}
.app-set-help-popover-x {
flex: 0 0 auto;
width: 22px;
height: 22px;
border: 0;
border-radius: 6px;
background: transparent;
color: rgba(220, 235, 245, 0.8);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.app-set-help-popover-x:hover {
background: rgba(255, 255, 255, 0.08);
}
.app-set-help-popover-body {
margin: 0 0 10px;
font-size: 11px;
line-height: 1.45;
letter-spacing: 0.02em;
color: rgba(220, 238, 232, 0.92);
}
.app-set-help-popover-ok {
width: 100%;
min-height: 30px;
border-radius: 8px;
border: 1px solid rgba(125, 252, 138, 0.45);
background: rgba(125, 252, 138, 0.12);
color: #eaffef;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
cursor: pointer;
}
.app-set-help-popover-ok:hover {
background: rgba(125, 252, 138, 0.2);
}
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);
transition:
transform 0.18s ease,
border-color 0.18s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.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;
position: relative;
}
.friend-presence-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.friend-presence-dot.is-online {
background: #22c55e;
}
.friend-presence-dot.is-offline {
background: rgba(148, 163, 184, 0.85);
}
.mp-friends-account-hint {
margin: 0 0 10px;
padding: 8px 10px;
font-size: 12px;
line-height: 1.35;
color: var(--text-muted, #9fb3c8);
border: 1px solid rgba(58, 166, 255, 0.25);
border-radius: 8px;
background: rgba(58, 166, 255, 0.08);
}
.mp-friends-account-hint.is-warn {
color: #fbbf24;
border-color: rgba(251, 191, 36, 0.35);
background: rgba(251, 191, 36, 0.08);
}
.mp-friends-cloud-login-btn {
margin-left: 8px;
padding: 4px 10px;
border-radius: 6px;
border: 1px solid rgba(251, 191, 36, 0.45);
background: rgba(251, 191, 36, 0.15);
color: inherit;
font: inherit;
cursor: pointer;
}
.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: center;
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(160, 255, 185, 0.72) !important;
background: linear-gradient(165deg, rgba(16, 36, 28, 0.98), rgba(7, 16, 14, 0.99)) !important;
transform: translateY(-1px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.1) inset,
0 10px 22px rgba(0, 0, 0, 0.45),
0 8px 18px rgba(125, 252, 138, 0.18),
0 2px 0 rgba(190, 255, 210, 0.28);
}
.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);
}
.terminal-work-context {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 0 10px;
padding: 8px 12px;
border-radius: var(--radius-sm);
border: 1px solid rgba(118, 184, 255, 0.45);
background: rgba(10, 26, 42, 0.55);
color: #b7dbff;
font-size: var(--font-sm);
line-height: 1.35;
}
.terminal-work-context__country,
.terminal-work-context__city {
font-weight: 600;
}
.terminal-work-context__sep {
opacity: 0.65;
}
.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);
}