/* Shared hierarchy: edit controls here instead of sizing each screen independently. */
:root{--type-body:14px;--type-control:14px;--type-label:13px;--type-note:12px;--type-nav:15px;--type-section:16px;--type-title:24px;--control-height:42px;--control-line:20px}
body{font-size:var(--type-body);line-height:1.5}
button,input,select,textarea{font-family:Inter,system-ui,sans-serif;font-size:var(--type-control);line-height:var(--control-line)}
h1{font-size:var(--type-title)}h2,.section-heading h2{font-size:var(--type-section)}
.primary,.secondary,.danger,.profile-menu button,.section-heading button,.list-actions input,.field input,.field select,.settings-form input[type=time]{font-size:var(--type-control);line-height:var(--control-line)}
.primary,.secondary,.danger,.list-actions input{min-height:var(--control-height)}
.field,.field-radio legend,.toggle-line{font-size:var(--type-label)}
.field-radio span{font-size:var(--type-control)}
.tabs button{font-size:var(--type-nav);line-height:22px}
.list-actions input{font-weight:400}.list-actions button{height:var(--control-height);white-space:nowrap}
.list-actions input::placeholder{font-size:inherit;color:#a99bb4}
.muted,.card small{font-size:var(--type-note)}.student-card>small{font-size:var(--type-label)}
.nav-row{min-height:64px}.nav-row .tabs{align-self:stretch;align-items:center}
.calendar-controls{align-items:center}.cal-modes button{font-size:var(--type-label);line-height:20px;min-height:34px;padding:6px 14px}
.calendar-controls [data-direction="previous"] img{transform:rotate(90deg)}
.calendar-controls [data-direction="next"] img{transform:rotate(-90deg)}
.cal-axis span,.cal-head>div:not(:first-child),.cal-event small{font-size:var(--type-note)}
.cal-event strong{font-size:var(--type-label)}
.date,.slot{font-size:16px}.public-main h1{font-size:19px}
.calendar-enter{animation:calendar-reveal .18s ease-out}
@keyframes calendar-reveal{from{opacity:.65;transform:translateY(4px)}to{opacity:1;transform:none}}
.empty-students{grid-column:1/-1;text-align:center;padding:46px 24px;border:1px solid #e9e1f1;border-radius:18px;background:white}
.empty-students h2{margin-bottom:12px}.empty-students p{font-size:var(--type-body);line-height:1.7;max-width:480px;margin:auto;color:#807089}
.guide-dialog{width:min(520px,calc(100vw - 28px));max-height:calc(100dvh - 32px);overflow:auto}
.guide-intro{display:flex;align-items:center;gap:18px;padding:20px;margin:22px 0;background:#f7f2fc;border-radius:14px}
.guide-intro img{width:54px;height:54px;object-fit:contain;flex-shrink:0}
.guide-intro p{font-size:var(--type-body);line-height:1.65;color:#705981}
.guide-steps{list-style:none;padding:0;margin:0;display:grid;gap:20px}
.guide-steps li{display:flex;align-items:flex-start;gap:13px}
.guide-step-number{display:grid;place-items:center;flex:0 0 28px;height:28px;border-radius:50%;background:#f1e9f8;color:#7c5c9a;font-size:var(--type-label);font-weight:600}
.guide-steps strong{display:block;font-size:var(--type-body);font-weight:600;color:#51405f;margin:2px 0 5px}
.guide-steps p{color:#85738f;font-size:var(--type-label);line-height:1.65}
.guide-footer{margin-top:22px;color:#9987a5}
.no-slots{padding:30px 12px 20px;text-align:center}
.no-slots h2{font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.6;color:#7a638b;margin:0}
.booking-success{animation:none}
.booking-success.is-entering{animation:booking-confirmed .22s ease-out}
.booking-success.is-leaving{overflow:hidden;animation:confirmation-leave .2s ease-in forwards;pointer-events:none}
@keyframes confirmation-leave{from{height:var(--banner-height);opacity:1}to{height:0;padding-top:0;padding-bottom:0;margin-bottom:0;border-top-width:0;border-bottom-width:0;opacity:0}}
.public-lesson.just-booked{border-radius:12px;background:#f0f7ec;animation:lesson-highlight 8s ease-out both}
@keyframes lesson-highlight{0%,45%{background:#edf6e7;box-shadow:0 0 0 1px #d6e5cc}100%{background:transparent;box-shadow:0 0 0 1px transparent}}
@media(max-width:700px){
 :root{--type-title:22px}
 .nav-row{min-height:0}.list-actions{align-items:center}.list-actions input{font-size:16px}.list-actions .primary{font-size:16px}
 .field input,.field select{font-size:16px}.list-actions>.secondary{margin-left:auto}
 .guide-intro{padding:16px;gap:12px}.guide-intro img{width:44px;height:44px}.guide-dialog>.actions{flex-wrap:wrap}
 .guide-dialog>.actions .primary{flex:1}.no-slots{padding:24px 4px 12px}
}
@media(prefers-reduced-motion:reduce){.calendar-enter,.booking-success.is-entering,.booking-success.is-leaving,.public-lesson.just-booked{animation:none!important}}
.public-lesson{padding:16px 12px;margin-inline:-12px}
/* Supporting text stays readable without competing with names and times. */
.tabs button:not(.active){color:#7d6c89}
.list-actions input::placeholder{color:#7f6f8b}
.guide-steps p,.guide-footer{color:#7d6a88}
.cal-axis span{color:#7b6987}
.card-time.today{color:#9e5b32}.card-time.tomorrow{color:#876d1d}
@media(max-width:700px){.settings-form .schedule-row input[type=time]{font-size:16px}.settings-form .schedule-row label{font-size:12px}}
.count,.cancelled-label,.package-balance,.lesson-confirmed,.date small,.slot small,.cal-slot small{font-size:var(--type-note)}
.student-card .soon{font-size:11px;line-height:16px;padding:3px 6px}
.public-lesson strong{font-size:16px;line-height:1.5}.public-lesson .deadline-hint{font-size:var(--type-note)}

/* Student space: subject-led rows and brief, action-bound motion. */
.public-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.public-intro-copy{flex:1;min-width:0}.public-intro-copy h1{overflow-wrap:anywhere}
.public-intro .public-student{margin:7px 0 0;font-size:var(--type-label)}
.public-intro-mascot{width:142px;height:94px;object-fit:contain;flex-shrink:0;user-select:none;pointer-events:none}
.public-intro-mascot.is-arriving{animation:student-mascot-hello .45s ease-out both}
.public-content{min-width:0}.public-content:focus{outline:none}
.public-enter{animation:student-pane-enter .18s ease-out}
.public-lesson{gap:16px}.public-subject-icon{width:44px;height:44px;object-fit:contain;flex:0 0 44px}
.public-lesson-copy{flex:1;min-width:0}.public-lesson-copy small{font-size:var(--type-label);overflow-wrap:anywhere}
.public-lesson .actions{flex-shrink:0}
.public .date{transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.public .slot[data-act]{transition:background-color .15s ease,border-color .15s ease}
.public .slot[data-act]:hover:not(:disabled){background:#f2ecf8;border-color:#bca6cf}
.student-celebration{width:340px;height:220px}
.student-celebration .mascot-character{width:150px;height:180px;left:8px;bottom:-12px}
.student-celebration .mascot-bubble{left:112px;bottom:148px;max-width:214px;font-size:11px;line-height:1.6;padding:13px 15px}
@keyframes student-pane-enter{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes student-mascot-hello{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:700px){.public-intro{gap:10px;margin-bottom:12px}.public-intro-mascot{width:92px;height:78px}.public-intro-copy h1{font-size:17px}.public-subject-icon{width:36px;height:36px;flex-basis:36px}.public-lesson{gap:12px}.public-lesson-copy{min-width:170px}.student-celebration{left:4px;width:min(340px,calc(100vw - 4px))}.student-celebration .mascot-bubble{max-width:calc(100vw - 124px)}}
@media(prefers-reduced-motion:reduce){.public-enter,.public-intro-mascot.is-arriving{animation:none!important}.public .date,.public .slot[data-act]{transition:none}}
/* Keep the desktop congratulations inside the left margin of the booking panel. */
.student-celebration{width:240px;height:240px}
.student-celebration .mascot-bubble{left:8px;bottom:178px;max-width:214px}
.student-celebration .mascot-bubble:after{left:60px}
@media(max-width:700px){.student-celebration{width:240px}.student-celebration .mascot-bubble{left:8px;max-width:min(214px,calc(100vw - 24px))}}

/* Brand signature and shared tab baseline. */
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand .logo{flex-shrink:0}.brand-company{font:400 12px/1.45 Inter,system-ui,sans-serif;color:#f8f4ff;white-space:nowrap}
.header.compact .brand-company,.public .brand-company{color:#80708c}
.nav-row .tabs{align-items:stretch}.nav-row .tabs button{align-self:stretch;display:flex;align-items:center;position:relative;border-bottom:0}
.nav-row .tabs .active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:#9574b4}
.public .slot.occupied.own{background:#edf6e7;border-color:#cfe1c3;color:#4e713e;opacity:1}
.public .slot.occupied.own small{color:#56784a;font-weight:500}
.public .slot.occupied:not(.own){background:#f3f1f6;border-color:#e5dfeb;color:#83748e}
.public-intro-mascot{width:190px;height:108px}
.date-enter{animation:date-results-enter .18s ease-out}
@keyframes date-results-enter{from{opacity:.55;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:700px){.brand{flex-direction:column;align-items:flex-start;gap:3px;max-width:140px}.brand-company{font-size:11px;white-space:normal}.header-top .profile{max-width:60%}.header-top .header-name{min-width:0}.public .header{gap:12px}.public .header>.muted{white-space:nowrap}.public-intro-mascot{width:122px;height:90px}}
@media(prefers-reduced-motion:reduce){.date-enter{animation:none!important}}
@media(max-width:700px){.nav-row{border-bottom:0}.nav-row .tabs{border-bottom:1px solid #e7dfee}}
@media(max-width:700px){.header-top .profile{max-width:calc(100% - 124px)}}

/* Student resources use a quiet hierarchy, with an explicit connection state. */
.student-resources h2{font-size:17px;line-height:1.45;margin:0}
.student-resources h3{font-size:13px;font-weight:600;color:#51445d;margin:0 0 10px}
.student-resources p{font-size:13px;line-height:1.65;margin:12px 0 16px}
.student-resources .secondary{font-size:13px;min-height:40px}
.integration-heading{display:flex;align-items:center;gap:12px}
.integration-state-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#edf6e7;color:#567846;font-size:22px;font-weight:600;flex-shrink:0}
.needs-connection .integration-state-symbol{background:#fcecea;color:#b24e48}
.integration-state-label{display:block;font-size:12px;color:#648253;margin-top:3px}
.needs-connection .integration-state-label{color:#b24e48}
.resource-divider{border-top:1px solid #eee8f3;margin-top:20px;padding-top:18px}
.resource-divider p{margin-bottom:0}
.resource-link{color:#77578f;font-size:13px;font-weight:500;line-height:1.6;text-underline-offset:4px;overflow-wrap:anywhere}
.resource-card .section-heading{margin-bottom:14px}
.student-resources .booking-link>.secondary{width:100%}
.student-package-list{background:white;border:1px solid #e9e1f0;border-radius:18px;padding:8px 22px}
.package-readonly{cursor:default}.package-readonly:hover{background:white}.package-readonly:last-child{border-bottom:0}
@media(max-width:700px){.public .tabs{gap:0;justify-content:space-between}.public .tabs button{font-size:12px;padding-inline:5px;white-space:nowrap}.student-package-list{padding:4px 14px}.package-readonly{gap:10px}.package-readonly>img{width:38px;height:38px}.package-readonly .package-balance{white-space:nowrap}.package-readonly strong{font-size:13px}}
/* Connection actions change emphasis once setup is complete. */
.student-resources .primary{font-size:13px;min-height:40px}
.telegram-group-action{display:flex;align-items:center;justify-content:center;gap:9px;text-decoration:none;margin-top:18px;width:100%;box-sizing:border-box}
.telegram-group-action svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.student-resources .integration-recheck{display:block;margin-top:14px;font-size:12px;line-height:1.6;color:#8a7898;text-decoration-color:#c7b9d2}
.optional-field{font-size:12px;font-weight:400;color:#96869f;margin-left:5px}
/* Resource panels share the same main action and centered maintenance link. */
.student-resources .integration-recheck{margin-inline:auto;text-align:center;min-height:36px;padding:7px 8px}
.resource-symbol{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#f1eaf8;flex-shrink:0}
.resource-symbol img{width:23px;height:23px;opacity:.55}
.video-room-card .resource-action{margin-top:0}
@media(max-width:700px){
 .student-resources .secondary,.student-resources .primary{font-size:14px;min-height:44px}
 .student-resources .integration-recheck{font-size:13px;min-height:44px}
 .student-resources .booking-link>a{font-size:13px;min-height:44px;display:flex;align-items:center;justify-content:center;margin-top:8px}
}
@media(max-width:700px){
 .settings-form .schedule-row{display:grid;grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);gap:8px;align-items:center}
 .settings-form .schedule-row>label{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:14px;min-height:28px}
 .settings-form .schedule-row input[type=time]{width:100%;min-width:0;box-sizing:border-box;min-height:44px}
 .public .tabs button{font-size:13px;line-height:1.4;padding:12px 2px;white-space:normal;flex:1;min-height:48px}
}
/* Дата и время занятия — один крупный элемент; предмет, день недели и длительность — вторым планом. */
.lesson-row{align-items:center;gap:16px;min-height:76px}
.lesson-row .lesson-when{flex:1 1 200px;min-width:0;display:grid;gap:3px}
.lesson-row .lesson-datetime{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px;font-size:18px;line-height:1.35;font-weight:600;color:#5b3f7c}
.lesson-row .lesson-datetime time{font-size:inherit;font-weight:inherit;color:#76589e}
.lesson-row .lesson-datetime time:before{content:'·';margin-right:10px;color:#b9a6cd}
.lesson-row .lesson-when small{display:block;margin:0;font-size:var(--type-label);color:#806e8a;text-transform:none}
.lesson-row.is-cancelled .lesson-datetime{color:#a094ad;text-decoration:line-through;text-decoration-thickness:1px}
.panel-note{margin:-8px 0 6px}
.student-card .card-time,.student-card .card-time time{font-size:20px;font-weight:600}
.booking-confirm{gap:6px}
.booking-confirm .booking-confirm-date{font-size:20px;font-weight:600;color:#5b3f7c}
.booking-confirm>strong{font-size:40px;line-height:1.1}
.booking-confirm .booking-confirm-note{font-size:var(--type-label)}
/* Календарь: час выше (78 px), название ученика первым, подпись времени и предмет — ниже. */
.cal-column{background:repeating-linear-gradient(to bottom,#fff 0,#fff calc(var(--hour,60px) - 1px),#f0eaf5 calc(var(--hour,60px) - 1px),#f0eaf5 var(--hour,60px))}
.calendar-grid{min-width:calc(50px + var(--days)*124px)}
.cal-head,.cal-body{grid-template-columns:50px repeat(var(--days),minmax(124px,1fr))}
.calendar-dialog .calendar-grid{min-width:calc(50px + var(--days)*112px)}
.calendar-dialog .cal-head,.calendar-dialog .cal-body{grid-template-columns:50px repeat(var(--days),minmax(112px,1fr))}
.cal-event{gap:1px;padding:4px 7px;justify-content:flex-start}
.cal-event strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.cal-event small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.cal-event.is-short{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;padding-block:2px}
.cal-event.is-short small:nth-of-type(2){display:none}
.cal-event.is-short .resize-handle{display:none}
/* Размеры касания и настройки */
.brand .logo{min-height:40px;display:inline-flex;align-items:center}
.settings-form .schedule-row input[type=checkbox],.toggle-line input{width:20px;height:20px;flex:0 0 20px;margin:0}
.settings-form .schedule-row>label{display:flex;align-items:center;gap:10px;min-height:44px}
.teacher-row{gap:16px;flex-wrap:wrap}
.teacher-name{display:grid;gap:3px;flex:1 1 180px;min-width:0}
.teacher-name small{margin:0;font-size:var(--type-label)}
.teacher-row.is-off strong{color:#a094ad}
.teacher-row .actions{margin:0}
.load-failed{text-align:center}
.load-failed .actions{justify-content:center}
@media(max-width:700px){
 .lesson-row{align-items:flex-start;gap:10px;padding-block:16px}
 .lesson-row .lesson-datetime{font-size:17px;column-gap:8px}
 .lesson-row .lesson-datetime time:before{margin-right:8px}
 .lesson-row .actions{width:100%;margin-left:0;justify-content:flex-start}
 .student-card .card-time,.student-card .card-time time{font-size:18px}
}
.cal-event.lesson strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere}
.cal-event.is-short strong{display:block;white-space:nowrap;-webkit-line-clamp:unset}
/* ===== Полировка: отступы, шапка и поиск на телефоне, вкладки, календарь ===== */
.wide{display:inline}
.btn-icon{display:none;width:20px;height:20px}
.lesson-row .lesson-datetime .tz{align-self:center;font-size:12px;font-weight:500;letter-spacing:.02em;color:#9b8aa9}
.empty-copy{padding:2px 0 4px}
.panel .empty-copy:last-child{padding-bottom:0}
/* Ссылка-подпункт под кнопкой в карточках справа: ближе к кнопке и к краю карточки */
.student-resources .integration-recheck{margin-top:6px;min-height:32px;padding:4px 8px;line-height:1.4}
.student-resources .integration-card:has(>.integration-recheck:last-child),.student-resources .resource-card:has(>.integration-recheck:last-child){padding-bottom:14px}
/* Вкладки: подчёркивание активной вкладки лежит на общей линии при любой высоте кнопок */
.public .tabs{align-items:stretch}
.public .tabs button{display:flex;align-items:center;justify-content:center;margin-bottom:-1px;border-bottom:3px solid transparent;text-align:center}
.public .tabs button.active{border-bottom-color:#9574b4}
/* Поиск с лупой */
.search-field{position:relative;display:block}
.search-field .search-icon{position:absolute;left:15px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:#9a89a8;pointer-events:none}
.list-actions .search-field input{width:220px;padding-left:42px}
/* Календарь: имя ученика в одну строку, полное — во всплывающей подсказке */
.cal-event.lesson strong{display:block;white-space:nowrap;-webkit-line-clamp:unset;overflow:hidden;text-overflow:ellipsis}
/* Разделители занятий ученика совпадают по ширине с содержимым */
.public-lesson{position:relative;border-bottom:0}
.public-lesson:not(:last-child):after{content:'';position:absolute;left:12px;right:12px;bottom:0;height:1px;background:#f0ebf4}
/* Настройки: ровный ритм между полями */
.settings-form .form-grid{gap:16px 20px}
.settings-form .form-grid .field{margin:0}
.settings-form .toggle-line{margin:22px 0 30px}
@media(max-width:700px){
 .wide{display:none}
 /* Шапка: показатели крупнее и свободнее, хорёк — под ними, внутри шапки */
 .header.hero{padding-bottom:0}
 .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));padding-right:0;min-height:0;column-gap:0;row-gap:0}
 .hero-stat{padding:10px 12px 8px}
 .hero-stat span{font-size:12px}
 .hero-stat strong{font-size:34px}
 .hero-stat small{font-size:12px;padding-bottom:5px}
 .hero-stat:nth-child(3){border-right:1px solid #ffffff15}
 .hero-stat:nth-child(n+3){border-top:1px solid #ffffff15}
 .hero-mascot{position:static;grid-column:1/-1;justify-self:end;width:150px;height:62px;margin:-2px 6px 0 0}
 .hero-calendar .hero-stats{display:none}
 .header.hero-calendar{padding-bottom:12px}
 .section-heading>button{width:44px;min-width:44px;padding:0;font-size:22px;line-height:1}
 /* Поиск и «Добавить» в одной строке, без обрезанной подсказки */
 .list-actions{gap:10px}
 .search-field{flex:1;min-width:0}
 .list-actions .search-field input{width:100%}
 /* Календарь: «Указать рабочее время» — значок в строке вкладок */
 .calendar-nav{flex-wrap:nowrap;align-items:center;gap:12px;border-bottom:1px solid #e7dfee}
 .calendar-nav .tabs{width:auto;flex:1;min-width:0;border-bottom:0}
 .calendar-nav .list-actions{width:auto;flex:0 0 auto;padding:0}
 .work-hours-button{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;display:inline-grid;place-items:center}
 .work-hours-button .btn-icon{display:block}
 .work-hours-button .btn-label{display:none}
 /* Ссылка под кнопкой остаётся нажимаемой, но не оставляет пустоты */
 .student-resources .integration-recheck{margin-top:2px;margin-bottom:-8px}
}
@media(max-width:340px){
 .hero-stat strong{font-size:30px}
 .search-field input::placeholder{color:transparent}
}
/* Карточки учеников: блок времени и остаток выровнены по нижнему краю во всех карточках ряда */
.student-card{grid-template-rows:1fr auto auto;align-content:stretch}
.field-radio legend{padding:0}
/* Планшет: неделя целиком помещается без горизонтальной прокрутки */
@media(min-width:701px) and (max-width:1000px){
 .calendar-grid:not(.x){min-width:calc(50px + var(--days)*92px)}
 .cal-head,.cal-body{grid-template-columns:50px repeat(var(--days),minmax(92px,1fr))}
}