:root{
  --ink:#071439;
  --muted:#69708f;
  --soft:#fdf7fc;
  --panel:#fff;
  --line:#ece7f2;
  --pink:#d50a91;
  --pink2:#f02bab;
  --violet:#8247ff;
  --cyan:#18c9d2;
  --teal:#11a995;
  --blue:#2e7df5;
  --green:#20b486;
  --orange:#ffad32;
  --red:#ff4d5f;
  --shadow:0 18px 50px rgba(50,33,80,.08);
  --shadow2:0 26px 70px rgba(50,33,80,.12);
  --radius:24px;
}

*{box-sizing:border-box}
html{min-height:100%}
body{
  margin:0;
  min-height:100%;
  color:var(--ink);
  font-family:Inter,"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  background:linear-gradient(120deg,#fff 0%,#fff8fd 52%,#f8fbff 100%);
}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
button{cursor:pointer}

.login-page{
  min-height:100vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 39% 18%,rgba(213,10,145,.08),transparent 28rem),
    radial-gradient(circle at 52% 55%,rgba(24,201,210,.1),transparent 28rem),
    linear-gradient(115deg,#fff 0%,#fff8fd 53%,#f7fbff 100%);
}

.login-canvas{
  width:100vw;
  min-height:100vh;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:40px;
  padding:54px 62px 40px;
}

.brand-logo{width:252px;height:auto}
.login-left{position:relative;display:flex;flex-direction:column}
.hero-copy{margin-top:66px;width:min(520px,42vw);z-index:2}
.hero-copy h1{
  margin:0;
  font-size:44px;
  line-height:1.22;
  letter-spacing:-.04em;
  font-weight:900;
}
.hero-copy h1 span{color:var(--pink)}
.hero-copy p{
  margin:30px 0 0;
  color:#4d5575;
  font-size:19px;
  line-height:1.55;
}

.hero-features{
  display:grid;
  gap:22px;
  margin-top:36px;
  z-index:2;
}
.hero-features article{display:flex;gap:18px;align-items:center}
.hero-features b{
  width:56px;height:56px;border-radius:17px;
  display:grid;place-items:center;
  color:var(--pink);
  background:#fff0fb;
  box-shadow:0 10px 26px rgba(213,10,145,.08);
  font-size:25px;
}
.hero-features strong{display:block;font-size:17px}
.hero-features small{display:block;margin-top:6px;color:var(--muted);font-size:14px}

.hero-neuro{
  position:absolute;
  left:510px;
  top:110px;
  width:540px;
  height:610px;
  pointer-events:none;
}
.cloud-large{
  position:absolute;
  inset:58px 0 auto 30px;
  width:420px;
  height:285px;
  border-radius:120px 150px 130px 120px;
  background:
    radial-gradient(circle at 35% 42%,rgba(255,255,255,.85),transparent 25%),
    radial-gradient(circle at 72% 58%,rgba(24,201,210,.32),transparent 38%),
    radial-gradient(circle at 38% 42%,rgba(244,43,171,.52),transparent 42%),
    linear-gradient(135deg,rgba(213,10,145,.42),rgba(130,71,255,.22),rgba(24,201,210,.42));
  border:8px solid rgba(213,10,145,.25);
  filter:drop-shadow(0 22px 42px rgba(213,10,145,.14));
}
.cloud-large:before,
.cloud-large:after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:inherit;
  border:inherit;
}
.cloud-large:before{width:210px;height:210px;left:38px;top:-82px}
.cloud-large:after{width:190px;height:190px;right:28px;top:-42px}
.cloud-large span{
  position:absolute;
  inset:-95px -70px -70px -70px;
  background-image:
    radial-gradient(circle,rgba(213,10,145,.32) 0 3px,transparent 4px),
    linear-gradient(32deg,transparent 49%,rgba(130,71,255,.14) 50%,transparent 51%);
  background-size:64px 64px,80px 80px;
  opacity:.7;
  z-index:-1;
}
.cloud-large img{
  position:absolute;
  z-index:2;
  width:92px;
  left:168px;
  top:82px;
  background:rgba(255,255,255,.72);
  border-radius:50%;
  padding:14px;
}
.hero-neuro i{
  position:absolute;
  bottom:52px;
  width:6px;
  border-radius:99px;
  background:linear-gradient(var(--pink),var(--cyan));
  opacity:.75;
}
.hero-neuro i:nth-child(2){left:135px;height:210px}
.hero-neuro i:nth-child(3){left:180px;height:255px}
.hero-neuro i:nth-child(4){left:230px;height:280px}
.hero-neuro i:nth-child(5){left:284px;height:245px}
.hero-neuro i:nth-child(6){left:338px;height:190px}

.hero-stats{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  width:min(930px,58vw);
  z-index:2;
}
.hero-stats article{
  min-height:150px;
  padding:26px 18px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.88);
  box-shadow:var(--shadow);
}
.hero-stats b{
  width:58px;height:58px;margin:0 auto 12px;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--pink);
  background:#fff0fb;
  font-size:26px;
}
.hero-stats strong{
  display:block;
  color:var(--pink);
  font-size:38px;
  letter-spacing:-.05em;
}
.hero-stats span{display:block;font-weight:900}
.hero-stats small{display:block;color:var(--muted);margin-top:6px}

.privacy-note{
  margin:28px 0 0;
  text-align:center;
  color:var(--muted);
  width:min(930px,58vw);
}

.login-right{display:grid;place-items:center}
.login-card{
  width:min(690px,100%);
  min-height:860px;
  padding:46px 78px 38px;
  border-radius:36px;
  border:1px solid rgba(236,231,242,.9);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow2);
  backdrop-filter:blur(20px);
  text-align:center;
}
.login-icon{width:106px}
.login-word{display:block;width:160px;margin:0 auto 8px}
.login-card h2{margin:18px 0 8px;font-size:30px;letter-spacing:-.03em}
.login-card>p{margin:0 0 30px;color:var(--muted);font-size:16px}

.role-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-bottom:24px;
  border:1px solid #dddce8;
  border-radius:10px;
  overflow:hidden;
}
.role-tabs button{
  height:92px;
  border:0;
  border-right:1px solid #dddce8;
  background:#fff;
  color:#4d5575;
  font-weight:800;
}
.role-tabs button:last-child{border-right:0}
.role-tabs button span{display:block;margin-top:8px}
.role-tabs button.active{
  background:linear-gradient(180deg,#fff4fc,#fff);
  color:var(--pink);
  box-shadow:inset 0 0 0 2px #ef4bb9;
}
.login-card form label{
  display:block;
  text-align:left;
  color:#22294a;
  font-size:13px;
  font-weight:800;
  margin:18px 0 0;
}
.input-wrap{
  height:56px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
  padding:0 16px;
  border:1px solid #dddce8;
  border-radius:10px;
  background:#fff;
}
.input-wrap span{color:#8087a3}
.input-wrap input{
  border:0;
  outline:0;
  width:100%;
  color:var(--ink);
  background:transparent;
}
.login-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:18px 0 22px;
  font-size:14px;
}
.login-row a{color:var(--pink);font-weight:800}
.check{display:flex!important;align-items:center;gap:8px;margin:0!important;color:var(--muted)!important}
.check input{accent-color:var(--pink)}

.login-submit{
  width:100%;
  height:58px;
  border:0;
  border-radius:10px;
  color:#fff;
  font-weight:900;
  font-size:16px;
  background:linear-gradient(90deg,#d90091,#c90091);
  box-shadow:0 18px 38px rgba(213,10,145,.22);
}
.login-error{
  padding:12px 14px;
  margin-bottom:18px;
  border-radius:12px;
  color:#bc1749;
  background:#fff0f3;
  font-weight:800;
}
.divider{display:flex;gap:18px;align-items:center;margin:28px 0 22px;color:var(--muted)}
.divider span{height:1px;flex:1;background:#e5dfeb}
.divider em{font-style:normal}
.google{
  width:100%;
  height:56px;
  border:1px solid #dddce8;
  border-radius:10px;
  background:#fff;
  color:#4d5575;
  font-weight:800;
}
.google strong{color:#4285f4;margin-right:12px;font-size:20px}
.appearance{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:34px;
  color:#182344;
  font-size:14px;
}
.appearance button{
  height:38px;
  padding:0 15px;
  border:1px solid #dddce8;
  border-radius:10px;
  background:#fff;
  color:#182344;
  font-weight:800;
}
.appearance button.active{border-color:#ef4bb9;color:var(--pink);background:#fff8fd}

.app-page{
  min-height:100vh;
  background:#fff;
}
.rail{
  position:fixed;
  top:0;left:0;bottom:0;
  width:174px;
  border-right:1px solid #ebe8f1;
  background:#fff;
  padding:20px 18px;
  z-index:20;
}
.rail-logo{
  height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid #ebe8f1;
  margin:0 -18px 18px;
}
.rail-logo img{width:134px}
.rail-nav{display:grid;gap:14px}
.rail-nav a{
  min-height:70px;
  display:grid;
  place-items:center;
  gap:6px;
  padding:10px 6px;
  border-radius:16px;
  color:#172348;
  font-size:13px;
  font-weight:800;
}
.rail-nav a b{
  width:35px;height:35px;
  display:grid;place-items:center;
  color:#172348;
  font-size:22px;
}
.rail-nav a:first-child{
  min-height:78px;
  background:linear-gradient(180deg,#fff0fb,#fff);
  color:var(--pink);
}
.rail-nav a:first-child b{
  width:46px;height:46px;border-radius:10px;
  color:#fff;
  font-size:30px;
  background:linear-gradient(135deg,#dd0a98,#bd0889);
  box-shadow:0 15px 26px rgba(213,10,145,.22);
}
.rail-nav a.active{
  background:#fff0fb;
  color:var(--pink);
  box-shadow:inset 4px 0 0 var(--pink);
}
.assistant-box{
  position:absolute;
  left:22px;right:22px;bottom:28px;
  padding:18px 10px;
  text-align:center;
  border-radius:18px;
  background:linear-gradient(180deg,#fff0fb,#fff);
  box-shadow:var(--shadow);
}
.assistant-box div{
  width:54px;height:54px;margin:0 auto 10px;
  display:grid;place-items:center;border-radius:50%;
  background:#f3d4ff;
}
.assistant-box strong,.assistant-box small{display:block}
.assistant-box small{color:var(--muted);font-size:11px;margin-top:4px}
.assistant-box button{
  margin-top:12px;width:30px;height:30px;border:0;border-radius:50%;
  background:var(--pink);color:#fff;font-size:22px;
}

.workbench{margin-left:174px;min-height:100vh}
.app-topbar{
  height:84px;
  display:grid;
  grid-template-columns:330px 1fr auto;
  align-items:center;
  gap:24px;
  padding:0 28px 0 32px;
  border-bottom:1px solid #ebe8f1;
  background:#fff;
  position:sticky;
  top:0;
  z-index:10;
}
.screen-title h1{
  margin:0;
  font-size:23px;
  line-height:1.1;
  letter-spacing:-.03em;
}
.screen-title p{
  margin:6px 0 0;
  color:var(--pink);
  font-size:15px;
  font-weight:800;
}
.top-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
}
.top-nav a{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:0 18px;
  border-radius:12px;
  color:#091638;
  font-size:14px;
  font-weight:900;
}
.top-nav a.active{
  background:#fff0fb;
  color:var(--pink);
  box-shadow:inset 0 0 0 1px #f5d7eb;
}
.top-nav span{font-size:21px}
.profile{
  display:flex;
  align-items:center;
  gap:13px;
}
.bell{
  width:38px;height:38px;border:0;background:#fff;color:#071439;font-size:22px;position:relative;
}
.bell i{
  position:absolute;right:2px;top:0;
  min-width:16px;height:16px;
  display:grid;place-items:center;border-radius:50%;
  color:#fff;background:var(--pink);
  font-size:10px;font-style:normal;
}
.avatar{
  width:46px;height:46px;display:grid;place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,#e00096,#c10891);
  font-weight:900;
}
.profile strong,.profile small{display:block;white-space:nowrap}
.profile small{color:var(--muted);margin-top:3px}
.page-content{padding:20px 30px 28px;background:linear-gradient(180deg,#fff,#fffafd)}

.teacher-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  margin-bottom:18px;
}
.section-title{display:flex;gap:16px;align-items:center}
.title-icon{
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--pink);
  background:#fff0fb;
  font-size:27px;
}
.section-title h2{margin:0;font-size:25px;letter-spacing:-.03em}
.section-title p{margin:6px 0 0;color:#52607e;font-weight:700;font-size:13px}
.filters{display:flex;gap:14px}
.filters button{
  min-width:188px;
  height:58px;
  text-align:left;
  border:1px solid #ebe5f1;
  border-radius:10px;
  background:#fff;
  padding:8px 14px;
  color:#0c173c;
  box-shadow:0 8px 22px rgba(50,33,80,.03);
}
.filters small,.filters strong{display:block}
.filters small{color:#60708f;font-size:11px;font-weight:900}
.filters strong{margin-top:4px;font-size:13px}
.filters span{float:right;margin-top:-24px}
.filters .filter-main{min-width:106px;text-align:center;font-weight:900}

.metric-strip{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
  margin-bottom:16px;
}
.metric-strip article{
  min-height:130px;
  position:relative;
  display:flex;
  gap:16px;
  padding:20px;
  border:1px solid #ebe5f1;
  border-radius:17px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.metric-icon{
  width:52px;height:52px;display:grid;place-items:center;
  border-radius:50%;
  background:#fff0fb;color:var(--pink);font-size:25px;
}
.metric-strip small{display:block;font-weight:900}
.metric-strip strong{display:block;font-size:28px;letter-spacing:-.04em;margin-top:4px}
.metric-strip span{display:block;color:#53607e;font-weight:700;font-size:12px}
.metric-strip em{display:block;margin-top:12px;font-style:normal;font-size:12px;font-weight:900}
.metric-strip em.green{color:var(--green)}
.metric-strip em.red{color:var(--red)}
.metric-strip svg{
  position:absolute;right:14px;bottom:12px;width:82px;height:28px;
  fill:none;stroke:#59cab9;stroke-width:2;
}

.card{
  border:1px solid #ebe5f1;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
}
.card header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  margin-bottom:8px;
}
.card h3{margin:0;font-size:18px;letter-spacing:-.02em}
.card p{margin:5px 0;color:#53607e;font-size:13px;font-weight:700}
.card a,.soft-action{color:var(--pink);font-weight:900;font-size:13px}

.teacher-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .8fr;
  gap:16px;
}
.retention-card{grid-column:span 2;padding:22px}
.retention-layout{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:18px}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
th{text-align:left;color:#172348;padding:9px;font-weight:900}
td{padding:9px;border-bottom:1px solid #edf0f6;color:#233050;font-weight:800}
.retention-card td:not(:first-child){
  color:#fff;
  text-align:center;
  background:linear-gradient(90deg,#13aa9e,#ccefeb);
  border-right:2px solid #fff;
}
.retention-card tr td:nth-child(2){background:#11b6a5}
.retention-card tr td:nth-child(3){background:#62cbc2}
.retention-card tr td:nth-child(4){background:#a7dfd9;color:#17314a}
.retention-card tr td:nth-child(5){background:#d7efee;color:#17314a}
.line-chart h4{margin:0 0 8px;text-align:center;font-size:13px}
.line-chart svg,.student-curve svg{width:100%;height:auto}
.grid-lines line{stroke:#dde2ec;stroke-dasharray:4 4}
.curve{fill:none;stroke:#15a998;stroke-width:4}
.curve.magenta{stroke:var(--pink)}
.curve.dashed{stroke:#aa8bff;stroke-dasharray:8 8;opacity:.65}
.line-chart circle,.student-curve circle{fill:#fff;stroke:var(--pink);stroke-width:4}
.line-chart text,.student-curve text{font-size:13px;font-weight:900;fill:#0c173c}
.insight{
  margin-top:18px;
  padding:16px;
  border-radius:14px;
  background:#fff7fd;
  color:#34405d;
  text-align:center;
  font-size:13px;
  font-weight:800;
}
.dimension-card{padding:22px}
.rings{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.ring{
  --p:76;
  width:132px;height:132px;
  margin:auto;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-align:center;
  background:conic-gradient(var(--teal) calc(var(--p)*1%),#edf0f7 0);
  position:relative;
}
.ring:before{
  content:"";
  position:absolute;
  inset:11px;
  border-radius:50%;
  background:#fff;
}
.ring>*{position:relative;z-index:1}
.ring strong{font-size:30px;letter-spacing:-.04em}
.ring span{font-size:11px;font-weight:900;color:#53607e}
.ring em{font-size:11px;font-style:normal;color:var(--green);font-weight:900}
.ring.blue{background:conic-gradient(var(--blue) calc(var(--p)*1%),#edf0f7 0)}
.ring.orange{background:conic-gradient(var(--orange) calc(var(--p)*1%),#edf0f7 0)}
.ring.red{background:conic-gradient(var(--red) calc(var(--p)*1%),#edf0f7 0)}
.cohort-card{grid-column:span 2;padding:20px}
.cohort-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}
.cohort-row div{border-right:1px solid #ebe5f1;padding:0 20px}
.cohort-row div:last-child{border-right:0}
.cohort-row b{color:var(--pink)}
.cohort-row strong{display:block;font-size:26px}
.cohort-row span{display:block;color:#53607e;font-weight:800;font-size:12px}
progress{width:100%;height:8px;border:0;border-radius:999px;overflow:hidden}
progress::-webkit-progress-bar{background:#edf0f7;border-radius:999px}
progress::-webkit-progress-value{background:linear-gradient(90deg,var(--teal),var(--cyan));border-radius:999px}
.table-students{grid-column:span 1;padding:20px}
.table-students table{font-size:12px}
.mini-avatar{
  display:inline-grid;place-items:center;
  width:24px;height:24px;border-radius:50%;
  color:#fff;background:#048c8a;margin-right:8px;font-size:10px;
}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:8px}
.dot.red{background:red}.dot.orange{background:#ff9f1c}
.risk{padding:5px 9px;border-radius:9px;font-weight:900}
.risk.alto{background:#fff1f1;color:#e52936;border:1px solid #ff858c}
.risk.medio{background:#fff7e8;color:#d37b0a;border:1px solid #ffc66e}
.heatmap-card{padding:20px}
.heatmap{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:4px;
  margin:24px 14px;
}
.heatmap span{
  height:28px;
  border-radius:2px;
  background:rgba(0,160,180,calc(var(--v)/100));
}
.heat-legend{display:flex;align-items:center;gap:10px;justify-content:center;color:#53607e;font-weight:800}
.heat-legend i{width:170px;height:10px;background:linear-gradient(90deg,#e5f8f8,#00a0b4);border-radius:99px}
.insights-card{padding:20px}
.insight-list{display:grid;gap:10px}
.insight-list article{
  display:grid;
  grid-template-columns:48px 1fr auto;
  align-items:center;
  gap:12px;
  min-height:72px;
  padding:10px;
  border-bottom:1px solid #edf0f6;
}
.insight-list b{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:#fff0fb;color:var(--pink);font-size:22px;
}
.insight-list strong{display:block}
.insight-list p{margin:4px 0 0}
.insight-list a{
  padding:8px 12px;border-radius:9px;background:#fff7fd;border:1px solid #ffd2ee;
  white-space:nowrap;
}
.status-footer{
  margin-top:16px;
  padding:15px 24px;
  display:flex;
  justify-content:space-between;
  border-radius:14px;
  background:#fff7fd;
  color:#53607e;
  font-size:12px;
  font-weight:800;
}

.qr-hero{
  position:relative;
  min-height:292px;
  padding:28px 28px 22px;
  border:1px solid #f0ddec;
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 18%,rgba(213,10,145,.11),transparent 20rem),
    linear-gradient(110deg,#fff,#fff6fc);
  overflow:hidden;
  margin-bottom:18px;
}
.qr-hero>div:first-child span{
  display:inline-flex;padding:8px 16px;border-radius:999px;
  background:#fff0fb;color:var(--pink);font-weight:900;
}
.qr-hero h2{margin:18px 0 8px;font-size:31px;letter-spacing:-.035em}
.qr-hero p{margin:0;color:#1c2a4d;font-weight:700;font-size:16px;max-width:920px}
.qr-art{
  position:absolute;right:60px;top:18px;
  width:280px;height:120px;
}
.qr-art div{
  position:absolute;right:80px;top:18px;
  width:100px;height:80px;
  border-radius:14px;
  display:grid;place-items:center;
  transform:rotate(10deg);
  background:#fff;
  box-shadow:0 24px 40px rgba(50,33,80,.14);
  font-size:52px;
}
.qr-art b{
  position:absolute;right:25px;top:72px;
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pink);color:#fff;font-size:26px;
}
.step-flow{
  position:absolute;
  left:28px;right:28px;bottom:22px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:48px;
}
.step-flow article{
  min-height:92px;
  position:relative;
  display:grid;
  grid-template-columns:62px auto;
  gap:14px;
  align-items:center;
  padding:18px;
  border:1px solid #eedfea;
  border-radius:16px;
  background:#fff;
  box-shadow:0 16px 32px rgba(50,33,80,.05);
}
.step-flow article:after{
  content:"";
  position:absolute;right:-42px;top:50%;
  width:38px;height:1px;background:#cbaac4;
}
.step-flow article:last-child:after{display:none}
.step-flow b{
  width:58px;height:58px;display:grid;place-items:center;border-radius:14px;
  color:var(--pink);background:#fff0fb;font-size:28px;
}
.step-flow i{
  position:absolute;left:112px;top:20px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--pink);color:#fff;font-style:normal;font-weight:900;
}
.step-flow strong{display:block;font-size:15px}
.step-flow small{display:block;color:#53607e;margin-top:6px;font-weight:700}
.qr-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.exam-panel,.config-panel{padding:26px}
.exam-panel header,.config-panel header{margin-bottom:22px}
.search-row{display:flex;gap:10px}
.search-row input,.search-row button,.config-panel header button{
  height:44px;border:1px solid #e5e0ec;border-radius:10px;background:#fff;padding:0 16px;
  color:#162246;font-weight:800;
}
.exam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.exam-card{
  min-height:156px;
  position:relative;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:12px;
  padding:18px;
  border:1px solid #ebe5f1;
  border-radius:15px;
  background:#fff;
}
.exam-card.selected{border-color:#ef4bb9;background:#fff8fd}
.exam-card label{position:absolute;left:12px;top:12px}
.exam-card input{accent-color:var(--pink)}
.exam-card b{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#fff0fb;color:var(--pink);font-size:26px;margin-top:18px;
}
.exam-card strong{display:block;font-size:14px}
.exam-card p{font-size:12px;line-height:1.35}
.exam-card footer{
  grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
  color:#53607e;font-size:12px;font-weight:900;
}
.exam-card em{
  font-style:normal;padding:4px 8px;border-radius:999px;background:#fff0fb;color:var(--pink);
}
.selection-bar{
  height:52px;margin-top:14px;padding:0 18px;border-radius:12px;
  display:flex;align-items:center;gap:28px;background:#fff7fd;color:var(--pink);font-weight:900;
}
.selection-bar strong{margin-left:auto}
.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.config-grid article{
  min-height:80px;
  padding:15px 18px;
  border:1px solid #ebe5f1;
  border-radius:12px;
  background:#fff;
}
.config-grid small{display:block;color:#1d294a;font-weight:900}
.config-grid strong{font-size:22px}
.config-grid article>div:last-child{float:right;margin-top:-24px}
.config-grid button{
  width:34px;height:34px;border:1px solid #e6e0ec;border-radius:8px;background:#fff;color:#142143;font-weight:900;
}
.toggle-line{
  display:flex!important;justify-content:space-between;align-items:center;gap:16px;
}
.toggle-line div strong{font-size:14px}
.toggle-line div small{color:#53607e;font-size:12px;margin-top:4px}
.toggle{
  width:44px;height:24px;flex:0 0 auto;border-radius:999px;background:#e6e0ec;position:relative;
}
.toggle:after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
}
.toggle.on{background:var(--pink)}
.toggle.on:after{left:23px}
.auto-note{
  margin-top:18px;padding:14px 16px;border-radius:12px;
  color:var(--pink);background:#fff0fb;font-weight:800;
}
.qr-bottom{
  margin-top:18px;
  display:grid;
  grid-template-columns:1.6fr repeat(4,1fr) 1.45fr 1.8fr;
  gap:12px;
  padding:16px;
  border:1px solid #ebe5f1;
  border-radius:20px;
  background:#fff;
  box-shadow:var(--shadow);
}
.qr-bottom article{
  min-height:78px;
  display:flex;align-items:center;gap:14px;
  padding:12px;border:1px solid #f0edf4;border-radius:14px;background:#fff;
}
.qr-bottom article span{display:block;color:#53607e;font-size:12px;font-weight:800}
.qr-bottom article strong{display:block;font-size:16px}
.qr-bottom button{
  border:0;border-radius:12px;background:var(--pink);color:#fff;font-weight:900;font-size:16px;
}
.donut{
  width:94px;height:94px;border-radius:50%;
  background:conic-gradient(var(--pink) 72%,#e8e8f2 0);
  position:relative;
}
.donut:after{content:"";position:absolute;inset:13px;border-radius:50%;background:#fff}
.donut.small{width:60px;height:60px}.donut.small:after{inset:9px}
.donut.warn{background:conic-gradient(var(--red) 30%,var(--orange) 30% 70%,var(--teal) 70%,#e8e8f2 0)}

.student-top{
  display:grid;
  grid-template-columns:2.1fr repeat(6,1fr);
  gap:14px;
  margin-bottom:16px;
}
.student-welcome{
  min-height:226px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px;
  border:1px solid #f0ddec;
  border-radius:18px;
  background:linear-gradient(110deg,#fff7fd,#fff);
  box-shadow:var(--shadow);
}
.student-welcome h2{margin:0 0 14px;font-size:28px}
.student-welcome strong{display:block;font-size:17px}
.student-welcome p{color:#1e2b4c;font-weight:700}
.course-pill{
  width:300px;margin-top:24px;padding:15px;border:1px solid #eedfea;border-radius:13px;background:#fff;
  color:#53607e;font-size:13px;font-weight:800;
}
.course-pill b{display:block;color:#132044;margin-top:4px}
.brain-art{
  font-size:118px;
  filter:drop-shadow(0 22px 24px rgba(213,10,145,.22));
}
.student-kpi{
  min-height:226px;
  padding:22px;
  border:1px solid #ebe5f1;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow);
}
.student-kpi small{display:block;color:#132044;font-weight:900}
.student-kpi strong{display:block;margin-top:20px;font-size:30px;letter-spacing:-.04em}
.student-kpi span{display:block;margin-top:4px;color:#53607e;font-weight:800}
.student-kpi em{display:block;margin-top:16px;color:var(--green);font-style:normal;font-weight:900;font-size:12px}
.progress{position:relative;text-align:center}
.progress .donut{margin:10px auto}
.progress strong{
  position:absolute;left:0;right:0;top:86px;margin:0;font-size:28px;
}
.progress span{position:absolute;left:0;right:0;top:122px;font-size:12px}
.mini-bars{
  height:54px;margin-top:20px;
  background:linear-gradient(90deg,transparent 6%,#f36cba 6% 12%,transparent 12% 20%,#f36cba 20% 27%,transparent 27% 34%,#f36cba 34% 42%,transparent 42% 51%,#f36cba 51% 58%,transparent 58% 66%,#f36cba 66% 74%,transparent 74% 82%,#f36cba 82% 88%,transparent 88%);
  border-radius:10px;
}
.streak{margin-top:22px;color:var(--pink);font-size:18px;letter-spacing:3px}
.student-grid{
  display:grid;
  grid-template-columns:1.05fr .82fr 1.05fr .55fr;
  gap:16px;
}
.learning-state,.topic-domain,.student-curve,.review-plan,.sessions-card,.recommendations{padding:20px}
.ability-rings{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.ability-rings .ring{width:112px;height:112px}
.student-note{
  margin-top:20px;padding:14px;border-radius:12px;
  background:#fff7fd;color:#53607e;font-size:12px;font-weight:800;
}
.topic-row{
  display:grid;
  grid-template-columns:44px 1fr 150px 40px;
  gap:14px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid #edf0f6;
}
.topic-row b{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:#e9fbf8;color:var(--teal);
}
.topic-row strong,.topic-row span{display:block}
.topic-row span{color:#53607e;font-size:12px;font-weight:800}
.topic-row em{font-style:normal;font-weight:900}
.student-curve{grid-column:span 1}
.student-right{display:grid;gap:16px}
.achievements,.next-goal{padding:18px}
.achievements div,.recommendations div{
  display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid #edf0f6;
}
.achievements b,.recommendations b{
  width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff0fb;font-size:22px;
}
.achievements strong,.achievements span,.recommendations strong,.recommendations span{display:block}
.achievements span,.recommendations span{color:#53607e;font-size:12px;font-weight:800}
.next-goal{text-align:center}
.next-goal b{font-size:52px;display:block;margin:12px 0}
.next-goal strong,.next-goal span{display:block}
.next-goal span{color:#53607e;font-weight:800;margin:5px 0 14px}
.review-plan{grid-column:span 2}
.review-columns{display:grid;grid-template-columns:1fr 1fr .75fr;gap:24px;margin-top:16px}
.review-columns h4{margin:0 0 10px}
.review-columns p{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px;border-radius:10px;background:#fbfcff;color:#172348;
}
.review-columns em{
  font-style:normal;padding:4px 8px;border-radius:8px;background:#fff0f1;color:var(--red);font-size:12px;
}
.review-columns button{
  border:1px solid #ffd2ee;background:#fff7fd;color:var(--pink);border-radius:8px;padding:6px 10px;font-weight:900;
}
.sessions-card{grid-column:span 1}
.timeline p{
  display:grid;
  grid-template-columns:80px 38px 1fr 44px;
  align-items:center;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #edf0f6;
}
.timeline time{color:#53607e;font-size:12px;font-weight:900}
.timeline b{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#edfdfa;
}
.timeline strong{font-size:13px}
.timeline span{
  padding:6px 8px;border-radius:8px;background:#e8fff7;color:var(--teal);font-weight:900;font-size:12px;
}
.recommendations{grid-column:span 1}
.motivation-banner{
  margin-top:16px;
  min-height:96px;
  display:grid;
  grid-template-columns:84px 1.5fr 1fr 1.7fr;
  align-items:center;
  gap:22px;
  padding:16px 24px;
  border-radius:20px;
  background:linear-gradient(90deg,#fff,#fff7fd 48%,#d31191 68%,#ff8fd2 100%);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.motivation-banner>div:first-child{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#fff0fb;font-size:34px;
}
.motivation-banner p{margin:0;color:#132044}
.goal{
  padding:12px 16px;border:1px solid #f0ddec;border-radius:12px;background:#fff7fd;
}
.goal span,.goal b{display:block}
.goal b{text-align:right}
.motivation-banner blockquote{margin:0;color:#fff;font-size:18px;font-weight:900}
.motivation-banner small{font-size:13px}

.institution-placeholder{
  min-height:620px;
  display:grid;
  place-items:center;
  text-align:center;
  border:1px solid #ebe5f1;
  border-radius:24px;
  background:#fff;
  box-shadow:var(--shadow);
  padding:60px;
}
.institution-placeholder img{width:180px}
.institution-placeholder h2{font-size:34px;margin:20px 0 0}
.institution-placeholder p{max-width:680px;color:#53607e;line-height:1.6}
.institution-placeholder a{
  padding:14px 20px;border-radius:12px;background:var(--pink);color:#fff;font-weight:900;
}

@media(max-width:1500px){
  .metric-strip{grid-template-columns:repeat(3,1fr)}
  .teacher-grid,.qr-grid,.student-grid{grid-template-columns:1fr}
  .retention-card,.cohort-card,.review-plan{grid-column:auto}
  .student-top{grid-template-columns:1fr 1fr 1fr}
  .student-welcome{grid-column:span 3}
}

@media(max-width:1000px){
  .login-canvas{grid-template-columns:1fr;padding:24px}
  .hero-neuro{display:none}
  .hero-copy,.hero-stats,.privacy-note{width:100%}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .rail{position:static;width:auto;height:auto}
  .workbench{margin-left:0}
  .app-topbar{grid-template-columns:1fr;min-height:auto;height:auto;padding:18px}
  .top-nav{justify-content:flex-start;flex-wrap:wrap}
  .profile{justify-content:flex-start}
}

.autofill-decoy {
  position: absolute !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================
   PULP LOGIN REAL ASSETS PATCH
   ========================================================== */

.login-page-real {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 20%, rgba(213,10,145,.055), transparent 30rem),
    radial-gradient(circle at 42% 50%, rgba(24,201,210,.08), transparent 35rem),
    linear-gradient(112deg, #ffffff 0%, #fff9fd 55%, #f8fbff 100%);
}

.login-canvas-real {
  width: 100vw;
  height: 100vh;
  min-height: 900px;
  display: grid;
  grid-template-columns: minmax(680px, 1.42fr) minmax(560px, .9fr);
  gap: 44px;
  padding: 42px 56px 36px 52px;
}

.login-left-real {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}

.login-hero-real-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
  filter: saturate(1.02) contrast(1.01);
}

.login-right-real {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 4px;
}

.login-card-real {
  width: min(650px, 100%);
  min-height: 855px;
  padding: 44px 72px 36px;
  border-radius: 36px;
  border: 1px solid rgba(235, 229, 241, .96);
  background: rgba(255,255,255,.91);
  box-shadow: 0 28px 78px rgba(38, 26, 62, .13);
  backdrop-filter: blur(22px);
}

.login-icon-real {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto 4px;
}

.login-word-real {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto 10px;
  object-fit: contain;
}

.login-card-real h2 {
  margin-top: 16px;
}

.login-card-real .role-tabs {
  margin-top: 26px;
}

.login-card-real .input-wrap input::placeholder {
  color: #9aa1b8;
}

.autofill-decoy {
  position: absolute !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media(max-width: 1260px) {
  .login-canvas-real {
    height: auto;
    min-height: 100vh;
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .login-left-real {
    min-height: 760px;
  }

  .login-card-real {
    min-height: auto;
  }
}

/* ==========================================================
   PULP REAL LOGO PATCH
   ========================================================== */

.login-main-logo-real {
  display: block;
  width: 178px;
  max-height: 150px;
  object-fit: contain;
  margin: 0 auto 18px;
}

.login-card-real .login-icon-real,
.login-card-real .login-word-real {
  display: none !important;
}

.rail-logo img {
  width: 128px;
  max-height: 54px;
  object-fit: contain;
}

.title-logo {
  background: #fff0fb !important;
  overflow: hidden;
}

.title-logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.qr-hero-logo {
  position: absolute;
  right: 340px;
  top: 34px;
  width: 54px;
  height: 54px;
  object-fit: contain;
  opacity: .88;
  filter: drop-shadow(0 14px 22px rgba(213,10,145,.18));
}

.student-pulp-iso {
  position: absolute;
  right: 150px;
  top: 28px;
  width: 52px;
  height: 52px;
  object-fit: contain;
  opacity: .75;
  filter: drop-shadow(0 12px 18px rgba(213,10,145,.16));
}

.student-welcome {
  position: relative;
  overflow: hidden;
}

@media(max-width: 1000px) {
  .qr-hero-logo,
  .student-pulp-iso {
    display: none;
  }
}

/* ==========================================================
   PULP INTERNAL MOCKUP POLISH 0.2.1
   ========================================================== */

body.app-page {
  background:
    radial-gradient(circle at 88% 8%, rgba(213,10,145,.04), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
}

.rail-polished {
  width: 166px;
  padding-left: 15px;
  padding-right: 15px;
  box-shadow: 8px 0 32px rgba(21, 18, 37, .025);
}

.rail-polished .rail-logo {
  height: 76px;
  margin-left: -15px;
  margin-right: -15px;
}

.rail-polished .rail-logo img {
  width: 124px;
  max-height: 60px;
}

.rail-polished .rail-nav {
  gap: 10px;
}

.rail-polished .rail-nav a {
  min-height: 68px;
  border-radius: 18px;
  color: #101b42;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.rail-polished .rail-nav a:hover {
  transform: translateY(-1px);
  background: #fff7fd;
  color: var(--pink);
}

.rail-polished .rail-nav a b img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.rail-polished .rail-nav a:first-child b {
  background: linear-gradient(135deg, #ffffff, #fff0fb);
  border: 1px solid #f5d3eb;
}

.workbench {
  margin-left: 166px;
}

.app-topbar {
  height: 88px;
  padding-left: 30px;
  padding-right: 30px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(16px);
}

.screen-title h1 {
  font-size: 24px;
}

.screen-title p {
  color: var(--pink);
  font-weight: 900;
}

.top-nav a {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 13px;
}

.top-nav a.active {
  background: linear-gradient(180deg, #fff2fb, #fff);
  border: 1px solid #f2d2e8;
  box-shadow: 0 10px 24px rgba(213,10,145,.06);
}

.avatar-polished {
  box-shadow: 0 12px 24px rgba(213,10,145,.20);
}

.page-content {
  padding: 22px 32px 30px;
  background:
    radial-gradient(circle at 100% 0%, rgba(213,10,145,.035), transparent 28rem),
    linear-gradient(180deg, #ffffff 0%, #fffafd 100%);
}

.teacher-head {
  margin-bottom: 16px;
}

.title-icon {
  width: 58px;
  height: 58px;
}

.title-logo img {
  width: 42px;
  height: 42px;
}

.filters button {
  height: 56px;
  border-radius: 13px;
  border-color: #eee8f2;
  box-shadow: 0 12px 30px rgba(50,33,80,.045);
}

.metric-strip-polished {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
}

.metric-strip-polished article {
  min-height: 126px;
  border-radius: 19px;
  padding: 18px;
  box-shadow: 0 16px 42px rgba(43, 30, 74, .07);
}

.metric-strip-polished .metric-icon {
  width: 48px;
  height: 48px;
  font-size: 22px;
}

.metric-strip-polished strong {
  font-size: 26px;
}

.teacher-grid-polished {
  grid-template-columns: 1.28fr .78fr .72fr;
  gap: 15px;
}

.teacher-grid-polished .card {
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(43,30,74,.075);
}

.retention-card {
  padding: 22px 24px;
}

.retention-card table {
  border-radius: 16px;
  overflow: hidden;
}

.retention-card th {
  background: #fbfbfe;
}

.retention-card td {
  height: 36px;
}

.line-chart svg {
  padding: 6px;
  background: #fff;
  border: 1px solid #f0edf4;
  border-radius: 18px;
}

.dimension-card .rings {
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 10px;
}

.dimension-card .ring {
  width: 126px;
  height: 126px;
}

.cohort-card {
  padding: 22px 24px;
}

.cohort-row div {
  border-right-color: #f0edf4;
}

.table-students,
.heatmap-card,
.insights-card {
  padding: 22px;
}

.table-students tbody tr:hover td {
  background: #fffafd;
}

.heatmap span {
  border-radius: 5px;
}

.insight-list article {
  min-height: 76px;
}

.status-footer {
  background: linear-gradient(90deg, #fff7fd, #ffffff);
  border: 1px solid #f0ddec;
}

.qr-hero-polished {
  min-height: 306px;
  border-radius: 26px;
  box-shadow: 0 18px 48px rgba(213,10,145,.06);
}

.qr-hero-polished h2 {
  font-size: 34px;
}

.qr-hero-polished p {
  max-width: 850px;
}

.qr-hero-logo {
  right: 330px;
  top: 30px;
  width: 62px;
  height: 62px;
}

.step-flow article {
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(43,30,74,.07);
}

.step-flow b {
  background: linear-gradient(180deg, #fff2fb, #fff);
  border: 1px solid #f4d6ea;
}

.qr-grid-polished {
  grid-template-columns: 1.18fr .82fr;
}

.exam-panel,
.config-panel {
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(43,30,74,.075);
}

.exam-card {
  border-radius: 17px;
  transition: transform .14s ease, box-shadow .14s ease;
}

.exam-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(43,30,74,.08);
}

.exam-card.selected {
  box-shadow: inset 0 0 0 1px #ef4bb9, 0 16px 34px rgba(213,10,145,.08);
}

.config-grid article {
  border-radius: 15px;
}

.toggle.on {
  box-shadow: 0 8px 20px rgba(213,10,145,.18);
}

.qr-bottom-polished {
  border-radius: 23px;
  box-shadow: 0 18px 46px rgba(43,30,74,.075);
}

.qr-bottom-polished button {
  box-shadow: 0 18px 36px rgba(213,10,145,.20);
}

.student-top-polished {
  grid-template-columns: 2.05fr repeat(6, 1fr);
  gap: 15px;
}

.student-welcome,
.student-kpi,
.student-grid-polished .card {
  border-radius: 21px;
  box-shadow: 0 18px 46px rgba(43,30,74,.075);
}

.student-welcome {
  background:
    radial-gradient(circle at 82% 18%, rgba(213,10,145,.08), transparent 20rem),
    linear-gradient(112deg, #fff7fd, #ffffff);
}

.student-welcome h2 {
  font-size: 30px;
}

.student-pulp-iso {
  right: 145px;
  top: 26px;
  width: 58px;
  height: 58px;
}

.brain-art {
  opacity: .9;
}

.student-kpi strong {
  font-size: 29px;
}

.student-grid-polished {
  grid-template-columns: 1.05fr .82fr 1.05fr .55fr;
  gap: 15px;
}

.ability-rings .ring {
  width: 108px;
  height: 108px;
}

.student-curve svg {
  padding: 8px;
  border: 1px solid #f0edf4;
  border-radius: 18px;
  background: #fff;
}

.review-columns {
  gap: 18px;
}

.review-columns p {
  border: 1px solid #f0edf4;
}

.motivation-banner-polished {
  border: 1px solid #f0ddec;
  background:
    linear-gradient(90deg, #ffffff 0%, #fff7fd 42%, #cf0d92 70%, #ff8fd2 100%);
}

.motivation-banner-polished > div:first-child img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

@media(max-width: 1600px) {
  .metric-strip-polished {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .teacher-grid-polished,
  .qr-grid-polished,
  .student-grid-polished {
    grid-template-columns: 1fr;
  }

  .retention-card,
  .cohort-card,
  .review-plan {
    grid-column: auto;
  }

  .student-top-polished {
    grid-template-columns: repeat(3, 1fr);
  }

  .student-welcome {
    grid-column: span 3;
  }
}

@media(max-width: 1000px) {
  .workbench {
    margin-left: 0;
  }

  .rail-polished {
    width: auto;
  }
}

/* ==========================================================
   PULP USERS / ROLES / SECURITY 0.3.0
   ========================================================== */

.admin-users-grid,
.security-grid {
  display: grid;
  grid-template-columns: .62fr 1.38fr;
  gap: 18px;
}

.security-grid {
  grid-template-columns: .72fr .8fr;
  max-width: 1180px;
}

.admin-card,
.security-card {
  padding: 24px;
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(43,30,74,.075);
}

.admin-form {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.admin-form label {
  display: grid;
  gap: 8px;
  color: #172348;
  font-size: 13px;
  font-weight: 900;
}

.admin-form input,
.admin-form select {
  height: 48px;
  width: 100%;
  border: 1px solid #e8e2ef;
  border-radius: 12px;
  background: #fff;
  padding: 0 14px;
  color: #071439;
  outline: 0;
}

.admin-form input:focus,
.admin-form select:focus {
  border-color: #ef4bb9;
  box-shadow: 0 0 0 4px rgba(213,10,145,.08);
}

.admin-form button {
  height: 52px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(90deg, #d50a91, #bf0c8b);
  box-shadow: 0 18px 36px rgba(213,10,145,.18);
}

.admin-note {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: #fff7fd;
  color: #53607e;
  font-size: 13px;
  font-weight: 800;
}

.flash-stack {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.flash {
  padding: 12px 14px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 900;
}

.flash.success {
  background: #eafff7;
  color: #10876d;
  border: 1px solid #b7f1df;
}

.flash.error {
  background: #fff1f4;
  color: #c82848;
  border: 1px solid #ffc0cc;
}

.counter-pill,
.status-pill,
.role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.counter-pill {
  background: #fff0fb;
  color: var(--pink);
}

.users-table-wrap {
  overflow-x: auto;
  margin-top: 18px;
}

.users-table {
  min-width: 880px;
}

.users-table td:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.users-table td:first-child strong,
.users-table td:first-child span {
  display: block;
}

.users-table td:first-child span {
  margin-top: 3px;
  color: #69708f;
  font-size: 12px;
}

.role-pill.superadmin {
  background: #fff0fb;
  color: var(--pink);
}

.role-pill.admin {
  background: #f2edff;
  color: #7244e8;
}

.role-pill.teacher {
  background: #eafff7;
  color: #10876d;
}

.role-pill.student {
  background: #eef6ff;
  color: #2e7df5;
}

.role-pill.institution {
  background: #fff7e8;
  color: #d37b0a;
}

.status-pill.active {
  background: #eafff7;
  color: #10876d;
}

.status-pill.inactive {
  background: #f2f3f7;
  color: #69708f;
}

.account-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0;
  padding: 18px;
  border-radius: 18px;
  background: #fff7fd;
}

.account-summary strong,
.account-summary span {
  display: block;
}

.account-summary span {
  margin-top: 4px;
  color: #69708f;
  font-weight: 800;
}

.account-data {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  margin: 0;
}

.account-data dt {
  color: #69708f;
  font-weight: 900;
}

.account-data dd {
  margin: 0;
  font-weight: 900;
  color: #071439;
}

@media(max-width: 1200px) {
  .admin-users-grid,
  .security-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   PULP ACADEMIC + WHATSAPP + AUDIT FOUNDATION 0.4.0
   ========================================================== */

.foundation-hero,
.wa-hero,
.audit-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 230px;
  padding: 34px;
  border: 1px solid #f0ddec;
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 14%, rgba(213,10,145,.10), transparent 22rem),
    linear-gradient(112deg, #fff7fd, #ffffff);
  box-shadow: 0 22px 56px rgba(43,30,74,.075);
}

.foundation-hero span,
.wa-hero span,
.audit-hero span {
  color: var(--pink);
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
}

.foundation-hero h2,
.wa-hero h2,
.audit-hero h2 {
  margin: 10px 0 8px;
  font-size: 34px;
  color: #071439;
}

.foundation-hero p,
.wa-hero p,
.audit-hero p {
  max-width: 780px;
  margin: 0;
  color: #69708f;
  font-weight: 800;
  line-height: 1.6;
}

.foundation-hero img {
  width: 92px;
  height: 92px;
  object-fit: contain;
}

.foundation-metrics,
.wa-stats {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.wa-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.foundation-metrics article,
.wa-stats article {
  padding: 20px;
  border: 1px solid #f0edf4;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(43,30,74,.06);
}

.foundation-metrics b,
.wa-stats b {
  display: block;
  font-size: 30px;
  color: #071439;
}

.foundation-metrics span,
.wa-stats span {
  display: block;
  margin-top: 5px;
  color: #69708f;
  font-weight: 900;
  font-size: 12px;
}

.foundation-grid,
.wa-grid,
.audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.audit-grid {
  grid-template-columns: 1.15fr .85fr;
}

.foundation-card,
.wa-card,
.audit-card {
  padding: 24px;
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(43,30,74,.075);
}

.foundation-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-top: 18px;
}

.foundation-table th {
  height: 42px;
  padding: 0 12px;
  text-align: left;
  background: #fbfbfe;
  color: #69708f;
  font-size: 12px;
  font-weight: 1000;
  text-transform: uppercase;
  border-bottom: 1px solid #f0edf4;
}

.foundation-table td {
  min-height: 46px;
  padding: 12px;
  border-bottom: 1px solid #f4f1f6;
  color: #172348;
  font-size: 13px;
  font-weight: 800;
}

.foundation-table td span {
  color: #69708f;
  font-size: 12px;
}

.wa-qr-placeholder {
  display: grid;
  place-items: center;
  width: 180px;
  height: 180px;
  flex: 0 0 180px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid #f0ddec;
  box-shadow: 0 18px 42px rgba(213,10,145,.08);
  text-align: center;
}

.wa-qr-placeholder img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.wa-qr-placeholder b {
  display: block;
  color: #071439;
  font-weight: 1000;
}

.wa-qr-placeholder span {
  color: #69708f;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.wa-channel-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.wa-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid #f0edf4;
  border-radius: 17px;
  background: #fffafd;
}

.wa-channel strong,
.wa-channel span {
  display: block;
}

.wa-channel strong {
  color: #071439;
}

.wa-channel span {
  margin-top: 4px;
  color: #69708f;
  font-size: 12px;
  font-weight: 800;
}

.wa-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.wa-pill,
.audit-severity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 1000;
}

.wa-pill.not_connected {
  background: #fff7e8;
  color: #d37b0a;
}

.wa-pill.connected {
  background: #eafff7;
  color: #10876d;
}

.wa-pill.qr {
  background: #eef6ff;
  color: #2e7df5;
}

.audit-checklist {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.audit-checklist p {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 15px;
  border-radius: 16px;
  border: 1px solid #f0edf4;
  background: #fff;
}

.audit-checklist b {
  color: #071439;
}

.audit-checklist span {
  color: #69708f;
  font-weight: 800;
  line-height: 1.45;
}

.disabled-action {
  width: 100%;
  height: 52px;
  margin-top: 18px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  font-weight: 1000;
  background: linear-gradient(90deg, #cfc7d9, #a9a1b5);
  cursor: not-allowed;
}

.audit-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.audit-severity.info {
  background: #eef6ff;
  color: #2e7df5;
}

.audit-severity.warn {
  background: #fff7e8;
  color: #d37b0a;
}

.audit-severity.error {
  background: #fff1f4;
  color: #c82848;
}

@media(max-width: 1400px) {
  .foundation-metrics,
  .wa-stats,
  .audit-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foundation-grid,
  .wa-grid,
  .audit-grid {
    grid-template-columns: 1fr;
  }
}

@media(max-width: 800px) {
  .foundation-hero,
  .wa-hero,
  .audit-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .wa-qr-placeholder {
    width: 100%;
  }
}

/* ==========================================================
   PULP WHATSAPP BRIDGE REAL QR 0.4.1
   ========================================================== */

.wa-badges form {
  margin: 0;
}

.wa-badges button,
.wa-action,
.wa-main-link,
.wa-actions-row button,
.wa-actions-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #d50a91, #bf0c8b);
  color: #fff;
  font-size: 12px;
  font-weight: 1000;
  text-decoration: none;
  cursor: pointer;
}

.wa-action {
  background: #fff;
  color: var(--pink);
  border: 1px solid #f0ddec;
}

.wa-main-link {
  width: 100%;
  height: 52px;
  margin-top: 18px;
  border-radius: 14px;
}

.wa-qr-screen {
  display: grid;
  grid-template-columns: .86fr .64fr;
  gap: 18px;
}

.wa-qr-card {
  padding: 26px;
  border-radius: 24px;
  box-shadow: 0 18px 46px rgba(43,30,74,.075);
}

.wa-qr-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.wa-live-qr {
  display: grid;
  place-items: center;
  min-height: 420px;
  margin: 22px 0;
  border: 1px solid #f0ddec;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 12%, rgba(213,10,145,.08), transparent 18rem),
    linear-gradient(180deg, #fffafd, #fff);
  text-align: center;
}

.wa-live-qr img {
  max-width: 330px;
  max-height: 330px;
  object-fit: contain;
}

.wa-live-qr h3 {
  margin: 12px 0 4px;
  color: #071439;
}

.wa-live-qr p {
  max-width: 430px;
  color: #69708f;
  font-weight: 800;
  line-height: 1.5;
}

.wa-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wa-actions-row button {
  height: 46px;
  border-radius: 13px;
}

.wa-actions-row button.secondary {
  background: #fff;
  color: #c82848;
  border: 1px solid #ffc0cc;
}

.wa-actions-row a {
  height: 46px;
  border-radius: 13px;
  background: #fff;
  color: #172348;
  border: 1px solid #e8e2ef;
}

.bridge-status {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  margin: 22px 0;
}

.bridge-status dt {
  color: #69708f;
  font-weight: 1000;
}

.bridge-status dd {
  margin: 0;
  color: #071439;
  font-weight: 900;
  word-break: break-word;
}

.wa-pill.qr_ready,
.wa-pill.authenticated,
.wa-pill.connecting {
  background: #eef6ff;
  color: #2e7df5;
}

.wa-pill.error {
  background: #fff1f4;
  color: #c82848;
}

@media(max-width: 1200px) {
  .wa-qr-screen {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   PULP BRIDGE AUDIT SYNC 0.4.2
   ========================================================== */

.audit-sync-form {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0 18px;
}

.audit-sync-form button {
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #d50a91, #bf0c8b);
  color: #fff;
  font-weight: 1000;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(213,10,145,.18);
}