:root{--ink:#142033;--muted:#667085;--line:#e5e7eb;--bg:#f5f7fb;--card:#fff;--red:#ef4444;--orange:#f59e0b;--green:#16a34a;--nav:#0f1f38}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}a{color:inherit}.shell{min-height:100vh;display:grid;grid-template-columns:240px 1fr}.sidebar{background:var(--nav);color:#fff;padding:22px 16px;position:sticky;top:0;height:100vh}.brand{font-weight:900;font-size:20px;margin:0 10px 24px}.nav a{display:block;text-decoration:none;padding:10px 12px;border-radius:10px;margin:3px 0;color:#d8e2f0}.nav a:hover,.nav a.active{background:#1e3558;color:#fff}.main{min-width:0}.topbar{height:66px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 26px}.content{padding:26px;max-width:1300px;margin:auto}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 4px 18px rgba(16,24,40,.04)}.grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.metric b{font-size:30px}.metric span{display:block;color:var(--muted);margin-top:5px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:10px 15px;font-weight:800;text-decoration:none;cursor:pointer}.btn-primary{background:linear-gradient(135deg,var(--red),var(--orange));color:#fff}.btn-dark{background:var(--nav);color:#fff}.btn-light{background:#fff;border:1px solid var(--line)}.btn-danger{background:#fee2e2;color:#991b1b}.input,.select,textarea{width:100%;padding:11px 12px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;font:inherit}.field{margin-bottom:14px}.field label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:11px 9px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.table th{font-size:12px;text-transform:uppercase;color:var(--muted)}.badge{display:inline-block;padding:4px 9px;border-radius:99px;background:#eef2ff;font-size:12px;font-weight:800}.badge.green{background:#dcfce7;color:#166534}.badge.red{background:#fee2e2;color:#991b1b}.alert{padding:12px 14px;border-radius:10px;margin-bottom:16px}.alert.success{background:#dcfce7;color:#166534}.alert.error{background:#fee2e2;color:#991b1b}.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.page-head h1{margin:0}.muted{color:var(--muted)}.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 10%,#fee2e2,transparent 30%),radial-gradient(circle at 80% 20%,#ffedd5,transparent 28%),var(--bg)}.auth-card{width:min(460px,100%)}.auth-card h1{margin-top:0}.slots{display:grid;gap:12px}.slot{border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.signature{border:2px dashed #98a2b3;border-radius:12px;background:#fff;width:100%;height:180px;touch-action:none}.mobile-nav{display:none}@media(max-width:900px){.shell{display:block}.sidebar{display:none}.mobile-nav{display:flex;background:var(--nav);padding:10px;gap:8px;overflow:auto}.mobile-nav a{color:#fff;text-decoration:none;white-space:nowrap;padding:8px}.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}.content{padding:16px}.topbar{padding:0 16px}.page-head{align-items:flex-start;flex-direction:column}.slot{align-items:flex-start;flex-direction:column}}
/* student-mobile-app-redesign-v1 */

.student-app{
    max-width:1100px;
    margin:0 auto;
}

.student-welcome{
    background:linear-gradient(135deg,#0f1f38,#1e3558);
    color:#fff;
    border-radius:22px;
    padding:26px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:18px;
    box-shadow:0 12px 32px rgba(15,31,56,.16);
}

.student-welcome h1{
    margin:5px 0 4px;
    font-size:30px;
    line-height:1.1;
}

.student-welcome p{
    margin:0;
    color:#d8e2f0;
}

.student-eyebrow,
.student-section-label{
    display:block;
    font-size:11px;
    letter-spacing:.09em;
    font-weight:800;
    color:#64748b;
    text-transform:uppercase;
}

.student-welcome .student-eyebrow{
    color:#b8c8dc;
}

.student-balance{
    min-width:130px;
    padding:14px 16px;
    border-radius:16px;
    background:rgba(255,255,255,.11);
    text-align:center;
}

.student-balance span{
    display:block;
    font-size:12px;
    color:#d8e2f0;
}

.student-balance strong{
    display:block;
    margin-top:4px;
    font-size:28px;
}

.student-action-alert{
    border:1px solid #fed7aa;
    background:#fff7ed;
    border-radius:18px;
    padding:18px;
    display:flex;
    gap:18px;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
}

.student-action-alert p{
    margin:4px 0 0;
    color:#9a5a10;
}

.student-status-dot{
    display:inline-block;
    width:9px;
    height:9px;
    background:#f59e0b;
    border-radius:50%;
    margin-right:6px;
}

.student-quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin-bottom:18px;
}

.student-quick-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:16px;
    text-decoration:none;
    display:flex;
    gap:12px;
    align-items:center;
    min-height:82px;
}

.student-quick-card:hover{
    border-color:#cbd5e1;
    box-shadow:0 6px 20px rgba(15,23,42,.06);
}

.student-quick-card strong{
    display:block;
    font-size:14px;
}

.student-quick-card small{
    display:block;
    color:#667085;
    margin-top:3px;
    line-height:1.35;
}

.student-quick-primary{
    background:#0f1f38;
    color:#fff;
    border-color:#0f1f38;
}

.student-quick-primary small{
    color:#d8e2f0;
}

.student-quick-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    display:grid;
    place-items:center;
    flex:0 0 38px;
    background:#eef2f7;
    color:#0f1f38;
    font-weight:900;
}

.student-quick-primary .student-quick-icon{
    background:rgba(255,255,255,.13);
    color:#fff;
}

.student-dashboard-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.student-panel,
.student-package-card,
.student-offer-card,
.student-lesson-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:20px;
    box-shadow:0 4px 18px rgba(16,24,40,.035);
}

.student-panel h2,
.student-package-card h2,
.student-offer-card h2,
.student-lesson-card h2{
    margin:5px 0 10px;
}

.student-panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.student-big-time{
    font-size:30px;
    font-weight:850;
    letter-spacing:-.02em;
    margin:10px 0 14px;
    color:#0f1f38;
}

.student-detail-row{
    display:flex;
    justify-content:space-between;
    gap:15px;
    padding:10px 0;
    border-top:1px solid #eef2f7;
    font-size:14px;
}

.student-detail-row span{
    color:#667085;
}

.student-detail-row strong{
    text-align:right;
}

.student-primary-action,
.student-secondary-action,
.student-bank-button,
.student-card-button,
.student-cancel-action{
    min-height:46px;
    border-radius:12px;
    font-weight:750;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 16px;
    font-family:inherit;
    cursor:pointer;
}

.student-primary-action,
.student-bank-button{
    background:#0f1f38;
    color:#fff;
    border:1px solid #0f1f38;
}

.student-secondary-action,
.student-card-button{
    background:#fff;
    color:#0f1f38;
    border:1px solid #cbd5e1;
}

.student-secondary-action{
    margin-top:14px;
}

.student-full-action{
    width:100%;
    margin-top:14px;
}

.student-empty{
    color:#667085;
    margin:8px 0 16px;
}

.student-link-list{
    margin-top:10px;
}

.student-link-list a{
    display:flex;
    justify-content:space-between;
    text-decoration:none;
    padding:13px 0;
    border-top:1px solid #eef2f7;
    font-weight:650;
}

.student-page-intro{
    margin-bottom:18px;
}

.student-page-intro h1{
    margin:5px 0;
    font-size:28px;
}

.student-page-intro p{
    color:#667085;
    margin:0 0 10px;
    max-width:700px;
}

.student-soft-badge{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border-radius:999px;
    background:#f1f5f9;
    color:#475569;
    font-size:12px;
    font-weight:750;
}

.student-coupon-box{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:16px;
    margin-bottom:16px;
    display:grid;
    grid-template-columns:1fr minmax(180px,300px);
    gap:16px;
    align-items:center;
}

.student-coupon-box p{
    margin:4px 0 0;
    color:#667085;
    font-size:13px;
}

.student-package-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.student-package-card{
    display:flex;
    flex-direction:column;
}

.student-package-top{
    min-height:120px;
}

.student-package-top p{
    color:#667085;
}

.student-package-price{
    margin:10px 0 3px;
}

.student-package-price strong{
    display:block;
    font-size:31px;
    line-height:1;
}

.student-package-price span{
    display:block;
    color:#475569;
    margin-top:7px;
    font-weight:650;
}

.student-hour-price{
    color:#667085;
    font-size:12px;
    margin-bottom:18px;
}

.student-package-checkout{
    display:grid;
    gap:9px;
    margin-top:auto;
}

.student-bank-button,
.student-card-button{
    width:100%;
}

.student-bank-button{
    flex-direction:column;
    line-height:1.15;
}

.student-bank-button small{
    color:#d8e2f0;
    font-size:10px;
    margin-top:2px;
}

.student-stack{
    display:grid;
    gap:14px;
}

.student-offer-summary{
    display:flex;
    align-items:baseline;
    gap:7px;
    padding:14px 0;
}

.student-offer-summary strong{
    font-size:30px;
}

.student-policy-box{
    border:1px solid #dbeafe;
    background:#eff6ff;
    border-radius:16px;
    padding:15px 17px;
    margin-bottom:16px;
}

.student-policy-box p{
    margin:5px 0 0;
    color:#475569;
    line-height:1.45;
}

.student-lesson-main{
    display:flex;
    align-items:center;
    gap:22px;
    padding:6px 0 12px;
}

.student-lesson-main .student-big-time{
    margin:0;
}

.student-lesson-actions{
    display:flex;
    gap:9px;
    align-items:center;
    flex-wrap:wrap;
    margin-top:12px;
}

.student-lesson-actions .student-secondary-action{
    margin-top:0;
}

.student-lesson-actions form{
    margin:0;
}

.student-cancel-action{
    background:#fff;
    border:1px solid #fecaca;
    color:#b42318;
}

.student-cancel-notice{
    margin-top:12px;
    border-radius:10px;
    padding:10px 12px;
    font-size:12px;
    font-weight:650;
}

.student-cancel-notice.safe{
    background:#ecfdf3;
    color:#166534;
}

.student-cancel-notice.late{
    background:#fff1f2;
    color:#9f1239;
}

.student-empty-panel{
    text-align:center;
    padding:32px 20px;
}


@media(max-width:900px){

    body{
        padding-bottom:76px;
    }

    .student-mobile-nav{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        top:auto;
        z-index:9000;
        height:64px;
        padding:6px 4px calc(6px + env(safe-area-inset-bottom));
        background:#fff;
        border-top:1px solid #e5e7eb;
        box-shadow:0 -6px 22px rgba(15,23,42,.07);
        overflow:visible;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        gap:0;
    }

    .student-mobile-nav a{
        color:#475569;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        padding:7px 2px;
        font-size:11px;
        font-weight:750;
        border-radius:10px;
    }

    .student-mobile-nav a:active{
        background:#f1f5f9;
        color:#0f1f38;
    }

    .content{
        padding:14px 12px 22px;
    }

    .topbar{
        height:58px;
        padding:0 14px;
        font-size:13px;
    }

    .student-welcome{
        border-radius:18px;
        padding:19px;
        align-items:flex-start;
    }

    .student-welcome h1{
        font-size:24px;
    }

    .student-balance{
        min-width:92px;
        padding:10px;
    }

    .student-balance strong{
        font-size:22px;
    }

    .student-action-alert{
        align-items:stretch;
        flex-direction:column;
        padding:15px;
    }

    .student-action-alert .student-primary-action{
        width:100%;
    }

    .student-quick-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .student-quick-card{
        padding:13px;
        align-items:flex-start;
        flex-direction:column;
        min-height:112px;
    }

    .student-dashboard-grid{
        grid-template-columns:1fr;
    }

    .student-panel,
    .student-package-card,
    .student-offer-card,
    .student-lesson-card{
        border-radius:16px;
        padding:16px;
    }

    .student-page-intro h1{
        font-size:24px;
    }

    .student-coupon-box{
        grid-template-columns:1fr;
        gap:10px;
    }

    .student-package-grid{
        grid-template-columns:1fr;
    }

    .student-package-top{
        min-height:0;
    }

    .student-package-price strong{
        font-size:30px;
    }

    .student-bank-button,
    .student-card-button{
        min-height:50px;
    }

    .student-lesson-main{
        gap:16px;
    }

    .student-lesson-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .student-lesson-actions .student-secondary-action,
    .student-lesson-actions form,
    .student-cancel-action{
        width:100%;
    }
}