/* IndoGerman dMAT Mock — front-end (scoped to .dmatx) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800&display=swap');
.dmatx,.dmatx *,.dmatx *::before,.dmatx *::after{margin:0;padding:0;box-sizing:border-box;}
.dmatx{--red:#b01e24;--red-dk:#7d1216;--peach:#fadfce;--peach-sn:#fdf1e9;--gold:#e0a13a;--ink:#241f1f;--muted:#6d6a68;--line:#ece5df;--green:#2e7d43;--shadow:0 10px 30px rgba(60,20,20,.09);--shadow-sm:0 5px 14px rgba(60,20,20,.07);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);line-height:1.6;font-size:16px;}
.dmatx h1,.dmatx h2,.dmatx h3,.dmatx h4{font-family:'Poppins','Inter',sans-serif;line-height:1.2;color:var(--ink);}
.dmatx a{color:var(--red);text-decoration:none;} .dmatx a:hover{text-decoration:underline;}
.dmatx .dmat-loading{padding:40px;text-align:center;color:var(--muted);}
.dmatx .wrap{max-width:900px;margin:0 auto;}
.dmatx .card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:26px;margin-bottom:20px;}
.dmatx .kicker{display:inline-block;font-family:'Poppins',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:2px;text-transform:uppercase;color:var(--red);background:var(--peach);padding:5px 13px;border-radius:30px;margin-bottom:12px;}
.dmatx h2.t{font-size:1.5rem;margin-bottom:6px;} .dmatx h2.t .em{color:var(--red);}
.dmatx .lead{color:var(--muted);margin-bottom:18px;}
.dmatx label{display:block;font-weight:600;font-size:.9rem;margin:12px 0 5px;}
.dmatx input[type=text],.dmatx input[type=email],.dmatx input[type=tel],.dmatx input[type=password]{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:10px;font-size:1rem;font-family:inherit;color:var(--ink);background:#fff;}
.dmatx input:focus{outline:none;border-color:var(--red);}
.dmatx .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:'Poppins',sans-serif;font-weight:600;font-size:1rem;padding:13px 24px;border-radius:40px;border:2px solid transparent;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s,color .15s;text-decoration:none;}
.dmatx .btn:hover{transform:translateY(-2px);text-decoration:none;}
.dmatx .btn-red{background:var(--red);color:#fff;box-shadow:0 8px 20px rgba(176,30,36,.3);}
.dmatx .btn-gold{background:var(--gold);color:#4a2a06;box-shadow:0 8px 20px rgba(224,161,58,.35);}
.dmatx .btn-ghost{background:#fff;color:var(--red);border-color:var(--line);}
.dmatx .btn-ghost:hover{border-color:var(--red);}
.dmatx .btn-block{width:100%;} .dmatx .btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;}
.dmatx .row{display:flex;gap:12px;flex-wrap:wrap;}
.dmatx .tabs{display:flex;gap:8px;margin-bottom:18px;}
.dmatx .tabs button{flex:1;font-family:'Poppins',sans-serif;font-weight:600;padding:11px;border-radius:10px;border:2px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;}
.dmatx .tabs button.on{background:var(--red);border-color:var(--red);color:#fff;}
.dmatx .msg{padding:11px 14px;border-radius:10px;font-size:.92rem;margin:12px 0;}
.dmatx .msg.err{background:#fdeeee;color:#8f1319;border:1px solid #f2cccc;}
.dmatx .msg.ok{background:#eef7f0;color:#1f5a30;border:1px solid #cfe6d5;}
.dmatx .muted{color:var(--muted);font-size:.9rem;}
.dmatx .topbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.dmatx .topbar .hi{font-family:'Poppins',sans-serif;font-weight:700;}
/* test-password box */
.dmatx .tp{display:flex;gap:12px;align-items:center;background:var(--peach-sn);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:12px;padding:16px 18px;margin-bottom:18px;}
.dmatx .tp .ic{font-size:1.5rem;}
.dmatx .tp code{background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 10px;font-weight:700;color:var(--red);letter-spacing:1px;}
/* test cards */
.dmatx .tcard{border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:16px;border-top:5px solid var(--red);}
.dmatx .tcard h3{font-size:1.2rem;margin-bottom:6px;}
.dmatx .tcard p{color:var(--muted);font-size:.95rem;margin-bottom:12px;}
.dmatx .chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px;}
.dmatx .chip{background:var(--peach-sn);border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:.78rem;font-weight:600;color:var(--red-dk);}
/* history */
.dmatx table.hist{width:100%;border-collapse:collapse;font-size:.92rem;}
.dmatx table.hist th{background:var(--red);color:#fff;text-align:left;padding:9px 12px;font-family:'Poppins';font-weight:600;font-size:.8rem;}
.dmatx table.hist td{padding:9px 12px;border-bottom:1px solid var(--line);}
.dmatx .badge{font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:20px;color:#fff;}
.dmatx .badge.c{background:var(--green);} .dmatx .badge.f{background:var(--red);}
/* start screen */
.dmatx .start{text-align:center;padding:20px;}
.dmatx .start .big{font-family:'Poppins';font-weight:800;font-size:2.4rem;color:var(--red);margin:6px 0;}
.dmatx .warnbox{background:#fdeeee;border:1px solid #f2cccc;border-radius:12px;padding:16px 18px;text-align:left;margin:18px 0;font-size:.92rem;}
.dmatx .warnbox ul{margin:8px 0 0 18px;} .dmatx .warnbox li{margin-bottom:5px;}
/* sticky timer bar */
.dmatx .timerbar{position:sticky;top:0;z-index:50;background:linear-gradient(135deg,var(--red),var(--red-dk));color:#fff;border-radius:12px;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px;box-shadow:var(--shadow);}
.dmatx .timerbar .clock{font-family:'Poppins';font-weight:800;font-size:1.5rem;letter-spacing:1px;}
.dmatx .timerbar.warn{background:linear-gradient(135deg,#8a1015,#5e0b0e);animation:dmatpulse 1s infinite;}
@keyframes dmatpulse{50%{opacity:.85;}}
.dmatx .timerbar .prog{font-size:.85rem;color:var(--peach);}
.dmatx .timerbar .acts{display:flex;gap:8px;}
.dmatx .timerbar .mini{font-family:'Poppins';font-weight:600;font-size:.82rem;padding:8px 14px;border-radius:30px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;}
.dmatx .timerbar .mini.gold{background:var(--gold);color:#4a2a06;border-color:var(--gold);}
/* sections + questions */
.dmatx .sec-h{background:var(--red);color:#fff;border-radius:10px;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;margin:22px 0 6px;}
.dmatx .sec-h b{font-family:'Poppins';font-size:1.1rem;} .dmatx .sec-h span{color:var(--peach);font-size:.85rem;}
.dmatx .sec-note{color:var(--muted);font-size:.9rem;margin:6px 2px 14px;}
.dmatx .q{border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;background:#fff;}
.dmatx .q.answered{border-color:#cfe6d5;background:#fbfefb;}
.dmatx .q .qn{font-family:'Poppins';font-weight:700;color:var(--red);font-size:.9rem;margin-bottom:8px;}
.dmatx .q .qt{margin-bottom:10px;}
.dmatx .passage{background:var(--peach-sn);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;}
.dmatx .passage h4{color:var(--red);margin-bottom:6px;}
.dmatx table.dmat-data{border-collapse:collapse;margin-top:8px;font-size:.95rem;}
.dmatx table.dmat-data th{background:var(--red);color:#fff;padding:6px 16px;text-align:left;}
.dmatx table.dmat-data td{border:1px solid var(--line);padding:5px 16px;}
/* options */
.dmatx .opts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.dmatx .opts.two{grid-template-columns:repeat(2,1fr);}
.dmatx .opts.five{grid-template-columns:repeat(5,1fr);}
.dmatx .opt{border:2px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font-size:.95rem;display:flex;gap:8px;align-items:center;transition:border-color .15s,background .15s;}
.dmatx .opt:hover{border-color:var(--red);}
.dmatx .opt.sel{border-color:var(--red);background:var(--peach-sn);}
.dmatx .opt .k{font-family:'Poppins';font-weight:700;color:var(--red);}
/* figure matrix */
.dmatx .mxrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 12px;}
.dmatx .mx{display:grid;grid-template-columns:repeat(3,14px);grid-auto-rows:14px;gap:3px;border:1.5px solid var(--line);border-radius:6px;padding:6px;background:#fff;}
.dmatx .mx i{width:14px;height:14px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--red);}
.dmatx .mx i.dot{background:var(--red);border-radius:50%;width:11px;height:11px;margin:1.5px;}
.dmatx .mx i.hollow{background:#fff;border:2px solid var(--red);border-radius:50%;width:11px;height:11px;margin:1.5px;}
.dmatx .mx.q{border-style:dashed;border-color:var(--gold);}
.dmatx .arw{color:var(--muted);font-weight:700;}
.dmatx .figopts{display:flex;gap:12px;flex-wrap:wrap;}
.dmatx .figopt{border:2px solid var(--line);border-radius:10px;padding:8px;cursor:pointer;text-align:center;}
.dmatx .figopt:hover{border-color:var(--red);}
.dmatx .figopt.sel{border-color:var(--red);background:var(--peach-sn);}
.dmatx .figopt .k{font-family:'Poppins';font-weight:700;color:var(--red);font-size:.8rem;margin-bottom:4px;display:block;}
/* latin grid */
.dmatx .lg{display:grid;grid-template-columns:repeat(5,30px);gap:4px;margin:4px 0 12px;}
.dmatx .lg .c{width:30px;height:30px;border:1.5px solid var(--line);border-radius:5px;display:flex;align-items:center;justify-content:center;font-family:'Poppins';font-weight:700;background:#fff;}
.dmatx .lg .c.blank{background:#f4efea;} .dmatx .lg .c.t{background:var(--gold);color:var(--red-dk);border-color:var(--gold);}
/* report */
.dmatx .scorebig{text-align:center;padding:20px;}
.dmatx .scorebig .ring{font-family:'Poppins';font-weight:800;font-size:3rem;color:var(--red);}
.dmatx .scorebig .pct{color:var(--muted);}
.dmatx .secscore{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--line);}
.dmatx .secscore b{font-family:'Poppins';}
.dmatx .bar{height:8px;border-radius:8px;background:var(--line);overflow:hidden;margin-top:4px;}
.dmatx .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--red));}
@media(max-width:640px){
  .dmatx .opts,.dmatx .opts.two{grid-template-columns:1fr;}
  .dmatx .opts.five{grid-template-columns:repeat(5,1fr);}
}