/* ============================================================================
   MGC Reporting Portal — Modernist design system
   Implements the Claude Design handoff ("Dashboard UI mockups", Aug 2026).

   Loaded LAST on every page so it restyles the existing markup in place: the
   pages keep their class names, element ids and JavaScript exactly as they are,
   and only their appearance changes. Nothing here touches behaviour.

   Design language: editorial / modernist — square corners, 2px rules, heavy
   Archivo display weights, MGC red accent, gold employee codes, hairline KPI
   grid, tabular figures throughout. Light and dark are both first-class.
   ========================================================================= */

:root{
  /* ramps from the handoff design system */
  --mgc-bg:#f3f2f2; --mgc-surface:#eae9e9; --mgc-text:#201e1d;
  --mgc-accent:#ec3013; --mgc-accent-2:#e15b47;
  --mgc-divider:color-mix(in srgb,#201e1d 40%,transparent);
  --mgc-n100:#f8f4f4; --mgc-n200:#eae7e7; --mgc-n300:#d7d3d3; --mgc-n400:#bab6b6;
  --mgc-n500:#9b9797; --mgc-n600:#7d7979; --mgc-n700:#605d5d; --mgc-n800:#444141;
  --mgc-n900:#2d2b2b;
  --mgc-a100:#fff2ef; --mgc-a600:#dd2b0f; --mgc-a700:#ae1800; --mgc-a800:#7c1405;
  --mgc-gold:#c9a25a;
  --mgc-good:#16a34a; --mgc-warn:#d97706; --mgc-bad:#dc2626;
  --mgc-s1:4px; --mgc-s2:8px; --mgc-s3:12px; --mgc-s4:16px; --mgc-s6:24px;
  --mgc-shadow-sm:0 1px 2px color-mix(in srgb,#2d2b2b 14%,transparent);
  --mgc-shadow-md:0 3px 10px color-mix(in srgb,#2d2b2b 16%,transparent);
  --mgc-shadow-lg:0 12px 32px color-mix(in srgb,#2d2b2b 22%,transparent);

  /* map the pages' own variables onto the system so untouched rules inherit it.
     --card stays SURFACE so cards/login panels still lift off the page; the
     .panel rule below deliberately paints table panels on the page colour with
     a 2px rule instead, which is the system's table treatment. */
  --bg:var(--mgc-bg); --bg2:var(--mgc-bg); --card:var(--mgc-surface);
  --field:var(--mgc-surface); --panel:var(--mgc-surface); --line:var(--mgc-divider);
  --txt:var(--mgc-text); --txt2:var(--mgc-n800); --mut:var(--mgc-n700);
  --faint:var(--mgc-n500); --brand:var(--mgc-accent); --brand2:var(--mgc-accent-2);
  --gold:var(--mgc-gold); --good:var(--mgc-good); --bad:var(--mgc-bad);
  --shadow2:var(--mgc-shadow-md); --rad:0px;
}
:root[data-theme=dark]{
  --mgc-bg:#1a1918; --mgc-surface:#252322; --mgc-text:#f3f2f2;
  --mgc-accent:#ff563c; --mgc-divider:color-mix(in srgb,#f3f2f2 30%,transparent);
  --mgc-n500:#9b9797; --mgc-n600:#a8a4a4; --mgc-n700:#cfcbca; --mgc-n800:#e4e0e0;
  --mgc-n100:#2d2b2b; --mgc-n200:#332f2e; --mgc-n300:#3a3736;
  --mgc-a100:color-mix(in srgb,#ff563c 18%,transparent); --mgc-a800:#ffc4b8;
  --mgc-good:#4ade80; --mgc-bad:#f87171; --mgc-warn:#fbbf24;
  --mgc-shadow-md:0 6px 22px rgba(0,0,0,.5);
  --mgc-shadow-lg:0 18px 44px rgba(0,0,0,.6);
}

/* ── base ───────────────────────────────────────────────────────────────── */
body{
  background:var(--mgc-bg)!important; color:var(--mgc-text)!important;
  font-family:'Archivo',system-ui,sans-serif!important;
  font-size:15px; line-height:1.55;
}
h1,h2,h3,h4,h5,h6{font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  line-height:1.12;letter-spacing:-.015em}
:focus-visible{outline:2px solid var(--mgc-accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--mgc-accent) 30%,transparent)}
/* square everything — the system has no radii */
.nav,.nav a,.kpi,.panel,.btn,.userchip,.rk,.actv,.rtag,.tag,select,input,
.seg,.segbtn,.card,.modal,.amodal,.pill,.deptchip,.crmf,.pbtn,.rbtn,.salinp,
.ib-item,.ib-track,.mlist,.psum,.pos,.dcard,.kpi .ic,.section .ic,#search,
.ddmenu,.chip,.stat,.crmb,.logo-chip,.submit,.tbtn,.camwrap,.earned,.msg,
.field input,.togglepw,.dialog,.modal-x{border-radius:0!important}
/* login / employee-portal primary action follows the accent, flat not gradient */
.submit,.btn.ok{
  background:var(--mgc-accent)!important; background-image:none!important;
  color:#fff!important; box-shadow:none!important; font-weight:800!important;
}
.submit:hover{background:var(--mgc-a600)!important}

/* ── header ─────────────────────────────────────────────────────────────── */
.top{
  background:var(--mgc-bg)!important; backdrop-filter:none!important;
  border-bottom:2px solid var(--mgc-divider)!important;
}
.top::after{display:none!important}
.top-in{padding:0!important;gap:0!important;max-width:none!important}
.brand{
  justify-content:flex-start!important; gap:12px!important;
  padding:12px 24px 10px!important;
}
.logo-chip{
  background:#141210!important; border:0!important; height:auto!important;
  min-width:0!important; padding:6px 12px!important; box-shadow:none!important;
}
.logo-chip img{height:34px!important}
.brand h1{font-size:16px!important;font-weight:800!important;line-height:1.1!important}
.brand p{font-size:11px!important;color:var(--mgc-n600)!important}
.menurow{
  padding:0 24px!important; gap:0!important; align-items:stretch!important;
  border-top:0!important;
}
/* nav becomes underline tabs, not pills */
.nav{
  background:transparent!important; border:0!important; padding:0!important;
  gap:2px!important; border-bottom:2px solid var(--mgc-divider)!important;
  flex:1 1 auto; margin:0!important;
}
.nav a,.ddbtn{
  padding:10px 14px!important; font-size:13px!important; font-weight:600!important;
  color:var(--mgc-n700)!important; background:transparent!important;
  border:0!important; border-bottom:3px solid transparent!important;
  margin-bottom:-2px!important; white-space:nowrap;
}
.nav a:hover,.ddbtn:hover{color:var(--mgc-accent)!important}
.nav a.active,.ddbtn.active{
  color:var(--mgc-accent)!important; background:transparent!important;
  border-bottom-color:var(--mgc-accent)!important;
}
.ddmenu{
  background:var(--mgc-bg)!important; border:2px solid var(--mgc-divider)!important;
  box-shadow:var(--mgc-shadow-lg)!important; padding:0!important;
}
.ddmenu a{
  padding:11px 14px!important; font-size:13px!important; font-weight:600!important;
  color:var(--mgc-n700)!important; border:0!important;
}
.ddmenu a:hover{background:var(--mgc-surface)!important;color:var(--mgc-accent)!important}
.ddmenu a.active{background:var(--mgc-accent)!important;color:#fff!important}
.ctrls{padding:0 0 0 12px!important;align-items:center!important}
.userchip{
  background:transparent!important; border:0!important; padding:0 0 0 4px!important;
  font-size:13px!important; color:var(--mgc-n600)!important;
}
.userchip b{color:var(--mgc-text)!important;font-weight:700!important}
#logout,.userchip .btn{
  background:transparent!important; border:0!important; padding:0 0 0 8px!important;
  color:var(--mgc-accent)!important; font-weight:600!important; font-size:13px!important;
}
#theme,.btn.icon{
  width:34px!important; height:34px!important; padding:0!important;
  background:transparent!important; border:1px solid var(--mgc-divider)!important;
  color:var(--mgc-text)!important; display:grid; place-items:center;
}
#theme:hover{background:color-mix(in srgb,var(--mgc-text) 7%,transparent)!important}

/* ── page shell ─────────────────────────────────────────────────────────── */
.wrap{padding:24px!important;max-width:1500px!important}
.section{margin:0 0 var(--mgc-s3)!important;text-align:left!important}
.section .st{gap:12px!important}
.section .ic{
  background:transparent!important; border:2px solid var(--mgc-divider)!important;
  color:var(--mgc-accent)!important; width:34px!important; height:34px!important;
}
.section h2{font-size:20px!important}
.section .sub{font-size:11.5px!important;color:var(--mgc-n600)!important}

/* ── KPI grid: hairline lattice, the system's signature ─────────────────── */
.kpis{
  gap:2px!important; background:var(--mgc-divider)!important;
  border:2px solid var(--mgc-divider)!important; margin-bottom:var(--mgc-s6)!important;
}
.kpi{
  background:var(--mgc-bg)!important; border:0!important; box-shadow:none!important;
  padding:14px 16px!important;
}
.kpi::before{display:none!important}
.kpi .lab,.kpi .l,.kpi .lbl{
  font-size:10px!important; letter-spacing:.1em!important; text-transform:uppercase;
  color:var(--mgc-accent)!important; font-weight:600!important;
}
.kpi .val,.kpi .v{
  font-size:26px!important; font-weight:800!important; letter-spacing:-.02em!important;
  margin-top:6px!important; font-variant-numeric:tabular-nums; color:var(--mgc-text)!important;
}
.kpi.accent .val,.kpi.accent .v{color:var(--mgc-accent)!important}
.kpi .sub,.kpi .s{font-size:11.5px!important;color:var(--mgc-n600)!important;margin-top:4px!important}
.kpi .ic{opacity:.45!important;border:0!important;background:transparent!important}

/* ── segmented controls / tabs ──────────────────────────────────────────── */
.seg,.filters .seg{
  background:transparent!important; border:1px solid var(--mgc-divider)!important;
  padding:0!important; box-shadow:none!important; gap:0!important;
  display:inline-flex!important; width:auto!important; overflow:hidden;
}
.segbtn{
  padding:7px 14px!important; font-size:13px!important; font-weight:600!important;
  color:var(--mgc-text)!important; background:transparent!important; flex:0 0 auto!important;
  border:0!important; border-left:1px solid var(--mgc-divider)!important;
}
.segbtn:first-child{border-left:0!important}
.segbtn:hover{background:color-mix(in srgb,var(--mgc-text) 7%,transparent)!important}
.segbtn.active{background:var(--mgc-accent)!important;color:#fff!important}

/* ── chips ──────────────────────────────────────────────────────────────── */
.deptchip,.crmf,.lbbtn{
  background:transparent!important; border:1px solid var(--mgc-divider)!important;
  color:var(--mgc-text)!important; padding:5px 12px!important; font-size:12px!important;
  font-weight:600!important;
}
.deptchip:hover,.crmf:hover,.lbbtn:hover{background:color-mix(in srgb,var(--mgc-text) 7%,transparent)!important}
.deptchip.active,.crmf.on,.lbbtn.active{
  background:var(--mgc-accent)!important; color:#fff!important; border-color:var(--mgc-accent)!important;
}
.deptchip .n{opacity:.75!important}

/* ── buttons & inputs ───────────────────────────────────────────────────── */
.btn,.rbtn,.pbtn,.backbtn{
  font-family:'Archivo',system-ui,sans-serif!important; font-weight:800!important;
  font-size:14px!important; padding:8px 14px!important;
  background:transparent!important; color:var(--mgc-text)!important;
  border:1px solid var(--mgc-divider)!important;
}
.btn:hover,.rbtn:hover,.backbtn:hover{background:color-mix(in srgb,var(--mgc-text) 7%,transparent)!important}
.pbtn,.pbtn:not(.ghost){background:var(--mgc-accent)!important;color:#fff!important;border-color:var(--mgc-accent)!important}
.pbtn:hover:not(.ghost){background:var(--mgc-a600)!important}
.pbtn.ghost{background:transparent!important;color:var(--mgc-text)!important;border-color:var(--mgc-divider)!important}
input,select,#search,.salinp,.input,.filt input,.filt select{
  background:var(--mgc-surface)!important; color:var(--mgc-text)!important;
  border:1px solid var(--mgc-divider)!important; font-size:14px!important;
  padding:7px 10px!important; min-height:36px;
}
input:focus,select:focus,#search:focus,.salinp:focus{border-color:var(--mgc-accent)!important}
input::placeholder{color:var(--mgc-n500)!important}

/* ── panels & tables ────────────────────────────────────────────────────── */
.panel{
  background:var(--mgc-bg)!important; border:2px solid var(--mgc-divider)!important;
  box-shadow:none!important;
}
table{font-size:13px!important;font-variant-numeric:tabular-nums}
thead th{
  background:var(--mgc-bg)!important; color:var(--mgc-n600)!important;
  font-size:11px!important; letter-spacing:.08em!important; text-transform:uppercase;
  font-weight:600!important; padding:10px!important;
  border-bottom:2px solid var(--mgc-divider)!important;
}
tbody td{
  padding:10px!important; border-bottom:1px solid var(--mgc-divider)!important;
  color:var(--mgc-text)!important;
}
tbody tr:nth-child(even),tbody tr:nth-child(odd){background:transparent!important}
tbody tr:hover{background:color-mix(in srgb,var(--mgc-text) 4%,transparent)!important}
tfoot td,tfoot tr{
  background:var(--mgc-surface)!important; font-weight:700!important;
  border-top:2px solid var(--mgc-divider)!important; color:var(--mgc-text)!important;
}
/* identity cell: name + gold code, as in every mockup */
.nm,.emp{font-weight:600!important;color:var(--mgc-text)!important}
.dg,.sub2{color:var(--mgc-gold)!important;font-weight:600!important;font-size:10.5px!important}
.pos,.rk{
  background:transparent!important; color:var(--mgc-n600)!important;
  font-weight:600!important; width:auto!important; min-width:0!important;
}
.pos.g,.rk.g{background:transparent!important;color:var(--mgc-accent)!important}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace!important;color:var(--mgc-n600)!important}

/* ── tags & pills ───────────────────────────────────────────────────────── */
.tag,.pill,.crmb,.rtag,.ztag,.chip{
  font-size:11px!important; letter-spacing:.02em!important; padding:3px 10px!important;
  font-weight:600!important;
}
.tag.on,.pill.ontime{background:color-mix(in srgb,var(--mgc-good) 16%,transparent)!important;color:var(--mgc-good)!important}
.tag.off{background:color-mix(in srgb,var(--mgc-bad) 15%,transparent)!important;color:var(--mgc-bad)!important}
.tag.r,.crmb.acc{background:var(--mgc-a100)!important;color:var(--mgc-a800)!important}
.tag.w,.pill.late,.crmb.rel{background:color-mix(in srgb,var(--mgc-warn) 18%,transparent)!important;color:var(--mgc-warn)!important}

/* ── notes / footers ────────────────────────────────────────────────────── */
.note{
  background:transparent!important; border:0!important;
  border-left:3px solid var(--mgc-accent)!important; padding:2px 0 2px 14px!important;
  font-size:12px!important; color:var(--mgc-n600)!important;
}
.note b{color:var(--mgc-n800)!important}
.foot{font-size:11.5px!important;color:var(--mgc-n600)!important;margin-top:var(--mgc-s4)!important}

/* ── modals: accent header bar, square, 2px frame ──────────────────────── */
.modal-bg,.amodal-bg,.dm-bg{background:color-mix(in srgb,var(--mgc-n900) 45%,transparent)!important;backdrop-filter:none!important}
.modal,.amodal,.dmodal{
  background:var(--mgc-bg)!important; border:2px solid var(--mgc-divider)!important;
  box-shadow:var(--mgc-shadow-lg)!important;
}
.modal-hd,.amodal-hd,.dm-hd{background:var(--mgc-accent)!important;color:#fff!important;padding:12px 18px!important}
.modal-hd h3,.amodal-hd h3{font-size:16px!important;font-weight:800!important}
.modal-x,.amodal-x,.dm-x{background:transparent!important;font-size:20px!important;color:#fff!important}
.pf{background:transparent!important;border-bottom:1px solid var(--mgc-divider)!important;padding:10px 12px!important}
.pf .k{font-size:10px!important;letter-spacing:.08em!important;color:var(--mgc-n600)!important}
.pf .v{font-size:14px!important;color:var(--mgc-text)!important}

/* ── dashboard zone explorer ────────────────────────────────────────────── */
.ib-item{border:0!important;border-bottom:1px solid var(--mgc-divider)!important;background:transparent!important}
.ib-item:last-child{border-bottom:0!important}
.ib-row:hover{background:color-mix(in srgb,var(--mgc-text) 4%,transparent)!important}
.ib-name{font-size:13.5px!important;font-weight:600!important}
.ib-name .sq{border-radius:0!important;width:9px!important;height:9px!important}
.ztag{background:transparent!important;border:1px solid var(--mgc-divider)!important;color:var(--mgc-n600)!important}
.ib-track{background:var(--mgc-surface)!important;height:14px!important}
.ib-fill{border-radius:0!important}
.ib-val{font-size:15px!important;font-weight:800!important;font-variant-numeric:tabular-nums}
.ib-val span{font-size:10.5px!important;color:var(--mgc-n600)!important}
.ib-fin b{font-size:13px!important;font-weight:800!important}
.ib-fin span{font-size:9px!important;letter-spacing:.08em!important;color:var(--mgc-n600)!important}
/* accordion tree */
.mlist{border:0!important}
.mhead{
  font-size:10.5px!important; letter-spacing:.08em!important; text-transform:uppercase;
  color:var(--mgc-n600)!important; border-bottom:2px solid var(--mgc-divider)!important;
}
.mrow{border-bottom:1px solid var(--mgc-divider)!important;font-size:13px!important}
.mrow:hover{background:color-mix(in srgb,var(--mgc-text) 4%,transparent)!important}
.mnode.open>.mrow{background:color-mix(in srgb,var(--mgc-accent) 8%,transparent)!important}
.mnode.open>.msub{border-left:2px solid var(--mgc-accent)!important}
.psum{background:var(--mgc-surface)!important;border:0!important}

/* ── salary sheet: keep the editable cells obvious ─────────────────────── */
table.sal input.ed{
  background:color-mix(in srgb,var(--mgc-accent) 8%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--mgc-accent) 35%,transparent)!important;
  color:var(--mgc-text)!important; min-height:0!important; padding:4px 6px!important;
}
table.sal input.ed:focus{border-color:var(--mgc-accent)!important}
table.sal td.ded{color:var(--mgc-bad)!important}
table.sal td.cl{color:var(--mgc-good)!important}
table.sal td.warn{color:var(--mgc-warn)!important}
.net,td.net{color:var(--mgc-good)!important;font-weight:800!important}

/* ── attendance admin cards ─────────────────────────────────────────────── */
/* admin config cards sit on the page colour inside a 2px rule; the login /
   attendance self-service cards keep the raised surface so they read as a
   distinct panel against the page */
.attcard{background:var(--mgc-bg)!important;border:2px solid var(--mgc-divider)!important;box-shadow:none!important}
.card{background:var(--mgc-surface)!important;border:2px solid var(--mgc-divider)!important;box-shadow:none!important}
.atttitle,.card h3{font-size:14px!important;font-weight:800!important}
.appr{border-bottom:1px solid var(--mgc-divider)!important}
.appr .yes{background:var(--mgc-accent)!important;color:#fff!important;border:0!important}
.appr .no{background:transparent!important;border:1px solid var(--mgc-divider)!important;color:var(--mgc-n700)!important}
label{font-size:12px!important;color:var(--mgc-n700)!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important}

/* ── mobile ─────────────────────────────────────────────────────────────── */
@media (max-width:768px){
  .wrap{padding:16px 14px!important}
  .brand{padding:10px 14px 8px!important}
  .menurow{padding:0 14px!important}
  .kpis{grid-template-columns:repeat(2,1fr)!important}
  .kpi .val,.kpi .v{font-size:21px!important}
  .section h2{font-size:17px!important}
  .seg{display:flex!important;width:100%!important}
  .segbtn{flex:1 1 auto!important;padding:9px 8px!important;font-size:12px!important}
  thead th,tbody td{padding:8px!important}
}
@media (max-width:420px){
  .kpis{grid-template-columns:1fr!important}
}

/* ================= mobile hamburger drawer (mgc-nav.js) ================= */
.mnav-burger{display:none}
.mnav-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:400;
  opacity:0;pointer-events:none;transition:opacity .2s}
.mnav-drawer{position:fixed;top:0;left:0;bottom:0;width:min(80vw,320px);
  background:var(--card,#fff);color:var(--txt,#111);z-index:401;
  transform:translateX(-103%);transition:transform .22s ease;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 14px calc(20px + env(safe-area-inset-bottom));
  border-right:2px solid var(--line,#ccc)}
body.mnav-open .mnav-ov{opacity:1;pointer-events:auto}
body.mnav-open .mnav-drawer{transform:none}
body.mnav-open{overflow:hidden}
.mnav-head{font-weight:800;font-size:15px;letter-spacing:-.01em;
  padding:6px 8px 14px;border-bottom:2px solid var(--line,#ccc);margin-bottom:6px}
.mnav-link{display:block;padding:13px 10px;font-size:14px;font-weight:700;
  color:var(--mut,#666);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--line,#ccc) 55%,transparent)}
.mnav-link:active{background:color-mix(in srgb,var(--brand,#ec3013) 10%,transparent)}
.mnav-link.active{background:var(--brand,#ec3013);color:#fff}
.mnav-grp{margin-top:2px}
.mnav-ttl{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--brand,#ec3013);font-weight:800;margin:16px 0 2px;padding:0 8px}
.mnav-link.sub{padding-left:18px}
@media(max-width:768px){
  .top .nav{display:none!important}
  .mnav-burger{display:inline-flex;flex-direction:column;justify-content:center;
    gap:4px;width:44px;height:40px;padding:0 11px;flex:none;cursor:pointer;
    background:var(--panel,#eee);border:1px solid var(--line,#ccc);border-radius:0}
  .mnav-burger span{display:block;height:2px;background:var(--txt,#111);transition:.2s}
  body.mnav-open .mnav-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  body.mnav-open .mnav-burger span:nth-child(2){opacity:0}
  body.mnav-open .mnav-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .top .menurow{flex-wrap:nowrap}
}
@media(min-width:769px){.mnav-drawer,.mnav-ov{display:none}}

/* ============ phone header: ☰ + logo + title on ONE row ============ */
@media(max-width:768px){
  .top-in{padding:9px 10px!important;gap:8px!important}
  .top .brand{justify-content:flex-start!important;text-align:left!important;
    flex-wrap:nowrap!important;gap:9px!important;min-width:0}
  .top .brand>div:last-child{justify-content:flex-start!important;min-width:0;
    flex-wrap:nowrap!important;overflow:hidden}
  .top .brand h1{font-size:14.5px!important;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap!important;min-width:0}
  .top .brand p{display:none!important}     /* subtitle: not worth a row on phones */
  .logo-chip{height:36px!important;min-width:36px!important;padding:4px 8px!important}
  .logo-chip img{max-width:110px!important}
  .top .menurow{gap:8px!important}
  .top .ctrls{width:100%;justify-content:flex-start!important;gap:7px!important;
    flex-wrap:wrap!important}
  .top .ctrls select{flex:1 1 150px;min-width:0;max-width:220px}
  .userchip{margin-left:auto}
  /* content uses the full phone width */
  .wrap{padding:12px 8px!important}
  .kpi{padding:13px 12px!important}
  .panel{border-left-width:1px!important;border-right-width:1px!important}
  .attcard,.card{padding:14px 12px!important}
  .detbox{padding:12px 10px!important}
}

/* cross-portal link in the nav (hrm.mgcdevelopments.tech phase-1 split) */
.nav a.ext{margin-left:auto;color:var(--mgc-accent,#ec3013)!important;font-weight:800}
.nav a.ext:hover{background:color-mix(in srgb,var(--mgc-accent,#ec3013) 12%,transparent)}
.mnav-link.ext{color:var(--brand,#ec3013)}