/* ═══════════════════════════════════════════════════════════════════════
   INDABEEZ BETA — Main Stylesheet — v_BUILD_20260430 (CLEANED)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────────────────────── */
:root {
  --orange:  #FBB040;
  --orange2: #F0A030;
  --dark:    #0E0E14;
  --dark2:   #1A1A28;
  --cream:   #FAF8F4;
  --grey:    #F4F4F0;
  --border:  #E8E6E0;
  --muted:   #888888;
  --text:    #1A1A1A;
  --teal:    #11998E;
  --teal-l:  #E8F8F6;
  --pink:    #FF3CAC;
  --blue:    #2B86C5;
  --violet:  #784BA0;
  --green:   #27AE60;
  --red:     #E74C3C;
  --amber:   #F7971E;
  --shadow:  0 2px 16px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.13);
  --radius:  14px;
  --radius-sm: 8px;
  --nav-h:   76px;
}

/* ── Reset & Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; max-width:100%; overflow-x:hidden; }
body { font-family:'DM Sans','Segoe UI',system-ui,sans-serif; background:var(--cream); color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased; max-width:100%; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; }
input, textarea, select { font-family:inherit; }

/* ── Typography ──────────────────────────────────────────────────────── */
h1 { font-size:clamp(28px,4vw,48px); font-weight:800; line-height:1.1; }
h2 { font-size:clamp(22px,3vw,34px); font-weight:700; line-height:1.2; }
h3 { font-size:clamp(18px,2vw,24px); font-weight:700; line-height:1.3; }
h4 { font-size:16px; font-weight:600; }
p  { font-size:15px; line-height:1.7; color:#444; }

/* ── Layout ──────────────────────────────────────────────────────────── */
.container    { max-width:1280px; margin:0 auto; padding:0 24px; width:100%; }
.container-sm { max-width:880px;  margin:0 auto; padding:0 24px; width:100%; }
.section      { padding-top:64px; padding-bottom:64px; }
/* team341bu: changed from `padding:40px 0` to use logical top/bottom
   only. The shorthand `padding:40px 0` collapses horizontal padding
   to 0, which means a `.container.section-sm` div loses the 24px
   side padding that `.container` defined. On large screens, the
   contents (e.g. Discoveries grid on /index.php) then bleed
   edge-to-edge instead of staying inside the page gutter. */
.section-sm   { padding-top:40px; padding-bottom:40px; }

/* ── Navigation ──────────────────────────────────────────────────────── */
.nav { position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.95); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); height:var(--nav-h); display:flex; align-items:center; }
.nav-inner { width:100%; max-width:1280px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:20px; }
.nav-logo { height:60px; width:auto; object-fit:contain; }
.nav-logo-wrap { display:flex; flex-direction:column; align-items:center; flex-shrink:0; gap:1px; }
.nav-links { display:flex; align-items:center; gap:3px; overflow-x:auto; scrollbar-width:none; flex:1; list-style:none; padding:0; margin:0; }
.nav-links::-webkit-scrollbar { display:none; }
.nav-links li { flex-shrink:0; position:relative; }
.nav-links li a {
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap;
  transition:all .15s;
  text-decoration:none;
  display:block;
}
.nav-links li a:hover, .nav-links li a.active { background:rgba(251,176,64,0.1); color:var(--orange); }

/* ── Icon-only nav on desktop ≥ 900px ───────────────────────────
   The label text is wrapped in .nav-label and hidden; only the
   leading emoji icon (untouched, lives at ~20px) is visible.
   A CSS-only tooltip reveals the label below the icon on hover
   or keyboard focus.
   IMPORTANT: triggers on screen WIDTH, not text size — so XL
   text users still get the icon-only treatment instead of an
   even bigger menu that overflows. The tooltip itself uses a
   fixed 12px font so it stays compact regardless of user prefs. */
@media (min-width: 900px) {
  /* Take all the available horizontal space between logo and the
     right icons cluster, then center the items inside. flex:1 to
     grow fully (no shrink-to-fit) so the centering reference is
     the full slot. */
  .nav-links {
    flex: 1 1 auto;
    margin: 0;
    justify-content: center;
    gap: 6px;
    overflow-x: visible;  /* no scroll - icons fit easily at 9 items */
  }
  .nav-links li a {
    padding: 10px 12px;
    font-size: 20px;        /* emoji rendering size */
    line-height: 1;
  }
  .nav-links li a .nav-label {
    /* Hide the text but keep it in the DOM for screen readers
       and the tooltip ::after content. */
    position: absolute;
    width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* Tooltip — pure CSS, no JS. Reads the label from the data-tip
     attribute that PHP sets on every nav <a>. Hidden by default,
     fades in on hover/focus. Sized in fixed px so user text-size
     preferences don't blow it up. */
  .nav-links li a::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.88);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 1500;
  }
  .nav-links li a:hover::after,
  .nav-links li a:focus-visible::after {
    opacity: 1;
  }
  /* Active indicator: small orange dot UNDER the icon, replacing
     the orange text + background. More compact and doesn't fight
     the tooltip. */
  .nav-links li a.active {
    background: transparent;
    color: var(--orange);
    position: relative;
  }
  .nav-links li a.active::before {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--orange);
  }
}
.nav-icon-btn { position:relative; display:flex; align-items:center; padding:6px 8px; border-radius:8px; color:var(--muted); text-decoration:none; }
.nav-badge { position:absolute; top:2px; right:2px; min-width:15px; height:15px; background:var(--red); color:white; border-radius:8px; font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 3px; }
.nav-type-pill { font-size:10px; font-weight:800; padding:2px 8px; border-radius:10px; background:var(--orange); color:white; text-transform:uppercase; letter-spacing:.5px; display:block; text-align:center; }
.nav-cta { padding:8px 18px; background:var(--orange); color:white; border-radius:10px; font-size:13px; font-weight:700; text-decoration:none; }
.nav-user { display:flex; align-items:center; gap:8px; text-decoration:none; }
.nav-desktop-only { display:block; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 28px; border-radius:12px; font-size:15px; font-weight:600; border:none; cursor:pointer; font-family:inherit; text-decoration:none; }
.btn-primary { background:var(--orange); color:white; }
.btn-outline { background:transparent; border:1.5px solid var(--border); color:var(--text); }
.btn-sm { padding:8px 16px; font-size:13px; border-radius:8px; }
.btn-primary:hover { background:var(--orange2); }
.btn-outline:hover { border-color:var(--orange); color:var(--orange); }

/* ── Cards ───────────────────────────────────────────────────────────── */
.card { background:white; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; }
/* In grid contexts, cards stretch to fill their cell so all
   siblings line up at the bottom even when content lengths differ.
   This fixes the "1st card sticks up higher than others" effect on
   pros/curators/stars list pages.

   The OTHER half of that fix: the rule `.card + .card { margin-top:14px }`
   below (line ~190) was originally for vertical-stack lists. In a CSS
   grid container it applies to every card EXCEPT the first, pushing
   them down 14px, so the first card visually "sticks up". Neutralised
   here for grid contexts. */
[style*="display:grid"] > .card,
[style*="display: grid"] > .card,
.disc-grid > .card,
.cards-grid > .card,
div[style*="grid-template-columns"] > .card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  margin-top: 0 !important;
}
.card img { display:block; }
.card-body { padding:20px; }
.card + .card { margin-top:14px; }
.profile-main .card + .card { margin-top:0; }

/* ── Forms ───────────────────────────────────────────────────────────── */
.form-group { margin-bottom:20px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.form-input { width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:var(--radius-sm); font-size:15px; background:white; transition:border-color .15s; box-sizing:border-box; }
.form-input:focus { outline:none; border-color:var(--orange); }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.form-hint { font-size:11px; color:var(--muted); margin-top:4px; }
.form-textarea { resize:vertical; min-height:80px; }

/* ── Badges ──────────────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.badge-orange { background:rgba(251,176,64,0.12); color:var(--orange2); }
.badge-teal   { background:var(--teal-l); color:var(--teal); }
.badge-violet { background:rgba(120,75,160,0.1); color:var(--violet); }
.badge-red    { background:rgba(231,76,60,0.1); color:var(--red); }
.badge-amber  { background:rgba(247,151,30,0.1); color:var(--amber); }
.badge-amber-fix { background:rgba(247,151,30,0.1); color:var(--amber); }

/* ── Honest Beez badges ──────────────────────────────────────────────── */
.honest-badge    { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; background:rgba(17,153,142,0.08); border:1px solid rgba(17,153,142,0.2); color:var(--teal); font-size:12px; font-weight:600; }
.beehonest-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; background:rgba(251,176,64,0.08); border:1px solid rgba(251,176,64,0.25); color:var(--orange2); font-size:12px; font-weight:600; }

/* ── Alerts ──────────────────────────────────────────────────────────── */
.alert         { padding:12px 18px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:14px; font-weight:600; }
.alert-success { background:rgba(39,174,96,0.1); color:var(--green); border:1px solid rgba(39,174,96,0.2); }
.alert-error   { background:rgba(231,76,60,0.1); color:var(--red); border:1px solid rgba(231,76,60,0.2); }
.alert-info    { background:rgba(43,134,197,0.1); color:var(--blue); border:1px solid rgba(43,134,197,0.2); }

/* ── Section headers ─────────────────────────────────────────────────── */
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.section-title  { font-size:20px; font-weight:800; }

/* ── Profile layout ──────────────────────────────────────────────────── */
.profile-layout { display:grid; grid-template-columns:1fr 260px; gap:20px; align-items:start; }
.profile-layout > * { min-width:0; }
.profile-main-grid { display:grid; grid-template-columns:3fr 2fr; gap:14px; align-items:stretch; }
.profile-main-grid > * { min-width:0; }

/* ── Profile hero card ───────────────────────────────────────────────── */
.profile-hero-card { background:white; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow); overflow:hidden; margin-bottom:20px; }
.profile-cover { width:100%; height:180px; background:linear-gradient(135deg,var(--dark2),#2a1a3e); overflow:hidden; position:relative; }
.profile-cover-img { width:100%; height:100%; object-fit:cover; }
.profile-info-row { display:flex; flex-direction:column; align-items:flex-start; gap:0; padding:0 20px 20px; width:100%; box-sizing:border-box; }
.profile-avatar-wrap { flex-shrink:0; margin-top:-32px; position:relative; }

/* Avatar container — strict fixed size */
div.profile-avatar { flex-shrink:0; width:80px; height:80px; overflow:hidden; border-radius:50%; border:3px solid white; }
div.profile-avatar img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; border-radius:0; }
/* Avatar image class (non-container) */
img.profile-avatar { width:80px; height:80px; border-radius:50%; border:3px solid white; object-fit:cover; object-position:top; }

.profile-info { width:100%; min-width:0; padding-top:8px; overflow:hidden; box-sizing:border-box; }
.profile-info > div { width:100%; box-sizing:border-box; }
.profile-name-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.profile-name { font-size:20px; font-weight:800; line-height:1.2; display:inline-block; vertical-align:middle; }
.verified { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:var(--teal); color:white; font-size:11px; font-weight:900; margin-left:4px; vertical-align:middle; }
.profile-meta { font-size:13px; color:var(--muted); margin-bottom:6px; }

/* ── Profile stats bar ───────────────────────────────────────────────── */
.profile-stats-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0; }
.profile-stat-pill { display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; border:1px solid var(--border); font-size:12px; font-weight:600; background:var(--grey); }
.profile-stat-pill.beez { color:var(--orange); border-color:rgba(251,176,64,0.3); background:rgba(251,176,64,0.06); }

/* ── Profile action buttons ──────────────────────────────────────────── */
.profile-actions-bar .btn-sm,
.profile-actions-bar a.btn-sm,
.profile-actions-bar button.btn-sm { padding:6px 12px !important; font-size:12px !important; height:32px !important; line-height:1 !important; white-space:nowrap; }

/* ── Profile pills ───────────────────────────────────────────────────── */
.profile-pills { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0; }
.profile-pill  { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; background:rgba(251,176,64,0.1); color:var(--orange2); border:1px solid rgba(251,176,64,0.2); text-transform:uppercase; letter-spacing:.5px; }
.profile-bio-card { padding:20px; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.profile-main { display:flex; flex-direction:column; gap:14px; }
.profile-aside { display:flex; flex-direction:column; gap:12px; position:sticky; top:80px; }
.sidebar-section-title { font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px; display:block; }
.premium-lock { background:rgba(251,176,64,0.08); border:1px solid rgba(251,176,64,0.2); border-radius:8px; padding:6px 10px; font-size:11px; color:var(--orange2); font-weight:600; }

/* ── Feed ────────────────────────────────────────────────────────────── */
.feed-main-grid { display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
.feed-main-grid > * { min-width:0; }
.feed-sidebar-left  { display:flex; flex-direction:column; gap:14px; }
.feed-sidebar-right { display:flex; flex-direction:column; gap:14px; position:sticky; top:80px; }
.post-card { background:white; border-radius:var(--radius); border:1px solid var(--border); margin-bottom:16px; overflow:hidden; }
#feed-posts-container > div { margin-bottom:16px; }
.like-icon  { display:inline; }
.like-count { display:inline; }
.like-label { font-size:12px; color:var(--muted); }
.cc { font-size:12px; color:var(--muted); }
.ci { font-size:18px; line-height:1; }

/* ── Journal ─────────────────────────────────────────────────────────── */
.journal-wrap { display:flex; flex-direction:column; gap:0; }

/* ── Dashboard ───────────────────────────────────────────────────────── */
.tab-panel  { display:none; max-width:100%; box-sizing:border-box; }
.dash-tab   { transition:color .15s, border-color .15s; }
.disc-row   { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-bottom:10px; }
.rep-row    { display:grid; grid-template-columns:1fr 1fr auto; gap:8px; margin-bottom:10px; }
.grid-2     { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.grid-3     { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.fw-item    { text-decoration:none; }
.fl-item    { text-decoration:none; }
.mbb-disconnect-top { display:none; align-items:center; gap:2px; }

/* ── Mobile bottom bar ───────────────────────────────────────────────── */
.mobile-bottom-bar { display:none; }
.mbb-item { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-decoration:none; color:var(--muted); font-size:10px; font-weight:600; padding:8px 0; transition:color .15s; min-height:56px; }
.mbb-item.active, .mbb-active, .mbb-item:hover { color:var(--orange); }
/* team315: unify icon container size across emoji / SVG / avatar so
   the bottom row aligns perfectly. Emojis take their own font
   metrics (often with extra ascent/descent in Apple Color Emoji),
   pushing them visually higher or lower than the SVG/avatar. Lock
   container to 26x26 with flex-centering, force vertical-align:middle
   so the baseline trick doesn't kick in, and override any inline
   width/height on children. */
.mbb-icon {
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  vertical-align:middle;
  padding:0;
  margin:0;
  box-sizing:content-box;
}
.mbb-icon > * {
  vertical-align:middle;
  line-height:1;
}
.mbb-icon svg, .mbb-icon img {
  display:block;
  width:26px;
  height:26px;
}

/* ── Honest Beez project toggle ──────────────────────────────────────── */
.hb-radio { display:none; }
.hb-label { display:block; padding:10px; border-radius:8px; border:2px solid var(--border); text-align:center; font-size:12px; font-weight:700; cursor:pointer; background:white; user-select:none; -webkit-user-select:none; transition:all .15s; }
.hb-honest .hb-label { color:var(--teal); }
.hb-beehonest .hb-label { color:#C8850A; }
#hb_honest:checked + .hb-label { border-color:var(--teal) !important; background:rgba(17,153,142,0.06) !important; }
#hb_beehonest:checked + .hb-label { border-color:#F7971E !important; background:rgba(200,133,10,0.06) !important; }

/* ── Footer ──────────────────────────────────────────────────────────── */
.footer { background:var(--dark); color:rgba(255,255,255,0.7); padding:48px 0 0; margin-top:60px; }
.footer-inner { max-width:1280px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; }
.footer-logo { height:32px; width:auto; margin-bottom:12px; }
.footer-desc { font-size:13px; line-height:1.7; color:rgba(255,255,255,0.45); max-width:280px; }
.footer-honest { font-size:12px; font-weight:700; color:var(--orange); }
.footer-title { font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:14px; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-links a { font-size:13px; color:rgba(255,255,255,0.55); text-decoration:none; transition:color .15s; }
.footer-links a:hover { color:var(--orange); }
.footer-bottom { max-width:1280px; margin:32px auto 0; padding:20px 24px; border-top:1px solid rgba(255,255,255,0.08); display:flex; justify-content:space-between; align-items:center; font-size:12px; color:rgba(255,255,255,0.3); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media(max-width:900px) {
  .profile-layout { grid-template-columns:1fr; }
  .profile-aside { order:2; position:static; }
  .profile-main-grid { grid-template-columns:1fr; }
  .feed-main-grid { grid-template-columns:1fr; }
  .nav-desktop-only { display:none !important; }
}

@media(max-width:768px) {
  /* Show disconnect button on mobile */
  .mbb-disconnect-top { display:flex !important; margin-left:auto; }
  #nav-right-icons { display:none !important; }
  /* Nav fixed on mobile — translateZ GPU promote keeps it pinned to
     viewport on iOS Safari (same fix as the bottom bar below). */
  #main-nav { position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:9999 !important; background:rgba(255,255,255,0.97) !important; box-shadow:0 2px 8px rgba(0,0,0,0.1) !important; transform:translateZ(0) !important; -webkit-transform:translateZ(0) !important; will-change:transform; }
  .nav { position:fixed; top:0; left:0; right:0; z-index:9999; background:rgba(255,255,255,0.97); }
  .nav-inner { padding:0 16px; min-height:60px; }
  .nav-links, #nav-right-icons { display:none !important; }
  .nav-logo { height:42px; }
  .nav-logo-wrap { flex-direction:row; align-items:center; gap:8px; position:static; }
  /* Pill: vertically centered next to the logo. The -4px margin-top
     nudges it up because strict align-self:center sat slightly below
     the visual center of the logo (the bee+wordmark has more visual
     mass below its bbox center than above). */
  .nav-type-pill { position:static !important; left:auto !important; transform:none !important; align-self:center !important; margin-top:-4px !important; }

  /* Mobile bottom bar — promoted to its own GPU layer (translateZ +
     will-change) so iOS Safari treats it as a real overlay and keeps
     it pinned to the viewport while scrolling. Without this, in some
     iOS versions, the bottom bar drifts mid-scroll (regression seen
     after adding body padding-top for the top-nav clearance). */
  .mobile-bottom-bar { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:200; background:rgba(255,255,255,0.97); backdrop-filter:blur(12px); border-top:1px solid var(--border); height:calc(56px + env(safe-area-inset-bottom,0)); transform:translateZ(0); -webkit-transform:translateZ(0); will-change:transform; }
  /* Bottom-bar offset only. Top spacing is handled by helpers.php
     (which injects body{padding-top:78px} inline at every pageload).
     We deliberately do NOT use html{padding-top} here because Safari
     iOS positions `position:fixed` children relative to the html box
     when html has padding, and the bottom-bar starts floating mid-page
     while scrolling. Keeping html clean preserves correct viewport
     behaviour for fixed elements (top nav + bottom bar). */
  body { padding-bottom:calc(60px + env(safe-area-inset-bottom,0)); }

  /* Layout — on mobile, force-reduce horizontal padding on any
     container, even those with inline styles set higher (32px+). */
  .container, .container-sm { padding-left:14px !important; padding-right:14px !important; }
  #journal-section { padding-left:0 !important; padding-right:0 !important; }
  .profile-cover { height:140px; }
  .grid-2 { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:6px; text-align:center; }
}

@media(max-width:600px) {
  .grid-2 { grid-template-columns:1fr; }
}

@media(max-width:480px) {
  /* Profile */
  div.profile-avatar { width:64px !important; height:64px !important; }
  .profile-name { font-size:16px; }
  .profile-info-row { padding:0 12px 16px; gap:10px; flex-wrap:nowrap; align-items:flex-start; }
  .profile-info { min-width:0; width:0; flex:1; }
  .profile-actions-bar { flex-wrap:wrap; gap:4px; }
  .profile-actions-bar .btn-sm { padding:5px 8px !important; font-size:11px !important; }
  .profile-stats-bar { gap:8px; font-size:11px; }
  /* Projects */
  .project-card-img { width:56px !important; height:56px !important; }
  .project-card-yt  { width:80px !important; height:50px !important; }
  .right-now-inner  { flex-direction:column !important; }
}

/* ── Mobile padding-top below the fixed nav ─────────────────────────────
   On mobile the nav is position:fixed (see line 231), so it doesn't
   reserve space in the flow. The body padding-top above (78px) does
   that job — every page automatically clears the nav. The
   .artist-page-top class kept for backward compat but no longer
   strictly needed. */
@media(max-width:768px) {
  .artist-page-top { padding-top:8px !important; }
}

/* ── Messages + Search 2-col → 1-col on mobile ───────────────────────── */
@media(max-width:768px) {
  .profile-grid-2col { grid-template-columns:1fr !important; }
  .search-layout-2col { grid-template-columns:1fr !important; }
  .search-layout-2col > *:first-child { display:none; } /* hide sidebar filters on mobile */
}

/* ── Project card mobile: stack image + text vertically ─────────────── */
@media(max-width:480px) {
  .project-card-inner { flex-direction:column !important; }
  .project-card-yt { width:100% !important; height:0 !important; padding-top:56.25% !important; }
  .project-card-img { width:100% !important; height:160px !important; border-radius:8px !important; }
}

/* ── projects.php card mobile ────────────────────────────────────────── */
@media(max-width:600px) {
}

/* ── projects.php card layout ────────────────────────────────────────── */

@media(max-width:600px) {
  /* Top row: small image left + action buttons right */
  /* Reorder: cover + actions side by side, then text below */
  /* Actions row sits next to the image */
}


/* ── projects.php card — compact media list ──────────────────────────── */
/* Desktop + mobile: image left 90px, content right — NO column flip */
.proj-card { overflow:hidden; position:relative; }
@media(min-width:600px) {
  .proj-card { border-radius:var(--radius); }
  .proj-cover { width:120px !important; min-height:120px !important; }
}

/* ── Auth pages (login, register) ────────────────────────────────────── */
.auth-wrap  { min-height:calc(100vh - var(--nav-h)); display:flex; align-items:center; justify-content:center; padding:40px 16px; background:var(--cream); }
.auth-card  { background:white; border-radius:20px; border:1px solid var(--border); box-shadow:var(--shadow); padding:40px 36px; width:100%; max-width:440px; }
.auth-logo  { display:block; margin:0 auto 24px; }
.auth-title { font-size:24px; font-weight:900; text-align:center; margin-bottom:6px; }
.auth-sub   { font-size:14px; color:var(--muted); text-align:center; margin-bottom:28px; }
.auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--muted); font-size:12px; }
.auth-divider::before, .auth-divider::after { content:''; flex:1; height:1px; background:var(--border); }
.auth-footer { text-align:center; font-size:13px; color:var(--muted); margin-top:20px; }
.auth-footer a { color:var(--orange); font-weight:600; }
.auth-type-btn { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px; border:2px solid var(--border); border-radius:12px; cursor:pointer; background:white; transition:all .15s; flex:1; }
.auth-type-btn.active { border-color:var(--orange); background:rgba(251,176,64,0.06); }

/* ── Auth type switch (register page) ───────────────────────────────── */
.auth-type-switch { display:grid; gap:8px; margin-bottom:20px; }

/* ── Sidebar list show-more toggle (mobile only) ─────────────────────── */
/* Mobile shows first 8 avatars + "Show N more" button. Desktop shows
   all (the button stays display:none and extras stay visible). */
@media (max-width: 768px) {
  .sidebar-list-card .sidebar-list-extra { display: none !important; }
  .sidebar-list-card.sl-expanded .sidebar-list-extra { display: contents !important; }
  .sidebar-list-card .sidebar-list-toggle { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ── PREMIUM DESIGN LAYER (team192) ─────────────────────────────────────
   Subtle upgrades to raise perceived quality without rebuilding pages.
   Applied at the END of the stylesheet so it overrides earlier rules.
   ═══════════════════════════════════════════════════════════════════════ */

/* Refined neutrals — slightly warmer borders, softer shadows */
:root {
  --border:        #ECE9E1;
  --border-soft:   #F2EFE7;
  --shadow-xs:     0 1px 2px rgba(20,18,12,0.04);
  --shadow-sm:     0 2px 8px rgba(20,18,12,0.05), 0 1px 2px rgba(20,18,12,0.04);
  --shadow:        0 6px 20px rgba(20,18,12,0.06), 0 2px 4px rgba(20,18,12,0.04);
  --shadow-lg:     0 16px 40px rgba(20,18,12,0.10), 0 4px 12px rgba(20,18,12,0.06);
  --shadow-hover:  0 12px 32px rgba(20,18,12,0.10), 0 4px 8px rgba(20,18,12,0.05);
  /* Cubic-bezier "expressive" — used in modern design systems */
  --ease:          cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  /* Subtle accent for premium-looking highlights */
  --accent-tint:   rgba(251, 176, 64, 0.06);
}

/* Typography — letter-spacing tweaks for a more crafted feel */
body { font-feature-settings: "kern" 1, "liga" 1, "calt" 1; }
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }
h3 { letter-spacing: -0.01em; }
.btn, button, .nav-cta { letter-spacing: -0.005em; }

/* Cards — soften borders, refine shadows, smooth hover */
.card, .settings-card {
  border-color: var(--border) !important;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { box-shadow: var(--shadow-sm); }

/* Buttons — refined motion + subtle elevation */
.btn {
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .15s var(--ease),
              box-shadow .25s var(--ease);
}
.btn-primary {
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,
              0 4px 12px rgba(251,176,64,0.28);
}
.btn-primary:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,
              0 8px 20px rgba(251,176,64,0.36);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline { transition: all .2s var(--ease); }
.btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--accent-tint);
}

/* Navigation — slightly more refined feel */
.nav {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: rgba(232, 230, 224, 0.6);
}
html[data-theme="dark"] .nav {
  background: rgba(12, 12, 18, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.04);
}

/* Inputs — softer borders, focus ring */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]),
textarea, select {
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="submit"]),
textarea:focus, select:focus {
  outline: none;
  border-color: var(--orange) !important;
  box-shadow: 0 0 0 4px rgba(251, 176, 64, 0.15);
}

/* Refined pill / badge */
.nav-type-pill {
  background: linear-gradient(135deg, var(--orange) 0%, #F0A030 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset,
              0 2px 6px rgba(251,176,64,0.30);
}

/* Subtle hairline borders for premium look */
.card,
.settings-card,
.opp-card,
.profile-card {
  position: relative;
}

/* Image rendering — disable subpixel artifacts on retina */
img, svg { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* Smooth scroll for in-page anchor links */
html { scroll-padding-top: calc(var(--nav-h) + 16px); }

/* Selection color — orange tint instead of default blue */
::selection { background: rgba(251, 176, 64, 0.30); color: inherit; }
::-moz-selection { background: rgba(251, 176, 64, 0.30); color: inherit; }

/* Avatar / round media — subtle inner ring for "lifted" feel */
.avatar-round,
img[style*="border-radius:50%"],
img[style*="border-radius: 50%"] {
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04), var(--shadow-xs);
}
html[data-theme="dark"] .avatar-round,
html[data-theme="dark"] img[style*="border-radius:50%"],
html[data-theme="dark"] img[style*="border-radius: 50%"] {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}

/* Premium body background — very subtle gradient instead of flat */
body { background: linear-gradient(180deg, #FAF8F4 0%, #F7F3EC 100%); }
html[data-theme="dark"] body { background: linear-gradient(180deg, #0C0C12 0%, #0F0F18 100%); }

/* team341z/aa: card-soft-bg for muted cards (e.g. shared project banner).
   Light theme keeps the cool blue tint. Dark theme uses a noticeably
   darker tone (vs the post card itself) so the shared-project block
   reads as "card-in-card" elevation rather than the same surface. */
:root {
  --card-soft-bg: #F0F4F8;
}
html[data-theme="dark"] {
  --card-soft-bg: #0F0F18;
}

/* Improved link hover */
a { transition: color .15s var(--ease); }

/* Container max-widths refined — slightly tighter for readability */
.container-sm { max-width: 920px; }

/* ── Subtle entrance animations ─────────────────────────────────
   Premium feel: cards fade in from below on first paint. Honors
   prefers-reduced-motion. */
@keyframes animFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-fade-up {
  animation: animFadeUp .55s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
.anim-fade-up:nth-child(2)  { animation-delay: .05s; }
.anim-fade-up:nth-child(3)  { animation-delay: .10s; }
.anim-fade-up:nth-child(4)  { animation-delay: .15s; }
.anim-fade-up:nth-child(5)  { animation-delay: .20s; }
.anim-fade-up:nth-child(6)  { animation-delay: .25s; }
.anim-fade-up:nth-child(7)  { animation-delay: .30s; }
.anim-fade-up:nth-child(8)  { animation-delay: .35s; }
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up { animation: none; }
}

/* Footer — refined separator */
footer, .footer { border-top: 1px solid var(--border-soft); }


/* team341aq: dual-logo approach. Both light and dark variants are
   emitted side by side in the DOM; CSS picks the visible one based
   on the active theme. This way the dark-mode-auto JS tick (which
   flips html[data-theme] at sunset) swaps the logo too without
   needing a page refresh. */
.indabeez-logo-wrap .logo-dark { display: none !important; }
html[data-theme="dark"] .indabeez-logo-wrap .logo-light { display: none !important; }
html[data-theme="dark"] .indabeez-logo-wrap .logo-dark { display: block !important; }

/* team341bh: Dark mode fix for "Represented by" / "Management" cards
   on artist.php. They use background: var(--teal-l) which is a very
   pale mint (#E8F8F6). In dark mode the default text colour becomes
   light/white, which then reads as white-on-pale-mint — illegible.
   Force a dark text colour inside teal-l blocks regardless of theme. */
html[data-theme="dark"] [style*="background:var(--teal-l)"],
html[data-theme="dark"] [style*="background: var(--teal-l)"] {
  color: #0C0C12 !important;
}
html[data-theme="dark"] [style*="background:var(--teal-l)"] *,
html[data-theme="dark"] [style*="background: var(--teal-l)"] * {
  color: #0C0C12;
}
html[data-theme="dark"] [style*="background:var(--teal-l)"] a {
  color: var(--teal) !important;
}
/* Same for the "card-body" cards that wrap the represented-by widget
   in artist.php: card-body uses var(--grey) which is also light. */
html[data-theme="dark"] .card-body[style*="background:var(--grey)"],
html[data-theme="dark"] .card-body[style*="background: var(--grey)"] {
  background: #1A1A24 !important;
  color: rgba(255,255,255,0.92);
}

/* team341bi: dark mode fix for the share dropdown menu on feed posts.
   The menu uses inline `background:white` with text in `var(--text)`,
   which in dark mode is white → white-on-white = invisible. Override
   to a dark elevated surface with light text. Applies to all elements
   matching the share menu pattern (id starts with share-menu-, plus
   the inline-styled pin-sub dropdown for group album pinning). */
html[data-theme="dark"] [id^="share-menu-"] {
  background: #1F1F2A !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] [id^="share-menu-"] button,
html[data-theme="dark"] [id^="share-menu-"] a {
  color: rgba(255,255,255,0.92) !important;
}
html[data-theme="dark"] [id^="share-menu-"] button:hover,
html[data-theme="dark"] [id^="share-menu-"] a:hover {
  background: rgba(255,255,255,0.06) !important;
}
/* Pin sub-menu (album picker) inside share-menu has its own nested bg */
html[data-theme="dark"] [id^="pin-sub-"] {
  background: rgba(255,255,255,0.05) !important;
}
html[data-theme="dark"] [id^="pin-sub-"] button {
  color: rgba(255,255,255,0.88) !important;
}
html[data-theme="dark"] [id^="pin-sub-"] button:hover {
  background: rgba(255,255,255,0.10) !important;
}

/* team341bl: dark mode fix for floating dropdowns used in Pro manager
   pages (pro.php #curator-drop, admin.php #admin-curator-drop, etc.).
   They use inline `background:white` (or var(--card-bg,white)) with
   nested .item children styled with text-color var(--dark). In dark
   mode that becomes white-on-white. Force a dark elevated surface
   with light text, and override the per-item hover bg. */
html[data-theme="dark"] #curator-drop,
html[data-theme="dark"] #admin-curator-drop,
html[data-theme="dark"] [id$="-curator-drop"],
html[data-theme="dark"] [id$="-search-drop"] {
  background: #1F1F2A !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
}
html[data-theme="dark"] #curator-drop > div,
html[data-theme="dark"] #admin-curator-drop > div,
html[data-theme="dark"] [id$="-curator-drop"] > div,
html[data-theme="dark"] [id$="-search-drop"] > div {
  color: rgba(255,255,255,0.92) !important;
  border-bottom-color: rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] #curator-drop > div span,
html[data-theme="dark"] #admin-curator-drop > div span,
html[data-theme="dark"] [id$="-curator-drop"] > div span,
html[data-theme="dark"] [id$="-search-drop"] > div span {
  color: rgba(255,255,255,0.92) !important;
}
html[data-theme="dark"] #curator-drop > div:hover,
html[data-theme="dark"] #admin-curator-drop > div:hover,
html[data-theme="dark"] [id$="-curator-drop"] > div:hover,
html[data-theme="dark"] [id$="-search-drop"] > div:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* j26: cartes profil followers/following — fond dark stable (le selecteur d'attribut casse a la re-serialisation du style inline au survol) */
html[data-theme="dark"] .follow-pcard,
body.dark-mode .follow-pcard,
html.dark .follow-pcard { background:#16161E !important; border-color:#26263A !important; }