/* StreamTools v7 — polished + responsive */
:root{ --st-primary:#7C3AED; --st-secondary:#2563EB; --st-bg:#0B1020; --st-text:#E5E7EB; }
*{box-sizing:border-box}
html, body { max-width: 100%; overflow-x: hidden; }
body{font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
.fw-800{font-weight:800}

/* Muted text tuned for dark */
.text-white-75{color: rgba(255,255,255,.75)!important}
.text-white-65{color: rgba(255,255,255,.65)!important}
.dashboard-shell .text-muted{ color: rgba(229,231,235,.7) !important; }

/* Homepage */
.st-gradient-bg{
  background: radial-gradient(1200px 700px at -10% -20%, #4318FF55, transparent), radial-gradient(900px 600px at 120% -10%, #22D3EE33, transparent), linear-gradient(180deg, #0B1020 0%, #0F172A 100%);
  color: #fff;
}
.bg-soft{ background:#F7F8FA; }
.navbar-brand .logo-dot{ display:inline-block; width:10px; height:10px; background:#22D3EE; border-radius:50%; margin-right:8px; box-shadow: 0 0 10px #22D3EE; }
.text-gradient{ background: linear-gradient(90deg, #22D3EE, #7C3AED); -webkit-background-clip:text; background-clip:text; color:transparent; }
.btn-glow{ box-shadow: 0 8px 30px rgba(34, 211, 238, .35); }
.btn-cta{ padding: .75rem 1.25rem; border-radius: 999px; }
.hero-card{ width: 100%; max-width: 520px; border-radius: 16px; background: rgba(255,255,255,.06); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.15); overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.hero-topbar{ padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.15); color:#cbd5e1; }
.hero-topbar .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.hero-topbar .dot.red{ background:#f87171 } .hero-topbar .dot.yellow{ background:#facc15 } .hero-topbar .dot.green{ background:#34d399 }
.hero-body{ padding: 16px; }
.alert-demo{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); padding: 10px 12px; border-radius: 12px; color:#fff; }
.hero-body .bar{ margin-top: 12px; }
.bar{ height: 10px; background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden; }
.fill{ height:10px; width:0; background: linear-gradient(90deg, #22D3EE, #7C3AED); animation: fill-progress 2s ease forwards; }
@keyframes fill-progress{ from{ width:10% } to{ width:65% } }
.fade-in-up{ animation: fadeInUp .7s ease both; }
.tilt-in{ animation: tiltIn .6s ease both; transform-origin: 80% 10%; }
.shimmer{ position:relative; overflow:hidden; }
.shimmer::after{ content:""; position:absolute; top:0; left:-50%; width:50%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); animation: shimmer 1.4s infinite; }
@keyframes shimmer{ 0%{ left:-50% } 100%{ left:110% } }
@keyframes fadeInUp{ from{ opacity:0; transform: translateY(12px) } to{ opacity:1; transform: translateY(0) } }
@keyframes tiltIn{ from{ opacity:0; transform: rotate(-2deg) scale(.98) } to{ opacity:1; transform: rotate(0) scale(1) } }

.card.feature{ background:#fff; border:0; border-radius: 16px; box-shadow:0 20px 60px rgba(2,6,23,.15); }
.card.feature .card-body i{ color: var(--st-primary); }
.lift{ transition: transform .2s ease, box-shadow .2s ease; }
.lift:hover{ transform: translateY(-4px); box-shadow:0 24px 60px rgba(0,0,0,.2) !important; }

/* Dashboard shell */
.dashboard-shell{ background: linear-gradient(180deg, #0F172A 0%, #111827 100%); }
.card-glass{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#e5e7eb; }
.card-glass .form-control,.card-glass .form-select{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); color:#e5e7eb }
.card-glass .form-control:focus,.card-glass .form-select:focus{ background: rgba(255,255,255,.12); color:#fff; box-shadow:none; border-color: rgba(255,255,255,.35); }
.card-glass .form-control::placeholder{ color: rgba(226,232,240,.7); }
.form-select-themed{ background-color: rgba(17,24,39,.98)!important; color:#e5e7eb!important; border-color: rgba(255,255,255,.2)!important; background-image:none!important; }

/* Always-on sidebar */
.st-sidebar{ position: fixed; left:0; top:0; bottom:0; width: 260px; background: rgba(255,255,255,.06); border-right: 1px solid rgba(255,255,255,.12); padding: 16px; color:#e5e7eb; z-index: 999; }
.st-sidebar .brand{ color:#fff; text-decoration:none; font-weight:700; display:block; margin-bottom:8px }
.st-sidebar .brand .logo-dot{ display:inline-block; width:10px; height:10px; background:#22D3EE; border-radius:50%; margin-right:8px; box-shadow: 0 0 10px #22D3EE; }
.st-sidebar .item{ display:flex; align-items:center; gap:10px; color:#e5e7eb; text-decoration:none; padding:8px 10px; border-radius:8px; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.st-sidebar .item:hover{ background: rgba(255,255,255,.08); }
.st-sidebar .sep{ height:1px; background: rgba(255,255,255,.12); margin:8px 0 }
.st-sidebar .impersonate{ position:absolute; bottom:10px; left:16px; right:16px; font-size:12px; opacity:.8 }
.st-sidebar .label{ display:inline }
@media (max-width: 991.98px){
  .st-sidebar{ width: 84px; }
  .st-sidebar .label{ display:none }
}
.st-content{ margin-left: 276px; color:#e5e7eb; }
@media (max-width: 991.98px){
  .st-content{ margin-left: 96px; }
}

/* Tables */
.table-dark{ --bs-table-bg: rgba(0,0,0,.25); --bs-table-striped-bg: rgba(255,255,255,.04); }

/* Buttons */
.btn-link{ color: #c7d2fe !important; text-decoration:none; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 6px 10px; }
.btn-link:hover{ color:#fff !important; background: rgba(255,255,255,.12); text-decoration:none; }
.btn-outline-light{ border-color: rgba(255,255,255,.35); color: #e5e7eb; }
.btn-outline-light:hover{ background:rgba(255,255,255,.15); color: #fff; }
.btn, .btn:hover, .btn:focus{ transition: all .15s ease; }
.btn-method{ background: rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.12); color:#111827; }
.btn-method.selected{ background: var(--accent, #7C3AED); color: #fff; border-color: transparent; }

/* Dropdowns */
.dropdown-menu{ background: rgba(17,24,39,.98) !important; border:1px solid rgba(255,255,255,.12); }
.dropdown-item{ color:#e5e7eb }
.dropdown-item:hover{ background: rgba(255,255,255,.08) }

/* Code blocks */
code{ white-space: nowrap; display:inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

/* Responsive iframes */
.donation-frame{ width: 100%; height: clamp(420px, 60vh, 720px); border:0; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25) }
.widget-frame{ width: 100%; height: 220px; border:0; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.25) }

/* Widget preview */
.preview-widget .wbox{ padding:10px 14px; background:var(--bg,#fff); color:var(--text,#0F172A); border:2px solid var(--border,#e5e7eb); border-radius:12px; box-shadow:0 12px 40px rgba(0,0,0,.18); display:inline-block; backdrop-filter: blur(6px); }
.ringed{ box-shadow: 0 0 0 2px rgba(34,211,238,.8); }

/* Accordion header */
.st-accordion{ background: rgba(255,255,255,.06); color:#e5e7eb; border-radius:10px; }
.st-accordion:not(.collapsed){ background: rgba(255,255,255,.12); }
.accordion-button:focus{ box-shadow:none; }
.accordion-button::after{ filter: invert(1) opacity(.8) }

/* Plan cards */
.plan-card{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#e5e7eb; }
.plan-card.active{ box-shadow:0 0 0 2px #22d3ee55 inset; }
.plan-features{ list-style:none; padding:0; margin: 8px 0 0 0; }
.plan-features li{ display:flex; align-items:center; gap:.5rem; margin:.25rem 0 }
.plan-features i{ color:#22D3EE }


/* v8: Dark metric cards and extra responsiveness tweaks */
.card-metric{ background: rgba(17,24,39,.85); border:1px solid rgba(255,255,255,.12); border-radius:14px; color:#e5e7eb; }
.card-metric .label{ color: rgba(229,231,235,.8); font-size:.9rem }
.card-metric .value{ font-weight:800; font-size:1.6rem; line-height:1.1 }
.card-metric .muted{ color: rgba(229,231,235,.6) }
.st-content{ padding-right: 16px; padding-bottom: 32px; }
.card, .card-glass, .card-metric{ max-width: 100%; overflow: hidden; }
.table-responsive{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
code{ display:inline-block; max-width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
@media (max-width: 1366px){
  .widget-frame{ height: 260px; }
}
/* v8: Payment method tiles */
.method-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); gap: 10px; }
.method-tile{ display:flex; align-items:center; gap:8px; border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:10px; background:#fff; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.method-tile:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.method-tile.selected{ outline:2px solid var(--accent, #7C3AED); border-color: transparent; }
.method-tile img{ width:28px; height:28px; object-fit:contain }
.method-tile span{ font-weight:600; color:#111827 }
/* v8: Widgets page dark panel look */
.accordion-item{ background: transparent; }
.accordion-body .form-label, .accordion-body .form-text { color: rgba(229,231,235,.85); }
.accordion-body .form-check-label { color: rgba(229,231,235,.85); }
.accordion-body input.form-control, .accordion-body .form-select { background: rgba(255,255,255,.08); color:#e5e7eb; border:1px solid rgba(255,255,255,.2) }
.accordion-body input.form-control::placeholder{ color: rgba(226,232,240,.7); }
/* Ensure no horizontal scroll on any tab */
body, html{ overflow-x:hidden }


/* v14: modern methods chips */
.method-grid-modern{ display:grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap:12px; }
.method-chip{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.15); cursor:pointer; user-select:none; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.method-chip:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.18); border-color: rgba(255,255,255,.28); }
.method-chip input{ display:none }
.method-chip .icon{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; }
.method-chip .icon img{ width:100%; height:100%; object-fit:contain; filter: drop-shadow(0 1px 0 rgba(0,0,0,.2)); }
.method-chip .text{ color:#E5E7EB; font-weight:600 }
.method-chip:has(input:checked){ outline:2px solid var(--accent, #7C3AED); background: rgba(124,58,237,.18); border-color: transparent; }


/* v17 global ui polish */
:root{ --st-accent: var(--accent, #7C3AED); }
.btn-primary{
  background: var(--st-accent)!important; border-color: var(--st-accent)!important; 
  box-shadow: 0 8px 18px rgba(124,58,237,.25);
  transition: filter .14s ease, background-color .14s ease;
}
.btn-primary:hover{ filter: brightness(1.06); background-color: var(--st-accent)!important; }
.form-check-input:checked{
  background-color: var(--st-accent); border-color: var(--st-accent);
  box-shadow: 0 0 0 .15rem rgba(124,58,237,.2);
}
.form-switch .form-check-input:checked{ background-color: var(--st-accent); border-color: var(--st-accent); }
.form-check-input:focus{ box-shadow: 0 0 0 .15rem rgba(124,58,237,.18) }
.badge-soft{ background: rgba(124,58,237,.1); color:#4c1d95; border:1px solid rgba(124,58,237,.15); border-radius:999px; padding:.25rem .6rem; font-weight:600 }