/* MPI PAIBP Fase D - Professional Responsive Theme */
:root{
  --p:#365f64;--pd:#243f4a;--blue:#3f5f79;--deep:#283d52;
  --teal:#4e7d74;--gold:#c5a15d;--cream:#fbf5e9;
  --ink:#27343a;--mut:#67747b;--line:#dce6e3;
  --shadow:0 16px 42px rgba(35,58,67,.09);
  --mpi-accent:#365f64;--mpi-accent-dark:#243f4a;--mpi-soft:#edf5f3;
}
html[data-mpi-class="7"]{
  --p:#356b61;--pd:#234940;--blue:#356b61;--deep:#234940;--teal:#54867d;
  --mpi-accent:#356b61;--mpi-accent-dark:#234940;--mpi-soft:#edf7f4;
}
html[data-mpi-class="8"]{
  --p:#405d78;--pd:#293f56;--blue:#405d78;--deep:#293f56;--teal:#4f7b78;
  --mpi-accent:#405d78;--mpi-accent-dark:#293f56;--mpi-soft:#eef3f8;
}
html[data-mpi-class="9"]{
  --p:#6a5262;--pd:#493844;--blue:#6a5262;--deep:#493844;--teal:#657b79;
  --mpi-accent:#6a5262;--mpi-accent-dark:#493844;--mpi-soft:#f6f0f4;
}
html{scrollbar-color:var(--mpi-accent) #eef2f2}
body{
  color:var(--ink)!important;
  background:
    radial-gradient(circle at 4% 0, color-mix(in srgb,var(--mpi-accent) 11%,transparent), transparent 27%),
    radial-gradient(circle at 98% 18%, rgba(197,161,93,.08), transparent 24%),
    linear-gradient(180deg,#fbfdfd 0%,#f7f7f2 100%)!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.top{
  background:rgba(255,255,255,.92)!important;
  border-bottom-color:rgba(138,158,164,.24)!important;
  box-shadow:0 5px 22px rgba(34,54,62,.045);
}
.logo,.brandlogo{box-shadow:0 7px 18px color-mix(in srgb,var(--mpi-accent) 24%,transparent)!important}
.heroBox{
  background:
    radial-gradient(circle at 86% 12%,rgba(197,161,93,.28),transparent 25%),
    radial-gradient(circle at 8% 90%,rgba(255,255,255,.07),transparent 30%),
    linear-gradient(135deg,var(--mpi-accent-dark),var(--mpi-accent))!important;
  box-shadow:0 24px 58px color-mix(in srgb,var(--mpi-accent-dark) 20%,transparent)!important;
}
.classCard,.module,.card,.stat,.secure>div{
  border-color:rgba(126,150,151,.23)!important;
  box-shadow:var(--shadow)!important;
}
.classCard,.module,article.card{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.classCard:hover,.module:hover,article.card:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 50px rgba(35,58,67,.12)!important;
  border-color:color-mix(in srgb,var(--mpi-accent) 35%,#dce6e3)!important;
}
.classCard[data-class-card="7"]{border-top:4px solid #356b61!important}
.classCard[data-class-card="8"]{border-top:4px solid #405d78!important}
.classCard[data-class-card="9"]{border-top:4px solid #6a5262!important}
.classCard[data-class-card="7"] .classNum{color:#356b61!important}
.classCard[data-class-card="8"] .classNum{color:#405d78!important}
.classCard[data-class-card="9"] .classNum{color:#6a5262!important}
.classCard[data-class-card="7"] .primary{background:#356b61!important}
.classCard[data-class-card="8"] .primary{background:#405d78!important}
.classCard[data-class-card="9"] .primary{background:#6a5262!important}
.btn{
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
  letter-spacing:.005em;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(35,58,67,.11);filter:saturate(.96)}
.primary{background:var(--mpi-accent)!important;color:#fff!important}
.primary:hover{background:var(--mpi-accent-dark)!important}
.outline{background:rgba(255,255,255,.93)!important;border-color:rgba(126,150,151,.30)!important;color:var(--mpi-accent-dark)!important}
.gold,.goldbtn{background:#c5a15d!important;color:#2f260f!important}
.tag,.ey,.badge,.chip{border-color:rgba(126,150,151,.20)!important}
.tag,.badge{background:var(--mpi-soft)!important;color:var(--mpi-accent-dark)!important}
.notice,.note.warn{background:#fff8ea!important;border-left-color:#c5a15d!important}
.activeBox,.note.good{background:#edf8f3!important}
input,select,textarea{
  border-color:#d3dfdc!important;
  background:#fff!important;
  box-shadow:inset 0 1px 2px rgba(35,58,67,.025);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--mpi-accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mpi-accent) 14%,transparent)!important;
  outline:none!important;
}
table{border-radius:12px;overflow:hidden}
th{background:var(--mpi-soft)!important;color:var(--mpi-accent-dark)!important}
.side{border-right-color:rgba(126,150,151,.24)!important;box-shadow:5px 0 22px rgba(35,58,67,.025)}
.nav.active,.nav:hover{background:var(--mpi-soft)!important;color:var(--mpi-accent-dark)!important}
.bar span{background:linear-gradient(90deg,var(--mpi-accent),#c5a15d)!important}
.modalCard,.modalcard{border:1px solid rgba(255,255,255,.55);box-shadow:0 28px 90px rgba(20,35,42,.26)!important}
.mpi-universal-footer{
  margin-top:44px!important;
  padding:24px 16px!important;
  border-top:1px solid rgba(126,150,151,.24)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(238,244,242,.72))!important;
  text-align:center!important;
  color:var(--mpi-accent-dark)!important;
  font-size:.86rem!important;
  font-weight:850!important;
  letter-spacing:.035em!important;
}
.mpi-footer-hidden{display:none!important}
@media(max-width:880px){
  .heroBox{border-radius:22px!important}
  .classCard,.module,.card{border-radius:16px!important}
}
@media(max-width:620px){
  body{background:linear-gradient(180deg,#fbfdfd,#f7f7f2)!important}
  .heroBox{padding:25px 20px!important;border-radius:18px!important}
  .hero h1,.heroBox h1{font-size:clamp(1.8rem,9vw,2.65rem)!important}
  .module .btn,.classCard .btn{width:100%!important}
  .topin{gap:8px!important}
  .mpi-universal-footer{font-size:.78rem!important;padding:20px 12px!important;letter-spacing:.02em!important}
}
@media(max-width:390px){
  .btn{padding-left:11px!important;padding-right:11px!important}
  .wrap{width:min(100% - 18px,1180px)!important}
}
@media print{
  .mpi-universal-footer{background:#fff!important;color:#222!important;border-top:1px solid #bbb!important;box-shadow:none!important}
}

/* 2026 refinement: softer contrast, clearer hierarchy, touch-friendly responsive layout */
body{line-height:1.58!important}
::selection{background:transparent;color:inherit}
.top,.side,.heroBox,.classCard,.module,.card,.modalCard,.modalcard{backdrop-filter:saturate(115%)}
.heroBox{position:relative;overflow:hidden}
.heroBox:after{content:"";position:absolute;width:220px;height:220px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-75px;bottom:-105px;box-shadow:0 0 0 34px rgba(255,255,255,.025),0 0 0 70px rgba(255,255,255,.018);pointer-events:none}
.section> .wrap>h2,.sec>.title{letter-spacing:-.018em}
.classCard,.module,.card{background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(253,254,254,.97))!important}
.module{overflow:hidden}
.module:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--mpi-accent),#c5a15d);opacity:.88}
.moduleNo{color:color-mix(in srgb,var(--mpi-accent) 26%,#cbd4df)!important}
.module h3,.classCard h3,.card h3{color:var(--mpi-accent-dark)}
.classCard p,.module p,.lead,.sub{color:#64737b!important}
.sec>.ey,.tag,.badge{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.notice,.note{border-radius:13px!important}
.top .btn,.topin .btn{white-space:nowrap}
.mpi-universal-footer strong{display:inline-block;max-width:100%;line-height:1.55}
@media(max-width:860px){
  .top{backdrop-filter:blur(9px)!important}
  main{padding-bottom:84px!important}
  #mpi-class-nav{left:10px!important;right:10px!important;bottom:10px!important;justify-content:center!important}
  #mpi-class-nav a{width:100%!important;text-align:center!important}
}
@media(max-width:620px){
  .card,.module,.classCard{box-shadow:0 10px 28px rgba(35,58,67,.075)!important}
  .stats{gap:9px!important}
  .stat{padding:13px!important}
  .mpi-universal-footer{margin-top:34px!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}