/* ===================== The prototype: Royal ===================== */
.mk{
  --m-bg:#080c18;--m-panel:#0e1324;--m-panel2:#131a2f;--m-line:#222941;--m-gl:rgba(207,174,110,.3);--m-gl2:rgba(207,174,110,.14);
  --m-fg:#f2ebdb;--m-muted:#a8a192;--m-faint:#77736a;--m-brand:#cfae6e;--m-brand-ink:#1a1306;--m-gold:#e2c27d;
  --m-red:#e3687a;--m-blue:#93aaf0;--m-amber:#ee8c5f;--m-good:#55c592;
  --m-font:"Jost",system-ui,sans-serif;--m-disp:"Bodoni Moda",Didot,Georgia,serif;--m-caps:"Cinzel",Georgia,serif;
  --ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.2,1.25,.35,1);
  position:relative;overflow:hidden;font-family:var(--m-font);color:var(--m-fg);background:var(--m-bg);font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;text-align:left;color-scheme:dark
}
.mk *{box-sizing:border-box}
.mk .scroll{overflow-y:auto;overscroll-behavior:contain;position:relative;min-height:0;scrollbar-width:thin;scrollbar-color:#2a3150 transparent}
.mk .num{font-variant-numeric:tabular-nums lining-nums}
.mk h1,.mk h2,.mk h3,.mk h4,.mk p{margin:0}
.mk button{color:inherit;cursor:pointer;font:inherit}
.mk ul,.mk ol{list-style:none;margin:0;padding:0}
.mk dl,.mk dd{margin:0}
.mk .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mk :focus-visible{outline:2px solid var(--m-gold);outline-offset:2px}
.mk .crown{width:14px;height:14px;fill:currentColor;flex:none}

/* Accessibility (screens spec 9). The size of the fields is app.css's (16px on the phone and on touch screens). */
/* On the phone every button and link is at least 44 by 44. A control the design draws small keeps its drawn size and its place in the row: it gets
   the target as a transparent area around it (::after, below), or as padding with a matching negative margin. */
.mk.phone button,.mk.phone a[href]{min-height:44px;min-width:44px}
.mk.phone .tb-i{align-items:center;justify-content:center}
.mk.phone a.lnk{display:inline-flex;align-items:center}
.mk.phone .sh-eye a.lnk{margin-block:-15px}
.mk.phone .p-back{margin-block:-6px}
.mk.phone a.lnk-plain{padding-block:12px;margin-block:-12px}
.mk.phone a.tag[href],.mk.phone a.cnt[href],.mk.phone .icon-btn{position:relative;min-height:0;min-width:0}
.mk.phone a.tag[href]::after,.mk.phone a.cnt[href]::after,.mk.phone .icon-btn::after{content:"";position:absolute}
.mk.phone a.tag[href]::after{inset:-14px -8px}
/* Task 24 N1: a tag's tap area reaches 14px up and down (the row gap) and 8px across (half the column gap, which the 44px target needs of the shortest tag), so it never enters a neighbour's box */
.mk.phone .r-tags{gap:14px 16px}
.mk.phone a.cnt[href]::after{inset:-5px -4px}
.mk.phone .icon-btn::after{inset:-10px}
.mk.phone .fchip .icon-btn::after{inset:-16px}
/* Words for a state that is shown by a mark: read by a screen reader, never drawn. */
.mk .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* buttons */
.mk .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--m-gl);background:transparent;color:var(--m-fg);border-radius:2px;padding:8px 14px;font-weight:600;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;transition:background .2s,border-color .2s,transform .12s var(--ease)}
.mk .btn:hover{background:rgba(207,174,110,.08);border-color:rgba(207,174,110,.55)}
.mk .btn:active{transform:scale(.97)}
.mk .btn-s{padding:4px 10px;font-size:11.5px}
.mk .btn-p{background:linear-gradient(180deg,#e7c985,#b8924e);color:#1a1306;border-color:transparent;box-shadow:0 6px 18px rgba(207,174,110,.18)}
.mk .btn-p:hover{background:linear-gradient(180deg,#f0d593,#c29b56)}
.mk .btn-good{border-color:rgba(85,197,146,.6);color:var(--m-good)}
.mk .btn-good:hover{background:rgba(85,197,146,.1);border-color:var(--m-good)}
.mk .btn-mute{border-color:var(--m-line);color:var(--m-muted)}
.mk .btn-wrong{border-color:rgba(227,104,122,.55)}
.mk .btn-wrong .ic{color:var(--m-red)}
.mk .btn.full,.mk .sent.full{width:100%}
.mk .btn[disabled]{opacity:.45;pointer-events:none}
.mk .sent{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:600;font-size:12.5px;color:var(--m-muted);padding:8px 2px;white-space:nowrap}
.mk .sent .ic{color:var(--m-good)}
.mk .lnk{background:none;border:0;padding:0;color:var(--m-muted);text-decoration:underline;text-underline-offset:2px;font-size:12px;font-weight:600}
.mk .icon-btn{background:none;border:0;padding:4px;color:var(--m-muted);display:inline-flex}

/* marks */
.mk .calib{display:inline-flex;align-items:center;gap:6px;color:var(--m-gold);background:transparent;box-shadow:inset 0 0 0 1px var(--m-gl);font-family:var(--m-caps);letter-spacing:.12em;text-transform:uppercase;font-size:9.5px;font-weight:700;padding:3px 9px;border-radius:2px;white-space:nowrap}
.mk .calib::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:currentColor;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.mk .dec{display:inline-flex;align-items:center;gap:6px;font-family:var(--m-caps);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 10px;border-radius:2px;white-space:nowrap;line-height:1.5}
.mk .dec-pass{color:var(--m-good);box-shadow:inset 0 0 0 1px var(--m-good)}
.mk .dec-spam{color:var(--m-muted);box-shadow:inset 0 0 0 1px var(--m-line)}
.mk .dec-rev{color:var(--m-amber);box-shadow:inset 0 0 0 1px var(--m-amber)}
.mk .dec-wait{color:var(--m-blue);box-shadow:inset 0 0 0 1px rgba(147,170,240,.5)}
.mk .dec-wait::before{content:"";width:9px;height:9px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.mk .vb{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:2px;white-space:nowrap;line-height:1.5;letter-spacing:.03em}
.mk .vb .ic{width:12px;height:12px;stroke-width:2.8}
.mk .vb-verified{color:var(--m-good);background:rgba(85,197,146,.1);box-shadow:inset 0 0 0 1px rgba(85,197,146,.5)}
.mk .vb-unverified{color:var(--m-amber);border:1px dashed var(--m-amber);padding:1px 7px}
.mk .vb-partial{color:var(--m-muted);box-shadow:inset 0 0 0 1px var(--m-line)}
.mk .vb-wrong{color:var(--m-red);background:rgba(227,104,122,.1)}
.mk .vf{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;white-space:nowrap}
.mk .vf::before{content:"";width:7px;height:7px;transform:rotate(45deg);flex:none}
.mk .vf-good{color:var(--m-good)} .mk .vf-good::before{background:var(--m-good)}
.mk .vf-bad{color:var(--m-red)} .mk .vf-bad::before{background:var(--m-red)}
.mk .vf-ok{color:var(--m-muted)} .mk .vf-ok::before{background:var(--m-muted)}
.mk .vf-info{color:var(--m-blue)} .mk .vf-info::before{background:var(--m-blue)}
.mk .best{display:inline-flex;align-items:center;gap:4px;color:var(--m-good);box-shadow:inset 0 0 0 1px var(--m-good);border-radius:2px;font-family:var(--m-caps);letter-spacing:.1em;font-size:9.5px;font-weight:700;padding:2px 7px;white-space:nowrap}
.mk .best .crown{width:11px;height:11px;color:var(--m-gold)}
.mk .flag-n{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--m-line);font-size:11px;color:var(--m-muted);font-weight:600}
.mk .tag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--m-muted);box-shadow:inset 0 0 0 1px var(--m-line);padding:1px 7px;border-radius:2px;white-space:nowrap}
.mk .tag.gold{color:var(--m-gold);box-shadow:inset 0 0 0 1px var(--m-gl)}
.mk .why{font-size:13.5px;color:var(--m-fg);line-height:1.5}
.mk .muted{color:var(--m-muted)}
.mk .live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--m-good);box-shadow:0 0 0 0 rgba(85,197,146,.6);animation:ping 2s ease-out infinite;flex:none}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(85,197,146,.55)}80%,100%{box-shadow:0 0 0 7px rgba(85,197,146,0)}}

/* sections */
.mk .sec{background:linear-gradient(180deg,var(--m-panel),#0b1020);border:1px solid var(--m-line);border-radius:2px;padding:18px 20px}
.mk .sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--m-gl);padding-bottom:10px;margin-bottom:10px;min-height:24px}
.mk .sec-h h3{display:flex;align-items:center;gap:9px;font-family:var(--m-caps);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--m-brand);font-weight:600;white-space:nowrap}
.mk .sec-h h3::before{content:"";width:6px;height:6px;transform:rotate(45deg);background:var(--m-brand);flex:none}
.mk .sec-sub{color:var(--m-muted);font-size:11.5px;white-space:nowrap}
.mk.phone .sec{padding:16px}
.mk.phone .sec-sub{white-space:normal;text-align:right}