/*
Theme Name: Androidthis
Theme URI: https://androidthis.com/
Author: ModHub
Author URI: https://androidthis.com/
Description: Modern mod & APK download portal theme.
Version: 1.0.13
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: androidthis
*/

/* ===================== TOKENS / RESET ===================== */
:root{
  --mh-green:#16c172;      --mh-green-d:#0f9d58;   --mh-green-dd:#0a8f4e;
  --mh-green-soft:#eafaf1; --mh-green-ring:#d1fadf;
  --mh-bg:#f4f6f8;         --mh-card:#ffffff;
  --mh-border:#eef0f3;     --mh-border-2:#ebedf0;
  --mh-ink:#101828;        --mh-ink-2:#475467;    --mh-muted:#98a2b3;  --mh-faint:#b0b7c3;
  --mh-star:#f5a623;
  --mh-radius:16px;        --mh-shadow:0 1px 2px rgba(16,24,40,.04);
  --mh-shadow-h:0 10px 24px rgba(16,24,40,.10);
  --mh-max:1200px;
  --mh-font:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mh-bg);font-family:var(--mh-font);color:var(--mh-ink);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
::selection{background:#bbf4d4}
.mh-wrap{max-width:var(--mh-max);margin:0 auto;padding:0 20px}
.msr{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;vertical-align:middle;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}
.msr.fill{font-variation-settings:'FILL' 1}
.mh-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ===================== HEADER ===================== */
.mh-header{background:#fff;border-bottom:1px solid var(--mh-border-2);position:sticky;top:0;z-index:50}
.mh-header__in{height:62px;display:flex;align-items:center;gap:26px}
.mh-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none;min-width:0}
.mh-logo--header{max-width:min(220px,42vw)}
.mh-logo--footer{max-width:min(280px,100%)}
.mh-logo__visual,.mh-logo__mark{width:30px;height:30px;flex:0 0 30px}
.mh-logo__visual{display:flex;align-items:center;justify-content:center;overflow:hidden}
.mh-logo__visual img{width:100%;height:100%;object-fit:contain}
.mh-logo__mark{border-radius:9px;background:linear-gradient(135deg,var(--mh-green),var(--mh-green-dd));display:flex;align-items:center;justify-content:center}
.mh-logo__tri{width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid #fff;margin-left:2px}
.mh-logo__txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mh-ink);font-size:20px;font-weight:800;letter-spacing:-.02em}
.mh-logo__accent{color:var(--mh-green-d)}
.mh-logo--footer .mh-logo__visual,.mh-logo--footer .mh-logo__mark{width:26px;height:26px;flex-basis:26px}
.mh-logo--footer .mh-logo__tri{border-top-width:5px;border-bottom-width:5px;border-left-width:8px}
.mh-logo--footer .mh-logo__txt{font-size:16px}
.mh-nav{display:flex;align-items:center;gap:4px;flex:1;list-style:none;margin:0;padding:0}
.mh-nav a{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;color:var(--mh-ink-2);font-size:13.5px;font-weight:600;text-decoration:none}
.mh-nav a:hover{background:#f4f6f8}
.mh-nav .current-menu-item a,.mh-nav a.is-active{color:var(--mh-green-d);background:var(--mh-green-soft);font-weight:700}
.mh-search{display:flex;align-items:center;gap:8px;background:#f2f4f7;border:1px solid #eaecf0;border-radius:10px;padding:7px 12px;width:220px;flex:none;min-width:0}
.mh-search input{border:0;background:transparent;outline:none;font-family:inherit;font-size:13px;color:var(--mh-ink);width:100%;min-width:0}
.mh-search .msr{color:var(--mh-muted);font-size:19px}
.mh-burger{display:none;background:none;border:0;cursor:pointer;color:var(--mh-ink)}

/* ===================== SECTION HEADERS ===================== */
.mh-sec{margin-top:34px}
.mh-sec__head{display:flex;align-items:flex-end;justify-content:space-between;margin:0 0 16px}
.mh-sec__t{display:flex;align-items:center;gap:9px}
.mh-sec__t .msr{font-size:21px;color:var(--mh-green-d)}
.mh-sec__t h1,.mh-sec__t h2,.mh-sec__t h3{margin:0;font-size:17px;font-weight:800}
.mh-sec__line{width:30px;height:3px;border-radius:3px;background:var(--mh-green);margin:7px 0 0 30px}
.mh-sec__sub{margin:5px 0 0 30px;color:var(--mh-muted);font-size:12.5px}
.mh-viewall{display:flex;align-items:center;gap:3px;color:var(--mh-green-d);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.mh-viewall .msr{font-size:18px}

/* ===================== GRIDS ===================== */
.mh-grid-6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.mh-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mh-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

/* ===================== CARD (style 1a) ===================== */
.mh-card{background:var(--mh-card);border:1px solid var(--mh-border);border-radius:var(--mh-radius);padding:12px;box-shadow:var(--mh-shadow);text-decoration:none;color:inherit;display:block;min-width:0;transition:transform .15s,box-shadow .15s}
.mh-card:hover{transform:translateY(-3px);box-shadow:var(--mh-shadow-h)}
.mh-badge{display:inline-block;font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;margin-bottom:10px}
.mh-card__icon{width:54px;height:54px;border-radius:15px;margin:0 auto 11px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:21px;overflow:hidden}
.mh-card__icon img{width:100%;height:100%;object-fit:cover}
.mh-card__title{font-size:13px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-card__meta{font-size:10.5px;color:var(--mh-muted);text-align:center;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-card__rating{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:9px}
.mh-card__rating .msr{font-size:15px;color:var(--mh-star)}
.mh-card__rating b{font-size:11px;color:var(--mh-ink-2);font-weight:700}
.mh-card__rating span{font-size:10.5px;color:var(--mh-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===================== FEATURED HERO ===================== */
/* Featured hero.
   The banner is deliberately tall and wide (roughly 3:1) because the images it
   shows are Google Play feature graphics at 1024×500. The body is laid out with
   flex rather than absolute offsets so a long title can never collide with the
   controls — which is exactly what happened when this was a fixed 248px box. */
.mh-hero{position:relative;display:flex;align-items:center;height:clamp(300px,29vw,540px);border-radius:22px;overflow:hidden;background:linear-gradient(120deg,#2b3a2f,#16241b)}
.mh-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;background-size:cover;background-position:center}
.mh-hero__slide.is-on{opacity:1}
/* Two layers: a strong left-to-right wash so the copy stays readable over a
   bright screenshot, plus a light overall tint so pale banners (Telegram,
   Canva) don't wash the white text out entirely. */
.mh-hero__scrim{position:absolute;inset:0;background:
	linear-gradient(90deg,rgba(6,11,8,.96) 0%,rgba(6,11,8,.92) 28%,rgba(6,11,8,.7) 52%,rgba(6,11,8,.28) 76%,rgba(6,11,8,0) 100%),
	linear-gradient(180deg,rgba(6,11,8,.18) 0%,rgba(6,11,8,.28) 100%)}
.mh-hero__body{position:relative;z-index:2;padding:0 clamp(26px,4vw,62px);max-width:min(620px,60%)}
.mh-hero__badge{display:inline-flex;align-items:center;gap:5px;background:#7c3aed;color:#fff;font-size:11.5px;font-weight:700;padding:5px 13px;border-radius:20px}
.mh-hero__badge .msr{font-size:14px}
.mh-hero h2{margin:18px 0 10px;color:#fff;font-size:clamp(28px,3.4vw,54px);font-weight:800;letter-spacing:-.025em;line-height:1.04}
.mh-hero p{margin:0;color:rgba(255,255,255,.8);font-size:clamp(13.5px,1.05vw,16px);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mh-hero__stats{display:flex;align-items:center;gap:12px;margin:18px 0 24px}
.mh-hero__stats span{display:flex;align-items:center;gap:6px;color:#fff;font-size:14px;font-weight:600}
.mh-hero__stats span.dim{color:rgba(255,255,255,.72);font-weight:400}
.mh-hero__stats .msr{font-size:18px}
.mh-hero__sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45);flex:none}
.mh-hero__cta{padding:13px 26px;font-size:15px;border-radius:999px}
/* Dots sit under the banner, clear of the call to action. */
.mh-hero__dots{display:flex;justify-content:center;align-items:center;gap:8px;margin:20px 0 0}
.mh-hero__dots button{width:10px;height:10px;padding:0;border:0;border-radius:6px;background:#d3d8dd;cursor:pointer;transition:width .25s,background .25s}
.mh-hero__dots button:hover{background:#b9c0c7}
.mh-hero__dots button.is-on{width:34px;background:var(--mh-green)}

/* ===================== BUTTONS ===================== */
.mh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:700;padding:11px 20px;border-radius:11px;text-decoration:none;cursor:pointer;border:0}
.mh-btn--primary{background:var(--mh-green);color:#fff;box-shadow:0 8px 18px rgba(22,193,114,.3)}
.mh-btn--primary:hover{background:var(--mh-green-d)}
.mh-btn--ghost{background:#fff;color:var(--mh-ink-2);border:1px solid var(--mh-border)}
.mh-btn .msr{font-size:18px}
.mh-btn--block{width:100%}

/* ===================== WINDOWS CARD ===================== */
.mh-wcard{background:#fff;border:1px solid var(--mh-border);border-radius:var(--mh-radius);overflow:hidden;box-shadow:var(--mh-shadow);text-decoration:none;color:inherit;display:block;transition:transform .15s,box-shadow .15s}
.mh-wcard:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(16,24,40,.12)}
.mh-wcard__img{position:relative;height:118px;background-size:cover;background-position:center}
.mh-wcard__tag{position:absolute;top:9px;left:9px;background:rgba(0,0,0,.55);color:#fff;font-size:9.5px;font-weight:700;padding:3px 7px;border-radius:6px}
.mh-wcard__b{display:flex;align-items:center;gap:10px;padding:12px 14px}
.mh-wcard__ic{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;overflow:hidden}
.mh-wcard__ic img{width:100%;height:100%;object-fit:cover}
.mh-wcard__m{min-width:0;flex:1}
.mh-wcard__m b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-wcard__m span{font-size:11px;color:var(--mh-muted)}

/* ===================== TIPS CARD ===================== */
.mh-tcard{background:#fff;border:1px solid var(--mh-border);border-radius:var(--mh-radius);overflow:hidden;box-shadow:var(--mh-shadow);text-decoration:none;color:inherit;display:block;transition:transform .15s,box-shadow .15s}
.mh-tcard:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(16,24,40,.12)}
.mh-tcard__img{position:relative;height:140px;background-size:cover;background-position:center}
.mh-tcard__cat{position:absolute;top:10px;left:10px;background:var(--mh-green);color:#fff;font-size:10px;font-weight:700;padding:3px 9px;border-radius:7px}
.mh-tcard__b{padding:14px 16px 18px}
.mh-tcard__date{font-size:11px;color:var(--mh-muted);margin-bottom:7px}
.mh-tcard__t{font-size:14.5px;font-weight:700;line-height:1.35;text-wrap:pretty;color:var(--mh-ink)}
.mh-tcard__foot{display:flex;align-items:center;gap:5px;margin-top:11px;color:var(--mh-muted);font-size:11.5px}
.mh-tcard__foot .msr{font-size:15px}

/* ===================== BREADCRUMB ===================== */
.mh-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--mh-muted);padding:18px 20px 6px}
.mh-crumb a{color:var(--mh-green-d);text-decoration:none;font-weight:600}
.mh-crumb .sep{color:var(--mh-faint)}

/* ===================== ARCHIVE / LISTING ===================== */
.mh-top{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:8px}
.mh-bigcard{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:1/1;background-size:cover;background-position:center;text-decoration:none;color:#fff}
.mh-bigcard__scrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.82))}
.mh-bigcard__b{position:absolute;left:10px;right:10px;bottom:9px;z-index:2}
.mh-bigcard__b b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mh-bigcard__b small{font-size:10.5px;opacity:.85}
.mh-bigcard__b .r{display:flex;align-items:center;gap:3px;margin-top:3px;font-size:11px}
.mh-bigcard__b .r .msr{font-size:13px;color:var(--mh-star)}
.mh-archhead{display:flex;align-items:flex-end;justify-content:space-between;margin:26px 0 16px}
.mh-archhead h1{margin:0;font-size:22px;font-weight:800}
.mh-archhead .count{color:var(--mh-muted);font-size:13px;margin-top:4px}
.mh-pager{display:flex;justify-content:center;gap:6px;margin:34px 0 8px}
.mh-pager a,.mh-pager span{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:#fff;border:1px solid var(--mh-border);color:var(--mh-ink-2);font-size:13px;font-weight:600;text-decoration:none}
.mh-pager .current{background:var(--mh-green);border-color:var(--mh-green);color:#fff}
.mh-pager a:hover{border-color:var(--mh-green);color:var(--mh-green-d)}

/* ===================== SINGLE DETAIL ===================== */
/* Hero backdrop. Without a cover image this is the original green wash, so the
   page never looks broken; with one, the app's own feature graphic sits behind
   it — blurred past recognition and veiled down to a tint, which is the point.
   Tune the two variables, not the rules. */
.mh-hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#eef6f1,transparent 220px)}
/* The homepage slider and the single-item backdrop share the mh-hero name,
   but only the slider should be a vertically centred, fixed-height box. */
.single-game .mh-hero,.single-app .mh-hero{display:block;height:auto;border-radius:0}
.mh-hero > .mh-wrap{position:relative;z-index:1}
.mh-hero.has-bg{--mh-hero-blur:26px;--mh-hero-strength:.55;background:var(--mh-bg)}
.mh-hero__bg,.mh-hero__veil{position:absolute;inset:0;z-index:0;pointer-events:none}
.mh-hero__bg{
  background-size:cover;background-position:center;
  filter:blur(var(--mh-hero-blur)) saturate(1.2);
  opacity:var(--mh-hero-strength);
  /* Blur samples transparency in from outside the box and leaves a pale rim, so
     the layer is grown past its own edges rather than scaled from the centre —
     scaling would crop the artwork, this only hides the rim on the left and
     right, where nothing else covers it. */
  inset:calc(var(--mh-hero-blur) * -2);
}
/* The veil does all the blending, and it is the only thing that does — an
   earlier version also masked the image and the two fades fought each other,
   leaving a hard line where the mask was already half open at the band's real
   top edge. Starting and ending on exactly var(--mh-bg) makes both seams
   arithmetically impossible: the breadcrumb strip above and the panel below sit
   on that same colour. Everything between is the app's own artwork, veiled to a
   tint with a trace of the theme green kept in the mix. */
.mh-hero__veil{background:linear-gradient(180deg,
  var(--mh-bg) 0,
  rgba(241,248,244,.72) 90px,
  rgba(255,255,255,.80) 55%,
  var(--mh-bg) 100%)}
/* No blur support (very old browsers): a sharp photo behind the text would be
   unreadable, so drop the image and keep the plain wash. */
@supports not (filter:blur(1px)){.mh-hero.has-bg{background:linear-gradient(180deg,#eef6f1,transparent 220px)}.mh-hero__bg,.mh-hero__veil{display:none}}

.mh-detail{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:start;padding:24px 0 30px}
.mh-side{position:sticky;top:80px}
.mh-side__icon{position:relative;width:100%;aspect-ratio:1/1;border-radius:22%;overflow:visible;background:#e9edf1;box-shadow:0 0 0 5px #fff,0 10px 26px rgba(16,24,40,.14);isolation:isolate}
.mh-side__icon img,.mh-side__icon > div:first-child{width:100%;height:100%;border-radius:inherit;object-fit:cover;overflow:hidden}
.mh-side__flag{position:absolute;z-index:2;top:-16px;left:-10px;background:#f1e9ff;color:#8b35e8;font-size:12px;font-weight:800;line-height:1;padding:9px 19px;border-radius:999px;text-transform:uppercase;letter-spacing:.035em;box-shadow:0 9px 20px rgba(93,48,168,.16)}
.mh-side__dl{margin-top:14px}
.mh-side__stars{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:14px}
.mh-side__stars .row .msr{font-size:20px;color:var(--mh-star)}
.mh-side__stars small{color:var(--mh-muted);font-size:11.5px}
.mh-detail__title{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0 0 12px;line-height:1.15}
.mh-detail__ver{color:#667085;font-weight:700}
.mh-detail__flag{color:#667085;font-weight:600;font-size:18px}
.mh-pillrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.mh-pill{display:inline-flex;align-items:center;gap:5px;background:var(--mh-green-soft);color:var(--mh-green-d);font-size:12px;font-weight:700;padding:6px 12px;border-radius:9px}
.mh-pill .msr{font-size:15px}
.mh-pill--vote{background:#f4f6f8;color:var(--mh-ink-2)}
.mh-pill--req{background:#fff4e6;color:#c2710b;cursor:pointer;border:0;font-family:inherit}
.mh-modbar{background:linear-gradient(90deg,#fff7ed,#fffdf8);border:1px solid #fde9cf;border-radius:12px;padding:14px 16px;margin-bottom:18px}
.mh-modbar b{display:block;font-size:13px;color:#b45309;margin-bottom:3px}
.mh-modbar span{font-size:13.5px;color:#92400e;font-style:italic}
.mh-infogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.mh-infocell{background:#fff;border:1px solid var(--mh-border);border-radius:12px;padding:13px 15px}
.mh-infocell .k{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--mh-muted);margin-bottom:6px}
.mh-infocell .k .msr{font-size:14px}
.mh-infocell .v{font-size:13.5px;font-weight:700;color:var(--mh-ink);word-break:break-word}
.mh-infocell .v.green{color:var(--mh-green-d)}

/* panels */
.mh-panel{background:#fff;border:1px solid var(--mh-border);border-radius:var(--mh-radius);padding:22px 24px;margin-top:18px}
.mh-panel__h{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:800;margin:0 0 16px}
.mh-panel__h .msr{font-size:19px;color:var(--mh-green-d)}
.mh-shots{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.mh-shots img{height:240px;border-radius:14px;flex:none;scroll-snap-align:start}
/* Description clamp: long store descriptions would otherwise push the
   download panels far below the fold. The fade sits inside the clamp so it
   disappears together with it. */
/* Nothing is clamped until JS confirms the text overflows: with scripting
   off the description stays fully readable instead of being cut with no
   way to open it, and the fade never washes over text that fits. */
.mh-clamp{position:relative}
.mh-clamp.is-clamped{max-height:420px;overflow:hidden}
.mh-clamp.is-clamped.is-open{max-height:none}
.mh-clamp__fade{display:none;position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.85) 55%,#fff 100%)}
.mh-clamp.is-clamped .mh-clamp__fade{display:block}
.mh-clamp.is-open .mh-clamp__fade{display:none}
/* The hidden attribute has to beat the display rule below it. */
.mh-clamp__btn[hidden]{display:none}
.mh-clamp__btn{display:inline-flex;align-items:center;gap:4px;margin-top:14px;padding:0;border:0;background:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:var(--mh-green-d)}
.mh-clamp__btn:hover{color:var(--mh-green-dd)}
.mh-clamp__btn .msr{transition:transform .2s}
.mh-clamp__btn[aria-expanded="true"] .msr{transform:rotate(180deg)}
.mh-prose{color:var(--mh-ink-2);font-size:14px;line-height:1.7}
.mh-prose h3{color:var(--mh-ink);font-size:16px;margin:18px 0 8px;padding-left:10px;border-left:3px solid var(--mh-green)}
.mh-prose ul{padding-left:18px}
.mh-prose li{margin:6px 0}
.mh-modinfo li{color:var(--mh-green-d);font-style:italic;font-size:13.5px;margin:6px 0}
.mh-help{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mh-help a{display:flex;align-items:center;gap:8px;background:#f7f9fb;border:1px solid var(--mh-border);border-radius:11px;padding:13px 15px;text-decoration:none;color:var(--mh-ink-2);font-size:13.5px;font-weight:600}
.mh-help a .msr{font-size:18px;color:var(--mh-muted)}
.mh-faq__item{border-bottom:1px solid var(--mh-border)}
.mh-faq__q{display:flex;align-items:center;justify-content:space-between;padding:15px 2px;cursor:pointer;font-size:14px;font-weight:600;color:var(--mh-ink)}
.mh-faq__q .msr{color:var(--mh-muted);transition:transform .2s}
.mh-faq__item.open .mh-faq__q .msr{transform:rotate(180deg)}
.mh-faq__a{display:none;padding:0 2px 16px;color:var(--mh-ink-2);font-size:13.5px;line-height:1.6}
.mh-faq__item.open .mh-faq__a{display:block}
.mh-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px}
.mh-strip a{flex:none;width:74px;text-decoration:none;color:var(--mh-ink-2)}
.mh-strip__ic{width:64px;height:64px;border-radius:15px;margin:0 auto 6px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:22px}
.mh-strip__ic img{width:100%;height:100%;object-fit:cover}
.mh-strip small{display:block;text-align:center;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* popularity */
.mh-pop{text-align:center}
.mh-pop__pct{font-size:54px;font-weight:800;color:var(--mh-green-d);line-height:1}
.mh-pop__bars{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:32px;margin:14px 0 10px}
.mh-pop__bars i{width:6px;border-radius:3px;background:var(--mh-green)}
.mh-pop__stat{display:flex;justify-content:center;gap:26px;color:var(--mh-muted);font-size:12.5px}
.mh-pop__stat b{color:var(--mh-ink)}

/* ===================== DOWNLOAD PAGE ===================== */
.mh-dlhead{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--mh-border);border-radius:var(--mh-radius);padding:16px}
.mh-dlhead__ic{flex:none;width:60px;height:60px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:24px}
.mh-dlhead__ic img{width:100%;height:100%;object-fit:cover}
.mh-dlhead__m b{font-size:18px;font-weight:800;display:block}
.mh-dlhead__m .meta{display:flex;gap:14px;color:var(--mh-muted);font-size:12.5px;margin-top:5px;flex-wrap:wrap}
.mh-dlhead__m .meta span{display:flex;align-items:center;gap:4px}
.mh-dlhead__m .meta .msr{font-size:14px}
.mh-note{background:#fffdf6;border:1px solid #f6e6bf;border-radius:12px;padding:12px 16px;color:#92660b;font-size:12.5px;font-style:italic;margin-top:14px;display:flex;gap:8px;align-items:flex-start}
.mh-dlfiles-head{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(228,231,236,.85);border-radius:17px;padding:17px 20px;margin-top:16px;box-shadow:0 8px 20px rgba(16,24,40,.07)}
.mh-dlfiles-head__icon{width:46px;height:46px;border-radius:13px;background:linear-gradient(145deg,#38d795,var(--mh-green));color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 7px 16px rgba(22,193,114,.20)}
.mh-dlfiles-head__copy{min-width:0}
.mh-dlfiles-head__copy h2{margin:0;color:var(--mh-ink);font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
.mh-dlfiles-head__copy p{margin:4px 0 0;color:var(--mh-muted);font-size:11.5px;line-height:1.35}
.mh-dlfiles-head__count{margin-left:auto;background:#f2f4f7;color:#98a2b3;font-size:10px;font-weight:600;padding:6px 11px;border-radius:999px;white-space:nowrap;flex:none}
.mh-acc{background:#fff;border:1px solid #dfe3e8;border-radius:17px;margin-top:16px;overflow:hidden;box-shadow:0 7px 18px rgba(16,24,40,.07);transition:border-color .2s,box-shadow .2s}
.mh-acc.is-open{border:2px solid #35ce91;box-shadow:0 9px 22px rgba(22,193,114,.10)}
.mh-acc__h{display:flex;align-items:center;gap:13px;padding:17px 20px;cursor:pointer;background:#fff;transition:background .2s}
.mh-acc.is-open .mh-acc__h{background:linear-gradient(110deg,#effcf6,#fbfffd)}
.mh-acc__h .msr.dl{color:var(--mh-green-d);font-size:22px}
.mh-acc__h b{font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.25}
.mh-acc__h small{display:block;color:var(--mh-muted);font-size:11px;margin-top:4px}
/* The chevron sits hard right and flips when the group opens. It used to be an
   empty span carrying the margin while the visible icon sat wherever the flex
   line left it, so it drifted next to short titles. */
.mh-acc__h .mh-acc__chev{margin-left:auto;display:flex;color:var(--mh-muted);transition:transform .2s;flex:none}
.mh-acc.is-open .mh-acc__chev{transform:rotate(180deg);color:var(--mh-green-d)}
.mh-acc__h > .msr:first-child{color:#a7afbd;flex:none;transition:color .2s;font-size:28px}
.mh-acc.is-open .mh-acc__h > .msr:first-child{color:var(--mh-green-d)}
.mh-acc__h > div{min-width:0;flex:1}
.mh-acc__body{display:none;padding:14px 18px 16px;border-top:1px solid #edf0f2;background:#fff}
.mh-acc.is-open .mh-acc__body{display:block}
.mh-acc__dot{color:var(--mh-muted);opacity:.6;margin:0 2px}
/* "Recommended" flag on a version group */
.mh-acc__rec{display:inline-flex;align-items:center;gap:3px;background:#fef3c7;color:#b45309;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.mh-acc__rec .msr{font-size:13px}

/* A group holds several files, so rows stack and the separator between them
   does the work the card border used to. */
.mh-file{display:flex;align-items:center;gap:12px;padding:12px 6px;text-decoration:none;color:inherit;border-radius:11px}
.mh-file + .mh-file{border-top:1px solid var(--mh-border)}
.mh-file:hover{background:var(--mh-green-soft)}
.mh-file:hover .msr{color:var(--mh-green-d)!important}
.mh-file > .msr:first-child{font-size:21px!important;flex:none}
.mh-file__n{font-size:12.5px;font-weight:600;min-width:0;word-break:break-word}
.mh-file__n small{display:flex;align-items:center;gap:5px;flex-wrap:wrap;color:var(--mh-muted);font-weight:500;font-size:10.5px;margin:5px 0 0}
.mh-file__t{font-size:8px;font-weight:800;background:#d5fae8;color:var(--mh-green-d);padding:4px 7px;border-radius:6px;text-transform:lowercase}
.mh-file__s{margin-left:auto;color:var(--mh-muted);font-size:11px}

@media(max-width:600px){
  .mh-dlfiles-head{gap:11px;padding:14px 15px;border-radius:15px}
  .mh-dlfiles-head__icon{width:41px;height:41px;border-radius:12px}
  .mh-dlfiles-head__copy h2{font-size:15px}
  .mh-dlfiles-head__copy p{font-size:10.5px;margin-top:3px}
  .mh-dlfiles-head__count{font-size:9px;padding:5px 8px}
  .mh-acc{border-radius:15px;margin-top:14px}
  .mh-acc__h{gap:10px;padding:15px}
  .mh-acc__h > .msr:first-child{font-size:26px}
  .mh-acc__h b{font-size:13px}
  .mh-acc__h small{font-size:10.5px;margin-top:3px}
  .mh-acc__body{padding:11px 13px 13px}
  .mh-file{gap:10px;padding:11px 5px}
  .mh-file > .msr:first-child{font-size:20px!important}
  .mh-file__n{font-size:12px}
  .mh-file__n small{font-size:10px;margin-top:4px}
}

/* countdown */
.mh-count{background:#fff;border:1px solid var(--mh-border);border-radius:var(--mh-radius);overflow:hidden;margin-top:14px}
.mh-count__top{background:linear-gradient(120deg,var(--mh-green),var(--mh-green-dd));padding:16px;text-align:center;color:#fff}
.mh-count__file{display:inline-block;background:rgba(255,255,255,.2);padding:5px 12px;border-radius:8px;font-size:12.5px;font-weight:600}
.mh-count__sub{font-size:11.5px;opacity:.85;margin-top:6px}
.mh-count__b{padding:26px;text-align:center}
.mh-ring{width:120px;height:120px;border-radius:50%;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;background:conic-gradient(var(--mh-green) var(--mh-progress,0deg),#eef0f3 0deg);position:relative}
.mh-ring__in{width:96px;height:96px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mh-ring__n{font-size:30px;font-weight:800}
.mh-ring__l{font-size:11px;color:var(--mh-muted)}
.mh-ring.is-ready{background:linear-gradient(145deg,#38d795,var(--mh-green));box-shadow:0 12px 28px rgba(22,193,114,.22)}
.mh-ring__check{font-size:52px;color:#fff}
.mh-count__msg{font-size:16px;font-weight:700;margin-top:18px}
.mh-count__msg small{display:block;color:var(--mh-green-d);font-size:12.5px;font-weight:500;margin-top:4px}
.mh-count__download{margin-top:17px;padding:13px 27px;border-radius:999px;background:linear-gradient(135deg,#35d495,var(--mh-green));font-size:15px;box-shadow:0 12px 26px rgba(22,193,114,.26)}
.mh-count__download:hover{background:linear-gradient(135deg,var(--mh-green),var(--mh-green-d))}
.mh-count__download-size{font-weight:600;opacity:.92}
.mh-count__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--mh-border);margin-top:22px}
.mh-count__grid div{padding:14px;text-align:center;border-right:1px solid var(--mh-border)}
.mh-count__grid div:last-child{border-right:0}
.mh-count__grid small{display:block;color:var(--mh-muted);font-size:11px;margin-bottom:4px}
.mh-count__grid b{font-size:14px}

/* ===================== SINGLE POST (TIPS) ===================== */
.mh-post{max-width:760px;margin:0 auto;padding:8px 0 30px}
.mh-post__hero{height:300px;border-radius:18px;overflow:hidden;background-size:cover;background-position:center;margin-bottom:24px}
.mh-post h1{font-size:32px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin:0 0 12px;text-wrap:pretty}
.mh-post__meta{display:flex;align-items:center;gap:14px;color:var(--mh-muted);font-size:13px;margin-bottom:24px}
.mh-post__meta .cat{background:var(--mh-green-soft);color:var(--mh-green-d);padding:3px 10px;border-radius:7px;font-weight:700}
.mh-post__body{font-size:16px;line-height:1.8;color:#1d2939}
.mh-post__body h2{font-size:22px;margin:30px 0 10px}
.mh-post__body h3{font-size:18px;margin:24px 0 8px}
.mh-post__body img{border-radius:12px;margin:18px 0}
.mh-post__body a{color:var(--mh-green-d)}
.mh-post__body blockquote{border-left:3px solid var(--mh-green);margin:18px 0;padding:4px 0 4px 18px;color:var(--mh-ink-2)}

/* ===================== COMMENTS ===================== */
.mh-comments .commentlist{list-style:none;margin:0;padding:0}
.mh-comments .commentlist li{padding:14px 0;border-bottom:1px solid var(--mh-border)}
.mh-comments textarea,.mh-comments input[type=text],.mh-comments input[type=email],.mh-comments input[type=url]{width:100%;border:1px solid var(--mh-border);border-radius:11px;padding:12px 14px;font-family:inherit;font-size:13.5px;outline:none;background:#fafbfc}
.mh-comments textarea:focus,.mh-comments input:focus{border-color:var(--mh-green);background:#fff}
.mh-comments .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.mh-comments .submit{margin-top:14px;text-align:right}

/* ===================== FOOTER ===================== */
.mh-footer{border-top:1px solid var(--mh-border-2);margin-top:46px;background:#fff}
.mh-footer__in{padding:24px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.mh-footer__nav{display:flex;gap:22px;flex-wrap:wrap}
.mh-footer__nav a{color:var(--mh-ink-2);font-size:13px;text-decoration:none}
.mh-footer__nav a:hover{color:var(--mh-green-d)}
.mh-footer__copy{text-align:center;color:var(--mh-faint);font-size:11.5px;padding:0 20px 22px}

/* ===================== RESPONSIVE ===================== */
/* The blurred hero clips its backdrop with overflow:hidden, which makes it a
   sticky containing block. When the info grid grows to a third row, the
   desktop sidebar's top:80px inset is then applied inside the hero and pushes
   the icon below the title. Keep the desktop sidebar at its grid start; the
   existing mobile layout below remains unchanged. */
@media(min-width:769px){
  .single-game .mh-side,.single-app .mh-side{position:static;align-self:start}
}
@media(max-width:1024px){
  .mh-grid-6{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mh-top{grid-template-columns:repeat(4,1fr)}
  .mh-detail{grid-template-columns:190px 1fr;gap:22px}
  .mh-infogrid,.mh-count__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .mh-nav{display:none}
  .mh-burger{display:block;order:3}
  .mh-search{width:auto;flex:1}
  .mh-grid-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mh-top{grid-template-columns:repeat(3,1fr)}
  .mh-grid-3{grid-template-columns:1fr}
  /* Narrow screens: the scrim covers the whole banner so the text stays
     readable over any image, and the body gets the full width. */
  .mh-hero{height:clamp(260px,54vw,340px)}
  .mh-hero__body{max-width:100%;padding:0 22px}
  .mh-hero__scrim{background:linear-gradient(90deg,rgba(8,14,10,.94) 0%,rgba(8,14,10,.82) 55%,rgba(8,14,10,.6) 100%)}
  .mh-hero h2{font-size:26px;margin:14px 0 8px}
  .mh-hero__stats{margin:12px 0 16px}
  .mh-detail{grid-template-columns:1fr}
  .mh-side{position:static;display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center}
  .mh-side__icon{width:120px}
  .mh-help{grid-template-columns:1fr}
}
@media(max-width:600px){
  .mh-grid-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(max-width:480px){
  .mh-header__in{gap:12px}
  .mh-logo--header{max-width:min(220px,56vw)}
  .mh-top{grid-template-columns:repeat(2,1fr)}
  .mh-hero h2{font-size:22px}
  .mh-detail__title{font-size:21px}
}

/* mobile nav drawer */
.mh-mobnav{display:none;position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.4)}
.mh-mobnav.open{display:block}
.mh-mobnav__panel{position:absolute;top:0;right:0;width:74%;max-width:300px;height:100%;background:#fff;padding:20px}
.mh-mobnav__panel a{display:flex;align-items:center;gap:10px;padding:13px 8px;border-radius:10px;text-decoration:none;color:var(--mh-ink);font-weight:600;font-size:15px}
.mh-mobnav__panel a:hover{background:var(--mh-green-soft);color:var(--mh-green-d)}

/* ===================== GALLERY LIGHTBOX ===================== */
.mh-shots .mh-shot{appearance:none;border:0;padding:0;margin:0;background:none;flex:none;cursor:zoom-in;border-radius:14px;overflow:hidden;line-height:0;display:block;scroll-snap-align:start}
.mh-shots .mh-shot img{height:240px;width:auto;border-radius:14px;display:block;transition:transform .18s}
.mh-shots .mh-shot:hover img{transform:scale(1.02)}
.mh-shots .mh-shot:focus-visible{outline:3px solid var(--mh-green);outline-offset:2px}
.mh-prose .gallery img,.mh-prose .wp-block-gallery img,.mh-prose figure img{cursor:zoom-in}

.mh-lb{position:fixed;inset:0;z-index:9999;background:#000;display:none;flex-direction:column;overscroll-behavior:contain}
.mh-lb.is-open{display:flex}
body.mh-lb-lock{overflow:hidden}

.mh-lb__bar{flex:none;height:70px;background:var(--mh-green);display:flex;align-items:center;justify-content:space-between;padding:0 22px;color:#fff}
.mh-lb__count{font-size:20px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.02em;opacity:.95}
.mh-lb__close{appearance:none;border:0;background:none;color:#fff;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;padding:0}
.mh-lb__close .msr{font-size:30px}
.mh-lb__close:hover{background:rgba(255,255,255,.18)}

.mh-lb__stage{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0;padding:22px 84px 8px}
.mh-lb__figure{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.mh-lb__img{flex:1 1 auto;min-height:0;max-height:100%;max-width:100%;width:auto;object-fit:contain;border-radius:4px;display:block;-webkit-user-select:none;user-select:none}
.mh-lb__cap{color:#e7eaee;font-size:20px;text-align:center;padding:0 10px;text-wrap:pretty;flex:none}

.mh-lb__nav{position:absolute;top:50%;transform:translateY(-50%);appearance:none;border:0;background:none;color:rgba(255,255,255,.9);cursor:pointer;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0}
.mh-lb__nav:hover{background:rgba(255,255,255,.14);color:#fff}
.mh-lb__nav .msr{font-size:34px}
.mh-lb__nav--prev{left:14px}
.mh-lb__nav--next{right:14px}
.mh-lb__nav[disabled]{opacity:.25;cursor:default}
.mh-lb__nav[disabled]:hover{background:none}

.mh-lb__rail{flex:none;display:flex;gap:9px;justify-content:center;align-items:center;padding:14px 14px 18px;overflow-x:auto;scrollbar-width:thin;background:#000}
.mh-lb__thumb{appearance:none;border:0;padding:0;background:none;cursor:pointer;flex:none;line-height:0;border-radius:8px;overflow:hidden;box-shadow:0 0 0 2px transparent;transition:box-shadow .15s,opacity .15s;opacity:.62}
.mh-lb__thumb img{height:128px;width:auto;display:block;border-radius:8px}
.mh-lb__thumb:hover{opacity:.9}
.mh-lb__thumb.is-on{opacity:1;box-shadow:0 0 0 3px var(--mh-green)}

@media(max-width:900px){
  .mh-lb__stage{padding:14px 14px 6px}
  .mh-lb__nav{width:46px;height:46px;background:rgba(0,0,0,.42)}
  .mh-lb__nav .msr{font-size:28px}
  .mh-lb__nav--prev{left:6px}
  .mh-lb__nav--next{right:6px}
  .mh-lb__cap{font-size:16px}
  .mh-lb__thumb img{height:84px}
  .mh-shots .mh-shot img{height:190px}
}
@media(max-width:600px){
  .mh-lb__bar{height:56px;padding:0 12px}
  .mh-lb__count{font-size:16px}
  .mh-lb__close{width:40px;height:40px}
  .mh-lb__close .msr{font-size:26px}
  .mh-lb__figure{gap:12px}
  .mh-lb__cap{font-size:14.5px}
  .mh-lb__rail{gap:7px;padding:10px 10px 14px;justify-content:flex-start}
  .mh-lb__thumb img{height:64px}
  .mh-shots .mh-shot img{height:160px}
}
@media(max-height:520px){
  .mh-lb__rail{display:none}
  .mh-lb__cap{display:none}
}
@media(prefers-reduced-motion:reduce){
  .mh-shots .mh-shot img,.mh-lb__thumb{transition:none}
}

/* ===================== VOTING ===================== */
.mh-vote{display:flex;align-items:center;gap:8px}
.mh-vote__btn{appearance:none;border:0;font-family:inherit;cursor:pointer;transition:background .15s,color .15s,transform .12s}
.mh-vote__btn b{font-weight:700;font-variant-numeric:tabular-nums}
.mh-vote__btn:hover{background:#e9edf2}
.mh-vote__btn:active{transform:scale(.96)}
.mh-vote__btn.is-on{background:var(--mh-green-soft);color:var(--mh-green-d)}
.mh-vote__btn.is-on.is-down{background:#fee4e2;color:#b42318}
.mh-vote__btn[disabled]{opacity:.6;cursor:default;transform:none}
.mh-vote__btn:focus-visible{outline:2px solid var(--mh-green);outline-offset:2px}
.mh-vote__msg{font-size:12px;color:var(--mh-muted);align-self:center}
.mh-vote__msg.is-err{color:#b42318}
.mh-pop__bars i{transition:height .25s,background .25s}

/* ===================== MODALS (requests) ===================== */
.mh-modal{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:22px}
.mh-modal[hidden]{display:none}
.mh-modal__backdrop{position:absolute;inset:0;background:rgba(16,24,40,.55);backdrop-filter:blur(3px)}
.mh-modal__box{position:relative;background:#fff;border-radius:16px;width:100%;max-width:520px;max-height:calc(100dvh - 44px);display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(16,24,40,.28);overflow:hidden;animation:mh-modal-in .18s ease-out}
@keyframes mh-modal-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.mh-modal__head{flex:none;display:flex;align-items:center;gap:10px;padding:18px 20px;border-bottom:1px solid var(--mh-border)}
.mh-modal__head h3{margin:0;font-size:19px;font-weight:800;display:flex;align-items:center;gap:10px;flex:1;letter-spacing:-.01em}
.mh-modal__head h3 .msr{color:var(--mh-green-d)}
.mh-modal__x{appearance:none;border:0;background:none;cursor:pointer;color:var(--mh-muted);width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:10px;padding:0;flex:none}
.mh-modal__x:hover{background:#f2f4f7;color:var(--mh-ink)}
.mh-modal__form{display:flex;flex-direction:column;min-height:0;flex:1}
.mh-modal__body{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:18px;min-height:0}
.mh-modal__foot{flex:none;display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid var(--mh-border)}
.mh-modal__foot--block{padding:16px 20px 12px}
.mh-modal__note{flex:none;margin:0;padding:0 20px 16px;text-align:center;color:var(--mh-muted);font-size:12.5px}

.mh-field{display:flex;flex-direction:column;gap:7px}
.mh-field label{font-size:14.5px;font-weight:600;color:var(--mh-ink)}
.mh-field label .req{color:var(--mh-ink-2)}
.mh-field input,.mh-field select,.mh-field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--mh-ink);background:#f7f9fb;border:1px solid var(--mh-border);border-radius:11px;padding:13px 15px;outline:none;transition:border-color .15s,box-shadow .15s,background .15s}
.mh-field textarea{resize:vertical;min-height:96px;line-height:1.55}
.mh-field select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:42px}
.mh-field input:focus,.mh-field select:focus,.mh-field textarea:focus{background:#fff;border-color:var(--mh-green);box-shadow:0 0 0 3px var(--mh-green-ring)}
.mh-field input.is-ro{background:#f2f4f7;color:var(--mh-ink-2);cursor:default}
.mh-field input::placeholder,.mh-field textarea::placeholder{color:var(--mh-muted)}
.mh-field small{font-size:12.5px;color:var(--mh-muted)}
.mh-field.has-err input,.mh-field.has-err select,.mh-field.has-err textarea{border-color:#f04438;box-shadow:0 0 0 3px #fee4e2}

.mh-modal__msg{margin:0;font-size:13.5px;display:none}
.mh-modal__msg.is-on{display:block}
.mh-modal__msg.is-err{color:#b42318}
.mh-modal__msg.is-ok{color:var(--mh-green-d);font-weight:600}
.mh-modal__box.is-sent .mh-modal__body>.mh-field,.mh-modal__box.is-sent .mh-modal__foot{display:none}
body.mh-modal-lock{overflow:hidden}

/* the two triggers */
button.mh-pill--req{appearance:none;cursor:pointer;font-family:inherit}
button.mh-pill--req:hover{background:#ffe9c9}

@media(max-width:600px){
  .mh-modal{padding:0;align-items:flex-end}
  .mh-modal__box{max-width:none;border-radius:16px 16px 0 0;max-height:92dvh}
  .mh-modal__head{padding:16px}
  .mh-modal__head h3{font-size:17px}
  .mh-modal__body{padding:16px;gap:15px}
  .mh-modal__foot{padding:14px 16px}
  .mh-field input,.mh-field select,.mh-field textarea{font-size:16px}
}