@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
:root{font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;color:#e8edf6;background:#0b1120;--bg:#0b1120;--panel:#121b2d;--panel2:#172338;--line:#29364d;--text:#e8edf6;--muted:#9eacc2;--accent:#9be5c2;--accent-ink:#0b3328;--blue:#8bb8ff;--red:#ff9b9b;--shadow:0 14px 40px #0002}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top right,#172a3b 0,transparent 40%),var(--bg);color:var(--text);min-height:100vh}button,input{font:inherit}button{cursor:pointer;transition:transform .15s,opacity .15s}button:hover{opacity:.9}button:active{transform:scale(.98)}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1180px)/2));border-bottom:1px solid #ffffff12;background:#0b1120d9;backdrop-filter:blur(16px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);font-weight:800;letter-spacing:-1px}.brand strong,.brand small{display:block}.brand strong{font-size:16px}.brand small{color:var(--muted);font-size:12px;margin-top:2px}.container{max-width:1180px;margin:auto;padding:38px 22px 50px}.hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}.eyebrow{color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.5px}.hero h1{font-size:clamp(28px,4vw,42px);letter-spacing:-1.2px;margin:8px 0}.hero p,.section-heading p{color:var(--muted);margin:0;line-height:1.8}.primary,.secondary,.ghost,.danger-outline{border-radius:12px;padding:11px 17px;font-weight:700;border:1px solid transparent;white-space:nowrap}.primary{background:var(--accent);color:var(--accent-ink)}.secondary{background:var(--panel2);border-color:var(--line);color:var(--text)}.ghost{background:transparent;color:var(--text);border-color:var(--line)}.danger-outline{background:transparent;color:var(--red);border-color:#743e4b;margin-inline-start:8px}.summary-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:14px;margin:30px 0 44px}.summary-card{background:linear-gradient(145deg,var(--panel),#111a2a);border:1px solid var(--line);border-radius:18px;padding:20px;min-height:130px;box-shadow:var(--shadow)}.summary-card>span{font-size:12px;color:var(--muted)}.big-number{font-size:32px;font-weight:700;letter-spacing:-1px;margin:10px 0 4px;font-variant-numeric:tabular-nums}.featured .big-number{color:var(--accent);font-size:38px}.summary-card small{color:var(--muted);font-size:11px}.meter,.progress-track{height:5px;background:var(--line);border-radius:9px;overflow:hidden;margin:8px 0}.meter span,.progress-track span{display:block;height:100%;width:0;background:var(--accent);border-radius:9px;transition:width .25s}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.section-heading h2{margin:0 0 5px;font-size:23px}.section-heading p{font-size:13px}.semester-list{display:grid;gap:24px}.semester{border:1px solid var(--line);border-radius:20px;background:#0e1727b8;overflow:hidden}.semester-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:19px 21px;background:var(--panel);border-bottom:1px solid var(--line)}.semester-head h3{margin:0;font-size:17px}.semester-sub{font-size:12px;color:var(--muted);margin-top:4px}.semester-actions{display:flex;gap:8px;align-items:center}.small-btn{background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:10px;padding:8px 11px}.semester-courses{padding:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.course-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:17px;min-width:0}.course-head,.course-title-wrap{display:flex;align-items:center}.course-head{justify-content:space-between;margin-bottom:17px}.course-title-wrap{gap:10px}.course-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px #9be5c21a}.course-head h3{font-size:15px;margin:0}.course-meta{font-size:11px;color:var(--muted);margin-top:3px}.icon-button{border:1px solid var(--line);background:transparent;color:var(--muted);width:30px;height:30px;border-radius:9px;font-size:21px;line-height:1}.course-fields{display:grid;grid-template-columns:1.6fr .8fr;gap:10px}.course-fields label,.assessment-row label{font-size:11px;color:var(--muted);display:flex;flex-direction:column;gap:6px}.course-fields label span{font-size:10px;display:inline}.course-fields input,.assessment-row input,.assessment-row select,.settings input{width:100%;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px 10px;outline:none}.course-fields input:focus,.assessment-row input:focus,.settings input:focus{border-color:var(--accent)}.assessment-heading{display:flex;align-items:center;justify-content:space-between;margin:20px 0 10px}.assessment-heading h4{font-size:13px;margin:0}.weight-status{font-size:11px;color:var(--muted)}.weight-status.over{color:var(--red)}.assessments{display:grid;gap:8px}.assessment-row{display:grid;grid-template-columns:1.2fr .8fr .8fr 28px;align-items:end;gap:7px}.assessment-row label{gap:5px}.assessment-row input{padding:8px;font-size:12px}.assessment-row .earned{border-color:#3d5c55}.assessment-row .remove-assessment{height:32px;border:0;background:transparent;color:var(--muted);font-size:18px}.assessment-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}.text-button{background:none;border:0;color:var(--blue);font-size:11px;padding:3px 0}.progress-block{margin-top:19px}.progress-label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.progress-label strong{color:var(--text);font-variant-numeric:tabular-nums}.remaining-text{font-size:11px;color:var(--muted);margin-top:6px}.prediction{margin-top:17px;border:1px solid #2b4b43;background:linear-gradient(145deg,#142b2a66,#101a2b);border-radius:13px;padding:14px}.prediction-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.prediction-top h4{font-size:13px;margin:3px 0 0}.status-pill{font-size:10px;color:var(--accent);background:#9be5c218;border:1px solid #9be5c233;border-radius:30px;padding:5px 8px;white-space:nowrap}.prediction-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:13px}.target{border:1px solid var(--line);background:#0b1422a8;border-radius:10px;padding:9px;min-width:0}.target .grade{font-size:13px;font-weight:700}.target .need{font-size:10px;color:var(--muted);margin-top:4px;line-height:1.5}.target.possible .grade{color:var(--accent)}.target.impossible{opacity:.55}.target.impossible .need{color:var(--red)}.final-grade{font-size:11px;color:var(--muted);line-height:1.7;margin-top:12px}.final-grade strong{color:var(--text)}.empty-state{text-align:center;padding:54px 20px;border:1px dashed var(--line);border-radius:18px;display:none}.empty-icon{width:48px;height:48px;border-radius:16px;background:var(--panel2);display:grid;place-items:center;margin:auto;font-size:26px;color:var(--accent)}.empty-state h3{margin:16px 0 5px}.empty-state p{color:var(--muted);font-size:13px;margin:0 0 18px}footer{margin-top:40px;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:12px;line-height:1.8}.settings{margin-top:12px}.settings summary{cursor:pointer;color:var(--text);font-weight:600}.grade-settings{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}.grade-settings label{font-size:11px;display:flex;flex-direction:column;gap:5px}.footnote{font-size:11px;opacity:.7}.light{--bg:#f4f7fb;--panel:#fff;--panel2:#edf2f8;--line:#dce4ee;--text:#1c293b;--muted:#63748b;--accent:#087d5b;--accent-ink:#fff;--blue:#245fba;--red:#bd394c;--shadow:0 12px 30px #1e35500b;background:radial-gradient(ellipse at top right,#e4f5ef 0,transparent 45%),var(--bg);color:var(--text)}.light .topbar{background:#f4f7fbe8;border-bottom-color:var(--line)}.light .summary-card{background:linear-gradient(145deg,#fff,#f6f9fc)}.light .semester{background:#ffffffb8}.light .prediction{background:#eff9f4;border-color:#cce8dc}.light .target{background:#ffffffc7}.light .assessment-row .earned{border-color:#a5d5c4}
@media(max-width:850px){.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.semester-courses{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.grade-settings{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:500px){.container{padding:25px 13px}.topbar{padding:0 14px}.summary-grid{gap:9px}.summary-card{padding:14px;min-height:112px}.big-number{font-size:27px}.featured .big-number{font-size:33px}.semester-head{padding:15px;align-items:flex-start}.semester-actions{flex-direction:column;align-items:stretch}.semester-courses{padding:10px}.course-card{padding:13px}.prediction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.assessment-row{grid-template-columns:1fr .7fr .7fr 22px}.assessment-row input{padding:7px 5px}.section-heading h2{font-size:20px}}

/* Compact, tap-to-expand course cards */
.course-head{margin-bottom:8px;gap:10px}.course-open{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1;min-width:0;text-align:right;border:0;background:transparent;color:var(--text);padding:0}.course-open .course-title-wrap{min-width:0}.course-open .course-title{font-size:14px}.course-open .course-meta{display:block}.course-chevron{color:var(--muted);font-size:20px;transition:transform .18s}.expanded .course-chevron{transform:rotate(180deg)}.course-head-actions{display:flex;align-items:center;gap:8px}.course-status-mini{font-size:10px;color:var(--muted);white-space:nowrap}.course-quick{font-size:11px;color:var(--muted);line-height:1.7;padding:8px 10px;margin-top:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px}.course-details{display:none;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}.expanded .course-details{display:block}.course-card{padding:13px}.course-card .course-fields{grid-template-columns:1fr .65fr}.assessment-row input{font-size:16px!important;line-height:1.3;min-height:40px;touch-action:manipulation}.assessment-row .earned{background:color-mix(in srgb,var(--accent) 7%,var(--bg));font-variant-numeric:tabular-nums}.assessment-row .assessment-max{font-variant-numeric:tabular-nums}.course-card:not(.expanded) .course-head{margin-bottom:0}
@media(max-width:500px){.semester-head{gap:8px}.semester-actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}.small-btn{font-size:11px;padding:7px 8px}.course-status-mini{display:none}.course-open .course-title{font-size:13px}.course-quick{padding:8px}.assessment-row{grid-template-columns:minmax(0,1.1fr) minmax(54px,.7fr) minmax(54px,.7fr) 22px;gap:5px}.assessment-row input{padding:8px 5px;min-width:0}}

/* Supabase account panel */
.auth-panel{max-width:1180px;margin:18px auto 0;padding:18px 22px;border:1px solid var(--line);border-radius:16px;background:var(--panel);display:grid;grid-template-columns:minmax(200px,.8fr) minmax(280px,1.2fr);gap:16px;align-items:center}
.auth-intro strong{font-size:15px;color:var(--text)}.auth-intro p{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.7}
.auth-form{display:grid;grid-template-columns:1fr 1fr;gap:9px}.auth-form label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--muted)}.auth-form input{width:100%;min-width:0;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:10px;outline:none}.auth-form input:focus{border-color:var(--accent)}.auth-actions{grid-column:1/-1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.auth-actions button{font-size:12px}.auth-signed-in{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px}.auth-signed-in strong{color:var(--text);overflow-wrap:anywhere}.auth-message{grid-column:1/-1;margin:0;font-size:11px;color:var(--muted);line-height:1.7}.auth-message.error{color:var(--red)}.auth-message.success{color:var(--accent)}
@media(max-width:760px){.auth-panel{margin:12px 13px 0;padding:14px;grid-template-columns:1fr}.auth-form{grid-template-columns:1fr}.auth-actions{grid-column:auto}.auth-message{grid-column:auto}}

.top-actions{display:flex;align-items:center;gap:8px}.nav-link{display:inline-flex;align-items:center;text-decoration:none;font-size:12px}.top-actions .ghost,.top-actions .secondary{font-size:12px;padding:9px 12px}

/* iPhone responsive header and account menu fixes */
.topbar{height:auto;min-height:78px;gap:12px;flex-wrap:wrap;padding-block:12px}
.brand{min-width:0;flex:0 1 auto}.brand>div:last-child{min-width:0}.brand strong,.brand small{overflow-wrap:anywhere}
.top-actions{min-width:0;flex-wrap:wrap;justify-content:flex-start}
.profile-panel{position:relative}
@media(max-width:600px){
  .topbar{position:relative;align-items:flex-start;flex-direction:column;gap:12px;padding:12px 13px}
  .brand{width:100%;gap:10px}.brand-mark{flex:0 0 42px;width:42px;height:42px}
  .brand strong{font-size:15px}.brand small{font-size:11px;line-height:1.5}
  .top-actions{width:100%;gap:6px;align-items:center}
  .top-actions .ghost,.top-actions .secondary,.top-actions .nav-link{font-size:11px;padding:9px 10px;white-space:normal}
  .profile-box{position:fixed;top:auto;left:12px;right:12px;bottom:12px;width:auto;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;padding:16px;z-index:1000}
  .profile-box .danger-outline{margin-inline-start:0}
  body:has(#profilePanel[open]){overflow:hidden}
}
@supports(padding: max(0px)){
 @media(max-width:600px){.profile-box{bottom:max(12px,env(safe-area-inset-bottom))}}
}