/* ============ Сброс и базовые стили ============ */
:root{
    /* фиксируем высоты трёх рядов шапки (под ваши размеры шрифтов/паддингов) */
    --h-row-names: 36px;   /* названия колонок */
    --h-row-filter: 34px;  /* инпуты фильтра */
    --h-row-units:  26px;  /* единицы измерения (можно 0px, если строки нет) */
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
    font-family:sans-serif;
    background:#f9f9f9;
    padding:20px;
    margin:0;
}
h1{ margin-bottom:16px; }

/* ============ Галерея ============ */
.config-gallery{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:1rem;
    padding:1rem;
    margin-bottom:2rem;
}
.config-gallery figure{
    margin:0; text-align:center; cursor:pointer;
    transition:transform .2s, box-shadow .2s;
}
.config-gallery img.config-thumb{
    width:100%; height:100px; object-fit:contain;
    border:1px solid #ddd; border-radius:4px; background:#fff;
}
.config-gallery figure:hover{ transform:translateY(-4px); box-shadow:0 4px 8px rgba(0,0,0,.1); }
.config-gallery figcaption{
    margin-top:.5rem; font-size:.9rem; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ============ Вспомогательные ============ */
.hidden{ display:none; }

/* ============ Таблица и прокрутка ============ */
/* контейнер таблицы — СКРОЛЛИТСЯ он, а не документ */
#tableWrapper{
    position:relative;
    overflow:auto;
    max-height:calc(100vh - 220px); /* подстройте под ваш макет */
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
}

/* важное условие для корректной работы position: sticky */
#tableWrapper table{
    width:100%;
    border-collapse:separate;  /* НЕ collapse */
    border-spacing:0;
    background:#fff;
    font-size:1rem;
    line-height:1.4;
}

/* общие ячейки */
#tableWrapper th,
#tableWrapper td{
    border:1px solid #ccc;
    padding:8px 12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* ============ Липкая трёхэтажная шапка ============ */
/* делаем весь THEAD липким и перекрывающим tbody */
#tableWrapper thead{ position:sticky; top:0; z-index:50; }

/* у шапочных TH — непрозрачный фон, чтобы цифры не “просвечивали” */
#tableWrapper thead th{
    position:sticky;
    background:#fff;
    box-shadow:0 2px 0 rgba(0,0,0,.06);
}

/* три строки thead — каждая на своём уровне */
#headerNames th{           /* 1-й ряд (названия) */
    top:0;
    z-index:53;
    height:var(--h-row-names);
    vertical-align:middle;
    font-weight:700;
    text-align:center;
    background:#f0f0f0;
}
#filterRow th{             /* 2-й ряд (фильтр) */
    top:var(--h-row-names);
    z-index:52;
    height:var(--h-row-filter);
    background:#f4f4f4;
    padding:4px 6px;
}
#filterRow th input{
    width:100%;
    padding:4px 6px;
    font-size:.9rem;
    border:1px solid #bbb;
    border-radius:3px;
}
/* 3-й ряд (единицы измерения) */
#headerUnits th{
    top:calc(var(--h-row-names) + var(--h-row-filter));
    z-index:51;
    height:var(--h-row-units);
    background:#f7f7f7;
}
#headerUnits.empty th{
    visibility:hidden; border:none; padding:0; height:0;
}

/* тело таблицы всегда ниже шапки */
#tableWrapper tbody td{ position:relative; z-index:1; }

/* Зебра-стрипы и ховер по строкам */
#tableWrapper tbody tr:nth-child(odd){ background:#fafafa; }
#tableWrapper tbody tr:hover{ background:#f5faff; }

/* Выравнивание чисел/текста */
.table td.num-cell{
    text-align:center;
    font-variant-numeric:tabular-nums;
    font-size:1.1rem;
}
.table td.text-cell{ text-align:left; }

/* Многострочные ячейки */
.multi-cell{ padding:0; }
.multi-cell .multi-line{
    display:block; padding:4px 8px; border-top:1px solid #e0e0e0; margin:0;
}
.multi-cell .multi-line:first-child{ border-top:none; }

/* Строка с деталями */
.detail-row td{
    background:#f9f9f9;
    padding:16px;
    border-top:none;
    text-align:left;
    font-size:1rem;
    line-height:1.5;
    color:#333;
}
.detail-row{ transition:all .2s ease; }

/* Ошибка фильтра */
input.error{ border:2px solid #e74c3c; background:#fee; }

/* ============ Карточки галереи ============ */
.config-item{
    position:relative;
    display:flex; flex-direction:column; align-items:center;
    width:140px;
    border:1px solid #ddd; border-radius:6px; padding:5px; margin-bottom:20px;
    transition:transform .2s ease, box-shadow .2s ease;
    background:#fff;
}
.draw-icon{
    position:absolute; top:6px; right:6px;
    background:rgba(255,255,255,.8); border-radius:50%; padding:4px;
    font-size:1.2em; cursor:pointer; transition:background .2s;
}
.draw-icon:hover{ background:#fff; }
.config-item .icon-bar{ margin-top:8px; display:flex; gap:8px; }
.config-item .icon-btn{
    background:#007bff; color:#fff; border:none; padding:6px 12px; font-size:.9rem; border-radius:4px; cursor:pointer;
    transition:background .2s;
}
.config-item .icon-btn:hover{ background:#0056b3; }
.config-item .config-thumb{ width:120px; height:90px; object-fit:contain; display:block; }
.config-item img{ display:block; max-width:100%; }
.config-item:hover{ transform:scale(1.05); }

/* Кнопки в деталях */
.btn-draw-detail{
    margin-top:.5rem; padding:6px 12px; background:#555; color:#fff; border:none; border-radius:4px; cursor:pointer;
}
.btn-draw-detail:hover{ background:#777; }
.btn-3d-detail{
    margin-top:.5rem; padding:6px 12px; background:#17a2b8; color:#fff; border:none; border-radius:4px; cursor:pointer;
}
.btn-3d-detail:hover{ background:#138496; }

/* ============ Header / Auth / Toolbar ============ */
.btn-logout{
    font-size:1em; text-decoration:none; padding:.5em 1em; border:1px solid #333; border-radius:4px; background:#fff; transition:background .2s;
}
.btn-logout:hover{ background:#f0f0f0; }

header{
    display:flex; justify-content:space-between; align-items:center;
    padding:1rem; background:#f8f9fa; border-bottom:1px solid #ddd;
}

#configGallery.config-gallery{ display:flex; flex-direction:column; gap:12px; }
.gallery-row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; }

#couplingDescription{
    margin-top:20px; padding:1rem; border:1px solid #ddd; background:#fafafa;
}

#couplingDescription > * {
    margin-left: 15px;
}

/* HERO */
.hero{
    display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:center;
    background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:16px; margin:12px 0 20px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.hero-media {
    height: 300px; /* или 400px, по вкусу */
}

.hero-media img {
    width: 100%;
    height: 100%;        /* теперь подгоняется под родительский блок */
    object-fit: cover;   /* не даст искажаться */
    border-radius: 12px;
    border: 1px solid #f0f0f0;
    background: #fafafa;
}
.hero-content h2{ margin:0 0 4px; font-size:22px; }
.hero-sub{ margin:0 0 10px; color:#6b7280; }
.hero-content p{ margin:0 0 10px; line-height:1.5; }
.hero-facts{
    display:grid; grid-template-columns:repeat(2,minmax(200px,1fr));
    gap:6px 16px; margin:8px 0 10px; padding:0; list-style:none;
}
.hero-facts li{ margin:0; }
.hero-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.badge{
    display:inline-block; padding:6px 10px; font-size:12px; border:1px solid #e5e7eb; border-radius:9999px; background:#f9fafb;
}
@media (max-width:980px){
    .hero{ grid-template-columns:1fr; }
    .hero-media img{ max-height:220px; }
    .hero-facts{ grid-template-columns:1fr; }
}
.btn-ds{ padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; }
.btn-ds.is-active{ border-color:#111827; background:#111827; color:#fff; }

td.multi-cell .multi-line{ margin-top:4px; padding-top:4px; border-top:1px solid rgba(0,0,0,.1); }
td.stack .cell-line:not(:last-child){ border-bottom:1px solid #eee; }

/* панель кнопок в описании */
#couplingDescription .desc-actions{
    margin-top:8px; display:flex; gap:8px; flex-wrap:wrap;
}
#couplingDescription .btn-desc-drawing{
    padding:6px 12px; background:#111; color:#fff; border:1px solid #111; border-radius:8px; cursor:pointer; font:inherit;
}
#couplingDescription .btn-desc-drawing:hover{ background:#333; }

/* Viewer */
.dwg-viewer{
    position:relative; border:1px solid #e5e7eb; border-radius:12px; overflow:auto; background:transparent;
    padding:8px; width:100%; min-height:260px; max-height:70vh; margin-bottom:12px; margin-top:16px;
}
.dwg-scaler{ position:relative; width:0; height:0; }
.dwg-stage{
    display:block; transform-origin:0 0; background:#fff; border:1px solid #ddd;
}
.dwg-controls{
    position:absolute; top:8px; left:8px; display:inline-flex; gap:6px; align-items:center; z-index:5;
}
.dwg-btn{ padding:4px 8px; border:1px solid #d1d5db; background:#fff; border-radius:6px; cursor:pointer; }
.dwg-zoomval{ font:12px/1.2 system-ui,-apple-system,Arial,sans-serif; padding:2px 6px; border:1px solid #e5e7eb; border-radius:6px; background:#f9fafb; }

/* Auth */
.auth-btn{
    background:#2563eb; color:#fff; border:none; padding:10px 20px; border-radius:8px;
    font-size:15px; font-weight:600; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.15);
    transition:background .2s, transform .1s;
}
.auth-btn:hover{ background:#1e40af; transform:translateY(-2px); }
.auth-btn:active{ transform:translateY(0); }
.brand{ font-size:25px; font-weight:600; }


/* ===== Язык / Language — компактно, НЕ фиксируется, уводим вправо ===== */
.lang-toolbar{
    position: relative;        /* было fixed → теперь не «прилипает» при прокрутке */
    top: 10px;
    margin-right: 35px;              /* оставляем место для кнопки "Войти" справа */
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 6px;

    padding: 4px 6px;          /* компактнее */
    font-size: 13px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    backdrop-filter: blur(4px);
}

.lang-toolbar { transform: translateY(2px); } /* вниз на 2px */

.lang-toolbar .lang-label{ color:#4b5563; font-weight:500; white-space:nowrap; }

.lang-toolbar .btn-ds{
    padding: 3px 9px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background:#fff;
    color:#111827;
    line-height:1;
    cursor:pointer;
}

.lang-toolbar .btn-ds.is-active{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
    box-shadow:0 0 0 2px rgba(37,99,235,.15) inset;
}

/* На средних и узких — ещё правее и без подписи, чтобы точно не задевать "Разделы" */
@media (max-width: 1024px){
    .lang-toolbar{ right: 12px; }      /* максимально вправо */
}
@media (max-width: 640px){
    .lang-toolbar{ right:12px; top:12px; padding:3px 5px; font-size:12px; }
    .lang-toolbar .lang-label{ display:none; }
}

/* чтобы 10^n выглядело аккуратно и не рвал межстрочный интервал */
.text-cell sup,
.num-cell sup {
    font-size: 0.8em;
    line-height: 0;
    vertical-align: super;
}

/* === HPT Header — финальная выровненная версия === */

html, body {
    margin: 0;
    padding: 0;
    background-color: #f9fafb;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #d80100;
    color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    height: 76px;
}

body {
    padding-top: 90px;
}

/* Контейнер без лого — только центр и право */
.site-header .header-inner {
    /*   flex ?????? */
    display: flex;
    justify-content: space-between;
    grid-template-columns: 1fr auto; /* центр | право */
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 24px;
    column-gap: 16px;
}

/* === ЛОГО фиксировано слева === */
.site-header .logo {
    position: fixed;
    left: 16px; /* ← вручную регулируй расстояние от края */
    top: 10px; /* ↑ подстройка по вертикали */
    z-index: 1101;
}
.site-header .logo img {
    height: 58px; /* масштаб логотипа */
    width: auto;
    display: block;
}

/* === Центр (контакты) === */
.site-header .contact-info {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 20px; /* ← здесь регулируй отступ между HPT и номером */
    white-space: nowrap;
    font-size: 15px;
}
.site-header .contact-info a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: .2px;
    opacity: .95;
    transition: opacity .15s ease;
}
.site-header .contact-info a:hover {
    opacity: 1;
    text-decoration: underline;
}

/* === Правый блок (языки + вход) === */
/* --- ПРИЖАТЬ "язык + Войти" К ПРАВОМУ КРАЮ ЭКРАНА --- */
.site-header .right-side{
    position: fixed;   /* как у лого */
    right: 16px;       /* ← ручной отступ от правого края */
    top: 22px;         /* ↑ подстройка по вертикали, как у лого */
    z-index: 1101;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 0;  /* чтобы ничего не тянуло внутрь */
}

.site-header .lang-label {
    color: #fff;
    opacity: .9;
    font-size: 13px;
}

/* === Кнопки === */
.site-header .btn-ds,
.site-header .auth-btn {
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.1);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease;
}
.site-header .btn-ds.is-active {
    background: #fff;
    color: #111;
}
.site-header .btn-ds:hover,
.site-header .auth-btn:hover {
    background: rgba(255,255,255,.25);
}

/* === Адаптив === */
@media (max-width: 720px) {
    .site-header { height: 68px; }
    .site-header .logo img { height: 48px; }
    .site-header .right-side { padding-right: 16px; }
    .site-header .contact-info { font-size: 13px; gap: 12px; }
}


/* ===== Базовые переменные (если нет) ===== */
:root {
    --header-h: 76px;          /* текущая высота хедера */
    --brand-red: #d80100;
}

/* ===== Гамбургер по умолчанию скрыт ===== */
.header-menu {
    display: none;
    appearance: none;
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.1);
    color: #fff;
    width: 40px;
    height: 34px;
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.header-menu:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.header-menu .menu-bars,
.header-menu .menu-bars::before,
.header-menu .menu-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    content: "";
    position: relative;
}
.header-menu .menu-bars::before { top: -5px; position: relative; }
.header-menu .menu-bars::after  { top:  3px; position: relative; }

:root{
    --header-h: 76px;
    --brand-red:#d80100;
}

/* ========== Гамбургер ========== */
.header-menu{
    display:none;
    appearance:none;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(255,255,255,.10);
    color:#fff;
    width:40px;height:34px;
    border-radius:8px;
    cursor:pointer;
    align-items:center;justify-content:center;
    padding:0;
}
.header-menu:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.header-menu .menu-bars,
.header-menu .menu-bars::before,
.header-menu .menu-bars::after{
    display:block;width:18px;height:2px;background:currentColor;border-radius:2px;content:"";
    position:relative;
}
.header-menu .menu-bars::before{top:-5px;}
.header-menu .menu-bars::after{ top: 3px;}

/* ========== Мобильная панель ========== */
.mobile-panel{
    position:fixed;
    top:calc(var(--header-h) + 8px);
    right:12px;
    width:280px;max-width:calc(100vw - 24px);
    background:#fff;color:#111;border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    z-index:1200;padding:12px;
}
.mobile-panel__group + .mobile-panel__group{margin-top:12px;}
.mobile-link{
    display:block;padding:10px 12px;border:1px solid #e5e7eb;border-radius:10px;
    text-decoration:none;color:#111;font-weight:600;margin-bottom:8px;
}
.mobile-link:hover{background:#f5f6f8;}
.mobile-lang{display:grid;gap:8px;}
.mobile-lang__label{color:#374151;font-size:13px;}
.mobile-lang__buttons{display:flex;gap:8px;}
.mobile-lang__buttons .btn-ds {
    flex: 1 1 0;           /* две равные половинки */
    min-width: 0;          /* не выламываться по длине текста */
    padding: 10px 0;
    border-radius: 10px;
    border: 1px solid var(--brand-red);
    background: #fff;      /* НЕАКТИВНАЯ — белая */
    color: #111;
    font-weight: 600;
}
.mobile-lang__buttons .btn-ds.is-active {
    background: var(--brand-red);
    color: #fff;
    border-color: var(--brand-red);
}

/* Подложка */
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:1100;}

/* ========== Мобильная логика ========== */
@media (max-width:820px){
    /* скрываем центр и desktop-языки в шапке */
    .site-header .contact-info{display:none !important;}
    .site-header .dataset-toolbar{display:none !important;}

    /* справа: Войти + гамбургер; языков в хедере нет */
    .site-header .right-side{
        margin-left:auto;display:flex;align-items:center;gap:8px;
    }
    .site-header .auth-btn{order:1;}
    .site-header .header-menu{order:2;display:inline-flex;}

    /* высота и небольшой отступ контента от шапки */
    .site-header{height:var(--header-h);}
    body{padding-top:var(--header-h);}
    main,.page,.content,#app{padding-top:8px;}
}

/* no-scroll для body, когда панель открыта */
.no-scroll{position:fixed;overflow:hidden;width:100%;}




/***** =========================================
 *  A) Компактный режим и базовые таблицы
 *  ========================================= */
#tableWrapper .table { font-size: 12px; } /* общий размер шрифта */
#tableWrapper th,
#tableWrapper td {
    padding: 3px 6px !important; /* меньше внутренние отступы */
}

/* Заголовкам разрешаем перенос, чтобы не тянули ширину */
#tableWrapper thead th {
    white-space: normal !important;
    line-height: 1.2;
    word-break: break-word;
}

/* Базовая таблица */
table {
    border-collapse: collapse;
    font-size: 13px;      /* единый размер текста */
    width: 100%;
}

th, td {
    padding: 4px 6px;
    border: 1px solid #ddd;
    vertical-align: middle;
    font-size: 13px;                 /* единый размер шрифта */
    font-family: "Inter", Arial, sans-serif;
    line-height: 1.3;                /* для многострочных строк */
    white-space: pre-line;
}

/* Опционально — ограничение ширины ячеек (чтобы не расползались) */
table th, table td {
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/***** =========================================
 *  B) Handsontable / выравнивание по центру
 *  ========================================= */
.handsontable .htCore td,
.handsontable .htCore th,
.handsontable .htCore td * {
    text-align: center !important;
    vertical-align: middle !important;
    justify-content: center !important;
}

/* Конкретные колонки по центру (nxɸd и др.) */
th:nth-child(13), td:nth-child(13),
th:nth-child(1),  td:nth-child(1),
th:nth-child(4),  td:nth-child(4) {
    text-align: center !important;
}

/***** =========================================
 *  C) Равномерное распределение ширин и инпуты в шапке
 *  ========================================= */
.hot .htCore,                 /* Handsontable */
.table-tight, #dataTable {    /* твоя таблица */
    table-layout: fixed;
    width: 100%;
}

/* Разрешаем ужиматься инпутам в шапке */
.hot thead input,
#dataTable thead input {
    width: 100%;
    min-width: 0;               /* критично — снять «жёсткий минимум» */
    box-sizing: border-box;
    padding: 2px 4px;
    font-size: 11px;
}
#dataTable thead input::placeholder { font-size: 10px; }

/***** =========================================
 *  D) Ширины по колонкам (индивидуально)
 *  ========================================= */
/* Примеры принудительных ширин (1..17) */
#dataTable th:nth-child(1),  #dataTable td:nth-child(1)  { width: 80px; }  /* Type */
#dataTable th:nth-child(2),  #dataTable td:nth-child(2)  { width: 65px; }  /* Nominal torque */
#dataTable th:nth-child(3),  #dataTable td:nth-child(3)  { width: 100px; } /* Speed */
#dataTable th:nth-child(4),  #dataTable td:nth-child(4)  { width: 110px; } /* Shaft hole Ø */
#dataTable th:nth-child(5),  #dataTable td:nth-child(5)  { width: 90px; }  /* Shaft hole L */
#dataTable th:nth-child(6),  #dataTable td:nth-child(6)  { width: 60px; }  /* D */
#dataTable th:nth-child(7),  #dataTable td:nth-child(7)  { width: 60px; }  /* D1 */
#dataTable th:nth-child(8),  #dataTable td:nth-child(8)  { width: 60px; }  /* D2 */
#dataTable th:nth-child(9),  #dataTable td:nth-child(9)  { width: 50px; }  /* C */
#dataTable th:nth-child(10), #dataTable td:nth-child(10) { width: 45px; }  /* h */
#dataTable th:nth-child(11), #dataTable td:nth-child(11) { width: 50px; }  /* A */
#dataTable th:nth-child(12), #dataTable td:nth-child(12) { width: 50px; }  /* B */
#dataTable th:nth-child(13), #dataTable td:nth-child(13) { width: 50px; }
#dataTable th:nth-child(14), #dataTable td:nth-child(14) { width: 50px; }
#dataTable th:nth-child(15), #dataTable td:nth-child(15) { width: 50px; }
#dataTable th:nth-child(16), #dataTable td:nth-child(16) { width: 50px; }
#dataTable th:nth-child(17), #dataTable td:nth-child(17) { width: 50px; }

/* Дополнительные уточнения к 2/3/4-й колонке — оставить как есть */
#dataTable th:nth-child(2),  #dataTable td:nth-child(2)  { width: 66px; }
#dataTable th:nth-child(3),  #dataTable td:nth-child(3)  { width: 66px; }
#dataTable th:nth-child(4),  #dataTable td:nth-child(4)  { width: 66px; }

/* Хвост таблицы (с конца): Moment…, Increase…, Mass, Price */
#dataTable thead th { white-space: normal; line-height: 1.2; word-break: break-word; }
#dataTable :is(th, td):nth-last-child(5) { width: 80px; }  /* Lmin */
#dataTable :is(th, td):nth-last-child(4) { width: 72px; }  /* Increase 100mm */
#dataTable :is(th, td):nth-last-child(3) { width: 72px; }  /* Mass m/kg */
#dataTable :is(th, td):nth-last-child(2) { width: 66px; }  /* Mass (вариант/повтор) */
#dataTable :is(th, td):last-child        { width: 66px; }  /* Price, CNY */

/***** =========================================
 *  E) Компактность + ровные цифры (ещё раз для надёжности)
 *  ========================================= */
#dataTable th, #dataTable td {
    padding: 3px 4px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    text-align: center;  /* по умолчанию центр */
}

/***** =========================================
 *  F) Выравнивание описательной колонки и расширение nxɸd
 *  ========================================= */
/* Описательная колонка — строго слева */
#dataTable th:first-child,
#dataTable td:first-child {
    text-align: left !important;
    padding-left: 8px;
}

/* Чуть шире для блоков с nxɸd (10–13) */
#dataTable :is(th, td):nth-child(10),
#dataTable :is(th, td):nth-child(11),
#dataTable :is(th, td):nth-child(12),
#dataTable :is(th, td):nth-child(13) {
    min-width: 90px;  /* подстройка: 85–100 */
    max-width: 200px;
    white-space: nowrap;
}

/* Для корректного отображения степеней в описании */
#couplingDescription sup {
    font-size: 0.8em;
    vertical-align: super;
}



.auth-btn {
    background: #111827;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background 0.2s ease;
}

.auth-btn:hover {
    background: #0b57d0;
}