*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --gold: #C9A84C; --gold-light: #E8C97A; --black: #080808; --dark: #0E0E0E;
    --dark-2: #141414; --dark-3: #1C1C1C; --dark-4: #242424; --gray: #888;
    --gray-light: #BBBBBB; --white: #F5F3EE;
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'DM Sans', sans-serif; --font-mono: 'DM Mono', monospace;
    --sidebar-w: 240px;
  }
  html, body { height: 100%; }
  body { background: var(--black); color: var(--white); font-family: var(--font-body); font-weight: 300; display: flex; flex-direction: column; }

  /* TOPBAR */
  .topbar {
    height: 56px; background: var(--dark-2); border-bottom: 1px solid rgba(201,168,76,0.1);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 1.5rem; position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  }
  .topbar-logo { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--white); text-decoration: none; }
  .topbar-logo span { color: var(--gold); }
  .topbar-actions { display: flex; align-items: center; gap: 1rem; }
  .topbar-user { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gray); }
  .btn-sm {
    font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.15em;
    text-transform: uppercase; padding: 0.45rem 1rem; cursor: pointer;
    text-decoration: none; transition: all 0.3s; border: none;
  }
  .btn-sm-gold { background: var(--gold); color: var(--black); }
  .btn-sm-gold:hover { background: var(--gold-light); }
  .btn-sm-outline { background: transparent; color: var(--gray); border: 1px solid rgba(255,255,255,0.1); }
  .btn-sm-outline:hover { border-color: var(--gold); color: var(--gold); }

  /* LAYOUT */
  .app-layout { display: flex; height: calc(100vh - 56px); margin-top: 56px; overflow: hidden; }

  /* SIDEBAR */
  .sidebar {
    width: var(--sidebar-w); background: var(--dark-2);
    border-right: 1px solid rgba(201,168,76,0.08);
    display: flex; flex-direction: column; overflow-y: auto; flex-shrink: 0;
  }
  .sidebar-section { padding: 1.25rem 1rem 0.5rem; }
  .sidebar-section-label {
    font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--gray); padding: 0 0.5rem;
    margin-bottom: 0.5rem;
  }
  .nav-item {
    display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.75rem;
    border-radius: 2px; cursor: pointer; transition: all 0.2s;
    font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--gray); border: none; background: none;
    width: 100%; text-align: left;
  }
  .nav-item:hover { background: rgba(201,168,76,0.05); color: var(--gray-light); }
  .nav-item.active { background: rgba(201,168,76,0.08); color: var(--gold); }
  .nav-item-icon { font-size: 0.85rem; width: 18px; text-align: center; }

  .epk-url-box {
    margin: 1rem; padding: 0.75rem; background: var(--dark-3);
    border: 1px solid rgba(201,168,76,0.15);
  }
  .epk-url-label { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray); margin-bottom: 0.3rem; }
  .epk-url-link { font-family: var(--font-mono); font-size: 0.6rem; color: var(--gold); text-decoration: none; word-break: break-all; }
  .epk-url-link:hover { text-decoration: underline; }

  /* MAIN */
  .main-content { flex: 1; overflow-y: auto; background: var(--black); }
  .panel { display: none; padding: 2.5rem; max-width: 900px; }
  .panel.active { display: block; }

  .panel-title {
    font-family: var(--font-display); font-size: 1.8rem; font-weight: 700;
    margin-bottom: 0.4rem; line-height: 1.2;
  }
  .panel-title em { font-style: italic; color: var(--gold-light); }
  .panel-sub { font-size: 0.9rem; color: var(--gray); margin-bottom: 2.5rem; line-height: 1.6; }

  /* FORM STYLES */
  .field-group { margin-bottom: 1.75rem; }
  .field-label {
    display: block; font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--gray);
    margin-bottom: 0.5rem;
  }
  .field-hint { font-size: 0.78rem; color: var(--gray); margin-top: 0.35rem; line-height: 1.5; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="number"], textarea, select {
    width: 100%; background: var(--dark-3); border: 1px solid rgba(201,168,76,0.12);
    color: var(--white); padding: 0.8rem 1rem; font-family: var(--font-body);
    font-size: 0.9rem; font-weight: 300; transition: border-color 0.3s;
    outline: none; resize: vertical;
  }
  input:focus, textarea:focus, select:focus { border-color: rgba(201,168,76,0.4); }
  input::placeholder, textarea::placeholder { color: var(--gray); }
  textarea { min-height: 120px; }
  select { appearance: none; cursor: pointer; }
  select option { background: var(--dark-3); }

  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

  .section-divider {
    border: none; border-top: 1px solid rgba(201,168,76,0.08);
    margin: 2.5rem 0;
  }

  /* TAGS / BADGES */
  .tag-input-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
  .tag {
    font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em;
    text-transform: uppercase; border: 1px solid rgba(201,168,76,0.4);
    color: var(--gold); padding: 0.3rem 0.75rem;
    display: flex; align-items: center; gap: 0.5rem;
  }
  .tag-remove { cursor: pointer; opacity: 0.6; transition: opacity 0.2s; background: none; border: none; color: var(--gold); font-size: 0.8rem; padding: 0; }
  .tag-remove:hover { opacity: 1; }
  .tag-add-row { display: flex; gap: 0.5rem; }
  .tag-add-row input { flex: 1; }
  .btn-add {
    background: var(--dark-4); border: 1px solid rgba(201,168,76,0.2);
    color: var(--gray-light); padding: 0.8rem 1.25rem;
    font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.15em;
    text-transform: uppercase; cursor: pointer; transition: all 0.2s; white-space: nowrap;
  }
  .btn-add:hover { border-color: var(--gold); color: var(--gold); }

  /* CARDS (credits, tracks, videos) */
  .cards-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
  .editable-card {
    background: var(--dark-2); border: 1px solid rgba(201,168,76,0.1);
    padding: 1.5rem; position: relative;
  }
  .editable-card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 1rem;
  }
  .editable-card-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
  .editable-card-subtitle { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-top: 0.2rem; }
  .card-actions { display: flex; gap: 0.5rem; }
  .btn-card-action {
    font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em;
    text-transform: uppercase; padding: 0.35rem 0.75rem; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1); background: none; color: var(--gray);
    transition: all 0.2s;
  }
  /* Credit photo gallery in dashboard */
  .credit-photos-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
  .credit-photo-thumb { width: 80px; height: 60px; object-fit: cover; border: 1px solid rgba(201,168,76,0.2); cursor: pointer; }
  .credit-photo-add-btn { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.75rem; cursor: pointer; border: 1px dashed rgba(201,168,76,0.3); background: none; color: var(--gold); transition: all 0.2s; margin-top: 0.5rem; }
  .credit-photo-add-btn:hover { border-color: var(--gold); background: rgba(201,168,76,0.05); }
  .btn-card-action:hover { border-color: var(--gold); color: var(--gold); }
  .btn-card-delete:hover { border-color: #ff6b6b; color: #ff6b6b; }

  /* ADD FORM */
  .add-form {
    background: var(--dark-2); border: 1px solid rgba(201,168,76,0.15);
    padding: 1.5rem; margin-top: 1rem; display: none;
  }
  .add-form.open { display: block; }
  .add-form-title {
    font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem;
  }
  .btn-add-new {
    background: transparent; border: 1px dashed rgba(201,168,76,0.3);
    color: var(--gold); padding: 0.9rem 1.5rem;
    font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.15em;
    text-transform: uppercase; cursor: pointer; transition: all 0.3s;
    display: flex; align-items: center; gap: 0.5rem; width: 100%; justify-content: center;
  }
  .btn-add-new:hover { background: rgba(201,168,76,0.05); border-color: rgba(201,168,76,0.6); }

  .form-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
  .btn-save {
    background: var(--gold); color: var(--black); border: none;
    padding: 0.8rem 2rem; font-family: var(--font-mono); font-size: 0.65rem;
    letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; font-weight: 500;
    transition: all 0.3s;
  }
  .btn-save:hover { background: var(--gold-light); }
  .btn-cancel {
    background: none; border: 1px solid rgba(255,255,255,0.1); color: var(--gray);
    padding: 0.8rem 1.5rem; font-family: var(--font-mono); font-size: 0.65rem;
    letter-spacing: 0.15em; text-transform: uppercase; cursor: pointer; transition: all 0.3s;
  }
  .btn-cancel:hover { border-color: var(--gray); color: var(--white); }

  .save-banner {
    position: fixed; bottom: 2rem; right: 2rem;
    background: var(--gold); color: var(--black);
    padding: 0.9rem 2rem; font-family: var(--font-mono); font-size: 0.65rem;
    letter-spacing: 0.2em; text-transform: uppercase; font-weight: 500;
    opacity: 0; pointer-events: none; transition: opacity 0.3s;
    z-index: 999;
  }
  .save-banner.show { opacity: 1; }

  /* STATS GRID */
  .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .stat-input-group { display: flex; flex-direction: column; gap: 0.5rem; }

  @media (max-width: 900px) {
    .sidebar { width: 60px; }
    .nav-item span { display: none; }
    .sidebar-section-label { display: none; }
    .epk-url-box { display: none; }
    .field-row, .field-row-3 { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
  }

/* ── PROFILE SWITCHER ── */
.profile-tab {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: var(--dark-2); border: 1px solid rgba(201,168,76,0.15);
  color: var(--gray); font-family: var(--font-mono); font-size: 0.58rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; transition: all 0.2s;
  position: relative;
}
.profile-tab:hover { border-color: rgba(201,168,76,0.35); color: var(--white); }
.profile-tab.active {
  background: rgba(201,168,76,0.12); border-color: var(--gold);
  color: var(--white);
}
.profile-tab.active::after {
  content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px; background: var(--gold);
}
.profile-tab-add {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: none; border: 1px dashed rgba(201,168,76,0.25);
  color: rgba(201,168,76,0.5); font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap; transition: all 0.2s; margin-left: 0.25rem;
}
.profile-tab-add:hover { border-color: var(--gold); color: var(--gold); }
#profileSwitcher::-webkit-scrollbar { display: none; }

/* NEW PROFILE MODAL */
#newProfileModal.open { display: flex !important; }

/* ── ANALYTICS ── */
.analytics-range-btn {
  background: var(--dark-2); border: 1px solid rgba(201,168,76,0.15);
  color: var(--gray); font-family: var(--font-mono); font-size: 0.55rem;
  letter-spacing: 0.08em; padding: 0.35rem 0.75rem; cursor: pointer; transition: all 0.2s;
}
.analytics-range-btn:hover { border-color: rgba(201,168,76,0.35); color: var(--white); }
.analytics-range-btn.active { background: rgba(201,168,76,0.1); border-color: var(--gold); color: var(--white); }
.analytics-bar {
  flex: 1; background: rgba(201,168,76,0.25); min-height: 2px;
  transition: height 0.4s ease; position: relative; cursor: default;
}
.analytics-bar:hover { background: rgba(201,168,76,0.6); }
.analytics-bar-tooltip {
  display: none; position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%);
  background: var(--dark); border: 1px solid rgba(201,168,76,0.3);
  font-family: var(--font-mono); font-size: 0.5rem; color: var(--white);
  padding: 0.25rem 0.5rem; white-space: nowrap; pointer-events: none; z-index: 10;
}
.analytics-bar:hover .analytics-bar-tooltip { display: block; }
.analytics-breakdown-row {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-mono); font-size: 0.58rem; color: var(--gray-light);
}
.analytics-breakdown-bar {
  height: 4px; background: rgba(201,168,76,0.3); flex: 1; position: relative;
}
.analytics-breakdown-fill { height: 100%; background: var(--gold); transition: width 0.5s ease; }

.layout-opt-btn { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.9rem; border: 1px solid rgba(201,168,76,0.3); background: rgba(255,255,255,0.04); color: var(--gray); cursor: pointer; transition: all 0.2s; }
.layout-opt-btn:hover { border-color: var(--gold); color: var(--gold); }
.layout-opt-btn.active { background: var(--gold); color: var(--black); border-color: var(--gold); }

/* Draft restored banner */
.draft-restored-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(201,168,76,0.12);
  border: 1px solid rgba(201,168,76,0.4);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  padding: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.draft-restored-banner button {
  background: none;
  border: none;
  color: var(--gold);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 0.25rem;
}