/* ==========================================================================
   LOKI PANEL KIT  -  the panels' components in the loki.ragnarevival.com system
   Loaded after css/loki.css (the main site's stylesheet, copied unchanged).
   Every value here is a loki.css token or a value the main site already uses
   (its cards, tiles, inputs, badges, ranking toolbar, error card, ban dialog).
   No new colours. Prefix lk- (the main site's), see README.md.
   ========================================================================== */

/* ---------- Header slots ---------- */
/* the main site writes style="margin-left:auto" on nav.lk-nav-wrap; the kit keeps markup free of inline styles */
.lk-nav-wrap { margin-left: auto; }
/* Log out as a POST form inside a menu or the drawer looks exactly like the links around it */
.lk-logout-form { margin: 0; }
button.lk-menu__link { width: 100%; background: none; border: 0; font-family: inherit; text-align: left; cursor: pointer; }
.lk-menu__link[aria-current="page"] { background: rgba(176, 140, 255, .12); color: #fff !important; }
.lk-menu__link[aria-current="page"]::after { content: ''; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--lk-purple-400); flex-shrink: 0; }
/* Header fit. A panel header also holds the account button (name) and, for staff, the "Admin" menu; the main site's own
   header is already wider than its content box from 1081 to about 1330 px (at 1181 px it reaches 150 px past it and its
   "Create account" is cut off by 126 px). Steps in the main site's own manner (at 1180 px and below it narrows the nav
   links and hides the LOKI tag), so nothing ever reaches past the content box, let alone the window: a long name is
   shortened (the menu shows it in full), the player count leaves the header at 1340 px and below (1440 px for staff),
   the main site's narrower nav links run on to 1240 px, staff lose the LOKI tag at 1366 px and below and the word "Admin"
   (icon only) at 1240 px and below. From 1080 px down the drawer takes over, as on the main site. */
.lk-acct__name { display: inline-block; max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.lk-menu__user { display: block; padding: 6px 12px 2px; font-size: 12.5px; color: var(--lk-text-3); overflow-wrap: anywhere; }
.lk-menu__user b { color: #fff; font-weight: 600; }
@media (max-width: 1340px) { .lk-panel .lk-header__inner > .lk-online { display: none; } }
@media (max-width: 1440px) { .lk-panel.lk-staff .lk-header__inner > .lk-online { display: none; } }
@media (max-width: 1366px) { .lk-panel.lk-staff .lk-brand__tag { display: none; } }
@media (max-width: 1280px) { .lk-panel.lk-staff .lk-acct__name { max-width: 9ch; } }
@media (min-width: 1181px) and (max-width: 1240px) { .lk-panel .lk-nav__link { padding: 0 9px; font-size: 14px; } }
@media (max-width: 1240px) {
  .lk-panel .lk-nav__admin .lk-nav__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}
.lk-drawer__auth .lk-logout-form { display: contents; }
.lk-drawer__user { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--lk-fs-sm); color: var(--lk-text-3); overflow-wrap: anywhere; }
.lk-drawer__user i { color: var(--lk-purple-400); }
.lk-drawer__user b { color: #fff; }
.lk-drawer__panel { margin: 4px 0 6px; padding-top: 6px; border-top: 1px solid var(--lk-line); }
.lk-drawer__panel > .lk-menu__label { padding: 8px 4px 0; }
.lk-drawer__link[aria-current="page"] { color: #fff !important; }
.lk-drawer__link[aria-current="page"]::after { content: ''; width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--lk-purple-400); }
.lk-modal__alt { margin: 18px 0 0; font-size: 13px; }

/* ---------- Legibility on the brightest parts of the brand gradient and of the artwork ----------
   White text on the right end of --lk-grad-brand (#c77dff) and the muted current crumb over the bright art measure 3.6 to
   4.4:1 at their brightest 2 %. The gradients and colours stay the main site's; a tight dark halo (the device the main
   site's own page titles use, .lk-hero__title text-shadow) keeps the letters clear without changing the look. */
.lk-btn:not(.lk-btn--secondary):not(.lk-btn--ghost):not(.lk-btn--gold):not(.lk-btn--danger):not(.lk-btn--success),
:where(.lk-body) :where(.button, input[type="submit"], button[type="submit"]:not(.lk-modal__close):not(.lk-flash__close):not([class*="lk-btn--"]), input[type="button"], input[type="reset"]),
.lk-subnav a.is-active, .lk-subnav button.is-active, .lk-subnav [aria-selected="true"],
.lk-pagination .is-active, .lk-pagination [aria-current="page"], .lk-body .pages .current-page,
.lk-badge--solid, .lk-steps > li::before, .lk-avatar--staff {
  text-shadow: 0 1px 2px rgba(42, 16, 82, .55), 0 0 1px rgba(42, 16, 82, .35);
}
.lk-hero__crumbs { text-shadow: 0 1px 10px rgba(11, 8, 23, .9), 0 0 2px rgba(11, 8, 23, .7); }

/* ---------- Session notices: the main site's .lk-flash, stacked, with kinds ---------- */
.lk-flashes { position: fixed; top: calc(var(--lk-header-h) + 14px); left: 50%; transform: translateX(-50%); z-index: 2500; width: min(640px, calc(100% - 32px)); display: grid; gap: 10px; }
.lk-flashes .lk-flash { position: relative; top: auto; left: auto; width: 100%; transform: none; animation: lk-flash-drop .3s var(--lk-ease); }
@keyframes lk-flash-drop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.lk-flash.is-hidden { display: none; }
.lk-flash__title { display: block; margin-bottom: 2px; color: #fff; font-weight: 700; }
.lk-flash__body a { color: var(--lk-purple-300); text-decoration: underline; text-underline-offset: 2px; }
.lk-flash--success { border-color: rgba(52, 211, 153, .45); }
.lk-flash--success > i { color: var(--lk-success); }
.lk-flash--warning { border-color: rgba(251, 191, 36, .45); }
.lk-flash--warning > i { color: var(--lk-warning); }
.lk-flash--danger { border-color: rgba(251, 113, 133, .5); }
.lk-flash--danger > i { color: var(--lk-danger); }

/* ---------- Alerts: title line and links (the .lk-alert of the main site's log in page) ---------- */
.lk-alert > div { min-width: 0; flex: 1; }
.lk-alert > div > :last-child { margin-bottom: 0; }
.lk-alert p { margin: 0 0 6px; }
.lk-alert__title { margin: 0 0 2px !important; color: #fff; font-weight: 700; font-size: 14.5px; }
.lk-alert__actions { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0 !important; }
.lk-alert__actions a, .lk-alert a:not([class]) { color: var(--lk-purple-200); text-decoration: underline; text-decoration-color: rgba(201, 163, 255, .5); text-underline-offset: 2px; }
.lk-alert ul, .lk-alert ol { margin: 4px 0 6px; padding-left: 20px; }
.lk-alert li + li { margin-top: 3px; }

/* ---------- Badges: status and priority ---------- */
.lk-badge i { font-size: .92em; }
.lk-badge--amber { background: var(--lk-warning-bg); color: #fde68a; border-color: rgba(251, 191, 36, .38); }
.lk-status { text-transform: none; }
.lk-priority { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--lk-text-2); white-space: nowrap; }
.lk-priority::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lk-text-3); flex-shrink: 0; }
.lk-priority--low::before { background: var(--lk-text-3); }
.lk-priority--medium::before { background: var(--lk-blue-400); }
.lk-priority--high { color: #fde68a; }
.lk-priority--high::before { background: var(--lk-warning); box-shadow: 0 0 8px rgba(251, 191, 36, .6); }
.lk-priority--critical { color: #fecdd3; }
.lk-priority--critical::before { background: var(--lk-danger); box-shadow: 0 0 10px rgba(251, 113, 133, .75); }
.lk-count-pill { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--lk-radius-pill); background: rgba(255, 255, 255, .08); color: var(--lk-text-2); font-size: 11.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.is-active > .lk-count-pill, [aria-selected="true"] > .lk-count-pill, [aria-current="page"] > .lk-count-pill { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---------- Icon tiles: the kinds of the main site's error card and ban dialog ---------- */
.lk-icon-tile--danger, .errors-page__icon--danger { background: var(--lk-danger-bg); border-color: rgba(251, 113, 133, .35); color: var(--lk-danger); }
.lk-icon-tile--warning, .errors-page__icon--warning { background: var(--lk-warning-bg); border-color: rgba(251, 191, 36, .35); color: var(--lk-warning); }
.lk-icon-tile--success, .errors-page__icon--success { background: var(--lk-success-bg); border-color: rgba(52, 211, 153, .3); color: var(--lk-success); }

/* ---------- Toolbar / filters (the main site's ranking toolbar, css/pages/ranking.css) ---------- */
.lk-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 24px; padding: 14px 16px 14px 20px; border-radius: var(--lk-radius-lg); background: var(--lk-grad-surface); border: 1px solid var(--lk-line); }
.lk-toolbar__summary { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--lk-text-2); }
.lk-toolbar__summary > i { color: var(--lk-purple-400); font-size: 18px; }
.lk-toolbar__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.lk-toolbar__filters .lk-label { color: var(--lk-text-2); }
.lk-body .lk-toolbar__filters select, .lk-body .lk-toolbar__filters input[type="search"], .lk-body .lk-toolbar__filters input[type="text"] { width: auto; min-width: 180px; }
@media (max-width: 640px) {
  .lk-toolbar { padding: 14px; }
  .lk-toolbar__filters { width: 100%; }
  .lk-toolbar__filters .lk-label { width: 100%; }
  .lk-body .lk-toolbar__filters select, .lk-body .lk-toolbar__filters input[type="search"], .lk-body .lk-toolbar__filters input[type="text"] { flex: 1 1 100%; min-width: 0; }
  .lk-toolbar__filters .lk-btn { flex: 1 1 0; }
}

/* ---------- Tables: actions, titles, phone cards ---------- */
.lk-table .lk-table__actions { text-align: right; white-space: nowrap; }
.lk-table .lk-table__actions .lk-btn + .lk-btn { margin-left: 6px; }
.lk-table__title { font-weight: 600; color: #fff; overflow-wrap: anywhere; }
a.lk-table__title, .lk-table__title a { color: #fff !important; }
a.lk-table__title:hover, .lk-table__title a:hover { color: var(--lk-purple-200) !important; }
.lk-table__sub { display: block; margin-top: 2px; color: var(--lk-text-3); font-size: 12.5px; font-weight: 500; }
.lk-table__id { color: var(--lk-text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lk-table th a { display: inline-flex; align-items: center; gap: 6px; }
.lk-table th a[aria-sort], .lk-table th.is-sorted a { color: #fff !important; }
.lk-table th .fas { font-size: 10px; opacity: .8; }
.lk-table tr.is-unread td:first-child { box-shadow: inset 3px 0 0 var(--lk-purple-500); }
/* phones: each row becomes a card; every cell needs data-label="Column name" */
@media (max-width: 640px) {
  .lk-table--stack thead { display: none; }
  .lk-table--stack, .lk-table--stack tbody, .lk-table--stack tr, .lk-table--stack td { display: block; width: 100%; }
  .lk-table--stack tr { padding: 12px 14px; border-bottom: 1px solid var(--lk-line); }
  .lk-table--stack tbody tr:last-child { border-bottom: 0; }
  .lk-table--stack td, .lk-body .lk-table--stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
  .lk-table--stack td > * { min-width: 0; }
  .lk-table--stack td.lk-nowrap, .lk-table--stack .lk-nowrap { white-space: normal; }
  .lk-table--stack td::before { content: attr(data-label); flex-shrink: 0; color: var(--lk-text-3); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: left; }
  .lk-table--stack td.lk-table__main { display: block; padding-bottom: 8px; text-align: left; }
  .lk-table--stack td.lk-table__main::before, .lk-table--stack td:not([data-label])::before { content: none; }
  .lk-table--stack .lk-table__actions, .lk-body .lk-table--stack td.lk-table__actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; padding-top: 10px; white-space: normal; }
  .lk-table--stack .lk-table__actions > :is(span, div) { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 100%; }
  .lk-table--stack .lk-table__actions .lk-btn + .lk-btn { margin-left: 0; }
}

/* ---------- Pagination additions (the main site's .lk-pagination) ---------- */
.lk-pagination [aria-current="page"] { background: var(--lk-grad-brand); border-color: transparent; color: #fff !important; }
.lk-pagination .is-disabled { opacity: .4; }
.lk-pagination .lk-pagination__gap { min-width: 20px; padding: 0; border: 0; background: none; }
.lk-pagination i { font-size: 12px; }

/* ---------- Forms: states, counters, password eye, file drop ---------- */
/* fields side by side (lk-grid-2/3) share the row height: keep each field's label and input at the top instead of
   stretching the input when a neighbour has a help line */
.lk-field { align-content: start; }
.lk-req { color: var(--lk-purple-300); margin-left: 2px; }
.lk-optional { margin-left: 6px; color: var(--lk-text-3); font-size: 12.5px; font-weight: 500; }
.lk-field__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.lk-count { margin: 0; font-size: 12.5px; color: var(--lk-text-3); font-variant-numeric: tabular-nums; }
.lk-count.is-over { color: var(--lk-danger); font-weight: 600; }
.lk-field__error { display: flex; align-items: flex-start; gap: 7px; margin: 0; font-size: 13px; font-weight: 600; color: var(--lk-danger); }
.lk-field__error i { margin-top: 2px; }
.lk-field__error:empty { display: none; }
.lk-body .lk-field--error :is(input, select, textarea), .lk-body [aria-invalid="true"] { border-color: rgba(251, 113, 133, .7); }
.lk-body .lk-field--error :is(input, select, textarea):focus, .lk-body [aria-invalid="true"]:focus { border-color: var(--lk-danger); box-shadow: 0 0 0 3px rgba(251, 113, 133, .22); background: rgba(251, 113, 133, .05); }
.lk-body .lk-input-group--btn input { padding-right: 52px; }
.lk-input-group__btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 38px; height: 36px; padding: 0;
  border: 0; border-radius: var(--lk-radius-xs); background: none; color: var(--lk-text-3); font-size: 15px; cursor: pointer;
}
.lk-input-group__btn:hover { color: #fff; background: rgba(176, 140, 255, .1); }
.lk-caps { display: none; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 600; color: var(--lk-warning); }
.lk-caps.is-on { display: flex; }
.lk-drop {
  position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px 18px; text-align: center;
  border-radius: var(--lk-radius); border: 1.5px dashed var(--lk-line-strong); background: rgba(11, 8, 23, .55);
  color: var(--lk-text-2); font-size: 14px; transition: border-color .15s var(--lk-ease), background .15s var(--lk-ease);
}
.lk-drop > i { font-size: 26px; color: var(--lk-purple-400); }
.lk-drop strong { color: #fff; }
.lk-drop:hover, .lk-drop.is-over { border-color: var(--lk-purple-400); background: rgba(161, 53, 255, .07); }
.lk-drop:focus-within { border-color: var(--lk-purple-400); box-shadow: var(--lk-ring); }
.lk-body .lk-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.lk-drop__hint { font-size: 12.5px; color: var(--lk-text-3); }
.lk-drop__list { display: grid; gap: 6px; width: 100%; margin: 8px 0 0; padding: 0; list-style: none; text-align: left; }
.lk-drop__list:empty { display: none; }
.lk-drop__list li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: var(--lk-radius-sm); background: rgba(21, 16, 39, .8); border: 1px solid var(--lk-line); font-size: 13.5px; color: var(--lk-text); overflow-wrap: anywhere; }
.lk-drop__list li i { color: var(--lk-purple-400); }
.lk-drop__list li .lk-file__size { margin-left: auto; }
.lk-choice-row { display: flex; flex-wrap: wrap; gap: 10px 22px; }

/* ---------- Attachments ---------- */
.lk-files { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.lk-file {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 8px 12px;
  border-radius: var(--lk-radius-sm); background: rgba(11, 8, 23, .6); border: 1px solid var(--lk-line-2);
  color: var(--lk-text) !important; font-size: 13.5px; line-height: 1.3;
}
.lk-file > i { color: var(--lk-purple-400); }
a.lk-file:hover { border-color: var(--lk-line-strong); background: rgba(161, 53, 255, .1); color: #fff !important; }
.lk-file__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-file__size { color: var(--lk-text-3); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lk-file--missing { border-style: dashed; color: var(--lk-text-3) !important; }
.lk-file--missing > i { color: var(--lk-text-3); }
.lk-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.lk-thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--lk-radius-sm); border: 1px solid var(--lk-line-2); background: rgba(11, 8, 23, .6); }
.lk-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s var(--lk-ease); }
.lk-thumb:hover { border-color: var(--lk-purple-400); }
.lk-thumb:hover img { transform: scale(1.03); }
.lk-thumb__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; background: linear-gradient(180deg, rgba(11, 8, 23, 0), rgba(11, 8, 23, .9)); color: var(--lk-text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Comment thread ---------- */
.lk-thread { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lk-comment { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border-radius: var(--lk-radius); background: rgba(21, 16, 39, .8); border: 1px solid var(--lk-line); }
.lk-comment--staff { border-color: rgba(183, 125, 255, .38); background: linear-gradient(180deg, rgba(161, 53, 255, .1) 0%, rgba(21, 16, 39, .8) 70%); }
.lk-comment--own { border-color: var(--lk-line-2); }
.lk-comment--internal { border-style: dashed; border-color: rgba(251, 191, 36, .4); background: rgba(251, 191, 36, .04); }
.lk-avatar {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px;
  background: rgba(161, 53, 255, .14); border: 1px solid rgba(183, 125, 255, .25); color: var(--lk-purple-200);
  font-family: var(--lk-font-display); font-size: 17px; font-weight: 800; line-height: 1; text-transform: uppercase;
}
.lk-avatar--staff { background: var(--lk-grad-brand); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(124, 58, 237, .35); }
.lk-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 6px; }
.lk-comment__name { font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.lk-comment__time { margin-left: auto; font-size: 12.5px; color: var(--lk-text-3); white-space: nowrap; }
.lk-comment__body { color: var(--lk-text); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.lk-comment__body > :last-child { margin-bottom: 0; }
.lk-comment__foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lk-comment--event { grid-template-columns: 28px minmax(0, 1fr); align-items: center; padding: 10px 16px; background: rgba(11, 8, 23, .35); border-style: dashed; color: var(--lk-text-2); font-size: 14px; }
.lk-comment--event > i { justify-self: center; color: var(--lk-purple-400); }
.lk-comment--event .lk-comment__time { margin-left: 8px; }
@media (max-width: 480px) {
  .lk-comment { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; }
  .lk-comment > .lk-avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 14px; }
  .lk-comment__time { margin-left: 0; width: 100%; }
  .lk-comment--event { grid-template-columns: 22px minmax(0, 1fr); }
}

/* ---------- Progress and timer (the main site's ban countdown, .account-ban__timer) ---------- */
.lk-progress { height: 10px; overflow: hidden; border-radius: var(--lk-radius-pill); background: rgba(11, 8, 23, .75); border: 1px solid var(--lk-line); }
.lk-progress__bar { display: block; height: 100%; border-radius: inherit; background: var(--lk-grad-brand); box-shadow: 0 0 14px rgba(161, 53, 255, .55); transition: width .4s var(--lk-ease); }
.lk-progress--gold .lk-progress__bar { background: var(--lk-grad-gold); box-shadow: 0 0 14px rgba(246, 196, 83, .45); }
.lk-progress--success .lk-progress__bar { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 0 14px rgba(52, 211, 153, .45); }
.lk-timer { font-family: var(--lk-font-display); font-size: var(--lk-fs-2xl); font-weight: 800; line-height: 1.1; color: var(--lk-purple-200); font-variant-numeric: tabular-nums; }
.lk-timer--gold { color: var(--lk-gold-300); }

/* ---------- Dialogs: <dialog class="lk-dialog"> in the main site's .lk-modal look ---------- */
dialog.lk-dialog {
  width: min(520px, calc(100% - 40px)); max-height: calc(100% - 40px); padding: 32px; overflow: auto;
  border-radius: var(--lk-radius-lg); background: var(--lk-surface); border: 1px solid var(--lk-line-2);
  box-shadow: var(--lk-shadow-lg); color: var(--lk-text); text-align: center;
}
dialog.lk-dialog::backdrop { background: rgba(5, 3, 12, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.lk-dialog .lk-icon-tile, .lk-modal__dialog .lk-icon-tile { width: 60px; height: 60px; font-size: 26px; margin-bottom: 14px; border-radius: 18px; }
dialog.lk-dialog p { color: var(--lk-text-2); }
.lk-dialog--form, .lk-modal__dialog.lk-dialog--form { text-align: left; }
.lk-dialog__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.lk-dialog--form .lk-dialog__actions { justify-content: flex-end; }
dialog.lk-dialog .lk-modal__close { position: absolute; top: 12px; right: 12px; }
@media (max-width: 480px) { .lk-dialog__actions .lk-btn { flex: 1 1 100%; } }

/* ---------- Empty state additions ---------- */
.lk-empty .lk-btn-row { justify-content: center; margin-top: 18px; }
.lk-empty .lk-btn i { display: inline-block; margin: 0; font-size: .95em; color: inherit; opacity: 1; }
.lk-empty p { max-width: 52ch; margin-inline: auto; }
.lk-card > .lk-empty { padding: 28px 12px; }

/* ---------- Cards: a few panel-wide extras ---------- */
.lk-card__eyebrow { margin-bottom: 6px; }
.lk-card__head .lk-btn-row { margin-left: auto; }
.lk-card--danger { border-color: rgba(251, 113, 133, .35); }
.lk-card--danger::before { content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: var(--lk-danger); }
.lk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; color: var(--lk-text-3); font-size: var(--lk-fs-sm); }
.lk-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.lk-meta i { color: var(--lk-purple-400); }
.lk-prose { color: var(--lk-text); line-height: 1.7; overflow-wrap: anywhere; }
.lk-prose > :last-child { margin-bottom: 0; }
.lk-prose :is(ul, ol) { padding-left: 22px; }
.lk-divider { height: 1px; margin: 24px 0; border: 0; background: var(--lk-line); }

/* ---------- Message page: the main site's error card (css/pages/main-page_not_found.css, unchanged) ---------- */
.errors-page { max-width: 680px; margin: 8px auto 0; padding: 44px 40px 36px; text-align: center; }
.errors-page__icon { width: 72px; height: 72px; margin-bottom: 18px; border-radius: 20px; font-size: 30px; }
.errors-page h2 { font-size: var(--lk-fs-2xl); margin-bottom: 10px; }
.errors-page__text { max-width: 54ch; margin: 0 auto 16px; color: var(--lk-text-2); }
.errors-page__url { margin: 0 auto 24px; }
.errors-page__url code { display: inline-block; max-width: 100%; padding: 6px 12px; overflow-wrap: anywhere; font-size: 13px; }
.errors-page__actions { justify-content: center; }
.errors-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--lk-line); font-size: var(--lk-fs-sm); color: var(--lk-text-3); }
.errors-page__note { margin: 20px 0 0; color: var(--lk-text-3); font-size: var(--lk-fs-sm); }
.errors-page__note i { margin-right: 4px; }
@media (max-width: 640px) {
  .errors-page { padding: 32px 18px 26px; }
  .errors-page h2 { font-size: var(--lk-fs-xl); }
  .errors-page__actions .lk-btn { flex: 1 1 100%; }
}
/* the panel's message card: h1 sized like the error card's h2, kind edge like .lk-card--accent / --gold */
.lk-note { margin-top: 48px; }
.lk-note__title { font-size: var(--lk-fs-2xl); font-weight: 700; margin-bottom: 10px; }
.lk-note--success::before, .lk-note--info::before, .lk-note--warning::before, .lk-note--danger::before { content: ''; position: absolute; left: 24px; right: 24px; top: -1px; height: 2px; border-radius: 2px; background: var(--lk-grad-brand); }
.lk-note--success::before { background: linear-gradient(135deg, #10b981, #34d399); }
.lk-note--warning::before { background: var(--lk-grad-gold); }
.lk-note--danger::before { background: var(--lk-danger); }
.errors-page__text > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .lk-note { margin-top: 24px; } .lk-note__title { font-size: var(--lk-fs-xl); } }

/* ---------- Log in card: a slot under the form (the main site's .lk-auth) ---------- */
.lk-auth__panel > .lk-alert { margin-bottom: 18px; }
.lk-auth__foot { margin-top: 18px; }
.lk-auth__panel .lk-form + .lk-alert { margin: 18px 0 0; }

/* ---------- Small helpers ---------- */
.lk-inline-form { display: inline; margin: 0; }
.lk-sticky-aside { position: sticky; top: calc(var(--lk-header-h) + 20px); }
@media (max-width: 1024px) { .lk-sticky-aside { position: static; } }
.lk-break { overflow-wrap: anywhere; }