:root{
  --purple:#8A3FE8;
  --blue:#2158D0;
  --page-bg:#F4F3F8;
  --card-bg:#FFFFFF;
  --border:#E4E2ED;
  --field-bg:#FAFAFC;
  --field-border:#DDDBE6;
  --text-primary:#15131F;
  --text-secondary:#6B6879;
  --text-muted:#767383;
  --danger:#D0463F;
  --danger-bg:#FCEEED;
  --green-bg:#E7F5EC; --green-text:#1E7A42;
  --amber-bg:#FCF1E1; --amber-text:#95610B;
  --gray-bg:#EEEDF2; --gray-text:#5A5766;
}

/* Dark theme — toggled via the Light/Dark control in the sidebar.
   Reuses every existing --variable name, so components throughout the
   app (which already style themselves with var(--x)) re-theme
   automatically without needing their own dark-mode rules. */
html[data-theme="dark"]{
  --purple:#A374F2;
  --blue:#5C93F2;
  --page-bg:#131120;
  --card-bg:#1C1A29;
  --border:#322E42;
  --field-bg:#211F30;
  --field-border:#3B3750;
  --text-primary:#F2F1F7;
  --text-secondary:#B7B3C7;
  --text-muted:#8D89A0;
  --danger:#F0857D;
  --danger-bg:rgba(240,133,125,0.14);
  --green-bg:rgba(60,180,113,0.16); --green-text:#6FDB9B;
  --amber-bg:rgba(226,158,52,0.16); --amber-text:#F0B65C;
  --gray-bg:rgba(183,179,199,0.14); --gray-text:#C7C4D2;
}

/* Smooth theme switching instead of an abrupt flash of new colors. */
body, .sidebar, .panel, .card, .metric-card, input, select, textarea,
.field-shell, .badge, .account-pill, .avatar{
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}

*{box-sizing:border-box;}
/* Native <select>/<input>/<textarea> rendering can occasionally be a
   couple pixels wider than their computed CSS width (browser-dependent,
   not something box-sizing alone fixes) — this is a hard ceiling so that
   never causes a layout to overflow its container. */
select, input, textarea{ max-width:100%; }
html,body{margin:0;padding:0;}

/* Scroll-to-top button — injected on every page by app-shell.js */
.scroll-top-btn{
  position:fixed;
  right:24px;
  bottom:24px;
  width:60px;
  height:60px;
  border-radius:50%;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  cursor:pointer;
  box-shadow:none;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:100;
}
.scroll-top-btn-icon{
  width:44px;
  height:44px;
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(21,19,31,0.28));
}
.scroll-top-btn.visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.scroll-top-btn:hover .scroll-top-btn-icon{ transform:scale(1.06); }
.scroll-top-btn-icon{ transition:transform .15s ease; }
.scroll-top-btn:focus-visible{
  outline:none;
  border-radius:50%;
  box-shadow:0 0 0 3px rgba(138,63,232,0.3);
}
@media (max-width: 720px){
  .scroll-top-btn{ right:16px; bottom:16px; }
}