/* ===== Login ===== */
.login-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  background:var(--bg);
}
.login-visual{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 50%, var(--teal-deep) 100%);
  padding:48px 56px; display:flex; flex-direction:column; justify-content:space-between;
}
.login-visual::before{
  content:""; position:absolute; inset:0; opacity:.4; pointer-events:none;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><path d="M0 200 L200 0" stroke="white" stroke-opacity="0.08" stroke-width="40"/></svg>');
  background-size:180px;
}
.login-visual > *{position:relative; z-index:1;}
.login-brand{display:flex; align-items:center; gap:14px;}
.login-brand img{height:48px; filter:brightness(0) invert(1);}
.login-visual h1{font-size:clamp(28px,3vw,40px); color:#fff; line-height:1.35; margin:40px 0 16px; max-width:440px;}
.login-visual p{color:#cfe3ec; max-width:420px; font-size:16px;}
.login-roles{display:grid; gap:12px; margin-top:40px;}
.login-role-hint{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:16px 18px;
}
.login-role-hint b{display:block; color:#fff; font-family:'Alexandria'; margin-bottom:4px;}
.login-role-hint span{font-size:13px; color:#b9cdd8;}
.login-panel{display:flex; align-items:center; justify-content:center; padding:40px 28px;}
.login-box{width:100%; max-width:460px;}
.login-box h2{font-size:28px; margin-bottom:8px;}
.login-box > p{color:var(--ink-soft); margin-bottom:28px;}
.role-tabs{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:24px;}
.role-tab{
  font-family:'Alexandria'; font-weight:700; font-size:13px; padding:12px 8px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); cursor:pointer;
  transition:all .2s ease;
}
.role-tab:hover{border-color:var(--teal); color:var(--teal);}
.role-tab.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.demo-row{display:grid; gap:8px; margin:18px 0 8px;}
.demo-row button{
  font-family:'Alexandria'; font-weight:700; font-size:13px; padding:12px 14px; border-radius:10px;
  border:1px dashed var(--line); background:rgba(14,126,166,.06); color:var(--teal-deep); cursor:pointer;
  text-align:start;
}
.demo-row button:hover{border-color:var(--teal); background:rgba(14,126,166,.12);}
.login-meta{margin-top:22px; font-size:13px; color:var(--ink-soft); line-height:1.7;}
.login-meta code{font-family:'Alexandria',monospace; background:rgba(11,44,66,.06); padding:2px 6px; border-radius:6px; font-size:12px;}

/* ===== Portal shell ===== */
.portal-body{background:#F3F1EC; min-height:100vh;}
.portal-top{
  background:var(--navy); color:#cfe3ec; position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.portal-top .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:72px; padding-block:12px;
}
.portal-brand{display:flex; align-items:center; gap:12px; color:#fff;}
.portal-brand img{height:40px; filter:brightness(0) invert(1);}
.portal-brand span{font-family:'Alexandria'; font-weight:800; font-size:15px;}
.portal-user{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.portal-user .who{text-align:start;}
.portal-user .who b{display:block; color:#fff; font-family:'Alexandria'; font-size:14px;}
.portal-user .who span{font-size:12px; color:#a9c2cf;}
.portal-user .avatar{
  width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--cyan));
  color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Alexandria'; font-weight:800;
}
.btn-ghost{
  background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff;
  padding:10px 16px; border-radius:10px; font-family:'Alexandria'; font-weight:700; font-size:13px; cursor:pointer;
}
.btn-ghost:hover{background:rgba(255,255,255,.1);}
.portal-layout{display:grid; grid-template-columns:250px 1fr; gap:0; min-height:calc(100vh - 72px);}
.portal-side{
  background:var(--surface); border-inline-end:1px solid var(--line); padding:28px 18px;
  position:sticky; top:72px; height:calc(100vh - 72px); overflow:auto;
}
.portal-nav{display:grid; gap:6px;}
.portal-nav a,.portal-nav button{
  display:flex; align-items:center; gap:10px; width:100%; text-align:start;
  padding:12px 14px; border-radius:12px; border:none; background:transparent;
  font-family:'Alexandria'; font-weight:700; font-size:14px; color:var(--ink-soft); cursor:pointer;
  transition:background .2s, color .2s;
}
.portal-nav a:hover,.portal-nav button:hover,.portal-nav a.active{
  background:rgba(14,126,166,.1); color:var(--navy);
}
.portal-nav a.active{color:var(--teal-deep);}
.portal-main{padding:32px 28px 60px;}
.portal-head{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:28px;}
.portal-head h1{font-size:clamp(24px,2.5vw,32px); margin-bottom:6px;}
.portal-head p{color:var(--ink-soft); font-size:15px;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;}
.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px 20px;
}
.stat-card span{display:block; font-size:13px; color:var(--ink-soft); margin-bottom:8px;}
.stat-card b{font-family:'Alexandria'; font-size:28px; font-weight:800; color:var(--navy);}
.stat-card em{display:block; margin-top:8px; font-style:normal; font-size:12px; color:var(--teal);}
.panel{
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:24px;
  margin-bottom:20px;
}
.panel-head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.panel-head h2{font-size:18px;}
.panel-head .muted{font-size:13px; color:var(--ink-soft);}
.table-wrap{overflow:auto;}
table.data{width:100%; border-collapse:collapse; min-width:640px;}
table.data th, table.data td{padding:12px 10px; text-align:start; border-bottom:1px solid var(--line); font-size:14px;}
table.data th{font-family:'Alexandria'; font-weight:700; color:var(--ink-soft); font-size:12px;}
table.data tr:last-child td{border-bottom:none;}
.badge{
  display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px;
  font-family:'Alexandria'; font-weight:700; font-size:11px;
}
.badge-ok{background:rgba(31,122,77,.12); color:var(--success);}
.badge-wait{background:rgba(199,161,90,.18); color:#8a6a2a;}
.badge-no{background:rgba(192,57,43,.1); color:var(--danger);}
.badge-info{background:rgba(14,126,166,.12); color:var(--teal-deep);}
.btn-sm{padding:8px 12px; font-size:12px; border-radius:8px;}
.progress{
  height:8px; background:rgba(11,44,66,.08); border-radius:999px; overflow:hidden; min-width:100px;
}
.progress > i{display:block; height:100%; background:linear-gradient(90deg,var(--teal),var(--cyan)); border-radius:999px;}
.course-list{display:grid; gap:14px;}
.course-item{
  border:1px solid var(--line); border-radius:14px; padding:18px; display:grid; gap:12px;
  background:#fff;
}
.course-item h3{font-size:16px;}
.course-meta{display:flex; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--ink-soft);}
.portal-grid-2{display:grid; grid-template-columns:1.2fr .8fr; gap:20px;}
.timeline{display:grid; gap:14px;}
.timeline-item{display:flex; gap:12px;}
.timeline-item .dot{
  width:12px; height:12px; border-radius:50%; background:var(--gold); margin-top:6px; flex:none;
  box-shadow:0 0 0 4px rgba(199,161,90,.2);
}
.timeline-item b{display:block; font-family:'Alexandria'; font-size:14px;}
.timeline-item span{font-size:13px; color:var(--ink-soft);}
.empty{padding:28px; text-align:center; color:var(--ink-soft); font-size:14px;}
.actions-inline{display:flex; gap:8px; flex-wrap:wrap;}
.tab-panels [data-panel]{display:none;}
.tab-panels [data-panel].active{display:block;}

@media(max-width:1080px){
  .login-page{grid-template-columns:1fr;}
  .login-visual{min-height:280px; padding:32px 28px;}
  .portal-layout{grid-template-columns:1fr;}
  .portal-side{position:static; height:auto; border-inline-end:none; border-bottom:1px solid var(--line);}
  .portal-nav{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .stat-grid,.portal-grid-2{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .role-tabs{grid-template-columns:1fr;}
  .stat-grid,.portal-grid-2{grid-template-columns:1fr;}
  .portal-main{padding:22px 16px 48px;}
}