:root{
  --bg:#0f172a;         /* slate-900 */
  --panel:#111827;      /* gray-900 */
  --pv-bg: var(--panel); /* PV canvas background */
  --chart-bg: var(--panel); /* Calculator chart background */
  --muted:#94a3b8;      /* slate-400 */
  --text:#e5e7eb;       /* gray-200 */
  --accent:#22d3ee;     /* cyan-400 */
  --accent2:#a78bfa;    /* violet-400 */
  --ok:#34d399;         /* emerald-400 */
  --warn:#f59e0b;       /* amber-400 */
  --err:#f87171;        /* red-400 */
}
/* Light theme overrides */
:root.light{
  --bg:#f3f4f6;         /* gray-100 */
  --panel:#ffffff;      /* white */
  --pv-bg:#e5e7eb;      /* gray-200 for PV area */
  --chart-bg:#e5e7eb;   /* gray-200 for Calculator chart */
  --muted:#4b5563;      /* gray-600 */
  --text:#111827;       /* gray-900 */
  --accent:#06b6d4;     /* cyan-500 */
  --accent2:#8b5cf6;    /* violet-500 */
  --ok:#10b981;         /* emerald-500 */
  --warn:#d97706;       /* amber-600 */
  --err:#ef4444;        /* red-500 */
}
html,body{height:100%;}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Noto Sans', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  background: radial-gradient(1200px 800px at 20% -20%, #1e293b 0%, var(--bg) 60%);
  color:var(--text);
}
.wrap{
  max-width:1100px; margin:0 auto; padding:24px; display:grid; gap:16px;
  grid-template-columns: 1fr;
}
header{display:flex; align-items:center; justify-content:space-between}
header h1{margin:0 0 4px 0; font-weight:700; letter-spacing:.2px;}
/* Theme toggle */
.theme-toggle{display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:#0b1220; color:var(--text); cursor:pointer}
.theme-toggle .icon{font-size:1rem}
.theme-toggle .label{font-weight:600}
/* Light theme: make toggle background light for legibility */
:root.light .theme-toggle{background:#ffffff; border-color:rgba(0,0,0,.25); color:var(--text)}
/* Light adjustments */
:root.light body{background: radial-gradient(1200px 800px at 20% -20%, #e5e7eb 0%, var(--bg) 60%)}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));}
.badge{background:#0b1220;}
:root.light .card{background:#ffffff; border-color: rgba(0,0,0,.08)}
:root.light .badge{background:#ffffff; border-color: rgba(0,0,0,.08)}
:root.light .controls input[type="text"],
:root.light .controls button,
:root.light .num-field input[type="number"],
:root.light .num-field .num-btn,
:root.light .tabs [role="tab"],
:root.light .canvas-wrap canvas{background:#ffffff; color:var(--text); border-color: rgba(0,0,0,.15)}
/* Light theme: keep light borders on interaction for main controls buttons */
:root.light .controls button:hover,
:root.light .controls button:active,
:root.light .controls button:focus{border-color: rgba(0,0,0,.25)}

/* Light theme: modal and its buttons */
:root.light .modal{background:#ffffff; border-color: rgba(0,0,0,.12)}
:root.light .modal header{border-bottom-color: rgba(0,0,0,.12)}
:root.light .modal .bar{border-top-color: rgba(0,0,0,.12)}
:root.light .modal header button,
:root.light .modal .bar button{background:#ffffff; color:var(--text); border:1px solid rgba(0,0,0,.15)}
:root.light .modal .bar button.primary{background:linear-gradient(90deg, var(--accent), var(--accent2)); border:none; color:#0b1220}
:root.light .modal .bar button.primary{
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
:root.light .modal .bar button.primary:hover{
  box-shadow: 0 4px 12px rgba(0,0,0,.16);
}
:root.light .modal .bar button.primary:active{
  transform: translateY(0.5px);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
:root.light .modal .bar button.primary:disabled{
  box-shadow: none;
}

/* Light mode: flatter, simple style for the specific primary action in modal */
:root.light #usePoint{
  background:#e5e7eb; /* gray-200 */
  color: var(--text);
  border:1px solid rgba(0,0,0,.25);
  box-shadow:none;
  font-weight:700;
}
:root.light #usePoint:hover{background:#e2e8f0; border-color: rgba(0,0,0,.3)}
:root.light #usePoint:active{background:#d1d5db; border-color: rgba(0,0,0,.35)}
:root.light #usePoint:focus{outline:2px solid var(--accent); outline-offset:2px}
:root.light #usePoint:disabled{opacity:.6; cursor:not-allowed}
:root.light .modal header button:hover,
:root.light .modal .bar button:hover{border-color: rgba(0,0,0,.25)}

/* Light theme: make Pick on map buttons use accent border on interaction (avoid dark-looking borders) */
:root.light #pickMap,
:root.light #notesPickMap{background:#ffffff; color:var(--text); border-color: rgba(0,0,0,.15)}
:root.light #pickMap:hover,
:root.light #pickMap:active,
:root.light #pickMap:focus,
:root.light #notesPickMap:hover,
:root.light #notesPickMap:active,
:root.light #notesPickMap:focus{border-color: var(--accent)}
:root.light #pickMap:focus-visible,
:root.light #notesPickMap:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
:root.light .tooltip{background:#ffffff; color:var(--text); border-color: rgba(0,0,0,.15)}
:root.light .marker{background:rgba(0,0,0,.25)}
:root.light .legend{color:var(--muted)}
header p{margin:0; color:var(--muted)}
.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; box-shadow: 0 8px 24px rgba(0,0,0,.3);}
.controls{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:14px;}
.controls input[type="text"]{flex:1 1 320px; min-width:240px; padding:12px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:#0b1220; color:var(--text); outline:none}
.controls button{padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.15); background:#0b1220; color:var(--text); cursor:pointer}
.controls button.primary{background:linear-gradient(90deg, var(--accent), var(--accent2)); border:none; color:#0b1220; font-weight:700}
/* Light mode: make primary Search button edges visible */
:root.light .controls button.primary{border:1px solid rgba(0,0,0,.25)}
:root.light .controls button.primary:hover{border-color: rgba(0,0,0,.35)}
.controls button:disabled{opacity:.6; cursor:not-allowed}

.row{display:grid; grid-template-columns: 1.4fr .8fr; gap:16px; padding:8px 14px 16px;}
@media (max-width: 900px){ .row{grid-template-columns: 1fr;}}

.meta{display:grid; gap:8px}
.pill{display:inline-flex; gap:8px; align-items:center; padding:8px 10px; border-radius:12px; background:#0b1220; border:1px solid rgba(255,255,255,.08); color:var(--muted)}
.pill b{color:var(--text)}
/* Light theme: pill on light background */
:root.light .pill{background:#ffffff; border-color:rgba(0,0,0,.15); color:var(--muted)}

.notice{margin-top:4px; font-size:.9rem; color:var(--muted)}
.error{color:var(--err); font-weight:600}
.muted{color:var(--muted)}
.tiny{font-size:.85rem}

.canvas-wrap{position:relative; padding:14px;}
canvas{width:100%; height:380px; display:block; background: var(--panel); border-radius:14px; border:1px solid rgba(255,255,255,.08)}
:root.light canvas{border-color: rgba(0,0,0,.12)}
/* PV canvas uses its own background token */
#pvViz{background: var(--pv-bg)}
/* Calculator chart uses its own background token */
#chart{background: var(--chart-bg)}
.legend{display:flex; gap:12px; align-items:center; padding:0 14px 14px; color:var(--muted)}
.legend .sw{width:12px; height:12px; border-radius:3px; display:inline-block}

.tooltip{position:absolute; pointer-events:none; background:#101828; color:var(--text); border:1px solid rgba(255,255,255,.15); padding:8px 10px; border-radius:10px; font-size:.9rem; transform:translate(-50%,-100%); box-shadow:0 6px 20px rgba(0,0,0,.4); white-space:nowrap}
.tooltip .tiny{color:var(--muted); font-size:.82rem}
.marker{position:absolute; top:0; bottom:0; width:1px; background:rgba(255,255,255,.25); pointer-events:none}

.badges{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.badge{background:#0b1220; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:10px;}
.badge h4{margin:0 0 6px 0; font-size:.95rem; color:var(--muted)}
.badge p{margin:0; font-weight:600}
.badge .vlist{display:flex; flex-direction:column; gap:6px}
.badge .vlist label{display:flex; align-items:center; gap:8px}

/* Segmented radio buttons for Connection */
.seg-group{display:inline-flex; gap:8px; flex-wrap:wrap}
.seg-btn{position:relative; display:inline-flex; align-items:center;}
.seg-btn input{position:absolute; opacity:0; pointer-events:none}
.seg-btn span{
  display:inline-block; padding:10px 14px; border-radius:10px;
  border:1px solid rgba(255,255,255,.15); background:#0b1220; color:var(--text);
  cursor:pointer; user-select:none; font-weight:600;
}
.seg-btn input:focus + span{outline:2px solid var(--accent); outline-offset:2px}
.seg-btn input:checked + span{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-color:transparent; color:#0b1220;
}
/* Light theme: unselected segmented buttons with light background */
:root.light .seg-btn span{
  background:#ffffff;
  border-color: rgba(0,0,0,.15);
  color: var(--text);
}
/* Light theme: selected segmented button uses a flat light gray */
:root.light .seg-btn input:checked + span{
  background: #e5e7eb; /* gray-200 */
  border-color: rgba(0,0,0,.25);
  color: var(--text);
}
.foot{opacity:.7; font-size:.9rem; padding:0 14px 16px}
a{color:var(--accent)}

/* Modal mapa */
.modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:1000}
.modal{background:#0b1220; border:1px solid rgba(255,255,255,.15); border-radius:14px; width:min(920px, 96vw); height:min(620px, 90vh); display:flex; flex-direction:column; overflow:hidden}
.modal header{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.08)}
.modal header h3{margin:0; font-size:1rem}
.modal .map{flex:1 1 auto}
#map{width:100%; height:100%}
.modal .bar{display:flex; gap:8px; align-items:center; padding:10px 12px; border-top:1px solid rgba(255,255,255,.08)}
.modal .coords{color:var(--muted)}

/* Modal buttons: match global button design */
.modal header button,
.modal .bar button{
  padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.15);
  background:#0b1220; color:var(--text); cursor:pointer;
}
.modal .bar button.primary{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border:none; color:#0b1220; font-weight:700;
}
.modal button:disabled{opacity:.6; cursor:not-allowed}
.modal button:focus{outline:2px solid var(--accent); outline-offset:2px}

/* Tabs */
.tabs{display:flex; align-items:center; padding:0 0 6px 0}
.tabs [role="tablist"]{display:flex; gap:6px}
.tabs [role="tab"]{padding:10px 14px; border-radius:10px; background:#0b1220; border:1px solid rgba(255,255,255,.12); color:var(--muted); cursor:pointer}
.tabs [role="tab"][aria-selected="true"]{color:#0b1220; font-weight:700; background:linear-gradient(90deg, var(--accent), var(--accent2)); border-color:transparent}
.tabs [role="tab"]:focus{outline:2px solid var(--accent); outline-offset:2px}
/* Light theme: selected tab uses same light gray tone as segmented buttons */
:root.light .tabs [role="tab"][aria-selected="true"]{
  background:#e5e7eb; /* gray-200 */
  border-color: rgba(0,0,0,.55);
  color: var(--text);
}

/* Section header inside panels */
.section-head{padding:12px 14px 0 14px}
.section-head h2{margin:0 0 4px 0; font-size:1.1rem}
.section-head p{margin:0; color:var(--muted)}

/* Numeric input with custom spinners */
.num-field{display:grid; grid-template-columns: 1fr 32px 32px; gap:8px; align-items:center}
.num-field input[type="number"]{
  min-width:120px; padding:10px 12px; border-radius:10px;
  border:1px solid rgba(255,255,255,.15); background:#0b1220; color:var(--text);
}
.num-field .num-btn{padding:10px 0; border-radius:10px; border:1px solid rgba(255,255,255,.15); background:#0b1220; color:var(--text); cursor:pointer}
.num-field .num-btn.plus{background:linear-gradient(90deg, var(--accent), var(--accent2)); border:1px solid rgba(255,255,255,.15); color:#0b1220; font-weight:700}
.num-field .num-btn.minus{background:#0b1220}
.num-field input[type="number"]:focus{outline:2px solid var(--accent); outline-offset:2px}

/* Hide default spinners in WebKit */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none; margin: 0;
}
/* Hide default spinners in Firefox */
input[type=number]{ appearance: textfield; -moz-appearance: textfield; }