/* GradeCalcOnline — DESIGN D "Navy": Saqib's pair #112a46 + #acc8e5 (8.42:1 AAA) */
:root{
  --navy:#112a46; --navy-deep:#0b1d33; --sky:#acc8e5; --sky-soft:#d9e7f7;
  --ink:#1a2333; --muted:#4a5468;
  --bg:#ffffff; --wash:#f2f6fc; --card:#ffffff; --border:#d7e2f2;
  --success:#12805c; --danger:#c0392b; --radius:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.65; font-size:1.02rem; overflow-x:hidden;}
.wrap{max-width:880px; margin:0 auto; padding:0 18px;}
.site-header{background:var(--navy-deep); color:#fff; padding:0; position:sticky; top:0; z-index:50; box-shadow:0 2px 12px rgba(11,29,51,.28);}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:11px; padding-bottom:11px;}
.brand{display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:800; font-size:1.25rem; letter-spacing:-.02em;}
.brand-mark{width:30px; height:30px; flex:none;}
.brand strong{color:var(--sky); font-weight:800;}
.main-nav{display:flex; gap:2px; flex-wrap:wrap; align-items:center;}
.main-nav a{color:var(--sky); text-decoration:none; padding:9px 13px; border-radius:8px; font-size:.93rem; font-weight:600;}
.main-nav a:hover{color:#fff; background:rgba(172,200,229,.12);}
.hero{background:var(--wash); padding:44px 0 32px; text-align:center; border-bottom:1px solid var(--border); margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);}
.hero h1{font-size:2.4rem; letter-spacing:-.02em; line-height:1.15; color:var(--navy);}
.hero h1 span{color:var(--navy);}
.hero .lede{color:var(--muted); margin-top:12px; font-size:1.08rem; max-width:640px; margin-left:auto; margin-right:auto;}
.calc{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin:24px 0; box-shadow:0 6px 24px rgba(17,42,70,.10);}
.calc h2{font-size:1.3rem; margin-bottom:4px; color:var(--navy);}
.calc .sub{color:var(--muted); font-size:.93rem; margin-bottom:16px;}
.modes{display:flex; gap:6px; overflow-x:auto; margin-bottom:18px; padding-bottom:4px;}
.modes button{flex:1 0 auto; border:1px solid var(--border); background:var(--wash); color:var(--navy); padding:10px 14px; border-radius:999px; font-size:.9rem; cursor:pointer; white-space:nowrap; font-family:var(--font); font-weight:600;}
.modes button.active{background:var(--navy); border-color:var(--navy); color:#fff;}
.cpanel{display:none;}
.cpanel.active{display:block;}
.crow{display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; align-items:end; margin-bottom:10px;}
.crow.two{grid-template-columns:1fr 1fr auto;}
.crow.gpa{grid-template-columns:1.4fr 1fr 1fr 1fr auto;}
label{display:block; font-size:.8rem; color:var(--muted); margin-bottom:4px; font-weight:600;}
input[type=number],input[type=text],select{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:1rem; background:#fff; color:var(--ink); font-family:var(--font);}
input:focus,select:focus{outline:2px solid var(--navy); border-color:var(--navy);}
.btn{background:var(--navy); color:#fff; border:none; padding:12px 22px; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; font-family:var(--font);}
.btn:hover{background:var(--navy-deep);}
.btn.ghost{background:#fff; color:var(--navy); border:1px solid var(--navy);}
.btn.small{padding:8px 14px; font-size:.88rem;}
.btn.danger-ghost{background:#fff; color:var(--danger); border:1px solid #e5b3ad;}
.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.result{display:none; margin-top:18px; padding:18px; border-radius:var(--radius); background:var(--wash); border:1px solid var(--sky);}
.result.show{display:block;}
.result .big{font-size:2.2rem; font-weight:800; color:var(--navy);}
.result .letter{display:inline-block; font-size:1.3rem; font-weight:800; background:var(--navy); color:var(--sky); border-radius:8px; padding:2px 14px; margin-left:10px; vertical-align:middle;}
.result p{margin-top:8px;}
.note-ok{color:var(--success); font-weight:600;}
.note-bad{color:var(--danger); font-weight:600;}
.toggle{display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; margin-bottom:16px; background:var(--wash);}
.toggle button{border:none; background:transparent; padding:9px 18px; cursor:pointer; font-size:.92rem; color:var(--muted); font-family:var(--font);}
.toggle button.on{background:var(--navy); color:#fff; font-weight:600;}
.hint{font-size:.85rem; color:var(--muted); margin-top:10px;}
.sharebox{display:none; margin-top:12px; gap:8px;}
.sharebox.show{display:flex;}
.sharebox input{flex:1;}
.lms-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin-top:6px;}
.lms-card{border:1px solid var(--border); border-radius:var(--radius); padding:16px; background:var(--wash);}
.lms-card h3{font-size:1.05rem; margin-bottom:6px; color:var(--navy);}
.lms-card p{font-size:.9rem; color:var(--muted); margin-bottom:12px;}
.prose{padding:10px 0 30px;}
.prose h2{font-size:1.45rem; margin:30px 0 12px; letter-spacing:-.01em; color:var(--navy);}
.prose h3{font-size:1.15rem; margin:24px 0 10px; color:var(--navy);}
.prose p{margin-bottom:14px;}
.prose ul,.prose ol{margin:0 0 16px 22px;}
.prose li{margin-bottom:8px;}
.prose table{width:100%; border-collapse:collapse; margin:16px 0; font-size:.95rem;}
.prose th,.prose td{border:1px solid var(--border); padding:10px 12px; text-align:left;}
.prose th{background:var(--navy); color:#fff; font-weight:700;}
.prose .answer{background:var(--wash); border-left:4px solid var(--navy); padding:14px 16px; border-radius:0 8px 8px 0; margin:16px 0;}
.faq details{background:var(--card); border:1px solid var(--border); border-radius:8px; padding:14px 16px; margin-bottom:10px;}
.faq summary{font-weight:600; cursor:pointer; color:var(--navy);}
.faq div{margin-top:8px; color:var(--muted);}
.related{margin:30px 0;}
.related h2{font-size:1.25rem; margin-bottom:12px;}
.related ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px;}
.related a{display:block; border:1px solid var(--border); border-radius:8px; padding:12px 14px; text-decoration:none; color:var(--navy); font-weight:600; background:#fff;}
.related a:hover{border-color:var(--navy); background:var(--wash);}
.site-footer{background:var(--navy-deep); color:var(--sky); padding:46px 0 0; margin-top:24px;}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; padding-bottom:34px;}
.foot-brand p{font-size:.92rem; opacity:.85; margin:12px 0; line-height:1.6;}
.foot-brand a{color:var(--sky);}
.foot-col h3{color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:14px;}
.foot-col ul{list-style:none; margin:0; padding:0;}
.foot-col li{margin-bottom:9px;}
.foot-col a{color:var(--sky); text-decoration:none; font-size:.92rem; opacity:.82;}
.foot-col a:hover{color:#fff; opacity:1;}
.foot-bottom{border-top:1px solid rgba(172,200,229,.16); padding:18px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.foot-legal{display:flex; gap:18px; flex-wrap:wrap;}
.foot-legal a{color:var(--sky); text-decoration:none; font-size:.88rem; opacity:.75;}
.foot-legal a:hover{color:#fff; opacity:1;}
.copy{font-size:.85rem; opacity:.7;}
@media(max-width:640px){
  .crow,.crow.two,.crow.gpa{grid-template-columns:1fr 1fr;}
  .hero h1{font-size:1.8rem;}
  .result .big{font-size:1.8rem;}
  .header-inner{flex-direction:column; align-items:flex-start; gap:8px;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:24px;}
  .foot-brand{grid-column:1 / -1;}
  .foot-bottom{flex-direction:column; align-items:flex-start;}
}
@media print{
  .site-header,.modes,.actions,.faq,.related,.site-footer,.noprint,.hero{display:none !important;}
  .result{display:block !important; border:none;}
}