:root {
  --panel: rgba(14, 18, 30, .82);
  --panel-strong: rgba(18, 23, 38, .96);
  --border-soft: rgba(255, 255, 255, .09);
  --text-soft: rgba(255, 255, 255, .68);
  --accent: #8b5cf6;
  --accent-2: #22d3ee;
  --danger: #ef4444;
}

.account-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:1rem; }
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-7{grid-column:span 7}
.span-6{grid-column:span 6}.span-5{grid-column:span 5}.span-4{grid-column:span 4}

.glass-card {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
  overflow: hidden;
}
.glass-card .inner { padding:1.25rem; }
.hero-card {
  position:relative; min-height:210px;
  background:
    radial-gradient(circle at 10% 10%, rgba(139,92,246,.45), transparent 40%),
    radial-gradient(circle at 90% 20%, rgba(34,211,238,.27), transparent 38%),
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(8,10,18,.98));
}
.hero-card::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,black,transparent);
}
.hero-content { position:relative; z-index:1; padding:2rem; }
.kicker { text-transform:uppercase; letter-spacing:.14em; font-weight:800; font-size:.72rem; color:#c4b5fd; }
.metric { padding:1.2rem; }
.metric-value { font-size:2rem; font-weight:900; letter-spacing:-.04em; }
.metric-label { color:var(--text-soft); font-size:.85rem; margin-top:.25rem; }

.profile-cover {
  height:180px;
  background:
    radial-gradient(circle at 25% 25%, color-mix(in srgb,var(--accent) 60%,transparent), transparent 32%),
    radial-gradient(circle at 80% 20%, color-mix(in srgb,var(--accent-2) 45%,transparent), transparent 30%),
    linear-gradient(135deg,#111827,#090b13);
}
.profile-head { display:flex; align-items:flex-end; gap:1rem; margin-top:-54px; padding:0 1.25rem 1.25rem; position:relative; z-index:2; }
.profile-avatar {
  width:108px; height:108px; border-radius:28px; object-fit:cover;
  border:5px solid #0b0e18; background:#111827; box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.avatar-fallback { display:grid; place-items:center; font-weight:900; font-size:2.25rem; }
.avatar-picker { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.avatar-picker input[type=file]{max-width:100%}

.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.field-full { grid-column:1/-1; }
.label-row { display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.help { color:var(--text-soft); font-size:.78rem; }

.download-toolbar { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.search-box { min-width:260px; flex:1; }
.download-card { display:flex; flex-direction:column; min-height:270px; }
.download-art {
  min-height:110px; display:flex; align-items:flex-end; padding:1rem;
  background:
    radial-gradient(circle at 20% 10%,rgba(139,92,246,.4),transparent 38%),
    linear-gradient(135deg,#151a2a,#0a0d16);
}
.download-card .inner { display:flex; flex-direction:column; flex:1; }
.download-card .actions { margin-top:auto; display:flex; gap:.65rem; }
.pill-row { display:flex; flex-wrap:wrap; gap:.45rem; }
.pill { border:1px solid var(--border-soft); padding:.3rem .58rem; border-radius:999px; font-size:.72rem; color:var(--text-soft); }

.setting-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; }
.setting-row + .setting-row { border-top:1px solid var(--border-soft); }
.switch { position:relative; width:48px; height:28px; flex:0 0 auto; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; inset:0; border-radius:999px; background:#30364a; cursor:pointer; transition:.2s; }
.slider::before { content:""; position:absolute; width:20px;height:20px;left:4px;top:4px;border-radius:50%;background:#fff;transition:.2s; }
.switch input:checked + .slider { background:var(--accent); }
.switch input:checked + .slider::before { transform:translateX(20px); }

.toast-wrap { position:fixed; right:1rem; bottom:1rem; display:grid; gap:.65rem; z-index:1000; }
.toast { min-width:260px; max-width:360px; padding:.9rem 1rem; border-radius:14px; background:#141827; border:1px solid var(--border-soft); box-shadow:0 16px 50px rgba(0,0,0,.4); }
.toast.success{border-color:rgba(34,197,94,.4)}.toast.error{border-color:rgba(239,68,68,.45)}

.skeleton { position:relative; overflow:hidden; background:rgba(255,255,255,.05); border-radius:10px; min-height:18px; }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent); animation:shimmer 1.25s infinite; }
@keyframes shimmer { to{transform:translateX(100%)} }

.danger-zone { border-color:rgba(239,68,68,.28); }
.danger-zone h3 { color:#fca5a5; }
.muted-box { background:rgba(255,255,255,.03); border:1px solid var(--border-soft); border-radius:16px; padding:1rem; }
.mobile-menu { display:none; }

@media (max-width: 980px) {
  .span-8,.span-7,.span-6,.span-5,.span-4 { grid-column:span 12; }
}
@media (max-width: 760px) {
  .field-grid{grid-template-columns:1fr}
  .profile-head{align-items:center;flex-direction:column;text-align:center;margin-top:-44px}
  .profile-avatar{width:92px;height:92px;border-radius:24px}
  .hero-content{padding:1.35rem}
  .search-box{min-width:100%}
}