/* Zynlex — базовый слой: шрифты, токены, reset и типографика */

@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-ThinItalic.woff2") format("woff2"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-ExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-ExtraLightItalic.woff2") format("woff2"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-LightItalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-SemiBoldItalic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-ExtraBoldItalic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-BlackItalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
}

:root {
    --design-position-row-bg: #f2f9ff;
    --page-bg: #f5f5f7;
    --menu-bg: #f5f5f7;
    --surface-bg: #ffffff;
    --surface-soft: #f0f0f2;
    --surface-hover: #e0e0e0;
    --input-bg: #f0f0f2;
    --text-color: #1a1a1a;
    --text-secondary: #666666;
    --text-muted: #999999;
    --border-color: #e0e0e0;
    --border-soft: #e0e0e0;
    --header-bg: #f5f5f7;
    --header-text: #1a1a1a;
    --layout-divider: rgba(0, 0, 0, 0.15);
    --header-secondary-bg: #f0f0f2;
    --header-secondary-border: #e0e0e0;
    --header-secondary-text: #1a1a1a;
    --header-height: 80px;
    --layout-side-menu-width: 300px;
    --layout-content-width: 1140px;
    --button-bg: #ffd85d;
    --button-hover: #ffe07a;
    --button-text: #15171a;
    --gray-button-bg: #f0f0f2;
    --gray-button-hover: #e0e0e0;
    --gray-button-border: #e0e0e0;
    --light-button-bg: #ffffff;
    --light-button-hover: #f0f1f3;
    --light-button-border: #bbbbbb;
    --light-button-border-hover: #999999;
    --in-input-button-bg: #ffffff;
    --in-input-button-hover: #f1f1f1;
    --in-input-button-border: #d7d9dd;
    --danger: #ef4444;
    --danger-border: #ef4444;
    --danger-hover: #dc2626;
    --danger-border-hover: #dc2626;
    --success: #238636;
    --design-accent: #ffd85d;
    --design-header-accent: #fff3ce;
    --design-header-accent-text: #101010;
    --design-header-accent-secondary: #4b4b4b;
    --design-accent-text: #101010;
    --design-card: #ffffff;
    --design-card-soft: #f4f4f5;
    --design-border: #e2e2e4;
    --design-text: #101010;
    --design-text-secondary: #666666;
    --design-text-muted: #999999;
    --design-link: #0072ff;
    --design-table-section-bg: #d7d9de;
    --design-table-section-text: #24262b;
    --design-table-column-bg: #f0f0f2;
    --design-table-column-text: #666666;
    --design-green: #0a8a56;
    --design-green-soft: rgba(10, 138, 86, 0.12);
    --design-red: #d1273a;
    --design-red-soft: rgba(209, 39, 58, 0.12);
    --design-position-marker: #836ef9;
    color-scheme: light;
}

html[data-theme="dark"] {
    --design-position-row-bg: #27394c;
    --page-bg: #15171a;
    --menu-bg: #15171a;
    --surface-bg: #1c1f24;
    --surface-soft: #252830;
    --surface-hover: #2d3748;
    --input-bg: #252830;
    --text-color: #e2e8f0;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-color: #2d3748;
    --border-soft: #2d3748;
    --header-bg: #15171a;
    --header-text: #ffffff;
    --layout-divider: rgba(255, 255, 255, 0.3);
    --header-secondary-bg: #252830;
    --header-secondary-border: #2d3748;
    --header-secondary-text: #e2e8f0;
    --button-bg: #ffd85d;
    --button-hover: #ffe07a;
    --button-text: #15171a;
    --gray-button-bg: #252830;
    --gray-button-hover: #2d3748;
    --gray-button-border: #2d3748;
    --light-button-bg: #252830;
    --light-button-hover: #2d3748;
    --light-button-border: #2d3748;
    --light-button-border-hover: #ffd85d;
    --in-input-button-bg: #252830;
    --in-input-button-hover: #2d3748;
    --in-input-button-border: #2d3748;
    --design-card: #1c1f24;
    --design-card-soft: #252830;
    --design-header-accent: #2c3243;
    --design-header-accent-text: #ffffff;
    --design-header-accent-secondary: #94a3b8;
    --design-border: #2d3748;
    --design-text: #e2e8f0;
    --design-text-secondary: #94a3b8;
    --design-text-muted: #64748b;
    --design-table-section-bg: #353b47;
    --design-table-section-text: #f1f5f9;
    --design-table-column-bg: #252830;
    --design-table-column-text: #cbd5e1;
    --design-green: #10b981;
    --design-green-soft: rgba(16, 185, 129, 0.15);
    --design-red: #ef4444;
    --design-red-soft: rgba(239, 68, 68, 0.15);
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background: var(--page-bg);
    color: var(--text-color);
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

[hidden] {
    display: none !important;
}

.clipboard-copy-helper {
    position: fixed;
    opacity: 0;
    pointer-events: none;
}

.main h1 {
    margin: 0 0 8px;
    color: var(--text-color);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.main h2 { color: var(--text-color); font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.main h3 { color: var(--text-color); font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
.main h4 { color: var(--text-color); font-size: 15px; font-weight: 700; letter-spacing: -0.3px; }
.main h5 { color: var(--text-secondary); font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.main h6 { color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }