:root {
    --bg: #0b111a;
    --bg-card: #101722;
    --text: #f3f3f3;
    --muted: #98a2b3;
    --border: #1e293b;
    --accent: #2563eb;
    --pager: #3b82f6;
    --pager_color:#fff;
    --accent-hover: #1d4ed8;
    --danger: #dc2626;
    --radius: 12px;
    --font: 'Manrope', sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    height: 100%;
}

body{
    display: grid;
    grid-template-rows:auto 1fr auto;
    min-height: 100vh;
    overflow:hidden;
}

.layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    height: 125%;
    min-height: 0;
}

.content {
    padding:16px 12px;
    min-height: 0;
}

.sidebar {
    background:#0d141f;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.sidebar .brand { font-weight:700; margin-bottom:8px; }
.sidebar a {
    display:block; padding:10px 12px; border-radius:10px;
    text-decoration:none; color:var(--text); border:1px solid transparent;
}
.sidebar a.active {
    border-color:var(--border);
    background: var(--accent);
}

.topbar {
    display:flex; align-items:center; gap:12px; padding:10px 16px;
    background:#0d141f; border-bottom:1px solid var(--border);
}
.spacer { flex:1; }

.page{
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.header{ height: 64px; flex: 0 0 auto; }
.footer{ height: 0;    flex: 0 0 auto; margin-bottom: 25px} /* если нужен */

.main{
    flex: 1 1 auto;      /* занимаем остаток высоты */
    display: grid;
    place-items: stretch;
    padding: 16px;
}

.card{
    min-height: 22rem;
    max-height: 84rem;
    height: 100%;        /* займёт всю доступную высоту .main */
    overflow: auto;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font: inherit;
    font-weight: 600;
    border-radius: var(--radius);
    padding: 10px 14px;
    cursor: pointer;
    border: none;
    background: var(--accent);
    color: #fff;
}
.btn:hover { background: var(--accent-hover); }
.btn.secondary { background: #334155; color: var(--text); }
.btn.outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.btn.outline:hover { background: #111a28; }

.form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.form-row label {
    font-size: 13px;
    color: var(--muted);
}
input, select {
    background: #111827;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
    font: inherit;
    color: var(--text);
    /*white-space: normal;*/
    white-space: normal;
    overflow-wrap: anywhere;

}

option {
    white-space: normal;
    overflow-wrap: anywhere;
}

input:focus, select:focus {
    outline: none;
    border-color: var(--accent);
}

.row { display: flex; gap: 12px; }

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}
.table th, .table td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: left;
}
.table th {
    background: #1e293b;
    font-weight: 600;
}
.table tr:nth-child(even) { background: #0f172a; }

.table-scroll {
    width: 100%;
    border-collapse: collapse;
    /*margin-top: 12px;*/
}
.table-scroll td  {
    border: 1px solid var(--border);
    /*padding: 8px 12px;*/
    text-align: left;

    padding: 8px 24px 8px 12px;
    /*vertical-align: top;*/


}
.table-scroll th {
    text-align: left;

    padding: 8px 24px 8px 12px;
    background: #1e293b;
    font-weight: 600;
    border: none;

    /*text-align: left;*/
    /*border: 1px solid var(--border);*/
    /*padding: 8px 24px 8px 12px;*/

    /*background: #1e293b;*/
    /*font-weight: 600;*/
    /*position: sticky;*/
    /*top: 0;*/
}
.table-scroll tr:nth-child(even) { background: #0f172a; }


.footer {
    text-align: center;
    padding: 12px;
    font-size: 13px;
    color: var(--muted);
}

.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #334155;
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius);
    font-size: 14px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.btn_new{
    margin-left: 20px;
}




/*описание для чекбоксов*/


:root{
    --bg-2:#111827;      /* фон карточки */
    --bd-1:#233047;      /* бордер */
    --txt-1:#e5e7eb;     /* основной текст */
    --txt-2:#9aa4b2;     /* вторичный */
    --accent:#3b82f6;    /* синий */
    --accent-2:#93c5fd;  /* светло-синий */
}

.label{
    display:block;
    margin:8px 0 6px;
    color:var(--txt-1);
    /*color: #dc2626;*/
    font-weight:600;
}

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

.cb-pill{
    display:flex; align-items:center; gap:10px;
    padding:4px 8px;
    /*border:1px solid var(--bd-1);*/
    /*border-radius:12px;*/
    background:var(--bg-2);
    color:var(--txt-1);
    cursor:pointer;
    user-select:none;
    transition: border-color .15s, background .15s;
}

.cb-pill:hover{ border-color:var(--accent); }
/*.cb-pill:focus-within{ box-shadow:0 0 0 3px rgba(59,130,246,.25); }*/

.cb-pill input[type="checkbox"]{
    appearance:none;
    width:18px; height:18px;
    border:1.5px solid var(--bd-1);
    border-radius:4px;
    display:inline-grid; place-content:center;
    background:transparent;
    transition: background .15s, border-color .15s;
}



.cb-pill input[type="checkbox"]:hover{
    border-color:var(--accent);
}
.cb-pill input[type="checkbox"]:checked{
    border-color:var(--accent);
    background:var(--accent);
}
.cb-pill input[type="checkbox"]:checked::after{
    content:"";
    width:10px; height:10px;
    background:#0b1220; /* тёмная галка внутри */
    border-radius:2px;
}



.cb-pill span{
    line-height:1;
    color:var(--txt-1);

}

 /*disabled-состояние, если понадобится */
.cb-pill input[disabled]{
    opacity:.5; cursor:not-allowed;
}
.cb-pill input[disabled] + span{
    color:var(--txt-2);
}

th.sort{
    position:relative;
    cursor:pointer;
    user-select:none;
    padding-right:24px; /* место под стрелку */
}

/* базовые “бледные” стрелки, когда сортировка выключена */
th.sort::before,
th.sort::after{
    content:"";
    position:absolute; right:8px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
    opacity:.35; transition:opacity .15s;
}
th.sort::before{ /* вверх */
    top:45%;
    border-bottom:6px solid currentColor;
    transform: translateY(-6px);
}
th.sort::after{  /* вниз */
    top:55%;
    border-top:6px solid currentColor;
    transform: translateY(6px);
}

/* активное состояние — оставляем одну яркой */
th.sort[aria-sort="ascending"]::before{ opacity:1; }
th.sort[aria-sort="ascending"]::after{  opacity:.15; }

th.sort[aria-sort="descending"]::after{  opacity:1; }
th.sort[aria-sort="descending"]::before{ opacity:.15; }

/* hover-подсветка */
th.sort:hover::before,
th.sort:hover::after{ opacity:.6; }


/* ===== Light theme overrides ===== */
:root[data-theme="light"] {
    --bg: #f7f8fa;
    --bg-card: #ffffff;
    --text: #0b1220;
    --muted: #475569;
    --border: #d4d8e1;
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --pager: #2563eb;
    --pager_color: #ffffff;
}

:root[data-theme="light"] .sidebar {
    background: #eef2f7;
    border-right: 1px solid var(--border);
}
:root[data-theme="light"] .sidebar a.active {
    --text: #fff;
    background: var(--accent);
    border-right: 1px solid var(--accent);
}

:root[data-theme="light"] .sidebar a.active:hover {
    background: var(--border);
    border-right: 1px solid var(--border);
}

:root[data-theme="light"] .topbar {
    background: #eef2f7;
    border-bottom: 1px solid var(--border);
}
:root[data-theme="light"] .table th {
    background: #e6edf7;
}
:root[data-theme="light"] .table tr:nth-child(even) {
    background: #f2f5fa;
}

:root[data-theme="light"] .table-scroll th {
    background: #e6edf7;
}
:root[data-theme="light"] .table-scroll tr:nth-child(even) {
    background: #f2f5fa;
}

:root[data-theme="light"] input,
:root[data-theme="light"] select {
    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--border);
}
:root[data-theme="light"]  .btn.secondary {
    --text: #fff;
    background: var(--accent);
    color: var(--text);
}

:root[data-theme="light"]  .btn.secondary a.active {
    --text: #fff;
    background: var(--muted);
    color: var(--text);
}

:root[data-theme="light"] .btn.outline {
    background: #ffffff;
    border: 1px solid var(--border);
    color: var(--text);
}

:root[data-theme="light"] .cb-pill {
    background: #ffffff;
    color: var(--text);
    /*border: 1px solid var(--border);*/
    border: none;
}

:root[data-theme="light"] .cb-pill span{
    /*background: #f2f5fa;*/
    color: var(--text);
    /*border: 1px solid var(--border);*/
    /*border: none;*/
}

:root[data-theme="light"] .cb-pill input[type="checkbox"]:checked::after{
    background:#ffffff;
}


/*#sel select[name="f_group"] option[value="all_groups"]{*/
/*    display:none;*/
/*}*/

/*:root[data-theme="light"] .btn.outline a.active {*/
/*    background: #dc2626;*/
/*    border: 1px solid var(--border);*/
/*    color: var(--text);*/
/*}*/

* {
    transition: background-color .15s linear, color .15s linear, border-color .15s linear;
}


  .table-logs {
      table-layout: fixed;                /* чтобы ширины столбцов были фикс и не прыгали */
      width: 100%;
      border-collapse: collapse;
  }


.table-logs td {
    border: 1px solid var(--border);
    /*padding: 8px 12px;*/
    text-align: left;
}
.table-logs th {
    border: none;
    text-align: left;
    background: #1e293b;
    font-weight: 600;
}

.table-logs th:nth-child(1){
    width: 220px;
}

.table-logs tr:nth-child(even) { background: #0f172a; }

:root[data-theme="light"] .table-logs th {
    background: #e6edf7;
}
:root[data-theme="light"] .table-logs tr:nth-child(even) {
    background: #f2f5fa;
}

.table-logs th,
.table-logs td {
    /*padding: 8px 24px 8px 12px;*/
    padding: 4px;
    vertical-align: center;
    /*max-width: 0;                       !* вместе с table-layout: fixed даёт ужимание *!*/
    max-height: 0;
    white-space: normal;                /* разрешаем переносы */
    overflow-wrap: anywhere;            /* переносим даже “склеенные” токены */
    word-break: break-word;             /* fallback */
}

.table-logs td {
    max-width: 0;                       /* вместе с table-layout: fixed даёт ужимание */

}

.presum {
    white-space: normal;                /* разрешаем переносы */
    overflow-wrap: anywhere;            /* переносим даже “склеенные” токены */
    word-break: break-word;
}

/*.table-logs td.mono {*/
/*    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;*/
/*}*/

/* аккуратное превью на 4 строки */
.table-logs .clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;              /* сколько строк показывать */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* когда раскрыто */
.table-logs .clamp.expanded {
    -webkit-line-clamp: unset;
    max-height: none;
}

/* кнопка “раскрыть” */
.table-logs .toggle {
    display: inline-block;
    margin-top: 4px;
    cursor: pointer;
    opacity: .8;
    font-size: 12px;
    text-decoration: underline;
}

.mod-row {

    display:flex;
    align-items:center;
    /*justify-content:space-between;*/
    padding:8px 12px;
    border-radius:10px;

    margin-bottom:4px;

    /*background: #111827;*/

    border:1px solid #2a2f3a;

    background: #111827;
    color: var(--text);

    color:var(--text);
}

.mod-row:focus{
    outline: none; border-color: var(--accent);
}

:root[data-theme="light"] .mod-row {

    display:flex;
    align-items:center;
    /*justify-content:space-between;*/
    padding:8px 12px;
    border-radius:10px;

    margin-bottom:4px;

    /*background: #111827;*/
    border:1px solid var(--border);

    /*border:none;*/
    background: #ffffff;
    color: var(--text);

}

/*.mod-cell {*/
/*    display:flex;*/
/*    align-items:center;*/
/*    gap:8px;*/
/*}*/

/*.mod-cell.small span {*/
/*    font-size:12px;*/
/*    opacity:.9;*/
/*}*/

.mod-row:focus-within {
    outline:3px solid #4aa3ff44;
}

/* --- Комбо-бокс в th --- */
.th-has-filter { position: relative; }
.th-inner { display:flex; align-items:center; gap:8px; }
.th-title { user-select:none;  }

.th-has-filter:hover .label-with-arrow::after {  opacity:.8; }

.th-filter-btn{
    font: inherit;
    border: 1px solid var(--border, #d0d7de);
    /*background: var(--bg, #fff);*/
    background: #1e293b;
    color: var(--text);
    padding: 8px 24px 8px 12px;
    border-radius: 6px;
    line-height: 1.6;
    cursor: pointer;
    white-space: nowrap;
}

.th-filter-btn:hover{
    background:  #f6f8fa;
}

/*.th-dropdown{*/
/*    position: absolute;*/
/*    top: calc(100% + 6px);*/
/*    left: 0;*/
/*    z-index: 50;*/
/*    min-width: 140px;*/
/*    border: 1px solid var(--border, #d0d7de);*/
/*    !*background: var(--bg, #fff);*!*/
/*    background: #1e293b;*/

/*    border-radius: 8px;*/
/*    box-shadow: 0 6px 24px rgba(0,0,0,.08);*/
/*    padding: 6px;*/
/*    overflow-y: auto;*/
/*}*/

.th-option{
    color: var(--text);
    display:block;
    width:100%;
    text-align:left;
    border:0;
    background:transparent;
    padding:6px 8px;
    border-radius:6px;
    cursor:pointer;
    font: inherit;
}
.th-option:hover{
    background: #f6f8fa;
}

/* === Dropdown (logs filters) theme tokens === */
:root {
    --dd-btn-bg: #1e293b;           /* фон кнопки фильтра (dark) */
    --dd-bg:     #1e293b;           /* фон выпадашки (dark) */
    --dd-hover:  #243041;           /* hover в тёмной */
    --dd-border: var(--border);
    --dd-shadow: 0 6px 24px rgba(0,0,0,.18);
}

:root[data-theme="light"] {
    --dd-btn-bg: #ffffff;           /* фон кнопки фильтра (light) */
    --dd-bg:     #ffffff;           /* фон выпадашки (light) */
    --dd-hover:  #eef2f7;           /* hover в светлой */
    --dd-border: #d4d8e1;
    --dd-shadow: 0 6px 24px rgba(0,0,0,.06);
}

/* === Apply tokens to controls === */
.th-filter-btn{
    font: inherit;
    border: 1px solid var(--dd-border);
    background: var(--dd-btn-bg);
    color: var(--text);
    /*padding: 2px 8px;*/
    border-radius: 6px;
    line-height: 1.6;
    cursor: pointer;
    white-space: nowrap;
}
.th-filter-btn:hover{ background: var(--dd-hover); }

.th-dropdown{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    /*z-index: 50;*/
    min-width: 140px;
    border: 1px solid var(--dd-border);
    background: var(--dd-bg);
    border-radius: 8px;
    box-shadow: var(--dd-shadow);
    padding: 6px;
    /*overflow-y: auto;*/
    /*overscroll-behavior: contain;*/
}



/*это что бы родитель не резал  меню с группами*/
.th, .th-has-filter {
    overflow: visible !important;
}

.th-option{
    color: var(--text);
    display:block;
    width:100%;
    text-align:left;
    border:0;
    background:transparent;
    padding:6px 8px;
    border-radius:6px;
    cursor:pointer;
    font: inherit;
}
.th-option:hover{ background: var(--dd-hover); }


.select-compact {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*popup*/
.modal { position: fixed; inset: 0; display: none; }
.modal[aria-hidden="false"] { display: block; }

.modal__backdrop{
    position: absolute; inset: 0;
    background: rgba(0,0,0,.55);
}

.modal__dialog{
    position: relative;
    width: min(640px, 92vw);
    margin: 10vh auto 0;
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    max-height: 85vh;
    overflow: auto;
}

.modal__header,
.modal__footer{
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    border-color: var(--border);
}
.modal__header{ justify-content: space-between; border-bottom: 1px solid var(--border); }
.modal__footer{ justify-content: flex-end;    border-top:    1px solid var(--border); }

.modal__body{ padding: 16px; }

.modal__title{
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}


.modal__close{
    border: 0; background: transparent;
    font-size: 20px; line-height: 1;
    color: var(--text);
    cursor: pointer; padding: 4px 8px;
    border-radius: calc(var(--radius) - 4px);
}
.modal__close:hover{ background: rgba(255,255,255,.06); }

.logs__close{
    border: 0; background: transparent;
    font-size: 20px; line-height: 1;
    color: var(--text);
    cursor: pointer;
    /*padding: 4px 4px;*/
    border-radius: calc(var(--radius) - 4px);
}


.modal .form-row { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.modal .form-row label{ font-size:13px; color: var(--muted); }
.modal input,
.modal select{
    background: #111827;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px; color: var(--text); font: inherit;
    white-space: normal; overflow-wrap: anywhere;
}
.modal input:focus,
.modal select:focus{ outline: none; border-color: var(--accent); }

:root[data-theme="light"] .modal__backdrop{
    background: rgba(0, 0, 0, .35);
}

:root[data-theme="light"] .modal__dialog{
    background: var(--bg-card);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .08);
}

:root[data-theme="light"] .modal__header,
:root[data-theme="light"] .modal__footer{
    border-color: var(--border);
}

:root[data-theme="light"] .modal__close{
    color: var(--text);
}
:root[data-theme="light"] .modal__close:hover{
    background: rgba(0, 0, 0, .06);
}

.pager__link[aria-current="page"],
.pager__link.is-active{
    pointer-events: none;
    cursor: default;
    /*border-color: var(--accent);*/
    background: var(--pager);
    color: var(--pager_color);
    /*box-shadow: 0 0 0 3px rgba(37,99,235,.2);*/
    /*font-weight: 700;*/
}
.pager__ellipsis{ pointer-events: none; opacity:.7; }

:root[data-theme="light"] .pager__link.is-active{
    pointer-events: none;
    cursor: default;
    /*border-color: var(--accent);*/
    background: var(--accent);
    color: var(--pager_color);
    /*box-shadow: 0 0 0 3px rgba(37,99,235,.2);*/
    /*font-weight: 700;*/
}


.table-wrap2 {
    flex:1;
    display: flex;
    flex-direction: column;

    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;

    /*height: 750px;         !* нужная высота видимой области  770 *!*/
    height: 80vh;



    overflow-y: auto;          /* скроллим только содержимое */
    /*min-height: 140px;*/
    /*overscroll-behavior: contain;*/
    /*overflow-scrolling: ;*/
    /*border: 1px solid var(--border);*/
    /*border-radius: var(--radius);*/
    font-size: 14px;
}

.table-wrap {
    flex:1;
    display: flex;
    flex-direction: column;

    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;

    height: 70vh;
    overflow-y: auto;          /* скроллим только содержимое */
    font-size: 14px;

}

/*!* фикс шапки *!*/
.table-logs  th{
    text-align: left;
    border: 1px solid var(--border);

    background: #1e293b;
    /*font-weight: 600;*/

    position: sticky;
    top: 0;
    /*background: var(--bg-card); !* чтобы текст не “просвечивал” при скролле *!*/
    /*z-index: 1;                 !* поверх строк *!*/
}

.table-logs td {
    text-align: left;
    border: 1px solid var(--border);

    /*position: sticky;*/
    /*top: 0;*/
    /*background: var(--bg-card); !* чтобы текст не “просвечивал” при скролле *!*/
    /*z-index: 1;*/
}

.table-logs th {
        background: #1e293b;
        font-weight: 600;
}

.th-tbody{
    overflow: auto;
    overscroll-behavior: contain;
}

/*!* фикс шапки *!*/
.table-scroll th{
    text-align: left;
    /*border: 1px solid var(--border);*/

    border: none;
    background: #1e293b;
    /*font-weight: 600;*/

    position: sticky;
    top: 0;
    /*background: var(--bg-card); !* чтобы текст не “просвечивал” при скролле *!*/
    /*z-index: 1;                 !* поверх строк *!*/

    font-weight: 600;
}

.table-scroll td {
    /*padding: 8px 12px;*/
    text-align: left;
    border: 1px solid var(--border);
}


:root { --visible-items: 4; }

:root { --option-h: 36px; }

:root { --dd-pad-v: 12px; }

.th-dropdown{
    overflow: auto;
    max-height: calc(var(--option-h) * var(--visible-items) + var(--dd-pad-v));
    overscroll-behavior: contain;
}

.th-option{
    padding: 8px 10px;
    line-height: 1.2;
    overflow-y: visible;
}


.label-with-arrow {
    position: relative; /* Чтобы спозиционировать стрелку относительно label */
    padding-right: 20px; /* Добавляем место для стрелки */
}

.label-with-arrow::after {
    opacity:.2;;

    margin-left: 5px;
    /*right: 5px;*/
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    /*left: 5px;*/
    transform: translateY(-50%); /* Центрируем по вертикали */

    /* Создание стрелки с помощью границ */
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff; /* Цвет и размер стрелки */
}

.label-with-arrow[aria-sort="descending"]::after{  display: none;}

:root[data-theme="light"] .label-with-arrow::after{
    border-top: 5px solid #000; /* Цвет и размер стрелки */
}


input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(49%) sepia(28%) saturate(469%) hue-rotate(185deg) brightness(97%) contrast(93%);
}

/*.btn[aria-disabled="disabled"],*/
/*.btn.outline[aria-disabled="disabled"] {*/
/*    background-color: #334125;*/
/*    color: #F3F3F3;*/
/*    cursor: not-allowed;*/
/*}*/

/* Глобальная блокировка экрана при запросе */
body.screen-busy {
    overflow: hidden;          /* чтобы нельзя было скроллить */
}

body.screen-busy::before {
    content: "Пожалуйста, подождите…";
    position: fixed;
    inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
    background: rgba(15, 23, 42, 0.65); /* затемнение всего экрана */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    pointer-events: auto;      /* клики ловит именно оверлей */
}