:root{--purple:#5b2aa8;--purple-dark:#3f1d79;--purple-soft:#f3effd;--yellow:#ffc83d;--yellow-soft:#fff8df;--blue:#3189e8;--blue-soft:#eaf4ff;--ink:#26233a;--muted:#6e6a7d;--white:#fff;--line:#e8e5ef;--bg:#faf9fd;--shadow:0 18px 50px rgba(61,38,104,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.6}a{text-decoration:none;color:inherit}button,input,textarea,select{font:inherit}.container{width:min(1120px,92%);margin:auto}.section{padding:80px 0}.soft{background:var(--bg)}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:9px;color:var(--purple)}.brand-mark{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:var(--purple);color:#fff;font-size:22px}.brand small,.brand strong{display:block;line-height:1.1}.brand small{font-size:10px;font-weight:700}.brand strong{font-size:19px}.main-nav{display:flex;align-items:center;gap:22px;font-size:13px;font-weight:700}.main-nav a:hover{color:var(--purple)}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:12px 19px;font-weight:800;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn-small{padding:9px 14px}.btn-yellow{background:var(--yellow);color:#3d2b00}.btn-blue-outline{border:1.5px solid var(--blue);color:var(--blue);background:#fff}.btn-purple{background:var(--purple);color:#fff}.btn-light{background:#fff;border:1px solid var(--line);color:var(--purple)}.menu-toggle{display:none;background:none;border:0;font-size:26px;color:var(--purple)}.hero{overflow:hidden;background:linear-gradient(180deg,#fff,#fbfaff)}.hero-grid{display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:55px;min-height:600px}.eyebrow{color:var(--purple);font-weight:900;font-size:11px;letter-spacing:1.6px;margin-bottom:10px}.hero h1{font-size:clamp(38px,5vw,62px);line-height:1.05;letter-spacing:-2.5px;margin:0 0 20px}.hero h1 span{color:var(--purple)}.hero p{font-size:17px;color:var(--muted);max-width:650px}.hero-actions{display:flex;gap:12px;margin:25px 0}.schedule-card{display:inline-flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow)}.schedule-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--purple-soft);color:var(--purple);font-size:22px}.schedule-card strong,.schedule-card span{display:block}.schedule-card span{font-size:12px;color:var(--muted)}.hero-visual{position:relative;min-height:490px;display:grid;place-items:center}.blob{position:absolute;width:420px;height:420px;border-radius:45% 55% 60% 40%;background:linear-gradient(145deg,#eee5ff,#d8c7ff);right:15px;top:45px;transform:rotate(-12deg)}.photo-card{position:relative;z-index:2;width:min(420px,90%);height:430px;background:#fff;border-radius:30px;box-shadow:0 30px 80px rgba(66,38,110,.18);padding:14px;transform:rotate(2deg)}.photo-placeholder{height:100%;border-radius:23px;background:linear-gradient(145deg,#ece4ff,#fff9e8);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--purple);text-align:center;padding:30px}.quran-icon{font-size:75px;margin-bottom:18px}.photo-placeholder strong{font-size:22px}.photo-placeholder span{color:var(--muted);font-size:12px;max-width:260px}.floating-card{position:absolute;z-index:4;left:0;bottom:38px;background:#fff;padding:14px 17px;border-radius:15px;box-shadow:var(--shadow);display:flex;gap:11px;align-items:center}.floating-card b{font-size:26px;color:var(--purple)}.floating-card span{font-size:12px;color:var(--muted);font-weight:700}.section-heading{text-align:center;max-width:700px;margin:0 auto 38px}.section-heading h2,.teacher-copy h2,.portal-grid h2,.form-section h2,.dashboard-top h2{font-size:37px;line-height:1.12;letter-spacing:-1px;margin:0 0 10px}.section-heading p,.portal-grid>div>p{color:var(--muted)}.cards.four{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.program-card{padding:25px 21px;border:1px solid var(--line);border-radius:19px;background:#fff;min-height:245px;box-shadow:0 8px 28px rgba(53,34,90,.05)}.program-card .icon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:23px;margin-bottom:16px}.program-card.purple .icon{background:var(--purple-soft)}.program-card.yellow .icon{background:var(--yellow-soft)}.program-card.blue .icon{background:var(--blue-soft)}.program-card h3{font-size:16px;line-height:1.3;margin:0 0 9px}.program-card p{color:var(--muted);font-size:12px}.schedule-wide{margin-top:20px;background:linear-gradient(100deg,var(--purple),#7448c1);color:#fff;border-radius:19px;padding:22px 27px;display:flex;justify-content:space-between;align-items:center;gap:25px}.schedule-wide>div{display:flex;align-items:center;gap:13px}.schedule-wide .schedule-icon{background:rgba(255,255,255,.14);color:#fff}.schedule-wide strong,.schedule-wide b{display:block}.schedule-wide strong{font-size:11px;opacity:.8}.schedule-wide b{font-size:17px}.schedule-wide p{margin:0;font-size:12px;opacity:.85}.teacher-box{display:grid;grid-template-columns:350px 1fr;gap:60px;align-items:center}.teacher-photo{height:410px;border-radius:27px;background:linear-gradient(145deg,#ece3ff,#fff1ba);display:grid;place-items:center}.teacher-placeholder{font-size:52px;font-weight:900;line-height:1;color:var(--purple);text-align:center}.teacher-copy h4{margin:-2px 0 17px;color:var(--muted)}.teacher-copy p{color:var(--muted)}blockquote{margin:22px 0 0;padding:17px 19px;border-left:4px solid var(--yellow);background:var(--yellow-soft);border-radius:0 13px 13px 0;color:#67531b;font-weight:700}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.gallery-item{height:210px;position:relative;border-radius:17px;overflow:hidden;background:#f2edf9;border:1px solid var(--line)}.gallery-item img{width:100%;height:100%;object-fit:cover}.gallery-caption{position:absolute;left:0;right:0;bottom:0;padding:9px 12px;background:linear-gradient(transparent,rgba(30,15,55,.75));color:#fff;font-size:12px;font-weight:800}.gallery-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--purple);font-size:30px}.gallery-placeholder span{font-size:12px;font-weight:800}.portal-section{background:linear-gradient(120deg,#f8f5ff,#eef7ff)}.portal-grid{display:grid;grid-template-columns:1fr 410px;gap:75px;align-items:center}.check-list{list-style:none;padding:0}.check-list li{margin:10px 0;font-weight:700}.check-list li:before{content:"✓";display:inline-grid;place-items:center;width:22px;height:22px;background:#dff4e7;color:#15934c;border-radius:50%;margin-right:9px;font-size:12px}.login-card{background:#fff;border-radius:23px;padding:31px;box-shadow:var(--shadow);text-align:center}.portal-logo{margin:auto auto 12px;width:53px;height:53px;border-radius:15px;background:var(--purple);color:#fff;display:grid;place-items:center;font-size:25px}.login-card h3{margin:0;font-size:23px}.login-card p{color:var(--muted);font-size:12px}.login-card form{display:grid;gap:13px;text-align:left;margin-top:18px}.login-card label,.form-card label,.admin-form-card label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:800;color:#504b60}.login-card input,.form-card input,.form-card select,.form-card textarea,.admin-form-card input,.admin-form-card select,.admin-form-card textarea{border:1px solid #ddd9e7;border-radius:10px;padding:11px 12px;outline:none;background:#fff;color:var(--ink)}.error-box{background:#fff0f0;border:1px solid #f1baba;color:#a32323;padding:12px;border-radius:11px;margin-bottom:15px;font-size:12px}.success-box{background:#effbf3;border:1px solid #b9e6c7;color:#176b36;padding:18px;border-radius:12px;margin-bottom:15px}.info-note{background:var(--blue-soft);padding:15px;border-radius:13px;margin-top:20px;color:#315a85;font-size:13px}.form-section{display:grid;grid-template-columns:.65fr 1.35fr;gap:50px;align-items:start}.section-heading.left{text-align:left;margin:0}.form-card,.admin-form-card{padding:29px;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);background:#fff}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}.form-grid .full{grid-column:1/-1}.dashboard-section{padding:65px 0;background:#f8f7fb}.dashboard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.student-banner{background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px 19px;display:flex;gap:13px;align-items:center}.avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--purple-soft);color:var(--purple);font-weight:900}.student-banner strong,.student-banner span{display:block}.student-banner span{font-size:11px;color:var(--muted)}.dashboard-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:17px 0}.dashboard-cards>div,.dash-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px}.dashboard-cards span,.dashboard-cards b{display:block}.dashboard-cards span{font-size:11px;color:var(--muted)}.dashboard-cards b{font-size:17px;margin-top:5px}.success,.paid{color:#169651}.unpaid{color:#a56c00}.dashboard-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}.dash-panel h3{margin-top:0}.progress-row{margin:17px 0}.progress-row>span{font-size:11px;font-weight:700}.progress-row>b{float:right;font-size:11px;color:var(--purple)}.progress-row>div{clear:both;height:7px;background:#eeeaf5;border-radius:99px;margin-top:7px;overflow:hidden}.progress-row i{display:block;height:100%;background:var(--purple);border-radius:99px}.teacher-note{background:var(--yellow-soft);padding:14px;border-radius:12px;margin-top:19px;font-size:11px}.teacher-note p{margin:5px 0;color:#6b5b27}.payment-status{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:11px 0;font-size:12px}.payment-status b{border-radius:99px;padding:4px 9px;font-size:10px}.paid{background:#dff4e7}.unpaid{background:#fff1d2}.footer{background:var(--purple-dark);color:#fff;padding:50px 0 0}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr .7fr;gap:25px}.footer .brand{color:#fff}.footer .brand-mark{background:#fff;color:var(--purple)}.footer p,.footer a{color:#d8d1e8;font-size:11px}.footer a{display:block;margin:6px 0}.copyright{text-align:center;border-top:1px solid rgba(255,255,255,.12);margin-top:35px;padding:17px;color:#bdb2d6;font-size:10px}
/* admin */
.admin-body{background:#f7f6fa}.admin-shell{display:flex;min-height:100vh}.admin-sidebar{width:230px;flex:0 0 230px;background:var(--purple-dark);color:#fff;padding:20px 13px;display:flex;flex-direction:column}.admin-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 22px;font-size:16px}.admin-brand .brand-mark{background:#fff;color:var(--purple)}.admin-sidebar nav{display:flex;flex-direction:column;gap:4px}.admin-sidebar nav a,.admin-logout{padding:10px 12px;border-radius:9px;font-size:12px;color:#ded6ef}.admin-sidebar nav a:hover,.admin-sidebar nav a.active{background:rgba(255,255,255,.13);color:#fff}.admin-logout{margin-top:auto}.admin-content{flex:1;min-width:0}.admin-mobile-top{display:none}.admin-page{padding:36px;max-width:1250px}.admin-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.admin-heading h1{margin:0;font-size:34px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:17px}.stats>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}.stats span,.stats b{display:block}.stats span{font-size:10px;color:var(--muted)}.stats b{font-size:18px;margin-top:5px}.admin-table{background:#fff;border:1px solid var(--line);border-radius:15px;margin-top:17px;padding:18px;overflow:auto}.table-head{display:flex;justify-content:space-between;align-items:center}.admin-table h3{margin:0 0 10px}.table-row{display:grid;grid-template-columns:1fr 1fr 120px 120px;gap:10px;padding:11px 0;border-top:1px solid #eeeaf3;font-size:11px;align-items:center}.table-row.head{font-weight:800;color:var(--muted);border-top:0}.table-row small{display:block;color:var(--muted)}.table-row em{font-style:normal;color:var(--blue)}.admin-form-card{box-shadow:none;margin-bottom:17px}.admin-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:17px}.admin-gallery>div{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}.admin-gallery img{width:100%;height:190px;object-fit:cover;display:block}.admin-gallery b{display:block;padding:10px;font-size:12px}@media(max-width:900px){.main-nav{gap:12px}.cards.four{grid-template-columns:repeat(2,1fr)}.hero-grid,.portal-grid,.form-section{grid-template-columns:1fr}.teacher-box{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.admin-sidebar{width:190px;flex-basis:190px}.stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:700px){.menu-toggle{display:block}.main-nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;padding:15px 4%;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}.main-nav.open{display:flex}.section{padding:60px 0}.hero h1{font-size:40px}.hero-visual{min-height:360px}.blob{width:300px;height:300px}.photo-card{height:330px}.cards.four,.gallery,.dashboard-cards,.stats,.admin-gallery{grid-template-columns:1fr}.schedule-wide{flex-direction:column;align-items:flex-start}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.footer-grid{grid-template-columns:1fr}.admin-shell{display:block}.admin-sidebar{display:none}.admin-mobile-top{display:flex;background:var(--purple-dark);color:#fff;padding:15px 18px;justify-content:space-between}.admin-mobile-top a{color:#fff}.admin-page{padding:20px}.table-row{grid-template-columns:1fr 1fr 90px 90px}.section-heading h2,.teacher-copy h2,.portal-grid h2,.form-section h2,.dashboard-top h2{font-size:30px}}

.student-identity {
    margin-top: 24px;
}

.identity-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.identity-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 15px 12px;
    border-bottom: 1px solid #eee;
    min-width: 0;
}

.identity-item span {
    font-size: 13px;
    color: #777;
}

.identity-item strong {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .identity-list {
        grid-template-columns: 1fr;
    }
}

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

.student-data-grid > div {
    padding: 14px 16px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fafafa;
}

.student-data-grid span {
    display: block;
    font-size: 13px;
    color: #777;
    margin-bottom: 5px;
}

.student-data-grid strong {
    display: block;
    font-size: 15px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .student-data-grid {
        grid-template-columns: 1fr;
    }

    .student-data-grid > div[style] {
        grid-column: auto !important;
    }
}