@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  --ink:#19243a;
  --muted:#77839a;
  --line:#e8ecf3;
  --bg:#f5f7fb;
  --blue:#4868ed;
  --blue2:#7286ff;
  --green:#1c9b75;
  --red:#d54f5f;
  --shadow:0 14px 40px rgba(32,52,98,.07)
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px 'DM Sans',sans-serif
}

a {
  color:inherit;
  text-decoration:none
}

.top {
  height:78px;
  max-width:1140px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 24px
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font:800 17px Manrope,sans-serif;
  letter-spacing:-.4px
}

.brand small {
  display:block;
  color:#93a0b4;
  font:500 11px 'DM Sans',sans-serif;
  letter-spacing:.2px;
  margin-top:2px
}

.logo {
  width:38px;
  height:38px;
  border-radius:13px;
  background:linear-gradient(140deg,#6781ff,#405ce5);
  display:grid;
  place-items:center;
  color:white;
  font:800 20px Manrope;
  box-shadow:0 6px 15px #4968ee44
}

.admin-link,.quiet {
  color:#707d94;
  font-weight:600;
  font-size:13px
}

.admin-link {
  padding:10px 15px;
  border:1px solid var(--line);
  border-radius:10px;
  background:white
}

.wrap {
  max-width:1060px;
  margin:auto;
  padding:26px 24px 70px
}

.hero {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  min-height:365px;
  background:linear-gradient(115deg,#fff,#f0f3ff);
  border:1px solid #e8ebf7;
  border-radius:25px;
  padding:48px 56px;
  overflow:hidden;
  position:relative
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:1.7px;
  color:#7583a1;
  font-size:10px;
  font-weight:700;
  margin-bottom:13px
}

.hero h1 {
  font:800 clamp(37px,5vw,57px)/1.15 Manrope,sans-serif;
  letter-spacing:-2.5px;
  margin:0 0 16px
}

.hero h1 span {
  color:var(--blue)
}

.hero p {
  max-width:430px;
  color:#79869b;
  line-height:1.75;
  margin:0
}

.trust {
  display:flex;
  gap:22px;
  margin-top:25px;
  color:#65748d;
  font-size:12px
}

.hero-art {
  height:260px;
  position:relative;
  display:grid;
  place-items:center
}

.orb {
  position:absolute;
  width:250px;
  height:250px;
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#d8e0ff,#e7ecff 58%,#f3f5ff);
  box-shadow:inset -13px -18px 28px #d3dcff66
}

.phone {
  position:relative;
  width:142px;
  height:228px;
  border-radius:25px;
  background:linear-gradient(150deg,#fcfdff,#edf1fc);
  border:6px solid #fff;
  box-shadow:0 18px 35px #6475ae42;
  display:flex;
  align-items:center;
  flex-direction:column;
  padding-top:37px;
  transform:rotate(7deg)
}

.phone-top {
  position:absolute;
  top:9px;
  background:#dfe4f1;
  width:38px;
  height:4px;
  border-radius:8px
}

.phone-icon {
  width:54px;
  height:54px;
  border-radius:18px;
  background:linear-gradient(140deg,#7890ff,#4765eb);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:24px;
  box-shadow:0 8px 16px #4868ed55;
  margin-bottom:17px
}

.phone i {
  width:75px;
  height:5px;
  border-radius:5px;
  background:#dfe4f0;
  margin:4px
}

.phone i.short {
  width:47px
}

.code-preview {
  font-weight:700;
  letter-spacing:5px;
  color:var(--blue);
  margin-top:14px
}

.float {
  position:absolute;
  background:#fff;
  border:1px solid #eff1f7;
  box-shadow:0 8px 22px #394c7a19;
  border-radius:11px;
  padding:10px 13px;
  font-size:11px;
  color:#8290a6
}

.float b {
  color:var(--green);
  margin-left:4px
}

.f1 {
  top:30px;
  right:0
}

.f2 {
  bottom:33px;
  left:3px
}

.sectionhead,.headrow {
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:40px 2px 16px
}

.sectionhead h2,.headrow h1 {
  margin:0;
  font:700 23px Manrope;
  letter-spacing:-.5px
}

.service-cards {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:13px
}

.service-card {
  border:1px solid var(--line);
  background:#fff;
  border-radius:15px;
  text-align:left;
  padding:17px;
  cursor:pointer;
  transition:.18s;
  box-shadow:0 4px 12px #253a6506;
  color:var(--ink)
}

.service-card:hover,.service-card.selected {
  border-color:#8fa1ff;
  box-shadow:0 8px 25px #506cf020;
  transform:translateY(-2px)
}

.service-card img,.service-list img {
  width:42px;
  height:42px;
  border-radius:13px;
  object-fit:cover;
  margin-bottom:14px
}

.service-card b,.service-card small,.service-card em {
  display:block
}

.service-card b {
  font-size:14px
}

.service-card small {
  color:#8c98ab;
  font-size:11px;
  margin-top:5px
}

.service-card em {
  font-style:normal;
  font-size:11px;
  color:var(--blue);
  font-weight:600;
  margin-top:13px
}

.service-icon {
  width:42px;
  height:42px;
  border-radius:13px;
  background:#eef1ff;
  color:#526bf0;
  display:grid;
  place-items:center;
  font-size:20px;
  margin-bottom:14px
}

.card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px;
  box-shadow:var(--shadow);
  margin-bottom:18px
}

.redeem {
  margin-top:23px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px;
  padding:31px
}

.redeem h2,.card h2 {
  font:700 21px Manrope;
  letter-spacing:-.4px;
  margin:0 0 10px
}

.redeem-copy p {
  max-width:350px;
  line-height:1.7
}

.chosen {
  height:42px;
  border-radius:10px;
  background:#f5f7fc;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 11px;
  color:#8793a6;
  margin-bottom:12px;
  font-size:13px
}

.chosen img {
  width:24px;
  height:24px;
  object-fit:cover;
  border-radius:7px
}

.chosen b {
  color:var(--ink)
}

.chosen small {
  margin-left:auto
}

form label {
  display:block;
  font-size:12px;
  font-weight:600;
  color:#64718a;
  margin:12px 0
}

form label small {
  font-weight:400;
  color:#9aa4b4
}

input,select {
  display:block;
  width:100%;
  height:43px;
  border:1px solid #e4e8f0;
  border-radius:9px;
  margin-top:7px;
  padding:0 12px;
  font:14px 'DM Sans',sans-serif;
  color:var(--ink);
  outline:0;
  background:white
}

input:focus,select:focus {
  border-color:#899aff;
  box-shadow:0 0 0 3px #7188ff17
}

input[type=file] {
  height:auto;
  padding:10px
}

.primary {
  border:0;
  border-radius:10px;
  background:linear-gradient(110deg,#536fed,#4963e5);
  color:#fff;
  padding:13px 18px;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 7px 15px #4968ed30;
  transition:.15s
}

.primary:hover {
  filter:brightness(1.05);
  transform:translateY(-1px)
}

#buyform .primary {
  width:100%;
  margin-top:9px;
  display:flex;
  justify-content:space-between
}

.narrow {
  max-width:460px;
  margin:70px auto
}

.narrow h1 {
  font:700 28px Manrope;
  margin:0
}

.muted {
  color:var(--muted);
  font-size:13px;
  line-height:1.6
}

.grid {
  display:grid;
  gap:15px
}

.two {
  grid-template-columns:1fr 1fr
}

.headrow {
  align-items:center;
  margin-top:8px
}

.headrow h1 {
  font-size:28px
}

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

.cardhead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px
}

.cardhead h2 {
  margin:0
}

.pill {
  display:inline-block;
  border:1px solid #e5e9f1;
  background:#fafbfe;
  border-radius:99px;
  padding:3px 5px;
  margin:10px;
  color:#596985;
  font-size:11px;
  font-weight:600
}

.balance {
  font:800 30px Manrope;
  color:var(--green);
  margin:5px 0 18px
}

.balance small {
  display:block;
  color:#98a3b4;
  font:500 11px 'DM Sans';
  margin-top:4px
}

.balance .cache-time {
  color:#8b97aa;
  font-size:11px;
  font-weight:500
}

.admin-action-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px
}

.admin-action-row button {
  width:auto;
  margin-top:0
}

.admin-action-row .quiet {
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 18px;
  background:#fff;
  cursor:pointer
}

.serviceform {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px 12px
}

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

.code-check,table th input[type=checkbox] {
  width:14px;
  height:14px;
  margin:0;
  accent-color:var(--blue)
}

.check input {
  width:16px;
  height:16px;
  margin:0
}

.serviceform button {
  align-self:end;
  height:43px
}

.service-list {
  margin-top:18px;
  border-top:1px solid var(--line)
}

.service-row {
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px 0;
  border-bottom:1px solid var(--line)
}

.service-row img,.service-row .service-icon {
  width:38px;
  height:38px;
  margin:0
}

.grow {
  flex:1
}

.grow b,.grow small {
  display:block
}

.grow small {
  color:#8b97a9;
  margin-top:4px;
  font-size:11px
}

.danger {
  border:1px solid #f2dfe2;
  background:#fff8f8;
  color:#c44e5a;
  border-radius:9px;
  padding:10px 13px;
  font-weight:600;
  cursor:pointer
}

.small {
  padding:7px 10px;
  font-size:11px
}

.admin-layout {
  max-width:1440px
}

.admin-shell {
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  align-items:start;
  gap:22px;
  margin-top:20px
}

.admin-sidebar {
  position:sticky;
  top:18px;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow)
}

.admin-tab {
  width:100%;
  border:0;
  border-radius:10px;
  padding:12px 14px;
  background:transparent;
  color:#64718a;
  text-align:left;
  font:600 14px 'DM Sans',sans-serif;
  cursor:pointer
}

.admin-tab:hover,.admin-tab.active {
  background:#eef1ff;
  color:var(--blue)
}

.admin-panels {
  min-width:0
}

.admin-panels > .card {
  width:100%;
  margin:0 0 18px
}

.admin-panels [hidden] {
  display:none!important
}

.admin-layout .grid.two {
  display:block!important
}

.admin-layout .grid.two>.card {
  width:100%;
  display:block
}

.admin-layout .two {
  grid-template-columns:1fr
}

.admin-layout .serviceform {
  grid-template-columns:1fr
}

@media(max-width:760px) {
  .admin-shell {
    grid-template-columns:1fr;
    gap:12px
  }

  .admin-sidebar {
    position:static;
    flex-direction:row;
    overflow-x:auto;
    padding:7px
  }

  .admin-tab {
    width:auto;
    flex:0 0 auto;
    padding:10px 12px;
    white-space:nowrap
  }
}

.tablewrap {
  overflow:auto;
  max-height:900px
}

.pager {
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
  flex-wrap:wrap
}

.pager a,.pager span {
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  font-size:12px
}

.pager .muted {
  border:0;
  background:transparent
}

table {
  border-collapse:collapse;
  width:100%;
  font-size:12px;
  white-space:nowrap
}

th {
  text-align:left;
  color:#8792a6;
  font-weight:600;
  background:#f8f9fc
}

td,th {
  padding:12px;
  border-bottom:1px solid #edf0f5
}

td small {
  display:block;
  color:#8e99aa;
  margin-top:4px
}

.status {
  background:#f1f3f8;
  color:#778197;
  border-radius:99px;
  padding:5px 9px;
  font-size:10px;
  font-weight:700
}

.status.pending,.status.locked {
  background:#fff4df;
  color:#ba8120
}

.status.received,.status.spent {
  background:#e8f7f1;
  color:#21835f
}

.status.bad {
  background:#fff0f0;
  color:#c24852
}

.alert,.success {
  padding:12px 15px;
  border-radius:10px;
  margin:14px 0;
  font-size:13px
}

.alert {
  background:#fff1f1;
  color:#b94450
}

.success {
  background:#eaf8f2;
  color:#21825f
}

.ordercard {
  max-width:700px;
  margin:35px auto
}

.numberbox,.smsbox {
  border-radius:13px;
  background:#f6f8fc;
  padding:17px;
  margin:13px 0;
  position:relative
}

.numberbox small,.smsbox small {
  display:block;
  color:#8b97aa;
  font-size:11px
}

.numberbox strong,.smsbox strong {
  display:block;
  font:700 22px Manrope;
  margin-top:7px;
  letter-spacing:.5px
}

.numberbox .pill {
  position:absolute;
  right:14px;
  top:22px;
  cursor:pointer
}

.smsbox strong {
  color:var(--blue)
}

.actions {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:15px
}

.center {
  text-align:center
}

.empty {
  grid-column:1/-1;
  text-align:center;
  padding:40px;
  color:#7c89a1;
  background:#fff;
  border-radius:14px;
  border:1px dashed #dce2ee
}

footer {
  text-align:center;
  color:#9aa4b4;
  font-size:11px;
  padding:15px 10px 35px
}

footer span {
  padding:0 7px
}

@media(max-width:760px) {
  .wrap {
    padding:15px 15px 45px
  }
  .top {
    height:66px;
    padding:0 16px
  }
  .hero {
    grid-template-columns:1fr;
    padding:35px 26px 18px;
    min-height:0
  }
  .hero h1 {
    font-size:41px
  }
  .hero-art {
    height:210px
  }
  .orb {
    width:190px;
    height:190px
  }
  .phone {
    transform:scale(.84) rotate(7deg)
  }
  .f1 {
    right:7%
  }
  .f2 {
    left:9%
  }
  .service-cards {
    grid-template-columns:repeat(2,1fr);
    gap:10px
  }
  .service-card {
    padding:14px
  }
  .redeem {
    grid-template-columns:1fr;
    gap:13px;
    padding:23px
  }
  .sectionhead {
    margin-top:30px
  }
  .card {
    padding:20px
  }
  .two {
    grid-template-columns:1fr;
    gap:0
  }
  .serviceform {
    grid-template-columns:repeat(2,1fr)
  }
  .headrow {
    align-items:start
  }
  .headrow h1 {
    font-size:24px
  }
  .trust {
    gap:13px;
    font-size:11px
  }
  .narrow {
    margin:35px auto
  }
  .actions button {
    flex:1
  }
  .ordercard {
    margin:20px auto
  }
  }

@media(max-width:390px) {
  .hero h1 {
    font-size:35px
  }
  .serviceform {
    grid-template-columns:1fr
  }
  .sectionhead h2 {
    font-size:19px
  }
  }


/* Order countdown: compact spacing beside the pending status. */
#order-countdown {
  padding: 3px 5px;
  margin: 10px;
}