/* MyInnerCircle Theme Polish (safe overlay) */

:root{
  /* Background: lighter violet gradient */
  --bg1:#130a2a;
  --bg2:#24124a;

  /* Cards: brighter than before */
  --card:#221245;
  --card2:#2b1657;

  /* Borders / glow */
  --border: rgba(192,132,252,.28);

  /* Typography */
  --text:#f5f3ff;
  --muted:#ddd6fe;

  /* Shadow: softer */
  --shadow: 0 16px 46px rgba(88,28,135,.28);

  /* Primary: more “lila” (less blue) */
  --primary:#a855f7;
  --primary2:#c084fc;

  --danger:#ef4444;
}

html, body { height:100%; }

body{
  background:
    radial-gradient(1000px 520px at 20% 0%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(900px 500px at 80% 0%, rgba(99,102,241,.16), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--text);
}

/* Layout container remains same width; improve overall feel */
.site-shell{ margin-top: 18px !important; }

/* Topbar becomes premium */
.site-topbar{
  background: rgba(17,24,39,.70) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(10px);
}

/* Ensure logo area still crisp */
.brand img{ filter: drop-shadow(0 10px 20px rgba(0,0,0,.35)); }

/* Make default cards premium */
.card{
  background: linear-gradient(180deg, rgba(17,28,51,.92), rgba(15,23,42,.92)) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
  color: var(--text);
}

/* Inputs */
input, textarea, select{
  background: rgba(255,255,255,.04) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
input::placeholder, textarea::placeholder{ color: rgba(229,231,235,.55) !important; }

/* Links */
a{ color: rgba(199,210,254,1); }
a:hover{ filter: brightness(1.05); }

/* Buttons: keep your existing classes but premium them */
.btn, .nav a{
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}
.btn.primary, .nav a.primary{
  background: linear-gradient(90deg, var(--primary), var(--primary2)) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.14) !important;
}
.btn.dark, .nav a.dark{
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.btn.light, .nav a.light{
  background: rgba(99,102,241,.12) !important;
  color: rgba(224,231,255,1) !important;
  border-color: rgba(99,102,241,.22) !important;
}
.btn.danger, .nav a.danger{
  background: linear-gradient(90deg, #ef4444, #fb7185) !important;
  color:#fff !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Badges */
.badge{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
}

/* Footer polish (no inline block vibe) */
.site-footer{
  margin: 22px 0;
  text-align:center;
  color: rgba(167,176,192,.85);
  font-size: 13px;
}
.site-footer a{
  color: rgba(199,210,254,.95);
  text-decoration:none;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.site-footer a:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
}

/* Mobile spacing / density */
@media (max-width: 720px){
  .site-shell{ padding: 0 12px !important; }
  .card{ border-radius: 16px !important; }
}

/* === UX_POLISH_MOBILE_V1 ===
   Mobile-first spacing, touch targets, cards/forms readability.
   Safe: only layout/spacing; avoids color theme overrides.
=== */

@media (max-width: 720px){

  /* Overall page spacing */
  .site-shell{
    margin: 14px auto !important;
    padding: 0 12px !important;
  }

  /* Header/nav card tighter but clean */
  .site-topbar{
    padding: 12px 12px !important;
    border-radius: 16px !important;
  }
  .site-topbar-inner{
    gap: 10px !important;
  }

  /* Brand/logo: keep centered & not oversized */
  .brand{
    justify-content:center !important;
  }
  .brand img{
    height: 44px !important;
    max-width: 240px !important;
  }

  /* Nav buttons: 2 columns, larger tap targets */
  .nav{
    width: 100% !important;
    justify-content:center !important;
    gap: 10px !important;
  }
  .nav a{
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 150px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  /* Cards: less cramped */
  .card{
    border-radius: 16px !important;
  }
  .card[style*="padding:28px"]{
    padding: 18px !important;
  }

  /* Headings: avoid huge line breaks */
  h1{
    font-size: 24px !important;
    line-height: 1.15 !important;
  }
  h2{ font-size: 20px !important; }
  h3{ font-size: 16px !important; }

  /* Forms: inputs full width, nicer spacing */
  form{
    gap: 10px;
  }
  input, select, textarea, button{
    font-size: 16px !important; /* prevents iOS zoom */
  }
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea{
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Tables: allow horizontal scroll instead of breaking layout */
  table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* === /UX_POLISH_MOBILE_V1 === */