.directory,.account-page{max-width:1100px;margin:auto;padding:70px 30px 100px}
.directory-title h1,.info-hero h1,.join-page h1,.account-page h1,.dash h1{font:700 54px/1.04 Manrope;letter-spacing:-3px;margin:0}
.directory-title>p:last-child{color:var(--muted);font-size:16px;max-width:450px;line-height:1.6}
.search-layout{display:grid;grid-template-columns:230px 1fr;gap:35px;margin-top:47px}
.filters,.tutor-row,.dash-grid>section,.billing-card,.payment-notice,.invoice{background:#fff;border:1px solid var(--line)}
.filters{padding:20px;height:max-content}
.filter-top,.result-bar,.card-heading{display:flex;justify-content:space-between;align-items:center}
.filter-top h3{font:700 19px Manrope;margin:0}
.filter-top a,.card-heading a{font-size:12px;font-weight:700;color:#218363}
.filters label{border-top:1px solid var(--line);padding:19px 0 0;margin-top:19px;display:block;font-size:12px;font-weight:700}
.filters select,.filters input[type=range]{width:100%;margin-top:10px}
.filters select{padding:10px;background:#fff;border:1px solid var(--line);color:var(--ink)}
.check{font-size:13px;font-weight:400;margin-top:9px}
.range{display:flex;justify-content:space-between;margin-top:10px;color:#70877f;font-size:11px}
.result-bar{margin-bottom:15px;font-size:13px}
.result-bar select{padding:9px;border:1px solid var(--line);background:#fff}
.tutor-row{padding:22px;display:flex;gap:17px;margin-bottom:12px}
.tutor-avatar{width:55px;height:55px;flex:0 0 55px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:#748c86}
.tutor-avatar.coral{background:#dc865e}
.tutor-avatar.blue{background:#5591a3}
.tutor-avatar.gold{background:#c69d47}
.tutor-name{display:flex;gap:8px;align-items:center}
.tutor-name h3,.tutor-main h4{margin:0;font:700 16px Manrope}
.tutor-name span{font-size:10px;color:#1d9672;font-weight:700}
.tutor-main h4{font-size:14px;margin-top:4px}
.tutor-main>p{margin:3px 0 12px;color:#71867e;font-size:12px}
.tutor-metrics{display:flex;gap:15px;font-size:11px;color:#637a72}
.tutor-metrics b{color:#a16d17}
.tutor-metrics small{color:#71867e;font-weight:400}
.tutor-side{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:14px;align-items:end}
.tutor-side strong{font-size:15px}
.tutor-side small{font-size:11px;font-weight:400}

.info-hero{text-align:center;background:#e2f1eb;padding:85px 25px}
.info-hero p:last-child{max-width:530px;margin:21px auto 0;color:#5f796f;line-height:1.6}
.split-guide{max-width:1080px;padding:95px 25px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:90px}
.split-guide.reverse{padding-top:30px}
.split-guide h2{font:700 40px/1.1 Manrope;letter-spacing:-2px;margin:0}
.split-guide ol{list-style:none;padding:0;margin:28px 0}
.split-guide li{display:flex;gap:14px;margin:16px 0}
.split-guide li>b{background:#e1f0eb;color:#1b8867;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;font-size:11px}
.split-guide li strong,.split-guide li span{display:block}
.split-guide li span{font-size:13px;color:#6b827a;margin-top:2px}
.guide-art{height:340px;display:grid;place-content:center;text-align:center}
.family-art{background:#f9e0d2}
.tutor-art{background:#dff0eb}
.guide-art span{font:800 75px Manrope;letter-spacing:-5px}
.guide-art p{margin:0;color:#57736a}


/* =========================================================
   JOIN PAGE
   ========================================================= */

.join-page{
    min-height:calc(100vh - 76px);
    display:grid;
    grid-template-columns:1.3fr .7fr;
    background:#fff;
}

.join-page>section{
    padding:85px max(30px,calc((100vw - 1070px)/2));
    background:#fff;
}

.join-page>section>p:not(.eyebrow){
    color:#60786f;
    max-width:490px;
    line-height:1.6;
    font-size:16px;
}

.role-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-top:35px;
    max-width:680px;
}

.role-grid>a{
    background:#fff;
    border:1px solid var(--line);
    padding:25px;
    min-height:220px;
}

.role-icon{
    width:41px;
    height:41px;
    display:grid;
    place-items:center;
    border-radius:50%;
    font-size:19px;
}

.role-icon.peach{background:#facabb}
.role-icon.mint{background:#bce5d8}

.role-grid h3{
    font:700 21px Manrope;
    margin:21px 0 6px;
    color:var(--ink);
}

.role-grid p{
    color:#6c837b;
    font-size:13px;
    line-height:1.5;
}

.role-grid b{
    font-size:12px;
    color:#197c5d;
}


/* RIGHT SIDE OF JOIN PAGE — NOW WHITE */

.join-aside{
    background:#fff;
    color:var(--ink);
    padding:100px 55px;
}

.join-badge{
    width:46px;
    height:46px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e9815b;
    color:#fff;
    font-size:21px;
}

.join-aside h3{
    font:700 33px/1.12 Manrope;
    letter-spacing:-1.5px;
    margin:26px 0 10px;
    color:var(--ink);
}

.join-aside>p{
    color:#60786f;
    line-height:1.55;
    font-size:14px;
}

.aside-stat{
    border-top:1px solid var(--line);
    margin-top:60px;
    padding-top:20px;
    display:flex;
    gap:12px;
    align-items:center;
}

.aside-stat strong{
    font:700 28px Manrope;
    color:#e9815b;
}

.aside-stat span{
    font-size:11px;
    color:#60786f;
    max-width:90px;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.app-shell{
    display:grid;
    grid-template-columns:240px 1fr;
    min-height:100vh;
    background:#f7f8f4;
}

.app-nav{
    background:#123b35;
    padding:28px 18px;
    color:#d2e4dc;
    display:flex;
    flex-direction:column;
}

.app-nav .brand{
    color:#fff;
    margin:0 10px 44px;
}

.app-nav>p{
    font-size:10px;
    letter-spacing:.13em;
    color:#8eaea4;
    margin:0 10px 12px;
}

.app-nav>a:not(.brand){
    padding:11px 10px;
    margin:2px 0;
    font-size:13px;
    border-radius:4px;
}

.app-nav>a.active{
    background:#276056;
    color:#fff;
}

.app-nav a b{
    float:right;
    background:#ec7149;
    color:#fff;
    border-radius:12px;
    padding:1px 6px;
    font-size:10px;
}

.nav-user{
    margin-top:auto;
    border-top:1px solid #3c675e;
    padding:18px 8px 0;
    display:flex;
    gap:9px;
    align-items:center;
}

.nav-user>span{
    width:30px;
    height:30px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#e3825c;
    color:#fff;
    font-size:10px;
}

.nav-user strong,.nav-user small{
    display:block;
    font-size:11px;
}

.nav-user small{
    color:#a7c6bc;
    font-size:10px;
}

.dash{
    padding:53px 60px;
    max-width:1170px;
}

.dash h1{
    font-size:35px;
}

.dash-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.dash-head>div>p:last-child{
    color:#6c827a;
    margin:7px 0 0;
}

.next-session{
    background:#fff4d7;
    border:1px solid #f3dfab;
    padding:18px 22px;
    margin:34px 0;
    display:flex;
    gap:16px;
    align-items:center;
}

.calendar-date{
    width:42px;
    background:#fff;
    border-radius:4px;
    text-align:center;
    padding:5px;
}

.calendar-date b,.calendar-date span{
    display:block;
}

.calendar-date b{
    font:700 20px Manrope;
}

.calendar-date span{
    font-size:9px;
    color:#e56b44;
    font-weight:700;
}

.next-session .label{
    font-size:9px;
    letter-spacing:.12em;
    color:#8a7951;
    font-weight:700;
}

.next-session h3{
    font:700 16px Manrope;
    margin:2px 0;
}

.next-session p{
    font-size:12px;
    color:#6d7668;
    margin:0;
}

.next-session>a{
    margin-left:auto;
    color:#197b5d;
    font-weight:700;
    font-size:12px;
}

.dash-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:20px;
}

.dash-grid>section{
    padding:22px;
}

.card-heading h2{
    font:700 18px Manrope;
    margin:0;
}

.child-card,.message-snippet,.request-card{
    display:flex;
    align-items:center;
    gap:12px;
    border-top:1px solid var(--line);
    margin-top:16px;
    padding-top:14px;
}

.child-avatar{
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#eac4ae;
    color:#925c43;
    font-weight:700;
}

.child-card h3,.message-snippet h3,.request-card h3{
    font:700 13px Manrope;
    margin:0;
}

.child-card p,.message-snippet p,.request-card p{
    font-size:11px;
    color:#72867f;
    margin:2px 0;
}

.child-card>span,.request-card>a{
    margin-left:auto;
    font-size:11px;
    font-weight:700;
    color:#1c8060;
}

.progress-card{
    background:#eef5f1;
    margin-top:15px;
    padding:14px;
    display:grid;
    grid-template-columns:1fr 100px auto;
    align-items:center;
    gap:10px;
}

.progress-card p,.progress-card strong,.progress-card span{
    font-size:11px;
    margin:0;
}

.progress-line{
    height:6px;
    border-radius:9px;
    background:#d6e3dc;
}

.progress-line i{
    display:block;
    background:#28916e;
    height:100%;
    border-radius:9px;
}

.progress-card span{
    color:#1d8b69;
}

.message-snippet small{
    margin-left:auto;
    color:#839890;
    font-size:10px;
}

.metric-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:13px;
    margin:32px 0;
}

.metric-grid>div{
    background:#fff;
    padding:17px;
}

.metric-grid span,.metric-grid strong,.metric-grid small{
    display:block;
}

.metric-grid span{
    font-size:11px;
    color:#6d827b;
}

.metric-grid strong{
    font:700 22px Manrope;
    margin:4px 0;
}

.metric-grid small{
    font-size:10px;
    color:#299271;
}

.schedule-row{
    display:flex;
    align-items:center;
    gap:11px;
    padding:15px 0;
    border-top:1px solid var(--line);
}

.schedule-row>b{
    font-size:12px;
    text-align:center;
}

.schedule-row>b small{
    font-size:9px;
}

.schedule-row>i{
    width:3px;
    height:37px;
    background:#dfa85c;
}

.schedule-row h3{
    font:700 13px Manrope;
    margin:0;
}

.schedule-row p{
    margin:2px 0;
    font-size:11px;
    color:#778d85;
}

.schedule-row span{
    margin-left:auto;
    font-size:11px;
    color:#1f8060;
    font-weight:700;
}

.request-card small{
    color:#248365;
    font-size:10px;
}


/* =========================================================
   BILLING
   ========================================================= */

.billing-grid{
    display:grid;
    grid-template-columns:1.3fr .7fr;
    gap:20px;
    margin-top:43px;
}

.billing-card,.payment-notice,.invoice,.bank-card{
    padding:23px;
}

.billing-card{
    display:flex;
    justify-content:space-between;
}

.billing-card p{
    font-size:10px;
    letter-spacing:.1em;
    font-weight:700;
    color:#72877f;
    margin:0;
}

.billing-card h2{
    font:700 20px Manrope;
    margin:6px 0;
}

.billing-card span{
    font-size:12px;
    color:#72877f;
}

.billing-card strong{
    font:700 23px Manrope;
}

.billing-card small{
    font-size:11px;
    font-weight:400;
}

.payment-notice{
    margin-top:13px;
    background:#fff1d3;
    display:flex;
    gap:14px;
    align-items:center;
}

.payment-notice>span{
    background:#ec7149;
    color:#fff;
    border-radius:50%;
    width:23px;
    height:23px;
    display:grid;
    place-items:center;
    font-weight:700;
}

.payment-notice strong{
    font-size:13px;
}

.payment-notice p{
    font-size:11px;
    color:#6e7768;
    margin:2px 0;
}

.payment-notice .btn{
    margin-left:auto;
}

.invoice{
    margin-top:13px;
}

.invoice h3,.bank-card h3{
    font:700 18px Manrope;
    margin:0 0 15px;
}

.invoice div{
    border-top:1px solid var(--line);
    padding:13px 0;
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:18px;
    font-size:12px;
}

.invoice i{
    font-style:normal;
    color:#208566;
    background:#e2f2ea;
    padding:2px 8px;
    border-radius:10px;
    font-size:10px;
}

.bank-card{
    background:#123b35;
    color:#fff;
}

.bank-card .eyebrow{
    color:#b7d5ca;
}

.bank-card ol{
    padding-left:17px;
    color:#c2d8d0;
    font-size:12px;
    line-height:2;
}

.bank-details{
    border-top:1px solid #477167;
    padding-top:16px;
    margin-top:19px;
}

.bank-details span,.bank-details strong,.bank-details small{
    display:block;
}

.bank-details span,.bank-details small,.fine{
    font-size:11px;
    color:#b3ccc3;
}

.bank-details strong{
    margin:5px 0;
    font:700 17px Manrope;
}

.fine{
    border-top:1px solid #477167;
    padding-top:15px;
    margin-top:22px;
}


/* =========================================================
   MESSAGES
   ========================================================= */

.messages-page{
    max-width:1050px;
    margin:42px auto;
    border:1px solid var(--line);
    background:#fff;
    min-height:650px;
    display:grid;
    grid-template-columns:300px 1fr;
}

.conversations{
    border-right:1px solid var(--line);
}

.convo-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
}

.convo-head h2{
    font:700 21px Manrope;
    margin:0;
}

.convo-head button,.chat header button{
    border:0;
    background:none;
    font-size:20px;
    color:var(--ink);
}

.conversations>input{
    width:calc(100% - 30px);
    margin:0 15px 11px;
    padding:10px;
    border:1px solid var(--line);
}

.conversation{
    display:flex;
    padding:14px 15px;
    gap:10px;
    align-items:center;
}

.conversation.active{
    background:#e9f4ef;
}

.conversation p{
    margin:2px 0;
    font-size:11px;
    color:#71877f;
}

.conversation strong{
    font-size:13px;
}

.conversation small{
    margin-left:auto;
    align-self:start;
    font-size:10px;
    color:#81968f;
}

.chat{
    display:flex;
    flex-direction:column;
}

.chat header{
    border-bottom:1px solid var(--line);
    padding:15px 19px;
    display:flex;
    align-items:center;
    gap:10px;
}

.chat header strong,.chat header p{
    display:block;
    margin:0;
    font-size:13px;
}

.chat header p{
    font-size:10px;
    color:#6b847b;
}

.chat header p i{
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#20a277;
}

.chat header button{
    margin-left:auto;
}

.chat-body{
    padding:22px;
    flex:1;
    background:#fcfdfb;
}

.date{
    text-align:center;
    font-size:10px;
    color:#83968f;
}

.bubble{
    max-width:350px;
    padding:12px 13px;
    margin:12px 0;
    border-radius:8px;
    font-size:13px;
    line-height:1.4;
}

.bubble small{
    display:block;
    font-size:9px;
    margin-top:5px;
    color:#82958e;
}

.incoming{
    background:#eef4f1;
}

.outgoing{
    background:#d9f0e7;
    margin-left:auto;
}

.composer{
    padding:15px;
    border-top:1px solid var(--line);
    display:flex;
    gap:8px;
}

.composer input{
    flex:1;
    border:1px solid var(--line);
    padding:11px;
}

.composer button{
    background:#1c8665;
    color:#fff;
    border:0;
    padding:0 15px;
    font-weight:700;
    border-radius:4px;
}


/* =========================================================
   FORMS, ALERTS, AND AUTH PAGES
   ========================================================= */

label{
    display:block;
    font-size:11px;
    color:var(--muted);
    font-weight:700;
    letter-spacing:.03em;
    margin-top:14px;
}

label:first-child{margin-top:0}

input,select,textarea{
    display:block;
    width:100%;
    margin-top:6px;
    border:1px solid var(--line);
    background:#fcfcfa;
    padding:11px 10px;
    font:14px 'DM Sans',sans-serif;
    color:var(--ink);
    border-radius:3px;
}

input[type=radio],input[type=checkbox]{
    display:inline-block;
    width:auto;
    margin:0 6px 0 0;
    padding:0;
}

textarea{resize:vertical}

input:focus,select:focus,textarea:focus{
    outline:2px solid var(--orange);
    outline-offset:1px;
}

.helptext{
    display:block;
    font-size:11px;
    color:#8a9c95;
    margin-top:4px;
    font-weight:400;
}

.errorlist{
    list-style:none;
    padding:0;
    margin:4px 0 0;
    color:#c0392b;
    font-size:12px;
    font-weight:600;
}

.form-card{
    background:#fff;
    border:1px solid var(--line);
    padding:32px;
    max-width:440px;
}

.form-card h2{
    font:700 26px Manrope,sans-serif;
    letter-spacing:-1px;
    margin:0 0 6px;
}

.form-card>p{
    color:var(--muted);
    font-size:14px;
    margin:0 0 22px;
}

.form-card form{
    display:grid;
    gap:2px;
}

.form-card .btn{
    margin-top:22px;
    border:0;
    cursor:pointer;
    text-align:center;
    width:100%;
    font:700 14px 'DM Sans',sans-serif;
}

.form-foot{
    margin-top:16px;
    font-size:13px;
    color:var(--muted);
}

.form-foot a{
    color:#1b8867;
    font-weight:700;
}

.auth-page{
    min-height:calc(100vh - 76px);
    display:grid;
    place-items:center;
    padding:60px 20px;
}

.page-messages{
    max-width:1100px;
    margin:18px auto 0;
    padding:0 30px;
}

.alert{
    padding:12px 14px;
    border-radius:4px;
    font-size:13px;
    margin:0 0 10px;
    border-left:3px solid #1b8867;
    background:#e2f1eb;
    color:#123b35;
}

.alert-error{
    border-color:#c0392b;
    background:#fbe4e0;
    color:#7a2314;
}

.alert-success{
    border-color:#1b8867;
    background:#e2f1eb;
    color:#123b35;
}

.alert-info{
    border-color:#5591a3;
    background:#e6f1f4;
    color:#1f4a55;
}

.empty-state{
    padding:26px;
    text-align:center;
    color:var(--muted);
    font-size:13px;
    border:1px dashed var(--line);
    border-radius:6px;
}

.inline-form{
    display:flex;
    gap:8px;
    align-items:flex-end;
    flex-wrap:wrap;
}

.inline-form label{margin:0}

.card-block{
    background:#fff;
    border:1px solid var(--line);
    padding:22px;
    margin-top:16px;
}

.tag-verified{
    font-size:10px;
    color:#1d9672;
    font-weight:700;
}

.status-pill{
    display:inline-block;
    padding:2px 9px;
    border-radius:10px;
    font-size:10px;
    font-weight:700;
}

.status-requested{
    background:#fff1d3;
    color:#8a6d1f;
}

.status-confirmed{
    background:#e2f1eb;
    color:#1b8867;
}

.status-completed{
    background:#e6f1f4;
    color:#1f4a55;
}

.status-cancelled{
    background:#fbe4e0;
    color:#7a2314;
}

.action-row{
    display:flex;
    gap:8px;
    margin-top:10px;
}

.action-row form{display:inline}

.action-row button{
    border:1px solid var(--line);
    background:#fff;
    padding:7px 12px;
    border-radius:4px;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    color:var(--ink);
}

.action-row button.confirm{
    background:#1b8867;
    color:#fff;
    border-color:#1b8867;
}

.action-row button.cancel{
    color:#c0392b;
    border-color:#f0c9c1;
}

.two-col-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

@media(max-width:600px){
    .two-col-fields{grid-template-columns:1fr}
}


/* =========================================================
   MARKETPLACE ELEMENTS
   ========================================================= */

:root{
    --upwork-green:#108a00;
    --upwork-green-dark:#0d6e00;
}

.stars{
    color:#ffb400;
    letter-spacing:1px;
    font-size:13px;
}

.stars .empty{color:#e2ddd0}

.rating-line{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    color:var(--muted);
    margin-top:2px;
}

.rating-line b{color:var(--ink)}

.badge-row{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin:4px 0;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    font-size:10px;
    font-weight:700;
    padding:3px 8px;
    border-radius:3px;
    letter-spacing:.02em;
}

.badge-top-rated{
    background:#e8f6e6;
    color:var(--upwork-green-dark);
}

.badge-verified{
    background:#e2f1eb;
    color:#1b8867;
}

.badge-new{
    background:#fff1d3;
    color:#8a6d1f;
}

.tag-pill{
    display:inline-block;
    background:#f0f2f0;
    color:#4b5d55;
    font-size:11px;
    padding:4px 10px;
    border-radius:14px;
    margin:2px 4px 2px 0;
    font-weight:600;
}

.sort-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
    flex-wrap:wrap;
}

.sort-bar select{
    width:auto;
    margin:0;
    display:inline-block;
    padding:9px 10px;
}

.match-reasons{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:8px;
}

.match-reasons span{
    font-size:10.5px;
    background:#f3f8f2;
    color:var(--upwork-green-dark);
    border:1px solid #d6ecd1;
    padding:3px 8px;
    border-radius:12px;
    font-weight:600;
}

.match-score{
    font-size:10px;
    font-weight:700;
    color:var(--upwork-green-dark);
    background:#e8f6e6;
    border-radius:20px;
    padding:3px 9px;
    display:inline-block;
    margin-bottom:6px;
}

.recommend-strip{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:14px;
}

.recommend-card{
    background:#fff;
    border:1px solid var(--line);
    padding:16px;
    border-radius:6px;
}

.recommend-card .tutor-avatar{margin-bottom:8px}

.recommend-card h3{
    font:700 15px Manrope,sans-serif;
    margin:0 0 2px;
}

.recommend-card p{
    margin:0;
    font-size:12px;
    color:var(--muted);
}

.progress-bar-track{
    background:#eef1ee;
    border-radius:6px;
    height:8px;
    overflow:hidden;
    margin-top:4px;
}

.progress-bar-fill{
    background:var(--upwork-green);
    height:100%;
    border-radius:6px;
}

.confidence-row{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:var(--muted);
    margin:8px 0;
}

.confidence-row b{
    width:90px;
    flex-shrink:0;
    color:var(--ink);
    font-weight:600;
}

.portal-tabs{
    display:flex;
    gap:8px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.portal-tabs a{
    padding:8px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:700;
    border:1px solid var(--line);
    background:#fff;
}

.portal-tabs a.active{
    background:var(--ink);
    color:#fff;
    border-color:var(--ink);
}

.report-card{
    background:#fff;
    border:1px solid var(--line);
    padding:18px;
    border-radius:6px;
    margin-top:12px;
}

.report-card header{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:6px;
}

.report-card header span{
    font-size:11px;
    color:var(--muted);
}

.report-card .topics{margin:8px 0}

.rate-prompt{
    background:#fff8e9;
    border:1px solid #f1dfa6;
    padding:14px 16px;
    border-radius:6px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-top:12px;
}

.rate-prompt p{
    margin:0;
    font-size:13px;
}

.star-choice ul{
    list-style:none;
    display:flex;
    gap:10px;
    padding:0;
    margin:6px 0 0;
}

.star-choice li{display:inline-block}

.star-choice label{
    width:auto;
    margin:0;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:9px 14px;
    border:1px solid var(--line);
    border-radius:20px;
    cursor:pointer;
    font-size:13px;
    font-weight:700;
    color:var(--ink);
}

.star-choice input{
    width:auto;
    margin:0;
}

.star-choice input:checked + label,
.star-choice label:has(input:checked){
    background:#fff8e9;
    border-color:#ffb400;
    color:#8a6d1f;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:760px){

    .search-layout,
    .split-guide,
    .join-page,
    .app-shell,
    .dash-grid,
    .billing-grid,
    .messages-page{
        grid-template-columns:1fr;
    }

    .directory,.account-page{
        padding:45px 20px;
    }

    .filters{
        display:none;
    }

    .tutor-row{
        padding:16px;
    }

    .tutor-side{
        display:none;
    }

    /* Keep Join page visible on mobile */
    .join-aside{
        display:block;
        padding:48px 22px;
        background:#fff;
    }

    .app-nav{
        display:none;
    }

    .join-page>section,
    .dash{
        padding:48px 22px;
    }

    .role-grid,
    .metric-grid{
        grid-template-columns:1fr;
    }

    .dash-head{
        display:block;
    }

    .dash-head .btn{
        margin-top:20px;
    }

    .next-session>a{
        display:none;
    }

    .progress-card{
        grid-template-columns:1fr;
    }

    .messages-page{
        margin:0;
    }

    .conversations{
        display:none;
    }

    .footer{
        grid-template-columns:1fr;
    }

    .recommend-strip{
        grid-template-columns:1fr;
    }

    .directory-title h1,
    .info-hero h1,
    .join-page h1,
    .account-page h1{
        font-size:42px;
    }
}
/* =========================================================
   JOIN PAGE — FORCE WHITE BACKGROUND
   ========================================================= */

body:has(.join-page),
body:has(.join-page) main,
body:has(.join-page) .join-page,
body:has(.join-page) .join-page > section,
body:has(.join-page) .join-page .join-aside {
    background: #ffffff !important;
}

/* Main join content */
.join-page {
    background: #ffffff !important;
    color: var(--ink) !important;
}

/* Left side */
.join-page > section {
    background: #ffffff !important;
}

/* Right side */
.join-page .join-aside {
    background: #ffffff !important;
    color: var(--ink) !important;
}

/* Text */
.join-page h1,
.join-page h2,
.join-page h3,
.join-page h4 {
    color: var(--ink) !important;
}

.join-page p {
    color: #60786f;
}

/* Keep the orange heading */
.join-page h1 span,
.join-page .coral {
    color: #e9815b !important;
}

/* Join cards */
.join-page .role-grid > a {
    background: #ffffff !important;
}

/* Right-side divider */
.join-page .aside-stat {
    border-top-color: #dfe7e3 !important;
}
body:has(.join-page) {
    background: #fff !important;
}

/* Topbar logo square on the join page: white instead of green */
body:has(.join-page) .topbar .brand-mark {
    background: #ffffff !important;
    color: #0b4726 !important;
}