@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--ink:#102a43;--navy:#123a70;--blue:#176bff;--orange:#ff7a32;--mint:#19b885;--paper:#f5f7fb;--muted:#6b7b8d;--border:#e7ebf1}*{box-sizing:border-box}body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper)}h1,h2,h3,h4,h5,.navbar-brand{font-family:'Manrope',sans-serif}.navbar{min-height:76px}.navbar-brand{font-size:1.3rem;color:var(--ink)}.navbar-brand span{color:var(--orange)}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--blue),#6247e9);color:white}.btn{border-radius:12px;font-weight:700;padding:.7rem 1.1rem}.btn-primary{background:var(--blue);border-color:var(--blue)}.form-control,.form-select{border-radius:12px;border-color:#dce2ea;padding:.75rem}.form-control:focus,.form-select:focus{border-color:#6b9cff;box-shadow:0 0 0 .2rem rgba(23,107,255,.12)}
.hero{background:radial-gradient(circle at 15% 30%,#fff4ea,transparent 30%),linear-gradient(135deg,#f6f9ff,#eef3ff);padding:7rem 0}.eyebrow,.page-head span,.section-heading span{font-size:.8rem;font-weight:800;letter-spacing:.12em;color:var(--orange)}.hero h1{font-size:clamp(3rem,6vw,5.5rem);line-height:.96;letter-spacing:-.06em;margin:1rem 0 1.5rem}.hero h1 span{color:var(--blue)}.hero p{font-size:1.2rem;color:var(--muted);max-width:620px}.hero-proof{display:flex;gap:2rem;margin-top:3rem}.hero-proof div{display:flex;flex-direction:column}.hero-proof strong{font-size:1.3rem}.hero-proof small{color:var(--muted)}.demo-card{background:white;border:1px solid #e7ecf5;border-radius:28px;padding:2rem;box-shadow:0 30px 70px rgba(21,55,105,.15);transform:rotate(1.5deg)}.teacher-line{display:flex;gap:1rem;align-items:center}.photo{width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,#ffb36b,#ff6c5f);display:grid;place-items:center;color:white;font-weight:800}.teacher-line h4{margin:.25rem 0}.teacher-line span,.teacher-line small{color:var(--muted)}.lesson-time{margin:2rem 0;padding:1.25rem;background:#f2f6ff;border-radius:18px;display:flex;justify-content:space-between;align-items:center}.lesson-time div{display:flex;flex-direction:column}.lesson-time>span{background:#dff8ef;color:#087f5b;border-radius:20px;padding:.4rem .8rem;font-weight:700}.section{padding:6rem 0;background:white}.section-heading{text-align:center;margin-bottom:3rem}.section-heading h2{font-size:2.5rem}.feature{padding:2rem;border:1px solid var(--border);border-radius:22px;height:100%}.feature>i{font-size:1.6rem;color:var(--blue);display:inline-grid;place-items:center;width:55px;height:55px;background:#eaf1ff;border-radius:16px}.feature h4{margin:1.4rem 0 .5rem}.feature p{color:var(--muted);margin:0}
.sidebar{background:white;border:1px solid var(--border);border-radius:22px;padding:1.25rem;position:sticky;top:100px}.user-card{text-align:center;padding:1.2rem}.avatar{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1rem;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;font-size:1.6rem;font-weight:800;box-shadow:0 0 0 7px #edf3ff}.user-card small{color:var(--muted)}.user-card h5{margin:.2rem 0}.role-pill,.status{font-size:.72rem;font-weight:800;border-radius:99px;padding:.25rem .65rem}.role-pill{background:#fff0e8;color:#c94d0b}.side-nav{display:grid;gap:.4rem;margin-top:1rem}.side-nav a{display:flex;gap:.8rem;align-items:center;color:#516273;text-decoration:none;padding:.85rem 1rem;border-radius:12px;font-weight:600}.side-nav a:hover{background:#eef4ff;color:var(--blue)}.welcome-banner{background:linear-gradient(120deg,#103a70,#245cad);border-radius:24px;padding:2rem 2.2rem;color:white;display:flex;justify-content:space-between;overflow:hidden}.welcome-banner span{color:#a9ccff}.welcome-banner p{margin:0;color:#d5e5ff}.welcome-banner>i{font-size:6rem;opacity:.15}.metric{color:white;border-radius:20px;padding:1.5rem;display:grid;grid-template-columns:auto 1fr;gap:.1rem 1rem;box-shadow:0 12px 30px rgba(20,44,80,.1)}.metric i{font-size:1.6rem;grid-row:1/3}.metric strong{font-size:2rem}.metric.blue{background:linear-gradient(135deg,#3276ed,#1956c2)}.metric.green{background:linear-gradient(135deg,#25bf92,#138c6e)}.metric.purple{background:linear-gradient(135deg,#8a5bf5,#6335d0)}.panel{background:white;border:1px solid var(--border);border-radius:20px;padding:1.5rem;box-shadow:0 8px 25px rgba(28,48,74,.04)}.panel-head,.page-head{display:flex;justify-content:space-between;align-items:center}.panel-head h3,.panel-head p{margin:0}.panel-head p,.page-head p{color:var(--muted)}.panel-head a{text-decoration:none;font-weight:700}.session-row{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-top:1px solid var(--border)}.date-tile{width:48px;height:52px;border-radius:12px;background:#eef4ff;display:grid;place-items:center;line-height:1}.date-tile small{color:var(--blue)}.status.booked{background:#e6f0ff;color:#1556ba}.status.completed{background:#dcf8ef;color:#087659}.status.cancelled{background:#ffebe8;color:#c5392f}.empty{text-align:center;padding:3rem}.empty>i{font-size:3rem;color:#aab6c4}.page-head{margin:1rem 0 2rem}.page-head h1{font-size:2.1rem;margin:.3rem 0}.teacher-card{background:#fff;border:1px solid var(--border);border-radius:22px;overflow:hidden;height:100%;transition:.2s}.teacher-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(29,53,85,.1)}.teacher-cover{height:110px;position:relative;background:linear-gradient(135deg,#123d75,#2672d5)}.cover-1{background:linear-gradient(135deg,#5941a9,#9b70ee)}.cover-2{background:linear-gradient(135deg,#167c69,#28bd93)}.teacher-avatar{position:absolute;bottom:-42px;left:1.5rem;width:86px;height:86px;border:5px solid white;border-radius:50%;background:#ffb36b;display:grid;place-items:center;color:#fff;font-size:1.4rem;font-weight:800}.teacher-avatar span{position:absolute;right:0;bottom:5px;width:17px;height:17px;border:3px solid white;border-radius:50%;background:#26c985}.teacher-body{padding:3.3rem 1.5rem 1.5rem}.teacher-body h3{margin:0}.qualification{color:var(--muted);margin:.25rem 0 .8rem}.teacher-body>p:not(.qualification){color:#627182;min-height:48px}.skill-list{display:flex;gap:.4rem;flex-wrap:wrap}.skill-list span{background:#f0f4f9;padding:.35rem .65rem;border-radius:8px;font-size:.8rem;font-weight:700}.teacher-foot{display:flex;align-items:center;justify-content:space-between;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--border)}.teacher-foot small{color:var(--muted)}.form-panel{padding:2rem}.duration-picker{display:flex;gap:.65rem;flex-wrap:wrap;margin-bottom:.5rem}.duration-picker input{display:none}.duration-picker span{display:block;border:2px solid var(--border);border-radius:12px;padding:.8rem 1rem;cursor:pointer}.duration-picker input:checked+span{border-color:var(--blue);background:#edf4ff;color:var(--blue)}.availability-row{display:flex;gap:1rem;align-items:center;border-top:1px solid var(--border);padding:1rem 0}.availability-row span{margin-left:auto;color:var(--muted)}.table th{font-size:.8rem;color:#758395;text-transform:uppercase;border-bottom-width:1px}.table td{padding:1rem .5rem}.auth-wrap{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:3rem 1rem;background:radial-gradient(circle at 20% 20%,#fff1e7,transparent 30%),linear-gradient(135deg,#f4f8ff,#edf3ff)}.auth-card{width:min(440px,100%);background:white;border:1px solid var(--border);padding:2.5rem;border-radius:26px;box-shadow:0 30px 70px rgba(21,55,105,.12)}.auth-card.wide{width:min(650px,100%)}.auth-card h1{margin-top:1.5rem}.auth-card>p{color:var(--muted)}.brand-mini{font-family:'Manrope';font-weight:800;text-decoration:none;color:var(--blue)}
@media(max-width:991px){.sidebar{position:static;padding:.75rem}.user-card{display:flex;align-items:center;text-align:left;gap:.8rem;padding:.75rem}.user-card .avatar{width:48px;height:48px;margin:0;font-size:1.1rem;flex:0 0 auto;box-shadow:0 0 0 4px #edf3ff}.user-card small{display:none}.user-card h5{margin:0}.user-card .role-pill{margin-left:auto}.side-nav{display:flex;gap:.4rem;overflow-x:auto;margin:.5rem 0 0;padding:.25rem;scrollbar-width:none}.side-nav::-webkit-scrollbar{display:none}.side-nav a{white-space:nowrap;flex:0 0 auto;border:1px solid var(--border);padding:.7rem .9rem}.hero{padding:4rem 0}.hero-proof{gap:1rem}.page-head{align-items:flex-start;gap:1rem}.welcome-banner>i{display:none}}@media(max-width:576px){.navbar{min-height:64px}.hero h1{font-size:3rem}.hero-proof{flex-wrap:wrap}.page-head{display:block}.page-head>.btn{margin-top:1rem}.metric{margin-bottom:.25rem}.form-panel{padding:1.2rem}.container.py-4{padding-top:.8rem!important}.sidebar{border-radius:16px}.user-card .role-pill{display:none}.side-nav a{font-size:.86rem}.welcome-banner{padding:1.4rem}.welcome-banner h2{font-size:1.35rem}.panel{padding:1rem}.teacher-foot{align-items:flex-start;gap:.75rem}.table{min-width:760px}}

/* Guided lesson booking */
.booking-shell{background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:0 14px 45px rgba(29,53,85,.07);overflow:hidden}.booking-progress{display:grid;grid-template-columns:repeat(4,1fr);padding:1.25rem 2rem;border-bottom:1px solid var(--border);background:#fbfcfe}.progress-step{display:flex;align-items:center;gap:.65rem;color:#96a2b1;font-size:.85rem;font-weight:700;position:relative}.progress-step:not(:last-child):after{content:"";height:2px;background:#e2e7ee;position:absolute;left:calc(50% + 24px);right:18px;top:16px}.progress-step b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e9edf3;color:#788696;z-index:1}.progress-step.active{color:var(--blue)}.progress-step.active b{background:var(--blue);color:#fff;box-shadow:0 0 0 5px #e9f1ff}.progress-step.done{color:#12815f}.progress-step.done b{background:#dff8ef;color:#12815f}.progress-step.done:not(:last-child):after{background:#8edbc3}.booking-step{display:none;padding:2rem}.booking-step.active{display:block;animation:stepIn .24s ease}@keyframes stepIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.step-heading{margin-bottom:1.5rem}.step-heading>span{color:var(--orange);font-weight:800;font-size:.75rem;letter-spacing:.12em}.step-heading h2{font-size:1.65rem;margin:.35rem 0}.step-heading p{color:var(--muted);margin:0}.teacher-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.teacher-option{border:2px solid var(--border);background:#fff;border-radius:18px;padding:1rem;display:flex;align-items:center;gap:1rem;text-align:left;color:var(--ink);transition:.18s}.teacher-option:hover{border-color:#aac7fb;transform:translateY(-2px)}.teacher-option.selected{border-color:var(--blue);background:#f4f8ff;box-shadow:0 0 0 3px #e8f0ff}.teacher-option-avatar{display:grid;place-items:center;width:58px;height:58px;flex:0 0 auto;border-radius:50%;background:linear-gradient(135deg,#ffad67,#f16b67);color:#fff;font-weight:800}.teacher-option-copy{display:flex;flex-direction:column;min-width:0}.teacher-option-copy strong{font-size:1.05rem}.teacher-option-copy small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.teacher-option-copy em{font-style:normal;font-size:.76rem;font-weight:700;margin-top:.3rem;color:#69798a}.teacher-option-copy em i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#aeb8c3;margin-right:.35rem}.teacher-option-copy em.online{color:#07845e}.teacher-option-copy em.online i{background:#18be85;box-shadow:0 0 0 3px #dff8ef}.teacher-check{margin-left:auto;width:25px;height:25px;border:2px solid #dce3eb;border-radius:50%;display:grid;place-items:center;color:transparent}.teacher-option.selected .teacher-check{background:var(--blue);border-color:var(--blue);color:#fff}.step-actions{display:flex;align-items:center;justify-content:space-between;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--border)}.step-actions .btn{min-width:130px}.week-heading{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:1rem}.week-nav{width:38px;height:38px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--ink)}.week-nav:disabled{opacity:.35}.date-strip{display:grid;grid-template-columns:repeat(7,1fr);gap:.65rem}.date-option{border:2px solid var(--border);border-radius:16px;background:#fff;padding:1rem .4rem;color:var(--ink);display:flex;flex-direction:column;align-items:center;transition:.15s}.date-option span{font-weight:700;font-size:.82rem;color:var(--muted)}.date-option strong{font-size:1.5rem;margin:.2rem 0}.date-option small{color:#9aa5b1}.date-option:hover:not(:disabled){border-color:#9dbcf3}.date-option.selected{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(23,107,255,.22)}.date-option.selected span,.date-option.selected small{color:#dce8ff}.date-option.disabled{opacity:.35;cursor:not-allowed}.duration-row{display:flex;justify-content:space-between;align-items:center;background:#f6f8fb;border-radius:14px;padding:.8rem 1rem;margin-bottom:1.2rem}.duration-row>span{font-weight:700}.duration-tabs{display:flex;gap:.4rem;flex-wrap:wrap}.duration-tab{border:1px solid #dce3eb;background:#fff;border-radius:9px;padding:.45rem .7rem;color:#526273;font-weight:700;font-size:.82rem}.duration-tab.active{background:var(--navy);border-color:var(--navy);color:#fff}.slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;min-height:100px}.slot-option{border:2px solid var(--border);border-radius:14px;background:#fff;padding:1rem .7rem;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:.65rem;font-weight:700}.slot-option i{color:var(--blue)}.slot-option span{display:flex;align-items:center;gap:.35rem}.slot-option small{color:#9aa5b1;font-weight:500}.slot-option:hover{border-color:#91b5f6}.slot-option.selected{background:#eaf2ff;border-color:var(--blue);color:var(--blue)}.slots-message{grid-column:1/-1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.4rem;color:var(--muted);padding:2.5rem;text-align:center;background:#f8fafc;border-radius:14px}.slots-message i{font-size:1.6rem}.booking-summary{border:1px solid #dbe5f5;background:linear-gradient(135deg,#f8fbff,#f2f6fc);border-radius:20px;padding:1.5rem;position:relative}.summary-icon{position:absolute;right:1.5rem;top:1.5rem;width:52px;height:52px;border-radius:15px;background:#e5efff;color:var(--blue);display:grid;place-items:center;font-size:1.4rem}.booking-summary dl{margin:0;max-width:520px}.booking-summary dl div{display:grid;grid-template-columns:110px 1fr;padding:.7rem 0;border-bottom:1px solid #dde6f2}.booking-summary dt{color:var(--muted);font-weight:500}.booking-summary dd{margin:0;font-weight:800}.break-note{margin-top:1.2rem;color:#52677c;font-size:.85rem}.break-note i{color:var(--blue);margin-right:.3rem}
@media(max-width:767px){.booking-title{margin-bottom:1rem}.booking-progress{padding:1rem}.progress-step{justify-content:center}.progress-step span{display:none}.progress-step:not(:last-child):after{left:calc(50% + 20px);right:-22px}.booking-step{padding:1.25rem}.teacher-options{grid-template-columns:1fr}.date-strip{gap:.3rem;overflow-x:auto;padding-bottom:.4rem}.date-option{min-width:61px;padding:.75rem .25rem}.duration-row{display:block}.duration-row>span{display:block;margin-bottom:.65rem}.slots-grid{grid-template-columns:1fr 1fr}.slot-option span{display:block}.slot-option small{margin:0 .2rem}.summary-icon{display:none}}@media(max-width:430px){.slots-grid{grid-template-columns:1fr}.date-strip{grid-template-columns:repeat(7,61px)}.booking-step{padding:1rem}.teacher-option{padding:.8rem}.teacher-option-avatar{width:48px;height:48px}.step-actions .btn{min-width:105px}.booking-summary dl div{grid-template-columns:85px 1fr}}
.status.no_show{background:#fff1d6;color:#9a6300}.session-actions{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}.session-actions form{margin:0}.btn-meet{background:#176bff;color:#fff;border-color:#176bff}.btn-meet:hover{background:#0d55ce;color:#fff;border-color:#0d55ce}.session-table td:last-child{min-width:210px}
.brand-mark{position:relative;border-radius:50% 50% 50% 14px;transform:rotate(-5deg);box-shadow:0 6px 14px rgba(23,107,255,.2)}.brand-bubble{font-family:'Manrope',sans-serif;font-size:.78rem;font-weight:800;letter-spacing:-.04em;transform:rotate(5deg);color:#fff}.navbar-brand strong{letter-spacing:-.025em}.navbar-brand strong>span{color:var(--orange)}