/* --- Harmonios Theme --- */
:root{
  --silver:#C0C0C0;
  --bg:#0d2233;
  --input-bg:#0c1821;
  --input-text:#eef1f5;
  --line:#1f2d3a;
  --dark-blue: #153447; /* Updated dark blue for buttons */
}

html, body {
  height:100%;
  margin:0;
  background:#0d2233 url("https://harmonioscalc.com/background.png") no-repeat center center fixed;
  background-size:cover;
  color:var(--silver);
  font:16px/1.5 Georgia,"Times New Roman",serif;
}

header {
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  background:linear-gradient(#0e2030,#091521);
  font-weight:700;font-size:20px;letter-spacing:.25px;
  border-bottom:1px solid var(--line);
  background-image: url("https://harmonioscalc.com/background.png");
  background-size: cover;
}
.rail {
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  padding:12px 16px;background:#0e1a25;border-bottom:1px solid #183043;
  position:sticky;top:0;z-index:2;
  background-image: url("https://harmonioscalc.com/background.png");
  background-size: cover;
}
.group { display:flex;gap:8px;align-items:center;flex-wrap:wrap }
.label { font-size:13px;opacity:.9;margin-left:6px }

#expr {
  width:min(100vw - 1080px, 1100px);
  min-width:380px;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid #204155;
  background-color: var(--input-bg);
  background-image: url("https://harmonioscalc.com/display_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color:var(--input-text);
  font-weight:700;
  font-size:18px;
  outline:none;
  text-shadow:0 1px 1px rgba(0,0,0,.6);
}

/* Buttons skinned with images */
.button-skin {
  background-image: url("https://harmonioscalc.com/button_normal.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  color: #eef1f5;
  font-weight: 800;
  min-width: 132px;
  min-height: 44px;
  padding: 12px 18px;
  box-shadow: none;
}
.button-skin:hover {
  background-image: url("https://harmonioscalc.com/button_hover.png");
}
.button-skin:active {
  background-image: url("https://harmonioscalc.com/button_pressed.png");
}
.keyboard-toggle.button-skin {
  min-width: 120px;
  min-height: 40px;
  padding: 8px 14px;
}

/* Layout sections */
.controls {
  display:flex;flex-wrap:wrap;gap:6px;
  padding:8px 12px;
  border-top:1px solid #183043;
  background:#0e1a25;
}
#plot { width:100%; height:70vh; background:#000 }
#algebra {
  display:none;padding:14px;
  background:#0c1520;border-top:1px solid var(--line);
  white-space:pre-wrap;
  font-family:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace
}
.keyboard-container {
  display:none;
  position:sticky;bottom:0;
  width:100%;
  background-image: url("https://harmonioscalc.com/background.png");
  padding:10px;
  border-top:1px solid var(--line);
  text-align:center;
  z-index:3;
  box-shadow:0 -8px 24px rgba(0,0,0,.35)
}
.keyboard-button {
  padding:10px 20px;
  margin:5px;
  background:#153447;
  border-radius:5px;
  color:#eef1f5;
  border:none;
  cursor:pointer
}
.keyboard-button:hover{background:#2b7fa3}
.note { padding:6px 12px }

/* Close button for keyboard */
.keyboard-toggle-close {
  padding: 10px 20px;
  background-color: #153447;
  border-radius: 5px;
  color: #eef1f5;
  border: none;
  cursor: pointer;
  font-weight: 700;
  margin-top: 10px;
}
.keyboard-toggle-close:hover {
  background-color: #2b7fa3;
}