/* ==================================
   CALCULATOR CONTAINER
================================== */

.calculator {

  position: relative;

  isolation: isolate;

  flex: 1;

  min-width: 0;
  min-height: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-radius: 32px;

  background: rgba(255,255,255,.05);

  backdrop-filter: blur(24px);

  border: 1px solid var(--border);

  box-shadow: var(--shadow);
}

/* ==================================
   GLOW EFFECTS
================================== */

.calculator::before {

  content: "";

  position: absolute;

  top: -180px;
  right: -180px;

  width: 360px;
  height: 360px;

  border-radius: 50%;

  background:
    rgba(124,92,255,.12);

  filter: blur(120px);

  pointer-events: none;
}

.calculator::after {

  content: "";

  position: absolute;

  bottom: -120px;
  left: -120px;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  background:
    rgba(79,209,197,.08);

  filter: blur(100px);

  pointer-events: none;
}

/* ==================================
   HEADER
================================== */

.calculator-header {

  position: relative;

  z-index: 2;

  display: flex;

  justify-content: space-between;
  align-items: center;

  flex-shrink: 0;

  padding: 24px;
}

/* ==================================
   BRAND
================================== */

.brand {

  display: flex;

  align-items: center;

  gap: 12px;
}

.brand-icon {

  color: var(--primary);

  font-size: 1.4rem;
}

.brand-text {

  display: flex;

  flex-direction: column;
}

.brand h1 {

  font-size: 1.9rem;

  font-weight: 700;

  line-height: 1.1;
}

.brand p {

  margin-top: 4px;

  color: var(--text-secondary);

  font-size: .95rem;
}

/* ==================================
   HEADER ACTIONS
================================== */

.header-actions {

  display: flex;

  align-items: center;

  gap: 12px;
}

/* ==================================
   ACTION BUTTONS
================================== */

.menu-btn,
.history-btn,
.theme-btn {

  width: 52px;
  height: 52px;

  flex-shrink: 0;

  display: flex;

  justify-content: center;
  align-items: center;

  border-radius: 50%;

  cursor: pointer;

  background: var(--glass);

  border: 1px solid var(--border);

  color: var(--text-primary);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease;
}

.menu-btn:hover,
.history-btn:hover,
.theme-btn:hover {

  transform: translateY(-2px);

  background: var(--glass-hover);
}

.menu-btn:active,
.history-btn:active,
.theme-btn:active {

  transform: scale(.96);
}

/* ==================================
   LIGHT MODE
================================== */

body[data-theme="light"] .calculator {

  background:
    rgba(255,255,255,.72);

  border-color:
    rgba(15,23,42,.08);
}

body[data-theme="light"] .menu-btn,
body[data-theme="light"] .history-btn,
body[data-theme="light"] .theme-btn {

  background:
    rgba(255,255,255,.85);

  border-color:
    rgba(15,23,42,.08);

  color:
    #0f172a;
}

body[data-theme="light"] .menu-btn:hover,
body[data-theme="light"] .history-btn:hover,
body[data-theme="light"] .theme-btn:hover {

  background:
    rgba(255,255,255,.95);
}

/* ==================================
   DISPLAY SECTION
================================== */

.display-section {

  flex: 1;

  min-height: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 24px;

  position: relative;

  z-index: 2;
}

/* ==================================
   LAST CALCULATION
================================== */

.last-calculation {

  margin-bottom: auto;

  color: var(--accent);

  font-size: .95rem;

  line-height: 1.5;

  word-break: break-word;
}

/* ==================================
   EXPRESSION
================================== */

.expression {

  text-align: right;

  color: var(--text-secondary);

  font-size: 1.25rem;

  margin-bottom: 12px;

  word-break: break-word;

  line-height: 1.5;
}

/* ==================================
   RESULT
================================== */

.result {

  text-align: right;

  font-size: clamp(3.5rem, 8vw, 6rem);

  font-weight: 700;

  line-height: 1;

  color: var(--text-primary);

  word-break: break-word;

  overflow-wrap: break-word;
}

/* ==================================
   HISTORY PANEL
================================== */

.history-panel {

  position: absolute;

  top: 120px;
  left: 24px;
  right: 24px;

  max-height: 350px;

  overflow-y: auto;

  background:
    rgba(15,23,42,.96);

  border: 1px solid var(--border);

  border-radius: 24px;

  backdrop-filter: blur(20px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: translateY(-12px);

  transition:
    opacity .3s ease,
    transform .3s ease,
    visibility .3s ease;

  z-index: 100;
}

.history-panel.open {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateY(0);
}

/* ==================================
   HISTORY HEADER
================================== */

.history-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  padding: 20px;

  border-bottom: 1px solid var(--border);
}

.history-header h2 {

  font-size: 1.2rem;

  font-weight: 700;
}

/* ==================================
   CLEAR HISTORY BUTTON
================================== */

.clear-history-btn {

  padding: 8px 12px;

  border-radius: 14px;

  cursor: pointer;

  font-size: .95rem;

  font-weight: 600;

  color: #fff;

  background:
    rgba(239,68,68,.18);

  border:
    1px solid rgba(239,68,68,.25);

  transition: .25s ease;
}

.clear-history-btn:hover {

  transform: translateY(-2px);

  background:
    rgba(239,68,68,.28);
}

/* ==================================
   HISTORY LIST
================================== */

.history-list {

  display: flex;

  flex-direction: column;
}

/* ==================================
   HISTORY ITEM
================================== */

.history-item {

  padding: 16px 20px;

  cursor: pointer;

  border-bottom:
    1px solid rgba(255,255,255,.05);

  transition: .25s ease;
}

.history-item:hover {

  background:
    rgba(255,255,255,.05);

  transform: translateX(4px);
}

/* ==================================
   HISTORY EXPRESSION
================================== */

.history-expression {

  color: var(--text-secondary);

  font-size: .9rem;

  margin-bottom: 4px;

  word-break: break-word;
}

/* ==================================
   HISTORY RESULT
================================== */

.history-result {

  color: var(--text-primary);

  font-size: 1rem;

  font-weight: 600;

  word-break: break-word;
}

/* ==================================
   EMPTY HISTORY
================================== */

.history-empty {

  padding: 24px;

  text-align: center;

  color: var(--text-secondary);
}

/* ==================================
   LIGHT MODE HISTORY
================================== */

body[data-theme="light"] .history-panel {

  background:
    rgba(255,255,255,.96);

  border-color:
    rgba(15,23,42,.08);

  box-shadow:
    0 20px 40px rgba(15,23,42,.08);
}

body[data-theme="light"] .history-header {

  border-bottom:
    1px solid rgba(15,23,42,.08);
}

body[data-theme="light"] .history-item {

  border-bottom:
    1px solid rgba(15,23,42,.05);
}

body[data-theme="light"] .history-item:hover {

  background:
    rgba(15,23,42,.04);
}

body[data-theme="light"] .clear-history-btn {

  color: #dc2626;

  background:
    rgba(220,38,38,.08);

  border-color:
    rgba(220,38,38,.15);
}

body[data-theme="light"] .clear-history-btn:hover {

  background:
    rgba(220,38,38,.15);
}

/* ==================================
   KEYPAD
================================== */

.keypad {

  flex-shrink: 0;

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 12px;

  padding: 16px;

  position: relative;

  z-index: 2;
}

/* ==================================
   BUTTON BASE
================================== */

.keypad button {

  position: relative;

  overflow: hidden;

  height: clamp(54px, 8vh, 74px);

  border-radius: 22px;

  cursor: pointer;

  font-size: 1.15rem;

  font-weight: 600;

  color: var(--text-primary);

  background: var(--glass);

  border: 1px solid var(--border);

  transition:
    transform .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

/* ==================================
   BUTTON HOVER
================================== */

.keypad button:hover {

  transform: translateY(-2px);

  background: var(--glass-hover);

  box-shadow:
    0 8px 20px rgba(0,0,0,.15);
}

/* ==================================
   BUTTON ACTIVE
================================== */

.keypad button:active {

  transform: scale(.96);
}

/* ==================================
   RIPPLE EFFECT
================================== */

.keypad button::after {

  content: "";

  position: absolute;

  inset: 0;

  opacity: 0;

  border-radius: inherit;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.25),
      transparent 60%
    );

  transition:
    opacity .25s ease;
}

.keypad button:hover::after {

  opacity: 1;
}

/* ==================================
   NUMBER BUTTONS
================================== */

.number {

  color: var(--text-primary);

  background: var(--glass);
}

/* ==================================
   ACTION BUTTONS
================================== */

.action {

  color: var(--accent) !important;

  background:
    rgba(79,209,197,.12) !important;

  border-color:
    rgba(79,209,197,.22) !important;
}

.action:hover {

  background:
    rgba(79,209,197,.20) !important;
}

/* ==================================
   OPERATOR BUTTONS
================================== */

.operator {

  color: #b9a8ff !important;

  background:
    rgba(124,92,255,.18) !important;

  border-color:
    rgba(124,92,255,.25) !important;
}

.operator:hover {

  background:
    rgba(124,92,255,.28) !important;
}

/* ==================================
   EQUAL BUTTON
================================== */

.equal {

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #7c5cff,
      #a186ff
    ) !important;

  border: none;

  box-shadow:
    0 8px 25px
    rgba(124,92,255,.35);

  animation:
    glowPulse 3s infinite;
}

.equal:hover {

  transform: translateY(-3px);

  box-shadow:
    0 12px 30px
    rgba(124,92,255,.45);
}

/* ==================================
   ZERO BUTTON
================================== */

.zero {

  grid-column: span 2;
}

/* ==================================
   SCIENTIFIC TRIGGER
================================== */

.scientific-trigger {

  color: #c4b5fd !important;

  background:
    rgba(124,92,255,.15) !important;

  border-color:
    rgba(124,92,255,.25) !important;
}

/* ==================================
   LIGHT MODE
================================== */

body[data-theme="light"] .keypad button {

  background:
    rgba(255,255,255,.85);

  color:
    #1b2238;

  border-color:
    rgba(15,23,42,.08);
}

body[data-theme="light"] .keypad button:hover {

  background:
    rgba(255,255,255,.95);
}

body[data-theme="light"] .action {

  background:
    rgba(20,184,166,.08) !important;

  border-color:
    rgba(20,184,166,.15) !important;
}

body[data-theme="light"] .operator {

  background:
    rgba(124,92,255,.08) !important;

  border-color:
    rgba(124,92,255,.12) !important;
}

body[data-theme="light"] .equal {

  color: white !important;
}

/* ==================================
   SIDE DRAWER
================================== */

.side-drawer {

  display: flex;

  flex-direction: column;

  overflow: hidden;

  background:
    rgba(255,255,255,.05);

  backdrop-filter: blur(24px);

  border: 1px solid var(--border);

  border-radius: 32px;

  box-shadow: var(--shadow);
}

/* ==================================
   DRAWER HEADER
================================== */

.drawer-header {

  flex-shrink: 0;

  padding: 24px;

  border-bottom:
    1px solid var(--border);
}

.drawer-header-top {

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 12px;
}

.drawer-header h2 {

  font-size: 2rem;

  font-weight: 700;
}

.drawer-header p {

  margin-top: 4px;

  color: var(--text-secondary);
}

/* ==================================
   DRAWER CLOSE BUTTON
================================== */

.drawer-close-btn {

  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: flex;

  justify-content: center;
  align-items: center;

  border-radius: 50%;

  cursor: pointer;

  background: var(--glass);

  border: 1px solid var(--border);

  color: var(--text-primary);

  transition: .25s ease;
}

.drawer-close-btn:hover {

  transform: rotate(90deg);

  background: var(--glass-hover);
}

/* ==================================
   DRAWER MENU
================================== */

.drawer-menu {

  flex: 1;

  overflow-y: auto;

  padding: 16px;
}

.drawer-item {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 18px;

  margin-bottom: 10px;

  border-radius: 18px;

  cursor: pointer;

  color: var(--text-primary);

  transition: .25s ease;
}

.drawer-item:hover {

  background:
    rgba(255,255,255,.05);
}

.drawer-item.active {

  background:
    rgba(124,92,255,.16);

  border:
    1px solid rgba(124,92,255,.24);
}

.drawer-item i {

  width: 20px;

  height: 20px;
}

/* ==================================
   DRAWER FOOTER
================================== */

.drawer-footer {

  padding: 16px;

  border-top:
    1px solid var(--border);

  color: var(--text-secondary);

  font-size: .9rem;

  text-align: center;
}

/* ==================================
   OVERLAY
================================== */

.drawer-overlay {

  position: fixed;

  inset: 0;

  z-index: 999;

  opacity: 0;

  visibility: hidden;

  background:
    rgba(0,0,0,.45);

  backdrop-filter: blur(6px);

  transition: .3s ease;
}

.drawer-overlay.active {

  opacity: 1;

  visibility: visible;
}

/* ==================================
   SCIENTIFIC PANEL
================================== */

.scientific-panel {

  position: absolute;

  top: 120px;
  left: 24px;
  right: 24px;

  z-index: 120;

  background:
    rgba(15,23,42,.96);

  border:
    1px solid var(--border);

  backdrop-filter: blur(24px);

  border-radius: 28px;

  padding: 20px;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: translateY(-16px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility .25s ease;
}

.scientific-panel.open {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateY(0);
}

/* ==================================
   SCIENTIFIC HEADER
================================== */

.scientific-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 18px;
}

.scientific-header h3 {

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--text-primary);
}

.scientific-close-btn {

  width: 42px;
  height: 42px;

  display: flex;

  justify-content: center;
  align-items: center;

  border-radius: 50%;

  cursor: pointer;

  background: var(--glass);

  border: 1px solid var(--border);

  color: var(--text-primary);

  transition: .25s ease;
}

.scientific-close-btn:hover {

  transform: rotate(90deg);

  background: var(--glass-hover);
}

/* ==================================
   SCIENTIFIC GRID
================================== */

.scientific-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 12px;
}

.scientific-grid button {

  height: 56px;

  border-radius: 18px;

  cursor: pointer;

  font-size: 1rem;

  font-weight: 600;

  color: white;

  background:
    rgba(124,92,255,.15);

  border:
    1px solid rgba(124,92,255,.22);

  transition: .25s ease;
}

.scientific-grid button:hover {

  transform: translateY(-2px);

  background:
    rgba(124,92,255,.25);
}

.scientific-grid button:active {

  transform: scale(.96);
}

/* ==================================
   LIGHT MODE
================================== */

body[data-theme="light"] .side-drawer {

  background:
    rgba(255,255,255,.72);

  border-color:
    rgba(15,23,42,.08);
}

body[data-theme="light"] .drawer-item:hover {

  background:
    rgba(15,23,42,.04);
}

body[data-theme="light"] .scientific-panel {

  background:
    rgba(255,255,255,.96);

  border-color:
    rgba(15,23,42,.08);

  box-shadow:
    0 20px 40px
    rgba(15,23,42,.08);
}

body[data-theme="light"] .scientific-grid button {

  color: #1b2238;

  background:
    rgba(124,92,255,.08);

  border-color:
    rgba(124,92,255,.12);
}

body[data-theme="light"] .scientific-grid button:hover {

  background:
    rgba(124,92,255,.15);
}