:root {
  /* Theme variables are defined in themes.css via [data-theme].
     We keep safe defaults here (light). */
  --bg: #ffffff;
  --card: #ffffff;
  --surface-2: #f5f7fb;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --border-strong: rgba(2, 6, 23, 0.12);
  --blue: #2563eb;
  --blue-600: #1d4ed8;
  --blue-50: #eff6ff;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #f59e0b;
  --shadow: 0 14px 34px rgba(2, 6, 23, 0.08);
  --shadow-sm: 0 8px 20px rgba(2, 6, 23, 0.06);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --focus: 0 0 0 3px rgba(37,99,235,0.16);
  --topbar-bg: rgba(255,255,255,0.86);
  --menu-bg: var(--card);
  --input-bg: #ffffff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: var(--bg-grad, var(--bg));
  color: var(--text);
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; }

a { color: var(--blue); text-decoration: none; }
/* No underline on hover/focus (requested UX) */
a:hover, a:focus, a:active { text-decoration: none; }

/* Focus ring */
:where(a, button, input, select, textarea, summary):focus {
  outline: none;
}
:where(a, button, input, select, textarea, summary):focus-visible {
  box-shadow: var(--focus);
  border-color: var(--blue);
}

/* Improve native controls (checkbox/radio) */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--blue);
}

/* ---------------- Layout ---------------- */
.container { max-width: 1040px; margin: 0 auto; padding: 18px 16px 64px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}

.brand { display:flex; align-items:center; gap:10px; font-weight: 850; color: var(--text); }
.brandLogo {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  display: none;
  object-fit: contain;
  background: transparent;
  border: none;
}

.nav { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.nav a, .nav button {
  font: inherit;
  border: 1px solid rgba(37,99,235,0.22);
  background: var(--blue-50);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.nav a.active { border-color: var(--blue); box-shadow: var(--focus); }
.nav a:hover, .nav button:hover { border-color: var(--blue); transform: translateY(-2px); }
.nav button.primary, .btn.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.nav button.primary:hover, .btn.primary:hover { background: var(--blue-600); border-color: var(--blue-600); }

/* Apps entry: link + optional caret dropdown */
.navAppsWrap{ display:inline-flex; gap:6px; align-items:center; }
.navAppsDrop summary{ padding: 8px 10px; min-width: 40px; text-align:center; }

/* Nav dropdown (used by Press plugin menu) */
.navDrop { position: relative; }
.navDrop summary {
  list-style: none;
  font: inherit;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text);
  user-select: none;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.navDrop summary:hover { border-color: var(--blue); transform: translateY(-2px); }
.navDrop summary::-webkit-details-marker { display:none; }
.navDrop[open] summary,
.navDrop summary.active { border-color: var(--blue); box-shadow: var(--focus); }

.appsMenuGroup { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.appsMenuGroupTitle { font-size: 12px; color: var(--muted); padding: 4px 10px; }

.navDropMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  z-index: 50;
  background: var(--menu-bg, var(--card));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
}
.navDropMenu a {
  display: block;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 12px;
  transition: transform .16s ease, background .16s ease;
}
.navDropMenu a:hover { background: var(--blue-50); text-decoration: none; transform: translateX(2px); }
.navDropMenu a.active { background: var(--blue-50); }

.footer {
  border-top: 1px solid var(--border);
  padding: 18px 16px;
  color: var(--muted);
  text-align:center;
}

/* ---------------- Typography helpers ---------------- */
.h1 { font-size: 22px; margin: 0 0 10px; letter-spacing: -0.01em; }
.h2 { font-size: 18px; margin: 0 0 10px; letter-spacing: -0.01em; }
.h3 { font-size: 16px; margin: 0 0 10px; letter-spacing: -0.01em; }
.h4 { font-size: 14px; margin: 0 0 10px; letter-spacing: -0.01em; }
.p { color: var(--muted); margin: 0 0 12px; }

.hint { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.muted { color: var(--muted); }


/* ---------------- Utilities ---------------- */
.hidden{ display:none !important; }
.m0{ margin:0 !important; }
.mt0{ margin-top:0 !important; }
.mb0{ margin-bottom:0 !important; }
.mb2{ margin-bottom:2px !important; }
.mt4{ margin-top:4px !important; }
.mt6{ margin-top:6px !important; }
.mt8{ margin-top:8px !important; }
.mt10{ margin-top:10px !important; }
.mt12{ margin-top:12px !important; }
.mt14{ margin-top:14px !important; }
.mt16{ margin-top:16px !important; }
.mt18{ margin-top:18px !important; }
.mt3{ margin-top:3px !important; }
.mt2{ margin-top:2px !important; }
.mb4{ margin-bottom:4px !important; }
.mb6{ margin-bottom:6px !important; }
.mb8{ margin-bottom:8px !important; }
.mb10{ margin-bottom:10px !important; }
.mb12{ margin-bottom:12px !important; }
.mb14{ margin-bottom:14px !important; }
.mb16{ margin-bottom:16px !important; }
.m6{ margin:6px !important; }
.m8{ margin:8px !important; }
.m10{ margin:10px !important; }
.m12{ margin:12px !important; }
.mxauto{ margin-left:auto !important; margin-right:auto !important; }
.mlauto{ margin-left:auto !important; }
.mrauto{ margin-right:auto !important; }

.ml6{ margin-left:6px !important; }
.ml8{ margin-left:8px !important; }
.ml10{ margin-left:10px !important; }

.my2{ margin:2px 0 !important; }
.my4{ margin:4px 0 !important; }
.my6{ margin:6px 0 !important; }
.my8{ margin:8px 0 !important; }
.my10{ margin:10px 0 !important; }
.my12{ margin:12px 0 !important; }
.my14{ margin:14px 0 !important; }
.my16{ margin:16px 0 !important; }

.text800{ font-weight:800 !important; }

.alignEnd{ align-items:flex-end !important; }
.justifyBetween{ justify-content:space-between !important; }

.flex{ display:flex !important; }
.flexCenter{ display:flex !important; align-items:center !important; }
.flexStart{ display:flex !important; align-items:flex-start !important; }
.flexEnd{ display:flex !important; align-items:flex-end !important; }

.alignCenter{ align-items:center !important; }
.flex1{ flex:1 !important; }
.spanAll{ grid-column: 1 / -1 !important; }
.textRight{ text-align:right !important; }

.justifyEnd{ justify-content:flex-end !important; }
.justifyStart{ justify-content:flex-start !important; }

.op70{ opacity:.7 !important; }
.op80{ opacity:.8 !important; }

.scrollAuto{ overflow:auto !important; }
.ellipsis{ overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }

.grid1{ display:grid !important; grid-template-columns: 1fr !important; }
.grid2col{ display:grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap:12px !important; }
.grid2simple{ display:grid !important; grid-template-columns: 1fr 1fr !important; gap:12px !important; }

.minw0{ min-width:0 !important; }
.minw160{ min-width:160px !important; }
.minw220{ min-width:220px !important; }
.minw240{ min-width:240px !important; }
.minw140{ min-width:140px !important; }
.minw170{ min-width:170px !important; }
.minw180{ min-width:180px !important; }
.minw200{ min-width:200px !important; }
.minw260{ min-width:260px !important; }
.minw280{ min-width:280px !important; }
.minw320{ min-width:320px !important; }
.minw360{ min-width:360px !important; }
.minw720{ min-width:720px !important; }
.minw860{ min-width:860px !important; }

.justifyCenter{ justify-content:center !important; }
.col{ flex-direction:column !important; }
.noSelect{ user-select:none !important; }

.flex2{ flex:2 !important; }
.alignStretch{ align-items:stretch !important; }
.alignSelfEnd{ align-self:end !important; }

.pointerNone{ pointer-events:none !important; }
.disabledUI{ pointer-events:none !important; opacity:.6 !important; }

.hrline{ height:1px; background:var(--border); border-radius:999px; }

.summaryNoMarker{ cursor:pointer; list-style:none; }
.summaryNoMarker::-webkit-details-marker{ display:none; }

.pointer{ cursor:pointer !important; }

.p610{ padding:6px 10px !important; }
.p610fs12{ padding:6px 10px !important; font-size:12px !important; }
.p48fs12{ padding:4px 8px !important; font-size:12px !important; }
.p64{ padding:6px 4px !important; }
.p86{ padding:8px 6px !important; }
.p10{ padding:10px !important; }
.p12{ padding:12px !important; }

.maxw100{ max-width:100% !important; }
.maxw260{ max-width:260px !important; }
.maxw520{ max-width:520px !important; }
.maxw280{ max-width:280px !important; }

.op75{ opacity:.75 !important; }
.op90{ opacity:.9 !important; }

.pillImg26{ height:26px !important; border-radius:999px !important; object-fit:cover !important; }
.pillImg22{ height:22px !important; border-radius:999px !important; object-fit:cover !important; }

.nolink{ text-decoration:none !important; }




.gap6{ gap:6px !important; }
.gap8{ gap:8px !important; }
.gap10{ gap:10px !important; }
.gap12{ gap:12px !important; }
.gap14{ gap:14px !important; }
.wrap{ flex-wrap: wrap !important; }

.w100{ width:100% !important; }
.w90{ width:90px !important; }
.w110{ width:110px !important; }
.w120{ width:120px !important; }
.w140{ width:140px !important; }
.w150{ width:150px !important; }
.w160{ width:160px !important; }
.w180{ width:180px !important; }
.w220{ width:220px !important; }
.w240{ width:240px !important; }
.w260{ width:260px !important; }
.w280{ width:280px !important; }
.w22{ width:22px !important; }
.w26{ width:26px !important; }
.w28{ width:28px !important; }
.w34{ width:34px !important; }
.w38{ width:38px !important; }
.w40{ width:40px !important; }
.w42{ width:42px !important; }
.w54{ width:54px !important; }
.w56{ width:56px !important; }
.w80{ width:80px !important; }
.w96{ width:96px !important; }
.w130{ width:130px !important; }

.text700{ font-weight:700 !important; }
.text900{ font-weight:900 !important; }
.op85{ opacity:.85 !important; }
.prewrap{ white-space:pre-wrap !important; }

.flat{ box-shadow:none !important; }
.border1{ border:1px solid var(--border) !important; }

.divider{ height:1px; background:var(--border); margin:16px 0; border-radius:999px; }

.btnRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:center; }

.emojiGrid{ display:flex; gap:6px; flex-wrap:wrap; }

.wysPre{ white-space:pre-wrap; margin:8px 0; padding:10px; border-radius:12px; border:1px solid var(--border); background: rgba(2,6,23,0.03); }
:root[data-theme="dark"] .wysPre{ background: rgba(255,255,255,0.06); }
.wysQuote{ margin:8px 0; padding:8px 10px; border-left:3px solid var(--border); background: rgba(2,6,23,0.02); border-radius:10px; }
:root[data-theme="dark"] .wysQuote{ background: rgba(255,255,255,0.05); }
.wysUl{ margin:8px 0 8px 20px; }

.card.dangerCard{ margin:0; border-color: rgba(220,38,38,0.55); background: rgba(220,38,38,0.06); box-shadow:none; }
.card.dangerCard .dangerTitle{ color: var(--danger); font-weight:900; margin-bottom:6px; }
.card.dangerCard .dangerText{ margin:0 0 10px 0; color: var(--danger); }
.card.dangerCard .dangerActions{ display:flex; gap:10px; flex-wrap:wrap; }


.mono { font-family: var(--mono); font-size: 12.5px; }

.prose {
  line-height: 1.7;
}
.prose h1, .prose h2, .prose h3, .prose h4 { margin: 14px 0 10px; }
.prose p { margin: 10px 0; }
.prose ul, .prose ol { margin: 10px 0 10px 20px; }
.prose li { margin: 6px 0; }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.prose blockquote {
  margin: 12px 0;
  padding: 10px 12px;
  border-left: 3px solid rgba(37,99,235,0.40);
  background: rgba(37,99,235,0.06);
  border-radius: 12px;
  transition: transform .16s ease, background .16s ease;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.95em;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(2,6,23,0.05);
  border: 1px solid rgba(2,6,23,0.08);
}
:root[data-theme="dark"] .prose code {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.10);
}
.prose pre {
  overflow:auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(2,6,23,0.04);
}
:root[data-theme="dark"] .prose pre { background: rgba(255,255,255,0.06); }
.prose img { border-radius: 14px; border: 1px solid var(--border); }

/* Press content keeps compatibility but benefits from prose rules */
.pressBody { line-height: 1.7; }
.pressBody h1, .pressBody h2, .pressBody h3, .pressBody h4 { margin: 14px 0 10px; }
.pressBody p { margin: 10px 0; }
.pressBody ul, .pressBody ol { margin: 10px 0 10px 20px; }
.pressBody pre { overflow:auto; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(2,6,23,0.04); }
:root[data-theme="dark"] .pressBody pre { background: rgba(255,255,255,0.06); }
.pressBody img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); }

/* ---------------- Cards, grid, rows ---------------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 14px 0;
}

.pluginCard{ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }

/* Apps page: make the whole plugin card clickable without link styling */
.pluginCardLink{ display:block; color:inherit; text-decoration:none; }
.pluginCardLink:hover{ border-color: rgba(59,130,246,0.45); }

.pluginCardHead{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.pluginLogoImg,.pluginLogoFallback{ width:44px; height:44px; border-radius:12px; flex:0 0 44px; border:1px solid var(--border); background: var(--input-bg); }
.pluginLogoImg{ object-fit: cover; }
.pluginLogoFallback{ display:flex; align-items:center; justify-content:center; font-weight:900; color:#fff; background: var(--blue); }
.pluginLogoMini{ width:22px; height:22px; border-radius:6px; border:1px solid var(--border); object-fit:cover; background: var(--input-bg); }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.grid2{ display:grid; grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 720px) {
  .grid.cols2, .grid2.cols2 { grid-template-columns: 1fr 1fr; }
  .grid.cols3 { grid-template-columns: 1fr 1fr 1fr; }
}

.row { display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.split { display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap: wrap; }
.center { display:flex; align-items:center; justify-content:center; }
.nowrap { white-space: nowrap; }

/* Simple KPI cards */
.kpi{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
.kpi .kpiLabel{ color: var(--muted); font-size: 12px; }
.kpi .kpiValue{ font-weight: 900; font-size: 20px; margin-top: 6px; }

/* ---------------- Forms ---------------- */
.field label {
  display:block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Basic in-app editor (WYSIWYG) */
.editorBox {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card);
}
.editorToolbar {
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  background: rgba(2,6,23,0.03);
}
:root[data-theme="dark"] .editorToolbar { background: rgba(255,255,255,0.05); }
.editorToolbar button {
  border: 1px solid var(--border);
  background: transparent;
  padding: 6px 8px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--text);
}
.editorToolbar button:hover { background: rgba(37,99,235,0.08); border-color: rgba(37,99,235,0.30); }
.editorArea {
  min-height: 220px;
  padding: 12px;
  outline: none;
}
.editorArea:empty:before { content: attr(data-placeholder); color: var(--muted); }

/* Unify inputs across the whole app:
   - wrapper style: .field input
   - class style: input.field / .input
   - fallback: any text-like input/select/textarea inside .container */

:where(.field input, .field select, .field textarea,
       input.field, select.field, textarea.field,
       input.input, select.input, textarea.input,
       .input) {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font: inherit;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

/* Fallback for raw inputs without class (most pages already wrap with .field) */
.container :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]) {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font: inherit;
  outline: none;
  background: var(--input-bg);
  color: var(--text);
}

:where(.field input, .field select, .field textarea,
       input.field, select.field, textarea.field,
       input.input, select.input, textarea.input,
       .input,
       .container :where(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"])):focus {
  border-color: var(--blue);
  box-shadow: var(--focus);
}

textarea { resize: vertical; }

/* File input button */
input[type="file"]::file-selector-button {
  border: 1px solid rgba(37,99,235,0.22);
  background: var(--blue-50);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 12px;
  cursor: pointer;
  margin-right: 10px;
}
input[type="file"]::file-selector-button:hover { border-color: var(--blue); }

/* Buttons */
.btn {
  border: 1px solid var(--blue);
  background: var(--blue);
  color: #fff;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:hover {
  background: var(--blue-600);
  border-color: var(--blue-600);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(37,99,235,0.18);
}
.btn:active { transform: translateY(0px) scale(0.99); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; }

.btn.sm { padding: 7px 10px; border-radius: 11px; font-size: 12.5px; }

.btn.secondary {
  border-color: rgba(37,99,235,0.22);
  background: var(--blue-50);
  color: var(--text);
}
.btn.secondary:hover {
  background: rgba(37,99,235,0.12);
  border-color: var(--blue);
  box-shadow: 0 10px 26px rgba(37,99,235,0.12);
}

.btn.danger {
  border-color: rgba(220,38,38,0.55);
  background: rgba(220,38,38,0.10);
  color: var(--danger);
}
.btn.danger:hover {
  background: rgba(220,38,38,0.16);
  border-color: rgba(220,38,38,0.75);
  box-shadow: 0 10px 26px rgba(220,38,38,0.16);
}

/* Badges / pills */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  border: 1px solid var(--border);
  background: var(--card);
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
}

.pill{
  display:none;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 12px;
  color: var(--text);
}

.badge.ok { border-color: rgba(16,185,129,0.55); background: rgba(16,185,129,0.10); color: var(--text); }
.badge.ko { border-color: rgba(220,38,38,0.55); background: rgba(220,38,38,0.10); color: var(--text); }
.badge.warn { border-color: rgba(245,158,11,0.55); background: rgba(245,158,11,0.10); color: var(--text); }

.badge.donor { border-color: rgba(245,158,11,0.55); background: rgba(245,158,11,0.10); color: var(--text); }
.badge.donor .donorMark { font-size: 13px; line-height: 1; }
.badge.donor .donorBig { font-weight: 900; letter-spacing: .08em; }

/* Donor hero line (Profile) */
.donorHero {
  margin-top: 6px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: baseline;
}
.donorHero .donorUntil { font-weight: 900; }
.donorHero .donorLeft { color: var(--muted); font-weight: 750; }

/* Key/value rows */
.kv { display:grid; grid-template-columns: 160px 1fr; gap: 10px; }
.kv .k { color: var(--muted); font-size: 13px; }
.kv .v { font-weight: 650; }
.label{ color: var(--muted); font-size: 12px; }
.value{ font-weight: 700; }

/* Generic “link-like” action */
.link{ color: var(--blue); font-weight: 800; text-decoration: none; }
.link:hover{ text-decoration: none; }

/* Small helper for clickable IDs */
.ajOpen{ text-decoration: none; font-weight: 800; }
.ajOpen:hover{ text-decoration: none; }

/* Better visibility for selection checkboxes in lists */
input.c_sel{ width: 18px; height: 18px; }

/* Tables */
.table,
.container table {
  width:100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table th, .table td,
.container table th, .container table td {
  text-align:left;
  padding: 10px;
  border-bottom: 1px solid var(--border);
}
.table th, .container table th { color: var(--muted); font-weight: 650; }
.table tr:hover td, .container table tr:hover td { background: rgba(37,99,235,0.03); }

/* Make wide tables usable on mobile */
@media (max-width: 720px){
  .table,
  .container table{
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* Notices */
.notice {
  border: 1px solid rgba(37,99,235,0.25);
  background: rgba(37,99,235,0.06);
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--text);
}
.error {
  border: 1px solid rgba(220,38,38,0.28);
  background: rgba(220,38,38,0.06);
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--text);
}
.success {
  border: 1px solid rgba(16,185,129,0.28);
  background: rgba(16,185,129,0.06);
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--text);
}
.warn {
  border: 1px solid rgba(245,158,11,0.28);
  background: rgba(245,158,11,0.06);
  padding: 10px 12px;
  border-radius: 14px;
  color: var(--text);
}

/* Avatars */
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--surface-2);
}

/* Notifications bubble */
.notifBubble{
  margin-left:6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  line-height:18px;
  background: var(--card);
  color:var(--text);
}

.notifBubble.on{ display:inline-flex; }

/* Toasts (live WS notifications) */
.toastWrap{
  position:fixed;
  top: 12px;
  right: 12px;
  z-index: 9999;
  display:flex;
  flex-direction:column;
  gap: 10px;
  pointer-events:none;
}
.toast{
  pointer-events:auto;
  max-width: 340px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 16px;
  padding: 12px 12px;
  color: var(--text);
}
.toast a{ color: var(--blue); text-decoration:none; font-weight:800; }
.toast a:hover{ text-decoration: none; }
.toast.error{ border-color: rgba(220,38,38,0.35); }
.toast.success{ border-color: rgba(22,163,74,0.35); }

/* Details / accordions */
details {
  border-radius: 14px;
}
details > summary {
  cursor: pointer;
  user-select: none;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.navDrop summary:hover { border-color: var(--blue); transform: translateY(-2px); }

details.card > summary {
  list-style: none;
  margin: -16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
}
details.card > summary::-webkit-details-marker { display:none; }
details.card[open] > summary { background: rgba(37,99,235,0.05); }
details.card > summary + * { margin-top: 14px; }

/* Minimal styles for IP Info / QRCode components if plugin CSS is absent */
.ipinfo-details { border: 1px solid var(--border); background: var(--card); padding: 10px 12px; border-radius: 14px; }
.ipinfo-details > summary { font-weight: 750; color: var(--text); }
.ipinfo-summary { color: var(--muted); font-size: 12.5px; margin-top: 6px; }

.qrc-grid { display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px){ .qrc-grid { grid-template-columns: 1fr 1fr; } }
.qrc-chip { display:inline-flex; align-items:center; gap:6px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 12px; }
.qrc-muted { color: var(--muted); }

/* QR wrapper (canvas container) */
.qrwrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 10px;
  border-radius: 16px;
  border: 1px dashed var(--border);
}

/* Simple chart container (admin stats) */
.chartBox{ position:relative; width:100%; height:240px; }
.chartBox canvas{ width:100% !important; height:100% !important; }

/* Fileshare mini QR wrapper (if present) */
.fsMiniQrWrap{ display:inline-flex; align-items:center; justify-content:center; }

/* Grid span helpers (if used in some admin pages) */
.span3 { grid-column: span 3; }
.span4 { grid-column: span 4; }
.span6 { grid-column: span 6; }
.span8 { grid-column: span 8; }
@media (max-width: 900px) { .span3,.span4,.span6,.span8 { grid-column: span 12; } }

/* SSH terminal (minitel-like, used by SSH plugin when classes exist) */
.ssh-terminal{
  border: 1px solid rgba(16, 185, 129, 0.25);
  background: #03140a;
  color: #7CFFB2;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 42px rgba(0,0,0,0.25);
}
.ssh-terminal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(16, 185, 129, 0.18);
  background: rgba(0,0,0,0.25);
}
.ssh-terminal-title{ font-family: var(--mono); font-weight: 800; letter-spacing: .04em; }
.ssh-terminal-actions{ display:flex; gap: 8px; flex-wrap: wrap; }
.ssh-terminal-out{
  font-family: var(--mono);
  padding: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 220px;
  max-height: 52vh;
  overflow: auto;
  position: relative;
}
.ssh-terminal-out:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  mix-blend-mode: overlay;
}
.ssh-terminal-foot{
  padding: 10px 12px;
  border-top: 1px solid rgba(16, 185, 129, 0.18);
  background: rgba(0,0,0,0.22);
}
.ssh-cmdline{ display:flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.ssh-prompt{ font-family: var(--mono); font-weight: 900; }
.ssh-cmd{
  flex: 1;
  min-width: min(520px, 92vw);
  font-family: var(--mono);
  background: rgba(0,0,0,0.28) !important;
  border-color: rgba(16, 185, 129, 0.20) !important;
  color: #7CFFB2 !important;
}
.ssh-run-tip{ color: rgba(124,255,178,0.85); font-size: 12px; margin-top: 8px; }

/* ---------------- Auth pages ---------------- */
.authWrap{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 0;
  min-height: calc(100dvh - 140px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.authLogoWrap{ display: flex; justify-content: center; margin: 0 0 16px; }
.authLogo{
  width: 220px;
  height: 220px;
  object-fit: contain;
  border: none;
  background: transparent;
  border-radius: 20px;
}
.authCard{ margin: 0; }

/* ---------------- Mobile responsiveness tweaks ---------------- */
@media (max-width: 720px){
  .topbar{ padding: 10px 12px; }
  .brand{ gap: 8px; }
  .brandLogo{ width: 56px; height: 56px; border-radius: 16px; }
  .nav{ gap: 8px; }
  .nav a, .nav button{ padding: 7px 9px; border-radius: 12px; font-size: 13px; }
  .container{ padding: 14px 12px 54px; }
  .kv{ grid-template-columns: 120px 1fr; }
  .avatar{ width: 52px; height: 52px; border-radius: 14px; }
  .authWrap{ padding: 18px 0; min-height: calc(100dvh - 130px); }
  .authLogo{ width: 120px; height: 120px; border-radius: 18px; }
}

/* Share Files thumbnails (plugin) */
.fsThumbRow{ display:flex; gap:10px; align-items:center; }
.fsThumb{
  width:44px;
  height:44px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--blue-50);
  object-fit: cover;
  flex: 0 0 auto;
}
.fsThumbIcon{ display:flex; align-items:center; justify-content:center; font-weight: 850; font-size: 12px; color: var(--blue-600); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition: none !important; scroll-behavior: auto !important; }
}