:root { --bg: #0a0a0f; --card: #14141c; --border: #1f1f2e; }
body { background: radial-gradient(ellipse at top, #1a1a2e 0%, #0a0a0f 50%); }
* { scrollbar-width: thin; scrollbar-color: #333 transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.modal-backdrop { background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); }
input, textarea, select { outline: none; }
input::placeholder, textarea::placeholder { color: #6b7280; }
.btn-primary { background: linear-gradient(135deg, #e50914 0%, #b0060f 100%); transition: all 0.2s; }
.btn-primary:hover { background: linear-gradient(135deg, #f40612 0%, #c80811 100%); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(229,9,20,0.4); }
.btn-gold { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); transition: all 0.2s; }
.btn-gold:hover { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(245,158,11,0.4); }
.login-card { background: linear-gradient(180deg, rgba(24,27,36,0.95), rgba(13,16,24,0.95)); box-shadow: 0 20px 60px -15px rgba(0,0,0,0.7), 0 0 0 1px rgba(245,158,11,0.08); animation: loginPop .45s cubic-bezier(.2,.9,.3,1); }
@keyframes loginPop { from { opacity:0; transform: translateY(14px) scale(.98); } to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeIn 0.4s ease-out; }
.stat-card { background: linear-gradient(135deg, rgba(26,26,36,0.9), rgba(20,20,28,0.9)); transition: all 0.3s; }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { border: 3px solid rgba(255,255,255,0.1); border-top-color: #f59e0b; border-radius: 50%; width: 20px; height: 20px; animation: spin 0.8s linear infinite; display: inline-block; }

/* ---- Custom dialogs & toasts ---- */
.toast-host {
  position: fixed; top: 16px; right: 16px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}
.toast-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  font-size: 13px; font-weight: 600; color: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  opacity: 0; transform: translateX(24px); transition: all .28s cubic-bezier(.2,.9,.3,1);
  pointer-events: auto; backdrop-filter: blur(10px);
}
.toast-item.show { opacity: 1; transform: translateX(0); }
.toast-success { background: linear-gradient(135deg, rgba(16,185,129,.95), rgba(5,150,105,.95)); border: 1px solid rgba(52,211,153,.4); }
.toast-error { background: linear-gradient(135deg, rgba(239,68,68,.95), rgba(185,28,28,.95)); border: 1px solid rgba(252,165,165,.35); }
.toast-info { background: linear-gradient(135deg, rgba(56,189,248,.95), rgba(14,165,233,.95)); border: 1px solid rgba(125,211,252,.35); }
.toast-warn { background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(217,119,6,.95)); border: 1px solid rgba(252,211,77,.35); color: #111; }

.ui-dialog-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.72); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; opacity: 0; transition: opacity .2s ease;
}
.ui-dialog-overlay.show { opacity: 1; }
.ui-dialog-card {
  width: 100%; max-width: 400px;
  background: linear-gradient(180deg, #1c1c28 0%, #12121a 100%);
  border: 1px solid #2a2a3a; border-radius: 20px;
  padding: 28px 24px 22px; text-align: center;
  box-shadow: 0 25px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(245,158,11,.06);
  transform: scale(.94) translateY(10px); transition: transform .25s cubic-bezier(.2,.9,.3,1);
}
.ui-dialog-overlay.show .ui-dialog-card { transform: scale(1) translateY(0); }
.ui-dialog-icon {
  width: 56px; height: 56px; margin: 0 auto 14px;
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.ui-dialog-icon.danger { background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.3); }
.ui-dialog-icon.warn { background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.ui-dialog-icon.info { background: rgba(56,189,248,.15); color: #38bdf8; border: 1px solid rgba(56,189,248,.3); }
.ui-dialog-icon.success { background: rgba(16,185,129,.15); color: #34d399; border: 1px solid rgba(16,185,129,.3); }
.ui-dialog-title { font-size: 16px; font-weight: 900; color: #f3f4f6; margin: 0 0 8px; }
.ui-dialog-msg { font-size: 13px; color: #9ca3af; line-height: 1.5; margin: 0 0 18px; }
.ui-dialog-input {
  width: 100%; background: rgba(0,0,0,.4); border: 1px solid #374151;
  border-radius: 10px; padding: 10px 14px; color: #fff; font-size: 14px;
  margin-bottom: 16px; outline: none;
}
.ui-dialog-input:focus { border-color: #f59e0b; }
.ui-dialog-actions { display: flex; gap: 10px; justify-content: center; }
.ui-btn-cancel {
  flex: 1; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 700;
  background: #1f1f2e; color: #9ca3af; border: 1px solid #2a2a3a; cursor: pointer; transition: all .15s;
}
.ui-btn-cancel:hover { background: #2a2a3a; color: #fff; }
.ui-btn-confirm {
  flex: 1; padding: 10px 16px; border-radius: 10px; font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #111; border: none; cursor: pointer; transition: all .15s;
}
.ui-btn-confirm:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ui-btn-confirm.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; }

/* Drag & drop reorder */
tr.content-row { cursor: grab; }
tr.content-row.dragging { opacity: .45; background: rgba(245,158,11,.08) !important; }
tr.content-row.drag-over { box-shadow: inset 0 2px 0 0 #f59e0b; }
.drag-handle {
  cursor: grab; color: #6b7280; padding: 4px 6px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.drag-handle:hover { color: #f59e0b; background: rgba(245,158,11,.12); }
.order-btn {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; background: rgba(255,255,255,.04); border: 1px solid #2a2a3a;
  color: #9ca3af; font-size: 11px; transition: all .15s;
}
.order-btn:hover { color: #f59e0b; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.1); }
.order-btn:disabled { opacity: .3; cursor: not-allowed; }