:root {
  --app-bg: #f5f7fb;
  --app-surface: rgba(255,255,255,.84);
  --app-border: rgba(15, 23, 42, 0.08);
  --app-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  --app-radius: 22px;
  --brand: #2563eb;
  --brand-dark: #1d4ed8;
  --muted: #64748b;
}
html[data-bs-theme='dark'] {
  --app-bg: #0b1220;
  --app-surface: rgba(15,23,42,.78);
  --app-border: rgba(148,163,184,.12);
  --app-shadow: 0 18px 45px rgba(0,0,0,.35);
  --muted: #94a3b8;
}
body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 28%),
    radial-gradient(circle at top right, rgba(14,165,233,.14), transparent 22%),
    var(--app-bg);
}
.tiny { font-size: .75rem; }
.app-navbar {
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--app-surface) 82%, transparent);
}
.brand-mark {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), #0ea5e9);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(37, 99, 235, .22);
}
.app-shell { min-height: calc(100vh - 74px); }
.login-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}
.panel,
.card,
.soft-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
}
.soft-card { padding: 1.25rem; }
.hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(135deg, #0f172a, #1d4ed8 58%, #38bdf8);
  color: #fff;
  box-shadow: 0 24px 60px rgba(37, 99, 235, 0.25);
}
.hero-panel::after {
  content: '';
  position: absolute;
  inset: auto -70px -70px auto;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}
.metric-card {
  border-radius: 24px;
  padding: 1.2rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow);
}
.metric-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(14,165,233,.2));
  color: var(--brand);
  font-size: 1.25rem;
}
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .2rem;
}
.section-subtitle { color: var(--muted); }
.data-table thead th {
  border-bottom: 0;
  font-size: .83rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.data-table tbody tr { border-color: rgba(148,163,184,.12); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.preview-frame {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(148,163,184,.08), rgba(148,163,184,.16));
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.18);
}
.preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-frame-error::before {
  content: '\f3dd';
  font-family: bootstrap-icons;
  font-size: 1.4rem;
  color: var(--muted);
}
.preview-fallback { display: none; }
.user-chip {
  align-items: center;
  gap: .75rem;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--app-surface) 100%, transparent);
  border: 1px solid var(--app-border);
}
.user-chip-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(37,99,235,.12);
  color: var(--brand);
}
.login-card {
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow);
}
.login-side {
  background: linear-gradient(145deg, #0f172a, #1d4ed8 65%, #38bdf8);
  color: #fff;
}
.login-side .bullet {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}
.login-side .bullet i {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.14);
}
.form-control, .form-select {
  border-radius: 16px;
  min-height: 48px;
  border-color: rgba(148,163,184,.25);
}
.btn {
  border-radius: 14px;
}
.btn-primary {
  background: linear-gradient(135deg, var(--brand), #3b82f6);
  border-color: transparent;
}
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  font-weight: 600;
}
.quick-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.info-list li { margin-bottom: .65rem; color: var(--muted); }
.copy-group { display: flex; gap: .5rem; align-items: center; }
.copy-field {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
  font-size: .85rem;
}
.table-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.pagination .page-link {
  border-radius: 12px;
  margin: 0 .15rem;
  border: 1px solid var(--app-border);
  background: var(--app-surface);
}
@media (max-width: 991px) {
  .copy-field { display: none; }
}

.brand-logo-nav { height: 42px; width: auto; display:block; }
.brand-logo-login { max-width: 180px; height: auto; display:block; filter: drop-shadow(0 12px 24px rgba(0,0,0,.18)); }
.gallery-card {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: 24px;
  box-shadow: var(--app-shadow);
  overflow: hidden;
}
.gallery-preview {
  background: linear-gradient(135deg, rgba(148,163,184,.08), rgba(148,163,184,.16));
  aspect-ratio: 16/10;
  overflow: hidden;
}
.gallery-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-body { padding: 1rem; }
.gallery-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty-state { border: 1px dashed rgba(148,163,184,.25); border-radius: 24px; background: rgba(148,163,184,.05); }
.empty-illustration { width:72px; height:72px; border-radius:24px; display:grid; place-items:center; margin-inline:auto; background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(14,165,233,.2)); color: var(--brand); font-size: 1.6rem; }