:root {
--bg: #f4f7fb;
--surface: #ffffff;
--surface-2: #f8fafc;
--line: #dbe4ee;
--line-strong: #c7d3e0;
--text: #0f172a;
--text-2: #334155;
--text-3: #64748b;
--text-4: #94a3b8;
--primary: #0f4c81;
--primary-2: #1d6fb8;
--primary-soft: #eaf3fb;
--accent: #14b8a6;
--success: #15803d;
--warning: #b45309;
--danger: #b91c1c;
--shadow-sm: 0 6px 16px rgba(15, 23, 42, 0.06);
--shadow-md: 0 16px 40px rgba(15, 23, 42, 0.08);
--shadow-lg: 0 24px 56px rgba(15, 23, 42, 0.12);
--radius-sm: 12px;
--radius-md: 18px;
--radius-lg: 26px;
--nav-h: 76px;
--max-w: 1280px;
--pad-x: clamp(20px, 4vw, 40px);
--font: 'Manrope', system-ui, sans-serif;}* { box-sizing: border-box; margin: 0; padding: 0; }@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }body {
font-family: var(--font);
background: linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;}img, svg { max-width: 100%; height: auto; }h1 { font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; }h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; font-weight: 800; }h3 { font-size: 1.2rem; font-weight: 700; }p { color: var(--text-3); }.mt-10 { margin-top: 10px; }.mt-16 { margin-top: 16px; }.mt-18 { margin-top: 18px; }.text-primary { color: var(--primary); }.tag-wrap { margin-top: 8px; }.container {
width: min(100%, var(--max-w));
margin: 0 auto;
padding-left: var(--pad-x);
padding-right: var(--pad-x);}.section { padding: 52px 0; }.courses-page-section { padding-top: 28px; }main { padding-top: var(--nav-h); }.lms-page-section { padding-top: 8px; }.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--primary-soft);
color: var(--primary);
border: 1px solid rgba(15, 76, 129, 0.12);
border-radius: 999px;
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;}.site-nav {
position: fixed;
inset: 0 0 auto 0;
height: var(--nav-h);
z-index: 1000;
background:
linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(17, 39, 64, 0.94)),
radial-gradient(circle at 10% 0%, rgba(20, 184, 166, 0.14), transparent 36%);
backdrop-filter: blur(18px);
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);}.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; font-weight: 800; font-size: 1.05rem; }.brand-mark {
width: 42px;
height: 42px;
border-radius: 8px;
background: linear-gradient(135deg, #38bdf8, #14b8a6);
color: white;
display: grid;
place-items: center;
overflow: hidden;
box-shadow: 0 14px 28px rgba(20, 184, 166, 0.22);}.brand-mark img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;}.nav-links { display: flex; align-items: center; gap: 8px; list-style: none; }.nav-links a {
text-decoration: none;
color: rgba(226, 232, 240, 0.78);
font-size: 0.92rem;
font-weight: 600;
padding: 10px 14px;
border-radius: 12px;
transition: 0.2s ease;}.nav-links a:hover,.nav-links a.active {
color: #fff;
background: rgba(255, 255, 255, 0.11);}.nav-ex-dropdown { position: relative; }.nav-ex-dropdown summary {
list-style: none;
cursor: pointer;
color: rgba(226, 232, 240, 0.78);
font-size: 0.92rem;
font-weight: 600;
padding: 10px 14px;
border-radius: 12px;}.nav-ex-dropdown summary::-webkit-details-marker { display: none; }.nav-ex-dropdown[open] summary,.nav-ex-dropdown summary:hover,.nav-ex-dropdown summary.active { color: #fff; background: rgba(255, 255, 255, 0.11); }.nav-ex-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 140px;
background: #0f172a;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 12px;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
padding: 6px;
display: grid;
gap: 2px;}.nav-ex-menu a { padding: 8px 10px; }.nav-right { display: flex; align-items: center; gap: 12px; }.nav-account-dropdown {
position: relative;}.nav-account-dropdown summary {
list-style: none;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
color: #fff;
font-size: 0.88rem;
font-weight: 800;
padding: 7px 10px 7px 7px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.08);}.nav-account-dropdown summary::-webkit-details-marker { display: none; }.nav-account-dropdown.active summary,.nav-account-dropdown[open] summary {
background: rgba(255, 255, 255, 0.14);}.nav-account-avatar {
width: 32px;
height: 32px;
display: inline-grid;
place-items: center;
border-radius: 999px;
background: #e2f6ff;
color: #0f4c81;
font-size: 0.76rem;
font-weight: 900;}.nav-account-menu {
position: absolute;
top: calc(100% + 10px);
right: 0;
width: 260px;
display: grid;
gap: 3px;
padding: 8px;
border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 18px;
background: #fff;
box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18);}.nav-account-menu-head {
padding: 12px 12px 10px;
margin-bottom: 4px;
border-bottom: 1px solid var(--line);}.nav-account-menu-head strong,.nav-account-menu-head span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}.nav-account-menu-head strong {
color: var(--text);
font-size: 0.92rem;}.nav-account-menu-head span {
color: var(--text-3);
font-size: 0.78rem;
margin-top: 2px;}.nav-account-menu a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 12px;
color: var(--text-2);
text-decoration: none;
font-size: 0.9rem;
font-weight: 800;}.nav-account-menu a:hover {
background: var(--surface-2);
color: var(--primary);}.nav-account-menu a.danger {
color: var(--danger);}.nav-toggle {
display: none;
width: 46px;
height: 46px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 15px;
background: rgba(255, 255, 255, 0.1);
color: #fff;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.12rem;
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.24);}.nav-mobile {
display: none;
border-top: 1px solid rgba(148, 163, 184, 0.2);
background:
linear-gradient(180deg, rgba(15, 23, 42, 0.99), rgba(17, 39, 64, 0.98)),
radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.12), transparent 35%);
backdrop-filter: blur(18px);
padding: 14px var(--pad-x) calc(18px + env(safe-area-inset-bottom));
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);}.nav-mobile a {
display: block;
text-decoration: none;
color: rgba(226, 232, 240, 0.82);
font-size: 0.95rem;
font-weight: 700;
padding: 13px 12px;
border-radius: 14px;}.nav-mobile a.active,.nav-mobile a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.1);}.nav-mobile > span {
display: block;
color: rgba(148, 163, 184, 0.9);
padding: 12px 12px 4px;
font-size: .76rem;
text-transform: uppercase;
letter-spacing: .08em;}.nav-mobile-actions {
display: grid;
gap: 10px;
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(148, 163, 184, 0.18);}.site-nav .btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.18);}.site-nav .btn-secondary:hover {
background: rgba(255, 255, 255, 0.16);}.site-nav .nav-login-btn,
.site-nav .nav-login-btn:hover,
.site-nav .nav-login-btn:focus-visible {
color: #fff;}.site-nav .btn-primary {
background: linear-gradient(135deg, #ffc107, #f59e0b);
color: #111827;
box-shadow: 0 14px 28px rgba(245, 158, 11, 0.24);}.btn {
border: none;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
transition: 0.22s ease;
white-space: nowrap;
font-family: var(--font);
font-weight: 700;
border-radius: 14px;}.btn-sm { padding: 10px 16px; font-size: 0.86rem; }.btn-md { padding: 13px 18px; font-size: 0.92rem; }.btn-lg { padding: 15px 22px; font-size: 0.96rem; }.btn-primary {
background: linear-gradient(135deg, #ffc107, #f59e0b);
color: #111827;
box-shadow: var(--shadow-sm);}.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }.btn-secondary {
background: white;
color: var(--text-2);
border: 1px solid var(--line);}.btn-secondary:hover { border-color: var(--primary-2); color: var(--primary); }.btn-ghost { background: transparent; color: var(--text-3); }.btn-ghost:hover { background: var(--surface-2); color: var(--text); }.btn-primary[style*="#0f4c81"] { color: #fff; }.btn-block { width: 100%; }.tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
border-radius: 999px;
font-size: 0.72rem;
font-weight: 700;
border: 1px solid transparent;}.tag-neutral { background: #f1f5f9; color: var(--text-3); border-color: #e2e8f0; }.tag-primary { background: var(--primary-soft); color: var(--primary); border-color: rgba(15, 76, 129, 0.12); }.tag-success { background: #eefbf2; color: var(--success); border-color: rgba(21, 128, 61, 0.16); }.tag-warning { background: #fff7ed; color: #111827; border-color: rgba(180, 83, 9, 0.16); }.tag-danger { background: #fef2f2; color: var(--danger); border-color: rgba(185, 28, 28, 0.14); }.tag-lesen { background: rgba(2,132,199,0.08); color: #0284c7; }.tag-hoeren { background: rgba(202,138,4,0.1); color: #a16207; }.tag-schreiben { background: rgba(22,163,74,0.08); color: #15803d; }.tag-sprechen { background: rgba(220,38,38,0.08); color: #b91c1c; }.tag-grammatik { background: rgba(124,58,237,0.08); color: #6d28d9; }.tag-wortschatz { background: rgba(15,118,110,0.08); color: #0f766e; }.hero {
position: relative;
overflow: hidden;}/* ===== HERO — FULL BACKGROUND ===== */.hero--fullbg {
background: #0c1828;
display: flex;
align-items: center;
min-height: 100vh;
min-height: 100svh;
margin-top: calc(-1 * var(--nav-h));}.hero-bg {
position: absolute;
inset: 0;
z-index: 0;}.hero-bg-img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center 25%;
display: block;}.hero-bg-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
135deg,
rgba(8, 16, 36, 0.90) 0%,
rgba(12, 44, 88, 0.82) 60%,
rgba(8, 28, 58, 0.78) 100%
);}.hero-center {
position: relative;
z-index: 1;
text-align: center;
max-width: 760px;
margin: 0 auto;
padding: calc(var(--nav-h) + 52px) 0 140px;
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;}.hero-center h1 {
font-size: clamp(2.2rem, 4.5vw, 3.8rem);
line-height: 1.1;
color: white;
margin: 0;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.4);}.hero-brand-pill {
display: inline-block;
color: #ffffff;
margin-top: 0.22em;
text-decoration: underline wavy #38bdf8;
text-underline-offset: 6px;
text-decoration-thickness: 2px;}.hero--fullbg .hero-center p {
color: rgba(255, 255, 255, 0.72);
max-width: 580px;
font-size: 1.08rem;
line-height: 1.85;
margin: 0;}.hero-eyebrow {
background: rgba(255, 255, 255, 0.10);
border-color: rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.88);}.hero-center .hero-actions { justify-content: center; }.hero-center .hero-stats { justify-content: center; max-width: 480px; margin-left: auto; margin-right: auto; }/* stat-card on dark hero */.hero--fullbg .stat-card {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);}.hero--fullbg .stat-card strong { color: white; }.hero--fullbg .stat-card span { color: rgba(255, 255, 255, 0.62); }.hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 34px;
align-items: center;
min-height: calc(100vh - var(--nav-h));
padding: 42px 0 50px;}.hero-copy h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.12; }.hero-copy p { margin-top: 18px; max-width: 640px; font-size: 1.05rem; line-height: 1.8; }.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }.stat-card {
background: rgba(255,255,255,0.78);
border: 1px solid rgba(219, 228, 238, 0.9);
border-radius: var(--radius-md);
padding: 20px;
box-shadow: var(--shadow-sm);}.stat-card strong { display: block; font-size: 1.8rem; color: var(--text); font-weight: 800; letter-spacing: -0.04em; margin-bottom: 4px; }.stat-card span { color: var(--text-3); font-size: 0.84rem; font-weight: 600; }.hero-panel {
background: linear-gradient(180deg, #0f172a 0%, #132238 100%);
color: white;
border-radius: 28px;
padding: 28px;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255,255,255,0.06);}.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }.panel-brand { font-size: 1.1rem; font-weight: 800; }.panel-brand small { display: block; color: rgba(255,255,255,0.65); font-size: 0.78rem; font-weight: 500; margin-top: 4px; }.panel-badge { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); color: #cde6ff; }.hero-list { display: grid; gap: 12px; }.hero-list-item {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 16px 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
cursor: pointer;
text-decoration: none;
color: inherit;}.hero-list-item h4 { font-size: 0.95rem; font-weight: 700; margin-bottom: 3px; }.hero-list-item p { color: rgba(255,255,255,0.66); font-size: 0.8rem; }.hero-list-item strong { font-size: 1.1rem; font-weight: 800; }.hero-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }.hero-mini-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; padding: 16px; }.hero-mini-card span { display: block; color: rgba(255,255,255,0.6); font-size: 0.74rem; margin-bottom: 6px; }.hero-mini-card strong { font-size: 1.25rem; font-weight: 800; }.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }.section-head p { max-width: 720px; margin-top: 12px; }.filters { display: flex; gap: 10px; flex-wrap: wrap; }.tab {
border: 1px solid var(--line);
background: white;
color: var(--text-3);
padding: 10px 14px;
border-radius: 12px;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
transition: 0.2s ease;
min-height: 44px;}.tab:hover,.tab.active { background: var(--primary); color: white; border-color: var(--primary); }.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }.exam-card { padding: 22px; transition: 0.22s ease; cursor: pointer; position: relative; overflow: hidden; }.exam-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }.exam-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 16px; }.level-pill {
width: 58px;
height: 58px;
border-radius: 18px;
display: grid;
place-items: center;
font-size: 1.15rem;
font-weight: 800;
color: white;
background: var(--accent-color, var(--primary));}.exam-card h3 { margin-bottom: 6px; font-size: 1.02rem; }.muted { color: var(--text-3); font-size: 0.84rem; }.skill-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }.course-card {
padding: 0;
border-radius: 24px;
background:
linear-gradient(180deg, #fff, #f8fbff);
overflow: hidden;}.course-card[data-course-url] {
cursor: pointer;}.course-card[data-course-url]:focus-visible {
outline: 3px solid rgba(15, 76, 129, 0.28);
outline-offset: 4px;}.course-card-media {
position: relative;
height: 190px;
overflow: hidden;
background: linear-gradient(135deg, var(--accent-color, #0f4c81), #0e7490);}.course-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: translateZ(0);
transition: transform 0.28s ease;}.course-card:hover .course-card-media img { transform: scale(1.06); }.course-card-placeholder {
height: 100%;
display: grid;
place-items: center;
color: rgba(255,255,255,.88);
font-size: 3rem;}.course-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15,23,42,.02) 0%, rgba(15,23,42,.44) 100%);}.course-level-badge,.course-lessons-badge {
position: absolute;
z-index: 1;
display: inline-flex;
align-items: center;
min-height: 28px;
border-radius: 999px;
padding: 5px 10px;
font-size: 0.7rem;
font-weight: 850;
backdrop-filter: blur(12px);}.course-level-badge {
left: 12px;
bottom: 12px;
color: #0f172a;
background: rgba(255,255,255,.92);
box-shadow: 0 10px 24px rgba(15,23,42,.18);}.course-lessons-badge {
right: 12px;
top: 12px;
color: #fff;
background: rgba(15,23,42,.46);
border: 1px solid rgba(255,255,255,.26);}.course-favorite-form {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
margin: 0;}.course-card-media > .course-favorite-btn {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;}.course-favorite-btn {
width: 42px;
height: 42px;
display: inline-grid;
place-items: center;
border: 1px solid rgba(255,255,255,.56);
border-radius: 999px;
background: rgba(15,23,42,.48);
color: #fff;
text-decoration: none;
box-shadow: 0 12px 28px rgba(15,23,42,.18);
backdrop-filter: blur(12px);
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;}.course-favorite-btn:hover,.course-favorite-btn.active {
transform: translateY(-1px);
border-color: #fff;
background: #fff;
color: #dc2626;}.course-favorite-btn i {
font-size: 1.05rem;}.course-card-body {
padding: 18px 20px 20px;}.course-category-chip {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 6px 10px;
margin-bottom: 12px;
color: var(--accent-color, #0f4c81);
background: rgba(255,255,255,0.9);
border: 1px solid rgba(15,76,129,0.18);
font-size: 0.72rem;
font-weight: 800;}.course-card h3 {
font-size: 1.08rem;
line-height: 1.25;}.course-card .muted {
display: -webkit-box;
min-height: 42px;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;}.course-price-row {
display: flex;
align-items: baseline;
gap: 7px;
flex-wrap: wrap;
margin-top: 14px;}.course-price-current {
color: #0f172a;
font-size: 1.26rem;
font-weight: 900;
letter-spacing: -0.03em;}.course-price-free {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 999px;
color: #065f46;
background: linear-gradient(135deg, #dcfce7, #ccfbf1);
border: 1px solid rgba(5, 150, 105, 0.22);
box-shadow: none;
font-size: .68rem;
font-weight: 900;
letter-spacing: .06em;
text-transform: uppercase;}.course-price-old {
color: #a3adba;
font-size: .8rem;
font-weight: 700;
text-decoration: line-through;}.course-price-promo {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 4px 8px;
color: #b45309;
background: #fffbeb;
border: 1px solid #fde68a;
font-size: .68rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .06em;}@media (min-width: 861px) {
.course-card .card-actions {
margin-top: 20px !important;
}
}.course-card-actions {
margin-top: 14px;
}.course-card-actions .btn {
flex: 1 1 130px;
justify-content: center;
}.course-detail-modal {
position: fixed;
inset: 0;
z-index: 1200;
display: grid;
place-items: center;
padding: 18px;
}.course-detail-modal.hidden {
display: none;
}.course-detail-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.52);
backdrop-filter: blur(3px);
}.course-detail-dialog {
position: relative;
width: min(560px, 100%);
max-height: calc(100dvh - 36px);
overflow: auto;
border-radius: 18px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
padding: 20px;
}.course-detail-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
margin-bottom: 14px;
}.course-detail-head h3 {
margin-top: 8px;
font-size: 1.25rem;
}.course-detail-description {
font-size: .92rem;
line-height: 1.7;
color: var(--text-3);
margin-bottom: 16px;
}.course-detail-actions {
justify-content: flex-end;
}@media (max-width: 640px) {
.course-card-actions {
margin-top: 18px;
flex-direction: column;
align-items: stretch;
}
.course-card-actions .btn {
flex: none;
width: 100%;
}
.course-detail-actions .btn {
width: 100%;
}
}.meta-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 14px;
background: var(--surface-2);
border: 1px solid #edf2f7;
border-radius: 16px;
margin-bottom: 14px;}.meta-grid span { display: block; font-size: 0.7rem; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; font-weight: 700; }.meta-grid strong { font-size: 0.92rem; color: var(--text); font-weight: 700; }.progress-wrap { margin-bottom: 16px; }.progress-head { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-3); margin-bottom: 8px; font-weight: 600; }.bar { height: 8px; background: #e8eef5; border-radius: 999px; overflow: hidden; }.bar > div { height: 100%; border-radius: inherit; background: var(--accent-color, var(--primary)); transition: width 0.8s ease; }.card-actions { display: flex; gap: 10px; flex-wrap: wrap; }.levels-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }.level-card { padding: 22px; transition: 0.2s ease; cursor: pointer; }.level-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }.level-badge {
width: 62px;
height: 62px;
border-radius: 18px;
display: grid;
place-items: center;
color: white;
font-size: 1.2rem;
font-weight: 800;
margin-bottom: 16px;}.level-card h3 { margin-bottom: 6px; }.level-card p { font-size: 0.92rem; margin-bottom: 16px; }.level-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 0.84rem; color: var(--text-3); font-weight: 600; }.detail-shell { display: grid; grid-template-columns: 320px 1fr; gap: 20px; margin-top: 20px; }.side-panel, .main-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-sm); }.side-panel { padding: 24px; }.main-panel { padding: 0; overflow: hidden; }.detail-header { padding: 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }.detail-tabs { display: flex; gap: 10px; flex-wrap: wrap; }.detail-tab {
border: 1px solid var(--line);
background: var(--surface-2);
color: var(--text-3);
padding: 10px 14px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;}.detail-tab.active { background: var(--primary); color: white; border-color: var(--primary); }.detail-panel { display: none; padding: 24px; }.detail-panel.active { display: block; }.module-list { display: grid; gap: 14px; }.module-item {
border: 1px solid var(--line);
border-radius: 18px;
padding: 18px;
background: var(--surface-2);
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 16px;
align-items: center;}.module-num {
width: 56px;
height: 56px;
border-radius: 16px;
display: grid;
place-items: center;
background: var(--primary-soft);
color: var(--primary);
font-weight: 800;
font-size: 1rem;}.module-item h4 { font-size: 0.98rem; margin-bottom: 5px; }.module-item p { font-size: 0.85rem; margin-bottom: 10px; }.module-right { text-align: right; min-width: 110px; }.module-right span { display: block; font-size: 0.76rem; color: var(--text-4); margin-bottom: 10px; }.lms-shell {
display: grid;
grid-template-columns: 340px 1fr;
gap: 18px;
align-items: start;}.lms-mobile-bar { display: none; margin: 10px 0 12px; }.lms-nav-backdrop { display: none; }.lms-nav {
padding: 16px;
position: sticky;
top: calc(var(--nav-h) + 14px);
border: 1px solid var(--line);
border-radius: 8px;
box-shadow: var(--shadow-sm);}.lms-nav-head h3 { font-size: 1rem; margin: 0; }.lms-nav-head p { font-size: 0.82rem; margin-bottom: 10px; }
.lms-nav-head-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lms-nav-progress { margin-top: 10px; }
.lms-nav-progress-bar { display: block; height: 7px; border-radius: 999px; background: rgba(15,76,129,0.1); overflow: hidden; }
.lms-nav-progress-bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f4c81, #0e7490); transition: width 0.5s ease; }
.lms-nav-progress-label { display: block; margin-top: 6px; font-size: 0.76rem; font-weight: 800; color: var(--text-3); }
.lms-nav-resume {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
margin-bottom: 14px;
padding: 9px 12px;
border-radius: 12px;
background: var(--primary-soft);
border: 1px solid rgba(15,76,129,0.16);
color: var(--primary);
text-decoration: none;
font-size: 0.84rem;
font-weight: 850;
transition: background 0.18s ease, border-color 0.18s ease;
}
.lms-nav-resume span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lms-nav-resume:hover { background: color-mix(in srgb, var(--primary) 14%, #fff); border-color: rgba(15,76,129,0.3); }
/* Badge Übung sur une leçon (sidebar) */
.lms-lesson-ubung {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 6px;
padding: 2px 8px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--text-3);
font-size: 0.66rem;
font-weight: 850;
letter-spacing: 0.03em;
text-transform: uppercase;
width: max-content;
}
.lms-lesson-ubung.is-done { background: #dcfce7; border-color: rgba(21,128,61,0.2); color: #15803d; }
.lms-nav-close { display: none; }.lms-module-chip {
display: inline-block;
background: #0f4c81;
color: #fff;
border-radius: 999px;
font-size: 0.7rem;
font-weight: 700;
padding: 5px 10px;}.lms-lesson-index { display: grid; gap: 10px; max-height: 62vh; overflow: auto; padding-right: 4px; }.lms-lesson-link {
display: grid;
grid-template-columns: 86px minmax(0, 1fr) 28px;
gap: 12px;
align-items: center;
text-decoration: none;
padding: 9px;
background:
linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.9)),
radial-gradient(circle at 12% 0%, rgba(14,116,144,.08), transparent 34%);
color: inherit;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
position: relative;
overflow: hidden;
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;}.lms-lesson-link.active::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: #0f4c81;
transition: background 0.18s ease;}.lms-lesson-link:hover {
border-color: rgba(15, 76, 129, 0.28);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.11);
transform: translateY(-1px);}.lms-lesson-link.active {
border-color: rgba(15, 76, 129, 0.45);
background:
linear-gradient(135deg, #eef7ff, #ffffff),
radial-gradient(circle at 14% 0%, rgba(15, 76, 129, 0.14), transparent 38%);}.lms-lesson-link.done {
border-color: rgba(22, 163, 74, 0.28);
background:
linear-gradient(135deg, #f0fdf4, #ffffff),
radial-gradient(circle at 12% 0%, rgba(22, 163, 74, 0.12), transparent 36%);}.lms-lesson-thumb {
width: 86px;
aspect-ratio: 16 / 10;
border-radius: 14px;
overflow: hidden;
background:
linear-gradient(135deg, rgba(15, 76, 129, 0.85), rgba(14, 116, 144, 0.65)),
#0f172a;
position: relative;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);}.lms-lesson-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(1.05) contrast(1.02);
transition: transform 0.24s ease, opacity 0.24s ease;}.lms-lesson-link:hover .lms-lesson-thumb img { transform: scale(1.05); }.lms-lesson-thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 35%, rgba(15, 23, 42, 0.48));}.lms-lesson-thumb-play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255,255,255,.92);
color: #0f4c81;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
font-size: 0.66rem;}.lms-lesson-thumb-play i {
transform: translateX(1px);}
/* Leçon active : « En lecture » + égaliseur animé (remplace la barre latérale) */
.lms-lesson-link.active::before { display: none; }
.lms-lesson-now { display: none; }
.lms-eq { display: none; }
.lms-lesson-link.active .lms-lesson-now {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 2px;
padding: 2px 8px;
border-radius: 999px;
background: #0f4c81;
color: #fff;
font-size: 0.62rem;
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
width: max-content;
}
.lms-lesson-link.active .lms-lesson-thumb-play {
background: #fff;
box-shadow: 0 8px 20px rgba(15, 76, 129, 0.3);
}
.lms-lesson-link.active .lms-lesson-thumb-play i { display: none; }
.lms-lesson-link.active .lms-eq {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 11px;
}
.lms-eq > span {
width: 3px;
height: 100%;
border-radius: 2px;
background: #0f4c81;
transform-origin: bottom;
animation: lms-eq 0.9s ease-in-out infinite;
}
.lms-eq > span:nth-child(2) { animation-delay: 0.18s; }
.lms-eq > span:nth-child(3) { animation-delay: 0.36s; }
@keyframes lms-eq {
0%, 100% { transform: scaleY(0.35); }
50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
.lms-eq > span { animation: none; height: 70%; }
}
.lms-accordion { display: grid; gap: 10px; }.lms-acc-item {
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
overflow: hidden;}.lms-acc-head {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 14px;}.lms-acc-head::-webkit-details-marker { display: none; }.lms-acc-head h4 { font-size: 0.92rem; margin: 8px 0 2px; }.lms-acc-head p { font-size: 0.78rem; color: var(--text-3); }.lms-acc-head i { color: var(--text-3); transition: transform 0.2s ease; }.lms-acc-item[open] .lms-acc-head i { transform: rotate(180deg); }.lms-acc-item .lms-lesson-index {
max-height: none;
padding: 0 10px 10px;}.lms-lesson-meta {
display: grid;
gap: 7px;
min-width: 0;}.lms-lesson-kicker {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
color: var(--text-4);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;}.lms-lesson-action {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(15, 76, 129, 0.18);
border-radius: 999px;
font-size: 0.62rem;
line-height: 1;
color: #0f4c81;
background: #fff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);}.lms-lesson-action i { transform: translateX(1px); }.lms-lesson-link.done .lms-lesson-action {
color: #15803d;
border-color: #86efac;
background: #dcfce7;}.lms-lesson-link.done .lms-lesson-action i { transform: none; }.lms-lesson-meta strong {
display: -webkit-box;
color: var(--text-2);
font-size: 0.9rem;
font-weight: 850;
line-height: 1.25;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;}.lms-lesson-progress {
display: block;
height: 5px;
border-radius: 999px;
background: rgba(15, 76, 129, 0.08);
overflow: hidden;}.lms-lesson-progress-bar {
display: block;
width: var(--lesson-progress, 0%);
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #0f4c81, #0e7490);
transition: width 0.2s ease;}.lms-lesson-link.done .lms-lesson-progress-bar {
width: 100%;
background: linear-gradient(90deg, #16a34a, #22c55e);}.lms-main { padding: 16px; }#lms-main { scroll-margin-top: 85px; }.lms-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }.lms-topbar h3 { font-size: 1.06rem; }.lms-tags { display: flex; gap: 8px; flex-wrap: wrap; }.lms-uncomplete-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 34px;
border: 1px solid transparent;
border-radius: 10px;
padding: 8px 16px;
color: #fff;
background: #0f4c81;
font: inherit;
font-size: .82rem;
font-weight: 800;
cursor: pointer;
transition: background .18s ease, transform .18s ease, box-shadow .18s ease;}.lms-uncomplete-btn:hover {
background: #0d3f6b;
box-shadow: 0 8px 18px rgba(15, 23, 42, .12);
transform: translateY(-1px);}.lms-uncomplete-btn:disabled {
opacity: .65;
cursor: wait;
transform: none;}.lms-lesson-nav-panel {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
align-items: stretch;
margin: 16px 0 0;
padding: 8px;
border: 1px solid rgba(15, 76, 129, 0.1);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.92)),
radial-gradient(circle at 12% 0%, rgba(15,76,129,.08), transparent 34%);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);}.lms-lesson-nav-panel.compact { margin-top: 18px; }.lms-nav-card {
min-height: 64px;
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 9px;
align-items: center;
padding: 9px 10px;
border: 1px solid rgba(15, 76, 129, 0.1);
border-radius: 15px;
background: #fff;
color: inherit;
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;}.lms-nav-card-next {
grid-template-columns: minmax(0, 1fr) 34px;
text-align: right;}.lms-nav-card:not(.disabled):hover {
transform: translateY(-1px);
border-color: rgba(15, 76, 129, 0.28);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);}.lms-nav-card.disabled {
opacity: .55;
cursor: not-allowed;}.lms-nav-card-icon {
width: 34px;
height: 34px;
display: inline-grid;
place-items: center;
border-radius: 12px;
color: #0f4c81;
background: #eaf3fb;}.lms-nav-card small {
display: block;
margin-bottom: 3px;
color: var(--text-4);
font-size: .64rem;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;}.lms-nav-card strong {
display: -webkit-box;
overflow: hidden;
color: var(--text-2);
font-size: .8rem;
line-height: 1.25;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;}.lms-player-wrap {
position: relative;
width: 100%;
padding-bottom: 56.25%;
border-radius: 16px;
overflow: hidden;
background: #0f172a;
box-shadow: var(--shadow-sm);}.lms-player-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;}.lesson-ubung {
margin-top: 16px;}.lesson-ubung-card {
display: grid;
grid-template-columns: 54px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
padding: 14px;
border: 1px solid rgba(15, 76, 129, 0.12);
border-radius: 20px;
background:
linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,249,255,.9)),
radial-gradient(circle at 8% 0%, rgba(15, 76, 129, .09), transparent 34%);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);}.lesson-ubung-icon {
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 18px;
color: #fff;
background: linear-gradient(135deg, #0f4c81, #0e7490);
box-shadow: 0 10px 22px rgba(15, 76, 129, 0.24);}.lesson-ubung-copy span {
display: inline-flex;
margin-bottom: 4px;
color: #0f4c81;
font-size: .72rem;
font-weight: 850;
letter-spacing: .08em;
text-transform: uppercase;}.lesson-ubung-copy h3 {
margin: 0;
font-size: .98rem;
line-height: 1.25;}.lesson-ubung-copy p {
margin: 4px 0 0;
color: var(--text-3);
font-size: .8rem;}.lesson-ubung-main-btn {
white-space: nowrap;
background: #0f4c81;
color: #fff;}.lesson-ubung-picker {
margin-top: 12px;}.lesson-ubung-list {
margin-top: 10px;}.lesson-ubung-list:first-of-type {
margin-top: 0;}.lms-lesson-footer {
margin-top: 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;}.lms-lesson-footer p { font-size: 0.86rem; color: var(--text-3); }.filters-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }.search {
flex: 1;
min-width: 220px;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: white;
border: 1px solid var(--line);
border-radius: 14px;
box-shadow: var(--shadow-sm);}.search input { border: none; outline: none; background: transparent; width: 100%; font: inherit; color: var(--text); }.search i { color: var(--text-4); }.exercise-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }.exercise-card { background: white; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-sm); }.exercise-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; align-items: start; }.head-tags { display: grid; gap: 8px; justify-items: end; }.level-badge-mini { border: none; }.exercise-head h3 { font-size: 1rem; margin-bottom: 4px; }.exercise-body { padding: 18px 20px; }.exercise-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }.exercise-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-3); font-weight: 700; }.question { font-size: 0.94rem; color: var(--text-2); font-weight: 600; line-height: 1.65; margin-bottom: 14px; }.options { display: grid; gap: 10px; }.option {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 14px;
cursor: pointer;
transition: 0.18s ease;
color: var(--text-2);
font-size: 0.88rem;
min-height: 44px;}.option:hover { border-color: var(--line-strong); }.option:focus:not(:focus-visible),.option:active {
outline: none;
box-shadow: none;
border-color: var(--line);}.option.selected {
border-color: var(--line);
background: #dbeafe;
color: #0b2545;}.option.correct { background: #eefbf2; border-color: rgba(21,128,61,0.2); color: var(--success); }.option.wrong { background: #fef2f2; border-color: rgba(185,28,28,0.14); color: var(--danger); }.blank-in, .exercise-textarea {
width: 100%;
border: 1px solid var(--line);
background: white;
border-radius: 12px;
padding: 12px 14px;
font: inherit;
color: var(--text);
outline: none;}.exercise-textarea { min-height: 110px; resize: vertical; }.match-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.mcell { padding: 11px 12px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; font-size: 0.84rem; text-align: center; cursor: pointer; }.mcell.sel { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }.exercise-course-accordion {
display: grid;
gap: 14px;}.exercise-course-group {
overflow: hidden;
border: 1px solid rgba(15,76,129,0.16);
border-radius: 22px;
background:
linear-gradient(135deg, rgba(255,255,255,.98), rgba(248,250,252,.94)),
radial-gradient(circle at 0% 0%, rgba(15,76,129,0.08), transparent 32%);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);}.exercise-course-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
padding: 18px;
cursor: pointer;}.exercise-course-head::-webkit-details-marker { display: none; }.exercise-course-head h3 {
margin: 0;
color: #0f172a;
font-size: 1.04rem;}.exercise-course-head p {
max-width: 780px;
margin-top: 6px;
color: var(--text-3);
font-size: .86rem;
line-height: 1.6;}.exercise-course-meta {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--accent-color, #0f4c81);
white-space: nowrap;}.exercise-course-meta strong {
font-size: .86rem;}.exercise-course-meta i {
color: var(--text-4);
transition: transform .2s ease;}.exercise-course-group[open] .exercise-course-meta i {
transform: rotate(180deg);}.exercise-course-list {
padding: 0 18px 18px;
display: grid;
gap: 10px;}/* ===== EXERCISE TYPE TOKENS ===== */.ex-type-quiz
{ --ex-color: var(--primary);
--ex-bg: rgba(15,76,129,0.09); }.ex-type-gap
 { --ex-color: var(--success);
--ex-bg: rgba(21,128,61,0.09); }.ex-type-cloze { --ex-color: #7c3aed;
 --ex-bg: rgba(124,58,237,0.09); }.ex-type-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 13px;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 700;
background: var(--ex-bg);
color: var(--ex-color);
border: 1px solid rgba(0,0,0,0.12);}/* ===== EXERCISE LEVEL SELECTION PAGE ===== */.page-hero-head {
text-align: center;
max-width: 620px;
margin: 0 auto 44px;}.page-hero-head h1 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }.page-hero-head p { margin-top: 14px; font-size: 1.02rem; }.exercise-type-legend {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 22px;
flex-wrap: wrap;}.level-exercise-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 20px;}.level-exercise-card {
background: var(--surface);
border: 1px solid var(--line);
border-top: 3px solid var(--lv-color, var(--primary));
border-radius: var(--radius-lg);
padding: 24px;
text-decoration: none;
color: var(--text);
display: flex;
flex-direction: column;
gap: 8px;
transition: 0.22s ease;
box-shadow: var(--shadow-sm);}.level-exercise-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--lv-color, var(--primary));
border-top-color: var(--lv-color, var(--primary));}.level-exercise-card-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;}.level-exercise-badge {
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--lv-color, var(--primary));
color: white;
display: grid;
place-items: center;
font-size: 1.05rem;
font-weight: 800;
flex-shrink: 0;}.level-exercise-count {
font-size: 0.76rem;
font-weight: 700;
color: var(--text-3);
background: var(--surface-2);
border: 1px solid var(--line);
border-radius: 999px;
padding: 4px 10px;}.level-exercise-card h3 { font-size: 1.02rem; font-weight: 700; }.level-exercise-card > p { font-size: 0.84rem; color: var(--text-3); line-height: 1.6; flex: 1; }.level-exercise-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 14px;
margin-top: 6px;
border-top: 1px solid var(--line);}.level-exercise-types { display: flex; gap: 6px; align-items: center; }.ex-type-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--ex-color, var(--primary));}.level-exercise-cta {
font-size: 0.8rem;
font-weight: 700;
color: var(--lv-color, var(--primary));
display: flex;
align-items: center;
gap: 5px;}/* ===== EXERCISE LEVEL DETAIL PAGE ===== */.exercises-level-head { margin-bottom: 36px; }.exercises-level-head .btn { margin-bottom: 20px; }.exercises-level-title {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 18px;}.exercises-level-title h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin: 0; }.exercises-level-title p { margin-top: 4px; font-size: 0.95rem; }.exercises-level-meta { display: flex; gap: 8px; flex-wrap: wrap; }/* ===== EXERCISE ITEM CARD ===== */.exercise-item-card {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 14px;
align-items: start;
padding: 16px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
transition: 0.18s ease;}.exercise-item-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }.exercise-item-type {
width: 44px;
height: 44px;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 1.05rem;
flex-shrink: 0;
background: var(--ex-bg);
color: var(--ex-color);}.exercise-item-top {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;}.exercise-item-top h4 { font-size: 0.95rem; font-weight: 700; margin: 0; }.exercise-kind-badge {
font-size: 0.68rem;
font-weight: 800;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0.05em;
text-transform: uppercase;
background: var(--ex-bg);
color: var(--ex-color);
flex-shrink: 0;}.exercise-item-body > p { font-size: 0.83rem; line-height: 1.6; margin-bottom: 8px; }.exercise-item-action { display: flex; align-items: flex-start; padding-top: 2px; flex-shrink: 0; }@media (max-width: 900px) {
.level-exercise-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }}@media (max-width: 640px) {
.level-exercise-grid { grid-template-columns: 1fr; }
.exercise-item-card { grid-template-columns: 36px 1fr; }
.exercise-item-action { grid-column: 2; }
.exercises-level-title { gap: 12px; }}/* ===== ACCOUNT ===== */.account-page {
padding: 34px 0 58px;}.account-avatar {
width: 64px;
height: 64px;
display: grid;
place-items: center;
flex-shrink: 0;
border-radius: 18px;
background: #0f172a;
color: #fff;
font-size: 1.15rem;
font-weight: 900;}.account-tabs-card {
padding: 18px;
border: 1px solid var(--line);
border-radius: 22px;
background: #fff;
box-shadow: var(--shadow-sm);}.account-tab-list {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 4px;
margin-bottom: 18px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface-2);}.account-tab-btn {
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 0 0 auto;
padding: 10px 14px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--text-3);
cursor: pointer;
font-family: var(--font);
font-size: 0.88rem;
font-weight: 900;
transition: 0.18s ease;}.account-tab-btn:hover {
color: var(--primary);
background: rgba(15, 76, 129, 0.06);}.account-tab-btn.active {
color: #fff;
background: #0f172a;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);}.account-tab-panel {
animation: account-panel-in 160ms ease-out;}.account-tab-panel[hidden] {
display: none;}@keyframes account-panel-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }}.account-workspace {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 18px;
align-items: start;}.account-courses-panel,.account-side-card {
border: 1px solid var(--line);
border-radius: 22px;
background: #fff;
box-shadow: var(--shadow-sm);}.account-courses-panel {
padding: 20px;}.account-panel-title {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;}.account-panel-title h2 {
font-size: clamp(1.45rem, 3vw, 2rem);}.account-panel-title p {
margin-top: 4px;
color: var(--text-3);}.account-panel-title a {
color: var(--primary);
text-decoration: none;
font-weight: 900;
white-space: nowrap;}.account-info-grid,.account-access-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;}.account-course-list {
display: grid;
gap: 12px;}.account-course-row {
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: 12px;
border: 1px solid var(--line);
border-radius: 18px;
background: #fff;
transition: border-color 0.18s ease, box-shadow 0.18s ease;}.account-course-row:hover {
border-color: rgba(15, 76, 129, 0.32);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);}.account-course-content {
min-width: 0;
display: grid;
gap: 10px;}.account-course-headline {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: flex-start;}.account-course-headline span {
display: block;
margin-bottom: 4px;
color: var(--accent-color, #0f4c81);
font-size: 0.76rem;
font-weight: 900;}.account-course-headline h3 {
font-size: 1.08rem;
line-height: 1.25;}.account-course-headline strong {
flex-shrink: 0;
color: var(--text);
font-size: 1.05rem;}.account-course-content p {
color: var(--text-3);
font-size: 0.9rem;
line-height: 1.5;}.account-course-content em {
display: inline-flex;
margin-left: 6px;
color: var(--accent-color, #0f4c81);
font-style: normal;
font-weight: 900;}.account-row-progress {
height: 7px;
overflow: hidden;
border-radius: 999px;
background: #e8eef5;}.account-row-progress span {
display: block;
height: 100%;
border-radius: inherit;
background: var(--accent-color, #0f4c81);}.account-course-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;}.account-course-footer small {
color: var(--text-3);
font-weight: 800;}.account-favorite-form {
flex-shrink: 0;
margin: 0;}.account-favorite-remove {
position: static;
border-color: var(--line);
background: #fff;
color: #dc2626;
box-shadow: 0 10px 20px rgba(220,38,38,.1);}.account-favorite-remove:hover {
border-color: rgba(220,38,38,.28);
background: #fff5f5;
color: #b91c1c;}.account-favorite-actions {
justify-content: flex-start;
flex-wrap: wrap;
gap: 12px;}.account-sidebar-panel {
display: grid;
gap: 14px;}.account-side-card {
padding: 18px;}.account-side-card h3 {
margin-bottom: 14px;}.account-details {
display: grid;
gap: 12px;}.account-details div {
padding-bottom: 12px;
border-bottom: 1px solid var(--line);}.account-details div:last-child {
padding-bottom: 0;
border-bottom: 0;}.account-details dt {
color: var(--text-4);
font-size: 0.74rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;}.account-details dd {
margin-top: 3px;
color: var(--text-2);
font-weight: 800;
overflow-wrap: anywhere;}.account-quick-links {
display: grid;
gap: 6px;}.account-quick-links a {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
color: var(--text-2);
text-decoration: none;
font-weight: 800;}.account-quick-links a:hover {
color: var(--primary);}.account-quick-links i {
width: 22px;
color: var(--text-4);}.account-muted {
color: var(--text-3);
font-size: 0.92rem;
line-height: 1.7;}.account-access-badge {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding: 9px 12px;
border-radius: 999px;
color: var(--primary);
background: var(--primary-soft);
font-size: 0.84rem;
font-weight: 900;}.account-clean-list {
display: grid;
gap: 10px;
list-style: none;}.account-clean-list li {
display: flex;
align-items: center;
gap: 9px;
color: var(--text-2);
font-weight: 800;}.account-clean-list li::before {
content: '';
width: 7px;
height: 7px;
flex-shrink: 0;
border-radius: 999px;
background: var(--primary);}.account-empty {
padding: 30px;
text-align: center;
border: 1px dashed var(--line-strong);
border-radius: 18px;
background: var(--surface-2);}.account-empty i {
margin-bottom: 12px;
color: var(--primary);
font-size: 2rem;}.dashboard-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }.dash-kpi { padding: 20px; background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm); }.dash-kpi span { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-4); font-weight: 700; margin-bottom: 10px; }.dash-kpi strong { display: block; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 5px; }.dash-kpi small { color: var(--text-3); font-size: 0.78rem; font-weight: 600; }.dashboard-lower { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }.panel { background: white; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-sm); padding: 24px; }.panel h3 { margin-bottom: 18px; }.skill-progress { margin-bottom: 14px; }.skill-progress-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 0.84rem; color: var(--text-2); font-weight: 700; }.activity-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }.activity-item:last-child { border-bottom: none; }.activity-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); flex-shrink: 0; }.activity-item p { color: var(--text-2); font-size: 0.86rem; font-weight: 600; margin-bottom: 4px; }.activity-item span { color: var(--text-4); font-size: 0.76rem; font-weight: 600; }.score-ring {
--score: 0;
width: 150px;
height: 150px;
border-radius: 50%;
background: conic-gradient(var(--success) calc(var(--score) * 1%), var(--danger) 0);
display: grid;
place-items: center;
animation: score-ring-pop 420ms ease-out, score-ring-glow 1200ms ease-out;}.score-ring-inner {
width: 110px;
height: 110px;
border-radius: 50%;
background: var(--surface);
display: grid;
place-items: center;
font-size: 1.6rem;
font-weight: 800;
animation: score-ring-inner-pop 520ms ease-out;}@keyframes score-ring-pop {
0% { transform: scale(0.86); opacity: 0; }
70% { transform: scale(1.03); opacity: 1; }
100% { transform: scale(1); opacity: 1; }}@keyframes score-ring-inner-pop {
0% { transform: scale(0.9); opacity: 0; }
100% { transform: scale(1); opacity: 1; }}@keyframes score-ring-glow {
0% { box-shadow: 0 0 0 rgba(15, 76, 129, 0); }
40% { box-shadow: 0 0 0 10px rgba(15, 76, 129, 0.08); }
100% { box-shadow: 0 0 0 rgba(15, 76, 129, 0); }}.cta-box {
background: linear-gradient(135deg, #0f172a 0%, #15314e 100%);
color: white;
border-radius: 30px;
padding: 42px;
box-shadow: var(--shadow-lg);
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 24px;
align-items: center;}.cta-box p { color: rgba(255,255,255,0.72); margin-top: 14px; }.cta-title { color: white; }.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }.cta-eyebrow { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.1); color: #dbeafe; }.cta-side { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 22px; padding: 20px; }.cta-side ul { list-style: none; display: grid; gap: 12px; }.cta-side li { display: flex; gap: 10px; align-items: center; font-size: 0.92rem; color: rgba(255,255,255,0.84); font-weight: 600; }.cta-side i { color: #7dd3fc; }/* ===== PRICING ===== */.pricing-hero {
text-align: center;
max-width: 580px;
margin: 0 auto 52px;}.pricing-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }.pricing-hero p { font-size: 1.05rem; margin-top: 14px; }.pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: start;}.pricing-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 32px 24px 24px;
box-shadow: var(--shadow-sm);
position: relative;
display: flex;
flex-direction: column;
gap: 20px;}.pricing-card.featured {
background: linear-gradient(180deg, #0f172a 0%, #132238 100%);
border-color: transparent;
color: white;
box-shadow: var(--shadow-lg);}.pricing-badge {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: white;
font-size: 0.72rem;
font-weight: 800;
padding: 5px 14px;
border-radius: 999px;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
display: flex;
align-items: center;
gap: 5px;}.pricing-plan {
font-size: 0.78rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.09em;
color: var(--text-3);
margin-bottom: 10px;}.pricing-card.featured .pricing-plan { color: rgba(255,255,255,0.55); }.pricing-price {
display: flex;
align-items: baseline;
gap: 2px;}.pricing-currency {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-3);
align-self: flex-start;
margin-top: 8px;}.pricing-card.featured .pricing-currency { color: rgba(255,255,255,0.6); }.pricing-amount {
font-size: 3.2rem;
font-weight: 800;
letter-spacing: -0.05em;
color: var(--text);
line-height: 1;}.pricing-card.featured .pricing-amount { color: white; }.pricing-period {
font-size: 0.84rem;
color: var(--text-3);
font-weight: 600;
margin-left: 2px;}.pricing-card.featured .pricing-period { color: rgba(255,255,255,0.55); }.pricing-desc {
font-size: 0.9rem;
color: var(--text-3);
line-height: 1.65;
margin-top: 10px;}.pricing-card.featured .pricing-desc { color: rgba(255,255,255,0.6); }.pricing-sep { border: none; border-top: 1px solid var(--line); margin: 0; }.pricing-card.featured .pricing-sep { border-color: rgba(255,255,255,0.1); }.pricing-features { list-style: none; display: grid; gap: 12px; }.pricing-feature {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.9rem;
color: var(--text-2);
font-weight: 500;
line-height: 1.5;}.pricing-card.featured .pricing-feature { color: rgba(255,255,255,0.85); }.pricing-feature i {
color: var(--success);
font-size: 0.8rem;
margin-top: 3px;
flex-shrink: 0;
width: 16px;
text-align: center;}.pricing-card.featured .pricing-feature i { color: var(--accent); }.pricing-feature.disabled { opacity: 0.38; }.pricing-feature.disabled i { color: var(--text-4); }.cta-btn-ghost {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
color: white;}.cta-btn-ghost:hover { background: rgba(255,255,255,0.14); color: white; }/* ===== SECTION HEAD CENTERED ===== */.section-head--center { flex-direction: column; align-items: center; text-align: center; }.section-head--center p { margin: 10px auto 0; }/* ===== HERO LEVELS ===== */.hero-levels-wrap {
display: flex;
flex-direction: column;
gap: 18px;
align-self: center;}.hero-image-wrap {
position: relative;
gap: 0;
width: 100%;
max-width: 560px;
border-radius: 22px;
overflow: hidden;
border: 1px solid #d8e4f2;
box-shadow: 0 22px 42px rgba(15, 23, 42, 0.2);}.hero-learning-image {
display: block;
width: 100%;
height: clamp(320px, 40vw, 460px);
object-fit: cover;}.hero-image-caption {
position: absolute;
left: 14px;
right: 14px;
bottom: 14px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(15, 23, 42, 0.58);
backdrop-filter: blur(3px);
color: #ffffff;
font-size: 0.95rem;}.hero-levels-title {
font-size: clamp(1.15rem, 2vw, 1.5rem);
font-weight: 800;
color: var(--text);
line-height: 1.2;}.hero-levels {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;}/* ===== FEATURES SECTION ===== */.features-section {
background: var(--surface-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);}.features-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;}.feature-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 28px 24px;
box-shadow: var(--shadow-sm);
transition: 0.22s ease;}.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }.feature-icon {
width: 52px;
height: 52px;
border-radius: 16px;
display: grid;
place-items: center;
font-size: 1.25rem;
margin-bottom: 18px;}.feature-card h3 { margin-bottom: 10px; }.feature-card p { font-size: 0.92rem; line-height: 1.75; }/* ===== LEVELS TEASER ===== */.levels-teaser-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;}.level-teaser-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 22px 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-decoration: none;
color: var(--text);
text-align: center;
transition: 0.22s ease;
box-shadow: var(--shadow-sm);}.level-teaser-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--lv-color, var(--primary)); }.level-teaser-badge {
width: 54px;
height: 54px;
border-radius: 16px;
background: var(--lv-color, var(--primary));
color: white;
display: grid;
place-items: center;
font-size: 1.1rem;
font-weight: 800;}.level-teaser-card strong { display: block; font-size: 0.88rem; font-weight: 700; color: var(--text); line-height: 1.3; }footer { padding: 64px 0 40px; background: #0a1220; color: white; margin-top: 80px; }.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }.footer-about p { color: rgba(255,255,255,0.52); font-size: 0.88rem; line-height: 1.75; margin-top: 16px; max-width: 280px; }.footer-brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }.footer-brand-mark { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, #38bdf8, #14b8a6); display: grid; place-items: center; color: white; font-size: 0.9rem; flex-shrink: 0; }.footer-brand { font-size: 1.1rem; font-weight: 800; color: white; }.footer-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }.footer-trust span { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: rgba(255,255,255,0.45); }.footer-trust i { color: #14b8a6; font-size: 0.7rem; }.footer-col h4 { font-size: 0.74rem; font-weight: 800; margin-bottom: 16px; color: rgba(255,255,255,0.9); letter-spacing: 0.06em; text-transform: uppercase; }.footer-col ul { list-style: none; display: grid; gap: 11px; }.footer-col a { color: rgba(255,255,255,0.52); text-decoration: none; font-size: 0.875rem; transition: color 0.18s ease; }.footer-col a:hover { color: white; }.footer-bottom { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.07); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: rgba(255,255,255,0.35); font-size: 0.82rem; }.notif {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(14px);
background: #0f172a;
color: white;
padding: 14px 18px;
border-radius: 14px;
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: 10px;
opacity: 0;
pointer-events: none;
transition: 0.25s ease;
z-index: 2000;
border: 1px solid rgba(255,255,255,0.08);
width: min(92vw, 560px);}.notif.show { opacity: 1; transform: translateX(-50%) translateY(0); }.notif i { color: #22c55e; }.hidden { display: none !important; }/* ===== FILL INLINE RUNNER ===== */.fill-inline-text {
line-height: 1.75;
font-size: 1rem;
color: var(--text);
padding: 6px 0;
white-space: pre-wrap;}.fill-gap-select {
display: inline-block;
border: 2px solid var(--primary);
border-radius: 8px;
background-color: var(--primary-soft);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
color: var(--primary);
font-size: 16px;
font-weight: 700;
line-height: 1.2;
padding: 7px 28px 7px 12px;
cursor: pointer;
font-family: var(--font);
transition: border-color 0.15s, background 0.15s, color 0.15s;
margin: 0 3px;
vertical-align: middle;
appearance: none !important;
-webkit-appearance: none !important;
min-width: 80px;
text-align: center;
text-align-last: center;}.fill-gap-select::-ms-expand { display: none; }.fill-gap-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(15,76,129,0.15); }.fill-gap-select.gap-correct { border-color: #16a34a; background-color: #dcfce7; color: #15803d; }.fill-gap-select.gap-wrong
 { border-color: #dc2626; background-color: #fee2e2; color: #b91c1c; }.fill-gap-select:disabled { cursor: default; opacity: 1; }.fill-inline-result {
display: none;
align-items: center;
gap: 14px;
flex-wrap: wrap;
margin-top: 20px;
padding: 16px 20px;
background: var(--surface-2);
border-radius: 14px;
border: 1px solid var(--line);}.fill-inline-score { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; }.fill-inline-pct
 { color: var(--text-3); font-weight: 600; font-size: 0.9rem; }/* ============================================================
   ADMIN V2 — design « clair pro »
   Fond gris clair, surfaces blanches plates, accent unique
   (bleu marque), typo nette. Sidebar claire + drawer mobile.
   ============================================================ */
.admin-shell {
  --ad-bg: #f6f8fb;
  --ad-surface: #ffffff;
  --ad-line: #e6ebf2;
  --ad-line-strong: #d5deea;
  --ad-text: #0f172a;
  --ad-text-2: #3f4c60;
  --ad-text-3: #64748b;
  --ad-text-4: #94a3b8;
  --ad-accent: #0f4c81;
  --ad-accent-strong: #0c3f6b;
  --ad-accent-soft: #eef4fa;
  --ad-danger: #dc2626;
  --ad-danger-soft: #fef2f2;
  --ad-success: #15803d;
  --ad-success-soft: #ecfdf3;
  --ad-warning: #b45309;
  --ad-warning-soft: #fffbeb;
  --ad-radius: 12px;
  --ad-radius-lg: 16px;
  --ad-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --ad-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.1);
  min-height: 100vh;
  background: var(--ad-bg);
}

/* ── Sidebar ── */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 250px;
  height: 100vh;
  background: var(--ad-surface);
  border-right: 1px solid var(--ad-line);
  display: flex;
  flex-direction: column;
  z-index: 220;
  transition: transform 0.22s ease;
}
.admin-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--ad-line);
  text-decoration: none;
  color: var(--ad-text);
  flex-shrink: 0;
}
.admin-brand .brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ad-accent), #1d6fb8);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.88rem;
  flex-shrink: 0;
}
.admin-brand-text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
}
.admin-brand-text small {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--ad-text-4);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.admin-nav {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.admin-nav-section {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ad-text-4);
  padding: 14px 10px 5px;
  margin: 0;
}
.admin-nav > .admin-nav-section:first-child { padding-top: 6px; }
.admin-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--ad-text-3);
  font-size: 0.86rem;
  font-weight: 600;
  transition: background 0.14s, color 0.14s;
}
.admin-nav-item i {
  width: 18px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ad-text-4);
  transition: color 0.14s;
}
.admin-nav-item:hover { background: var(--ad-bg); color: var(--ad-text); }
.admin-nav-item:hover i { color: var(--ad-text-2); }
.admin-nav-item.active {
  background: var(--ad-accent-soft);
  color: var(--ad-accent);
  font-weight: 700;
}
.admin-nav-item.active i { color: var(--ad-accent); }
.admin-nav-item.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ad-accent);
}

/* ── Sidebar footer : utilisateur + liens ── */
.admin-sidebar-footer {
  padding: 12px 10px;
  border-top: 1px solid var(--ad-line);
  flex-shrink: 0;
  display: grid;
  gap: 10px;
}
.admin-user-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  min-width: 0;
}
.admin-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ad-accent-soft);
  color: var(--ad-accent);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}
.admin-user-meta { min-width: 0; }
.admin-user-meta strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ad-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-user-meta small {
  display: block;
  font-size: 0.7rem;
  color: var(--ad-text-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-sidebar-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.admin-sidebar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 6px;
  border: 1px solid var(--ad-line);
  border-radius: 9px;
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ad-text-3);
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.admin-sidebar-link:hover { border-color: var(--ad-line-strong); color: var(--ad-text); background: var(--ad-bg); }
.admin-sidebar-link.danger:hover { border-color: #fecaca; color: var(--ad-danger); background: var(--ad-danger-soft); }

/* ── Drawer mobile ── */
.admin-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 210;
}
.admin-drawer-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ad-line);
  border-radius: 10px;
  background: var(--ad-surface);
  color: var(--ad-text-2);
  font-size: 0.95rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Zone principale ── */
.admin-main {
  margin-left: 250px;
  padding-top: 0;
  background: var(--ad-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.admin-topbar {
  background: var(--ad-surface);
  border-bottom: 1px solid var(--ad-line);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 60;
  flex-shrink: 0;
  min-height: 64px;
}
.admin-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-topbar-heading { min-width: 0; }
.admin-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ad-text-4);
  margin-bottom: 2px;
}
.admin-breadcrumb a { color: inherit; text-decoration: none; }
.admin-breadcrumb a:hover { color: var(--ad-accent); }
.admin-breadcrumb i { font-size: 0.55rem; }
.admin-breadcrumb span { color: var(--ad-text-3); }
.admin-page-title {
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ad-text);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.admin-content { padding: 24px 28px 40px; flex: 1; }

/* ── Flash messages ── */
.admin-flash {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--ad-radius);
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.admin-flash span { flex: 1; }
.admin-flash-close {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px;
}
.admin-flash-close:hover { opacity: 1; }
.admin-flash.success { background: var(--ad-success-soft); color: var(--ad-success); border-color: #bbf7d0; }
.admin-flash.warning { background: var(--ad-warning-soft); color: var(--ad-warning); border-color: #fde68a; }
.admin-flash.danger { background: var(--ad-danger-soft); color: #991b1b; border-color: #fecaca; }

/* ── KPI (dashboard) ── */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.admin-kpi {
  background: var(--ad-surface);
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius-lg);
  padding: 18px;
  box-shadow: var(--ad-shadow);
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ad-text);
  transition: border-color 0.16s, box-shadow 0.16s, transform 0.16s;
}
.admin-kpi:hover {
  border-color: var(--ad-line-strong);
  box-shadow: var(--ad-shadow-md);
  transform: translateY(-1px);
}
.admin-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--kpi-bg, var(--ad-accent-soft));
  color: var(--kpi-color, var(--ad-accent));
  display: grid;
  place-items: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.admin-kpi-body { flex: 1; min-width: 0; }
.admin-kpi-body strong {
  display: block;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.admin-kpi-body span {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ad-text-2);
}
.admin-kpi-body small { font-size: 0.7rem; color: var(--ad-text-4); font-weight: 600; }
.admin-kpi-arrow {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--kpi-bg, var(--ad-accent-soft));
  color: var(--kpi-color, var(--ad-accent));
  display: grid;
  place-items: center;
  font-size: 0.68rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.14s;
}
.admin-kpi:hover .admin-kpi-arrow { opacity: 1; }

/* ── Dashboard : entête + actions rapides ── */
.admin-hello { margin-bottom: 20px; }
.admin-hello h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ad-text);
  margin: 0 0 3px;
}
.admin-hello p { margin: 0; font-size: 0.86rem; color: var(--ad-text-3); font-weight: 500; }
.admin-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
}
.admin-quick-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  background: var(--ad-surface);
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius);
  text-decoration: none;
  color: var(--ad-text-2);
  font-size: 0.84rem;
  font-weight: 700;
  box-shadow: var(--ad-shadow);
  transition: border-color 0.14s, color 0.14s, transform 0.14s;
}
.admin-quick-item i {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ad-accent-soft);
  color: var(--ad-accent);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  flex-shrink: 0;
}
.admin-quick-item:hover { border-color: var(--ad-accent); color: var(--ad-accent); transform: translateY(-1px); }

/* ── Dashboard : vue d'ensemble groupée ── */
.admin-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.admin-group-card {
  background: var(--ad-surface);
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius-lg);
  box-shadow: var(--ad-shadow);
  overflow: hidden;
}
.admin-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ad-line);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ad-text-3);
}
.admin-group-head i { color: var(--ad-accent); font-size: 0.8rem; }
.admin-group-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  text-decoration: none;
  color: var(--ad-text);
  border-bottom: 1px solid var(--ad-line);
  transition: background 0.12s;
}
.admin-group-row:last-child { border-bottom: none; }
.admin-group-row:hover { background: var(--ad-bg); }
.admin-group-row > i {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--ad-bg);
  color: var(--ad-text-3);
  display: grid;
  place-items: center;
  font-size: 0.76rem;
  flex-shrink: 0;
}
.admin-group-row:hover > i { background: var(--ad-accent-soft); color: var(--ad-accent); }
.admin-group-name { flex: 1; font-size: 0.88rem; font-weight: 600; }
.admin-group-count {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ad-text-2);
  font-variant-numeric: tabular-nums;
}
.admin-group-chevron { font-size: 0.62rem; color: var(--ad-text-4); }

/* ── Cartes ── */
.admin-card {
  background: var(--ad-surface);
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius-lg);
  box-shadow: var(--ad-shadow);
  overflow: hidden;
  margin-bottom: 16px;
}
.admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ad-line);
  flex-wrap: wrap;
}
.admin-card-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-card-heading > i {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--ad-accent-soft);
  color: var(--ad-accent);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.admin-card-title {
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--ad-text);
  margin: 0;
  line-height: 1.25;
}
.admin-card-sub {
  display: block;
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ad-text-4);
  margin-top: 1px;
}
.admin-card-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-card-body { padding: 16px 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-count-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ad-bg);
  border: 1px solid var(--ad-line);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--ad-text-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Recherche instantanée ── */
.admin-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.admin-search i {
  position: absolute;
  left: 11px;
  font-size: 0.72rem;
  color: var(--ad-text-4);
  pointer-events: none;
}
.admin-search input {
  min-width: 210px;
  padding: 8px 12px 8px 30px;
  border: 1px solid var(--ad-line);
  border-radius: 10px;
  background: var(--ad-bg);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ad-text);
  transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}
.admin-search input::placeholder { color: var(--ad-text-4); }
.admin-search input:focus {
  outline: none;
  background: var(--ad-surface);
  border-color: var(--ad-accent);
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1);
}

/* ── Tableaux ── */
.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th {
  text-align: left;
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ad-text-4);
  padding: 10px 18px;
  background: #fafbfd;
  border-bottom: 1px solid var(--ad-line);
  white-space: nowrap;
}
.admin-table td {
  padding: 12px 18px;
  font-size: 0.86rem;
  color: var(--ad-text-2);
  font-weight: 500;
  border-bottom: 1px solid var(--ad-line);
  vertical-align: middle;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr { transition: background 0.1s; }
.admin-table tbody tr:hover { background: #fafcff; }
.admin-table .cell-strong { font-weight: 700; color: var(--ad-text); }
.admin-table td:last-child { white-space: nowrap; text-align: right; }
.admin-table small { color: var(--ad-text-4); }
.admin-search-empty td,
.admin-table .admin-empty-cell {
  text-align: center !important;
  padding: 30px 18px;
  color: var(--ad-text-4);
  font-weight: 600;
}
.admin-search-empty i { margin-right: 6px; }

/* ── État vide ── */
.admin-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 38px 18px;
  text-align: center;
}
.admin-empty i {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--ad-bg);
  color: var(--ad-text-4);
  display: grid;
  place-items: center;
  font-size: 1.05rem;
}
.admin-empty strong { font-size: 0.94rem; color: var(--ad-text); font-weight: 800; }
.admin-empty p { margin: 0; font-size: 0.82rem; color: var(--ad-text-3); max-width: 40ch; }

/* ── Badges ── */
.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.admin-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.admin-badge.no-dot::before { display: none; }
.admin-badge.success { background: var(--ad-success-soft); color: var(--ad-success); border-color: #bbf7d0; }
.admin-badge.warning { background: var(--ad-warning-soft); color: var(--ad-warning); border-color: #fde68a; }
.admin-badge.danger { background: var(--ad-danger-soft); color: #991b1b; border-color: #fecaca; }
.admin-badge.neutral { background: var(--ad-bg); color: var(--ad-text-3); border-color: var(--ad-line-strong); }
.admin-badge-admin { background: var(--ad-accent-soft); color: var(--ad-accent); border-color: #c4d8ea; }
.admin-badge-admin::before { display: none; }
.admin-badge-user { background: var(--ad-bg); color: var(--ad-text-3); border-color: var(--ad-line-strong); }
.admin-badge-user::before { display: none; }

/* ── Boutons d'action (icônes) ── */
.admin-actions-cell { display: inline-flex; align-items: center; gap: 6px; }
.admin-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--ad-line);
  border-radius: 9px;
  background: var(--ad-surface);
  color: var(--ad-text-3);
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.13s, color 0.13s, background 0.13s;
}
.admin-icon-btn:hover { border-color: var(--ad-accent); color: var(--ad-accent); background: var(--ad-accent-soft); }
.admin-icon-btn.danger:hover { border-color: #fecaca; color: var(--ad-danger); background: var(--ad-danger-soft); }
.admin-btn-danger {
  background: var(--ad-danger);
  color: #fff;
  border: 1px solid var(--ad-danger);
}
.admin-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
/* Dans l'admin, les boutons primaires suivent l'accent bleu (pas l'orange du site) */
.admin-shell .btn-primary {
  background: var(--ad-accent);
  border-color: var(--ad-accent);
  color: #fff;
}
.admin-shell .btn-primary:hover { background: var(--ad-accent-strong); border-color: var(--ad-accent-strong); color: #fff; }

/* ── Copie de code d'accès ── */
.admin-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px dashed var(--ad-line-strong);
  border-radius: 9px;
  background: var(--ad-bg);
  color: var(--ad-text-2);
  padding: 5px 9px;
  margin-top: 5px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  transition: border-color 0.13s, color 0.13s, background 0.13s;
}
.admin-code-copy code { color: inherit; font-size: 0.78rem; letter-spacing: 0.04em; }
.admin-code-copy:hover,
.admin-code-copy.copied { border-color: var(--ad-accent); background: var(--ad-accent-soft); color: var(--ad-accent); }
.admin-code-copy.copied i::before { content: "\f00c"; }

/* ── Formulaires ── */
.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 16px;
}
.admin-form-group label {
  display: block;
  font-size: 0.69rem;
  font-weight: 800;
  color: var(--ad-text-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}
.admin-form-group label .req { color: var(--ad-danger); }
.admin-form-span { grid-column: 1 / -1; }
.admin-form-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.76rem;
  color: var(--ad-text-4);
  font-weight: 500;
}
.admin-form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--ad-line);
  margin-top: 4px;
}
.admin-content .blank-in,
.admin-content select.blank-in,
.admin-content textarea.exercise-textarea {
  width: 100%;
  background: var(--ad-surface);
  border: 1px solid var(--ad-line-strong);
  border-radius: 10px;
  min-height: 40px;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ad-text);
  transition: border-color 0.14s, box-shadow 0.14s;
}
.admin-content .blank-in:focus,
.admin-content select.blank-in:focus,
.admin-content textarea.exercise-textarea:focus {
  outline: none;
  border-color: var(--ad-accent);
  box-shadow: 0 0 0 3px rgba(15, 76, 129, 0.1);
}
.admin-content form label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ad-text-3);
}
/* Sous-cartes générées en JS dans les formulaires (thèmes, questions…) */
.admin-content .card {
  background: var(--ad-bg);
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius);
  box-shadow: none;
}

/* ── Filtres inline (modules / leçons / quiz) ── */
.admin-inline-filters {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius);
  background: var(--ad-surface);
  box-shadow: var(--ad-shadow);
}
.admin-filter-field { display: grid; gap: 6px; min-width: 200px; }
.admin-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Modal de confirmation ── */
.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.admin-modal[hidden] { display: none; }
.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
}
.admin-modal-card {
  position: relative;
  width: min(460px, 100%);
  background: var(--ad-surface, #fff);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
  overflow: hidden;
}
.admin-modal-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px 0;
}
.admin-modal-head h3 { margin: 0; font-size: 1rem; font-weight: 800; color: #0f172a; }
.admin-modal-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.admin-modal-icon.danger { background: #fef2f2; color: #dc2626; }
.admin-modal-body { padding: 12px 18px 4px; }
.admin-modal-body p { margin: 0; color: #475569; font-size: 0.88rem; line-height: 1.55; }
.admin-modal-actions {
  padding: 16px 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
  .admin-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .admin-sidebar { transform: translateX(-100%); box-shadow: none; }
  body.admin-drawer-open .admin-sidebar { transform: translateX(0); box-shadow: var(--ad-shadow-md); }
  body.admin-drawer-open .admin-drawer-backdrop { display: block; }
  body.admin-drawer-open { overflow: hidden; }
  .admin-drawer-toggle { display: inline-flex; }
  .admin-main { margin-left: 0; }
  .admin-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-group-grid { grid-template-columns: 1fr; }
  .lms-main { padding: 0px; }
}
@media (max-width: 640px) {
  .admin-content { padding: 16px 14px 32px; }
  .admin-topbar { padding: 10px 14px; }
  .admin-kpi-grid,
  .admin-quick-grid { grid-template-columns: 1fr; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-search { width: 100%; }
  .admin-search input { width: 100%; min-width: 0; }
  .admin-card-tools { width: 100%; }
}

@media (max-width: 1180px) {
.hero-grid,
.cta-box,
.dashboard-lower,
.detail-shell { grid-template-columns: 1fr; }
.lms-shell { grid-template-columns: 1fr; }
.grid-3,
.levels-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dashboard-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.levels-teaser-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-levels-wrap { width: 100%; }
.hero-image-wrap { display: none; }
.hero-levels { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hero-copy { padding: 0 16px; }
.pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-workspace {
grid-template-columns: 1fr;
}
.account-info-grid,
.account-access-grid {
grid-template-columns: 1fr;
}
.lms-mobile-bar {
display: block;
position: fixed;
left: max(16px, env(safe-area-inset-left));
bottom: calc(34px + env(safe-area-inset-bottom));
z-index: 1102;
margin: 0;
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}
.lms-mobile-bar [data-lms-nav-toggle] {
width: 58px;
height: 58px;
border-radius: 999px;
display: inline-grid;
place-items: center;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.52);
background: rgba(15, 76, 129, 0.72);
color: #fff;
backdrop-filter: blur(10px);
box-shadow: 0 20px 42px rgba(15, 23, 42, 0.3);
}
.lms-mobile-bar [data-lms-nav-toggle] i {
font-size: 1.18rem;
}
.lms-nav-backdrop {
display: block;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 1100;
}
.lms-nav {
position: fixed;
top: 0;
left: 0;
height: 100dvh;
width: min(88vw, 380px);
z-index: 1101;
border-radius: 0 16px 16px 0;
transform: translateX(-100%);
transition: transform 0.22s ease;
overflow: auto;
background: #fff;
}
.lms-nav-close {
display: inline-flex;
margin-left: auto;
}
body.lms-nav-open .lms-nav { transform: translateX(0); }
body.lms-nav-open .lms-mobile-bar {
opacity: 0;
visibility: hidden;
transform: translateY(12px) scale(0.92);
pointer-events: none;
}
body.lms-nav-open .lms-nav-backdrop {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.lms-lesson-index { max-height: none; }}@media (max-width: 860px) {
:root { --nav-h: 68px; --pad-x: clamp(14px, 4vw, 22px); }
.nav-links,
.nav-right { display: none; }
.nav-toggle { display: inline-flex; }
body.nav-open .nav-toggle {
background: rgba(20, 184, 166, 0.22);
border-color: rgba(45, 212, 191, 0.42);
}
body.nav-open .nav-mobile { display: block; }
body.nav-open { overflow: hidden; }
.nav-mobile {
max-height: calc(100dvh - var(--nav-h));
overflow-y: auto;
position: fixed;
top: calc(var(--nav-h) + 8px);
left: 50%;
width: min(calc(100% - 28px), 430px);
padding: 14px;
border: 1px solid rgba(148, 163, 184, 0.24);
border-radius: 24px;
transform: translateX(-50%);
text-align: left;
}
.nav-mobile a {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
min-height: 48px;
font-size: 1rem;
}
.nav-mobile a i {
width: 18px;
text-align: center;
}
.nav-mobile-actions {
justify-items: stretch;
}
.nav-mobile-actions .btn {
width: 100%;
justify-content: center;
}
h1 { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.05; }
h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
.hero-grid { min-height: auto; padding: 24px 0 20px; gap: 20px; }
.hero-copy { padding: 0 12px; }
.hero-copy h1 { margin-top: 0; }
.hero-copy p { font-size: 0.98rem; line-height: 1.7; }
.hero-actions { margin-top: 18px; }
.hero-actions .btn { width: auto; justify-content: center; }
.hero-panel { padding: 16px; }
.panel-top { gap: 8px; }
.hero-list { gap: 8px; }
.hero-list-item { padding: 12px 14px; border-radius: 14px; }
.hero-list-item h4 { font-size: 0.9rem; }
.hero-list-item p { font-size: 0.78rem; }
.hero-list-item strong { font-size: 1rem; }
.hero-mini-card { padding: 12px; border-radius: 14px; }
.hero-mini-card strong { font-size: 1.05rem; }
.hero-panel,
.panel,
.side-panel { border-radius: 20px; }
.section-head { margin-bottom: 20px; }
.filters { gap: 8px; }
.tab { font-size: 0.8rem; padding: 10px 12px; }
.grid-3,
.levels-grid,
.exercise-grid,
.footer-grid,
.features-grid,
.pricing-grid,
.dashboard-grid {
grid-template-columns: 1fr;
}
.account-page {
padding-top: 18px;
}
.account-avatar {
width: 52px;
height: 52px;
border-radius: 15px;
font-size: 0.95rem;
}
.account-courses-panel,
.account-side-card {
border-radius: 18px;
}
.account-courses-panel {
padding: 14px;
}
.account-tabs-card {
padding: 12px;
border-radius: 18px;
}
.account-tab-list {
margin-bottom: 14px;
}
.account-tab-btn {
min-width: max-content;
padding: 10px 12px;
}
.account-panel-title {
display: grid;
}
.account-panel-title a {
white-space: normal;
}
.account-course-row {
padding: 10px;
}
.account-course-headline {
align-items: flex-start;
}
.hero-stats,
.meta-grid,
.hero-mini { grid-template-columns: 1fr 1fr; }
.levels-teaser-grid,
.hero-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module-item { grid-template-columns: 1fr; }
.module-right { text-align: left; }
.exercise-course-head {
grid-template-columns: 1fr;
gap: 12px;
padding: 16px;
}
.exercise-course-meta {
justify-content: space-between;
width: 100%;
}
.exercise-course-list {
padding: 0 12px 14px;
}
.match-grid { grid-template-columns: 1fr; }
.dashboard-lower { gap: 14px; }
.lms-lesson-nav-panel {
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 7px;
border-radius: 16px;
}
.lms-nav-card {
min-height: 58px;
border-radius: 14px;
padding: 8px;
grid-template-columns: 30px minmax(0, 1fr);
}
.lms-nav-card-next {
grid-template-columns: minmax(0, 1fr) 30px;
}
.lms-nav-card-icon {
width: 30px;
height: 30px;
border-radius: 11px;
}
.lms-nav-card-prev { grid-column: 1; }
.lms-nav-card-next { grid-column: 2; }
.lms-nav-card strong {
font-size: .8rem;
-webkit-line-clamp: 1;
}
.lesson-ubung-card {
grid-template-columns: 46px minmax(0, 1fr);
gap: 12px;
}
.lesson-ubung-icon {
width: 46px;
height: 46px;
border-radius: 15px;
}
.lesson-ubung-main-btn {
grid-column: 1 / -1;
width: 100%;
justify-content: center;
}
.footer-bottom { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
#lms-main,
#exam-quiz-workspace,
#exam-gap-runner,
#exam-cloze-runner {
scroll-margin-top: 75px;
}}@media (max-width: 560px) {
.container { padding: 0 10px;}
.hero-actions,
.cta-actions,
.nav-right,
.card-actions { flex-direction: column; align-items: stretch; }
.hero-actions { flex-direction: row; align-items: center; justify-content: center; }
.meta-grid,
.hero-mini,
.hero-stats { grid-template-columns: 1fr; }
.feature-card { padding: 22px 18px; }
.level-teaser-card { padding: 14px 8px; gap: 8px; }
.level-teaser-badge { width: 44px; height: 44px; font-size: 0.9rem; border-radius: 12px; }
.level-teaser-card strong { font-size: 0.78rem; }
.section { padding: 42px 0; }
.courses-page-section { padding-top: 14px; }
.cta-box { padding: 28px; }
.hero-panel { padding: 22px; }
.hero-grid { padding: 14px 0 10px; gap: 14px; }
.hero-copy { padding: 0 20px; }
.hero-copy p { margin-top: 12px; font-size: 0.94rem; line-height: 1.6; }
.hero-panel { padding: 14px; border-radius: 16px; }
.panel-brand { font-size: 0.95rem; }
.panel-brand small { font-size: 0.72rem; }
.hero-list-item { padding: 10px 12px; }
.hero-mini { margin-top: 10px; gap: 8px; }
.hero-mini-card span { font-size: 0.7rem; }
.hero-mini-card strong { font-size: 0.98rem; }
.card,
.exercise-card,
.dash-kpi,
.module-item { border-radius: 18px; }
.detail-panel,
.detail-header { padding: 16px; }
.search { min-width: 100%; }
.module-num,
.level-badge,
.level-pill { width: 50px; height: 50px; border-radius: 14px; }
.notif { left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); padding: 12px 14px; }}@media (max-width: 400px) {
.brand span { font-size: 0.95rem; }
.cta-actions .btn,
.card-actions .btn { width: 100%; }
.meta-grid { gap: 8px; padding: 10px; }
.exercise-head,
.exercise-body,
.exercise-foot { padding-left: 14px; padding-right: 14px; }
.levels-teaser-grid,
.hero-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }}.gap-modal {
position: fixed;
inset: 0;
z-index: 1100;
display: grid;
place-items: center;
padding: 18px;}.gap-modal.hidden { display: none; }.gap-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.52);
backdrop-filter: blur(2px);}.gap-modal-dialog {
position: relative;
width: min(920px, 100%);
max-height: calc(100vh - 36px);
overflow: auto;
border-radius: 18px;
background: var(--surface);
box-shadow: var(--shadow-lg);
border: 1px solid var(--line);
padding: 16px;}/* Gap Choice level modal: show runner directly (no extra card wrapper) */#exercise-gap-modal #exercise-gap-runner {
position: relative;
width: min(980px, calc(100vw - 24px));
max-height: calc(100vh - 24px);
overflow: auto;}#exercise-hub-modal #exercise-hub-runner {
position: relative;
width: min(980px, calc(100vw - 24px));
max-height: calc(100vh - 24px);
overflow: auto;}.gap-modal-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;}body.modal-open { overflow: hidden; }/* Exam modules: dedicated focus workspace (non modal) */.exam-workspace {
margin-top: 14px;
border: 1px solid #dbe4ef;
border-radius: 16px;
background:
radial-gradient(900px 220px at -10% -40%, rgba(14, 165, 233, 0.08), transparent 42%),
radial-gradient(900px 220px at 110% -30%, rgba(16, 185, 129, 0.08), transparent 42%),
#fff;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
padding: 14px;
animation: examWorkspaceIn 0.2s ease;}.exam-workspace-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;}.exam-workspace-head strong {
display: block;
font-size: 0.95rem;
color: #0f172a;}.exam-workspace-head span {
display: block;
font-size: 0.8rem;
color: #64748b;}#exam-quiz-workspace,#exam-gap-runner,#exam-cloze-runner {
scroll-margin-top: 85px;}@keyframes examWorkspaceIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }}/* Keep one visible close action in workspace header */#exam-quiz-workspace #quiz-close,#exam-quiz-workspace #quiz-close-bottom,#exam-quiz-workspace #quiz-close-final,#exam-quiz-workspace #quiz-close-details,#exam-gap-runner #fill-close,#exam-gap-runner #fill-inline-close,#exam-gap-runner #fill-close-answers {
display: none !important;}@media (max-width: 860px) {
#exercise-gap-modal,
#exercise-hub-modal {
padding: 0;
place-items: stretch;
overflow: hidden;
width: 100%;
max-width: 100%;
}
#exercise-gap-modal *,
#exercise-hub-modal * {
box-sizing: border-box;
}
#exercise-gap-modal #exercise-gap-runner {
width: 100%;
max-width: 100%;
max-height: 100dvh;
height: 100dvh;
overflow-x: hidden;
justify-self: stretch;
}
#exercise-hub-modal #exercise-hub-runner {
width: 100%;
max-width: 100%;
max-height: 100dvh;
height: 100dvh;
overflow-x: hidden;
justify-self: stretch;
}
#exercise-gap-modal #exercise-gap-runner > .card {
width: 100%;
max-width: 100%;
min-height: 100dvh;
border-radius: 0;
border-left: none;
border-right: none;
margin: 0;
overflow-x: hidden;
}
#exercise-hub-modal #exercise-hub-runner > .card {
width: 100%;
max-width: 100%;
min-height: 100dvh;
border-radius: 0;
border-left: none;
border-right: none;
margin: 0;
overflow-x: hidden;
}
#exercise-gap-modal .exercise-card,
#exercise-gap-modal .module-item,
#exercise-gap-modal .fill-inline-text,
#exercise-gap-modal .card-actions,
#exercise-hub-modal .exercise-card,
#exercise-hub-modal .module-item,
#exercise-hub-modal .fill-inline-text,
#exercise-hub-modal .card-actions {
max-width: 100%;
min-width: 0;
}
#exercise-gap-modal .option,
#exercise-hub-modal .option {
width: 100%;
min-width: 0;
}
#exercise-gap-modal .question,
#exercise-gap-modal h3,
#exercise-gap-modal p,
#exercise-hub-modal .question,
#exercise-hub-modal h3,
#exercise-hub-modal p {
overflow-wrap: anywhere;
}
#exercise-gap-modal .fill-gap-select,
#exercise-hub-modal .fill-gap-select {
max-width: calc(100vw - 36px);
}}/* ===== STATS BANNER ===== */.stats-banner {
background: linear-gradient(135deg, var(--primary) 0%, #1d6fb8 100%);
padding: 18px 0;
border-top: 1px solid rgba(15,76,129,0.15);
border-bottom: 1px solid rgba(15,76,129,0.15);}.stats-banner-inner {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0;}.stats-banner-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 36px;
border-right: 1px solid rgba(255, 255, 255, 0.18);}.stats-banner-item:last-child { border-right: none; }.stats-banner-item strong {
font-size: 1.15rem;
font-weight: 800;
color: #fff;
line-height: 1.2;}.stats-banner-item span {
font-size: 0.76rem;
color: rgba(255, 255, 255, 0.72);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;}/* ===== FAQ ===== */.faq-list {
display: grid;
gap: 12px;
max-width: 820px;
margin: 0 auto;}.faq-item {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;}.faq-item[open] {
border-color: rgba(15, 76, 129, 0.35);
box-shadow: var(--shadow-sm);}.faq-item summary {
list-style: none;
padding: 20px 24px;
font-weight: 700;
font-size: 1rem;
color: var(--text);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
user-select: none;}.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary::after {
content: '\f107';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: var(--text-3);
transition: transform 0.22s ease, color 0.22s ease;
flex-shrink: 0;
font-size: 1rem;}.faq-item[open] > summary::after {
transform: rotate(-180deg);
color: var(--primary);}.faq-item summary:hover { background: var(--surface-2); }.faq-body {
padding: 0 24px 22px;
color: var(--text-3);
font-size: 0.95rem;
line-height: 1.75;
border-top: 1px solid var(--line);
padding-top: 16px;}.faq-body strong { color: var(--text); }@media (max-width: 768px) {
.stats-banner-item { padding: 8px 20px; }
.stats-banner-item strong { font-size: 1rem; }
.faq-item summary { padding: 16px 18px; font-size: 0.95rem; }
.faq-body { padding: 12px 18px 18px; }
.hero-center { padding: calc(var(--nav-h) + 52px) 0 64px; gap: 20px; }
.hero-center .hero-actions { flex-direction: row; align-items: center; }
.hero-center .hero-actions .btn { width: auto; max-width: none; justify-content: center; }}@media (max-width: 560px) {
.stats-banner-inner { gap: 0; }
.stats-banner-item { padding: 8px 14px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.12); }
.stats-banner-item:last-child { border-bottom: none; }}
.pricing-amount.pricing-amount-text {
font-size: clamp(1.55rem, 2.6vw, 2.25rem);
letter-spacing: -0.04em;
line-height: 1.05;
}

.account-flash {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 16px;
font-size: 0.9rem;
font-weight: 850;
margin-bottom: 12px;
}
.account-flash--success {
background: #ecfdf3;
color: #166534;
border: 1px solid rgba(22, 101, 52, 0.16);
}
.account-flash--warning {
background: #fffbeb;
color: #111827;
border: 1px solid rgba(146, 64, 14, 0.16);
}
.account-access-form {
display: grid;
gap: 10px;
margin-top: 12px;
}
.account-access-form label {
font-size: 0.82rem;
font-weight: 900;
color: var(--text);
}
.account-access-form > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.account-access-list {
display: grid;
gap: 10px;
margin-top: 12px;
}
.account-access-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface-2);
}
.account-access-row strong,
.account-access-row span {
display: block;
}
.account-access-row strong {
font-size: 0.92rem;
color: var(--text);
}
.account-access-row span {
margin-top: 2px;
font-size: 0.78rem;
font-weight: 800;
color: var(--text-3);
}
.account-access-row i {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 12px;
background: var(--primary-soft);
color: var(--primary);
flex-shrink: 0;
}
.account-whatsapp-card {
position: relative;
overflow: hidden;
border-color: rgba(37, 211, 102, 0.22);
background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
}
.account-whatsapp-card p {
margin: 10px 0 16px;
color: var(--text-3);
font-size: 0.92rem;
line-height: 1.6;
}
.account-whatsapp-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
margin-bottom: 12px;
border-radius: 16px;
background: #dcfce7;
color: #16a34a;
font-size: 1.45rem;
}
.account-whatsapp-label {
display: block;
margin-bottom: 8px;
color: var(--text);
font-size: 0.82rem;
font-weight: 900;
}
.account-whatsapp-select {
width: 100%;
margin-bottom: 14px;
}
.account-whatsapp-btn {
width: 100%;
min-height: 50px;
justify-content: center;
font-size: 0.98rem;
background: #16a34a !important;
color: #fff !important;
border-color: #16a34a !important;
box-shadow: 0 16px 32px rgba(22, 163, 74, 0.26);
}
.account-whatsapp-btn:hover {
background: #15803d !important;
border-color: #15803d !important;
}
.account-whatsapp-btn.disabled {
pointer-events: auto;
opacity: 0.62;
filter: grayscale(0.2);
cursor: not-allowed;
}
.account-whatsapp-help {
display: block;
margin-top: 10px;
color: var(--text-3);
font-size: 0.78rem;
font-weight: 800;
}
@media (max-width: 560px) {
.account-access-form > div {
grid-template-columns: 1fr;
}
.account-access-form .btn,
.account-whatsapp-btn {
width: 100%;
}
}

/* ===== Auth Pages ===== */
.auth-page {
position: relative;
min-height: calc(100vh - var(--nav-h));
padding: 56px 0 72px;
background:
radial-gradient(circle at 10% 8%, rgba(20, 184, 166, 0.14), transparent 30%),
radial-gradient(circle at 90% 15%, rgba(56, 189, 248, 0.12), transparent 28%),
linear-gradient(180deg, #f8fbff 0%, #edf5f7 100%);
overflow: hidden;
}
.auth-page::before {
content: "";
position: absolute;
inset: auto -90px -180px auto;
width: 360px;
height: 360px;
border-radius: 999px;
background: rgba(15, 76, 129, 0.08);
}
.auth-shell {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: calc(100vh - var(--nav-h) - 128px);
}
.auth-shell--register {
min-height: calc(100vh - var(--nav-h) - 96px);
}
.auth-intro {
position: relative;
min-height: 560px;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 34px;
border-radius: 34px;
overflow: hidden;
background:
linear-gradient(140deg, rgba(7, 17, 31, 0.94), rgba(12, 45, 74, 0.88)),
url("https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=1200&q=80") center/cover;
box-shadow: var(--shadow-lg);
color: #fff;
}
.auth-intro::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 20%, rgba(20, 184, 166, 0.22), transparent 30%),
linear-gradient(180deg, transparent 0%, rgba(7, 17, 31, 0.38) 100%);
}
.auth-intro > * {
position: relative;
z-index: 1;
}
.auth-intro h1 {
margin-top: 18px;
max-width: 720px;
color: #fff;
font-size: clamp(2rem, 4.2vw, 3.65rem);
line-height: 1.08;
letter-spacing: -0.055em;
}
.auth-intro p {
margin-top: 16px;
max-width: 590px;
color: rgba(226, 232, 240, 0.78);
font-size: 1rem;
line-height: 1.82;
}
.auth-benefits {
display: grid;
gap: 10px;
max-width: 560px;
margin-top: 26px;
}
.auth-benefits span {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 12px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.88);
font-size: 0.9rem;
font-weight: 800;
backdrop-filter: blur(12px);
}
.auth-benefits i {
color: #5eead4;
}
.auth-card {
align-self: center;
width: min(100%, 520px);
padding: 28px;
border-radius: 30px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(203, 213, 225, 0.78);
box-shadow: var(--shadow-lg);
backdrop-filter: blur(18px);
}
.auth-back {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
color: var(--text-3);
text-decoration: none;
font-size: 0.84rem;
font-weight: 850;
}
.auth-back:hover {
color: var(--primary);
}
.auth-head {
margin-bottom: 20px;
}
.auth-head span {
display: inline-flex;
padding: 6px 10px;
border-radius: 999px;
background: var(--primary-soft);
color: var(--primary);
font-size: 0.7rem;
font-weight: 950;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.auth-head h2 {
margin-top: 12px;
font-size: clamp(1.75rem, 3vw, 2.35rem);
line-height: 1.08;
letter-spacing: -0.045em;
}
.auth-head p {
margin-top: 8px;
font-size: 0.92rem;
line-height: 1.65;
}
.auth-form {
display: grid;
gap: 14px;
margin-top: 18px;
}
.auth-field {
display: grid;
gap: 7px;
}
.auth-field label {
color: var(--text);
font-size: 0.82rem;
font-weight: 900;
}
.auth-field .blank-in {
width: 100%;
min-height: 48px;
border-radius: 15px;
border-color: #d7e2ec;
background: #fff;
font-weight: 700;
}
.auth-field .blank-in:focus {
border-color: rgba(15, 76, 129, 0.48);
box-shadow: 0 0 0 4px rgba(15, 76, 129, 0.08);
}
.auth-password-wrap {
position: relative;
}
.auth-password-wrap .blank-in {
padding-right: 118px;
}
.auth-password-toggle {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 34px;
padding: 7px 10px;
border: none;
border-radius: 12px;
background: var(--surface-2);
color: var(--text-3);
font: inherit;
font-size: 0.76rem;
font-weight: 900;
cursor: pointer;
}
.auth-password-toggle:hover,
.auth-password-toggle[aria-pressed="true"] {
background: var(--primary-soft);
color: var(--primary);
}
.auth-submit {
margin-top: 6px;
min-height: 50px;
background: #000;
color: #fff;
}
.auth-switch {
margin-top: 18px;
text-align: center;
font-size: 0.9rem;
}
.auth-switch a {
color: var(--primary);
font-weight: 900;
text-decoration: none;
}
.auth-switch a:hover {
text-decoration: underline;
}
.auth-alert-list {
display: grid;
gap: 8px;
margin-bottom: 14px;
}
.auth-alert {
padding: 11px 12px;
border-radius: 15px;
font-size: 0.86rem;
font-weight: 850;
line-height: 1.45;
border: 1px solid transparent;
}
.auth-alert--success {
color: #166534;
background: #ecfdf3;
border-color: rgba(22, 101, 52, 0.14);
}
.auth-alert--warning {
color: #111827;
background: #fffbeb;
border-color: rgba(146, 64, 14, 0.16);
}
.auth-alert--danger {
color: #991b1b;
background: #fef2f2;
border-color: rgba(153, 27, 27, 0.14);
}
@media (max-width: 980px) {
.auth-shell,
.auth-shell--register {
min-height: auto;
}
.auth-intro {
min-height: auto;
padding: 28px;
}
.auth-card {
align-self: stretch;
}
}
@media (max-width: 560px) {
.auth-page {
padding: 28px 0 46px;
}
.auth-intro {
padding: 22px;
border-radius: 26px;
}
.auth-intro h1 {
font-size: clamp(1.9rem, 10vw, 2.75rem);
}
.auth-card {
padding: 20px;
border-radius: 24px;
}
.auth-password-wrap .blank-in {
padding-right: 48px;
}
.auth-password-toggle {
width: 38px;
height: 34px;
justify-content: center;
padding: 0;
}
.auth-password-toggle span {
display: none;
}
}

/* ===== MD-Akademie Pro Home ===== */
.home-pro-hero {
position: relative;
min-height: 100vh;
min-height: 100svh;
margin-top: calc(-1 * var(--nav-h));
overflow: hidden;
background: #07111f;
color: #fff;
}
.home-pro-hero-bg {
position: absolute;
inset: 0;
}
.home-pro-hero-bg img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
display: block;
filter: saturate(0.92) contrast(1.04);
}
.home-pro-hero-bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 18% 25%, rgba(20, 184, 166, 0.28), transparent 32%),
linear-gradient(115deg, rgba(7, 17, 31, 0.96) 0%, rgba(8, 24, 45, 0.9) 48%, rgba(8, 31, 52, 0.72) 100%);
}
.home-pro-hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) 430px;
align-items: center;
gap: 42px;
padding-top: calc(var(--nav-h) + 24px);
padding-bottom: 56px;
min-height: 100vh;
min-height: 100svh;
}
.home-pro-hero-copy {
max-width: 700px;
animation: home-fade-up 640ms ease both;
}
.home-pro-hero-copy h1 {
margin-top: 22px;
color: #fff;
font-size: clamp(2.2rem, 4.3vw, 4.15rem);
line-height: 1.16;
letter-spacing: -0.065em;
max-width: 690px;
}
.home-pro-hero-copy p {
margin-top: 24px;
max-width: 650px;
color: rgba(226, 232, 240, 0.82);
font-size: clamp(1rem, 1.35vw, 1.18rem);
line-height: 1.85;
}
.home-pro-pill-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 24px;
}
.home-pro-pill-row span {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 7px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.14);
color: rgba(255, 255, 255, 0.88);
font-size: 0.78rem;
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
backdrop-filter: blur(12px);
}
.home-pro-primary {
background: linear-gradient(135deg, #ffc107, #f59e0b);
color: #111827;
box-shadow: 0 18px 42px rgba(245, 158, 11, 0.28);
}
.home-pro-secondary {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.home-pro-secondary:hover {
background: rgba(255, 255, 255, 0.16);
color: #fff;
}
.home-pro-panel {
padding: 24px;
border-radius: 30px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.16);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.26);
backdrop-filter: blur(22px);
animation: home-fade-up 760ms 120ms ease both;
}
.home-pro-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.home-pro-panel-head span {
display: inline-flex;
padding: 6px 10px;
border-radius: 999px;
background: rgba(56, 189, 248, 0.16);
color: #bae6fd;
font-size: 0.72rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.home-pro-panel-head strong {
font-size: 1.02rem;
}
.home-pro-track {
display: grid;
gap: 12px;
}
.home-pro-track div {
position: relative;
display: grid;
grid-template-columns: 48px 1fr;
align-items: center;
gap: 12px;
padding: 16px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.home-pro-track span {
grid-row: 1 / span 2;
align-self: center;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 14px;
background: #fff;
color: #0f4c81;
font-size: 0.82rem;
font-weight: 950;
}
.home-pro-track strong {
display: block;
align-self: end;
transform: translateY(4px);
color: #fff;
font-size: 0.98rem;
}
.home-pro-track p {
grid-column: 2;
margin-top: 6px;
color: rgba(226, 232, 240, 0.66);
font-size: 0.83rem;
line-height: 1.55;
}
.home-pro-panel-note {
display: flex;
gap: 10px;
align-items: flex-start;
margin-top: 16px;
padding: 14px;
border-radius: 18px;
background: rgba(20, 184, 166, 0.14);
color: rgba(240, 253, 250, 0.9);
font-size: 0.86rem;
font-weight: 750;
line-height: 1.55;
}
.home-pro-panel-note i {
color: #5eead4;
margin-top: 4px;
}
.stats-banner--home-pro {
background:
linear-gradient(135deg, #082f49 0%, #0f766e 100%),
radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.14), transparent 32%);
}
.home-pathways-section {
background:
linear-gradient(180deg, #f8fbff 0%, #eef6f7 100%);
}
.home-pathway-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.home-pathway-card {
position: relative;
min-height: 285px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 24px;
border-radius: 28px;
background: #fff;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: var(--shadow-sm);
text-decoration: none;
color: var(--text);
overflow: hidden;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.home-pathway-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 7px;
background: var(--path-color, var(--primary));
}
.home-pathway-card::after {
content: "";
position: absolute;
right: -38px;
top: -48px;
width: 130px;
height: 130px;
border-radius: 999px;
background: color-mix(in srgb, var(--path-color, var(--primary)) 16%, transparent);
}
.home-pathway-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
border-color: color-mix(in srgb, var(--path-color, var(--primary)) 32%, var(--line));
}
.home-pathway-icon {
position: relative;
z-index: 1;
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 18px;
background: color-mix(in srgb, var(--path-color, var(--primary)) 12%, #fff);
color: var(--path-color, var(--primary));
font-size: 1.22rem;
margin-bottom: 18px;
}
.home-pathway-card > span {
display: inline-flex;
padding: 5px 9px;
border-radius: 999px;
background: color-mix(in srgb, var(--path-color, var(--primary)) 9%, #fff);
color: var(--path-color, var(--primary));
font-size: 0.68rem;
font-weight: 950;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.home-pathway-card h3 {
margin-top: 14px;
font-size: 1.16rem;
}
.home-pathway-card p {
margin-top: 10px;
font-size: 0.9rem;
line-height: 1.72;
}
.home-pathway-card strong {
margin-top: auto;
padding-top: 18px;
color: var(--path-color, var(--primary));
font-size: 0.86rem;
display: inline-flex;
align-items: center;
gap: 8px;
}
.home-method-section {
background: #fff;
}
.home-method-grid {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 34px;
align-items: center;
}
.home-method-copy {
max-width: 560px;
}
.home-method-copy p {
margin-top: 16px;
font-size: 1rem;
line-height: 1.82;
}
.home-method-copy .btn {
margin-top: 24px;
}
.home-method-cards {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.home-method-cards article {
min-height: 190px;
padding: 22px;
border-radius: 24px;
background:
linear-gradient(180deg, #fff 0%, #f8fbff 100%);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
}
.home-method-cards i {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 16px;
background: var(--primary-soft);
color: var(--primary);
font-size: 1.05rem;
margin-bottom: 16px;
}
.home-method-cards strong {
display: block;
font-size: 1rem;
color: var(--text);
margin-bottom: 8px;
}
.home-method-cards p {
font-size: 0.88rem;
line-height: 1.7;
}
.home-empty-course {
padding: 28px;
grid-column: 1 / -1;
text-align: center;
}
.home-empty-course i {
font-size: 2rem;
color: var(--text-4);
margin-bottom: 12px;
}
.home-proof-section {
padding-top: 32px;
}
.home-proof-card {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 28px;
align-items: center;
padding: 34px;
border-radius: 32px;
background:
radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.14), transparent 34%),
linear-gradient(135deg, #0f172a 0%, #122a43 100%);
color: #fff;
box-shadow: var(--shadow-lg);
}
.home-proof-card h2 {
color: #fff;
max-width: 760px;
}
.home-proof-card p {
margin-top: 16px;
color: rgba(226, 232, 240, 0.74);
max-width: 760px;
font-size: 1rem;
line-height: 1.8;
}
.home-proof-list {
display: grid;
gap: 10px;
padding: 18px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.home-proof-list span {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255, 255, 255, 0.86);
font-size: 0.9rem;
font-weight: 750;
}
.home-proof-list i {
color: #5eead4;
}
.courses-pro-head {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 24px;
align-items: end;
padding: 34px;
margin-bottom: 22px;
border-radius: 30px;
background:
radial-gradient(circle at 12% 10%, rgba(20, 184, 166, 0.16), transparent 34%),
linear-gradient(135deg, #0f172a 0%, #143452 100%);
color: #fff;
box-shadow: var(--shadow-md);
}
.courses-pro-head h1 {
margin-top: 14px;
color: #fff;
font-size: clamp(2rem, 4.4vw, 3.4rem);
line-height: 1.02;
letter-spacing: -0.05em;
}
.courses-pro-head p {
margin-top: 12px;
color: rgba(226, 232, 240, 0.76);
max-width: 720px;
}
.courses-pro-tags {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 9px;
}
.courses-pro-tags span {
display: inline-flex;
padding: 7px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.13);
color: rgba(255, 255, 255, 0.86);
font-size: 0.74rem;
font-weight: 850;
}
@keyframes home-fade-up {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1180px) {
.home-pro-hero-grid {
grid-template-columns: 1fr;
padding-bottom: 70px;
}
.home-pro-panel {
max-width: 720px;
}
.home-pathway-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.courses-pro-head {
grid-template-columns: 1fr;
}
.courses-pro-tags {
justify-content: flex-start;
}
}
@media (max-width: 860px) {
.home-pro-hero-grid {
padding-top: calc(var(--nav-h) + 34px);
gap: 28px;
}
.home-pro-hero-copy h1 {
font-size: clamp(2rem, 10vw, 3rem);
line-height: 1.18;
max-width: 92%;
}
.home-pro-hero .hero-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
width: 100%;
max-width: 520px;
margin-top: 22px;
}
.home-pro-hero .hero-actions .btn {
width: 100%;
min-height: 48px;
padding: 13px 14px;
white-space: normal;
line-height: 1.2;
text-align: center;
}
.home-pro-panel {
border-radius: 24px;
padding: 18px;
}
.home-method-grid,
.home-proof-card {
grid-template-columns: 1fr;
}
.home-method-cards {
grid-template-columns: 1fr;
}
.home-proof-card,
.courses-pro-head {
padding: 24px;
border-radius: 26px;
}
}
@media (max-width: 560px) {
.home-pro-hero-copy p {
font-size: 0.96rem;
line-height: 1.7;
}
.home-pro-hero .hero-actions {
grid-template-columns: 1fr;
max-width: none;
}
.home-pro-hero .hero-actions .btn {
min-height: 50px;
font-size: 0.92rem;
}
.home-pro-pill-row span {
font-size: 0.7rem;
}
.home-pro-track div {
grid-template-columns: 42px 1fr;
padding: 14px;
}
.home-pro-track span {
width: 38px;
height: 38px;
border-radius: 12px;
}
.home-pathway-grid {
grid-template-columns: 1fr;
}
.home-pathway-card {
min-height: 250px;
padding: 22px;
}
.courses-pro-tags span {
font-size: 0.7rem;
}
}

/* Cloze select placeholder */
.fill-gap-select option[value=""] {
color: var(--text-4);
}

/* Brand image logo */
.footer-brand-mark { overflow: hidden; }
.footer-brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ex-type-image {
--ex-bg: #eef2ff;
--ex-color: #4338ca;
}
.image-quiz-media {
margin: 0 0 16px;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--line);
background: var(--surface-2);
}
.image-quiz-media img {
display: block;
width: 100%;
max-height: 280px;
object-fit: contain;
background: #f8fafc;
animation: quiz-img-in 0.4s ease both;
}

/* ===== QUIZ / IMAGE QUIZ — transitions fluides ===== */
@keyframes quiz-card-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes quiz-img-in {
from { opacity: 0; transform: scale(1.015); }
to { opacity: 1; transform: scale(1); }
}
.quiz-card-anim {
animation: quiz-card-in 0.28s ease both;
will-change: opacity, transform;
}
.quiz-card-anim.quiz-card-out {
animation: none;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.16s ease, transform 0.16s ease;
}
.quiz-card-anim .option {
transition: background 0.18s ease, border-color 0.18s ease, transform 0.14s ease, opacity 0.18s ease;
}
.quiz-card-anim .option.is-dimmed {
opacity: 0.5;
}
.quiz-card-anim .option.selected {
transform: translateY(-1px);
}
@media (prefers-reduced-motion: reduce) {
.quiz-card-anim,
.image-quiz-media img { animation: none; }
}

/* ===== EXERCISE HUB REFRESH ===== */
.exercise-hub-page,
.exercise-level-page {
padding: 34px 0 64px;
}
.exercise-hub-page {
padding-top: 18px;
}
.exercise-hub-hero {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: stretch;
margin-bottom: 16px;
}
.exercise-hub-copy {
position: relative;
overflow: hidden;
border-radius: 8px;
padding: clamp(20px, 4vw, 40px);
background:
linear-gradient(135deg, rgba(15, 76, 129, 0.96), rgba(15, 118, 110, 0.92)),
linear-gradient(45deg, rgba(255, 193, 7, 0.22), transparent);
box-shadow: var(--shadow-md);
}
.exercise-hub-copy::after {
content: "";
position: absolute;
inset: auto -8% -28% 46%;
height: 220px;
background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 1px, transparent 1px 14px);
transform: rotate(-6deg);
}
.exercise-hub-copy > * {
position: relative;
z-index: 1;
}
.exercise-hub-copy .eyebrow {
background: rgba(255,255,255,.13);
border-color: rgba(255,255,255,.18);
color: #fff;
}
.exercise-hub-copy h1 {
max-width: 820px;
margin-top: 18px;
font-size: clamp(2.2rem, 5vw, 4.4rem);
color: #fff;
}
.exercise-hub-copy p {
max-width: 680px;
margin-top: 18px;
font-size: 1.05rem;
color: rgba(255,255,255,.84);
}
.exercise-hub-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 26px;
}
.exercise-hub-panel {
display: grid;
align-content: space-between;
gap: 18px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 24px;
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.exercise-hub-panel-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
}
.exercise-hub-panel-head strong {
font-size: 1rem;
}
.exercise-hub-panel-head span {
font-size: .78rem;
font-weight: 800;
color: var(--text-3);
text-transform: uppercase;
}
.exercise-hub-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.exercise-hub-stats div {
border: 1px solid var(--line);
border-radius: 8px;
padding: 16px;
background: var(--surface-2);
}
.exercise-hub-stats strong {
display: block;
font-size: 2rem;
line-height: 1;
color: var(--primary);
}
.exercise-hub-stats span {
display: block;
margin-top: 6px;
font-size: .78rem;
font-weight: 800;
color: var(--text-3);
}
.exercise-format-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.exercise-section-head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 20px;
margin-bottom: 18px;
}
.exercise-section-head h2 {
margin-top: 12px;
font-size: clamp(1.7rem, 3vw, 2.5rem);
}
.exercise-section-head p {
max-width: 460px;
font-size: .92rem;
}
.level-exercise-grid--hub {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.exercise-level-card-v2 {
border-radius: 8px;
border-top: 0;
position: relative;
overflow: hidden;
min-height: 250px;
}
.exercise-level-card-v2::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
background: var(--lv-color, var(--primary));
}
.exercise-level-card-v2 .level-exercise-badge,
.exercise-level-page .level-exercise-badge {
border-radius: 8px;
}
.exercise-level-progress {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-top: 10px;
font-size: .78rem;
font-weight: 800;
color: var(--text-3);
}
.exercise-empty-state {
grid-column: 1 / -1;
display: grid;
place-items: center;
text-align: center;
gap: 10px;
border: 1px dashed var(--line-strong);
border-radius: 8px;
padding: 34px;
background: var(--surface);
}
.exercise-empty-state i {
font-size: 2rem;
color: var(--text-4);
}
.exercise-empty-state p {
max-width: 520px;
}
.exercise-back-link {
margin-bottom: 18px;
}
.exercise-level-hero {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: stretch;
margin-bottom: 18px;
}
.exercise-level-title-block {
display: flex;
gap: 18px;
align-items: center;
border: 1px solid var(--line);
border-radius: 8px;
padding: clamp(20px, 4vw, 34px);
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.exercise-level-title-block .level-exercise-badge {
width: 68px;
height: 68px;
background: var(--lv-color);
}
.exercise-level-title-block h1 {
margin-top: 12px;
font-size: clamp(1.9rem, 4vw, 3.2rem);
}
.exercise-level-title-block p {
max-width: 720px;
margin-top: 8px;
font-size: .98rem;
}
.exercise-level-summary {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
border: 1px solid var(--line);
border-radius: 8px;
padding: 16px;
background: var(--surface);
box-shadow: var(--shadow-sm);
}
.exercise-level-summary div {
display: grid;
place-items: center;
text-align: center;
border-radius: 8px;
background: var(--surface-2);
padding: 18px 10px;
}
.exercise-level-summary strong {
font-size: 2.1rem;
line-height: 1;
color: var(--lv-color);
}
.exercise-level-summary span {
margin-top: 6px;
font-size: .78rem;
font-weight: 900;
color: var(--text-3);
text-transform: uppercase;
}
.exercise-level-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 18px;
}
.exercise-level-toolbar p {
max-width: 520px;
font-size: .9rem;
}
.exercise-level-meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.exercise-course-accordion--v2 {
gap: 12px;
}
.exercise-course-group--v2 {
border-radius: 16px;
border: 1px solid var(--line);
background: var(--surface);
box-shadow: var(--shadow-sm);
transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.exercise-course-group--v2:hover {
border-color: var(--line-strong);
}
.exercise-course-group--v2[open] {
border-color: color-mix(in srgb, var(--accent-color, var(--primary)) 42%, var(--line));
box-shadow: var(--shadow-md);
}
.exercise-course-head--v2 {
grid-template-columns: minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 16px 18px;
border-radius: 16px;
transition: background 0.18s ease;
}
.exercise-course-head--v2:hover {
background: var(--surface-2);
}
.exercise-course-group--v2[open] .exercise-course-head--v2 {
border-radius: 16px 16px 0 0;
border-bottom: 1px solid var(--line);
}
.exercise-course-heading {
min-width: 0;
}
.exercise-course-head--v2 .course-category-chip {
margin-bottom: 6px;
color: var(--accent-color, var(--primary));
background: color-mix(in srgb, var(--accent-color, var(--primary)) 10%, #fff);
border-color: color-mix(in srgb, var(--accent-color, var(--primary)) 22%, transparent);
}
.exercise-course-heading h3 {
margin-top: 0;
font-size: 1.06rem;
line-height: 1.3;
}
.exercise-course-heading p {
margin-top: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.exercise-course-head--v2 .exercise-course-meta {
gap: 10px;
width: auto;
justify-content: flex-end;
}
.exercise-course-head--v2 .exercise-course-meta .tag {
display: none;
}
.exercise-course-head--v2 .exercise-course-meta strong {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 999px;
background: color-mix(in srgb, var(--accent-color, var(--primary)) 10%, var(--surface-2));
color: var(--accent-color, var(--primary));
font-size: 0.8rem;
white-space: nowrap;
}
.exercise-course-head--v2 .exercise-course-meta > i {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--line);
color: var(--text-3);
font-size: 0.78rem;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.exercise-course-group--v2[open] .exercise-course-meta > i {
background: color-mix(in srgb, var(--accent-color, var(--primary)) 12%, #fff);
border-color: color-mix(in srgb, var(--accent-color, var(--primary)) 32%, transparent);
color: var(--accent-color, var(--primary));
}
.exercise-course-list--v2 {
padding: 14px 16px 16px;
gap: 10px;
}
.exercise-item-card--v2 {
border-radius: 12px;
}
.exercise-item-card--v2 .btn-primary {
min-width: 96px;
}
@media (max-width: 640px) {
.exercise-course-group--v2 {
border-radius: 14px;
}
.exercise-course-head--v2 {
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
padding: 14px;
border-radius: 14px;
}
.exercise-course-group--v2[open] .exercise-course-head--v2 {
border-radius: 14px 14px 0 0;
}
.exercise-course-head--v2 .exercise-course-meta {
flex-direction: row;
width: auto;
justify-content: flex-end;
gap: 8px;
}
.exercise-course-heading p {
display: none;
}
.exercise-course-head--v2 .exercise-course-meta strong {
padding: 5px 10px;
font-size: 0.74rem;
}
.exercise-course-list--v2 {
padding: 12px;
}
}
@media (max-width: 980px) {
.exercise-hub-hero,
.exercise-level-hero {
grid-template-columns: 1fr;
}
.level-exercise-grid--hub {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.exercise-level-toolbar,
.exercise-section-head {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 640px) {
.exercise-hub-page,
.exercise-level-page {
padding-top: 22px;
}
.exercise-hub-copy,
.exercise-hub-panel,
.exercise-level-title-block {
padding: 18px;
}
.exercise-hub-actions,
.exercise-hub-actions .btn,
.exercise-level-toolbar,
.level-exercise-grid--hub {
width: 100%;
}
.level-exercise-grid--hub,
.exercise-hub-stats,
.exercise-level-summary {
grid-template-columns: 1fr;
}
.exercise-level-title-block {
align-items: flex-start;
flex-direction: column;
}
/* Liste compacte : icône | titre + type | bouton Lancer */
.exercise-item-card--v2 {
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 12px;
}
.exercise-item-card--v2 .exercise-item-type {
width: 40px;
height: 40px;
font-size: 0.98rem;
}
.exercise-item-card--v2 .exercise-item-top { margin-bottom: 2px; }
.exercise-item-card--v2 .exercise-item-top h4 {
font-size: 0.9rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.exercise-item-card--v2 .exercise-item-body > p { display: none; }
.exercise-item-card--v2 .exercise-item-action {
grid-column: auto;
align-items: center;
padding-top: 0;
}
.exercise-item-card--v2 .exercise-item-action .btn {
width: 40px;
height: 40px;
min-width: 0;
padding: 0;
border-radius: 999px;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.exercise-item-card--v2 .exercise-item-launch span { display: none; }
.exercise-item-card--v2 .exercise-item-launch i { margin: 0; transform: translateX(1px); }
/* Verrouillé : garder le libellé du bouton + afficher la mention sous le titre */
.exercise-item-card--v2 .exercise-item-action .exercise-item-lock-btn {
width: auto;
height: auto;
min-height: 40px;
padding: 9px 12px;
border-radius: 12px;
}
.exercise-item-card--v2 .exercise-item-lock-btn span { display: inline; }
.exercise-item-card--v2 .exercise-item-lock-btn i { margin: 0; }
.exercise-item-card--v2.is-locked .exercise-item-lock-note { display: inline-flex; }
/* Verrouillé : le corps prend toute la largeur, bouton pleine largeur en dessous */
.exercise-item-card--v2.is-locked {
grid-template-columns: 40px minmax(0, 1fr);
align-items: start;
}
.exercise-item-card--v2.is-locked .exercise-item-action {
grid-column: 1 / -1;
}
.exercise-item-card--v2.is-locked .exercise-item-action .exercise-item-lock-btn {
width: 100%;
justify-content: center;
}
}

/* ===== PASS PRO & MOBILE ===== */
/* Accessibilité : focus clavier visible partout */
:focus-visible {
outline: 3px solid rgba(29, 111, 184, 0.55);
outline-offset: 2px;
}
.site-nav :focus-visible,
.hero--fullbg :focus-visible,
.home-pro-hero :focus-visible,
.auth-intro :focus-visible {
outline-color: rgba(125, 211, 252, 0.9);
}
::selection { background: rgba(29, 111, 184, 0.18); }

/* Lien d'évitement (clavier / lecteur d'écran) */
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 2000;
padding: 12px 16px;
border-radius: 12px;
background: var(--primary);
color: #fff;
font-weight: 800;
font-size: 0.9rem;
text-decoration: none;
box-shadow: var(--shadow-md);
transform: translateY(-260%);
transition: transform 0.18s ease;
}
.skip-link:focus-visible { transform: translateY(0); }

/* Ancres : ne pas passer sous la barre fixe */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* Typo : titres équilibrés, paragraphes sans mot orphelin */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Interactions tactiles nettes */
a, button, summary, label {
-webkit-tap-highlight-color: transparent;
}
.btn, .tab, .option, .account-tab-btn, .nav-toggle, summary {
touch-action: manipulation;
}

/* Onglets du compte : défilement horizontal discret */
.account-tab-list { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.account-tab-list::-webkit-scrollbar { height: 6px; }
.account-tab-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

/* Admin : tables larges défilables au lieu de casser la mise en page */
.admin-card-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Menu mobile : apparition douce */
@keyframes nav-menu-in {
from { opacity: 0; transform: translate(-50%, -8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}

@keyframes nav-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}

@media (max-width: 860px) {
body.nav-open .nav-mobile { animation: nav-menu-in 0.18s ease both; z-index: 1; }
/* Fond assombri derrière le menu mobile */
body.nav-open .site-nav::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 100dvh;
background: rgba(15, 23, 42, 0.45);
animation: nav-backdrop-in 0.2s ease both;
}
/* Héros d'accueil : hauteur naturelle, le contenu arrive plus vite */
.home-pro-hero, .home-pro-hero-grid { min-height: auto; }
.home-pro-hero-grid { padding-bottom: 44px; }
/* Cibles tactiles confortables */
.btn-sm { min-height: 44px; }
.nav-account-menu a { min-height: 44px; }
.admin-table { min-width: 640px; }
}

@media (max-width: 640px) {
/* iOS : éviter le zoom automatique au focus des champs */
input, select, textarea, .blank-in, .exercise-textarea, .search input, .fill-gap-select {
font-size: max(16px, 1em);
}
}

@media (max-width: 560px) {
.container { padding-left: 14px; padding-right: 14px; }
}

/* Respect du mouvement réduit */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}

/* ===== PAGE LEÇON — repères & Übung ===== */
/* En-tête : fil d'Ariane + titre + tags à gauche, action à droite */
.lms-topbar { align-items: flex-start; }
.lms-topbar-main {
display: grid;
gap: 8px;
min-width: 0;
}
.lms-breadcrumb {
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-4);
}
/* Sidebar : progression par thème */
.lms-acc-count { font-weight: 700; }
.lms-acc-count.is-complete { color: var(--success); font-weight: 800; }
/* Übung : liste affichée directement, avec un titre léger */
.lesson-ubung-picker { display: grid; gap: 12px; margin-top: 12px; }
.lesson-ubung-all-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 2px;
padding: 9px 12px;
border-radius: 12px;
color: var(--primary);
background: var(--primary-soft);
border: 1px solid rgba(15, 76, 129, 0.16);
text-decoration: none;
font-size: 0.86rem;
font-weight: 800;
transition: background 0.18s ease, border-color 0.18s ease;
}
.lesson-ubung-all-link span { flex: 1; }
.lesson-ubung-all-link:hover {
background: color-mix(in srgb, var(--primary) 14%, #fff);
border-color: rgba(15, 76, 129, 0.3);
}
.lesson-ubung-title {
display: flex;
align-items: center;
gap: 8px;
color: var(--text);
}
.lesson-ubung-title i { color: var(--primary); }
.lesson-ubung-title strong { font-size: 0.95rem; }
.lesson-ubung-title span {
display: inline-grid;
place-items: center;
min-width: 22px;
height: 22px;
padding: 0 7px;
border-radius: 999px;
background: var(--primary-soft);
color: var(--primary);
font-size: 0.72rem;
font-weight: 800;
}

/* ===== EXERCICE VERROUILLÉ ===== */
.exercise-item-card.is-locked {
background: var(--surface-2);
border-style: dashed;
}
.exercise-item-card.is-locked .exercise-item-top h4 { color: var(--text-3); }
.exercise-item-card.is-locked .exercise-item-body > p { color: var(--text-4); }
.exercise-item-type.is-locked {
background: #e2e8f0;
color: #64748b;
}
.exercise-item-lock-btn { white-space: nowrap; }
/* Mention de verrouillage : affichée surtout en mobile (desktop = le <p> explique) */
.exercise-item-lock-note {
display: none;
align-items: center;
gap: 6px;
margin-top: 4px;
color: #b45309;
font-size: 0.74rem;
font-weight: 800;
}
.exercise-item-lock-note i { font-size: 0.78rem; }

/* ===== PROGRESSION DES EXERCICES ===== */
.exercise-item-done {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 4px;
font-size: 0.74rem;
font-weight: 800;
}
.exercise-item-done i { font-size: 0.82rem; }
.exercise-item-done.is-passed { color: #15803d; }
.exercise-item-done.is-failed { color: #b45309; }
.exercise-item-done.is-todo { color: #64748b; }
/* Ligne réussie vs à refaire */
.exercise-item-card.is-passed {
border-color: rgba(22, 163, 74, 0.32);
background: linear-gradient(180deg, #f4fdf7 0%, var(--surface) 100%);
}
.exercise-item-card.is-passed .exercise-item-type {
background: #dcfce7;
color: #15803d;
}
.exercise-item-card.is-failed {
border-color: rgba(180, 83, 9, 0.30);
background: linear-gradient(180deg, #fffaf2 0%, var(--surface) 100%);
}
/* Badge de statut d'un thème (accordéon exercices du cours) */
.exercise-theme-status {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 6px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid transparent;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.exercise-theme-status.is-todo {
color: var(--text-3);
background: var(--surface-2);
border-color: var(--line);
}
.exercise-theme-status.is-progress {
color: #b45309;
background: #fffbeb;
border-color: #fde68a;
}
.exercise-theme-status.is-done {
color: #15803d;
background: #dcfce7;
border-color: rgba(21, 128, 61, 0.2);
}
/* Bandeau verdict sur l'écran de résultat */
.practice-verdict {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 0 14px;
padding: 10px 14px;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 850;
}
.practice-verdict i { font-size: 1.05rem; }
.practice-verdict.is-passed {
color: #15803d;
background: #ecfdf3;
border: 1px solid rgba(22, 101, 52, 0.16);
}
.practice-verdict.is-failed {
color: #b45309;
background: #fffbeb;
border: 1px solid rgba(180, 83, 9, 0.18);
}

/* Barre de progression par niveau (hub) */
.level-exercise-progressbar {
height: 6px;
margin-top: 12px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.08);
overflow: hidden;
}
.level-exercise-progressbar-fill {
display: block;
width: 0;
height: 100%;
border-radius: inherit;
background: var(--lv-color, var(--primary));
transition: width 0.5s ease;
}
.level-exercise-progress-label {
display: block;
margin-top: 6px;
font-size: 0.74rem;
font-weight: 800;
color: var(--text-3);
}
.level-exercise-card.has-progress .level-exercise-progress-label { color: var(--lv-color, var(--primary)); }
.level-exercise-card.is-complete .level-exercise-progressbar-fill {
background: linear-gradient(90deg, #16a34a, #22c55e);
}
.level-exercise-card.is-complete .level-exercise-progress-label { color: #15803d; }

/* Navigation prev/suivant : version simple et compacte */
.lms-lesson-nav-panel.compact {
background: transparent;
border: 0;
border-top: 1px solid var(--line);
border-radius: 0;
box-shadow: none;
padding: 14px 0 0;
margin-top: 16px;
gap: 10px;
}
.lms-lesson-nav-panel.compact .lms-nav-card {
min-height: 46px;
padding: 9px 12px;
border-radius: 12px;
background: var(--surface-2);
border: 1px solid var(--line);
box-shadow: none;
}
.lms-lesson-nav-panel.compact .lms-nav-card strong { display: none; }
.lms-lesson-nav-panel.compact .lms-nav-card small {
margin: 0;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0;
text-transform: none;
color: var(--text-2);
}
.lms-lesson-nav-panel.compact .lms-nav-card-icon {
width: 28px;
height: 28px;
border-radius: 9px;
transition: transform 0.18s ease;
}
.lms-lesson-nav-panel.compact .lms-nav-card-next:not(.disabled) {
background: var(--primary-soft);
border-color: rgba(15, 76, 129, 0.18);
}
.lms-lesson-nav-panel.compact .lms-nav-card-next:not(.disabled) small { color: var(--primary); }
.lms-lesson-nav-panel.compact .lms-nav-card-next:not(.disabled) .lms-nav-card-icon {
background: var(--primary);
color: #fff;
}
.lms-lesson-nav-panel.compact .lms-nav-card-prev:not(.disabled):hover .lms-nav-card-icon { transform: translateX(-2px); }
.lms-lesson-nav-panel.compact .lms-nav-card-next:not(.disabled):hover .lms-nav-card-icon { transform: translateX(2px); }

/* ===== CTA : EXERCICES DU COURS (barre-bouton, bas de page cours) ===== */
.course-exercises-cta {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
width: fit-content;
max-width: 100%;
margin: 20px auto 0;
padding: 14px 18px;
border: 1px solid color-mix(in srgb, var(--accent-color, var(--primary)) 28%, var(--line));
border-radius: 14px;
background: color-mix(in srgb, var(--accent-color, var(--primary)) 8%, #fff);
color: var(--accent-color, var(--primary));
text-decoration: none;
font-weight: 800;
font-size: 0.98rem;
transition: background 0.18s ease, border-color 0.18s ease;
}
.course-exercises-cta > i:first-child { font-size: 1.05rem; }
.course-exercises-cta > span { text-align: center; }
.course-exercises-cta > span b { font-weight: 800; opacity: 0.65; }
.course-exercises-cta-chevron {
font-size: 0.9rem;
transition: transform 0.18s ease;
}
.course-exercises-cta:hover {
background: color-mix(in srgb, var(--accent-color, var(--primary)) 15%, #fff);
border-color: color-mix(in srgb, var(--accent-color, var(--primary)) 45%, var(--line));
}
.course-exercises-cta:hover .course-exercises-cta-chevron { transform: translateX(3px); }
@media (max-width: 560px) {
.course-exercises-cta { padding: 13px 14px; font-size: 0.92rem; }
}

/* ===== COURS : LISTE COMPACTE (MOBILE) ===== */
/* Par défaut (tablette / desktop) : éléments compacts masqués */
.course-card-chip-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.course-card-chip-row .course-category-chip { margin-bottom: 0; }
.course-card-lessons-inline { display: none; }
.course-card-deal { display: none; }
.course-card-go { display: none; }
.course-card-info-btn { display: none; }

@media (max-width: 640px) {
#course-catalog-grid.grid-3,
.grid-3 { gap: 14px; grid-template-columns: minmax(0, 1fr); }

/* Carte de cours mobile : verticale « premium » (image 16:9 + CTA) */
.course-card {
position: relative;
display: block;
min-width: 0;
padding: 0;
border-radius: 18px;
border: 1px solid var(--line);
background: #fff;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
overflow: hidden;
}
.course-card-media {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border-radius: 0;
}
.course-card-media img { width: 100%; height: 100%; object-fit: cover; }
.course-card:hover .course-card-media img { transform: none; }
.course-card-overlay { display: block; }

/* Favori : coin haut-gauche de l'image */
.course-card .course-favorite-form,
.course-card-media > .course-favorite-btn { top: 10px; left: 10px; right: auto; bottom: auto; }
.course-card .course-favorite-btn {
width: 36px;
height: 36px;
border: 1px solid rgba(255, 255, 255, 0.7);
background: rgba(15, 23, 42, 0.5);
color: #fff;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.3);
}
.course-card .course-favorite-btn i { font-size: 0.95rem; }
.course-card .course-favorite-btn.active { background: #fff; border-color: #fff; color: #dc2626; }

/* Badges sur l'image : niveau (haut-droite) + leçons (bas-gauche) */
.course-level-badge,
.course-lessons-badge { display: inline-flex; }
.course-level-badge { left: auto; right: 10px; top: 10px; bottom: auto; }
.course-lessons-badge { right: auto; left: 10px; top: auto; bottom: 10px; }

/* Corps */
.course-card-body { padding: 13px 14px 15px; }
.course-card-chip-row { gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.course-card-lessons-inline,
.course-card-deal,
.course-card-info-btn,
.course-card-go { display: none; }
.course-card h3 {
font-size: 1.02rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.course-card .muted { display: none; }

/* Prix : promo + prix barré visibles (dans la ligne de prix) */
.course-price-row { margin-top: 8px; }
.course-price-current:not(.course-price-free) { font-size: 1.16rem; }
.course-price-current.course-price-free { font-size: 0.66rem; padding: 4px 9px; }

/* Actions : « Voir le cours » plein + « Détail » compact, sur une ligne */
.course-card-actions {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 8px;
margin-top: 12px;
min-width: 0;
}
.course-card-actions .btn { flex: 1 1 auto; width: auto; min-width: 0; min-height: 44px; justify-content: center; }
.course-card-actions .btn-secondary { flex: 0 0 auto; padding-left: 14px; padding-right: 14px; }

/* Filtres inline (Domaine / Recherche) empilés sur mobile → évite le débordement horizontal de la page */
.admin-inline-filters { flex-direction: column; align-items: stretch; }
.admin-inline-filters .admin-filter-field { min-width: 0; width: 100%; }
.admin-inline-filters .admin-filter-actions { width: 100%; }
}