/* TinkrHub — playful, rounded, friendly. Palette matched to the cube logo
   (violet + navy on cool white), adapted from PROJECT.md §7. */

:root {
  /* Palette matched to the logo: bright-purple "T" + navy stroke on a cool
     white cube, warmed up with a coral accent reserved for the upvote. */
  --violet:  #6048D8;   /* logo purple — primary / CTAs / links-active */
  --violet-dark: #4830A8;
  --teal:   #17C0B4;   /* secondary accent */
  --teal-dark: #0F9D93;
  --coral:  #FF6F61;   /* warm accent — upvote only */
  --coral-dark: #ED5C4E;
  --cream:  #F6F6FC;   /* cool light background (the logo's white cube) */
  --ink:    #15233E;   /* logo navy stroke — dark text */
  --yellow: #FFC857;   /* spark accent, highlights */
  --muted:  #6E6A85;   /* secondary text (cool gray) */

  --danger: #E5484D;   /* errors only — kept red so they read as errors */
  --danger-dark: #C13438;

  --card-bg: #ffffff;
  --border: #ECEAF6;
  --border-strong: #DBD6F0;
  --shadow: 0 2px 0 rgba(22, 25, 46, 0.05);

  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --font-head: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-head {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.4em;
}

a { color: var(--teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------------------------------------------------------------- Nav */
.nav {
  background: var(--cream);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--violet), var(--yellow));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  box-shadow: var(--shadow);
}
.nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-link {
  color: var(--ink);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: 0.96rem;
}
.nav-link:hover { background: #fff; text-decoration: none; }
.nav-link.is-active { color: var(--violet-dark); }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--border);
  border: 2px solid #fff;
  box-shadow: var(--shadow);
}
.avatar-sm { width: 28px; height: 28px; }
.avatar-lg { width: 96px; height: 96px; border-radius: 28px; }
.avatar-fallback {
  display: grid; place-items: center;
  background: var(--teal); color: #fff;
  font-family: var(--font-head); font-weight: 600;
}

/* ---------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--violet); color: #fff; }
.btn-primary:hover { background: var(--violet-dark); color: #fff; }
.btn-teal { background: var(--teal); color: #fff; }
.btn-teal:hover { background: var(--teal-dark); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--cream); }
.btn-block { width: 100%; }
.btn-lg { font-size: 1.08rem; padding: 14px 26px; }
.btn-google {
  background: #fff; color: var(--ink);
  border: 1px solid var(--border-strong);
}
.btn-google:hover { background: #f3f2fb; }

/* ---------------------------------------------------------------- Hero */
.hero {
  text-align: center;
  padding: 60px 24px 46px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(115% 130% at 50% -20%, rgba(96, 72, 216, 0.30), rgba(96, 72, 216, 0) 60%),
    radial-gradient(80% 90% at 88% 8%, rgba(23, 192, 180, 0.16), rgba(23, 192, 180, 0) 55%),
    radial-gradient(80% 90% at 10% 95%, rgba(255, 200, 87, 0.12), rgba(255, 200, 87, 0) 55%),
    linear-gradient(180deg, #FCFBFF, var(--cream));
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.5px;
  background: linear-gradient(120deg, var(--violet) 28%, var(--ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero p { color: var(--muted); font-size: 1.15rem; max-width: 560px; margin: 0 auto 24px; }
.hero .spark { color: var(--yellow); -webkit-text-fill-color: var(--yellow); }
.hero-cta { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- Toggle / pills */
.toggle-row {
  display: flex; align-items: center; gap: 12px;
  margin: 8px 0 22px;
  flex-wrap: wrap;
}
.seg {
  display: inline-flex;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 4px;
}
.seg a {
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--muted);
}
.seg a:hover { text-decoration: none; color: var(--ink); }
.seg a.is-active { background: var(--violet); color: #fff; }

.section-title { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.section-title .count { color: var(--muted); font-size: 0.95rem; font-weight: 500; }

/* ---------------------------------------------------------------- App grid + cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 10px 24px rgba(22, 25, 46, 0.08);
}
.card-thumb {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, #ECE7FB, #E1F6F3);
  border-bottom: 1px solid var(--border);
}
.card-body { padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-title { font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; color: var(--ink); }
.card-title a { color: inherit; }
.card-pitch { color: var(--muted); font-size: 0.95rem; margin: 0; flex: 1; }
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.maker-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.88rem; }
.maker-chip:hover { color: var(--ink); text-decoration: none; }

/* tags */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .2px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: #ECE7FB;
  color: var(--violet-dark);
}
.tag.teal { background: #E0F5F1; color: var(--teal-dark); }

/* ---------------------------------------------------------------- Upvote pill */
.upvote {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-family: var(--font-head);
  font-weight: 600;
  cursor: pointer;
  transition: all .12s ease;
}
.upvote .arrow { font-size: 1rem; line-height: 1; }
.upvote:hover { border-color: var(--coral); color: var(--coral-dark); }
.upvote.is-active {
  background: var(--coral); border-color: var(--coral); color: #fff;
  box-shadow: 0 3px 0 var(--coral-dark);
}
.upvote.is-active:hover { background: var(--coral-dark); color:#fff; }
.upvote-lg { padding: 12px 20px; font-size: 1.1rem; }

/* ---------------------------------------------------------------- Forms */
.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow);
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.95rem; }
.field .hint { color: var(--muted); font-size: 0.84rem; margin: 4px 0 0; }
.input, .textarea, .select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(23, 192, 180, 0.18);
  background: #fff;
}
.textarea { min-height: 120px; resize: vertical; }

.tag-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-check { position: relative; }
.tag-check input { position: absolute; opacity: 0; pointer-events: none; }
.tag-check label {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
}
.tag-check input:checked + label { background: var(--teal); border-color: var(--teal); color: #fff; }

.field-error { color: var(--danger-dark); font-size: 0.85rem; margin-top: 5px; }
.input.has-error { border-color: var(--danger); }

.thumb-preview {
  margin-top: 10px;
  max-width: 280px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* file input */
.file-drop {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: var(--muted);
  background: var(--cream);
  cursor: pointer;
}
.file-drop:hover { border-color: var(--teal); }
.file-drop input { display: none; }

/* ---------------------------------------------------------------- Detail page */
.detail-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
.detail-shot {
  width: 100%; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: #fff;
}
.detail-side {
  position: sticky; top: 84px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
}
.detail-meta { color: var(--muted); font-size: 0.9rem; display: flex; gap: 14px; flex-wrap: wrap; }
.kv { margin-top: 16px; }
.kv .k { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.kv .v { margin-top: 2px; }
.prose { white-space: pre-wrap; }

/* ---------------------------------------------------------------- Comments */
.comment-list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.comment {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.comment.reply { margin-left: 34px; background: var(--cream); }
.comment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.comment-name { font-weight: 600; font-size: 0.92rem; }
.comment-time { color: var(--muted); font-size: 0.8rem; }
.comment-body { margin: 0; }
.comment-actions { margin-top: 6px; }
.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--teal-dark); font: inherit; font-size: 0.84rem; font-weight: 600;
}
.reply-form { margin: 8px 0 0 34px; display: none; }
.reply-form.open { display: block; }

/* ---------------------------------------------------------------- Profile */
.profile-head {
  display: flex; gap: 22px; align-items: center;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; margin-bottom: 26px;
}
.collab-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #E4F4F1; color: var(--teal-dark);
  padding: 5px 12px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.85rem;
}

/* ---------------------------------------------------------------- Leaderboard */
.lb-list { display: flex; flex-direction: column; gap: 12px; }
.lb-row {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 16px;
}
.lb-rank {
  font-family: var(--font-head); font-weight: 700; font-size: 1.3rem;
  width: 40px; text-align: center; color: var(--muted);
}
.lb-row.top .lb-rank { color: var(--violet); }
.lb-thumb { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
.lb-main { flex: 1; min-width: 0; }
.lb-title { font-weight: 600; font-family: var(--font-head); }
.lb-sub { color: var(--muted); font-size: 0.85rem; }

/* ---------------------------------------------------------------- Flash + empty */
.flash-wrap { margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.flash {
  border-radius: var(--radius); padding: 12px 16px; font-weight: 500;
  border: 1px solid transparent;
}
.flash.success { background: #E4F4F1; color: var(--teal-dark); border-color: #BFE7E0; }
.flash.error   { background: #FCE9E6; color: var(--danger-dark); border-color: #F6CFC9; }
.flash.info    { background: #FFF3D6; color: #8a6d1f; border-color: #F4E1AE; }

.empty {
  text-align: center; padding: 56px 20px;
  background: #fff; border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg); color: var(--muted);
}
.empty .emoji { font-size: 2.4rem; }
.empty h3 { color: var(--ink); margin-top: 10px; }

/* ---------------------------------------------------------------- Layout misc */
.page { padding: 30px 0 70px; }
.auth-wrap { max-width: 420px; margin: 40px auto; }
.divider { display:flex; align-items:center; gap:12px; color: var(--muted); margin: 18px 0; font-size: 0.85rem; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background: var(--border); }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-2 { margin-bottom: 16px; }
.text-muted { color: var(--muted); }
.center { text-align: center; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap: wrap; }

.footer {
  border-top: 1px solid var(--border);
  padding: 28px 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.footer-inner { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------------------------------------------------------------- Logo */
.brand-logo { height: 38px; width: auto; display: block; }
.brand-text {
  font-family: var(--font-head);
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: -0.5px;
  color: var(--ink);          /* "tinkr" = logo navy */
}
.brand-hub { color: var(--violet); }  /* "hub" = logo purple */

/* ---------------------------------------------------------------- Profile stats */
.profile-stats {
  display: flex; gap: 18px; margin: 10px 0 4px;
  color: var(--muted); font-size: 0.92rem; flex-wrap: wrap;
}
.profile-stats strong { color: var(--ink); }

/* ---------------------------------------------------------------- Gallery */
/* Media carousel (cover + screenshots + videos) */
.media-slider {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0E1730;            /* deep navy makes shots & videos pop */
  box-shadow: var(--shadow);
}
.media-slider .slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.media-slider .slides::-webkit-scrollbar { display: none; }
.slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
}
.slide .slide-img { width: 100%; height: 100%; object-fit: contain; }
.slide .slide-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* YouTube facade (thumbnail + play button until tapped) */
.yt-facade { position: absolute; inset: 0; cursor: pointer; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; }
.yt-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(96, 72, 216, 0.92);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform .12s ease, background .12s ease;
}
.yt-play::after {
  content: ""; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}
.yt-facade:hover .yt-play { transform: translate(-50%, -50%) scale(1.06); background: var(--violet); }

/* Arrows + dots */
.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  border: none; cursor: pointer; z-index: 3;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
  font-size: 1.4rem; line-height: 1; font-family: var(--font-head);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: opacity .15s ease, background .15s ease;
}
.slider-arrow:hover { background: #fff; }
.slider-arrow.prev { left: 10px; }
.slider-arrow.next { right: 10px; }
.slider-arrow.is-hidden { opacity: 0; pointer-events: none; }
.slider-dots {
  position: absolute; bottom: 10px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; gap: 7px;
}
.slider-dots button {
  width: 8px; height: 8px; padding: 0; border-radius: 50%; cursor: pointer;
  border: none; background: rgba(255, 255, 255, 0.45);
  transition: background .15s ease, transform .15s ease;
}
.slider-dots button.is-active { background: #fff; transform: scale(1.25); }

.media-del { position: absolute; top: 8px; right: 8px; margin: 0; z-index: 3; }
.media-del button {
  width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.55); color: #fff;
  cursor: pointer; font-size: 13px; line-height: 1;
}
.media-del button:hover { background: var(--danger); }

.media-manage summary {
  cursor: pointer; font-weight: 600; color: var(--teal-dark);
  display: inline-block; padding: 8px 0; font-family: var(--font-head);
}

/* ---------------------------------------------------------------- Bottom nav (mobile app bar) */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #fff; border-top: 1px solid var(--border);
  justify-content: space-around; align-items: center;
  padding: 9px 4px calc(9px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 12px rgba(22, 25, 46, 0.06);
}
.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: 5px;
  color: var(--muted); font-size: 0.66rem; font-weight: 700; padding: 0;
}
.bn-item:hover { text-decoration: none; }
.bn-item.is-active { color: var(--violet); }
.bn-item svg { display: block; width: 24px; height: 24px; }
.bn-item .avatar-sm { width: 26px; height: 26px; border: 2px solid var(--border); }

/* Submit: same 24px footprint as siblings (so labels line up) but emphasized
   with a violet rounded chip via box-shadow ring — echoes the cube, no overflow. */
.bn-submit { color: var(--violet); }
.bn-submit svg {
  background: var(--violet); color: #fff; border-radius: 9px;
  box-shadow: 0 0 0 5px var(--violet), 0 5px 12px rgba(96, 72, 216, 0.45);
}
.bn-submit.is-active svg { background: var(--violet-dark); box-shadow: 0 0 0 5px var(--violet-dark); }

/* ---------------------------------------------------------------- Notifications */
.nav-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); padding: 8px; border-radius: var(--radius-pill);
}
.nav-bell:hover { background: #fff; color: var(--violet); text-decoration: none; }
.nav-bell.is-active { color: var(--violet); }
.notif-badge {
  position: absolute; top: 0; right: 0;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--coral); color: #fff;
  border-radius: var(--radius-pill); font-size: 0.62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  border: 2px solid var(--cream);
}

.notif-list { display: flex; flex-direction: column; gap: 8px; }
.notif-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; color: var(--ink);
}
.notif-row:hover { text-decoration: none; border-color: var(--border-strong); }
.notif-row.unread { background: #F3F0FE; border-color: #DED6FA; }
.notif-ic { font-size: 1.05rem; width: 22px; text-align: center; flex: none; }
.notif-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.notif-text { font-weight: 600; line-height: 1.35; }
.notif-time { color: var(--muted); font-size: 0.82rem; }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--violet); flex: none; }

/* ---------------------------------------------------------------- Profile stat links */
.profile-stats a { color: var(--muted); }
.profile-stats a:hover { color: var(--violet); text-decoration: none; }
.profile-stats a strong { color: var(--ink); }

/* ---------------------------------------------------------------- User lists */
.user-list { display: flex; flex-direction: column; gap: 8px; }
.user-row {
  display: flex; align-items: center; gap: 12px; color: var(--ink);
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.user-row:hover { text-decoration: none; border-color: var(--border-strong); }
.user-main { min-width: 0; }
.user-name { font-weight: 600; }
.user-bio { color: var(--muted); font-size: 0.88rem; }

/* ---------------------------------------------------------------- Messages: inbox */
.convo-list { display: flex; flex-direction: column; gap: 8px; }
.convo-row {
  display: flex; align-items: center; gap: 12px; color: var(--ink);
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
}
.convo-row:hover { text-decoration: none; border-color: var(--border-strong); }
.convo-row.unread { background: #F3F0FE; border-color: #DED6FA; }
.convo-main { flex: 1; min-width: 0; }
.convo-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.convo-name { font-weight: 600; }
.convo-time { color: var(--muted); font-size: 0.8rem; flex: none; }
.convo-preview {
  color: var(--muted); font-size: 0.9rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.convo-row.unread .convo-preview { color: var(--ink); font-weight: 600; }
.convo-badge {
  flex: none; min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--violet); color: #fff; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ---------------------------------------------------------------- Messages: thread */
.chat-head { margin-bottom: 12px; }
.chat-head .maker-chip { color: var(--ink); }
.chat-head .avatar { width: 44px; height: 44px; }
.chat-thread {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  max-height: 56vh; overflow-y: auto;
}
.bubble {
  max-width: 76%; padding: 9px 13px; border-radius: 16px;
  font-size: 0.95rem; line-height: 1.4; position: relative;
}
.bubble.in  { align-self: flex-start; background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.bubble.out { align-self: flex-end; background: var(--violet); color: #fff; border-bottom-right-radius: 5px; }
.bubble-body { display: block; word-wrap: break-word; }
.bubble-time { display: block; font-size: 0.68rem; opacity: 0.6; margin-top: 3px; text-align: right; }
.chat-form {
  display: flex; gap: 8px; align-items: flex-end; margin-top: 12px;
}
.chat-form textarea { resize: none; min-height: 46px; max-height: 140px; }
.chat-form .btn { flex: none; }

/* ---------------------------------------------------------------- Visibility helpers */
.mobile-only { display: none !important; }

/* ---------------------------------------------------------------- Mobile */
@media (max-width: 760px) {
  .container { padding: 0 16px; }
  .page { padding: 16px 0 32px; }

  .desktop-only { display: none !important; }
  .mobile-only { display: inline-flex !important; }
  .bottom-nav.mobile-only { display: flex !important; }

  /* room so content/footer isn't hidden behind the fixed bar */
  body { padding-bottom: 78px; }

  /* top bar: just logo + (login) */
  .nav-inner { gap: 6px; height: 58px; }
  .nav .btn.mobile-only,
  .nav .mobile-msg { margin-left: auto; }
  .brand-logo { height: 34px; }
  .brand-text { font-size: 1.15rem; }

  /* hero — a rounded gradient panel, comfy padding */
  .hero { padding: 40px 18px 34px; margin-top: 6px; }
  .hero h1 { font-size: clamp(1.7rem, 7.5vw, 2.3rem); }
  .hero p { font-size: 1.02rem; }
  .hero-cta { display: flex; flex-direction: column; align-items: stretch; gap: 10px; max-width: 320px; margin: 0 auto; }

  /* headings + cards */
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  .grid { gap: 14px; }

  /* panels: trim the generous desktop padding */
  .form-card { padding: 18px; }
  .detail-grid { grid-template-columns: 1fr; gap: 18px; }
  .detail-side { position: static; padding: 18px; }
  .profile-head { flex-direction: column; text-align: center; padding: 22px 18px; gap: 14px; }
  .profile-stats { justify-content: center; }
  .empty { padding: 36px 18px; }

  /* comments: less indentation on narrow screens */
  .comment.reply, .reply-form { margin-left: 14px; }

  /* footer stacks neatly above the bar */
  .footer { margin-bottom: 0; padding: 22px 0; }
  .footer-inner { flex-direction: column; gap: 8px; text-align: center; }
}

/* Extra-small phones */
@media (max-width: 400px) {
  .bn-item span { font-size: 0.6rem; }
  .hero h1 { font-size: 1.55rem; }
}