.apok-v3{
  --bg-overlay: rgba(7, 15, 35, .32);
  --card-bg: rgba(255,255,255,.78);
  --shadow: 0 18px 60px rgba(10, 18, 38, .22);
  --blue: #2D6CDF;
  --mint: #28C7A8;
  --purple:#7C5CFF;
  --text:#0f1a33;
  --muted: rgba(15,26,51,.70);
  min-height: 100vh;
  position: relative;
  color: var(--text);
  padding: clamp(18px, 3vw, 40px) 16px;
}
.apok-v3__bg{
  position:absolute;
  inset:0;
  background-image: var(--apok-bg);
  background-size: cover;
  background-position:center;
  filter: blur(18px) saturate(1.05);
  transform: scale(1.06);
}
.apok-v3::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 600px at 15% 18%, rgba(45,108,223,.30), transparent 62%),
    radial-gradient(850px 520px at 85% 20%, rgba(40,199,168,.20), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.10) 100%),
    var(--bg-overlay);
}
.apok-v3__wrap{
  position:relative;
  z-index:2;
  width: min(1080px, 100%);
  margin: 0 auto;
}
.apok-v3__header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  padding: 18px 18px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.apok-v3__title{
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: .2px;
}
.apok-v3__subtitle{
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}
.apok-v3__clock{ text-align:right; }
.apok-v3__clock-time{ display:block; font-size: clamp(18px, 2.2vw, 26px); font-weight: 800; }
.apok-v3__clock-date{ display:block; font-size: 12px; color: var(--muted); }

.apok-v3__pills{ display:flex; flex-wrap:wrap; gap: 10px; margin: 12px 0 14px; }
.apok-v3__pill{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 10px 12px; border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 26px rgba(10,18,38,.14);
  font-size: 13px;
}
.apok-v3__pill-ico{ font-size: 16px; }

.apok-v3__grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.apok-v3__card{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 16px;
  backdrop-filter: blur(12px);
  min-height: 220px;
  display:flex;
  flex-direction:column;
}
.apok-v3__card-h{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 10px; }
.apok-v3__card-t{ font-size: 14px; font-weight: 800; }
.apok-v3__badge{
  font-size: 12px; padding: 6px 10px; border-radius: 999px;
  background: rgba(45,108,223,.10); color: var(--blue);
  border: 1px solid rgba(45,108,223,.12); font-weight: 700;
}
.apok-v3__badge--green{ background: rgba(40,199,168,.10); color: var(--mint); border-color: rgba(40,199,168,.16); }
.apok-v3__badge--purple{ background: rgba(124,92,255,.10); color: var(--purple); border-color: rgba(124,92,255,.18); }
.apok-v3__badge--blue{ background: rgba(45,108,223,.10); color: var(--blue); }

.apok-v3__chart{ position:relative; flex: 1; display:flex; align-items:center; justify-content:center; }
.apok-v3__chart--donut canvas{ max-width: 180px; max-height: 180px; }
.apok-v3__chart--bar canvas{ width: 100% !important; height: 150px !important; }

.apok-v3__mini{ display:flex; align-items:baseline; justify-content:space-between; margin-top: 10px; }
.apok-v3__mini-k{ font-size:12px; color: var(--muted); }
.apok-v3__mini-v{ font-size:14px; font-weight: 800; }

.apok-v3__timeline{ display:flex; gap: 12px; align-items:flex-start; padding: 10px 0; }
.apok-v3__tl-dot{ width: 12px; height: 12px; border-radius: 999px; background: var(--blue); margin-top: 3px; box-shadow: 0 0 0 6px rgba(45,108,223,.12); }
.apok-v3__tl-dot--muted{ background: rgba(15,26,51,.35); box-shadow: 0 0 0 6px rgba(15,26,51,.08); }
.apok-v3__tl-main{ font-weight: 800; font-size: 14px; }
.apok-v3__tl-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }

.apok-v3__progress{ margin-top: 8px; }
.apok-v3__progress-bar{ height: 10px; border-radius: 999px; background: rgba(15,26,51,.10); overflow:hidden; }
.apok-v3__progress-bar span{
  display:block; height: 100%; width: 0%;
  background: linear-gradient(90deg, rgba(40,199,168,.95), rgba(45,108,223,.95));
  border-radius: 999px;
  transition: width .9s ease;
}
.apok-v3__progress-meta{ display:flex; gap: 6px; align-items:baseline; margin-top: 10px; }
.apok-v3__muted{ color: var(--muted); font-size: 12px; margin-top: 8px; }

.apok-v3__cta{
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 50;
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; padding: 12px 16px; border-radius: 16px;
  color: #fff; background: var(--blue);
  box-shadow: 0 18px 40px rgba(45,108,223,.30);
  font-weight: 800;
  width: min(420px, calc(100% - 28px));
}
.apok-v3__spacer{ height: 84px; }

@media (max-width: 860px){
  .apok-v3__grid{ grid-template-columns: 1fr; }
  .apok-v3__header{ align-items:flex-start; }
  .apok-v3__clock{ text-align:left; }
}


/* V3.1 — Background pan (two images) */
.apok-v3__bg{
  background-image: var(--apok-bg);
  animation: apokPan 36s ease-in-out infinite alternate;
}
.apok-v3[data-apok-pan="0"] .apok-v3__bg{ animation: none; }
@keyframes apokPan{
  0%{ background-position: 20% 35%; background-image: var(--apok-bg); }
  50%{ background-position: 80% 30%; background-image: var(--apok-bg); }
  100%{ background-position: 20% 35%; background-image: var(--apok-bg2); }
}

/* V3.1 — Header proportions */
.apok-v3__header{
  padding: 14px 16px;
  gap: 12px;
  align-items: center;
}
.apok-v3__title{ font-size: clamp(20px, 2.2vw, 30px); }
.apok-v3__subtitle{ font-size: 13px; }

.apok-v3__right{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  min-width: 260px;
}
.apok-v3__clock-time{ font-size: clamp(16px, 1.8vw, 22px); }
.apok-v3__clock-date{ font-size: 11px; }

.apok-v3__header-pills{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}
.apok-v3__pill{
  padding: 8px 10px;
  font-size: 12px;
}
.apok-v3__pills{ display:none; }

/* Mobile: header stack + pills under title */
@media (max-width: 860px){
  .apok-v3__header{
    flex-direction: column;
    align-items: flex-start;
  }
  .apok-v3__right{
    align-items: flex-start;
    min-width: 0;
    width: 100%;
  }
  .apok-v3__header-pills{
    justify-content: flex-start;
  }
}