/* ============================================================================
AUTO-GENERATED FILE — DO NOT EDIT BY HAND
Built from static/css/mx/*.css by scripts/build-mx-css.sh
Run `make assets-mx` after editing any partial.
============================================================================ */
/* ============================================================================
MAXON DESIGN SYSTEM v1.0
----------------------------------------------------------------------------
Production design system used across the student dashboard and the
diagnostic flow.
All components are scoped under `.mx` to prevent leaking into the rest of
the application (Django admin, third-party widgets). Apply `.mx` once on
a container and use the documented component classes inside.
Naming convention
-----------------
- Tokens are CSS custom properties prefixed with `--mx-`.
- Components are prefixed with `mx-` (e.g. `.mx-btn`, `.mx-card`).
- Modifiers are space-separated classes (`.mx-btn.mx-btn--primary`).
- States use the `is-` prefix where they can be toggled programmatically
(`.is-active`, `.is-loading`, `.is-disabled`).
============================================================================ */
/* ------------------------------------------------------------------ */
/* 0. FONT (single source of truth) */
/* ------------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap");
/* ------------------------------------------------------------------ */
/* 1. DESIGN TOKENS */
/* ------------------------------------------------------------------ */
.mx {
/* — Brand — */
--mx-primary: #6E56F8;
--mx-primary-2: #8B6BFF;
--mx-primary-d: #5A41E8;
--mx-primary-soft: #EEEBFF;
--mx-primary-100: #DCD5FE;
--mx-primary-glow: rgba(110, 86, 248, 0.18);
--mx-grad: linear-gradient(135deg, #8B6BFF, #5A41E8);
/* — Accent palette (playful) — */
--mx-pink: #FF5DA2;
--mx-pink-soft: #FFD9EC;
--mx-orange: #FF8A3D;
--mx-yellow: #FFC93C;
--mx-teal: #18C5B5;
--mx-sky: #3DA5FF;
--mx-sky-deep: #1A6BB8;
--mx-sky-soft: #E3F0FF;
--mx-lime: #57D06A;
/* — Status — */
--mx-success: #1FB873;
--mx-success-deep: #0E8A53;
--mx-success-soft: #E7FBF1;
--mx-success-100: #A8E8C8;
--mx-warning: #F7A916;
--mx-warning-deep: #9A6500;
--mx-warning-soft: #FFF6E3;
--mx-warning-100: #F7D88A;
--mx-danger: #FF4D6D;
--mx-danger-deep: #C81E45;
--mx-danger-soft: #FFEEF1;
--mx-danger-100: #FFC8D2;
/* — Ink (text) — */
--mx-ink: #241B4D; /* primary text */
--mx-ink-2: #5A5380; /* secondary text */
--mx-muted: #5A5380; /* alias for muted body copy */
--mx-muted-2: #9A93BE; /* tertiary / placeholder */
/* — Surfaces — */
--mx-bg: #FBF7FF;
--mx-card: #FFFFFF;
--mx-surface-alt: #F6F1FF;
--mx-border: #EBE4FF;
--mx-border-2: #DCD5FE;
/* — Sticker shadow anchors (used by primary/cta variants) — */
--mx-sh-primary: #4A33C9;
--mx-sh-success: #0E8A53;
--mx-sh-warning: #C98908;
--mx-sh-danger: #C81E45;
/* — Shadows (sticker physics: solid 2D offsets) — */
--mx-shadow-sm: 0 3px 0 var(--mx-border);
--mx-shadow-md: 0 4px 0 var(--mx-border);
--mx-shadow-lg: 0 6px 0 var(--mx-border);
--mx-shadow-xl: 0 8px 0 var(--mx-border);
/* — Radii — */
--mx-radius-xs: 8px;
--mx-radius-sm: 10px;
--mx-radius-md: 14px;
--mx-radius-lg: 18px;
--mx-radius-xl: 22px;
--mx-radius-2xl: 26px;
--mx-radius-pill: 999px;
/* — Spacing scale — */
--mx-space-1: 4px;
--mx-space-2: 8px;
--mx-space-3: 12px;
--mx-space-4: 16px;
--mx-space-5: 20px;
--mx-space-6: 24px;
--mx-space-8: 32px;
--mx-space-10: 40px;
--mx-space-12: 48px;
--mx-space-16: 64px;
/* — Typography — */
--mx-font: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mx-fs-xs: 11px;
--mx-fs-sm: 12px;
--mx-fs-base: 13px;
--mx-fs-md: 14px;
--mx-fs-lg: 15px;
--mx-fs-xl: 16px;
--mx-fs-2xl: 18px;
--mx-fs-3xl: 20px;
--mx-fs-4xl: 24px;
--mx-fs-5xl: 28px;
--mx-fs-6xl: 36px;
--mx-fw-regular: 500;
--mx-fw-medium: 600;
--mx-fw-semibold: 700;
--mx-fw-bold: 800;
--mx-fw-black: 900;
/* — Motion — */
--mx-spring: cubic-bezier(.34, 1.56, .64, 1);
--mx-ease-out: cubic-bezier(.22, .61, .36, 1);
--mx-dur-fast: 0.14s;
--mx-dur-base: 0.20s;
--mx-dur-slow: 0.30s;
/* — Layout primitives — */
--mx-header-h: 72px;
--mx-sidebar-w: 240px;
--mx-container: 1200px;
/* — Z-index scale — */
--mx-z-base: 0;
--mx-z-sticky: 10;
--mx-z-header: 30;
--mx-z-overlay: 40;
--mx-z-drawer: 50;
--mx-z-modal: 60;
--mx-z-toast: 70;
/* Base typography */
font-family: var(--mx-font);
color: var(--mx-ink);
font-size: var(--mx-fs-lg);
font-weight: var(--mx-fw-medium);
line-height: 1.5;
background: var(--mx-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mx *,
.mx *::before,
.mx *::after {
box-sizing: border-box;
}
/* ------------------------------------------------------------------ */
/* 2. PLAYFUL BACKGROUND (optional, used on main app shells) */
/* ------------------------------------------------------------------ */
.mx-bg-playful {
position: relative;
}
.mx-bg-playful::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(42% 38% at 85% 0%, rgba(255, 93, 162, .22), transparent 62%),
radial-gradient(40% 36% at 8% 6%, rgba(24, 197, 181, .20), transparent 62%),
radial-gradient(46% 42% at 50% 108%, rgba(110, 86, 248, .24), transparent 60%),
radial-gradient(30% 30% at 95% 70%, rgba(255, 201, 60, .18), transparent 60%);
}
.mx-bg-playful::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: .45;
background-image:
radial-gradient(circle, var(--mx-primary-100) 2px, transparent 2px),
radial-gradient(circle, var(--mx-pink-soft) 2px, transparent 2px);
background-size: 64px 64px, 64px 64px;
background-position: 0 0, 32px 32px;
-webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
mask-image: linear-gradient(180deg, #000, transparent 80%);
}
.mx-bg-playful > * { position: relative; z-index: 1; }
/* ------------------------------------------------------------------ */
/* 3. TYPOGRAPHY */
/* ------------------------------------------------------------------ */
.mx h1, .mx h2, .mx h3, .mx h4, .mx h5, .mx h6 {
font-family: var(--mx-font);
margin: 0;
}
.mx p, .mx ul, .mx ol { margin: 0; }
.mx-h1 { font-size: var(--mx-fs-5xl); font-weight: var(--mx-fw-black); color: var(--mx-ink); line-height: 1.15; letter-spacing: .2px; }
.mx-h2 { font-size: var(--mx-fs-3xl); font-weight: var(--mx-fw-bold); color: var(--mx-ink); line-height: 1.2; }
.mx-h3 { font-size: var(--mx-fs-xl); font-weight: var(--mx-fw-bold); color: var(--mx-ink); line-height: 1.3; }
.mx-h4 { font-size: var(--mx-fs-lg); font-weight: var(--mx-fw-bold); color: var(--mx-ink); line-height: 1.35; }
.mx-display { font-size: var(--mx-fs-6xl); font-weight: var(--mx-fw-black); line-height: 1.05; color: var(--mx-ink); letter-spacing: -0.01em; }
.mx-text-body { font-size: var(--mx-fs-md); color: var(--mx-ink); font-weight: var(--mx-fw-medium); }
.mx-text-muted { font-size: var(--mx-fs-md); color: var(--mx-muted); font-weight: var(--mx-fw-semibold); }
.mx-text-sm { font-size: var(--mx-fs-base);color: var(--mx-muted); font-weight: var(--mx-fw-semibold); }
.mx-text-xs { font-size: var(--mx-fs-xs); color: var(--mx-muted-2);font-weight: var(--mx-fw-bold); }
/* Eyebrow — small uppercase label used above headings */
.mx-eyebrow {
font-size: var(--mx-fs-xs);
font-weight: var(--mx-fw-bold);
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--mx-primary-d);
}
.mx-eyebrow.mx-eyebrow--muted { color: var(--mx-muted-2); }
.mx-eyebrow.mx-eyebrow--success { color: var(--mx-success-deep); }
.mx-eyebrow.mx-eyebrow--warning { color: var(--mx-warning-deep); }
.mx-eyebrow.mx-eyebrow--danger { color: var(--mx-danger-deep); }
/* Section label — column header */
.mx-section-label {
font-size: var(--mx-fs-xs);
font-weight: var(--mx-fw-bold);
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--mx-muted-2);
padding: 0 4px 8px;
}
/* Inline link */
.mx-link {
color: var(--mx-primary-d);
font-weight: var(--mx-fw-bold);
text-decoration: none;
border-bottom: 2px solid var(--mx-primary-100);
transition: border-color var(--mx-dur-fast) var(--mx-ease-out), color var(--mx-dur-fast) var(--mx-ease-out);
}
.mx-link:hover { color: var(--mx-primary); border-color: var(--mx-primary); }
/* ------------------------------------------------------------------ */
/* 4. BUTTONS */
/* ------------------------------------------------------------------ */
/* Base */
.mx-btn {
--_btn-bg: #fff;
--_btn-fg: var(--mx-primary-d);
--_btn-bd: var(--mx-border);
--_btn-sh: var(--mx-border);
font-family: var(--mx-font);
font-size: var(--mx-fs-base);
font-weight: var(--mx-fw-bold);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
border: 2px solid var(--_btn-bd);
background: var(--_btn-bg);
color: var(--_btn-fg);
border-radius: var(--mx-radius-md);
box-shadow: 0 4px 0 var(--_btn-sh);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
transition:
transform var(--mx-dur-slow) var(--mx-ease-out),
box-shadow var(--mx-dur-slow) var(--mx-ease-out),
background var(--mx-dur-fast) var(--mx-ease-out),
color var(--mx-dur-fast) var(--mx-ease-out);
user-select: none;
}
.mx-btn:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--_btn-sh); }
.mx-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--_btn-sh); transition-duration: var(--mx-dur-fast); }
.mx-btn:focus-visible { outline: none; box-shadow: 0 4px 0 var(--_btn-sh), 0 0 0 4px var(--mx-primary-glow); }
.mx-btn[disabled],
.mx-btn.is-disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none !important;
box-shadow: 0 4px 0 var(--_btn-sh) !important;
}
/* Variants */
.mx-btn--primary {
--_btn-bg: var(--mx-grad);
--_btn-fg: #fff;
--_btn-bd: transparent;
--_btn-sh: var(--mx-sh-primary);
border-color: transparent;
}
.mx-btn--success {
--_btn-bg: linear-gradient(135deg, #6BE07C, var(--mx-success));
--_btn-fg: #fff;
--_btn-bd: transparent;
--_btn-sh: var(--mx-sh-success);
border-color: transparent;
}
.mx-btn--danger {
--_btn-bg: linear-gradient(135deg, #FF7A92, var(--mx-danger));
--_btn-fg: #fff;
--_btn-bd: transparent;
--_btn-sh: var(--mx-sh-danger);
border-color: transparent;
}
.mx-btn--warning {
--_btn-bg: linear-gradient(135deg, #FFD66E, var(--mx-warning));
--_btn-fg: #fff;
--_btn-bd: transparent;
--_btn-sh: var(--mx-sh-warning);
border-color: transparent;
}
.mx-btn--secondary { /* white sticker with primary text */
--_btn-bg: #fff;
--_btn-fg: var(--mx-primary-d);
--_btn-bd: var(--mx-border);
--_btn-sh: var(--mx-border);
}
.mx-btn--outline { /* hollow primary */
--_btn-bg: transparent;
--_btn-fg: var(--mx-primary-d);
--_btn-bd: var(--mx-primary-100);
--_btn-sh: var(--mx-primary-100);
}
.mx-btn--ghost {
--_btn-bg: transparent;
--_btn-fg: var(--mx-muted);
--_btn-bd: transparent;
--_btn-sh: transparent;
box-shadow: none;
}
.mx-btn--ghost:hover { background: rgba(36, 27, 77, .05); box-shadow: none; transform: none; }
.mx-btn--ghost:active { background: rgba(36, 27, 77, .08); box-shadow: none; transform: none; }
.mx-btn--link {
--_btn-bg: transparent;
--_btn-fg: var(--mx-primary-d);
--_btn-bd: transparent;
--_btn-sh: transparent;
padding: 4px 6px;
box-shadow: none;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 2px;
text-decoration-color: var(--mx-primary-100);
}
.mx-btn--link:hover { transform: none; box-shadow: none; text-decoration-color: var(--mx-primary); }
.mx-btn--link:active { transform: none; box-shadow: none; }
/* Sizes */
.mx-btn--xs { padding: 6px 10px; font-size: var(--mx-fs-xs); border-radius: var(--mx-radius-sm); }
.mx-btn--sm { padding: 8px 12px; font-size: var(--mx-fs-sm); border-radius: var(--mx-radius-md); }
.mx-btn--md { /* default */ }
.mx-btn--lg { padding: 13px 20px; font-size: var(--mx-fs-lg); border-radius: var(--mx-radius-lg); box-shadow: 0 6px 0 var(--_btn-sh); }
.mx-btn--lg:hover { box-shadow: 0 5px 0 var(--_btn-sh); }
.mx-btn--lg:active { box-shadow: 0 2px 0 var(--_btn-sh); }
.mx-btn--xl { padding: 17px 24px; font-size: var(--mx-fs-xl); border-radius: var(--mx-radius-lg); box-shadow: 0 7px 0 var(--_btn-sh); }
.mx-btn--xl:hover { box-shadow: 0 6px 0 var(--_btn-sh); }
.mx-btn--xl:active { box-shadow: 0 2px 0 var(--_btn-sh); transform: translateY(5px); }
/* Full width */
.mx-btn--block { width: 100%; }
/* Icon-only button (square) */
.mx-btn--icon { width: 42px; height: 42px; padding: 0; border-radius: var(--mx-radius-md); }
.mx-btn--icon.mx-btn--sm { width: 34px; height: 34px; }
.mx-btn--icon.mx-btn--lg { width: 50px; height: 50px; border-radius: var(--mx-radius-lg); }
.mx-btn--icon.mx-btn--xl { width: 54px; height: 54px; border-radius: var(--mx-radius-lg); }
/* Loading state — spinning arc (universally recognized) */
.mx-btn { position: relative; }
.mx-btn.is-loading { pointer-events: none; opacity: 0.92; cursor: progress; }
.mx-btn.is-loading .mx-btn__label { visibility: hidden; }
.mx-btn.is-loading::after {
content: "";
position: absolute;
left: 50%; top: 50%;
width: 20px; height: 20px;
margin: -10px 0 0 -10px;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.30);
border-top-color: #fff;
animation: mx-spin 0.7s linear infinite;
}
/* Light variants — primary-tinted spinner */
.mx-btn--secondary.is-loading::after,
.mx-btn--outline.is-loading::after,
.mx-btn--ghost.is-loading::after,
.mx-btn--link.is-loading::after {
border-color: var(--mx-primary-100);
border-top-color: var(--mx-primary);
}
.mx-btn--xs.is-loading::after,
.mx-btn--sm.is-loading::after {
width: 14px; height: 14px;
margin: -7px 0 0 -7px;
border-width: 2px;
}
.mx-btn--xl.is-loading::after {
width: 26px; height: 26px;
margin: -13px 0 0 -13px;
border-width: 4px;
}
/* Button group (segmented) */
.mx-btn-group {
display: inline-flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
/* Floating action button — sticky CTA on mobile */
.mx-fab {
position: fixed;
right: 18px; bottom: 18px;
width: 56px; height: 56px;
border-radius: 50%;
background: var(--mx-grad);
color: #fff;
display: grid; place-items: center;
border: 0;
box-shadow: 0 8px 0 var(--mx-sh-primary), 0 14px 24px rgba(110, 86, 248, .35);
cursor: pointer;
z-index: var(--mx-z-overlay);
transition: transform var(--mx-dur-slow) var(--mx-ease-out), box-shadow var(--mx-dur-slow) var(--mx-ease-out);
}
.mx-fab:hover { transform: translateY(1px); box-shadow: 0 6px 0 var(--mx-sh-primary), 0 12px 22px rgba(110, 86, 248, .35); }
.mx-fab:active { transform: translateY(3px); box-shadow: 0 4px 0 var(--mx-sh-primary), 0 8px 14px rgba(110, 86, 248, .3); transition-duration: var(--mx-dur-fast); }
/* ------------------------------------------------------------------ */
/* 5. FORM CONTROLS */
/* ------------------------------------------------------------------ */
.mx-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.mx-label {
font-size: var(--mx-fs-base);
font-weight: var(--mx-fw-bold);
color: var(--mx-ink);
}
.mx-label .mx-label__opt { color: var(--mx-muted-2); font-weight: var(--mx-fw-semibold); margin-left: 6px; font-size: var(--mx-fs-xs); }
.mx-help { font-size: var(--mx-fs-sm); color: var(--mx-muted-2); font-weight: var(--mx-fw-semibold); }
.mx-help--error { color: var(--mx-danger-deep); }
.mx-help--success { color: var(--mx-success-deep); }
/* Text input + textarea + select share one visual style */
.mx-input {
width: 100%;
font-family: var(--mx-font);
font-size: var(--mx-fs-lg);
font-weight: var(--mx-fw-semibold);
color: var(--mx-ink);
background: #FBF9FF;
border: 2px solid var(--mx-border);
border-radius: var(--mx-radius-md);
padding: 12px 14px;
outline: none;
transition:
border-color var(--mx-dur-fast) var(--mx-ease-out),
background var(--mx-dur-fast) var(--mx-ease-out),
box-shadow var(--mx-dur-fast) var(--mx-ease-out);
}
.mx-input::placeholder { color: var(--mx-muted-2); font-weight: var(--mx-fw-medium); }
.mx-input:hover { border-color: var(--mx-border-2); }
.mx-input:focus { border-color: var(--mx-primary); background: #fff; box-shadow: 0 0 0 3px var(--mx-primary-glow); }
.mx-input[disabled] {
background: var(--mx-surface-alt); color: var(--mx-muted-2);
cursor: not-allowed; border-style: dashed;
}
.mx-input.is-error { border-color: var(--mx-danger); box-shadow: 0 0 0 3px rgba(255, 77, 109, .18); }
.mx-input.is-success { border-color: var(--mx-success); box-shadow: 0 0 0 3px rgba(31, 184, 115, .15); }
/* Sizes */
.mx-input--sm { padding: 8px 12px; font-size: var(--mx-fs-base); border-radius: var(--mx-radius-sm); }
.mx-input--lg { padding: 16px 18px; font-size: var(--mx-fs-xl); border-radius: var(--mx-radius-lg); }
/* Textarea */
.mx-textarea {
min-height: 96px;
resize: vertical;
line-height: 1.5;
}
/* Select — keep native widget, give it our chrome and a custom chevron */
.mx-select {
appearance: none;
-webkit-appearance: none;
padding-right: 38px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 14px;
cursor: pointer;
}
/* Input with leading / trailing icon */
.mx-input-group {
position: relative;
display: flex;
align-items: center;
}
.mx-input-group .mx-input { padding-left: 42px; }
.mx-input-group--trailing .mx-input { padding-left: 14px; padding-right: 42px; }
.mx-input-group__icon {
position: absolute;
left: 14px;
width: 18px; height: 18px;
color: var(--mx-muted-2);
pointer-events: none;
}
.mx-input-group--trailing .mx-input-group__icon { left: auto; right: 14px; }
/* Search input */
.mx-search { /* alias — same as `.mx-input` with leading icon */ }
/* Checkbox + radio + switch — custom-styled with smooth, calm animations */
.mx-check, .mx-radio, .mx-switch {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--mx-fs-md);
font-weight: var(--mx-fw-semibold);
color: var(--mx-ink);
cursor: pointer;
user-select: none;
}
.mx-check input, .mx-radio input, .mx-switch input {
position: absolute; opacity: 0; pointer-events: none;
}
/* ---- Checkbox + Radio shared box ---- */
.mx-check__box, .mx-radio__box {
position: relative;
width: 24px; height: 24px;
flex: none;
background: #fff;
border: 2px solid var(--mx-border-2);
box-shadow: inset 0 -2px 0 rgba(36, 27, 77, .04);
transition:
background .25s var(--mx-ease-out),
border-color .2s var(--mx-ease-out);
}
.mx-check__box { border-radius: 8px; }
.mx-radio__box { border-radius: 50%; }
.mx-check:hover .mx-check__box,
.mx-radio:hover .mx-radio__box { border-color: var(--mx-primary-100); }
/* Checked state — gradient fill */
.mx-check input:checked + .mx-check__box,
.mx-radio input:checked + .mx-radio__box,
.mx-option input[type="checkbox"]:checked + .mx-check__box,
.mx-option input[type="radio"]:checked + .mx-radio__box {
background: var(--mx-grad);
border-color: var(--mx-primary);
box-shadow:
inset 0 -2px 0 rgba(36, 27, 77, .15),
0 3px 8px rgba(110, 86, 248, .28);
}
/* Checkbox tick — white SVG that grows from 0 → 16px (centered, transition on width/height) */
.mx-check__box::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 0; height: 0;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='%23ffffff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
transform: translate(-50%, -50%);
transition: width .35s var(--mx-spring), height .35s var(--mx-spring);
}
.mx-check input:checked + .mx-check__box::after,
.mx-option input[type="checkbox"]:checked + .mx-check__box::after {
width: 16px;
height: 16px;
}
/* Radio dot — same pattern, white circle that scales in */
.mx-radio__box::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 0; height: 0;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width .3s var(--mx-spring), height .3s var(--mx-spring);
}
.mx-radio input:checked + .mx-radio__box::after,
.mx-option input[type="radio"]:checked + .mx-radio__box::after {
width: 10px;
height: 10px;
}
/* Focus + disabled */
.mx-check input:focus-visible + .mx-check__box,
.mx-radio input:focus-visible + .mx-radio__box {
box-shadow: 0 0 0 4px var(--mx-primary-glow);
}
.mx-check input[disabled] + .mx-check__box,
.mx-radio input[disabled] + .mx-radio__box,
.mx-switch input[disabled] + .mx-switch__track {
opacity: 0.5; cursor: not-allowed;
}
/* ---- Switch — single transform-based knob, no width morph (zero layout thrash) ---- */
.mx-switch__track {
position: relative;
width: 48px; height: 28px;
background: var(--mx-border);
border: 2px solid var(--mx-border-2);
border-radius: 999px;
box-shadow: inset 0 -2px 0 rgba(36, 27, 77, .04);
transition: background .22s var(--mx-ease-out), border-color .22s var(--mx-ease-out);
}
.mx-switch__track::after {
content: "";
position: absolute;
top: 50%; left: 2px;
width: 20px; height: 20px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 4px rgba(36, 27, 77, .25);
transform: translate(0, -50%);
transition: transform .25s var(--mx-ease-out);
will-change: transform;
}
.mx-switch input:checked + .mx-switch__track {
background: var(--mx-grad);
border-color: transparent;
box-shadow:
inset 0 -2px 0 rgba(36, 27, 77, .12),
0 3px 8px rgba(110, 86, 248, .28);
}
.mx-switch input:checked + .mx-switch__track::after {
transform: translate(20px, -50%);
}
.mx-switch input:focus-visible + .mx-switch__track {
box-shadow: 0 0 0 4px var(--mx-primary-glow);
}
/* Selectable option card (used in diagnostic + onboarding) */
.mx-option {
display: flex;
align-items: center;
gap: 13px;
width: 100%;
padding: 14px 16px;
border: 2px solid var(--mx-border);
border-radius: var(--mx-radius-md);
background: #fff;
color: var(--mx-ink);
font-size: var(--mx-fs-lg);
font-weight: var(--mx-fw-bold);
box-shadow: 0 4px 0 var(--mx-border);
cursor: pointer;
transition:
transform var(--mx-dur-slow) var(--mx-ease-out),
border-color var(--mx-dur-fast),
background var(--mx-dur-fast),
box-shadow var(--mx-dur-slow) var(--mx-ease-out);
text-align: left;
}
.mx-option:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--mx-border); border-color: var(--mx-primary-100); }
.mx-option:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--mx-border); transition-duration: var(--mx-dur-fast); }
.mx-option.is-selected {
border-color: var(--mx-primary);
background: var(--mx-primary-soft);
box-shadow: 0 4px 0 var(--mx-primary-100);
animation: mx-bounce .35s var(--mx-spring);
}
.mx-option.is-correct {
border-color: var(--mx-success);
background: var(--mx-success-soft);
box-shadow: 0 4px 0 var(--mx-success-100);
}
.mx-option.is-wrong {
border-color: var(--mx-danger);
background: var(--mx-danger-soft);
box-shadow: 0 4px 0 var(--mx-danger-100);
}
@keyframes mx-bounce {
0% { transform: scale(.96); }
60% { transform: scale(1.03); }
100% { transform: scale(1); }
}
/* ------------------------------------------------------------------ */
/* 6. CARDS & SURFACES */
/* ------------------------------------------------------------------ */
.mx-card {
background: var(--mx-card);
border: 2px solid var(--mx-border);
border-radius: var(--mx-radius-xl);
box-shadow: var(--mx-shadow-lg);
}
.mx-card--pad { padding: 22px; }
.mx-card--padlg { padding: 28px; }
.mx-card--interactive {
cursor: pointer;
transition: transform var(--mx-dur-slow) var(--mx-ease-out), box-shadow var(--mx-dur-slow) var(--mx-ease-out);
}
.mx-card--interactive:hover { transform: translateY(1px); box-shadow: 0 4px 0 var(--mx-border); }
.mx-card--interactive:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--mx-border); transition-duration: var(--mx-dur-fast); }
/* Tonal cards */
.mx-card--success { background: var(--mx-success-soft); border-color: var(--mx-success-100); box-shadow: 0 6px 0 var(--mx-success-100); }
.mx-card--warning { background: var(--mx-warning-soft); border-color: var(--mx-warning-100); box-shadow: 0 6px 0 var(--mx-warning-100); }
.mx-card--danger { background: var(--mx-danger-soft); border-color: var(--mx-danger-100); box-shadow: 0 6px 0 var(--mx-danger-100); }
.mx-card--primary { background: var(--mx-primary-soft); border-color: var(--mx-primary-100); box-shadow: 0 6px 0 var(--mx-primary-100); }
.mx-card--dark {
background: var(--mx-ink); color: #fff;
border-color: transparent; box-shadow: 0 6px 0 rgba(36, 27, 77, .35);
}
.mx-card--dark .mx-h1,
.mx-card--dark .mx-h2,
.mx-card--dark .mx-h3 { color: #fff; }
.mx-card--dark .mx-text-muted { color: rgba(255, 255, 255, .7); }
.mx-card__head {
display: flex; justify-content: space-between; align-items: center;
gap: 12px;
padding: 16px 22px;
border-bottom: 2px solid var(--mx-border);
}
.mx-card__body { padding: 22px; }
.mx-card__foot {
padding: 14px 22px;
border-top: 2px dashed var(--mx-border);
display: flex; justify-content: flex-end; gap: 10px;
}
/* Divider */
.mx-divider {
height: 0; border: 0;
border-top: 2px dashed var(--mx-border);
margin: 16px 0;
}
.mx-divider--solid { border-top-style: solid; }
/* ------------------------------------------------------------------ */
/* 7. PILLS, CHIPS, BADGES, TAGS */
/* ------------------------------------------------------------------ */
/* Pill — uppercase, brand-tinted (used for status labels) */
.mx-pill {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--mx-font);
font-size: var(--mx-fs-xs);
font-weight: var(--mx-fw-bold);
letter-spacing: 0.07em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: var(--mx-radius-pill);
border: 2px solid transparent;
white-space: nowrap;
background: #fff;
color: var(--mx-primary-d);
border-color: var(--mx-primary-100);
}
.mx-pill--primary { background: var(--mx-primary-soft); color: var(--mx-primary-d); border-color: var(--mx-primary-100); }
.mx-pill--success { background: var(--mx-success-soft); color: var(--mx-success-deep); border-color: var(--mx-success-100); }
.mx-pill--warning { background: var(--mx-warning-soft); color: var(--mx-warning-deep); border-color: var(--mx-warning-100); }
.mx-pill--danger { background: var(--mx-danger-soft); color: var(--mx-danger-deep); border-color: var(--mx-danger-100); }
.mx-pill--muted { background: #fff; color: var(--mx-ink-2); border-color: var(--mx-border); }
.mx-pill--solid { background: var(--mx-ink); color: #fff; border-color: transparent; }
/* Chip — neutral, sentence case */
.mx-chip {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--mx-fs-sm);
font-weight: var(--mx-fw-bold);
padding: 5px 11px;
background: #fff;
color: var(--mx-ink-2);
border-radius: var(--mx-radius-pill);
border: 2px solid var(--mx-border);
}
.mx-chip--primary { background: var(--mx-primary-soft); color: var(--mx-primary-d); border-color: var(--mx-primary-100); }
.mx-chip--success { background: var(--mx-success-soft); color: var(--mx-success-deep); border-color: var(--mx-success-100); }
.mx-chip--warning { background: var(--mx-warning-soft); color: var(--mx-warning-deep); border-color: var(--mx-warning-100); }
.mx-chip--danger { background: var(--mx-danger-soft); color: var(--mx-danger-deep); border-color: var(--mx-danger-100); }
/* Badge — small numeric counter (e.g. notifications) */
.mx-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 22px; height: 22px; padding: 0 7px;
font-size: var(--mx-fs-xs);
font-weight: var(--mx-fw-bold);
background: var(--mx-danger); color: #fff;
border-radius: var(--mx-radius-pill);
}
.mx-badge--neutral { background: var(--mx-border); color: var(--mx-ink-2); }
.mx-badge--success { background: var(--mx-success); color: #fff; }
.mx-badge--warning { background: var(--mx-warning); color: #fff; }
.mx-badge--soft { background: var(--mx-danger-soft); color: var(--mx-danger-deep); }
/* Dot — tiny status indicator */
.mx-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mx-muted-2); }
.mx-dot--primary { background: var(--mx-primary); }
.mx-dot--success { background: var(--mx-success); }
.mx-dot--warning { background: var(--mx-warning); }
.mx-dot--danger { background: var(--mx-danger); }
.mx-dot--pulse { animation: mx-pulse 1.6s ease-in-out infinite; }
@keyframes mx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* ------------------------------------------------------------------ */
/* 8. TABS (segmented control) */
/* ------------------------------------------------------------------ */
.mx-tabs {
display: inline-flex;
background: var(--mx-primary-soft);
border-radius: var(--mx-radius-md);
padding: 4px;
gap: 2px;
border: 2px solid var(--mx-border);
}
.mx-tabs > * {
border: 0;
background: transparent;
font-family: var(--mx-font);
font-size: var(--mx-fs-base);
font-weight: var(--mx-fw-bold);
padding: 7px 14px;
border-radius: var(--mx-radius-sm);
color: var(--mx-muted-2);
cursor: pointer;
text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
transition: all var(--mx-dur-base) var(--mx-ease-out);
}
.mx-tabs > .is-active,
.mx-tabs > [aria-current="page"] {
background: #fff;
color: var(--mx-ink);
box-shadow: 0 3px 0 var(--mx-border);
}
.mx-tabs > .is-pending {
background: transparent;
color: var(--mx-muted-2);
border: 2px dashed var(--mx-border-2);
}
/* Underlined tab variant */
.mx-tabs--underline {
background: transparent;
border: 0;
border-bottom: 2px solid var(--mx-border);
border-radius: 0;
padding: 0;
gap: 4px;
}
.mx-tabs--underline > * {
border-radius: 0;
padding: 12px 6px;
margin-bottom: -2px;
border-bottom: 3px solid transparent;
color: var(--mx-muted);
background: transparent;
}
.mx-tabs--underline > .is-active {
background: transparent;
color: var(--mx-primary-d);
border-bottom-color: var(--mx-primary);
box-shadow: none;
}
/* ------------------------------------------------------------------ */
/* 9. PROGRESS */
/* ------------------------------------------------------------------ */
.mx-progress {
height: 8px;
background: var(--mx-border);
border-radius: var(--mx-radius-pill);
overflow: hidden;
}
.mx-progress__fill {
height: 100%;
background: var(--mx-grad);
border-radius: var(--mx-radius-pill);
transition: width 0.7s var(--mx-ease-out);
}
.mx-progress--success .mx-progress__fill { background: linear-gradient(90deg, #6BE07C, var(--mx-success)); }
.mx-progress--warning .mx-progress__fill { background: linear-gradient(90deg, #FFD66E, var(--mx-warning)); }
.mx-progress--danger .mx-progress__fill { background: linear-gradient(90deg, #FF7A92, var(--mx-danger)); }
.mx-progress--lg { height: 13px; border: 2px solid var(--mx-border); }
.mx-progress--lg .mx-progress__fill {
position: relative; overflow: hidden;
}
.mx-progress--lg .mx-progress__fill::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
transform: translateX(-100%);
animation: mx-sheen 1.3s linear infinite;
}
@keyframes mx-sheen { to { transform: translateX(240%); } }
/* Progress level-map (used in diagnostic) */
.mx-levelmap {
display: flex;
align-items: center;
gap: 0;
}
.mx-levelmap__node {
width: 34px; height: 34px;
flex: none;
display: grid; place-items: center;
font-weight: var(--mx-fw-bold);
font-size: var(--mx-fs-md);
background: #fff;
color: var(--mx-muted-2);
border: 3px solid var(--mx-border);
border-radius: 50%;
box-shadow: 0 3px 0 var(--mx-border);
}
.mx-levelmap__node.is-done {
background: var(--mx-lime);
color: #fff;
border-color: var(--mx-success-deep);
box-shadow: 0 3px 0 var(--mx-success-deep);
}
.mx-levelmap__node.is-current {
background: var(--mx-grad);
color: #fff;
border-color: var(--mx-sh-primary);
box-shadow: 0 0 0 6px var(--mx-primary-soft);
animation: mx-throb 1.4s ease-in-out infinite;
}
.mx-levelmap__seg {
flex: 1;
height: 5px;
background: var(--mx-border);
border-radius: 3px;
margin: 0 5px;
}
.mx-levelmap__seg.is-done { background: var(--mx-lime); }
@keyframes mx-throb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* Section chip (per-block progress card) */
.mx-section-chip {
flex: 1;
display: flex; flex-direction: column; gap: 7px;
padding: 10px 12px;
border-radius: var(--mx-radius-md);
border: 2px solid var(--mx-border);
background: #fff;
box-shadow: var(--mx-shadow-md);
transition: transform var(--mx-dur-slow) var(--mx-ease-out), box-shadow var(--mx-dur-slow) var(--mx-ease-out);
text-decoration: none;
color: inherit;
min-width: 0;
}
.mx-section-chip:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--mx-border); }
.mx-section-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--mx-border); transition-duration: var(--mx-dur-fast); }
.mx-section-chip.is-done { background: var(--mx-success-soft); border-color: var(--mx-success-100); box-shadow: 0 4px 0 var(--mx-success-100); }
.mx-section-chip.is-active { background: var(--mx-primary-soft); border-color: var(--mx-primary); box-shadow: 0 4px 0 var(--mx-primary-100); }
.mx-section-chip.is-warning { background: var(--mx-warning-soft); border-color: var(--mx-warning-100); box-shadow: 0 4px 0 var(--mx-warning-100); }
.mx-section-chip__row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.mx-section-chip__name { font-size: var(--mx-fs-base); font-weight: var(--mx-fw-bold); color: var(--mx-ink); }
.mx-section-chip__count { font-size: var(--mx-fs-sm); color: var(--mx-muted-2); font-weight: var(--mx-fw-semibold); }
.mx-section-chip__bar { height: 6px; border-radius: var(--mx-radius-pill); background: var(--mx-border); overflow: hidden; }
.mx-section-chip__bar > i { display: block; height: 100%; border-radius: var(--mx-radius-pill); background: var(--mx-muted-2); }
.mx-section-chip.is-done .mx-section-chip__name { color: var(--mx-success-deep); }
.mx-section-chip.is-active .mx-section-chip__name { color: var(--mx-primary-d); }
.mx-section-chip.is-done .mx-section-chip__bar > i { background: var(--mx-success); }
.mx-section-chip.is-active .mx-section-chip__bar > i { background: var(--mx-primary); }
/* ------------------------------------------------------------------ */
/* 10. AVATARS / ICONS / BRAND */
/* ------------------------------------------------------------------ */
.mx-avatar {
height: 38px; width: 38px;
border-radius: 13px;
background: var(--mx-primary-soft);
border: 2px solid var(--mx-primary-100);
color: var(--mx-primary-d);
font-weight: var(--mx-fw-black);
font-size: var(--mx-fs-md);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
object-fit: cover;
overflow: hidden;
}
.mx-avatar--sm { height: 28px; width: 28px; border-radius: 10px; font-size: var(--mx-fs-sm); }
.mx-avatar--lg { height: 52px; width: 52px; border-radius: 16px; font-size: var(--mx-fs-xl); }
.mx-avatar--xl { height: 72px; width: 72px; border-radius: 20px; font-size: var(--mx-fs-3xl); }
.mx-avatar--round { border-radius: 50%; }
.mx-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Avatar stack */
.mx-avatars { display: inline-flex; align-items: center; }
.mx-avatars > .mx-avatar { box-shadow: 0 0 0 3px var(--mx-card); }
.mx-avatars > .mx-avatar + .mx-avatar { margin-left: -10px; }
/* Brand mark (logo cube) */
.mx-brandmark {
height: 38px; width: 38px;
border-radius: 13px;
background: var(--mx-grad);
color: #fff;
display: grid; place-items: center;
font-weight: var(--mx-fw-black);
font-size: var(--mx-fs-2xl);
box-shadow: 0 5px 0 var(--mx-sh-primary);
}
.mx-brandmark--lg { height: 52px; width: 52px; border-radius: 16px; font-size: var(--mx-fs-3xl); box-shadow: 0 6px 0 var(--mx-sh-primary); }
/* Icon tile (used in rows/tasks) */
.mx-itile {
width: 30px; height: 30px;
border-radius: var(--mx-radius-sm);
background: var(--mx-primary-soft);
color: var(--mx-primary-d);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mx-itile--lg { width: 38px; height: 38px; border-radius: 12px; }
.mx-itile--success { background: var(--mx-success-soft); color: var(--mx-success-deep); }
.mx-itile--warning { background: var(--mx-warning-soft); color: var(--mx-warning-deep); }
.mx-itile--danger { background: var(--mx-danger-soft); color: var(--mx-danger-deep); }
.mx-itile--sky { background: var(--mx-sky-soft); color: var(--mx-sky-deep); }
.mx-itile--muted { background: var(--mx-border); color: var(--mx-muted); }
.mx-itile--bordered { border: 2px solid currentColor; opacity: 0.85; }
/* ------------------------------------------------------------------ */
/* Icons (inline SVG in the Tabler Icons stroke style) */
/* ------------------------------------------------------------------ */
/* All UI icons MUST be inline SVG — never emoji or text glyphs.
Use Tabler Icons (https://tabler.io/icons) as the base set.
Convention:
Color and stroke inherit from the parent (currentColor), so an icon
placed inside .mx-itile--success automatically takes the success tint. */
.mx-icon {
display: inline-block;
flex-shrink: 0;
vertical-align: -0.125em;
}
.mx-icon--filled { fill: currentColor; stroke: none; }
/* ------------------------------------------------------------------ */
/* 11. LAYOUT — Header, Sidebar, Footer */
/* ------------------------------------------------------------------ */
/* App shell */
.mx-shell {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.mx-shell__main { flex: 1; display: flex; min-height: 0; }
/* Header */
.mx-header {
height: var(--mx-header-h);
display: flex; align-items: center;
padding: 0 16px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 2px solid var(--mx-border);
position: sticky; top: 0;
z-index: var(--mx-z-header);
}
@media (min-width: 1024px) {
.mx-header { padding: 0 24px; }
}
/* Sidebar */
.mx-sidebar {
width: var(--mx-sidebar-w);
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-right: 2px solid var(--mx-border);
padding: 16px 12px;
display: flex; flex-direction: column;
flex-shrink: 0;
}
/* Fixed app-shell sidebar: sits below the sticky header on desktop.
Mobile drawer keeps its own top via the partial's Tailwind classes. */
@media (min-width: 1024px) {
.mx .mx-sidebar.is-fixed {
position: fixed; left: 0; bottom: 0;
top: var(--mx-header-h);
}
}
/* Nav item */
.mx-nav-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
border-radius: var(--mx-radius-md);
font-size: var(--mx-fs-lg);
font-weight: var(--mx-fw-semibold);
color: var(--mx-ink-2);
border: 2px solid transparent;
text-decoration: none;
transition: transform .18s var(--mx-ease-out), background var(--mx-dur-fast), color var(--mx-dur-fast);
}
.mx-nav-item:hover { background: #fff; color: var(--mx-ink); transform: translateX(2px); }
.mx-nav-item.is-active {
background: var(--mx-primary-soft);
color: var(--mx-primary-d);
border-color: var(--mx-primary-100);
box-shadow: 0 4px 0 var(--mx-primary-100);
}
.mx-nav-item.is-disabled { color: var(--mx-muted-2); cursor: not-allowed; opacity: 0.7; }
.mx-nav-item .mx-nav-item__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--mx-muted-2); display: grid; place-items: center; }
.mx-nav-item.is-active .mx-nav-item__icon { color: var(--mx-primary-d); }
.mx-nav-item .mx-nav-item__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-nav-item .mx-nav-item__suffix { margin-left: auto; }
/* Footer */
.mx-footer {
border-top: 2px solid var(--mx-border);
background: rgba(255, 255, 255, 0.5);
padding: 18px 24px;
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
color: var(--mx-muted);
font-size: var(--mx-fs-base);
font-weight: var(--mx-fw-semibold);
}
.mx-footer a { color: var(--mx-muted); text-decoration: none; }
.mx-footer a:hover { color: var(--mx-ink); }
/* ------------------------------------------------------------------ */
/* 12. ROWS, LIST ITEMS, TASKS */
/* ------------------------------------------------------------------ */
/* Stat row (dashed-separated lines) */
.mx-row {
display: flex; align-items: center; gap: 11px;
padding: 12px 0;
border-top: 2px dashed var(--mx-border);
font-size: var(--mx-fs-md);
}
.mx-row:first-child { border-top: 0; }
.mx-row__label { color: var(--mx-muted); font-size: var(--mx-fs-base); font-weight: var(--mx-fw-semibold); }
.mx-row__value { color: var(--mx-ink); font-weight: var(--mx-fw-bold); margin-left: auto; }
/* Task / list-item card */
.mx-task {
display: flex; align-items: center; gap: 12px;
padding: 13px 15px;
border-radius: var(--mx-radius-lg);
background: #fff;
border: 2px solid var(--mx-border);
box-shadow: var(--mx-shadow-md);
text-decoration: none;
color: inherit;
cursor: pointer;
transition: transform var(--mx-dur-slow) var(--mx-ease-out), box-shadow var(--mx-dur-slow) var(--mx-ease-out);
}
.mx-task:hover { transform: translateY(1px); box-shadow: 0 3px 0 var(--mx-border); }
.mx-task:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--mx-border); transition-duration: var(--mx-dur-fast); }
.mx-task.is-disabled,
.mx-task[disabled] { opacity: 0.65; cursor: not-allowed; transform: none !important; box-shadow: var(--mx-shadow-md) !important; }
.mx-task--priority { border-color: var(--mx-danger-100); background: var(--mx-danger-soft); box-shadow: 0 4px 0 var(--mx-danger-100); }
.mx-task--priority:hover { box-shadow: 0 3px 0 var(--mx-danger-100); }
.mx-task__title { font-size: var(--mx-fs-md); font-weight: var(--mx-fw-bold); color: var(--mx-ink); }
.mx-task__sub { font-size: var(--mx-fs-sm); font-weight: var(--mx-fw-semibold); color: var(--mx-muted-2); margin-top: 2px; }
.mx-task__arrow { color: var(--mx-muted-2); flex-shrink: 0; }
.mx-task:hover .mx-task__arrow { color: var(--mx-ink-2); }
/* ------------------------------------------------------------------ */
/* 13. OVERLAYS — Modal, Drawer, Toast, Tooltip */
/* ------------------------------------------------------------------ */
/* Modal */
.mx-modal-backdrop {
position: fixed; inset: 0;
background: rgba(36, 27, 77, 0.45);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: var(--mx-z-modal);
display: grid; place-items: center;
padding: 16px;
}
.mx-modal {
width: 100%;
max-width: 480px;
background: #fff;
border: 2px solid var(--mx-border);
border-radius: var(--mx-radius-2xl);
box-shadow: 0 10px 0 var(--mx-border), 0 20px 40px rgba(36, 27, 77, .25);
animation: mx-modal-in .35s var(--mx-spring);
}
.mx-modal__head { padding: 22px 24px 8px; }
.mx-modal__body { padding: 8px 24px 18px; color: var(--mx-muted); }
.mx-modal__foot { padding: 14px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
@keyframes mx-modal-in {
0% { opacity: 0; transform: scale(.92) translateY(10px); }
100% { opacity: 1; transform: none; }
}
/* Tooltip */
.mx-tooltip {
position: relative;
display: inline-block;
}
.mx-tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: var(--mx-ink);
color: #fff;
padding: 6px 10px;
border-radius: var(--mx-radius-sm);
font-size: var(--mx-fs-sm);
font-weight: var(--mx-fw-semibold);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--mx-dur-fast) var(--mx-ease-out), transform var(--mx-dur-fast) var(--mx-ease-out);
z-index: var(--mx-z-toast);
box-shadow: 0 4px 0 rgba(36, 27, 77, .25);
}
.mx-tooltip:hover::after, .mx-tooltip:focus-within::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Toast / banner */
.mx-toast {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
border-radius: var(--mx-radius-lg);
background: #fff;
border: 2px solid var(--mx-border);
box-shadow: var(--mx-shadow-md);
font-size: var(--mx-fs-md);
font-weight: var(--mx-fw-semibold);
color: var(--mx-ink);
}
.mx-toast--success { background: var(--mx-success-soft); border-color: var(--mx-success-100); color: var(--mx-success-deep); box-shadow: 0 4px 0 var(--mx-success-100); }
.mx-toast--warning { background: var(--mx-warning-soft); border-color: var(--mx-warning-100); color: var(--mx-warning-deep); box-shadow: 0 4px 0 var(--mx-warning-100); }
.mx-toast--danger { background: var(--mx-danger-soft); border-color: var(--mx-danger-100); color: var(--mx-danger-deep); box-shadow: 0 4px 0 var(--mx-danger-100); }
.mx-toast--info { background: var(--mx-primary-soft); border-color: var(--mx-primary-100); color: var(--mx-primary-d); box-shadow: 0 4px 0 var(--mx-primary-100); }
.mx-toast__icon { flex-shrink: 0; width: 22px; height: 22px; }
.mx-toast__body { flex: 1; min-width: 0; }
.mx-toast__title { font-weight: var(--mx-fw-bold); }
.mx-toast__close {
border: 0; background: transparent; color: inherit;
cursor: pointer; padding: 4px; border-radius: 6px;
opacity: .65;
}
.mx-toast__close:hover { opacity: 1; }
/* ------------------------------------------------------------------ */
/* 14. TABLES */
/* ------------------------------------------------------------------ */
.mx-table {
width: 100%;
border-collapse: collapse;
font-size: var(--mx-fs-md);
}
.mx-table th, .mx-table td {
padding: 12px 14px;
text-align: left;
border-bottom: 2px dashed var(--mx-border);
}
.mx-table th {
font-size: var(--mx-fs-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--mx-muted-2);
font-weight: var(--mx-fw-bold);
border-bottom-style: solid;
}
.mx-table td { color: var(--mx-ink); font-weight: var(--mx-fw-semibold); }
.mx-table tbody tr:hover { background: var(--mx-primary-soft); }
.mx-table tbody tr:last-child td { border-bottom: 0; }
/* Card-wrapped table */
.mx-table-wrap {
background: #fff;
border: 2px solid var(--mx-border);
border-radius: var(--mx-radius-xl);
box-shadow: var(--mx-shadow-lg);
overflow: hidden;
}
/* ------------------------------------------------------------------ */
/* 15. BREADCRUMBS / PAGINATION */
/* ------------------------------------------------------------------ */
.mx-breadcrumbs {
display: flex; align-items: center; gap: 6px;
flex-wrap: wrap;
font-size: var(--mx-fs-base);
color: var(--mx-muted);
font-weight: var(--mx-fw-semibold);
}
.mx-breadcrumbs a { color: var(--mx-muted); text-decoration: none; }
.mx-breadcrumbs a:hover { color: var(--mx-primary-d); }
.mx-breadcrumbs__sep { color: var(--mx-muted-2); }
.mx-breadcrumbs__current { color: var(--mx-ink); font-weight: var(--mx-fw-bold); }
.mx-pagination { display: inline-flex; gap: 6px; align-items: center; }
.mx-pagination > * {
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border: 2px solid var(--mx-border);
background: #fff;
color: var(--mx-ink-2);
border-radius: var(--mx-radius-sm);
font-weight: var(--mx-fw-bold);
font-size: var(--mx-fs-base);
cursor: pointer;
text-decoration: none;
transition: background var(--mx-dur-fast), color var(--mx-dur-fast);
}
.mx-pagination > .is-active {
background: var(--mx-grad); color: #fff; border-color: transparent;
box-shadow: 0 3px 0 var(--mx-sh-primary);
}
.mx-pagination > a:hover { background: var(--mx-primary-soft); color: var(--mx-primary-d); }
/* ------------------------------------------------------------------ */
/* 16. EMPTY / LOADING / ERROR STATES */
/* ------------------------------------------------------------------ */
.mx-empty {
text-align: center;
padding: 36px 22px;
color: var(--mx-muted);
}
.mx-empty__icon {
width: 72px; height: 72px;
border-radius: 22px;
background: var(--mx-primary-soft);
color: var(--mx-primary-d);
display: grid; place-items: center;
margin: 0 auto 14px;
font-size: 30px;
border: 2px solid var(--mx-primary-100);
box-shadow: 0 5px 0 var(--mx-primary-100);
}
.mx-empty__title { font-size: var(--mx-fs-2xl); font-weight: var(--mx-fw-bold); color: var(--mx-ink); margin-bottom: 6px; }
.mx-empty__sub { font-size: var(--mx-fs-md); color: var(--mx-muted); max-width: 360px; margin: 0 auto 18px; }
/* Locked card */
.mx-locked {
position: relative;
border-radius: var(--mx-radius-xl);
border: 2px solid var(--mx-border);
background: #fff;
box-shadow: var(--mx-shadow-lg);
overflow: hidden;
min-height: 180px;
}
.mx-locked__overlay { position: absolute; inset: 0; display: grid; place-items: center; }
.mx-locked__pill {
display: inline-flex; align-items: center; gap: 9px;
height: 40px; padding: 0 18px;
border-radius: var(--mx-radius-pill);
background: var(--mx-ink); color: #fff;
font-size: var(--mx-fs-md);
font-weight: var(--mx-fw-bold);
box-shadow: 0 6px 0 rgba(36, 27, 77, .25);
}
/* Spinner — spinning arc with a subtle pulse halo */
.mx-spinner {
position: relative;
display: inline-block;
width: 24px; height: 24px;
border-radius: 50%;
border: 4px solid var(--mx-primary-soft);
border-top-color: var(--mx-primary);
animation: mx-spin .8s linear infinite;
}
.mx-spinner::after {
content: "";
position: absolute; inset: -4px;
border-radius: 50%;
box-shadow: 0 0 0 0 var(--mx-primary-glow);
animation: mx-spinner-halo 1.6s ease-out infinite;
}
.mx-spinner--sm { width: 16px; height: 16px; border-width: 3px; }
.mx-spinner--lg { width: 36px; height: 36px; border-width: 5px; }
.mx-spinner--inverse { border-color: rgba(255, 255, 255, .25); border-top-color: #fff; }
.mx-spinner--inverse::after { display: none; }
@keyframes mx-spin { to { transform: rotate(360deg); } }
@keyframes mx-spinner-halo {
0% { box-shadow: 0 0 0 0 var(--mx-primary-glow); opacity: .9; }
100% { box-shadow: 0 0 0 10px transparent; opacity: 0; }
}
/* Dots loader — continuous travelling wave.
Each dot moves up→down symmetrically around its centre. Staggered phase
(delays of 1/3 cycle) makes the motion flow left-to-right like a wave.
No fixed height → loader stays inline-centred, never pushes button size. */
.mx-loader-dots {
display: inline-flex;
align-items: center;
gap: 6px;
vertical-align: middle;
line-height: 0;
}
.mx-loader-dots > i {
display: block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--mx-primary);
animation: mx-wave-dot 1s ease-in-out infinite;
}
.mx-loader-dots > i:nth-child(1) { animation-delay: 0s; }
.mx-loader-dots > i:nth-child(2) { animation-delay: 0.2s; background: var(--mx-primary-2); }
.mx-loader-dots > i:nth-child(3) { animation-delay: 0.4s; background: var(--mx-pink); }
.mx-loader-dots--sm > i { width: 6px; height: 6px; }
.mx-loader-dots--lg > i { width: 12px; height: 12px; }
.mx-loader-dots--inverse > i,
.mx-loader-dots--inverse > i:nth-child(2),
.mx-loader-dots--inverse > i:nth-child(3) { background: #fff; }
@keyframes mx-wave-dot {
0%, 100% { transform: translateY(5px); }
50% { transform: translateY(-5px); }
}
/* Pulse loader — single growing ring (great for status placeholders) */
.mx-loader-pulse {
position: relative;
display: inline-block;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--mx-primary);
}
.mx-loader-pulse::before,
.mx-loader-pulse::after {
content: "";
position: absolute; inset: 0;
border-radius: inherit;
background: var(--mx-primary);
animation: mx-loader-pulse 1.6s var(--mx-ease-out) infinite;
opacity: 0.55;
}
.mx-loader-pulse::after { animation-delay: .8s; }
@keyframes mx-loader-pulse {
0% { transform: scale(1); opacity: .55; }
100% { transform: scale(2.4); opacity: 0; }
}
/* Skeleton — gradient shimmer + soft breathing for richer feel */
.mx-skeleton {
position: relative;
display: block;
background: var(--mx-border);
border-radius: var(--mx-radius-sm);
min-height: 14px;
overflow: hidden;
animation: mx-skeleton-breathe 2.2s ease-in-out infinite;
}
.mx-skeleton::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, .55) 45%,
rgba(255, 255, 255, .85) 50%,
rgba(255, 255, 255, .55) 55%,
transparent 100%
);
transform: translateX(-100%);
animation: mx-skeleton-shimmer 1.4s ease-in-out infinite;
}
.mx-skeleton--circle { border-radius: 50%; }
.mx-skeleton--text { height: 14px; }
.mx-skeleton--title { height: 22px; }
.mx-skeleton--block { height: 80px; border-radius: var(--mx-radius-md); }
.mx-skeleton--toned { background: var(--mx-primary-soft); }
@keyframes mx-skeleton-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
@keyframes mx-skeleton-breathe {
0%, 100% { opacity: 1; }
50% { opacity: .75; }
}
/* Error big icon */
.mx-error-icon {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--mx-danger-soft);
color: var(--mx-danger-deep);
display: grid; place-items: center;
font-size: 30px;
margin: 0 auto 16px;
box-shadow: 0 6px 0 var(--mx-danger-100);
}
.mx-success-icon {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--mx-success-soft);
color: var(--mx-success-deep);
display: grid; place-items: center;
font-size: 30px;
margin: 0 auto 16px;
box-shadow: 0 6px 0 var(--mx-success-100);
}
/* Medal (used on completion screen) */
.mx-medal {
width: 88px; height: 88px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 40px;
background: linear-gradient(135deg, #FFD75E, #F7A916);
box-shadow: 0 10px 0 var(--mx-sh-warning), 0 18px 30px rgba(247, 169, 22, .4);
margin: 0 auto 18px;
animation: mx-medal-in .7s var(--mx-spring) both;
}
@keyframes mx-medal-in {
0% { opacity: 0; transform: scale(0) rotate(-40deg); }
100% { opacity: 1; transform: none; }
}
/* ------------------------------------------------------------------ */
/* 17. MASCOT (brand character) */
/* ------------------------------------------------------------------ */
.mx-mascot {
position: relative;
width: 120px; height: 120px;
margin: 0 auto;
animation: mx-bob 3s ease-in-out infinite;
}
.mx-mascot__body { position: absolute; inset: 0; border-radius: 42% 42% 46% 46%; background: var(--mx-grad); box-shadow: 0 12px 0 var(--mx-sh-primary), 0 22px 30px rgba(110, 86, 248, .4); }
.mx-mascot__hat {
position: absolute;
top: -22px; left: 50%;
width: 64px; height: 44px;
transform: translateX(-50%) rotate(8deg);
pointer-events: none;
filter: drop-shadow(0 3px 0 rgba(36, 27, 77, .25));
}
.mx-mascot__hat svg { width: 100%; height: 100%; display: block; }
.mx-mascot__eye { position: absolute; top: 42px; width: 20px; height: 24px; background: #fff; border-radius: 50%; }
.mx-mascot__eye::after { content: ""; position: absolute; left: 5px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--mx-ink); }
.mx-mascot__eye--l { left: 32px; }
.mx-mascot__eye--r { right: 32px; }
.mx-mascot__cheek { position: absolute; top: 66px; width: 14px; height: 9px; border-radius: 50%; background: rgba(255, 93, 162, .65); }
.mx-mascot__cheek--l { left: 24px; }
.mx-mascot__cheek--r { right: 24px; }
.mx-mascot__smile { position: absolute; top: 70px; left: 50%; width: 30px; height: 16px; border: 3px solid #fff; border-top: 0; border-radius: 0 0 30px 30px; transform: translateX(-50%); }
@keyframes mx-bob {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-12px) rotate(2deg); }
}
/* ------------------------------------------------------------------ */
/* 18. ALERTS / CALLOUTS */
/* ------------------------------------------------------------------ */
.mx-alert {
display: flex; gap: 12px;
padding: 16px 18px;
border-radius: var(--mx-radius-lg);
border: 2px solid var(--mx-primary-100);
background: var(--mx-primary-soft);
color: var(--mx-primary-d);
font-size: var(--mx-fs-md);
font-weight: var(--mx-fw-semibold);
box-shadow: 0 4px 0 var(--mx-primary-100);
}
.mx-alert--success { background: var(--mx-success-soft); border-color: var(--mx-success-100); color: var(--mx-success-deep); box-shadow: 0 4px 0 var(--mx-success-100); }
.mx-alert--warning { background: var(--mx-warning-soft); border-color: var(--mx-warning-100); color: var(--mx-warning-deep); box-shadow: 0 4px 0 var(--mx-warning-100); }
.mx-alert--danger { background: var(--mx-danger-soft); border-color: var(--mx-danger-100); color: var(--mx-danger-deep); box-shadow: 0 4px 0 var(--mx-danger-100); }
.mx-alert__icon { flex-shrink: 0; width: 24px; height: 24px; }
.mx-alert__title { font-weight: var(--mx-fw-bold); margin-bottom: 2px; }
/* ------------------------------------------------------------------ */
/* 19. UTILITY CLASSES (kept tiny, used by partials) */
/* ------------------------------------------------------------------ */
.mx-flex { display: flex; }
.mx-grid { display: grid; }
.mx-inline { display: inline-flex; }
.mx-stack { display: flex; flex-direction: column; gap: 12px; }
.mx-stack-lg { display: flex; flex-direction: column; gap: 20px; }
.mx-row-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mx-spacer { flex: 1; }
.mx-center { display: grid; place-items: center; }
.mx-mt-0 { margin-top: 0; } .mx-mt-1 { margin-top: 4px; } .mx-mt-2 { margin-top: 8px; }
.mx-mt-3 { margin-top: 12px; } .mx-mt-4 { margin-top: 16px; } .mx-mt-6 { margin-top: 24px; }
.mx-mb-0 { margin-bottom: 0; } .mx-mb-2 { margin-bottom: 8px; } .mx-mb-4 { margin-bottom: 16px; } .mx-mb-6 { margin-bottom: 24px; }
.mx-w-full { width: 100%; }
.mx-text-center { text-align: center; }
.mx-sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ------------------------------------------------------------------ */
/* 20. RESPONSIVE & MOTION */
/* ------------------------------------------------------------------ */
@media (max-width: 1023px) {
.mx-card--pad { padding: 18px; }
.mx-card--padlg { padding: 22px; }
.mx-h1 { font-size: var(--mx-fs-4xl); }
}
@media (max-width: 640px) {
.mx-header { height: 64px; }
.mx-display { font-size: 28px; }
.mx-btn--xl { padding: 14px 20px; font-size: var(--mx-fs-lg); }
}
/* Reduced motion — disable decorative animations / transitions.
Loading indicators are functional (they signal that something is
happening) and must keep animating even under prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
.mx *,
.mx *::before,
.mx *::after {
animation: none !important;
transition: none !important;
}
/* Explicit re-declarations for functional loading indicators */
.mx .mx-spinner { animation: mx-spin .8s linear infinite !important; }
.mx .mx-spinner::after { animation: mx-spinner-halo 1.6s ease-out infinite !important; }
.mx .mx-loader-dots > i { animation: mx-wave-dot 1s ease-in-out infinite !important; animation-delay: 0s !important; }
.mx .mx-loader-dots > i:nth-child(2) { animation-delay: 0.2s !important; }
.mx .mx-loader-dots > i:nth-child(3) { animation-delay: 0.4s !important; }
.mx .mx-loader-pulse::before { animation: mx-loader-pulse 1.6s var(--mx-ease-out) infinite !important; }
.mx .mx-loader-pulse::after { animation: mx-loader-pulse 1.6s var(--mx-ease-out) .8s infinite !important; }
.mx .mx-skeleton { animation: mx-skeleton-breathe 2.2s ease-in-out infinite !important; }
.mx .mx-skeleton::after { animation: mx-skeleton-shimmer 1.4s ease-in-out infinite !important; }
.mx .mx-progress--lg .mx-progress__fill::after { animation: mx-sheen 1.3s linear infinite !important; }
.mx .mx-btn.is-loading::after { animation: mx-spin .7s linear infinite !important; }
.mx .mx-dot--pulse { animation: mx-pulse 1.6s ease-in-out infinite !important; }
.mx .mx-levelmap__node.is-current { animation: mx-throb 1.4s ease-in-out infinite !important; }
}
/* ─────────────────────────────────────────────────────────────────────
Lesson path — linear vertical list of nodes (done/current/open/locked)
───────────────────────────────────────────────────────────────────── */
.mx .mx-lpath {
list-style: none;
margin: 0 auto;
padding: 0;
width: fit-content;
max-width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.mx .mx-lpath__row {
position: relative;
display: inline-flex;
align-items: center;
gap: 16px;
padding: 4px 0;
max-width: 100%;
}
.mx .mx-lpath__row::before {
content: "";
position: absolute;
left: 35px;
top: -7px;
bottom: -7px;
width: 2px;
background: var(--mx-border-2);
border-radius: 2px;
z-index: 0;
}
.mx .mx-lpath__row:first-child::before { top: 50%; }
.mx .mx-lpath__row:last-child::before { bottom: 50%; }
.mx .mx-lpath__row:only-child::before { display: none; }
.mx .mx-lpath__circle {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 999px;
display: grid;
place-items: center;
background: #fff;
border: 2px solid var(--mx-border);
color: var(--mx-muted-2);
box-shadow: 0 3px 0 var(--mx-border);
transition: transform 0.15s var(--mx-ease-out);
}
.mx .mx-lpath__circle--lg {
width: 80px;
height: 80px;
}
.mx .mx-lpath__badge {
position: absolute;
right: -4px;
bottom: -4px;
width: 24px;
height: 24px;
border-radius: 999px;
display: grid;
place-items: center;
background: #fff;
border: 2px solid #fff;
box-shadow: 0 1px 0 var(--mx-border);
}
.mx .mx-lpath__badge--done {
background: var(--mx-success);
color: #fff;
border-color: #fff;
box-shadow: 0 1px 0 var(--mx-success-deep);
}
.mx .mx-lpath__badge--weak {
background: var(--mx-warning);
color: #fff;
border-color: #fff;
box-shadow: 0 1px 0 var(--mx-warning-deep);
}
.mx .mx-lpath__badge--locked {
background: var(--mx-border-2);
color: var(--mx-muted-2);
border-color: #fff;
box-shadow: none;
}
.mx .mx-lpath__label {
flex: 1;
min-width: 0;
font-size: 14.5px;
font-weight: 600;
color: var(--mx-ink);
text-decoration: none;
line-height: 1.35;
}
a.mx-lpath__label:hover { color: var(--mx-primary-d); }
.mx .mx-lpath__row.is-current {
display: flex;
flex-direction: column;
width: 100%;
max-width: 320px;
padding: 0;
gap: 0;
}
.mx .mx-lpath__body {
position: relative;
z-index: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 18px 20px 16px;
border: 2px solid var(--mx-primary);
border-radius: var(--mx-radius-lg);
background: var(--mx-primary-soft);
box-shadow: 0 4px 0 var(--mx-primary-100);
text-align: center;
}
.mx .mx-lpath__top-icon {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 999px;
background: #fff;
color: var(--mx-primary-d);
border: 2px solid var(--mx-primary);
box-shadow: 0 2px 0 var(--mx-primary-100);
margin-bottom: 6px;
}
.mx .mx-lpath__title {
margin: 0;
font-size: 17px;
font-weight: 800;
color: var(--mx-ink);
line-height: 1.25;
}
.mx .mx-lpath__cta {
align-self: stretch;
margin-top: 6px;
}
/* Status modifiers */
.mx .mx-lpath__row.is-done .mx-lpath__circle {
background: var(--mx-success);
border-color: var(--mx-success-deep);
color: #fff;
box-shadow: 0 2px 0 var(--mx-success-deep);
}
.mx .mx-lpath__row.is-done + .mx-lpath__row::before { background: var(--mx-success-100); }
.mx .mx-lpath__row.is-current .mx-lpath__circle {
background: var(--mx-primary);
border-color: var(--mx-primary-d);
color: #fff;
box-shadow: 0 3px 0 var(--mx-primary-d), 0 0 0 6px var(--mx-primary-glow);
}
.mx .mx-lpath__row.is-weak .mx-lpath__circle {
background: var(--mx-warning, #F5A524);
border-color: var(--mx-warning, #F5A524);
color: #fff;
}
.mx .mx-lpath__row.is-open .mx-lpath__circle {
background: #fff;
border-color: var(--mx-primary-100);
color: var(--mx-primary-d);
}
.mx .mx-lpath__row.is-open .mx-lpath__label { color: var(--mx-ink); }
.mx .mx-lpath__row.is-locked .mx-lpath__circle {
background: #fff;
border-color: var(--mx-border);
color: var(--mx-muted-2);
box-shadow: none;
}
.mx .mx-lpath__row.is-locked .mx-lpath__label { color: var(--mx-muted-2); }
/* Review row — компактное «повторение» перед зависимым уроком. */
.mx .mx-lpath__row.is-review {
gap: 12px;
padding: 2px 0;
}
.mx .mx-lpath__row.is-review .mx-lpath__circle {
width: 52px;
height: 52px;
border-style: dashed;
border-color: var(--mx-primary-100);
background: var(--mx-primary-soft);
color: var(--mx-primary-d);
box-shadow: none;
}
.mx .mx-lpath__row.is-review.is-review-locked .mx-lpath__circle {
border-color: var(--mx-border);
background: #fff;
color: var(--mx-muted-2);
}
.mx .mx-lpath__row.is-review::before { left: 25px; }
.mx .mx-lpath__row.is-review .mx-lpath__label {
display: flex;
flex-direction: column;
gap: 2px;
}
.mx .mx-lpath__row.is-review .mx-lpath__chip {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--mx-primary-d);
}
.mx .mx-lpath__row.is-review.is-review-locked .mx-lpath__chip {
color: var(--mx-muted-2);
}
.mx .mx-lpath__row.is-review .mx-lpath__sub {
font-size: 14px;
color: var(--mx-ink);
line-height: 1.25;
}
.mx .mx-lpath__row.is-review.is-review-locked .mx-lpath__sub {
color: var(--mx-muted-2);
}
.mx .mx-lpath__row.is-review a.mx-lpath__label {
text-decoration: none;
}
/* ─────────────────────────────────────────────────────────────────────
Growth zones — 1–3 weak topics in the right column
───────────────────────────────────────────────────────────────────── */
.mx .mx-growth__header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.mx .mx-growth__header-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--mx-success-soft);
color: var(--mx-success-deep);
flex-shrink: 0;
}
.mx .mx-growth__heading {
margin: 0;
font-size: 18px;
font-weight: 800;
color: var(--mx-ink);
line-height: 1.2;
}
.mx .mx-growth__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.mx .mx-growth__item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
border-radius: 16px;
background: var(--mx-danger-soft);
border: 1.5px solid var(--mx-danger-100);
color: var(--mx-ink);
text-decoration: none;
transition: transform 0.15s var(--mx-ease-out), border-color 0.2s;
}
.mx a.mx-growth__item:hover {
transform: translateY(-1px);
border-color: var(--mx-danger);
}
.mx .mx-growth__item.is-static { cursor: default; }
.mx .mx-growth__badge {
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
}
.mx .mx-growth__badge-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--mx-danger);
color: #fff;
box-shadow: 0 2px 0 var(--mx-sh-danger);
}
.mx .mx-growth__badge-num {
margin-left: -10px;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 999px;
background: #fff;
color: var(--mx-danger-deep);
font-size: 13px;
font-weight: 800;
border: 2px solid var(--mx-danger-100);
}
.mx .mx-growth__content {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.mx .mx-growth__title {
margin: 0;
font-size: 14.5px;
font-weight: 700;
color: var(--mx-ink);
line-height: 1.3;
}
.mx .mx-growth__meta {
margin: 0;
font-size: 13px;
color: var(--mx-danger-deep);
}
.mx .mx-growth__empty {
margin: 0;
font-size: 13px;
color: var(--mx-muted);
}
.mx .mx-growth__link {
display: inline-flex;
align-items: center;
gap: 4px;
margin-top: 14px;
font-size: 13.5px;
font-weight: 700;
color: var(--mx-primary-d);
text-decoration: none;
transition: color 0.2s;
}
.mx .mx-growth__link:hover { color: var(--mx-primary); }
/* ─────────────────────────────────────────────────────────────────────
Quick actions — right-column action rows
───────────────────────────────────────────────────────────────────── */
.mx .mx-qaction {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
border-radius: 14px;
background: #fff;
border: 1.5px solid var(--mx-border);
box-shadow: 0 2px 0 var(--mx-border);
text-decoration: none;
cursor: pointer;
text-align: left;
transition: transform 0.15s var(--mx-ease-out), border-color 0.2s;
}
.mx a.mx-qaction:hover,
.mx button.mx-qaction:hover {
transform: translateY(-1px);
border-color: var(--mx-primary-100);
}
.mx button.mx-qaction { font: inherit; }
.mx .mx-qaction.is-disabled {
opacity: 0.65;
cursor: not-allowed;
box-shadow: none;
}
.mx .mx-qaction__icon {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 12px;
display: grid;
place-items: center;
background: var(--mx-primary-soft);
color: var(--mx-primary-d);
}
.mx .mx-qaction--danger .mx-qaction__icon {
background: var(--mx-danger-soft);
color: var(--mx-danger-deep);
}
.mx .mx-qaction--sky .mx-qaction__icon {
background: var(--mx-sky-soft);
color: var(--mx-sky-deep);
}
.mx .mx-qaction--purple .mx-qaction__icon {
background: var(--mx-primary-soft);
color: var(--mx-primary-d);
}
.mx .mx-qaction__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx .mx-qaction__title { font-size: 14.5px; font-weight: 700; color: var(--mx-ink); line-height: 1.2; }
.mx .mx-qaction__sub { font-size: 12px; color: var(--mx-muted); line-height: 1.3; }
.mx .mx-qaction__suffix { margin-left: auto; color: var(--mx-muted-2); }
/* ============================================================
Home v22 — three-column home layout
============================================================ */
/* Page grid: sidebar | cluster (main + rail, centered) */
.mx .mx-page-3col {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 22px;
padding: 22px;
min-height: 100vh;
align-items: start;
}
@media (max-width: 1279px) {
.mx .mx-page-3col { grid-template-columns: 260px minmax(0, 1fr); gap: 18px; padding: 18px; }
}
@media (max-width: 1023px) {
.mx .mx-page-3col {
grid-template-columns: 1fr;
gap: 16px;
padding: 16px;
}
}
/* Cluster: main + rail, centered within the area to the right of the sidebar */
.mx .mx-home-cluster {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 48px;
min-width: 0;
}
.mx .mx-home-cluster > .mx-home-main {
flex: 1 1 720px;
max-width: 720px;
min-width: 0;
}
.mx .mx-home-cluster > .mx-rail {
flex: 0 0 380px;
}
@media (max-width: 1279px) {
.mx .mx-home-cluster { gap: 36px; }
.mx .mx-home-cluster > .mx-rail { flex-basis: 340px; }
}
@media (max-width: 1023px) {
.mx .mx-home-cluster { display: contents; }
}
/* Sidebar variant for the 3-col page.
Base styles apply regardless of viewport. Sticky positioning is only switched
on at the lg breakpoint so the mobile drawer (.fixed + -translate-x-full from
Tailwind in the markup) can slide in/out without our CSS specificity beating it. */
.mx .mx-side {
background: var(--mx-card);
border: 2px solid var(--mx-border);
box-shadow: var(--mx-shadow-lg);
border-radius: var(--mx-radius-2xl);
padding: 18px;
display: flex;
flex-direction: column;
gap: 14px;
}
@media (min-width: 1024px) {
.mx .mx-side {
position: sticky;
top: 22px;
align-self: start;
min-height: calc(100vh - 44px);
}
}
@media (max-width: 1023px) {
/* Mobile drawer floats with insets from the screen edges and rounded sticker
panel; sits above the floating topbar and rail-footer (see z-index stack).
Hidden by default off-screen on the left; revealed via data-open="true".
The extra 24px in translateX accounts for the left:12px inset so no sliver
of the panel peeks past the viewport edge when closed. */
.mx .mx-side {
top: calc(12px + env(safe-area-inset-top, 0px));
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
left: 12px;
width: calc(100vw - 24px);
max-width: 320px;
height: auto;
border-radius: var(--mx-radius-2xl);
box-shadow: var(--mx-shadow-lg);
overflow-y: auto;
z-index: 95;
transform: translateX(calc(-100% - 24px));
}
.mx .mx-side[data-open="true"] {
transform: translateX(0);
}
/* When the drawer is open, hide the floating bottom rail-footer and top
mobile-topbar so they don't fight the drawer for screen real estate. */
body.mx-sidebar-open .mx-rail-footer,
body.mx-sidebar-open .mx-home-mobile-topbar {
display: none;
}
}
.mx .mx-side__brand {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 14px;
border-bottom: 2px dashed var(--mx-border);
}
.mx .mx-side__brand-title {
font-size: 15px;
font-weight: 900;
color: var(--mx-ink);
line-height: 1.1;
}
.mx .mx-side__brand-sub {
font-size: 12px;
font-weight: 700;
color: var(--mx-muted);
margin-top: 4px;
}
.mx .mx-side__nav { display: flex; flex-direction: column; gap: 4px; }
.mx .mx-side__bottom {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.mx .mx-side__settings {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 14px 4px;
font-weight: 800;
font-size: 14px;
color: var(--mx-muted);
cursor: pointer;
text-decoration: none;
border-top: 2px dashed var(--mx-border);
transition: color var(--mx-dur-fast), transform var(--mx-dur-base);
}
.mx .mx-side__settings:hover { color: var(--mx-ink); transform: translateX(2px); }
/* Subjects dropdown — sits above the mentor card */
.mx .mx-subject-dd {
position: relative;
}
.mx .mx-subject-dd__trigger {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--mx-card);
border: 2px solid var(--mx-border);
border-radius: var(--mx-radius-md);
font-weight: 800;
font-size: 14px;
color: var(--mx-ink);
cursor: pointer;
list-style: none;
user-select: none;
transition: border-color var(--mx-dur-fast), background-color var(--mx-dur-fast);
}
.mx .mx-subject-dd__trigger::-webkit-details-marker { display: none; }
.mx .mx-subject-dd__trigger:hover { border-color: var(--mx-primary-100); }
.mx .mx-subject-dd[open] > .mx-subject-dd__trigger {
border-color: var(--mx-primary-100);
background: var(--mx-primary-soft);
}
.mx .mx-subject-dd__icon {
width: 22px;
height: 22px;
display: grid;
place-items: center;
color: var(--mx-muted);
flex-shrink: 0;
}
.mx .mx-subject-dd__label {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mx .mx-subject-dd__caret {
display: inline-flex;
align-items: center;
color: var(--mx-muted);
transition: transform var(--mx-dur-base);
}
.mx .mx-subject-dd[open] > .mx-subject-dd__trigger .mx-subject-dd__caret {
transform: rotate(180deg);
color: var(--mx-primary-d);
}
.mx .mx-subject-dd__menu {
position: absolute;
bottom: calc(100% + 6px);
left: 0;
right: 0;
margin: 0;
padding: 6px;
list-style: none;
background: var(--mx-card);
border: 2px solid var(--mx-border);
border-radius: var(--mx-radius-md);
box-shadow: var(--mx-shadow-lg);
display: flex;
flex-direction: column;
gap: 2px;
z-index: 20;
}
.mx .mx-subject-dd__item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 9px 10px;
background: transparent;
border: 0;
border-radius: var(--mx-radius-sm);
font-weight: 700;
font-size: 13.5px;
color: var(--mx-ink);
cursor: pointer;
text-align: left;
text-decoration: none;
transition: background-color var(--mx-dur-fast);
}
.mx .mx-subject-dd__item:hover { background: var(--mx-primary-soft); }
.mx .mx-subject-dd__item.is-current {
background: var(--mx-primary-soft);
color: var(--mx-primary-d);
}
.mx .mx-subject-dd__name { flex: 1; min-width: 0; }
/* Mentor (fox) card */
.mx .mx-mentor-card {
background: var(--mx-primary-soft);
border: 2px solid var(--mx-primary-100);
box-shadow: 0 4px 0 var(--mx-primary-100);
border-radius: var(--mx-radius-lg);
padding: 14px;
display: flex;
align-items: center;
gap: 12px;
}
.mx .mx-mentor-card__fox {
width: 56px;
height: 56px;
border-radius: 50%;
background-image: var(--mx-img-fox);
background-repeat: no-repeat;
background-position: 50% 18%;
background-size: 140%;
border: 2px solid var(--mx-card);
box-shadow: 0 3px 0 var(--mx-primary-100);
flex-shrink: 0;
}
.mx .mx-mentor-card__body { min-width: 0; flex: 1; }
.mx .mx-mentor-card__title { font-size: 13px; font-weight: 900; color: var(--mx-ink); }
.mx .mx-mentor-card__text {
font-size: 11px;
font-weight: 700;
color: var(--mx-muted);
margin-top: 3px;
line-height: 1.35;
}
.mx .mx-mentor-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 12px;
font-weight: 800;
color: var(--mx-primary-d);
cursor: pointer;
text-decoration: none;
background: none;
border: 0;
padding: 0;
}
.mx .mx-mentor-card__cta:hover { color: var(--mx-primary); }
/* Main column */
.mx .mx-home-main {
display: flex;
flex-direction: column;
gap: 16px;
min-width: 0;
padding-top: 20px;
}
.mx .mx-home-main__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
/* Desktop: keep the "Твой путь к ОГЭ" header static and give the lesson path
its own scroll container so the graph scrolls independently underneath the
title without slipping behind it. Mobile keeps the natural page scroll. */
@media (min-width: 1024px) {
.mx .mx-home-cluster > .mx-home-main {
height: calc(100vh - 44px);
}
.mx .mx-home-main > .mx-home-main__path {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
/* Negative margin lets the scrollable box bleed into the cluster gap,
pushing the scrollbar further away from the graph content toward the
page's right edge while keeping the inner content aligned with the
header. */
margin: 0 -32px;
}
/* Soft top-edge fade — sits OUTSIDE the scroll container so it stays glued
to the visible top of the block. Matches the page background so it just
hints at content above without visually intruding. JS toggles
.is-scrolled on the wrapper to fade it in. */
.mx .mx-home-main__path-fade {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40px;
background: linear-gradient(to bottom, var(--mx-bg), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 180ms ease-out;
z-index: 4;
}
.mx .mx-home-main__path.is-scrolled .mx-home-main__path-fade {
opacity: 1;
}
/* Inner scroll container — the actual overflow-y region. Horizontal padding
gives the current-node pulse ring room before the implicit overflow-x
clipping kicks in. */
.mx .mx-home-main__path-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
padding: 8px 32px 24px 32px;
scrollbar-width: thin;
scrollbar-color: var(--mx-border-2) transparent;
}
.mx .mx-home-main__path-scroll::-webkit-scrollbar {
width: 8px;
}
.mx .mx-home-main__path-scroll::-webkit-scrollbar-track {
background: transparent;
}
.mx .mx-home-main__path-scroll::-webkit-scrollbar-thumb {
background: var(--mx-border-2);
border-radius: var(--mx-radius-pill);
}
}
.mx .mx-home-main__title h1 {
font-size: 32px;
font-weight: 900;
color: var(--mx-ink);
margin: 0;
letter-spacing: -0.01em;
line-height: 1.05;
}
.mx .mx-home-main__sub {
margin-top: 8px;
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
font-weight: 700;
color: var(--mx-muted);
flex-wrap: wrap;
}
.mx .mx-home-main__chip {
background: var(--mx-primary-soft);
border: 2px solid var(--mx-primary-100);
color: var(--mx-primary-d);
font-size: 13px;
font-weight: 900;
padding: 4px 12px;
border-radius: var(--mx-radius-pill);
}
/* Help pill (top-right of main) */
.mx .mx-help-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px 10px 10px;
background: var(--mx-card);
border: 2px solid var(--mx-border);
box-shadow: var(--mx-shadow-md);
border-radius: var(--mx-radius-pill);
font-size: 14px;
font-weight: 800;
color: var(--mx-ink);
cursor: pointer;
text-decoration: none;
transition: transform var(--mx-dur-base), box-shadow var(--mx-dur-base);
}
.mx .mx-help-pill:hover {
transform: translateY(-2px);
box-shadow: var(--mx-shadow-lg);
}
.mx .mx-help-pill__play {
width: 32px;
height: 32px;
background: var(--mx-grad);
color: var(--mx-card);
border-radius: 50%;
display: grid;
place-items: center;
box-shadow: 0 3px 0 var(--mx-sh-primary);
}
/* ============================================================
Roadmap — vertical lesson path with dashed connector
============================================================ */
.mx .mx-roadmap {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.mx .mx-roadmap__row {
display: grid;
grid-template-columns: 88px 1fr;
gap: 22px;
align-items: center;
position: relative;
padding: 14px 0;
min-height: 88px;
}
/* Per-row dashed connector — split into top half (::before) and bottom half (::after)
so the edge below a done row can be tinted green. */
.mx .mx-roadmap__row::before,
.mx .mx-roadmap__row::after {
content: "";
position: absolute;
left: 42px;
width: 4px;
background-image: repeating-linear-gradient(
to bottom,
var(--mx-primary-100) 0 8px,
transparent 8px 16px
);
z-index: 0;
pointer-events: none;
}
.mx .mx-roadmap__row::before { top: 0; bottom: 50%; }
.mx .mx-roadmap__row::after { top: 50%; bottom: 0; }
.mx .mx-roadmap__row:first-child::before { display: none; }
.mx .mx-roadmap__row:last-child::after { display: none; }
/* Edge going DOWN from a done row → bottom half of done row is green. */
.mx .mx-roadmap__row.is-done::after {
background-image: repeating-linear-gradient(
to bottom,
var(--mx-success) 0 8px,
transparent 8px 16px
);
}
/* Continuation of that green edge → top half of the row that follows a done row. */
.mx .mx-roadmap__row.is-done + .mx-roadmap__row::before {
background-image: repeating-linear-gradient(
to bottom,
var(--mx-success) 0 8px,
transparent 8px 16px
);
}
.mx .mx-roadmap__node {
width: 88px;
height: 88px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 32px;
font-weight: 900;
color: var(--mx-muted-2);
background: var(--mx-card);
position: relative;
z-index: 2;
flex-shrink: 0;
border: 3px solid var(--mx-border-2);
}
.mx .mx-roadmap__node .mx-icon { color: currentColor; }
.mx .mx-roadmap__title {
font-size: 18px;
font-weight: 800;
color: var(--mx-ink);
line-height: 1.2;
}
.mx .mx-roadmap__sub {
margin-top: 4px;
font-size: 13px;
font-weight: 800;
color: var(--mx-success-deep);
}
.mx .mx-roadmap__label { text-decoration: none; color: inherit; display: inline-block; }
.mx a.mx-roadmap__label:hover .mx-roadmap__title { color: var(--mx-primary-d); }
/* Done state */
.mx .mx-roadmap__row.is-done .mx-roadmap__node {
width: 64px;
height: 64px;
background: var(--mx-success);
border: none;
color: var(--mx-card);
margin: 0 auto;
}
/* Weak state — needs review but not yet done */
.mx .mx-roadmap__row.is-weak .mx-roadmap__node {
width: 64px;
height: 64px;
background: var(--mx-warning-soft);
border-color: var(--mx-warning-100);
color: var(--mx-warning-deep);
margin: 0 auto;
}
.mx .mx-roadmap__row.is-weak .mx-roadmap__sub { color: var(--mx-warning-deep); }
/* Open (next available, not current hero) */
.mx .mx-roadmap__row.is-open .mx-roadmap__node {
width: 64px;
height: 64px;
background: var(--mx-card);
border-color: var(--mx-primary-100);
color: var(--mx-primary-d);
margin: 0 auto;
}
.mx .mx-roadmap__row.is-open .mx-roadmap__sub { color: var(--mx-primary-d); }
/* Current — hero card spans the right column. */
.mx .mx-roadmap__row.is-current .mx-roadmap__node {
width: 96px;
height: 96px;
background: var(--mx-grad);
border: 4px solid var(--mx-card);
color: var(--mx-card);
font-size: 40px;
justify-self: center;
margin: 0;
isolation: isolate;
animation: mx-roadmap-current-core 2.8s ease-in-out infinite;
}
.mx .mx-roadmap__row.is-current .mx-roadmap__node::before,
.mx .mx-roadmap__row.is-current .mx-roadmap__node::after {
content: "";
position: absolute;
border-radius: 50%;
z-index: -1;
pointer-events: none;
}
.mx .mx-roadmap__row.is-current .mx-roadmap__node::before {
inset: -18px;
background: var(--mx-primary-glow);
animation: mx-roadmap-current-halo 2.4s ease-in-out infinite;
}
.mx .mx-roadmap__row.is-current .mx-roadmap__node::after {
inset: -8px;
border: 4px solid var(--mx-primary-100);
animation: mx-roadmap-current-ring 2.4s ease-in-out infinite;
}
.mx .mx-roadmap__row.is-current .mx-roadmap__node-shine {
position: absolute;
inset: 0;
border-radius: 50%;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.mx .mx-roadmap__row.is-current .mx-roadmap__node-shine::before {
content: "";
position: absolute;
top: -20%;
left: -90%;
width: 70%;
height: 140%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.10) 25%,
rgba(255, 255, 255, 0.45) 50%,
rgba(255, 255, 255, 0.10) 75%,
transparent 100%
);
transform: rotate(20deg);
opacity: 0;
animation: mx-roadmap-current-shine 3.2s ease-in-out infinite;
}
.mx .mx-roadmap__row.is-current .mx-roadmap__node-num {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
animation: mx-roadmap-current-number 2.8s ease-in-out infinite;
}
.mx .mx-roadmap__row.is-current .mx-roadmap__node-num > .mx-icon {
display: block;
}
@keyframes mx-roadmap-current-halo {
0%, 100% { transform: scale(0.96); opacity: 0.55; }
50% { transform: scale(1.08); opacity: 1; }
}
@keyframes mx-roadmap-current-ring {
0%, 100% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.04); opacity: 1; }
}
@keyframes mx-roadmap-current-core {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-3px) scale(1.025); }
}
@keyframes mx-roadmap-current-number {
0%, 58%, 100% { transform: scale(1); }
68% { transform: scale(0.94); }
82% { transform: scale(1.1); }
92% { transform: scale(1); }
}
@keyframes mx-roadmap-current-shine {
0%, 55% { opacity: 0; transform: translateX(0) rotate(20deg); }
72% { opacity: 0.7; }
100% { opacity: 0; transform: translateX(220px) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
.mx .mx-roadmap__row.is-current .mx-roadmap__node,
.mx .mx-roadmap__row.is-current .mx-roadmap__node::before,
.mx .mx-roadmap__row.is-current .mx-roadmap__node::after,
.mx .mx-roadmap__row.is-current .mx-roadmap__node-num,
.mx .mx-roadmap__row.is-current .mx-roadmap__node-shine::before {
animation: none;
}
.mx .mx-roadmap__row.is-current .mx-roadmap__node::before { opacity: 0.6; }
.mx .mx-roadmap__row.is-current .mx-roadmap__node::after { opacity: 0.9; }
.mx .mx-roadmap__row.is-current .mx-roadmap__node-shine::before { opacity: 0; }
}
/* Locked */
.mx .mx-roadmap__row.is-locked .mx-roadmap__node {
width: 64px;
height: 64px;
background: var(--mx-card);
border-color: var(--mx-border-2);
color: var(--mx-muted-2);
font-size: 22px;
margin: 0 auto;
}
.mx .mx-roadmap__row.is-locked .mx-roadmap__title { color: var(--mx-muted); }
.mx .mx-roadmap__row.is-locked .mx-roadmap__sub {
color: var(--mx-muted-2);
display: inline-flex;
align-items: center;
gap: 6px;
}
.mx .mx-roadmap__row.is-locked.is-next .mx-roadmap__sub {
color: var(--mx-primary-d);
}
.mx .mx-roadmap__row.is-locked .mx-roadmap__sub .mx-icon {
width: 14px;
height: 14px;
color: currentColor;
}
/* Review row — narrower node, dashed border */
.mx .mx-roadmap__row.is-review .mx-roadmap__node {
width: 56px;
height: 56px;
background: var(--mx-card);
border: 2px dashed var(--mx-primary-100);
color: var(--mx-primary-d);
margin: 0 auto;
}
.mx .mx-roadmap__row.is-review.is-review-locked .mx-roadmap__node {
border-color: var(--mx-border-2);
color: var(--mx-muted-2);
}
.mx .mx-roadmap__row.is-review .mx-roadmap__chip {
display: inline-block;
padding: 2px 10px;
background: var(--mx-primary-soft);
border: 2px solid var(--mx-primary-100);
color: var(--mx-primary-d);
border-radius: var(--mx-radius-pill);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mx .mx-roadmap__row.is-review.is-review-locked .mx-roadmap__chip {
background: transparent;
border-color: var(--mx-border-2);
color: var(--mx-muted-2);
}
.mx .mx-roadmap__row.is-review .mx-roadmap__sub { margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--mx-ink); }
.mx .mx-roadmap__row.is-review.is-review-locked .mx-roadmap__sub { color: var(--mx-muted-2); }
/* ============================================================
Current lesson hero card
============================================================ */
.mx .mx-current-card {
position: relative;
background: var(--mx-card);
border: 2px solid var(--mx-primary-100);
border-radius: var(--mx-radius-2xl);
padding: 22px 26px;
overflow: hidden;
min-height: 280px;
max-width: 650px;
box-shadow: var(--mx-shadow-md);
container-type: inline-size;
container-name: mx-current-card;
}
.mx .mx-current-card .mx-btn { width: fit-content; align-self: flex-start; }
.mx .mx-current-card__inner {
position: relative;
z-index: 2;
max-width: 62%;
display: flex;
flex-direction: column;
min-height: calc(280px - 44px);
}
.mx .mx-current-card__body { flex: 1 1 auto; }
/* Narrow card: text takes more width, fox shrinks (see __fox rules below). */
@container mx-current-card (max-width: 560px) {
.mx .mx-current-card__inner { max-width: 68%; }
}
/* Very narrow card: text takes full width, fox hides. */
@container mx-current-card (max-width: 440px) {
.mx .mx-current-card__inner { max-width: 100%; }
}
@media (max-width: 1023px) {
.mx .mx-current-card__inner { max-width: 100%; }
}
.mx .mx-current-card__pill {
display: inline-block;
background: var(--mx-primary-soft);
border: 2px solid var(--mx-primary-100);
color: var(--mx-primary-d);
font-size: 11px;
font-weight: 900;
padding: 4px 12px;
border-radius: var(--mx-radius-pill);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.mx .mx-current-card__title {
margin: 12px 0 6px;
font-size: 26px;
font-weight: 900;
color: var(--mx-ink);
line-height: 1.15;
letter-spacing: -0.01em;
}
.mx .mx-current-card__meta {
display: flex;
gap: 18px;
flex-wrap: wrap;
font-size: 13px;
font-weight: 800;
color: var(--mx-ink);
margin-bottom: 12px;
}
.mx .mx-current-card__meta span.mx-current-card__meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.mx .mx-current-card__meta-icon { display: inline-flex; }
.mx .mx-current-card__meta-icon--primary { color: var(--mx-primary); }
.mx .mx-current-card__meta-icon--success { color: var(--mx-success); }
.mx .mx-current-card__meta-icon--xp {
color: var(--mx-warning);
filter: drop-shadow(0 0 4px rgba(247, 169, 22, 0.45));
}
.mx .mx-current-card__desc {
font-size: 14px;
font-weight: 700;
color: var(--mx-muted);
line-height: 1.45;
margin: 0 0 18px;
max-width: 380px;
}
.mx .mx-current-card__cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--mx-grad);
color: var(--mx-card);
border: 2px solid transparent;
box-shadow: 0 5px 0 var(--mx-sh-primary);
padding: 12px 22px;
border-radius: var(--mx-radius-md);
font-size: 15px;
font-weight: 900;
cursor: pointer;
text-decoration: none;
transition: transform var(--mx-dur-base), box-shadow var(--mx-dur-base);
}
.mx .mx-current-card__cta:hover {
transform: translateY(-2px);
box-shadow: 0 7px 0 var(--mx-sh-primary);
}
.mx .mx-current-card__cta:active {
transform: translateY(2px);
box-shadow: 0 2px 0 var(--mx-sh-primary);
}
/* Primary CTA inside current-card: pulsing halo + shine sweep. */
.mx .mx-current-card__cta-wrap {
position: relative;
display: inline-flex;
align-self: flex-start;
width: fit-content;
isolation: isolate;
}
.mx .mx-current-card__cta-wrap::before {
content: "";
position: absolute;
/* Bottom inset extended to clear the sticker shadow under .mx-btn--xl (0 7px 0). */
inset: -10px -10px -20px -10px;
border-radius: 28px;
background: var(--mx-primary-glow);
pointer-events: none;
z-index: 0;
transform-origin: center 55%;
animation: mx-current-card-btn-halo 2.4s ease-in-out infinite;
}
.mx .mx-current-card .mx-current-card__btn--cta {
position: relative;
z-index: 1;
overflow: hidden;
isolation: isolate;
}
.mx .mx-current-card .mx-current-card__btn--cta::after {
content: "";
position: absolute;
top: -20%;
left: -90%;
width: 60%;
height: 160%;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.10) 25%,
rgba(255, 255, 255, 0.55) 50%,
rgba(255, 255, 255, 0.10) 75%,
transparent 100%
);
transform: rotate(20deg);
opacity: 0;
pointer-events: none;
z-index: 2;
animation: mx-current-card-btn-shine 3.2s ease-in-out infinite;
}
@keyframes mx-current-card-btn-halo {
0%, 100% { transform: scale(0.96); opacity: 0.5; }
50% { transform: scale(1.08); opacity: 1; }
}
@keyframes mx-current-card-btn-shine {
0%, 55% { opacity: 0; transform: translateX(0) rotate(20deg); }
72% { opacity: 0.85; }
100% { opacity: 0; transform: translateX(360px) rotate(20deg); }
}
@media (prefers-reduced-motion: reduce) {
.mx .mx-current-card__cta-wrap::before,
.mx .mx-current-card .mx-current-card__btn--cta::after {
animation: none;
}
.mx .mx-current-card__cta-wrap::before { opacity: 0.6; }
.mx .mx-current-card .mx-current-card__btn--cta::after { opacity: 0; }
}
/* Decorative aurora background behind the mascot (z-index: 0). */
.mx .mx-current-card__bg {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.mx .mx-current-card__bg::before {
content: "";
position: absolute;
right: -34px;
bottom: -62px;
width: 280px;
height: 200px;
border-radius: 50%;
background: rgba(176, 105, 255, 0.14);
filter: blur(14px);
}
.mx .mx-current-card__bg::after {
content: "";
position: absolute;
right: 36px;
bottom: 24px;
width: 210px;
height: 170px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(178, 113, 255, 0.13) 0%,
rgba(178, 113, 255, 0.07) 42%,
transparent 72%
);
}
.mx .mx-current-card__spark {
position: absolute;
display: block;
overflow: visible;
color: var(--mx-primary);
}
.mx .mx-current-card__spark svg { display: block; width: 100%; height: 100%; }
.mx .mx-current-card__spark path { fill: currentColor; }
.mx .mx-current-card__spark--purple { color: #8a55ff; }
.mx .mx-current-card__spark--pink { color: #ff9bb3; }
.mx .mx-current-card__spark--light { color: #eadfff; }
.mx .mx-current-card__spark--1 { top: 28px; right: 110px; width: 38px; height: 38px; opacity: 0.95; }
.mx .mx-current-card__spark--2 { top: 60px; right: 32px; width: 26px; height: 26px; opacity: 0.8; }
.mx .mx-current-card__spark--3 { top: 96px; right: 200px; width: 20px; height: 20px; opacity: 0.5; }
.mx .mx-current-card__spark--4 { top: 138px; right: -2px; width: 40px; height: 40px; opacity: 0.7; }
.mx .mx-current-card__spark--5 { top: 18px; right: 224px; width: 16px; height: 16px; opacity: 0.45; }
.mx .mx-current-card__spark--6 { top: 86px; right: 90px; width: 12px; height: 12px; opacity: 0.4; }
.mx .mx-current-card__spark--7 { top: 118px; right: 264px; width: 22px; height: 22px; opacity: 0.35; }
.mx .mx-current-card__spark--8 { top: 184px; right: 46px; width: 20px; height: 20px; opacity: 0.4; }
.mx .mx-current-card__fox {
position: absolute;
right: -45px;
bottom: -110px;
width: 380px;
height: 380px;
background-image: var(--mx-img-fox);
background-repeat: no-repeat;
background-size: contain;
background-position: right top;
pointer-events: none;
z-index: 1;
}
/* Scale the fox down as the card narrows so it never crowds the text.
The card sits at ~610px in the base layout, so these breakpoints only
fire once the card itself actually starts shrinking below that. */
@container mx-current-card (max-width: 600px) {
.mx .mx-current-card__fox { width: 300px; height: 300px; bottom: -90px; right: -30px; }
}
@container mx-current-card (max-width: 520px) {
.mx .mx-current-card__fox { width: 240px; height: 240px; bottom: -70px; right: -20px; }
}
@container mx-current-card (max-width: 440px) {
.mx .mx-current-card__fox { width: 190px; height: 190px; bottom: -55px; right: -16px; opacity: 0.65; }
.mx .mx-current-card__bg { opacity: 0.7; }
}
@container mx-current-card (max-width: 440px) {
.mx .mx-current-card__fox { display: none; }
.mx .mx-current-card__bg { display: none; }
}
@media (max-width: 1023px) {
.mx .mx-current-card__fox { display: none; }
.mx .mx-current-card__bg { display: none; }
}
/* ============================================================
Right rail
============================================================ */
.mx .mx-rail {
display: flex;
flex-direction: column;
gap: 16px;
position: sticky;
top: 22px;
align-self: start;
max-height: calc(100vh - 44px);
overflow-y: auto;
padding-right: 4px;
margin-right: -4px;
}
@media (max-width: 1023px) {
.mx .mx-rail { position: static; max-height: none; overflow: visible; }
}
.mx .mx-rail::-webkit-scrollbar { width: 6px; }
.mx .mx-rail::-webkit-scrollbar-thumb { background: var(--mx-border-2); border-radius: var(--mx-radius-pill); }
.mx .mx-rail-topbar {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 10px;
margin-bottom: 2px;
}
/* Icon button (used for bell) */
.mx .mx-iconbtn {
width: 48px;
height: 48px;
background: var(--mx-card);
border: 2px solid var(--mx-border);
box-shadow: var(--mx-shadow-md);
border-radius: 14px;
display: grid;
place-items: center;
cursor: pointer;
position: relative;
color: var(--mx-ink);
transition: transform var(--mx-dur-base), box-shadow var(--mx-dur-base);
}
.mx .mx-iconbtn:hover {
transform: translateY(-2px);
box-shadow: var(--mx-shadow-lg);
}
.mx .mx-iconbtn__dot {
position: absolute;
top: 8px;
right: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--mx-danger);
border: 2px solid var(--mx-card);
}
/* Profile pill */
.mx .mx-profile-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 16px 6px 6px;
background: var(--mx-card);
border: 2px solid var(--mx-border);
box-shadow: var(--mx-shadow-md);
border-radius: var(--mx-radius-pill);
text-decoration: none;
color: inherit;
cursor: pointer;
transition: transform var(--mx-dur-base), box-shadow var(--mx-dur-base);
}
/* Compact variant — round button wrapping only the avatar (mobile topbar) */
.mx .mx-profile-pill--compact {
padding: 0;
gap: 0;
border-radius: 50%;
}
.mx .mx-profile-pill:hover {
transform: translateY(-2px);
box-shadow: var(--mx-shadow-lg);
}
.mx .mx-profile-pill__avatar {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--mx-warning-soft);
border: 2px solid var(--mx-warning-100);
flex-shrink: 0;
display: grid;
place-items: center;
overflow: hidden;
font-weight: 900;
font-size: 14px;
color: var(--mx-warning-deep);
text-transform: uppercase;
}
.mx .mx-profile-pill__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mx .mx-profile-pill__name {
font-weight: 900;
font-size: 14px;
color: var(--mx-ink);
}
.mx .mx-profile-pill__caret {
width: 18px;
height: 18px;
color: var(--mx-muted);
}
/* Rail card */
.mx .mx-rail-card {
background: var(--mx-card);
border: 2px solid var(--mx-border);
box-shadow: var(--mx-shadow-lg);
border-radius: var(--mx-radius-xl);
padding: 18px;
flex-shrink: 0; /* Keep natural size; let the rail's scroll container handle overflow */
}
.mx .mx-rail-card__head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.mx .mx-rail-card__title {
font-size: 16px;
font-weight: 900;
color: var(--mx-ink);
}
.mx .mx-rail-card__link {
font-size: 12px;
font-weight: 900;
color: var(--mx-primary-d);
cursor: pointer;
text-decoration: none;
border-bottom: 2px solid var(--mx-primary-100);
}
.mx .mx-rail-card__link:hover { border-color: var(--mx-primary); }
/* Rail level (XP + hex) */
.mx .mx-rail-level {
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
border-radius: var(--mx-radius-lg);
background: var(--mx-primary-soft);
border: 2px solid var(--mx-primary-100);
margin-bottom: 14px;
}
.mx .mx-rail-level__avatar {
width: 52px;
height: 52px;
object-fit: contain;
flex-shrink: 0;
}
.mx .mx-rail-level__main { flex: 1; min-width: 0; }
.mx .mx-rail-level__top { display: flex; align-items: baseline; gap: 6px; }
.mx .mx-rail-level__num { font-size: 22px; font-weight: 900; color: var(--mx-ink); line-height: 1; }
.mx .mx-rail-level__label {
font-size: 12px;
font-weight: 900;
color: var(--mx-primary-d);
letter-spacing: 0.04em;
}
.mx .mx-rail-level__sub { font-size: 11px; font-weight: 800; color: var(--mx-muted); margin-top: 4px; }
.mx .mx-rail-level__bar {
margin-top: 6px;
height: 6px;
border-radius: var(--mx-radius-pill);
background: var(--mx-card);
border: 2px solid var(--mx-primary-100);
overflow: hidden;
}
.mx .mx-rail-level__bar > i {
display: block;
height: 100%;
background: var(--mx-grad);
border-radius: inherit;
}
/* Progress ring (svg-based) */
.mx .mx-progress-card { position: relative; overflow: hidden; }
.mx .mx-progress-card::before {
content: "";
position: absolute;
right: -80px;
bottom: -25px;
width: 300px;
height: 200px;
background-image: var(--mx-img-mountain);
background-repeat: no-repeat;
background-position: center top;
background-size: contain;
pointer-events: none;
z-index: 0;
}
.mx .mx-progress-card::after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom, transparent, var(--mx-card) 90%);
pointer-events: none;
z-index: 1;
}
.mx .mx-progress-card > * { position: relative; z-index: 2; }
.mx .mx-progress-card__body {
display: flex;
align-items: center;
gap: 8px;
margin: 4px 0 14px;
}
.mx .mx-progress-ring { width: 116px; height: 116px; position: relative; flex-shrink: 0; }
.mx .mx-progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mx .mx-progress-ring__bg { stroke: var(--mx-surface-alt); fill: none; stroke-width: 12; }
.mx .mx-progress-ring__fg {
stroke: var(--mx-primary);
fill: none;
stroke-width: 12;
stroke-linecap: round;
transition: stroke-dashoffset var(--mx-dur-slow) var(--mx-ease-out);
}
.mx .mx-progress-ring__pct {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 900;
color: var(--mx-primary-d);
}
.mx .mx-progress-ring__pct b { font-size: 22px; line-height: 1; }
.mx .mx-progress-ring__pct small {
font-size: 10px;
font-weight: 800;
color: var(--mx-muted);
margin-top: 2px;
letter-spacing: 0.04em;
}
.mx .mx-rail-meter { margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--mx-muted); }
.mx .mx-rail-meter__bar {
margin-top: 8px;
height: 8px;
border-radius: var(--mx-radius-pill);
background: var(--mx-surface-alt);
border: 2px solid var(--mx-border);
overflow: hidden;
}
.mx .mx-rail-meter__bar > i {
display: block;
height: 100%;
background: var(--mx-grad);
border-radius: inherit;
}
.mx .mx-rail-meter__foot {
margin-top: 8px;
font-size: 12px;
font-weight: 800;
color: var(--mx-primary-d);
display: flex;
align-items: center;
justify-content: space-between;
}
/* Goal card */
.mx .mx-goal-card__body {
display: flex;
align-items: center;
gap: 14px;
}
.mx .mx-goal-card__media {
position: relative;
flex-shrink: 0;
width: 88px;
height: 88px;
display: grid;
place-items: center;
overflow: visible;
}
.mx .mx-goal-card__media img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.mx .mx-goal-card__halo {
position: absolute;
inset: 6px;
z-index: 0;
border-radius: 50%;
pointer-events: none;
box-shadow:
0 0 18px 4px rgba(196, 168, 255, 0.55),
0 0 36px 14px rgba(196, 168, 255, 0.35);
animation: mx-goal-halo-pulse 2.6s ease-in-out infinite;
}
@keyframes mx-goal-halo-pulse {
0%, 100% {
opacity: 0.8;
box-shadow:
0 0 16px 3px rgba(196, 168, 255, 0.45),
0 0 30px 10px rgba(196, 168, 255, 0.25);
}
50% {
opacity: 1;
box-shadow:
0 0 22px 6px rgba(196, 168, 255, 0.65),
0 0 44px 18px rgba(196, 168, 255, 0.4);
}
}
@media (prefers-reduced-motion: reduce) {
.mx .mx-goal-card__halo {
animation: none;
}
}
.mx .mx-goal-card__spark {
position: absolute;
display: block;
overflow: visible;
pointer-events: none;
z-index: 3;
}
.mx .mx-goal-card__spark svg { display: block; width: 100%; height: 100%; }
.mx .mx-goal-card__spark path { fill: currentColor; }
.mx .mx-goal-card__spark--purple { color: #8a55ff; }
.mx .mx-goal-card__spark--pink { color: #ff9bb3; }
.mx .mx-goal-card__spark--light { color: #eadfff; }
.mx .mx-goal-card__spark--1 { top: -6px; left: -8px; width: 16px; height: 16px; opacity: 0.9; }
.mx .mx-goal-card__spark--2 { top: -4px; right: -6px; width: 12px; height: 12px; opacity: 0.85; }
.mx .mx-goal-card__spark--3 { bottom: 4px; left: -10px; width: 10px; height: 10px; opacity: 0.7; }
.mx .mx-goal-card__spark--4 { bottom: -6px; right: -8px; width: 16px; height: 16px; opacity: 0.9; }
.mx .mx-goal-card__content {
flex: 1;
min-width: 0;
}
@media (max-width: 480px) {
.mx .mx-goal-card__media { width: 72px; height: 72px; }
}
.mx .mx-goal__row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.mx .mx-goal__icon {
width: 44px;
height: 44px;
border-radius: 14px;
background: var(--mx-primary-soft);
border: 2px solid var(--mx-primary-100);
display: grid;
place-items: center;
color: var(--mx-primary-d);
flex-shrink: 0;
}
.mx .mx-goal__main { flex: 1; min-width: 0; }
.mx .mx-goal__title {
font-size: 20px;
font-weight: 900;
color: var(--mx-ink);
line-height: 1.2;
overflow-wrap: anywhere;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mx .mx-goal__sub {
font-size: 12px;
font-weight: 800;
color: var(--mx-muted);
margin-top: 3px;
overflow-wrap: anywhere;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mx .mx-goal__bar {
height: 10px;
border-radius: var(--mx-radius-pill);
background: var(--mx-surface-alt);
border: 2px solid var(--mx-border);
overflow: hidden;
}
.mx .mx-goal__bar > i { display: block; height: 100%; background: var(--mx-grad); }
.mx .mx-goal__foot {
margin-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 12px;
font-weight: 800;
color: var(--mx-muted);
}
.mx .mx-goal__foot > span {
min-width: 0;
overflow-wrap: anywhere;
}
.mx .mx-goal__check {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--mx-success);
color: var(--mx-card);
display: grid;
place-items: center;
box-shadow: 0 2px 0 var(--mx-success-deep);
}
/* Streak card */
.mx .mx-streak-card__row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.mx .mx-streak-card__flame {
display: grid;
place-items: center;
flex-shrink: 0;
}
.mx .mx-icon--flame { display: block; }
.mx .mx-streak-card__main { flex: 1; min-width: 0; }
.mx .mx-streak-card__count {
font-size: 22px;
font-weight: 900;
color: var(--mx-ink);
line-height: 1;
display: flex;
align-items: baseline;
gap: 6px;
}
.mx .mx-streak-card__count small { font-size: 12px; font-weight: 800; color: var(--mx-muted); }
.mx .mx-streak-card__sub {
font-size: 11px;
font-weight: 800;
color: var(--mx-warning-deep);
margin-top: 4px;
}
.mx .mx-streak-card__days {
display: flex;
justify-content: space-between;
gap: 4px;
}
.mx .mx-day {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 800;
color: var(--mx-muted-2);
}
.mx .mx-day__dot {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--mx-border);
background: var(--mx-card);
display: grid;
place-items: center;
color: var(--mx-muted-2);
}
.mx .mx-day.is-done .mx-day__dot {
background: var(--mx-success);
border-color: var(--mx-success-deep);
box-shadow: 0 2px 0 var(--mx-success-deep);
color: var(--mx-card);
}
.mx .mx-day.is-done { color: var(--mx-ink); }
.mx .mx-day.is-today .mx-day__dot {
border-color: var(--mx-primary);
color: var(--mx-primary-d);
}
.mx .mx-day.is-done.is-today .mx-day__dot {
background: var(--mx-success);
border-color: var(--mx-success-deep);
box-shadow: 0 2px 0 var(--mx-success-deep);
color: var(--mx-card);
}
/* Empty roadmap (no plan) */
.mx .mx-roadmap-empty { padding: 24px 0; }
/* ============================================================
Mobile — hamburger drawer + sticky rail footer + bottom sheet
============================================================ */
/* Mobile topbar inside main column — only laid out below the lg breakpoint. */
.mx .mx-home-mobile-topbar { display: none; }
.mx .mx-home-mobile-topbar__right {
display: flex;
align-items: center;
gap: 8px;
}
@media (max-width: 1023px) {
.mx .mx-home-mobile-topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
/* Floating "hanging" container — same sticker look as .mx-rail-footer. */
position: fixed;
top: calc(12px + env(safe-area-inset-top, 0px));
left: 12px;
right: 12px;
z-index: 60;
padding: 10px 14px;
background: var(--mx-card);
border: 2px solid var(--mx-border);
box-shadow: var(--mx-shadow-md);
border-radius: var(--mx-radius-xl);
margin: 0;
}
/* Compact, round controls — bell matches the profile avatar size */
.mx .mx-home-mobile-topbar .mx-iconbtn {
width: 38px;
height: 38px;
border-radius: 50%;
}
.mx .mx-home-mobile-topbar .mx-iconbtn .mx-icon {
width: 16px;
height: 16px;
}
.mx .mx-home-mobile-topbar .mx-iconbtn__dot {
top: 5px;
right: 5px;
width: 8px;
height: 8px;
}
.mx .mx-home-mobile-topbar .mx-profile-pill__avatar {
width: 38px;
height: 38px;
}
/* Hide the inline (column) right rail — its content is moved into the bottom sheet */
.mx .mx-page-3col > .mx-rail { display: none; }
/* Reserve room for the floating mobile header above and the sticky rail footer below */
.mx .mx-page-3col {
padding-top: calc(84px + env(safe-area-inset-top, 0px));
padding-bottom: 84px;
}
}
/* Sticky rail footer — visible only on mobile */
.mx .mx-rail-footer {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 70;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--mx-card);
border: 2px solid var(--mx-border);
box-shadow: var(--mx-shadow-lg);
border-radius: var(--mx-radius-xl);
font-family: inherit;
cursor: pointer;
text-align: left;
/* Honor iOS home indicator */
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.mx .mx-rail-footer__chunk {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.mx .mx-rail-footer__chunk small {
display: block;
font-size: 10px;
font-weight: 800;
color: var(--mx-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mx .mx-rail-footer__chunk b {
display: block;
font-size: 15px;
font-weight: 900;
color: var(--mx-ink);
line-height: 1.1;
}
.mx .mx-rail-footer__chunk .mx-icon { color: var(--mx-primary-d); flex-shrink: 0; }
.mx .mx-rail-footer__caret {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--mx-primary-soft);
color: var(--mx-primary-d);
flex-shrink: 0;
}
/* Bottom sheet */
.mx .mx-rail-sheet {
position: fixed;
inset: 0;
z-index: 80;
visibility: hidden;
pointer-events: none;
}
.mx .mx-rail-sheet.is-open {
visibility: visible;
pointer-events: auto;
}
.mx .mx-rail-sheet__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.45);
opacity: 0;
transition: opacity var(--mx-dur-base);
}
.mx .mx-rail-sheet.is-open .mx-rail-sheet__backdrop { opacity: 1; }
.mx .mx-rail-sheet__panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-height: 80vh;
max-height: 96vh;
background: var(--mx-bg);
border-top-left-radius: var(--mx-radius-2xl);
border-top-right-radius: var(--mx-radius-2xl);
padding: 0 0 calc(20px + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform var(--mx-dur-slow) var(--mx-ease-out);
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
}
.mx .mx-rail-sheet.is-open .mx-rail-sheet__panel { transform: translateY(0); }
.mx .mx-rail-sheet__head {
position: relative;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 10px 14px 8px;
}
.mx .mx-rail-sheet__handle {
width: 44px;
height: 4px;
background: var(--mx-border-2);
border-radius: var(--mx-radius-pill);
margin: 0;
flex-shrink: 0;
}
.mx .mx-rail-sheet__close {
position: absolute;
top: 8px;
right: 14px;
width: 36px;
height: 36px;
background: var(--mx-card);
border: 2px solid var(--mx-border);
border-radius: 50%;
display: grid;
place-items: center;
color: var(--mx-ink);
cursor: pointer;
}
.mx .mx-rail-sheet__body {
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 14px;
padding: 4px 14px 4px;
}
/* Hide the sticky footer + sheet on desktop entirely (Tailwind lg:hidden in HTML
already gates them, but enforce display:none for the sheet's fixed-positioned
layer to avoid intercepting clicks on hidden tabs). */
@media (min-width: 1024px) {
.mx .mx-rail-footer,
.mx .mx-rail-sheet { display: none !important; }
}