/* Neuro Grid — flat tech re-skin. Loaded after bundle.css / css.css,
   selectors are copied at matching specificity so it wins by source order
   without needing !important. No structural/JS-facing classes are touched. */

:root {
  --bg: #0a0e17;
  --panel: #10151f;
  --panel-2: #141a26;
  --line: rgba(240, 185, 11, 0.18);
  --accent: rgb(240, 185, 11);
  --accent-2: #f8d24e;
  --text: #e6e9f2;
  --text-dim: #8891a6;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

html, body {
  background-color: var(--bg);
}

::selection {
  background: rgba(240, 185, 11, 0.35);
  text-shadow: none;
}

/* ---------- Header ---------- */

.custom-header {
  background-color: var(--panel) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

.x-link {
  color: var(--text);
  display: inline-flex;
  transition: color 0.2s;
}

.x-link:hover {
  color: var(--accent);
}

#coming-soon-text {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 18px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Top controls bar ---------- */

#top-controls {
  background: var(--panel) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

#top-controls .control .label,
#top-controls .control label {
  color: var(--text-dim);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}

#top-controls .control .value {
  font-family: var(--mono);
  color: var(--accent);
  font-weight: 400;
}

#top-controls .control select {
  background: none;
  color: var(--text);
  border-bottom: solid 1px var(--line);
  font-family: var(--mono);
}

#top-controls .control select option {
  background: var(--panel-2);
  color: var(--text);
}

#top-controls .control select:focus {
  border-bottom-color: var(--accent);
}

#top-controls .control .select::after {
  color: var(--text-dim);
}

/* Flatten the top-controls icon buttons (reset / play / step) */

#main-part .mdl-button,
#top-controls .mdl-button {
  background-color: rgba(240, 185, 11, 0.08);
  border-radius: 6px;
  box-shadow: none;
}

#main-part .mdl-button:hover,
#top-controls .mdl-button:hover {
  background-color: rgba(240, 185, 11, 0.18);
}

#main-part .mdl-button:focus:not(:active),
#top-controls .mdl-button:focus:not(:active) {
  background-color: rgba(240, 185, 11, 0.22);
}

#main-part .mdl-button:active,
#top-controls .mdl-button:active {
  background-color: rgba(240, 185, 11, 0.3);
}

#main-part .mdl-button .material-icons,
#top-controls .mdl-button .material-icons {
  color: var(--text);
}

#play-pause-button.mdl-button--fab.mdl-button--colored,
#play-pause-button.mdl-button--fab.mdl-button--colored:hover,
#play-pause-button.mdl-button--fab.mdl-button--colored:active,
#play-pause-button.mdl-button--fab.mdl-button--colored:focus,
#play-pause-button.mdl-button--fab.mdl-button--colored:focus:not(:active) {
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: none;
}

/* Match play/pause size to the reset/step icon buttons (32px) instead of
   the default 56px MDL fab. */
#play-pause-button.mdl-button--fab {
  width: 32px;
  height: 32px;
  min-width: 32px;
}

#play-pause-button .material-icons {
  font-size: 24px;
  line-height: 24px;
  width: 24px;
  transform: translate(-12px, -12px);
}

/* ---------- Main visualization panel ---------- */

#main-part {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px 24px 24px;
}

#main-part h4 {
  color: var(--text);
  letter-spacing: 0.06em;
}

#main-part p,
#main-part .column .label,
#main-part .column label {
  color: var(--text-dim);
}

.bracket,
.bracket.reverse {
  border-color: var(--line);
}

/* Data column */

.data.column .data-thumbnail {
  border: 2px solid var(--line);
  border-radius: 4px;
}

.data.column .data-thumbnail:hover {
  border-color: var(--accent);
}

.data.column .data-thumbnail.selected {
  border-color: var(--accent);
  box-shadow: none;
  background-color: var(--panel-2);
}

#main-part .basic-button {
  font-family: var(--mono);
  color: var(--text-dim);
  background: rgba(240, 185, 11, 0.08);
  border: 1px solid var(--line);
  border-radius: 6px;
}

#main-part .basic-button:hover {
  background: rgba(240, 185, 11, 0.16);
  color: var(--text);
}

#main-part .basic-button:focus,
#main-part .basic-button:active {
  background: rgba(240, 185, 11, 0.22);
  color: var(--text);
}

/* Features / network column — kept as a bright "screen" against the dark
   panel on purpose: node fill, link colors and canvas heatmap colors are
   left untouched since they carry meaning (weight sign / class color). */

#network svg .main-label,
#network svg .active .main-label {
  fill: var(--text-dim);
}

.axis line { stroke: var(--line); }
.axis text { fill: var(--text-dim); }

.features.column .callout .label,
#main-part .features.column .callout .label {
  color: var(--text-dim);
}

.features.column .plus-minus-neurons {
  color: var(--text);
}

#hovercard {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Output column */

.metrics .train,
#main-part .output .output-stats .value {
  color: var(--text-dim);
}

#main-part .output-stats span {
  color: var(--text-dim);
}

#loss-test {
  color: var(--accent);
  font-family: var(--mono);
}

#heatmap .tick line { stroke: var(--line); }
#heatmap .tick text { fill: var(--text-dim); }
#heatmap .tick:nth-child(7) text { fill: var(--text); }
#heatmap .tick:nth-child(7) line { stroke: var(--accent); }

/* Checkbox / slider accents (was #183D4E, now gradient accent) */

.mdl-checkbox__box-outline {
  border-color: rgba(230, 233, 242, 0.4);
}

.mdl-checkbox.is-checked .mdl-checkbox__tick-outline,
.mdl-checkbox.is-checked .mdl-checkbox__box-outline,
.mdl-checkbox__ripple-container .mdl-ripple {
  background-color: var(--accent);
  border-color: var(--accent);
}

#main-part .output .mdl-checkbox__label.label {
  color: var(--text-dim);
}

#main-part .mdl-slider.is-upgraded { color: var(--accent); }
#main-part .mdl-slider__background-lower { background-color: var(--accent); }
#main-part .mdl-slider__background-upper { background-color: var(--line); }
#main-part .mdl-slider.is-upgraded::-webkit-slider-thumb { background-color: var(--accent); box-shadow: none; }
#main-part .mdl-slider.is-upgraded::-moz-range-thumb { background-color: var(--accent); box-shadow: none; }
#main-part .mdl-slider.is-upgraded::-ms-thumb { background-color: var(--accent); box-shadow: none; }
#main-part .mdl-slider.is-upgraded.is-lowest-value::-webkit-slider-thumb { border-color: var(--accent); }
#main-part .mdl-slider.is-upgraded.is-lowest-value::-moz-range-thumb { border-color: var(--accent); }

/* "More" chevron button */

.more button,
.more button:hover,
.more button:active,
.more button:focus,
.more button:focus:not(:active) {
  background: var(--panel-2);
  box-shadow: none;
  border: 1px solid var(--line);
}

.more button .material-icons {
  color: var(--accent);
}

/* ---------- Article / footer ---------- */

article {
  background: var(--bg);
  box-shadow: none;
  border-top: 1px solid var(--line);
}

article h2, article h3 {
  color: var(--text);
  font-weight: 600;
}

article h2 {
  position: relative;
  padding-left: 14px;
}

article h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 2px;
}

article p, article li {
  color: var(--text-dim);
}

article a {
  color: var(--accent);
}

.l--body h2, .l--body h3 { color: var(--text); }

footer {
  border-top: solid 1px var(--line);
  background: var(--bg);
}

footer .links a { color: var(--text-dim); }
footer .links a:hover { color: var(--accent); text-decoration: none; }