/* Personal profile: reference layout, existing Breath Vision functions and data. */
[hidden] { display: none !important; }
body.profile-page { background: var(--bg-dark); color: var(--text-primary); color-scheme: dark; }
.profile-page .navbar { background: rgba(30,30,30,.95); border-bottom: 1px solid var(--border-color); backdrop-filter: blur(16px); }
.profile-page .navbar .container { padding-right: 24px; }
.profile-page .navbar-nav a, .profile-page .navbar-actions .nav-link { color: var(--text-secondary); }
.profile-page .navbar-nav a:hover, .profile-page .navbar-actions .nav-link:hover { color: var(--text-primary); }
.profile-page .navbar-actions { margin-left: auto; }
.profile-page .navbar-actions > .btn { color: var(--text-primary); }
.creator-page { min-height: calc(100vh - 64px); padding: 0 0 80px; background: var(--bg-dark); color: var(--text-primary); }
.creator-shell { width: 100%; margin: 0 auto; }
.creator-content { padding: 0 28px; }
.creator-hero { position: relative; height: 172px; overflow: hidden; isolation: isolate; border-radius: 0 0 10px 10px; border-bottom: 1px solid var(--border-color); background: var(--bg-panel); }
.creator-profile { position: relative; z-index: 2; }
.creator-profile-top { display: flex; align-items: flex-end; gap: 20px; min-height: 46px; }
.creator-avatar { position: relative; display: grid; flex: 0 0 88px; width: 88px; height: 88px; margin-top: -44px; place-items: center; border: 4px solid var(--bg-dark); border-radius: 50%; outline: 1px solid var(--border-color); background: var(--bg-panel); color: var(--text-secondary); font-size: 30px; font-weight: 700; overflow: hidden; }
.creator-avatar img, .profile-menu-avatar img { width: 100%; height: 100%; object-fit: cover; }
.creator-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 15px; border: 1px solid var(--border-color); border-radius: 999px; background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer; transition: background .15s,border-color .15s; }
.creator-button:hover { border-color: var(--border-light); background: var(--bg-panel); }
.creator-button.primary { border-color: #cf1717; background: #cf1717; color: #fff; }
.creator-button.primary:hover { background: #af1010; border-color: #af1010; }
.creator-button:disabled { opacity: .5; cursor: not-allowed; }
.creator-button:focus-visible, .creator-tab:focus-visible, .creator-filter button:focus-visible, .profile-menu summary:focus-visible, .profile-menu a:focus-visible, .profile-menu button:focus-visible { outline: 2px solid #367aee; outline-offset: 3px; }
.creator-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.creator-edit { min-height: 26px; padding: 0 17px; margin-bottom: 26px; border-color: var(--border-color); box-shadow: 0 0 0 3px var(--bg-dark); }
.creator-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; padding: 14px 0 5px; }
.creator-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 11px; }
.creator-identity h1 { margin: 0; font-size: 21px; font-weight: 650; line-height: 1.4; }
.creator-id-copy { min-height: 25px; padding: 0 10px; color: var(--text-muted); font-size: 11px; }
.creator-id-copy .creator-icon svg { width: 13px; height: 13px; }
.creator-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 13px; }
.creator-stat { display: flex; align-items: baseline; gap: 5px; }
.creator-stat strong { color: var(--text-primary); font-size: 15px; font-weight: 600; }
.creator-stat span { color: var(--text-muted); font-size: 12px; }
.creator-tabs { display: flex; align-items: center; gap: 14px; margin-top: 34px; padding-bottom: 11px; border-bottom: 1px solid var(--border-color); }
.creator-tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border: 0; border-radius: 99px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; }
.creator-tab.active { background: #333436; color: #fff; font-weight: 600; }
.creator-tab-count { font-size: 11px; opacity: .65; font-variant-numeric: tabular-nums; }
.creator-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 0; }
.creator-filter { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 99px; background: var(--bg-panel); }
.creator-filter button { min-width: 56px; padding: 4px 14px; border: 0; border-radius: 99px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; line-height: 1.4; cursor: pointer; }
.creator-filter button.active { background: #303030; color: var(--text-primary); box-shadow: 0 1px 5px #19194009; }
.creator-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.creator-select { width: auto; max-width: 180px; min-width: 94px; min-height: 31px; padding: 4px 26px 4px 13px; border: 1px solid var(--border-color); border-radius: 99px; background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.creator-select:focus, .creator-dates:focus-within { outline: 2px solid #243047; border-color: #5b83c4; }
.creator-dates { display: flex; align-items: center; gap: 6px; min-height: 31px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 99px; color: #aaa; }
.creator-dates input { min-width: 0; width: 123px; padding: 4px 0; border: 0; outline: 0; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; color-scheme: dark; }
.creator-content-note { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0 18px; color: var(--text-muted); font-size: 12px; }
.creator-content-note p { margin: 0; }
.creator-content-note > span { white-space: nowrap; }
.creator-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 22px 18px; min-height: 300px; align-content: start; }
.creator-card { min-width: 0; overflow: hidden; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-card); color: var(--text-primary); text-align: left; text-decoration: none; cursor: pointer; transition: transform .18s,box-shadow .18s; }
.creator-card:hover { transform: translateY(-3px); box-shadow: 0 8px 26px #0006; }
.creator-card-open { display: block; color: inherit; text-decoration: none; }
.creator-card-open:focus-visible { outline: 2px solid #367aee; outline-offset: -3px; }
.creator-cover { position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--bg-panel); }
.creator-cover > img, .creator-cover > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.creator-cover > video { pointer-events: none; opacity: 0; }
.creator-cover > video.has-frame { opacity: 1; }
.creator-cover-placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg,var(--bg-panel),var(--bg-card)); color: var(--text-muted); }
.creator-cover-placeholder svg { width: 46px; height: 46px; stroke-width: 1; }
.creator-type, .creator-duration, .creator-review-status { position: absolute; z-index: 1; padding: 3px 8px; border-radius: 5px; color: #fff; background: #1c2029a8; font-size: 10px; line-height: 1.6; backdrop-filter: blur(8px); }
.creator-type { top: 10px; left: 10px; }
.creator-duration { bottom: 9px; right: 9px; }
.creator-review-status { top: 10px; right: 10px; }
.creator-review-status.pending { background: #422006ee; color: #fde68a; }
.creator-review-status.rejected { background: #450a0aee; color: #fca5a5; }
.creator-review-status.published { background: #052e16ee; color: #86efac; }
.creator-review-status.unavailable { background: #292929ee; color: #d4d4d4; }
.creator-card-copy { padding: 13px 14px; }
.creator-card-copy h3 { overflow: hidden; margin: 0; color: var(--text-primary); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.creator-card-copy p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 36px; margin: 7px 0 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.creator-card-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; color: var(--text-muted); font-size: 11px; }
.creator-review-reason { height: auto !important; color: #f87171 !important; }
.creator-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; cursor: default; }
.creator-card-actions .creator-button { min-height: 30px; padding: 0 12px; font-size: 11px; }
.creator-delete { color: #f87171; }
.creator-action-notice { margin: 0 0 16px; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.creator-action-notice.error { color: #f87171; }
.creator-empty { grid-column: 1/-1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 330px; padding: 65px 20px; text-align: center; }
.creator-empty > .creator-icon { width: 78px; height: 78px; margin-bottom: 15px; border-radius: 22px; background: var(--bg-panel); color: var(--text-muted); }
.creator-empty > .creator-icon svg { width: 38px; height: 38px; stroke-width: 1.3; }
.creator-empty h3 { margin: 0; color: var(--text-muted); font-size: 14px; font-weight: 500; }
.creator-empty p { margin: 8px 0 17px; color: var(--text-muted); font-size: 12px; }
.creator-message { padding: 120px 20px; color: var(--text-muted); text-align: center; }
.creator-message.error { color: #f87171; }

@media (min-width: 1700px) { .creator-grid { grid-template-columns: repeat(5,minmax(0,1fr)); } }
@media (max-width: 1000px) { .creator-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .creator-toolbar { align-items: flex-start; } .creator-controls { justify-content: flex-end; } }
@media (max-width: 760px) {
  .creator-content { padding: 0 18px; }
  .creator-hero { height: 145px; }
  .creator-hero-mark { right: 24px; top: 56px; font-size: 23px; }
  .creator-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .creator-controls { justify-content: flex-start; }
  .creator-tabs { margin-top: 27px; }
  .creator-select { max-width: 150px; }
  .profile-page .navbar .container { padding-left: 16px; padding-right: 16px; }
  .creator-actions { gap: 6px; }
}
@media (max-width: 480px) {
  .creator-profile-top { flex-wrap: wrap; gap: 12px; }
  .creator-avatar { width: 76px; height: 76px; flex-basis: 76px; margin-top: -38px; }
  .creator-edit { margin-bottom: 22px; }
  .creator-actions { width: 100%; justify-content: flex-end; padding-top: 0; }
  .creator-identity { margin-top: 0; }
  .creator-identity h1 { font-size: 20px; }
  .creator-grid { grid-template-columns: 1fr; }
  .creator-stats { gap: 16px; }
  .creator-content-note { align-items: flex-start; font-size: 11px; }
  .creator-dates { max-width: 100%; }
  .creator-controls { width: 100%; }
  .creator-empty { min-height: 280px; }
}
.creator-dialog{width:min(540px,calc(100% - 32px));padding:0;border:1px solid #333;border-radius:16px;background:#151515;color:#f5f5f5;box-shadow:0 28px 90px #000c}.creator-dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.dialog-head,.dialog-actions{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #292929}.dialog-head h2{margin:0;font-size:18px}.dialog-close{width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:#aaa;font-size:22px;cursor:pointer}.dialog-body{display:grid;gap:15px;padding:22px}.creator-field{display:grid;gap:7px}.creator-field label{font-size:13px;font-weight:650}.creator-field input,.creator-field select,.creator-field textarea{width:100%;padding:10px 12px;border:1px solid #333;border-radius:9px;outline:0;background:#0b0b0b;color:#fff;font:inherit}.creator-field textarea{min-height:88px;resize:vertical}.creator-field input:focus,.creator-field select:focus,.creator-field textarea:focus{border-color:#dc2626;box-shadow:0 0 0 3px #ef444426}.field-help,.dialog-error{margin:0;color:#777;font-size:12px;line-height:1.5}.dialog-error{color:#f87171}.dialog-actions{justify-content:flex-end;gap:10px;border-top:1px solid #292929;border-bottom:0}.edit-avatar{display:grid;width:78px;height:78px;margin:0 auto;place-items:center;overflow:hidden;border-radius:50%;background:#222;font-size:25px;font-weight:700}.edit-avatar img{width:100%;height:100%;object-fit:cover}

/* Existing edit and publication forms stay intact, with the profile page palette. */
.creator-dialog { max-height: 90vh; margin: auto; overflow: auto; border-color: var(--border-color); background: var(--bg-card); color: var(--text-primary); box-shadow: 0 28px 90px #000b; }
.creator-dialog::backdrop { background: #0009; backdrop-filter: blur(4px); }
.dialog-head, .dialog-actions { border-color: var(--border-color); }
.dialog-close { color: var(--text-muted); }
.creator-field input, .creator-field select, .creator-field textarea { border-color: var(--border-color); background: var(--bg-card); color: var(--text-primary); }
.field-help { color: var(--text-muted); }
.dialog-error { color: #f87171; }
.edit-avatar { background: var(--bg-panel); color: var(--text-secondary); }
.submission-note { padding: 11px 13px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-panel); color: var(--text-muted); font-size: 12px; line-height: 1.7; }
.creator-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.creator-cover-change { position: absolute; z-index: 1; right: 28px; bottom: 16px; border-color: #ffffff30; background: #141414c9; color: #f0f0f0; backdrop-filter: blur(8px); }
.creator-cover-change:hover { background: #242424e6; border-color: #ffffff60; }
button.creator-avatar { padding: 0; cursor: pointer; }
button.creator-avatar:hover { outline-color: var(--border-light); }
button.creator-avatar:focus-visible { outline: 2px solid #367aee; outline-offset: 3px; }
.creator-cover-preview { display: grid; min-height: 90px; aspect-ratio: 5 / 1; place-items: center; overflow: hidden; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-panel); color: var(--text-muted); font-size: 12px; }
.creator-cover-preview img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }