/* ==========================================================================
   TI-84 Plus CE style online calculator — styles
   Namespaced under .ti84 so it stays safe inside any WordPress theme.
   ========================================================================== */
.ti84 * { box-sizing: border-box; margin: 0; padding: 0; }
.ti84 {
  --body: #14171c;
  --body2: #0c0e12;
  --blue: #2f7fd6;    /* 2nd */
  --green: #46b45e;   /* alpha */
  --key: #1c2026;
  --key2: #23282f;
  --white-key: #f3f5f8;
  --gray-key: #c9cdd3;
  --screen: #ffffff;
  --screen-ink: #111;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: #fff; width: 100%; padding: 8px;
  display: flex; flex-direction: column; align-items: center;
}
.ti84 .wrap { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; align-items: flex-start; width: 100%; }

/* ---- calculator body --------------------------------------------------- */
.ti84 .calc {
  width: 360px; max-width: 100%;
  background: linear-gradient(165deg, var(--body), var(--body2));
  border-radius: 30px; padding: 18px 16px 16px;
  box-shadow: 0 20px 45px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05);
  border: 1px solid #05070a; user-select: none;
}

/* ---- screen (TI-84 CE color LCD) --------------------------------------- */
.ti84 .screen {
  background: var(--screen); border-radius: 6px; padding: 0; overflow: hidden;
  color: var(--screen-ink); height: 240px; position: relative;
  font-family: "DejaVu Sans Mono", "Courier New", monospace; font-size: 15px;
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 3px #000, 0 2px 6px rgba(0,0,0,.4);
  border: 4px solid #000;
}
.ti84 .statusbar {
  background: #7d7f83; color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .3px; padding: 3px 6px; display: flex; justify-content: space-between;
  align-items: center; font-family: "Segoe UI", monospace;
}
.ti84 .statusbar .batt { color: #2ec24e; font-size: 12px; }
/* content flows from the TOP of the screen */
.ti84 .screen-body { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; align-items: stretch; padding: 6px 8px; }
.ti84 .hist { display: flex; flex-direction: column; }
.ti84 .hist .row { white-space: pre-wrap; word-break: break-word; color: #000; font-weight: 700; }
.ti84 .hist .ans { text-align: right; font-weight: 800; color: #000; margin-bottom: 2px; }
.ti84 .hist .err { color: #c01414; }
.ti84 .entry-line { display: flex; align-items: center; }
.ti84 .entry-line .prompt::before { content: ''; }
.ti84 .entry {
  flex: 1; background: transparent; border: none; outline: none; color: #000;
  font: inherit; font-weight: 700; caret-color: #000; overflow-x: auto; white-space: nowrap;
}
.ti84 .entry::placeholder { color: #9aa2ab; font-weight: 500; }
/* functional dropdown menus (MATH / APPS / PRGM / VARS / STAT) */
.ti84 .calcmenu {
  position: absolute; left: 8px; top: 26px; width: 236px; max-height: 210px; overflow-y: auto;
  background: #fff; border: 2px solid var(--blue); border-radius: 6px; display: none; z-index: 20;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.ti84 .calcmenu.show { display: block; }
.ti84 .calcmenu .cm-title { background: var(--blue); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 10px; position: sticky; top: 0; }
.ti84 .calcmenu .cm-item {
  display: block; width: 100%; text-align: left; border: none; background: #fff; cursor: pointer;
  padding: 7px 10px; font-family: monospace; font-size: 12px; color: #111; border-bottom: 1px solid #eef; font-weight: 600;
}
.ti84 .calcmenu .cm-item:hover:not(:disabled) { background: var(--blue); color: #fff; }
.ti84 .calcmenu .cm-item.note { color: #8a93a0; font-style: italic; cursor: default; font-weight: 500; }
.ti84 .calcmenu .cm-tabs { display: flex; position: sticky; top: 21px; background: #eef2f7; border-bottom: 1px solid #d3dae3; }
.ti84 .calcmenu .cm-tab { flex: 1; border: none; background: #eef2f7; color: #556; font-size: 10px; font-weight: 700; padding: 5px 2px; cursor: pointer; border-right: 1px solid #d3dae3; }
.ti84 .calcmenu .cm-tab:last-child { border-right: none; }
.ti84 .calcmenu .cm-tab.active { background: #fff; color: var(--blue); box-shadow: inset 0 -2px 0 var(--blue); }
.ti84 .calcmenu .cm-list { display: flex; flex-direction: column; }

/* ---- STAT panel -------------------------------------------------------- */
.ti84 .statspanel { width: 470px; max-width: 100%; background: #171a20; border-radius: 16px; padding: 16px; border: 1px solid #23272e; box-shadow: 0 12px 30px rgba(0,0,0,.3); display: none; }
.ti84 .statspanel.show { display: block; }
.ti84 .statspanel h3 { font-size: 14px; margin-bottom: 12px; color: #cbd3dd; }
.ti84 .statrow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ti84 .statrow label { width: 24px; font-size: 13px; color: #9fb4d0; font-family: monospace; }
.ti84 .statrow input { flex: 1; background: #0e1116; border: 1px solid #2a2f38; border-radius: 6px; color: #d8f0d0; padding: 7px 9px; font-family: monospace; font-size: 13px; outline: none; }
.ti84 .statrow input:focus { border-color: var(--blue); }
.ti84 .stat-result { margin-top: 12px; background: #0b0e13; border-radius: 8px; padding: 12px; color: #d8f0d0; font-family: "DejaVu Sans Mono", monospace; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; min-height: 20px; border: 1px solid #23272e; }
.ti84.light .statspanel { background: #f3f5f8; border-color: #dde2ea; }
.ti84.light .statspanel h3 { color: #333; }
.ti84.light .statrow input { background: #fff; color: #1a1d22; border-color: #cfd6df; }
.ti84.light .stat-result { background: #fff; color: #1a1d22; border-color: #dde2ea; }

/* ---- Finance (TVM) panel ----------------------------------------------- */
.ti84 .financepanel { width: 470px; max-width: 100%; background: #171a20; border-radius: 16px; padding: 16px; border: 1px solid #23272e; box-shadow: 0 12px 30px rgba(0,0,0,.3); display: none; }
.ti84 .financepanel.show { display: block; }
.ti84 .financepanel h3 { font-size: 14px; margin-bottom: 6px; color: #cbd3dd; }
.ti84 .fin-hint { font-size: 11px; color: #7a8590; margin-bottom: 12px; }
.ti84 .fin-grid { display: flex; flex-direction: column; gap: 8px; }
.ti84 .fin-row { display: flex; align-items: center; gap: 8px; }
.ti84 .fin-row label { flex: 1; font-size: 12px; color: #9fb4d0; font-family: monospace; }
.ti84 .fin-row input { width: 110px; background: #0e1116; border: 1px solid #2a2f38; border-radius: 6px; color: #d8f0d0; padding: 6px 9px; font-family: monospace; font-size: 13px; outline: none; }
.ti84 .fin-row input:focus { border-color: var(--blue); }
.ti84 .fin-solve { background: #2a2f38; color: #cbd3dd; border: none; border-radius: 6px; padding: 6px 10px; font-size: 11px; font-weight: 600; cursor: pointer; width: 78px; }
.ti84 .fin-solve:hover { background: var(--blue); color: #fff; }
.ti84 .fin-result { margin-top: 12px; background: #0b0e13; border-radius: 8px; padding: 12px; color: #8fd3ff; font-family: monospace; font-size: 14px; font-weight: 700; min-height: 20px; border: 1px solid #23272e; }
.ti84.light .financepanel { background: #f3f5f8; border-color: #dde2ea; }
.ti84.light .financepanel h3 { color: #333; }
.ti84.light .fin-row input { background: #fff; color: #1a1d22; border-color: #cfd6df; }
.ti84.light .fin-result { background: #fff; color: #14507f; border-color: #dde2ea; }

/* ---- MODE settings screen ---------------------------------------------- */
.ti84 .modescreen {
  position: absolute; inset: 18px 0 0 0; background: #fff; z-index: 25; display: none;
  flex-direction: column; padding: 6px 10px; overflow-y: auto; color: #111;
  font-family: "DejaVu Sans Mono", "Courier New", monospace;
}
.ti84 .modescreen.show { display: flex; }
.ti84 .modescreen .ms-title { text-align: center; font-weight: 800; font-size: 13px; border-bottom: 1px solid #ccc; padding-bottom: 3px; margin-bottom: 5px; letter-spacing: 1px; }
.ti84 .modescreen .ms-row { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 3px 2px; font-size: 13px; font-weight: 700; }
.ti84 .modescreen .ms-opt { cursor: pointer; padding: 0 3px; border-radius: 3px; color: #555; }
.ti84 .modescreen .ms-opt.active { background: #111; color: #fff; }
.ti84 .modescreen .ms-opt:hover { color: #111; }
.ti84 .modescreen .ms-opt.active:hover { color: #fff; }
.ti84 .modescreen .ms-foot { margin-top: auto; display: flex; justify-content: center; padding-top: 6px; }
.ti84 .modescreen .ms-done { background: var(--blue); color: #fff; border: none; border-radius: 6px; padding: 5px 20px; font-weight: 700; cursor: pointer; font-family: inherit; }

/* ---- keypad ------------------------------------------------------------ */
.ti84 .pad-fn, .ti84 .pad-main { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.ti84 .pad-fn { margin-top: 16px; }
.ti84 .pad-mid {
  display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 7px; margin: 7px 0;
}
.ti84 .pad-main { margin-top: 0; }

.ti84 button.k {
  position: relative; border: none; border-radius: 8px;
  background: linear-gradient(180deg, var(--key2), var(--key));
  color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  padding: 13px 3px 9px; min-height: 44px;
  box-shadow: 0 2px 0 #04060a, 0 3px 5px rgba(0,0,0,.35);
  transition: transform .04s, box-shadow .04s;
}
.ti84 button.k:active { transform: translateY(2px); box-shadow: 0 0 0 #04060a; }
.ti84 button.k .main { position: relative; z-index: 1; }
.ti84 button.k .sec { position: absolute; top: 3px; left: 5px; font-size: 8.5px; color: var(--blue); font-weight: 700; letter-spacing: .2px; }
.ti84 button.k .alp { position: absolute; top: 3px; right: 5px; font-size: 8.5px; color: var(--green); font-weight: 700; }

.ti84 button.k.num, .ti84 button.k.fnkey { background: linear-gradient(180deg, #fff, var(--white-key)); color: #14171c; box-shadow: 0 2px 0 #a9adb4, 0 3px 5px rgba(0,0,0,.25); }
.ti84 button.k.fnkey { background: linear-gradient(180deg, #eef0f3, #d7dbe0); color: #14171c; font-size: 12px; }
.ti84 button.k.op { background: linear-gradient(180deg, #d3d7dd, var(--gray-key)); color: #14171c; box-shadow: 0 2px 0 #9297a0, 0 3px 5px rgba(0,0,0,.25); }
.ti84 button.k.blue { background: linear-gradient(180deg, #3f92e6, var(--blue)); }
.ti84 button.k.green { background: linear-gradient(180deg, #56c56e, var(--green)); }
.ti84 button.k.clear { background: linear-gradient(180deg, #d3d7dd, var(--gray-key)); color: #14171c; box-shadow: 0 0 0 2px #d63a2f, 0 2px 0 #9297a0, 0 3px 5px rgba(0,0,0,.25); }
.ti84 button.k.enter { background: linear-gradient(180deg, #d3d7dd, var(--gray-key)); color: #14171c; box-shadow: 0 2px 0 #9297a0, 0 3px 5px rgba(0,0,0,.25); }
.ti84 button.k.small { font-size: 12px; }
.ti84 button.k.tiny { font-size: 9.5px; }

.ti84 button.k.active { outline: 2px solid #fff; outline-offset: 1px; }
.ti84.mode-2nd button.k .sec { color: #fff; background: var(--blue); border-radius: 2px; padding: 0 1px; }
.ti84.mode-alpha button.k .alp { color: #fff; background: var(--green); border-radius: 2px; padding: 0 1px; }

/* ---- D-pad ------------------------------------------------------------- */
.ti84 .dpad {
  grid-column: 4 / 6; grid-row: 1 / 3;
  position: relative; align-self: center; justify-self: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #2b3038, #14171c);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.4);
}
.ti84 .dpad .darrow {
  position: absolute; border: none; background: #e9ecf0; color: #14171c; cursor: pointer;
  width: 30px; height: 30px; font-size: 12px; display: flex; align-items: center; justify-content: center;
}
.ti84 .dpad .d-up { top: 0; left: 33px; border-radius: 8px 8px 3px 3px; }
.ti84 .dpad .d-down { bottom: 0; left: 33px; border-radius: 3px 3px 8px 8px; }
.ti84 .dpad .d-left { left: 0; top: 33px; border-radius: 8px 3px 3px 8px; }
.ti84 .dpad .d-right { right: 0; top: 33px; border-radius: 3px 8px 8px 3px; }
.ti84 .dpad .darrow:active { background: #b9bfc7; }
.ti84 .dpad .dcenter { position: absolute; left: 33px; top: 33px; width: 30px; height: 30px; border-radius: 50%; background: #0c0e12; box-shadow: inset 0 2px 5px rgba(0,0,0,.7); }

/* ---- footer / theme ---------------------------------------------------- */
.ti84 .foot { display: flex; justify-content: center; margin-top: 12px; }
.ti84 .themebtn { background: #23282f; color: #cbd3dd; border: 1px solid #333; border-radius: 20px; padding: 5px 14px; font-size: 12px; cursor: pointer; }

/* ---- graph panel ------------------------------------------------------- */
.ti84 .graphpanel { width: 470px; max-width: 100%; background: #171a20; border-radius: 16px; padding: 16px; border: 1px solid #23272e; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.ti84 .graphpanel h3 { font-size: 14px; margin-bottom: 10px; color: #cbd3dd; display: flex; justify-content: space-between; align-items: center; }
.ti84 .graphpanel .ymeta { font-size: 11px; color: #7a8590; }
.ti84 .yeditor { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; max-height: 230px; overflow-y: auto; padding-right: 4px; }
.ti84 .yrow { display: flex; align-items: center; gap: 8px; }
.ti84 .yrow label { width: 34px; font-size: 12px; color: #9fb4d0; font-family: monospace; }
.ti84 .yrow input[type=text] { flex: 1; background: #0e1116; border: 1px solid #2a2f38; border-radius: 6px; color: #d8f0d0; padding: 6px 9px; font-family: monospace; font-size: 13px; outline: none; }
.ti84 .yrow input[type=text]:focus { border-color: var(--blue); }
.ti84 .yrow .swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.ti84 canvas { width: 100%; background: #0b0e13; border-radius: 10px; display: block; }
.ti84 .winrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.ti84 .winrow .field { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #9aa4b1; }
.ti84 .winrow .field input { width: 58px; background: #0e1116; border: 1px solid #2a2f38; border-radius: 5px; color: #e8eef6; padding: 4px 6px; font-size: 12px; outline: none; }
.ti84 .btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ti84 .btns button { background: var(--blue); color: #fff; border: none; border-radius: 7px; padding: 8px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ti84 .btns button.ghost { background: #2a2f38; }
.ti84 .btns button.active { background: var(--green); }
.ti84 .btns button:hover { filter: brightness(1.1); }
.ti84 .trace-readout { font-family: monospace; font-size: 12px; color: #8fd3ff; margin-top: 8px; min-height: 16px; }

/* ---- light mode -------------------------------------------------------- */
.ti84.light .graphpanel { background: #f3f5f8; border-color: #dde2ea; }
.ti84.light .graphpanel h3 { color: #333; }
.ti84.light .yrow input[type=text], .ti84.light .winrow .field input { background: #fff; color: #1a1d22; border-color: #cfd6df; }
.ti84.light canvas { background: #fff; }
.ti84.light .winrow .field { color: #556; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 520px) {
  .ti84 .calc { width: 100%; }
  .ti84 button.k { font-size: 14px; padding: 12px 2px 8px; }
  .ti84 .dpad { width: 84px; height: 84px; }
  .ti84 .dpad .darrow { width: 26px; height: 26px; }
  .ti84 .dpad .d-up, .ti84 .dpad .d-down { left: 29px; }
  .ti84 .dpad .d-left, .ti84 .dpad .d-right { top: 29px; }
  .ti84 .dpad .dcenter { left: 29px; top: 29px; width: 26px; height: 26px; }
  .ti84 .graphpanel { width: 100%; }
}