/* Live-only additions on top of the demo's styles.css (same tokens; nothing here overrides the design system). */

/* sidebar foot: the signed-in person */
.me-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border: 1px solid var(--line); border-radius: 14px; }
.me-row .grow { flex: 1; min-width: 0; }
.me-row strong { display: block; font-size: 13px; }
.me-row .small { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-row .icon-btn { width: 36px; height: 36px; }
.shop-card .grow { flex: 1; min-width: 0; }
.shop-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-card a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

/* sign in / set password: no sidebar, one centred card */
body.auth-mode .sidebar, body.auth-mode .topbar, body.auth-mode .tabbar, body.auth-mode .teambar { display: none; }
body.auth-mode .shell { margin-left: 0; border-left: 0; }
body.auth-mode main { max-width: 480px; min-height: 100vh; align-content: center; padding: 48px 24px; }
.auth-card { display: grid; gap: 24px; padding: 40px; }
.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand img { width: 40px; height: auto; }
.auth-card h1 { font-size: 28px; font-weight: 800; font-stretch: 112%; line-height: 1.15; }
.auth-card form { display: grid; gap: 18px; }
.auth-card .input { width: 100%; }
.auth-card .btn.primary { width: 100%; padding: 13px 20px; font-size: 15px; }
.auth-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.auth-foot a { color: var(--muted); }
.form-err { color: var(--down); font-size: 13px; min-height: 1em; margin: -6px 0 0; }
@media (max-width: 860px) { .auth-card { padding: 32px 24px; } }

/* the calm "nothing real yet" state: never numbers, never fake rows */
.gate { display: grid; gap: 12px; justify-items: start; padding: 28px; border: 1px dashed var(--line); border-radius: 14px; background: var(--bg); }
.gate h3 { font-size: 16px; font-weight: 700; margin: 4px 0 0; }
.gate p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 64ch; }
.gate-act { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
.gate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1100px) { .gate-grid { grid-template-columns: 1fr; } }

/* first-run setup steps on Overview */
.setup { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.setup h2 { font-size: 22px; margin-bottom: 10px; }
.setup .lead { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 24px; max-width: 56ch; }
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.setup-steps li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--line); }
.setup-steps li:first-child { border-top: 0; padding-top: 0; }
.setup-steps .n { flex: none; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-weight: 700;
  font-size: 13px; border: 1px solid var(--line); color: var(--muted); }
.setup-steps li.done .n { background: var(--up-bg); color: var(--up); border-color: transparent; }
.setup-steps li.now .n { background: var(--ember); color: #0A0A0C; border-color: transparent; }
.setup-steps strong { display: block; font-size: 15px; }
.setup-steps .sub-line { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; line-height: 1.5; }
.setup-steps .n svg { width: 16px; height: 16px; }
.what-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.what-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 14px; line-height: 1.5; }
.what-list li svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--faint); }
.what-list strong { color: var(--fg); font-weight: 600; }
@media (max-width: 1100px) { .setup { grid-template-columns: 1fr; gap: 28px; } }

/* connection page */
.conn-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.conn-head .who { gap: 14px; }
.conn-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 28px 0 0; }
.conn-facts dt { color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.conn-facts dd { margin: 0; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.conn-act { display: flex; gap: 12px; flex-wrap: wrap; }
.note-box { margin-top: 24px; padding: 16px 20px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 860px) { .conn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* agency + forms */
.shop-grid .card.shop .btn { align-self: flex-start; }
.shop-perm { display: flex; align-items: center; gap: 12px; }
.shop-perm .meter { flex: 1; }
.form-grid { display: grid; gap: 18px; }
.btn svg { width: 16px; height: 16px; }
.kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .kpis.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis.three .kpi:first-child { grid-column: span 2; } }
.tabbar { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 1fr; }
.creator .avatar-img { width: 44px; height: 44px; border-radius: 999px; object-fit: cover; flex: none; background: var(--surface-3); }
.creator-act .btn[disabled] { opacity: .55; }