/* ======================================================
   Tailwind-inspired color palette
   ====================================================== */
:root {
  --tw-purple-600: #7c3aed;
  --tw-teal-600: #0d9488;
  --tw-blue-600: #2e72ee;
  --tw-rose-600: #e11d48;

  --tw-slate-900: #0f172a;
  --tw-slate-700: #334155;
  --tw-slate-100: #f1f5f9;
}


/* ======================================================
   Layout & isolation
   ====================================================== */
.mtg-calculator-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.mtg-calculator {
  max-width: 1000px;
  padding: 0 1.5rem;
  margin: 0 auto;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;

  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.75rem;
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.mtg-calculator hr {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .mtg-calculator-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .mtg-calculator {
    border-radius: 0.5rem;
  }
}


/* ======================================================
   Cards
   ====================================================== */
.mtg-calculator .card {
  border: 1px solid var(--tw-slate-100);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  margin-bottom: 0.75rem;

  color: #fff;
}

.mtg-calculator .card-primary { background-color: var(--tw-purple-600); }
.mtg-calculator .card-success { background-color: var(--tw-teal-600); }
.mtg-calculator .card-screw   { background-color: var(--tw-rose-600); }
.mtg-calculator .card-flood   { background-color: var(--tw-blue-600); }

.mtg-calculator .card-title {
  font-weight: 400;
  font-size: 1.2rem;
  color: inherit;
}

.mtg-calculator .card-text {
  font-weight: 300;
  color: inherit;
  font-size: 2.4rem;
  line-height: 1.2;
}


/* ======================================================
   Buttons
   ====================================================== */
.mtg-calculator .btn {
  font-weight: 300;
  font-size: 1.5rem;
  border-radius: 0.5rem;
  padding: 0.6rem 1.2rem;
}

.mtg-calculator .btn-primary {
  background-color: var(--tw-purple-600);
  border: none;
}

.mtg-calculator .btn-primary:hover {
  background-color: #6d28d9;
}

.mtg-calculator .btn-outline-secondary {
  border-color: var(--tw-slate-700);
  color: var(--tw-slate-700);
}

.mtg-calculator .btn-outline-secondary:hover {
  background-color: var(--tw-slate-100);
  color: #000;
}


/* ======================================================
   Forms
   ====================================================== */
.mtg-calculator .form-label {
  font-weight: 400;
  font-size: 1.5rem;
}

.mtg-calculator .form-control {
  font-weight: 300;
  font-size: 1.5rem;
  border-radius: 0.5rem;
  border: 1px solid var(--tw-slate-100);
}

.mtg-calculator .form-control:focus {
  border-color: var(--tw-purple-600);
  box-shadow: 0 0 0 1px var(--tw-purple-600);
}


/* ======================================================
   Typography
   ====================================================== */
.mtg-calculator h2,
.mtg-calculator h3 {
  font-weight: 400;
  letter-spacing: 0.01em;
}


/* ======================================================
   Tables
   ====================================================== */
.mtg-calculator table {
  font-weight: 300;
  font-size: 1.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
}

.mtg-calculator thead th {
  font-weight: 400;
  background-color: var(--tw-purple-600);
  color: var(--tw-slate-100);
}

.mtg-calculator tbody tr:hover {
  background-color: #f8fafc;
}


/* ======================================================
   Accordion
   ====================================================== */
.mtg-calculator .accordion-item {
  border: 1px solid var(--tw-slate-100);
  border-radius: 0.75rem;
}

.mtg-calculator .accordion-button {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.3;
  border-radius: 0.75rem;
}

.mtg-calculator .accordion-button:not(.collapsed) {
  background-color: var(--tw-slate-100);
  color: var(--tw-slate-900);
}

.mtg-calculator .accordion-body {
  font-size: 1.4rem;
  line-height: 1.6;
}