/* Calculations Dashboard - Modern Design System */

/* Page Layout */
.calculations-container {
  padding: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
  animation: fadeIn 0.6s ease-out;
}

.calculations-header {
  margin-bottom: var(--space-8);
  padding: var(--space-8);
  background: var(--gradient-secondary);
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius-xl);
  backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.calculations-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--success)));
}

.calculations-header h1 {
  font-size: var(--font-size-4xl);
  font-weight: 800;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--success)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 var(--space-2);
  animation: slideUp 0.5s ease-out 0.1s both;
}

/* Grid Layout */
.calculations-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
}

/* Widget Base */
.calculator-widget {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--card-border));
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.calculator-widget:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: hsl(var(--primary) / 0.3);
}

.calculator-widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
}

/* Calculator Grid */
.calculator-grid {
  grid-column: span 8;
}

.calculator-display {
  background: hsl(var(--surface-secondary));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 2rem;
  text-align: right;
  position: relative;
  overflow: hidden;
}

.calculator-display::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, hsl(var(--primary) / 0.05), hsl(var(--accent) / 0.05));
  pointer-events: none;
}

.display-history {
  font-size: var(--font-size-sm);
  color: hsl(var(--foreground-secondary));
  margin-bottom: 0.5rem;
  min-height: 1.5rem;
}

.display-current {
  font-size: var(--font-size-4xl);
  font-weight: 700;
  color: hsl(var(--foreground));
  font-family: 'Courier New', monospace;
  position: relative;
  z-index: 1;
}

.calculator-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.calc-btn {
  height: 60px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background: hsl(var(--surface-secondary));
  color: hsl(var(--foreground));
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.calc-btn:hover {
  background: hsl(var(--surface-tertiary));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.calc-btn:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

.calc-btn.operator {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

.calc-btn.operator:hover {
  background: linear-gradient(135deg, hsl(var(--primary-hover)), hsl(var(--accent)));
}

.calc-btn.equals {
  background: linear-gradient(135deg, hsl(var(--success)), hsl(var(--primary)));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--success));
}

.calc-btn.equals:hover {
  background: linear-gradient(135deg, hsl(var(--success)), hsl(var(--accent)));
}

.calc-btn.clear {
  background: linear-gradient(135deg, hsl(var(--destructive)), hsl(var(--warning)));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--destructive));
}

.calc-btn.clear:hover {
  background: linear-gradient(135deg, hsl(var(--warning)), hsl(var(--destructive)));
}

/* Calculator Functions */
.calculator-functions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.function-btn {
  padding: 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  background: hsl(var(--surface-secondary));
  color: hsl(var(--foreground-secondary));
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.function-btn:hover {
  background: hsl(var(--surface-tertiary));
  color: hsl(var(--foreground));
  transform: translateY(-2px);
}

/* Journal Widget */
.journal-widget {
  grid-column: span 4;
}

.journal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.journal-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 0;
}

.clear-history-btn {
  padding: 0.5rem 1rem;
  border: 1px solid hsl(var(--destructive));
  background: transparent;
  color: hsl(var(--destructive));
  border-radius: var(--radius);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.clear-history-btn:hover {
  background: hsl(var(--destructive));
  color: hsl(var(--primary-foreground));
}

.calculation-history {
  max-height: 500px;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.history-item {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background: hsl(var(--surface-secondary));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.history-item:hover {
  background: hsl(var(--surface-tertiary));
  transform: translateX(4px);
}

.history-expression {
  font-size: var(--font-size-sm);
  color: hsl(var(--foreground-secondary));
  font-family: 'Courier New', monospace;
  margin-bottom: 0.5rem;
}

.history-result {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: hsl(var(--foreground));
  font-family: 'Courier New', monospace;
}

.history-timestamp {
  font-size: var(--font-size-xs);
  color: hsl(var(--foreground-muted));
  margin-top: 0.5rem;
  text-align: right;
}

/* Memory Functions */
.memory-functions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: hsl(var(--surface-secondary));
  border-radius: var(--radius-lg);
}

.memory-btn {
  padding: 0.5rem;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--foreground-secondary));
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.memory-btn:hover {
  background: hsl(var(--surface-tertiary));
  color: hsl(var(--foreground));
}

.memory-btn.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

.memory-display {
  background: hsl(var(--surface-tertiary));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.5rem;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-sm);
  color: hsl(var(--foreground-secondary));
  margin-top: 0.5rem;
}

/* Empty State */
.empty-history {
  text-align: center;
  padding: 2rem;
  color: hsl(var(--foreground-muted));
}

.empty-history-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  opacity: 0.5;
}

/* === New Comprehensive Calculations Page Styles === */
.calc-toolbar {display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.calc-toolbar .left, .calc-toolbar .right {display:flex;gap:.75rem;align-items:center}
.history-toggle {font-size:var(--font-size-sm);display:flex;align-items:center;gap:.4rem;cursor:pointer}

.calc-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;align-items:stretch}
.calc-card {background:hsl(var(--card));border:1px solid hsl(var(--card-border));border-radius:var(--radius-xl);padding:1.35rem 1.5rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;font-size:.9rem}
.calc-card.wide {grid-column:span 2;}
@media (min-width:1300px){.calc-card.wide{grid-column:span 3;}}
.calc-card:hover {box-shadow:var(--shadow-md);border-color:hsl(var(--primary)/0.4);}
.calc-card .card-header {display:flex;align-items:center;gap:.5rem;justify-content:space-between}
.calc-card h3 {margin:0;font-size:1.25rem;font-weight:650;letter-spacing:.01em}
.calc-card .tooltip {background:hsl(var(--surface-secondary));border:1px solid hsl(var(--border));border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:.65rem;cursor:help;color:hsl(var(--foreground-muted))}

.calc-card label {display:flex;flex-direction:column;font-size:.75rem;font-weight:600;gap:.35rem;color:hsl(var(--foreground-secondary));}
.calc-card input, .calc-card select {background:hsl(var(--surface-secondary));border:1px solid hsl(var(--border));border-radius:.75rem;padding:.6rem .75rem;font-size:.85rem;color:hsl(var(--foreground));width:100%;}
.calc-card input:focus, .calc-card select:focus {outline:2px solid hsl(var(--primary)/0.4);border-color:hsl(var(--primary));}

.calc-card .inputs {display:grid;grid-template-columns:1fr;gap:.75rem}
.calc-card .flex-row {display:flex;gap:1.5rem;flex-wrap:wrap}
.calc-card .flex-row .inputs {flex:1 1 220px}
.calc-card .flex-row .outputs {flex:1 1 220px}
.scenario-grid {align-items:stretch}
.scenario-grid .small-grid {grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}

.output-row {display:flex;justify-content:space-between;font-size:.75rem;padding:.35rem .5rem;background:hsl(var(--surface-secondary));border:1px solid hsl(var(--border));border-radius:var(--radius);}
.outputs {display:flex;flex-direction:column;gap:.4rem;font-size:.7rem}
.outputs strong {font-weight:600;color:hsl(var(--foreground));}

.warn {background:linear-gradient(90deg,#f59e0b,#f97316);color:#111;padding:.4rem .55rem;font-size:.65rem;border-radius:var(--radius);line-height:1.1}
.warn.hidden {display:none}

/* Mini bar for break-even */
.mini-bar-chart .bar {display:flex;height:14px;width:100%;background:hsl(var(--surface-secondary));border:1px solid hsl(var(--border));border-radius:999px;overflow:hidden}
.mini-bar-chart {min-height:34px;}
.mini-bar-chart .seg {height:100%}
.mini-bar-chart .breakeven {background:hsl(var(--primary));}
.mini-bar-chart .expected {background:hsl(var(--success));}

/* Margin pie */
.mini-pie {display:flex;justify-content:center;align-items:center;padding:.25rem 0}
.mini-pie .pie {position:relative;width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--cost-color,#64748b) 0 calc(var(--cost-pct,70)*1%), var(--profit-color,#16a34a) 0);}
.mini-pie .slice {display:none}
/* We'll synthesize gradient via JS variables (set inline) if expanded later */

/* Loan schedule */
.schedule {margin-top:.25rem}
.schedule-table {width:100%;border-collapse:collapse;font-size:.6rem;margin-top:.4rem}
.schedule-table th, .schedule-table td {border:1px solid hsl(var(--border));padding:.25rem .35rem;text-align:right;white-space:nowrap}
.schedule-table th {background:hsl(var(--surface-secondary));text-align:right;font-weight:600}
.loan-chart-placeholder, .scenario-chart {background:hsl(var(--surface-secondary));border:1px dashed hsl(var(--border));height:80px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:.6rem;color:hsl(var(--foreground-secondary));}
.loan-chart-placeholder svg.spark {width:100%;height:100%;}
.loan-chart-placeholder:has(svg) {border-style:solid; font-size:0; color:transparent;}
.spark { width:100%; height:100%; }
.spark .line { fill:none; stroke:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--primary-hover))); stroke:hsl(var(--primary)); stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 2px 4px hsl(var(--primary)/.35)); }
.spark .area { fill:linear-gradient(180deg,hsl(var(--primary)/.45),transparent); fill:hsl(var(--primary)/.12); }
.spark .pt { fill:#fff; stroke:hsl(var(--primary)); stroke-width:1.5; opacity:0; transition:opacity .25s ease; }
.spark.show-points .pt { opacity:1; }
.chart-tooltip { position:fixed; z-index:1200; pointer-events:none; background:rgba(15,23,32,.92); backdrop-filter:blur(6px) saturate(140%); -webkit-backdrop-filter:blur(6px) saturate(140%); padding:.55rem .7rem; border:1px solid rgba(255,255,255,.12); border-radius:.75rem; font-size:.65rem; color:#fff; font-weight:500; display:flex; flex-direction:column; gap:.2rem; box-shadow:0 6px 26px -10px rgba(0,0,0,.5); animation:fadeIn .25s ease; }
.chart-tooltip .val { font-size:.75rem; font-weight:600; letter-spacing:.02em; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px);} to {opacity:1; transform:translateY(0);} }
.dep-chart { height:70px; margin-bottom:.5rem; background:hsl(var(--surface-secondary)); border:1px solid hsl(var(--border)); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; }
.dep-chart .spark .line { stroke:hsl(var(--warning)); }
.bar-mini { width:100%; height:100%; }
.bar-mini .bar { fill:hsl(var(--primary)); filter:drop-shadow(0 4px 8px hsl(var(--primary)/.4)); }
.bar-mini .bar.scenario { fill:hsl(var(--success)); }
.bar-mini .bar:hover { filter:brightness(1.1) drop-shadow(0 6px 14px hsl(var(--primary)/.55)); }
.bar-mini .lbl { font-size:.5rem; fill:hsl(var(--foreground)); font-weight:600; letter-spacing:.05em; }
.mini-donut { width:60px; height:60px; }
.mini-donut .ring { fill:none; stroke:rgba(255,255,255,.08); stroke-width:6; }
.mini-donut .seg.cost { fill:none; stroke:#64748b; stroke-width:6; stroke-dasharray:0 100; animation:dashIn .8s ease forwards; }
.mini-donut .seg.profit { fill:none; stroke:#16a34a; stroke-width:6; stroke-dasharray:0 100; animation:dashIn .8s .15s ease forwards; }
.mini-donut .val { font-size:.5rem; fill:#fff; font-weight:600; }
@keyframes dashIn { to { stroke-dasharray: var(--target, 100) 100; } }
.mini-bar-chart .legend.tiny { display:flex; gap:.4rem; margin-top:.3rem; font-size:.55rem; letter-spacing:.05em; color:hsl(var(--foreground-muted)); align-items:center; }
.mini-bar-chart .legend .dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.mini-bar-chart .legend .dot.be { background:hsl(var(--primary)); }
.mini-bar-chart .legend .dot.ex { background:hsl(var(--success)); }
.roi-cashflow { margin-top:.6rem; height:80px; background:hsl(var(--surface-secondary)); border:1px solid hsl(var(--border)); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; }

/* Depreciation */
#depSchedule tbody tr:nth-child(even) {background:hsl(var(--surface-secondary));}

/* Reconciliation */
.progress {background:hsl(var(--surface-secondary));border:1px solid hsl(var(--border));height:10px;border-radius:999px;overflow:hidden;margin:.3rem 0}
#reconBar {height:100%;background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent)));width:0;transition:width .4s ease}
.status-badge {display:inline-block;padding:.25rem .5rem;border-radius:999px;font-size:.55rem;font-weight:600;background:hsl(var(--surface-secondary));border:1px solid hsl(var(--border));text-transform:uppercase;letter-spacing:.5px}
.status-badge.green {background:#065f46;color:#ecfdf5;border-color:#047857}
.status-badge.yellow {background:#92400e;color:#fff7ed;border-color:#f59e0b}
.status-badge.red {background:#7f1d1d;color:#fee2e2;border-color:#dc2626}

/* Scenario */
.scenario-output {gap:.5rem}

/* History Panel */
.calc-history {position:fixed;right:0;top:70px;width:260px;max-height:calc(100vh - 90px);overflow-y:auto;background:hsl(var(--card));border-left:1px solid hsl(var(--card-border));padding:1rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:var(--shadow-lg);z-index:50}
.calc-history h4 {margin:0;font-size:.85rem;font-weight:600}
.calc-history ul {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.calc-history .history-item {display:flex;flex-direction:column;padding:.4rem .5rem;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--surface-secondary));font-size:.6rem}
.calc-history .hist-type {font-weight:600;color:hsl(var(--primary));}
.calc-history .hist-data {color:hsl(var(--foreground-secondary));}
.calc-history .hist-time {font-size:.55rem;color:hsl(var(--foreground-muted));align-self:flex-end}
.calc-history .empty {font-size:.6rem;color:hsl(var(--foreground-muted));text-align:center;padding:.75rem}

/* Button Grid Mode */
.calc-buttons-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:3rem}
.calc-launch-card {position:relative;display:flex;align-items:flex-start;gap:1.15rem;background:linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid hsl(var(--card-border) / .55);border-radius:1.25rem;padding:1.25rem 1.4rem 1.4rem;cursor:pointer;text-align:left;overflow:hidden;transition:background .5s ease, box-shadow .55s ease, transform .55s cubic-bezier(.6,.3,.2,1), border-color .5s ease, filter .5s ease;font-family:inherit;box-shadow:0 4px 10px -4px rgba(0,0,0,.45),0 14px 34px -12px rgba(0,0,0,.55);backdrop-filter:blur(8px);min-height:150px}
.calc-launch-card .accent-bar {position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:.8;}
.calc-launch-card .calc-icon-wrap {width:60px;height:60px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.015));color:#fff;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 6px 14px -6px rgba(0,0,0,.65);backdrop-filter:blur(6px);}
.calc-launch-card .calc-svg {width:30px;height:30px;stroke:#fff;}
.calc-launch-card .calc-meta h4 {margin:0 0 .4rem;font-size:1.05rem;font-weight:650;letter-spacing:.02em;color:#fff;}
.calc-launch-card .calc-meta p {margin:0;font-size:.72rem;line-height:1.25;color:rgba(255,255,255,.7);max-width:300px;}
.calc-launch-card .open-indicator {margin-left:auto;font-size:.85rem;line-height:1;color:rgba(255,255,255,.55);transition:transform .55s ease,color .45s ease, background .45s ease;padding:.35rem .45rem;border-radius:.55rem;backdrop-filter:blur(4px);}
.calc-launch-card::before {content:"";position:absolute;inset:0;background:radial-gradient(circle at 115% -5%,rgba(255,255,255,.25),transparent 65%);opacity:0;transition:opacity .7s ease;mix-blend-mode:overlay;pointer-events:none;}
.calc-launch-card::after {content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02));opacity:.15;pointer-events:none;transition:opacity .6s ease;}
.calc-launch-card:hover {transform:translateY(-8px);box-shadow:0 18px 40px -16px rgba(0,0,0,.75),0 6px 18px -8px rgba(0,0,0,.55);border-color:rgba(255,255,255,.4);filter:brightness(1.08);}
.calc-launch-card:hover .open-indicator {transform:translateX(6px);color:#fff;background:rgba(255,255,255,.12);}
.calc-launch-card:hover::before {opacity:.7;}
.calc-launch-card:hover::after {opacity:.35;}

/* Modal */
.calc-modal-overlay { /* ensure interactive */ pointer-events:auto; }
.calc-modal-content { /* inherit inventory modal sizing for consistency */ width:auto; max-width:none; }
.calc-modal-content .modal-title {display:flex;align-items:center;gap:.6rem;font-size:1rem;font-weight:600;}
.calc-modal-content .modal-title svg {width:22px;height:22px;color:#fff;stroke:#fff;}

/* Floating history (within modal context) */
.calc-history.floating {position:fixed;right:1rem;top:1rem;width:240px;box-shadow:var(--shadow-xl);border:1px solid hsl(var(--card-border));border-radius:var(--radius-lg);background:hsl(var(--card));}

/* Dark theme adjustments */
.calculations-theme-dark { --calc-bg: #0f141a; --calc-surface:#141b22; --calc-border: #243140; }
.calculations-theme-dark .page-header h1, .calculations-theme-dark .page-header p { color:#fff; }
.calculations-theme-dark .calc-toolbar, .calculations-theme-dark .calc-history { color:#fff; }
.calculations-theme-dark .calc-history { background:linear-gradient(165deg,#151e26,#121a21); border-color:rgba(255,255,255,.12); }
.calculations-theme-dark .calc-history .history-item { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); color:#fff; }
.calculations-theme-dark .calc-history .hist-type { color:#fff; }
.calculations-theme-dark .calc-history h4 { color:#fff; }

/* Override calculator card inner elements for contrast inside modal */
.modal-overlay.calc-modal-overlay .calc-card { background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid rgba(255,255,255,.12); color:#fff; }
.modal-overlay.calc-modal-overlay label { color:rgba(255,255,255,.65); }
.modal-overlay.calc-modal-overlay input, .modal-overlay.calc-modal-overlay select { background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.18); }

/* === Advanced Calculator Modal Redesign === */
.smart-calc-modal .calc-modal-content { position:relative; background:linear-gradient(155deg, #141b23 0%, #0f141a 55%, #0c1217 100%); border:1px solid rgba(255,255,255,.08); border-radius:1.4rem; width:clamp(780px,78vw,1250px); max-height:82vh; display:flex; flex-direction:column; box-shadow:0 18px 46px -12px rgba(0,0,0,.55),0 8px 26px -10px rgba(0,0,0,.45); overflow:hidden; backdrop-filter:blur(10px) saturate(140%); -webkit-backdrop-filter:blur(10px) saturate(140%); animation:calcModalIn .65s cubic-bezier(.6,.3,.2,1); }
.smart-calc-modal .calc-modal-accent { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 82% 18%, rgba(0,119,255,.18), transparent 60%), radial-gradient(circle at 5% 90%, rgba(0,153,255,.15), transparent 65%); mix-blend-mode:screen; opacity:.6; }
.smart-calc-modal { display:flex; align-items:center; justify-content:center; padding:4vh 2vw; }
.smart-calc-modal .calc-modal-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1.25rem; padding:1.15rem 1.4rem 1rem; border-bottom:1px solid rgba(255,255,255,.08); position:relative; }
.smart-calc-modal .calc-modal-title-wrap { display:flex; flex-direction:column; gap:.35rem; }
.smart-calc-modal .calc-modal-title { display:flex; align-items:center; gap:.65rem; margin:0; font-size:1.45rem; font-weight:650; letter-spacing:.015em; background:linear-gradient(90deg,#fff,#9ecbff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.smart-calc-modal .calc-modal-title svg { width:30px; height:30px; stroke:#9ecbff; }
.smart-calc-modal .calc-modal-sub { margin:0; font-size:.72rem; color:rgba(255,255,255,.55); letter-spacing:.05em; text-transform:uppercase; font-weight:600; }
.smart-calc-modal .calc-modal-action-bar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.smart-calc-modal .calc-modal-action-bar.minimal { gap:.4rem; }
.smart-calc-modal .calc-modal-body { padding:1.2rem 1.5rem 1.6rem; overflow:auto; flex:1; display:flex; flex-direction:column; gap:1.5rem; }
.smart-calc-modal .calc-modal-footer { display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.4rem 1.25rem; border-top:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.04), transparent); }
.smart-calc-modal .calc-modal-footer .footer-left, .smart-calc-modal .calc-modal-footer .footer-right { display:flex; gap:.75rem; flex-wrap:wrap; }
.smart-calc-modal .calc-modal-footer.multi { justify-content:space-between; }

.calc-modal-btn { --btn-grad: linear-gradient(135deg,#0d61ff,#1082ff); position:relative; display:inline-flex; align-items:center; gap:.55rem; font-size:.72rem; padding:.65rem 1rem; border-radius:.8rem; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:#dce9f9; font-weight:600; letter-spacing:.03em; cursor:pointer; overflow:hidden; transition:background .4s ease, border-color .4s ease, color .35s ease, transform .45s cubic-bezier(.6,.3,.2,1), box-shadow .55s ease; backdrop-filter:blur(4px); }
.calc-modal-btn.primary { background:var(--btn-grad); color:#fff; border:1px solid #1280ff; box-shadow:0 6px 20px -6px rgba(13,97,255,.5); }
.calc-modal-btn.ghost { background:rgba(255,255,255,.04); }
.calc-modal-btn.subtle { background:rgba(255,255,255,.02); color:rgba(255,255,255,.65); }
.calc-modal-btn:hover { background:rgba(255,255,255,.12); color:#fff; transform:translateY(-3px); }
.calc-modal-btn.primary:hover { filter:brightness(1.05); box-shadow:0 12px 32px -12px rgba(13,97,255,.6); }
.calc-modal-btn:active { transform:translateY(-1px) scale(.97); }
.calc-modal-btn.primary:active { box-shadow:0 4px 14px -6px rgba(13,97,255,.55); }
.calc-modal-close { width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; cursor:pointer; transition:background .4s ease, transform .4s ease, border-color .4s ease; }
.calc-modal-close:hover { background:rgba(255,255,255,.12); transform:rotate(90deg); border-color:rgba(255,255,255,.2); }
.calc-modal-close svg { width:20px; height:20px; stroke:#fff; }

/* Scroll styling */
.smart-calc-modal .custom-scroll::-webkit-scrollbar { width:10px; }
.smart-calc-modal .custom-scroll::-webkit-scrollbar-track { background:transparent; }
.smart-calc-modal .custom-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:14px; }
.smart-calc-modal .custom-scroll::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.2); }

/* Animations */
@keyframes calcModalIn { 0% { opacity:0; transform:translateY(18px) scale(.97); } 55% { opacity:1; transform:translateY(-4px) scale(1.01); } 100% { opacity:1; transform:translateY(0) scale(1); } }

/* Responsive adjustments */
@media (max-width: 920px){
  .smart-calc-modal .calc-modal-content { width:clamp(96%,96%,96%); border-radius:1.1rem; }
  .smart-calc-modal .calc-modal-header { flex-direction:column; align-items:stretch; }
  .smart-calc-modal .calc-modal-action-bar { justify-content:flex-start; }
  .calc-modal-btn { font-size:.78rem; }
  .calc-modal-close { width:38px; height:38px; }
}
@media (prefers-reduced-motion: reduce){
  .smart-calc-modal .calc-modal-content { animation:none; }
  .calc-modal-btn { transition:background .25s ease, color .25s ease, transform .25s ease; }
  .calc-modal-btn:hover { transform:translateY(-2px); }
}
.modal-overlay.calc-modal-overlay input:focus, .modal-overlay.calc-modal-overlay select:focus { border-color:rgba(255,255,255,.55); box-shadow:0 0 0 2px rgba(255,255,255,.15); }
.modal-overlay.calc-modal-overlay .output-row { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); color:#fff; }
.modal-overlay.calc-modal-overlay .warn { background:linear-gradient(90deg,#f59e0b,#f97316); color:#111; }
.modal-overlay.calc-modal-overlay strong { color:#fff; }
.modal-overlay.calc-modal-overlay .schedule-table th { background:rgba(255,255,255,.12); color:#fff; }
.modal-overlay.calc-modal-overlay .schedule-table td { color:rgba(255,255,255,.85); }
.modal-overlay.calc-modal-overlay .progress { background:rgba(255,255,255,.08); }
#reconBar { background:linear-gradient(90deg,#4ade80,#06b6d4); }

/* Smooth focus outline for launch cards */
.calc-launch-card:focus-visible { outline:2px solid #fff; outline-offset:3px; }

@media (max-width:900px){
  .calc-modal {padding:1rem}
  .calc-modal-overlay {padding:5rem 0.75rem 1.5rem}
}

/* Buttons */
.calc-card button.small {font-size:.6rem;padding:.35rem .6rem}

/* Journal preview */
#jePreview {font-size:.65rem;background:hsl(var(--surface-secondary));padding:.5rem;border:1px solid hsl(var(--border));border-radius:var(--radius);min-height:34px}

/* Utility */
@media (max-width: 1100px){ .calc-history {position:static;width:auto;max-height:none;border-left:none;box-shadow:none;border:1px solid hsl(var(--card-border));border-radius:var(--radius-lg);margin-top:1.5rem;} }

/* ------------------------------------------------------
  Optional placement variants for the calc history panel
  Add the corresponding class to <aside class="calc-history ..."> to change layout
  ------------------------------------------------------ */
/* Inline / embedded (participates in normal document flow) */
.calc-history.embedded { position:static; right:auto; top:auto; width:100%; max-height:none; border-left:none; box-shadow:none; margin:1.5rem 0; }
.calc-history.embedded.no-overlap { background:hsl(var(--card)); border:1px solid hsl(var(--card-border)); padding:1rem; border-radius:var(--radius-lg); }

/* Left docked (sticky inside a scrolling column – place inside a flex/grid two-column layout) */
.calc-history.left-docked { position:sticky; top:70px; right:auto; left:0; box-shadow:var(--shadow-sm); border-left:none; border:1px solid hsl(var(--card-border)); border-radius:var(--radius-lg); }

/* Compact floating (smaller fixed panel you can position manually) */
.calc-history.compact { width:200px; font-size:.55rem; }

/* If you want to globally disable the fixed right behavior without adding extra classes,
  you can uncomment the block below.
  .calc-history { position:static; right:auto; top:auto; width:100%; max-height:none; border-left:none; box-shadow:none; }
*/

/* New calculation page two-column layout (buttons + history) */
.calc-layout { display:grid; grid-template-columns: 1fr 280px; gap:1.25rem; align-items:start; }

/* Collapse to single column on narrower viewports */
@media (max-width: 1300px){
  .calc-layout { grid-template-columns: 1fr 250px; }
}
@media (max-width: 1100px){
  .calc-layout { grid-template-columns: 1fr; }
  .calc-history.embedded.no-overlap { margin-top:0; }
}

/* Prevent legacy fixed positioning when inside the new layout */
.calc-layout .calc-history { position:static !important; right:auto !important; top:auto !important; width:100%; max-height:480px; overflow-y:auto; }

/* === Calculation History Widget (Finance-inspired styling) === */
.calc-history-widget { 
  background:hsl(var(--card));
  border:1px solid hsl(var(--card-border));
  border-radius:var(--radius-xl);
  display:flex; flex-direction:column; overflow:hidden; position:relative; 
  box-shadow: var(--shadow-sm);
  transition: box-shadow .35s ease, transform .4s cubic-bezier(.4,.14,.3,1), border-color .4s ease;
}
.calc-history-widget::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent))); opacity:.7; }
.calc-history-widget:hover { transform:translateY(-4px); box-shadow:0 10px 24px -8px rgba(0,0,0,.35),0 4px 12px -4px rgba(0,0,0,.25); }
.calc-history-widget .history-header { padding:.85rem 1rem .6rem; border-bottom:1px solid hsl(var(--border)); background:linear-gradient(145deg,hsl(var(--surface-secondary)) 0%, transparent 90%); }
.calc-history-widget .history-header h3 { margin:0 0 .1rem; font-size:.9rem; font-weight:600; letter-spacing:.02em; }
.calc-history-widget .history-header p { margin:0; font-size:.6rem; color:hsl(var(--foreground-muted)); letter-spacing:.05em; }
.calc-history-widget .widget-actions button { border:1px solid hsl(var(--border)); background:hsl(var(--background)); padding:.35rem .55rem; font-size:.55rem; border-radius:.45rem; cursor:pointer; line-height:1; }
.calc-history-widget .widget-actions button:hover { border-color:hsl(var(--primary)); color:hsl(var(--primary)); }
.calc-history-widget .history-body { padding:.6rem .8rem .85rem; display:block; overflow:hidden; transition:max-height .55s cubic-bezier(.6,.3,.2,1); }
.calc-history-widget.collapsed { border-radius:var(--radius-xl); }
.calc-history-widget.collapsed .history-body { padding:0 .8rem; }
.calc-history-widget .history-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.45rem; font-size:.6rem; }
.calc-history-widget .history-item { position:relative; background:hsl(var(--surface-secondary)); border:1px solid hsl(var(--border)); padding:.45rem .55rem .4rem; border-radius:.55rem; display:grid; grid-template-columns: auto 1fr auto; gap:.4rem .6rem; align-items:start; line-height:1.15; box-shadow:0 1px 2px -1px rgba(0,0,0,.25); }
.calc-history-widget .history-item::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,hsl(var(--primary)),hsl(var(--accent))); border-radius:3px 0 0 3px; opacity:.9; }
.calc-history-widget .history-item:hover { background:hsl(var(--surface-tertiary)); }
.calc-history-widget .hist-type { font-weight:600; font-size:.55rem; text-transform:uppercase; letter-spacing:.06em; color:hsl(var(--primary)); align-self:center; }
.calc-history-widget .hist-data { font-size:.6rem; color:hsl(var(--foreground-secondary)); }
.calc-history-widget .hist-time { font-size:.5rem; color:hsl(var(--foreground-muted)); align-self:center; justify-self:end; }
.calc-history-widget .empty { background:transparent; border:1px dashed hsl(var(--border)); padding:.65rem .75rem; text-align:center; color:hsl(var(--foreground-muted)); font-size:.6rem; border-radius:.55rem; }
.calc-history-widget .history-list::-webkit-scrollbar { width:8px; }
.calc-history-widget .history-list::-webkit-scrollbar-track { background:transparent; }
.calc-history-widget .history-list::-webkit-scrollbar-thumb { background:hsl(var(--surface-tertiary)); border-radius:6px; }
.calc-history-widget .history-list::-webkit-scrollbar-thumb:hover { background:hsl(var(--surface-tertiary) / .8); }

@media (prefers-reduced-motion: reduce){
  .calc-history-widget .history-body { transition:none; }
  .calc-history-widget { transition:none; }
}

/* Dark theme adjustments */
.calculations-theme-dark .calc-history-widget { background:linear-gradient(165deg,#141c23,#10171d); border-color:rgba(255,255,255,.08); }
.calculations-theme-dark .calc-history-widget .history-header { background:linear-gradient(145deg,rgba(255,255,255,.06) 0%, transparent 90%); }
.calculations-theme-dark .calc-history-widget .history-item { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
.calculations-theme-dark .calc-history-widget .history-item:hover { background:rgba(255,255,255,.08); }
.calculations-theme-dark .calc-history-widget .hist-type { color:#fff; }
.calculations-theme-dark .calc-history-widget .hist-data { color:rgba(255,255,255,.75); }
.calculations-theme-dark .calc-history-widget .hist-time { color:rgba(255,255,255,.45); }

/* === History Bottom-Sheet Modal === */
.calc-history-modal { position:fixed; inset:0; z-index:1200; display:flex; justify-content:center; align-items:center; padding:0; background:hsl(var(--background) / 0.75); backdrop-filter:blur(8px); opacity:0; transition:opacity .5s ease; }
.calc-history-modal.open { opacity:1; }
.calc-history-modal .chm-backdrop { position:absolute; inset:0; }
.calc-history-modal .chm-sheet { position:relative; background:linear-gradient(155deg,hsl(var(--card)) 0%, hsl(var(--surface-secondary)) 120%); border:1px solid hsl(var(--card-border)); border-radius:var(--radius-xl); width:clamp(760px,82vw,1180px); max-width:96vw; max-height:83vh; display:flex; flex-direction:column; box-shadow:0 18px 46px -12px rgba(0,0,0,.55),0 8px 28px -10px rgba(0,0,0,.45); transform:translateY(12px) scale(.965); opacity:0; animation:chmCenterIn .55s cubic-bezier(.6,.3,.2,1) forwards; overflow:hidden; }
@keyframes chmCenterIn { to { transform:translateY(0) scale(1); opacity:1; } }
.calc-history-modal .chm-header { display:flex; justify-content:space-between; align-items:center; padding:.9rem 1.25rem .85rem; border-bottom:1px solid hsl(var(--border)); position:relative; background:linear-gradient(150deg,hsl(var(--surface-secondary)) 0%, transparent 95%); }
.calc-history-modal .chm-header::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent))); opacity:.8; }
.calc-history-modal .chm-header h3 { margin:0; font-size:1.15rem; font-weight:700; letter-spacing:.015em; background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent))); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.calc-history-modal .chm-actions { display:flex; gap:.45rem; }
.calc-history-modal .chm-actions .smart-btn.xs { font-size:.7rem; padding:.55rem .85rem; border:1px solid hsl(var(--border)); background:var(--secondary); color:hsl(var(--foreground)); border-radius:.7rem; cursor:pointer; font-weight:600; letter-spacing:.035em; display:inline-flex; align-items:center; gap:.4rem; transition:background .35s ease, color .35s ease, transform .25s ease, border-color .35s ease, box-shadow .4s ease; }
.calc-history-modal .chm-actions .smart-btn.xs:hover { background:var(--surface-secondary); color:hsl(var(--foreground)); border-color:hsl(var(--primary)); box-shadow:0 4px 14px -4px rgba(0,0,0,.3); }
.calc-history-modal .chm-actions .smart-btn.xs:active { transform:translateY(1px); }
.calc-history-modal .chm-actions .smart-btn.xs.ghost { background:transparent; color:hsl(var(--foreground-muted)); }
.calc-history-modal .chm-actions .smart-btn.xs.ghost:hover { background:hsl(var(--surface-secondary)); color:hsl(var(--foreground)); }

/* Larger Export / Clear emphasis variants */
.calc-history-modal .chm-actions #histExportBtn,
.calc-history-modal .chm-actions #histClearBtn { background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); border-color:hsl(var(--primary)); box-shadow:0 4px 14px -4px hsl(var(--primary) / .5); }
.calc-history-modal .chm-actions #histClearBtn { opacity:.9; }
.calc-history-modal .chm-actions #histExportBtn:hover,
.calc-history-modal .chm-actions #histClearBtn:hover { background:hsl(var(--primary-hover,var(--primary))); filter:brightness(1.08); box-shadow:0 6px 18px -6px hsl(var(--primary) / .6); }
.calc-history-modal .chm-actions #histExportBtn:active,
.calc-history-modal .chm-actions #histClearBtn:active { transform:translateY(1px); }
.calc-history-modal .chm-body { padding:1.15rem 1.4rem 1.5rem; overflow:auto; flex:1; font-size:.8rem; }
.calc-history-modal .history-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem; }
.calc-history-modal .history-item { background:hsl(var(--surface-secondary)); border:1px solid hsl(var(--border)); border-radius:1rem; padding:.8rem .85rem .7rem; display:flex; flex-direction:column; gap:.35rem; font-size:.72rem; position:relative; box-shadow:0 3px 6px -3px rgba(0,0,0,.28); backdrop-filter:blur(4px); }
.calc-history-modal .history-item::after { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,hsl(var(--primary)),hsl(var(--accent))); opacity:.7; border-radius:.85rem .85rem 0 0; }
.calc-history-modal .history-item:hover { background:hsl(var(--surface-tertiary)); }
.calc-history-modal .hist-type { font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:hsl(var(--primary)); }
.calc-history-modal .hist-data { color:hsl(var(--foreground-secondary)); word-break:break-word; font-size:.72rem; line-height:1.25; }
.calc-history-modal .hist-time { font-size:.55rem; color:hsl(var(--foreground-muted)); align-self:flex-end; letter-spacing:.04em; }
.calc-history-modal .empty { grid-column:1 / -1; text-align:center; padding:1.4rem .85rem; font-size:.75rem; color:hsl(var(--foreground-muted)); border:1px dashed hsl(var(--border)); border-radius:1rem; background:linear-gradient(145deg,hsl(var(--surface-secondary) / 0.5), transparent); }

@media (max-width: 780px){
  .calc-history-modal { align-items:flex-start; padding-top:6vh; }
  .calc-history-modal .chm-sheet { width:100%; border-radius:var(--radius-xl); }
  .calc-history-modal .history-list { grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); }
  .calc-history-modal .chm-actions .smart-btn.xs { font-size:.68rem; }
  .calc-history-modal .history-item { font-size:.75rem; }
}

.calculations-theme-dark .calc-history-modal .chm-sheet { background:linear-gradient(165deg,#141c23,#10161c 120%); border-color:rgba(255,255,255,.12); }

/* === History Modal Final Overrides (ensure visibility) === */
.calc-history-modal .chm-sheet { background:linear-gradient(150deg, rgba(30,38,46,.92) 0%, rgba(20,24,30,.92) 60%, rgba(15,20,25,.95) 100%), radial-gradient(circle at 120% -10%, rgba(255,255,255,.06), transparent 70%); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); border:1px solid rgba(255,255,255,.08); }
.calc-history-modal .chm-header { font-size:0.95rem; }
.calc-history-modal .chm-header h3 { font-size:1.3rem; letter-spacing:.02em; }
.calc-history-modal .chm-actions .smart-btn.xs { font-size:.78rem; padding:.6rem .95rem; border-radius:.75rem; }
.calc-history-modal .chm-actions #histExportBtn,
.calc-history-modal .chm-actions #histClearBtn { font-weight:600; }
.calc-history-modal .chm-actions #histExportBtn:hover,
.calc-history-modal .chm-actions #histClearBtn:hover { transform:translateY(-2px); }
.calc-history-modal .history-item { font-size:.82rem; line-height:1.28; border:1px solid rgba(255,255,255,.10); background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); }
.calc-history-modal .history-item::after { opacity:.9; }
.calc-history-modal .hist-type { font-size:.68rem; letter-spacing:.1em; }
.calc-history-modal .hist-data { font-size:.78rem; }
.calc-history-modal .hist-time { font-size:.62rem; }
.calc-history-modal .empty { font-size:.85rem; }
@media (max-width: 780px){
  .calc-history-modal .chm-header h3 { font-size:1.15rem; }
  .calc-history-modal .history-item { font-size:.9rem; }
  .calc-history-modal .hist-data { font-size:.85rem; }
}

/* === Toolbar Button Enlargement (Calculations page) === */
.calc-toolbar .smart-btn { font-size:.8rem !important; padding:.7rem 1.15rem !important; border-radius:.75rem !important; font-weight:600; letter-spacing:.02em; display:inline-flex; align-items:center; gap:.45rem; }
.calc-toolbar .smart-btn.primary { background:hsl(var(--primary)); color:hsl(var(--primary-foreground)); border:1px solid hsl(var(--primary)); box-shadow:0 4px 16px -6px hsl(var(--primary) / .55); }
.calc-toolbar .smart-btn.primary:hover { filter:brightness(1.06); box-shadow:0 6px 20px -8px hsl(var(--primary) / .65); }
.calc-toolbar .smart-btn.secondary { background:hsl(var(--surface-secondary)); color:hsl(var(--foreground)); border:1px solid hsl(var(--border)); }
.calc-toolbar .smart-btn.secondary:hover { background:hsl(var(--surface-tertiary)); }
.calc-toolbar .smart-btn:not(.primary):not(.secondary) { background:hsl(var(--secondary)); border:1px solid hsl(var(--border)); color:hsl(var(--foreground)); }
.calc-toolbar .smart-btn:not(.primary):not(.secondary):hover { background:hsl(var(--surface-secondary)); }
.calc-toolbar .smart-btn:active { transform:translateY(1px); }
.calculations-theme-dark .calc-toolbar .smart-btn.secondary { background:rgba(255,255,255,.08); }
.calculations-theme-dark .calc-toolbar .smart-btn.secondary:hover { background:rgba(255,255,255,.12); }

/* === Toolbar Button Blue Override === */
.calc-toolbar .smart-btn,
.calc-toolbar .smart-btn.secondary,
.calc-toolbar .smart-btn:not(.primary):not(.secondary) {
  background:hsl(var(--primary)) !important;
  color:hsl(var(--primary-foreground)) !important;
  border:1px solid hsl(var(--primary)) !important;
  box-shadow:0 4px 14px -4px hsl(var(--primary) / .55);
}
.calc-toolbar .smart-btn:hover { filter:brightness(1.08); box-shadow:0 6px 20px -8px hsl(var(--primary) / .6); }
.calc-toolbar .smart-btn:active { filter:brightness(.95); }

/* Final hard override by ID to defeat any upstream specificity / important flags */
#clearHistoryBtn,
#showHistoryBtn,
#exportAllBtn,
#useInFinanceBtn {
  background:hsl(var(--primary)) !important;
  color:hsl(var(--primary-foreground)) !important;
  border:1px solid hsl(var(--primary)) !important;
  padding:.7rem 1.15rem !important;
  font-size:.85rem !important;
  font-weight:600 !important;
  border-radius:.75rem !important;
  line-height:1.1 !important;
  box-shadow:0 4px 16px -4px hsl(var(--primary) / .55), 0 0 0 1px hsl(var(--primary) / .35) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:.45rem !important;
  text-decoration:none !important;
}
#clearHistoryBtn:hover,
#showHistoryBtn:hover,
#exportAllBtn:hover,
#useInFinanceBtn:hover { filter:brightness(1.1) !important; box-shadow:0 6px 22px -6px hsl(var(--primary) / .65) !important; }
#clearHistoryBtn:active,
#showHistoryBtn:active,
#exportAllBtn:active,
#useInFinanceBtn:active { transform:translateY(1px) !important; }

/* Dedicated calc action buttons (override any global gradient/transparent styles) */
.calc-action-btn.smart-btn { 
  background: hsl(var(--primary)) !important;
  background-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border: 1px solid hsl(var(--primary)) !important;
  box-shadow: 0 4px 14px -4px hsl(var(--primary) / .55) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition: background-color .35s ease, box-shadow .45s ease, transform .4s cubic-bezier(.6,.3,.2,1), filter .35s ease;
  position:relative;
  overflow:hidden;
  animation:calcBtnPopIn .65s cubic-bezier(.6,.3,.2,1) both;
}
.calc-action-btn.smart-btn::before { display:none !important; }
.calc-action-btn.smart-btn::after { content:""; position:absolute; inset:0; background:linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 35%, rgba(255,255,255,0) 70%); transform:translateX(-120%) skewX(-18deg); opacity:0; pointer-events:none; }
.calc-action-btn.smart-btn:hover { filter:brightness(1.09) !important; box-shadow:0 10px 26px -10px hsl(var(--primary) / .7) !important; transform:translateY(-3px) !important; }
.calc-action-btn.smart-btn:active { transform:translateY(-1px) scale(.97) !important; box-shadow:0 4px 14px -6px hsl(var(--primary) / .55) !important; }
.calc-action-btn.smart-btn:hover::after { animation: sheenSweep 1s ease forwards; }

/* Focus-visible ring */
.calc-action-btn.smart-btn:focus-visible { outline:2px solid hsl(var(--primary-foreground)); outline-offset:2px; box-shadow:0 0 0 3px hsl(var(--primary) / .35),0 8px 26px -10px hsl(var(--primary) / .7) !important; }

/* Disabled state styling */
.calc-action-btn.smart-btn[disabled] { cursor:not-allowed; filter:grayscale(.3) brightness(.85) !important; box-shadow:none !important; transform:none !important; }

@keyframes sheenSweep { 0% { transform:translateX(-120%) skewX(-18deg); opacity:0; } 30% { opacity:.9; } 70% { opacity:.6; } 100% { transform:translateX(140%) skewX(-18deg); opacity:0; } }
@keyframes calcBtnPopIn { 0% { opacity:0; transform:translateY(12px) scale(.92); box-shadow:0 0 0 0 rgba(0,0,0,0); } 55% { opacity:1; transform:translateY(-2px) scale(1.015); } 100% { opacity:1; transform:translateY(0) scale(1); } }

/* Stagger utility (JS sets --btn-delay) */
.calc-action-btn.smart-btn { animation-delay: var(--btn-delay, 0ms); }

/* Reduced motion respects */
@media (prefers-reduced-motion: reduce) {
  .calc-action-btn.smart-btn { animation:none !important; transition:background-color .2s ease, box-shadow .25s ease, transform .25s ease; }
  .calc-action-btn.smart-btn:hover { transform:translateY(-2px) !important; }
  .calc-action-btn.smart-btn::after { display:none !important; }
}
.calculations-theme-dark .calc-history-modal .history-item { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
.calculations-theme-dark .calc-history-modal .history-item:hover { background:rgba(255,255,255,.08); }
.calculations-theme-dark .calc-history-modal .hist-type { color:#fff; }
.calculations-theme-dark .calc-history-modal .hist-data { color:rgba(255,255,255,.75); }
.calculations-theme-dark .calc-history-modal .hist-time { color:rgba(255,255,255,.45); }
@media (max-width: 700px){ .calc-card.wide {grid-column:span 1;} }

/* Responsive Design */
@media (max-width: 768px) {
  .calculations-container {
    padding: 1rem;
  }
  
  .calculations-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .calculator-grid,
  .journal-widget {
    grid-column: span 1;
  }
  
  .calculator-buttons {
    gap: 0.5rem;
  }
  
  .calc-btn {
    height: 50px;
    font-size: var(--font-size-base);
  }
  
  .display-current {
    font-size: var(--font-size-2xl);
  }
}