/* ===========================================================
   Prisma SSE Trainer — Pearson VUE-style exam simulator
   =========================================================== */
:root{
  --ink:#15232b;
  --ink-soft:#42525c;
  --line:#d7dee3;
  --line-soft:#e8edf0;
  --bg:#eef2f5;
  --paper:#ffffff;
  --bar:#0b2b3a;          /* deep slate header, Pearson-ish */
  --bar-2:#103847;
  --accent:#f04e23;       /* Palo Alto orange */
  --accent-d:#cf3f18;
  --blue:#1d6fb8;
  --blue-d:#155a96;
  --ok:#1f9d57;
  --ok-bg:#e7f6ed;
  --bad:#d23b30;
  --bad-bg:#fbeae8;
  --warn:#e8a317;
  --mark:#b25cd6;
  --shadow:0 1px 3px rgba(16,40,55,.12),0 6px 22px rgba(16,40,55,.08);
  --radius:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;line-height:1.5;
  overflow:hidden;
}
button{font-family:inherit;}
a{color:var(--blue);}

/* screens */
.screen{position:fixed;inset:0;display:none;flex-direction:column;overflow:auto;}
.screen.is-active{display:flex;}

/* ---------- buttons ---------- */
.btn{
  border:1px solid transparent;border-radius:8px;padding:.62rem 1.1rem;font-size:.95rem;
  font-weight:600;cursor:pointer;background:#e9eef2;color:var(--ink);transition:.12s;white-space:nowrap;
}
.btn:hover{filter:brightness(.97);}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-d);filter:none;}
.btn-outline{background:#fff;border-color:var(--line);color:var(--ink);}
.btn-ghost{background:transparent;color:var(--ink-soft);}
.btn-ghost:hover{background:#e3e9ee;}
.btn-danger-ghost{background:transparent;color:var(--bad);border-color:transparent;}
.btn-danger-ghost:hover{background:var(--bad-bg);}
.btn-tiny{padding:.32rem .7rem;font-size:.82rem;}
.hidden{display:none !important;}

/* =========================================================
   HOME
   ========================================================= */
.home-wrap{max-width:980px;margin:0 auto;padding:2.4rem 1.5rem 3rem;width:100%;}
.home-hero{margin-bottom:1.4rem;}
.brand{display:flex;align-items:center;gap:1rem;}
.brand-prism{width:54px;height:54px;flex:0 0 auto;}
.brand h1{margin:0;font-size:1.85rem;letter-spacing:-.5px;}
.brand h1 span{color:var(--accent);}
.brand-sub{margin:.15rem 0 0;color:var(--ink-soft);font-size:.92rem;}

.exam-facts{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.2rem 0 1.6rem;}
.fact{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.55rem .9rem;display:flex;flex-direction:column;min-width:96px;box-shadow:var(--shadow);}
.fact-k{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-soft);}
.fact-v{font-size:1.05rem;font-weight:700;}

.resume-banner{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:linear-gradient(90deg,#fff,#fff6f2);border:1px solid #f4c4b3;border-left:4px solid var(--accent);
  border-radius:10px;padding:.9rem 1.1rem;margin-bottom:1.4rem;box-shadow:var(--shadow);}
.resume-banner span{display:block;color:var(--ink-soft);font-size:.88rem;margin-top:.1rem;}
.resume-actions{display:flex;gap:.5rem;}

.mode-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;}
.mode-card{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem;cursor:pointer;box-shadow:var(--shadow);transition:.15s;color:inherit;}
.mode-card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 26px rgba(240,78,35,.14);}
.mode-icon{font-size:1.6rem;}
.mode-card h3{margin:.5rem 0 .3rem;font-size:1.12rem;}
.mode-card p{margin:0;color:var(--ink-soft);font-size:.9rem;}
.mode-go{display:inline-block;margin-top:.8rem;color:var(--accent);font-weight:700;font-size:.9rem;}
.mode-card-hard{border-color:#f0b8a8;background:linear-gradient(180deg,#fff,#fff5f1);}
.mode-card-hard:hover{border-color:var(--accent);}
.mode-card-hard h3{color:var(--accent-d);}
.mode-card-et{border-color:#a9c7e0;background:linear-gradient(180deg,#fff,#f2f7fb);}
.mode-card-et:hover{border-color:var(--blue);}
.mode-card-et h3{color:var(--blue-d);}
.mode-card-refresh{border-color:#a9dcd6;background:linear-gradient(180deg,#fff,#f0faf8);}
.mode-card-refresh:hover{border-color:#11998e;}
.mode-card-refresh h3{color:#0c7d72;}
.mode-card-cheat{border-color:#bfe3c6;background:linear-gradient(180deg,#fff,#f3faf4);}
.mode-card-cheat:hover{border-color:var(--ok);}
.mode-card-cheat h3{color:#1f7a44;}

/* Cheatsheet reference cards */
.cheat-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1.1rem 1.4rem;margin-bottom:1.1rem;box-shadow:var(--shadow);}
.cheat-title{margin:0 0 .85rem;font-size:1.1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;border-bottom:1px solid var(--line);padding-bottom:.55rem;}
.cheat-weight{font-size:.72rem;font-weight:700;background:#eef4ee;color:#1f7a44;padding:.18rem .5rem;border-radius:6px;white-space:nowrap;}
.cheat-group{margin:.85rem 0;}
.cheat-group h4{margin:0 0 .35rem;font-size:.9rem;color:var(--accent-d);letter-spacing:.01em;}
.cheat-group ul{margin:0;padding-left:1.15rem;}
.cheat-group li{margin:.28rem 0;font-size:.9rem;line-height:1.5;color:var(--ink);}
.cheat-group code{background:#eef2f5;padding:.05rem .3rem;border-radius:4px;font-size:.86em;}

/* Acronyms glossary */
.mode-card-acro{border-color:#d9c2e6;background:linear-gradient(180deg,#fff,#f8f4fb);}
.mode-card-acro:hover{border-color:#8a4fbf;}
.mode-card-acro h3{color:#6d3a99;}
.acro-controls{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;background:var(--bg);padding:.4rem 0 .8rem;}
.acro-search{flex:1 1 220px;min-width:0;padding:.55rem .8rem;border:1px solid var(--line);border-radius:9px;font-size:.95rem;background:var(--paper);color:var(--ink);}
.acro-domain{padding:.55rem .6rem;border:1px solid var(--line);border-radius:9px;font-size:.9rem;background:var(--paper);color:var(--ink);}
.acro-count{font-size:.8rem;font-weight:700;color:var(--ink-soft);white-space:nowrap;}
.acro-list{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.acro-row{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:.5rem .75rem;}
.acro-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem;}
.acro-a{font-size:.98rem;color:var(--ink);}
.acro-f{font-size:.9rem;color:var(--ink);flex:1 1 auto;}
.acro-tag{font-size:.68rem;font-weight:700;background:#eef2f5;color:var(--ink-soft);padding:.1rem .4rem;border-radius:5px;white-space:nowrap;}
.acro-n{font-size:.82rem;color:var(--ink-soft);margin-top:.15rem;}
@media (max-width:760px){ .acro-list{grid-template-columns:1fr;} }

/* Flashcards */
.mode-card-cards{border-color:#f2cf9e;background:linear-gradient(180deg,#fff,#fdf7ee);}
.mode-card-cards:hover{border-color:#d98a1f;}
.mode-card-cards h3{color:#a8650f;}
.btn-ok{background:var(--ok);color:#fff;border:1px solid var(--ok);}
.btn-ok:hover{filter:brightness(.94);}
.cards-controls{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;justify-content:center;margin-bottom:.4rem;}
.card-stage{display:flex;justify-content:center;padding:1.4rem 0;}
.flashcard{position:relative;width:100%;max-width:580px;min-height:240px;cursor:pointer;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:2.4rem 1.7rem 2rem;text-align:center;user-select:none;}
.flashcard:hover{border-color:#d98a1f;}
.flashcard-face{width:100%;animation:cardpop .22s ease;}
@keyframes cardpop{from{opacity:.15;transform:scale(.97);}to{opacity:1;transform:none;}}
.flashcard:not(.flipped) .flashcard-back{display:none;}
.flashcard.flipped .flashcard-front{display:none;}
.flashcard-front span{font-size:1.55rem;font-weight:800;color:var(--ink);line-height:1.3;}
.flashcard-back span{font-size:1.12rem;line-height:1.6;color:var(--ink);}
.flashcard-hint{position:absolute;bottom:.7rem;left:0;right:0;font-size:.72rem;color:var(--ink-soft);}
.flashcard.flipped .flashcard-hint{display:none;}
.flashcard-tag{position:absolute;top:.75rem;right:.9rem;font-size:.68rem;font-weight:700;background:#eef2f5;color:var(--ink-soft);padding:.12rem .45rem;border-radius:5px;}
.cards-actions{display:flex;justify-content:center;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.3rem;}
.cards-summary{text-align:center;padding:2.4rem 1rem;}
.cards-done-big{font-size:3rem;font-weight:800;color:var(--ok);line-height:1;}
.cards-done-sub{font-size:.95rem;color:var(--ink-soft);margin-top:.4rem;}

.config-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem;margin-top:1.2rem;box-shadow:var(--shadow);}
.config-panel h3{margin:0 0 1rem;}
.config-domains{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.dom-chip{display:flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:20px;padding:.35rem .8rem;cursor:pointer;font-size:.88rem;user-select:none;}
.dom-chip input{accent-color:var(--accent);}
.dom-chip.on{background:#fff3ee;border-color:var(--accent);}
.config-row{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin-bottom:1.1rem;}
.config-row label{font-size:.9rem;color:var(--ink-soft);display:flex;flex-direction:column;gap:.25rem;}
.config-row select{padding:.4rem .6rem;border:1px solid var(--line);border-radius:6px;font-size:.95rem;}
.check{flex-direction:row !important;align-items:center;gap:.45rem !important;color:var(--ink) !important;cursor:pointer;}
.config-actions{display:flex;gap:.6rem;}

.history{margin-top:2rem;}
.history-head{display:flex;justify-content:space-between;align-items:center;}
.history-head h3{margin:0;}
.history-list{margin-top:.7rem;display:flex;flex-direction:column;gap:.5rem;}
.hist-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:.6rem .9rem;font-size:.9rem;}
.hist-row .h-pass{color:var(--ok);font-weight:700;}
.hist-row .h-fail{color:var(--bad);font-weight:700;}
.hist-empty{color:var(--ink-soft);font-size:.9rem;font-style:italic;}

.home-foot{margin-top:2.2rem;border-top:1px solid var(--line);padding-top:1rem;}
.home-foot p{font-size:.82rem;color:var(--ink-soft);margin:0;}

/* =========================================================
   TUTORIAL
   ========================================================= */
.tut-wrap{max-width:720px;margin:auto;padding:2.5rem 1.5rem;width:100%;}
.tut-wrap h2{margin-top:0;}
.tut-lead{color:var(--ink-soft);}
.tut-list{line-height:1.8;padding-left:1.2rem;}
.tut-agree{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem;margin:1.4rem 0;box-shadow:var(--shadow);}
.nda{font-size:.86rem;color:var(--ink-soft);margin-top:0;}
.tut-actions{display:flex;gap:.6rem;}

/* =========================================================
   EXAM RUNNER
   ========================================================= */
#screen-exam,#screen-review{background:var(--bg);}
.exam-bar{display:flex;justify-content:space-between;align-items:center;background:var(--bar);
  color:#eaf2f6;padding:.7rem 1.1rem;flex:0 0 auto;
  padding-top:max(.7rem,env(safe-area-inset-top));}
.exam-name{font-weight:700;font-size:.98rem;letter-spacing:.2px;}
.exam-bar-right{display:flex;align-items:center;gap:1.2rem;}
.qcounter{font-size:.92rem;opacity:.92;}
.clock{display:flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.1);padding:.3rem .7rem;border-radius:7px;font-variant-numeric:tabular-nums;font-weight:700;}
.clock-ico{width:18px;height:18px;}
.clock.low{background:var(--bad);color:#fff;animation:pulse 1s infinite;}
@keyframes pulse{50%{opacity:.6;}}

.exam-subbar{display:flex;justify-content:space-between;align-items:center;background:var(--bar-2);color:#cfe0e8;padding:.4rem 1.1rem;flex:0 0 auto;font-size:.88rem;}
.mark-review{display:flex;align-items:center;gap:.45rem;cursor:pointer;user-select:none;}
.mark-review input{accent-color:var(--accent);width:16px;height:16px;}
.domain-tag{background:rgba(255,255,255,.12);padding:.2rem .6rem;border-radius:5px;font-size:.78rem;}

.exam-body{flex:1 1 auto;overflow:auto;padding:1.6rem 1.1rem;}
.qcard{max-width:860px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1.6rem 1.7rem;box-shadow:var(--shadow);}
.exhibit-row{margin-bottom:1rem;}
.btn-exhibit{background:#eef4f8;border:1px solid var(--line);color:var(--blue-d);border-radius:7px;padding:.45rem .9rem;font-weight:600;cursor:pointer;font-size:.88rem;}
.qstem{font-size:1.12rem;line-height:1.6;color:var(--ink);white-space:pre-wrap;}
.qstem code{background:#eef2f5;padding:.05rem .35rem;border-radius:4px;font-size:.92em;}
.choose-hint{color:var(--accent-d);font-weight:700;font-size:.9rem;margin:.7rem 0 0;}
.scenario{background:#eef4f8;border-left:4px solid var(--blue);border-radius:8px;padding:.85rem 1.05rem;margin-bottom:1.1rem;font-size:.9rem;color:#3a4a54;white-space:pre-line;line-height:1.5;}
.scenario-label{display:block;font-size:.68rem;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--blue-d);margin-bottom:.45rem;}
.exhibits{margin:.55rem 0 .1rem;display:flex;flex-direction:column;gap:.55rem;}
.exhibit-img{max-width:100%;height:auto;border:1px solid rgba(0,0,0,.14);border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.ar-scenario{background:#f3f7fa;border-left:3px solid var(--blue);border-radius:6px;padding:.6rem .8rem;margin-bottom:.6rem;font-size:.82rem;color:#54636d;white-space:pre-line;}

.options{margin-top:1.2rem;display:flex;flex-direction:column;gap:.6rem;}
.opt{display:flex;align-items:flex-start;gap:.7rem;border:1.5px solid var(--line);border-radius:9px;padding:.8rem .9rem;cursor:pointer;transition:.12s;background:#fff;}
.opt:hover{border-color:#9fb6c2;background:#fbfdfe;}
.opt.sel{border-color:var(--accent);background:#fff5f1;}
.opt.struck .opt-text{text-decoration:line-through;opacity:.5;}
.opt-control{flex:0 0 auto;margin-top:.1rem;}
.opt-control input{width:18px;height:18px;accent-color:var(--accent);}
.opt-letter{font-weight:700;color:var(--ink-soft);flex:0 0 auto;width:1.2rem;}
.opt-text{flex:1;}
.opt-elim{flex:0 0 auto;border:none;background:transparent;color:#b9c4cb;font-size:1rem;cursor:pointer;line-height:1;padding:.1rem .3rem;border-radius:4px;}
.opt-elim:hover{color:var(--bad);background:var(--bad-bg);}
/* graded states (practice + answer review) */
.opt.correct{border-color:var(--ok);background:var(--ok-bg);}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg);}
.opt .tick{margin-left:auto;font-weight:800;}
.opt.correct .tick{color:var(--ok);}
.opt.wrong .tick{color:var(--bad);}

.feedback{margin-top:1.2rem;border-radius:9px;padding:1rem 1.1rem;font-size:.94rem;}
.feedback.good{background:var(--ok-bg);border:1px solid #b6e2c6;}
.feedback.bad{background:var(--bad-bg);border:1px solid #f3c4bf;}
.feedback h4{margin:0 0 .4rem;font-size:.95rem;}
.feedback .ref{display:block;margin-top:.6rem;font-size:.82rem;color:var(--ink-soft);}

.exam-foot{display:flex;justify-content:space-between;align-items:center;background:var(--paper);
  border-top:1px solid var(--line);padding:.8rem 1.1rem;flex:0 0 auto;gap:.6rem;
  padding-bottom:max(.8rem,env(safe-area-inset-bottom));}
.foot-left,.foot-right{display:flex;gap:.6rem;}

/* =========================================================
   REVIEW GRID
   ========================================================= */
.review-body{flex:1 1 auto;overflow:auto;padding:1.6rem 1.1rem;max-width:900px;margin:0 auto;width:100%;}
.review-legend{display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:1rem;font-size:.9rem;color:var(--ink-soft);}
.dot{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:.35rem;vertical-align:-1px;}
.dot-answered{background:var(--ok);}
.dot-incomplete{background:#fff;border:1.5px solid var(--line);}
.dot-marked{background:var(--mark);}
.review-filters{display:flex;gap:.5rem;margin-bottom:1.2rem;}
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:.55rem;}
.rev-cell{aspect-ratio:1;border:1.5px solid var(--line);border-radius:8px;background:#fff;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;font-size:.95rem;transition:.12s;}
.rev-cell:hover{border-color:var(--accent);}
.rev-cell.answered{background:var(--ok-bg);border-color:#a9ddbb;}
.rev-cell.marked::after{content:"";position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--mark);}

/* =========================================================
   RESULTS
   ========================================================= */
.results-wrap{max-width:860px;margin:0 auto;padding:2.4rem 1.5rem 3rem;width:100%;}
.score-card{display:flex;align-items:center;gap:2rem;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:1.8rem;box-shadow:var(--shadow);flex-wrap:wrap;}
.score-ring{--p:0;width:150px;height:150px;border-radius:50%;flex:0 0 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#fff;position:relative;
  background:conic-gradient(var(--ring-c,var(--accent)) calc(var(--p)*1%),#e3e9ee 0);}
.score-ring::before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--bar);}
.score-val{position:relative;font-size:2.5rem;font-weight:800;line-height:1;}
.score-scale{position:relative;font-size:.8rem;opacity:.8;}
.score-meta .verdict{font-size:1.6rem;font-weight:800;}
.score-meta .verdict.pass{color:var(--ok);}
.score-meta .verdict.fail{color:var(--bad);}
.score-meta .raw,.score-meta .elapsed{color:var(--ink-soft);margin-top:.3rem;}

.domain-breakdown{margin-top:2rem;}
.domain-breakdown h3{margin-bottom:1rem;}
.dom-bar{margin-bottom:1rem;}
.dom-bar-head{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.3rem;}
.dom-bar-track{height:12px;background:#e3e9ee;border-radius:7px;overflow:hidden;}
.dom-bar-fill{height:100%;border-radius:7px;background:var(--accent);}
.dom-bar-fill.weak{background:var(--bad);}
.dom-bar-fill.ok{background:var(--ok);}

.results-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2rem;}

.answer-review{margin-top:2rem;display:flex;flex-direction:column;gap:1rem;}
.ar-item{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:1.2rem 1.3rem;box-shadow:var(--shadow);}
.ar-q{font-weight:600;margin-bottom:.5rem;}
.ar-badge{display:inline-block;font-size:.74rem;font-weight:700;padding:.12rem .5rem;border-radius:5px;margin-left:.5rem;vertical-align:1px;}
.ar-badge.ok{background:var(--ok-bg);color:var(--ok);}
.ar-badge.bad{background:var(--bad-bg);color:var(--bad);}
.ar-opt{padding:.35rem .6rem;border-radius:6px;margin:.2rem 0;font-size:.92rem;}
.ar-opt.correct{background:var(--ok-bg);}
.ar-opt.chosen-wrong{background:var(--bad-bg);}
.ar-exp{margin-top:.7rem;font-size:.9rem;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:.7rem;}
.ar-exp .ref{display:block;margin-top:.4rem;font-size:.8rem;}

/* =========================================================
   MODALS
   ========================================================= */
.modal-backdrop{position:fixed;inset:0;background:rgba(10,25,33,.55);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem;}
.modal{background:#fff;border-radius:12px;padding:1.5rem 1.6rem;max-width:440px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);}
.modal-wide{max-width:760px;}
.modal h3{margin:0 0 .7rem;}
.modal-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.3rem;}
.exhibit-content{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;background:#f5f8fa;border:1px solid var(--line);border-radius:8px;padding:1rem;white-space:pre-wrap;overflow:auto;max-height:60vh;}
.exhibit-content img{max-width:100%;}

/* responsive */
@media (max-width:640px){
  .brand h1{font-size:1.45rem;}
  .qcard{padding:1.1rem 1rem;}
  .qstem{font-size:1.04rem;}
  .exam-name{font-size:.92rem;}
  .en-long{display:none;}              /* show just "SSE-Engineer" on phones */
  .exam-bar-right{gap:.6rem;}
  .qcounter{font-size:.8rem;}
  .score-card{justify-content:center;text-align:center;}
  /* two-row footer so navigation never overflows off-screen */
  .exam-foot{flex-direction:column-reverse;align-items:stretch;gap:.5rem;}
  .foot-left,.foot-right{justify-content:space-between;gap:.5rem;}
  .foot-right .btn{flex:1;}
  .foot-left .btn,.foot-right .btn{padding:.6rem .7rem;font-size:.9rem;}
}