/* Local server fonts. Install font files separately in assets/fonts/. */
@font-face{
  font-family:"PoppinsLocal";
  src:url("../fonts/PoppinsLocal.woff2") format("woff2");
  font-display:swap;
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:"PoppinsLocal";
  src:url("../fonts/Poppins-SemiBold.woff2") format("woff2");
  font-display:swap;
  font-weight:600;
  font-style:normal;
}
@font-face{
  font-family:"PoppinsLocal";
  src:url("../fonts/Poppins-Bold.woff2") format("woff2");
  font-display:swap;
  font-weight:700;
  font-style:normal;
}
@font-face{font-family:"KrutiDev010Local";src:url("../fonts/KrutiDev010.woff2") format("woff2");font-display:swap;font-weight:400;font-style:normal}
:root{--bg:#eef4fb;--card:#fff;--ink:#10223d;--muted:#667892;--line:#d5e2f1;--line2:#e8eef6;--blue:#2764ed;--green:#12a84f;--teal:#0b9bb6;--red:#e33b45;--navy:#15243b;--shadow:0 8px 26px rgba(35,70,120,.06)}*{box-sizing:border-box}[hidden]{display:none!important}html{font-size:16px}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}a{text-decoration:none;color:var(--blue)}button,input,select,textarea{font:inherit}.top{height:64px;background:#fff;border-bottom:1px solid var(--line2)}.top-in,.nav-in{max-width:1280px;height:100%;margin:auto;padding:0 22px;display:flex;align-items:center}.top-in{justify-content:space-between}.brand{display:flex;align-items:center;gap:9px;font-weight:950;color:#245ce0;font-size:18px}.brand b{width:32px;height:32px;border-radius:10px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:12px}.brand i{font-style:normal;color:#7b8da6}.account{display:flex;align-items:center;gap:9px;color:#60718a;font-size:12px}.account span{padding:4px 7px;border-radius:999px;background:#eef4ff;color:#2458cb;font-weight:850}.account a{font-weight:800}.nav{height:46px;background:#fff;border-bottom:1px solid var(--line)}.nav-in{gap:2px}.nav a{height:46px;display:flex;align-items:center;padding:0 13px;color:#3c506d;font-weight:800;border-bottom:3px solid transparent}.nav a.active,.nav a:hover{color:var(--blue);border-color:var(--blue);background:#fbfdff}.wrap{max-width:1280px;margin:22px auto;padding:0 22px}.page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.page-head h1{margin:0 0 3px;font-size:27px;letter-spacing:-.02em}.page-head p{margin:0;color:var(--muted);font-weight:600}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn,button{border:0;border-radius:10px;min-height:38px;padding:8px 13px;background:var(--blue);color:#fff;font-weight:850;cursor:pointer}.btn.green,button.green{background:var(--green)}.btn.ghost,button.ghost{background:#fff;color:#334155;border:1px solid #cad8e8}.btn.red,button.red{background:var(--red)}.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px;margin-bottom:14px}.alert{padding:10px 13px;border-radius:10px;margin-bottom:12px;font-weight:700}.alert.ok{background:#eafbf0;color:#08743a;border:1px solid #afe7c3}.alert.err{background:#fff1f2;color:#b42318;border:1px solid #fecdd3}.filters{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:10px;background:#f8fbff;border:1px solid var(--line2);border-radius:12px;margin-bottom:10px}.filters input{flex:1 1 280px}.filters select{flex:0 0 150px;width:150px}input,select,textarea{width:100%;border:1px solid #cbd8e8;border-radius:9px;background:#fff;color:#132740;outline:none;padding:9px 10px}input,select{height:39px}textarea{min-height:150px;resize:vertical;line-height:1.65}input:focus,select:focus,textarea:focus{border-color:#79a3f4;box-shadow:0 0 0 3px rgba(39,100,237,.09)}.count-line{font-size:11px;color:#667892;margin:7px 2px}.dense{border:1px solid var(--line);border-radius:12px;overflow:auto;background:#fff}.dhead,.drow{display:grid;align-items:center;gap:9px;min-width:940px}.dhead{min-height:38px;padding:0 11px;background:var(--navy);color:#fff;font-size:10px;text-transform:uppercase;font-weight:900}.drow{min-height:57px;padding:7px 11px;border-top:1px solid var(--line2)}.drow:hover{background:#fbfdff}.dcheck input{width:14px;height:14px;margin:0}.title{font-weight:900;font-size:13px;line-height:1.25}.sub{font-size:10.5px;color:#718198;margin-top:2px}.pill{align-items:center;}.typing{background:#eaf1ff;color:#2457d6}.steno{background:#e9f9f1;color:#08754b}.public,.active{background:#dcfce7;color:#08743a}.private,.disabled{background:#fee2e2;color:#b42318}.manage{display:flex;gap:5px;justify-content:flex-end;align-items:center}.ico{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;max-width:32px!important;max-height:32px!important;padding:0!important;border-radius:9px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font:14px/1 Arial,"Noto Color Emoji","Segoe UI Emoji",sans-serif!important;border:1px solid #d4dfec!important;background:#fff!important;color:#17243a!important;overflow:hidden!important}.ico.view{background:#f7fbff!important}.ico.edit{background:#fff7ed!important;border-color:#fdc98c!important}.ico.lock{background:#fff1f2!important;border-color:#fecaca!important}.ico.rank{background:#f5f0ff!important;border-color:#ddccff!important}.ico.del{background:#fff1f2!important;border-color:#fecaca!important}.bulk{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 9px;margin-top:7px;background:#f8fafc;border:1px solid var(--line);border-radius:10px;font-size:11px}.bulk .mini{display:flex;gap:5px}.bulk .mini button{width:30px;height:29px;min-height:29px;padding:0;font-size:13px}.pagination{display:flex;justify-content:center;gap:5px;margin-top:12px;flex-wrap:wrap}.page{min-width:33px;height:33px;padding:0 9px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:9px;color:#34475f;font-weight:800}.page.on{background:var(--blue);color:#fff}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px}.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px;box-shadow:var(--shadow)}.stat small{display:block;color:#718198;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.stat b{display:block;font-size:28px;margin-top:5px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.section-title h2{margin:0;font-size:18px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse;min-width:720px}th,td{padding:9px 10px;border-bottom:1px solid var(--line2);text-align:left;font-size:12px}th{background:#f7faff;color:#52647d;text-transform:uppercase;font-size:10px;letter-spacing:.04em}tr:last-child td{border-bottom:0}.form-card{max-width:920px;margin:0 auto 14px}.field{margin-bottom:13px}.field label{display:block;font-weight:850;font-size:12px;margin-bottom:5px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-actions{display:flex;justify-content:flex-end;gap:7px}.font-english{font-family:"UnicodeLocal","Poppins","Noto Sans","Segoe UI",Arial,sans-serif}.font-mangal{font-family:"Noto Sans Devanagari","Nirmala UI","Mangal","Segoe UI",Arial,sans-serif}.font-krutidev{font-family:"KrutiDev010Local","Kruti Dev 010",serif;font-size:1.12em}.master-preview{max-height:430px;overflow:auto;white-space:pre-wrap;line-height:1.85;font-size:17px;padding:4px}.audio audio{width:100%}.result-head{text-align:center;background:#fff;border:1px solid var(--line);border-radius:15px;padding:15px;margin-bottom:12px}.result-head h1{margin:0 0 5px}.scoreline{display:flex;justify-content:center;gap:10px;font-size:17px;font-weight:950}.acc{color:#16a34a}.err{color:#dc2626}.summary7{display:grid;grid-template-columns:repeat(7,1fr);background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:12px}.metric{text-align:center;padding:12px 6px;border-right:1px solid var(--line)}.metric:last-child{border-right:0}.metric small{display:block;color:#60718a;font-size:10px;font-weight:900}.metric b{font-size:20px;display:block;margin-top:4px}.perf{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}.perf .metric{background:#fff;border:1px solid var(--line);border-radius:12px}.compare{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;font-size:18px;line-height:2;text-align:justify;text-justify:inter-word;word-break:break-word}.missing{color:#dc2626;font-weight:800}.extra{color:#16a34a;font-weight:800}.changed .rightword{color:#111}.changed .wrongword{color:#2563eb;font-weight:800}.leader-wrap{width:100%;max-width:none;margin:0 auto}.leader-title{text-align:center;margin-bottom:14px}.leader-title h1{margin:0 0 10px}.radios{display:flex;justify-content:center;gap:9px}.radios label{display:flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid #bfd1fb;border-radius:999px;background:#fff;color:#2457d6;font-weight:850;cursor:pointer}.radios label.on{background:var(--blue);color:#fff}.radios input{width:auto;height:auto}.tests-line{text-align:center;color:#64748b;font-weight:700;margin:10px 0 14px}.rank-badge{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#edf2f7;font-weight:900}.r1{background:#fef3c7;color:#92400e}.r2{background:#e2e8f0}.r3{background:#ffedd5;color:#9a3412}.you{font-size:9px;font-weight:900;background:#dbeafe;color:#1d4ed8;padding:2px 6px;border-radius:999px}.setup{width:100%;max-width:none;margin:0 auto}.setup-top{text-align:center;margin-bottom:12px}.setup-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.setup-actions{display:flex;justify-content:space-between;margin-top:12px}.audio-box{padding:12px;border:1px solid var(--line);border-radius:12px;background:#f8fbff}.audio-box audio{width:100%}.exam-only .top,.exam-only .nav{display:none}.exam-only .wrap{max-width:none;margin:0;padding:10px 16px}.exambar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-bottom:8px}.examtools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.tool{padding:5px 8px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:800}.timer{color:#0a8b46;background:#eafbf0;font-size:18px}.master-box{height:calc(100vh - 205px);min-height:310px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px;font-size:19px;line-height:1.8;white-space:pre-wrap}.typing-box{margin-top:8px}.typing-box textarea{height:5.2em;min-height:5.2em;max-height:5.2em;font-size:19px;line-height:1.55}.typing-box.full textarea{height:calc(100vh - 185px);min-height:360px;max-height:none}.examfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:7px}.exammeta{display:flex;gap:6px;flex-wrap:wrap;color:#596b83;font-size:11px}.empty{padding:28px;text-align:center;color:#728198}
@media(max-width:900px){.grid4{grid-template-columns:repeat(2,1fr)}.filters select{flex:1 1 140px;width:auto}.setup-grid{grid-template-columns:1fr 1fr}.summary7{grid-template-columns:repeat(4,1fr)}.metric{border-bottom:1px solid var(--line)}.perf{grid-template-columns:repeat(3,1fr)}}@media(max-width:640px){.wrap{padding:0 11px}.top-in,.nav-in{padding:0 11px}.account strong{display:none}.nav-in{overflow:auto}.page-head{align-items:flex-start;flex-direction:column}.actions{width:100%}.actions .btn{flex:1}.filters{display:grid;grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}.filters button{width:100%}.dense{overflow-x:auto}.grid4{grid-template-columns:1fr 1fr}.form-grid,.setup-grid{grid-template-columns:1fr}.summary7{grid-template-columns:repeat(2,1fr)}.perf{grid-template-columns:1fr 1fr}.scoreline{font-size:15px}.exam-only .wrap{padding:7px}.exambar{align-items:flex-start;flex-direction:column}.master-box{height:52vh}.typing-box textarea{height:5em;min-height:5em}.examfoot{align-items:stretch;flex-direction:column}.examfoot .btn,.examfoot button{width:100%}}


/* ===== FINAL TYPING VIEWPORT FIT ===== */
body.exam-mode{overflow:hidden!important}
body.exam-mode .top,body.exam-mode .nav{display:none!important}
body.exam-mode .wrap{
  max-width:none!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

#exam{
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  margin:0!important;
  padding:10px!important;
  display:grid!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:10px!important;
  overflow:hidden!important;
}

#exam .examtop{
  min-height:56px!important;
  margin:0!important;
  flex:0 0 auto!important;
}

#exam form{
  min-height:0!important;
  height:100%!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto auto!important;
  gap:10px!important;
  overflow:hidden!important;
}

#master{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}

#exam .master-box,
#exam .reference-box,
#exam .mastermatter{
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:auto!important;
}

#exam .typing-box{
  min-height:0!important;
  height:auto!important;
}

#typed{
  display:block!important;
  width:100%!important;
  height:96px!important;
  min-height:96px!important;
  max-height:96px!important;
  resize:none!important;
  overflow:auto!important;
}

#exam .examfoot{
  position:relative!important;
  bottom:auto!important;
  left:auto!important;
  right:auto!important;
  z-index:20!important;
  
  
  
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  background:var(--bg)!important;
}

#exam .exammeta{
  min-width:0!important;
  display:flex!important;
  justify-content:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  font-size:11px!important;
}

#exam .examfoot button{
  min-height:42px!important;
  white-space:nowrap!important;
}

@media (max-height:760px){
  #exam{padding:7px!important;gap:7px!important}
  #exam .examtop{min-height:48px!important}
  #typed{height:78px!important;min-height:78px!important;max-height:78px!important}
  #exam .examfoot{min-height:42px!important}
  #exam .examfoot button{min-height:38px!important;padding:7px 11px!important}
}
@media (max-height:620px){
  #exam .examtop{min-height:44px!important}
  #typed{height:64px!important;min-height:64px!important;max-height:64px!important}
  #exam .exammeta{font-size:10px!important;gap:5px!important}
}
@media (max-width:700px){
  #exam{padding:7px!important}
  #exam .examfoot{
    grid-template-columns:1fr 1fr!important;
  }
  #exam .exammeta{
    grid-column:1/-1!important;
    grid-row:1!important;
    order:-1!important;
  }
  #exam .examfoot button{width:100%!important}
}


/* ===== TEST STAGE STATE FIX ===== */
#setup[hidden],#exam[hidden]{display:none!important}
#setup:not([hidden]){display:block!important}
#exam:not([hidden]){display:grid!important}

body.test-running .top,
body.test-running .nav{display:none!important}

body.test-running .wrap{
  max-width:none!important;
  width:100%!important;
  height:100dvh!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

#exam:not([hidden]){
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  grid-template-rows:auto minmax(0,1fr)!important;
  gap:10px!important;
  padding:10px!important;
  overflow:hidden!important;
}

/* typing: master uses remaining height, typing area stays short */
#exam:not([hidden]) .master-box{
  min-height:0!important;
  overflow:auto!important;
}
#exam:not([hidden]) form{
  min-height:0!important;
  height:100%!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  align-content:end!important;
  gap:10px!important;
}
#exam:not([hidden]) .typing-box{height:auto!important;min-height:0!important}
#exam:not([hidden]) #typed{
  height:96px!important;
  min-height:96px!important;
  max-height:96px!important;
  resize:none!important;
}
#exam:not([hidden]) .examfoot{
  min-height:46px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
}

/* Steno has no master panel; typing area gets practical workspace */
#exam:not([hidden]) .typing-box.full{
  align-self:stretch!important;
}
#exam:not([hidden]) .typing-box.full #typed,
#exam:not([hidden]) .typing-box.full textarea{
  height:min(58vh,520px)!important;
  min-height:240px!important;
  max-height:none!important;
}

@media(max-height:760px){
  #exam:not([hidden]){padding:7px!important;gap:7px!important}
  #exam:not([hidden]) #typed{height:76px!important;min-height:76px!important;max-height:76px!important}
  #exam:not([hidden]) .typing-box.full #typed,
  #exam:not([hidden]) .typing-box.full textarea{height:min(52vh,380px)!important;min-height:180px!important}
}
@media(max-width:700px){
  #exam:not([hidden]) .examfoot{grid-template-columns:1fr 1fr!important}
  #exam:not([hidden]) .exammeta{grid-column:1/-1!important;grid-row:1!important}
  #exam:not([hidden]) .examfoot button{width:100%!important}
}


/* ===== EXAM TOOLBAR + STENO SPACE FIX ===== */

/* Toolbar controls must always be legible */
#exam .examtools{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
}
#exam .tool{
  box-sizing:border-box!important;
  min-height:36px!important;
  height:36px!important;
  padding:0 12px!important;
  border:1px solid #cbd9ec!important;
  border-radius:10px!important;
  background:#ffffff!important;
  color:#12213a!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:34px!important;
  opacity:1!important;
  visibility:visible!important;
  text-indent:0!important;
  -webkit-text-fill-color:#12213a!important;
}
#exam button.tool{
  width:auto!important;
  min-width:44px!important;
  max-width:none!important;
  cursor:pointer!important;
}
#exam .font-tool{
  color:#1d4ed8!important;
  background:#f7faff!important;
  border-color:#bfd2ff!important;
  font-size:14px!important;
}
#exam .master-font-tool{
  color:#b45309!important;
  background:#fff7ed!important;
  border-color:#fdba74!important;
}
#exam .tool.timer{
  color:#087a3d!important;
  background:#ecfdf3!important;
  border-color:#b7ebca!important;
  font-size:17px!important;
  min-width:76px!important;
}

/* Exam header itself stays compact */
#exam .exambar{
  min-height:54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0!important;
  padding:8px 12px!important;
}

/* TYPING: master matter takes remaining height, typing area short */
#exam:not([hidden]):has(.typing-box:not(.full)){
  grid-template-rows:auto minmax(0,1fr)!important;
}
#exam:not([hidden]) .master-box{
  align-self:stretch!important;
}

/* STENO: no artificial spacer; textarea starts immediately under toolbar */
#exam:not([hidden]):has(.typing-box.full){
  grid-template-rows:auto minmax(0,1fr)!important;
}
#exam:not([hidden]):has(.typing-box.full) form{
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  align-content:stretch!important;
  gap:10px!important;
}
#exam:not([hidden]):has(.typing-box.full) .typing-box.full{
  min-height:0!important;
  height:100%!important;
  align-self:stretch!important;
  display:block!important;
}
#exam:not([hidden]):has(.typing-box.full) .typing-box.full #typed{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  resize:none!important;
  display:block!important;
}

/* Typing textarea remains compact */
#exam:not([hidden]):has(.typing-box:not(.full)) form{
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  align-content:end!important;
  gap:10px!important;
}
#exam:not([hidden]):has(.typing-box:not(.full)) #typed{
  height:96px!important;
  min-height:96px!important;
  max-height:96px!important;
}

/* Footer always visible */
#exam .examfoot{
  margin:0!important;
  min-height:48px!important;
  padding:0!important;
}

/* Fallback for browsers without :has support: full class itself must stretch */
#exam .typing-box.full{
  flex:1 1 auto!important;
  min-height:0!important;
}
#exam .typing-box.full #typed{
  min-height:260px!important;
}

/* Smaller-height screens */
@media(max-height:760px){
  #exam .exambar{min-height:48px!important;padding:6px 9px!important}
  #exam .tool{height:32px!important;min-height:32px!important;line-height:30px!important;padding:0 9px!important}
  #exam button.tool{min-width:40px!important}
  #exam:not([hidden]):has(.typing-box:not(.full)) #typed{
    height:76px!important;min-height:76px!important;max-height:76px!important;
  }
}
@media(max-width:720px){
  #exam .exambar{align-items:flex-start!important;flex-direction:column!important}
  #exam .examtools{width:100%!important;justify-content:flex-start!important;overflow-x:auto!important;padding-bottom:2px!important}
  #exam .tool{flex:0 0 auto!important}
}

/* Topic + replacement readability */

.tm-topic{font-size:11px;font-weight:700;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-head,.tm-row{grid-template-columns:28px minmax(260px,1.55fr) 78px 92px 100px 64px 102px 88px 194px!important}
@media(max-width:1100px){.tm-head,.tm-row{min-width:980px}}

/* ===== Dense sortable lists + rank/review ===== */
.sort-head{color:inherit!important;text-decoration:none!important;white-space:nowrap}.sort-head span{font-size:9px;opacity:.72;margin-left:2px}
.dbid{font-size:10px;color:#718198;font-weight:700}.serial{font-variant-numeric:tabular-nums;color:#52647d;font-weight:800}
.dcheck input,.dhead input[type=checkbox],input[data-select-all]{width:13px!important;height:13px!important;min-width:13px!important;min-height:13px!important;margin:0!important;padding:0!important}
.inline-form{display:inline-flex;margin:0}
.test-list .dhead,.test-list .drow{grid-template-columns:24px 36px minmax(220px,1.45fr) 76px 90px 100px 64px 115px 86px 188px;min-width:1120px}

.result-list .dhead,.result-list .drow{grid-template-columns:24px 36px minmax(155px,1fr) minmax(180px,1.25fr) 80px 86px 100px 145px 80px;min-width:1050px}

.history .dhead,.history .drow{grid-template-columns:40px minmax(220px,1.5fr) 85px 90px 110px 145px 55px;min-width:800px}
.master-preview.full-view{max-height:none!important;height:auto!important;overflow:visible!important;}
.compact-table th,.compact-table td{padding:8px 9px}
.result-details{margin-top:12px;display:grid;gap:9px}.result-details details{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden}.result-details summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:900;display:flex;justify-content:space-between;align-items:center}.result-details summary::-webkit-details-marker{display:none}.result-details summary span{font-size:11px;color:#718198;font-weight:700}.result-details details[open] summary{border-bottom:1px solid var(--line2);background:#f8fbff}.details-body{padding:12px}.text-snapshot{white-space:pre-wrap;line-height:1.9;font-size:16px;text-align:justify}.current-rank{background:#fff7ed!important}
@media(max-width:700px){.result-details summary{padding:10px 11px}.details-body{padding:9px}.summary7{grid-template-columns:repeat(4,1fr)}}

/* ===== Simple System Service ===== */
.service-page{width:100%;max-width:none;margin:0}
.service-health{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 19px;border-radius:15px;margin-bottom:12px;border:1px solid var(--line);background:#fff}
.service-health small{display:block;text-transform:uppercase;font-size:10px;font-weight:900;letter-spacing:.06em;margin-bottom:3px}.service-health strong{font-size:23px}.service-health.good{border-color:#b8e7ca;background:#f1fcf5}.service-health.good strong{color:#08743a}.service-health.warn{border-color:#f7d58a;background:#fffbeb}.service-health.warn strong{color:#a16207}.service-health.bad{border-color:#fecaca;background:#fff1f2}.service-health.bad strong{color:#b42318}.health-note{font-size:12px;font-weight:700;color:#52647d;text-align:right}
.service-stats{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:12px}.service-stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}.service-stat small{font-size:10px;text-transform:uppercase;font-weight:900;color:#718198}.service-stat b{font-size:27px;display:block;margin:3px 0}.service-stat span{font-size:11px;color:#718198}
.service-actions{padding:8px 16px}.service-actions .section-title{padding:8px 0}.clean-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:13px 0;border-top:1px solid var(--line2)}.clean-row:first-of-type{border-top:0}.clean-row b{font-size:14px}.clean-row p{margin:3px 0 0;color:#667892;font-size:12px}.service-btn{min-width:125px}.warn-btn{background:#d97706!important}.soft-btn{background:#fff!important;color:#334155!important;border:1px solid #cbd8e8!important}.service-btn:disabled{opacity:.45;cursor:not-allowed}
.service-tip{display:flex;gap:8px;align-items:center;padding:12px 14px;border:1px solid #bfd5ff;background:#f4f8ff;border-radius:12px;font-size:12px;color:#334155}
@media(max-width:650px){.service-health{align-items:flex-start;flex-direction:column}.health-note{text-align:left}.service-stats{grid-template-columns:1fr}.clean-row{grid-template-columns:1fr}.service-btn{width:100%}.service-tip{align-items:flex-start;flex-direction:column}}

/* ===== Result horizontal tabs ===== */
.result-tabs{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.result-tabbar{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;background:#f8fbff;border-bottom:1px solid var(--line)}
.result-tab{min-height:36px!important;padding:7px 14px!important;border:1px solid #cbd8e8!important;border-radius:9px!important;background:#fff!important;color:#334155!important;font-size:12px!important;font-weight:850!important}
.result-tab:hover{border-color:#9db8ea!important;color:#2457d6!important}.result-tab.active{background:#eef3ff!important;color:#2457d6!important;border-color:#8fb0ff!important}
.result-tab span{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 5px;border-radius:999px;background:#e9eef7;font-size:9px}
.result-tabpanel{display:none;padding:12px}.result-tabpanel .text-snapshot{text-align:justify;}
@media(max-width:650px){.result-tabbar{justify-content:flex-start;overflow-x:auto}.result-tab{flex:0 0 auto;white-space:nowrap}.result-tabpanel{padding:9px}}
n/* ===== RESULT TAB VISUAL FIX ===== */
/* Generic .active is used by status pills elsewhere; result panels must stay neutral. */
.result-tabs{background:transparent!important}
.result-tabpanel{background:transparent!important}
.result-tabpanel.active{display:block!important;background:transparent!important}
.result-tabpanel .text-snapshot{
  background:transparent!important;
  white-space:pre-line!important;
  line-height:1.85!important;
  margin:0!important;
  padding:0!important;
}
/* Ranking should use the same flat panel surface as User Input / Master Paragraph. */
.result-tabpanel .table-wrap{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  overflow:auto!important;
}
.result-tabpanel table{border:0!important;background:transparent!important}
.result-tabpanel th{background:#f7faff!important}
/* Keep only the arrow outside KrutiDev encoding. */
.changed{white-space:nowrap}
.change-arrow{
  display:inline-block!important;
  
  color:#64748b!important;
  
  font-weight:900!important;
  
  line-height:1!important;
}


/* Login branding */
.login-head{justify-content:center;text-align:center}
.login-head>div{width:100%}
.login-head h1,.login-head p{text-align:center}

/* KrutiDev readability: +3px versus Unicode on typing/result views */
.compare.font-krutidev{font-size:21px!important}
.result-tabpanel .text-snapshot.font-krutidev{font-size:19px!important}


/* ===== Reference-hidden typing workspace ===== */
#exam.reference-hidden:not([hidden]){
  grid-template-rows:auto minmax(0,1fr)!important;
}
#exam.reference-hidden #master{display:none!important}
#exam.reference-hidden form{
  height:100%!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  align-content:stretch!important;
  gap:10px!important;
}
#exam.reference-hidden .typing-box.full{
  height:100%!important;
  min-height:0!important;
  margin-top:0!important;
}
#exam.reference-hidden .typing-box.full #typed{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  resize:none!important;
}

/* Compact replacement marker; force symbol outside KrutiDev mapping. */
.change-arrow{
  padding:0 .06em!important;
  margin:0!important;
  font-family:Arial,"Segoe UI Symbol","Noto Sans Symbols",sans-serif!important;
  font-size:.86em!important;
  letter-spacing:-.04em!important;
}

/* ===== Maintenance command lock/progress ===== */
.service-busy[hidden]{display:none!important}
.service-busy{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.35);display:grid;place-items:center;padding:20px}
.service-busy-box{width:min(440px,92vw);background:#fff;border:1px solid #cbd8e8;border-radius:15px;padding:18px;box-shadow:0 18px 60px rgba(15,23,42,.18);text-align:center}
.service-busy-box b{display:block;font-size:16px;margin-bottom:4px}.service-busy-box span{font-size:12px;color:#64748b}
.service-progress{height:8px;background:#e8eef7;border-radius:999px;overflow:hidden;margin-top:14px}
.service-progress i{display:block;width:38%;height:100%;border-radius:999px;background:#2f67e9;animation:serviceProgress 1.15s ease-in-out infinite}
@keyframes serviceProgress{0%{transform:translateX(-110%)}50%{transform:translateX(110%)}100%{transform:translateX(290%)}}

/* Master test view: one stored newline = one visible line break. */
.master-preview.full-view{white-space:pre-wrap!important}

body.steno-nav-off #typed{cursor:none!important;user-select:none!important}body.steno-nav-off #typed::selection{background:transparent!important;color:inherit!important}.space-error .rightword{color:#111}.space-error .wrongword{color:#0b9bb6;font-weight:850}.space-error .change-arrow{color:#0b9bb6;font-weight:900}.space-skip{color:#64748b;font-size:13px}
.summary8{display:grid;grid-template-columns:repeat(8,1fr);background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:12px}.summary8 .metric{text-align:center;padding:12px 6px;border-right:1px solid var(--line)}@media(max-width:900px){.summary8{grid-template-columns:repeat(4,1fr)}}@media(max-width:640px){.summary8{grid-template-columns:repeat(2,1fr)}}

.font-hindi{font-family:"Noto Sans Devanagari","Nirmala UI","Mangal","Segoe UI",Arial,sans-serif}

/* Steno V2 category: Hyphen Error */
.summary9{display:grid;grid-template-columns:repeat(9,1fr);background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:12px}
.summary9 .metric{text-align:center;padding:12px 5px;border-right:1px solid var(--line)}
.hyphen-error .rightword{color:#111}
.hyphen-error .wrongword,.hyphen-error .change-arrow{color:#7c3aed;font-weight:850}
@media(max-width:980px){.summary9{grid-template-columns:repeat(5,1fr)}}
@media(max-width:650px){.summary9{grid-template-columns:repeat(3,1fr)}}

/* ===== V2 Steno result: two-table summary ===== */
.result-summary-table{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;margin:0 0 10px}
.result-summary-table table{width:100%;border-collapse:collapse;table-layout:fixed}
.result-summary-table th{padding:9px 5px;background:#f7f9fc;color:#64748b;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.04em;text-align:center;border-right:1px solid var(--line)}
.result-summary-table td{padding:11px 5px;text-align:center;font-size:16px;font-weight:850;color:#172033;border-top:1px solid var(--line);border-right:1px solid var(--line)}
.result-summary-table th:last-child,.result-summary-table td:last-child{border-right:0}
.result-summary-table .good-num{color:#078443}
.result-summary-table .bad-num{color:#d92d20}
.result-summary-caption{padding:7px 10px;background:#fbfcfe;border-bottom:1px solid var(--line);font-size:11px;font-weight:850;color:#475467}
.wrong-breakdown td{font-size:14px}
@media(max-width:720px){
  .result-summary-table{overflow-x:auto}
  .result-summary-table table{min-width:620px}
  .wrong-breakdown table{min-width:700px}
}

/* ===== Intelligent V2 comparison colors ===== */
.v2-compare .cmp-token{display:inline;line-height:1.9}
.v2-compare .miss,.v2-compare .err-missing{background:#fee2e2;color:#b42318;border-radius:4px;padding:1px 2px}
.v2-compare .add,.v2-compare .punct-extra{background:#dcfce7;color:#08743a;border-radius:4px;padding:1px 2px}

.v2-compare .err-pair-other .bad,.v2-compare .err-other{color:#2563eb}
.v2-compare .err-pair-number .bad,.v2-compare .err-number{color:#d97706}

.v2-compare .err-pair-space .bad,.v2-compare .err-space{color:#0891b2}
.v2-compare .comma-hi{background:#fef3c7;color:#b45309;border-radius:3px;padding:0 1px}
.v2-compare .viram-hi{background:#e0e7ff;color:#4338ca;border-radius:3px;padding:0 1px}
.v2-compare .right{color:#111827}.v2-compare .err-arrow{font-family:Arial,"Segoe UI Symbol",sans-serif;padding:0 .08em}

/* Intelligence */
.intelligence-grid{grid-template-columns:180px 1fr 1fr}.intelligence-add .form-actions{justify-content:flex-end}.pill{display:inline-block;padding:3px 7px;border-radius:999px;background:#eef3ff;color:#3157a4;font-size:10px;font-weight:800}@media(max-width:760px){.intelligence-grid{grid-template-columns:1fr}}

/* V2 policy reconciliation */
.policy-error-list{flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:8px;border-top:1px dashed #d7dfeb;}
.policy-error{display:inline-flex;gap:4px;align-items:center;padding:3px 7px;border-radius:7px;font-size:12px;font-weight:700}
.policy-space{background:#e6f8fb;color:#087b8c}.policy-hyphen{background:#f1eafe;color:#6d28d9}.policy-error i{font-style:normal}
.v2-compare .err-pair-hyphen .bad,.v2-compare .err-pair-hyphen .err-arrow{color:#7c3aed}
.v2-compare .ignored-space{background:transparent!important;color:#64748b!important;font-weight:500!important;opacity:.75}
.v2-compare .ignored-space .bad{color:#64748b!important;font-weight:500!important}

/* ===== Result color guide + default Error List tab ===== */
.error-color-legend{
  flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;
  padding:8px 10px;background:#fbfcfe;border-bottom:1px solid var(--line);
  font-size:10px;font-weight:850;color:#52647d
;}
.error-color-legend span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.error-color-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;background:currentColor}
.legend-missing{color:#dc2626!important}
.legend-extra{color:#16a34a!important}
.legend-change{color:#2563eb!important}
.legend-vachan{color:#d97706!important}

.legend-space{color:#0891b2!important}
.legend-hyphen{color:#7c3aed!important}

.error-list-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.error-list-card{
  border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden;
  color:#334155!important;}
.error-list-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#f8fafc;border-bottom:1px solid var(--line);
  border-left:4px solid currentColor
;}
.error-list-head b{color:currentColor;}
.error-list-head span{
  padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;
  background:#eef2f7;color:#475569;font-size:10px;font-weight:900
;}
.error-items{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
.error-items>span{
  display:inline-block;max-width:100%;padding:4px 7px;border:1px solid #e1e7ef;
  border-radius:7px;background:#fff;color:#26364c;font-size:12px;font-weight:700;
  word-break:break-word
}
.error-items em,.error-empty{display:block;padding:11px;color:#94a3b8;font-size:11px;font-style:normal}
.error-list-card.legend-missing .error-list-head{border-left-color:#dc2626}
.error-list-card.legend-extra .error-list-head{border-left-color:#16a34a}
.error-list-card.legend-change .error-list-head{border-left-color:#2563eb}
.error-list-card.legend-vachan .error-list-head{border-left-color:#d97706}

.error-list-card.legend-space .error-list-head{border-left-color:#0891b2}
.error-list-card.legend-hyphen .error-list-head{border-left-color:#7c3aed}
@media(max-width:700px){.error-list-grid{grid-template-columns:1fr}.error-color-legend{justify-content:flex-start}}

/* ===== Error List compact vertical layout ===== */
.error-list-grid{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}
.error-list-card{
  width:100%!important;
  min-width:0!important;
}
.error-inline-list{
  padding:10px 14px!important;
  color:#26364c!important;
  font-size:13px!important;
  font-weight:650!important;
  line-height:1.75!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  white-space:normal!important;
}
.error-list-head{
  padding:7px 12px!important;
}
.error-list-head b{font-size:12px!important}
.error-list-head span{
  min-width:24px!important;
  height:21px!important;
}
@media(max-width:700px){
  .error-inline-list{font-size:12px!important;padding:9px 11px!important}
}

/* Available Tests: serial + test + type + language + EXAM + upload date + time + action */


/* Result comparison font controls */
.compare-review-bar{
  justify-content:space-between;
  color:#52647d;font-size:11px;font-weight:850
;}
.compare-font-tools{display:flex;gap:5px}
.compare-font-tools button{
  width:38px;padding:0;border:1px solid #cbd8e8;border-radius:9px;
  background:#fff;color:#17243a;font-weight:900;cursor:pointer
;}
.compare-font-tools button:hover{border-color:#7da6f5;background:#f7faff}

/* Secure learner dictation player: custom controls remove native Save Audio UI */
.secure-audio-media{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.secure-audio-controls{display:grid;align-items:center;gap:8px;width:100%;}
.secure-audio-play,.secure-audio-mute{height:36px;padding:0;border:1px solid #cbd8e8;border-radius:9px;background:#fff;color:#17243a;font-weight:900;cursor:pointer}
.secure-audio-seek,.secure-audio-volume{height:auto!important;padding:0!important;border:0!important;box-shadow:none!important}
.secure-audio-time{font-size:11px;font-weight:800;color:#42546e;text-align:center;white-space:nowrap}
@media(max-width:620px){.secure-audio-controls{grid-template-columns:40px 1fr 82px 36px}.secure-audio-volume{display:none}}

/* Supreme Global Control */
.global-settings-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.global-settings-grid small{display:block;margin-top:5px;color:#74839a;font-size:10px;line-height:1.35}
.control-note{margin:0 0 10px;padding:8px 10px;border:1px solid #dbe5f2;border-radius:9px;background:#f8fbff;color:#53657d;font-size:11px}
@media(max-width:900px){.global-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.global-settings-grid{grid-template-columns:1fr}}

/* ===== Global Poppins typography; KrutiDev remains test-content specific ===== */
html,body,button,input,select,textarea,table{
  font-family:"PoppinsLocal","Poppins","Noto Sans Devanagari","Noto Sans","Segoe UI",Arial,sans-serif!important;
}
.font-english,.font-mangal,.font-hindi{
  font-family:"PoppinsLocal","Poppins","Noto Sans Devanagari","Noto Sans","Segoe UI",Arial,sans-serif!important;
}
/* KrutiDev must remain encoded in its own font. */
.font-krutidev,.font-krutidev *{
  font-family:"KrutiDev010Local","Kruti Dev 010",serif!important;
}

/* Gender gets its own clearly distinct pink; Hyphen remains violet. */
.legend-gender{color:#f40afc!important}
.error-list-card.legend-gender .error-list-head{border-left-color:#f40afc!important}
.v2-compare .err-pair-gender .bad,.v2-compare .err-gender{color:#f40afc!important}
.v2-compare .err-pair-gender .err-arrow{color:#f40afc!important}

/* Target result state */
.target-status{font-weight:900!important}
.target-achieve{color:#16a34a!important}
.target-fail{color:#dc2626!important}
.target-nil{color:#64748b!important}
.target-status small{display:inline-block;margin-left:3px;font-size:9px;color:inherit;font-weight:800}

/* Inline structural Hyphen review */
.inline-hyphen-review{white-space:nowrap}
.inline-hyphen-review .bad,.inline-hyphen-review .err-arrow{color:#7c3aed!important;font-weight:850}

/* Old policy list is intentionally retired; Error List + Compare Matter are the two review surfaces. */
.policy-error-list{display:none!important}

.field small{display:block;margin-top:4px;color:#74839a;font-size:10px;line-height:1.35}

/* V2 weighted penalty explanation */
.penalty-explain{
  
  border:1px solid #dbe5f2;border-radius:10px;background:#fff;
  color:#53657d;text-align:center
;}
.penalty-main{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;}
.penalty-main b{color:#17243a;}
.penalty-main span{color:#334155;}
.penalty-explain small{display:block;color:#7b8ba1;}

/* ===== Full-width result explanation + polished compare bar ===== */
.penalty-explain{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin:8px 0 12px!important;
  padding:10px 14px!important;
  font-size:12px!important;
  line-height:1.55!important;
}
.penalty-main{
  gap:6px 10px!important;
}
.penalty-main b{
  font-size:13px!important;
  font-weight:900!important;
}
.penalty-main span{
  font-size:12px!important;
  font-weight:750!important;
}
.penalty-explain small{
  margin-top:4px!important;
  font-size:11px!important;
  line-height:1.5!important;
}

.compare-review-bar{
  margin:10px 0 7px!important;
  padding:0!important;
}
.compare-title-chip{
  display:inline-flex!important;
  align-items:center!important;
  min-height:32px!important;
  padding:0 12px!important;
  border:1px solid #cbd8e8!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#17243a!important;
  font-size:11px!important;
  font-weight:900!important;
  box-shadow:0 1px 2px rgba(15,23,42,.03)!important;
}
.compare-font-tools button{
  min-width:42px!important;
  height:32px!important;
}

/* Supreme Global Limits should align with every other page section */
.global-limits-card{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  margin-left:0!important;
  margin-right:0!important;
}
.global-limits-card .global-settings-grid{
  width:100%!important;
}

/* ===== Compare: replacement categories use normal weight =====
   Missing/Extra keep their existing emphasis. */

.v2-compare .err-pair .right,
.v2-compare .err-pair .bad,
.v2-compare .err-pair .wrongword,
.v2-compare .err-pair .rightword,
.v2-compare .err-pair .err-arrow,
.v2-compare .err-pair .change-arrow,
.v2-compare .inline-hyphen-review,
.v2-compare .inline-hyphen-review .bad,
.v2-compare .inline-hyphen-review .err-arrow{
  font-weight:400!important;
}

.logout-inline{display:inline!important;margin:0!important;padding:0!important}
.logout-link{border:0!important;background:transparent!important;color:#1557d6!important;padding:0!important;margin:0!important;font:inherit!important;font-weight:800!important;cursor:pointer!important}
.logout-link:hover{text-decoration:underline}

/* ===== Result hierarchy refinement ===== */
.hero-mismatch-summary{
  margin-top:6px;
  
  
  
}
.error-formula-row{
  padding:9px 10px!important;
  background:#fff!important;
  color:#334155!important;
  font-size:11px!important;
  font-weight:800!important;
  text-transform:none!important;
  letter-spacing:0!important;
  text-align:center!important;
}
.cat-head{background:#f8fafc!important;font-weight:900!important}
.cat-missing{color:#dc2626!important}
.cat-extra{color:#16a34a!important}
.cat-change{color:#2563eb!important}
.cat-vachan{color:#d97706!important}
.cat-gender{color:#f40afc!important}
.cat-space{color:#0891b2!important}
.cat-hyphen{color:#7c3aed!important}
.error-color-legend{display:none!important}
.penalty-explain{display:none!important}

.compare-review-bar{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
}
.compare-rule-chip{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:0 12px!important;
  border:1px solid #cbd8e8!important;
  border-radius:9px!important;
  background:#fff!important;
  color:#475569!important;
  box-shadow:0 1px 2px rgba(15,23,42,.03)!important;
  text-align:center!important;
  font-size:10.5px!important;
  font-weight:750!important;
  line-height:1.35!important;
}
.inline-hyphen-review,.hyphen-error{
  background:transparent!important;
}
.inline-hyphen-review{display:inline-flex!important;align-items:baseline!important;gap:2px!important;padding:0!important}
.pair-bracket{color:#64748b!important;font-weight:400!important}
@media(max-width:900px){
  .compare-review-bar{grid-template-columns:1fr auto!important}
  .compare-rule-chip{grid-column:1/-1;grid-row:2}
}

/* ===== Result summary emphasis ===== */
.hero-mismatch-summary{
  font-size:14px!important;
  line-height:1.45!important;
  color:#2563eb!important;
  font-weight:900!important;
}

/* Structural Space/Hyphen inline review */
.inline-structural-review{
  display:inline-flex!important;
  align-items:baseline!important;
  gap:2px!important;
  padding:0!important;
  background:transparent!important;
  border-radius:0!important;
  font-weight:400!important;
}
.inline-structural-review .pair-bracket,
.inline-structural-review .rightword,
.inline-structural-review .bad,
.inline-structural-review .err-arrow{
  font-weight:400!important;
}
.inline-space-review .rightword,
.inline-space-review .bad,
.inline-space-review .err-arrow{
  color:#0891b2!important;
}
.inline-hyphen-review .rightword,
.inline-hyphen-review .bad,
.inline-hyphen-review .err-arrow{
  color:#7c3aed!important;
}

/* ===== User-centric Compare Matter =====
   Normal text is the learner's typed input.
   Missing is the only master-only token injected into that stream. */
.v2-compare .cmp-token.right{font-weight:400!important}
.v2-compare .cmp-token.miss{
  color:#dc2626!important;
  text-decoration:line-through!important;
  text-decoration-thickness:1px!important;
  font-weight:400!important;
}
.v2-compare .cmp-token.add{
  color:#16a34a!important;
  font-weight:400!important;
}

/* ===== Restored V2 pair grammar on user-centric Compare ===== */
.v2-compare .err-pair{
  white-space:nowrap!important;
  font-weight:400!important;
}
.v2-compare .err-pair .pair-bracket,
.v2-compare .err-pair .pair-correct,
.v2-compare .err-pair .rightword,
.v2-compare .err-pair .err-arrow{
  color:#111827!important;
  font-weight:400!important;
  background:transparent!important;
}
.v2-compare .err-pair-other .bad{font-weight:400!important;}
.v2-compare .err-pair-number .bad{font-weight:400!important;}
.v2-compare .err-pair-gender .bad{font-weight:400!important;}
.v2-compare .err-pair-space .bad{font-weight:400!important;}
.v2-compare .err-pair-hyphen .bad{font-weight:400!important;}

/* Paragraph-break signs are review markers, never raw matcher tokens. */
.v2-compare .para-ok,
.v2-compare .para-miss,
.v2-compare .para-extra{
  display:inline-block!important;
  margin:0 .15em!important;
  font-family:"Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-weight:400!important;
}
.v2-compare .para-ok{color:#2563eb!important}
.v2-compare .para-miss{color:#dc2626!important}
.v2-compare .para-extra{color:#16a34a!important}

/* Structural enhancer must follow the same pair grammar. */
.v2-compare .inline-structural-review .pair-bracket,
.v2-compare .inline-structural-review .rightword,
.v2-compare .inline-structural-review .err-arrow{
  color:#111827!important;
}
.v2-compare .inline-space-review .bad{color:#0891b2!important}
.v2-compare .inline-hyphen-review .bad{color:#7c3aed!important}

/* ===== Compare visible stream = learner input =====
   Bracket treatment stays; master replacement words/arrows are not shown inline.
   Master words remain visible only for Missing errors. */
.v2-compare .err-pair .pair-bracket{
  color:#111827!important;
  font-weight:400!important;
}
.v2-compare .err-pair-other .bad{color:#2563eb!important}
.v2-compare .err-pair-number .bad{color:#d97706!important}
.v2-compare .err-pair-gender .bad{color:#f40afc!important}
.v2-compare .err-pair-space .bad{color:#0891b2!important}
.v2-compare .err-pair-hyphen .bad{color:#7c3aed!important}

/* Result table: Target value + Status, Viram joins counted error categories. */
.target-value{font-weight:900!important;color:#334155!important}
.cat-viram{color:#64748b!important}

/* ===== KrutiDev text converter ===== */
.converter-head{margin-bottom:14px}
.converter-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:10px 0 7px}
.converter-label small{color:#8190a5}
.converter-input,.converter-output{width:100%;resize:vertical;border:1px solid #ccd9ea;border-radius:12px;background:#fff;padding:14px 15px;font-size:20px;line-height:1.75;box-sizing:border-box;}
.converter-output{background:#fbfdff}
.converter-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:9px}

/* ===== Scoped bulk result deletion ===== */
.result-bulk-bar{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;margin:0 0 10px;padding:10px 12px;border:1px solid #d8e3ef;border-radius:10px;background:#f8fbff}
.result-bulk-bar>label{display:flex;align-items:center;gap:7px;font-weight:800;color:#334155;white-space:nowrap}
.result-bulk-bar>span{color:#718096;font-size:11px;flex:1}
.result-bulk-bar>div{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.result-bulk-bar .btn{min-height:34px;padding:7px 11px;font-size:11px}
.result-bulk-bar .danger-all{background:#dc2626!important;border-color:#dc2626!important;color:#fff!important}
.select-col{width:34px;text-align:center!important}
.empty-state{padding:24px;text-align:center;color:#718096}
@media(max-width:700px){.result-bulk-bar{align-items:stretch}.result-bulk-bar>span{flex-basis:100%}.result-bulk-bar>div{width:100%}.result-bulk-bar .btn{flex:1}}

/* ===== Discipline / validity UI polish ===== */
.compare-review-bar .compare-font-tools{grid-column:3}
.learner-control-card .control-note{margin:4px 0 12px}
.learner-control-card .field small{display:block;margin-top:5px;color:#74839a;font-size:10px;line-height:1.35}
@media(max-width:900px){
  .compare-review-bar .compare-font-tools{grid-column:2}
}

/* ===== Chance / Taken / Validity management polish ===== */

.taken-count{text-align:center;font-variant-numeric:tabular-nums}
.available .manage .btn{
  width:104px!important;min-width:104px!important;max-width:104px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  white-space:nowrap!important;
}
.test-locked{
  background:#fee2e2!important;border-color:#fecaca!important;color:#b42318!important;
  opacity:1!important;cursor:not-allowed!important;
}
.account-manage-grid .field label small{
  display:inline!important;margin:0 0 0 4px!important;
  font-size:inherit!important;color:#6b7c93!important;font-weight:400!important;
}
.test-final-grid{margin-top:12px}
.learner-list .dhead,.learner-list .drow{
  grid-template-columns:24px 36px minmax(220px,1.5fr) 190px 90px 90px 180px!important;
  min-width:900px!important;
}
.validity-cell{gap:7px;}

.validity-renew{display:flex;align-items:center;gap:4px}
.validity-renew input{width:54px!important;min-width:54px!important;height:30px!important;padding:3px 5px!important;font-size:11px!important}
.mini-renew{height:30px!important;min-width:58px!important;padding:0 7px!important;border-radius:8px!important;font-size:10px!important;white-space:nowrap!important}
.learner-control-details{padding:0!important;overflow:hidden}
.learner-control-details>summary{
  list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px
}
.learner-control-details>summary::-webkit-details-marker{display:none}
.learner-control-details>summary:after{content:"＋";font-weight:900;color:#2563eb}
.learner-control-details[open]>summary:after{content:"−"}
.learner-control-details>summary span{font-size:11px;color:#718096}
.learner-control-body{border-top:1px solid #dbe5f0;padding:14px 18px 18px}
@media(max-width:900px){
  .learner-control-details>summary{align-items:flex-start;flex-direction:column}
}

/* ===== Pinned target / Done / Admin session polish ===== */
.ico.pin{background:#fffaf0!important;border-color:#fed7aa!important}
.ico.pin.on{background:#fff1e6!important;border-color:#fb923c!important;box-shadow:0 0 0 2px rgba(251,146,60,.10)}
.available .drow.target-pinned{
  background:linear-gradient(90deg,#fff8e8 0,#fffdf8 54%,#fff 100%)!important;
  
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.08)
;}
.available .drow.target-pinned:hover{background:linear-gradient(90deg,#fff4d6 0,#fffaf0 54%,#fff 100%)!important}
.today-target{display:inline-flex;align-items:center;margin-left:6px;padding:2px 7px;border-radius:999px;background:#fff0c2;color:#9a4d00;font-size:9px;font-weight:900;vertical-align:middle;white-space:nowrap}
.taken-count{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.done-mark{display:inline-flex;align-items:center;padding:2px 6px;border-radius:999px;background:#dcfce7;color:#08743a;font-size:8.5px;font-weight:900;white-space:nowrap}
.session-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.session-actions .btn{min-height:32px;padding:6px 9px;font-size:10px;white-space:nowrap}

/* ===== Exact validity modal + authoritative learner test columns ===== */
.validity-cell{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
}
.validity-cell>b{min-width:0!important;white-space:nowrap}
.ico.validity{
  background:#fff8e8!important;
  border-color:#f6c978!important;
}
.ico.validity:hover{
  background:#ffefc5!important;
  border-color:#e9a62e!important;
}
.validity-modal{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;
  padding:20px;background:rgba(15,23,42,.46);
  backdrop-filter:blur(2px);
}
.validity-modal[hidden]{display:none!important}
body.modal-open{overflow:hidden}
.validity-modal-card{
  position:relative;width:min(430px,calc(100vw - 32px));
  padding:24px;border:1px solid #d7e1ee;border-radius:18px;
  background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.22);
}
.validity-modal-close{
  position:absolute;right:12px;top:10px;width:34px;height:34px;
  padding:0;border:0;border-radius:9px;background:#f4f7fb;color:#506078;
  font-size:22px;line-height:1;cursor:pointer
}
.validity-modal-icon{
  display:grid;place-items:center;width:48px;height:48px;margin-bottom:10px;
  border-radius:13px;background:#fff4d8;font-size:24px
}
.validity-modal-card h3{margin:0 0 5px;font-size:20px}
.validity-modal-card p{margin:0 0 16px;color:#63748c;font-size:12px;line-height:1.5}
.validity-modal-card label{display:block;margin-bottom:6px;font-weight:800}
.validity-modal-card input[type=number]{
  width:100%;height:46px;font-size:18px;font-weight:700
}
.validity-modal-card small{
  display:block;margin-top:7px;color:#718096;font-size:10.5px;line-height:1.5
}
.validity-modal-actions{
  display:flex;justify-content:flex-end;gap:8px;margin-top:18px
}

/* Final authoritative grid: # | Test | Taken | Type | Language | EXAM | Upload | Time | Action */
.available .dhead,.available .drow{
  grid-template-columns:
    42px
    minmax(300px,1.65fr)
    82px
    82px
    100px
    105px
    112px
    76px
    116px!important;
  min-width:1080px!important;
  align-items:center!important;
}
.available .dhead>div,.available .drow>div{
  min-width:0;
}
.available .taken-head,
.available .taken-count{
  text-align:center!important;
  justify-self:stretch!important;
}
.available .taken-count{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
.available .manage{
  justify-content:flex-end!important;
}
.available .drow.target-pinned{
  border-left:4px solid #f59e0b;
}
@media(max-width:900px){
  .validity-modal-card{padding:20px}
}


/* === Final launch UI polish: Rentals + text converter === */




.rental-create-grid .rental-days-field{max-width:280px}

.rental-account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}
.rental-account-card{margin:0;padding:18px;min-width:0}
.rental-account-top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:11px;align-items:center}
.rental-avatar{width:44px;height:44px;border-radius:13px;background:#eaf1ff;color:#2559d9;display:grid;place-items:center;font-weight:950;font-size:18px}
.rental-identity h3{margin:0;font-size:17px}.rental-identity p{margin:2px 0 0;color:#718198;font-size:12px}
.rental-class-form{margin:15px 0 13px;padding:12px;background:#f8fbff;border:1px solid #e4edf7;border-radius:12px}
.rental-input-action{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.rental-input-action .btn{white-space:nowrap}
.rental-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.rental-metrics>div{padding:11px;border:1px solid #e1e9f3;border-radius:11px;background:#fff}
.rental-metrics small,.rental-metrics span{display:block;color:#7a8aa0;font-size:10px}.rental-metrics b{display:block;margin:3px 0;font-size:16px}
.rental-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.rental-control-form label{display:block;color:#61738b;font-size:10px;font-weight:850;margin:0 0 4px 2px}
.rental-control-form>div{display:grid;grid-template-columns:72px minmax(74px,auto);gap:6px}.rental-control-form input{min-width:0}
.rental-status-form .btn{min-width:86px}
.converter-workspace{padding:18px}
.converter-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.converter-pane{min-width:0}.converter-pane .converter-label{margin-top:0}
.converter-label>div{display:grid;gap:2px}.word-counter{flex:0 0 auto;padding:4px 8px;border-radius:999px;background:#eef4ff;color:#315dba;font-size:11px;font-weight:700}
.word-counter b{font-size:12px}
.converter-input,.converter-output{min-height:430px}

@media(max-width:950px){
  .rental-account-grid{grid-template-columns:1fr}
  .converter-columns{grid-template-columns:1fr}
  .converter-input,.converter-output{min-height:260px}
}
@media(max-width:700px){
  .rental-create-grid{grid-template-columns:1fr}.rental-create-grid .rental-days-field{max-width:none}
  .rental-metrics{grid-template-columns:1fr 1fr 1fr}
  .rental-controls{grid-template-columns:1fr 1fr}.rental-status-form{grid-column:1/-1}.rental-status-form .btn{width:100%}
}
@media(max-width:480px){
  .rental-metrics{grid-template-columns:1fr}.rental-controls{grid-template-columns:1fr}.rental-control-form>div{grid-template-columns:84px 1fr}
}


/* === Account + Seat Reassign + Professional Rentals + Safe Converter === */
.converter-main-actions{display:flex!important;justify-content:center!important;align-items:center!important;gap:10px!important;margin-top:14px!important}
.converter-main-actions .btn{min-width:160px!important}
.account-page-head{margin-bottom:14px}
.account-info-grid{display:grid;grid-template-columns:1.55fr repeat(3,1fr);gap:11px;margin-bottom:14px}
.account-info-grid>.card{margin:0;min-height:118px}
.account-profile-card{display:flex;align-items:center;gap:13px}.account-avatar{width:56px;height:56px;flex:0 0 56px;border-radius:16px;background:#e9f1ff;color:#2459d6;display:grid;place-items:center;font-size:22px;font-weight:950}.account-profile-card small,.account-fact small{display:block;color:#718198;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.account-profile-card h2{margin:3px 0 1px;font-size:20px}.account-profile-card p{margin:0 0 6px;color:#61738b}.account-brand{display:inline-flex;padding:3px 7px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:10px;font-weight:800}.account-fact{display:flex;flex-direction:column;justify-content:center}.account-fact b{font-size:18px;margin:6px 0 2px}.account-fact span{font-size:10.5px;color:#718198}.account-rights-card,.account-manage-card{width:100%;max-width:none}.account-rights-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.account-right{display:flex;gap:9px;align-items:flex-start;padding:12px;border:1px solid #dce6f2;border-radius:11px;background:#f9fbff}.account-right>span{display:grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border-radius:50%;background:#dcfce7;color:#08743a;font-weight:950}.account-right b,.account-right small{display:block}.account-right small{margin-top:2px;color:#718198;font-size:10.5px;line-height:1.4}.account-manage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.account-manage-grid .field{margin-bottom:0}
.ico.reassign{background:#eefdf7!important;border-color:#a7e8cb!important;color:#08754b!important;font-size:18px!important}.reassign-modal-card{width:min(620px,calc(100vw - 32px))}.reassign-modal-icon{background:#e9fbf2;color:#08754b}.reassign-grid{margin-top:12px}.reassign-warning{margin-top:2px;padding:10px 11px;border:1px solid #fecdd3;border-radius:9px;background:#fff5f5;color:#9f1239;font-size:10.5px;line-height:1.5}
.rental-page-head{margin-bottom:14px}.rental-create-card{width:100%!important;max-width:none!important;margin:0 0 16px!important;padding:17px 18px!important}.rental-create-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px 12px!important}.rental-create-grid .field{margin:0!important}.rental-create-grid .field:nth-child(4),.rental-create-grid .field:nth-child(5){grid-column:span 1}.rental-create-card .form-actions{margin-top:12px}.rental-tag{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#eef4ff;color:#2458cb;font-size:10px;font-weight:900}.rental-list-title{margin:0 2px 8px}.rental-list-title span{color:#718198;font-size:11px}.rental-list-card{padding:0!important;overflow:hidden}.rental-list{border:0!important;border-radius:0!important}.rental-list .drow{min-height:64px}.rental-tools{justify-content:flex-start!important}.rental-tools form{margin:0}.ico.rental-plus{background:#eef4ff!important;border-color:#bfd2ff!important;color:#2458cb!important;font-size:18px!important;font-weight:900!important}
@media(max-width:980px){.account-info-grid{grid-template-columns:1fr 1fr}.account-profile-card{grid-column:1/-1}.account-rights-grid{grid-template-columns:1fr 1fr}.account-manage-grid{grid-template-columns:1fr 1fr}.rental-create-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:640px){.account-info-grid,.account-rights-grid,.account-manage-grid{grid-template-columns:1fr}.account-profile-card{grid-column:auto}.rental-create-grid{grid-template-columns:1fr!important}.converter-main-actions{flex-direction:row!important}.converter-main-actions .btn{min-width:0!important;flex:1}.reassign-grid{grid-template-columns:1fr}}

/* Converter draft + per-box actions */
.converter-pane{display:flex;flex-direction:column}
.converter-pane-action{display:flex;justify-content:center;align-items:center;padding-top:12px}
.converter-pane-action .btn{min-width:190px}
.converter-head .actions{align-self:flex-start}

/* Live Class + teacher storage quota */
.live-class-open{background:#7c3aed!important;border-color:#7c3aed!important;color:#fff!important}
.live-join-btn{background:#8b1e1e!important;border-color:#8b1e1e!important;color:#fff!important;text-align:center}
.live-class-modal form{display:grid;gap:8px}.live-class-modal label{font-size:11px;font-weight:800;color:#26364f}.live-remove-form{margin-top:10px!important;display:block!important}.live-remove-form .btn{width:100%}
.storage-meter{margin:-4px 0 12px;padding:10px 12px;border:1px solid #d8e4f3;border-radius:11px;background:#fff}
.storage-meter>div{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:#53657d}.storage-meter i{display:block;height:7px;margin-top:7px;border-radius:999px;background:#e8eef7;overflow:hidden}.storage-meter i span{display:block;height:100%;background:#2764ed;border-radius:999px}.storage-meter.warning i span{background:#f59e0b}.storage-meter.critical i span{background:#dc2626}.storage-meter.warning{border-color:#fcd9a1}.storage-meter.critical{border-color:#fecaca}
.rental-list .dhead,.rental-list .drow{grid-template-columns:58px minmax(240px,1.5fr) 170px 120px 125px 105px 150px!important;min-width:1060px!important}

/* Supreme lightweight performance monitor */
.performance-summary .performance-ok{border-color:#cfe8d8}.performance-summary .performance-warning{border-color:#f8d7a0}.performance-summary .performance-critical{border-color:#f3b8b8}
.performance-chip{display:inline-block;padding:4px 8px;border-radius:999px;font-weight:800;font-size:11px;background:#edf4ff;color:#2458cb}
.performance-chip.warning{background:#fff2d9;color:#9a5a00}.performance-chip.critical{background:#fee2e2;color:#b42318}.performance-chip.ok{background:#e7f8ee;color:#08743a}
.performance-notes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:10px 0 14px}.performance-notes>div{padding:12px;border:1px solid var(--line2);border-radius:10px;background:#f9fbff}.performance-notes b,.performance-notes span{display:block}.performance-notes span{margin-top:4px;color:#61738d;font-size:12px}.performance-clear{display:flex;justify-content:flex-end;margin-top:12px}
@media(max-width:900px){.performance-notes{grid-template-columns:1fr 1fr}}@media(max-width:600px){.performance-notes{grid-template-columns:1fr}}
n/* Rank full-width + remarks */
.leader-wrap .card{width:100%}.leader-wrap table{min-width:900px}.leader-wrap .rank-name-col,.leader-wrap td:nth-child(2){min-width:250px}.rank-remark{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900}.rank-winner{background:#fef3c7;color:#92400e}.rank-topper{background:#e8edff;color:#3346a8}.rank-achiever{background:#e9f9f1;color:#08754b}.rank-improver{background:#eaf6ff;color:#176493}.rank-learner{background:#f1f5f9;color:#475569}.rank-beginner{background:#fff1f2;color:#b42318}
/* B-compatible dictation speed selector */
.secure-audio-controls{grid-template-columns:42px minmax(120px,1fr) 92px 38px 82px minmax(132px,170px)!important}.secure-audio-speed{height:36px!important;min-width:132px;padding:0 8px!important;border:1px solid #cbd8e8!important;border-radius:9px!important;background:#fff!important;color:#17243a!important;font-weight:850!important;box-shadow:none!important}.secure-audio-speed:focus{border-color:#79a3f4!important;box-shadow:0 0 0 3px rgba(39,100,237,.09)!important}
@media(max-width:760px){.secure-audio-controls{grid-template-columns:40px minmax(100px,1fr) 82px 36px!important}.secure-audio-volume{display:none!important}.secure-audio-speed{grid-column:1/-1;width:100%!important;max-width:none!important}}
/* Inline optional note on rental label */
.rental-create-grid .field label small{display:inline!important;margin-left:4px!important;font-size:inherit!important;font-weight:400!important;color:#6b7c93!important}


/* ===== Full-width Test Setup + Typing Target ===== */
.typing-setup-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.typing-summary7{grid-template-columns:repeat(7,minmax(0,1fr))}
.typing-perf6{grid-template-columns:repeat(6,minmax(0,1fr))!important}

/* Result provenance watermark: B-style URL + Test + Learner, readable on screen/print. */
.result-watermark-zone{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fff;
  border-radius:14px;
  margin-bottom:0;
}
.result-watermark{
  position:absolute;
  left:50%;
  top:50%;
  width:min(92%,900px);
  transform:translate(-50%,-50%) rotate(-18deg);
  z-index:0;
  pointer-events:none;
  user-select:none;
  text-align:center;
  color:rgba(194,92,24,.12);
  font-weight:850;
  line-height:1.18;
  letter-spacing:.01em;
}
.result-watermark-url{font-size:clamp(38px,4.1vw,52px);font-weight:950}
.result-watermark-meta{font-size:clamp(30px,3.35vw,43px);font-weight:850;margin-top:5px}
.result-watermark-content{position:relative;z-index:1}
.result-watermark-content .compare{background:transparent!important;margin-bottom:0}

@media(max-width:900px){
  .typing-setup-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .typing-perf6{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:640px){
  .typing-setup-grid{grid-template-columns:1fr!important}
  .typing-summary7{grid-template-columns:repeat(2,minmax(0,1fr))}
  .typing-perf6{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .result-watermark{width:94%;color:rgba(194,92,24,.11)}
  .result-watermark-url{font-size:32px}
  .result-watermark-meta{font-size:26px;margin-top:3px}
}
@media print{
  .result-watermark-zone{overflow:hidden!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .result-watermark{display:block!important;position:absolute!important;left:50%!important;top:50%!important;z-index:0!important;color:rgba(194,92,24,.13)!important;transform:translate(-50%,-50%) rotate(-18deg)!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .result-watermark-url{font-size:52px!important}
  .result-watermark-meta{font-size:43px!important}
  .result-watermark-content{position:relative!important;z-index:1!important}
}


/* ===== Public Login Landing ===== */
.login-landing{width:100%;max-width:1280px;margin:0 auto;padding:2px 0 10px}
.landing-topline{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:2px 0 18px;border-bottom:1px solid var(--line)}
.landing-brand{display:flex;align-items:center;gap:11px;color:#1749b5}.landing-brand>b{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--blue);color:#fff;font-size:22px}.landing-brand span,.landing-brand strong,.landing-brand small{display:block}.landing-brand strong{font-size:19px}.landing-brand small{margin-top:1px;color:#33445e;font-weight:650}.landing-contact-strip{padding:0;border:0;border-radius:0;background:transparent;color:inherit;font-size:15px;font-weight:800;line-height:1.2;white-space:nowrap}
.landing-hero{display:grid;align-items:stretch;padding:30px 0 22px;}.landing-intro h1{padding-left:4px;margin:0 0 10px;font-size:38px;line-height:1.12;letter-spacing:-.025em}.landing-intro h1 span{color:var(--blue)}.landing-lead{padding-left:4px;margin:0 0 20px;color:#435570;font-size:15px;line-height:1.65;font-weight:600;}
.landing-feature-grid{display:grid;}.landing-feature{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow);text-align:center;}.landing-feature>b{display:block;color:var(--blue);font-size:25px;line-height:1.2;margin-bottom:8px}.landing-feature strong,.landing-feature small{display:block}.landing-feature strong{font-size:12px;color:#102a59}.landing-feature small{margin-top:5px;color:#52647d;font-size:10.5px;line-height:1.5}
.landing-login-card{margin:0;}.landing-login-head{text-align:center;}.landing-login-head h2{margin:0;font-size:22px}.landing-login-head p{margin:5px 0 0;color:#5e6f87}.landing-login-button{width:100%;height:46px;font-size:15px}.landing-access-note{display:flex;gap:9px;align-items:flex-start;border:1px solid #d7e5fb;border-radius:10px;background:#f3f7ff;color:#163a83;}.landing-access-note span,.landing-access-note strong,.landing-access-note small{display:block}.landing-access-note small{margin-top:2px;color:#4e6484;font-size:10.5px}
.landing-teacher-card{margin:14px 0;padding:16px 18px}.landing-teacher-head{display:flex;align-items:center;gap:18px;padding-bottom:11px;border-bottom:1px solid var(--line2)}.landing-teacher-head h2{margin:0;color:#154cba;font-size:17px}.landing-teacher-head p{margin:0;color:#50617a}.landing-teacher-grid{display:grid;grid-template-columns:repeat(5,1fr)}.landing-teacher-grid>div{display:flex;gap:10px;padding:15px 13px;border-right:1px solid var(--line2)}.landing-teacher-grid>div:last-child{border-right:0}.landing-teacher-grid b{color:var(--blue);font-size:22px}.landing-teacher-grid span,.landing-teacher-grid strong,.landing-teacher-grid small{display:block}.landing-teacher-grid strong{font-size:11.5px}.landing-teacher-grid small{margin-top:4px;color:#60718a;font-size:10px;line-height:1.45}
.landing-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:7px 18px 0;color:#3f516a;font-size:11.5px;font-weight:750;text-align:center}
@media(max-width:1050px){.landing-hero{grid-template-columns:1fr;gap:20px}.landing-login-card{max-width:650px;width:100%;margin:0 auto}.landing-teacher-grid{grid-template-columns:repeat(3,1fr)}.landing-teacher-grid>div:nth-child(3){border-right:0}.landing-feature-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:760px){.landing-topline{align-items:flex-start}.landing-contact-strip{padding:8px 11px;font-size:12px}.landing-hero{padding:22px 0 16px}.landing-intro h1{font-size:31px}.landing-feature-grid{grid-template-columns:repeat(2,1fr)}.landing-feature{min-height:132px}.landing-teacher-head{display:block}.landing-teacher-head p{margin-top:4px}.landing-teacher-grid{grid-template-columns:1fr 1fr}.landing-teacher-grid>div{border-right:0;border-bottom:1px solid var(--line2)}.landing-benefits{grid-template-columns:1fr 1fr}.landing-login-card{padding:22px 18px}}
@media(max-width:420px){.landing-brand strong{font-size:16px}.landing-brand small{font-size:10px}.landing-feature-grid,.landing-teacher-grid,.landing-benefits{grid-template-columns:1fr}.landing-feature{min-height:0}.landing-intro h1{font-size:28px}}

/* Landing polish: full-width hero + simple four-step flow */
.landing-how-card{margin:14px 0 0;padding:18px}
.landing-how-head{text-align:center;margin-bottom:14px}
.landing-how-head h2{margin:0;color:#153b78;font-size:20px}
.landing-how-head p{margin:4px 0 0;color:#62748e;font-size:12px}
.landing-how-grid{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr);align-items:stretch;gap:8px}
.landing-how-step{display:flex;align-items:center;gap:11px;min-height:82px;padding:13px 14px;border:1px solid var(--line2);border-radius:12px;background:#f9fbff}
.landing-how-step>b{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#e8f0ff;color:#1f5fe5;font-size:15px}
.landing-how-step span,.landing-how-step strong,.landing-how-step small{display:block}
.landing-how-step strong{color:#17335f;font-size:12.5px}
.landing-how-step small{margin-top:4px;color:#62748e;font-size:10.5px;line-height:1.45}
.landing-how-arrow{display:grid;place-items:center;color:#7f95b7;font-size:22px;font-weight:800}
@media(max-width:1050px){
  .landing-hero{grid-template-columns:1fr;gap:20px;padding-left:0;padding-right:0}
  .landing-login-card{max-width:none}
  .landing-how-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .landing-how-arrow{display:none}
}
@media(max-width:760px){
  .landing-how-grid{grid-template-columns:1fr}
  .landing-how-arrow{transform:rotate(90deg);min-height:18px}
  .landing-how-step{min-height:0}
}
/* Typing result comparison: keep all comparison text normal-weight; colors still communicate status. */
.compare.typing-compare,
.compare.typing-compare *{font-weight:400!important}



/* ===== Learner profile result-table cell integrity =====
   Keep <td> as a real table-cell; flex belongs inside the cell. */
.result-bulk-form .result-action-cell{
  display:table-cell!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
  width:86px!important;
  min-width:86px!important;
  text-align:right!important;
}
.result-bulk-form .result-row-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:5px!important;
  width:100%!important;
}
.result-bulk-form table th:last-child,
.result-bulk-form table td:last-child{
  min-width:86px;
}


/* ===== Learn: compact word-level Error Bank ===== */
.learn-error-grid{gap:7px!important}
.learn-error-grid .error-list-head{padding:6px 10px!important}
.learn-error-grid .error-inline-list{
  padding:7px 11px!important;
  line-height:1.6!important;
  font-size:12px!important;
  font-weight:600!important;
}

/* ===== Learner profile: compact attempt/result rows =====
   Generic table padding made these rows taller than Test/Learner dense lists.
   Keep action buttons 32px but remove unnecessary vertical whitespace. */
.result-bulk-form table th{padding:7px 9px!important;height:34px!important}
.result-bulk-form table td{
  padding:5px 9px!important;
  height:43px!important;
  min-height:43px!important;
  vertical-align:middle!important;
  line-height:1.25!important;
}
.result-bulk-form .result-action-cell{padding-top:5px!important;padding-bottom:5px!important}
.result-bulk-form input[type="checkbox"]{width:13px!important;height:13px!important;min-width:13px!important;min-height:13px!important}


/* ===== Required-content submit gate + PASS/FAIL ===== */
.exam-progress-wrap{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;flex:1}
.required-progress{
  padding:7px 12px;border:1px solid #fecaca;border-radius:10px;background:#fff7f7;
  color:#c91f1f;font-size:11px;font-weight:850;text-align:center;white-space:normal;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap
}
.required-progress .progress-divider{opacity:.55;font-weight:900}
.required-progress.ok{border-color:#b7e4c7;background:#effaf3;color:#08743a}
.required-progress.pending{border-color:#fecaca;background:#fff7f7;color:#c91f1f}
.result-pass{display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:900}
.result-pass-pass{background:#dcfce7;color:#08743a;border:1px solid #b7e4c7}
.result-pass-fail{background:#fee2e2;color:#b42318;border:1px solid #fecaca}
@media(max-width:700px){.examfoot{gap:8px;flex-wrap:wrap}.exam-progress-wrap{order:3;flex-basis:100%}.required-progress{width:100%}}

/* Staff nav may contain more tools; keep it horizontally usable instead of wrapping into broken rows. */
.nav-in{overflow-x:auto;scrollbar-width:thin}
.nav-in>a{flex:0 0 auto}

.dashboard-subscription{margin-top:0;margin-bottom:14px}


/* Landing spacing + footer refinement */
.landing-teacher-card{
  margin-top:20px;
  margin-bottom:0;
  padding-bottom:14px;
}
.landing-teacher-grid{
  margin-bottom:0;
}
.landing-site-footer{
  margin-top:18px;
  border:1px solid #cfdbec;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.landing-footer-grid{
  display:grid;
  grid-template-columns:1.35fr .9fr 1fr;
  align-items:stretch;
}
.landing-footer-block{
  min-width:0;
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.landing-footer-block + .landing-footer-block{
  border-left:1px solid #e2e9f3;
}
.landing-footer-title{
  color:#123f86;
  font-size:15px;
  font-weight:800;
  line-height:1.25;
}
.landing-footer-text{
  margin-top:5px;
  color:#556987;
  font-size:13px;
  line-height:1.45;
}
.landing-footer-social{
  align-items:flex-start;
}
.landing-social-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.landing-social-links a{
  width:34px;
  height:34px;
  border:1px solid #cfdbec;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#1f61e8;
  background:#f7faff;
  font-weight:850;
  font-size:15px;
  line-height:1;
}
.landing-social-links a:hover,
.landing-social-links a:focus-visible{
  background:#eef4ff;
  border-color:#abc4f4;
}
@media(max-width:760px){
  .landing-teacher-card{margin-top:16px;padding-bottom:10px}
  .landing-site-footer{margin-top:14px}
  .landing-footer-grid{grid-template-columns:1fr}
  .landing-footer-block{padding:14px 16px}
  .landing-footer-block + .landing-footer-block{
    border-left:0;
    border-top:1px solid #e2e9f3;
  }
}


/* ===== Mobile-first learner lists: cards without horizontal scrolling ===== */
.mobile-test-meta{display:none}
@media(max-width:700px){
  .available{border:0;overflow:visible;background:transparent}
  .available .dhead{display:none}
  .available .drow{min-width:0!important;display:grid!important;grid-template-columns:1fr auto!important;gap:10px 12px!important;align-items:start!important;margin:0 0 10px;padding:13px!important;border:1px solid var(--line)!important;border-radius:13px;background:#fff;box-shadow:var(--shadow)}
  .available .drow:hover{background:#fff}
  .available .test-serial,.available .taken-count,.available .test-type-cell,.available .test-language-cell,.available .test-topic-cell,.available .test-date-cell,.available .test-time-cell{display:none!important}
  .available .test-main{min-width:0;grid-column:1/-1}
  .available .test-main .title{font-size:15px;line-height:1.35}
  .available .desktop-test-sub{display:none}
  .available .mobile-test-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:9px}
  .available .mobile-test-meta span{min-width:0;padding:7px 8px;border:1px solid var(--line2);border-radius:9px;background:#f8fbff;color:#50627c;font-size:10.5px;overflow-wrap:anywhere}
  .available .mobile-test-meta b{display:block;color:#223b60;font-size:9px;text-transform:uppercase;margin-bottom:2px}
  .available .test-start-cell{grid-column:1/-1;justify-content:stretch!important}
  .available .test-start-cell .btn,.available .test-start-cell button{width:100%!important;min-height:40px}

  .history{border:0;overflow:visible;background:transparent}
  .history .dhead{display:none}
  .history .drow{min-width:0!important;display:grid!important;grid-template-columns:1fr auto!important;gap:7px 10px!important;margin:0 0 10px;padding:13px!important;border:1px solid var(--line)!important;border-radius:13px;background:#fff;box-shadow:var(--shadow)}
  .history .result-serial{display:none}
  .history .result-main{grid-column:1/-1}
  .history .result-main .title{font-size:15px}
  .history .result-type{grid-column:1/2}
  .history .result-accuracy{grid-column:2/3;grid-row:2;text-align:right;font-size:14px}
  .history .result-speed{grid-column:1/2;color:#50627c;font-size:11px}
  .history .result-date{grid-column:1/2;color:#718198;font-size:10.5px}
  .history .result-view{grid-column:2/3;grid-row:3/5;align-self:end;justify-content:flex-end}

  .leader-wrap .table-wrap{overflow:visible;border:0}
  .leader-wrap table{min-width:0!important;display:block}
  .leader-wrap thead{display:none}
  .leader-wrap tbody{display:block}
  .leader-wrap tr.rank-mobile-card{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin:0 0 10px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:var(--shadow)}
  .leader-wrap tr.rank-mobile-card.current-rank{border-color:#9bb9f7;background:#f6f9ff}
  .leader-wrap tr.rank-mobile-card td{display:flex!important;align-items:center;justify-content:space-between;gap:8px;min-width:0!important;padding:0!important;border:0!important;text-align:right;font-size:11px}
  .leader-wrap tr.rank-mobile-card td::before{content:attr(data-label);color:#718198;font-size:9px;font-weight:850;text-transform:uppercase;text-align:left}
  .leader-wrap tr.rank-mobile-card td[data-label="Learner"]{grid-column:1/-1;font-size:14px;border-bottom:1px solid var(--line2)!important;padding-bottom:8px!important}
  .leader-wrap tr.rank-mobile-card td[data-label="Rank"]{grid-column:1/2}
  .leader-wrap tr.rank-mobile-card td[data-label="Remark"]{grid-column:2/3}
  .leader-wrap tr.rank-mobile-card td[data-label="Highest"],.leader-wrap tr.rank-mobile-card td[data-label="Lowest"]{display:none!important}
}
@media(max-width:390px){.available .mobile-test-meta{grid-template-columns:1fr 1fr}.available .mobile-test-meta span:last-child{grid-column:1/-1}}

/* ===== Public no-write demo ===== */
.landing-demo-actions{margin-top:12px;}.landing-demo-actions .btn{text-align:center}
.demo-page{max-width:900px;margin:0 auto}.demo-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.demo-top h1{margin:7px 0 3px}.demo-top p{margin:0;color:var(--muted)}.demo-switch{display:flex;gap:7px;margin-bottom:12px}.demo-switch a{padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:850}.demo-switch a.on{background:var(--blue);color:#fff;border-color:var(--blue)}.demo-card{padding:18px}.demo-instruction{display:flex;gap:12px;align-items:flex-start;margin:8px 0 10px}.demo-instruction b{min-width:70px;color:#1749b5}.demo-instruction span{color:#566a86}.demo-audio-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;border:1px solid var(--line);border-radius:11px;background:#f8fbff;margin-bottom:14px}.demo-audio-row span{color:#718198;font-size:11px}.demo-reference{padding:14px;border:1px solid var(--line);border-radius:11px;background:#f8fbff;font-size:16px;line-height:1.7;margin-bottom:14px}.demo-card textarea{min-height:170px;font-size:16px}.demo-actions{display:flex;gap:8px;margin-top:10px}.demo-result{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:12px;border:1px solid #b7e4c7;border-radius:10px;background:#effaf3;color:#0b6134}.demo-result b{font-size:14px}.demo-result small{flex-basis:100%;color:#587565}
@media(max-width:640px){.demo-top{flex-direction:column}.demo-top .btn{width:100%;text-align:center}.landing-demo-actions{grid-template-columns:1fr}.demo-actions{flex-direction:column}.demo-actions button{width:100%}}

/* Public real-matcher demos: same evaluation engine, zero result persistence. */
.demo-public-list{display:grid;gap:12px;margin-top:14px}.demo-public-card{display:flex;align-items:center;justify-content:space-between;gap:18px}.demo-public-card h2{margin:6px 0 4px;font-size:18px}.demo-public-card p{margin:0;color:#61728c}.demo-public-card small{display:block;margin-top:5px;color:#526681;font-weight:700}.demo-real-test audio{width:100%;margin:10px 0 6px}.demo-real-test textarea{width:100%;min-height:260px;margin-top:14px;font-size:18px;line-height:1.7}.demo-nosave-note{margin-top:14px;color:#526681}.demo-nosave-note b{color:#123f86}
@media(max-width:700px){.demo-public-card{align-items:stretch;flex-direction:column}.demo-public-card .btn{width:100%;text-align:center}.demo-real-test textarea{min-height:230px}.demo-real-test .examfoot{align-items:center}}


/* ===== Compact 2-line mobile test cards ===== */
@media(max-width:700px){
  .available .drow{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    column-gap:10px!important;
    row-gap:2px!important;
    align-items:center!important;
    margin-bottom:6px!important;
    padding:8px 9px 8px 11px!important;
    border-radius:11px!important;
    min-height:0!important;
  }
  .available .test-main{
    grid-column:1!important;
    grid-row:1/3!important;
    min-width:0!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    row-gap:3px!important;
    align-self:center!important;
  }
  .available .test-main .title{
    min-width:0!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .available .test-main .title .dbid{font-size:10px!important}
  .available .test-main .title .today-target{
    font-size:9px!important;
    padding:1px 4px!important;
    vertical-align:1px;
  }
  .available .mobile-test-meta{
    display:flex!important;
    min-width:0!important;
    gap:0!important;
    margin:0!important;
    color:#60708a!important;
    font-size:10px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  .available .mobile-test-meta span{
    min-width:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:inherit!important;
    font-size:inherit!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .available .mobile-test-meta span+span:before{
    content:" · ";
    padding:0 3px;
    color:#9aa8ba;
  }
  .available .mobile-test-meta b{
    display:inline!important;
    margin:0 2px 0 0!important;
    color:#41536e!important;
    font-size:inherit!important;
    text-transform:none!important;
  }
  .available .test-start-cell{
    grid-column:2!important;
    grid-row:1/3!important;
    align-self:center!important;
    justify-content:flex-end!important;
  }
  .available .test-start-cell .btn,
  .available .test-start-cell button{
    width:auto!important;
    min-width:78px!important;
    min-height:32px!important;
    padding:7px 10px!important;
    border-radius:9px!important;
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
}


/* ===== Compact 2-line mobile Results + Rank cards ===== */
@media(max-width:700px){
  /* Results: Test + View | Type · Accuracy · Speed · Date */
  .history .drow{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    column-gap:9px!important;
    row-gap:3px!important;
    align-items:center!important;
    margin-bottom:6px!important;
    padding:8px 9px 8px 11px!important;
    border-radius:11px!important;
    min-height:0!important;
  }
  .history .result-main{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
  }
  .history .result-main .title{
    min-width:0!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .history .result-view{
    grid-column:2!important;
    grid-row:1/3!important;
    align-self:center!important;
    justify-content:flex-end!important;
  }
  .history .result-view .ico{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    border-radius:9px!important;
  }
  .history .result-type,
  .history .result-accuracy,
  .history .result-speed,
  .history .result-date{
    grid-row:2!important;
    grid-column:auto!important;
    min-width:0!important;
    display:inline!important;
    color:#60708a!important;
    font-size:10px!important;
    line-height:1.15!important;
    text-align:left!important;
    white-space:nowrap!important;
  }
  .history .result-type{
    grid-column:1!important;
  }
  .history .result-type .pill{
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:#41536e!important;
    font-size:10px!important;
    letter-spacing:0!important;
  }
  .history .result-accuracy,
  .history .result-speed,
  .history .result-date{
    display:none!important;
  }
  .history .result-main::after{
    content:"";
  }
  .history .drow{
    position:relative;
  }
  .history .result-type::after{
    content:" · " attr(data-extra);
  }

  /* Rank: Rank + Learner + Remark | Tests · Avg Accuracy */
  .leader-wrap tr.rank-mobile-card{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    gap:3px 8px!important;
    align-items:center!important;
    margin-bottom:6px!important;
    padding:8px 9px!important;
    border-radius:11px!important;
  }
  .leader-wrap tr.rank-mobile-card td{
    justify-content:flex-start!important;
    font-size:10px!important;
    line-height:1.15!important;
  }
  .leader-wrap tr.rank-mobile-card td::before{display:none!important}
  .leader-wrap tr.rank-mobile-card td[data-label="Rank"]{
    grid-column:1!important;
    grid-row:1/3!important;
    align-self:center!important;
  }
  .leader-wrap tr.rank-mobile-card td[data-label="Learner"]{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    padding:0!important;
    border:0!important;
    font-size:13px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .leader-wrap tr.rank-mobile-card td[data-label="Learner"] b{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .leader-wrap tr.rank-mobile-card td[data-label="Remark"]{
    grid-column:3!important;
    grid-row:1/3!important;
    justify-content:flex-end!important;
    align-self:center!important;
  }
  .leader-wrap tr.rank-mobile-card td[data-label="Tests"]{
    grid-column:2!important;
    grid-row:2!important;
    color:#60708a!important;
  }
  .leader-wrap tr.rank-mobile-card td[data-label="Tests"]::after{
    content:" tests";
  }
  .leader-wrap tr.rank-mobile-card td[data-label="Avg Accuracy"]{
    grid-column:2!important;
    grid-row:2!important;
    margin-left:52px!important;
    color:#60708a!important;
  }
  .leader-wrap tr.rank-mobile-card td[data-label="Avg Accuracy"]::before{
    display:inline!important;
    content:"· Avg ";
    margin-right:2px;
    color:#60708a!important;
    font-size:10px!important;
    font-weight:400!important;
    text-transform:none!important;
  }
  .leader-wrap tr.rank-mobile-card td[data-label="Highest"],
  .leader-wrap tr.rank-mobile-card td[data-label="Lowest"]{display:none!important}
  .leader-wrap .rank-badge{
    min-width:30px!important;
    height:30px!important;
    padding:0 7px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:11px!important;
  }
  .leader-wrap .rank-remark{
    font-size:9px!important;
    padding:3px 6px!important;
    white-space:nowrap!important;
  }
}

.result-mobile-meta{display:none}
@media(max-width:700px){
  .history .result-main{
    grid-row:1/3!important;
    display:grid!important;
    grid-template-rows:auto auto!important;
    row-gap:3px!important;
  }
  .history .result-mobile-meta{
    display:flex!important;
    min-width:0!important;
    gap:0!important;
    color:#60708a!important;
    font-size:10px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }
  .history .result-mobile-meta span{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .history .result-mobile-meta span+span:before{
    content:" · ";
    padding:0 3px;
    color:#9aa8ba;
  }
  .history .result-type,
  .history .result-accuracy,
  .history .result-speed,
  .history .result-date{display:none!important}
}


/* ===== Clean Steno result + mobile no-scroll layout ===== */
.hero-penalty-formula{
  margin-top:3px;
  color:#475569;
  font-size:10.5px;
  font-weight:750;
  line-height:1.35;
}
.result-floating-font-tools{
  position:fixed!important;
  right:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:60!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  margin:0!important;
  padding:0!important;
}
.result-floating-font-tools button{
  width:44px!important;
  height:42px!important;
  min-width:44px!important;
  padding:0!important;
  border:1px solid #fdba74!important;
  border-radius:12px!important;
  background:#fff7ed!important;
  color:#c2410c!important;
  box-shadow:0 3px 12px rgba(15,23,42,.06)!important;
  font-weight:900!important;
  font-size:13px!important;
}
@media(max-width:720px){
  .result-summary-table{
    width:100%!important;
    overflow:visible!important;
  }
  .result-summary-table table,
  .wrong-breakdown table{
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
  }
  .result-summary-table th,
  .result-summary-table td{
    padding:7px 2px!important;
    font-size:9px!important;
    line-height:1.15!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  .wrong-breakdown th,
  .wrong-breakdown td{
    padding:7px 1px!important;
    font-size:8.5px!important;
  }
  .hero-mismatch-summary{
    font-size:12px!important;
    line-height:1.3!important;
  }
  .hero-penalty-formula{
    font-size:9.5px!important;
    line-height:1.3!important;
    overflow-wrap:anywhere!important;
  }
  .result-watermark-zone,
  .result-watermark-content,
  .compare,
  .v2-compare{
    min-width:0!important;
    max-width:100%!important;
    width:100%!important;
    overflow:visible!important;
  }
  .compare,
  .v2-compare{
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .v2-compare .cmp-token{
    max-width:100%!important;
  }
  .result-floating-font-tools{
    right:6px!important;
    gap:6px!important;
  }
  .result-floating-font-tools button{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:10px!important;
    font-size:11px!important;
  }
}
@media(max-width:420px){
  .result-summary-table th,
  .result-summary-table td{
    padding:6px 1px!important;
    font-size:8px!important;
  }
  .wrong-breakdown th,
  .wrong-breakdown td{font-size:7.7px!important}
}


/* ===== Print/PDF cleanup: screen-only compare font controls ===== */
@media print{
  .result-floating-font-tools{
    display:none!important;
    visibility:hidden!important;
  }
}


/* ===== Landing demo category colors ===== */

.landing-demo-actions .landing-demo-steno:hover,
.landing-demo-actions .landing-demo-steno:focus-visible{
  background:#ffe9c7!important;
  border-color:#e39a32!important;
  color:#8a4300!important;
}

.landing-demo-actions .landing-demo-typing:hover,
.landing-demo-actions .landing-demo-typing:focus-visible{
  background:#dff8e9!important;
  border-color:#5fc583!important;
  color:#066332!important;
}

/* ===== Staff compact mobile cards: Tests / Learners / Results ===== */
@media(max-width:700px){
  .test-list,.learner-list,.result-list{border:0!important;overflow:visible!important;background:transparent!important}
  .test-list .dhead,.learner-list .dhead,.result-list .dhead{display:none!important}
  .test-list .drow,.learner-list .drow,.result-list .drow{min-width:0!important;display:grid!important;grid-template-columns:24px 1fr!important;gap:7px 10px!important;align-items:start!important;margin:0 0 10px!important;padding:12px!important;border:1px solid var(--line)!important;border-radius:13px!important;background:#fff!important;box-shadow:var(--shadow)}
  .test-list .dcheck,.learner-list .dcheck,.result-list .dcheck{grid-column:1;grid-row:1;align-self:center}
  .test-list .serial,.learner-list .staff-serial,.result-list .staff-serial{display:none!important}
  .test-list .staff-main,.learner-list .staff-main,.result-list .staff-main{grid-column:2;min-width:0}
  .test-list .staff-main .title,.learner-list .staff-main .title{font-size:14px;overflow-wrap:anywhere}
  .test-list .staff-type,.test-list .staff-status,.learner-list .staff-status,.result-list .staff-type{grid-column:2;display:flex;gap:6px;align-items:center}
  .test-list .staff-lang,.test-list .staff-topic,.test-list .staff-words,.test-list .staff-date,.learner-list .staff-username,.learner-list .staff-validity,.result-list .staff-test,.result-list .staff-accuracy,.result-list .staff-speed,.result-list .staff-date{grid-column:2;color:#60718a;font-size:11px;min-width:0;overflow-wrap:anywhere}
  .test-list .staff-lang::before{content:"Language: ";font-weight:850;color:#334155}.test-list .staff-topic::before{content:"EXAM: ";font-weight:850;color:#334155}.test-list .staff-words::before{content:"Words: ";font-weight:850;color:#334155}.test-list .staff-date::before,.learner-list .staff-date::before,.result-list .staff-date::before{content:"Date: ";font-weight:850;color:#334155}
  .learner-list .staff-username::before{content:"Username: ";font-weight:850;color:#334155}.learner-list .staff-validity::before{content:"Validity: ";font-weight:850;color:#334155}
  .result-list .staff-test::before{content:"Test: ";font-weight:850;color:#334155}.result-list .staff-accuracy::before{content:"Accuracy: ";font-weight:850;color:#334155}.result-list .staff-speed::before{content:"Speed: ";font-weight:850;color:#334155}
  .test-list .staff-manage,.learner-list .staff-manage,.result-list .staff-manage{grid-column:1/-1;justify-content:flex-start!important;padding-top:7px;border-top:1px solid var(--line2);flex-wrap:wrap}
  .test-list .sub{font-size:10.5px}
}


/* 2026-09: compact actionable learner Error Bank tabs + revised result metrics */
.typing-summary8{grid-template-columns:repeat(8,minmax(0,1fr))!important}
.learn-error-tabs .result-tabbar{justify-content:flex-start}
.learn-error-tabs .result-tabpanel{padding-top:10px}
.learn-error-tabs .error-list-card{margin:0}
.learn-error-tabs .error-list-head span{display:none!important}
@media(max-width:900px){.typing-summary8{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:640px){.typing-summary8{grid-template-columns:repeat(2,minmax(0,1fr))!important}.learn-error-tabs .result-tabbar{overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start}.learn-error-tabs .result-tab{white-space:nowrap}}

/* ===== Landing compact hero / join popup / configurable footer links ===== */
.landing-hero{grid-template-columns:minmax(0,1fr) minmax(320px,360px);gap:22px;padding-bottom:14px}
.landing-intro{min-width:0}.landing-lead{max-width:760px}.landing-feature-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.landing-feature{min-height:126px;padding:12px 9px}
.landing-login-card{padding:24px 22px;align-self:start}.landing-login-head{margin-bottom:15px}.landing-login-card .field{margin-bottom:11px}.landing-login-card input{height:44px}.landing-access-note{margin-top:15px;padding:10px 11px}.landing-join-button{display:block;width:100%;margin-top:10px;text-align:center;border-color:#2d66ee!important;color:#1f5fe5!important;background:#fff!important}
.landing-demo-strip{display:grid;grid-template-columns:minmax(220px,.62fr) minmax(0,1.38fr);align-items:center;gap:18px;margin:0 0 14px;padding:12px 16px}.landing-demo-copy{display:flex;align-items:center;gap:12px}.landing-demo-copy>b{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#eef4ff;font-size:20px}.landing-demo-copy span,.landing-demo-copy strong,.landing-demo-copy small{display:block}.landing-demo-copy small{margin-top:3px;color:#65758d;font-size:10.5px}.landing-demo-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}.landing-demo-actions .btn{min-height:44px;display:grid;place-items:center;font-weight:850}.landing-demo-actions .landing-demo-typing{background:#2f66ee!important;border-color:#2f66ee!important;color:#fff!important}.landing-demo-actions .landing-demo-steno{background:#12a557!important;border-color:#12a557!important;color:#fff!important}
.landing-join-modal{display:none;position:fixed;inset:0;z-index:1000;padding:22px;place-items:center}.landing-join-modal:target{display:grid}.landing-join-backdrop{position:absolute;inset:0;background:rgba(9,24,49,.52);backdrop-filter:blur(2px)}.landing-join-panel{position:relative;z-index:1;width:min(660px,100%);max-height:calc(100vh - 44px);overflow:auto;padding:0;border-radius:16px}.landing-join-head{display:flex;align-items:center;justify-content:center;position:relative;padding:20px 52px 14px;border-bottom:1px solid var(--line2)}.landing-join-head h2{margin:0;font-size:21px}.landing-join-close{position:absolute;right:15px;top:12px;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:#f2f6fc;color:#31517f;font-size:24px}.landing-join-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;padding:18px 20px}.landing-join-qr{min-height:230px;padding:12px;border:2px dashed #9cb5d9;border-radius:14px;display:grid;place-items:center;background:#f9fbff}.landing-join-qr img{display:block;max-width:100%;max-height:220px;object-fit:contain}.landing-qr-placeholder{width:100%;aspect-ratio:1;display:grid;place-items:center;align-content:center;gap:7px;border:1px dashed #b9cae3;border-radius:12px;background:repeating-conic-gradient(#f4f7fb 0 25%,#fff 0 50%) 0/22px 22px;text-align:center}.landing-qr-placeholder b{font-size:30px;color:#153b78}.landing-qr-placeholder small{max-width:150px;padding:5px;background:#fff;color:#5f7088}.landing-join-steps{display:grid;gap:9px}.landing-join-step{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px;min-height:52px;padding:9px 11px;border:1px solid #d7e3f5;border-radius:11px;background:#f9fbff;font-size:12px;font-weight:700}.landing-join-step>b{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#e9f0ff;color:#1d5ee6}.landing-join-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-top:1px solid var(--line2)}
.landing-footer-grid-links{grid-template-columns:minmax(220px,1fr) minmax(180px,.65fr) minmax(300px,1.35fr)}.landing-footer-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}.landing-footer-links a{padding:7px 10px;border:1px solid #cdd9ec;border-radius:8px;background:#fff;color:#1749b5;font-size:10.5px;font-weight:850}.landing-footer-links-empty{color:#718198;font-size:10.5px}
@media(max-width:1050px){.landing-hero{grid-template-columns:minmax(0,1fr) minmax(300px,340px)}.landing-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.landing-login-card{max-width:none;margin:0}.landing-footer-grid-links{grid-template-columns:1fr 1fr}.landing-footer-links-block{grid-column:1/-1}}
@media(max-width:820px){.landing-hero{grid-template-columns:1fr}.landing-login-card{width:100%;max-width:560px;margin:0 auto}.landing-demo-strip{grid-template-columns:1fr}.landing-join-body{grid-template-columns:190px minmax(0,1fr)}.landing-footer-grid-links{grid-template-columns:1fr}}
@media(max-width:560px){.landing-feature-grid{grid-template-columns:1fr 1fr}.landing-feature{min-height:116px}.landing-demo-actions{grid-template-columns:1fr}.landing-join-modal{padding:10px}.landing-join-body{grid-template-columns:1fr}.landing-join-qr{min-height:190px}.landing-join-qr img{max-height:190px}.landing-join-foot{align-items:stretch;flex-direction:column}.landing-join-foot .btn{text-align:center}.landing-footer-links{display:grid;grid-template-columns:1fr 1fr}}

/* Common-feature parity with V9 M47: Typing KrutiDev readability only. */
.typing-master-matter.font-krutidev{font-size:20px!important;line-height:1.35!important}

/* M48 common parity: simplified Happy test management/list without changing ownership rules. */
.happy-test-filters{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.happy-status-radios{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin:0;padding:0;border:0}
.happy-status-radios label{display:flex;align-items:center;gap:4px;font-weight:800;white-space:nowrap}
.happy-status-radios input{width:auto;height:auto;margin:0}
.happy-test-filters>select[name="type"]{flex:0 0 132px;width:132px;min-width:132px}
.happy-test-filters>.happy-filter-btn{flex:0 0 auto}
.happy-test-search{display:flex;gap:7px;align-items:center;flex:1 1 auto;min-width:0}
.happy-test-search input{flex:1 1 auto;min-width:160px}
.happy-test-search button{flex:0 0 auto}
.happy-simple-test-list .dhead,.happy-simple-test-list .drow{grid-template-columns:24px minmax(300px,2fr) minmax(130px,.8fr) 100px 86px 188px;min-width:900px}
.happy-available-simple .dhead,.happy-available-simple .drow{grid-template-columns:minmax(310px,2fr) 80px minmax(150px,.9fr) minmax(130px,.8fr) 72px 105px;min-width:900px}
.happy-available-simple .test-main,.happy-available-simple .test-details-cell,.happy-available-simple .test-topic-cell{min-width:0}
.happy-available-simple .test-main .title,.happy-available-simple .test-topic-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.test-editor-form #matter.font-krutidev{font-size:20px!important;line-height:1.35!important}
body.test-running #exam .master-box.font-krutidev{line-height:1.35!important}
.compare.typing-compare.font-krutidev{font-size:25px!important;line-height:1.35!important}
@media(max-width:700px){
  .happy-test-filters{display:grid;grid-template-columns:auto minmax(112px,132px) auto;gap:7px}
  .happy-status-radios{grid-column:1}
  .happy-test-filters>select[name="type"]{grid-column:2;width:100%;min-width:0}
  .happy-test-filters>.happy-filter-btn{grid-column:3;width:auto}
  .happy-test-search{grid-column:1/-1;width:100%}
  .learner-test-filters{display:grid;grid-template-columns:1fr 1fr}
  .learner-test-filters input[name="q"],.learner-test-filters select[name="exam"],.learner-test-filters button{grid-column:1/-1}
  .happy-available-simple .drow{grid-template-columns:1fr!important}
  .happy-available-simple .test-main,.happy-available-simple .test-start-cell{grid-column:1/-1!important}
  .happy-available-simple .test-time-cell,.happy-available-simple .test-details-cell,.happy-available-simple .test-topic-cell,.happy-available-simple .taken-count{display:none!important}
}

/* Learner split test pages: filters left, search right. */
.learner-split-filters{display:flex;justify-content:flex-start;align-items:center;gap:7px;flex-wrap:wrap}
.learner-split-filters .learner-filter-left{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.learner-split-filters .learner-filter-left select{width:170px;flex:0 0 170px}
.learner-split-filters .learner-filter-search{display:flex;align-items:center;gap:7px;margin-left:0;min-width:260px;flex:1 1 360px}
.learner-split-filters .learner-filter-search input{flex:1 1 auto;min-width:180px}
@media(max-width:760px){.learner-split-filters,.learner-split-filters .learner-filter-left,.learner-split-filters .learner-filter-search{width:100%}.learner-split-filters .learner-filter-left select{flex:1 1 145px;width:auto}.learner-split-filters .learner-filter-search{margin-left:0;min-width:0;flex:1 1 100%}}

/* M50 learner split pages — final UI authority.
   Keep this after legacy .available rules: the old 9-column learner grid uses
   !important, so the split 6-column markup must also override it explicitly. */
.happy-available-simple .dhead,
.happy-available-simple .drow{
  grid-template-columns:minmax(310px,2fr) 80px minmax(150px,.9fr) minmax(130px,.8fr) 72px 105px!important;
  gap:12px!important;
  width:100%!important;
  min-width:0!important;
  align-items:center!important;
}
.happy-available-simple .dhead{min-height:40px!important;padding:0 12px!important}
.happy-available-simple .drow{min-height:62px!important;padding:10px 12px!important}
.happy-available-simple .test-main,
.happy-available-simple .test-details-cell,
.happy-available-simple .test-topic-cell{min-width:0!important}
.happy-available-simple .test-main .title,
.happy-available-simple .desktop-test-sub,
.happy-available-simple .test-topic-cell{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.happy-available-simple .desktop-test-sub{display:block!important;margin-top:4px!important;font-size:10px!important;color:var(--muted)!important}
.happy-available-simple .test-time-cell{white-space:nowrap!important}
.happy-available-simple .taken-count{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important}
.happy-available-simple .test-start-cell{display:flex!important;align-items:center!important;justify-content:flex-end!important}
.happy-available-simple .test-start-cell .btn{min-width:104px!important;text-align:center!important;white-space:nowrap!important}

@media(max-width:700px){
  .happy-available-simple{border:0!important;border-radius:0!important;overflow:visible!important;background:transparent!important}
  .happy-available-simple .dhead{display:none!important}
  .happy-available-simple .drow{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 72px!important;
    grid-template-areas:"test action" "meta action"!important;
    gap:4px 8px!important;
    margin:0 0 8px!important;
    padding:9px 10px!important;
    border:1px solid var(--line)!important;
    border-radius:11px!important;
    background:var(--card)!important;
    box-shadow:0 2px 8px rgba(25,55,90,.045)!important;
    align-items:center!important;
  }
  .happy-available-simple .test-main{grid-area:test!important;grid-column:auto!important;grid-row:auto!important;min-width:0!important;display:block!important}
  .happy-available-simple .test-main .title{font-size:12px!important;line-height:1.25!important}
  .happy-available-simple .desktop-test-sub,
  .happy-available-simple .test-time-cell,
  .happy-available-simple .test-details-cell,
  .happy-available-simple .test-topic-cell,
  .happy-available-simple .taken-count{display:none!important}
  .happy-available-simple .mobile-test-meta{display:flex!important;grid-area:meta!important;gap:4px 8px!important;flex-wrap:wrap!important;align-items:center!important;font-size:8.5px!important;line-height:1.25!important;color:#60708a!important;margin-top:1px!important}
  .happy-available-simple .mobile-test-meta span{white-space:nowrap!important}
  .happy-available-simple .test-start-cell{grid-area:action!important;grid-column:auto!important;grid-row:auto!important;align-self:center!important;justify-self:end!important}
  .happy-available-simple .test-start-cell .btn{width:72px!important;min-width:72px!important;max-width:72px!important;height:36px!important;min-height:36px!important;padding:0 5px!important;display:grid!important;place-items:center!important;font-size:9px!important;line-height:1!important;border-radius:9px!important}
}


/* M53 test-list parity: Test | Time | Nature | Date, with EXAM kept only as a filter. */
.happy-available-simple .dhead,
.happy-available-simple .drow{
  grid-template-columns:minmax(380px,2.4fr) 92px minmax(150px,.8fr) 132px 112px!important;
  gap:16px!important;
}
.happy-available-simple .test-details-cell{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.happy-available-simple .test-created-date{
  display:block!important;
  text-align:left!important;
  align-items:initial!important;
  justify-content:initial!important;
  white-space:nowrap!important;
  padding-left:0!important;
}
.happy-simple-test-list .dhead,
.happy-simple-test-list .drow{
  grid-template-columns:24px minmax(300px,2fr) 84px minmax(140px,.8fr) 112px 86px 188px!important;
  min-width:980px!important;
  gap:12px!important;
}
.happy-simple-test-list .staff-time,
.happy-simple-test-list .staff-nature,
.happy-simple-test-list .staff-date{white-space:nowrap;min-width:0}
.happy-simple-test-list .staff-nature{overflow:hidden;text-overflow:ellipsis}
.test-editor-form .test-editor-actions{display:flex!important;justify-content:space-between!important;align-items:center!important;width:100%!important;gap:18px!important;margin-top:4px}
.test-editor-form .test-editor-actions .btn,
.test-editor-form .test-editor-actions button{min-width:112px;text-align:center}
@media(max-width:700px){
  .happy-available-simple .test-topic-cell{display:none!important}
  .test-editor-form .test-editor-actions{flex-direction:row!important;justify-content:space-between!important}
  .test-editor-form .test-editor-actions .btn,.test-editor-form .test-editor-actions button{min-width:96px!important}
}

/* M54 mobile parity restore — keep mobile cards inside the viewport.
   This is intentionally last so later desktop !important grids from M53
   cannot leak into <=700px layouts. */
@media(max-width:700px){
  /* Staff test filters: compact first row, full-width search row. */
  .happy-test-filters{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr) minmax(112px,132px) auto!important;
    gap:7px!important;
  }
  .happy-status-radios{min-width:0!important;flex-wrap:nowrap!important}
  .happy-test-filters>select[name="type"]{width:100%!important;min-width:0!important;max-width:none!important}
  .happy-test-filters>.happy-filter-btn{width:auto!important;min-width:0!important}
  .happy-test-search{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    min-width:0!important;
    gap:7px!important;
  }
  .happy-test-search input,
  .happy-test-search button{width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important}

  /* Staff/Supreme test cards — no desktop min-width or horizontal escape. */
  .happy-simple-test-list{width:100%!important;min-width:0!important;max-width:100%!important;overflow:visible!important}
  .happy-simple-test-list .drow{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:20px minmax(0,1fr) auto!important;
    grid-template-areas:
      "check main status"
      ". date date"
      "actions actions actions"!important;
    gap:6px 9px!important;
    padding:10px!important;
    margin:0 0 8px!important;
    align-items:start!important;
    overflow:hidden!important;
  }
  .happy-simple-test-list .dcheck{grid-area:check!important;padding-top:1px!important}
  .happy-simple-test-list .staff-main{grid-area:main!important;min-width:0!important}
  .happy-simple-test-list .staff-main .title{font-size:12px!important;line-height:1.25!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .happy-simple-test-list .staff-main .sub{font-size:9px!important;line-height:1.35!important;white-space:normal!important;overflow:visible!important;margin-top:3px!important}
  .happy-simple-test-list .staff-time,
  .happy-simple-test-list .staff-nature{display:none!important}
  .happy-simple-test-list .staff-date{grid-area:date!important;font-size:9px!important;color:var(--muted)!important;white-space:nowrap!important}
  .happy-simple-test-list .staff-date::before{content:"Date: ";font-weight:850;color:#334155}
  .happy-simple-test-list .staff-status{grid-area:status!important;text-align:right!important;align-self:start!important}
  .happy-simple-test-list .staff-status .pill{font-size:8px!important;padding:3px 7px!important}
  .happy-simple-test-list .staff-manage{
    grid-area:actions!important;
    grid-column:auto!important;
    justify-content:flex-start!important;
    gap:5px!important;
    flex-wrap:wrap!important;
    width:100%!important;
    min-width:0!important;
    padding-top:7px!important;
    border-top:1px solid var(--line2)!important;
  }

  /* Learner split-page filters: two filters stay compact; search never overflows. */
  .learner-split-filters{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    gap:7px!important;
  }
  .learner-split-filters .learner-filter-left{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    min-width:0!important;
    gap:7px!important;
  }
  .learner-split-filters .learner-filter-left select{width:100%!important;min-width:0!important;max-width:100%!important;flex:none!important}
  .learner-split-filters .learner-filter-left button{grid-column:1/-1!important;width:100%!important;min-width:0!important}
  .learner-split-filters .learner-filter-search{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:7px!important;
    margin:0!important;
    flex:none!important;
  }
  .learner-split-filters .learner-filter-search input{width:100%!important;min-width:0!important;max-width:100%!important}
  .learner-split-filters .learner-filter-search button{width:auto!important;min-width:104px!important;max-width:120px!important;margin:0!important}

  /* Learner test cards — restore compact M47-style mobile row. */
  .happy-available-simple{width:100%!important;min-width:0!important;max-width:100%!important;overflow:visible!important}
  .happy-available-simple .drow{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"test action" "meta meta"!important;
    gap:5px 8px!important;
    margin:0 0 8px!important;
    padding:9px 10px!important;
    align-items:center!important;
    overflow:hidden!important;
  }
  .happy-available-simple .test-main{grid-area:test!important;min-width:0!important;display:block!important}
  .happy-available-simple .test-main .title{font-size:12px!important;line-height:1.25!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .happy-available-simple .desktop-test-sub,
  .happy-available-simple .test-time-cell,
  .happy-available-simple .test-details-cell,
  .happy-available-simple .test-topic-cell,
  .happy-available-simple .test-created-date,
  .happy-available-simple .taken-count{display:none!important}
  .happy-available-simple .mobile-test-meta{
    grid-area:meta!important;
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    gap:4px 8px!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    margin-top:1px!important;
    font-size:8.5px!important;
    line-height:1.25!important;
    color:#60708a!important;
  }
  .happy-available-simple .mobile-test-meta span{white-space:nowrap!important;max-width:100%!important}
  .happy-available-simple .test-start-cell{
    grid-area:action!important;
    grid-column:auto!important;
    grid-row:auto!important;
    justify-self:end!important;
    align-self:center!important;
    width:auto!important;
    min-width:0!important;
  }
  .happy-available-simple .test-start-cell .btn,
  .happy-available-simple .test-start-cell button{
    width:72px!important;
    min-width:72px!important;
    max-width:72px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 5px!important;
    display:grid!important;
    place-items:center!important;
    font-size:9px!important;
    line-height:1!important;
    border-radius:9px!important;
    margin:0!important;
  }
}

@media(max-width:390px){
  .happy-test-filters{grid-template-columns:1fr 1fr!important}
  .happy-status-radios{grid-column:1/-1!important}
  .happy-test-filters>select[name="type"]{grid-column:1!important}
  .happy-test-filters>.happy-filter-btn{grid-column:2!important;width:100%!important}
  .learner-split-filters .learner-filter-search{grid-template-columns:minmax(0,1fr) 96px!important}
  .learner-split-filters .learner-filter-search button{min-width:96px!important;max-width:96px!important}
}

/* M55 staff mobile parity — compact admin cards for Tests + Learners.
   Keep desktop tables unchanged; mobile mirrors the compact reference project. */
.mobile-staff-test-meta,.mobile-learner-meta{display:none}

@media(max-width:700px){
  /* Shared compact card shell: one-row content + right-side actions, no tall action stack. */
  .happy-simple-test-list .drow.staff-test-row,
  .learner-list .drow.staff-learner-row{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    margin:0 0 8px!important;
    padding:8px 9px!important;
    border:1px solid var(--line)!important;
    border-radius:11px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(25,55,90,.04)!important;
    overflow:hidden!important;
    display:grid!important;
    grid-template-columns:18px minmax(0,1fr) auto!important;
    grid-template-areas:"check main actions"!important;
    align-items:center!important;
    column-gap:8px!important;
    row-gap:0!important;
  }
  .happy-simple-test-list .staff-card-select,
  .learner-list .staff-card-select{grid-area:check!important;align-self:center!important;padding:0!important}
  .happy-simple-test-list .staff-card-select input,
  .learner-list .staff-card-select input{width:13px!important;height:13px!important;margin:0!important}

  /* Test row: important metadata stays inline under title; desktop columns disappear. */
  .happy-simple-test-list .staff-test-main{grid-area:main!important;min-width:0!important}
  .happy-simple-test-list .staff-test-main .title{font-size:11.5px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .happy-simple-test-list .desktop-staff-test-sub{display:none!important}
  .happy-simple-test-list .mobile-staff-test-meta{
    display:flex!important;align-items:center!important;gap:0!important;margin-top:3px!important;
    min-width:0!important;white-space:nowrap!important;overflow:hidden!important;
    color:#60708a!important;font-size:8.5px!important;line-height:1.15!important
  }
  .happy-simple-test-list .mobile-staff-test-meta>span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .happy-simple-test-list .mobile-staff-test-meta>span+span:before{content:" · ";padding:0 3px;color:#9aa8ba!important}
  .happy-simple-test-list .mobile-staff-test-meta .pill{flex:0 0 auto!important;font-size:7px!important;line-height:1!important;padding:3px 5px!important}
  .happy-simple-test-list .mobile-staff-test-meta .pill:before{content:""!important;padding:0!important}
  .happy-simple-test-list .staff-time,
  .happy-simple-test-list .staff-nature,
  .happy-simple-test-list .staff-date,
  .happy-simple-test-list .staff-status{display:none!important}
  .happy-simple-test-list .staff-test-actions{
    grid-area:actions!important;justify-self:end!important;align-self:center!important;
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    flex-wrap:nowrap!important;gap:3px!important;width:auto!important;max-width:none!important;
    padding:0!important;border:0!important
  }
  .happy-simple-test-list .staff-test-actions .ico{
    width:25px!important;height:25px!important;min-width:25px!important;max-width:25px!important;
    min-height:25px!important;max-height:25px!important;border-radius:7px!important;font-size:10px!important
  }

  /* Learner row: name + Active/username/validity left, action icons right. */
  .learner-list .staff-serial,
  .learner-list .staff-username,
  .learner-list .staff-learner-status,
  .learner-list .staff-learner-validity{display:none!important}
  .learner-list .staff-learner-main{grid-area:main!important;min-width:0!important}
  .learner-list .staff-learner-main .title{font-size:11.5px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .learner-list .mobile-learner-meta{
    display:flex!important;align-items:center!important;gap:6px!important;margin-top:3px!important;
    min-width:0!important;font-size:8.5px!important;line-height:1.1!important;color:#60708a!important;white-space:nowrap!important;overflow:hidden!important
  }
  .learner-list .mobile-learner-meta>span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .learner-list .mobile-learner-meta .pill{flex:0 0 auto!important;font-size:7px!important;line-height:1!important;padding:3px 5px!important}
  .learner-list .mobile-validity-inline{flex:0 0 auto!important;font-weight:650!important}
  .learner-list .mobile-validity-inline b{color:#263b59!important}
  .learner-list .staff-learner-actions{
    grid-area:actions!important;justify-self:end!important;align-self:center!important;
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    flex-wrap:nowrap!important;gap:3px!important;width:auto!important;max-width:none!important;
    padding:0!important;border:0!important
  }
  .learner-list .staff-learner-actions .ico{
    width:25px!important;height:25px!important;min-width:25px!important;max-width:25px!important;
    min-height:25px!important;max-height:25px!important;border-radius:7px!important;font-size:10px!important
  }

  /* Keep selected-action footer compact instead of dominating the mobile card. */
  .card>.bulk,.card form>.bulk{min-height:42px!important;padding:6px 8px!important;margin-top:7px!important}
  .bulk .mini{gap:4px!important}.bulk .mini button{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important}
}

@media(max-width:520px){
  /* On very narrow devices reserve enough title room before actions. */
  .happy-simple-test-list .staff-test-actions .ico,
  .learner-list .staff-learner-actions .ico{width:24px!important;height:24px!important;min-width:24px!important;max-width:24px!important;min-height:24px!important;max-height:24px!important;font-size:9px!important}
  .happy-simple-test-list .staff-test-actions,
  .learner-list .staff-learner-actions{gap:2px!important}
}

/* M56 admin Result Management mobile parity — compact one-line result cards. */
.mobile-inline-performance,.mobile-result-subline{display:none}
.happy-admin-result-list .dhead,.happy-admin-result-list .drow{
  grid-template-columns:22px minmax(210px,1.2fr) minmax(280px,1.7fr) minmax(110px,.7fr) 150px 74px!important;
  gap:12px!important;
  min-width:0!important;
}
.happy-admin-result-list .staff-result-learner,
.happy-admin-result-list .staff-result-test,
.happy-admin-result-list .staff-result-performance,
.happy-admin-result-list .staff-result-date{min-width:0!important}
.happy-admin-result-list .staff-result-test>span:last-child{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.happy-admin-result-list .staff-result-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:4px!important;width:auto!important;min-width:0!important}

@media(max-width:700px){
  .happy-admin-result-list{border:0!important;border-radius:0!important;overflow:visible!important;background:transparent!important}
  .happy-admin-result-list .dhead{display:none!important}
  .happy-admin-result-list .drow.staff-result-row{
    width:100%!important;min-width:0!important;max-width:100%!important;min-height:0!important;
    margin:0 0 7px!important;padding:8px 9px!important;
    border:1px solid var(--line)!important;border-radius:10px!important;background:#fff!important;
    box-shadow:0 2px 8px rgba(25,55,90,.04)!important;overflow:hidden!important;
    display:grid!important;grid-template-columns:18px minmax(0,1fr) 60px!important;
    grid-template-areas:"check user actions"!important;gap:7px!important;align-items:center!important;
  }
  .happy-admin-result-list .staff-card-select{grid-area:check!important;align-self:start!important;padding-top:2px!important}
  .happy-admin-result-list .staff-card-select input{width:13px!important;height:13px!important;margin:0!important}
  .happy-admin-result-list .staff-result-learner{grid-area:user!important;min-width:0!important;font-size:11px!important;line-height:1.2!important}
  .happy-admin-result-list .staff-result-learner>div:first-child{display:flex!important;align-items:baseline!important;gap:6px!important;min-width:0!important}
  .happy-admin-result-list .staff-result-learner a{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .happy-admin-result-list .staff-result-learner a b{font-size:11.5px!important}
  .happy-admin-result-list .dbid{font-size:8px!important}
  .happy-admin-result-list .mobile-inline-performance{display:inline!important;margin-left:auto!important;font-size:9px!important;font-weight:900!important;color:#142947!important;white-space:nowrap!important}
  .happy-admin-result-list .mobile-result-subline{display:flex!important;gap:5px!important;align-items:center!important;margin-top:3px!important;font-size:8.2px!important;line-height:1.2!important;color:#60708a!important;min-width:0!important}
  .happy-admin-result-list .mobile-result-subline span:first-child{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .happy-admin-result-list .mobile-result-subline span:last-child{white-space:nowrap!important;margin-left:auto!important}
  .happy-admin-result-list .staff-result-test,
  .happy-admin-result-list .staff-result-performance,
  .happy-admin-result-list .staff-result-date{display:none!important}
  .happy-admin-result-list .staff-result-actions{
    grid-area:actions!important;justify-self:end!important;align-self:center!important;
    display:flex!important;align-items:center!important;justify-content:flex-end!important;
    gap:4px!important;width:auto!important;max-width:none!important;padding:0!important;border:0!important;
  }
  .happy-admin-result-list .staff-result-actions .ico{
    width:26px!important;height:26px!important;min-width:26px!important;max-width:26px!important;
    min-height:26px!important;max-height:26px!important;padding:0!important;border-radius:7px!important;font-size:9px!important;
  }
}
@media(max-width:380px){
  .happy-admin-result-list .drow.staff-result-row{padding:7px 8px!important;grid-template-columns:17px minmax(0,1fr) 57px!important;gap:6px!important}
  .happy-admin-result-list .staff-result-actions{gap:3px!important}
  .happy-admin-result-list .staff-result-actions .ico{width:25px!important;height:25px!important;min-width:25px!important;max-width:25px!important;min-height:25px!important;max-height:25px!important}
}

/* M57 desktop result/test-list refinement + landing CTA. Mobile layouts stay authoritative. */
.target-achievement-line{margin-top:7px}
.target-achievement-line .target-status{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:950;letter-spacing:.01em}
.target-achievement-line .target-achieve{background:#eafbf0;border:1px solid #afe7c3;color:#08743a!important}
.target-achievement-line .target-fail{background:#fff1f2;border:1px solid #fecdd3;color:#b42318!important}

.landing-top-join{display:inline-flex!important;align-items:center;justify-content:center;min-height:38px;padding:8px 15px!important;border-radius:10px;background:#b91c1c!important;color:#fff!important;font-weight:900!important;border:1px solid #991b1b!important;white-space:nowrap}
.landing-login-demos{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}
.landing-login-demos .btn{min-width:0;min-height:40px;display:grid;place-items:center;text-align:center;font-size:12px;padding:7px 8px}
.landing-login-demos .landing-demo-typing{background:#7c3aed!important;border-color:#7c3aed!important;color:#fff!important}
.landing-login-demos .landing-demo-steno{background:#12a557!important;color:#fff!important}

@media(min-width:701px){
  /* Admin result table: use the available desktop width and keep date/time on one line. */
  .mobile-field-label{display:none!important}
  .happy-admin-result-list .dhead,.happy-admin-result-list .drow{
    grid-template-columns:22px minmax(170px,1.05fr) minmax(230px,1.55fr) minmax(105px,.7fr) 88px 176px 72px!important;
    gap:12px!important;
    min-width:0!important;
  }
  .happy-admin-result-list .staff-result-performance{white-space:nowrap}
  .happy-admin-result-list .staff-result-remark{text-align:center;white-space:nowrap}
  .happy-admin-result-list .staff-result-date,.desktop-result-date{white-space:nowrap!important}
  .happy-admin-result-list .staff-result-test>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Learner results: one useful performance metric per row plus result remark. */
  .history-desktop-filter{display:flex;justify-content:flex-end;padding:0;background:transparent;border:0;margin:0 0 10px}
  .history-desktop-filter select{flex:0 0 170px;width:170px}
  .history-refined .dhead,.history-refined .drow{
    grid-template-columns:44px minmax(250px,1.65fr) 90px 130px 92px 190px 54px!important;
    gap:12px!important;
    min-width:0!important;
  }
  .history-refined .result-performance,.history-refined .result-remark,.history-refined .result-date{white-space:nowrap}
  .history-refined .result-remark{text-align:center}

  /* Test lists: Nature is replaced by the actual pass requirement on desktop. */
  .happy-available-simple .test-required-cell,.happy-simple-test-list .staff-required{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;font-weight:800;color:#334155}
}

@media(max-width:700px){
  /* New desktop-only cells/controls must not alter the compact mobile cards. */
  .history-desktop-filter{display:none!important}
  .history .result-performance,.history .result-remark{display:none!important}
  .happy-admin-result-list .staff-result-remark{display:none!important}
  .landing-topline{gap:8px}
  .landing-top-join{min-height:34px;padding:6px 10px!important;font-size:11px!important}
  .landing-login-demos{grid-template-columns:1fr 1fr;gap:7px}
  .landing-login-demos .btn{font-size:10.5px;min-height:38px;padding:6px}
}
@media(max-width:420px){
  .landing-brand span small{display:none}
  .landing-top-join{padding:6px 9px!important}
}

/* M120 typing workspace height controls */
#exam .height-tool{min-width:44px!important;padding:0 8px!important;font-variant-numeric:tabular-nums!important}
#exam .height-reset-tool{min-width:42px!important}
@media(max-width:720px){#exam .height-tool{min-width:42px!important;padding:0 7px!important}}