/* Izgled portala, smjer „Modul” (prijedlog moj.wmd.hr/prijedlog/4xj9zucyv5jr, wmd 26.10.2026.): isti sustav kao novi wmd.hr.
   Učitava se uz portal.css na svakoj stranici portala, košarice i Provjere stranice (html.mp); jedini izgled od 31.10.2026.
   1) tokeni za svijetlu i tamnu temu; 2) sloj teme: boje Tailwinda iz portal.css (stone, brand, sky, emerald, rose, amber)
   preslikane na tokene, pa svaka stranica dobije nove boje bez izmjene pogleda; 3) okvir: zaglavlje, izbornici, donja traka na
   mobitelu, podnožje i prijava (klase mp-). Funkcije su iste; mijenja se samo izgled (wmd 26.10.: „prvo vizualno samo zamijeniti”). */

html.mp {
  --mp-page: #f1f6f9;
  --mp-paper: #ffffff;
  --mp-surface: #f1f6f9;
  --mp-surface-2: #e6eff4;
  --mp-ink: #0f2f44;
  --mp-ink-2: #22465c;
  --mp-ink-3: #3c5a6d;
  --mp-muted: #4b5f6d;
  --mp-muted-2: #7f95a3;
  --mp-line: #dce6ec;
  --mp-line-2: #c7d6e0;
  --mp-deep: #007aa8;
  --mp-deep-hover: #006c9a;
  --mp-blue: #1592c8;
  --mp-cyan: #5ccbee;
  --mp-blue-ink: #0b5f87;
  --mp-blue-pale: #e6f3f9;
  --mp-blue-line: #bfe0f0;
  --mp-accent: #f05a28;
  --mp-ok: #17703f;
  --mp-ok-strong: #1f8a50;
  --mp-ok-pale: #e5f4ea;
  --mp-ok-line: #bfe5cd;
  --mp-warn: #8a5a00;
  --mp-warn-strong: #e0a100;
  --mp-warn-pale: #fff4d6;
  --mp-warn-line: #f1dc9c;
  --mp-bad: #b52f10;
  --mp-bad-strong: #d9481f;
  --mp-bad-pale: #fdeee8;
  --mp-bad-line: #f6c9b9;
  --mp-field: linear-gradient(110deg, #056a9c 0%, #0679ad 44%, #0b8fc5 78%, #25b0de 100%);
  --mp-shadow-sm: 0 1px 2px rgb(15 47 68 / .08);
  --mp-shadow: 0 1px 2px rgb(15 47 68 / .06), 0 16px 34px -20px rgb(15 47 68 / .3);
  --mp-ease: cubic-bezier(.16, 1, .3, 1);
  --mp-inset: clamp(.5rem, 1.1vw, 1.25rem);
}
html.mp.dark {
  --mp-page: #0a1721;
  --mp-paper: #10212e;
  --mp-surface: #17293a;
  --mp-surface-2: #1e3346;
  --mp-ink: #e7f0f6;
  --mp-ink-2: #c4d5e0;
  --mp-ink-3: #a9bfce;
  --mp-muted: #93aabb;
  --mp-muted-2: #6f8798;
  --mp-line: #213848;
  --mp-line-2: #2d495c;
  --mp-deep: #0a86b8;
  --mp-deep-hover: #0b97cf;
  --mp-blue-ink: #7fcbee;
  --mp-blue-pale: #123850;
  --mp-blue-line: #1d4d69;
  --mp-ok: #5fd08f;
  --mp-ok-strong: #2f9c63;
  --mp-ok-pale: #12382a;
  --mp-ok-line: #1d5a3c;
  --mp-warn: #f2c25c;
  --mp-warn-strong: #c98a00;
  --mp-warn-pale: #3a2f12;
  --mp-warn-line: #5c4a1a;
  --mp-bad: #ff9370;
  --mp-bad-strong: #e0582b;
  --mp-bad-pale: #3f1f14;
  --mp-bad-line: #6a3020;
  --mp-field: linear-gradient(110deg, #04496c 0%, #055e89 44%, #0777a6 78%, #138fc1 100%);
  --mp-shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
  --mp-shadow: 0 1px 2px rgb(0 0 0 / .35), 0 18px 36px -22px rgb(0 0 0 / .8);
}

/* ===== 1 sloj teme: svijetle klase (vrijede i u tamnoj temi kroz tokene, osim gdje pogled ima dark: klasu) ===== */
html.mp body { background: var(--mp-page); color: var(--mp-ink); }
html.mp ::selection { background: var(--mp-blue-pale); color: var(--mp-ink); }
html.mp :focus-visible { outline: 3px solid var(--mp-accent); outline-offset: 2px; }

html.mp .bg-white { background-color: var(--mp-paper); }
html.mp .bg-stone-50 { background-color: var(--mp-surface); }
html.mp .bg-stone-100 { background-color: var(--mp-surface-2); }
html.mp .bg-stone-200 { background-color: var(--mp-line); }
html.mp .bg-stone-400 { background-color: var(--mp-muted-2); }
html.mp .bg-stone-900, html.mp .file\:bg-stone-900::file-selector-button { background-color: var(--mp-deep); }
html.mp .hover\:bg-stone-50:hover { background-color: var(--mp-surface); }
html.mp .hover\:bg-stone-100:hover { background-color: var(--mp-surface-2); }
html.mp .hover\:bg-stone-200:hover { background-color: var(--mp-line); }
html.mp .hover\:bg-stone-700:hover, html.mp .hover\:file\:bg-stone-700::file-selector-button:hover { background-color: var(--mp-deep-hover); }

html.mp .text-stone-900, html.mp .text-stone-800, html.mp .hover\:text-stone-900:hover, html.mp .hover\:text-stone-800:hover { color: var(--mp-ink); }
html.mp .text-stone-700, html.mp .hover\:text-stone-700:hover { color: var(--mp-ink-2); }
html.mp .text-stone-600, html.mp .hover\:text-stone-600:hover, html.mp .group:hover .group-hover\:text-stone-600 { color: var(--mp-ink-3); }
html.mp .text-stone-500 { color: var(--mp-muted); }
html.mp .text-stone-400 { color: var(--mp-muted-2); }
html.mp .text-stone-300 { color: var(--mp-line-2); }
html.mp .placeholder-stone-400::placeholder { color: var(--mp-muted-2); }

html.mp .border-stone-100, html.mp .border-stone-200, html.mp .divide-stone-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--mp-line); }
html.mp .border-stone-300, html.mp .hover\:border-stone-300:hover { border-color: var(--mp-line-2); }
html.mp .focus\:border-stone-400:focus { border-color: var(--mp-blue); }
html.mp .ring-stone-100, html.mp .ring-stone-200 { --tw-ring-color: var(--mp-line); }
html.mp .ring-stone-300, html.mp .hover\:ring-stone-300:hover { --tw-ring-color: var(--mp-line-2); }
html.mp .focus\:ring-stone-200:focus { --tw-ring-color: var(--mp-blue-pale); }
html.mp .ring-white { --tw-ring-color: var(--mp-paper); }

/* brand (stara plava #0089b4) i sky → plave „Modula” */
html.mp .bg-brand, html.mp .bg-sky-500 { background-color: var(--mp-deep); }
html.mp .hover\:bg-brand-dark:hover { background-color: var(--mp-deep-hover); }
html.mp .bg-brand-light, html.mp .hover\:bg-brand-light:hover, html.mp .bg-sky-50, html.mp .bg-sky-100 { background-color: var(--mp-blue-pale); }
html.mp .text-brand, html.mp .text-sky-600, html.mp .text-sky-700, html.mp .text-sky-800, html.mp .text-sky-900 { color: var(--mp-blue-ink); }
html.mp .hover\:text-brand-dark:hover { color: var(--mp-ink); }
html.mp .border-brand, html.mp .focus\:border-brand:focus { border-color: var(--mp-deep); }
html.mp .border-sky-200 { border-color: var(--mp-blue-line); }
html.mp .ring-brand, html.mp .focus\:ring-brand:focus { --tw-ring-color: var(--mp-deep); }

/* stanja: zeleno, crveno (narančasto-crvena „Modula”), jantarno */
html.mp .bg-emerald-50, html.mp .bg-emerald-100 { background-color: var(--mp-ok-pale); }
html.mp .bg-emerald-500, html.mp .bg-emerald-600, html.mp .bg-emerald-700, html.mp .hover\:bg-emerald-500:hover { background-color: var(--mp-ok-strong); }
html.mp .hover\:bg-emerald-600:hover { background-color: var(--mp-ok); }
html.mp .text-emerald-500, html.mp .text-emerald-600, html.mp .text-emerald-700, html.mp .text-emerald-800, html.mp .text-emerald-900, html.mp .hover\:text-emerald-700:hover { color: var(--mp-ok); }
html.mp .border-emerald-200 { border-color: var(--mp-ok-line); }
html.mp .border-emerald-500, html.mp .hover\:border-emerald-400:hover { border-color: var(--mp-ok-strong); }
html.mp .bg-rose-50, html.mp .bg-rose-100, html.mp .hover\:bg-rose-50:hover { background-color: var(--mp-bad-pale); }
html.mp .bg-rose-500, html.mp .bg-rose-600, html.mp .hover\:bg-rose-500:hover { background-color: var(--mp-bad-strong); }
html.mp .text-rose-500, html.mp .text-rose-600, html.mp .text-rose-700, html.mp .text-rose-800, html.mp .hover\:text-rose-600:hover, html.mp .hover\:text-red-600:hover { color: var(--mp-bad); }
html.mp .border-rose-200 { border-color: var(--mp-bad-line); }
html.mp .ring-rose-200 { --tw-ring-color: var(--mp-bad-line); }
html.mp .bg-amber-50, html.mp .bg-amber-100 { background-color: var(--mp-warn-pale); }
html.mp .bg-amber-400, html.mp .bg-amber-500, html.mp .bg-amber-600, html.mp .hover\:bg-amber-500:hover { background-color: var(--mp-warn-strong); }
html.mp .text-amber-600, html.mp .text-amber-700, html.mp .text-amber-800, html.mp .text-amber-900 { color: var(--mp-warn); }
html.mp .border-amber-200 { border-color: var(--mp-warn-line); }
html.mp .ring-amber-200, html.mp .hover\:ring-amber-300:hover { --tw-ring-color: var(--mp-warn-line); }

/* ===== 2 sloj teme: dark: klase (jača specifičnost od svijetlih gore i od originala :is(.dark *)) ===== */
html.mp.dark .dark\:bg-stone-950 { background-color: var(--mp-page); }
html.mp.dark .dark\:bg-stone-900 { background-color: var(--mp-paper); }
html.mp.dark .dark\:bg-stone-800, html.mp.dark .dark\:hover\:bg-stone-800:hover { background-color: var(--mp-surface); }
html.mp.dark .dark\:bg-stone-700, html.mp.dark .dark\:hover\:bg-stone-700:hover { background-color: var(--mp-surface-2); }
html.mp.dark .dark\:bg-stone-600 { background-color: var(--mp-line-2); }
html.mp.dark .dark\:bg-stone-100, html.mp.dark .dark\:file\:bg-stone-100::file-selector-button { background-color: var(--mp-deep); }
html.mp.dark .dark\:hover\:bg-white:hover { background-color: var(--mp-deep-hover); }
html.mp.dark .dark\:text-stone-50, html.mp.dark .dark\:text-stone-100, html.mp.dark .dark\:text-stone-200, html.mp.dark .dark\:hover\:text-stone-100:hover, html.mp.dark .dark\:hover\:text-stone-200:hover, html.mp.dark .group:hover .dark\:group-hover\:text-stone-200 { color: var(--mp-ink); }
html.mp.dark .dark\:text-stone-300, html.mp.dark .dark\:hover\:text-stone-300:hover { color: var(--mp-ink-2); }
html.mp.dark .dark\:text-stone-400 { color: var(--mp-muted); }
html.mp.dark .dark\:text-stone-500 { color: var(--mp-muted-2); }
html.mp.dark .dark\:text-stone-900, html.mp.dark .dark\:text-white, html.mp.dark .dark\:file\:text-stone-900::file-selector-button { color: #fff; }
html.mp.dark .dark\:placeholder-stone-500::placeholder { color: var(--mp-muted-2); }
html.mp.dark .dark\:border-stone-800, html.mp.dark .dark\:border-stone-700, html.mp.dark .dark\:divide-stone-800 > :not([hidden]) ~ :not([hidden]) { border-color: var(--mp-line); }
html.mp.dark .dark\:border-stone-600, html.mp.dark .dark\:hover\:border-stone-600:hover { border-color: var(--mp-line-2); }
html.mp.dark .dark\:ring-stone-900, html.mp.dark .dark\:ring-stone-800, html.mp.dark .dark\:ring-stone-700 { --tw-ring-color: var(--mp-line); }
html.mp.dark .dark\:ring-stone-600, html.mp.dark .dark\:hover\:ring-stone-600:hover, html.mp.dark .dark\:hover\:ring-stone-700:hover { --tw-ring-color: var(--mp-line-2); }
html.mp.dark .dark\:focus\:ring-stone-700:focus { --tw-ring-color: var(--mp-blue-pale); }
html.mp.dark .dark\:text-brand-light, html.mp.dark .dark\:text-sky-200, html.mp.dark .dark\:text-sky-300 { color: var(--mp-blue-ink); }
html.mp.dark .dark\:bg-sky-950 { background-color: var(--mp-blue-pale); }
html.mp.dark .dark\:border-sky-900 { border-color: var(--mp-blue-line); }
html.mp.dark .dark\:bg-emerald-950 { background-color: var(--mp-ok-pale); }
html.mp.dark .dark\:bg-emerald-600, html.mp.dark .dark\:hover\:bg-emerald-500:hover { background-color: var(--mp-ok-strong); }
html.mp.dark .dark\:text-emerald-100, html.mp.dark .dark\:text-emerald-200, html.mp.dark .dark\:text-emerald-300, html.mp.dark .dark\:text-emerald-400, html.mp.dark .dark\:hover\:text-emerald-400:hover { color: var(--mp-ok); }
html.mp.dark .dark\:border-emerald-900 { border-color: var(--mp-ok-line); }
html.mp.dark .dark\:hover\:border-emerald-500:hover { border-color: var(--mp-ok-strong); }
html.mp.dark .dark\:bg-rose-950, html.mp.dark .dark\:hover\:bg-rose-950:hover { background-color: var(--mp-bad-pale); }
html.mp.dark .dark\:text-rose-200, html.mp.dark .dark\:text-rose-300, html.mp.dark .dark\:text-rose-400 { color: var(--mp-bad); }
html.mp.dark .dark\:border-rose-900 { border-color: var(--mp-bad-line); }
html.mp.dark .dark\:bg-amber-950 { background-color: var(--mp-warn-pale); }
html.mp.dark .dark\:text-amber-100, html.mp.dark .dark\:text-amber-200, html.mp.dark .dark\:text-amber-300, html.mp.dark .dark\:text-amber-400 { color: var(--mp-warn); }
html.mp.dark .dark\:border-amber-900 { border-color: var(--mp-warn-line); }
html.mp.dark .dark\:hover\:ring-amber-800:hover { --tw-ring-color: var(--mp-warn-line); }

/* kartice: mekana sjena „Modula” uz postojeći prsten; naslovi čvršći */
html.mp .rounded-2xl.bg-white { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--mp-shadow); }
html.mp main h1 { font-weight: 700; letter-spacing: -.03em; }
html.mp main h2 { letter-spacing: -.02em; }

/* ===== 3 okvir: zaglavlje ===== */
.mp-header { position: sticky; top: 0; z-index: 40; background: rgb(255 255 255 / .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--mp-line); }
html.mp.dark .mp-header { background: rgb(10 23 33 / .9); }
.mp-header__row { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2.25rem); height: 72px; }
.mp-brand { display: flex; align-items: center; gap: .85rem; flex: none; text-decoration: none; color: var(--mp-ink); }
.mp-brand img, .mp-brand svg { display: block; height: 42px; width: auto; }
.mp-brand__name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; padding-left: .85rem; border-left: 1.5px solid var(--mp-line-2); white-space: nowrap; }
.mp-nav { display: flex; gap: .25rem; flex: 1; min-width: 0; }
.mp-nav a { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem; border-radius: 10px; font-weight: 650; font-size: 1.05rem; letter-spacing: -.01em; color: var(--mp-ink); text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.mp-nav a:hover { background: var(--mp-surface); }
.mp-nav a[aria-current="page"] { background: var(--mp-blue-pale); color: var(--mp-blue-ink); }
.mp-nav__ic { width: 1.4rem; height: 1.4rem; flex: none; display: none; }
.mp-tools { display: flex; align-items: center; gap: .3rem; margin-left: auto; }
.mp-tool { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border: 0; border-radius: 12px; background: none; color: var(--mp-ink); cursor: pointer; }
.mp-tool:hover { background: var(--mp-surface); }
.mp-tool svg { width: 1.15rem; height: 1.15rem; }
.mp-tool__dot { position: absolute; top: .55rem; right: .55rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--mp-accent); box-shadow: 0 0 0 2px var(--mp-paper); }
.mp-pop { position: relative; }
.mp-menu { position: absolute; right: 0; top: calc(100% + .45rem); z-index: 50; min-width: 13rem; padding: .35rem; border-radius: 16px; background: var(--mp-paper); border: 1px solid var(--mp-line); box-shadow: var(--mp-shadow); }
.mp-menu a, .mp-menu__item { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: 10px; color: var(--mp-ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.mp-menu a:hover { background: var(--mp-surface); }
.mp-menu a[aria-current] { background: var(--mp-blue-pale); color: var(--mp-blue-ink); }
.mp-menu__head { padding: .55rem .65rem .6rem; margin-bottom: .25rem; border-bottom: 1px solid var(--mp-line); }
.mp-menu__head b { display: block; font-size: .95rem; }
.mp-menu__head small { display: block; color: var(--mp-muted); font-size: .82rem; }
.mp-menu__code { margin-left: auto; color: var(--mp-muted); font-size: .78rem; font-weight: 700; }
.mp-menu__sep { height: 1px; margin: .3rem .3rem; background: var(--mp-line); }
.mp-flag { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgb(15 47 68 / .08); }
.mp-lang { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 .65rem 0 .35rem; border-radius: 999px; border: 1px solid var(--mp-line); background: var(--mp-paper); color: var(--mp-ink); font-weight: 700; font-size: .9rem; cursor: pointer; transition: border-color .2s, background-color .2s; }
.mp-lang:hover, .mp-lang[aria-expanded="true"] { border-color: var(--mp-blue); background: var(--mp-blue-pale); }
.mp-chev { width: .8rem; height: .8rem; color: var(--mp-muted); transition: transform .2s; }
[aria-expanded="true"] > .mp-chev { transform: rotate(180deg); }
.mp-user { display: inline-flex; align-items: center; gap: .6rem; padding: .2rem .5rem .2rem .2rem; border: 0; border-radius: 999px; background: none; color: var(--mp-ink); cursor: pointer; text-align: left; }
.mp-user:hover { background: var(--mp-surface); }
.mp-avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--mp-field); color: #fff; font-weight: 700; font-size: .9rem; object-fit: cover; }
.mp-user__text { display: grid; line-height: 1.2; max-width: 12rem; }
.mp-user__text b { font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-user__text small { color: var(--mp-muted); font-size: .8rem; }
.mp-news { width: 22rem; max-width: calc(100vw - 1.5rem); padding: 0; overflow: hidden; }
.mp-news__head { padding: .7rem 1rem; font-weight: 700; border-bottom: 1px solid var(--mp-line); }
.mp-news__list { max-height: 26rem; overflow-y: auto; }
.mp-news__item { padding: .8rem 1rem; border-bottom: 1px solid var(--mp-line); }
.mp-news__item p { margin: 0; }
.mp-news__title { font-weight: 650; font-size: .93rem; }
.mp-news__date { margin-top: .2rem; color: var(--mp-muted-2); font-size: .8rem; }
.mp-news__body { margin-top: .3rem; color: var(--mp-muted); font-size: .85rem; }
.mp-news__empty { padding: 2rem 1rem; text-align: center; color: var(--mp-muted-2); font-size: .9rem; }
.mp-theme .mp-sun, html.dark .mp-theme .mp-moon { display: none; }
html.dark .mp-theme .mp-sun { display: block; }

/* ===== 4 podnožje ===== */
.mp-foot { margin-top: 2rem; border-top: 1px solid var(--mp-line); background: var(--mp-surface); }
html.mp.dark .mp-foot { background: #08131b; }
.mp-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: 1.4rem; font-size: .9rem; color: var(--mp-muted); }
.mp-foot__links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.mp-foot a { color: var(--mp-muted); text-decoration: none; }
.mp-foot a:hover { color: var(--mp-ink); text-decoration: underline; }

/* ===== 5 mobitel: glavni izbornik kao donja traka s ikonama ===== */
@media (max-width: 960px) {
  .mp-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--mp-paper); }   /* inače fixed traka ostaje u zaglavlju */
  html.mp.dark .mp-header { background: var(--mp-page); }
  .mp-header__row { height: 62px; }
  .mp-brand img, .mp-brand svg { height: 34px; }
  .mp-brand__name, .mp-user__text, .mp-lang span { display: none; }
  .mp-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; justify-content: space-around; gap: 0; padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom)); background: var(--mp-paper); box-shadow: 0 -1px 0 var(--mp-line); }
  .mp-nav a { flex: 1; flex-direction: column; gap: .15rem; padding: .4rem .3rem; font-size: .74rem; white-space: normal; text-align: center; line-height: 1.15; }   /* dug naziv u dva retka, ne izvan ekrana */
  .mp-nav__ic { display: block; }
  html.mp body { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 359px) {
  .mp-nav a { padding-inline: .1rem; }
}

/* pet stavki glavnog izbornika (Preporuke i bodovi, vlasnik 31.10.) na računalu: izbornik se ne stišće ispod svojih stavki (inače ide
   preko alata), nego se skrati ime korisnika; do 1279 px otpadnu „Moj WMD”, ime i oznaka jezika, kao na mobitelu, a stavke su uže */
@media (min-width: 961px) {
  .mp-nav { flex: 1 0 auto; }
  .mp-tools, .mp-tools > .mp-pop:last-child, .mp-user, .mp-user__text { min-width: 0; }
}
@media (min-width: 961px) and (max-width: 1279px) {
  .mp-brand__name, .mp-user__text, .mp-lang span { display: none; }
  .mp-nav a { padding: .55rem .65rem; font-size: 1rem; }
}

/* ===== 6 prijava: polje u boji lijevo (znak koji se sam slaže), obrazac desno ===== */
.mp-auth { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--mp-inset); min-height: 100vh; padding: var(--mp-inset); }
.mp-auth__brand { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 1.5rem; padding: clamp(1.75rem, 3vw, 3rem); border-radius: clamp(20px, 2vw, 32px); background: var(--mp-field); color: #fff;
  --mk-q: var(--mp-cyan); --mk-c: var(--mp-accent); --mk-q2: #fff; --mk-c2: var(--mp-accent); }
.mp-auth__brand::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgb(255 255 255 / .2) 1.1px, transparent 1.7px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(160deg, transparent 30%, #000 90%); mask: linear-gradient(160deg, transparent 30%, #000 90%); }
.mp-auth__brand::after { content: ''; position: absolute; z-index: -1; width: 34rem; aspect-ratio: 1; right: -14rem; top: -12rem; border-radius: 50%; border: 4.5rem solid rgb(92 203 238 / .28); }
.mp-auth__logo { display: inline-flex; width: max-content; }
.mp-auth__logo img, .mp-auth__logo svg { display: block; height: 40px; width: auto; }
.mp-auth__art { margin: 0; align-self: center; width: min(100%, 24rem, 30vh); }
.mp-auth__brand h2 { margin: 0; font-size: clamp(2.2rem, 3.6vw, 3.8rem); font-weight: 760; letter-spacing: -.04em; line-height: 1; max-width: 12ch; }
.mp-auth__brand p { margin: 1rem 0 0; font-size: 1.15rem; font-weight: 500; line-height: 1.5; max-width: 36ch; color: rgb(255 255 255 / .92); }
.mp-auth__feats { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.mp-auth__feats li { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .95rem .6rem .6rem; border-radius: 14px; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-weight: 650; }
.mp-auth__feats svg { width: 2rem; height: 2rem; padding: .4rem; border-radius: 9px; background: #fff; color: var(--mp-deep); flex: none; }
.mp-auth__main { display: grid; grid-template-rows: auto 1fr auto; padding: clamp(1rem, 2vw, 2rem) clamp(1rem, 3vw, 3rem); }
.mp-auth__top { display: flex; justify-content: flex-end; align-items: center; gap: .4rem; }
.mp-auth__top .mp-auth__logo { display: none; margin-right: auto; }
.mp-auth__form { width: 100%; max-width: 30rem; justify-self: center; align-self: center; padding-block: 2rem; }
.mp-auth__form h1 { margin: 0; font-size: clamp(1.9rem, 2.6vw, 2.6rem); font-weight: 760; letter-spacing: -.04em; line-height: 1.1; color: var(--mp-ink); }
.mp-auth__lead { margin: .5rem 0 0; color: var(--mp-muted); }
.mp-auth__foot { justify-self: center; }
.mp-field { display: grid; gap: .4rem; margin-top: 1rem; }
.mp-field label { font-weight: 650; font-size: .93rem; color: var(--mp-ink); }
.mp-input { width: 100%; min-height: 3rem; padding: .65rem .9rem; border: 1.5px solid var(--mp-line-2); border-radius: 12px; background: var(--mp-paper); color: var(--mp-ink); font: inherit; }
.mp-input::placeholder { color: var(--mp-muted-2); }
.mp-input:focus { outline: none; border-color: var(--mp-deep); box-shadow: 0 0 0 4px rgb(21 146 200 / .28); }
.mp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; width: 100%; min-height: 3.3rem; margin-top: 1.25rem; padding: .7rem 1.25rem; border: 0; border-radius: 12px; background: var(--mp-deep); color: #fff; font: inherit; font-weight: 650; font-size: 1.02rem; text-decoration: none; cursor: pointer; box-shadow: var(--mp-shadow-sm); transition: transform .2s var(--mp-ease), background-color .2s, box-shadow .2s; }
.mp-btn:hover { background: var(--mp-deep-hover); transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgb(0 108 154 / .6); }
.mp-btn--line { background: var(--mp-paper); color: var(--mp-blue-ink); box-shadow: inset 0 0 0 1.5px currentColor; }
.mp-btn--line:hover { background: var(--mp-blue-pale); box-shadow: inset 0 0 0 1.5px currentColor; }
.mp-btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.mp-link { display: block; width: 100%; margin-top: 1rem; padding: 0; border: 0; background: none; color: var(--mp-blue-ink); font: inherit; font-weight: 600; text-align: center; cursor: pointer; }
.mp-link:hover { text-decoration: underline; }
.mp-hint { margin: .6rem 0 0; color: var(--mp-muted); font-size: .88rem; text-align: center; }
.mp-or { margin: 1rem 0 0; color: var(--mp-muted); font-size: .85rem; font-weight: 600; text-align: center; }
.mp-msg { margin-top: 1.5rem; padding: .85rem 1rem; border-radius: 14px; font-size: .95rem; line-height: 1.45; }
.mp-msg--ok { background: var(--mp-ok-pale); color: var(--mp-ok); }
.mp-msg--bad { background: var(--mp-bad-pale); color: var(--mp-bad); }
.mp-msg button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.mp-msg small { display: block; margin-top: .4rem; opacity: .9; }
.mp-auth__card { margin-top: 2rem; }
@media (max-height: 940px) { .mp-auth__feats { display: none; } }
@media (max-width: 960px) {
  .mp-auth { grid-template-columns: 1fr; padding: 0; }
  .mp-auth__brand { display: none; }
  .mp-auth__top .mp-auth__logo { display: inline-flex; }
}

/* znak (Truchet pločice, isti kao heroj novog wmd.hr) */
svg.mp-mark { display: block; width: 100%; height: auto; overflow: visible; }
svg.mp-mark .cell { transition: transform .55s var(--mp-ease); }
svg.mp-mark.is-still .cell { transition: none !important; }
svg.mp-mark path { fill: var(--mk-q); transition: opacity .3s; }
svg.mp-mark circle { fill: var(--mk-c); transition: opacity .3s; }
svg.mp-mark .cell.is-ink path { fill: var(--mk-q2); }
svg.mp-mark .cell.is-ink circle { fill: var(--mk-c2); }

@media (prefers-reduced-motion: reduce) {
  .mp-btn, .mp-nav a, svg.mp-mark .cell { transition: none; }
}

/* aplikacija WMDApp (iOS/Android web view): zaglavlje ispod statusne trake, kao staro u _head */
.mp-header { padding-top: env(safe-area-inset-top); }

/* ===== 7 prijava prema prijedlogu (wmd 26.10.): kartice na polju, napomena za cPanel, sklopivo slanje podataka, junak podrške ===== */
.mp-auth__feats { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.mp-auth__feats li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem; padding: .8rem 1rem; border-radius: 16px; font-weight: 400; }
.mp-auth__feats li > span:last-child { display: grid; gap: .1rem; }
.mp-auth__feats b { font-size: 1rem; font-weight: 700; }
.mp-auth__feats small { font-size: .88rem; line-height: 1.4; color: rgb(255 255 255 / .82); }
.mp-auth__ic { position: relative; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--mp-field); color: var(--mp-deep); box-shadow: 0 0 0 1px rgb(255 255 255 / .25); }
.mp-auth__ic::before { content: ''; position: absolute; width: 140%; aspect-ratio: 1; right: -70%; bottom: -70%; border-radius: 50%; background: rgb(92 203 238 / .55); }
.mp-auth__ic::after { content: ''; position: absolute; top: 6px; left: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--mp-accent); }
.mp-auth__ic svg { position: relative; width: 1.65rem !important; height: 1.65rem !important; padding: .32rem !important; border-radius: 8px !important; background: #fff; }
.mp-auth__ic--ok { background: linear-gradient(120deg, #17703f, #2f9c63); color: #17703f; }
.mp-auth__ic--ink { background: linear-gradient(120deg, #0b5f87, #1592c8); color: #0b5f87; }
@media (min-width: 1500px) {
  .mp-auth__feats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mp-auth__feats li { grid-template-columns: 1fr; align-items: start; align-content: start; }
}
.mp-field__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.mp-field__link { padding: 0; border: 0; background: none; color: var(--mp-blue-ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.mp-field__link:hover { text-decoration: underline; }
/* obrazac „Prenesite stranicu k nama” (31.10.): skupina izbora s naslovom, izbor kao kartica s obrubom (kao [data-mp="volba"]) */
fieldset.mp-field { min-width: 0; margin-inline: 0; padding: 0; border: 0; }
.mp-field legend { margin-bottom: .4rem; padding: 0; color: var(--mp-ink); font-weight: 650; font-size: .93rem; }
.mp-field textarea.mp-input { min-height: 6rem; resize: vertical; }
.mp-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.mp-field .mp-choice { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .9rem; border: 1.5px solid var(--mp-line-2); border-radius: 12px; background: var(--mp-paper); color: var(--mp-ink); font-weight: 550; font-size: .95rem; cursor: pointer; transition: border-color .2s, background-color .2s; }
.mp-field .mp-choice:hover { border-color: var(--mp-blue); }
.mp-field .mp-choice:has(input:checked) { border-color: var(--mp-deep); background: var(--mp-blue-pale); }
.mp-choice input { margin: 0; accent-color: var(--mp-deep); }
.mp-field__help { margin: 0; color: var(--mp-muted); font-size: .88rem; }
.mp-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; margin-top: 1.25rem; padding: .9rem 1rem; border-radius: 16px; background: var(--mp-blue-pale); color: var(--mp-ink-2); font-size: .93rem; line-height: 1.45; }
.mp-note svg { width: 1.15rem; height: 1.15rem; margin-top: .1rem; color: var(--mp-deep); }
.mp-note p { margin: 0; }
.mp-note button { padding: 0; border: 0; background: none; color: var(--mp-blue-ink); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }
.mp-forgot { margin-top: 1rem; border-radius: 16px; background: var(--mp-surface); }
html.mp:not(.dark) .mp-forgot { background: var(--mp-paper); box-shadow: inset 0 0 0 1px var(--mp-line); }
.mp-forgot summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .85rem 1rem; border-radius: 16px; list-style: none; cursor: pointer; }
.mp-forgot summary::-webkit-details-marker { display: none; }
.mp-forgot summary:hover { background: var(--mp-blue-pale); }
.mp-forgot summary b { display: block; font-size: .98rem; color: var(--mp-ink); }
.mp-forgot summary small { display: block; color: var(--mp-muted); font-size: .88rem; }
.mp-forgot__ic { width: 2.3rem; height: 2.3rem; border-radius: 11px; display: grid; place-items: center; background: var(--mp-blue-pale); color: var(--mp-deep); }
.mp-forgot__ic svg { width: 1.1rem; height: 1.1rem; }
.mp-forgot__chev { width: 1.1rem; height: 1.1rem; color: var(--mp-muted); transition: transform .25s var(--mp-ease); }
.mp-forgot[open] .mp-forgot__chev { transform: rotate(180deg); }
.mp-forgot[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mp-forgot__body { padding: .25rem 1rem 1.15rem; animation: mp-forgot-in .3s var(--mp-ease); }
.mp-forgot__body > p { margin: 0; color: var(--mp-muted); font-size: .93rem; }
.mp-forgot__body .mp-btn { margin-top: 1rem; }
@keyframes mp-forgot-in { from { opacity: 0; transform: translateY(-6px); } }
.mp-or-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .75rem; align-items: end; }
.mp-or-row .mp-or { margin: 0; padding-bottom: .8rem; }
.mp-auth__reg { margin: 1.75rem 0 0; color: var(--mp-muted); font-size: .93rem; line-height: 1.5; }
.mp-auth__reg a { color: var(--mp-blue-ink); font-weight: 650; }
.mp-auth__main { position: relative; }
.mp-junak { position: absolute; right: clamp(.5rem, 2vw, 2.5rem); bottom: 0; width: clamp(9rem, 12vw, 14rem); margin: 0; pointer-events: none; }
.mp-junak video, .mp-junak img { display: block; width: 100%; height: auto; }
.mp-junak video { mix-blend-mode: multiply; }
.mp-junak img { display: none; }
html.dark .mp-junak video { display: none; }
html.dark .mp-junak img { display: block; width: 78%; margin-left: auto; }
@media (max-width: 1279px), (max-height: 760px) { .mp-junak { display: none; } }
@media (max-width: 600px) { .mp-or-row { grid-template-columns: 1fr; } .mp-or-row .mp-or { padding: 0; text-align: left; } }
/* kartice u tri stupca tek na vrlo širokom ekranu; ispod toga redovi, a znak malo manji da sve stane u visinu */
@media (min-width: 1500px) and (max-width: 1799px) {
  .mp-auth__feats { grid-template-columns: 1fr; }
  .mp-auth__feats li { grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: .65rem .9rem; }
}
@media (max-width: 1799px) { .mp-auth__art { width: min(100%, 22rem, 24vh); } .mp-auth__feats li { padding: .65rem .9rem; } }
/* cPanel uz slanje podataka (wmd 26.10.: napomena ide u „Zaboravili ste lozinku?”, ne zasebno) */
.mp-forgot__cpanel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; margin: 0 0 .75rem !important; padding: .7rem .85rem; border-radius: 12px; background: var(--mp-blue-pale); color: var(--mp-ink-2) !important; font-size: .9rem !important; line-height: 1.45; }
.mp-forgot__cpanel svg { width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: var(--mp-deep); }

/* ===== 8 stranice: plava glava (partials/modul-glava) i dva stupca (wmd 26.10.: „poboljšati sve stranice, trenutne informacije”) ===== */
.mp-head { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 3rem; margin: 0 0 clamp(1.25rem, 2vw, 2rem); padding: clamp(1.5rem, 2.6vw, 2.75rem) clamp(1.25rem, 2.6vw, 2.75rem); border-radius: clamp(20px, 2vw, 32px); background: var(--mp-field); color: #fff; }
.mp-head::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgb(255 255 255 / .2) 1.1px, transparent 1.7px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(100deg, transparent 35%, #000 85%); mask: linear-gradient(100deg, transparent 35%, #000 85%); }
.mp-head::after { content: ''; position: absolute; z-index: -1; width: clamp(16rem, 26vw, 30rem); aspect-ratio: 1; right: clamp(-12rem, -8vw, -6rem); bottom: clamp(-15rem, -11vw, -8rem); border-radius: 50%; border: clamp(2.5rem, 4vw, 4.5rem) solid rgb(92 203 238 / .28); }
html.mp main .mp-head h1 { margin: 0; color: #fff; font-size: clamp(2rem, 3.2vw, 3.2rem); font-weight: 760; letter-spacing: -.04em; line-height: 1.02; }
.mp-head p { margin: .7rem 0 0; max-width: 52ch; font-size: clamp(1rem, 1.15vw, 1.2rem); font-weight: 500; color: rgb(255 255 255 / .92); }
.mp-head__back { display: inline-block; margin-bottom: .75rem; color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; opacity: .9; }
.mp-head__back:hover { opacity: 1; text-decoration: underline; }
.mp-head__side { display: grid; gap: .75rem; justify-items: end; }
.mp-head__stats { display: grid; grid-auto-flow: column; gap: .6rem; }
.mp-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.mp-stat { display: block; min-width: 9.5rem; padding: .85rem 1.1rem; border-radius: 16px; background: rgb(255 255 255 / .13); color: #fff; text-decoration: none; transition: transform .2s var(--mp-ease), background-color .2s; }
a.mp-stat:hover { background: rgb(255 255 255 / .2); transform: translateY(-2px); }
.mp-stat span { display: block; font-size: .85rem; font-weight: 600; opacity: .9; }
.mp-stat strong { display: block; margin-top: .15rem; font-size: clamp(1.4rem, 1.8vw, 1.9rem); font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-stat small { display: block; font-size: .8rem; font-weight: 600; opacity: .85; }
.mp-stat--alert { background: var(--mp-paper); color: var(--mp-ink); }
.mp-stat--alert span { color: var(--mp-bad); opacity: 1; }
a.mp-stat--alert:hover { background: var(--mp-paper); }
.mp-head .mp-btn { width: auto; margin: 0; min-height: 2.9rem; }
.mp-head .mp-btn--white { background: #fff; color: var(--mp-deep); }
.mp-head .mp-btn--glass { background: rgb(255 255 255 / .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45); }

.mp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 26rem); gap: clamp(1.25rem, 2vw, 2rem); align-items: start; }
.mp-cols__main > :first-child, .mp-cols__side > :first-child { margin-top: 0; }
.mp-cols__side { display: grid; gap: 1rem; align-content: start; }
.mp-cols__side > * { margin-top: 0; }

/* Računi: kartica za plaćanje obrubljena narančasto (čeka radnju) */
html.mp [data-mp="due"] { --tw-ring-color: transparent; box-shadow: 0 0 0 2px var(--mp-accent), var(--mp-shadow); }

@media (max-width: 1100px) {
  .mp-head { grid-template-columns: 1fr; align-items: start; }
  .mp-head__side { justify-items: start; }
  .mp-cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .mp-head__stats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .mp-stat { min-width: 0; }
}
html.mp [data-mp="due"].rounded-2xl { box-shadow: 0 0 0 2px var(--mp-accent), var(--mp-shadow); }
.mp-cols__side [data-mp="profil"] dl { grid-template-columns: 1fr; }
.mp-cols__side [data-mp="profil"] dd { white-space: normal; overflow-wrap: anywhere; }
/* naslovi odjeljaka na svim stranicama malo veći i čvršći, kao u prijedlogu */
html.mp main h2.text-base { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; }
html.mp main h2.text-lg { font-size: 1.3rem; font-weight: 700; }
/* Bodovi: kartica razina u boji polja s krugom, kao kartica bodova u prijedlogu */
html.mp [data-mp="razina"] { position: relative; isolation: isolate; background: var(--mp-field); box-shadow: var(--mp-shadow); border-radius: 22px; }
html.mp [data-mp="razina"]::after { content: ''; position: absolute; z-index: -1; width: 14rem; aspect-ratio: 1; right: -6rem; top: -6rem; border-radius: 50%; border: 2.4rem solid rgb(92 203 238 / .3); }
html.mp [data-mp="razina"] .text-3xl { font-size: 2.6rem; font-weight: 760; letter-spacing: -.04em; }

html.mp [data-portal-href] { transition: box-shadow .2s, transform .2s var(--mp-ease); }
html.mp [data-portal-href]:hover { transform: translateY(-1px); }
.mp-head__text { min-width: 0; }
/* prijava: oznake polja veće (wmd 26.10.) */
.mp-auth .mp-field label { font-size: 1.05rem; }
.mp-auth .mp-input { min-height: 3.25rem; font-size: 1.02rem; }

/* ===== 9 glava postojećih stranica: blok s data-mp="glava" (natrag, naslov, uvod, gumbi) postaje plavo polje; stari izgled ga ne vidi ===== */
html.mp [data-mp="glava"] { position: relative; overflow: hidden; isolation: isolate; margin: 0 0 clamp(1.25rem, 2vw, 2rem); padding: clamp(1.4rem, 2.4vw, 2.5rem) clamp(1.25rem, 2.6vw, 2.75rem); border-radius: clamp(20px, 2vw, 32px); background: var(--mp-field); color: #fff; }
html.mp [data-mp="glava"]::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgb(255 255 255 / .2) 1.1px, transparent 1.7px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(100deg, transparent 35%, #000 85%); mask: linear-gradient(100deg, transparent 35%, #000 85%); }
html.mp [data-mp="glava"]::after { content: ''; position: absolute; z-index: -1; width: clamp(16rem, 26vw, 30rem); aspect-ratio: 1; right: clamp(-12rem, -8vw, -6rem); bottom: clamp(-15rem, -11vw, -8rem); border-radius: 50%; border: clamp(2.5rem, 4vw, 4.5rem) solid rgb(92 203 238 / .28); pointer-events: none; }
html.mp main [data-mp="glava"] h1 { margin-top: .35rem; color: #fff; font-size: clamp(1.9rem, 3vw, 3rem); font-weight: 760; letter-spacing: -.04em; line-height: 1.05; }
html.mp main [data-mp="glava"] h1 a { color: inherit; }
html.mp [data-mp="glava"] :is(.text-stone-400, .text-stone-500, .text-stone-600, .text-stone-700, .text-stone-800, .text-stone-900, .text-brand),
html.mp.dark [data-mp="glava"] :is(.dark\:text-stone-300, .dark\:text-stone-400, .dark\:text-stone-500, .dark\:text-stone-100, .dark\:text-stone-200) { color: rgb(255 255 255 / .9); }
html.mp [data-mp="glava"] > p, html.mp [data-mp="glava"] p.text-sm { font-size: clamp(.98rem, 1.1vw, 1.12rem); font-weight: 500; }
html.mp [data-mp="glava"] a:not([class*="bg-"]):not(.rounded-full):not(.rounded-xl) { color: #fff; font-weight: 600; }
html.mp [data-mp="glava"] :is(.bg-brand, .bg-stone-900) { background: #fff; color: var(--mp-deep); }
html.mp [data-mp="glava"] :is(.bg-brand, .bg-stone-900):hover { background: var(--mp-blue-pale); color: var(--mp-blue-ink); }
html.mp [data-mp="glava"] :is(.bg-white, .ring-1.ring-stone-200) { background: rgb(255 255 255 / .14); color: #fff; --tw-ring-color: rgb(255 255 255 / .45); }
html.mp [data-mp="glava"] :is(.bg-white, .ring-1.ring-stone-200):hover { background: rgb(255 255 255 / .24); }
html.mp [data-mp="glava"] .bg-stone-100, html.mp.dark [data-mp="glava"] .dark\:bg-stone-800 { background: rgb(255 255 255 / .22); }
html.mp [data-mp="glava"] .rounded-2xl.bg-white { box-shadow: none; }
/* junak podrške u plavoj glavi (prozirna slika, ne video: multiply ne radi na plavom) */
html.mp [data-mp="glava"]:has(.mp-glava-junak) { padding-right: clamp(9rem, 16vw, 15rem); min-height: 11rem; }
.mp-glava-junak { position: absolute; right: clamp(1rem, 4vw, 4rem); bottom: -1.5rem; width: clamp(6rem, 9vw, 9rem); height: auto; pointer-events: none; filter: drop-shadow(0 14px 20px rgb(4 30 50 / .35)); }
@media (max-width: 640px) { .mp-glava-junak { width: 5rem; right: .5rem; } html.mp [data-mp="glava"]:has(.mp-glava-junak) { padding-right: 6rem; } }

/* ===== 10 Izvještaji (stranica-css, --sp-*) i Statistika (stats.css, --st-*): varijable na tokene „Modula”; tamna tema slijedi tokene ===== */
html.mp .sp-root {
  --sp-surface: var(--mp-paper); --sp-line: var(--mp-line); --sp-ink: var(--mp-ink); --sp-muted: var(--mp-muted); --sp-brand: var(--mp-deep);
  --sp-ok: var(--mp-ok); --sp-ok-bg: var(--mp-ok-pale); --sp-warn: var(--mp-warn); --sp-warn-bg: var(--mp-warn-pale); --sp-bad: var(--mp-bad); --sp-bad-bg: var(--mp-bad-pale);
  --sp-none-bg: var(--mp-surface);
  --sp-c1: var(--mp-deep); --sp-c2: var(--mp-accent); --sp-c3: var(--mp-bad-strong); --sp-c4: var(--mp-cyan); --sp-c5: var(--mp-ok-strong); --sp-c6: var(--mp-muted-2); --sp-c7: var(--mp-blue-ink);
}
html.mp.dark .sp-root { --sp-brand: var(--mp-blue-ink); }
html.mp .st-root:not(.st-root--admin) {
  --st-surface: var(--mp-paper); --st-line: var(--mp-line); --st-seg: var(--mp-surface); --st-ink: var(--mp-ink); --st-muted: var(--mp-muted); --st-grid: var(--mp-line);
  --st-up: var(--mp-ok); --st-down: var(--mp-bad); --st-tip: var(--mp-ink); --st-tip-ink: var(--mp-paper);
  --st-c1: var(--mp-deep); --st-c2: var(--mp-accent); --st-c3: var(--mp-cyan); --st-c4: var(--mp-ok-strong); --st-c5: var(--mp-blue-ink); --st-c6: var(--mp-muted-2); --st-c7: var(--mp-bad-strong);
}
/* glava Izvještaja i Statistike u plavom polju: vlastite varijable za bijeli tekst unutar polja */
html.mp [data-mp="glava"].sp-head, html.mp [data-mp="glava"].st-head { --sp-ink: #fff; --sp-muted: rgb(255 255 255 / .85); --sp-brand: #fff; --st-ink: #fff; --st-muted: rgb(255 255 255 / .85); }
html.mp [data-mp="glava"].sp-head .sp-pop, html.mp [data-mp="glava"].st-head .st-pop { --sp-ink: var(--mp-ink); --st-ink: var(--mp-ink); color: var(--mp-ink); }
html.mp [data-mp="glava"].sp-head .sp-link, html.mp [data-mp="glava"].sp-head .sp-domain { color: #fff; }
/* domena ispod naslova Izvještaja veća od poveznica uz nju (wmd 29.10.: „need to make domain bigger”) */
html.mp [data-mp="glava"].sp-head .sp-domain { font-size: 1.25rem; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }
/* junak podrške kao video u bijeloj pločici (bijela pozadina videa ne ide izravno na plavo; wmd 26.10. „stavi video”) */
.mp-glava-junak { margin: 0; top: 50%; bottom: auto; transform: translateY(-50%); width: clamp(7rem, 9vw, 9.5rem); filter: none; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 16px 30px -18px rgb(4 30 50 / .6); }
.mp-glava-junak video { display: block; width: 100%; height: auto; }
html.mp [data-mp="glava"]:has(.mp-glava-junak) { min-height: 0; padding-right: clamp(10rem, 14vw, 13rem); }
html.mp [data-mp="glava"]:has(.mp-glava-junak) { min-height: calc(clamp(7rem, 9vw, 9.5rem) * 1.333 + 2rem); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 640px) { .mp-glava-junak { width: 5.5rem; right: .75rem; } html.mp [data-mp="glava"]:has(.mp-glava-junak) { padding-right: 7rem; min-height: 9.5rem; } }

/* ===== 11 ikone (App\Portal\View\ServiceIcon): pločica u tonu grupe, kao q-ic u prijedlogu ===== */
.mp-ic { display: inline-grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 11px; background: var(--mp-blue-pale); color: var(--mp-deep); }
.mp-ic__svg { width: 1.15rem; height: 1.15rem; }
.mp-ic--ink { background: var(--mp-blue-pale); color: var(--mp-blue-ink); }
.mp-ic--ok { background: var(--mp-ok-pale); color: var(--mp-ok); }
.mp-ic--warn { background: var(--mp-warn-pale); color: var(--mp-warn); }
.mp-ic--bad { background: var(--mp-bad-pale); color: var(--mp-bad); }
.mp-ic--accent { background: #fdeee8; color: var(--mp-accent); }
html.mp.dark .mp-ic--accent { background: #3f1f14; color: #ff9370; }
.mp-ic--muted { background: var(--mp-surface); color: var(--mp-muted-2); }
/* u naslovima odjeljaka pločica malo manja i poravnata s tekstom */
html.mp main h2 .mp-ic { width: 2rem; height: 2rem; border-radius: 10px; }
html.mp main h2 .mp-ic__svg { width: 1.05rem; height: 1.05rem; }

/* naslov s ikonom: pločica uz tekst */
html.mp main h2:has(> .mp-ic) { display: flex; align-items: center; gap: .65rem; }
/* junak bez podloge (wmd 26.10.: „bez bijele podloge bolje”): prozirna animacija Wemda koji maše, stoji na dnu plavog polja */
.mp-glava-junak { top: auto; bottom: 0; transform: none; width: clamp(7rem, 8.5vw, 9rem); border-radius: 0; background: none; overflow: visible; box-shadow: none; filter: drop-shadow(0 12px 18px rgb(4 30 50 / .35)); }
html.mp [data-mp="glava"]:has(.mp-glava-junak) { min-height: calc(clamp(7rem, 8.5vw, 9rem) * 1.23 + .5rem); }
.mp-ic--blue { background: var(--mp-blue-pale); color: var(--mp-deep); }

/* Bodovi, dorada: plaćanje bodovima kao glavni plavi gumb, graf u plavoj „Modula” */
html.mp form[action="/portal/bodovi.php"] button.bg-emerald-600 { background: var(--mp-deep); border-radius: 12px; padding: .55rem 1.1rem; }
html.mp form[action="/portal/bodovi.php"] button.bg-emerald-600:hover { background: var(--mp-deep-hover); }
html.mp .pts-svg { color: var(--mp-deep); }
html.mp.dark .pts-svg { color: var(--mp-blue); }
html.mp .pts-dot { background: var(--mp-deep); box-shadow: 0 0 0 2px var(--mp-paper); }
html.mp .pts-tip { background: var(--mp-ink); color: var(--mp-paper); }

/* glavni gumbi: plavi „Modula” (zelena je samo za stanje), zaobljenje 12 px kao u prijedlogu; „Dopusti” u zaštiti e-pošte ostaje zelen */
html.mp :is(a, button).text-white:is(.bg-emerald-600, .bg-emerald-700):not([value="allow"]) { background: var(--mp-deep); }
html.mp :is(a, button).text-white:is(.bg-emerald-600, .bg-emerald-700):not([value="allow"]):hover { background: var(--mp-deep-hover); }
html.mp :is(a, button).text-white.rounded-full:is(.bg-emerald-600, .bg-emerald-700, .bg-stone-900, .bg-brand) { border-radius: 12px; }
html.mp :is(a, button).text-white:is(.bg-stone-900, .bg-brand, .bg-emerald-600, .bg-emerald-700) { box-shadow: var(--mp-shadow-sm); transition: background-color .2s, transform .2s var(--mp-ease), box-shadow .2s; }
html.mp :is(a, button).text-white:is(.bg-stone-900, .bg-brand, .bg-emerald-600, .bg-emerald-700):hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgb(0 108 154 / .6); }
@media (max-width: 640px) { html.mp [data-mp="glava"] img[src*="thumbnail.php"] { width: 8rem; height: auto; } }

/* CTA preporuke s Wemdom (wmd 26.10.: „bolje ga staviti u ovaj CTA”): polje u boji, junak lijevo od gumba izlazi iznad gornjeg ruba */
html.mp [data-mp="preporuka"] { position: relative; overflow: visible; isolation: isolate; margin-top: 3.5rem; background: var(--mp-field); border-radius: 22px; box-shadow: var(--mp-shadow); }
html.mp [data-mp="preporuka"]::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(circle, rgb(255 255 255 / .18) 1.1px, transparent 1.7px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(100deg, transparent 40%, #000 90%); mask: linear-gradient(100deg, transparent 40%, #000 90%); }
html.mp [data-mp="preporuka"] > div { position: relative; z-index: 1; }
.mp-cta-junak { position: absolute; z-index: 0; right: clamp(13rem, 17vw, 16rem); bottom: 0; width: clamp(6.5rem, 8vw, 8.5rem); height: auto; pointer-events: none; filter: drop-shadow(0 12px 16px rgb(4 30 50 / .35)); }
@media (max-width: 1100px) { .mp-cta-junak { display: none; } html.mp [data-mp="preporuka"] { margin-top: 1.5rem; } }

/* ===== 12 zajedničke komponente u vizualu „Modula” (wmd 26.10.: „prilagodbe prema novom vizualu gdje se može”) ===== */
/* kartice malo zaobljenije, retci popisa reagiraju na prelazak */
html.mp main .rounded-2xl { border-radius: 18px; }
html.mp main .rounded-2xl.bg-white.ring-1:is([x-data], [data-portal-href]) { transition: box-shadow .2s, transform .2s var(--mp-ease); }
html.mp main .rounded-2xl.bg-white.ring-1:is([x-data], [data-portal-href]):hover { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 0 1px 2px rgb(15 47 68 / .06), 0 20px 36px -20px rgb(15 47 68 / .4); }
/* iznosi u retcima računa čvršći */
html.mp main .rounded-2xl.bg-white.ring-1 > .flex > p.font-semibold { font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }

/* oznake stanja (rok, plaćeno, storno, bodovi): pilula s točkom kao u prijedlogu */
html.mp main .rounded-full:is(.text-\[11px\]) { padding: .18rem .6rem; font-size: .76rem; font-weight: 650; line-height: 1.4; }
html.mp main .rounded-full.text-\[11px\]:is(.bg-emerald-100, .bg-rose-100, .bg-amber-100, .bg-sky-100) { display: inline-flex; align-items: center; gap: .35rem; }
html.mp main .rounded-full.text-\[11px\]:is(.bg-emerald-100, .bg-rose-100, .bg-amber-100, .bg-sky-100)::before { content: ''; flex: none; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
html.mp main .bg-sky-100.text-sky-700 { color: var(--mp-blue-ink); }

/* pretraga popisa i obrasci: obrub 1.5 px, 12 px, plavi fokus kao u prijedlogu */
html.mp main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="range"]), select, textarea):is(.border, .rounded-xl, .rounded-lg) {
  border: 1.5px solid var(--mp-line-2); border-radius: 12px; background-color: var(--mp-paper); color: var(--mp-ink); min-height: 2.75rem;
}
html.mp main textarea:is(.border, .rounded-xl, .rounded-lg) { min-height: 6rem; }
html.mp main :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { outline: none; border-color: var(--mp-deep); box-shadow: 0 0 0 4px rgb(21 146 200 / .25); }
html.mp main input[type="search"] { padding-left: 2.4rem; background: var(--mp-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f95a3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .8rem center / 1.05rem; }
html.mp :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--mp-deep); }
html.mp main label.text-xs.font-medium, html.mp main label.text-sm.font-medium { color: var(--mp-ink-2); }

/* prazna stanja: mekana ploha umjesto crtkanog okvira */
html.mp main .border-dashed { border-style: dashed; border-color: var(--mp-line-2); background: var(--mp-surface); color: var(--mp-muted); }

/* tablice: zaglavlje bez velikih slova, mirne linije, redak reagira na prelazak */
html.mp main table thead tr { background: transparent !important; text-transform: none; letter-spacing: 0; font-size: .82rem; }
html.mp main table thead th { color: var(--mp-muted); font-weight: 650; border-bottom: 1px solid var(--mp-line-2); }
html.mp main table tbody tr { transition: background-color .15s; }
html.mp main table tbody tr:hover { background: var(--mp-surface); }
html.mp main table tfoot { background: var(--mp-surface); }

/* „Prikaži sve” i manje poveznice u boji poveznica „Modula” */
html.mp main a.text-brand, html.mp main button.text-brand { color: var(--mp-blue-ink); font-weight: 650; }
/* Plaćanje: iznos u glavi kao velika brojka */
html.mp [data-mp="glava"] > p.flex { margin-top: .5rem; font-size: clamp(1.6rem, 2.2vw, 2.2rem); font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }

/* ===== 13 Izvještaji: tabovi kao segmentirane pilule, ocjena kao prsten koji se napuni (kao u prijedlogu) ===== */
html.mp .sp-tabs { display: flex; width: max-content; max-width: 100%; gap: .25rem; margin-top: 0; padding: .3rem; border-bottom: 0; border-radius: 14px; background: var(--mp-surface); }
html.mp .sp-tabs a { margin: 0; padding: .5rem 1rem; border-bottom: 0; border-radius: 10px; font-size: .95rem; font-weight: 600; color: var(--mp-muted); white-space: nowrap; }
html.mp .sp-tabs a:hover { color: var(--mp-ink); }
html.mp .sp-tabs a[aria-current] { background: var(--mp-paper); color: var(--mp-ink); box-shadow: var(--mp-shadow-sm); }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
html.mp .sp-score { position: relative; width: 5.5rem; height: 5.5rem; color: var(--mp-ink); --sc: var(--mp-deep); background: conic-gradient(var(--sc) calc(var(--p, 0) * 1%), var(--mp-surface-2) 0) !important; animation: mp-ring 1.4s var(--mp-ease) .1s both; }
html.mp .sp-score::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--mp-paper); }
html.mp .sp-score > * { position: relative; }
html.mp .sp-score b { font-size: 1.6rem; font-weight: 760; letter-spacing: -.03em; }
html.mp .sp-score span { color: var(--mp-muted); opacity: 1; }
html.mp .sp-score.sp-sc-ok { --sc: var(--mp-ok-strong); }
html.mp .sp-score.sp-sc-warn { --sc: var(--mp-warn-strong); }
html.mp .sp-score.sp-sc-bad { --sc: var(--mp-bad-strong); }
@keyframes mp-ring { from { --p: 0; } }
@media (prefers-reduced-motion: reduce) { html.mp .sp-score { animation: none; } }
/* Izvještaji, Pregled kao na prijedlogu (wmd 26.10.): ocjena je glavna kartica (velik prsten, natpis, naslov, objašnjenje, „ukratko”),
   pet područja su bijele kartice sa znakom stanja u kutu (problem s obojenim rubom), koraci su kartice s oznakama učinka i truda */
html.mp .sp-scorebox { gap: clamp(1.25rem, 2.6vw, 2.25rem); margin-top: clamp(1rem, 1.6vw, 1.5rem); padding: clamp(1.25rem, 2.2vw, 2rem); border: 1px solid var(--mp-line); border-radius: 22px; background: var(--mp-paper); box-shadow: var(--mp-shadow); }
html.mp .sp-scorebox .sp-score { width: clamp(7rem, 8.5vw, 9.5rem); height: clamp(7rem, 8.5vw, 9.5rem); }
html.mp .sp-scorebox .sp-score::before { inset: clamp(11px, 1vw, 15px); }
html.mp .sp-scorebox .sp-score b { font-size: clamp(2.1rem, 2.8vw, 2.8rem); }
.mp-score-chip { display: inline-block; padding: .2rem .65rem; border-radius: 999px; background: var(--mp-blue-pale); color: var(--mp-deep); font-size: .8rem; font-weight: 650; }
.mp-score-h { margin-top: .55rem; color: var(--mp-ink); font-size: clamp(1.55rem, 2.3vw, 2.3rem); font-weight: 760; letter-spacing: -.035em; line-height: 1.1; }
html.mp .sp-scorebox .sp-score-help { margin-top: .55rem; color: var(--mp-muted); font-size: .95rem; }
.mp-score-sum { margin-top: .3rem; color: var(--mp-ink-2); font-size: .95rem; line-height: 1.5; }
.mp-score-sum b { color: var(--mp-ink); font-weight: 650; }
html.mp .sp-scorebox .sp-btn { display: inline-block; margin-top: 1rem; }
html.mp .sp-lights { gap: clamp(.75rem, 1.2vw, 1.1rem); margin-top: clamp(1rem, 1.6vw, 1.5rem); }
html.mp .sp-light { position: relative; align-content: start; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--mp-line); border-radius: 18px; background: var(--mp-paper); box-shadow: var(--mp-shadow-sm); }
html.mp .sp-light b { padding-right: 2.3rem; color: var(--mp-ink); font-size: .95rem; font-weight: 650; }
html.mp .sp-light b::before { display: none; }
html.mp .sp-light span { color: var(--mp-muted); font-size: .875rem; line-height: 1.45; }
html.mp .sp-light::after { content: '✓'; position: absolute; top: .8rem; right: .8rem; display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: 9px; background: var(--mp-ok-pale); color: var(--mp-ok-strong); font-size: .85rem; font-weight: 800; }
html.mp .sp-light[data-sp-tone="warn"]::after { content: '!'; background: var(--mp-warn-pale); color: var(--mp-warn-strong); }
html.mp .sp-light[data-sp-tone="bad"] { border: 2px solid var(--mp-accent); }
html.mp .sp-light[data-sp-tone="bad"]::after { content: '!'; background: var(--mp-bad-pale); color: var(--mp-bad-strong); }
html.mp .sp-light[data-sp-tone="none"]::after { content: '–'; background: var(--mp-surface); color: var(--mp-muted); }
html.mp .sp-todos { display: grid; gap: .75rem; }
html.mp .sp-todo { padding: 1rem 1.15rem; border: 1px solid var(--mp-line); border-radius: 16px; background: var(--mp-paper); box-shadow: none; }
html.mp .sp-todo--bad { border-color: var(--mp-bad-line); box-shadow: inset 3px 0 0 var(--mp-bad-strong); }
html.mp .sp-todo-main > span:first-child { color: var(--mp-ink); font-size: 1rem; font-weight: 650; }
.mp-todo-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.mp-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: var(--mp-surface); color: var(--mp-ink-2); font-size: .78rem; font-weight: 600; }
.mp-chip::before { content: ''; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.mp-chip--high { background: var(--mp-bad-pale); color: var(--mp-bad-strong); }
.mp-chip--medium { background: var(--mp-warn-pale); color: var(--mp-warn-strong); }
html.mp .sp-card { padding: clamp(1.1rem, 2vw, 1.75rem); border-radius: 22px; }
html.mp .sp-card .sp-title { color: var(--mp-ink); font-size: clamp(1.15rem, 1.45vw, 1.5rem); font-weight: 720; letter-spacing: -.03em; }
html.mp .sp-card .sp-subtitle { color: var(--mp-ink); font-size: 1rem; font-weight: 650; }
/* ===== 14 detalj hostinga kao u prijedlogu: jednostavna glava, red brzih pločica, disk kao prsten (wmd 26.10.: „jednostavnije i uočljivije”) ===== */
html.mp [data-mp="glava"].mp-usl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.mp-usl__main { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.mp-usl__thumb { flex: none; display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 3px rgb(255 255 255 / .25); }
.mp-usl__thumb img, .mp-usl__main > img { display: block; width: 8rem; height: 6rem; object-fit: cover; object-position: top; border-radius: 14px; }
html.mp [data-mp="glava"] .mp-usl__kind { margin: 0; font-size: .95rem; font-weight: 600; color: rgb(255 255 255 / .85); }
html.mp [data-mp="glava"].mp-usl h1 { margin-top: .15rem; }
html.mp [data-mp="glava"] .mp-usl__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .6rem 0 0; font-size: .95rem; font-weight: 500; }
html.mp [data-mp="glava"] .mp-btn { width: auto; margin: 0; min-height: 3rem; }
html.mp [data-mp="glava"] .mp-btn--white { background: #fff; color: var(--mp-deep); }
html.mp [data-mp="glava"] .mp-btn--white:hover { background: var(--mp-blue-pale); color: var(--mp-blue-ink); }
html.mp [data-mp="glava"] .mp-btn--glass { background: rgb(255 255 255 / .14); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45); }
html.mp [data-mp="glava"] .mp-btn--glass:hover { background: rgb(255 255 255 / .24); }
.mp-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.2vw, 1.1rem); margin: 0 0 clamp(1.25rem, 2vw, 2rem); }
.mp-quick form { display: contents; }
.mp-quick__tile { display: flex; align-items: center; gap: .8rem; width: 100%; padding: 1rem 1.1rem; border: 1px solid var(--mp-line); border-radius: 18px; background: var(--mp-paper); color: var(--mp-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; box-shadow: var(--mp-shadow-sm); transition: transform .2s var(--mp-ease), box-shadow .2s, border-color .2s; }
.mp-quick__tile:hover { transform: translateY(-2px); border-color: var(--mp-blue-line); box-shadow: var(--mp-shadow); }
.mp-quick__tile b { font-size: 1rem; font-weight: 650; }
.mp-quick__tile .mp-ic { width: 2.6rem; height: 2.6rem; border-radius: 12px; }
.mp-disk { display: flex; align-items: center; gap: 1.1rem; margin-top: 1rem; }
.mp-disk p { margin: 0; color: var(--mp-muted); font-size: .95rem; font-variant-numeric: tabular-nums; }
.mp-ring { position: relative; flex: none; display: grid; place-items: center; width: 6.5rem; height: 6.5rem; border-radius: 50%; --sc: var(--mp-deep); background: conic-gradient(var(--sc) calc(var(--p, 0) * 1%), var(--mp-surface-2) 0); animation: mp-ring 1.4s var(--mp-ease) .1s both; }
.mp-ring::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--mp-paper); }
.mp-ring b { position: relative; font-size: 1.5rem; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mp-ring--ok { --sc: var(--mp-deep); }
.mp-ring--warn { --sc: var(--mp-warn-strong); }
.mp-ring--bad { --sc: var(--mp-bad-strong); }
@media (prefers-reduced-motion: reduce) { .mp-ring { animation: none; } }
@media (max-width: 960px) { .mp-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mp-usl__thumb img, .mp-usl__main > img { width: 5.5rem; height: 4.1rem; } .mp-quick__tile { padding: .8rem; } .mp-quick__tile b { font-size: .92rem; } }
/* bočni stupac hostinga: odblokiranje i tražilica zaštite e-pošte u stupac, gumb pune širine; brze pločice u jednom tonu */
.mp-cols__side [data-unblock] > div { flex-direction: column; align-items: stretch; }
.mp-cols__side [data-unblock] form button { width: 100%; }
.mp-cols__side [data-mailsec-search] { flex-direction: column; align-items: stretch; }
.mp-cols__side [data-mailsec-search] button { justify-content: center; }
.mp-quick__tile .mp-ic { background: var(--mp-blue-pale) !important; color: var(--mp-deep) !important; }
.mp-cols > * { min-width: 0; }   /* stupac smije biti uži od dugog sadržaja (DNS zapisi), inače mobitel dobije vodoravni pomak */
/* glavni stupac: jednak razmak između svih kartica (dijelovi iz starog rasporeda nemaju vlastiti razmak) */
.mp-cols__main { display: grid; gap: clamp(1.25rem, 1.8vw, 1.75rem); align-content: start; }
.mp-cols__main > * { margin-top: 0 !important; min-width: 0; }
.mp-cols__main > [data-ns] { margin-bottom: 0; padding: .8rem 1rem; font-size: .8125rem; line-height: 1.5; }
/* široko: stupci na istoj mreži od četiri kao red brzih pločica — bočni stupac je širok kao jedna pločica i poravnat s njom
   (wmd 26.10. „proširiti side kolonu”); tek od 1800px je četvrtina šira od 26rem, ispod ostaje minmax(19rem, 26rem) */
html.mp { --mp-gutter: clamp(1rem, 1.4vw, 1.5rem); }
.mp-quick { gap: var(--mp-gutter); }
@media (min-width: 1800px) {
  .mp-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--mp-gutter); }
  .mp-cols__main { grid-column: span 3; }
}
html.mp [data-mp="glava"] .mp-usl__kind a { color: inherit; font-weight: inherit; text-decoration: none; }
html.mp [data-mp="glava"] .mp-usl__kind a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
html.mp [data-mp="glava"] .mp-usl__kind span { margin: 0 .2rem; opacity: .7; }
/* profil u bočnom stupcu: gumb „Uredi profil” ostaje uz ime, a podaci (OIB, e-mail, adresa) idu ispod preko cijele kartice
   — inače im gumb uzme ~100px i e-mail se lomi (wmd 26.10.) */
.mp-cols__side [data-mp="profil"] > div:first-child { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; }
.mp-cols__side [data-mp="profil"] > div:first-child > .min-w-0 { display: contents; }
.mp-cols__side [data-mp="profil"] > div:first-child > .min-w-0 > * { grid-column: 2; }
.mp-cols__side [data-mp="profil"] > div:first-child > .min-w-0 > dl { grid-column: 1 / -1; }
.mp-cols__side [data-mp="profil"] > div:first-child > :last-child { grid-column: 3; grid-row: 1; }
/* Podrška: „Moji tiketi” kao na prijedlogu — prekidač Otvoreni / Riješeni i jednostavni redovi (wmd 26.10.) */
.mp-tickets__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: .4rem; }
.mp-tickets__head h2 { color: var(--mp-ink); font-size: clamp(1.3rem, 1.6vw, 1.6rem); font-weight: 720; letter-spacing: -.03em; }
.mp-tickets__head p { margin-top: .2rem; color: var(--mp-muted); font-size: .9rem; }
.mp-seg { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 14px; background: var(--mp-surface); }
.mp-seg button { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border: 0; border-radius: 10px; background: none; color: var(--mp-muted); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
.mp-seg button:hover { color: var(--mp-ink); }
.mp-seg button[aria-selected="true"] { background: var(--mp-paper); color: var(--mp-ink); box-shadow: var(--mp-shadow-sm); }
.mp-seg button span { color: var(--mp-muted); }
.mp-tk { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem 1rem; padding: 1rem 0; border-top: 1px solid var(--mp-line); color: var(--mp-ink); text-decoration: none; }
.mp-tk b { display: block; overflow: hidden; font-size: 1rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
a.mp-tk:hover b { color: var(--mp-blue-ink); }
.mp-tk small { display: block; overflow: hidden; margin-top: .15rem; color: var(--mp-muted); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.mp-tk__none { padding: 1.25rem 0 .4rem; border-top: 1px solid var(--mp-line); color: var(--mp-muted); font-size: .95rem; text-align: center; }
/* Izvještaji, Pregled u dva stupca (wmd 26.10.): u užem glavnom stupcu pet područja ide 3 + 2 dok im nema mjesta u jednom redu;
   kartice u bočnom stupcu bez vanjskog razmaka (razmak daje stupac) */
@media (min-width: 1101px) and (max-width: 1499px) { html.mp .mp-cols__main .sp-lights { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html.mp .mp-cols__side > .sp-card, html.mp .mp-cols__side > .sp-note, html.mp .mp-cols__side > section { margin-top: 0; }
html.mp .sp-root .mp-cols { margin-top: clamp(1rem, 1.6vw, 1.5rem); }
/* Izvještaji, vrh desnog stupca Pregleda kao na prijedlogu (wmd 26.10.): praćene riječi, „Preporučuje li vas AI?” i Stručni pregled */
.mp-side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.mp-side-head p { margin-top: .2rem; color: var(--mp-muted); font-size: .875rem; }
.mp-side-head a { flex: none; color: var(--mp-blue-ink); font-weight: 650; text-decoration: none; }
.mp-side-head a:hover { text-decoration: underline; }
.mp-kw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.4rem; align-items: center; gap: .75rem; padding: .75rem 0; }
.mp-kw-row + .mp-kw-row { border-top: 1px solid var(--mp-line); }
.mp-kw-word { overflow: hidden; color: var(--mp-ink); text-overflow: ellipsis; white-space: nowrap; }
.mp-kw-change { color: var(--mp-muted); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.mp-kw-up { color: var(--mp-ok-strong); }
.mp-kw-down { color: var(--mp-bad-strong); }
.mp-kw-pos { color: var(--mp-ink); font-size: 1.05rem; font-weight: 750; text-align: right; }
.mp-kw-pos--none { color: var(--mp-muted); font-weight: 600; }
.mp-side-ai { position: relative; overflow: hidden; isolation: isolate; padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: 22px; background: var(--mp-field); color: #fff; box-shadow: var(--mp-shadow); }
.mp-side-ai::after { content: ''; position: absolute; z-index: -1; top: -5rem; right: -5rem; width: 12rem; aspect-ratio: 1; border: 2.2rem solid rgb(92 203 238 / .28); border-radius: 50%; pointer-events: none; }
.mp-side-ai > p:first-child { color: rgb(255 255 255 / .9); font-size: .95rem; }
.mp-side-ai strong { display: block; margin-top: .15rem; font-size: clamp(1.8rem, 2.4vw, 2.3rem); font-weight: 780; letter-spacing: -.03em; line-height: 1.1; }
.mp-side-ai small { display: block; margin-top: .2rem; color: rgb(255 255 255 / .8); font-size: .8rem; }
.mp-side-ai p + p, .mp-side-ai small + p { margin-top: .6rem; font-size: .95rem; line-height: 1.5; }
.mp-side-ai a { display: inline-block; margin-top: 1rem; padding: .55rem 1rem; border-radius: 10px; background: #fff; color: #075f8a; font-size: .9rem; font-weight: 650; text-decoration: none; }
.mp-side-expert { padding: clamp(1.25rem, 2vw, 1.75rem); border-radius: 22px; background: var(--mp-surface); }
.mp-side-expert h3 { color: var(--mp-ink); font-size: 1.15rem; font-weight: 720; }
.mp-side-expert p { margin-top: .35rem; color: var(--mp-muted); font-size: .9rem; line-height: 1.5; }
.mp-side-expert .mp-side-price { margin-top: .9rem; font-size: 1rem; }
.mp-side-price b { color: var(--mp-ink); font-size: 1.35rem; font-weight: 760; }
.mp-side-expert a { display: inline-block; margin-top: .9rem; padding: .5rem .95rem; border: 1.5px solid var(--mp-blue-ink); border-radius: 10px; color: var(--mp-blue-ink); font-size: .9rem; font-weight: 650; text-decoration: none; }
.mp-side-expert a:hover { background: var(--mp-paper); }
html.mp .mp-cols__side .sp-month { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* u bočnom stupcu dvije brojke u redu (5 je preusko) */
/* Statistika (wmd 26.10. „ovo još malo vizualno”): razdoblja kao prekidač u obliku tabova Izvještaja; unutar Izvještaja datum podataka, izvoz i
   razdoblja su jedna bijela ploča, a domena se ne ponavlja (već je u glavi) */
html.mp .st-root:not(.st-root--admin) .st-seg { gap: .25rem; padding: .3rem; border-radius: 14px; }
html.mp .st-root:not(.st-root--admin) .st-chip { padding: .45rem .9rem; border-radius: 10px; font-size: .9rem; font-weight: 600; }
html.mp .st-root:not(.st-root--admin) .st-chip[aria-current] { box-shadow: var(--mp-shadow-sm); }
html.mp .st-root:not(.st-root--admin) .st-btn { border-radius: 10px; font-size: .9rem; font-weight: 600; }
@media (max-width: 640px) { html.mp .st-root:not(.st-root--admin) .st-chip { padding: .4rem .6rem; font-size: .85rem; } html.mp .st-root:not(.st-root--admin) .st-bar .st-seg { flex-wrap: wrap; max-width: 100%; } }
html.mp .sp-root + .st-root > .st-head .st-domain { display: none; }
html.mp .sp-root + .st-root > .st-head .st-sub { margin-top: 0; font-size: .9rem; }
html.mp .sp-root + .st-root > .st-head:has(+ .st-bar) { align-items: center; padding: 1rem 1.25rem .35rem; border: 1px solid var(--mp-line); border-bottom: 0; border-radius: 22px 22px 0 0; background: var(--mp-paper); }
html.mp .sp-root + .st-root > .st-head + .st-bar { margin-top: 0; padding: .75rem 1.25rem 1.1rem; border: 1px solid var(--mp-line); border-top: 0; border-radius: 0 0 22px 22px; background: var(--mp-paper); box-shadow: var(--mp-shadow-sm); }
html.mp .sp-root + .st-root > .st-head + .st-bar + .st-kpis { margin-top: clamp(1rem, 1.4vw, 1.25rem); }
/* Statistika: gumb „Izvoz” u plavoj glavi bio je bijelo na bijelom (--st-ink je u glavi bijel) */
html.mp [data-mp="glava"] .st-btn { --st-ink: var(--mp-ink); background: #fff; color: #075f8a; box-shadow: none; }
html.mp [data-mp="glava"] .st-btn:hover { color: #075f8a; box-shadow: 0 0 0 2px rgb(255 255 255 / .5); }
html.mp .sp-root + .st-root > .st-head { margin-top: clamp(1rem, 1.6vw, 1.5rem); }
/* desni stupac Izvještaja (wmd 26.10. „malo veći”): pitanje AI kartice bez provjere je naslov, Stručni pregled kao ostali naslovi kartica */
.mp-side-ai strong.mp-side-ai__q { margin-top: 0; font-size: clamp(1.4rem, 1.75vw, 1.75rem); letter-spacing: -.03em; }
.mp-side-ai .mp-side-ai__q + p { margin-top: .6rem; font-size: .95rem; line-height: 1.5; }
.mp-side-expert h3 { font-size: clamp(1.15rem, 1.45vw, 1.5rem); letter-spacing: -.03em; }
.mp-side-ai > p:first-child { font-size: 1rem; }
.mp-side-ai p + p, .mp-side-ai small + p, .mp-side-ai .mp-side-ai__q + p { font-size: 1.05rem; line-height: 1.55; }
.mp-side-ai a { padding: .6rem 1.1rem; font-size: .95rem; }
/* detalj hostinga: kopije u bočnom stupcu — tri pločice jedna ispod druge (u redu su preuske: datum se rezao, wmd 26.10.) */
html.mp .mp-cols__side [data-hosting-backups] > .grid { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
html.mp .mp-cols__side [data-hosting-backups] > .grid > div { padding: .8rem 1rem; }
html.mp .mp-cols__side [data-hosting-backups] > .grid .text-2xl { font-size: 1.35rem; line-height: 1.3; }
/* ===== 15 košarica (cart.*, wmd 26.10.: „košarica sutra”): zaglavlje bez izbornika, plava glava s koracima, dva stupca kao mp-cols,
   kartice 22 px, ikone u pločici, sažetak s iznosom bez PDV-a; tok narudžbe, polja i poveznice su isti (kuke data-mp, stari ih ne vidi) ===== */
.mp-cart-back { display: inline-flex; align-items: center; gap: .35rem; height: 2.5rem; padding: 0 .95rem 0 .7rem; border-radius: 999px; background: var(--mp-surface); color: var(--mp-ink); font-size: .95rem; font-weight: 650; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s; }
.mp-cart-back:hover { background: var(--mp-blue-pale); color: var(--mp-blue-ink); }
.mp-cart-back svg { width: 1rem; height: 1rem; flex: none; }
.mp-cart-secure { display: inline-flex; align-items: center; gap: .4rem; color: var(--mp-muted); font-size: .9rem; font-weight: 600; white-space: nowrap; }
.mp-cart-secure svg { width: 1rem; height: 1rem; flex: none; color: var(--mp-ok-strong); }
@media (max-width: 960px) { html.mp body[data-mp-cart] { padding-bottom: 0; } }   /* košarica nema donju traku izbornika */
@media (max-width: 640px) { .mp-cart-back, .mp-cart-secure { display: none; } }

/* plava glava: naslov lijevo, koraci desno; ispod 1100 px koraci iznad naslova */
html.mp [data-mp="glava"]:has(> .mp-steps) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2.5rem; }
html.mp [data-mp="glava"] > .mp-steps { grid-column: 2; grid-row: 1; }
html.mp [data-mp="glava"]:has(> .mp-steps) > .mb-6, html.mp [data-mp="glava"] > h1.mb-6 { margin-bottom: 0; }
html.mp [data-mp="glava"]:has(> .mp-steps) > .mb-6 { grid-column: 1; grid-row: 1; }
@media (max-width: 1100px) {
  html.mp [data-mp="glava"]:has(> .mp-steps) { grid-template-columns: minmax(0, 1fr); }
  html.mp [data-mp="glava"] > .mp-steps { grid-column: 1; }
  html.mp [data-mp="glava"]:has(> .mp-steps) > .mb-6 { grid-row: 2; }
}
.mp-steps ol { display: flex; flex-wrap: wrap; gap: .25rem; width: max-content; max-width: 100%; margin: 0; padding: .3rem; list-style: none; border-radius: 16px; background: rgb(255 255 255 / .12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .2); }
.mp-steps__item { display: flex; align-items: center; gap: .55rem; padding: .4rem 1rem .4rem .4rem; border-radius: 12px; color: rgb(255 255 255 / .8); font-size: .95rem; font-weight: 600; white-space: nowrap; }
.mp-steps__n { display: grid; place-items: center; flex: none; width: 1.85rem; height: 1.85rem; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; font-size: .85rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.mp-steps__n svg { width: 1rem; height: 1rem; }
.mp-steps__item--done { color: #fff; }
.mp-steps__item--done .mp-steps__n { background: #fff; color: var(--mp-deep); }
.mp-steps__item--now { background: var(--mp-paper); color: var(--mp-ink); box-shadow: var(--mp-shadow-sm); }
.mp-steps__item--now .mp-steps__n { background: var(--mp-deep); color: #fff; }
@media (max-width: 640px) {
  .mp-steps__item:not(.mp-steps__item--now) { padding-right: .4rem; }
  .mp-steps__item:not(.mp-steps__item--now) .mp-steps__label { display: none; }
}

/* dva stupca kao mp-cols (glavni i bočni 20–27 rem) od 1024 px, kao dosad; donja traka s ukupnim iznosom ostaje ispod toga */
@media (min-width: 1024px) {
  html.mp [data-mp="cols"] { grid-template-columns: minmax(0, 1fr) minmax(20rem, 27rem); gap: clamp(1.25rem, 2vw, 2rem); }
  html.mp [data-mp="cols"] > * { grid-column: auto; }
}
html.mp body[data-mp-cart] main .rounded-2xl { border-radius: 22px; }
html.mp body[data-mp-cart] main .rounded-2xl.p-5 { padding: clamp(1.15rem, 1.6vw, 1.6rem); }
html.mp body[data-mp-cart] main .rounded-2xl :is(h2.text-sm, h2.uppercase) { margin-bottom: 1rem; color: var(--mp-ink); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; text-transform: none; }
html.mp body[data-mp-cart] main label.text-xs.font-medium { margin-bottom: .35rem; font-size: .9rem; font-weight: 600; }
html.mp body[data-mp-cart] main .rounded-xl.border-amber-200 { border-radius: 14px; }

/* pregled: stavke s ikonom u pločici, naziv i iznos čvršći */
html.mp [data-mp="stavke"] li > .mp-ic { margin-top: .1rem; }
html.mp [data-mp="stavke"] li p.text-sm.font-medium { color: var(--mp-ink); font-size: 1rem; font-weight: 650; }
html.mp [data-mp="stavke"] li span.text-sm.font-semibold { color: var(--mp-ink); font-size: 1.05rem; font-weight: 720; }
html.mp [data-mp="stavke"] li select { min-height: 2.25rem; padding-block: .25rem; }
/* sažetak: glavni iznos bez PDV-a uz „+ PDV”, s PDV-om sitno (wmd 25.10.) */
.mp-cart-sum { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--mp-line); }
.mp-cart-sum__label { color: var(--mp-muted); font-size: .9rem; font-weight: 600; }
.mp-cart-sum__big { margin-top: .1rem; color: var(--mp-ink); font-size: clamp(1.8rem, 2.2vw, 2.25rem); font-weight: 760; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mp-cart-sum__big span { color: var(--mp-muted); font-size: .5em; font-weight: 650; letter-spacing: 0; }
.mp-cart-sum__small { margin-top: .25rem; color: var(--mp-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.mp-cart-sum--bar { margin: 0; padding: 0; border: 0; line-height: 1.15; }
.mp-cart-sum--bar .mp-cart-sum__big { margin: 0; font-size: 1.35rem; white-space: nowrap; }
.mp-cart-sum--bar .mp-cart-sum__small { margin-top: .1rem; font-size: .75rem; white-space: nowrap; }
html.mp [data-mp="sazetak"] dl { font-size: .95rem; }
html.mp [data-mp="sazetak"] button[name="nastavi"] { min-height: 3.3rem; font-size: 1.02rem; }

/* podaci kupca: vrsta kupca kao prekidač (kao .mp-seg) */
html.mp [data-mp="vrsta"] { padding: .3rem; border-radius: 14px; background: var(--mp-surface); }
html.mp [data-mp="vrsta"] button { padding: .55rem .9rem; border-radius: 10px; color: var(--mp-muted); font-size: .95rem; font-weight: 600; }
html.mp [data-mp="vrsta"] button.bg-white { background: var(--mp-paper); color: var(--mp-ink); box-shadow: var(--mp-shadow-sm); --tw-ring-color: transparent; }

/* domena: izbor kao kartice s obrubom, odabrana u plavom tonu */
html.mp [data-mp="volba"] { padding: .9rem 1rem; border: 1.5px solid var(--mp-line-2); border-radius: 14px; transition: border-color .2s, background-color .2s; }
html.mp [data-mp="volba"]:hover { border-color: var(--mp-blue); }
html.mp [data-mp="volba"]:has(input:checked) { border-color: var(--mp-deep); background: var(--mp-blue-pale); --tw-ring-color: transparent; }
html.mp [data-mp="volba"] .text-sm.font-medium { color: var(--mp-ink); font-size: .98rem; font-weight: 650; }
html.mp [data-domain-results] { border-radius: 14px; }
@media (max-width: 640px) { html.mp body[data-mp-cart] span:has(+ input[name="domain1"]) { display: none; } }   /* uski ekran: naziv domene dobiva mjesto „www.” */
html.mp [data-ssl-pick] { padding: .45rem .9rem; font-size: .9rem; font-weight: 600; }
/* bočni stupac: „Naručujete kao” obrubljeno plavo, sažetak s ikonama usluga */
html.mp [data-orders-as].rounded-2xl.bg-white { --tw-ring-color: transparent; box-shadow: 0 0 0 2px var(--mp-deep), var(--mp-shadow); }
html.mp [data-orders-as] .bg-brand\/5 { border-radius: 10px; background: var(--mp-blue-pale); color: var(--mp-ink-2); }
html.mp [data-order-summary] dt:has(> .mp-ic) { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 2.25rem; padding-left: 3rem; }
html.mp [data-order-summary] dt > .mp-ic { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
html.mp [data-order-summary] dd { align-self: center; color: var(--mp-ink); font-weight: 700; }
/* prijenos domene i uvjeti: jedan stupac, nešto širi; upozorenje uz naziv domene ostaje jantarno */
html.mp main > .max-w-2xl:has(> [data-mp="glava"]) { max-width: 52rem; }
html.mp main [data-mp="prijenos"] label.text-amber-700 { color: var(--mp-warn); }   /* jače od html.mp main label.text-sm.font-medium */
html.mp [data-mp="prijenos"] form > div:first-of-type { margin-top: 0; }

/* Računi: kartica „Čeka uplatu” kao u prijedlogu (wmd 27.10.) — znak, broj i usluga, iznos s PDV-om desno, ispod gumbi i barkod.
   Obrub je od html.mp [data-mp="due"]; bodovima se ovdje ne plaća (samo na stranici bodova). */
.mp-due-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1rem; }
.mp-due-title h2 { margin: 0; color: var(--mp-ink); font-size: clamp(1.45rem, 1.8vw, 1.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -.028em; }
.mp-due-title > p { margin: 0; color: var(--mp-muted); font-size: .97rem; }
.mp-due-title__side { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.mp-due-title__side a { color: var(--mp-blue-ink); font-size: .92rem; font-weight: 600; text-decoration: none; }
.mp-due-title__side a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mp-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px; background: var(--mp-surface); color: var(--mp-ink-2); font-size: .85rem; font-weight: 650; white-space: nowrap; }
.mp-pill--due { background: var(--mp-bad-pale); color: var(--mp-bad); }
.mp-pill--due::before { content: ''; width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; }
.mp-due { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem 1.5rem; align-items: center; padding: clamp(1.15rem, 1.6vw, 1.75rem); border-radius: 22px; background: var(--mp-paper); }
.mp-due__ok { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .75rem 1rem; border-radius: 14px; background: var(--mp-ok-pale); color: var(--mp-ok); font-size: .95rem; font-weight: 600; }
.mp-due__ok svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .1rem; }
.mp-due__mark { position: relative; display: grid; place-items: center; flex: none; width: 3.25rem; height: 3.25rem; overflow: hidden; border-radius: 14px; background: var(--mp-field); color: var(--mp-deep); }
.mp-due__mark::before { content: ''; position: absolute; width: 140%; aspect-ratio: 1; right: -70%; bottom: -70%; border-radius: 50%; background: rgb(92 203 238 / .55); }
.mp-due__mark::after { content: ''; position: absolute; top: 7px; left: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--mp-accent); }
.mp-due__mark i { position: relative; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 9px; background: #fff; }
.mp-due__svg { width: 1.1rem; height: 1.1rem; }
.mp-due__what { min-width: 0; }
.mp-due__no { margin: 0; color: var(--mp-muted); font-size: .9rem; font-weight: 600; }
.mp-due__what h3 { margin: .2rem 0 0; color: var(--mp-ink); font-size: 1.2rem; font-weight: 700; line-height: 1.2; letter-spacing: -.016em; }
.mp-due__items { display: -webkit-box; margin: .5rem 0 0; overflow: hidden; color: var(--mp-muted); font-size: .97rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mp-due__sum { text-align: right; }
.mp-due__sum strong { display: block; color: var(--mp-ink); font-size: clamp(1.8rem, 2.3vw, 2.4rem); font-weight: 760; line-height: 1.05; letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-due__sum small { display: block; margin-top: .3rem; color: var(--mp-muted); font-size: .9rem; font-variant-numeric: tabular-nums; }
.mp-due__pay { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: center; padding-top: 1.25rem; border-top: 1px solid var(--mp-line); }
.mp-due__btns { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.mp-due__btns .mp-btn { width: auto; min-height: 3rem; margin: 0; white-space: nowrap; }
.mp-btn--ghost { background: none; color: var(--mp-blue-ink); box-shadow: none; padding-inline: .6rem; }
.mp-btn--ghost:hover { background: var(--mp-surface); box-shadow: none; }
.mp-due__barcode { display: flex; align-items: center; gap: 1rem; padding: .7rem .9rem; border-radius: 16px; background: var(--mp-surface); }
.mp-due__barcode > button { flex: none; padding: 6px; border: 0; border-radius: 8px; background: #fff; cursor: zoom-in; }
.mp-due__barcode > button img { display: block; width: 9.5rem; height: auto; }
.mp-due__barcode > p { max-width: 22ch; margin: 0; color: var(--mp-muted); font-size: .9rem; line-height: 1.4; }
@media (max-width: 640px) {
  .mp-due { grid-template-columns: auto minmax(0, 1fr); }
  .mp-due__sum { grid-column: 1 / -1; text-align: left; }
  .mp-due__pay { grid-template-columns: 1fr; }
  .mp-due__btns .mp-btn:not(.mp-btn--ghost) { flex: 1; }
  .mp-due__barcode { flex-direction: column; align-items: flex-start; }
  .mp-due__barcode > button img { width: 14rem; max-width: 100%; }
  .mp-due__barcode > p { max-width: none; }
}

/* Bodovi kao u prijedlogu (wmd 27.10.): razina preko cijele širine, plaćanje bodovima s ostatkom, usluge s kvačicama, kartice s
   naslovom, povijest s jednim stupcem bodova i stanjem; desno preporuka, zbroj po vrsti i kako do još bodova */
.mp-stack { display: grid; gap: clamp(1rem, 1.6vw, 1.75rem); align-content: start; }
.mp-stack > * { margin-top: 0; }
.mp-card { padding: clamp(1.15rem, 1.6vw, 1.75rem); border: 1px solid var(--mp-line); border-radius: 22px; background: var(--mp-paper); box-shadow: var(--mp-shadow); }
.mp-card--flat { border-color: transparent; background: var(--mp-surface-2); box-shadow: none; }
.mp-card > h3 { margin: 0; color: var(--mp-ink); font-size: 1.2rem; font-weight: 700; letter-spacing: -.016em; }
.mp-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.mp-card__head h2 { margin: 0; color: var(--mp-ink); font-size: clamp(1.45rem, 1.8vw, 1.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -.028em; }
.mp-card__head p { margin: .2rem 0 0; color: var(--mp-muted); font-size: .95rem; }
.mp-card__empty { margin: 0; color: var(--mp-muted); }
.mp-card > input[type="search"] { display: block; margin: 0 0 1rem; }
.mp-pill--info { background: var(--mp-blue-pale); color: var(--mp-blue-ink); }
.mp-pill--ok { background: var(--mp-ok-pale); color: var(--mp-ok); }
.mp-bar { height: .45rem; overflow: hidden; border-radius: 999px; background: var(--mp-surface); }
.mp-bar i { display: block; height: 100%; border-radius: inherit; background: var(--mp-deep); }
.mp-bar--lvl { height: .6rem; margin: .2rem 0; background: var(--mp-paper); }
.mp-bar--lvl i { background: linear-gradient(90deg, var(--mp-deep), var(--mp-blue)); }

.mp-level { margin-bottom: clamp(1rem, 1.6vw, 1.75rem); padding: clamp(1.15rem, 1.6vw, 1.75rem); border: 1px solid var(--mp-line); border-radius: 22px; background: var(--mp-paper); box-shadow: var(--mp-shadow); }
.mp-level__top { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(16rem, 24rem); gap: 1.25rem clamp(1.25rem, 3vw, 3rem); align-items: center; }
.mp-level__mark { display: grid; grid-template-columns: repeat(3, 2.75rem); gap: .3rem; padding: .55rem; border-radius: 18px; background: var(--mp-field); }
.mp-level__mark i { position: relative; width: 2.75rem; height: 2.75rem; overflow: hidden; border-radius: 9px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }
.mp-level__mark i::before { content: ''; position: absolute; inset: 0; border-top-left-radius: 100%; background: rgb(255 255 255 / .3); transform: rotate(var(--r)); }
.mp-level__mark i.is-on { background: #fff; box-shadow: none; }
.mp-level__mark i.is-on::before { background: var(--mp-deep); }
.mp-level__mark i.is-cur::before { background: var(--mp-accent); }
.mp-level__now h2 { margin: .5rem 0 0; color: var(--mp-ink); font-size: clamp(1.8rem, 2.6vw, 2.6rem); font-weight: 760; line-height: 1.08; letter-spacing: -.04em; }
.mp-level__now p { max-width: 54ch; margin: .45rem 0 0; color: var(--mp-muted); }
.mp-level__next { display: grid; gap: .35rem; padding: 1rem 1.15rem; border-radius: 16px; background: var(--mp-surface); }
.mp-level__next > span { color: var(--mp-muted); font-size: .95rem; }
.mp-level__next > span b { color: var(--mp-ink); }
.mp-level__next strong { color: var(--mp-ink); font-size: 2rem; font-weight: 760; line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.mp-level__next strong small { color: var(--mp-muted); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.mp-level__next > small { color: var(--mp-muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.mp-ladder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 1.75rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--mp-line); list-style: none; }
.mp-ladder li { position: relative; display: grid; gap: .1rem; align-content: start; padding: 2.1rem .5rem 0 0; }
.mp-ladder li:not(:last-child)::before { content: ''; position: absolute; top: .6rem; left: .75rem; right: -.75rem; height: .3rem; border-radius: 999px; background: var(--mp-surface); }
.mp-ladder__fill { position: absolute; top: .6rem; left: .75rem; width: var(--f, 0%); height: .3rem; border-radius: 999px; background: var(--mp-deep); }
.mp-ladder__dot { position: absolute; z-index: 1; top: 0; left: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--mp-paper); box-shadow: inset 0 0 0 2px var(--mp-line-2); }
.mp-ladder li.is-on .mp-ladder__dot { background: var(--mp-deep); box-shadow: none; }
.mp-ladder li.is-cur .mp-ladder__dot { background: var(--mp-accent); box-shadow: 0 0 0 5px rgb(240 90 40 / .18); }
.mp-ladder li.is-cur .mp-ladder__dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--mp-accent); animation: mp-lvl-pulse 2.2s cubic-bezier(.25, .6, .4, 1) infinite; }
@keyframes mp-lvl-pulse { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(2.3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mp-ladder li.is-cur .mp-ladder__dot::after { animation: none; } }
.mp-ladder b { color: var(--mp-ink); font-size: .98rem; line-height: 1.25; }
.mp-ladder li:not(.is-on) b { color: var(--mp-muted); font-weight: 600; }
.mp-ladder small { color: var(--mp-muted); font-size: .86rem; font-variant-numeric: tabular-nums; }

.mp-ptspay { padding: clamp(1.15rem, 1.6vw, 1.75rem); border-radius: 22px; background: var(--mp-paper); }
.mp-ptspay__item + .mp-ptspay__item { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--mp-line); }
.mp-ptspay__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 1rem 1.5rem; align-items: center; }
.mp-ptspay__row .mp-due__sum small { margin-top: .15rem; }
.mp-ptspay__act { display: flex; align-items: center; gap: .4rem; }
.mp-ptspay__act form { margin: 0; }
.mp-ptspay__act .mp-btn { width: auto; min-height: 3rem; margin: 0; white-space: nowrap; }
.mp-ptspay__act .mp-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.mp-ptspay__after { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--mp-line); color: var(--mp-muted); font-size: .95rem; }
.mp-ptspay__after b { color: var(--mp-ink); font-variant-numeric: tabular-nums; }

.mp-renew { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mp-renew li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-radius: 16px; background: var(--mp-surface); }
.mp-renew__item { display: flex; align-items: center; gap: .9rem; min-width: 0; cursor: pointer; }
.mp-renew__item b { display: block; overflow-wrap: break-word; color: var(--mp-ink); font-weight: 650; }
.mp-renew__item small { display: block; color: var(--mp-muted); font-size: .9rem; font-weight: 500; }
.mp-renew__item input { position: absolute; opacity: 0; }
.mp-renew__box { display: grid; place-items: center; flex: none; width: 1.4rem; height: 1.4rem; border: 1.5px solid var(--mp-line-2); border-radius: 7px; background: var(--mp-paper); }
.mp-renew__box.is-off { opacity: .4; }
.mp-renew__item input:checked + .mp-renew__box { border-color: var(--mp-deep); background: var(--mp-deep); }
.mp-renew__item input:checked + .mp-renew__box::after { content: ''; width: .45rem; height: .75rem; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-2px) rotate(45deg); }
.mp-renew__item input:focus-visible + .mp-renew__box { outline: 3px solid var(--mp-accent); outline-offset: 2px; }
.mp-renew__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.mp-renew__foot p { flex: 1 1 18rem; margin: 0; color: var(--mp-muted); font-size: .93rem; }
.mp-renew__foot .mp-btn { width: auto; min-height: 3rem; margin: 0; }
.mp-renew__foot .mp-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.mp-table-wrap { overflow-x: auto; }
.mp-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.mp-table th { padding: 0 .75rem .6rem; border-bottom: 1px solid var(--mp-line-2); color: var(--mp-muted); font-size: .85rem; font-weight: 650; text-align: left; white-space: nowrap; }
.mp-table td { padding: .85rem .75rem; border-bottom: 1px solid var(--mp-line); color: var(--mp-ink); vertical-align: middle; }
.mp-table tr:last-child td { border-bottom: 0; }
.mp-table tbody tr:hover { background: var(--mp-surface); }
.mp-table td:first-child, .mp-table th:first-child { padding-left: 0; }
.mp-table td:last-child, .mp-table th:last-child { padding-right: 0; }
.mp-table .mp-pill { margin-left: .35rem; font-size: .78rem; }
.mp-table .mp-r { text-align: right; }
.mp-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-table td.mp-pts-up { color: var(--mp-ok); font-weight: 700; }
.mp-table td.mp-pts-down { color: var(--mp-bad); font-weight: 700; }

.mp-refcard { position: relative; overflow: hidden; isolation: isolate; padding: clamp(1.15rem, 1.6vw, 1.75rem); border-radius: 22px; background: var(--mp-field); color: #fff; box-shadow: var(--mp-shadow); }
.mp-refcard::after { content: ''; position: absolute; z-index: -1; width: 14rem; aspect-ratio: 1; right: -6rem; top: -6rem; border-radius: 50%; border: 2.4rem solid rgb(92 203 238 / .3); }
.mp-refcard > p { margin: .6rem 0 0; color: rgb(255 255 255 / .9); }
.mp-refcard > p:first-child { margin: 0; }
.mp-refcard > strong { display: block; margin-top: .4rem; font-size: 2rem; font-weight: 760; line-height: 1.05; letter-spacing: -.04em; }
.mp-reflink { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding: .5rem .5rem .5rem .9rem; border-radius: 12px; background: rgb(255 255 255 / .16); font-weight: 650; }
.mp-reflink span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-reflink button { flex: none; padding: .25rem .55rem; border: 0; border-radius: 8px; background: #fff; color: #0b5f87; font: inherit; font-size: .82rem; font-weight: 650; cursor: pointer; }
.mp-refcard .mp-btn--white { width: auto; min-height: 2.6rem; margin-top: .9rem; padding: .5rem 1rem; background: #fff; color: var(--mp-deep); font-size: .95rem; }
.mp-refcard .mp-btn--white:hover { background: var(--mp-blue-pale); color: var(--mp-blue-ink); }
.mp-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; margin: .6rem 0 0; }
.mp-kv dt, .mp-kv dd { margin: 0; padding: .75rem 0; border-bottom: 1px solid var(--mp-line); }
.mp-kv dt { color: var(--mp-muted); font-size: .95rem; }
.mp-kv dd { color: var(--mp-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.mp-kv > :nth-last-child(-n+2) { border-bottom: 0; }
.mp-ways { display: grid; gap: .5rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.mp-ways a, .mp-ways__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .85rem 1rem; border-radius: 16px; background: var(--mp-paper); color: var(--mp-ink); text-decoration: none; }
.mp-ways a:hover { background: var(--mp-blue-pale); }
.mp-ways b { display: block; }
.mp-ways small { color: var(--mp-muted); }
.mp-ways__ic { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--mp-blue-pale); color: var(--mp-deep); font-weight: 800; }

@media (max-width: 960px) {
  .mp-level__top { grid-template-columns: auto minmax(0, 1fr); }
  .mp-level__next { grid-column: 1 / -1; }
  .mp-ladder { grid-template-columns: 1fr; gap: 0; }
  .mp-ladder li { min-height: 2.6rem; padding: 0 0 1.15rem 2.4rem; }
  .mp-ladder li:not(:last-child)::before { top: .75rem; bottom: -.75rem; left: .6rem; right: auto; width: .3rem; height: auto; }
  .mp-ladder__fill { top: .75rem; left: .6rem; width: .3rem; height: var(--f, 0%); }
}
@media (max-width: 640px) {
  .mp-level__top { grid-template-columns: 1fr; }
  .mp-level__mark { justify-self: start; grid-template-columns: repeat(3, 2.1rem); }
  .mp-level__mark i { width: 2.1rem; height: 2.1rem; }
  .mp-ptspay__row { grid-template-columns: auto minmax(0, 1fr); }
  .mp-ptspay__row .mp-due__sum { grid-column: 1 / -1; text-align: left; }
  .mp-ptspay__act { grid-column: 1 / -1; }
  .mp-ptspay__act form { flex: 1; }
  .mp-ptspay__act .mp-btn:not(.mp-btn--ghost) { width: 100%; }
  .mp-hide-sm { display: none; }
  .mp-ptspay__after { grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; }
  .mp-ptspay__after .mp-bar { grid-column: 1 / -1; grid-row: 2; }
  .mp-renew li { flex-wrap: wrap; gap: .4rem 1rem; }
  .mp-renew li > :last-child { margin-left: 2.3rem; }
}
html.mp [data-pts-axis] { margin-top: .5rem; color: var(--mp-muted); font-size: .82rem; }

/* Partner program (wmd 27.10.): poveznica u plavom polju s dijeljenjem, tri koraka, TOP 10 i poslano prijateljima u bočnom stupcu,
   bon i materijali preko cijele širine; isti jezik kartica kao Bodovi */
.mp-refhero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(1.25rem, 2.2vw, 2.25rem); border-radius: 22px; background: var(--mp-field); color: #fff; box-shadow: var(--mp-shadow); }
.mp-refhero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, rgb(255 255 255 / .18) 1.1px, transparent 1.7px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(100deg, transparent 40%, #000 90%); mask: linear-gradient(100deg, transparent 40%, #000 90%); }
.mp-refhero::after { content: ''; position: absolute; z-index: -1; width: 18rem; aspect-ratio: 1; right: -7rem; top: -8rem; border-radius: 50%; border: 3rem solid rgb(92 203 238 / .28); }
.mp-refhero > p { max-width: 60ch; margin: .6rem 0 0; color: rgb(255 255 255 / .9); }
.mp-refhero > p:first-child { margin: 0; font-weight: 600; }
.mp-refhero h2 { margin: .35rem 0 0; color: #fff; font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 760; line-height: 1.05; letter-spacing: -.04em; }
.mp-reflink--lg { max-width: 34rem; margin-top: 1.25rem; padding: .6rem .6rem .6rem 1rem; font-size: 1.05rem; }
.mp-reflink--lg button { padding: .45rem .85rem; font-size: .9rem; }
.mp-refhero__share { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.mp-refhero__share .mp-btn { width: auto; min-height: 2.75rem; margin: 0 .35rem 0 0; padding: .55rem 1.1rem; background: #fff; color: var(--mp-deep); font-size: .95rem; }
.mp-refhero__share .mp-btn:hover { background: var(--mp-blue-pale); color: var(--mp-blue-ink); }
.mp-refhero__social { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .35); color: #fff; transition: background-color .2s; }
.mp-refhero__social:hover { background: rgb(255 255 255 / .26); }
.mp-refhero__social svg { width: 1.05rem; height: 1.05rem; }
/* Wemdo koji maše i udica besplatnog hostinga u banneru Partnera (wmd 27.10.) */
.mp-refhero--junak { padding-right: clamp(1.25rem, 2.2vw, 2.25rem); }
.mp-refhero__junak { position: absolute; z-index: -1; right: clamp(1rem, 4vw, 3.5rem); bottom: 0; width: clamp(8rem, 13vw, 11.5rem); height: auto; pointer-events: none; filter: drop-shadow(0 14px 18px rgb(4 30 50 / .35)); }
.mp-refhero__badge { display: inline-flex; align-items: center; gap: .4rem; margin: .7rem 0 0 !important; padding: .3rem .8rem; border-radius: 999px; background: #ffd34d; color: #3b2a00 !important; font-size: .9rem; font-weight: 750; }
.mp-refhero__badge::before { content: '★'; }
@media (min-width: 1101px) { .mp-refhero--junak > :not(.mp-refhero__junak) { max-width: calc(100% - 12rem); } }
@media (max-width: 1100px) { .mp-refhero__junak { display: none; } }
@media (prefers-reduced-motion: reduce) { .mp-refhero__junak { content: url('/portal/assets/brand/wemdo-pocetna.png'); } }
/* prazno „Poslano prijateljima” i „tko što dobiva” uz bon */
.mp-friends-empty { display: grid; gap: .45rem; margin-top: .6rem; padding: 1rem; border-radius: 14px; background: var(--mp-blue-pale); }
.mp-friends-empty b { color: var(--mp-ink); }
.mp-friends-empty p { margin: 0; color: var(--mp-ink-2); font-size: .9rem; }
.mp-friends-empty .mp-btn { justify-self: start; width: auto; margin: .2rem 0 0; padding: .5rem 1rem; }
.mp-gets { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.mp-gets > div { display: grid; gap: .15rem; padding: .85rem 1rem; border-radius: 14px; background: var(--mp-paper); box-shadow: var(--mp-shadow-sm); }
.mp-gets span { color: var(--mp-muted); font-size: .8rem; font-weight: 650; }
.mp-gets b { color: var(--mp-ink); font-size: 1.02rem; }
.mp-gets .is-you { background: var(--mp-field); }
.mp-gets .is-you span { color: rgb(255 255 255 / .8); }
.mp-gets .is-you b { color: #fff; }
.mp-steps3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.mp-steps3 li { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.1rem; border-radius: 16px; background: var(--mp-surface); }
.mp-steps3 li.is-win { background: var(--mp-ok-pale); }
.mp-steps3__n { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .35rem; border-radius: 50%; background: var(--mp-deep); color: #fff; font-weight: 750; }
.mp-steps3 li.is-win .mp-steps3__n { background: var(--mp-ok-strong); }
.mp-steps3 b { color: var(--mp-ink); font-size: 1rem; }
.mp-steps3 small { color: var(--mp-muted); font-size: .9rem; line-height: 1.4; }
.mp-steps3__foot { margin: 1rem 0 0; }
.mp-steps3__foot .mp-pill { white-space: normal; }
.mp-card__sub { margin: .3rem 0 0; color: var(--mp-muted); font-size: .9rem; }
.mp-card__link { display: inline-block; margin-top: .9rem; color: var(--mp-blue-ink); font-size: .92rem; font-weight: 650; text-decoration: none; }
.mp-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mp-card__count { margin-left: .35rem; color: var(--mp-muted); font-size: .95rem; font-weight: 600; }
.mp-top { display: grid; gap: .15rem; margin: .9rem 0 0; padding: 0; list-style: none; }
.mp-top li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .55rem .6rem; border-radius: 12px; }
.mp-top li.is-me { background: var(--mp-blue-pale); }
.mp-top__rank { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mp-surface); color: var(--mp-muted); font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mp-top li.is-podium .mp-top__rank { background: var(--mp-field); color: #fff; }
.mp-top li:first-child .mp-top__rank { background: var(--mp-accent); }
.mp-top__name { min-width: 0; overflow: hidden; color: var(--mp-ink); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.mp-top__name small, .mp-top__pts small { display: block; color: var(--mp-muted); font-size: .8rem; font-weight: 500; }
.mp-top__pts { color: var(--mp-ink); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.mp-friends { display: grid; margin: .6rem 0 0; padding: 0; list-style: none; }
.mp-friends li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--mp-line); }
.mp-friends li:last-child { border-bottom: 0; }
.mp-friends li > span:first-child { min-width: 0; overflow-wrap: anywhere; color: var(--mp-ink); font-weight: 600; }
.mp-friends small { display: block; color: var(--mp-muted); font-size: .82rem; font-weight: 500; }
.mp-wide { margin-top: clamp(1.5rem, 2.5vw, 2.5rem); }
.mp-wide > h2:first-child { margin-top: 0; }
@media (max-width: 760px) {
  .mp-steps3 { grid-template-columns: 1fr; }
}
html.mp main .mp-wide > h2.text-base { color: var(--mp-ink); font-size: clamp(1.45rem, 1.8vw, 1.9rem); font-weight: 700; line-height: 1.08; letter-spacing: -.028em; }
@media (max-width: 640px) {
  .mp-reflink--lg { flex-wrap: wrap; padding: .6rem; }
  .mp-reflink--lg span { flex: 1 1 100%; padding: .2rem .35rem; }
  .mp-reflink--lg button { width: 100%; padding: .6rem; }
}

/* Računi, donji dio (wmd 27.10.): ostali za platiti, ponude i plaćeni kao kartice s redcima (racuni.mp-redak), usluge kao na Bodovima */
.mp-pill--warn { background: var(--mp-warn-pale); color: var(--mp-warn); }
.mp-pill--bad { background: var(--mp-bad-pale); color: var(--mp-bad); }
.mp-select { min-height: 2.5rem; padding: .35rem .8rem; border: 1.5px solid var(--mp-line-2); border-radius: 10px; background: var(--mp-paper); color: var(--mp-ink); font: inherit; font-weight: 600; cursor: pointer; }
.mp-doclist { margin: 0; padding: 0; list-style: none; }
.mp-doc { padding: .95rem 0; border-top: 1px solid var(--mp-line); }
.mp-doc:first-child { padding-top: 0; border-top: 0; }
.mp-doc:last-child { padding-bottom: 0; }
.mp-doc__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .5rem 1.25rem; align-items: center; }
.mp-doc__what { min-width: 0; }
.mp-doc__title { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: 0; color: var(--mp-ink); font-weight: 650; }
.mp-doc__title > span:first-child, .mp-doc__toggle > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-doc__title > span:first-child { max-width: 100%; }
.mp-doc__toggle { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mp-doc__toggle svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--mp-muted); transition: transform .2s; }
.mp-doc__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mp-doc__n { flex: none; padding: .05rem .45rem; border-radius: 999px; background: var(--mp-surface); color: var(--mp-muted); font-size: .8rem; font-weight: 650; }
.mp-doc__sub { margin: .2rem 0 0; color: var(--mp-muted); font-size: .9rem; }
.mp-doc__due { color: var(--mp-bad); font-weight: 600; }
.mp-doc__sum { color: var(--mp-ink); font-size: 1.12rem; font-weight: 750; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-doc__sum small { display: block; color: var(--mp-muted); font-size: .8rem; font-weight: 500; }
.mp-doc__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem; }
.mp-doc__act .mp-btn { width: auto; min-height: 2.5rem; margin: 0; padding: .45rem .95rem; font-size: .92rem; white-space: nowrap; }
.mp-doc__act .mp-btn--ghost { padding-inline: .5rem; }
.mp-doc__items { display: grid; gap: .35rem; margin: .8rem 0 0 3.25rem; padding: .7rem 0 0; border-top: 1px dashed var(--mp-line-2); color: var(--mp-muted); font-size: .9rem; list-style: none; }
.mp-doc__items li { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.mp-doc__items b { flex: none; color: var(--mp-ink-2); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .mp-doc__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mp-doc__act { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 480px) {
  .mp-doc__row { grid-template-columns: auto minmax(0, 1fr); }
  .mp-doc__sum { grid-column: 2; text-align: left; }
  .mp-doc__items { margin-left: 0; }
}
.mp-renew__thumb { flex: none; width: 4rem; height: 3rem; border-radius: 10px; object-fit: cover; }
@media (max-width: 480px) { .mp-renew__thumb { display: none; } }

/* Usluge (wmd 27.10.): vrsta usluge = kartica s brojem; retci u stupcima (znak, naziv i opis, vrijedi do s oznakama, radnje);
   prazne vrste se ne crtaju, naručivanje je u pločicama „Dodajte uslugu” */
.mp-card__head h2 .mp-card__count { margin-left: .15rem; padding: .1rem .55rem; border-radius: 999px; background: var(--mp-surface); color: var(--mp-muted); font-size: .9rem; font-weight: 650; letter-spacing: 0; }
.mp-card__head > .mp-btn { width: auto; min-height: 2.5rem; margin: 0; padding: .45rem 1rem; font-size: .92rem; }
.mp-svc { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(9rem, auto) auto; column-gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.mp-svc__row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: .6rem 1.25rem; align-items: center; margin: 0 -.75rem; padding: .9rem .75rem; border-top: 1px solid var(--mp-line); border-radius: 14px; cursor: pointer; transition: background-color .15s; }
.mp-svc__row:first-child { border-top: 0; }
.mp-svc__row:hover { background: var(--mp-surface); }
.mp-svc__row:hover + .mp-svc__row { border-top-color: transparent; }
.mp-svc__thumb { display: block; flex: none; line-height: 0; }
.mp-svc__thumb img, .mp-svc__thumb > div { border-radius: 10px; }
.mp-svc__thumb--ai { display: grid; place-items: center; width: 4rem; height: 3rem; border-radius: 10px; background: #fdeee8; }
.mp-svc__what { min-width: 0; }
.mp-svc__what h3 { margin: 0; color: var(--mp-ink); font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }   /* wmd 28.10.: prelamanje, ne „predstecajne-nagodb…” za .com i .hr */
.mp-svc__what p { margin: .15rem 0 0; color: var(--mp-muted); font-size: .9rem; }
.mp-svc__what p a { color: var(--mp-blue-ink); font-weight: 600; text-decoration: none; }
.mp-svc__what p a:hover { text-decoration: underline; }
.mp-svc__addons { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-svc__due { display: grid; gap: .1rem; justify-items: start; }
.mp-svc__due > span:first-child { color: var(--mp-muted); font-size: .8rem; }
.mp-svc__due b { color: var(--mp-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-svc__badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.mp-svc__badges:empty { display: none; }
.mp-svc__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .35rem; }
.mp-svc__act form { margin: 0; }
.mp-svc__act .mp-btn { width: auto; min-height: 2.4rem; margin: 0; padding: .4rem .85rem; font-size: .9rem; white-space: nowrap; }
.mp-svc__ic { width: 1rem; height: 1rem; flex: none; }
@supports not (grid-template-columns: subgrid) { .mp-svc__row { grid-template-columns: auto minmax(0, 1fr) minmax(9rem, auto) auto; } }   /* stupci poravnati po kartici; bez subgrida po retku */
.mp-add { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.mp-add a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: 1rem 1.1rem; border: 1.5px dashed var(--mp-line-2); border-radius: 16px; background: var(--mp-paper); color: var(--mp-ink); font-weight: 650; text-decoration: none; transition: border-color .2s, background-color .2s; }
.mp-add a:hover { border-color: var(--mp-deep); background: var(--mp-blue-pale); }
.mp-add a > b { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--mp-deep); color: #fff; font-size: 1.1rem; line-height: 1; }
@media (max-width: 960px) {
  .mp-svc { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mp-svc__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mp-svc__act { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .mp-svc { grid-template-columns: minmax(0, 1fr) auto; }
  .mp-svc__row { grid-template-columns: minmax(0, 1fr) auto; }
  .mp-svc__thumb { display: none; }
  .mp-card__head > .mp-btn { width: 100%; }
}

/* ===== 11 Provjera stranice (sitecheck.page, javna, bez prijave): zaglavlje bez izbornika računa, skupine u plavoj glavi, a widget
   /embed/provjera (varijable --wpv-*) na tokenima „Modula”; rezultat kao provjera u Izvještajima (prsten ocjene, skupine u dva stupca).
   Ugradnja na tuđim stranicama ne učitava modul.css, pa tamo widget izgleda kao prije. ===== */
.mp-pv-login { display: inline-flex; align-items: center; gap: .4rem; height: 2.5rem; margin-left: .3rem; padding: 0 1rem 0 .8rem; border-radius: 999px; background: var(--mp-deep); color: #fff; font-size: .95rem; font-weight: 650; text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.mp-pv-login:hover { background: var(--mp-deep-hover); }
.mp-pv-login svg { width: 1.05rem; height: 1.05rem; flex: none; }
.mp-pv-groups { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.15rem 0 0; padding: 0; list-style: none; }
.mp-pv-groups li { padding: .35rem .85rem; border-radius: 999px; background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .32); color: #fff; font-size: .9rem; font-weight: 600; }
@media (max-width: 960px) { html.mp body[data-mp-provjera] { padding-bottom: 0; } }   /* stranica nema donju traku izbornika */
@media (max-width: 420px) { .mp-pv-login { padding: 0 .85rem; } .mp-pv-login svg { display: none; } }

html.mp .wpv {
  --wpv-brand: var(--mp-deep); --wpv-accent: var(--mp-accent); --wpv-ok: var(--mp-ok-strong); --wpv-warn: var(--mp-warn-strong); --wpv-bad: var(--mp-bad-strong);
  --wpv-ink: var(--mp-ink); --wpv-muted: var(--mp-muted); --wpv-line: var(--mp-line); --wpv-bg: var(--mp-paper); --wpv-field-line: var(--mp-line-2);
  --wpv-cta-bg: var(--mp-blue-pale); --wpv-cta-line: var(--mp-blue-line);
  max-width: none; font: inherit;
}
html.mp .wpv > .wpv-form { padding: clamp(.85rem, 1.3vw, 1.2rem); border: 1px solid var(--mp-line); border-radius: 22px; background: var(--mp-paper); box-shadow: var(--mp-shadow); }
html.mp .wpv-input { min-height: 3.3rem; padding: .7rem 1rem; border-width: 1.5px; font-size: 1.05rem; }
html.mp .wpv-input::placeholder { color: var(--mp-muted-2); }
html.mp .wpv-input:focus { outline: none; border-color: var(--mp-deep); box-shadow: 0 0 0 4px rgb(21 146 200 / .28); }
html.mp .wpv-btn { min-height: 3.3rem; padding: .7rem 1.6rem; font-size: 1.02rem; font-weight: 650; transition: background-color .2s, transform .2s var(--mp-ease), box-shadow .2s; }
html.mp .wpv-btn:not([disabled]):hover { background: var(--mp-deep-hover); transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgb(0 108 154 / .6); }
html.mp .wpv-btn--accent:not([disabled]):hover { background: var(--mp-accent); filter: brightness(.94); box-shadow: 0 10px 20px -10px rgb(240 90 40 / .6); }
html.mp .wpv-msg { font-size: .98rem; }
html.mp .wpv-res { margin-top: clamp(1.25rem, 2vw, 2rem); gap: clamp(1rem, 1.5vw, 1.5rem); }
html.mp :is(.wpv-head, .wpv-group) { padding: clamp(1.15rem, 1.6vw, 1.75rem); border-color: var(--mp-line); border-radius: 22px; box-shadow: var(--mp-shadow); }
html.mp .wpv-head { gap: 1rem 1.75rem; }
html.mp .wpv-score { width: 6.5rem; height: 6.5rem; --sc: var(--mp-deep); color: var(--mp-ink); font-size: 2rem; font-weight: 760; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: radial-gradient(closest-side, var(--mp-paper) calc(100% - 10px), transparent calc(100% - 9px)), conic-gradient(var(--sc) calc(var(--p, 0) * 1%), var(--mp-surface-2) 0);
  animation: mp-ring 1.4s var(--mp-ease) .1s both; }
html.mp .wpv-score--ok { --sc: var(--mp-ok-strong); }
html.mp .wpv-score--warn { --sc: var(--mp-warn-strong); }
html.mp .wpv-score--bad { --sc: var(--mp-bad-strong); }
@media (prefers-reduced-motion: reduce) { html.mp .wpv-score { animation: none; } }
html.mp .wpv-domain { color: var(--mp-ink); font-size: clamp(1.3rem, 1.8vw, 1.75rem); font-weight: 720; letter-spacing: -.025em; line-height: 1.15; overflow-wrap: anywhere; word-break: normal; }
html.mp .wpv-sub { margin-top: .3rem; font-size: 1rem; }
html.mp .wpv-group h3, html.mp .wpv-cta h3 { color: var(--mp-ink); font-size: 1.2rem; font-weight: 700; letter-spacing: -.016em; }
html.mp .wpv-item { color: var(--mp-ink-2); font-size: .98rem; line-height: 1.5; }
html.mp .wpv-cta { padding: clamp(1.25rem, 2vw, 2rem); border-radius: 22px; }
html.mp .wpv-cta h3 { font-size: clamp(1.3rem, 1.7vw, 1.6rem); font-weight: 720; letter-spacing: -.025em; }
html.mp .wpv-cta > * { max-width: 60rem; }
html.mp .wpv-cta textarea.wpv-input { min-height: 7rem; }
@media (min-width: 1100px) {
  html.mp .wpv-res { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  html.mp :is(.wpv-head, .wpv-cta) { grid-column: 1 / -1; }
}
@media (max-width: 600px) { html.mp .wpv-form .wpv-btn { flex: 1 1 100%; } }   /* gumb ispod polja preko cijele širine, kao na prijavi */
/* ===== 16 Nova domena (portal/nova-domena.php, istraživanje 31.10.): polje i gumb u jednom redu, rezultati kao retci usluga
   (naziv i stanje, cijena + PDV desno, radnja), a na početnoj ista tražilica u bočnom stupcu ===== */
.mp-dom-form { display: grid; gap: .5rem; margin: 0; }
.mp-dom-form__row { display: flex; align-items: stretch; gap: .6rem; }
.mp-dom-form__row .mp-input { flex: 1 1 auto; min-width: 0; font-size: 1.05rem; }
.mp-dom-form__row .mp-btn { width: auto; min-height: 3rem; margin: 0; padding-inline: 1.4rem; }
.mp-dom-form__hint { margin: 0; color: var(--mp-muted); font-size: .88rem; }
.mp-dom { margin: 0; padding: 0; list-style: none; }
.mp-dom__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .6rem 1.5rem; align-items: center; padding: .95rem 0; border-top: 1px solid var(--mp-line); }
.mp-dom__row:first-child { border-top: 0; padding-top: .2rem; }
.mp-dom__name { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; min-width: 0; }
.mp-dom__name b { color: var(--mp-ink); font-size: 1.1rem; font-weight: 700; overflow-wrap: anywhere; }
.mp-dom__price { display: grid; justify-items: end; gap: .1rem; text-align: right; }
.mp-dom__price b { color: var(--mp-ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-dom__price small { color: var(--mp-muted); font-size: .82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mp-dom__act { display: flex; justify-content: flex-end; }
.mp-dom__act form { margin: 0; }
.mp-dom__act .mp-btn { width: auto; min-width: 9rem; min-height: 2.6rem; margin: 0; padding: .45rem 1rem; font-size: .95rem; white-space: nowrap; }
.mp-dom--prices .mp-dom__row { grid-template-columns: minmax(0, 1fr) auto; }
.mp-dom__row--taken .mp-dom__name b { color: var(--mp-muted); font-weight: 600; }
.mp-dom-note { margin: 1rem 0 0; color: var(--mp-muted); font-size: .9rem; line-height: 1.5; }
.mp-dom-ideas { margin: 1rem 0 0; }
.mp-dom-ideas .mp-btn { width: auto; margin: 0; }
/* „Nova domena”: isti naziv u skupinama ekstenzija (31.10.) */
.mp-dom-group { border-top: 1px solid var(--mp-line); }
.mp-dom-group:first-of-type { border-top: 0; }
.mp-dom-group summary { display: flex; align-items: center; gap: .5rem; padding: .85rem 0; color: var(--mp-ink); font-weight: 700; cursor: pointer; }
.mp-dom-group summary small { color: var(--mp-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.mp-dom--all .mp-dom__row { padding: .6rem 0; }
.mp-dom--all .mp-dom__name b { font-size: 1rem; font-weight: 650; }
/* gotovi DNS zapisi (31.10.): izbor servisa, polja, usporedba sa zonom i dvije radnje */
.mp-dns-tpl { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.mp-dns-tpl__item { display: grid; gap: .25rem; height: 100%; padding: .9rem 1rem; border: 1px solid var(--mp-line); border-radius: 16px; color: var(--mp-ink); text-decoration: none; }
.mp-dns-tpl__item:hover { background: var(--mp-blue-pale); }
.mp-dns-tpl__item[aria-current] { border-color: var(--mp-deep); background: var(--mp-blue-pale); }
.mp-dns-tpl__item b { font-weight: 700; }
.mp-dns-tpl__item small { color: var(--mp-muted); font-size: .85rem; line-height: 1.4; }
.mp-dns-form { display: grid; gap: .25rem; margin-bottom: 1rem; }
.mp-dns-form .mp-btn { justify-self: start; width: auto; margin-top: .75rem; }
.mp-dns-plan code { font-size: .85rem; overflow-wrap: anywhere; }
.mp-dns-act { display: grid; gap: .6rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--mp-line); }
.mp-dns-act .mp-btn { justify-self: start; width: auto; margin: 0; }
.mp-dns-act .mp-dom-note { margin: 0; }
.mp-dns-confirm { display: flex; align-items: flex-start; gap: .6rem; color: var(--mp-ink); font-size: .93rem; line-height: 1.45; }
.mp-dns-confirm input { margin-top: .2rem; }
.mp-dns-changes { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.mp-dns-changes code { font-size: .85rem; overflow-wrap: anywhere; }
.mp-dns-act .mp-msg { margin: 0; }
.mp-cols__side .mp-dom-form__row { flex-wrap: wrap; }
.mp-cols__side .mp-dom-form__row .mp-btn { flex: 1 1 100%; }
@media (max-width: 640px) {
  .mp-dom-form__row { flex-wrap: wrap; }
  .mp-dom-form__row .mp-btn { flex: 1 1 100%; }
  .mp-dom__row { grid-template-columns: minmax(0, 1fr); gap: .45rem; }   /* naziv cijelom širinom (inače se lomi na crtici), cijena ispod, gumb preko cijele širine */
  .mp-dom__price { justify-items: start; text-align: left; }
  .mp-dom--prices .mp-dom__row { grid-template-columns: minmax(0, 1fr) auto; }
  .mp-dom--prices .mp-dom__price { justify-items: end; text-align: right; }
  .mp-dom__act > *, .mp-dom__act .mp-btn { width: 100%; }
}
.mp-card__sub + .mp-dom-form { margin-top: 1rem; }
.mp-card__acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mp-card__acts > .mp-btn { width: auto; min-height: 2.5rem; margin: 0; padding: .45rem 1rem; font-size: .92rem; }
@media (max-width: 560px) {
  .mp-card__acts { width: 100%; }
  .mp-card__acts > .mp-btn { flex: 1 1 100%; }
}