@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=LXGW+Marker+Gothic&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Syne:wght@400..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#f8f9fc;--bg2:#ffffff;--bg3:#f0f4ff;--card:#ffffff;
  --border:#e4e8f0;--border2:#c8d4f0;
  --text:#0d1117;--text2:#3d4a5c;--muted:#7a8799;
  --accent:#2563eb;--accent-h:#1d4ed8;
  --accent-soft:#eff6ff;--accent-soft2:#dbeafe;
  --success:#059669;--error:#dc2626;--error-soft:#fef2f2;--gold:#f59e0b;
  --shadow-sm:0 1px 3px rgba(37,99,235,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 16px rgba(37,99,235,.10),0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:0 20px 48px rgba(37,99,235,.14),0 8px 24px rgba(0,0,0,.08);
  --radius:12px;--radius2:20px;--pill:100px;
  --t:.22s cubic-bezier(.4,0,.2,1);--header-h:68px;
}

html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}

@keyframes fadeIn    {from{opacity:0}to{opacity:1}}
@keyframes slideUp   {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown {from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes scaleIn   {from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer   {0%,100%{opacity:.6}50%{opacity:1}}
@keyframes bounce    {0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-8px)}}
@keyframes spin      {to{transform:rotate(360deg)}}

.page{display:none}
.page.active{display:block;animation:fadeIn .28s ease}

/* ── HEADER ── */
.header{height:var(--header-h);background:rgba(255,255,255,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;display:flex;align-items:center;transition:background .3s,border-color .3s;}
.header-content{max-width:1200px;margin:0 auto;padding:0 2rem;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo-container{display:flex;align-items:center;gap:.625rem}
.logo-container img{width:100px;height:100px}
.header-nav{display:flex;align-items:center;gap:.75rem}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.375rem;border-radius:var(--pill);font-size:.9rem;font-weight:600;border:none;transition:all var(--t);letter-spacing:.01em;white-space:nowrap}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.btn-primary{background:rgb(36,36,36);color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.3)}
.btn-primary:hover:not(:disabled){background:rgb(87,87,87);transform:translateY(-1px);box-shadow:0 6px 20px rgba(55,56,57,.4)}
.btn-secondary{background:var(--bg);color:var(--accent);border:1.5px solid var(--accent)}
.btn-secondary:hover:not(:disabled){background:var(--accent-soft);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text2);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--text2);color:var(--text)}
.btn-danger{background:rgb(26,10,198);color:#fff;border:1px solid rgba(134,11,11,0.2)}
.btn-danger:hover{background:rgb(51,39,192);transform:translateY(-1px);box-shadow:0 4px 16px rgba(1,93,121,0.4)}
.btn-small{padding:.45rem .9rem;font-size:.8125rem}
.btn-lg{padding:.875rem 2rem;font-size:1rem;border-radius:var(--pill)}

/* ── CONTAINER ── */
.container{max-width:1200px;margin:0 auto;padding:0 2rem}

/* ── HERO ── */
.hero{min-height:calc(100vh - var(--header-h));display:flex;align-items:center;background:var(--bg);position:relative;overflow:hidden;padding:5rem 2rem}
.hero-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:shimmer 4s ease-in-out infinite}
.hero-blob-1{width:600px;height:600px;background:rgba(37,99,235,.09);top:-200px;right:-200px}
.hero-blob-2{width:400px;height:400px;background:rgba(245,158,11,.06);bottom:-100px;left:-100px}
.hero-inner{max-width:680px;margin:0 auto;text-align:center;position:relative;z-index:1;animation:slideUp .7s ease both}
.hero h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2.4rem,5.5vw,4rem);font-weight:700;color:var(--text);line-height:1.12;letter-spacing:-.03em;margin-bottom:1.25rem}
.hero h1 em{font-style:italic;font-weight:400;color:var(--accent)}
.hero p{font-size:1.1rem;color:var(--text2);line-height:1.8;margin-bottom:2.5rem;max-width:520px;margin-left:auto;margin-right:auto}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.social-proof{margin-top:3.5rem;display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.social-proof-item{font-size:.825rem;color:var(--muted);display:flex;align-items:center;gap:.375rem}
.social-proof-item strong{color:var(--text2);font-weight:600}

/* ── SECTIONS ── */
.section{padding:6rem 2rem}
.section-title{font-family:LXGW Marker Gothic,Georgia,serif;font-size:clamp(1.8rem,4vw,2.75rem);font-weight:700;color:var(--text);text-align:center;margin-bottom:.875rem;letter-spacing:-.03em}
.section-sub{text-align:center;color:var(--text2);font-size:1.05rem;margin-bottom:3.5rem;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.7}
.section-alt{background:var(--bg3)}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem}
.step-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:2rem;transition:all var(--t);position:relative;overflow:hidden}
.step-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),#60a5fa);transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.step-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--border2)}
.step-card:hover::after{transform:scaleX(1)}
.step-num{width:3rem;height:3rem;background:var(--accent-soft);border:1px solid var(--accent-soft2);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-family:'syne',serif;font-size:1.25rem;font-weight:700;color:var(--accent);margin-bottom:1.25rem}
.step-card h3{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:.5rem}
.step-card p{font-size:.9rem;color:var(--text2);line-height:1.7}
.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}
.feat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:2rem;transition:all var(--t)}
.feat-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--border2)}
.feat-icon{width:44px;height:44px;background:var(--accent-soft);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:1.125rem;border:1px solid var(--accent-soft2)}
.feat-icon img{width:100%;height:100%;object-fit:contain}
.feat-card h3{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:.5rem;font-family:syne}
.feat-card p{font-size:.9rem;color:var(--text2);line-height:1.7}

/* ── SUPPORT ── */
.support-section{background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:5rem 2rem}
.support-card{max-width:560px;margin:0 auto;text-align:center}
.support-card h2{font-family:LXGW Marker Gothic,Georgia,serif;font-size:2rem;font-weight:700;color:var(--text);margin-bottom:.875rem;letter-spacing:-.02em}
.support-card p{color:var(--text2);font-size:.975rem;line-height:1.8;margin-bottom:2rem}
.support-amounts{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.5rem}
.amount-btn{padding:.625rem 1.25rem;border-radius:var(--pill);border:1.5px solid var(--border);background:var(--card);color:var(--text2);font-size:.9rem;font-weight:600;transition:all var(--t);cursor:pointer}
.amount-btn:hover,.amount-btn.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.support-paypal-btn{display:inline-flex;align-items:center;gap:.625rem;background:#0070ba;color:#fff;border:none;border-radius:var(--pill);padding:.875rem 2rem;font-size:1rem;font-weight:700;cursor:pointer;transition:all var(--t);font-family:inherit;box-shadow:0 4px 16px rgba(0,112,186,.3)}
.support-paypal-btn:hover{background:#005ea6;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,112,186,.4)}
.paypal-logo{font-size:.8rem;font-weight:900;letter-spacing:-.01em}
.paypal-logo .pp-pay{color:#fff}
.paypal-logo .pp-pal{color:#80c8ff}
.support-note{font-size:.78rem;color:var(--muted);margin-top:1rem}

/* ── FOOTER ── */
.footer{background:var(--bg2);border-top:1px solid var(--border);padding:2.5rem 2rem;text-align:center}
.footer p{font-size:.85rem;color:var(--muted);line-height:1.7}
.footer a{color:var(--accent);font-weight:500}

/* ── AUTH ── */
.auth-wrap{min-height:calc(100vh - var(--header-h));display:flex;align-items:center;justify-content:center;padding:3rem 1.5rem;background:var(--bg);position:relative;overflow:hidden}
.auth-wrap::before{content:'';position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.07) 0%,transparent 70%);top:-200px;right:-200px;pointer-events:none}
.auth-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:2.75rem 2.5rem;width:100%;max-width:440px;box-shadow:var(--shadow-lg);animation:scaleIn .32s ease;position:relative;z-index:1}
.auth-title{font-family:'syne',Georgia,serif;font-size:1.75rem;font-weight:700;color:var(--text);text-align:center;margin-bottom:.5rem;letter-spacing:-.025em}
.auth-sub{text-align:center;font-size:.9rem;color:var(--muted);margin-bottom:2rem}
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:.78rem;font-weight:700;color:var(--text2);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.07em}
.form-input,.form-textarea,.form-select{width:100%;padding:.75rem 1rem;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius);font-size:.9375rem;color:var(--text);outline:none;transition:all var(--t)}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12);background:var(--bg2)}
.form-input::placeholder{color:var(--muted)}
.form-textarea{resize:vertical;min-height:110px}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%237a8799' d='M7 9.5L1.5 4h11z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.5rem}
.form-hint{font-size:.78rem;color:var(--muted);margin-top:.375rem}
.form-actions{display:flex;gap:.75rem;margin-top:1.75rem}
.form-actions .btn{flex:1}
.pwd-wrap{position:relative}
.pwd-toggle{position:absolute;right:.875rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer;font-size:.85rem;font-weight:600;padding:0;transition:color var(--t)}
.pwd-toggle:hover{color:var(--accent)}
.alert{padding:.875rem 1rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;margin-bottom:1.25rem;display:flex;align-items:flex-start;gap:.625rem;animation:slideUp .25s ease;line-height:1.5}
.alert-error{background:var(--error-soft);border:1px solid rgba(220,38,38,.18);color:var(--error)}
.alert-success{background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.2);color:var(--success)}
.alert-icon{font-size:1rem;flex-shrink:0;margin-top:.1rem}
.toggle-auth{text-align:center;margin-top:1.5rem;font-size:.875rem;color:var(--muted)}
.toggle-auth button{background:none;border:none;color:var(--accent);cursor:pointer;font-weight:600;font-size:.875rem;font-family:inherit;transition:color var(--t);padding:0}
.toggle-auth button:hover{color:var(--accent-h);text-decoration:underline}

/* ── AUTH SPLIT LAYOUT (login.html) ── */
.auth-full{display:flex;min-height:100vh}
.auth-left{width:480px;flex-shrink:0;background:linear-gradient(160deg,#0d1117 0%,#1a2744 60%,#0f1f3d 100%);padding:3rem;display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-left::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.18) 0%,transparent 70%);top:-150px;right:-150px;pointer-events:none}
.auth-left::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(96,165,250,.1) 0%,transparent 70%);bottom:-100px;left:-100px;pointer-events:none}
.auth-left-inner{display:flex;flex-direction:column;height:100%;position:relative;z-index:1}
.auth-brand{display:flex;align-items:center;gap:.75rem;font-family:'syne',serif;font-size:1.375rem;font-weight:700;color:#fff;text-decoration:none;margin-bottom:auto}
.auth-left-content{padding:3rem 0}
.auth-left-title{font-family:'syne',serif;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:#fff;line-height:1.15;letter-spacing:-.03em;margin-bottom:1rem}
.auth-left-sub{font-size:.9375rem;color:rgba(255,255,255,.5);line-height:1.75;font-weight:500;margin-bottom:2rem;max-width:340px}
.auth-left-feats{display:flex;flex-direction:column;gap:.875rem}
.auth-feat{display:flex;align-items:center;gap:.875rem;font-size:.875rem;color:rgba(255,255,255,.75);font-weight:500}
.auth-feat-icon{width:22px;height:22px;border-radius:50%;background:rgba(37,99,235,.3);border:1px solid rgba(37,99,235,.5);color:#93c5fd;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.auth-left-footer{font-size:.75rem;color:rgba(255,255,255,.25);font-weight:500;margin-top:auto}
.auth-right{flex:1;background:var(--bg);display:flex;flex-direction:column;min-height:100vh;overflow-y:auto}
.auth-right-header{padding:1.25rem 2rem;display:flex;justify-content:flex-end;border-bottom:1px solid var(--border)}
.auth-right-inner{flex:1;display:flex;flex-direction:column;justify-content:center;padding:3rem;max-width:480px;width:100%;margin:0 auto}
.social-btns{display:flex;flex-direction:column;gap:.625rem;margin-bottom:1.25rem}
.social-btn{width:100%;padding:.75rem 1.125rem;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--text);font-size:.875rem;font-weight:600;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.75rem;transition:all var(--t)}
.social-btn:hover{border-color:var(--border2);background:var(--bg3);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.auth-or{display:flex;align-items:center;gap:.875rem;color:var(--muted);font-size:.8rem;font-weight:600;margin:1.25rem 0;text-transform:uppercase;letter-spacing:.06em}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--border)}
.auth-right-inner .auth-title{font-size:1.875rem;margin-bottom:.375rem;text-align:left}
.auth-right-inner .auth-sub{text-align:left;margin-bottom:1.75rem}
@media(max-width:900px){.auth-left{width:380px;padding:2.5rem}.auth-right-inner{padding:2rem}}
@media(max-width:700px){.auth-full{flex-direction:column}.auth-left{width:100%;min-height:auto;padding:2rem 1.5rem}.auth-left-content{padding:1.5rem 0}.auth-left-title{font-size:1.625rem}.auth-left-sub,.auth-left-feats{display:none}.auth-right{min-height:auto}.auth-right-inner{padding:2rem 1.5rem;max-width:100%}.auth-right-inner .auth-title{font-size:1.5rem}}

/* ── DASHBOARD ── */
.dash-hero{background:linear-gradient(135deg,#0d1117 0%,#1a2744 100%);padding:2.5rem 2rem;color:#fff;border-bottom:1px solid var(--border)}
.dash-hero-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.dash-hero h1{font-family:'syne',serif;font-size:1.875rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.25rem;color:#fff}
.dash-hero p{font-size:.9rem;color:rgba(255,255,255,.5);font-weight:500}
.dash-stats{display:flex;gap:2rem;flex-wrap:wrap}
.dash-stat{text-align:center}
.dash-stat-val{font-family:'syne',serif;font-size:2rem;font-weight:700;display:block;line-height:1;color:#fff}
.dash-stat-lbl{font-size:.72rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.dash-body{max-width:1200px;margin:0 auto;padding:2rem}
.dash-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.dash-toolbar h2{font-family:'syne',serif;font-size:1.25rem;font-weight:700;letter-spacing:-.025em;color:var(--text)}
.mentor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem}
.mentor-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:1.625rem;transition:all var(--t);display:flex;flex-direction:column;gap:.75rem;animation:slideUp .35s ease both;position:relative;overflow:hidden}
.mentor-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-h));opacity:0;transition:opacity var(--t)}
.mentor-card:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateY(-3px)}
.mentor-card:hover::before{opacity:1}
.mentor-card-top{display:flex;align-items:flex-start;gap:1rem}
.mentor-avatar{width:44px;height:44px;border-radius:var(--radius);background:var(--accent-soft);border:1.5px solid var(--accent-soft2);display:flex;align-items:center;justify-content:center;font-family:'syne',serif;font-size:1.125rem;font-weight:700;color:var(--accent);flex-shrink:0;overflow:hidden}
.mentor-avatar img{width:100%;height:100%;object-fit:cover}
.mentor-info{flex:1;min-width:0}
.mentor-name{font-weight:700;font-size:1.025rem;color:var(--text);line-height:1.3;font-family:LXGW Marker Gothic}
.mentor-tone{display:inline-block;background:rgb(87,87,87);color:#fff;border:1px solid var(--accent-soft2);border-radius:var(--pill);font-size:.72rem;font-weight:700;padding:.1rem .625rem;text-transform:capitalize;letter-spacing:.03em;margin-top:.10rem;font-family:lato}
.mentor-desc{font-size:.875rem;color:var(--text2);line-height:1.65;flex:1;font-family:syne}
.mentor-actions{display:flex;gap:.625rem;padding-top:.25rem}
.mentor-actions .btn{flex:1;font-size:.8125rem;padding:.5rem .875rem}
.empty-state{text-align:center;padding:5rem 2rem;color:var(--muted);animation:slideUp .4s ease}
.empty-state-icon{font-size:3rem;display:block;margin-bottom:1rem;opacity:.35}
.empty-state p{font-size:.975rem;line-height:1.7;max-width:320px;margin:0 auto}
.empty-state .btn{margin-top:1.5rem}

/* ── CREATE PAGE ── */
.create-wrap{max-width:640px;margin:0 auto;padding:3rem 2rem 5rem;animation:slideUp .35s ease}
.create-wrap .page-title{font-family:'syne',Georgia,serif;font-size:2rem;font-weight:700;color:var(--text);letter-spacing:-.03em;margin-bottom:.375rem}
.create-wrap .page-sub{font-size:.9rem;color:var(--muted);margin-bottom:2.5rem}

/* ── AVATAR PICKER ── */
.avatar-picker{display:flex;flex-direction:column;gap:1rem}
.avatar-preview{display:flex;align-items:center;gap:1rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius2);padding:1rem 1.25rem}
.avatar-preview-img{width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--border2);background:var(--card);display:flex;align-items:center;justify-content:center}
.avatar-preview-img img{width:100%;height:100%;object-fit:cover}
.avatar-preview-initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'syne',serif;font-size:1.5rem;font-weight:700;color:var(--accent);background:var(--accent-soft)}
.avatar-preview-info{display:flex;flex-direction:column;gap:.25rem}
.avatar-preview-name{font-size:.9rem;font-weight:700;color:var(--text)}
.avatar-preview-hint{font-size:.78rem;color:var(--muted)}
.avatar-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.625rem}
@media(max-width:600px){.avatar-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:380px){.avatar-grid{grid-template-columns:repeat(3,1fr)}}
.avatar-opt{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2.5px solid var(--border);background:var(--card);cursor:pointer;transition:all var(--t);padding:0;display:flex;align-items:center;justify-content:center}
.avatar-opt img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-opt:hover{border-color:var(--accent);transform:scale(1.06);box-shadow:0 4px 12px rgba(37,99,235,.2)}
.avatar-opt.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.avatar-locked{opacity:.75}
.avatar-locked::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35);border-radius:50%}
.avatar-lock-badge{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:8px;font-weight:800;padding:1px 5px;border-radius:100px;letter-spacing:.06em;z-index:2;white-space:nowrap}
.av-fallback{font-size:11px;font-weight:700;color:var(--muted)}

/* ════════════════════════════════════
   CHAT PAGE — clean modern style
════════════════════════════════════ */
.chat-page{
  display:flex;flex-direction:column;height:100vh;overflow:hidden;
  background:#f0f4ff;
}

/* ── Topbar ── */
.chat-topbar{
  background:#fff;
  border-bottom:1px solid #e8ecf4;
  padding:0 1.25rem;
  height:64px;
  display:flex;align-items:center;gap:.875rem;
  flex-shrink:0;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
  z-index:10;
}

.chat-back{
  width:36px;height:36px;border-radius:50%;
  background:none;border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;color:#555;
  transition:all var(--t);flex-shrink:0;cursor:pointer;
}
.chat-back:hover{background:#f0f4ff;color:#2563eb;}

.chat-mentor-info{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0;}

.chat-mentor-avatar{
  width:42px;height:42px;border-radius:50%;
  overflow:hidden;flex-shrink:0;
  background:var(--accent-soft);
  border:2px solid var(--accent-soft2);
  display:flex;align-items:center;justify-content:center;
  font-family:'syne',serif;font-size:1rem;font-weight:700;color:var(--accent);
}
.chat-mentor-avatar img{width:100%;height:100%;object-fit:cover;}

.chat-mentor-text{min-width:0;flex:1;}
.chat-mentor-name{
  font-weight:700;font-size:.9375rem;
  color:#0d1117;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat-mentor-status{
  font-size:.72rem;color:#2563eb;
  display:flex;align-items:center;gap:.3rem;
  font-weight:600;margin-top:2px;
}
.chat-status-dot{
  width:6px;height:6px;border-radius:50%;
  background:#22c55e;
  animation:shimmer 1.5s ease infinite;
}
.chat-topbar-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0;}
.theme-btn{display:none;} /* dark mode removed */

/* ── Messages area ── */
.messages-area{
  flex:1;overflow-y:auto;
  padding:1.5rem 1.25rem;
  display:flex;flex-direction:column;gap:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.15) transparent;
  background:#f0f4ff;
}
.messages-area::-webkit-scrollbar{width:4px;}
.messages-area::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:4px;}

/* ── Date divider ── */
.chat-date-divider{
  display:flex;align-items:center;justify-content:center;
  margin:1rem 0 1.25rem;
}
.chat-date-divider span{
  background:rgba(255,255,255,.9);
  color:#7a8799;
  font-size:.72rem;font-weight:600;
  padding:5px 14px;border-radius:99px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  letter-spacing:.03em;border:1px solid #e4e8f0;
}

/* ── Message rows ── */
.msg-row{
  display:flex;
  flex-direction:column;
  max-width:100%;
  padding:0;
  margin-bottom:1.25rem;
  animation:msgIn .18s ease both;
}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.msg-row.user{align-items:flex-end;}
.msg-row.assistant{align-items:flex-start;}

/* ── Sender header: avatar + name + time ── */
.msg-header{
  display:flex;align-items:center;gap:.5rem;
  margin-bottom:.375rem;
  padding:0 .25rem;
}
.msg-row.user .msg-header{flex-direction:row-reverse;}

.msg-av{
  width:32px;height:32px;border-radius:50%;
  flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;
}
.msg-av.ai{background:var(--accent-soft);border:1.5px solid var(--accent-soft2);color:var(--accent);}
.msg-av.ai img{width:100%;height:100%;object-fit:cover;}
.msg-av.user{display:none;} /* hide user avatar */

.msg-sender-name{
  font-size:.72rem;font-weight:700;
  color:#5a6a7a;letter-spacing:.01em;
}
/* hide user name — only show AI name */
.msg-row.user .msg-sender-name{display:none;}

.msg-sender-time{
  font-size:.68rem;color:#9aa5bb;font-weight:500;
}

/* ── Bubble group ── */
.msg-group{
  display:flex;flex-direction:column;
  gap:3px;
  max-width:72%;
}
@media(max-width:500px){.msg-group{max-width:90%;}}

/* ── Bubble ── */
.msg-bubble{
  padding:.75rem 1rem;
  border-radius:18px;
  font-size:.9rem;
  line-height:1.6;
  word-break:break-word;
  position:relative;
}

/* AI bubble — white card */
.msg-row.assistant .msg-bubble{
  background:#fff;
  color:#1a2233;
  border-radius:4px 18px 18px 18px;
  box-shadow:0 1px 3px rgba(0,0,0,.07);
  border:1px solid #e8ecf4;
}

/* User bubble — blue */
.msg-row.user .msg-bubble{
  background:#2563eb;
  color:#fff;
  border-radius:18px 4px 18px 18px;
  box-shadow:0 2px 8px rgba(37,99,235,.25);
}

/* remove old pseudo tails */
.msg-row.user .msg-bubble::after{display:none;}
.msg-row.assistant .msg-bubble::before{display:none;}

/* ── Time + tick — shown OUTSIDE bubble on user side ── */
.msg-meta{
  display:flex;align-items:center;gap:4px;
  margin-top:4px;
  font-size:.68rem;
  line-height:1;
  padding:0 .25rem;
}
.msg-row.user .msg-meta{
  justify-content:flex-end;
  color:#9aa5bb;
}
.msg-row.assistant .msg-meta{
  justify-content:flex-start;
  color:#9aa5bb;
}
.msg-tick{font-size:.68rem;color:#2563eb;letter-spacing:-1px;}

/* ── Typing indicator ── */
.typing-row{
  display:flex;flex-direction:column;align-items:flex-start;
  margin-bottom:1.25rem;
  animation:msgIn .18s ease both;
}
.typing-bubble{
  background:#fff;border:1px solid #e8ecf4;
  border-radius:4px 18px 18px 18px;
  padding:.75rem 1.125rem;
  display:flex;gap:5px;align-items:center;
  box-shadow:0 1px 3px rgba(0,0,0,.07);
}
.typing-dot{
  width:7px;height:7px;border-radius:50%;
  background:#9aa5bb;
  animation:typingBounce 1.4s ease infinite;
}
.typing-dot:nth-child(2){animation-delay:.2s;}
.typing-dot:nth-child(3){animation-delay:.4s;}
@keyframes typingBounce{
  0%,60%,100%{transform:translateY(0);opacity:.5}
  30%{transform:translateY(-5px);opacity:1}
}

/* ── Empty chat ── */
.empty-chat{
  text-align:center;padding:3rem 1rem;margin:auto;
  display:flex;flex-direction:column;align-items:center;gap:.875rem;
}
.empty-chat-card{
  background:#fff;border-radius:20px;padding:2rem;
  box-shadow:0 2px 12px rgba(0,0,0,.08);border:1px solid #e8ecf4;
  max-width:280px;
}
.empty-chat-av{
  width:64px;height:64px;border-radius:50%;
  margin:0 auto 1rem;overflow:hidden;
  background:var(--accent-soft);border:2px solid var(--accent-soft2);
  display:flex;align-items:center;justify-content:center;
  font-family:'syne',serif;font-size:1.75rem;font-weight:700;color:var(--accent);
}
.empty-chat-av img{width:100%;height:100%;object-fit:cover;}
.empty-chat-name{font-weight:700;font-size:1rem;color:#0d1117;margin-bottom:.25rem;}
.empty-chat-hint{font-size:.8rem;color:#7a8799;line-height:1.6;}

/* ── Input bar ── */
.chat-input-bar{
  background:#fff;
  border-top:1px solid #e8ecf4;
  padding:.875rem 1.25rem;
  display:flex;align-items:flex-end;gap:.75rem;
  flex-shrink:0;
  box-shadow:0 -1px 4px rgba(0,0,0,.04);
}

.chat-input-wrap{
  flex:1;
  background:#f0f4ff;
  border:1.5px solid #e4e8f0;
  border-radius:24px;
  padding:.625rem 1.125rem;
  display:flex;align-items:center;
  transition:all var(--t);
  min-height:44px;
}
.chat-input-wrap:focus-within{border-color:#93c5fd;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.08);}

.chat-input{
  flex:1;border:none;background:transparent;
  font-size:.9375rem;color:#0d1117;outline:none;
  font-family:inherit;padding:0;resize:none;
  line-height:1.5;max-height:120px;overflow-y:auto;
}
.chat-input::placeholder{color:#9aa5bb;}

.send-btn{
  width:44px;height:44px;border-radius:50%;
  background:#2563eb;border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--t);flex-shrink:0;
  box-shadow:0 2px 8px rgba(37,99,235,.35);
}
.send-btn:hover:not(:disabled){background:#1d4ed8;transform:scale(1.06);box-shadow:0 4px 14px rgba(37,99,235,.45);}
.send-btn:disabled{opacity:.35;transform:none;box-shadow:none;background:#9aa5bb;}

/* ── PROFILE ── */
.profile-page{min-height:100vh;background:var(--bg)}
.profile-hero{background:radial-gradient(circle at top,#1a2a4a 0%,#0d1117 70%);padding:3rem 2rem 5rem;position:relative;overflow:hidden}
.profile-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(37,99,235,.25),transparent 50%);opacity:.6}
.profile-hero-inner{max-width:1050px;margin:0 auto;display:flex;align-items:center;gap:1.25rem;position:relative;z-index:2}
.profile-hero-av{width:86px;height:86px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.15);background:var(--card);box-shadow:0 10px 30px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-family:'syne',serif;font-size:2rem;font-weight:700;color:var(--accent);flex-shrink:0}
.profile-hero-av img{width:100%;height:100%;object-fit:cover}
.profile-hero-name{font-size:1.7rem;font-weight:700;color:#fff;letter-spacing:-.02em;margin-bottom:-9px}
.profile-hero-email{font-size:.85rem;color:rgba(255,255,255,.6)}
.profile-hero-badge{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid rgba(0,0,0,.4);border-radius:var(--pill);padding:4px 14px;font-size:.72rem;font-weight:700;color:rgb(26,10,198);letter-spacing:.07em;text-transform:uppercase;margin-top:.5rem}
.profile-hero-badge.premium{background:rgba(245,158,11,.2);border-color:rgba(245,158,11,.35);color:#fcd34d}
.profile-hero-dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.profile-tabs-wrap{max-width:1050px;margin:-2rem auto 0;padding:0 2rem;position:relative;z-index:5}
.profile-tabs{display:flex;gap:.4rem;padding:.4rem;border-radius:999px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.ptab-btn{flex:1;padding:.6rem 1rem;border-radius:999px;border:none;background:transparent;font-weight:600;font-size:.85rem;color:var(--muted);cursor:pointer;transition:var(--t);white-space:nowrap;font-family:syne}
.ptab-btn:hover{background:var(--bg3);color:var(--text)}
.ptab-btn.active{background:rgb(26,10,198);color:#fff}
.profile-body{max-width:1050px;margin:0 auto;padding:2rem 2rem 4rem}
.ptab-content{display:none;gap:1.25rem;flex-direction:column}
.ptab-content.active{display:flex;animation:fadeIn .25s ease}
.psection-title{font-family:'syne',serif;font-size:1.25rem;font-weight:700;color:var(--text);letter-spacing:-.02em;margin-bottom:.125rem}
.psection-sub{font-size:.85rem;color:var(--muted);font-weight:500}
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:640px){.pstats{grid-template-columns:repeat(2,1fr)}}
.pstat{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:1.25rem;text-align:center;transition:all var(--t);position:relative;overflow:hidden}
.pstat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-h));transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.pstat:hover{border-color:var(--border2);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.pstat:hover::before{transform:scaleX(1)}
.pstat-val{font-family:'syne',serif;font-size:2.25rem;font-weight:700;color:#000;line-height:1;margin-bottom:.375rem;display:block}
.pstat-lbl{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.pcard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);overflow:hidden;transition:var(--t)}
.pcard:hover{border-color:var(--border2);box-shadow:var(--shadow-sm)}
.pcard-head{padding:1rem 1.25rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem}
.pcard-title{font-size:1rem;font-weight:700;font-family:'syne',serif;color:var(--text)}
.pcard-body{padding:1.25rem}
.pcard-danger{border-color:rgba(220,38,38,.2)}
.usage-track{height:8px;background:var(--bg3);border-radius:999px;overflow:hidden}
.usage-fill{height:100%;background:linear-gradient(90deg,var(--accent),#60a5fa);border-radius:999px;transition:width .5s ease}
.usage-fill.warn{background:linear-gradient(90deg,var(--gold),#fbbf24)}
.usage-fill.full{background:linear-gradient(90deg,var(--error),#f87171)}
.usage-hint{font-size:.75rem;color:var(--muted);margin-top:.5rem;font-weight:500}
.usage-nums{font-size:.8rem;font-weight:700;color:var(--muted)}
.usage-nums strong{color:var(--text)}
.pmrow{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);transition:all var(--t);cursor:pointer}
.pmrow:hover{transform:translateX(4px);background:var(--accent-soft);border-color:var(--accent-soft2)}
.pmrow-av{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);border:1.5px solid var(--accent-soft2);display:flex;align-items:center;justify-content:center;font-family:'syne',serif;font-size:.9rem;font-weight:700;color:var(--accent);flex-shrink:0;overflow:hidden}
.pmrow-av img{width:100%;height:100%;object-fit:cover}
.pmrow-info{flex:1;min-width:0}
.pmrow-name{font-weight:700;font-size:.875rem;color:var(--text)}
.pmrow-tone{font-size:.72rem;color:var(--muted);font-weight:600;text-transform:capitalize;margin-top:1px}
.pmrow-cta{font-size:.75rem;font-weight:700;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-soft2);border-radius:var(--pill);padding:5px 14px;white-space:nowrap;cursor:pointer;transition:all var(--t);font-family:inherit}
.pmrow-cta:hover{background:var(--accent-soft2)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:700px){.plans{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:1.625rem;transition:all var(--t);display:flex;flex-direction:column;position:relative}
.plan:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateY(-2px)}
.plan.featured{border-color:var(--accent);box-shadow:0 4px 24px rgba(37,99,235,.12)}
.plan-pop{position:absolute;top:-1px;right:1.25rem;background:rgb(26,10,198);color:#fff;font-size:.66rem;font-weight:800;padding:4px 12px;border-radius:0 0 10px 10px;letter-spacing:.07em;text-transform:uppercase}
.plan-tier{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}
.plan-amount{font-family:'syne',serif;font-size:2.5rem;font-weight:700;color:var(--text);line-height:1;letter-spacing:-.03em;margin-bottom:.25rem}
.plan-amount span{font-size:1rem;color:var(--muted);font-weight:500;letter-spacing:0}
.plan-save{font-size:.75rem;color:var(--success);font-weight:700;margin-bottom:1rem}
.plan-feats{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.375rem;flex:1}
.plan-feats li{font-size:.8375rem;color:var(--text2);padding-left:1.25rem;position:relative;line-height:1.5;font-weight:500}
.plan-feats li::before{content:'';position:absolute;left:0;top:.4rem;width:6px;height:6px;border-radius:50%;background:var(--success)}
.plan-current-tag{text-align:center;font-size:.8rem;font-weight:700;color:var(--muted);padding:10px;border-radius:var(--pill);border:1.5px solid var(--border);margin-top:auto}
.btn-outline{border:1px solid var(--border2);background:transparent;color:var(--text);border-radius:999px;padding:.7rem 1.25rem;font-weight:700;cursor:pointer;transition:var(--t);font-family:inherit}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-del{background:rgba(220,38,38,.07);color:var(--error);border:1px solid rgba(220,38,38,.2);border-radius:var(--pill);padding:10px 20px;font-size:.8125rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all var(--t)}
.btn-del:hover{background:rgba(220,38,38,.14)}
.palert{padding:.875rem 1rem;border-radius:var(--radius);font-size:.875rem;font-weight:600;display:flex;align-items:center;gap:.5rem;animation:slideUp .2s ease;line-height:1.5;margin-bottom:1rem}
.palert.ok{background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.2);color:var(--success)}
.palert.err{background:var(--error-soft);border:1px solid rgba(220,38,38,.18);color:var(--error)}
.plan-current-block{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.plan-current-name-big{font-family:'syne',serif;font-size:1.75rem;font-weight:700;color:var(--text);letter-spacing:-.02em}
.plan-current-detail{font-size:.875rem;color:var(--muted);margin-top:.25rem}
.plan-expiry-badge{display:inline-block;background:rgba(5,150,105,.1);color:var(--success);border:1px solid rgba(5,150,105,.2);border-radius:var(--pill);font-size:.75rem;font-weight:700;padding:4px 12px}

/* ══════════════════════════════════════
   PRICING SECTION
══════════════════════════════════════ */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;align-items:start;margin-bottom:2rem}
@media(max-width:768px){.pricing-grid{grid-template-columns:1fr}}
.pricing-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:2rem;display:flex;flex-direction:column;position:relative;transition:all var(--t)}
.pricing-card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:var(--border2)}
.pricing-card-featured{border-color:var(--accent);box-shadow:0 4px 32px rgba(37,99,235,.14);transform:scale(1.02)}
.pricing-card-featured:hover{transform:scale(1.02) translateY(-3px)}
.pricing-card-accent{background:linear-gradient(160deg,var(--bg) 0%,var(--bg3) 100%);border-color:var(--border2)}
[data-theme="dark"] .pricing-card-accent{background:linear-gradient(160deg,var(--card) 0%,var(--bg3) 100%)}
.pricing-pop{position:absolute;top:-1px;right:1.5rem;background:var(--accent);color:#fff;font-size:.68rem;font-weight:800;padding:4px 14px;border-radius:0 0 12px 12px;letter-spacing:.07em;text-transform:uppercase}
.pricing-tier{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.625rem}
.pricing-card-featured .pricing-tier{color:var(--accent)}
.pricing-amount{font-family:'syne',serif;font-size:3rem;font-weight:700;color:var(--text);line-height:1;letter-spacing:-.04em;margin-bottom:.25rem}
.pricing-amount span{font-size:1.1rem;color:var(--muted);font-weight:500;letter-spacing:0}
.pricing-save{display:inline-block;background:rgba(5,150,105,.1);color:var(--success);border:1px solid rgba(5,150,105,.2);border-radius:var(--pill);font-size:.72rem;font-weight:700;padding:3px 10px;margin-bottom:.875rem}
.pricing-desc{font-size:.875rem;color:var(--muted);line-height:1.65;margin-bottom:1.375rem;font-weight:500}
.pricing-feats{list-style:none;display:flex;flex-direction:column;gap:.625rem;margin-bottom:1.75rem;flex:1}
.pricing-feats li{display:flex;align-items:center;gap:.75rem;font-size:.875rem;color:var(--text2);font-weight:500;line-height:1.4}
.pricing-feats li::before{content:'✓';width:18px;height:18px;border-radius:50%;background:rgba(5,150,105,.1);color:var(--success);font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pricing-btn{width:100%;padding:.875rem;margin-top:auto;font-size:.9rem}
.pricing-note{text-align:center;font-size:.8rem;color:var(--muted);font-weight:500;line-height:1.6}

/* ══════════════════════════════════════
   OTP BOXES
══════════════════════════════════════ */
.otp-box{width:48px;height:56px;text-align:center;font-size:1.5rem;font-weight:700;padding:0;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--bg);color:var(--text);outline:none;transition:all var(--t)}
.otp-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12);background:var(--bg2)}

/* ══════════════════════════════════════
   PUSH NOTIFICATION BANNER
══════════════════════════════════════ */
.notif-prompt{
  position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);
  padding:1rem 1.25rem;box-shadow:var(--shadow-lg);
  display:flex;align-items:center;gap:1rem;
  max-width:420px;width:calc(100% - 2rem);
  z-index:9999;animation:slideUp .35s ease;
}
.notif-prompt-icon{font-size:1.75rem;flex-shrink:0}
.notif-prompt-text{flex:1;min-width:0}
.notif-prompt-title{font-weight:700;font-size:.9rem;color:var(--text);margin-bottom:.2rem}
.notif-prompt-sub{font-size:.78rem;color:var(--muted);line-height:1.5}
.notif-prompt-actions{display:flex;gap:.5rem;flex-shrink:0}
.notif-prompt-actions .btn{padding:.45rem .875rem;font-size:.78rem}

/* ══════════════════════════════════════
   CHECKUP NOTIFICATION TOAST
══════════════════════════════════════ */
.checkup-toast{
  position:fixed;top:1.25rem;right:1.25rem;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);
  padding:1rem 1.125rem;box-shadow:var(--shadow-lg);
  display:flex;align-items:flex-start;gap:.875rem;
  max-width:340px;width:calc(100% - 2rem);
  z-index:9999;animation:slideDown .35s ease;
  cursor:pointer;transition:box-shadow var(--t);
}
.checkup-toast:hover{box-shadow:var(--shadow-lg);border-color:var(--border2)}
.checkup-toast-av{
  width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:var(--accent-soft);border:1.5px solid var(--accent-soft2);
  display:flex;align-items:center;justify-content:center;
  font-family:'syne',serif;font-weight:700;color:var(--accent);font-size:.9rem;
}
.checkup-toast-av img{width:100%;height:100%;object-fit:cover}
.checkup-toast-body{flex:1;min-width:0}
.checkup-toast-name{font-weight:700;font-size:.825rem;color:var(--text);margin-bottom:.2rem}
.checkup-toast-msg{font-size:.8rem;color:var(--text2);line-height:1.5;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.checkup-toast-time{font-size:.68rem;color:var(--muted);margin-top:.3rem}
.checkup-toast-close{
  background:none;border:none;color:var(--muted);font-size:1rem;
  cursor:pointer;padding:0;flex-shrink:0;line-height:1;
  transition:color var(--t);
}
.checkup-toast-close:hover{color:var(--text)}
.checkup-dot{
  position:absolute;top:-4px;right:-4px;
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);border:2px solid var(--card);
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .hero{padding:3.5rem 1.25rem;min-height:auto}
  .hero h1{font-size:2.1rem}
  .section{padding:4rem 1.25rem}
  .container,.dash-body{padding-left:1.25rem;padding-right:1.25rem}
  .header-content{padding:0 1.25rem}
  .hero-ctas{flex-direction:column;align-items:center}
  .mentor-grid{grid-template-columns:1fr}
  .steps-grid,.feat-grid{grid-template-columns:1fr}
  .dash-stats{display:none}
  .create-wrap{padding:2rem 1.25rem 4rem}
  .social-proof{gap:1rem}
  .profile-hero{padding:2rem 1.25rem 3.5rem}
  .profile-tabs-wrap{padding:0 1.25rem}
  .profile-body{padding:1.25rem 1.25rem 3rem}
  .profile-tabs{overflow-x:auto;scrollbar-width:none}
  .profile-tabs::-webkit-scrollbar{display:none}
  .ptab-btn{font-size:.75rem;padding:.5rem .75rem}
  .pricing-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .hero h1{font-size:1.75rem}
  .section-title{font-size:1.6rem}
}
/* ═══════════════════════════════════════════════════════
   Blobe AI — main.css (Full Responsive)
   Breakpoints: 480 | 640 | 768 | 900 | 1024
═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=LXGW+Marker+Gothic&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Syne:wght@400..800&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#f8f9fc;--bg2:#ffffff;--bg3:#f0f4ff;--card:#ffffff;
  --border:#e4e8f0;--border2:#c8d4f0;
  --text:#0d1117;--text2:#3d4a5c;--muted:#7a8799;
  --accent:#2563eb;--accent-h:#1d4ed8;
  --accent-soft:#eff6ff;--accent-soft2:#dbeafe;
  --success:#059669;--error:#dc2626;--error-soft:#fef2f2;--gold:#f59e0b;
  --shadow-sm:0 1px 3px rgba(37,99,235,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 16px rgba(37,99,235,.10),0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:0 20px 48px rgba(37,99,235,.14),0 8px 24px rgba(0,0,0,.08);
  --radius:12px;--radius2:20px;--pill:100px;
  --t:.22s cubic-bezier(.4,0,.2,1);--header-h:68px;
}

/* Dark mode */
[data-theme="dark"]{
  --bg:#0d1117;--bg2:#161b22;--bg3:#1a2033;--card:#161b22;
  --border:#30363d;--border2:#444d58;
  --text:#e6edf3;--text2:#8b949e;--muted:#6e7681;
  --accent-soft:rgba(37,99,235,.15);--accent-soft2:rgba(37,99,235,.25);
  --error-soft:rgba(220,38,38,.1);
  --shadow-sm:0 1px 3px rgba(0,0,0,.3);
  --shadow:0 4px 16px rgba(0,0,0,.4);
  --shadow-lg:0 20px 48px rgba(0,0,0,.5);
}
[data-theme="dark"] .header{background:rgba(22,27,34,.92);border-color:var(--border)}
[data-theme="dark"] .chat-page{background:#0d1117}
[data-theme="dark"] .chat-topbar{background:#161b22;border-color:var(--border)}
[data-theme="dark"] .chat-input-bar{background:#161b22;border-color:var(--border)}
[data-theme="dark"] .chat-input-wrap{background:#0d1117;border-color:var(--border)}
[data-theme="dark"] .chat-input{color:var(--text)}
[data-theme="dark"] .messages-area{background:#0d1117}
[data-theme="dark"] .msg-row.assistant .msg-bubble{background:#1c2128;border-color:var(--border);color:var(--text)}
[data-theme="dark"] .chat-date-divider span{background:#161b22;border-color:var(--border)}
[data-theme="dark"] .typing-bubble{background:#1c2128;border-color:var(--border)}
[data-theme="dark"] .empty-chat-card{background:#161b22;border-color:var(--border)}

html{scroll-behavior:smooth}
body{font-family:'Instrument Sans',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}

/* ── ANIMATIONS ── */
@keyframes fadeIn    {from{opacity:0}to{opacity:1}}
@keyframes slideUp   {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown {from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes slideInRight{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes scaleIn   {from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer   {0%,100%{opacity:.6}50%{opacity:1}}
@keyframes spin      {to{transform:rotate(360deg)}}

.page{display:none}
.page.active{display:block;animation:fadeIn .28s ease}

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
.header{
  height:var(--header-h);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:200;
  display:flex;align-items:center;
  transition:background .3s,border-color .3s;
}
.header-content{
  max-width:1200px;margin:0 auto;
  padding:0 2rem;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.logo-container{display:flex;align-items:center;gap:.625rem}
.logo-container img{width:80px;height:80px}
.header-nav{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}

/* ══════════════════════════════════════
   BUTTONS
══════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.375rem;border-radius:var(--pill);font-size:.9rem;font-weight:600;border:none;transition:all var(--t);letter-spacing:.01em;white-space:nowrap}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}
.btn-primary{background:#242424;color:#fff;box-shadow:0 2px 8px rgba(37,99,235,.3);font-family:syne}
.btn-primary:hover:not(:disabled){background:#575757;transform:translateY(-1px);box-shadow:0 6px 20px rgba(55,56,57,.4)}
.btn-secondary{background:var(--bg);color:var(--accent);border:1.5px solid var(--accent)}
.btn-secondary:hover:not(:disabled){background:var(--accent-soft);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text2);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--text2);color:var(--text)}
.btn-danger{background:rgb(26,10,198);color:#fff}
.btn-danger:hover{background:rgb(51,39,192);transform:translateY(-1px)}
.btn-small{padding:.45rem .9rem;font-size:.8125rem;font-family:syne}
.btn-lg{padding:.875rem 2rem;font-size:1rem}

/* ══════════════════════════════════════
   HERO (landing)
══════════════════════════════════════ */
.hero{min-height:calc(100vh - var(--header-h));display:flex;align-items:center;background:var(--bg);position:relative;overflow:hidden;padding:5rem 2rem}
.hero-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;animation:shimmer 4s ease-in-out infinite}
.hero-blob-1{width:600px;height:600px;background:rgba(37,99,235,.09);top:-200px;right:-200px}
.hero-blob-2{width:400px;height:400px;background:rgba(245,158,11,.06);bottom:-100px;left:-100px}
.hero-inner{max-width:680px;margin:0 auto;text-align:center;position:relative;z-index:1;animation:slideUp .7s ease both}
.hero h1{font-family:syne,Georgia,serif;font-size:clamp(2.2rem,5.5vw,4rem);font-weight:700;color:var(--text);line-height:1.12;letter-spacing:-.03em;margin-bottom:1.25rem}
.hero h1 em{font-style:italic;font-weight:400;color:var(--accent)}
.hero p{font-size:1.1rem;color:var(--text2);line-height:1.8;margin-bottom:2.5rem;max-width:520px;margin-left:auto;margin-right:auto}
.hero-ctas{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ══════════════════════════════════════
   FORM ELEMENTS
══════════════════════════════════════ */
.form-group{margin-bottom:1.25rem}
.form-label{display:block;font-size:.78rem;font-weight:700;color:var(--text2);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.07em}
.form-input,.form-textarea,.form-select{
  width:100%;padding:.75rem 1rem;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--radius);font-size:.9375rem;color:var(--text);
  outline:none;transition:all var(--t);
}
.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12);background:var(--bg2)}
.form-input::placeholder{color:var(--muted)}
.form-textarea{resize:vertical;min-height:110px}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%237a8799' d='M7 9.5L1.5 4h11z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.5rem}
.form-hint{font-size:.78rem;color:var(--muted);margin-top:.375rem}
.form-actions{display:flex;gap:.75rem;margin-top:1.75rem;flex-wrap:wrap}
.form-actions .btn{flex:1;min-width:120px}
.alert{padding:.875rem 1rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;margin-bottom:1.25rem;display:flex;align-items:flex-start;gap:.625rem;animation:slideUp .25s ease;line-height:1.5}
.alert-error{background:var(--error-soft);border:1px solid rgba(220,38,38,.18);color:var(--error)}
.alert-success{background:rgba(5,150,105,.08);border:1px solid rgba(5,150,105,.2);color:var(--success)}
.alert-icon{font-size:1rem;flex-shrink:0;margin-top:.1rem}

/* ══════════════════════════════════════
   AUTH
══════════════════════════════════════ */
.auth-full{display:flex;min-height:100vh}
.auth-left{width:480px;flex-shrink:0;background:linear-gradient(160deg,#0d1117 0%,#1a2744 60%,#0f1f3d 100%);padding:3rem;display:flex;flex-direction:column;position:relative;overflow:hidden}
.auth-left::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.18) 0%,transparent 70%);top:-150px;right:-150px;pointer-events:none}
.auth-left-inner{display:flex;flex-direction:column;height:100%;position:relative;z-index:1}
.auth-brand{display:flex;align-items:center;gap:.75rem;font-size:1.375rem;font-weight:700;color:#fff;text-decoration:none;margin-bottom:auto}
.auth-brand img{width:60px;height:60px}
.auth-left-content{padding:3rem 0}
.auth-left-title{font-family:syne,serif;font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;color:#fff;line-height:1.15;letter-spacing:-.03em;margin-bottom:1rem}
.auth-left-sub{font-size:.9375rem;color:rgba(255,255,255,.5);line-height:1.75;margin-bottom:2rem;max-width:340px}
.auth-left-feats{display:flex;flex-direction:column;gap:.875rem}
.auth-feat{display:flex;align-items:center;gap:.875rem;font-size:.875rem;color:rgba(255,255,255,.75);font-weight:500}
.auth-feat-icon{width:22px;height:22px;border-radius:50%;background:rgba(37,99,235,.3);border:1px solid rgba(37,99,235,.5);color:#93c5fd;font-size:.65rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.auth-left-footer{font-size:.75rem;color:rgba(255,255,255,.25);margin-top:auto}
.auth-right{flex:1;background:var(--bg);display:flex;flex-direction:column;min-height:100vh;overflow-y:auto}
.auth-right-header{padding:1.25rem 2rem;display:flex;justify-content:flex-end;border-bottom:1px solid var(--border)}
.auth-right-inner{flex:1;display:flex;flex-direction:column;justify-content:center;padding:3rem;max-width:480px;width:100%;margin:0 auto}
.auth-title{font-family:syne,Georgia,serif;font-size:1.875rem;font-weight:700;color:var(--text);margin-bottom:.375rem;letter-spacing:-.025em}
.auth-sub{font-size:.9rem;color:var(--muted);margin-bottom:1.75rem}
.auth-or{display:flex;align-items:center;gap:.875rem;color:var(--muted);font-size:.8rem;font-weight:600;margin:1.25rem 0;text-transform:uppercase;letter-spacing:.06em}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--border)}
.toggle-auth{text-align:center;margin-top:1.5rem;font-size:.875rem;color:var(--muted)}
.toggle-auth button{background:none;border:none;color:var(--accent);cursor:pointer;font-weight:600;font-size:.875rem;font-family:inherit;padding:0}
.toggle-auth button:hover{text-decoration:underline}
.login-btn{width:100%;padding:.875rem;background:#242424;color:#fff;border:none;border-radius:var(--pill);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--t);font-family:inherit;margin-top:.5rem}
.login-btn:hover{background:#575757;transform:translateY(-1px)}
.login-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.otp-box{width:48px;height:56px;text-align:center;font-size:1.5rem;font-weight:700;padding:0;border-radius:var(--radius);border:1.5px solid var(--border);background:var(--bg);color:var(--text);outline:none;transition:all var(--t)}
.otp-box:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.12)}

/* ══════════════════════════════════════
   DASHBOARD
══════════════════════════════════════ */
.dash-hero{background:linear-gradient(135deg,#0d1117 0%,#1a2744 100%);padding:2.5rem 2rem;color:#fff;border-bottom:1px solid var(--border)}
.dash-hero-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.dash-hero h1{font-family:syne,serif;font-size:1.875rem;font-weight:700;letter-spacing:-.03em;margin-bottom:.25rem;color:#fff}
.dash-hero p{font-size:.9rem;color:rgba(255,255,255,.5);font-weight:500;font-family:lato}
.dash-stats{display:flex;gap:2rem;flex-wrap:wrap}
.dash-stat{text-align:center}
.dash-stat-val{font-family:syne,serif;font-size:2rem;font-weight:700;display:block;line-height:1;color:#fff}
.dash-stat-lbl{font-size:.72rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.dash-body{max-width:1200px;margin:0 auto;padding:2rem}
.dash-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.dash-toolbar h2{font-family:syne,serif;font-size:1.25rem;font-weight:700;color:var(--text)}

/* ══════════════════════════════════════
   MENTOR CARDS
══════════════════════════════════════ */
.mentor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}
.mentor-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius2);padding:1.625rem;transition:all var(--t);display:flex;flex-direction:column;gap:.75rem;animation:slideUp .35s ease both;position:relative;overflow:hidden}
.mentor-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent-h));opacity:0;transition:opacity var(--t)}
.mentor-card:hover{border-color:var(--border2);box-shadow:var(--shadow);transform:translateY(-3px)}
.mentor-card:hover::before{opacity:1}
.mentor-card-top{display:flex;align-items:flex-start;gap:1rem}
.mentor-avatar{width:44px;height:44px;border-radius:var(--radius);background:var(--accent-soft);border:1.5px solid var(--accent-soft2);display:flex;align-items:center;justify-content:center;font-size:1.125rem;font-weight:700;color:var(--accent);flex-shrink:0;overflow:hidden}
.mentor-avatar img{width:100%;height:100%;object-fit:cover}
.mentor-info{flex:1;min-width:0}
.mentor-name{font-weight:700;font-size:1.025rem;color:var(--text);line-height:1.3;font-family:lato,serif}
.mentor-tone{display:inline-block;background:rgb(87,87,87);color:#fff;border-radius:var(--pill);font-size:.72rem;font-weight:700;padding:.1rem .625rem;text-transform:capitalize;margin-top:.1rem}
.mentor-desc{font-size:.875rem;color:var(--text2);line-height:1.65;flex:1}
.mentor-actions{display:flex;gap:.625rem;padding-top:.25rem;flex-wrap:wrap}
.mentor-actions .btn{flex:1;font-size:.8125rem;padding:.5rem .875rem;min-width:80px}
.empty-state{text-align:center;padding:5rem 2rem;color:var(--muted);animation:slideUp .4s ease}
.empty-state-icon{font-size:3rem;display:block;margin-bottom:1rem;opacity:.35}
.empty-state p{font-size:.975rem;line-height:1.7;max-width:320px;margin:0 auto}
.empty-state .btn{margin-top:1.5rem}

/* ══════════════════════════════════════
   CREATE MENTOR
══════════════════════════════════════ */
.create-wrap{max-width:640px;margin:0 auto;padding:3rem 2rem 5rem;animation:slideUp .35s ease}
.create-wrap .page-title{font-family:syne,serif;font-size:2rem;font-weight:700;color:var(--text);letter-spacing:-.03em;margin-bottom:.375rem}
.create-wrap .page-sub{font-size:.9rem;color:var(--muted);margin-bottom:2.5rem}

/* ── Avatar Picker ── */
.avatar-picker{display:flex;flex-direction:column;gap:1rem}
.avatar-preview{display:flex;align-items:center;gap:1rem;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius2);padding:1rem 1.25rem}
.avatar-preview-img{width:56px;height:56px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid var(--border2);background:var(--card);display:flex;align-items:center;justify-content:center}
.avatar-preview-img img{width:100%;height:100%;object-fit:cover}
.avatar-preview-initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:var(--accent);background:var(--accent-soft)}
.avatar-preview-info{display:flex;flex-direction:column;gap:.25rem}
.avatar-preview-name{font-size:.9rem;font-weight:700;color:var(--text);font-family:syne}
.avatar-preview-hint{font-size:.78rem;color:var(--muted)}
.avatar-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.625rem}
.avatar-opt{position:relative;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;border:2.5px solid var(--border);background:var(--card);cursor:pointer;transition:all var(--t);padding:0;display:flex;align-items:center;justify-content:center}
.avatar-opt img{width:100%;height:100%;object-fit:cover}
.avatar-opt:hover{border-color:var(--accent);transform:scale(1.06);box-shadow:0 4px 12px rgba(37,99,235,.2)}
.avatar-opt.selected{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.avatar-locked{opacity:.75}
.avatar-locked::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.35);border-radius:50%}
.avatar-lock-badge{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:8px;font-weight:800;padding:1px 5px;border-radius:100px;z-index:2}
.av-fallback{font-size:11px;font-weight:700;color:var(--muted)}

/* ══════════════════════════════════════
   CHAT
══════════════════════════════════════ */
.chat-page{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:#f0f4ff}
[data-theme="dark"] .chat-page{background:#0d1117}
.chat-topbar{background:#fff;border-bottom:1px solid #e8ecf4;padding:0 1.25rem;height:64px;display:flex;align-items:center;gap:.875rem;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.06);z-index:10}
.chat-back{width:36px;height:36px;border-radius:50%;background:none;border:none;display:flex;align-items:center;justify-content:center;font-size:1.25rem;color:#555;transition:all var(--t);flex-shrink:0;cursor:pointer}
.chat-back:hover{background:#f0f4ff;color:#2563eb}
.chat-mentor-info{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}
.chat-mentor-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--accent-soft);border:2px solid var(--accent-soft2);display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:700;color:var(--accent)}
.chat-mentor-avatar img{width:100%;height:100%;object-fit:cover}
.chat-mentor-text{min-width:0;flex:1}
.chat-mentor-name{font-weight:700;font-size:.9375rem;color:#0d1117;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:lato}
.chat-mentor-status{font-size:.72rem;color:#2563eb;display:flex;align-items:center;gap:.3rem;font-weight:600;margin-top:2px}
.chat-status-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:shimmer 1.5s ease infinite}
.chat-topbar-actions{display:flex;align-items:center;gap:.375rem;flex-shrink:0}
.theme-btn{display:none}

/* Messages */
.messages-area{flex:1;overflow-y:auto;padding:1.5rem 1.25rem;display:flex;flex-direction:column;gap:0;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent;background:#f0f4ff;transition:opacity .15s ease}
.messages-area::-webkit-scrollbar{width:4px}
.messages-area::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:4px}
.chat-date-divider{display:flex;align-items:center;justify-content:center;margin:1rem 0 1.25rem}
.chat-date-divider span{background:rgba(255,255,255,.9);color:#7a8799;font-size:.72rem;font-weight:600;padding:5px 14px;border-radius:99px;box-shadow:0 1px 3px rgba(0,0,0,.08);letter-spacing:.03em;border:1px solid #e4e8f0}

/* Message rows */
.msg-row{display:flex;flex-direction:column;max-width:100%;padding:0;margin-bottom:1.25rem;animation:msgIn .18s ease both}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.msg-row.user{align-items:flex-end}
.msg-row.assistant{align-items:flex-start}
.msg-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.375rem;padding:0 .25rem}
.msg-row.user .msg-header{flex-direction:row-reverse}
.msg-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700}
.msg-av.ai{background:var(--accent-soft);border:1.5px solid var(--accent-soft2);color:var(--accent)}
.msg-av.ai img{width:100%;height:100%;object-fit:cover}
.msg-av.user{display:none}
.msg-sender-name{font-size:.72rem;font-weight:700;color:#5a6a7a;letter-spacing:.01em}
.msg-row.user .msg-sender-name{display:none}
.msg-sender-time{font-size:.68rem;color:#9aa5bb;font-weight:500}
.msg-group{display:flex;flex-direction:column;gap:3px;max-width:72%}
.msg-bubble{padding:.75rem 1rem;border-radius:18px;font-size:.9rem;line-height:1.6;word-break:break-word;position:relative}
.msg-row.assistant .msg-bubble{background:#fff;color:#1a2233;border-radius:4px 18px 18px 18px;box-shadow:0 1px 3px rgba(0,0,0,.07);border:1px solid #e8ecf4;font-family:syne}
.msg-row.user .msg-bubble{background:#2563eb;color:#fff;border-radius:18px 4px 18px 18px;box-shadow:0 2px 8px rgba(37,99,235,.25);font-family:syne}
.msg-meta{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:.68rem;line-height:1;padding:0 .25rem}
.msg-row.user .msg-meta{justify-content:flex-end;color:#9aa5bb}
.msg-tick{font-size:.68rem;color:#2563eb;letter-spacing:-1px}

/* Typing */
.typing-row{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:1.25rem;animation:msgIn .18s ease both}
.typing-bubble{background:#fff;border:1px solid #e8ecf4;border-radius:4px 18px 18px 18px;padding:.75rem 1.125rem;display:flex;gap:5px;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.typing-dot{width:7px;height:7px;border-radius:50%;background:#9aa5bb;animation:typingBounce 1.4s ease infinite}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}

/* Empty chat */
.empty-chat{text-align:center;padding:3rem 1rem;margin:auto;display:flex;flex-direction:column;align-items:center;gap:.875rem}
.empty-chat-card{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 2px 12px rgba(0,0,0,.08);border:1px solid #e8ecf4;max-width:280px}
.empty-chat-av{width:64px;height:64px;border-radius:50%;margin:0 auto 1rem;overflow:hidden;background:var(--accent-soft);border:2px solid var(--accent-soft2);display:flex;align-items:center;justify-content:center;font-size:1.75rem;font-weight:700;color:var(--accent)}
.empty-chat-av img{width:100%;height:100%;object-fit:cover}
.empty-chat-name{font-weight:700;font-size:1rem;color:#0d1117;margin-bottom:.25rem}
.empty-chat-hint{font-size:.8rem;color:#7a8799;line-height:1.6}

/* Input bar */
.chat-input-bar{background:#fff;border-top:1px solid #e8ecf4;padding:.875rem 1.25rem;display:flex;align-items:flex-end;gap:.75rem;flex-shrink:0;box-shadow:0 -1px 4px rgba(0,0,0,.04)}
.chat-input-wrap{flex:1;background:#f0f4ff;border:1.5px solid #e4e8f0;border-radius:24px;padding:.625rem 1.125rem;display:flex;align-items:center;transition:all var(--t);min-height:44px}
.chat-input-wrap:focus-within{border-color:#93c5fd;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.chat-input{flex:1;border:none;background:transparent;font-size:.9375rem;color:#0d1117;outline:none;font-family:inherit;padding:0;resize:none;line-height:1.5;max-height:120px;overflow-y:auto}
.chat-input::placeholder{color:#9aa5bb}
.send-btn{width:44px;height:44px;border-radius:50%;background:#2563eb;border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--t);flex-shrink:0;box-shadow:0 2px 8px rgba(37,99,235,.35)}
.send-btn:hover:not(:disabled){background:#1d4ed8;transform:scale(1.06);box-shadow:0 4px 14px rgba(37,99,235,.45)}
.send-btn:disabled{opacity:.35;transform:none;box-shadow:none;background:#9aa5bb}

/* ══════════════════════════════════════
   RESPONSIVE — 1024px
══════════════════════════════════════ */
@media(max-width:1024px){
  .auth-left{width:380px;padding:2.5rem}
  .hero-blob-1{width:400px;height:400px}
}

/* ══════════════════════════════════════
   RESPONSIVE — 900px (tablet landscape)
══════════════════════════════════════ */
@media(max-width:900px){
  .auth-left{width:340px;padding:2rem}
  .auth-right-inner{padding:2rem}
  .mentor-grid{grid-template-columns:repeat(2,1fr)}
  .dash-body{padding:1.5rem}
  .create-wrap{padding:2rem 1.5rem 4rem}
}

/* ══════════════════════════════════════
   RESPONSIVE — 768px (tablet portrait)
══════════════════════════════════════ */
@media(max-width:768px){
  :root{--header-h:60px}

  /* Header */
  .header-content{padding:0 1.25rem}
  .logo-container img{width:60px;height:60px}
  .header-nav{gap:.5rem}
  .header-nav .btn-ghost{padding:.4rem .75rem;font-size:.78rem}

  /* Auth — stack vertically */
  .auth-full{flex-direction:column}
  .auth-left{width:100%;min-height:auto;padding:2rem 1.5rem}
  .auth-left-content{padding:1.5rem 0}
  .auth-left-title{font-size:1.5rem}
  .auth-left-sub,.auth-left-feats{display:none}
  .auth-right{min-height:auto}
  .auth-right-header{padding:1rem 1.25rem}
  .auth-right-inner{padding:1.5rem 1.25rem;max-width:100%}
  .auth-title{font-size:1.5rem}

  /* Dashboard */
  .dash-hero{padding:1.75rem 1.25rem}
  .dash-hero h1{font-size:1.5rem;font-family:'Syne',serif}
  .dash-stats{gap:1.25rem}
  .dash-body{padding:1.25rem}
  .dash-toolbar{flex-direction:column;align-items:flex-start;gap:.75rem}
  .dash-toolbar h2{font-size:1.1rem}
  .mentor-grid{grid-template-columns:1fr}
  .mentor-actions{flex-wrap:wrap}

  /* Create */
  .create-wrap{padding:1.5rem 1.25rem 3rem}
  .create-wrap .page-title{font-size:1.625rem}
  .avatar-grid{grid-template-columns:repeat(4,1fr)}
  .form-actions{flex-direction:column}
  .form-actions .btn{width:100%}

  /* Chat */
  .chat-topbar{padding:0 1rem;height:60px;gap:.625rem}
  .chat-mentor-name{font-size:.875rem;font-family:lato}
  .chat-topbar-actions .icon-btn:not(:last-child){display:none} /* hide extra btns on mobile */
  .msg-group{max-width:85%}
  .messages-area{padding:1rem .875rem}
  .chat-input-bar{padding:.75rem 1rem;gap:.625rem}
  .chat-input{font-size:.9rem}
  .send-btn{width:40px;height:40px}

  /* OTP boxes */
  .otp-box{width:42px;height:50px;font-size:1.375rem}
}

/* ══════════════════════════════════════
   RESPONSIVE — 640px (large phone)
══════════════════════════════════════ */
@media(max-width:640px){
  .dash-hero-inner{flex-direction:column;align-items:flex-start;gap:1rem}
  .dash-stats{width:100%;justify-content:space-between;background:rgba(255,255,255,.06);border-radius:var(--radius);padding:.75rem 1rem}
  .mentor-card{padding:1.25rem}
  .chat-date-divider span{font-size:.68rem;padding:4px 12px}
  .msg-bubble{font-size:.875rem;padding:.625rem .875rem}
  .typing-bubble{padding:.625rem .875rem}
  .empty-chat-card{padding:1.5rem}
  .avatar-grid{grid-template-columns:repeat(4,1fr);gap:.5rem}
}

/* ══════════════════════════════════════
   RESPONSIVE — 480px (small phone)
══════════════════════════════════════ */
@media(max-width:480px){
  :root{--header-h:56px}

  /* Header — tighten up */
  .header-content{padding:0 1rem}
  .logo-container img{width:80px;height:50px}
  /* Hide non-essential nav items on smallest screens */
  .header-nav .btn-ghost:not(:last-child){display:none}
  /* Show a compact menu instead */

  /* Dash */
  .dash-hero{padding:1.25rem 1rem}
  .dash-hero h1{font-size:1.25rem}
  .dash-body{padding:1rem}
  .mentor-card{padding:1rem}
  .mentor-avatar{width:38px;height:38px}
  .mentor-name{font-size:.9rem}

  /* Create */
  .create-wrap{padding:1.25rem 1rem 2.5rem}
  .create-wrap .page-title{font-size:1.375rem}
  .avatar-grid{grid-template-columns:repeat(4,1fr);gap:.375rem}

  /* Chat */
  .chat-topbar{height:56px;padding:0 .875rem}
  .chat-back{width:32px;height:32px;font-size:1.125rem}
  .chat-mentor-avatar{width:36px;height:36px}
  .chat-mentor-name{font-size:.8125rem}
  .chat-mentor-status{font-size:.68rem}
  .msg-group{max-width:90%}
  .msg-bubble{font-size:.8375rem;padding:.6rem .8rem;border-radius:14px}
  .msg-row.assistant .msg-bubble{border-radius:3px 14px 14px 14px}
  .msg-row.user .msg-bubble{border-radius:14px 3px 14px 14px}
  .messages-area{padding:.875rem .75rem}
  .chat-input-bar{padding:.625rem .875rem}
  .chat-input-wrap{padding:.5rem .875rem;border-radius:20px}
  .chat-input{font-size:.875rem}
  .send-btn{width:38px;height:38px}
  .send-btn svg{width:16px;height:16px}
  .empty-chat{padding:2rem .75rem}
  .empty-chat-card{padding:1.25rem}
  .empty-chat-av{width:52px;height:52px;font-size:1.5rem}

  /* Auth */
  .auth-left{padding:1.5rem 1rem}
  .auth-right-inner{padding:1.25rem 1rem}
  .otp-box{width:38px;height:46px;font-size:1.25rem}

  /* Buttons */
  .btn{padding:.55rem 1.125rem;font-size:.8375rem}
  .btn-small{padding:.4rem .75rem;font-size:.775rem}
  .btn-lg{padding:.75rem 1.5rem;font-size:.9rem}
}

/* ══════════════════════════════════════
   RESPONSIVE — 380px (very small)
══════════════════════════════════════ */
@media(max-width:380px){
  .avatar-grid{grid-template-columns:repeat(4,1fr)}
  .mentor-actions .btn{padding:.45rem .5rem;font-size:.75rem}
  .msg-group{max-width:95%}
  .dash-stats{flex-direction:row;justify-content:space-around}
  .dash-stat-val{font-size:1.5rem}
}

/* ══════════════════════════════════════
   MOBILE NAV DRAWER (hamburger)
══════════════════════════════════════ */
.nav-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:998;backdrop-filter:blur(4px)}
.nav-drawer-overlay.open{display:block}
.nav-drawer{position:fixed;top:0;right:0;width:min(320px,85vw);height:100vh;background:var(--card);z-index:999;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
.nav-drawer.open{transform:translateX(0)}
.nav-drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.nav-drawer-close{background:none;border:none;font-size:1.5rem;color:var(--muted);cursor:pointer;line-height:1;padding:.25rem}
.nav-drawer .btn{width:100%;justify-content:flex-start;border-radius:var(--radius);font-size:.9375rem}
.hamburger-btn{display:none;width:38px;height:38px;border-radius:50%;background:none;border:0px solid var(--border);align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:5px;padding:.5rem;transition:all var(--t)}
.hamburger-btn:hover{background:var(--bg3);border-color:var(--border2)}
.hamburger-btn span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:all .25s;transform-origin:center}
.hamburger-btn.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger-btn.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger-btn.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

@media(max-width:640px){
  .hamburger-btn{display:flex}
  .header-nav>*:not(.hamburger-btn){display:none}
}

/* ══════════════════════════════════════
   NOTIF PANEL RESPONSIVE
══════════════════════════════════════ */
@media(max-width:480px){
  .notif-panel{width:calc(100vw - 2rem);right:1rem;top:64px}
  .export-menu{right:1rem;bottom:80px}
  .search-panel{width:100vw}
}

/* ══════════════════════════════════════
   UTILS
══════════════════════════════════════ */
.container{max-width:1200px;margin:0 auto;padding:0 2rem}
@media(max-width:768px){.container{padding:0 1.25rem}}
@media(max-width:480px){.container{padding:0 1rem}}

/* Touch targets — minimum 44px on mobile */
@media(max-width:768px){
  button,a,[role="button"]{min-height:44px}
  .msg-pin-btn,.notif-toast-close,.nav-drawer-close{min-height:unset}
  .avatar-opt{min-height:unset}
}

/* Prevent zoom on input focus (iOS) */
@media(max-width:768px){
  .form-input,.form-textarea,.form-select,.chat-input,.search-panel-inp{font-size:16px}
}

/* Safe area for notched phones */
@supports(padding:max(0px)){
  .chat-input-bar{padding-bottom:max(.875rem, env(safe-area-inset-bottom))}
  .nav-drawer{padding-bottom:max(1.5rem, env(safe-area-inset-bottom))}
}