:root{
  --yellow:#f4d14f;
  --yellow2:#ffe17a;
  --muted:#666;
  --green:#16a34a;
  --teal:#2ad0b8;
  --card:#ffffff;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 10px;
  --border: 1px solid #d8d8d8;
  --max: 1100px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#111;background:#fafafa}
button,input{font:inherit}

.container{width:min(var(--max), 92vw);margin:0 auto}
.main{padding: 14px 0 28px}


.btn{
  border: var(--border);
  background:#fff;
  padding: 9px 12px;
  border-radius: 10px;
  cursor:pointer;
  font-weight:900;
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}
.btn:active{transform: translateY(1px)}
.btn--green{
  background: var(--green);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
}
.btn--dark{
  background:#111;
  color:#fff;
  border: 1px solid rgba(255,255,255,.15);
}

/* Cards */
.card{
  background: var(--card);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
}
.card__title {
    font-weight: 900;
    border: var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f7f7f7;
    justify-content: center;
}

/* Tables */
.table-wrap{overflow:auto}
.result-table{
  width:100%;
  border-collapse: collapse;
  margin-top: 10px;
  min-width: 520px;
}
.result-table th,
.result-table td{
  border: 1px solid #cfcfcf;
  padding: 10px 8px;
  text-align:center;
  font-weight:900;
}
.result-table th{background:#f2f2f2}





/* spacing helpers */
.mt{margin-top: 14px}
.mt-sm{margin-top: 10px}

/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:50}
.modal.is-open{display:block}
.modal__backdrop{position:absolute;inset:0;background: rgba(0,0,0,.55)}
.modal__card{
  position:relative;
  width:min(520px, 92vw);
  margin: 10vh auto 0;
  background:#fff;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: var(--border);
  overflow:hidden;
}
.modal__head{
  display:flex;align-items:center;justify-content:space-between;
  padding: 12px;background:#f5f5f5;border-bottom: var(--border);
}
.modal__head h3{margin:0}
.modal__close{border:none;background:transparent;font-size:18px;cursor:pointer}
.modal__body{padding: 12px; font-weight:700}
.modal__foot{padding: 12px; display:flex; justify-content:flex-end; border-top: var(--border); background:#fafafa}

/* Responsive */
@media (max-width: 820px){
  .result-table{min-width: 440px}
}