/* ── Empty state ── */
.empty-state { text-align: center; padding: 40px 20px; color: var(--i4) }
.empty-icon { font-size: 2rem; margin-bottom: 10px }
.empty-state p { font-size: .8rem }

/* ── Flash messages ── */
.flash { padding: 10px 16px; font-size: .78rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--b) }
.flash-success { background: var(--al); color: var(--a) }
.flash-error { background: var(--bs); color: #e05050 }
.flash-info { background: var(--al); color: var(--ink) }
.flash button { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .5; color: inherit }

/* ── Mention link ── */
.mention { color: var(--a); font-weight: 500; text-decoration: none }
.mention:hover { text-decoration: underline }

/* ── Landing page ── */
.lpage { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column }
.lnav { height: 48px; background: var(--w); border-bottom: 1px solid var(--b); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; flex-shrink: 0 }
.lnavr { display: flex; gap: 7px }
.lb0 { padding: 5px 14px; border-radius: 7px; font-size: .75rem; font-weight: 500; cursor: pointer; background: none; color: var(--ink); border: 1.5px solid var(--ink) }
.lb0:hover { background: var(--bs) }
.lb1 { padding: 5px 14px; border-radius: 7px; font-size: .75rem; font-weight: 500; cursor: pointer; background: var(--a); color: #fff; border: 1.5px solid var(--a) }
.lb1:hover { background: var(--ah) }
.hero { max-width: 420px; margin: 0 auto; padding: 56px 24px 72px; text-align: center }
.lbadge { display: inline-block; font-size: .58rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; color: var(--a); background: var(--al); border: 1px solid var(--ab); padding: 2px 10px; border-radius: 99px; margin-bottom: 20px }
.lh { font-family: var(--fd); font-size: 1.95rem; color: var(--ink); font-weight: 400; line-height: 1.2; letter-spacing: -.3px; margin-bottom: 11px }
.lh em { color: var(--a); font-style: italic }
.lsub { font-family: var(--fd); font-style: italic; font-size: .86rem; color: var(--i3); line-height: 1.85; margin-bottom: 26px }
.lcta { display: flex; gap: 8px; justify-content: center }
.cb1 { padding: 9px 22px; background: var(--a); color: #fff; border: 1.5px solid var(--a); border-radius: 7px; font-size: .8rem; font-weight: 500; cursor: pointer }
.cb1:hover { background: var(--ah) }
.cb0 { padding: 9px 18px; background: none; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 7px; font-size: .8rem; cursor: pointer }
.cb0:hover { background: var(--bs) }