/* v152 - licensed Chunko webfont setup
   Add your licensed font file at exactly:
   fonts/chunko_bold-webfont.woff2
*/
@font-face {
  font-family: "ChunkoLicensed";
  src: url("fonts/chunko_bold-webfont.woff2") format("woff2"),
       url("./fonts/chunko_bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f8f1e4;color:#1f2937}
.container{width:min(1250px,94%);margin:40px auto}
header{margin-bottom:30px}
h1{margin-bottom:6px;font-size:42px}
.hidden{display:none!important}
.subject-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.subject-card{border-radius:30px;padding:62px 42px;min-height:310px;box-shadow:0 14px 34px rgba(0,0,0,.14);cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;justify-content:center}
.subject-card:hover{transform:translateY(-6px);box-shadow:0 18px 42px rgba(0,0,0,.18)}
.subject-card h2{margin:0 0 18px;font-size:38px}
.subject-card p{margin:5px 0;font-size:18px}
.english{background:#fef08a;color:#422006}.specialist-maths{background:#93c5fd;color:#172554}.chemistry{background:#bef264;color:#365314}.biology{background:#5eead4;color:#134e4a}.food-studies{background:#fdba74;color:#7c2d12}
.card,.stat-card{background:white;border-radius:18px;padding:24px;box-shadow:0 8px 25px rgba(0,0,0,.08);margin-bottom:24px}
form{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
label{display:flex;flex-direction:column;font-weight:bold;gap:6px}
.wide{grid-column:1/-1}
input,textarea{padding:12px;border:1px solid #cfd6e4;border-radius:10px;font-size:15px;font-family:Arial,sans-serif}
textarea{min-height:145px;resize:vertical}
button{align-self:end;padding:12px 16px;border:none;border-radius:10px;background:#2563eb;color:white;font-weight:bold;cursor:pointer}
button:hover{opacity:.9}.back{background:#4b5563;margin-bottom:16px}.danger{background:#dc2626}.danger-dark{background:#7f1d1d}.sheet-button{background:#0891b2}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}
.stat-card h3{margin:0 0 8px;font-size:16px}.stat-card p{margin:0;font-size:24px;font-weight:bold}
.table-header{display:flex;justify-content:space-between;align-items:center;gap:12px}.table-header div{display:flex;gap:8px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;margin-top:14px}th,td{text-align:left;border-bottom:1px solid #e5e7eb;padding:12px 8px}
.badge{display:inline-block;min-width:78px;text-align:center;padding:8px 12px;border-radius:999px;font-weight:bold}
.red{background:#fee2e2;color:#991b1b}.yellow{background:#fef9c3;color:#854d0e}.light-green{background:#dcfce7;color:#166534}.dark-green{background:#14532d;color:#fff}
.delete{background:#6b7280;padding:7px 10px}.mistake-button{background:#ea580c;padding:8px 12px}
.exam-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.summary-box{background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;padding:14px}.summary-box strong{display:block;margin-bottom:5px;color:#4b5563}
.mistakes-list{display:grid;gap:12px}.mistake-row{display:flex;align-items:flex-start;gap:14px;background:#f9fafb;border:1px solid #e5e7eb;border-left:6px solid #7c3aed;border-radius:14px;padding:16px;transition:background .2s,border-color .2s}
.mistake-row input[type=checkbox]{width:22px;height:22px;margin-top:2px;cursor:pointer}.mistake-row.reviewed{background:#dcfce7;border-color:#22c55e;border-left-color:#15803d}.mistake-row.reviewed .mistake-text{color:#14532d;font-weight:bold}
.mistake-text{white-space:pre-wrap;line-height:1.5;font-size:17px}.empty{color:#6b7280;font-style:italic;background:#f9fafb;border:1px solid #e5e7eb;border-radius:14px;padding:20px}
.scoresheet-row-red{background:#fff1f2}.scoresheet-row-yellow{background:#fefce8}.scoresheet-row-light-green{background:#f0fdf4}.scoresheet-row-dark-green{background:#dcfce7}
@media(max-width:950px){.subject-grid{grid-template-columns:repeat(2,1fr)}form{grid-template-columns:1fr}}
@media(max-width:650px){.subject-grid{grid-template-columns:1fr}.table-header{flex-direction:column;align-items:flex-start}h1{font-size:34px}table{font-size:13px}}

.spesh-mistake-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.spesh-mistake-buttons button {
  padding: 8px 12px;
}

.mistake-button.complete {
  background: #16a34a;
}


.kp-footer{
  width:100%;
  text-align:center;
  margin:40px 0 25px;
  font-size:18px;
  font-weight:bold;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}

.instagram-logo{
  font-size:22px;
}


/* Mobile table fixes */
.card{
  overflow-x:auto;
}

@media (max-width:650px){
  .delete{
    font-size:0;
    padding:8px 10px;
  }

  .delete::before{
    content:"🗑️";
    font-size:14px;
  }
}


.swipe-hint{
  display:none;
  color:#6b7280;
  font-size:13px;
  margin:8px 0 4px;
}

.undo-toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:#111827;
  color:white;
  padding:12px 14px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  z-index:9999;
}

.undo-toast button{
  background:#f97316;
  padding:7px 12px;
  border-radius:999px;
}

@media (max-width:650px){
  .swipe-hint{
    display:block;
  }

  .undo-toast{
    width:calc(100% - 30px);
    justify-content:space-between;
    border-radius:16px;
  }
}


/* Welcome setup page */
.welcome-page header{
  text-align:center;
}

.welcome-page h1{
  font-size:clamp(38px,5vw,64px);
}

.welcome-card{
  max-width:980px;
  margin:0 auto;
}

.subject-select-help{
  margin-top:-4px;
  color:#6b7280;
}

.subject-choices{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:14px;
  max-height:430px;
  overflow:auto;
  padding-right:6px;
}

.subject-choice{
  flex-direction:row;
  align-items:center;
  background:#f8f1e4;
  border:1px solid #e8dcc9;
  border-radius:12px;
  padding:11px 12px;
  font-weight:600;
  cursor:pointer;
}

.subject-choice input{
  width:18px;
  height:18px;
}

.edit-setup{
  background:#92400e;
  margin-top:14px;
}

/* Extra subject card colours */
.accounting{background:#d9f99d;color:#365314}
.agriculture{background:#bbf7d0;color:#14532d}
.algorithmics,.computing{background:#c7d2fe;color:#312e81}
.art,.media,.viscomm,.design{background:#fbcfe8;color:#831843}
.business,.economics{background:#fde68a;color:#713f12}
.classics,.history,.legal,.politics,.sociology{background:#fed7aa;color:#7c2d12}
.dance,.drama,.music,.theatre{background:#ddd6fe;color:#4c1d95}
.environment,.outdoor{background:#a7f3d0;color:#064e3b}
.geography{background:#bae6fd;color:#0c4a6e}
.hhd,.pe{background:#fdba74;color:#7c2d12}
.methods,.general-maths,.specialist-maths{background:#93c5fd;color:#172554}
.physics,.systems{background:#bfdbfe;color:#1e3a8a}
.psychology{background:#f5d0fe;color:#701a75}

@media(max-width:850px){
  .subject-choices{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:560px){
  .subject-choices{
    grid-template-columns:1fr;
  }
}


.kp-footer{
  display:none !important;
}


/* Beige welcome page */
#welcomePage{
  background:#f8f1e4;
  border-radius:22px;
  padding:28px;
}


/* Welcome page title colour */
#welcomePage h1{
  color:#5c4033 !important;
}


/* Homepage title colour */
#homeTitle{
  color:#5c4033 !important;
}


/* Subject page title */
#subjectTitle{
  color:#5c4033 !important;
}

/* Scoresheet page title */
#scoresheetTitle{
  color:#5c4033 !important;
}


/* Mango theme */
body{
  background:#fff4dd !important;
}

#welcomePage{
  background:linear-gradient(135deg,#fff4dd,#ffe8b3) !important;
  border:2px solid #fbbf24;
}

#welcomePage h1,
#homeTitle,
#subjectTitle,
#scoresheetTitle{
  color:#8a4b08 !important;
}

#welcomePage p,
#homePage header p,
#trackerPage header p,
#scoresheetPage header p{
  color:#9a5b13;
}

button{
  background:#f59e0b;
}

button:hover{
  background:#ea8a00;
}

.back{
  background:#92400e !important;
}

.edit-setup{
  background:#d97706 !important;
}

.sheet-button{
  background:#f97316 !important;
}

.danger{
  background:#dc2626 !important;
}

.danger-dark{
  background:#7f1d1d !important;
}

.welcome-card,
.card,
.stat-card{
  border:1px solid #f7d08a;
}

.subject-choice{
  background:#fff8e7 !important;
  border:1px solid #f5c56b !important;
}

.subject-choice:hover{
  background:#ffefc7 !important;
}

.subject-choice input{
  accent-color:#f59e0b;
}

input:focus,
textarea:focus{
  outline:2px solid #f59e0b;
  border-color:#f59e0b;
}

.mango-note{
  text-align:center;
  margin:18px auto 0;
  color:#9a5b13;
  font-weight:700;
}


/* Cartoon mango icons instead of emoji */
.mango-icon{
  display:inline-block;
  width:34px;
  height:42px;
  background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 52%,#fb923c 100%);
  border:3px solid #8a4b08;
  border-radius:55% 45% 55% 45%;
  transform:rotate(-18deg);
  position:relative;
  vertical-align:middle;
  margin-right:10px;
  box-shadow:0 4px 0 rgba(138,75,8,.16);
}

.mango-icon::before{
  content:"";
  position:absolute;
  width:20px;
  height:10px;
  background:#65a30d;
  border:2px solid #4d7c0f;
  border-radius:100% 0 100% 0;
  top:-12px;
  right:-9px;
  transform:rotate(25deg);
}

.mango-icon::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  background:rgba(255,255,255,.45);
  border-radius:50%;
  top:9px;
  left:8px;
}

.mango-icon.small{
  width:22px;
  height:28px;
  border-width:2px;
  margin-right:8px;
}

.mango-icon.small::before{
  width:13px;
  height:7px;
  border-width:1.5px;
  top:-8px;
  right:-6px;
}

.mango-icon.small::after{
  width:5px;
  height:5px;
  top:6px;
  left:5px;
}


/* v11 fixed MangoStudy welcome page */
body{
  background:#fff8ee !important;
}

.container{
  width:min(1220px,94%);
  margin:24px auto 34px;
}

#welcomePage{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  padding:0 0 28px !important;
}

.welcome-hero{
  text-align:center;
  margin-bottom:28px;
  padding-bottom:10px !important;
}

.brand-title{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  margin-bottom:26px !important;
}

.brand-mango{
  width:145px !important;
  height:145px !important;
  object-fit:contain;
  flex-shrink:0;
}

.mango-study-title{
  margin:0 0 18px !important;
  font-size:clamp(90px,10.8vw,160px) !important;
  line-height:.86;
  font-weight:950;
  letter-spacing:-10px !important;
  word-spacing:-10px !important;
  font-family:Arial, Helvetica, sans-serif;
}

.mango-word{
  color:#ff9f1c !important;
}

.study-word{
  color:#d97706 !important;
  margin-left:2px !important;
}

.welcome-heading{
  margin-top:8px !important;
  margin-bottom:14px !important;
  font-size:clamp(38px,4.5vw,62px) !important;
  line-height:1.15 !important;
  color:#b45309 !important;
  font-weight:850;
  display:block !important;
  clear:both !important;
}

.welcome-hero p{
  margin:0 auto;
  color:#526070 !important;
  font-size:22px;
}

.welcome-card{
  max-width:1030px;
  margin:0 auto;
  background:#fffdf8 !important;
  border:none !important;
  outline:none !important;
  border-radius:26px !important;
  padding:32px !important;
  box-shadow:0 18px 50px rgba(240,150,0,.12) !important;
}

.welcome-card h2{
  color:#10233b;
  margin:10px 0 4px;
}

.subject-select-help{
  color:#526070 !important;
}

.welcome-card input,
.welcome-card textarea{
  background:#fffdfa !important;
  border:1px solid #edd8b0 !important;
  border-radius:12px !important;
}

.subject-choice{
  background:#fff7e8 !important;
  border:1px solid #f5d6a2 !important;
  border-radius:12px !important;
  min-height:48px;
}

.subject-choice:hover{
  background:#ffefcf !important;
}

#welcomePage button[type="submit"]{
  background:#ff9f1c !important;
  color:#ffffff !important;
  border-radius:12px !important;
  font-size:20px !important;
  padding:16px 20px !important;
  box-shadow:none !important;
}

#welcomePage button[type="submit"]:hover{
  background:#f28c00 !important;
}

.mango-note{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:#526070 !important;
  margin-top:22px !important;
  font-size:18px;
  font-weight:600;
}

.tiny-mango{
  width:30px;
  height:30px;
  object-fit:contain;
}

.card,.stat-card{
  border:1px solid #f4ddb3 !important;
}

#homeTitle,#subjectTitle,#scoresheetTitle{
  color:#d97706 !important;
}

@media(max-width:900px){
  .brand-title{
    gap:14px;
  }

  .brand-mango{
    width:92px !important;
    height:92px !important;
  }

  .mango-study-title{
    font-size:clamp(58px,13vw,96px) !important;
    letter-spacing:-5px !important;
    word-spacing:-5px !important;
  }

  .study-word{
    margin-left:2px !important;
  }

  .welcome-hero p{
    font-size:18px;
  }
}

@media(max-width:560px){
  .brand-title{
    flex-direction:column;
    gap:2px;
  }

  .brand-mango{
    width:78px !important;
    height:78px !important;
  }

  .mango-study-title{
    font-size:54px !important;
    letter-spacing:-2px !important;
  }

  .welcome-card{
    padding:22px !important;
  }
}


/* v12: darker Study colour */
.study-word{
  color:#b45309 !important;
}


/* v13 slogan */
@media(max-width:900px){
  }


/* v16 - move slogan further right, avoid overlap */
/* v17 - move slogan further right so it does not overlap */
/* v18 slogan adjustments */
/* v20 requested tweaks */
.welcome-heading{
    color:#000000 !important;
}

/* v23 - Fredoka logo */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@600;700&display=swap');

.mango-study-title{
    font-family:'Fredoka', sans-serif !important;
    font-weight:700 !important;
    letter-spacing:-4px !important;
}


/* v24 - make Fredoka visibly different */
.mango-study-title{
    font-family:'Fredoka', sans-serif !important;
    font-weight:700 !important;
    letter-spacing:-1px !important;
    line-height:0.95 !important;
}

.mango-word{
    font-size:1.08em !important;
}

.study-word{
    margin-left:10px !important;
}


/* v25 - mango shade palette */
:root{
  --mango-dark:#f3a11a;
  --mango-main:#f6b12a;
  --mango-mid:#f8c24a;
  --mango-light:#f9d57b;
  --mango-cream:#f3dfaa;
  --mango-pale:#edd9a7;
}

body{
  background:#f7f0e4 !important;
}

.mango-word{
  color:var(--mango-dark) !important;
}

.study-word{
  color:var(--mango-main) !important;
}

.subject-choice{
  background:#fbf3df !important;
}

#welcomePage button[type="submit"]{
  background:var(--mango-dark) !important;
}

#welcomePage button[type="submit"]:hover{
  background:var(--mango-main) !important;
}


/* v26 - restore MangoStudy sizing closer to v20 */
.mango-study-title{
    font-size:clamp(90px,10.8vw,160px) !important;
    line-height:.86 !important;
    letter-spacing:-10px !important;
    word-spacing:-10px !important;
}

.mango-word{
    font-size:1em !important;
}

.study-word{
    margin-left:2px !important;
}


/* v27 - create tracker button visible without scrolling */
#welcomePage button[type="submit"]{
    position: sticky !important;
    top: 12px !important;
    z-index: 999 !important;
    display: block !important;
    width: min(420px, 90%) !important;
    margin: 10px auto 18px auto !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12) !important;
}


/* v28 - floating Create My Tracker button fixed to bottom */
#welcomePage button[type="submit"]{
    position: fixed !important;
    left: 50% !important;
    bottom: 18px !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    width: min(460px, calc(100% - 32px)) !important;
    margin: 0 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.22) !important;
}

/* add space so the floating button does not cover the bottom content */
#welcomePage{
    padding-bottom: 100px !important;
}


/* v31 - score colour range modal */
.range-modal{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.42);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:10000;
}

.range-modal-card{
  background:#fffdf8;
  border-radius:26px;
  padding:28px;
  width:min(540px,100%);
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  border:1px solid #f4ddb3;
}

.range-modal-card h2{
  margin:0 0 8px;
  color:#b45309;
}

.range-modal-card p{
  color:#526070;
  margin:0 0 18px;
}

.range-form{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.range-form label{
  color:#10233b;
}

.range-form input{
  margin-top:6px;
}

.range-help{
  font-size:14px;
}

.range-form button{
  background:#f3a11a !important;
  width:100%;
  margin-top:4px;
}


/* v32 - edit colour ranges button */
.range-edit-button{
  background:#f6b12a !important;
  color:#ffffff !important;
}


/* v35 - mango palette for mistakes page instead of purple */
.mistake-row{
  border-left-color:#f3a11a !important;
}

.mistake-row:hover{
  border-left-color:#f6b12a !important;
}

.mistake-row input[type="checkbox"]{
  accent-color:#f3a11a !important;
}

.mistake-row.reviewed{
  background:#fff7e8 !important;
  border-color:#f6b12a !important;
  border-left-color:#f3a11a !important;
}

.mistake-row.reviewed .mistake-text{
  color:#b45309 !important;
}

#mistakeTitle,
#mistakesHeading{
  color:#d97706 !important;
}


/* v38 - yellow-green highlight + mango orange left edge */
.mistake-row.reviewed,
.mistake-item.reviewed,
.mistake-item.completed{
    background:#f6f8d7 !important;      /* yellow-green highlight */
}

.mistake-row.reviewed::before,
.mistake-item.reviewed::before,
.mistake-item.completed::before{
    background:#f3a11a !important;      /* mango orange edge */
}

.mistake-row,
.mistake-item{
    border-left:6px solid #f3a11a !important;
}


/* v39 - force actual reviewed mistake highlight to yellow-green, keep orange left edge */
.mistake-row.reviewed,
.mistake-row.reviewed:hover,
label.mistake-row.reviewed,
label.mistake-row.reviewed:hover{
    background:#f6f8d7 !important;
    border-color:#c8d86a !important;
    border-left-color:#f3a11a !important;
}

.mistake-row.reviewed .mistake-text,
label.mistake-row.reviewed .mistake-text{
    color:#6b8e23 !important;
    font-weight:bold !important;
}

.mistake-row{
    border-left-color:#f3a11a !important;
}

.mistake-row input[type="checkbox"]{
    accent-color:#a3c94a !important;
}

/* prevent older orange reviewed rules from winning */
.mistake-row.reviewed *{
    background-color:transparent;
}


/* v40 - reviewed mistakes become fully yellow-green */
.mistake-row.reviewed,
.mistake-item.reviewed,
.mistake-item.completed{
    background:#f6f8d7 !important;
    border-color:#a3c94a !important;
    border-left:6px solid #a3c94a !important;
}

.mistake-row.reviewed:hover,
.mistake-item.reviewed:hover,
.mistake-item.completed:hover{
    background:#f2f6c8 !important;
    border-left:6px solid #95bc3b !important;
}

.mistake-row.reviewed .mistake-text,
.mistake-item.reviewed .mistake-text{
    color:#6b8e23 !important;
}


/* v41 - force reviewed mistake accent strip to yellow-green */
.mistake-row.reviewed{
    background:#f6f8d7 !important;
    border:1px solid #a3c94a !important;
    border-left:6px solid #6aaa1f !important;
}

/* override older left-border rules */
label.mistake-row.reviewed{
    border-left-color:#6aaa1f !important;
}

/* if the browser is using the previous all-row left border rule, override it only when reviewed */
.mistake-row.reviewed[style],
label.mistake-row.reviewed[style]{
    border-left-color:#6aaa1f !important;
}

/* keep unreviewed rows mango-orange */
.mistake-row:not(.reviewed){
    border-left-color:#f3a11a !important;
}


/* v42 - reviewed mistakes stay yellow-green permanently */
.mistake-row{
  border-left-color:#f3a11a !important;
}

.mistake-row.reviewed,
.mistake-row.reviewed:hover,
label.mistake-row.reviewed,
label.mistake-row.reviewed:hover{
  background:#f6f8d7 !important;
  border-color:#a3c94a !important;
  border-left:6px solid #6aaa1f !important;
  box-shadow:none !important;
}

.mistake-row.reviewed .mistake-text,
label.mistake-row.reviewed .mistake-text{
  color:#5f7f1f !important;
  font-weight:bold !important;
}

.mistake-row.reviewed input[type="checkbox"]{
  accent-color:#6aaa1f !important;
}


/* v44 - lighter grey slogan only */
/* v46 - wider slogan letters but tighter spacing */
/* v49 - grouped subject selection */
.subject-choices{
  display:block !important;
  max-height:430px;
  overflow:auto;
  padding-right:8px;
}

.subject-category-group{
  margin:18px 0 22px;
}

.subject-category-group:first-child{
  margin-top:10px;
}

.subject-category-heading{
  margin:0 0 10px;
  font-size:18px;
  color:#b45309;
  font-weight:800;
  border-bottom:1px solid #f4ddb3;
  padding-bottom:6px;
}

.subject-category-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

@media(max-width:850px){
  .subject-category-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:560px){
  .subject-category-grid{
    grid-template-columns:1fr;
  }
}


/* v54 - slogan formatting restored from v44 */


/* v56 - slogan styling replaced with v44 styling only */
.mango-slogan{
  margin:-8px 0 18px;
  font-size:24px;
  font-weight:700;
  font-style:italic;
  color:#d97706;
  letter-spacing:0.2px;
}
.mango-slogan{
    font-size:20px;
    margin:-4px 0 14px;
  }
.mango-slogan{
    position: relative !important;
    left: 95px !important;
    top: -12px !important;
    margin-top: -28px !important;
    margin-bottom: 6px !important;
    font-style: normal !important;
    z-index: 1;
}
.mango-slogan{
    position: relative !important;
    left: 160px !important;
    top: -10px !important;
    margin-top: -26px !important;
    margin-bottom: 8px !important;
    font-style: normal !important;
    z-index: 2 !important;
}
.mango-slogan{
    position: relative !important;
    left: 200px !important;      /* further right */
    top: -18px !important;       /* slightly higher */
    margin-top: -30px !important;
    margin-bottom: 8px !important;
    font-style: normal !important;

    /* stretch letters horizontally only */
    display: inline-block !important;
    letter-spacing: 3px !important;
    transform: scaleX(1.15) !important;
    transform-origin: center !important;
}
.mango-slogan{
    top:-30px !important;      /* a little higher */
    left:200px !important;
    letter-spacing:4px !important;
    transform:scaleX(1.18) !important;
    font-style:normal !important;
}
.mango-slogan{
  color:var(--mango-dark) !important;
}
.mango-slogan{
    color:#8b8b8b !important;
}


.version-footer{
  position:fixed;
  bottom:6px;
  left:50%;
  transform:translateX(-50%);
  font-size:11px;
  color:#999;
  opacity:.7;
  z-index:5;
}

/* Removed floating score counter. */
#scoreCountDisplay{display:none !important;}


/* v62 - MangoStudy title uses Chunko Bold */
@font-face{
  font-family:"Chunko Bold";
  src:url("Chunko Bold Demo.ttf") format("truetype");
}

.mango-study-title,
.mango-study-title span,
.mango-word,
.study-word{
  font-family:"Chunko Bold", Arial, sans-serif !important;
  font-weight:normal !important;
}


/* v74 - slightly larger MangoStudy logo only */
.mango-study-title,
.logo-title,
.site-title{
    transform: scale(1.08) !important;
    transform-origin: left center;
}


/* v75 - move MangoStudy slightly left and down */
.mango-study-title,
.logo-title,
.site-title{
    transform: translate(-8px, 4px) scale(1.08) !important;
    transform-origin: left center;
}


/* v76 - move logo group slightly left for visual centering */
.mango-study-title,
.logo-title,
.site-title{
    transform: translate(-24px, 4px) scale(1.08) !important;
    transform-origin: left center;
}

.logo,
.logo-container,
.branding,
.brand{
    margin-left: -12px !important;
}


/* v78 - move wordmark and mango icon further left */
.mango-study-title,
.logo-title,
.site-title{
    transform: translate(-52px, 4px) scale(1.08) !important;
    transform-origin: left center;
}

.logo,
.logo-container,
.branding,
.brand,
.logo img,
.brand img{
    margin-left: -32px !important;
}


/* v79 - move title and mango icon a little further left */
.mango-study-title,
.logo-title,
.site-title{
    transform: translate(-64px, 4px) scale(1.08) !important;
    transform-origin: left center;
}

.logo,
.logo-container,
.branding,
.brand,
.logo img,
.brand img{
    margin-left: -44px !important;
}


/* v81 - mango overlaps title slightly */
.mango-study-title,
.logo-title,
.site-title{
    transform: translate(-92px, 4px) scale(1.08) !important;
    transform-origin: left center !important;
    position: relative !important;
    z-index: 1 !important;
}

.brand-mango,
.mango-logo,
.logo img,
.brand img{
    position: relative !important;
    left: -18px !important; /* less overlap than v80 */
    z-index: 5 !important;
}


/* v85 - final polish: logo spacing, button height, form padding */

/* 1: move logo/slogan block slightly down */
.logo,
.logo-container,
.branding,
.brand,
.hero-logo,
.welcome-logo{
    margin-top: 18px !important;
}

/* 4: make Create my tracker button slightly taller */
#createTrackerBtn,
.create-tracker-btn,
button[type="submit"]{
    padding-top: 16px !important;
    padding-bottom: 16px !important;
    min-height: 58px !important;
}

/* 5: add more top padding inside the form card */
.welcome-card,
.setup-card,
.subject-card,
.form-card,
.card{
    padding-top: 34px !important;
}


/* v92 - rotated VCE badge */
.vce-logo-tag{
  display:inline-block !important;
  font-family:inherit !important;
  font-size:0.28em !important;
  color:#d97706 !important;
  transform:rotate(-90deg) !important;
  transform-origin:center center !important;
  margin-left:-2px !important;
  margin-right:-4px !important;
  line-height:1 !important;
  opacity:0.95 !important;
}


/* v93 - visible rotated VCE badge */
.vce-logo-tag{
  display:inline-block !important;
  font-family:inherit !important;
  font-size:0.35em !important;
  font-weight:inherit !important;
  color:#d97706 !important;
  transform:rotate(-90deg) translateY(-2px) !important;
  transform-origin:center center !important;
  margin-left:6px !important;
  margin-right:-6px !important;
  line-height:1 !important;
  opacity:1 !important;
  vertical-align:middle !important;
}


/* v94 - force visible rotated VCE badge beside the actual MangoStudy title */
.mango-study-title{
  position: relative !important;
  display: inline-block !important;
  overflow: visible !important;
}

.mango-study-title::after{
  content: "VCE" !important;
  position: absolute !important;
  display: block !important;
  right: -0.62em !important;
  top: 0.42em !important;
  font-family: inherit !important;
  font-size: 0.23em !important;
  font-weight: inherit !important;
  color: #d97706 !important;
  transform: rotate(-90deg) !important;
  transform-origin: center center !important;
  line-height: 1 !important;
  opacity: 1 !important;
  z-index: 20 !important;
  pointer-events: none !important;
}


/* v95 - better VCE badge positioning */
.vce-logo-tag{
  letter-spacing: 0.18em !important;
  margin-left: 10px !important;
  margin-right: 0 !important;
  transform: rotate(-90deg) translateY(10px) !important;
}

.mango-study-title::after{
  letter-spacing: 0.18em !important;
  top: 0.68em !important;
  right: -0.78em !important;
  transform: rotate(-90deg) !important;
}


/* v96 - place VCE to the right of the y without overlap */
.mango-study-title::after{
  right: -1.08em !important;
  top: 0.68em !important;
  letter-spacing: 0.18em !important;
  transform: rotate(-90deg) !important;
}

.vce-logo-tag{
  margin-left: 18px !important;
  margin-right: 0 !important;
  letter-spacing: 0.18em !important;
  transform: rotate(-90deg) translateY(14px) !important;
}


/* v97 - push VCE further right */
.mango-study-title::after{
  right: -1.45em !important;
}

.vce-logo-tag{
  margin-left: 30px !important;
}


/* v98 - move VCE further right and slightly lower */
.mango-study-title::after{
  right: -1.85em !important;
  top: 0.82em !important;
}

.vce-logo-tag{
  margin-left: 42px !important;
  transform: rotate(-90deg) translateY(22px) !important;
}


/* v99 - move VCE lower */
.mango-study-title::after{
  top: 1.02em !important;
}

.vce-logo-tag{
  transform: rotate(-90deg) translateY(34px) !important;
}


/* v100 - move VCE much lower */
.mango-study-title::after{
  top: 1.35em !important;
}

.vce-logo-tag{
  transform: rotate(-90deg) translateY(52px) !important;
}

/* v100 Supabase auth polish */
.auth-page header{
  text-align:center;
}

.auth-card{
  max-width:520px;
  margin:0 auto 24px;
}

.auth-card form{
  grid-template-columns:1fr;
}

.auth-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.secondary-button{
  background:#92400e;
}

.auth-message{
  margin:0;
  color:#365314;
  font-weight:bold;
}

.auth-message.error{
  color:#991b1b;
}

.account-bar{
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:999px;
  padding:10px 14px;
  margin-bottom:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#7c2d12;
  font-weight:bold;
}


.account-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}

.account-actions .secondary-button{
  white-space:nowrap;
}

.sign-out-button{
  background:#92400e;
  border-radius:999px;
  padding:8px 12px;
}

.privacy-note{
  text-align:center;
  max-width:760px;
  margin:12px auto 0;
  color:#6b4f2a;
  font-size:14px;
}

@media(max-width:650px){
  .account-bar{
    border-radius:18px;
    align-items:flex-start;
    flex-direction:column;
  }
  .account-actions{
    width:100%;
    justify-content:flex-start;
  }
}


/* Smooth app start/loading fixes */
body.app-loading{
  overflow:hidden;
}
body.app-loading .container,
body.app-loading .account-bar,
body.app-loading .version-footer,
body.app-loading .range-modal,
body.app-loading .undo-toast{
  visibility:hidden;
}
.app-loader{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#f8f1e4;
  color:#5c4033;
  z-index:99999;
  text-align:center;
  padding:24px;
}
.app-loader strong{
  font-size:clamp(28px,5vw,48px);
}
.app-loader span{
  color:#7c5a42;
  font-weight:bold;
}
.loader-mango{
  width:88px;
  height:auto;
  animation:mangoPulse 1.1s ease-in-out infinite alternate;
}
body:not(.app-loading) .app-loader{
  display:none !important;
}
@keyframes mangoPulse{
  from{transform:scale(.96); opacity:.85;}
  to{transform:scale(1.04); opacity:1;}
}
body.page-ready section:not(.hidden){
  animation:pageFadeIn .18s ease-out;
}
@keyframes pageFadeIn{
  from{opacity:.65; transform:translateY(4px);}
  to{opacity:1; transform:translateY(0);}
}

/* v100 stable startup: no fade flicker when routing between saved pages */
body.page-ready section:not(.hidden){
  animation:none !important;
}

/* Public launch polish: auth links, privacy popup and reset screen */
.auth-links{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:-4px;
}

.link-button{
  background:transparent;
  color:#92400e;
  padding:0;
  border-radius:0;
  text-decoration:underline;
  font-weight:800;
}

.link-button:hover{
  opacity:.75;
}

 .privacy-modal{
  position:fixed;
  inset:0;
  z-index:10000;
  background:rgba(31,41,55,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.privacy-modal-card{
  position:relative;
  width:min(680px,100%);
  max-height:88vh;
  overflow:auto;
  background:#fffaf1;
  border:2px solid #ead7b8;
  border-radius:24px;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  padding:30px;
}

.privacy-modal-card h2{
  margin-top:0;
  color:#5a2f0d;
}

.privacy-modal-card p{
  line-height:1.55;
  color:#374151;
}

.privacy-close{
  position:absolute;
  top:12px;
  right:12px;
  width:38px;
  height:38px;
  border-radius:999px;
  background:#f3e2c7;
  color:#5a2f0d;
  padding:0;
  font-size:24px;
  line-height:1;
}

#privacyGotItBtn{
  background:#92400e;
  margin-top:8px;
}

.policy-modal{
  position:fixed;
  inset:0;
  z-index:10001;
  background:rgba(31,41,55,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.policy-modal-card{
  position:relative;
  width:min(860px,100%);
  height:min(84vh,760px);
  background:#fffaf1;
  border:2px solid #ead7b8;
  border-radius:24px;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.policy-modal-card h2{
  margin:0 44px 0 0;
  color:#5a2f0d;
}
.policy-frame{
  flex:1;
  width:100%;
  border:2px solid #ead7b8;
  border-radius:18px;
  background:#fffaf1;
}
@media(max-width:700px){
  .policy-modal{padding:10px;}
  .policy-modal-card{height:90vh; padding:14px; border-radius:20px;}
  .policy-modal-card h2{font-size:1.1rem;}
  .privacy-modal-card{padding:24px 18px 18px;}
}

#resetPasswordPage .auth-card{
  max-width:620px;
  margin:0 auto;
}

@media(max-width:650px){
  .auth-links{
    align-items:flex-start;
    flex-direction:column;
  }
  
.policy-modal{
  position:fixed;
  inset:0;
  z-index:10001;
  background:rgba(31,41,55,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.policy-modal-card{
  position:relative;
  width:min(860px,100%);
  height:min(84vh,760px);
  background:#fffaf1;
  border:2px solid #ead7b8;
  border-radius:24px;
  box-shadow:0 24px 80px rgba(0,0,0,.28);
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.policy-modal-card h2{
  margin:0 44px 0 0;
  color:#5a2f0d;
}
.policy-frame{
  flex:1;
  width:100%;
  border:2px solid #ead7b8;
  border-radius:18px;
  background:#fffaf1;
}
@media(max-width:700px){
  .policy-modal{padding:10px;}
  .policy-modal-card{height:90vh; padding:14px; border-radius:20px;}
  .policy-modal-card h2{font-size:1.1rem;}
}

.privacy-modal-card{
    padding:24px 18px 18px;
  }
}


/* Password visibility toggle */
.password-field{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
}

.password-field input{
  width:100%;
  padding-right:52px;
}

.password-toggle{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border:none;
  background:#fff7ed;
  color:#92400e;
  border-radius:999px;
  padding:0;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:none;
}

.password-toggle svg{
  width:19px;
  height:19px;
  display:block;
  stroke:currentColor;
}

.password-toggle:hover{
  background:#fed7aa;
}

.password-toggle:focus-visible{
  outline:3px solid rgba(245,158,11,.35);
  outline-offset:2px;
}

/* Same-height auth buttons without forcing the same width */
.auth-actions > button{
  min-height:48px;
  padding:12px 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


/* Public launch privacy/security polish */
.privacy-policy-link{
  margin-left:auto;
}

.account-link-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#5a2f0d;
  background:#f3e2c7;
}

.privacy-modal-card ul{
  margin:8px 0 14px 20px;
  padding:0;
  color:#374151;
  line-height:1.55;
}

.privacy-modal-card a{
  color:#92400e;
  font-weight:800;
}

.privacy-page{
  max-width:880px;
  margin:32px auto;
  padding:0 18px 40px;
}

.privacy-page .policy-card{
  background:#fffaf1;
  border:2px solid #ead7b8;
  border-radius:24px;
  box-shadow:0 12px 34px rgba(0,0,0,.10);
  padding:30px;
}

.privacy-page h1,
.privacy-page h2{
  color:#5a2f0d;
}

.privacy-page p,
.privacy-page li{
  line-height:1.65;
}

.privacy-page a{
  color:#92400e;
  font-weight:800;
}

@media(max-width:650px){
  .privacy-policy-link{
    margin-left:0;
  }
  .account-link-button{
    width:auto;
  }
  .privacy-page .policy-card{
    padding:22px;
  }
}

/* v102 - auth page button/link polish */
#authPage .auth-actions > button{
  min-height:48px !important;
  height:48px !important;
  padding:0 18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1.1 !important;
}

#authPage .auth-links #forgotPasswordBtn,
#authPage .auth-links #openPrivacyBtn,
#authPage .auth-links .privacy-policy-link{
  font-size:14px !important;
  line-height:1.2 !important;
}

#authPage .auth-links .link-button:hover,
#authPage .auth-links .link-button:focus-visible{
  background:transparent !important;
  color:#c2410c !important;
  opacity:1 !important;
  text-decoration:underline !important;
}

/* v103 - keep create account button brown on hover */
#authPage .auth-actions .secondary-button:hover,
#authPage .auth-actions .secondary-button:focus-visible{
  background:#7c2d12 !important;
  opacity:1 !important;
}

/* v106 - welcome page title/slogan colour polish */
#authPage .welcome-heading{
  color:#4b2a12 !important;
}

#authPage .mango-slogan{
  color:#7a6048 !important;
}


/* v107 - subject setup colours, top policy button match, and edit setup back button */
#welcomePage .welcome-heading{
  color:#4b2a12 !important;
}

#welcomePage .mango-slogan{
  color:#7a6048 !important;
}

.account-actions .account-link-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#92400e !important;
  color:#ffffff !important;
  border-radius:10px !important;
  padding:12px 16px !important;
  font-weight:bold !important;
  text-decoration:none !important;
  line-height:normal !important;
  min-height:42px;
}

.account-actions .account-link-button:hover,
.account-actions .account-link-button:focus-visible{
  opacity:.9;
}

.setup-actions{
  grid-column:1/-1;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.setup-actions button{
  margin:0;
}

.setup-back{
  background:#92400e;
}

.setup-back:hover,
.setup-back:focus-visible{
  background:#7c2d12;
  opacity:1;
}

@media(max-width:650px){
  .setup-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .setup-actions button{
    width:100%;
  }
}


/* v108 - make top account buttons identical and move edit-setup back button near top */
.account-actions .secondary-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#92400e !important;
  color:#ffffff !important;
  border:none !important;
  border-radius:10px !important;
  padding:8px 12px !important;
  min-height:36px !important;
  height:36px !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:bold !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  cursor:pointer;
}

.account-actions .secondary-button:hover,
.account-actions .secondary-button:focus-visible{
  background:#7c2d12 !important;
  opacity:1 !important;
}

.setup-back-top{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  align-self:flex-start;
  margin:0 0 16px 0;
  padding:10px 14px;
  border-radius:10px;
}

@media(max-width:650px){
  .account-actions .secondary-button{
    height:34px !important;
    min-height:34px !important;
    padding:7px 10px !important;
    font-size:13px !important;
  }
  .setup-back-top{
    width:auto !important;
    max-width:max-content;
  }
}

/* v109 - phone layout fix: keeps desktop/laptop unchanged, only adjusts small screens */
@media (max-width: 650px){
  html,
  body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  body{
    padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .container{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto !important;
    padding:16px 14px 34px !important;
    box-sizing:border-box !important;
    overflow-x:hidden !important;
  }

  .welcome-hero{
    width:100% !important;
    max-width:100% !important;
    margin:14px auto 22px !important;
    padding:0 !important;
    overflow:visible !important;
  }

  .brand-title{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto 8px !important;
    padding:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    overflow:visible !important;
  }

  .brand-mango,
  .mango-logo,
  .logo img,
  .brand img{
    position:relative !important;
    left:0 !important;
    margin:0 auto -6px !important;
  }

  .brand-mango{
    width:78px !important;
    height:78px !important;
  }

  .mango-study-title,
  .mango-study-title span,
  .logo-title,
  .site-title{
    transform:none !important;
  }

  .mango-study-title{
    display:block !important;
    max-width:calc(100vw - 56px) !important;
    margin:0 auto 8px !important;
    padding:0 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:visible !important;
    font-size:clamp(40px, 11.4vw, 50px) !important;
    line-height:.92 !important;
    letter-spacing:-2px !important;
    word-spacing:0 !important;
  }

  .mango-study-title::after{
    right:-0.46em !important;
    top:1.05em !important;
    font-size:0.18em !important;
    letter-spacing:0.16em !important;
  }

  .mango-slogan{
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    margin:6px auto 20px !important;
    text-align:center !important;
    font-size:clamp(15px, 4.4vw, 19px) !important;
    line-height:1.25 !important;
    letter-spacing:3px !important;
  }

  .welcome-heading{
    max-width:100% !important;
    margin:0 auto 12px !important;
    font-size:clamp(30px, 9vw, 38px) !important;
    line-height:1.13 !important;
    text-align:center !important;
  }

  .welcome-hero p{
    max-width:100% !important;
    margin:0 auto !important;
    font-size:clamp(16px, 4.8vw, 18px) !important;
    line-height:1.35 !important;
    text-align:center !important;
  }

  .auth-card,
  .welcome-card,
  .card{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    border-radius:20px !important;
    padding:22px 18px !important;
  }

  input,
  textarea,
  select{
    font-size:16px !important;
  }

  #authPage .auth-links{
    display:grid !important;
    grid-template-columns:1fr !important;
    justify-items:start !important;
    align-items:start !important;
    gap:10px !important;
    margin:6px 0 0 !important;
    text-align:left !important;
  }

  #authPage .auth-links .link-button,
  #authPage .auth-links .privacy-policy-link{
    margin-left:0 !important;
    width:auto !important;
    text-align:left !important;
    font-size:14px !important;
  }

  #authPage .auth-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:10px !important;
    margin-top:14px !important;
  }

  #authPage .auth-actions > button{
    width:auto !important;
    min-width:116px !important;
    height:48px !important;
    min-height:48px !important;
    padding:0 18px !important;
    font-size:15px !important;
  }

  .privacy-note{
    margin-top:18px !important;
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .account-bar{
    width:100% !important;
    box-sizing:border-box !important;
    margin:0 0 18px !important;
    padding:12px !important;
    border-radius:18px !important;
    gap:10px !important;
  }

  .account-actions{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .account-actions .secondary-button{
    height:34px !important;
    min-height:34px !important;
    padding:7px 10px !important;
    font-size:13px !important;
    border-radius:9px !important;
  }

  .setup-back-top{
    margin:0 0 18px 0 !important;
    width:auto !important;
    max-width:100% !important;
    padding:10px 13px !important;
    font-size:14px !important;
  }

  #welcomePage{
    padding-bottom:34px !important;
  }

  #welcomePage button[type="submit"]{
    position:static !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:100% !important;
    max-width:100% !important;
    margin:20px 0 0 !important;
    box-shadow:0 10px 24px rgba(0,0,0,.10) !important;
  }

  .subject-choices{
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }

  .subject-category-grid{
    grid-template-columns:1fr !important;
  }

  .version-footer{
    display:none !important;
  }
}

@media (max-width: 390px){
  .mango-study-title{
    font-size:40px !important;
    letter-spacing:-2.4px !important;
  }

  .mango-slogan{
    font-size:14px !important;
    letter-spacing:2.4px !important;
  }

  #authPage .auth-actions > button{
    min-width:0 !important;
    flex:1 1 0 !important;
    padding:0 12px !important;
  }
}

/* v110 - phone setup floating button + stable mobile VCE logo tag */
@media (max-width: 650px){
  /* Keep the MangoStudy word centred and give the rotated VCE tag its own room on phones. */
  .mango-study-title{
    position:relative !important;
    display:inline-block !important;
    width:auto !important;
    max-width:calc(100vw - 42px) !important;
    margin:0 auto 8px !important;
    padding:0 28px 0 0 !important;
    box-sizing:border-box !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:visible !important;
    font-size:clamp(38px, 10.2vw, 46px) !important;
    line-height:.95 !important;
    letter-spacing:-1.8px !important;
    word-spacing:0 !important;
  }

  .mango-study-title::after{
    right:1px !important;
    top:.88em !important;
    font-size:.19em !important;
    letter-spacing:.16em !important;
    transform:rotate(-90deg) !important;
    transform-origin:center center !important;
    line-height:1 !important;
  }

  /* Make the setup submit button easy to reach on phones without changing desktop. */
  #welcomePage .setup-actions{
    position:sticky !important;
    bottom:calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    z-index:80 !important;
    grid-column:1/-1 !important;
    width:100% !important;
    margin-top:16px !important;
    padding:0 !important;
    pointer-events:none !important;
  }

  #welcomePage .setup-actions button[type="submit"]{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    min-height:56px !important;
    border-radius:14px !important;
    box-shadow:0 14px 30px rgba(75,42,18,.20) !important;
    pointer-events:auto !important;
  }

  #welcomePage .welcome-card{
    padding-bottom:110px !important;
  }
}

@media (max-width: 390px){
  .mango-study-title{
    font-size:clamp(36px, 9.8vw, 40px) !important;
    letter-spacing:-1.6px !important;
    padding-right:26px !important;
  }

  .mango-study-title::after{
    right:0 !important;
    top:.9em !important;
  }
}

/* v121 - keep login helper links identical on phones */
@media (max-width: 650px){
  #authPage .auth-links,
  #authPage .auth-links button,
  #authPage .auth-links a,
  #authPage .auth-links .link-button,
  #authPage .auth-links .privacy-policy-link{
    font-family: inherit !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    text-size-adjust: 100% !important;
    -webkit-text-size-adjust: 100% !important;
  }

  #authPage .auth-links button.link-button,
  #authPage .auth-links a.link-button{
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #92400e !important;
    text-decoration: underline !important;
  }
}

/* v122 - keep mobile VCE tag attached to MangoStudy */
@media (max-width: 650px){
  #authPage .mango-study-title,
  #welcomePage .mango-study-title,
  #resetPasswordPage .mango-study-title{
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    box-sizing: content-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: clamp(38px, 10.2vw, 46px) !important;
    line-height: .95 !important;
    letter-spacing: -1.8px !important;
    word-spacing: 0 !important;
  }

  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    content: "VCE" !important;
    position: absolute !important;
    display: block !important;
    right: -0.48em !important;
    top: .78em !important;
    font-size: .19em !important;
    font-weight: inherit !important;
    letter-spacing: .15em !important;
    line-height: 1 !important;
    transform: rotate(-90deg) !important;
    transform-origin: center center !important;
    color: #d97706 !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 390px){
  #authPage .mango-study-title,
  #welcomePage .mango-study-title,
  #resetPasswordPage .mango-study-title{
    font-size: clamp(35px, 9.6vw, 40px) !important;
    letter-spacing: -1.5px !important;
  }

  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right: -0.46em !important;
    top: .78em !important;
    font-size: .19em !important;
  }
}


/* v126 - keep privacy/policy inside MangoStudy as popups */
.privacy-inline-policy-button{
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  color:#92400e;
  font:inherit;
  font-weight:800;
  text-decoration:underline;
  cursor:pointer;
}
.privacy-inline-policy-button:hover,
.privacy-inline-policy-button:focus-visible{
  color:#c2410c;
  outline:none;
}


/* v126 hotfix - full privacy policy is inline, not iframe, so security headers do not block it */
.policy-modal-body{
  flex:1;
  overflow-y:auto;
  border:2px solid #ead7b8;
  border-radius:18px;
  background:#fffaf1;
  padding:18px 20px;
  color:#5a2f0d;
  line-height:1.6;
  -webkit-overflow-scrolling:touch;
}
.policy-modal-body h3{
  margin:20px 0 6px;
  color:#4b2a12;
  font-size:1rem;
}
.policy-modal-body p,
.policy-modal-body li{
  font-size:.96rem;
}
.policy-modal-body ul{
  padding-left:22px;
}
@media(max-width:700px){
  .policy-modal-body{
    padding:14px;
  }
  .policy-modal-body p,
  .policy-modal-body li{
    font-size:.92rem;
  }
}


/* v133 - sign-in polish applied to modified v126 base without shrinking original sizing */
#authPage{
  position:relative;
  isolation:isolate;
  overflow:visible;
}

#authPage::before,
#authPage::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:999px;
  filter:blur(4px);
}

#authPage::before{
  width:340px;
  height:340px;
  top:-42px;
  left:-82px;
  background:radial-gradient(circle at 35% 35%, rgba(255,191,92,.42) 0%, rgba(255,191,92,.18) 45%, rgba(255,191,92,0) 72%);
}

#authPage::after{
  width:280px;
  height:280px;
  top:150px;
  right:-76px;
  background:radial-gradient(circle at 55% 40%, rgba(245,158,11,.18) 0%, rgba(245,158,11,.09) 48%, rgba(245,158,11,0) 73%);
}

/* Keep the title on one line without reducing the original v126 title size. */
#authPage .welcome-heading{
  white-space:nowrap !important;
}

#authPage .login-benefit{
  margin:12px auto 0 !important;
  max-width:760px;
  color:#7c4a16 !important;
  font-size:18px !important;
  line-height:1.35 !important;
  font-weight:800;
}

.auth-card-shell{
  position:relative;
  width:min(760px,100%);
  margin:0 auto 24px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#authPage .auth-card{
  position:relative;
  overflow:hidden;
  background:#fffdf8 !important;
  border:1px solid #f5ddb2 !important;
  border-radius:26px !important;
  box-shadow:0 18px 44px rgba(180,83,9,.10) !important;
}

#authPage .auth-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:8px;
  background:linear-gradient(90deg,#ffd08a 0%, #ffb347 50%, #f59e0b 100%);
}

#authPage .auth-card form{
  position:relative;
  z-index:1;
}

.auth-side-chips{
  position:absolute;
  top:50%;
  display:flex;
  gap:10px;
  pointer-events:none;
}

.auth-side-chips-left{
  left:0;
  transform:translate(-52%, -50%) rotate(-90deg);
  transform-origin:center center;
}

.auth-side-chips-right{
  right:0;
  transform:translate(52%, -50%) rotate(90deg);
  transform-origin:center center;
}

.feature-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #f3cb88;
  background:#fff8eb;
  color:#8b5a18;
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(217,119,6,.06);
  white-space:nowrap;
}

/* On phones there is not enough side space, so keep the chips compact above the card
   without changing the original v126 font sizing. */
@media (max-width:650px){
  #authPage::before{
    width:220px;
    height:220px;
    top:-26px;
    left:-58px;
  }

  #authPage::after{
    width:190px;
    height:190px;
    top:164px;
    right:-60px;
  }

  #authPage .welcome-heading{
    white-space:normal !important;
  }

  #authPage .login-benefit{
    font-size:16px !important;
    margin-top:12px !important;
  }

  .auth-card-shell{
    display:block;
    width:100%;
    margin-bottom:12px;
  }

  .auth-side-chips{
    position:static;
    transform:none !important;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin:0 auto 12px;
    pointer-events:auto;
  }

  .auth-side-chips-left{
    margin-top:0;
  }

  .auth-side-chips-right{
    margin-top:-4px;
  }

  .feature-chip{
    min-height:30px;
    padding:7px 12px;
    font-size:13px;
  }
}

/* v134 - remove extra benefit line, recolour intro, and stabilise/enlarge sign-in feature chips */
#authPage .auth-intro{
  color:#7c4a16 !important;
}

#authPage .login-benefit{
  display:none !important;
}

.auth-card-shell{
  width:min(900px, 100%) !important;
  overflow:visible !important;
}

.auth-side-chips{
  gap:12px !important;
  z-index:2 !important;
  will-change:transform;
}

.auth-side-chips-left{
  left:24px !important;
  transform:translate(-56%, -50%) rotate(-90deg) !important;
}

.auth-side-chips-right{
  right:24px !important;
  transform:translate(56%, -50%) rotate(90deg) !important;
}

.feature-chip{
  min-height:40px !important;
  padding:10px 18px !important;
  font-size:16px !important;
  border-width:1px !important;
  box-shadow:0 8px 20px rgba(217,119,6,.10) !important;
}

@media (max-width:650px){
  .auth-side-chips{
    gap:10px !important;
  }

  .feature-chip{
    min-height:34px !important;
    padding:8px 14px !important;
    font-size:14px !important;
  }
}

/* v135 - upright stacked feature chips on each side of sign-in box */
.auth-card-shell{
  width:min(980px, 100%) !important;
}

.auth-side-chips{
  position:absolute;
  top:50%;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  z-index:2 !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;
}

.auth-side-chips-left{
  left:0 !important;
}

.auth-side-chips-right{
  right:0 !important;
}

.feature-chip{
  min-width:118px !important;
  text-align:center !important;
}

@media (max-width: 900px){
  .auth-card-shell{
    width:min(860px, 100%) !important;
  }

  .auth-side-chips-left{
    left:8px !important;
  }

  .auth-side-chips-right{
    right:8px !important;
  }
}

@media (max-width:650px){
  .auth-side-chips{
    position:static !important;
    transform:none !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    justify-content:center !important;
    margin:0 auto 12px !important;
    pointer-events:auto !important;
  }

  .auth-side-chips-left,
  .auth-side-chips-right{
    left:auto !important;
    right:auto !important;
  }

  .feature-chip{
    min-width:0 !important;
  }
}

/* v136 - enlarge side feature chips and keep them clear of the sign-in card */
.auth-card-shell{
  width:min(1080px, 100%) !important;
  padding-left:190px !important;
  padding-right:190px !important;
  box-sizing:border-box !important;
}

#authPage .auth-card{
  max-width:520px !important;
  width:100% !important;
  margin:0 auto 24px !important;
}

.auth-side-chips{
  width:160px !important;
  gap:18px !important;
}

.auth-side-chips-left{
  left:12px !important;
}

.auth-side-chips-right{
  right:12px !important;
}

.feature-chip{
  width:100% !important;
  min-width:0 !important;
  min-height:78px !important;
  padding:14px 16px !important;
  font-size:22px !important;
  line-height:1.15 !important;
  border-radius:24px !important;
  box-shadow:0 10px 24px rgba(217,119,6,.12) !important;
}

@media (max-width: 1000px){
  .auth-card-shell{
    width:min(980px, 100%) !important;
    padding-left:150px !important;
    padding-right:150px !important;
  }

  .auth-side-chips{
    width:126px !important;
    gap:14px !important;
  }

  .feature-chip{
    min-height:64px !important;
    font-size:18px !important;
    border-radius:20px !important;
  }
}

@media (max-width:650px){
  .auth-card-shell{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .auth-side-chips{
    width:auto !important;
    gap:10px !important;
  }

  .feature-chip{
    width:auto !important;
    min-height:34px !important;
    padding:8px 14px !important;
    font-size:14px !important;
    border-radius:999px !important;
  }
}


/* v137 - stop feature chips overlapping the sign-in box by using real side columns */
@media (min-width: 901px){
  .auth-card-shell{
    width:min(1120px, 100%) !important;
    margin:0 auto 24px !important;
    padding:0 !important;
    box-sizing:border-box !important;
    display:grid !important;
    grid-template-columns:minmax(150px, 190px) minmax(0, 520px) minmax(150px, 190px) !important;
    column-gap:36px !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:visible !important;
  }

  #authPage .auth-card{
    grid-column:2 !important;
    width:100% !important;
    max-width:520px !important;
    margin:0 !important;
    justify-self:center !important;
  }

  .auth-side-chips{
    position:static !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    transform:none !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:18px !important;
    pointer-events:none !important;
    z-index:auto !important;
  }

  .auth-side-chips-left{
    grid-column:1 !important;
  }

  .auth-side-chips-right{
    grid-column:3 !important;
  }

  .feature-chip{
    width:100% !important;
    min-width:0 !important;
    min-height:82px !important;
    padding:16px 18px !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    font-size:22px !important;
    line-height:1.15 !important;
    border-radius:24px !important;
    white-space:normal !important;
  }
}

@media (min-width:651px) and (max-width:900px){
  .auth-card-shell{
    display:block !important;
    width:min(620px, 100%) !important;
    padding:0 !important;
    margin:0 auto 24px !important;
  }

  #authPage .auth-card{
    width:100% !important;
    max-width:520px !important;
    margin:0 auto 18px !important;
  }

  .auth-side-chips{
    position:static !important;
    transform:none !important;
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:10px !important;
    margin:0 auto 12px !important;
    pointer-events:auto !important;
  }

  .feature-chip{
    width:auto !important;
    min-width:120px !important;
    min-height:42px !important;
    padding:10px 16px !important;
    font-size:16px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }
}


/* v138 - right feature chips moved outside the sign-in card; force safe side-column layout */
@media (min-width: 901px){
  .auth-card-shell{
    display:grid !important;
    grid-template-columns:190px minmax(0,520px) 190px !important;
    column-gap:40px !important;
    align-items:center !important;
    justify-content:center !important;
    width:min(1140px, 100%) !important;
    padding:0 !important;
    box-sizing:border-box !important;
    overflow:visible !important;
  }

  .auth-card-shell > .auth-side-chips{
    position:static !important;
    transform:none !important;
    width:100% !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:18px !important;
    pointer-events:none !important;
    z-index:0 !important;
  }

  .auth-side-chips-left{
    grid-column:1 !important;
  }

  #authPage .auth-card{
    grid-column:2 !important;
    position:relative !important;
    z-index:1 !important;
    width:100% !important;
    max-width:520px !important;
    margin:0 !important;
  }

  .auth-side-chips-right{
    grid-column:3 !important;
  }

  .feature-chip{
    width:100% !important;
    min-height:82px !important;
    box-sizing:border-box !important;
  }
}

/* Hide any old/right chip group if a browser cached the older inside-card structure. */
#authPage .auth-card > .auth-side-chips{
  display:none !important;
}

/* v139 - softer blended mango palette shadows/glows on sign-in area */
#authPage::before,
#authPage::after{
  filter:blur(10px) !important;
}

#authPage::before{
  background:radial-gradient(circle at 35% 35%, rgba(255,196,111,.30) 0%, rgba(255,196,111,.16) 38%, rgba(255,196,111,.06) 56%, rgba(255,196,111,0) 74%) !important;
}

#authPage::after{
  background:radial-gradient(circle at 55% 40%, rgba(245,158,11,.14) 0%, rgba(251,146,60,.10) 42%, rgba(251,191,36,.05) 58%, rgba(245,158,11,0) 76%) !important;
}

.auth-card-shell{
  position:relative;
  isolation:isolate;
}

.auth-card-shell::before,
.auth-card-shell::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:999px;
  filter:blur(16px);
  opacity:.95;
}

.auth-card-shell::before{
  width:230px;
  height:230px;
  left:9%;
  top:58%;
  transform:translate(-50%, -50%);
  background:radial-gradient(circle at 45% 45%, rgba(254,215,170,.34) 0%, rgba(251,191,36,.16) 42%, rgba(254,215,170,.06) 60%, rgba(254,215,170,0) 76%);
}

.auth-card-shell::after{
  width:210px;
  height:210px;
  right:8%;
  top:42%;
  transform:translate(50%, -50%);
  background:radial-gradient(circle at 50% 40%, rgba(253,186,116,.28) 0%, rgba(251,146,60,.14) 44%, rgba(245,158,11,.05) 62%, rgba(253,186,116,0) 78%);
}

#authPage .auth-card{
  box-shadow:
    0 20px 42px rgba(180,83,9,.08),
    0 8px 20px rgba(245,158,11,.06),
    0 1px 0 rgba(255,255,255,.75) inset !important;
}

#authPage .auth-card::after{
  content:"";
  position:absolute;
  inset:auto 18px 0 18px;
  height:26px;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(217,119,6,.10) 0%, rgba(217,119,6,.04) 38%, rgba(217,119,6,0) 72%);
  filter:blur(10px);
  z-index:0;
  pointer-events:none;
}

.feature-chip{
  box-shadow:
    0 10px 20px rgba(217,119,6,.08),
    0 4px 10px rgba(251,191,36,.10),
    0 1px 0 rgba(255,255,255,.7) inset !important;
  background:linear-gradient(180deg, #fffaf0 0%, #fff4de 100%) !important;
}

@media (max-width:900px){
  .auth-card-shell::before,
  .auth-card-shell::after{
    width:150px;
    height:150px;
    filter:blur(14px);
  }
}

@media (max-width:650px){
  .auth-card-shell::before,
  .auth-card-shell::after{
    display:none !important;
  }

  #authPage .auth-card{
    box-shadow:
      0 16px 30px rgba(180,83,9,.08),
      0 6px 14px rgba(245,158,11,.05),
      0 1px 0 rgba(255,255,255,.75) inset !important;
  }

  .feature-chip{
    box-shadow:
      0 8px 16px rgba(217,119,6,.08),
      0 3px 8px rgba(251,191,36,.10),
      0 1px 0 rgba(255,255,255,.7) inset !important;
  }
}

/* v140 - phone VCE tag attachment fix and move all four feature chips above sign-in box on phone */
@media (max-width:650px){
  #authPage .brand-title,
  #welcomePage .brand-title,
  #resetPasswordPage .brand-title{
    overflow:visible !important;
  }

  #authPage .mango-study-title,
  #welcomePage .mango-study-title,
  #resetPasswordPage .mango-study-title{
    padding-right:.40em !important;
    box-sizing:content-box !important;
    overflow:visible !important;
  }

  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:.02em !important;
    top:.80em !important;
    font-size:.18em !important;
    letter-spacing:.13em !important;
  }

  .auth-card-shell{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    width:100% !important;
  }

  .auth-side-chips-left,
  .auth-side-chips-right{
    position:static !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:10px !important;
    margin:0 auto 10px !important;
    pointer-events:auto !important;
  }

  .auth-side-chips-left{ order:1 !important; }
  .auth-side-chips-right{ order:2 !important; }
  #authPage .auth-card{ order:3 !important; }

  .auth-side-chips-left .feature-chip,
  .auth-side-chips-right .feature-chip{
    width:auto !important;
    min-width:128px !important;
    min-height:38px !important;
    font-size:14px !important;
    padding:9px 14px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }
}

@media (max-width:390px){
  #authPage .mango-study-title,
  #welcomePage .mango-study-title,
  #resetPasswordPage .mango-study-title{
    padding-right:.42em !important;
  }

  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:0 !important;
    top:.82em !important;
    font-size:.18em !important;
  }

  .auth-side-chips-left .feature-chip,
  .auth-side-chips-right .feature-chip{
    min-width:118px !important;
    font-size:13px !important;
    padding:8px 12px !important;
  }
}

/* v141 - tighten mobile VCE tag so it stays attached to MangoStudy */
@media (max-width:650px){
  #authPage .brand-title,
  #welcomePage .brand-title,
  #resetPasswordPage .brand-title{
    gap:12px !important;
    align-items:center !important;
  }

  #authPage .mango-study-title,
  #welcomePage .mango-study-title,
  #resetPasswordPage .mango-study-title{
    display:inline-block !important;
    width:fit-content !important;
    max-width:none !important;
    padding-right:.58em !important;
    margin:0 auto 8px !important;
    position:relative !important;
    overflow:visible !important;
  }

  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:-0.14em !important;
    top:0.77em !important;
    font-size:0.17em !important;
    letter-spacing:0.11em !important;
    line-height:1 !important;
  }
}

@media (max-width:390px){
  #authPage .mango-study-title,
  #welcomePage .mango-study-title,
  #resetPasswordPage .mango-study-title{
    padding-right:.60em !important;
  }

  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:-0.12em !important;
    top:0.79em !important;
    font-size:0.17em !important;
  }
}


/* v142 - pull the mobile VCE tag back in toward MangoStudy */
@media (max-width:650px){
  #authPage .mango-study-title,
  #welcomePage .mango-study-title,
  #resetPasswordPage .mango-study-title{
    padding-right:.34em !important;
  }

  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:.10em !important;
    top:.80em !important;
    font-size:.18em !important;
    letter-spacing:.10em !important;
  }
}

@media (max-width:390px){
  #authPage .mango-study-title,
  #welcomePage .mango-study-title,
  #resetPasswordPage .mango-study-title{
    padding-right:.34em !important;
  }

  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:.09em !important;
    top:.81em !important;
    font-size:.18em !important;
  }
}

/* v143 - lower the mobile VCE tag so it lines up with the top of the y */
@media (max-width:650px){
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    top:0.98em !important;
  }
}

@media (max-width:390px){
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    top:1.00em !important;
  }
}

/* v144 - lower the mobile VCE tag further so it aligns with the top of the y */
@media (max-width:650px){
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    top:1.16em !important;
  }
}

@media (max-width:390px){
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    top:1.18em !important;
  }
}

/* v145 - stronger mobile VCE alignment fix to match desktop placement more closely */
@media (max-width:650px){
  #authPage .mango-study-title,
  #welcomePage .mango-study-title,
  #resetPasswordPage .mango-study-title{
    padding-right:.28em !important;
  }

  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:.04em !important;
    top:1.34em !important;
    font-size:.165em !important;
    letter-spacing:.10em !important;
  }
}

@media (max-width:390px){
  #authPage .mango-study-title,
  #welcomePage .mango-study-title,
  #resetPasswordPage .mango-study-title{
    padding-right:.30em !important;
  }

  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:.03em !important;
    top:1.36em !important;
    font-size:.165em !important;
  }
}

/* v146 - lower mobile VCE tag more */
@media (max-width:650px){
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    top:1.56em !important;
  }
}

@media (max-width:390px){
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    top:1.58em !important;
  }
}

/* v147 - lower the mobile VCE tag much further */
@media (max-width:650px){
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    top:1.92em !important;
    right:0.02em !important;
  }
}

@media (max-width:390px){
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    top:1.95em !important;
    right:0.01em !important;
  }
}


/* v148 - phone only: make all four feature chips fit on one line above sign-in box */
@media (max-width:650px){
  .auth-card-shell{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:7px !important;
    width:100% !important;
    padding:0 !important;
    margin:0 auto 24px !important;
  }

  .auth-side-chips-left,
  .auth-side-chips-right{
    display:contents !important;
    position:static !important;
    transform:none !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
  }

  .auth-card-shell .feature-chip{
    order:1 !important;
    width:auto !important;
    min-width:0 !important;
    min-height:28px !important;
    padding:6px 9px !important;
    font-size:11.5px !important;
    line-height:1 !important;
    border-radius:999px !important;
    white-space:nowrap !important;
    box-sizing:border-box !important;
  }

  #authPage .auth-card{
    order:2 !important;
    flex:0 0 100% !important;
    width:100% !important;
    margin-top:8px !important;
  }
}

@media (max-width:390px){
  .auth-card-shell{
    gap:5px !important;
  }

  .auth-card-shell .feature-chip{
    padding:6px 7px !important;
    font-size:10.8px !important;
  }
}


/* v152 - force Chunko font onto MangoStudy title only; no position/size/layout changes */
.brand-title,
.brand-title *,
.mango-study-title,
.mango-study-title *,
#authPage .mango-study-title,
#authPage .mango-study-title *,
#welcomePage .mango-study-title,
#welcomePage .mango-study-title *,
#resetPasswordPage .mango-study-title,
#resetPasswordPage .mango-study-title * {
  font-family: "ChunkoLicensed", "Fredoka", "Poppins", system-ui, sans-serif !important;
}


/* v158 - separate title text and VCE adjustments, no size changes */

/* Move only the visible MangoStudy word slightly upward */
@media (min-width:651px){
  .mango-study-title > span,
  #authPage .mango-study-title > span,
  #welcomePage .mango-study-title > span,
  #resetPasswordPage .mango-study-title > span{
    position:relative !important;
    top:-5px !important;
  }

  /* Pull VCE left so it touches MangoStudy, but do not resize it */
  .mango-study-title::after,
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:-0.56em !important;
  }
}

/* Phone: leave the current phone title positioning alone */
@media (max-width:650px){
  .mango-study-title > span,
  #authPage .mango-study-title > span,
  #welcomePage .mango-study-title > span,
  #resetPasswordPage .mango-study-title > span{
    position:static !important;
    top:auto !important;
  }
}

/* v163 - move desktop VCE much further right and a super tiny bit lower */
@media (min-width:651px){
  .mango-study-title::after,
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:-0.78em !important;
    top:1.19em !important;
  }
}

/* v164 - lower desktop VCE tag a bit more (down, not up) */
@media (min-width:651px){
  .mango-study-title::after,
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    top:1.34em !important;
  }
}

/* v165 - move desktop VCE further right and further down */
@media (min-width:651px){
  .mango-study-title::after,
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:-0.92em !important;
    top:1.50em !important;
  }
}

/* v166 - move desktop VCE even further right and further down */
@media (min-width:651px){
  .mango-study-title::after,
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:-1.08em !important;
    top:1.68em !important;
  }
}

/* v167 - move desktop VCE quite a bit further right */
@media (min-width:651px){
  .mango-study-title::after,
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:-1.34em !important;
  }
}

/* v168 - move desktop VCE quite a bit further right again */
@media (min-width:651px){
  .mango-study-title::after,
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:-1.62em !important;
  }
}

/* v169 - move desktop VCE a bit more to the right */
@media (min-width:651px){
  .mango-study-title::after,
  #authPage .mango-study-title::after,
  #welcomePage .mango-study-title::after,
  #resetPasswordPage .mango-study-title::after{
    right:-1.74em !important;
  }
}