/* ============================================================
   ZenCord · Profile Studio (Discord-style)
   ============================================================ */
.zps-root {
  --zps-bg: #313338;
  --zps-panel: #2b2d31;
  --zps-panel-2: #232428;
  --zps-inset: #1e1f22;
  --zps-line: #3f4147;
  --zps-line-soft: #2f3136;
  --zps-text: #f2f3f5;
  --zps-muted: #b5bac1;
  --zps-blurple: #5865f2;
  color: var(--zps-text);
  font-family: "Inter", "gg sans", "Noto Sans", system-ui, sans-serif;
  background:
    radial-gradient(900px 380px at 8% -10%, rgba(88, 101, 242, .16), transparent 65%),
    radial-gradient(700px 360px at 100% 0%, rgba(168, 85, 247, .12), transparent 60%),
    linear-gradient(180deg, #2f3136 0%, #2b2d31 100%);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 18px;
  padding: 22px;
  margin: -10px;
  overflow: clip;
  position: relative;
}
.zps-root *, .zps-root *::before, .zps-root *::after { box-sizing: border-box; }

.zps-hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 2px 2px 20px;
}
.zps-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  color: #a5b4fc; font-size: 10px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 7px;
}
.zps-title {
  margin: 0;
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.08;
  background: linear-gradient(92deg, #ffffff 10%, #cdd3ff 48%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zps-subtitle { margin: 7px 0 0; color: var(--zps-muted); font-size: 12px; line-height: 1.55; max-width: 680px; }
.zps-hero-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex-shrink: 0; }
.zps-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(52, 211, 153, .28);
  background: rgba(16, 185, 129, .09); color: #6ee7b7; font-size: 9px; font-weight: 800; letter-spacing: .1em;
}
.zps-pill-soft { border-color: rgba(255,255,255,.1); background: rgba(255,255,255,.045); color: #c7c9ff; }
.zps-pill-dot { width: 5px; height: 5px; border-radius: 50%; background: #34d399; box-shadow: 0 0 9px #34d399; animation: zps-pulse 1.8s ease-in-out infinite; }

.zps-grid { display: grid; grid-template-columns: minmax(0, 1fr) 356px; gap: 20px; align-items: start; }
.zps-form { min-width: 0; }
.zps-preview-pane { position: sticky; top: 12px; min-width: 0; }

.zps-section {
  position: relative;
  background: linear-gradient(180deg, rgba(43, 45, 49, .98), rgba(35, 36, 40, .96));
  border: 1px solid var(--zps-line);
  border-radius: 14px;
  padding: 17px;
  margin-bottom: 13px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .18), inset 0 1px rgba(255, 255, 255, .025);
}
.zps-section-fx { border-color: rgba(139, 92, 246, .35); box-shadow: 0 12px 32px rgba(76, 29, 149, .12), inset 0 1px rgba(255, 255, 255, .03); }
.zps-section-head { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 15px; }
.zps-section-head h3 { margin: 0; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -.015em; display: flex; align-items: center; gap: 7px; }
.zps-section-head p { margin: 3px 0 0; color: var(--zps-muted); font-size: 11px; line-height: 1.45; }
.zps-section-icon {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #c7d2fe; background: linear-gradient(145deg, rgba(88,101,242,.24), rgba(88,101,242,.06));
  border: 1px solid rgba(129, 140, 248, .22);
}
.zps-section-icon-fx { color: #ddd6fe; background: linear-gradient(145deg, rgba(139,92,246,.3), rgba(34,211,238,.08)); border-color: rgba(167,139,250,.3); }
.zps-tag-live, .zps-tag-optional {
  font-size: 8px; letter-spacing: .1em; padding: 3px 6px; border-radius: 5px;
  background: linear-gradient(90deg, #8b5cf6, #6366f1); color: #fff;
}
.zps-tag-optional { background: rgba(255,255,255,.08); color: #aeb2b8; }

.zps-avatar-row { display: flex; align-items: center; gap: 18px; margin-bottom: 17px; }
.zps-avatar-preview-wrap { position: relative; flex-shrink: 0; }
.zps-avatar-preview {
  position: relative; width: 84px; height: 84px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, #4f46e5, #1e1b4b 68%);
  border: 4px solid #111214; box-shadow: 0 8px 22px rgba(0,0,0,.45);
  z-index: 1;
}
.zps-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.zps-avatar-letter { font-size: 30px; font-weight: 900; color: #eef2ff; }
.zps-online-dot {
  position: absolute; right: 1px; bottom: 1px; width: 17px; height: 17px;
  background: #23a55a; border: 4px solid #2b2d31; border-radius: 50%; z-index: 5;
}
.zps-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.zps-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; border-radius: 8px; padding: 8px 12px; color: #fff;
  font-family: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer;
  transition: transform .13s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.zps-btn:hover { transform: translateY(-1px); }
.zps-btn:active { transform: translateY(0) scale(.985); }
.zps-btn:disabled { opacity: .58; cursor: wait; }
.zps-btn-primary { background: var(--zps-blurple); box-shadow: 0 7px 18px rgba(88,101,242,.3); }
.zps-btn-primary:hover { background: #4752c4; }
.zps-btn-ghost { background: rgba(255,255,255,.055); color: #d8dbdf; border: 1px solid rgba(255,255,255,.08); }
.zps-btn-ghost:hover { background: rgba(255,255,255,.09); }
.zps-btn-glass { background: rgba(0,0,0,.48); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(8px); font-size: 10px; padding: 6px 9px; }
.zps-btn-danger { color: #fecdd3; border-color: rgba(244,63,94,.35); }
.zps-btn-small { padding: 6px 9px; font-size: 10px; }
.zps-btn-save.is-saved { background: #169c5b; box-shadow: 0 7px 18px rgba(35,165,90,.3); }
.zps-hidden { display: none !important; }

.zps-field { min-width: 0; margin-bottom: 13px; }
.zps-field:last-child { margin-bottom: 0; }
.zps-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 13px; }
.zps-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 6px; color: #dcdde0; font-size: 10.5px; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.zps-hint { color: #8f949c; font-size: 9px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.zps-input, .zps-textarea {
  width: 100%; background: var(--zps-inset); color: #f2f3f5;
  border: 1px solid #111214; border-radius: 8px; padding: 10px 11px;
  font-family: inherit; font-size: 12px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.zps-input::placeholder, .zps-textarea::placeholder { color: #777c85; }
.zps-input:focus, .zps-textarea:focus { border-color: var(--zps-blurple); box-shadow: 0 0 0 3px rgba(88,101,242,.18); }
.zps-textarea { resize: vertical; min-height: 86px; line-height: 1.5; }

.zps-banner-preview {
  position: relative; height: 94px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1);
  overflow: hidden; margin-bottom: 9px; background-color: #1e1f22;
}
.zps-banner-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 9px; background: linear-gradient(180deg, transparent 25%, rgba(0,0,0,.45)); }
.zps-inline { display: flex; align-items: center; gap: 9px; }
.zps-swatches { display: flex; gap: 5px; flex-shrink: 0; }
.zps-swatch {
  width: 25px; height: 25px; border-radius: 7px; border: 1px solid rgba(255,255,255,.13);
  cursor: pointer; font-size: 10px; color: #9da2aa; transition: transform .14s, border-color .14s;
}
.zps-swatch:hover { transform: translateY(-2px); }
.zps-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 2px rgba(88,101,242,.5); }

.zps-status-editor { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.zps-emoji-current { width: 39px; height: 39px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; background: var(--zps-inset); border: 1px solid #111214; border-radius: 9px; }
.zps-emoji-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.zps-emoji { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid transparent; background: rgba(255,255,255,.035); font-size: 15px; cursor: pointer; transition: background .13s, transform .13s; }
.zps-emoji:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }
.zps-emoji.is-active { background: rgba(88,101,242,.25); border-color: rgba(129,140,248,.55); box-shadow: 0 0 0 2px rgba(88,101,242,.12); }

.zps-theme-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-bottom: 11px; }
.zps-theme {
  display: flex; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.16);
  color: #c8cbd1; font-family: inherit; font-size: 9.5px; font-weight: 700; cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}
.zps-theme:hover { background: rgba(255,255,255,.055); }
.zps-theme.is-active { border-color: var(--tone, #818cf8); background: rgba(88,101,242,.13); color: #fff; }
.zps-theme-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.zps-color-row { display: flex; align-items: center; gap: 9px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.zps-color-field { display: flex; align-items: center; gap: 6px; color: #9ca1a9; font-size: 9.5px; font-weight: 700; }
.zps-color-field input { width: 26px; height: 26px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.zps-color-field input::-webkit-color-swatch-wrapper { padding: 0; }
.zps-color-field input::-webkit-color-swatch { border: 1px solid rgba(255,255,255,.18); border-radius: 7px; }
.zps-color-preview { width: 58px; height: 25px; margin-left: auto; border-radius: 7px; border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px rgba(255,255,255,.15); }

.zps-deco-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.zps-deco-option {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 8px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.065); background: rgba(0,0,0,.17);
  color: #b8bcc4; font-family: inherit; font-size: 9.5px; font-weight: 700; cursor: pointer;
  transition: border-color .14s, background .14s, transform .14s;
}
.zps-deco-option:hover { background: rgba(255,255,255,.05); transform: translateY(-1px); }
.zps-deco-option.is-active { border-color: rgba(129,140,248,.6); background: rgba(88,101,242,.13); color: #fff; }
.zps-deco-avatar { position: relative; width: 30px; height: 30px; flex-shrink: 0; }
.zps-deco-letter { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; background: radial-gradient(circle at 30% 25%, #6366f1, #1e1b4b); }
.zps-deco-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zps-selected-check {
  position: absolute; right: 4px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--zps-blurple); color: #fff; box-shadow: 0 0 0 2px rgba(88,101,242,.2);
  z-index: 4;
}

.zps-fx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.zps-fx-option {
  border: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.17); border-radius: 10px;
  padding: 6px; text-align: left; color: #d7d9dd; font-family: inherit; cursor: pointer;
  transition: border-color .14s, transform .14s, background .14s;
}
.zps-fx-option:hover { border-color: rgba(167,139,250,.4); transform: translateY(-1px); }
.zps-fx-option.is-active { border-color: rgba(167,139,250,.75); background: rgba(139,92,246,.12); box-shadow: 0 0 0 1px rgba(139,92,246,.14); }
.zps-fx-preview {
  position: relative; display: flex; align-items: center; justify-content: center;
  height: 54px; border-radius: 7px; overflow: hidden; background: #17181b;
  border: 1px solid rgba(255,255,255,.045);
}
.zps-fx-empty { display: flex; align-items: center; gap: 6px; color: #727780; font-size: 9.5px; font-weight: 700; }
.zps-fx-info { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 6px 3px 2px; }
.zps-fx-info strong { color: #f1f2f4; font-size: 10.5px; font-weight: 800; }
.zps-fx-info small { font-size: 7.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.zps-fx-note { display: flex; align-items: center; gap: 5px; margin: 11px 0 0; padding: 8px 9px; border-radius: 7px; background: rgba(139,92,246,.09); border: 1px solid rgba(139,92,246,.17); color: #a5a9b2; font-size: 10px; }
.zps-fx-note strong { color: #e9e5ff; }

.zps-nameplate-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.zps-nameplate {
  display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; border-radius: 8px;
  background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.07);
  color: #8e939b; font-family: inherit; font-size: 8px; font-weight: 700; cursor: pointer;
}
.zps-nameplate:hover { border-color: rgba(255,255,255,.2); }
.zps-nameplate.is-active { border-color: rgba(129,140,248,.6); background: rgba(88,101,242,.12); color: #fff; }
.zps-nameplate-text { font-size: 11px; font-weight: 900; letter-spacing: -.01em; color: #f2f3f5; }
.zps-tag-row { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.zps-tag { padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.16); color: #a5a9b1; font-family: inherit; font-size: 9.5px; font-weight: 800; cursor: pointer; }
.zps-tag:hover { background: rgba(255,255,255,.06); color: #fff; }
.zps-tag.is-active { background: var(--zps-blurple); border-color: var(--zps-blurple); color: #fff; }
.zps-tag-input { width: 62px; flex: 0 0 62px; padding: 6px 8px; text-transform: uppercase; font-weight: 800; }

.zps-section-toggle { width: 100%; background: none; border: 0; padding: 0; margin: 0; text-align: left; color: inherit; font-family: inherit; cursor: pointer; }
.zps-toggle-arrow { margin-left: auto; color: #aeb2b8; transition: transform .18s; }
.zps-toggle-arrow.is-open { transform: rotate(180deg); }
.zps-activity-body { padding-top: 4px; border-top: 1px solid rgba(255,255,255,.06); }
.zps-quick-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; margin: 11px 0; }
.zps-quick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; border: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.17); color: #c8cbd0; font-family: inherit; font-size: 8.5px; font-weight: 700; cursor: pointer; }
.zps-quick:hover { border-color: var(--quick); background: rgba(255,255,255,.045); }
.zps-quick-icon { font-size: 16px; line-height: 1; }
.zps-activity-types { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 5px; margin-bottom: 11px; }
.zps-activity-type { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 3px; border-radius: 7px; border: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.16); color: #a9adb5; font-family: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.zps-activity-type.is-active { background: rgba(88,101,242,.2); border-color: rgba(129,140,248,.5); color: #fff; }

.zps-error { margin: 2px 0 12px; padding: 10px 12px; border-radius: 8px; background: rgba(244,63,94,.11); border: 1px solid rgba(244,63,94,.3); color: #fecdd3; font-size: 11px; }
.zps-savebar {
  position: sticky; bottom: -2px; z-index: 8;
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 9px;
  margin-top: 2px; padding: 11px 12px; border-radius: 12px;
  background: rgba(30, 31, 34, .92); border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 14px 34px rgba(0,0,0,.35); backdrop-filter: blur(14px);
}
.zps-savebar-info { display: flex; align-items: center; gap: 7px; color: #a9adb5; font-size: 10px; }
.zps-savebar-dot { width: 6px; height: 6px; border-radius: 50%; background: #818cf8; box-shadow: 0 0 8px #818cf8; }
.zps-savebar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-shrink: 0; }
.zps-savebar-actions .zps-btn-save { flex: 1; justify-content: center; }

/* ---------------- Preview ---------------- */
.zps-preview-label { display: flex; align-items: center; justify-content: space-between; color: #c8cbd1; font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; padding: 2px 3px 9px; }
.zps-preview-label > span:first-child { display: inline-flex; align-items: center; gap: 5px; }
.zps-live-badge { display: inline-flex; align-items: center; gap: 4px; color: #6ee7b7; font-size: 8px; }
.zps-live-badge i { width: 5px; height: 5px; border-radius: 50%; background: #34d399; box-shadow: 0 0 7px #34d399; animation: zps-pulse 1.8s ease-in-out infinite; }

.zps-profile-card {
  position: relative; border-radius: 13px; overflow: hidden; isolation: isolate;
  background: #232428; border: 1px solid #111214;
  box-shadow: 0 18px 44px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.03);
}
.zps-profile-content { position: relative; z-index: 2; }
.zps-profile-banner { position: relative; height: 104px; overflow: hidden; }
.zps-banner-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.22)); }
.zps-profile-body { padding: 0 15px 15px; position: relative; }
.zps-profile-avatar-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: -40px; position: relative; z-index: 4; }
.zps-profile-avatar { position: relative; width: 82px; height: 82px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 30% 25%, #6366f1, #1e1b4b); border: 5px solid #232428; box-shadow: 0 6px 18px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 900; color: #fff; }
.zps-profile-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.zps-profile-status { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; background: #23a55a; border: 3px solid #232428; z-index: 6; }
.zps-status-bubble { display: flex; align-items: center; gap: 6px; max-width: 172px; margin-bottom: 4px; padding: 6px 8px; border-radius: 10px; background: #1e1f22; border: 1px solid #3f4147; box-shadow: 0 5px 14px rgba(0,0,0,.24); font-size: 10px; color: #d6d9dd; }
.zps-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zps-profile-name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.zps-profile-name { margin: 0; color: #fff; font-size: 19px; line-height: 1.12; font-weight: 900; letter-spacing: -.025em; }
.zps-profile-tag { padding: 2px 5px; border-radius: 4px; background: #111214; border: 1px solid #4e5058; color: #c9ccd1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; font-weight: 800; letter-spacing: .06em; }
.zps-profile-plus { padding: 2px 5px; border-radius: 4px; background: rgba(168,85,247,.2); border: 1px solid rgba(192,132,252,.38); color: #e9d5ff; font-size: 7.5px; font-weight: 900; letter-spacing: .06em; }
.zps-profile-handle { margin: 3px 0 0; color: #a9adb5; font-size: 10.5px; }
.zps-profile-pronouns { color: #8f949c; }
.zps-profile-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.zps-profile-badge { display: inline-flex; align-items: center; justify-content: center; }
.zps-profile-divider { height: 1px; background: rgba(255,255,255,.07); margin: 11px 0 9px; }
.zps-profile-bio { margin: 0; color: #c5c8cd; font-size: 10.5px; line-height: 1.5; white-space: pre-wrap; }
.zps-profile-bio.is-empty { color: #6f747c; font-style: italic; }
.zps-member-since { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: #7e838c; font-size: 8.5px; font-weight: 600; }
.zps-member-dot { width: 4px; height: 4px; border-radius: 50%; background: #6b7280; }
.zps-profile-activity { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 8px; border-radius: 8px; background: rgba(0,0,0,.26); border: 1px solid color-mix(in srgb, var(--activity) 30%, transparent); }
.zps-activity-art { width: 37px; height: 37px; border-radius: 6px; object-fit: cover; flex-shrink: 0; background: #18181b; }
.zps-activity-art-fallback { display: flex; align-items: center; justify-content: center; color: var(--activity); border: 1px solid color-mix(in srgb, var(--activity) 35%, transparent); }
.zps-activity-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.zps-activity-kicker { color: var(--activity); font-size: 7.5px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.zps-activity-meta strong { color: #eef0f2; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zps-activity-meta > span { color: #a9adb5; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zps-activity-state { color: #7d828a !important; font-size: 8px !important; }

.zps-preview-tip { display: flex; gap: 8px; margin-top: 10px; padding: 10px; border-radius: 9px; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.06); }
.zps-tip-icon { width: 25px; height: 25px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: rgba(88,101,242,.16); color: #a5b4fc; }
.zps-preview-tip div { display: flex; flex-direction: column; gap: 2px; }
.zps-preview-tip strong { color: #dfe1e5; font-size: 9.5px; font-weight: 800; }
.zps-preview-tip span { color: #92979f; font-size: 9px; line-height: 1.4; }
.zps-preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.zps-preview-stats div { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 8px; background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.05); }
.zps-preview-stats strong { color: #e7e8eb; font-size: 13px; }
.zps-preview-stats span { color: #7f848c; font-size: 7.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* ---------------- Nameplates ---------------- */
.zps-nameplate-aurora > .zps-profile-name, .zps-nameplate-aurora .zps-profile-name,
.zps-nameplate-text.zps-nameplate-aurora, .zps-modal-nameplate.zps-nameplate-aurora {
  background: linear-gradient(92deg, #6ee7b7 0%, #22d3ee 32%, #a78bfa 68%, #f472b6 100%);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: zps-gradient 5s linear infinite;
}
.zps-nameplate-gold .zps-profile-name, .zps-nameplate-text.zps-nameplate-gold, .zps-modal-nameplate.zps-nameplate-gold {
  background: linear-gradient(92deg, #fde68a 0%, #f59e0b 42%, #fff7d6 60%, #d97706 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: zps-gradient 6s linear infinite;
  filter: drop-shadow(0 0 7px rgba(245,158,11,.18));
}
.zps-nameplate-neon .zps-profile-name, .zps-nameplate-text.zps-nameplate-neon, .zps-modal-nameplate.zps-nameplate-neon {
  color: #e0faff; text-shadow: 0 0 7px rgba(34,211,238,.8), 0 0 17px rgba(88,101,242,.45);
}
.zps-nameplate-sakura .zps-profile-name, .zps-nameplate-text.zps-nameplate-sakura, .zps-modal-nameplate.zps-nameplate-sakura {
  background: linear-gradient(92deg, #fbcfe8, #fb7185 45%, #f9a8d4 75%, #fdf2f8);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: zps-gradient 5s linear infinite;
}
.zps-nameplate-void .zps-profile-name, .zps-nameplate-text.zps-nameplate-void, .zps-modal-nameplate.zps-nameplate-void {
  background: linear-gradient(92deg, #ddd6fe, #8b5cf6 42%, #312e81 75%, #c4b5fd);
  background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: zps-gradient 7s linear infinite;
}

/* ---------------- Avatar decorations ---------------- */
.zp-deco { position: absolute; inset: -10px; border-radius: 50%; pointer-events: none; z-index: 5; display: block; }
.zp-deco-compact { inset: -7px; }
.zp-deco-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; opacity: .95; }
.zp-deco-glow { position: absolute; inset: 3px; border-radius: 50%; opacity: .5; filter: blur(5px); }
.zp-deco-spark { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; transform: translate(-50%, -50%) rotate(calc(var(--i) / var(--n) * 360deg)) translateY(-55px); }
.zp-deco-neon .zp-deco-ring { background: conic-gradient(from 0deg, transparent 0 58%, #22d3ee 72%, #a855f7 84%, transparent 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0); animation: zps-spin 2.8s linear infinite; filter: drop-shadow(0 0 5px #22d3ee); }
.zp-deco-neon .zp-deco-glow { background: radial-gradient(circle, rgba(34,211,238,.42), transparent 68%); animation: zps-pulse 2s ease-in-out infinite; }
.zp-deco-flame .zp-deco-ring { background: conic-gradient(from 25deg, transparent, #f59e0b, #fde68a, transparent 55%, #f97316, transparent); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0); animation: zps-spin 4s linear infinite; filter: drop-shadow(0 0 7px rgba(245,158,11,.8)); }
.zp-deco-flame .zp-deco-glow { background: radial-gradient(circle, rgba(245,158,11,.5), transparent 70%); animation: zps-pulse 1.8s ease-in-out infinite; }
.zp-deco-aura .zp-deco-ring { inset: -2px; border: 2px solid rgba(168,85,247,.55); box-shadow: 0 0 13px rgba(168,85,247,.6), inset 0 0 12px rgba(168,85,247,.25); animation: zps-aura 2.6s ease-in-out infinite; }
.zp-deco-aura .zp-deco-glow { background: radial-gradient(circle, rgba(168,85,247,.45), transparent 64%); animation: zps-pulse 2.4s ease-in-out infinite; }
.zp-deco-violet .zp-deco-ring { inset: 0; border: 2px solid rgba(217,70,239,.8); box-shadow: 0 0 9px rgba(217,70,239,.55); animation: zps-glitch 2.1s steps(2, end) infinite; }
.zp-deco-violet .zp-deco-ring-2 { inset: 1px; border-color: rgba(34,211,238,.6); animation: zps-glitch 1.7s steps(2, end) infinite reverse; }
.zp-deco-starlight .zp-deco-ring { border: 1px solid rgba(255,255,255,.5); box-shadow: 0 0 10px rgba(255,255,255,.35); animation: zps-spin 11s linear infinite; }
.zp-deco-starlight .zp-deco-spark { background: #fff; box-shadow: 0 0 7px #fff; animation: zps-twinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
.zp-deco-sakura .zp-deco-ring { border: 1px solid rgba(251,113,133,.45); box-shadow: 0 0 10px rgba(251,113,133,.28); animation: zps-spin 14s linear infinite; }
.zp-deco-sakura .zp-deco-spark { width: 6px; height: 4px; border-radius: 70% 0 70% 0; background: linear-gradient(135deg, #fbcfe8, #fb7185); box-shadow: 0 0 5px rgba(251,113,133,.5); transform: translate(-50%, -50%) rotate(calc(var(--i) / var(--n) * 360deg)) translateY(-51px) rotate(35deg); animation: zps-petal-orbit 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.65s); }
.zp-deco-frost .zp-deco-ring { border: 2px solid rgba(125,211,252,.6); box-shadow: 0 0 11px rgba(125,211,252,.45), inset 0 0 9px rgba(125,211,252,.18); animation: zps-aura 3.4s ease-in-out infinite; }
.zp-deco-frost .zp-deco-spark { width: 3px; height: 3px; background: #e0f2fe; box-shadow: 0 0 6px #7dd3fc; animation: zps-twinkle 2.7s ease-in-out infinite; animation-delay: calc(var(--i) * -.35s); }
.zp-deco-gold .zp-deco-ring { border: 2px solid transparent; background: conic-gradient(from 200deg, transparent, #fbbf24 15%, #fef3c7 30%, transparent 42%, transparent 58%, #f59e0b 76%, #fde68a 90%, transparent); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0); animation: zps-spin 7s linear infinite; filter: drop-shadow(0 0 5px rgba(251,191,36,.55)); }
.zp-deco-laurel { position: absolute; width: 12px; height: 28px; border: 2px solid #fbbf24; border-radius: 100% 0 100% 0; opacity: .85; filter: drop-shadow(0 0 4px rgba(251,191,36,.4)); }
.zp-deco-laurel-l { left: -3px; top: 50%; transform: translateY(-50%) rotate(-30deg); }
.zp-deco-laurel-r { right: -3px; top: 50%; transform: translateY(-50%) scaleX(-1) rotate(-30deg); }

/* ---------------- Animated profile effects ---------------- */
.zp-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; z-index: 1; contain: paint; }
.zp-fx-tile { position: absolute; inset: 0; border-radius: 7px; }
.zp-fx-aura { position: absolute; width: 78%; height: 130%; border-radius: 50%; filter: blur(22px); opacity: .62; pointer-events: none; }
.zp-fx-aura-a { left: -23%; top: -38%; animation: zps-float 9s ease-in-out infinite; }
.zp-fx-aura-b { right: -28%; bottom: -40%; animation: zps-float 11s ease-in-out infinite reverse; animation-delay: -2.5s; }
.zp-fx-ribbon { position: absolute; left: -18%; right: -18%; top: 34%; height: 58%; border-radius: 50%; filter: blur(18px); opacity: .35; transform: rotate(-14deg); animation: zps-ribbon 8s ease-in-out infinite; }
.zp-fx-particle { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; opacity: .8; animation: zps-twinkle var(--d) ease-in-out infinite; animation-delay: var(--delay); }
.zp-fx-grid { position: absolute; inset: -30%; background-image: linear-gradient(rgba(96,165,250,.23) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,.23) 1px, transparent 1px); background-size: 23px 23px; transform: perspective(220px) rotateX(58deg) translateY(18%); animation: zps-grid 9s linear infinite; opacity: .55; }
.zp-fx-scan { position: absolute; left: 0; right: 0; height: 20%; background: linear-gradient(180deg, transparent, rgba(147,197,253,.34), transparent); animation: zps-scan 4.6s linear infinite; filter: blur(2px); }

.zp-fx-aurora { background: radial-gradient(120% 100% at 10% 10%, rgba(16,185,129,.22), transparent 55%), radial-gradient(100% 100% at 92% 90%, rgba(139,92,246,.24), transparent 62%), linear-gradient(140deg, rgba(6,182,212,.13), rgba(30,27,75,.1)); }
.zp-fx-aurora .zp-fx-aura-a { background: radial-gradient(circle, #34d399, transparent 68%); }
.zp-fx-aurora .zp-fx-aura-b { background: radial-gradient(circle, #a855f7, transparent 68%); }
.zp-fx-aurora .zp-fx-ribbon { background: linear-gradient(90deg, transparent, #22d3ee, #6366f1, #a855f7, transparent); }
.zp-fx-aurora .zp-fx-particle { background: #a7f3d0; box-shadow: 0 0 7px #34d399; width: 2px; height: 2px; }

.zp-fx-sakura { background: radial-gradient(100% 80% at 20% 0%, rgba(244,114,182,.22), transparent 58%), linear-gradient(180deg, rgba(131,24,67,.2), rgba(24,24,27,.06)); }
.zp-fx-sakura .zp-fx-aura-a { background: radial-gradient(circle, #fb7185, transparent 66%); opacity: .38; }
.zp-fx-sakura .zp-fx-aura-b { background: radial-gradient(circle, #f9a8d4, transparent 66%); opacity: .3; }
.zp-fx-sakura .zp-fx-particle { top: -18px; width: 7px; height: 5px; border-radius: 70% 0 70% 0; background: linear-gradient(135deg, #fbcfe8, #fb7185); animation: zps-fall var(--d) linear infinite; animation-delay: var(--delay); box-shadow: 0 0 5px rgba(251,113,133,.35); }
.zp-fx-tile .zp-fx-aura { filter: blur(11px); }
.zp-fx-tile .zp-fx-particle { width: 3px; height: 3px; }

.zp-fx-neon { background: radial-gradient(100% 100% at 50% 0%, rgba(34,211,238,.2), transparent 58%), radial-gradient(90% 80% at 80% 100%, rgba(168,85,247,.22), transparent 65%); box-shadow: inset 0 0 28px rgba(34,211,238,.12), inset 0 0 0 1px rgba(34,211,238,.24); }
.zp-fx-neon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 18px rgba(34,211,238,.3); animation: zps-neon 2.6s ease-in-out infinite; }
.zp-fx-neon .zp-fx-aura-a { background: radial-gradient(circle, #22d3ee, transparent 68%); }
.zp-fx-neon .zp-fx-aura-b { background: radial-gradient(circle, #a855f7, transparent 68%); }
.zp-fx-neon .zp-fx-particle { background: #a5f3fc; box-shadow: 0 0 6px #22d3ee; width: 2px; height: 2px; }

.zp-fx-void { background: radial-gradient(95% 100% at 50% 50%, rgba(76,29,149,.2), transparent 60%), #09090c; }
.zp-fx-void .zp-fx-aura-a { background: radial-gradient(circle, #7c3aed, transparent 66%); opacity: .45; }
.zp-fx-void .zp-fx-aura-b { background: radial-gradient(circle, #312e81, transparent 68%); opacity: .5; }
.zp-fx-void .zp-fx-ribbon { background: linear-gradient(90deg, transparent, #4c1d95, #8b5cf6, transparent); opacity: .45; }
.zp-fx-void .zp-fx-particle { background: #ddd6fe; box-shadow: 0 0 7px rgba(196,181,253,.8); width: 1.5px; height: 1.5px; }

.zp-fx-sunset { background: linear-gradient(145deg, rgba(251,146,60,.4), rgba(219,39,119,.3) 48%, rgba(76,29,149,.4)); background-size: 180% 180%; animation: zps-gradient-move 8s ease-in-out infinite alternate; }
.zp-fx-sunset .zp-fx-aura-a { background: radial-gradient(circle, #fb923c, transparent 65%); opacity: .5; }
.zp-fx-sunset .zp-fx-aura-b { background: radial-gradient(circle, #db2777, transparent 65%); opacity: .36; }
.zp-fx-sunset .zp-fx-particle { background: #fed7aa; box-shadow: 0 0 6px #fb923c; }

.zp-fx-cyber { background: linear-gradient(180deg, rgba(30,58,138,.26), rgba(2,6,23,.5)); }
.zp-fx-cyber .zp-fx-aura-a { background: radial-gradient(circle, #3b82f6, transparent 68%); opacity: .32; }
.zp-fx-cyber .zp-fx-aura-b { background: radial-gradient(circle, #06b6d4, transparent 68%); opacity: .25; }
.zp-fx-cyber .zp-fx-particle { background: #93c5fd; box-shadow: 0 0 6px #60a5fa; width: 2px; height: 2px; animation: zps-twinkle var(--d) ease-in-out infinite; animation-delay: var(--delay); }

.zp-fx-galaxy { background: radial-gradient(90% 100% at 50% 40%, rgba(49,46,129,.32), transparent 62%), #080810; }
.zp-fx-galaxy .zp-fx-aura-a { background: radial-gradient(circle, #8b5cf6, transparent 64%); opacity: .38; }
.zp-fx-galaxy .zp-fx-aura-b { background: radial-gradient(circle, #22d3ee, transparent 65%); opacity: .24; }
.zp-fx-galaxy .zp-fx-ribbon { background: linear-gradient(90deg, transparent, #c084fc, #6366f1, #22d3ee, transparent); opacity: .28; }
.zp-fx-galaxy .zp-fx-particle { background: #fff; box-shadow: 0 0 6px rgba(224,231,255,.9); width: 2px; height: 2px; }

.zp-fx-frost { background: radial-gradient(100% 100% at 30% 0%, rgba(125,211,252,.22), transparent 58%), linear-gradient(180deg, rgba(12,74,110,.24), rgba(2,6,23,.16)); }
.zp-fx-frost .zp-fx-aura-a { background: radial-gradient(circle, #7dd3fc, transparent 66%); opacity: .34; }
.zp-fx-frost .zp-fx-aura-b { background: radial-gradient(circle, #e0f2fe, transparent 66%); opacity: .25; }
.zp-fx-frost .zp-fx-particle { background: #e0f2fe; box-shadow: 0 0 6px #7dd3fc; width: 3px; height: 3px; border-radius: 50%; animation: zps-fall var(--d) linear infinite; animation-delay: var(--delay); }

.zp-fx-ember { background: radial-gradient(90% 90% at 50% 100%, rgba(249,115,22,.3), transparent 62%), linear-gradient(180deg, rgba(67,20,7,.18), rgba(12,10,9,.25)); }
.zp-fx-ember .zp-fx-aura-a { background: radial-gradient(circle, #f97316, transparent 64%); opacity: .42; }
.zp-fx-ember .zp-fx-aura-b { background: radial-gradient(circle, #fbbf24, transparent 66%); opacity: .28; }
.zp-fx-ember .zp-fx-particle { bottom: -8px; top: auto; width: 2px; height: 2px; background: #fdba74; box-shadow: 0 0 7px #f97316; animation: zps-rise var(--d) linear infinite; animation-delay: var(--delay); }

/* Modal effect */
.zps-modal-card { isolation: isolate; }
.zps-modal-card > .zp-fx-modal { z-index: 0; }
.zps-modal-card > .zp-fx-modal ~ * { position: relative; z-index: 1; }
.zps-modal-card.zps-modal-has-fx > .zps-modal-panel { background: rgba(14, 14, 18, .48); }
.zps-modal-card.zps-modal-has-fx > .zps-modal-side { background: rgba(9, 9, 11, .55); }
.zps-modal-nameplate { -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; }

/* ---------------- Animations ---------------- */
@keyframes zps-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.86); } }
@keyframes zps-spin { to { transform: rotate(360deg); } }
@keyframes zps-aura { 0%, 100% { transform: scale(.98); opacity: .65; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes zps-float { 0%, 100% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(5%, 5%, 0) scale(1.12); } }
@keyframes zps-ribbon { 0%, 100% { transform: rotate(-14deg) translateY(-3px) scaleX(.96); } 50% { transform: rotate(-7deg) translateY(5px) scaleX(1.06); } }
@keyframes zps-gradient { to { background-position: 220% center; } }
@keyframes zps-gradient-move { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@keyframes zps-fall { 0% { transform: translate3d(0, -20px, 0) rotate(0deg); opacity: 0; } 12% { opacity: .9; } 100% { transform: translate3d(22px, 320px, 0) rotate(320deg); opacity: 0; } }
@keyframes zps-rise { 0% { transform: translate3d(0, 30px, 0) scale(.8); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate3d(12px, -130px, 0) scale(1.3); opacity: 0; } }
@keyframes zps-twinkle { 0%, 100% { opacity: .18; transform: scale(.72); } 50% { opacity: 1; transform: scale(1.18); } }
@keyframes zps-grid { from { background-position: 0 0, 0 0; } to { background-position: 0 46px, 46px 0; } }
@keyframes zps-scan { 0% { top: -28%; opacity: 0; } 20% { opacity: .9; } 80% { opacity: .9; } 100% { top: 110%; opacity: 0; } }
@keyframes zps-neon { 0%, 100% { box-shadow: inset 0 0 12px rgba(34,211,238,.2); } 50% { box-shadow: inset 0 0 27px rgba(34,211,238,.45); } }
@keyframes zps-glitch { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-1.5px, 1px); } 40% { transform: translate(1px, -1px); } 60% { transform: translate(-1px, -1px); } 80% { transform: translate(1px, 1px); } }
@keyframes zps-petal-orbit { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) rotate(calc(var(--i) / var(--n) * 360deg)) translateY(-51px) rotate(35deg); } 50% { opacity: 1; transform: translate(-50%, -50%) rotate(calc(var(--i) / var(--n) * 360deg + 18deg)) translateY(-55px) rotate(58deg); } }

@media (max-width: 1180px) {
  .zps-grid { grid-template-columns: minmax(0, 1fr) 330px; }
  .zps-quick-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .zps-root { padding: 17px; }
  .zps-grid { grid-template-columns: minmax(0, 1fr); }
  .zps-preview-pane { position: relative; order: -1; max-width: 420px; width: 100%; margin: 0 auto 14px; }
  .zps-hero { flex-direction: column; gap: 10px; }
  .zps-hero-meta { flex-direction: row; align-items: center; }
}
@media (max-width: 620px) {
  .zps-section { padding: 14px; }
  .zps-field-grid { grid-template-columns: 1fr; }
  .zps-theme-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .zps-deco-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .zps-fx-grid { grid-template-columns: 1fr; }
  .zps-quick-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .zps-activity-types { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .zps-savebar { flex-direction: column; align-items: stretch; }
  .zps-savebar-actions { justify-content: flex-end; }
  .zps-inline { flex-direction: column; align-items: stretch; }
  .zps-swatches { flex-wrap: wrap; }
}