/* ============================================================
   Тёмная тема для OpenStack VPS & Cloud (Layers2 UI)
   Подключается через ClientAreaFooterOutput — грузится последним.
   Якорь #layers2 перебивает специфичность layers2-ui.css.
   Рамки — inset box-shadow, чтобы не влиять на размеры элементов.

   Палитра наследуется из custom.css (:root темы amnezia),
   fallback-значения продублированы на случай его отсутствия.

   Структура DOM:
     .lu-tiles-wrapper          секция
       .h4                      заголовок
       .lu-tiles.lu-row         сетка
         [class^=lu-col-]       колонка
           a.lu-tile            плитка
             .lu-i-c-6x > img   иконка
   ============================================================ */

:root {
    --mg-bg:          var(--black-90,  #17181C);  /* фон секций */
    --mg-surface:     var(--card-1,    #1C1D21);  /* карточки, модалки */
    --mg-surface-alt: var(--black-70,  #2C2D30);  /* hover, шапки таблиц */
    --mg-input:       var(--black-90,  #17181C);  /* поля ввода */
    --mg-border:      var(--black-70,  #2C2D30);
    --mg-text:        var(--gray-10,   #D7D8DB);
    --mg-text-bright: var(--main-text-color, #EAEAEC);
    --mg-text-muted:  var(--gray-20,   #878B91);
    --mg-accent:      var(--yellow-50, #FBB26A);

    --mg-danger:      var(--accent-red, #EB5757);
    --mg-success:     #3f982a;
    --mg-success-bg:  rgba(63, 152, 42, .12);
    --mg-info-bg:     rgba(251, 178, 106, .08);

    --mg-radius-lg:   16px;   /* карточки, как .card в теме */
    --mg-radius-md:   10px;   /* поля, кнопки */
}

/* ---------- база ---------- */

#layers2 body,
#layers2 .lu-app,
#layers2 .lu-app-main__body {
    background: transparent;
    color: var(--mg-text);
}

/* ---------- секция плиток ---------- */

#layers2 .lu-tiles-wrapper {
    background: var(--mg-bg);
    border: 0;
    border-radius: var(--mg-radius-lg);
    box-shadow: inset 0 0 0 1px var(--mg-border);
    box-sizing: border-box;
    padding: 4px 16px 16px;
    margin-bottom: 20px;
}

#layers2 .lu-tiles-wrapper > .h4 {
    color: var(--mg-text-muted);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .02em;
}

#layers2 .lu-tiles,
#layers2 [class^="lu-col-"] {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* ---------- плитка (поведение как .tiles .tile в теме) ---------- */

#layers2 .lu-tile {
    background: var(--mg-surface);
    border: 0;
    border-radius: var(--mg-radius-lg);
    box-shadow: inset 0 0 0 1px var(--mg-border);
    box-sizing: border-box;
    color: var(--mg-text);
    transition: background .1s ease, box-shadow .1s ease;
}

#layers2 .lu-tile:hover {
    background: var(--mg-surface-alt);
    box-shadow: inset 0 0 0 1px var(--mg-accent);
    color: var(--mg-text-bright);
}

#layers2 .lu-tile > *,
#layers2 .lu-tile .lu-i-c-6x {
    background: transparent;
    border: 0;
    box-shadow: none;
}

#layers2 .lu-tile.lu-tile--disabled,
#layers2 .lu-tile.lu-tile--disabled:hover,
#layers2 .lu-tile[disabled],
#layers2 .lu-tile[disabled]:hover {
    background: var(--mg-bg);
    box-shadow: inset 0 0 0 1px var(--mg-border);
    color: var(--mg-text-muted);
    opacity: .55;
    cursor: not-allowed;
}

/* иконки — base64-PNG, нарисованы тёмным под светлый фон */
#layers2 .lu-tile img {
    filter: invert(1) hue-rotate(180deg);
}

/* ---------- карточки-контейнеры ---------- */

#layers2 .lu-widget,
#layers2 [class*="lu-data-table"] {
    background: var(--mg-surface);
    border: 0;
    border-radius: var(--mg-radius-lg);
    box-shadow: inset 0 0 0 1px var(--mg-border);
    box-sizing: border-box;
    color: var(--mg-text);
    margin-bottom: 20px;
    overflow: hidden;
}

/* ---------- таблицы (внутри карточки, без своих рамок) ---------- */

#layers2 table,
#layers2 [class*="lu-table"] {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    width: 100%;
}

#layers2 table thead tr,
#layers2 [class*="lu-table"] thead tr {
    background: var(--mg-surface-alt);
}

#layers2 table th,
#layers2