/* Translucent outer chrome surrounds opaque work surfaces. */
:root {
  --modern-shell: rgba(255,255,255,0.92);
  --modern-shell-edge: rgba(148,163,184,0.62);
  --modern-shell-glint: rgba(255,255,255,0.70);
  --modern-shell-shadow: 0 18px 48px rgba(15,23,42,0.18);
}
[data-theme="dark"] {
  --modern-shell: rgba(17,24,39,0.94);
  --modern-shell-edge: rgba(148,163,184,0.35);
  --modern-shell-glint: rgba(255,255,255,0.07);
  --modern-shell-shadow: 0 18px 48px rgba(0,0,0,0.35);
}
.admin-panel > :is(.modal-content,.modal-container) {
  border: 1px solid var(--modern-shell-edge);
  border-radius: 18px;
  background: var(--modern-shell);
  box-shadow: inset 0 1px 0 var(--modern-shell-glint),var(--modern-shell-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.admin-panel .modal-header {
  align-items: flex-start;
  padding: 20px 24px;
  background: linear-gradient(120deg,var(--modern-shell-glint),transparent 70%);
}
.admin-panel .modal-body { background: var(--bg-surface); color: var(--text-primary); padding: 22px 24px; }
.admin-heading { min-width: 0; }
.admin-panel .admin-eyebrow {
  margin: 0 0 5px;
  color: var(--text-secondary);
  font-size: 0.70rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.admin-panel .admin-heading h3 { font-size: 1.18rem; line-height: 1.4; font-weight: 700; }
.admin-panel .admin-description { margin: 6px 0 0; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.55; }
.admin-panel .modal-close { border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border-color); }
.admin-panel :is(.form-control,.wysiwyg-editor,.word-ribbon) {
  background: var(--bg-card);
  color: var(--text-primary);
  backdrop-filter: none;
}
.admin-panel .form-label { font-weight: 600; font-size: 0.88rem; }
.admin-panel .form-control { border-radius: 8px; min-height: 44px; }
.admin-panel .form-control::placeholder,#adminLoginPassword::placeholder { color: var(--text-secondary); opacity: 1; }
#imageDialogModal > .modal-content { background: var(--bg-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
#adminLoginDialog {
  /* Match the shell despite the existing controller's inline styles. */
  background: var(--modern-shell) !important;
  border-color: var(--modern-shell-edge) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 var(--modern-shell-glint),var(--modern-shell-shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#adminLoginDialog::backdrop { background: rgba(15,23,42,0.65); backdrop-filter: none; }
.admin-live-toolbar {
  background: var(--modern-shell);
  color: var(--text-primary);
  border-top: 1px solid var(--modern-shell-edge);
  box-shadow: inset 0 1px 0 var(--modern-shell-glint),0 -8px 28px rgba(15,23,42,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.admin-live-toolbar > span { color: var(--text-primary) !important; font-size: 0.82rem !important; }
.admin-live-toolbar [onclick="logoutAdminMode()"] { color: #991b1b !important; background: #fee2e2 !important; border-color: #fca5a5 !important; }
[data-theme="dark"] .admin-live-toolbar [onclick="logoutAdminMode()"] { color: #fecaca !important; background: #450a0a !important; border-color: #991b1b !important; }
@media (max-width: 600px) {
  .admin-panel .modal-header { padding: 16px; }
  .admin-panel .modal-body { padding: 16px; }
  .admin-panel .admin-heading h3 { font-size: 1.06rem; }
  .admin-panel > :is(.modal-content,.modal-container),#adminLoginDialog,.admin-live-toolbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--bg-surface) !important;
  }
}
@supports not (backdrop-filter: blur(1px)) {
  .admin-panel > :is(.modal-content,.modal-container),#adminLoginDialog,.admin-live-toolbar { background: var(--bg-surface) !important; }
}

@media (forced-colors: active) {
  .hero-ambient { display: none; }
  .admin-panel > :is(.modal-content,.modal-container),#adminLoginDialog,.admin-live-toolbar {
    background: Canvas !important;
    color: CanvasText;
    border: 1px solid CanvasText;
    box-shadow: none;
    backdrop-filter: none;
  }
  .admin-panel :is(button,input,select,textarea,[contenteditable]):focus-visible,
  .site-motion-toggle:focus-visible { outline-color: Highlight; }
}