/* ============================================================================
   Cloverlight — "AKINTI" katmanı (Cam & Derinlik v3) · 2026-09-30
   ----------------------------------------------------------------------------
   Fikir: Cam & Derinlik'in petrol/gece mavisi okyanusu aynı kalıyor; üstüne
   "biyolüminesan akıntı" ekleniyor — derinlikte yol gösteren camgöbeği ışık.
     1. Ölçüm ızgarası  : içerik zemininde çok ince, kenarlara doğru sönen ızgara
                          (cam kartların blur'u artık gerçekten bir şeyi bulanıklaştırıyor)
     2. Akıntı çizgisi  : topbar'ın altında soldan sağa akan 1px ışık
     3. Işık huzmesi    : aktif menü öğesi ve giriş kartı kenarında dolaşan ışık
                          (21st.dev "Border Beam" — dillionverma, id 1268)
     4. Spot ışığı      : kartlar imleci takip eden yumuşak bir ışık alır
                          (21st.dev "Spotlight Card" — preetsuthar17, id 2220; AkintiFx.tsx)
     5. Parıltı         : birincil butonlarda hover'da köşegen ışık süpürmesi
                          (21st.dev "Shimmer Button" — dillionverma, id 833)
     6. Derin zemin     : giriş ekranında kayan ızgara + nefes alan ışık
                          (21st.dev "Animated Grid" — rmahammad, id 29376)
     7. Tipografi       : mono "eyebrow" etiketler (UPPERCASE, geniş aralık, ışıklı tik),
                          KPI rakamları Fraunces display'de büyük
   Hepsi saf CSS (+ 1 küçük pointer dinleyicisi). Yeni npm bağımlılığı YOK.
   Kapsam: yalnız <html class="ak ..."> taşıyan uygulamalar. Tema sınıfları:
     ak-dark  → her zaman koyu (admin, seller-helper)
     ak-auto  → prefers-color-scheme (accounthealth)
     varsayılan → :root[data-theme="dark"] ile koyu (asin, ds, op60, invoice)
   Bu dosya TÜM iç panellerde BİREBİR AYNIDIR. Kanonik kopya:
   design-system/akinti.css — değişiklik önce orada yapılır, sonra kopyalanır.
   ========================================================================== */

html.ak {
  --ak-abyss: #020b12;
  --ak-deep: #041826;
  --ak-petrol: #0b3c5c;
  --ak-lift: #146c93;
  --ak-cyan: #4fc6ec;
  --ak-foam: #bff0ff;
  /* bağlama göre ışık rengi (açık modda petrol, koyu modda camgöbeği) */
  --ak-glow-rgb: 20, 108, 147;
  --ak-glow: rgb(var(--ak-glow-rgb));
  --ak-grid-line: rgba(11, 60, 92, 0.035);
  --ak-grid-major: rgba(11, 60, 92, 0.06);
  --ak-spot: rgba(var(--ak-glow-rgb), 0.09);
  --ak-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* font zinciri: her uygulama next/font değişkenini farklı adla ve farklı elemanda (html / .pnl /
   body) tanımlıyor — değişken çözümlemesi tanımlandığı elemanda yapıldığı için üç seviyede tekrar */
html.ak, html.ak body, html.ak .pnl {
  --ak-display: var(--font-pnl-display, var(--font-display, var(--font-op60-display, var(--font-clv-display, "Fraunces")))), "Fraunces", Georgia, "Times New Roman", serif;
  --ak-mono: var(--font-pnl-mono, var(--font-mono, var(--font-op60-mono, var(--font-clv-mono, var(--font-mono-loaded, "JetBrains Mono"))))), "JetBrains Mono", "IBM Plex Mono", Consolas, monospace;
}
html.ak[data-theme="dark"],
html.ak.ak-dark {
  --ak-glow-rgb: 79, 198, 236;
  --ak-grid-line: rgba(79, 198, 236, 0.022);
  --ak-grid-major: rgba(79, 198, 236, 0.045);
  --ak-spot: rgba(79, 198, 236, 0.1);
}
@media (prefers-color-scheme: dark) {
  html.ak.ak-auto:not([data-theme="light"]) {
    --ak-glow-rgb: 79, 198, 236;
    --ak-grid-line: rgba(79, 198, 236, 0.022);
    --ak-grid-major: rgba(79, 198, 236, 0.045);
    --ak-spot: rgba(79, 198, 236, 0.1);
  }
}

/* ---------- 0. Global incelikler ---------- */
html.ak ::selection { background: rgba(var(--ak-glow-rgb), 0.28); color: inherit; }
html.ak { scrollbar-color: rgba(var(--ak-glow-rgb), 0.35) transparent; scrollbar-width: thin; }
html.ak :focus-visible {
  outline: 2px solid rgba(var(--ak-glow-rgb), 0.9);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(var(--ak-glow-rgb), 0.16);
}
html.ak body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ---------- 1. Ölçüm ızgarası — içerik zemininde, kenarlara doğru söner ----------
   (21st.dev Animated Grid'in statik, iki katmanlı hâli: ince ızgara + 4× ana ızgara) */
html.ak :is(.app-content, .main, .ak-grid, .app-shell:has(> main.app-main), .app-shell > main.content) {
  background-image:
    linear-gradient(to right, var(--ak-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ak-grid-line) 1px, transparent 1px),
    linear-gradient(to right, var(--ak-grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ak-grid-major) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 128px 128px, 128px 128px;
  background-position: -1px -1px;
  background-attachment: local;
}

/* ---------- 2. Akıntı çizgisi — topbar alt kenarında akan ışık ---------- */
html.ak :is(.app-topbar, .topbar, .ak-topbar) {
  position: sticky;
  /* kalın cam: içerik altından kayarken gerçekten bulanıklaşsın (eski kural derlemede düşüyordu) */
  background-color: color-mix(in srgb, var(--p-surface, var(--workspace, var(--workspace-gray, #f3f5f1))) 74%, transparent) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
}
html.ak :is(.app-topbar, .topbar, .ak-topbar)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--ak-glow-rgb), 0) 30%,
    rgba(var(--ak-glow-rgb), 0.95) 50%,
    rgba(var(--ak-glow-rgb), 0) 70%,
    transparent 100%);
  background-size: 260% 100%;
  animation: ak-current 7s var(--ak-ease) infinite;
  opacity: 0.85;
}
@keyframes ak-current {
  0% { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}
/* sayfa başlığı: display font + ışıklı elmas */
html.ak :is(.app-topbar, .topbar) h1 {
  font-family: var(--ak-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
html.ak :is(.app-topbar, .topbar) h1::before {
  content: "";
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border-radius: 1.5px;
  background: rgb(var(--ak-glow-rgb));
  box-shadow: 0 0 0 3px rgba(var(--ak-glow-rgb), 0.16), 0 0 14px rgba(var(--ak-glow-rgb), 0.7);
  flex-shrink: 0;
}

/* ---------- 3. Kenar menüsü — derinlik + ışık huzmesi ---------- */
html.ak :is(.app-sidebar, .sidebar) {
  background:
    radial-gradient(420px 260px at 0% 0%, rgba(79, 198, 236, 0.16), transparent 70%),
    radial-gradient(360px 300px at 100% 100%, rgba(79, 198, 236, 0.07), transparent 70%),
    linear-gradient(180deg, #0b3c5c 0%, #062335 46%, #020b12 100%) !important;
}
/* sağ kenar: dikey akıntı çizgisi — yalnız masaüstü (mobilde menü yatay şerit/konumsuz olabiliyor) */
@media (min-width: 821px) {
html.ak :is(.app-sidebar, .sidebar)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(79, 198, 236, 0.55), transparent);
  background-size: 100% 240%;
  animation: ak-current-v 9s var(--ak-ease) infinite;
}
}
@keyframes ak-current-v {
  0% { background-position: 0 130%; }
  100% { background-position: 0 -130%; }
}
html.ak :is(.sidebar-link, .nav-item, .app-sidebar nav a, .sidebar nav a, .ak-nav-link) {
  position: relative;
  transition: background 0.25s var(--ak-ease), color 0.2s ease, transform 0.25s var(--ak-ease), box-shadow 0.25s var(--ak-ease);
}
html.ak :is(.sidebar-link, .nav-item, .app-sidebar nav a, .sidebar nav a, .ak-nav-link):hover {
  transform: translateX(3px);
}
html.ak :is(.sidebar-link.active, .nav-item.active, .app-sidebar nav a.active, .sidebar nav a.active, .ak-nav-link.active, .ak-nav-link[aria-current="page"]) {
  background: linear-gradient(90deg, rgba(79, 198, 236, 0.2), rgba(79, 198, 236, 0.04)) !important;
  border-color: rgba(79, 198, 236, 0.28) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 26px -14px rgba(79, 198, 236, 0.55);
}
/* sol ışık çubuğu */
html.ak :is(.sidebar-link.active, .nav-item.active, .app-sidebar nav a.active, .sidebar nav a.active, .ak-nav-link.active, .ak-nav-link[aria-current="page"])::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: #4fc6ec;
  box-shadow: 0 0 10px #4fc6ec, 0 0 22px rgba(79, 198, 236, 0.6);
}
/* kenarda dolaşan ışık (Border Beam uyarlaması — @property ile yörünge) */
html.ak :is(.sidebar-link.active, .nav-item.active, .app-sidebar nav a.active, .sidebar nav a.active, .ak-nav-link.active, .ak-nav-link[aria-current="page"], .ak-beam)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
  background: radial-gradient(60px 40px at var(--ak-beam-x, 0%) var(--ak-beam-y, 0%), #bff0ff, transparent 70%);
  animation: ak-beam-orbit 5s linear infinite;
}

/* ---------- 4. Kartlar — spot ışığı (imleci takip eder, AkintiFx.tsx) + rim ışığı ---------- */
html.ak :is(.card, .kpi-card, .pnl-tile, .pnl-greeting, .glass-card, .table-wrap, [data-ak-spot]) {
  background-image: radial-gradient(520px circle at var(--ak-x, -9999px) var(--ak-y, -9999px), var(--ak-spot), transparent 55%);
}
html.ak .pnl :is(.card, .kpi-card, .pnl-tile, .pnl-greeting) {
  background-image: radial-gradient(520px circle at var(--ak-x, -9999px) var(--ak-y, -9999px), var(--ak-spot), transparent 55%);
}
html.ak :is(.card, .glass-card):hover {
  border-color: rgba(var(--ak-glow-rgb), 0.3);
}

/* kart ve bölüm başlıkları: display serif */
html.ak :is(.card, .glass-card, .table-wrap, .pnl-section-head) > :is(h1, h2, h3):first-child,
html.ak :is(.card, .glass-card) > :first-child > :is(h1, h2, h3):first-child,
html.ak :is(.sidebar-brand, .app-sidebar .logo) :is(div, span):first-child {
  font-family: var(--ak-display);
  letter-spacing: -0.015em;
}

/* topbar'ı olmayan uygulamalarda sayfa başlığı (main içindeki h1) da display serif */
html.ak main h1 {
  font-family: var(--ak-display);
  letter-spacing: -0.02em;
}

/* KPI kartı: üst rim ışığı + mono eyebrow + büyük display rakam */
html.ak :is(.kpi-card) {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ak-ease), box-shadow 0.35s var(--ak-ease), border-color 0.25s ease !important;
}
html.ak :is(.kpi-card)::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--ak-glow-rgb), 0.85), transparent);
  opacity: 0.55;
  transition: opacity 0.3s ease, left 0.4s var(--ak-ease), right 0.4s var(--ak-ease);
}
html.ak :is(.kpi-card):hover {
  transform: translateY(-3px) !important;
  border-color: rgba(var(--ak-glow-rgb), 0.35) !important;
  box-shadow: 0 22px 44px -24px rgba(var(--ak-glow-rgb), 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
html.ak :is(.kpi-card):hover::after { opacity: 1; left: 0; right: 0; }
html.ak :is(.kpi-label, .kpi-card .label, .pnl-tile-label, .pnl-hero-label, .ak-eyebrow) {
  font-family: var(--ak-mono) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}
html.ak :is(.kpi-label, .kpi-card .label, .ak-eyebrow)::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: rgb(var(--ak-glow-rgb));
  box-shadow: 0 0 8px rgba(var(--ak-glow-rgb), 0.8);
  flex-shrink: 0;
}
html.ak :is(.kpi-value, .kpi-card .value) {
  font-family: var(--ak-display) !important;
  font-weight: 600 !important;
  font-size: clamp(26px, 2.4vw, 34px) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
  font-variant-numeric: tabular-nums lining-nums;
}

/* ---------- 5. Butonlar — birincilde ışık süpürmesi (Shimmer) ---------- */
html.ak :is(.btn-primary, .btn:not(.secondary):not(.ghost):not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-link), .ak-btn-shine) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
html.ak :is(.btn-primary, .btn:not(.secondary):not(.ghost):not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-link), .ak-btn-shine)::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: translateX(-160%) skewX(-18deg);
  transition: transform 0.75s var(--ak-ease);
  z-index: 1;
}
html.ak :is(.btn-primary, .btn:not(.secondary):not(.ghost):not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-link), .ak-btn-shine):hover:not(:disabled)::after {
  transform: translateX(330%) skewX(-18deg);
}
html.ak :is(.btn-primary, .ak-btn-shine):hover:not(:disabled) {
  box-shadow: 0 16px 34px -14px rgba(var(--ak-glow-rgb), 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* ---------- 6. Tablolar — ışıklı satır imleci ---------- */
html.ak table tbody tr > td:first-child { transition: box-shadow 0.25s var(--ak-ease); }
html.ak table tbody tr:hover > td:first-child { box-shadow: inset 3px 0 0 rgb(var(--ak-glow-rgb)); }
html.ak table thead th {
  font-family: var(--ak-mono);
  letter-spacing: 0.1em;
  font-size: 10.5px;
}

/* ---------- 7. Rozetler — "canlı" durumlar nabız atar ---------- */
html.ak :is(.badge-scanning, .badge-polling, .badge-active, .s-running, .badge-status.info, .ak-live)::before {
  animation: ak-pulse 1.8s ease-out infinite;
}
@keyframes ak-pulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 5px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- 8. Yükleniyor / boş durumlar ---------- */
html.ak :is(.pnl-skeleton, .skeleton, .cl-skeleton, .ak-skeleton) {
  background-image: linear-gradient(100deg, transparent 20%, rgba(var(--ak-glow-rgb), 0.16) 50%, transparent 80%) !important;
  background-size: 240% 100% !important;
  animation: ak-shimmer 1.6s linear infinite !important;
}
@keyframes ak-shimmer { from { background-position: 140% 0; } to { background-position: -140% 0; } }
html.ak :is(.pnl-empty, .ak-empty) { position: relative; }
html.ak :is(.pnl-empty, .ak-empty)::before {
  /* sonar halkaları */
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--ak-glow-rgb)) 0 3px, transparent 4px);
  box-shadow: 0 0 0 1px rgba(var(--ak-glow-rgb), 0.35);
  animation: ak-sonar 2.4s var(--ak-ease) infinite;
}
@keyframes ak-sonar {
  0% { box-shadow: 0 0 0 0 rgba(var(--ak-glow-rgb), 0.45), 0 0 0 1px rgba(var(--ak-glow-rgb), 0.35); }
  100% { box-shadow: 0 0 0 22px rgba(var(--ak-glow-rgb), 0), 0 0 0 1px rgba(var(--ak-glow-rgb), 0.35); }
}

/* ---------- 9. Sayfa girişi — içerik kademeli yükselir ---------- */
html.ak :is(.app-content, .main > .content, main.app-main, .app-shell > main.content, .ak-page) > * {
  animation: ak-rise 0.55s var(--ak-ease) both;
}
html.ak :is(.app-content, .main > .content, main.app-main, .app-shell > main.content, .ak-page) > *:nth-child(2) { animation-delay: 45ms; }
html.ak :is(.app-content, .main > .content, main.app-main, .app-shell > main.content, .ak-page) > *:nth-child(3) { animation-delay: 90ms; }
html.ak :is(.app-content, .main > .content, main.app-main, .app-shell > main.content, .ak-page) > *:nth-child(4) { animation-delay: 135ms; }
html.ak :is(.app-content, .main > .content, main.app-main, .app-shell > main.content, .ak-page) > *:nth-child(n+5) { animation-delay: 180ms; }
@keyframes ak-rise {
  from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ---------- 10. Giriş ekranı — derin zemin, kayan ızgara, ışık huzmeli kart ---------- */
html.ak :is(.login-shell, .login-wrap, .ak-login) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(79, 198, 236, 0.22), transparent 60%),
    radial-gradient(700px 500px at 110% 110%, rgba(20, 108, 147, 0.35), transparent 60%),
    linear-gradient(165deg, #0b3c5c 0%, #062335 45%, #020b12 100%) !important;
}
html.ak :is(.login-shell, .login-wrap, .ak-login)::before {
  content: "";
  position: absolute;
  inset: -128px;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(79, 198, 236, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 198, 236, 0.07) 1px, transparent 1px),
    linear-gradient(to right, rgba(79, 198, 236, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 198, 236, 0.12) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px, 128px 128px, 128px 128px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 20%, transparent 72%);
  animation: ak-grid-drift 28s linear infinite;
}
@keyframes ak-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(128px, 128px, 0); }
}
html.ak :is(.login-shell, .login-wrap, .ak-login)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 620px;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(79, 198, 236, 0.22), transparent 62%);
  animation: ak-breathe 9s ease-in-out infinite;
}
@keyframes ak-breathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
html.ak :is(.login-form-card, .login-card, .ak-login-card) {
  position: relative;
  background: rgba(8, 28, 42, 0.55) !important;
  border-color: rgba(79, 198, 236, 0.22) !important;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(79, 198, 236, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}
/* Border Beam: kart kenarında dolaşan camgöbeği ışık (@property yörüngesi; desteklemeyen tarayıcıda sabit köşe ışığı) */
html.ak :is(.login-form-card, .login-card, .ak-login-card)::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    pointer-events: none;
    box-sizing: border-box;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
    background: radial-gradient(120px 120px at var(--ak-beam-x, 0%) var(--ak-beam-y, 0%), #bff0ff, #4fc6ec 25%, transparent 70%);
    animation: ak-beam-orbit 6s linear infinite;
}
@property --ak-beam-x { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --ak-beam-y { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes ak-beam-orbit {
  0% { --ak-beam-x: 0%; --ak-beam-y: 0%; }
  25% { --ak-beam-x: 100%; --ak-beam-y: 0%; }
  50% { --ak-beam-x: 100%; --ak-beam-y: 100%; }
  75% { --ak-beam-x: 0%; --ak-beam-y: 100%; }
  100% { --ak-beam-x: 0%; --ak-beam-y: 0%; }
}
html.ak :is(.login-title, .login-card h1, .login-shell .display, .ak-login-title) {
  font-family: var(--ak-display) !important;
  letter-spacing: -0.02em;
}

/* ---------- Erişilebilirlik — hareket azaltma: tüm dekoratif hareket durur ---------- */
@media (prefers-reduced-motion: reduce) {
  html.ak *, html.ak *::before, html.ak *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  html.ak :is(.login-form-card, .login-card) { background: #0b3c5c !important; }
}