/* ═══════════════════════════════════════════════════════════
   SETTINGS PAGE — Cinematic redesign
   ═══════════════════════════════════════════════════════════ */

/* ── ROOT ───────────────────────────────────────────────── */
.stg-root {
  display:flex; flex-direction:column;
  flex:1; height:100%; min-height:0; overflow:hidden;
}

.stg-body {
  flex:1; min-height:0; display:flex; overflow:hidden;
}

/* ── SIDEBAR NAV ────────────────────────────────────────── */
.stg-nav {
  width:280px; min-width:280px;
  background:var(--bg-1);
  border-right:1px solid var(--b1);
  display:flex; flex-direction:column;
  overflow-y:auto; padding:var(--s2) 0;
  position:relative;
}
.stg-nav::after {
  content:''; position:absolute; top:0; right:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent,var(--accent-glow),transparent);
  opacity:.08; pointer-events:none;
}

/* User card */
.stg-user-card {
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--s4) var(--s4);
  margin-bottom:var(--s1);
}
.stg-user-av {
  width:48px; height:48px; border-radius:50%;
  background:var(--grad-subtle);
  border:2px solid var(--b2);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700; color:var(--t-accent);
  overflow:hidden; flex-shrink:0;
  box-shadow:var(--glow-sm);
}
.stg-user-info { overflow:hidden; }
.stg-user-name {
  font-size:15px; font-weight:700; letter-spacing:-.2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stg-user-sub { font-size:13px; color:var(--t3); margin-top:2px; }

.stg-nav-divider { height:1px; background:var(--b1); margin:var(--s2) var(--s3); }

/* Nav items */
.stg-nav-item {
  display:flex; align-items:center; gap:var(--s3);
  padding:12px var(--s4);
  cursor:pointer; border:none; background:none;
  width:100%; text-align:left;
  transition:all var(--t-fast);
  position:relative; border-radius:0;
}
.stg-nav-item:hover { background:var(--bg-hover); }
.stg-nav-item.active {
  background:var(--bg-active);
}
.stg-nav-item.active::before {
  content:''; position:absolute; left:0; top:6px; bottom:6px;
  width:3px; background:var(--item-color, var(--accent));
  border-radius:0 3px 3px 0;
  box-shadow:0 0 8px var(--item-color, var(--accent));
}
.stg-nav-item.active .stg-nav-icon {
  background:color-mix(in srgb, var(--item-color, var(--accent)) 15%, transparent);
  border-color:color-mix(in srgb, var(--item-color, var(--accent)) 30%, transparent);
  box-shadow:0 0 12px color-mix(in srgb, var(--item-color, var(--accent)) 20%, transparent);
}
.stg-nav-item.active .stg-nav-label { color:var(--t1); }

.stg-nav-item--danger:hover .stg-nav-label { color:var(--red); }
.stg-nav-item--danger:hover .stg-nav-icon {
  background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.25);
}

.stg-nav-icon {
  width:38px; height:38px; border-radius:var(--r-md); flex-shrink:0;
  background:var(--bg-glass-md);
  border:1px solid var(--b1);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; transition:all var(--t-mid);
}
.stg-nav-text { flex:1; overflow:hidden; }
.stg-nav-label {
  font-size:14px; font-weight:600; color:var(--t2);
  display:block; transition:color var(--t-fast);
}
.stg-nav-item:hover .stg-nav-label { color:var(--t1); }
.stg-nav-desc {
  font-size:12px; color:var(--t3); display:block; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stg-nav-arrow { color:var(--t3); font-size:16px; opacity:.5; }

/* ── CONTENT PANEL ──────────────────────────────────────── */
.stg-content {
  flex:1; overflow-y:auto;
  background:var(--bg-base);
}

.stg-section {
  max-width:640px; padding:var(--s5) var(--s5) var(--s7);
  display:flex; flex-direction:column; gap:var(--s4);
}

/* Section hero */
.stg-section-hero {
  display:flex; align-items:center; gap:var(--s3);
  margin-bottom:var(--s2);
}
.stg-hero-icon {
  width:52px; height:52px; border-radius:var(--r-xl); flex-shrink:0;
  border:1px solid;
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
}
.stg-section-title {
  font-size:24px; font-weight:900; letter-spacing:-.5px;
  margin-bottom:4px;
}
.stg-section-sub { font-size:14px; color:var(--t2); line-height:1.6; }

/* ── CARDS ──────────────────────────────────────────────── */
.stg-card {
  background:var(--bg-glass);
  border:1px solid var(--b1);
  border-radius:var(--r-2xl);
  overflow:hidden;
  backdrop-filter:blur(16px);
  position:relative;
}
.stg-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
}
.stg-card--info { border-color:rgba(124,58,237,.15); }

.stg-card-header {
  padding:var(--s2) var(--s4);
  font-size:11px; font-weight:700; color:var(--t3);
  text-transform:uppercase; letter-spacing:.8px;
  border-bottom:1px solid var(--b1);
  background:var(--bg-glass);
}

.stg-form { padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); }

.stg-form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }

.stg-save-row {
  display:flex; align-items:center; gap:var(--s3);
  padding-top:var(--s2);
}
.stg-save-status {
  font-size:13px; font-weight:600; color:var(--green);
  display:flex; align-items:center; gap:4px;
  animation:fadeIn .3s ease;
}

/* ── MEDIA UPLOAD (avatar + cover) ──────────────────────── */
.stg-media-row {
  display:flex; gap:var(--s4); padding:var(--s4);
  flex-wrap:wrap;
}
.stg-av-wrap { display:flex; gap:var(--s3); align-items:center; flex:1; min-width:200px; }

.stg-av-preview {
  width:72px; height:72px; border-radius:50%;
  background:var(--grad-subtle); border:2px solid var(--b2);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:700; color:var(--t-accent);
  overflow:hidden; flex-shrink:0;
  box-shadow:var(--glow-sm);
}
.stg-av-preview img { width:100%; height:100%; object-fit:cover; }

.stg-cover-preview {
  width:120px; height:60px; border-radius:var(--r-md);
  overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg,#1a0a3a,#2d1569);
  border:1px solid var(--b2); box-shadow:var(--shadow-sm);
}
.stg-cover-preview img { width:100%; height:100%; object-fit:cover; }
.stg-cover-default {
  width:100%; height:100%;
  background: radial-gradient(ellipse at 30% 60%, rgba(124,58,237,.5), transparent 60%),
              linear-gradient(135deg,#0f0a2a,#1a0a3a);
}

/* ── SOCIAL FIELDS ──────────────────────────────────────── */
.stg-social-field {
  display:flex; align-items:flex-end; gap:var(--s3);
  padding:0 var(--s4) var(--s3);
}
.stg-social-field:first-child { padding-top:var(--s3); }
.stg-social-icon {
  width:44px; height:44px; border-radius:var(--r-lg);
  border:1px solid; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; margin-bottom:2px;
}

/* ── SECURITY — password strength ──────────────────────── */
.stg-pass-strength {
  display:flex; align-items:center; gap:var(--s2);
}
.stg-pass-bar {
  flex:1; height:4px; background:var(--b2);
  border-radius:var(--r-full); overflow:hidden;
}
.stg-pass-fill {
  height:100%; border-radius:var(--r-full);
  transition:all var(--t-mid);
}
.stg-pass-label { font-size:12px; font-weight:600; white-space:nowrap; }

/* ── APPEARANCE — theme grid ─────────────────────────────  */
.stg-theme-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--s3); padding:var(--s4);
}
.stg-theme-card {
  border:2px solid var(--b1); border-radius:var(--r-xl);
  overflow:hidden; cursor:pointer;
  transition:all var(--t-spring);
}
.stg-theme-card:hover { border-color:var(--b3); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.stg-theme-card.selected {
  border-color:var(--accent);
  box-shadow:var(--glow-sm);
}

.stg-theme-preview {
  height:80px; position:relative; overflow:hidden;
}
.stg-theme-mockup {
  position:absolute; inset:8px;
  border-radius:var(--r-md); overflow:hidden;
  display:flex; background:rgba(0,0,0,.2);
  box-shadow:var(--shadow-sm);
}
.stg-mock-sidebar {
  width:30%; background:rgba(0,0,0,.25);
  border-right:1px solid rgba(255,255,255,.05);
}
.stg-mock-main {
  flex:1; padding:4px; display:flex;
  flex-direction:column; justify-content:flex-end; gap:2px;
}
.stg-mock-msg {
  height:5px; border-radius:99px;
}
.stg-mock-msg--in  { width:55%; background:rgba(255,255,255,.12); align-self:flex-start; }
.stg-mock-msg--out { width:40%; background:rgba(124,58,237,.5);  align-self:flex-end; }

.stg-theme-info {
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; border-top:1px solid var(--b1);
  background:var(--bg-glass);
}
.stg-theme-icon { font-size:16px; }
.stg-theme-label { font-size:13px; font-weight:700; color:var(--t1); }
.stg-theme-desc  { font-size:11px; color:var(--t3); margin-top:1px; }
.stg-theme-check {
  margin-left:auto; color:var(--accent-glow);
  font-size:14px; font-weight:700;
}

/* Radio button */
.stg-radio {
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--b2); flex-shrink:0;
  transition:all var(--t-mid);
  position:relative;
}
.stg-radio.active {
  border-color:var(--accent);
  background:var(--accent);
  box-shadow:var(--glow-sm);
}
.stg-radio.active::after {
  content:''; position:absolute; inset:3px;
  border-radius:50%; background:#fff;
}

/* ── ACCOUNT ────────────────────────────────────────────── */
.stg-badge-verified {
  font-size:11px; font-weight:700; color:var(--green);
  background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.2);
  padding:3px 8px; border-radius:var(--r-full);
  white-space:nowrap;
}

.stg-version {
  display:flex; align-items:center; gap:var(--s2);
  font-size:12px; color:var(--t3);
  padding:var(--s3) 0;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:900px) {
  .stg-nav  { width:240px; min-width:240px; }
  .stg-form-row { grid-template-columns:1fr; }
  .stg-theme-grid { grid-template-columns:1fr 1fr; }
}

@media(max-width:768px) {
  .stg-body { flex-direction:column; }
  .stg-nav  {
    width:100%; min-width:unset;
    border-right:none; border-bottom:1px solid var(--b1);
    flex-direction:row; overflow-x:auto; padding:0;
  }
  .stg-user-card { display:none; }
  .stg-nav-divider { width:1px; height:auto; margin:var(--s2) 0; }
  .stg-nav-item { padding:var(--s3); flex-direction:column; gap:4px; min-width:72px; }
  .stg-nav-item::before { display:none !important; }
  .stg-nav-text { display:none; }
  .stg-nav-arrow { display:none; }
  .stg-nav-icon { width:32px; height:32px; font-size:15px; }
  .stg-section { padding:var(--s3); }
  .stg-media-row { flex-direction:column; }
  .stg-theme-grid { grid-template-columns:1fr; }
}