:root{
  /* Light (white) base with neon purple accents */
  --bg-1: #ffffff;
  --bg-2: #faf8ff;
  --panel: #ffffff;
  --panel-2: #fbf9ff;
  --border: rgba(123,44,255,.18);
  --text: #0f1724;
  --muted: rgba(15,23,36,.6);
  --soft: rgba(15,23,36,.45);
  --violet-1: #7b2cff;
  --violet-2: #c88fff;
  --accent-glow: rgba(123,44,255,.12);
  --glass: rgba(255,255,255,.6);
}

/* Base page */
body{
  background: linear-gradient(180deg, var(--bg-2) 0%, var(--bg-1) 100%);
  color:var(--text);
}

/* Canvas background subtle on light */
canvas#bg{opacity:.06;filter:blur(2px)}

/* Gate panel - lighter, softer shadow */
.gate{
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--border);
  box-shadow:0 10px 40px rgba(15,23,36,.06);
}
.gate-logo-wrap{
  background:linear-gradient(135deg, rgba(123,44,255,.12), rgba(200,143,255,.06));
  box-shadow:0 14px 30px rgba(123,44,255,.06);
}
.logo-img{filter:none}

/* Headings */
.gate h1, .brand-title{color:var(--text)}
.gate p, .brand-subtitle{color:var(--muted)}

/* Make brand title pop with gradient text */
.brand-title{
  font-weight:800;
  font-size:30px;
  background:linear-gradient(90deg,var(--violet-1),var(--violet-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand-subtitle{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* Buttons */
.primary-btn, .open-btn{
  color:#fff;
  background:linear-gradient(90deg,var(--violet-1),var(--violet-2));
  box-shadow:0 10px 30px rgba(123,44,255,.18), 0 2px 6px rgba(15,23,36,.08);
  padding:12px 18px;
  border-radius:14px;
  transition:transform .18s ease, box-shadow .18s ease, filter .12s ease;
}
.primary-btn:hover{transform:translateY(-3px);box-shadow:0 18px 45px rgba(123,44,255,.22)}
.primary-btn:active{transform:translateY(-1px);filter:brightness(.98)}
.primary-btn:focus{outline:3px solid rgba(123,44,255,.12);outline-offset:3px}

.secondary-btn{
  color:var(--text);
  background:transparent;
  border:1px solid rgba(15,23,36,.06);
  padding:10px 14px;
  border-radius:12px;
}

/* Icon-style small buttons */
.small-btn{padding:8px 12px;border-radius:10px;color:var(--violet-1);background:transparent;border:none}
button.small-btn{color:var(--violet-1)}
a.small-btn{color:var(--violet-1);text-decoration:none}

/* Tabs */
.tab{color:rgba(15,23,36,.72);background:transparent;border:1px solid rgba(15,23,36,.03)}
.tab.active{color:#fff;background:linear-gradient(90deg,var(--violet-1),var(--violet-2));box-shadow:0 8px 30px var(--accent-glow)}

/* Micro-interactions & Animations */
:root{--motion-fast:120ms;--motion-medium:220ms;--motion-slow:360ms}

/* Lift effect for interactive list rows */
.group-row{
  transition:transform var(--motion-medium) cubic-bezier(.2,.9,.3,1), box-shadow var(--motion-medium), border-color var(--motion-medium);
  will-change:transform,box-shadow;
}
.group-row:hover{
  transform:translateY(-6px) scale(1.005);
  box-shadow:0 18px 36px rgba(15,23,36,.06);
  border-color:rgba(123,44,255,.12);
}

/* Clearer name hierarchy */
.name{font-weight:800;color:var(--text);font-size:14px;display:flex;align-items:center;gap:8px}
.name::before{
  content:'';width:4px;height:28px;border-radius:4px;display:inline-block;background:linear-gradient(180deg,var(--violet-1),var(--violet-2));box-shadow:0 6px 16px rgba(123,44,255,.14);flex:0 0 4px;margin-right:6px
}
.name .muted{color:var(--muted);font-weight:600;font-size:12px}

/* Badges (VIP / Verified) */
.badge, .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:14px;font-weight:800;font-size:12px}
.pill{background:linear-gradient(90deg, rgba(123,44,255,.08), rgba(200,143,255,.04));color:var(--text);border:1px solid rgba(123,44,255,.08);box-shadow:0 6px 18px rgba(123,44,255,.06)}
.badge.verified{background:linear-gradient(90deg, rgba(36,200,255,.12), rgba(123,255,220,.06));color:#04292e;border:1px solid rgba(36,200,255,.18);box-shadow:0 8px 28px rgba(36,200,255,.10);}
.badge.vip{background:linear-gradient(90deg, rgba(255,240,180,.18), rgba(255,200,110,.10));color:#2b1600;border:1px solid rgba(255,183,71,.24);box-shadow:0 8px 28px rgba(255,183,71,.08);}
.badge svg{width:14px;height:14px;display:block;flex:0 0 14px}
.badge span{display:inline-block;transform:translateY(0);}
.badge:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(123,44,255,.12)}

/* make verified more neon and VIP more premium */
.badge.verified{background-image:linear-gradient(90deg,#1ce1ff,#7be5c8);color:#04292e}
.badge.vip{background-image:linear-gradient(90deg,#ffd36b,#ffb347);color:#2b1600}

/* Shop buttons: icon + text, spacing and clearer primary */
.shop-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;font-weight:700}
.shop-btn svg{width:16px;height:16px;flex:0 0 16px}
.shop-btn.primary{background:linear-gradient(90deg,var(--violet-1),var(--violet-2));color:#fff;border:none;box-shadow:0 10px 30px rgba(123,44,255,.18)}
.shop-btn.secondary{background:linear-gradient(90deg, rgba(123,44,255,.06), rgba(200,143,255,.03));color:var(--text);border:1px solid rgba(123,44,255,.06)}
.shop-btn:disabled{opacity:.5;cursor:not-allowed}
.shop-buttons{display:flex;flex-direction:column;gap:8px;width:100%}

/* Ensure shop card layout looks grouped */
.shop-card{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:14px}
.shop-logo{width:100%;height:84px;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.shop-info{display:flex;flex-direction:column;gap:6px}

/* Shops grid responsiveness */
.shops-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:20px}
@media (max-width:900px){.shops-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}}
@media (max-width:560px){.shops-grid{grid-template-columns:1fr;gap:10px}}

/* Skeleton placeholders */
.skeleton{background:linear-gradient(90deg,#f6f6f8,#f0eef8,#f6f6f8);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:12px}
.skeleton.text{height:14px;width:60%;margin:8px 0;border-radius:6px}
.skeleton.avatar{width:48px;height:48px;border-radius:10px}
.skeleton.card{height:120px;padding:12px;display:flex;flex-direction:column;gap:10px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* View transitions */
.content{transition:opacity .28s ease, transform .28s ease}
.content.hidden{opacity:0;transform:translateY(6px)}

/* Button ripple */
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;pointer-events:none;background:rgba(255,255,255,.45)}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.btn-relative{position:relative;overflow:hidden}

/* Group stats separation */
.group-stats{color:var(--muted);font-size:12px}
.group-country{color:var(--soft);font-weight:700}

/* Button micro-interactions */
.primary-btn, .secondary-btn, .small-btn, .shop-btn, .favorite-btn{
  transition:transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
.primary-btn:hover{transform:translateY(-4px) scale(1.01)}
.secondary-btn:hover{transform:translateY(-2px);background:rgba(123,44,255,.04);border-color:var(--border)}
.small-btn:active, .primary-btn:active{transform:translateY(-1px) scale(.997)}

/* Favorite button with pop and glow */
.favorite-btn{transition:transform var(--motion-medium) cubic-bezier(.2,.9,.3,1), box-shadow var(--motion-medium);}
.favorite-btn:hover{transform:scale(1.06);box-shadow:0 8px 30px rgba(123,44,255,.12);color:#fff}
.favorite-btn.active{transform:scale(1.04);box-shadow:0 18px 48px rgba(123,44,255,.20);background:linear-gradient(90deg,var(--gold-1),var(--gold-2));color:#fff}

/* Shop button clarity */
.shop-btn{background:linear-gradient(90deg, rgba(123,44,255,.06), rgba(200,143,255,.03));border:1px solid rgba(123,44,255,.06);}
.shop-btn:hover{background:linear-gradient(90deg, rgba(123,44,255,.12), rgba(200,143,255,.06));transform:translateY(-3px)}

/* Focus-visible for accessibility */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:3px solid rgba(123,44,255,.14);
  outline-offset:3px;
}

/* Subtle animated underline for links */
.about-link, .shop-name, .group-row .name a{
  position:relative;overflow:visible;text-decoration:none
}
.about-link::after, .shop-name::after, .group-row .name a::after{
  content:'';position:absolute;left:0;bottom:-4px;height:2px;width:0;background:linear-gradient(90deg,var(--violet-1),var(--violet-2));transition:width var(--motion-medium) ease}
.about-link:hover::after, .shop-name:hover::after, .group-row .name a:hover::after{width:100%}

/* Gentle float for logos on hover */
.logo-img{transition:transform var(--motion-slow) ease, box-shadow var(--motion-medium) ease}
.logo-img:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 26px 60px rgba(123,44,255,.14)}

/* Logo intro and exit animations */
.logo-img{opacity:0}
.logo-img{animation:logoIntro .9s cubic-bezier(.2,.9,.3,1) both}
@keyframes logoIntro{
  0%{opacity:0;transform:scale(.6) rotate(0deg);filter:blur(4px)}
  60%{opacity:1;transform:scale(1.06) rotate(-2deg);filter:blur(0)}
  100%{opacity:1;transform:scale(1) rotate(0deg);filter:blur(0)}
}

.splash-exit .logo-img{animation:logoExit .7s ease forwards}
@keyframes logoExit{
  0%{opacity:1;transform:scale(1) rotate(0deg);filter:blur(0)}
  100%{opacity:0;transform:scale(0.6) rotate(-8deg);filter:blur(6px)}
}

/* Reduce visual clutter by softening borders */
section, .section-card, .table-wrap{border-color:rgba(15,23,36,.03)}

/* Inputs */
.search-input, .admin-grid input, .profile-card input, textarea, select{
  background: #fff;
  border:1px solid rgba(15,23,36,.06);
  color:var(--text);
  box-shadow: 0 6px 18px rgba(15,23,36,.04);
}
.search-input::placeholder{color:var(--soft)}
.search-input:focus{box-shadow:0 0 0 6px rgba(123,44,255,.06);border-color:var(--violet-1)}

/* Category chips */
.category-chip{background:transparent;color:var(--muted);border:1px solid rgba(15,23,36,.03)}
.category-chip.active{background:linear-gradient(90deg, rgba(123,44,255,.10), rgba(200,143,255,.06));color:var(--text);border-color:var(--border)}

/* Cards and rows */
.group-row, .card, .job-row, .profile-card, .shop-card{background:#fff;border:1px solid rgba(15,23,36,.04);color:var(--text)}
.group-row:hover{background:linear-gradient(135deg, rgba(123,44,255,.03), rgba(200,143,255,.01));box-shadow:0 8px 24px rgba(15,23,36,.04)}

.avatar{background:linear-gradient(135deg,var(--violet-1),var(--violet-2));color:#fff;box-shadow:0 6px 18px rgba(123,44,255,.10)}

/* Mini logo on light */
.mini-logo{background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.92));border-radius:14px;border:1px solid rgba(15,23,36,.04);box-shadow:0 6px 18px rgba(15,23,36,.06)}
.mini-logo img{filter:none}

/* Topbar improvements */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;margin-bottom:18px}
.brand{display:flex;flex-direction:column;gap:4px}


/* Bottom nav contrast */
.bottom-nav{background:#fff;border:1px solid rgba(15,23,36,.04);box-shadow:0 12px 30px rgba(15,23,36,.06)}
.nav-icon{color:rgba(15,23,36,.6)}
.nav-icon.active{color:#fff;background:linear-gradient(90deg,var(--violet-1),var(--violet-2))}

/* Toasts */
.toast{background:#fff;color:var(--text);border:1px solid rgba(15,23,36,.06);box-shadow:0 18px 40px rgba(15,23,36,.06)}

/* Small adjustments for contrast and spacing */
.section-title{color:var(--text)}
.section-subtitle{color:var(--muted)}
.table th{color:rgba(15,23,36,.6);background:transparent}

/* Pagination: tighter, numeric-friendly buttons */
.pagination{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:14px}
.pagination-btn{
  padding:6px 6px;
  min-width:34px;
  height:34px;
  width:34px;
  display:inline-grid;
  place-items:center;
  border-radius:8px;
  border:1px solid rgba(15,23,36,.06);
  background:transparent;
  color:var(--muted);
  font-weight:800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Segoe UI Mono', monospace;
  font-size:13px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.pagination-btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(15,23,36,.06)}
.pagination-btn:disabled{cursor:default;opacity:1;transform:none}
.pagination-btn.active, .pagination-btn[aria-current="page"]{
  background:linear-gradient(90deg,var(--violet-1),var(--violet-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 12px 36px rgba(123,44,255,.18);
}

@media (max-width:560px){
  .pagination-btn{min-width:30px;width:30px;height:30px;font-size:12px}
}

/* Featured communities */
.featured-section{margin:18px 0 8px}
.featured-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.featured-title{font-size:18px;font-weight:800;color:var(--text)}
.featured-header .small-btn{color:var(--violet-1);font-weight:700}
.featured-grid{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.featured-card{position:relative;min-width:220px;max-width:260px;background:linear-gradient(180deg,rgba(255,255,255,.02),#fff);border-radius:14px;padding:14px;border:1px solid rgba(15,23,36,.04);box-shadow:0 18px 40px rgba(15,23,36,.04);display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;transition:transform var(--motion-medium) cubic-bezier(.2,.9,.3,1),box-shadow var(--motion-medium),border-color var(--motion-medium)}
.featured-badge{position:absolute;right:12px;top:12px}
.featured-badge-inline{display:flex;justify-content:center;margin-top:8px}
.featured-badge-inline .badge{font-size:12px;padding:6px 10px;border-radius:12px}

/* Ensure admin action buttons are visible and contrasted */
.admin-row-actions .small-btn{color:var(--violet-1);background:transparent;border:none}
.admin-row .admin-meta small{color:var(--muted)}
.featured-logo{width:78px;height:78px;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,var(--violet-1),var(--violet-2));box-shadow:0 8px 30px rgba(123,44,255,.10);margin:0 auto}
.featured-desc{color:var(--muted);margin:6px 0 0;font-size:13px}

/* Hover lift + subtle neon glow for featured cards */
.featured-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 26px 60px rgba(123,44,255,.12);border-color:rgba(123,44,255,.12)}
.featured-card:active{transform:translateY(-4px) scale(1.01)}
.featured-card h3{margin:0;font-size:16px}
.featured-card p{margin:0;color:var(--muted);font-size:13px}
.featured-stats{display:flex;gap:10px;color:var(--muted);font-size:12px;align-items:center}
.featured-actions{display:flex;gap:8px;margin-top:6px}
.featured-card .open-btn{padding:8px 12px;border-radius:10px}

@media (max-width:560px){
  .featured-card{min-width:180px;padding:12px}
  .featured-logo{width:66px;height:66px}
}

/* Minimal intro splash showing only logo */
#splash{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  z-index:9999;
  transition:opacity .6s ease, visibility .6s ease;
}
#splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.gate{background:transparent;border:none;box-shadow:none;padding:0}
.gate-logo-wrap{width:260px;height:260px;border-radius:20px;background:linear-gradient(135deg, rgba(123,44,255,.18), rgba(200,143,255,.08));box-shadow:0 28px 64px rgba(123,44,255,.16)}
.gate h1,.gate p,.gate-actions,.gate-kicker{display:none}
.gate-logo-wrap .logo-img{width:220px;height:220px}

@media (max-width:560px){
  .gate{padding:20px}
}