/* masterivo.com look (owner decision 29.10.2026, point 10): same logo, typeface and colours as the
   website. Loaded after styles.css; only colour tokens, type and the new masterivo components live here. */
:root{--ink:#16243a;--muted:#627084;--line:#e1e6e5;--bg:#fcfcf9;--accent:#0f7f64;--accent2:#0b172a;--soft:#e6f7f0;--mx-navy:#0b172a;--mx-navy2:#102339;--mx-teal:#17b998;--mx-teal-soft:#c7f7e8;--mx-serif:Georgia,'Times New Roman',serif;--mx-sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
body{font-family:var(--mx-sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
.topbar{background:rgba(252,252,249,.96);border-bottom-color:#edf0ed}
.primary{background:var(--mx-navy2);color:#fff}
.primary:hover:not(:disabled){background:#204259}
.navtabs button.active{color:var(--mx-navy);border-bottom-color:var(--mx-teal)}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--mx-teal);outline-offset:3px}
.version{background:var(--soft);color:var(--accent)}

/* Logo: the navy "m" tile of masterivo.com, linking to the website. */
.toprow{gap:12px}
.mx-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);flex:none}
.mx-brand-mark{width:30px;height:30px;border-radius:9px;background:var(--mx-navy);color:#76ecc8;display:grid;place-items:center;font:700 23px/1 var(--mx-serif);transform:rotate(-5deg)}
.mx-brand-mark span{transform:translateY(-2px) rotate(5deg)}
.mx-brand-text{font-weight:800;letter-spacing:-1px;font-size:17px}
.mx-brand-text b{color:#29bf9b;font-weight:800}
.mx-brand+div{flex:1;min-width:0;border-left:1px solid var(--line);padding-left:12px}
@media(max-width:640px){.mx-brand-text{display:none}.mx-brand+div{padding-left:8px}}

/* 8. Exam readiness headline */
.mx-readiness{margin:14px 0 18px;padding:16px 18px;border:1px solid #cfeee2;background:#f2fbf7;border-radius:14px}
.mx-ready-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:4px 0 8px}
.mx-ready-big{font-size:1.25rem;letter-spacing:-.02em;color:#0f5c48}
.mx-ready-pct{font:700 2rem/1 var(--mx-serif);color:#0f5c48}
.mx-ready-track{height:12px;background:#e3ece8;border-radius:8px;overflow:hidden}
.mx-ready-track>div{height:100%;background:var(--mx-teal);border-radius:8px;transition:width .4s}
.mx-readiness p{margin:8px 0 0}
.mx-readiness .primary{margin-top:10px}

/* 6. Report an error in a task */
.question{position:relative}
.mx-report-task{display:block;margin:8px 0 0 auto;border:0;background:none;padding:4px 2px;color:var(--muted);font-size:.8rem;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.mx-report-task:hover{color:#b3261e}
#feedbackMail{text-decoration:none;display:inline-block}

/* 7. Three-step introduction */
.mx-intro{max-width:480px}
.mx-intro-step{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.mx-intro-num{width:34px;height:34px;border-radius:10px;background:var(--mx-navy);color:#76ecc8;display:grid;place-items:center;font:700 18px/1 var(--mx-serif)}
.mx-intro h2{font-size:1.4rem}
.mx-dots{display:flex;gap:6px;margin:4px 0 14px}
.mx-dot{width:8px;height:8px;border-radius:50%;background:#d5dedb}
.mx-dot.on{background:var(--mx-teal);width:22px;border-radius:5px}
.feedback-bar{gap:10px;flex-wrap:wrap}
@media(prefers-reduced-motion:reduce){.mx-ready-track>div{transition:none}}
/* V9.14.1 (owner request 30.10.2026): one consistent, rounded select style in the app content (e.g. the part
   choice in Training) instead of the browser's plain box; header selects keep their compact style. */
#app select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;min-height:46px;padding:10px 42px 10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23627084' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/14px 14px;color:var(--ink);font-size:16px;line-height:1.3;box-shadow:0 1px 2px rgba(11,23,42,.05);cursor:pointer;max-width:100%;text-overflow:ellipsis;transition:border-color .15s,box-shadow .15s}
#app select:not([multiple]):not([size]):hover{border-color:#bfcac6}
#app select:not([multiple]):not([size]):focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--mx-teal-soft)}
#app select:disabled{opacity:.6;cursor:not-allowed}
#app .component-grid .modecard{display:flex;flex-direction:column;align-items:stretch;gap:8px}#app .component-grid .modecard h2{margin:0}#app .component-grid .modecard select{display:block;width:100%;margin:4px 0 6px}#app .component-grid .modecard button{width:100%}
/* V9.14.1 phone polish (owner request 30.10.2026): header controls in the same rounded look as the app's
   selects and a little taller, slightly larger tab labels, footer links with a comfortable tap area. */
.quick-level select,.quick-language select{-webkit-appearance:none;appearance:none;border-radius:10px;padding-right:30px!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23627084' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/12px 12px;text-overflow:ellipsis;cursor:pointer}
.text-size{border-radius:10px}
@media(max-width:680px){
 .quick-level select,.quick-language select,.text-size{min-height:40px}
 .navtabs button{font-size:12px}
 .site-footer a{display:inline-block;padding:8px 4px}
}
/* Rating request (owner decision 31.10.2026): a quiet card on home and a permanent entry in profile/settings. */
.mx-rating{margin:18px 0;padding:14px 16px;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:14px}
.mx-rating p{margin:0 0 10px}
.mx-rating .controls,.mx-rating-entry .controls{flex-wrap:wrap;gap:8px}
.mx-rate-link{display:inline-flex;align-items:center;text-decoration:none}
.mx-rate-link:focus-visible,.mx-rating button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.mx-rating-entry h2{margin-top:28px}
/* 03.11.2026 short feedback card (masterivo-ux.js feedbackCardHtml): same look as the rating card, large tap targets. */
.mx-feedback{position:relative;margin:18px 0;padding:14px 16px;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:14px}
.mx-feedback h2{margin:0 0 10px;font-size:1.15rem}
.mx-feedback p{margin:8px 0 0}
.mx-stars{display:flex;gap:4px;border:0;padding:0;margin:0 0 10px}
.mx-stars legend{font-weight:600;margin-bottom:6px}
.mx-star{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:1.8rem;line-height:1;color:var(--muted);cursor:pointer}
.mx-star input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mx-stars:has(.mx-star:nth-of-type(1) input:checked) .mx-star:nth-of-type(-n+1),.mx-stars:has(.mx-star:nth-of-type(2) input:checked) .mx-star:nth-of-type(-n+2),.mx-stars:has(.mx-star:nth-of-type(3) input:checked) .mx-star:nth-of-type(-n+3),.mx-stars:has(.mx-star:nth-of-type(4) input:checked) .mx-star:nth-of-type(-n+4),.mx-stars:has(.mx-star:nth-of-type(5) input:checked) .mx-star:nth-of-type(-n+5){color:#d48806}
.mx-star:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.mx-feedback textarea,.mx-feedback input[name="name"]{width:100%;box-sizing:border-box}
.mx-feedback .controls{flex-wrap:wrap;gap:8px}
.mx-feedback [hidden]{display:none!important}

/* Explainer video: button per training area + player dialog (same controls as the FiBu apps). */
.explain-video-row{margin-top:10px}.explain-video-btn{font-weight:600}.explain-seen{color:#087a43;font-weight:700}
.explain-video-dialog{width:min(900px,calc(100% - 24px));max-height:94dvh;border:0;border-radius:18px;padding:18px 18px 12px;overflow:auto;box-shadow:0 24px 100px #10251c66}
.explain-video-dialog::backdrop{background:#0b221db0;backdrop-filter:blur(4px)}.explain-video-dialog h2{margin:0 0 12px;font-size:20px}
.explain-video-dialog video{display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px}
.explain-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}.explain-bar .grow{flex:1}.explain-rates{display:flex;gap:6px;flex-wrap:wrap}
.explain-bar button{min-height:44px;padding:6px 14px}.explain-bar button[aria-pressed=true]{background:#16362f;border-color:#16362f;color:#fff}.explain-hint{margin:8px 0 0}
@media(max-width:760px){.explain-video-dialog{padding:12px}.explain-bar .grow{display:none}}