/* =========================================================
   BEEVERS — Design system
   Palette: ink / parchment / honey / coral / sage (hive & trust)
   Display: Fraunces — Body/UI: Plus Jakarta Sans — Data: IBM Plex Mono
   Signature: honeycomb (hex) motif for avatars, badges, clusters
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#1B1B2F;
  --ink-70:#4A4A5E;
  --ink-45:#6B6B7D;
  --ink-15:#D9D6E0;
  --parchment:#FFF8EE;
  --parchment-dim:#F3EAD7;
  --card:#FFFFFF;
  --honey:#F2A93B;
  --honey-dark:#D9880F;
  --honey-tint:#FDECC8;
  --coral:#FF6F5E;
  --coral-dark:#E14B39;
  --coral-tint:#FFE3DE;
  --sage:#2F8F62;
  --sage-tint:#E1F3E8;
  --line:#EADFC6;
  --line-strong:#DCCFAE;
  --white:#ffffff;
  --shadow-sm: 0 1px 2px rgba(27,27,47,.06), 0 1px 1px rgba(27,27,47,.04);
  --shadow-md: 0 8px 24px rgba(27,27,47,.10);
  --shadow-lg: 0 20px 48px rgba(27,27,47,.16);
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --font-display:'Fraunces', ui-serif, Georgia, serif;
  --font-body:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
  --hex: polygon(25% 6%, 75% 6%, 98% 50%, 75% 94%, 25% 94%, 2% 50%);
  --header-h: 72px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--parchment);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ list-style:none; margin:0; padding:0; }

h1,h2,h3,h4{ font-family:var(--font-display); color:var(--ink); margin:0 0 .4em; line-height:1.12; letter-spacing:-0.01em; }
h1{ font-size:clamp(2.2rem,4.4vw,3.6rem); font-weight:600; }
h2{ font-size:clamp(1.7rem,3vw,2.4rem); font-weight:600; }
h3{ font-size:1.25rem; font-weight:600; }
p{ margin:0 0 1em; color:var(--ink-70); }
.eyebrow{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; color:var(--honey-dark); font-weight:500;
}

:focus-visible{ outline:3px solid var(--coral); outline-offset:2px; border-radius:6px; }
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

.container{ max-width:1160px; margin:0 auto; padding:0 24px; }
.section{ padding:88px 0; }
.section--tight{ padding:56px 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:.95rem;
  padding:13px 24px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--coral); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--coral-dark); box-shadow:var(--shadow-md); }
.btn-honey{ background:var(--honey); color:var(--ink); }
.btn-honey:hover{ background:var(--honey-dark); color:var(--white); }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--white); }
.btn-ghost{ background:transparent; color:var(--ink-70); }
.btn-ghost:hover{ color:var(--ink); background:var(--parchment-dim); }
.btn-sm{ padding:9px 16px; font-size:.85rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn-icon{ width:42px; height:42px; padding:0; border-radius:50%; }

/* ---------- Public header/nav ---------- */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--header-h);
  display:flex; align-items:center; background:rgba(255,248,238,.9); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.35rem; color:var(--ink); }
.brand .hexmark{ width:30px; height:30px; background:var(--honey); clip-path:var(--hex); display:inline-block; }
.brand .hexmark::after{ content:''; }
.nav-links{ display:flex; align-items:center; gap:28px; font-weight:600; font-size:.94rem; }
.nav-cta{ display:flex; align-items:center; gap:12px; }

/* ---------- App shell (post-login) ---------- */
.app-shell{ display:flex; min-height:100vh; }
.app-sidebar{
  width:232px; flex-shrink:0; background:var(--ink); color:var(--parchment);
  display:flex; flex-direction:column; padding:26px 18px; position:sticky; top:0; height:100vh;
}
.app-sidebar .brand{ color:var(--white); margin-bottom:36px; padding:0 6px; }
.app-sidebar .brand .hexmark{ background:var(--honey); }
.app-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.app-nav a{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  font-weight:600; font-size:.92rem; color:#C9C6D6; transition:background .15s, color .15s;
}
.app-nav a .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.35; flex-shrink:0; }
.app-nav a:hover{ background:rgba(255,255,255,.06); color:var(--white); }
.app-nav a.active{ background:var(--honey); color:var(--ink); }
.app-nav a.active .dot{ opacity:0; width:0; }
.app-nav .badge-lock{ margin-left:auto; font-family:var(--font-mono); font-size:.65rem; background:rgba(255,255,255,.12); padding:2px 7px; border-radius:6px; }
.app-sidebar .plan-card{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-m); padding:16px; font-size:.82rem; color:#C9C6D6; margin-top:14px;
}
.app-sidebar .plan-card strong{ color:var(--honey); display:block; font-family:var(--font-display); font-size:1.05rem; margin-bottom:4px; }
.app-main{ flex:1; min-width:0; }
.app-topbar{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; border-bottom:1px solid var(--line); background:var(--parchment);
  position:sticky; top:0; z-index:20;
}
.app-content{ padding:32px; max-width:1120px; }
.mobile-nav{ display:none; }

/* ---------- Avatar / hex frames ---------- */
.hexframe{
  clip-path:var(--hex); background:var(--honey-tint); display:flex; align-items:center; justify-content:center;
  overflow:hidden; flex-shrink:0; position:relative;
}
.hexframe img{ width:100%; height:100%; object-fit:cover; }
.hexframe.sm{ width:40px; height:40px; }
.hexframe.md{ width:56px; height:56px; }
.hexframe.lg{ width:96px; height:96px; }
.hexframe.xl{ width:180px; height:180px; }

.badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:.68rem;
  padding:4px 9px; border-radius:8px; font-weight:500; letter-spacing:.02em;
}
.badge-certified{ background:var(--sage-tint); color:var(--sage); }
.badge-premium{ background:var(--honey-tint); color:var(--honey-dark); }
.badge-id{ background:var(--parchment-dim); color:var(--ink-45); }

/* ---------- Hero ---------- */
.hero{ padding:64px 0 40px; position:relative; overflow:hidden; }
.hero .container{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero h1{ margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:var(--coral); }
.hero-actions{ display:flex; gap:14px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.hero-note{ margin-top:18px; font-size:.85rem; color:var(--ink-45); display:flex; gap:8px; align-items:center; }

.hive{
  position:relative; aspect-ratio:1/1; display:grid; place-items:center;
}
.hive-grid{ display:grid; grid-template-columns:repeat(3, 92px); gap:10px; transform:translateY(0); }
.hive-grid .cell{
  width:92px; height:104px; clip-path:var(--hex); background:var(--card); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600;
  color:var(--ink-45); font-size:1.6rem; animation:float 6s ease-in-out infinite;
}
.hive-grid .cell:nth-child(2n){ margin-top:52px; animation-delay:1.2s; }
.hive-grid .cell:nth-child(3n){ animation-delay:2.4s; }
.hive-grid .cell.filled{ background:var(--honey); color:var(--ink); }
.hive-grid .cell.filled.coral{ background:var(--coral); color:var(--white); }
.hive-grid .cell.filled.sage{ background:var(--sage); color:var(--white); }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

/* ---------- How it works (hex cluster) ---------- */
.cluster{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:48px; }
.cluster-item{
  width:230px; padding:30px 22px 26px; background:var(--card); border-radius:var(--radius-m);
  box-shadow:var(--shadow-sm); text-align:left; position:relative;
}
.cluster-item:nth-child(2){ transform:translateY(26px); }
.cluster-item:nth-child(4){ transform:translateY(26px); }
.cluster-item .hexicon{ width:44px; height:44px; clip-path:var(--hex); background:var(--honey-tint); display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:1.2rem; }
.cluster-item h3{ font-size:1.05rem; margin-bottom:8px; }
.cluster-item p{ font-size:.88rem; margin:0; }

/* ---------- Pricing ---------- */
.pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; }
.price-card{ background:var(--card); border-radius:var(--radius-l); padding:36px; border:1px solid var(--line); }
.price-card.is-premium{ background:var(--ink); color:var(--parchment); border-color:var(--ink); position:relative; overflow:hidden; }
.price-card.is-premium::before{
  content:''; position:absolute; top:-40px; right:-40px; width:160px; height:160px;
  background:var(--honey); clip-path:var(--hex); opacity:.9;
}
.price-card .amount{ font-family:var(--font-display); font-size:2.6rem; font-weight:600; margin:10px 0 22px; }
.price-card .amount span{ font-size:1rem; font-weight:500; color:var(--ink-45); }
.price-card.is-premium .amount span{ color:#B9B6C8; }
.price-list{ display:flex; flex-direction:column; gap:11px; margin:22px 0 26px; }
.price-list li{ display:flex; gap:10px; font-size:.9rem; align-items:flex-start; }
.price-list li::before{ content:'✓'; color:var(--sage); font-weight:700; flex-shrink:0; }
.price-card.is-premium .price-list li::before{ color:var(--honey); }

footer{ border-top:1px solid var(--line); padding:48px 0 28px; margin-top:40px; }
.footer-grid{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; font-size:.85rem; color:var(--ink-45); }
.footer-bottom{ margin-top:28px; font-size:.78rem; color:var(--ink-45); }

/* ---------- Auth ---------- */
.auth-wrap{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-visual{ background:var(--ink); color:var(--parchment); display:flex; flex-direction:column; justify-content:center; padding:60px; position:relative; overflow:hidden; }
.auth-visual .hive-grid .cell{ background:rgba(255,255,255,.06); color:#C9C6D6; box-shadow:none; }
.auth-visual .hive-grid .cell.filled{ background:var(--honey); color:var(--ink); }
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-card{ width:100%; max-width:400px; }
.auth-tabs{ display:flex; gap:6px; background:var(--parchment-dim); padding:5px; border-radius:999px; margin-bottom:28px; }
.auth-tabs button{ flex:1; border:none; background:transparent; padding:10px; border-radius:999px; font-weight:700; font-size:.86rem; color:var(--ink-45); cursor:pointer; }
.auth-tabs button.active{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.82rem; font-weight:700; margin-bottom:6px; color:var(--ink-70); }
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1.5px solid var(--line-strong);
  font-family:var(--font-body); font-size:.95rem; background:var(--card); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--coral); outline:none; }
.field-hint{ font-size:.76rem; color:var(--ink-45); margin-top:5px; }
.divider{ display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--ink-45); font-size:.8rem; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--line-strong); }
.oauth-row{ display:flex; flex-direction:column; gap:10px; }
.oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; padding:12px; border-radius:12px;
  border:1.5px solid var(--line-strong); background:var(--card); font-weight:700; font-size:.9rem; cursor:pointer;
}
.oauth-btn:hover{ border-color:var(--ink); }
.checkbox-row{ display:flex; gap:9px; align-items:flex-start; font-size:.8rem; color:var(--ink-70); margin:16px 0; }
.form-error{ background:var(--coral-tint); color:var(--coral-dark); padding:10px 14px; border-radius:10px; font-size:.84rem; margin-bottom:14px; display:none; }
.form-error.show{ display:block; }
.form-note{ font-size:.82rem; color:var(--ink-45); text-align:center; margin-top:18px; }

/* ---------- Profile wizard ---------- */
.wizard{ max-width:640px; margin:0 auto; }
.progressbar{ height:6px; background:var(--line); border-radius:99px; overflow:hidden; margin-bottom:8px; }
.progressbar-fill{ height:100%; background:var(--coral); border-radius:99px; transition:width .3s ease; }
.progress-label{ font-size:.78rem; color:var(--ink-45); font-family:var(--font-mono); margin-bottom:28px; }
.wizard-step{ display:none; }
.wizard-step.active{ display:block; animation:fadein .25s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
.chip-grid{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  padding:9px 16px; border-radius:999px; border:1.5px solid var(--line-strong); font-size:.85rem;
  font-weight:600; cursor:pointer; background:var(--card); color:var(--ink-70); transition:all .15s;
}
.chip.selected{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.upload-pair{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.upload-box{
  border:2px dashed var(--line-strong); border-radius:var(--radius-m); padding:20px; text-align:center;
  cursor:pointer; background:var(--card);
}
.upload-box .hexframe{ margin:0 auto 10px; }
.upload-box small{ display:block; color:var(--ink-45); font-size:.74rem; margin-top:6px; }
.wizard-actions{ display:flex; justify-content:space-between; margin-top:32px; }
.segmented{ display:flex; border:1.5px solid var(--line-strong); border-radius:12px; overflow:hidden; }
.segmented button{ flex:1; padding:11px; border:none; background:var(--card); font-weight:600; font-size:.85rem; cursor:pointer; border-right:1.5px solid var(--line-strong); }
.segmented button:last-child{ border-right:none; }
.segmented button.selected{ background:var(--honey); color:var(--ink); }

/* ---------- Swipe ---------- */
.swipe-wrap{ display:flex; flex-direction:column; align-items:center; }
.swipe-limit{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-45); margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.swipe-limit .pips{ display:flex; gap:4px; }
.swipe-limit .pip{ width:9px; height:9px; border-radius:2px; background:var(--line-strong); }
.swipe-limit .pip.used{ background:var(--coral); }
.swipe-stage{ position:relative; width:340px; height:480px; }
.swipe-card{
  position:absolute; inset:0; background:var(--card); border-radius:var(--radius-l); box-shadow:var(--shadow-lg);
  overflow:hidden; display:flex; flex-direction:column; cursor:grab; user-select:none; transition:transform .3s ease, opacity .3s ease;
}
.swipe-card:active{ cursor:grabbing; }
.swipe-card .cover{ height:64%; background:linear-gradient(160deg,var(--honey-tint),var(--parchment-dim)); display:flex; align-items:center; justify-content:center; position:relative; }
.swipe-card .cover .hexframe{ width:150px; height:150px; }
.swipe-card .card-body{ padding:18px 20px; flex:1; display:flex; flex-direction:column; gap:8px; }
.swipe-card .name-row{ display:flex; align-items:baseline; gap:8px; }
.swipe-card .name-row h3{ margin:0; }
.swipe-card .tags{ display:flex; flex-wrap:wrap; gap:6px; }
.swipe-card .tags span{ font-size:.72rem; background:var(--parchment-dim); padding:4px 9px; border-radius:8px; color:var(--ink-70); }
.swipe-card.like{ transform:translate(120%,-10%) rotate(18deg); opacity:0; }
.swipe-card.pass{ transform:translate(-120%,-10%) rotate(-18deg); opacity:0; }
.stamp{ position:absolute; top:24px; font-family:var(--font-display); font-weight:700; font-size:1.6rem; padding:6px 16px; border:4px solid; border-radius:12px; transform:rotate(-14deg); opacity:0; transition:opacity .15s; text-transform:uppercase; }
.stamp.like-stamp{ left:20px; color:var(--sage); border-color:var(--sage); }
.stamp.pass-stamp{ right:20px; color:var(--coral); border-color:var(--coral); transform:rotate(14deg); }
.swipe-actions{ display:flex; gap:20px; margin-top:26px; }
.swipe-actions button{ width:60px; height:60px; border-radius:50%; border:none; box-shadow:var(--shadow-md); cursor:pointer; font-size:1.4rem; background:var(--card); }
.swipe-actions button.pass-btn{ color:var(--coral); }
.swipe-actions button.like-btn{ color:var(--sage); }
.swipe-empty{ text-align:center; padding:60px 20px; }
.locked-panel{ max-width:440px; margin:60px auto; text-align:center; background:var(--card); padding:40px 32px; border-radius:var(--radius-l); box-shadow:var(--shadow-sm); }
.locked-panel .hexicon{ width:64px; height:64px; clip-path:var(--hex); background:var(--coral-tint); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; font-size:1.6rem; }

/* ---------- Match modal ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(27,27,47,.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-overlay.show{ display:flex; }
.modal{ background:var(--card); border-radius:var(--radius-l); padding:40px; max-width:420px; width:100%; text-align:center; position:relative; }
.modal .match-hexes{ display:flex; justify-content:center; gap:-10px; margin-bottom:20px; }
.modal .match-hexes .hexframe{ margin:0 -14px; border:4px solid var(--card); }
.modal h2{ color:var(--coral); }
.modal-actions{ display:flex; flex-direction:column; gap:10px; margin-top:22px; }
.modal-close{ position:absolute; top:16px; right:18px; background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--ink-45); }

/* ---------- Chats ---------- */
.chats-layout{ display:grid; grid-template-columns:320px 1fr; height:calc(100vh - var(--header-h)); }
.chat-list{ border-right:1px solid var(--line); overflow-y:auto; }
.chat-list-head{ padding:18px 20px 12px; }
.id-search{ display:flex; gap:8px; margin-top:10px; }
.id-search input{ flex:1; padding:9px 12px; border-radius:10px; border:1.5px solid var(--line-strong); font-size:.82rem; font-family:var(--font-mono); }
.chat-item{ display:flex; gap:12px; padding:14px 20px; cursor:pointer; border-bottom:1px solid var(--line); align-items:center; }
.chat-item:hover, .chat-item.active{ background:var(--parchment-dim); }
.chat-item .meta{ flex:1; min-width:0; }
.chat-item .meta .top{ display:flex; justify-content:space-between; gap:6px; }
.chat-item .meta .top span:last-child{ font-size:.7rem; color:var(--ink-45); }
.chat-item .meta p{ margin:2px 0 0; font-size:.82rem; color:var(--ink-45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-item .unread{ width:8px; height:8px; border-radius:50%; background:var(--coral); flex-shrink:0; }
.chat-pane{ display:flex; flex-direction:column; }
.chat-pane-head{ display:flex; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid var(--line); cursor:pointer; }
.chat-pane-head .info h3{ margin:0; font-size:1rem; }
.chat-pane-head .info span{ font-size:.78rem; color:var(--ink-45); }
.chat-pane-head .actions{ margin-left:auto; display:flex; gap:8px; }
.chat-messages{ flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:10px; }
.bubble{ max-width:62%; padding:11px 15px; border-radius:16px; font-size:.9rem; }
.bubble.from-me{ align-self:flex-end; background:var(--coral); color:var(--white); border-bottom-right-radius:4px; }
.bubble.from-them{ align-self:flex-start; background:var(--card); box-shadow:var(--shadow-sm); border-bottom-left-radius:4px; }
.bubble.system{ align-self:center; background:var(--honey-tint); color:var(--honey-dark); font-size:.78rem; padding:7px 14px; }
.chat-composer{ display:flex; gap:10px; padding:16px 24px; border-top:1px solid var(--line); }
.chat-composer input{ flex:1; padding:12px 16px; border-radius:999px; border:1.5px solid var(--line-strong); font-size:.9rem; }
.empty-state{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; padding:40px; color:var(--ink-45); }

/* ---------- Team ---------- */
.team-layout{ display:grid; grid-template-columns:1fr 300px; gap:0; height:calc(100vh - var(--header-h)); }
.team-header{ display:flex; align-items:center; gap:14px; padding:16px 24px; border-bottom:1px solid var(--line); }
.team-members{ display:flex; margin-left:auto; }
.team-members .hexframe{ margin-left:-10px; border:3px solid var(--parchment); }
.team-side{ border-left:1px solid var(--line); overflow-y:auto; }
.team-tabs{ display:flex; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--parchment); }
.team-tabs button{ flex:1; padding:14px; border:none; background:none; font-weight:700; font-size:.8rem; color:var(--ink-45); cursor:pointer; border-bottom:2px solid transparent; }
.team-tabs button.active{ color:var(--ink); border-color:var(--coral); }
.team-tab-panel{ display:none; padding:16px; }
.team-tab-panel.active{ display:block; }
.media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.media-grid div{ aspect-ratio:1; background:var(--parchment-dim); border-radius:8px; }
.link-row, .doc-row{ display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:.84rem; }
.doc-row .icon, .link-row .icon{ width:34px; height:34px; border-radius:8px; background:var(--honey-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.annonce-card-chat{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; display:flex; gap:12px; align-self:flex-start; max-width:70%; }
.annonce-card-chat img{ width:64px; height:64px; border-radius:10px; object-fit:cover; }

/* ---------- Annonces ---------- */
.filters-bar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; background:var(--card); padding:16px; border-radius:var(--radius-m); box-shadow:var(--shadow-sm); margin-bottom:24px; }
.filters-bar select, .filters-bar input{ padding:10px 12px; border-radius:10px; border:1.5px solid var(--line-strong); font-size:.85rem; }
.annonces-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.annonce-card{ background:var(--card); border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-sm); cursor:pointer; transition:transform .15s; }
.annonce-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.annonce-card .photo{ height:150px; background:linear-gradient(150deg,var(--honey-tint),var(--parchment-dim)); position:relative; }
.annonce-card .photo .tag-partner{ position:absolute; top:10px; left:10px; background:var(--ink); color:var(--white); font-size:.65rem; font-family:var(--font-mono); padding:3px 8px; border-radius:6px; }
.annonce-card .info{ padding:14px 16px; }
.annonce-card .price{ font-family:var(--font-display); font-weight:600; font-size:1.2rem; }
.annonce-card .loc{ font-size:.8rem; color:var(--ink-45); }
.annonce-detail{ display:grid; grid-template-columns:1.3fr 1fr; gap:32px; }
.annonce-gallery{ height:320px; background:linear-gradient(150deg,var(--honey-tint),var(--parchment-dim)); border-radius:var(--radius-m); }
.spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; }
.spec-grid div{ background:var(--card); padding:12px 14px; border-radius:10px; font-size:.84rem; }
.spec-grid strong{ display:block; font-family:var(--font-display); font-size:1rem; }
.contact-card{ background:var(--card); border-radius:var(--radius-m); padding:22px; box-shadow:var(--shadow-sm); height:fit-content; }

/* ---------- Account ---------- */
.account-grid{ display:grid; grid-template-columns:220px 1fr; gap:36px; }
.account-tabs a{ display:block; padding:11px 14px; border-radius:10px; font-weight:600; font-size:.88rem; color:var(--ink-70); margin-bottom:4px; }
.account-tabs a.active{ background:var(--ink); color:var(--white); }
.account-panel{ display:none; }
.account-panel.active{ display:block; }
.settings-row{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); gap:20px; }
.settings-row .txt strong{ display:block; font-size:.92rem; }
.settings-row .txt span{ font-size:.8rem; color:var(--ink-45); }
.switch{ position:relative; width:44px; height:26px; border-radius:99px; background:var(--line-strong); flex-shrink:0; cursor:pointer; }
.switch::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--white); transition:transform .15s; }
.switch.on{ background:var(--sage); }
.switch.on::after{ transform:translateX(18px); }
.danger-zone{ border:1.5px solid var(--coral-tint); background:var(--coral-tint); border-radius:var(--radius-m); padding:20px; margin-top:24px; }
.danger-zone h3{ color:var(--coral-dark); }
.plan-banner{ background:var(--ink); color:var(--parchment); border-radius:var(--radius-l); padding:26px 30px; display:flex; justify-content:space-between; align-items:center; margin-bottom:26px; }
.plan-banner strong{ font-family:var(--font-display); font-size:1.3rem; color:var(--honey); }

/* ---------- Toasts / config banner ---------- */
.demo-banner{
  background:var(--honey-tint); color:var(--honey-dark); text-align:center; font-size:.8rem; font-weight:600;
  padding:9px 16px; font-family:var(--font-mono);
}
.toast{
  position:fixed; bottom:24px; right:24px; background:var(--ink); color:var(--white); padding:14px 20px;
  border-radius:12px; font-size:.86rem; box-shadow:var(--shadow-lg); z-index:200; opacity:0; transform:translateY(10px);
  transition:all .25s ease; pointer-events:none;
}
.toast.show{ opacity:1; transform:translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero .container{ grid-template-columns:1fr; }
  .hive{ order:-1; }
  .pricing-grid{ grid-template-columns:1fr; }
  .app-sidebar{ display:none; }
  .app-content{ padding:20px; }
  .chats-layout, .team-layout{ grid-template-columns:1fr; height:auto; }
  .annonces-grid{ grid-template-columns:repeat(2,1fr); }
  .annonce-detail{ grid-template-columns:1fr; }
  .account-grid{ grid-template-columns:1fr; }
  .mobile-nav{
    display:flex; position:fixed; bottom:0; left:0; right:0; background:var(--ink); z-index:60;
    justify-content:space-around; padding:10px 6px calc(env(safe-area-inset-bottom) + 8px);
  }
  .mobile-nav a{ color:#C9C6D6; font-size:.65rem; display:flex; flex-direction:column; align-items:center; gap:4px; font-weight:600; }
  .mobile-nav a.active{ color:var(--honey); }
  body{ padding-bottom:64px; }
  .app-topbar{ display:none; }
}
@media (max-width: 640px){
  .annonces-grid{ grid-template-columns:1fr; }
  .cluster-item:nth-child(2n){ transform:none; }
  .auth-wrap{ grid-template-columns:1fr; }
  .auth-visual{ display:none; }
  .swipe-stage{ width:92vw; max-width:340px; }
}