/* ==================================================
   DARK MODE – TOKENS
================================================== */
body.dark{
  --bg:#0f172a;
  --surface:#020617;
  --surface-soft:#0f172a;
  --border:#1e293b;
  --border-strong:#334155;
  --text:#e5e7eb;
  --text-strong:#f9fafb;
  --muted:#94a3b8;
  --accent:#6366f1;
}

/* ==================================================
   BASE
================================================== */
body.dark{
  background:var(--bg);
  color:var(--text);
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark strong{
  color:var(--text-strong);
}

body.dark .subtitle,
body.dark .small,
body.dark .field-info,
body.dark .tooltip,
body.dark .level,
body.dark .timeline-legend,
body.dark #vizNote,
body.dark .similarity{
  color:var(--muted);
}

/* ==================================================
   CONTAINERS / PANELS
================================================== */
body.dark .container,
body.dark .panel,
body.dark .tool-container,
body.dark .results,
body.dark .result-box,
body.dark .export-area,
body.dark .preview-box,
body.dark .preview-container,
body.dark .tools-box,
body.dark .buttons-box,
body.dark .palette,
body.dark .graph-wrap{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
}

/* Cards */
body.dark .card{
  background:var(--surface-soft);
  border:1px solid var(--border);
}

/* ==================================================
   INPUTS / SELECTS / TEXTAREA
================================================== */
body.dark input,
body.dark select,
body.dark textarea{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border-strong);
}

body.dark input::placeholder,
body.dark textarea::placeholder{
  color:#64748b;
}

body.dark input[type="range"]{
  accent-color:var(--accent);
}

/* Tool specific */
body.dark .tool-container input,
body.dark .tool-container select{
  background:var(--surface-soft);
}

/* ==================================================
   LABELS
================================================== */
body.dark label,
body.dark .tools-box label{
  color:#cbd5f5;
}

/* ==================================================
   BUTTONS
================================================== */
body.dark button,
body.dark .btn{
  background:linear-gradient(135deg,var(--accent),#22c55e);
  color:#fff;
}

body.dark button:hover,
body.dark .btn:hover{
  filter:brightness(1.1);
}

body.dark button.secondary,
body.dark .btn.secondary{
  background:var(--surface);
  border:1px solid var(--border-strong);
  color:var(--text);
}

/* Buttons box */
body.dark .buttons-box button{
  background:var(--surface);
  border:1px solid var(--border-strong);
  color:var(--text);
}
body.dark .buttons-box button:hover{
  background:var(--border);
}

/* ==================================================
   OUTPUTS / LISTS
================================================== */
body.dark .output-box,
body.dark .list-inline div{
  background:var(--surface);
  border:1px solid var(--border-strong);
  color:var(--text);
}

/* ==================================================
   PREVIEW / CANVAS / CODE
================================================== */
body.dark canvas,
body.dark pre,
body.dark #cssCode,
body.dark .preview,
body.dark .preview-stage,
body.dark .timeline{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
}

body.dark .preview{
  background:var(--surface-soft);
  border-style:dashed;
}

/* ==================================================
   IMAGE AREA
================================================== */
body.dark .image-area{
  background:var(--surface-soft);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

body.dark .image-area::after{
  color:var(--muted);
}

/* ==================================================
   TABLE
================================================== */
body.dark table{
  background:var(--surface);
  border-color:var(--border);
}

body.dark th,
body.dark td{
  border:1px solid var(--border);
  color:var(--text);
}

body.dark th{
  background:#020617;
}

body.dark tr:nth-child(even){
  background:#020617;
}

/* ==================================================
   CONTROLS PANEL
================================================== */
body.dark .controls{
  background:#1e1e2f;
  border:1px solid #333;
  color:#ddd;
  padding:10px;
  box-shadow:0 4px 12px rgba(0,0,0,.6);
}

body.dark .controls input,
body.dark .controls select,
body.dark .controls textarea{
  background:#2a2a3f;
  border:1px solid #444;
  color:#fff;
}

body.dark .controls .btn{
  background:#4a6eff;
}
body.dark .controls .btn.small{
  background:#2f3b5c;
}

/* ==================================================
   SCROLLBAR
================================================== */
body.dark textarea::-webkit-scrollbar-track{
  background:var(--surface);
}
body.dark textarea::-webkit-scrollbar-thumb{
  background:#475569;
}
body.dark textarea::-webkit-scrollbar-thumb:hover{
  background:#64748b;
}




/* =======================
   מבנה כללי
======================= */


body {
  margin: 0;
  display: flex;
  justify-content: center; /* מרכז אופקית */
  align-items: center;     /* מרכז אנכית */
  background: transparent;     /* או dark */
}


/* =======================
   קונטיינר המחשבון
======================= */
.calculator-container {
  width: 100%;
  
}

/* =======================
   כותרת
======================= */
h1 {
    color: #333;
    font-size: 2.25rem;
    margin: 12px auto;
    display: flex;
    align-items: center;  /* ממרכז את התוכן אנכית */
    justify-content: center; /* ממרכז את התוכן אופקית */
    gap: 0.5rem;
    text-align: center; /* למקרה שהטקסט עובר שורה */
}

/* =======================
   תוויות ושדות קלט
======================= */
label {
  display: block;
  margin-top: 12px;
  font-weight: bold;
  color: #555;
}

input,
select {
  width: 100%;
  padding: 10px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: #333;
  font-size: 1rem;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input::placeholder {
  color: #aaa;
}

input:focus,
select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

select {
  cursor: pointer;
}

/* =======================
   כפתור פעולה
======================= */
button {
  display: block;
  margin: 20px auto;
  padding: 10px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: #2563eb;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  transition: 0.25s ease;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
}

button:hover {
  background: #1d4ed8;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.3);
}

/* =======================
   תוצאה
======================= */
#result {
  margin-top: 18px;
  font-size: 1.3rem;
  text-align: center;
  font-weight: bold;
  color: #2563eb;
}