/* Futurisztikus, animált bejelentkező/landing oldal stílusai */
:root{
  --neon:#00D1FF;
  --neon2:#7C4DFF;
  --neon3:#00E676;
  --bg1:#0a0f1c;
  --bg2:#0f1630;
  --text:#e6f1ff;
}

.landing-hero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  padding: 72px 20px 24px 20px;
  background: radial-gradient(1200px 800px at 20% -20%, rgba(0,209,255,0.25), transparent 60%),
              radial-gradient(1000px 700px at 110% 10%, rgba(124,77,255,0.18), transparent 55%),
              linear-gradient(160deg, var(--bg1), var(--bg2));
  box-shadow: 0 10px 40px rgba(0,0,0,.35), inset 0 0 120px rgba(255,255,255,.03);
  margin-bottom: 28px;
}

.fx-grid{ position:absolute; inset:0; pointer-events:none; }
.fx{ position:absolute; filter: blur(40px); opacity:.35; }
.fx-1{ width:300px; height:300px; background:radial-gradient(circle, var(--neon), transparent 60%); top:-60px; left:-40px; animation: float1 8s ease-in-out infinite; }
.fx-2{ width:260px; height:260px; background:radial-gradient(circle, var(--neon2), transparent 60%); bottom:-40px; right:10%; animation: float2 10s ease-in-out infinite; }
.fx-3{ width:220px; height:220px; background:radial-gradient(circle, var(--neon3), transparent 60%); top:20%; right:-60px; animation: float3 9s ease-in-out infinite; }

@keyframes float1 { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(18px) } }
@keyframes float2 { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(-16px) } }
@keyframes float3 { 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(-10px, 12px) } }

.hero-content{ position:relative; z-index:2; color:var(--text); max-width:980px; margin:0 auto 20px auto; }
.neon-title{ font-weight:800; letter-spacing:.4px; font-size: clamp(28px, 4vw, 44px); text-shadow: 0 0 16px rgba(0,209,255,.35); }
.neon-title-small{ color:var(--text); font-weight:700; margin-bottom:16px; text-shadow: 0 0 12px rgba(124,77,255,.3); }
.neon-sub{ opacity:.9; max-width:760px; margin: 8px auto 0 auto; }

.cta{ margin-top:18px; }
.btn-neon{ background: linear-gradient(90deg, var(--neon), #37e1ff); color:#001722; border:none; font-weight:700; box-shadow:0 0 24px rgba(0,209,255,.35), 0 6px 20px rgba(0,0,0,.35); }
.btn-neon:hover{ filter: brightness(1.05); box-shadow:0 0 28px rgba(0,209,255,.5), 0 6px 22px rgba(0,0,0,.35); }
.btn-outline-neon{ color:var(--text); border:1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.04); backdrop-filter: blur(6px); }
.btn-outline-neon:hover{ border-color: var(--neon); color: var(--text); box-shadow:0 0 18px rgba(0,209,255,.25); }

.hero-charts{ position:relative; z-index:1; margin-top: 24px; padding: 0 10px 10px 10px; }
.hero-charts canvas{ width:100%; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.0)); border-radius:12px; border:1px solid rgba(255,255,255,.06); }
.mini-charts{ margin-top:12px; display:grid; grid-template-columns: repeat(2, 1fr); gap:12px; }
@media (min-width: 768px){ .mini-charts{ grid-template-columns: repeat(4, 1fr); } }

/* Metrics */
.landing-metrics{ margin: 18px 0 10px 0; }
.metric-card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.1); color:var(--text); border-radius:14px; padding:16px; text-align:center; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.metric-label{ font-size:12px; opacity:.75; }
.metric-value{ font-weight:800; font-size: 22px; letter-spacing:.5px; text-shadow: 0 0 12px rgba(0,209,255,.2); }

/* Features */
.landing-features{ margin:22px auto; }
.feature-card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); color:var(--text); border-radius:16px; padding:18px; height:100%; box-shadow: 0 6px 22px rgba(0,0,0,.28); opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.feature-card.in{ opacity:1; transform: translateY(0); }
.feature-card .icon{ font-size:28px; color:var(--neon); filter: drop-shadow(0 0 6px rgba(0,209,255,.5)); margin-bottom:8px; }
.feature-card h3{ font-size:18px; margin-bottom:6px; font-weight:700; }
.feature-card p{ font-size:14px; opacity:.9; margin:0; }

/* Widgets */
.landing-widgets{ margin:12px auto 22px auto; }
.widget-card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.08); color:var(--text); border-radius:14px; padding:16px; height:100%; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease; }
.widget-card:hover{ transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.widget-card h4{ font-size:16px; font-weight:700; margin:8px 0 6px; }
.widget-card p{ font-size:13px; opacity:.9; }
.wc-icon{ font-size:22px; color:var(--neon2); filter: drop-shadow(0 0 6px rgba(124,77,255,.5)); }

.slide-in-left{ transform: translateX(-18px); }
.slide-in-right{ transform: translateX(18px); }
.slide-in-up{ transform: translateY(18px); }

/* CTA */
.landing-cta{ padding: 18px 0 26px 0; }

/* Alternating sections */
.alt-sections{ margin: 10px auto 20px auto; color: var(--text); }
.alt-row{ margin-bottom: 10px; }
.alt-card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:16px; box-shadow: 0 6px 20px rgba(0,0,0,.25); min-height: 220px; display:flex; flex-direction: column; align-items:flex-start; gap:6px; }
.alt-title{ font-size:22px; font-weight:800; margin:2px 0 6px; text-shadow: 0 0 12px rgba(0,209,255,.25); }
.alt-desc{ font-size:15px; opacity:.92; margin:0; }
.alt-chart{ position: relative; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:10px; height: 220px; display:flex; align-items:center; }
.alt-chart canvas{ width:100%; height:100%; }
/* Small informational side panel inside chart area */
.alt-side-panel{ position:absolute; right:12px; top:12px; width: 220px; max-width:40%; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:12px; padding:10px 12px; color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.25); backdrop-filter: blur(6px); }
.alt-side-panel .asp-title{ font-weight:800; font-size:13px; letter-spacing:.3px; margin-bottom:6px; color:#aeeaff; text-shadow: 0 0 8px rgba(0,209,255,.25); }
.alt-side-panel .asp-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-size:12px; }
.alt-side-panel .asp-list li{ position:relative; padding-left:16px; opacity:.95; }
.alt-side-panel .asp-list li::before{ content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:50%; background: linear-gradient(90deg, var(--neon), var(--neon2)); box-shadow: 0 0 10px rgba(0,209,255,.35); }
@media (max-width: 991.98px){ .alt-side-panel{ position:static; width:auto; max-width:none; margin-top:8px; } }
.alt-illustration{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:10px; text-align:center; }
.alt-illustration img{ max-width:100%; height:auto; filter: drop-shadow(0 12px 24px rgba(0,0,0,.35)); animation: floatImg 6s ease-in-out infinite; }
@keyframes floatImg{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(8px) } }

/* Overlay for center text inside charts */
.alt-center-overlay{ position:absolute; inset:10% 8%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; color: var(--text); pointer-events:none; }
.alt-center-overlay .ov-title{ font-size:12px; opacity:.9; }
.alt-center-overlay .ov-line{ font-size:12px; opacity:.95; }

/* Larger pie widget to fit slice labels */
.alt-chart.alt-pie-large{ height: 300px; }

/* Promo panels (3-card row like reference) */
.promo-panels{ margin: 6px 0 20px 0; }
.promo-card{ position: relative; background: radial-gradient(650px 350px at 50% -10%, rgba(124,77,255,.18), transparent 60%),
                               radial-gradient(480px 300px at 120% 0%, rgba(0,209,255,.16), transparent 60%),
                               linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10); border-radius: 18px; color: var(--text); padding: 16px; box-shadow: 0 12px 36px rgba(0,0,0,.35);
}
.promo-card .pc-header{ font-weight: 800; letter-spacing:.2px; margin-bottom: 6px; }
.promo-card .pc-sub{ font-size: 12px; opacity: .9; background: rgba(255,255,255,.06); display: inline-block; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); margin-bottom: 10px; }
.promo-card .pc-chart{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 8px; }
.promo-card .pc-foot{ font-size: 12px; opacity: .85; margin-top: 10px; }

/* Rings layout */
.pc-rings .ring-row{ display:flex; align-items:center; gap:12px; margin: 6px 0 10px; }
.pc-rings .ring{ width: 86px; height: 86px; display:flex; align-items:center; justify-content:center; }
.pc-rings .ring-text .kpi{ color: var(--neon); font-weight: 800; text-shadow: 0 0 12px rgba(0,209,255,.35); }
.pc-rings .ring-kpi{ font-weight:600; }
.pc-rings .ring-desc{ font-size:12px; opacity:.85; }

/* List card */
.pc-list .list-wrap{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 10px; }
.pc-list .list-item{ display:flex; align-items:center; justify-content:space-between; padding:6px 8px; border-radius:8px; }
.pc-list .list-item.dim{ opacity:.6; }
.pc-list .delta{ font-weight:700; font-size: 12px; }
.pc-list .delta.pos{ color:#00E676; text-shadow: 0 0 10px rgba(0,230,118,.35); }
.pc-list .delta.neg{ color:#FF6D00; text-shadow: 0 0 10px rgba(255,109,0,.35); }

/* Widget charts grid */
.widget-charts{ margin:14px auto 24px auto; }
.widget-chart-card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border:1px solid rgba(255,255,255,.09); color:var(--text); border-radius:14px; padding:12px; height:100%; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.widget-chart-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.35); border-color: rgba(0,209,255,.25); }
.wcc-header{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
.wcc-title{ font-size:12px; opacity:.85; letter-spacing:.3px; }
.wcc-value{ font-weight:800; font-size:16px; letter-spacing:.3px; text-shadow: 0 0 10px rgba(0,209,255,.18); }
.wcc-chart{ position:relative; height:90px; }
.wcc-chart canvas{ width:100%; height:100%; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border-radius:10px; border:1px solid rgba(255,255,255,.06); }
.wcc-icons{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 2px; }
.wcc-ico{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color: var(--text); box-shadow: 0 0 10px rgba(0,209,255,.08) inset; }
.wcc-footer{ margin-top:6px; }
.wcc-list{ display:flex; flex-direction:column; gap:6px; margin-top:4px; }
.wcc-list .item{ display:flex; align-items:center; justify-content:space-between; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius:10px; padding:6px 8px; }
.wcc-list .item .name{ font-size:12px; opacity:.9; }
.wcc-list .item .amount{ font-weight:700; font-size:12px; }

/* Auth pages */
.auth-wrap{ padding: 24px 0; }
.auth-card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.09); color:var(--text); border-radius:16px; box-shadow: 0 10px 28px rgba(0,0,0,.35); overflow:hidden; }
.auth-header{ padding:18px 18px 10px 18px; border-bottom:1px solid rgba(255,255,255,.06); }
.auth-header .auth-icon{ font-size:26px; color:var(--neon); filter: drop-shadow(0 0 6px rgba(0,209,255,.5)); margin-bottom:6px; }
.auth-body{ padding:18px; }
.auth-footer{ padding:12px 18px 18px 18px; border-top:1px solid rgba(255,255,255,.06); }
.auth-input{ background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); color:var(--text); }
.auth-input:focus{ background: rgba(255,255,255,.07); border-color: var(--neon); color:var(--text); box-shadow: 0 0 0 .2rem rgba(0,209,255,.15); }

/* Overlap charts */
.overlap-charts{ position: relative; height: 220px; max-width: 960px; margin: 0 auto; }
.overlap-charts canvas{ position:absolute; inset:0; width:100%; height:100%; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); border:1px solid rgba(255,255,255,.06); }
#ocLine{ z-index: 3; transform: translate(-6px, -6px); }
#ocDonut{ z-index: 2; transform: translate(12px, 6px); opacity:.95; }
#ocBar{ z-index: 1; transform: translate(24px, -4px); }

/* Responsive tweaks */
@media (min-width: 992px){
  .hero-content{ padding: 0 24px; }
  .hero-charts{ padding: 0 24px 18px 24px; }
}

/* Alt-card icons like feature cards */
.alt-card .icon{ font-size:22px; color:var(--neon); filter: drop-shadow(0 0 6px rgba(0,209,255,.5)); margin-bottom:6px; }

/* =============================
   App-wide neon theme overrides
   (Authenticated pages)
   ============================= */
/* Page title bar to match landing */
body:not(.landing-mode) .page-title-bar{
  background: linear-gradient(160deg, rgba(10,15,28,0.9), rgba(15,22,48,0.9));
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

/* Cards */
body:not(.landing-mode) .card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
  color: var(--text);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  border-radius: 14px;
}
body:not(.landing-mode) .card-header{
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--text);
}
body:not(.landing-mode) .card-footer{
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Tables */
body:not(.landing-mode) .table{
  color: var(--text);
}
body:not(.landing-mode) .table thead th{
  border-color: rgba(255,255,255,.1);
}
body:not(.landing-mode) .table tbody td{
  border-color: rgba(255,255,255,.06);
}
body:not(.landing-mode) .table-striped>tbody>tr:nth-of-type(odd)>*{
  --bs-table-accent-bg: rgba(255,255,255,.03);
}

/* Forms */
body:not(.landing-mode) .form-control{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
}
body:not(.landing-mode) .form-control:focus{
  background: rgba(255,255,255,.07);
  border-color: var(--neon);
  box-shadow: 0 0 0 .2rem rgba(0,209,255,.15);
  color: var(--text);
}
body:not(.landing-mode) .form-select{
  background-color: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
}
body:not(.landing-mode) .form-check-input:checked{
  background-color: var(--neon);
  border-color: var(--neon);
}

/* Buttons */
body:not(.landing-mode) .btn-primary{
  background: linear-gradient(90deg, var(--neon), #37e1ff);
  border: none;
  color: #001722;
  box-shadow: 0 0 24px rgba(0,209,255,.25), 0 6px 20px rgba(0,0,0,.35);
}
body:not(.landing-mode) .btn-primary:hover{ filter: brightness(1.05); box-shadow:0 0 28px rgba(0,209,255,.4), 0 6px 22px rgba(0,0,0,.35); }
body:not(.landing-mode) .btn-outline-primary{
  color: var(--text);
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}
body:not(.landing-mode) .btn-outline-primary:hover{ border-color: var(--neon); box-shadow:0 0 18px rgba(0,209,255,.25); color: var(--text); }

/* Badges and progress */
body:not(.landing-mode) .badge.bg-primary{ background-color: var(--neon) !important; color:#001722; }
body:not(.landing-mode) .progress{ background-color: rgba(255,255,255,.08); }
body:not(.landing-mode) .progress-bar{ background: linear-gradient(90deg, var(--neon), #37e1ff); }

/* Links */
body:not(.landing-mode) a{ color: #aeeaff; }
body:not(.landing-mode) a:hover{ color: #e6f1ff; }

/* Utility: amount text inherits readable color */
body:not(.landing-mode) .amount{ text-shadow: 0 0 8px rgba(0,209,255,.15); }