
:root {
  --sc-primary: #00b4d8;
  --sc-secondary: #48cae4;
  --sc-accent: #ff4d8d;
  --sc-radius: 1rem;
  --sc-font: Inter, system-ui, sans-serif;
}
body { font-family: var(--sc-font); background: var(--bs-body-bg); }
a { color: var(--sc-primary); text-decoration: none; }
a:hover { color: var(--sc-secondary); }
.btn-primary { --bs-btn-bg: var(--sc-primary); --bs-btn-border-color: var(--sc-primary); --bs-btn-hover-bg: var(--sc-secondary); --bs-btn-hover-border-color: var(--sc-secondary); }
.text-bg-primary { background-color: var(--sc-primary)!important; }
.card, .list-group, .alert, .form-control, .form-select, .btn { border-radius: var(--sc-radius); }
.card { border-color: color-mix(in srgb, var(--bs-border-color) 75%, transparent); box-shadow: 0 .6rem 2rem rgba(0,0,0,.055); }
.navbar-brand { letter-spacing: -.03em; }
.brand-mark { width: 2.1rem; height: 2.1rem; display:inline-grid; place-items:center; color:white; background:var(--sc-primary); border-radius: .65rem; font-size:.78rem; }
.nav-link.active { color:var(--sc-primary)!important; font-weight:700; }
.hero-section { background:linear-gradient(135deg, rgba(0,18,40,.95), rgba(52,12,54,.88)); overflow:hidden; position:relative; }
.hero-section:after { content:""; position:absolute; width:28rem; height:28rem; border-radius:50%; background:var(--sc-primary); filter:blur(100px); opacity:.15; right:-8rem; top:-10rem; }
.py-lg-6 { padding-top:7rem!important; padding-bottom:7rem!important; }
.hero-card { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(16px); border-radius:calc(var(--sc-radius) * 1.4); position:relative; z-index:1; }
.visual-tile, .profile-cover, .photo-placeholder { background:linear-gradient(145deg, color-mix(in srgb, var(--sc-primary) 75%, #111), color-mix(in srgb, var(--sc-accent) 55%, #222)); color:white; display:flex; align-items:end; justify-content:start; padding:1rem; min-height:10rem; border-radius:var(--sc-radius); font-weight:700; position:relative; overflow:hidden; }
.visual-tile:before, .photo-placeholder:before { content:""; width:8rem; height:8rem; background:rgba(255,255,255,.14); border-radius:50%; position:absolute; right:-2rem; top:-2rem; }
.visual-tile-lg { min-height:21rem; }
.section-heading { max-width:42rem; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; color:var(--sc-primary); font-size:.76rem; font-weight:800; }
.icon-chip, .forum-icon { width:2.8rem; height:2.8rem; display:grid; place-items:center; background:color-mix(in srgb, var(--sc-primary) 14%, var(--bs-body-bg)); color:var(--sc-primary); border-radius:.9rem; font-weight:800; }
.feature-card, .profile-card { transition:transform .2s ease, box-shadow .2s ease; }
.feature-card:hover, .profile-card:hover { transform:translateY(-4px); box-shadow:0 1rem 2.5rem rgba(0,0,0,.10); }
.cta-panel { background:color-mix(in srgb, var(--sc-primary) 10%, var(--bs-body-bg)); border:1px solid color-mix(in srgb, var(--sc-primary) 25%, var(--bs-border-color)); border-radius:calc(var(--sc-radius) * 1.4); }
.page-header { background:color-mix(in srgb, var(--sc-primary) 7%, var(--bs-body-bg)); margin-bottom:2rem; }
.forum-list .list-group-item { border-left:0; border-right:0; }
.avatar { width:2.75rem; height:2.75rem; min-width:2.75rem; border-radius:50%; color:white; background:var(--sc-primary); display:grid; place-items:center; font-weight:800; font-size:.8rem; }
.avatar-image { object-fit:cover; }
.post-card { border-left:3px solid color-mix(in srgb, var(--sc-primary) 45%, transparent); }
.profile-cover { min-height:13rem; align-items:center; justify-content:center; }
.profile-monogram { font-size:2.5rem; opacity:.9; }
.verified-badge { position:absolute; left:1rem; bottom:1rem; background:rgba(255,255,255,.90); color:#222; }
.profile-badges {
    position: absolute;
    left: 1.2rem;
    right: 1rem;
    bottom: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.profile-hero { background:linear-gradient(135deg, rgba(0,18,40,.95), rgba(52,12,54,.88)); }
.profile-avatar-xl { width:8rem; height:8rem; border-radius:1.5rem; background:rgba(255,255,255,.17); border:2px solid rgba(255,255,255,.45); display:block; font-size:2rem; font-weight:800; }
.profile-details-hero { border-radius:0 0 calc(var(--sc-radius) * 1.5) calc(var(--sc-radius) * 1.5); overflow:hidden; }
.profile-album-preview { width:100%; height:min(52vh,32rem); }
.photo-lg { min-height:22rem; }
.album-photo { min-height:16rem; border:0; flex-direction:column; align-items:center; justify-content:center; font-size:2rem; }
.album-photo span { font-size:.75rem; margin-top:.5rem; opacity:.75; }
.modal-photo { min-height:65vh; justify-content:center; align-items:center; font-size:4rem; }

/* Profile photo albums */
.photo-album-page-header { margin-bottom:2rem; }
.album-cover { width:100%; height:14rem; object-fit:cover; display:block; }
.album-empty-cover { min-height:14rem; align-items:center; justify-content:center; font-size:2.5rem; border-radius:0; }
.album-card { overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
.album-card:hover { transform:translateY(-4px); box-shadow:0 1rem 2.5rem rgba(0,0,0,.12); }
.album-card-description { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.album-toolbar { position:sticky; top:74px; z-index:10; backdrop-filter:blur(16px); background:color-mix(in srgb,var(--bs-body-bg) 88%,transparent); }
.photo-privacy-notice { border-color:color-mix(in srgb,var(--sc-primary) 20%,var(--bs-border-color)); }
.photo-album-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; border-radius:var(--sc-radius); }
.photo-button { cursor:zoom-in; background:transparent; border-radius:var(--sc-radius); overflow:hidden; }
.photo-button img { transition:transform .2s ease, filter .2s ease; }
.photo-button:hover img { transform:scale(1.025); filter:brightness(.9); }
.photo-button:focus-visible { outline:3px solid var(--sc-primary); outline-offset:3px; }
.photo-viewer .modal-body { background:#07090c; }
.photo-viewer .modal-body img { display:block; max-width:100%; max-height:75vh; margin:auto; object-fit:contain; }
.conversations-shell { min-height:calc(100vh - 75px); background:color-mix(in srgb, var(--sc-primary) 5%, var(--bs-body-bg)); }
.chat-list-card, .chat-card { height:72vh; overflow:hidden; }
.chat-list-card .list-group { overflow:auto; }
.chat-body { overflow:auto; background:color-mix(in srgb, var(--sc-primary) 3%, var(--bs-body-bg)); }
.chat-date { text-align:center; color:var(--bs-secondary-color); font-size:.75rem; margin:1rem; }
.message { max-width:75%; margin-bottom:1rem; }
.message.sent { margin-left:auto; text-align:right; }
.message .bubble { display:inline-block; padding:.75rem 1rem; border-radius:1rem; background:var(--bs-tertiary-bg); text-align:left; }
.message.sent .bubble { background:var(--sc-primary); color:white; }
.message small { display:block; margin-top:.25rem; color:var(--bs-secondary-color); }
.min-w-0 { min-width:0; }
.subforum-icon { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border-radius:.75rem; color:var(--bs-primary); background:color-mix(in srgb, var(--bs-primary) 8%, transparent); border:1px solid color-mix(in srgb, var(--bs-primary) 18%, transparent); }
.topic-row-unread { border-left:3px solid var(--bs-primary) !important; }
.notification-item-unread {
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--sc-primary) 12%, var(--bs-body-bg));
  border-left: 3px solid var(--sc-primary);
  font-weight: 600;
}
.notification-item-unread:hover,
.notification-item-unread:focus {
  color: var(--bs-body-color);
  background: color-mix(in srgb, var(--sc-primary) 18%, var(--bs-body-bg));
}
.topic-row-pinned { background:var(--bs-tertiary-bg); }
.moderator-toolbar { background:var(--bs-tertiary-bg); border:1px solid var(--bs-border-color); }
.moderation-bulk-notes { min-width:14rem; }
.post-card.is-reported { border-color:var(--bs-warning-border-subtle); }
.post-card.is-hidden { opacity:.78; border-style:dashed; }
.post-card .post-admin { background:var(--bs-tertiary-bg); border-top:1px solid var(--bs-border-color); }
.avatar.avatar-muted { background:var(--bs-secondary); }
.avatar.avatar-team { background:var(--bs-dark); }
.stat-card strong { font-size:1.35rem; }
.small-caps { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.sticky-side { position:sticky; top:84px; }
.audit-line { border-left:2px solid var(--bs-border-color); padding-left:1rem; }
.audit-line + .audit-line { margin-top:1rem; }
@media (max-width:991.98px) { .sticky-side { position:static; } }
@media (max-width:767.98px) { .post-layout,.post-header { flex-direction:column; } .post-actions .btn { flex:1 1 auto; } }
.forum-rich-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.forum-rich-text blockquote { margin:.5rem 0; padding:.5rem .75rem; border-left:3px solid var(--bs-primary); background:var(--bs-tertiary-bg); color:var(--bs-secondary-color); }
.registration-wrap { background:color-mix(in srgb, var(--sc-primary) 5%, var(--bs-body-bg)); min-height:calc(100vh - 74px); }
.registration-card { max-width:58rem; }
.registration-steps { display:flex; justify-content:center; max-width:54rem; margin-inline:auto; }
.step-item { flex:1; text-align:center; position:relative; color:var(--bs-secondary-color); }
.step-item:not(:last-child):after { content:""; position:absolute; top:1rem; left:60%; width:80%; border-top:2px solid var(--bs-border-color); }
.step-item span { width:2rem; height:2rem; display:grid; place-items:center; border-radius:50%; background:var(--bs-tertiary-bg); margin:0 auto .35rem; position:relative; z-index:1; font-size:.8rem; font-weight:700; }
.step-item.active { color:var(--sc-primary); font-weight:700; }
.step-item.active span { background:var(--sc-primary); color:white; }
.wizard-step { display:none; }
.wizard-step.active { display:block; }
.choice-card { height:100%; display:flex; flex-direction:column; gap:.35rem; border:1px solid var(--bs-border-color); border-radius:var(--sc-radius); padding:1rem; cursor:pointer; }
.choice-card:hover { border-color:var(--sc-primary); }
.choice-card span { color:var(--bs-secondary-color); font-size:.85rem; }
@media (max-width:767.98px){ .step-item small{display:none}.profile-avatar-xl{width:6rem;height:6rem}.chat-list-card{height:auto}.chat-card{height:70vh}.py-lg-6{padding-top:4rem!important;padding-bottom:4rem!important} }

body { background-image:radial-gradient(circle at 10% 0%, color-mix(in srgb,var(--sc-primary) 7%,transparent), transparent 30%); }
.card { border:1px solid color-mix(in srgb,var(--sc-primary) 16%,var(--bs-border-color)); }
.brand-mark { box-shadow:0 0 24px color-mix(in srgb,var(--sc-primary) 60%,transparent); }
.btn-primary { box-shadow:0 .4rem 1rem color-mix(in srgb,var(--sc-primary) 25%,transparent); }

/* ===== Midnight Club v2 ===== */
body {
  background:
    radial-gradient(circle at 15% 0%, rgba(0,180,216,.16), transparent 26rem),
    radial-gradient(circle at 85% 10%, rgba(255,77,141,.10), transparent 24rem),
    linear-gradient(180deg, #07111d 0, var(--bs-body-bg) 36rem);
  background-attachment:fixed;
}
[data-bs-theme="light"] body {
  background:
    radial-gradient(circle at 15% 0%, rgba(0,180,216,.14), transparent 26rem),
    radial-gradient(circle at 85% 10%, rgba(255,77,141,.10), transparent 24rem),
    linear-gradient(180deg, #eefbff 0, var(--bs-body-bg) 36rem);
}
.hero-section {
  min-height:720px;
  background:
    radial-gradient(circle at 78% 34%, rgba(0,180,216,.28), transparent 17rem),
    radial-gradient(circle at 62% 76%, rgba(255,77,141,.22), transparent 16rem),
    linear-gradient(135deg,#06111d 0%,#0b2031 50%,#1f0d29 100%);
}
.hero-section:before {
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(72,202,228,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,202,228,.06) 1px,transparent 1px);
  background-size:34px 34px;
}
.hero-section:after {
  content:"";
  position:absolute;
  width:20rem;height:20rem;border:1px solid rgba(72,202,228,.25);
  border-radius:50%; right:10%; top:20%;
  box-shadow:0 0 80px rgba(0,180,216,.14), inset 0 0 60px rgba(255,77,141,.08);
}
.hero-card {
  background:rgba(8,18,30,.62);
  border:1px solid rgba(72,202,228,.22);
  box-shadow:0 0 0 1px rgba(255,77,141,.05), 0 30px 100px rgba(0,0,0,.5);
}
.card {
  background:color-mix(in srgb,var(--bs-body-bg) 88%,transparent);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.profile-cover,.photo-placeholder,.visual-tile {
  background:
    linear-gradient(145deg,rgba(0,180,216,.86),rgba(19,30,62,.96) 52%,rgba(255,77,141,.76));
}
.page-header {
  background:
    linear-gradient(90deg, rgba(0,180,216,.09), rgba(255,77,141,.06)),
    transparent;
}

.trust-strip {
  background:color-mix(in srgb,var(--bs-body-bg) 86%,transparent);
  backdrop-filter:blur(12px);
}
.hero-section .container { position:relative; z-index:2; }
.hero-section h1 { text-shadow:0 8px 30px rgba(0,0,0,.22); }
.page-header { position:relative; overflow:hidden; }
.page-header:after {
  content:"";
  position:absolute;
  width:18rem;height:18rem;border-radius:50%;
  background:color-mix(in srgb,var(--sc-primary) 10%,transparent);
  filter:blur(55px);
  right:-5rem;top:-8rem;
}

/* Authentication */
.auth-page { min-height:100vh; display:flex; flex-direction:column; }
.auth-main { flex:1; display:flex; align-items:center; }
.auth-card { border-radius:1.4rem; overflow:hidden; }
.auth-card .card-body { padding:clamp(1.5rem,4vw,3rem); }
.auth-logo { width:3.4rem;height:3.4rem;display:grid;place-items:center;border-radius:1rem;background:var(--sc-primary);color:#fff;font-weight:900;box-shadow:0 0 35px color-mix(in srgb,var(--sc-primary) 55%,transparent); }
.form-floating>.form-control { border-radius:1rem; }
.password-wrap { position:relative; }
.password-wrap .form-control { padding-right:3.25rem; }
.password-toggle { position:absolute;right:.55rem;top:1.15rem;z-index:5;border:0;background:transparent;color:var(--bs-secondary-color);padding:.45rem; }
.auth-or { display:flex;align-items:center;gap:1rem;color:var(--bs-secondary-color);font-size:.8rem; }
.auth-or:before,.auth-or:after { content:"";height:1px;flex:1;background:var(--bs-border-color); }
.neon-frame { border:1px solid color-mix(in srgb,var(--sc-primary) 45%,var(--bs-border-color)); box-shadow:0 0 40px color-mix(in srgb,var(--sc-primary) 12%,transparent); }
.auth-compact { max-width:30rem;margin-inline:auto; }
.auth-bg-grid { background-image:linear-gradient(color-mix(in srgb,var(--sc-primary) 5%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--sc-primary) 5%,transparent) 1px,transparent 1px);background-size:32px 32px; }
.validation-hint { font-size:.78rem; }
.form-control:focus { border-color:var(--sc-primary); box-shadow:0 0 0 .25rem color-mix(in srgb,var(--sc-primary) 20%,transparent); }
@media (max-width:575.98px){ .auth-card{border-radius:1rem} }

/* Profile photo studio */
.photo-studio-cover {
  min-height:190px;
  background:linear-gradient(135deg,#051525,#24102c);
  position:relative;
  overflow:hidden;
}
.photo-studio-cover:after {
  content:"";
  position:absolute;
  width:22rem;
  height:22rem;
  right:-7rem;
  bottom:-9rem;
  border-radius:50%;
  background:var(--sc-primary);
  filter:blur(65px);
  opacity:.22;
}
.photo-studio-avatar {
  width:104px;
  height:104px;
  display:block;
  border-radius:50%;
  border:5px solid var(--bs-body-bg);
  object-fit:cover;
  box-shadow:0 .75rem 2rem rgba(0,0,0,.2);
}
.photo-studio-album-cover {
  width:100%;
  height:150px;
  display:block;
  object-fit:cover;
}
.photo-studio-album-placeholder {
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#073451,#71254b);
}
.photo-studio-album-placeholder:after {
  content:"";
  position:absolute;
  width:10rem;
  height:10rem;
  right:-2rem;
  top:-4rem;
  border-radius:50%;
  background:rgba(255,255,255,.1);
}
.photo-studio-thumb {
  width:100%;
  aspect-ratio:1;
  display:block;
  border-radius:.7rem;
  object-fit:cover;
}
.photo-studio-photo {
  position:relative;
}
.photo-delete-form {
  position:absolute;
  inset:.35rem .35rem auto auto;
  opacity:0;
  transform:scale(.85);
  transition:opacity .15s ease,transform .15s ease;
}
.photo-studio-photo:hover .photo-delete-form,
.photo-studio-photo:focus-within .photo-delete-form {
  opacity:1;
  transform:scale(1);
}
.photo-delete-button {
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  color:#fff;
  background:rgba(180,22,45,.92);
  box-shadow:0 .25rem .75rem rgba(0,0,0,.28);
  font-size:1.35rem;
  line-height:1;
}
.photo-delete-button:hover { background:#dc3545; }
.photo-album-drop-target {
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.photo-album-drop-target.is-dragging {
  border-color:var(--sc-primary);
  box-shadow:0 0 0 .25rem color-mix(in srgb,var(--sc-primary) 22%,transparent),0 18px 50px rgba(0,0,0,.18);
  transform:translateY(-2px);
}
.photo-album-drop-target.is-uploading {
  pointer-events:none;
  opacity:.65;
}
.photo-album-dropzone {
  position:relative;
  border:2px dashed color-mix(in srgb,var(--sc-primary) 38%,var(--bs-border-color));
  border-radius:.8rem;
  padding:.65rem;
  background:color-mix(in srgb,var(--sc-primary) 4%,var(--bs-body-bg));
}
.photo-album-dropzone-label {
  display:block;
  margin-bottom:.45rem;
  color:var(--bs-secondary-color);
  font-size:.75rem;
  text-align:center;
}
.photo-studio-empty,
.photo-studio-dropzone {
  border:2px dashed color-mix(in srgb,var(--sc-primary) 55%,var(--bs-border-color));
  border-radius:var(--sc-radius);
  background:color-mix(in srgb,var(--sc-primary) 5%,var(--bs-body-bg));
}
@media(max-width:767.98px) {
  .photo-studio-cover { min-height:155px; }
}
