@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

    :root {
      --dk: #0a0f1e;
      --nv: #0d1b3e;
      --ac: #2563eb;
      --go: #f59e0b;
      --re: #ef4444;
      --gn: #10b981;
      --pu: #7c3aed;
      --bd: #e2e8f0;
      --lt: #f8fafc;
      --mu: #94a3b8;
      --t2: #475569;
      --fn: 'DM Sans', sans-serif;
      --mo: 'DM Mono', monospace;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    body {
      font-family: var(--fn);
      background: var(--lt);
      color: #0f172a;
      min-height: 100vh;
      font-size: 14px
    }

    .screen {
      display: none;
      min-height: 100vh;
      flex-direction: column
    }

    .screen.active {
      display: flex
    }

    .topbar {
      background: var(--dk);
      color: #fff;
      padding: 0 1.4rem;
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 12px rgba(0, 0, 0, .3)
    }

    .tl {
      display: flex;
      align-items: center;
      gap: 9px
    }

    .tm {
      width: 33px;
      height: 33px;
      background: var(--ac);
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 12.5px;
      color: #fff;
      flex-shrink: 0
    }

    .tn {
      font-weight: 600;
      font-size: 12.5px
    }

    .tn span {
      color: #93c5fd
    }

    .tr {
      display: flex;
      align-items: center;
      gap: 8px
    }

    .tb {
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .2);
      border-radius: 5px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 500
    }

    .timer {
      font-family: var(--mo);
      font-size: 18px;
      font-weight: 500;
      color: #fef3c7;
      letter-spacing: 2px
    }

    .timer.warn {
      color: #fca5a5;
      animation: blink 1s infinite
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .4
      }
    }

    .page {
      flex: 1;
      padding: 1.4rem;
      max-width: 980px;
      margin: 0 auto;
      width: 100%
    }

    .pw {
      flex: 1;
      padding: 1.4rem;
      width: 100%;
      max-width: 1040px;
      margin: 0 auto
    }

    .card {
      background: #fff;
      border-radius: 11px;
      box-shadow: 0 4px 20px rgba(10, 15, 30, .08);
      border: 1px solid var(--bd)
    }

    .chd {
      padding: 1rem 1.3rem;
      border-bottom: 1px solid var(--bd);
      display: flex;
      align-items: center;
      gap: 9px
    }

    .chd h2 {
      font-size: 14.5px;
      font-weight: 600
    }

    .cbd {
      padding: 1.3rem
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 16px;
      border-radius: 7px;
      font-family: var(--fn);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      transition: all .15s;
      white-space: nowrap
    }

    .btn:disabled {
      opacity: .4;
      cursor: not-allowed
    }

    .bp {
      background: var(--ac);
      color: #fff
    }

    .bp:hover {
      background: #1d4ed8
    }

    .bs {
      background: #e5e7eb;
      color: #374151
    }

    .bs:hover {
      background: #d1d5db
    }

    .bo {
      background: var(--gn);
      color: #fff
    }

    .bo:hover {
      background: #059669
    }

    .bd {
      background: var(--re);
      color: #fff
    }

    .bd:hover {
      background: #dc2626
    }

    .bk {
      background: var(--dk);
      color: #fff
    }

    .bk:hover {
      background: #1e293b
    }

    .bg {
      background: var(--go);
      color: #fff
    }

    .bg:hover {
      background: #d97706
    }

    .bv {
      background: var(--pu);
      color: #fff
    }

    .bv:hover {
      background: #6d28d9
    }

    .bout {
      background: transparent;
      border: 1.5px solid var(--bd);
      color: #374151
    }

    .bout:hover {
      border-color: var(--ac);
      color: var(--ac)
    }

    .bgh {
      background: transparent;
      color: var(--t2);
      border: none
    }

    .bgh:hover {
      background: #f3f4f6
    }

    .blg {
      padding: 11px 24px;
      font-size: 14px;
      border-radius: 9px
    }

    .bsm {
      padding: 5px 10px;
      font-size: 12px;
      border-radius: 6px
    }

    .bxs {
      padding: 3px 8px;
      font-size: 11px;
      border-radius: 5px
    }

    .bw {
      width: 100%;
      justify-content: center
    }

    .fg {
      margin-bottom: .85rem
    }

    .fg label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--t2);
      margin-bottom: 4px
    }

    .fc {
      width: 100%;
      padding: 8px 11px;
      border: 1.5px solid var(--bd);
      border-radius: 7px;
      font-family: var(--fn);
      font-size: 13px;
      outline: none;
      background: #fff;
      transition: border-color .15s
    }

    .fc:focus {
      border-color: var(--ac);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .1)
    }

    textarea.fc {
      min-height: 130px;
      resize: vertical;
      line-height: 1.6
    }

    .pww {
      position: relative
    }

    .pww .fc {
      padding-right: 36px
    }

    .pwe {
      position: absolute;
      right: 9px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--mu);
      font-size: 14px;
      padding: 0
    }

    .badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 500
    }

    .bbl {
      background: #dbeafe;
      color: #1e40af
    }

    .bgn {
      background: #d1fae5;
      color: #065f46
    }

    .brd {
      background: #fee2e2;
      color: #991b1b
    }

    .bgl {
      background: #fef3c7;
      color: #92400e
    }

    .bgr {
      background: #f3f4f6;
      color: #374151
    }

    .bpu {
      background: #ede9fe;
      color: #4c1d95
    }

    .tabs {
      display: flex;
      gap: 2px;
      border-bottom: 1.5px solid var(--bd);
      margin-bottom: 1.1rem
    }

    .tbb {
      padding: 7px 13px;
      font-size: 12.5px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      background: transparent;
      color: var(--mu);
      border-bottom: 2.5px solid transparent;
      margin-bottom: -1.5px;
      transition: all .15s;
      font-family: var(--fn);
      border-radius: 4px 4px 0 0
    }

    .tbb.active {
      color: var(--ac);
      border-bottom-color: var(--ac)
    }

    .tbb:hover:not(.active) {
      color: var(--t2);
      background: #f8fafc
    }

    .tp {
      display: none
    }

    .tp.active {
      display: block
    }

    .qcard {
      background: #fff;
      border: 1.5px solid var(--bd);
      border-radius: 10px;
      padding: 1.1rem;
      margin-bottom: .75rem
    }

    .qcard.ans {
      border-color: #93c5fd;
      background: #f0f7ff
    }

    .qmeta {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 7px
    }

    .qnum {
      font-family: var(--mo);
      font-size: 11px;
      color: var(--mu)
    }

    .qstem {
      font-size: 13px;
      line-height: 1.65;
      margin-bottom: .8rem;
      white-space: pre-wrap
    }

    .qopts {
      display: flex;
      flex-direction: column;
      gap: 5px
    }

    .qopt {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 8px 11px;
      border: 1.5px solid var(--bd);
      border-radius: 7px;
      cursor: pointer;
      transition: all .14s;
      font-size: 12.5px;
      line-height: 1.5
    }

    .qopt:hover {
      border-color: var(--ac);
      background: #eff6ff
    }

    .qopt.sel {
      border-color: var(--ac);
      background: #dbeafe
    }

    .qopt.oka {
      border-color: var(--gn);
      background: #d1fae5
    }

    .qopt.bda {
      border-color: var(--re);
      background: #fee2e2
    }

    .oltr {
      min-width: 21px;
      height: 21px;
      border-radius: 50%;
      background: #e5e7eb;
      color: var(--t2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 600;
      flex-shrink: 0;
      margin-top: 1px
    }

    .qopt.sel .oltr {
      background: var(--ac);
      color: #fff
    }

    .qopt.oka .oltr {
      background: var(--gn);
      color: #fff
    }

    .qopt.bda .oltr {
      background: var(--re);
      color: #fff
    }

    .prog {
      background: #e5e7eb;
      border-radius: 100px;
      height: 7px;
      overflow: hidden
    }

    .pf {
      height: 100%;
      border-radius: 100px;
      background: var(--ac);
      transition: width .3s
    }

    .sbox {
      background: #fff;
      border: 1.5px solid var(--bd);
      border-radius: 8px;
      padding: .85rem;
      text-align: center
    }

    .sv {
      font-size: 24px;
      font-weight: 700;
      color: var(--ac);
      font-family: var(--mo)
    }

    .sl {
      font-size: 11px;
      color: var(--mu);
      margin-top: 2px
    }

    .sbox.pass .sv {
      color: var(--gn)
    }

    .sbox.fail .sv {
      color: var(--re)
    }

    .tbl {
      width: 100%;
      border-collapse: collapse;
      font-size: 12.5px
    }

    .tbl th {
      padding: 7px 10px;
      text-align: left;
      background: #f8fafc;
      border-bottom: 1.5px solid var(--bd);
      font-weight: 600;
      color: var(--t2)
    }

    .tbl td {
      padding: 6px 10px;
      border-bottom: 1px solid var(--bd)
    }

    .tbl tr:last-child td {
      border-bottom: none
    }

    .exw {
      display: grid;
      grid-template-columns: 1fr 248px;
      gap: 1.1rem;
      align-items: start
    }

    .exs {
      position: sticky;
      top: 64px
    }

    .qdots {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(31px, 1fr));
      gap: 4px
    }

    .qdot {
      width: 31px;
      height: 31px;
      border-radius: 5px;
      background: #e5e7eb;
      color: var(--mu);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: all .14s;
      border: 1.5px solid transparent
    }

    .qdot.a {
      background: #dbeafe;
      color: #1e40af;
      border-color: #93c5fd
    }

    .qdot.cur {
      border-color: var(--ac);
      box-shadow: 0 0 0 2px rgba(37, 99, 235, .2)
    }

    .gr {
      border: 1.5px solid var(--bd);
      border-radius: 8px;
      padding: .9rem;
      margin-bottom: .65rem
    }

    .gr.ok {
      border-color: #86efac;
      background: #f0fdf4
    }

    .grm {
      font-size: 11px;
      color: var(--mu);
      margin-bottom: 4px
    }

    .gra {
      font-size: 12.5px;
      line-height: 1.6;
      background: #fff;
      border: 1px solid var(--bd);
      padding: 7px 10px;
      border-radius: 6px;
      max-height: 150px;
      overflow-y: auto;
      margin-bottom: 7px;
      white-space: pre-wrap
    }

    .caseg {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .75rem
    }

    .casec {
      border: 2px solid var(--bd);
      border-radius: 8px;
      padding: .85rem;
      cursor: pointer;
      transition: all .14s
    }

    .casec:hover {
      border-color: var(--ac);
      background: #f0f7ff
    }

    .casec.sel {
      border-color: var(--ac);
      background: #eff6ff
    }

    .casec h4 {
      font-size: 12px;
      font-weight: 600;
      margin-bottom: 3px
    }

    .casec p {
      font-size: 11px;
      color: var(--mu);
      line-height: 1.5
    }

    .rpt-hd {
      background: linear-gradient(135deg, var(--dk), var(--nv));
      color: #fff;
      padding: 1.8rem 2.2rem;
      border-radius: 11px 11px 0 0;
      display: flex;
      align-items: center;
      justify-content: space-between
    }

    .lgbg {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, var(--dk), var(--nv), #1e3a8a);
      padding: 1.4rem
    }

    .lgc {
      background: #fff;
      border-radius: 17px;
      padding: 2.3rem;
      width: 100%;
      max-width: 420px;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .4)
    }

    .lgm {
      width: 54px;
      height: 54px;
      background: var(--dk);
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -1.5px
    }

    .rpk {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 7px;
      margin-bottom: 1rem
    }

    .ro {
      border: 2px solid var(--bd);
      border-radius: 9px;
      padding: 10px 6px;
      cursor: pointer;
      transition: all .14s;
      text-align: center;
      font-size: 12px;
      font-weight: 500
    }

    .ro:hover {
      border-color: var(--ac)
    }

    .ro.sel {
      border-color: var(--ac);
      background: #eff6ff;
      color: var(--ac)
    }

    .ri {
      font-size: 22px;
      margin-bottom: 5px
    }

    .mover {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .55);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 1rem
    }

    .mover.open {
      display: flex
    }

    .mbox {
      background: #fff;
      border-radius: 15px;
      padding: 1.8rem;
      width: 100%;
      max-width: 490px;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .35)
    }

    .mprev {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .6);
      z-index: 1000;
      overflow-y: auto;
      padding: 1rem
    }

    .mprev.open {
      display: block
    }

    .mprev-in {
      background: #fff;
      border-radius: 15px;
      padding: 1.8rem;
      width: 100%;
      max-width: 800px;
      margin: 1rem auto;
      box-shadow: 0 24px 64px rgba(0, 0, 0, .35)
    }

    .nwrap {
      position: fixed;
      top: 64px;
      right: 16px;
      z-index: 2000;
      display: flex;
      flex-direction: column;
      gap: 6px;
      pointer-events: none
    }

    .ni {
      padding: 9px 14px;
      border-radius: 9px;
      font-size: 12.5px;
      display: flex;
      align-items: center;
      gap: 7px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
      pointer-events: all;
      min-width: 250px;
      animation: slin .24s ease
    }

    @keyframes slin {
      from {
        transform: translateX(100px);
        opacity: 0
      }

      to {
        transform: translateX(0);
        opacity: 1
      }
    }

    .zbar {
      background: #fef3c7;
      border: 1.5px solid #fcd34d;
      border-radius: 8px;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #92400e;
      margin-bottom: .85rem
    }

    .cdot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--re);
      animation: blink 1.5s infinite;
      flex-shrink: 0
    }

    .cdot.on {
      background: var(--gn)
    }

    .oprompt {
      background: #f8fafc;
      border: 1px solid var(--bd);
      border-radius: 8px;
      padding: 10px 12px;
      font-size: 12.5px;
      line-height: 1.7;
      margin-bottom: 7px;
      white-space: pre-wrap
    }

    .fl {
      display: flex
    }

    .fw {
      flex-wrap: wrap
    }

    .ic {
      align-items: center
    }

    .jb {
      justify-content: space-between
    }

    .jc {
      justify-content: center
    }

    .g2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .8rem
    }

    .g3 {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: .8rem
    }

    .gap1 {
      gap: 5px
    }

    .gap2 {
      gap: 11px
    }

    .gap3 {
      gap: 18px
    }

    .mt1 {
      margin-top: 6px
    }

    .mt2 {
      margin-top: 13px
    }

    .mt3 {
      margin-top: 20px
    }

    .mb1 {
      margin-bottom: 6px
    }

    .mb2 {
      margin-bottom: 13px
    }

    .mb3 {
      margin-bottom: 20px
    }

    .bld {
      font-weight: 600
    }

    .sm {
      font-size: 12px
    }

    .xs {
      font-size: 11px
    }

    .mu {
      color: var(--mu)
    }

    .t2 {
      color: var(--t2)
    }

    .tc {
      text-align: center
    }

    .tr {
      text-align: right
    }

    .w100 {
      width: 100%
    }

    hr {
      border: none;
      border-top: 1.5px solid var(--bd);
      margin: 1rem 0
    }

    .pchip {
      background: #d1fae5;
      color: #065f46;
      padding: 2px 7px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600
    }

    .fchip {
      background: #fee2e2;
      color: #991b1b;
      padding: 2px 7px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 600
    }

    .sdot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 4px
    }

    .son {
      background: var(--gn)
    }

    .sof {
      background: var(--mu)
    }

    .spill {
      background: #ede9fe;
      color: #4c1d95;
      border: 1px solid #c4b5fd;
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 4px
    }

    .pp {
      padding: 3px 8px;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 4px
    }

    .ppw {
      background: #fef3c7;
      color: #92400e;
      border: 1px solid #fcd34d
    }

    .ppg {
      background: #dbeafe;
      color: #1e40af;
      border: 1px solid #93c5fd
    }

    .ppd {
      background: #f3f4f6;
      color: #374151;
      border: 1px solid #d1d5db
    }

    @media(max-width:768px) {

      .exw,
      .g2,
      .g3 {
        grid-template-columns: 1fr
      }

      .exs {
        position: static
      }

      .page,
      .pw {
        padding: 1rem
      }

      .caseg,
      .rpk {
        grid-template-columns: 1fr
      }
    }