/* ── Design tokens — dark (default) ── */
.ntc-card {
  --ntc-theme-surface:       var(--color-surface,        #1c1c1c);
  --ntc-theme-surface-hover: var(--color-surface-hover,  #222222);
  --ntc-theme-text:          var(--color-text,           #d0d0d0);
  --ntc-theme-heading:       var(--color-heading,        #f0f0f0);
  --ntc-theme-border:        var(--color-border,         #2a2a2a);
  --ntc-theme-border-light:  var(--color-border-light,   #363636);
  --ntc-theme-accent:        var(--color-accent,         #e8c87a);

  --ntc-bg:          color-mix(in srgb, var(--ntc-theme-surface) 90%, #0b0f14 10%);
  --ntc-panel:       color-mix(in srgb, var(--ntc-theme-surface-hover) 88%, #0f172a 12%);
  --ntc-panel-s:     color-mix(in srgb, var(--ntc-theme-surface-hover) 78%, #0b1220 22%);
  --ntc-text:        var(--ntc-theme-text);
  --ntc-text-s:      color-mix(in srgb, var(--ntc-text) 68%, transparent);
  --ntc-border:      color-mix(in srgb, var(--ntc-theme-border-light) 82%, transparent);
  --ntc-accent:      color-mix(in srgb, var(--ntc-theme-accent) 92%, #ffffff 8%);
  --ntc-accent-soft: color-mix(in srgb, var(--ntc-theme-accent) 12%, var(--ntc-bg));
  --ntc-ctrl:        39px;

  width: 100%;
  max-width: 980px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid var(--ntc-border);
  border-radius: 24px;
  background: linear-gradient(180deg, var(--ntc-bg) 0%, color-mix(in srgb, var(--ntc-bg) 92%, #000 8%) 100%);
  box-shadow: 0 20px 48px color-mix(in srgb, var(--ntc-text) 8%, transparent);
  color: var(--ntc-text);
}

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

/* ── Header — matches .rlc-header ── */
.ntc-header h3 {
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 2.3vw, 1.9rem);
  line-height: 1.15;
  color: var(--ntc-theme-heading);
}

.ntc-header p {
  margin: 0 0 20px;
  max-width: 68ch;
  color: var(--ntc-text-s);
}

/* ── Type toggle ── */
.ntc-type-row {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  width: fit-content;
  border: 1px solid var(--ntc-border);
  border-radius: 999px;
  overflow: hidden;
}

.ntc-tbtn {
  appearance: none;
  padding: 5px 22px;
  border: none;
  background: var(--ntc-panel-s);
  color: var(--ntc-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  transition: background 140ms ease, color 140ms ease;
  min-height: var(--ntc-ctrl);
}

.ntc-tbtn:first-child { border-radius: 999px 0 0 999px; }
.ntc-tbtn:last-child  { border-radius: 0 999px 999px 0; }

.ntc-tbtn.is-active {
  background: linear-gradient(135deg, var(--ntc-accent) 0%, color-mix(in srgb, var(--ntc-accent) 78%, #0f172a 22%) 100%);
  color: #111;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ntc-accent) 20%, transparent);
}

/* ── Fields grid ── */
.ntc-fields {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  justify-content: space-between;
  row-gap: 12px;
  margin-bottom: 14px;
  align-items: center;
}

.ntc-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ntc-lbl {
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--ntc-text);
  white-space: nowrap;
  min-width: 128px;
}

.ntc-inp-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Inputs — match .rlc-inline-field input ── */
.ntc-inp {
  width: 120px;
  min-width: 0;
  height: 39px;
  padding: 6px 20px;
  border: 1px solid var(--ntc-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ntc-panel-s) 92%, #000 8%);
  color: var(--ntc-text);
  font: inherit;
  font-size: 0.88rem;
  -moz-appearance: textfield;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.ntc-inp::-webkit-outer-spin-button,
.ntc-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ntc-inp::placeholder { color: color-mix(in srgb, var(--ntc-text) 54%, transparent); }

.ntc-inp:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--ntc-accent) 52%, var(--ntc-border));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ntc-accent) 14%, transparent);
}

.ntc-inp--sm { width: 120px; height: 39px; }

.ntc-unit {
  font-size: 0.84rem;
  color: var(--ntc-text-s);
  white-space: nowrap;
}

/* ── Ref direnç row ── */
.ntc-rref-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}

.ntc-rref-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ── Unit buttons — horizontal, matches .rlc-unit-button ── */
.ntc-unit-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ntc-unit-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ntc-ctrl);
  padding: 6px 14px;
  border: 1px solid var(--ntc-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ntc-panel-s) 92%, #000 8%);
  color: var(--ntc-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  transition: 160ms ease;
}

.ntc-unit-button:hover {
  border-color: color-mix(in srgb, var(--ntc-accent) 40%, var(--ntc-border));
  transform: translateY(-1px);
}

.ntc-unit-button.is-active {
  background: linear-gradient(135deg, var(--ntc-accent) 0%, color-mix(in srgb, var(--ntc-accent) 78%, #0f172a 22%) 100%);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ntc-accent) 20%, transparent);
}

/* ── Graph card ── */
.ntc-graph-card {
  margin-top: 6px;
  padding: 18px;
  border: 1px solid var(--ntc-border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--ntc-panel) 96%, #fff 4%);
}

.ntc-graph-card.is-hidden { display: none; }

.ntc-graph-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.ntc-graph-title {
  margin: 0;
  font-size: 1.04rem;
  color: var(--ntc-theme-heading);
}

.ntc-target-row {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.ntc-unit-lbl {
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--ntc-text-s);
}

.ntc-res-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ntc-accent) 28%, transparent);
  background: var(--ntc-accent-soft);
  color: var(--ntc-theme-heading);
  font-size: 1.0rem;
  font-weight: 700;
  transition: opacity 160ms ease;
}

.ntc-res-badge.is-dim { opacity: 0.4; }

/* ── Canvas shell ── */
.ntc-graph-shell {
  position: relative;
  border: 1px solid var(--ntc-border);
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(circle at top left, color-mix(in srgb, var(--ntc-accent) 10%, transparent), transparent 34%),
              linear-gradient(180deg, color-mix(in srgb, var(--ntc-panel-s) 94%, #000 6%) 0%, color-mix(in srgb, var(--ntc-bg) 96%, #000 4%) 100%);
}

.ntc-canvas {
  display: block;
  width: 100%;
  height: 300px;
}

/* ── Light mode overrides ── */
body.light-mode .ntc-card {
  --ntc-theme-surface:       var(--color-surface,        #ffffff);
  --ntc-theme-surface-hover: var(--color-surface-hover,  #f8f7f2);
  --ntc-theme-text:          var(--color-text,           #4a4a4a);
  --ntc-theme-heading:       var(--color-heading,        #0a0a0a);
  --ntc-theme-border:        var(--color-border,         #dddbd0);
  --ntc-theme-border-light:  var(--color-border-light,   #c8c5b8);
  --ntc-theme-accent:        var(--color-accent,         #7a4f1a);

  --ntc-bg:          color-mix(in srgb, var(--ntc-theme-surface) 96%, #e7e2d6 4%);
  --ntc-panel:       color-mix(in srgb, var(--ntc-theme-surface-hover) 96%, #e5dfd1 4%);
  --ntc-panel-s:     color-mix(in srgb, var(--ntc-theme-surface) 90%, #d8d1c3 10%);
  --ntc-text:        var(--ntc-theme-text);
  --ntc-text-s:      color-mix(in srgb, var(--ntc-text) 68%, transparent);
  --ntc-border:      color-mix(in srgb, var(--ntc-theme-border-light) 88%, transparent);
  --ntc-accent:      color-mix(in srgb, var(--ntc-theme-accent) 92%, #ffffff 8%);
  --ntc-accent-soft: color-mix(in srgb, var(--ntc-theme-accent) 10%, var(--ntc-bg));

  background: linear-gradient(180deg, var(--ntc-bg) 0%, color-mix(in srgb, var(--ntc-bg) 96%, #d9d3c6 4%) 100%);
  box-shadow: 0 20px 48px rgba(0,0,0,.06);
}

body.light-mode .ntc-card .ntc-inp,
body.light-mode .ntc-card .ntc-tbtn,
body.light-mode .ntc-card .ntc-unit-button {
  background: color-mix(in srgb, var(--ntc-theme-surface) 96%, #ece7dc 4%);
}

body.light-mode .ntc-card .ntc-tbtn.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--ntc-theme-accent) 0%, color-mix(in srgb, var(--ntc-theme-accent) 82%, #5c3a10 18%) 100%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ntc-theme-accent) 18%, transparent);
}

body.light-mode .ntc-card .ntc-unit-button.is-active {
  color: #ffffff;
  background: linear-gradient(135deg, var(--ntc-theme-accent) 0%, color-mix(in srgb, var(--ntc-theme-accent) 82%, #5c3a10 18%) 100%);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--ntc-theme-accent) 18%, transparent);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  .ntc-fields { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .ntc-card { padding: 18px; border-radius: 18px; }
  .ntc-graph-card { padding: 14px; }
  .ntc-canvas { height: 260px; }
  .ntc-graph-head { flex-direction: column; align-items: flex-start; }
}