/**
 * Calculadora Científica Online — Stylesheet
 *
 * Casio fx-991EX inspired design:
 *   - Dark charcoal outer shell
 *   - White/cream display
 *   - Dark scientific section with orange shift labels
 *   - Light grey numeric section with white number buttons
 *   - Orange DEL, Red AC, Green =
 *
 * @package CalcCientifica
 */

/* =========================================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

.cco-outer-wrapper,
.cco-calculator {
  /* Font */
  --cco-font: 'Inter', system-ui, -apple-system, sans-serif;
  --cco-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, 'Courier New', monospace;

  /* Radii */
  --cco-radius-sm:  5px;
  --cco-radius-md:  8px;
  --cco-radius-lg:  14px;
  --cco-radius-xl:  18px;

  /* Spacing */
  --cco-gap-xs: 3px;
  --cco-gap-sm: 4px;
  --cco-gap:    5px;
  --cco-gap-md: 8px;

  /* Button sizes */
  --cco-btn-h:    31px;
  --cco-btn-h-sm: 26px;
  --cco-btn-font:    0.62rem;
  --cco-btn-font-lg: 0.74rem;

  /* Transition */
  --cco-trans: 100ms cubic-bezier(0.2, 0, 0, 1);

  /* ---- CASIO DARK THEME ---- */
  /* Outer shell */
  --cco-shell-bg:        #2b2d38;
  --cco-shell-border:    #1a1c23;

  /* Scientific section (TOP — dark charcoal) */
  --cco-sci-section-bg:  #23252f;

  /* Numeric section (BOTTOM — slightly lighter slate) */
  --cco-num-section-bg:  #cdcfd8;
  --cco-num-divider:     rgba(0,0,0,0.3);

  /* Display — cream/white */
  --cco-bg-display:      #eef0e6;
  --cco-bg-status:       #23252f;

  /* Button defaults */
  --cco-bg-btn:          #2e3040;
  --cco-bg-btn-hover:    #383b50;
  --cco-bg-btn-active:   #1e2030;

  /* Scientific buttons */
  --cco-bg-sci:          #2e3040;
  --cco-bg-sci-hover:    #3a3d52;

  /* Numeric buttons — white */
  --cco-bg-num:          #f0f0f0;
  --cco-bg-num-hover:    #e0e2e8;

  /* Operator buttons — slightly darker than num */
  --cco-bg-op:           #d5d7e0;
  --cco-bg-op-hover:     #c5c8d5;

  /* SHIFT button */
  --cco-bg-shift:        #3d3010;
  --cco-bg-shift-hover:  #4d3d15;
  --cco-bg-shift-active: #5d4a1a;

  /* ALPHA button */
  --cco-bg-alpha:        #2d1020;
  --cco-bg-alpha-hover:  #3d1a2c;

  /* Equals — green Casio style */
  --cco-bg-equals:       linear-gradient(180deg, #28a74b 0%, #1d8c3c 100%);
  --cco-bg-equals-hover: linear-gradient(180deg, #30c058 0%, #22a046 100%);

  /* Clear (AC) — red */
  --cco-bg-clear:        #c0392b;
  --cco-bg-clear-hover:  #e74c3c;

  /* DEL — orange */
  --cco-bg-del:          #d35400;
  --cco-bg-del-hover:    #e67e22;

  /* Memory / mode */
  --cco-bg-mem:          rgba(2, 132, 199, 0.15);
  --cco-bg-mem-hover:    rgba(2, 132, 199, 0.28);
  --cco-bg-mode-active:  rgba(59, 130, 246, 0.2);
  --cco-bg-mode:         rgba(255,255,255,0.05);
  --cco-bg-mode-hover:   rgba(255,255,255,0.10);
  --cco-bg-panel:        rgba(0, 0, 0, 0.02);

  /* History */
  --cco-bg-history:      #1e2030;
  --cco-bg-surface:      rgba(255,255,255,0.04);

  /* Text colors */
  --cco-text:            #e8eaf0;
  --cco-text-dim:        #8b8fa8;
  --cco-text-accent:     #4dabf7;
  --cco-text-num:        #1a1c23;
  --cco-text-op:         #1a1c23;
  --cco-text-sci:        #c8cad8;
  --cco-text-mem:        #60b8f8;
  --cco-text-equals:     #ffffff;
  --cco-text-clear:      #ffffff;
  --cco-text-del:        #ffffff;
  --cco-text-shift:      #f59e0b;
  --cco-text-shift-active: #fbbf24;
  --cco-text-secondary:  #f59e0b;
  --cco-text-alpha:      #f472b6;
  --cco-text-alpha-active: #fb7185;
  --cco-text-result:     #1a1c23;
  --cco-text-error:      #dc2626;
  --cco-text-hist:       #6b7280;

  /* Borders */
  --cco-border:          rgba(255,255,255,0.08);
  --cco-border-num:      rgba(0,0,0,0.12);
  --cco-border-focus:    #4dabf7;
  --cco-border-accent:   rgba(77, 171, 247, 0.4);

  /* Shadows */
  --cco-shadow:          0 12px 48px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.35);
  --cco-shadow-btn:      0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  --cco-shadow-btn-num:  0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.6);
  --cco-shadow-inset:    inset 0 1px 0 rgba(255,255,255,0.08);

  /* Display font sizes */
  --cco-display-font:    2.2rem;
  --cco-expr-font:       0.82rem;
}

/* =========================================================================
   2. Screen-reader only utility
   ========================================================================= */

.cco-calculator .cco-sr-only,
.cco-calculator .cco-sr-live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   3. Outer wrapper
   ========================================================================= */

.cco-outer-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* =========================================================================
   4. Calculator container
   ========================================================================= */

.cco-calculator {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 360px;
  min-width: 300px;
  flex-shrink: 0;
  margin: 0;
  background: var(--cco-shell-bg);
  border: 2px solid var(--cco-shell-border);
  border-radius: var(--cco-radius-xl);
  box-shadow: var(--cco-shadow);
  overflow: hidden;
  font-family: var(--cco-font);
  color: var(--cco-text);
  box-sizing: border-box;
  position: relative;
}

.cco-calculator.cco-full-width {
  width: 100%;
  max-width: 420px;
}

/* =========================================================================
   5. Status bar
   ========================================================================= */

.cco-calculator .cco-status-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--cco-bg-status);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cco-text-accent);
  min-height: 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.cco-calculator .cco-status-shift {
  color: var(--cco-text-shift-active);
  font-weight: 800;
  animation: cco-shift-pulse 0.9s ease-in-out infinite alternate;
}

@keyframes cco-shift-pulse {
  from { opacity: 0.8; }
  to   { opacity: 1; text-shadow: 0 0 10px rgba(251, 191, 36, 0.8); }
}

.cco-calculator .cco-status-mem {
  color: var(--cco-text-mem);
}

.cco-calculator .cco-status-mode {
  margin-left: auto;
  color: var(--cco-text-secondary);
}

.cco-calculator .cco-status-frac {
  color: var(--cco-text-accent);
  font-style: italic;
}

.cco-calculator .cco-lang-switch {
  margin-left: auto;
  display: flex;
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
  overflow: hidden;
}

.cco-calculator .cco-lang-btn {
  background: transparent;
  border: none;
  color: var(--cco-text-dim);
  font-size: 0.55rem;
  font-weight: 700;
  padding: 3px 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.cco-calculator .cco-lang-btn:hover {
  color: var(--cco-text);
  background: rgba(255,255,255,0.05);
}

.cco-calculator .cco-lang-btn.cco-lang-active {
  background: rgba(59, 130, 246, 0.3);
  color: var(--cco-text-accent);
}

/* =========================================================================
   6. Display
   ========================================================================= */

.cco-calculator .cco-display {
  background: var(--cco-bg-display);
  padding: 8px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 78px;
  position: relative;
  border-bottom: 3px solid #a0a89a;
  box-shadow: inset 0 -4px 12px rgba(0,0,0,0.08);
}

.cco-calculator .cco-display-expression-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cco-calculator .cco-display-expression-wrapper::-webkit-scrollbar {
  display: none;
}

.cco-calculator .cco-display-expression {
  font-family: var(--cco-font-mono);
  font-size: var(--cco-expr-font);
  color: #4a5240;
  min-height: 18px;
  outline: none;
  white-space: nowrap;
  cursor: text;
  padding: 1px 2px;
  border-radius: var(--cco-radius-sm);
  border: 1px solid transparent;
  transition: border-color var(--cco-trans);
  user-select: text;
}

.cco-calculator .cco-display-expression:focus {
  border-color: rgba(74, 82, 64, 0.3);
}

.cco-calculator .cco-display-result-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cco-calculator .cco-display-result {
  font-family: var(--cco-font-mono);
  font-size: var(--cco-display-font);
  font-weight: 300;
  color: var(--cco-text-result);
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  padding: 0;
  line-height: 1.1;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}

.cco-calculator .cco-display-result::-webkit-scrollbar { display: none; }

.cco-calculator .cco-display-result.cco-error {
  color: var(--cco-text-error);
  font-size: 0.78rem;
  font-family: var(--cco-font);
  font-weight: 400;
}

.cco-calculator .cco-btn-copy-result {
  background: transparent;
  border: 1px solid rgba(74, 82, 64, 0.3);
  color: #6a7260;
  border-radius: var(--cco-radius-sm);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--cco-trans);
  flex-shrink: 0;
  padding: 0;
}

.cco-calculator .cco-btn-copy-result:hover {
  border-color: #4a5240;
  color: #2a3220;
}

.cco-calculator .cco-btn-copy-result.cco-copied {
  color: #22a046;
  border-color: #22a046;
}

/* =========================================================================
   7. Mode selector tabs
   ========================================================================= */

.cco-calculator .cco-mode-selector {
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: #1e2030;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  overflow-x: auto;
  scrollbar-width: none;
}

.cco-calculator .cco-mode-selector::-webkit-scrollbar { display: none; }

.cco-calculator .cco-mode-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #8b8fa8;
  border-radius: var(--cco-radius-sm);
  padding: 3px 8px;
  font-size: 0.64rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--cco-trans);
  height: 24px;
  letter-spacing: 0.04em;
  font-family: var(--cco-font);
}

.cco-calculator .cco-mode-btn:hover {
  background: rgba(255,255,255,0.10);
  color: #c8cad8;
}

.cco-calculator .cco-mode-btn.cco-mode-active,
.cco-calculator .cco-mode-btn[aria-selected="true"] {
  background: rgba(59, 130, 246, 0.25);
  color: #4dabf7;
  border-color: rgba(77, 171, 247, 0.4);
}

/* =========================================================================
   8. Base button styles
   ========================================================================= */

.cco-calculator .cco-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--cco-btn-h);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--cco-radius-sm);
  background: var(--cco-bg-sci);
  color: var(--cco-text-sci);
  font-family: var(--cco-font);
  font-size: var(--cco-btn-font);
  font-weight: 500;
  cursor: pointer;
  padding: 0 2px;
  gap: 1px;
  transition:
    background var(--cco-trans),
    transform 60ms ease,
    box-shadow var(--cco-trans),
    color var(--cco-trans),
    border-color var(--cco-trans);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  box-shadow: var(--cco-shadow-btn);
  white-space: nowrap;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.cco-calculator .cco-btn:hover {
  background: var(--cco-bg-btn-hover);
  border-color: rgba(255,255,255,0.15);
  z-index: 1;
}

.cco-calculator .cco-btn:active {
  transform: scale(0.91);
  background: var(--cco-bg-btn-active);
  box-shadow: none;
}

.cco-calculator .cco-btn:focus-visible {
  outline: 2px solid var(--cco-border-focus);
  outline-offset: 2px;
  z-index: 2;
}

/* Primary / secondary label system */
.cco-calculator .cco-btn .cco-primary {
  font-size: var(--cco-btn-font-lg);
  font-weight: 600;
  line-height: 1;
}

.cco-calculator .cco-btn .cco-secondary {
  font-size: 0.52rem;
  font-weight: 600;
  color: var(--cco-text-secondary);
  line-height: 1;
  opacity: 0.90;
  position: absolute;
  top: -14px;
  left: 20%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.cco-calculator .cco-btn .cco-alpha-label {
  font-size: 0.50rem;
  font-weight: 600;
  color: var(--cco-text-alpha);
  line-height: 1;
  position: absolute;
  top: -14px;
  right: 0;
}

/* -------------------------------------------------------------------------
   SHIFT MODE
   ------------------------------------------------------------------------- */
.cco-calculator.cco-shift-mode .cco-has-shift .cco-secondary {
  color: var(--cco-text-shift-active);
  opacity: 1;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.8), 0 0 12px rgba(251, 191, 36, 0.4);
}

.cco-calculator.cco-shift-mode .cco-has-shift {
  border-color: rgba(251, 191, 36, 0.40);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.20), var(--cco-shadow-btn);
}

/* Dim non-shift buttons in shift mode */
.cco-calculator.cco-shift-mode .cco-btn:not(.cco-btn-shift):not(.cco-has-shift) {
  opacity: 0.35;
}

/* -------------------------------------------------------------------------
   ALPHA MODE
   ------------------------------------------------------------------------- */
.cco-calculator.cco-alpha-mode .cco-has-alpha .cco-alpha-label {
  color: var(--cco-text-alpha-active);
  opacity: 1;
  text-shadow: 0 0 6px rgba(244, 63, 94, 0.8), 0 0 12px rgba(244, 63, 94, 0.4);
}

.cco-calculator.cco-alpha-mode .cco-has-alpha {
  border-color: rgba(244, 63, 94, 0.40);
  box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.20), var(--cco-shadow-btn);
}

/* Dim non-alpha buttons in alpha mode */
.cco-calculator.cco-alpha-mode .cco-btn:not(.cco-btn-alpha):not(.cco-has-alpha) {
  opacity: 0.35;
}

/* =========================================================================
   9. Button variants
   ========================================================================= */

/* Numeric */
.cco-calculator .cco-btn-num {
  background: var(--cco-bg-num);
  color: var(--cco-text-num);
  font-size: 1.05rem;
  font-weight: 700;
  border: 1px solid var(--cco-border-num);
  box-shadow: var(--cco-shadow-btn-num);
}

.cco-calculator .cco-btn-num:hover {
  background: var(--cco-bg-num-hover);
  border-color: rgba(0,0,0,0.2);
}

.cco-calculator .cco-btn-num:active {
  background: #d0d2d8;
  box-shadow: none;
}

/* Scientific */
.cco-calculator .cco-btn-sci {
  background: var(--cco-bg-sci);
  color: var(--cco-text-sci);
  border-color: rgba(255,255,255,0.06);
}

.cco-calculator .cco-btn-sci:hover {
  background: var(--cco-bg-sci-hover);
}

/* Operators */
.cco-calculator .cco-btn-op {
  background: var(--cco-bg-op);
  color: var(--cco-text-op);
  font-size: 1.15rem;
  font-weight: 700;
  border: 1px solid var(--cco-border-num);
  box-shadow: var(--cco-shadow-btn-num);
}

.cco-calculator .cco-btn-op:hover {
  background: var(--cco-bg-op-hover);
}

.cco-calculator .cco-btn-op:active {
  background: #b5b8c5;
}

/* SHIFT button */
.cco-calculator .cco-btn-shift {
  background: var(--cco-bg-shift);
  color: var(--cco-text-shift);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  border-color: rgba(245, 158, 11, 0.25);
}

.cco-calculator .cco-btn-shift:hover {
  background: var(--cco-bg-shift-hover);
}

.cco-calculator .cco-btn-shift.cco-shift-active,
.cco-calculator .cco-btn-shift[aria-pressed="true"] {
  background: var(--cco-bg-shift-active);
  border-color: var(--cco-text-shift);
  color: var(--cco-text-shift-active);
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.3), var(--cco-shadow-btn);
}

/* ALPHA button */
.cco-calculator .cco-btn-alpha {
  background: var(--cco-bg-alpha);
  color: var(--cco-text-alpha);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  border-color: rgba(244, 114, 182, 0.25);
}

.cco-calculator .cco-btn-alpha:hover {
  background: var(--cco-bg-alpha-hover);
}

.cco-calculator .cco-btn-alpha.cco-alpha-active,
.cco-calculator .cco-btn-alpha[aria-pressed="true"] {
  background: #4d1535;
  border-color: var(--cco-text-alpha);
  color: var(--cco-text-alpha-active);
  box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.3), var(--cco-shadow-btn);
}

/* AC / Clear */
.cco-calculator .cco-btn-clear {
  background: var(--cco-bg-clear);
  color: var(--cco-text-clear);
  font-weight: 800;
  font-size: 0.82rem;
  border-color: #9b2c1e;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,100,100,0.2);
}

.cco-calculator .cco-btn-clear:hover {
  background: var(--cco-bg-clear-hover);
}

.cco-calculator .cco-btn-clear:active {
  background: #a93226;
}

/* DEL */
.cco-calculator .cco-btn-del {
  background: var(--cco-bg-del);
  color: var(--cco-text-del);
  font-weight: 800;
  font-size: 0.74rem;
  border-color: #a84300;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,150,50,0.2);
}

.cco-calculator .cco-btn-del:hover {
  background: var(--cco-bg-del-hover);
}

.cco-calculator .cco-btn-del:active {
  background: #b04500;
}

/* Equals */
.cco-calculator .cco-btn-equals {
  background: var(--cco-bg-equals);
  color: var(--cco-text-equals);
  border: 1px solid #1a6e32;
  font-size: 1.35rem;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(28, 140, 60, 0.45), inset 0 1px 0 rgba(100,220,120,0.2);
}

.cco-calculator .cco-btn-equals:hover {
  background: var(--cco-bg-equals-hover);
  box-shadow: 0 4px 14px rgba(28, 140, 60, 0.60), inset 0 1px 0 rgba(100,220,120,0.3);
  transform: translateY(-1px);
}

.cco-calculator .cco-btn-equals:active {
  transform: scale(0.93);
  box-shadow: none;
}

/* Memory */
.cco-calculator .cco-btn-mem {
  background: var(--cco-bg-mem);
  color: var(--cco-text-mem);
  font-size: 0.65rem;
  font-weight: 700;
}

.cco-calculator .cco-btn-mem:hover {
  background: var(--cco-bg-mem-hover);
}

/* Advanced mode buttons */
.cco-calculator .cco-btn-stat,
.cco-calculator .cco-btn-mat,
.cco-calculator .cco-btn-basen-op {
  background: var(--cco-bg-sci);
  color: var(--cco-text-sci);
  height: var(--cco-btn-h-sm);
  font-size: 0.72rem;
}

.cco-calculator .cco-btn-stat:hover,
.cco-calculator .cco-btn-mat:hover,
.cco-calculator .cco-btn-basen-op:hover {
  background: var(--cco-bg-sci-hover);
}

.cco-calculator .cco-eq-type {
  height: var(--cco-btn-h-sm);
  font-size: 0.68rem;
  background: var(--cco-bg-mode);
  color: var(--cco-text-dim);
  border-color: var(--cco-border);
}

.cco-calculator .cco-eq-type.cco-eq-type-active,
.cco-calculator .cco-eq-type[aria-pressed="true"] {
  background: var(--cco-bg-mode-active);
  color: var(--cco-text-accent);
}

/* =========================================================================
   10. Keypad layout
   ========================================================================= */

.cco-calculator .cco-panel-normal {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  background: transparent;
}

/* --- SCIENTIFIC SECTION (dark top) --- */
.cco-calculator .cco-sci-section {
  background: var(--cco-sci-section-bg);
  padding: 16px var(--cco-gap) 5px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- NUMERIC SECTION (lighter bottom) --- */
.cco-calculator .cco-num-section {
  background: var(--cco-num-section-bg);
  padding: 16px var(--cco-gap) 6px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 3px solid rgba(0,0,0,0.25);
}

/* Layout for all generic rows */
.cco-calculator .cco-keypad-row {
  display: grid;
  gap: var(--cco-gap-sm);
}

/* Nav row: SHIFT, ALPHA, D-Pad, SETUP, ON, CALC, Integral, x^-1, log */
.cco-calculator .cco-keypad-top-nav {
  grid-template-columns: 1fr 1fr auto 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--cco-gap);
  row-gap: 20px;
  align-items: center;
}

/* Ensure D-Pad spans two rows */
.cco-calculator .cco-dpad-wrapper {
  grid-column: 3;
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
}

/* Sci rows — 6 columns */
.cco-calculator .cco-sci-section .cco-keypad-row:not(.cco-keypad-top-nav) {
  grid-template-columns: repeat(6, 1fr);
}

/* Numeric section — 5 columns */
.cco-calculator .cco-num-section .cco-keypad-row {
  grid-template-columns: repeat(5, 1fr);
}

/* =========================================================================
   11. D-Pad
   ========================================================================= */

.cco-calculator .cco-dpad {
  position: relative;
  width: 86px;
  height: 76px;
  background: radial-gradient(circle, #3a3d4d 0%, #252733 100%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    0 4px 10px rgba(0,0,0,0.5),
    inset 0 2px 4px rgba(255,255,255,0.07),
    inset 0 -2px 4px rgba(0,0,0,0.3);
}

.cco-calculator .cco-dpad-center {
  width: 38%;
  height: 38%;
  background: radial-gradient(circle, #1e2030 0%, #151722 100%);
  border-radius: 50%;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
  z-index: 1;
}

.cco-calculator .cco-btn-dpad {
  position: absolute;
  background: transparent;
  border: none;
  color: #8b8fa8;
  cursor: pointer;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: color 80ms, transform 60ms;
  z-index: 2;
}

.cco-calculator .cco-btn-dpad:hover {
  color: #f59e0b;
}

.cco-calculator .cco-btn-dpad:active {
  transform: scale(0.85);
  color: #fbbf24;
}

.cco-calculator .cco-btn-dpad svg {
  width: 16px;
  height: 16px;
}

.cco-calculator .cco-dpad-up    { top: 3px;    left: 50%; transform: translateX(-50%); }
.cco-calculator .cco-dpad-down  { bottom: 3px; left: 50%; transform: translateX(-50%); }
.cco-calculator .cco-dpad-left  { left: 3px;   top: 50%;  transform: translateY(-50%); }
.cco-calculator .cco-dpad-right { right: 3px;  top: 50%;  transform: translateY(-50%); }

.cco-calculator .cco-btn-dpad:focus-visible {
  outline: 2px solid var(--cco-border-focus);
}

/* =========================================================================
   12. Advanced mode panels
   ========================================================================= */

.cco-calculator .cco-panel {
  background: #1e2030;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 10px;
}

.cco-calculator .cco-advanced-info p {
  font-size: 0.72rem;
  color: var(--cco-text-dim);
  margin: 0 0 8px;
}

.cco-calculator .cco-complex-btns,
.cco-calculator .cco-stat-btns,
.cco-calculator .cco-matrix-btns,
.cco-calculator .cco-basen-btns,
.cco-calculator .cco-basen-base-selector,
.cco-calculator .cco-eq-type-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cco-gap-sm);
}

.cco-calculator .cco-label {
  font-size: 0.72rem;
  color: var(--cco-text-dim);
  display: block;
  margin-bottom: 4px;
}

/* Statistics */
.cco-calculator .cco-stat-data-input {
  width: 100%;
  background: #151722;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--cco-radius-sm);
  color: var(--cco-text);
  font-family: var(--cco-font-mono);
  font-size: 0.78rem;
  padding: 6px;
  resize: vertical;
  box-sizing: border-box;
  margin-bottom: 6px;
}

.cco-calculator .cco-stat-data-input:focus {
  outline: 2px solid var(--cco-border-focus);
  border-color: transparent;
}

.cco-calculator .cco-stat-result,
.cco-calculator .cco-matrix-result,
.cco-calculator .cco-eq-result {
  margin-top: 8px;
  font-family: var(--cco-font-mono);
  font-size: 0.78rem;
  color: var(--cco-text-accent);
  white-space: pre-wrap;
  background: #151722;
  border-radius: var(--cco-radius-sm);
  padding: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  min-height: 32px;
  word-break: break-all;
}

/* Matrix */
.cco-calculator .cco-matrix-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.cco-calculator .cco-matrix-size {
  background: #151722;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--cco-text);
  border-radius: var(--cco-radius-sm);
  padding: 4px 8px;
  font-size: 0.78rem;
  cursor: pointer;
}

.cco-calculator .cco-matrix-size:focus {
  outline: 2px solid var(--cco-border-focus);
}

.cco-calculator .cco-matrix-inputs-wrapper {
  margin-bottom: 8px;
}

.cco-calculator .cco-matrix-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cco-text-dim);
  margin: 5px 0 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cco-calculator .cco-matrix-grid {
  display: grid;
  gap: 3px;
  margin-bottom: 6px;
}

.cco-calculator .cco-matrix-cell {
  background: #151722;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--cco-text);
  border-radius: var(--cco-radius-sm);
  padding: 4px;
  text-align: center;
  font-family: var(--cco-font-mono);
  font-size: 0.78rem;
  width: 100%;
  box-sizing: border-box;
}

.cco-calculator .cco-matrix-cell:focus {
  outline: 2px solid var(--cco-border-focus);
  border-color: transparent;
}

/* Equation */
.cco-calculator .cco-eq-type-label {
  font-size: 0.72rem;
  color: var(--cco-text-dim);
  font-family: var(--cco-font-mono);
  margin: 6px 0 5px;
}

.cco-calculator .cco-eq-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.cco-calculator .cco-eq-field label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.68rem;
  color: var(--cco-text-dim);
}

.cco-calculator .cco-eq-input {
  width: 56px;
  background: #151722;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--cco-text);
  border-radius: var(--cco-radius-sm);
  padding: 4px;
  font-family: var(--cco-font-mono);
  font-size: 0.78rem;
  text-align: right;
  box-sizing: border-box;
}

.cco-calculator .cco-eq-input:focus {
  outline: 2px solid var(--cco-border-focus);
}

.cco-calculator .cco-btn-eq-solve {
  width: 100%;
  margin-top: 4px;
  height: var(--cco-btn-h);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Base-N */
.cco-calculator .cco-basen-display {
  background: #151722;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--cco-radius-sm);
  padding: 6px;
  margin: 6px 0;
}

.cco-calculator .cco-basen-row {
  display: flex;
  gap: 8px;
  padding: 2px 0;
  font-family: var(--cco-font-mono);
  font-size: 0.78rem;
}

.cco-calculator .cco-basen-base-label {
  color: var(--cco-text-dim);
  width: 30px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.cco-calculator .cco-basen-val {
  color: var(--cco-text);
  word-break: break-all;
  flex: 1;
}

.cco-calculator .cco-basen-input-wrapper {
  margin-bottom: 6px;
}

.cco-calculator .cco-basen-input {
  width: 100%;
  background: #151722;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--cco-text);
  border-radius: var(--cco-radius-sm);
  padding: 6px;
  font-family: var(--cco-font-mono);
  font-size: 0.85rem;
  box-sizing: border-box;
}

.cco-calculator .cco-basen-input:focus {
  outline: 2px solid var(--cco-border-focus);
}

.cco-calculator .cco-basen-btn.cco-basen-active {
  background: var(--cco-bg-mode-active);
  color: var(--cco-text-accent);
  border-color: var(--cco-border-accent);
}

/* =========================================================================
   13. History sidebar
   ========================================================================= */

.cco-history-sidebar {
  flex: 1;
  min-width: 220px;
  max-width: 320px;
  background: var(--cco-shell-bg);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: var(--cco-radius-xl);
  box-shadow: 0 6px 24px rgba(0,0,0,0.40);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 578px;
  overflow-y: auto;
  font-family: var(--cco-font);
  color: var(--cco-text);
  align-self: stretch;
}

.cco-history-sidebar .cco-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
}

.cco-history-sidebar .cco-history-title {
  font-size: 0.80rem;
  font-weight: 700;
  color: var(--cco-text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cco-history-sidebar .cco-history-count {
  background: rgba(59, 130, 246, 0.25);
  color: var(--cco-text-accent);
  border-radius: 10px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-weight: 700;
}

.cco-history-sidebar .cco-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 7px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.cco-history-sidebar .cco-history-empty {
  font-size: 0.75rem;
  color: var(--cco-text-dim);
  text-align: center;
  padding: 28px 10px;
  margin: 0;
}

.cco-history-sidebar .cco-history-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--cco-radius-md);
  padding: 7px 9px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color var(--cco-trans);
  cursor: pointer;
}

.cco-history-sidebar .cco-history-item:hover {
  border-color: rgba(77, 171, 247, 0.4);
}

.cco-history-sidebar .cco-hist-num {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--cco-text-secondary);
  margin-bottom: 1px;
  letter-spacing: 0.05em;
}

.cco-history-sidebar .cco-hist-expr {
  font-family: var(--cco-font-mono);
  font-size: 0.74rem;
  color: #c8cad8;
  word-break: break-all;
}

.cco-history-sidebar .cco-hist-result {
  font-family: var(--cco-font-mono);
  font-size: 0.86rem;
  font-weight: 600;
  color: #ffffff;
  word-break: break-all;
}

.cco-history-sidebar .cco-hist-meta {
  font-size: 0.60rem;
  color: var(--cco-text-hist);
}

.cco-history-sidebar .cco-hist-actions {
  display: flex;
  gap: 3px;
  margin-top: 3px;
}

.cco-history-sidebar .cco-hist-restore,
.cco-history-sidebar .cco-hist-copy,
.cco-history-sidebar .cco-hist-delete {
  height: 22px;
  font-size: 0.62rem;
  padding: 0 6px;
  border-radius: var(--cco-radius-sm);
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  cursor: pointer;
  color: var(--cco-text-dim);
  transition: all var(--cco-trans);
  font-family: var(--cco-font);
}

.cco-history-sidebar .cco-hist-restore:hover { color: var(--cco-text-accent); border-color: var(--cco-border-accent); }
.cco-history-sidebar .cco-hist-copy:hover { color: #4ade80; border-color: #4ade80; }
.cco-history-sidebar .cco-hist-delete:hover { color: var(--cco-text-error); border-color: var(--cco-text-error); }

/* =========================================================================
   14. Keyboard help overlay
   ========================================================================= */

.cco-calculator .cco-history-panel,
.cco-calculator .cco-keyboard-help {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1e2030;
  border-radius: var(--cco-radius-xl);
  display: flex;
  flex-direction: column;
  z-index: 10;
  overflow: hidden;
}

.cco-calculator .cco-history-panel[hidden],
.cco-calculator .cco-keyboard-help[hidden] {
  display: none;
}

.cco-calculator .cco-history-header,
.cco-calculator .cco-help-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cco-calculator .cco-history-title,
.cco-calculator .cco-help-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--cco-text);
  margin: 0;
}

.cco-calculator .cco-btn-close-history,
.cco-calculator .cco-btn-close-help {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--cco-text-dim);
  border-radius: var(--cco-radius-sm);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all var(--cco-trans);
}

.cco-calculator .cco-btn-close-history:hover,
.cco-calculator .cco-btn-close-help:hover {
  background: rgba(255,255,255,0.08);
  color: var(--cco-text);
}

.cco-calculator .cco-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}

.cco-calculator .cco-history-empty {
  font-size: 0.78rem;
  color: var(--cco-text-dim);
  text-align: center;
  padding: 22px 0;
  margin: 0;
}

.cco-calculator .cco-history-item {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--cco-radius-md);
  padding: 7px 9px;
  margin-bottom: 5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color var(--cco-trans);
}

.cco-calculator .cco-history-item:hover {
  border-color: var(--cco-border-accent);
}

.cco-calculator .cco-hist-num {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--cco-text-secondary);
  margin-bottom: 1px;
  letter-spacing: 0.05em;
}

.cco-calculator .cco-hist-expr {
  font-family: var(--cco-font-mono);
  font-size: 0.78rem;
  color: var(--cco-text-dim);
  word-break: break-all;
}

.cco-calculator .cco-hist-result {
  font-family: var(--cco-font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--cco-text);
  word-break: break-all;
}

.cco-calculator .cco-hist-meta {
  font-size: 0.62rem;
  color: var(--cco-text-hist);
}

.cco-calculator .cco-hist-actions {
  display: flex;
  gap: 3px;
  margin-top: 3px;
}

.cco-calculator .cco-hist-restore,
.cco-calculator .cco-hist-copy,
.cco-calculator .cco-hist-delete {
  height: 22px;
  font-size: 0.64rem;
  padding: 0 6px;
  border-radius: var(--cco-radius-sm);
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  cursor: pointer;
  color: var(--cco-text-dim);
  transition: all var(--cco-trans);
  font-family: var(--cco-font);
}

.cco-calculator .cco-hist-restore:hover { color: var(--cco-text-accent); border-color: var(--cco-border-accent); }
.cco-calculator .cco-hist-copy:hover { color: #4ade80; border-color: #4ade80; }
.cco-calculator .cco-hist-delete:hover { color: var(--cco-text-error); border-color: var(--cco-text-error); }

.cco-calculator .cco-history-footer {
  padding: 7px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.cco-calculator .cco-btn-clear-history {
  width: 100%;
  height: var(--cco-btn-h-sm);
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--cco-radius-sm);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--cco-trans);
  font-family: var(--cco-font);
}

.cco-calculator .cco-btn-clear-history:hover {
  background: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
}

.cco-calculator .cco-help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
  margin: 6px 0;
}

.cco-calculator .cco-help-table th {
  text-align: left;
  color: var(--cco-text-dim);
  font-weight: 600;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cco-calculator .cco-help-table td {
  padding: 4px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--cco-text);
}

.cco-calculator .cco-help-table kbd {
  display: inline-block;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(77, 171, 247, 0.3);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: var(--cco-font-mono);
  font-size: 0.70rem;
  color: var(--cco-text-accent);
}

.cco-calculator .cco-keyboard-help {
  padding: 0;
}

.cco-calculator .cco-keyboard-help .cco-help-table {
  overflow-y: auto;
  display: block;
  flex: 1;
  margin: 0;
  padding: 8px;
}

/* =========================================================================
   15. Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .cco-calculator,
  .cco-calculator * {
    transition: none !important;
    animation: none !important;
  }
}

/* =========================================================================
   16. Responsive
   ========================================================================= */

@media (max-width: 680px) {
  .cco-outer-wrapper {
    flex-direction: column;
    align-items: center;
    max-width: 400px;
  }

  .cco-calculator {
    width: 100%;
    max-width: 400px;
    min-width: unset;
  }

  .cco-history-sidebar {
    width: 100%;
    max-width: 400px;
    align-self: auto;
    min-height: unset;
    max-height: 280px;
  }
}

@media (max-width: 390px) {
  .cco-calculator {
    border-radius: var(--cco-radius-md);
    --cco-btn-h: 32px;
    --cco-btn-font: 0.62rem;
    --cco-btn-font-lg: 0.74rem;
    --cco-display-font: 1.75rem;
    --cco-gap-sm: 3px;
    --cco-gap: 3px;
  }

  .cco-calculator .cco-display-result {
    font-size: var(--cco-display-font);
  }
}

/* Landscape mobile */
@media (max-height: 600px) and (orientation: landscape) {
  .cco-calculator {
    --cco-btn-h: 30px;
    --cco-display-font: 1.5rem;
  }

  .cco-calculator .cco-display {
    min-height: 55px;
    padding: 5px 12px 4px;
  }

  .cco-calculator .cco-sci-section,
  .cco-calculator .cco-num-section {
    padding: var(--cco-gap-sm);
  }
}

/* =========================================================================
   17. Print
   ========================================================================= */

@media print {
  .cco-outer-wrapper,
  .cco-calculator {
    display: none;
  }
}

/* =========================================================================
   18. Cursor
   ========================================================================= */

.cco-cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: var(--cco-text);
  vertical-align: middle;
  animation: cco-blink 1s step-end infinite;
  margin-left: 1px;
  margin-right: 1px;
}

@keyframes cco-blink {
  50% { opacity: 0; }
}