
:root{--bg:#050712;--panel:rgba(255,255,255,.08);--line:rgba(255,255,255,.16);--text:#f8fbff;--muted:#c1c9dd;--cyan:#00f5ff;--pink:#ff3d81;--violet:#7c3dff;--gold:#ffe66d;--green:#59ff91;--shadow:0 22px 60px rgba(0,0,0,.35)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:radial-gradient(circle at 80% 10%,rgba(124,61,255,.36),transparent 26%),radial-gradient(circle at 18% 20%,rgba(0,245,255,.24),transparent 24%),radial-gradient(circle at 48% 92%,rgba(255,61,129,.22),transparent 28%),linear-gradient(135deg,#050712,#0b1024 48%,#050712);color:var(--text);line-height:1.65}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(1220px,calc(100% - 28px));margin:auto;padding:10px 0;background:rgba(5,7,18,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:8px;font-weight:900}.brand img{width:34px;height:34px;object-fit:contain}.nav-mini{display:flex;flex-wrap:wrap;gap:5px}.nav-mini a,.key-card,.neon-btn,.back{border:1px solid var(--line);border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04));backdrop-filter:blur(16px)}.nav-mini a{padding:4px 9px;font-size:13px;color:var(--muted)}.hero-cinema{min-height:calc(100vh - 56px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);align-items:center;gap:24px;width:min(1220px,calc(100% - 28px));margin:auto;padding:34px 0 42px}.kicker{margin:0 0 8px;color:var(--gold);font-weight:900;font-size:13px;text-transform:uppercase;text-shadow:0 0 22px rgba(255,230,109,.35)}h1,h2,h3,p{margin-top:0}h1{margin-bottom:12px;font-size:clamp(40px,6vw,76px);line-height:1.03;text-shadow:0 0 34px rgba(0,245,255,.26),0 20px 50px rgba(0,0,0,.4)}h2{font-size:clamp(26px,3.3vw,42px);line-height:1.18;margin-bottom:10px}h3{font-size:21px;margin-bottom:8px}.lead{font-size:clamp(19px,2.1vw,25px);color:#dce7ff}.lead.wide{max-width:980px}.hero-orbit{position:relative;display:grid;place-items:center;min-height:330px}.hero-orbit:before{content:"";position:absolute;width:min(430px,74vw);aspect-ratio:1;border:1px solid rgba(0,245,255,.28);border-radius:50%;box-shadow:0 0 55px rgba(0,245,255,.2),inset 0 0 60px rgba(124,61,255,.16)}.hero-orbit img{width:min(260px,46vw);filter:drop-shadow(0 0 38px rgba(0,245,255,.34))}.key-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}.key-card{min-height:76px;padding:12px 14px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow);transition:.18s}.key-card:hover{transform:translateY(-3px);box-shadow:0 0 30px rgba(0,245,255,.24)}.key-card span{color:var(--cyan);font-size:12px;font-weight:900}.key-card strong{font-size:17px;line-height:1.25}.home-stack,.dense-grid,.split-page,.two-columns,.channels,.admin-shell,.contact-page{width:min(1220px,calc(100% - 28px));margin:auto}.info-strip,.contact-band,.payment-box,.login-card,.admin-panel{border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(18px);padding:20px;margin:14px 0}.info-strip p{color:var(--muted);font-size:18px}.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:14px 0}.stats article,.data-card,.register-card,.channel-card,.pay-chip{border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.04));box-shadow:0 16px 44px rgba(0,0,0,.25);padding:14px;backdrop-filter:blur(16px)}.stats strong{display:block;color:var(--cyan);font-size:30px;line-height:1;text-shadow:0 0 20px rgba(0,245,255,.45)}.stats span,.data-card p,.register-card p,.channel-card p,.note{color:var(--muted)}.inner-hero{width:min(1220px,calc(100% - 28px));margin:0 auto 14px;padding:38px 0 10px}.inner-hero p{max-width:920px;color:#dce7ff;font-size:20px}.dense-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.data-card{min-height:126px;display:flex;flex-direction:column;justify-content:space-between}.data-card b{font-size:18px}.data-card span{width:fit-content;color:var(--gold);font-weight:900}.split-page{display:grid;grid-template-columns:1.35fr .65fr;gap:12px}.register-grid,.mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.payment-box{margin:0}.pay-chip{margin-bottom:8px}.pay-chip span{display:block;color:var(--green);font-weight:900}.pay-chip strong{display:block;overflow-wrap:anywhere;text-align:left}.mail-form{display:grid;gap:8px}.mail-form input,.mail-form textarea,#adminEmail,#adminPass,#jsonOutput,.edit-row input,.edit-row textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;padding:10px 12px;font:inherit}.mail-form textarea{min-height:96px;resize:vertical}.neon-btn{min-height:38px;padding:8px 14px;color:#fff;font-weight:900;cursor:pointer;background:linear-gradient(135deg,var(--cyan),var(--violet) 55%,var(--pink));box-shadow:0 0 28px rgba(0,245,255,.28)}.neon-btn.ghost{background:rgba(255,255,255,.08)}.neon-btn.danger{background:linear-gradient(135deg,#ff3d81,#7c3dff)}.two-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.two-columns section{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.06);padding:14px}.data-card.small{min-height:108px}.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.channel-card{min-height:210px;display:flex;flex-direction:column;justify-content:center;text-align:center}.channel-card span{font-size:42px;color:var(--pink);text-shadow:0 0 26px rgba(255,61,129,.45)}.admin-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.hidden{display:none}.editable-list{display:grid;gap:8px}.edit-row{display:grid;grid-template-columns:1fr 1.5fr auto;gap:8px;border:1px solid var(--line);border-radius:14px;padding:10px;background:rgba(255,255,255,.05)}#jsonOutput{min-height:170px;margin-top:10px;direction:ltr}.contact-page{max-width:760px}.mail-form.full{border:1px solid var(--line);border-radius:18px;background:var(--panel);padding:18px}.back{display:flex;width:fit-content;margin:18px auto 28px;padding:8px 14px;color:#fff}.compact article{min-height:92px}.register-card{min-height:150px}@media(max-width:980px){.hero-cinema,.split-page,.two-columns{grid-template-columns:1fr}.key-grid,.dense-grid,.stats,.channels{grid-template-columns:repeat(2,1fr)}.hero-cinema{min-height:auto}.hero-orbit{min-height:220px}}@media(max-width:620px){.topbar{align-items:flex-start;flex-direction:column}.key-grid,.dense-grid,.stats,.register-grid,.mini-grid,.channels{grid-template-columns:1fr}.nav-mini a{font-size:12px;padding:4px 8px}h1{font-size:42px}.info-strip,.contact-band,.payment-box,.login-card,.admin-panel{padding:14px}.edit-row{grid-template-columns:1fr}.hero-cinema{padding-top:24px}}


/* Arkan neon network polish */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}

body::before {
  background:
    linear-gradient(90deg, rgba(0,245,255,.085) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,61,129,.07) 1px, transparent 1px),
    radial-gradient(circle at 18% 24%, rgba(0,245,255,.38), transparent 19%),
    radial-gradient(circle at 80% 18%, rgba(255,230,109,.25), transparent 18%),
    radial-gradient(circle at 70% 86%, rgba(124,61,255,.36), transparent 25%);
  background-size: 74px 74px, 74px 74px, auto, auto, auto;
  opacity: .9;
}

body::after {
  background:
    linear-gradient(120deg, transparent 0 22%, rgba(0,245,255,.16) 22.2%, transparent 22.8% 52%, rgba(255,61,129,.14) 52.2%, transparent 52.8%),
    radial-gradient(circle at 12% 80%, rgba(89,255,145,.2), transparent 18%);
  filter: blur(.2px);
  opacity: .75;
}

.digital-nav {
  border: 1px solid rgba(0,245,255,.18);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  padding-inline: 10px;
}

.logo-brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  padding: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 18px rgba(0,245,255,.35), 0 0 30px rgba(255,230,109,.18);
}

.logo-brand span {
  font-size: 14px;
  letter-spacing: 0;
}

.home-return {
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 12px;
  margin: 10px auto 0;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid rgba(0,245,255,.28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0,245,255,.18), rgba(124,61,255,.2), rgba(255,61,129,.18));
  box-shadow: 0 0 24px rgba(0,245,255,.18);
  backdrop-filter: blur(16px);
}

.top-return:hover,
.back:hover,
.key-card:hover,
.data-card:hover,
.channel-card:hover {
  border-color: rgba(255,230,109,.42);
  box-shadow: 0 0 26px rgba(0,245,255,.32), 0 0 44px rgba(255,61,129,.18);
}

.hero-cinema,
.inner-hero,
.info-strip,
.contact-band,
.payment-box,
.login-card,
.admin-panel,
.two-columns section {
  position: relative;
  overflow: hidden;
}

.hero-cinema::before,
.inner-hero::before,
.info-strip::before,
.payment-box::before,
.two-columns section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 0 34%, rgba(0,245,255,.14) 34.2%, transparent 35%),
    linear-gradient(68deg, transparent 0 58%, rgba(255,230,109,.10) 58.2%, transparent 59%);
  opacity: .72;
  pointer-events: none;
}

.hero-cinema > *,
.inner-hero > *,
.info-strip > *,
.payment-box > *,
.two-columns section > * {
  position: relative;
  z-index: 1;
}

.key-card:nth-child(6n+1){background:linear-gradient(135deg,rgba(0,245,255,.24),rgba(124,61,255,.13));}
.key-card:nth-child(6n+2){background:linear-gradient(135deg,rgba(255,61,129,.22),rgba(255,230,109,.12));}
.key-card:nth-child(6n+3){background:linear-gradient(135deg,rgba(89,255,145,.18),rgba(0,245,255,.13));}
.key-card:nth-child(6n+4){background:linear-gradient(135deg,rgba(124,61,255,.25),rgba(255,61,129,.12));}
.key-card:nth-child(6n+5){background:linear-gradient(135deg,rgba(255,230,109,.18),rgba(0,245,255,.12));}
.key-card:nth-child(6n){background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(124,61,255,.18));}

.back {
  border-color: rgba(0,245,255,.28);
  background: linear-gradient(135deg, rgba(0,245,255,.16), rgba(255,61,129,.14));
}

@media(max-width:620px){
  .logo-brand img{width:29px;height:29px;}
  .logo-brand span{font-size:13px;}
  .home-return{margin-top:8px;font-size:12px;}
}

/* Nada review fixes - mobile service details */
.compact-hero {
  padding-bottom: 6px;
}

.service-picker .data-card {
  cursor: pointer;
}

.service-picker .data-card span {
  width: fit-content;
  color: var(--gold);
  font-weight: 900;
}

.details-zone {
  width: min(1220px, calc(100% - 28px));
  margin: 16px auto 0;
}

.section-title {
  margin: 18px 0 10px;
}

.detail-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.service-detail {
  scroll-margin-top: 96px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .045)),
    radial-gradient(circle at 90% 20%, rgba(0, 245, 255, .12), transparent 32%);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .26);
  backdrop-filter: blur(16px);
}

.service-detail:target {
  border-color: rgba(255, 230, 109, .58);
  box-shadow: 0 0 28px rgba(255, 230, 109, .22), 0 20px 54px rgba(0, 0, 0, .34);
}

.detail-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 26px;
  margin-bottom: 8px;
  border-radius: 999px;
  color: #06101c;
  font-weight: 900;
  background: linear-gradient(135deg, var(--gold), var(--cyan));
}

.service-detail h3 {
  margin-bottom: 6px;
}

.service-detail p {
  margin-bottom: 0;
  color: var(--muted);
}

@media(max-width:760px) {
  .detail-list-grid,
  .service-detail {
    grid-template-columns: 1fr;
  }

  .service-detail {
    scroll-margin-top: 130px;
  }
}

/* 2026-05-23 interface reference refresh */
:root {
  --ref-bg: #030616;
  --ref-ink: #f8fbff;
  --ref-muted: #aeb8d4;
  --ref-panel: rgba(10, 18, 45, .74);
  --ref-panel-2: rgba(20, 28, 68, .58);
  --ref-line: rgba(132, 222, 255, .18);
  --ref-cyan: #20e7ff;
  --ref-violet: #8c4dff;
  --ref-pink: #ff3fa4;
  --ref-orange: #ff8b3d;
  --ref-green: #2dffc2;
}

body {
  background:
    radial-gradient(circle at 74% 7%, rgba(255, 63, 164, .28), transparent 24%),
    radial-gradient(circle at 20% 18%, rgba(32, 231, 255, .2), transparent 23%),
    linear-gradient(120deg, rgba(32,231,255,.045) 1px, transparent 1px),
    linear-gradient(60deg, rgba(140,77,255,.05) 1px, transparent 1px),
    linear-gradient(180deg, #050816 0%, #06102a 46%, #030616 100%);
  background-size: auto, auto, 86px 86px, 112px 112px, auto;
  color: var(--ref-ink);
}

.topbar {
  width: min(1320px, calc(100% - 34px));
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid var(--ref-line);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(8, 13, 34, .86), rgba(16, 23, 58, .64));
  box-shadow: 0 18px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.nav-mini a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  color: #dfe8ff;
  border: 1px solid transparent;
}

.nav-mini a:hover {
  color: #fff;
  border-color: rgba(32, 231, 255, .28);
  background: linear-gradient(135deg, rgba(32, 231, 255, .12), rgba(140, 77, 255, .14));
}

.logo-brand img {
  background: transparent;
  box-shadow: 0 0 22px rgba(32, 231, 255, .34), 0 0 34px rgba(255, 63, 164, .18);
}

.hero-cinema,
.inner-hero,
.admin-hero {
  width: min(1320px, calc(100% - 34px));
  border: 1px solid var(--ref-line);
  border-radius: 28px;
  background:
    linear-gradient(90deg, rgba(5, 8, 22, .72), rgba(7, 13, 36, .4)),
    radial-gradient(circle at 72% 18%, rgba(255, 63, 164, .35), transparent 28%),
    radial-gradient(circle at 30% 70%, rgba(32, 231, 255, .18), transparent 30%);
  box-shadow: 0 28px 85px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}

.hero-cinema {
  min-height: auto;
  margin-top: 16px;
  padding: 42px 34px;
}

.hero-cinema::after,
.inner-hero::after,
.admin-hero::after {
  content: "";
  position: absolute;
  inset: auto 5% 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ref-cyan), var(--ref-pink), transparent);
  opacity: .9;
}

h1 {
  font-size: clamp(42px, 5.4vw, 74px);
  line-height: 1.05;
  text-shadow: 0 0 42px rgba(32, 231, 255, .22), 0 20px 58px rgba(0,0,0,.48);
}

h1::first-letter,
.kicker,
.key-card span,
.data-card span,
.detail-badge {
  color: var(--ref-green);
}

.lead,
.inner-hero p,
.info-strip p,
.contact-band p,
.service-detail p,
.data-card p,
.register-card p,
.channel-card p,
.note {
  color: var(--ref-muted);
}

.key-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.key-card,
.data-card,
.register-card,
.channel-card,
.info-strip,
.contact-band,
.stats article,
.service-detail,
.payment-box,
.login-card,
.admin-panel,
.two-columns section {
  border: 1px solid var(--ref-line);
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    radial-gradient(circle at 80% 10%, rgba(32, 231, 255, .13), transparent 35%);
  box-shadow: 0 18px 54px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
}

.key-card {
  min-height: 126px;
  border-radius: 20px;
  padding: 16px;
}

.key-card strong {
  font-size: 17px;
}

.stats {
  width: min(1320px, calc(100% - 34px));
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.stats article {
  min-height: 96px;
  border-radius: 18px;
  text-align: center;
}

.stats strong {
  color: var(--ref-pink);
}

.home-stack,
.dense-grid,
.split-page,
.two-columns,
.channels,
.details-zone,
.admin-dashboard,
.contact-page {
  width: min(1320px, calc(100% - 34px));
}

.dense-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.data-card,
.register-card,
.channel-card {
  border-radius: 20px;
}

.data-card:hover,
.key-card:hover,
.register-card:hover,
.channel-card:hover {
  transform: translateY(-2px);
  border-color: rgba(32, 231, 255, .42);
  box-shadow: 0 0 34px rgba(32, 231, 255, .2), 0 22px 64px rgba(0,0,0,.36);
}

.neon-btn,
.home-return,
.back {
  background: linear-gradient(135deg, var(--ref-orange), var(--ref-pink) 48%, var(--ref-cyan));
  border: 0;
  box-shadow: 0 0 28px rgba(255, 63, 164, .28), 0 0 34px rgba(32, 231, 255, .16);
}

.neon-btn.ghost {
  background: linear-gradient(135deg, rgba(32, 231, 255, .16), rgba(140, 77, 255, .18));
  border: 1px solid var(--ref-line);
}

.hero-orbit::before {
  border-color: rgba(32, 231, 255, .3);
  box-shadow: 0 0 70px rgba(32, 231, 255, .18), inset 0 0 70px rgba(255, 63, 164, .16);
}

.admin-dashboard-body {
  min-height: 100vh;
}

.admin-hero {
  display: grid;
  grid-template-columns: 1fr 240px;
  align-items: center;
  gap: 18px;
  margin: 16px auto;
  padding: 34px;
  position: relative;
}

.admin-hero p {
  max-width: 760px;
}

.admin-orb {
  display: grid;
  place-items: center;
  min-height: 190px;
  border: 1px solid rgba(32, 231, 255, .22);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 40%, rgba(32, 231, 255, .2), transparent 44%),
    linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
  box-shadow: inset 0 0 50px rgba(140,77,255,.16), 0 0 38px rgba(32,231,255,.14);
}

.admin-orb span {
  color: var(--ref-green);
  font-weight: 900;
}

.admin-orb strong {
  font-size: 54px;
  line-height: 1;
}

.admin-dashboard {
  display: grid;
  gap: 14px;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-metrics article {
  padding: 18px;
  border: 1px solid var(--ref-line);
  border-radius: 20px;
  background: var(--ref-panel);
}

.admin-metrics span {
  display: block;
  color: var(--ref-muted);
}

.admin-metrics strong {
  display: block;
  margin-top: 6px;
  color: var(--ref-cyan);
  font-size: 34px;
}

.admin-login-panel {
  display: grid;
  grid-template-columns: 1.1fr repeat(2, minmax(180px, .6fr)) auto;
  align-items: end;
  gap: 10px;
  margin: 0;
  padding: 18px;
}

.admin-workspace {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  padding: 16px;
}

.admin-side {
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(32,231,255,.09), rgba(255,63,164,.07));
}

.admin-editor-zone {
  min-width: 0;
}

.editable-list {
  gap: 10px;
}

.edit-row {
  grid-template-columns: 280px 1fr auto;
  border-color: var(--ref-line);
  background: rgba(255,255,255,.055);
}

.mail-form input,
.mail-form textarea,
#adminEmail,
#adminPass,
#jsonOutput,
.edit-row input,
.edit-row textarea {
  border-color: var(--ref-line);
  background: rgba(3, 8, 28, .54);
  color: #fff;
}

@media(max-width: 1060px) {
  .key-grid,
  .dense-grid,
  .stats,
  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-login-panel,
  .admin-workspace,
  .admin-hero {
    grid-template-columns: 1fr;
  }
}

@media(max-width: 620px) {
  .topbar,
  .hero-cinema,
  .inner-hero,
  .admin-hero,
  .home-stack,
  .dense-grid,
  .split-page,
  .two-columns,
  .channels,
  .details-zone,
  .admin-dashboard,
  .contact-page,
  .stats {
    width: min(100% - 22px, 1320px);
  }

  .hero-cinema,
  .inner-hero,
  .admin-hero {
    border-radius: 22px;
    padding: 22px 16px;
  }

  .key-grid,
  .dense-grid,
  .stats,
  .mini-grid,
  .admin-metrics {
    grid-template-columns: 1fr;
  }
}

/* Operational payment/contact page */
.payment-layout {
  width: min(1320px, calc(100% - 34px));
  margin: 16px auto 36px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: 14px;
}

.payment-form-panel,
.payment-live-panel,
.payment-confirm-box {
  border: 1px solid var(--ref-line);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    radial-gradient(circle at 15% 20%, rgba(32, 231, 255, .12), transparent 34%),
    radial-gradient(circle at 90% 80%, rgba(255, 63, 164, .13), transparent 34%);
  box-shadow: 0 18px 54px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 18px;
  backdrop-filter: blur(18px);
}

.server-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.server-form label {
  display: grid;
  gap: 7px;
  color: #fff;
  font-weight: 900;
}

.server-form input,
.server-form select,
.server-form textarea {
  width: 100%;
  border: 1px solid var(--ref-line);
  border-radius: 14px;
  background: rgba(3, 8, 28, .62);
  color: #fff;
  padding: 11px 12px;
  font: inherit;
}

.server-form textarea {
  min-height: 120px;
  resize: vertical;
}

.wide-input {
  grid-column: 1 / -1;
}

.trap-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.request-result {
  display: none;
  margin-bottom: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--ref-line);
}

.request-result.ok,
.request-result.error {
  display: grid;
  gap: 8px;
}

.request-result.ok {
  background: rgba(45, 255, 194, .12);
}

.request-result.error {
  background: rgba(255, 63, 164, .13);
}

.request-result small {
  color: var(--ref-green);
}

.payment-live-panel .pay-chip {
  margin-bottom: 10px;
}

.pay-chip.pending {
  border-color: rgba(255, 139, 61, .32);
}

.payment-cta {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
}

.payment-confirm-box {
  grid-column: 1 / -1;
}

@media(max-width: 860px) {
  .payment-layout,
  .server-form {
    grid-template-columns: 1fr;
  }
}


/* 2026-05-30-v1 polish */
.site-footer{position:relative;overflow:hidden;width:min(1220px,calc(100% - 28px));margin:26px auto 18px;padding:16px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;border:1px solid rgba(132,222,255,.2);border-radius:18px;background:linear-gradient(135deg,rgba(8,13,34,.78),rgba(25,32,76,.52));box-shadow:0 18px 52px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(18px)}.footer-glow{position:absolute;inset:auto -12% -60% -12%;height:110px;background:linear-gradient(90deg,rgba(32,231,255,.18),rgba(255,63,164,.18),rgba(45,255,194,.15));filter:blur(28px);pointer-events:none}.footer-brand,.footer-links{position:relative;z-index:1}.footer-brand{display:flex;align-items:center;gap:10px}.footer-brand img{width:44px;height:44px;object-fit:contain;opacity:.88;filter:drop-shadow(0 0 18px rgba(32,231,255,.38))}.footer-brand strong{display:block;font-size:18px}.footer-brand p,.footer-note{margin:0;color:var(--ref-muted,#aeb8d4);font-size:13px}.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px}.footer-links a{min-height:30px;display:inline-flex;align-items:center;padding:5px 10px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#f8fbff;background:rgba(255,255,255,.055);font-size:13px}.footer-note{grid-column:1/-1;position:relative;z-index:1;text-align:center;color:rgba(255,230,109,.82)}.projects-band{width:min(1220px,calc(100% - 28px));margin:14px auto 0}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.project-card{min-height:190px;padding:16px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(132,222,255,.19);border-radius:16px;background:linear-gradient(145deg,rgba(255,255,255,.115),rgba(255,255,255,.045)),radial-gradient(circle at 92% 18%,rgba(32,231,255,.14),transparent 28%);box-shadow:0 18px 48px rgba(0,0,0,.28);backdrop-filter:blur(16px)}.project-card:nth-child(4n+1){background:linear-gradient(145deg,rgba(32,231,255,.16),rgba(255,255,255,.045))}.project-card:nth-child(4n+2){background:linear-gradient(145deg,rgba(255,63,164,.15),rgba(255,255,255,.045))}.project-card:nth-child(4n+3){background:linear-gradient(145deg,rgba(140,77,255,.17),rgba(255,255,255,.045))}.project-card:nth-child(4n){background:linear-gradient(145deg,rgba(45,255,194,.13),rgba(255,255,255,.045))}.project-card span{display:inline-flex;width:fit-content;min-width:36px;min-height:28px;align-items:center;justify-content:center;border-radius:999px;color:#06101c;font-weight:900;background:linear-gradient(135deg,var(--gold),var(--cyan))}.project-card h3{margin:10px 0 6px}.project-card p{color:var(--muted);margin-bottom:12px}.hidden-settings-page{min-height:100vh;display:grid;place-items:center}.hidden-settings-logo{width:74px;height:74px;object-fit:contain;margin:0 auto 10px;opacity:.9;filter:drop-shadow(0 0 22px rgba(32,231,255,.42))}.admin-private-nav .nav-mini a{border-color:rgba(255,230,109,.3)}.request-result{margin-top:12px;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07)}.request-result.ok{border-color:rgba(45,255,194,.45)}.request-result.error{border-color:rgba(255,63,164,.45)}@media(max-width:980px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer{grid-template-columns:1fr}.footer-links{justify-content:flex-start}}@media(max-width:620px){.project-grid{grid-template-columns:1fr}.site-footer{padding:14px}.footer-brand{align-items:flex-start}}


/* Youth projects three-column table layout */
.youth-board {
  width: min(1480px, calc(100% - 18px));
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
  padding-bottom: 8px;
}
.youth-board .projects-band {
  width: 100%;
  margin: 0;
  min-width: 0;
  border: 1px solid rgba(132,222,255,.18);
  border-radius: 18px;
  padding: 12px;
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(16px);
}
.youth-board .section-title {
  min-height: 94px;
  margin: 0 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.youth-board .section-title h2 {
  font-size: 24px;
  line-height: 1.25;
}
.youth-board .project-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
.youth-board .project-card {
  min-height: 178px;
  padding: 13px;
}
.youth-board .project-card h3 {
  font-size: 18px;
}
.youth-board .project-card p {
  font-size: 14px;
  line-height: 1.55;
}
.youth-board .project-card .neon-btn {
  width: fit-content;
  min-height: 34px;
  padding: 7px 12px;
  font-size: 13px;
}
@media(max-width:1100px){
  .youth-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; width: calc(100% - 10px); }
  .youth-board .projects-band { padding: 8px; }
  .youth-board .section-title { min-height: 76px; }
  .youth-board .section-title h2 { font-size: 18px; }
  .youth-board .project-grid { grid-template-columns: 1fr; gap: 7px; }
  .youth-board .project-card { min-height: 150px; padding: 9px; }
  .youth-board .project-card h3 { font-size: 15px; line-height: 1.25; }
  .youth-board .project-card p { font-size: 12px; line-height: 1.45; }
  .youth-board .project-card .neon-btn { min-height: 30px; padding: 6px 9px; font-size: 12px; }
}
@media(max-width:620px){
  .youth-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; width: calc(100% - 6px); }
  .youth-board .projects-band { padding: 6px; border-radius: 12px; }
  .youth-board .section-title { min-height: 68px; margin-bottom: 7px; }
  .youth-board .section-title .kicker { font-size: 10px; }
  .youth-board .section-title h2 { font-size: 14px; }
  .youth-board .project-card { min-height: 132px; padding: 7px; border-radius: 12px; }
  .youth-board .project-card span { min-width: 26px; min-height: 22px; font-size: 11px; }
  .youth-board .project-card h3 { font-size: 12px; }
  .youth-board .project-card p { font-size: 10px; line-height: 1.35; }
  .youth-board .project-card .neon-btn { min-height: 26px; padding: 4px 7px; font-size: 10px; }
}


/* FORCE youth projects to show as three visible side-by-side columns */
body:has(.youth-board) {
  overflow-x: hidden;
}
.youth-board {
  width: min(1760px, calc(100vw - 28px)) !important;
  max-width: none !important;
  margin: 16px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
  direction: ltr !important;
  overflow: visible !important;
  padding: 0 0 10px !important;
}
.youth-board .youth-column {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  direction: rtl !important;
}
.youth-board .youth-column-1 { order: 3; }
.youth-board .youth-column-2 { order: 2; }
.youth-board .youth-column-3 { order: 1; }
.youth-board .project-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}
.youth-board .project-card {
  width: 100% !important;
  min-width: 0 !important;
}



/* 3D stacked project cards for youth columns */
.youth-board {
  perspective: 1200px !important;
}
.youth-board .project-grid {
  perspective: 900px !important;
}
.youth-board .project-card {
  position: relative !important;
  isolation: isolate !important;
  transform-style: preserve-3d !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.055)),
    radial-gradient(circle at 12% 15%, rgba(32,231,255,.28), transparent 34%),
    radial-gradient(circle at 88% 85%, rgba(255,63,164,.20), transparent 36%) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.38),
    0 0 0 1px rgba(32,231,255,.08) inset,
    0 0 28px rgba(32,231,255,.12) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.youth-board .project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 38%, rgba(255,230,109,.10) 72%, transparent) !important;
  opacity: .72;
  pointer-events: none;
  z-index: -1;
}
.youth-board .project-card::after {
  content: "";
  position: absolute;
  inset-inline: 10px;
  bottom: -9px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  filter: blur(8px);
  transform: translateZ(-22px);
  z-index: -2;
}
.youth-board .project-card:nth-child(3n+1) {
  transform: rotateX(1.3deg) rotateY(-1.2deg) translateZ(0) !important;
}
.youth-board .project-card:nth-child(3n+2) {
  transform: rotateX(.6deg) rotateY(1.1deg) translateZ(0) !important;
}
.youth-board .project-card:nth-child(3n) {
  transform: rotateX(1deg) rotateY(.2deg) translateZ(0) !important;
}
.youth-board .project-card:hover {
  transform: translateY(-6px) rotateX(0deg) rotateY(0deg) scale(1.015) !important;
  border-color: rgba(255,230,109,.52) !important;
  box-shadow:
    0 26px 48px rgba(0,0,0,.48),
    0 0 34px rgba(32,231,255,.26),
    0 0 42px rgba(255,63,164,.16) !important;
}
.youth-board .project-card span {
  box-shadow: 0 8px 18px rgba(0,0,0,.26), 0 0 16px rgba(255,230,109,.28) !important;
}
.youth-board .project-card .neon-btn {
  box-shadow: 0 10px 22px rgba(0,0,0,.28), 0 0 18px rgba(32,231,255,.18) !important;
}
