/* Refined pastel theme (dark enforced) */
:root{
  --bg:#071026;
  --card:#081428;
  --muted:#9aa3b2;
  --text:#e6eef6;
  --accent:#4aa3e0;
  --accent-2:#7ad3b7;
  --danger:#e06b6b;
  --success:#46b16b;
  --panel-border:#0f2b3a;
  --mono-bg:#06101a;
  --glass: rgba(74,163,224,0.06);
  --radius:12px;
  --gap:12px;
  --code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace;
}

html,body{height:106%;margin:0;font-family:system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
body{padding:18px}

/* header */
.header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.title-block{display:flex;align-items:flex-start;gap:12px}
h1{margin:0;font-size:2.0rem}
.small{font-size:0.88rem;color:var(--muted)}

/* subtle glass card */
.card{background:var(--card);border:1px solid var(--panel-border);border-radius:var(--radius);padding:14px;box-shadow:0 6px 20px rgba(2,6,23,0.6)}

/* Layout grid: LEFT 45% RIGHT 55% ; top row smaller so params not huge */
.layout {
  display:grid;
  grid-template-columns:45% 55%;
  grid-template-rows:62% 54%;   /* avant 28/72 → +4% pour params */
  gap:var(--gap);
  height:calc(100vh - 120px);
}
.params{grid-column:1/2;grid-row:1/2;display:flex;flex-direction:column;gap:10px;min-height:200px;max-height:460px;overflow:auto}
.power-table{grid-column:1/2;grid-row:2/3;overflow:auto}
.results{grid-column:2/3;grid-row:1/3;overflow:auto}

.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
label{min-width:120px;color:var(--text);font-size:0.95rem}

input[type=number], select, input[type=text]{padding:6px;border-radius:8px;border:1px solid var(--panel-border);font-size:0.88rem;background:var(--mono-bg);color:var(--text);min-height:20px}
input[type=number]::placeholder, input[type=text]::placeholder{color:var(--muted)}
input[type=range]{width:140px}

/* table styles */
table{border-collapse:collapse;width:100%}
#power_table{table-layout:fixed;border-collapse:collapse;width:100%;background:transparent}
#power_table th,#power_table td{border:1px solid var(--panel-border);padding:8px;text-align:center;font-size:0.92rem;white-space:nowrap}
#power_table thead th{background:transparent;font-weight:600}
#power_table td input{width:64px;padding:6px;border-radius:8px;border:1px solid var(--panel-border);text-align:center;font-size:0.92rem;background:transparent;color:var(--text)}

/* highlight empty cells to show missing data */
.missing-cell{background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0));border-radius:8px}

/* buttons */
.btn{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#06121a;border:none;padding:8px 12px;border-radius:10px;cursor:pointer;font-size:0.92rem;box-shadow:0 6px 16px rgba(74,163,224,0.12)}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--accent);border:1px solid rgba(74,163,224,0.12);cursor:pointer;padding:7px 10px;border-radius:10px;font-size:0.9rem}

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

#spurious_list table{width:100%;border-collapse:collapse;font-size:0.93rem}
#spurious_list th,#spurious_list td{border:1px solid var(--panel-border);padding:8px;text-align:center}
#spurious_list tr:nth-child(even){background:rgba(255,255,255,0.02)}

.compact{font-size:0.92rem}
footer{margin-top:12px;font-size:0.9rem;color:var(--muted)}

/* mini schematic */
.svg-rf{fill:rgba(255,120,120,0.08);stroke:rgba(255,255,255,0.02)}
.svg-fi{fill:rgba(120,255,180,0.06);stroke:rgba(255,255,255,0.02)}
.svg-ol{fill:rgba(255,230,180,0.06);stroke:rgba(255,255,255,0.02)}

/* focus states for accessibility */
:focus{outline:none}
input:focus, select:focus, button:focus, a:focus{box-shadow:0 0 0 4px rgba(74,163,224,0.12);border-color:var(--accent)}

/* responsive */
@media (max-width:980px){
  .layout{grid-template-columns:1fr;grid-template-rows:auto auto auto;height:auto}
  .results{grid-column:1/2;grid-row:3/4}
  #power_table td input{width:46px}
}

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

/* small helper */
.muted{color:var(--muted)}
.mono{font-family:var(--code-font)}

/* ligne bouton + titre */
.title-row {
  display: flex;
  align-items: center;
  gap: 10px; /* espace entre bouton et titre */
}

/* Home button (left, distinct color) */
.home-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background: linear-gradient(180deg, #6fc0ff, #4aa3e0);
  color: #022831;
  border-radius:10px;
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 6px 14px rgba(30,120,160,0.12);
  height: var(--btn-h);
  line-height:1;
  border:0;
}
.home-btn:hover{ transform:translateY(-3px); box-shadow:0 10px 20px rgba(30,120,160,0.14) }