/* TI-84 Calculator Styles (extracted from reference) */
.calc-widget { background: transparent; }
.calculator-body {
  width: 100%; height: 100%; padding: 12px 14px 16px; position: relative;
  display: flex; flex-direction: column;
}
.header-strip {
  background: linear-gradient(90deg, #1a3a5c, #1f4570, #1a3a5c);
  border-radius: 8px 8px 0 0; padding: 4px 10px 3px; margin-bottom: 2px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 2px solid #0a1825;
}
.ti-logo { font-family: 'Orbitron', monospace; font-size: 15px; font-weight: 700; color: #fff; }
.model-name { font-family: 'Rajdhani', sans-serif; font-size: 11px; color: #a0c8e8; letter-spacing: 2px; }
.plus-badge { font-family: 'Orbitron', monospace; font-size: 8px; font-weight: 700; color: #fff; background: #d44000; border-radius: 3px; padding: 1px 5px; }
.screen-bezel {
  background: linear-gradient(135deg, #2a3f52 0%, #1d3048 50%, #243a4d 100%);
  border-radius: 6px; padding: 8px; margin: 4px 0 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  border: 1.5px solid #0e1e2d;
}
.screen { background: #8fa882; width: 100%; height: 100px; border-radius: 3px; position: relative; overflow: hidden; }
.ti-graph-canvas { width: 100%; height: 100%; display: block; background: #bdd4e6; }
.ti-entry-line { background: #bdd4e6; border: 2px inset #2c4c6e; margin-top: 4px; padding: 2px 4px; font-family: monospace; font-size: 12px; min-height: 22px; color: #000; }
.fn-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 6px; }
.fn-key { background: linear-gradient(180deg, #2e4d68 0%, #1e3a52 100%); border-radius: 4px; padding: 4px; text-align: center; cursor: pointer; box-shadow: 0 2px 0 #0a1a28; border: 1px solid #0d2035; }
.main-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 4px; }
.btn {
  border-radius: 5px; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 30px;
  background: linear-gradient(180deg, #383840 0%, #28282e 100%);
  box-shadow: 0 2px 0 #101014; border: 1px solid #1a1a22;
}
.btn:active { transform: translateY(2px); }
.btn-inner { width: 100%; display: flex; align-items: center; justify-content: center; padding: 2px; }
.btn-main { font-family: 'Rajdhani', sans-serif; font-size: 10px; font-weight: 700; color: #e8eef4; }
.btn-enter { background: linear-gradient(180deg, #c03a00 0%, #8a2800 100%); }
.btn-op { background: linear-gradient(180deg, #1e3a58 0%, #142a42 100%); }
.dpad { width: 64px; height: 64px; position: relative; }
.dpad-arrow { position: absolute; color: #7ab0d0; font-size: 12px; font-weight: bold; cursor: pointer; }
.dpad-up { top: 2px; left: 50%; transform: translateX(-50%); }
.dpad-down { bottom: 2px; left: 50%; transform: translateX(-50%); }
.dpad-left { left: 2px; top: 50%; transform: translateY(-50%); }
.dpad-right { right: 2px; top: 50%; transform: translateY(-50%); }
.nav-section { display: grid; grid-template-columns: repeat(4, 1fr) 70px; gap: 4px; margin-bottom: 6px; }
.dpad-cell { grid-column: 5; grid-row: 1 / 4; display: flex; align-items: center; justify-content: center; }
.port-row { display: flex; gap: 6px; margin-top: 8px; }
.port { flex: 1; height: 4px; background: #0d2035; border-radius: 2px; opacity: 0.5; }