body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #1a1a1a; /* Dark background */
  color: #e0e0e0; /* Light text color */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 10px; /* Reduced padding */
  box-sizing: border-box;
  overflow: hidden; /* Prevent body scroll */
}

.main-layout-container {
  display: grid;
  grid-template-columns: 180px 1fr; /* Left sidebar and main content */
  grid-template-rows: 1fr auto; /* Main row and bottom display row */
  gap: 15px; /* Gap between sections */
  width: 100%;
  max-width: 1000px; /* Max width for the whole application */
  height: calc(100vh - 20px); /* Adjust height to fit viewport */
  max-height: 900px;
  background-color: #2a2a2a; /* Slightly lighter dark background for container */
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  overflow: hidden; /* Hide overflow content within the container */
}

/* --- Left Sidebar (Functions) --- */
.function-sidebar {
  grid-column: 1;
  grid-row: 1 / span 2; /* Spans both main and bottom rows */
  background-color: #212121;
  border-right: 1px solid #3a3a3a;
  padding: 15px;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* Scroll for many functions */
}

.sidebar-title {
  font-size: 1.2em;
  font-weight: bold;
  color: #00bcd4; /* Accent color */
  margin-bottom: 15px;
  text-align: center;
}

.sidebar-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Two columns for function buttons */
  gap: 8px;
}

.sidebar-buttons .func {
  background-color: #424242;
  color: #e0e0e0;
  border: 1px solid #555;
  border-radius: 5px;
  padding: 8px;
  font-size: 0.95em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sidebar-buttons .func:hover {
  background-color: #555;
  color: #fff;
}

/* --- Center Content (Graph and Keypad) --- */
.center-content {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  padding: 15px;
  gap: 15px;
  overflow-y: auto; /* Allow scrolling if content overflows */
}

.graph-section {
  background-color: #313131;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1; /* Take available vertical space */
}

.graph-section h2 {
  color: #e0e0e0;
  margin-bottom: 15px;
  font-size: 1.6em;
}

.graph-section .input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

.graph-section .input-group label {
  color: #bbb;
  font-size: 0.9em;
  white-space: nowrap;
}

.graph-section .input-group input[type="text"],
.graph-section .input-group input[type="number"] {
  flex-grow: 1;
  padding: 7px;
  border: 1px solid #555;
  border-radius: 4px;
  font-size: 0.9em;
  background-color: #424242;
  color: #e0e0e0;
  min-width: 60px;
}
.graph-section .input-group input:focus {
    border-color: #00bcd4;
    outline: none;
}

.graph-section .input-group button {
  padding: 7px 12px;
  background-color: #00bcd4; /* Accent color for plot button */
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.9em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  white-space: nowrap;
}

.graph-section .input-group button:hover {
  background-color: #00a0b2;
}

canvas {
  border: 1px solid #555;
  background-color: #212121;
  margin-top: 10px;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
}

.notice {
    text-align: center;
    margin-top: 15px;
    font-size: 0.8em;
    color: #888;
}

.calculator-keypad {
    background-color: #212121;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center; /* Center the keypad grid */
    margin-top: 15px;
}
.calculator-keypad .buttons {
    display: grid;
    grid-template-columns: repeat(4, 60px); /* Fixed width for keypad buttons */
    grid-template-rows: repeat(5, 50px); /* Fixed height for keypad rows */
    gap: 8px;
}

.calculator-keypad .buttons button {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 5px;
  font-size: 1.2em;
  cursor: pointer;
  background-color: #424242;
  color: #e0e0e0;
  transition: background-color 0.2s ease;
}

.calculator-keypad .buttons button:hover {
  background-color: #555;
}
.calculator-keypad .buttons button:active {
  background-color: #333;
}

.calculator-keypad .buttons button.operator {
  background-color: #ff9800; /* Orange for operators */
  color: #fff;
}
.calculator-keypad .buttons button.operator:hover {
  background-color: #fb8c00;
}

.calculator-keypad .buttons button.clear {
  background-color: #e53935; /* Red for clear */
}
.calculator-keypad .buttons button.clear:hover {
  background-color: #d32f2f;
}

.calculator-keypad .buttons button.equals {
  background-color: #43a047; /* Green for equals */
  grid-column: span 2; /* Make equals span 2 columns */
}
.calculator-keypad .buttons button.equals:hover {
  background-color: #388e3c;
}
.calculator-keypad .buttons button.zero {
  grid-column: span 1;
}
.calculator-keypad .buttons button.decimal {
  grid-column: span 1;
}


/* --- Bottom Calculator Display --- */
.calculator-display-bottom {
  grid-column: 1 / span 2; /* Spans entire width of main-layout-container */
  grid-row: 2;
  background-color: #212121;
  border-top: 1px solid #3a3a3a;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.calculator-display-bottom #display {
  width: 100%;
  height: 50px;
  background-color: #424242;
  border: none;
  border-radius: 5px;
  text-align: right;
  font-size: 1.8em;
  color: #e0e0e0;
  padding: 0 10px;
  box-sizing: border-box;
  overflow-x: auto; /* Allow horizontal scroll for long numbers */
  white-space: nowrap;
}
.calculator-display-bottom #display:focus {
    outline: none;
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
  .main-layout-container {
    grid-template-columns: 1fr; /* Stack sidebar and content */
    grid-template-rows: auto 1fr auto; /* Sidebar, main content, bottom display */
    height: auto; /* Allow height to adjust */
    max-height: none;
  }
  .function-sidebar {
    grid-column: 1;
    grid-row: 1;
    border-right: none;
    border-bottom: 1px solid #3a3a3a;
  }
  .center-content {
    grid-column: 1;
    grid-row: 2;
    padding: 10px;
  }
  .calculator-display-bottom {
    grid-column: 1;
    grid-row: 3;
  }
  .sidebar-buttons {
    grid-template-columns: repeat(3, 1fr); /* More columns for functions on smaller screens */
  }
  .calculator-keypad .buttons {
    grid-template-columns: repeat(4, 1fr); /* Adjust keypad to be responsive */
    width: 100%;
  }
  .graph-section canvas {
      width: 100%; /* Make canvas responsive */
      height: auto;
  }
}

@media (max-width: 480px) {
  .sidebar-buttons {
    grid-template-columns: repeat(2, 1fr); /* Two columns for functions on very small screens */
  }
  .calculator-keypad .buttons {
    grid-template-columns: repeat(4, 1fr);
  }
  .buttons button {
      font-size: 1em;
  }
  .calculator-display-bottom #display {
      font-size: 1.5em;
  }
}