:root{--navy:#142033;--navy2:#1f2f48;--gray:#f2f4f7;--gray2:#e3e7ed;--text:#20242b;--muted:#6b7280;--gold:#c8a24a;--orange:#d7772f;--card:#ffffff;--line:#d8dde5;--ok:#1f7a5b;--warn:#b56819;--shadow:0 14px 32px rgba(20,32,51,.09)}
*{box-sizing:border-box}.epi-app{font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:linear-gradient(135deg,#f4f5f7 0%,#edf0f4 62%,#e8edf4 100%);min-height:100vh;padding:14px}.epi-shell{max-width:1240px;margin:auto}.epi-header{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,#f7f8fa,#edf1f6);border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow);margin-bottom:14px}.epi-head-top{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center}.epi-kicker{color:var(--orange);font-weight:900;text-transform:uppercase;font-size:11px;letter-spacing:.11em}.epi-header h1{margin:2px 0 0;font-size:22px;line-height:1.05;color:var(--navy);letter-spacing:-.35px}.epi-head-student{background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px 12px;min-width:250px}.epi-head-student b{display:block;color:var(--navy);font-size:14px}.epi-head-student span{display:block;color:var(--muted);font-size:12px;margin-top:2px}.epi-logout{border:1px solid var(--line);background:var(--navy);color:white;border-radius:999px;padding:9px 14px;font-weight:900;cursor:pointer}.epi-nav,.epi-subnav,.epi-filter,.epi-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.epi-nav{margin-top:10px}.epi-nav button,.epi-filter button,.epi-actions button,.epi-subnav button,.epi-login-card button,button{border:1px solid var(--line);background:white;color:var(--navy);padding:10px 15px;border-radius:999px;font-weight:850;cursor:pointer}.epi-nav button.active,.epi-filter button.on,.epi-subnav button.on,.epi-login-card button,.epi-actions button:first-child{background:var(--orange);border-color:var(--orange);color:white}.epi-actions button.light{background:white;color:var(--navy);border-color:var(--line)}.epi-grid{display:grid;gap:16px}.epi-grid.two{grid-template-columns:1fr 1fr}.epi-card,.epi-report{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:21px;box-shadow:var(--shadow);margin-bottom:16px}.epi-card.wide{grid-column:1/-1}.epi-card h2,.epi-report h2{margin:0 0 12px;color:var(--navy);font-size:21px}.epi-card h3,.epi-report h3{margin:18px 0 10px;color:var(--navy);font-size:16px}.epi-card p,.epi-report p,.epi-report li{color:var(--muted);line-height:1.6}label{font-weight:850;color:var(--navy);font-size:13px;display:block;margin:12px 0 6px}input,select,textarea{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fafbfc;font-size:14px;font-family:inherit}textarea{resize:vertical;min-height:42px}dl{display:grid;grid-template-columns:120px 1fr;gap:9px 14px}dt{color:var(--muted);font-weight:700}dd{margin:0;font-weight:850}.epi-note{background:#fff8e8;border-left:5px solid var(--gold);padding:13px 14px;border-radius:14px;margin-top:14px;line-height:1.55;color:#4b3a13}.epi-alert{padding:12px 14px;border-radius:14px;background:#e9f7ef;color:#0c5e41;margin:10px 0;font-weight:800}.epi-alert.warn{background:#fff3dc;color:#6e3d00}.epi-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.epi-metrics div{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}.epi-metrics span{display:block;color:var(--muted);font-size:12px}.epi-metrics b{font-size:25px;color:var(--navy)}.epi-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.epi-form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 12px}.epi-crud-body{margin-top:14px}.crud-list{max-height:640px;overflow:auto}.epi-scenarios{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0}.epi-scenario{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fbfcfe}.epi-scenario h3{margin:0 0 8px;color:var(--navy)}.epi-scenario p{font-size:13px}.epi-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px}table{width:100%;border-collapse:collapse;background:white}th{background:#edf0f4;color:var(--navy);text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em}th,td{padding:13px;border-bottom:1px solid var(--line);vertical-align:top}td span,td small{color:var(--muted);line-height:1.45}.epi-bar{height:7px;background:#e8ebf0;border-radius:999px;overflow:hidden;margin:6px 0}.epi-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),var(--gold));border-radius:999px}.epi-login{min-height:calc(100vh - 28px);display:grid;place-items:center}.epi-login-card{width:min(430px,100%);background:white;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:26px;padding:28px}.epi-login-mark{width:50px;height:50px;border-radius:16px;background:linear-gradient(135deg,var(--orange),var(--gold));display:grid;place-items:center;color:white;font-weight:1000;margin-bottom:12px}.epi-login-card h1{margin:0;color:var(--navy)}.epi-login-card small{display:block;color:var(--muted);margin-top:12px;line-height:1.5}
@media(max-width:900px){.epi-head-top{grid-template-columns:1fr}.epi-grid.two,.epi-form-grid,.epi-scenarios,.epi-metrics{grid-template-columns:1fr}.epi-head-student{min-width:0}.epi-toolbar{display:block}.epi-app{padding:8px}th,td{font-size:12px}.epi-card,.epi-report{padding:15px;border-radius:16px}.epi-header{border-radius:14px}.epi-header h1{font-size:19px}.epi-nav button{padding:9px 11px}}
@media print{.epi-header,.no-print,.epi-card:not(.epi-report){display:none!important}.epi-app{background:white;padding:0}.epi-report{box-shadow:none;border:0}.epi-report *{color:#111!important}}


/* v3.3 clickable detail modal */
.epi-linklike,.epi-inline-link{border:0;background:transparent;color:var(--navy);padding:0;border-radius:0;font-weight:950;text-align:left;text-decoration:underline;text-decoration-color:rgba(215,119,47,.45);text-underline-offset:3px;cursor:pointer;line-height:1.35}
.epi-linklike:hover,.epi-inline-link:hover{color:var(--orange)}
.epi-modal-backdrop{position:fixed;inset:0;background:rgba(12,18,30,.62);z-index:99999;display:grid;place-items:center;padding:18px}
.epi-modal{width:min(920px,100%);max-height:min(88vh,900px);overflow:hidden;background:#fff;border-radius:24px;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.28);display:flex;flex-direction:column}
.epi-modal-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:18px 20px;background:linear-gradient(135deg,#f7f8fa,#edf1f6);border-bottom:1px solid var(--line)}
.epi-modal-head span{display:block;color:var(--orange);font-weight:950;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.epi-modal-head h2{margin:2px 0 0;font-size:22px;color:var(--navy);line-height:1.15}
.epi-modal-close{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:24px;line-height:1;font-weight:900}
.epi-modal-body{overflow:auto;padding:18px 20px}
.epi-modal-section{border:1px solid var(--line);background:#fbfcfe;border-radius:18px;padding:15px;margin-bottom:12px}
.epi-modal-section h3{margin:0 0 10px;color:var(--navy);font-size:16px}
.epi-modal-section p{margin:7px 0;color:var(--text);line-height:1.58}
.epi-kv{display:grid;grid-template-columns:170px 1fr;gap:8px 14px}
.epi-kv b{color:var(--muted);font-size:13px}
.epi-kv span{font-weight:750;color:var(--text)}
.epi-score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.epi-score-grid div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.epi-score-grid span{display:block;color:var(--muted);font-size:12px}
.epi-score-grid b{font-size:24px;color:var(--navy)}
.epi-link-list a,.epi-modal-section a{color:var(--orange);font-weight:850;word-break:break-word}
.epi-chip-list{display:flex;flex-wrap:wrap;gap:8px}
.epi-modal-chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;color:var(--navy);font-weight:850}

@media(max-width:680px){
  .epi-app{padding:6px}
  .epi-header{position:relative;padding:10px;margin-bottom:10px}
  .epi-head-top{gap:8px}
  .epi-head-student{padding:8px 10px}
  .epi-nav{gap:6px}
  .epi-nav button,.epi-subnav button,.epi-filter button,.epi-actions button{padding:9px 10px;font-size:12px}
  .epi-card,.epi-report{padding:13px;margin-bottom:10px}
  .epi-table-wrap{border-radius:12px}
  table{min-width:760px}
  th,td{padding:10px;font-size:12px}
  .epi-modal-backdrop{padding:8px;align-items:end}
  .epi-modal{max-height:92vh;border-radius:20px 20px 0 0}
  .epi-modal-head{padding:14px}
  .epi-modal-head h2{font-size:18px}
  .epi-modal-body{padding:12px}
  .epi-modal-section{padding:12px;border-radius:14px}
  .epi-kv{grid-template-columns:1fr;gap:3px}
  .epi-kv b{margin-top:8px}
  .epi-score-grid{grid-template-columns:repeat(2,1fr)}
}


/* v3.4 — FOS-inspired visual system + font scale +30%
   Reference direction: clean internal OS surface, navy/gold identity, simple WordPress-like hierarchy. */
:root{
  --fos-navy:#001d39;
  --fos-navy-2:#0d2947;
  --fos-ink:#0f172a;
  --fos-slate:#f3f5f7;
  --fos-slate-2:#e7ebf0;
  --fos-gold:#985e23;
  --fos-gold-2:#c89445;
  --fos-card:#ffffff;
  --fos-muted:#64748b;
  --fos-line:#d5dbe3;
  --navy:var(--fos-navy);
  --navy2:var(--fos-navy-2);
  --gray:var(--fos-slate);
  --gray2:var(--fos-slate-2);
  --text:var(--fos-ink);
  --muted:var(--fos-muted);
  --gold:var(--fos-gold-2);
  --orange:var(--fos-gold);
  --line:var(--fos-line);
  --shadow:0 16px 42px rgba(0,29,57,.10);
}

/* 30% larger general readability */
.epi-app{
  font-size:18px;
  line-height:1.58;
  background:
    radial-gradient(circle at top left,rgba(152,94,35,.10),transparent 34%),
    linear-gradient(135deg,#f7f8fa 0%,#eef1f5 48%,#e7ecf2 100%);
}
.epi-shell{max-width:1280px}

/* Header: compact, menu inside, FOS-style navy/gold */
.epi-header{
  border-radius:18px;
  border:1px solid rgba(0,29,57,.12);
  background:
    linear-gradient(135deg,rgba(255,255,255,.96),rgba(241,244,248,.96));
  box-shadow:0 14px 40px rgba(0,29,57,.10);
}
.epi-kicker{
  color:var(--fos-gold);
  font-size:14px;
  letter-spacing:.12em;
}
.epi-header h1{
  color:var(--fos-navy);
  font-size:29px;
  letter-spacing:-.55px;
}
.epi-head-student{
  border-radius:16px;
  border:1px solid rgba(0,29,57,.12);
  background:#fff;
}
.epi-head-student b{font-size:18px;color:var(--fos-navy)}
.epi-head-student span{font-size:16px;color:var(--fos-muted)}

.epi-nav button,.epi-subnav button,.epi-filter button,.epi-actions button,button{
  font-size:17px;
  padding:12px 18px;
  border-radius:999px;
}
.epi-nav button.active,.epi-filter button.on,.epi-subnav button.on,.epi-login-card button,.epi-actions button:first-child{
  background:linear-gradient(135deg,var(--fos-navy),var(--fos-navy-2));
  border-color:var(--fos-navy);
  color:#fff;
  box-shadow:0 8px 22px rgba(0,29,57,.18);
}
.epi-actions button:first-child{
  background:linear-gradient(135deg,var(--fos-gold),var(--fos-gold-2));
  border-color:var(--fos-gold);
}
.epi-logout{
  font-size:16px;
  background:linear-gradient(135deg,var(--fos-navy),var(--fos-navy-2));
}

/* Cards, titles, body hierarchy */
.epi-card,.epi-report{
  border-radius:22px;
  border:1px solid rgba(0,29,57,.12);
  box-shadow:0 14px 38px rgba(0,29,57,.08);
}
.epi-card h2,.epi-report h2{
  font-size:27px;
  color:var(--fos-navy);
  letter-spacing:-.25px;
}
.epi-card h3,.epi-report h3{
  font-size:21px;
  color:var(--fos-navy);
}
.epi-card p,.epi-report p,.epi-report li{
  font-size:18px;
  line-height:1.68;
}
label{font-size:17px}
input,select,textarea{
  font-size:18px;
  padding:14px 15px;
  border-radius:16px;
}
dt,dd{font-size:18px}
.epi-note{
  font-size:18px;
  border-left-color:var(--fos-gold);
  background:#fff7eb;
}

/* KPI, scenario, table */
.epi-metrics span{font-size:16px}
.epi-metrics b{font-size:33px}
.epi-scenario h3{font-size:21px}
.epi-scenario p,.epi-scenario small{font-size:17px}
th{
  font-size:15.5px;
  background:#eef2f6;
}
td{
  font-size:17px;
}
td span,td small{
  font-size:15.5px;
}
.epi-linklike,.epi-inline-link{
  color:var(--fos-navy);
  text-decoration-color:rgba(152,94,35,.5);
  font-size:inherit;
}
.epi-linklike:hover,.epi-inline-link:hover{color:var(--fos-gold)}

/* Modal */
.epi-modal{
  border-radius:24px;
  box-shadow:0 34px 100px rgba(0,29,57,.34);
}
.epi-modal-head{
  background:
    linear-gradient(135deg,#ffffff,#eef2f6);
}
.epi-modal-head span{font-size:14px;color:var(--fos-gold)}
.epi-modal-head h2{font-size:29px;color:var(--fos-navy)}
.epi-modal-section h3{font-size:21px}
.epi-modal-section p{font-size:18px}
.epi-kv b,.epi-kv span{font-size:17px}
.epi-score-grid span{font-size:15.5px}
.epi-score-grid b{font-size:31px}
.epi-modal-chip{font-size:16px}

/* Login */
.epi-login-card h1{font-size:30px;color:var(--fos-navy)}
.epi-login-card p,.epi-login-card small{font-size:17px}
.epi-login-mark{
  background:linear-gradient(135deg,var(--fos-navy),var(--fos-gold));
}

/* Better mobile behavior with larger font */
@media(max-width:900px){
  .epi-app{font-size:17px}
  .epi-header h1{font-size:25px}
  .epi-kicker{font-size:12.5px}
  .epi-head-student b{font-size:17px}
  .epi-head-student span{font-size:14.5px}
  .epi-card h2,.epi-report h2{font-size:24px}
  .epi-card h3,.epi-report h3{font-size:20px}
  .epi-card p,.epi-report p,.epi-report li{font-size:17px}
  .epi-nav button,.epi-subnav button,.epi-filter button,.epi-actions button,button{font-size:16px;padding:11px 14px}
  th,td{font-size:15.5px}
  td span,td small{font-size:14.5px}
  table{min-width:820px}
}
@media(max-width:680px){
  .epi-app{font-size:16.5px;padding:6px}
  .epi-header{border-radius:14px}
  .epi-header h1{font-size:23px}
  .epi-nav{display:grid;grid-template-columns:repeat(2,1fr)}
  .epi-nav button{width:100%}
  .epi-card,.epi-report{border-radius:16px}
  .epi-card h2,.epi-report h2{font-size:22px}
  .epi-metrics b{font-size:29px}
  .epi-modal-head h2{font-size:22px}
  .epi-modal-section h3{font-size:19px}
  .epi-modal-section p,.epi-kv b,.epi-kv span{font-size:16px}
  input,select,textarea{font-size:16.5px}
}


/* v3.5 — editable modal forms */
.epi-modal-footer{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
  padding:14px 20px;
  border-top:1px solid var(--line);
  background:#f8fafc;
}
.epi-modal-footer button{
  background:linear-gradient(135deg,var(--fos-gold),var(--fos-gold-2));
  border-color:var(--fos-gold);
  color:#fff;
}
.epi-modal-footer button.light{
  background:#fff;
  color:var(--fos-navy);
  border-color:var(--line);
}
.epi-modal-form .epi-form-grid{
  grid-template-columns:repeat(2,1fr);
}
.epi-modal-form textarea,
.epi-modal-form input{
  background:#fff;
}
.epi-muted{color:var(--muted);font-size:.95em}
@media(max-width:680px){
  .epi-modal-footer{position:sticky;bottom:0;padding:10px 12px}
  .epi-modal-footer button{width:100%}
  .epi-modal-form .epi-form-grid{grid-template-columns:1fr}
}


/* v3.6 — mobile-fit layout corrections
   Request: menu buttons square corners, full-width pages/tables, slideable tables,
   font -20%, mobile adjusted, dark-orange header with bright contrast text. */
:root{
  --epi-dark-orange:#8f4517;
  --epi-dark-orange-2:#5f2b10;
  --epi-bright:#fff7ea;
  --epi-bright-soft:#ffe5bd;
}

/* Full width page */
.epi-app{
  padding:0;
  font-size:14.4px; /* -20% from v3.4/v3.5 18px baseline */
}
.epi-shell{
  max-width:none;
  width:100%;
  margin:0;
  padding:10px;
}

/* Header dark orange; all header text bright/contrasty */
.epi-header{
  background:
    radial-gradient(circle at top left,rgba(255,229,189,.18),transparent 34%),
    linear-gradient(135deg,var(--epi-dark-orange),var(--epi-dark-orange-2));
  border-radius:0;
  border:0;
  margin:0 0 12px 0;
  box-shadow:0 12px 30px rgba(95,43,16,.22);
}
.epi-header,
.epi-header *{
  color:var(--epi-bright)!important;
}
.epi-kicker{
  color:var(--epi-bright-soft)!important;
  font-size:11.2px;
}
.epi-header h1{
  color:white!important;
  font-size:23.2px; /* 29px -20% */
}
.epi-head-student{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.23);
  border-radius:0;
}
.epi-head-student b{
  font-size:14.4px;
  color:#fff!important;
}
.epi-head-student span{
  font-size:12.8px;
  color:var(--epi-bright-soft)!important;
}
.epi-logout{
  background:rgba(255,255,255,.15)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  color:#fff!important;
  border-radius:0!important;
  font-size:12.8px;
}

/* Button/menu round corner = 0 */
.epi-nav button,
.epi-subnav button,
.epi-filter button,
.epi-actions button,
.epi-login-card button,
button,
.epi-modal-chip,
.epi-modal-close{
  border-radius:0!important;
  font-size:13.6px; /* -20% from 17px */
  padding:10px 14px;
}
.epi-nav button{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);
  color:#fff!important;
}
.epi-nav button.active{
  background:#fff!important;
  color:var(--epi-dark-orange-2)!important;
  border-color:#fff!important;
  box-shadow:none;
}

/* Content full width */
main,
.epi-grid,
.epi-card,
.epi-report,
.epi-table-wrap{
  width:100%;
}
.epi-card,.epi-report{
  border-radius:0;
  margin-bottom:12px;
  padding:17px; /* 21px -20% */
}
.epi-card h2,.epi-report h2{
  font-size:21.6px; /* 27px -20% */
}
.epi-card h3,.epi-report h3{
  font-size:16.8px; /* 21px -20% */
}
.epi-card p,.epi-report p,.epi-report li{
  font-size:14.4px;
}
label{
  font-size:13.6px;
}
input,select,textarea{
  font-size:14.4px;
  padding:11px 12px;
  border-radius:0!important;
}
dt,dd{
  font-size:14.4px;
}
.epi-note{
  font-size:14.4px;
  border-radius:0;
}

/* Metrics/font size down */
.epi-metrics span{
  font-size:12.8px;
}
.epi-metrics b{
  font-size:26.4px; /* 33 -20% */
}
.epi-scenario{
  border-radius:0;
}
.epi-scenario h3{
  font-size:16.8px;
}
.epi-scenario p,.epi-scenario small{
  font-size:13.6px;
}

/* Tables: fit container + slideable */
.epi-table-wrap{
  display:block;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:0;
}
table{
  width:100%;
  min-width:980px; /* force slide when content is too dense */
  table-layout:auto;
}
th{
  font-size:12.4px;
  white-space:nowrap;
}
td{
  font-size:13.6px;
}
td span,td small{
  font-size:12.4px;
}

/* Modal font down and full mobile fit */
.epi-modal{
  border-radius:0;
}
.epi-modal-head h2{
  font-size:23.2px;
}
.epi-modal-head span{
  font-size:11.2px;
}
.epi-modal-section{
  border-radius:0;
}
.epi-modal-section h3{
  font-size:16.8px;
}
.epi-modal-section p{
  font-size:14.4px;
}
.epi-kv b,.epi-kv span{
  font-size:13.6px;
}
.epi-score-grid span{
  font-size:12.4px;
}
.epi-score-grid b{
  font-size:24.8px;
}
.epi-modal-chip{
  font-size:12.8px;
}
.epi-modal-footer{
  border-radius:0;
}

/* Login form follows square corners */
.epi-login-card,
.epi-login-mark{
  border-radius:0;
}
.epi-login-card h1{
  font-size:24px;
}
.epi-login-card p,.epi-login-card small{
  font-size:13.6px;
}

/* Mobile adjustments */
@media(max-width:900px){
  .epi-shell{
    padding:7px;
  }
  .epi-app{
    font-size:13.6px;
  }
  .epi-header h1{
    font-size:20px;
  }
  .epi-kicker{
    font-size:10.5px;
  }
  .epi-head-student b{
    font-size:13.6px;
  }
  .epi-head-student span{
    font-size:11.6px;
  }
  .epi-card,.epi-report{
    padding:14px;
  }
  .epi-card h2,.epi-report h2{
    font-size:19.2px;
  }
  .epi-card h3,.epi-report h3{
    font-size:16px;
  }
  .epi-card p,.epi-report p,.epi-report li{
    font-size:13.6px;
  }
  .epi-nav button,.epi-subnav button,.epi-filter button,.epi-actions button,button{
    font-size:12.8px;
    padding:9px 11px;
  }
  table{
    min-width:900px;
  }
  th,td{
    font-size:12.8px;
  }
  td span,td small{
    font-size:11.6px;
  }
}

@media(max-width:680px){
  .epi-app{
    font-size:13.2px;
  }
  .epi-shell{
    padding:5px;
  }
  .epi-header{
    padding:9px;
  }
  .epi-header h1{
    font-size:18.4px;
  }
  .epi-nav{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px;
  }
  .epi-nav button{
    width:100%;
    padding:9px 7px;
  }
  .epi-subnav,
  .epi-filter,
  .epi-actions{
    gap:6px;
  }
  .epi-subnav button,
  .epi-filter button,
  .epi-actions button{
    flex:1 1 auto;
  }
  .epi-card,.epi-report{
    padding:12px;
  }
  .epi-card h2,.epi-report h2{
    font-size:17.6px;
  }
  .epi-metrics{
    grid-template-columns:repeat(2,1fr);
    gap:7px;
  }
  .epi-metrics b{
    font-size:23.2px;
  }
  table{
    min-width:860px;
  }
  .epi-modal-backdrop{
    padding:0;
    align-items:end;
  }
  .epi-modal{
    width:100%;
    max-height:94vh;
  }
  .epi-modal-head{
    padding:12px;
  }
  .epi-modal-head h2{
    font-size:17.6px;
  }
  .epi-modal-body{
    padding:10px;
  }
  .epi-modal-section{
    padding:10px;
  }
  .epi-modal-section h3{
    font-size:15.2px;
  }
  .epi-modal-section p,
  .epi-kv b,
  .epi-kv span{
    font-size:12.8px;
  }
  input,select,textarea{
    font-size:13.2px;
  }
}


/* v3.7 — header layout refinement from screenshot
   Badge nama pindah ke kanan judul; menu pindah ke kiri tombol Keluar. */
.epi-header{
  padding:14px;
}
.epi-head-row{
  display:grid;
  grid-template-columns:auto minmax(260px,360px) 1fr auto;
  grid-template-areas:"title student nav logout";
  gap:10px;
  align-items:center;
  width:100%;
}
.epi-title-wrap{grid-area:title;min-width:330px}
.epi-head-student{grid-area:student;margin-left:10px}
.epi-nav{
  grid-area:nav;
  justify-content:flex-end;
  margin-top:0!important;
}
.epi-logout{grid-area:logout}
.epi-nav button{
  min-width:104px;
}

/* Keep contrast in repositioned header */
.epi-title-wrap h1,
.epi-title-wrap .epi-kicker,
.epi-head-student b,
.epi-head-student span{
  color:var(--epi-bright)!important;
}
.epi-head-student{
  max-width:360px;
}

/* Tablet: title + badge same row, menu/logout row below but right aligned */
@media(max-width:1100px){
  .epi-head-row{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "title student"
      "nav logout";
  }
  .epi-title-wrap{min-width:0}
  .epi-head-student{margin-left:0;min-width:260px}
  .epi-nav{justify-content:flex-start}
}

/* Mobile: compact but preserves requested order logically */
@media(max-width:680px){
  .epi-header{padding:9px}
  .epi-head-row{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "student"
      "nav"
      "logout";
    gap:8px;
  }
  .epi-head-student{
    max-width:none;
    min-width:0;
    width:100%;
  }
  .epi-nav{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    justify-content:stretch;
  }
  .epi-logout{
    width:100%;
  }
}


/* v3.8 — mobile dropdown nav, title simplification, table containment */
.epi-mobile-menu{display:none}

/* title becomes a single concise system title */
.epi-title-wrap h1{
  margin:0!important;
}
.epi-kicker{display:none!important}

/* Prevent mobile overflow in cards/grid/tables */
.epi-grid,
.epi-grid.two,
.epi-card,
.epi-report,
.epi-table-wrap,
.epi-card *{
  min-width:0;
}
.epi-grid.two{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.epi-table-wrap{
  max-width:100%;
  width:100%;
  overflow-x:auto!important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.epi-table-wrap table{
  width:max-content;
  min-width:100%;
}

/* Grade table and long text in Nilai & Minat must not force the page wider */
.epi-card .epi-table-wrap{
  contain:layout paint;
}
.epi-card td,
.epi-card th{
  overflow-wrap:normal;
}
.epi-card p,
.epi-card dd,
.epi-card span,
.epi-card small{
  overflow-wrap:anywhere;
}

/* Mobile: menu dropdown at top-right */
@media(max-width:680px){
  .epi-header{
    position:relative;
    padding-right:98px; /* room for dropdown trigger */
  }
  .epi-head-row{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "student"
      "logout";
    gap:8px;
  }
  .epi-title-wrap{grid-area:title}
  .epi-head-student{grid-area:student}
  .epi-logout{grid-area:logout}
  .epi-mobile-menu{
    display:block!important;
    position:absolute;
    top:9px;
    right:9px;
    z-index:60;
    background:#fff!important;
    color:var(--epi-dark-orange-2)!important;
    border:1px solid rgba(255,255,255,.6)!important;
    min-width:80px;
    text-align:center;
    font-weight:900;
  }
  .epi-nav{
    display:none!important;
    position:absolute;
    top:47px;
    right:9px;
    z-index:70;
    width:min(230px,calc(100vw - 18px));
    background:#fff;
    border:1px solid rgba(95,43,16,.25);
    box-shadow:0 16px 42px rgba(0,0,0,.22);
    padding:6px;
    grid-template-columns:1fr!important;
    gap:4px;
  }
  .epi-nav.open{
    display:grid!important;
  }
  .epi-nav button{
    width:100%;
    background:#fff!important;
    color:var(--epi-dark-orange-2)!important;
    border:1px solid #ead7c9!important;
    text-align:left;
  }
  .epi-nav button.active{
    background:var(--epi-dark-orange)!important;
    color:#fff!important;
    border-color:var(--epi-dark-orange)!important;
  }

  /* Nilai & Minat and all content stay inside page width */
  .epi-shell,
  main,
  section,
  .epi-card,
  .epi-report{
    max-width:100vw!important;
    overflow-x:hidden;
  }
  .epi-grid.two{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .epi-table-wrap{
    max-width:100%;
    overflow-x:auto!important;
  }
  .epi-table-wrap table{
    width:max-content;
    min-width:760px; /* slideable on mobile, contained by wrapper */
  }
}


/* v3.9 — header title order, logout in menu, SNBP chance, fixed footer */
.epi-app{
  padding-bottom:44px!important;
}
.epi-head-row{
  grid-template-columns:1fr auto!important;
  grid-template-areas:"title nav"!important;
  align-items:center;
}
.epi-title-wrap{
  grid-area:title!important;
  min-width:0!important;
}
.epi-title-wrap h1{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin:0!important;
  color:#fff!important;
  font-size:20px!important;
  line-height:1.15;
}
.epi-title-wrap h1 span{
  color:#fff!important;
  font-weight:950;
}
.epi-title-wrap h1 em{
  color:var(--epi-bright-soft)!important;
  font-style:normal;
  font-weight:700;
}
.epi-title-wrap h1 strong{
  color:#fff7d7!important;
  font-weight:950;
}
.epi-subtitle{
  color:var(--epi-bright-soft)!important;
  font-size:12.6px;
  margin-top:5px;
  font-weight:750;
}
.epi-head-student,
.epi-logout{
  display:none!important;
}
.epi-nav{
  grid-area:nav!important;
  justify-content:flex-end;
  align-items:center;
  margin:0!important;
}
.epi-menu-logout{
  background:rgba(255,255,255,.15)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  color:#fff!important;
}
.epi-nav button.active{
  background:#fff!important;
  color:var(--epi-dark-orange-2)!important;
}
.epi-snbp{
  display:inline-block;
  padding:5px 9px;
  border:1px solid var(--line);
  font-weight:950;
  background:#f8fafc;
  color:var(--fos-navy);
}
.epi-snbp.high{
  background:#eaf7ef;
  color:#0d6b45;
  border-color:#b9dfc7;
}
.epi-snbp.mid{
  background:#fff7e6;
  color:#8a4d0d;
  border-color:#efd29c;
}
.epi-snbp.low{
  background:#fff0ed;
  color:#9f2f1d;
  border-color:#efb7ad;
}
.epi-fixed-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9990;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  background:linear-gradient(135deg,#5f2b10,#8f4517);
  color:#fff7ea;
  border-top:1px solid rgba(255,255,255,.22);
  font-size:12.6px;
  font-weight:850;
  box-shadow:0 -8px 22px rgba(0,0,0,.18);
}
.epi-fixed-footer b{
  color:#ffe5bd;
  white-space:nowrap;
}
#epiLiveTime{
  white-space:nowrap;
}

@media(max-width:680px){
  .epi-header{
    padding-right:94px!important;
  }
  .epi-head-row{
    grid-template-columns:1fr!important;
    grid-template-areas:"title"!important;
  }
  .epi-title-wrap h1{
    display:block;
    font-size:17px!important;
    padding-right:4px;
  }
  .epi-title-wrap h1 em{
    display:inline;
    margin:0 5px;
  }
  .epi-title-wrap h1 strong{
    display:inline;
  }
  .epi-subtitle{
    font-size:11.4px;
    line-height:1.35;
    padding-right:2px;
  }
  .epi-nav{
    top:47px!important;
    right:9px!important;
  }
  .epi-menu-logout{
    background:#fff!important;
    color:var(--epi-dark-orange-2)!important;
    border:1px solid #ead7c9!important;
  }
  .epi-fixed-footer{
    font-size:10.8px;
    padding:6px 8px;
    min-height:32px;
  }
  #epiLiveTime{
    white-space:normal;
    line-height:1.25;
  }
}


/* v4.0 hard override: requested header/menu/footer must visibly change */
.epi-app{padding-bottom:44px!important}
.epi-v40-header{
  background:linear-gradient(135deg,#8f4517,#5f2b10)!important;
  color:#fff7ea!important;
  border-radius:0!important;
}
.epi-v40-header .epi-head-row{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  grid-template-areas:"title nav"!important;
  gap:12px!important;
  align-items:center!important;
}
.epi-v40-header .epi-title-wrap{grid-area:title!important;min-width:0!important}
.epi-v40-header .epi-title-wrap h1{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:baseline!important;
  gap:10px!important;
  margin:0!important;
  font-size:20px!important;
  line-height:1.15!important;
  color:#fff!important;
}
.epi-v40-header .epi-title-wrap h1 span,
.epi-v40-header .epi-title-wrap h1 strong{color:#fff7d7!important;font-weight:950!important}
.epi-v40-header .epi-title-wrap h1 em{color:#ffe5bd!important;font-style:normal!important}
.epi-v40-header .epi-subtitle{color:#ffe5bd!important;font-size:12.6px!important;margin-top:5px!important;font-weight:800!important}
.epi-v40-header .epi-head-student,.epi-v40-header .epi-logout{display:none!important}
.epi-v40-header .epi-nav{grid-area:nav!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;margin:0!important;gap:8px!important}
.epi-v40-header .epi-nav button{
  border-radius:0!important;
  background:rgba(255,255,255,.12)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.28)!important;
}
.epi-v40-header .epi-nav button.active{
  background:#fff!important;
  color:#5f2b10!important;
  border-color:#fff!important;
}
.epi-v40-header .epi-menu-logout{
  background:rgba(255,255,255,.16)!important;
  color:#fff!important;
}
.epi-snbp{display:inline-block;padding:5px 9px;border:1px solid var(--line);font-weight:950;background:#f8fafc;color:var(--fos-navy)}
.epi-snbp.high{background:#eaf7ef;color:#0d6b45;border-color:#b9dfc7}
.epi-snbp.mid{background:#fff7e6;color:#8a4d0d;border-color:#efd29c}
.epi-snbp.low{background:#fff0ed;color:#9f2f1d;border-color:#efb7ad}
.epi-fixed-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:9990;display:flex;justify-content:space-between;gap:10px;align-items:center;
  min-height:34px;padding:7px 12px;background:linear-gradient(135deg,#5f2b10,#8f4517);color:#fff7ea;border-top:1px solid rgba(255,255,255,.22);
  font-size:12.6px;font-weight:850;box-shadow:0 -8px 22px rgba(0,0,0,.18)
}
.epi-fixed-footer b{color:#ffe5bd;white-space:nowrap}
#epiLiveTime{white-space:nowrap}
#epiAIPromptBox{font-family:Consolas,Menlo,monospace;font-size:13px;line-height:1.45}

@media(max-width:680px){
  .epi-v40-header{padding-right:94px!important;position:relative!important}
  .epi-v40-header .epi-head-row{display:block!important}
  .epi-v40-header .epi-title-wrap h1{display:block!important;font-size:17px!important;padding-right:0!important}
  .epi-v40-header .epi-title-wrap h1 em{display:inline!important;margin:0 5px!important}
  .epi-v40-header .epi-mobile-menu{
    display:block!important;position:absolute!important;top:9px!important;right:9px!important;z-index:60!important;
    background:#fff!important;color:#5f2b10!important;border:1px solid rgba(255,255,255,.7)!important;min-width:80px!important
  }
  .epi-v40-header .epi-nav{
    display:none!important;position:absolute!important;top:47px!important;right:9px!important;z-index:70!important;width:min(230px,calc(100vw - 18px))!important;
    background:#fff!important;border:1px solid rgba(95,43,16,.25)!important;box-shadow:0 16px 42px rgba(0,0,0,.22)!important;padding:6px!important;gap:4px!important
  }
  .epi-v40-header .epi-nav.open{display:grid!important;grid-template-columns:1fr!important}
  .epi-v40-header .epi-nav button{width:100%!important;background:#fff!important;color:#5f2b10!important;border:1px solid #ead7c9!important;text-align:left!important}
  .epi-v40-header .epi-nav button.active{background:#8f4517!important;color:#fff!important;border-color:#8f4517!important}
  .epi-fixed-footer{font-size:10.8px;padding:6px 8px;min-height:32px}
  #epiLiveTime{white-space:normal;line-height:1.25}
}


/* v4.3 clean governance hotfix from stable v4.0 */
.epi-layer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.epi-layer-card{border:1px solid var(--line);background:#fbfcfe;padding:13px}
.epi-layer-card h3{margin:0 0 8px;color:var(--fos-navy)}
.epi-layer-card p{margin:8px 0;font-size:13.2px}
#epiAIPromptBox{width:100%;font-family:Consolas,Menlo,monospace;font-size:13px;line-height:1.45;min-height:420px}
.epi-v43-header{background:linear-gradient(135deg,#8f4517,#5f2b10)!important;color:#fff7ea!important;border-radius:0!important}
.epi-v43-header .epi-head-row{display:grid!important;grid-template-columns:1fr auto!important;grid-template-areas:"title nav"!important;gap:12px!important;align-items:center!important}
.epi-v43-header .epi-title-wrap{grid-area:title!important;min-width:0!important}
.epi-v43-header .epi-title-wrap h1{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;gap:10px!important;margin:0!important;font-size:20px!important;line-height:1.15!important;color:#fff!important}
.epi-v43-header .epi-title-wrap h1 span,.epi-v43-header .epi-title-wrap h1 strong{color:#fff7d7!important;font-weight:950!important}
.epi-v43-header .epi-title-wrap h1 em{color:#ffe5bd!important;font-style:normal!important}
.epi-v43-header .epi-subtitle{color:#ffe5bd!important;font-size:12.6px!important;margin-top:5px!important;font-weight:800!important}
.epi-v43-header .epi-head-student,.epi-v43-header .epi-logout{display:none!important}
.epi-v43-header .epi-nav{grid-area:nav!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;margin:0!important;gap:8px!important}
.epi-v43-header .epi-nav button{border-radius:0!important;background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important}
.epi-v43-header .epi-nav button.active{background:#fff!important;color:#5f2b10!important;border-color:#fff!important}
@media(max-width:780px){.epi-layer-grid{grid-template-columns:1fr}.epi-layer-card p{font-size:12.8px}#epiAIPromptBox{min-height:520px;font-size:12px}}
@media(max-width:680px){
.epi-v43-header{padding-right:94px!important;position:relative!important}
.epi-v43-header .epi-head-row{display:block!important}
.epi-v43-header .epi-title-wrap h1{display:block!important;font-size:17px!important}
.epi-v43-header .epi-title-wrap h1 em{display:inline!important;margin:0 5px!important}
.epi-v43-header .epi-mobile-menu{display:block!important;position:absolute!important;top:9px!important;right:9px!important;z-index:60!important;background:#fff!important;color:#5f2b10!important;border:1px solid rgba(255,255,255,.7)!important;min-width:80px!important}
.epi-v43-header .epi-nav{display:none!important;position:absolute!important;top:47px!important;right:9px!important;z-index:70!important;width:min(230px,calc(100vw - 18px))!important;background:#fff!important;border:1px solid rgba(95,43,16,.25)!important;box-shadow:0 16px 42px rgba(0,0,0,.22)!important;padding:6px!important;gap:4px!important}
.epi-v43-header .epi-nav.open{display:grid!important;grid-template-columns:1fr!important}
.epi-v43-header .epi-nav button{width:100%!important;background:#fff!important;color:#5f2b10!important;border:1px solid #ead7c9!important;text-align:left!important}
.epi-v43-header .epi-nav button.active{background:#8f4517!important;color:#fff!important;border-color:#8f4517!important}
}


/* v4.4 — nilai rapor per semester */
.epi-grade-table-wrap{max-width:100%;overflow-x:auto}
.epi-grade-table{min-width:760px}
.epi-grade-table th,.epi-grade-table td{text-align:center}
.epi-grade-table th:first-child,.epi-grade-table td:first-child{text-align:left;min-width:190px}
.epi-grade-table input{min-width:72px;text-align:center}
.epi-grade-table .grade-subject,#newGradeSubject{text-align:left;min-width:170px}
.epi-new-grade-row td{background:#fffaf0}
@media(max-width:680px){
  .epi-grade-table{min-width:820px}
  .epi-grade-table input{min-width:64px}
}


/* v4.5 — Nilai & Minat read-only table per semester */
.epi-grade-view-wrap{
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.epi-grade-view{
  min-width:760px;
}
.epi-grade-view th,
.epi-grade-view td{
  text-align:center;
  white-space:nowrap;
}
.epi-grade-view th:first-child,
.epi-grade-view td:first-child{
  text-align:left;
  min-width:210px;
  position:sticky;
  left:0;
  background:#fff;
  z-index:1;
}
.epi-grade-view th:first-child{
  background:#edf0f4;
  z-index:2;
}
@media(max-width:680px){
  .epi-grade-view{min-width:820px}
  .epi-grade-view th:first-child,
  .epi-grade-view td:first-child{min-width:180px}
}


/* v4.6 hard fix - Nilai & Minat always per-semester */
.epi-nilai-minat-card{max-width:100%!important;overflow:hidden!important}
.epi-nilai-minat-card h2 small{font-size:.58em;color:var(--muted);font-weight:800}
.epi-grade-view-wrap{max-width:100%!important;width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;-webkit-overflow-scrolling:touch!important}
.epi-grade-view{width:max-content!important;min-width:760px!important;table-layout:auto!important}
.epi-grade-view th,.epi-grade-view td{text-align:center!important;white-space:nowrap!important}
.epi-grade-view th:first-child,.epi-grade-view td:first-child{text-align:left!important;min-width:210px!important;position:sticky!important;left:0!important;background:#fff!important;z-index:2!important}
.epi-grade-view th:first-child{background:#edf0f4!important;z-index:3!important}
@media(max-width:680px){
  .epi-grade-view{min-width:820px!important}
  .epi-grade-view th:first-child,.epi-grade-view td:first-child{min-width:170px!important}
}


/* v4.7 — nilai kosong berarti mapel tidak ada di semester tersebut */
.epi-grade-view td:empty::after,
.epi-grade-table td input[value=""]::after{content:""}
.epi-grade-view td{min-width:74px}
.epi-grade-view td:first-child{min-width:210px}
.epi-grade-table input.grade-sem,
.epi-grade-table input.new-grade-sem{background:#fff}