:root {
    color-scheme: light;
    --bg: #eef2f6;
    --surface: #ffffff;
    --surface-muted: #f6f8fb;
    --surface-strong: #e7edf5;
    --sidebar: #111827;
    --sidebar-2: #182235;
    --sidebar-text: #f8fafc;
    --sidebar-muted: #94a3b8;
    --text: #142033;
    --muted: #687386;
    --border: #d6dee9;
    --border-strong: #b9c5d4;
    --primary: #2f6fed;
    --primary-soft: #e8f0ff;
    --primary-hover: #255bd0;
    --accent: #0f9f8f;
    --accent-soft: #e2f7f4;
    --success: #17875d;
    --success-soft: #e4f6ef;
    --warning: #b7791f;
    --warning-soft: #fff3d8;
    --danger: #c93d3d;
    --danger-soft: #fde8e8;
    --violet: #7357d8;
    --violet-soft: #eeeafe;
    --shadow: none;
    --radius: 8px;
    --control-height: 40px;
    --topbar-control-height: 44px;
    --theme-day: #f5c542;
    --theme-night: #4f8cff;
    --theme-track-on: #1f3e72;
    --theme-track-off: #e4ebf5;
    --calendar-holiday: #f04444;
    --position-chart-petrovich: #111827;
    --position-chart-traffic-search: #64748b;
    --position-chart-traffic-yandex: #be123c;
    --position-chart-traffic-google: #2563eb;
    --position-chart-1: #0ea5e9;
    --position-chart-2: #22c55e;
    --position-chart-3: #f97316;
    --position-chart-4: #e11d48;
    --position-chart-5: #8b5cf6;
    --position-chart-6: #14b8a6;
    --position-chart-7: #f59e0b;
    --position-chart-8: #2563eb;
    --position-chart-9: #84cc16;
    --position-chart-10: #ec4899;
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b111a;
    --surface: #121b29;
    --surface-muted: #182435;
    --surface-strong: #203047;
    --sidebar: #090f18;
    --sidebar-2: #101827;
    --sidebar-text: #f8fafc;
    --sidebar-muted: #8ca0bb;
    --text: #e8eef7;
    --muted: #98a8bd;
    --border: #29384d;
    --border-strong: #3a4b63;
    --primary: #72a7ff;
    --primary-soft: #162a49;
    --primary-hover: #8db8ff;
    --accent: #3cc7bb;
    --accent-soft: #153a38;
    --success: #57d59f;
    --success-soft: #17382b;
    --warning: #f2bf5f;
    --warning-soft: #3b2c13;
    --danger: #ff7474;
    --danger-soft: #401c22;
    --violet: #a99aff;
    --violet-soft: #2d2750;
    --topbar-control-height: 44px;
    --theme-day: #ffe176;
    --theme-night: #7aa7ff;
    --theme-track-on: #254f93;
    --theme-track-off: #26364c;
    --calendar-holiday: #ff6b6b;
    --position-chart-petrovich: #f8fafc;
    --position-chart-traffic-search: #94a3b8;
    --position-chart-traffic-yandex: #fb7185;
    --position-chart-traffic-google: #60a5fa;
    --position-chart-1: #0ea5e9;
    --position-chart-2: #22c55e;
    --position-chart-3: #f97316;
    --position-chart-4: #e11d48;
    --position-chart-5: #8b5cf6;
    --position-chart-6: #14b8a6;
    --position-chart-7: #f59e0b;
    --position-chart-8: #2563eb;
    --position-chart-9: #84cc16;
    --position-chart-10: #ec4899;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    letter-spacing: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

.muted-text {
    color: var(--muted);
    line-height: 1.5;
}

.app-shell {
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    background: var(--sidebar);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--sidebar-text);
    padding: 22px 16px;
}

.brand {
    align-items: center;
    display: flex;
    gap: 12px;
    min-height: 42px;
    padding: 0 8px;
}

.brand-mark {
    background: var(--primary);
    border-radius: var(--radius);
    color: #ffffff;
    display: grid;
    font-weight: 800;
    height: 40px;
    place-items: center;
    width: 40px;
}

.brand strong,
.brand small {
    display: block;
}

.brand strong {
    font-size: 20px;
    line-height: 1.12;
}

.brand small {
    color: var(--sidebar-muted);
    margin-top: 2px;
}

.nav {
    display: grid;
    gap: 18px;
    margin-top: 28px;
}

.nav-group h2 {
    background: rgba(255, 255, 255, 0.04);
    border-left: 3px solid rgba(114, 167, 255, 0.9);
    color: #d9e6f7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0 0 8px;
    padding: 7px 9px;
    text-transform: uppercase;
}

.nav-item,
.nav-parent {
    align-items: center;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    border-radius: 3px;
    color: #cbd5e1;
    display: flex;
    font: inherit;
    font-weight: 650;
    gap: 10px;
    justify-content: space-between;
    min-height: 38px;
    padding: 9px 10px 9px 9px;
    width: 100%;
}

.nav-parent {
    cursor: pointer;
}

.nav-item-main {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    min-width: 0;
}

.nav-icon {
    align-items: center;
    color: var(--sidebar-muted);
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    width: 20px;
}

.nav-chevron {
    align-items: center;
    color: var(--sidebar-muted);
    display: inline-flex;
    flex: 0 0 auto;
    transition: transform 160ms ease;
}

.nav-item:hover,
.nav-item.active,
.nav-parent:hover,
.nav-parent.active {
    background: var(--sidebar-2);
    color: #ffffff;
}

.nav-item.active,
.nav-parent.active {
    border-left-color: var(--primary);
}

.nav-item.active .nav-icon,
.nav-parent.active .nav-icon,
.nav-item:hover .nav-icon,
.nav-parent:hover .nav-icon {
    color: var(--primary);
}

.nav-collapsible.is-collapsed .nav-chevron {
    transform: rotate(-90deg);
}

.nav-children {
    border-left: 1px solid rgba(148, 163, 184, 0.28);
    display: grid;
    gap: 2px;
    margin: 3px 0 6px 18px;
    padding-left: 14px;
}

.nav-collapsible.is-collapsed .nav-children {
    display: none;
}

.nav-child {
    border-left: 2px solid transparent;
    border-radius: 3px;
    color: var(--sidebar-muted);
    display: block;
    font-size: 14px;
    min-height: 32px;
    padding: 7px 9px;
}

.nav-child:hover {
    background: rgba(255, 255, 255, 0.045);
    color: #ffffff;
}

.nav-child.active {
    background: rgba(114, 167, 255, 0.14);
    border-left-color: var(--primary);
    color: #ffffff;
    font-weight: 800;
}

.workspace {
    min-width: 0;
}

.topbar {
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    min-height: 78px;
    padding: 16px 28px;
}

.eyebrow {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
}

.topbar h1 {
    font-size: 24px;
    line-height: 1.15;
    margin: 4px 0 0;
}

.topbar-actions,
.button-row,
.inline-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.topbar-actions {
    flex-wrap: nowrap;
}

.topbar-actions form {
    margin: 0;
}

.content {
    padding: 28px;
}

.grid,
.section-grid,
.stack {
    display: grid;
    gap: 16px;
}

.metrics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

.two-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0;
}

.section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mt-16 {
    margin-top: 16px;
}

.panel,
.metric-card,
.auth-panel,
.empty-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.panel {
    padding: 20px;
}

.panel-sharp {
    border-radius: 0;
}

.panel-tight {
    padding: 14px;
}

.panel-wide {
    grid-column: 1 / -1;
}

.content > .panel-wide + .panel-wide {
    margin-top: 24px;
}

.panel-header,
.section-title {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.panel-header h2,
.section-title h2 {
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 5px;
}

h1 {
    font-size: 28px;
    line-height: 1.15;
}

h2 {
    font-size: 22px;
    line-height: 1.2;
}

h3 {
    font-size: 19px;
    line-height: 1.25;
}

h4 {
    font-size: 17px;
    line-height: 1.3;
}

h5 {
    font-size: 15px;
    line-height: 1.35;
}

h6 {
    font-size: 14px;
    letter-spacing: 0.04em;
    line-height: 1.35;
    text-transform: uppercase;
}

.panel-header p,
.section-title p,
.muted {
    color: var(--muted);
    margin-bottom: 0;
}

.metric-card {
    border-left: 4px solid var(--border-strong);
    border-radius: 0;
    padding: 17px;
}

.metric-card span {
    color: var(--muted);
    display: block;
    font-size: 13px;
    font-weight: 700;
}

.metric-card strong {
    display: block;
    font-size: 26px;
    line-height: 1.1;
    margin-top: 10px;
}

.metric-card small {
    color: var(--muted);
    display: block;
    margin-top: 8px;
}

.metric-card.success {
    border-left-color: var(--success);
}

.metric-card.neutral {
    border-left-color: var(--primary);
}

.metric-card.warning {
    border-left-color: var(--warning);
}

.metric-card.danger {
    border-left-color: var(--danger);
}

.button {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: var(--control-height);
    padding: 9px 13px;
}

.button:focus-visible,
.theme-switch:focus-visible,
.logout-button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--primary), transparent 72%);
    outline-offset: 1px;
}

.button-primary {
    background: var(--primary);
    color: #ffffff;
}

.button-primary:hover {
    background: var(--primary-hover);
}

.button-secondary {
    background: var(--surface-muted);
    border-color: var(--border);
    color: var(--text);
}

.button-secondary:hover {
    border-color: var(--border-strong);
}

.button-danger {
    background: var(--danger);
    color: #ffffff;
}

.button:disabled,
.button[disabled] {
    cursor: not-allowed;
    opacity: 0.48;
}

.button-primary:disabled:hover,
.button-primary[disabled]:hover {
    background: var(--primary);
}

.button-ghost {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}

.button-sm {
    font-size: 13px;
    min-height: 32px;
    padding: 6px 10px;
}

.icon-button {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    width: 34px;
}

.icon-button:hover {
    border-color: var(--border-strong);
    color: var(--primary);
}

.icon-button-start {
    color: var(--success);
}

.icon-button-start:hover {
    border-color: var(--success);
    color: var(--success);
}

.icon-button-danger:hover {
    border-color: transparent;
    color: var(--danger);
}

.icon-button-delete {
    color: var(--danger);
}

.icon-button-delete:hover {
    border-color: var(--danger);
    color: var(--danger);
}

.icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.icon-button.is-loading {
    cursor: wait;
    opacity: 0.72;
    pointer-events: none;
}

.button-spinner {
    animation: button-spinner 0.75s linear infinite;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    display: none;
    height: 16px;
    width: 16px;
}

.icon-button.is-loading svg {
    display: none;
}

.icon-button.is-loading .button-spinner {
    display: block;
}

.icon-form {
    display: inline-flex;
    margin: 0;
}

.user-chip {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: inline-flex;
    flex: 0 0 auto;
    gap: 9px;
    height: var(--topbar-control-height);
    min-width: 0;
    padding: 6px 12px 6px 8px;
    white-space: nowrap;
}

.chip-icon {
    align-items: center;
    background: var(--primary-soft);
    border-radius: 7px;
    color: var(--primary);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.chip-text strong,
.chip-text small {
    display: block;
}

.chip-text strong {
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

.chip-text small {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.1;
    margin-top: 3px;
    white-space: nowrap;
}

.theme-switch {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    height: var(--topbar-control-height);
    padding: 6px 9px;
    user-select: none;
}

.theme-switch:hover,
.logout-button:hover {
    border-color: var(--border-strong);
}

.theme-icon {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    height: 30px;
    justify-content: center;
    opacity: 0.58;
    width: 30px;
}

.theme-icon:hover {
    background: var(--surface-strong);
    opacity: 1;
}

.theme-sun {
    color: var(--theme-day);
    opacity: 1;
}

.theme-moon {
    color: var(--theme-night);
}

.theme-track {
    background: var(--theme-track-off);
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    cursor: grab;
    height: 24px;
    padding: 2px;
    touch-action: pan-y;
    width: 48px;
}

.theme-track:active {
    cursor: grabbing;
}

.theme-thumb {
    background: var(--theme-day);
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.22);
    display: block;
    height: 18px;
    pointer-events: none;
    transform: translateX(0);
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
    width: 18px;
}

[data-theme="dark"] .theme-thumb {
    background: var(--theme-night);
    transform: translateX(24px);
}

[data-theme="dark"] .theme-track {
    background: var(--theme-track-on);
}

[data-theme="dark"] .theme-sun {
    opacity: 0.45;
}

[data-theme="dark"] .theme-moon {
    opacity: 1;
}

.logout-button {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    gap: 8px;
    height: var(--topbar-control-height);
    padding: 8px 12px;
    white-space: nowrap;
}

.logout-button span {
    align-items: center;
    color: var(--danger);
    display: inline-flex;
}

.logout-button strong {
    font-weight: 800;
}

.form-stack,
.field-grid {
    display: grid;
    gap: 14px;
}

.field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

label span,
.field-label {
    color: var(--muted);
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 6px;
}

input,
select,
textarea {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    min-height: var(--control-height);
    padding: 10px 12px;
    width: 100%;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%23687386' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
    background-position: right 16px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 46px;
}

[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' stroke='%2398a8bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");
}

textarea {
    min-height: 96px;
    resize: vertical;
}

.textarea-tall {
    min-height: 540px;
}

input::placeholder,
textarea::placeholder {
    color: var(--muted);
}

.checkbox-row {
    align-items: center;
    display: inline-grid;
    grid-template-columns: 18px auto;
    column-gap: 10px;
    cursor: pointer;
    min-height: 36px;
    padding: 7px 8px 7px 2px;
    width: fit-content;
}

.checkbox-row input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    align-self: center;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 2px;
    cursor: pointer;
    display: grid;
    margin: 0;
    padding: 0;
    place-content: center;
    height: 18px;
    min-height: 18px;
    width: 18px;
}

.checkbox-row input[type="checkbox"]::before {
    background: #ffffff;
    clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 18%, 84% 6%, 37% 70%);
    content: "";
    height: 11px;
    transform: scale(0);
    width: 11px;
}

.checkbox-row input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}

.checkbox-row input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.table-check {
    text-align: center;
    width: 42px;
}

.table-check input[type="checkbox"] {
    min-height: 18px;
    width: 18px;
}

.table-delete-cell {
    text-align: center;
    width: 58px;
}

.table-delete-cell .icon-form {
    justify-content: center;
}

.checkbox-row span {
    align-self: center;
    cursor: pointer;
    line-height: 18px;
    margin: 0;
    padding: 0;
}

.segment-region-fieldset {
    background: #ffffff;
    border: 0;
    border-radius: 18px;
    padding: 14px 16px 16px;
}

[data-theme="dark"] .segment-region-fieldset {
    background: #182435;
}

.segment-region-fieldset legend {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    padding: 0 8px;
    text-transform: uppercase;
}

.segment-region-combo {
    max-width: 460px;
    position: relative;
}

.segment-region-search {
    margin: 2px 0 0;
    width: 100%;
}

.segment-region-menu {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(3, 8, 20, 0.16);
    left: 0;
    margin-top: 6px;
    max-height: 318px;
    overflow: auto;
    padding: 6px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 40;
}

.segment-region-menu[hidden],
.segment-region-suggestion[hidden] {
    display: none !important;
}

.segment-region-suggestion {
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    display: block;
    font: inherit;
    padding: 10px 11px;
    text-align: left;
    width: 100%;
}

.segment-region-suggestion:hover,
.segment-region-suggestion:focus-visible {
    background: var(--surface-muted);
    outline: none;
}

.segment-region-help {
    color: var(--muted);
    font-size: 13px;
    margin: 10px 0 12px;
}

.segment-region-selected-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.segment-region-selected {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    min-height: 36px;
    padding: 8px 12px;
}

.segment-region-empty {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
    padding: 10px 11px;
}

.segment-tabs-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: grid;
    gap: 22px;
    padding: 0;
}

.segment-form-card {
    display: grid;
    gap: 14px;
}

.segment-form-card .panel-header {
    margin-bottom: 4px;
}

.segment-tabbar {
    align-items: end;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 22px;
    min-height: 42px;
}

.segment-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: -1px;
    padding: 0 0 12px;
    position: relative;
}

.segment-tab:hover {
    color: var(--text);
}

.segment-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 34%, transparent);
    outline-offset: 6px;
}

.segment-tab.is-active {
    border-bottom-color: var(--primary);
    color: var(--primary);
}

.segment-hero {
    padding: 14px 16px;
}

.segment-hero-top {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    justify-content: space-between;
}

.segment-hero h2 {
    font-size: 18px;
    margin: 0 0 4px;
}

.segment-hero p {
    color: var(--muted);
    margin: 0;
}

.segment-meta-strip {
    align-items: center;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 12px;
    padding-top: 10px;
}

.segment-meta-strip span {
    color: var(--text);
    font-size: 13px;
    line-height: 1.35;
}

.segment-meta-strip b {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .05em;
    margin-right: 5px;
    text-transform: uppercase;
}

.semantic-tree-tabs-card {
    gap: 18px;
}

.semantic-tree-tabbar {
    align-items: stretch;
    gap: 18px;
    overflow-x: auto;
    padding-top: 2px;
}

.semantic-tree-region-tab {
    align-items: flex-start;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 3px;
    min-width: 112px;
    text-decoration: none;
    white-space: nowrap;
}

.semantic-tree-region-tab b {
    color: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.semantic-tree-region-panel {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.semantic-tree-workspace {
    align-items: start;
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(320px, 40%) minmax(420px, 1fr);
    min-width: 0;
}

.semantic-tree-region-summary {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding-bottom: 12px;
}

.semantic-tree-region-summary strong {
    display: block;
    font-size: 18px;
}

.semantic-tree-region-summary span {
    color: var(--muted);
    display: block;
    font-size: 13px;
    margin-top: 3px;
}

.semantic-tree-list {
    display: grid;
    gap: 3px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.semantic-tree-children {
    border-left: 1px solid var(--border);
    margin: 4px 0 4px 9px;
    padding-left: 13px;
}

.semantic-tree-node > summary {
    list-style: none;
}

.semantic-tree-node > summary::-webkit-details-marker {
    display: none;
}

.semantic-tree-row {
    align-items: center;
    border-radius: 4px;
    color: var(--text);
    display: flex;
    gap: 7px;
    min-height: 28px;
    min-width: 0;
    padding: 3px 6px;
    white-space: nowrap;
}

.semantic-tree-row:hover {
    background: var(--surface-muted);
}

.semantic-tree-node > summary {
    cursor: pointer;
}

.semantic-tree-node > summary::before {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--primary);
    content: "+";
    display: inline-flex;
    flex: 0 0 18px;
    font-size: 14px;
    font-weight: 900;
    height: 18px;
    justify-content: center;
    line-height: 1;
    width: 18px;
}

.semantic-tree-node[open] > summary::before {
    content: "-";
}

.semantic-tree-leaf-marker {
    display: inline-block;
    flex: 0 0 18px;
    height: 18px;
    width: 18px;
}

.semantic-tree-node-name {
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    padding: 1px 2px;
    text-overflow: ellipsis;
}

.semantic-tree-node-name:hover,
.semantic-tree-node-name:focus-visible,
.semantic-tree-node-name.is-selected {
    background: var(--primary-soft);
    color: var(--primary);
    outline: 0;
}

.semantic-tree-node-frequency {
    color: var(--muted);
    flex: 0 0 auto;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.semantic-tree-node-separator,
.semantic-tree-node-query-count {
    color: var(--muted);
    flex: 0 0 auto;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.semantic-tree-loading {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    padding: 6px 2px;
}

.semantic-tree-loading.is-error {
    color: var(--danger);
}

.semantic-tree-detail {
    border-left: 1px solid var(--border);
    display: grid;
    gap: 14px;
    min-width: 0;
    padding-left: 22px;
}

.semantic-tree-detail-loading {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
    padding: 12px 0;
}

.semantic-tree-detail-header {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-width: 0;
}

.semantic-tree-detail-header strong {
    display: block;
    font-size: 17px;
    line-height: 1.25;
}

.semantic-tree-detail-header span {
    color: var(--muted);
    display: block;
    font-size: 13px;
    margin-top: 4px;
}

.semantic-tree-mini-chart {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.semantic-tree-mini-chart-title {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.semantic-tree-mini-chart-svg {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: block;
    height: auto;
    max-height: 210px;
    width: 100%;
}

.semantic-tree-mini-chart-svg .chart-line {
    fill: none;
    stroke: var(--position-chart-petrovich);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
}

.semantic-tree-mini-chart-svg circle {
    fill: var(--position-chart-petrovich);
    stroke: var(--surface);
    stroke-width: 2;
}

.semantic-tree-detail-table {
    min-width: 0;
}

.semantic-tree-detail .positions-table-shell {
    --positions-query-sticky-width: 280px;
    --positions-frequency-sticky-width: 88px;
}

@media (max-width: 760px) {
    .semantic-tree-workspace {
        grid-template-columns: 1fr;
    }

    .semantic-tree-detail {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding-left: 0;
        padding-top: 16px;
    }

    .semantic-tree-region-summary {
        align-items: stretch;
        flex-direction: column;
    }
}

.segment-import-preview th small {
    color: var(--muted);
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    margin-top: 4px;
    text-transform: none;
}

.segment-import-preview th select {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-top: 7px;
    min-height: 34px;
    min-width: 132px;
    text-transform: none;
}

.segment-import-modal-panel {
    max-width: min(1480px, calc(100vw - 32px));
    width: min(1480px, 100%);
}

.segment-import-modal-body {
    gap: 10px;
}

.segment-import-modal-form {
    gap: 12px;
}

.segment-import-modal-summary {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 12px;
}

.segment-import-modal-summary span {
    font-size: 13px;
}

.segment-import-modal-summary b {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .05em;
    margin-right: 4px;
    text-transform: uppercase;
}

.segment-import-modal-loading {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: flex;
    gap: 10px;
    justify-content: center;
    min-height: 180px;
}

.segment-import-modal-loading .button-spinner {
    color: var(--primary);
    display: block;
}

.segment-import-modal-form .table-scroll {
    border: 1px solid var(--border);
    border-radius: 14px;
    max-height: min(500px, calc(100vh - 300px));
}

.segment-import-preview thead th {
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 2;
}

.toggle-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.toggle {
    background: var(--surface-strong);
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    height: 24px;
    padding: 2px;
    width: 44px;
}

.toggle::before {
    background: var(--primary);
    border-radius: 50%;
    content: "";
    display: block;
    height: 18px;
    transform: translateX(18px);
    width: 18px;
}

.data-table {
    border-collapse: collapse;
    width: 100%;
}

.data-table th,
.data-table td {
    border-bottom: 1px solid var(--border);
    padding: 12px;
    text-align: left;
    vertical-align: top;
}

.data-table th {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.data-table tbody tr:hover {
    background: var(--surface-muted);
}

.data-table-dense th,
.data-table-dense td {
    font-size: 13px;
    padding: 9px 10px;
}

.user-admin-table {
    min-width: 820px;
}

.user-create-form {
    max-width: 300px;
}

.user-create-form .field-grid {
    grid-template-columns: 1fr;
}

.activity-filter-bar {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    margin: 0;
}

.activity-summary-table {
    min-width: 860px;
}

.activity-log-table {
    min-width: 1180px;
}

.activity-user-cell strong,
.activity-log-table td strong {
    display: block;
    font-weight: 600;
}

.activity-user-cell small,
.activity-log-table td small {
    color: var(--muted);
    display: block;
    font-size: 12px;
    margin-top: 2px;
}

.activity-path-cell,
.activity-request-cell,
.activity-params-cell {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
    word-break: break-word;
}

.activity-params-cell {
    color: var(--muted);
    max-width: 320px;
}

.password-generate-row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) var(--control-height);
}

.password-generate-row .icon-button {
    height: var(--control-height);
    width: var(--control-height);
}

.user-admin-table input,
.user-admin-table select {
    min-width: 130px;
}

.user-admin-table td:nth-child(4) {
    min-width: 190px;
}

.mt-8 {
    margin-top: 8px;
}

.table-scroll {
    overflow: auto;
    width: 100%;
}

.process-table {
    min-width: 1080px;
}

.process-table .process-type-column {
    max-width: 150px;
}

.process-table .process-related-column {
    max-width: 132px;
}

.process-table .process-status-column {
    min-width: 112px;
}

.process-table .process-created-column {
    min-width: 96px;
    white-space: normal;
}

.process-table .process-actions-column {
    background: var(--surface);
    box-shadow: -10px 0 14px -16px rgba(0, 0, 0, 0.6);
    min-width: 108px;
    position: sticky;
    right: 0;
    text-align: right;
    z-index: 2;
}

.process-table th.process-actions-column {
    z-index: 3;
}

.process-table tbody tr:hover .process-actions-column {
    background: var(--surface-muted);
}

.filter-bar {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, minmax(120px, 1fr)) auto;
    margin: 16px 0;
}

.filter-bar[data-auto-submit] {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.filter-bar[data-auto-submit] label:first-of-type {
    grid-column: span 2;
}

.positions-filter-section {
    grid-column: 1 / -1;
}

.positions-filter-bar {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.positions-date-from-field {
    grid-column: 1 / span 1;
}

.positions-date-to-field {
    grid-column: 2 / span 1;
}

.positions-region-field {
    grid-column: 3 / span 1;
}

.positions-engine-field {
    grid-column: 4 / span 1;
}

.positions-device-field {
    grid-column: 5 / span 1;
}

.positions-domain-field {
    grid-column: 1 / span 1;
}

.positions-segment-field {
    grid-column: 2 / span 1;
}

.positions-seowork-segment-field {
    grid-column: 3 / span 1;
}

.positions-domain-combo {
    position: relative;
}

.positions-domain-menu {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(3, 8, 20, 0.16);
    left: 0;
    margin-top: 6px;
    max-height: 320px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 30;
}

.positions-query-field {
    grid-column: 4 / span 1;
}

.positions-relevant-url-field {
    grid-column: 5 / span 1;
    position: relative;
}

.positions-relevant-url-field input[readonly] {
    cursor: pointer;
}

.relevant-url-popover {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 14px 34px rgba(3, 8, 20, 0.16);
    left: auto;
    margin-top: 6px;
    max-width: calc(100vw - 32px);
    padding: 12px;
    position: absolute;
    right: 0;
    top: 100%;
    width: min(600px, calc(100vw - 32px));
    z-index: 45;
}

.relevant-url-popover[hidden] {
    display: none;
}

.relevant-url-popover textarea {
    display: block;
    resize: vertical;
    width: 100%;
}

.relevant-url-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.positions-results {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    position: relative;
    transition: min-height 0.14s ease;
}

.positions-results.is-loading {
    overflow: hidden;
}

.positions-query-detail-header .panel-header {
    margin-bottom: 0;
}

.positions-query-filter-section {
    margin-top: 0;
}

.positions-query-detail-filter-bar {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    margin: 0;
}

.positions-query-search-field {
    grid-column: 1 / span 3;
    position: relative;
}

.query-select-field .combo-menu {
    left: 0;
    max-height: 360px;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 45;
}

.query-select-option {
    display: grid;
    gap: 3px;
}

.query-select-option strong {
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
}

.query-select-option span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
}

.query-select-empty {
    color: var(--muted);
    font-size: 13px;
    padding: 11px 12px;
}

.query-select-empty.is-error {
    color: var(--danger);
}

.positions-query-tops-panel {
    position: relative;
    transition: min-height 0.14s ease;
}

.positions-query-tops-panel.is-loading {
    overflow: hidden;
}

.query-detail-current {
    align-items: baseline;
    background: color-mix(in srgb, var(--surface-muted) 78%, var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 14px;
    padding: 11px 13px;
}

.query-detail-current span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.query-detail-current strong {
    color: var(--text);
    font-size: 17px;
    font-weight: 900;
}

.query-detail-current small {
    color: var(--muted);
    font-size: 12px;
    margin-left: auto;
}

.positions-table-loader.query-detail-loader {
    padding-top: 92px;
}

.positions-table-loader {
    align-items: flex-start;
    background:
        radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 74%, transparent), color-mix(in srgb, var(--surface-muted) 86%, transparent));
    backdrop-filter: blur(5px);
    border-radius: 20px;
    display: flex;
    inset: 0;
    justify-content: center;
    min-height: 360px;
    padding-top: 210px;
    position: absolute;
    z-index: 15;
}

.positions-loader-card {
    align-items: center;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 22px;
    box-shadow: 0 24px 80px color-mix(in srgb, var(--text) 18%, transparent);
    display: inline-flex;
    gap: 16px;
    padding: 16px 18px;
}

.positions-loader-orbit {
    height: 42px;
    position: relative;
    width: 42px;
}

.positions-loader-orbit::before {
    animation: positions-loader-spin 1.35s linear infinite;
    border: 2px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-radius: 999px;
    border-top-color: var(--accent);
    content: "";
    inset: 0;
    position: absolute;
}

.positions-loader-orbit i {
    animation: positions-loader-pulse 1.1s ease-in-out infinite;
    background: var(--accent);
    border-radius: 999px;
    height: 7px;
    position: absolute;
    width: 7px;
}

.positions-loader-orbit i:nth-child(1) {
    left: 6px;
    top: 8px;
}

.positions-loader-orbit i:nth-child(2) {
    animation-delay: 0.14s;
    right: 4px;
    top: 18px;
}

.positions-loader-orbit i:nth-child(3) {
    animation-delay: 0.28s;
    bottom: 4px;
    left: 18px;
}

.positions-loader-copy {
    display: grid;
    gap: 3px;
}

.positions-loader-copy strong {
    color: var(--text);
    font-size: 15px;
    letter-spacing: -0.01em;
}

.positions-loader-copy span {
    color: var(--muted);
    font-size: 13px;
}

.positions-loader-copy b {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

@keyframes positions-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes positions-loader-pulse {
    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.72);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.positions-load-error {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 12px;
    color: #9f1239;
    font-weight: 700;
    margin-bottom: 12px;
    padding: 12px 14px;
}

.position-visibility-chart {
    border: 0;
    box-shadow: none;
    margin-bottom: 16px;
    padding: 0 0 14px;
    position: relative;
}

.position-chart-header {
    margin-bottom: 4px;
}

.position-chart-header h3 {
    font-size: 18px;
    margin: 0;
}

.position-chart-metric-control {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    margin: 0 0 8px;
    position: relative;
    z-index: 4;
}

.position-chart-metric-button {
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    gap: 8px;
    height: 34px;
    line-height: 1;
    padding: 0 10px 0 12px;
}

.position-chart-metric-button:hover,
.position-chart-metric-button[aria-expanded="true"] {
    background: var(--surface-muted);
    border-color: var(--border-strong);
}

.position-chart-metric-button i {
    align-items: center;
    display: inline-flex;
    height: 16px;
    justify-content: center;
    transition: transform 0.14s ease;
    width: 16px;
}

.position-chart-metric-button[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.position-chart-metric-menu {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 18px 48px color-mix(in srgb, var(--text) 16%, transparent);
    display: grid;
    gap: 2px;
    left: 0;
    min-width: 270px;
    padding: 6px;
    position: absolute;
    top: calc(100% + 6px);
}

.position-chart-metric-menu[hidden] {
    display: none !important;
}

.position-chart-metric-option {
    align-items: center;
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    display: grid;
    font-size: 13px;
    font-weight: 600;
    gap: 8px;
    grid-template-columns: 16px 16px minmax(0, 1fr);
    line-height: 1.2;
    padding: 7px 8px;
}

.position-chart-metric-option.is-disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.52;
}

.position-chart-metric-option:hover {
    background: var(--surface-muted);
}

.position-chart-metric-option.is-disabled:hover {
    background: transparent;
}

.position-chart-metric-option input {
    height: 15px;
    margin: 0;
    width: 15px;
}

.position-chart-metric-swatch {
    border-radius: 0;
    border-top: 3px solid currentColor;
    height: 0;
    width: 16px;
}

.position-chart-metric-swatch.is-dashed {
    border-top-style: dashed;
}

.positions-chart-loader {
    align-items: center;
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-muted) 84%, transparent));
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 22px;
    display: flex;
    justify-content: center;
    min-height: 420px;
    overflow: hidden;
    position: relative;
}

.positions-chart-loader-grid {
    inset: 28px 24px 82px 48px;
    position: absolute;
}

.positions-chart-loader-grid::before,
.positions-chart-loader-grid::after {
    background: color-mix(in srgb, var(--border) 72%, transparent);
    content: "";
    position: absolute;
}

.positions-chart-loader-grid::before {
    bottom: 0;
    left: 0;
    top: 0;
    width: 1px;
}

.positions-chart-loader-grid::after {
    bottom: 0;
    height: 1px;
    left: 0;
    right: 0;
}

.positions-chart-loader-grid span {
    animation: positions-chart-loader-line 1.7s ease-in-out infinite;
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 20%, transparent), color-mix(in srgb, var(--accent) 62%, transparent), color-mix(in srgb, var(--primary) 20%, transparent));
    border-radius: 999px;
    height: 3px;
    left: 0;
    opacity: 0.72;
    position: absolute;
    right: 0;
    transform-origin: left center;
}

.positions-chart-loader-grid span:nth-child(1) {
    top: 74%;
    transform: rotate(-5deg) scaleX(0.86);
}

.positions-chart-loader-grid span:nth-child(2) {
    animation-delay: 0.12s;
    top: 58%;
    transform: rotate(7deg) scaleX(0.78);
}

.positions-chart-loader-grid span:nth-child(3) {
    animation-delay: 0.24s;
    top: 44%;
    transform: rotate(-10deg) scaleX(0.68);
}

.positions-chart-loader-grid span:nth-child(4) {
    animation-delay: 0.36s;
    top: 32%;
    transform: rotate(4deg) scaleX(0.74);
}

.positions-chart-loader-grid span:nth-child(5) {
    animation-delay: 0.48s;
    top: 66%;
    transform: rotate(11deg) scaleX(0.7);
}

.positions-chart-loader-card {
    align-items: center;
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 22px;
    box-shadow: 0 24px 80px color-mix(in srgb, var(--text) 16%, transparent);
    display: inline-flex;
    gap: 16px;
    padding: 16px 18px;
    position: relative;
    z-index: 2;
}

@keyframes positions-chart-loader-line {
    0%,
    100% {
        opacity: 0.34;
        filter: saturate(0.75);
    }

    50% {
        opacity: 0.9;
        filter: saturate(1.2);
    }
}

.positions-visibility-svg {
    display: block;
    height: 360px;
}

.positions-chart-soft-status {
    align-items: center;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--surface-muted) 86%, transparent));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    border-radius: 8px;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 9%, transparent);
    color: color-mix(in srgb, var(--text) 84%, var(--muted));
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    height: 34px;
    justify-content: center;
    min-width: 154px;
    overflow: hidden;
    padding: 0 14px;
    position: relative;
    z-index: 3;
}

.positions-chart-soft-status::before {
    animation: positions-soft-status-sheen 1.35s ease-in-out infinite;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 20%, transparent), transparent);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    transform: translateX(-110%);
}

.positions-chart-soft-status::after {
    animation: positions-soft-status-progress 1.05s ease-in-out infinite;
    background: linear-gradient(90deg, transparent, var(--primary), color-mix(in srgb, var(--accent) 88%, var(--primary)));
    border-radius: 999px;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    pointer-events: none;
    position: absolute;
    width: 58%;
}

.position-visibility-chart.is-soft-updating::after {
    animation: positions-soft-chart-line 1.1s linear infinite;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 46%, transparent), transparent);
    border-radius: 999px;
    content: "";
    height: 3px;
    left: 48px;
    position: absolute;
    right: 60px;
    top: 206px;
}

.position-visibility-chart.has-soft-error .positions-chart-soft-status {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

.position-visibility-chart.has-soft-error .positions-chart-soft-status::before,
.position-visibility-chart.has-soft-error .positions-chart-soft-status::after {
    display: none;
}

@keyframes positions-soft-chart-line {
    from {
        background-position: -220px 0;
    }

    to {
        background-position: 220px 0;
    }
}

@keyframes positions-soft-status-sheen {
    0% {
        transform: translateX(-110%);
    }

    55%,
    100% {
        transform: translateX(110%);
    }
}

@keyframes positions-soft-status-progress {
    0% {
        transform: translateX(-90%);
    }

    50% {
        transform: translateX(70%);
    }

    100% {
        transform: translateX(175%);
    }
}

.position-chart-traffic-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 2px 0 0;
    min-height: 24px;
}

.position-chart-traffic-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-grid;
    gap: 6px;
    grid-template-columns: 15px 18px minmax(0, auto) auto;
    height: 22px;
    line-height: 1;
    padding: 0 4px;
}

.position-chart-traffic-toggle:hover {
    background: var(--surface-muted);
}

.position-chart-traffic-toggle input {
    flex: 0 0 auto;
    height: 15px;
    margin: 0;
    width: 15px;
}

.position-chart-traffic-toggle i {
    background: transparent;
    border-radius: 0;
    border-top: 3px solid currentColor;
    display: block;
    flex: 0 0 auto;
    height: 0;
    width: 18px;
}

.position-chart-traffic-toggle i.is-dashed {
    border-top-style: dashed;
}

.position-chart-traffic-toggle .position-chart-legend-spacer {
    display: block;
    flex: 0 0 auto;
    height: 15px;
    width: 15px;
}

.position-chart-metric-summary {
    cursor: pointer;
}

.position-chart-metric-summary:hover {
    background: var(--surface-muted);
}

.position-chart-traffic-toggle span,
.position-chart-traffic-toggle strong {
    align-items: center;
    display: inline-flex;
    height: 15px;
    font-size: 13px;
    font-weight: 600;
    line-height: 15px;
    white-space: nowrap;
}

.position-chart-traffic-toggle span {
    transform: translateY(1px);
}

.position-chart-traffic-toggle strong {
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

.positions-visibility-svg .chart-grid-line {
    stroke: color-mix(in srgb, var(--border) 68%, transparent);
    stroke-width: 1;
}

.positions-visibility-svg .chart-y-label {
    fill: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

.positions-visibility-svg .chart-y-label-traffic {
    fill: color-mix(in srgb, var(--muted) 82%, var(--text));
    text-anchor: start;
}

.positions-visibility-svg .chart-traffic-axis {
    stroke: color-mix(in srgb, var(--border-strong) 62%, transparent);
    stroke-dasharray: 4 5;
    stroke-width: 1;
}

.positions-visibility-svg .chart-x-label {
    fill: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

.positions-visibility-svg .chart-point-label {
    fill: var(--text);
    font-size: 13px;
    font-weight: 850;
    opacity: 0;
    paint-order: stroke;
    pointer-events: none;
    stroke: var(--surface);
    stroke-width: 4px;
    text-anchor: middle;
    transition: opacity 0.08s ease;
}

.position-visibility-chart.is-series-focused .chart-point-label.is-series-active {
    opacity: 1;
}

.position-visibility-chart.is-series-focused .chart-point-label.is-series-dimmed {
    opacity: 0;
}

.trend-chart [data-chart-series-target].is-series-hidden,
.trend-chart [data-chart-metric-target].is-metric-hidden {
    display: none;
}

.trend-chart .positions-traffic-line {
    opacity: 0.86;
    stroke-dasharray: 8 7;
    stroke-width: 2;
}

.trend-chart .positions-traffic-hit-line {
    stroke-width: 18;
}

.trend-chart .positions-traffic-point,
.trend-chart .positions-visibility-point {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.08s ease;
}

.trend-chart .positions-traffic-point.is-point-active,
.trend-chart .positions-visibility-point.is-point-active {
    opacity: 1;
}

.trend-chart .positions-chart-hover-band {
    fill: transparent;
    outline: none;
    pointer-events: all;
}

.trend-chart .positions-chart-hover-band:focus,
.trend-chart .positions-chart-hover-band:focus-visible {
    outline: none;
}

.position-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    margin-top: 0;
}

.position-chart-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    height: 22px;
    line-height: 1;
    min-height: 20px;
    padding: 0 4px;
}

.position-chart-toggle:hover {
    background: var(--surface-muted);
}

.position-chart-toggle input {
    flex: 0 0 auto;
    height: 15px;
    margin: 0;
    width: 15px;
}

.position-chart-toggle input:disabled {
    cursor: default;
}

.position-chart-toggle i {
    border-radius: 999px;
    display: block;
    flex: 0 0 auto;
    height: 10px;
    width: 10px;
}

.position-chart-toggle-traffic i {
    height: 3px;
    width: 16px;
}

.position-chart-toggle span {
    align-items: center;
    display: inline-flex;
    font-size: 13px;
    font-weight: 400;
    line-height: 15px;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.position-chart-toggle strong {
    align-items: center;
    display: inline-flex;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    line-height: 15px;
    margin-left: -2px;
}

.position-chart-toggle:has(input:not(:checked)) {
    color: var(--muted);
    opacity: 0.7;
}

.chart-empty {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-weight: 800;
    padding: 14px 16px;
}

.chart-empty.chart-error {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #9a3412;
}

.positions-table {
    min-width: 100%;
    table-layout: fixed;
    width: max-content;
}

.positions-table-shell {
    --positions-query-sticky-width: 320px;
    --positions-frequency-sticky-width: 92px;
    display: grid;
    gap: 8px;
}

.positions-table-controls {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: calc(var(--positions-query-sticky-width) + var(--positions-frequency-sticky-width)) minmax(0, 1fr);
}

.positions-date-count-control {
    align-items: center;
    display: flex;
    gap: 8px;
    max-width: 132px;
}

.positions-date-count-control span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.positions-date-count-control select {
    min-height: 34px;
    min-width: 74px;
    padding: 6px 28px 6px 10px;
}

.positions-table-top-scroll {
    --positions-scroll-thumb: #94a3b8;
    --positions-scroll-thumb-active: #64748b;
    --positions-scroll-thumb-hover: #7c8da1;
    --positions-scroll-track: #e2e8f0;
    --positions-scroll-track-border: #cbd5e1;
    background: var(--positions-scroll-track);
    border: 0;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px var(--positions-scroll-track-border);
    cursor: default;
    height: 18px;
    overflow: hidden;
    padding: 0;
    position: relative;
    scrollbar-width: none;
}

.positions-table-top-scroll::-webkit-scrollbar {
    display: none;
}

.positions-table-top-scroll-thumb {
    background: var(--positions-scroll-thumb);
    border-radius: 999px;
    bottom: 1px;
    cursor: grab;
    left: 0;
    min-width: 48px;
    position: absolute;
    top: 1px;
    transition: background-color 0.12s ease;
}

.positions-table-top-scroll-thumb:hover {
    background: var(--positions-scroll-thumb-hover);
}

.positions-table-top-scroll-thumb:active,
.positions-table-top-scroll-thumb.is-dragging {
    background: var(--positions-scroll-thumb-active);
    cursor: grabbing;
}

[data-theme="dark"] .positions-table-top-scroll {
    --positions-scroll-thumb: #64748b;
    --positions-scroll-thumb-active: #94a3b8;
    --positions-scroll-thumb-hover: #7c8da1;
    --positions-scroll-track: #172131;
    --positions-scroll-track-border: #253449;
}

.positions-table-top-scroll[hidden] {
    display: none;
}

.positions-table-top-scroll-spacer {
    height: 1px;
}

.positions-table-scroll {
    scrollbar-gutter: stable;
}

.positions-table th,
.positions-table td {
    line-height: 1.15;
    padding: 4px 8px;
    vertical-align: middle;
}

.positions-query-col {
    width: var(--positions-query-sticky-width);
}

.positions-frequency-col {
    width: var(--positions-frequency-sticky-width);
}

.positions-relevant-url-col {
    width: 250px;
}

.positions-position-col {
    width: 124px;
}

.positions-table th:first-child,
.positions-table td:first-child,
.positions-table th:nth-child(2),
.positions-table td:nth-child(2) {
    position: sticky;
}

.positions-table th:first-child,
.positions-table td:first-child {
    left: 0;
    max-width: var(--positions-query-sticky-width);
    min-width: var(--positions-query-sticky-width);
    width: var(--positions-query-sticky-width);
    z-index: 3;
}

.positions-table th:nth-child(2),
.positions-table td:nth-child(2) {
    box-shadow: 10px 0 14px -16px rgba(0, 0, 0, 0.7);
    left: var(--positions-query-sticky-width);
    max-width: var(--positions-frequency-sticky-width);
    min-width: var(--positions-frequency-sticky-width);
    width: var(--positions-frequency-sticky-width);
    z-index: 3;
}

.positions-table thead th:first-child,
.positions-table thead th:nth-child(2) {
    background: var(--surface);
    z-index: 5;
}

.positions-date-head {
    display: grid;
    gap: 2px;
    justify-items: center;
    line-height: 1.15;
}

.positions-date-head-date {
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.positions-date-head-visibility {
    color: var(--muted);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.positions-table th:nth-child(2),
.positions-table td:nth-child(2),
.positions-table th:nth-child(n+3),
.positions-value-cell {
    text-align: center;
}

.positions-table tbody tr:nth-child(odd),
.positions-table tbody tr:nth-child(odd) > td {
    background: var(--surface);
}

.positions-table tbody tr:nth-child(even),
.positions-table tbody tr:nth-child(even) > td {
    background: color-mix(in srgb, var(--surface-muted) 68%, var(--surface));
}

.positions-table tbody tr:hover {
    background: color-mix(in srgb, var(--surface-strong) 82%, var(--primary-soft));
}

.positions-table tbody tr:hover > td {
    background: color-mix(in srgb, var(--surface-strong) 82%, var(--primary-soft));
}

.query-cell {
    max-width: 280px;
}

.query-cell a {
    color: var(--text);
    display: inline-block;
    font-size: 16px;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
}

.positions-value-cell {
    font-weight: 400;
    padding: 0;
}

.frequency-cell {
    font-size: 16px;
}

@media (max-width: 760px) {
    .positions-table-shell {
        --positions-query-sticky-width: 240px;
    }

    .positions-table-controls {
        grid-template-columns: minmax(0, 1fr);
    }
}

.positions-relevant-url-cell {
    color: var(--muted);
    font-size: 13px;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.positions-table .positions-relevant-url-cell {
    text-align: left;
}

.positions-relevant-url-cell a {
    color: inherit;
    text-decoration: none;
}

.position-cell-link,
.position-cell-text {
    align-items: center;
    color: inherit;
    display: flex;
    font-size: 16px;
    justify-content: center;
    line-height: 1.15;
    padding: 4px 8px;
    position: relative;
    text-align: center;
    text-decoration: none;
    width: 100%;
}

.position-cell-link {
    color: var(--primary);
    cursor: pointer;
}

.position-cell-link.is-relevant-mismatch {
    color: var(--danger);
}

.position-delta {
    left: calc(50% + 12px);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-left: 0;
    position: absolute;
    top: 1px;
    vertical-align: baseline;
}

.position-delta-up {
    color: var(--success);
}

.position-delta-down {
    color: var(--danger);
}

.positions-value-cell:hover .position-cell-link {
    color: var(--primary);
}

.positions-value-cell:hover .position-cell-link.is-relevant-mismatch {
    color: var(--danger);
}

.engine-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-grid;
    font-size: 12px;
    font-weight: 900;
    height: 22px;
    margin-right: 7px;
    place-items: center;
    vertical-align: middle;
    width: 22px;
}

.engine-yandex {
    background: #fc3f1d;
    color: #ffffff;
}

.engine-google {
    background: #ffffff;
    border: 1px solid var(--border-strong);
    color: #4285f4;
}

.query-top-shell {
    display: grid;
    gap: 8px;
}

.query-top-scrollbar {
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
}

.query-top-scrollbar[hidden] {
    display: none;
}

.query-top-scrollbar-spacer {
    height: 1px;
}

.query-top-columns {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 0;
    scrollbar-width: none;
}

.query-top-columns::-webkit-scrollbar {
    display: none;
}

.query-top-column {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex: 0 0 260px;
    padding: 12px;
}

.query-top-column h3 {
    font-size: 14px;
    margin: 0 0 10px;
}

.query-top-column ol {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 24px;
}

.query-top-domain {
    color: var(--muted);
    padding: 3px 4px;
    transition: background-color 0.08s ease, color 0.08s ease;
}

.query-top-domain.is-target-domain {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    border-radius: 4px;
    color: var(--success);
    font-weight: 900;
}

.query-top-domain.is-hover-domain {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border-radius: 4px;
    color: var(--primary);
}

.query-top-domain.is-empty {
    color: var(--muted);
    font-style: italic;
}

.query-top-column a {
    color: inherit;
    text-decoration: none;
    word-break: break-word;
}

.pager {
    align-items: center;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 16px;
}

.pager-top {
    margin-bottom: 10px;
    margin-top: 0;
}

.pager-bottom {
    margin-top: 16px;
}

.pager span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
}

.pager-pages {
    align-items: center;
    display: inline-flex;
    flex: 1 1 420px;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.pager-pages .button {
    font-weight: 400;
}

.pager-meta {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 14px;
    min-height: 34px;
}

.pager-page,
.pager-ellipsis {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: inline-flex;
    font-size: 13px;
    font-weight: 400;
    justify-content: center;
    min-height: 34px;
    min-width: 34px;
    padding: 6px 9px;
}

.pager-page {
    color: var(--text);
    text-decoration: none;
}

.pager-page:hover {
    border-color: var(--border-strong);
    color: var(--primary);
}

.pager-page.is-current {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.pager-jump {
    min-width: 46px;
}

.pager-page.disabled,
.pager .button.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.pager-ellipsis {
    border-color: transparent;
}

.pager-summary {
    align-items: center;
    display: inline-flex;
    line-height: 1;
    min-height: 34px;
    white-space: nowrap;
}

.pager-limit {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    margin-left: 0;
    min-height: 34px;
}

.pager-limit span {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0;
    min-height: 34px;
    white-space: nowrap;
}

.pager-limit select {
    height: 34px;
    min-height: 34px;
    min-width: 92px;
    padding-bottom: 6px;
    padding-top: 6px;
    width: auto;
}

.bulk-toolbar {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 10px 12px;
}

.row-actions-inline {
    align-items: center;
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 8px;
    white-space: nowrap;
}

.query-controls {
    align-items: end;
    grid-template-columns: minmax(180px, 240px) minmax(160px, 1fr);
}

.query-controls label:first-of-type {
    grid-column: auto;
}

.query-total {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 13px;
    font-weight: 800;
    min-height: var(--control-height);
}

.cell-strong,
.cell-muted {
    display: block;
}

.cell-strong {
    font-weight: 800;
}

.cell-muted,
.help-text {
    color: var(--muted);
    font-size: 13px;
}

.cell-url {
    color: var(--primary);
    overflow-wrap: anywhere;
}

.nowrap {
    white-space: nowrap;
}

.batch-start-cell {
    min-width: 96px;
    white-space: normal;
}

.batch-start-cell .cell-strong,
.batch-start-cell .cell-muted {
    line-height: 1.25;
}

.batch-duration-cell {
    min-width: 104px;
    white-space: nowrap;
}

.batch-progress-cell {
    min-width: 116px;
}

.summary-list {
    margin: 8px 0 0;
    padding-left: 20px;
}

.progress-cell {
    display: grid;
    gap: 6px;
}

.progress-meta {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.progress-percent {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.progress-status {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.semantic-core-details-below {
    border-top: 1px solid var(--border);
    margin-top: 28px;
    padding-top: 20px;
}

.semantic-core-details-below .panel-header {
    margin-bottom: 14px;
}

.process-live-panel {
    gap: 14px;
}

.process-live-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
}

.process-live-header h2 {
    margin: 0 0 4px;
}

.process-live-header p {
    color: var(--muted);
    margin: 0;
}

.process-live-summary {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    margin-bottom: 14px;
}

.process-live-metric {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 4px;
    min-height: 58px;
    padding: 8px 10px;
}

.process-live-metric span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.process-live-metric strong {
    font-size: 13px;
    line-height: 1.25;
}

.process-live-log {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-top: 16px;
    max-height: 300px;
    overflow: auto;
}

[data-process-live-actions] {
    margin: 18px 0 18px;
}

.process-live-panel + .panel {
    margin-top: 24px;
}

.process-log-head,
.process-log-entry {
    display: grid;
    gap: 10px;
    grid-template-columns: 150px 110px minmax(0, 1fr) 80px;
}

.process-log-head {
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    padding: 8px 10px;
    text-transform: uppercase;
}

.process-log-entry {
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    padding: 8px 10px;
}

.process-log-entry:last-child {
    border-bottom: 0;
}

.process-log-entry time,
.process-log-batch {
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.process-log-event {
    color: var(--primary);
    font-weight: 800;
}

.process-log-entry strong,
.process-log-entry small {
    display: block;
}

.process-log-entry small {
    color: var(--muted);
    margin-top: 3px;
}

.process-log-warning .process-log-event {
    color: var(--warning);
}

.process-log-error .process-log-event {
    color: var(--danger);
}

.process-log-empty {
    color: var(--muted);
    font-size: 13px;
    padding: 12px;
}

.flash-details {
    margin-top: 10px;
}

.button.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.mono-cell,
.tabular {
    font-variant-numeric: tabular-nums;
}

.mono-cell {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
}

.seowork-table-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.seowork-table-card {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    display: grid;
    gap: 6px;
    min-height: 96px;
    padding: 13px;
    text-decoration: none;
}

.seowork-table-card:hover {
    border-color: var(--border-strong);
}

.seowork-table-card strong {
    font-size: 15px;
}

.seowork-table-card span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.seowork-meta-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.seowork-meta {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 5px;
    padding: 11px 12px;
}

.seowork-meta span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.seowork-meta strong {
    font-size: 17px;
}

.seowork-chart-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    margin: 16px 0;
    max-width: none;
    width: 100%;
}

.panel-wide > .seowork-chart-grid,
.panel-wide > .chart-range-bar {
    margin-left: -20px;
    margin-right: -20px;
    max-width: none;
    width: calc(100% + 40px);
}

.panel-wide > .seowork-chart-grid > .chart-card {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
}

.chart-card {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 14px;
    max-width: none;
    min-width: 0;
    padding: 14px;
    width: 100%;
}

.position-visibility-chart.chart-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: 6px;
    padding: 0 0 8px;
}

.chart-range-bar {
    align-items: end;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(160px, 220px));
    margin: 16px 0 0;
    padding: 12px;
    width: 100%;
}

.chart-header {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.chart-header h3 {
    font-size: 15px;
    margin: 0;
}

.chart-header p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.4;
    margin: 4px 0 0;
}

.chart-header strong {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chart-bars {
    display: grid;
    gap: 10px;
}

.chart-row {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.chart-row-head {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.chart-row-head strong {
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-row-head span,
.chart-row small {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.chart-track {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    height: 9px;
    overflow: hidden;
}

.chart-track span {
    background: linear-gradient(90deg, var(--accent), var(--primary));
    border-radius: inherit;
    display: block;
    height: 100%;
}

.trend-chart {
    display: block;
    height: 340px;
    max-width: none;
    min-width: 100%;
    width: 100%;
}

.trend-chart line {
    stroke: var(--border-strong);
    stroke-width: 1;
}

.trend-chart .chart-line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
}

.trend-chart .chart-hit-line {
    fill: none;
    pointer-events: stroke;
    stroke: transparent;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 16;
}

.trend-chart circle {
    cursor: pointer;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.trend-chart circle:hover {
    filter: drop-shadow(0 0 5px rgba(47, 111, 237, 0.55));
    stroke-width: 2;
}

.chart-card.is-series-focused [data-chart-series].is-series-dimmed {
    opacity: 0.18;
}

.position-visibility-chart.chart-card.is-series-focused .chart-point-label.is-series-dimmed[data-chart-series-target] {
    opacity: 0;
}

.chart-card.is-series-focused .chart-line.is-series-active {
    filter: drop-shadow(0 0 5px rgba(47, 111, 237, 0.34));
    stroke-width: 3.6;
}

.chart-card.is-series-focused circle.is-series-active {
    filter: drop-shadow(0 0 5px rgba(47, 111, 237, 0.58));
    stroke-width: 4;
}

.chart-card.is-series-focused .chart-legend span.is-series-active {
    color: var(--text);
}

.trend-chart text {
    fill: var(--muted);
    font-size: 14px;
    font-weight: 700;
}

.chart-axis-labels {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 15px;
    font-weight: 800;
    justify-content: space-between;
    margin-top: -8px;
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 14px;
}

.chart-legend span {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 14px;
    font-weight: 800;
    gap: 6px;
    min-width: 0;
}

.chart-legend i {
    border-radius: 999px;
    display: inline-block;
    height: 10px;
    width: 10px;
}

.chart-tooltip {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 12px 28px rgba(3, 8, 20, 0.24);
    color: var(--text);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
    max-width: min(420px, calc(100vw - 24px));
    padding: 8px 10px;
    pointer-events: none;
    position: fixed;
    white-space: pre-line;
    z-index: 200;
}

.chart-tooltip.is-rich {
    min-width: 220px;
    padding: 9px 10px;
    white-space: normal;
}

.chart-tooltip-date {
    font-weight: 850;
    margin-bottom: 7px;
}

.chart-tooltip-list {
    display: grid;
    gap: 3px;
}

.chart-tooltip-item {
    align-items: center;
    display: grid;
    gap: 7px;
    grid-template-columns: 26px minmax(0, 1fr) auto;
}

.chart-tooltip-item.has-tooltip-separator {
    margin-top: 8px;
}

.chart-tooltip-line {
    border-radius: 0;
    border-top: 3px solid currentColor;
    display: block;
    height: 0;
    width: 24px;
}

.chart-tooltip-line.is-dashed {
    border-top-style: dashed;
}

.chart-tooltip-item span {
    min-width: 0;
}

.chart-tooltip-item strong {
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    justify-self: end;
}

.tag-list,
.badge-row,
.tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-list span,
.badge,
.tab {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    min-height: 30px;
    padding: 6px 9px;
    text-decoration: none;
}

.tab[href]:hover {
    border-color: var(--border-strong);
}

.badge-success {
    background: var(--success-soft);
    border-color: transparent;
    color: var(--success);
}

.badge-warning {
    background: var(--warning-soft);
    border-color: transparent;
    color: var(--warning);
}

.badge-danger {
    background: var(--danger-soft);
    border-color: transparent;
    color: var(--danger);
}

.badge-primary,
.tab.active {
    background: var(--primary-soft);
    border-color: transparent;
    color: var(--primary);
}

.badge-accent {
    background: var(--accent-soft);
    border-color: transparent;
    color: var(--accent);
}

.alert {
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 12px 13px;
}

.alert-danger {
    background: var(--danger-soft);
    color: var(--danger);
}

.alert-success {
    background: var(--success-soft);
    color: var(--success);
}

.alert-warning {
    background: var(--warning-soft);
    color: var(--warning);
}

.alert-info {
    background: var(--primary-soft);
    color: var(--primary);
}

.modal-backdrop {
    align-items: center;
    background: rgba(11, 17, 26, 0.48);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 24px;
    position: fixed;
    z-index: 80;
}

.modal-backdrop[hidden] {
    display: none;
}

.modal-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.26);
    display: grid;
    gap: 16px;
    max-height: min(760px, calc(100vh - 48px));
    max-width: 620px;
    overflow: auto;
    padding: 18px;
    width: min(620px, 100%);
}

.modal-header,
.modal-actions {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.modal-header h2 {
    font-size: 18px;
    margin: 0;
}

.modal-body {
    display: grid;
    gap: 12px;
}

.modal-backdrop[data-clone-modal] {
    align-items: flex-start;
    overflow-y: auto;
    padding-bottom: 48px;
    padding-top: 48px;
}

.modal-backdrop[data-clone-modal] .modal-panel {
    max-height: none;
    overflow: visible;
    width: min(720px, 100%);
}

.modal-backdrop[data-clone-modal] .modal-body {
    align-content: start;
    min-height: 460px;
}

.modal-backdrop[data-clone-modal] .combo-menu {
    max-height: 380px;
    z-index: 90;
}

.modal-summary {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(160px, 1fr);
    margin: 0;
    padding: 0;
}

.modal-backdrop[data-position-modal] {
    align-items: flex-start;
    overflow-y: auto;
    padding: 24px 16px;
}

.modal-backdrop[data-position-modal] .modal-panel {
    max-width: 980px;
    width: min(980px, calc(100vw - 32px));
}

.modal-backdrop[data-position-modal] .position-target-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.modal-backdrop[data-position-modal] .position-primary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.modal-backdrop[data-position-modal] .position-cron-grid {
    align-items: end;
    grid-template-columns: minmax(180px, 240px) auto;
    justify-content: start;
}

.position-cron-field {
    width: min(240px, 100%);
}

.position-cron-field input {
    width: 100%;
}

.position-enabled-field {
    align-self: end;
    min-height: var(--control-height);
}

.position-summary-container {
    min-height: 304px;
    transition: opacity 0.15s ease;
}

.position-summary-container.is-loading {
    opacity: 0.62;
}

.cron-label-text {
    align-items: center;
    cursor: help;
    display: inline-flex;
    gap: 6px;
    min-height: 32px;
    padding-right: 12px;
}

.cron-help-icon {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    cursor: help;
    display: inline-grid;
    font-size: 11px;
    font-weight: 900;
    height: 18px;
    line-height: 1;
    margin: 0;
    min-height: 0;
    padding: 0;
    place-items: center;
    width: 18px;
}

.cron-label-text:hover .cron-help-icon,
.cron-label-text:focus-visible .cron-help-icon,
.cron-help-icon:hover,
.cron-help-icon:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

@media (max-width: 760px) {
    .positions-date-from-field,
    .positions-date-to-field,
    .positions-region-field,
    .positions-engine-field,
    .positions-device-field,
    .positions-domain-field,
    .positions-segment-field,
    .positions-seowork-segment-field,
    .positions-query-field,
    .positions-relevant-url-field {
        grid-column: 1 / -1;
    }

    .modal-backdrop[data-position-modal] .position-target-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modal-backdrop[data-position-modal] .position-primary-grid {
        grid-template-columns: 1fr;
    }

    .modal-backdrop[data-position-modal] .position-cron-grid {
        grid-template-columns: 1fr;
    }
}

.modal-summary dt,
.modal-summary dd {
    border-bottom: 1px solid var(--border);
    margin: 0;
    padding: 8px 0;
}

.modal-summary dt {
    color: var(--muted);
    font-weight: 800;
}

.modal-summary dd {
    font-weight: 700;
    text-align: right;
}

.toolbar {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: 1.2fr repeat(3, minmax(140px, 0.6fr)) auto;
}

.date-picker,
.combo {
    position: relative;
}

.date-input {
    font-variant-numeric: tabular-nums;
}

.date-popover,
.combo-menu {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--text);
    position: absolute;
    z-index: 50;
}

.date-popover[hidden],
.combo-menu[hidden] {
    display: none;
}

.date-popover {
    margin-top: 6px;
    padding: 12px;
    width: 328px;
}

.date-calendar-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.date-calendar-title {
    font-size: 16px;
    font-weight: 800;
    text-transform: capitalize;
}

.date-nav {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    font-size: 18px;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.date-nav-row {
    display: flex;
    gap: 8px;
}

.date-weekdays,
.date-days {
    display: grid;
    gap: 4px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.date-weekdays span {
    color: var(--muted);
    font-size: 14px;
    font-weight: 800;
    padding: 7px 0;
    text-align: center;
}

.date-day {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    cursor: pointer;
    font-size: 15px;
    font-weight: 750;
    height: 38px;
}

.date-day:hover,
.date-day.is-selected {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.date-day.is-outside {
    color: var(--muted);
    opacity: 0.58;
}

.date-day.is-holiday {
    color: var(--calendar-holiday);
}

.date-day.is-holiday.is-outside {
    color: var(--calendar-holiday);
    opacity: 0.5;
}

.date-day.is-short-day {
    color: var(--warning);
}

.date-day.is-today:not(.is-selected) {
    border-color: var(--primary);
    color: var(--primary);
}

.date-day.is-selected,
.date-day.is-selected:hover {
    color: #ffffff;
}

.date-actions {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

.combo-grid {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(260px, 420px) minmax(0, 1fr);
}

.combo-control {
    align-items: center;
    display: flex;
    position: relative;
}

.combo-control input {
    padding-right: 46px;
}

.combo-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    height: 100%;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 8px;
    top: 0;
    width: 34px;
}

.combo-toggle svg {
    display: block;
    height: 16px;
    width: 16px;
}

.combo-menu {
    margin-top: 6px;
    max-height: 380px;
    overflow-y: scroll;
    scrollbar-gutter: stable;
    width: 100%;
}

.combo-option {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    display: block;
    font: inherit;
    min-height: 38px;
    padding: 9px 12px;
    text-align: left;
    width: 100%;
}

.combo-option[hidden] {
    display: none;
}

.combo-option:hover,
.combo-option.is-highlighted {
    background: var(--primary-soft);
    color: var(--primary);
}

.positions-segment-combo {
    min-width: 0;
    position: relative;
}

.positions-segment-control input {
    overflow: hidden;
    text-overflow: ellipsis;
}

.positions-segment-menu {
    left: 0;
    max-height: 340px;
    max-width: var(--positions-segment-menu-max-width, calc(100vw - 32px));
    min-width: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    right: auto;
    top: 100%;
    width: max-content;
    z-index: 55;
}

.positions-segment-option {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    min-width: max-content;
    white-space: nowrap;
    width: 100%;
}

.positions-segment-option.is-selected {
    background: var(--primary-soft);
    color: var(--primary);
}

.positions-segment-option-path {
    display: inline-block;
    font-weight: 750;
}

.positions-segment-option-meta {
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.positions-segment-option mark {
    background: color-mix(in srgb, var(--primary) 18%, transparent);
    border-radius: 4px;
    color: inherit;
    padding: 0 2px;
}

.positions-segment-empty {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    padding: 12px;
    white-space: nowrap;
}

.positions-segment-empty.is-error {
    color: var(--danger);
}

.stat-list {
    display: grid;
    gap: 10px;
}

.stat-row {
    align-items: center;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: flex;
    justify-content: space-between;
    min-height: 42px;
    padding: 9px 11px;
}

.stat-row span {
    color: var(--muted);
    font-weight: 700;
}

.stat-row strong {
    font-size: 18px;
}

.progress {
    background: var(--surface-strong);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.progress span {
    background: var(--primary);
    display: block;
    height: 100%;
}

.progress-success span {
    background: var(--success);
}

.progress-running span {
    animation: progress-running-stripe 1.1s linear infinite;
    background: linear-gradient(90deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 72%, white) 50%, var(--primary) 100%);
    background-size: 180% 100%;
}

.progress-paused span {
    background: var(--warning);
}

.progress-idle span {
    background: var(--border-strong);
}

.progress-danger span {
    background: var(--danger);
}

@keyframes progress-running-stripe {
    from {
        background-position: 180% 0;
    }
    to {
        background-position: 0 0;
    }
}

@keyframes button-spinner {
    to {
        transform: rotate(360deg);
    }
}

.w-38 {
    width: 38%;
}

.swatch-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.swatch {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.swatch i {
    display: block;
    height: 48px;
}

.swatch span {
    display: block;
    font-size: 14px;
    font-weight: 800;
    padding: 9px 10px;
}

.line-palette-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.line-palette-card {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    display: grid;
    gap: 12px;
    padding: 14px;
}

.line-palette-card h3 {
    font-size: 16px;
    margin: 0;
}

.line-palette-swatches {
    display: grid;
    gap: 7px;
}

.line-palette-swatches span {
    align-items: center;
    background: var(--surface);
    border-radius: calc(var(--radius) - 2px);
    display: grid;
    gap: 8px;
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 30px;
    padding: 5px 7px;
}

.line-palette-swatches i {
    background: var(--line-color);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    display: block;
    height: 12px;
    width: 34px;
}

.line-palette-swatches b {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
    font-weight: 800;
}

.rule-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rule-card {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 0;
    display: grid;
    gap: 7px;
    padding: 14px;
}

.rule-card strong {
    font-size: 15px;
}

.rule-card span {
    color: var(--muted);
    line-height: 1.45;
}

.swatch-primary i {
    background: var(--primary);
}

.swatch-accent i {
    background: var(--accent);
}

.swatch-success i {
    background: var(--success);
}

.swatch-warning i {
    background: var(--warning);
}

.swatch-danger i {
    background: var(--danger);
}

.swatch-violet i {
    background: var(--violet);
}

.type-scale {
    display: grid;
    gap: 10px;
}

.type-scale div {
    align-items: baseline;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: 0;
    display: grid;
    gap: 14px;
    grid-template-columns: 48px minmax(0, 1fr);
    padding: 12px 14px;
}

.type-scale span {
    color: var(--muted);
    font-weight: 800;
}

.type-scale h1,
.type-scale h2,
.type-scale h3,
.type-scale h4,
.type-scale h5,
.type-scale h6 {
    margin-bottom: 0;
}

.sidebar-kit-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 320px minmax(0, 1fr);
}

.sidebar-demo {
    background: var(--sidebar);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius);
    color: var(--sidebar-text);
    display: grid;
    gap: 18px;
    padding: 16px;
}

.empty-state {
    display: grid;
    gap: 12px;
    justify-items: start;
    padding: 22px;
}

.empty-state strong {
    font-size: 18px;
}

.auth-body {
    display: grid;
    min-height: 100vh;
    padding: 24px;
    place-items: center;
}

.auth-panel {
    max-width: 380px;
    padding: 24px;
    width: 100%;
}

@media (max-width: 1120px) {
    .metrics-grid,
    .swatch-grid,
    .line-palette-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .toolbar,
    .filter-bar,
    .chart-range-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 920px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 0;
    }

    .section-grid,
    .field-grid,
    .toolbar,
    .filter-bar,
    .chart-range-bar,
    .sidebar-kit-grid,
    .combo-grid,
    .line-palette-grid,
    .rule-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .topbar-actions {
        flex-wrap: wrap;
    }

    .filter-bar[data-auto-submit] label:first-of-type {
        grid-column: auto;
    }

    .positions-query-detail-filter-bar > * {
        grid-column: auto;
    }
}

@media (max-width: 620px) {
    .content {
        padding: 18px;
    }

    .metrics-grid,
    .swatch-grid {
        grid-template-columns: 1fr;
    }

    .panel-header,
    .section-title {
        display: block;
    }

    .segment-tabbar {
        display: grid;
        justify-self: stretch;
        width: 100%;
    }

    .segment-tab {
        width: 100%;
    }
}