/* Nightdesk: graphite operations dashboard system */
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600&family=Sometype+Mono:wght@400;500;600&display=swap");

:root {
  /* Tonal ladder: Canvas > Shell > Panel > Raised */
  --nd-canvas: #303030;
  --nd-shell: #121212;
  --nd-panel: #1b1b1b;
  --nd-raised: #262626;
  --nd-raised-hover: #2f2f2f;
  --nd-hairline: #2c2c2c;
  --nd-hairline-strong: #3a3a3a;

  /* Ink */
  --nd-ink: #ededed;
  --nd-ink-muted: #8a8a8a;
  --nd-ink-faint: #5e5e5e;
  --nd-ink-inverse: #121212;

  /* Signals: data meaning only */
  --nd-gain: #3cc45a;
  --nd-loss: #e5484d;
  --nd-progress: #2f7ff0;
  --nd-caution: #e0b43a;
  --nd-gain-fill: rgba(60, 196, 90, 0.18);
  --nd-loss-fill: rgba(229, 72, 77, 0.18);

  /* Focus */
  --nd-focus: #ededed;
  --nd-focus-ring: 0 0 0 1px var(--nd-shell), 0 0 0 3px rgba(237, 237, 237, 0.55);

  /* Type */
  --nd-font-ui: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --nd-font-mono: "Sometype Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --nd-text-axis: 11px;
  --nd-text-sm: 12px;
  --nd-text-base: 13px;
  --nd-text-nav: 14px;
  --nd-text-title: 15px;
  --nd-text-page: 22px;
  --nd-text-kpi: 40px;
  --nd-leading: 1.45;

  /* Spacing (4px base) */
  --nd-space-1: 4px;
  --nd-space-2: 8px;
  --nd-space-3: 12px;
  --nd-space-4: 16px;
  --nd-space-5: 20px;
  --nd-space-6: 24px;
  --nd-space-8: 32px;
  --nd-space-10: 40px;
  --nd-sidebar-w: 256px;
  --nd-row-h: 48px;
  --nd-control-h: 34px;

  /* Radius */
  --nd-radius-xs: 4px;
  --nd-radius-sm: 6px;
  --nd-radius-md: 7px;
  --nd-radius-lg: 10px;
  --nd-radius-xl: 20px;
  --nd-radius-full: 999px;

  /* Elevation: only the shell and tooltips */
  --nd-shadow-shell: inset 0 1px 0 #3a3a3a, 0 30px 60px -20px rgba(0, 0, 0, 0.6);
  --nd-shadow-tooltip: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -8px rgba(0, 0, 0, 0.55);

  /* Signature: off-hours hatch */
  --nd-hatch: repeating-linear-gradient(
    45deg,
    var(--nd-hairline) 0 1px,
    transparent 1px 6px
  );

  --nd-ease: cubic-bezier(0.2, 0, 0, 1);
  --nd-dur: 140ms;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--nd-canvas); }

body {
  margin: 0;
  background: var(--nd-canvas);
  color: var(--nd-ink);
  font-family: var(--nd-font-ui);
  font-size: var(--nd-text-base);
  line-height: var(--nd-leading);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.005em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }

.nd-num { font-family: var(--nd-font-mono); font-variant-numeric: tabular-nums; }
.nd-muted { color: var(--nd-ink-muted); }
.nd-faint { color: var(--nd-ink-faint); }
.nd-page-title { font-size: var(--nd-text-page); font-weight: 500; line-height: 1.2; }
.nd-title { font-size: var(--nd-text-title); font-weight: 500; line-height: 1.3; }

/* Lucide icons */
.nd-icon,
[data-lucide],
svg.lucide {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  flex: none;
  color: currentColor;
}
.nd-icon--sm { width: 14px; height: 14px; }

:focus-visible { outline: none; box-shadow: var(--nd-focus-ring); }

/* ---------- Signature: hatch ---------- */
.nd-hatch { background-color: var(--nd-panel); background-image: var(--nd-hatch); }

/* ---------- App shell ---------- */
.nd-stage { min-height: 100vh; padding: var(--nd-space-10); display: grid; place-items: center; }

.nd-shell {
  width: 100%;
  max-width: 1440px;
  display: grid;
  grid-template-columns: var(--nd-sidebar-w) 1fr;
  background: var(--nd-shell);
  border-radius: var(--nd-radius-xl);
  box-shadow: var(--nd-shadow-shell);
  overflow: hidden;
}

.nd-main {
  display: flex;
  flex-direction: column;
  gap: var(--nd-space-5);
  padding: var(--nd-space-5) var(--nd-space-5) var(--nd-space-6);
  min-width: 0;
}

.nd-grid { display: grid; gap: var(--nd-space-5); }
.nd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Sidebar ---------- */
.nd-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--nd-space-4);
  padding: var(--nd-space-5) var(--nd-space-5);
  background: var(--nd-panel);
  border-right: 1px solid var(--nd-hairline);
}

.nd-brand {
  display: flex;
  align-items: center;
  gap: var(--nd-space-3);
  padding-bottom: var(--nd-space-4);
  border-bottom: 1px solid var(--nd-hairline);
  font-weight: 600;
  font-size: 17px;
}
.nd-brand svg { width: 22px; height: 22px; color: var(--nd-ink); }

.nd-switcher {
  display: flex;
  align-items: center;
  gap: var(--nd-space-3);
  width: 100%;
  padding: var(--nd-space-2);
  background: var(--nd-shell);
  border: 1px solid var(--nd-hairline);
  border-radius: var(--nd-radius-md);
  color: var(--nd-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nd-switcher__meta { flex: 1; min-width: 0; line-height: 1.25; }
.nd-switcher__meta small { display: block; font-size: 11px; color: var(--nd-ink-muted); }

.nd-nav-group { display: flex; flex-direction: column; gap: 2px; }
.nd-nav-heading {
  padding: 0 0 var(--nd-space-2);
  margin-bottom: var(--nd-space-2);
  border-bottom: 1px solid var(--nd-hairline);
  font-size: var(--nd-text-base);
  color: var(--nd-ink-muted);
  font-weight: 400;
}

.nd-nav-item {
  display: flex;
  align-items: center;
  gap: var(--nd-space-3);
  height: 36px;
  padding: 0 var(--nd-space-3);
  border-radius: var(--nd-radius-md);
  color: var(--nd-ink-muted);
  font-size: var(--nd-text-nav);
  transition: background var(--nd-dur) var(--nd-ease), color var(--nd-dur) var(--nd-ease);
}
.nd-nav-item:hover { color: var(--nd-ink); background: var(--nd-raised); }
.nd-nav-item[aria-current="page"],
.nd-nav-item.is-active {
  color: var(--nd-ink);
  background: var(--nd-raised);
  border: 1px solid var(--nd-hairline-strong);
}
.nd-nav-item__end { margin-left: auto; display: inline-flex; align-items: center; gap: var(--nd-space-2); color: var(--nd-ink-muted); }

/* Health meter: 3 bars tinted by status */
.nd-health {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  padding: 0 6px;
  background: var(--nd-raised);
  border-radius: var(--nd-radius-xs);
  color: var(--nd-ink-faint);
}
.nd-health i { display: block; width: 2px; height: 10px; border-radius: 1px; background: currentColor; }
.nd-health--gain { color: var(--nd-gain); }
.nd-health--loss { color: var(--nd-loss); }
.nd-health--caution { color: var(--nd-caution); }

/* Icon tile */
.nd-tile {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--nd-radius-sm);
  background: var(--nd-raised);
  color: var(--nd-ink);
  flex: none;
}
.nd-tile svg { width: 14px; height: 14px; }

/* Upgrade card */
.nd-upgrade {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--nd-space-3);
  padding: var(--nd-space-3);
  background: var(--nd-shell);
  border: 1px solid var(--nd-hairline);
  border-radius: var(--nd-radius-lg);
}
.nd-upgrade p { font-size: var(--nd-text-sm); color: var(--nd-ink-muted); }

/* ---------- Topbar ---------- */
.nd-topbar {
  display: flex;
  align-items: center;
  gap: var(--nd-space-4);
  height: 44px;
  padding: 0 var(--nd-space-2) 0 var(--nd-space-3);
  background: var(--nd-panel);
  border: 1px solid var(--nd-hairline);
  border-radius: var(--nd-radius-lg);
}
.nd-crumbs { display: flex; align-items: center; gap: var(--nd-space-2); font-size: var(--nd-text-nav); }
.nd-crumbs a { color: var(--nd-ink-muted); }
.nd-crumbs [aria-current="page"] { color: var(--nd-ink); }
.nd-crumbs svg { width: 12px; height: 12px; color: var(--nd-ink-faint); }
.nd-topbar .nd-search { margin-left: auto; width: 420px; }

/* ---------- Buttons ---------- */
.nd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nd-space-2);
  height: var(--nd-control-h);
  padding: 0 var(--nd-space-4);
  border: 1px solid var(--nd-hairline);
  border-radius: var(--nd-radius-md);
  background: var(--nd-raised);
  color: var(--nd-ink);
  font: 500 var(--nd-text-base) / 1 var(--nd-font-ui);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--nd-dur) var(--nd-ease), border-color var(--nd-dur) var(--nd-ease);
}
.nd-btn:hover { background: var(--nd-raised-hover); border-color: var(--nd-hairline-strong); }
.nd-btn:active { background: var(--nd-raised); }
.nd-btn:disabled,
.nd-btn[aria-disabled="true"] {
  color: var(--nd-ink-faint);
  background-color: var(--nd-panel);
  background-image: var(--nd-hatch);
  cursor: not-allowed;
}

.nd-btn--primary { background: var(--nd-ink); color: var(--nd-ink-inverse); border-color: var(--nd-ink); }
.nd-btn--primary:hover { background: #ffffff; border-color: #ffffff; }

.nd-btn--ghost { background: transparent; border-color: transparent; color: var(--nd-ink-muted); }
.nd-btn--ghost:hover { background: var(--nd-raised); border-color: transparent; color: var(--nd-ink); }

.nd-btn--icon { width: var(--nd-control-h); padding: 0; }
.nd-btn--sm { height: 28px; padding: 0 var(--nd-space-3); font-size: var(--nd-text-sm); }
.nd-btn--block { width: 100%; }

/* ---------- Inputs ---------- */
.nd-field { display: flex; flex-direction: column; gap: 6px; }
.nd-label { font-size: var(--nd-text-sm); color: var(--nd-ink-muted); }

.nd-input,
.nd-search {
  display: flex;
  align-items: center;
  gap: var(--nd-space-2);
  height: var(--nd-control-h);
  padding: 0 var(--nd-space-3);
  background: var(--nd-shell);
  border: 1px solid var(--nd-hairline);
  border-radius: var(--nd-radius-md);
  color: var(--nd-ink);
  font: 400 var(--nd-text-base) / 1 var(--nd-font-ui);
  transition: border-color var(--nd-dur) var(--nd-ease);
}
.nd-input::placeholder { color: var(--nd-ink-faint); }
.nd-input:hover,
.nd-search:hover { border-color: var(--nd-hairline-strong); }
.nd-input:focus,
.nd-search:focus-within { outline: none; border-color: var(--nd-ink-muted); box-shadow: none; }
.nd-input[aria-invalid="true"] { border-color: var(--nd-loss); }

.nd-search > svg { color: var(--nd-ink-muted); }
.nd-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--nd-ink);
  font: inherit;
}
.nd-search input::placeholder { color: var(--nd-ink-faint); }
.nd-search input:focus { outline: none; box-shadow: none; }

.nd-kbd {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--nd-radius-xs);
  background: var(--nd-raised);
  color: var(--nd-ink-muted);
  font: 400 var(--nd-text-axis) / 1 var(--nd-font-mono);
}

/* ---------- Checkbox ---------- */
.nd-check {
  appearance: none;
  -webkit-appearance: none;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: var(--nd-radius-xs);
  background: var(--nd-raised-hover);
  border: 1px solid var(--nd-hairline-strong);
  cursor: pointer;
  flex: none;
}
.nd-check:hover { border-color: var(--nd-ink-faint); }
.nd-check:checked { background: var(--nd-ink); border-color: var(--nd-ink); }
.nd-check:checked::after {
  content: "";
  width: 8px;
  height: 4px;
  margin-top: -2px;
  border-left: 1.5px solid var(--nd-ink-inverse);
  border-bottom: 1.5px solid var(--nd-ink-inverse);
  transform: rotate(-45deg);
}
.nd-check:indeterminate { background: var(--nd-ink); border-color: var(--nd-ink); }
.nd-check:indeterminate::after { content: ""; width: 8px; height: 1.5px; background: var(--nd-ink-inverse); }

/* ---------- Segmented control / tabs ---------- */
.nd-segmented { display: inline-flex; align-items: center; gap: 2px; }
.nd-segmented button,
.nd-tab {
  height: 26px;
  padding: 0 var(--nd-space-2);
  border: 1px solid transparent;
  border-radius: var(--nd-radius-sm);
  background: transparent;
  color: var(--nd-ink-muted);
  font: 400 var(--nd-text-sm) / 1 var(--nd-font-ui);
  cursor: pointer;
}
.nd-segmented button:hover,
.nd-tab:hover { color: var(--nd-ink); }
.nd-segmented button[aria-pressed="true"],
.nd-segmented button[aria-selected="true"],
.nd-tab[aria-selected="true"] {
  background: var(--nd-raised);
  border-color: var(--nd-hairline-strong);
  color: var(--nd-ink);
}

.nd-tabs { display: flex; gap: var(--nd-space-5); border-bottom: 1px solid var(--nd-hairline); }
.nd-tabs .nd-tab {
  height: 36px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  font-size: var(--nd-text-base);
}
.nd-tabs .nd-tab[aria-selected="true"] { background: transparent; border-bottom-color: var(--nd-ink); }

/* ---------- Panel ---------- */
.nd-panel {
  display: flex;
  flex-direction: column;
  gap: var(--nd-space-4);
  padding: var(--nd-space-4);
  background: var(--nd-panel);
  border: 1px solid var(--nd-hairline);
  border-radius: var(--nd-radius-lg);
  min-width: 0;
}
.nd-panel__head {
  display: flex;
  align-items: center;
  gap: var(--nd-space-2);
  min-height: var(--nd-control-h);
}
.nd-panel__head > .nd-title { flex: 1; }
.nd-panel__head--ruled { padding-bottom: var(--nd-space-3); border-bottom: 1px solid var(--nd-hairline); }
.nd-panel__actions { display: flex; align-items: center; gap: var(--nd-space-2); margin-left: auto; }

/* ---------- KPI chart card ---------- */
.nd-kpi {
  display: grid;
  grid-template-columns: minmax(180px, auto) 1fr;
  align-items: end;
  gap: var(--nd-space-5);
}
.nd-kpi__figure {
  font: 500 var(--nd-text-kpi) / 1 var(--nd-font-mono);
  letter-spacing: -0.02em;
}
.nd-kpi__foot { display: flex; align-items: center; gap: var(--nd-space-3); margin-top: var(--nd-space-3); color: var(--nd-ink-muted); }

.nd-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 500 var(--nd-text-base) / 1 var(--nd-font-mono);
}
.nd-delta svg { width: 14px; height: 14px; }
.nd-delta--gain { color: var(--nd-gain); }
.nd-delta--loss { color: var(--nd-loss); }

/* Chart primitives (SVG) */
.nd-chart { position: relative; width: 100%; height: 180px; }
.nd-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nd-chart__line { fill: none; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nd-chart--gain .nd-chart__line { stroke: var(--nd-gain); }
.nd-chart--loss .nd-chart__line { stroke: var(--nd-loss); }
.nd-chart--progress .nd-chart__line { stroke: var(--nd-progress); }
.nd-chart__crosshair { stroke: var(--nd-ink-faint); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.nd-chart__dot { fill: var(--nd-ink); }
.nd-chart__empty { position: absolute; inset: 0; border-radius: var(--nd-radius-md); background-color: var(--nd-panel); background-image: var(--nd-hatch); }

.nd-axis {
  display: flex;
  justify-content: space-between;
  padding-top: var(--nd-space-2);
  font: 400 var(--nd-text-axis) / 1 var(--nd-font-mono);
  color: var(--nd-ink-faint);
}
.nd-axis .is-current { color: var(--nd-ink); }

/* Tooltip */
.nd-tooltip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--nd-space-2) var(--nd-space-3);
  background: var(--nd-raised);
  border: 1px solid var(--nd-hairline-strong);
  border-radius: var(--nd-radius-md);
  box-shadow: var(--nd-shadow-tooltip);
  pointer-events: none;
  white-space: nowrap;
}
.nd-tooltip__label { display: flex; align-items: center; gap: 6px; font-size: var(--nd-text-sm); color: var(--nd-ink-muted); }
.nd-tooltip__value { font: 500 18px / 1 var(--nd-font-mono); color: var(--nd-ink); }

/* ---------- Gantt timeline ---------- */
.nd-gantt {
  --nd-gantt-cols: 15;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--nd-gantt-cols), minmax(0, 1fr));
  grid-auto-rows: 44px;
  row-gap: var(--nd-space-4);
  padding-bottom: var(--nd-space-4);
}
.nd-gantt__head {
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: var(--nd-space-2) 0;
  font: 500 var(--nd-text-base) / 1 var(--nd-font-mono);
}
.nd-gantt__head small { font: 400 var(--nd-text-sm) / 1 var(--nd-font-ui); color: var(--nd-ink-faint); }
.nd-gantt__col {
  grid-row: 2 / -1;
  border-left: 1px solid var(--nd-hairline);
}
.nd-gantt__col--off { background-image: var(--nd-hatch); }
.nd-gantt__bar {
  z-index: 1;
  align-self: center;
  display: flex;
  align-items: center;
  gap: var(--nd-space-3);
  height: 40px;
  padding: 0 var(--nd-space-2) 0 var(--nd-space-3);
  background: var(--nd-raised);
  border: 1px solid var(--nd-hairline-strong);
  border-radius: var(--nd-radius-md);
  font-size: var(--nd-text-nav);
  min-width: 0;
}
.nd-gantt__bar-name { flex: 1; display: flex; align-items: center; gap: var(--nd-space-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nd-gantt__stat { display: inline-flex; align-items: center; gap: 4px; font: 400 var(--nd-text-sm) / 1 var(--nd-font-mono); color: var(--nd-ink-muted); }
.nd-gantt__stat svg { width: 14px; height: 14px; }

/* Avatar stack */
.nd-avatars { display: inline-flex; }
.nd-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--nd-radius-full);
  border: 2px solid var(--nd-raised);
  background: var(--nd-raised-hover);
  object-fit: cover;
  display: inline-grid;
  place-items: center;
  font: 500 10px / 1 var(--nd-font-ui);
  color: var(--nd-ink);
}
.nd-avatar + .nd-avatar { margin-left: -8px; }

/* ---------- Table ---------- */
.nd-toolbar { display: flex; align-items: center; gap: var(--nd-space-2); }
.nd-toolbar .nd-search { width: 240px; }
.nd-toolbar__end { margin-left: auto; display: flex; gap: var(--nd-space-2); }

.nd-table { width: 100%; border-collapse: collapse; font-size: var(--nd-text-nav); }
.nd-table thead th {
  height: 44px;
  padding: 0 var(--nd-space-3);
  background: var(--nd-shell);
  color: var(--nd-ink);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}
.nd-table thead th:first-child { border-radius: var(--nd-radius-md) 0 0 var(--nd-radius-md); }
.nd-table thead th:last-child { border-radius: 0 var(--nd-radius-md) var(--nd-radius-md) 0; }
.nd-table tbody td {
  height: var(--nd-row-h);
  padding: 0 var(--nd-space-3);
  border-bottom: 1px solid var(--nd-hairline);
  color: var(--nd-ink-muted);
  white-space: nowrap;
}
.nd-table tbody tr:last-child td { border-bottom: 0; }
.nd-table tbody tr:hover td { background: rgba(255, 255, 255, 0.015); }
.nd-table tbody tr[aria-selected="true"] td { background: var(--nd-raised); }
.nd-table td.nd-cell-primary { color: var(--nd-ink); }
.nd-table td.nd-cell-num { font-family: var(--nd-font-mono); font-size: var(--nd-text-base); }
.nd-table .nd-cell-check { width: 36px; padding-right: 0; }

.nd-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.nd-sort svg { width: 14px; height: 14px; color: var(--nd-ink-muted); }
.nd-sort[aria-sort="ascending"] svg,
.nd-sort[aria-sort="descending"] svg { color: var(--nd-ink); }

/* Progress meter with % chip */
.nd-meter {
  --nd-value: 50%;
  position: relative;
  width: 84px;
  height: 5px;
  border-radius: var(--nd-radius-full);
  background: var(--nd-raised-hover);
}
.nd-meter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--nd-value);
  border-radius: inherit;
  background: var(--nd-progress);
}
.nd-meter__chip {
  position: absolute;
  top: 50%;
  left: var(--nd-value);
  transform: translate(-50%, -50%);
  padding: 2px 4px;
  border-radius: var(--nd-radius-xs);
  background: var(--nd-shell);
  border: 1px solid var(--nd-hairline-strong);
  font: 500 9px / 1 var(--nd-font-mono);
  color: var(--nd-ink);
}
.nd-meter--gain::before { background: var(--nd-gain); }
.nd-meter--loss::before { background: var(--nd-loss); }
.nd-meter--caution::before { background: var(--nd-caution); }

/* Status: text with a signal dot, only for real states */
.nd-status { display: inline-flex; align-items: center; gap: 6px; color: var(--nd-ink-muted); }
.nd-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--nd-ink-faint); }
.nd-status--gain::before { background: var(--nd-gain); }
.nd-status--loss::before { background: var(--nd-loss); }
.nd-status--progress::before { background: var(--nd-progress); }
.nd-status--caution::before { background: var(--nd-caution); }

/* Count chip: carries live numbers only */
.nd-count {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--nd-radius-xs);
  background: var(--nd-raised);
  color: var(--nd-ink-muted);
  font: 500 var(--nd-text-axis) / 1 var(--nd-font-mono);
}

/* Empty / idle state */
.nd-empty {
  display: grid;
  place-items: center;
  gap: var(--nd-space-3);
  min-height: 180px;
  padding: var(--nd-space-6);
  border: 1px dashed var(--nd-hairline-strong);
  border-radius: var(--nd-radius-lg);
  background-color: var(--nd-panel);
  background-image: var(--nd-hatch);
  color: var(--nd-ink-muted);
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nd-grid--2,
  .nd-grid--3 { grid-template-columns: 1fr; }
  .nd-topbar .nd-search { width: 260px; }
}

@media (max-width: 860px) {
  .nd-stage { padding: 0; }
  .nd-shell { grid-template-columns: 1fr; border-radius: 0; }
  .nd-sidebar { border-right: 0; border-bottom: 1px solid var(--nd-hairline); }
  .nd-kpi { grid-template-columns: 1fr; }
  .nd-gantt-scroll,
  .nd-table-scroll { overflow-x: auto; }
  .nd-topbar .nd-search { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600&family=Sometype+Mono:wght@400;500;600&display=swap");

/* ================= Nightdesk tokens ================= */
:root {
  --nd-canvas: #303030;
  --nd-shell: #121212;
  --nd-panel: #1b1b1b;
  --nd-raised: #262626;
  --nd-raised-hover: #2f2f2f;
  --nd-hairline: #2c2c2c;
  --nd-hairline-strong: #3a3a3a;
  --nd-ink: #ededed;
  --nd-ink-muted: #8a8a8a;
  --nd-ink-faint: #5e5e5e;
  --nd-ink-inverse: #121212;
  --nd-gain: #3cc45a;
  --nd-loss: #e5484d;
  --nd-progress: #2f7ff0;
  --nd-caution: #e0b43a;
  --nd-font-ui: "Fira Sans", "Segoe UI", system-ui, sans-serif;
  --nd-font-mono: "Sometype Mono", ui-monospace, Menlo, Consolas, monospace;
  --nd-space-1: 4px;
  --nd-space-2: 8px;
  --nd-space-3: 12px;
  --nd-space-4: 16px;
  --nd-space-5: 20px;
  --nd-space-6: 24px;
  --nd-space-8: 32px;
  --nd-space-10: 40px;
  --nd-control-h: 34px;
  --nd-radius-xs: 4px;
  --nd-radius-sm: 6px;
  --nd-radius-md: 7px;
  --nd-radius-lg: 10px;
  --nd-radius-xl: 20px;
  --nd-radius-full: 999px;

  /* Bootstrap / halfmoon remap */
  --bs-body-bg: #121212;
  --bs-body-color: #ededed;
  --bs-body-font-family: "Fira Sans", "Segoe UI", system-ui, sans-serif;
  --bs-body-font-size: 13px;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.45;
  --bs-border-color: #2c2c2c;
  --bs-border-radius: 7px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 10px;
  --bs-border-radius-xl: 20px;
  --bs-border-radius-pill: 999px;
  --bs-gutter-x: 24px;
  --bs-gutter-y: 12px;
  --bs-primary: #2f7ff0;
  --bs-primary-rgb: 47, 127, 240;
  --bs-secondary: #8a8a8a;
  --bs-secondary-bg: #1b1b1b;
  --bs-tertiary-bg: #262626;
  --bs-success: #3cc45a;
  --bs-danger: #e5484d;
  --bs-warning: #e0b43a;
  --bs-info: #2f7ff0;
  --bs-light: #262626;
  --bs-dark: #121212;
  --bs-link-color: #2f7ff0;
  --bs-link-hover-color: #7da8ff;
  --bs-card-bg: #1b1b1b;
  --bs-card-border-color: #2c2c2c;
  --bs-card-color: #ededed;
  --bs-card-cap-bg: #121212;
  --bs-card-cap-color: #ededed;
  --bs-modal-bg: #1b1b1b;
  --bs-modal-border-color: #2c2c2c;
  --bs-modal-color: #ededed;
  --bs-dropdown-bg: #1b1b1b;
  --bs-dropdown-border-color: #2c2c2c;
  --bs-dropdown-color: #ededed;
  --bs-dropdown-link-color: #ededed;
  --bs-dropdown-link-hover-bg: #262626;
  --bs-dropdown-link-hover-color: #ededed;
  --bs-table-bg: transparent;
  --bs-table-color: #ededed;
  --bs-table-border-color: #2c2c2c;
  --bs-table-hover-bg: rgba(255, 255, 255, 0.02);
  --bs-form-control-bg: #121212;
  --bs-form-control-border-color: #2c2c2c;
  --bs-form-control-color: #ededed;
  --bs-form-control-disabled-bg: #1b1b1b;
  --bs-btn-bg: #262626;
  --bs-btn-border-color: #2c2c2c;
  --bs-btn-color: #ededed;
  --bs-btn-hover-bg: #2f2f2f;
  --bs-btn-hover-border-color: #3a3a3a;
  --bs-btn-hover-color: #ededed;
  --bs-btn-active-bg: #262626;
  --bs-btn-active-border-color: #3a3a3a;
  --bs-btn-active-color: #ededed;
  --bs-btn-disabled-bg: #1b1b1b;
  --bs-btn-disabled-border-color: #2c2c2c;
  --bs-btn-disabled-color: #5e5e5e;
  --bs-navbar-bg: #1b1b1b;
  --bs-navbar-color: #ededed;
  --bs-footer-bg: #121212;
  --bs-badge-bg: #262626;
  --bs-badge-color: #ededed;
  --bs-alert-bg: #1b1b1b;
  --bs-alert-border-color: #2c2c2c;
  --bs-alert-color: #ededed;
  --bs-list-group-bg: #1b1b1b;
  --bs-list-group-border-color: #2c2c2c;
  --bs-list-group-color: #ededed;
  --bs-pagination-bg: #1b1b1b;
  --bs-pagination-border-color: #2c2c2c;
  --bs-pagination-color: #ededed;
  --bs-pagination-hover-bg: #262626;
  --bs-pagination-active-bg: #ededed;
  --bs-pagination-active-color: #121212;
  --bs-progress-bg: #262626;
  --bs-progress-bar-bg: #2f7ff0;
  --bs-progress-bar-color: #121212;
  --bs-accordion-bg: #1b1b1b;
  --bs-accordion-border-color: #2c2c2c;
  --bs-accordion-color: #ededed;
  --bs-accordion-active-bg: #262626;
  --bs-accordion-active-color: #ededed;
  --bs-tooltip-bg: #262626;
  --bs-tooltip-color: #ededed;
  --bs-popover-bg: #1b1b1b;
  --bs-popover-border-color: #2c2c2c;
  --bs-popover-color: #ededed;
  --bs-toast-bg: #262626;
  --bs-toast-color: #ededed;
  --bs-shadow-sm: none;
  --bs-shadow: none;
  --bs-shadow-lg: none;
  --bs-focus-ring-color: rgba(237, 237, 237, 0.55);
}

/* ================= Base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--nd-canvas) !important; }
body {
  margin: 0;
  background: var(--nd-shell) !important;
  color: var(--nd-ink) !important;
  font-family: var(--nd-font-ui) !important;
  font-size: 13px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; letter-spacing: -0.005em; color: var(--nd-ink); }
p { margin: 0; }
a { color: var(--nd-progress) !important; text-decoration: none; }
a:hover { color: #7da8ff !important; }
code, pre, .mono { font-family: var(--nd-font-mono) !important; }

/* ================= Layout ================= */
#wrapper { padding: 0 !important; }
.container, .container-fluid { max-width: 1440px; margin-left: auto; margin-right: auto; padding-left: var(--nd-space-5); padding-right: var(--nd-space-5); }
.row { --bs-gutter-x: 24px; --bs-gutter-y: 12px; }
.col, [class*="col-"] { min-width: 0; }
.section { padding: var(--nd-space-5) 0 !important; }
main, .wrapper { background: transparent; }

/* ================= Navbar ================= */
.navbar {
  background: var(--nd-panel) !important;
  border: 1px solid var(--nd-hairline);
  border-radius: var(--nd-radius-lg) !important;
  box-shadow: none !important;
  color: var(--nd-ink) !important;
  margin: var(--nd-space-4) auto;
  max-width: 1440px;
  width: calc(100% - 2 * var(--nd-space-5));
}
.navbar .container, .navbar .container-fluid { max-width: 100%; padding-left: var(--nd-space-4) !important; padding-right: var(--nd-space-4) !important; }
.navbar .nav-link, .navbar .navbar-brand, .nav-link, .navbar-brand { color: var(--nd-ink) !important; font-size: 14px; }
.navbar .nav-link:hover, .nav-link:hover { background: var(--nd-raised); border-radius: var(--nd-radius-md); }
.navbar-toggler { border-color: var(--nd-hairline) !important; }
.navbar-toggler-icon { filter: invert(1); }
.nav-item { margin: 0; }

/* ================= Cards / panels ================= */
.card, .panel, .modal-content, .dropdown-menu, .list-group-item, .alert, .info-card, .osu-info-card, .beatmap-card, .osu-beatmap-card, .leaderboard-panel, .clan-panel, .footer-dark, .home-badge {
  background: var(--nd-panel) !important;
  border: 1px solid var(--nd-hairline) !important;
  border-radius: var(--nd-radius-lg) !important;
  color: var(--nd-ink) !important;
  box-shadow: none !important;
}
.card { margin-bottom: var(--nd-space-4); }
.card-header, .info-card-header { background: var(--nd-shell) !important; border-bottom: 1px solid var(--nd-hairline) !important; color: var(--nd-ink) !important; padding: var(--nd-space-3) var(--nd-space-4); }
.card-body, .info-card-body { padding: var(--nd-space-4); }
.card-footer { background: var(--nd-shell) !important; border-top: 1px solid var(--nd-hairline) !important; color: var(--nd-ink-muted) !important; padding: var(--nd-space-3) var(--nd-space-4); }
.card-title, .info-card-title, .osu-beatmap-title, .beatmap-title, .card-text, .info-card-body { color: var(--nd-ink) !important; }
.card-text, .info-card-body, .osu-beatmap-info, .osu-beatmap-stats { color: var(--nd-ink-muted) !important; }
.card-img, .beatmap-image, .osu-beatmap-bg, .image-placeholder, .image-overlay { border-radius: var(--nd-radius-md) !important; }

/* ================= Buttons ================= */
.btn, .action-button, .osu-action-btn, .osu-lb-action-button, .osu-detail-btn, .btn-pink, .btn-discord, .no-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nd-space-2);
  height: var(--nd-control-h);
  padding: 0 var(--nd-space-4);
  border: 1px solid var(--nd-hairline) !important;
  border-radius: var(--nd-radius-md) !important;
  background: var(--nd-raised) !important;
  color: var(--nd-ink) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none !important;
}
.btn:hover, .action-button:hover, .osu-action-btn:hover, .osu-lb-action-button:hover, .osu-detail-btn:hover {
  background: var(--nd-raised-hover) !important;
  border-color: var(--nd-hairline-strong) !important;
  color: var(--nd-ink) !important;
}
.btn-primary, .btn-success, .btn-discord { background: var(--nd-ink) !important; color: var(--nd-ink-inverse) !important; border-color: var(--nd-ink) !important; }
.btn-primary:hover, .btn-success:hover, .btn-discord:hover { background: #fff !important; border-color: #fff !important; color: var(--nd-ink-inverse) !important; }
.btn-danger { background: transparent !important; color: var(--nd-loss) !important; border-color: var(--nd-loss) !important; }
.btn-danger:hover { background: rgba(229, 72, 77, 0.1) !important; color: var(--nd-loss) !important; border-color: var(--nd-loss) !important; }
.btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-outline-light { background: var(--nd-raised) !important; color: var(--nd-ink) !important; border-color: var(--nd-hairline) !important; }
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-light:hover { background: var(--nd-raised-hover) !important; color: var(--nd-ink) !important; border-color: var(--nd-hairline-strong) !important; }
.btn-sm { height: 28px; padding: 0 var(--nd-space-3); font-size: 12px; }
.btn-lg { height: 44px; padding: 0 var(--nd-space-5); font-size: 14px; }
.btn-block, .w-100 { width: 100% !important; }
.btn-close { filter: invert(1); }

/* ================= Badges ================= */
.badge, .badge-grp, .group-badge, .clan-badge, .mod-pill, .home-badge, .grade, .osu-grade, .follower-badge, .following-badge, .mutual-badge, .groupEmoji, .groupDiv, .groupPlace {
  background: var(--nd-raised) !important;
  color: var(--nd-ink) !important;
  border: 1px solid var(--nd-hairline) !important;
  border-radius: var(--nd-radius-sm) !important;
  font-size: 12px;
  font-weight: 500;
  padding: 2px 8px;
}

/* ================= Alerts ================= */
.alert { background: var(--nd-panel) !important; border: 1px solid var(--nd-hairline) !important; color: var(--nd-ink) !important; border-radius: var(--nd-radius-md) !important; padding: var(--nd-space-3) var(--nd-space-4); box-shadow: none !important; }
.alert-danger { border-color: var(--nd-loss) !important; color: var(--nd-loss) !important; background: rgba(229, 72, 77, 0.08) !important; }
.alert-primary, .alert-info { border-color: var(--nd-progress) !important; color: #7da8ff !important; background: rgba(47, 127, 240, 0.08) !important; }
.alert-success { border-color: var(--nd-gain) !important; color: var(--nd-gain) !important; background: rgba(60, 196, 90, 0.08) !important; }
.alert-warning { border-color: var(--nd-caution) !important; color: var(--nd-caution) !important; background: rgba(224, 180, 58, 0.08) !important; }

/* ================= Forms ================= */
.form-control, .form-select, .input-group-text, .search-input, .shiina-search-input {
  background: var(--nd-shell) !important;
  border: 1px solid var(--nd-hairline) !important;
  border-radius: var(--nd-radius-md) !important;
  color: var(--nd-ink) !important;
  font-size: 13px;
  height: var(--nd-control-h);
  box-shadow: none !important;
}
.form-control::placeholder, .form-select::placeholder, .search-input::placeholder { color: var(--nd-ink-faint) !important; }
.form-control:focus, .form-select:focus { border-color: var(--nd-ink-muted) !important; box-shadow: none !important; }
.input-group-text { background: var(--nd-panel) !important; color: var(--nd-ink-muted) !important; }
.form-label { color: var(--nd-ink-muted) !important; font-size: 12px; }
.form-check-input { background: var(--nd-raised) !important; border-color: var(--nd-hairline-strong) !important; }
.form-check-input:checked { background: var(--nd-ink) !important; border-color: var(--nd-ink) !important; }
.form-check-label { color: var(--nd-ink) !important; }

/* ================= Tables ================= */
.table { width: 100%; border-collapse: collapse; color: var(--nd-ink-muted) !important; font-size: 14px; --bs-table-bg: transparent; --bs-table-color: var(--nd-ink-muted); }
.table thead th { background: var(--nd-shell) !important; color: var(--nd-ink) !important; font-weight: 400; border-bottom: 1px solid var(--nd-hairline) !important; height: 44px; padding: 0 var(--nd-space-3); text-align: left; }
.table tbody td { border-bottom: 1px solid var(--nd-hairline) !important; color: var(--nd-ink-muted) !important; height: 48px; padding: 0 var(--nd-space-3); }
.table tbody tr:hover td { background: rgba(255, 255, 255, 0.015) !important; }
.table tbody tr:last-child td { border-bottom: 0 !important; }

/* ================= Dropdown / modal / list / accordion / toast / tooltip ================= */
.dropdown-menu { padding: var(--nd-space-1); }
.dropdown-item { color: var(--nd-ink) !important; border-radius: var(--nd-radius-sm); padding: 6px 12px; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--nd-raised) !important; color: var(--nd-ink) !important; }
.modal-header, .modal-footer { border-color: var(--nd-hairline) !important; }
.modal-body { padding: var(--nd-space-4); }
.list-group-item { border-color: var(--nd-hairline) !important; }
.list-group-item:hover { background: var(--nd-raised) !important; }
.accordion-item, .accordion-button { background: var(--nd-panel) !important; border-color: var(--nd-hairline) !important; color: var(--nd-ink) !important; }
.accordion-button:not(.collapsed) { background: var(--nd-raised) !important; color: var(--nd-ink) !important; box-shadow: none !important; }
.toast, .toast-header { background: var(--nd-raised) !important; color: var(--nd-ink) !important; border-color: var(--nd-hairline) !important; }
.tooltip-inner { background: var(--nd-raised) !important; color: var(--nd-ink) !important; border: 1px solid var(--nd-hairline-strong) !important; }
.spinner-border { color: var(--nd-ink) !important; }

/* ================= Pagination / progress ================= */
.pagination .page-link, .page-link { background: var(--nd-panel) !important; border-color: var(--nd-hairline) !important; color: var(--nd-ink) !important; }
.pagination .page-link:hover { background: var(--nd-raised) !important; color: var(--nd-ink) !important; }
.pagination .page-item.active .page-link { background: var(--nd-ink) !important; color: var(--nd-ink-inverse) !important; border-color: var(--nd-ink) !important; }
.progress { background: var(--nd-raised-hover) !important; border-radius: var(--nd-radius-full) !important; height: 5px; }
.progress-bar { background: var(--nd-progress) !important; }

/* ================= Select2 ================= */
.select2-container--bootstrap-5 .select2-selection { background: var(--nd-shell) !important; border: 1px solid var(--nd-hairline) !important; color: var(--nd-ink) !important; }
.select2-container--bootstrap-5 .select2-dropdown { background: var(--nd-panel) !important; border: 1px solid var(--nd-hairline) !important; }
.select2-container--bootstrap-5 .select2-results__option { color: var(--nd-ink) !important; }
.select2-container--bootstrap-5 .select2-results__option--highlighted { background: var(--nd-raised) !important; color: var(--nd-ink) !important; }

/* ================= Footer ================= */
footer, .footer-dark { background: var(--nd-shell) !important; border-top: 1px solid var(--nd-hairline) !important; color: var(--nd-ink-muted) !important; }
footer .container, footer .container-fluid { max-width: 1440px; }
.footer-link, .footer-text, .footer-heading { color: var(--nd-ink-muted) !important; }
.footer-link:hover { color: var(--nd-ink) !important; }
.footer-logo { filter: brightness(0) invert(1); opacity: 0.85; }

/* ================= Shiina-specific ================= */
.osu-lb-container, .osu-lb-actions, .osu-lb-groups, .osu-lb-group, .osu-lb-clan, .osu-lb-flag { background: transparent !important; }
.osu-lb-container { border-bottom: 1px solid var(--nd-hairline) !important; }
.osu-lb-container:hover { background: rgba(255, 255, 255, 0.015) !important; }
.osu-beatmap-card, .beatmap-card, .osu-info-card, .info-card { transition: border-color 140ms ease, background 140ms ease; }
.osu-beatmap-card:hover, .beatmap-card:hover { border-color: var(--nd-hairline-strong) !important; }
.osu-acc-display, .osu-combo-display, .main-stats, .acc-value, .acc-display, .leaderboard-additional-stat-value, .hit-stat-value { font-family: var(--nd-font-mono) !important; }
.stat-value, .info-value { color: var(--nd-ink) !important; font-family: var(--nd-font-mono) !important; }
.line-vert, .shiina-border { border-color: var(--nd-hairline) !important; }
.mode-icon, .flag { border-radius: 3px; }
.hexagon { border-color: var(--nd-hairline) !important; color: var(--nd-ink) !important; }

/* ================= Utilities ================= */
.text-muted, .text-secondary, .muted, .lead-h, .osu-beatmap-creator, .osu-beatmap-status { color: var(--nd-ink-muted) !important; }
.text-white, .text-body { color: var(--nd-ink) !important; }
.text-primary { color: var(--nd-progress) !important; }
.text-success { color: var(--nd-gain) !important; }
.text-danger { color: var(--nd-loss) !important; }
.text-warning { color: var(--nd-caution) !important; }
.text-info { color: var(--nd-progress) !important; }
.bg-primary, .bg-success, .bg-danger, .bg-dark, .bg-light, .bg-body, .bg-body-tertiary { background-color: var(--nd-panel) !important; }
.bg-secondary { background-color: var(--nd-raised) !important; }
.bg-body-tertiary { background-color: var(--nd-raised) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--nd-hairline) !important; }
.border-0 { border: 0 !important; }
.rounded, .rounded-3 { border-radius: var(--nd-radius-md) !important; }
.rounded-circle { border-radius: var(--nd-radius-full) !important; }
.shadow-sm, .shadow { box-shadow: none !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--nd-space-1) !important; }
.mb-2 { margin-bottom: var(--nd-space-2) !important; }
.mb-3 { margin-bottom: var(--nd-space-3) !important; }
.mb-4 { margin-bottom: var(--nd-space-4) !important; }
.mt-1 { margin-top: var(--nd-space-1) !important; }
.mt-2 { margin-top: var(--nd-space-2) !important; }
.mt-3 { margin-top: var(--nd-space-3) !important; }
.mt-4 { margin-top: var(--nd-space-4) !important; }
.p-1 { padding: var(--nd-space-1) !important; }
.p-2 { padding: var(--nd-space-2) !important; }
.p-3 { padding: var(--nd-space-3) !important; }
.p-4 { padding: var(--nd-space-4) !important; }
.py-2 { padding-top: var(--nd-space-2) !important; padding-bottom: var(--nd-space-2) !important; }
.py-3 { padding-top: var(--nd-space-3) !important; padding-bottom: var(--nd-space-3) !important; }
.py-4 { padding-top: var(--nd-space-4) !important; padding-bottom: var(--nd-space-4) !important; }
.px-3 { padding-left: var(--nd-space-3) !important; padding-right: var(--nd-space-3) !important; }
.px-4 { padding-left: var(--nd-space-4) !important; padding-right: var(--nd-space-4) !important; }
.g-3 { gap: var(--nd-space-3) !important; }

/* ================= Nightdesk home ================= */
.nd-panel .nd-panel { border: 0 !important; background: var(--nd-raised) !important; }
.nd-panel > .nd-panel { padding: var(--nd-space-3); }
.nd-status { padding: 0; }
.nd-hero-kpis { align-items: stretch; }
.nd-hero-kpis .nd-panel { justify-content: space-between; }
.nd-toolbar { flex-wrap: wrap; }
.nd-count { margin-left: auto; }

/* ================= Inline-style overrides ================= */
[style*="background: rgba(0,0,0,0.1)"] { background: var(--nd-panel) !important; }
[style*="background: rgba(255,255,255,0.05)"] { background: var(--nd-raised) !important; }
[style*="background: rgba(255,255,255,0.1)"] { background: var(--nd-raised) !important; }
[style*="border: 1px solid rgba(255,255,255,0.1)"] { border-color: var(--nd-hairline) !important; }
[style*="border: 1px solid rgba(255,255,255,0.2)"] { border-color: var(--nd-hairline) !important; }
[style*="linear-gradient(90deg, rgba(255,255,255,0.2)"] { background: var(--nd-hairline) !important; }
[style*="font-size: 0.9rem"] { font-size: 13px !important; }
[style*="font-size: 0.75rem"] { font-size: 12px !important; }
[style*="font-size: 3rem"] { font-size: 32px !important; }
[style*="opacity: 0.3"] { opacity: 0.5 !important; }
[style*="max-height: 60px"] { max-height: 48px !important; }
[style*="max-height: 100px"] { max-height: 100px !important; }
[style*="height: 1px"] { height: 1px !important; }
[style*="min-height: 600px"] { min-height: auto !important; }
[style*="height: 600px"] { height: auto !important; }
[style*="object-fit: cover"] { object-fit: cover !important; }
[style*="width: inherit"] { width: 100% !important; }
[style*="max-width: 40%"] { max-width: 100% !important; }
[style*="left: 50%"] { left: 50% !important; }
[style*="right: 50%"] { right: 50% !important; }
[style*="z-index: 200"] { z-index: 200 !important; }
[style*="margin-top: 20px"] { margin-top: var(--nd-space-4) !important; }
[style*="pointer-events: none"] { pointer-events: none !important; }
[style*="filter: drop-shadow"] { filter: none !important; }
.userpage, .achievements, .playcountgraph, .rankgraph, .last-scores, .best-scores, .first-place-scores {
  background: var(--nd-panel) !important;
  border: 1px solid var(--nd-hairline) !important;
  border-radius: var(--nd-radius-lg) !important;
  color: var(--nd-ink) !important;
}