*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,sans-serif;background:#f4f4f4;color:#222}
button,input,select{font:inherit}
button{cursor:pointer}
#app{min-height:100vh}
.setup{max-width:760px;margin:0 auto;padding:34px 24px}
.setup h1{text-align:center;font-size:30px;margin:5px 0 4px}
.subtitle{text-align:center;font-size:14px;color:#555;margin:0 0 24px}
.settings{background:#fff;border:1px solid #d5d5d5;border-radius:8px;padding:22px}
.settings h2{font-size:16px;margin:0 0 18px}
.form-grid{display:grid;grid-template-columns:180px 1fr;gap:12px 14px;align-items:center}
.form-grid label{font-weight:600}
input[type=text],input[type=number],select{width:280px;max-width:100%;height:36px;padding:6px 9px;border:1px solid #aaa;border-radius:4px;background:#fff}.range-inputs{display:flex;align-items:center;gap:8px}.range-inputs input{width:95px}.range-inputs span{font-weight:600;color:#555}
.ops{display:flex;gap:18px;flex-wrap:wrap}
.ops label{font-weight:normal}
.actions{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.primary{background:#2f6fad;color:#fff;border:1px solid #285f97;border-radius:5px;padding:9px 18px;font-weight:700}
.secondary{background:#eee;color:#222;border:1px solid #bbb;border-radius:5px;padding:9px 18px}
.note{font-size:12px;color:#666;margin-top:15px}
.test-shell{min-height:100vh;padding:14px 16px 18px}
.test-header{text-align:center;margin-bottom:8px}
.test-header h1{font-size:23px;margin:0 0 3px}
.test-header .student{font-size:13px;color:#000;font-weight:700;text-transform:uppercase}
.body{display:flex;gap:8px;max-width:1200px;margin:0 auto;align-items:stretch}
.controls{width:calc(150px * var(--mm-scale,1));flex:0 0 calc(150px * var(--mm-scale,1));display:flex;flex-direction:column;gap:calc(8px * var(--mm-scale,1));padding-top:calc(3px * var(--mm-scale,1))}
.controls button{width:100%;min-height:calc(38px * var(--mm-scale,1));padding:calc(9px * var(--mm-scale,1)) calc(18px * var(--mm-scale,1));font-size:clamp(10px,calc(14px * var(--mm-scale,1)),14px)}
.sheet-wrap{background:#fff;border:1px solid #ddd;border-radius:6px;flex:0 0 auto;overflow:hidden}
.sheet{--mm-scale:1;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) calc(200px * var(--mm-scale,1)) repeat(2,minmax(0,1fr));height:auto;min-height:0;padding:calc(49px * var(--mm-scale,1)) 8px calc(96px * var(--mm-scale,1));gap:0;overflow:visible}
.qcol{display:flex;flex-direction:column;justify-content:flex-start;gap:calc(8px * var(--mm-scale));padding:0;min-height:0}
.sheet > .qcol:nth-child(1) .question{margin-right:calc(4px * var(--mm-width-scale,1))}
.sheet > .qcol:nth-child(2) .question{margin-left:auto;margin-right:calc(4px * var(--mm-width-scale,1))}
/* The keypad column is inserted between question columns 2 and 3, so the third and fourth qcols are children 4 and 5. */
.sheet > .qcol:nth-child(4) .question{margin-left:calc(4px * var(--mm-width-scale,1));margin-right:calc(4px * var(--mm-width-scale,1))}
/* Keep a definite 5px visual gap between column 3 answer boxes and column 4 questions. */
.sheet > .qcol:nth-child(4){padding-left:calc(4px * var(--mm-width-scale,1));box-sizing:border-box}
.sheet > .qcol:nth-child(5) .question{margin-left:calc(4px * var(--mm-width-scale,1))}
.question-spacer{height:calc(32px * var(--mm-scale));flex:0 0 auto}
.blank-keypad-column{position:relative;background:transparent;display:flex;justify-content:center;height:calc(250px * var(--mm-scale,1))}
.controls .keypad-instructions{position:static;width:100%;box-sizing:border-box;padding:calc(5px * var(--mm-scale,1)) calc(7px * var(--mm-scale,1));border:1px solid #bbb;border-radius:4px;background:#f7f7f7;text-align:center;font-size:clamp(8px,calc(10px * var(--mm-scale,1)),10px);line-height:clamp(10px,calc(12px * var(--mm-scale,1)),12px);color:#555;margin-top:calc(4px * var(--mm-scale,1))}
.question{display:grid;grid-template-columns:calc(76px * var(--mm-width-scale,1)) calc(50px * var(--mm-width-scale,1));column-gap:calc(4px * var(--mm-width-scale,1));align-items:center;height:clamp(16px,calc(32px * var(--mm-scale)),32px);font-size:clamp(12px,calc(16px * var(--mm-scale)),16px);white-space:nowrap;width:calc(130px * var(--mm-width-scale,1))}
.question-text{width:100%;display:grid;grid-template-columns:calc(22px * var(--mm-width-scale,1)) calc(10px * var(--mm-width-scale,1)) calc(22px * var(--mm-width-scale,1)) calc(10px * var(--mm-width-scale,1));column-gap:calc(4px * var(--mm-width-scale,1));align-items:center;text-align:left;min-width:0}
.question-text .operand:first-child{text-align:right}.question-text .operand:nth-child(3){text-align:left}
.question-text .operator{text-align:center}
.question-text .equals{text-align:left}
.answer{width:100%;height:clamp(16px,calc(29px * var(--mm-scale)),29px);text-align:center;font-size:clamp(12px,calc(16px * var(--mm-scale)),16px);border:1px solid #999;border-radius:3px;background:#fff;outline:none}
.answer:focus{border:2px solid #4c7fb3}
.answer.correct{background:#c6efce}
.answer.incorrect{background:#ffc7ce}
.keypad-area{position:relative;width:100%;min-width:0}
.keypad{position:absolute;left:50%;top:0;transform:translateX(-50%);width:calc(166px * var(--mm-scale));height:calc(250px * var(--mm-scale));display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(5,1fr);gap:calc(5px * var(--mm-scale))}
.key{border:1px solid #aaa;border-radius:5px;font-size:clamp(11px,calc(18px * var(--mm-scale)),18px);font-weight:700;color:#333;min-width:0}
.k7{background:#DDEBF7}.k8{background:#E8F3E1}.k9{background:#F7E5E5}.k4{background:#E9E2F5}.k5{background:#FFF0D2}.k6{background:#DDF2F0}.k1{background:#F1E6D8}.k2{background:#E5EEF8}.k3{background:#F2E8F3}.k0{background:#B58BE8;color:#fff;border-color:#8E63C7}.back{background:#F8DCDC}.enter{background:#DDEEDB}.clear{background:#F7E6C8}
.controls .timer-panel{position:static;left:auto;bottom:auto;transform:none;width:100%;height:calc(70px * var(--mm-scale));text-align:center}
.timer-state{height:calc(17px * var(--mm-scale));font-size:clamp(8px,calc(12px * var(--mm-scale)),12px);font-weight:700;color:#555}
.timer{font-size:clamp(10px,calc(19px * var(--mm-scale)),19px);font-weight:700;height:calc(25px * var(--mm-scale));line-height:calc(25px * var(--mm-scale))}
.timer-toggle{height:calc(27px * var(--mm-scale));padding:2px 8px;font-size:clamp(8px,calc(11px * var(--mm-scale)),11px)}
.completion-time{position:absolute;left:50%;bottom:calc(42px * var(--mm-scale,1));transform:translateX(-50%);min-width:calc(170px * var(--mm-scale,1));text-align:center;font-size:clamp(11px,calc(16px * var(--mm-scale,1)),16px);font-weight:700;color:#333;visibility:hidden;opacity:0;white-space:nowrap}.completion-time.visible{visibility:visible;opacity:1}.status{text-align:center;font-size:12px;color:#666;margin:7px 0 0;min-height:16px}
.worksheet-actions{display:flex;justify-content:center;align-items:center;gap:calc(18px * var(--mm-scale,1));padding:calc(14px * var(--mm-scale,1)) calc(12px * var(--mm-scale,1)) calc(16px * var(--mm-scale,1));width:100%;}
.worksheet-actions button{width:calc(150px * var(--mm-scale,1));min-height:calc(38px * var(--mm-scale,1));padding:calc(9px * var(--mm-scale,1)) calc(12px * var(--mm-scale,1));font-size:clamp(10px,calc(14px * var(--mm-scale,1)),14px);}

.results{width:330px;background:#fff;border:1px solid #ccc;border-radius:7px;padding:20px}
.results h2{text-align:center;margin:0 0 15px}
.result-score{text-align:center;font-size:32px;font-weight:700;margin:8px 0 16px}
.result-table{width:100%;border-collapse:collapse;font-size:14px}
.result-table td{padding:7px 4px;border-bottom:1px solid #eee}.result-table td:last-child{text-align:right;font-weight:700}
.legend{margin:16px 0;font-size:13px}.legend div{margin:7px 0;padding:7px;border-radius:3px}.lg-c{background:#c6efce}.lg-i{background:#ffc7ce}.lg-u{background:#fff;border:1px solid #ddd}
.results-actions{display:flex;gap:8px;margin-top:15px}.results-actions button{flex:1}
.history{max-width:820px;margin:30px auto;padding:0 20px 30px}.history h2{text-align:center}.history table{width:100%;border-collapse:collapse;background:#fff;font-size:13px}.history th,.history td{padding:8px;border:1px solid #ddd;text-align:left}.history th{background:#eee}.history .empty{text-align:center;color:#666;padding:25px}
.privacy{font-size:12px;color:#666;margin-top:12px}
@media(max-width:850px){.body{display:block}.controls{width:100%;flex-direction:row;flex-wrap:wrap;margin-bottom:8px}.controls button{width:auto;flex:1 1 120px}.sheet{grid-template-columns:repeat(2,minmax(0,1fr)) calc(150px * var(--mm-scale,1)) repeat(2,minmax(0,1fr));padding-left:2px;padding-right:2px}.keypad{width:126px;height:220px}}
@media (pointer:coarse) and (min-width:651px) and (max-width:1400px) and (orientation:landscape){.body{display:flex}.controls{width:118px;flex:0 0 118px;flex-direction:column;flex-wrap:nowrap;margin-bottom:0}.controls button{width:100%;flex:0 0 auto}.sheet{grid-template-columns:repeat(2,minmax(0,1fr)) calc(150px * var(--mm-scale,1)) repeat(2,minmax(0,1fr));padding-left:2px;padding-right:2px}}
@media(max-width:650px){.test-shell{padding:10px 5px}.sheet{grid-template-columns:1fr 1fr;gap:0;min-height:auto}.blank-keypad-column{grid-column:1 / -1;height:300px;order:3}.qcol{padding:0 3px}.question{width:calc(130px * var(--mm-width-scale,1))}.question-text{width:100%}.answer{width:100%}.keypad{width:166px;height:250px}.form-grid{grid-template-columns:1fr}.setup{padding:20px 12px}}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.overlay .results{box-shadow:0 8px 30px rgba(0,0,0,.18)}

#auth{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-box{width:360px;max-width:100%;background:#fff;border:1px solid #d5d5d5;border-radius:8px;padding:24px;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.auth-box h1{text-align:center;font-size:26px;margin:0 0 6px}
.auth-box .auth-sub{text-align:center;color:#666;font-size:13px;margin:0 0 20px}
.auth-box label{display:block;font-weight:600;font-size:14px;margin:12px 0 5px}
.auth-box input{width:100%;height:38px;padding:7px 9px;border:1px solid #aaa;border-radius:4px}
.auth-buttons{display:flex;gap:8px;margin-top:18px}
.auth-buttons button{flex:1}
.auth-msg{min-height:18px;font-size:13px;color:#a33;margin:12px 0 0}

/* Authentication visibility and browser-password-manager avoidance */
#auth[hidden], #app[hidden] { display: none !important; }
#auth-pass { -webkit-text-security: disc; }

/* Login must be the only visible screen until authentication succeeds. */
body.auth-only #app { display:none !important; }
body.auth-only #auth { display:flex !important; }
body.auth-only.authenticated #auth { display:none !important; }
body.auth-only.authenticated #app { display:block !important; }
.auth-screen { position:fixed; inset:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:#f4f4f4; z-index:99999; }
.auth-screen.is-hidden { display:none !important; }

#mm-user, #mm-code { -webkit-appearance:none; }

/* KEYPAD LAYOUT: three regular columns; ENTER is two buttons wide; BACK and CLEAR are 1.5 buttons wide. */
.key.k7,.key.k8,.key.k9,.key.k4,.key.k5,.key.k6,.key.k1,.key.k2,.key.k3,.key.k0{grid-column:span 2;}
.key.enter{grid-column:span 4;}
.key.back,.key.clear{grid-column:span 3;}
.key.k7{grid-row:1}.key.k8{grid-row:1}.key.k9{grid-row:1}
.key.k4{grid-row:2}.key.k5{grid-row:2}.key.k6{grid-row:2}
.key.k1{grid-row:3}.key.k2{grid-row:3}.key.k3{grid-row:3}
.key.k0{grid-row:4;grid-column:span 2}.key.enter{grid-row:4}
.key.back{grid-row:5}.key.clear{grid-row:5}
/* CLEAR is the full-width bottom row of the keypad. */
.key.clear{font-size:clamp(9px,calc(15px * var(--mm-scale)),15px) !important;font-weight:700 !important;}

/* FIX 8: show/hide button sits to the right of the password box */
.password-input-row{width:100%;display:flex;align-items:center;gap:8px;}
.password-input-row #mm-code{width:calc(100% - 58px);flex:1;}
.password-toggle{width:50px;height:38px;flex:0 0 50px;border:1px solid #aaa;border-radius:4px;background:#eee;color:#222;cursor:pointer;font-size:11px;font-weight:700;line-height:36px;padding:0;text-align:center;}
.password-toggle:hover{background:#e2e2e2;}
.password-toggle:focus{outline:2px solid #777;border-radius:4px;}

/* TABLET KEYPAD SIZE FIX */
@media (pointer: coarse) and (min-width: 651px) and (max-width: 1400px) {
  .keypad{width:calc(118px * var(--mm-scale));height:calc(198px * var(--mm-scale));gap:calc(4px * var(--mm-scale))}
}


/* TABLET LOGIN: compact horizontal layout at the top so the Android keyboard does not cover the form */
@media (pointer: coarse) and (min-width: 651px) and (max-width: 1400px) {
  #auth.auth-screen{
    position:absolute;
    top:0;
    left:0;
    right:0;
    min-height:0;
    height:auto;
    align-items:flex-start;
    justify-content:center;
    padding:8px 12px;
  }
  #auth .auth-box{
    width:100%;
    max-width:980px;
    padding:10px 14px;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;
    box-shadow:0 1px 5px rgba(0,0,0,.08);
  }
  #auth .auth-box h1{
    font-size:20px;
    margin:0;
    white-space:nowrap;
  }
  #auth .auth-box .auth-sub{
    display:none;
  }
  #auth .auth-box > label{
    margin:0;
    white-space:nowrap;
    font-size:12px;
  }
  #auth .auth-box > input,
  #auth .auth-box .password-input-row{
    width:150px;
    flex:0 0 150px;
  }
  #auth .password-input-row #mm-code{width:92px;flex:1;}
  #auth .password-toggle{width:50px;flex:0 0 50px;}
  #auth .auth-buttons{
    display:flex;
    gap:6px;
    margin:0;
    flex:0 0 auto;
  }
  #auth .auth-buttons button{
    flex:0 0 auto;
    padding:8px 12px;
    white-space:nowrap;
  }
  #auth .auth-msg{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    margin:2px 12px 0;
    text-align:center;
  }
}


/* Login help */
.login-help-button{display:block;width:100%;margin-top:10px;padding:8px 12px;border:1px solid #aaa;border-radius:4px;background:#f7f7f7;color:#444;font-weight:600;font-size:12px;cursor:pointer}
.login-help-button:hover{background:#eee}
.login-help-modal{display:none;position:fixed;inset:0;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.42);z-index:100000}
.login-help-modal.is-open{display:flex}
.login-help-dialog{position:relative;width:390px;max-width:100%;box-sizing:border-box;background:#fff;border:1px solid #ccc;border-radius:8px;padding:24px;box-shadow:0 4px 18px rgba(0,0,0,.2);text-align:center}
.login-help-dialog h2{margin:0 0 12px;font-size:21px}
.login-help-dialog p{margin:0 0 18px;line-height:1.5;font-size:14px;color:#444}
.login-help-dialog a{color:#1769aa;text-decoration:underline}
.login-help-dialog .primary{min-width:90px}
.login-help-close{position:absolute;top:6px;right:9px;border:0;background:transparent;color:#666;font-size:26px;line-height:1;cursor:pointer}

/* Tablet landscape: keep all four equation columns together and place a larger keypad on the right. */
@media (pointer: coarse) and (min-width: 651px) and (max-width: 1400px) and (orientation: landscape){
  .sheet{
    grid-template-columns:repeat(4,minmax(0,1fr)) calc(360px * var(--mm-scale,1));
    align-items:start;
  }
  .sheet > .qcol:nth-child(1){grid-column:1;grid-row:1}
  .sheet > .qcol:nth-child(2){grid-column:2;grid-row:1}
  .sheet > .blank-keypad-column{grid-column:5;grid-row:1}
  .sheet > .qcol:nth-child(4){grid-column:3;grid-row:1}
  .sheet > .qcol:nth-child(5){grid-column:4;grid-row:1}
  .sheet > .qcol:nth-child(2) .question{margin-left:0;margin-right:calc(4px * var(--mm-width-scale,1))}
  .sheet > .qcol:nth-child(4) .question{margin-left:0;margin-right:calc(4px * var(--mm-width-scale,1))}
  .sheet > .qcol:nth-child(5) .question{margin-left:0}
  .sheet > .qcol:nth-child(4){padding-left:0}
  .keypad{width:calc(340px * var(--mm-scale,1));height:calc(572px * var(--mm-scale,1))}
  .key{font-size:clamp(16px,calc(28px * var(--mm-scale,1)),28px)}
  .key.clear{font-size:clamp(14px,calc(24px * var(--mm-scale,1)),24px) !important}
  .timer-panel{width:calc(340px * var(--mm-scale,1))}
}

/* Stop/Pause controls live directly beneath the keypad. */
.keypad{position:relative;left:auto;top:auto;transform:none;margin:0 auto}
.blank-keypad-column{height:auto;align-items:flex-start}
.keypad-area{display:flex;flex-direction:column;align-items:center;width:100%}
.keypad-actions{width:calc(166px * var(--mm-scale,1));display:flex;flex-direction:column;gap:calc(5px * var(--mm-scale,1));margin-top:calc(6px * var(--mm-scale,1))}
.keypad-actions button{width:100%;min-height:calc(38px * var(--mm-scale,1));padding:calc(8px * var(--mm-scale,1)) calc(10px * var(--mm-scale,1));font-size:clamp(10px,calc(14px * var(--mm-scale,1)),14px);box-sizing:border-box}
.sheet{padding-bottom:calc(18px * var(--mm-scale,1))}

@media (pointer: coarse) and (min-width:651px) and (max-width:1400px) and (orientation:landscape){
  /* Tablet only: keep the keypad width/overall visual size, but shorten its buttons
     enough to place PAUSE and STOP & GRADE directly underneath. */
  .keypad{width:calc(340px * var(--mm-scale,1));height:calc(400px * var(--mm-scale,1));gap:calc(5px * var(--mm-scale,1))}
  .keypad-actions{width:calc(340px * var(--mm-scale,1));gap:calc(5px * var(--mm-scale,1));margin-top:calc(6px * var(--mm-scale,1))}
  .keypad-actions button{width:calc(340px * var(--mm-scale,1)) !important;height:calc(76px * var(--mm-scale,1)) !important;min-height:calc(76px * var(--mm-scale,1)) !important;max-height:calc(76px * var(--mm-scale,1)) !important;flex:0 0 calc(76px * var(--mm-scale,1)) !important;box-sizing:border-box;font-size:clamp(14px,calc(22px * var(--mm-scale,1)),22px);padding:0 calc(10px * var(--mm-scale,1)) !important;line-height:1.1}
  .blank-keypad-column{height:auto;align-self:start}
}

/* Button color update: make ZERO clearly distinct from ENTER and STOP & GRADE dark green. */
#stop{background:#1F5D3A !important;color:#fff !important;border-color:#17472C !important;}

/* Individual Score History delete button */
.history-delete{background:#f4dddd;color:#7a1f1f;border:1px solid #c99;border-radius:4px;padding:5px 9px;font-size:11px;font-weight:700;white-space:nowrap}