/* ============================================
   MarkCo design tokens (UI redesign)
   Loads AFTER financial-theme.css and re-points its neutrals.
   ============================================ */

:root {
    --mk-acc: #1D6B45;
    --mk-acc-2: #2E8559;
    --mk-acc-soft: #E2EFE7;
    --mk-ink: #1E2621;
    --mk-mute: #68736C;
    --mk-faint: #97A19A;
    --mk-line: #DCE4DE;
    --mk-line-2: #E8EDE9;
    --mk-bg-1: #EEF4F0;
    --mk-bg-2: #F8FAF8;
    --mk-tint: #F5F9F6;
    --mk-warn: #A8742A;
    --mk-warn-soft: #F7EEDD;
    --mk-bad: #A64B45;
    --mk-bad-soft: #F6E5E3;
    --mk-ok: #3F7D58;
    --mk-k-meeting: #3E6E9C;
    --mk-k-statutory: #6B4E9B;
    --mk-k-holiday: #C08A3E;
    --mk-k-birthday: #2E8559;
    --mk-k-leave: #9DB3A5;
    --mk-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(16,32,22,.05), 0 6px 16px -6px rgba(16,32,22,.12);
    --mk-shadow-lg: inset 0 1px 0 #fff, 0 2px 4px rgba(16,32,22,.06), 0 16px 32px -12px rgba(16,32,22,.18);
    --mk-ring: 0 0 0 3px rgba(46,133,89,.14);
    --mk-radius: 10px;

    /* Green-grey neutral ramp replaces the zinc neutrals (950 left as-is) */
    --d6-zinc-50: #F8FAF8;
    --d6-zinc-100: #F1F5F2;
    --d6-zinc-200: #E8EDE9;
    --d6-zinc-300: #DCE4DE;
    --d6-zinc-400: #97A19A;
    --d6-zinc-500: #68736C;
    --d6-zinc-600: #4A554E;
    --d6-zinc-700: #3A443E;
    --d6-zinc-800: #2A332D;
    --d6-zinc-900: #1E2621;

    --d6-bg: var(--mk-bg-1);
    --d6-text: var(--mk-ink);

    --bs-primary: var(--mk-acc);
    --bs-primary-rgb: 29, 107, 69;
    --bs-link-color: var(--mk-acc);
}

body {
    font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif !important;
    font-variant-numeric: tabular-nums;
}

/* Statutory outputs keep their original look: Inter + the old zinc neutrals */
.mk-statutory,
.mk-statutory *:not([class*="ki-"]):not([class*="ph-"]) {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
}
.mk-statutory {
    --d6-zinc-50: #FAFAFA;
    --d6-zinc-100: #F4F4F5;
    --d6-zinc-200: #E4E4E7;
    --d6-zinc-300: #D4D4D8;
    --d6-zinc-400: #A1A1AA;
    --d6-zinc-500: #71717A;
    --d6-zinc-600: #52525B;
    --d6-zinc-700: #3F3F46;
    --d6-zinc-800: #27272A;
    --d6-zinc-900: #18181B;
    --d6-border: #E4E4E7;
    --d6-text: #09090B;
    --d6-text-secondary: #71717A;
    --d6-text-muted: #A1A1AA;
}

/* Primary accent is green app-wide (financial-theme.css forces blue) */
.btn-primary { background-color: var(--mk-acc) !important; border-color: var(--mk-acc) !important; }
.btn-primary:hover, .btn-primary:active { background-color: var(--mk-acc-2) !important; border-color: var(--mk-acc-2) !important; }
.btn-primary:focus { background-color: var(--mk-acc-2) !important; border-color: var(--mk-acc-2) !important; box-shadow: var(--mk-ring) !important; }
.fs-btn-prepare { background: var(--mk-acc); }
.fs-btn-prepare:hover { background: var(--mk-acc-2); }
.fs-seg-active { background: var(--mk-acc); }
.fs-quick-btn-primary { background: var(--mk-acc-soft); color: var(--mk-acc); border-color: var(--mk-line); }
.fs-quick-btn-primary:hover { background: var(--mk-acc); color: white; }

/* Depth utilities */
.mk-surface {
    background: linear-gradient(180deg, #fff, var(--mk-tint));
    border: 1px solid var(--mk-line);
    border-radius: var(--mk-radius);
    box-shadow: var(--mk-shadow);
}
.mk-shadow { box-shadow: var(--mk-shadow); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   Components (x-mk.*) - Step 1 component set
   ========================================================================== */

/* Buttons */
.mk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border: 1px solid transparent; border-radius: 8px; padding: 8px 14px;
    font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.2; cursor: pointer; text-decoration: none;
    transition: box-shadow .15s ease, filter .15s ease, background .15s ease;
}
.mk-btn:focus-visible { outline: 0; box-shadow: var(--mk-ring); }
.mk-btn:disabled, .mk-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.mk-btn-block { display: flex; width: 100%; }
.mk-btn-primary {
    background: linear-gradient(180deg, var(--mk-acc-2), var(--mk-acc)); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.12), 0 4px 10px -4px var(--mk-acc);
}
.mk-btn-primary:hover { filter: brightness(1.06); color: #fff; }
.mk-btn-secondary {
    background: linear-gradient(180deg, #fff, #F4F7F5); border-color: var(--mk-line); color: var(--mk-ink);
    box-shadow: 0 1px 2px rgba(16,32,22,.06);
}
.mk-btn-secondary:hover { background: var(--mk-bg-1); color: var(--mk-ink); }
.mk-btn-ghost { background: transparent; color: var(--mk-acc); }
.mk-btn-ghost:hover { background: var(--mk-acc-soft); color: var(--mk-acc); }
.mk-btn-danger {
    background: linear-gradient(180deg, #C46A62, var(--mk-bad)); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.12), 0 4px 10px -4px var(--mk-bad);
}
.mk-btn-danger:hover { filter: brightness(1.06); color: #fff; }
.mk-btn i { font-size: 16px; }
/* Metronic loading indicator, nested inside the label span */
.mk-btn .indicator-progress { display: none; }
.mk-btn[data-kt-indicator="on"] .indicator-progress { display: inline-flex; align-items: center; }
.mk-btn[data-kt-indicator="on"] .indicator-label { display: none; }

/* Inputs */
.mk-field { margin: 0 0 4px; }
.mk-label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--mk-ink); font-weight: 500; margin: 12px 0 5px; }
.mk-label a { color: var(--mk-acc); font-weight: 500; text-decoration: none; }
.mk-input {
    display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px;
    background: #fff; border: 1px solid var(--mk-line); border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(16,32,22,.05);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mk-input:focus-within { border-color: var(--mk-acc-2); box-shadow: var(--mk-ring); }
.mk-input.is-invalid, .mk-input:has(input.is-invalid) { border-color: var(--mk-bad); background: var(--mk-bad-soft); }
.mk-input.is-invalid:focus-within, .mk-input:has(input.is-invalid):focus-within { box-shadow: 0 0 0 3px rgba(166,75,69,.16); }
.mk-input-icon { font-size: 17px; color: var(--mk-faint); }
.mk-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1; color: var(--mk-ink); box-shadow: none; }
.mk-input input::placeholder { color: var(--mk-faint); }
.mk-input-eye { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--mk-faint); font-size: 17px; line-height: 1; }
.mk-input-eye:hover, .mk-input-eye:focus-visible { color: var(--mk-acc); outline: 0; }
.mk-field-error { margin-top: 5px; font-size: 11.5px; color: var(--mk-bad); }
.mk-field-hint { margin-top: 5px; font-size: 11.5px; color: var(--mk-mute); }

/* Card */
.mk-card-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--mk-line-2); }
.mk-card-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--mk-ink); }
.mk-card-action { font-size: 12px; font-weight: 500; color: var(--mk-acc); text-decoration: none; }
.mk-card-action:hover { text-decoration: underline; }
.mk-card-body { padding: 14px 16px; }

/* KPI tile */
.mk-kpi { padding: 14px 16px; position: relative; overflow: hidden; min-width: 0; }
.mk-kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--mk-acc), var(--mk-acc-2)); }
.mk-kpi--warn::before { background: linear-gradient(90deg, #C08A3E, #D9A85F); }
.mk-kpi--bad::before { background: linear-gradient(90deg, var(--mk-bad), #C46A62); }
.mk-kpi-label { font-size: 11.5px; color: var(--mk-mute); }
.mk-kpi-value { font-size: 26px; font-weight: 600; color: var(--mk-ink); font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 4px; }
.mk-kpi--warn .mk-kpi-value { color: var(--mk-warn); }
.mk-kpi--bad .mk-kpi-value { color: var(--mk-bad); }
.mk-kpi-sub { font-size: 11px; color: var(--mk-faint); margin-top: 2px; }

/* Pill + tag */
.mk-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 3px 10px; border-radius: 14px; border: 1px solid var(--mk-line); color: var(--mk-ink); }
.mk-pill.is-active { background: var(--mk-acc-soft); border-color: #C9DFD1; color: var(--mk-acc); font-weight: 500; }
.mk-tag { display: inline-block; font-size: 10.5px; padding: 2px 8px; border-radius: 10px; white-space: nowrap; background: var(--mk-bg-1); color: var(--mk-mute); }
.mk-tag--acc { background: var(--mk-acc-soft); color: var(--mk-acc); }
.mk-tag--warn { background: var(--mk-warn-soft); color: var(--mk-warn); }
.mk-tag--bad { background: var(--mk-bad-soft); color: var(--mk-bad); }

/* Section heading */
.mk-sec { display: flex; align-items: center; gap: 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mk-faint); margin: 22px 0 10px; }
.mk-sec::after { content: ''; flex: 1; height: 1px; background: var(--mk-line); }

/* OTP */
.mk-otp { display: flex; gap: 8px; margin: 6px 0 4px; }
.mk-otp-box {
    flex: 1; min-width: 0; height: 50px; text-align: center; padding: 0;
    border: 1px solid var(--mk-line); border-radius: 9px; background: #fff; color: var(--mk-ink);
    font-family: 'IBM Plex Mono', monospace; font-size: 22px;
    box-shadow: inset 0 1px 2px rgba(16,32,22,.05);
}
.mk-otp-box:focus { outline: 0; border-color: var(--mk-acc-2); box-shadow: var(--mk-ring); }

/* Empty state */
.mk-empty { text-align: center; padding: 32px 16px; color: var(--mk-mute); }
.mk-empty-icon { font-size: 36px; color: var(--mk-faint); }
.mk-empty-title { font-size: 14px; font-weight: 600; color: var(--mk-ink); margin-top: 8px; }
.mk-empty-text { font-size: 12.5px; margin: 4px 0 0; }
.mk-empty-action { margin-top: 14px; }

/* Brand mark */
.mk-brand-mark {
    display: inline-flex; align-items: center; justify-content: center; flex: none; color: #fff;
    border-radius: 22%; background: linear-gradient(135deg, var(--mk-acc-2), var(--mk-acc));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px -4px var(--mk-acc);
}

/* auth */
.mk-auth-split, .mk-hero { font-family: 'IBM Plex Sans', sans-serif; box-sizing: border-box; }
.mk-auth-split *, .mk-hero * { box-sizing: border-box; }

/* split variant */
.mk-auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; color: var(--mk-ink); }
.mk-auth-panel {
    position: relative; padding: 40px 48px; color: #EAF3EE; display: flex; flex-direction: column; overflow: hidden;
    background: radial-gradient(90% 70% at 0% 0%, #2E8559 0%, transparent 60%), radial-gradient(80% 80% at 100% 100%, #0F3D27 0%, transparent 60%), linear-gradient(160deg, #1D6B45, #154F33);
}
.mk-auth-panel::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 28px 28px; mask-image: linear-gradient(180deg, #000, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.mk-auth-panel > * { position: relative; z-index: 1; }
.mk-auth-panel .mk-brand-mark { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.mk-auth-logo { display: flex; gap: 10px; align-items: center; font-weight: 600; letter-spacing: .04em; font-size: 12.5px; }
.mk-auth-headline { margin: auto 0 12px; font-size: 28px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: #fff; max-width: 420px; }
.mk-auth-aside { margin: auto 0 0; }
.mk-auth-sub { margin: 0 0 20px; font-size: 13px; color: #CFE3D7; max-width: 380px; }
.mk-auth-points { list-style: none; margin: 0; padding: 0; }
.mk-auth-points li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 6px 0; color: #E3EFE8; }
.mk-auth-points li i { font-size: 18px; color: #BFE3CD; }
.mk-auth-foot { margin-top: 28px; font-size: 11px; color: #9CC4AC; }
.mk-auth-form { display: flex; align-items: center; justify-content: center; padding: 32px 24px; background: radial-gradient(100% 70% at 100% 0%, var(--mk-bg-1), #fff 60%); min-width: 0; }
.mk-auth-form-in { width: 100%; max-width: 360px; }
@media (max-width: 899.98px) {
    .mk-auth-split { grid-template-columns: 1fr; }
    .mk-auth-panel { display: none; }
}

/* hero variant */
.mk-hero { position: relative; min-height: 100vh; overflow: hidden; color: #fff; isolation: isolate; background: #0A2218; }
.mk-hero-mesh {
    position: absolute; inset: -20%; z-index: -3; filter: saturate(1.1); animation: mk-drift 18s ease-in-out infinite alternate;
    background:
        radial-gradient(35% 45% at 18% 22%, #2FA36B 0%, transparent 70%),
        radial-gradient(30% 40% at 78% 18%, #1B7F78 0%, transparent 70%),
        radial-gradient(40% 45% at 70% 85%, #C9A15A55 0%, transparent 70%),
        radial-gradient(45% 50% at 25% 90%, #0E5A3C 0%, transparent 70%),
        linear-gradient(160deg, #0B2C1D 0%, #0A2218 60%, #081A12 100%);
}
@keyframes mk-drift { 0% { transform: translate(0,0) rotate(0deg); } 100% { transform: translate(-3%,2%) rotate(6deg); } }
.mk-hero-orb { position: absolute; border-radius: 50%; filter: blur(40px); z-index: -2; opacity: .65; pointer-events: none; }
.mk-hero-orb.o1 { width: 320px; height: 320px; left: -80px; top: -60px; background: #37B678; animation: mk-float 10s ease-in-out infinite; }
.mk-hero-orb.o2 { width: 260px; height: 260px; right: 120px; bottom: -90px; background: #D9B26A; opacity: .35; animation: mk-float 13s ease-in-out infinite reverse; }
.mk-hero-orb.o3 { width: 220px; height: 220px; right: -40px; top: 40px; background: #1FA39A; opacity: .45; animation: mk-float 11s ease-in-out infinite; }
@keyframes mk-float { 50% { transform: translate(20px,-24px); } }
.mk-hero-floor {
    position: absolute; left: -20%; right: -20%; bottom: -10%; height: 55%; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
    background-size: 44px 44px; transform: perspective(600px) rotateX(62deg); transform-origin: bottom;
    mask-image: linear-gradient(0deg, #000 10%, transparent 85%); -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 85%);
}
.mk-hero-grain {
    position: absolute; inset: 0; z-index: -1; opacity: .08; mix-blend-mode: overlay; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.mk-hero-wrap { position: relative; min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; padding: 48px 56px 64px; gap: 40px; }
.mk-hero-left { min-width: 0; }
.mk-hero-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 12px; letter-spacing: .06em; margin-bottom: 28px; }
.mk-hero-brand .mk-brand-mark { background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.3); box-shadow: 0 8px 20px -6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4); }
.mk-hero-pill { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; padding: 4px 11px 4px 6px; border-radius: 20px; margin-bottom: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #D8EDE0; }
.mk-hero-pill-new { font-weight: 500; font-size: 10px; padding: 1px 7px; border-radius: 10px; background: linear-gradient(90deg,#E6C27F,#C9A15A); color: #2A1F08; }
.mk-hero-hl { font-family: 'IBM Plex Serif', serif; font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 14px; color: #fff; }
.mk-hero-hl em { font-style: italic; background: linear-gradient(90deg, #9FE3BC, #E6C27F); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mk-hero-lede { color: #BCD5C6; font-size: 13.5px; max-width: 400px; line-height: 1.55; margin: 0; }
.mk-hero-stage { position: relative; height: 190px; margin-top: 30px; perspective: 900px; }
.mk-hero-fl {
    position: absolute; border-radius: 12px; padding: 12px 14px; font-size: 11.5px; color: #E9F4EE; transform-style: preserve-3d;
    background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 30px 50px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.3);
}
.mk-hero-fl .t { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #A9CBB7; margin-bottom: 5px; }
.mk-hero-fl .k { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mk-hero-fl .bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); margin-top: 8px; overflow: hidden; }
.mk-hero-fl .bar i { display: block; height: 100%; background: linear-gradient(90deg, #5FD39A, #E6C27F); }
.mk-hero-fl .r { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.mk-hero-fl .r:last-child { border: 0; }
.mk-hero-fl b { font-weight: 500; font-variant-numeric: tabular-nums; }
.mk-hero-fl .chk { display: flex; align-items: center; gap: 6px; }
.mk-hero-fl .chk i { font-size: 17px; color: #7FE0AE; flex: none; }
.mk-hero-fl.f1 { left: 0; top: 10px; width: 210px; transform: rotateY(14deg) rotateX(6deg) translateZ(40px); animation: mk-bob 8s ease-in-out infinite .6s; }
.mk-hero-fl.f2 { left: 235px; top: 0; width: 180px; transform: rotateY(10deg) rotateX(10deg) translateZ(10px); animation: mk-bob 9s ease-in-out infinite 1.2s; }
.mk-hero-fl.f3 { left: 200px; top: 96px; width: 190px; transform: rotateY(18deg) rotateX(8deg); animation: mk-bob 7s ease-in-out infinite; }
@keyframes mk-bob { 50% { margin-top: -8px; } }
.mk-hero-card { position: relative; justify-self: end; width: 100%; max-width: 380px; border-radius: 18px; padding: 1px; background: linear-gradient(145deg, rgba(255,255,255,.7), rgba(255,255,255,.1) 40%, rgba(230,194,127,.55)); box-shadow: 0 40px 80px -24px rgba(0,0,0,.65); }
.mk-hero-card-in { border-radius: 17px; padding: 30px 30px 24px; background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,250,247,.95)); color: var(--mk-ink); }
.mk-hero-card .btn-primary, .mk-hero-card .mk-btn-primary { position: relative; overflow: hidden; }
.mk-hero-card .btn-primary::after, .mk-hero-card .mk-btn-primary::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: skewX(-20deg); animation: mk-shine 3.8s ease-in-out infinite;
}
@keyframes mk-shine { 60%, 100% { left: 130%; } }
.mk-hero-foot { position: absolute; left: 56px; bottom: 18px; font-size: 11px; color: #86AD97; }
@media (max-width: 899.98px) {
    .mk-hero-wrap { grid-template-columns: 1fr; padding: 32px 16px 64px; justify-items: center; }
    .mk-hero-left { display: none; }
    .mk-hero-floor { display: none; }
    .mk-hero-card { justify-self: center; }
    .mk-hero-card-in { padding: 24px 20px 20px; }
    .mk-hero-foot { left: 16px; right: 16px; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .mk-hero-mesh, .mk-hero-orb, .mk-hero-fl, .mk-hero-card .btn-primary::after, .mk-hero-card .mk-btn-primary::after { animation: none !important; }
}

/* auth form content (shared by split + hero) */
.mk-auth-ico {
    width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--mk-acc); margin-bottom: 16px;
    background: linear-gradient(145deg, #fff, var(--mk-acc-soft)); border: 1px solid var(--mk-line); box-shadow: 0 1px 2px rgba(16,32,22,.08), 0 6px 14px -6px rgba(16,32,22,.2), inset 0 1px 0 #fff;
}
.mk-auth-title { font-size: 20px; font-weight: 500; margin: 0 0 4px; letter-spacing: -.01em; color: var(--mk-ink); }
.mk-auth-subtitle { color: var(--mk-mute); font-size: 12.5px; margin: 0 0 14px; line-height: 1.45; }
.mk-auth-mobile-brand { display: none; align-items: center; gap: 9px; font-weight: 600; font-size: 11.5px; letter-spacing: .05em; color: var(--mk-ink); margin-bottom: 18px; }
@media (max-width: 899.98px) { .mk-auth-mobile-brand { display: flex; } }
.mk-auth-check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mk-mute); margin-top: 12px; cursor: pointer; }
.mk-auth-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--mk-acc); flex: none; }
.mk-auth-check a { color: var(--mk-acc); font-weight: 500; }
.mk-auth-actions { margin-top: 18px; }
.mk-auth-actions .mk-btn { height: 42px; }
.mk-auth-links { text-align: center; margin-top: 16px; font-size: 12px; color: var(--mk-mute); }
.mk-auth-links a, .mk-label a { color: var(--mk-acc); font-weight: 500; text-decoration: none; }
.mk-auth-links a:hover { text-decoration: underline; }
.mk-auth-secure { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 22px; font-size: 11px; color: var(--mk-faint); }
.mk-auth-secure i { font-size: 14px; }
.mk-auth-banner { margin-bottom: 12px; }
.mk-auth-banner .mk-tag { white-space: normal; display: block; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.mk-auth-ok { display: flex; gap: 10px; padding: 12px; margin-top: 16px; border-radius: 9px; background: var(--mk-acc-soft); border: 1px solid #C9DFD1; font-size: 12px; color: #2C4F3B; }
.mk-auth-ok i { font-size: 20px; color: var(--mk-acc); flex: none; }
.mk-auth-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.mk-input[data-readonly] input, .mk-input input[readonly] { color: var(--mk-mute); }

/* password strength meter */
.mk-strength { display: flex; align-items: center; gap: 5px; margin: 8px 0 2px; }
.mk-strength > i { flex: 1; height: 4px; border-radius: 2px; background: var(--mk-line-2); transition: background .2s ease; }
.mk-strength[data-level="1"] > i:nth-child(-n+1) { background: var(--mk-bad); }
.mk-strength[data-level="2"] > i:nth-child(-n+2) { background: var(--mk-warn); }
.mk-strength[data-level="3"] > i:nth-child(-n+3) { background: var(--mk-acc-2); }
.mk-strength[data-level="4"] > i:nth-child(-n+4) { background: var(--mk-acc); }
.mk-strength > span { flex: none; min-width: 42px; text-align: right; font-size: 11px; color: var(--mk-mute); }
@media (prefers-reduced-motion: reduce) { .mk-strength > i { transition: none; } }

/* 2FA screens: progress, countdown ring, backup-code alternate, QR, key, code grid */
.mk-steps { display: flex; gap: 6px; margin-bottom: 16px; }
.mk-steps > span { flex: 1; height: 4px; border-radius: 2px; background: var(--mk-line-2); }
.mk-steps > span.on { background: var(--mk-acc); }
.mk-totp { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mk-mute); margin-top: 8px; }
.mk-totp-ring { width: 16px; height: 16px; border-radius: 50%; flex: none; background: conic-gradient(var(--mk-acc) 0 65%, var(--mk-line-2) 65%); }
.mk-totp b { font-weight: 500; color: var(--mk-ink); font-variant-numeric: tabular-nums; }
.mk-alt { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--mk-line); border-radius: 8px; font-size: 12px; color: var(--mk-mute); }
.mk-alt > i { font-size: 18px; color: var(--mk-acc); flex: none; }
.mk-alt button { margin-left: auto; background: none; border: 0; padding: 0; color: var(--mk-acc); font: inherit; font-weight: 500; cursor: pointer; }
.mk-alt button:hover { text-decoration: underline; }
.mk-alt-panel { margin-top: 10px; }
.mk-alt-panel[hidden] { display: none; }
.mk-qrw { display: flex; gap: 16px; align-items: center; margin: 4px 0 6px; }
.mk-qr { width: 128px; height: 128px; flex: none; border-radius: 10px; border: 1px solid var(--mk-line); background: #fff; padding: 8px; box-shadow: 0 6px 14px -6px rgba(16,32,22,.2); overflow: hidden; }
.mk-qr svg, .mk-qr img { display: block; width: 100%; height: 100%; }
.mk-apps { font-size: 12px; color: var(--mk-mute); line-height: 1.6; min-width: 0; }
.mk-apps b { display: block; color: var(--mk-ink); font-weight: 500; }
.mk-key { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--mk-line); border-radius: 8px; background: var(--mk-bg-2); }
.mk-key code { flex: 1; min-width: 0; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; letter-spacing: .06em; color: var(--mk-ink); background: none; padding: 0; overflow-wrap: anywhere; }
.mk-key .mk-btn { height: 28px; padding: 0 10px; font-size: 11.5px; }
.mk-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.mk-codes span { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; background: var(--mk-bg-2); border: 1px solid var(--mk-line-2); border-radius: 6px; padding: 7px 4px; text-align: center; color: var(--mk-ink); }
.mk-btn-row { display: flex; gap: 8px; }
.mk-btn-row .mk-btn { flex: 1; }
@media (max-width: 420px) {
    .mk-qrw { flex-direction: column; align-items: flex-start; gap: 10px; }
    .mk-qr { width: 148px; height: 148px; }
}

.mk-linkbtn { background: none; border: 0; padding: 0; font: inherit; font-size: 12px; font-weight: 500; color: var(--mk-acc); cursor: pointer; }
.mk-linkbtn:hover { text-decoration: underline; }
.mk-linkbtn:focus-visible { outline: 0; box-shadow: var(--mk-ring); border-radius: 4px; }