.pp-gateway-scroll{ overflow-x:auto; padding-bottom:.25rem; }
.pp-gateway-scroll::-webkit-scrollbar{ height:8px; }
.pp-gateway-scroll::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.35); border-radius:8px; }
/* New responsive grid for gateway tiles: fits 1–2 rows without horizontal scroll */
.pp-gateway-tiles.pp-gateway-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:.5rem; }
.pp-gateway-cell{ min-width:0; }
.pp-gateway-tiles .pp-gateway-tile{ width:100%; }
.table-links th:last-child,
.table-links td:last-child {
  position: sticky;
  right: 0;
  background: rgba(17,24,39,.9);
  backdrop-filter: blur(6px);
  z-index: 5;
  /* soft inner shadow to separate from content */
  box-shadow: -6px 0 10px -6px rgba(0,0,0,.6) inset;
}
.pp-gateway-tiles .pp-gateway-tile {
  position: relative;
  background: linear-gradient(145deg, rgba(30,41,59,.55), rgba(17,24,39,.65));
  border: 1px solid rgba(148,163,184,.35) !important;
  color: #e2e8f0;
  font-size: .75rem;
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: .85rem .9rem !important;
  transition: border-color .18s ease, background .18s ease, box-shadow .25s ease, transform .18s ease;
  min-height: 84px;
  border-radius: .75rem !important;
  box-shadow: 0 2px 12px -6px rgba(0,0,0,.35);
}
.pp-gateway-tiles .pp-gateway-tile:hover,
.pp-gateway-tiles .pp-gateway-tile:focus {
  background: linear-gradient(145deg, rgba(59,130,246,.18), rgba(30,41,59,.75));
  border-color: rgba(96,165,250,.65) !important;
  box-shadow: 0 8px 24px -10px rgba(59,130,246,.45), 0 0 0 1px rgba(96,165,250,.35) inset;
  text-decoration: none;
  transform: translateY(-1px);
}
.pp-gateway-tiles .btn-check:checked + .pp-gateway-tile {
  background: linear-gradient(145deg, rgba(2,132,199,.55), rgba(59,130,246,.65));
  border-color: rgba(99,102,241,.8) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 8px 28px -8px rgba(59,130,246,.75);
  color: #fff;
}
.pp-gateway-tiles .btn-check:checked + .pp-gateway-tile::after {
  content: "";
  position: absolute; right: 10px; top: 10px;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(145deg, #22d3ee, #60a5fa);
  box-shadow: 0 0 0 2px rgba(255,255,255,.45);
  mask: radial-gradient(circle at 50% 50%, transparent 8px, #000 8px);
}
.pp-gateway-tiles .btn-check:checked + .pp-gateway-tile .pp-gateway-icon i { color: #fff; }
.pp-gateway-tiles .pp-gateway-icon i {
  font-size: 1.05rem;
  color: #94a3b8;
  transition: color .2s ease;
}
/* Colored circular icon bubbles per gateway */
.pp-gateway-tiles .pp-gateway-icon{
  width:28px; height:28px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
}
.pp-gateway-tiles .pp-gw-telegram .pp-gateway-icon{ background: radial-gradient(circle at 30% 30%, #34b3ff, #229ED9); color:#fff; }
.pp-gateway-tiles .pp-gw-monobank .pp-gateway-icon{ background: linear-gradient(145deg, #8b5cf6, #6366f1); color:#fff; }
.pp-gateway-tiles .pp-gw-binance .pp-gateway-icon{ background: radial-gradient(circle at 40% 40%, #ffe08a, #F3BA2F); color:#111827; }
.pp-gateway-tiles .pp-gw-metamask .pp-gateway-icon{ background: linear-gradient(145deg, #F6851B, #E2761B); color:#111827; }
.pp-gateway-tiles .pp-gw-invoice .pp-gateway-icon{ background: linear-gradient(145deg, #0ea5e9, #22d3ee); color:#fff; }
.pp-gateway-tiles .pp-gateway-title { font-weight: 600; }
.pp-gateway-tiles .pp-gateway-title{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pp-gateway-tiles .pp-gateway-currency { width: fit-content; }
.pp-gateway-tiles .pp-gateway-tile:focus-visible,
.pp-gateway-tiles .pp-gateway-tile:has(:focus-visible) {
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  .pp-gateway-tiles .pp-gateway-tile { font-size: .7rem; min-height: 72px; }
  .pp-gateway-tiles .pp-gateway-icon i { font-size: .95rem; }
}
/* Compact dashboard stat chips under title */
.pp-stat-chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pp-stat-chip{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .6rem; border-radius:9999px; font-size:.75rem; border:1px solid rgba(148,163,184,.25); }
.pp-stat-chip i{ font-size:.9rem; }
.pp-stat-chip--blue{ background: rgba(59,130,246,.16); color:#e2e8f0; border-color: rgba(59,130,246,.35); }
.pp-stat-chip--orange{ background: rgba(245,158,11,.16); color:#e2e8f0; border-color: rgba(245,158,11,.35); }
.pp-stat-chip--green{ background: rgba(34,197,94,.16); color:#e2e8f0; border-color: rgba(34,197,94,.35); }
/* Highlighted amount group */
.pp-amount-group .form-control{
  background: linear-gradient(145deg, rgba(17,24,39,.65), rgba(30,41,59,.6));
  border:1px solid rgba(148,163,184,.35);
  color:#e2e8f0;
}
.pp-amount-group .input-group-text{
  background: rgba(17,24,39,.6);
  border:1px solid rgba(148,163,184,.35);
  color:#e2e8f0;
}
.pp-amount-chips .btn{ border-color: rgba(148,163,184,.35); }
.pp-amount-chips .btn:hover{ border-color: rgba(96,165,250,.6); color:#fff; background: rgba(59,130,246,.25); }
.pp-amount-chips .btn[data-active="1"]{ background: linear-gradient(145deg, rgba(2,132,199,.55), rgba(59,130,246,.65)); color:#fff; }
/* Apple Pay / Google Pay quick buttons */
.pp-quickpay-wrap{ margin-top:.65rem; }
.pp-quickpay-wrap .pp-quickpay-label{ font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8; margin-bottom:.35rem; }
.pp-btn-applepay,.pp-btn-googlepay{ position:relative; width:100%; border-radius:10px; font-weight:500; padding:.65rem .9rem; font-size:.95rem; display:flex; align-items:center; justify-content:center; gap:.55rem; transition:background .18s ease, box-shadow .18s ease, transform .18s ease; }
.pp-btn-applepay{ background:#000; color:#fff; border:1px solid #000; box-shadow:0 4px 14px -6px rgba(0,0,0,.65); }
.pp-btn-applepay .pp-pay-logo--apple{ font-weight:700; font-size:1.15rem; line-height:1; }
.pp-btn-applepay:hover{ background:#0d0d0d; color:#fff; }
.pp-btn-applepay:active{ transform:translateY(1px); }
.pp-btn-googlepay{ background:#000; color:#fff; border:1px solid #000; box-shadow:0 4px 14px -6px rgba(0,0,0,.65); }
.pp-btn-googlepay .pp-pay-logo--g{ width:18px; height:18px; display:inline-block; border-radius:3px; background:
  linear-gradient(135deg,#4285F4 0 25%,#34A853 25% 50%,#FBBC05 50% 75%,#EA4335 75% 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;
}
.pp-btn-googlepay:hover{ background:#121212; }
.pp-btn-googlepay:active{ transform:translateY(1px); }
.pp-btn-applepay[disabled],.pp-btn-googlepay[disabled]{ opacity:.55; cursor:wait; }
@media (max-width:575.98px){
  .pp-btn-applepay,.pp-btn-googlepay{ font-size:.85rem; padding:.55rem .75rem; }
  .pp-btn-applepay .pp-pay-logo--apple{ font-size:1rem; }
  .pp-btn-googlepay .pp-pay-logo--g{ width:16px; height:16px; }
}
/* Accessibility focus ring */
/* soft blurred edge on the left of the sticky Actions column */
.table-links th:last-child::before,
.table-links td:last-child::before {
  content: "";
  position: absolute;
  left: -12px; top: 0; width: 12px; height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(17,24,39,0), rgba(17,24,39,.6) 70%, rgba(17,24,39,.9));
  filter: blur(1.5px);
}
/* Columns dropdown overlay improvements */
.columns-control-floating { position: relative; z-index: 3001; }
.columns-control-floating > .btn-columns-toggle { position: relative; }
.columns-dropdown {
  position: relative;
  background: linear-gradient(160deg, rgba(17,24,39,.96), rgba(30,41,59,.92));
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 24px 64px -28px rgba(8,12,24,.85), 0 0 0 1px rgba(255,255,255,.06) inset;
  border-radius: 14px;
  padding: .5rem 0 .75rem;
  z-index: 3002; /* above backdrop and control wrapper */
  max-height: min(70vh, 480px);
  overflow-y: auto;
}
.columns-dropdown .dropdown-item {
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem .85rem;
  border-radius: 10px;
  margin: 0 .4rem .25rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.05);
  transition: background .15s ease, border-color .15s ease;
}
.columns-dropdown .dropdown-item:hover,
.columns-dropdown .dropdown-item:focus {
  background: rgba(59,130,246,.22);
  border-color: rgba(96,165,250,.45);
  color: #fff;
}
.columns-dropdown .form-check-input { margin-top: 0; cursor: pointer; }
/* Removed columns-dropdown-backdrop: no background overlay for the columns menu */
@media (max-width: 767.98px) {
  .columns-control-floating { position: static; z-index: auto; }
  .columns-dropdown { max-height: 60vh; }
}
@media (max-width: 992px) {
  .table-links th:last-child,
  .table-links td:last-child { box-shadow: -6px 0 12px -4px rgba(0,0,0,.4); }
}
.dashboard-onboarding-callout {
  position: relative;
  border: 1px solid rgba(255,193,7,.35);
  background: linear-gradient(135deg, rgba(255,193,7,.12) 0%, rgba(255,193,7,.06) 50%, rgba(59,130,246,.08) 100%);
  overflow: hidden;
  animation: ppOnbPulse 3s ease-in-out infinite;
}
.dashboard-onboarding-callout::before {
  content: "";
  position: absolute;
  top: -2px; right: -2px; bottom: -2px; left: -2px;
  background: linear-gradient(135deg, rgba(255,193,7,.45), rgba(59,130,246,.35), rgba(139,92,246,.25));
  background-size: 300% 300%;
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  animation: ppOnbGlow 4s ease-in-out infinite;
}
.dashboard-onboarding-callout::after {
  content: "";
  position: absolute;
  top: 50%; left: -100%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,193,7,.15) 0%, transparent 70%);
  animation: ppOnbShimmer 8s linear infinite;
  pointer-events: none;
}
@keyframes ppOnbPulse {
  0%, 100% { 
    box-shadow: 
      0 4px 24px -8px rgba(255,193,7,.35),
      inset 0 1px 0 rgba(255,255,255,.08);
  }
  50% { 
    box-shadow: 
      0 8px 32px -8px rgba(255,193,7,.55),
      0 0 0 1px rgba(255,193,7,.25),
      inset 0 1px 0 rgba(255,255,255,.12);
  }
}
@keyframes ppOnbGlow {
  0%, 100% { opacity: 0; background-position: 0% 50%; }
  50% { opacity: .4; background-position: 100% 50%; }
}
@keyframes ppOnbShimmer {
  0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
  50% { opacity: .6; }
  100% { transform: translate(50%, -50%) rotate(360deg); opacity: 0; }
}
.dashboard-onboarding-callout .btn-primary {
  background: #0d6efd;
}
/* Grid layout for onboarding callout */
.pp-onb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 992px) {
  .pp-onb-grid {
    grid-template-columns: 2fr 2fr 1fr;
    gap: 24px;
  }
}
.pp-onb-col {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.pp-onb-col--info {
  gap: 16px;
}
.pp-onb-col--progress {
  justify-content: center;
}
.pp-onb-col--action {
  justify-content: flex-end;
}
@media (max-width: 991px) {
  .pp-onb-col--action {
    justify-content: stretch;
  }
  .pp-onb-col--action .btn {
    width: 100%;
  }
}
.pp-onb-icon-wrap {
  animation: ppOnbIconBounce 2s ease-in-out infinite;
}
@keyframes ppOnbIconBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.05); }
}
.pp-onb-cta {
  position: relative;
  white-space: nowrap;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(59,130,246,.35);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pp-onb-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59,130,246,.5);
}
.pp-onb-cta:active {
  transform: translateY(0);
}
/* Modern gradient progress for onboarding */
/* Onboarding progress: liquid glass flow effect */
.dashboard-onboarding-callout .progress {
  height: 38px !important;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(15,23,42,.88), rgba(30,41,59,.68)) !important;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.05);
  position: relative;
  overflow: visible;
}
.dashboard-onboarding-callout .progress::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(96,165,250,.28), rgba(34,211,238,.18));
  -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, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: .7;
}
.dashboard-onboarding-callout .progress .progress-bar.pp-liquid-bar {
  position: relative !important;
  height: 36px !important;
  margin: 1px !important;
  border-radius: 22px !important;
  box-shadow: 
    0 0 0 1px rgba(255,255,255,.35) inset,
    0 12px 32px -12px rgba(59,130,246,.75),
    0 4px 12px -6px rgba(34,211,238,.55),
    0 0 24px rgba(96,165,250,.4) !important;
  transition: width .75s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  animation: ppLiquidFlow 8s ease-in-out infinite !important;
  opacity: 1 !important;
  display: block !important;
}
.dashboard-onboarding-callout .progress .progress-bar.pp-liquid-bar::before,
.dashboard-onboarding-callout .progress .progress-bar.pp-liquid-bar::after {
  mix-blend-mode: soft-light;
}
.dashboard-onboarding-callout .progress .progress-bar.pp-liquid-bar::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: 
    radial-gradient(ellipse 200% 80% at 20% 50%, rgba(255,255,255,.45) 0%, transparent 60%),
    radial-gradient(ellipse 200% 80% at 80% 50%, rgba(255,255,255,.35) 0%, transparent 60%),
    radial-gradient(ellipse 150% 100% at 50% 0%, rgba(255,255,255,.55) 0%, transparent 50%);
  background-size: 150% 150%, 150% 150%, 200% 200%;
  background-position: 0% 50%, 100% 50%, 50% 0%;
  pointer-events: none;
  animation: ppGlassFlow 6s ease-in-out infinite;
  z-index: 1;
  border-radius: 22px;
}
.dashboard-onboarding-callout .progress .progress-bar.pp-liquid-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(135deg, 
      rgba(255,255,255,.5) 0%, 
      transparent 30%, 
      rgba(255,255,255,.3) 50%,
      transparent 70%,
      rgba(255,255,255,.4) 100%);
  background-size: 300% 300%;
  pointer-events: none;
  z-index: 2;
  animation: ppLiquidShine 4s linear infinite;
  border-radius: 22px;
}
@keyframes ppLiquidFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes ppGlassFlow {
  0%, 100% { 
    background-position: 0% 50%, 100% 50%, 50% 0%;
    transform: translateX(0);
  }
  33% { 
    background-position: 50% 40%, 50% 60%, 30% 20%;
    transform: translateX(5%);
  }
  66% { 
    background-position: 100% 50%, 0% 50%, 70% 10%;
    transform: translateX(-5%);
  }
}
@keyframes ppLiquidShine {
  0% { 
    background-position: -100% -100%;
    opacity: .7;
  }
  50% { 
    background-position: 200% 200%;
    opacity: .9;
  }
  100% { 
    background-position: -100% -100%;
    opacity: .7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-onboarding-callout .progress .progress-bar.pp-liquid-bar,
  .dashboard-onboarding-callout .progress .progress-bar.pp-liquid-bar::before {
    animation: none !important;
    background-position: 0% 50% !important;
  }
}
/* Links card busy state (during background bulk import) */
#links-card.pp-links-busy {
  position: relative;
  filter: blur(1px);
  pointer-events: none;
}
#links-card.pp-links-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.35);
}
/* Progress wrapper & label */
.pp-onb-progress-wrap { width: 100%; max-width: 100%; }
.pp-onb-progress {
  position: relative;
  display: flex;
  align-items: center;
}
.pp-onb-progress .pp-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .025em;
  color: #f1f5f9;
  text-shadow: 
    -1px -1px 0 rgba(15,23,42,.95),
    1px -1px 0 rgba(15,23,42,.95),
    -1px 1px 0 rgba(15,23,42,.95),
    1px 1px 0 rgba(15,23,42,.95),
    0 0 8px rgba(0,0,0,.6),
    0 2px 12px rgba(96,165,250,.4);
  pointer-events: none;
  z-index: 3;
}
@media (max-width: 576px) {
  .pp-onb-progress .pp-progress-label { font-size: .85rem; }
  .dashboard-onboarding-callout .progress { height: 34px !important; }
}
.onboarding-chip {
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,230,180,.25), rgba(255,240,200,.15));
  box-shadow: 0 0 0 1px rgba(255, 193, 7, .35) inset;
}
.onboarding-hero {
  background: linear-gradient(90deg, rgba(255,193,7,.12), rgba(255,193,7,.06));
  border-color: rgba(255,193,7,.35);
}
/* Onboarding Modal Styling */
.pp-onboarding-modal .modal-dialog {
  max-width: 760px;
}
.pp-onboarding-modal .modal-content {
  border: 1px solid rgba(148,163,184,.22);
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(30,41,59,.96));
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.85);
}
.pp-onboarding-modal.show ~ .modal-backdrop,
.modal-backdrop.show {
  opacity: .85 !important;
  background-color: #000 !important;
}
.pp-onb-modal-header {
  position: relative;
  background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(30,41,59,.85));
  border-bottom: 1px solid rgba(148,163,184,.22);
  padding: 1.25rem 1.5rem;
  overflow: visible;
}
.pp-onb-modal-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(139,92,246,.08));
  pointer-events: none;
}
.pp-onb-modal-title-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pp-onb-modal-header .modal-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  margin: 0;
}
.pp-onb-modal-header .modal-title i {
  color: rgba(96,165,250,.9);
  font-size: 1.5rem;
}
.pp-onb-modal-header .btn-close {
  position: relative;
  z-index: 2;
  filter: brightness(0) invert(1);
  opacity: .8;
}
.pp-onb-modal-header .btn-close:hover {
  opacity: 1;
}
.pp-onb-modal-progress-wrap {
  width: 100%;
  max-width: 100%;
}
.pp-onb-modal-progress {
  position: relative;
  display: flex;
  align-items: center;
  height: 32px !important;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(15,23,42,.88), rgba(30,41,59,.68)) !important;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.05);
  overflow: visible;
}
.pp-onb-modal-progress::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(96,165,250,.28), rgba(34,211,238,.18));
  -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, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: .7;
}
.pp-onb-modal-progress .progress-bar.pp-liquid-bar {
  position: relative !important;
  height: 30px !important;
  margin: 1px !important;
  border-radius: 18px !important;
  box-shadow: 
    0 0 0 1px rgba(255,255,255,.35) inset,
    0 10px 28px -10px rgba(59,130,246,.75),
    0 4px 10px -5px rgba(34,211,238,.55),
    0 0 20px rgba(96,165,250,.4) !important;
  transition: width .75s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  animation: ppLiquidFlow 8s ease-in-out infinite !important;
  opacity: 1 !important;
  display: block !important;
}
.pp-onb-modal-progress .pp-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  font-weight: 800;
  letter-spacing: .025em;
  color: #f1f5f9;
  text-shadow: 
    -1px -1px 0 rgba(15,23,42,.95),
    1px -1px 0 rgba(15,23,42,.95),
    -1px 1px 0 rgba(15,23,42,.95),
    1px 1px 0 rgba(15,23,42,.95),
    0 0 6px rgba(0,0,0,.6),
    0 2px 10px rgba(96,165,250,.4);
  pointer-events: none;
  z-index: 3;
}
.pp-onb-modal-progress .progress-bar.pp-liquid-bar::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: 
    radial-gradient(ellipse 200% 80% at 20% 50%, rgba(255,255,255,.45) 0%, transparent 60%),
    radial-gradient(ellipse 200% 80% at 80% 50%, rgba(255,255,255,.35) 0%, transparent 60%),
    radial-gradient(ellipse 150% 100% at 50% 0%, rgba(255,255,255,.55) 0%, transparent 50%);
  background-size: 150% 150%, 150% 150%, 200% 200%;
  background-position: 0% 50%, 100% 50%, 50% 0%;
  pointer-events: none;
  animation: ppGlassFlow 6s ease-in-out infinite;
  z-index: 1;
  border-radius: 18px;
  mix-blend-mode: soft-light;
}
.pp-onb-modal-progress .progress-bar.pp-liquid-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: 
    linear-gradient(135deg, 
      rgba(255,255,255,.5) 0%, 
      transparent 30%, 
      rgba(255,255,255,.3) 50%,
      transparent 70%,
      rgba(255,255,255,.4) 100%);
  background-size: 300% 300%;
  pointer-events: none;
  z-index: 2;
  animation: ppLiquidShine 4s linear infinite;
  border-radius: 18px;
  mix-blend-mode: soft-light;
}
@media (max-width: 576px) {
  .pp-onb-modal-header {
    padding: 1rem 1.25rem;
  }
  .pp-onb-modal-header .modal-title {
    font-size: 1.15rem;
  }
  .pp-onb-modal-header .modal-title i {
    font-size: 1.25rem;
  }
  .pp-onb-modal-progress {
    height: 28px !important;
  }
  .pp-onb-modal-progress .progress-bar.pp-liquid-bar {
    height: 26px !important;
  }
  .pp-onb-modal-progress .pp-progress-label {
    font-size: .8rem;
  }
  .pp-onboarding-modal .modal-body {
    padding: 1.25rem;
  }
  .onboarding-steps .list-group-item {
    padding: .875rem 1rem;
    flex-wrap: wrap;
    gap: 8px;
  }
}
.onboarding-note {
  color: rgba(33,37,41,.85);
}
.pp-onboarding-modal .modal-body {
  padding: 1.5rem;
}
.onboarding-steps .list-group-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: rgba(15,23,42,.45);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 8px !important;
  margin-bottom: 8px;
  transition: all .2s ease;
}
.onboarding-steps .list-group-item:hover {
  background: rgba(59,130,246,.12);
  border-color: rgba(96,165,250,.35);
  transform: translateX(4px);
}
.onboarding-steps .list-group-item .badge {
  background: linear-gradient(135deg, rgba(96,165,250,.25), rgba(139,92,246,.2));
  color: rgba(191,219,254,.95);
  border: 1px solid rgba(96,165,250,.35);
  font-weight: 600;
  padding: 4px 10px;
}
.onboarding-steps .list-group-item i.bi-circle {
  opacity: .5;
  color: rgba(148,163,184,.7);
  font-size: 1.1rem;
}
.onboarding-steps .list-group-item i.bi-check-circle {
  color: #10b981;
  filter: drop-shadow(0 0 8px rgba(16,185,129,.5));
  font-size: 1.1rem;
}
.table-links tbody tr.link-row-saved {
  animation: link-row-saved-flash 1.5s ease-in-out;
}

@keyframes link-row-saved-flash {
  0% {
    background-color: rgba(25, 135, 84, 0.32);
  }
  60% {
    background-color: rgba(25, 135, 84, 0.12);
  }
  100% {
    background-color: inherit;
  }
}
.promotion-cascade-card { background: rgba(17,24,39,.55); border-radius: 16px; border: 1px solid rgba(148,163,184,.18); }
.promotion-cascade-card .card-body { padding: 1rem 1.1rem; }
/* Cascade blocks expand to fill the entire row: 1–4 items span evenly without empty space */
.cascade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; }
@media (max-width: 576px)  { .cascade-grid { grid-template-columns: 1fr; } }
/* Compact visual for cascade cards so 4 items comfortably fit */
.cascade-item { background: rgba(255,255,255,.06); border: 1px dashed rgba(148,163,184,.28); border-radius: 12px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .2rem; min-height: 68px; }
.cascade-item .meta { font-size: .85rem !important; }
.cascade-item__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .2rem; }
.label-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .55rem; border-radius: 999px; font-size: .75rem; color: rgba(17,24,39,.95); background: linear-gradient(135deg, rgba(191,219,254,.96), rgba(59,130,246,.5)); border: 1px solid rgba(59,130,246,.42); box-shadow: 0 6px 16px -12px rgba(59,130,246,.65), inset 0 1px 0 rgba(255,255,255,.6); }
.cascade-item .meta { color: var(--muted) !important; }
.cascade-summary { display: flex; flex-wrap: wrap; gap: .6rem; }
.summary-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: 999px; background: rgba(59,130,246,.14); border: 1px solid rgba(59,130,246,.26); color: rgba(226,232,240,.95); font-size: .82rem; }
.summary-chip i { color: rgba(191,219,254,.95); }

/* Project links — status tabs & filters */
.link-status-tabs {
  background: linear-gradient(145deg, rgba(17,24,39,.72), rgba(30,41,59,.52));
  padding: .6rem .7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--pp-link-tab-border);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 24px 48px -36px rgba(8, 12, 24, .78);
  position: relative;
}

.link-status-tabs::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.05);
  opacity: .22;
}

.link-status-tabs .link-status-pill {
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.18);
  background: var(--pp-link-tab-bg);
  color: rgba(226,232,240,.84) !important;
  font-weight: 500;
  letter-spacing: .01em;
  padding: .45rem .9rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: all .2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}

.link-status-tabs .link-status-pill .bi {
  opacity: .9;
  transition: transform .2s ease, opacity .2s ease;
}

.link-status-tabs .link-status-pill:hover {
  background: var(--pp-link-tab-hover-bg);
  border-color: var(--pp-link-tab-hover-border);
  color: rgba(241,245,249,.98) !important;
  box-shadow: 0 20px 40px -30px rgba(17,94,209,.65);
}

.link-status-tabs .link-status-pill:hover .bi {
  transform: translateY(-1px);
  opacity: 1;
}

.link-status-tabs .link-status-pill.active {
  color: #fff !important;
  background: var(--pp-link-tab-active-bg);
  border-color: var(--pp-link-tab-active-border);
  box-shadow: var(--pp-link-tab-shadow), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-1px);
}

.link-status-tabs .link-status-pill:focus-visible {
  outline: none;
  border-color: var(--pp-link-tab-active-border);
  box-shadow: 0 0 0 .35rem var(--pp-link-filter-focus-shadow);
}

.link-filter-controls {
  background: linear-gradient(155deg, rgba(15,23,42,.78), rgba(30,41,59,.64));
  padding: .8rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--pp-link-filter-border);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 30px 56px -44px rgba(7,10,26,.88);
}

.link-filter-controls > div {
  position: relative;
}

.link-filter-control {
  border-radius: 999px;
  border: 1px solid var(--pp-link-filter-border);
  background-color: var(--pp-link-filter-bg);
  color: var(--pp-link-filter-text);
  font-weight: 500;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  min-height: 34px;
  padding: .4rem 1rem;
}

.link-filter-control:hover {
  border-color: var(--pp-link-tab-hover-border);
}

.link-filter-control:focus {
  border-color: var(--pp-link-tab-active-border);
  background-color: rgba(15,23,42,.92);
  color: #fff;
  box-shadow: 0 0 0 .38rem var(--pp-link-filter-focus-shadow);
  outline: none;
}

.link-filter-search-group {
  border-radius: 999px;
  border: 1px solid var(--pp-link-filter-border);
  background-color: var(--pp-link-filter-bg);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.link-filter-search-group:focus-within {
  border-color: var(--pp-link-tab-active-border);
  background-color: rgba(15,23,42,.92);
  box-shadow: 0 0 0 .38rem var(--pp-link-filter-focus-shadow);
}

.link-filter-search-group .link-filter-addon {
  background: transparent;
  border: none;
  color: var(--muted);
  padding-inline: .9rem;
}

.link-filter-search-group .link-filter-addon i {
  font-size: .95rem;
}

.link-filter-search-group .link-filter-control {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: .45rem .95rem .45rem .35rem;
}

.link-filter-search-group .link-filter-control:focus {
  border: none;
  box-shadow: none;
  background: transparent;
}

select.link-filter-control {
  padding-right: 2.5rem;
  background-position: right .85rem center;
  background-size: 12px 12px;
}

@media (max-width: 992px) {
  .link-filter-controls {
    padding: .75rem;
    gap: .75rem;
  }
}
/* PromoPilot — Radical Modern UI */

/* =================== Design Tokens =================== */
:root {
  /* Palette */
  --bg: #0f1420;
  --bg-2: #111827;
  /* strengthen surfaces for better separation on dark */
  --surface: rgba(255,255,255,0.08);
  --surface-2: rgba(255,255,255,0.14);
  /* higher contrast text */
  --text: #f3f4f6;
  --muted: #b3b9c6;
  --primary: #60a5fa; /* blue-400 */
  --primary-2: #3b82f6; /* blue-500 */
  --accent: #22d3ee;   /* cyan-400 */
  --success: #34d399;  /* emerald-400 */
  --warning: #f59e0b;  /* amber-500 */
  --danger: #f87171;   /* red-400 */
  /* slightly stronger borders for clarity on dark */
  --border: rgba(255,255,255,0.16);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --sidebar-width: 320px;
  --navbar-h: 78px;
  --footer-h: 80px;

  /* Link filters palette */
  --pp-link-tab-bg: rgba(17,24,39,.62);
  --pp-link-tab-border: rgba(148,163,184,.32);
  --pp-link-tab-hover-bg: rgba(56,189,248,.18);
  --pp-link-tab-hover-border: rgba(56,189,248,.55);
  --pp-link-tab-active-bg: linear-gradient(135deg, rgba(59,130,246,.95), rgba(14,165,233,.82));
  --pp-link-tab-active-border: rgba(34,211,238,.72);
  --pp-link-tab-shadow: 0 18px 36px -24px rgba(14,165,233,.58);
  --pp-link-filter-bg: rgba(15,23,42,.78);
  --pp-link-filter-border: rgba(148,163,184,.28);
  --pp-link-filter-text: rgba(226,232,240,.94);
  --pp-link-filter-focus-shadow: rgba(56,189,248,.28);

  /* Glassmorphism helpers */
  --glass-bg: rgba(17, 24, 39, 0.74);
  --glass-bg-strong: rgba(22, 30, 46, 0.82);
  --glass-border: rgba(255,255,255,0.12);
  --glass-shadow: 0 20px 60px rgba(8, 12, 24, .36);

  /* Bootstrap variable overrides for global theming */
  color-scheme: dark;
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-2);
  --bs-heading-color: var(--text);
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--text);
  --bs-tertiary-bg: var(--surface-2);
}
body {
  min-height: 100vh;
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 0;
}
html { scroll-padding-top: calc(var(--navbar-h) + 24px); }
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
body::before {
  background-image:
    radial-gradient(600px 300px at 110% 10%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(700px 400px at 50% 120%, rgba(59,130,246,.12), transparent 60%);
  background-repeat: no-repeat;
  opacity: .55;
}
body::after {
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px; /* grid */
  mix-blend-mode: normal;
  opacity: .06;
}

#bgfx {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}
#bgfx canvas { width: 100%; height: 100%; display: block; }

/* Layering */
.particles { display:none; }

/* Main wrapper to take remaining height */
main.page-wrap {
  flex: 1 1 auto;
  display: block;
  position: relative;
  width: 100%;
  padding-top: calc(var(--navbar-h) + 24px);
}

/* Make links readable in both themes */
a { color: var(--primary); text-decoration-color: color-mix(in srgb, var(--primary) 35%, transparent); text-underline-offset: 2px; }
a[href] { cursor: pointer; }
a:hover { color: var(--primary-2); text-decoration-color: currentColor; }

/* improve default muted text accessibility */
.text-muted, small, .help { color: var(--muted) !important; }

/* Ensure headings and card text inherit correct contrast */
h1, h2, h3, h4, h5, h6 { color: var(--text); }
.card-title, .card-subtitle, .card-text { color: var(--text); }

/* =================== Navbar =================== */
.mobile-sidebar-panel { display: none; }
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-h);
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(15,23,42,.82), rgba(30,41,59,.72));
  backdrop-filter: blur(24px) saturate(150%);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  padding: 0;
  z-index: 2100;
}

/* Ensure modals overlay above fixed navbar */
.modal { z-index: 5000; }
.modal-backdrop { z-index: 4990; }

/* Tariff option cards styling */
.tariff-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}
.tariff-option {
  cursor: pointer;
  border: 1px solid rgba(148,163,184,.22) !important;
  background: linear-gradient(180deg, rgba(17,24,39,.78), rgba(17,24,39,.64)); /* default; overridden per card below */
  transition: border-color .2s ease, box-shadow .2s ease, transform .1s ease;
  border-radius: var(--radius-sm);
  position: relative;
}
.tariff-option:hover { box-shadow: 0 14px 30px -18px rgba(245,158,11,.45); border-color: rgba(245,158,11,.55) !important; }
/* Amber highlight like the bonus banner on the homepage */
.tariff-option.active {
  border-color: rgba(245,158,11,.85) !important; /* amber-500 */
  box-shadow: 0 20px 40px -22px rgba(245,158,11,.55), inset 0 0 0 1px rgba(245,158,11,.35);
  background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(17,24,39,.78));
}
.tariff-option.active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(245,158,11,.35) inset, 0 8px 26px -14px rgba(249,115,22,.45);
}
/* Left amber ribbon on active card */
.tariff-option.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 6px;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  background: linear-gradient(180deg, rgba(245,158,11,.95), rgba(249,115,22,.85));
  box-shadow: 0 0 0 1px rgba(245,158,11,.45);
}
/* Selected badge for active tariff */
.tariff-option .selected-badge { display: none; position: absolute; top: -12px; right: -12px; background: linear-gradient(135deg, #f59e0b, #f97316); color: #1a1203; border: 1px solid rgba(245,158,11,.65); border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 800; box-shadow: 0 14px 22px -12px rgba(249,115,22,.55); transform: scale(.9); }
.tariff-option .selected-badge .bi { font-size: 16px; line-height: 1; }
.tariff-option.active .selected-badge { display: inline-flex; align-items: center; gap: 6px; transform: scale(1); animation: pulse-amber 1.6s ease-in-out 2; }

@keyframes pulse-amber {
  0% { box-shadow: 0 0 0 0 rgba(245,158,11,.55); }
  70% { box-shadow: 0 0 0 12px rgba(245,158,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

/* Dashboard-like color variants for tariff cards (soft gradients) */
#tariffOptions > div:nth-child(1) .tariff-option {
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(14,165,233,.12));
  border-color: rgba(96,165,250,.28) !important;
}
#tariffOptions > div:nth-child(2) .tariff-option {
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(236,72,153,.12));
  border-color: rgba(167,139,250,.28) !important;
}
#tariffOptions .tariff-option[data-flexible="1"] {
  background: linear-gradient(135deg, rgba(251,191,36,.14), rgba(249,115,22,.10));
  border-color: rgba(245,158,11,.32) !important;
}

/* Dark disabled inputs in flexible settings */
#overrideCascadeFields .form-control:disabled,
#overrideCascadeFields .form-control[readonly] {
  background: rgba(255,255,255,.06);
  color: var(--muted);
  border-color: rgba(148,163,184,.25);
}

/* Stepper styling */
.input-stepper { display: flex; align-items: center; gap: 6px; }
.input-stepper .btn-step { --btn-bg: rgba(255,255,255,.06); background: var(--btn-bg); color: #e5e7eb; border: 1px solid rgba(148,163,184,.25); width: 36px; height: 36px; line-height: 1; padding: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.input-stepper .btn-step:hover { background: rgba(255,255,255,.1); }
.input-stepper .btn-step:disabled { opacity: .45; cursor: not-allowed; }
.input-stepper .stepper-input { text-align: center; max-width: 120px; }
.tariff-option input[type="radio"] { position: absolute; inset: 0; opacity: 0; width: 0; height: 0; pointer-events: none; }
.tariff-option .fw-semibold { display: flex; align-items: center; gap: .5rem; }
.tariff-price { margin-top: 4px; display: flex; gap: 6px; align-items: baseline; }
.tariff-price .value { font-weight: 700; font-size: 1rem; color: #e2e8f0; }
.tariff-price .label { font-size: .85rem; }

/* Sticky confirm amount card in modal body */
.modal-body .promotion-confirm-amount {
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -6px 24px -14px rgba(0,0,0,.45);
}

/* Pretty tariff badge */
.badge-tariff {
  --pp-tariff-bg: rgba(255, 193, 7, 0.15); /* amber subtle */
  --pp-tariff-border: rgba(255, 193, 7, 0.35);
  --pp-tariff-text: #ffb300;
  background: linear-gradient(180deg, var(--pp-tariff-bg), rgba(255, 193, 7, 0.1));
  color: var(--pp-tariff-text);
  border: 1px solid var(--pp-tariff-border);
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.2);
}
.badge-tariff .bi { color: var(--pp-tariff-text); }

/* Cascade card tweaks */
#tariffCascadeCard .summary-chip { background: rgba(59,130,246,.12); border: 1px solid rgba(96,165,250,.35); border-radius: 999px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }
.navbar .container-fluid {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 clamp(22px, 5vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Keep logo simple: no rounded corners, no shadows */
.navbar .navbar-brand .brand-logo {
  height: clamp(44px, calc(var(--navbar-h) - 18px), 72px);
  width: auto;
  border-radius: 0;
  box-shadow: none !important;
  filter: none !important;
  transition: transform .2s ease;
}
.navbar .navbar-brand:hover .brand-logo { transform: translateY(-1px) scale(1.02); }
.nav-link { color: var(--text) !important; opacity: .94; }
.nav-link:hover { color: var(--primary) !important; opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; }

.nav-balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(59,130,246,.22), rgba(14,165,233,.12));
  border: 1px solid rgba(96,165,250,.4);
  color: rgba(226,232,240,.92);
  font-size: .85rem;
  box-shadow: 0 10px 24px -18px rgba(15,46,91,.75), inset 0 1px 0 rgba(255,255,255,.3);
  backdrop-filter: blur(14px) saturate(140%);
}
a.nav-balance-chip { text-decoration: none; }
a.nav-balance-chip:hover { text-decoration: none; color: rgba(255,255,255,.98); box-shadow: 0 12px 28px -18px rgba(15,46,91,.9), inset 0 1px 0 rgba(255,255,255,.45); }
.nav-balance-chip i { color: rgba(56,189,248,.9); font-size: .9rem; }
.nav-balance-chip__label { opacity: .8; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.nav-balance-chip__value { font-weight: 600; letter-spacing: .01em; }
.nav-link-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0 .35rem; color: rgba(255,255,255,.88); transition: color .24s ease, transform .24s ease; }
.nav-link-icon:hover { color: #fff; transform: translateY(-1px); }
.nav-notifications__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; line-height: 1; }
.nav-notifications__badge { position: absolute; top: -6px; right: -8px; min-width: 1.45rem; padding: 0 .35rem; border-radius: 999px; background: #f97316; color: #fff; font-size: .68rem; font-weight: 700; text-align: center; box-shadow: 0 0 0 2px rgba(15,23,42,.9); }
.nav-notifications.has-unread .nav-link-icon { animation: notification-pulse 2.5s ease-in-out infinite; }
.nav-notifications.has-unread .nav-notifications__icon i { color: #fbbf24; }
.nav-notifications.has-unread .nav-notifications__badge { box-shadow: 0 0 0 2px rgba(15,23,42,.9), 0 0 12px rgba(249,115,22,.6); }

/* Mobile notification chip pulsing */
.nav-stat-chip--notify.has-unread { animation: notification-pulse 2.5s ease-in-out infinite; }

@keyframes notification-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.notifications-dropdown { width: 320px; max-height: 400px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px rgba(15,23,42,0.28); background: rgba(15,23,42,.94); backdrop-filter: blur(12px); }
.notifications-dropdown.show { display: flex; flex-direction: column; }
.notifications-dropdown__header, .notifications-dropdown__footer { padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; background: rgba(30,41,59,.88); border-bottom: 1px solid rgba(148,163,184,.24); }
.notifications-dropdown__footer { border-top: 1px solid rgba(148,163,184,.18); border-bottom: 0; justify-content: center; }
.notifications-dropdown__header span { font-weight: 600; font-size: .9rem; color: #f8fafc; }
.notifications-dropdown__mark-read { color: #60a5fa; text-decoration: none; font-size: .75rem; padding: .25rem .5rem; }
.notifications-dropdown__mark-read:hover { color: #bfdbfe; text-decoration: underline; }
.notifications-dropdown__content { position: relative; padding: 0; overflow-y: auto; max-height: 320px; }
.notifications-dropdown__content::-webkit-scrollbar { width: 6px; }
.notifications-dropdown__content::-webkit-scrollbar-thumb { background: rgba(94,114,228,.4); border-radius: 999px; }
.notifications-dropdown__empty { color: rgba(226,232,240,.8); }
.notifications-item { padding: .85rem 1rem; border-bottom: 1px solid rgba(148,163,184,.2); position: relative; transition: background .2s ease; }
.notifications-item:last-child { border-bottom: none; }
.notifications-item.is-unread { background: rgba(59,130,246,.14); }
.notifications-item:is(:hover, :focus-within) { background: rgba(59,130,246,.22); }
.notifications-item__title { font-size: .9rem; font-weight: 600; color: #f8fafc; margin-bottom: .35rem; }
.notifications-item__message { font-size: .78rem; color: rgba(226,232,240,.92); line-height: 1.5; margin-bottom: .45rem; }
.notifications-item__message div + div { margin-top: .25rem; }
.notifications-item__meta { font-size: .7rem; color: rgba(148,163,184,.9); text-transform: uppercase; letter-spacing: .08em; }
.notifications-item__cta { display: inline-block; margin-top: .55rem; font-size: .72rem; font-weight: 600; color: #93c5fd; text-decoration: none; background: rgba(37,99,235,.12); padding: .35rem .65rem; border-radius: 999px; }
.notifications-item__cta:hover { background: rgba(37,99,235,.2); color: #bfdbfe; }
.dropdown-menu.notifications-dropdown .btn-link { color: #93c5fd; }
.dropdown-menu.notifications-dropdown .btn-link:hover { color: #bfdbfe; }

/* Navbar mini stats chips */
.nav-stats-group { display: inline-flex; align-items: center; gap: .5rem; margin-right: .5rem; }
.nav-stat-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(248,250,252,.96);
  padding: .35rem .6rem; border-radius: 999px;
  text-decoration: none; transition: all .2s ease; backdrop-filter: blur(6px);
}
.nav-stat-chip:hover { color: rgba(255,255,255,.98); box-shadow: 0 10px 24px -16px rgba(15,46,91,.9), inset 0 1px 0 rgba(255,255,255,.4); transform: translateY(-1px); }
.nav-stat-chip .bi { color: rgba(191,219,254,.95); font-size: .95rem; }
.nav-stat-chip .label { opacity: .8; text-transform: uppercase; letter-spacing: .08em; font-size: .66rem; }
.nav-stat-chip .value { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.language-switcher .dropdown-toggle {
  display: inline-flex;               /* keep content aligned in one row */
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(148,163,184,.24);
  color: rgba(241,245,249,.96);
  padding: .38rem .7rem;              /* slightly tighter for symmetry with other buttons */
  line-height: 1;                     /* avoid tall button effect */
  white-space: nowrap;                /* prevent wrap of language name */
  box-shadow: 0 10px 26px -18px rgba(15,46,91,.72), inset 0 1px 0 rgba(255,255,255,.22);
  transition: all .2s ease;
}
.language-switcher .dropdown-toggle:hover,
.language-switcher .dropdown-toggle:focus {
  border-color: rgba(148,197,255,.65);
  color: #fff;
  background: rgba(59,130,246,.28);
  box-shadow: 0 16px 32px -22px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.25);
}
.language-switcher__flag {
  font-size: 1.05rem;
  line-height: 1;
  width: 1.15rem;                     /* fixed width keeps label start aligned */
  text-align: center;
}
.language-switcher__names {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.language-switcher .dropdown-toggle .language-switcher__label,
.language-switcher .dropdown-toggle .language-switcher__native,
.language-switcher .dropdown-toggle .language-switcher__label-text {
  color: rgba(255,255,255,.98);
  text-shadow: 0 1px 4px rgba(15,23,42,.45); /* slightly softer shadow for cleaner look on desktop */
}
.language-switcher .dropdown-toggle .language-switcher__label-full { white-space: nowrap; }
.language-switcher__native {
  font-weight: 600;
  color: rgba(15,23,42,.92);
}
.language-switcher__flag {
  font-family: "Twemoji Country Flags","Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
}
.language-switcher .dropdown-menu {
  background: radial-gradient(circle at top, rgba(30,64,175,.92), rgba(15,23,42,.94));
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 18px 38px -24px rgba(15,23,42,.85), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  min-width: 12rem;                    /* ensure readable width on desktop */
  margin-top: 8px;                      /* detach from toggle a bit */
  border-radius: 14px;
}

/* Force vertical stacking of language options on all viewports */
.language-switcher__menu .language-switcher__grid { display:flex; flex-direction:column; gap:.4rem; }
.language-switcher__menu .language-switcher__grid > .language-option { display:flex; width:100%; white-space:normal; }
.language-switcher__menu .language-switcher__grid > .language-option + .language-option { margin-top:0; }
.dropdown-menu .language-switcher__native {
  color: rgba(226,232,240,.96);
}
/* Old .dropdown-item rules removed; now using .language-option tile styles */

/* Desktop refinements: consistent spacing and alignment */
@media (min-width: 992px) {
  .language-switcher .dropdown-toggle { padding: .4rem .7rem; }
  .language-switcher__names { line-height: 1.05; }
}
@media (max-width: 575.98px) {
  .language-switcher .dropdown-toggle {
    padding-inline: .55rem;
  }
  .language-switcher__label {
    display: none !important;
  }
}

/* Color accents per stat type */
.nav-stat-chip--projects .bi { color: rgba(147,197,253, .95); }
.nav-stat-chip--active .bi { color: rgba(74,222,128, .95); }
.nav-stat-chip--published .bi { color: rgba(250,204,21, .95); }

/* Non-link chips are interactive for tooltip only */

.beta-banner {
  margin: 2rem auto 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: 960px;
  padding: .85rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(59,130,246,.32), rgba(59,130,246,.18));
  border: 1px solid rgba(148,197,255,.45);
  color: rgba(226,232,240,.96);
  font-weight: 600;
  box-shadow: 0 18px 46px -28px rgba(37,99,235,.6);
}
.beta-banner .beta-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 0 0 6px rgba(34,197,94,.15);
  display: inline-block;
}
.beta-banner .beta-text {
  flex: 1;
  font-size: .95rem;
}

.hero-simple {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 3rem 0 2rem;
  color: rgba(226,232,240,.92);
}
.hero-simple__copy {
  max-width: 780px;
}
.hero-simple h1 {
  font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: #f8fafc;
}
.hero-simple__lead {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  color: rgba(226,232,240,.85);
}
.hero-simple__list {
  display: grid;
  gap: .85rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.hero-simple__list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: 1rem;
  color: rgba(226,232,240,.82);
}
.hero-simple__list li i {
  color: #93c5fd;
  font-size: 1.35rem;
  line-height: 1;
  margin-top: .2rem;
}
.hero-simple__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero-simple__note {
  margin-top: 1rem;
  color: rgba(148,163,184,.9);
  font-size: .95rem;
}

.steps-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.step-card {
  background: #ffffff;
  padding: 1.6rem;
  border-radius: 20px;
  box-shadow: 0 18px 42px -32px rgba(15,23,42,.35);
  border: 1px solid rgba(148,163,184,.2);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.step-card__badge {
  align-self: flex-start;
  padding: .4rem .9rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .05em;
  background: rgba(59,130,246,.12);
  color: #1d4ed8;
  text-transform: uppercase;
  font-size: .82rem;
}
.media-placeholder {
  border: 1px dashed rgba(148,163,184,.6);
  background: rgba(226,232,240,.45);
  border-radius: 16px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(71,85,105,.9);
  font-size: .92rem;
  padding: 1.2rem;
}
.media-placeholder span {
  max-width: 240px;
}

.info-grid {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.info-card {
  background: linear-gradient(180deg, rgba(248,250,252,1), rgba(248,250,252,0.6));
  border-radius: 18px;
  padding: 1.6rem;
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 16px 36px -30px rgba(15,23,42,.3);
}
.info-card h3 {
  font-size: 1.15rem;
  margin-bottom: .75rem;
  color: #0f172a;
}
.info-card p {
  margin: 0;
  color: rgba(71,85,105,.9);
  line-height: 1.6;
}

.comparison-simple {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.comparison-simple__card {
  border-radius: 20px;
  padding: 1.8rem;
  border: 1px solid rgba(148,163,184,.25);
  background: #ffffff;
  box-shadow: 0 18px 36px -28px rgba(15,23,42,.3);
}
.comparison-simple__card--accent {
  background: linear-gradient(180deg, rgba(59,130,246,.12), rgba(59,130,246,.02));
  border-color: rgba(59,130,246,.25);
}
.comparison-simple__card h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.comparison-simple__card ul {
  margin: 0;
  padding-left: 1.2rem;
  color: rgba(71,85,105,.9);
}
.comparison-simple__card li {
  margin-bottom: .6rem;
}

.timeline-card {
  max-width: 760px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 20px 36px -30px rgba(15,23,42,.25);
}
.timeline-card h3 {
  margin-bottom: 1rem;
  color: #0f172a;
}
.timeline-card p {
  margin-bottom: 1rem;
  color: rgba(71,85,105,.9);
  line-height: 1.7;
}

.steps-inline {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.steps-inline__item {
  background: rgba(15,23,42,.03);
  border-radius: 18px;
  padding: 1.5rem;
  border: 1px solid rgba(148,163,184,.2);
}
.steps-inline__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  font-weight: 600;
  background: rgba(59,130,246,.16);
  color: #1d4ed8;
  margin-bottom: .75rem;
}
.steps-inline__item h3 {
  font-size: 1.05rem;
  margin-bottom: .6rem;
  color: #0f172a;
}
.steps-inline__item p {
  margin: 0;
  color: rgba(71,85,105,.9);
  line-height: 1.6;
}

.faq-simple {
  display: grid;
  gap: .9rem;
  max-width: 720px;
}
.faq-simple details {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.2);
  padding: 1rem 1.2rem;
  box-shadow: 0 16px 28px -28px rgba(15,23,42,.25);
}
.faq-simple summary {
  cursor: pointer;
  font-weight: 600;
  color: #0f172a;
}
.faq-simple summary::-webkit-details-marker {
  display: none;
}
.faq-simple details[open] {
  border-color: rgba(59,130,246,.35);
}
.faq-simple details p {
  margin: .85rem 0 0;
  color: rgba(71,85,105,.9);
  line-height: 1.6;
}

.landing-cta {
  padding: 3rem 0;
}
.landing-cta__wrap {
  background: linear-gradient(135deg, rgba(59,130,246,.9), rgba(37,99,235,.7));
  border-radius: 28px;
  padding: 2.4rem;
  color: #fff;
  box-shadow: 0 24px 48px -28px rgba(37,99,235,.65);
  text-align: center;
}
.landing-cta__wrap h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 1rem;
}
.landing-cta__wrap p {
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
}
.landing-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
}
.landing-cta__note {
  margin: 0;
  font-size: .95rem;
}
.landing-cta__note a {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 767.98px) {
  .beta-banner {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-simple__actions {
    flex-direction: column;
  }
}
.nav-stat-chip { cursor: default; }
.nav-stat-chip[role="button"] { cursor: pointer; outline: none; }
.nav-stat-chip[role="button"]:focus-visible {
  outline: 2px solid rgba(96,165,250,.85);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px rgba(14,43,94,.6);
}
.nav-stat-chip--active.nav-stat-chip--empty { opacity: .7; }

.nav-active-popover.popover {
  background: rgba(13,22,41,.95);
  color: rgba(226,232,240,.96);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(3,8,23,.55);
  max-width: 320px;
  backdrop-filter: blur(12px) saturate(140%);
}
.nav-active-popover.popover .popover-arrow::after {
  background: rgba(13,22,41,.95);
  border-color: transparent;
}
.nav-active-popover.popover .popover-body {
  padding: 0;
  color: inherit;
}
.nav-active-popover__wrap {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .75rem .85rem .8rem;
}
.nav-active-popover__title {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: rgba(148,163,184,.92);
}
.nav-active-popover__list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.nav-active-popover__item {
  background: rgba(30,41,59,.42);
  border: 1px solid rgba(94,234,212,.16);
  border-radius: 12px;
  padding: .55rem .6rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.nav-active-popover__head {
  display: flex;
  justify-content: space-between;
  gap: .65rem;
  align-items: baseline;
}
.nav-active-popover__project {
  font-weight: 600;
  font-size: .78rem;
  color: rgba(226,232,240,.94);
}
.nav-active-popover__percent {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(134,239,172,.9);
}
.nav-active-popover__link {
  font-size: .72rem;
  color: rgba(148,163,184,.92);
  margin-top: .35rem;
  word-break: break-word;
}
.nav-active-popover__stage {
  margin-top: .3rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  color: rgba(96,165,250,.9);
}
.nav-active-popover__more {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(96,165,250,.88);
}
.nav-active-popover__hint {
  margin-top: .2rem;
  font-size: .7rem;
  color: rgba(226,232,240,.7);
}
.nav-active-popover__empty {
  padding: .35rem 0;
  font-size: .75rem;
  color: rgba(148,163,184,.82);
}

/* Active Promotions Modal Styling */
.pp-active-promotions-modal .modal-content {
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(30,41,59,.96));
  color: rgba(226,232,240,.95);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.85);
}
.pp-active-promo-header {
  position: relative;
  background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(30,41,59,.85));
  border-bottom: 1px solid rgba(148,163,184,.22);
  padding: 1.25rem 1.5rem;
}
.pp-active-promo-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(59,130,246,.08));
  pointer-events: none;
}
.pp-active-promo-header .modal-title {
  position: relative;
  z-index: 1;
  font-size: 1.35rem;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  margin: 0;
}
.pp-active-promo-header .modal-title i {
  color: rgba(34,211,238,.9);
  font-size: 1.5rem;
  animation: ppRocketPulse 2s ease-in-out infinite;
}
@keyframes ppRocketPulse {
  0%, 100% { transform: translateY(0) scale(1); opacity: 1; }
  50% { transform: translateY(-3px) scale(1.08); opacity: .85; }
}
.pp-active-promo-header .btn-close {
  position: relative;
  z-index: 2;
  filter: brightness(0) invert(1);
  opacity: .8;
}
.pp-active-promo-header .btn-close:hover { opacity: 1; }
.pp-active-promo-body {
  padding: 1.5rem;
  max-height: 70vh;
}
.pp-active-promo-footer {
  border-top: 1px solid rgba(148,163,184,.18);
  background: rgba(15,23,42,.66);
  padding: 1rem 1.5rem;
}
.pp-active-promo-footer .btn {
  border-radius: 8px;
  font-weight: 600;
}
.active-promotions-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.active-promotions-list__item {
  position: relative;
  background: rgba(30,41,59,.55);
  border: 1px solid rgba(94,234,212,.22);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,.06),
    0 4px 12px rgba(0,0,0,.25);
  transition: all .3s ease;
}
.active-promotions-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #22d3ee, #3b82f6 60%, #8b5cf6);
  box-shadow: 0 0 12px rgba(34,211,238,.6);
}
.active-promotions-list__item:hover {
  border-color: rgba(94,234,212,.35);
  transform: translateX(4px);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,.08),
    0 8px 24px rgba(0,0,0,.35);
}
.active-promotions-list__top {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  align-items: baseline;
  margin-bottom: .4rem;
}
.active-promotions-list__project {
  font-weight: 700;
  font-size: .95rem;
  color: rgba(191,219,254,.98);
}
.active-promotions-list__link {
  font-size: .78rem;
  color: rgba(148,163,184,.9);
  text-decoration: none;
  max-width: 58%;
  text-align: right;
  word-break: break-all;
}
.active-promotions-list__link:hover { color: rgba(191,219,254,.94); text-decoration: underline; }
.active-promotions-list__anchor {
  font-size: .74rem;
  color: rgba(209,213,219,.85);
  margin-bottom: .35rem;
}
.active-promotions-list__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .75rem;
  align-items: center;
  font-size: .74rem;
  color: rgba(148,163,184,.9);
  margin-bottom: .55rem;
}
.active-promotions-list__stage {
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(59,130,246,.14));
  color: rgba(125,211,252,.98);
  border: 1px solid rgba(125,211,252,.4);
  padding: .25rem .75rem;
  font-weight: 700;
  font-size: .7rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.active-promotions-list__progress-text { font-weight: 600; color: rgba(226,232,240,.92); }
.active-promotions-list__updated { color: rgba(148,163,184,.78); font-size: .68rem; }
.active-promotions-list__progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.75);
  border: 1px solid rgba(148,163,184,.2);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.4);
}
.active-promotions-list__progress .progress-bar {
  background: linear-gradient(90deg, #22d3ee, #3b82f6 60%, #8b5cf6);
  background-size: 200% 100%;
  box-shadow: 
    0 0 12px rgba(34,211,238,.55),
    0 0 0 1px rgba(255,255,255,.25) inset;
  animation: ppLiquidFlow 6s ease-in-out infinite;
}
.active-promotions-list__empty { font-size: .85rem; }

@media (max-width: 575.98px) {
  .active-promotions-list__top { flex-direction: column; align-items: flex-start; gap: .3rem; }
  .active-promotions-list__link { max-width: 100%; text-align: left; }
  .nav-active-popover.popover { max-width: 92vw; }
  .pp-active-promo-header {
    padding: 1rem 1.25rem;
  }
  .pp-active-promo-header .modal-title {
    font-size: 1.15rem;
  }
  .pp-active-promo-header .modal-title i {
    font-size: 1.25rem;
  }
  .pp-active-promo-body {
    padding: 1.25rem;
  }
  .active-promotions-list__item {
    padding: .95rem 1rem;
  }
  .active-promotions-list__item::before {
    top: 10px;
    bottom: 10px;
  }
}

@media (max-width: 991.98px) {
  .mobile-sidebar-panel { display: flex; }
  /* collapse mode: make chips full width rows for readability */
  .nav-stats-group { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
  .nav-stats-group .nav-stat-chip { padding: .4rem .65rem; }
  /* Compact stats row on mobile */
  .nav-stats-group--mobile { display:grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .nav-stats-group--mobile .nav-stat-chip { display:flex; align-items:center; justify-content:center; padding:.5rem .6rem; border-radius:14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
  .nav-stats-group--mobile .nav-stat-chip .bi { font-size: .95rem; }
  .nav-stats-group--mobile .nav-stat-chip .value { font-weight:700; margin-left:.35rem; }
  .nav-stats-group--mobile .nav-stat-chip.nav-stat-chip--notify { background: rgba(255,255,255,.06); }
  .nav-stats-group--mobile .nav-stat-chip.nav-stat-chip--notify .bi { color: rgba(255, 205, 86, .95); }
}

/* Toggler visibility on dark */
.navbar-dark .navbar-toggler { border-color: var(--border); }
.navbar-dark .navbar-toggler-icon { filter: drop-shadow(0 0 1px rgba(0,0,0,.6)); }

/* Theme toggle */

/* Navbar avatar and dropdown polish */
.navbar .nav-avatar {
  width: 28px; height: 28px; border-radius: 999px; object-fit: cover; object-position: center;
  border: 1px solid var(--border); background: var(--surface-2);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.dropdown-menu { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--text); }

/* Stronger, darker dropdown specifically in the navbar to avoid blending with the glass background */
.navbar .dropdown-menu {
  background: linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.9)) !important; /* much darker */
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(14px) saturate(140%);
}
.navbar .dropdown-item { color: rgba(241,245,249,.98); }
.navbar .dropdown-item i { color: rgba(203,213,225,.95); }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus { background: rgba(255,255,255,.08); color: #fff; }
.navbar .dropdown-divider { border-top-color: rgba(255,255,255,.14); }
.navbar .dropdown-menu .btn.btn-link { color: rgba(241,245,249,.96); }
.navbar .dropdown-menu .btn.btn-link:hover { color: #fff; text-decoration: underline; }

/* Mobile navbar backdrop & improved mobile collapse panel */
@media (max-width: 991.98px) {
  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.72);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1040; /* below navbar (which is fixed) but above page content */
  }
  body.nav-open .mobile-menu-backdrop,
  body.sidebar-open .mobile-menu-backdrop { opacity: 1; pointer-events: auto; }
  body.nav-open,
  body.sidebar-open { overflow: hidden; }

  /* Center brand on mobile between toggles */
  .navbar .navbar-brand.navbar-brand--center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
  .navbar .navbar-brand.navbar-brand--center .brand-logo { height: 46px; }
  .navbar .navbar-toggler { z-index: 1055; }

  /* Mobile sidebar left drawer */
  .mobile-sidebar-panel {
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    bottom: 0;
    width: min(320px, 82vw);
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(17,24,39,.95), rgba(31,41,55,.92));
    box-shadow: 0 10px 32px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
    border-right: 1px solid rgba(255,255,255,.06);
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.4,.02,.2,1);
    z-index: 1080;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
  body.sidebar-open .mobile-sidebar-panel { transform: translateX(0); }
  .mobile-sidebar-panel__inner { overflow-y: auto; padding: 20px 18px 40px; height: 100%; }
  .mobile-sidebar-panel__inner::-webkit-scrollbar { width: 8px; }
  .mobile-sidebar-panel__inner::-webkit-scrollbar-track { background: rgba(255,255,255,.06); border-radius: 999px; }
  .mobile-sidebar-panel__inner::-webkit-scrollbar-thumb { background: rgba(96,165,250,.55); border-radius: 999px; }
  .mobile-sidebar-panel .menu-item { padding: 10px 14px; border-radius: 10px; display: flex; align-items: center; gap: 12px; font-size: 15px; }
  .mobile-sidebar-panel .menu-item:hover { background: rgba(255,255,255,.08); }
  .mobile-sidebar-panel .sidebar-panel { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; border-radius: 16px; padding: 14px 14px 10px; }
  .mobile-sidebar-panel .sidebar-panel__header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .mobile-sidebar-panel .sidebar-panel__icon { width: 36px; height: 36px; border-radius: 12px; background: rgba(59,130,246,.18); display: grid; place-items: center; font-size: 18px; color: rgba(191,219,254,.96); }
  .mobile-sidebar-panel .sidebar-panel__title { font-weight: 600; color: #f1f5f9; font-size: 16px; }
  .mobile-sidebar-panel .sidebar-panel__counter { background: rgba(255,255,255,.1); border-radius: 999px; padding: 2px 8px; font-size: 12px; margin-left: 6px; }
  .mobile-sidebar-panel .sidebar-panel__content { display: flex; flex-direction: column; gap: 6px; }
  .mobile-sidebar-panel .sidebar-panel--current .sidebar-panel__icon { background: rgba(45,212,191,.25); border: 1px solid rgba(45,212,191,.35); color: #fff; }
  .mobile-sidebar-panel .sidebar-panel--referral .sidebar-panel__icon { background: rgba(59,130,246,.24); }
  body.sidebar-open { overflow: hidden; }

  /* Elevate collapse menu panel */
  .navbar .navbar-collapse {
    background: linear-gradient(160deg, rgba(17,24,39,.94), rgba(30,41,59,.92));
    box-shadow: 0 10px 28px -6px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
    border-radius: 18px;
    padding: 16px 20px 28px;
    position: relative;
    z-index: 1050;
    max-height: calc(100vh - var(--navbar-h) - 32px);
    overflow-y: auto;
  }
  /* Collapse content as grid: chips row (2 columns) + full-width items */
  .navbar .navbar-collapse .navbar-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(44px, auto);
    gap: 10px;
  }
  /* Mobile tabs */
  .mobile-collapse-tabs { display: flex; gap: 6px; margin-bottom: 4px; }
  .mobile-collapse-tabs .tab-btn { flex:1 1 0; background: rgba(255,255,255,.06); color:#e2e8f0; border:1px solid rgba(148,163,184,.25); padding:8px 10px; font-size:14px; border-radius:10px; font-weight:600; }
  .mobile-collapse-tabs .tab-btn.active { background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(14,165,233,.22)); border-color: rgba(96,165,250,.55); color:#fff; }
  .navbar .navbar-collapse[data-mobile-tab="sections"] [data-pp-mobile-group="main"] { display:none !important; }
  .navbar .navbar-collapse[data-mobile-tab="main"] [data-pp-mobile-group="sections"] { display:none !important; }
    /* Mobile chips: switch from previous 2-column grid to a single vertical list */
    .navbar .navbar-collapse[data-mobile-tab] .navbar-nav { --pp-mobile-grid-gap: 8px; }
    @media (max-width: 991.98px) {
      .navbar .navbar-collapse[data-mobile-tab="main"] .navbar-nav { display:flex; flex-direction:column; gap: var(--pp-mobile-grid-gap); }
      .navbar .navbar-collapse[data-mobile-tab="main"] .navbar-nav > li.nav-item--chip { width:100%; }
      .navbar .navbar-collapse[data-mobile-tab="main"] .navbar-nav > li.nav-item--chip[data-pp-notifications] .nav-link,
      .navbar .navbar-collapse[data-mobile-tab="main"] .navbar-nav > li.nav-item--chip .nav-balance-chip { justify-content:center; }
    }
  /* Profile dropdown full width separate block */
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) { background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:6px 10px; }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) .nav-link { padding:8px 10px; border-radius:10px; }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) .dropdown-menu { position:static; transform:none!important; background:transparent; border:0; box-shadow:none; padding:0; margin-top:4px; }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) .dropdown-menu .dropdown-item:not(.language-option) { border-radius:10px; padding:10px 12px; background: rgba(255,255,255,.06); margin-bottom:6px; }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) .dropdown-menu .dropdown-item:not(.language-option):hover { background: rgba(255,255,255,.12); }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) .dropdown-divider { display:none; }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) form { margin-top:4px; }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) form .btn { width:100%; text-align:left; padding:10px 12px; border-radius:10px; background: rgba(255,255,255,.06); }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) form .btn:hover { background: rgba(255,255,255,.12); }
  /* Ensure chips span full width & are centered in mobile vertical list */
  .navbar .navbar-collapse .navbar-nav > li.nav-item--chip .nav-link,
  .navbar .navbar-collapse .navbar-nav > li.nav-item--chip .nav-balance-chip { width:100%; justify-content:center; }
  /* keep profile dropdown and language switcher full width */
  .navbar .navbar-collapse .navbar-nav > li.language-switcher,
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) { grid-column: 1 / -1; }
  .navbar .navbar-collapse::-webkit-scrollbar { width: 8px; }
  .navbar .navbar-collapse::-webkit-scrollbar-track { background: rgba(255,255,255,.08); border-radius: 999px; }
  .navbar .navbar-collapse::-webkit-scrollbar-thumb { background: rgba(96,165,250,.55); border-radius: 999px; }
  .navbar .navbar-nav .nav-link { padding: 10px 14px; border-radius: 10px; }
  .navbar .navbar-nav .nav-link:active { background: rgba(255,255,255,.12); }
  .navbar .navbar-nav .dropdown-menu { position: static; float: none; margin-top: 8px; box-shadow: none; background: rgba(30,41,59,.85); }
  /* Compact chips for verification/balance on mobile */
  .navbar .onboarding-chip,
  .navbar .nav-balance-chip,
  .navbar .nav-link-icon { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(148,163,184,.2); white-space: nowrap; }
  .navbar .nav-balance-chip .nav-balance-chip__label { display: none; } /* экономим место */
  .navbar .nav-balance-chip .nav-balance-chip__value { font-weight: 700; }
  /* Language switcher code visibility */
  .language-switcher__code { font-size:.65rem; letter-spacing:.08em; opacity:.85; }
  .language-switcher__label { font-size:.75rem; opacity:.9; }
  .language-switcher__label-full { font-size:.75rem; opacity:.75; }
  /* Mobile balance centering & chevron */
  .nav-balance-mobile-center { width:100%; }
  .nav-balance-mobile-center .nav-balance-chip { display:flex; align-items:center; justify-content:center; gap:.4rem; }
  /* Force center when mobile tabs add different alignment */
  .navbar .navbar-collapse .navbar-nav > li.nav-balance-mobile-center .nav-balance-chip { justify-content:center !important; }

  /* Notifications chip interactive styling */
  .nav-stats-group--mobile .nav-stat-chip.nav-stat-chip--notify { cursor:pointer; position:relative; }
  .nav-stats-group--mobile .nav-stat-chip.nav-stat-chip--notify .chevron { font-size:.65rem; opacity:.55; transition:transform .25s ease, opacity .25s ease; }
  .nav-stats-group--mobile .nav-stat-chip.nav-stat-chip--notify:hover .chevron { opacity:.9; transform:translateX(2px); }
  .nav-stats-group--mobile .nav-stat-chip.nav-stat-chip--notify:focus-visible { outline:2px solid rgba(255,205,86,.8); outline-offset:2px; }
  .nav-stats-group--mobile .nav-stat-chip.nav-stat-chip--notify.has-unread { animation:notify-pulse 2.8s infinite; }
  @keyframes notify-pulse { 0%{box-shadow:0 0 0 0 rgba(255,205,86,.45);} 60%{box-shadow:0 0 0 10px rgba(255,205,86,0);} 100%{box-shadow:0 0 0 0 rgba(255,205,86,0);} }

  /* Center language switcher on mobile */
  @media (max-width: 991.98px) {
    .navbar .language-switcher { width:100%; display:flex; }
    .navbar .language-switcher > .dropdown-toggle { flex:1 1 auto; justify-content:center; width:100%; }
  }

  /* Refined logout button glass style */
  .nav-logout-btn { font-weight:600; border:1px solid rgba(220,53,69,.35); background:linear-gradient(135deg, rgba(220,53,69,.12), rgba(220,53,69,.06)); color:#ff6b6b; backdrop-filter:blur(6px); }
  .nav-logout-btn:hover { background:linear-gradient(135deg, rgba(220,53,69,.22), rgba(220,53,69,.1)); color:#ff8585; }
  .nav-balance-mobile-center .nav-balance-chip i.bi-lightning-charge { font-size:.95rem; }
  .nav-balance-mobile-center .nav-balance-chip .bi-chevron-right { font-size:.7rem; transition:transform .25s ease, opacity .25s ease; }
  .nav-balance-mobile-center .nav-balance-chip:hover .bi-chevron-right { transform:translateX(2px); opacity:.95; }

  /* Logout button styling */
  .nav-logout-btn { font-weight:600; border-width:1px; border-style:solid; border-color:rgba(220,53,69,.35); background:rgba(220,53,69,.08); color:#ff6b6b; }
  .nav-logout-btn:hover { background:rgba(220,53,69,.15); color:#ff8585; box-shadow:0 0 0 1px rgba(220,53,69,.4),0 6px 18px -8px rgba(220,53,69,.5); }

  /* Language switcher tweaks */
  .language-switcher__label-full { font-weight:600; letter-spacing:.03em; }
  @media (min-width: 768px) { .language-switcher__code { font-size:.7rem; } }

  /* Enhanced balance chip */
  .nav-balance-chip--enhanced { position:relative; background:linear-gradient(135deg, rgba(59,130,246,.35), rgba(14,165,233,.25)); border:1px solid rgba(96,165,250,.55); box-shadow:0 8px 28px -12px rgba(14,165,233,.55), inset 0 1px 0 rgba(255,255,255,.35); padding:.55rem .9rem; border-radius:18px; font-weight:600; gap:.55rem; }
  .nav-balance-chip--enhanced .nav-balance-chip__icon-wrap i { color:#fff; filter:drop-shadow(0 1px 3px rgba(14,165,233,.55)); }
  .nav-balance-chip--enhanced .nav-balance-chip__value { font-size:.9rem; font-weight:700; letter-spacing:.02em; color:#fff; }
  /* Removed standalone currency badge & chevron for cleaner look */
  .nav-balance-chip--enhanced:active { transform:translateY(0); box-shadow:0 6px 18px -10px rgba(14,165,233,.55), inset 0 1px 0 rgba(255,255,255,.4); }
  .nav-balance-mobile-center .nav-balance-chip--enhanced { justify-content:center; width:100%; }

  /* Language switcher menu redesign */
  .language-switcher__menu { padding:.6rem .7rem; min-width:14rem; margin-top:8px; border-radius:14px; }
  .language-switcher__grid { display:grid; grid-template-columns:1fr; gap:.4rem; }
/* Maximum specificity to override Bootstrap .dropdown-menu styles */
.dropdown-menu.language-switcher__menu .language-option,
.language-switcher__menu .language-option,
a.language-option { /* triple selector for max specificity */
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: .8rem !important;
  width: 100% !important;
  padding: .62rem .85rem !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border-radius: 14px !important;
  text-decoration: none !important;
  color: #e2e8f0 !important;
  font-size: .86rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease !important;
  cursor: pointer !important;
}
.dropdown-menu.language-switcher__menu .language-option__flag,
.language-option__flag { font-size: clamp(.95rem, 1.8vw, 1.1rem) !important; line-height:1 !important; width:1.35rem !important; text-align:center !important; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) !important; flex-shrink:0 !important; }
.dropdown-menu.language-switcher__menu .language-option__label,
.language-option__label { display:flex !important; flex-direction:column !important; line-height:1.05 !important; min-width:0 !important; }
.dropdown-menu.language-switcher__menu .language-option__native,
.language-option__native { font-weight:600 !important; color:#f8fafc !important; }
.dropdown-menu.language-switcher__menu .language-option__check,
.language-option__check { margin-left:auto !important; color:rgba(203,213,225,.9) !important; display:inline-flex !important; align-items:center !important; }
.dropdown-menu.language-switcher__menu .language-option.is-current,
.language-option.is-current { cursor:default !important; }
.dropdown-menu.language-switcher__menu .language-option.is-current:hover,
.language-option.is-current:hover { transform:none !important; box-shadow:none !important; }
.dropdown-menu.language-switcher__menu .language-option:hover,
.dropdown-menu.language-switcher__menu .language-option:focus-visible,
.language-option:hover,
.language-option:focus-visible { background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(37,99,235,.24)) !important; border-color: rgba(96,165,250,.6) !important; color:#fff !important; transform:translateY(-1px) !important; box-shadow:0 6px 18px -10px rgba(37,99,235,.45),0 0 0 3px rgba(59,130,246,.2) !important; }
.dropdown-menu.language-switcher__menu .language-option:active,
.language-option:active { transform:translateY(0) !important; box-shadow:0 3px 10px -6px rgba(37,99,235,.45) inset !important; }
.dropdown-menu.language-switcher__menu .language-option.active,
.language-option.active { background: linear-gradient(140deg, rgba(59,130,246,.9), rgba(14,165,233,.85)) !important; color:#fff !important; border-color: rgba(255,255,255,.55) !important; box-shadow:0 8px 26px -12px rgba(14,165,233,.55), inset 0 1px 0 rgba(255,255,255,.35) !important; }

/* Removed duplicate block - using high-specificity selectors with !important above */
.dropdown-menu.language-switcher__menu .language-option + .language-option,
.language-option + .language-option { margin-top: 8px !important; }
.dropdown-menu.language-switcher__menu .language-option + .language-option::before,
.language-option + .language-option::before {
  content: "" !important;
  position: absolute !important;
  top: -5px !important;
  left: 12px !important;
  right: 12px !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(148,163,184,.14), rgba(148,163,184,.08)) !important;
  border-radius: 1px !important;
  pointer-events: none !important;
}
@media (max-width: 575.98px) {
  .language-option { padding: .55rem .65rem !important; font-size: .82rem !important; }
  .language-option__flag { width: 1.15rem !important; font-size: 1rem !important; }
}
@media (max-width: 991.98px) {
  .language-switcher__menu { width:100%; }
}
@media (min-width: 992px) {
  .language-switcher__menu { width: 240px; padding:.6rem; }
  .language-switcher__grid { display:flex; flex-direction:column; gap:.55rem; }
  .language-option { padding:.6rem .8rem !important; font-size:.86rem !important; }
}

  /* Navbar dropdown placement/padding fixes */
  .navbar .navbar-collapse.show { padding-top: 8px; }
  .language-switcher .dropdown-menu { margin-top:8px; }
  .navbar .btn:hover, .navbar .btn:focus { transform:none !important; }
  @media (max-width: 991.98px) { .navbar .navbar-collapse { margin-top:8px; } }

  /* Hide language toggle while menu is open on mobile to avoid double tile: handle both .show and aria-expanded */
  @media (max-width: 991.98px) {
    .language-switcher.show > .dropdown-toggle { display: none !important; }
    .language-switcher > .dropdown-toggle[aria-expanded="true"] { display: none !important; }
  }

  /* Chevron on full-width balance */
  .nav-balance-chip--enhanced .balance-chevron { font-size:.85rem; opacity:.7; transition:transform .2s ease, opacity .2s ease; }
  .nav-balance-chip--enhanced:hover .balance-chevron { transform:translateX(2px); opacity:.95; }

  /* Profile dropdown beautify on mobile */
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) .dropdown-menu { backdrop-filter: blur(22px); background: rgba(17,24,39,.72); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:8px; box-shadow:0 18px 40px -18px rgba(0,0,0,.5),0 4px 18px -6px rgba(0,0,0,.35); overflow:hidden; }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) .dropdown-menu .dropdown-item:not(.language-option) { padding:.72rem 1rem; border-radius:12px; margin:4px; font-size:.9rem; display:flex; align-items:center; gap:.55rem; }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) .dropdown-menu .dropdown-item:not(.language-option) i { opacity:.85; }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) .dropdown-menu .dropdown-item:not(.language-option):hover { background:rgba(255,255,255,.08); color:#f8fafc; }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) .dropdown-menu hr.dropdown-divider { margin:.45rem 4px .55rem; border-color:rgba(255,255,255,.1); }
  .navbar .navbar-collapse .navbar-nav > li.dropdown:not(.nav-item--chip) .dropdown-menu form button { font-size:.85rem; }
  .navbar .nav-item + .nav-item { margin-top: 8px; }
  .navbar .navbar-collapse .navbar-nav > li.nav-item--chip { margin-top: 0; }

  /* Hide the original client sidebar on mobile; we'll show cloned drawer instead */
  .layout-has-sidebar .sidebar.sidebar--client { display: none !important; }
  .layout-has-sidebar .main-content { width: 100%; flex: 1 1 auto; }
  main.page-wrap.layout-has-sidebar { flex-direction: column; }
}

.spinner-border-lg {
  width: 3.75rem;
  height: 3.75rem;
  border-width: .45rem;
}

/* =================== Layout =================== */
main.page-wrap.layout-has-sidebar {
  display: flex;
  align-items: flex-start;
  gap: clamp(22px, 3.5vw, 40px);
  padding-left: clamp(18px, 3vw, 36px);
  padding-right: clamp(22px, 3.5vw, 40px);
}

main.page-wrap.layout-has-sidebar .sidebar {
  position: sticky;
  top: calc(var(--navbar-h) + 24px);
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  height: calc(100vh - var(--navbar-h) - 48px);
  max-height: calc(100vh - var(--navbar-h) - 48px);
  padding: 22px 18px 28px;
  margin-left: 0;
  background: linear-gradient(180deg, rgba(15,23,42,.78), rgba(30,41,59,.58));
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  overflow: hidden; /* disable outer scroll, use inner scroller */
  overflow-x: hidden;
  box-shadow: var(--glass-shadow);
  z-index: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(96,165,250,.45) rgba(15,23,42,.25);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* client sidebar uses inner scroller by default and is slightly wider */
main.page-wrap.layout-has-sidebar .sidebar.sidebar--client {
  overflow: hidden; /* disable outer scroll */
  flex: 0 0 360px;
  width: 360px;
  padding: 22px 12px 28px; /* tighter horizontal padding to make panels visually wider */
}
/* inner scroller: takes remaining height */
.sidebar.sidebar--client .sidebar-main { min-height: 0; display: flex; flex-direction: column; }
.sidebar.sidebar--client .sidebar-main__scroller { flex: 1 1 auto; min-height: 0; }
main.page-wrap.layout-has-sidebar .sidebar::-webkit-scrollbar { width: 10px; }
main.page-wrap.layout-has-sidebar .sidebar::-webkit-scrollbar-track { background: rgba(15,23,42,.25); border-radius: 999px; }
main.page-wrap.layout-has-sidebar .sidebar::-webkit-scrollbar-thumb { background: rgba(96,165,250,.35); border-radius: 999px; }

main.page-wrap.layout-has-sidebar .main-content {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
  /* Снижаем внутренние отступы, чтобы освободить больше ширины контенту */
  padding: 8px clamp(8px, 2vw, 16px) 28px;
  position: relative;
  min-height: calc(100vh - var(--navbar-h));
}

@media (max-width: 1280px) {
  main.page-wrap.layout-has-sidebar {
    gap: clamp(20px, 3vw, 36px);
  }
  main.page-wrap.layout-has-sidebar .sidebar {
    flex-basis: min(var(--sidebar-width), 300px);
    width: min(var(--sidebar-width), 300px);
    padding: 20px 16px 24px;
  }
  main.page-wrap.layout-has-sidebar .main-content {
    padding: 26px clamp(22px, 4vw, 42px) 46px;
  }
}

@media (max-width: 992px) {
  :root { --sidebar-width: 100%; --navbar-h: 60px; }
  main.page-wrap.layout-has-sidebar {
    flex-direction: column;
    gap: 18px;
    padding-left: 18px;
    padding-right: 18px;
  }
  main.page-wrap.layout-has-sidebar .sidebar {
    position: relative;
    top: auto;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    max-height: none;
    margin: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(17,24,39,.82), rgba(17,24,39,.64));
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
  }
  main.page-wrap.layout-has-sidebar .sidebar.sidebar--client { overflow: visible; }
  .sidebar.sidebar--client .sidebar-main__scroller { height: auto; max-height: none; overflow: visible; padding-right: 0; }
  main.page-wrap.layout-has-sidebar .main-content {
    padding: 22px 0 48px;
  }
  .corner-brand { display: none; }
}

/* Wide container for main area */
.container-wide { max-width: min(1400px, 96vw); margin: 0 auto; }

/* Sidebar Panels */
.menu-block { margin-bottom: 12px; }
.sidebar-main { display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; min-height: 0; }
/* Unified scrollable column for client sidebar */
.sidebar-main__scroller {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(96,165,250,.52) transparent;
}
.sidebar-main__scroller::-webkit-scrollbar { width: 8px; }
.sidebar-main__scroller::-webkit-scrollbar-track { background: rgba(15,23,42,.16); border-radius: 999px; }
.sidebar-main__scroller::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(59,130,246,.48), rgba(14,165,233,.3)); border-radius: 999px; }
.sidebar-main__scroller .menu-block { margin-bottom: 0; }
main.page-wrap.layout-has-sidebar .sidebar .menu-block { margin: 0; }
.sidebar.sidebar--client .sidebar-main__scroller > .sidebar-panel { flex: 0 0 auto; }
.sidebar-panel {
  position: relative;
  padding: 16px 18px 14px;
  border-radius: 20px;
  background: rgba(17,24,39,.78);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 32px -28px rgba(8,20,45,.55);
  backdrop-filter: blur(18px) saturate(135%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar.sidebar--client .sidebar-panel { padding-left: 20px; padding-right: 20px; }
.sidebar.sidebar--client .sidebar-panel { overflow: visible; }
.sidebar-panel::before,
.sidebar-panel::after { display: none; }
.sidebar-panel__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
.sidebar-panel__icon { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: rgba(59,130,246,.18); color: rgba(191,219,254,.9); border: 1px solid rgba(96,165,250,.32); font-size: .95rem; }
.sidebar-panel__title {
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(229,231,235,.88);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-panel__counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.18);
  border: 1px solid rgba(59,130,246,.42);
  color: rgba(191,219,254,.95);
  font-size: .72rem;
  letter-spacing: .04em;
}
.sidebar-panel__body {
  position: relative;
  z-index: 1;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  overflow: visible;
}
.sidebar-panel__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
}
.sidebar-panel__scroller {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.sidebar-panel__body--scroll {
  max-height: min(320px, calc(100vh - 360px));
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(96,165,250,.52) transparent;
}
.sidebar-panel--menu .sidebar-panel__body {
  height: auto;
  overflow: visible;
}
.sidebar-panel--menu .sidebar-panel__scroller {
  overflow: visible;
}
.sidebar-panel--menu .sidebar-panel__body--scroll {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

/* Admin menu with scrolling */
.sidebar-panel--admin-menu .sidebar-panel__scroller {
  overflow-y: auto;
  max-height: calc(100vh - 200px);
}
.sidebar-panel--admin-menu .sidebar-panel__body--scroll {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(96,165,250,.52) transparent;
}

.sidebar.sidebar--client .sidebar-panel__body--scroll { max-height: none; overflow: visible; padding-right: 0; }
.sidebar-panel__body--scroll::-webkit-scrollbar { width: 8px; }
.sidebar-panel__body--scroll::-webkit-scrollbar-track { background: rgba(15,23,42,.16); border-radius: 999px; }
.sidebar-panel__body--scroll::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(59,130,246,.48), rgba(14,165,233,.3)); border-radius: 999px; }

.sidebar-panel--menu {
  min-height: 185px;
}

.sidebar-panel--projects { background: rgba(17,24,39,.82); border-color: rgba(59,130,246,.22); }
.sidebar-panel--projects .sidebar-panel__icon { background: rgba(59,130,246,.22); }
.sidebar-panel--menu { background: rgba(15,23,42,.82); }
.sidebar-panel--current { background: rgba(15,29,45,.82); border-color: rgba(45,212,191,.25); }
.sidebar-panel--current .sidebar-panel__icon { background: rgba(56,189,248,.22); border-color: rgba(56,189,248,.35); }

/* Referral sidebar widget */
.sidebar-panel--referral { background: rgba(17,24,39,.82); border-color: rgba(59,130,246,.22); }
.sidebar-panel--referral .sidebar-panel__icon { background: rgba(59,130,246,.2); border-color: rgba(96,165,250,.32); color: rgba(191,219,254,.96); }
.sidebar-panel--referral .input-group .form-control { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: var(--text); }
.sidebar-panel--referral .btn-outline-primary { border-color: rgba(96,165,250,.5); color: rgba(191,219,254,.95); }
.sidebar-panel--referral .btn-outline-primary:hover { background: rgba(59,130,246,.18); color: #fff; }

.menu-title { font-size: .85rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; padding: 10px 8px; }
.menu-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.menu-item { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; width: 100%; border-radius: var(--radius-xs); color: var(--text); text-decoration: none; border: 1px solid rgba(148,163,184,.14); background: rgba(255,255,255,.02); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: background .2s ease, border-color .2s ease, transform .1s ease; }
.sidebar.sidebar--client .menu-item { padding-left: 14px; padding-right: 14px; }
.menu-item::after { display: none; }
.menu-list li form { display: block; width: 100%; }
.menu-item i { font-size: 1rem; opacity: .92; }
.menu-item:hover { background: rgba(59,130,246,.18); border-color: rgba(59,130,246,.4); color: var(--text); transform: translateY(-1px); }
.menu-item:active { transform: scale(0.995); }
.menu-item.active { background: rgba(59,130,246,.26); border-color: rgba(59,130,246,.55); color: var(--text); box-shadow: 0 18px 28px -20px rgba(8,47,73,.6); }
.menu-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.menu-item .menu-item__badge { 
  margin-left: auto; 
  min-width: 22px; height: 22px; 
  padding: 0 6px; 
  display: inline-flex; align-items: center; justify-content: center; 
  border-radius: 999px; 
  font-size: .75rem; font-weight: 700; 
  color: rgba(15,23,42,.95);
  background: linear-gradient(90deg, rgba(34,211,238,.9), rgba(59,130,246,.9));
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 2px 8px rgba(59,130,246,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.menu-item.has-active-runs { 
  position: relative; 
  border-color: rgba(56,189,248,.55); 
  background: rgba(59,130,246,.14);
}
.menu-item.has-active-runs::before { 
  content: ""; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; 
  background: linear-gradient(180deg, #22d3ee, #3b82f6 60%, #8b5cf6);
  box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset, 0 0 14px rgba(59,130,246,.55);
}
.menu-item.has-active-runs .menu-item__text { position: relative; }
.menu-item.has-active-runs .menu-item__text::after { 
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); 
  width: 8px; height: 8px; border-radius: 999px; 
  background: radial-gradient(circle at 30% 30%, #a7f3d0, #10b981 40%, #059669 100%);
  box-shadow: 0 0 12px rgba(45,212,191,.75), 0 0 0 2px rgba(16,185,129,.35);
  animation: ppPulse 1.8s ease-in-out infinite;
}
@keyframes ppPulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: .95; }
  50% { transform: translateY(-50%) scale(1.25); opacity: .75; }
}
.menu-separator { border-color: rgba(255,255,255,.08); opacity: 1; margin: 4px 0 0; }
.menu-list--projects { display: flex; flex-direction: column; gap: 6px; }
.menu-list--projects .menu-item { font-size: .92rem; }
.menu-item__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-list--projects .menu-item i { opacity: .88; }
.sidebar-panel--projects .menu-item.active { background: rgba(59,130,246,.3); border-color: rgba(59,130,246,.65); }
.sidebar-panel--current .menu-item { background: rgba(15,23,42,.6); border-color: rgba(45,212,191,.28); }
.sidebar-panel--current .menu-item:hover { border-color: rgba(56,189,248,.5); }
.sidebar-panel--current .menu-item:first-child { margin-bottom: 8px; }


/* =================== Add Project =================== */
.add-project-shell { display: flex; flex-direction: column; gap: clamp(26px, 4vw, 40px); }
.add-project-hero { background: linear-gradient(135deg, rgba(253,224,71,.18), rgba(59,130,246,.08)); border: 1px solid rgba(253,224,71,.35); box-shadow: 0 24px 50px -32px rgba(253,224,71,.6); }
.add-project-hero .badge { padding: 12px 14px; font-size: 1.25rem; border-radius: 16px; box-shadow: inset 0 1px 2px rgba(255,255,255,.4); }
.add-project-hero__list li { display: flex; align-items: flex-start; gap: 6px; line-height: 1.4; }
.add-project-hero__meta { min-width: 260px; }

.add-project-body { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 36px); align-items: start; }
.add-project-card, .add-project-aside { background: rgba(15,23,42,.82); border: 1px solid rgba(96,165,250,.2); border-radius: 24px; box-shadow: 0 24px 60px -35px rgba(8,47,73,.7); }
.add-project-card .card-body { padding: clamp(26px, 3vw, 46px); }
.add-project-form { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 40px); }

.project-stepper {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 4vw, 34px);
  padding: clamp(16px, 2vw, 22px);
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(59,130,246,.12), rgba(15,23,42,.65));
  border: 1px solid rgba(96,165,250,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 22px 46px -34px rgba(59,130,246,.5);
  position: relative;
}
.project-stepper__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 6px clamp(6px, 1vw, 10px);
  border-radius: 16px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  border: 1px solid transparent;
}
.project-stepper__item.is-active {
  border-color: rgba(59,130,246,.45);
  background: rgba(59,130,246,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
.project-stepper__item.is-complete:not(.is-active) {
  border-color: rgba(34,197,94,.45);
  background: rgba(34,197,94,.16);
}
.project-stepper__item.is-locked { opacity: .45; }
.project-stepper__item.is-available { border-color: rgba(148,163,184,.2); background: rgba(255,255,255,.04); }

.project-stepper__circle {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .04em;
  background: rgba(59,130,246,.2);
  color: rgba(226,232,240,.92);
  border: 1px solid rgba(96,165,250,.5);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25);
}
.project-stepper__item.is-complete .project-stepper__circle {
  background: rgba(34,197,94,.22);
  color: rgba(209,250,229,.95);
  border-color: rgba(34,197,94,.5);
}
.project-stepper__item.is-active .project-stepper__circle {
  transform: scale(1.05);
}

.project-stepper__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.project-stepper__title { font-size: .86rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(226,232,240,.82); }
.project-stepper__subtitle { font-size: .9rem; color: rgba(191,219,254,.86); }

.project-stepper__connector {
  flex: 1 1 auto;
  height: 1px;
  align-self: center;
  background: linear-gradient(90deg, rgba(148,163,184,.32), rgba(59,130,246,.42));
  opacity: .7;
}

.step-panels { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 36px); }
.step-panel { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.step-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.6vw, 18px); border-radius: 16px; background: rgba(17,24,39,.7); border: 1px solid rgba(148,163,184,.18); }
.step-panel__intro { font-size: .9rem; color: rgba(191,219,254,.75); }

.analysis-feedback { padding: 12px 16px; border-radius: 14px; background: rgba(15,23,42,.68); border: 1px solid rgba(148,163,184,.18); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.analysis-feedback[data-state="loading"] { border-color: rgba(14,165,233,.45); background: rgba(14,165,233,.16); color: rgba(125,211,252,.95); }
.analysis-feedback[data-state="success"] { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.18); color: rgba(187,247,208,.96); }
.analysis-feedback[data-state="error"] { border-color: rgba(248,113,113,.45); background: rgba(248,113,113,.2); color: rgba(254,205,211,.96); }
.analysis-feedback[data-state="manual"] { border-color: rgba(253,224,71,.35); background: rgba(253,224,71,.16); color: rgba(254,240,138,.95); }

.analysis-actions { display: flex; flex-direction: column; gap: 6px; padding-left: clamp(8px, 1.2vw, 14px); }
.analysis-actions__hint { font-size: .82rem; color: rgba(148,163,184,.85); }

.btn-link-light { align-self: flex-start; color: rgba(191,219,254,.92); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border-radius: 10px; transition: color .2s ease, transform .2s ease; }
.btn-link-light:hover { color: rgba(144,205,244,.98); transform: translateY(-1px); }
.btn-link-light:focus-visible { outline: 2px solid rgba(96,165,250,.8); outline-offset: 2px; }

.step-panel.is-active { animation: stepFade .32s ease; }
@keyframes stepFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.form-section { display: flex; flex-direction: column; gap: clamp(18px, 2vw, 26px); padding: clamp(18px, 2vw, 28px); border-radius: 20px; background: linear-gradient(150deg, rgba(30,41,59,.65), rgba(17,24,39,.75)); border: 1px solid rgba(255,255,255,.04); box-shadow: inset 0 1px 1px rgba(255,255,255,.04); }
.form-section:not(:last-child) { margin-bottom: 4px; }
.section-heading { display: flex; align-items: flex-start; gap: 16px; }
.section-heading h3 { font-size: 1.1rem; margin-bottom: 4px; }
.section-icon { width: 44px; height: 44px; border-radius: 18px; display: grid; place-items: center; background: rgba(96,165,250,.12); color: rgba(96,165,250,.9); font-size: 1.35rem; box-shadow: inset 0 1px 2px rgba(255,255,255,.08); }
.section-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(18px, 2vw, 28px); }
.section-grid--single { grid-template-columns: 1fr; }

.add-project-card .form-control,
.add-project-card .form-select { background: rgba(8,20,40,.8); border: 1px solid rgba(148,163,184,.35); color: var(--white); box-shadow: 0 8px 20px -12px rgba(2,132,199,.45); }
.add-project-card .form-control:focus,
.add-project-card .form-select:focus { border-color: rgba(96,165,250,.7); box-shadow: 0 16px 32px -24px rgba(96,165,250,.75); background: rgba(8,20,40,.92); }

.add-project-card .form-floating > label {
  color: rgba(226,232,240,.82);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 600;
  transition: color .2s ease, opacity .2s ease;
}
.add-project-card .form-floating > label::after {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  top: 50%;
  height: 1.6em;
  transform: translateY(-50%);
  background: rgba(8,20,40,.92);
  border-radius: 999px;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: -1;
}
.add-project-card .form-floating > .form-control:focus ~ label,
.add-project-card .form-floating > .form-control:not(:placeholder-shown) ~ label,
.add-project-card .form-floating > textarea:focus ~ label,
.add-project-card .form-floating > textarea:not(:placeholder-shown) ~ label {
  color: rgba(144,205,244,.95);
  opacity: 1;
}
.add-project-card .form-floating > .form-control:focus ~ label::after,
.add-project-card .form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.add-project-card .form-floating > textarea:focus ~ label::after,
.add-project-card .form-floating > textarea:not(:placeholder-shown) ~ label::after {
  opacity: 1;
}
.add-project-card .form-floating > .form-control::placeholder { color: transparent; }
.add-project-card .form-floating > .form-control:-webkit-autofill,
.add-project-card .form-floating > .form-control:-webkit-autofill:focus { -webkit-text-fill-color: var(--white); box-shadow: 0 0 0 30px rgba(8,20,40,.82) inset; }
.form-helper { margin-top: 6px; font-size: .78rem; color: rgba(148,163,184,.9); }
.form-helper--compact {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: .6rem;
  max-width: min(100%, 420px);
  padding: .55rem .8rem .55rem .75rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(59,130,246,.05));
  border: 1px solid rgba(96,165,250,.22);
  font-size: .75rem;
  line-height: 1.42;
  color: rgba(226,232,240,.9);
  box-shadow: 0 12px 28px -22px rgba(59,130,246,.65), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.form-helper--compact::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(148,163,184,.08);
  pointer-events: none;
}
.form-helper--compact i {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: .85rem;
  color: rgba(37,99,235,.92);
  background: linear-gradient(135deg, rgba(191,219,254,.82), rgba(59,130,246,.26));
  box-shadow: 0 4px 12px -8px rgba(59,130,246,.7), inset 0 1px 0 rgba(255,255,255,.65);
}
.form-helper--compact span {
  flex: 1 1 auto;
  color: inherit;
}
.form-helper--anchor-tip {
  display: flex;
  flex-direction: row;
  width: 100%;
  max-width: 100%;
  margin-top: .75rem;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
}
.form-helper--anchor-tip span {
  min-width: 0;
}

.add-project-form [data-action="fetch-project-brief"] { min-width: 240px; position: relative; }
.add-project-form [data-action="fetch-project-brief"] .spinner-border { width: 1rem; height: 1rem; border-width: .18rem; }
.add-project-form [data-action="fetch-project-brief"].disabled,
.add-project-form [data-action="fetch-project-brief"][disabled] { opacity: .6; cursor: not-allowed; }

.project-brief-card { background: linear-gradient(155deg, rgba(30,41,59,.78), rgba(17,24,39,.88)); border: 1px solid rgba(148,163,184,.28); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 22px 50px -36px rgba(59,130,246,.6); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.project-brief-card .card-body { display: flex; flex-direction: column; gap: 18px; }
.project-brief-card .badge { padding: 8px 14px; border-radius: 999px; letter-spacing: .05em; text-transform: uppercase; font-size: .75rem; }
.project-brief-card .badge.bg-secondary { background: rgba(148,163,184,.22) !important; color: rgba(226,232,240,.92); }
.project-brief-card .badge.bg-success { background: rgba(34,197,94,.22) !important; color: rgba(167,243,208,.95); }
.project-brief-card .badge.bg-danger { background: rgba(248,113,113,.22) !important; color: rgba(254,202,202,.95); }
.project-brief-card .badge.bg-info { background: rgba(14,165,233,.22) !important; color: rgba(125,211,252,.95); }

.project-brief-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(12px, 2vw, 22px); }
.project-brief-meta__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(148,163,184,.8); margin-bottom: 6px; }
.project-brief-meta__value { font-size: .95rem; color: rgba(226,232,240,.94); line-height: 1.55; word-break: break-word; }
.project-brief-meta__value small { display: block; margin-top: 4px; color: rgba(148,163,184,.75); font-size: .75rem; }

.project-brief-card[data-state="loading"] { border-color: rgba(96,165,250,.4); background: linear-gradient(155deg, rgba(30,64,97,.8), rgba(17,24,39,.9)); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 24px 52px -34px rgba(59,130,246,.65); }
.project-brief-card[data-state="success"] { border-color: rgba(16,185,129,.35); box-shadow: inset 0 1px 0 rgba(209,250,229,.15), 0 26px 54px -36px rgba(16,185,129,.6); }
.project-brief-card[data-state="error"] { border-color: rgba(248,113,113,.35); box-shadow: inset 0 1px 0 rgba(254,205,211,.12), 0 26px 54px -36px rgba(248,113,113,.55); }

.form-submit { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: clamp(12px, 2vw, 18px) clamp(14px, 2vw, 20px); border-radius: 18px; background: linear-gradient(130deg, rgba(59,130,246,.18), rgba(45,212,191,.12)); border: 1px solid rgba(59,130,246,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 18px 30px -24px rgba(59,130,246,.8);
}
.form-submit .btn-gradient { font-size: 1.05rem; letter-spacing: .01em; }

.add-project-aside .card-body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: clamp(18px, 2vw, 28px); }
.add-project-aside__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: clamp(14px, 2vw, 20px); }
.add-project-aside__list .title { font-weight: 600; margin-bottom: 4px; }
.add-project-aside__list p { margin: 0; color: rgba(209,213,219,.8); font-size: .9rem; }
.add-project-aside__footer { margin-top: auto; }
.add-project-aside .btn-outline-light { border-color: rgba(255,255,255,.35); color: var(--white); }
.add-project-aside .btn-outline-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }

@media (max-width: 1400px) {
  .add-project-body { grid-template-columns: 1.3fr 1fr; }
}

@media (max-width: 1100px) {
  .add-project-body { grid-template-columns: 1fr; }
  .add-project-aside { order: -1; }
  .add-project-hero__meta { min-width: auto; }
}

@media (max-width: 768px) {
  .add-project-hero .card-body { padding: 22px; }
  .add-project-card .card-body { padding: 24px; }
  .form-section { padding: 18px; }
  .section-heading { flex-direction: column; align-items: stretch; }
  .section-icon { width: 40px; height: 40px; border-radius: 14px; font-size: 1.1rem; }
  .project-stepper { flex-direction: column; gap: 12px; }
  .project-stepper__item { width: 100%; }
  .project-stepper__connector { width: 100%; height: 2px; }
  .step-panel__header { flex-direction: column; align-items: flex-start; }
  .analysis-actions { padding-left: 0; }
}

/* =================== Project Modals =================== */
.modal-backdrop.show {
  background: radial-gradient(circle at center, rgba(12,20,38,.82) 0%, rgba(2,6,23,.95) 45%, rgba(2,6,23,.96) 100%);
  backdrop-filter: blur(18px) saturate(140%);
}
.modal-backdrop { z-index: 2400; }
.modal { z-index: 2500; }
.modal-glass .modal-dialog { max-width: 720px; }
.modal-glass.modal-glass-wide .modal-dialog { max-width: min(1000px, 90vw); }
.modal-dialog.modal-xl { max-height: calc(100vh - var(--navbar-h) - 40px); margin-top: calc(var(--navbar-h) + 12px); margin-bottom: 20px; }
.modal-dialog.modal-dialog-scrollable .modal-content { max-height: inherit; }
.modal-dialog.modal-dialog-scrollable .modal-body { overflow-y: auto; }

/* Specific tuning for Promotion Report modal to avoid bottom overflow */
#promotionReportModal .modal-dialog-centered { min-height: 0; }
#promotionReportModal .modal-dialog {
  margin-top: calc(var(--navbar-h) + 12px);
  margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
#promotionReportModal .modal-dialog.modal-xl {
  max-height: calc(100vh - var(--navbar-h) - 72px - env(safe-area-inset-bottom, 0px));
}
#promotionReportModal .modal-content { display: flex; flex-direction: column; height: 100%; }
#promotionReportModal .modal-body { min-height: 0; overflow-y: auto; }
.modal-content--glass {
  position: relative;
  background: linear-gradient(160deg, rgba(30,41,59,.95), rgba(15,23,42,.94));
  border: 1px solid rgba(148,163,184,.38);
  border-radius: 28px;
  box-shadow: 0 44px 140px -56px rgba(7,17,39,.85), 0 0 0 1px rgba(59,130,246,.15) inset;
  backdrop-filter: blur(16px) saturate(165%);
  overflow: hidden;
}
.modal-content--glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events: none;
  mix-blend-mode: screen;
}
.modal-content--glass::after {
  content: '';
  position: absolute;
  inset: -22px;
  border-radius: 38px;
  background:
    radial-gradient(220px circle at 85% 12%, rgba(96,165,250,.45), transparent 65%),
    radial-gradient(260px circle at 18% 88%, rgba(56,189,248,.28), transparent 72%),
    radial-gradient(320px circle at 50% -10%, rgba(59,130,246,.25), transparent 70%);
  opacity: .6;
  filter: blur(24px);
  pointer-events: none;
  z-index: -1;
}
.modal-header--glass, .modal-footer--glass { border: none; padding: clamp(18px, 3vw, 26px); }
.modal-header--glass { border-bottom: 1px solid rgba(255,255,255,.04); }
.modal-footer--glass { border-top: 1px solid rgba(255,255,255,.04); }
.modal-body--glass { padding: clamp(22px, 3vw, 32px); }
.modal-header--glass .modal-title { font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.modal-header--glass .btn-close { filter: invert(1) brightness(1.4); opacity: .7; }
.modal-header--glass .btn-close:hover { opacity: 1; }
.modal-header--glass .btn-close-circle { filter: none; }
.modal .btn-close, .modal .btn-close-circle { position: relative; z-index: 1; }

/* Global modal glow and border for non-glass too */
.modal-content {
  position: relative;
  border: 1px solid rgba(96,165,250,.32);
  border-color: color-mix(in srgb, rgba(96,165,250,.45) 55%, transparent);
  box-shadow: 0 30px 110px -28px rgba(6,14,32,.82), 0 0 0 1px rgba(59,130,246,.12) inset;
  background-color: rgba(13,19,33,.96);
}
.modal-content::before {
  content: '';
  position: absolute; inset: -2px; border-radius: 24px; pointer-events: none;
  background: radial-gradient(1000px 420px at 10% -10%, rgba(59,130,246,.28), transparent 72%),
              radial-gradient(900px 460px at 110% 112%, rgba(14,165,233,.25), transparent 75%);
  filter: blur(26px); z-index: -1;
}
.modal-content::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(96,165,250,.28) inset, 0 0 34px rgba(59,130,246,.26);
  opacity: .85;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)) {
  .modal-content { border-color: rgba(96,165,250,.35); }
}
:root[data-theme="light"] .modal-content {
  background-color: rgba(255,255,255,.97);
  box-shadow: 0 24px 80px -32px rgba(15,23,42,.26), 0 0 0 1px rgba(59,130,246,.06) inset;
  border-color: rgba(191,219,254,.55);
}
:root[data-theme="light"] .modal-content::after {
  box-shadow: 0 0 0 1px rgba(59,130,246,.18) inset, 0 0 28px rgba(59,130,246,.18);
}

/* Scroll inner content, keep glow/border */
.modal-dialog.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 10vh); display: flex; flex-direction: column; }
.modal-dialog.modal-dialog-scrollable .modal-body { overflow-y: auto; }

.btn-close-circle {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, rgba(17,24,39,.9), rgba(15,23,42,.7));
  border: 1px solid rgba(148,163,184,.45);
  color: rgba(241,245,249,.92);
  background-image: none;
  opacity: .94;
  filter: none;
  box-shadow: 0 14px 34px rgba(8, 16, 32, .55);
  transition: transform .18s ease, opacity .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Ribbon accent for warning/info states on glass modals */
.modal-content--glass .modal-ribbon {
  position: absolute; inset: 0 auto auto 0; height: 8px; width: 100%; z-index: 1;
  background: linear-gradient(90deg, rgba(245,158,11,.9), rgba(59,130,246,.55));
  box-shadow: 0 8px 24px rgba(245,158,11,.25);
}
.modal-content--glass .modal-ribbon--warning { background: linear-gradient(90deg, rgba(245,158,11,.95), rgba(59,130,246,.45)); }
.modal-content--glass .modal-ribbon--info { background: linear-gradient(90deg, rgba(59,130,246,.92), rgba(14,165,233,.6)); }

/* Add-link modal: make mode switch look like real tabs on glass */
.modal-content--glass .add-link-tabs {
  border-bottom: 1px solid rgba(148,163,184,.22);
  gap: .5rem;
}
.modal-content--glass .add-link-tabs .nav-link {
  border: 0;
  background: transparent;
  color: rgba(226,232,240,.9);
  padding: .5rem .75rem;
  border-radius: 0;
  position: relative;
}
.modal-content--glass .add-link-tabs .nav-link:hover {
  color: #fff;
  text-shadow: 0 1px 10px rgba(59,130,246,.35);
}
.modal-content--glass .add-link-tabs .nav-link::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: -1px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0;
  transform: translateY(2px);
  transition: all .2s ease;
}
.modal-content--glass .add-link-tabs .nav-link.active,
.modal-content--glass .add-link-tabs .nav-link[aria-selected="true"] {
  color: #fff;
}
.modal-content--glass .add-link-tabs .nav-link.active,
.modal-content--glass .add-link-tabs .nav-link[aria-selected="true"] {
  /* Stronger visual: classic tab with lifted look */
  background: linear-gradient(180deg, rgba(59,130,246,.18), rgba(14,165,233,.08));
  border: 1px solid rgba(96,165,250,.45);
  border-bottom-color: transparent;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  margin-bottom: -1px; /* overlap bottom divider */
  box-shadow: 0 14px 28px -20px rgba(14,165,233,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.modal-content--glass .add-link-tabs .nav-link.active::after,
.modal-content--glass .add-link-tabs .nav-link[aria-selected="true"]::after,
.modal-content--glass .add-link-tabs .nav-link:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.modal-content--glass .add-link-tabs .nav-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(56,189,248,.25);
  border-radius: 12px 12px 0 0;
}
.modal-content--glass .add-link-tabs .badge {
  vertical-align: baseline;
}

/* Next step (payment) callout */
.nextstep-card {
  position: relative;
  margin-top: 1rem;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(59,130,246,.08), rgba(14,165,233,.06));
  border: 1px solid rgba(148,163,184,.28);
  box-shadow: 0 16px 40px rgba(8,12,24,.22), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.nextstep-card__ribbon { position: absolute; inset: 0 auto auto 0; width: 100%; height: 6px; background: linear-gradient(90deg, rgba(59,130,246,.85), rgba(14,165,233,.55)); box-shadow: 0 8px 24px rgba(59,130,246,.25); }
.nextstep-card__body { padding: 16px 18px; }
.nextstep-card__title { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #e5e7eb; margin-bottom: .5rem; }
.nextstep-card__title .icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: rgba(59,130,246,.22); color: rgba(191,219,254,.92); border: 1px solid rgba(96,165,250,.32); }
.nextstep-card__meta { color: rgba(203,213,225,.9); }
:root[data-theme="light"] .nextstep-card { background: color-mix(in srgb, #fff 92%, var(--surface) 8%); border-color: color-mix(in srgb, var(--border) 65%, transparent 35%); }
:root[data-theme="light"] .nextstep-card__title { color: #0f172a; }
:root[data-theme="light"] .nextstep-card__meta { color: #334155; }

/* Insufficient funds card polish */
.insufficient-card { background: rgba(255,255,255,.06); border-radius: 14px; }
.insufficient-card .card-body { padding: 14px 16px; }
.insufficient-card strong { color: #fff; letter-spacing: .02em; }
.btn-close-circle::before {
  content: '\00D7';
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  color: inherit;
  transform: translateY(-.5px);
}
.btn-close-circle:hover {
  opacity: 1;
  border-color: rgba(96,165,250,.6);
  box-shadow: 0 20px 40px rgba(8, 18, 36, .6);
  transform: translateY(-1px) scale(1.04);
  color: #f8fafc;
}
.btn-close-circle:focus {
  outline: none;
  opacity: 1;
  border-color: rgba(96,165,250,.75);
  box-shadow: 0 0 0 3px rgba(96,165,250,.3), 0 20px 40px rgba(8, 18, 36, .6);
}

.modal-intro { padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(15,23,42,.4)); border: 1px solid rgba(96,165,250,.25); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.modal-intro__icon { width: 42px; height: 42px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); font-size: 1.2rem; box-shadow: inset 0 1px 2px rgba(255,255,255,.32); }
.modal-field-grid .form-control,
.modal-field-grid .form-select,
.modal-body--glass .form-control,
.modal-body--glass .form-select { background: rgba(8,22,43,.82); border: 1px solid rgba(148,163,184,.38); color: var(--white); }
.modal-field-grid .form-control:focus,
.modal-field-grid .form-select:focus,
.modal-body--glass .form-control:focus,
.modal-body--glass .form-select:focus { border-color: rgba(96,165,250,.8); box-shadow: 0 0 0 3px rgba(96,165,250,.18); background: rgba(8,22,43,.94); }

.modal-domain { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; border-radius: 14px; padding: 10px 14px; }
.note { background: rgba(30,41,59,.65); border: 1px solid rgba(148,163,184,.35); color: rgba(224,231,255,.85); }
.note--warning { background: rgba(253,224,71,.08); border-color: rgba(253,224,71,.35); color: rgba(253,224,71,.9); }
.note code { color: inherit; font-weight: 600; }

.modal-footer--glass .btn-outline-secondary { border-color: rgba(148,163,184,.5); color: rgba(226,232,240,.9); }
.modal-footer--glass .btn-outline-secondary:hover { background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.7); }
.modal-footer--glass .btn-primary { box-shadow: 0 16px 30px -20px rgba(59,130,246,.75); }
.modal-footer--glass .btn-primary:hover { filter: brightness(1.05); }

/* Corner brand (logo on intersection) */
.corner-brand { position: fixed; z-index: 6; top: calc(var(--navbar-h) - 30px); left: calc(var(--sidebar-width) - 30px); width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); border: 1px solid var(--border); box-shadow: var(--shadow); }
.corner-brand img { width: 70%; height: auto; border-radius: 12px; }

/* =================== Components =================== */
.card {
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 32px 60px rgba(8, 12, 24, .28);
  backdrop-filter: blur(18px) saturate(130%);
  overflow: hidden;
}
.card .card-body { padding: 18px 20px; }

/* Buttons: improve contrast and hover/focus states */
.btn-primary {
  color: #0b1220; background: linear-gradient(180deg, var(--primary), var(--primary-2)); border: 1px solid color-mix(in srgb, var(--primary-2) 60%, black);
}
.btn-primary:hover { filter: brightness(1.05); }
.btn-primary:active { filter: brightness(0.98); }
.btn-primary:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 50%, transparent); outline-offset: 2px; }

.btn-outline-light { color: var(--text); border-color: var(--border); background: transparent; }
.btn-outline-light:hover { background: var(--surface-2); border-color: var(--text); }

.btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { background: color-mix(in srgb, var(--surface-2) 70%, white 6%); }

/* Forms: clearer backgrounds and focus */
.form-control, .form-select, .form-check-input {
  background: color-mix(in srgb, var(--bg-2) 85%, black 0%);
  border: 1px solid var(--border);
  color: var(--text);
  caret-color: var(--primary);
}
.form-control::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }
.form-control:focus, .form-select:focus {
  background: color-mix(in srgb, var(--bg-2) 80%, black 0%);
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--text);
}
.form-check-input:checked { background-color: var(--primary-2); border-color: var(--primary-2); }
.anchor-presets-panel { width: 100%; border: 1px dashed rgba(148,163,184,.28); border-radius: var(--radius-sm); background: rgba(17,24,39,.32); backdrop-filter: blur(8px); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .75rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.anchor-presets-panel__header { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--muted) 82%, white 18%); font-weight: 600; }
.anchor-presets-panel__header i { color: rgba(96,165,250,.75); }
.anchor-presets { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.anchor-presets .anchor-preset { display: flex; align-items: center; justify-content: center; width: 100%; padding: .55rem 1rem; border-width: 1px; border-style: dashed; border-color: rgba(148,163,184,.35); background: rgba(255,255,255,.03); color: color-mix(in srgb, var(--muted) 80%, white 20%); font-size: .85rem; line-height: 1.1; border-radius: var(--radius-xs); transition: all .18s ease; min-height: 42px; }
.anchor-presets .anchor-preset:hover { border-color: color-mix(in srgb, var(--primary) 45%, transparent); color: color-mix(in srgb, white 78%, var(--primary) 22%); background: rgba(96,165,250,.12); box-shadow: 0 8px 22px -16px rgba(96,165,250,.35); }
.anchor-presets .anchor-preset.is-default { border-style: solid; border-color: rgba(148,163,184,.55); background: rgba(148,163,184,.08); }
.anchor-presets .anchor-preset.is-active { border-style: solid; border-color: var(--primary); background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 78%, transparent), color-mix(in srgb, var(--primary-2) 70%, transparent)); color: #0b1220; box-shadow: 0 10px 24px -12px rgba(96,165,250,.65); }
.anchor-presets .anchor-preset:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 65%, transparent); outline-offset: 2px; }
@media (max-width: 576px) {
  .anchor-presets { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem; }
  .anchor-presets .anchor-preset { padding: .5rem .75rem; font-size: .82rem; }
}

.project-hero .title { font-size: 1.4rem; font-weight: 700; letter-spacing: .2px; }
.project-hero .subtitle { color: var(--muted); font-size: .95rem; margin-top: 2px; }
.meta-list { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
.meta-item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .9rem; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 10px; font-size: .85rem; color: var(--text); }
.help { color: var(--muted); }

.section .section-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.section .label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.section .toolbar .btn { margin-left: 8px; }

.sticky-actions { position: sticky; bottom: 12px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.15)); padding-top: 8px; }

.empty-state { color: var(--muted); padding: 10px 0; }

.table-links a.view-url { text-decoration: none; }
.table-hover tbody tr:hover { background-color: rgba(255,255,255,.05); }
.table-striped>tbody>tr:nth-of-type(odd) { --bs-table-accent-bg: rgba(255,255,255,.03); color: var(--text); }

.finance-journal-card .finance-journal-controls .form-select {
  background-color: rgba(24, 30, 58, 0.55);
  border-color: rgba(var(--primary-rgb, 90, 95, 255), 0.18);
  color: var(--bs-body-color);
  backdrop-filter: blur(6px);
}

.finance-journal-card .finance-journal-controls .form-select:focus {
  border-color: rgba(var(--primary-rgb, 90, 95, 255), 0.45);
  box-shadow: 0 0 0 0.1rem rgba(var(--primary-rgb, 90, 95, 255), 0.35);
}

.finance-journal-card .finance-journal-controls .form-select option:disabled {
  color: rgba(var(--bs-body-color-rgb), 0.35);
}

.finance-journal-card .form-label-sm {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.finance-journal-footer {
  background: linear-gradient(135deg, rgba(22, 27, 48, 0.9), rgba(16, 20, 40, 0.72));
  border-top: 1px solid rgba(var(--primary-rgb, 90, 95, 255), 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-bottom-left-radius: calc(var(--bs-card-border-radius, 0.75rem) - 1px);
  border-bottom-right-radius: calc(var(--bs-card-border-radius, 0.75rem) - 1px);
  padding: 0.85rem 1.25rem;
  backdrop-filter: blur(14px) saturate(140%);
}

@media (min-width: 992px) {
  .finance-journal-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

.finance-journal-pagination .form-select,
.finance-journal-pagination .page-link {
  background-color: rgba(27, 34, 64, 0.72);
  border-color: rgba(var(--primary-rgb, 90, 95, 255), 0.35);
  color: var(--bs-body-color);
  backdrop-filter: blur(6px);
}

.finance-journal-pagination .page-link {
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.finance-journal-pagination .page-item.active .page-link,
.finance-journal-pagination .page-link:hover,
.finance-journal-pagination .page-link:focus-visible {
  background-color: rgba(var(--primary-rgb, 90, 95, 255), 0.85);
  border-color: rgba(var(--primary-rgb, 90, 95, 255), 0.9);
  color: #0b0b15;
}

.finance-journal-pagination .page-item.disabled .page-link {
  color: rgba(var(--bs-body-color-rgb), 0.35);
  background-color: rgba(var(--bs-body-bg-rgb, 8, 8, 12), 0.3);
  cursor: not-allowed;
}

.finance-journal-summary {
  color: rgba(226, 232, 255, 0.75) !important;
}

.finance-journal-table td {
  vertical-align: top;
}

.finance-journal-table .text-body,
.finance-journal-table .fw-semibold,
.finance-journal-table .small:not(.text-muted):not(.badge) {
  color: var(--bs-body-color) !important;
}

.finance-journal-table .text-muted {
  color: var(--bs-body-secondary) !important;
}

/* Badges */
.badge { display: inline-block; padding: .35em .6em; border-radius: 10px; font-weight: 600; font-size: .75rem; }
.badge-primary { background: color-mix(in srgb, var(--primary) 35%, black); }
.badge-success { background: linear-gradient( to bottom, #10b981, #059669 ); color: #03150f; }
.badge-warning { background: linear-gradient( to bottom, #f59e0b, #d97706 ); color: #1a1203; }
.badge-secondary { background: rgba(255,255,255,.18); color: var(--text); border: 1px solid var(--border); }

/* Controls */

/* Footer */
.footer {
  margin-top: 48px;
  padding: 38px 0 28px;
  width: 100%;
  background: linear-gradient(135deg, rgba(15,23,42,.82), rgba(30,41,59,.64));
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 -12px 36px rgba(8, 12, 24, .28);
}
.footer__inner {
  width: 100%;
  margin: 0;
  padding: 0 clamp(24px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: flex-start;
  gap: clamp(20px, 3vw, 36px);
  text-align: left;
}
.footer__inner p { margin: 0; color: color-mix(in srgb, var(--text) 90%, rgba(255,255,255,.7)); }
.footer__inner a.btn { box-shadow: none; }

.pp-footer__inner { row-gap: 28px; }
.pp-footer__column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: color-mix(in srgb, var(--text) 92%, rgba(255,255,255,.6));
}
.pp-footer__column--primary {
  gap: 18px;
  align-items: flex-start;
}
.pp-footer__column--developer {
  align-items: center;
  text-align: center;
  gap: 20px;
}
.pp-footer__column--products {
  gap: 18px;
  align-items: flex-start;
}
.pp-footer__update-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: 0 10px 22px rgba(253, 224, 71, .25);
}
.pp-footer__update-btn i { font-size: 1rem; margin-right: 6px; }
.pp-footer__update-btn span { font-weight: 600; }
.pp-footer__update-btn.btn-outline-light {
  border-color: rgba(226,232,240,.45);
  color: rgba(226,232,240,.85);
  background: rgba(148,163,184,.08);
}
.pp-footer__update-btn.btn-outline-light:hover,
.pp-footer__update-btn.btn-outline-light:focus {
  border-color: rgba(226,232,240,.75);
  color: #0f172a;
  background: rgba(226,232,240,.92);
}
.pp-footer__update-btn.btn-warning {
  background: linear-gradient(135deg, rgba(250,204,21,.9), rgba(253,224,71,.9));
  border: none;
  color: #111827;
}
.pp-footer__update-btn.btn-warning:hover,
.pp-footer__update-btn.btn-warning:focus {
  filter: brightness(.95);
  color: #0f172a;
}
.pp-footer__logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pp-footer__version-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.14);
  border: 1px solid rgba(96,165,250,.28);
  font-weight: 600;
  letter-spacing: .04em;
  color: rgba(191,219,254,.92);
}
.pp-footer__meta-line {
  font-size: .9rem;
  color: rgba(203,213,225,.72);
  margin-bottom: 0;
}
.pp-footer__meta-line strong {
  color: rgba(248,250,252,.92);
  font-weight: 600;
}
.pp-footer__developer {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(229,231,235,.88);
}
.pp-footer__spark {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, rgba(124,77,255,.55), rgba(37,99,235,.32) 55%, rgba(25,118,210,.18) 80%);
  position: relative;
  box-shadow: 0 0 18px rgba(99,102,241,.38);
  overflow: hidden;
}
.pp-footer__spark::after {
  content: '';
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 160%;
  background: linear-gradient(120deg, rgba(255,255,255,.25), rgba(255,255,255,0));
  transform: rotate(15deg);
  animation: ppSparkSweep 4.6s ease-in-out infinite;
}
.pp-footer__brand {
  font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
  letter-spacing: .18em;
  outline: none;
  font-size: 1.25rem;
  color: rgba(243,244,246,.92);
  text-shadow: 0 10px 24px rgba(79,70,229,.35), 0 0 18px rgba(56,189,248,.24);
  transition: opacity .35s ease;
}
.pp-footer__brand.is-static {
  text-shadow: 0 8px 18px rgba(79,70,229,.28);
}
.pp-footer__tagline {
  font-size: .92rem;
  color: rgba(203,213,225,.78);
  line-height: 1.5;
}
.pp-footer__tagline a { color: rgba(226,232,240,.92); text-decoration: none; }
.pp-footer__tagline a:hover { color: rgba(241,245,249,1); }
.pp-footer__column--developer .pp-footer__tagline {
  text-align: center;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.pp-footer__products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pp-footer__products li {
  display: inline-flex;
}
.pp-footer__product-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: rgba(229,231,235,.85);
  text-decoration: none;
  border: 1px solid rgba(148,163,184,.18);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.pp-footer__product-link:hover {
  background: rgba(96,165,250,.18);
  border-color: rgba(96,165,250,.4);
  color: #f8fafc;
  transform: translateY(-1px);
}
.pp-footer__product-link i { font-size: 1.05rem; }
.pp-footer__links-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pp-footer__links-group a {
  color: rgba(226,232,240,.78);
  text-decoration: none;
  transition: color .2s ease;
}
.pp-footer__links-group a:hover { color: rgba(248,250,252,.92); }
.pp-footer__links-title {
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(148,163,184,.85);
}
.pp-footer__bottom {
  margin-top: 28px;
  font-size: .9rem;
  color: rgba(203,213,225,.75);
}
.pp-footer__bottom-inner {
  width: 100%;
  margin: 0;
  padding: 0 clamp(24px, 4vw, 48px) 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px 32px;
  width: 100%;
}
.layout-has-sidebar + .footer .footer__inner,
.layout-has-sidebar + .footer .pp-footer__bottom-inner,
.layout-static + .footer .footer__inner,
.layout-static + .footer .pp-footer__bottom-inner {
  padding-left: clamp(22px, 3.6vw, 56px);
  padding-right: clamp(22px, 3.6vw, 56px);
}
.pp-footer__bottom-brand {
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pp-footer__bottom-copy { white-space: nowrap; }
.pp-footer__bottom-copy,
.pp-footer__bottom-brand { flex: 0 0 auto; }
.pp-footer__legal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 18px;
  min-width: 200px;
}
.pp-footer__legal a {
  position: relative;
  color: rgba(191,219,254,.85);
  font-size: .92rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  padding-right: 18px;
  text-decoration: none;
}
.pp-footer__legal a:hover,
.pp-footer__legal a:focus {
  color: rgba(224,231,255,.98);
}
.pp-footer__legal a:not(:last-child)::after {
  content: '•';
  position: absolute;
  right: 0;
  color: rgba(148,163,184,.6);
}

.static-page__section {
  margin: clamp(32px, 6vw, 64px) auto;
  max-width: min(960px, 94vw);
}
.static-page__content {
  padding: clamp(24px, 5vw, 40px);
  border-radius: 22px;
  border: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(140deg, rgba(15,23,42,.85), rgba(30,41,59,.7));
  box-shadow: 0 20px 34px rgba(8, 12, 24, .28);
  color: rgba(226,232,240,.85);
}
.static-page__content h2 {
  font-weight: 600;
  color: rgba(248,250,252,.92);
}
.static-page__content p { color: rgba(226,232,240,.78); }
.static-page__callout {
  padding: 18px 20px;
  border-radius: 18px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(96,165,250,.32);
  color: rgba(226,232,240,.88);
}

@media (max-width: 576px) {
  .navbar .container-fluid { padding: 0 16px; }
  .footer { padding: 30px 0 22px; }
  .footer__inner {
    gap: 18px;
    grid-template-columns: 1fr;
  }
  .pp-footer__products {
    justify-content: center;
    width: 100%;
  }
  .pp-footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    padding-bottom: 0;
    gap: 14px;
  }
  .pp-footer__bottom-copy { white-space: normal; text-align: center; }
  .pp-footer__legal { gap: 12px; }
  .pp-footer__legal a { padding-right: 14px; }
}

/* =================== Animations =================== */
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.bounce-in { animation: bounceIn .6s cubic-bezier(.18,.89,.32,1.28); }
@keyframes bounceIn { 0% { transform: scale(.98); opacity: 0; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(1); } }

@keyframes dashboardGlow {
  0% { transform: translate3d(0,0,0) scale(1); opacity: .32; }
  50% { transform: translate3d(12%, -8%, 0) scale(1.05); opacity: .5; }
  100% { transform: translate3d(-10%, 12%, 0) scale(.94); opacity: .33; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Adaptive brand logos */
.navbar .navbar-brand .brand-logo {
  height: clamp(44px, calc(var(--navbar-h) - 18px), 72px);
  max-height: clamp(44px, calc(var(--navbar-h) - 18px), 72px);
  width: auto;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.footer .footer-logo {
  height: clamp(28px, 5vh, 48px);
  width: auto;
  object-fit: contain;
}

/* Corner brand image keep ratio */
.corner-brand img {
  width: 70%;
  height: auto;
  border-radius: 12px;
}

/* =================== Client dashboard =================== */
.dashboard-hero-card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  background: linear-gradient(140deg, color-mix(in srgb, var(--surface) 95%, transparent 5%), color-mix(in srgb, var(--surface-2) 80%, transparent 20%));
  overflow: hidden;
  box-shadow: 0 24px 44px rgba(10, 15, 30, .2);
}
.dashboard-hero-card::after {
  content: "";
  position: absolute;
  inset: auto -120px -160px auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle at top, color-mix(in srgb, var(--primary) 50%, transparent 50%), transparent 72%);
  opacity: .65;
  filter: blur(0px);
}
.dashboard-hero-card .card-body { gap: 1.25rem; }
.dashboard-hero-card__intro,
.dashboard-hero-card__balance {
  background: rgba(12, 18, 35, .72);
  border: 1px solid rgba(59, 130, 246, .16);
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  min-width: 220px;
}
.dashboard-hero-card__intro h2 { font-weight: 800; letter-spacing: .28px; margin-bottom: .35rem; }
.dashboard-hero-card__intro p { max-width: clamp(320px, 50vw, 540px); margin-bottom: 0; }
.dashboard-balance-value { font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 800; letter-spacing: .4px; color: var(--text); }
.dashboard-balance-label { letter-spacing: .08em; }
.dashboard-hero-card__balance .text-muted { color: var(--muted) !important; }
.dashboard-hero-card__actions { margin-top: auto; display: flex; justify-content: flex-end; }
.dashboard-hero-card__actions .btn { min-width: 170px; }
.dashboard-balance-stack { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.dashboard-balance-meta { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted); max-width: clamp(260px, 32vw, 320px); text-align: left; }
.dashboard-balance-meta .icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }

@media (min-width: 768px) {
  .dashboard-hero-card__balance { text-align: right; }
  .dashboard-balance-stack { align-items: flex-end; }
  .dashboard-balance-meta { justify-content: flex-end; text-align: right; }
}

@media (min-width: 992px) {
  .dashboard-hero-card .card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: stretch;
  }
  .dashboard-hero-card__intro,
  .dashboard-hero-card__balance {
    height: 100%;
  }
}

/* Mobile improvements: remove nested paddings and width clamps so content isn't squeezed */
@media (max-width: 575.98px) {
  /* Ensure the outer hero card itself has no padding on small screens */
  .dashboard-hero-card { padding: 0 !important; }
  .dashboard-hero-card .card-body { padding: 1rem !important; gap: .75rem; }
  .dashboard-hero-card__intro,
  .dashboard-hero-card__balance {
    background: transparent;
    border: 0;
    padding: 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }
  /* Center the balance value and its hint for nicer mobile look */
  .dashboard-hero-card__balance { text-align: center; }
  .dashboard-balance-stack { align-items: center; }
  .dashboard-balance-value.with-cta { margin-left: auto; margin-right: auto; }
  .dashboard-balance-meta { justify-content: center; text-align: center; margin-left: auto; margin-right: auto; }
  .dashboard-hero-card__intro p,
  .dashboard-balance-meta { max-width: 100%; }
  /* Make action buttons more compact and allow wrap on very narrow screens */
  .dashboard-hero-card__actions { justify-content: center; gap: .5rem; flex-wrap: wrap; }
  .dashboard-hero-card__actions .btn {
    min-width: auto;
    padding: .5rem .75rem;
    font-size: .95rem;
    line-height: 1.2;
  }
}

/* Balance CTA polish */
.dashboard-balance-value.with-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .7rem; border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 20px -14px rgba(0,0,0,.35);
}
.dashboard-balance-value.with-cta:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 26px -14px rgba(0,0,0,.45); }
.dashboard-hero-card__balance .topup-hint { border: 1px solid rgba(16,185,129,.35); background: rgba(16,185,129,.12) !important; }

.referral-inline { display: flex; flex-direction: column; gap: .7rem; background: rgba(59,130,246,.08); border: 1px solid rgba(96,165,250,.22); border-radius: 14px; padding: .9rem 1rem; backdrop-filter: blur(6px); }
.referral-inline__stats { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.referral-inline__income { display: flex; flex-direction: column; gap: .2rem; }
.referral-inline__income .label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(148,163,184,.9); }
.referral-inline__income .value { font-size: 1.35rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, rgba(59,130,246,.9), rgba(14,165,233,.9)); padding: .3rem .85rem; border-radius: 999px; box-shadow: 0 12px 24px rgba(37,99,235,.3); display: inline-flex; align-items: center; gap: .45rem; }
.referral-inline__count { font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem; color: rgba(226,232,240,.9); }
.referral-inline__links { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .87rem; }
.referral-inline__link { font-weight: 600; color: rgba(191,219,254,.95); }
.referral-inline__link:hover { color: #fff; }

/* Subtle helper copy under referral income */
.referral-inline__income .referral-inline__hint { line-height: 1.3; }
.referral-inline__wallet .badge {
    background: rgba(59, 130, 246, 0.18);
    color: rgba(30, 64, 175, 0.95);
    font-weight: 600;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
}
.referral-inline__wallet .btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
}
.referral-inline__balance-pair {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: rgba(59, 130, 246, 0.12);
    border-radius: 16px;
    padding: 0.85rem 1rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.referral-inline__balance-pair .pair-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.referral-inline__balance-pair .pair-item.total .pair-value {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(14, 165, 233, 0.95));
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.35);
}
.referral-inline__balance-pair .pair-item.wallet .pair-value {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(59, 130, 246, 0.18);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.referral-inline__balance-pair .pair-title {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.9);
}
.referral-inline__balance-pair .pair-divider {
    width: 1px;
    height: 40px;
    background: rgba(148, 163, 184, 0.3);
}
.referral-inline__withdraw {
    display: inline-flex;
    align-items: center;
    margin-top: 0.5rem;
}
.btn-add-project {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.7rem 1.4rem;
    font-weight: 600;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: 0;
    color: #fff;
    box-shadow: 0 18px 32px -18px rgba(37, 99, 235, 0.6);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-add-project:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 36px -16px rgba(37, 99, 235, 0.7);
    color: #fff;
}
.btn-add-project:active {
    transform: translateY(0);
}
.dashboard-balance-extra {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    margin-top: 1rem;
    width: 100%;
}
.dashboard-balance-extra .extra-block {
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    padding: 0.9rem 1.1rem;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);
}
.dashboard-balance-extra .extra-block__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: rgba(226, 232, 240, 0.85);
}
.dashboard-balance-extra .badge-soft {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.15);
    color: rgba(191, 219, 254, 0.95);
    border-radius: 999px;
    padding: 0.2rem 0.65rem;
}
.dashboard-balance-extra .extra-block__text {
    margin: 0.55rem 0 0;
    font-size: 0.85rem;
    color: rgba(226, 232, 240, 0.82);
}
.dashboard-balance-extra .extra-block--upcoming {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(14, 165, 233, 0.15));
}
.dashboard-balance-extra .extra-block--transactions {
    background: rgba(15, 23, 42, 0.55);
}
.dashboard-balance-extra .extra-block__link {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(191, 219, 254, 0.95);
    text-decoration: none;
}
.dashboard-balance-extra .extra-block__link:hover {
    text-decoration: underline;
}
.extra-tx-list {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.extra-tx-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: rgba(226, 232, 240, 0.88);
}
.extra-tx-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.extra-tx-meta .extra-tx-reason {
    font-weight: 600;
}
.extra-tx-meta .extra-tx-date {
    font-size: 0.72rem;
    color: rgba(148, 163, 184, 0.8);
}
.extra-tx-amount {
    font-weight: 700;
    min-width: 110px;
    text-align: right;
}
.extra-tx-amount.credit { color: #4ade80; }
.extra-tx-amount.debit { color: #f87171; }
@media (max-width: 767.98px) {
    .extra-tx-item {
        flex-direction: column;
        align-items: flex-start;
    }
    .extra-tx-amount {
        text-align: left;
    }
}
@media (max-width: 575.98px) {
    .referral-inline__balance-pair {
        flex-direction: column;
        align-items: stretch;
    }
    .referral-inline__balance-pair .pair-divider {
        width: 100%;
        height: 1px;
    }
}

.btn-gradient {
  color: #0b1220;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 80%, transparent 20%), color-mix(in srgb, var(--accent) 70%, transparent 30%));
  border: none;
  border-radius: var(--radius-xs);
  box-shadow: 0 14px 28px rgba(14, 116, 224, .28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-gradient:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(14, 116, 224, .24);
}
.btn-gradient:active {
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(14, 116, 224, .26);
}

.info-help {
  color: var(--muted);
  cursor: help;
  transition: color .2s ease, transform .2s ease;
}
.info-help:hover { color: var(--accent); transform: translateY(-1px); }

.dashboard-stat-row { --bs-gutter-y: 1rem; }
.dashboard-metric-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  background: color-mix(in srgb, var(--surface) 85%, transparent 15%);
  box-shadow: 0 18px 36px rgba(10, 15, 30, .22);
  overflow: hidden;
}
.dashboard-metric-card::before {
  content: '';
  position: absolute;
  inset: -45% auto auto -40%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,.18), transparent 70%);
  opacity: .38;
  filter: blur(70px);
  pointer-events: none;
  animation: dashboardGlow 14s ease-in-out infinite alternate;
}
.dashboard-metric-card::after {
  content: '';
  position: absolute;
  inset: auto -60% -80% auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  opacity: .6;
  filter: blur(70px);
}
.dashboard-metric-card__label {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--muted);
}
.dashboard-metric-card__value { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800; line-height: 1.1; }
/* Mobile 2-column layout for metric cards */
@media (max-width: 575.98px) {
  .dashboard-stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .dashboard-stat-row > [class*="col-"] { width: 100%; padding: 0 !important; margin: 0 !important; }
  .dashboard-metric-card { padding: .85rem .9rem; }
  .dashboard-metric-card__label { font-size: .62rem; letter-spacing: .09em; }
  .dashboard-metric-card__value { font-size: clamp(1.4rem, 5vw, 1.85rem); }
  .dashboard-metric-card__meta { font-size: .65rem; line-height: 1.3; }
  .dashboard-metric-card__meta i { font-size: .7rem; }
}
.dashboard-metric-card__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}
.dashboard-metric-card__meta span { color: var(--text); font-weight: 600; }

.dashboard-metric-card--projects::after { background: linear-gradient(135deg, rgba(59,130,246,.55), rgba(14,165,233,.24)); }
.dashboard-metric-card--links::after { background: linear-gradient(135deg, rgba(236,72,153,.42), rgba(59,130,246,.24)); }
.dashboard-metric-card--active::after { background: linear-gradient(135deg, rgba(56,189,248,.42), rgba(129,140,248,.26)); }
.dashboard-metric-card--completed::after { background: linear-gradient(135deg, rgba(16,185,129,.45), rgba(34,197,94,.24)); }
.dashboard-metric-card--referral { text-decoration: none; color: inherit; position: relative; overflow: hidden; }
.dashboard-metric-card--referral:hover { transform: translateY(-4px); box-shadow: 0 24px 44px rgba(14, 20, 38, .28); }
.dashboard-metric-card--referral::after { background: linear-gradient(135deg, rgba(244,114,182,.4), rgba(59,130,246,.22)); }

.dashboard-projects-header h3 { font-weight: 700; }
.dashboard-projects-header .text-muted { color: var(--muted) !important; }

.dashboard-project-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  padding: 22px 20px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  background: color-mix(in srgb, var(--surface) 88%, transparent 12%);
  box-shadow: 0 20px 40px rgba(9, 14, 28, .22);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.dashboard-project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 46px rgba(9, 14, 28, .24);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent 60%);
}
.dashboard-project-card::before {
  content: '';
  position: absolute;
  inset: -45% -25% auto;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(59,130,246,.28), transparent 70%);
  opacity: .32;
  filter: blur(70px);
  transition: opacity .3s ease;
  pointer-events: none;
}
.dashboard-project-card:hover::before { opacity: .48; }
.dashboard-project-card > * { position: relative; z-index: 1; }
.dashboard-project-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 78%, transparent 22%);
  margin: -10px -10px 12px;
  min-height: 180px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent 30%), 0 22px 44px rgba(10,15,30,.32);
}
.dashboard-project-card__media-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.dashboard-project-card__media-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.dashboard-project-card__media-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,23,42,0) 30%, rgba(15,23,42,.22) 100%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  border-radius: inherit;
}
.dashboard-project-card:hover .dashboard-project-card__media-link::after,
.dashboard-project-card__media-link:focus-visible::after {
  opacity: 1;
}
.dashboard-project-card__media-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.4);
  border-radius: inherit;
}
.dashboard-project-card__screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.dashboard-project-card__screenshot--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: clamp(2.2rem, 3.8vw, 3.1rem);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 92%, #fff 8%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 32%, transparent 68%), color-mix(in srgb, var(--accent) 24%, transparent 76%));
  text-shadow: 0 8px 22px rgba(0,0,0,.35);
}
.dashboard-project-card:hover .dashboard-project-card__screenshot { transform: scale(1.08); }
.dashboard-project-card__media-glow {
  position: absolute;
  inset: auto -20% -46% auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(59,130,246,.55), rgba(14,165,233,.18));
  opacity: .55;
  filter: blur(55px);
  pointer-events: none;
  transition: opacity .4s ease;
}
.dashboard-project-card:hover .dashboard-project-card__media-glow { opacity: .78; }
.dashboard-project-card__edit {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(15,23,42,.82);
  color: #f8fafc;
  border: 1px solid rgba(148,163,184,.45);
  box-shadow: 0 14px 28px rgba(15,23,42,.32);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.dashboard-project-card__edit:hover {
  transform: translateY(-1px);
  background: rgba(59,130,246,.86);
  color: #fff;
}
.dashboard-project-card__edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.45);
}
.dashboard-project-card__domain {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  backdrop-filter: blur(12px);
  background: linear-gradient(145deg, rgba(15,23,42,.9), rgba(30,41,59,.82));
  border: 1px solid rgba(148,163,184,.45);
  box-shadow: 0 18px 36px rgba(9,14,28,.45);
  color: #f8fafc;
  z-index: 3;
}
.dashboard-project-card__favicon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
}
.dashboard-project-card__domain-link {
  color: #f8fafc;
  font-weight: 600;
  letter-spacing: .05em;
}
.dashboard-project-card__domain-link:hover { color: color-mix(in srgb, var(--accent) 80%, #fff 20%); }
.dashboard-project-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.dashboard-project-card__title { font-weight: 700; font-size: 1.05rem; letter-spacing: .2px; }
.dashboard-project-card__meta { font-size: .82rem; letter-spacing: .04em; }

/* Active project highlight */
.dashboard-project-card--active {
  border-color: color-mix(in srgb, var(--success) 35%, transparent 65%);
  box-shadow: 0 24px 50px rgba(16,185,129,.22), inset 0 0 0 1px rgba(16,185,129,.25);
}
.dashboard-project-card--active::before {
  background: radial-gradient(circle at center, rgba(16,185,129,.32), transparent 70%);
}
.dashboard-project-card--active .dashboard-project-card__media-glow {
  background: radial-gradient(circle at center, rgba(16,185,129,.55), rgba(59,130,246,.18));
}
.project-status-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(16,185,129,.85), rgba(59,130,246,.35));
  border: 1px solid rgba(16,185,129,.65);
  color: #081a12;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 14px 28px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.4);
}
.project-status-badge .dot {
  width: 8px; height: 8px; border-radius: 999px; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.7); animation: pulseDot 1.8s infinite;
}
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.7); }
  70% { box-shadow: 0 0 0 12px rgba(16,185,129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129, 0); }
}
.dashboard-project-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.dashboard-project-card__tags .badge { border-radius: 999px; padding: .4rem .7rem; font-weight: 600; }
.dashboard-project-card__description { line-height: 1.55; min-height: 48px; }
.dashboard-project-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.dashboard-project-card__stat {
  background: color-mix(in srgb, var(--surface-2) 72%, transparent 28%);
  border-radius: var(--radius-xs);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dashboard-project-card__stat .label {
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.dashboard-project-card__stat .value { font-weight: 700; font-size: 1.08rem; color: var(--text); }
.dashboard-project-card__footer {
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  padding-top: 12px;
  margin-top: auto;
}
.dashboard-project-card__activity i { color: var(--accent); }
.dashboard-project-card__actions {
  gap: .5rem;
}
.dashboard-project-card__actions .btn { border-radius: var(--radius-xs); }
.dashboard-project-card__actions .btn-primary {
  border: none;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 85%, #fff 15%), color-mix(in srgb, var(--accent) 75%, #fff 25%));
  box-shadow: 0 12px 26px rgba(59,130,246,.22);
}
.dashboard-project-card__actions .btn-primary:hover {
  box-shadow: 0 16px 32px rgba(59,130,246,.28);
  transform: translateY(-1px);
}
.dashboard-project-card__actions .btn-outline-secondary {
  border-color: color-mix(in srgb, var(--border) 75%, transparent 25%);
  color: var(--muted);
}
.dashboard-project-card__actions .btn-outline-secondary:hover { color: var(--text); }
.dashboard-project-card__actions .btn-outline-primary {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent 55%);
  color: var(--primary);
}
.dashboard-project-card__actions .btn-outline-primary:hover {
  background: color-mix(in srgb, var(--primary) 18%, transparent 82%);
  color: var(--text);
}
.dashboard-project-card__actions .btn-icon {
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.empty-state-card {
  background: color-mix(in srgb, var(--surface) 90%, transparent 10%);
  border: 1px dashed color-mix(in srgb, var(--border) 70%, transparent 30%);
  box-shadow: none;
  border-radius: var(--radius);
}

@media (max-width: 991.98px) {
  .dashboard-hero-card::after { inset: auto -160px -220px auto; }
  .dashboard-hero-card__balance { text-align: left !important; }
  .project-hero__layout { grid-template-columns: 1fr; }
  .project-hero__preview { order: -1; }
}

@media (max-width: 767.98px) {
  .dashboard-hero-card__actions { width: 100%; }
  .dashboard-hero-card__actions .btn { width: 100%; }
  .dashboard-project-card__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-project-card__media { margin: -6px -6px 12px; min-height: 140px; }
  /* Project hero: make preview frame truly fluid on tablets/phones */
  .project-hero__preview-frame { width: 100%; min-width: 100%; }
  /* Section headers: stack label and toolbar vertically to avoid wrap glitches */
  .section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .section-header .toolbar { width: 100%; justify-content: flex-start; }
  /* Project hero mid-size (576-767) refinements */
  .project-hero__heading { flex-direction: column; align-items: stretch; margin-bottom: 10px; }
  .project-hero__heading-left { min-width: 0 !important; flex: 0 1 auto !important; }
  .project-hero__heading-right { width: 100%; justify-content: flex-start; }
  .project-hero__meta-actions { justify-content: flex-start; }
  .project-hero__actions { width: 100%; }
  .project-hero__action-add { flex: 1 1 auto; min-width: 220px; }
  /* Allow domain chip to wrap below preview without squeezing */
  .project-hero__domain { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

@media (max-width: 575.98px) {
  .dashboard-hero-card { padding: 0; }
  .dashboard-project-card { padding: 14px; gap: 12px; }
  /* Keep stats compact: two per row even on very small screens */
  .dashboard-project-card__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dashboard-project-card__stat { padding: 10px; gap: 2px; }
  .dashboard-project-card__stat .label { font-size: .68rem; }
  .dashboard-project-card__stat .value { font-size: 1rem; }
  .dashboard-project-card__media { margin: -4px -4px 10px; min-height: 128px; }
  .dashboard-project-card__edit { width: 32px; height: 32px; top: 10px; right: 10px; }
  .dashboard-project-card__domain { left: 12px; bottom: 12px; padding: 6px 10px; }
  .dashboard-project-card__domain-link { font-size: .82rem; }
  .dashboard-project-card__title { font-size: 1rem; }
  .dashboard-project-card__meta { font-size: .78rem; }
  .dashboard-project-card__tags { gap: 6px; }
  .dashboard-project-card__tags .badge { padding: .3rem .6rem; font-size: .72rem; }
  .dashboard-project-card__description { line-height: 1.45; }
  .dashboard-project-card__actions { gap: .4rem; flex-wrap: wrap; }
  .dashboard-project-card__actions .btn { padding: .4rem .6rem; font-size: .9rem; }
  .project-hero__preview-frame { min-width: 100%; }
  /* Project hero: mobile header layout corrections */
  .project-hero .card-body { padding: 16px; }
  .project-hero__heading { margin-bottom: 8px; }
  .project-hero__heading-left { min-width: 0 !important; flex: 0 1 auto !important; }
  .project-hero__heading-right { width: 100%; }
  .project-hero__meta-actions { width: 100%; justify-content: flex-start; }
  .project-hero__actions { width: 100%; gap: .5rem; margin-bottom: 6px; }
  .project-hero__action-add { width: 100%; max-width: 100%; box-sizing: border-box; justify-content: center; }
  .project-hero__action-delete { width: 100%; max-width: 100%; box-sizing: border-box; justify-content: center; }
  .project-hero__preview { gap: 10px; }
  .project-hero__preview-frame { width: 100%; min-width: 0; }
  .project-hero__refresh--overlay { top: .5rem; right: .5rem; }
  .project-hero__preview-status { flex-wrap: wrap; line-height: 1.25; }
  /* Hide preview status line on very small screens to save space ("Скрин обновлен...") */
  .project-hero__preview-status { display: none !important; }
  /* Domain chip: center and prevent overflow */
  .project-hero__domain { width: 100%; justify-content: center; overflow: hidden; text-overflow: ellipsis; }
  .project-hero__domain a, .project-hero__domain span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .meta-list { gap: 8px 12px; margin-top: 8px; }
  .project-hero__main { gap: 6px; }
  /* Stat cards: 2 per row on mobile instead of 1 */
  .promotion-stats-row > div { flex: 0 0 auto; width: 50%; }
  .promotion-stat-card .card-body { padding: 14px; }
  .promotion-stat-card__value { font-size: 1.6rem !important; }
  .promotion-stat-card__label { font-size: .72rem !important; }
  .promotion-stat-card__meta { font-size: .75rem !important; margin-top: 4px; }
}

/* =================== Project page polish =================== */
.project-hero {
  background: radial-gradient(120% 160% at 0% 0%, rgba(96,165,250,.16), transparent 60%),
              radial-gradient(120% 160% at 100% 0%, rgba(34,211,238,.12), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid var(--border);
}
.project-hero .title { font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: .2px; color: inherit; }
.project-hero .subtitle { color: inherit; font-weight: 600; }
.project-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  gap: 24px;
  align-items: stretch;
}
.project-hero__main { display: flex; flex-direction: column; gap: 8px; }
.project-hero__preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.project-hero__preview-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent 26%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent 30%), 0 26px 52px rgba(9,14,28,.42);
  aspect-ratio: 16 / 9;
  width: clamp(260px, 100%, 360px);
}
.project-hero__refresh {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent 40%);
  background: color-mix(in srgb, var(--surface) 60%, transparent 40%);
  color: var(--text);
  padding: .45rem .9rem;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.project-hero__refresh .label-default { display: inline-flex; align-items: center; gap: .3rem; }
.project-hero__refresh:hover {
  background: color-mix(in srgb, var(--surface) 80%, transparent 20%);
  transform: translateY(-1px);
  color: var(--primary);
}
.project-hero__refresh .spinner-border { width: 1rem; height: 1rem; border-width: .15rem; }
.project-hero__refresh .label-loading { display: none; }
.project-hero__refresh.is-loading .label-default { display: none; }
.project-hero__refresh.is-loading .label-loading { display: inline-flex; align-items: center; gap: .45rem; }
.project-hero__refresh--overlay {
  position: absolute;
  top: .75rem;
  right: .75rem;
  padding: .45rem;
  border-radius: 999px;
  background: rgba(18, 21, 25, 0.72);
  color: #f8f9fa;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 45px rgba(10, 12, 22, 0.35);
  backdrop-filter: blur(10px);
  width: 2.45rem;
  height: 2.45rem;
  justify-content: center;
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.project-hero__refresh--overlay .label-default i { font-size: 1.1rem; }
.project-hero__refresh--overlay .label-loading { display: none; justify-content: center; }
.project-hero__refresh--overlay.is-loading .label-loading { display: flex; justify-content: center; }
.project-hero__refresh--overlay .spinner-border { width: .9rem; height: .9rem; }
.project-hero__refresh--overlay:hover {
  transform: translateY(-1px) scale(1.05);
  color: #fff;
  background: rgba(18, 21, 25, 0.88);
}
.project-hero__refresh--overlay.is-loading {
  opacity: .75;
  pointer-events: none;
}
.project-hero__preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.project-hero__preview-status {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: var(--muted);
}
.project-hero__preview-status .bi-check-circle { color: var(--success, #16a34a); }
.project-hero__preview-status .bi-exclamation-triangle { color: var(--danger, #dc3545); }
.project-hero__screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.015);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.project-hero__screenshot--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.4rem, 4vw, 3.6rem);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 90%, #fff 10%);
  background: linear-gradient(140deg, color-mix(in srgb, var(--primary) 30%, transparent 70%), color-mix(in srgb, var(--accent) 22%, transparent 78%));
  text-shadow: 0 10px 26px rgba(0,0,0,.4);
  width: 100%;
  height: 100%;
}
.project-hero__preview-frame:hover .project-hero__screenshot { transform: scale(1.08); }
.project-hero__preview-glow {
  position: absolute;
  inset: auto -30% -50% auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(96,165,250,.58), rgba(34,211,238,.22));
  opacity: .58;
  filter: blur(60px);
  pointer-events: none;
}
.project-hero__domain {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent 30%);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  box-shadow: 0 18px 32px rgba(9,14,28,.28);
  letter-spacing: .4px;
}
.project-hero__title-text {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: clamp(180px, 45vw, 640px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}
/* Ensure the layout really stacks on tablets/phones (rule placed AFTER base styles to win cascade) */
@media (max-width: 991.98px) {
  .project-hero__layout { grid-template-columns: 1fr !important; }
  .project-hero__preview { order: -1; }
}
.project-hero__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.project-hero__heading-left { flex: 1 1 260px; min-width: 220px; }
.project-hero__heading-right {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-width: 0;
}
.project-hero__meta-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}
.project-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin-bottom: 8px;
}
.project-hero__actions > * { flex-shrink: 0; }
.project-hero__action-add {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.15rem;
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 18px 38px rgba(12, 16, 30, .26);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.project-hero__action-add i { font-size: 1rem; }
.project-hero__action-add:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 24px 46px rgba(12, 16, 30, .3);
}
.project-hero__action-add:active {
  transform: translateY(0);
  filter: brightness(.97);
  box-shadow: 0 14px 24px rgba(12, 16, 30, .24);
}
.project-hero__action-history {
  width: 2.65rem;
  height: 2.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
  font-size: 1.15rem;
  box-shadow: 0 18px 32px rgba(12, 16, 30, .24);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.project-hero__action-history:hover {
  transform: translateY(-1px);
  box-shadow: 0 24px 40px rgba(12, 16, 30, .28);
}
.project-hero__action-history:active {
  transform: translateY(0);
  box-shadow: 0 14px 24px rgba(12, 16, 30, .22);
}
.project-hero__actions .chip { margin-left: .25rem; }
@media (max-width: 991.98px) {
  .project-hero__heading { gap: 1rem; }
}
@media (max-width: 767.98px) {
  .project-hero__heading {
    flex-direction: column;
    align-items: stretch;
  }
  .project-hero__heading-right,
  .project-hero__actions {
    width: 100%;
    justify-content: flex-start;
  }
  .project-hero__actions {
    gap: .55rem;
  }
  .project-hero__title-text {
    max-width: 100%;
  }
  .project-hero__action-add {
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
  }
  .project-hero__actions .chip {
    margin-left: 0;
  }
}
.meta-list { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 12px 0 0; }
.meta-item { display:flex; align-items:center; gap:8px; color: var(--muted); font-weight:600; }
.meta-item .bi { color: var(--primary); }

.section { margin-top: 22px; }
.section-header { display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.section-header .label { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; }
.section-header .label .bi { color: var(--accent); }
.toolbar { display:flex; flex-wrap: wrap; align-items:center; gap:8px; }

.chip { display:inline-flex; align-items:center; gap:6px; padding:.25rem .55rem; border-radius: 999px; border:1px solid var(--border); background: rgba(255,255,255,.06); font-size:.85rem; color: var(--text); }
.chip .bi { font-size:.9em; color: var(--muted); }

.btn-ghost { background: transparent; border: 1px dashed var(--border); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,.04); border-style: solid; }

.empty-state { padding: 18px; border:1px dashed var(--border); border-radius: var(--radius-xs); color: var(--muted); background: rgba(255,255,255,.03); }

.table-links { table-layout: auto; }
.table-links thead th { white-space: nowrap; }
/* Prefer URL wider, anchor medium, fixed actions */
/* After adding a selection checkbox as the first column, indices shift by +1 */
.table-links th:nth-child(6),
.table-links td:nth-child(6) { width: 64px; } /* wish icon only */
.table-links th:nth-child(3),
.table-links td:nth-child(3) { 
  /* URL column: make it shorter by default */
  min-width: 140px; 
  max-width: 320px;
  word-break: break-word;
  overflow-wrap: anywhere;
} /* URL column with max-width */
.table-links th:nth-child(4),
.table-links td:nth-child(4) { 
  min-width: 120px; 
  max-width: 250px;
  word-break: break-word;
  overflow-wrap: anywhere;
} /* Anchor column */
.table-links th:nth-child(5),
.table-links td:nth-child(5) { width: 60px; } /* Language */
.table-links th:nth-child(7),
.table-links td:nth-child(7) { min-width: 140px; } /* Status */

/* Column visibility toggles */
.table-links th.column-hidden,
.table-links td.column-hidden { display: none; }

/* Sortable table headers */
.table-links th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 24px;
}
.table-links th.sortable:hover { background: rgba(255,255,255,.05); }
.table-links th.sortable::after {
  content: '\F282'; /* bi-arrow-down-up */
  font-family: 'bootstrap-icons';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .3;
  font-size: .8rem;
}
.table-links th.sortable.asc::after {
  content: '\F148'; /* bi-arrow-up */
  opacity: 1;
  color: var(--primary);
}
.table-links th.sortable.desc::after {
  content: '\F13E'; /* bi-arrow-down */
  opacity: 1;
  color: var(--primary);
}

/* Truncate long anchor and url path with ellipsis; show full in tooltip */
.table-links .text-truncate-anchor,
.table-links .text-truncate-path {
  display: inline-block;
  /* Make URL shrink earlier to avoid overlapping other columns */
  max-width: clamp(110px, 22vw, 280px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.table-links .host-muted {
  display: inline-block;
  max-width: clamp(120px, 22vw, 280px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ensure URL cell never visually overlaps adjacent columns */
.table-links .url-cell { overflow: hidden; }

/* Date columns */
.table-links .column-created,
.table-links .column-promo-date {
  white-space: nowrap;
  min-width: 110px;
  width: 120px;
}
.table-links .date-col { line-height: 1.1; }
.table-links .date-col__date { font-size: .9rem; }
.table-links .date-col__time { font-size: .75rem; }

/* Hidden columns via toggle */
.table-links .column-hidden {
  display: none !important;
}

/* Sticky bulk bar */
.bulk-sticky {
  position: fixed;
  bottom: 16px;
  right: 16px; /* JS переустановит left/width, чтобы выровнять к правому краю контент-области */
  z-index: 1080;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 12px;
  padding: 10px 12px;
  width: min(980px, 92vw);
  max-width: 100%;
  backdrop-filter: blur(6px);
}

.bulk-sticky-spacer { height: 72px; }

/* Ensure filters area doesn't clip dropdowns */
.link-filters { position: relative; overflow: visible; }
/* Allow horizontal scroll again while keeping vertical overflow visible */
.table-responsive { overflow-x: auto; overflow-y: visible; }
.table-links { overflow: visible; }

/* Columns control positioned in top-right of filter-controls row */
.link-filter-controls { position: relative; }
.link-filter-controls .columns-control-floating {
  position: absolute;
  top: 0;
  right: 0;
  /* Ensure any child dropdown sits above surrounding table/actions */
  z-index: 4000;
  isolation: isolate;
}
@media (max-width: 767.98px) {
  .link-filter-controls .columns-control-floating {
    position: static;
    order: -1;
  }
}

/* Responsive compaction for small screens */
@media (max-width: 1400px) {
  /* Hide Anchor column a bit earlier to avoid horizontal scroll */
  .table-links th:nth-child(4),
  .table-links td:nth-child(4) { display: none; }
  /* Tighten URL width slightly */
  .table-links th:nth-child(3),
  .table-links td:nth-child(3) { min-width: 220px; }
  .table-links .text-truncate-path { max-width: clamp(140px, 32vw, 420px); }
  /* Hide text labels in actions earlier */
  .table-links td:nth-child(8) .btn .label { display:none !important; }
}

@media (max-width: 1200px) {
  /* Hide Language column next */
  .table-links th:nth-child(5),
  .table-links td:nth-child(5) { display: none; }
  .table-links th:nth-child(3),
  .table-links td:nth-child(3) { min-width: 180px; }
  .table-links .text-truncate-path { max-width: clamp(120px, 32vw, 340px); }
}

@media (max-width: 992px) {
  /* Further compact URL */
  .table-links th:nth-child(3),
  .table-links td:nth-child(3) { min-width: 160px; }
  /* Hide some meta chips */
  .table-links .link-meta__created { display:none !important; }
}

@media (max-width: 767.98px) {
  /* Hide desktop table, show redesigned cards (scoped to links page only) */
  #links-card .table-responsive { display: none !important; }
  #links-card .link-cards-mobile { display: block !important; }
  /* Hide header bulk toolbar on mobile to prevent layout shift; use sticky bar only */
  #links-card .bulk-toolbar { display: none !important; }
}
/* On very small screens, allow full width inside stacked layout */
@media (max-width: 640px) {
  .table-links .text-truncate-anchor,
  .table-links .text-truncate-path,
  .table-links .host-muted { max-width: 100%; }
}

/* Compact mobile table layout enhancements */
@media (max-width: 767.98px) {
  .table-responsive { -webkit-overflow-scrolling: touch; }
  .table-links { font-size: .78rem; }
  .table-links th, .table-links td { padding: 6px 8px; }
  .table-links td.text-end .icon-btn, .table-links .btn.btn-sm { height: 32px !important; }
  .table-links td.text-end { display: flex; flex-wrap: wrap; gap: 4px; }
  .table-links td.text-end > * { margin-left: 0 !important; }
  /* Stack meta chips or shrink */
  .table-links .link-meta__chips { display: flex; flex-wrap: wrap; gap: 4px; }
  /* Allow horizontal scroll if columns overflow */
  .table-responsive::-webkit-scrollbar { height: 6px; }
  .table-responsive::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
  .table-responsive::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 3px; }
}

/* Compact tables in referral dashboard on mobile: one per row, tighter spacing */
@media (max-width: 767.98px) {
  .referral-dashboard .table { font-size: .86rem; }
  .referral-dashboard .table th, .referral-dashboard .table td { padding: .35rem .5rem; }
  .referral-dashboard .table-responsive { -webkit-overflow-scrolling: touch; }
}

/* Keep referral link input + copy button on one line and visible on mobile */
@media (max-width: 767.98px) {
  .referral-dashboard .ref-link-card .input-group { flex-wrap: nowrap; }
  .referral-dashboard .ref-link-card .input-group > .form-control { min-width: 0; flex: 1 1 auto; }
  .referral-dashboard .ref-link-card .input-group > .btn { flex: 0 0 auto; }
}

/* Referral clicks table: prevent mobile skew and overflowing long values */
@media (max-width: 767.98px) {
  .ref-click-table .table { table-layout: fixed; }
  .ref-click-table .table th,
  .ref-click-table .table td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ref-click-table .table th:nth-child(1), .ref-click-table .table td:nth-child(1) { width: 22%; }
  .ref-click-table .table th:nth-child(2), .ref-click-table .table td:nth-child(2) { width: 16%; }
  .ref-click-table .table th:nth-child(3), .ref-click-table .table td:nth-child(3) { width: 18%; }
  .ref-click-table .table th:nth-child(4), .ref-click-table .table td:nth-child(4) { width: 18%; }
  .ref-click-table .table th:nth-child(5), .ref-click-table .table td:nth-child(5) { width: 20%; }
  .ref-click-table .table th:nth-child(6), .ref-click-table .table td:nth-child(6) { width: 12%; }
}

/* Two-per-row tiles in "Итоги программы" on mobile */
@media (max-width: 767.98px) {
  .ref-stats-card .row > .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}

/* Mobile link cards (shown <768px instead of table) */
.link-cards-mobile { display: none; }

/* Generic responsive card pair layout utility for dashboards: 2 columns on small screens (>=420px), 1 column on extra small (<420px) */
.card-pair-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 420px) and (max-width: 767.98px) {
  .card-pair-grid { grid-template-columns: 1fr 1fr; }
}
/* Referral metric tiles pair handling */
@media (max-width: 767.98px) {
  .ref-metric-grid > .col-md-6, .ref-metric-grid > .col-xxl-3 { flex: 0 0 50%; max-width: 50%; }
  .ref-metric-grid { row-gap: 12px; }
}
@media (max-width: 420px) {
  .ref-metric-grid > .col-md-6, .ref-metric-grid > .col-xxl-3 { flex: 0 0 100%; max-width: 100%; }
}
.link-cards-mobile > .form-check-input { margin-right: 6px; }
.link-card {
  background: linear-gradient(145deg, rgba(24,34,54,.85), rgba(17,24,39,.72));
  backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(120,140,160,.25);
  border-radius: 16px;
  padding: 12px 14px 12px 12px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: border-color .15s, box-shadow .15s;
}
.link-card.table-active,
.link-card:hover {
  border-color: rgba(140,180,255,.6);
  box-shadow: 0 0 0 1px rgba(140,180,255,.35), 0 4px 10px -4px rgba(0,0,0,.5);
}
.link-card__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
}
.link-card__url {
  flex: 1;
  min-width: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  overflow: hidden;
  display: block;
  line-height: 1.4;
  word-break: break-word;
}
.link-card__url:hover {
  text-decoration: underline;
}
.link-card__id {
  flex-shrink: 0;
  font-size: .75rem;
  color: var(--muted);
  padding: 2px 8px;
  background: rgba(255,255,255,.04);
  border-radius: 999px;
  white-space: nowrap;
}
.link-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: .72rem;
  color: var(--muted);
}
.link-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
.link-card__meta-item i {
  flex-shrink: 0;
  opacity: .7;
}
.link-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 600;
  align-self: flex-start;
  background: rgba(255,255,255,.05);
}
.link-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.link-card__actions .btn {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .72rem;
  padding: .35rem .55rem;
}
.link-card__actions .btn i {
  font-size: .9rem;
}
/* Tiny button variant for toggle */
.btn-xxs.btn { font-size: .6rem; padding: .15rem .35rem; line-height: 1; }
.btn-xxs.btn i { font-size: .7rem; }

/* Collapse behavior */
.link-card [data-card-meta] { max-height: 66px; overflow: hidden; position: relative; }
.link-card [data-card-meta]::after { content:""; position:absolute; left:0; right:0; bottom:0; height:26px; background:linear-gradient(to top, rgba(24,34,54,.9), rgba(24,34,54,0)); pointer-events:none; }
.link-card.link-card--expanded [data-card-meta] { max-height: none; }
.link-card.link-card--expanded [data-card-meta]::after { display:none; }
.link-card [data-card-toggle] { flex-shrink:0; }
@media (max-width: 420px){
  .link-card__actions .btn span { display:none; }
}

@media (min-width: 768px) {
  #links-card .link-cards-mobile { display: none !important; }
  #links-card .table-responsive { display: block !important; }
}

/* Column settings dropdown theming */
.columns-dropdown.dropdown-menu {
  /* Make menu fully opaque and clearly separated from content */
  background: rgba(17,24,39,1) !important; /* solid slate-900 */
  border: 1px solid rgba(148,163,184,.24);
  box-shadow: 0 18px 40px -6px rgba(8,12,24,.55), 0 4px 18px -4px rgba(8,12,24,.4);
  /* keep text sharp */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 4000 !important; /* push above any row/action accidental contexts */
  margin-top: 8px;
  isolation: isolate; /* prevent any parent filters from affecting it */
  padding: 6px 6px 8px; /* internal padding instead of item margins */
  position: relative;
}
.columns-dropdown.dropdown-menu.columns-menu-portal {
  position: absolute !important;
  inset: auto auto auto auto; /* reset */
  max-height: 70vh;
  overflow-y: auto;
  border-radius: 12px;
  z-index: 6000 !important;
}
.columns-dropdown.dropdown-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg, rgba(17,24,39,0.98), rgba(24,32,48,0.98));
  border-radius: inherit;
  z-index: -1; /* solid base behind items so nothing beneath shines through */
}
.columns-dropdown.dropdown-menu .dropdown-item {
  color: var(--text);
  background: rgba(255,255,255,.04);
  margin: 2px 0 0 0; /* remove horizontal margin gaps that let underlying UI peek through */
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.04);
  line-height: 1.15;
}
.columns-dropdown.dropdown-menu .dropdown-item:hover {
  background: rgba(59,130,246,.18);
  border-color: rgba(96,165,250,.35);
}

/* Highlight the columns control button */
.btn-columns-toggle {
  border-color: var(--primary);
  color: var(--primary);
  background: rgba(13,110,253,.08);
}
.btn-columns-toggle:hover {
  background: rgba(13,110,253,.12);
  color: var(--primary);
}

/* Backdrop for columns dropdown */
/* Columns dropdown no longer uses a backdrop overlay. */

/* Restore hover states */
.table.table-hover.table-links tbody tr:hover { background: rgba(255,255,255,.04); }
.table-links .url-cell .view-url:hover { text-decoration: underline; }

/* URL cell layout tweaks */
.table-links .url-cell { line-height: 1.25; }
.table-links .url-cell .view-url.text-truncate-path { color: var(--primary); text-decoration: none; }

/* Truncation for long values */
.table-links .url-cell a,
.table-links .url-cell,
.table-links .anchor-cell {
  word-break: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}
.table-links .url-cell a { color: var(--primary); }

/* Prevent layout jumping when toggling edit inputs */
.table-links .edit-url,
.table-links .edit-anchor {
  min-height: 36px;
}

/* Anchor chips input */
.anchor-chip-field.form-control {
  min-height: 42px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px 10px;
  cursor: text;
}
.anchor-chip-field.form-control:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.15rem rgba(59,130,246,.25);
}
.anchor-chip-field__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}
.anchor-chip-field__input {
  border: none;
  background: transparent;
  flex: 1 0 140px;
  min-width: 120px;
  padding: 4px 0;
  color: var(--text);
}
.anchor-chip-field__input:focus {
  outline: none;
  box-shadow: none;
}
.anchor-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.anchor-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,.28);
  background: rgba(59,130,246,.18);
  font-size: .8rem;
  line-height: 1.2;
  color: var(--text);
  max-width: 100%;
}
.anchor-chip--static {
  background: rgba(96,165,250,.18);
  border-color: rgba(96,165,250,.35);
}
.anchor-chip--empty,
.anchor-chip--placeholder {
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--muted);
}
.anchor-chip__label {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anchor-chip__remove {
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  line-height: 1;
  font-size: .85rem;
  cursor: pointer;
}
.anchor-chip__remove:hover,
.anchor-chip__remove:focus-visible {
  color: var(--danger);
}

/* =================== Link Adder block =================== */
.link-adder {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 768px) {
  .link-adder { grid-template-columns: 1fr 0.7fr auto; align-items: stretch; }
}
.link-adder .form-control { height: 42px; }
.link-adder .btn-add {
  height: 42px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* On very small screens, keep the button compact */
@media (max-width: 420px) {
  .btn .btn-text { display: none; }
}

/* Badges tweak for better legibility */
.badge { border-radius: 999px; font-weight: 600; }

/* Optional fixed layout for links table for steadier columns */
.table-links { table-layout: auto; }

/* ===== Enhanced controls for Link Adder (top bar) ===== */
.link-adder-card {
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.link-adder-card .section-header { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.link-adder { grid-template-columns: 1.4fr 1fr auto; }
@media (max-width: 992px) { .link-adder { grid-template-columns: 1fr; } }
.link-adder .form-control { height: 46px; }
.link-adder .btn-add { height: 46px; }

/* Gradient / glow buttons */
.btn-gradient {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--primary-2) 40%, black);
  color: #0b1220;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
  box-shadow: 0 6px 14px rgba(59,130,246,.25), inset 0 -1px 0 rgba(255,255,255,.2);
}
.btn-gradient:hover { filter: brightness(1.06); box-shadow: 0 8px 18px rgba(59,130,246,.32), inset 0 -1px 0 rgba(255,255,255,.25); }
.btn-gradient:active { filter: brightness(0.98); }
.btn-gradient i { color: #0b1220; }

/* Outline glossy buttons */
.btn-outline-primary { border-color: color-mix(in srgb, var(--primary-2) 60%, white 0%); color: var(--primary); }
.btn-outline-primary:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: var(--primary-2); color: var(--primary-2); }

/* Section spacing tweaks */
.section + .section { margin-top: 16px; }

/* Table card polish */
.table-card { border-radius: var(--radius); overflow: hidden; }
.table-card .section-header { background: var(--surface-2); }

/* ===== Responsive stacked table (mobile) ===== */
@media (max-width: 640px) {
  /* Compact stacked row layout */
  .table-links thead { display: none; }
  .table-links tbody tr { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 8px 10px 10px; border: 1px solid rgba(148,163,184,.18); border-radius: 12px; margin-bottom: 10px; background: linear-gradient(180deg, rgba(17,24,39,.65), rgba(17,24,39,.5)); box-shadow: 0 4px 12px -6px rgba(0,0,0,.4); }
  .table-links tbody tr:hover { background: linear-gradient(180deg, rgba(17,24,39,.72), rgba(17,24,39,.56)); }
  .table-links tbody tr td { display: grid; grid-template-columns: 88px 1fr; gap: 6px; padding: 2px 0; align-items: start; }
  .table-links tbody tr td:first-child { grid-template-columns: 28px 1fr; }
  .table-links tbody tr td:last-child { grid-template-columns: 1fr; margin-top: 4px; padding-top:6px; border-top:1px solid rgba(255,255,255,.06); }
  .table-links tbody tr td::before { content: attr(data-label); color: var(--muted); font-size:.68rem; font-weight:600; letter-spacing:.02em; text-transform:uppercase; }
  .table-links tbody tr td.text-end { text-align: left !important; }
  /* Inline chips shrink */
  .table-links .badge, .table-links .chip { font-size: .6rem; padding: .2rem .45rem; }
  .table-links .status-cell .badge { font-size:.58rem; }
  /* URL truncation stronger */
  .table-links .text-truncate-path { max-width: 100%; font-size:.74rem; }
  .table-links .host-muted { display:none; }
  .table-links td.text-end .icon-btn, .table-links td.text-end .btn.btn-sm { height:30px !important; width:30px !important; padding:0; border-radius:8px; }
  .table-links td.text-end { display:flex; flex-wrap:wrap; gap:6px; }
  .table-links td.text-end > * { margin-left:0 !important; }
  /* Selection checkbox row header reposition */
  .table-links tbody tr td[data-label="#"] { order:-1; grid-template-columns: 18px 1fr; }
  .table-links tbody tr td[data-label="#"]::before { display:none; }
}

/* =================== History Timeline =================== */
.history-shell {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 36px);
}

.history-hero {
  background: linear-gradient(135deg, rgba(59,130,246,.28), rgba(34,211,238,.16));
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
  box-shadow: 0 20px 40px rgba(10,16,32,.32);
}
.history-hero__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(18px, 2.6vw, 26px);
}
.history-hero__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(14px, 3vw, 28px);
}
.history-hero__heading {
  font-weight: 800;
  letter-spacing: .16px;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
}
.history-hero__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .8;
}
.history-hero__meta .dot { opacity: .4; font-size: 1.2em; line-height: 1; }
.history-hero__desc {
  margin-top: 4px;
  max-width: clamp(220px, 60vw, 520px);
  line-height: 1.45;
}
.history-hero__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.history-hero__stats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.history-stat {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(15,23,42,.34);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 88px;
}
.history-stat__label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: color-mix(in srgb, var(--muted) 88%, white 12%);
  font-weight: 700;
  line-height: 1.2;
}
.history-stat__value {
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: .25px;
}
.history-stat__value--muted {
  color: color-mix(in srgb, var(--muted) 75%, white 25%);
  font-weight: 600;
  font-size: clamp(1rem, 1.7vw, 1.25rem);
}

.history-filters {
  background: linear-gradient(135deg, rgba(15,23,42,.92), rgba(15,23,42,.78));
  border: 1px solid var(--border);
  box-shadow: var(--glass-shadow);
}
.history-filters .card-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(16px, 2.6vw, 24px);
}
.history-filters__header .h5 { font-weight: 700; letter-spacing: .28px; margin-bottom: 0; }
.history-filter-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 6px 2px;
  margin: 0 -6px;
  scroll-snap-type: x mandatory;
}
.history-filter-chips .filter-chip { scroll-snap-align: start; }
.history-filter-chips::-webkit-scrollbar { height: 6px; }
.history-filter-chips::-webkit-scrollbar-thumb { background: rgba(148,163,184,.35); border-radius: 999px; }
.history-filter-controls { gap: 10px; }
.history-filter-search .input-group-text { background: rgba(8,22,43,.86); border: 1px solid rgba(148,163,184,.35); color: var(--muted); }
.history-filter-search .form-control { background: rgba(8,22,43,.86); border: 1px solid rgba(148,163,184,.35); color: var(--text); }
.history-filter-search .form-control:focus { border-color: rgba(96,165,250,.8); box-shadow: 0 0 0 3px rgba(96,165,250,.18); }
.history-level-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, rgba(96,165,250,0.4) 20%);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .05px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.filter-chip .label { pointer-events: none; }
.filter-chip .count {
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .72rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--muted) 85%, white 15%);
}
.filter-chip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--primary) 28%, var(--border));
  box-shadow: 0 12px 24px rgba(11, 17, 30, .24);
}
.filter-chip.active {
  background: linear-gradient(135deg, rgba(96,165,250,.3), rgba(34,211,238,.2));
  border-color: color-mix(in srgb, var(--primary) 50%, rgba(255,255,255,.18));
  box-shadow: 0 14px 28px rgba(14, 20, 36, .3);
  color: var(--text);
}
.filter-chip.active .count { color: var(--text); background: rgba(255,255,255,.16); }

.history-timeline {
  position: relative;
  display: grid;
  gap: clamp(14px, 2vw, 20px);
  padding-left: 18px;
}
.history-timeline::before {
  content: '';
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 8px;
  width: 2px;
  background: rgba(255,255,255,.08);
}
.history-entry {
  position: relative;
  margin-left: 10px;
  padding: clamp(16px, 2.4vw, 22px);
  border-radius: var(--radius);
  border: 1px solid rgba(96,165,250,.14);
  background: linear-gradient(165deg, rgba(17,24,39,.9), rgba(30,41,59,.84));
  box-shadow: 0 16px 34px rgba(8, 12, 24, .28);
  display: grid;
  gap: 12px;
  color: var(--text);
}
.history-entry::before {
  content: '';
  position: absolute;
  top: 26px;
  left: -16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 80%, white 20%);
  box-shadow: 0 0 0 4px rgba(96,165,250,.18);
  transform: translateY(-50%);
}

.history-entry__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.history-entry__stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: color-mix(in srgb, var(--muted) 90%, white 10%);
}
.history-entry__stamp .date { font-size: .9rem; color: var(--text); font-weight: 600; }
.history-entry__stamp .network {
  font-size: .7rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 28%, rgba(15,23,42,.75));
  border: 1px solid color-mix(in srgb, var(--primary) 55%, rgba(15,23,42,.4));
  color: rgba(235,245,255,.92);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.history-entry__stamp .level-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
/* Ensure only the balance stack is covered by the stretched link, not the Actions area */
.dashboard-hero-card__balance .dashboard-balance-stack { position: relative; }
.dashboard-hero-card__balance .dashboard-hero-card__actions { position: relative; z-index: 2; }
  background: rgba(52,211,153,.18);
  color: color-mix(in srgb, var(--success) 75%, white 25%);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.history-entry__author { display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--muted) 85%, white 15%); }
.history-entry__author .bi { color: inherit; }
.history-entry__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: color-mix(in srgb, var(--text) 96%, white 4%);
}
.history-entry__title .anchor {
  display: inline;
  word-break: break-word;
}
.history-entry__title .anchor-label {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.16);
  border: 1px solid rgba(148,163,184,.28);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 82%, white 18%);
  font-weight: 700;
}


.history-entry__links {
  display: grid;
  gap: 14px;
}
@media (min-width: 768px) {
  .history-entry__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
  }
}
.history-link-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-xs);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.history-link-block .label {
  font-size: .72rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 82%, white 18%);
  font-weight: 700;
}
.history-link-block .value {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  word-break: break-word;
}
.history-link-block .value .history-url {
  color: color-mix(in srgb, var(--primary) 88%, white 12%);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--primary) 48%, transparent);
}
.history-link-block .btn {
  padding: 4px 10px;
  border-radius: var(--radius-xs);
  border-color: rgba(148,163,184,.45);
  color: color-mix(in srgb, var(--text) 90%, white 10%);
}
.history-link-block .btn:hover {
  background: rgba(148,163,184,.18);
  border-color: rgba(148,163,184,.65);
}

.status-dot {
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
}
.status-dot--success {
  background: var(--success);
  box-shadow: 0 0 12px rgba(52,211,153,.58);
}

.history-empty {
  padding: clamp(28px, 6vw, 44px);
  background: rgba(255,255,255,.03);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  display: grid;
  gap: 12px;
}
.history-empty .bi { font-size: 2rem; color: var(--primary); }

@media (max-width: 991.98px) {
  .history-hero__actions { width: 100%; justify-content: flex-start; }
  .history-hero__stats { width: 100%; }
}
@media (max-width: 767.98px) {
  .history-timeline { padding-left: 0; }
  .history-timeline::before { display: none; }
  .history-entry { margin-left: 0; }
  .history-entry::before { display: none; }
  .history-entry__title .anchor { max-width: 100%; white-space: normal; }
  .history-filter-controls { flex-direction: column; }
  .history-filter-controls .btn { width: 100%; }
}

/* Icon-only buttons on very narrow screens */
@media (max-width: 420px) { .btn .btn-text { display:none; } }

/* Avatar preview in settings */
.avatar-preview {
  width: 48px; height: 48px; border-radius: 999px; object-fit: cover; object-position: center;
  border: 1px solid var(--border); background: var(--surface-2);
}

/* =================== Landing (public index) =================== */
.landing-container { padding-top: 2rem; padding-bottom: 4rem; }

.hero-modern { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; margin-bottom: 4rem; position: relative; isolation: isolate; }
.hero-modern::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 0% 0%, rgba(96,165,250,.18), transparent 65%), radial-gradient(90% 120% at 100% 0%, rgba(124,58,237,.16), transparent 60%); z-index: -2; pointer-events: none; }
.hero-modern__copy { display: grid; gap: 1.2rem; }
.hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: .5rem 1.4rem; border-radius: 999px; background: linear-gradient(135deg, rgba(59,130,246,.26), rgba(139,92,246,.22)); border: 1px solid rgba(148,163,184,.35); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: var(--text); box-shadow: 0 18px 34px -28px rgba(59,130,246,.8); }
.hero-title { font-size: clamp(2.2rem, 3.8vw, 3.2rem); line-height: 1.1; letter-spacing: .6px; }
.hero-lead { font-size: 1.05rem; color: color-mix(in srgb, var(--text) 92%, white 8%); max-width: 640px; }
.hero-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.hero-list li { display: flex; gap: .75rem; font-size: .98rem; }
.hero-list i { color: var(--primary); font-size: 1.2rem; margin-top: .3rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.hero-modern__card { display: flex; justify-content: center; }
.hero-card { width: min(420px, 100%); background: linear-gradient(160deg, rgba(13,25,48,.9), rgba(79,70,229,.28)); border: 1px solid rgba(148,163,184,.32); border-radius: clamp(18px, 3vw, 24px); padding: clamp(1.6rem, 3vw, 2.1rem); box-shadow: 0 28px 60px -32px rgba(15,23,42,.85); display: grid; gap: 1.25rem; }
.hero-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.hero-card__head h2 { font-size: 1.15rem; margin: 0; }
.hero-card__label { font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: rgba(148,163,184,.9); }
.hero-card__stats { display: grid; gap: .9rem; }
.hero-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .95rem; }
.hero-card__row dt { color: rgba(148,163,184,.82); }
.hero-card__row dd { margin: 0; font-weight: 600; color: #e2e8f0; }
.hero-card__note { margin: 0; font-size: .8rem; color: rgba(148,163,184,.82); }
.hero-card__actions { display: flex; gap: .75rem; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; }
.metric-chip { background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(147,197,253,.08)); border: 1px solid rgba(148,163,184,.32); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: 0 18px 42px -28px rgba(15,23,42,.8); display: grid; gap: .45rem; min-height: 130px; }
.metric-chip__label { text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; color: rgba(148,163,184,.85); }
.metric-chip strong { font-size: 1.45rem; font-weight: 700; letter-spacing: .05em; }
.metric-chip__hint { font-size: .82rem; color: rgba(148,163,184,.78); }

.comparison-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.comparison-card { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(13,25,48,.6)); border: 1px solid rgba(148,163,184,.28); border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 24px 52px -32px rgba(15,23,42,.85); display: grid; gap: 1rem; }
.comparison-card h3 { margin: 0; font-size: 1.05rem; }
.comparison-subtitle { margin: 0; font-size: .9rem; color: rgba(148,163,184,.78); }
.comparison-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; font-size: .92rem; }
.comparison-list i { color: var(--accent); margin-right: .4rem; }

.cascade-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.flow-step { background: linear-gradient(180deg, rgba(15,27,52,.9), rgba(88,28,135,.25)); border: 1px solid rgba(148,163,184,.28); border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: 0 24px 52px -32px rgba(15,23,42,.85); display: grid; gap: .8rem; }
.flow-step__badge { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: linear-gradient(135deg, rgba(96,165,250,.24), rgba(34,211,238,.16)); border: 1px solid rgba(148,163,184,.25); }
.flow-step__stats { display: grid; gap: .5rem; font-size: .9rem; }
.flow-step__stat { display: flex; justify-content: space-between; gap: 1rem; color: rgba(148,163,184,.85); }
.flow-step__stat dd { margin: 0; color: #e2e8f0; font-weight: 600; }
.cascade-note { margin-top: 1.4rem; font-size: .85rem; }

.safety-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.1rem; }
.safety-card { background: linear-gradient(160deg, rgba(15,23,42,.88), rgba(2,132,199,.22)); border: 1px solid rgba(148,163,184,.28); border-radius: var(--radius); padding: 1.4rem; display: grid; gap: .8rem; box-shadow: 0 22px 48px -30px rgba(15,23,42,.8); }
.safety-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(59,130,246,.3), rgba(147,197,253,.2)); color: #e0f2fe; font-size: 1.3rem; }
.safety-card h3 { margin: 0; font-size: 1.05rem; }
.safety-card p { margin: 0; font-size: .9rem; color: rgba(148,163,184,.82); }

.process-modern { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; counter-reset: process; }
.process-card { background: linear-gradient(180deg, rgba(17,24,39,.9), rgba(59,130,246,.22)); border: 1px solid rgba(148,163,184,.25); border-radius: var(--radius); padding: 1.4rem 1.6rem; display: grid; gap: .8rem; position: relative; overflow: hidden; box-shadow: 0 24px 52px -32px rgba(15,23,42,.82); }
.process-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, rgba(59,130,246,.8), rgba(147,197,253,.5)); opacity: .9; }
.process-step { display: inline-block; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(147,197,253,.85); }
.process-card h3 { margin: 0; font-size: 1.02rem; }
.process-card p { margin: 0; font-size: .9rem; color: rgba(148,163,184,.82); }

.faq-accordion .accordion-item { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(15,23,42,.78)); border: 1px solid rgba(148,163,184,.25); border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 18px 40px -28px rgba(15,23,42,.82); }
.faq-accordion .accordion-button { background: transparent; color: var(--text); font-weight: 600; padding: 1rem 1.25rem; }
.faq-accordion .accordion-button:not(.collapsed) { color: var(--primary); box-shadow: inset 0 -1px 0 rgba(148,163,184,.2); }
.faq-accordion .accordion-body { color: rgba(148,163,184,.85); }

.cta-modern { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; background: radial-gradient(120% 160% at 0% 0%, rgba(59,130,246,.25), transparent 60%), radial-gradient(100% 160% at 100% 0%, rgba(6,182,212,.22), transparent 58%), linear-gradient(180deg, rgba(17,24,39,.92), rgba(15,23,42,.88)); border: 1px solid rgba(148,163,184,.28); border-radius: clamp(18px, 4vw, 26px); padding: clamp(1.8rem, 4vw, 2.6rem); align-items: center; box-shadow: 0 30px 60px -34px rgba(15,23,42,.88); }
.cta-modern__content { display: grid; gap: 1rem; }
.cta-badge { display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1.1rem; border-radius: 999px; background: linear-gradient(135deg, rgba(59,130,246,.3), rgba(139,92,246,.24)); border: 1px solid rgba(148,163,184,.32); letter-spacing: .16em; font-size: .72rem; text-transform: uppercase; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.cta-note { margin: 0; font-size: .8rem; color: rgba(148,163,184,.82); }
.cta-modern__visual { display: flex; justify-content: flex-end; }
.cta-logo { max-width: 220px; filter: drop-shadow(0 12px 24px rgba(14,116,144,.4)); }

/* Section base */
.landing-section { margin-top: 4.5rem; position: relative; }
.section-head { margin-bottom: 1.8rem; }
.section-head p { max-width: 620px; }
.section-head h2 { color: #eef2ff; }
.section-head p { color: rgba(203,213,225,.85); }

/* Responsive tweaks */
@media (max-width: 1200px) {
  .hero-modern { grid-template-columns: 1fr; }
  .hero-modern__card { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .landing-section { margin-top: 3.5rem; }
  .hero-modern { margin-bottom: 3rem; }
  .hero-title { font-size: clamp(2rem, 7vw, 2.6rem); }
  .cta-modern { grid-template-columns: 1fr; text-align: left; }
  .cta-modern__visual { justify-content: flex-start; }
}
@media (max-width: 576px) {
  .landing-container { padding-left: 14px; padding-right: 14px; }
  .hero-list li { font-size: .9rem; }
  .metric-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .process-step { font-size: .7rem; }
  .cta-actions a { flex: 1 1 100%; }
}

/* Light theme adjustments */
:root[data-theme="light"] .hero-modern::after { background: radial-gradient(120% 160% at 0% 0%, rgba(59,130,246,.32), transparent 70%), radial-gradient(100% 140% at 100% 0%, rgba(129,140,248,.28), transparent 60%); }
:root[data-theme="light"] .hero-card { background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(191,219,254,.72)); color: #111827; }
:root[data-theme="light"] .hero-card__row dd { color: #1e293b; }
:root[data-theme="light"] .hero-card__note { color: rgba(15,23,42,.65); }
:root[data-theme="light"] .metric-chip { background: linear-gradient(135deg, rgba(191,219,254,.55), rgba(244,244,245,.65)); border-color: rgba(148,163,184,.32); color: #111827; }
:root[data-theme="light"] .comparison-card { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(226,232,240,.88)); color: #0f172a; }
:root[data-theme="light"] .comparison-subtitle { color: rgba(51,65,85,.78); }
:root[data-theme="light"] .flow-step { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(219,234,254,.9)); color: #0f172a; }
:root[data-theme="light"] .flow-step__stat { color: rgba(51,65,85,.78); }
:root[data-theme="light"] .flow-step__stat dd { color: #1f2937; }
:root[data-theme="light"] .safety-card { background: linear-gradient(160deg, rgba(255,255,255,.95), rgba(191,219,254,.82)); color: #0f172a; }
:root[data-theme="light"] .safety-card p { color: rgba(51,65,85,.78); }
:root[data-theme="light"] .process-card { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(191,219,254,.82)); color: #0f172a; }
:root[data-theme="light"] .process-card p { color: rgba(51,65,85,.78); }
:root[data-theme="light"] .faq-accordion .accordion-item { background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,252,.92)); color: #0f172a; }
:root[data-theme="light"] .faq-accordion .accordion-body { color: rgba(71,85,105,.85); }
:root[data-theme="light"] .cta-modern { background: radial-gradient(120% 160% at 0% 0%, rgba(59,130,246,.32), transparent 60%), radial-gradient(100% 160% at 100% 0%, rgba(6,182,212,.32), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(236,247,255,.92)); color: #0f172a; }
:root[data-theme="light"] .cta-note { color: rgba(51,65,85,.75); }

/* Focus states */
.hero-actions a:focus-visible, .comparison-card:focus-visible, .metric-chip:focus-visible, .flow-step:focus-visible, .safety-card:focus-visible, .process-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* Motion reduce respect already handled globally */

/* =================== Tooltip overrides (readability) =================== */
.tooltip { --pp-tooltip-bg: color-mix(in srgb, var(--bg-2) 82%, #000 18%); z-index: 3000; }
.tooltip .tooltip-inner {
  background: var(--pp-tooltip-bg);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px -4px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04) inset;
  padding: 8px 12px;
  font-size: .75rem;
  line-height: 1.25;
  letter-spacing: .2px;
  text-align: left;
  max-width: 320px;
  border-radius: 8px;
}
.tooltip .tooltip-arrow::before { background: var(--pp-tooltip-bg); }
:root[data-theme="light"] .tooltip { --pp-tooltip-bg: color-mix(in srgb, #ffffff 94%, var(--primary) 6%); }
:root[data-theme="light"] .tooltip .tooltip-inner { color: #111827; box-shadow: 0 6px 16px -4px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.06) inset; }
/* =================== End tooltip overrides =================== */

/* ===== Modal Interaction Fix ===== */
.modal { z-index: 2400; }
.modal-backdrop { z-index: 2390; }
.modal.modal-fixed-center {
  /* Equal top/bottom gap; never overlap fixed navbar */
  --modal-gap-y: calc(var(--navbar-h) + 24px);
  --modal-gap-x: clamp(12px, 4vw, 28px);
  height: 100%;
  box-sizing: border-box;
}
/* Force vertical centering with breathing room around sticky header/footer */
.modal.show.modal-fixed-center {
  display: flex !important;
  align-items: center; /* центрируем по вертикали внутри безопасных отступов */
  justify-content: center;
  padding: var(--modal-gap-y) var(--modal-gap-x); /* равные отступы сверху и снизу */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal.modal-fixed-center .modal-dialog {
  margin: 0 auto;
  width: min(100%, 900px);
}
.modal.modal-fixed-center .modal-content { min-height: auto; }
@media (max-height: 620px) {
  .modal.modal-fixed-center { --modal-gap-y: clamp(36px, 9vh, 64px); }
}
#promotionConfirmModal .modal-dialog { max-width: min(940px, 96vw); }
@media (max-height: 640px) {
  .modal.show.modal-fixed-center { align-items: flex-start; }
}
@media (max-width: 576px) {
  .modal.show.modal-fixed-center {
    align-items: flex-start;
    /* Respect safe area while keeping symmetry */
    padding-top: calc(max(var(--navbar-h) + 24px, 10vh) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(max(var(--navbar-h) + 24px, 10vh) + env(safe-area-inset-bottom, 0px));
  }
}

/* Hard override to keep all modals above any header or sticky elements */
.modal-backdrop.show, .modal-backdrop { z-index: 4990 !important; }
.modal.show { z-index: 5000 !important; }
.modal { z-index: 5000 !important; }

.form-select--monospace {
    font-family: var(--font-mono, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    letter-spacing: 0.02em;
}
.form-select--monospace option {
    font-family: inherit;
}

/* ===== Link Actions Redesign ===== */
.icon-btn {
  --icon-size: 34px;
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0;
  line-height: 1;
  font-size: .95rem;
  transition: background .18s ease, color .18s ease, transform .12s ease, border-color .18s ease;
}
.icon-btn:hover {
  background: color-mix(in srgb, var(--surface-2) 80%, var(--primary) 20%);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border) 55%);
  color: var(--primary);
}
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 2px; }
.icon-btn.disabled, .icon-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Space between mixed buttons */
.text-end > * + * { margin-left: 6px; }

/* Ensure publish/cancel btn height matches icon buttons */
.table-links .btn.btn-sm { padding: 6px 10px; line-height: 1; }

/* Responsive tightness */
@media (max-width: 640px) {
  .table-links td.text-end { flex-wrap: wrap; justify-content: flex-end; }
  .text-end > * { margin-left: 4px !important; }
}

/* Responsive tweak: hide publish text on very narrow screens */
@media (max-width: 520px) {
  .btn-publish span.label { display: none; }
}

/* === Modern Publish Button === */
.btn-publish {
  position: relative;
  --pub-grad-1: var(--primary);
  --pub-grad-2: var(--primary-2);
  --pub-radius: 14px;
  --pub-glow: 0 6px 18px -4px color-mix(in srgb, var(--primary) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary) 55%, transparent) inset;
  background: linear-gradient(135deg, color-mix(in srgb, var(--pub-grad-1) 85%, #fff 5%), color-mix(in srgb, var(--pub-grad-2) 90%, #000 4%));
  border: 1px solid color-mix(in srgb, var(--pub-grad-2) 60%, #000);
  color: #0b1220;
  font-weight: 600;
  letter-spacing: .2px;
  border-radius: var(--pub-radius);
  padding: 6px 14px 6px 12px;
  line-height: 1.1;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--pub-glow);
  transition: background .35s, box-shadow .25s, transform .18s ease, filter .35s;
  overflow: hidden;
}
.btn-publish i { color: #0b1220; transition: transform .5s cubic-bezier(.19,1,.22,1); }
.btn-publish .label { font-weight: 600; }
.btn-publish::before, .btn-publish::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
}
/* Soft inner shine */
.btn-publish::before { background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.6), transparent 55%); mix-blend-mode: overlay; opacity: .55; transition: opacity .4s; }
/* Animated diagonal sheen */
.btn-publish::after {
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.9) 52%, transparent 60%);
  transform: translateX(-160%) skewX(-18deg);
  filter: blur(.5px);
  transition: transform 1s ease;
}
.btn-publish:hover {
  filter: brightness(1.06) saturate(1.15);
  box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--primary) 65%, transparent), 0 0 0 1px color-mix(in srgb, var(--primary-2) 55%, transparent) inset;
}
.btn-publish:hover::after { transform: translateX(180%) skewX(-18deg); }
.btn-publish:hover i { transform: scale(1.15) rotate(-8deg); }
.btn-publish:active { transform: translateY(1px) scale(.97); filter: brightness(.95); }
.btn-publish:focus-visible { outline: 2px solid color-mix(in srgb, var(--primary) 70%, transparent); outline-offset: 3px; }
.btn-publish:disabled, .btn-publish.disabled { opacity: .55; filter: grayscale(.2); cursor: not-allowed; box-shadow: none; }

/* Light theme adjustment for good contrast */
:root[data-theme="light"] .btn-publish { color: #0a1222; }
:root[data-theme="light"] .btn-publish i { color: #0a1222; }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  .btn-publish, .btn-publish::after { transition: none !important; }
}
/* Compact size already via .btn-sm; ensure min-height consistent */
.btn-publish.btn-sm { min-height: 34px; }

/* === Publish Button Rocket Animation === */
.btn-publish .rocket {
  position: relative;
  display: inline-block;
  transition: transform .55s cubic-bezier(.19,1,.22,1), filter .55s;
  will-change: transform;
}
.btn-publish:hover .rocket { transform: translateY(-4px) rotate(-4deg) scale(1.08); }
.btn-publish:active .rocket { transform: translateY(-1px) scale(.93); }
.btn-publish .rocket::after {
  content: ""; position: absolute; left: 50%; top: 68%; transform: translate(-50%,0);
  width: 8px; height: 14px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, #fff 0%, #ffe9b0 18%, rgba(255,255,255,0) 40%),
    radial-gradient(circle at 50% 30%, #ffd85c 0%, #ff9f2b 55%, rgba(255,107,0,0.55) 70%, rgba(255,107,0,0) 90%);
  filter: blur(.4px) drop-shadow(0 0 3px rgba(255,170,60,.55)) drop-shadow(0 0 6px rgba(255,120,0,.35));
  opacity: 0; border-radius: 40% 40% 55% 55%;
  animation: flameFlicker .42s linear infinite;
  transition: opacity .35s ease .05s;
}
.btn-publish:hover .rocket::after { opacity: 1; }
.btn-publish:active .rocket::after { animation-duration: .25s; }

@keyframes flameFlicker {
  0% { transform: translate(-50%,0) scaleY(1) scaleX(.85); opacity:.85; }
  25% { transform: translate(-50%,1px) scaleY(1.15) scaleX(.78); opacity:.9; }
  50% { transform: translate(-50%,0) scaleY(.9) scaleX(.9); opacity:.75; }
  75% { transform: translate(-50%,2px) scaleY(1.25) scaleX(.75); opacity:.92; }
  100% { transform: translate(-50%,0) scaleY(1) scaleX(.85); opacity:.85; }
}

/* Respect reduced motion: disable complex transforms */
@media (prefers-reduced-motion: reduce) {
  .btn-publish .rocket, .btn-publish .rocket::after { transition: none !important; animation: none !important; }
  .btn-publish:hover .rocket { transform: none; }
  .btn-publish .rocket::after { display: none; }
}

/* Truncation helpers for links table */
.text-truncate-anchor,
.table-links .url-cell .view-url {
  display: inline-block;
  max-width: clamp(160px, 32vw, 520px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
/* Host line under link (domain) */
.table-links .url-cell .small.text-muted {
  display: block;
  max-width: clamp(160px, 30vw, 460px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 992px) {
  .text-truncate-anchor,
  .table-links .url-cell .view-url { max-width: clamp(120px, 45vw, 420px); }
  .table-links .url-cell .small.text-muted { max-width: clamp(120px, 42vw, 380px); }
}
@media (max-width: 576px) {
  .text-truncate-anchor,
  .table-links .url-cell .view-url { max-width: clamp(100px, 58vw, 340px); }
  .table-links .url-cell .small.text-muted { max-width: clamp(100px, 56vw, 320px); }
}

/* Icon button sizing adjustments inside table actions */
.table-links td.text-end .icon-btn { margin-left: .25rem; }
.table-links td.text-end .icon-btn:first-child { margin-left: 0; }

/* ===== UI tweaks for links table and adder ===== */
/* Anchor: truncate hard to 15 characters */
.table-links .text-truncate-anchor {
  /* override previous clamp width */
  max-width: 15ch !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: middle;
}

/* Full-row fill: apply background color to every cell on hover and striped rows */
.table-links.table-hover tbody tr:hover > * { background-color: rgba(255,255,255,.05) !important; }
:root[data-theme="light"] .table-links.table-hover tbody tr:hover > * { background-color: rgba(0,0,0,.04) !important; }
.table-links.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,.03) !important; }
:root[data-theme="light"] .table-links.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(0,0,0,.025) !important; }

/* Equal heights inside rows (edit mode inputs and actions) */
.table-links .form-control,
.table-links .form-select { height: 42px; padding-top: 8px; padding-bottom: 8px; }
.table-links .btn,
.table-links .icon-btn { height: 42px; display: inline-flex; align-items: center; justify-content: center; }

/* Link-adder row controls: same height */
.link-adder-card .card-body .row .form-control,
.link-adder-card .card-body .row .form-select { height: 42px; padding-top: 8px; padding-bottom: 8px; }
.link-adder-card .card-body .row .btn { height: 42px; display: inline-flex; align-items: center; justify-content: center; width: 100%; }

/* ===== Fix: table row fill and vertical alignment in links table ===== */
/* Vertically center content in all cells */
.table-links tbody td, .table-links thead th { vertical-align: middle; }

/* Actions cell should remain a table-cell (not flex) to let row background fill fully */
.table-links td.text-end {
  display: table-cell !important;
  text-align: right !important;
  vertical-align: middle !important;
  white-space: nowrap;
}
.table-links td.text-end > * { vertical-align: middle; margin-left: 6px; }
.table-links td.text-end > *:first-child { margin-left: 0; }

/* Normalize heights for buttons to align visually with one-line cells */
.table-links .btn.btn-sm, .table-links .icon-btn { height: 36px !important; }
.table-links .icon-btn { width: 36px !important; }
.table-links .btn-publish.btn-sm { height: 36px !important; min-height: 36px !important; }

/* ===== Promotion progress widget ===== */
.promotion-progress-visual {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent 30%);
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent 20%);
  border-radius: var(--radius-xs);
  padding: 12px;
  transition: border-color .2s ease, background .2s ease;
}
.promotion-progress-level + .promotion-progress-level { margin-top: 10px; }
.promotion-progress-meta { color: var(--muted); font-weight: 500; letter-spacing: .2px; }
.progress.progress-thin { height: 6px; background: color-mix(in srgb, var(--surface) 60%, transparent 40%); border-radius: 999px; overflow: hidden; }
.progress-thin .promotion-progress-bar { border-radius: 999px; transition: width .35s ease; }
.promotion-status-block.text-success .promotion-progress-bar { background: linear-gradient(90deg, var(--success), color-mix(in srgb, var(--success) 70%, #fff 20%)); }
.promotion-status-block.text-primary .promotion-progress-bar { background: linear-gradient(90deg, var(--primary), var(--accent)); }
.link-meta__id,
.link-meta__run {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--radius-pill, 999px);
  padding: 4px 8px;
}
.link-meta__run {
  border: 1px solid color-mix(in srgb, var(--info) 35%, transparent 65%);
}
.promotion-status-complete {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, var(--surface) 92%);
  border: 1px solid color-mix(in srgb, var(--success) 24%, transparent 76%);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(12, 56, 36, .22);
}
.promotion-status-complete .promotion-status-complete-text {
  color: color-mix(in srgb, var(--text) 92%, var(--success) 8%);
}
.promotion-status-complete i { font-size: 1rem; }

/* Promotion dashboard stats */
.promotion-stats-row { --promo-stat-bg: color-mix(in srgb, var(--surface) 82%, transparent 18%); }
.promotion-stat-card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  border-radius: var(--radius-sm);
  background: var(--promo-stat-bg);
  color: var(--text);
  overflow: hidden;
  box-shadow: 0 16px 30px rgba(9, 14, 28, .16);
}
.promotion-stat-card::after {
  content: '';
  position: absolute;
  inset: auto -30% -45% auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  filter: blur(45px);
  opacity: .6;
}
.promotion-stat-card__label { letter-spacing: .05em; }
.promotion-stat-card__value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.promotion-stat-card__meta { margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.promotion-stat-card__meta-value { font-weight: 600; color: var(--text); }
.promotion-stat-card--total::after { background: linear-gradient(135deg, rgba(59,130,246,.36), rgba(14,165,233,.18)); }
.promotion-stat-card--active { background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(59,130,246,.12)); }
.promotion-stat-card--active::after { background: linear-gradient(135deg, rgba(59,130,246,.4), rgba(139,92,246,.25)); }
.promotion-stat-card--done { background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(5,150,105,.12)); }
.promotion-stat-card--done::after { background: linear-gradient(135deg, rgba(16,185,129,.5), rgba(22,163,74,.32)); }
.promotion-stat-card--issues { background: linear-gradient(135deg, rgba(239,68,68,.18), rgba(241,196,15,.14)); }
.promotion-stat-card--issues::after { background: linear-gradient(135deg, rgba(239,68,68,.48), rgba(241,138,41,.3)); }
.promotion-stat-card--issues .promotion-stat-card__value { color: var(--danger); }
.promotion-stat-card--done .promotion-stat-card__value { color: var(--success); }
.promotion-stat-card--active .promotion-stat-card__value { color: var(--info, #38bdf8); }

/* Status toolbar legends */
.status-toolbar { margin-top: 4px; }
.status-toolbar .status-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.status-toolbar .status-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status-toolbar .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.status-toolbar .legend-dot-idle { background: color-mix(in srgb, var(--muted) 65%, transparent 35%); }
.status-toolbar .legend-dot-running { background: var(--info, #38bdf8); }
.status-toolbar .legend-dot-done { background: var(--success); }
.status-toolbar .legend-dot-cancelled { background: var(--danger); }

/* ===== Promotion report modal ===== */
.promotion-report-wrapper { color: var(--text); }
.promotion-report-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent 25%);
  background: color-mix(in srgb, var(--surface) 92%, transparent 8%);
  box-shadow: 0 16px 34px rgba(15,20,32,.18);
}
.promotion-report-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.promotion-report-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-xs);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent 25%);
  background: color-mix(in srgb, var(--surface) 90%, transparent 10%);
  color: var(--muted);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .02em;
  transition: all .2s ease;
}
.promotion-report-tab i { font-size: .95rem; opacity: .8; }
.promotion-report-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--primary) 30%, transparent 70%); }
.promotion-report-tab.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 65%, transparent 35%);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
  box-shadow: 0 10px 24px rgba(32,68,166,.26);
}
.promotion-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.promotion-report-actions .dropdown-menu { min-width: 180px; }
.promotion-report-actions .dropdown-menu {
  z-index: 2600; /* above navbar and modal content */
  background: linear-gradient(145deg, rgba(15,23,42,.97), rgba(30,41,59,.96));
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 22px 48px -24px rgba(7,17,39,.85), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px) saturate(140%);
}
.promotion-report-actions .dropdown-item { font-size: .82rem; color: rgba(226,232,240,.98); }
.promotion-report-actions .dropdown-item:hover,
.promotion-report-actions .dropdown-item:focus {
  background: rgba(59,130,246,.28);
  color: #fff;
}
.promotion-report-actions .btn {
  border-color: color-mix(in srgb, var(--border) 75%, transparent 25%);
  background: color-mix(in srgb, var(--surface) 94%, transparent 6%);
}
.promotion-report-actions .btn:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent 55%);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface) 84%);
}
.promotion-report-overview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.promotion-report-hero {
  background: color-mix(in srgb, var(--surface) 94%, transparent 6%);
  box-shadow: 0 20px 40px rgba(15,20,32,.22);
  border-radius: var(--radius-sm);
}
.promotion-report-hero .card-body { padding: 24px; }
.promotion-report-hero .hero-title { font-weight: 600; }
.promotion-report-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.promotion-report-kv {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent 30%);
  font-size: .85rem;
}
.promotion-report-kv .kv-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-size: .68rem;
}
.promotion-report-kv .kv-value { font-weight: 600; color: var(--text); }
.link-emphasis { color: var(--accent); font-weight: 600; text-decoration: none; }
.link-emphasis:hover { text-decoration: underline; }
.promotion-report-metric-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.promotion-report-metric-card {
  position: relative;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent 35%);
  background: color-mix(in srgb, var(--surface) 90%, transparent 10%);
  box-shadow: 0 18px 36px rgba(15,20,32,.18);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.promotion-report-metric-card::after {
  content: '';
  position: absolute;
  inset: auto -40% -50% auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  opacity: .35;
  background: color-mix(in srgb, var(--accent) 25%, transparent 75%);
  transform: rotate(35deg);
}
.promotion-report-metric-card .metric-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 6px;
}
.promotion-report-metric-card .metric-value { font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--text); }
.promotion-report-metric-card .metric-sub { margin-top: 8px; font-size: .76rem; color: var(--muted); letter-spacing: .02em; }
.promotion-report-metric-card.is-empty { opacity: .65; }
.promotion-report-metric-card.metric-level1 {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent 45%);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
}
.promotion-report-metric-card.metric-level1::after { background: color-mix(in srgb, var(--primary) 50%, transparent 50%); }
.promotion-report-metric-card.metric-level2 {
  border-color: color-mix(in srgb, var(--success) 55%, transparent 45%);
  background: color-mix(in srgb, var(--success) 18%, var(--surface) 82%);
}
.promotion-report-metric-card.metric-level2::after { background: color-mix(in srgb, var(--success) 50%, transparent 50%); }
.promotion-report-metric-card.metric-level3 {
  border-color: color-mix(in srgb, var(--warning) 60%, transparent 40%);
  background: color-mix(in srgb, var(--warning) 20%, var(--surface) 80%);
}
.promotion-report-metric-card.metric-level3::after { background: color-mix(in srgb, var(--warning) 55%, transparent 45%); }
.promotion-report-metric-card.metric-crowd {
  border-color: color-mix(in srgb, var(--info, #38bdf8) 55%, transparent 45%);
  background: color-mix(in srgb, var(--info, #38bdf8) 20%, var(--surface) 80%);
}
.promotion-report-metric-card.metric-crowd::after { background: color-mix(in srgb, var(--info, #38bdf8) 55%, transparent 45%); }
.promotion-report-metric-card:hover { transform: translateY(-2px); box-shadow: 0 24px 42px rgba(15,20,32,.28); }
.promotion-report-ratio {
  background: color-mix(in srgb, var(--surface) 94%, transparent 6%);
  box-shadow: 0 18px 38px rgba(15,20,32,.2);
  border-radius: var(--radius-sm);
}
.promotion-report-ratio .card-body { padding: 22px 24px; }
.promotion-report-ratio-legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.promotion-report-ratio-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--muted);
  letter-spacing: .02em;
}
.promotion-report-ratio-legend-item .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 45%, transparent 55%);
}
.promotion-report-ratio-legend-item .legend-value { font-weight: 600; color: var(--text); }
.promotion-report-ratio-legend-item.metric-level1 .legend-dot { background: color-mix(in srgb, var(--primary) 60%, transparent 40%); }
.promotion-report-ratio-legend-item.metric-level2 .legend-dot { background: color-mix(in srgb, var(--success) 60%, transparent 40%); }
.promotion-report-ratio-legend-item.metric-level3 .legend-dot { background: color-mix(in srgb, var(--warning) 65%, transparent 35%); }
.promotion-report-ratio-legend-item.metric-crowd .legend-dot { background: color-mix(in srgb, var(--info, #38bdf8) 65%, transparent 35%); }
.promotion-report-ratio-bar {
  display: flex;
  min-height: 52px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent 30%);
  background: color-mix(in srgb, var(--surface) 92%, transparent 8%);
}
.promotion-report-ratio-segment {
  position: relative;
  flex: 0 0 var(--segment-width, 25%);
  flex-grow: var(--segment-grow, 1);
  min-width: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.92);
  font-size: .78rem;
}
.promotion-report-ratio-segment .segment-label { font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.promotion-report-ratio-segment .segment-value { font-weight: 600; opacity: .92; }
.promotion-report-ratio-segment + .promotion-report-ratio-segment { border-left: 1px solid rgba(255,255,255,.25); }
.promotion-report-ratio-segment.metric-level1 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 82%, #0f1324 18%), color-mix(in srgb, var(--primary) 65%, #0f1324 35%));
}
.promotion-report-ratio-segment.metric-level2 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--success) 80%, #0f1324 20%), color-mix(in srgb, var(--success) 60%, #0f1324 40%));
}
.promotion-report-ratio-segment.metric-level3 {
  background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 78%, #0f1324 22%), color-mix(in srgb, var(--warning) 58%, #0f1324 42%));
}
.promotion-report-ratio-segment.metric-crowd {
  background: linear-gradient(135deg, color-mix(in srgb, var(--info, #38bdf8) 80%, #0f1324 20%), color-mix(in srgb, var(--info, #38bdf8) 58%, #0f1324 42%));
}
.promotion-report-flow {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.promotion-flow-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.promotion-flow-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.promotion-flow-header .title {
  font-weight: 600;
  font-size: .9rem;
}
.promotion-flow-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 64px;
}
.promotion-flow-card {
  border-radius: var(--radius-xs);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent 25%);
  background: color-mix(in srgb, var(--surface) 85%, transparent 15%);
  padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
  min-height: 84px;
}
.promotion-flow-card.is-clickable { cursor: pointer; }
.promotion-flow-card.is-clickable:hover {
  border-color: color-mix(in srgb, var(--primary) 70%, transparent 30%);
  box-shadow: 0 8px 22px rgba(15,20,32,.18);
  transform: translateY(-1px);
}
.promotion-flow-card.is-active {
  border-color: color-mix(in srgb, var(--primary) 60%, transparent 40%);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface) 84%);
  box-shadow: 0 12px 28px rgba(15,20,32,.22);
}
.promotion-flow-card .card-title {
  font-size: .84rem;
  font-weight: 600;
  color: var(--text);
}
.promotion-flow-card .card-link {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
  font-size: .78rem;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
}
.promotion-flow-card .card-link:hover { text-decoration: underline; }
.promotion-flow-card .card-meta {
  margin-top: 4px;
  font-size: .75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
}
.promotion-flow-subgroup {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.promotion-flow-subgroup + .promotion-flow-subgroup { margin-top: 6px; }
.promotion-flow-subgroup .subgroup-title {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .7rem;
  color: color-mix(in srgb, var(--muted) 80%, var(--text) 20%);
}
.promotion-flow-subgroup.is-hidden { display: none; }
.promotion-report-flow.has-filter .promotion-flow-card.level-2.is-dimmed { opacity: .35; }
.promotion-report-flow.has-filter .promotion-flow-card.level-3.is-dimmed,
.promotion-report-flow.has-filter .promotion-flow-card.level-crowd.is-dimmed { opacity: .35; }
.promotion-flow-card.level-crowd {
  border-style: dashed;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
}
.promotion-flow-empty {
  font-size: .78rem;
  color: var(--muted);
  padding: 12px 0;
}
.promotion-report-section-head { margin-bottom: 16px; }
.promotion-report-section-head .section-headline-row { align-items: center; }
.promotion-report-section-head .section-title { font-size: .95rem; letter-spacing: .02em; font-weight: 600; }
.promotion-report-section-head .section-count {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(148,163,184,.22), rgba(59,130,246,.18));
  border: 1px solid rgba(148,163,184,.25);
}
.promotion-report-section-head .section-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(59,130,246,.18), rgba(148,163,184,.08));
  display: grid;
  place-items: center;
  color: rgba(226,232,240,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 24px rgba(15,23,42,.35);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.promotion-report-section .section-description { font-size: .78rem; color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%); }
.promotion-report-section .section-kicker { letter-spacing: .22em; color: color-mix(in srgb, var(--muted) 80%, var(--text) 20%); }
.promotion-report-section[data-report-anchor] { scroll-margin-top: 96px; }
.promotion-report-table-card {
  position: relative;
  padding: 18px 20px;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(15,23,42,.78), rgba(2,6,23,.84));
  border: 1px solid rgba(59,130,246,.18);
  box-shadow: 0 36px 100px -48px rgba(8, 21, 42, .65);
  overflow: hidden;
}
.promotion-report-table-card--empty {
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background: linear-gradient(150deg, rgba(30,41,59,.55), rgba(15,23,42,.72));
  border-radius: 20px;
  border: 1px dashed rgba(148,163,184,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}
.promotion-report-table-card .table { margin-bottom: 0; }
.promotion-report-table-card .table-responsive { margin: 0 -2px; }
.promotion-report-table .col-publication { min-width: 260px; }
.promotion-report-table .col-target { min-width: 240px; }
.promotion-report-table .col-anchor { min-width: 200px; }
.promotion-report-table .col-parent { min-width: 220px; }
.promotion-report-table .col-comment { min-width: 260px; }
.promotion-report-table .col-status { min-width: 180px; }
.promotion-report-table .cell-stack { display: flex; flex-direction: column; gap: 4px; }
.promotion-report-table .cell-stack > a { word-break: break-word; }
.promotion-report-table .cell-subtle { font-size: .72rem; color: var(--muted); }
.promotion-report-table .cell-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent 30%);
  color: color-mix(in srgb, var(--text) 80%, var(--muted) 20%);
}
.promotion-report-table .chip-neutral { background: color-mix(in srgb, var(--surface-2) 60%, var(--primary) 10%); color: var(--text); }
.promotion-report-table .cell-chip--network { background: color-mix(in srgb, var(--primary) 12%, var(--surface-2) 75%); color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%); }
.promotion-report-table .anchor-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(59,130,246,.16);
  color: rgba(226,232,240,.95);
  font-size: .78rem;
  letter-spacing: .01em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.promotion-report-table .cell-note { font-size: .72rem; line-height: 1.3; }
.promotion-report-table { --bs-table-bg: transparent; border-collapse: separate; border-spacing: 0 10px; }
.promotion-report-table thead th {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .7rem;
  color: color-mix(in srgb, var(--muted) 78%, var(--text) 22%);
  padding: 0.75rem 0.75rem 0.55rem;
  border: none;
  background: transparent;
}
.promotion-report-table tbody tr {
  background: color-mix(in srgb, var(--surface) 90%, rgba(15,23,42,.85) 10%);
  border: 1px solid rgba(148,163,184,.15);
  border-radius: 14px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.promotion-report-table tbody tr td {
  vertical-align: middle;
  font-size: .82rem;
  padding: 0.85rem;
  border-top: none;
  border-bottom: none;
}
.promotion-report-table tbody tr:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(8, 19, 43, .32);
  background: color-mix(in srgb, rgba(59,130,246,.16) 60%, rgba(15,23,42,.86) 40%);
}
.promotion-report-table tbody tr:first-child td:first-child { border-top-left-radius: 14px; }
.promotion-report-table tbody tr:first-child td:last-child { border-top-right-radius: 14px; }
.promotion-report-table tbody tr:last-child td:first-child { border-bottom-left-radius: 14px; }
.promotion-report-table tbody tr:last-child td:last-child { border-bottom-right-radius: 14px; }
.promotion-report-table .badge { font-weight: 600; letter-spacing: .3px; }
.promotion-report-crowd {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.promotion-report-crowd-item {
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent 25%);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 94%, transparent 6%);
  box-shadow: 0 6px 18px rgba(15,20,32,.08);
}
.promotion-report-crowd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.promotion-report-crowd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.promotion-report-crowd-badge {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28px;
}
.promotion-report-crowd-row {
  display: grid;
  grid-template-columns: minmax(150px, 190px) 1fr;
  gap: 12px;
  padding: 6px 0;
  font-size: .82rem;
  border-top: 1px dashed color-mix(in srgb, var(--border) 70%, transparent 30%);
}
.promotion-report-crowd-row:first-of-type {
  border-top: none;
  padding-top: 0;
}
.promotion-report-crowd-label {
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--muted) 80%, var(--text) 20%);
}
.promotion-report-crowd-value {
  color: var(--text);
  word-break: break-word;
}
.promotion-report-crowd-value a {
  color: var(--accent);
  text-decoration: none;
}
.promotion-report-crowd-value a:hover { text-decoration: underline; }
.promotion-report-crowd-row.crowd-message .promotion-report-crowd-value {
  line-height: 1.4;
}
.promotion-report-crowd-row.crowd-note .promotion-report-crowd-value {
  font-style: italic;
}
@media (max-width: 768px) {
  .promotion-report-crowd-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .promotion-report-crowd-label {
    font-size: .68rem;
  }
  .promotion-report-crowd-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}
.promotion-report-tabs { margin-bottom: 18px; }
.promotion-report-tablist { display: flex; gap: 10px; flex-wrap: wrap; }
.promotion-report-tablist .nav-link {
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent 25%);
  background: color-mix(in srgb, var(--surface) 90%, transparent 10%);
  color: color-mix(in srgb, var(--muted) 85%, var(--text) 15%);
  padding: 6px 18px;
  transition: all .2s ease;
}
.promotion-report-tablist .nav-link:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent 60%);
}
.promotion-report-tablist .nav-link.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(15,20,32,.24);
}
.promotion-report-tabcontent .tab-pane { padding-top: 12px; }
.promotion-report-overview-meta dl { row-gap: 6px; }
.promotion-report-overview-dl dt { font-weight: 600; }
.promotion-report-overview-card { display: flex; flex-direction: column; gap: 8px; min-height: 150px; }
.promotion-report-overview-metric { font-size: 2.2rem; font-weight: 600; line-height: 1.2; color: var(--text); }
.promotion-report-ratios { display: flex; flex-direction: column; gap: 12px; }
.promotion-report-ratio-list { display: flex; flex-direction: column; gap: 10px; }
.promotion-report-ratio-item .ratio-label { font-weight: 600; color: var(--text); }
.promotion-report-ratio-item .ratio-number { font-size: 1.1rem; font-weight: 600; margin-right: 6px; }
.promotion-report-ratio-item .ratio-detail { font-size: .82rem; }
.promotion-report-tree .accordion-button {
  font-weight: 600;
  background: color-mix(in srgb, var(--surface) 92%, transparent 8%);
  box-shadow: none;
}
.promotion-report-tree .accordion-button:not(.collapsed) {
  color: var(--text);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface) 86%);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 30%, transparent 70%);
}
.promotion-report-tree .accordion-body {
  background: color-mix(in srgb, var(--surface) 90%, transparent 10%);
  border-radius: var(--radius-xs);
}
.promotion-report-tree-level { display: flex; flex-direction: column; gap: 12px; }
.promotion-report-tree-level3 { gap: 10px; }
.promotion-report-tree-node {
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 80%, transparent 20%);
  padding-bottom: 10px;
}
.promotion-report-tree-node:last-child { border-bottom: none; }
.promotion-report-tree-node-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .85rem;
}
.promotion-report-tree-node-head a { color: var(--accent); text-decoration: none; }
.promotion-report-tree-node-head a:hover { text-decoration: underline; }
.promotion-report-tree-level3 .promotion-report-tree-node-head { font-size: .8rem; }
.promotion-report-tree-meta { font-size: .82rem; }

@media (max-width: 768px) {
  .promotion-report-panel { padding: 16px; }
  .promotion-report-toolbar .btn-group { width: 100%; justify-content: stretch; }
  .promotion-report-toolbar .btn-group .btn { flex: 1 1 auto; }
}

/* =================== Project Creation Overlay =================== */
body.project-create-loading { overflow: hidden; }

.project-create-overlay {
  position: fixed;
  inset: 0;
  z-index: 3600;
  backdrop-filter: blur(28px) saturate(145%);
  background: linear-gradient(145deg, rgba(15,23,42,.86), rgba(15,23,42,.72));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 64px);
  transition: opacity .24s ease, visibility .24s ease;
}

.project-create-overlay.d-none { opacity: 0; visibility: hidden; pointer-events: none; }
.project-create-overlay.is-active { opacity: 1; visibility: visible; }

.project-create-overlay__panel {
  width: min(520px, 100%);
  background: rgba(17, 24, 39, 0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 26px;
  box-shadow: 0 40px 90px rgba(8, 12, 24, .55);
  padding: clamp(26px, 5vw, 42px);
  display: grid;
  gap: 24px;
}

.project-create-overlay__spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.project-create-overlay__spinner::after {
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(59,130,246,.35), transparent 70%);
  filter: blur(14px);
  opacity: .85;
  z-index: -1;
}

.project-create-overlay__content {
  text-align: center;
  display: grid;
  gap: 14px;
}

.project-create-overlay__headline h4 {
  margin-bottom: .35rem;
  font-weight: 600;
}

.project-create-overlay__headline span {
  font-size: .95rem;
  color: rgba(226,232,240,.82);
}

.project-create-overlay__tip {
  font-size: 1rem;
  color: rgba(226,232,240,.92);
  min-height: 2.6em;
}

.project-create-overlay__progress {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
  position: relative;
}

.project-create-overlay__progress-bar {
  display: block;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, rgba(59,130,246,.25), rgba(59,130,246,.75), rgba(59,130,246,.25));
  animation: projectCreateOverlayProgress 2.2s ease-in-out infinite;
}

@keyframes projectCreateOverlayProgress {
  0% { transform: translateX(-110%); }
  50% { transform: translateX(15%); }
  100% { transform: translateX(110%); }
}

.project-create-overlay__footer {
  text-align: center;
  color: rgba(203,213,225,.78);
  font-size: .92rem;
}

@media (prefers-reduced-motion: reduce) {
  .project-create-overlay__progress-bar {
    animation: none;
    transform: translateX(0);
  }
}

:root[data-theme="light"] .project-create-overlay__panel {
  background: rgba(255,255,255,0.82);
  color: #0f172a;
}

:root[data-theme="light"] .project-create-overlay {
  background: linear-gradient(145deg, rgba(226,232,240,.88), rgba(191,219,254,.72));
}

:root[data-theme="light"] .project-create-overlay__tip {
  color: #1e293b;
}

:root[data-theme="light"] .project-create-overlay__progress {
  background: rgba(15,23,42,0.14);
}

:root[data-theme="light"] .project-create-overlay__progress-bar {
  background: linear-gradient(90deg, rgba(59,130,246,.35), rgba(59,130,246,.75), rgba(59,130,246,.35));
}

:root[data-theme="light"] .dashboard-hero-card {
  background: linear-gradient(135deg, color-mix(in srgb, #fff 96%, var(--surface) 4%), color-mix(in srgb, var(--surface-2) 55%, transparent 45%));
  box-shadow: 0 20px 40px rgba(15,20,32,.12);
}
:root[data-theme="light"] .dashboard-hero-card::after { opacity: .45; }
:root[data-theme="light"] .btn-gradient { color: #fff; box-shadow: 0 14px 28px rgba(59,130,246,.24); }
:root[data-theme="light"] .dashboard-metric-card {
  background: color-mix(in srgb, #fff 94%, var(--surface) 6%);
  box-shadow: 0 16px 32px rgba(15,20,32,.12);
}
:root[data-theme="light"] .dashboard-metric-card__label { color: color-mix(in srgb, var(--muted) 70%, var(--text) 30%); }
:root[data-theme="light"] .dashboard-project-card {
  background: color-mix(in srgb, #fff 94%, var(--surface) 6%);
  box-shadow: 0 24px 44px rgba(15,20,32,.12);
}
:root[data-theme="light"] .dashboard-project-card__media {
  background: color-mix(in srgb, #fff 94%, var(--surface) 6%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent 30%), 0 26px 48px rgba(15,20,32,.14);
}
:root[data-theme="light"] .dashboard-project-card__stat { background: color-mix(in srgb, #fff 88%, var(--surface-2) 12%); }
:root[data-theme="light"] .empty-state-card { background: color-mix(in srgb, #fff 94%, var(--surface) 6%); }
:root[data-theme="light"] .dashboard-project-card__domain {
  background: color-mix(in srgb, #fff 92%, var(--surface) 8%);
  border-color: color-mix(in srgb, var(--border) 60%, transparent 40%);
  box-shadow: 0 18px 32px rgba(15,20,32,.1);
}
:root[data-theme="light"] .project-hero__preview-frame {
  background: color-mix(in srgb, #fff 95%, var(--surface) 5%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent 30%), 0 26px 48px rgba(15,20,32,.16);
}
:root[data-theme="light"] .project-hero__domain {
  background: color-mix(in srgb, #fff 92%, var(--surface) 8%);
  border-color: color-mix(in srgb, var(--border) 60%, transparent 40%);
  box-shadow: 0 18px 32px rgba(15,20,32,.12);
}

/* Charts and overview cards (client/admin shared) */
.overview-card { background: rgba(17,24,39,.55); border-radius: 16px; border: 1px solid rgba(148,163,184,.18); box-shadow: 0 16px 40px rgba(8,12,24,.32); }
.overview-card .card-body { padding: 18px; }
.overview-card .card-title { font-weight: 700; letter-spacing: .02em; }
.chart-wrapper { position: relative; width: 100%; min-height: 200px; }
.chart-wrapper canvas { display: block; width: 100% !important; height: auto !important; }

/* ========== Financial Dashboard: Payment Instruction ========== */
.payment-instruction {
  position: relative;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(30,41,59,.68), rgba(15,23,42,.6));
  border: 1px solid rgba(148,163,184,.28);
  box-shadow: 0 26px 60px rgba(8,12,24,.35), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.payment-instruction__ribbon {
  position: absolute; inset: 0 auto auto 0; width: 100%; height: 6px; z-index: 1;
  background: linear-gradient(90deg, rgba(59,130,246,.85), rgba(14,165,233,.55));
  box-shadow: 0 8px 24px rgba(59,130,246,.25);
}
.payment-instruction__inner { padding: 16px 18px; }
.payment-instruction__title { color: #e5e7eb; }
.payment-instruction__icon {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 10px;
  background: rgba(59,130,246,.22); color: rgba(191,219,254,.92); border: 1px solid rgba(96,165,250,.32);
}
.payment-instruction__text { color: rgba(226,232,240,.9) !important; }
.payment-instruction__note { color: rgba(203,213,225,.85) !important; }

:root[data-theme="light"] .payment-instruction {
  background: color-mix(in srgb, #fff 92%, var(--surface) 8%);
  border-color: color-mix(in srgb, var(--border) 65%, transparent 35%);
}
:root[data-theme="light"] .payment-instruction__ribbon { background: linear-gradient(90deg, rgba(59,130,246,.95), rgba(14,165,233,.6)); }
:root[data-theme="light"] .payment-instruction__title { color: #0f172a; }
:root[data-theme="light"] .payment-instruction__text { color: #0f172a !important; }
:root[data-theme="light"] .payment-instruction__note { color: #334155 !important; }
:root[data-theme="light"] .project-hero__cta .btn-outline-light {
  background: color-mix(in srgb, #fff 90%, var(--surface) 10%);
  border-color: color-mix(in srgb, var(--border) 60%, transparent 40%);
  color: var(--text);
}
:root[data-theme="light"] .project-hero__cta .btn-outline-light:hover {
  background: color-mix(in srgb, var(--surface-2) 10%, #fff 90%);
  color: var(--primary);
}

:root[data-theme="light"] .promotion-progress-visual {
  background: color-mix(in srgb, var(--surface-2) 55%, #fff 45%);
  border-color: color-mix(in srgb, var(--border) 80%, transparent 20%);
}
:root[data-theme="light"] .promotion-report-panel {
  background: color-mix(in srgb, #fff 92%, var(--surface) 8%);
  box-shadow: 0 12px 26px rgba(15,20,32,.08);
}
:root[data-theme="light"] .promotion-flow-card {
  background: color-mix(in srgb, #fff 94%, var(--surface) 6%);
  border-color: color-mix(in srgb, var(--border) 60%, transparent 40%);
}
:root[data-theme="light"] .promotion-flow-card.is-active {
  background: color-mix(in srgb, var(--primary) 12%, #fff 88%);
}
:root[data-theme="light"] .promotion-flow-card.level-crowd {
  background: color-mix(in srgb, var(--accent) 14%, #fff 86%);
}
:root[data-theme="light"] .promotion-status-complete {
  background: color-mix(in srgb, #d1fae5 60%, #fff 40%);
  border-color: color-mix(in srgb, var(--success) 35%, transparent 65%);
  box-shadow: 0 6px 16px rgba(12, 56, 36, .12);
}
:root[data-theme="light"] .promotion-status-complete .promotion-status-complete-text {
  color: color-mix(in srgb, var(--text) 85%, var(--success) 15%);
}

/* Admin ▸ Transactions Table */
.table-transactions tbody tr {
  border-color: rgba(148, 163, 184, 0.08);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.table-transactions tbody tr:hover {
  background-color: rgba(148, 163, 184, 0.05);
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.3);
}

.table-transactions tbody tr.manual-row {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.12), rgba(15, 23, 42, 0.12));
  border-left: 3px solid rgba(56, 189, 248, 0.6);
}

.table-transactions tbody tr.manual-row:hover {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.18));
}

.table-transactions .status-badge {
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  font-size: .75rem;
  line-height: 1;
  padding: .45rem .75rem;
  border-radius: 999px;
  box-shadow: 0 0 0 rgba(15, 23, 42, 0);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.table-transactions .status-badge:hover,
.table-transactions .status-badge:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.25);
}

.table-transactions .status-badge:focus-visible {
  outline: none;
}

.table-transactions .status-badge.bg-warning {
  color: #1f2a37;
}

.table-transactions td .text-muted {
  color: rgba(148, 163, 184, 0.8) !important;
}

/* Client ▸ Notification settings */
.notification-settings-card {
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 24px 44px -32px rgba(15, 23, 42, 0.8);
}

.notification-settings-card .section-header {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.88), rgba(15, 23, 42, 0.68));
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px 18px 0 0;
  padding: 18px 24px;
}

.notification-settings-form {
  padding: 6px 6px 18px;
}

.notification-settings-form .text-uppercase {
  letter-spacing: 0.18em;
}

.notification-settings-form .notification-toggle {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(15, 23, 42, 0.32));
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.notification-settings-form .notification-toggle:hover,
.notification-settings-form .notification-toggle:focus-within {
  border-color: rgba(96, 165, 250, 0.65);
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(15, 23, 42, 0.36));
  box-shadow: 0 16px 32px -24px rgba(59, 130, 246, 0.65);
}

.notification-settings-form .notification-toggle .form-check-input {
  flex-shrink: 0;
  width: 52px;
  height: 26px;
  margin-top: 4px;
  margin-left: 4px;
  background-color: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.45);
  transition: background-color 0.2s ease, border-color 0.2s ease;
  position: relative;
  cursor: pointer;
}

.notification-settings-form .notification-toggle .form-check-input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(226, 232, 240, 0.95), rgba(148, 163, 184, 0.7));
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}

.notification-settings-form .notification-toggle .form-check-input:checked {
  background: linear-gradient(135deg, rgba(30, 64, 175, 0.8), rgba(56, 189, 248, 0.9));
  border-color: rgba(59, 130, 246, 0.85);
  box-shadow: inset 0 2px 6px rgba(14, 116, 144, 0.3);
}

.notification-settings-form .notification-toggle .form-check-input:checked::after {
  transform: translateX(24px);
  background: linear-gradient(135deg, #e0f2fe, #f8fafc);
}

.telegram-code-wrapper {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(30, 41, 59, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.telegram-code-wrapper input.telegram-code-input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  color: #f1f5f9;
  font-family: "Fira Code", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  padding: 0.75rem 3.5rem 0.75rem 1rem;
}

.telegram-code-wrapper input.telegram-code-input::placeholder {
  color: rgba(226, 232, 240, 0.35);
}

.telegram-code-wrapper input.telegram-code-input:focus {
  outline: none;
}

.telegram-copy-btn {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
  border: none;
  background: rgba(96, 165, 250, 0.14);
  color: #e0f2fe;
  border-radius: 8px;
  padding: 0.35rem 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.telegram-copy-btn:hover,
.telegram-copy-btn:focus {
  background: rgba(59, 130, 246, 0.45);
  color: #fff;
}

.telegram-copy-btn:active {
  background: rgba(37, 99, 235, 0.55);
}

.telegram-copy-btn.copied {
  background: rgba(34, 197, 94, 0.35);
  color: #dcfce7;
}

.telegram-copy-btn i {
  font-size: 0.9rem;
}

.telegram-copy-btn.copy-error {
  background: rgba(239, 68, 68, 0.38);
  color: #fee2e2;
}

.notification-settings-form .notification-toggle .form-check-label {
  color: rgba(226, 232, 240, 0.94);
  font-size: 0.92rem;
}

.notification-settings-form .notification-toggle .form-check-label .text-muted {
  color: rgba(148, 163, 184, 0.75) !important;
}

.notification-settings-form .notification-toggle .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.35);
}

.notification-settings-form .row > [class*="col-"] {
  display: flex;
}

.notification-settings-form .notification-toggle .form-check-label span.fw-semibold {
  font-size: 1rem;
}

.notification-settings-form .notification-toggle .form-check-label span.small {
  line-height: 1.4;
}

/* ==========================================
   NEW LANDING PAGE - STARRY NIGHT DESIGN
   ========================================== */

/* Container */
.landing-container-new {
  max-width: 100% !important;
  padding: 0 !important;
  overflow-x: hidden;
}

/* Beta Banner */
.new-beta-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(59, 130, 246, 0.9));
  backdrop-filter: blur(10px);
  padding: 10px 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.beta-pulse {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.beta-content {
  text-align: center;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.beta-label {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
  font-weight: 700;
  font-size: 11px;
}

/* Global Page Background - Fixed for entire page */
.landing-container-new::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background: 
    radial-gradient(ellipse at 20% 20%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, #0a0e27 0%, #1a1f3a 50%, #0f172a 100%);
  pointer-events: none;
}

/* Hero Section - Starry Background */
.new-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px 60px;
  overflow: hidden;
  background: transparent;
}

.hero-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-background > * {
  pointer-events: none;
}

/* Starry Sky Background with Animations */
.stars-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at top, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at bottom, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
  animation: aurora 20s ease-in-out infinite;
}

@keyframes aurora {
  0%, 100% {
    filter: hue-rotate(0deg) brightness(1);
  }
  50% {
    filter: hue-rotate(20deg) brightness(1.1);
  }
}

/* Stars Layers */
.stars-bg::before,
.stars-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  animation: stars-move 100s linear infinite;
}

/* Bright Stars Layer */
.stars-bg::before {
  background-image: 
    radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1px),
    radial-gradient(circle, rgba(96, 165, 250, 0.8) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(167, 139, 250, 0.7) 1px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 0.8px, transparent 0.8px),
    radial-gradient(circle, rgba(96, 165, 250, 0.5) 1px, transparent 1px);
  background-size: 250px 250px, 300px 300px, 200px 200px, 350px 350px, 180px 180px;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px, 200px 50px;
  animation: stars-move 100s linear infinite;
}

@keyframes stars-move {
  from { transform: translateY(0); }
  to { transform: translateY(200px); }
}

.stars-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(10, 14, 39, 0.8) 100%);
  pointer-events: none;
}

/* Twinkling Stars Animation */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.stars-bg::before {
  animation: stars-move 100s linear infinite, twinkle 3s ease-in-out infinite;
}

/* Shooting Stars/Comets - Improved */
.comet {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.1) 10%,
    rgba(255, 255, 255, 0.9) 90%,
    rgba(96, 165, 250, 0.8) 100%
  );
  border-radius: 50%;
  filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.6));
  animation: comet-fly 3s linear infinite;
  opacity: 0;
  transform-origin: right center;
}

.comet::before {
  content: '';
  position: absolute;
  right: -2px;
  top: -1.5px;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 1) 0%, 
    rgba(96, 165, 250, 0.8) 40%,
    transparent 70%
  );
  border-radius: 50%;
  box-shadow: 
    0 0 8px rgba(255, 255, 255, 0.9),
    0 0 15px rgba(96, 165, 250, 0.7),
    0 0 20px rgba(167, 139, 250, 0.5);
}

.comet::after {
  content: '';
  position: absolute;
  right: 0;
  top: -0.5px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent 0%,
    rgba(255, 255, 255, 0.05) 20%,
    rgba(255, 255, 255, 0.2) 60%,
    rgba(96, 165, 250, 0.3) 100%
  );
  filter: blur(1px);
}

@keyframes comet-fly {
  0% {
    transform: translateX(0) translateY(0) rotate(-45deg);
    opacity: 0;
  }
  5% {
    opacity: 0.8;
  }
  95% {
    opacity: 0.6;
  }
  100% {
    transform: translateX(-1200px) translateY(600px) rotate(-45deg);
    opacity: 0;
  }
}

/* Individual comet delays and positions - Natural spacing */
.comet:nth-child(1) {
  top: 5%;
  right: -50px;
  width: 100px;
  animation-delay: 1s;
  animation-duration: 4s;
}

.comet:nth-child(2) {
  top: 20%;
  right: 15%;
  width: 80px;
  animation-delay: 3.5s;
  animation-duration: 3.5s;
}

.comet:nth-child(3) {
  top: 40%;
  right: -100px;
  width: 120px;
  animation-delay: 6s;
  animation-duration: 4.5s;
}

.comet:nth-child(4) {
  top: 65%;
  right: 25%;
  width: 90px;
  animation-delay: 8.5s;
  animation-duration: 3.8s;
}

.comet:nth-child(5) {
  top: 80%;
  right: 5%;
  width: 70px;
  animation-delay: 11s;
  animation-duration: 3.2s;
}

/* Glowing Particles */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(96, 165, 250, 0.6));
  border-radius: 50%;
  opacity: 0;
  animation: particle-float 8s ease-in-out infinite;
  filter: blur(1px);
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.8);
}

@keyframes particle-float {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-200px) translateX(100px);
    opacity: 0;
  }
}

.particle:nth-child(1) { left: 10%; bottom: 0; animation-delay: 0s; }
.particle:nth-child(2) { left: 25%; bottom: 0; animation-delay: 2s; }
.particle:nth-child(3) { left: 50%; bottom: 0; animation-delay: 4s; }
.particle:nth-child(4) { left: 70%; bottom: 0; animation-delay: 6s; }
.particle:nth-child(5) { left: 85%; bottom: 0; animation-delay: 8s; }

/* Bright Pulsing Stars */
.bright-star {
  position: absolute;
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(96, 165, 250, 0.8), transparent);
  border-radius: 50%;
  animation: star-pulse 3s ease-in-out infinite;
  filter: blur(0.5px);
  box-shadow: 
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 20px rgba(96, 165, 250, 0.7),
    0 0 30px rgba(96, 165, 250, 0.5),
    0 0 40px rgba(167, 139, 250, 0.3);
}

.bright-star::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

.bright-star::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 20px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

@keyframes star-pulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  text-align: center;
}

/* Глобальные правила переноса текста для всех элементов героя и секций */
.new-hero *,
.new-section * {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.new-hero h1, .new-hero h2, .new-hero h3, .new-hero h4, .new-hero h5, .new-hero h6,
.new-section h1, .new-section h2, .new-section h3, .new-section h4, .new-section h5, .new-section h6 {
  hyphens: auto;
}

/* Hero Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 999px;
  color: #60a5fa;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(96, 165, 250, 0.2);
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.hero-badge i {
  font-size: 16px;
}

.hero-title {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #fff;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.title-line {
  display: block;
}

.title-highlight {
  background: linear-gradient(135deg, #60a5fa, #a78bfa, #f472b6);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: clamp(36px, 6.5vw, 68px);
  animation: gradient-shimmer 4s ease infinite;
  filter: drop-shadow(0 0 30px rgba(96, 165, 250, 0.4));
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

@keyframes gradient-shimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.hero-subtitle {
  font-size: clamp(14px, 2vw, 18px);
  color: rgba(226, 232, 240, 0.85);
  margin-bottom: 35px;
  line-height: 1.6;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hero-subtitle strong {
  color: #60a5fa;
  font-weight: 600;
}

/* Hero Stats */
.hero-stats {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  margin-bottom: 35px;
  flex-wrap: wrap;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.stat-item {
  text-align: center;
  padding: 25px 20px;
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 16px;
  flex: 1;
  min-width: 160px;
  transition: all 0.3s ease;
}

.stat-item:hover {
  border-color: rgba(96, 165, 250, 0.4);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(96, 165, 250, 0.2);
}

.stat-icon {
  font-size: 28px;
  color: #60a5fa;
  margin-bottom: 12px;
  opacity: 0.8;
}

.stat-number {
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
}

.stat-label {
  font-size: clamp(11px, 1.8vw, 13px);
  color: rgba(226, 232, 240, 0.85);
  font-weight: 600;
  margin-bottom: 4px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
  hyphens: auto;
}

.stat-desc {
  font-size: clamp(10px, 1.5vw, 11px);
  color: rgba(226, 232, 240, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
  hyphens: auto;
}

.stat-divider {
  font-size: 24px;
  color: rgba(167, 139, 250, 0.5);
  font-weight: 600;
  align-self: center;
}

/* Hero Features */
.hero-features {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
  margin-bottom: 35px;
}

.hero-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(30, 41, 59, 0.3);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 999px;
  font-size: clamp(11px, 1.8vw, 13px);
  color: rgba(226, 232, 240, 0.8);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
}

.hero-feature:hover {
  border-color: rgba(96, 165, 250, 0.4);
  background: rgba(30, 41, 59, 0.5);
  transform: translateY(-2px);
}

.hero-feature i {
  font-size: 16px;
  color: #60a5fa;
}

/* Modern Buttons */
.hero-cta {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.btn-modern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: clamp(13px, 2vw, 15px);
  font-weight: 600;
  border-radius: 10px;
  border: 2px solid;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
  line-height: 1.4;
}

.btn-modern-primary {
  background: linear-gradient(135deg, #60a5fa, #3b82f6);
  border-color: #60a5fa;
  color: #fff;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.25);
}

.btn-modern-primary:hover {
  box-shadow: 0 6px 16px rgba(96, 165, 250, 0.35);
  color: #fff;
}

.btn-modern-outline {
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(10px);
  border-color: rgba(96, 165, 250, 0.4);
  color: #60a5fa;
}

.btn-modern-outline:hover {
  background: rgba(96, 165, 250, 0.1);
  border-color: #60a5fa;
  color: #60a5fa;
}

.btn-modern i {
  font-size: 18px;
}

.btn-modern-large {
  padding: 16px 36px;
  font-size: 16px;
}

.hero-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(11px, 1.8vw, 13px);
  color: rgba(226, 232, 240, 0.5);
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
}

.hero-note i {
  color: #60a5fa;
}

/* Bonus Banner (high-contrast warm palette) */
.bonus-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px auto 12px;
  padding: 16px 18px 16px 20px;
  border: 1px solid rgba(245, 158, 11, 0.45); /* amber-500 */
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(249, 115, 22, 0.16)); /* amber -> orange */
  color: #fff;
  max-width: 1000px;
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.18);
  overflow: hidden;
}

.bonus-banner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: linear-gradient(180deg, #f59e0b, #f97316);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.45);
}

.bonus-banner__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.5);
  color: #f59e0b;
  flex: 0 0 auto;
}

.bonus-banner__icon i { font-size: 22px; }

.bonus-banner__content { 
  flex: 1 1 auto; 
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.bonus-banner__title {
  font-weight: 800;
  font-size: clamp(14px, 2.2vw, 16px);
  color: #fff;
  margin-bottom: 2px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.bonus-banner__subtitle {
  font-size: clamp(12px, 1.8vw, 13px);
  color: rgba(255, 255, 255, 0.85);
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
}

.bonus-banner__actions { flex: 0 0 auto; }
.bonus-banner .btn-modern { padding: 10px 16px; }

/* Amber button for bonus CTA */
.btn-modern-amber {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  border-color: #f59e0b;
  color: #111827;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}
.btn-modern-amber:hover {
  box-shadow: 0 6px 18px rgba(249, 115, 22, 0.5);
  color: #111827;
}

/* Compact amber bonus chip */
.bonus-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: center;
}
.bonus-chip-amber {
  background: rgba(251, 191, 36, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.45);
  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.2), 0 4px 10px rgba(249, 115, 22, 0.15);
}
.bonus-chip i { font-size: 14px; }

/* Nav-level tiny chip next to Register */
.nav-bonus-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #111827;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  vertical-align: middle;
}

@media (max-width: 600px) {
  .bonus-banner { flex-wrap: wrap; text-align: left; padding: 14px 16px; }
  .bonus-banner__actions { width: 100%; display: flex; justify-content: flex-start; margin-top: 10px; }
  .bonus-banner__title { font-size: 14px; }
  .bonus-banner__subtitle { font-size: 12px; line-height: 1.5; }
  
  .btn-modern {
    padding: 10px 20px;
    font-size: 13px;
    gap: 6px;
    width: 100%;
    justify-content: center;
  }
  
  .btn-modern i { font-size: 16px; }
  
  .hero-features {
    gap: 12px;
  }
  
  .hero-feature {
    padding: 6px 12px;
    font-size: 11px;
    gap: 6px;
  }
  
  .hero-feature i { font-size: 14px; }
  
  .stat-label {
    font-size: 11px;
  }
  
  .stat-desc {
    font-size: 9px;
  }
  
  .hero-cta {
    flex-direction: column;
    gap: 10px;
  }
  
  .hero-note {
    font-size: 11px;
    text-align: center;
  }
}

/* Sections */
.new-section {
  position: relative;
  padding: 60px 20px;
  background: transparent;
}

.new-section:nth-child(even) {
  background: transparent;
}

.section-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-container-narrow {
  max-width: 900px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 40px;
}

.section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  margin-bottom: 12px;
  color: #fff;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.section-subtitle {
  font-size: clamp(14px, 1.8vw, 17px);
  color: rgba(226, 232, 240, 0.6);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Value Grid */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 35px;
}

.value-card {
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 16px;
  padding: 30px 25px;
  text-align: center;
  transition: all 0.3s ease;
}

.value-card:hover {
  transform: translateY(-3px);
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 8px 24px rgba(96, 165, 250, 0.15);
}

.value-card-accent {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(168, 85, 247, 0.08));
  border-color: rgba(167, 139, 250, 0.25);
}

.value-card-accent:hover {
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.2);
}

.value-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(167, 139, 250, 0.2));
  border-radius: 16px;
  font-size: 28px;
  color: #60a5fa;
}

.value-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.value-card p {
  font-size: 14px;
  color: rgba(226, 232, 240, 0.7);
  line-height: 1.5;
  margin-bottom: 15px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.value-badge {
  display: inline-block;
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  color: #60a5fa;
  font-weight: 600;
}

.value-badge-accent {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.25);
  color: #a78bfa;
}

/* Cascade Grid - 3 Columns */
.cascade-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.cascade-card {
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 16px;
  padding: 25px 20px;
  transition: all 0.3s ease;
}

.cascade-card:hover {
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 6px 20px rgba(96, 165, 250, 0.15);
}

.cascade-card-highlight {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(168, 85, 247, 0.1));
  border-color: rgba(167, 139, 250, 0.25);
}

.cascade-card-highlight:hover {
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 6px 20px rgba(167, 139, 250, 0.2);
}

.cascade-badge {
  display: inline-block;
  padding: 5px 14px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(167, 139, 250, 0.2));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}

.cascade-badge-highlight {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.3), rgba(244, 114, 182, 0.3));
  color: #a78bfa;
}

.cascade-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}

.cascade-visual {
  margin-bottom: 15px;
}

.cascade-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cascade-image:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(96, 165, 250, 0.3);
}

.image-placeholder-compact {
  background: rgba(15, 23, 42, 0.5);
  border: 1px dashed rgba(96, 165, 250, 0.2);
  border-radius: 12px;
  padding: 30px 15px;
  text-align: center;
  color: rgba(226, 232, 240, 0.4);
}

.image-placeholder-compact i {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
  color: rgba(96, 165, 250, 0.3);
}

.image-placeholder-compact p {
  margin: 0;
  font-size: 12px;
  font-style: italic;
}

.cascade-features {
  list-style: none;
  padding: 0;
  margin: 0 0 15px 0;
}

.cascade-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.75);
}

.cascade-features i {
  color: #60a5fa;
  font-size: 14px;
  flex-shrink: 0;
}

.cascade-math {
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid #60a5fa;
  padding: 10px 12px;
  border-radius: 6px;
  color: #60a5fa;
  font-size: 14px;
  font-weight: 600;
}

.cascade-result-compact {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 12px;
  padding: 20px 25px;
}

/* Networks Quality Section */
.networks-section .section-header {
  margin-bottom: 45px;
}

.networks-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.network-stat-card {
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 18px;
  padding: 28px 22px;
  text-align: center;
  transition: all 0.3s ease;
}

.network-stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow: 0 10px 28px rgba(96, 165, 250, 0.18);
}

.network-stat-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(167, 139, 250, 0.2));
  border-radius: 14px;
  font-size: 26px;
  color: #60a5fa;
}

.network-stat-number {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  color: #60a5fa;
  margin-bottom: 8px;
}

.network-stat-label {
  font-size: 13px;
  color: rgba(226, 232, 240, 0.7);
  font-weight: 500;
  line-height: 1.3;
}

.networks-examples {
  margin-bottom: 35px;
}

.examples-title {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 25px;
}

.examples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.example-network-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 14px;
  padding: 20px 18px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.example-network-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.05), rgba(167, 139, 250, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.example-network-card:hover {
  border-color: rgba(96, 165, 250, 0.3);
  transform: translateY(-2px);
}

.example-network-card:hover::before {
  opacity: 1;
}

.example-dr {
  display: inline-block;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(167, 139, 250, 0.2));
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 10px;
}

.example-name {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
  position: relative;
  z-index: 1;
}

.example-desc {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.65);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

.networks-report-note {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-left: 4px solid #60a5fa;
  border-radius: 12px;
  padding: 22px 26px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 30px;
}

.networks-report-note i {
  font-size: 28px;
  color: #60a5fa;
  flex-shrink: 0;
  margin-top: 2px;
}

.networks-report-note p {
  margin: 0;
  font-size: 14px;
  color: rgba(226, 232, 240, 0.85);
  line-height: 1.6;
}

.networks-report-note strong {
  color: #60a5fa;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: left;
}

.cascade-result-compact i {
  font-size: 32px;
  color: #60a5fa;
  flex-shrink: 0;
}

.cascade-result-compact p {
  font-size: 15px;
  color: rgba(226, 232, 240, 0.85);
  margin: 0;
  line-height: 1.5;
}

/* Comparison Compact */
.comparison-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.comparison-col {
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 16px;
  padding: 30px 25px;
}

.comparison-col-best {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(168, 85, 247, 0.1));
  border: 2px solid rgba(167, 139, 250, 0.3);
  position: relative;
}

.best-label {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  color: #fff;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.comparison-col h3 {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
  text-align: center;
}

.price-big {
  font-size: 36px;
  font-weight: 900;
  color: #60a5fa;
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.price-big span {
  font-size: 13px;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.5);
}

.price-special {
  color: #a78bfa;
}

.comparison-col ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.comparison-col ul li {
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: rgba(226, 232, 240, 0.75);
  line-height: 1.4;
}

.comparison-col ul li i {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.comparison-col ul li.negative i {
  color: #ef4444;
}

.comparison-col ul li.positive i {
  color: #22c55e;
}

.total-price {
  text-align: center;
  padding: 15px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 10px;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.6);
}

.total-price strong {
  display: block;
  font-size: 24px;
  color: #60a5fa;
  margin-top: 4px;
}

.total-special {
  background: rgba(167, 139, 250, 0.12);
}

.total-special strong {
  color: #a78bfa;
}

.savings-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  border-radius: 12px;
  padding: 18px 25px;
  margin-bottom: 30px;
  text-align: center;
}

.savings-block i {
  font-size: 32px;
  color: #22c55e;
}

.savings-block p {
  font-size: 16px;
  color: rgba(226, 232, 240, 0.85);
  margin: 0;
}

.savings-block strong {
  color: #22c55e;
  font-weight: 700;
}

/* Timeline Compact */
.timeline-compact {
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
}

.timeline-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(167, 139, 250, 0.2));
  border-radius: 50%;
  font-size: 32px;
  color: #60a5fa;
}

.timeline-compact h3 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.timeline-compact p {
  font-size: 15px;
  color: rgba(226, 232, 240, 0.75);
  line-height: 1.6;
  margin-bottom: 25px;
}

.timeline-steps-compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.timeline-step-compact {
  text-align: center;
}

.step-num {
  display: inline-block;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(167, 139, 250, 0.2));
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #60a5fa;
  margin-bottom: 6px;
}

.timeline-step-compact p {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.6);
  margin: 0;
}

.timeline-steps-compact > i {
  font-size: 20px;
  color: rgba(167, 139, 250, 0.4);
}

/* Features Grid Compact */
.features-grid-compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.feature-compact {
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 14px;
  padding: 25px 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.feature-compact:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 6px 18px rgba(96, 165, 250, 0.12);
}

.feature-compact i {
  font-size: 32px;
  color: #60a5fa;
  margin-bottom: 12px;
  display: block;
}

.feature-compact h3 {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}

.feature-compact p {
  font-size: 13px;
  color: rgba(226, 232, 240, 0.65);
  margin: 0;
}

/* Start Steps Compact */
.start-steps-compact {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 35px;
  flex-wrap: wrap;
}

.start-step-compact {
  text-align: center;
  max-width: 200px;
}

.step-circle-compact {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 6px 18px rgba(96, 165, 250, 0.25);
}

.start-step-compact h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.start-step-compact p {
  font-size: 13px;
  color: rgba(226, 232, 240, 0.65);
  margin: 0;
}

/* FAQ Compact */
.faq-compact {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item-compact {
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 165, 250, 0.15);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item-compact[open] {
  border-color: rgba(96, 165, 250, 0.3);
}

.faq-item-compact summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  transition: all 0.3s ease;
}

.faq-item-compact summary::-webkit-details-marker {
  display: none;
}

.faq-item-compact summary:hover {
  background: rgba(59, 130, 246, 0.08);
}

.faq-item-compact summary > i:first-child {
  font-size: 20px;
  color: #60a5fa;
  flex-shrink: 0;
}

.faq-item-compact summary > span {
  flex: 1;
}

.faq-item-compact summary > i:last-child {
  font-size: 16px;
  color: rgba(96, 165, 250, 0.6);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-item-compact[open] summary > i:last-child {
  transform: rotate(180deg);
}

.faq-answer-compact {
  padding: 0 20px 18px 52px;
  color: rgba(226, 232, 240, 0.75);
  line-height: 1.6;
  font-size: 14px;
}

.faq-answer-compact p {
  margin: 0;
}

/* CTA Inline */
.cta-inline {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 30px;
}

/* Final CTA */
.final-cta-section {
  padding: 70px 20px;
}

.cta-box {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  background: rgba(30, 41, 59, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 20px;
  padding: 50px 30px;
}

.cta-badge-final {
  display: inline-block;
  padding: 6px 18px;
  background: linear-gradient(135deg, #a78bfa, #f472b6);
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cta-box h2 {
  font-size: clamp(28px, 5vw, 42px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 15px;
}

.cta-box > p {
  font-size: clamp(15px, 2vw, 18px);
  color: rgba(226, 232, 240, 0.8);
  line-height: 1.6;
  margin-bottom: 30px;
}

.cta-box strong {
  color: #60a5fa;
  font-weight: 700;
}

.cta-buttons-final {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.cta-note-final {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.5);
  margin: 0;
}

.cta-note-final i {
  color: #60a5fa;
}

/* Responsive */
@media (max-width: 768px) {
  .new-beta-banner {
    padding: 8px 15px;
  }
  
  .beta-content {
    font-size: 12px;
  }
  
  .new-hero {
    padding: 80px 15px 50px;
    min-height: 80vh;
  }
  
  .hero-stats {
    gap: 15px;
  }
  
  .stat-divider {
    display: none;
  }
  
  .new-section {
    padding: 45px 15px;
  }
  
  .value-grid,
  .cascade-grid-3,
  .features-grid-compact {
    grid-template-columns: 1fr;
  }
  
  .comparison-compact {
    grid-template-columns: 1fr;
  }
  
  .start-steps-compact {
    gap: 25px;
  }
  
  .timeline-steps-compact > i {
    display: none;
  }
  
  .cta-box {
    padding: 35px 20px;
  }
}

@media (max-width: 480px) {
  .hero-cta,
  .cta-inline,
  .cta-buttons-final {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-modern,
  .btn-modern-large {
    width: 100%;
    justify-content: center;
  }
}

/* Accessibility */
.btn-modern:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}

.faq-item-compact summary:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Responsive Adjustments */
@media (max-width: 768px) {
  .new-beta-banner {
    padding: 10px 15px;
  }
  
  .beta-pulse {
    left: 10px;
  }
  
  .beta-content {
    font-size: 12px;
  }
  
  .new-hero {
    padding: 20px 15px 50px;
  }
  
  .hero-badge {
    font-size: 11px;
    padding: 6px 14px;
  }
  
  .hero-stats {
    gap: 12px !important;
    flex-direction: column !important;
    max-width: 100% !important;
  }
  
  .stat-item {
    min-width: 100% !important;
    width: 100% !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 15px !important;
    row-gap: 4px !important;
    text-align: left !important;
    flex: none !important;
  }
  
  .stat-icon {
    grid-column: 1 !important;
    grid-row: 1 / 4 !important;
    font-size: 36px !important;
    margin-bottom: 0 !important;
    align-self: center !important;
  }
  
  .stat-number {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 32px !important;
    margin-bottom: 0 !important;
    align-self: end !important;
  }
  
  .stat-label {
    grid-column: 2 !important;
    grid-row: 2 !important;
    text-align: left !important;
    font-size: 13px !important;
  }
  
  .stat-desc {
    grid-column: 2 !important;
    grid-row: 3 !important;
    text-align: left !important;
    font-size: 10px !important;
  }
  
  .stat-divider {
    display: none !important;
  }
  
  .hero-features {
    gap: 10px;
  }
  
  .hero-feature {
    font-size: 11px;
    padding: 6px 12px;
  }
  
  .section-header {
    margin-bottom: 25px;
    padding: 0 15px;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px 12px !important;
    text-align: left !important;
  }
  
  .section-title {
    font-size: 22px !important;
    margin-bottom: 0 !important;
    grid-column: 1 !important;
    line-height: 1.2 !important;
  }
  
  .section-subtitle {
    font-size: 12px !important;
    margin-bottom: 0 !important;
    grid-column: 2 !important;
    align-self: center !important;
    line-height: 1.3 !important;
  }
  
  .section-header .mt-2 {
    grid-column: 1 / -1 !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }
  
  .bonus-chip {
    display: inline-flex !important;
    width: auto !important;
    max-width: 100% !important;
    justify-content: center !important;
    padding: 8px 14px !important;
    margin-bottom: 15px !important;
  }
  
  .new-section {
    padding: 30px 15px 40px !important;
  }
  
  .value-section {
    padding-top: 20px !important;
  }
  
  .value-grid,
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .comparison-table {
    grid-template-columns: 1fr;
  }
  
  .cascade-level {
    padding: 25px 20px;
  }
  
  .timeline-arrow {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-cta,
  .cta-buttons {
    flex-direction: column;
    width: 100%;
  }
  
  .btn-neon,
  .btn-neon-large {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================
   STYLES FOR FUTURE IMAGES
   ========================================== */

/* Value Infographic */
.value-infographic {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.value-infographic img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(96, 165, 250, 0.3);
  transition: transform 0.3s ease;
}

.value-infographic img:hover {
  transform: scale(1.02);
}

/* Cascade Visual Images */
.cascade-visual-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cascade-visual-image img {
  width: 100%;
  height: auto;
  max-width: 500px;
  border-radius: 12px;
  filter: drop-shadow(0 10px 30px rgba(96, 165, 250, 0.4));
  transition: all 0.3s ease;
}

.cascade-visual-image img:hover {
  transform: translateY(-5px);
  filter: drop-shadow(0 15px 40px rgba(96, 165, 250, 0.6));
}

/* Timeline Chart */
.timeline-chart {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.timeline-chart img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(96, 165, 250, 0.3);
}

/* Video Support */
.cascade-video {
  width: 100%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 15px 40px rgba(96, 165, 250, 0.4);
}

/* Loading Animation for Images */
.value-infographic img,
.cascade-visual-image img,
.timeline-chart img {
  opacity: 0;
  animation: fadeInImage 0.6s ease forwards;
}

@keyframes fadeInImage {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Images */
@media (max-width: 768px) {
  .value-infographic,
  .timeline-chart {
    padding: 10px;
  }
  
  .cascade-visual-image {
    padding: 10px;
  }
  
  .cascade-visual-image img {
    max-width: 100%;
  }
}

/* ==========================================
   ACCESSIBILITY IMPROVEMENTS
   ========================================== */

/* Focus visible styles for keyboard navigation */
.btn-neon:focus-visible {
  outline: 3px solid var(--neon-cyan);
  outline-offset: 3px;
}

.faq-item summary:focus-visible {
  outline: 2px solid var(--neon-blue);
  outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .hero-grid {
    animation: none;
  }
  
  .hero-glow,
  .cta-glow {
    animation: none;
  }
  
  .neon-text-3d {
    animation: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .new-section {
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .value-card,
  .cascade-level,
  .feature-card {
    border-width: 2px;
  }
}

/* Print styles */
@media print {
  .new-beta-banner,
  .hero-background,
  .cta-background {
    display: none !important;
  }
  
  .new-hero,
  .new-section {
    background: white !important;
    color: black !important;
  }
  
  .section-title,
  .hero-title,
  h3 {
    color: black !important;
    text-shadow: none !important;
  }
  
  .btn-neon {
    border: 2px solid black !important;
    color: black !important;
  }
}

/* Attention glow pulse for claim buttons (used in onboarding claim UI) */
.glow-pulse {
  width: 10px;
  height: 10px;
  box-shadow: 0 0 0 rgba(25, 135, 84, 0.7);
  animation: glowPulse 2s infinite;
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(25, 135, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0); }
}

.table-active-row {
  background: rgba(59, 130, 246, 0.06);
}

.table-running-row {
  background: rgba(13, 202, 240, 0.05);
}

.table-waiting-row {
  background: rgba(255, 193, 7, 0.08);
}