:root{
  --mph-ink:#070a10;
  --mph-gold:#d9b875;
  --mph-ivory:#f7f2e8;
  --mph-emerald:#0f4e46;
  --mph-burgundy:#651d2b;
  --mph-blue:#0c5676;
}
.mph100-shell{
  position:relative;
  overflow:hidden;
  padding:clamp(22px,4vw,54px);
  border-radius:34px;
  color:var(--mph-ivory);
  background:
    radial-gradient(circle at 15% 10%,rgba(32,132,165,.28),transparent 34%),
    radial-gradient(circle at 85% 20%,rgba(221,142,31,.24),transparent 31%),
    radial-gradient(circle at 82% 84%,rgba(108,19,28,.32),transparent 35%),
    linear-gradient(135deg,rgba(5,13,23,.88),rgba(11,39,50,.78) 45%,rgba(42,9,18,.82));
  box-shadow:0 24px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.mph100-shell:before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 0 35%,rgba(255,255,255,.035) 36% 37%,transparent 38% 100%);
  pointer-events:none;
}
.mph100-topline,.mph100-card-label{
  letter-spacing:.22em;
  font-size:11px;
  font-weight:800;
  color:var(--mph-gold);
  text-transform:uppercase;
}
.mph100-headline{
  color:#fff!important;
  font-size:clamp(34px,5vw,72px)!important;
  line-height:.98!important;
  margin:10px 0 12px!important;
  font-weight:700!important;
  letter-spacing:-.04em;
}
.mph100-subheadline{font-size:clamp(15px,2vw,22px);opacity:.82;margin:0 0 30px;}
.mph100-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:24px 0;}
.mph100-glass{
  border:1px solid rgba(255,255,255,.34);
  background:linear-gradient(135deg,rgba(255,255,255,.20),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 40px rgba(0,0,0,.20);
  border-radius:24px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.mph100-feature{padding:28px;text-align:center;min-height:210px;display:flex;flex-direction:column;justify-content:center;}
.mph100-eyebrow{font-size:17px;letter-spacing:.04em;margin-bottom:16px;color:#fff;}
.mph100-track{font-size:clamp(24px,3vw,40px);font-weight:750;line-height:1.05;margin-bottom:8px;}
.mph100-artist{font-size:clamp(16px,2vw,23px);opacity:.88;margin-bottom:12px;}
.mph100-feature p{margin:8px auto 0;max-width:620px;line-height:1.75;opacity:.9;}
.mph100-table-wrap{padding:22px;margin-top:22px;overflow:hidden;}
.mph100-section-title{text-align:center;font-size:clamp(28px,4vw,48px);font-weight:650;letter-spacing:.02em;}
.mph100-period{text-align:center;opacity:.65;margin:6px 0 18px;}
.mph100-table{overflow:hidden;border-radius:18px;background:rgba(7,10,16,.30);}
.mph100-tr{display:grid;grid-template-columns:70px 70px minmax(230px,1.5fr) minmax(180px,1fr);gap:10px;align-items:center;padding:15px 18px;border-top:1px solid rgba(255,255,255,.11);}
.mph100-tr:first-child{border-top:0;}
.mph100-th{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--mph-gold);background:rgba(0,0,0,.26);font-weight:800;}
.mph100-rank{font-size:22px;font-weight:800;}
.mph100-move{font-weight:900}.mph100-move.up{color:#7fe0c0}.mph100-move.down{color:#ff9b9b}.mph100-move.new{color:#ffd485}.mph100-move.same{opacity:.65}
.mph100-title-cell{display:flex;flex-direction:column;gap:4px}.mph100-title-cell small{opacity:.62;font-weight:400;line-height:1.35}
.mph100-all{margin-top:22px;padding:14px}.mph100-all>summary{cursor:pointer;padding:14px 16px;font-weight:800;color:var(--mph-gold);}
.mph100-all .mph100-table-wrap{background:transparent;border:0;box-shadow:none;padding:0;margin:10px 0 0;}
.mph100-summary{margin-top:22px;padding:24px}.mph100-summary b{color:var(--mph-gold);letter-spacing:.12em;font-size:12px}.mph100-summary p{margin:9px 0 0;line-height:1.8}
.mph100-spotify{margin-top:24px;border-radius:24px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.25)}
.mph100-empty{padding:28px;text-align:center;opacity:.7}

/* Admin */
.mph100-admin{max-width:1480px;margin-top:20px;}
.mph100-admin-hero{
  padding:34px 38px;border-radius:28px;color:#fff;
  background:
    radial-gradient(circle at 80% 20%,rgba(210,154,55,.34),transparent 32%),
    radial-gradient(circle at 16% 15%,rgba(36,134,159,.36),transparent 32%),
    linear-gradient(135deg,#071019,#0b3b4e 48%,#561622);
  box-shadow:0 18px 54px rgba(0,0,0,.22);
}
.mph100-admin-hero h1{font-size:42px!important;color:#fff!important;margin:8px 0!important;letter-spacing:-.035em}
.mph100-admin-hero p{font-size:18px;opacity:.82;margin:0}
.mph100-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.mph100-admin-card{
  padding:26px;border-radius:24px;background:linear-gradient(145deg,#0b1018,#111c24);
  color:#f7f2e8;box-shadow:0 16px 45px rgba(0,0,0,.18);border:1px solid rgba(217,184,117,.22);
}
.mph100-admin-card h2{color:#fff;margin:9px 0 8px;font-size:22px}.mph100-admin-card p{color:#b9c2c8}
.mph100-wide{margin-top:18px}.mph100-codebox{width:100%;min-height:280px;background:#05090e!important;color:#dbe7e8!important;border:1px solid rgba(217,184,117,.30)!important;border-radius:14px!important;padding:14px!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.55}
.mph100-admin .button-primary{background:#d3b06a!important;border-color:#d3b06a!important;color:#111!important;font-weight:800!important;border-radius:10px!important;padding:4px 14px!important}
.mph100-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.mph100-actions .button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;margin:0!important;padding:5px 16px!important;border-radius:10px!important;font-weight:800!important;text-decoration:none!important}
.mph100-admin .mph100-open{background:#16759d!important;border-color:#16759d!important;color:#fff!important}
.mph100-admin .mph100-open:hover,.mph100-admin .mph100-open:focus{background:#0f5f81!important;border-color:#0f5f81!important;color:#fff!important}
.mph100-action-status{min-height:1.5em;margin:8px 0 0!important;color:#9ee8cb!important;font-weight:700}
.mph100-field{margin:14px 0}.mph100-field label{display:block;color:#d9b875;font-size:12px;font-weight:800;letter-spacing:.08em;margin-bottom:6px}.mph100-field input,.mph100-field textarea{width:100%;background:#070c12!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:10px!important}.mph100-field textarea{min-height:90px}
.mph100-two{display:grid;grid-template-columns:160px 1fr;gap:12px}.mph100-shortcodes{display:grid;grid-template-columns:max-content 1fr;gap:12px 18px;align-items:center}.mph100-shortcodes code{background:#05090e;color:#ffda93;padding:9px 12px;border-radius:8px}
@media(max-width:900px){
  .mph100-feature-grid,.mph100-admin-grid{grid-template-columns:1fr}
  .mph100-tr{grid-template-columns:48px 55px minmax(160px,1fr);}.mph100-tr>span:nth-child(4){grid-column:3;opacity:.72;margin-top:-6px}.mph100-th>span:nth-child(4){display:none}
  .mph100-two{grid-template-columns:1fr}
  .mph100-actions{display:grid;grid-template-columns:1fr}
  .mph100-actions .button{width:100%}
}


/* ===== Full-width public layout =====
   Breaks out of the WordPress/Cocoon content column and uses the full viewport width.
   Keeps safe inner padding for desktop and mobile.
*/
.mph100-shell{
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  border-radius:0 !important;
  box-sizing:border-box !important;
  padding-left:max(22px, calc((100vw - 1440px)/2 + 32px)) !important;
  padding-right:max(22px, calc((100vw - 1440px)/2 + 32px)) !important;
}

.entry-content .mph100-shell,
.article .mph100-shell,
.main .mph100-shell{
  max-width:none !important;
}

@media(max-width:900px){
  .mph100-shell{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
}


/* ===== v1.1.1 readability fix =====
   Prevent Cocoon/theme styles from forcing public text to black.
   Gold/yellow is used for key labels and headings; warm ivory for body text.
*/
.mph100-shell,
.mph100-shell *{
  box-sizing:border-box;
}

.mph100-shell{
  color:#f7f2e8 !important;
  -webkit-text-fill-color:#f7f2e8;
}

.mph100-shell .mph100-topline,
.mph100-shell .mph100-card-label,
.mph100-shell .mph100-th,
.mph100-shell .mph100-all > summary,
.mph100-shell .mph100-summary b{
  color:#f0c96b !important;
  -webkit-text-fill-color:#f0c96b !important;
}

.mph100-shell .mph100-headline{
  color:#f2cf69 !important;
  -webkit-text-fill-color:#f2cf69 !important;
  text-shadow:0 2px 14px rgba(0,0,0,.28);
}

.mph100-shell .mph100-subheadline{
  color:#f1e5c9 !important;
  -webkit-text-fill-color:#f1e5c9 !important;
  opacity:1 !important;
}

.mph100-shell .mph100-eyebrow{
  color:#ffd67a !important;
  -webkit-text-fill-color:#ffd67a !important;
}

.mph100-shell .mph100-track,
.mph100-shell .mph100-section-title,
.mph100-shell .mph100-rank,
.mph100-shell .mph100-title-cell,
.mph100-shell .mph100-title-cell > span,
.mph100-shell .mph100-tr > span:nth-child(4){
  color:#fff3d8 !important;
  -webkit-text-fill-color:#fff3d8 !important;
}

.mph100-shell .mph100-artist,
.mph100-shell .mph100-period,
.mph100-shell .mph100-feature p,
.mph100-shell .mph100-title-cell small,
.mph100-shell .mph100-summary p{
  color:#e8dcc0 !important;
  -webkit-text-fill-color:#e8dcc0 !important;
  opacity:1 !important;
}

/* Movement colors remain distinct and readable */
.mph100-shell .mph100-move.up{
  color:#9ee8cb !important;
  -webkit-text-fill-color:#9ee8cb !important;
}
.mph100-shell .mph100-move.down{
  color:#ffb0aa !important;
  -webkit-text-fill-color:#ffb0aa !important;
}
.mph100-shell .mph100-move.new{
  color:#ffd67a !important;
  -webkit-text-fill-color:#ffd67a !important;
}
.mph100-shell .mph100-move.same{
  color:#d9d0bb !important;
  -webkit-text-fill-color:#d9d0bb !important;
  opacity:1 !important;
}

/* Extra protection against theme link/heading colors */
.entry-content .mph100-shell h1,
.entry-content .mph100-shell h2,
.entry-content .mph100-shell h3,
.entry-content .mph100-shell h4,
.article .mph100-shell h1,
.article .mph100-shell h2,
.article .mph100-shell h3,
.article .mph100-shell h4{
  color:#f2cf69 !important;
  -webkit-text-fill-color:#f2cf69 !important;
}

.entry-content .mph100-shell p,
.entry-content .mph100-shell span,
.entry-content .mph100-shell div,
.article .mph100-shell p,
.article .mph100-shell span,
.article .mph100-shell div{
  text-decoration-color:currentColor;
}
.mph100-admin .mph100-history-csv{background:#355d7a!important;border-color:#355d7a!important;color:#fff!important;font-weight:800!important;}
.mph100-admin .mph100-history-csv:hover,.mph100-admin .mph100-history-csv:focus{background:#294a62!important;border-color:#294a62!important;color:#fff!important;}