:root {
  --cui-bg: #111520;
  --cui-surface: #181d2a;
  --cui-line: rgba(255,255,255,.1);
  --cui-text: #f7f8fb;
  --cui-muted: rgba(247,248,251,.62);
  --cui-accent: #ff920e;
  --cui-danger: #ef5350;
  --cui-success: #35c878;
}

.alert {
  position: relative;
  padding: 13px 15px 13px 44px !important;
  border: 1px solid var(--cui-line) !important;
  border-radius: 8px !important;
  background: var(--cui-surface) !important;
  color: var(--cui-text) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
}

.alert::before {
  position: absolute;
  top: 12px;
  left: 14px;
  font: normal normal normal 20px/1 "Material Design Icons";
}

.alert-success { border-color: rgba(53,200,120,.3) !important; }
.alert-success::before { content: "\F05E0"; color: var(--cui-success); }
.alert-danger { border-color: rgba(239,83,80,.32) !important; }
.alert-danger::before { content: "\F0026"; color: var(--cui-danger); }
.alert-warning { border-color: rgba(255,178,57,.32) !important; }
.alert-warning::before { content: "\F002A"; color: #ffb239; }
.alert-info { border-color: rgba(96,165,250,.32) !important; }
.alert-info::before { content: "\F02FC"; color: #60a5fa; }

.craftika-ui-overlay {
  position: fixed;
  inset: 0;
  z-index: 25000;
  display: grid;
  padding: 20px;
  place-items: center;
  background: rgba(3,5,9,.76);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}

.craftika-ui-overlay.is-open { opacity: 1; visibility: visible; }
.craftika-ui-dialog {
  width: min(430px, 100%);
  overflow: hidden;
  border: 1px solid var(--cui-line);
  border-radius: 8px;
  background: linear-gradient(145deg, var(--cui-surface), var(--cui-bg));
  box-shadow: 0 28px 80px rgba(0,0,0,.58);
  color: var(--cui-text);
  transform: translateY(10px) scale(.98);
  transition: transform .18s ease;
}

.craftika-ui-overlay.is-open .craftika-ui-dialog { transform: none; }
.craftika-ui-dialog__body { display: flex; gap: 14px; padding: 22px; }
.craftika-ui-dialog__icon { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 8px; background: rgba(255,146,14,.13); color: var(--cui-accent); font-size: 23px; }
.craftika-ui-dialog__copy { min-width: 0; }
.craftika-ui-dialog__copy strong { display: block; margin: 1px 0 7px; color: #fff; font-size: 16px; }
.craftika-ui-dialog__copy p { margin: 0; color: var(--cui-muted); font-size: 13px; line-height: 1.55; }
.craftika-ui-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--cui-line); background: rgba(0,0,0,.13); }
.craftika-ui-dialog__actions button { min-height: 38px; padding: 0 15px; border: 1px solid var(--cui-line); border-radius: 8px; background: rgba(255,255,255,.045); color: var(--cui-text); cursor: pointer; font: 800 12px/1 inherit; }
.craftika-ui-dialog__actions button:hover { background: rgba(255,255,255,.08); }
.craftika-ui-dialog__actions .craftika-ui-confirm { border-color: rgba(255,174,57,.35); background: linear-gradient(135deg, #ffb239, #ff8500); color: #15100a; }

.craftika-ui-toast,
.craftika-live-toast {
  position: fixed;
  top: 82px;
  right: 22px;
  z-index: 24000;
  display: flex;
  max-width: min(390px, calc(100vw - 32px));
  align-items: center;
  gap: 10px;
  padding: 13px 15px !important;
  border: 1px solid var(--cui-line) !important;
  border-radius: 8px !important;
  background: var(--cui-surface) !important;
  color: var(--cui-text) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.42) !important;
  opacity: 0;
  transform: translateY(-8px);
  transition: .2s ease;
}

.craftika-ui-toast.is-visible,
.craftika-live-toast.is-visible { opacity: 1; transform: none; }
.craftika-ui-toast.is-error,
.craftika-live-toast.is-error { border-color: rgba(239,83,80,.42) !important; color: #ffd0ce !important; }

.swal2-popup {
  border: 1px solid var(--cui-line) !important;
  border-radius: 8px !important;
  background: var(--cui-surface) !important;
  color: var(--cui-text) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.58) !important;
}
.swal2-title, .swal2-content { color: var(--cui-text) !important; }
.swal2-confirm { border-radius: 8px !important; background: linear-gradient(135deg,#ffb239,#ff8500) !important; color: #15100a !important; }
.swal2-cancel { border-radius: 8px !important; background: rgba(255,255,255,.08) !important; }

@media (max-width: 575px) {
  .craftika-ui-toast, .craftika-live-toast { top: 14px; right: 16px; left: 16px; }
  .craftika-ui-dialog__body { padding: 18px; }
}