/* =========================
   CORE THEME + VARIABLES
   ========================= */
:root {
  --color-mode: dark;
  --bg-root: radial-gradient(circle at 28% 22%, #1d232d, #121517 70%) fixed;
  --bg-layer: #121212;
  --bg-surface: rgba(30,30,30,0.9);
  --bg-surface-solid: #1E1E1E;
  --bg-surface-alt: #232323;
  --bg-glass: rgba(34,38,43,0.55);
  --bg-glass-strong: rgba(34,38,43,0.72);
  --bg-hover: #2C2C2C;
  --border-color: #33383d;
  --border-subtle: #2b3034;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,0.02) inset;
  --shadow-md: 0 6px 18px -4px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.45);

  --accent: #3B82F6;
  --accent-rgb: 59,130,246;
  --accent-hover: #2563EB;
  --accent-soft: rgba(var(--accent-rgb),0.16);
  --accent-softier: rgba(var(--accent-rgb),0.09);

  --success: #10B981;
  --error: #EF4444;
  --warn: #F59E0B;
  --success-soft: rgba(16,185,129,0.18);
  --error-soft: rgba(239,68,68,0.20);

  --text-primary: #E5E7EB;
  --text-secondary: #9CA3AF;
  --text-muted: #6B7280;
  --text-inverse: #111;
  --text-high-contrast: #ffffff;

  --radius-xs: .3rem;
  --radius-sm: .45rem;
  --radius: .6rem;
  --radius-md: .75rem;
  --radius-lg: .95rem;
  --radius-pill: 999px;

  --focus-ring: 0 0 0 3px rgba(var(--accent-rgb),0.35);
  --panel-gradient: linear-gradient(145deg,#1d1f22,#18191b);
  --transition: all 0.24s cubic-bezier(.4,.25,.3,1);
  --glass-blur: 14px;
  --glass-saturate: 175%;
  --glass-radius: var(--radius-lg);

  --ui-scale: 1;
  --icon-size: calc(30px * var(--ui-scale));
  --gap-size: calc(1rem * var(--ui-scale));
}

body.theme-light {
  --color-mode: light;
  --bg-root: linear-gradient(160deg,#f2f6fa,#e6ecf2);
  --bg-layer: #f5f7fa;
  --bg-surface: rgba(255,255,255,0.85);
  --bg-surface-solid: #ffffff;
  --bg-surface-alt: #f1f5f9;
  --bg-glass: rgba(255,255,255,0.58);
  --bg-glass-strong: rgba(255,255,255,0.74);
  --bg-hover: #e9eef4;
  --border-color: #d1d9e2;
  --border-subtle: #c5ced7;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,0.03) inset;
  --shadow-md: 0 8px 24px -6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.08);
  --text-primary: #1b2229;
  --text-secondary: #4b5763;
  --text-muted: #6c7a88;
  --text-inverse: #fff;
  --accent-soft: rgba(var(--accent-rgb),0.12);
  --accent-softier: rgba(var(--accent-rgb),0.06);
  --success-soft: rgba(16,185,129,0.12);
  --error-soft: rgba(239,68,68,0.12);
}

body.high-contrast {
  --text-primary: #ffffff;
  --text-secondary: #d8dde2;
  --text-muted: #b4bdc5;
}

/* BASE */
* { box-sizing: border-box; }
html, body { height:100%; }
body {
  margin:0;
  background: var(--bg-root);
  color: var(--text-primary);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.45;
  letter-spacing:.15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-color: var(--border-color) transparent;
  transition: background .6s ease, color .3s ease;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  touch-action: pan-x pan-y;
  position:relative;
  /* VERWIJDERD: contain: layout; omdat dit scroll blokkeerde op mobiele browsers */
}

/* Herstel: geen wijziging aan fixed gradient op mobile */
body.has-bg-image::before {
  content:"";
  position:fixed;
  inset:0;
  background: var(--dynamic-bg-image) center center / cover no-repeat;
  z-index:-1;
  will-change: transform;
  transform:translateZ(0);
}

body::-webkit-scrollbar { width: 12px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--bg-surface-alt),var(--bg-surface));
  border-radius:10px; border:2px solid rgba(0,0,0,.25);
}
body.theme-light::-webkit-scrollbar-thumb {
  background: #d2dae2;
  border:2px solid #f2f6fa;
}

.hidden { display:none!important; }
.fade-in { animation: fadeIn .45s ease both; }
@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:none;} }

.brand-badge {
  display:inline-flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%,#FACC15,#F59E0B);
  color:#111; width:38px; height:38px; border-radius:14px;
  font-weight:600; font-size:1.05rem;
  box-shadow:0 3px 8px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition: var(--transition);
}
.brand-badge.small { width:26px; height:26px; font-size:.8rem; border-radius:9px; }

.brand-inline { display:flex; align-items:center; gap:.55rem; }
.brand-heading { display:flex; align-items:center; gap:.75rem; margin:.25rem 0 1rem; }

.loader-container {
  display:flex; justify-content:center; align-items:center;
  position:fixed; inset:0; background:var(--bg-layer);
  z-index:11000; transition:opacity .3s;
}
.spinner {
  border: 4px solid rgba(255,255,255,0.12);
  border-left-color: var(--accent);
  border-radius:50%; width:56px; height:56px; animation:spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.view { display:none; min-height:100vh; width:100%; }
.view.active { display:flex; justify-content:center; align-items:center; }
#app-view.active { display:block; }

.container {
  width:100%; padding:0 1.25rem 3rem;
  margin:0 auto; max-width:620px;
  transition:max-width .35s;
  /* VERWIJDERD risky layout containment */
}
.container.roomy { max-width:760px; }
@media (min-width:1080px){ .container.roomy { max-width:900px; } }

/* TOPBAR */
.topbar {
  display:none; position:sticky; top:0; z-index:900;
  backdrop-filter: blur(12px) saturate(170%);
  background: rgba(20,22,25,0.72);
  border-bottom:1px solid rgba(255,255,255,0.05);
}
body.theme-light .topbar {
  background: rgba(255,255,255,0.7);
  border-bottom:1px solid #d8dee3;
}
.topbar-inner {
  max-width:1200px; margin:0 auto;
  padding:.55rem 1.15rem;
  display:flex; align-items:center; gap:14px;
}
.topbar-actions { display:flex; gap:10px; margin-left:auto; }
.hdr-btn {
  background:transparent; color:var(--text-secondary);
  padding:.5rem .75rem; border:1px solid transparent;
  border-radius: var(--radius-pill);
  font-size:.73rem; font-weight:600; letter-spacing:.55px;
  cursor:pointer; transition: var(--transition);
  position:relative;
  text-transform:uppercase;
}
.hdr-btn:hover {
  color:var(--text-primary);
  background: var(--accent-softier);
}
.hdr-btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }
.hdr-btn.active {
  color:var(--success);
  background: var(--success-soft);
}
.hdr-btn.hdr-danger:hover {
  background: var(--error-soft);
  color: var(--text-primary);
}
@media (min-width:768px){ .topbar { display:block; } .fab { display:none!important; } }

/* HEADERS / BREADCRUMBS */
.app-header { display:flex; justify-content:center; margin:1.1rem 0 .75rem; }
.app-header h1 {
  margin:0; font-size:1.85rem; font-weight:600; letter-spacing:.5px;
  width:100%; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.breadcrumb-nav {
  margin-bottom:1.25rem; display:flex; flex-wrap:wrap; gap:.55rem; align-items:center;
  color: var(--text-muted); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.08em;
}

.breadcrumb-nav .chip {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.38rem .75rem .38rem .65rem;
  background: var(--bg-surface);
  border:1px solid var(--border-color);
  color: var(--text-secondary);
  text-decoration:none;
  border-radius: var(--radius-pill);
  font-weight:600;
  font-size:.62rem;
  letter-spacing:.07em;
  position:relative;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
body.theme-light .breadcrumb-nav .chip {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}
.breadcrumb-nav .chip:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  transform: translateY(-2px);
}
body.theme-light .breadcrumb-nav .chip:hover {
  background: var(--bg-hover);
}
.breadcrumb-nav .chip:focus-visible {
  outline:none;
  box-shadow: var(--focus-ring);
}
.breadcrumb-nav .crumb-icon {
  width:16px;
  height:16px;
  border-radius:6px;
  background:#20252b;
  box-shadow: inset 0 0 0 1px #2d343c;
  flex-shrink:0;
  position:relative;
}
body.theme-light .breadcrumb-nav .crumb-icon {
  background:#e6ecf2;
  box-shadow: inset 0 0 0 1px #d1d9e2;
}
.breadcrumb-nav .chip .crumb-label {
  white-space:nowrap;
  max-width:140px;
  overflow:hidden;
  text-overflow:ellipsis;
}
.breadcrumb-nav .sep {
  margin:0 .15rem;
  color: var(--text-muted);
  user-select:none;
}

.sep { color: var(--text-muted); user-select:none; }

/* LIST ITEMS */
.item-list { list-style:none; padding:0; margin:0; }

.list-item {
  display:flex; align-items:center; gap:.55rem;
  padding: calc(.75rem * var(--ui-scale)) calc(.95rem * var(--ui-scale));
  border:1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  margin-bottom: calc(.75rem * var(--ui-scale));
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  color: var(--text-primary);
  position:relative;
  isolation:isolate;
  contain: paint;
}
body.glass-enabled .list-item {
  background: var(--bg-glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}
body.theme-light.glass-enabled .list-item {
  background: var(--bg-glass);
  border-color: rgba(var(--accent-rgb),0.15);
}
.item-list:not(.edit-mode) .list-item { cursor:pointer; }
.item-list:not(.edit-mode) .list-item:hover {
  background: var(--bg-surface-alt);
  transform: translateY(-2px);
  border-color: var(--accent-soft);
}
body.glass-enabled .item-list:not(.edit-mode) .list-item:hover {
  background: var(--bg-glass-strong);
  border-color: var(--accent);
}
.list-item:focus-within {
  outline:none; box-shadow: var(--focus-ring); transform:scale(1.012);
}

.list-item.is-category {
  background: linear-gradient(145deg,var(--bg-surface-solid),var(--bg-surface));
}
body.glass-enabled .list-item.is-category {
  background: var(--bg-glass);
}
.item-main, .list-item-link {
  display:flex; align-items:center; flex-grow:1; min-width:0;
  text-decoration:none; color:inherit;
}

.item-icon {
  width: var(--icon-size); height: var(--icon-size);
  margin-right: var(--gap-size);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size: calc(18px * var(--ui-scale)); line-height:1;
  background: #20252b; border-radius: 12px;
  box-shadow: inset 0 0 0 1px #2d343c;
  transition: var(--transition);
}
body.theme-light .item-icon {
  background:#e6ecf2; box-shadow: inset 0 0 0 1px #d1d9e2; color:#334155;
}
.is-category .item-icon {
  background:#20252b;
  color:#fff;
  box-shadow: inset 0 0 0 1px #2d343c;
}
body.theme-light .is-category .item-icon {
  background:#e6ecf2;
  box-shadow: inset 0 0 0 1px #d1d9e2;
  color:#334155;
}
.favicon.item-icon {
  background:#1b1d1f; box-shadow: inset 0 0 0 0px #2c3238; object-fit:cover; padding:2px;
}
body.theme-light .favicon.item-icon {
  background:#fff; box-shadow: inset 0 0 0 0px #ccd5dd;
}

.item-title {
  flex-grow:1; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; font-size:calc(1rem * var(--ui-scale));
  font-weight:500; letter-spacing:.2px;
}

/* ===== AANGEPAST / VERGROOT DRAG HANDLE ===== */
.drag-handle {
  position:relative;
  cursor:grab;
  font-size: calc(1.6rem * var(--ui-scale));
  line-height:1;
  color: var(--text-secondary);
  user-select:none;
  margin-right:.35rem;
  display:none;
  width:34px;
  height:34px;
  border-radius:8px;
  align-items:center;
  justify-content:center;
  touch-action:none;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s, color .18s;
}
.drag-handle::before {
  content:"";
  position:absolute;
  inset:-10px;
}
.item-list.edit-mode .drag-handle { display:flex; }
.drag-handle:active {
  cursor:grabbing;
  background: var(--accent-softier);
  color: var(--text-primary);
}
@media (pointer:coarse) {
  .drag-handle {
    width:44px;
    height:44px;
    font-size: calc(2rem * var(--ui-scale));
  }
}
body.is-touch .drag-handle {
  background: rgba(255,255,255,0.04);
}
body.is-touch .drag-handle:active {
  background: var(--accent-soft);
}

.edit-controls { display:none; margin-left:auto; align-items:center; gap:.35rem; padding-left:.25rem; }
.item-list.edit-mode .edit-controls { display:flex; }
.item-list.edit-mode .item-title { color: var(--text-secondary); }
.item-list.edit-mode .list-item-link { pointer-events:none; }

.icon-btn {
  cursor:pointer; font-size: calc(1.1rem * var(--ui-scale));
  color: var(--text-secondary); transition:var(--transition);
  background:none; border:none; display:inline-flex; padding:.35rem;
  border-radius: var(--radius-sm);
}
.icon-btn:hover {
  color:var(--text-primary); background: var(--accent-softier);
  transform: scale(1.06);
}
.icon-btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.72rem 1rem;
  border-radius: var(--radius);
  font-weight:600; letter-spacing:.4px; font-size:.85rem;
  cursor:pointer; border:1px solid var(--accent);
  background: var(--accent); color:#fff;
  transition: var(--transition); text-decoration:none;
  position:relative;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }
.btn:active { transform:translateY(1px); }

.btn-secondary {
  background: var(--bg-surface-alt);
  border-color: var(--border-color); color: var(--text-primary);
}
.btn-secondary:hover { background: var(--accent-soft); }

.btn-outline {
  background: linear-gradient(145deg,var(--bg-surface-alt),var(--bg-surface));
  border-color: var(--border-color); color: var(--text-secondary);
}
.btn-outline:hover { color:var(--text-primary); border-color: var(--accent); }

.btn-danger-soft {
  background: var(--error-soft); color:#fff;
  border-color: rgba(239,68,68,.55);
}
.btn-danger-soft:hover { background: rgba(239,68,68,.3); }

.btn-primary-wide { width:100%; }
.btn.small { padding:.45rem .65rem; font-size:.68rem; line-height:1; }

.badge {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.18rem .55rem;
  border-radius: var(--radius-pill);
  font-size:.65rem; letter-spacing:.05em;
  background: var(--accent-softier);
  border:1px solid var(--border-subtle);
  color: var(--text-secondary); font-weight:600;
}

/* FORMS */
.form-group { margin-bottom:1.05rem; }
.inline-remember { margin-top:-.35rem; }
.checkbox { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; font-size:.75rem; font-weight:600; letter-spacing:.05em; color:var(--text-secondary); }
.checkbox input { width:16px; height:16px; }

.form-group label {
  display:block; margin-bottom:.4rem;
  color:var(--text-secondary); font-weight:600;
  font-size:.65rem; letter-spacing:.08em; text-transform:uppercase;
}

input[type="text"], input[type="password"], input[type="url"],
input[type="file"], select, textarea {
  width:100%; padding:.65rem .8rem;
  border-radius:.7rem; border:1px solid var(--border-subtle);
  background: var(--bg-surface-alt); color: var(--text-primary);
  transition: var(--transition); font-size:.9rem; font-family:inherit;
}
body.theme-light input[type="text"],
body.theme-light input[type="password"],
body.theme-light input[type="url"],
body.theme-light input[type="file"],
body.theme-light select, body.theme-light textarea {
  background:#fff; border-color:#cfd6de;
}
input[type="file"] { padding:.45rem .6rem; }
input::placeholder, textarea::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
  outline:none;
}

.theme-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.radio-chip {
  display:inline-flex; align-items:center; gap:.4rem;
  background: var(--accent-softier);
  padding:.45rem .75rem;
  border-radius: var(--radius-pill);
  font-size:.7rem; font-weight:600; letter-spacing:.05em;
  border:1px solid var(--border-subtle); cursor:pointer;
  user-select:none;
}
.radio-chip input { display:none; }
.radio-chip:has(input:checked) {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--text-primary);
}

.toggle {
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  cursor:pointer; font-size:.7rem; font-weight:600; letter-spacing:.05em;
  user-select:none; color: var(--text-secondary);
}
.toggle input { display:none; }
.toggle-slider {
  width:38px; height:20px; background: var(--border-subtle);
  border-radius:999px; position:relative; transition: var(--transition);
}
.toggle-slider::after {
  content:""; position:absolute; top:2px; left:3px;
  width:16px; height:16px; background: var(--bg-surface-solid);
  border-radius:50%; transition: var(--transition);
  box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.toggle input:checked + .toggle-slider {
  background: var(--accent);
}
.toggle input:checked + .toggle-slider::after {
  transform: translateX(17px);
  background:#fff;
}
.toggle-label { font-size:.65rem; text-transform:uppercase; }

.form-inline { display:flex; gap:1rem; flex-wrap:wrap; margin-top:.75rem; }

.accent-swatches { display:flex; gap:.55rem; flex-wrap:wrap; }
.swatch {
  width:38px; height:38px; border-radius:12px;
  background: var(--swatch); cursor:pointer;
  border:2px solid rgba(255,255,255,0.15);
  box-shadow:0 2px 4px rgba(0,0,0,.35);
  transition: var(--transition);
  position:relative;
}
body.theme-light .swatch { border:2px solid rgba(0,0,0,.08); }
.swatch:hover { transform:translateY(-3px) scale(1.05); }
.swatch.is-active {
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.55), 0 2px 6px rgba(0,0,0,.4);
  border-color:#fff;
}

.auth-container { width:100%; max-width:450px; padding:1rem; }
.auth-form {
  background: var(--panel-gradient);
  border:1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding:1.35rem 1.35rem 1.25rem;
  box-shadow: var(--shadow-md);
  position:relative; overflow:hidden;
  backdrop-filter: blur(10px) saturate(160%);
}
body.theme-light .auth-form {
  background: linear-gradient(145deg,#ffffff,#f0f4f8);
}
body.glass-enabled .auth-form {
  background: var(--bg-glass);
}
.auth-form::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 85% 15%, var(--accent-soft), transparent 60%);
  opacity:.6; pointer-events:none;
}
.form-switch { color: var(--text-muted); text-align:center; font-size:.75rem; }
.form-switch a { color: var(--accent); text-decoration:none; }
.form-switch a:hover { text-decoration:underline; }

/* Notifications */
#notification-container {
  position:fixed; top:1rem; right:1rem;
  z-index:9999; display:flex; flex-direction:column; gap:.6rem;
  width:min(340px,90vw);
}
.notification {
  padding:.85rem 1rem .85rem .95rem;
  border-radius: var(--radius-lg);
  color:#fff; box-shadow: var(--shadow-sm);
  opacity:0; transform: translateX(60px) scale(.95);
  animation: slideIn .35s cubic-bezier(.4,.25,.3,1) forwards,
             fadeOut .6s ease 5.2s forwards;
  font-size:.8rem; line-height:1.35; position:relative;
  backdrop-filter: blur(12px) saturate(160%);
}
.notification.success { background: linear-gradient(135deg,#059669,#047857); }
.notification.error { background: linear-gradient(135deg,#DC2626,#B91C1C); }
.notification::after {
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  pointer-events:none;
}
@keyframes slideIn { to { opacity:1; transform:translateX(0) scale(1); } }
@keyframes fadeOut { to { opacity:0; transform:translateX(10px); } }

/* FAB / overlay / side panel */
.fab {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:1002;
  width:56px; height:56px; border-radius:50%; border:none;
  background: linear-gradient(135deg,var(--accent),var(--accent-hover));
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md); cursor:pointer; transition: var(--transition);
  color:#fff;
}
.fab:hover { transform: scale(1.08) translateY(-2px); }
.fab:active { transform: scale(.95); }
.fab svg { width:24px; height:24px; stroke:currentColor; }

.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.42);
  z-index:1000; opacity:0; pointer-events:none; transition:opacity .3s;
  backdrop-filter: blur(3px);
}
.overlay.is-visible { opacity:1; pointer-events:auto; }

.side-panel {
  position:fixed; top:0; right:0; width:280px; height:100%;
  background: var(--bg-surface);
  z-index:1001; box-shadow:-2px 0 14px rgba(0,0,0,.35);
  transform: translateX(100%); transition: var(--transition);
  padding:1.5rem 1.25rem; border-left:1px solid var(--border-subtle);
  overflow-y:auto;
  backdrop-filter: blur(14px) saturate(180%);
}
body.theme-light .side-panel { background: rgba(255,255,255,0.86); }
.side-panel.is-open { transform:translateX(0); }
.panel-btn {
  width:100%; text-align:left;
  padding:.9rem 1rem; margin-bottom:.75rem;
  border:1px solid var(--border-color);
  background: linear-gradient(145deg,var(--bg-surface-alt),var(--bg-surface));
  border-radius: var(--radius);
  font-size:.8rem; color: var(--text-primary);
  cursor:pointer; transition: var(--transition); letter-spacing:.5px;
}
.panel-btn:hover { background: var(--accent-softier); border-color: var(--accent); }
.panel-btn:focus-visible { outline:none; box-shadow: var (--focus-ring); }
.panel-btn.panel-danger { background: var(--error-soft); border-color: rgba(239,68,68,.4); }
.panel-btn.panel-danger:hover { background: rgba(239,68,68,.28); }

.sortable-ghost { opacity:.4; background: var(--accent-soft)!important; }
.sortable-drag { cursor:grabbing; }

.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2000; padding:1rem; }
.modal.is-open { display:flex; }
.modal-content {
  position:relative;
  background: var(--panel-gradient);
  border:1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width:100%; max-width:480px;
  padding:1.5rem 1.35rem 1.35rem;
  box-shadow: var(--shadow-md);
  overflow:hidden;
  backdrop-filter: blur(14px) saturate(170%);
}
body.theme-light .modal-content {
  background: linear-gradient(145deg,#ffffff,#eef3f7);
}
body.glass-enabled .modal-content {
  background: var(--bg-glass);
}
.modal-content::before {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 78% 18%, var(--accent-soft), transparent 60%);
  opacity:.55; pointer-events:none;
}
.modal-content.modal-wide { max-width:900px; }
.modal-close {
  position:absolute; top:8px; right:8px;
  width:36px; height:36px;
  border:1px solid var(--border-color);
  background:var(--bg-surface-alt);
  color: var(--text-secondary);
  border-radius:50%; cursor:pointer;
  font-size:20px; line-height:20px;
  transition: var(--transition);
}
.modal-close:hover { background: var(--accent-soft); color: var(--text-primary); }
.modal-close:focus-visible { outline:none; box-shadow: var(--focus-ring); }
.modal-actions { display:flex; gap:.6rem; justify-content:flex-end; margin-top:1.1rem; }
.hint { color: var(--text-muted); margin-top:.75rem; font-size:.68rem; line-height:1.3; }
.subhead { margin:.35rem 0 .6rem; font-size:.78rem; color: var(--text-secondary); font-weight:700; letter-spacing:.55px; text-transform:uppercase; }

.settings-group {
  padding-top:1rem;
  margin-top:1.15rem;
  border-top:1px solid var(--border-color);
}
.settings-group.first {
  margin-top:0;
  border-top:none;
  padding-top:0;
}

.separator { text-align:center; color: var(--text-muted); margin:.75rem 0; font-size:.65rem; letter-spacing:.5px; }
.muted { color: var(--text-muted); }

.visually-hidden { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

.admin-topbar, .admin-table-wrapper { backdrop-filter: blur(14px) saturate(170%); }

@media (prefers-reduced-motion:reduce) {
  * { animation:none!important; transition:none!important; }
}