/* AIM Academy — aligned with aimplatform.co.uk */
:root {
  --primary: #043A57;
  --primary-mid: #05496e;
  --primary-light: #065a85;
  --highlight: #63C7FF;
  --highlight-dim: #4ab8f0;
  --highlight-glow: rgba(99,199,255,0.15);
  --deep: #021e2e;
  --amber: #f59e0b;
  --green: #34d399;
  --white: #FFFFFF;
  --white-dim: #b0c4d6;
  --white-muted: #8a9db0;
  --border: rgba(99,199,255,0.12);
  --ok: #34d399;
  --bad: #ef4444;
  --ok-bg: rgba(52,211,153,0.1);
  --bad-bg: rgba(239,68,68,0.1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--primary);
  color:var(--white);
  font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 700px 500px at 10% 15%, rgba(99,199,255,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 600px 600px at 90% 65%, rgba(99,199,255,0.04) 0%, transparent 70%);
}
.boot{display:flex;align-items:center;justify-content:center;height:100vh;color:var(--white-muted)}

/* ── Layout ── */
.shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh;position:relative;z-index:1}

/* ── Sidebar ── */
.sidebar{
  background:rgba(2,22,34,0.97);
  color:var(--white-dim);
  display:flex;flex-direction:column;
  border-right:1px solid rgba(99,199,255,0.1);
  position:relative;z-index:2;
}
.sidebar .brand-wrap{
  padding:20px 20px 16px;
  border-bottom:1px solid rgba(99,199,255,0.1);
  margin-bottom:6px;
}
.sidebar .brand-wrap img{width:150px;height:auto;display:block}
.sidebar .brand-wrap .tagline{
  font-size:9px;letter-spacing:3.5px;color:var(--white-muted);
  margin-top:7px;text-transform:uppercase;font-weight:600;
}
.sidebar h3{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--highlight);margin:12px 16px 4px;font-weight:700;
  display:flex;align-items:center;gap:8px;
}
.sidebar h3::before{content:'';display:block;width:16px;height:1px;background:var(--highlight);opacity:0.6}
.sidebar a,.sidebar button{
  background:none;border:none;color:var(--white-dim);cursor:pointer;text-align:left;
  font:inherit;font-size:13.5px;
  display:flex;align-items:center;gap:10px;
  padding:8px 16px;width:100%;
  text-decoration:none;transition:all 0.15s;
  border-left:2px solid transparent;
}
.sidebar a:hover,.sidebar button:hover{background:rgba(99,199,255,0.07);color:var(--white)}
.sidebar a.active{background:rgba(99,199,255,0.1);color:var(--highlight);border-left-color:var(--highlight)}
.sidebar .mod-row{
  padding:9px 16px;display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  transition:all 0.15s;border-left:2px solid transparent;
}
.sidebar .mod-row:hover{background:rgba(99,199,255,0.07);color:var(--white)}
.sidebar .mod-row .ix{
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid rgba(99,199,255,0.25);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--white-muted);
  flex-shrink:0;margin-top:2px;
}
.sidebar .mod-row.done .ix{background:var(--highlight);border-color:var(--highlight);color:var(--primary)}
.sidebar .mod-row .lab{font-size:13px;color:var(--white);line-height:1.3;font-weight:500}
.sidebar .mod-row .meta{font-size:10.5px;color:var(--white-muted);margin-top:2px}
.sidebar .me{
  margin-top:auto;padding:14px 16px;
  border-top:1px solid rgba(99,199,255,0.1);font-size:13px;
}
.sidebar .me .e{color:var(--white-muted);font-size:11px;margin-top:2px}

/* ── Main content area ── */
.main{padding:0;width:100%;display:flex;flex-direction:column;min-height:100vh;position:relative;z-index:1}
.main.page-light{padding:32px 40px;max-width:1080px;width:100%;min-height:auto}
.main-inner{padding:24px 32px;flex:0 0 auto}
.main-inner.flex{flex:1 1 auto;display:flex;flex-direction:column}

/* ── Auth ── */
.auth-shell{
  min-height:100vh;
  display:flex;align-items:stretch;justify-content:center;
  position:relative;z-index:1;
}
.auth-hero{
  flex:0 0 640px;
  position:relative;
  display:flex;flex-direction:column;
  justify-content:center;
  padding:0 0 0 72px;
}
.auth-hero .wordmark{
  position:fixed;top:40px;left:44px;
  display:flex;flex-direction:column;gap:7px;
  z-index:10;
}
.auth-hero .wordmark img{width:150px;height:auto}
.auth-hero .wordmark span{
  font-size:9px;letter-spacing:3.5px;text-transform:uppercase;
  color:var(--white-muted);font-weight:600;padding-left:2px;
}
.auth-hero .spacer{display:none}
.auth-hero .hero-body{flex-shrink:0}
.auth-hero h1{
  font-size:72px;font-weight:800;
  letter-spacing:-2px;line-height:1.08;
  color:var(--white);margin-bottom:22px;
}
.auth-hero h1 span{color:var(--highlight);display:block}
.auth-hero .hero-sub{
  color:var(--white-dim);font-size:18px;line-height:1.65;
  max-width:520px;margin-bottom:36px;
}
.auth-hero .hero-points{
  display:flex;flex-direction:column;gap:14px;max-width:500px;
}
.auth-hero .hero-point{
  display:flex;align-items:flex-start;gap:12px;
  font-size:16px;color:var(--white-dim);line-height:1.4;
}
.auth-hero .hero-point::before{
  content:'';flex-shrink:0;width:6px;height:6px;border-radius:50%;
  background:var(--highlight);margin-top:5px;
  box-shadow:0 0 8px rgba(99,199,255,0.6);
}
.auth-panel{
  flex:0 0 520px;
  display:flex;align-items:center;justify-content:center;
  padding:40px 28px;
}
.auth{
  width:100%;
  background:linear-gradient(160deg,rgba(5,73,110,0.95) 0%,rgba(4,58,87,0.98) 100%);
  border:1px solid rgba(99,199,255,0.2);
  padding:44px 40px;border-radius:18px;
  box-shadow:0 32px 80px rgba(0,0,0,0.7),0 0 0 1px rgba(99,199,255,0.06),0 0 40px rgba(99,199,255,0.04);
}
.auth .logo{
  font-size:11px;font-weight:700;letter-spacing:4px;color:var(--highlight);
  text-align:center;margin-bottom:28px;text-transform:uppercase;display:none;
}
@media(max-width:900px){
  .auth-hero{display:none}
}
@media(max-width:520px){
  .auth-panel{flex:0 0 auto;width:calc(100vw - 40px);max-width:460px}
}
.auth h1{font-size:26px;color:var(--white);margin-bottom:8px;font-weight:700}
.auth .sub{color:var(--white-dim);font-size:15px;margin-bottom:28px}
.auth label{
  display:block;font-size:10.5px;color:var(--highlight);
  letter-spacing:1.5px;text-transform:uppercase;
  margin:14px 0 6px;font-weight:700;
}
.auth input{
  width:100%;padding:11px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(99,199,255,0.22);
  border-radius:8px;font:inherit;outline:none;
  color:var(--white);transition:border-color 0.15s,background 0.15s;
}
.auth input::placeholder{color:var(--white-muted)}
.auth input:focus{border-color:var(--highlight);background:rgba(255,255,255,0.07);box-shadow:0 0 0 3px rgba(99,199,255,0.15)}
.auth button.primary{
  margin-top:18px;width:100%;
  background:var(--highlight);color:var(--primary);
  border:none;padding:12px;border-radius:8px;
  font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  transition:background 0.2s,transform 0.15s;
  box-shadow:0 0 12px rgba(99,199,255,0.4),0 0 24px rgba(99,199,255,0.15);
}
.auth button.primary:hover{background:var(--highlight-dim);transform:translateY(-1px)}
.auth .toggle{text-align:center;margin-top:16px;font-size:13px;color:var(--white-muted)}
.auth .toggle a{color:var(--highlight);cursor:pointer;text-decoration:none;font-weight:600}
.auth .toggle a:hover{text-decoration:underline}
.auth .msg{margin-top:14px;padding:10px 12px;border-radius:8px;font-size:13.5px}
.auth .msg.ok{background:var(--ok-bg);color:var(--green);border:1px solid rgba(52,211,153,0.2)}
.auth .msg.err{background:var(--bad-bg);color:#f87171;border:1px solid rgba(239,68,68,0.2)}
.auth .consent{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.auth .check-row{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--white-dim);line-height:1.4}
.auth .check-row input[type="checkbox"]{width:16px;height:16px;margin-top:3px;accent-color:var(--highlight);flex-shrink:0}
.auth .check-row label{display:inline;font-weight:400;margin:0}

/* ── Question detail modal ── */
.q-link{color:var(--highlight);cursor:pointer;text-decoration:none;font-weight:600;font-size:13px}
.q-link:hover{text-decoration:underline}
.q-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center}
.q-modal-box{background:var(--primary-mid);border:1px solid rgba(99,199,255,0.15);border-radius:16px;padding:28px 32px;width:520px;max-width:90vw;max-height:80vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,0.6)}
.q-modal-close{background:none;border:none;color:var(--white-muted);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px}
.q-modal-close:hover{color:var(--white);background:rgba(255,255,255,0.07)}
.q-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border-radius:8px;margin-bottom:8px;border:1px solid rgba(99,199,255,0.1);background:rgba(255,255,255,0.03)}
.q-opt-correct{border-color:rgba(52,211,153,0.4);background:rgba(52,211,153,0.08)}
.q-opt-wrong{border-color:rgba(239,68,68,0.4);background:rgba(239,68,68,0.08)}
.q-opt-label{font-size:14px;color:var(--white-dim);flex:1}
.q-opt-correct .q-opt-label{color:var(--green)}
.q-opt-wrong .q-opt-label{color:#f87171}
.q-opt-tag{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--white-muted);white-space:nowrap}
.q-opt-correct .q-opt-tag{color:var(--green)}
.q-opt-wrong .q-opt-tag{color:#f87171}

/* ── Cards ── */
.card{
  background:var(--primary-mid);border-radius:12px;padding:24px;
  border:1px solid rgba(255,255,255,0.05);margin-bottom:20px;
  transition:border-color 0.25s,transform 0.25s;
}
.card:hover{border-color:rgba(99,199,255,0.25)}
.h-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:16px}

/* ── Typography ── */
h1.page{font-size:28px;color:var(--white);font-weight:700;letter-spacing:-0.3px;margin-bottom:8px}
h2{font-size:20px;color:var(--white);margin-bottom:10px;font-weight:700}
h3{font-size:16px;color:var(--white);margin-bottom:8px;font-weight:600}
.muted{color:var(--white-muted)}

/* ── Pills ── */
.pill{display:inline-block;padding:3px 10px;border-radius:14px;font-size:11.5px;font-weight:700;background:rgba(99,199,255,0.12);color:var(--highlight)}
.pill.ok{background:rgba(52,211,153,0.12);color:var(--green)}
.pill.amber{background:rgba(245,158,11,0.12);color:var(--amber)}
.pill.bad{background:var(--bad-bg);color:#f87171}

/* ── Buttons ── */
button.primary,a.primary{
  background:var(--highlight);color:var(--primary);
  border:none;padding:11px 22px;border-radius:8px;
  font:inherit;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;
  box-shadow:0 0 10px rgba(99,199,255,0.3),0 0 20px rgba(99,199,255,0.1);
  transition:background 0.2s,transform 0.15s,box-shadow 0.2s;
}
button.primary:hover,a.primary:hover{background:var(--highlight-dim);transform:translateY(-1px);box-shadow:0 0 18px rgba(99,199,255,0.5),0 8px 24px rgba(99,199,255,0.2)}
button.secondary{
  background:transparent;color:var(--white-dim);
  border:1px solid rgba(99,199,255,0.25);
  padding:10px 20px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;
  transition:all 0.2s;
}
button.secondary:hover{border-color:var(--highlight);color:var(--highlight)}

/* ── Slide stage ── */
.stage{
  background:
    radial-gradient(ellipse at center, rgba(99,199,255,0.08), transparent 60%),
    linear-gradient(160deg,var(--primary) 0%,var(--deep) 100%);
  color:var(--white);flex:1 1 auto;display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  position:relative;overflow:hidden;padding:64px 80px;min-height:calc(100vh - 100px);
}
.stage h2.title{
  font-weight:800;color:var(--white);line-height:0.98;letter-spacing:-3px;
  font-size:clamp(56px,11vw,180px);text-align:center;margin:0;
  text-shadow:0 0 80px rgba(99,199,255,0.3),0 0 30px rgba(255,255,255,0.1);
}
.stage .body{
  color:var(--white-dim);font-size:clamp(18px,1.8vw,28px);
  line-height:1.5;max-width:900px;text-align:center;margin-top:32px;font-weight:400;
}
.stage .divider{width:160px;height:2px;background:var(--highlight);margin:36px auto 0;opacity:0.6;border-radius:2px}
.stage.cover h2.title{font-size:clamp(64px,13vw,220px);letter-spacing:-4px}
.stage.cover .body{font-size:clamp(22px,2.2vw,36px);margin-top:40px}
.stage.content{justify-content:center;align-items:flex-start;padding:80px 100px}
.stage.content h2.title{text-align:left;font-size:clamp(40px,6vw,88px);letter-spacing:-1.5px;max-width:1100px}
.stage.content .body{text-align:left;max-width:980px;margin-top:36px;font-size:clamp(18px,1.6vw,24px)}
.stage .crumb{position:absolute;top:24px;left:32px;font:11px/1 ui-monospace,monospace;letter-spacing:3px;color:var(--white-muted);text-transform:uppercase}
.stage .crumb b{color:var(--highlight);font-weight:500}
.stage .num{position:absolute;top:24px;right:32px;font:11px/1 ui-monospace,monospace;letter-spacing:3px;color:var(--white-muted)}
/* Slide image */
.stage .slide-image{margin-top:28px;max-height:300px;max-width:min(780px,100%);width:auto;height:auto;border-radius:10px;object-fit:contain;box-shadow:0 8px 32px rgba(0,0,0,0.5);display:block}
.stage.content .slide-image{align-self:flex-start}
.stage .slide-video{margin-top:28px;max-height:340px;max-width:min(780px,100%);width:auto;height:auto;border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,0.5);display:block;background:#000}
.stage.content .slide-video{align-self:flex-start}
/* Split video layout */
.stage.has-video{flex-direction:row;align-items:center;padding:60px 80px;gap:0}
.stage.has-video .slide-text-col{display:flex;flex-direction:column;justify-content:center;flex:0 0 38%;padding-right:56px}
.stage.has-video .slide-text-col h2.title{font-size:clamp(28px,3.6vw,58px);letter-spacing:-1px;text-align:left;max-width:none}
.stage.has-video .slide-text-col .body{font-size:clamp(15px,1.3vw,20px);margin-top:20px;text-align:left;max-width:none}
.stage.has-video .slide-video-col{flex:1;display:flex;align-items:center;justify-content:center}
.stage.has-video .slide-video{align-self:center!important;margin:0!important;height:clamp(300px,65vh,620px)!important;max-height:none!important;width:auto;max-width:100%;border-radius:12px}
/* Stage footer */
.stage .foot{position:absolute;bottom:24px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;font:11px/1 ui-monospace,monospace;letter-spacing:3px;color:rgba(99,199,255,0.3);text-transform:uppercase}
.stage .foot .left{color:rgba(99,199,255,0.4)}

/* ── Module topbar ── */
.module-topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 32px;
  background:rgba(2,22,34,0.97);
  border-bottom:1px solid rgba(99,199,255,0.1);
  color:var(--white-muted);
  font:11px/1 ui-monospace,monospace;letter-spacing:2px;text-transform:uppercase;
  flex-shrink:0;
}
.module-topbar a{color:var(--white-muted);text-decoration:none}
.module-topbar a:hover{color:var(--highlight)}

/* ── Nav row (bottom of slide) ── */
.nav-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 32px;gap:16px;
  background:rgba(2,22,34,0.97);
  border-top:1px solid rgba(99,199,255,0.1);
  flex-shrink:0;
}
.nav-row .progress{flex:1;height:3px;background:rgba(99,199,255,0.1);border-radius:2px;overflow:hidden}
.nav-row .progress>div{height:100%;background:var(--highlight);transition:width 0.3s ease}
.nav-row button{
  padding:8px 18px;border-radius:6px;font-size:13px;
  border:1px solid rgba(99,199,255,0.2);
  background:transparent;color:var(--white-dim);cursor:pointer;font:inherit;font-weight:500;
  transition:all 0.15s;
}
.nav-row button:hover:not(:disabled){background:rgba(99,199,255,0.08);color:var(--white);border-color:rgba(99,199,255,0.4)}
.nav-row button:disabled{opacity:0.3;cursor:not-allowed}
.nav-row button.primary{
  background:var(--highlight);color:var(--primary);border-color:var(--highlight);font-weight:700;
  box-shadow:0 0 10px rgba(99,199,255,0.3);
}
.nav-row button.primary:hover:not(:disabled){background:var(--highlight-dim);box-shadow:0 0 18px rgba(99,199,255,0.5)}

/* ── Quiz ── */
.quiz{background:var(--primary-mid);border:1px solid rgba(99,199,255,0.1);border-radius:12px;padding:32px;margin-bottom:24px}
.quiz .stem{font-size:20px;color:var(--white);margin-bottom:20px;line-height:1.4;font-weight:600}
.quiz .opts{display:flex;flex-direction:column;gap:10px}
.quiz .opt{
  padding:14px 18px;border:1.5px solid rgba(99,199,255,0.15);border-radius:10px;
  cursor:pointer;background:rgba(255,255,255,0.02);
  text-align:left;font:inherit;color:var(--white-dim);transition:all 0.15s;
}
.quiz .opt:hover{border-color:var(--highlight);background:var(--highlight-glow);color:var(--white)}
.quiz .opt.selected{border-color:var(--highlight);background:var(--highlight-glow);color:var(--white)}
.quiz .opt.correct{border-color:var(--green);background:rgba(52,211,153,0.1);color:var(--green)}
.quiz .opt.wrong{border-color:var(--bad);background:var(--bad-bg);color:#f87171}
.quiz .feedback{margin-top:18px;padding:12px 16px;border-radius:8px;font-size:14px}
.quiz .feedback.ok{background:var(--ok-bg);color:var(--green);border:1px solid rgba(52,211,153,0.2)}
.quiz .feedback.bad{background:var(--bad-bg);color:#f87171;border:1px solid rgba(239,68,68,0.2)}

/* ── Drag order ── */
.drag-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.drag-item{
  padding:12px 16px;border:1.5px solid rgba(99,199,255,0.15);border-radius:8px;
  background:rgba(255,255,255,0.02);cursor:grab;
  display:flex;align-items:center;gap:12px;user-select:none;color:var(--white-dim);transition:all 0.15s;
}
.drag-item:hover{border-color:rgba(99,199,255,0.3);background:var(--highlight-glow)}
.drag-item.dragging{opacity:0.4}
.drag-item .gx{color:var(--white-muted);font-size:18px;cursor:grab}
.drag-item .ix{width:24px;height:24px;border-radius:50%;background:var(--highlight);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}

/* ── Label image ── */
.label-canvas{position:relative;display:inline-block;margin-top:12px;border:1px solid rgba(99,199,255,0.15);border-radius:8px;overflow:hidden;cursor:crosshair;max-width:100%}
.label-canvas img,.label-canvas svg{display:block;max-width:100%;width:600px;height:auto}
.label-canvas .pin{position:absolute;width:32px;height:32px;border-radius:50%;background:var(--amber);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,0.3);transform:translate(-50%,-100%);cursor:move;display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700;font-size:11px;pointer-events:none}

/* ── Draw route ── */
.draw-canvas{display:block;border:1px solid rgba(99,199,255,0.15);border-radius:8px;background:rgba(255,255,255,0.02);cursor:crosshair;touch-action:none;max-width:100%}
.draw-tools{display:flex;gap:8px;margin-top:12px}

/* ── Forms ── */
.form .row{margin-bottom:14px}
.form label{display:block;font-size:10.5px;font-weight:700;margin-bottom:5px;color:var(--highlight);letter-spacing:1.5px;text-transform:uppercase}
.form input,.form select,.form textarea{
  width:100%;padding:10px 12px;
  border:1px solid rgba(99,199,255,0.2);border-radius:8px;font:inherit;
  background:rgba(255,255,255,0.04);color:var(--white);transition:border-color 0.15s;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--highlight);box-shadow:0 0 0 3px rgba(99,199,255,0.12)}
.form select option{background:var(--primary-mid);color:var(--white)}
.form .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── Dashboard ── */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.dash-card{
  background:var(--primary-mid);border:1px solid rgba(255,255,255,0.05);
  border-radius:12px;padding:20px;transition:border-color 0.25s;
}
.dash-card:hover{border-color:rgba(99,199,255,0.25)}
.dash-card h3{font-size:11px;color:var(--white-muted);font-weight:700;text-transform:uppercase;letter-spacing:1px}
.dash-card .big{font-size:36px;color:var(--highlight);font-weight:700;margin-top:6px}

/* ── Final exam card ── */
.final-card{
  background:linear-gradient(135deg,var(--primary-mid) 0%,rgba(99,199,255,0.1) 100%);
  border:1px solid rgba(99,199,255,0.2);
  color:var(--white);border-radius:14px;padding:32px;
  box-shadow:0 0 32px rgba(99,199,255,0.07);
}
.final-card h2{color:var(--white)}
.final-card p{color:var(--white-dim);margin-top:8px}

/* ── Admin tables ── */
.admin-table{width:100%;border-collapse:collapse;background:var(--primary-mid);border-radius:12px;overflow:hidden;border:1px solid rgba(99,199,255,0.1);font-size:13.5px;color:var(--white-dim)}
.admin-table th{background:rgba(0,0,0,0.18);padding:10px 14px;text-align:left;font-weight:700;color:var(--highlight);border-bottom:1px solid rgba(99,199,255,0.1);font-size:11px;letter-spacing:1px;text-transform:uppercase}
.admin-table td{padding:10px 14px;border-bottom:1px solid rgba(99,199,255,0.06)}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr.clickable{cursor:pointer}
.admin-table tr.clickable:hover td{background:rgba(99,199,255,0.05)}

.scope-badge{display:inline-block;font-size:11px;letter-spacing:0.5px;padding:5px 10px;border-radius:14px;font-weight:700}
.scope-badge.aim{background:rgba(99,199,255,0.15);color:var(--highlight)}
.scope-badge.co{background:rgba(255,255,255,0.08);color:var(--white-dim)}

.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.metric{background:var(--primary-mid);border:1px solid rgba(99,199,255,0.1);border-radius:12px;padding:18px 20px}
.metric-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--white-muted);font-weight:700}
.metric-big{font-size:32px;font-weight:700;color:var(--highlight);margin-top:4px}
.metric-sub{font-size:12.5px;color:var(--white-muted);margin-top:2px}

.filter-input{
  width:100%;max-width:420px;padding:9px 12px;
  border:1px solid rgba(99,199,255,0.2);border-radius:8px;
  margin-bottom:14px;font-size:14px;
  background:rgba(255,255,255,0.04);color:var(--white);font:inherit;
}
.filter-input:focus{outline:none;border-color:var(--highlight)}
.filter-input::placeholder{color:var(--white-muted)}

.bar{display:inline-block;width:100%;max-width:120px;height:8px;background:rgba(99,199,255,0.1);border-radius:4px;overflow:hidden;vertical-align:middle}
.bar>div{height:100%;background:var(--highlight)}

.kv-grid{display:grid;grid-template-columns:160px 1fr;gap:8px 16px;font-size:13.5px;margin-top:10px}
.kv-k{color:var(--white-muted);font-weight:500}
.kv-v{color:var(--white-dim)}

.cockpit-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:980px){.cockpit-grid{grid-template-columns:1fr}}

/* ── Responsive ── */
@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .main.page-light{padding:18px}
  .stage{padding:24px;min-height:320px}
  .stage h2.title{font-size:28px}
  .stage.cover h2.title{font-size:36px}
}

/* ── Site nav (login page — matches aimplatform.co.uk) ── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.6rem 2.5rem;
  background:rgba(4,58,87,0.95);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(99,199,255,0.12);
}
.site-nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.site-nav-logo-img{height:42px;width:auto}
.site-nav-links{
  flex:1;display:flex;gap:0.15rem;align-items:center;justify-content:center;
  margin:0 1rem;
}
.site-nav-link{
  color:var(--white);text-decoration:none;
  font-size:0.88rem;font-weight:600;letter-spacing:0.3px;
  transition:all 0.2s;padding:0.45rem 0.8rem;border-radius:6px;
  background:none;border:none;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
}
.site-nav-link:hover{color:var(--highlight);background:rgba(99,199,255,0.08)}
.site-nav-link svg{opacity:0.5;transition:transform 0.2s}
.site-nav-dd{position:relative}
.site-nav-dd-menu{
  display:none;position:absolute;top:100%;left:0;
  margin-top:0.4rem;min-width:210px;
  background:var(--primary);border:1px solid rgba(99,199,255,0.14);
  border-radius:10px;padding:0.4rem 0;
  box-shadow:0 16px 48px rgba(0,0,0,0.5);
  z-index:300;
}
.site-nav-dd-menu::before{
  content:'';position:absolute;top:-0.4rem;left:0;right:0;height:0.4rem;
}
.site-nav-dd:hover .site-nav-dd-menu{display:block}
.site-nav-dd:hover .site-nav-link svg{transform:rotate(180deg)}
.site-nav-dd-menu a{
  display:block;padding:0.5rem 1.2rem;
  font-size:0.84rem;font-weight:500;
  color:var(--white-dim);text-decoration:none;
  transition:all 0.15s;
}
.site-nav-dd-menu a:hover{
  color:var(--white);background:rgba(99,199,255,0.08);
  padding-left:1.45rem;
}
.site-nav-right{display:flex;align-items:center;gap:0.4rem;flex-shrink:0}
.site-nav-login-btn{
  display:inline-flex;align-items:center;gap:0.45rem;
  padding:0.5rem 1.1rem;
  background:rgba(99,199,255,0.08);color:var(--highlight);
  border:1.5px solid rgba(99,199,255,0.3);border-radius:6px;
  font-size:0.88rem;font-weight:700;text-decoration:none;
  transition:all 0.2s;white-space:nowrap;
}
.site-nav-login-btn:hover{background:rgba(99,199,255,0.16);border-color:var(--highlight)}
.site-nav-cta{
  background:var(--highlight);color:var(--primary);
  padding:0.5rem 1.1rem;border-radius:6px;
  font-weight:700;font-size:0.88rem;text-decoration:none;
  transition:all 0.2s;margin-left:0.35rem;white-space:nowrap;
}
.site-nav-cta:hover{background:var(--highlight-dim);transform:translateY(-1px)}
/* Push auth content below the nav */
.auth-shell{padding-top:70px}
/* Shift fixed wordmark below nav */
.auth-hero .wordmark{top:88px}
@media(max-width:900px){
  .site-nav{padding:0.5rem 1.25rem}
  .site-nav-links{display:none}
  .site-nav-cta{display:none}
  .auth-shell{padding-top:62px}
  .auth-hero .wordmark{top:76px}
}