:root{
  --xbg:#0b1020; --xcard:#121a33; --xmuted:#8fa1c7; --xtxt:#e9efff;
  --xaccent:#7aa2ff; --xwarn:#ffcc66; --xok:#67e8a6; --xbad:#ff6b6b;
  --xline:rgba(255,255,255,.10); --xfield:rgba(0,0,0,.22);
}

/* ===== Base wrapper ===== */
.xnode-wrap, .xnode-wrap *{box-sizing:border-box}
.xnode-wrap{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:26px 16px 42px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--xtxt);
  /* theme container sapmalarına karşı */
  display:block;
}

/* background only inside the calculator area (not the full page) */
.xnode-wrap{
  background: radial-gradient(1200px 800px at 20% 0%, #18214a 0%, var(--xbg) 55%), var(--xbg);
  border-radius:18px;
}

/* Typography */
.xnode-wrap h1{font-size:22px; margin:0 0 8px; letter-spacing:.2px}
.xnode-wrap p{margin:6px 0 0; color:var(--xmuted); line-height:1.35}

/* Layout */
.xnode-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px;
  margin-top:14px
}

/* Cards */
.xnode-card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--xline);
  border-radius:18px;
  padding:14px;
  /* “glass” hizası için */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.xnode-card h2{
  font-size:13px; margin:0 0 10px; color:#cfe0ff;
  text-transform:uppercase; letter-spacing:.12em;
}

.xnode-row{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10px;
  align-items:center;
  margin:10px 0;
}

.xnode-row1{grid-template-columns:1fr; margin:0;}

.xnode-wrap label{font-size:13px; color:#d9e5ff}

/* Inputs */
.xnode-wrap input,
.xnode-wrap select{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:var(--xfield);
  color:var(--xtxt);
  outline:none;

  /* sayıların düzgün oturması */
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.xnode-wrap input[type="number"]{
  text-align:center;
}

.xnode-wrap input:focus,
.xnode-wrap select:focus{
  border-color:rgba(122,162,255,.7);
  box-shadow:0 0 0 3px rgba(122,162,255,.18)
}

.xnode-wrap input[readonly]{opacity:.85}

.xnode-hint{font-size:12px; color:var(--xmuted); margin-top:6px}

.xnode-pill{
  display:inline-flex;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.22);
  font-size:12px;
  color:#d6e2ff;
  margin-right:6px;
  margin-top:6px;
}

.xnode-warn{color:var(--xwarn)}
.xnode-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace}

.xnode-split2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* ===== Tables ===== */
.xnode-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
  margin-top:6px;
}

.xnode-table th{
  text-align:left;
  font-size:12px;
  color:#a9b9dd;
  font-weight:650;
  padding:0 8px 6px;
}

.xnode-table td{padding:0 8px}

.xnode-trow{
  border:1px solid var(--xline);
  background:rgba(0,0,0,.16);
  border-radius:14px;
}

.xnode-trow td{padding:10px 8px}

.xnode-tier{font-weight:700; color:#eaf2ff;}
.xnode-small{font-size:12px; color:var(--xmuted)}
.xnode-divider{height:1px; background:var(--xline); margin:14px 0}

.xnode-kpis{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px}
.xnode-box{border:1px solid var(--xline); border-radius:16px; padding:10px; background:rgba(0,0,0,.18)}
.xnode-box .xnode-t{font-size:12px; color:var(--xmuted)}
.xnode-box .xnode-v{font-size:15px; margin-top:2px; font-weight:750}

.xnode-results{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.xnode-big{font-size:44px; font-weight:850; letter-spacing:.2px; line-height:1;}
.xnode-sub{color:var(--xmuted); font-size:12px; margin-top:6px}
.xnode-footer{margin-top:14px; font-size:12px; color:var(--xmuted)}

.xnode-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--xline);
  background:rgba(0,0,0,.12);
}
.xnode-toggle input{width:auto}
.xnode-strong{font-weight:750}

.xnode-guide{
  border:1px solid var(--xline);
  border-radius:18px;
  padding:14px;
  background:rgba(0,0,0,.14);
  min-height:260px;
}

.xnode-guide h3{
  margin:0 0 8px;
  font-size:13px;
  color:#cfe0ff;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.xnode-guide ul{margin:10px 0 0 18px; padding:0; color:#d6e2ff}
.xnode-guide li{margin:8px 0; line-height:1.35}
.xnode-badgeRow{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

.xnode-apiStatus{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-top:8px; color:var(--xmuted); font-size:12px;
}

.xnode-dot{width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.25)}
.xnode-dot.ok{background:var(--xok)}
.xnode-dot.bad{background:var(--xbad)}

.xnode-logoWrap{
  display:flex; align-items:center; gap:10px; margin:0 0 8px;
}

.xnode-img{
  width:56px; height:56px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  object-fit:cover;
}

.xnode-noteWarn{
  font-size:12px;
  color:var(--xwarn);
  margin-top:6px;
  display:none;
}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .xnode-grid{grid-template-columns:1fr}
  .xnode-big{font-size:38px}
}

/* Mobile: turn tables into “cards” so numbers never get cut (7500 -> 750 issue fix) */
@media (max-width: 560px){
  /* tighter spacing */
  .xnode-card{padding:12px}
  .xnode-row{grid-template-columns:1fr; gap:6px}
  .xnode-wrap input, .xnode-wrap select{padding:10px 8px; font-size:15px}

  /* hide table headers */
  .xnode-table thead{display:none}

  /* make table rows block-grid */
  .xnode-table, .xnode-table tbody{display:block; width:100%}
  .xnode-table tr{display:block; width:100%}

  .xnode-trow{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:10px;
    padding:12px;
  }

  /* tier text full width on top */
  .xnode-trow td:first-child{
    grid-column: 1 / -1;
    padding:0 0 6px 0;
  }

  /* remove inner td padding so inputs get full width */
  .xnode-trow td{
    padding:0 !important;
  }

  /* inputs get full width + centered numbers */
  .xnode-trow input{
    width:100%;
    min-width:0;
    text-align:center;
  }

  /* slightly smaller “pill” spacing */
  .xnode-pill{margin-right:4px; margin-top:4px}
}