/* status.akcavpn.com: the akcavpn.com light theme, laid out like an incident.io
   status page. One column, cards with hairlines, 90 bars per service. */
:root{
  --bg: #ffffff; --bg-2: #f6f8fc; --bg-3: #eef2fa;
  --ink: #0a0c16; --ink-2: #3a3f55; --ink-3: #6b7088; --ink-4: #9aa0b4;
  --cf: #2E5BFF; --cf-soft: #f5f7ff;
  --line: rgba(10,12,22,.09); --line-2: rgba(10,12,22,.15);
  --up: #2fae6e; --up-soft: #e9f7ef;
  --warn: #e39b17; --warn-soft: #fdf4e3;
  --down: #e0484d; --down-soft: #fdecec;
  --none: #e4e8f0;
  --sans: "Inter", -apple-system, system-ui, sans-serif;
  --ease: cubic-bezier(.2,.7,.1,1);
}
*{ margin: 0; padding: 0; box-sizing: border-box; }
[hidden]{ display: none !important; }
html{ -webkit-text-size-adjust: 100%; }
body{ background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--sans); letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
body::before{ content: ""; position: fixed; inset: 0 0 auto; height: 420px; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse 50% 70% at 80% 0%, rgba(46,91,255,.07), transparent 70%), radial-gradient(ellipse 40% 60% at 10% 0%, rgba(242,85,158,.05), transparent 70%); }
a{ color: inherit; text-decoration: none; }
:focus-visible{ outline: 2px solid var(--cf); outline-offset: 3px; border-radius: 6px; }
.wrap{ width: 100%; max-width: 820px; margin: 0 auto; padding: 0 20px; }

/* Header and tabs */
.top{ border-bottom: 1px solid var(--line); background: rgba(255,255,255,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; }
.top-in{ display: flex; align-items: center; gap: 14px; height: 68px; }
.brand img{ display: block; height: 24px; width: auto; }
.brand-sep{ width: 1px; height: 20px; background: var(--line-2); }
.brand-page{ font-weight: 600; color: var(--ink-2); }
.touch{ margin-left: auto; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 600; font-size: 14px; background: #fff; transition: border-color .2s, background .2s; }
.touch:hover{ border-color: var(--ink-4); background: var(--bg-2); }
.tabs{ display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar{ display: none; }
.tabs a{ position: relative; padding: 12px 0 14px; font-size: 14px; font-weight: 500; color: var(--ink-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; transition: color .2s; }
.tabs a:hover{ color: var(--ink); }
.tabs a[aria-current="page"]{ color: var(--ink); }
.tabs a[aria-current="page"]::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
.count{ min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--cf); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }

main.wrap{ flex: 1; padding-top: 32px; padding-bottom: 64px; }
.panel-h{ font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-bottom: 18px; }

/* The answer, first */
.hero{ display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff;
  box-shadow: 0 1px 0 rgba(10,12,22,.03), 0 18px 40px -30px rgba(30,50,140,.35); }
.hero h1{ font-size: 22px; line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; }
.hero p{ margin-top: 2px; font-size: 14px; color: var(--ink-3); }
.hero-icon{ flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--ink-3); }
.hero-icon svg{ width: 24px; height: 24px; }
.hero-icon .flower{ width: 48px; height: 48px; overflow: visible; }
.hero[data-state="operational"] .hero-icon{ background: var(--cf-soft); }
.hero[data-state="degraded"] .hero-icon{ background: var(--warn-soft); color: var(--warn); }
.hero[data-state="outage"] .hero-icon, .hero[data-state="unreachable"] .hero-icon{ background: var(--down-soft); color: var(--down); }
.hero[data-state="maintenance"] .hero-icon{ background: var(--cf-soft); color: var(--cf); }
.hero[data-state="loading"] .hero-icon::after{ content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ink-4); border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Live notice (ongoing maintenance or incident) */
.live{ margin-top: 14px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.live b{ display: block; font-weight: 600; }
.live p{ margin-top: 2px; color: var(--ink-2); font-size: 14px; }
.live small{ display: block; margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.live.maintenance{ border-color: rgba(46,91,255,.25); background: var(--cf-soft); }
.live.incident{ border-color: rgba(227,155,23,.35); background: var(--warn-soft); }

/* Groups of services */
.group{ margin-top: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.group-h{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.group-h h2{ font-size: 15px; font-weight: 650; }
.pill{ display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.pill i{ width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.pill.up i{ background: var(--up); box-shadow: 0 0 0 3px var(--up-soft); }
.pill.degraded i{ background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.pill.down i{ background: var(--down); box-shadow: 0 0 0 3px var(--down-soft); }
.svc{ padding: 18px 24px 16px; }
.svc + .svc{ border-top: 1px solid var(--line); }
.svc-h{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.svc-h h3{ font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.svc-h h3 i{ width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.svc-h h3 i.up{ background: var(--up); }
.svc-h h3 i.degraded{ background: var(--warn); }
.svc-h h3 i.down{ background: var(--down); }
.svc-h span{ font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bars{ display: flex; gap: 2px; height: 34px; }
.bars i{ flex: 1; min-width: 0; border-radius: 2px; background: var(--none); transition: opacity .15s, transform .15s var(--ease); transform-origin: 50% 100%; }
.bars i.up{ background: var(--up); }
.bars i.degraded{ background: var(--warn); }
.bars i.down{ background: var(--down); }
.bars i:hover, .bars i.on{ transform: scaleY(1.12); }
.bars:hover i:not(:hover):not(.on){ opacity: .55; }
.bars i.mobile-hide{ display: none; }
.axis{ display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ink-4); }
.note{ margin-top: 18px; font-size: 13px; color: var(--ink-3); line-height: 1.55; }

/* Lists of maintenance and incidents */
.item{ padding: 18px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.item + .item{ margin-top: 12px; }
.item-h{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.item-h b{ font-weight: 600; font-size: 15px; }
.tag{ font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg-3); color: var(--ink-2); white-space: nowrap; }
.tag.ongoing{ background: var(--warn-soft); color: #9a6200; }
.tag.resolved{ background: var(--up-soft); color: #1d7a4c; }
.tag.planned{ background: var(--cf-soft); color: var(--cf); }
.item p{ margin-top: 6px; color: var(--ink-2); font-size: 14px; }
.item small{ display: block; margin-top: 8px; color: var(--ink-3); font-size: 13px; }
.empty{ padding: 28px 24px; border: 1px dashed var(--line-2); border-radius: 16px; text-align: center; color: var(--ink-3); }
.empty b{ display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

/* Day tooltip */
.tip{ position: fixed; z-index: 30; width: 240px; padding: 12px 14px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 13px; line-height: 1.45;
  box-shadow: 0 18px 40px -16px rgba(10,12,22,.5); pointer-events: none; }
.tip b{ display: block; font-weight: 600; }
.tip span{ display: block; color: rgba(255,255,255,.72); }
.tip em{ display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.14); font-style: normal; color: #fff; }

.foot{ display: flex; justify-content: space-between; gap: 16px; padding-bottom: 32px; font-size: 13px; color: var(--ink-3); }
.foot a{ color: var(--ink-2); font-weight: 500; }
.foot a:hover{ color: var(--cf); }

@media (max-width: 600px){
  .top-in{ height: 60px; gap: 10px; }
  .brand img{ height: 20px; }
  .touch{ padding: 7px 13px; font-size: 13px; }
  .hero{ padding: 18px; gap: 14px; }
  .hero h1{ font-size: 19px; }
  .group-h, .svc{ padding-left: 18px; padding-right: 18px; }
  .bars{ height: 30px; }
}
@media (prefers-reduced-motion: reduce){
  .bars i{ transition: none; }
  .hero[data-state="loading"] .hero-icon::after{ animation: none; }
}