:root{
  --navy:#0b1f3a; --navy2:#0f2a4a; --gold:#f2a900; --gold2:#ffcf5c;
  --bg:#f6f7fb; --card:#ffffff; --text:#1c2733; --muted:#5a6b7d;
  --border:#e3e7ee; --accent:#1f6feb; --good:#1a9e5c; --bad:#d64545;
  --radius:12px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

.site-header{
  background:linear-gradient(180deg,var(--navy),var(--navy2));
  color:#e8edf5; padding:14px 28px; display:flex; align-items:center; justify-content:space-between;
}
.site-header .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px;}
.site-header .brand .tag{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold2); font-weight:700; display:block;}
.site-header nav{display:flex; align-items:center; gap:18px; font-size:14px;}
.site-header nav a{color:#dce6f5;}
.site-header nav a:hover{color:#fff;}
.btn{
  display:inline-block; padding:9px 18px; border-radius:8px; font-weight:700; font-size:14px;
  border:1px solid transparent; cursor:pointer; text-align:center;
}
.btn-primary{background:var(--gold); color:#3a2600;}
.btn-primary:hover{background:var(--gold2); text-decoration:none;}
.btn-outline{background:transparent; border-color:rgba(255,255,255,.5); color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12); text-decoration:none;}
.btn-dark{background:var(--navy); color:#fff;}
.btn-dark:hover{background:var(--navy2); text-decoration:none;}
.btn-danger{background:#fdecec; color:var(--bad); border-color:#f3c8c8;}
.btn-danger:hover{background:#fbdada;}
.btn-sm{padding:5px 12px; font-size:12.5px;}

.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:460px; margin:0 auto; padding:0 24px;}

.hero{
  background:radial-gradient(circle at 20% 20%, #123256, var(--navy) 60%);
  color:#fff; padding:64px 0 72px;
}
.hero .tag{color:var(--gold2); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:12.5px;}
.hero h1{font-size:38px; margin:10px 0 14px; line-height:1.25; max-width:640px;}
.hero p{color:#c7d2e0; font-size:16px; max-width:560px;}
.hero .cta-row{display:flex; gap:14px; margin-top:26px;}

.section{padding:56px 0;}
.section h2{font-size:26px; margin:0 0 8px;}
.section .sub{color:var(--muted); margin:0 0 32px; max-width:640px;}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px;}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px; box-shadow:0 1px 2px rgba(20,30,50,.04);
}
.card h3{margin:0 0 8px; font-size:17px;}
.card p{margin:0; color:var(--muted); font-size:14px;}
.card .num{font-size:30px; font-weight:800; color:var(--navy); display:block; margin-bottom:4px;}

.role-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media(max-width:800px){.role-grid{grid-template-columns:repeat(2,1fr);}}
.role-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:20px 16px; text-align:center;
}
.role-card .icon{font-size:26px; margin-bottom:8px;}
.role-card h4{margin:0 0 4px; font-size:14.5px;}
.role-card p{margin:0; font-size:12.5px; color:var(--muted);}

.auth-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:32px; margin:48px auto; box-shadow:0 2px 10px rgba(20,30,50,.06);
}
.auth-card h1{font-size:22px; margin:0 0 4px;}
.auth-card .sub{color:var(--muted); font-size:13.5px; margin:0 0 24px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:var(--text);}
.field input, .field select{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px;
  font-family:inherit;
}
.field input:focus, .field select:focus{outline:2px solid var(--accent); outline-offset:1px;}
.field .hint{font-size:12px; color:var(--muted); margin-top:4px;}
.form-actions{margin-top:22px;}
.form-actions .btn{width:100%;}
.form-footer{text-align:center; margin-top:18px; font-size:13.5px; color:var(--muted);}

.alert{padding:12px 14px; border-radius:8px; font-size:13.5px; margin-bottom:18px;}
.alert-error{background:#fdecec; color:#a83232; border:1px solid #f3c8c8;}
.alert-success{background:#e9f9ef; color:#1a7a45; border:1px solid #bfe9cf;}
.alert-info{background:#eaf2ff; color:#1a4f8f; border:1px solid #c9dcf7;}

.dash-header{background:#fff; border-bottom:1px solid var(--border); padding:16px 28px; display:flex; justify-content:space-between; align-items:center;}
.dash-header .who{font-size:13.5px; color:var(--muted);}
.dash-header .who strong{color:var(--text);}
.role-pill{display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; background:var(--navy); color:#fff; margin-left:8px;}
.role-pill.admin{background:#7a2ea6;}
.role-pill.faculty{background:#1a7a45;}
.role-pill.team{background:#b5760a;}
.role-pill.institute{background:#0a6e6e;}
.role-pill.student{background:var(--navy);}

/* Pricing / plans */
.pricing-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:8px;}
.plan-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:26px 22px; text-align:center; position:relative;}
.plan-card.featured{border-color:var(--gold); box-shadow:0 4px 18px rgba(242,169,0,.16);}
.plan-card .badge{position:absolute; top:-11px; left:50%; transform:translateX(-50%); background:var(--gold); color:#3a2600; font-size:11px; font-weight:800; padding:3px 12px; border-radius:12px; text-transform:uppercase; letter-spacing:.04em;}
.plan-card h3{margin:6px 0 2px; font-size:16px;}
.plan-card .price{font-size:32px; font-weight:800; color:var(--navy); margin:8px 0;}
.plan-card .price small{font-size:13px; font-weight:600; color:var(--muted);}
.plan-card p{color:var(--muted); font-size:13px; margin:0 0 18px;}
.plan-card form{margin:0;}

/* Free preview */
.book-picker{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:20px 0 8px;}
.book-picker a.book-pick{display:block; background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px; color:var(--text);}
.book-picker a.book-pick:hover{border-color:var(--accent); text-decoration:none;}
.book-picker a.book-pick h4{margin:0 0 4px; font-size:14.5px;}
.book-picker a.book-pick p{margin:0; font-size:12.5px; color:var(--muted);}
.sem-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px;}
.sem-tabs a{padding:7px 16px; border-radius:20px; font-size:13px; font-weight:700; border:1px solid var(--border); color:var(--text);}
.sem-tabs a.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.sem-tabs a:hover{text-decoration:none; border-color:var(--accent);}
.preview-content{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:32px; margin-top:18px; line-height:1.7;}
.preview-content h1, .preview-content h2, .preview-content h3{color:var(--navy);}
.preview-content table{width:100%; border-collapse:collapse; margin:16px 0;}
.preview-content table td, .preview-content table th{border:1px solid var(--border); padding:8px;}
.preview-fade{position:relative; max-height:1400px; overflow:hidden;}
.preview-fade::after{content:''; position:absolute; left:0; right:0; bottom:0; height:160px; background:linear-gradient(180deg, rgba(255,255,255,0), #fff);}
.preview-upsell{background:linear-gradient(180deg,var(--navy),var(--navy2)); color:#fff; border-radius:var(--radius); padding:28px; text-align:center; margin-top:-40px; position:relative;}
.preview-upsell h3{margin:0 0 8px;}
.preview-upsell p{color:#c7d2e0; margin:0 0 16px;}

/* Institute dashboard */
.join-code-box{background:var(--navy); color:#fff; border-radius:var(--radius); padding:22px; text-align:center; margin-bottom:24px;}
.join-code-box .code{font-size:28px; font-weight:800; letter-spacing:.08em; color:var(--gold2); margin:6px 0;}
.join-code-box p{color:#c7d2e0; margin:0; font-size:13px;}

.semester-block{margin-bottom:34px;}
.semester-block h3{font-size:16px; border-left:4px solid var(--gold); padding-left:10px; margin-bottom:14px;}
.book-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;}
.book-item{background:#fff; border:1px solid var(--border); border-radius:10px; padding:16px; }
.book-item h4{margin:0 0 4px; font-size:14.5px;}
.book-item p{margin:0 0 10px; font-size:12.5px; color:var(--muted);}

table.data-table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden;}
table.data-table th, table.data-table td{padding:10px 14px; text-align:left; font-size:13.5px; border-bottom:1px solid var(--border);}
table.data-table th{background:#f0f3f8; font-weight:700; color:var(--navy);}
table.data-table tr:last-child td{border-bottom:none;}

.site-footer{padding:28px 0; text-align:center; color:var(--muted); font-size:12.5px; border-top:1px solid var(--border); margin-top:40px;}