/* —— Million page —— */
.page-million {
  --ink: #545454;
  --heading-red: #af0032;
  --leaf: #5b9f00;
  --forest: #355f2a;
  --muted: #727272;
}
.page-million .site-layout--single {
  display: block;
  width: min(1100px, 100%);
  max-width: none;
  margin: 0 auto 65px;
  padding: 0;
  grid-template-columns: none;
}
.page-million .site-layout--single .contentmain,
.page-million .site-layout--single .content-main {
  max-width: none;
  width: 100% !important;
  padding: 0 !important;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.million {
  --million-line: rgb(24 69 50 / 14%);
  --million-board-max: 960px;
  padding: .85rem clamp(.85rem, 2.4vw, 1.75rem) 2.5rem;
  background: transparent;
  overflow-x: clip;
}
.million .stack-form label {
  display: block;
  margin: 0 0 .85rem;
}
.million .stack-form label > span {
  display: block;
  margin-bottom: .35rem;
  font-weight: 700;
  color: var(--ink);
}
.million .stack-form input[type="text"],
.million .stack-form input[type="url"],
.million .stack-form input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}
.million-stage {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-bottom: 1.75rem;
}
.million-rail {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, .9fr);
  gap: .85rem 1.25rem;
  align-items: end;
  width: min(var(--million-board-max), 100%);
  margin: 0 auto;
  animation: million-rise .55s ease both;
}
.million-rail__brand { display: none; }
.million-rail h1,
.million h1 {
  margin: 0 0 .35rem;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--heading-red);
  text-shadow: 1px 1px 1px #fff;
  border: 0;
  padding: 0;
}
.million-rail__lead {
  margin: 0;
  max-width: 34rem;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.4;
}
.million-rail__aside {
  display: grid;
  gap: .65rem;
  justify-items: stretch;
}
.million-meter__track {
  height: .42rem;
  border-radius: 999px;
  background: rgb(24 69 50 / 10%);
  overflow: hidden;
}
.million-meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--leaf), var(--forest));
  transform-origin: left center;
  animation: million-fill .9s ease .15s both;
}
.million-meter__text {
  margin: .4rem 0 0;
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: .01em;
}
.million-rail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem .9rem;
}
.million-board-wrap {
  width: 100%;
  max-width: var(--million-board-max);
  margin: 0 auto 2rem;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.million-board-wrap--stage {
  margin-bottom: 0;
  animation: million-rise .65s ease .08s both;
}
.million-board-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .55rem;
}
.million-board-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}
.million-board-caption {
  margin: .45rem 0 0;
  text-align: center;
  color: var(--muted);
  font-size: .8rem;
}
.million-board-frame {
  width: 100%;
  overflow: hidden;
  padding: .45rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgb(24 69 50 / 12%);
  box-shadow: 0 16px 42px rgb(16 24 20 / 8%);
  isolation: isolate;
}
.million-board {
  --million-cols: 100;
  --million-rows: 100;
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: var(--million-cols) / var(--million-rows);
  height: auto;
  margin: 0;
  background:
    linear-gradient(90deg, var(--million-line) 1px, transparent 1px) 0 0 / calc(100% / var(--million-cols)) calc(100% / var(--million-rows)),
    linear-gradient(0deg, var(--million-line) 1px, transparent 1px) 0 0 / calc(100% / var(--million-cols)) calc(100% / var(--million-rows)),
    #fbfcf9;
  box-shadow: inset 0 0 0 1px rgb(24 69 50 / 16%);
  user-select: none;
  touch-action: none;
  overflow: hidden;
}
.million-board--select { cursor: crosshair; }
.million-board__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1.5rem;
  color: var(--muted);
  pointer-events: none;
  text-align: center;
  z-index: 1;
  font-size: .95rem;
}
.million-slot {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 0;
  z-index: 2;
}
.million-slot img,
.million-slot--taken img,
.million-preview img,
.million-edit-preview img,
.million-mine__list img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.million-slot:hover {
  outline: 2px solid var(--leaf);
  outline-offset: 0;
  z-index: 3;
}
.million-slot--taken {
  pointer-events: none;
  opacity: .92;
}
.million-selection {
  position: absolute;
  z-index: 4;
  border: 2px solid var(--leaf);
  background: rgb(61 140 98 / 22%);
  pointer-events: none;
  box-sizing: border-box;
}
.million-selection.is-invalid {
  border-color: #b42318;
  background: rgb(180 35 24 / 18%);
}
.million--buy {
  padding-bottom: 5.5rem;
}
.million--buy .million-board-wrap {
  max-width: var(--million-board-max);
  margin: 0 auto;
}
.million-dock {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  width: min(var(--million-board-max), calc(100% - 1.5rem));
  transform: translateX(-50%);
  padding: .75rem .9rem;
  border-radius: 14px;
  background: rgb(255 255 255 / 94%);
  border: 1px solid rgb(24 69 50 / 14%);
  box-shadow: 0 14px 40px rgb(16 24 20 / 16%);
  backdrop-filter: blur(8px);
}
.million-dock .million-estimate {
  margin: 0;
  flex: 1 1 12rem;
  padding: 0;
  background: transparent;
  font-weight: 600;
  font-size: .92rem;
}
.million-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.million-modal[hidden] { display: none !important; }
.million-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgb(16 24 20 / 48%);
  cursor: pointer;
}
.million-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  max-height: min(90dvh, 720px);
  overflow: auto;
  padding: 1.15rem 1.2rem 1.35rem;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgb(24 69 50 / 12%);
  box-shadow: 0 22px 60px rgb(16 24 20 / 22%);
  animation: million-rise .35s ease both;
}
.million-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.million-modal__head h2 {
  margin: 0;
  font-size: 1.15rem;
}
.million-modal__close {
  border: 0;
  background: rgb(24 69 50 / 8%);
  color: var(--ink);
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.million-modal__close:hover { background: rgb(24 69 50 / 14%); }
body.million-modal-lock { overflow: hidden; }
.million-buy-form.panel {
  position: relative;
  z-index: 5;
  isolation: isolate;
  background: #fff;
  border: 1px solid rgb(24 69 50 / 12%);
  border-radius: 18px;
  padding: 1.15rem 1.2rem 1.35rem;
  box-shadow: 0 14px 36px rgb(16 24 20 / 8%);
  width: 100%;
  max-width: var(--million-board-max);
  margin: 0 auto;
}
.million-estimate {
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  border-radius: 10px;
  background: rgb(24 69 50 / 6%);
  font-weight: 600;
}
.million-estimate[data-state="ok"] { background: rgb(61 140 98 / 14%); color: var(--forest); }
.million-estimate[data-state="bad"] { background: rgb(180 35 24 / 10%); color: #8a1f16; }
.million-modal .million-estimate { margin-bottom: .9rem; }
.million-preview {
  margin: .5rem 0 1rem;
  width: 120px;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgb(24 69 50 / 12%);
}
.million-mine,
.million-how {
  max-width: 920px;
  margin: 0 auto 2rem;
}
.million-mine h2,
.million-how h2 {
  color: var(--heading-red);
  text-shadow: 1px 1px 1px #fff;
  border: 0;
  margin: 0 0 .75rem;
  padding: 0;
  font-size: 15px;
}
.million-mine__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}
.million-mine__list li {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: .85rem;
  align-items: center;
  padding: .75rem;
  border-radius: 14px;
  background: rgb(255 255 255 / 75%);
  border: 1px solid rgb(24 69 50 / 10%);
}
.million-mine__list img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
}
.million-mine__list span {
  display: block;
  color: var(--muted);
  font-size: .88rem;
}
.million-how__list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ink);
  line-height: 1.55;
}
.million-edit-preview {
  width: min(240px, 100%);
  margin: 0 0 1rem;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgb(24 69 50 / 12%);
}
.help-text {
  margin: -.35rem 0 .85rem;
  color: var(--muted);
  font-size: .88rem;
}
.form-errors {
  margin-bottom: .85rem;
  padding: .75rem .9rem;
  border-radius: 10px;
  background: rgb(180 35 24 / 10%);
  color: #8a1f16;
}
@keyframes million-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes million-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (max-width: 900px) {
  .million-rail {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .million-rail__actions { justify-content: flex-start; }
  .page-million .site-layout--single {
    width: 98%;
  }
}
@media (max-width: 640px) {
  .million-mine__list li { grid-template-columns: 48px 1fr; }
  .million-mine__list .fbtn-blue { grid-column: 2; }
}