/* Pagami - single stylesheet (dark blue theme) */

:root{
  --bg: #0e1730;
  --bg-2: #122043;
  --card: #142a55;
  --text: #e6eefc;
  --muted: #afc0de;
  --border: rgba(230, 238, 252, 0.16);
  --primary: #2d7dff;
  --primary-2: #1b5fe0;
  --danger: #ff4d4d;
  --success: #17c964;
  --warning: #f5a524;
  --shadow: 0 10px 28px rgba(0,0,0,.28);
  --radius: 14px;
  --radius-sm: 10px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% 0%, #1a3770 0%, var(--bg) 58%) fixed;
}

/* Animated background like reference: dots + orb */
.bg-scene{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-dots{
  position:absolute;
  inset:-30px;
  background:
    radial-gradient(circle at 0 0, rgba(230,238,252,.14) 0 1px, transparent 2px) 0 0/64px 64px,
    radial-gradient(circle at 0 0, rgba(230,238,252,.08) 0 1px, transparent 2px) 20px 22px/86px 86px,
    radial-gradient(900px 520px at 75% -10%, rgba(68,215,255,.10), transparent 60%),
    radial-gradient(700px 520px at 15% 0%, rgba(45,125,255,.10), transparent 62%);
  opacity: .55;
  animation: dots-drift 26s linear infinite;
  filter: blur(.15px);
}
.bg-orb{
  position:absolute;
  right: -120px;
  top: -140px;
  width: min(720px, 64vw);
  height: auto;
  opacity: .7;
  transform-origin: 65% 45%;
  animation: orb-float 10s ease-in-out infinite;
}
.bg-waves{
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: .82;
  mix-blend-mode: screen;
  filter: none;
}
.bg-wave{
  stroke-dasharray: 18 10;
  opacity: .95;
}
.bg-wave-1{ animation: wave-dash 6.5s linear infinite, wave-drift 12s ease-in-out infinite; }
.bg-wave-2{ animation: wave-dash 8.5s linear infinite reverse, wave-drift 14s ease-in-out infinite; opacity:.7; }
.bg-wave-3{ animation: wave-dash 10.5s linear infinite, wave-drift 16s ease-in-out infinite; opacity:.55; }
.bg-wave-4{ animation: wave-dash 9.5s linear infinite, wave-drift 18s ease-in-out infinite; opacity:.34; }
.bg-wave-5{ animation: wave-dash 12.5s linear infinite reverse, wave-drift 22s ease-in-out infinite; opacity:.26; }
.bg-wave-6{ animation: wave-dash 14.5s linear infinite, wave-drift 26s ease-in-out infinite; opacity:.22; }
.bg-orb-rays{
  animation: rays-pulse 2.8s ease-in-out infinite;
  opacity: .85;
}
.bg-orb-scan{
  stroke-dasharray: 10 14;
  animation: scan 3.2s linear infinite;
  opacity: .9;
}
@keyframes dots-drift{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-80px, 36px, 0); }
}
@keyframes orb-float{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-10px, 12px, 0) scale(1.01); }
}
@keyframes rays-pulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:.95; }
}
@keyframes scan{
  0%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: 120; }
}
@keyframes wave-dash{
  0%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: 220; }
}
@keyframes wave-drift{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(-24px, 10px, 0); }
}

/* Keep content above background.
   Important: avoid creating a stacking context on `.page` (z-index),
   otherwise fixed overlays rendered inside `.page` can't appear above `.topbar`. */
.topbar{ position: relative; z-index: 1; }
.page{ position: relative; }

@media (prefers-reduced-motion: reduce){
  .bg-dots, .bg-orb, .bg-orb-rays, .bg-orb-scan, .bg-wave-1, .bg-wave-2, .bg-wave-3{ animation: none !important; }
}

a{ color: var(--text); text-decoration:none; }
a:hover{ text-decoration:underline; }
a.btn:hover, a.icon-btn:hover{ text-decoration: none; }

.container{
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(11, 18, 32, 0.72);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 0;
  gap: 18px;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}
.brand-name{
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1;
  background: linear-gradient(135deg, var(--text), rgba(230,238,252,0.70));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-logo{
  display:block;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  box-shadow: 0 12px 26px rgba(45,125,255,.18);
}
.brand-name{
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 14px;
  line-height: 1;
  background: linear-gradient(135deg, var(--text), rgba(230,238,252,0.70));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items:center;
}
.nav a{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--muted);
}
.nav a:hover{ text-decoration: none; }
.nav a[aria-current="page"], .nav a:hover{
  color: var(--text);
  background: rgba(230,238,252,0.07);
}

.page{
  padding: 26px 0 60px;
}

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 920px){
  .grid.cols-2{ grid-template-columns: 1.15fr .85fr; }
}

.card{
  background: linear-gradient(180deg, rgba(20,42,85,.92), rgba(18,32,67,.92));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card-header{
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.card-title{
  margin:0;
  font-size: 16px;
  letter-spacing: .2px;
}
.card-subtitle{
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.card-body{ padding: 18px; }

.btn{
  appearance:none;
  border: 1px solid rgba(230,238,252,0.16);
  background: rgba(230,238,252,0.06);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor:pointer;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
  font-weight: 600;
  letter-spacing: .2px;
}
.btn.small{
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
}
.btn.nowrap{ white-space: nowrap; }
.btn:hover{ background: rgba(230,238,252,0.10); border-color: rgba(230,238,252,0.22); }
.btn:active{ transform: translateY(1px); }
.btn.primary{
  border: none;
  background: linear-gradient(135deg, var(--primary), #44d7ff);
  color: #06101f;
}
.btn.primary:hover{ background: linear-gradient(135deg, var(--primary-2), #28c9ff); }
.btn.danger{ border-color: rgba(255,77,77,.35); background: rgba(255,77,77,.12); }

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(230,238,252,0.16);
  background: rgba(230,238,252,0.06);
  color: var(--text);
  text-decoration: none;
  transition: transform .06s ease, background .15s ease, border-color .15s ease;
}
.icon-btn i{ font-size: 14px; }
.icon-btn-danger{ border-color: rgba(255,77,77,.35); background: rgba(255,77,77,.12); }
.icon-btn-ok{ border-color: rgba(23,201,100,.35); background: rgba(23,201,100,.12); }
.icon-btn:hover{ background: rgba(230,238,252,0.10); border-color: rgba(230,238,252,0.22); }
.icon-btn:active{ transform: translateY(1px); }

.field{ display:flex; flex-direction:column; gap: 6px; }
.field label{ color: var(--muted); font-size: 13px; }
input, select, textarea{
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(230,238,252,0.16);
  background: rgba(6, 16, 31, 0.36);
  color: var(--text);
  outline: none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(45,125,255,.55);
  box-shadow: 0 0 0 4px rgba(45,125,255,.14);
}

.actions{ display:flex; gap: 10px; flex-wrap: wrap; align-items:center; }
.actions.actions-nowrap{ flex-wrap: nowrap; }
.hint{ color: var(--muted); font-size: 13px; line-height: 1.35; }

.code{
  display: block;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(230,238,252,0.14);
  background: rgba(6, 16, 31, 0.32);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
  max-width: 100%;
  overflow: auto;
}
.code-wrap{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Prevent long secrets from breaking tables/layout */
.table-wrap td .code{
  max-width: 520px;
  max-height: 140px;
}

.table-wrap{ overflow:auto; border-radius: 12px; border: 1px solid var(--border); }
table{ width:100%; border-collapse: collapse; min-width: 860px; }
thead th{
  text-align:left;
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(230,238,252,0.04);
  padding: 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
tbody td{
  padding: 12px;
  border-bottom: 1px solid rgba(230,238,252,0.08);
  vertical-align: top;
}
tbody tr:hover td{ background: rgba(230,238,252,0.03); }

.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(230,238,252,0.14);
  background: rgba(230,238,252,0.06);
}
.badge.ok{ border-color: rgba(23,201,100,.35); background: rgba(23,201,100,.12); }
.badge.ko{ border-color: rgba(255,77,77,.35); background: rgba(255,77,77,.12); }
.badge.init{ border-color: rgba(245,165,36,.35); background: rgba(245,165,36,.12); }
.badge.err{ border-color: rgba(255,77,77,.35); background: rgba(255,77,77,.12); }
.badge.auth{ border-color: rgba(45,125,255,.35); background: rgba(45,125,255,.12); }

/* Modal (admin helpers) */
.modal-backdrop[hidden]{ display:none !important; }
.modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 16, 31, 0.62);
  backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 18px;
}
.modal{
  width: min(720px, calc(100% - 20px));
  background: linear-gradient(180deg, rgba(20,42,85,.98), rgba(18,32,67,.98));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.modal-header{
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.modal-body{ padding: 16px; }

.footer{
  margin-top: 30px;
  color: rgba(157,176,209,.85);
  font-size: 12px;
}

.footer .fr-link{
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .15px;
}
.footer .fr-link:hover{ text-decoration: none; }
.footer .fr-heart{
  margin-left: 6px;
  vertical-align: -2px;
  fill: rgba(230,238,252,.72);
  transition: fill .15s ease, transform .15s ease;
}
.footer .fr-link:hover .fr-heart{
  fill: #ff3b5c;
  animation: fr-heart-pulse .75s ease-in-out infinite;
}
@keyframes fr-heart-pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.22); }
}