:root{
  --card:#0f1b22;
  --accent:#1fb6b3;
  --muted:rgba(255,255,255,0.65);
  --radius:18px;
  --shadow: 0 10px 30px rgba(2,8,12,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* ---- GLOBAL ----
html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
} */

/* ---- CARD ---- */
.clock-card{
  margin: 0 auto;
  width: min(900px, 95vw);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 32px 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 26px;
  position: relative;
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* ---- TITLE ---- */
.sale-title{
  font-size: 32px;
  font-weight: 800;
  text-align:center;
  line-height: 1.22;
}

.sale-title span{
  display:block;
  margin-top:6px;
}

/* ---- COUNTDOWN ---- */
.countdown-wrapper{
  display:flex;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  margin-top:10px;
}

.unit{
  background:rgba(255,255,255,0.05);
  padding:22px 28px;
  border-radius:16px;
  text-align:center;
  min-width:130px;
  box-shadow:0 4px 16px rgba(0,0,0,0.45);
}

.num{
  font-size:52px;
  font-weight:700;
}

.label{
  margin-top:6px;
  font-size:15px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
}

/* ---- FOOTER ---- */
.footer-text{
  margin-top:10px;
  text-align:center;
  color:var(--muted);
  font-size:17px;
}


/* ------------------------------------------------------------
   📱 АДАПТАЦИЯ ПОД ПЛАНШЕТ (600–1024px)
------------------------------------------------------------ */
@media(max-width:1024px){

  .clock-card{
    width:95vw;
    padding:32px 26px 36px;
    gap:22px;
  }

  .sale-title{
    font-size:28px;
  }

  .unit{
    min-width:110px;
    padding:18px 22px;
  }

  .num{
    font-size:44px;
  }

  .label{
    font-size:13px;
  }
}


/* ------------------------------------------------------------
   📱 АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ (до 600px)
------------------------------------------------------------ */
@media(max-width:600px){

  body{
    padding:14px;
  }

  .clock-card{
    width:100%;
    padding:20px 14px 24px;
    gap:14px;
  }

  .sale-title{
    font-size:20px;
    font-weight:800;
  }

  .countdown-wrapper{
    gap:8px;
    flex-wrap:nowrap;
    justify-content:space-between;
  }

  .unit{
    min-width:68px;
    padding:10px 8px;
    border-radius:10px;
  }

  .num{
    font-size:26px;
  }

  .label{
    font-size:10px;
    margin-top:2px;
  }

  .footer-text{
    font-size:13px;
  }
}