:root{
  color-scheme: dark;
  --bg: #0b0f17;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --border: rgba(255,255,255,.12);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --borderSubtle: rgba(255,255,255,.08);

  /* Accent */
  --accent: #a78bfa; /* violet */
  --accentBorder: rgba(167,139,250,.55);
  --accentBorderStrong: rgba(167,139,250,.75);
  --accentBg1: rgba(167,139,250,.20);
  --accentBg2: rgba(167,139,250,.12);
  --focusRing: rgba(167,139,250,.18);

  /* Status */
  --warnBorder: rgba(251,191,36,.35);
  --warnBg: rgba(251,191,36,.10);

  /* Overlays */
  --dialogBg: rgba(10,14,22,.92);
  --backdropBg: rgba(0,0,0,.55);

  /* Component tokens */
  --topbarBg: rgba(10,14,22,.55);
  --tableHeadBg: rgba(10,14,22,.85);
  --ghostHoverBorder: rgba(255,255,255,.22);
  --labelColor: rgba(255,255,255,.86);
  --summaryColor: rgba(255,255,255,.78);
  --kvBg: rgba(0,0,0,.12);

  /* Background glows */
  --glow1Rgb: 167 139 250;
  --glow2Rgb: 56 189 248;
  --pageBg:
    radial-gradient(1200px 700px at 20% 10%,
      rgb(var(--glow1Rgb) / .20) 0%,
      rgb(var(--glow1Rgb) / .10) 35%,
      rgb(var(--glow1Rgb) / .03) 65%,
      rgb(var(--glow1Rgb) / 0) 100%),
    radial-gradient(1000px 700px at 80% 20%,
      rgb(var(--glow2Rgb) / .14) 0%,
      rgb(var(--glow2Rgb) / .07) 35%,
      rgb(var(--glow2Rgb) / .02) 65%,
      rgb(var(--glow2Rgb) / 0) 100%),
    radial-gradient(1200px 900px at 50% 110%,
      rgb(0 0 0 / .30) 0%,
      rgb(0 0 0 / 0) 55%),
    var(--bg);

  --radius: 14px;
  --radius2: 10px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@media (prefers-color-scheme: light){
  :root{
    color-scheme: light;
    --bg: #fbfaf9;
    --panel: rgba(255,255,255,.72);
    --panel2: rgba(255,255,255,.88);
    --text: rgba(10,14,22,.92);
    --muted: rgba(10,14,22,.62);
    --border: rgba(10,14,22,.14);
    --borderSubtle: rgba(10,14,22,.08);
    --shadow: 0 14px 34px rgba(10,14,22,.08);

    --accent: #6d28d9; /* violet */
    --accentBorder: rgba(109,40,217,.40);
    --accentBorderStrong: rgba(109,40,217,.55);
    --accentBg1: rgba(109,40,217,.12);
    --accentBg2: rgba(109,40,217,.07);
    --focusRing: rgba(109,40,217,.14);

    --warnBorder: rgba(217,119,6,.28);
    --warnBg: rgba(217,119,6,.10);

    --dialogBg: rgba(251,250,249,.96);
    --backdropBg: rgba(2,6,23,.35);

    --topbarBg: var(--bg);
    --tableHeadBg: rgba(251,250,249,.94);
    --ghostHoverBorder: rgba(10,14,22,.22);
    --labelColor: rgba(10,14,22,.82);
    --summaryColor: rgba(10,14,22,.72);
    --kvBg: rgba(255,255,255,.62);

    --glow1Rgb: 109 40 217;
    --glow2Rgb: 2 132 199;
    /* Light mode: subtle glows + a tiny noise layer to avoid banding/seams in Chromium. */
    --pageBg:
      radial-gradient(1400px 900px at 15% 0%,
        rgb(var(--glow1Rgb) / .055) 0%,
        rgb(var(--glow1Rgb) / .03) 35%,
        rgb(var(--glow1Rgb) / 0) 78%),
      radial-gradient(1100px 900px at 92% 8%,
        rgb(var(--glow2Rgb) / .035) 0%,
        rgb(var(--glow2Rgb) / .02) 38%,
        rgb(var(--glow2Rgb) / 0) 78%),
      radial-gradient(1200px 900px at 50% 110%,
        rgb(2 6 23 / .06) 0%,
        rgb(2 6 23 / 0) 55%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
      var(--bg);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color: transparent}
html,body{height:100%}
html{background: var(--bg)}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  min-height:100%;
  background: transparent;
  position:relative;
}

/* Paint the full-page background as a fixed layer to avoid Chromium scroll seams. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background: var(--pageBg);
  transform: translateZ(0);
}

.container{max-width:1100px;margin:0 auto;padding:16px}

.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(14px);
  background: var(--topbarBg);
  border-bottom: 1px solid var(--border);
}

@media (prefers-color-scheme: light){
  .topbar{
    backdrop-filter: none;
  }
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand__meta{min-width:0}
.brand__logo{
  width:32px;height:32px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  flex: 0 0 auto;
}
.brand__title{font-weight:700;letter-spacing:.2px}
.brand__subtitle{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__actions{display:flex;gap:10px}

@media (max-width: 720px){
  .topbar__inner{flex-direction:column;align-items:stretch}
  .brand{width:100%}
  .topbar__actions{width:100%;justify-content:flex-end}
}

.card{
  border:1px solid var(--border);
  background: var(--panel2);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding:16px;
  margin:14px 0;
}
.card__head{margin-bottom:10px}
.card__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}

.h1{margin:0 0 6px 0;font-size:22px}
.h2{margin:0 0 4px 0;font-size:16px}
.muted{color:var(--muted);margin:0}
.legend{margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.field{grid-column: span 6; display:flex; flex-direction:column; gap:6px}
.field--check{
  grid-column: span 12;
  display:grid;
  grid-template-columns: 22px 1fr;
  gap:10px;
  align-items:center;
}
.field--check input[type="checkbox"]{margin-top:0}
.field--inline{grid-column: span 12; display:grid; grid-template-columns: 220px 220px 1fr; align-items:start; gap:10px}
.field--inline > div:not(.field__hint){display:flex;flex-direction:column;gap:6px}
.field__label{font-size:13px;color:var(--labelColor)}
.field__hint{font-size:12px;color:var(--muted)}
.field input[type="checkbox"]{width:18px;height:18px}
.field--inline .field__hint{align-self:start}

@media (min-width: 821px){
  /* In the 3-column layout, align the hint to the inputs (not to the labels). */
  .field--inline .field__hint{padding-top: 33px}
}

input, select, textarea{
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  padding:10px 10px;
  outline: none;
  accent-color: var(--accent);
  caret-color: var(--accent);
}
input:focus, select:focus, textarea:focus{
  border-color: var(--accentBorder);
  box-shadow: 0 0 0 3px var(--focusRing);
}
.input{min-width:240px}
.input--sm{min-width:0; width:auto; padding:8px 10px}
.textarea{width:100%; font-family: var(--mono); font-size: 12px; line-height: 1.35}
code{font-family:var(--mono);font-size:.92em;color:var(--accent)}

.btn{
  background: linear-gradient(180deg, var(--accentBg1), var(--accentBg2));
  border: 1px solid var(--accentBorder);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 12px;
  cursor:pointer;
  text-decoration: none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn:hover{border-color: var(--accentBorderStrong)}
.btn--ghost{
  background: var(--panel);
  border: 1px solid var(--border);
}
.btn--ghost:hover{border-color: var(--ghostHoverBorder)}
.btn--icon{padding:9px 10px}
.btn--icon .btn__icon{display:block;width:16px;height:16px}
.btn--iconOnly{padding:9px 10px}
.btn--iconOnly .btn__icon{display:block;width:16px;height:16px}

@media (max-width: 520px){
  .btn--iconOnly .btn__label{display:none}
}

.srOnly{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.alert{
  border-radius: var(--radius2);
  padding:10px 12px;
  border:1px solid var(--border);
  background: var(--warnBg);
  color: var(--text);
  margin: 10px 0 0;
}
.alert--warn{border-color: var(--warnBorder)}
.hidden{display:none}

.tableWrap{overflow:auto;border-radius: var(--radius2); border:1px solid var(--border); margin-top:10px}
.table{width:100%;border-collapse:collapse;min-width:860px}
.table th,.table td{padding:10px 10px;border-bottom:1px solid var(--borderSubtle);vertical-align:top}
.table th{position:sticky;top:0;background: var(--tableHeadBg);backdrop-filter: blur(10px);text-align:left;font-size:12px;color:var(--muted)}
.table td{font-size:13px}
.table td.num,.table th.num{text-align:right;font-variant-numeric: tabular-nums}
.rowTitle{display:flex;gap:10px;align-items:center}
.rowHint{margin-top:4px;font-size:12px;color:var(--muted);line-height:1.35}
.pill{font-size:12px;border:1px solid var(--border);padding:2px 8px;border-radius:999px;color:var(--muted)}
.pill--link{
  background: var(--panel);
  cursor: pointer;
}
.pill--link:hover{border-color: var(--ghostHoverBorder)}
.pill--link:focus-visible{
  outline: none;
  border-color: var(--accentBorderStrong);
  box-shadow: 0 0 0 3px var(--focusRing);
}
.pill--toggle{
  background: var(--panel);
  cursor: pointer;
}
.pill--toggle:hover{border-color: var(--ghostHoverBorder)}
.pill--toggle.is-active{
  color: var(--text);
  border-color: var(--accentBorder);
  background: var(--panel);
}
.pill--toggle:focus-visible{
  border-color: var(--accentBorderStrong);
  box-shadow: 0 0 0 3px var(--focusRing);
}
.details{
  margin-top:8px;
  border:1px solid var(--border);
  border-radius: 12px;
  padding:10px;
  background: var(--panel);
}
.details > summary{
  cursor: pointer;
  font-size: 12px;
  color: var(--summaryColor);
  list-style: none;
}
.details > summary::-webkit-details-marker{display:none}
.details > summary:after{
  content: "▾";
  float: right;
  opacity: .75;
}
.details[open] > summary:after{content:"▴"}
.detailsGrid{margin-top:10px;display:grid;grid-template-columns: repeat(3, minmax(0,1fr));gap:8px}
.kv{padding:8px;border-radius:10px;border:1px solid var(--borderSubtle);background: var(--kvBg)}
.kv .k{font-size:11px;color:var(--muted)}
.kv .v{font-size:14px;margin-top:2px;font-variant-numeric: tabular-nums}
.calcLine{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.35}
.calcLine code{color:var(--muted);display:block;white-space:pre-wrap}

::selection{
  background: var(--accentBg1);
}

.dialog{
  width:min(1000px, calc(100vw - 20px));
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--dialogBg);
  color: var(--text);
  box-shadow: var(--shadow);
}
.dialog::backdrop{background: var(--backdropBg)}
.dialog__inner{margin:0;padding:0;border:0}
.dialog__head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;border-bottom:1px solid var(--borderSubtle)}
.dialog__body{padding:12px 14px}
.dialog__foot{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--borderSubtle)}
.spacer{flex:1}
.callout{
  border-radius: var(--radius2);
  padding:10px 12px;
  border:1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  margin: 0 0 12px;
}

.tabs{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tab{
  border-radius:999px;
  padding:8px 10px;
  border:1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor:pointer;
}
.tab.is-active{border-color: var(--accentBorder); background: var(--accentBg2)}
.tabPanel{display:none}
.tabPanel.is-active{display:block}

@media (max-width: 820px){
  .grid{grid-template-columns: repeat(6, 1fr)}
  .field{grid-column: span 6}
  .field--inline{grid-template-columns: 1fr 1fr}
  .field--inline .field__hint{grid-column: 1 / -1}
  .input{min-width: 0; flex: 1}
  .table{min-width: 760px}
}