@font-face{
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('../fonts/manrope-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
font-family: 'Manrope';
font-style: normal;
font-weight: 200 800;
font-display: swap;
src: url('../fonts/manrope-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
--c-primary-50:  #EEF0FE;
--c-primary-100: #DCE0FD;
--c-primary-200: #BAC2FA;
--c-primary-300: #909DF5;
--c-primary-400: #6474EB;
--c-primary-500: #4A5CEA;
--c-primary-600: #3B4FE0;
--c-primary-700: #2E3FC4;
--c-primary-800: #2634A0;
--c-primary-900: #1F2A7D;
--c-secondary-400: #24325C;
--c-secondary-500: #16234A;
--c-secondary-600: #111C3C;
--c-secondary-700: #0C1531;
--c-secondary-800: #080F24;
--c-accent-50:  #E6F8F5;
--c-accent-100: #C7F0E9;
--c-accent-300: #5FD6C4;
--c-accent-400: #2FC2AE;
--c-accent-500: #12B39B;
--c-accent-600: #0E9280;
--c-accent-700: #0B7263;
--c-white:  #FFFFFF;
--c-n-25:   #FBFBFD;
--c-n-50:   #F6F7FB;
--c-n-100:  #EFF1F7;
--c-n-200:  #E3E7F0;
--c-n-300:  #CBD2E0;
--c-n-400:  #97A1B5;
--c-n-500:  #636C7F;
--c-n-600:  #5B6479;
--c-n-700:  #3F4759;
--c-n-800:  #262C3A;
--c-n-900:  #101828;
--c-success:      #0F6B4E;
--c-success-bg:   #E7F5EF;
--c-success-line: #B7E2CE;
--c-warning:      #8F4A05;
--c-warning-bg:   #FDF3E6;
--c-warning-line: #F3D9B0;
--c-error:        #C7362F;
--c-error-bg:     #FCECEB;
--c-error-line:   #F3C9C6;
--c-info:         #1D4FD8;
--c-info-bg:      #EAF1FE;
--c-info-line:    #C3D8FB;
--c-tone-indigo-bg:  #EEF0FE;--c-tone-indigo-fg:  #3B4FE0;
--c-tone-teal-bg:    #E6F8F5;--c-tone-teal-fg:    #0B7263;
--c-tone-amber-bg:   #FDF3E6;--c-tone-amber-fg:   #B25E09;
--c-tone-violet-bg:  #F3EEFE;--c-tone-violet-fg:  #6D3BE0;
--c-tone-rose-bg:    #FDECF1;--c-tone-rose-fg:    #C1336B;
--c-tone-sky-bg:     #E8F3FE;--c-tone-sky-fg:     #1F6FD0;
--c-tone-emerald-bg: #E7F5EF;--c-tone-emerald-fg: #12805C;
--color-bg:            var(--c-white);
--color-bg-subtle:     var(--c-n-50);
--color-surface:       var(--c-white);
--color-surface-muted: var(--c-n-50);
--color-surface-dark:  var(--c-secondary-700);
--color-border:        var(--c-n-200);
--color-border-strong: var(--c-n-300);
--color-text:          var(--c-n-900);
--color-text-muted:    var(--c-n-600);
--color-text-subtle:   var(--c-n-500);
--color-text-invert:   var(--c-white);
--color-primary:       var(--c-primary-600);
--color-primary-hover: var(--c-primary-700);
--color-primary-soft:  var(--c-primary-50);
--color-accent:        var(--c-accent-500);
--color-accent-soft:   var(--c-accent-50);
--color-focus:         var(--c-primary-500);
--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
--font-display: 'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--text-display: clamp(2.375rem, 1.5rem + 3.4vw, 3.875rem);
--text-h1:      clamp(2rem, 1.4rem + 2.4vw, 3rem);
--text-h2:      clamp(1.75rem, 1.3rem + 1.7vw, 2.625rem);
--text-h3:      clamp(1.25rem, 1.08rem + 0.7vw, 1.625rem);
--text-h4:      clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
--text-body:    clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
--text-lg:      clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
--text-sm:      0.9375rem;
--text-xs:      0.875rem;
--text-label:   0.8125rem;
--text-caption: 0.75rem;
--leading-tight: 1.15;
--leading-snug:  1.3;
--leading-normal: 1.5;
--leading-relaxed: 1.65;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-caps: 0.08em;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
--space-1:  0.25rem;
--space-2:  0.5rem;
--space-3:  0.75rem;
--space-4:  1rem;
--space-5:  1.25rem;
--space-6:  1.5rem;
--space-7:  1.75rem;
--space-8:  2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--section-y: clamp(3.5rem, 6vw, 6.5rem);
--section-y-tight: clamp(2.5rem, 4vw, 4rem);
--radius-xs:   6px;
--radius-sm:   10px;
--radius-md:   14px;
--radius-lg:   18px;
--radius-xl:   24px;
--radius-2xl:  32px;
--radius-pill: 999px;
--shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
--shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
--shadow-md: 0 6px 16px -4px rgba(16, 24, 40, 0.10), 0 2px 6px -2px rgba(16, 24, 40, 0.05);
--shadow-lg: 0 16px 32px -12px rgba(16, 24, 40, 0.16), 0 4px 10px -4px rgba(16, 24, 40, 0.05);
--shadow-xl: 0 28px 56px -16px rgba(16, 24, 40, 0.20), 0 8px 20px -8px rgba(16, 24, 40, 0.08);
--shadow-focus: 0 0 0 4px rgba(74, 92, 234, 0.18);
--shadow-focus-error: 0 0 0 4px rgba(199, 54, 47, 0.16);
--container-max: 1284px;
--container-narrow: 800px;
--container-pad: clamp(1.25rem, 4vw, 2rem);
--header-h: clamp(72px, 7vw, 132px);
--header-max: 1872px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--t-fast: 120ms;
--t-base: 200ms;
--t-slow: 320ms;
--z-header: 100;
--z-dropdown: 200;
--z-overlay: 300;
--z-modal: 400;
--z-toast: 500;
}
*,
*::before,
*::after{
box-sizing: border-box;
}
html{
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + 16px);
}
body{
margin: 0;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-body);
line-height: var(--leading-relaxed);
font-weight: var(--weight-regular);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
font-family: var(--font-display);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--color-text);
text-wrap: balance;
}
h1{font-size: var(--text-h1);}
h2{font-size: var(--text-h2);}
h3{font-size: var(--text-h3);}
h4{font-size: var(--text-h4);}
p{
margin: 0 0 var(--space-4);
}
p:last-child{
margin-bottom: 0;
}
a{
color: var(--color-primary);
text-decoration: none;
transition: color var(--t-fast) var(--ease-out);
}
a:hover{
color: var(--color-primary-hover);
}
strong, b{
font-weight: var(--weight-semibold);
}
small{
font-size: var(--text-xs);
}
ul, ol{
margin: 0;
padding: 0;
list-style: none;
}
img, svg, video, canvas{
display: block;
max-width: 100%;
}
img{
height: auto;
}
button, input, select, textarea{
font: inherit;
color: inherit;
}
button{
cursor: pointer;
background: none;
border: 0;
padding: 0;
}
table{
border-collapse: collapse;
width: 100%;
}
hr{
border: 0;
border-top: 1px solid var(--color-border);
margin: var(--space-8) 0;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button{
-webkit-appearance: none;
}
:focus-visible{
outline: 2px solid var(--color-focus);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
::selection{
background: var(--c-primary-100);
color: var(--c-primary-900);
}
.visually-hidden{
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link{
position: absolute;
top: -100px;
left: var(--space-4);
z-index: var(--z-toast);
padding: var(--space-3) var(--space-5);
background: var(--color-surface);
color: var(--color-primary);
font-weight: var(--weight-semibold);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
transition: top var(--t-base) var(--ease-out);
}
.skip-link:focus{
top: var(--space-4);
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior: auto;}
*, *::before, *::after{
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.container{
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.container--narrow{
max-width: var(--container-narrow);
}
.main{
display: block;
min-height: 40vh;
}
.section{
padding-block: var(--section-y);
}
.section--tight{
padding-block: var(--section-y-tight);
}
.section--subtle{
background: var(--color-bg-subtle);
}
.section__cta-row{
margin-top: var(--space-10);
text-align: center;
}
.section__note{
display: flex;
gap: var(--space-2);
align-items: flex-start;
justify-content: center;
max-width: 640px;
margin: var(--space-8) auto 0;
color: var(--color-text-muted);
font-size: var(--text-xs);
text-align: left;
}
.section__note svg{
flex: 0 0 auto;
margin-top: 2px;
}
.grid{
display: grid;
gap: var(--space-5);
}
.grid--2{grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid--3{grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid--4{grid-template-columns: repeat(4, minmax(0, 1fr));}
.grid--subjects{
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--space-4);
align-items: stretch;
}
@media (max-width: 900px){
.grid--subjects{grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));}
}
@media (max-width: 640px){
.grid--subjects{grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));}
}
.grid--courses{
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.grid--academies{
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.grid--why{
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.grid--testimonials{
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
@media (max-width: 900px){
.grid--3{grid-template-columns: repeat(2, minmax(0, 1fr));}
.grid--4{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 600px){
.grid--2,
.grid--3,
.grid--4{grid-template-columns: minmax(0, 1fr);}
}
.text-muted{color: var(--color-text-muted);}
.text-center{text-align: center;}
.mt-4{margin-top: var(--space-4);}
.mt-6{margin-top: var(--space-6);}
.mt-8{margin-top: var(--space-8);}
.hidden{display: none !important;}
[hidden]{
display: none !important;
}
.icon{
flex: 0 0 auto;
}
.btn{
--btn-bg: var(--color-primary);
--btn-fg: var(--c-white);
--btn-border: transparent;
--btn-shadow: var(--shadow-xs);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.75rem 1.25rem;
min-height: 44px;
border: 1px solid var(--btn-border);
border-radius: var(--radius-sm);
background: var(--btn-bg);
color: var(--btn-fg);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
line-height: 1.2;
letter-spacing: 0.005em;
text-align: center;
white-space: nowrap;
box-shadow: var(--btn-shadow);
transition: background-color var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out),
box-shadow var(--t-base) var(--ease-out),
transform var(--t-fast) var(--ease-out);
}
.btn:hover{
color: var(--btn-fg);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.btn:active{
transform: translateY(0);
box-shadow: var(--shadow-xs);
}
.btn:disabled,
.btn[aria-disabled='true'],
.btn.is-loading{
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn--primary{
--btn-bg: var(--color-primary);
--btn-fg: var(--c-white);
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
}
.btn--primary:hover{--btn-bg: var(--color-primary-hover);}
.btn--accent{
--btn-bg: var(--color-accent);
--btn-fg: #04302A;
}
.btn--accent:hover{--btn-bg: var(--c-accent-600);--btn-fg: var(--c-white);}
.btn--outline{
--btn-bg: var(--color-surface);
--btn-fg: var(--color-text);
--btn-border: var(--color-border-strong);
--btn-shadow: none;
}
.btn--outline:hover{
--btn-bg: var(--c-n-50);
--btn-border: var(--c-primary-300);
--btn-fg: var(--color-primary-hover);
}
.btn--ghost{
--btn-bg: transparent;
--btn-fg: var(--color-text);
--btn-shadow: none;
}
.btn--ghost:hover{
--btn-bg: var(--c-n-100);
--btn-fg: var(--color-text);
}
.btn--soft{
--btn-bg: var(--color-primary-soft);
--btn-fg: var(--color-primary-hover);
--btn-shadow: none;
}
.btn--soft:hover{--btn-bg: var(--c-primary-100);}
.btn--danger{
--btn-bg: var(--c-error);
--btn-fg: var(--c-white);
}
.btn--success{
--btn-bg: var(--c-success);
--btn-fg: var(--c-white);
}
.btn--on-dark{
--btn-bg: transparent;
--btn-fg: rgba(255, 255, 255, 0.92);
--btn-border: rgba(255, 255, 255, 0.32);
--btn-shadow: none;
}
.btn--on-dark:hover{
--btn-bg: rgba(255, 255, 255, 0.12);
--btn-fg: var(--c-white);
--btn-border: rgba(255, 255, 255, 0.5);
}
.btn--sm{
padding: 0.5rem 0.875rem;
min-height: 38px;
font-size: var(--text-label);
}
.btn--lg{
padding: 0.9375rem 1.625rem;
min-height: 52px;
font-size: var(--text-sm);
border-radius: var(--radius-md);
}
.btn--block{
display: flex;
width: 100%;
}
.btn--icon-only{
padding: 0.625rem;
min-height: 40px;
width: 40px;
}
.icon-btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
border: 1px solid transparent;
transition: background-color var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out);
}
.icon-btn:hover{
background: var(--c-n-100);
color: var(--color-text);
}
.icon-btn[aria-expanded='true']{
background: var(--color-primary-soft);
color: var(--color-primary-hover);
}
.heart-btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-pill);
color: var(--c-n-400);
border: 1px solid var(--color-border);
background: var(--color-surface);
transition: color var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
background-color var(--t-fast) var(--ease-out);
}
.heart-btn:hover{
color: var(--c-tone-rose-fg);
border-color: var(--c-tone-rose-fg);
background: var(--c-tone-rose-bg);
}
.heart-btn.is-active{
color: var(--c-tone-rose-fg);
background: var(--c-tone-rose-bg);
border-color: var(--c-tone-rose-fg);
}
.heart-btn.is-active svg{
fill: currentColor;
}
.field{
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.field__label{
font-size: var(--text-label);
font-weight: var(--weight-semibold);
color: var(--color-text);
letter-spacing: var(--tracking-wide);
}
.field__label .required{
color: var(--c-error);
}
.field__hint{
font-size: var(--text-caption);
color: var(--color-text-subtle);
}
.field__error{
display: flex;
gap: var(--space-2);
align-items: center;
font-size: var(--text-caption);
color: var(--c-error);
}
.input,
.select,
.textarea{
width: 100%;
padding: 0.6875rem 0.875rem;
min-height: 46px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--text-sm);
line-height: 1.4;
transition: border-color var(--t-fast) var(--ease-out),
box-shadow var(--t-fast) var(--ease-out),
background-color var(--t-fast) var(--ease-out);
}
.input::placeholder,
.textarea::placeholder{
color: var(--c-n-400);
}
.input:hover,
.select:hover,
.textarea:hover{
border-color: var(--c-n-400);
}
.input:focus,
.select:focus,
.textarea:focus{
outline: none;
border-color: var(--color-primary);
box-shadow: var(--shadow-focus);
}
.input[aria-invalid='true'],
.textarea[aria-invalid='true']{
border-color: var(--c-error);
}
.input[aria-invalid='true']:focus,
.textarea[aria-invalid='true']:focus{
box-shadow: var(--shadow-focus-error);
}
.input:disabled,
.select:disabled,
.textarea:disabled{
background: var(--c-n-50);
color: var(--color-text-subtle);
cursor: not-allowed;
}
.textarea{
min-height: 120px;
resize: vertical;
}
.select{
appearance: none;
padding-right: 2.5rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.875rem center;
}
.input-group{
display: flex;
gap: var(--space-2);
align-items: stretch;
}
.input-group .input{
flex: 1 1 auto;
}
.checkbox,
.radio{
display: flex;
gap: var(--space-3);
align-items: flex-start;
font-size: var(--text-xs);
color: var(--color-text-muted);
cursor: pointer;
}
.checkbox input,
.radio input{
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 1px 0 0;
accent-color: var(--color-primary);
}
.checkbox span,
.radio span{
line-height: 1.45;
}
.checkbox--card{
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.checkbox--card:hover{
border-color: var(--c-primary-300);
background: var(--c-primary-50);
}
.switch{
display: inline-flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
}
.switch input{
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.switch__track{
position: relative;
width: 44px;
height: 26px;
border-radius: var(--radius-pill);
background: var(--c-n-300);
transition: background-color var(--t-base) var(--ease-out);
}
.switch__track::after{
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--c-white);
box-shadow: var(--shadow-sm);
transition: transform var(--t-base) var(--ease-out);
}
.switch input:checked + .switch__track{
background: var(--color-primary);
}
.switch input:checked + .switch__track::after{
transform: translateX(18px);
}
.switch input:focus-visible + .switch__track{
box-shadow: var(--shadow-focus);
}
.switch__label{
font-size: var(--text-xs);
color: var(--color-text);
}
.badge{
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.25rem 0.625rem;
border-radius: var(--radius-pill);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
line-height: 1.5;
letter-spacing: 0.01em;
background: var(--c-n-100);
color: var(--c-n-700);
white-space: nowrap;
}
.badge--sm{font-size: 0.6875rem;padding: 0.1875rem 0.5rem;}
.badge--primary{background: var(--color-primary-soft);color: var(--color-primary-hover);}
.badge--accent{background: var(--color-accent-soft);color: var(--c-accent-700);}
.badge--success{background: var(--c-success-bg);color: var(--c-success);}
.badge--warning{background: var(--c-warning-bg);color: var(--c-warning);}
.badge--error{background: var(--c-error-bg);color: var(--c-error);}
.badge--info{background: var(--c-info-bg);color: var(--c-info);}
.badge--outline{
background: transparent;
border: 1px solid var(--color-border-strong);
color: var(--color-text-muted);
}
.chips{
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.chip{
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.25rem 0.625rem;
border-radius: var(--radius-xs);
background: var(--c-n-100);
color: var(--c-n-700);
font-size: var(--text-label);
font-weight: var(--weight-medium);
line-height: 1.6;
white-space: nowrap;
}
.chip svg{color: var(--color-text-subtle);}
.chip--subject{background: var(--c-primary-50);color: var(--c-primary-800);}
.chip--subject svg{color: var(--c-primary-600);}
.chip__img{
flex: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--color-bg-subtle);
object-fit: cover;
}
.chip--muted{background: var(--c-n-100);color: var(--color-text-subtle);}
.alert{
display: flex;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border: 1px solid var(--c-info-line);
border-radius: var(--radius-md);
background: var(--c-info-bg);
color: var(--c-n-800);
font-size: var(--text-xs);
}
.alert__icon{color: var(--c-info);display: flex;}
.alert__title{font-weight: var(--weight-semibold);margin-bottom: var(--space-1);}
.alert__text{color: var(--color-text-muted);}
.alert--success{border-color: var(--c-success-line);background: var(--c-success-bg);}
.alert--success .alert__icon{color: var(--c-success);}
.alert--warning{border-color: var(--c-warning-line);background: var(--c-warning-bg);}
.alert--warning .alert__icon{color: var(--c-warning);}
.alert--error{border-color: var(--c-error-line);background: var(--c-error-bg);}
.alert--error .alert__icon{color: var(--c-error);}
.avatar{
--avatar-size: 56px;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--avatar-size);
height: var(--avatar-size);
border-radius: var(--radius-lg);
background: linear-gradient(150deg, var(--c-primary-100), var(--c-accent-100));
color: var(--c-primary-800);
font-family: var(--font-display);
font-size: calc(var(--avatar-size) * 0.34);
font-weight: var(--weight-bold);
letter-spacing: 0.01em;
overflow: hidden;
user-select: none;
}
.avatar__img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
}
.avatar--lg{border-radius: var(--radius-xl);}
.avatar__badge{
position: absolute;
right: -4px;
bottom: -4px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: var(--radius-pill);
background: var(--color-accent);
color: #04302A;
border: 2px solid var(--color-surface);
}
.avatar--lg .avatar__badge{
width: 26px;
height: 26px;
}
.rating{
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.rating__stars{
display: inline-flex;
gap: 1px;
color: var(--c-n-300);
}
.rating__star.is-on{color: #F5A524;}
.rating__star.is-half{color: #F5A524;opacity: 0.55;}
.rating__value{
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.rating__count{color: var(--color-text-subtle);}
.rating--compact{gap: var(--space-1);}
.rating--compact .rating__count{font-size: var(--text-caption);}
.card{
display: flex;
flex-direction: column;
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
}
.card__title{
font-size: var(--text-h4);
margin-bottom: var(--space-2);
}
.card__text{
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.scard{
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
overflow: hidden;
transition: transform var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out);
}
.scard:hover,
.scard:focus-within{
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--c-primary-200);
}
.scard__media{
position: relative;
display: block;
aspect-ratio: 16 / 9;
min-height: 150px;
max-height: 180px;
background: var(--c-n-100);
overflow: hidden;
}
.scard__img{
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-slow) var(--ease-out);
}
.scard:hover .scard__img{transform: scale(1.045);}
.scard__media::after{
content: '';
position: absolute;
inset: auto 0 0 0;
height: 46%;
background: linear-gradient(to top, rgba(16, 18, 42, 0.26), rgba(16, 18, 42, 0));
pointer-events: none;
}
.scard__badge{
position: absolute;
z-index: 1;
left: var(--space-3);
bottom: var(--space-3);
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.92);
color: var(--c-primary-700);
box-shadow: 0 2px 8px rgba(16, 18, 42, 0.18);
}
.scard__badge--teal{color: var(--c-tone-teal-fg);}
.scard__badge--amber{color: var(--c-tone-amber-fg);}
.scard__badge--violet{color: var(--c-tone-violet-fg);}
.scard__badge--rose{color: var(--c-tone-rose-fg);}
.scard__badge--sky{color: var(--c-tone-sky-fg);}
.scard__badge--emerald{color: var(--c-tone-emerald-fg);}
.scard--plain .scard__media{
background: linear-gradient(150deg, var(--c-primary-100), var(--c-accent-100));
}
.scard__body{
display: flex;
flex-direction: column;
gap: var(--space-2);
flex: 1 1 auto;
padding: var(--space-5);
}
.scard__title{
font-size: var(--text-h4);
line-height: var(--leading-snug);
}
.scard__title a{color: var(--color-text);}
.scard__title a:hover{color: var(--color-primary);}
.scard__level{
margin: 0;
color: var(--color-primary);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.scard__counts{
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin: 0;
padding-top: var(--space-3);
border-top: 1px dashed var(--color-border);
}
.scard__count{
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-muted);
font-size: var(--text-label);
font-weight: var(--weight-medium);
}
.scard__count svg{color: var(--c-n-400);}
.scard__count--muted{color: var(--c-n-400);font-style: italic;}
.scard__actions{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: auto;
padding-top: var(--space-4);
}
.scard__more{
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-muted);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.scard__more:hover{color: var(--color-primary);}
.scard__more svg{transition: transform var(--t-fast) var(--ease-out);}
.scard:hover .scard__more svg,
.scard__more:hover svg{transform: translateX(3px);}
@media (max-width: 520px){
.scard__body{padding: var(--space-4);}
.scard__actions{flex-wrap: wrap;}
}
.tcard{
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
overflow: hidden;
transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.tcard:hover{transform: translateY(-4px);box-shadow: var(--shadow-lg);}
.tcard__media{
position: relative;
display: block;
aspect-ratio: 5 / 6;
background: linear-gradient(150deg, var(--c-primary-100), var(--c-accent-100));
overflow: hidden;
}
.tcard__img{width: 100%;height: 100%;object-fit: cover;object-position: center 16%;transition: transform var(--t-slow) var(--ease-out);}
.tcard:hover .tcard__img{transform: scale(1.03);}
.tcard__media--placeholder{display: flex;align-items: center;justify-content: center;}
.tcard__initials{
font-family: var(--font-display);
font-size: 3rem;
font-weight: var(--weight-extrabold);
color: var(--c-primary-800);
}
.tcard__slot{
position: absolute;
left: var(--space-3);
bottom: var(--space-3);
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.94);
color: var(--c-success);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
box-shadow: var(--shadow-sm);
}
.tcard__body{display: flex;flex-direction: column;gap: var(--space-2);flex: 1 1 auto;padding: var(--space-5);}
.tcard__name{
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font-family: var(--font-display);
font-size: var(--text-h4);
font-weight: var(--weight-bold);
line-height: var(--leading-snug);
}
.tcard__name a{color: var(--color-text);}
.tcard__name a:hover{color: var(--color-primary);}
.tcard__verified{color: var(--color-accent);}
.tcard__subject{margin: 0;color: var(--color-text-muted);font-size: var(--text-xs);}
.tcard__row{display: flex;align-items: center;justify-content: space-between;gap: var(--space-2);}
.tcard__price{margin: 0;color: var(--color-text-subtle);font-size: var(--text-label);white-space: nowrap;}
.tcard__price strong{font-family: var(--font-display);font-size: var(--text-h4);color: var(--color-text);}
.tcard__actions{display: flex;flex-direction: column;gap: var(--space-2);margin-top: auto;padding-top: var(--space-3);}
.tcard__slots-link{
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
color: var(--color-primary);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.teacher-card__photo{
position: relative;
display: block;
width: 176px;
height: 220px;
border-radius: var(--radius-lg);
overflow: hidden;
background: linear-gradient(150deg, var(--c-primary-100), var(--c-accent-100));
flex: 0 0 auto;
}
.teacher-card__img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
}
.teacher-card__photo--placeholder{
display: flex;
align-items: center;
justify-content: center;
}
.teacher-card__initials{
font-family: var(--font-display);
font-size: 2.75rem;
font-weight: var(--weight-extrabold);
color: var(--c-primary-800);
letter-spacing: 0.02em;
}
.teacher-card__photo-badge{
position: absolute;
right: 8px;
bottom: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: var(--radius-pill);
background: var(--color-accent);
color: #04302A;
box-shadow: var(--shadow-sm);
}
.teacher-card__rating-row{
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.teacher-card__verified{
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--c-accent-700);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.teacher-card__no-reviews{
color: var(--color-text-subtle);
font-size: var(--text-label);
}
.teacher-card__meta-line{
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.teacher-card__meta-line svg{color: var(--c-n-400);}
.teacher-card__badges{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.teacher-card__lessons{
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-muted);
font-size: var(--text-label);
}
.teacher-card__lessons svg{color: var(--c-accent-500);}
.teacher-card__no-slots{
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0;
color: var(--color-text-subtle);
font-size: var(--text-label);
}
.teacher-list{
display: flex;
flex-direction: column;
gap: var(--space-5);
}
.teacher-card{
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) 252px;
grid-template-areas:
"media ident aside"
"media body  aside";
column-gap: var(--space-6);
row-gap: var(--space-3);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
transition: box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.teacher-card__media{grid-area: media;}
.teacher-card__ident{grid-area: ident;min-width: 0;}
.teacher-card__body{grid-area: body;}
.teacher-card__aside{grid-area: aside;}
.teacher-card:hover{
box-shadow: var(--shadow-md);
border-color: var(--c-n-300);
}
.teacher-card__media{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.teacher-card__featured{align-self: flex-start;}
.teacher-card__body{
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
}
.teacher-card__head{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.teacher-card__name{
font-size: var(--text-h3);
line-height: var(--leading-snug);
}
.teacher-card__name a{color: var(--color-text);}
.teacher-card__name a:hover{color: var(--color-primary);}
.teacher-card__verified{
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--c-accent-700);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.teacher-card__headline{
color: var(--color-text-muted);
font-size: var(--text-xs);
line-height: var(--leading-normal);
}
.teacher-card__meta{
display: flex;
flex-wrap: wrap;
gap: var(--space-4) var(--space-6);
margin: 0;
padding-top: var(--space-1);
}
.meta-item{display: flex;flex-direction: column;gap: 2px;}
.meta-item dt{
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-subtle);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.meta-item dt svg{color: var(--c-n-400);}
.meta-item dd{
margin: 0;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-text);
}
.teacher-card__slots{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-2);
border-top: 1px dashed var(--color-border);
}
.teacher-card__slots-label{
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-subtle);
font-size: var(--text-label);
font-weight: var(--weight-medium);
}
.slot-list{
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.teacher-card__aside{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-left: var(--space-6);
border-left: 1px solid var(--color-border);
}
.teacher-card__price{
display: flex;
align-items: baseline;
gap: var(--space-2);
flex-wrap: wrap;
}
.teacher-card__price-label{color: var(--color-text-subtle);font-size: var(--text-label);}
.teacher-card__price-value{
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--weight-extrabold);
color: var(--color-text);
letter-spacing: var(--tracking-tight);
}
.teacher-card__price-unit{color: var(--color-text-subtle);font-size: var(--text-label);}
.teacher-card__response{
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--c-success);
font-size: var(--text-label);
font-weight: var(--weight-medium);
}
.teacher-card__actions{
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: auto;
}
.slot{
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 1px;
padding: 0.375rem 0.75rem;
border: 1px solid var(--c-primary-200);
border-radius: var(--radius-sm);
background: var(--c-primary-50);
color: var(--c-primary-800);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
line-height: 1.25;
transition: background-color var(--t-fast) var(--ease-out),
border-color var(--t-fast) var(--ease-out),
transform var(--t-fast) var(--ease-out);
}
.slot:hover{
background: var(--c-primary-100);
border-color: var(--c-primary-400);
color: var(--c-primary-900);
transform: translateY(-1px);
}
.slot__day{
font-size: 0.6875rem;
font-weight: var(--weight-medium);
color: var(--c-primary-600);
text-transform: lowercase;
}
.slot__time{font-variant-numeric: tabular-nums;}
.slot--compact{padding: 0.3125rem 0.625rem;}
.course-card{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.course-card:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.course-card__cover{
display: block;
margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-2);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
overflow: hidden;
background: var(--c-n-100);
}
.course-card__cover img{width: 100%;height: auto;aspect-ratio: 16 / 9;object-fit: cover;}
.academy-card__cover{
display: block;
margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-3);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
overflow: hidden;
background: var(--c-n-100);
}
.academy-card__cover img{width: 100%;height: auto;aspect-ratio: 16 / 9;object-fit: cover;}
.course-card__head{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.course-card__subject{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.25rem 0.625rem;
border-radius: var(--radius-xs);
background: var(--c-tone-indigo-bg);
color: var(--c-tone-indigo-fg);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
.course-card__subject--teal{background: var(--c-tone-teal-bg);color: var(--c-tone-teal-fg);}
.course-card__subject--amber{background: var(--c-tone-amber-bg);color: var(--c-tone-amber-fg);}
.course-card__subject--violet{background: var(--c-tone-violet-bg);color: var(--c-tone-violet-fg);}
.course-card__subject--rose{background: var(--c-tone-rose-bg);color: var(--c-tone-rose-fg);}
.course-card__subject--sky{background: var(--c-tone-sky-bg);color: var(--c-tone-sky-fg);}
.course-card__subject--emerald{background: var(--c-tone-emerald-bg);color: var(--c-tone-emerald-fg);}
.course-card__title{
font-size: var(--text-h4);
line-height: var(--leading-snug);
}
.course-card__title a{color: var(--color-text);}
.course-card__title a:hover{color: var(--color-primary);}
.course-card__subtitle{
color: var(--color-text-muted);
font-size: var(--text-xs);
margin: 0;
}
.course-card__teacher{
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.course-card__facts{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2) var(--space-4);
margin: 0;
padding: var(--space-3) 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.course-card__facts div{display: flex;flex-direction: column;gap: 1px;}
.course-card__facts dt{
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.course-card__facts dd{
margin: 0;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.course-card__foot{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: auto;
}
.course-card__price{
font-family: var(--font-display);
font-size: var(--text-h4);
font-weight: var(--weight-extrabold);
margin: 0;
}
.academy-card{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: linear-gradient(180deg, var(--c-n-25), var(--color-surface) 55%);
box-shadow: var(--shadow-xs);
transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.academy-card:hover{transform: translateY(-3px);box-shadow: var(--shadow-md);}
.academy-card__head{
display: flex;
align-items: center;
justify-content: space-between;
}
.academy-card__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--c-tone-indigo-bg);
color: var(--c-tone-indigo-fg);
}
.academy-card--teal .academy-card__icon{background: var(--c-tone-teal-bg);color: var(--c-tone-teal-fg);}
.academy-card--amber .academy-card__icon{background: var(--c-tone-amber-bg);color: var(--c-tone-amber-fg);}
.academy-card--violet .academy-card__icon{background: var(--c-tone-violet-bg);color: var(--c-tone-violet-fg);}
.academy-card--sky .academy-card__icon{background: var(--c-tone-sky-bg);color: var(--c-tone-sky-fg);}
.academy-card__count{
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.academy-card__title{
font-size: var(--text-h3);
line-height: var(--leading-snug);
}
.academy-card__title a{color: var(--color-text);}
.academy-card__title a:hover{color: var(--color-primary);}
.academy-card__tagline{
color: var(--color-text-muted);
font-size: var(--text-xs);
margin: 0;
}
.academy-card__courses{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3) 0;
border-top: 1px solid var(--color-border);
}
.academy-card__courses li{
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.academy-card__courses svg{color: var(--c-accent-500);margin-top: 3px;}
.academy-card__link{
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: auto;
padding-top: var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.stat-card{
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
}
.stat-card__top{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-2);
}
.stat-card__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
}
.stat-card__trend{
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
color: var(--c-success);
}
.stat-card__value{
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--weight-extrabold);
line-height: 1.1;
margin: 0;
font-variant-numeric: tabular-nums;
}
.stat-card__label{
margin: 0;
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.stat-card__hint{
margin: var(--space-1) 0 0;
font-size: var(--text-caption);
color: var(--color-text-subtle);
}
.faq-list{
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.faq-item{
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.faq-item[open]{
border-color: var(--c-primary-200);
box-shadow: var(--shadow-sm);
}
.faq-item__question{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
}
.faq-item__question::-webkit-details-marker{display: none;}
.faq-item__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: 0 0 auto;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
transition: transform var(--t-base) var(--ease-out);
}
.faq-item[open] .faq-item__icon{transform: rotate(45deg);}
.faq-item__answer{
padding: 0 var(--space-5) var(--space-5);
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.testimonial{
display: flex;
flex-direction: column;
gap: var(--space-4);
margin: 0;
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
}
.testimonial__text{
position: relative;
margin: 0;
padding-top: var(--space-2);
}
.testimonial__text p{
color: var(--color-text);
font-size: var(--text-xs);
line-height: var(--leading-relaxed);
}
.testimonial__quote{
color: var(--c-primary-200);
margin-bottom: var(--space-2);
}
.testimonial__author{
display: flex;
align-items: center;
gap: var(--space-3);
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.testimonial__author-text{display: flex;flex-direction: column;}
.testimonial__author-text strong{font-size: var(--text-xs);}
.testimonial__author-text small{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dropdown{position: relative;}
.dropdown__menu{
position: absolute;
top: calc(100% + var(--space-2));
right: 0;
z-index: var(--z-dropdown);
min-width: 264px;
padding: var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
animation: dropdown-in var(--t-base) var(--ease-out);
}
@keyframes dropdown-in{
from{opacity: 0;transform: translateY(-6px);}
to{opacity: 1;transform: translateY(0);}
}
.dropdown__item{
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-sm);
color: var(--color-text);
transition: background-color var(--t-fast) var(--ease-out);
}
.dropdown__item:hover{background: var(--c-n-50);color: var(--color-text);}
.dropdown__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: 0 0 auto;
border-radius: var(--radius-sm);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
}
.dropdown__text{display: flex;flex-direction: column;gap: 1px;}
.dropdown__text strong{font-size: var(--text-xs);font-weight: var(--weight-semibold);}
.dropdown__text small{color: var(--color-text-subtle);font-size: var(--text-caption);}
.tooltip{
position: relative;
display: inline-flex;
}
.tooltip__bubble{
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) translateY(4px);
z-index: var(--z-dropdown);
padding: 0.375rem 0.625rem;
border-radius: var(--radius-xs);
background: var(--c-n-900);
color: var(--c-white);
font-size: var(--text-caption);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.tooltip:hover .tooltip__bubble,
.tooltip:focus-within .tooltip__bubble{
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.table-wrap{
overflow-x: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.table{
min-width: 640px;
font-size: var(--text-xs);
}
.table th,
.table td{
padding: var(--space-3) var(--space-4);
text-align: left;
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
.table thead th{
background: var(--c-n-50);
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
white-space: nowrap;
}
.table tbody tr:last-child td{border-bottom: 0;}
.table tbody tr:hover{background: var(--c-n-25);}
.table td.is-numeric{text-align: right;font-variant-numeric: tabular-nums;}
#results{scroll-margin-top: 0;}
.pagination{
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
margin-top: var(--space-8);
}
.pagination__link{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
transition: all var(--t-fast) var(--ease-out);
}
.pagination__link:hover{
border-color: var(--c-primary-300);
color: var(--color-primary-hover);
background: var(--c-primary-50);
}
.pagination__link.is-active{
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--c-white);
}
.pagination__link[aria-disabled='true']{
opacity: 0.45;
pointer-events: none;
}
.tabs__list{
display: flex;
gap: var(--space-1);
padding: var(--space-1);
border-radius: var(--radius-md);
background: var(--c-n-100);
overflow-x: auto;
}
.tabs__tab{
padding: 0.5rem 1rem;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
white-space: nowrap;
transition: all var(--t-fast) var(--ease-out);
}
.tabs__tab:hover{color: var(--color-text);}
.tabs__tab[aria-selected='true']{
background: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-xs);
}
.tabs__panel{padding-top: var(--space-5);}
.cta-pulse{
animation: cta-pulse 2.6s var(--ease-in-out) infinite;
}
@keyframes cta-pulse{
0%, 100%{box-shadow: var(--shadow-sm), 0 0 0 0 var(--c-primary-200);}
60%{box-shadow: var(--shadow-sm), 0 0 0 10px transparent;}
}
@media (prefers-reduced-motion: reduce){
.cta-pulse{animation: none;}
}
.modal{
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 0;
background: rgba(16, 24, 40, 0.45);
backdrop-filter: blur(2px);
animation: fade-in var(--t-base) var(--ease-out);
}
.modal__dialog{
width: 100%;
max-width: 520px;
max-height: 92vh;
overflow-y: auto;
padding: var(--space-6);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
background: var(--color-surface);
box-shadow: var(--shadow-xl);
animation: modal-up var(--t-slow) var(--ease-out);
}
.modal__head{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-5);
}
.modal__title{font-size: var(--text-h3);}
.modal__body{color: var(--color-text-muted);font-size: var(--text-xs);}
.modal__foot{
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-6);
}
@keyframes fade-in{from{opacity: 0;}to{opacity: 1;}}
@keyframes modal-up{from{transform: translateY(24px);}to{transform: translateY(0);}}
@media (min-width: 640px){
.modal{align-items: center;padding: var(--space-6);}
.modal__dialog{border-radius: var(--radius-xl);}
.modal__foot{flex-direction: row;justify-content: flex-end;}
}
.modal--confirm{
align-items: center;
padding: var(--space-4);
z-index: var(--z-modal);
}
.modal--confirm .modal__dialog{
max-width: 460px;
max-height: 88vh;
border-radius: var(--radius-xl);
padding: var(--space-5);
animation: confirm-in var(--t-base) var(--ease-out);
}
.modal--confirm .modal__head{margin-bottom: var(--space-3);}
.modal--confirm .modal__body p{margin: 0;color: var(--color-text);font-size: var(--text-sm);line-height: 1.6;}
.modal--confirm .modal__foot{margin-top: var(--space-5);}
.modal--confirm [data-confirm-ok].btn--primary{
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--c-white);
}
.modal--confirm [data-confirm-ok].btn--primary:hover{
background: var(--color-primary-hover);
border-color: var(--color-primary-hover);
color: var(--c-white);
}
.modal--confirm [data-confirm-ok].btn--danger{
background: var(--c-error);
border-color: var(--c-error);
color: var(--c-white);
}
.modal--confirm [data-confirm-ok].btn--danger:hover{
background: var(--c-error);
border-color: var(--c-error);
color: var(--c-white);
box-shadow: var(--shadow-sm);
}
.modal--preview{
align-items: center;
padding: var(--space-4);
}
.modal--preview .modal__dialog{
display: flex;
flex-direction: column;
width: 100%;
max-width: 1120px;
max-height: 92vh;
padding: var(--space-4);
border-radius: var(--radius-xl);
animation: confirm-in var(--t-base) var(--ease-out);
}
.modal--preview .modal__head{
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.spreview__titles{flex: 1 1 auto;min-width: 0;}
.spreview__titles .modal__title{margin: 0;font-size: var(--text-h4);}
.spreview__note{margin: 2px 0 0;color: var(--color-text-subtle);font-size: var(--text-caption);}
.spreview__external{flex: none;display: inline-flex;align-items: center;gap: 6px;}
.modal__body--preview{flex: 1 1 auto;min-height: 0;padding: 0;}
.spreview__frame{
display: block;
width: 100%;
height: min(76vh, 860px);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
@media (max-width: 700px){
.modal--preview{padding: var(--space-2);}
.modal--preview .modal__dialog{max-height: 94vh;padding: var(--space-3);}
.spreview__frame{height: min(70vh, 620px);}
.spreview__note{display: none;}
}
@media (prefers-reduced-motion: reduce){
.modal--preview .modal__dialog{animation: none;}
}
@keyframes confirm-in{
from{opacity: 0;transform: translateY(8px) scale(0.98);}
to{opacity: 1;transform: translateY(0) scale(1);}
}
@media (prefers-reduced-motion: reduce){
.modal--confirm .modal__dialog{animation: none;}
}
.skeleton{
position: relative;
overflow: hidden;
border-radius: var(--radius-sm);
background: var(--c-n-100);
}
.skeleton::after{
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
animation: skeleton-sweep 1.4s infinite;
}
.skeleton--text{height: 12px;margin-bottom: var(--space-2);}
.skeleton--title{height: 20px;width: 60%;margin-bottom: var(--space-3);}
.skeleton--avatar{width: 56px;height: 56px;border-radius: var(--radius-md);}
.skeleton--block{height: 96px;}
@keyframes skeleton-sweep{
100%{transform: translateX(100%);}
}
.empty-state{
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: var(--space-12) var(--space-6);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
text-align: center;
}
.empty-state__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-primary);
box-shadow: var(--shadow-xs);
}
.empty-state__title{font-size: var(--text-h4);}
.empty-state__text{
max-width: 460px;
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.toast-stack{
position: fixed;
right: var(--space-4);
bottom: var(--space-4);
z-index: var(--z-toast);
display: flex;
flex-direction: column;
gap: var(--space-2);
max-width: min(360px, calc(100vw - 2rem));
}
.toast{
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
font-size: var(--text-xs);
animation: toast-in var(--t-slow) var(--ease-out);
}
.toast--success{border-left-color: var(--c-success);}
.toast--info{border-left-color: var(--c-info);}
.toast--warning{border-left-color: var(--c-warning);}
.toast__icon{color: var(--color-primary);display: flex;}
.toast--success .toast__icon{color: var(--c-success);}
.toast--warning .toast__icon{color: var(--c-warning);}
.toast__body{flex: 1 1 auto;}
.toast__title{font-weight: var(--weight-semibold);margin-bottom: 2px;}
.toast__text{color: var(--color-text-muted);}
.toast__close{color: var(--color-text-subtle);}
@keyframes toast-in{
from{opacity: 0;transform: translateY(12px);}
to{opacity: 1;transform: translateY(0);}
}
.progress{
height: 8px;
border-radius: var(--radius-pill);
background: var(--c-n-100);
overflow: hidden;
}
.progress__bar{
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.breadcrumbs{margin-bottom: var(--space-6);}
.breadcrumbs ol{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
font-size: var(--text-label);
color: var(--color-text-subtle);
}
.breadcrumbs li + li::before{
content: '/';
margin-right: var(--space-2);
color: var(--c-n-300);
}
.breadcrumbs a{color: var(--color-text-muted);}
.breadcrumbs a:hover{color: var(--color-primary);}
.breadcrumbs [aria-current='page']{color: var(--color-text);font-weight: var(--weight-medium);}
.notification-item{
display: flex;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
transition: background-color var(--t-fast) var(--ease-out);
}
.notification-item:hover{background: var(--c-n-50);}
.notification-item.is-unread{background: var(--c-primary-50);}
.notification-item__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
flex: 0 0 auto;
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-primary);
border: 1px solid var(--color-border);
}
.notification-item__body{flex: 1 1 auto;min-width: 0;}
.notification-item__title{font-size: var(--text-xs);font-weight: var(--weight-semibold);}
.notification-item__text{font-size: var(--text-caption);color: var(--color-text-muted);}
.notification-item__time{font-size: var(--text-caption);color: var(--color-text-subtle);white-space: nowrap;}
.chat-item{
display: flex;
gap: var(--space-3);
align-items: center;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
transition: background-color var(--t-fast) var(--ease-out);
}
.chat-item:hover{background: var(--c-n-50);}
.chat-item.is-active{background: var(--color-primary-soft);}
.chat-item__body{flex: 1 1 auto;min-width: 0;}
.chat-item__name{font-size: var(--text-xs);font-weight: var(--weight-semibold);}
.chat-item__preview{
font-size: var(--text-caption);
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.chat-item__meta{
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-1);
font-size: var(--text-caption);
color: var(--color-text-subtle);
}
.chat-item__unread{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--c-white);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
@media (max-width: 1024px){
.teacher-card{
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"media ident"
"body  body"
"aside aside";
}
.teacher-card__aside{
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding-left: 0;
padding-top: var(--space-4);
border-left: 0;
border-top: 1px solid var(--color-border);
}
.teacher-card__actions{
flex-direction: row;
margin-top: 0;
}
.teacher-card__slots{flex: 1 1 auto;}
}
@media (max-width: 640px){
.teacher-card{
grid-template-columns: 112px minmax(0, 1fr);
grid-template-areas:
"media ident"
"body  body"
"aside aside";
column-gap: var(--space-4);
row-gap: var(--space-4);
padding: var(--space-4);
}
.teacher-card__photo{
width: 112px;
height: 140px;
border-radius: var(--radius-md);
}
.teacher-card__initials{font-size: 1.75rem;}
.teacher-card__head{align-items: flex-start;}
.teacher-card__name{font-size: var(--text-h4);}
.teacher-card__rating-row{gap: var(--space-2);}
.teacher-card__meta{gap: var(--space-3) var(--space-4);}
.teacher-card__aside{flex-direction: column;align-items: stretch;}
.teacher-card__actions{flex-direction: column;}
.teacher-card__price{justify-content: flex-start;}
.tabs__list{border-radius: var(--radius-sm);}
.modal__dialog{padding: var(--space-5);}
}
.dropdown__item--primary{background: var(--color-primary-soft);}
.dropdown__item--primary:hover{background: var(--c-primary-100);}
.dropdown__item--primary strong{color: var(--color-primary);}
.dropdown__item--primary .dropdown__icon{color: var(--color-primary);}
.site-header{
position: sticky;
top: 0;
z-index: var(--z-header);
background: rgba(255, 255, 255, 0.88);
backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid transparent;
transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.site-header.is-stuck{
border-bottom-color: var(--color-border);
box-shadow: 0 1px 12px rgba(16, 24, 40, 0.05);
}
.site-header__inner{
display: flex;
align-items: center;
gap: clamp(var(--space-3), 1.3vw, var(--space-6));
min-height: var(--header-h);
}
.container.site-header__inner{
max-width: var(--header-max);
}
.site-header__brand{
flex: 0 0 auto;
color: inherit;
}
.site-header__actions{
display: flex;
align-items: center;
gap: clamp(var(--space-1), 0.7vw, var(--space-3));
margin-left: auto;
}
.site-header__actions .icon-btn{
width: clamp(42px, 0.094rem + 3.55vw, 68px);
height: clamp(42px, 0.094rem + 3.55vw, 68px);
}
.site-header__actions .btn--sm{
min-height: clamp(38px, 0.175rem + 3.16vw, 62px);
padding: clamp(0.5rem, -0.93rem + 1.972vw, 0.875rem) clamp(0.875rem, -0.475rem + 1.578vw, 1.25rem);
font-size: clamp(0.875rem, -0.24rem + 1.38vw, 1.375rem);
}
.site-header__burger{display: none;}
.site-header__user{display: none;}
.site-header__register{display: block;}
.logo{
display: inline-flex;
align-items: center;
gap: clamp(var(--space-2), 0.9vw, var(--space-4));
}
.logo__mark{display: inline-flex;}
.logo__mark svg{width: clamp(34px, 3.6vw, 68px);height: clamp(34px, 3.6vw, 68px);}
.logo__text{
display: flex;
flex-direction: column;
line-height: 1.05;
}
.logo__name{
font-family: var(--font-display);
font-size: clamp(1.0625rem, 1.85vw, 2.125rem);
font-weight: var(--weight-extrabold);
letter-spacing: 0.06em;
color: var(--color-text);
}
.logo__tagline{
font-size: clamp(0.625rem, 0.85vw, 0.9375rem);
font-weight: var(--weight-medium);
letter-spacing: 0.04em;
color: var(--color-text-subtle);
}
.site-nav{flex: 1 1 auto;}
.site-nav__list{
display: flex;
align-items: center;
gap: clamp(2px, 0.2vw, 6px);
}
.site-nav__link{
position: relative;
display: inline-flex;
align-items: center;
padding: clamp(0.5rem, -0.93rem + 1.972vw, 0.875rem) clamp(0.75rem, -0.93rem + 1.972vw, 1.375rem);
border-radius: clamp(var(--radius-sm), 0.6vw, var(--radius-md));
color: var(--color-text-muted);
font-size: clamp(0.875rem, -0.2225rem + 1.578vw, 1.625rem);
font-weight: var(--weight-medium);
white-space: nowrap;
transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.site-nav__link:hover{
color: var(--color-text);
background: var(--c-n-100);
}
.site-nav__link.is-active{
color: var(--color-primary-hover);
font-weight: var(--weight-semibold);
}
.site-nav__link.is-active::after{
content: '';
position: absolute;
left: clamp(0.75rem, -0.93rem + 1.972vw, 1.375rem);
right: clamp(0.75rem, -0.93rem + 1.972vw, 1.375rem);
bottom: clamp(0.125rem, 0.3vw, 0.375rem);
height: clamp(2px, 0.16vw, 3px);
border-radius: var(--radius-pill);
background: var(--color-primary);
}
.header-search{
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: flex-start;
justify-content: center;
padding: clamp(4rem, 12vh, 9rem) var(--container-pad) var(--space-8);
background: rgba(16, 24, 40, 0.45);
backdrop-filter: blur(4px);
animation: fade-in var(--t-base) var(--ease-out);
overflow-y: auto;
}
.header-search .container{
width: 100%;
max-width: 720px;
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-xl);
animation: modal-up var(--t-slow) var(--ease-out);
}
.header-search__form{
position: relative;
display: flex;
align-items: center;
gap: var(--space-2);
}
.header-search__icon{
position: absolute;
left: var(--space-4);
display: inline-flex;
color: var(--color-text-subtle);
pointer-events: none;
}
.header-search__input{
flex: 1 1 auto;
width: 100%;
min-height: 46px;
padding: 0.625rem 0.875rem 0.625rem 2.75rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
font-size: var(--text-sm);
}
.header-search__input:focus{
outline: none;
border-color: var(--color-primary);
box-shadow: var(--shadow-focus);
}
.header-search__close{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 46px;
min-height: 46px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-subtle);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.header-search__close:hover{border-color: var(--color-primary);background: var(--c-primary-50);color: var(--color-primary);}
.header-search__close:focus-visible{outline: none;border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
.search-suggest{
position: absolute;
left: 0;
right: 0;
top: calc(100% - 4px);
z-index: var(--z-dropdown);
max-height: 60vh;
overflow-y: auto;
padding: var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
}
.search-suggest--hero{
position: absolute;
left: 0;
right: 0;
top: calc(100% + var(--space-2));
max-height: 320px;
}
.search-suggest__group + .search-suggest__group{
margin-top: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
}
.search-suggest__label{
display: block;
padding: var(--space-2) var(--space-3) var(--space-1);
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.search-suggest__item{
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--color-text);
}
.search-suggest__item:hover,
.search-suggest__item.is-highlighted{
background: var(--c-n-50);
color: var(--color-text);
}
.search-suggest__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
flex: 0 0 auto;
border-radius: var(--radius-sm);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
}
.search-suggest__text{display: flex;flex-direction: column;min-width: 0;}
.search-suggest__title{font-size: var(--text-xs);font-weight: var(--weight-semibold);}
.search-suggest__meta{
font-size: var(--text-caption);
color: var(--color-text-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.search-suggest__empty{
padding: var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-xs);
text-align: center;
}
.mobile-nav{
position: fixed;
top: 0;
right: 0;
z-index: var(--z-overlay);
display: flex;
flex-direction: column;
width: min(360px, 88vw);
height: 100dvh;
padding: var(--space-5);
background: var(--color-surface);
box-shadow: var(--shadow-xl);
animation: mobile-nav-in var(--t-slow) var(--ease-out);
overflow-y: auto;
}
@keyframes mobile-nav-in{
from{transform: translateX(100%);}
to{transform: translateX(0);}
}
.mobile-nav__head{
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.mobile-nav__body{flex: 1 1 auto;padding-block: var(--space-4);}
.mobile-nav__visual{
display: flex;
justify-content: center;
margin-top: var(--space-6);
padding-top: var(--space-4);
}
.mobile-nav__visual img{
width: min(100%, 240px);
height: auto;
filter: drop-shadow(0 18px 30px rgba(46, 63, 196, 0.16));
}
.mobile-nav__link{
display: block;
padding: var(--space-3) var(--space-2);
border-radius: var(--radius-sm);
color: var(--color-text);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.mobile-nav__link:hover{background: var(--c-n-50);}
.mobile-nav__subjects{
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.mobile-nav__subjects-title{
display: block;
margin-bottom: var(--space-2);
padding-inline: var(--space-2);
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.mobile-nav__subjects-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
}
.mobile-nav__subject{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
line-height: 1.2;
}
.mobile-nav__subject:hover{border-color: var(--c-primary-300);background: var(--c-primary-50);}
.mobile-nav__subject-photo{
width: 100%;
aspect-ratio: 16 / 9;
border-radius: var(--radius-sm);
background: var(--c-n-50);
overflow: hidden;
}
.mobile-nav__subject-photo img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.mobile-nav__subject-title{
min-width: 0;
overflow-wrap: anywhere;
}
.mobile-nav__foot{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-5);
border-top: 1px solid var(--color-border);
}
.mobile-nav__roles{
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-top: var(--space-2);
text-align: center;
}
.mobile-nav__roles a{font-size: var(--text-label);}
.mobile-nav__backdrop{
position: fixed;
inset: 0;
z-index: calc(var(--z-overlay) - 1);
background: rgba(16, 24, 40, 0.4);
animation: fade-in var(--t-base) var(--ease-out);
}
.demo-bar{
background: var(--c-warning-bg);
border-bottom: 1px solid var(--c-warning-line);
}
.demo-bar__inner{
display: flex;
align-items: center;
gap: var(--space-4);
padding-block: var(--space-2);
}
.demo-bar__text{
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
color: var(--c-warning);
font-size: var(--text-label);
}
.demo-bar__text strong{font-weight: var(--weight-bold);}
.demo-bar__text svg{flex: 0 0 auto;}
.demo-bar__close{
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-left: auto;
border-radius: var(--radius-sm);
color: var(--c-warning);
transition: background-color var(--t-fast) var(--ease-out);
}
.demo-bar__close:hover{background: rgba(178, 94, 9, 0.12);}
@media (max-width: 1120px){
.site-nav{display: none;}
.site-header__burger{display: inline-flex;}
}
@media (max-width: 640px){
.site-header__inner{gap: var(--space-3);}
.site-header__actions{gap: var(--space-1);}
.site-header__login{display: none;}
.site-header__register{display: none;}
.site-header__user{display: inline-flex;}
.logo__tagline{display: none;}
.demo-bar__text{font-size: var(--text-caption);}
}
@media (max-width: 480px){
.site-header__search-toggle,
.site-header__user,
.site-header__burger{width: 38px;height: 38px;}
.header-search__icon{display: none;}
.header-search__input{padding-left: 0.875rem;}
}
.site-footer{
margin-top: var(--space-16);
background: var(--color-surface-dark);
color: rgba(255, 255, 255, 0.78);
}
.site-footer__inner{
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
gap: var(--space-12);
padding-block: var(--space-16);
}
.site-footer .logo__name{color: var(--c-white);}
.site-footer .logo__tagline{color: rgba(255, 255, 255, 0.55);}
.site-footer__about{
max-width: 380px;
margin: var(--space-5) 0 var(--space-6);
font-size: var(--text-xs);
line-height: var(--leading-relaxed);
color: rgba(255, 255, 255, 0.7);
}
.site-footer__social{
display: flex;
gap: var(--space-2);
}
.site-footer__social a{
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.85);
transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.site-footer__social a:hover{
background: rgba(255, 255, 255, 0.16);
color: var(--c-white);
}
.site-footer__columns{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-8);
}
.site-footer__title{
margin-bottom: var(--space-4);
color: var(--c-white);
font-family: var(--font-sans);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.site-footer__list{
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.site-footer__list a{
color: rgba(255, 255, 255, 0.72);
font-size: var(--text-xs);
}
.site-footer__list a:hover{color: var(--c-white);}
.site-footer__bottom{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
padding-block: var(--space-5);
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__copy,
.site-footer__meta{
margin: 0;
font-size: var(--text-caption);
color: rgba(255, 255, 255, 0.55);
}
.site-footer__meta{
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
@media (max-width: 1024px){
.site-footer__inner{grid-template-columns: minmax(0, 1fr);gap: var(--space-10);}
.site-footer__columns{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 560px){
.site-footer__columns{grid-template-columns: minmax(0, 1fr);gap: var(--space-6);}
.site-footer__bottom{flex-direction: column;align-items: flex-start;}
}
.to-top{
position: fixed;
right: clamp(var(--space-4), 2.5vw, var(--space-8));
bottom: clamp(var(--space-4), 2.5vw, var(--space-8));
z-index: var(--z-dropdown);
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-primary);
box-shadow: var(--shadow-lg);
cursor: pointer;
animation: to-top-in var(--t-base) var(--ease-out);
}
.to-top:hover{border-color: var(--color-primary);background: var(--color-primary);color: #fff;}
.to-top:focus-visible{outline: none;border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
@keyframes to-top-in{
from{opacity: 0;transform: translateY(10px);}
to{opacity: 1;transform: translateY(0);}
}
@media (prefers-reduced-motion: reduce){
.to-top{animation: none;}
}
@media (max-width: 700px){
.to-top{width: 46px;height: 46px;}
}
@media print{
.to-top{display: none;}
}
.hero{
position: relative;
padding-block: clamp(1rem, 2vw, 1.75rem) clamp(2.5rem, 5vw, 4.5rem);
background:
radial-gradient(1100px 520px at 8% -10%, var(--c-primary-50) 0%, rgba(238, 240, 254, 0) 58%),
radial-gradient(900px 460px at 96% 4%, var(--c-accent-50) 0%, rgba(230, 248, 245, 0) 60%),
linear-gradient(180deg, var(--c-n-25), var(--color-bg) 72%);
overflow: hidden;
}
.hero__glow{
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(16, 24, 40, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(16, 24, 40, 0.03) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: radial-gradient(1100px 460px at 18% 0%, #000 0%, transparent 76%);
-webkit-mask-image: radial-gradient(1100px 460px at 18% 0%, #000 0%, transparent 76%);
}
.hero__inner{
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
gap: clamp(0.75rem, 1.4vw, 1.25rem) clamp(2rem, 4vw, 3.5rem);
align-items: start;
}
.hero__intro{
grid-column: 1;
grid-row: 2;
display: block;
margin-top: clamp(var(--space-3), 1.5vw, var(--space-5));
}
.hero__title{max-width: 26ch;}
.hero__panel{
grid-column: 1;
grid-row: 1;
align-self: start;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.hero__visual{grid-column: 2;grid-row: 1 / span 2;}
.hero__note{margin: var(--space-4) 0 0;white-space: normal;}
.hero__intro .hero__title{margin-bottom: var(--space-2);}
.hero__intro .hero__subtitle{max-width: none;font-size: var(--text-body);}
.hero__badge{
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-5);
padding: 0.375rem 0.75rem 0.375rem 0.5rem;
border: 1px solid var(--c-primary-200);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.85);
color: var(--c-primary-800);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.hero__badge svg{color: var(--color-accent);}
.hero__title{
font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.7rem);
font-weight: var(--weight-extrabold);
letter-spacing: -0.03em;
line-height: 1.06;
margin-bottom: var(--space-3);
}
.hero__subtitle{
max-width: 52ch;
margin-bottom: 0;
color: var(--color-text-muted);
font-size: var(--text-lg);
line-height: var(--leading-normal);
}
.hero__note{
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: var(--space-4) 0 0;
color: var(--color-text-subtle);
font-size: var(--text-label);
}
.hero__note svg{color: var(--color-accent);}
.picker{
position: relative;
padding: clamp(var(--space-4), 1.6vw, var(--space-5));
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
background: var(--color-surface);
box-shadow: 0 24px 60px -28px rgba(49, 46, 129, 0.28), var(--shadow-md);
}
.picker::before{
content: '';
position: absolute;
inset: 0 0 auto;
height: 4px;
border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
background: linear-gradient(90deg, var(--c-primary-500), var(--c-accent-500) 55%, var(--c-secondary-500));
}
.picker__fields{
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.05fr) auto;
gap: var(--space-3);
align-items: end;
}
.picker__field{position: relative;display: flex;flex-direction: column;gap: var(--space-2);min-width: 0;}
.picker__label{
padding-left: var(--space-1);
color: var(--color-text-muted);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
}
.picker__trigger{
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
min-height: 68px;
padding: 0 var(--space-4);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-text-subtle);
font-size: var(--text-lg);
font-weight: var(--weight-medium);
text-align: left;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.picker__trigger:hover{border-color: var(--c-primary-300);background: var(--c-primary-50);}
.picker__trigger:focus-visible{outline: none;border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
.picker__trigger[aria-expanded='true']{border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
.picker__trigger.has-value{color: var(--color-text);font-weight: var(--weight-semibold);}
.picker__trigger-icon{display: inline-flex;flex: none;color: var(--color-primary);}
.picker__trigger-icon img{
display: block;
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
object-fit: cover;
}
.picker__trigger-text{flex: 1 1 auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.picker__trigger-chevron{flex: none;color: var(--color-text-subtle);transition: transform var(--t-base) var(--ease-out);}
.picker__trigger[aria-expanded='true'] .picker__trigger-chevron{transform: rotate(180deg);}
.picker__select{
position: relative;
display: flex;
align-items: center;
min-height: 68px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-surface);
transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.picker__select:hover{border-color: var(--c-primary-300);background: var(--c-primary-50);}
.picker__select:focus-within{border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
.picker__select-icon{position: absolute;left: var(--space-4);display: inline-flex;color: var(--color-primary);pointer-events: none;}
.picker__select-chevron{position: absolute;right: var(--space-4);color: var(--color-text-subtle);pointer-events: none;}
.picker__select-input{
width: 100%;
min-height: 66px;
padding: 0 var(--space-10) 0 var(--space-10);
border: 0;
border-radius: var(--radius-lg);
background: transparent;
color: var(--color-text);
font-family: inherit;
font-size: var(--text-lg);
font-weight: var(--weight-medium);
appearance: none;
cursor: pointer;
}
.picker__select-input:focus{outline: none;}
.picker__submit{
min-height: 68px;
padding-inline: var(--space-5);
border-radius: var(--radius-lg);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
white-space: nowrap;
}
.picker__submit svg{transition: transform var(--t-base) var(--ease-out);}
.picker__submit:hover svg{transform: translateX(3px);}
.picker__panel{
position: absolute;
z-index: var(--z-dropdown);
top: calc(100% + var(--space-2));
left: 0;
min-width: min(480px, 92vw);
right: auto;
width: 100%;
max-height: min(60vh, 460px);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-xl);
overflow-y: auto;
}
.picker__group + .picker__group{margin-top: var(--space-2);padding-top: var(--space-2);border-top: 1px solid var(--color-border);}
.picker__head{display: none;}
.picker__group-title{
display: block;
padding: var(--space-2) var(--space-3) var(--space-1);
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.picker__item{
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-3);
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text);
font-family: inherit;
font-size: var(--text-body);
font-weight: var(--weight-medium);
text-align: left;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease-out);
}
@media (hover: hover){
.picker__item:hover{background: var(--c-primary-50);}
}
.picker__item.is-active{background: var(--c-primary-50);}
.picker__item.is-selected{background: var(--color-primary-soft);color: var(--c-primary-800);font-weight: var(--weight-semibold);}
.picker__item-icon{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-md);
background: var(--c-primary-50);
color: var(--color-primary);
}
.picker__item-photo{
flex: none;
width: 38px;
height: 38px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--c-n-50);
overflow: hidden;
}
.picker__item-photo img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.picker__item-text{display: flex;flex-direction: column;min-width: 0;}
.picker__item-title{font-weight: var(--weight-semibold);}
.picker__item-meta{color: var(--color-text-subtle);font-size: var(--text-caption);}
.picker__item-check{margin-left: auto;color: var(--color-primary);opacity: 0;}
.picker__item.is-selected .picker__item-check{opacity: 1;}
.picker__all{
display: block;
margin-top: var(--space-2);
padding: var(--space-3);
border-top: 1px solid var(--color-border);
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-align: center;
}
.picker__item-icon--indigo{background: var(--c-tone-indigo-bg);color: var(--c-tone-indigo-fg);}
.picker__item-icon--teal{background: var(--c-tone-teal-bg);color: var(--c-tone-teal-fg);}
.picker__item-icon--amber{background: var(--c-tone-amber-bg);color: var(--c-tone-amber-fg);}
.picker__item-icon--violet{background: var(--c-tone-violet-bg);color: var(--c-tone-violet-fg);}
.picker__item-icon--rose{background: var(--c-tone-rose-bg);color: var(--c-tone-rose-fg);}
.picker__item-icon--sky{background: var(--c-tone-sky-bg);color: var(--c-tone-sky-fg);}
.picker__item-icon--emerald{background: var(--c-tone-emerald-bg);color: var(--c-tone-emerald-fg);}
.picker__mode{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-2);
margin-top: var(--space-4);
}
.modebtn{position: relative;cursor: pointer;}
.modebtn input{
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.modebtn__body{
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-height: 58px;
padding: 0 var(--space-3);
white-space: nowrap;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.modebtn:hover .modebtn__body{transform: translateY(-1px);box-shadow: var(--shadow-sm);}
.modebtn input:focus-visible + .modebtn__body{box-shadow: var(--shadow-focus);}
.modebtn--neutral .modebtn__icon{color: var(--c-primary-600);}
.modebtn--online .modebtn__icon{color: var(--c-tone-sky-fg);}
.modebtn--onsite .modebtn__icon{color: var(--c-tone-teal-fg);}
.modebtn--neutral .modebtn__label{color: var(--c-primary-700);}
.modebtn--online .modebtn__label{color: var(--c-tone-sky-fg);}
.modebtn--onsite .modebtn__label{color: var(--c-tone-teal-fg);}
.modebtn--neutral .modebtn__body{border-color: var(--c-primary-200);}
.modebtn--online .modebtn__body{border-color: var(--c-tone-sky-line, var(--c-info-line));}
.modebtn--onsite .modebtn__body{border-color: var(--c-tone-teal-line, var(--c-success-line));}
.modebtn--online:hover .modebtn__body{background: var(--c-tone-sky-bg);}
.modebtn--onsite:hover .modebtn__body{background: var(--c-tone-teal-bg);}
.modebtn--neutral:hover .modebtn__body{background: var(--c-primary-50);}
.modebtn__body::after{
content: '';
display: inline-block;
width: 0;
height: 0;
}
.modebtn input:checked + .modebtn__body::after{
content: '';
width: 16px;
height: 16px;
margin-left: 2px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.8 4.6 4.6L19 7.4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.8 4.6 4.6L19 7.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.modebtn--neutral input:checked + .modebtn__body{
border-color: var(--c-primary-300);
background: var(--c-primary-50);
color: var(--c-primary-800);
}
.modebtn--online input:checked + .modebtn__body{
border-color: var(--c-tone-sky-line, var(--c-info-line));
background: var(--c-tone-sky-bg);
color: var(--c-tone-sky-fg);
}
.modebtn--onsite input:checked + .modebtn__body{
border-color: var(--c-tone-teal-line, var(--c-success-line));
background: var(--c-tone-teal-bg);
color: var(--c-tone-teal-fg);
}
.modebtn input:checked + .modebtn__body{box-shadow: var(--shadow-sm);}
.hero-teaser{display: none;}
.hero-search-layer{display: contents;}
.hero-search-layer__sheet{display: contents;}
.hero-search-layer__head,
.hero-search-layer__backdrop{display: none;}
@media (max-width: 700px){
html.js .hero-teaser{
display: flex;
flex-direction: column;
gap: var(--space-3);
width: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
}
html.js .hero-teaser__art{display: flex;justify-content: center;}
html.js .hero-teaser__art img{width: min(100%, 300px);height: auto;}
html.js .hero-teaser__card{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
html.js .hero-teaser:hover .hero-teaser__card,
html.js .hero-teaser:focus-visible .hero-teaser__card{box-shadow: var(--shadow-xl);transform: translateY(-2px);}
html.js .hero-teaser:focus-visible{outline: none;}
html.js .hero-teaser:focus-visible .hero-teaser__card{border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
html.js .hero-teaser__row{
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
padding: 0 var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
html.js .hero-teaser__row--split{border: 0;padding: 0;min-height: 0;gap: var(--space-2);}
html.js .hero-teaser__icon{color: var(--color-primary);flex: none;}
html.js .hero-teaser__label{flex: 1 1 auto;}
html.js .hero-teaser__chevron{color: var(--color-text-subtle);flex: none;}
html.js .hero-teaser__chip{
display: inline-flex;
align-items: center;
gap: var(--space-1);
min-height: 44px;
padding: 0 var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
font-size: var(--text-sm);
}
html.js .hero-teaser__cta{
display: inline-flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
gap: var(--space-1);
min-height: 44px;
padding: 0 var(--space-3);
border-radius: var(--radius-md);
background: var(--color-primary);
color: var(--c-white);
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
}
html.js .hero-search-layer{
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: none;
align-items: stretch;
justify-content: center;
}
html.js .hero-search-layer:not([hidden]){display: flex;}
html.js .hero-search-layer__backdrop{
display: block;
position: absolute;
inset: 0;
background: rgba(16, 24, 40, 0.45);
backdrop-filter: blur(2px);
animation: fade-in var(--t-base) var(--ease-out);
}
html.js .hero-search-layer__sheet{
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: 560px;
height: 100%;
background: var(--color-bg-subtle);
animation: sheet-up var(--t-slow) var(--ease-out);
}
html.js .hero-search-layer__head{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
}
html.js .hero-search-layer__title{margin: 0;font-size: var(--text-h4);}
html.js .hero-search-layer__body{
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: var(--space-4);
padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
}
html.js .hero-search-layer__body .picker{box-shadow: var(--shadow-md);}
}
@keyframes sheet-up{
from{opacity: 0;transform: translateY(16px);}
to{opacity: 1;transform: translateY(0);}
}
@media (prefers-reduced-motion: reduce){
html.js .hero-search-layer__sheet,
html.js .hero-search-layer__backdrop{animation: none;}
}
.hero__visual{position: relative;display: flex;justify-content: center;}
.hero-teacher{
position: relative;
display: flex;
flex-direction: column;
width: min(100%, 360px);
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
background: var(--color-surface);
box-shadow: var(--shadow-xl);
overflow: hidden;
}
.hero-teacher__photo{
position: relative;
display: block;
aspect-ratio: 4 / 3;
background: linear-gradient(150deg, var(--c-primary-100), var(--c-accent-100));
overflow: hidden;
}
.hero-teacher__photo img{width: 100%;height: 100%;object-fit: cover;object-position: center 16%;}
.hero-teacher__initials{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-family: var(--font-display);
font-size: 3rem;
font-weight: var(--weight-extrabold);
color: var(--c-primary-800);
}
.hero-teacher__body{display: flex;flex-direction: column;gap: var(--space-3);padding: var(--space-5);}
.hero-teacher__name{
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font-family: var(--font-display);
font-size: var(--text-h4);
font-weight: var(--weight-bold);
}
.hero-teacher__verified{color: var(--color-accent);}
.hero-teacher__meta{margin: 0;color: var(--color-text-muted);font-size: var(--text-xs);}
.hero-teacher__row{display: flex;align-items: center;justify-content: space-between;gap: var(--space-3);}
.hero-teacher__price{margin: 0;color: var(--color-text-subtle);font-size: var(--text-label);}
.hero-teacher__price strong{font-family: var(--font-display);font-size: var(--text-h4);color: var(--color-text);}
.hero-teacher__slots{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding-top: var(--space-2);
border-top: 1px dashed var(--color-border);
}
.hero-teacher__slots-label{
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-subtle);
font-size: var(--text-label);
}
.hero-float{
position: absolute;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.5rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.hero-float--today{top: 8%;right: -4%;color: var(--c-success);}
.hero-float--count{bottom: 6%;left: -6%;color: var(--color-primary-hover);}
.hero__visual--figure{
align-items: center;
min-height: 520px;
}
.hero-figure{
position: relative;
width: min(100%, 520px);
}
.hero-figure__img{
display: block;
width: 100%;
height: auto;
-webkit-mask-image: radial-gradient(55% 55% at 50% 47%, #000 58%, rgba(0, 0, 0, 0.6) 78%, transparent 100%);
mask-image: radial-gradient(55% 55% at 50% 47%, #000 58%, rgba(0, 0, 0, 0.6) 78%, transparent 100%);
}
.hero-figure--transparent{width: min(100%, 380px);}
.hero__visual--transparent{min-height: 0;}
.hero-figure--transparent .hero-figure__img{
-webkit-mask-image: none;
mask-image: none;
}
.hero-figure__glow{
position: absolute;
z-index: -1;
inset: 8% 4% 4%;
border-radius: 50%;
background: radial-gradient(closest-side, var(--c-primary-100), rgba(238, 242, 255, 0));
filter: blur(6px);
}
.hero__visual--figure .hero-float--a{top: 12%;left: -6%;}
.hero__visual--figure .hero-float--b{top: 44%;right: -8%;}
.hero__visual--figure .hero-float--c{bottom: 12%;left: -2%;}
.hero-figure--panel{
width: min(100%, 560px);
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
background: var(--c-primary-50);
box-shadow: var(--shadow-xl);
overflow: hidden;
isolation: isolate;
}
.hero__visual--panel{min-height: 0;}
.hero-figure--panel .hero-figure__img{
aspect-ratio: 3 / 2;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: none;
mask-image: none;
}
.hero-figure--panel .hero-figure__glow{display: none;}
.hero__visual--panel .hero-float--a{top: var(--space-4);left: var(--space-4);right: auto;bottom: auto;}
.hero__visual--panel .hero-float--b{bottom: var(--space-4);left: var(--space-4);right: auto;top: auto;}
.hero__visual--panel .hero-float--c{bottom: var(--space-4);right: var(--space-4);left: auto;top: auto;}
.hero-float--primary{color: var(--color-primary-hover);}
.hero-float--success{color: var(--c-success);}
.hero-float--accent{color: var(--color-accent);}
.section--subjects{background: var(--color-bg);}
.section--teachers{background: var(--color-bg-subtle);}
.section--how{background: var(--color-bg-subtle);}
.section--courses{background: var(--color-bg-subtle);}
.section--academy{background: var(--color-bg);}
.section--trust{background: var(--color-bg-subtle);}
.section--faq{background: var(--color-bg);}
.section-head__title{letter-spacing: -0.025em;}
.section-head{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-6);
margin-bottom: var(--space-8);
}
.section-head__text{min-width: 0;}
.section-head__eyebrow{
margin-bottom: var(--space-2);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.section-head__title{
font-size: var(--text-h2);
font-weight: var(--weight-extrabold);
letter-spacing: -0.025em;
}
.section-head__subtitle{
max-width: 62ch;
margin: var(--space-3) 0 0;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.section-head__action{
display: inline-flex;
align-items: center;
gap: var(--space-2);
flex: 0 0 auto;
padding-bottom: 0.25rem;
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.section-head__action:hover svg{transform: translateX(2px);}
.section-head__action svg{transition: transform var(--t-fast) var(--ease-out);}
.section-head--center{
flex-direction: column;
align-items: center;
text-align: center;
}
.section-head--center .section-head__subtitle{margin-inline: auto;}
@media (max-width: 700px){
.section-head{flex-direction: column;align-items: flex-start;}
.section-head--center{align-items: center;}
}
.subject-grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
}
.teacher-grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-5);
}
.steps--big{grid-template-columns: repeat(4, minmax(0, 1fr));}
.step--big{
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-7) var(--space-6);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.step--big .step__number{
position: static;
display: block;
font-size: clamp(2.5rem, 1.5rem + 2vw, 3.25rem);
line-height: 1;
color: var(--c-primary-200);
margin-bottom: var(--space-2);
}
.step--big .step__icon{
width: 52px;
height: 52px;
border-radius: var(--radius-lg);
background: var(--color-primary);
color: var(--c-white);
}
.step--big .step__title{font-size: var(--text-h4);}
.step--big .step__text{font-size: var(--text-xs);}
.trust-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: var(--space-5);
margin-bottom: var(--space-10);
}
.trust-card{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
}
.trust-card__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: var(--radius-md);
background: var(--color-accent-soft);
color: var(--c-accent-700);
}
.trust-card__title{font-size: var(--text-h4);}
.trust-card__text{margin: 0;color: var(--color-text-muted);font-size: var(--text-xs);}
.trust-quotes{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-5);
}
.cta-panel{
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
padding: clamp(2rem, 4vw, 3.5rem);
border-radius: var(--radius-2xl);
background: linear-gradient(140deg, var(--c-secondary-700), var(--c-secondary-500) 60%, #1D2A5C);
color: rgba(255, 255, 255, 0.86);
overflow: hidden;
}
.cta-panel__eyebrow{
margin-bottom: var(--space-3);
color: var(--c-accent-300);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.cta-panel__title{color: var(--c-white);font-size: var(--text-h2);margin-bottom: var(--space-4);}
.cta-panel__text{color: rgba(255, 255, 255, 0.76);font-size: var(--text-sm);max-width: 56ch;}
.cta-panel__list{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
margin: var(--space-6) 0 var(--space-8);
}
.cta-panel__list li{display: flex;align-items: flex-start;gap: var(--space-2);color: rgba(255, 255, 255, 0.9);font-size: var(--text-xs);}
.cta-panel__list svg{color: var(--c-accent-400);margin-top: 3px;}
.cta-panel__actions{display: flex;flex-wrap: wrap;gap: var(--space-3);}
.cta-panel .btn--ghost{--btn-fg: rgba(255, 255, 255, 0.88);--btn-border: rgba(255, 255, 255, 0.28);}
.cta-panel .btn--ghost:hover{--btn-bg: rgba(255, 255, 255, 0.12);--btn-fg: var(--c-white);}
.teacher-console{
padding: var(--space-5);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-xl);
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(6px);
}
.teacher-console__head{display: flex;align-items: center;justify-content: space-between;margin-bottom: var(--space-4);}
.teacher-console__title{color: var(--c-white);font-family: var(--font-display);font-size: var(--text-sm);font-weight: var(--weight-bold);}
.teacher-console__badge{
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-pill);
background: rgba(18, 179, 155, 0.18);
color: var(--c-accent-300);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
.teacher-console__grid{display: grid;grid-template-columns: repeat(5, minmax(0, 1fr));gap: var(--space-2);margin-bottom: var(--space-5);}
.teacher-console__day{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-2);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.05);
min-height: 92px;
}
.teacher-console__day-name{font-size: var(--text-caption);color: rgba(255, 255, 255, 0.55);text-align: center;}
.teacher-console__lesson{
padding: 0.1875rem 0.25rem;
border-radius: 5px;
background: rgba(95, 214, 196, 0.18);
border: 1px solid rgba(95, 214, 196, 0.28);
color: var(--c-accent-100);
font-size: 0.625rem;
font-weight: var(--weight-semibold);
text-align: center;
font-variant-numeric: tabular-nums;
}
.teacher-console__stats{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.teacher-console__stat-value{display: block;color: var(--c-white);font-family: var(--font-display);font-size: var(--text-h4);font-weight: var(--weight-extrabold);}
.teacher-console__stat-label{font-size: var(--text-caption);color: rgba(255, 255, 255, 0.6);}
.final-cta{
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
padding: clamp(2.5rem, 5vw, 4rem);
border-radius: var(--radius-2xl);
background:
radial-gradient(600px 260px at 50% 0%, rgba(95, 214, 196, 0.22) 0%, rgba(95, 214, 196, 0) 65%),
linear-gradient(140deg, var(--c-primary-700), var(--c-primary-500));
color: rgba(255, 255, 255, 0.88);
text-align: center;
}
.final-cta__title{color: var(--c-white);font-size: var(--text-h2);max-width: 24ch;}
.final-cta__text{max-width: 56ch;color: rgba(255, 255, 255, 0.8);font-size: var(--text-sm);}
.final-cta__actions{display: flex;flex-wrap: wrap;gap: var(--space-3);justify-content: center;margin-top: var(--space-3);}
.final-cta .btn--primary{--btn-bg: var(--c-white);--btn-fg: var(--c-primary-800);}
.final-cta .btn--primary:hover{--btn-bg: var(--c-n-100);}
@media (max-width: 1180px){
.subject-grid,
.teacher-grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (max-width: 1024px){
.hero__inner{grid-template-columns: minmax(0, 1fr);align-items: start;}
.hero__intro{display: contents;}
.hero__panel{grid-column: 1;grid-row: auto;order: 0;align-self: auto;}
.hero__intro-text{grid-column: 1;grid-row: auto;order: 1;}
.hero__note{grid-column: 1;grid-row: auto;order: 2;white-space: normal;margin: var(--space-3) 0 0;}
.hero__visual{display: none;}
.hero__intro .hero__subtitle{font-size: var(--text-lg);}
.hero-figure--transparent{width: min(100%, 420px);}
.hero__visual{order: 2;}
.hero-float--today{right: 0;}
.hero-float--count{left: 0;}
.hero__visual--figure{min-height: 0;margin-top: var(--space-6);}
.hero-figure{width: min(100%, 460px);margin-inline: auto;}
.hero__visual--figure:not(.hero__visual--panel) .hero-float--a{left: 0;}
.hero__visual--figure:not(.hero__visual--panel) .hero-float--b{right: 0;}
.hero__visual--figure:not(.hero__visual--panel) .hero-float--c{left: 4%;}
.picker__fields{grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
.picker__submit{grid-column: 1 / -1;width: 100%;justify-content: center;}
.subject-grid,
.teacher-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
.steps--big{grid-template-columns: repeat(2, minmax(0, 1fr));}
.cta-panel{grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 700px){
.hero__panel{
justify-content: center;
min-height: calc(100dvh - var(--header-h) - var(--space-6));
}
.picker__fields{grid-template-columns: minmax(0, 1fr);}
.picker{border-radius: var(--radius-xl);}
.picker__panel{
position: fixed;
left: var(--space-3);
right: var(--space-3);
top: auto;
bottom: var(--space-3);
width: auto;
min-width: 0;
max-height: 70vh;
border-radius: var(--radius-xl);
box-shadow: 0 24px 60px -20px rgba(16, 24, 40, 0.35);
}
.picker__mode{grid-template-columns: repeat(2, minmax(0, 1fr));}
.picker__head{
position: sticky;
top: calc(var(--space-3) * -1);
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin: calc(var(--space-3) * -1) calc(var(--space-3) * -1) 0;
padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.picker__head-title{
color: var(--color-text);
font-size: var(--text-body);
font-weight: var(--weight-bold);
}
.picker__close{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-subtle);
cursor: pointer;
}
.picker__close:hover{background: var(--c-n-50);color: var(--color-text);}
.picker__close:focus-visible{outline: none;border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
.modebtn__body{width: 100%;}
.hero-teacher{width: min(100%, 420px);}
.hero-figure{width: min(100%, 360px);}
.hero__visual--panel .hero-float--b{display: none;}
.hero__visual--panel .hero-float--a{top: var(--space-3);left: var(--space-3);}
.hero__visual--panel .hero-float--c{bottom: var(--space-3);right: var(--space-3);}
.steps--big{grid-template-columns: minmax(0, 1fr);}
.cta-panel__list{grid-template-columns: minmax(0, 1fr);}
.teacher-console__grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (max-width: 520px){
.subject-grid{grid-template-columns: repeat(2, minmax(0, 1fr));gap: var(--space-3);}
.teacher-grid{grid-template-columns: minmax(0, 1fr);gap: var(--space-4);}
.hero-float{display: none;}
.hero__visual--panel .hero-float--a{display: flex;}
.picker{padding: var(--space-3);}
.picker__trigger, .picker__select, .picker__select-input{min-height: 58px;font-size: var(--text-body);}
.picker__submit{min-height: 58px;font-size: var(--text-body);}
}
.directory{
padding-block: var(--space-6) var(--section-y);
}
.directory__head{
max-width: 720px;
margin-bottom: var(--space-6);
}
.directory__title{
font-size: var(--text-h1);
margin-bottom: var(--space-3);
}
.directory__subtitle{
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.directory__search{
display: grid;
grid-template-columns: minmax(0, 1fr) 210px auto;
gap: var(--space-3);
align-items: center;
padding: var(--space-4);
margin-bottom: var(--space-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.directory__search-field{position: relative;}
.directory__search-icon{
position: absolute;
left: 0.875rem;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
color: var(--color-text-subtle);
pointer-events: none;
}
.directory__search-input{
width: 100%;
min-height: 50px;
padding: 0.75rem 1rem 0.75rem 2.75rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
font-size: var(--text-sm);
}
.directory__search-input:focus{
outline: none;
border-color: var(--color-primary);
box-shadow: var(--shadow-focus);
}
.directory__search-select .select{min-height: 50px;}
.directory__search .search-suggest{top: calc(100% + 6px);left: 0;right: 0;}
.directory__layout{
display: grid;
grid-template-columns: 312px minmax(0, 1fr);
gap: var(--space-8);
align-items: start;
}
.directory__sidebar{
position: sticky;
top: calc(var(--header-h) + var(--space-4));
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
max-height: calc(100vh - var(--header-h) - var(--space-8));
overflow-y: auto;
overscroll-behavior: contain;
}
.directory__sidebar-head{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-border);
}
.directory__sidebar-title{
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: var(--color-text);
}
.directory__sidebar-reset{
font-size: var(--text-label);
font-weight: var(--weight-medium);
}
.directory__main{min-width: 0;}
.directory__toolbar{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.directory__count{
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.directory__count strong{
color: var(--color-text);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}
.directory__toolbar-actions{
display: flex;
align-items: center;
gap: var(--space-3);
}
.directory__filters-button{display: none;position: relative;}
.directory__filters-badge{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--c-white);
font-size: 0.6875rem;
font-weight: var(--weight-bold);
}
.directory__sort{
display: flex;
align-items: center;
gap: var(--space-2);
}
.directory__sort-label{
color: var(--color-text-subtle);
font-size: var(--text-label);
white-space: nowrap;
}
.select--sm{
min-height: 40px;
padding: 0.375rem 2.25rem 0.375rem 0.75rem;
font-size: var(--text-label);
}
.active-filters{
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-5);
padding: var(--space-3) var(--space-4);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
}
.active-filters__list{
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.active-filters__chip{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.25rem 0.625rem;
border: 1px solid var(--c-primary-200);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--c-primary-800);
font-size: var(--text-label);
font-weight: var(--weight-medium);
}
.active-filters__chip:hover{
border-color: var(--c-primary-400);
color: var(--c-primary-900);
}
.active-filters__clear{
margin-left: auto;
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.directory__empty-reset{
margin-top: var(--space-5);
text-align: center;
}
.filters__group{
margin: 0 0 var(--space-5);
padding: 0;
border: 0;
}
.filters__group:last-of-type{margin-bottom: var(--space-4);}
.filters__label{
display: block;
margin-bottom: var(--space-2);
padding: 0;
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.filters__hint{
margin: var(--space-2) 0 0;
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.filters__checks{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-2);
}
.filters__checks--grades{grid-template-columns: repeat(3, minmax(0, 1fr));}
.filters__checks--stack{grid-template-columns: minmax(0, 1fr);}
.checkbox--compact,
.radio--compact{
gap: var(--space-2);
font-size: var(--text-label);
color: var(--color-text);
}
.checkbox--compact input,
.radio--compact input{width: 18px;height: 18px;}
.filters__price{
display: flex;
align-items: flex-end;
gap: var(--space-2);
}
.filters__price-field{
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1 1 0;
}
.filters__price-field span{
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.filters__price-unit{
padding-bottom: 0.75rem;
color: var(--color-text-muted);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.filters__sub{
margin: var(--space-3) 0 var(--space-1);
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.filters__sub:first-of-type{margin-top: var(--space-2);}
.filters__quick{
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-3);
}
.filters__quick-link{
padding: 0.1875rem 0.5rem;
border-radius: var(--radius-pill);
background: var(--c-n-100);
color: var(--color-text-muted);
font-size: var(--text-caption);
font-weight: var(--weight-medium);
}
.filters__quick-link:hover{
background: var(--c-primary-50);
color: var(--c-primary-800);
}
.filters__date{display: block;margin-top: var(--space-3);}
.filters__date.is-hidden{display: none;}
.filters__actions{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.filters__reset{
text-align: center;
font-size: var(--text-label);
font-weight: var(--weight-medium);
}
.filter-drawer{
position: fixed;
inset: 0;
z-index: var(--z-overlay);
display: flex;
align-items: flex-end;
justify-content: center;
}
.filter-drawer__panel{
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: 560px;
max-height: 92dvh;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
background: var(--color-surface);
box-shadow: var(--shadow-xl);
animation: drawer-up var(--t-slow) var(--ease-out);
}
.filter-drawer__head{
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
}
.filter-drawer__title{
font-size: var(--text-h4);
}
.filter-drawer__body{
padding: var(--space-5);
overflow-y: auto;
}
.filter-drawer__backdrop{
position: absolute;
inset: 0;
background: rgba(16, 24, 40, 0.45);
animation: fade-in var(--t-base) var(--ease-out);
}
@keyframes drawer-up{
from{transform: translateY(24px);opacity: 0;}
to{transform: translateY(0);opacity: 1;}
}
.directory__results.is-loading{
opacity: 0.55;
transition: opacity var(--t-base) var(--ease-out);
}
.teacher-card--skeleton{
display: grid;
grid-template-columns: auto minmax(0, 1fr) 232px;
gap: var(--space-6);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
}
@media (max-width: 1180px){
.directory__layout{grid-template-columns: 272px minmax(0, 1fr);gap: var(--space-6);}
}
@media (max-width: 1024px){
.directory__layout{grid-template-columns: minmax(0, 1fr);}
.directory__sidebar{display: none;}
.directory__filters-button{display: inline-flex;}
}
@media (max-width: 760px){
.directory__search{grid-template-columns: minmax(0, 1fr);}
.directory__search .btn{width: 100%;}
.directory__toolbar{align-items: stretch;}
.directory__toolbar-actions{justify-content: space-between;}
.directory__sort{flex: 1 1 auto;}
}
@media (max-width: 560px){
.directory{padding-top: var(--space-4);}
.directory__search{padding: var(--space-3);}
.filters__checks--grades{grid-template-columns: repeat(2, minmax(0, 1fr));}
.active-filters{padding: var(--space-3);}
.active-filters__clear{margin-left: 0;}
.directory__sort-label{display: none;}
}
.subjects{padding-block: var(--space-6) var(--section-y);}
.subjects__head{
max-width: 780px;
margin-bottom: var(--space-10);
}
.subjects__title{font-size: var(--text-h1);margin-bottom: var(--space-3);}
.subjects__subtitle{
color: var(--color-text-muted);
font-size: var(--text-sm);
margin-bottom: var(--space-6);
}
.subjects__search{
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.subjects__search-field{position: relative;}
.subjects__search-icon{
position: absolute;
left: 0.875rem;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
color: var(--color-text-subtle);
pointer-events: none;
}
.subjects__search-input{
width: 100%;
min-height: 50px;
padding: 0.75rem 1rem 0.75rem 2.75rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
font-size: var(--text-sm);
}
.subjects__search-input:focus{
outline: none;
border-color: var(--color-primary);
box-shadow: var(--shadow-focus);
}
.subjects__search .search-suggest{top: calc(100% + 6px);left: 0;right: 0;}
.subjects__stats{
display: flex;
flex-wrap: wrap;
gap: var(--space-5);
margin-top: var(--space-5);
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.subjects__stats strong{
color: var(--color-text);
font-family: var(--font-display);
font-size: var(--text-h4);
font-weight: var(--weight-extrabold);
margin-right: var(--space-1);
}
.subjects__category{margin-bottom: var(--space-12);}
.subjects__category-head{
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--space-4);
align-items: center;
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.subjects__category-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
}
.subjects__category-title{font-size: var(--text-h3);}
.subjects__category-text{color: var(--color-text-muted);font-size: var(--text-xs);margin-top: var(--space-1);}
.subjects__category-meta{
margin: 0;
color: var(--color-text-subtle);
font-size: var(--text-label);
white-space: nowrap;
}
.subjects__cta{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
margin-top: var(--space-10);
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: linear-gradient(180deg, var(--c-n-25), var(--color-surface));
}
.subjects__cta-text h2{font-size: var(--text-h3);margin-bottom: var(--space-2);}
.subjects__cta-text p{margin: 0;color: var(--color-text-muted);font-size: var(--text-xs);}
.subjects__cta-actions{display: flex;flex-wrap: wrap;gap: var(--space-3);}
.subject-card__counts{
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin-top: auto;
padding-top: var(--space-3);
}
.subject-card__count{
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-subtle);
font-size: var(--text-label);
font-weight: var(--weight-medium);
}
.subject-card__count svg{color: var(--c-n-400);}
.subject-card__count--muted{color: var(--c-n-400);font-style: italic;}
.subject-card__cta{
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px dashed var(--color-border);
color: var(--color-primary);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.subject-card:hover .subject-card__cta svg{transform: translateX(2px);}
.subject-card__cta svg{transition: transform var(--t-fast) var(--ease-out);}
.subject-page{padding-block: var(--space-6) var(--section-y);}
.subject-hero{
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: start;
padding: clamp(1.75rem, 4vw, 3rem);
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
background:
radial-gradient(700px 320px at 88% 0%, var(--c-primary-50) 0%, rgba(238, 240, 254, 0) 62%),
linear-gradient(180deg, var(--c-n-25), var(--color-surface));
}
.subject-hero--teal{background: radial-gradient(700px 320px at 88% 0%, var(--c-tone-teal-bg) 0%, rgba(230, 248, 245, 0) 62%), linear-gradient(180deg, var(--c-n-25), var(--color-surface));}
.subject-hero--amber{background: radial-gradient(700px 320px at 88% 0%, var(--c-tone-amber-bg) 0%, rgba(253, 243, 230, 0) 62%), linear-gradient(180deg, var(--c-n-25), var(--color-surface));}
.subject-hero--violet{background: radial-gradient(700px 320px at 88% 0%, var(--c-tone-violet-bg) 0%, rgba(243, 238, 254, 0) 62%), linear-gradient(180deg, var(--c-n-25), var(--color-surface));}
.subject-hero--rose{background: radial-gradient(700px 320px at 88% 0%, var(--c-tone-rose-bg) 0%, rgba(253, 236, 241, 0) 62%), linear-gradient(180deg, var(--c-n-25), var(--color-surface));}
.subject-hero--sky{background: radial-gradient(700px 320px at 88% 0%, var(--c-tone-sky-bg) 0%, rgba(232, 243, 254, 0) 62%), linear-gradient(180deg, var(--c-n-25), var(--color-surface));}
.subject-hero--emerald{background: radial-gradient(700px 320px at 88% 0%, var(--c-tone-emerald-bg) 0%, rgba(231, 245, 239, 0) 62%), linear-gradient(180deg, var(--c-n-25), var(--color-surface));}
.subject-hero__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: var(--space-4);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-primary-hover);
box-shadow: var(--shadow-xs);
}
.subject-hero__eyebrow{
margin-bottom: var(--space-2);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.subject-hero__title{font-size: var(--text-h1);margin-bottom: var(--space-4);}
.subject-hero__text{
max-width: 62ch;
color: var(--color-text-muted);
font-size: var(--text-sm);
margin-bottom: var(--space-6);
}
.subject-hero__actions{display: flex;flex-wrap: wrap;gap: var(--space-3);}
.subject-hero__facts{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
margin: 0;
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
}
.subject-hero__facts div{display: flex;flex-direction: column;gap: var(--space-1);}
.subject-hero__facts dt{
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-subtle);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.subject-hero__facts dt svg{color: var(--c-n-400);}
.subject-hero__facts dd{
margin: 0;
font-family: var(--font-display);
font-size: var(--text-h4);
font-weight: var(--weight-bold);
}
.audience-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: var(--space-4);
margin-bottom: var(--space-6);
}
.audience-card{
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
text-align: center;
}
.audience-card__level{
margin: 0 0 var(--space-1);
font-family: var(--font-display);
font-size: var(--text-h4);
font-weight: var(--weight-bold);
}
.audience-card__count{margin: 0;color: var(--color-text-muted);font-size: var(--text-label);}
.subject-links{
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.subject-links__item{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.5rem 0.875rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.subject-links__item:hover{
border-color: var(--c-primary-300);
background: var(--c-primary-50);
color: var(--c-primary-800);
}
.subject-links__item svg{color: var(--color-primary);}
.subject-links__count{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 20px;
padding: 0 6px;
border-radius: var(--radius-pill);
background: var(--c-n-100);
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
@media (max-width: 900px){
.subject-hero{grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 760px){
.subjects__search{grid-template-columns: minmax(0, 1fr);}
.subjects__search .btn{width: 100%;}
.subjects__category-head{grid-template-columns: auto minmax(0, 1fr);}
.subjects__category-meta{grid-column: 1 / -1;}
}
@media (max-width: 560px){
.subject-hero{padding: var(--space-5);}
.subject-hero__facts{grid-template-columns: minmax(0, 1fr);}
.subjects__cta{flex-direction: column;align-items: stretch;}
.subjects__cta-actions{flex-direction: column;}
.subjects__cta-actions .btn{width: 100%;}
}
.profile{padding-block: var(--space-6) var(--section-y);}
.profile__head{
display: grid;
grid-template-columns: 260px minmax(0, 1fr) 340px;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: start;
padding-bottom: var(--space-8);
border-bottom: 1px solid var(--color-border);
}
.profile__photo{
width: 260px;
height: 325px;
border-radius: var(--radius-xl);
overflow: hidden;
background: linear-gradient(150deg, var(--c-primary-100), var(--c-accent-100));
box-shadow: var(--shadow-md);
}
.profile__photo img{width: 100%;height: 100%;object-fit: cover;object-position: center 18%;}
.profile__photo--placeholder{display: flex;align-items: center;justify-content: center;}
.profile__initials{
font-family: var(--font-display);
font-size: 4rem;
font-weight: var(--weight-extrabold);
color: var(--c-primary-800);
}
.profile__ident{min-width: 0;}
.profile__name{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
font-size: var(--text-h1);
margin-bottom: var(--space-3);
}
.profile__verified{
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.25rem 0.625rem;
border-radius: var(--radius-pill);
background: var(--color-accent-soft);
color: var(--c-accent-700);
font-family: var(--font-sans);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.profile__rating-row{
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
margin-bottom: var(--space-4);
}
.profile__reviews-link{font-size: var(--text-label);font-weight: var(--weight-medium);}
.profile__headline{
max-width: 62ch;
margin-bottom: var(--space-5);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.profile__facts{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-4);
margin: var(--space-5) 0;
padding: var(--space-5) 0;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.profile__facts div{display: flex;flex-direction: column;gap: 2px;}
.profile__facts dt{
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-subtle);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.profile__facts dt svg{color: var(--c-n-400);}
.profile__facts dd{margin: 0;font-size: var(--text-xs);font-weight: var(--weight-semibold);}
.profile__cta{display: flex;align-items: center;gap: var(--space-3);flex-wrap: wrap;}
.profile__aside--sticky{
position: sticky;
top: calc(var(--header-h) + var(--space-4));
}
.profile__layout{padding-top: var(--space-10);}
.profile__main{max-width: 860px;}
.profile__section{margin-bottom: var(--space-10);scroll-margin-top: calc(var(--header-h) + 16px);}
.profile__section-title{
font-size: var(--text-h3);
margin-bottom: var(--space-4);
}
.profile__prose p{color: var(--color-text-muted);font-size: var(--text-sm);line-height: var(--leading-relaxed);}
.profile__prose p + p{margin-top: var(--space-4);}
.profile__label{
margin: var(--space-5) 0 var(--space-3);
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.profile__tags{display: flex;flex-wrap: wrap;gap: var(--space-2);}
.profile__table-wrap{
overflow-x: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.profile__table{min-width: 620px;}
.profile__empty,
.profile__note{
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.profile__note{margin-top: var(--space-5);color: var(--color-text-subtle);}
.profile__empty svg,
.profile__note svg{flex: 0 0 auto;margin-top: 2px;}
.profile__gallery{display: grid;grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));gap: var(--space-4);}
.profile__gallery-item{margin: 0;}
.profile__gallery-item img{border-radius: var(--radius-md);width: 100%;height: auto;}
.profile__gallery-item figcaption{margin-top: var(--space-2);color: var(--color-text-subtle);font-size: var(--text-caption);}
.timeline{display: flex;flex-direction: column;gap: var(--space-5);}
.timeline__item{
position: relative;
padding-left: var(--space-6);
border-left: 2px solid var(--c-n-200);
}
.timeline__item::before{
content: '';
position: absolute;
left: -7px;
top: 6px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--color-primary);
border: 2px solid var(--color-surface);
}
.timeline__title{
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
margin: 0;
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}
.timeline__badge{
padding: 0.125rem 0.5rem;
border-radius: var(--radius-pill);
background: var(--c-primary-50);
color: var(--c-primary-800);
font-family: var(--font-sans);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
.timeline__meta{margin: var(--space-1) 0 0;color: var(--color-text-subtle);font-size: var(--text-label);}
.timeline__text{margin: var(--space-2) 0 0;color: var(--color-text-muted);font-size: var(--text-xs);}
.reviews-summary{
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: var(--space-8);
align-items: center;
padding: var(--space-6);
margin-bottom: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.reviews-summary__score{text-align: center;}
.reviews-summary__value{
margin: 0 0 var(--space-2);
font-family: var(--font-display);
font-size: var(--text-h1);
font-weight: var(--weight-extrabold);
line-height: 1;
}
.reviews-summary__count{margin: var(--space-2) 0 0;color: var(--color-text-muted);font-size: var(--text-label);}
.reviews-summary__bars{display: flex;flex-direction: column;gap: var(--space-2);}
.reviews-summary__bars li{
display: grid;
grid-template-columns: 56px minmax(0, 1fr) 40px;
gap: var(--space-3);
align-items: center;
font-size: var(--text-label);
}
.reviews-summary__stars{display: inline-flex;align-items: center;gap: 4px;color: var(--color-text-subtle);}
.reviews-summary__stars svg{color: #F5A524;}
.reviews-summary__number{color: var(--color-text-muted);text-align: right;font-variant-numeric: tabular-nums;}
.reviews{display: flex;flex-direction: column;gap: var(--space-4);}
.review{
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.review__head{display: flex;align-items: center;gap: var(--space-3);margin-bottom: var(--space-3);}
.review__head > div:nth-child(2){flex: 1 1 auto;}
.review__author{margin: 0;font-size: var(--text-xs);font-weight: var(--weight-semibold);}
.review__meta{margin: 0;color: var(--color-text-subtle);font-size: var(--text-caption);}
.review__text{margin: 0;color: var(--color-text-muted);font-size: var(--text-xs);line-height: var(--leading-relaxed);}
.review__criteria{display: flex;flex-wrap: wrap;gap: var(--space-2);margin-top: var(--space-4);}
:root{--mobile-cta-h: 80px;}
.profile__mobile-cta{
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-header);
display: none;
min-height: var(--mobile-cta-h);
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-3) var(--container-pad);
padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(10px);
box-shadow: 0 -8px 24px -12px rgba(16, 24, 40, 0.18);
}
.profile__mobile-price{
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
}
.profile__mobile-price-circle{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: var(--space-12);
height: var(--space-12);
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
}
.profile__mobile-price-circle strong{
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-tight);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.profile__mobile-subject{
color: var(--color-text-muted);
font-size: var(--text-caption);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.profile__mobile-price-ask{font-size: var(--text-h4);}
.profile__mobile-cta [data-booking-open]{
animation: cta-pulse 2.6s var(--ease-in-out) infinite;
}
@media (prefers-reduced-motion: reduce){
.profile__mobile-cta [data-booking-open]{animation: none;}
}
.booking{
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
.booking__head{margin-bottom: var(--space-4);padding-bottom: var(--space-4);border-bottom: 1px solid var(--color-border);}
.booking__price{display: flex;align-items: baseline;gap: var(--space-2);flex-wrap: wrap;margin: 0;}
.booking__price-label{color: var(--color-text-subtle);font-size: var(--text-label);}
.booking__price-value{
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--weight-extrabold);
letter-spacing: var(--tracking-tight);
}
.booking__price-unit{color: var(--color-text-subtle);font-size: var(--text-label);}
.booking [data-booking-submit]:not(.is-loading):not([aria-disabled="true"]){
animation: cta-pulse 2.6s var(--ease-in-out) infinite;
}
@media (prefers-reduced-motion: reduce){
.booking [data-booking-submit]:not(.is-loading):not([aria-disabled="true"]){animation: none;}
}
.booking__subject-img{
flex: none;
align-self: center;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
object-fit: cover;
}
.booking__note{
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: var(--space-2) 0 0;
color: var(--c-success);
font-size: var(--text-label);
}
.booking__step{margin-bottom: var(--space-5);}
.booking__step-title{
display: flex;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-3);
color: var(--color-text);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.booking__step-title span{
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--color-primary-soft);
color: var(--color-primary-hover);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
}
.booking__modes{display: flex;gap: var(--space-4);flex-wrap: wrap;}
.booking__dates{
display: flex;
gap: var(--space-2);
overflow-x: auto;
padding-bottom: var(--space-2);
scroll-snap-type: x proximity;
}
.booking__date{
flex: 0 0 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 84px;
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--text-label);
text-align: center;
scroll-snap-align: start;
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.booking__date:hover{border-color: var(--c-primary-300);}
.booking__date.is-active{border-color: var(--color-primary);background: var(--color-primary);color: var(--c-white);}
.booking__date-label{font-weight: var(--weight-semibold);}
.booking__date-slots{font-size: var(--text-caption);opacity: 0.8;}
.booking__slots{display: flex;flex-wrap: wrap;gap: var(--space-2);}
.booking__slots.is-hidden{display: none;}
.booking__slot{
padding: 0.5rem 0.875rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
transition: all var(--t-fast) var(--ease-out);
}
.booking__slot:hover{border-color: var(--color-primary);color: var(--color-primary-hover);}
.booking__slot.is-active{border-color: var(--color-primary);background: var(--color-primary);color: var(--c-white);}
.booking__message{
margin-top: var(--space-4);
padding: var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-xs);
border: 1px solid var(--c-info-line);
background: var(--c-info-bg);
color: var(--c-n-800);
}
.booking__message.is-error{border-color: var(--c-error-line);background: var(--c-error-bg);color: var(--c-error);}
.booking__message.is-success{border-color: var(--c-success-line);background: var(--c-success-bg);color: var(--c-success);}
.booking__message a{font-weight: var(--weight-semibold);}
.booking__empty{
display: flex;
gap: var(--space-2);
margin-bottom: var(--space-4);
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.booking__fineprint{
display: flex;
gap: var(--space-2);
margin: var(--space-4) 0 0;
padding-top: var(--space-4);
border-top: 1px dashed var(--color-border);
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.booking__fineprint svg{flex: 0 0 auto;margin-top: 2px;}
.booking-modal{
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: flex-end;
justify-content: center;
}
.booking-modal__panel{
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
width: 100%;
max-width: 560px;
max-height: 92dvh;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
background: var(--bg, var(--color-bg-subtle));
box-shadow: var(--shadow-xl);
animation: drawer-up var(--t-slow) var(--ease-out);
}
.booking-modal__head{
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.booking-modal__title{font-size: var(--text-h4);}
.booking-modal__body{padding: var(--space-5);overflow-y: auto;}
.booking-modal__backdrop{position: absolute;inset: 0;background: rgba(16, 24, 40, 0.45);animation: fade-in var(--t-base) var(--ease-out);}
@media (min-width: 641px){
.booking-modal{align-items: center;padding: var(--space-6);}
.booking-modal__panel{border-radius: var(--radius-xl);}
.booking-modal__head{border-radius: var(--radius-xl) var(--radius-xl) 0 0;}
}
.auth{padding-block: var(--section-y-tight) var(--section-y);}
.auth__container{
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: var(--space-10);
align-items: start;
}
.auth__container--wide{grid-template-columns: minmax(0, 1fr);max-width: 960px;}
.auth__head{max-width: 640px;margin-bottom: var(--space-8);}
.auth__card{
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
}
.auth__eyebrow{
margin-bottom: var(--space-2);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.auth__title{font-size: var(--text-h2);margin-bottom: var(--space-3);}
.auth__lead{color: var(--color-text-muted);font-size: var(--text-sm);margin-bottom: var(--space-6);}
.auth__form{margin-top: var(--space-6);}
.auth__grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-5);
margin-bottom: var(--space-6);
}
.field--wide{grid-column: 1 / -1;}
.auth__consents{
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-bottom: var(--space-6);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
}
.auth__switch{margin: var(--space-6) 0 0;color: var(--color-text-muted);font-size: var(--text-xs);}
.auth__side{
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-bg-subtle);
}
.auth__side-title{font-size: var(--text-h4);margin-bottom: var(--space-4);}
.auth__list{display: flex;flex-direction: column;gap: var(--space-3);}
.auth__list li{display: flex;align-items: flex-start;gap: var(--space-2);font-size: var(--text-xs);color: var(--color-text-muted);}
.auth__list svg{color: var(--color-primary);flex: 0 0 auto;margin-top: 2px;}
.auth__side-note{margin: var(--space-5) 0 0;padding-top: var(--space-4);border-top: 1px dashed var(--color-border);color: var(--color-text-subtle);font-size: var(--text-caption);}
.auth__intent{
display: flex;
gap: var(--space-3);
margin-bottom: var(--space-5);
padding: var(--space-4);
border: 1px solid var(--c-accent-100);
border-radius: var(--radius-md);
background: var(--color-accent-soft);
color: var(--c-accent-700);
font-size: var(--text-xs);
}
.auth__intent svg{flex: 0 0 auto;}
.auth__intent-title{margin: 0;font-weight: var(--weight-semibold);}
.auth__intent-text{margin: 0;color: var(--color-text-muted);}
.auth__roles{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: var(--space-5);}
.auth-role{
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
padding: clamp(1.25rem, 2.4vw, 1.75rem);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
color: var(--color-text);
box-shadow: var(--shadow-xs);
transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.auth-role:hover{transform: translateY(-3px);box-shadow: var(--shadow-md);border-color: var(--c-primary-200);color: var(--color-text);}
.auth-role__figure{
display: flex;
justify-content: center;
width: 100%;
}
.auth-role__figure img{
display: block;
width: min(100%, 170px);
height: auto;
}
.auth-role__body{
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: var(--space-3);
width: 100%;
min-width: 0;
}
.auth-role__title{font-size: var(--text-h3);}
.auth-role__text{color: var(--color-text-muted);font-size: var(--text-xs);}
.auth-role__list{display: flex;flex-direction: column;gap: var(--space-2);margin-top: auto;}
.auth-role__list li{display: flex;align-items: center;gap: var(--space-2);font-size: var(--text-xs);color: var(--color-text-muted);}
.auth-role__list svg{color: var(--color-accent);}
.auth-role__cta{display: inline-flex;align-items: center;gap: var(--space-2);margin-top: var(--space-4);color: var(--color-primary);font-size: var(--text-xs);font-weight: var(--weight-semibold);}
.auth__steps{display: flex;gap: var(--space-4);flex-wrap: wrap;margin-bottom: var(--space-6);}
.auth__steps li{
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-text-subtle);
font-size: var(--text-label);
}
.auth__steps li span{
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--c-n-100);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
}
.auth__steps li.is-active{color: var(--color-text);font-weight: var(--weight-semibold);}
.auth__steps li.is-active span{background: var(--color-primary);color: var(--c-white);}
.dropdown__head{
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-3);
margin-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border);
}
.dropdown__role{
color: var(--color-primary-hover);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
}
.dropdown__head .dropdown__name,
.dropdown__head strong{font-size: var(--text-body);line-height: 1.25;}
.dropdown__email{
color: var(--color-text);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
overflow-wrap: anywhere;
}
.dropdown__head small{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dropdown__item--button{width: 100%;text-align: left;font: inherit;}
.mobile-nav__account{
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-3);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.flash-wrap{padding-top: var(--space-4);}
@media (max-width: 1180px){
.profile__head{grid-template-columns: 220px minmax(0, 1fr);}
.profile__photo{width: 220px;height: 275px;}
.profile__aside--sticky{
grid-column: 1 / -1;
position: static;
max-width: 520px;
}
}
@media (max-width: 1024px){
.auth__container{grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 768px){
.profile__head{grid-template-columns: minmax(0, 1fr);}
.profile__photo{width: 168px;height: 210px;}
.profile__aside--sticky{display: none;}
.profile__mobile-cta{display: flex;}
.profile{padding-bottom: calc(var(--section-y) + 72px);}
.reviews-summary{grid-template-columns: minmax(0, 1fr);gap: var(--space-5);}
.auth__grid{grid-template-columns: minmax(0, 1fr);}
.auth__roles{grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 560px){
.profile__name{font-size: var(--text-h2);}
.profile__facts{grid-template-columns: repeat(2, minmax(0, 1fr));}
.booking{padding: var(--space-4);}
.reviews-summary{padding: var(--space-4);}
}
.profile__layout{
display: grid;
grid-template-columns: minmax(0, 1fr) 384px;
gap: clamp(var(--space-6), 3vw, var(--space-10));
align-items: stretch;
}
.profile-hero{margin-bottom: var(--space-6);}
.profile-hero__identity{
display: grid;
grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
gap: clamp(var(--space-4), 2vw, var(--space-6));
align-items: start;
padding: 0;
}
.profile-hero__photo{
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
overflow: hidden;
}
.profile-hero__photo img{display: block;width: 100%;height: 100%;object-fit: cover;}
.profile-hero__photo--placeholder,
.profile-hero__initials{
display: flex;
align-items: center;
justify-content: center;
}
.profile-hero__initials{
width: 100%;
height: 100%;
color: var(--color-primary);
font-family: var(--font-display);
font-size: var(--text-h1);
font-weight: var(--weight-bold);
}
.profile-hero__intro{display: flex;flex-direction: column;gap: var(--space-3);min-width: 0;}
.profile-hero__name{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin: 0;
font-size: var(--text-h2);
}
.profile-hero__verified{
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.25rem 0.6rem;
border-radius: var(--radius-pill);
background: var(--c-success-bg);
color: var(--c-success);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
.profile-hero__metrics{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-4);
margin: 0;
padding: 0;
list-style: none;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.profile-hero__metric{display: inline-flex;align-items: center;gap: var(--space-2);}
.profile-hero__metric strong{color: var(--color-text);}
.profile-hero__metric--rating{color: var(--color-text);}
.profile-hero__facts{
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin: 0;
padding: 0;
list-style: none;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.profile-hero__facts li{display: inline-flex;align-items: center;gap: var(--space-1);}
.profile-hero__lead{
margin: 0;
max-width: 62ch;
color: var(--color-text);
font-size: var(--text-lg);
line-height: 1.6;
}
.profile-hero__trust{
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin: 0;
padding-top: var(--space-2);
list-style: none;
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.profile-hero__trust li{display: inline-flex;align-items: center;gap: var(--space-1);}
.profile-booking{align-self: stretch;}
#booking{scroll-margin-top: calc(var(--header-h) + 72px);}
.profile-booking__card{
position: sticky;
top: calc(var(--header-h) + var(--space-4));
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
.profile-booking__head{display: flex;align-items: center;justify-content: space-between;gap: var(--space-3);}
.profile-booking__title{margin: 0;font-size: var(--text-h3);}
.profile-booking__fav{margin: 0;}
.profile-booking__fav .heart-btn{
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.35rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
cursor: pointer;
}
.profile-booking__fav .heart-btn.is-active{border-color: var(--c-danger-line, var(--color-primary));color: var(--c-danger, var(--color-primary));background: var(--color-primary-soft);}
.profile-booking__earliest{
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: var(--c-success-bg);
color: var(--c-success);
font-size: var(--text-caption);
}
.profile-booking__earliest--empty{background: var(--c-warning-bg);color: var(--c-warning);}
.profile-booking__trust{display: flex;align-items: center;gap: var(--space-2);margin: 0;color: var(--color-text-subtle);font-size: var(--text-caption);}
.profile-booking__edit{margin-top: var(--space-1);}
.profile-booking .booking{padding: 0;border: 0;box-shadow: none;background: transparent;}
.profile-anchors{
position: sticky;
top: var(--header-h);
z-index: 5;
margin: var(--space-5) 0 var(--space-8);
border-block: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(8px);
}
.profile-anchors ul{
display: flex;
align-items: center;
gap: var(--space-1);
margin: 0;
padding: var(--space-2) 0;
list-style: none;
overflow-x: auto;
scrollbar-width: thin;
scrollbar-color: var(--c-primary-300) var(--c-n-100);
}
.profile-anchors ul::-webkit-scrollbar{height: 6px;}
.profile-anchors ul::-webkit-scrollbar-track{background: var(--c-n-100);border-radius: var(--radius-pill);}
.profile-anchors ul::-webkit-scrollbar-thumb{background: var(--c-primary-300);border-radius: var(--radius-pill);}
.profile-anchors ul::-webkit-scrollbar-thumb:hover{background: var(--color-primary);}
.profile-anchors a{
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.5rem 0.9rem;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--c-white);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
white-space: nowrap;
box-shadow: var(--shadow-xs);
transition: background var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.profile-anchors a:hover,
.profile-anchors a:focus-visible{
background: var(--color-primary-hover);
color: var(--c-white);
box-shadow: var(--shadow-sm);
}
.profile-anchors::after{
content: '';
position: absolute;
inset-block: 0;
right: 0;
width: 64px;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.96));
pointer-events: none;
opacity: 0;
transition: opacity var(--t-fast) var(--ease-out);
}
.profile-anchors.is-scrollable::after{opacity: 1;}
.profile-anchors__more{
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--color-primary);
color: var(--c-white);
box-shadow: var(--shadow-sm);
cursor: pointer;
}
.profile-anchors__more[hidden]{display: none;}
.profile-anchors__more:hover{background: var(--color-primary-hover);}
.profile-anchors__cta{margin-left: auto;}
.profile__content{display: flex;flex-direction: column;gap: var(--space-10);}
.profile__section{scroll-margin-top: calc(var(--header-h) + 64px);}
.profile__section-head{display: flex;flex-wrap: wrap;align-items: baseline;justify-content: space-between;gap: var(--space-3);}
.profile__section-note{margin: 0;color: var(--color-text-muted);font-size: var(--text-sm);}
.profile__section-link{color: var(--color-primary);font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.profile__more > summary{cursor: pointer;color: var(--color-primary);font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.profile__more[open] > summary{margin-bottom: var(--space-2);}
.profile__more .profile__more-close{display: none;}
.profile__more[open] .profile__more-close{display: inline;}
.profile__more[open] .profile__more-open{display: none;}
.profile__prose{max-width: 74ch;}
.profile__prose p{margin: 0 0 var(--space-4);line-height: 1.75;}
.subject-cards{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: var(--space-4);}
.subject-card{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.subject-card:hover{border-color: var(--c-primary-200);box-shadow: var(--shadow-sm);}
.subject-card__head{display: flex;align-items: center;gap: var(--space-3);}
.subject-card__top{display: flex;align-items: center;gap: var(--space-3);}
.subject-card__title{margin: 0;font-size: var(--text-h4);}
.subject-card__grades{
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-label);
font-weight: var(--weight-medium);
}
.subject-card__facts{display: flex;flex-wrap: wrap;gap: var(--space-1);margin: 0;padding: 0;list-style: none;}
.subject-card__facts li{
padding: 2px 9px;
border-radius: var(--radius-pill);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
font-size: var(--text-caption);
font-weight: var(--weight-medium);
white-space: nowrap;
}
.subject-card__facts li.is-level{background: var(--color-primary-soft);color: var(--c-primary-800);}
.subject-card__mode{display: inline-flex;align-items: center;gap: var(--space-2);margin: 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.subject-card__price{display: flex;align-items: baseline;gap: var(--space-2);margin: auto 0 0;}
.subject-card__price strong{font-family: var(--font-display);font-size: var(--text-h3);}
.subject-card__price span{color: var(--color-text-muted);font-size: var(--text-caption);}
.subject-card__icon{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--c-primary-50);
color: var(--color-primary);
}
.subject-card__img{
flex: none;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
object-fit: cover;
}
.subject-card__icon--teal{background: var(--c-tone-teal-bg);color: var(--c-tone-teal-fg);}
.subject-card__icon--amber{background: var(--c-tone-amber-bg);color: var(--c-tone-amber-fg);}
.subject-card__icon--violet{background: var(--c-tone-violet-bg);color: var(--c-tone-violet-fg);}
.subject-card__icon--rose{background: var(--c-tone-rose-bg);color: var(--c-tone-rose-fg);}
.subject-card__icon--sky{background: var(--c-tone-sky-bg);color: var(--c-tone-sky-fg);}
.subject-card__icon--emerald{background: var(--c-tone-emerald-bg);color: var(--c-tone-emerald-fg);}
.profile__tags{display: flex;flex-wrap: wrap;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.profile__tags--big{gap: var(--space-3);}
.chip--prep{display: inline-flex;align-items: center;gap: var(--space-2);padding: 0.5rem 0.9rem;border-radius: var(--radius-pill);background: var(--color-primary-soft);color: var(--c-primary-800);font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.method-cards{display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: var(--space-4);margin: 0;padding: 0;list-style: none;}
.method-card{display: flex;align-items: flex-start;gap: var(--space-3);padding: var(--space-4);border: 1px solid var(--color-border);border-radius: var(--radius-lg);background: var(--color-surface);font-size: var(--text-sm);}
.method-card__icon{flex: none;color: var(--color-accent);}
.xtimeline{display: flex;flex-direction: column;gap: var(--space-5);margin: 0;padding: 0 0 0 var(--space-5);list-style: none;border-left: 2px solid var(--color-border);}
.xtimeline__item{position: relative;}
.xtimeline__dot{position: absolute;left: calc(-1 * var(--space-5) - 6px);top: 6px;width: 10px;height: 10px;border-radius: 50%;background: var(--color-primary);}
.xtimeline__title{margin: 0;font-weight: var(--weight-bold);}
.xtimeline__meta{margin: 2px 0 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.xtimeline__text{margin: var(--space-2) 0 0;color: var(--color-text-muted);font-size: var(--text-sm);line-height: 1.65;}
.edu-cards{display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: var(--space-4);margin: 0;padding: 0;list-style: none;}
.edu-card{display: flex;align-items: flex-start;gap: var(--space-3);padding: var(--space-4);border: 1px solid var(--color-border);border-radius: var(--radius-lg);background: var(--color-surface);}
.edu-card__icon{display: inline-flex;flex: none;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: var(--radius-md);background: var(--color-primary-soft);color: var(--color-primary);}
.edu-card__body{min-width: 0;}
.edu-card__title{margin: 0;font-weight: var(--weight-semibold);}
.edu-card__meta{margin: 2px 0 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.edu-card__text{margin: var(--space-2) 0 0;color: var(--color-text-muted);font-size: var(--text-sm);}
.edu-card__badge{margin-left: auto;padding: 0.2rem 0.6rem;border-radius: var(--radius-pill);background: var(--color-bg-subtle);color: var(--color-text-muted);font-size: var(--text-caption);font-weight: var(--weight-semibold);}
.rating-summary{display: grid;grid-template-columns: minmax(0, 200px) minmax(0, 1fr);gap: var(--space-6);align-items: center;padding: var(--space-5);margin-bottom: var(--space-5);border: 1px solid var(--color-border);border-radius: var(--radius-xl);background: var(--color-surface);}
.rating-summary__score{text-align: center;}
.rating-summary__value{margin: 0;font-family: var(--font-display);font-size: 3rem;font-weight: var(--weight-bold);line-height: 1;}
.rating-summary__count{margin: var(--space-1) 0 0;color: var(--color-text);font-weight: var(--weight-semibold);}
.rating-summary__note{display: flex;align-items: center;justify-content: center;gap: var(--space-1);margin: var(--space-2) 0 0;color: var(--color-text-subtle);font-size: var(--text-caption);}
.rating-summary__bars{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.rating-summary__bars li{display: grid;grid-template-columns: 42px minmax(0, 1fr) 44px;align-items: center;gap: var(--space-3);font-size: var(--text-caption);color: var(--color-text-muted);}
.rating-summary__stars{display: inline-flex;align-items: center;gap: 2px;}
.rating-summary__bar{height: 8px;}
.rating-summary__percent{text-align: right;}
.review__ident{min-width: 0;}
.review__right{display: flex;flex-direction: column;align-items: flex-end;gap: var(--space-1);margin-left: auto;}
.review__verified{display: inline-flex;align-items: center;gap: 3px;padding: 0.15rem 0.5rem;border-radius: var(--radius-pill);background: var(--c-success-bg);color: var(--c-success);font-size: 11px;font-weight: var(--weight-semibold);}
.profile__related{margin-top: var(--space-12);padding-block: var(--space-10);background: var(--color-bg-subtle);}
.profile__cta-final{margin-top: var(--space-12);}
.profile__cta-panel{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: var(--space-5);padding: clamp(var(--space-6), 3vw, var(--space-10));border-radius: var(--radius-xl);background: linear-gradient(135deg, var(--c-primary-600), var(--c-primary-800));color: #fff;}
.profile__cta-title{margin: 0;color: #fff;font-size: var(--text-h2);}
.profile__cta-text{margin: var(--space-2) 0 0;color: rgba(255, 255, 255, 0.85);}
@media (max-width: 1180px){
.profile__layout{grid-template-columns: minmax(0, 1fr) 340px;}
}
@media (max-width: 1024px){
body:has(.profile__mobile-cta) .to-top{display: none;}
.profile__layout{grid-template-columns: minmax(0, 1fr);}
.profile-booking{display: none;}
.profile-hero__identity{grid-template-columns: minmax(0, 220px) minmax(0, 1fr);}
.subject-cards{grid-template-columns: minmax(0, 1fr);}
.rating-summary{grid-template-columns: minmax(0, 1fr);text-align: left;}
.rating-summary__score{text-align: left;}
}
@media (max-width: 700px){
.profile-hero__identity{grid-template-columns: minmax(0, 1fr);}
.profile-hero__photo{max-width: 260px;}
.profile__section-title{font-size: var(--text-h3);}
.profile__related, .profile__cta-final{margin-top: var(--space-8);}
.profile__cta-panel{flex-direction: column;align-items: flex-start;}
}
.profile-booking .booking{gap: var(--space-3);}
.profile-booking .booking__head{flex-direction: row;align-items: baseline;justify-content: space-between;gap: var(--space-2);}
.profile-booking .booking__note{display: none;}
.profile-booking .booking__form{gap: var(--space-2);}
.profile-booking .booking__step{gap: var(--space-1);}
.profile-booking .booking__step-title{margin: 0 0 2px;font-size: var(--text-caption);}
.profile-booking .booking__dates{gap: var(--space-1);}
.profile-booking .booking__date{padding: var(--space-1) var(--space-2);}
.profile-booking .booking__date-label{font-size: var(--text-caption);}
.profile-booking .booking__date-slots{font-size: 11px;}
.profile-booking .booking__slots{gap: var(--space-1);}
.profile-booking .booking__slot{padding: var(--space-1) var(--space-2);font-size: var(--text-caption);}
.profile-booking .booking__fineprint{margin-top: 0;font-size: 11px;line-height: 1.35;}
.profile-booking .booking__price-value{font-size: var(--text-h3);}
.profile-booking textarea.textarea{min-height: 44px;}
.profile-hero__assure{
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
color: var(--color-text-muted);
font-size: var(--text-caption);
}
.profile-hero__assure li{display: inline-flex;align-items: center;gap: var(--space-2);}
.subject-cards{grid-template-columns: repeat(4, minmax(0, 1fr));gap: var(--space-3);}
.subject-card{padding: var(--space-4);gap: var(--space-2);border-radius: var(--radius-lg);}
.subject-card{gap: var(--space-3);}
.subject-card__title{font-size: var(--text-body);}
.subject-card__head{gap: var(--space-2);}
.subject-card__icon, .subject-card__img{width: 36px;height: 36px;}
.subject-card__grades{font-size: var(--text-caption);}
.subject-card__facts li{padding: 1px 8px;font-size: 11px;}
.subject-card__foot{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: var(--space-2);margin-top: auto;padding-top: var(--space-1);}
.subject-card__price{margin: 0;}
.subject-card__price strong{font-size: var(--text-body);}
.subject-card__cta{
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0.375rem 0.75rem;
border: 0;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--c-primary-800);
font-family: inherit;
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.subject-card__cta:hover{background: var(--color-primary);color: var(--c-white);text-decoration: none;}
.method-cards{grid-template-columns: repeat(4, minmax(0, 1fr));gap: var(--space-3);}
.method-card{flex-direction: column;gap: var(--space-2);padding: var(--space-4);border-radius: var(--radius-lg);}
.method-card__icon{color: var(--color-primary);}
.profile-triple{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(var(--space-4), 2.5vw, var(--space-8));
align-items: start;
}
.profile-triple .profile__section{scroll-margin-top: calc(var(--header-h) + 64px);}
.profile-triple .profile__section-title{font-size: var(--text-h3);}
.edu-cards3{display: flex;flex-direction: column;gap: var(--space-3);margin: 0;padding: 0;list-style: none;}
.edu-cards3 .edu-card{padding: var(--space-3);}
.xtimeline{gap: var(--space-4);padding-left: var(--space-4);}
.profile-triple .rating-summary{
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-4);
margin-bottom: var(--space-3);
border-radius: var(--radius-lg);
}
.profile-triple .rating-summary__score{text-align: left;}
.profile-triple .rating-summary__value{font-size: 2.5rem;}
.profile-triple .rating-summary__note{justify-content: flex-start;}
.reviews--grid{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: var(--space-4);}
.reviews--grid .review{display: flex;flex-direction: column;gap: var(--space-2);height: 100%;padding: var(--space-4);border: 1px solid var(--color-border);border-radius: var(--radius-lg);background: var(--color-surface);}
.reviews--grid .review__head{align-items: flex-start;}
.reviews--grid .review__text{flex: 1 1 auto;}
.about-grid{display: grid;grid-template-columns: minmax(0, 1fr) 320px;gap: clamp(var(--space-5), 3vw, var(--space-8));align-items: start;}
.about-quote{
position: relative;
margin: 0;
padding: var(--space-5);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.about-quote__mark{display: inline-flex;color: var(--color-primary);opacity: 0.5;}
.about-quote__text{margin: var(--space-2) 0 0;font-size: var(--text-body);font-style: italic;line-height: 1.6;}
.about-quote__author{margin-top: var(--space-3);color: var(--color-text-muted);font-size: var(--text-caption);font-weight: var(--weight-semibold);}
.booking__datepicker{
display: flex;
align-items: center;
gap: var(--space-2);
padding: 0 var(--space-2) 0 var(--space-3);
min-height: 46px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.booking__datepicker-icon{display: inline-flex;color: var(--color-text-muted);}
.booking__datepicker-value{flex: 1 1 auto;font-weight: var(--weight-semibold);}
.booking__datepicker-nav{display: inline-flex;gap: 2px;}
.booking__datepicker-btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
}
.booking__datepicker-btn:hover:not(:disabled){background: var(--c-n-50);color: var(--color-text);}
.booking__datepicker-btn:disabled{opacity: 0.35;cursor: default;}
.booking__dates--rail{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.profile__anchor-target{display: block;height: 0;}
.profile-booking__message{margin-top: var(--space-1);}
@media (max-width: 1180px){
.subject-cards, .method-cards{grid-template-columns: repeat(2, minmax(0, 1fr));}
.profile-triple{grid-template-columns: repeat(2, minmax(0, 1fr));}
.reviews--grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
.about-grid{grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 700px){
.subject-cards, .method-cards, .profile-triple, .reviews--grid{grid-template-columns: minmax(0, 1fr);}
.profile-anchors ul{
scroll-snap-type: x proximity;
padding-bottom: var(--space-2);
}
.profile-anchors li{scroll-snap-align: start;}
.profile-anchors a{padding: 0.45rem 0.7rem;font-size: var(--text-caption);}
}
.profile-booking .booking__price-label{display: none;}
.profile-booking .booking__price{display: flex;align-items: baseline;gap: var(--space-2);}
.profile-booking .booking__price-value{font-family: var(--font-display);font-size: var(--text-h3);font-weight: var(--weight-bold);}
.profile-booking__fav .heart-btn{white-space: nowrap;padding: 0.3rem 0.55rem;}
.profile-booking__head{align-items: flex-start;}
.profile-hero__video{
position: absolute;
left: var(--space-3);
bottom: var(--space-3);
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.35rem 0.7rem;
border-radius: var(--radius-pill);
background: rgba(12, 18, 40, 0.72);
color: #fff;
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
backdrop-filter: blur(4px);
}
.profile-hero__video:hover{background: rgba(12, 18, 40, 0.85);color: #fff;}
.profile-hero__video-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
background: #fff;
color: #0c1228;
}
.booking__datepicker{justify-content: space-between;padding: 0 var(--space-2);}
.booking__datepicker-value{flex: 0 1 auto;text-align: center;}
.booking__modes{display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: var(--space-2);}
.radio--pill{
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.55rem 0.75rem;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.radio--pill input{position: absolute;opacity: 0;width: 1px;height: 1px;}
.radio--pill .radio__check{display: none;}
.radio--pill:has(input:checked){
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--c-primary-800);
}
.radio--pill:has(input:checked) .radio__check{display: inline-flex;}
.radio--pill:has(input:focus-visible){box-shadow: var(--shadow-focus);}
.profile__section-title{display: flex;align-items: center;gap: var(--space-2);}
.profile__section-title svg{flex: none;color: var(--color-primary);}
.edu-card__head{display: flex;align-items: baseline;justify-content: space-between;gap: var(--space-2);}
.edu-card__years{flex: none;color: var(--color-text-subtle);font-size: var(--text-caption);}
.review__author{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-2);}
.review__author .rating{font-size: var(--text-caption);}
.review__date{color: var(--color-text-subtle);font-size: var(--text-caption);}
.reviews--grid .review__head{align-items: flex-start;gap: var(--space-3);}
.profile-anchors a.is-active{
background: var(--c-primary-800);
color: var(--c-white);
box-shadow: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-primary-200);
}
.profile-booking .booking__step-title{color: var(--color-text-muted);font-weight: var(--weight-semibold);letter-spacing: 0;text-transform: none;}
.profile-booking__card{
max-height: calc(100dvh - var(--header-h) - var(--space-6));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
@media (max-width: 1024px){
.profile-booking__card{max-height: none;overflow: visible;}
}
.booking__datepicker-value{
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
flex: 1 1 auto;
padding: 0;
border: 0;
background: transparent;
color: var(--color-text);
font-family: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
}
.booking__datepicker-chevron{color: var(--color-text-subtle);}
.booking__cal-layer{
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
}
.booking__cal-backdrop{
position: absolute;
inset: 0;
background: rgba(16, 24, 40, 0.45);
backdrop-filter: blur(2px);
animation: fade-in var(--t-base) var(--ease-out);
}
.booking__calendar{
position: relative;
z-index: 1;
width: min(21rem, calc(100vw - var(--space-8)));
max-height: calc(100dvh - var(--space-8));
overflow-y: auto;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-xl);
animation: cal-pop var(--t-base) var(--ease-out);
}
@keyframes cal-pop{
from{opacity: 0;transform: translateY(var(--space-3)) scale(0.94);}
to{opacity: 1;transform: translateY(0) scale(1);}
}
.booking__cal-top{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
}
.booking__cal-caption{
margin: 0;
font-family: var(--font-display);
font-size: var(--text-h4);
font-weight: var(--weight-bold);
}
.booking__cal-close{
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text-muted);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
background var(--t-fast) var(--ease-out);
}
.booking__cal-close:hover{border-color: var(--color-primary);color: var(--color-primary);}
.booking__cal-close:focus-visible{outline: none;border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
.booking__cal-head{display: flex;align-items: center;justify-content: space-between;gap: var(--space-2);margin-bottom: var(--space-3);}
.booking__cal-title{font-family: var(--font-display);font-size: var(--text-body);font-weight: var(--weight-bold);text-transform: capitalize;}
.booking__cal-nav{
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-muted);
cursor: pointer;
}
.booking__cal-nav:hover{border-color: var(--color-primary);color: var(--color-primary);}
.booking__cal-weekdays, .booking__cal-grid{display: grid;grid-template-columns: repeat(7, minmax(0, 1fr));gap: 2px;}
.booking__cal-weekday{padding: var(--space-1) 0;color: var(--color-text-subtle);font-size: var(--text-caption);font-weight: var(--weight-semibold);text-align: center;}
.booking__cal-day{
padding: 0.6rem 0;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-subtle);
font-family: var(--font-display);
font-size: var(--text-body);
font-weight: var(--weight-semibold);
line-height: 1;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.booking__cal-day:not(:disabled){
border-color: var(--c-success-line);
background: var(--c-success-bg);
color: var(--c-success);
animation: cal-pulse 2.8s var(--ease-in-out) infinite;
}
.booking__cal-day:not(:disabled):hover{background: var(--c-success-line);}
.booking__cal-day.is-today:not(:disabled){border-color: var(--c-success);}
.booking__cal-day.is-selected,
.booking__cal-day.is-selected:not(:disabled){
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
font-weight: var(--weight-bold);
animation: none;
}
.booking__cal-day:disabled{color: var(--c-n-300);cursor: default;text-decoration: line-through;}
@keyframes cal-pulse{
0%, 100%{box-shadow: 0 0 0 0 transparent;}
50%{box-shadow: 0 0 0 4px var(--c-success-bg);}
}
@media (prefers-reduced-motion: reduce){
.booking__cal-day:not(:disabled){animation: none;}
.booking__calendar,
.booking__cal-backdrop{animation: none;}
}
.booking__cal-note{display: flex;align-items: center;gap: var(--space-1);margin: var(--space-3) 0 0;color: var(--color-text-subtle);font-size: 11px;}
.edu-card__title{margin: 0;font-weight: var(--weight-semibold);line-height: 1.35;overflow-wrap: anywhere;}
.edu-card__years{margin: 2px 0 0;color: var(--color-text-subtle);font-size: var(--text-caption);}
.edu-card__meta{margin: 4px 0 0;color: var(--color-text-muted);font-size: var(--text-caption);line-height: 1.4;}
.edu-card__text{margin: var(--space-2) 0 0;color: var(--color-text-muted);font-size: var(--text-caption);line-height: 1.5;}
.xtimeline__years{white-space: nowrap;}
.xtimeline__title{line-height: 1.35;}
.xtimeline__meta{line-height: 1.45;}
.profile-triple .profile__section-link,
.profile__section-link{
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
margin-top: var(--space-2);
}
.rating-summary__note{flex-wrap: nowrap;white-space: nowrap;}
.profile-triple .rating-summary{padding: var(--space-4);}
.profile-triple .rating-summary__value{font-size: 2.25rem;line-height: 1.1;}
.profile-triple .rating-summary__bars li{grid-template-columns: 34px minmax(0, 1fr) 40px;gap: var(--space-2);}
.profile-triple .edu-card{align-items: flex-start;}
.profile-triple .profile__section{display: flex;flex-direction: column;}
.profile-booking__fav .heart-btn{
width: auto;
height: auto;
min-height: 34px;
padding: 0.3rem 0.65rem;
gap: var(--space-1);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
.profile-booking__fav .heart-btn svg{flex: none;}
.profile-booking__head{flex-wrap: wrap;}
.subject-card__title{overflow-wrap: break-word;hyphens: auto;}
.subject-card__head > div{min-width: 0;}
.review__ident{min-width: 0;flex: 1 1 auto;}
.review__author{min-width: 0;}
.review__right{flex: 0 0 auto;}
.reviews--grid .review__text{overflow-wrap: anywhere;}
.rating-summary__stars, .rating-summary__percent{white-space: nowrap;}
.rating-summary__bar{min-width: 0;}
.profile__section-title{min-width: 0;overflow-wrap: anywhere;}
.profile__prose p, .edu-card__title, .xtimeline__title, .xtimeline__text{overflow-wrap: anywhere;}
.reviews--grid .review__head{
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: var(--space-2) var(--space-3);
align-items: start;
}
.reviews--grid .review__right{
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
margin-left: 0;
}
.reviews--grid .review__author{flex-wrap: wrap;}
.reviews--grid .review__meta{overflow-wrap: anywhere;}
.profile-pair{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(var(--space-4), 2.5vw, var(--space-8));
align-items: start;
}
.profile-pair .profile__section-title{font-size: var(--text-h3);}
.profile-pair .profile__section{scroll-margin-top: calc(var(--header-h) + 64px);}
.method-cards{grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));}
@media (max-width: 700px){
.profile-pair{grid-template-columns: minmax(0, 1fr);}
}
.profile-booking__card{padding: var(--space-4);gap: var(--space-2);}
.profile-booking .booking{gap: var(--space-2);}
.profile-booking .booking__head{margin: 0;}
.profile-booking .booking__price-value{font-size: var(--text-h3);}
.profile-booking .booking__step{margin-bottom: 0;}
.profile-booking .booking__step-title{margin-bottom: var(--space-1);}
.profile-booking .select,
.profile-booking .input:not(.tfield__native),
.profile-booking .booking__datepicker{min-height: 40px;font-size: var(--text-sm);}
.profile-booking .booking__datepicker{min-height: 40px;}
.profile-booking .radio--pill{padding: 0.35rem 0.6rem;font-size: var(--text-caption);}
.profile-booking .booking__slots{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--space-1);
}
.profile-booking .booking__slot{padding: 0.35rem 0;font-size: var(--text-caption);}
.profile-booking .booking__slots.is-hidden{display: none;}
.profile-booking .booking__form > .btn--lg{min-height: 44px;font-size: var(--text-body);}
.profile-booking__message{margin-top: 0;min-height: 40px;}
.profile-booking__trust{margin: 0;}
.profile-booking__edit, .profile-booking__message{min-height: 40px;}
@media (max-height: 860px){
.profile-booking__card{padding: var(--space-3) var(--space-4);}
.profile-booking .booking__price-value{font-size: var(--text-lg);}
.profile-booking .booking__step-title{font-size: var(--text-caption);}
.profile-booking .select,
.profile-booking .input:not(.tfield__native),
.profile-booking .booking__datepicker{min-height: 38px;}
.profile-booking .booking__slot{padding: 0.3rem 0;}
.profile-booking .booking__form > .btn--lg{min-height: 42px;}
.profile-booking__message{min-height: 38px;}
}
@media (max-height: 700px){
.profile-booking__card{padding: var(--space-3);}
.profile-booking .booking__step-title{font-size: 11px;margin-bottom: 0;}
.profile-booking .select,
.profile-booking .input:not(.tfield__native),
.profile-booking .booking__datepicker{min-height: 34px;}
.profile-booking .booking__slot{padding: 0.2rem 0;}
.profile-booking .booking__form > .btn--lg{min-height: 38px;}
.profile-booking__edit, .profile-booking__message{min-height: 36px;}
.profile-booking .booking__message{margin-top: var(--space-2);padding: var(--space-2) var(--space-3);}
}
.profile-booking .booking,
.profile-booking .booking__form{
display: flex;
flex-direction: column;
gap: 0;
flex: 0 1 auto;
min-height: 0;
}
.profile-booking .booking__head,
.profile-booking .booking__form > .booking__step{flex: 0 0 auto;}
.profile-booking .booking__form > .booking__step--slots{
display: flex;
flex-direction: column;
flex: 0 1 auto;
min-height: 0;
}
.profile-booking .booking__step--slots .booking__slot-title{flex: 0 0 auto;}
.profile-booking .booking__step--slots .booking__slots{
flex: 0 1 auto;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.profile-booking .booking__form > [data-booking-submit],
.profile-booking .booking__message,
.profile-booking__message,
.profile-booking__edit{flex: 0 0 auto;}
.edu-cards{grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: var(--space-4);}
.edu-cards .edu-card{padding: var(--space-4);}
.edu-card{align-items: flex-start;}
.edu-card__icon{width: 44px;height: 44px;}
.xtimeline{display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: var(--space-5) var(--space-8);border-left: 0;padding-left: 0;}
.xtimeline__item{position: relative;padding-left: var(--space-5);border-left: 2px solid var(--color-border);}
.xtimeline__dot{left: -6px;top: 6px;}
.xtimeline__title{font-size: var(--text-body);}
.reviews-layout{
display: grid;
grid-template-columns: 270px minmax(0, 1fr);
gap: clamp(var(--space-5), 3vw, var(--space-8));
align-items: start;
}
.reviews-layout__score{position: sticky;top: calc(var(--header-h) + var(--space-6));}
.reviews-layout__score .rating-summary{
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-5);
margin: 0;
}
.reviews-layout__score .rating-summary__score{text-align: left;}
.reviews-layout__score .rating-summary__value{font-size: 2.5rem;}
.reviews-layout__score .rating-summary__note{justify-content: flex-start;}
.reviews--grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
.reviews-layout__list .profile__note{margin-top: var(--space-4);}
@media (max-width: 1024px){
.reviews-layout{grid-template-columns: minmax(0, 1fr);}
.reviews-layout__score{position: static;}
}
@media (max-width: 700px){
.reviews--grid{grid-template-columns: minmax(0, 1fr);}
.edu-cards{grid-template-columns: minmax(0, 1fr);}
.xtimeline{grid-template-columns: minmax(0, 1fr);}
}
.review__criteria{flex-wrap: wrap;min-width: 0;}
.review__criteria .badge{max-width: 100%;overflow-wrap: anywhere;}
.reviews--grid .review{overflow: hidden;}
.reviews--grid .review__right{
justify-content: flex-start;
flex-wrap: wrap;
row-gap: 4px;
}
.review__date{white-space: nowrap;}
.review__verified{white-space: nowrap;}
.review__author{font-weight: var(--weight-semibold);}
.profile-booking .booking__form > [data-booking-submit]{margin-top: var(--space-3);}
.booking-modal .booking__form > [data-booking-submit]{margin-top: var(--space-3);}
.page-section{padding-block: var(--space-6) var(--section-y);}
.page-head{max-width: 780px;margin-bottom: var(--space-10);}
.page-head--wide{max-width: 900px;}
.page-head--left{text-align: left;}
.page-head__title{font-size: var(--text-h1);margin-bottom: var(--space-4);}
.page-head__text{color: var(--color-text-muted);font-size: var(--text-lg);}
.page-head__meta{margin-top: var(--space-3);color: var(--color-text-subtle);font-size: var(--text-label);}
.page-block{margin-bottom: var(--space-12);}
.page-block__title{
font-size: var(--text-h2);
margin-bottom: var(--space-6);
}
.page-actions{
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-8);
}
.page-actions--center{justify-content: center;}
.how-tabs{margin-bottom: var(--space-10);}
.how-tabs .tabs__list{max-width: 420px;}
.how-steps{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-5);
margin-top: var(--space-6);
counter-reset: how;
}
.how-step{
display: flex;
gap: var(--space-4);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
}
.how-step__number{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 34px;
height: 34px;
border-radius: var(--radius-md);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
font-family: var(--font-display);
font-weight: var(--weight-extrabold);
}
.how-step__title{font-size: var(--text-h4);margin-bottom: var(--space-2);}
.how-step__text{margin: 0;color: var(--color-text-muted);font-size: var(--text-xs);}
.about-mission{
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
padding: clamp(1.5rem, 4vw, 2.5rem);
margin-bottom: var(--space-12);
border: 1px solid var(--color-border);
border-radius: var(--radius-2xl);
background:
radial-gradient(600px 280px at 90% 0%, var(--c-primary-50) 0%, rgba(238, 240, 254, 0) 62%),
linear-gradient(180deg, var(--c-n-25), var(--color-surface));
}
.about-mission__title{font-size: var(--text-h2);margin-bottom: var(--space-4);}
.about-mission__text{color: var(--color-text-muted);font-size: var(--text-sm);margin: 0;}
.about-stats{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.about-stats li{
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--text-label);
}
.about-stats strong{
display: block;
font-family: var(--font-display);
font-size: var(--text-h2);
font-weight: var(--weight-extrabold);
color: var(--color-text);
line-height: 1.1;
}
.about-audiences{display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: var(--space-5);}
.about-audience{
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.about-audience__title{font-size: var(--text-h4);margin-bottom: var(--space-3);}
.about-audience__text{margin: 0;color: var(--color-text-muted);font-size: var(--text-xs);}
.about-trust{display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: var(--space-5);}
.about-trust li{
display: flex;
gap: var(--space-3);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.about-trust__icon{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-accent);
}
.about-trust__title{margin: 0 0 var(--space-1);font-size: var(--text-xs);font-weight: var(--weight-semibold);}
.about-trust__text{margin: 0;color: var(--color-text-muted);font-size: var(--text-xs);}
.about-principles{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-3) var(--space-6);
}
.about-principles li{
display: flex;
align-items: flex-start;
gap: var(--space-2);
color: var(--color-text-muted);
font-size: var(--text-xs);
}
.about-principles svg{color: var(--color-accent);margin-top: 3px;}
.contacts__grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-5);
margin-bottom: var(--space-8);
}
.contacts__card{
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.contacts__title{font-size: var(--text-h4);margin-bottom: var(--space-3);}
.contacts__text{margin: 0;color: var(--color-text-muted);font-size: var(--text-xs);}
.contacts__channels{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-5);
margin-bottom: var(--space-8);
padding: var(--space-6);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.contacts__channel{display: flex;gap: var(--space-3);align-items: flex-start;}
.contacts__icon{
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-primary);
}
.contacts__label{
margin: 0;
color: var(--color-text-subtle);
font-size: var(--text-caption);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.contacts__value{margin: var(--space-1) 0 0;font-size: var(--text-xs);font-weight: var(--weight-semibold);}
.legal{color: var(--color-text-muted);font-size: var(--text-sm);line-height: var(--leading-relaxed);}
.legal h2{font-size: var(--text-h3);margin: var(--space-8) 0 var(--space-3);color: var(--color-text);}
.legal h3{font-size: var(--text-h4);margin: var(--space-6) 0 var(--space-2);color: var(--color-text);}
.legal p{margin-bottom: var(--space-4);}
.legal ul{margin: 0 0 var(--space-4);padding-left: var(--space-5);}
.legal ul li{list-style: disc;margin-bottom: var(--space-2);}
.legal strong{color: var(--color-text);}
@media (max-width: 900px){
.about-mission{grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 560px){
.about-stats{grid-template-columns: minmax(0, 1fr);}
.page-actions .btn{width: 100%;}
}
.catalog-page{padding-block: var(--space-6) var(--section-y);}
.catalog-filters{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-4);
align-items: end;
padding: var(--space-5);
margin-bottom: var(--space-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
}
.catalog-filters__actions{
display: flex;
align-items: center;
gap: var(--space-3);
grid-column: 1 / -1;
flex-wrap: wrap;
}
.catalog-page__cta{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
margin-top: var(--space-12);
padding: clamp(1.5rem, 3vw, 2.5rem);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: linear-gradient(180deg, var(--c-n-25), var(--color-surface));
}
.catalog-page__cta h2{font-size: var(--text-h3);margin-bottom: var(--space-2);}
.catalog-page__cta p{margin: 0;color: var(--color-text-muted);font-size: var(--text-xs);}
@media (max-width: 560px){
.catalog-page__cta{flex-direction: column;align-items: stretch;}
.catalog-page__cta .btn{width: 100%;}
}
.course-page{padding-block: var(--space-6) var(--section-y);}
.course-hero{
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: var(--space-6);
align-items: start;
margin-top: var(--space-4);
}
.course-hero__media{
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-xl);
background: var(--color-bg-subtle);
overflow: hidden;
aspect-ratio: 16 / 10;
}
.course-hero__media img{display: block;width: 100%;height: 100%;object-fit: cover;}
.course-hero__placeholder{color: var(--color-primary);}
.course-hero__meta{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-2);margin: 0 0 var(--space-3);}
.course-hero__subject{
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.3rem 0.7rem;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
.course-hero__academy{color: var(--color-text-muted);font-size: var(--text-caption);font-weight: var(--weight-semibold);}
.course-hero__title{margin: 0 0 var(--space-3);font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);line-height: 1.12;}
.course-hero__subtitle{margin: 0 0 var(--space-4);color: var(--color-text-muted);font-size: var(--text-lg);}
.course-hero__facts{
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin: 0;
padding: 0;
list-style: none;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.course-hero__facts li{display: inline-flex;align-items: center;gap: var(--space-1);}
.course-hero__facts strong{color: var(--color-text);}
.course-layout{
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: var(--space-8);
align-items: start;
margin-top: var(--space-8);
}
.course-layout__main{display: flex;flex-direction: column;gap: var(--space-6);min-width: 0;}
.course-layout__aside{display: flex;flex-direction: column;gap: var(--space-4);position: sticky;top: calc(var(--header-h) + var(--space-4));}
.course-section{
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
}
.course-section__title{margin: 0 0 var(--space-3);font-size: var(--text-h4);}
.course-section__text{color: var(--color-text-muted);font-size: var(--text-sm);line-height: var(--leading-normal);}
.course-program{display: flex;flex-direction: column;gap: var(--space-3);margin: 0;padding: 0;list-style: none;counter-reset: lesson;}
.course-program__item{display: flex;gap: var(--space-3);align-items: flex-start;}
.course-program__num{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-md);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
}
.course-program__body{display: flex;flex-direction: column;gap: 2px;min-width: 0;}
.course-program__title{font-size: var(--text-sm);}
.course-program__text{color: var(--color-text-muted);font-size: var(--text-caption);}
.course-buy{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-md);
}
.course-buy__price{display: flex;align-items: baseline;gap: var(--space-2);margin: 0;}
.course-buy__value{font-family: var(--font-display);font-size: var(--text-h2);font-weight: var(--weight-extrabold);letter-spacing: var(--tracking-tight);}
.course-buy__note{color: var(--color-text-subtle);font-size: var(--text-caption);font-weight: var(--weight-semibold);}
.course-buy__per{margin: 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.course-buy__hint{
display: flex;
align-items: flex-start;
gap: var(--space-1);
margin: var(--space-1) 0 0;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
font-size: var(--text-caption);
}
.course-buy__status{display: flex;align-items: center;gap: var(--space-1);margin: var(--space-2) 0 0;font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.course-buy__status.is-full{color: var(--c-warning);}
.course-buy .btn{margin-top: var(--space-1);}
.course-teacher, .course-facts{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
}
.course-teacher__label{margin: 0;color: var(--color-text-subtle);font-size: var(--text-caption);font-weight: var(--weight-semibold);letter-spacing: var(--tracking-caps);text-transform: uppercase;}
.course-teacher__row{display: flex;align-items: center;gap: var(--space-3);}
.course-teacher__body{min-width: 0;}
.course-teacher__name{display: block;font-weight: var(--weight-bold);}
.course-teacher__meta{margin: 2px 0 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.course-teacher__headline{margin: 0;color: var(--color-text-muted);font-size: var(--text-caption);line-height: 1.5;}
.course-teacher__link{display: inline-flex;align-items: center;gap: var(--space-1);font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.course-facts__list{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;}
.course-facts__list div{display: flex;justify-content: space-between;gap: var(--space-3);font-size: var(--text-sm);}
.course-facts__list dt{color: var(--color-text-subtle);}
.course-facts__list dd{margin: 0;font-weight: var(--weight-semibold);text-align: right;}
.course-related{margin-top: var(--space-10);}
@media (max-width: 1024px){
.course-hero{grid-template-columns: minmax(0, 1fr);}
.course-layout{grid-template-columns: minmax(0, 1fr);}
.course-layout__aside{position: static;}
}
.section--module{padding-block: var(--section-y-tight) var(--section-y);}
.module-hero{
padding-bottom: var(--space-8);
border-bottom: 1px solid var(--color-border);
text-align: center;
}
.module-hero__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
margin-bottom: var(--space-5);
border-radius: var(--radius-lg);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
}
.module-hero__phase{
display: inline-flex;
margin-bottom: var(--space-3);
padding: 0.25rem 0.75rem;
border-radius: var(--radius-pill);
background: var(--c-accent-50);
color: var(--c-accent-700);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.module-hero__title{
font-size: var(--text-h1);
margin-bottom: var(--space-4);
}
.module-hero__text{
max-width: 62ch;
margin-inline: auto;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.module-panel{
margin-top: var(--space-10);
padding: var(--space-8);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
}
.module-panel__title{
margin-bottom: var(--space-5);
font-size: var(--text-h4);
}
.module-panel__list{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--space-3) var(--space-6);
}
.module-panel__list li{
display: flex;
align-items: flex-start;
gap: var(--space-3);
font-size: var(--text-xs);
color: var(--color-text-muted);
}
.module-panel__list svg{
flex: 0 0 auto;
margin-top: 2px;
color: var(--color-accent);
}
.module-panel__note{
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: var(--space-6) 0 0;
padding-top: var(--space-5);
border-top: 1px dashed var(--color-border);
color: var(--color-text-subtle);
font-size: var(--text-label);
}
.module-panel__note svg{flex: 0 0 auto;margin-top: 2px;}
.module-roadmap{margin-top: var(--space-10);}
.module-roadmap__title{
margin-bottom: var(--space-5);
font-size: var(--text-h4);
}
.roadmap{
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.roadmap__item{
display: grid;
grid-template-columns: 26px 92px minmax(0, 1fr);
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
font-size: var(--text-xs);
}
.roadmap__item.is-done{
border-color: var(--c-success-line);
background: var(--c-success-bg);
}
.roadmap__marker{
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: var(--radius-pill);
background: var(--c-n-100);
color: var(--color-text-subtle);
}
.roadmap__item.is-done .roadmap__marker{
background: var(--c-success);
color: var(--c-white);
}
.roadmap__phase{
font-weight: var(--weight-semibold);
color: var(--color-text-muted);
}
.roadmap__item.is-done .roadmap__phase{color: var(--c-success);}
.roadmap__label{color: var(--color-text);}
.module-actions{
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-10);
}
@media (max-width: 560px){
.roadmap__item{grid-template-columns: 26px minmax(0, 1fr);}
.roadmap__label{grid-column: 2;}
}
.section--error{padding-block: var(--section-y);}
.error-page{
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
text-align: center;
}
.error-page__code{
font-family: var(--font-display);
font-size: clamp(3.5rem, 2rem + 8vw, 7rem);
font-weight: var(--weight-extrabold);
line-height: 1;
letter-spacing: -0.04em;
color: var(--c-primary-100);
}
.error-page__title{font-size: var(--text-h2);}
.error-page__text{
max-width: 52ch;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.error-page__actions{
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
margin-top: var(--space-3);
}
.error-page__debug{
width: 100%;
max-width: 100%;
overflow-x: auto;
padding: var(--space-4);
border: 1px solid var(--c-error-line);
border-radius: var(--radius-md);
background: var(--c-error-bg);
color: var(--c-error);
font-size: var(--text-label);
text-align: left;
}
.error-page__help{
margin-top: var(--space-6);
color: var(--color-text-subtle);
font-size: var(--text-label);
}
.sg-head{
max-width: 720px;
margin-bottom: var(--space-12);
}
.sg-head__eyebrow{
margin-bottom: var(--space-2);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.sg-head__title{
font-size: var(--text-h1);
margin-bottom: var(--space-4);
}
.sg-head__text{
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.sg-head code,
.sg-block code{
padding: 0.1rem 0.35rem;
border-radius: var(--radius-xs);
background: var(--c-n-100);
color: var(--c-primary-800);
font-size: 0.85em;
}
.sg-block{
padding-block: var(--space-8);
border-top: 1px solid var(--color-border);
}
.sg-block__title{
margin-bottom: var(--space-6);
font-size: var(--text-h3);
}
.sg-subtitle{
margin: var(--space-8) 0 var(--space-4);
font-size: var(--text-h4);
}
.sg-row{
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
align-items: flex-start;
margin-bottom: var(--space-4);
}
.sg-row--center{align-items: center;}
.sg-stack{
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 640px;
}
.sg-form-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-5);
margin-bottom: var(--space-5);
}
.sg-swatches{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: var(--space-4);
}
.sg-swatch{
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.sg-swatch__chip{
height: 64px;
border-radius: var(--radius-md);
border: 1px solid rgba(16, 24, 40, 0.08);
margin-bottom: var(--space-2);
}
.sg-swatch__name{font-size: var(--text-xs);font-weight: var(--weight-semibold);}
.sg-swatch__hex{font-size: var(--text-caption);color: var(--color-text-subtle);background: none;padding: 0;}
.sg-tone-row{display: flex;flex-wrap: wrap;gap: var(--space-2);}
.sg-tone{
padding: 0.375rem 0.75rem;
border-radius: var(--radius-sm);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.sg-tone--indigo{background: var(--c-tone-indigo-bg);color: var(--c-tone-indigo-fg);}
.sg-tone--teal{background: var(--c-tone-teal-bg);color: var(--c-tone-teal-fg);}
.sg-tone--amber{background: var(--c-tone-amber-bg);color: var(--c-tone-amber-fg);}
.sg-tone--violet{background: var(--c-tone-violet-bg);color: var(--c-tone-violet-fg);}
.sg-tone--rose{background: var(--c-tone-rose-bg);color: var(--c-tone-rose-fg);}
.sg-tone--sky{background: var(--c-tone-sky-bg);color: var(--c-tone-sky-fg);}
.sg-tone--emerald{background: var(--c-tone-emerald-bg);color: var(--c-tone-emerald-fg);}
.sg-type{display: flex;flex-direction: column;gap: var(--space-4);}
.sg-type__row{
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: var(--space-4);
align-items: baseline;
margin: 0;
padding-bottom: var(--space-4);
border-bottom: 1px dashed var(--color-border);
}
.sg-type__label{
font-size: var(--text-caption);
color: var(--color-text-subtle);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.sg-two-col{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-5);
margin-top: var(--space-5);
}
.sg-panel{
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.sg-panel .sg-subtitle{margin-top: 0;}
@media (max-width: 560px){
.sg-type__row{grid-template-columns: minmax(0, 1fr);gap: var(--space-2);}
}
.hv__bar{
position: sticky;
z-index: 40;
top: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
background: #12142b;
color: #fff;
}
.hv__bar-inner{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-5);
padding-block: var(--space-3);
}
.hv__label{
margin: 0;
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
color: rgba(255, 255, 255, 0.62);
}
.hv__switch{
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.hv__tab{
padding: 0.4rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-pill);
color: rgba(255, 255, 255, 0.86);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
.hv__tab:hover{border-color: rgba(255, 255, 255, 0.5);color: #fff;}
.hv__tab.is-active{
border-color: transparent;
background: #fff;
color: #12142b;
}
.hv__note{
padding-block: var(--space-8) var(--space-12);
}
.hv__note-title{
margin-bottom: var(--space-2);
font-size: var(--text-h3);
}
.hv__note-text{
max-width: 640px;
margin-bottom: var(--space-3);
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.hv__note-meta{
margin: 0;
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.hv__note code{
padding: 0.1em 0.4em;
border-radius: var(--radius-xs);
background: var(--color-bg-subtle);
font-size: 0.92em;
}
.dash-page{background: var(--color-bg-subtle);}
.dash{
display: grid;
grid-template-columns: 264px minmax(0, 1fr);
min-height: 100vh;
transition: grid-template-columns var(--t-base) var(--ease-out);
}
.dash.is-collapsed{grid-template-columns: 76px minmax(0, 1fr);}
.dash-side{
position: sticky;
top: 0;
z-index: 30;
display: flex;
flex-direction: column;
align-self: start;
height: 100vh;
border-right: 1px solid var(--color-border);
background: var(--color-surface);
}
.dash-side__head{
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-4) var(--space-4) var(--space-3);
}
.dash-side__brand{
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
color: var(--color-text);
text-decoration: none;
}
.dash-side__logo{flex: none;}
.dash-side__brand-text{
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.15;
}
.dash-side__brand-text strong{
font-family: var(--font-display);
font-size: var(--text-body);
font-weight: var(--weight-extrabold);
letter-spacing: var(--tracking-tight);
}
.dash-side__brand-text small{
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.dash-side__collapse,
.dash-side__close{
margin-left: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-muted);
cursor: pointer;
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.dash-side__collapse:hover,
.dash-side__close:hover{background: var(--color-bg-subtle);color: var(--color-text);}
.dash-side__close{display: none;}
.dash.is-collapsed .dash-side__collapse svg{transform: rotate(180deg);}
.dash-side__person{
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 var(--space-3) var(--space-3);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dash-side__avatar{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary);
font-weight: var(--weight-bold);
overflow: hidden;
}
.dash-side__avatar img{width: 100%;height: 100%;object-fit: cover;}
.dash-side__person-text{display: flex;flex-direction: column;min-width: 0;}
.dash-side__person-text strong{font-size: var(--text-sm);font-weight: var(--weight-bold);}
.dash-side__person-text small{
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.dash-side__verified{color: var(--c-accent-500);}
.dash-side__nav{
flex: 1 1 auto;
overflow-y: auto;
padding: 0 var(--space-3) var(--space-4);
}
.dash-group{margin: 0;}
.dash-side__section{
display: flex;
align-items: center;
gap: var(--space-2);
margin: var(--space-4) 0 var(--space-2);
padding: 0.45rem var(--space-3);
border-radius: var(--radius-md);
background: var(--color-primary);
color: var(--c-white);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
cursor: pointer;
list-style: none;
user-select: none;
box-shadow: var(--shadow-xs);
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.dash-side__section::-webkit-details-marker{display: none;}
.dash-side__section > span:first-child{flex: 1 1 auto;}
.dash-side__section:hover{background: var(--color-primary-hover);color: var(--c-white);}
.dash-side__section:focus-visible{outline: 2px solid var(--c-primary-300);outline-offset: 2px;}
.dash-group[open] > .dash-side__section{background: var(--c-primary-800);color: var(--c-white);}
.dash-group__chevron{flex: none;color: var(--c-white);opacity: 0.85;transition: transform var(--t-fast) var(--ease-out);}
.dash-group[open] .dash-group__chevron{transform: rotate(180deg);}
.dash-group__badge{flex: none;}
.dash-group[open] .dash-group__badge{display: none;}
.dash-side__list{display: flex;flex-direction: column;gap: 2px;margin: 0;padding: 0;list-style: none;}
.dash-nav__item{
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: 0.5rem var(--space-3);
border: 0;
border-radius: var(--radius-md);
background: transparent;
color: var(--color-text-muted);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.dash-nav__item:hover{background: var(--color-bg-subtle);color: var(--color-text);}
.dash-nav__item.is-active{
background: var(--color-primary-soft);
color: var(--color-primary);
font-weight: var(--weight-semibold);
}
.dash-nav__item.is-soon{color: var(--c-n-400);cursor: default;}
.dash-nav__item.is-soon:hover{background: transparent;color: var(--c-n-400);}
.dash-nav__item--button{font-family: inherit;}
.dash-nav__icon{display: inline-flex;flex: none;}
.dash-nav__item.is-active .dash-nav__icon{color: var(--color-primary);}
.dash-nav__label{
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dash-nav__ext{color: var(--c-n-400);}
.dash-nav__badge{
flex: none;
min-width: 22px;
padding: 1px 6px;
border-radius: var(--radius-pill);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-align: center;
}
.dash-nav__badge.is-attention{background: var(--c-warning-bg);color: var(--c-warning);}
.dash-side__foot{
padding: var(--space-3);
border-top: 1px solid var(--color-border);
}
.dash-side__logout{margin: 0;}
.dash.is-collapsed .dash-side__brand-text,
.dash.is-collapsed .dash-side__person-text,
.dash.is-collapsed .dash-side__section,
.dash.is-collapsed .dash-nav__label,
.dash.is-collapsed .dash-nav__badge,
.dash.is-collapsed .dash-nav__ext{display: none;}
.dash.is-collapsed .dash-nav__item{justify-content: center;padding-inline: 0;}
.dash.is-collapsed .dash-side__list{display: flex !important;}
.dash.is-collapsed .dash-side__person{justify-content: center;margin-inline: var(--space-2);}
.dash__body{display: flex;flex-direction: column;min-width: 0;}
.dash-top{
position: sticky;
top: 0;
z-index: 20;
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-6);
border-bottom: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(8px);
}
.dash-top__burger{
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
cursor: pointer;
}
.dash-top__title{
margin: 0;
font-family: var(--font-display);
font-size: var(--text-body);
font-weight: var(--weight-bold);
white-space: nowrap;
}
.dash-top__search{
position: relative;
display: flex;
align-items: center;
flex: 1 1 auto;
max-width: 420px;
margin-left: var(--space-4);
}
.dash-top__search-icon{
position: absolute;
left: var(--space-3);
display: inline-flex;
color: var(--c-n-400);
pointer-events: none;
}
.dash-top__search-input{
width: 100%;
padding: 0.5rem var(--space-3) 0.5rem 2.4rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-bg-subtle);
color: var(--color-text);
font-family: inherit;
font-size: var(--text-sm);
}
.dash-top__search-input:focus{
outline: none;
border-color: var(--color-primary);
background: var(--color-surface);
box-shadow: var(--shadow-focus);
}
.dash-top__actions{
display: flex;
align-items: center;
gap: var(--space-2);
margin-left: auto;
}
.dash-top__quick{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.5rem var(--space-4);
border: 0;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: var(--color-text-invert);
font-family: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
}
.dash-top__quick:hover{background: var(--color-primary-hover);}
.dash-top__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-muted);
cursor: pointer;
}
.dash-top__icon:hover{color: var(--color-text);background: var(--color-bg-subtle);}
.dash-top__profile{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.25rem 0.6rem 0.25rem 0.25rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text);
font-family: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
}
.dash-top__avatar{
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
overflow: hidden;
}
.dash-top__avatar img{width: 100%;height: 100%;object-fit: cover;}
.dash-menu{
position: absolute;
top: calc(100% - var(--space-2));
right: var(--space-6);
z-index: 40;
min-width: 248px;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
}
.dash-menu__title{
margin: 0 0 var(--space-1);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}
.dash-menu__sub{
margin: 0 0 var(--space-2);
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.dash-menu__item{
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
padding: 0.45rem var(--space-2);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text);
font-family: inherit;
font-size: var(--text-sm);
text-align: left;
text-decoration: none;
cursor: pointer;
}
.dash-menu__item:hover{background: var(--color-bg-subtle);}
.dash-menu__item.is-soon{color: var(--c-n-400);cursor: default;}
.dash-menu__item.is-soon:hover{background: transparent;}
.dash-menu__item--button{font-family: inherit;}
.dash-menu__empty,
.dash-menu__note{
margin: var(--space-2) 0 0;
color: var(--color-text-subtle);
font-size: var(--text-caption);
line-height: var(--leading-snug);
}
.dash__main{
flex: 1 1 auto;
padding: var(--space-6) var(--space-6) var(--space-12);
}
.dash-wrap{
display: flex;
flex-direction: column;
gap: var(--space-6);
max-width: 1120px;
margin-inline: auto;
}
.dwelcome{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
}
.dwelcome__title{
margin: 0 0 var(--space-1);
font-size: var(--text-h2);
letter-spacing: var(--tracking-tight);
}
.dwelcome__lead{margin: 0;color: var(--color-text-muted);font-size: var(--text-body);}
.dwelcome__date{
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
margin: 0;
text-align: right;
}
.dwelcome__weekday{
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.dwelcome__fulldate{font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.dwelcome__time{
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.dpanel,
.dnext,
.dprofile,
.dsearch{
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-xs);
}
.dpanel__head{
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.dpanel__title{margin: 0;font-size: var(--text-h4);}
.dpanel__sub{margin: 2px 0 0;color: var(--color-text-muted);font-size: var(--text-sm);}
.dnext{border-color: var(--c-primary-200);box-shadow: var(--shadow-md);}
.dnext__head{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.dnext__title{margin: 0;font-size: var(--text-h4);}
.dnext__when{
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.dnext__card{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-6);
align-items: center;
padding: var(--space-5);
border-radius: var(--radius-lg);
background: linear-gradient(150deg, var(--c-primary-50), var(--color-surface) 60%);
}
.dnext__subject{
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-3);
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--weight-bold);
}
.dnext__subject-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--color-primary-soft);
color: var(--color-primary);
}
.dnext__grade{
padding: 2px 8px;
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text-muted);
font-family: var(--font-sans);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
.dnext__student{display: flex;align-items: center;gap: var(--space-3);margin: 0 0 var(--space-4);}
.dnext__avatar,
.dreq__avatar{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-pill);
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
}
.dnext__student-name{display: block;font-size: var(--text-body);font-weight: var(--weight-semibold);}
.dnext__student-meta{display: block;color: var(--color-text-muted);font-size: var(--text-caption);}
.dnext__facts,
.dreq__facts{
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin: 0;
padding: 0;
list-style: none;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.dnext__facts li,
.dreq__facts li{display: inline-flex;align-items: center;gap: var(--space-2);}
.dnext__actions{
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--space-2);
min-width: 210px;
}
.dnext__hint{
color: var(--color-text-subtle);
font-size: var(--text-caption);
text-align: center;
}
.dstatus{
display: inline-flex;
align-items: center;
padding: 2px 9px;
border-radius: var(--radius-pill);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.dstatus--success{background: var(--c-success-bg);color: var(--c-success);}
.dstatus--warning{background: var(--c-warning-bg);color: var(--c-warning);}
.dstatus--info{background: var(--c-info-bg);color: var(--c-info);}
.dstatus--live{background: var(--color-primary-soft);color: var(--color-primary);}
.dstatus--neutral{background: var(--color-bg-subtle);color: var(--color-text-muted);}
.dstatus--muted{background: var(--c-n-100);color: var(--c-n-500);}
.dstatus--error{background: var(--c-error-bg);color: var(--c-error);}
.dtimeline{display: flex;flex-direction: column;margin: 0;padding: 0;list-style: none;}
.dtimeline__row{
display: grid;
grid-template-columns: 68px 14px minmax(0, 1fr);
gap: var(--space-3);
align-items: start;
padding: var(--space-3) 0;
border-bottom: 1px dashed var(--color-border);
}
.dtimeline__row:last-child{border-bottom: 0;}
.dtimeline__time{display: flex;flex-direction: column;}
.dtimeline__time strong{font-family: var(--font-display);font-size: var(--text-body);}
.dtimeline__time small{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dtimeline__dot{
position: relative;
width: 12px;
height: 12px;
margin-top: 6px;
border-radius: var(--radius-pill);
background: var(--c-n-300);
}
.dtimeline__row--success .dtimeline__dot{background: var(--c-success);}
.dtimeline__row--warning .dtimeline__dot{background: var(--c-warning);}
.dtimeline__row--info .dtimeline__dot{background: var(--c-info);}
.dtimeline__row--live .dtimeline__dot{background: var(--color-primary);box-shadow: 0 0 0 4px var(--color-primary-soft);}
.dtimeline__row--muted .dtimeline__dot{background: var(--c-n-300);}
.dtimeline__body{display: flex;flex-direction: column;gap: 2px;min-width: 0;}
.dtimeline__subject{font-weight: var(--weight-semibold);}
.dtimeline__student{color: var(--color-text-muted);font-size: var(--text-sm);}
.dtimeline__meta{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-1);
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.dreq-list{display: grid;grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));gap: var(--space-4);}
.dreq{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dreq__top{display: flex;align-items: center;gap: var(--space-3);}
.dreq__who{min-width: 0;}
.dreq__name{margin: 0;font-weight: var(--weight-bold);}
.dreq__meta{margin: 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.dreq__top .dstatus{margin-left: auto;}
.dreq__message{
display: flex;
gap: var(--space-2);
margin: 0;
padding: var(--space-3);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--text-sm);
font-style: italic;
}
.dreq__actions{
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: auto;
padding-top: var(--space-2);
}
.dreq__actions form{margin: 0;}
.dact{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.dact__row{
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.dact__row:hover{border-color: var(--c-primary-200);transform: translateX(2px);}
.dact__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
}
.dact__row--attention .dact__icon{background: var(--c-warning-bg);color: var(--c-warning);}
.dact__row--info .dact__icon{background: var(--c-info-bg);color: var(--c-info);}
.dact__text{flex: 1 1 auto;font-size: var(--text-sm);}
.dact__count{font-family: var(--font-display);font-size: var(--text-body);font-weight: var(--weight-bold);margin-right: var(--space-1);}
.dact__note{display: block;color: var(--color-text-subtle);font-size: var(--text-caption);}
.dact__arrow{color: var(--c-n-400);}
.dstats{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: var(--space-3);
margin: 0;
padding: 0;
list-style: none;
}
.dstat{
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dstat--attention{border-color: var(--c-warning-line);background: var(--c-warning-bg);}
.dstat__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-primary);
}
.dstat__body{display: flex;flex-direction: column;min-width: 0;}
.dstat__value{
font-family: var(--font-display);
font-size: var(--text-h3);
font-weight: var(--weight-extrabold);
line-height: 1.1;
letter-spacing: var(--tracking-tight);
}
.dstat__label{color: var(--color-text-muted);font-size: var(--text-caption);font-weight: var(--weight-semibold);}
.dstat__hint{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dprofile{
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-6);
align-items: center;
}
.dprofile__title{margin: 0 0 var(--space-3);font-size: var(--text-h4);}
.dprofile__bar{
height: 10px;
margin-bottom: var(--space-4);
border-radius: var(--radius-pill);
background: var(--color-bg-subtle);
overflow: hidden;
}
.dprofile__bar span{
display: block;
height: 100%;
border-radius: var(--radius-pill);
background: linear-gradient(90deg, var(--color-primary), var(--c-accent-500));
}
.dprofile__checklist{
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin: 0;
padding: 0;
list-style: none;
}
.dprofile__check{
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.dprofile__check.is-done{color: var(--color-text);}
.dprofile__check.is-done svg{color: var(--c-success);}
.dprofile__side{display: flex;flex-direction: column;align-items: flex-start;gap: var(--space-3);}
.dprofile__status{
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.dsearch__group{
margin: var(--space-4) 0 var(--space-2);
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.dsearch__list{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.dsearch__list li{display: flex;flex-wrap: wrap;align-items: baseline;gap: var(--space-2);}
.dsearch__name{font-weight: var(--weight-semibold);}
.dsearch__meta{color: var(--color-text-muted);font-size: var(--text-caption);}
.dash__scrim{
position: fixed;
inset: 0;
z-index: 25;
background: rgba(16, 18, 42, 0.42);
}
@media (max-width: 1180px){
.dash{grid-template-columns: 76px minmax(0, 1fr);}
.dash .dash-side__brand-text,
.dash .dash-side__person-text,
.dash .dash-side__section,
.dash .dash-nav__label,
.dash .dash-nav__badge,
.dash .dash-nav__ext{display: none;}
.dash .dash-nav__item{justify-content: center;padding-inline: 0;}
.dash .dash-side__person{justify-content: center;margin-inline: var(--space-2);}
.dash .dash-side__collapse{display: none;}
}
@media (max-width: 900px){
.dash,
.dash.is-collapsed{grid-template-columns: minmax(0, 1fr);}
.dash-side{
position: fixed;
top: 0;
left: 0;
z-index: 30;
width: 280px;
transform: translateX(-100%);
transition: transform var(--t-base) var(--ease-out);
box-shadow: var(--shadow-xl);
}
.dash.is-drawer-open .dash-side{transform: translateX(0);}
.dash .dash-side__brand-text,
.dash .dash-side__person-text,
.dash .dash-side__section,
.dash .dash-nav__label,
.dash .dash-nav__badge,
.dash .dash-nav__ext{display: revert;}
.dash .dash-nav__item{justify-content: flex-start;padding-inline: var(--space-3);}
.dash .dash-side__person{justify-content: flex-start;margin-inline: var(--space-3);}
.dash-side__close{display: inline-flex;}
.dash-side__collapse{display: none;}
.dash-top{padding: var(--space-3) var(--space-4);}
.dash-top__burger{display: inline-flex;}
.dash-top__title{display: none;}
.dash-top__search{margin-left: 0;}
.dash__main{padding: var(--space-4) var(--space-4) var(--space-10);}
.dash-menu{right: var(--space-4);}
}
@media (max-width: 700px){
.dash-top__search{display: none;}
.dash-top__quick span{display: none;}
.dash-top__quick{padding: 0.5rem;}
.dash-top__name{display: none;}
.dnext__card{grid-template-columns: minmax(0, 1fr);}
.dnext__actions{min-width: 0;}
.dnext__actions .btn{width: 100%;}
.dprofile{grid-template-columns: minmax(0, 1fr);}
.dreq-list{grid-template-columns: minmax(0, 1fr);}
.dwelcome__date{align-items: flex-start;text-align: left;}
}
@media (max-width: 520px){
.dpanel, .dnext, .dprofile, .dsearch{padding: var(--space-4);}
.dtimeline__row{grid-template-columns: 54px 10px minmax(0, 1fr);gap: var(--space-2);}
.dstats{grid-template-columns: repeat(2, minmax(0, 1fr));}
.dstat{padding: var(--space-3);}
.dstat__value{font-size: var(--text-h4);}
.dreq__actions .btn{flex: 1 1 auto;}
}
.dash-page.has-bottomnav .dash__main{padding-bottom: calc(var(--space-16) + 64px);}
.dnext__countdown{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px 12px;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
}
.dnext__avatar--photo{padding: 0;overflow: hidden;}
.dnext__avatar--photo img{width: 100%;height: 100%;object-fit: cover;}
.dnext__actions .btn{width: 100%;}
.dsched{display: flex;flex-direction: column;gap: var(--space-5);}
.dsched__label{
display: flex;
align-items: baseline;
gap: var(--space-2);
margin: 0 0 var(--space-2);
font-family: var(--font-display);
font-size: var(--text-body);
font-weight: var(--weight-bold);
}
.dsched__weekday{
color: var(--color-text-subtle);
font-family: var(--font-sans);
font-size: var(--text-caption);
font-weight: var(--weight-medium);
}
.dsched__list{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.dsched__item{
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dsched__time{
flex: none;
font-family: var(--font-display);
font-size: var(--text-body);
font-weight: var(--weight-bold);
}
.dsched__body{display: flex;flex-direction: column;min-width: 0;flex: 1 1 auto;}
.dsched__subject{font-weight: var(--weight-semibold);}
.dsched__meta{color: var(--color-text-muted);font-size: var(--text-caption);}
.dtasks{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.dtasks__row{
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.dtasks__row:hover{border-color: var(--c-primary-200);transform: translateX(2px);}
.dtasks__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
}
.dtasks__row--warning .dtasks__icon{background: var(--c-warning-bg);color: var(--c-warning);}
.dtasks__row--info .dtasks__icon{background: var(--c-info-bg);color: var(--c-info);}
.dtasks__row--primary .dtasks__icon{background: var(--color-primary-soft);color: var(--color-primary);}
.dtasks__text{display: flex;flex-direction: column;flex: 1 1 auto;min-width: 0;}
.dtasks__title{font-weight: var(--weight-semibold);font-size: var(--text-sm);}
.dtasks__meta{color: var(--color-text-muted);font-size: var(--text-caption);}
.dtasks__action{
display: inline-flex;
align-items: center;
gap: var(--space-1);
flex: none;
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.dprog{display: flex;flex-direction: column;gap: var(--space-4);}
.dprog__row{
display: grid;
grid-template-columns: minmax(160px, 1.1fr) minmax(80px, 2fr) auto;
align-items: center;
gap: var(--space-3);
}
.dprog__name{
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.dprog__icon{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
background: var(--color-primary-soft);
color: var(--color-primary);
}
.dprog__bar,
.dcourse__bar{
display: block;
height: 8px;
border-radius: var(--radius-pill);
background: var(--color-bg-subtle);
overflow: hidden;
}
.dprog__bar span,
.dcourse__bar span{
display: block;
height: 100%;
border-radius: var(--radius-pill);
background: linear-gradient(90deg, var(--color-primary), var(--c-accent-500));
}
.dprog__value{display: flex;flex-direction: column;align-items: flex-end;min-width: 74px;}
.dprog__value strong{font-family: var(--font-display);font-size: var(--text-body);}
.dprog__value small{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dteachers{display: grid;grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));gap: var(--space-4);}
.dteacher{
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
grid-template-rows: auto 1fr;
gap: var(--space-3) var(--space-4);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dteacher__photo{
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-primary);
font-weight: var(--weight-bold);
overflow: hidden;
}
.dteacher__photo img{width: 100%;height: 100%;object-fit: cover;}
.dteacher__body{min-width: 0;}
.dteacher__name{display: flex;align-items: center;gap: var(--space-2);margin: 0;font-weight: var(--weight-bold);}
.dteacher__name a{color: var(--color-text);}
.dteacher__name a:hover{color: var(--color-primary);}
.dteacher__fav{color: var(--c-error);}
.dteacher__meta{margin: 2px 0 var(--space-2);color: var(--color-text-muted);font-size: var(--text-caption);}
.dteacher__stats{display: flex;flex-wrap: wrap;gap: var(--space-3);margin: 0 0 var(--space-2);color: var(--color-text-muted);font-size: var(--text-caption);}
.dteacher__stats span{display: inline-flex;align-items: center;gap: 4px;}
.dteacher__stats svg{color: var(--c-accent-500);}
.dteacher__next{
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0;
padding: 4px 10px;
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
.dteacher__next.is-empty{background: transparent;color: var(--color-text-subtle);font-weight: var(--weight-regular);}
.dteacher__actions{
grid-column: 1 / -1;
align-self: end;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.dcourses{display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: var(--space-4);}
.dcourse{
display: flex;
flex-direction: column;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
overflow: hidden;
}
.dcourse__cover{
position: relative;
height: 118px;
background: linear-gradient(150deg, var(--c-primary-100), var(--c-accent-100));
overflow: hidden;
}
.dcourse__cover img{width: 100%;height: 100%;object-fit: cover;}
.dcourse__cover.is-placeholder{
display: flex;
align-items: center;
justify-content: center;
color: var(--c-primary-700);
}
.dcourse__mode{
position: absolute;
left: var(--space-3);
bottom: var(--space-3);
padding: 2px 10px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.92);
color: var(--color-text);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
.dcourse__body{display: flex;flex-direction: column;gap: var(--space-2);padding: var(--space-4);}
.dcourse__title{margin: 0;font-weight: var(--weight-bold);}
.dcourse__meta{margin: 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.dcourse__progress{display: flex;align-items: center;gap: var(--space-3);}
.dcourse__bar{flex: 1 1 auto;}
.dcourse__percent{color: var(--color-text-muted);font-size: var(--text-caption);white-space: nowrap;}
.dcourse__next{display: inline-flex;align-items: center;gap: var(--space-2);margin: 0;color: var(--color-text-subtle);font-size: var(--text-caption);}
.dpanel--attention{border-color: var(--c-warning-line);background: var(--c-warning-bg);}
.dpay-note{display: flex;align-items: flex-start;gap: var(--space-3);}
.dpay-note__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--c-warning);
}
.dpay-note__title{margin: 0 0 2px;font-weight: var(--weight-bold);}
.dpay-note__text{margin: 0;color: var(--color-text-muted);font-size: var(--text-sm);}
.dfind{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-5);
border-radius: var(--radius-xl);
background: linear-gradient(135deg, var(--c-primary-700), var(--c-secondary-600));
color: var(--color-text-invert);
}
.dfind__title{margin: 0 0 4px;font-size: var(--text-h4);color: var(--color-text-invert);}
.dfind__sub{margin: 0;color: rgba(255, 255, 255, 0.82);font-size: var(--text-sm);}
.dfind .btn--primary{background: var(--color-surface);color: var(--color-primary);}
.dfind .btn--primary:hover{background: var(--color-bg-subtle);}
.dbnav{
position: fixed;
z-index: 24;
left: 0;
right: 0;
bottom: 0;
display: none;
grid-auto-flow: column;
grid-auto-columns: 1fr;
border-top: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(10px);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.dbnav__item{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px 4px 7px;
border: 0;
background: transparent;
color: var(--color-text-subtle);
font-family: inherit;
font-size: 11px;
font-weight: var(--weight-medium);
text-decoration: none;
cursor: pointer;
}
.dbnav__item.is-active{color: var(--color-primary);font-weight: var(--weight-bold);}
.dbnav__icon{position: relative;display: inline-flex;}
.dbnav__badge{
position: absolute;
top: -4px;
right: -8px;
min-width: 16px;
padding: 0 4px;
border-radius: var(--radius-pill);
background: var(--c-warning);
color: #fff;
font-size: 10px;
font-weight: var(--weight-bold);
text-align: center;
}
@media (max-width: 900px){
.dbnav{display: grid;}
.dteachers{grid-template-columns: minmax(0, 1fr);}
.dcourses{grid-template-columns: minmax(0, 1fr);}
.dprog__row{grid-template-columns: minmax(0, 1fr) auto;}
.dprog__bar{grid-column: 1 / -1;}
.has-bottomnav .to-top{bottom: calc(64px + env(safe-area-inset-bottom, 0px) + var(--space-3));}
}
@media (max-width: 520px){
.dsched__item{flex-wrap: wrap;}
.dsched__item .dstatus{margin-left: auto;}
.dtasks__action{display: none;}
.dfind{flex-direction: column;align-items: flex-start;}
.dfind .btn{width: 100%;}
}
.dash-wrap--admin{max-width: 1280px;}
.dpanel--alerts{border-color: var(--c-warning-line);}
.dalerts{gap: var(--space-2);}
.dalerts .dact__row{border-color: var(--c-warning-line);background: var(--color-surface);}
.dalerts li:first-child .dact__row{background: var(--c-warning-bg);}
.dpanel--compact .dpanel__head{margin-bottom: var(--space-3);}
.dmini{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--space-2) var(--space-5);
margin: 0;
padding: 0;
list-style: none;
}
.dmini__item{display: flex;flex-wrap: wrap;align-items: baseline;gap: var(--space-2);padding: var(--space-2) 0;}
.dmini__icon{display: inline-flex;color: var(--c-n-400);}
.dmini__value{font-family: var(--font-display);font-size: var(--text-h4);font-weight: var(--weight-extrabold);}
.dmini__label{color: var(--color-text-muted);font-size: var(--text-caption);}
.dmini__hint{flex-basis: 100%;color: var(--color-text-subtle);font-size: var(--text-caption);}
.dappr{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.dappr__row{
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dappr__avatar{
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
overflow: hidden;
}
.dappr__avatar img{width: 100%;height: 100%;object-fit: cover;}
.dappr__body{display: flex;flex-direction: column;gap: 2px;min-width: 0;}
.dappr__name{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-2);font-weight: var(--weight-bold);}
.dappr__meta{color: var(--color-text-muted);font-size: var(--text-caption);}
.dappr__facts{
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: 2px;
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.dappr__facts span{display: inline-flex;align-items: center;gap: 4px;}
.dappr__actions{display: flex;flex-wrap: wrap;gap: var(--space-2);}
.dcharts{display: grid;grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));gap: var(--space-4);}
.dcharts__card{
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.dcharts__card--wide{grid-column: 1 / -1;}
.dcharts__card--month{margin-top: var(--space-4);}
.dcharts__head{margin-bottom: var(--space-3);}
.dcharts__title{margin: 0;font-size: var(--text-body);font-weight: var(--weight-bold);}
.dcharts__meta{margin: 2px 0 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.dchart{margin: 0;}
.dchart__summary{margin-bottom: var(--space-2);color: var(--color-text-subtle);font-size: var(--text-caption);}
.dchart__plot{position: relative;padding-left: 34px;}
.dchart__plot svg{display: block;width: 100%;height: 150px;overflow: visible;}
.dchart__axis{
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 150px;
color: var(--c-n-400);
font-size: 10px;
line-height: 1;
}
.dchart__x{
display: grid;
gap: 0;
margin-top: var(--space-2);
padding-left: 34px;
color: var(--c-n-400);
font-size: 10px;
text-align: center;
}
.dchart__legend{
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin: var(--space-3) 0 0;
padding: 0;
list-style: none;
font-size: var(--text-caption);
color: var(--color-text-muted);
}
.dchart__legend li{display: inline-flex;align-items: center;gap: var(--space-2);}
.dchart__legend strong{color: var(--color-text);}
.dchart__dot{width: 9px;height: 9px;border-radius: var(--radius-pill);background: var(--c-n-300);}
.dchart__dot--primary{background: var(--color-primary);}
.dchart__dot--success{background: var(--c-success);}
.dchart__dot--warning{background: var(--c-warning);}
.dchart__dot--error{background: var(--c-error);}
.dchart__dot--info{background: var(--c-info);}
.dchart__dot--muted{background: var(--c-n-300);}
.drev{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: var(--space-3);
margin: var(--space-4) 0 0;
padding: var(--space-4) 0 0;
border-top: 1px dashed var(--color-border);
list-style: none;
}
.drev li{display: flex;flex-direction: column;gap: 2px;}
.drev__label{color: var(--color-text-muted);font-size: var(--text-caption);}
.drev strong{font-family: var(--font-display);font-size: var(--text-h4);}
.drev__item--primary strong{color: var(--color-primary);}
.dactivity{display: flex;flex-direction: column;margin: 0;padding: 0;list-style: none;}
.dactivity__row{
display: grid;
grid-template-columns: 32px minmax(0, 1fr) auto;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px dashed var(--color-border);
}
.dactivity__row:last-child{border-bottom: 0;}
.dactivity__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
}
.dactivity__icon--success{background: var(--c-success-bg);color: var(--c-success);}
.dactivity__icon--warning{background: var(--c-warning-bg);color: var(--c-warning);}
.dactivity__icon--info{background: var(--c-info-bg);color: var(--c-info);}
.dactivity__body{display: flex;flex-direction: column;min-width: 0;}
.dactivity__title{font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.dactivity__entity{color: var(--color-text-subtle);font-weight: var(--weight-regular);font-size: var(--text-caption);}
.dactivity__meta{color: var(--color-text-muted);font-size: var(--text-caption);}
.dactivity__when{color: var(--color-text-subtle);font-size: var(--text-caption);white-space: nowrap;}
.dhealth{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-2);
margin: 0;
padding: 0;
list-style: none;
}
.dhealth__item{
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dhealth__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: none;
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--c-n-400);
}
.dhealth__item--success .dhealth__icon{color: var(--c-success);}
.dhealth__item--warning .dhealth__icon{color: var(--c-warning);}
.dhealth__item--error .dhealth__icon{color: var(--c-error);}
.dhealth__item--warning{border-color: var(--c-warning-line);background: var(--c-warning-bg);}
.dhealth__item--error{border-color: var(--c-error-line);background: var(--c-error-bg);}
.dhealth__text{display: flex;flex-direction: column;min-width: 0;}
.dhealth__label{font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.dhealth__detail{color: var(--color-text-muted);font-size: var(--text-caption);}
.dash-top__icon.has-alert{border-color: var(--c-warning-line);background: var(--c-warning-bg);color: var(--c-warning);}
.dash-top__dot{
position: absolute;
top: -5px;
right: -5px;
min-width: 16px;
padding: 0 4px;
border-radius: var(--radius-pill);
background: var(--c-error);
color: #fff;
font-size: 10px;
font-weight: var(--weight-bold);
line-height: 16px;
text-align: center;
}
.dash-top__icon{position: relative;}
.dash-menu__alerts{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.dash-menu__alert{
display: flex;
align-items: flex-start;
gap: var(--space-2);
padding: var(--space-2);
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
font-size: var(--text-caption);
}
.dash-menu__alert--warning{color: var(--c-warning);}
.dash-menu__alert--error{color: var(--c-error);}
.dash-menu__alert span{display: flex;flex-direction: column;}
.dash-menu__alert strong{font-size: var(--text-caption);}
.dash-menu__alert small{color: var(--color-text-muted);}
@media (max-width: 900px){
.dcharts{grid-template-columns: minmax(0, 1fr);}
.dappr__row{grid-template-columns: 40px minmax(0, 1fr);}
.dappr__actions{grid-column: 1 / -1;}
.dchart__plot svg, .dchart__axis{height: 130px;}
}
@media (max-width: 520px){
.dstats--admin{grid-template-columns: minmax(0, 1fr);}
.dmini{grid-template-columns: repeat(2, minmax(0, 1fr));}
.dhealth{grid-template-columns: minmax(0, 1fr);}
.dactivity__row{grid-template-columns: 28px minmax(0, 1fr);}
.dactivity__when{grid-column: 2;}
}
.dpage-head{margin-bottom: var(--space-5);}
.dpage-crumbs ol{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-1);
margin: 0 0 var(--space-2);
padding: 0;
list-style: none;
color: var(--color-text-subtle);
font-size: var(--text-caption);
}
.dpage-crumbs li{display: inline-flex;align-items: center;gap: var(--space-1);}
.dpage-crumbs a{color: var(--color-text-muted);}
.dpage-crumbs a:hover{color: var(--color-primary);}
.dpage-crumbs svg{color: var(--c-n-300);}
.dpage-head__row{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
}
.dpage-title{
margin: 0 0 var(--space-1);
font-size: var(--text-h2);
letter-spacing: var(--tracking-tight);
}
.dpage-sub{margin: 0;color: var(--color-text-muted);font-size: var(--text-sm);}
.dpage-actions{display: flex;flex-wrap: wrap;gap: var(--space-2);}
.dtabs{
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-bottom: var(--space-4);
padding: 4px;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-bg-subtle);
width: fit-content;
max-width: 100%;
overflow-x: auto;
}
.dtabs__item{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.4rem 0.9rem;
border-radius: var(--radius-pill);
color: var(--color-text-muted);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-decoration: none;
white-space: nowrap;
}
.dtabs__item:hover{color: var(--color-text);}
.dtabs__item.is-active{
background: var(--color-surface);
color: var(--color-primary);
box-shadow: var(--shadow-xs);
}
.dtabs__count{
min-width: 20px;
padding: 0 5px;
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text-subtle);
font-size: var(--text-caption);
text-align: center;
}
.dtabs__item.is-active .dtabs__count{background: var(--color-primary-soft);color: var(--color-primary);}
.dtable-wrap{overflow-x: auto;}
.dtable{
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.dtable th{
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-border);
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-align: left;
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
white-space: nowrap;
}
.dtable td{
padding: var(--space-3);
border-bottom: 1px dashed var(--color-border);
vertical-align: middle;
}
.dtable tr:last-child td{border-bottom: 0;}
.dtable tr:hover td{background: var(--color-bg-subtle);}
.dtable .is-right{text-align: right;}
.dtable__link{color: var(--color-text);text-decoration: none;}
.dtable__link:hover{color: var(--color-primary);}
.dcell-main{display: flex;flex-direction: column;}
.dcell-title{font-weight: var(--weight-semibold);}
.dcell-sub{display: block;color: var(--color-text-muted);font-size: var(--text-caption);}
.dcell-strong{font-weight: var(--weight-semibold);}
.dcell-strong.is-danger{color: var(--c-error);}
.dcell-icon{color: var(--c-n-400);}
.dpager{
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.dpager__item{
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-decoration: none;
}
.dpager__item.is-disabled{color: var(--c-n-300);}
.dpager__info{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dfilter{
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.dfilter__icon{position: absolute;left: var(--space-3);display: inline-flex;color: var(--c-n-400);pointer-events: none;}
.dfilter__input{
flex: 1 1 220px;
padding: 0.55rem var(--space-3) 0.55rem 2.4rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
font-family: inherit;
font-size: var(--text-sm);
}
.dfilter__input:focus{outline: none;border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
.dcards{display: grid;grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));gap: var(--space-4);}
.dcard{
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dcard__head{display: flex;align-items: center;gap: var(--space-3);}
.dcard__avatar{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-pill);
background: var(--color-surface);
border: 1px solid var(--color-border);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
}
.dcard__title{margin: 0;font-weight: var(--weight-bold);}
.dcard__title a{color: var(--color-text);}
.dcard__title a:hover{color: var(--color-primary);}
.dcard__meta{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-2);margin: 2px 0 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.dcard__facts{display: flex;flex-direction: column;gap: var(--space-1);margin: 0;padding: 0;list-style: none;color: var(--color-text-muted);font-size: var(--text-caption);}
.dcard__facts li{display: inline-flex;align-items: center;gap: var(--space-2);}
.dcard__facts li.is-muted{color: var(--color-text-subtle);}
.dcard__actions{display: flex;flex-wrap: wrap;gap: var(--space-2);margin-top: auto;padding-top: var(--space-2);}
.dlist{display: flex;flex-direction: column;margin: 0;padding: 0;list-style: none;}
.dlist__row{
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px dashed var(--color-border);
}
.dlist__row:last-child{border-bottom: 0;}
.dlist__actions{display: inline-flex;align-items: center;gap: var(--space-2);flex: none;}
.dlist__title a{color: var(--color-text);}
.dlist__title a:hover{color: var(--color-primary);}
.dlist__icon{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
}
.dlist__body{display: flex;flex-direction: column;flex: 1 1 auto;min-width: 0;}
.dlist__title{font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.dlist__meta{color: var(--color-text-muted);font-size: var(--text-caption);}
.dmeta{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-3);
margin: var(--space-4) 0 0;
}
.dmeta dt{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dmeta dd{margin: 2px 0 0;font-size: var(--text-sm);font-weight: var(--weight-medium);}
.dform__grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));gap: var(--space-4);}
.dform .field{margin-bottom: var(--space-4);}
.dform__foot{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-3);margin: var(--space-2) 0 0;}
.dform__note{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dform--inline{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-3);
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border);
}
.dform--inline .field{margin-bottom: 0;}
.dchips{display: flex;flex-wrap: wrap;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.dchips__item{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.4rem 0.75rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-bg-subtle);
font-size: var(--text-caption);
}
.dchips__note{color: var(--color-text-subtle);}
.dcal-bar{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.dcal-nav{display: flex;align-items: center;gap: var(--space-2);}
.dcal-nav__btn{
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 0.6rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-muted);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
text-decoration: none;
}
.dcal-nav__btn:hover{color: var(--color-primary);border-color: var(--c-primary-200);}
.dcal-title{margin-left: var(--space-2);font-family: var(--font-display);font-weight: var(--weight-bold);}
.dcal{display: grid;grid-template-columns: repeat(7, minmax(0, 1fr));gap: 1px;background: var(--color-border);border: 1px solid var(--color-border);border-radius: var(--radius-lg);overflow: hidden;}
.dcal__weekday{
padding: var(--space-2);
background: var(--color-bg-subtle);
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-align: center;
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.dcal__day{
display: flex;
flex-direction: column;
gap: var(--space-1);
min-height: 132px;
padding: var(--space-2);
background: var(--color-surface);
}
.dcal--week .dcal__day{min-height: 320px;}
.dcal__day.is-outside{background: var(--color-bg-subtle);}
.dcal__day.is-outside .dcal__date{color: var(--c-n-300);}
.dcal__day.is-today{box-shadow: inset 0 0 0 2px var(--color-primary);}
.dcal__head{display: flex;align-items: center;gap: var(--space-2);}
.dcal__date{font-family: var(--font-display);font-size: var(--text-body);font-weight: var(--weight-bold);}
.dcal__day.is-today .dcal__date{color: var(--color-primary);}
.dcal__weekday-full{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dcal__avail{margin-left: auto;color: var(--c-success);}
.dcal__slot{
display: block;
padding: 1px 6px;
border-radius: var(--radius-sm);
background: var(--c-success-bg);
color: var(--c-success);
font-size: 10px;
font-weight: var(--weight-semibold);
}
.dcal__lessons{display: flex;flex-direction: column;gap: 3px;margin: 0;padding: 0;list-style: none;}
.dcal__lesson{
display: flex;
flex-direction: column;
gap: 0;
padding: 4px 6px;
border-left: 3px solid var(--c-n-300);
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
color: var(--color-text);
font-size: 11px;
line-height: 1.25;
text-decoration: none;
}
.dcal__lesson:hover{background: var(--color-primary-soft);}
.dcal__lesson--success{border-left-color: var(--c-success);}
.dcal__lesson--warning{border-left-color: var(--c-warning);}
.dcal__lesson--info{border-left-color: var(--c-info);}
.dcal__lesson--live{border-left-color: var(--color-primary);}
.dcal__lesson--neutral{border-left-color: var(--c-n-300);}
.dcal__lesson--muted{border-left-color: var(--c-n-200);opacity: 0.7;}
.dcal__lesson-time{font-weight: var(--weight-bold);}
.dcal__lesson-title{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.dcal__lesson-student{color: var(--color-text-subtle);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.dcal-legend{display: flex;flex-wrap: wrap;gap: var(--space-3);margin-top: var(--space-3);color: var(--color-text-muted);font-size: var(--text-caption);}
.dcal-legend__item{display: inline-flex;align-items: center;gap: var(--space-2);}
.dcal-legend__item::before{content: '';width: 10px;height: 10px;border-radius: 2px;background: var(--c-n-300);}
.dcal-legend__item--success::before{background: var(--c-success);}
.dcal-legend__item--warning::before{background: var(--c-warning);}
.dcal-legend__item--neutral::before{background: var(--c-n-300);}
.dcal-legend__item--muted::before{background: var(--c-n-200);}
.dcal-legend__item--avail::before{background: var(--c-success-bg);}
.dsubjects{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.dsubjects__row{
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto auto;
align-items: center;
gap: var(--space-4);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dsubjects__row.is-inactive{opacity: 0.6;}
.dsubjects__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-primary);
}
.dsubjects__body{display: flex;flex-direction: column;min-width: 0;}
.dsubjects__title{display: flex;align-items: center;gap: var(--space-2);font-weight: var(--weight-bold);}
.dsubjects__meta{color: var(--color-text-muted);font-size: var(--text-caption);}
.dsubjects__price{font-family: var(--font-display);font-size: var(--text-h4);font-weight: var(--weight-extrabold);}
.dsubjects__actions{display: flex;align-items: center;gap: var(--space-2);}
.dweek{display: flex;flex-direction: column;margin: 0;padding: 0;list-style: none;}
.dweek__row{
display: grid;
grid-template-columns: 130px minmax(0, 1fr) auto;
gap: var(--space-4);
align-items: center;
padding: var(--space-3) 0;
border-bottom: 1px dashed var(--color-border);
}
.dweek__toggle{display: flex;flex: none;align-items: center;margin: 0;}
.dweek__row:last-child{border-bottom: 0;}
.dweek__day{font-weight: var(--weight-semibold);}
.dweek__slots{display: flex;flex-wrap: wrap;gap: var(--space-2);}
.dweek__none{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dweek__slot{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 0.35rem 0.6rem;
border: 1px solid var(--c-primary-200);
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
}
.dweek__slot small{color: var(--color-text-muted);font-weight: var(--weight-regular);}
.dweek__slot.is-off{opacity: 0.5;}
.dweek__slot form{margin: 0;display: inline-flex;}
.dweek__x{
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border: 0;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.7);
color: var(--color-primary);
cursor: pointer;
}
.dweek__x:hover{background: var(--c-error-bg);color: var(--c-error);}
.dpanel--flush{padding: 0;overflow: hidden;}
.dmessenger{display: grid;grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);min-height: 560px;}
.dmsg-list{border-right: 1px solid var(--color-border);background: var(--color-bg-subtle);overflow-y: auto;max-height: 640px;}
.dmsg-list ul{margin: 0;padding: 0;list-style: none;}
.dmsg-item{
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
gap: var(--space-3);
align-items: center;
padding: var(--space-3);
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
text-decoration: none;
}
.dmsg-item:hover{background: var(--color-surface);}
.dmsg-item.is-active{background: var(--color-surface);box-shadow: inset 3px 0 0 var(--color-primary);}
.dmsg-item__avatar{
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
}
.dmsg-item__body{display: flex;flex-direction: column;min-width: 0;}
.dmsg-item__name{font-size: var(--text-sm);font-weight: var(--weight-bold);}
.dmsg-item__preview{color: var(--color-text-muted);font-size: var(--text-caption);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.dmsg-item.is-unread .dmsg-item__name::after{content: ' •';color: var(--color-primary);}
.dmsg-item__side{display: flex;flex-direction: column;align-items: flex-end;gap: 2px;}
.dmsg-item__time{color: var(--color-text-subtle);font-size: 10px;white-space: nowrap;}
.dmsg-item__unread{
min-width: 18px;
padding: 0 5px;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: #fff;
font-size: 10px;
font-weight: var(--weight-bold);
text-align: center;
}
.dmsg-thread{display: flex;flex-direction: column;min-width: 0;}
.dmsg-thread__head{
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border);
}
.dmsg-thread__name{margin: 0;font-weight: var(--weight-bold);}
.dmsg-thread__meta{margin: 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.dmsg-thread__body{flex: 1 1 auto;padding: var(--space-4);overflow-y: auto;max-height: 480px;}
.dmsg-thread__empty{color: var(--color-text-subtle);font-size: var(--text-sm);text-align: center;}
.dmsg-day{margin: var(--space-3) 0;color: var(--color-text-subtle);font-size: var(--text-caption);text-align: center;}
.dmsg-bubble{
max-width: 78%;
margin-bottom: var(--space-3);
padding: var(--space-3);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dmsg-bubble.is-mine{margin-left: auto;background: var(--color-primary-soft);}
.dmsg-bubble__text{margin: 0;font-size: var(--text-sm);}
.dmsg-bubble__time{display: block;margin-top: 4px;color: var(--color-text-subtle);font-size: 10px;}
.dmsg-form{display: flex;gap: var(--space-2);padding: var(--space-3) var(--space-4);border-top: 1px solid var(--color-border);}
.dmsg-form textarea{flex: 1 1 auto;resize: vertical;}
.dnotif{display: flex;flex-direction: column;margin: 0;padding: 0;list-style: none;}
.dnotif__row{
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto auto;
gap: var(--space-3);
align-items: center;
padding: var(--space-3);
border-bottom: 1px dashed var(--color-border);
}
.dnotif__row:last-child{border-bottom: 0;}
.dnotif__row.is-unread{
background: var(--color-primary-soft);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-md);
}
.dnotif__row.is-unread .dnotif__title{font-weight: var(--weight-bold);}
.dnotif__row:not(.is-unread) .dnotif__icon{opacity: .5;}
.dnotif__row:not(.is-unread) .dnotif__title a{color: var(--color-text-muted);}
.dnotif__icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-primary);
}
.dnotif__body{display: flex;flex-direction: column;min-width: 0;}
.dnotif__title{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-2);font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.dnotif__title a{color: var(--color-text);}
.dnotif__text{color: var(--color-text-muted);font-size: var(--text-caption);}
.dnotif__when{color: var(--color-text-subtle);font-size: var(--text-caption);white-space: nowrap;}
.drating{display: grid;grid-template-columns: auto minmax(0, 1fr);gap: var(--space-6);align-items: center;}
.drating__big{display: flex;flex-direction: column;align-items: center;margin: 0;}
.drating__big strong{font-family: var(--font-display);font-size: 3rem;line-height: 1;letter-spacing: var(--tracking-tight);}
.drating__big span{color: var(--color-text-muted);font-size: var(--text-caption);}
.drating__bars{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.drating__bars li{display: grid;grid-template-columns: 52px minmax(0, 1fr) 40px;align-items: center;gap: var(--space-3);}
.drating__label{display: inline-flex;align-items: center;gap: 4px;color: var(--color-text-muted);font-size: var(--text-caption);}
.drating__label svg{color: var(--c-warning);}
.drating__count{color: var(--color-text-subtle);font-size: var(--text-caption);text-align: right;}
.dreview-list{display: flex;flex-direction: column;gap: var(--space-4);margin: 0;padding: 0;list-style: none;}
.dreview{
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dreview__head{display: grid;grid-template-columns: 40px minmax(0, 1fr) auto auto;gap: var(--space-3);align-items: center;}
.dreview__avatar{
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
}
.dreview__who{margin: 0;font-weight: var(--weight-bold);}
.dreview__meta{margin: 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.dreview__stars{display: inline-flex;gap: 1px;color: var(--c-n-300);}
.dreview__stars .is-on{color: var(--c-warning);}
.dreview__date{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dreview__text{margin: var(--space-3) 0 0;font-size: var(--text-sm);}
.dreview__pending{display: inline-flex;align-items: center;gap: var(--space-2);margin: var(--space-2) 0 0;color: var(--c-warning);font-size: var(--text-caption);}
.dsettings__title{margin: 0 0 var(--space-3);font-size: var(--text-h4);}
.dsettings__text{max-width: 620px;margin: 0 0 var(--space-3);color: var(--color-text-muted);font-size: var(--text-sm);}
.dsettings__note{
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: var(--space-4) 0 0;
color: var(--color-text-muted);
font-size: var(--text-sm);
}
.dsettings__note svg{flex: none;margin-top: 2px;color: var(--c-n-400);}
.dswitch{margin: 0 0 var(--space-5);padding: 0;border: 0;}
.dswitch__legend{
margin-bottom: var(--space-3);
padding: 0;
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.dswitch__row{
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) 0;
cursor: pointer;
}
.dswitch__row input{width: 18px;height: 18px;accent-color: var(--color-primary);}
.dswitch__icon{display: inline-flex;color: var(--c-n-400);}
.dswitch__label{font-size: var(--text-sm);}
.dswitch__note{margin: var(--space-2) 0 0;color: var(--color-text-subtle);font-size: var(--text-caption);}
.btn--danger{color: var(--c-error);}
.btn--danger:hover{border-color: var(--c-error-line);background: var(--c-error-bg);}
.btn.is-soon{color: var(--c-n-400);cursor: default;pointer-events: none;}
.dreq__propose{display: block;}
.dreq__propose summary{list-style: none;cursor: pointer;}
.dreq__propose summary::-webkit-details-marker{display: none;}
.dreq__propose-form{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--space-3);
margin-top: var(--space-3);
padding: var(--space-3);
border: 1px dashed var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.dreq__decided{display: inline-flex;align-items: center;gap: var(--space-2);margin: var(--space-2) 0 0;color: var(--color-text-subtle);font-size: var(--text-caption);}
@media (max-width: 1024px){
.dsubjects__row{grid-template-columns: 40px minmax(0, 1fr) auto;}
.dsubjects__actions{grid-column: 2 / -1;}
.dmessenger{grid-template-columns: minmax(0, 1fr);}
.dmsg-list{border-right: 0;border-bottom: 1px solid var(--color-border);max-height: 320px;}
.drating{grid-template-columns: minmax(0, 1fr);gap: var(--space-4);}
.drating__big{flex-direction: row;align-items: baseline;gap: var(--space-2);}
}
@media (max-width: 700px){
.dtable thead{display: none;}
.dtable, .dtable tbody, .dtable tr, .dtable td{display: block;width: 100%;}
.dtable tr{
margin-bottom: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.dtable td{display: flex;justify-content: space-between;gap: var(--space-3);padding: 4px 0;border: 0;text-align: right;}
.dtable td::before{
content: attr(data-label);
flex: none;
color: var(--color-text-subtle);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
text-align: left;
}
.dtable td.dtable__cell--primary{display: block;text-align: left;}
.dtable td.dtable__cell--primary::before{display: none;}
.dcal{grid-template-columns: repeat(7, minmax(0, 1fr));}
.dcal__day{min-height: 92px;padding: 4px;}
.dcal__lesson-student, .dcal__slot{display: none;}
.dcal__weekday{font-size: 10px;padding: 4px;}
.dweek__row{grid-template-columns: minmax(0, 1fr);gap: var(--space-2);}
.dnotif__row, .dreview__head{grid-template-columns: 32px minmax(0, 1fr);}
.dreview__stars, .dreview__date{grid-column: 2;}
.dpage-actions{width: 100%;}
.dpage-actions .btn{flex: 1 1 auto;}
}
.dsetup{border-color: var(--c-primary-200);}
.dsetup__list{
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: var(--space-4) 0 0;
padding: 0;
list-style: none;
counter-reset: setup;
}
.dsetup__item a{
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
color: var(--color-text);
text-decoration: none;
transition: border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.dsetup__item a{
background: var(--c-error-bg);
border-color: var(--c-error-line);
}
.dsetup__item a:hover{border-color: var(--c-error);transform: translateX(2px);}
.dsetup__item.is-done a{
background: var(--c-success-bg);
border-color: var(--c-success-line);
}
.dsetup__item.is-done a:hover{border-color: var(--c-success);}
.dsetup__check{display: inline-flex;flex: none;color: var(--c-error);}
.dsetup__item.is-done .dsetup__check{color: var(--c-success);}
.dsetup__text{display: flex;flex-direction: column;flex: 1 1 auto;min-width: 0;}
.dsetup__label{font-size: var(--text-sm);font-weight: var(--weight-semibold);}
.dsetup__item.is-done .dsetup__label{text-decoration: none;}
.dsetup__hint{color: var(--color-text-muted);font-size: var(--text-caption);}
.dsetup__state{flex: none;}
.dsetup__icon{display: inline-flex;flex: none;color: var(--c-n-400);}
.input--file{padding: 0.45rem var(--space-3);background: var(--color-surface);}
.input--file::file-selector-button{
margin-right: var(--space-3);
padding: 0.35rem 0.7rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-text);
font-family: inherit;
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
cursor: pointer;
}
.dsettings__text--muted{color: var(--color-text-subtle);font-style: italic;}
.dsubs{display: flex;flex-direction: column;gap: var(--space-4);margin: 0;padding: 0;list-style: none;}
.dsubs__row{padding: var(--space-4);border: 1px solid var(--color-border);border-radius: var(--radius-lg);background: var(--color-bg-subtle);}
.dsubs__head{display: grid;grid-template-columns: 40px minmax(0, 1fr) auto;gap: var(--space-3);align-items: center;}
.dsubs__text{margin: var(--space-3) 0 0;font-size: var(--text-sm);}
.dsubs__file{display: inline-flex;align-items: center;gap: var(--space-2);margin: var(--space-2) 0 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.dsubs__feedback{
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: var(--space-3) 0 0;
padding: var(--space-3) var(--space-4);
border-left: 3px solid var(--color-primary);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-text);
font-size: var(--text-sm);
font-style: normal;
line-height: 1.6;
}
.dsubs__feedback svg{flex: none;margin-top: 3px;color: var(--color-primary);}
.dsubs__form{
display: grid;
grid-template-columns: 130px minmax(0, 1fr) auto;
gap: var(--space-3);
align-items: end;
margin-top: var(--space-3);
padding-top: var(--space-3);
border-top: 1px dashed var(--color-border);
}
.dsubs__form .field{margin-bottom: 0;}
.dquestions{display: flex;flex-direction: column;gap: var(--space-3);margin: 0;padding: 0;list-style: none;}
.dquestions__row{padding: var(--space-4);border: 1px solid var(--color-border);border-radius: var(--radius-lg);background: var(--color-bg-subtle);}
.dquestions__head{display: grid;grid-template-columns: 30px minmax(0, 1fr) auto;gap: var(--space-3);align-items: start;}
.dquestions__num{
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-primary);
font-family: var(--font-display);
font-weight: var(--weight-bold);
}
.dquestions__text{margin: 0;font-weight: var(--weight-semibold);}
.dquestions__meta{margin: 2px 0 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.dquestions__options{display: flex;flex-direction: column;gap: 2px;margin: var(--space-3) 0 0 42px;padding: 0;list-style: none;font-size: var(--text-sm);color: var(--color-text-muted);}
.dquestions__options li{display: inline-flex;align-items: center;gap: var(--space-2);}
.dquestions__options li.is-correct{color: var(--c-success);font-weight: var(--weight-semibold);}
.danswer{display: grid;grid-template-columns: 28px minmax(0, 1fr);gap: var(--space-2);align-items: center;margin-bottom: var(--space-2);}
.danswer__pick{display: inline-flex;align-items: center;justify-content: center;}
.danswer__pick input{width: 18px;height: 18px;accent-color: var(--c-success);}
@media (max-width: 700px){
.dsubs__form{grid-template-columns: minmax(0, 1fr);}
.dsubs__head, .dquestions__head{grid-template-columns: 32px minmax(0, 1fr);}
.dsubs__head .dstatus, .dquestions__head form{grid-column: 2;justify-self: start;}
.dquestions__options{margin-left: 0;}
}
.dtable td form{display: inline-flex;margin: 0;vertical-align: middle;}
.dtable td .btn{white-space: nowrap;}
.dtable td > .btn + form{margin-left: var(--space-2);}
.dtable td .dcell-sub{margin-top: 2px;}
.dtable .btn--danger,
.dlist .btn--danger,
.dquestions__head .btn--danger,
.dchips .btn--danger{
--btn-bg: transparent;
--btn-fg: var(--c-error);
--btn-border: transparent;
--btn-shadow: none;
padding-inline: 0.5rem;
min-height: 34px;
}
.dtable .btn--danger:hover,
.dlist .btn--danger:hover,
.dquestions__head .btn--danger:hover{--btn-bg: var(--c-error-bg);}
.dcourse__actions{display: flex;flex-wrap: wrap;gap: var(--space-2);margin-top: var(--space-1);}
.dtests{display: grid;grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));gap: var(--space-4);}
.dtest{
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.dtest__head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: var(--space-2);}
.dtest__title{margin: 0;font-size: var(--text-h4);font-weight: var(--weight-bold);}
.dtest__title a{color: var(--color-text);}
.dtest__title a:hover{color: var(--color-primary);}
.dtest__meta{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-2);margin: 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.dtest__meta svg{color: var(--c-accent-500);}
.dquestions__item{
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dquestions__text{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-2);}
.dquestions__points{
padding: 2px 8px;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary);
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.doption{
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
cursor: pointer;
}
.doption:hover{background: var(--color-surface);}
.doption input{width: 18px;height: 18px;accent-color: var(--color-primary);}
.doption.is-picked{color: var(--c-success);font-weight: var(--weight-semibold);}
.doption.is-picked svg{color: var(--c-success);}
.dquestions--review .dquestions__text{font-weight: var(--weight-semibold);}
.dcerts{display: grid;grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));gap: var(--space-4);}
.dcert{
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--color-border);
border-left: 4px solid var(--c-accent-500);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.dcert__ribbon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: var(--radius-pill);
background: var(--c-accent-50);
color: var(--c-accent-700);
}
.dcert__body{display: flex;flex-direction: column;gap: var(--space-2);min-width: 0;}
.dcert__title{margin: 0;font-size: var(--text-h4);font-weight: var(--weight-bold);}
.dcert__meta{margin: 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.dcert__grade{margin: 0;}
.dcert__codes{display: grid;gap: 2px;margin: 0;}
.dcert__codes div{display: flex;gap: var(--space-2);font-size: var(--text-caption);}
.dcert__codes dt{color: var(--color-text-subtle);}
.dcert__codes dd{margin: 0;color: var(--color-text);font-weight: var(--weight-semibold);}
.dcert__codes code{font-size: var(--text-caption);letter-spacing: 0.04em;}
.davatar{display: flex;flex-wrap: wrap;align-items: flex-end;gap: var(--space-4);}
.davatar__preview{
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
border-radius: var(--radius-pill);
background: var(--color-primary-soft);
color: var(--color-primary);
font-family: var(--font-display);
font-weight: var(--weight-bold);
overflow: hidden;
}
.davatar__preview img{width: 100%;height: 100%;object-fit: cover;}
.btn.is-disabled{opacity: 0.6;pointer-events: none;}
@media (max-width: 700px){
.dcert{grid-template-columns: minmax(0, 1fr);}
.dcert__ribbon{width: 44px;height: 44px;}
}
.dstats--admin{grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));}
.dgrid-2{display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: var(--space-4);}
.dpanel--note{padding-block: var(--space-3);}
.dfilter__select{width: auto;min-width: 170px;}
.dmeta--grid{grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));}
.dapprovals{
display: grid;
grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
gap: var(--space-4);
align-items: start;
}
.dapprovals__queue{position: sticky;top: var(--space-4);}
.dapprovals__detail{display: flex;flex-direction: column;gap: var(--space-4);}
.dqueue{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.dqueue__item{
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
color: var(--color-text);
}
.dqueue__item:hover{border-color: var(--color-primary);}
.dqueue__item.is-active{border-color: var(--color-primary);background: var(--color-primary-soft);}
.dqueue__name{font-weight: var(--weight-semibold);}
.dqueue__meta{color: var(--color-text-muted);font-size: var(--text-caption);}
.dqueue__item .dstatus{align-self: flex-start;margin-top: var(--space-1);}
.dperms{display: grid;grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));gap: var(--space-4);}
.dperms__group{
margin: 0;
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.dperms__legend{
padding-inline: var(--space-2);
color: var(--color-text);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-caps);
}
.dperms__group .dswitch__row{padding: var(--space-1) 0;}
.dperms code{font-size: var(--text-caption);color: var(--color-text-muted);}
.dfunnel{display: flex;flex-direction: column;gap: var(--space-3);}
.dfunnel__row{
display: grid;
grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) minmax(140px, auto);
gap: var(--space-3);
align-items: center;
}
.dfunnel__label{font-weight: var(--weight-medium);}
.dfunnel__value{text-align: right;}
.dfunnel__value strong{display: block;font-family: var(--font-display);font-size: var(--text-h4);}
.dfunnel__value small{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dlog{
max-height: 520px;
margin: 0;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface-dark);
color: var(--c-n-100);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--text-caption);
line-height: var(--leading-snug);
overflow: auto;
white-space: pre-wrap;
word-break: break-word;
}
@media (max-width: 1024px){
.dapprovals{grid-template-columns: minmax(0, 1fr);}
.dapprovals__queue{position: static;}
}
@media (max-width: 700px){
.dfunnel__row{grid-template-columns: minmax(0, 1fr);}
.dfunnel__value{text-align: left;}
}
.drowact{position: relative;display: inline-block;}
.drowact > summary{list-style: none;cursor: pointer;}
.drowact > summary::-webkit-details-marker{display: none;}
.drowact[open] > summary{--btn-bg: var(--color-primary-soft);}
.drowact__form{
display: flex;
flex-direction: column;
gap: var(--space-2);
width: min(320px, 70vw);
margin-top: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
box-shadow: var(--shadow-lg);
}
@media (max-width: 900px){
.drowact, .drowact__form{width: 100%;}
}
.dedu-note{display: flex;align-items: flex-start;gap: var(--space-3);}
.dedu-note__icon{flex: none;color: var(--c-warning);}
.dedu-note__icon--ok{color: var(--c-success);}
.dedu-note .dpanel__sub{margin-top: var(--space-1);}
.dedu-req{display: flex;flex-direction: column;gap: var(--space-1);margin: var(--space-3) 0 0;padding: 0;list-style: none;}
.dedu-req li{display: flex;align-items: flex-start;gap: var(--space-2);font-size: var(--text-sm);color: var(--color-text);}
.dedu-req li svg{flex: none;margin-top: 3px;color: var(--c-warning);}
.dedu-text{margin: 0;color: var(--color-text-muted);font-size: var(--text-sm);}
.dedu-missing{
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
padding: var(--space-2) var(--space-3);
border: 1px dashed var(--c-warning-line);
border-radius: var(--radius-md);
background: var(--c-warning-bg);
color: var(--c-warning);
font-size: var(--text-caption);
}
.dedu-docs{display: flex;flex-direction: column;gap: var(--space-2);margin: 0;padding: 0;list-style: none;}
.dedu-doc{
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
}
.dedu-doc__preview{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
overflow: hidden;
}
.dedu-doc__preview img{display: block;width: 100%;height: 100%;object-fit: cover;}
.dedu-doc__body{display: flex;flex-direction: column;gap: 2px;flex: 1 1 auto;min-width: 0;}
.dedu-doc__title{font-size: var(--text-sm);font-weight: var(--weight-semibold);overflow-wrap: anywhere;}
.dedu-doc__meta{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-1);color: var(--color-text-muted);font-size: var(--text-caption);}
.dedu-doc__actions{display: flex;flex: none;align-items: center;gap: var(--space-1);}
.dedu-add{margin-top: var(--space-1);}
.dedu-add > summary{
cursor: pointer;
color: var(--color-primary);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.dedu-add > summary:hover{text-decoration: underline;}
.dedu-add[open] > summary{margin-bottom: var(--space-2);}
.dedu-form{padding-top: var(--space-3);border-top: 1px solid var(--color-border);}
.dedu-form .field{margin-bottom: var(--space-3);}
.stepfield{display: flex;flex-direction: column;gap: var(--space-2);min-width: 0;}
.stepfield__box{
display: flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
padding: 0 var(--space-1) 0 var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.stepfield__box:hover{border-color: var(--c-primary-300);}
.stepfield__box:focus-within{border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
.stepfield__input{
width: 4.5ch;
min-width: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--color-text);
font-family: var(--font-display);
font-size: var(--text-body);
font-weight: var(--weight-bold);
font-variant-numeric: tabular-nums;
text-align: center;
}
.stepfield__input:focus{outline: none;}
.stepfield__input::-webkit-outer-spin-button,
.stepfield__input::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0;}
.stepfield__input{-moz-appearance: textfield;appearance: textfield;}
.stepfield__unit{color: var(--color-text-subtle);font-size: var(--text-caption);font-weight: var(--weight-semibold);}
.stepfield__arrows{
display: flex;
flex-direction: column;
flex: none;
margin-left: auto;
border-left: 1px solid var(--color-border);
}
.stepfield__btn{
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 21px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--color-text-muted);
cursor: pointer;
transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.stepfield__btn:first-child{border-top-right-radius: var(--radius-md);}
.stepfield__btn:last-child{border-bottom-right-radius: var(--radius-md);}
.stepfield__btn:hover{background: var(--color-primary-soft);color: var(--color-primary-hover);}
.stepfield__btn:focus-visible{outline: none;box-shadow: var(--shadow-focus);}
.stepfield__btn:disabled{opacity: 0.35;cursor: default;}
.stepfield__presets{display: flex;flex-wrap: wrap;gap: var(--space-1);}
.stepfield__preset{
min-width: 40px;
padding: 0.25rem var(--space-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text-muted);
font-family: inherit;
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
font-variant-numeric: tabular-nums;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),
color var(--t-fast) var(--ease-out);
}
.stepfield__preset:hover{border-color: var(--color-primary);color: var(--color-primary-hover);}
.stepfield__preset:focus-visible{outline: none;box-shadow: var(--shadow-focus);}
.stepfield__preset.is-active{
border-color: var(--color-primary);
background: var(--color-primary);
color: var(--c-white);
}
.dtoggle{
display: inline-flex;
flex: none;
align-items: center;
width: 46px;
height: 26px;
padding: 3px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-pill);
background: var(--c-n-100);
cursor: pointer;
transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.dtoggle__knob{
width: 18px;
height: 18px;
border-radius: var(--radius-pill);
background: var(--color-surface);
box-shadow: var(--shadow-sm);
transition: transform var(--t-fast) var(--ease-out);
}
.dtoggle[aria-checked='true']{
border-color: var(--color-primary);
background: var(--color-primary);
}
.dtoggle[aria-checked='true'] .dtoggle__knob{
transform: translateX(20px);
}
.dtoggle:hover{border-color: var(--color-primary);}
.dtoggle:focus-visible{outline: none;box-shadow: var(--shadow-focus);}
@media (prefers-reduced-motion: reduce){
.dtoggle, .dtoggle__knob{transition: none;}
}
.dlist__row.is-muted .dlist__title,
.dlist__row.is-muted .dlist__meta{color: var(--color-text-subtle);}
.dlist__toggle{display: flex;flex: none;align-items: center;margin: 0 0 0 auto;}
.dlist__title .dstatus{margin-left: var(--space-2);}
.dform__grid--experience{
margin-top: var(--space-4);
padding-top: var(--space-4);
border-top: 1px dashed var(--color-border);
}
.dform__grid--experience .field--wide{grid-column: 1 / -1;}
.field__pair{display: flex;align-items: center;gap: var(--space-2);}
.field__pair .input{min-width: 0;}
.field__pair-dash{color: var(--color-text-subtle);}
.dform__grid--experience .dform__foot{margin: 0;}
.hw-status{flex: none;}
.hw-facts{
display: flex;
flex-wrap: wrap;
gap: var(--space-2) var(--space-4);
margin: 0 0 var(--space-3);
padding: 0;
list-style: none;
color: var(--color-text-muted);
font-size: var(--text-caption);
}
.hw-facts li{display: inline-flex;align-items: center;gap: var(--space-1);}
.dsubs__note, .dsubs__locked{
display: flex;
align-items: flex-start;
gap: var(--space-2);
margin: 0 0 var(--space-4);
padding: var(--space-3);
border-radius: var(--radius-md);
font-size: var(--text-label);
line-height: 1.55;
}
.dsubs__note{border: 1px solid var(--c-info-line);background: var(--c-info-bg);color: var(--c-n-800);}
.dsubs__locked{border: 1px solid var(--color-border);background: var(--color-bg-subtle);color: var(--color-text-muted);}
.hw-result{display: flex;flex-wrap: wrap;gap: var(--space-4);margin-bottom: var(--space-4);}
.hw-result__cell{
display: flex;
flex-direction: column;
gap: 2px;
min-width: 120px;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
}
.hw-result__cell--grade{border-color: var(--c-success-line);background: var(--c-success-bg);}
.hw-result__value{font-family: var(--font-display);font-size: var(--text-h2);font-weight: var(--weight-extrabold);letter-spacing: var(--tracking-tight);}
.hw-result__value small{color: var(--color-text-subtle);font-size: var(--text-body);font-weight: var(--weight-semibold);}
.hw-result__label{color: var(--color-text-muted);font-size: var(--text-caption);font-weight: var(--weight-semibold);}
.dfile{display: flex;flex-direction: column;gap: var(--space-2);}
.dfile__zone[hidden]{display: none;}
.dfile__zone{
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-1);
padding: var(--space-5) var(--space-4);
border: 1.5px dashed var(--color-border-strong);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
color: var(--color-text-muted);
font-size: var(--text-sm);
text-align: center;
cursor: pointer;
transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.dfile__zone:hover, .dfile__zone:focus-visible{
outline: none;
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
}
.dfile.is-dragging .dfile__zone{
border-color: var(--color-primary);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
}
.dfile__icon{color: var(--color-primary);}
.dfile__link{color: var(--color-primary-hover);font-weight: var(--weight-semibold);text-decoration: underline;}
.dfile__hint{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dfile__picked[hidden]{display: none;}
.dfile__picked{
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
}
.dfile__picked-icon{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: var(--radius-md);
background: var(--color-primary-soft);
color: var(--color-primary-hover);
}
.dfile__picked-body{display: flex;flex-direction: column;gap: 1px;flex: 1 1 auto;min-width: 0;}
.dfile__picked-name{font-size: var(--text-sm);font-weight: var(--weight-semibold);overflow-wrap: anywhere;}
.dfile__picked-size{color: var(--color-text-subtle);font-size: var(--text-caption);}
.dform__foot--split{display: flex;flex-wrap: wrap;align-items: center;gap: var(--space-2);}
.dform__foot--split .dform__note{
display: flex;
align-items: center;
gap: var(--space-2);
flex: 1 1 100%;
margin: 0 0 var(--space-1);
color: var(--color-text-muted);
font-size: var(--text-caption);
}
.dsubs__file--teacher{color: var(--c-success);}
.dsubs__start{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
margin-top: var(--space-3);
}
.dsubs__start .field__hint{flex: 1 1 240px;}
.dsubs__form--review{
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
width: 100%;
}
.dsubs__form--review > .field,
.dsubs__form--review > .dform__foot,
.dsubs__form--review > .dsubs__note{
grid-column: 1 / -1;
}
.dsubs__returned{
border: 1px solid var(--c-warning-line);
background: var(--c-warning-bg);
border-radius: var(--radius-md);
padding: var(--space-4);
margin-bottom: var(--space-4);
}
.dsubs__returned-head{
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-2);
font-weight: var(--weight-bold);
color: var(--c-warning);
}
.dsubs__returned .dsubs__note{margin: var(--space-3) 0 0;}
.dphoto{
display: flex;
align-items: flex-start;
gap: var(--space-5);
flex-wrap: wrap;
}
.dphoto__preview{
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 120px;
height: 150px;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-bg-subtle);
color: var(--color-text-subtle);
overflow: hidden;
}
.dphoto__preview img{display: block;width: 100%;height: 100%;object-fit: cover;}
.dphoto__preview--empty{border-style: dashed;}
.dphoto__body{flex: 1 1 260px;min-width: 0;}
.dphoto__body .field{margin-bottom: var(--space-2);}
.dedu-block{
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px dashed var(--color-border);
}
.dedu-block__title{
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font-family: var(--font-display);
font-size: var(--text-body);
font-weight: var(--weight-bold);
}
.dedu-block__hint{margin: 0;color: var(--color-text-muted);font-size: var(--text-caption);}
.dedu-block__foot{margin: 0;font-size: var(--text-caption);}
.dedu-block__foot a{display: inline-flex;align-items: center;gap: var(--space-1);font-weight: var(--weight-semibold);}
.dedu-block .dedu-form{padding-top: 0;border-top: 0;}
@media (max-width: 640px){
.dedu-doc{flex-wrap: wrap;}
.dedu-doc__actions{width: 100%;justify-content: flex-end;}
}
.dash-menu__alert.is-unread{
background: var(--color-primary-soft);
border-left: 3px solid var(--color-primary);
}
.dash-menu__alert.is-unread strong{font-weight: var(--weight-bold);}
.dash-menu__alert a{color: var(--color-text);}
.dash-menu__alert a:hover{color: var(--color-primary);}
.dash-menu__all{
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-top: var(--space-2);
padding: var(--space-2) var(--space-3);
border-top: 1px solid var(--color-border);
color: var(--color-primary);
font-size: var(--text-label);
font-weight: var(--weight-semibold);
}
.drev-form{flex-wrap: wrap;}
.drev-form__body{
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--space-3);
width: 100%;
padding-top: var(--space-2);
}
.drev-form__body .field{margin-bottom: 0;flex: 1 1 180px;}
.dreq__propose[open]{width: 100%;}
.dreq__propose .drowact__form{margin-top: var(--space-2);}
.dreq__propose .field{margin-bottom: var(--space-2);}
.tfield{position: relative;min-width: 0;}
.tfield.is-enhanced .tfield__native{display: none;}
.tfield__trigger{
display: flex;
align-items: center;
gap: var(--space-2);
width: 100%;
min-height: 44px;
padding: 0 var(--space-3);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text);
font-family: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
cursor: pointer;
transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.tfield__trigger:hover{border-color: var(--c-primary-300);}
.tfield__trigger:focus-visible{outline: none;border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
.tfield.is-open .tfield__trigger{border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
.tfield__icon{display: inline-flex;color: var(--color-primary);}
.tfield__value{flex: 1 1 auto;}
.tfield__chevron{color: var(--color-text-subtle);transition: transform var(--t-base) var(--ease-out);}
.tfield.is-open .tfield__chevron{transform: rotate(180deg);}
.tfield__popover{
position: absolute;
z-index: var(--z-dropdown);
top: calc(100% + 6px);
left: 0;
width: 300px;
padding: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--color-surface);
box-shadow: var(--shadow-xl);
animation: tfield-in var(--t-base) var(--ease-out);
}
@keyframes tfield-in{
from{opacity: 0;transform: translateY(-4px);}
to{opacity: 1;transform: translateY(0);}
}
.tfield__head{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.tfield__head-label{color: var(--color-text-subtle);font-size: var(--text-caption);font-weight: var(--weight-semibold);text-transform: uppercase;letter-spacing: var(--tracking-caps);}
.tfield__head-value{font-family: var(--font-display);font-size: var(--text-h3);font-weight: var(--weight-bold);}
.tfield__section + .tfield__section{margin-top: var(--space-3);}
.tfield__section-label{display: block;margin-bottom: var(--space-2);color: var(--color-text-muted);font-size: var(--text-caption);font-weight: var(--weight-semibold);}
.tfield__grid{display: grid;gap: 6px;}
.tfield__grid--hours{grid-template-columns: repeat(6, minmax(0, 1fr));}
.tfield__grid--minutes{grid-template-columns: repeat(6, minmax(0, 1fr));}
.tfield__cell{
padding: 0.4rem 0;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: var(--color-bg-subtle);
color: var(--color-text);
font-family: inherit;
font-size: var(--text-caption);
font-weight: var(--weight-medium);
cursor: pointer;
transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.tfield__cell:hover{background: var(--c-primary-50);color: var(--c-primary-800);}
.tfield__cell.is-selected{background: var(--color-primary);color: #fff;font-weight: var(--weight-bold);}
.tfield__cell:focus-visible{outline: none;border-color: var(--color-primary);box-shadow: var(--shadow-focus);}
.tfield__foot{
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-4);
padding-top: var(--space-3);
border-top: 1px solid var(--color-border);
}
.tfield__quick{
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0.35rem 0.6rem;
border: 1px solid var(--color-border);
border-radius: var(--radius-pill);
background: var(--color-surface);
color: var(--color-text-muted);
font-family: inherit;
font-size: var(--text-caption);
font-weight: var(--weight-semibold);
cursor: pointer;
}
.tfield__quick:hover{border-color: var(--color-primary);color: var(--color-primary);}
.tfield__done{margin-left: auto;}
.tfield__popover--calendar{width: 320px;}
.tfield__cal-head{display: flex;align-items: center;justify-content: space-between;gap: var(--space-2);margin-bottom: var(--space-3);}
.tfield__cal-title{font-family: var(--font-display);font-size: var(--text-body);font-weight: var(--weight-bold);text-transform: capitalize;}
.tfield__nav{
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-muted);
cursor: pointer;
}
.tfield__nav:hover{border-color: var(--color-primary);color: var(--color-primary);}
.tfield__cal-weekdays, .tfield__cal-grid{display: grid;grid-template-columns: repeat(7, minmax(0, 1fr));gap: 2px;}
.tfield__cal-weekday{padding: var(--space-1) 0;color: var(--color-text-subtle);font-size: 11px;font-weight: var(--weight-semibold);text-align: center;}
.tfield__cal-day{
padding: 0.55rem 0;
border: 1px solid transparent;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-subtle);
font-family: var(--font-display);
font-size: var(--text-body);
font-weight: var(--weight-semibold);
line-height: 1;
cursor: pointer;
transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.tfield__cal-day:not(:disabled){
border-color: var(--c-success-line);
background: var(--c-success-bg);
color: var(--c-success);
animation: cal-pulse 2.8s var(--ease-in-out) infinite;
}
.tfield__cal-day:not(:disabled):hover{background: var(--c-success-line);}
.tfield__cal-day.is-today:not(:disabled){border-color: var(--c-success);}
.tfield__cal-day.is-selected,
.tfield__cal-day.is-selected:not(:disabled){
background: var(--color-primary);
border-color: var(--color-primary);
color: #fff;
font-weight: var(--weight-bold);
animation: none;
}
.tfield__cal-day:disabled{color: var(--c-n-300);cursor: default;}
@keyframes cal-pulse{
0%, 100%{box-shadow: 0 0 0 0 transparent;}
50%{box-shadow: 0 0 0 4px var(--c-success-bg);}
}
@media (prefers-reduced-motion: reduce){
.tfield__cal-day:not(:disabled){animation: none;}
}
@media (max-width: 700px){
.tfield__popover{
position: fixed;
left: var(--space-3);
right: var(--space-3);
top: auto;
bottom: var(--space-3);
width: auto;
}
.tfield__grid--hours, .tfield__grid--minutes{grid-template-columns: repeat(6, minmax(0, 1fr));}
}
.tfield__value.is-placeholder{color: var(--color-text-subtle);font-weight: var(--weight-regular);}
.tfield.is-up .tfield__popover{top: auto;bottom: calc(100% + 6px);}