/* MCShorts Store
   Struktur und Maße stammen aus dem Atom-Template (qSeek), aber eigenständig:
   das Original setzt auf Tebex' Basis-Stylesheet /templates/209/css/style.min.css,
   das es auf einer selbst gehosteten Seite nicht gibt.

   Die Farben sind aus dem echten Logo gezogen (pack.png / mcshorts_title.png):
   #FF512A Highlight, #E8421F Körper, #531408 Kontur.
   qSeek liefert das Template in Cyan (#4CB1D0 / #3DD1FF) aus – das passte nicht
   zur Marke. Für ein Rollback reichen die Zeilen --main-color, --main-color-hover
   und --color-accent. */

:root {
  --background: #191614;
  --background-transparent: rgba(25, 22, 20, 0.85);
  --footer: #120f0e;
  --transparent: rgba(255, 255, 255, 0.12);
  --transparent-hover: rgba(255, 255, 255, 0.2);
  --panel: #241e1b;
  --border: #362c27;
  --main-color: #e8421f;
  --main-color-hover: #c43617;
  --color-accent: #ff512a;
  --white: #ffffff;
  --text: rgba(255, 226, 214, 0.78);
  --red: #d43246;
  --red-hover: #b92b3d;
  --green: #41b95b;
  --green-hover: #3daa55;
  --spacing: 8px;
  --radius: 8px;
}

* { box-sizing: border-box; }

/* Sticky Footer: der Body füllt mindestens die Fensterhöhe, der Footer wird
   per margin-top:auto nach unten gedrückt. Sonst klebt er bei kurzen Seiten
   mitten im Bild und darunter bleibt eine schwarze Fläche. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--text);
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

body > footer { margin-top: auto; }

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--main-color); }

.container {
  width: min(1200px, 100% - 32px);
  margin-inline: auto;
}

/* --- Kopfbereich --------------------------------------------------------- */

.headerbg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 420px;
  background: linear-gradient(0deg, var(--background), var(--background-transparent));
  z-index: -1;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing);
  padding: calc(var(--spacing) * 2) 0;
  flex-wrap: wrap;
}

.header {
  display: flex;
  justify-content: center;
  padding: calc(var(--spacing) * 2) 0 calc(var(--spacing) * 4);
}

/* Das Logo ist Pixel-Art (255x49). Ohne pixelated wird es beim Hochskalieren
   matschig statt scharf. */
.header__logo { display: block; }
.header__logo img {
  display: block;
  height: 72px;
  width: auto;
  image-rendering: pixelated;
}
@media (max-width: 600px) {
  .header__logo img { height: 48px; }
}

.header__logo-text {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
}

.header__welcome {
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--main-color);
  font-weight: 600;
}

.server {
  display: flex;
  align-items: center;
  gap: var(--spacing);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing) calc(var(--spacing) * 2);
  cursor: pointer;
  transition: border-color 0.15s;
}
.server:hover { border-color: var(--main-color); }
.server__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--main-color);
  color: #fff;
  font-size: 0.8rem;
}
.server__name { color: var(--white); font-weight: 600; }
.server__online { font-size: 0.8rem; }
.highlighted { color: var(--color-accent); font-weight: 600; }

.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--spacing);
  flex-wrap: wrap;
}

.social--discord {
  background: #5865f2;
  border-color: #5865f2;
  color: #fff;
  font-weight: 600;
}
.social--discord:hover { background: #4752c4; border-color: #4752c4; color: #fff; }
.social__icon { display: grid; place-items: center; }

/* --- Socials ------------------------------------------------------------- */

.socials { display: flex; gap: 6px; }

.social {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--text);
  transition: border-color 0.15s, color 0.15s;
}
.social:hover { border-color: var(--main-color); color: var(--white); }
.social__count { color: var(--color-accent); font-weight: 600; font-size: 0.8rem; }

/* --- Profil / Warenkorb-Kopf --------------------------------------------- */

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px 6px 14px;
}
.profile__head { display: flex; align-items: center; gap: 6px; }
.profile__name { color: var(--white); font-weight: 600; font-size: 0.9rem; }

/* Rang-Abzeichen aus dem Resourcepack: 9px hohe Pixel-Wortmarken.
   Faktor 2 trifft die Textgröße daneben, pixelated hält die Kanten scharf. */
.profile__rank img {
  display: block;
  height: 18px;
  width: auto;
  image-rendering: pixelated;
}

/* --- Login-Auswahl ------------------------------------------------------- */

.login-editions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing);
  margin-bottom: calc(var(--spacing) * 2);
}
/* .button steht weiter unten in dieser Datei und würde bei gleicher
   Spezifität gewinnen – deshalb hier bewusst zweifach qualifiziert. */
.button.login-edition--active {
  background: var(--main-color);
  color: #fff;
}
.button.login-edition--active:hover {
  background: var(--main-color-hover);
  color: #fff;
}

.login-field { display: block; }
.login-field span {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--white);
}
.login-field input {
  width: 100%;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--white);
  font: inherit;
  padding: 10px 12px;
}
.login-field input:focus { outline: none; border-color: var(--main-color); }

.login-hint {
  margin: var(--spacing) 0 0;
  font-size: 0.82rem;
  opacity: 0.8;
}
.login-hint strong { color: var(--color-accent); }

.login-error {
  margin: calc(var(--spacing) * 2) 0 0;
  font-size: 0.85rem;
  color: #fff;
  background: rgba(212, 50, 70, 0.15);
  border: 1px solid var(--red);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.profile { cursor: pointer; }
.profile__value { font-size: 0.78rem; opacity: 0.8; }
.profile__avatar img {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  image-rendering: pixelated;
}

/* --- Ankündigung --------------------------------------------------------- */

.announcement {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--main-color);
  border-radius: var(--radius);
  padding: 12px 16px;
  max-width: 460px;
}
.announcement__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--main-color);
  color: #fff;
  flex-shrink: 0;
}
.announcement__title { color: var(--white); font-weight: 600; }
.announcement__info { font-size: 0.82rem; opacity: 0.85; }

/* --- Buttons ------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--spacing) calc(var(--spacing) * 2);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--transparent);
  color: var(--white);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.button:hover { background: var(--transparent-hover); color: var(--white); }
.button--primary { background: var(--main-color); color: #0d1319; }
.button--primary:hover { background: var(--main-color-hover); color: #0d1319; }
.button--success { background: var(--green); color: #0d1319; }
.button--success:hover { background: var(--green-hover); color: #0d1319; }

/* Glanzstreifen, der in Abstaenden ueber den Kaufen-Button wandert.
   pointer-events: none, sonst faengt die Auflage die Klicks ab. */
.button--shine { position: relative; overflow: hidden; }
.button--shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -140%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine {
  0%, 62% { left: -140%; }
  100% { left: 140%; }
}

@media (prefers-reduced-motion: reduce) {
  .button--shine::after { animation: none; }
}
.button--danger { background: var(--red); }
.button--danger:hover { background: var(--red-hover); }
.button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- Panels & Pakete ------------------------------------------------------ */

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: calc(var(--spacing) * 2);
  align-items: start;
  padding-bottom: calc(var(--spacing) * 6);
}

/* Ohne Kategorie-Navigation wird die Sidebar per [hidden] entfernt und der
   Katalog nimmt die volle Breite ein. */
.layout:has(.sidebar[hidden]) { grid-template-columns: 1fr; }
.sidebar[hidden] { display: none; }
.sidebar { position: sticky; top: var(--spacing); }

/* --- Kategorie ohne Panel-Rahmen ----------------------------------------- */

.category { padding-top: calc(var(--spacing) * 2); }

.category__title {
  margin: 0 0 calc(var(--spacing) * 3);
  text-align: center;
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.category__title::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: var(--main-color);
}

.category__desc {
  text-align: center;
  max-width: 620px;
  margin: 0 auto calc(var(--spacing) * 3);
  font-size: 0.9rem;
  opacity: 0.85;
}

.category .packages {
  max-width: 900px;
  margin-inline: auto;
}


/* --- Navigation ---------------------------------------------------------- */

.navigation__item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.navigation__item a:hover { background: var(--transparent); color: var(--white); }
.navigation__item--active a {
  background: var(--main-color);
  color: #fff;
}
.navigation__item--active a:hover { background: var(--main-color-hover); color: #fff; }
.navigation__count {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.7;
}

/* --- Sidebar-Module ------------------------------------------------------ */

.module__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.module__row:last-child { border-bottom: 0; }
.module__row img { border-radius: 4px; image-rendering: pixelated; }
.module__name { color: var(--white); }
.module__amount { margin-left: auto; color: var(--color-accent); font-weight: 600; }
.module__empty { font-size: 0.85rem; opacity: 0.7; }
.module__text { font-size: 0.85rem; }
.module__text p { margin: 0 0 6px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: calc(var(--spacing) * 2);
  overflow: hidden;
}

.panel__heading {
  color: var(--main-color);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.1rem;
  padding: calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--border);
}

.panel__body { padding: calc(var(--spacing) * 2); }

.packages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: calc(var(--spacing) * 2);
}

.package {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--spacing) * 2);
  gap: var(--spacing);
}

/* Rang-Bilder sind Pixel-Wortmarken (z. B. 42x9). Ohne Hintergrundkasten,
   damit nur das Icon steht. */
.package__image {
  width: auto;
  max-width: 100%;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  margin: 4px auto 8px;
  display: block;
}

.package__name { color: var(--white); font-weight: 600; }

/* Preis mit MwSt-Zusatz links daneben, auf gemeinsamer Grundlinie. */
.package__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--color-accent);
  font-size: 1.3rem;
  font-weight: 700;
}
.package__vat {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text);
  opacity: 0.6;
  white-space: nowrap;
}


.package__desc {
  font-size: 0.85rem;
  opacity: 0.8;
  max-height: 4.6em;
  overflow: hidden;
}
.package__desc p { margin: 0; }

.package__actions { margin-top: auto; display: flex; gap: var(--spacing); }
.package__actions .button { flex: 1; }

/* --- Warenkorb ----------------------------------------------------------- */

.basket { position: sticky; top: var(--spacing); }

.basket__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing);
  padding: var(--spacing) 0;
  border-bottom: 1px solid var(--border);
}
.basket__item:last-of-type { border-bottom: 0; }
.basket__item-name { color: var(--white); font-size: 0.9rem; }
.basket__item-meta { font-size: 0.8rem; opacity: 0.7; }
.basket__gift {
  font-size: 0.78rem;
  color: var(--color-accent);
}

.basket__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: calc(var(--spacing) * 2);
  margin-top: var(--spacing);
  border-top: 1px solid var(--border);
  color: var(--white);
  font-weight: 700;
  font-size: 1.15rem;
}

.basket__empty { text-align: center; padding: calc(var(--spacing) * 2) 0; }
.basket__empty strong { display: block; color: var(--white); }
.basket__empty span { font-size: 0.85rem; opacity: 0.75; }

/* --- Mengenwahl ---------------------------------------------------------- */

.qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.qty button {
  background: var(--transparent);
  border: 0;
  color: var(--white);
  font: inherit;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.qty button:hover { background: var(--transparent-hover); }
.qty span {
  min-width: 32px;
  text-align: center;
  color: var(--white);
  font-size: 0.9rem;
}

/* --- Code-Felder (Coupon / Gift Card / Creator Code) --------------------- */

/* Codes sind standardmäßig eingeklappt – im Warenkorb stehen sonst zwei
   Eingabefelder, die die meisten Besucher nie brauchen. */
.codes { margin-top: calc(var(--spacing) * 2); display: grid; gap: var(--spacing); }

.codes__toggle {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  opacity: 0.8;
}
.codes__toggle:hover { color: var(--color-accent); opacity: 1; }
.codes__fields { display: grid; gap: var(--spacing); }
.codes__fields[hidden] { display: none; }

.code-row { display: flex; gap: 6px; }

.code-row input {
  flex: 1;
  min-width: 0;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--white);
  font: inherit;
  font-size: 0.85rem;
  padding: 6px 10px;
}
.code-row input:focus {
  outline: none;
  border-color: var(--main-color);
}
.code-row input::placeholder { color: var(--text); opacity: 0.6; }
.code-row .button { padding: 6px 12px; font-size: 0.85rem; }

.applied {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing);
  font-size: 0.82rem;
  background: var(--background);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 6px 10px;
}
.applied button {
  background: none;
  border: 0;
  color: var(--red);
  cursor: pointer;
  font: inherit;
}

/* --- Seitliche Lade (Warenkorb + Konto) ---------------------------------- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 55;
}
.drawer-backdrop[hidden] { display: none; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 100%);
  background: var(--panel);
  border-left: 1px solid var(--border);
  z-index: 56;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.drawer[hidden] { display: none; }
.drawer--open { transform: translateX(0); }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing);
  padding: calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--border);
}
.drawer__title {
  color: var(--main-color);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.05rem;
}
.drawer__body {
  padding: calc(var(--spacing) * 2);
  overflow-y: auto;
  flex: 1;
}
.drawer__foot {
  padding: calc(var(--spacing) * 2);
  border-top: 1px solid var(--border);
}
.drawer__foot .button { width: 100%; }

.drawer__account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--border);
}
.drawer__account img.avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  image-rendering: pixelated;
}
.drawer__account-name { color: var(--white); font-weight: 600; }
.drawer__section {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin: calc(var(--spacing) * 2) 0 var(--spacing);
}

/* --- Sprache -------------------------------------------------------------- */

.lang { display: flex; gap: 4px; }
.lang button {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 10px 10px;
  cursor: pointer;
  text-transform: uppercase;
}
.lang button:hover { border-color: var(--main-color); color: var(--white); }
.lang button.lang--active {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

/* --- Geschenk-Banner ------------------------------------------------------ */

.gift-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing);
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: calc(var(--spacing) * 2);
  font-size: 0.9rem;
}
.gift-banner[hidden] { display: none; }
.gift-banner strong { color: var(--color-accent); }
.gift-banner button {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--red);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Modal --------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 60;
}
.modal[open], .modal--visible { display: flex; }

.modal__box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: min(560px, 100%);
  max-height: 85vh;
  overflow-y: auto;
}
.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing);
  padding: calc(var(--spacing) * 2);
  border-bottom: 1px solid var(--border);
}
.modal__title { color: var(--white); font-weight: 700; font-size: 1.15rem; }
.modal__close {
  background: none;
  border: 0;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.modal__close:hover { color: var(--white); }
.modal__body { padding: calc(var(--spacing) * 2); }
.modal__body img { max-width: 100%; border-radius: var(--radius); }

/* --- Paket-Detail --------------------------------------------------------- */

.detail { text-align: center; }

/* Weicher Farbverlauf hinter dem Rang-Abzeichen, damit es nicht nackt im
   Panel schwebt. Der Radial-Verlauf greift die Markenfarbe auf. */
.detail__hero {
  display: grid;
  place-items: center;
  padding: calc(var(--spacing) * 3) 0;
  margin-bottom: calc(var(--spacing) * 2);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 55%, rgba(232, 66, 31, 0.22), transparent 68%),
    var(--background);
  border: 1px solid var(--border);
}

.detail__badge {
  height: 46px;
  width: auto;
  max-width: 82%;
  image-rendering: pixelated;
  border-radius: 0;
}

.detail__price {
  color: var(--color-accent);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: calc(var(--spacing) * 2);
}
.detail__vat {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text);
  opacity: 0.75;
  margin-top: 2px;
}

/* Die Beschreibung kommt als HTML von Tebex – meist eine Liste von Vorteilen.
   Links ausgerichtet und mit Häkchen, statt als zentrierter Textblock. */
.detail__body {
  text-align: left;
  font-size: 0.92rem;
  border-top: 1px solid var(--border);
  padding-top: calc(var(--spacing) * 2);
}
.detail__body p { margin: 0 0 8px; }
.detail__body p:last-child { margin-bottom: 0; }

/* Der einleitende Kurzabsatz vor der Vorteilsliste. */
.detail__body .detail__lead {
  color: var(--white);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  opacity: 0.85;
  margin-bottom: 12px;
}
.detail__body ul { margin: 0; padding: 0; list-style: none; }
.detail__body li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
}
.detail__body li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.detail__body strong { color: var(--white); }

.modal__foot .button--success,
.modal__foot .button--danger { width: 100%; margin-left: 0; }
.modal__foot {
  display: flex;
  align-items: center;
  gap: var(--spacing);
  padding: calc(var(--spacing) * 2);
  border-top: 1px solid var(--border);
}
.modal__foot .button { margin-left: auto; }

/* --- Zustände ------------------------------------------------------------ */

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--main-color);
  border-radius: var(--radius);
  background: var(--panel);
  padding: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 2);
}
.notice--error { border-left-color: var(--red); }
.notice strong { color: var(--white); }

.toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--white);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 50;
}
.toast--visible { opacity: 1; transform: none; }
.toast--error { border-left-color: var(--red); }

.skeleton {
  background: var(--panel);
  border-radius: var(--radius);
  height: 180px;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.5; } }

/* --- Footer -------------------------------------------------------------- */

footer {
  background: var(--footer);
  border-top: 1px solid var(--border);
  padding: calc(var(--spacing) * 5) 0 calc(var(--spacing) * 3);
}
.footer__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: calc(var(--spacing) * 3);
}
.footer__title {
  color: var(--white);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin-bottom: var(--spacing);
}
.footer__content { font-size: 0.88rem; }
.footer__content ul { list-style: none; margin: 0; padding: 0; }
.footer__bottom {
  margin-top: calc(var(--spacing) * 4);
  padding-top: calc(var(--spacing) * 2);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  opacity: 0.7;
  text-align: center;
}

@media (max-width: 780px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .topbar { gap: 12px; }
  .topbar__right { width: 100%; justify-content: space-between; }
}