:root{
  --navy:#062f53;--dark:#031f39;--teal:#10a7b2;--light:#eef9fb;
  --text:#14263d;--muted:#667487;--border:#e4ebf1;--danger:#b42318;
  --shadow:0 14px 40px rgba(6,47,83,.10)
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#f5f9fb;color:var(--text)}
a{text-decoration:none;color:inherit}
.portal-shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}
.portal-sidebar{background:var(--dark);color:#fff;padding:24px 18px;position:sticky;top:0;height:100vh;overflow:auto}
.portal-logo{display:block;background:#fff;border-radius:12px;padding:7px 10px;margin-bottom:26px}
.portal-logo img{display:block;width:210px;max-width:100%;height:auto}
.portal-user{padding:16px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.04);margin-bottom:20px}
.portal-user strong,.portal-user small{display:block}.portal-user small{color:rgba(255,255,255,.55);margin-top:3px}
.portal-nav{display:grid;gap:6px}
.portal-nav a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;color:rgba(255,255,255,.76);font-size:14px}
.portal-nav a:hover,.portal-nav a.active{background:rgba(16,167,178,.16);color:#fff}
.portal-nav i{width:20px;color:#71dfe4}
.portal-main{min-width:0}
.portal-top{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 32px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20}
.portal-top h1{margin:0;color:var(--navy);font-size:20px}
.portal-content{padding:32px}
.portal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat-card,.panel{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.stat-card{padding:22px}
.stat-card i{font-size:24px;color:var(--teal);margin-bottom:13px}
.stat-card small{display:block;color:var(--muted);font-size:12px}.stat-card strong{display:block;margin-top:3px;color:var(--navy);font-size:21px}
.panel{padding:25px;margin-top:22px}
.panel h2{margin:0 0 18px;color:var(--navy);font-size:20px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}th{color:var(--navy);background:#f8fbfc}
.badge{display:inline-block;padding:5px 9px;border-radius:99px;background:var(--light);color:var(--navy);font-size:11px;font-weight:700}
.badge.green{background:#e8f8ee;color:#18723b}.badge.orange{background:#fff3df;color:#8a5800}.badge.red{background:#fdecec;color:#a1261b}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 15px;border:0;border-radius:8px;font-weight:700;cursor:pointer}
.btn-primary{background:var(--teal);color:#fff}.btn-dark{background:var(--navy);color:#fff}.btn-light{background:#fff;color:var(--navy);border:1px solid var(--border)}.btn-danger{background:#b42318;color:#fff}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.form-group{display:grid;gap:7px}.form-group.full{grid-column:1/-1}
label{font-size:13px;font-weight:700;color:#31465d}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #ccd9df;border-radius:8px;font:inherit;background:#fff}textarea{min-height:120px;resize:vertical}
.alert{padding:13px 15px;border-radius:10px;margin-bottom:18px}.alert.success{background:#e9f8ef;color:#146c37}.alert.error{background:#fdecec;color:#9a241b}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.video-card{background:#fff;border:1px solid var(--border);border-radius:15px;overflow:hidden}.video-card iframe{display:block;width:100%;aspect-ratio:16/9;border:0}.video-card-body{padding:17px}.video-card h3{margin:0 0 7px;font-size:16px;color:var(--navy)}.video-card p{margin:0;color:var(--muted);font-size:13px}
.review-stars{display:flex;gap:6px;flex-direction:row-reverse;justify-content:flex-end}.review-stars input{display:none}.review-stars label{font-size:30px;color:#ccd6da;cursor:pointer}.review-stars input:checked~label,.review-stars label:hover,.review-stars label:hover~label{color:#ffb703}
.empty{padding:28px;text-align:center;color:var(--muted);border:1px dashed #cad8de;border-radius:12px;background:#fbfdfe}
.quick-actions{display:flex;flex-wrap:wrap;gap:10px}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,var(--dark),#0b6f7b)}
.login-card{width:100%;max-width:470px;padding:34px;border-radius:20px;background:#fff;box-shadow:0 25px 70px rgba(0,0,0,.22)}
.login-card .login-logo{display:block;width:220px;max-width:80%;margin:0 auto 24px}.login-card h1{text-align:center;color:var(--navy);font-size:28px;margin-bottom:8px}.login-card>p{text-align:center;color:var(--muted);margin-bottom:24px}
@media(max-width:1100px){.portal-grid{grid-template-columns:repeat(2,1fr)}.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.portal-shell{grid-template-columns:1fr}.portal-sidebar{position:relative;height:auto}.portal-main{min-width:0}.portal-top{position:relative}.portal-nav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.portal-content{padding:20px}.portal-top{padding:0 20px}.portal-grid,.video-grid,.form-grid,.portal-nav{grid-template-columns:1fr}.portal-logo img{width:240px}}