/* Admin base (themeable) */
:root{
  --bg:#f7f7fb;
  --text:#111827;
  --muted:#6b7280;
  --card:#ffffff;
  --border:#e5e7eb;
  --link:#2563eb;
  --linkHover:#1d4ed8;
  --btn:#111827;
  --btnText:#ffffff;
  --btnGhostBg:transparent;
  --btnGhostText:var(--text);
  --focus:rgba(37,99,235,.35);
}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  margin:24px;
  max-width:1100px;
  background:var(--bg);
  color:var(--text);
}

a{color:var(--link);text-decoration:none}
a:hover{color:var(--linkHover);text-decoration:underline}

nav a{margin-right:12px}

.container{display:flex;gap:18px;align-items:flex-start}
.sidebar{min-width:220px}
.content{flex:1;min-width:0}

.card{
  border:1px solid var(--border);
  padding:14px;
  border-radius:12px;
  margin:12px 0;
  background:var(--card);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}

/* Avoid styling checkboxes/radios like text inputs */
input:not([type=checkbox]):not([type=radio]),select,textarea,button{
  padding:10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
}

input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus,button:focus{
  outline:2px solid var(--focus);
  outline-offset:2px;
}

/* Checkbox/radio sizing and alignment */
input[type=checkbox],input[type=radio]{
  width:16px;height:16px;
  margin:0 8px 0 0;
  padding:0;
  border-radius:4px;
  vertical-align:middle;
}
label{vertical-align:middle}

button{
  background:var(--btn);
  color:var(--btnText);
  border-color:rgba(0,0,0,.12);
  cursor:pointer;
}
button:hover{filter:brightness(.95)}
button.ghost{
  background:var(--btnGhostBg);
  color:var(--btnGhostText);
}

.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);font-size:12px}

.notice{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:rgba(0,0,0,.02)}
.notice.ok{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.notice.err{border-color:rgba(239,68,68,.35);background:rgba(239,68,68,.08)}
.notice.info{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.08)}

.small{font-size:13px;color:var(--muted)}

/* Beta.4: dark sidebar / light content shell */
:root{
  /* Keep topbar + sidebar brand aligned */
  --topbarH:64px;
  /* Single source of truth for header heights */
  --shellH:var(--topbarH);
  --sidebarBg:#0b1220;
  --sidebarBorder:rgba(148,163,184,.18);
  --sidebarText:rgba(226,232,240,.86);
  --sidebarTextStrong:#e2e8f0;
  --sidebarHoverBg:rgba(148,163,184,.10);
  --sidebarActiveBg:rgba(255,255,255,.08);
  --sidebarW:260px;
  --sidebarBrandH:var(--shellH);
}

body{
  margin:0;
  max-width:none;
  padding:0;
  background:var(--bg);
}

/* Turn existing top logo + nav into a fixed sidebar */
.sidebar-brand{
  position:fixed;
  left:0;
  top:0;
  width:var(--sidebarW);
  height:var(--sidebarBrandH);
  padding:0 18px;
  display:flex;
  align-items:center;
  background:var(--sidebarBg);
  border-right:1px solid var(--sidebarBorder);
  border-bottom:1px solid var(--sidebarBorder);
  box-sizing:border-box;
  z-index:60;
}
.sidebar-brand a{color:var(--sidebarTextStrong)}

/* Ensure the logo never forces the brand taller than the topbar */
.sidebar-brand img{max-height:32px;width:auto;display:block}

.sidebar-nav{
  position:fixed;
  left:0;
  top:var(--sidebarBrandH);
  width:var(--sidebarW);
  padding:10px 12px 18px;
  height:calc(100vh - var(--sidebarBrandH));
  overflow:auto;
  background:var(--sidebarBg);
  border-right:1px solid var(--sidebarBorder);
  box-sizing:border-box;
  z-index:59;
}

.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:10px;
  margin:2px 0;
  padding:10px 12px;
  border-radius:10px;
  color:var(--sidebarText);
  text-decoration:none;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.sidebar-nav a:hover{background:var(--sidebarHoverBg);color:var(--sidebarTextStrong);transform:translateX(2px)}

/* Active link support (layout adds .active when possible; fallback keeps look consistent) */
.sidebar-nav a.active{background:var(--sidebarActiveBg);color:var(--sidebarTextStrong)}

.nav-ico{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:rgba(226,232,240,.72);transition:color .18s ease,transform .18s ease}
.sidebar-nav a:hover .nav-ico{color:rgba(226,232,240,.88)}
.sidebar-nav a.active .nav-ico{color:var(--sidebarTextStrong)}
.nav-ico svg{width:16px;height:16px;display:block}
.nav-ico svg *{stroke-width:1.85 !important;stroke-linecap:round;stroke-linejoin:round}



/* Collapsible admin submenu (Beta.4.7) */
.nav-collapsible{margin-top:4px}
.nav-collapsible summary{list-style:none}
.nav-collapsible summary::-webkit-details-marker{display:none}
.nav-parent{
  display:flex;
  align-items:center;
  gap:10px;
  margin:2px 0;
  padding:10px 12px;
  border-radius:10px;
  color:var(--sidebarText);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav-collapsible:hover .nav-parent{background:var(--sidebarHoverBg);color:var(--sidebarTextStrong);transform:translateX(2px)}
.nav-parent.active{background:var(--sidebarActiveBg);color:var(--sidebarTextStrong);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.nav-chev{margin-left:auto;opacity:.7;display:inline-flex;align-items:center}
.nav-chev svg{width:12px;height:12px;display:block;transition:transform .18s ease}
.nav-collapsible[open] .nav-chev svg{transform:rotate(90deg)}
.nav-sub{padding:2px 0 6px 26px}
.nav-sub a{padding:8px 10px;border-radius:9px;font-size:13px;opacity:.92}
.nav-sub a:hover{opacity:1}

.nav-count{
  margin-left:auto;
  font-size:12px;
  opacity:.65;
  padding-left:10px;
}

.nav-sub-label{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.65;padding:8px 10px 6px}
.nav-sub-org{margin:6px 10px 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.6}
.nav-sub-ico{width:14px;height:14px;display:inline-flex}
.nav-sub-ico svg{width:14px;height:14px;display:block}
/* Micro-interactions */
.sidebar-nav a:hover .nav-ico{transform:translateX(1px)}
.sidebar-nav a.active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}

.sidebar-sep{display:none}

/* Page content area */
body > hr + * ,
body > hr{
  /* handled by .sidebar-sep */
}

/* Layout: keep sidebar fixed, shift the app shell (not the whole body) */
.page-wrap{
  margin-left:var(--sidebarW);
  max-width:none;
  min-height:100vh;
}

/* Mobile sidebar scrim */
.sidebar-scrim{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.55);
  backdrop-filter:blur(2px);
  z-index:58;
}

/* Responsive layout (Beta.4.8): off-canvas sidebar */
@media (max-width: 900px){
  .page-wrap{margin-left:0}
  .container{padding:14px 14px}
  .topbar{padding:0 14px}
  .sidebar-toggle{display:inline-flex}

  .sidebar-brand,
  .sidebar-nav{
    width:288px;
    transform:translateX(-102%);
    transition:transform .2s ease;
    box-shadow:0 16px 60px rgba(0,0,0,.45);
  }
  /* Keep the opened mobile menu above the sticky topbar */
  .sidebar-brand{z-index:80}
  .sidebar-nav{z-index:79}

  html.sidebar-open .sidebar-brand,
  html.sidebar-open .sidebar-nav{transform:translateX(0)}

  html.sidebar-open .sidebar-scrim{display:block}
  .sidebar-scrim{display:none;z-index:78}
  .sidebar-scrim[hidden]{display:none}

  /* Tables: allow horizontal scroll */
  .table{display:block;overflow-x:auto;white-space:nowrap}
}

@media (max-width: 520px){
  .user-pill{display:none}
  .topbar-title{font-size:15px}
}

/* Keep main content readable */
.container{padding:18px 26px}

/* Toast system (stacked, variants) */
.toasts{
  position:fixed;
  right:18px;
  top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:80;
}
.toast{
  width:min(380px, calc(100vw - 36px));
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:var(--card);
  box-shadow:0 10px 34px rgba(0,0,0,.16);
  display:flex;
  gap:10px;
  align-items:flex-start;
  transform:translateY(-6px);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}
.toast.toast-show{transform:translateY(0);opacity:1}
.toast.toast-hide{transform:translateY(-6px);opacity:0}
.toast-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.toast-ico svg{width:18px;height:18px;display:block}
.toast-msg{flex:1;color:var(--text);line-height:1.35}
.toast-x{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:18px;
  line-height:18px;
  padding:0 2px;
  cursor:pointer;
}
.toast-x:hover{color:var(--text)}
.toast-ok{border-color:rgba(16,185,129,.35)}
.toast-err{border-color:rgba(239,68,68,.35)}
.toast-info{border-color:rgba(59,130,246,.35)}

/* Modal */
html.modal-open{overflow:hidden}
.modal-overlay[hidden]{display:none}
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(15,23,42,.55);
  backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  z-index:90;
}
.modal{
  width:min(520px, 100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 18px 60px rgba(0,0,0,.30);
  overflow:hidden;
}
.modal-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px}
.modal-title{font-weight:900;letter-spacing:-.01em}
.modal-x{border:0;background:transparent;color:var(--muted);font-size:20px;line-height:20px;cursor:pointer}
.modal-x:hover{color:var(--text)}
.modal-bd{padding:0 14px 14px}
.modal-body{color:var(--muted);line-height:1.55}
.modal-ft{display:flex;gap:10px;justify-content:flex-end;padding:12px 14px 14px;border-top:1px solid var(--border)}

/* Tables feel more modern */
.table tr:hover td{background:rgba(0,0,0,.02)}
.table th{position:sticky;top:0;background:var(--card)}

/* Scroll wrapper for very wide admin tables (e.g., Plans) */
.table-scroll{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:10px}
.table-scroll .table{width:max-content;min-width:100%;margin:0}
.table-scroll .table th{top:0}

/* Plans table: slightly denser so it fits better */
.table.table-plans th,.table.table-plans td{padding:8px 10px;font-size:13px}

/* Plans: card layout (better on small screens) */
.plan-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}
.plan-card{border:1px solid var(--border);border-radius:12px;background:var(--card-bg,#fff);padding:12px}
.plan-card-head{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.plan-form input,.plan-form select{width:100%}
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.plan-toggles{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.plan-toggles label{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.plan-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:12px}
/* Plans: view-only cards (enable editing via Edit button) */
.plan-card .plan-form input:disabled,
.plan-card .plan-form select:disabled,
.plan-card .plan-form textarea:disabled{
  background:transparent;
  border:none;
  padding:0;
  box-shadow:none;
  color:var(--text,#111);
  appearance:none;
  -webkit-appearance:none;
}
.plan-card .plan-form input:disabled::placeholder{color:transparent}
.plan-card:not(.is-edit) .plan-toggles input[type="checkbox"]{pointer-events:none}
.plan-card:not(.is-edit) label{cursor:default}

@media (max-width:720px){
  .plan-grid{grid-template-columns:1fr}
  .plan-actions{justify-content:stretch}
  .plan-actions button{flex:1}
}

.page-content{
  max-width:1160px;
  margin:0 auto;
  padding:18px 26px 26px;
}
.page-content h1{margin-top:0}

/* Beta.4.2: spacing normalization */
.page-content h1{font-size:26px;letter-spacing:-.01em}
.page-content h2{font-size:18px}
.page-content h3{font-size:16px}
.page-content h2,.page-content h3{margin:0 0 10px}
.page-content p{line-height:1.55}
.page-content ul{padding-left:18px}
.page-content li{margin:8px 0}
.list{list-style:none;padding:0;margin:0}
.list > li{padding:10px 0;border-bottom:1px solid var(--border)}
.list > li:last-child{border-bottom:none}
.list .muted{display:block;margin-top:4px}
.card{margin:14px 0}
.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}
.row,.form-row{margin-top:10px}

/* Empty states */
.empty-state{
  border:1px dashed var(--border);
  background:rgba(0,0,0,.015);
  border-radius:14px;
  padding:18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.empty-icon{
  width:40px;height:40px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
  background:var(--card);
  flex:0 0 auto;
}
.empty-title{font-weight:800;margin:0 0 4px}
.empty-text{color:var(--muted);margin:0}
.empty-actions{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}

/* Skeleton loader (perceived speed) */
.page-skeleton{display:none}
html.loading .page-skeleton{display:block}
html.loading .page-main{opacity:0;transform:translateY(4px);pointer-events:none}
.sk{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:rgba(148,163,184,.18);
  border:1px solid rgba(148,163,184,.10);
}
.sk::after{
  content:"";
  position:absolute;
  top:0;left:-40%;
  width:40%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  animation:shimmer 1.05s infinite;
}
@keyframes shimmer{0%{transform:translateX(0)}100%{transform:translateX(250%)} }
.sk-title{height:28px;width:46%;margin:10px 0 14px}
.sk-line{height:14px;width:92%;margin:10px 0}
.sk-card{height:96px;width:100%;margin:16px 0;border-radius:14px}

/* Beta.4.1: topbar + components */
/* --topbarH is defined above to match the sidebar brand */

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--shellH);
  padding:0 26px;
  background:rgba(247,247,251,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  box-sizing:border-box;
}

.topbar-left{display:flex;align-items:center;gap:10px}

.sidebar-toggle{
  display:none;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  align-items:center;
  justify-content:center;
}
.sidebar-toggle svg{width:20px;height:20px;display:block}
.sidebar-toggle:hover{background:rgba(0,0,0,.02)}

.topbar-title{font-size:16px;font-weight:700;color:var(--text)}
.imp-badge{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  background:rgba(245,158,11,.14);
  border:1px solid rgba(245,158,11,.28);
  color:#92400e;
  white-space:nowrap;
}
.imp-badge::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:99px;
  background:rgba(245,158,11,.8);
  margin-right:8px;
}
.topbar-right{display:flex;align-items:center;gap:10px}

/* User menu (top right) */
.user-menu{position:relative}
.user-menu-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text);
  cursor:pointer;
}
.user-menu-btn:hover{background:rgba(0,0,0,.02)}
.user-avatar{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(0,0,0,.06);
  color:var(--text);
  font-weight:700;
  font-size:13px;
}
.user-caret{width:16px;height:16px;opacity:.7}
.user-menu-panel{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:220px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.20);
  overflow:hidden;
  z-index:65;
}
.user-menu-head{padding:12px 12px 10px;border-bottom:1px solid var(--border)}
.user-menu-email{font-size:13px;font-weight:700;color:var(--text);word-break:break-all}
.user-menu-imp{margin-top:4px;font-size:12px;color:var(--muted)}
.user-menu-actions{padding:6px}
.user-menu-item{
  display:block;
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  color:var(--text);
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
}
.user-menu-item:hover{background:rgba(0,0,0,.04);text-decoration:none}
.user-menu-item.danger{color:var(--danger)}

.user-pill{
  display:inline-flex;
  align-items:center;
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--muted);
  font-size:13px;
}

.topbar-link{
  color:var(--muted);
  text-decoration:none;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid transparent;
}
.topbar-link:hover{color:var(--text);background:rgba(0,0,0,.03);border-color:var(--border);text-decoration:none}

/* Navigation sections */
.nav-section{margin:12px 4px}
.nav-label{
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(226,232,240,.55);
  padding:8px 10px 6px;
}

/* Mobile: off-canvas sidebar + comfortable spacing */
@media (max-width: 900px){
  .page-wrap{margin-left:0}
  .sidebar-toggle{display:inline-flex}

  .sidebar-brand,
  .sidebar-nav{
    width:288px;
    transform:translateX(-102%);
    transition:transform .2s ease;
    box-shadow:0 18px 60px rgba(0,0,0,.35);
  }
  /* Keep the opened mobile menu above the sticky topbar */
  .sidebar-brand{z-index:80}
  .sidebar-nav{z-index:79}
  html.sidebar-open .sidebar-brand,
  html.sidebar-open .sidebar-nav{transform:translateX(0)}

  .sidebar-scrim{z-index:78}
  html.sidebar-open .sidebar-scrim{display:block}

  .topbar{padding:0 14px}
  .container{padding:14px 14px}

  /* Tables: allow horizontal scroll */
  .table{display:block;overflow:auto;max-width:100%}
  .table thead, .table tbody, .table tr{width:max-content}
}

@media (max-width: 520px){
  .user-pill{display:none}
  .topbar-title{font-size:15px}
}

/* Buttons (supports <a class="btn"> and <button class="btn">) */
.btn, a.btn, button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.10);
  background:var(--btn);
  color:var(--btnText);
  text-decoration:none;
  font-weight:600;
  line-height:1;
  transition:filter .18s ease,transform .18s ease,background .18s ease,border-color .18s ease;
}
a.btn:hover, button.btn:hover{filter:brightness(.96);text-decoration:none;transform:translateY(-1px)}
.btn:active, a.btn:active, button.btn:active{transform:translateY(0)}

.btn-primary{background:var(--btn);color:var(--btnText)}
.btn-secondary{
  background:var(--card);
  color:var(--text);
  border-color:var(--border);
}
.btn-secondary:hover{background:rgba(0,0,0,.02)}

.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:var(--border);
}
.btn-ghost:hover{background:rgba(0,0,0,.03)}

.btn-danger{
  background:#ef4444;
  border-color:rgba(239,68,68,.45);
  color:#fff;
}
.btn-danger:hover{filter:brightness(.95)}

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

/* Forms */
label{display:block;font-weight:600;margin:10px 0 6px}
input,select,textarea{
  width:100%;
  box-sizing:border-box;
  min-height:42px;
}
textarea{min-height:90px}
.form-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.form-row > *{flex:1;min-width:220px}
.help{font-size:13px;color:var(--muted);margin-top:6px}
.error{color:#b91c1c;font-size:13px;margin-top:6px}

/* Tables: keep header below the topbar */
.table th{top:var(--shellH);z-index:1}

/* Footer builder (Settings > Marketing) */
.footer-builder{display:flex;flex-direction:column;gap:10px}
.fb-card{border:1px solid var(--border);border-radius:14px;padding:12px;background:rgba(255,255,255,.6)}
.fb-card-head{display:flex;gap:12px;align-items:flex-end}
.fb-card-head .fb-field{margin:0}
.fb-card-head-actions{display:flex;gap:8px;align-items:center}
.fb-drag{display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:40px;padding:0 10px;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.03);color:var(--muted);cursor:grab;user-select:none}
.fb-drag:active{cursor:grabbing}
.fb-card.dragging,.fb-link-row.dragging{opacity:.65}
.drop-indicator{
  height:2px;
  border-radius:2px;
  background:var(--primary);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
  margin:8px 0;
}
.fb-link-row{position:relative}
.fb-link-row .fb-drag{min-width:34px}
.fb-links{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.fb-link-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.fb-field{flex:1;min-width:180px}
.fb-field input{min-height:40px}
.fb-actions{display:flex;gap:8px;align-items:center}
@media (max-width: 900px){
  .fb-link-row{gap:8px}
  .fb-field{min-width:160px}
}


/* Checkbox label alignment (admin settings) */
.checkline{display:inline-flex;align-items:center;gap:8px;justify-content:flex-start;white-space:nowrap;margin:0;font-weight:500}
.checkline input[type=checkbox],.checkline input[type=radio]{margin:0;flex:0 0 auto}
.checkline span{white-space:normal}


/* Topbar mode toggle */
.mode-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.55);
  background:transparent;
  color:inherit;
  cursor:pointer;
  margin-left:6px;
}
.mode-toggle:hover{ background:rgba(148,163,184,.14); }
.mode-toggle:active{ transform:translateY(1px); }
.mode-toggle .ico{ width:20px; height:20px; display:block; }