/* Role mappings from legacy classes into the UI frame system. */
.panel,
.sidebar-card,
.slot-card,
.archive-hero,
.archive-round,
.mechbay-card,
.rsvp-modal,
.rsvp-modal-card,
.inset-panel,
.ops-card {
  position:relative;
  border-width:2px !important;
  border-style:solid !important;
  border-color:rgba(155,255,0,.20) !important;
  background:var(--ui-pane-bg) !important;
  clip-path:polygon(0 18px, 18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
  box-shadow:var(--ui-frame-shadow), inset 0 0 30px rgba(155,255,0,.035) !important;
}
.panel::before,
.sidebar-card::before,
.slot-card::before,
.archive-hero::before,
.archive-round::before,
.mechbay-card::before,
.rsvp-modal::before,
.rsvp-modal-card::before,
.inset-panel::before,
.ops-card::before {
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border:1px solid rgba(255,255,255,.045);
  clip-path:inherit;
}
.auth-panel,
.page-login .panel,
.page-login_page .panel {
  border-width:4px !important;
  border-color:rgba(155,255,0,.28) !important;
  background:var(--ui-auth-bg) !important;
  clip-path:polygon(0 26px, 26px 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 26px));
  box-shadow:0 24px 55px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.04), inset 0 0 46px rgba(155,255,0,.045) !important;
}
.auth-panel::after,
.page-login .panel::after,
.page-login_page .panel::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 8%, rgba(155,255,0,.20), transparent 4%),
    radial-gradient(circle at 90% 8%, rgba(155,255,0,.16), transparent 4%),
    radial-gradient(circle at 10% 92%, rgba(155,255,0,.12), transparent 4%),
    radial-gradient(circle at 90% 92%, rgba(155,255,0,.18), transparent 4%),
    linear-gradient(90deg, rgba(155,255,0,.24), transparent 16%, transparent 84%, rgba(155,255,0,.18)) top left/100% 3px no-repeat,
    linear-gradient(90deg, rgba(155,255,0,.12), transparent 16%, transparent 84%, rgba(155,255,0,.24)) bottom left/100% 3px no-repeat;
}

/* Command notification system: replaces full-width green flash bars. */
.flash-stack {
  display:grid !important;
  justify-items:start !important;
  gap:10px !important;
  margin:0 0 18px !important;
  width:100% !important;
}

.flash {
  position:relative !important;
  isolation:isolate !important;
  width:max-content !important;
  max-width:min(760px, 100%) !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  padding:12px 20px 12px 48px !important;
  border:1px solid rgba(155,255,0,.26) !important;
  border-radius:0 !important;
  color:#eaffdf !important;
  background:
    linear-gradient(90deg, rgba(155,255,0,.18), transparent 18%, transparent 88%, rgba(155,255,0,.08)) top left/100% 1px no-repeat,
    linear-gradient(90deg, rgba(155,255,0,.08), transparent 18%, transparent 88%, rgba(155,255,0,.16)) bottom left/100% 1px no-repeat,
    linear-gradient(180deg, rgba(9,17,11,.96), rgba(2,5,4,.98)) !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.035),
    inset 0 0 24px rgba(155,255,0,.035) !important;
  clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)) !important;
  font-family:var(--site-font-display) !important;
  letter-spacing:.045em !important;
  text-transform:none !important;
}

.flash::before {
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  background:
    radial-gradient(circle at 50% 50%, #b7ff3c 0 28%, rgba(155,255,0,.28) 30% 54%, transparent 56%),
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(0,0,0,.22));
  border:1px solid rgba(155,255,0,.52);
  box-shadow:0 0 16px rgba(155,255,0,.36), inset 0 0 8px rgba(0,0,0,.55);
  clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.flash::after {
  content:"";
  position:absolute;
  left:38px;
  top:9px;
  bottom:9px;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(155,255,0,.46), transparent);
  box-shadow:0 0 8px rgba(155,255,0,.32);
}

.flash-success {
  border-color:rgba(155,255,0,.34) !important;
}

.flash-warning {
  border-color:rgba(226,185,63,.42) !important;
  color:#fff2c6 !important;
}
.flash-warning::before {
  border-color:rgba(226,185,63,.58);
  background:radial-gradient(circle at 50% 50%, #ffda55 0 28%, rgba(226,185,63,.28) 30% 54%, transparent 56%);
  box-shadow:0 0 16px rgba(226,185,63,.32), inset 0 0 8px rgba(0,0,0,.55);
}

.flash-danger {
  border-color:rgba(224,77,77,.52) !important;
  color:#ffe4e4 !important;
}
.flash-danger::before {
  border-color:rgba(224,77,77,.64);
  background:radial-gradient(circle at 50% 50%, #ff6666 0 28%, rgba(224,77,77,.30) 30% 54%, transparent 56%);
  box-shadow:0 0 16px rgba(224,77,77,.34), inset 0 0 8px rgba(0,0,0,.55);
}

@media(max-width:760px){
  .flash {
    width:100% !important;
    max-width:100% !important;
  }
}