/* ══════════════════════════════════════════════════════════════
   ORIGINAL SPE STYLES (Light Mode)
   ══════════════════════════════════════════════════════════════ */
.estc-wrap {
    --navy: #1F3864; --amber: #C9A21A; --blue: #2563EB; --green: #15803D; --red: #DC2626;
    --yellow: #D97706; --bg: #F8FAFC; --card: #fff; --border: #E2E8F0; --grey: #F1F5F9;
    --text: #1E293B; --text2: #475569; --mono: 'Courier New',monospace; --radius: 8px;
    font-family: 'Segoe UI', system-ui, sans-serif; font-size: 13px; line-height: 1.6;
    color: var(--text); background: var(--bg); padding: 12px;
}
.estc-wrap .estc-alert { padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 14px; font-size: .8rem; }
.estc-wrap .estc-alert-amber { background: #FEF9C3; border-left: 3px solid var(--amber); color: #78350F; }
.estc-wrap .estc-alert-red { background: #FEF2F2; border-left: 3px solid var(--red); color: var(--red); }
.estc-wrap .estc-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(31,56,100,.07); margin-bottom: 14px; overflow: hidden; }
.estc-wrap .estc-card-hdr { background: var(--navy); color: #fff; padding: 9px 16px; font-weight: 600; font-size: .84rem; }
.estc-wrap .estc-card-result { border-color: var(--green); }
.estc-wrap .estc-card-hdr-result { background: #14532D; }
.estc-wrap .estc-card-body { padding: 16px; }
.estc-wrap .estc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 12px; }
.estc-wrap .estc-field { display: flex; flex-direction: column; gap: 3px; }
.estc-wrap .estc-field label { font-size: .72rem; font-weight: 600; color: var(--text2); text-transform: uppercase; }
.estc-wrap .estc-field input, .estc-wrap .estc-field select { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-family: var(--mono); font-size: .82rem; background: #fff; width: 100%; box-sizing: border-box; }
.estc-wrap .estc-field input:focus, .estc-wrap .estc-field select:focus { outline: none; border-color: var(--blue); }
.estc-wrap .estc-lbl-sm { font-size: .75rem; color: var(--text2); margin-bottom: 8px; margin-top: 4px; }
.estc-wrap .estc-model-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.estc-wrap .estc-radio { padding: 7px 16px; border: 1.5px solid var(--border); border-radius: 6px; cursor: pointer; font-size: .82rem; display: flex; align-items: center; gap: 6px; user-select: none; }
.estc-wrap .estc-radio-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.estc-wrap .estc-model-pane { display: none; }
.estc-wrap .estc-pane-show { display: block; }
.estc-wrap .estc-tbl-wrap { overflow-x: auto; }
.estc-wrap .estc-wc-tbl { width: 100%; border-collapse: collapse; font-size: .79rem; white-space: nowrap; }
.estc-wrap .estc-wc-tbl th { background: var(--navy); color: #fff; padding: 6px 8px; text-align: left; font-size: .72rem; }
.estc-wrap .estc-wc-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.estc-wrap .estc-wc-tbl tr:nth-child(even) td { background: var(--grey); }
.estc-wrap .estc-wc-tbl input[type=text], .estc-wrap .estc-wc-tbl input[type=number] { width: 100%; border: 1px solid var(--border); border-radius: 4px; padding: 3px 5px; font-family: var(--mono); font-size: .78rem; box-sizing: border-box; }
.estc-wrap .estc-btn-del { border: 1px solid #fca5a5; color: var(--red); background: none; border-radius: 4px; padding: 2px 7px; cursor: pointer; font-size: .72rem; }
.estc-wrap .estc-btn-add { background: var(--navy); color: #fff; border: none; border-radius: 6px; padding: 7px 13px; cursor: pointer; font-size: .79rem; margin-top: 8px; }
.estc-wrap .estc-actions { display: flex; gap: 10px; margin: 14px 0; }
.estc-wrap .estc-btn { padding: 10px 22px; border-radius: 7px; border: none; cursor: pointer; font-size: .87rem; font-weight: 600; }
.estc-wrap .estc-btn-primary { background: var(--amber); color: #fff; }
.estc-wrap .estc-btn-secondary { background: var(--navy); color: #fff; }
.estc-wrap .estc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.estc-wrap .estc-chip { background: #EFF6FF; border: 1px solid #BFDBFE; color: #1E40AF; padding: 3px 9px; border-radius: 18px; font-size: .76rem; font-family: var(--mono); }
.estc-wrap .estc-res-tbl { width: 100%; border-collapse: collapse; font-size: .78rem; white-space: nowrap; }
.estc-wrap .estc-res-tbl th { background: var(--navy); color: #fff; padding: 6px 8px; text-align: right; font-size: .71rem; }
.estc-wrap .estc-res-tbl th:first-child, .estc-wrap .estc-res-tbl th:nth-child(2) { text-align: left; }
.estc-wrap .estc-res-tbl td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: right; font-family: var(--mono); }
.estc-wrap .estc-res-tbl td:first-child, .estc-wrap .estc-res-tbl td:nth-child(2) { text-align: left; font-family: inherit; }
.estc-wrap .estc-res-tbl tr:nth-child(even) td { background: var(--grey); }
.estc-wrap .estc-th-i { background: #1e3a6e !important; }
.estc-wrap .estc-th-c { background: #1e4d3e !important; }
.estc-wrap .estc-th-l { background: #4d2000 !important; }
.estc-wrap .estc-ok { color: var(--green); }
.estc-wrap .estc-warn { color: var(--yellow); }
.estc-wrap .estc-hi { color: var(--red); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════
   NEW EPE STYLES (Single Column Dark Mode)
   ══════════════════════════════════════════════════════════════ */
.estc-wrap-epe {
  --bg:#0c1620; --bg2:#111e2d; --bg3:#172333; --bg4:#1d2c3e;
  --border:#253447; --border2:#2e3f57;
  --amber:#f0a500; --amber2:#fbbf24; --amber-dim:rgba(240,165,0,.12);
  --ice:#b8d9f0; --ice-dim:rgba(184,217,240,.08);
  --violet:#a78bfa; --violet-dim:rgba(167,139,250,.1);
  --green:#34d399; --green-dim:rgba(52,211,153,.1);
  --red:#f87171; --yellow:#fbbf24;
  --text:#e2eaf4; --text2:#8fa8c0; --text3:#5a7a96;
  --sans: 'Segoe UI', system-ui, sans-serif; --mono: 'Courier New', monospace; --r: 6px;
  background: var(--bg); color: var(--text); font-family: var(--sans); 
  line-height: 1.5; font-size: 14px; padding-bottom: 20px; border-radius: var(--r); overflow: hidden;
}
.estc-wrap-epe *, .estc-wrap-epe *::before, .estc-wrap-epe *::after { box-sizing: border-box; }
.estc-wrap-epe .topbar { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 12px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.estc-wrap-epe .topbar-logo { font-family: var(--mono); font-size: 11px; color: var(--amber); border: 1px solid var(--amber); padding: 3px 8px; border-radius: 3px; }
.estc-wrap-epe .topbar-title { font-size: 15px; font-weight: 600; margin: 0; }
.estc-wrap-epe .topbar-sub { font-size: 11px; color: var(--text3); margin-left: auto; font-family: var(--mono); }
.estc-wrap-epe .main-content { padding: 20px 24px; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.estc-wrap-epe .card-section { background: var(--bg2); padding: 20px; border-radius: var(--r); border: 1px solid var(--border); }
.estc-wrap-epe .sec { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--amber); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 6px; font-weight: bold; }
.estc-wrap-epe .info-btn { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--amber); background: transparent; color: var(--amber); font-size: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.estc-wrap-epe .info-box { background: var(--bg4); border: 1px solid var(--border2); border-left: 3px solid var(--amber); border-radius: 4px; padding: 10px 12px; font-size: 11px; color: var(--text2); margin-bottom: 14px; display: none; }
.estc-wrap-epe .info-box.open { display: block; }
.estc-wrap-epe .info-box code { font-family: var(--mono); color: var(--ice); background: rgba(184,217,240,.06); padding: 1px 4px; border-radius: 3px; }
.estc-wrap-epe .lib-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.estc-wrap-epe .lib-select { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 6px 8px; color: var(--text); font-family: var(--mono); font-size: 12px; outline: none; }
.estc-wrap-epe .lib-load { background: var(--amber-dim); border: 1px solid var(--amber); color: var(--amber); border-radius: 4px; padding: 6px 14px; font-family: var(--mono); font-size: 12px; cursor: pointer; transition: .15s; }
.estc-wrap-epe .field { margin-bottom: 12px; }
.estc-wrap-epe .field label { display: block; font-size: 11px; color: var(--text2); margin-bottom: 4px; font-family: var(--mono); }
.estc-wrap-epe .field input, .estc-wrap-epe .field select { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; color: var(--text); font-family: var(--mono); font-size: 12px; transition: .15s; }
.estc-wrap-epe .field input:focus { border-color: var(--amber); background: var(--bg4); }
.estc-wrap-epe .field input[readonly] { color: var(--amber); cursor: default; background: var(--bg2); }
.estc-wrap-epe .fr { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.estc-wrap-epe .fr3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.estc-wrap-epe .plbl { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; font-family: var(--mono); font-size: 9px; color: var(--text3); text-align: center; }
.estc-wrap-epe .pgrid { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; margin-bottom: 5px; }
.estc-wrap-epe .pgrid input { min-width: 0; width: 100%; padding: 6px; text-align: center; background: var(--bg3); border: 1px solid var(--border); color: var(--text); font-family: var(--mono); font-size: 12px; }
.estc-wrap-epe .utag { font-size: 10px; color: var(--text3); font-family: var(--mono); margin-bottom: 12px; }
.estc-wrap-epe .wct { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.estc-wrap-epe .wct th { background: var(--bg3); padding: 8px; font-family: var(--mono); font-size: 9px; text-transform: uppercase; color: var(--text3); text-align: left; border-bottom: 1px solid var(--border); }
.estc-wrap-epe .wct td { padding: 4px; border-bottom: 1px solid var(--border); }
.estc-wrap-epe .wct input { background: var(--bg3); border: 1px solid transparent; padding: 6px; color: var(--text); font-family: var(--mono); font-size: 11px; width: 100%; }
.estc-wrap-epe .btn-add { background: transparent; border: 1px solid var(--border); color: var(--text2); padding: 6px 12px; cursor: pointer; border-radius: 4px; }
.estc-wrap-epe .btn-calc { padding: 14px; background: var(--amber); border: none; border-radius: 5px; color: #0c1620; font-size: 15px; font-weight: bold; cursor: pointer; width: 100%; }
.estc-wrap-epe .btn-calc:disabled { opacity: .5; }
.estc-wrap-epe #results { margin-top: 10px; }
.estc-wrap-epe .empty { text-align: center; padding: 40px; color: var(--text3); background: var(--bg2); border-radius: var(--r); border: 1px dashed var(--border); }
.estc-wrap-epe .res-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.estc-wrap-epe .res-hdr h2 { font-size: 18px; margin: 0; color:var(--card);}
.estc-wrap-epe .badge { font-family: var(--mono); font-size: 10px; padding: 3px 8px; border-radius: 3px; text-transform: uppercase; }
.estc-wrap-epe .badge-ok { background: var(--green-dim); color: var(--green); border: 1px solid var(--green); }
.estc-wrap-epe .badge-warn { background: var(--amber-dim); color: var(--amber); border: 1px solid var(--amber); }
.estc-wrap-epe .sum-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 20px; }
.estc-wrap-epe .sc { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); padding: 14px; }
.estc-wrap-epe .sc-lbl { font-family: var(--mono); font-size: 9px; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.estc-wrap-epe .sc-ttl { font-size: 12px; font-weight: bold; color: var(--ice); margin-bottom: 8px; }
.estc-wrap-epe .sc-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.estc-wrap-epe .sc-row .k { color: var(--text2); }
.estc-wrap-epe .sc-row .v { font-family: var(--mono); color: var(--text); }
.estc-wrap-epe .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.estc-wrap-epe .chip { background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; font-family: var(--mono); font-size: 11px; color: var(--text2); }
.estc-wrap-epe .chip b { color: var(--amber); }
.estc-wrap-epe .sag-canvas-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 20px; padding: 8px; }
.estc-wrap-epe .sag-canvas-wrap canvas { display: block; width: 100%; }
.estc-wrap-epe .res-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
.estc-wrap-epe .rt { width: 100%; border-collapse: collapse; font-size: 12px; }
.estc-wrap-epe .rt th { background: var(--bg3); padding: 8px; text-align: right; font-family: var(--mono); font-size: 9px; text-transform: uppercase; color: var(--text3); border-bottom: 1px solid var(--border2); }
.estc-wrap-epe .rt .grp { text-align: center; border-bottom: 2px solid var(--bg); }
.estc-wrap-epe .gi { color: var(--ice); background: rgba(184,217,240,.05); }
.estc-wrap-epe .gc { color: var(--violet); background: rgba(167,139,250,.05); }
.estc-wrap-epe .gl { color: var(--green); background: rgba(52,211,153,.05); }
.estc-wrap-epe .rt td { padding: 8px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.03); font-family: var(--mono); white-space: nowrap; }
.estc-wrap-epe .rt td.l, .estc-wrap-epe .rt th.l { text-align: left; }
.estc-wrap-epe .cs { border-left: 2px solid var(--bg) !important; }
@media(max-width:800px) { .estc-wrap-epe .sum-row, .estc-wrap-epe .fr, .estc-wrap-epe .fr3 { grid-template-columns: 1fr; } }