@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#f6f7fb;--panel:#fff;--text:#1a1d28;--muted:#6b7394;--border:#e3e6f0;--shadow:0 2px 8px rgba(60,68,120,.07),0 8px 32px rgba(60,68,120,.05);--radius:16px;--accent:#4255ff;--accent-soft:rgba(66,85,255,.10);--accent-mid:rgba(66,85,255,.18);--btn:#4255ff;--btnText:#fff;--danger:#d93025;--success:#13a45b;--warning:#e09000;--side-bg:#fff;--side-border:#e3e6f0;--hover:rgba(66,85,255,.05)}
*{box-sizing:border-box} html,body{height:100%;margin:0} body{font-family:'DM Sans',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}.hidden{display:none!important}.view{min-height:100vh}.logo{height:34px;width:auto;object-fit:contain}.h1{font-size:30px;line-height:1.12;margin:0 0 10px;font-weight:800;letter-spacing:-.6px}.h2{font-size:22px;margin:0 0 12px;font-weight:700;letter-spacing:-.3px}.muted{color:var(--muted);margin:0 0 20px}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.btn{border:1px solid transparent;border-radius:12px;padding:12px 18px;font-weight:600;font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s ease;text-decoration:none}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--btn);color:var(--btnText);box-shadow:0 3px 12px rgba(66,85,255,.22);font-weight:700}.btn-primary:hover{background:#3344ee}.btn-ghost{background:transparent;color:var(--text);border-color:var(--border);border-width:1px}.btn-ghost:hover{background:var(--hover)}.btn-success{background:var(--success);color:#fff}.btn-danger{background:var(--danger);color:#fff}.input,.select,textarea{width:100%;padding:13px 16px;border:1px solid var(--border);border-radius:12px;outline:none;background:#fff;font:inherit;color:var(--text);transition:.15s}textarea{min-height:92px;resize:vertical}.input:focus,.select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}.label{display:flex;flex-direction:column;gap:7px;font-weight:700;font-size:14px}.form{display:flex;flex-direction:column;gap:15px}.error{padding:12px 14px;border-radius:12px;background:rgba(217,48,37,.1);color:var(--danger);font-weight:700}.ok{padding:12px 14px;border-radius:12px;background:rgba(19,164,91,.1);color:#096b38;font-weight:700}.login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 440px}.login-hero{padding:48px;display:flex;flex-direction:column;justify-content:center}.hero-card{max-width:780px}.hero-title{font-size:58px;font-weight:900;letter-spacing:-2.3px;line-height:.98;margin:22px 0}.hero-p{font-size:19px;color:var(--muted);max-width:630px}.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.pill{background:#fff;border:1.5px solid var(--border);border-radius:999px;padding:9px 13px;font-weight:800;color:#30364f}.login-panel{background:#fff;border-left:1.5px solid var(--border);padding:40px 32px;display:flex;align-items:center}.login-card{width:100%;box-shadow:none;border:0}.auth-toggle{display:flex;gap:8px;background:var(--bg);border-radius:14px;padding:5px;margin-bottom:18px}.auth-toggle button{flex:1;border:0;border-radius:11px;padding:10px;font-weight:900;background:transparent;cursor:pointer}.auth-toggle button.active{background:#fff;box-shadow:var(--shadow)}.layout{display:grid;grid-template-columns:292px 1fr;height:100vh;overflow:hidden}.sidebar{background:#fff;border-right:1px solid var(--side-border);padding:26px 0;display:flex;flex-direction:column;min-width:0}.sidebar-top{padding:0 22px 20px}.user-box{display:flex;gap:13px;align-items:center;padding:0 22px 20px;border-bottom:1px solid var(--border);margin-bottom:10px}.avatar{width:48px;height:48px;border-radius:14px;background:var(--accent-soft);position:relative;border:1px solid var(--border)}.avatar:before{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#a5aee8;left:13px;top:8px}.avatar:after{content:"";position:absolute;width:34px;height:22px;border-radius:20px 20px 0 0;background:#a5aee8;left:6px;bottom:0}.avatar-initials{display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:var(--accent);letter-spacing:-.5px}.avatar-initials::before,.avatar-initials::after{display:none}.user-name{font-weight:900}.user-role{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:800}.nav{display:flex;flex-direction:column;overflow:auto}.nav button{border:0;background:transparent;padding:16px 24px;text-align:left;font:inherit;font-weight:600;cursor:pointer;border-bottom:1px solid rgba(227,230,240,.8);position:relative}.nav button:hover{background:var(--hover)}.nav button.active{background:var(--accent-soft);padding-left:30px}.nav button.active:before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:4px;background:var(--accent);border-radius:0 4px 4px 0}.sidebar-bottom{margin-top:auto;padding:18px 22px 0;border-top:1px solid var(--border)}.content{height:100%;overflow:auto;padding:36px 40px}.header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding-bottom:24px;border-bottom:1px solid var(--border);margin-bottom:24px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}.list{display:flex;flex-direction:column;gap:12px}.lesson-card{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.badge{display:inline-flex;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0}.badge-paid{background:#d1fae5;color:#065f46}.badge-pending{background:#fef3c7;color:#92400e}.badge-cancelled{background:#f3f4f6;color:#4b5563}.teacher-card{cursor:pointer;transition:.15s}.teacher-card:hover,.teacher-card.selected{border-color:#bdc4ff;box-shadow:0 4px 24px rgba(66,85,255,.12);transform:translateY(-1px)}.calendar-shell{display:grid;grid-template-columns:1fr 310px;gap:18px}.calendar{background:#fff;border:1px solid var(--border);border-radius:18px;overflow:hidden}.cal-head,.cal-row{display:grid;grid-template-columns:72px repeat(7,1fr)}.cal-head div{padding:12px 8px;font-size:12px;font-weight:900;text-align:center;color:var(--muted);border-bottom:1px solid var(--border)}.time-cell{padding:10px 8px;font-size:12px;color:var(--muted);font-weight:800;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.slot{min-height:42px;border:0;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:#eef0f6;color:#a0a5b8;cursor:not-allowed;font-weight:800;font-size:12px}.slot.available{background:#fff;color:var(--text);cursor:pointer}.slot.available:hover{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent-mid)}.slot.selected{background:var(--accent)!important;color:#fff!important}.slot.teacher-open{background:#fff;color:var(--text);cursor:pointer}.slot.teacher-closed{background:#e8ebf2;color:#9aa1b5;cursor:pointer}.slot.booked{background:#d5f4e2;color:#0a4a22}.slot.small{min-height:34px}.summary{position:sticky;top:20px}.price{font-size:36px;font-weight:900;letter-spacing:-1px}.classroom-layout{display:grid;grid-template-columns:292px 1fr;height:100vh}.classroom-main{height:100%;overflow:hidden;display:flex;flex-direction:column}.classroom-top{height:72px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px}.board-frame{flex:1;border:0;width:100%;background:#fff}.board-wrap{flex:1;margin:18px;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column}.board-tabs{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--border);background:#fff}.mini{font-size:12px;color:var(--muted)}.embed-box{margin-top:18px;background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden}.widget-preview{max-width:420px}.weekday-title{font-weight:900;margin:18px 0 8px}.row-actions{display:flex;gap:8px;flex-wrap:wrap}.mobile-only{display:none}@media(max-width:850px){.login-wrap{grid-template-columns:1fr}.login-hero{padding:28px}.hero-title{font-size:42px}.login-panel{border-left:0;padding:22px}.layout,.classroom-layout{grid-template-columns:1fr;height:auto;min-height:100vh}.sidebar{position:relative}.content{padding:24px 18px}.calendar-shell{grid-template-columns:1fr}.cal-head,.cal-row{grid-template-columns:60px repeat(7,120px);min-width:900px}.calendar{overflow:auto}.classroom-main{height:80vh}.mobile-only{display:block}}

/* =========================================================
   2026 update — closer to app.skule.pl classroom style
   ========================================================= */
.logo{height:30px;max-width:150px;object-fit:contain;object-position:left center}.hero-logo{height:42px}.login-hero{background:linear-gradient(135deg,#f6f7fb 0%,#eef1ff 100%)}.pill{box-shadow:0 2px 12px rgba(66,85,255,.06)}.meet-tile{margin:0 12px 8px;background:linear-gradient(135deg,#2f6df6,#0d57db);color:#fff!important;border-radius:13px;padding:18px 16px;text-decoration:none;font-weight:900;display:flex;align-items:center;gap:12px;box-shadow:0 8px 22px rgba(13,87,219,.22)}.meet-icon{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.16);display:inline-flex;align-items:center;justify-content:center;font-size:12px}.classroom-sidebar .nav button{font-weight:800}.classroom-main{background:#fff}.board-frame{border:0;width:100%;height:100vh;background:#fff;display:block}.how-room{padding:38px 44px;overflow:auto;height:100%;background:var(--bg)}.lesson-date-big{font-weight:900;font-size:24px;letter-spacing:-.5px;margin:8px 0 4px}.teacher-grid .teacher-card.selected{box-shadow:0 8px 30px rgba(66,85,255,.14);border-color:#aab4ff}.summary-card{position:sticky;top:20px;align-self:start;background:linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%);border:1.5px solid var(--border);border-radius:22px;box-shadow:0 8px 32px rgba(60,68,120,.09);padding:0;overflow:hidden}.summary-top{padding:22px 22px 16px;border-bottom:1px solid var(--border);background:#fff}.summary-top h2{margin:4px 0 0;font-size:22px;letter-spacing:-.5px}.summary-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--accent);font-weight:900}.empty-summary{padding:24px;color:var(--muted);font-weight:700}.chosen-box{margin:18px 18px 12px;padding:16px;border-radius:16px;background:#fff;border:1.5px solid var(--border)}.chosen-date{font-size:20px;font-weight:900;letter-spacing:-.45px}.chosen-time{color:var(--accent);font-size:18px;font-weight:900;margin:2px 0 6px}.calc-row{display:flex;justify-content:space-between;gap:14px;padding:14px 18px;border-top:1px solid var(--border);font-weight:800}.summary-total{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 18px 16px;padding:16px;border-radius:16px;background:var(--accent);color:#fff}.summary-total span{font-weight:800;opacity:.9}.summary-total strong{font-size:28px;line-height:1;font-weight:900;letter-spacing:-.7px}.summary-note{margin:0 18px 14px}.summary-pay{width:calc(100% - 36px);margin:0 18px 12px}.summary-card .mini{padding:0 18px 18px}.cal-head div span{font-size:13px;color:var(--text)}.cal-head div{background:#fff}.slot{transition:background .12s ease,box-shadow .12s ease,transform .08s ease}.slot.available{font-weight:900}.slot.available:hover{transform:translateY(-1px)}.slot.teacher-open::after{content:"";display:block;width:6px;height:6px;background:var(--success);border-radius:99px;margin:3px auto 0}.slot.teacher-closed::after{content:"";display:block;width:6px;height:6px;background:#b6bdcf;border-radius:99px;margin:3px auto 0}.profile-card{max-width:720px}
@media(max-width:850px){.board-frame{height:80vh}.how-room{padding:24px 18px}.meet-tile{margin:8px 12px}.summary-card{position:relative;top:auto}}

/* v3 week carousel + admin framework */
.week-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 12px;padding:10px 12px;background:#fff;border:1.5px solid var(--border);border-radius:16px;box-shadow:0 2px 10px rgba(60,68,120,.05)}
.week-toolbar>div{text-align:center;color:var(--text);font-weight:800}.week-toolbar b{font-weight:900}.calendar-slide-next{animation:weekInNext .24s cubic-bezier(.2,.8,.2,1)}.calendar-slide-prev{animation:weekInPrev .24s cubic-bezier(.2,.8,.2,1)}
@keyframes weekInNext{from{opacity:.4;transform:translateX(34px)}to{opacity:1;transform:translateX(0)}}
@keyframes weekInPrev{from{opacity:.4;transform:translateX(-34px)}to{opacity:1;transform:translateX(0)}}
.settings-table{display:flex;flex-direction:column;gap:8px;margin:10px 0 14px}.settings-row{display:grid;grid-template-columns:120px 1fr 1fr 82px 82px 82px;gap:8px;align-items:center}.settings-row label{font-weight:900}.settings-row .input{padding:8px 9px;border-radius:10px;font-size:13px}.settings-head{margin-top:8px}.admin-frame{grid-column:span 2}.summary-card{border:1.5px solid #dfe3f5}.summary-card .ok{margin:18px 18px 0}.summary-card textarea{background:#fff}.calendar-shell{align-items:start}.slot{min-height:38px}.cal-head,.cal-row{grid-template-columns:74px repeat(7,minmax(86px,1fr))}@media(max-width:1050px){.admin-frame{grid-column:auto}.settings-row{grid-template-columns:1fr 1fr 1fr}.calendar-shell{grid-template-columns:1fr}.week-toolbar{flex-wrap:wrap}.week-toolbar>div{order:-1;width:100%}}


/* v4 fixes: fuller 07:00-20:00 grid, teacher classroom, smoother week carousel */
.content{overflow-y:auto;scrollbar-gutter:stable}.calendar{overflow:visible;box-shadow:0 8px 28px rgba(60,68,120,.06)}.calendar-shell{align-items:flex-start}.cal-row{min-height:40px}.slot{min-height:40px}.calendar-slide-next{animation:weekSlideNextV4 .38s cubic-bezier(.2,.8,.2,1)}.calendar-slide-prev{animation:weekSlidePrevV4 .38s cubic-bezier(.2,.8,.2,1)}
@keyframes weekSlideNextV4{0%{opacity:.25;filter:blur(8px);transform:translateX(70px) translateY(8px) scale(.985);box-shadow:0 20px 60px rgba(66,85,255,.16)}55%{opacity:1;filter:blur(1px);transform:translateX(-4px) translateY(-3px) scale(1.006)}100%{opacity:1;filter:blur(0);transform:translateX(0) translateY(0) scale(1)}}
@keyframes weekSlidePrevV4{0%{opacity:.25;filter:blur(8px);transform:translateX(-70px) translateY(8px) scale(.985);box-shadow:0 20px 60px rgba(66,85,255,.16)}55%{opacity:1;filter:blur(1px);transform:translateX(4px) translateY(-3px) scale(1.006)}100%{opacity:1;filter:blur(0);transform:translateX(0) translateY(0) scale(1)}}
.teacher-profile-card textarea{min-height:130px}.teacher-profile-card .ok,.teacher-profile-card .error{margin-top:10px}.calendar .slot.teacher-closed{background:#eef0f6}.calendar .slot.teacher-open{background:#fff;box-shadow:inset 0 0 0 1px rgba(19,164,91,.2)}
@media(max-width:850px){.calendar{overflow:auto}.cal-row{min-height:42px}.slot{min-height:42px}}

/* V7: waiting room, access lock, archived lessons */
.lesson-card--past{opacity:.58;filter:grayscale(.35);background:#f3f4f8!important;box-shadow:none!important}
.btn-disabled,.btn-disabled:hover{background:#e5e7ef!important;color:#8b91a8!important;border-color:#d6dae7!important;box-shadow:none!important;cursor:not-allowed!important;transform:none!important}
.pulse{animation:softPulse 1.8s ease-in-out infinite}
@keyframes softPulse{0%,100%{box-shadow:0 4px 16px rgba(66,85,255,.18);transform:translateY(0)}50%{box-shadow:0 10px 30px rgba(66,85,255,.32);transform:translateY(-1px)}}
.waiting-bg{background:radial-gradient(circle at 50% 0%,rgba(66,85,255,.12),transparent 38%),var(--bg);overflow:auto!important}
.waiting-card{max-width:720px;margin:28px auto 20px;text-align:center;padding:34px 30px;border-radius:24px;position:relative;overflow:hidden;animation:waitingIn .45s cubic-bezier(.2,.9,.2,1)}
.waiting-card:before{content:"";position:absolute;inset:-80px;background:linear-gradient(120deg,transparent,rgba(66,85,255,.08),transparent);transform:rotate(8deg);pointer-events:none}
@keyframes waitingIn{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.lock-orb{width:72px;height:72px;margin:0 auto 18px;border-radius:22px;display:grid;place-items:center;background:var(--accent-soft);font-size:30px;box-shadow:0 14px 36px rgba(66,85,255,.18);animation:orbFloat 3s ease-in-out infinite}
@keyframes orbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.countdown{display:flex;align-items:baseline;justify-content:center;gap:9px;margin:20px auto 8px;font-weight:900;letter-spacing:-1px;color:var(--text)}
.countdown span{font-size:52px;line-height:1;background:#fff;border:1.5px solid var(--border);border-radius:18px;min-width:82px;padding:12px 10px;box-shadow:var(--shadow)}
.countdown small{font-size:15px;color:var(--muted);font-weight:800;margin-right:4px}
.open-note{margin:12px 0 18px;color:var(--muted)}
.btn-locked{opacity:.78;animation:lockedGlow 2.2s ease-in-out infinite}
@keyframes lockedGlow{0%,100%{box-shadow:0 4px 16px rgba(66,85,255,.14)}50%{box-shadow:0 8px 26px rgba(66,85,255,.25)}}
.how-section{padding:28px;max-width:980px;margin:0 auto 40px}
.classroom-main .how-section{max-width:1100px;margin:0 auto;padding:36px}
.learn-accordion{background:#fff;border:1.5px solid var(--border);border-radius:18px;margin:14px 0;box-shadow:var(--shadow);overflow:hidden}
.learn-accordion summary{cursor:pointer;padding:18px 22px;font-weight:800;list-style:none;display:flex;align-items:center;justify-content:space-between}
.learn-accordion summary::-webkit-details-marker{display:none}
.learn-accordion summary:after{content:"+";font-size:24px;color:var(--accent)}
.learn-accordion[open] summary:after{content:"–"}
.video-shell{position:relative;aspect-ratio:16/9;background:#eef0fb;border-top:1px solid var(--border)}
.video-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.faq-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:0 22px 22px}
.faq-grid p{margin:0;background:#f6f7fb;border:1px solid var(--border);border-radius:14px;padding:14px;color:var(--muted)}
.archive-card{max-width:680px;margin:50px auto;text-align:center;opacity:.85;background:#f7f8fb!important}
@media(max-width:760px){.countdown span{font-size:34px;min-width:58px}.faq-grid{grid-template-columns:1fr}.waiting-card{margin:14px}.how-section{padding:14px}}

/* v9 language selector + video login hero */
.lang-select select{appearance:none;border:1.5px solid var(--border);border-radius:999px;background:#fff;padding:7px 30px 7px 12px;font-weight:900;font-size:12px;color:var(--text);box-shadow:0 4px 14px rgba(60,68,120,.08);cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#6b7394 50%),linear-gradient(135deg,#6b7394 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.login-lang-row{display:flex;justify-content:flex-end;margin-bottom:12px}.sidebar-logo-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.sidebar-lang select{padding:6px 26px 6px 10px;font-size:11px}.login-video-mode{background:#0d2ed8}.login-video-mode .login-hero{position:relative;overflow:hidden;background:#0d2ed8;color:#fff}.login-video-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0d2ed8}.login-video-bg iframe{position:absolute;top:50%;left:50%;width:120vw;height:67.5vw;min-width:100%;min-height:100%;transform:translate(-50%,-50%);pointer-events:none;filter:saturate(1.1) contrast(1.05)}.login-blue-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(12,36,170,.88),rgba(23,80,245,.62) 48%,rgba(14,29,82,.78));box-shadow:inset -50px 0 80px rgba(0,0,0,.20)}.login-video-mode .hero-card{position:relative;z-index:2}.hero-logo-box{display:inline-flex;align-items:center;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:12px 16px;box-shadow:0 14px 36px rgba(5,13,45,.18);backdrop-filter:blur(10px)}.login-video-mode .hero-title{max-width:780px}.login-video-mode .hero-title span,.login-video-mode .hero-p span{display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;background:rgba(255,255,255,.92);color:#17203a;border-radius:14px;padding:.08em .22em;box-shadow:0 10px 28px rgba(5,13,45,.14);line-height:1.18}.login-video-mode .hero-p{color:#17203a;line-height:1.7}.login-video-mode .pill{background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.7);color:#17203a;box-shadow:0 10px 26px rgba(5,13,45,.12);backdrop-filter:blur(8px)}.login-panel{position:relative}.login-panel-shade{position:absolute;left:0;top:0;bottom:0;width:34px;pointer-events:none;background:linear-gradient(90deg,rgba(4,12,55,.14),transparent);z-index:1}.login-panel .login-card{position:relative;z-index:2}.login-card.card{border-radius:24px;box-shadow:0 18px 54px rgba(15,23,42,.10);border:1.5px solid rgba(227,230,240,.9)}@media(max-width:850px){.login-video-bg iframe{width:180vh;height:101.25vh}.login-panel-shade{display:none}.login-video-mode .hero-title span,.login-video-mode .hero-p span{line-height:1.35}.sidebar-logo-row{padding-bottom:12px}}

/* v10: discreet login language selector in top-right corner, original auth panel preserved */
.login-lang-floating{position:absolute;top:22px;right:22px;z-index:8}
.login-lang-floating .lang-select select{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(5,13,45,.14)}
.login-lang-row{display:none!important}
.login-video-mode .login-card.card{max-width:440px}
@media(max-width:850px){.login-lang-floating{top:14px;right:14px}.login-video-mode .login-card.card{max-width:440px}}


/* v11: consolidated login side panel + cleaner hero typography */
.login-panel{
  background:#fff!important;
  border-left:1.5px solid rgba(227,230,240,.9)!important;
  padding:0 38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.login-panel:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1px;
  background:rgba(227,230,240,.9);
}
.login-panel-shade{display:none!important;}
.login-video-mode .login-card.card,
.login-card.card{
  width:100%!important;
  max-width:400px!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  background:transparent!important;
}
.auth-toggle{
  background:#f4f6fb!important;
  border:1px solid #e7eaf4!important;
  border-radius:16px!important;
  padding:5px!important;
  margin-bottom:24px!important;
}
.auth-toggle button.active{
  background:#fff!important;
  box-shadow:0 2px 8px rgba(20,30,70,.06)!important;
}
.login-lang-floating{
  position:fixed!important;
  top:24px!important;
  right:28px!important;
  z-index:20!important;
}
.login-lang-floating .lang-select select{
  box-shadow:none!important;
  border:1px solid #e3e6f0!important;
  background:#fff!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.login-video-mode .hero-title{
  font-size:56px!important;
  line-height:1.02!important;
  max-width:760px!important;
  margin:18px 0 14px!important;
}
.login-video-mode .hero-title span{
  border-radius:12px!important;
  padding:.04em .18em!important;
  box-shadow:0 8px 20px rgba(5,13,45,.12)!important;
}
.login-video-mode .hero-p{
  max-width:650px!important;
  font-size:18px!important;
  line-height:1.62!important;
  margin-top:0!important;
}
.login-video-mode .hero-p span{
  border-radius:10px!important;
  padding:.08em .22em!important;
  box-shadow:0 6px 18px rgba(5,13,45,.10)!important;
}
.hero-logo-box{
  border-radius:16px!important;
  padding:11px 16px!important;
  box-shadow:0 10px 26px rgba(5,13,45,.14)!important;
}
.login-video-mode .pill{
  border-radius:999px!important;
  box-shadow:none!important;
}
@media(max-width:850px){
  .login-panel{padding:26px 22px!important;}
  .login-lang-floating{top:14px!important;right:14px!important;}
  .login-video-mode .hero-title{font-size:42px!important;}
}


/* v12 hero polish: refined professional login hero */
.login-video-mode .hero-card{max-width:860px}
.hero-logo-box{border-radius:20px;padding:13px 18px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.78);box-shadow:0 18px 46px rgba(5,13,45,.18)}
.hero-logo-box .hero-logo{height:46px;display:block}
.login-video-mode .hero-title{font-size:clamp(54px,5.6vw,86px);line-height:.94;letter-spacing:-3.2px;font-weight:900;margin:28px 0 18px;max-width:940px;text-wrap:balance}
.login-video-mode .hero-title span{display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone;background:rgba(255,255,255,.88);color:#10182f;border-radius:18px;padding:.045em .18em .075em;box-shadow:0 14px 34px rgba(5,13,45,.14);line-height:1.13}
.login-video-mode .hero-p{max-width:720px;font-size:clamp(18px,1.45vw,23px);font-weight:650;letter-spacing:-.25px;line-height:1.55;margin-top:6px;color:#17203a}
.login-video-mode .hero-p span{background:rgba(255,255,255,.84);border-radius:13px;padding:.12em .32em;box-shadow:0 10px 26px rgba(5,13,45,.11);line-height:1.62}
.login-video-mode .pill-row{margin-top:34px;gap:12px}
.login-video-mode .pill{padding:11px 16px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.68);color:#121a32;font-weight:900;font-size:14px;letter-spacing:-.15px;box-shadow:0 12px 30px rgba(5,13,45,.12);backdrop-filter:blur(10px);display:inline-flex;align-items:center;gap:8px}
.login-video-mode .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#4255ff;box-shadow:0 0 0 4px rgba(66,85,255,.12)}
.login-blue-overlay{background:linear-gradient(135deg,rgba(11,33,156,.82),rgba(39,87,255,.56) 46%,rgba(10,22,68,.72));box-shadow:inset -44px 0 70px rgba(0,0,0,.16)}
.lang-select select{box-shadow:none!important;background-color:rgba(255,255,255,.92)}
.login-card.card{box-shadow:none!important;border:0!important;background:transparent!important}
@media(max-width:850px){.login-video-mode .hero-title{font-size:42px;letter-spacing:-1.8px}.hero-logo-box .hero-logo{height:38px}.login-video-mode .hero-p{font-size:17px}.login-video-mode .pill{font-size:13px;padding:10px 13px}}

/* v13: show the client's already booked slots in green on the booking calendar */
.slot.mine{
  background:linear-gradient(135deg,#23c26b,#16a34a)!important;
  color:#fff!important;
  border-color:#148a3d!important;
  box-shadow:0 8px 20px rgba(22,163,74,.22)!important;
  font-weight:900;
}
.slot.mine::after{content:"";display:inline-block;width:6px;height:6px;background:#fff;border-radius:999px;margin-left:6px;vertical-align:middle;opacity:.9}
.slot.mine:hover{transform:none!important;cursor:default!important;}

/* v15 — classroom help page fix: scrollable, stable large video, no cutting */
.classroom-main .how-section{
  height:100vh;
  max-height:100vh;
  overflow-y:auto;
  padding:38px 44px 60px;
  background:var(--bg);
  -webkit-overflow-scrolling:touch;
}
.classroom-main .how-section .section-head{
  max-width:1040px;
  margin:0 auto 18px;
}
.classroom-main .how-section .learn-accordion{
  max-width:1040px;
  margin:16px auto;
}
.classroom-main .how-section .video-shell{
  height:clamp(360px,56vh,620px);
  min-height:360px;
  aspect-ratio:auto;
  border-top:1px solid var(--border);
}
.classroom-main .how-section .video-shell iframe{
  width:100%;
  height:100%;
  display:block;
}
.classroom-main .how-section .faq-grid{
  align-items:stretch;
}
.classroom-main .how-section .learn-accordion[open]{
  box-shadow:0 10px 34px rgba(60,68,120,.08);
}
@media(max-width:850px){
  .classroom-main .how-section{
    height:80vh;
    max-height:80vh;
    padding:22px 16px 42px;
  }
  .classroom-main .how-section .video-shell{
    height:260px;
    min-height:260px;
  }
}

/* v16 — polished classroom help page: stable video, no ugly shrink/cut, proper scroll */
.classroom-main{
  min-height:0;
  overflow:hidden;
}
.classroom-main .how-section{
  height:100%;
  max-height:none;
  overflow-y:auto;
  padding:38px 44px 70px;
  background:linear-gradient(180deg,#f7f8ff 0%,#f6f7fb 100%);
  -webkit-overflow-scrolling:touch;
}
.classroom-main .how-inner{
  width:min(1120px,100%);
  margin:0 auto;
}
.classroom-main .how-head{
  max-width:none;
  margin:0 0 20px;
  padding:0;
}
.section-kicker{
  display:inline-flex;
  margin-bottom:8px;
  color:var(--accent);
  background:var(--accent-soft);
  border:1px solid var(--accent-mid);
  border-radius:999px;
  padding:6px 11px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.7px;
  text-transform:uppercase;
}
.classroom-main .how-head .h2{
  font-size:28px;
  letter-spacing:-.75px;
  margin-bottom:6px;
}
.classroom-main .how-section .learn-accordion{
  width:100%;
  max-width:none;
  display:block;
  box-sizing:border-box;
  margin:16px 0;
  border:1.5px solid var(--border);
  border-radius:20px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 8px 28px rgba(60,68,120,.06);
}
.classroom-main .how-section .learn-accordion summary{
  list-style:none;
  cursor:pointer;
  padding:20px 24px;
  font-size:15px;
  font-weight:900;
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid transparent;
}
.classroom-main .how-section .learn-accordion summary::-webkit-details-marker{display:none;}
.classroom-main .how-section .learn-accordion summary::after{
  content:'+';
  width:28px;height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  background:var(--accent-soft);
  font-size:18px;
  line-height:1;
}
.classroom-main .how-section .learn-accordion[open] summary{
  border-bottom:1px solid var(--border);
}
.classroom-main .how-section .learn-accordion[open] summary::after{content:'−';}
.classroom-main .how-section .video-shell{
  width:100%;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:16/9!important;
  background:#111827;
  border-top:0;
  border-radius:0 0 18px 18px;
  overflow:hidden;
}
.classroom-main .how-section .video-shell iframe{
  width:100%!important;
  height:100%!important;
  min-height:420px;
  display:block;
  border:0;
}
.classroom-main .how-section .faq-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:18px 20px 22px;
}
.classroom-main .how-section .faq-grid p{
  margin:0;
  background:#f7f8ff;
  border:1.5px solid var(--border);
  border-radius:16px;
  padding:18px;
  color:var(--muted);
  line-height:1.55;
}
.classroom-main .how-section .faq-grid b{
  color:var(--text);
  display:block;
  margin-bottom:5px;
}
@media(max-width:850px){
  .classroom-main .how-section{height:auto;min-height:80vh;max-height:none;padding:24px 16px 46px;}
  .classroom-main .how-section .video-shell iframe{min-height:240px;}
  .classroom-main .how-section .faq-grid{grid-template-columns:1fr;padding:14px;}
}


/* V17 — stable wide guide page: video never shrinks when FAQ opens/closes */
.content:has(.how-section){
  padding:36px 48px!important;
  background:linear-gradient(180deg,#f7f8ff 0%,#ffffff 72%)!important;
}
.content .how-section,
.classroom-main .how-section{
  width:100%!important;
  max-width:1180px!important;
  min-width:0!important;
  margin:0 auto!important;
  padding:34px 0 70px!important;
  height:auto!important;
  min-height:100vh!important;
  max-height:none!important;
  overflow:visible!important;
  background:transparent!important;
}
.classroom-main{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  background:linear-gradient(180deg,#f7f8ff 0%,#ffffff 76%)!important;
}
.how-inner{
  width:100%!important;
  max-width:1180px!important;
  margin:0 auto!important;
  display:block!important;
}
.classroom-main .how-inner,
.content .how-inner{
  width:100%!important;
  max-width:1180px!important;
}
.how-head{
  width:100%!important;
  max-width:980px!important;
  margin:0 0 22px!important;
  padding:0!important;
}
.how-head .h2{
  font-size:38px!important;
  line-height:1.05!important;
  letter-spacing:-1.2px!important;
  margin:8px 0 8px!important;
}
.how-head .muted{
  font-size:17px!important;
  margin:0!important;
}
.learn-accordion,
.classroom-main .how-section .learn-accordion,
.content .how-section .learn-accordion{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  display:block!important;
  margin:18px 0!important;
  border:1.5px solid #dce1f2!important;
  border-radius:22px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:0 14px 40px rgba(60,68,120,.08)!important;
}
.video-accordion{
  min-height:auto!important;
}
.learn-accordion summary,
.classroom-main .how-section .learn-accordion summary,
.content .how-section .learn-accordion summary{
  padding:22px 26px!important;
  min-height:68px!important;
  font-weight:900!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.video-shell,
.classroom-main .how-section .video-shell,
.content .how-section .video-shell{
  width:100%!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  min-height:520px!important;
  max-height:none!important;
  background:#111827!important;
  overflow:hidden!important;
  border-radius:0 0 22px 22px!important;
  position:relative!important;
}
.video-shell iframe,
.classroom-main .how-section .video-shell iframe,
.content .how-section .video-shell iframe{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:block!important;
  border:0!important;
}
.faq-grid,
.classroom-main .how-section .faq-grid,
.content .how-section .faq-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  padding:22px!important;
}
.faq-grid p,
.classroom-main .how-section .faq-grid p,
.content .how-section .faq-grid p{
  padding:20px!important;
  border-radius:18px!important;
  background:#f7f8ff!important;
}
@media(max-width:1200px){
  .content:has(.how-section){padding:28px 32px!important;}
  .video-shell,.classroom-main .how-section .video-shell,.content .how-section .video-shell{min-height:420px!important;}
}
@media(max-width:850px){
  .content:has(.how-section){padding:22px 16px!important;}
  .how-head .h2{font-size:30px!important;}
  .video-shell,.classroom-main .how-section .video-shell,.content .how-section .video-shell{min-height:240px!important;}
  .faq-grid,.classroom-main .how-section .faq-grid,.content .how-section .faq-grid{grid-template-columns:1fr!important;padding:14px!important;}
}

/* V18 — use local /video.mp4 instead of YouTube iframe */
.login-video-bg video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none;
  filter:saturate(1.08) contrast(1.04);
}
.video-shell video,
.classroom-main .how-section .video-shell video,
.content .how-section .video-shell video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  display:block;
  background:#0f172a;
}

/* v19: animated countdown badge on user's next active lesson card */
.next-lesson-card{position:relative;overflow:hidden;padding-top:28px}
.dash-countdown-badge{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:9px 12px 10px;border-radius:16px;background:linear-gradient(135deg,#d9fbe8,#ecfff5);border:1.5px solid rgba(19,164,91,.28);box-shadow:0 10px 26px rgba(19,164,91,.16), inset 0 1px 0 rgba(255,255,255,.75);color:#0a6b39;min-width:118px;isolation:isolate;animation:countBadgeFloat 2.8s ease-in-out infinite}
.dash-countdown-badge:before{content:"";position:absolute;inset:-2px;border-radius:18px;background:linear-gradient(135deg,rgba(19,164,91,.35),rgba(72,211,135,.05));z-index:-1;filter:blur(8px);opacity:.75;animation:countBadgeGlow 1.8s ease-in-out infinite}
.dash-countdown-badge span{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.9px;color:#119c55;line-height:1}
.dash-countdown-badge strong{font-size:17px;font-weight:950;letter-spacing:-.4px;line-height:1.15;white-space:nowrap}
.dash-countdown-now{background:linear-gradient(135deg,#12a85a,#24c875);color:#fff;border-color:rgba(255,255,255,.35)}
.dash-countdown-now span{color:rgba(255,255,255,.82)}
.dash-countdown-pay{background:linear-gradient(135deg,#fff7d6,#fffdf1);border-color:rgba(224,144,0,.28);color:#7a4c00;animation:none}
.dash-countdown-pay-btn{cursor:pointer;transition:box-shadow .15s ease,transform .12s ease}
.dash-countdown-pay-btn:hover{box-shadow:0 12px 28px rgba(224,144,0,.28),inset 0 1px 0 rgba(255,255,255,.8);transform:translateY(-1px);border-color:rgba(224,144,0,.55)}
.dash-pay-hint{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;color:#9b6500;opacity:.8;margin-top:3px;line-height:1}
.dash-countdown-pay span{color:#9b6500}
@keyframes countBadgeFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.015)}}
@keyframes countBadgeGlow{0%,100%{opacity:.55;transform:scale(.98)}50%{opacity:.95;transform:scale(1.04)}}
@media(max-width:760px){.dash-countdown-badge{position:static;align-items:flex-start;margin:-4px 0 14px;width:max-content}.next-lesson-card{padding-top:24px}}

/* v20 — Lesson files / quick share */
.files-view{height:100%;overflow:auto;background:linear-gradient(180deg,#f7f8ff 0%,#ffffff 52%);padding:44px 46px 80px;-webkit-overflow-scrolling:touch}
.files-inner{max-width:1120px;margin:0 auto}
.files-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:20px}
.upload-zone{border:2px dashed #c9d1f8;background:rgba(255,255,255,.86);border-radius:22px;padding:34px 26px;text-align:center;box-shadow:0 14px 44px rgba(66,85,255,.08);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;margin-bottom:18px}
.upload-zone.drag{transform:translateY(-2px) scale(1.006);border-color:#4255ff;background:#f1f4ff;box-shadow:0 22px 58px rgba(66,85,255,.16)}
.upload-icon{width:54px;height:54px;margin:0 auto 12px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#4255ff,#18c98b);color:white;font-weight:900;font-size:26px;box-shadow:0 12px 26px rgba(66,85,255,.24)}
.upload-zone h2{margin:0 0 6px;font-size:24px;letter-spacing:-.45px}
.upload-zone p{margin:0;color:var(--muted);font-weight:600}
.upload-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.hidden-file{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.files-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.file-row{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--text);background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:14px 16px;box-shadow:0 8px 26px rgba(60,68,120,.06);transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.file-row:hover{transform:translateY(-1px);border-color:#bfc7ec;box-shadow:0 12px 34px rgba(66,85,255,.11)}
.file-ico{width:46px;height:46px;border-radius:15px;background:#eef1ff;display:grid;place-items:center;font-size:22px;flex:0 0 auto}
.file-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.file-info b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-info span{font-size:12.5px;color:var(--muted);font-weight:600}
.file-open{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;color:#4255ff;background:rgba(66,85,255,.08);border-radius:999px;padding:8px 11px}
.empty-files{border:1.5px solid var(--border);border-radius:18px;background:#fff;padding:22px;color:var(--muted);font-weight:700;text-align:center}
@media(max-width:760px){.files-view{padding:24px 16px 56px}.files-head{flex-direction:column}.upload-zone{padding:26px 16px}.file-row{align-items:flex-start}.file-open{display:none}}

/* v21 — Shared files tab visible in teacher classroom + booking picker */
.files-booking-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:18px}
.file-booking-card{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;border:1.5px solid var(--border);border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(60,68,120,.07)}
.file-booking-card b{font-size:15px;letter-spacing:-.2px}
.file-booking-card p{margin:7px 0 0;color:var(--muted);font-weight:700;line-height:1.45}
.file-booking-card span{font-size:12.5px;color:#7b84a6}
.file-booking-card .btn{white-space:nowrap}
@media(max-width:760px){.file-booking-card{align-items:flex-start;flex-direction:column}.file-booking-card .btn{width:100%;justify-content:center}}

/* v22 — booking UX polish: today-forward calendar, selectable slots, warmer dashboard */
.booking-content{background:linear-gradient(180deg,#f7f8ff 0%,#fbfcff 42%,#f8fafc 100%)}
.booking-header{border-bottom:0;margin-bottom:18px;padding-bottom:8px}.booking-header .h1{font-size:36px}.teacher-grid-pro .teacher-card{background:linear-gradient(145deg,#fff 0%,#f7f8ff 100%);border-color:#dde3ff}.teacher-grid-pro .teacher-card.selected{background:linear-gradient(145deg,#eef2ff 0%,#ffffff 100%)}.teacher-mini-label{display:inline-flex;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.9px;font-weight:900;padding:6px 10px;margin-bottom:10px}.booking-shell{grid-template-columns:minmax(0,1fr) 360px;gap:22px}.booking-week-toolbar{background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:12px 14px;margin-bottom:14px;box-shadow:0 8px 26px rgba(60,68,120,.06)}.booking-week-toolbar .btn[disabled]{opacity:.45;pointer-events:none}.booking-calendar{border-radius:22px;box-shadow:0 16px 46px rgba(60,68,120,.10);border-color:#dce2f4;background:#fff}.booking-calendar .cal-head{background:linear-gradient(180deg,#fff,#f8f9ff)}.booking-calendar .cal-head div{padding:15px 8px}.booking-calendar .cal-head .today-col{background:linear-gradient(180deg,#ecfdf3,#f7fff9);color:#08753f}.booking-calendar .cal-head .today-col span{color:#08753f}.booking-calendar .time-cell{background:#fbfcff;color:#6d7595}.booking-calendar .slot{min-height:48px;background:#eef1f7;color:#a3aac0;position:relative;overflow:hidden}.booking-calendar .slot span{position:relative;z-index:2}.booking-calendar .slot.available{background:linear-gradient(180deg,#fff,#fbfcff);color:#1a1d28}.booking-calendar .slot.available:hover{background:linear-gradient(180deg,#eef2ff,#ffffff);box-shadow:inset 0 0 0 2px rgba(66,85,255,.22),0 6px 16px rgba(66,85,255,.10);transform:translateY(-1px)}.booking-calendar .slot.selected{background:linear-gradient(135deg,#4255ff,#6372ff)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 8px 20px rgba(66,85,255,.25)}.booking-calendar .slot.selected:after{content:'✓';position:absolute;right:8px;top:6px;font-size:12px;opacity:.95}.booking-calendar .slot.mine{background:linear-gradient(135deg,#12b76a,#16a34a)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}.booking-summary-pro{background:linear-gradient(180deg,#ffffff 0%,#f8fbff 56%,#f2fbf6 100%);box-shadow:0 18px 50px rgba(60,68,120,.12)}.selected-slots-list{display:flex;flex-direction:column;gap:10px;padding:16px 18px 8px}.selected-slot-chip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 13px 13px 15px;background:#fff;border:1.5px solid #e0e6f6;border-radius:16px;box-shadow:0 4px 14px rgba(60,68,120,.05)}.selected-slot-chip b{display:block;font-size:14px}.selected-slot-chip span{display:block;color:var(--muted);font-size:13px;font-weight:700;margin-top:3px}.slot-remove{width:30px;height:30px;border-radius:999px;border:0;background:#ffe2e2;color:#c81010;font-size:20px;line-height:1;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto}.slot-remove:hover{background:#ffcaca;transform:scale(1.04)}.summary-reset{margin:2px 18px 12px;border:0;background:transparent;color:#c81010;font-weight:900;cursor:pointer;padding:6px 0;text-align:left}.summary-note textarea{background:#fff;border:1.5px solid #dfe5f5;border-radius:16px;min-height:120px;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}.summary-note textarea:focus{box-shadow:0 0 0 4px rgba(66,85,255,.10)}
.next-lesson-card{background:linear-gradient(145deg,#effdf5 0%,#ffffff 58%);border-color:#ccefdc}.next-lesson-card:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(19,164,91,.14),transparent 38%);pointer-events:none}.grid>.card:nth-child(2){background:linear-gradient(145deg,#f4f6ff 0%,#ffffff 60%);border-color:#dfe4ff}.lesson-card{background:linear-gradient(145deg,#ffffff 0%,#f9fbff 100%);border-color:#e1e7f4}.lesson-card:not(.lesson-card--past){box-shadow:0 8px 24px rgba(60,68,120,.07)}.lesson-card--past{background:linear-gradient(145deg,#f1f3f7,#e9edf3)!important;border-color:#d7dce8!important}.badge-paid{background:#d8f8e5;color:#08753f}.badge-pending{background:#fff0c2;color:#8a5200}.row-actions .btn{box-shadow:0 4px 12px rgba(60,68,120,.06)}
@media(max-width:1100px){.booking-shell{grid-template-columns:1fr}.booking-summary-pro{position:relative;top:auto}.booking-calendar{overflow:auto}.booking-calendar .cal-head,.booking-calendar .cal-row{grid-template-columns:64px repeat(7,118px);min-width:890px}}

/* v23: local-date calendar + clearer interactive hand cursor */
button:not(:disabled),
a[href],
.nav button,
.nav a,
.btn:not(:disabled),
.teacher-card,
.slot.available,
.slot.teacher-open,
.slot.teacher-closed,
.slot.selected,
.slot-remove,
.summary-reset,
.lang-select select,
.learn-accordion summary {
  cursor: pointer;
}
button:disabled,
.slot:not(.available):not(.teacher-open):not(.teacher-closed):not(.selected) {
  cursor: not-allowed;
}


/* v26: compact animated flag language dropdown */
.lang-dropdown{position:relative;display:inline-flex;align-items:center;z-index:80}
.lang-current{appearance:none;border:0;background:rgba(255,255,255,.76);border-radius:999px;padding:5px 7px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none;transition:background .16s ease,transform .12s ease}
.lang-current:hover{background:rgba(255,255,255,.92);transform:translateY(-1px)}
.flag-round{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 1px 4px rgba(15,23,42,.14);background:#fff;flex:0 0 auto}
.flag-round svg{width:28px;height:28px;display:block;border-radius:999px}
.lang-chevron{font-size:12px;color:#4b5875;line-height:1;transition:transform .18s ease,opacity .18s ease;opacity:.78;margin-right:1px}
.lang-dropdown.open .lang-chevron{transform:rotate(180deg);opacity:1}
.lang-menu{position:absolute;top:42px;right:0;min-width:136px;background:rgba(255,255,255,.96);border:1px solid rgba(226,232,245,.95);border-radius:16px;padding:8px;box-shadow:0 14px 38px rgba(22,34,70,.14);opacity:0;transform:translateY(-8px) scale(.96);pointer-events:none;transition:opacity .18s ease,transform .18s ease;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.lang-dropdown.open .lang-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.lang-option{width:100%;appearance:none;border:0;background:transparent;border-radius:12px;padding:8px;display:flex;align-items:center;gap:10px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:800;color:#182033;text-align:left;transition:background .14s ease,transform .1s ease}
.lang-option:hover{background:#eef2ff;transform:translateX(1px)}
.login-lang-floating{position:absolute;top:20px;right:22px;z-index:90}
.login-lang .lang-current{background:rgba(255,255,255,.78)}
.sidebar-lang{margin-left:auto}.sidebar-lang .lang-current{background:#f7f8fe;border:1px solid rgba(226,232,245,.9)}


/* v27 admin booking cancel */
.admin-booking-card{display:flex;align-items:center;justify-content:space-between;gap:18px}
.admin-booking-card.is-cancelled{background:#f3f4f6;color:#6b7280;opacity:.82}
.admin-booking-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-shrink:0}
.btn-small{padding:8px 12px;font-size:13px;border-radius:11px}
.btn-danger{background:#ef4444;color:#fff;border-color:#ef4444;box-shadow:0 8px 18px rgba(239,68,68,.18)}
.btn-danger:hover{background:#dc2626;border-color:#dc2626;transform:translateY(-1px)}
.badge-cancelled{background:#e5e7eb;color:#4b5563;border-color:#d1d5db}
@media(max-width:720px){.admin-booking-card{align-items:flex-start;flex-direction:column}.admin-booking-actions{width:100%;justify-content:flex-start}}
/* v28 security */
.hp-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.security-card{border-color:#fde68a!important;background:linear-gradient(135deg,#fffbeb,#ffffff)!important;margin-bottom:18px}
.verify-card{padding:18px 0}.verify-card .h2{margin-bottom:10px}

/* v29 hero upgrade: professional use cases + learn.skule.pl bridge */
.hero-usecase-carousel{
  position:relative;
  width:min(680px,100%);
  min-height:116px;
  margin-top:28px;
}
.hero-usecase{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 20px 52px rgba(5,13,45,.18);
  backdrop-filter:blur(14px);
  opacity:0;
  transform:translateY(14px) scale(.98);
  pointer-events:none;
  transition:opacity .45s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.hero-usecase.active{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.usecase-icon{
  width:52px;height:52px;border-radius:17px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#eef2ff,#ffffff);
  font-size:27px;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px rgba(66,85,255,.14);
}
.usecase-copy{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;color:#17203a}
.usecase-copy b{font-size:18px;font-weight:950;letter-spacing:-.35px;line-height:1.1}
.usecase-copy span{font-size:14px;color:#56607f;font-weight:700;line-height:1.35}
.usecase-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.usecase-link{
  border:0;border-radius:999px;padding:10px 13px;
  background:var(--accent);color:#fff;font-weight:900;text-decoration:none;
  font-family:inherit;cursor:pointer;white-space:nowrap;
  box-shadow:0 8px 20px rgba(66,85,255,.22);
}
.usecase-link.secondary{background:#eef2ff;color:var(--accent);box-shadow:none}
.learn-live-note{
  margin-top:18px;
  width:min(680px,100%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.65);
  color:#17203a;
  backdrop-filter:blur(12px);
  box-shadow:0 12px 34px rgba(5,13,45,.12);
}
.learn-live-note div{display:flex;flex-direction:column;gap:2px;min-width:0}
.learn-live-note b{font-weight:950;letter-spacing:-.2px}
.learn-live-note span{font-size:13px;color:#56607f;font-weight:700;line-height:1.35}
.learn-live-note a{
  color:var(--accent);font-weight:950;text-decoration:none;white-space:nowrap;
  background:#eef2ff;border-radius:999px;padding:9px 12px;
}
.focus-select{background:#fff;font-weight:800}
@media(max-width:850px){
  .hero-usecase-carousel{min-height:168px;margin-top:22px}
  .hero-usecase{flex-direction:column;align-items:flex-start;padding:16px}
  .usecase-actions{width:100%;justify-content:flex-start}
  .learn-live-note{flex-direction:column;align-items:flex-start}
  .learn-live-note a{width:100%;text-align:center}
}

/* v30 hero cleanup: calmer landing page, no duplicate learn box, pills roll in by pairs */
.login-video-mode .hero-card{
  max-width:780px;
}
.login-video-mode .hero-title{
  font-size:clamp(50px,5vw,78px)!important;
  line-height:.98!important;
  letter-spacing:-2.8px!important;
  margin:24px 0 14px!important;
}
.login-video-mode .hero-title span{
  background:rgba(255,255,255,.82)!important;
  border-radius:16px!important;
  padding:.035em .16em .065em!important;
  box-shadow:0 10px 26px rgba(5,13,45,.10)!important;
}
.login-video-mode .hero-p{
  max-width:650px!important;
  font-size:clamp(16px,1.22vw,20px)!important;
  line-height:1.55!important;
  font-weight:650!important;
  margin:0 0 18px!important;
}
.login-video-mode .hero-p span{
  background:rgba(255,255,255,.76)!important;
  border-radius:11px!important;
  padding:.10em .28em!important;
  box-shadow:0 8px 20px rgba(5,13,45,.08)!important;
}
.login-video-mode .pill-row{
  display:grid!important;
  grid-template-columns:repeat(2, max-content)!important;
  gap:10px 12px!important;
  width:max-content!important;
  max-width:100%!important;
  margin:18px 0 0!important;
}
.login-video-mode .pill{
  position:relative;
  overflow:hidden;
  padding:11px 15px 11px 14px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.84)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  color:#17203a!important;
  font-size:14px!important;
  font-weight:900!important;
  letter-spacing:-.15px!important;
  box-shadow:0 9px 22px rgba(5,13,45,.10)!important;
  backdrop-filter:blur(10px);
  opacity:0;
  transform:translateX(-18px) translateY(4px);
  animation:pillRollPair 7.8s ease-in-out infinite;
}
.login-video-mode .pill::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:999px;
  margin-right:8px;
  background:var(--accent);
  box-shadow:0 0 0 5px rgba(66,85,255,.12);
  vertical-align:middle;
}
.login-video-mode .pill:nth-child(1),
.login-video-mode .pill:nth-child(2){animation-delay:0s;}
.login-video-mode .pill:nth-child(3),
.login-video-mode .pill:nth-child(4){animation-delay:3.9s;}
@keyframes pillRollPair{
  0%,7%{opacity:0;transform:translateX(-18px) translateY(4px)}
  15%,48%{opacity:1;transform:translateX(0) translateY(0)}
  58%,100%{opacity:0;transform:translateX(18px) translateY(-2px)}
}
.hero-usecase-carousel{
  width:min(560px,100%)!important;
  min-height:92px!important;
  margin-top:22px!important;
}
.hero-usecase{
  padding:14px 16px!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.84)!important;
  box-shadow:0 12px 34px rgba(5,13,45,.12)!important;
  gap:12px!important;
}
.usecase-icon{
  width:44px!important;
  height:44px!important;
  border-radius:15px!important;
  font-size:23px!important;
}
.usecase-copy b{
  font-size:16px!important;
}
.usecase-copy span{
  font-size:13px!important;
  line-height:1.3!important;
}
.usecase-link{
  padding:9px 11px!important;
  font-size:12.5px!important;
  box-shadow:0 7px 16px rgba(66,85,255,.18)!important;
}
.learn-live-note{display:none!important;}
@media(max-width:850px){
  .login-video-mode .pill-row{grid-template-columns:1fr 1fr!important;width:100%!important;}
  .login-video-mode .pill{font-size:12.5px!important;padding:10px 11px!important;}
  .hero-usecase-carousel{min-height:150px!important;}
  .hero-usecase{align-items:flex-start!important;}
}

/* v31: calmer hero pill strip + more polished auth side panel */
.login-video-mode .pill-row{display:none!important;}
.pill-strip{
  width:min(590px,100%);
  overflow:hidden;
  margin:20px 0 0;
  border-radius:999px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.pill-track{
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  animation:pillMarqueeV31 28s linear infinite;
}
.pill-strip:hover .pill-track{animation-play-state:paused;}
.login-video-mode .pill-track .pill,
.login-video-mode .pill{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  flex:0 0 auto;
  padding:10px 14px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  color:#17203a!important;
  font-size:13.5px!important;
  font-weight:900!important;
  letter-spacing:-.12px!important;
  box-shadow:0 8px 20px rgba(5,13,45,.09)!important;
  backdrop-filter:blur(10px);
  white-space:nowrap;
}
.login-video-mode .pill::before{display:none!important;}
@keyframes pillMarqueeV31{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 5px))}}
.login-panel{
  isolation:isolate;
  background:
    radial-gradient(circle at 82% 18%,rgba(66,85,255,.055),transparent 25%),
    radial-gradient(circle at 16% 78%,rgba(22,163,74,.045),transparent 25%),
    linear-gradient(180deg,#ffffff 0%,#fbfcff 100%)!important;
}
.login-panel:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(135deg,transparent 0 44%,rgba(66,85,255,.035) 44% 45%,transparent 45% 100%),
    radial-gradient(circle at 75% 72%,rgba(66,85,255,.04),transparent 18%);
}
.login-panel .login-card{z-index:2!important;}
.login-card .h2{font-size:25px;letter-spacing:-.55px;margin-bottom:8px;}
.login-card .muted{font-size:14.5px;line-height:1.65;margin-bottom:22px;}
.login-card .form{gap:16px;}
.login-card .label{font-size:13px;letter-spacing:-.05px;}
.login-card .input,
.login-card .select,
.login-card textarea{
  background:rgba(255,255,255,.92)!important;
  border-color:#dfe4f1!important;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
}
.login-card .input::placeholder,
.login-card textarea::placeholder{color:#b5bdd3;font-weight:650;}
.auth-toggle{
  background:rgba(242,245,252,.88)!important;
  box-shadow:inset 0 0 0 1px rgba(226,232,245,.8)!important;
}
.auth-toggle button{transition:background .16s ease,box-shadow .16s ease,transform .12s ease;}
.auth-toggle button:hover{transform:translateY(-1px);}
.login-card .btn-primary{border-radius:13px;min-height:46px;}
@media(max-width:850px){
  .pill-strip{width:100%;}
  .login-video-mode .pill-track .pill{font-size:12.5px!important;padding:9px 12px!important;}
}

/* v32: teacher profile card + better waiting room */
.teacher-profile-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:4px}.teacher-profile-card{position:relative;display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:24px;background:linear-gradient(145deg,#ffffff 0%,#f2f6ff 55%,#ecfdf5 100%);border:1.5px solid #dfe7fb;box-shadow:0 14px 38px rgba(60,68,120,.10);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.teacher-profile-card:hover{transform:translateY(-2px);box-shadow:0 20px 52px rgba(60,68,120,.14);border-color:#b8c4ff}.teacher-profile-card.selected{border-color:#4255ff;box-shadow:0 20px 54px rgba(66,85,255,.16)}.teacher-profile-card.selected:after{content:'✓';position:absolute;right:16px;top:16px;width:28px;height:28px;border-radius:999px;background:#4255ff;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}.teacher-avatar-pro{width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#4255ff,#7c8aff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;box-shadow:0 12px 26px rgba(66,85,255,.25);flex:0 0 auto}.teacher-profile-main{min-width:0;flex:1}.teacher-profile-top{display:flex;align-items:center;gap:10px;justify-content:space-between}.teacher-profile-card h2{margin:6px 0 8px;font-size:25px;line-height:1.1;letter-spacing:-.7px}.teacher-profile-card p{margin:0 0 12px;color:#5f6b86;font-weight:600;line-height:1.5}.teacher-rating{display:inline-flex;align-items:center;border-radius:999px;background:#fff8db;color:#7a4b00;padding:6px 10px;font-weight:900;font-size:12px;border:1px solid #f3d57a}.teacher-badges{display:flex;flex-wrap:wrap;gap:7px}.teacher-badges span{display:inline-flex;align-items:center;border-radius:999px;background:#fff;border:1px solid #e0e6f6;color:#34405f;padding:7px 10px;font-size:12px;font-weight:900}.teacher-badges.compact span{font-size:11px;padding:6px 9px}.teacher-trust{margin-top:12px;color:#0a7a43;font-weight:900;font-size:13px}.waiting-v32{padding:34px 38px!important}.waiting-hero{max-width:1180px;margin:0 auto 18px!important;display:flex;align-items:center;gap:18px;text-align:left!important;padding:24px!important;background:linear-gradient(135deg,#ffffff,#f3f7ff 60%,#f0fff7);border:1.5px solid #dfe7fb;border-radius:26px;box-shadow:0 16px 46px rgba(60,68,120,.10)}.waiting-hero .waiting-copy{flex:1}.waiting-lock-ring{width:72px;height:72px;border-radius:24px;background:rgba(66,85,255,.09);display:flex;align-items:center;justify-content:center;flex:0 0 auto}.waiting-lesson-pill{border-radius:20px;background:#fff;border:1.5px solid #dfe7fb;padding:14px 16px;min-width:190px;box-shadow:0 8px 26px rgba(60,68,120,.07)}.waiting-lesson-pill b,.waiting-lesson-pill span{display:block}.waiting-lesson-pill span{color:#4255ff;font-weight:900;margin-top:4px}.waiting-grid-v32{max-width:1180px;margin:0 auto 20px;display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.waiting-grid-v32 .card{border-radius:24px;border:1.5px solid #dfe7fb;box-shadow:0 14px 42px rgba(60,68,120,.08)}.countdown-card-v32{grid-row:span 2;text-align:center;background:linear-gradient(180deg,#fff,#f7f9ff)}.teacher-waiting-card{background:linear-gradient(145deg,#ffffff,#eef2ff)}.next-steps-card{background:linear-gradient(145deg,#ffffff,#f2fff7)}.step-list{display:grid;gap:10px;margin-top:10px}.step-list div{padding:11px 12px;border-radius:14px;background:#fff;border:1px solid #e0e6f6;font-weight:800;color:#34405f}.checklist-card{grid-column:1/-1;background:linear-gradient(145deg,#fff,#fbfcff)}.checklist-card label{display:flex;align-items:center;gap:10px;padding:11px 12px;margin:8px 0;border-radius:14px;background:#fff;border:1px solid #e0e6f6;font-weight:800;color:#34405f;cursor:pointer}.checklist-card input{width:18px;height:18px;accent-color:#16a34a}.reminder-mini{margin-top:12px;color:#0a7a43!important;font-weight:800}@media(max-width:900px){.waiting-grid-v32{grid-template-columns:1fr}.countdown-card-v32{grid-row:auto}.waiting-hero{flex-direction:column;align-items:flex-start}.waiting-lesson-pill{width:100%}.waiting-v32{padding:18px!important}}

/* v33: reschedule, rebook and goal badges */
.goal-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  margin:8px 0 2px;
  border-radius:999px;
  background:linear-gradient(135deg,#eefdf5,#eaf3ff);
  border:1px solid rgba(34,197,94,.22);
  color:#14532d;
  font-size:12px;
  font-weight:800;
  letter-spacing:.15px;
}
.reschedule-notice{
  margin-bottom:16px;
  background:linear-gradient(135deg,#fff7ed,#f8fbff);
  border-color:#fed7aa;
}
.reschedule-notice b{
  font-size:17px;
  letter-spacing:-.2px;
}
.lesson-card .row-actions .btn-small,
.btn-small{
  padding:8px 12px;
  font-size:13px;
  border-radius:11px;
}
.lesson-card--past .goal-badge{
  filter:grayscale(.45);
  opacity:.75;
}

/* v34 trust and reviews */
.hero-trust-strip{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 8px;align-items:center}
.hero-trust-strip span{display:inline-flex;align-items:center;gap:6px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.65);font-weight:800;font-size:12px;color:#10213f;backdrop-filter:blur(10px)}
.hero-teacher-trust{display:flex;flex-direction:column;gap:3px;max-width:560px;margin:8px 0 10px;padding:12px 15px;border-radius:18px;background:rgba(255,255,255,.64);border:1px solid rgba(255,255,255,.58);backdrop-filter:blur(10px)}
.hero-teacher-trust b{font-size:15px;letter-spacing:-.25px}.hero-teacher-trust span{font-size:13px;color:#3d4962;font-weight:650}
.teacher-rating{display:inline-flex;align-items:center;gap:5px;background:#ecfff3;color:#087332;border:1px solid #b7efc8;border-radius:999px;padding:6px 10px;font-weight:900}
.rating-stat-card{background:linear-gradient(135deg,#f0fff4,#f8fbff)!important}.big-rating{font-size:34px;font-weight:950;color:#087332;letter-spacing:-1px;margin:6px 0}
.review-box{margin-top:12px;padding:12px;border:1px solid rgba(34,197,94,.22);background:linear-gradient(135deg,#f0fff4,#ffffff);border-radius:16px;max-width:360px}.review-title{font-weight:900;margin-bottom:6px}.review-stars{display:flex;gap:4px;margin-bottom:8px}.review-stars button{border:0;background:transparent;font-size:24px;line-height:1;color:#cbd5e1;cursor:pointer;transition:.15s ease}.review-stars button:hover,.review-stars button.active{color:#16a34a;transform:scale(1.08)}.review-comment{width:100%;min-height:70px;border:1px solid var(--border,#e3e6f0);border-radius:12px;padding:10px;font-family:inherit;margin-bottom:8px;resize:vertical}.review-done{display:inline-flex;align-items:center;margin-top:10px;padding:7px 11px;border-radius:999px;background:#ecfff3;border:1px solid #b7efc8;color:#087332;font-weight:900;font-size:12px}

/* v35 cancellation / no-show / refund workflow */
.refund-badge{
  display:inline-flex;align-items:center;gap:6px;margin:6px 8px 6px 0;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid rgba(15,23,42,.08);background:#f8fafc;color:#334155;
}
.refund-refund_needed{background:#fff7ed;color:#9a3412;border-color:#fed7aa;}
.refund-refunded{background:#dcfce7;color:#166534;border-color:#bbf7d0;}
.refund-no_refund{background:#f1f5f9;color:#475569;border-color:#cbd5e1;}
.policy-box{margin-top:14px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,#f8fafc,#eff6ff);border:1px solid rgba(148,163,184,.35);font-size:13px;color:#334155;}
.policy-box b{display:block;margin-bottom:4px;color:#0f172a;}
.policy-box p{margin:0;line-height:1.45;}
.refund-control{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:8px;}
.refund-control select{border:1px solid var(--border);border-radius:12px;padding:8px 10px;background:#fff;font:inherit;cursor:pointer;}
/* v44: urgent but discreet nudge for admin/client cancellation requests */
.badge-cancel_requested{
  background:#fef3c7;
  color:#92400e;
  border-color:#fde68a;
  position:relative;
  isolation:isolate;
  animation:cancelRequestNudge 5.2s ease-in-out infinite;
  transform-origin:center;
}
.badge-cancel_requested:after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:999px;
  background:rgba(220,38,38,.16);
  opacity:0;
  z-index:-1;
  filter:blur(5px);
  animation:cancelRequestHalo 5.2s ease-in-out infinite;
}
@keyframes cancelRequestNudge{
  0%,72%,100%{transform:translateX(0);background:#fef3c7;color:#92400e;border-color:#fde68a;box-shadow:none}
  75%{transform:translateX(-1px) rotate(-.6deg);background:#fee2e2;color:#991b1b;border-color:#fecaca;box-shadow:0 0 0 3px rgba(220,38,38,.08)}
  78%{transform:translateX(2px) rotate(.7deg);background:#fee2e2;color:#991b1b;border-color:#fca5a5;box-shadow:0 6px 18px rgba(220,38,38,.14)}
  81%{transform:translateX(-1px) rotate(-.4deg);background:#fee2e2;color:#991b1b;border-color:#fecaca;box-shadow:0 0 0 3px rgba(220,38,38,.08)}
  86%{transform:translateX(0);background:#fef3c7;color:#92400e;border-color:#fde68a;box-shadow:none}
}
@keyframes cancelRequestHalo{
  0%,72%,100%{opacity:0;transform:scale(.92)}
  76%,82%{opacity:1;transform:scale(1.08)}
  88%{opacity:0;transform:scale(1.16)}
}
@media (prefers-reduced-motion: reduce){
  .badge-cancel_requested,.badge-cancel_requested:after{animation:none!important}
}
.badge-no_show{background:#fee2e2;color:#991b1b;border-color:#fecaca;}

/* v36 — admin users module */
.admin-users-section{margin-top:30px}
.admin-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:14px}
.admin-user-search{max-width:360px;background:#fff}
.admin-users-list{display:flex;flex-direction:column;gap:12px}
.admin-user-card{display:grid;grid-template-columns:1.4fr .9fr auto;gap:16px;align-items:center;background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%)}
.admin-user-card.is-blocked{background:linear-gradient(135deg,#f3f4f6 0%,#eef0f4 100%);opacity:.9}
.admin-user-main{display:flex;align-items:center;gap:14px;min-width:0}
.admin-user-avatar{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#4255ff,#7c8cff);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:-.4px;flex:0 0 auto}
.admin-user-info{min-width:0}
.admin-user-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.admin-user-info b{font-size:16px}
.admin-user-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;min-width:260px}
.admin-user-stats span{background:#fff;border:1px solid var(--border);border-radius:14px;padding:9px 10px;text-align:center;font-size:11px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.3px}
.admin-user-stats b{display:block;font-size:18px;color:var(--text);line-height:1;margin-bottom:3px}
.admin-user-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.btn-small{padding:8px 11px;font-size:12px;border-radius:10px}
@media(max-width:1100px){.admin-user-card{grid-template-columns:1fr}.admin-user-stats{min-width:0}.admin-section-head{align-items:stretch;flex-direction:column}.admin-user-search{max-width:none}}
@media(max-width:650px){.admin-user-stats{grid-template-columns:repeat(2,1fr)}.admin-user-actions{justify-content:flex-start}}

/* v37 admin user details + corrected stats polish */
.admin-user-actions .btn-primary{box-shadow:0 8px 20px rgba(66,85,255,.14)}
.admin-user-detail-overlay{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.42);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:22px}
.admin-user-detail{width:min(980px,96vw);max-height:88vh;overflow:auto;border-radius:24px;background:linear-gradient(180deg,#fff,#f8fafc)}
.admin-detail-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:18px}
.admin-detail-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 18px}
.admin-detail-stats span{border-radius:18px;background:#eef7ff;border:1px solid #dbeafe;padding:14px;text-align:center;color:#1e3a8a;font-weight:700}
.admin-detail-stats b{display:block;font-size:24px;color:#0f172a;line-height:1.05}
.admin-detail-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.admin-detail-section{margin:14px 0;padding:16px;border-radius:20px;background:#fff;border:1px solid var(--border)}
.admin-detail-section h3{margin:0 0 12px;font-size:16px;display:flex;align-items:center;gap:8px}
.admin-detail-section h3 span{font-size:12px;border-radius:999px;background:#eef2ff;color:#3730a3;padding:3px 8px}
.admin-detail-booking{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #eef2f7;padding:12px 0}
.admin-detail-booking:first-of-type{border-top:0}
.admin-detail-booking.muted-booking{opacity:.72;filter:grayscale(.25)}
@media(max-width:720px){.admin-user-detail-overlay{align-items:stretch;padding:10px}.admin-detail-stats{grid-template-columns:repeat(2,1fr)}.admin-detail-head{flex-direction:column}.admin-detail-booking{flex-direction:column;align-items:flex-start}}

/* v38 teacher calendar and lesson overview */
.teacher-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.teacher-stat-card{padding:18px 20px;position:relative;overflow:hidden;border:1px solid rgba(226,232,240,.85)}
.teacher-stat-card::after{content:"";position:absolute;right:-28px;top:-28px;width:86px;height:86px;border-radius:50%;opacity:.35}
.teacher-stat-card span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted);margin-bottom:8px}
.teacher-stat-card b{font-size:30px;line-height:1;font-weight:900;letter-spacing:-.06em;color:var(--text)}
.teacher-stat-card.green{background:linear-gradient(135deg,#ecfdf5,#ffffff)}
.teacher-stat-card.green::after{background:#86efac}
.teacher-stat-card.blue{background:linear-gradient(135deg,#eff6ff,#ffffff)}
.teacher-stat-card.blue::after{background:#93c5fd}
.teacher-stat-card.gray{background:linear-gradient(135deg,#f8fafc,#ffffff)}
.teacher-stat-card.gray::after{background:#cbd5e1}
.teacher-stat-card.gold{background:linear-gradient(135deg,#fffbeb,#ffffff)}
.teacher-stat-card.gold::after{background:#fde68a}
.teacher-calendar-card{margin:18px 0 22px;padding:22px;background:linear-gradient(180deg,#ffffff,#f8fbff)}
.teacher-section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:16px}
.teacher-week-grid{display:grid;grid-template-columns:repeat(7,minmax(130px,1fr));gap:12px;overflow-x:auto;padding-bottom:4px}
.teacher-day-col{min-height:190px;border:1px solid rgba(226,232,240,.95);border-radius:20px;background:rgba(255,255,255,.72);padding:12px;box-shadow:0 8px 20px rgba(15,23,42,.035)}
.teacher-day-col.today{background:linear-gradient(180deg,#ecfdf5,#ffffff);border-color:rgba(34,197,94,.35);box-shadow:0 12px 28px rgba(34,197,94,.09)}
.teacher-day-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(226,232,240,.9);padding-bottom:9px;margin-bottom:10px}
.teacher-day-head b{font-size:13px;font-weight:900;color:var(--text)}
.teacher-day-head span{font-size:12px;color:var(--muted);font-weight:700}
.teacher-day-lessons{display:flex;flex-direction:column;gap:9px}
.teacher-cal-lesson{position:relative;border-radius:16px;padding:11px 10px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;border:1px solid rgba(15,23,42,.06);box-shadow:0 8px 18px rgba(15,23,42,.055);animation:teacherLessonIn .28s ease both}
.teacher-cal-lesson.paid{background:linear-gradient(135deg,#d1fae5,#f0fdf4);border-color:rgba(22,163,74,.28)}
.teacher-cal-lesson.pending{background:linear-gradient(135deg,#fef3c7,#fff7ed);border-color:rgba(245,158,11,.25)}
.teacher-cal-lesson.past{background:#f1f5f9;color:#64748b;box-shadow:none}
.teacher-cal-lesson b{display:block;font-size:12px;font-weight:900;color:#065f46;white-space:nowrap}
.teacher-cal-lesson span{display:block;font-size:12px;font-weight:800;color:#0f172a;line-height:1.2;margin-top:4px}
.teacher-info-i{position:relative;width:22px;height:22px;border:0;border-radius:999px;background:#fff;color:#2563eb;font-weight:900;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.12);flex:0 0 auto}
.teacher-info-pop{position:absolute;right:0;top:28px;z-index:40;width:245px;padding:12px 14px;border-radius:16px;background:#0f172a;color:#fff;text-align:left;font-size:12px;font-weight:600;line-height:1.45;box-shadow:0 18px 44px rgba(15,23,42,.28);opacity:0;transform:translateY(-5px) scale(.98);pointer-events:none;transition:.16s ease}
.teacher-info-pop b{color:#fff;font-size:13px;margin-bottom:5px}
.teacher-info-i:hover .teacher-info-pop,.teacher-info-i:focus .teacher-info-pop{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.teacher-empty-day{border:1px dashed rgba(148,163,184,.45);border-radius:14px;padding:12px;text-align:center;color:#94a3b8;font-size:12px;font-weight:700;background:rgba(248,250,252,.75)}
.teacher-control-grid{grid-template-columns:1fr 2fr;margin:18px 0 24px}
.teacher-booking-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.teacher-list-card{background:linear-gradient(180deg,#ffffff,#f8fafc)}
@keyframes teacherLessonIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:1000px){.teacher-stats-grid{grid-template-columns:repeat(2,1fr)}.teacher-week-grid{grid-template-columns:repeat(7,170px)}.teacher-control-grid,.teacher-booking-split{grid-template-columns:1fr}}
@media(max-width:640px){.teacher-stats-grid{grid-template-columns:1fr}.teacher-calendar-card{padding:16px}.teacher-week-grid{grid-template-columns:repeat(7,155px)}}

/* v41 dedicated reschedule flow */
.reschedule-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:18px;
  align-items:start;
}
.reschedule-main-card{
  padding:22px;
  overflow:visible;
}
.reschedule-head h2{
  margin:4px 0 6px;
  font-size:26px;
  letter-spacing:-.6px;
}
.reschedule-current-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:16px 0;
}
.reschedule-current-box>div{
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(135deg,#eef7ff,#f8fbff);
  border:1px solid rgba(148,163,184,.24);
}
.reschedule-current-box strong{
  display:block;
  margin-top:4px;
  font-size:15px;
}
.reschedule-warning-box{
  padding:12px 14px;
  border-radius:14px;
  background:#fff7ed;
  color:#7c2d12;
  border:1px solid rgba(251,146,60,.25);
  font-weight:700;
  font-size:13px;
  margin-bottom:16px;
}
.reschedule-calendar-title{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-end;
  padding:4px 2px 14px;
}
.reschedule-calendar-title b{
  font-size:17px;
}
.reschedule-calendar-title span{
  color:var(--muted,#64748b);
  font-size:13px;
  max-width:360px;
  text-align:right;
}
.reschedule-summary-card{
  position:sticky;
  top:18px;
  border:1px solid rgba(34,197,94,.22) !important;
  background:linear-gradient(180deg,#ffffff,#f6fff9) !important;
}
.selected-slot-chip--reschedule{
  border-color:rgba(34,197,94,.28) !important;
  background:#f0fdf4 !important;
}
.reschedule-no-payment{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:14px 0;
  padding:12px 14px;
  border-radius:14px;
  background:#ecfdf5;
  color:#065f46;
  border:1px solid rgba(16,185,129,.22);
}
.reschedule-no-payment span{
  font-size:13px;
  color:#047857;
}
.summary-cancel{
  width:100%;
  justify-content:center;
  margin-top:10px;
}
@media(max-width:900px){
  .reschedule-layout{grid-template-columns:1fr;}
  .reschedule-current-box{grid-template-columns:1fr;}
  .reschedule-calendar-title{align-items:flex-start;flex-direction:column;}
  .reschedule-calendar-title span{text-align:left;}
  .reschedule-summary-card{position:static;}
}

/* v42 dashboard organisation, reports and teacher carousel */
.teacher-profile-form{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px;padding:0 4px}
.teacher-profile-form .label{display:block;width:100%}
.teacher-profile-form .input,.teacher-profile-form textarea{width:100%;box-sizing:border-box;border-radius:16px}
.teacher-profile-form textarea{min-height:150px;resize:vertical;line-height:1.5;padding:14px 16px;background:#fff;border:1px solid var(--border,#e5e7eb)}
.teacher-profile-card:not(article){padding:24px;background:linear-gradient(145deg,#ffffff,#f7fbff);border:1px solid rgba(226,232,240,.95)}
.teacher-control-grid .card{border-radius:24px;box-shadow:0 16px 40px rgba(15,23,42,.06)}
.teacher-booking-split{align-items:start}
.teacher-booking-split>section{background:linear-gradient(180deg,#ffffff,#f8fbff);border:1px solid rgba(226,232,240,.95);border-radius:24px;padding:18px;box-shadow:0 14px 36px rgba(15,23,42,.055)}
.teacher-booking-split>section .h2{margin:0 0 14px}.teacher-booking-split .list{display:grid;gap:10px}.teacher-list-card{margin:0;border-radius:18px!important;box-shadow:0 10px 26px rgba(15,23,42,.045)!important}
.teacher-report-card{margin:18px 0 24px;padding:22px;background:linear-gradient(135deg,#ffffff 0%,#f6fbff 55%,#f4fff8 100%);border:1px solid rgba(226,232,240,.95);box-shadow:0 18px 44px rgba(15,23,42,.065)}
.teacher-report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}.teacher-report-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.teacher-report-controls .select{min-width:160px;border-radius:14px;font-weight:800}
.teacher-report-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}.teacher-report-stats span{display:block;border-radius:18px;padding:14px 16px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:900;border:1px solid rgba(226,232,240,.9)}.teacher-report-stats b{display:block;font-size:26px;letter-spacing:-.04em;line-height:1;color:#0f172a;margin-bottom:6px}.teacher-report-stats .stat-green{background:#ecfdf5;color:#047857}.teacher-report-stats .stat-blue{background:#eff6ff;color:#2563eb}.teacher-report-stats .stat-red{background:#fff1f2;color:#e11d48}.teacher-report-stats .stat-orange{background:#fff7ed;color:#c2410c}
.teacher-history-list{display:grid;gap:9px}.teacher-history-row{display:grid;grid-template-columns:180px 1fr auto;align-items:center;gap:14px;border-radius:16px;padding:12px 14px;border:1px solid rgba(226,232,240,.9);background:#fff;box-shadow:0 8px 20px rgba(15,23,42,.04);animation:teacherLessonIn .26s ease both}.teacher-history-row:nth-child(2){animation-delay:.03s}.teacher-history-row:nth-child(3){animation-delay:.06s}.teacher-history-row:nth-child(4){animation-delay:.09s}.teacher-history-row:nth-child(5){animation-delay:.12s}.teacher-history-row.done{background:linear-gradient(90deg,#ecfdf5,#ffffff);border-left:5px solid #22c55e}.teacher-history-row.cancelled{background:linear-gradient(90deg,#fff1f2,#ffffff);border-left:5px solid #ef4444}.teacher-history-row.noshow{background:linear-gradient(90deg,#fff7ed,#ffffff);border-left:5px solid #f97316}.teacher-history-row.scheduled{background:linear-gradient(90deg,#eff6ff,#ffffff);border-left:5px solid #3b82f6}.teacher-history-date b,.teacher-history-student b{display:block;color:#0f172a;font-size:13px}.teacher-history-date span,.teacher-history-student span{display:block;color:#64748b;font-size:12px;font-weight:700;margin-top:2px}.teacher-history-status{border-radius:999px;padding:7px 10px;background:#f8fafc;border:1px solid #e2e8f0;font-size:11px;font-weight:900;text-transform:uppercase;color:#475569}
.client-history-card{margin-top:24px;background:linear-gradient(135deg,#ffffff,#f8fbff);border:1px solid rgba(226,232,240,.95)}
.teacher-carousel-wrap{position:relative;margin-bottom:4px}.teacher-carousel{display:flex!important;grid-template-columns:none!important;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 54px 18px;margin-bottom:0;scrollbar-width:none}.teacher-carousel::-webkit-scrollbar{display:none}.teacher-carousel .teacher-profile-card{min-width:330px;max-width:420px;scroll-snap-align:center}.teacher-carousel .teacher-profile-card.selected{background:linear-gradient(145deg,#effaf2 0%,#ffffff 54%,#ecfdf5 100%);border-color:#22c55e;box-shadow:0 22px 58px rgba(34,197,94,.18);transform:translateY(-3px) scale(1.015)}.teacher-carousel .teacher-profile-card.selected:after{background:#16a34a}.teacher-car-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border-radius:50%;border:1px solid rgba(226,232,240,.95);background:rgba(255,255,255,.92);box-shadow:0 12px 30px rgba(15,23,42,.12);font-size:26px;font-weight:900;cursor:pointer;color:#0f172a;transition:.18s ease}.teacher-car-arrow:hover{transform:translateY(-50%) scale(1.08);background:#f8fbff}.teacher-car-arrow.left{left:4px}.teacher-car-arrow.right{right:4px}.booking-shell-pro{background:linear-gradient(135deg,#f8fbff 0%,#ffffff 60%,#f1fff6 100%);border:1px solid rgba(34,197,94,.12);border-radius:28px;padding:18px;box-shadow:0 18px 46px rgba(15,23,42,.055)}.booking-shell-pro .booking-calendar{border-color:rgba(34,197,94,.18);box-shadow:0 12px 34px rgba(34,197,94,.055)}
.teacher-week-grid{overflow-x:auto;overflow-y:visible;padding-bottom:78px}.teacher-day-col,.teacher-day-lessons,.teacher-cal-lesson{overflow:visible}.teacher-info-i{z-index:20}.teacher-info-pop{z-index:9999;bottom:28px;top:auto;right:0;max-width:280px}.teacher-info-i:hover{z-index:10000}
@media(max-width:900px){.teacher-report-head{flex-direction:column}.teacher-report-controls{width:100%;justify-content:stretch}.teacher-report-controls .select{flex:1}.teacher-report-stats{grid-template-columns:repeat(2,1fr)}.teacher-history-row{grid-template-columns:1fr}.teacher-history-status{justify-self:start}.teacher-carousel .teacher-profile-card{min-width:280px}.teacher-carousel{padding-left:48px;padding-right:48px}}
@media(max-width:560px){.teacher-report-stats{grid-template-columns:1fr}.teacher-history-row{padding:12px}.teacher-carousel .teacher-profile-card{min-width:250px}}

/* v42 surgical fix: teacher profile editor layout */
.teacher-control-grid .teacher-profile-card:not(article){
  display:block !important;
  cursor:default !important;
  padding:26px 28px 28px !important;
  overflow:hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(66,85,255,.07), transparent 34%),
    linear-gradient(145deg,#ffffff 0%,#f8fbff 64%,#f3fff8 100%) !important;
  border:1.5px solid rgba(226,232,240,.95) !important;
}
.teacher-control-grid .teacher-profile-card:not(article):hover{
  transform:none !important;
  box-shadow:0 16px 40px rgba(15,23,42,.06) !important;
  border-color:rgba(226,232,240,.95) !important;
}
.teacher-control-grid .teacher-profile-card:not(article) h2,
.teacher-control-grid .teacher-profile-card:not(article) p{
  display:block;
  width:100%;
  max-width:100%;
}
.teacher-control-grid .teacher-profile-card:not(article) h2{
  margin:0 0 6px !important;
  padding:0 2px;
}
.teacher-control-grid .teacher-profile-card:not(article) > .muted{
  margin:0 0 20px !important;
  padding:0 2px 16px;
  border-bottom:1px solid rgba(226,232,240,.9);
}
.teacher-profile-form{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:16px 18px !important;
  margin-top:18px !important;
  padding:0 2px !important;
  width:100%;
}
.teacher-profile-form .label{
  display:flex !important;
  flex-direction:column !important;
  width:100%;
  min-width:0;
  gap:8px;
  color:#34405f;
  font-weight:900;
}
.teacher-profile-form .label:nth-child(1),
.teacher-profile-form .label:nth-child(2),
.teacher-profile-form button,
.teacher-profile-form #teacher-profile-msg{
  grid-column:1 / -1;
}
.teacher-profile-form .input,
.teacher-profile-form textarea{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.96);
  border:1.5px solid rgba(210,218,235,.95);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.teacher-profile-form textarea{
  min-height:142px !important;
  resize:vertical;
}
.teacher-profile-form button{
  justify-self:start;
  margin-top:4px;
}
.teacher-profile-form #teacher-profile-msg{
  margin-top:0;
}
@media(max-width:900px){
  .teacher-profile-form{grid-template-columns:1fr;}
  .teacher-control-grid .teacher-profile-card:not(article){padding:22px 18px !important;}
}

/* v43 surgical fix: teacher profile editor and transparent recurring availability */
.teacher-control-grid > section.card.teacher-profile-card{
  display:block !important;
  cursor:default !important;
  padding:30px 32px !important;
  background:
    radial-gradient(circle at 96% 8%, rgba(66,85,255,.075), transparent 32%),
    radial-gradient(circle at 10% 100%, rgba(34,197,94,.06), transparent 34%),
    linear-gradient(145deg,#ffffff 0%,#f8fbff 68%,#f5fff9 100%) !important;
  border:1.5px solid rgba(215,224,244,.98) !important;
  border-radius:28px !important;
  box-shadow:0 18px 48px rgba(15,23,42,.065) !important;
}
.teacher-control-grid > section.card.teacher-profile-card:hover{
  transform:none !important;
  border-color:rgba(215,224,244,.98) !important;
}
.teacher-control-grid > section.card.teacher-profile-card .h2{
  display:block !important;
  width:100% !important;
  margin:0 0 8px !important;
  padding:0 !important;
  font-size:28px !important;
  letter-spacing:-.7px !important;
}
.teacher-control-grid > section.card.teacher-profile-card > .muted{
  display:block !important;
  width:100% !important;
  margin:0 0 22px !important;
  padding:0 0 18px !important;
  border-bottom:1px solid rgba(226,232,240,.92) !important;
  max-width:none !important;
}
.teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:18px !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
.teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form .label{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  color:#27324b !important;
  font-weight:900 !important;
}
.teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form .label:nth-child(1),
.teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form .label:nth-child(2),
.teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form button,
.teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form #teacher-profile-msg{
  grid-column:1 / -1 !important;
}
.teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form .input,
.teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form textarea{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  border-radius:18px !important;
  border:1.5px solid rgba(203,213,225,.98) !important;
  background:rgba(255,255,255,.98) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 18px rgba(15,23,42,.025) !important;
}
.teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form textarea{
  min-height:148px !important;
  line-height:1.55 !important;
  resize:vertical !important;
}
.teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form button{
  width:100% !important;
  max-width:420px !important;
  justify-self:end !important;
  margin-top:4px !important;
}
.availability-hint-card{
  align-self:stretch;
  min-width:240px;
  max-width:390px;
  border-radius:20px;
  background:linear-gradient(135deg,#fff7f7,#ffffff 55%,#f7fbff);
  border:1.5px solid rgba(248,113,113,.18);
  padding:14px 16px;
  box-shadow:0 10px 26px rgba(15,23,42,.045);
}
.availability-hint-card b,.availability-hint-card span{display:block}
.availability-hint-card b{color:#b91c1c;font-size:13px;margin-bottom:4px}
.availability-hint-card span{color:#5f6b86;font-weight:700;font-size:12px;line-height:1.45}
.availability-legend .dot.recurring{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.calendar .slot.teacher-open{position:relative;background:linear-gradient(145deg,#ffffff,#f8fff9)!important;border:1px solid rgba(34,197,94,.22)!important;color:#0f6f3f!important;box-shadow:inset 0 0 0 1px rgba(34,197,94,.12),0 8px 18px rgba(34,197,94,.055)!important}
.calendar .slot.recurring-open{background:linear-gradient(145deg,#fff7f7,#ffffff 50%,#f0fff6)!important;border-color:rgba(239,68,68,.32)!important;box-shadow:inset 0 0 0 1px rgba(239,68,68,.12),0 10px 22px rgba(239,68,68,.07)!important}
.recurring-toggle{
  position:absolute;
  top:5px;
  right:5px;
  width:18px;
  height:18px;
  border-radius:6px;
  background:#fff;
  border:1.5px solid #ef4444;
  box-shadow:0 6px 12px rgba(15,23,42,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.18s ease;
}
.recurring-toggle:hover{transform:scale(1.12);background:#fff1f2}
.recurring-toggle i{
  width:7px;
  height:7px;
  border-radius:50%;
  border:2px solid #ef4444;
  opacity:.35;
  display:block;
}
.recurring-toggle.on{background:#ef4444;border-color:#ef4444}
.recurring-toggle.on i{border-color:#fff;opacity:1;position:relative}
.recurring-toggle.on i:after{
  content:'';
  position:absolute;
  width:5px;
  height:2px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
  left:1px;
  top:0px;
}
@media(max-width:900px){
  .teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form{grid-template-columns:1fr!important}
  .teacher-control-grid > section.card.teacher-profile-card .teacher-profile-form button{max-width:none!important}
  .availability-hint-card{max-width:none;width:100%}
}

/* v43.1 surgical cleanup: availability + teacher profile + tooltip */
.availability-hint-card,.availability-legend{display:none!important}
.availability-tools-clean{margin-bottom:12px!important;align-items:flex-start!important}
.availability-manager-card{padding-top:22px!important}
.availability-manager-card .teacher-cal-wrap{margin-top:8px!important}
.recurring-toggle[title]:hover::after{
  content:attr(title);
  position:absolute;
  right:0;
  top:-34px;
  min-width:154px;
  padding:7px 9px;
  border-radius:12px;
  background:#111827;
  color:#fff;
  font-size:11px;
  font-weight:800;
  box-shadow:0 12px 28px rgba(15,23,42,.22);
  z-index:99999;
  pointer-events:none;
}
.teacher-week-grid{overflow-x:auto!important;overflow-y:visible!important;padding-bottom:120px!important;position:relative!important;z-index:1!important}
.teacher-calendar-card,.teacher-day-col,.teacher-day-lessons,.teacher-cal-lesson{overflow:visible!important}
.teacher-info-i{position:relative!important;z-index:1000!important}
.teacher-info-pop{
  position:absolute!important;
  right:-8px!important;
  top:auto!important;
  bottom:32px!important;
  z-index:999999!important;
  width:300px!important;
  max-width:calc(100vw - 80px)!important;
  white-space:normal!important;
  overflow:visible!important;
}
.teacher-info-i:hover,.teacher-info-i:focus{z-index:1000000!important}
.teacher-info-pop div{margin-top:4px;word-break:break-word}
.teacher-control-grid{align-items:stretch!important}
.teacher-control-grid > section.card:first-child{
  min-height:0!important;
  height:auto!important;
  align-self:start!important;
  padding:24px!important;
}
.teacher-control-grid > section.card:first-child .h2{margin-bottom:8px!important}
.teacher-control-grid > section.card:first-child .btn{margin-top:6px!important}
.teacher-profile-editor{
  display:block!important;
  padding:28px 32px!important;
  border-radius:30px!important;
  background:radial-gradient(circle at 96% 7%,rgba(66,85,255,.08),transparent 32%),linear-gradient(145deg,#ffffff,#f7fbff 72%,#f3fff8)!important;
  border:1.5px solid rgba(210,221,242,.98)!important;
  box-shadow:0 20px 54px rgba(15,23,42,.07)!important;
}
.teacher-profile-editor-head{
  display:block!important;
  width:100%!important;
  padding-bottom:18px!important;
  margin-bottom:22px!important;
  border-bottom:1px solid rgba(226,232,240,.95)!important;
}
.teacher-profile-editor-head .h2{margin:4px 0 7px!important;font-size:28px!important;letter-spacing:-.7px!important}
.teacher-profile-editor-head .muted{margin:0!important;max-width:620px!important}
.teacher-profile-editor .teacher-profile-form{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:18px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}
.teacher-profile-editor .teacher-profile-form .label{display:flex!important;flex-direction:column!important;gap:8px!important;margin:0!important;min-width:0!important;font-weight:900!important;color:#27324b!important}
.teacher-profile-editor .teacher-profile-form .full{grid-column:1 / -1!important}
.teacher-profile-editor .teacher-profile-form .input,.teacher-profile-editor .teacher-profile-form textarea{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  border-radius:18px!important;
  border:1.5px solid rgba(203,213,225,.98)!important;
  background:#fff!important;
  padding:14px 16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 18px rgba(15,23,42,.025)!important;
}
.teacher-profile-editor .teacher-profile-form textarea{min-height:145px!important;line-height:1.55!important;resize:vertical!important}
.teacher-profile-editor .save-profile-btn{width:100%!important;max-width:420px!important;justify-self:end!important;margin-top:2px!important}
@media(max-width:900px){.teacher-profile-editor .teacher-profile-form{grid-template-columns:1fr!important}.teacher-profile-editor{padding:22px 18px!important}.teacher-profile-editor .save-profile-btn{max-width:none!important}.teacher-info-pop{right:auto!important;left:-220px!important;width:270px!important}}

/* v43.2 surgical fix: make teacher lesson info tooltip fully visible above calendar cards */
.teacher-calendar-card,
.teacher-week-grid,
.teacher-day-col,
.teacher-day-lessons,
.teacher-cal-lesson{
  overflow:visible!important;
}
.teacher-calendar-card{position:relative!important;z-index:5!important;}
.teacher-week-grid{position:relative!important;z-index:10!important;padding-top:8px!important;padding-bottom:170px!important;}
.teacher-day-col{position:relative!important;z-index:1!important;}
.teacher-cal-lesson{position:relative!important;z-index:2!important;}
.teacher-day-col:has(.teacher-info-i:hover),
.teacher-day-col:has(.teacher-info-i:focus),
.teacher-cal-lesson:has(.teacher-info-i:hover),
.teacher-cal-lesson:has(.teacher-info-i:focus){
  z-index:999999!important;
}
.teacher-info-i{position:relative!important;z-index:999999!important;}
.teacher-info-pop{
  position:absolute!important;
  top:50%!important;
  bottom:auto!important;
  right:32px!important;
  left:auto!important;
  width:340px!important;
  max-width:340px!important;
  max-height:270px!important;
  overflow:auto!important;
  padding:14px 16px!important;
  border-radius:18px!important;
  background:#0f172a!important;
  color:#fff!important;
  box-shadow:0 22px 60px rgba(15,23,42,.36)!important;
  opacity:0;
  transform:translateY(-50%) translateX(-8px) scale(.98)!important;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease!important;
  white-space:normal!important;
}
.teacher-info-pop::after{
  content:"";
  position:absolute;
  right:-7px;
  top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:14px;
  height:14px;
  background:#0f172a;
}
.teacher-info-i:hover .teacher-info-pop,
.teacher-info-i:focus .teacher-info-pop{
  opacity:1!important;
  transform:translateY(-50%) translateX(0) scale(1)!important;
  pointer-events:auto!important;
}
.teacher-info-pop b,
.teacher-info-pop div{position:relative;z-index:2;}
@media(max-width:900px){
  .teacher-info-pop{right:auto!important;left:32px!important;width:300px!important;max-width:calc(100vw - 70px)!important;}
  .teacher-info-pop::after{right:auto;left:-7px;}
}

/* v44 admin lesson history panel */
.admin-history-panel{margin-top:28px;padding:24px;background:linear-gradient(135deg,#ffffff 0%,#f7fbff 50%,#f3fff8 100%);border:1px solid rgba(226,232,240,.95);box-shadow:0 20px 52px rgba(15,23,42,.07)}
.admin-history-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}.admin-history-box{border:1px solid #e5e9f5;background:#fff;border-radius:20px;padding:18px;cursor:pointer;transition:.22s ease;box-shadow:0 10px 26px rgba(15,23,42,.04)}.admin-history-box:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,23,42,.07)}.admin-history-box.is-active{background:linear-gradient(135deg,#ecfdf5,#f8fffb);border-color:#86efac;box-shadow:0 18px 40px rgba(34,197,94,.16)}.admin-history-box b{display:block;font-size:17px}.admin-history-box span{display:block;margin-top:5px;color:#64748b;font-weight:700;font-size:13px}
.admin-history-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0 18px}.admin-history-controls .label{margin:0}.admin-history-controls .input,.admin-history-controls .select{width:100%;border-radius:16px;font-weight:800}
.admin-history-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:14px}.admin-history-summary span{display:block;border-radius:18px;padding:14px 15px;text-transform:uppercase;letter-spacing:.055em;font-size:11px;font-weight:900;border:1px solid rgba(226,232,240,.9)}.admin-history-summary b{display:block;font-size:25px;letter-spacing:-.04em;color:#0f172a}.admin-history-summary .stat-green{background:#ecfdf5;color:#047857}.admin-history-summary .stat-blue{background:#eff6ff;color:#2563eb}.admin-history-summary .stat-red{background:#fff1f2;color:#e11d48}.admin-history-summary .stat-orange{background:#fff7ed;color:#c2410c}
.admin-week-summary{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}.admin-week-pill{border:1px solid #dbeafe;background:#f8fbff;border-radius:999px;padding:9px 13px;display:flex;gap:8px;align-items:center;color:#475569;font-size:12px;font-weight:800}.admin-week-pill b{color:#1e293b}.admin-week-pill span{color:#64748b}
.admin-history-list{display:grid;gap:9px}.admin-history-row{display:grid;grid-template-columns:160px minmax(180px,1fr) minmax(180px,1fr) 110px;gap:12px;align-items:center;padding:13px 15px;border-radius:18px;border:1px solid rgba(226,232,240,.92);background:#fff;box-shadow:0 10px 26px rgba(15,23,42,.045);animation:historyDrop .32s ease both}.admin-history-row.done{background:linear-gradient(135deg,#ecfdf5,#ffffff);border-color:#bbf7d0}.admin-history-row.cancelled{background:linear-gradient(135deg,#fff1f2,#ffffff);border-color:#fecdd3}.admin-history-row.noshow{background:linear-gradient(135deg,#fff7ed,#ffffff);border-color:#fed7aa}.admin-history-row.scheduled{background:linear-gradient(135deg,#eff6ff,#ffffff);border-color:#bfdbfe}.admin-history-row.pending{background:linear-gradient(135deg,#f8fafc,#ffffff);border-color:#cbd5e1}.admin-history-date b,.admin-history-person b{display:block;color:#111827}.admin-history-date span,.admin-history-person span,.admin-history-note span{display:block;font-size:12px;color:#64748b;font-weight:800;margin-top:3px}.admin-history-note small{display:block;color:#334155;font-size:12px;margin-top:3px;line-height:1.35}.admin-history-status{justify-self:end;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:950;text-transform:uppercase;letter-spacing:.05em;background:#f1f5f9;color:#475569}.admin-history-row.done .admin-history-status{background:#dcfce7;color:#047857}.admin-history-row.cancelled .admin-history-status{background:#ffe4e6;color:#be123c}.admin-history-row.noshow .admin-history-status{background:#ffedd5;color:#c2410c}.admin-history-row.scheduled .admin-history-status{background:#dbeafe;color:#1d4ed8}
@keyframes historyDrop{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:1000px){.admin-history-controls,.admin-history-summary{grid-template-columns:repeat(2,1fr)}.admin-history-row{grid-template-columns:1fr}.admin-history-status{justify-self:start}.admin-history-grid{grid-template-columns:1fr}}
@media(max-width:560px){.admin-history-controls,.admin-history-summary{grid-template-columns:1fr}}

/* v45 admin drag/drop calendar framework */
.admin-slot-designer{padding:18px;border:1px solid #e2e8f0;border-radius:24px;background:linear-gradient(135deg,#ffffff,#f8fbff);box-shadow:0 18px 46px rgba(15,23,42,.06)}
.admin-designer-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}.admin-designer-top h3{margin:3px 0;font-size:22px;letter-spacing:-.04em}.slot-palette{width:150px;min-height:74px;border-radius:20px;background:linear-gradient(135deg,#eef2ff,#ffffff);border:1px dashed #818cf8;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:grab;box-shadow:0 18px 38px rgba(79,70,229,.14);transition:.2s ease}.slot-palette:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(79,70,229,.18)}.slot-palette b{font-size:19px;color:#3730a3}.slot-palette span{font-size:12px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.05em}
.admin-days-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}.admin-day-tab{border:1px solid #e2e8f0;background:#fff;border-radius:999px;padding:10px 14px;font-weight:950;color:#475569;cursor:pointer;transition:.18s ease}.admin-day-tab:hover{transform:translateY(-1px);background:#f8fafc}.admin-day-tab.is-active{background:#22c55e;color:#fff;border-color:#22c55e;box-shadow:0 14px 30px rgba(34,197,94,.22)}
.admin-day-settings-card{display:grid;grid-template-columns:1.2fr repeat(3,1fr) auto auto;gap:12px;align-items:end;margin-bottom:16px;padding:14px;border-radius:20px;background:#ffffff;border:1px solid #e5e7eb}.admin-day-settings-card label{font-size:12px;font-weight:950;color:#334155;display:flex;flex-direction:column;gap:6px}.admin-day-settings-card .switch-line{flex-direction:row;align-items:center;gap:9px;padding:12px;border-radius:16px;background:#f8fafc}.admin-day-settings-card .input{height:42px;border-radius:14px;font-weight:900}
.admin-designer-title{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:18px 18px 0 0;background:#f8fafc;border:1px solid #e2e8f0;border-bottom:0}.admin-designer-title b{font-size:16px}.admin-designer-title span{font-size:12px;color:#64748b;font-weight:900}.admin-time-grid{max-height:540px;overflow:auto;border:1px solid #e2e8f0;border-radius:0 0 22px 22px;background:#f8fafc;padding:8px}.admin-time-row{min-height:42px;display:grid;grid-template-columns:72px 1fr;align-items:center;gap:12px;border-bottom:1px solid rgba(226,232,240,.75);padding:4px 8px;cursor:copy;transition:.16s ease}.admin-time-row:last-child{border-bottom:0}.admin-time-row>span{font-weight:950;color:#64748b;font-size:12px}.admin-time-row em{font-style:normal;color:#cbd5e1;font-weight:800;font-size:12px}.admin-time-row:hover{background:#eef6ff}.admin-time-row.has-slot{background:linear-gradient(90deg,#f0fdf4,#ffffff)}.admin-slot-block{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:9px 12px;border-radius:16px;background:linear-gradient(135deg,#dcfce7,#ffffff);border:1px solid #86efac;box-shadow:0 10px 24px rgba(34,197,94,.13);cursor:grab;animation:slotPop .22s ease both}.admin-slot-block b{font-size:13px;color:#065f46}.admin-slot-block small{color:#047857;font-weight:900}.admin-slot-block button{border:0;background:#fee2e2;color:#dc2626;border-radius:999px;width:26px;height:26px;font-weight:950;cursor:pointer}.admin-slot-block button:hover{background:#fecaca;transform:scale(1.06)}
@keyframes slotPop{from{opacity:0;transform:scale(.96) translateY(-2px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:1050px){.admin-day-settings-card{grid-template-columns:1fr 1fr}.admin-designer-top{flex-direction:column;align-items:flex-start}.slot-palette{width:100%}}
@media(max-width:640px){.admin-day-settings-card{grid-template-columns:1fr}.admin-time-row{grid-template-columns:60px 1fr}.admin-slot-block{flex-wrap:wrap}.admin-days-tabs{overflow:auto;flex-wrap:nowrap}}

/* v45.1 surgical fix: admin lesson-grid timeline shows real 45-minute block height */
.admin-timeline-wrap{display:grid;grid-template-columns:76px 1fr;gap:0;max-height:620px;overflow:auto;border:1px solid #e2e8f0;border-radius:0 0 22px 22px;background:#f8fafc;padding:10px;position:relative}
.admin-timeline-ruler{position:relative;border-right:1px solid #e2e8f0;background:#f8fafc;min-width:72px}
.admin-timeline-canvas{position:relative;background:linear-gradient(180deg,#ffffff,#f8fafc);cursor:copy;min-width:360px}
.admin-timeline-line{position:absolute;left:0;right:0;height:1px;background:rgba(226,232,240,.88);pointer-events:none;z-index:1}
.admin-timeline-line.major{background:rgba(148,163,184,.55)}
.admin-timeline-ruler .admin-timeline-line span{position:absolute;left:8px;top:-8px;font-size:12px;font-weight:950;color:#64748b;background:#f8fafc;padding-right:6px}
.admin-timeline-canvas .admin-timeline-line span{display:none}
.admin-slot-timeline-block{position:absolute!important;left:14px;right:14px;z-index:5;min-height:0!important;display:flex;align-items:center;justify-content:space-between;padding:10px 12px!important;box-sizing:border-box;overflow:hidden}
.admin-slot-timeline-block b{display:block;font-size:13px;color:#065f46;line-height:1.15}.admin-slot-timeline-block small{display:block;margin-top:3px;color:#047857;font-weight:900}
.admin-timeline-hint{margin:10px 4px 0;font-size:12px;color:#64748b;font-weight:800}.admin-timeline-canvas:hover{background:linear-gradient(180deg,#ffffff,#eef6ff)}
@media(max-width:640px){.admin-timeline-wrap{grid-template-columns:64px 1fr}.admin-timeline-canvas{min-width:300px}.admin-slot-timeline-block{left:8px;right:8px}}
/* v45.2 password recovery */
.forgot-link{border:0;background:transparent;color:#2563eb;font-weight:800;cursor:pointer;padding:8px 6px;text-align:center;border-radius:12px;transition:.18s ease}.forgot-link:hover{background:#eef5ff;transform:translateY(-1px)}.okbox{border:1px solid rgba(34,197,94,.25);background:linear-gradient(135deg,#ecfdf5,#f0fdf4);color:#166534;border-radius:14px;padding:12px 14px;font-weight:800;line-height:1.45}


/* v-logo: SKULE Book calendar-check brand mark */
.logo{height:36px;max-width:230px;width:auto;object-fit:contain;object-position:left center}
.hero-logo{height:52px;max-width:300px}
.hero-logo-box .hero-logo{height:52px;max-width:300px}
.sidebar-logo-row .logo{height:34px;max-width:220px}
@media(max-width:850px){.hero-logo,.hero-logo-box .hero-logo{height:44px;max-width:260px}.sidebar-logo-row .logo{height:32px;max-width:210px}}


/* FINAL LOGO PATCH 2026-06-16: use wide Book Skule logo, avoid old cached/cropped wordmark */
.logo{
  height:44px !important;
  max-width:230px !important;
  width:auto !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.hero-logo{
  height:58px !important;
  max-width:310px !important;
}
.sidebar-logo-row .logo,
.sidebar-top .logo{
  height:40px !important;
  max-width:215px !important;
}
.login-card .logo{
  height:42px !important;
  max-width:230px !important;
}
@media(max-width:850px){
  .logo{height:38px !important;max-width:200px !important;}
  .hero-logo{height:48px !important;max-width:260px !important;}
}

/* FINAL TIGHT LOGO PATCH 2026-06-16
   Uses the same white/red/black logo, but displays it larger and removes the visual white-space problem. */
.logo{
  height:52px !important;
  max-width:310px !important;
  width:auto !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.hero-logo-box{
  padding:6px 8px !important;
  border-radius:16px !important;
}
.hero-logo,
.hero-logo-box .hero-logo{
  height:82px !important;
  max-width:560px !important;
}
.sidebar-logo-row .logo,
.sidebar-top .logo{
  height:46px !important;
  max-width:270px !important;
}
.login-card .logo{
  height:48px !important;
  max-width:280px !important;
}
@media(max-width:850px){
  .logo{height:42px !important;max-width:240px !important;}
  .hero-logo-box{padding:5px 7px !important;border-radius:14px !important;}
  .hero-logo,
  .hero-logo-box .hero-logo{height:58px !important;max-width:340px !important;}
  .sidebar-logo-row .logo,
  .sidebar-top .logo{height:38px !important;max-width:220px !important;}
}

/* =========================================================
   FINAL LOGO SIZE FIX — 2026-06-16
   Professional balanced logo size.
   Keeps the original red/black/white logo image.
   ========================================================= */

.logo{
  height:32px !important;
  max-width:180px !important;
  width:auto !important;
  object-fit:contain !important;
  object-position:left center !important;
}

.hero-logo-box{
  padding:8px 11px !important;
  border-radius:15px !important;
}

.hero-logo,
.hero-logo-box .hero-logo{
  height:42px !important;
  max-width:210px !important;
  width:auto !important;
  object-fit:contain !important;
  object-position:left center !important;
  display:block !important;
}

.sidebar-logo-row .logo,
.classroom-sidebar .logo{
  height:30px !important;
  max-width:165px !important;
}

@media(max-width:850px){
  .hero-logo,
  .hero-logo-box .hero-logo{
    height:36px !important;
    max-width:180px !important;
  }
  .hero-logo-box{
    padding:7px 10px !important;
    border-radius:14px !important;
  }
}

@media(max-width:520px){
  .hero-logo,
  .hero-logo-box .hero-logo{
    height:32px !important;
    max-width:160px !important;
  }
}

/* =========================================================
   FINAL HERO CLEANUP — 2026-06-16
   Cleaner login hero: fewer elements, professional pills, no trust clutter
   ========================================================= */
.login-video-mode .hero-card{
  max-width:720px!important;
}

.login-video-mode .hero-title{
  font-size:clamp(42px,4.25vw,64px)!important;
  line-height:1.18!important;
  letter-spacing:-2.1px!important;
  margin:22px 0 14px!important;
}

.login-video-mode .hero-title span{
  background:rgba(255,255,255,.88)!important;
  border-radius:13px!important;
  padding:.055em .18em .09em!important;
  box-shadow:0 8px 22px rgba(5,13,45,.10)!important;
  line-height:1.26!important;
}

.login-video-mode .hero-p{
  max-width:620px!important;
  font-size:clamp(14px,1.05vw,17px)!important;
  line-height:1.62!important;
  font-weight:750!important;
  margin:0 0 14px!important;
}

.login-video-mode .hero-p span{
  background:rgba(255,255,255,.78)!important;
  border-radius:9px!important;
  padding:.07em .22em!important;
  box-shadow:0 5px 16px rgba(5,13,45,.07)!important;
}

.hero-trust-strip,
.hero-teacher-trust{
  display:none!important;
}

.pill-strip{
  width:min(520px,100%)!important;
  margin:14px 0 0!important;
  border-radius:999px!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)!important;
}

.pill-track{
  gap:8px!important;
  animation:pillMarqueeV31 34s linear infinite!important;
}

.login-video-mode .pill-track .pill,
.login-video-mode .pill{
  padding:7px 11px!important;
  font-size:11.5px!important;
  line-height:1.1!important;
  font-weight:850!important;
  letter-spacing:-.05px!important;
  color:#23304f!important;
  background:rgba(248,250,255,.82)!important;
  border:1px solid rgba(171,181,222,.72)!important;
  box-shadow:0 4px 14px rgba(15,23,42,.08)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

.hero-usecase-carousel{
  margin-top:18px!important;
  width:min(520px,100%)!important;
  min-height:88px!important;
}

.hero-usecase{
  padding:13px 15px!important;
  border-radius:17px!important;
  gap:12px!important;
  box-shadow:0 12px 34px rgba(5,13,45,.13)!important;
}

.usecase-icon{
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
  font-size:21px!important;
}

.usecase-copy b{
  font-size:14.5px!important;
  line-height:1.15!important;
}

.usecase-copy span{
  font-size:12px!important;
  line-height:1.25!important;
}

.usecase-link{
  padding:8px 11px!important;
  font-size:11.5px!important;
}

.hero-logo-box .hero-logo{
  height:34px!important;
}

@media(max-width:850px){
  .login-video-mode .hero-title{
    font-size:38px!important;
    line-height:1.18!important;
    letter-spacing:-1.5px!important;
  }
  .hero-logo-box .hero-logo{
    height:30px!important;
  }
  .pill-strip{
    width:100%!important;
  }
  .hero-usecase-carousel{
    width:100%!important;
  }
}


/* v16: polished client profile screen */
.profile-page{
  max-width:1120px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.profile-hero-card{
  position:relative;
  overflow:hidden;
  border:1.5px solid rgba(66,85,255,.18);
  border-radius:28px;
  padding:26px;
  min-height:178px;
  background:
    radial-gradient(circle at 86% 10%,rgba(66,85,255,.20),transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f3f5ff 58%,#eef2ff 100%);
  box-shadow:0 18px 52px rgba(31,44,88,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}
.profile-glow{
  position:absolute;
  width:260px;
  height:260px;
  right:-90px;
  top:-120px;
  border-radius:999px;
  background:rgba(66,85,255,.16);
  filter:blur(8px);
  pointer-events:none;
}
.profile-hero-main{
  position:relative;
  display:flex;
  align-items:center;
  gap:20px;
  min-width:0;
}
.profile-avatar-big{
  width:96px;
  height:96px;
  flex:0 0 96px;
  border-radius:28px;
  background:linear-gradient(135deg,var(--accent),#2332d6);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:34px;
  font-weight:900;
  letter-spacing:-1px;
  box-shadow:0 18px 38px rgba(66,85,255,.26);
  border:1.5px solid rgba(255,255,255,.55);
}
.profile-title-wrap{min-width:0}
.profile-name{
  margin:3px 0 4px;
  font-size:36px;
  line-height:1.05;
  letter-spacing:-1.1px;
  font-weight:900;
  color:#111827;
}
.profile-lead{
  margin:0;
  color:var(--muted);
  font-weight:700;
  max-width:620px;
}
.profile-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}
.profile-badges span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1.5px solid rgba(66,85,255,.18);
  background:rgba(255,255,255,.78);
  color:#293152;
  border-radius:999px;
  padding:7px 11px;
  font-size:12px;
  font-weight:900;
  box-shadow:0 4px 14px rgba(60,68,120,.06);
}
.profile-main-cta{
  position:relative;
  flex:0 0 auto;
  padding:13px 18px;
  border-radius:15px;
}
.profile-grid-modern{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:18px;
}
.profile-info-card,
.profile-goal-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:24px;
  padding:22px;
  box-shadow:var(--shadow);
}
.profile-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
}
.profile-card-head h2{
  margin:4px 0 0;
  font-size:22px;
  line-height:1.15;
  letter-spacing:-.5px;
}
.profile-mini-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:var(--accent-soft);
  border:1.5px solid rgba(66,85,255,.16);
  font-size:20px;
}
.profile-detail-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:18px;
}
.profile-detail-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:14px 15px;
  border:1.5px solid #edf0f8;
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#fafbff);
}
.profile-detail-row span{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:900;
}
.profile-detail-row strong{
  color:#111827;
  font-weight:900;
  text-align:right;
  overflow-wrap:anywhere;
}
.profile-goal-box{
  min-height:118px;
  margin:18px 0;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(135deg,#f7f8ff,#fff);
  border:1.5px dashed rgba(66,85,255,.22);
  color:#27304b;
  font-size:15px;
  line-height:1.65;
  font-weight:700;
}
.profile-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
@media(max-width:900px){
  .profile-hero-card{align-items:flex-start;flex-direction:column;padding:22px}
  .profile-grid-modern{grid-template-columns:1fr}
  .profile-name{font-size:30px}
  .profile-avatar-big{width:78px;height:78px;flex-basis:78px;font-size:27px;border-radius:23px}
}
@media(max-width:560px){
  .profile-hero-main{align-items:flex-start}
  .profile-badges span{font-size:11px;padding:6px 9px}
  .profile-detail-row{align-items:flex-start;flex-direction:column;gap:5px}
  .profile-detail-row strong{text-align:left}
}

/* v17 profile lesson goal launcher */
.profile-lesson-launcher .profile-card-head{align-items:flex-start}
.profile-goal-intro{margin:6px 0 0;max-width:520px;font-size:14px;line-height:1.55}
.profile-goal-form{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
.profile-goal-form .label{background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:14px;box-shadow:0 8px 24px rgba(60,68,120,.06)}
.profile-goal-form .select,.profile-goal-form textarea{margin-top:8px;background:#f8f9ff;border-color:#dfe3f5}
.profile-goal-form textarea{min-height:128px;line-height:1.55}
.profile-lesson-launcher .profile-actions{margin-top:16px}
.profile-lesson-launcher .btn-primary{box-shadow:0 12px 28px rgba(66,85,255,.22)}
.focus-select{font-weight:800;color:#1a1d28}
@media(max-width:760px){.profile-goal-form .label{padding:12px}.profile-goal-form textarea{min-height:118px}}

/* Admin tabs split view */
.admin-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 20px;padding:8px;background:#fff;border:1.5px solid var(--border);border-radius:18px;box-shadow:0 8px 28px rgba(60,68,120,.06)}
.admin-tab-btn{border:1.5px solid transparent;background:transparent;color:var(--muted);border-radius:13px;padding:11px 15px;font-family:inherit;font-weight:900;cursor:pointer;transition:.16s ease;letter-spacing:-.2px}
.admin-tab-btn:hover{background:var(--hover);color:var(--text)}
.admin-tab-btn.is-active{background:var(--accent);color:#fff;box-shadow:0 8px 22px rgba(66,85,255,.22)}
.admin-tab-panel{display:none;animation:adminTabIn .22s ease both}
.admin-tab-panel.is-active{display:block}
@keyframes adminTabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.admin-tabs{display:grid;grid-template-columns:1fr;padding:6px}.admin-tab-btn{text-align:left}}

/* Security enhancement: admin 2FA */
.admin-code-input{
  font-size:26px;
  font-weight:900;
  letter-spacing:8px;
  text-align:center;
}


/* Security fix: visible Turnstile/CAPTCHA area and clearer error strip */
.turnstile-box{min-height:68px;display:flex;align-items:center;justify-content:center;margin:2px 0 4px}
.turnstile-box:empty{display:none}
.error:empty{display:none!important}




/* =========================================================
   PREMIUM APPLE-LIKE UPGRADE (2026 Update)
   ========================================================= */

:root {
  /* Refined Premium Palette */
  --bg: #f5f5f7;          /* Sleek Apple-like light gray */
  --panel: #ffffff;
  --text: #1d1d1f;        /* Crisp dark gray/black */
  --muted: #86868b;       /* Elegant secondary text */
  --border: rgba(0, 0, 0, 0.08);
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.02);
  --radius: 22px;         /* Softer, modern corners */
  --accent: #0066cc;      /* Sleek premium blue */
  --btn: #1d1d1f;         /* Deep contrasting primary buttons */
  --btnText: #ffffff;
}

/* 1. Fluid Layout & Content Animations */
.content {
  background: var(--bg) !important;
  animation: contentFadeSlide 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes contentFadeSlide {
  from { opacity: 0; transform: translateY(15px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 2. Premium Cards (Floating & Sleek) */
.card, .profile-info-card, .profile-goal-card, .teacher-profile-card, .teacher-report-card {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: var(--shadow) !important;
  border-radius: var(--radius) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.card:hover, .teacher-profile-card:hover {
  transform: translateY(-3px) scale(1.005) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* 3. Glassmorphism for Sticky Elements (Booking Summary) */
.summary-card, .booking-summary-pro {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: saturate(180%) blur(24px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
}

/* 4. Tactile, Apple-like Buttons */
.btn {
  border-radius: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.2px !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.btn-primary {
  background: var(--btn) !important;
  color: var(--btnText) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.btn-primary:hover {
  background: #000000 !important;
  transform: scale(1.03) translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
}

.btn-ghost:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  transform: scale(1.02) !important;
}

/* 5. Clean Inputs & Forms */
.input, .select, textarea {
  background: rgba(0, 0, 0, 0.02) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  transition: all 0.3s ease !important;
}

.input:focus, .select:focus, textarea:focus {
  background: #ffffff !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.15) !important;
}

/* 6. Calendar & Slot Refinements */
.calendar {
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03) !important;
}

.cal-head div {
  background: #fafafa !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 11px !important;
}

.slot.available {
  background: #ffffff !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.slot.available:hover {
  background: #f0f4ff !important;
  transform: scale(1.04) !important;
  z-index: 2;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15) !important;
}

.slot.selected {
  background: var(--accent) !important;
  border-radius: 8px !important;
  transform: scale(1.02) !important;
  z-index: 3;
  box-shadow: 0 6px 16px rgba(0, 102, 204, 0.3) !important;
}

/* 7. Typography Polish */
.h1, .h2, .hero-title {
  letter-spacing: -0.04em !important;
  color: var(--text) !important;
}


/* =========================================================
   PREMIUM TEACHER SELECTION CARDS
   ========================================================= */

/* The Card Container */
.teacher-card {
  position: relative;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 20px !important;
  padding: 24px !important;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Hover State - Subtle Lift */
.teacher-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05) !important;
}

/* Selected State - Elevated & Green Illuminated */
.teacher-card.selected {
  border-color: #13a45b !important; /* Green border */
  background: #ffffff !important;
  transform: translateY(-4px) scale(1.01) !important;
  /* Green illumination shadow */
  box-shadow: 0 12px 35px rgba(19, 164, 91, 0.15), 0 0 0 1px #13a45b inset !important; 
}

/* Avatar in the Top Corner */
.teacher-card-avatar {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #f5f5f7;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  object-fit: cover;
  /* Fallback silhouette icon if no image */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c1c1c4"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
  background-size: 60%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Elegant Title & Bio */
.teacher-card-info {
  padding-right: 60px; /* Leave space for the avatar */
}

.teacher-card-name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1d1d1f !important;
  letter-spacing: -0.3px;
  margin: 0 0 4px 0 !important;
}

.teacher-card-bio {
  font-size: 14px !important;
  color: #86868b !important;
  line-height: 1.5;
  margin: 0 !important;
}

/* Nicely Stacked Quality Pills */
.teacher-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.teacher-pill {
  background: rgba(0, 0, 0, 0.04);
  color: #1d1d1f;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 12px; /* Smooth pill shape */
  letter-spacing: -0.1px;
  transition: background 0.3s ease;
}

/* Slightly tint pills when the card is selected */
.teacher-card.selected .teacher-pill {
  background: rgba(19, 164, 91, 0.1);
  color: #0e8547;
}
/* =========================================================
   PREMIUM TEACHER CARDS — surgical upgrade 2026-06-17
   Elegant carousel cards inspired by premium booking widgets.
   ========================================================= */
.teacher-carousel-wrap{
  margin: 2px 0 8px !important;
}
.teacher-carousel{
  gap: 18px !important;
  padding: 12px 58px 22px !important;
}
.teacher-carousel .teacher-profile-card.premium-teacher-card{
  min-width: 350px !important;
  max-width: 430px !important;
}
.teacher-profile-card.premium-teacher-card{
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  min-height: 262px !important;
  padding: 24px 24px 22px !important;
  border-radius: 28px !important;
  border: 2px solid rgba(226,232,240,.96) !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(34,197,94,.08), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fbfcff 56%, #f8fafc 100%) !important;
  box-shadow: 0 18px 44px rgba(15,23,42,.075) !important;
  cursor: pointer !important;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background .22s ease !important;
}
.teacher-profile-card.premium-teacher-card:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg, rgba(255,255,255,.88), transparent 36%, rgba(255,255,255,.46));
  opacity:.65;
}
.teacher-profile-card.premium-teacher-card:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(34,197,94,.38) !important;
  box-shadow: 0 24px 62px rgba(15,23,42,.105), 0 10px 26px rgba(34,197,94,.08) !important;
}
.teacher-profile-card.premium-teacher-card.selected{
  transform: translateY(-6px) scale(1.012) !important;
  border-color: #16a34a !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(34,197,94,.18), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fffb 58%, #effdf5 100%) !important;
  box-shadow: 0 28px 72px rgba(15,23,42,.12), 0 0 0 5px rgba(34,197,94,.12), 0 16px 34px rgba(34,197,94,.18) !important;
}
.teacher-profile-card.premium-teacher-card.selected:after{
  content:"✓" !important;
  position:absolute !important;
  top: 16px !important;
  right: 16px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: #16a34a !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(22,163,74,.26) !important;
  z-index: 4 !important;
}
.premium-teacher-avatar{
  position:absolute !important;
  top: 26px !important;
  right: 24px !important;
  width: 76px !important;
  height: 76px !important;
  border-radius: 24px !important;
  display:grid !important;
  place-items:center !important;
  color:#111827 !important;
  background:
    radial-gradient(circle at 50% 30%, #ffffff 0 19%, transparent 20%),
    radial-gradient(circle at 50% 76%, #ffffff 0 31%, transparent 32%),
    linear-gradient(135deg,#ffe0ea 0%,#fff2c7 45%,#e8edff 100%) !important;
  border: 3px solid #fff !important;
  box-shadow: 0 14px 30px rgba(15,23,42,.12) !important;
  z-index: 3 !important;
  flex: none !important;
}
.premium-teacher-avatar span{
  position:absolute;
  bottom: 8px;
  right: 8px;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111827;
  color:#fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.2px;
  box-shadow: 0 8px 18px rgba(15,23,42,.22);
}
.premium-teacher-main{
  position:relative !important;
  z-index:2 !important;
  padding-right: 94px !important;
  min-width:0 !important;
}
.premium-teacher-top{
  justify-content:flex-start !important;
  gap: 9px !important;
  margin-bottom: 10px !important;
  padding-right: 84px !important;
}
.premium-teacher-card .section-kicker{
  color:#16a34a !important;
  background: rgba(34,197,94,.10) !important;
  border: 1px solid rgba(34,197,94,.16) !important;
  border-radius: 999px !important;
  padding: 6px 10px !important;
  font-size: 10px !important;
  letter-spacing: .72px !important;
  line-height: 1 !important;
}
.premium-teacher-card .teacher-rating{
  background:#fff8db !important;
  border:1px solid #f4de91 !important;
  color:#7a4b00 !important;
  border-radius:999px !important;
  padding: 6px 10px !important;
  line-height: 1 !important;
}
.premium-teacher-card h2{
  margin: 0 0 8px !important;
  font-size: 27px !important;
  line-height: 1.04 !important;
  letter-spacing: -.9px !important;
  color:#111827 !important;
}
.premium-teacher-card p{
  margin: 0 0 16px !important;
  color:#64748b !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  font-weight: 650 !important;
}
.premium-teacher-pills{
  display:flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin: 0 0 14px !important;
  padding-right: 0 !important;
}
.premium-teacher-pills span{
  display:inline-flex !important;
  align-items:center !important;
  min-height: 30px !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  background: rgba(255,255,255,.86) !important;
  color:#293449 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  box-shadow: 0 4px 12px rgba(15,23,42,.04) !important;
}
.premium-teacher-card.selected .premium-teacher-pills span{
  border-color: rgba(34,197,94,.24) !important;
  background: rgba(240,253,244,.96) !important;
  color:#0f7a42 !important;
}
.premium-teacher-trust{
  display:inline-flex !important;
  align-items:center !important;
  gap: 6px !important;
  margin-top: 0 !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: rgba(240,253,244,.82) !important;
  color:#0f7a42 !important;
  border: 1px solid rgba(34,197,94,.18) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}
.teacher-car-arrow{
  border-color: rgba(226,232,240,.95) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.13) !important;
}
@media(max-width:560px){
  .teacher-carousel{padding-left: 46px !important; padding-right: 46px !important;}
  .teacher-carousel .teacher-profile-card.premium-teacher-card{min-width: 274px !important;}
  .teacher-profile-card.premium-teacher-card{min-height: 286px !important;padding: 22px 18px !important;}
  .premium-teacher-avatar{width:62px !important;height:62px !important;right:18px !important;top:22px !important;border-radius:20px !important;}
  .premium-teacher-main{padding-right:72px !important;}
  .premium-teacher-top{padding-right:62px !important;align-items:flex-start !important;flex-wrap:wrap !important;}
  .premium-teacher-card h2{font-size:23px !important;}
  .premium-teacher-card.selected:after{top:12px !important;right:12px !important;}
}

/* V31 — selected teacher badge fix */
.teacher-card{
    position:relative !important;
    overflow:hidden;
}

.teacher-card .teacher-selected,
.teacher-card .selected-check,
.teacher-card .teacher-check,
.teacher-card .teacher-tick{
    position:absolute !important;
    top:14px !important;
    right:14px !important;
    bottom:auto !important;
    left:auto !important;

    width:32px;
    height:32px;
    border-radius:50%;
    background:#16a34a;
    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 8px 20px rgba(22,163,74,.35);
    z-index:20;
}

.teacher-card.selected{
    border:2px solid #16a34a !important;
    box-shadow:
        0 12px 32px rgba(22,163,74,.16),
        0 4px 16px rgba(60,68,120,.08) !important;
}

/* V32 — mobile responsiveness polish for book.skule.pl
   Surgical CSS-only update: keeps desktop unchanged, improves phone layout. */
html, body{
  max-width:100%;
  overflow-x:hidden;
}
img, video, iframe{
  max-width:100%;
}

@media(max-width:850px){
  body{
    background:#f7f8ff;
    font-size:14px;
  }

  .view{
    min-height:100dvh;
  }

  .login-wrap{
    display:flex !important;
    flex-direction:column !important;
    min-height:100dvh !important;
    background:#fff !important;
  }

  .login-video-mode .login-hero,
  .login-hero{
    min-height:auto !important;
    padding:74px 18px 24px !important;
    border-radius:0 0 28px 28px !important;
  }

  .login-video-mode .hero-card,
  .hero-card{
    width:100% !important;
    max-width:none !important;
  }

  .hero-logo-box{
    padding:9px 11px !important;
    border-radius:15px !important;
    max-width:min(74vw,300px) !important;
  }

  .hero-logo-box .hero-logo,
  .hero-logo{
    height:auto !important;
    width:min(68vw,280px) !important;
    max-height:48px !important;
    object-fit:contain !important;
  }

  .login-video-mode .hero-title,
  .hero-title{
    font-size:clamp(34px,10.5vw,46px) !important;
    line-height:1.02 !important;
    letter-spacing:-1.6px !important;
    margin:20px 0 12px !important;
    max-width:100% !important;
  }

  .login-video-mode .hero-p,
  .hero-p{
    font-size:15.5px !important;
    line-height:1.52 !important;
    max-width:100% !important;
    margin:0 0 14px !important;
  }

  .login-video-mode .pill-row,
  .pill-row{
    display:flex !important;
    flex-wrap:wrap !important;
    width:100% !important;
    gap:8px !important;
    margin-top:16px !important;
  }

  .login-video-mode .pill,
  .pill{
    flex:1 1 calc(50% - 8px) !important;
    justify-content:center !important;
    min-width:136px !important;
    padding:10px 10px !important;
    font-size:12.5px !important;
    text-align:center !important;
  }

  .login-panel{
    width:100% !important;
    padding:22px 18px max(28px,env(safe-area-inset-bottom)) !important;
    border-left:0 !important;
    align-items:flex-start !important;
  }

  .login-video-mode .login-card.card,
  .login-card.card{
    max-width:none !important;
    width:100% !important;
    background:#fff !important;
    border-radius:24px !important;
    padding:20px !important;
    box-shadow:0 16px 46px rgba(15,23,42,.10) !important;
    border:1.5px solid rgba(226,232,240,.9) !important;
  }

  .login-lang-floating{
    position:fixed !important;
    top:calc(12px + env(safe-area-inset-top)) !important;
    right:12px !important;
  }

  .h1{font-size:26px !important;letter-spacing:-.7px !important;}
  .h2{font-size:21px !important;}
  .card{padding:18px !important;border-radius:20px !important;}
  .btn{width:100%;min-height:46px;padding:12px 15px !important;}
  .row-actions{width:100%;}
  .row-actions .btn{flex:1 1 100%;}
  .input,.select,textarea{font-size:16px !important;} /* prevents iOS zoom */

  .layout{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    min-height:100dvh !important;
    overflow:visible !important;
  }

  .sidebar{
    width:100% !important;
    padding:16px 0 0 !important;
    border-right:0 !important;
    border-bottom:1.5px solid var(--border) !important;
    position:sticky !important;
    top:0 !important;
    z-index:60 !important;
    box-shadow:0 10px 28px rgba(15,23,42,.06) !important;
  }

  .sidebar-top{padding:0 16px 12px !important;}
  .sidebar-logo-row .logo,
  .sidebar .logo{
    height:auto !important;
    width:min(52vw,210px) !important;
    max-height:44px !important;
  }

  .user-box{
    padding:12px 16px !important;
    margin:0 !important;
    border-top:1px solid rgba(226,232,240,.7) !important;
  }

  .nav{
    flex-direction:row !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch !important;
    border-top:1px solid rgba(226,232,240,.7) !important;
    scrollbar-width:none !important;
  }
  .nav::-webkit-scrollbar{display:none;}
  .nav button{
    flex:0 0 auto !important;
    border-bottom:0 !important;
    border-right:1px solid rgba(226,232,240,.72) !important;
    padding:13px 16px !important;
    font-size:13px !important;
  }
  .nav button.active{padding-left:16px !important;}
  .nav button.active:before{
    left:14px !important;
    right:14px !important;
    top:auto !important;
    bottom:0 !important;
    width:auto !important;
    height:3px !important;
    border-radius:999px 999px 0 0 !important;
  }
  .sidebar-bottom{display:none !important;}

  .content,
  .booking-content{
    height:auto !important;
    min-height:calc(100dvh - 116px) !important;
    overflow:visible !important;
    padding:22px 14px 42px !important;
  }

  .header,
  .booking-header{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:12px !important;
    padding-bottom:14px !important;
    margin-bottom:16px !important;
  }

  .grid,
  .teacher-grid,
  .teacher-grid-pro{
    grid-template-columns:1fr !important;
    gap:13px !important;
  }

  .lesson-card,
  .admin-booking-card,
  .file-booking-card{
    flex-direction:column !important;
    align-items:stretch !important;
    gap:12px !important;
  }

  .dash-countdown-badge{
    width:100% !important;
    align-items:flex-start !important;
  }

  .teacher-carousel{
    display:flex !important;
    overflow-x:auto !important;
    scroll-snap-type:x mandatory !important;
    gap:14px !important;
    padding:4px 18px 18px !important;
    margin-left:-14px !important;
    margin-right:-14px !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  .teacher-carousel::-webkit-scrollbar{display:none;}
  .teacher-carousel .teacher-profile-card.premium-teacher-card,
  .teacher-profile-card.premium-teacher-card,
  .premium-teacher-card{
    min-width:min(84vw,340px) !important;
    max-width:min(84vw,340px) !important;
    scroll-snap-align:center !important;
    padding:20px 16px !important;
    min-height:auto !important;
    border-radius:24px !important;
  }
  .premium-teacher-main{padding-right:72px !important;}
  .premium-teacher-avatar{width:58px !important;height:58px !important;right:16px !important;top:18px !important;}
  .premium-teacher-card h2{font-size:22px !important;}
  .premium-teacher-card p{font-size:13.5px !important;}
  .premium-teacher-pills span{font-size:10.5px !important;padding:6px 9px !important;}
  .premium-teacher-card.selected:after{top:11px !important;right:11px !important;bottom:auto !important;}

  .booking-shell,
  .calendar-shell{
    display:flex !important;
    flex-direction:column !important;
    gap:16px !important;
  }

  .booking-summary-pro,
  .summary-card,
  .summary{
    position:relative !important;
    top:auto !important;
    width:100% !important;
    order:-1 !important;
  }

  .booking-week-toolbar,
  .week-toolbar{
    gap:8px !important;
    padding:10px !important;
    border-radius:18px !important;
  }
  .booking-week-toolbar .btn,
  .week-toolbar .btn{
    width:auto !important;
    flex:1 1 0 !important;
    min-width:0 !important;
    font-size:12px !important;
    padding:10px 8px !important;
  }
  .week-toolbar>div{
    width:100% !important;
    font-size:13px !important;
  }

  .calendar,
  .booking-calendar{
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    border-radius:22px !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .cal-head,
  .cal-row,
  .booking-calendar .cal-head,
  .booking-calendar .cal-row{
    grid-template-columns:58px repeat(7,104px) !important;
    min-width:786px !important;
  }
  .cal-head div,
  .booking-calendar .cal-head div{
    padding:11px 5px !important;
    font-size:11px !important;
  }
  .time-cell{padding:9px 6px !important;font-size:11px !important;}
  .slot,
  .booking-calendar .slot{
    min-height:44px !important;
    font-size:11px !important;
  }

  .selected-slots-list{padding:14px !important;}
  .summary-total{margin:0 14px 14px !important;}
  .summary-note{margin:0 14px 14px !important;}
  .summary-pay{width:calc(100% - 28px) !important;margin:0 14px 12px !important;}

  .classroom-layout{
    display:flex !important;
    flex-direction:column !important;
    height:auto !important;
    min-height:100dvh !important;
  }
  .classroom-main{
    height:auto !important;
    min-height:calc(100dvh - 116px) !important;
    overflow:visible !important;
  }
  .classroom-top{
    height:auto !important;
    min-height:62px !important;
    padding:12px 14px !important;
    flex-wrap:wrap !important;
    gap:10px !important;
  }
  .board-wrap{
    margin:12px !important;
    min-height:70dvh !important;
  }
  .board-frame{height:72dvh !important;}
  .board-tabs{overflow-x:auto !important;}
  .board-tabs .btn{width:auto !important;white-space:nowrap !important;}

  .files-view{padding:24px 14px 48px !important;}
  .files-head{flex-direction:column !important;align-items:stretch !important;}
  .upload-zone{padding:24px 16px !important;border-radius:22px !important;}
  .file-row{align-items:flex-start !important;}

  .content:has(.how-section){padding:22px 14px 48px !important;}
  .how-head .h2{font-size:28px !important;}
  .learn-accordion summary{padding:17px 18px !important;}
  .video-shell,
  .classroom-main .how-section .video-shell,
  .content .how-section .video-shell{min-height:220px !important;}
  .faq-grid,
  .classroom-main .how-section .faq-grid,
  .content .how-section .faq-grid{grid-template-columns:1fr !important;padding:14px !important;}
}

@media(max-width:390px){
  .login-video-mode .hero-title,.hero-title{font-size:32px !important;}
  .login-video-mode .pill,.pill{flex-basis:100% !important;}
  .teacher-carousel .teacher-profile-card.premium-teacher-card,
  .teacher-profile-card.premium-teacher-card,
  .premium-teacher-card{min-width:88vw !important;max-width:88vw !important;}
  .premium-teacher-main{padding-right:0 !important;padding-top:66px !important;}
  .premium-teacher-avatar{left:16px !important;right:auto !important;}
}



/* =========================================================
   BOOK.SKULE.PL — MAIN CONTENT REDESIGN 2026
   Scope: everything inside .content / .classroom-main /
   .files-view / .how-section / .waiting-bg — NOT the sidebar.
   ========================================================= */

/* ── Design tokens ─────────────────────────────────────── */
:root {
  --book-accent:    #0055d4;          /* richer blue */
  --book-accent-s:  rgba(0,85,212,.08);
  --book-accent-m:  rgba(0,85,212,.16);
  --book-green:     #16a34a;
  --book-gold:      #b45309;
  --book-radius-lg: 28px;
  --book-radius-md: 20px;
  --book-radius-sm: 14px;
  --book-shadow-sm: 0 2px 8px rgba(15,23,42,.05);
  --book-shadow-md: 0 8px 32px rgba(15,23,42,.07);
  --book-shadow-lg: 0 20px 54px rgba(15,23,42,.10);
  --book-trans:     all .22s cubic-bezier(.22,.9,.32,1);
}


/* ═══════════════════════════════════════════════════════
   1. CONTENT AREA BASE ANIMATION
   ═══════════════════════════════════════════════════════ */
.content {
  padding: 38px 44px !important;
  background: linear-gradient(160deg,#f6f8ff 0%,#f4f5f9 100%) !important;
  animation: bsContentIn .45s cubic-bezier(.22,.9,.32,1) forwards !important;
}
@keyframes bsContentIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PAGE HEADER ──────────────────────────────────────── */
.header {
  padding-bottom: 28px !important;
  border-bottom: 1.5px solid rgba(0,0,0,.06) !important;
  margin-bottom: 28px !important;
}
.header .h1 {
  font-size: 32px !important;
  letter-spacing: -.9px !important;
}


/* ═══════════════════════════════════════════════════════
   2. CARDS — elevated depth system
   ═══════════════════════════════════════════════════════ */
.content .card,
.booking-content .card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: var(--book-radius-lg) !important;
  box-shadow: var(--book-shadow-md) !important;
  transition: var(--book-trans) !important;
}
.content .card:hover,
.booking-content .card:hover {
  box-shadow: var(--book-shadow-lg) !important;
  transform: translateY(-2px) !important;
}
/* Prevent hover lift on interactive grids / dashboards */
.content .card.no-lift:hover,
.next-lesson-card:hover,
.teacher-calendar-card:hover,
.admin-history-panel:hover,
.summary-card:hover {
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════
   3. CLIENT DASHBOARD
   ═══════════════════════════════════════════════════════ */

/* Next lesson hero card */
.next-lesson-card {
  background: linear-gradient(140deg,#ffffff 0%,#f0f5ff 60%,#ebf5ff 100%) !important;
  border: 1.5px solid rgba(0,85,212,.14) !important;
  border-radius: var(--book-radius-lg) !important;
  padding: 26px !important;
  overflow: hidden !important;
  position: relative !important;
}
.next-lesson-card::before {
  content: "";
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,85,212,.08), transparent 70%);
  right: -40px; top: -60px;
  pointer-events: none;
}

/* Countdown badge */
.dash-countdown-badge {
  background: linear-gradient(135deg,#d1fae5,#ecfdf5) !important;
  border: 1.5px solid rgba(22,163,74,.28) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 28px rgba(22,163,74,.18) !important;
  animation: bsBadgeFloat 3s ease-in-out infinite !important;
}
@keyframes bsBadgeFloat {
  0%,100% { transform: translateY(0);   }
  50%      { transform: translateY(-3px); }
}

/* Quick actions card */
.content .card:has(.row-actions) {
  background: linear-gradient(140deg,#ffffff,#fafbff) !important;
}

/* Lesson list items */
.lesson-card {
  border-radius: var(--book-radius-md) !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.055) !important;
  box-shadow: var(--book-shadow-sm) !important;
  padding: 18px 22px !important;
  transition: var(--book-trans) !important;
}
.lesson-card:hover {
  border-color: rgba(0,85,212,.18) !important;
  box-shadow: 0 12px 34px rgba(0,85,212,.08) !important;
  transform: translateY(-1px) !important;
}

/* Lesson status badges */
.badge {
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  padding: 6px 12px !important;
}
.badge-paid   { background: #dcfce7 !important; color: #14532d !important; border: 1px solid #bbf7d0 !important; }
.badge-pending{ background: #fef9c3 !important; color: #713f12 !important; border: 1px solid #fde047 !important; }
.badge-cancelled,.badge-no_show { background: #fef2f2 !important; color: #991b1b !important; border: 1px solid #fca5a5 !important; }
.badge-completed{ background: #f0fdf4 !important; color: #166534 !important; border: 1px solid #86efac !important; }

/* ── History rows ──────────────────────────────────────── */
.teacher-history-row,
.admin-history-row {
  border-radius: 16px !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(0,0,0,.055) !important;
  background: #fff !important;
  box-shadow: var(--book-shadow-sm) !important;
  transition: var(--book-trans) !important;
}
.teacher-history-row:hover,
.admin-history-row:hover {
  transform: translateX(3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.07) !important;
}
.teacher-history-row.done,
.admin-history-row.done {
  background: linear-gradient(135deg,#f0fdf4,#fff) !important;
  border-color: #bbf7d0 !important;
}
.teacher-history-row.cancelled,
.admin-history-row.cancelled {
  background: linear-gradient(135deg,#fff1f2,#fff) !important;
  border-color: #fca5a5 !important;
}
.teacher-history-row.noshow,
.admin-history-row.noshow {
  background: linear-gradient(135deg,#fff7ed,#fff) !important;
  border-color: #fed7aa !important;
}
.teacher-history-row.scheduled,
.admin-history-row.scheduled {
  background: linear-gradient(135deg,#eff6ff,#fff) !important;
  border-color: #bfdbfe !important;
}


/* ═══════════════════════════════════════════════════════
   4. TEACHER PROFILE CARDS (booking carousel)
   ═══════════════════════════════════════════════════════ */
.teacher-carousel-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 0 4px !important;
}
.teacher-carousel-wrap::before,
.teacher-carousel-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 52px;
  z-index: 4;
  pointer-events: none;
}
.teacher-carousel-wrap::before { left:  0; background: linear-gradient(90deg,#f6f8ff,transparent); }
.teacher-carousel-wrap::after  { right: 0; background: linear-gradient(-90deg,#f6f8ff,transparent); }

.teacher-car-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 6 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(0,0,0,.09) !important;
  background: #fff !important;
  font-size: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(15,23,42,.14) !important;
  transition: var(--book-trans) !important;
}
.teacher-car-arrow.left { left:  10px !important; }
.teacher-car-arrow.right{ right: 10px !important; }
.teacher-car-arrow:hover {
  background: var(--book-accent) !important;
  color: #fff !important;
  border-color: var(--book-accent) !important;
  box-shadow: 0 12px 28px rgba(0,85,212,.22) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

/* Card itself — override the already-good v32 style with sharper depth */
.teacher-profile-card.premium-teacher-card {
  border: 1.5px solid rgba(0,0,0,.07) !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(0,85,212,.06), transparent 32%),
    linear-gradient(170deg,#ffffff 0%,#f9faff 100%) !important;
  box-shadow: 0 14px 42px rgba(15,23,42,.08) !important;
}
.teacher-profile-card.premium-teacher-card:hover {
  border-color: rgba(0,85,212,.22) !important;
  box-shadow: 0 22px 58px rgba(0,85,212,.11), 0 8px 24px rgba(15,23,42,.06) !important;
  transform: translateY(-5px) !important;
}
.teacher-profile-card.premium-teacher-card.selected {
  border-color: var(--book-green) !important;
  background:
    radial-gradient(circle at 88% 14%, rgba(22,163,74,.12), transparent 32%),
    linear-gradient(170deg,#ffffff 0%,#f0fdf4 100%) !important;
  box-shadow: 0 24px 64px rgba(22,163,74,.16), 0 0 0 4px rgba(22,163,74,.10) !important;
  transform: translateY(-6px) scale(1.014) !important;
}
.premium-teacher-avatar {
  background:
    radial-gradient(circle at 50% 30%,#fff 0 18%,transparent 19%),
    radial-gradient(circle at 50% 76%,#fff 0 30%,transparent 31%),
    linear-gradient(135deg,#dde8ff 0%,#e6f2ff 45%,#ffe8f4 100%) !important;
  box-shadow: 0 12px 28px rgba(0,85,212,.18) !important;
}

/* Teacher stat cards (teacher dashboard) */
.teacher-stats-grid {
  gap: 16px !important;
  margin-bottom: 24px !important;
}
.teacher-stat-card {
  border-radius: 22px !important;
  border: 1px solid rgba(0,0,0,.055) !important;
  padding: 22px 24px !important;
  box-shadow: var(--book-shadow-sm) !important;
  transition: var(--book-trans) !important;
  overflow: hidden;
}
.teacher-stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--book-shadow-md) !important;
}
.teacher-stat-card b {
  font-size: 34px !important;
  letter-spacing: -.08em !important;
}
.teacher-stat-card.green { background: linear-gradient(135deg,#d1fae5 0%,#fff 60%) !important; }
.teacher-stat-card.blue  { background: linear-gradient(135deg,#dbeafe 0%,#fff 60%) !important; }
.teacher-stat-card.gray  { background: linear-gradient(135deg,#f1f5f9 0%,#fff 60%) !important; }
.teacher-stat-card.gold  { background: linear-gradient(135deg,#fef3c7 0%,#fff 60%) !important; }

/* Teacher week calendar */
.teacher-calendar-card {
  border-radius: var(--book-radius-lg) !important;
  border: 1px solid rgba(0,0,0,.055) !important;
  box-shadow: var(--book-shadow-md) !important;
  overflow: hidden !important;
  background: #fff !important;
  padding: 24px !important;
}
.teacher-day-col {
  border-radius: 18px !important;
  background: #fafbff !important;
  border: 1px solid rgba(0,0,0,.055) !important;
}
.teacher-day-col.today {
  background: linear-gradient(180deg,#eff6ff,#fff) !important;
  border-color: rgba(0,85,212,.22) !important;
  box-shadow: 0 10px 28px rgba(0,85,212,.08) !important;
}
.teacher-cal-lesson {
  border-radius: 12px !important;
  font-size: 12px !important;
  transition: var(--book-trans) !important;
}
.teacher-cal-lesson:hover {
  filter: brightness(1.04);
  transform: scale(1.02);
}


/* ═══════════════════════════════════════════════════════
   5. BOOKING CALENDAR
   ═══════════════════════════════════════════════════════ */
.calendar {
  border-radius: var(--book-radius-lg) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.05) !important;
  overflow: hidden !important;
}
.cal-head div {
  background: #f8f9fc !important;
  font-size: 11.5px !important;
  font-weight: 900 !important;
  letter-spacing: .6px !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  padding: 14px 8px !important;
}
.cal-head div span {
  display: block;
  font-size: 14px !important;
  color: #1e293b !important;
  font-weight: 900 !important;
  letter-spacing: -.2px;
  margin-top: 2px;
}
.time-cell {
  font-size: 11px !important;
  font-weight: 900 !important;
  color: #94a3b8 !important;
  background: #f8f9fc !important;
}
.slot {
  min-height: 44px !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  transition: background .14s ease, transform .14s ease, box-shadow .14s ease !important;
}
.slot.available {
  background: #fff !important;
  color: #1e293b !important;
  cursor: pointer !important;
}
.slot.available:hover {
  background: #eff6ff !important;
  color: var(--book-accent) !important;
  transform: scale(1.06) translateY(-1px) !important;
  z-index: 2 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(0,85,212,.18) !important;
}
.slot.selected {
  background: var(--book-accent) !important;
  color: #fff !important;
  border-radius: 10px !important;
  transform: scale(1.04) !important;
  z-index: 3 !important;
  box-shadow: 0 8px 22px rgba(0,85,212,.28) !important;
}
.slot.mine {
  background: linear-gradient(135deg,#16a34a,#15803d) !important;
  color: #fff !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 18px rgba(22,163,74,.22) !important;
}
.slot.booked {
  background: #dcfce7 !important;
  color: #14532d !important;
  border-radius: 8px !important;
}
/* Week toolbar */
.week-toolbar {
  border-radius: var(--book-radius-md) !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: var(--book-shadow-sm) !important;
  padding: 12px 16px !important;
  margin-bottom: 14px !important;
}
/* Booking summary sidebar */
.summary-card,
.booking-summary-pro {
  border-radius: var(--book-radius-lg) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 20px 54px rgba(0,0,0,.07) !important;
}
.summary-total {
  background: linear-gradient(135deg, var(--book-accent), #0044b3) !important;
  border-radius: 18px !important;
}
.selected-slot-chip {
  background: #f8f9ff !important;
  border: 1px solid rgba(0,85,212,.14) !important;
  border-radius: 14px !important;
  transition: var(--book-trans) !important;
}
.selected-slot-chip:hover {
  border-color: rgba(0,85,212,.28) !important;
  background: #eff6ff !important;
}
.slot-remove {
  border-radius: 50% !important;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: #fff !important;
  transition: var(--book-trans) !important;
}
.slot-remove:hover {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #ef4444 !important;
}


/* ═══════════════════════════════════════════════════════
   6. STUDENT PROFILE PAGE
   ═══════════════════════════════════════════════════════ */
.profile-hero-card {
  background:
    radial-gradient(circle at 88% 12%, rgba(0,85,212,.18), transparent 36%),
    radial-gradient(circle at 14% 90%, rgba(22,163,74,.10), transparent 28%),
    linear-gradient(140deg,#ffffff 0%,#f0f4ff 58%,#e8f5ff 100%) !important;
  border: 1.5px solid rgba(0,85,212,.14) !important;
  box-shadow: 0 22px 58px rgba(0,85,212,.10) !important;
  border-radius: var(--book-radius-lg) !important;
  padding: 32px !important;
  animation: profileHeroIn .5s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes profileHeroIn {
  from { opacity:0; transform: translateY(16px) scale(.99); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.profile-avatar-big {
  background: linear-gradient(135deg, var(--book-accent), #0033a0) !important;
  box-shadow: 0 18px 40px rgba(0,85,212,.28) !important;
  border-radius: 26px !important;
  animation: avatarBob 3.5s ease-in-out infinite;
}
@keyframes avatarBob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.profile-name {
  background: linear-gradient(135deg, #0f172a, var(--book-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.profile-badges span {
  background: rgba(255,255,255,.82) !important;
  border: 1.5px solid rgba(0,85,212,.16) !important;
  border-radius: 999px !important;
  transition: var(--book-trans) !important;
}
.profile-badges span:hover {
  background: var(--book-accent-s) !important;
  border-color: rgba(0,85,212,.3) !important;
  transform: translateY(-1px) !important;
}
.profile-info-card,
.profile-goal-card {
  border-radius: var(--book-radius-lg) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: var(--book-shadow-md) !important;
  transition: var(--book-trans) !important;
}
.profile-detail-row {
  border: 1px solid rgba(0,0,0,.055) !important;
  border-radius: 14px !important;
  padding: 14px 16px !important;
  background: linear-gradient(180deg,#fff,#fafbff) !important;
  transition: var(--book-trans) !important;
}
.profile-detail-row:hover {
  border-color: rgba(0,85,212,.18) !important;
  background: #eff6ff !important;
}
.profile-goal-box {
  background: linear-gradient(135deg,#f0f5ff,#fff) !important;
  border: 1.5px dashed rgba(0,85,212,.22) !important;
  border-radius: 18px !important;
}
.profile-goal-form .label {
  border-radius: 18px !important;
  border: 1.5px solid rgba(0,0,0,.06) !important;
  box-shadow: var(--book-shadow-sm) !important;
  padding: 16px !important;
  background: #fff !important;
}


/* ═══════════════════════════════════════════════════════
   7. WAITING ROOM
   ═══════════════════════════════════════════════════════ */
.waiting-bg {
  background:
    radial-gradient(circle at 50% 0%, rgba(0,85,212,.12), transparent 40%),
    linear-gradient(160deg, #f0f4ff 0%, #f6f8ff 100%) !important;
}
.waiting-hero {
  background:
    radial-gradient(circle at 90% 10%,rgba(0,85,212,.09),transparent 40%),
    linear-gradient(135deg,#ffffff,#f0f5ff 60%,#ecfdf5) !important;
  border: 1.5px solid rgba(0,85,212,.12) !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 54px rgba(0,85,212,.09) !important;
  animation: waitingHeroIn .55s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes waitingHeroIn {
  from { opacity:0; transform:translateY(18px) scale(.985); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.waiting-lock-ring {
  background: var(--book-accent-s) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 30px rgba(0,85,212,.14) !important;
}
.lock-orb {
  background: linear-gradient(135deg,#eff6ff,#dbeafe) !important;
  box-shadow: 0 16px 40px rgba(0,85,212,.2) !important;
  animation: lockOrb 3s ease-in-out infinite !important;
}
@keyframes lockOrb {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  50%      { transform:translateY(-6px) rotate(2deg); }
}
.waiting-grid-v32 .card {
  border-radius: 24px !important;
  border: 1.5px solid rgba(0,0,0,.06) !important;
  box-shadow: var(--book-shadow-md) !important;
  transition: var(--book-trans) !important;
}
.countdown-card-v32 {
  background: linear-gradient(160deg,#ffffff,#f0f5ff) !important;
}
.countdown span {
  font-size: 52px !important;
  border-radius: 18px !important;
  background: #fff !important;
  border: 1.5px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.06) !important;
  transition: var(--book-trans) !important;
}
.teacher-waiting-card {
  background: linear-gradient(145deg,#ffffff,#eff6ff) !important;
  border-color: rgba(0,85,212,.14) !important;
}
.next-steps-card {
  background: linear-gradient(145deg,#ffffff,#f0fdf4) !important;
  border-color: rgba(22,163,74,.14) !important;
}
.step-list div {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.055) !important;
  border-radius: 14px !important;
  padding: 12px 14px !important;
  transition: var(--book-trans) !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.step-list div::before {
  content: "✓";
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--book-green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900;
  flex: 0 0 auto;
}
.step-list div:hover {
  background: #f0fdf4 !important;
  border-color: rgba(22,163,74,.2) !important;
  transform: translateX(3px) !important;
}
.checklist-card {
  background: linear-gradient(145deg,#fff,#fafcff) !important;
}
.checklist-card label {
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.055) !important;
  padding: 13px 14px !important;
  transition: var(--book-trans) !important;
}
.checklist-card label:hover {
  background: #f0fdf4 !important;
  border-color: rgba(22,163,74,.2) !important;
}
.checklist-card input[type="checkbox"] {
  width: 20px !important; height: 20px !important;
  accent-color: var(--book-green) !important;
}
.waiting-lesson-pill {
  border-radius: 20px !important;
  border: 1.5px solid rgba(0,85,212,.14) !important;
  background: #fff !important;
  box-shadow: var(--book-shadow-sm) !important;
}
.waiting-lesson-pill span {
  color: var(--book-accent) !important;
  font-weight: 900 !important;
}
.btn-locked {
  opacity: .82 !important;
  animation: lockedGlowBook 2s ease-in-out infinite !important;
}
@keyframes lockedGlowBook {
  0%,100% { box-shadow: 0 4px 16px rgba(0,85,212,.16); }
  50%      { box-shadow: 0 10px 30px rgba(0,85,212,.28); }
}


/* ═══════════════════════════════════════════════════════
   8. ADMIN PANEL
   ═══════════════════════════════════════════════════════ */

/* Tab strip */
.admin-tabs {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: 20px !important;
  padding: 8px !important;
  box-shadow: var(--book-shadow-sm) !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab-btn {
  border-radius: 14px !important;
  padding: 11px 16px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  font-size: 13.5px !important;
  transition: var(--book-trans) !important;
  letter-spacing: -.15px !important;
}
.admin-tab-btn:hover {
  background: var(--book-accent-s) !important;
  color: var(--book-accent) !important;
}
.admin-tab-btn.is-active {
  background: var(--book-accent) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(0,85,212,.24) !important;
}
@keyframes adminTabIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* User cards */
.admin-user-card {
  border-radius: var(--book-radius-lg) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: linear-gradient(140deg,#ffffff,#f8fbff) !important;
  box-shadow: var(--book-shadow-sm) !important;
  transition: var(--book-trans) !important;
  padding: 18px 20px !important;
}
.admin-user-card:hover {
  border-color: rgba(0,85,212,.16) !important;
  box-shadow: var(--book-shadow-md) !important;
  transform: translateY(-2px) !important;
}
.admin-user-avatar {
  background: linear-gradient(135deg, var(--book-accent), #0044b3) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(0,85,212,.2) !important;
}
.admin-user-stats span {
  border-radius: 14px !important;
  background: #f8f9fc !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  transition: var(--book-trans) !important;
}
.admin-user-stats span:hover {
  background: #eff6ff !important;
  border-color: rgba(0,85,212,.16) !important;
}

/* Admin booking cards */
.admin-booking-card {
  border-radius: var(--book-radius-md) !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: var(--book-shadow-sm) !important;
  transition: var(--book-trans) !important;
}
.admin-booking-card:hover {
  box-shadow: var(--book-shadow-md) !important;
  transform: translateY(-2px) !important;
}
.admin-booking-card.is-cancelled {
  background: linear-gradient(135deg,#fef2f2,#fff) !important;
  border-color: #fca5a5 !important;
  opacity: .85;
}

/* Admin history panel */
.admin-history-panel {
  border-radius: var(--book-radius-lg) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: linear-gradient(160deg,#ffffff,#f7f9ff) !important;
  box-shadow: var(--book-shadow-md) !important;
  padding: 26px !important;
}
.admin-history-box {
  border-radius: 20px !important;
  border: 1.5px solid rgba(0,0,0,.07) !important;
  transition: var(--book-trans) !important;
}
.admin-history-box:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--book-shadow-md) !important;
  border-color: rgba(0,85,212,.18) !important;
}
.admin-history-box.is-active {
  background: linear-gradient(135deg,#eff6ff,#f0f9ff) !important;
  border-color: rgba(0,85,212,.3) !important;
  box-shadow: 0 16px 36px rgba(0,85,212,.10) !important;
}
.admin-history-row {
  animation: historyDrop .3s ease both !important;
}
.admin-history-summary span {
  border-radius: 18px !important;
  box-shadow: var(--book-shadow-sm) !important;
}

/* Admin slot designer */
.admin-slot-designer {
  border-radius: var(--book-radius-lg) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  background: #fff !important;
  box-shadow: var(--book-shadow-md) !important;
}
.admin-day-tab {
  border-radius: 999px !important;
  transition: var(--book-trans) !important;
  font-weight: 900 !important;
}
.admin-day-tab:hover {
  transform: translateY(-1px) !important;
  background: #f0f5ff !important;
  border-color: rgba(0,85,212,.2) !important;
}
.admin-day-tab.is-active {
  background: linear-gradient(135deg, var(--book-accent), #0044b3) !important;
  border-color: var(--book-accent) !important;
  box-shadow: 0 10px 26px rgba(0,85,212,.22) !important;
}
.admin-slot-block {
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--book-accent), #0044b3) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(0,85,212,.22) !important;
  transition: var(--book-trans) !important;
}
.admin-slot-block:hover {
  box-shadow: 0 12px 30px rgba(0,85,212,.30) !important;
}
.admin-day-settings-card {
  border-radius: 20px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: #fff !important;
  box-shadow: var(--book-shadow-sm) !important;
  padding: 18px !important;
}

/* Availability manager */
.availability-manager-card {
  border-radius: var(--book-radius-lg) !important;
  box-shadow: var(--book-shadow-md) !important;
}
.calendar .slot.teacher-open {
  background: linear-gradient(145deg,#f0fdf4,#fff) !important;
  border: 1px solid rgba(22,163,74,.24) !important;
  color: #15803d !important;
}
.calendar .slot.teacher-closed {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
}


/* ═══════════════════════════════════════════════════════
   9. CLASSROOM / FILES VIEW
   ═══════════════════════════════════════════════════════ */
.classroom-main {
  background: linear-gradient(160deg,#f6f8ff 0%,#ffffff 70%) !important;
}
.classroom-top {
  background: #fff !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.04) !important;
}
.board-wrap {
  border: 1px solid rgba(0,0,0,.07) !important;
  border-radius: 22px !important;
  box-shadow: var(--book-shadow-md) !important;
  overflow: hidden !important;
}
.board-tabs {
  background: #fafbfe !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  gap: 6px !important;
  padding: 10px 12px !important;
}
.board-tabs .btn {
  font-size: 13px !important;
  padding: 9px 14px !important;
  border-radius: 12px !important;
}

/* Files */
.files-view {
  background: linear-gradient(160deg,#f6f8ff 0%,#ffffff 60%) !important;
}
.upload-zone {
  border: 2px dashed rgba(0,85,212,.22) !important;
  background: rgba(255,255,255,.9) !important;
  border-radius: 24px !important;
  box-shadow: 0 10px 36px rgba(0,85,212,.07) !important;
  transition: var(--book-trans) !important;
}
.upload-zone.drag {
  border-color: var(--book-accent) !important;
  background: #eff6ff !important;
  box-shadow: 0 20px 52px rgba(0,85,212,.16) !important;
  transform: scale(1.008) !important;
}
.upload-icon {
  background: linear-gradient(135deg, var(--book-accent), #0044b3) !important;
  box-shadow: 0 14px 30px rgba(0,85,212,.26) !important;
  border-radius: 20px !important;
}
.file-row {
  border-radius: 18px !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: var(--book-shadow-sm) !important;
  transition: var(--book-trans) !important;
}
.file-row:hover {
  border-color: rgba(0,85,212,.18) !important;
  box-shadow: 0 12px 32px rgba(0,85,212,.09) !important;
  transform: translateY(-2px) !important;
}
.file-ico {
  background: linear-gradient(135deg,#eff6ff,#e8eaff) !important;
  border-radius: 16px !important;
}
.file-booking-card {
  border-radius: var(--book-radius-md) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  background: #fff !important;
  box-shadow: var(--book-shadow-sm) !important;
  transition: var(--book-trans) !important;
}
.file-booking-card:hover {
  border-color: rgba(0,85,212,.18) !important;
  box-shadow: var(--book-shadow-md) !important;
  transform: translateY(-2px) !important;
}


/* ═══════════════════════════════════════════════════════
   10. BUTTONS — polish & micro-interactions
   ═══════════════════════════════════════════════════════ */
.btn-primary {
  background: linear-gradient(135deg, #0055d4, #0040b0) !important;
  box-shadow: 0 4px 14px rgba(0,85,212,.24) !important;
  border: none !important;
  transition: all .22s cubic-bezier(.22,.9,.32,1) !important;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #0044b3, #002f8a) !important;
  box-shadow: 0 8px 22px rgba(0,85,212,.32) !important;
  transform: translateY(-1px) scale(1.02) !important;
}
.btn-primary:active { transform: translateY(1px) scale(.98) !important; }

.btn-success {
  background: linear-gradient(135deg, #16a34a, #15803d) !important;
  box-shadow: 0 4px 14px rgba(22,163,74,.22) !important;
  border: none !important;
}
.btn-success:hover {
  background: linear-gradient(135deg,#15803d,#166534) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(22,163,74,.30) !important;
}
.btn-danger {
  background: linear-gradient(135deg,#dc2626,#b91c1c) !important;
  box-shadow: 0 4px 14px rgba(220,38,38,.18) !important;
  border: none !important;
}
.btn-danger:hover {
  background: linear-gradient(135deg,#b91c1c,#991b1b) !important;
  transform: translateY(-1px) !important;
}
.btn-ghost {
  background: rgba(0,0,0,.03) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  transition: var(--book-trans) !important;
}
.btn-ghost:hover {
  background: rgba(0,85,212,.06) !important;
  border-color: rgba(0,85,212,.18) !important;
  color: var(--book-accent) !important;
}

/* Pulse animation for "enter classroom" */
.pulse {
  animation: bsPulse 1.8s ease-in-out infinite !important;
}
@keyframes bsPulse {
  0%,100% { box-shadow: 0 4px 16px rgba(0,85,212,.2); transform: translateY(0); }
  50%      { box-shadow: 0 12px 32px rgba(0,85,212,.36); transform: translateY(-2px); }
}


/* ═══════════════════════════════════════════════════════
   11. INPUTS
   ═══════════════════════════════════════════════════════ */
.input, .select, textarea {
  border: 1.5px solid rgba(0,0,0,.09) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
.input:focus, .select:focus, textarea:focus {
  border-color: var(--book-accent) !important;
  box-shadow: 0 0 0 4px rgba(0,85,212,.12), inset 0 1px 0 rgba(255,255,255,.9) !important;
  background: #fff !important;
}

/* Section kicker */
.section-kicker {
  background: var(--book-accent-s) !important;
  color: var(--book-accent) !important;
  border: 1px solid var(--book-accent-m) !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  letter-spacing: .8px !important;
  padding: 5px 11px !important;
}

/* Summary reset / clear button */
.summary-reset {
  border-radius: 12px !important;
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  transition: var(--book-trans) !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}
.summary-reset:hover {
  background: #fee2e2 !important;
  transform: translateY(-1px) !important;
}

/* Teacher history report stats */
.teacher-report-stats {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}
.teacher-report-stats span {
  border-radius: 18px !important;
  padding: 14px 18px !important;
  font-weight: 900 !important;
  box-shadow: var(--book-shadow-sm) !important;
  transition: var(--book-trans) !important;
}
.teacher-report-stats span:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--book-shadow-md) !important;
}
.stat-green { background: linear-gradient(135deg,#d1fae5,#fff) !important; color: #047857 !important; border: 1px solid #a7f3d0 !important; }
.stat-blue  { background: linear-gradient(135deg,#dbeafe,#fff) !important; color: #1d4ed8 !important; border: 1px solid #bfdbfe !important; }
.stat-red   { background: linear-gradient(135deg,#fee2e2,#fff) !important; color: #b91c1c !important; border: 1px solid #fca5a5 !important; }
.stat-orange{ background: linear-gradient(135deg,#ffedd5,#fff) !important; color: #c2410c !important; border: 1px solid #fed7aa !important; }

/* Teacher booking list split */
.teacher-booking-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 20px !important;
  margin-top: 20px !important;
}

/* Teacher list card */
.teacher-list-card {
  border-radius: var(--book-radius-md) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  background: #fff !important;
  box-shadow: var(--book-shadow-sm) !important;
  transition: var(--book-trans) !important;
}
.teacher-list-card:hover {
  border-color: rgba(0,85,212,.16) !important;
  box-shadow: var(--book-shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Archive card */
.archive-card {
  max-width: 640px !important;
  margin: 60px auto !important;
  text-align: center !important;
  background: linear-gradient(135deg,#f8fafc,#fff) !important;
  border-radius: var(--book-radius-lg) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: var(--book-shadow-md) !important;
}

/* Goal / reschedule badges */
.goal-badge {
  border-radius: 999px !important;
  background: linear-gradient(135deg,#eff6ff,#f0fdf4) !important;
  border: 1px solid rgba(0,85,212,.16) !important;
  color: #1e40af !important;
  transition: var(--book-trans) !important;
}
.reschedule-current-box,
.reschedule-warning-box {
  border-radius: 16px !important;
}
.reschedule-warning-box {
  background: linear-gradient(135deg,#fffbeb,#fff) !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  margin: 12px 0 !important;
}

/* Admin user detail overlay */
.admin-user-detail-overlay {
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  background: rgba(15,23,42,.44) !important;
}
.admin-user-detail {
  border-radius: 28px !important;
  background: linear-gradient(160deg,#fff,#f8faff) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.18) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
}
.admin-detail-stats span {
  border-radius: 18px !important;
  box-shadow: var(--book-shadow-sm) !important;
  transition: var(--book-trans) !important;
}
.admin-detail-stats span:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--book-shadow-md) !important;
}
.admin-detail-section {
  border-radius: 20px !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: var(--book-shadow-sm) !important;
}

/* How-to guide */
.how-section .learn-accordion {
  border-radius: 22px !important;
  border: 1.5px solid rgba(0,0,0,.07) !important;
  box-shadow: var(--book-shadow-md) !important;
  transition: var(--book-trans) !important;
}
.how-section .learn-accordion:hover {
  border-color: rgba(0,85,212,.16) !important;
  box-shadow: var(--book-shadow-lg) !important;
}
.how-section .faq-grid p {
  border-radius: 18px !important;
  background: linear-gradient(135deg,#f0f5ff,#fff) !important;
  border: 1px solid rgba(0,85,212,.10) !important;
  box-shadow: var(--book-shadow-sm) !important;
  transition: var(--book-trans) !important;
}
.how-section .faq-grid p:hover {
  border-color: rgba(0,85,212,.22) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--book-shadow-md) !important;
}

/* Meet tile (classroom sidebar — keep your blue) */
.meet-tile {
  background: linear-gradient(135deg,#0055d4,#0033a0) !important;
  box-shadow: 0 10px 26px rgba(0,85,212,.24) !important;
  border-radius: 16px !important;
  transition: var(--book-trans) !important;
}
.meet-tile:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px rgba(0,85,212,.30) !important;
}

/* Lang dropdown */
.lang-dropdown .lang-current {
  border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  background: #fff !important;
  padding: 7px 11px !important;
  display: flex; align-items: center; gap: 7px;
  box-shadow: var(--book-shadow-sm) !important;
  transition: var(--book-trans) !important;
  cursor: pointer !important;
}
.lang-dropdown .lang-current:hover {
  background: #eff6ff !important;
  border-color: rgba(0,85,212,.2) !important;
}
.lang-dropdown.open .lang-menu {
  display: block;
}
.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
  padding: 6px;
  z-index: 100;
  min-width: 130px;
  animation: langMenuIn .18s ease both;
}
@keyframes langMenuIn {
  from { opacity:0; transform:translateY(-6px); }
  to   { opacity:1; transform:translateY(0); }
}
.lang-option {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  padding: 10px 12px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  font-weight: 800 !important;
  font-family: inherit !important;
  transition: var(--book-trans) !important;
}
.lang-option:hover {
  background: #eff6ff !important;
  color: var(--book-accent) !important;
}
.flag-round {
  width: 22px; height: 22px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
}
.flag-round svg { width: 100%; height: 100%; }

/* Security notice */
.security-card {
  background: linear-gradient(135deg,#fffbeb,#fff) !important;
  border: 1.5px solid rgba(234,179,8,.28) !important;
  border-radius: var(--book-radius-md) !important;
  box-shadow: 0 8px 24px rgba(234,179,8,.10) !important;
}


/* ═══════════════════════════════════════════════════════
   12. MOBILE OVERRIDES (≤850px)
   ═══════════════════════════════════════════════════════ */
@media(max-width:850px){
  .content {
    padding: 20px 14px 48px !important;
  }
  .teacher-booking-split {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .teacher-stats-grid {
    grid-template-columns: repeat(2,1fr) !important;
  }
  .admin-tabs {
    border-radius: 16px !important;
    padding: 6px !important;
  }
  .admin-tab-btn {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  .waiting-grid-v32 .card {
    border-radius: 20px !important;
  }
  .countdown span {
    font-size: 36px !important;
    min-width: 62px !important;
    border-radius: 14px !important;
  }
  .profile-hero-card {
    padding: 22px !important;
    border-radius: 22px !important;
  }
  .upload-zone {
    padding: 26px 16px !important;
    border-radius: 20px !important;
  }
  .admin-user-card {
    padding: 14px !important;
    border-radius: 20px !important;
  }
  .teacher-car-arrow {
    width: 36px !important;
    height: 36px !important;
  }
  .teacher-car-arrow.left  { left:  6px !important; }
  .teacher-car-arrow.right { right: 6px !important; }
}

@media(max-width:560px){
  .teacher-stats-grid {
    grid-template-columns: 1fr !important;
  }
  .admin-history-summary {
    grid-template-columns: repeat(2,1fr) !important;
  }
  .profile-name {
    font-size: 26px !important;
  }
}



/* =========================================================
   DEEP REDESIGN PATCH — 2026-06-17
   Scope: 1) Client dashboard panel
          2) Profile section
          3) Book page — "Zarezerwuj lekcję jednorazową" +
             teacher cards
   ========================================================= */

/* ── shared micro-token ─────────────────────────────────── */
:root{
  --r-book:0,85,212;      /* --book-accent as rgb tuple */
  --r-green:22,163,74;
}


/* ═══════════════════════════════════════════════════════
   A. CLIENT DASHBOARD
   ═══════════════════════════════════════════════════════ */

/* Outer wrapper fade */
#dash-content {
  animation: dashIn .38s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes dashIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Page header row */
.content .header .h1 {
  font-size:30px !important;
  font-weight:900 !important;
  letter-spacing:-.75px !important;
  color:#0f172a !important;
}
.content .header .btn-primary {
  white-space:nowrap;
  flex:0 0 auto;
}

/* Two-column quick grid */
.content .grid {
  display:grid !important;
  grid-template-columns:1.4fr 1fr !important;
  gap:18px !important;
  align-items:start !important;
}

/* ── Next lesson hero card ─────────────────────────────── */
.next-lesson-card {
  background:
    radial-gradient(ellipse 68% 60% at 105% -10%, rgba(var(--r-book),.13) 0%, transparent 60%),
    linear-gradient(160deg,#ffffff 0%, #f0f5ff 100%) !important;
  border:1.5px solid rgba(var(--r-book),.13) !important;
  border-radius:26px !important;
  padding:28px !important;
  min-height:200px;
  position:relative;
  overflow:hidden;
}
/* watermark ring */
.next-lesson-card::after {
  content:"";
  position:absolute;
  width:220px; height:220px;
  border-radius:50%;
  border:30px solid rgba(var(--r-book),.05);
  right:-55px; bottom:-55px;
  pointer-events:none;
}
.next-lesson-card .h2 {
  font-size:16px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.7px !important;
  color:#64748b !important;
  margin:0 0 6px !important;
}
.lesson-date-big {
  font-size:26px !important;
  font-weight:900 !important;
  letter-spacing:-.7px !important;
  color:#0f172a !important;
  line-height:1.1 !important;
  margin:0 0 4px !important;
}
.next-lesson-card .muted {
  font-size:14px !important;
  margin:0 0 18px !important;
  line-height:1.55 !important;
}
/* Countdown badge reposition */
.dash-countdown-badge {
  position:static !important;
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 0 14px !important;
  padding:10px 14px !important;
  border-radius:14px !important;
  min-width:0 !important;
  width:auto !important;
  background:linear-gradient(135deg,#d1fae5,#ecfdf5) !important;
  border:1.5px solid rgba(var(--r-green),.28) !important;
  box-shadow:0 8px 24px rgba(var(--r-green),.14) !important;
  animation:bsBadgeFloat 3s ease-in-out infinite !important;
}
.dash-countdown-badge span {
  font-size:10px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
  color:#16a34a !important;
  white-space:nowrap !important;
}
.dash-countdown-badge strong {
  font-size:18px !important;
  font-weight:950 !important;
  letter-spacing:-.4px !important;
  color:#0f172a !important;
  white-space:nowrap !important;
}
.dash-countdown-pay {
  background:linear-gradient(135deg,#fef9c3,#fffde7) !important;
  border-color:rgba(202,138,4,.28) !important;
  box-shadow:0 8px 24px rgba(202,138,4,.10) !important;
  animation:none !important;
}
.dash-countdown-pay span  { color:#854d0e !important; }
.dash-countdown-now {
  background:linear-gradient(135deg,#16a34a,#15803d) !important;
  color:#fff !important;
  border-color:transparent !important;
}
.dash-countdown-now span,
.dash-countdown-now strong { color:#fff !important; }

/* ── Quick actions card ────────────────────────────────── */
.content .grid > section.card:nth-child(2) {
  background:linear-gradient(150deg,#ffffff,#f8f9ff) !important;
  border:1px solid rgba(0,0,0,.06) !important;
  border-radius:26px !important;
  padding:26px !important;
}
.content .grid > section.card:nth-child(2) .h2 {
  font-size:18px !important;
  letter-spacing:-.35px !important;
  margin-bottom:16px !important;
}
.content .grid > section.card:nth-child(2) .row-actions {
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}
.content .grid > section.card:nth-child(2) .row-actions .btn {
  justify-content:center !important;
  padding:13px 16px !important;
  font-size:14px !important;
}

/* ── My lessons heading ────────────────────────────────── */
.content > #dash-content > .h2 {
  font-size:22px !important;
  font-weight:900 !important;
  letter-spacing:-.5px !important;
  margin:32px 0 14px !important;
  color:#0f172a !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.content > #dash-content > .h2::before {
  content:"";
  display:block;
  width:4px; height:22px;
  border-radius:4px;
  background:linear-gradient(180deg, #0055d4, #0044b3);
  flex:0 0 auto;
}

/* ── Lesson mini cards ─────────────────────────────────── */
.lesson-card {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:18px !important;
  border-radius:22px !important;
  border:1px solid rgba(0,0,0,.06) !important;
  background:#fff !important;
  box-shadow:0 4px 18px rgba(0,0,0,.04) !important;
  padding:18px 22px !important;
  transition:all .22s cubic-bezier(.22,.9,.32,1) !important;
  position:relative;
  overflow:hidden;
}
.lesson-card::before {
  content:"";
  position:absolute;
  left:0; top:12%; bottom:12%;
  width:3.5px;
  border-radius:4px;
  background:linear-gradient(180deg,#0055d4,#0044b3);
}
.lesson-card:hover {
  border-color:rgba(var(--r-book),.2) !important;
  box-shadow:0 10px 34px rgba(var(--r-book),.09) !important;
  transform:translateY(-2px) !important;
}
.lesson-card.lesson-card--past {
  opacity:.7 !important;
  filter:grayscale(.25) !important;
}
.lesson-card.lesson-card--past::before {
  background:#cbd5e1;
}
.lesson-card h3 {
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:-.3px !important;
  color:#0f172a !important;
  margin:8px 0 5px !important;
}
.lesson-card .row-actions {
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  flex:0 0 auto !important;
  min-width:160px !important;
}
.lesson-card .row-actions .btn {
  justify-content:center !important;
  padding:11px 14px !important;
  font-size:13px !important;
}

/* ── Client history card ──────────────────────────────── */
.client-history-card {
  border-radius:26px !important;
  border:1px solid rgba(0,0,0,.06) !important;
  background:linear-gradient(160deg,#fff,#f7f9ff) !important;
  box-shadow:0 8px 32px rgba(0,0,0,.05) !important;
  padding:24px !important;
  margin-top:24px !important;
}
.teacher-report-head {
  margin-bottom:16px !important;
}
.teacher-history-list {
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}
.teacher-history-row {
  display:grid !important;
  grid-template-columns:1fr 1fr auto !important;
  align-items:center !important;
  gap:14px !important;
  border-radius:16px !important;
  padding:14px 16px !important;
  border:1px solid rgba(0,0,0,.055) !important;
  background:#fff !important;
  box-shadow:0 2px 8px rgba(0,0,0,.03) !important;
  transition:all .2s ease !important;
}
.teacher-history-row:hover {
  transform:translateX(4px) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.07) !important;
}
.teacher-history-row .teacher-history-date b,
.teacher-history-row .teacher-history-student b {
  display:block;
  font-weight:900;
  color:#0f172a;
  font-size:14px;
}
.teacher-history-row .teacher-history-date span,
.teacher-history-row .teacher-history-student span {
  display:block;
  font-size:12px;
  color:#64748b;
  font-weight:700;
  margin-top:2px;
}
.teacher-history-status {
  border-radius:999px !important;
  padding:6px 11px !important;
  font-size:11px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.5px !important;
  background:#f1f5f9 !important;
  color:#475569 !important;
}
.teacher-history-row.done .teacher-history-status  { background:#dcfce7 !important; color:#166534 !important; }
.teacher-history-row.cancelled .teacher-history-status { background:#ffe4e6 !important; color:#be123c !important; }
.teacher-history-row.noshow .teacher-history-status { background:#ffedd5 !important; color:#c2410c !important; }


/* ═══════════════════════════════════════════════════════
   B. PROFILE PAGE — complete rework
   ═══════════════════════════════════════════════════════ */

/* Page wrapper */
.profile-page {
  max-width:1060px !important;
  margin:0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:22px !important;
  animation:dashIn .4s cubic-bezier(.22,.9,.32,1) both !important;
}

/* ── Hero banner ──────────────────────────────────────── */
.profile-hero-card {
  position:relative !important;
  overflow:hidden !important;
  border-radius:28px !important;
  padding:32px 34px !important;
  background:
    radial-gradient(ellipse 55% 70% at 100% 0%, rgba(var(--r-book),.18) 0%, transparent 52%),
    radial-gradient(ellipse 35% 50% at 0% 100%, rgba(var(--r-green),.09) 0%, transparent 48%),
    linear-gradient(150deg,#ffffff 0%, #f0f5ff 55%, #eaf6ff 100%) !important;
  border:1.5px solid rgba(var(--r-book),.14) !important;
  box-shadow:0 24px 62px rgba(var(--r-book),.09), 0 4px 18px rgba(0,0,0,.05) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  min-height:160px !important;
}
/* Decorative rings */
.profile-glow {
  position:absolute !important;
  width:320px !important; height:320px !important;
  border-radius:50% !important;
  right:-90px !important; top:-130px !important;
  background:radial-gradient(circle, rgba(var(--r-book),.12) 0%, transparent 70%) !important;
  filter:blur(0) !important;
  pointer-events:none !important;
  animation:profileGlowPulse 5s ease-in-out infinite !important;
}
@keyframes profileGlowPulse {
  0%,100% { opacity:.7; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.07); }
}

/* Avatar */
.profile-hero-main {
  position:relative !important;
  z-index:2 !important;
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
}
.profile-avatar-big {
  width:88px !important;
  height:88px !important;
  flex:0 0 88px !important;
  border-radius:26px !important;
  background:linear-gradient(135deg, #0055d4, #003ea8) !important;
  color:#fff !important;
  display:grid !important;
  place-items:center !important;
  font-size:30px !important;
  font-weight:900 !important;
  letter-spacing:-1px !important;
  box-shadow:0 18px 42px rgba(var(--r-book),.30) !important;
  border:3px solid rgba(255,255,255,.5) !important;
  animation:avatarBob 3.5s ease-in-out infinite !important;
}

/* Name & kicker */
.summary-kicker.profile-kicker,
.profile-hero-card .summary-kicker {
  font-size:10px !important;
  letter-spacing:1px !important;
  margin-bottom:4px !important;
  display:inline-block !important;
}
.profile-name {
  margin:2px 0 5px !important;
  font-size:34px !important;
  line-height:1.05 !important;
  letter-spacing:-1.1px !important;
  font-weight:900 !important;
  color:#0f172a !important;
  /* gradient text */
  background:linear-gradient(135deg,#0f172a 0%,#0055d4 100%) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  background-clip:text !important;
}
.profile-lead {
  margin:0 !important;
  font-size:13.5px !important;
  color:#64748b !important;
  font-weight:700 !important;
  max-width:460px !important;
}
.profile-badges {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
  margin-top:14px !important;
}
.profile-badges span {
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  border:1.5px solid rgba(var(--r-book),.16) !important;
  background:rgba(255,255,255,.82) !important;
  color:#1e3a5f !important;
  border-radius:999px !important;
  padding:7px 13px !important;
  font-size:12px !important;
  font-weight:900 !important;
  box-shadow:0 3px 12px rgba(var(--r-book),.06) !important;
  transition:all .2s ease !important;
}
.profile-badges span:hover {
  background:rgba(var(--r-book),.07) !important;
  border-color:rgba(var(--r-book),.28) !important;
  transform:translateY(-1px) !important;
}

/* CTA button in hero */
.profile-main-cta {
  position:relative !important;
  z-index:2 !important;
  flex:0 0 auto !important;
  padding:14px 22px !important;
  font-size:14px !important;
  border-radius:16px !important;
  white-space:nowrap !important;
}

/* ── Two-column body ──────────────────────────────────── */
.profile-grid-modern {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) !important;
  gap:20px !important;
  align-items:start !important;
}

/* Shared card base */
.profile-info-card,
.profile-goal-card {
  background:#fff !important;
  border:1.5px solid rgba(0,0,0,.06) !important;
  border-radius:26px !important;
  padding:26px !important;
  box-shadow:0 8px 30px rgba(0,0,0,.05) !important;
  transition:all .25s cubic-bezier(.22,.9,.32,1) !important;
}
.profile-info-card:hover,
.profile-goal-card:hover {
  box-shadow:0 16px 44px rgba(var(--r-book),.08) !important;
  border-color:rgba(var(--r-book),.14) !important;
  transform:translateY(-2px) !important;
}

/* Card head row */
.profile-card-head {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding-bottom:20px !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
  margin-bottom:18px !important;
}
.profile-card-head h2 {
  margin:5px 0 0 !important;
  font-size:20px !important;
  font-weight:900 !important;
  letter-spacing:-.5px !important;
  color:#0f172a !important;
}
.profile-mini-icon {
  width:44px !important; height:44px !important;
  border-radius:15px !important;
  display:grid !important;
  place-items:center !important;
  font-size:20px !important;
  background:rgba(var(--r-book),.07) !important;
  border:1.5px solid rgba(var(--r-book),.12) !important;
  flex:0 0 44px !important;
}

/* Detail rows */
.profile-detail-list {
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
}
.profile-detail-row {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:13px 16px !important;
  border:1.5px solid rgba(0,0,0,.055) !important;
  border-radius:15px !important;
  background:linear-gradient(180deg,#fafbff,#f8f9fe) !important;
  transition:all .18s ease !important;
}
.profile-detail-row:hover {
  border-color:rgba(var(--r-book),.2) !important;
  background:#eff6ff !important;
}
.profile-detail-row span {
  font-size:11px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.7px !important;
  color:#94a3b8 !important;
  flex:0 0 auto !important;
}
.profile-detail-row strong {
  font-size:14px !important;
  font-weight:900 !important;
  color:#0f172a !important;
  text-align:right !important;
  overflow-wrap:anywhere !important;
}

/* Goal card — lesson launcher */
.profile-lesson-launcher .profile-goal-card {
  background:
    radial-gradient(ellipse 80% 50% at 100% 0%, rgba(var(--r-book),.06) 0%, transparent 60%),
    linear-gradient(160deg,#ffffff,#f8fbff) !important;
}
.profile-goal-intro {
  margin:6px 0 0 !important;
  font-size:13.5px !important;
  line-height:1.6 !important;
  color:#64748b !important;
  font-weight:650 !important;
}
.profile-goal-form {
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  margin-top:18px !important;
}
.profile-goal-form .label {
  background:#fff !important;
  border:1.5px solid rgba(0,0,0,.07) !important;
  border-radius:18px !important;
  padding:15px 16px !important;
  box-shadow:0 4px 16px rgba(0,0,0,.04) !important;
  font-weight:800 !important;
  font-size:12.5px !important;
  color:#374151 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
  transition:border-color .18s ease !important;
}
.profile-goal-form .label:focus-within {
  border-color:rgba(var(--r-book),.3) !important;
  box-shadow:0 6px 22px rgba(var(--r-book),.08) !important;
}
.profile-goal-form .select,
.profile-goal-form textarea {
  border:1.5px solid rgba(0,0,0,.07) !important;
  border-radius:12px !important;
  background:#fafbff !important;
  font-size:14px !important;
}
.profile-goal-form textarea {
  min-height:120px !important;
  resize:vertical !important;
  line-height:1.6 !important;
}
.profile-actions {
  display:flex !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin-top:18px !important;
}
.profile-actions .btn-primary {
  flex:1 1 auto !important;
  justify-content:center !important;
  padding:14px 20px !important;
  font-size:14.5px !important;
  border-radius:15px !important;
}
.profile-actions .btn-ghost {
  padding:14px 18px !important;
  border-radius:15px !important;
  font-size:14px !important;
}


/* ═══════════════════════════════════════════════════════
   C. BOOKING PAGE — "Zarezerwuj lekcję jednorazową"
      header + teacher carousel + summary
   ═══════════════════════════════════════════════════════ */

/* Booking content area */
.booking-content {
  padding:34px 42px !important;
}

/* Page header */
.booking-header {
  padding-bottom:24px !important;
  border-bottom:1.5px solid rgba(0,0,0,.06) !important;
  margin-bottom:22px !important;
}
.booking-header .section-kicker {
  margin-bottom:6px !important;
}
.booking-header .h1 {
  font-size:28px !important;
  font-weight:900 !important;
  letter-spacing:-.75px !important;
  color:#0f172a !important;
}
.booking-header .muted {
  font-size:14px !important;
  max-width:600px !important;
}

/* ── Teacher carousel wrapper ─────────────────────────── */
.teacher-carousel-wrap {
  position:relative !important;
  margin:0 0 24px !important;
}
/* Soft fade on edges */
.teacher-carousel-wrap::before,
.teacher-carousel-wrap::after {
  content:"" !important;
  position:absolute !important;
  top:0 !important; bottom:0 !important;
  width:72px !important;
  z-index:5 !important;
  pointer-events:none !important;
}
.teacher-carousel-wrap::before { left:0  !important; background:linear-gradient(90deg, #f6f8ff 0%, transparent 100%) !important; }
.teacher-carousel-wrap::after  { right:0 !important; background:linear-gradient(-90deg,#f6f8ff 0%, transparent 100%) !important; }

/* Scroll container */
.teacher-carousel {
  display:flex !important;
  overflow-x:auto !important;
  scroll-snap-type:x mandatory !important;
  gap:18px !important;
  padding:12px 72px 24px !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
}
.teacher-carousel::-webkit-scrollbar { display:none; }

/* Arrow buttons */
.teacher-car-arrow {
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:8 !important;
  width:44px !important; height:44px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(0,0,0,.10) !important;
  background:#fff !important;
  font-size:22px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:0 10px 28px rgba(0,0,0,.13) !important;
  transition:all .22s cubic-bezier(.22,.9,.32,1) !important;
  color:#0f172a !important;
}
.teacher-car-arrow.left  { left:14px  !important; }
.teacher-car-arrow.right { right:14px !important; }
.teacher-car-arrow:hover {
  background:linear-gradient(135deg,#0055d4,#0044b3) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 14px 32px rgba(var(--r-book),.26) !important;
  transform:translateY(-50%) scale(1.08) !important;
}

/* ── Teacher profile card (premium) — full rework ─────── */
.teacher-carousel .teacher-profile-card.premium-teacher-card,
.teacher-profile-card.premium-teacher-card {
  /* layout */
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  min-width:360px !important;
  max-width:420px !important;
  min-height:auto !important;
  scroll-snap-align:start !important;
  /* spacing */
  padding:26px 26px 22px !important;
  border-radius:28px !important;
  /* surface */
  background:#fff !important;
  border:1.5px solid rgba(0,0,0,.07) !important;
  box-shadow:0 12px 40px rgba(0,0,0,.07) !important;
  cursor:pointer !important;
  transition:transform .22s cubic-bezier(.22,.9,.32,1),
             box-shadow .22s cubic-bezier(.22,.9,.32,1),
             border-color .22s ease !important;
  overflow:visible !important;
}
.teacher-carousel .teacher-profile-card.premium-teacher-card:before,
.teacher-profile-card.premium-teacher-card:before { display:none !important; }

/* Hover */
.teacher-profile-card.premium-teacher-card:hover {
  transform:translateY(-6px) !important;
  border-color:rgba(var(--r-book),.2) !important;
  box-shadow:0 22px 58px rgba(var(--r-book),.11), 0 8px 22px rgba(0,0,0,.06) !important;
}

/* Selected */
.teacher-profile-card.premium-teacher-card.selected {
  border-color:#16a34a !important;
  background:linear-gradient(170deg,#fff 0%,#f0fdf4 100%) !important;
  box-shadow:0 24px 62px rgba(var(--r-green),.15), 0 0 0 4px rgba(var(--r-green),.10) !important;
  transform:translateY(-8px) scale(1.015) !important;
}
.teacher-profile-card.premium-teacher-card.selected::after {
  content:"✓" !important;
  position:absolute !important;
  top:16px !important; right:16px !important;
  width:32px !important; height:32px !important;
  border-radius:50% !important;
  background:#16a34a !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:16px !important;
  font-weight:900 !important;
  box-shadow:0 10px 24px rgba(var(--r-green),.28) !important;
  z-index:6 !important;
}

/* Avatar — top right, big round square */
.premium-teacher-avatar {
  position:absolute !important;
  top:22px !important;
  right:22px !important;
  width:72px !important;
  height:72px !important;
  border-radius:22px !important;
  display:grid !important;
  place-items:center !important;
  /* geometric human silhouette using pure CSS */
  background:linear-gradient(145deg,#dde8ff 0%,#c7deff 50%,#d9eeff 100%) !important;
  border:3px solid #fff !important;
  box-shadow:0 12px 28px rgba(var(--r-book),.18) !important;
  z-index:3 !important;
  flex:none !important;
  overflow:hidden !important;
}
/* Head */
.premium-teacher-avatar::before {
  content:"" !important;
  position:absolute !important;
  width:26px; height:26px;
  border-radius:50%;
  background:#a8c4f0;
  top:10px; left:50%;
  transform:translateX(-50%);
}
/* Shoulders */
.premium-teacher-avatar::after {
  content:"" !important;
  position:absolute !important;
  width:52px; height:30px;
  border-radius:30px 30px 0 0;
  background:#a8c4f0;
  bottom:0; left:50%;
  transform:translateX(-50%);
}
/* Initials chip */
.premium-teacher-avatar span {
  position:absolute !important;
  bottom:6px !important; right:6px !important;
  min-width:24px !important; height:24px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  background:#0f172a !important;
  color:#fff !important;
  font-size:10px !important;
  font-weight:900 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 6px 14px rgba(0,0,0,.20) !important;
  z-index:4 !important;
  letter-spacing:-.3px !important;
}

/* Main text block */
.premium-teacher-main {
  position:relative !important;
  z-index:2 !important;
  padding-right:90px !important;
  min-width:0 !important;
  flex:1 !important;
}

/* Top row: kicker + rating */
.premium-teacher-top {
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-bottom:10px !important;
  padding-right:0 !important;
}
.premium-teacher-card .section-kicker {
  background:rgba(var(--r-book),.08) !important;
  color:#0055d4 !important;
  border:1px solid rgba(var(--r-book),.16) !important;
  font-size:9.5px !important;
  letter-spacing:.7px !important;
  padding:5px 9px !important;
}
.premium-teacher-card .teacher-rating {
  background:#fefce8 !important;
  border:1px solid #fde047 !important;
  color:#854d0e !important;
  font-size:12px !important;
  font-weight:900 !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
}

/* Name */
.premium-teacher-card h2 {
  margin:0 0 8px !important;
  font-size:24px !important;
  line-height:1.06 !important;
  letter-spacing:-.75px !important;
  font-weight:900 !important;
  color:#0f172a !important;
}

/* Bio */
.premium-teacher-card p {
  margin:0 0 14px !important;
  font-size:13.5px !important;
  line-height:1.58 !important;
  color:#64748b !important;
  font-weight:650 !important;
}

/* Pills strip */
.premium-teacher-pills {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin:0 0 14px !important;
}
.premium-teacher-pills span {
  display:inline-flex !important;
  align-items:center !important;
  min-height:28px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  background:#f8f9fc !important;
  border:1px solid rgba(0,0,0,.08) !important;
  color:#374151 !important;
  font-size:11px !important;
  font-weight:900 !important;
  transition:all .18s ease !important;
}
.premium-teacher-card:hover .premium-teacher-pills span {
  background:#eff6ff !important;
  border-color:rgba(var(--r-book),.18) !important;
  color:#0055d4 !important;
}
.premium-teacher-card.selected .premium-teacher-pills span {
  background:#f0fdf4 !important;
  border-color:rgba(var(--r-green),.22) !important;
  color:#166534 !important;
}

/* Trust line */
.premium-teacher-trust {
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:9px 12px !important;
  border-radius:14px !important;
  background:#f0fdf4 !important;
  color:#15803d !important;
  border:1px solid rgba(var(--r-green),.18) !important;
  font-size:12px !important;
  font-weight:900 !important;
  margin-top:0 !important;
}
.premium-teacher-card.selected .premium-teacher-trust {
  background:#dcfce7 !important;
  border-color:rgba(var(--r-green),.3) !important;
}

/* ── Calendar + summary shell ─────────────────────────── */
.booking-shell {
  display:grid !important;
  grid-template-columns:1fr 310px !important;
  gap:20px !important;
  align-items:start !important;
}
.booking-shell-pro {
  grid-template-columns:1fr 320px !important;
}

/* ── Booking summary card ─────────────────────────────── */
.booking-summary-pro {
  position:sticky !important;
  top:24px !important;
  border-radius:24px !important;
  overflow:hidden !important;
  background:#fff !important;
  border:1.5px solid rgba(0,0,0,.07) !important;
  box-shadow:0 16px 48px rgba(0,0,0,.07) !important;
}
.summary-top {
  padding:20px 22px 16px !important;
  border-bottom:1px solid rgba(0,0,0,.06) !important;
  background:#fff !important;
}
.summary-kicker {
  display:inline-block !important;
  margin-bottom:4px !important;
}
.summary-top h2 {
  margin:4px 0 0 !important;
  font-size:20px !important;
  letter-spacing:-.5px !important;
  font-weight:900 !important;
}
.empty-summary {
  padding:28px 22px !important;
  color:#94a3b8 !important;
  font-weight:700 !important;
  font-size:14px !important;
  text-align:center !important;
  line-height:1.55 !important;
}

/* Selected slot chips */
.selected-slots-list {
  padding:14px 14px 0 !important;
}
.selected-slot-chip {
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  background:#f8f9ff !important;
  border:1.5px solid rgba(var(--r-book),.12) !important;
  border-radius:14px !important;
  padding:11px 14px !important;
  margin-bottom:8px !important;
  transition:all .18s ease !important;
}
.selected-slot-chip:hover {
  border-color:rgba(var(--r-book),.28) !important;
  background:#eff6ff !important;
}
.selected-slot-chip b  { display:block; font-size:13.5px; font-weight:900; color:#0f172a; }
.selected-slot-chip span { display:block; font-size:12px; color:#64748b; font-weight:700; margin-top:2px; }
.slot-remove {
  width:26px !important; height:26px !important;
  border-radius:50% !important;
  border:1px solid rgba(0,0,0,.10) !important;
  background:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:16px !important;
  cursor:pointer !important;
  transition:all .16s ease !important;
  flex:0 0 26px !important;
  color:#64748b !important;
  font-weight:700 !important;
}
.slot-remove:hover {
  background:#fef2f2 !important;
  border-color:#fca5a5 !important;
  color:#ef4444 !important;
}

.summary-reset {
  display:block !important;
  width:calc(100% - 28px) !important;
  margin:4px 14px 0 !important;
  text-align:center !important;
  border-radius:12px !important;
  background:#fef2f2 !important;
  color:#dc2626 !important;
  border:1px solid #fecaca !important;
  padding:9px 12px !important;
  font-size:12px !important;
  font-weight:900 !important;
  cursor:pointer !important;
  transition:all .16s ease !important;
  font-family:inherit !important;
}
.summary-reset:hover {
  background:#fee2e2 !important;
  transform:none !important;
}

.calc-row {
  display:flex !important;
  justify-content:space-between !important;
  padding:12px 18px !important;
  border-top:1px solid rgba(0,0,0,.06) !important;
  font-size:13.5px !important;
  font-weight:800 !important;
  color:#374151 !important;
}
.summary-total {
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  margin:0 14px 14px !important;
  padding:16px !important;
  border-radius:16px !important;
  background:linear-gradient(135deg,#0055d4,#003ea8) !important;
  color:#fff !important;
}
.summary-total span  { font-weight:800 !important; opacity:.88 !important; font-size:14px !important; }
.summary-total strong{ font-size:26px !important; font-weight:950 !important; letter-spacing:-.6px !important; }

.summary-note {
  margin:0 14px 12px !important;
}
.summary-note .label {
  font-size:12.5px !important;
  font-weight:800 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:7px !important;
}
.summary-pay {
  display:block !important;
  width:calc(100% - 28px) !important;
  margin:0 14px 12px !important;
  border-radius:14px !important;
  padding:14px !important;
  font-size:14.5px !important;
  font-weight:900 !important;
  text-align:center !important;
}
.policy-box {
  margin:4px 14px 14px !important;
  padding:13px 15px !important;
  border-radius:14px !important;
  background:#f8fafc !important;
  border:1px solid rgba(0,0,0,.07) !important;
  font-size:12px !important;
}


/* ═══════════════════════════════════════════════════════
   D. MOBILE — booking + profile + dashboard
   ═══════════════════════════════════════════════════════ */
@media(max-width:850px){

  /* Dashboard grid stacks */
  .content .grid {
    grid-template-columns:1fr !important;
  }
  .content .grid > section.card:nth-child(2) .row-actions {
    flex-direction:row !important;
    flex-wrap:wrap !important;
  }
  .lesson-card {
    flex-direction:column !important;
    gap:14px !important;
    padding:16px !important;
  }
  .lesson-card .row-actions {
    flex-direction:row !important;
    flex-wrap:wrap !important;
    min-width:0 !important;
    width:100% !important;
  }
  .lesson-card .row-actions .btn {
    flex:1 1 auto !important;
  }
  .dash-countdown-badge {
    width:100% !important;
    justify-content:flex-start !important;
  }
  .teacher-history-row {
    grid-template-columns:1fr auto !important;
  }
  .teacher-history-row .teacher-history-student {
    display:none !important;
  }

  /* Profile */
  .profile-hero-card {
    flex-direction:column !important;
    align-items:flex-start !important;
    padding:22px !important;
    min-height:auto !important;
  }
  .profile-main-cta {
    width:100% !important;
    text-align:center !important;
    justify-content:center !important;
  }
  .profile-name {
    font-size:28px !important;
    -webkit-text-fill-color:unset !important;
    color:#0f172a !important;
  }
  .profile-grid-modern {
    grid-template-columns:1fr !important;
  }
  .profile-avatar-big {
    width:72px !important; height:72px !important;
    flex-basis:72px !important;
    font-size:24px !important;
  }
  .profile-hero-main {
    gap:16px !important;
  }

  /* Booking page */
  .booking-content {
    padding:18px 14px 44px !important;
  }
  .teacher-carousel {
    gap:13px !important;
    padding:8px 14px 18px !important;
  }
  .teacher-carousel-wrap::before,
  .teacher-carousel-wrap::after {
    width:24px !important;
  }
  .teacher-car-arrow {
    width:36px !important; height:36px !important;
    font-size:18px !important;
  }
  .teacher-car-arrow.left  { left:4px  !important; }
  .teacher-car-arrow.right { right:4px !important; }
  .teacher-carousel .teacher-profile-card.premium-teacher-card,
  .teacher-profile-card.premium-teacher-card {
    min-width:min(82vw,320px) !important;
    max-width:min(82vw,320px) !important;
    padding:20px 18px 18px !important;
    border-radius:24px !important;
  }
  .premium-teacher-main { padding-right:76px !important; }
  .premium-teacher-avatar {
    width:60px !important; height:60px !important;
    top:18px !important; right:18px !important;
    border-radius:18px !important;
  }
  .premium-teacher-card h2 { font-size:20px !important; }
  .premium-teacher-card p  { font-size:13px !important; }

  .booking-shell,
  .booking-shell-pro {
    grid-template-columns:1fr !important;
  }
  .booking-summary-pro {
    position:relative !important;
    top:auto !important;
  }
}

@media(max-width:440px){
  .profile-hero-main {
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:14px !important;
  }
  .premium-teacher-main { padding-right:0 !important; padding-top:72px !important; }
  .premium-teacher-avatar { left:18px !important; right:auto !important; top:16px !important; }
}



/* =========================================================
   MOBILE HAMBURGER + COLLAPSIBLE HEADER + CALENDAR FIXES
   2026-06-17 final patch
   ========================================================= */

/* ═══════════════════════════════════════════════════════
   DESKTOP — Today column highlight in booking calendar
   ═══════════════════════════════════════════════════════ */

/* Cal-head today column */
.cal-head .today-col {
  background: linear-gradient(160deg, #d1fae5 0%, #ecfdf5 100%) !important;
  color: #15803d !important;
  font-weight: 900 !important;
  border-bottom: 2px solid rgba(22,163,74,.35) !important;
  position: relative;
}
.cal-head .today-col::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #16a34a, #22c55e);
  border-radius: 2px;
}
.cal-head .today-col span {
  color: #15803d !important;
  font-weight: 900 !important;
}

/* Slot column highlight for today — zebra the whole column green */
/* We use JS-generated today-col index; CSS nth trick via attribute */
.calendar .cal-row .slot[data-today="1"] {
  background: rgba(22,163,74,.04) !important;
}
.calendar .cal-row .slot[data-today="1"].available {
  background: rgba(22,163,74,.07) !important;
}
.calendar .cal-row .slot[data-today="1"].available:hover {
  background: rgba(22,163,74,.15) !important;
}

/* Today-col header pulse dot */
.cal-head .today-col b,
.cal-head .today-col > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.today-col-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.2);
  animation: todayPulse 1.6s ease-in-out infinite;
}
@keyframes todayPulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: .7; }
}


/* ═══════════════════════════════════════════════════════
   DESKTOP — sidebar stays exactly as-was (no changes)
   ═══════════════════════════════════════════════════════ */

/* .mob-topbar hidden on desktop */
.mob-topbar    { display: none !important; }
.mob-hamburger { display: none !important; }
.mob-menu-close{ display: none !important; }
#sb-overlay    { display: none !important; }

/* sidebar-header is just a passthrough wrapper on desktop */
.sidebar-header {
  display: contents; /* renders children as if wrapper doesn't exist */
}


/* ═══════════════════════════════════════════════════════
   MOBILE — full hamburger drawer system
   ═══════════════════════════════════════════════════════ */
@media (max-width: 850px) {

  /* ── Reset layout to simple block flow ────────────── */
  .layout,
  .classroom-layout {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }

  /* ── Desktop sidebar: hidden off-screen ──────────── */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;       /* off-screen by default */
    width: min(300px, 85vw) !important;
    height: 100dvh !important;
    z-index: 120 !important;
    background: #fff !important;
    border-right: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,.14) !important;
    overflow-y: auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    transition: left .28s cubic-bezier(.22,.9,.32,1) !important;
  }

  /* Open state */
  .sidebar.mob-open {
    left: 0 !important;
  }

  /* sidebar-header: normal stacking inside drawer */
  .sidebar-header {
    display: block !important;
    border-bottom: 1px solid rgba(0,0,0,.07) !important;
    padding-bottom: 4px !important;
  }

  /* Logo row inside drawer */
  .sidebar-top,
  .sidebar .sidebar-top {
    padding: 18px 16px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .sidebar .logo {
    height: 28px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
  }

  /* Close button inside drawer */
  .mob-menu-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background: #f8f9fc !important;
    font-size: 16px !important;
    cursor: pointer !important;
    color: #374151 !important;
    z-index: 2 !important;
    transition: background .16s ease !important;
  }
  .mob-menu-close:hover {
    background: #fee2e2 !important;
    color: #dc2626 !important;
  }

  /* User box inside drawer */
  .user-box {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 16px 14px !important;
    margin: 0 !important;
    border: 0 !important;
  }
  .avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
    flex: 0 0 40px !important;
  }
  .user-name {
    font-size: 14px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 180px !important;
  }
  .user-role {
    font-size: 11px !important;
  }

  /* Nav buttons inside drawer — vertical list */
  .nav {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    white-space: normal !important;
    border-top: 1px solid rgba(0,0,0,.06) !important;
    flex: 1 !important;
  }
  .nav button {
    flex: 0 0 auto !important;
    width: 100% !important;
    text-align: left !important;
    padding: 15px 20px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    border-bottom: 1px solid rgba(0,0,0,.05) !important;
    border-right: 0 !important;
    color: #374151 !important;
    position: relative !important;
  }
  .nav button.active {
    background: rgba(0,85,212,.07) !important;
    color: #0055d4 !important;
    padding-left: 24px !important;
  }
  .nav button.active::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important; top: 16% !important; bottom: 16% !important;
    width: 4px !important; height: auto !important;
    border-radius: 0 4px 4px 0 !important;
    background: #0055d4 !important;
  }
  .nav button.active::after { display: none !important; }

  /* Meet tile in drawer */
  .meet-tile {
    margin: 10px 12px 6px !important;
    border-radius: 14px !important;
  }

  /* Sidebar bottom stays at bottom of drawer */
  .sidebar-bottom {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 16px !important;
    border-top: 1px solid rgba(0,0,0,.07) !important;
    margin-top: auto !important;
  }
  .sidebar-bottom .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── Thin fixed topbar ───────────────────────────── */
  .mob-topbar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 52px !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
    padding: 0 14px !important;
    z-index: 100 !important;
  }

  /* Hamburger button */
  .mob-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 36px !important;
    height: 36px !important;
    padding: 9px 7px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 10px !important;
    background: #f8f9fc !important;
    cursor: pointer !important;
    flex: 0 0 36px !important;
    transition: background .16s ease, border-color .16s ease !important;
  }
  .mob-hamburger:hover {
    background: rgba(0,85,212,.08) !important;
    border-color: rgba(0,85,212,.22) !important;
  }
  .mob-hamburger span {
    display: block !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: #374151 !important;
    width: 100% !important;
    transition: transform .22s ease, opacity .22s ease !important;
  }

  /* Logo in topbar */
  .mob-topbar-logo {
    height: 26px !important;
    width: auto !important;
    max-width: 100px !important;
    object-fit: contain !important;
    object-position: left center !important;
    flex: 0 0 auto !important;
  }

  /* User name in topbar — truncated small */
  .mob-topbar-user {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .mob-topbar-user span {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #374151 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 140px !important;
    line-height: 1.2 !important;
  }
  .mob-topbar-user small {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: .4px !important;
  }

  /* ── Content area pushed below topbar ────────────── */
  .content,
  .booking-content {
    padding-top: 66px !important;
    padding-bottom: 48px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    height: auto !important;
    min-height: calc(100dvh - 52px) !important;
    overflow: visible !important;
  }

  /* ── Overlay behind drawer ───────────────────────── */
  #sb-overlay {
    display: none; /* toggled by JS */
  }


  /* ═══════════════════════════════════════════════════
     MOBILE CALENDAR — properly scrollable grid
     ═════════════════════════════════════════════════== */

  /* Outer shell: single column, calendar on top */
  .calendar-shell,
  .booking-shell,
  .booking-shell-pro {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  /* Calendar container — horizontally scrollable */
  .calendar,
  .booking-calendar {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 18px !important;
    /* force GPU layer for smooth scroll */
    transform: translateZ(0) !important;
  }

  /* Grid rows — fixed column widths so slots are tap-able */
  .cal-head,
  .cal-row,
  .booking-calendar .cal-head,
  .booking-calendar .cal-row {
    display: grid !important;
    grid-template-columns: 52px repeat(7, 88px) !important;
    min-width: 676px !important;  /* 52 + 7×88 = 668, add 8 buffer */
  }

  /* Header cells */
  .cal-head div {
    padding: 10px 4px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }
  .cal-head .today-col {
    background: linear-gradient(160deg, #d1fae5, #ecfdf5) !important;
  }

  /* Time column */
  .time-cell {
    padding: 8px 4px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  /* Slot cells */
  .slot,
  .booking-calendar .slot {
    min-height: 44px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px !important;
  }
  .slot span {
    display: block !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  /* Week toolbar on mobile */
  .week-toolbar,
  .booking-week-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 16px !important;
    flex-wrap: nowrap !important;
  }
  .week-toolbar .btn,
  .booking-week-toolbar .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 9px 11px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .week-toolbar > div,
  .booking-week-toolbar > div {
    flex: 1 !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    min-width: 0 !important;
  }
  .week-toolbar .mini,
  .booking-week-toolbar .mini {
    font-size: 10px !important;
    display: block !important;
  }

  /* Summary card — full width below calendar */
  .booking-summary-pro,
  .summary-card,
  .summary {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
  }

  /* Teacher carousel on mobile */
  .teacher-carousel {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 6px 14px 16px !important;
    margin: 0 -14px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .teacher-carousel::-webkit-scrollbar { display: none; }
  .teacher-carousel .teacher-profile-card.premium-teacher-card,
  .teacher-profile-card.premium-teacher-card {
    min-width: min(82vw, 300px) !important;
    max-width: min(82vw, 300px) !important;
    scroll-snap-align: center !important;
    padding: 18px 16px !important;
    border-radius: 22px !important;
    min-height: auto !important;
  }
  .premium-teacher-main  { padding-right: 70px !important; }
  .premium-teacher-avatar {
    width: 58px !important; height: 58px !important;
    top: 16px !important; right: 14px !important;
    border-radius: 18px !important;
  }
  .premium-teacher-card h2 { font-size: 20px !important; }
  .premium-teacher-card p  { font-size: 13px !important; }
  .teacher-car-arrow { display: none !important; } /* swipe handles nav on mobile */

  /* Misc mobile overrides */
  .h1 { font-size: 24px !important; letter-spacing: -.6px !important; }
  .h2 { font-size: 19px !important; }
  .card { padding: 16px !important; border-radius: 18px !important; }
  .btn { min-height: 44px !important; }
  .input, .select, textarea { font-size: 16px !important; } /* prevents iOS zoom */
  .row-actions { gap: 8px !important; }

  /* Classroom mobile */
  .classroom-main {
    height: auto !important;
    min-height: calc(100dvh - 52px) !important;
    overflow: visible !important;
    margin-top: 52px !important;
  }
  .classroom-top {
    height: auto !important;
    min-height: 56px !important;
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .board-wrap {
    margin: 10px !important;
    min-height: 65dvh !important;
  }
  .board-frame { height: 65dvh !important; }

  /* Files view */
  .files-view { padding: 24px 14px 56px !important; }
  .files-head { flex-direction: column !important; gap: 10px !important; }
  .upload-zone { padding: 22px 14px !important; }

  /* Profile */
  .profile-hero-card {
    flex-direction: column !important;
    padding: 20px !important;
    min-height: auto !important;
  }
  .profile-main-cta { width: 100% !important; }
  .profile-grid-modern { grid-template-columns: 1fr !important; }
  .profile-name { font-size: 26px !important; }
  .profile-hero-main { gap: 14px !important; }

  /* Dashboard grid */
  .content .grid {
    grid-template-columns: 1fr !important;
  }
  .lesson-card {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .lesson-card .row-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Admin */
  .admin-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none !important;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
  .admin-tab-btn {
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
  .admin-user-card { grid-template-columns: 1fr !important; }
  .admin-user-stats { grid-template-columns: repeat(2,1fr) !important; }

  /* Teacher stats */
  .teacher-stats-grid { grid-template-columns: repeat(2,1fr) !important; }
  .teacher-booking-split { grid-template-columns: 1fr !important; gap: 14px !important; }
  .teacher-history-row { grid-template-columns: 1fr auto !important; }
  .teacher-history-row .teacher-history-student { display: none !important; }
}

/* Extra small */
@media (max-width: 390px) {
  .mob-topbar-user span { max-width: 100px !important; }
  .teacher-carousel .teacher-profile-card.premium-teacher-card,
  .teacher-profile-card.premium-teacher-card {
    min-width: 88vw !important; max-width: 88vw !important;
  }
  .premium-teacher-main { padding-right: 0 !important; padding-top: 68px !important; }
  .premium-teacher-avatar { left: 14px !important; right: auto !important; top: 14px !important; }
  .cal-head, .cal-row, .booking-calendar .cal-head, .booking-calendar .cal-row {
    grid-template-columns: 44px repeat(7, 78px) !important;
    min-width: 590px !important;
  }
}



/* =========================================================
   FINAL PATCH — mobile day-calendar + hamburger fix +
   elegant teacher cards  (2026-06-17)
   ========================================================= */

/* ═══════════════════════════════════════════════════════
   1. HAMBURGER / SIDEBAR — works on every page
   ═══════════════════════════════════════════════════════ */

/* overlay and mob-topbar are now direct children of the view,
   not trapped inside .layout — this is the hamburger fix */
#sb-overlay {
  display:none;
  position:fixed !important;
  inset:0 !important;
  z-index:109 !important;
}

.mob-topbar {
  display:none; /* hidden on desktop */
}

/* Desktop: sidebar is a normal grid column */
@media(min-width:851px){
  .dash-layout,
  .book-layout {
    display:grid !important;
    grid-template-columns:292px 1fr !important;
    height:100vh !important;
    overflow:hidden !important;
  }
  /* sidebar stays in the DOM as the first grid child */
  .sidebar {
    position:relative !important;
    left:auto !important;
    height:auto !important;
    transform:none !important;
    transition:none !important;
    box-shadow:none !important;
  }
}

@media(max-width:850px){
  /* Fixed 52 px topbar always visible */
  .mob-topbar {
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important;
    height:52px !important;
    background:#fff !important;
    border-bottom:1px solid rgba(0,0,0,.08) !important;
    box-shadow:0 2px 10px rgba(0,0,0,.06) !important;
    padding:0 14px !important;
    z-index:110 !important; /* above overlay(109) */
  }

  /* Hamburger */
  .mob-hamburger {
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    width:36px !important; height:36px !important;
    padding:9px 7px !important;
    border:1px solid rgba(0,0,0,.11) !important;
    border-radius:10px !important;
    background:#f8f9fc !important;
    cursor:pointer !important;
    flex:0 0 36px !important;
    transition:background .16s ease !important;
  }
  .mob-hamburger:hover,
  .mob-hamburger:active {
    background:rgba(0,85,212,.09) !important;
    border-color:rgba(0,85,212,.22) !important;
  }
  .mob-hamburger span {
    display:block !important;
    height:2px !important;
    border-radius:2px !important;
    background:#374151 !important;
    width:100% !important;
  }

  /* Logo in topbar */
  .mob-topbar-logo {
    height:24px !important;
    width:auto !important;
    max-width:90px !important;
    object-fit:contain !important;
    flex:0 0 auto !important;
  }

  /* User name in topbar */
  .mob-topbar-user {
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    min-width:0 !important;
  }
  .mob-topbar-user span {
    font-size:12px !important;
    font-weight:800 !important;
    color:#374151 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:130px !important;
  }
  .mob-topbar-user small {
    font-size:10px !important;
    color:#94a3b8 !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
  }

  /* Sidebar drawer — off screen by default */
  .sidebar {
    position:fixed !important;
    top:0 !important; left:-105% !important;
    width:min(300px,88vw) !important;
    height:100dvh !important;
    z-index:120 !important;
    background:#fff !important;
    border-right:1px solid rgba(0,0,0,.08) !important;
    box-shadow:6px 0 40px rgba(0,0,0,.18) !important;
    overflow-y:auto !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    transition:left .28s cubic-bezier(.22,.9,.32,1) !important;
  }
  .sidebar.mob-open {
    left:0 !important;
  }

  /* Sidebar internals */
  .sidebar-header {
    display:block !important;
    position:relative !important;
  }
  .sidebar-top {
    padding:18px 16px 10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }
  .sidebar .logo {
    height:26px !important;
    width:auto !important;
    max-width:110px !important;
    object-fit:contain !important;
  }
  .mob-menu-close {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:absolute !important;
    top:12px !important; right:12px !important;
    width:32px !important; height:32px !important;
    border-radius:50% !important;
    border:1px solid rgba(0,0,0,.10) !important;
    background:#f4f5f8 !important;
    font-size:14px !important;
    cursor:pointer !important;
    color:#374151 !important;
    z-index:3 !important;
  }
  .mob-menu-close:hover { background:#fee2e2 !important; color:#dc2626 !important; }

  .user-box {
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    padding:10px 16px 14px !important;
    margin:0 !important;
    border:0 !important;
    border-top:1px solid rgba(0,0,0,.06) !important;
  }
  .nav {
    flex-direction:column !important;
    overflow-y:auto !important;
    white-space:normal !important;
    border-top:1px solid rgba(0,0,0,.06) !important;
    flex:1 !important;
  }
  .nav button {
    width:100% !important;
    text-align:left !important;
    padding:15px 20px !important;
    font-size:14px !important;
    font-weight:800 !important;
    border-bottom:1px solid rgba(0,0,0,.05) !important;
    border-right:0 !important;
  }
  .nav button.active { padding-left:24px !important; }
  .nav button.active::before {
    top:16% !important; bottom:16% !important;
    left:0 !important; width:4px !important; height:auto !important;
    border-radius:0 4px 4px 0 !important;
  }
  .nav button.active::after { display:none !important; }

  .sidebar-bottom {
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    padding:16px !important;
    border-top:1px solid rgba(0,0,0,.07) !important;
    margin-top:auto !important;
  }
  .sidebar-bottom .btn { width:100% !important; justify-content:center !important; }

  /* Layout — full-width block, pushed below topbar */
  .dash-layout,
  .book-layout,
  .layout,
  .classroom-layout {
    display:block !important;
    height:auto !important;
    min-height:100dvh !important;
    overflow:visible !important;
  }
  .content,
  .booking-content {
    padding:66px 14px 48px !important;
    height:auto !important;
    overflow:visible !important;
    min-height:calc(100dvh - 52px) !important;
  }
}


/* ═══════════════════════════════════════════════════════
   2. MOBILE CALENDAR — 1-2 day view
   ═══════════════════════════════════════════════════════ */

/* Week toolbar — compact on all screens */
.week-toolbar,
.booking-week-toolbar {
  display:grid !important;
  grid-template-columns:44px 1fr 44px !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 12px !important;
  background:#fff !important;
  border:1px solid rgba(0,0,0,.07) !important;
  border-radius:16px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.04) !important;
  margin-bottom:12px !important;
}
.cal-nav-btn {
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  border-radius:12px !important;
  flex:0 0 44px !important;
  min-height:0 !important;
}
.week-label {
  text-align:center !important;
  font-weight:800 !important;
  font-size:13.5px !important;
  color:#0f172a !important;
  line-height:1.35 !important;
}
.week-label b { font-weight:900 !important; font-size:14px !important; }
.week-label .mini { font-size:11px !important; color:#94a3b8 !important; display:block !important; }

@media(max-width:850px){
  /* Mobile calendar: 1-2 columns, NO horizontal scroll needed */
  .calendar.cal-mobile,
  .booking-calendar.cal-mobile {
    overflow:hidden !important; /* no scroll — only 1-2 days shown */
    border-radius:18px !important;
    border:1px solid rgba(0,0,0,.07) !important;
    width:100% !important;
  }

  /* 2-day grid: time col + 2 day cols */
  .calendar.cal-mobile .cal-head,
  .calendar.cal-mobile .cal-row,
  .booking-calendar.cal-mobile .cal-head,
  .booking-calendar.cal-mobile .cal-row {
    display:grid !important;
    grid-template-columns:52px repeat(2, 1fr) !important;
    min-width:0 !important;
    width:100% !important;
  }

  /* 1-day grid — screens ≤480 */
  @media(max-width:480px){
    .calendar.cal-mobile .cal-head,
    .calendar.cal-mobile .cal-row,
    .booking-calendar.cal-mobile .cal-head,
    .booking-calendar.cal-mobile .cal-row {
      grid-template-columns:52px 1fr !important;
    }
  }

  .calendar.cal-mobile .cal-head div,
  .booking-calendar.cal-mobile .cal-head div {
    padding:12px 8px !important;
    font-size:12px !important;
    font-weight:900 !important;
    text-align:center !important;
    background:#f8f9fc !important;
  }
  .calendar.cal-mobile .cal-head .today-col,
  .booking-calendar.cal-mobile .cal-head .today-col {
    background:linear-gradient(160deg,#d1fae5,#ecfdf5) !important;
    color:#15803d !important;
  }
  .calendar.cal-mobile .cal-head div span,
  .booking-calendar.cal-mobile .cal-head div span {
    display:block !important;
    font-size:13px !important;
    font-weight:900 !important;
    margin-top:2px !important;
  }
  .calendar.cal-mobile .time-cell,
  .booking-calendar.cal-mobile .time-cell {
    font-size:11px !important;
    padding:10px 6px !important;
    text-align:center !important;
    font-weight:800 !important;
    background:#f8f9fc !important;
  }
  .calendar.cal-mobile .slot,
  .booking-calendar.cal-mobile .slot {
    min-height:52px !important;
    font-size:12px !important;
    font-weight:800 !important;
  }
  .calendar.cal-mobile .slot.available,
  .booking-calendar.cal-mobile .slot.available {
    background:#fff !important;
    cursor:pointer !important;
  }
  .calendar.cal-mobile .slot.available:active,
  .booking-calendar.cal-mobile .slot.available:active {
    background:#eff6ff !important;
  }
  .calendar.cal-mobile .slot.selected,
  .booking-calendar.cal-mobile .slot.selected {
    background:#0055d4 !important;
    color:#fff !important;
    border-radius:8px !important;
  }

  /* also keep teacher availability calendar correct on mobile */
  .teacher-cal-wrap .calendar.cal-mobile .cal-head,
  .teacher-cal-wrap .calendar.cal-mobile .cal-row {
    grid-template-columns:52px repeat(2,1fr) !important;
  }
}


/* ═══════════════════════════════════════════════════════
   3. TEACHER CARDS — clean, elegant, not flashy
   ═══════════════════════════════════════════════════════ */

/* Carousel wrapper */
.teacher-carousel-wrap {
  position:relative !important;
  margin:0 0 20px !important;
}
/* Fade edges */
.teacher-carousel-wrap::before,
.teacher-carousel-wrap::after {
  content:"" !important;
  position:absolute !important;
  top:0 !important; bottom:0 !important;
  width:40px !important;
  z-index:4 !important;
  pointer-events:none !important;
}
.teacher-carousel-wrap::before { left:0  !important; background:linear-gradient(90deg,#f6f8ff,transparent) !important; }
.teacher-carousel-wrap::after  { right:0 !important; background:linear-gradient(-90deg,#f6f8ff,transparent) !important; }

.teacher-carousel {
  display:flex !important;
  overflow-x:auto !important;
  scroll-snap-type:x mandatory !important;
  gap:14px !important;
  padding:4px 48px 16px !important;
  scrollbar-width:none !important;
  -webkit-overflow-scrolling:touch !important;
}
.teacher-carousel::-webkit-scrollbar { display:none; }

/* Arrow buttons */
.teacher-car-arrow {
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:6 !important;
  width:38px !important; height:38px !important;
  border-radius:50% !important;
  border:1px solid rgba(0,0,0,.11) !important;
  background:#fff !important;
  font-size:20px !important;
  line-height:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:0 4px 14px rgba(0,0,0,.10) !important;
  transition:all .18s ease !important;
  color:#374151 !important;
}
.teacher-car-arrow.left  { left:6px  !important; }
.teacher-car-arrow.right { right:6px !important; }
.teacher-car-arrow:hover {
  background:#0f172a !important;
  color:#fff !important;
  border-color:#0f172a !important;
  box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
}

/* ── The card itself ──────────────────────────────────── */
.tc-card {
  position:relative !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:16px !important;
  min-width:320px !important;
  max-width:400px !important;
  scroll-snap-align:start !important;
  padding:22px 20px !important;
  border-radius:20px !important;
  background:#fff !important;
  border:1.5px solid #e8eaf0 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04) !important;
  cursor:pointer !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.22,.9,.32,1) !important;
}
.tc-card:hover {
  border-color:#c5cae8 !important;
  box-shadow:0 4px 16px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.07) !important;
  transform:translateY(-3px) !important;
}
.tc-card--selected {
  border-color:#16a34a !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(22,163,74,.12), 0 8px 28px rgba(22,163,74,.12) !important;
  transform:translateY(-4px) !important;
}

/* Avatar circle */
.tc-avatar {
  flex:0 0 52px !important;
  width:52px !important; height:52px !important;
  border-radius:16px !important;
  background:linear-gradient(145deg,#e8eeff,#dde6ff) !important;
  color:#374ea8 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  font-weight:900 !important;
  letter-spacing:-.5px !important;
  border:1.5px solid #d0d9ff !important;
}
.tc-card--selected .tc-avatar {
  background:linear-gradient(145deg,#d1fae5,#bbf7d0) !important;
  color:#15803d !important;
  border-color:#86efac !important;
}

/* Text block */
.tc-body {
  flex:1 !important;
  min-width:0 !important;
}
.tc-top {
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin-bottom:6px !important;
}
.tc-label {
  font-size:10px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.7px !important;
  color:#94a3b8 !important;
  margin:0 0 2px !important;
}
.tc-name {
  font-size:18px !important;
  font-weight:900 !important;
  letter-spacing:-.4px !important;
  color:#0f172a !important;
  margin:0 !important;
  line-height:1.15 !important;
}
.tc-rating {
  flex:0 0 auto !important;
  font-size:12px !important;
  font-weight:900 !important;
  color:#854d0e !important;
  background:#fef9c3 !important;
  border:1px solid #fde047 !important;
  border-radius:999px !important;
  padding:4px 9px !important;
  white-space:nowrap !important;
}
.tc-bio {
  font-size:13px !important;
  line-height:1.55 !important;
  color:#64748b !important;
  font-weight:600 !important;
  margin:0 0 12px !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.tc-tags {
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  margin-bottom:12px !important;
}
.tc-tags span {
  font-size:11px !important;
  font-weight:800 !important;
  color:#475569 !important;
  background:#f1f5f9 !important;
  border:1px solid #e2e8f0 !important;
  border-radius:6px !important;
  padding:4px 8px !important;
  transition:background .15s ease, color .15s ease !important;
}
.tc-card:hover .tc-tags span {
  background:#eff6ff !important;
  color:#1d4ed8 !important;
  border-color:#bfdbfe !important;
}
.tc-card--selected .tc-tags span {
  background:#f0fdf4 !important;
  color:#15803d !important;
  border-color:#bbf7d0 !important;
}
.tc-trust {
  font-size:11.5px !important;
  font-weight:800 !important;
  color:#15803d !important;
  margin:0 !important;
}
.tc-card--selected .tc-trust {
  color:#15803d !important;
}

/* Check badge on selected */
.tc-check {
  position:absolute !important;
  top:14px !important; right:14px !important;
  width:26px !important; height:26px !important;
  border-radius:50% !important;
  background:#16a34a !important;
  color:#fff !important;
  font-size:13px !important;
  font-weight:900 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 4px 12px rgba(22,163,74,.28) !important;
}

/* Suppress old premium card styles that might conflict */
.teacher-profile-card.premium-teacher-card,
.premium-teacher-card {
  all:unset !important;
}
.tc-card { all:revert !important; }
/* Re-apply tc-card after all:revert */
.tc-card {
  position:relative !important;
  display:flex !important;
  align-items:flex-start !important;
  gap:16px !important;
  min-width:320px !important;
  max-width:400px !important;
  scroll-snap-align:start !important;
  padding:22px 20px !important;
  border-radius:20px !important;
  background:#fff !important;
  border:1.5px solid #e8eaf0 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04) !important;
  cursor:pointer !important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.22,.9,.32,1) !important;
  box-sizing:border-box !important;
  font-family:inherit !important;
  color:inherit !important;
  text-decoration:none !important;
}

@media(max-width:850px){
  .teacher-carousel {
    padding:4px 14px 14px !important;
    gap:12px !important;
  }
  .teacher-carousel-wrap::before,
  .teacher-carousel-wrap::after { display:none !important; }
  .teacher-car-arrow { display:none !important; }
  .tc-card {
    min-width:min(80vw,300px) !important;
    max-width:min(80vw,300px) !important;
    padding:18px 16px !important;
    border-radius:18px !important;
    gap:12px !important;
  }
  .tc-avatar {
    width:44px !important; height:44px !important;
    flex-basis:44px !important;
    border-radius:13px !important;
    font-size:15px !important;
  }
  .tc-name { font-size:16px !important; }
  .tc-bio  { font-size:12.5px !important; -webkit-line-clamp:2 !important; }
  .tc-tags span { font-size:10.5px !important; padding:3px 7px !important; }
}


/* =========================================================
   SURGICAL FIX 2026-06-17 — desktop width + mobile menu
   ========================================================= */
@media (min-width:851px){
  #view-dashboard > .layout.dash-layout,
  #view-book > .layout.book-layout{
    display:grid !important;
    grid-template-columns:292px minmax(0,1fr) !important;
    width:100vw !important;
    max-width:none !important;
    height:100vh !important;
    overflow:hidden !important;
  }
  #view-dashboard .layout > #sb-overlay,
  #view-dashboard .layout > .mob-topbar,
  #view-book .layout > #sb-overlay,
  #view-book .layout > .mob-topbar{
    display:none !important;
  }
  #view-dashboard .layout > .sidebar,
  #view-book .layout > .sidebar{
    grid-column:1 !important;
    width:292px !important;
    min-width:292px !important;
    max-width:292px !important;
    height:100vh !important;
    position:relative !important;
    left:auto !important;
    transform:none !important;
  }
  #view-dashboard .layout > .content,
  #view-book .layout > .content{
    grid-column:2 !important;
    min-width:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100vh !important;
    overflow:auto !important;
  }
}

@media (max-width:850px){
  body.mobile-menu-open{overflow:hidden !important;}
  body.mobile-menu-open #sb-overlay{
    display:block !important;
    background:rgba(15,23,42,.42) !important;
    backdrop-filter:blur(3px) !important;
    -webkit-backdrop-filter:blur(3px) !important;
    pointer-events:auto !important;
  }
  #view-dashboard .layout > #sb-overlay,
  #view-book .layout > #sb-overlay,
  #view-classroom .classroom-layout > #sb-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:109 !important;
  }
  #view-dashboard .layout > .mob-topbar,
  #view-book .layout > .mob-topbar,
  #view-classroom .classroom-layout > .mob-topbar{
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:110 !important;
  }
  #view-dashboard .layout > .sidebar,
  #view-book .layout > .sidebar,
  #view-classroom .classroom-layout > .sidebar{
    position:fixed !important;
    top:0 !important;
    left:-105% !important;
    width:min(300px,88vw) !important;
    max-width:88vw !important;
    height:100dvh !important;
    z-index:120 !important;
    transition:left .28s cubic-bezier(.22,.9,.32,1) !important;
  }
  #view-dashboard .layout > .sidebar.mob-open,
  #view-book .layout > .sidebar.mob-open,
  #view-classroom .classroom-layout > .sidebar.mob-open{
    left:0 !important;
  }
  .mob-hamburger{pointer-events:auto !important;touch-action:manipulation !important;}
}


/* =========================================================
   SURGICAL FIX 2026-06-17b — mobile 2-day calendar + classroom sidebar
   ========================================================= */
@media (max-width:850px){
  .calendar.cal-mobile .cal-head,
  .calendar.cal-mobile .cal-row,
  .booking-calendar.cal-mobile .cal-head,
  .booking-calendar.cal-mobile .cal-row,
  .teacher-cal-wrap .calendar.cal-mobile .cal-head,
  .teacher-cal-wrap .calendar.cal-mobile .cal-row{
    grid-template-columns:52px repeat(2,minmax(0,1fr)) !important;
    min-width:0 !important;
    width:100% !important;
  }
  .calendar.cal-mobile .slot,
  .booking-calendar.cal-mobile .slot{min-width:0 !important;}
  #view-classroom .classroom-layout{
    display:block !important;
    min-height:100dvh !important;
  }
  #view-classroom .classroom-main{
    padding-top:66px !important;
    min-height:100dvh !important;
  }
}
@media (min-width:851px){
  #view-classroom > .classroom-layout{
    display:grid !important;
    grid-template-columns:292px minmax(0,1fr) !important;
    width:100vw !important;
    height:100vh !important;
    overflow:hidden !important;
  }
  #view-classroom .classroom-layout > .sidebar{
    width:292px !important;
    min-width:292px !important;
    max-width:292px !important;
    height:100vh !important;
    position:relative !important;
    left:auto !important;
    transform:none !important;
  }
  #view-classroom .classroom-layout > .classroom-main{
    min-width:0 !important;
    width:100% !important;
    height:100vh !important;
    overflow:auto !important;
  }
  #view-classroom .classroom-layout > #sb-overlay,
  #view-classroom .classroom-layout > .mob-topbar{display:none !important;}
}


/* =========================================================
   SURGICAL FIX 2026-06-17c — classroom mobile drawer target
   Fixes teacher classroom hamburger: drawer is selected inside the
   active view only and forced above classroom/iframe layers.
   ========================================================= */
@media (max-width:850px){
  #view-classroom:not(.hidden) .classroom-layout > .sidebar.classroom-sidebar{
    display:flex !important;
    position:fixed !important;
    top:0 !important;
    left:-105% !important;
    width:min(300px,88vw) !important;
    max-width:88vw !important;
    height:100dvh !important;
    z-index:10020 !important;
    background:#fff !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    overflow-y:auto !important;
  }
  #view-classroom:not(.hidden) .classroom-layout > .sidebar.classroom-sidebar.mob-open{
    left:0 !important;
  }
  #view-classroom:not(.hidden) .classroom-layout > #sb-overlay{
    z-index:10010 !important;
  }
  #view-classroom:not(.hidden) .classroom-layout > .mob-topbar{
    z-index:10030 !important;
  }
  #view-classroom:not(.hidden) .board-frame,
  #view-classroom:not(.hidden) iframe{
    position:relative !important;
    z-index:1 !important;
  }
}


/* Ledger module */
.admin-ledger-panel{overflow:hidden}
.admin-ledger-controls{display:grid;grid-template-columns:1.2fr .8fr .8fr .55fr;gap:14px;align-items:end;margin:18px 0}
.ledger-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}
.admin-ledger-output{margin-top:18px}
.ledger-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.ledger-summary span{background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:14px 16px;font-weight:800;color:var(--muted)}
.ledger-summary b{display:block;font-size:24px;line-height:1.1;color:var(--text)}
.ledger-summary .ledger-total{background:#111827;color:#fff;border-color:#111827}
.ledger-summary .ledger-total b{color:#fff}
.ledger-report-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:16px 0;padding:16px 18px;border-radius:18px;background:linear-gradient(135deg,#fff,#f3f5ff);border:1.5px solid var(--border)}
.ledger-report-title b{font-size:22px}
.ledger-report-title span{color:var(--muted);font-weight:800}
.ledger-list{display:flex;flex-direction:column;gap:10px}
.ledger-row{display:grid;grid-template-columns:1fr 1.2fr .75fr .65fr;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:14px 16px}
.ledger-row>div{min-width:0}
.ledger-row b{display:block}
.ledger-row span,.ledger-row small{display:block;color:var(--muted);font-weight:700}
.ledger-row.payable{border-color:rgba(19,164,91,.35);box-shadow:inset 4px 0 0 var(--success)}
.ledger-row.not-payable{opacity:.78;background:#f7f8fb}
.ledger-status{display:inline-flex!important;width:max-content;border-radius:999px;padding:5px 9px;font-size:11px;text-transform:uppercase;font-weight:900}
.ledger-status.paid{background:rgba(19,164,91,.12);color:#08743d}
.ledger-status.unpaid{background:rgba(217,48,37,.10);color:#9b1c13}
.ledger-amount{text-align:right;font-weight:900;font-size:16px}
.teacher-amount-pill{display:inline-flex;margin-top:5px;width:max-content;border-radius:999px;padding:4px 8px;background:rgba(19,164,91,.12);color:#08743d;font-style:normal;font-size:11px;font-weight:900}
.teacher-row-amount{justify-self:end;white-space:nowrap;border-radius:999px;padding:7px 10px;font-size:12px}
.teacher-row-amount.is-paid{background:rgba(19,164,91,.12);color:#08743d}
.teacher-row-amount.is-unpaid{background:rgba(107,115,148,.10);color:var(--muted)}
.teacher-total-amount{background:#111827!important;color:#fff!important;border-color:#111827!important}
.teacher-total-amount b{color:#fff!important}
.teacher-history-row{grid-template-columns:1fr 1.3fr auto auto}
@media(max-width:850px){
  .admin-ledger-controls{grid-template-columns:1fr}
  .ledger-summary{grid-template-columns:1fr 1fr}
  .ledger-row{grid-template-columns:1fr;gap:6px}
  .ledger-amount{text-align:left}
  .ledger-report-title{align-items:flex-start;flex-direction:column}
  .teacher-history-row{grid-template-columns:1fr}
  .teacher-row-amount{justify-self:start}
}


/* BOOK.SKULE legal consent checkbox for account registration */
.consent-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:2px 0 4px;
  padding:12px 13px;
  border:1.5px solid var(--border);
  border-radius:14px;
  background:#fff;
  font-size:13px;
  line-height:1.45;
  font-weight:700;
  color:var(--muted);
}
.consent-row input{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin:2px 0 0;
  accent-color:#ef1d25;
  cursor:pointer;
}
.consent-row span{display:block;}
.consent-row a{
  color:#ef1d25;
  font-weight:900;
  text-decoration:none;
}
.consent-row a:hover{text-decoration:underline;}

/* =========================================================
   Teacher cards — elegant expandable edge-to-edge profile card
   Surgical update for book.skule.pl
   ========================================================= */
.teacher-carousel-wrap{
  margin: 2px -2px 8px !important;
  padding-top: 2px !important;
}
.teacher-carousel{
  align-items: stretch !important;
  padding-top: 12px !important;
  padding-bottom: 24px !important;
}
.teacher-carousel:has(.tc-card--selected) .tc-card--dimmed{
  opacity:.58 !important;
  filter:saturate(.78) contrast(.96) !important;
  transform:scale(.985) !important;
}
.tc-card.teacher-profile-card.premium-teacher-card,
.tc-card{
  position:relative !important;
  isolation:isolate !important;
  display:grid !important;
  grid-template-columns:92px minmax(0,1fr) !important;
  align-items:start !important;
  gap:18px !important;
  min-width:390px !important;
  max-width:430px !important;
  min-height:258px !important;
  padding:0 20px 20px 0 !important;
  border-radius:24px !important;
  background:linear-gradient(145deg,#ffffff 0%,#fbfcff 72%,#f7fafc 100%) !important;
  border:1.5px solid rgba(15,23,42,.14) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 0 0 1px rgba(255,255,255,.65) inset, 0 10px 28px rgba(15,23,42,.075) !important;
  cursor:pointer !important;
  overflow:hidden !important;
  scroll-snap-align:center !important;
  transition:max-width .28s cubic-bezier(.2,.9,.2,1), min-width .28s cubic-bezier(.2,.9,.2,1), border-color .2s ease, box-shadow .2s ease, opacity .18s ease, filter .18s ease, transform .2s cubic-bezier(.2,.9,.2,1) !important;
}
.tc-card:before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:-1 !important;
  background:linear-gradient(135deg,rgba(15,23,42,.08),transparent 34%,rgba(255,255,255,.8) 58%,rgba(15,23,42,.04)) !important;
  opacity:.58 !important;
  pointer-events:none !important;
}
.tc-card:after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(15,23,42,.16),transparent) !important;
}
.tc-card:hover{
  border-color:rgba(15,23,42,.28) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset, 0 18px 42px rgba(15,23,42,.105) !important;
  transform:translateY(-3px) !important;
}
.tc-card--selected{
  border-color:#16a34a !important;
  box-shadow:0 0 0 3px rgba(22,163,74,.14), 0 0 26px rgba(255,214,124,.24), 0 20px 48px rgba(22,163,74,.16) !important;
  transform:translateY(-5px) !important;
}
.tc-card--expanded{
  min-width:min(760px, calc(100vw - 130px)) !important;
  max-width:min(760px, calc(100vw - 130px)) !important;
}
.tc-photo-wrap{
  grid-column:1 !important;
  align-self:start !important;
  width:92px !important;
  height:112px !important;
  border-radius:24px 0 24px 0 !important;
  overflow:hidden !important;
  border-right:1.5px solid rgba(15,23,42,.14) !important;
  border-bottom:1.5px solid rgba(15,23,42,.14) !important;
  background:linear-gradient(145deg,#f1f5f9,#fff) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.08) !important;
}
.tc-photo{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}
.tc-avatar{
  width:100% !important;
  height:100% !important;
  border:0 !important;
  border-radius:0 !important;
  background:linear-gradient(145deg,#111827,#374151) !important;
  color:#fff !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:25px !important;
  font-weight:900 !important;
  letter-spacing:-.8px !important;
}
.tc-card--selected .tc-avatar{
  background:linear-gradient(145deg,#052e16,#16a34a) !important;
  color:#fff !important;
}
.tc-body{
  grid-column:2 !important;
  padding-top:20px !important;
  min-width:0 !important;
}
.tc-top{display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:12px !important;margin:0 0 8px !important;}
.tc-label{margin:0 0 3px !important;font-size:10px !important;font-weight:900 !important;text-transform:uppercase !important;letter-spacing:1px !important;color:#7c8494 !important;}
.tc-name{margin:0 !important;color:#0b1220 !important;font-size:21px !important;line-height:1.05 !important;font-weight:950 !important;letter-spacing:-.65px !important;}
.tc-rating{font-size:12px !important;font-weight:950 !important;color:#111827 !important;background:#fff !important;border:1.5px solid rgba(15,23,42,.18) !important;border-radius:999px !important;padding:6px 10px !important;box-shadow:inset 0 -1px 0 rgba(15,23,42,.08) !important;white-space:nowrap !important;}
.tc-bio{margin:0 0 12px !important;color:#566074 !important;font-size:13.2px !important;font-weight:650 !important;line-height:1.55 !important;display:-webkit-box !important;-webkit-line-clamp:3 !important;-webkit-box-orient:vertical !important;overflow:hidden !important;}
.tc-card--expanded .tc-bio{-webkit-line-clamp:2 !important;}
.tc-tags{display:flex !important;flex-wrap:wrap !important;gap:7px !important;margin:0 0 12px !important;}
.tc-tags span{background:#fff !important;color:#111827 !important;border:1.5px solid rgba(15,23,42,.24) !important;border-radius:999px !important;padding:6px 10px !important;font-size:11px !important;line-height:1 !important;font-weight:900 !important;box-shadow:inset 0 -1px 0 rgba(15,23,42,.08), 0 3px 8px rgba(15,23,42,.035) !important;}
.tc-card--selected .tc-tags span{border-color:rgba(22,163,74,.42) !important;color:#166534 !important;background:#f0fdf4 !important;}
.tc-expanded-panel{display:grid !important;grid-template-columns:1fr 1fr !important;gap:16px !important;max-height:0 !important;opacity:0 !important;overflow:hidden !important;transition:max-height .28s ease, opacity .22s ease, margin .24s ease !important;margin:0 !important;}
.tc-card--expanded .tc-expanded-panel{max-height:260px !important;opacity:1 !important;margin:12px 0 14px !important;}
.tc-expanded-panel>div{padding:14px !important;border-radius:16px !important;background:#fff !important;border:1.5px solid rgba(15,23,42,.12) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9) !important;}
.tc-expanded-panel h4{margin:0 0 7px !important;font-size:12px !important;text-transform:uppercase !important;letter-spacing:.7px !important;color:#111827 !important;font-weight:950 !important;}
.tc-expanded-panel p{margin:0 !important;color:#566074 !important;font-size:12.8px !important;line-height:1.55 !important;font-weight:650 !important;}
.tc-footer{display:flex !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;margin-top:auto !important;}
.tc-trust{margin:0 !important;color:#166534 !important;font-size:11.5px !important;font-weight:900 !important;line-height:1.3 !important;}
.tc-more{flex:0 0 auto !important;display:inline-flex !important;align-items:center !important;gap:7px !important;padding:8px 11px !important;border-radius:999px !important;border:1.5px solid rgba(15,23,42,.28) !important;background:#fff !important;color:#111827 !important;font:inherit !important;font-size:11.5px !important;font-weight:950 !important;cursor:pointer !important;box-shadow:0 4px 12px rgba(15,23,42,.06), inset 0 -1px 0 rgba(15,23,42,.08) !important;transition:.16s ease !important;}
.tc-more:hover{background:#111827 !important;color:#fff !important;transform:translateY(-1px) !important;}
.tc-more span{font-size:13px !important;line-height:1 !important;}
.tc-check{position:absolute !important;top:13px !important;right:13px !important;width:27px !important;height:27px !important;border-radius:999px !important;background:#16a34a !important;color:#fff !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:13px !important;font-weight:950 !important;box-shadow:0 0 0 4px rgba(22,163,74,.14), 0 8px 20px rgba(22,163,74,.25) !important;}
@media(max-width:850px){
  .tc-card.teacher-profile-card.premium-teacher-card,.tc-card{min-width:min(86vw,330px) !important;max-width:min(86vw,330px) !important;grid-template-columns:76px minmax(0,1fr) !important;gap:14px !important;min-height:242px !important;padding-right:16px !important;padding-bottom:16px !important;}
  .tc-card--expanded{min-width:min(88vw,420px) !important;max-width:min(88vw,420px) !important;}
  .tc-photo-wrap{width:76px !important;height:96px !important;border-radius:22px 0 20px 0 !important;}
  .tc-name{font-size:18px !important;}
  .tc-rating{display:none !important;}
  .tc-expanded-panel{grid-template-columns:1fr !important;}
  .tc-card--expanded .tc-expanded-panel{max-height:440px !important;}
  .tc-footer{align-items:flex-start !important;flex-direction:column !important;}
}

/* Admin user creation + role assignment */
.admin-create-user-form{margin:0 0 16px;padding:18px 20px;background:linear-gradient(180deg,#fff 0%,#f8f9ff 100%)}
.admin-create-user-form h3{margin:2px 0 4px;font-size:18px;font-weight:900;letter-spacing:-.3px}
.admin-create-user-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.admin-role-select{width:auto;min-width:112px;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:900}
.ok-inline{color:var(--success);font-weight:900}.error-inline{color:var(--danger);font-weight:900}
@media(max-width:900px){.admin-create-user-grid{grid-template-columns:1fr}.admin-role-select{width:100%}}


/* Surgical FAQ / guide admin upgrade */
.video-shell video,.video-shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
.faq-instruction{padding:0 22px 22px;color:var(--muted);line-height:1.75}
.faq-instruction p{margin:0;background:#f6f7fb;border:1px solid var(--border);border-radius:14px;padding:16px}
.admin-guide-panel{max-width:1180px}
.admin-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.admin-guide-wide{grid-column:1/-1}
.admin-guide-subtitle{font-size:16px;margin:22px 0 12px;font-weight:900;letter-spacing:-.2px}
.admin-faq-edit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}
.admin-faq-edit-card{background:#f8f9fd;border:1.5px solid var(--border);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px}
.admin-faq-edit-card b{font-weight:900;color:var(--text)}
.admin-faq-edit-card textarea{min-height:86px}
@media(max-width:980px){.admin-guide-grid,.admin-faq-edit-grid{grid-template-columns:1fr}.admin-guide-wide{grid-column:auto}}

/* Standalone FAQ page */
.faq-page{min-height:100vh;background:var(--bg);padding:28px 18px 60px}
.faq-page-shell{max-width:980px;margin:0 auto}
.faq-page-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}
.faq-page-logo{height:42px;max-width:210px;object-fit:contain}
.faq-page-hero{background:#fff;border:1.5px solid var(--border);border-radius:24px;box-shadow:var(--shadow);padding:28px;margin-bottom:16px}
.faq-page-hero h1{font-size:34px;line-height:1.08;margin:0 0 10px;font-weight:900;letter-spacing:-.8px}
.faq-page .learn-accordion{margin:14px 0}
@media(max-width:760px){.faq-page-top{align-items:flex-start;flex-direction:column}.faq-page-hero h1{font-size:28px}}

/* v10 purchase legal consent before Przelewy24 */
.booking-legal-check{display:flex;align-items:flex-start;gap:11px;margin:14px 18px 12px;padding:14px 15px;background:#fff;border:1.5px solid var(--border);border-radius:15px;font-size:13px;font-weight:800;line-height:1.45;color:var(--text)}
.booking-legal-check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent);flex:0 0 auto}
.booking-legal-check a{color:var(--accent);font-weight:900;text-decoration:underline;text-underline-offset:2px}

.show-more-btn{margin-top:10px;width:100%;justify-content:center;color:var(--muted);font-size:13px;padding:10px}
.show-more-btn:hover{color:var(--text);background:var(--hover)}


/* Manual payment options — BLIK to phone + bank transfer fallback */
.manual-pay-wrap{margin-top:16px;background:#fff;border:1.5px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:18px}.manual-pay-inline{box-shadow:none;margin:16px 18px 18px}.manual-pay-head h3{margin:6px 0 6px;font-size:22px;letter-spacing:-.4px}.manual-pay-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}.manual-pay-card{position:relative;border:1.5px solid var(--border);border-radius:18px;background:#fff;padding:18px;display:flex;flex-direction:column;gap:10px}.manual-pay-card.recommended{border-color:rgba(19,164,91,.45);background:linear-gradient(180deg,#fff 0%,rgba(19,164,91,.06) 100%)}.manual-pay-card h4{margin:0;font-size:18px;font-weight:900}.manual-pay-card p{margin:0;color:var(--muted);font-size:13px}.manual-pay-badge{position:absolute;right:12px;top:12px;border-radius:999px;background:rgba(19,164,91,.13);color:#096b38;font-weight:900;font-size:11px;text-transform:uppercase;padding:6px 9px}.pay-field{display:grid;grid-template-columns:74px 1fr auto;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;padding:9px;background:#f8f9fd}.pay-field span{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:900}.pay-field b{font-size:13px;overflow-wrap:anywhere}.pay-field button{border:0;border-radius:9px;background:#fff;border:1px solid var(--border);font-weight:900;padding:7px 9px;cursor:pointer}.pay-field button:hover{background:var(--accent-soft)}.manual-pay-note{margin-top:14px;border-radius:14px;background:#fff7e8;border:1px solid #ffe0a8;color:#704400;font-weight:800;padding:12px 14px}.payment-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:18px}.payment-modal-backdrop{position:absolute;inset:0;background:rgba(14,18,34,.48);backdrop-filter:blur(6px)}.payment-modal-card{position:relative;z-index:1;max-width:1180px;width:min(1180px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:24px;box-shadow:0 24px 90px rgba(0,0,0,.25);padding:14px}.payment-modal-close{position:sticky;float:right;top:8px;z-index:2;width:38px;height:38px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:24px;font-weight:900;cursor:pointer}.payment-modal-close:hover{background:var(--hover)}
@media(max-width:980px){.manual-pay-grid{grid-template-columns:1fr}.pay-field{grid-template-columns:1fr}.payment-modal{align-items:start}.payment-modal-card{max-height:94vh}.manual-pay-inline{margin:14px 0}}

/* =========================================================
   Manual payment styling fix — 2026-06-25
   Fixes squeezed 3-column payment cards inside booking summary.
   ========================================================= */
@media (min-width:1051px){
  .calendar-shell{grid-template-columns:minmax(0,1fr) 440px;gap:22px;}
}
.summary-card{overflow:visible;}
.manual-pay-inline{margin:16px 18px 18px;padding:16px;border-radius:20px;overflow:hidden;}
.manual-pay-inline .manual-pay-head h3{font-size:20px;line-height:1.15;margin:0 0 6px;}
.manual-pay-inline .manual-pay-head .muted{font-size:13px;line-height:1.45;margin:0;}
.manual-pay-inline .manual-pay-grid{display:flex;flex-direction:column;gap:14px;margin-top:14px;}
.manual-pay-inline .manual-pay-card{width:100%;padding:16px;border-radius:18px;gap:10px;min-width:0;}
.manual-pay-inline .manual-pay-card.recommended{border:2px solid rgba(19,164,91,.55);background:linear-gradient(180deg,#ffffff 0%,#f2fff6 100%);}
.manual-pay-inline .manual-pay-card h4{font-size:18px;line-height:1.15;margin:0;padding-right:92px;word-break:normal;}
.manual-pay-inline .manual-pay-card p{font-size:13px;line-height:1.45;margin:0;color:var(--muted);}
.manual-pay-inline .manual-pay-card .btn{width:100%;min-height:44px;white-space:normal;text-align:center;}
.manual-pay-inline .manual-pay-badge{right:12px;top:12px;max-width:84px;text-align:center;line-height:1.1;}
.manual-pay-inline .pay-field{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 11px;background:#f8f9fd;border-radius:13px;}
.manual-pay-inline .pay-field span{font-size:10px;line-height:1.15;}
.manual-pay-inline .pay-field b{font-size:13px;line-height:1.25;overflow-wrap:anywhere;word-break:break-word;min-width:0;}
.manual-pay-inline .pay-field button{white-space:nowrap;padding:8px 10px;}
.manual-pay-inline .manual-pay-note{font-size:13px;line-height:1.45;margin-top:14px;}
@media(max-width:1050px){
  .manual-pay-inline{margin:14px 0 18px;}
  .manual-pay-inline .manual-pay-grid{display:flex;flex-direction:column;}
}
@media(max-width:480px){
  .manual-pay-inline .manual-pay-card h4{padding-right:0;}
  .manual-pay-inline .manual-pay-badge{position:static;align-self:flex-start;margin-bottom:2px;max-width:none;}
  .manual-pay-inline .pay-field{grid-template-columns:1fr;gap:6px;}
  .manual-pay-inline .pay-field button{width:100%;}
}


/* =========================================================
   v20260625-payment-style-v2
   Strong manual payment layout fix:
   - no narrow 3-column squeezing
   - label / value / copy rows stay readable
   - right booking panel widened on desktop
   ========================================================= */

/* Give the booking basket enough room on desktop */
@media (min-width:1051px){
  .calendar-shell{
    grid-template-columns:minmax(0,1fr) minmax(460px,520px) !important;
    gap:24px !important;
  }
}

/* Keep summary clean and allow the payment panel to breathe */
.summary-card{
  overflow:visible !important;
}

/* Manual payment container inside the basket */
.manual-pay-wrap.manual-pay-inline,
.manual-pay-inline{
  margin:16px 18px 18px !important;
  padding:16px !important;
  border-radius:22px !important;
  background:#fff !important;
  border:1.5px solid var(--border) !important;
  box-shadow:0 6px 24px rgba(60,68,120,.06) !important;
  overflow:visible !important;
  min-width:0 !important;
}

.manual-pay-inline .manual-pay-head{
  margin-bottom:12px !important;
}

.manual-pay-inline .manual-pay-head h3{
  font-size:20px !important;
  line-height:1.15 !important;
  margin:6px 0 6px !important;
  letter-spacing:-.4px !important;
}

.manual-pay-inline .manual-pay-head .muted{
  font-size:13px !important;
  line-height:1.45 !important;
  margin:0 !important;
}

/* Always stack methods vertically in the booking basket */
.manual-pay-inline .manual-pay-grid{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  gap:14px !important;
  margin-top:14px !important;
}

/* Cards */
.manual-pay-inline .manual-pay-card{
  width:100% !important;
  min-width:0 !important;
  padding:18px !important;
  border-radius:20px !important;
  border:1.5px solid var(--border) !important;
  background:#fff !important;
  display:flex !important;
  flex-direction:column !important;
  gap:11px !important;
  box-shadow:0 3px 14px rgba(60,68,120,.035) !important;
}

.manual-pay-inline .manual-pay-card.recommended{
  border:2px solid rgba(19,164,91,.50) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f2fff6 100%) !important;
}

.manual-pay-inline .manual-pay-card h4{
  margin:0 !important;
  padding-right:96px !important;
  font-size:19px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:-.35px !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
}

.manual-pay-inline .manual-pay-card p{
  margin:0 0 2px !important;
  color:var(--muted) !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

.manual-pay-inline .manual-pay-card .btn{
  width:100% !important;
  min-height:45px !important;
  white-space:normal !important;
  text-align:center !important;
}

.manual-pay-inline .manual-pay-badge{
  position:absolute !important;
  right:14px !important;
  top:14px !important;
  max-width:92px !important;
  text-align:center !important;
  line-height:1.1 !important;
  border-radius:999px !important;
}

/* Payment data rows: label | value | copy button */
.manual-pay-inline .pay-field{
  display:grid !important;
  grid-template-columns:104px minmax(180px,1fr) auto !important;
  align-items:center !important;
  column-gap:12px !important;
  row-gap:6px !important;
  width:100% !important;
  min-width:0 !important;
  padding:9px 10px !important;
  border:0 !important;
  border-bottom:1px solid var(--border) !important;
  border-radius:0 !important;
  background:transparent !important;
}

.manual-pay-inline .pay-field:last-child{
  border-bottom:0 !important;
}

.manual-pay-inline .pay-field span{
  min-width:0 !important;
  font-size:12px !important;
  line-height:1.25 !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  color:var(--muted) !important;
  font-weight:800 !important;
  white-space:nowrap !important;
}

.manual-pay-inline .pay-field b{
  min-width:0 !important;
  color:var(--text) !important;
  font-size:15px !important;
  line-height:1.28 !important;
  font-weight:900 !important;
  text-align:left !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:break-word !important;
  hyphens:none !important;
}

.manual-pay-inline .pay-field button{
  justify-self:end !important;
  flex:0 0 auto !important;
  border:1px solid var(--border) !important;
  border-radius:11px !important;
  background:#fff !important;
  color:var(--text) !important;
  font-size:13px !important;
  font-weight:900 !important;
  line-height:1 !important;
  padding:9px 12px !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  box-shadow:0 2px 8px rgba(60,68,120,.04) !important;
}

.manual-pay-inline .pay-field button:hover{
  background:var(--accent-soft) !important;
  border-color:var(--accent-mid) !important;
}

.manual-pay-inline .manual-pay-note{
  margin-top:14px !important;
  padding:12px 14px !important;
  border-radius:15px !important;
  font-size:13px !important;
  line-height:1.45 !important;
}

/* Medium widths: keep panel usable */
@media(max-width:1280px) and (min-width:1051px){
  .calendar-shell{
    grid-template-columns:minmax(0,1fr) minmax(430px,470px) !important;
  }
  .manual-pay-inline .pay-field{
    grid-template-columns:96px minmax(150px,1fr) auto !important;
  }
}

/* Tablet/mobile: payment panel stacks below calendar */
@media(max-width:1050px){
  .manual-pay-wrap.manual-pay-inline,
  .manual-pay-inline{
    margin:14px 0 18px !important;
  }
  .manual-pay-inline .manual-pay-grid{
    display:flex !important;
    flex-direction:column !important;
  }
  .manual-pay-inline .pay-field{
    grid-template-columns:104px minmax(0,1fr) auto !important;
  }
}

/* Very narrow mobile */
@media(max-width:560px){
  .manual-pay-inline .manual-pay-card{
    padding:16px !important;
  }
  .manual-pay-inline .manual-pay-card h4{
    padding-right:0 !important;
  }
  .manual-pay-inline .manual-pay-badge{
    position:static !important;
    align-self:flex-start !important;
    margin-bottom:2px !important;
    max-width:none !important;
  }
  .manual-pay-inline .pay-field{
    grid-template-columns:1fr !important;
    padding:11px 0 !important;
  }
  .manual-pay-inline .pay-field span{
    white-space:normal !important;
  }
  .manual-pay-inline .pay-field b{
    font-size:16px !important;
  }
  .manual-pay-inline .pay-field button{
    width:100% !important;
    justify-self:stretch !important;
  }
}

/* Non-inline modal version also readable */
.payment-modal-card .manual-pay-grid{
  grid-template-columns:1fr !important;
}
@media(min-width:900px){
  .payment-modal-card .manual-pay-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}


/* v20260625 — payment reservation overlay, manual payment rules, admin payment panel */
.payment-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;animation:payFadeIn .22s ease both}.payment-modal.hidden{display:none!important}.payment-modal-backdrop{position:absolute;inset:0;background:rgba(246,247,251,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.payment-modal-card{position:relative;width:min(1060px,96vw);max-height:92vh;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:30px;box-shadow:0 32px 90px rgba(20,30,70,.20);padding:0;animation:payCardIn .32s cubic-bezier(.2,.9,.2,1) both}.payment-modal-close{position:fixed;right:30px;top:24px;width:54px;height:54px;border:0;border-radius:999px;background:#ef1d25;color:#fff;font-size:32px;line-height:1;font-weight:900;cursor:pointer;box-shadow:0 18px 46px rgba(239,29,37,.32);z-index:10000;transition:.16s ease}.payment-modal-close:hover{transform:rotate(8deg) scale(1.04);background:#d9141b}@keyframes payFadeIn{from{opacity:0}to{opacity:1}}@keyframes payCardIn{from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(8px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.pay-overlay-shell{padding:34px}.pay-inline-shell{padding:18px;margin:18px;border:1.5px solid var(--border);border-radius:24px;background:#fff;box-shadow:0 10px 34px rgba(60,68,120,.08)}.pay-modal-top{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;padding-bottom:20px;border-bottom:1.5px solid var(--border)}.pay-modal-top h2{font-size:34px;line-height:1.05;margin:6px 0 8px;font-weight:900;letter-spacing:-1px}.pay-modal-top p{max-width:650px;margin:0;color:var(--muted);font-weight:650}.pay-steps{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.pay-steps span{border:1.5px solid var(--border);background:#fff;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:900;color:var(--muted)}.pay-steps .done{background:#ecfdf3;color:#08763d;border-color:#b9efcf}.pay-steps .active{background:#fff7ed;color:#9a4b00;border-color:#ffd7a8}.pay-status-card{margin:20px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:22px;padding:18px 20px;background:linear-gradient(135deg,#f8faff,#fff);border:1.5px solid #dfe5ff}.pay-status-card.is-yellow{background:linear-gradient(135deg,#fff8e5,#ffffff);border-color:#ffd58a}.pay-status-card span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.7px;font-weight:900}.pay-status-card b{display:block;font-size:22px;letter-spacing:-.4px}.pay-status-card strong{font-size:28px;font-weight:900;white-space:nowrap}.pay-method-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.pay-method-tabs button{border:1.5px solid var(--border);border-radius:18px;background:#fff;padding:16px 14px;text-align:left;cursor:pointer;font:inherit;font-weight:900;color:var(--text);box-shadow:0 6px 22px rgba(60,68,120,.05);transition:.16s ease}.pay-method-tabs button small{display:block;color:var(--muted);font-size:12px;margin-top:3px;font-weight:800}.pay-method-tabs button.is-active{border-color:#ef1d25;background:#fff7f7;box-shadow:0 14px 32px rgba(239,29,37,.10);transform:translateY(-1px)}.pay-method-content{min-height:280px;overflow:hidden}.pay-slide{animation:paySlideIn .26s cubic-bezier(.2,.9,.2,1) both}@keyframes paySlideIn{from{opacity:0;transform:translateX(38px)}to{opacity:1;transform:translateX(0)}}.pay-instruction{border:1.5px solid var(--border);border-radius:24px;background:linear-gradient(180deg,#fff,#fbfcff);padding:22px}.pay-instruction-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}.pay-instruction-head h3{margin:0 0 4px;font-size:24px;font-weight:900;letter-spacing:-.5px}.pay-instruction-head p{margin:0;color:var(--muted);font-weight:650}.pay-icon{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;font-size:22px;font-weight:900;flex:0 0 auto}.pay-icon.green{background:#e8fff1;color:#0a8e42}.pay-icon.yellow{background:#fff3cd;color:#9a5b00}.pay-warning{border-radius:18px;padding:15px 16px;margin:12px 0 18px;font-weight:750;line-height:1.55}.green-soft{background:#ecfdf3;color:#096b38;border:1px solid #b9efcf}.yellow-soft{background:#fff8e5;color:#744400;border:1px solid #ffd58a}.pay-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.pay-detail-grid div{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:12px 12px}.pay-detail-grid span{grid-column:1/-1;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.65px;font-weight:900}.pay-detail-grid b{font-size:15px;overflow-wrap:anywhere}.pay-detail-grid button{border:0;background:#f1f3ff;color:#4255ff;border-radius:999px;padding:7px 10px;font-weight:900;cursor:pointer}.pay-big{width:100%;min-height:52px;font-size:16px}.manual-lock{border:1.5px solid #ffd0d0;background:#fff5f5;color:#8a1f1f;border-radius:18px;padding:16px 18px;font-weight:750}.manual-lock p{margin:6px 0 0;color:#8a1f1f}.pay-legal-note{margin-top:14px;padding:14px 16px;border-radius:18px;background:#f6f7fb;color:var(--muted);font-size:13px;font-weight:650;line-height:1.55}
.admin-payment-list{gap:14px}.admin-payment-card{border-left:6px solid #f3b23c}.admin-payment-card.is-paid{border-left-color:#13a45b}.admin-payment-card.is-expired{border-left-color:#a0a5b8;opacity:.78}.admin-payment-main{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.admin-payment-main h3{margin:8px 0 3px;font-size:22px;letter-spacing:-.4px}.admin-pay-badge{display:inline-flex;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:900;background:#fff3cd;color:#6b3d00}.admin-pay-badge.paid{background:#c8f5db;color:#0a4a22}.admin-pay-badge.expired{background:#eee;color:#555}.admin-payment-status{text-align:right}.admin-payment-status b{display:block;font-size:16px}.admin-payment-status span{display:block;color:var(--muted);font-size:12px;font-weight:900}.admin-payment-details{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0;color:var(--muted);font-size:13px}.admin-payment-details span{background:#f6f7fb;border:1px solid var(--border);border-radius:999px;padding:7px 10px}.badge-awaiting_verification,.badge-pending{background:#fff3cd;color:#6b3d00}.badge-paid{background:#c8f5db;color:#0a4a22}.badge-expired{background:#eee;color:#555}
@media(max-width:850px){.payment-modal{padding:0;align-items:stretch}.payment-modal-card{width:100%;height:100vh;max-height:none;border-radius:0}.payment-modal-close{right:16px;top:14px;width:48px;height:48px}.pay-overlay-shell{padding:22px 16px 30px}.pay-modal-top{display:block;padding-right:56px}.pay-modal-top h2{font-size:28px}.pay-steps{justify-content:flex-start;margin-top:14px}.pay-method-tabs{grid-template-columns:1fr}.pay-detail-grid{grid-template-columns:1fr}.pay-status-card{align-items:flex-start;flex-direction:column}.admin-payment-main{display:block}.admin-payment-status{text-align:left;margin-top:10px}}


/* v4 payment reservation fixes — pending slots and modal behavior */
.slot.pending-mine,
.slot.booked-pending,
.slot.mine.pending-mine{
  background:linear-gradient(135deg,#f59e0b,#d97706)!important;
  color:#fff!important;
  border-color:#b45309!important;
  box-shadow:0 8px 20px rgba(217,119,6,.24)!important;
  font-weight:900;
}
.slot.pending-mine::after,
.slot.booked-pending::after{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  background:#fff;
  border-radius:999px;
  margin-left:6px;
  vertical-align:middle;
  opacity:.95;
}
.slot.paid-mine,
.slot.mine.paid-mine,
.slot.booked-paid{
  background:linear-gradient(135deg,#23c26b,#16a34a)!important;
  color:#fff!important;
  border-color:#148a3d!important;
}
.payment-modal{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.payment-modal.hidden{display:none!important}
.payment-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(246,247,251,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.payment-modal-card{
  position:relative;
  z-index:1;
  width:min(1040px,100%);
  max-height:calc(100vh - 48px);
  overflow:auto;
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:28px;
  box-shadow:0 30px 90px rgba(20,30,70,.22);
  animation:payModalIn .28s cubic-bezier(.2,.85,.2,1);
}
@keyframes payModalIn{
  from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(8px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
.payment-modal-close{
  position:sticky;
  top:16px;
  margin:16px 16px -56px auto;
  z-index:5;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:#ef1d25;
  color:#fff;
  font-size:28px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(239,29,37,.28);
  display:flex;
  align-items:center;
  justify-content:center;
}
.payment-modal-close:hover{transform:rotate(8deg) scale(1.04)}
.pay-overlay-shell{padding:34px 34px 26px}
.pay-modal-top{padding-right:56px}
@media(max-width:760px){
  .payment-modal{padding:10px;align-items:flex-start}
  .payment-modal-card{max-height:calc(100vh - 20px);border-radius:22px}
  .pay-overlay-shell{padding:24px 16px 20px}
  .pay-modal-top{padding-right:0}
}

/* Payment overlay T&C checkbox row */
.pay-terms-row{display:flex;align-items:flex-start;gap:10px;padding:14px 0 4px;cursor:pointer;font-size:14px;line-height:1.5;color:var(--text)}
.pay-terms-row input[type=checkbox]{margin-top:2px;width:17px;height:17px;flex-shrink:0;accent-color:var(--accent,#ef1d25);cursor:pointer}
.pay-terms-row span{flex:1}
.pay-terms-row a{color:var(--accent,#ef1d25);font-weight:700;text-decoration:underline}

/* Pending-verification state — blue, calm, no action required from user */
.badge-pending-verify{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:linear-gradient(135deg,#e8f0fe,#f0f4ff);border:1.5px solid rgba(66,133,244,.35);color:#1a56cc;font-weight:900;font-size:12px;text-transform:uppercase;letter-spacing:.6px}
.badge-pending-verify::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#1a56cc;animation:verifyPulse 1.8s ease-in-out infinite}
@keyframes verifyPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.dash-countdown-verify{background:linear-gradient(135deg,#e8f0fe,#f0f4ff)!important;border-color:rgba(66,133,244,.35)!important;color:#1a56cc!important;animation:none!important;cursor:default}
.dash-countdown-verify strong{color:#1a56cc!important}

/* Inline mini-countdown inside next-lesson card for paid upcoming lessons */
.next-lesson-inline-countdown{display:inline-flex;align-items:center;gap:8px;margin:10px 0 4px;padding:7px 14px;border-radius:999px;background:linear-gradient(135deg,#d9fbe8,#f0fff7);border:1.5px solid rgba(19,164,91,.22);width:fit-content}
.nlc-label{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.7px;color:#0a8a46;line-height:1}
.nlc-time{font-size:14px;font-weight:900;letter-spacing:-.3px;color:#0d6b38;line-height:1}

/* Mini countdown pill inside paid lesson cards — sits between status badge and goal badge */
.lesson-card-countdown{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,#d9fbe8,#f0fff7);border:1.5px solid rgba(19,164,91,.25);vertical-align:middle;margin:0 4px 0 2px}
.lcc-label{font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;color:#0a8a46;line-height:1}
.lcc-time{font-size:11px;font-weight:900;letter-spacing:-.2px;color:#0d6b38;line-height:1}

/* Waiting room — locked sidebar elements */
.meet-tile-locked{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#f1f3f7;border:1.5px solid #dde1ec;color:#9aa0b8;cursor:not-allowed;font-weight:900;font-size:14px;opacity:.7;user-select:none}
.meet-tile-locked .meet-icon{font-size:18px}
.sidebar-locked-btn{width:100%;text-align:left;padding:10px 14px;border-radius:12px;background:#f1f3f7;border:1.5px solid #dde1ec;color:#9aa0b8;font-weight:900;font-size:14px;cursor:not-allowed;opacity:.7}

/* =========================================================
   v-ux-premium — polish & refinements
   ========================================================= */

/* Login hero — gradient overlay lets video breathe */
.login-blue-overlay{
  background:linear-gradient(to bottom,
    rgba(10,18,55,.52) 0%,
    rgba(10,18,55,.70) 55%,
    rgba(10,18,55,.88) 100%) !important;
}

/* Hero entrance animation */
.hero-card{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.hero-card.hero-in{opacity:1;transform:none}

/* Login panel — very subtle off-white tint for depth */
.login-panel{background:#fafbff!important}

/* Next-lesson card — accent left border for visual priority */
.next-lesson-card{border-left:3px solid var(--accent)!important;padding-left:21px!important}

/* Sidebar logout button — de-emphasised, destructive feel on hover */
.sidebar-bottom .btn-ghost{
  font-size:13px;
  color:var(--muted);
  border-color:transparent;
  padding:8px 14px;
}
.sidebar-bottom .btn-ghost:hover{
  color:var(--danger);
  background:transparent;
  border-color:transparent;
}

/* Teacher card keyboard focus */
.teacher-card:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius);
}

/* Payment pending — amber urgency signal */
.dash-countdown-pay{
  border-left:3px solid var(--warning)!important;
  background:#fffaeb!important;
}
.dash-countdown-pay .dash-pay-hint{
  font-size:12px;
  font-weight:700;
  color:var(--warning);
}

/* Manual payment expiry — blue calm countdown */
.dash-countdown-verify .dash-expiry-countdown{
  font-size:12px;
  font-weight:700;
  color:#1a56cc;
  margin-top:2px;
  display:block;
}

/* Summary total border-radius match */
.summary-total{border-radius:14px!important}

/* Summary card border 1.5px→1px */
.summary-card{border:1px solid #dfe3f5!important}
.chosen-box{border-width:1px!important}

/* learn-accordion border 1.5px→1px */
.learn-accordion{border-width:1px!important}

/* week-toolbar border 1.5px→1px */
.week-toolbar{border-width:1px!important}

/* login-card border 1.5px override */
.login-card.card{border-width:1px!important}

/* pill border 1.5px→1px */
.pill{border-width:1px!important}

/* auth-toggle border 1px — already set in v11 */

/* Mobile min-height for teacher cards */
@media(max-width:850px){
  .teacher-card{min-height:80px}
}

/* Mobile padding via CSS tokens — works with mobile-header.js class toggles */
:root{--mob-topbar-h:52px;--mob-topbar-expanded:110px}
@media(max-width:850px){
  .content,.booking-content{padding-top:var(--mob-topbar-expanded)}
  .layout.sb-header-collapsed .content,
  .layout.sb-header-collapsed .booking-content{padding-top:var(--mob-topbar-h)}
}

/* Locked sidebar: replace emoji lock feel with cleaner lock icon via CSS */
.meet-tile-locked .meet-icon,
.sidebar-locked-btn .lock-icon{
  font-size:14px;
  opacity:.7;
}

/* ── Cancel lesson confirmation popover ─────────────────────────── */
.cancel-confirm-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.48);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:cancelFadeIn .18s ease both}
@keyframes cancelFadeIn{from{opacity:0}to{opacity:1}}
.cancel-confirm-box{background:#fff;border:1.5px solid var(--border);border-radius:24px;box-shadow:0 28px 80px rgba(20,30,70,.22);padding:32px 28px 26px;max-width:420px;width:100%;text-align:center;animation:cancelBoxIn .22s cubic-bezier(.2,.9,.2,1) both}
@keyframes cancelBoxIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.cancel-confirm-icon{font-size:36px;line-height:1;margin-bottom:12px}
.cancel-confirm-title{font-size:20px;font-weight:900;letter-spacing:-.4px;margin:0 0 8px;color:var(--text)}
.cancel-confirm-sub{color:var(--muted);font-size:14px;margin:0 0 20px;line-height:1.55}
.cancel-confirm-reason-label{display:flex;gap:6px;align-items:baseline;justify-content:flex-start;font-size:13px;font-weight:700;margin-bottom:6px;text-align:left}
.cancel-reason-optional{font-weight:500;color:var(--muted);font-size:12px}
.cancel-confirm-textarea{resize:none;font-size:14px;margin-bottom:18px}
.cancel-confirm-actions{display:flex;gap:10px;justify-content:stretch}
.cancel-confirm-actions .btn{flex:1;min-height:44px}
.cancel-confirm-actions .btn-danger{box-shadow:0 8px 22px rgba(239,68,68,.22)}
@media(max-width:480px){.cancel-confirm-box{padding:24px 18px 20px;border-radius:20px}.cancel-confirm-actions{flex-direction:column-reverse}}