/* ================================================================
   MTP Scientific Calculator - Plugin Stylesheet
   MathThought.com | An Education That Counts (R)
   ================================================================ */

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

:root {
  --mtp-ink:     #0e0c09;
  --mtp-tan:     #c4ad82;
  --mtp-gold:    #c9a84c;
  --mtp-gold-dk: #9a7830;
  --mtp-paper:   #faf7f2;
}

/* Launch button — typography/sizing/colors controlled by MTP Calculator Settings */
.mtp-calc-wrap .mtp-launch-btn {
  border: 1.5px solid var(--mtp-gold-dk);
  background: transparent;
  color: var(--mtp-gold);
  cursor: pointer;
  transition: all .18s;
  /* Fallback typography in case settings CSS hasn't fired yet */
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 12px 28px;
  border-radius: 8px;
}
.mtp-calc-wrap .mtp-launch-btn:hover {
  background: rgba(201,168,76,.1);
  border-color: var(--mtp-gold);
}

/* ---- Calculator window ---- */
#mtp-calc {
  position: fixed;
  top: 60px;
  right: 40px;
  width: 420px;
  background: #141210;
  border: 1px solid rgba(201,168,76,.3);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(201,168,76,.06);
  z-index: 99999;
  display: none;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  box-sizing: border-box;
}
#mtp-calc *, #mtp-calc *::before, #mtp-calc *::after { box-sizing: border-box; }
#mtp-calc.open { display: flex; animation: mtpPop .18s cubic-bezier(.34,1.56,.64,1); }
@keyframes mtpPop { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }

/* Title bar */
.c-bar { background: linear-gradient(90deg,#1e1a12,#2a2218); border-bottom: 1px solid rgba(201,168,76,.15); padding: 9px 14px; display: flex; align-items: center; justify-content: space-between; cursor: grab; flex-shrink: 0; }
.c-bar:active { cursor: grabbing; }
.c-title { font-family: 'Caveat', cursive; font-size: 16px; font-weight: 700; color: var(--mtp-gold); }
.c-x { background: none; border: none; color: rgba(255,255,255,.3); font-size: 20px; cursor: pointer; line-height: 1; padding: 0; transition: color .15s; }
.c-x:hover { color: var(--mtp-paper); }

/* Display */
.c-disp-wrap { background: #0a0806; padding: 8px 14px 6px; flex-shrink: 0; }
.c-hist { font-size: 11px; color: rgba(250,247,242,.25); text-align: right; min-height: 16px; font-family: 'Nunito', sans-serif; }
.c-disp { font-size: 30px; font-weight: 700; color: var(--mtp-gold); text-align: right; font-family: 'Nunito', sans-serif; min-height: 42px; line-height: 1.2; word-break: break-all; }

/* Memory bar */
.c-mem-bar { background: #0e0c09; border-bottom: 1px solid rgba(255,255,255,.04); padding: 4px 14px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.c-mem-label { font-size: 10px; color: rgba(100,180,220,.5); font-family: 'Nunito', sans-serif; }
.c-mem-btns { display: flex; gap: 4px; }
.c-mem-btns button { font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(100,150,200,.2); background: rgba(100,150,200,.07); color: rgba(150,190,230,.6); cursor: pointer; transition: all .15s; }
.c-mem-btns button:hover { background: rgba(100,150,200,.15); color: rgba(150,190,230,.9); }

/* Tabs */
.c-tabs { display: flex; background: #0e0c09; border-bottom: 1px solid rgba(255,255,255,.04); flex-shrink: 0; }
.c-tab { flex: 1; padding: 7px 2px; text-align: center; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: rgba(250,247,242,.22); cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent; transition: all .15s; font-family: 'Nunito', sans-serif; }
.c-tab.on { color: var(--mtp-gold); border-bottom-color: var(--mtp-gold); }

/* Panels */
.c-panel { display: none; padding: 10px 10px 12px; flex-direction: column; gap: 6px; overflow-y: auto; max-height: calc(100vh - 220px); }
.c-panel.on { display: flex; }
.c-panel::-webkit-scrollbar { width: 3px; }
.c-panel::-webkit-scrollbar-thumb { background: rgba(201,168,76,.2); border-radius: 2px; }

/* Labels and dividers */
.sec-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(201,168,76,.4); padding: 2px 4px; font-family: 'Nunito', sans-serif; }
.sec-divider { height: 1px; background: linear-gradient(90deg,transparent,rgba(201,168,76,.2) 20%,rgba(201,168,76,.2) 80%,transparent); margin: 2px 0; }

/* Grid layouts */
.g { display: grid; gap: 5px; }
.g3 { grid-template-columns: repeat(3,1fr); }
.g4 { grid-template-columns: repeat(4,1fr); }
.g5 { grid-template-columns: repeat(5,1fr); }

/* Fn / Inv split layout */
.fn-inv-wrap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; align-items: start; }
.fn-inv-sep { width: 1px; background: linear-gradient(180deg,transparent,rgba(201,168,76,.25) 20%,rgba(201,168,76,.25) 80%,transparent); margin: 0 6px; align-self: stretch; }
.fn-col-head { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; padding: 2px 4px 5px; display: flex; align-items: center; gap: 5px; font-family: 'Nunito', sans-serif; }
.fn-col-head-fn  { color: rgba(201,168,76,.45); }
.fn-col-head-inv { color: rgba(100,180,220,.45); justify-content: flex-end; }

/* Buttons - base */
.b { padding: 9px 2px; border-radius: 7px; font-size: 11.5px; font-weight: 700; cursor: pointer; border: none; transition: all .15s; font-family: 'Nunito', sans-serif; line-height: 1; min-height: 34px; outline: none; }
.b:hover { transform: translateY(-1px); }
.b:active { transform: translateY(0); }

/* Button variants */
.b-fn  { background: rgba(201,168,76,.08); color: rgba(250,247,242,.6); border: 1px solid rgba(201,168,76,.12); }
.b-fn:hover { background: rgba(201,168,76,.18); color: var(--mtp-gold); }
.b-inv { background: rgba(100,160,220,.07); color: rgba(140,190,240,.65); border: 1px solid rgba(100,160,220,.15); font-size: 10.5px; }
.b-inv:hover { background: rgba(100,160,220,.16); color: rgba(160,210,255,.9); }
.b-op  { background: rgba(201,168,76,.13); color: var(--mtp-gold); border: 1px solid rgba(201,168,76,.22); }
.b-op:hover { background: rgba(201,168,76,.25); }
.b-num { background: #1e1a14; color: var(--mtp-paper); border: 1px solid rgba(255,255,255,.06); }
.b-num:hover { background: #2a2418; }
.b-eq  { background: linear-gradient(135deg,var(--mtp-gold),var(--mtp-gold-dk)); color: var(--mtp-ink); font-weight: 900; font-size: 15px; }
.b-eq:hover { background: linear-gradient(135deg,#d4ae52,var(--mtp-gold)); box-shadow: 0 4px 12px rgba(201,168,76,.3); }
.b-clr { background: rgba(200,60,40,.14); color: #e88; border: 1px solid rgba(200,60,40,.22); }
.b-clr:hover { background: rgba(200,60,40,.26); }
.b-back { background: rgba(255,255,255,.05); color: rgba(250,247,242,.5); border: 1px solid rgba(255,255,255,.07); }
.b-back:hover { background: rgba(255,255,255,.1); color: var(--mtp-paper); }
.b-const { background: rgba(80,160,100,.08); color: rgba(120,200,140,.7); border: 1px solid rgba(80,160,100,.15); font-size: 11px; }
.b-const:hover { background: rgba(80,160,100,.18); color: rgba(140,220,160,.9); }
.b-s2 { grid-column: span 2; }
.b-s3 { grid-column: span 3; }

/* Matrix buttons */
.b-mx-mat { background: rgba(40,190,170,.08); color: rgba(80,220,200,.7); border: 1px solid rgba(40,190,170,.18); font-size: 11px; }
.b-mx-mat:hover { background: rgba(40,190,170,.18); color: rgba(100,240,220,.95); }
.b-mx-num { background: rgba(201,168,76,.09); color: rgba(220,185,90,.75); border: 1px solid rgba(201,168,76,.2); font-size: 11px; }
.b-mx-num:hover { background: rgba(201,168,76,.2); color: var(--mtp-gold); }
.b-mx-set { background: rgba(50,130,220,.09); color: rgba(110,185,255,.75); border: 1px solid rgba(50,130,220,.2); font-size: 11px; }
.b-mx-set:hover { background: rgba(50,130,220,.2); color: rgba(150,210,255,.95); }
.b-mx-eig { background: rgba(190,110,240,.1); color: rgba(210,150,255,.8); border: 1px solid rgba(190,110,240,.22); font-size: 11px; }
.b-mx-eig:hover { background: rgba(190,110,240,.22); color: rgba(225,175,255,.98); }
.b-mx-svd { background: rgba(100,180,220,.1); color: rgba(140,210,240,.75); border: 1px solid rgba(100,180,220,.22); font-size: 11px; }
.b-mx-svd:hover { background: rgba(100,180,220,.22); color: rgba(170,230,255,.98); }

/* Deg/Rad inline mode switcher */
.c-modes-inline { display: flex; gap: 6px; padding: 6px 0 5px; }
.c-mode-inline { flex: 1; padding: 9px 5px; border-radius: 7px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; border: 2px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); color: rgba(250,247,242,.4); transition: all .15s; font-family: 'Nunito', sans-serif; min-height: 38px; }
.c-mode-inline:hover { background: rgba(201,168,76,.08); color: rgba(250,247,242,.65); border-color: rgba(201,168,76,.3); }
.c-mode-inline.on { background: rgba(201,168,76,.18); color: var(--mtp-gold); border-color: var(--mtp-gold); box-shadow: 0 0 8px rgba(201,168,76,.2); }

/* Matrix grid */
.mx-sel { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 700; background: #1e1a14; color: var(--mtp-gold); border: 1px solid rgba(201,168,76,.22); border-radius: 5px; padding: 4px 6px; cursor: pointer; }
.mx-grid { border-collapse: collapse; margin: 4px 0; }
.mx-grid td { padding: 2px !important; margin: 0 !important; }
.mx-cell { width: 38px !important; height: 26px !important; min-width: 0 !important; max-width: 38px !important; padding: 0 2px !important; box-sizing: border-box !important; background: #1e1a14; border: 1px solid rgba(201,168,76,.15); border-radius: 5px; text-align: center; font-family: 'Nunito', sans-serif; font-size: 11px !important; font-weight: 700; color: var(--mtp-paper); outline: none; transition: border-color .15s, background .15s; }
.mx-cell:focus { border-color: var(--mtp-gold); background: #2a2418; }
/* Prevent flex panel from stretching the matrix table */
#mtp-calc #mx-grid-wrap { display: inline-block !important; width: auto !important; align-self: flex-start; }
#mtp-calc #mx-grid-wrap table { width: auto !important; }
#mtp-calc #mx-grid-wrap td { width: auto !important; }
.mx-bracket { font-size: 28px; color: rgba(201,168,76,.35); vertical-align: middle; padding: 0 1px !important; font-weight: 300; line-height: 1; width: 10px !important; }
.mx-result-box { background: #0e0c09; border: 1px solid rgba(201,168,76,.12); border-radius: 7px; padding: 10px 12px; font-size: 12px; font-family: 'Nunito', sans-serif; color: rgba(250,247,242,.6); line-height: 1.65; max-height: 160px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; min-height: 48px; }
.mx-result-box::-webkit-scrollbar { width: 4px; }
.mx-result-box::-webkit-scrollbar-thumb { background: rgba(201,168,76,.2); border-radius: 2px; }
.mx-val { color: var(--mtp-gold); font-weight: 700; }
.mx-lbl { color: rgba(250,247,242,.35); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }

/* Settings button and dropdown */
.c-set-btn { background: none; border: none; color: rgba(250,247,242,.4); font-size: 16px; cursor: pointer; padding: 2px 5px; line-height: 1; transition: color .15s; border-radius: 4px; }
.c-set-btn:hover { color: var(--mtp-gold); }
.c-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; width: 210px; background: #1e1a12; border: 1px solid rgba(201,168,76,.25); border-radius: 10px; box-shadow: 0 12px 36px rgba(0,0,0,.6); z-index: 100001; overflow: hidden; animation: mtpDdPop .15s cubic-bezier(.34,1.4,.64,1); }
@keyframes mtpDdPop { from{opacity:0;transform:translateY(-6px)scale(.97)} to{opacity:1;transform:none} }
.c-dropdown.open { display: block; }
.c-dd-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(201,168,76,.45); padding: 10px 14px 4px; font-family: 'Nunito', sans-serif; }
.c-dd-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; gap: 10px; transition: background .12s; cursor: default; }
.c-dd-row:hover { background: rgba(201,168,76,.06); }
.c-dd-txt { font-size: 12px; font-weight: 600; color: rgba(250,247,242,.7); font-family: 'Nunito', sans-serif; }
.c-dd-btn { font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 5px; border: 1px solid rgba(201,168,76,.22); background: rgba(201,168,76,.08); color: var(--mtp-gold); cursor: pointer; transition: all .15s; }
.c-dd-btn:hover { background: rgba(201,168,76,.2); }
.c-dd-sep { height: 1px; background: rgba(201,168,76,.1); margin: 4px 0; }
.c-dd-arrow { font-size: 16px; color: rgba(201,168,76,.4); }
.c-dd-toggle { width: 36px; height: 20px; border-radius: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); position: relative; flex-shrink: 0; transition: background .2s, border-color .2s; cursor: pointer; }
.c-dd-toggle.on { background: rgba(201,168,76,.35); border-color: var(--mtp-gold-dk); }
.c-dd-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.4); transition: left .2s, background .2s; }
.c-dd-toggle.on .c-dd-knob { left: 18px; background: var(--mtp-gold); }
.c-dd-copy { font-size: 9px; color: rgba(250,247,242,.55); text-align: center; padding: 6px 14px 10px; line-height: 1.7; font-family: 'Nunito', sans-serif; }
.c-dd-copy sup { font-size: 7px; }

/* Minimize */
.c-min-btn { background: none; border: none; color: rgba(250,247,242,.35); font-size: 15px; cursor: pointer; padding: 2px 5px; line-height: 1; transition: color .15s; border-radius: 4px; font-family: 'Nunito', sans-serif; font-weight: 900; letter-spacing: -.02em; }
.c-min-btn:hover { color: var(--mtp-gold); }
.c-mini-disp { display: none; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700; color: var(--mtp-gold); padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
#mtp-calc.minimized .c-mini-disp { display: block; }
#mtp-calc.minimized .c-disp-wrap,
#mtp-calc.minimized .c-mem-bar,
#mtp-calc.minimized .c-tabs,
#mtp-calc.minimized .c-panel { display: none !important; }
#mtp-calc.minimized { width: 280px; }

/* Font sizes */
#mtp-calc.fs-sm .b { font-size: 10px; }
#mtp-calc.fs-sm .c-disp { font-size: 26px; }
#mtp-calc.fs-md .b { font-size: 11.5px; }
#mtp-calc.fs-md .c-disp { font-size: 30px; }
#mtp-calc.fs-lg .b { font-size: 13.5px; padding: 10px 2px; min-height: 38px; }
#mtp-calc.fs-lg .c-disp { font-size: 34px; }
#mtp-calc.fs-xl .b { font-size: 15px; padding: 12px 2px; min-height: 42px; }
#mtp-calc.fs-xl .c-disp { font-size: 38px; }

/* Button glow */
#mtp-calc.glow-on .b:active              { filter: brightness(1.18); transform: scale(.97); }
#mtp-calc.glow-on .b-fn:active           { box-shadow: 0 0 12px 3px rgba(201,168,76,.5); }
#mtp-calc.glow-on .b-num:active          { box-shadow: 0 0 10px 3px rgba(250,247,242,.25); }
#mtp-calc.glow-on .b-op:active           { box-shadow: 0 0 12px 3px rgba(201,168,76,.6); }
#mtp-calc.glow-on .b-eq:active           { box-shadow: 0 0 16px 5px rgba(201,168,76,.75); }
#mtp-calc.glow-on .b-clr:active          { box-shadow: 0 0 12px 3px rgba(200,60,40,.6); }
#mtp-calc.glow-on .b-const:active        { box-shadow: 0 0 12px 3px rgba(80,200,120,.5); }
#mtp-calc.glow-on .b-mx-mat:active       { box-shadow: 0 0 12px 3px rgba(40,190,170,.55); }
#mtp-calc.glow-on .b-mx-set:active       { box-shadow: 0 0 12px 3px rgba(50,130,220,.55); }
#mtp-calc.glow-on .b-mx-eig:active       { box-shadow: 0 0 12px 3px rgba(190,110,240,.6); }

/* High contrast */
#mtp-calc.cb .b-fn  { background: rgba(201,168,76,.12); color: rgba(255,220,100,.95); border: 2px solid rgba(201,168,76,.55); }
#mtp-calc.cb .b-inv { background: rgba(60,140,255,.12); color: rgba(140,200,255,.95); border: 2px solid rgba(60,140,255,.55); }
#mtp-calc.cb .b-op  { background: rgba(201,168,76,.18); color: rgba(255,220,80,1); border: 2px solid rgba(201,168,76,.7); }
#mtp-calc.cb .b-num { background: rgba(255,255,255,.1); color: rgba(255,255,255,.95); border: 2px solid rgba(255,255,255,.35); }
#mtp-calc.cb .b-eq  { background: linear-gradient(135deg,rgba(220,180,60,1),rgba(160,120,30,1)); color: #000; border: 2px solid rgba(255,220,80,.8); }
#mtp-calc.cb .b-clr { background: rgba(220,50,30,.18); color: rgba(255,120,100,1); border: 2px solid rgba(220,50,30,.65); }
#mtp-calc.cb .b-back { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); border: 2px solid rgba(255,255,255,.3); }
#mtp-calc.cb .b-const { background: rgba(60,200,100,.12); color: rgba(120,255,150,.95); border: 2px solid rgba(60,200,100,.5); }
#mtp-calc.cb .b-mx-mat { background: rgba(0,120,210,.12); color: rgba(40,160,255,.9); border: 2px solid rgba(0,120,210,.4); }
#mtp-calc.cb .b-mx-num { background: rgba(200,130,0,.12); color: rgba(240,170,20,.9); border: 2px solid rgba(200,130,0,.4); }
#mtp-calc.cb .b-mx-set { background: rgba(30,110,220,.12); color: rgba(90,175,255,.9); border: 2px solid rgba(30,110,220,.4); }
#mtp-calc.cb .b-mx-eig { background: rgba(240,100,0,.12); color: rgba(255,140,40,.9); border: 2px dashed rgba(240,100,0,.45); }
#mtp-calc.cb .b { position: relative; }

/* ---- Light mode ---- */
#mtp-calc.light { background: #f5f0e8; border-color: rgba(154,120,48,.35); box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 0 0 1px rgba(154,120,48,.1); }
#mtp-calc.light .c-bar { background: linear-gradient(90deg,#e8dfc8,#d6c9a8); border-bottom-color: rgba(154,120,48,.2); }
#mtp-calc.light .c-title { color: var(--mtp-gold-dk); }
#mtp-calc.light .c-x { color: rgba(14,12,9,.3); }
#mtp-calc.light .c-x:hover { color: #0e0c09; }
#mtp-calc.light .c-disp-wrap { background: #ede4d0; }
#mtp-calc.light .c-hist { color: rgba(14,12,9,.3); }
#mtp-calc.light .c-disp { color: var(--mtp-gold-dk); }
#mtp-calc.light .c-mem-bar { background: #e8dfc8; border-bottom-color: rgba(14,12,9,.08); }
#mtp-calc.light .c-mem-label { color: rgba(60,100,160,.6); }
#mtp-calc.light .c-mem-btns button { background: rgba(60,100,160,.07); border-color: rgba(60,100,160,.18); color: rgba(60,100,160,.7); }
#mtp-calc.light .c-tabs { background: #e0d5bc; border-bottom-color: rgba(14,12,9,.08); }
#mtp-calc.light .c-tab { color: rgba(14,12,9,.3); }
#mtp-calc.light .c-tab.on { color: var(--mtp-gold-dk); border-bottom-color: var(--mtp-gold-dk); }
#mtp-calc.light .c-panel { background: #f5f0e8; }
#mtp-calc.light .sec-label { color: rgba(154,120,48,.6); }
#mtp-calc.light .fn-col-head-fn  { color: rgba(154,120,48,.55); }
#mtp-calc.light .fn-col-head-inv { color: rgba(40,90,160,.5); }
#mtp-calc.light .fn-inv-sep { background: linear-gradient(180deg,transparent,rgba(154,120,48,.3) 20%,rgba(154,120,48,.3) 80%,transparent); }
#mtp-calc.light .b-fn  { background: rgba(154,120,48,.08); color: rgba(14,12,9,.65); border-color: rgba(154,120,48,.18); }
#mtp-calc.light .b-fn:hover { background: rgba(154,120,48,.18); color: var(--mtp-gold-dk); }
#mtp-calc.light .b-inv { background: rgba(40,90,180,.06); color: rgba(40,90,180,.65); border-color: rgba(40,90,180,.18); }
#mtp-calc.light .b-op  { background: rgba(154,120,48,.14); color: var(--mtp-gold-dk); border-color: rgba(154,120,48,.28); }
#mtp-calc.light .b-num { background: #ede4d0; color: #2a2010; border-color: rgba(14,12,9,.1); }
#mtp-calc.light .b-num:hover { background: #e0d5bc; }
#mtp-calc.light .b-eq  { background: linear-gradient(135deg,var(--mtp-gold-dk),#7a5e20); color: #fff; }
#mtp-calc.light .b-clr { background: rgba(180,40,30,.1); color: #c04030; border-color: rgba(180,40,30,.2); }
#mtp-calc.light .b-back { background: rgba(14,12,9,.06); color: rgba(14,12,9,.5); border-color: rgba(14,12,9,.1); }
#mtp-calc.light .b-const { background: rgba(40,130,70,.07); color: rgba(30,100,50,.7); border-color: rgba(40,130,70,.18); }
#mtp-calc.light .b-mx-mat { background: rgba(0,130,110,.12); color: rgba(0,110,90,1); border-color: rgba(0,130,110,.35); font-weight: 700; }
#mtp-calc.light .b-mx-num { background: rgba(154,100,0,.1); color: rgba(130,80,0,1); border-color: rgba(154,100,0,.3); font-weight: 700; }
#mtp-calc.light .b-mx-set { background: rgba(20,90,200,.1); color: rgba(15,70,180,1); border-color: rgba(20,90,200,.28); font-weight: 700; }
#mtp-calc.light .b-mx-eig { background: rgba(150,50,220,.1); color: rgba(120,20,200,1); border-color: rgba(150,50,220,.28); font-weight: 700; }
#mtp-calc.light .c-mode-inline { border-color: rgba(14,12,9,.18); color: rgba(14,12,9,.45); }
#mtp-calc.light .c-mode-inline.on { background: rgba(154,120,48,.18); color: var(--mtp-gold-dk); border-color: var(--mtp-gold-dk); }
#mtp-calc.light .c-set-btn { color: rgba(14,12,9,.35); }
#mtp-calc.light .c-set-btn:hover { color: var(--mtp-gold-dk); }
#mtp-calc.light .c-dropdown { background: #f0e8d8; border-color: rgba(154,120,48,.28); box-shadow: 0 12px 36px rgba(0,0,0,.18); }
#mtp-calc.light .c-dd-label { color: rgba(154,120,48,.5); }
#mtp-calc.light .c-dd-row:hover { background: rgba(154,120,48,.07); }
#mtp-calc.light .c-dd-txt { color: rgba(14,12,9,.65); }
#mtp-calc.light .c-dd-btn { border-color: rgba(154,120,48,.25); background: rgba(154,120,48,.08); color: var(--mtp-gold-dk); }
#mtp-calc.light .c-dd-sep { background: rgba(14,12,9,.08); }
#mtp-calc.light .c-dd-arrow { color: rgba(154,120,48,.4); }
#mtp-calc.light .c-dd-toggle { background: rgba(14,12,9,.1); border-color: rgba(14,12,9,.14); }
#mtp-calc.light .c-dd-toggle.on { background: rgba(154,120,48,.3); border-color: var(--mtp-gold-dk); }
#mtp-calc.light .c-dd-knob { background: rgba(14,12,9,.3); }
#mtp-calc.light .c-dd-toggle.on .c-dd-knob { background: var(--mtp-gold-dk); }
#mtp-calc.light .c-dd-copy { color: rgba(14,12,9,.6); }
#mtp-calc.light .mx-sel { background: #e8dfc8; color: var(--mtp-gold-dk); border-color: rgba(154,120,48,.3); }
#mtp-calc.light .mx-grid td { padding: 2px !important; }
#mtp-calc.light .mx-cell { background: #ede4d0 !important; border-color: rgba(154,120,48,.2); color: #2a2010; }
#mtp-calc.light .mx-cell:focus { border-color: var(--mtp-gold-dk); background: #e0d5bc; }
#mtp-calc.light .mx-bracket { color: rgba(154,120,48,.4); }
#mtp-calc.light .mx-result-box { background: #e8dfc8; border-color: rgba(154,120,48,.15); color: rgba(14,12,9,.6); }
#mtp-calc.light .mx-val { color: var(--mtp-gold-dk); }
#mtp-calc.light .mx-lbl { color: rgba(14,12,9,.35); }
#mtp-calc.light .c-min-btn { color: rgba(14,12,9,.3); }
#mtp-calc.light .c-min-btn:hover { color: var(--mtp-gold-dk); }
#mtp-calc.light .c-mini-disp { color: var(--mtp-gold-dk); }

/* ---- History popout ---- */
#mtp-history {
  position: fixed;
  top: 0; bottom: 0;
  width: 240px;
  min-width: 200px;
  max-width: 480px;
  background: #1a1612;
  border: 1px solid rgba(201,168,76,.28);
  border-radius: 12px;
  box-shadow: -8px 0 32px rgba(0,0,0,.5);
  z-index: 99998;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
#mtp-history.open { display: flex; animation: mtpHistPop .2s ease forwards; }
@keyframes mtpHistPop { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }
.h-header { background: linear-gradient(90deg,#1e1a12,#2a2218); border-bottom: 1px solid rgba(201,168,76,.15); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.h-title { font-family: 'Caveat', cursive; font-size: 16px; font-weight: 700; color: var(--mtp-gold); }
.h-clear { font-family: 'Nunito', sans-serif; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; background: none; border: 1px solid rgba(200,60,40,.25); color: rgba(200,100,80,.6); border-radius: 4px; padding: 3px 8px; cursor: pointer; transition: all .15s; }
.h-clear:hover { background: rgba(200,60,40,.15); color: #e88; }
.h-close-btn { background: none; border: none; color: rgba(250,247,242,.3); font-size: 18px; cursor: pointer; line-height: 1; padding: 0 2px; transition: color .15s; }
.h-close-btn:hover { color: var(--mtp-paper); }
.h-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.h-list::-webkit-scrollbar { width: 4px; }
.h-list::-webkit-scrollbar-thumb { background: rgba(201,168,76,.2); border-radius: 2px; }
.h-empty { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; color: rgba(250,247,242,.2); font-style: italic; text-align: center; padding: 20px; line-height: 1.6; font-family: 'Nunito', sans-serif; }
.h-item { padding: 9px 14px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.04); transition: background .15s; }
.h-item:hover { background: rgba(201,168,76,.07); }
.h-item:last-child { border-bottom: none; }
.h-item-expr { font-size: 11px; color: rgba(250,247,242,.35); font-family: 'Nunito', sans-serif; word-break: break-all; line-height: 1.4; }
.h-item-result { font-size: 15px; font-weight: 700; color: var(--mtp-gold); font-family: 'Nunito', sans-serif; margin-top: 2px; }
.h-item-time { font-size: 9px; color: rgba(250,247,242,.18); margin-top: 2px; font-family: 'Nunito', sans-serif; }
.h-footer { padding: 8px 12px; border-top: 1px solid rgba(201,168,76,.1); font-size: 10px; color: rgba(250,247,242,.22); text-align: center; flex-shrink: 0; font-family: 'Nunito', sans-serif; }
.h-resize { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; cursor: ew-resize; z-index: 1; background: transparent; transition: background .15s; }
.h-resize:hover, .h-resize.dragging { background: rgba(201,168,76,.25); }
.h-resize-hint { position: absolute; top: 50%; left: 0; width: 6px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; pointer-events: none; }
.h-resize-hint span { width: 2px; height: 12px; border-radius: 1px; background: rgba(201,168,76,.3); }
.h-resize-bottom { height: 6px; cursor: ns-resize; flex-shrink: 0; background: transparent; transition: background .15s; display: flex; align-items: center; justify-content: center; }
.h-resize-bottom:hover, .h-resize-bottom.dragging { background: rgba(201,168,76,.2); }
.h-resize-bottom-hint { display: flex; gap: 3px; pointer-events: none; }
.h-resize-bottom-hint span { width: 12px; height: 2px; border-radius: 1px; background: rgba(201,168,76,.3); }

/* History light mode */
#mtp-history.light { background: #f0e8d8; border-color: rgba(154,120,48,.3); box-shadow: -8px 0 32px rgba(0,0,0,.15); }
#mtp-history.light .h-header { background: linear-gradient(90deg,#e8dfc8,#d6c9a8); border-bottom-color: rgba(14,12,9,.1); }
#mtp-history.light .h-title { color: var(--mtp-gold-dk); }
#mtp-history.light .h-item-result { color: var(--mtp-gold-dk); }
#mtp-history.light .h-item-expr { color: rgba(14,12,9,.4); }
#mtp-history.light .h-close-btn { color: rgba(14,12,9,.3); }

/* ---- About modal ---- */
#mtp-about { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 100002; align-items: center; justify-content: center; }
#mtp-about.open { display: flex; animation: mtpPop .18s ease; }
.about-shell { background: #1a1612; border: 1px solid rgba(201,168,76,.3); border-radius: 14px; width: 420px; max-width: 96vw; max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.7); overflow: hidden; }
.about-header { background: linear-gradient(90deg,#1e1a12,#2a2218); border-bottom: 1px solid rgba(201,168,76,.15); padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.about-logo { font-family: 'Caveat', cursive; font-size: 20px; font-weight: 700; color: var(--mtp-gold); }
.about-logo em { font-style: normal; color: rgba(250,247,242,.6); }
.about-close { background: none; border: none; color: rgba(255,255,255,.3); font-size: 20px; cursor: pointer; transition: color .15s; }
.about-close:hover { color: var(--mtp-paper); }
.about-body { padding: 20px 22px; overflow-y: auto; flex: 1; }
.about-body::-webkit-scrollbar { width: 4px; }
.about-body::-webkit-scrollbar-thumb { background: rgba(201,168,76,.2); border-radius: 2px; }
.about-tagline { font-family: 'Caveat', cursive; font-size: 20px; font-weight: 700; color: var(--mtp-gold); margin-bottom: 14px; line-height: 1.4; font-style: italic; }
.about-desc { font-size: 14px; color: rgba(250,247,242,.78); line-height: 1.8; margin-bottom: 16px; font-family: 'Nunito', sans-serif; }
.about-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--mtp-gold); text-decoration: none; border: 1px solid rgba(201,168,76,.35); border-radius: 8px; padding: 10px 20px; transition: all .18s; margin-top: 4px; }
.about-link:hover { background: rgba(201,168,76,.1); border-color: var(--mtp-gold); }
.about-footer { border-top: 1px solid rgba(201,168,76,.1); padding: 12px 22px; text-align: center; flex-shrink: 0; }
.about-copy { font-size: 11px; color: rgba(250,247,242,.25); line-height: 1.7; font-family: 'Nunito', sans-serif; }
.about-copy sup { font-size: 8px; }

/* ---- TI Popout (Sum / Integral) ---- */
#ti-popout { display: none; position: fixed; background: #1a1612; border: 1px solid rgba(201,168,76,.28); border-radius: 12px; box-shadow: -8px 0 32px rgba(0,0,0,.5); z-index: 99998; flex-direction: column; overflow: hidden; width: 300px; min-width: 260px; max-width: 420px; opacity: 0; transform: translateX(12px); transition: opacity .2s, transform .2s; }
#ti-popout.open { display: flex; }
#ti-popout.show { opacity: 1; transform: translateX(0); }
.ti-pop-header { background: linear-gradient(90deg,#1e1a12,#2a2218); border-bottom: 1px solid rgba(201,168,76,.15); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.ti-pop-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--mtp-gold); font-family: 'Nunito', sans-serif; }
.ti-pop-close { background: none; border: none; color: rgba(255,255,255,.3); font-size: 18px; cursor: pointer; line-height: 1; padding: 0; transition: color .15s; }
.ti-pop-close:hover { color: var(--mtp-paper); }
.ti-pop-body { flex: 1; overflow-y: auto; padding: 12px 14px; font-family: 'Nunito', sans-serif; font-size: 12px; line-height: 1.7; }
.ti-pop-body::-webkit-scrollbar { width: 4px; }
.ti-pop-body::-webkit-scrollbar-thumb { background: rgba(201,168,76,.2); border-radius: 2px; }
.ti-pop-section { margin-bottom: 14px; }
.ti-pop-section-title { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(201,168,76,.5); margin-bottom: 6px; padding-bottom: 3px; border-bottom: 1px solid rgba(201,168,76,.1); font-family: 'Nunito', sans-serif; }
.ti-pop-entry { margin-bottom: 8px; }
.ti-pop-label { font-size: 10px; color: rgba(250,247,242,.3); margin-bottom: 2px; }
.ti-pop-val { font-size: 13px; font-weight: 700; color: var(--mtp-gold); word-break: break-all; }
.ti-pop-exact { font-size: 13px; font-weight: 700; color: rgba(80,220,160,.9); }
.ti-pop-note { font-size: 10px; color: rgba(250,247,242,.25); line-height: 1.6; margin-top: 4px; }
.ti-pop-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
.ti-pop-table th { color: rgba(201,168,76,.55); font-weight: 800; text-transform: uppercase; font-size: 9px; letter-spacing: .06em; padding: 3px 6px; text-align: left; border-bottom: 1px solid rgba(201,168,76,.12); }
.ti-pop-table td { color: rgba(250,247,242,.65); padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.04); }
.ti-pop-table tr:last-child td { border-bottom: none; }
.ti-pop-form { padding: 12px 14px 6px; flex-shrink: 0; }
.ti-form-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: rgba(201,168,76,.45); margin-bottom: 4px; font-family: 'Nunito', sans-serif; }
.ti-form-input { width: 100%; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 600; background: #1e1a14; border: 1px solid rgba(201,168,76,.18); border-radius: 6px; padding: 8px 10px; color: var(--mtp-paper); outline: none; box-sizing: border-box; transition: border-color .15s, background .15s; }
.ti-form-input:focus { border-color: var(--mtp-gold); background: #2a2418; }
.ti-form-btn { width: 100%; margin-top: 10px; padding: 10px; border-radius: 7px; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; border: 1px solid rgba(201,168,76,.3); background: rgba(201,168,76,.15); color: var(--mtp-gold); transition: all .15s; }
.ti-form-btn:hover { background: rgba(201,168,76,.28); }
.ti-form-btn-int { background: rgba(40,190,160,.1); color: rgba(80,220,200,.85); border-color: rgba(40,190,160,.28); }
.ti-form-btn-int:hover { background: rgba(40,190,160,.22); }
.ti-form-hint { font-size: 10px; color: rgba(250,247,242,.2); line-height: 1.7; margin-top: 8px; padding: 0 2px; font-family: 'Nunito', sans-serif; }

/* TI popout light */
#ti-popout.light { background: #f0e8d8; border-color: rgba(154,120,48,.28); box-shadow: 8px 0 32px rgba(0,0,0,.15); }
#ti-popout.light .ti-pop-header { background: linear-gradient(90deg,#e8dfc8,#d6c9a8); border-bottom-color: rgba(14,12,9,.1); }
#ti-popout.light .ti-pop-title { color: var(--mtp-gold-dk); }
#ti-popout.light .ti-pop-close { color: rgba(14,12,9,.3); }
#ti-popout.light .ti-pop-body { background: #f0e8d8; }
#ti-popout.light .ti-pop-section-title { color: rgba(154,120,48,.6); border-bottom-color: rgba(154,120,48,.15); }
#ti-popout.light .ti-pop-val { color: var(--mtp-gold-dk); }
#ti-popout.light .ti-pop-label, #ti-popout.light .ti-pop-note { color: rgba(14,12,9,.4); }
#ti-popout.light .ti-form-label { color: rgba(154,120,48,.55); }
#ti-popout.light .ti-form-input { background: #e8dfc8; border-color: rgba(154,120,48,.22); color: #2a2010; }
#ti-popout.light .ti-form-input:focus { border-color: var(--mtp-gold-dk); background: #e0d5bc; }
#ti-popout.light .ti-form-btn { background: rgba(154,120,48,.12); color: var(--mtp-gold-dk); border-color: rgba(154,120,48,.3); }

/* ---- Inline Sigma / Integral panel ---- */
#ti-inline { background: rgba(201,168,76,.04); border: 1px solid rgba(201,168,76,.12); border-radius: 8px; padding: 8px 10px 10px; margin-bottom: 2px; }
#mtp-calc.light #ti-inline { background: rgba(154,120,48,.05); border-color: rgba(154,120,48,.15); }
#ti-inline .ti-form-input { width: 100%; font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 600; background: #1e1a14; border: 1px solid rgba(201,168,76,.18); border-radius: 6px; padding: 6px 8px; color: var(--mtp-paper); outline: none; box-sizing: border-box; transition: border-color .15s; }
#ti-inline .ti-form-input:focus { border-color: var(--mtp-gold); }
#mtp-calc.light #ti-inline .ti-form-input { background: #e8dfc8; border-color: rgba(154,120,48,.22); color: #2a2010; }
#ti-inline .ti-form-btn { width: 100%; padding: 8px; border-radius: 6px; font-family: 'Nunito', sans-serif; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; border: 1px solid rgba(201,168,76,.3); background: rgba(201,168,76,.15); color: var(--mtp-gold); transition: all .15s; }
#ti-inline .ti-form-btn:hover { background: rgba(201,168,76,.28); }
#ti-inline .ti-form-btn-int { background: rgba(40,190,160,.1); color: rgba(80,220,200,.85); border-color: rgba(40,190,160,.28); }
#ti-inline .ti-form-btn-int:hover { background: rgba(40,190,160,.22); }
#ti-inline .ti-form-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: rgba(201,168,76,.45); margin-bottom: 3px; font-family: 'Nunito', sans-serif; }
#ti-inline .ti-form-hint { font-size: 9px; color: rgba(250,247,242,.2); line-height: 1.6; margin-top: 6px; font-family: 'Nunito', sans-serif; }
#mtp-calc.light #ti-inline .ti-form-hint { color: rgba(14,12,9,.3); }
#ti-inline #ti-pop-body { font-family: 'Nunito', sans-serif; font-size: 11px; }


/* ================================================================
   SIGMA / INTEGRAL POPOUT  (#ti-popout)
   Exact original pattern from standalone HTML.
================================================================ */
#ti-popout {
  display: none;
  position: fixed;
  background: #1a1612;
  border: 1px solid rgba(201,168,76,.28);
  border-radius: 12px;
  box-shadow: -8px 0 32px rgba(0,0,0,.5);
  z-index: 99999;
  flex-direction: column;
  overflow: hidden;
  width: 300px;
  min-width: 260px;
  max-width: 420px;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .2s, transform .2s;
}
#ti-popout.open { display: flex; }
#ti-popout.show { opacity: 1; transform: translateX(0); }

.ti-pop-header { background: linear-gradient(90deg,#1e1a12,#2a2218); border-bottom: 1px solid rgba(201,168,76,.15); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.ti-pop-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--mtp-gold); font-family: 'Nunito', sans-serif; }
.ti-pop-close { background: none; border: none; color: rgba(255,255,255,.3); font-size: 18px; cursor: pointer; line-height: 1; padding: 0; transition: color .15s; }
.ti-pop-close:hover { color: var(--mtp-paper); }
.ti-pop-body { flex: 1; overflow-y: auto; padding: 12px 14px; font-family: 'Nunito', sans-serif; font-size: 12px; line-height: 1.7; }
.ti-pop-body::-webkit-scrollbar { width: 4px; }
.ti-pop-body::-webkit-scrollbar-thumb { background: rgba(201,168,76,.2); border-radius: 2px; }
.ti-pop-section { margin-bottom: 14px; }
.ti-pop-section-title { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: rgba(201,168,76,.5); margin-bottom: 6px; padding-bottom: 3px; border-bottom: 1px solid rgba(201,168,76,.1); font-family: 'Nunito', sans-serif; }
.ti-pop-label { font-size: 10px; color: rgba(250,247,242,.3); margin-bottom: 2px; }
.ti-pop-val { font-size: 13px; font-weight: 700; color: var(--mtp-gold); word-break: break-all; }
.ti-pop-exact { font-size: 13px; font-weight: 700; color: rgba(80,220,160,.9); }
.ti-pop-note { font-size: 10px; color: rgba(250,247,242,.25); line-height: 1.6; margin-top: 4px; }
.ti-pop-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 4px; }
.ti-pop-table th { color: rgba(201,168,76,.55); font-weight: 800; text-transform: uppercase; font-size: 9px; letter-spacing: .06em; padding: 3px 6px; text-align: left; border-bottom: 1px solid rgba(201,168,76,.12); }
.ti-pop-table td { color: rgba(250,247,242,.65); padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.04); }
.ti-pop-table tr:last-child td { border-bottom: none; }

.ti-pop-form { padding: 12px 14px 6px; flex-shrink: 0; }
.ti-form-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: rgba(201,168,76,.45); margin-bottom: 4px; font-family: 'Nunito', sans-serif; }
.ti-form-input { width: 100%; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 600; background: #1e1a14; border: 1px solid rgba(201,168,76,.18); border-radius: 6px; padding: 8px 10px; color: var(--mtp-paper); outline: none; box-sizing: border-box; transition: border-color .15s, background .15s; }
.ti-form-input:focus { border-color: var(--mtp-gold); background: #2a2418; }
.ti-form-btn { width: 100%; margin-top: 10px; padding: 10px; border-radius: 7px; font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; cursor: pointer; border: 1px solid rgba(201,168,76,.3); background: rgba(201,168,76,.15); color: var(--mtp-gold); transition: all .15s; }
.ti-form-btn:hover { background: rgba(201,168,76,.28); }
.ti-form-btn-int { background: rgba(40,190,160,.1); color: rgba(80,220,200,.85); border-color: rgba(40,190,160,.28); }
.ti-form-btn-int:hover { background: rgba(40,190,160,.22); }
.ti-form-hint { font-size: 10px; color: rgba(250,247,242,.2); line-height: 1.7; margin-top: 8px; padding: 0 2px; font-family: 'Nunito', sans-serif; }

/* Light mode */
#ti-popout.light { background: #f0e8d8; border-color: rgba(154,120,48,.28); box-shadow: 8px 0 32px rgba(0,0,0,.15); }
#ti-popout.light .ti-pop-header { background: linear-gradient(90deg,#e8dfc8,#d6c9a8); border-bottom-color: rgba(14,12,9,.1); }
#ti-popout.light .ti-pop-title { color: var(--mtp-gold-dk); }
#ti-popout.light .ti-pop-close { color: rgba(14,12,9,.3); }
#ti-popout.light .ti-pop-close:hover { color: var(--mtp-ink); }
#ti-popout.light .ti-pop-body { background: #f0e8d8; }
#ti-popout.light .ti-pop-section-title { color: rgba(154,120,48,.6); border-bottom-color: rgba(154,120,48,.15); }
#ti-popout.light .ti-pop-val { color: var(--mtp-gold-dk); }
#ti-popout.light .ti-pop-label, #ti-popout.light .ti-pop-note { color: rgba(14,12,9,.4); }
#ti-popout.light .ti-form-label { color: rgba(154,120,48,.55); }
#ti-popout.light .ti-form-input { background: #e8dfc8; border-color: rgba(154,120,48,.22); color: #2a2010; }
#ti-popout.light .ti-form-input:focus { border-color: var(--mtp-gold-dk); background: #e0d5bc; }
#ti-popout.light .ti-form-hint { color: rgba(14,12,9,.3); }
#ti-popout.light .ti-form-btn { background: rgba(154,120,48,.12); color: var(--mtp-gold-dk); border-color: rgba(154,120,48,.3); }
#ti-popout.light #ti-result { background: #e8dfc8; border-color: rgba(154,120,48,.15); color: rgba(14,12,9,.6); }

/* ── Mobile & tablet responsive ────────────────────────────── */
@media (max-width: 600px) {
  #mtp-calc {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
    border: none !important;
    overflow-y: auto;
  }
  #mtp-calc.open { animation: none; }
  .c-bar { cursor: default; padding: 10px 14px; }
  .c-bar-drag { display: none; }
  .c-panel-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .c-btns { gap: 5px !important; }
  .b { min-width: 36px !important; min-height: 36px !important;
       font-size: 11px !important; padding: 6px 2px !important; }
  .c-disp { font-size: 24px !important; }
  #mtp-calc.fs-lg .b,
  #mtp-calc.fs-xl .b { font-size: 11px !important; padding: 6px 2px !important; min-height: 36px !important; }
  #mtp-calc.fs-lg .c-disp,
  #mtp-calc.fs-xl .c-disp { font-size: 28px !important; }
  .c-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .c-tab { white-space: nowrap; }
  .about-shell { width: 96vw !important; max-width: 96vw !important; }
}

@media (max-width: 900px) and (min-width: 601px) {
  #mtp-calc {
    width: 360px !important;
    top: 10px !important;
    right: 10px !important;
  }
}