:root {
  --bg: #faf8f4;
  --surface: #ffffff;
  --surface-2: #fdfcfa;
  --ink: #1d1b18;
  --ink-2: #3a3631;
  --muted: #6f6a62;
  --faint: #9a948a;
  --line: #ebe6de;
  --line-2: #e2dcd2;
  --accent: #e0583a;
  --accent-soft: #fdeae3;
  --green: #268a52;
  --green-soft: #e2f3e8;
  --blue: #3667d1;
  --blue-soft: #e5edfc;
  --amber: #b27812;
  --amber-soft: #fbf0d8;
  --red: #c23b2a;
  --red-soft: #fde6e2;
  --sans: "Figtree", "Avenir Next", "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow-sm: 0 1px 2px rgba(29, 27, 24, .05), 0 2px 8px rgba(29, 27, 24, .04);
  --shadow-lg: 0 2px 4px rgba(29, 27, 24, .04), 0 24px 60px -12px rgba(29, 27, 24, .18);
  --radius: 18px;
  /* Headings inside the app share this scale; page titles are .view-head h1. The serif face is for the marketing site. */
  --title-lg: 650 24px/1.25 var(--sans);
  --title-md: 650 19px/1.3 var(--sans);
  --title-sm: 650 16px/1.35 var(--sans);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
h1, h2, h3 { margin: 0; letter-spacing: -.025em; }
p { margin: 0; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 14px; white-space: nowrap; background: none; transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s, color .2s; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn-xs { height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 0 6px 14px -6px rgba(29,27,24,.45); }
.btn-dark:hover:not(:disabled) { background: #2c2925; }
.btn-light { background: var(--surface); border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.btn-light:hover:not(:disabled) { border-color: #d0c8bb; }
.btn-ghost { color: var(--muted); }
.btn-ghost:hover:not(:disabled) { color: var(--ink); background: rgba(29,27,24,.05); }
.btn-danger { color: var(--red); }
.btn-danger:hover:not(:disabled) { background: var(--red-soft); }
.btn .arrow { transition: transform .2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.plus { font-size: 17px; line-height: 1; margin-top: -1px; }
.icon-btn { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); transition: border-color .2s, color .2s, transform .3s var(--ease); }
.icon-btn:hover { border-color: var(--line-2); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; }
#refreshButton.spin svg { animation: spin .7s var(--ease); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.03em; font-size: 16.5px; }
.brand-mark { width: 34px; height: 34px; display: block; object-fit: contain; transition: transform .35s var(--ease); }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }

/* Forms */
.field-label { display: block; font-size: 13px; font-weight: 600; margin: 20px 0 8px; color: var(--ink-2); }
.input { width: 100%; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); outline: none; transition: border-color .2s, box-shadow .2s; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(224, 88, 58, .12); }
textarea.input { resize: vertical; min-height: 130px; line-height: 1.55; }
select.input { appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%236f6a62' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center/12px no-repeat; padding-right: 36px; }
.field-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--faint); }
.feedback { min-height: 1.3em; margin-top: 12px; font-size: 13px; color: var(--green); }
.feedback.error { color: var(--red); }

/* Login */
.login-view { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 40px 16px; overflow: hidden; }
.login-glow { position: absolute; z-index: -1; width: 720px; height: 520px; background: radial-gradient(closest-side at 40% 45%, rgba(224,88,58,.14), transparent), radial-gradient(closest-side at 62% 55%, rgba(242,176,94,.16), transparent); filter: blur(20px); animation: drift 12s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translateY(24px) scale(1.06); } }
.login-brand, .login-card, .login-back { animation: rise .8s var(--ease) both; }
.login-card { animation-delay: .08s; }
.login-back { animation-delay: .16s; font-size: 13.5px; color: var(--muted); }
.login-back:hover { color: var(--ink); }
.login-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 34px 30px 26px; box-shadow: var(--shadow-lg); }
.login-card h1 { font-size: 28px; }
.login-posy { display: block; width: 112px; height: 112px; margin: -22px 0 4px -14px; animation: posy-float 4s ease-in-out infinite; }
.login-card > p { margin-top: 6px; color: var(--muted); }
.login-form .btn { margin-top: 18px; height: 46px; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* Sidebar
   --nav-w is the space the sidebar takes from the page. Fixed elements centred on the page (toast, save bar)
   offset by half of it so they sit in the middle of the content, not the window. */
:root { --nav-w: 0px; --bar-h: 0px; --nav-open-w: 256px; --nav-rail-w: 76px; }
body.in-desk { --nav-w: var(--nav-open-w); }
body.in-desk.nav-collapsed { --nav-w: var(--nav-rail-w); }
.desk { min-height: 100vh; padding-left: var(--nav-w); transition: padding-left .45s var(--ease); }

.sidebar { position: fixed; z-index: 25; top: 0; bottom: 0; left: 0; width: var(--nav-w); display: flex; flex-direction: column; gap: 14px; padding: 16px 14px 14px; overflow: hidden; background: radial-gradient(120% 60% at 0% 0%, rgba(242, 176, 94, .12), transparent 60%), #f4f0e9; border-right: 1px solid var(--line); transition: width .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease); }
.sidebar > * { flex-shrink: 0; }
.nav-label { white-space: nowrap; transition: opacity .25s var(--ease), transform .35s var(--ease); }

.sidebar-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding-left: 6px; }
.sidebar-head .brand { min-width: 0; }
.sidebar-toggle, .sidebar-close { border-color: transparent; background: transparent; color: var(--muted); }
.sidebar-toggle:hover, .sidebar-close:hover { background: rgba(29, 27, 24, .06); border-color: transparent; }
.toggle-chevron { transition: transform .45s var(--ease); transform-origin: 14.5px 12px; }
.sidebar-close { display: none; }

.sidebar-new { justify-content: flex-start; gap: 10px; height: 42px; padding: 0 14px 0 13px; border-radius: 13px; }
.sidebar-new svg { flex: 0 0 20px; width: 20px; height: 20px; stroke-width: 2.1; transition: transform .45s var(--ease); }
.sidebar-new:hover:not(:disabled) svg { transform: rotate(90deg); }
.sidebar-new kbd { margin-left: auto; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .8); font: 500 11px/1 var(--mono); }

.nav { position: relative; display: flex; flex-direction: column; gap: 2px; margin: 0 -2px; padding: 0 2px; overflow-y: auto; overflow-x: hidden; flex-shrink: 1; min-height: 0; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav-group { position: relative; display: flex; align-items: flex-end; height: 30px; padding: 0 14px 6px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.nav-group:first-of-type { height: 20px; }
.nav-group::before { content: ""; position: absolute; left: 50%; bottom: 10px; width: 18px; height: 1px; margin-left: -9px; background: var(--line-2); opacity: 0; transition: opacity .3s var(--ease); }
.nav-item { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px 0 14px; border-radius: 12px; color: var(--muted); font-size: 14.5px; font-weight: 600; transition: color .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.nav-item svg { flex: 0 0 20px; width: 20px; height: 20px; transition: transform .35s var(--ease), color .2s; }
.nav-item:hover { color: var(--ink); }
.nav-item:not(.active):hover { background: rgba(29, 27, 24, .045); }
.nav-item:hover svg { transform: scale(1.08); }
.nav-item:active svg { transform: scale(.94); }
.nav-item.active { color: var(--ink); }
.nav-item.active svg { color: var(--accent); animation: nav-pop .55s var(--ease); }
@keyframes nav-pop { 35% { transform: scale(1.18) rotate(-6deg); } }
.nav-item:focus-visible, .sidebar button:focus-visible, .sidebar a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A white card slides between items; it's positioned from JS so it can glide rather than jump. */
.nav-indicator { position: absolute; z-index: 0; top: 0; left: 2px; right: 2px; height: 40px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-sm), 0 0 0 1px rgba(29, 27, 24, .04); opacity: 0; transition: opacity .2s; pointer-events: none; }
.nav-indicator.ready { opacity: 1; transition: transform .5s var(--ease), height .5s var(--ease), opacity .2s; }
.nav-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; animation: pop .4s var(--ease); transition: left .45s var(--ease), top .45s var(--ease); }
@keyframes pop { 40% { transform: scale(1.2); } }
/* A hub groups related pages under one entry. Its pages hang off a thin rail and only show while you're in the hub. */
.nav-hub { display: flex; flex-direction: column; gap: 2px; }
.nav-sub { display: none; flex-direction: column; gap: 1px; padding: 1px 0 6px; }
.nav-hub.open > .nav-sub { display: flex; animation: nav-sub-in .4s var(--ease); }
.nav-hub.open > .nav-hub-head { color: var(--ink); }
.nav-hub.open > .nav-hub-head svg { color: var(--accent); }
.nav-sub-item { height: 34px; padding-left: 46px; font-size: 14px; font-weight: 500; }
.nav-sub-item::before { content: ""; position: absolute; left: 23px; top: -1px; bottom: -1px; width: 1.5px; border-radius: 2px; background: var(--line-2); transition: background .2s; }
.nav-sub-item.active { font-weight: 600; }
.nav-sub-item.active::before { top: 8px; bottom: 8px; background: var(--accent); }
@keyframes nav-sub-in { from { opacity: 0; } }

.sidebar-foot { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.conn-status { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px 0 20px; border: 0; border-radius: 12px; background: none; font-size: 13px; color: var(--ink-2); text-align: left; transition: background .2s; }
.conn-status:hover { background: rgba(29, 27, 24, .045); }
.conn-dot { position: relative; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.connected .conn-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.connected .conn-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: live 2.8s var(--ease) infinite; }
@keyframes live { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.conn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.me { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 4px 0 8px; }
.me-avatar { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #f08a5d, var(--accent)); color: #fff; font-size: 13.5px; font-weight: 700; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-2); }
.me-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.me-text strong, .me-text small { overflow: hidden; text-overflow: ellipsis; }
.me-text strong { font-size: 13.5px; font-weight: 600; }
.me-text small { font-size: 12px; color: var(--faint); }
.me-out { border-color: transparent; background: transparent; color: var(--muted); }
.me-out:hover { background: rgba(29, 27, 24, .06); border-color: transparent; }

/* Tooltip for the collapsed rail (and the collapse button). One element, placed from JS, so the nav can scroll. */
.nav-tip { position: fixed; z-index: 70; top: 0; left: 0; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(29, 27, 24, .5); pointer-events: none; animation: tip-in .22s var(--ease); }
.nav-tip kbd { height: 18px; min-width: 18px; }
@keyframes tip-in { from { opacity: 0; translate: -6px 0; } }

/* Phone bar + drawer */
.mobilebar, .nav-scrim { display: none; }

@media (min-width: 800px) {
  .nav-collapsed .nav-label { opacity: 0; transform: translateX(-6px); pointer-events: none; }
  .nav-collapsed .nav-group::before { opacity: 1; }
  .nav-collapsed .nav-sub { display: none !important; }
  .nav-collapsed .toggle-chevron { transform: scaleX(-1); }
  .nav-collapsed .sidebar-head { justify-content: center; padding-left: 0; }
  /* Collapsed, the mark and the expand button share one spot: hovering the top of the rail swaps them. */
  .nav-collapsed .sidebar-toggle { position: absolute; left: 50%; top: 2px; margin-left: -18px; opacity: 0; transform: scale(.8); transition: opacity .2s var(--ease), transform .3s var(--ease), background .2s; }
  .nav-collapsed .sidebar-head .brand-mark { transition: opacity .2s var(--ease), transform .35s var(--ease); }
  .nav-collapsed .sidebar-head:hover .sidebar-toggle, .nav-collapsed .sidebar-toggle:focus-visible { opacity: 1; transform: none; }
  .nav-collapsed .sidebar-head:hover .brand-mark, .nav-collapsed .sidebar-head:focus-within .brand-mark { opacity: 0; transform: scale(.8); }
  .nav-collapsed .sidebar-new kbd { display: none; }
  .nav-collapsed .nav-badge { position: absolute; left: 27px; top: 3px; min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; box-shadow: 0 0 0 2px #f4f0e9; }
  .nav-collapsed .conn-status { padding-left: 20px; }
  .nav-collapsed .me { justify-content: center; padding: 6px 0 0; }
  .nav-collapsed .me-avatar, .nav-collapsed .me-text { display: none; }
}

@media (max-width: 799px) {
  body.in-desk, body.in-desk.nav-collapsed { --nav-w: 0px; --bar-h: 56px; }
  .mobilebar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; height: var(--bar-h); padding: 0 12px; background: rgba(250, 248, 244, .86); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease); }
  .mobilebar.scrolled { border-bottom-color: var(--line); }
  .mobilebar-menu { position: relative; width: 40px; height: 40px; border-color: transparent; background: transparent; }
  .mobilebar-menu svg { width: 21px; height: 21px; }
  .menu-dot { position: absolute; top: 7px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); animation: pop .4s var(--ease); }
  /* The page's own heading names it at the top; the bar picks the name up once that heading scrolls away. */
  .mobilebar-title { justify-self: center; font-weight: 700; font-size: 16px; letter-spacing: -.02em; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease), transform .4s var(--ease); }
  .scrolled .mobilebar-title { opacity: 1; transform: none; }
  .icon-btn-dark { width: 40px; height: 40px; flex-basis: 40px; background: var(--ink); border-color: var(--ink); color: #fff; }
  .icon-btn-dark:hover { border-color: var(--ink); color: #fff; }
  .sidebar { z-index: 36; width: min(300px, calc(100% - 56px)); padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); border-right: 0; border-radius: 0 22px 22px 0; transform: translateX(calc(-100% - 12px)); visibility: hidden; transition: transform .45s var(--ease), visibility 0s .45s; }
  .nav-open .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-lg); transition: transform .45s var(--ease), visibility 0s; }
  .nav-scrim { position: fixed; inset: 0; z-index: 35; display: block; background: rgba(29, 27, 24, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .35s var(--ease); }
  .nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .nav-open { overflow: hidden; }
  .sidebar-toggle { display: none; }
  .sidebar-close { display: grid; }
  .sidebar-new kbd { display: none; }
  /* Items cascade in as the drawer opens. */
  .nav-open .nav > :not(.nav-indicator) { animation: item-in .5s var(--ease) both; animation-delay: calc(var(--n, 0) * 28ms + 80ms); }
}

/* Layout */
.desk-main { --dir: 1; width: min(1120px, 100% - 80px); margin: 0 auto; padding: 44px 0 80px; }
.view { display: none; }
.view.active { display: block; animation: view-in .5s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(calc(var(--dir) * 14px)); } to { opacity: 1; transform: none; } }
.view.active .view-head > div > * { animation: head-in .6s var(--ease) both; }
.view.active .view-head > div > :nth-child(2) { animation-delay: 60ms; }
@keyframes head-in { from { opacity: 0; transform: translateY(calc(var(--dir) * 8px)); } }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.view-head h1 { font-size: 34px; letter-spacing: -.035em; }
.view-head p { margin-top: 4px; color: var(--muted); max-width: 640px; }
.subhead { font-size: 17px; margin: 40px 0 14px; }

/* Connect banner */
.connect-banner { display: flex; align-items: center; gap: 16px; padding: 16px 18px; margin-bottom: 20px; border-radius: var(--radius); background: linear-gradient(120deg, #fff 30%, #fff4ef); border: 1px solid #f6d6ca; }
.connect-banner > div:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.connect-banner span { color: var(--muted); font-size: 13.5px; }
.cb-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.cb-icon svg { width: 20px; height: 20px; }

.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-draft { background: var(--amber); } .dot-scheduled { background: var(--blue); } .dot-published { background: var(--green); } .dot-issue { background: var(--red); }

/* Segmented filter */
.list-head { margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.list-head::-webkit-scrollbar { display: none; }
.segmented { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: #f1ede6; }
.seg-indicator { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), width .45s var(--ease); }
.filter { position: relative; z-index: 1; border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: color .25s; }
.filter.active { color: var(--ink); }
.filter span { font-weight: 500; color: var(--faint); margin-left: 3px; }
#filters .filter { display: inline-flex; align-items: center; gap: 7px; }
#filters .filter span { min-width: 20px; height: 20px; margin-left: 0; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; transition: background .3s, color .3s; }
#filters .filter .dot { flex: 0 0 7px; width: 7px; height: 7px; }
#filters .filter span.hot { background: var(--amber-soft); color: var(--amber); }
#filters .filter span.hot-red { background: var(--red-soft); color: var(--red); }
#filters .filter span.bump { animation: pop .4s var(--ease); }

/* Posts: review inbox (queue on the left, sticky detail on the right) */
.recent-list { display: flex; flex-direction: column; gap: 10px; }
.stagger > * { animation: item-in .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes item-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.by-agent { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 500; }
.inbox { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 18px; align-items: start; }
.inbox.is-empty { grid-template-columns: minmax(0, 1fr); }
.inbox.is-empty .inbox-detail, .inbox.is-empty .queue-hint { display: none; }
.inbox-list { min-width: 0; }
.queue { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); outline: none; }
.q-row { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 11px; align-items: center; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.q-row:hover { background: var(--surface-2); }
.q-row.selected { background: #f6f2ec; box-shadow: inset 0 0 0 1px var(--line-2); }
.queue:focus-visible .q-row.selected { box-shadow: inset 0 0 0 1px var(--line-2), 0 0 0 3px rgba(224, 88, 58, .22); }
.q-row.is-flash { box-shadow: 0 0 0 3px rgba(224, 88, 58, .35); }
.q-row.is-issue::before { content: ""; position: absolute; left: 2px; top: 14px; bottom: 14px; width: 3px; border-radius: 2px; background: var(--red); }
.q-row.is-declined { opacity: .62; }
.q-thumb { display: block; width: 46px; height: 46px; border-radius: 10px; object-fit: cover; background: #efeae2; }
.q-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.q-top { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.q-caption { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-when { flex: 0 0 auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-status { color: var(--red); font-weight: 600; }
.q-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--faint); white-space: nowrap; }
.q-meta .sep::before, .detail-meta .sep::before, .queue-hint .sep::before { content: "·"; }
.q-pf { display: inline-flex; flex: 0 0 auto; }
.q-pf .cal-pf { box-shadow: 0 0 0 1.5px var(--surface); border-radius: 4px; overflow: hidden; }
.q-pf .cal-pf + .cal-pf { margin-left: -3px; }
.q-acct { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.q-by { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.q-section + .q-section, .q-row + .q-section { margin-top: 6px; }
.q-day { display: flex; align-items: center; gap: 10px; padding: 8px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.q-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.q-empty-day { padding: 4px 10px 8px; font-size: 12.5px; color: var(--faint); }
.q-declined { display: block; margin: 10px auto 0; border: 0; background: none; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--faint); transition: color .2s, background .2s; }
.q-declined:hover { color: var(--ink-2); background: rgba(29, 27, 24, .05); }
.queue-hint { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 12px; font-size: 12px; color: var(--faint); }
#hintApprove { display: inline-flex; align-items: center; gap: 5px; }
.queue-hint kbd { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface); box-shadow: 0 1px 0 var(--line-2); font: 600 10.5px var(--sans); color: var(--ink-2); }
.inbox-detail { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); scrollbar-width: thin; }
.detail-back { display: none; margin: -4px 0 10px -8px; }
.detail-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }
.detail-preview { min-width: 0; }
.preview-stage.inline-stage { max-height: none; overflow: hidden; padding: 16px 12px; }
.detail-preview .preview-note { margin-top: 8px; }
.detail-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 2px; }
.detail-info > * { max-width: 100%; }
.detail-top { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: -6px; font-size: 13px; color: var(--muted); }
.detail-accounts { display: flex; flex-wrap: wrap; gap: 6px; }
.detail-accounts .pv-acct { padding-left: 5px; }
.detail-accounts span.pv-acct { border-color: var(--line); color: var(--ink-2); }
.detail-issue { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 10px 14px 12px 8px; border-radius: 14px; background: var(--red-soft); color: var(--red); font-size: 13.5px; }
.detail-issue > div { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.detail-issue span { color: var(--ink-2); overflow-wrap: anywhere; }
.detail-note { width: 100%; padding: 12px 14px; border-radius: 14px; background: #f6f2ec; font-size: 13.5px; color: var(--ink-2); }
.detail-note strong { display: block; margin-bottom: 2px; font-size: 12.5px; color: var(--muted); }
.detail-actions, .detail-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.detail-more { flex-wrap: nowrap; }
.detail-more:empty { display: none; }
.detail-actions .post-more-btn { width: 36px; padding: 0; }
.detail-when { margin-top: -6px; font-size: 12.5px; color: var(--faint); }
.detail-when .link-btn { font-size: 12.5px; }
.detail-muted { font-size: 13px; color: var(--muted); }
.detail-info .schedule-pop { margin-top: -4px; }
.detail-metrics .history-metrics span { background: var(--bg); }
.decline-box { width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line); animation: item-in .35s var(--ease); }
.decline-box .field-label { margin: 0; }
.decline-box .field-label span { font-weight: 500; color: var(--faint); margin-left: 4px; }
.decline-box textarea.input { min-height: 84px; font-size: 14px; }
.decline-actions { display: flex; justify-content: flex-end; gap: 6px; }
@media (max-width: 1140px) {
  .inbox { grid-template-columns: 300px minmax(0, 1fr); }
  .detail-grid { grid-template-columns: 270px minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 1000px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-info { order: -1; }
  .detail-preview { max-width: 380px; width: 100%; justify-self: center; }
}
@media (max-width: 900px) {
  .inbox { grid-template-columns: minmax(0, 1fr); }
  .inbox-detail, .queue-hint { display: none; }
  .inbox.detail-open .inbox-detail { display: block; position: fixed; inset: 0; z-index: 35; max-height: none; padding: 14px 16px 40px; border: 0; border-radius: 0; background: var(--bg); box-shadow: none; animation: detail-in .35s var(--ease); }
  .detail-back { display: inline-flex; }
  body.detail-sheet-open { overflow: hidden; }
}
@keyframes detail-in { from { opacity: 0; transform: translateX(24px); } }
.post-error { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--red); background: var(--red-soft); padding: 5px 10px 5px 4px; border-radius: 10px; }
.post-error-posy { flex: 0 0 34px; width: 34px; height: 34px; }
.post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.post-link { font-size: 13px; font-weight: 600; color: var(--green); }
.post-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.schedule-pop { align-self: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; margin-top: 2px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); animation: item-in .35s var(--ease); }
.schedule-input { height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 12.5px; outline: none; }
.schedule-input:focus { border-color: var(--accent); }

/* Chips */
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: #f1ede6; color: var(--ink-2); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.draft { background: var(--amber-soft); color: var(--amber); }
.chip.scheduled { background: var(--blue-soft); color: var(--blue); }
.chip.facebook_draft, .chip.facebook_draft_sending { background: var(--blue-soft); color: var(--blue); }
.chip.facebook_draft_uncertain { background: var(--red-soft); color: var(--red); }
.chip.publishing::before { animation: blink 1s ease-in-out infinite; }
.chip.published { background: var(--green-soft); color: var(--green); }
.chip.failed, .chip.needs_review { background: var(--red-soft); color: var(--red); }
.chip.rejected { background: #f1ede6; color: var(--faint); }
.chip.locked { background: var(--ink); color: #fff; }
.chip.locked::before { display: none; }
.chip .lock-icon { width: 11px; height: 11px; stroke-width: 2.4; }
@keyframes blink { 50% { opacity: .3; } }

/* Empty states */
.empty { text-align: center; padding: 64px 20px; border: 1.5px dashed var(--line-2); border-radius: 22px; color: var(--muted); animation: item-in .5s var(--ease); }
.empty-posy { display: block; width: 116px; height: 116px; margin: -12px auto 8px; animation: posy-float 4s ease-in-out infinite; }
@keyframes posy-float { 50% { transform: translateY(-5px); } }
.empty-icon { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 16px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--accent); }
.empty-icon svg { width: 24px; height: 24px; }
.empty h3 { color: var(--ink); font: var(--title-md); letter-spacing: -.02em; margin-bottom: 4px; }
.empty .btn { margin-top: 18px; }

/* Schedule timeline */
.timeline { display: flex; flex-direction: column; gap: 22px; }
.day-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.day-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.day-items { display: flex; flex-direction: column; gap: 10px; }
.slot { display: grid; grid-template-columns: 76px 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.slot-time { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 15px; }
.slot-time small { display: block; color: var(--faint); font-weight: 500; font-size: 11.5px; }
.slot img, .slot video { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; background: #efeae2; }
.slot-body { min-width: 0; }
.slot-body p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-body span { font-size: 12.5px; color: var(--faint); }
.slot-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.slot .schedule-pop { grid-column: 1 / -1; }
.recent { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.recent img, .recent video { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; }
.recent p { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.recent span { color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.recent-body { flex: 1; min-width: 0; }
.recent-body p { display: block; margin: 0 0 4px; }
.recent-body small { display: block; color: var(--faint); margin-bottom: 6px; }
.recent .history-metrics { margin-top: 5px; }
.recent .history-metrics span { white-space: nowrap; }
.recent .history-unavailable { white-space: normal; font-size: 12px; color: var(--faint); }
.muted-note { color: var(--faint); font-size: 14px; padding: 6px 2px; }

/* Agents */
.agent-list { display: flex; flex-direction: column; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.agent-list:has(.agents-empty) { border: 0; background: none; box-shadow: none; }
.agent-list-head, .agent-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 0 18px; }
.agent-list-head { padding-top: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.agent-row { padding-top: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); transition: background .2s; }
.agent-row:last-child { border-bottom: 0; border-radius: 0 0 20px 20px; }
.agent-row:hover { background: #fdfcfa; }
.agent-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.agent-row.paused .avatar { filter: grayscale(1); opacity: .55; }
.agent-row.paused .agent-name strong { color: var(--muted); }
.avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; transition: filter .3s, opacity .3s; }
.avatar.sm { width: 18px; height: 18px; flex-basis: 18px; border-radius: 5px; font-size: 8.5px; }
.agent-name { flex: 1; min-width: 0; }
.agent-name strong { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-name span { display: block; font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-access { justify-self: start; margin-left: -11px; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 5px 8px 5px 10px; border-radius: 12px; border: 1px solid transparent; background: none; text-align: left; transition: border-color .2s, background .2s; }
.agent-access:hover, .agent-access:focus-visible { border-color: var(--line-2); background: var(--surface); }
.agent-access .btn-icon { flex: 0 0 auto; width: 18px; height: 18px; }
.agent-access.safe .btn-icon { color: var(--green); }
.agent-access.risky .btn-icon { color: var(--amber); }
.agent-access.none .btn-icon { color: var(--faint); }
.agent-access > span { display: flex; flex-direction: column; min-width: 0; }
.agent-access strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.agent-access.risky strong { color: var(--amber); }
.agent-access small { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-access-chevron { flex: 0 0 auto; width: 14px; height: 14px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-3px); transition: opacity .2s, transform .2s var(--ease); }
.agent-access:hover .agent-access-chevron, .agent-access:focus-visible .agent-access-chevron { opacity: 1; transform: none; }
.agent-activity { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; }
.agent-activity small { font-size: 12px; color: var(--faint); }
.agent-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); white-space: nowrap; }
.agent-status::before { content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--faint); }
.agent-status.live::before { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.agent-status.waiting::before { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.agent-status.paused { color: var(--muted); }
.agent-activity .link-btn { padding-left: 14px; font-size: 12px; }
.agent-controls { display: flex; align-items: center; gap: 6px; }
.agent-more-btn { width: 32px; padding: 0; justify-content: center; }
.agent-more .menu { min-width: 180px; }
.assistant-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding: 0 4px; }
.assistant-strip[hidden] { display: none; }
.assistant-strip-label { font-size: 13px; color: var(--muted); }
.assistant-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.assistant-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: border-color .2s, box-shadow .2s, color .2s; }
.assistant-chip:hover, .assistant-chip:focus-visible { border-color: var(--line-2); box-shadow: var(--shadow-sm); color: var(--ink); }
.platform-icon.xs { width: 22px; height: 22px; flex-basis: 22px; border-radius: 7px; box-shadow: none; }
.agents-empty { padding: 36px 0 8px; text-align: center; }
.agents-empty h2 { font-size: 22px; letter-spacing: -.02em; }
.agents-empty > p { max-width: 460px; margin: 6px auto 26px; color: var(--muted); }
.agents-empty .assistants { text-align: left; }
@media (max-width: 760px) {
  .agent-list-head { display: none; }
  .agent-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id controls" "access access" "activity activity"; gap: 4px 12px; padding: 14px 14px 12px; }
  .agent-row:first-of-type { border-radius: 20px 20px 0 0; }
  .agent-id { grid-area: id; }
  .agent-controls { grid-area: controls; }
  .agent-access { grid-area: access; margin: 6px 0 0 41px; }
  .agent-activity { grid-area: activity; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-left: 52px; }
  .agent-activity .link-btn { padding-left: 0; }
}
.switch { position: relative; width: 40px; height: 24px; flex: 0 0 40px; border: 0; padding: 0; border-radius: 999px; background: #ddd6cb; transition: background .3s var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .35s var(--ease); }
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.assistants { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.assistant-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; transition: box-shadow .3s var(--ease), border-color .2s, transform .3s var(--ease); }
.assistant-tile:hover { box-shadow: var(--shadow-lg); border-color: var(--line-2); transform: translateY(-2px); }
.assistant-tile:hover .platform-icon { transform: rotate(-6deg) scale(1.05); }
.assistant-tile .platform-icon { margin-bottom: 8px; }
.assistant-tile strong { font-size: 15px; }
.assistant-tile > span:not(.platform-icon) { font-size: 12.5px; color: var(--faint); line-height: 1.35; }
.assistant-tile em { margin-top: 10px; font-style: normal; }
.tile-cta { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.assistant-tile:hover .tile-cta .arrow { transform: translateX(3px); }
.tile-cta .arrow { display: inline-block; transition: transform .2s var(--ease); }
.avatar.is-logo { overflow: hidden; }
.avatar.is-logo svg { width: 100%; height: 100%; display: block; }
.avatar.is-logo .platform-logo { border-radius: inherit; }
.add-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 206px; border-radius: 20px; border: 1.5px dashed var(--line-2); background: transparent; color: var(--muted); font-weight: 600; transition: border-color .2s, color .2s, background .2s; }
.add-card:hover { border-color: var(--accent); color: var(--accent); background: #fffaf8; }
.add-card i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 22px; background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease); }
.add-card:hover i { transform: rotate(90deg); }

/* Sheets: drawer + modal */
.sheet { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.sheet.open { pointer-events: auto; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(29, 27, 24, .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity .35s var(--ease); }
.sheet.open .sheet-backdrop { opacity: 1; }
.drawer { position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(460px, calc(100% - 20px)); display: flex; flex-direction: column; background: var(--surface); border-radius: 22px; box-shadow: var(--shadow-lg); transform: translateX(calc(100% + 20px)); transition: transform .5s var(--ease); }
.sheet.open .drawer { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 4px; }
.drawer-head h2 { font-size: 22px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 0 22px 22px; display: flex; flex-direction: column; }
.drawer-body > * { flex-shrink: 0; }
.drawer-body .field-label:first-child { margin-top: 12px; }
/* Fields keep their size and the drawer scrolls, rather than squeezing the upload area. */
.drawer-body > * { flex-shrink: 0; }
.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 18px; }
.upload-area { position: relative; height: 200px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--line-2); border-radius: 16px; background: var(--surface-2); cursor: pointer; overflow: hidden; transition: border-color .2s, background .2s; }
.upload-area:hover, .upload-area.dragging { border-color: var(--accent); background: #fffaf8; }
.upload-area.dragging .upload-icon { transform: translateY(-4px); }
.upload-area img, .upload-area video { width: 100%; height: 100%; object-fit: contain; background: #f3efe8; animation: fade .4s var(--ease); }
.format-hint { margin: 6px 0 2px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.format-tag { color: var(--accent); font-weight: 700; }
@keyframes fade { from { opacity: 0; transform: scale(.98); } }
.upload-prompt { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.upload-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; transition: transform .3s var(--ease); }
.upload-icon svg { width: 20px; height: 20px; }
.upload-prompt strong { font-size: 14.5px; }
.upload-prompt small { color: var(--faint); font-size: 12.5px; }

.modal { position: absolute; top: 50%; left: 50%; width: min(520px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow-y: auto; padding: 30px; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-lg); transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: transform .45s var(--ease), opacity .3s var(--ease); }
.sheet.open .modal { transform: translate(-50%, -50%); opacity: 1; }
.modal-close { position: absolute; top: 18px; right: 18px; }
.modal-step { animation: item-in .45s var(--ease); }
.modal-step h2 { font-size: 23px; }
.modal-step > p { margin-top: 4px; color: var(--muted); }
.modal-step > .btn-block { margin-top: 20px; height: 46px; }
.modal-posy { display: block; width: 84px; height: 84px; margin: -8px 0 8px -8px; }
.modal-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 16px; }
.modal-icon svg { width: 22px; height: 22px; }
.modal-icon.success { background: var(--green-soft); color: var(--green); animation: pop .5s var(--ease); }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.suggestion { border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-2); transition: border-color .2s, background .2s; }
.suggestion:hover { border-color: var(--line-2); background: #fff; }
.key-box { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--ink); color: #fff; }
.key-box code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
.key-box .btn-light { background: #fff; border-color: #fff; color: var(--ink); }
.copied { background: var(--green) !important; border-color: var(--green) !important; color: #fff !important; }

/* Toast */
.toast { position: fixed; left: calc(50% + var(--nav-w) / 2); bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 11px 18px 11px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; box-shadow: 0 16px 40px -12px rgba(29,27,24,.5); transform: translate(-50%, 0); animation: toast-in .45s var(--ease); }
.toast { padding-left: 8px; width: max-content; }
.toast-posy { flex: 0 0 34px; width: 34px; height: 34px; margin: -6px 0; background: rgba(255,255,255,.1); border-radius: 50%; }
.toast.leaving { animation: toast-out .3s var(--ease) forwards; }
.toast-action { margin: -4px -8px -4px 4px; padding: 5px 12px; border: 0; border-radius: 999px; background: rgba(255,255,255,.14); color: #ffd9cc; font-size: 13.5px; font-weight: 600; }
.toast-action:hover { background: rgba(255,255,255,.24); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 10px) scale(.97); } }


/* Schedule mode toggle */
.mode { display: inline-flex; align-items: center; gap: 6px; }
.mode svg { width: 15px; height: 15px; }

/* Calendar */
.history-status { margin: -8px 0 16px; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.history-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.history-metrics span { padding: 5px 7px; border-radius: 8px; background: var(--surface); color: var(--muted); font-size: 11.5px; }
.history-metrics strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.history-unavailable { color: var(--faint); font-size: 11.5px; }
.side-item.focused { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.cal-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.cal-card { padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cal-head h2 { font-size: 22px; }
.cal-head h2 span { color: var(--faint); font-weight: 500; }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav .icon-btn { width: 32px; height: 32px; flex-basis: 32px; }
.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-weekdays span { padding: 0 8px 8px; font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.cal-grid { gap: 4px; }
.cal-grid.fade-in { animation: view-in .45s var(--ease); }
.cal-grid.slide-next { animation: slide-next .45s var(--ease); }
.cal-grid.slide-prev { animation: slide-prev .45s var(--ease); }
@keyframes slide-next { from { opacity: 0; transform: translateX(24px); } }
@keyframes slide-prev { from { opacity: 0; transform: translateX(-24px); } }
.cal-day { position: relative; min-height: 104px; min-width: 0; padding: 6px; border-radius: 12px; background: var(--surface-2); border: 1px solid transparent; display: flex; flex-direction: column; gap: 4px; cursor: pointer; outline: none; transition: background .2s, border-color .2s, box-shadow .2s; }
.cal-day:hover { background: #f7f3ed; }
.cal-day:focus-visible { box-shadow: 0 0 0 3px rgba(224, 88, 58, .25); }
.cal-day.outside { opacity: .45; }
.cal-day.past .cal-num { color: var(--faint); }
.cal-day.selected { background: var(--surface); border-color: var(--ink); box-shadow: var(--shadow-sm); }
.cal-num { align-self: flex-start; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-day.today .cal-num { background: var(--accent); color: #fff; }
.cal-items { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-pill { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 3px 6px 3px 3px; border-radius: 7px; font-size: 11.5px; line-height: 1.3; animation: item-in .35s var(--ease) both; transition: transform .2s var(--ease), box-shadow .2s, opacity .2s; }
.cal-pill b { font-weight: 600; white-space: nowrap; }
.cal-pill em { font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .8; }
.cal-pill[draggable] { cursor: grab; }
.cal-pill[draggable]:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cal-pill.dragging { opacity: .4; }
.tone-scheduled { background: var(--blue-soft); color: #274f9f; }
.tone-published { background: var(--green-soft); color: #1d6b40; }
.tone-issue { background: var(--red-soft); color: #9a2e21; }
.cal-pf { flex: 0 0 14px; width: 14px; height: 14px; display: inline-block; }
.cal-pf svg { width: 14px; height: 14px; display: block; }
.cal-pf svg rect { rx: 4px; }
.cal-more { font-size: 11px; font-weight: 600; color: var(--muted); padding-left: 4px; }
.cal-dots { display: none; gap: 3px; justify-content: center; }
.dot-issue { background: var(--red); }
.cal-grid.is-dragging .cal-day:not(.past) { border-style: dashed; border-color: var(--line-2); }
.cal-grid.is-dragging .cal-day.past { opacity: .35; cursor: not-allowed; }
.cal-day.drop-target { background: var(--accent-soft) !important; border-color: var(--accent) !important; border-style: solid !important; transform: scale(1.02); }
.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 0 4px; font-size: 12.5px; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }

.cal-side { position: sticky; top: calc(var(--bar-h) + 24px); padding: 18px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); min-height: 200px; }
.cal-side.swap { animation: view-in .35s var(--ease); }
.side-head span { font-size: 12.5px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.side-head h3 { font-size: 22px; margin-top: 2px; }
.side-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.side-item { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); animation: item-in .4s var(--ease) both; }
.side-item:nth-child(2) { animation-delay: .05s; } .side-item:nth-child(3) { animation-delay: .1s; }
.side-item-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.side-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.side-media { aspect-ratio: 4 / 3; max-height: 260px; border-radius: 10px; overflow: hidden; background: #efeae2; }
.side-media img, .side-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.side-caption { font-size: 13.5px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.side-item.expanded .side-caption { display: block; overflow: visible; }
.side-more { align-self: flex-start; margin-top: -6px; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.side-more:hover { color: var(--ink); }
.side-item-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--muted); }
.side-item-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-metrics { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.side-metrics strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.side-metrics-empty { font-size: 12px; color: var(--faint); }
.side-item-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.side-item-foot .post-actions { margin-top: 0; gap: 4px; }
.side-item-foot .btn-xs { padding: 0 9px; }
.side-item-foot .post-link { margin-left: auto; font-size: 12.5px; white-space: nowrap; }
.side-item .schedule-pop { align-self: stretch; }
.side-item .schedule-input { flex: 1; min-width: 0; }
.side-empty { text-align: center; padding: 26px 8px 8px; color: var(--muted); font-size: 14px; }
.side-empty .empty-icon { margin-bottom: 12px; }
.side-empty .btn { margin-top: 14px; }

/* Connections */
.platform-icon { width: 42px; height: 42px; flex: 0 0 42px; display: block; border-radius: 12px; box-shadow: 0 4px 10px -4px rgba(29,27,24,.3); transition: transform .35s var(--ease); }
.platform-icon svg { width: 100%; height: 100%; display: block; }
.platform-logo { width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; border-radius: 22%; background: #fff; }
.platform-logo img { display: block; width: 76%; height: 76%; object-fit: contain; }
.platform-logo-facebook img { width: 82%; height: 82%; }
.platform-logo-instagram img { width: 78%; height: 78%; }
.platform-logo-linkedin img { width: 80%; height: 80%; }
.platform-logo-x, .platform-logo-threads, .platform-logo-tiktok, .platform-logo-grok { background: #111; }
.platform-logo-x img, .platform-logo-tiktok img, .platform-logo-grok img { filter: invert(1); }
.platform-logo-x img { width: 61%; height: 61%; }
.platform-logo-threads img { width: 64%; height: 64%; }
.platform-logo-youtube img { width: 82%; height: 82%; }
.platform-logo-openai img { width: 70%; height: 70%; }
.platform-logo-claude img { width: 75%; height: 75%; }
.platform-logo-muse { background: transparent; }
.platform-logo-muse img { width: 100%; height: 100%; }
.cal-pf .platform-logo, .ph-badge .platform-logo, .acct-badge .platform-logo, .picker-soon .platform-logo { border-radius: inherit; }
.cal-pf .platform-logo img, .ph-badge .platform-logo img, .acct-badge .platform-logo img, .picker-soon .platform-logo img { width: 86%; height: 86%; }
.platform-icon.lg { width: 56px; height: 56px; flex-basis: 56px; border-radius: 16px; }
.platform-tag { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: #f1ede6; color: var(--muted); white-space: nowrap; }
.platform-tag.live { background: var(--green-soft); color: var(--green); }
.account-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12.5px; font-weight: 700; }

/* Connections page: attention banner, grouped account list, platform tiles */
/* A short, capped entrance: the last tile is in place by about 300ms. */
#view-connections .stagger > * { animation-duration: .24s; animation-delay: calc(min(var(--i, 0), 3) * 20ms); }
#view-connections :is(button, summary, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.conn-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.conn-pill svg { width: 13px; height: 13px; flex: 0 0 13px; stroke-width: 2.2; }
.conn-pill.is-ok { background: var(--green-soft); color: #1f7445; }
.conn-pill.is-expiring { background: var(--amber-soft); color: #7a520c; }
.conn-pill.is-reconnect { background: var(--red-soft); color: #9a2e21; }
.conn-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conn-id strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn-id > span { font-size: 12.5px; color: var(--faint); overflow-wrap: anywhere; }
/* Details can run to a few hundred characters; the full text is in the title and the Last error expander. */
.conn-id > .conn-detail { margin-top: 2px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.conn-error p { max-height: 9.5em; overflow-y: auto; }
#connectBody > .conn-lead { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Attention banner */
.conn-attention { margin-bottom: 22px; padding: 16px 18px 6px; border-radius: var(--radius); border: 1px solid #f0dcae; background: linear-gradient(120deg, var(--surface) 35%, #fdf6e4); }
.conn-attention.is-reconnect { border-color: #f3cfc7; background: linear-gradient(120deg, var(--surface) 35%, #fdf0ec); }
.conn-attention-head { display: flex; align-items: flex-start; gap: 14px; }
.conn-attention-icon { flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--amber-soft); color: var(--amber); }
.is-reconnect .conn-attention-icon { background: var(--red-soft); color: var(--red); }
.conn-attention-icon svg { width: 19px; height: 19px; }
.conn-attention h2 { font-size: 16px; letter-spacing: -.015em; }
.conn-attention-head p { margin-top: 1px; font-size: 13.5px; color: var(--muted); }
.conn-attention-list { list-style: none; margin: 12px 0 0; padding: 0; }
.conn-attention-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(29, 27, 24, .07); }
.conn-attention-list .conn-id > span { color: var(--ink-2); }

/* Search and filter, once the list is long */
.conn-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.conn-search { position: relative; flex: 1; max-width: 360px; }
.conn-search svg { position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.conn-search .input { height: 40px; padding: 0 14px 0 38px; border-radius: 999px; }
.conn-toolbar .filter { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }

/* Connected accounts, grouped by platform */
.conn-list { border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.conn-group + .conn-group { border-top: 1px solid var(--line); }
.conn-group-head { display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.conn-group:first-child .conn-group-head { border-radius: 20px 20px 0 0; }
.conn-group-head h3 { font-size: 14px; letter-spacing: -.01em; }
.conn-count { min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: #f1ede6; font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.conn-group-head .conn-add-another { margin-left: auto; min-height: 32px; font-size: 13px; color: var(--muted); }
.conn-group-head .conn-add-another:hover { color: var(--ink); }
.conn-rows { list-style: none; margin: 0; padding: 0; }
.conn-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px; transition: background .2s; }
.conn-row + .conn-row { border-top: 1px solid var(--line); }
.conn-row:hover { background: var(--surface-2); }
.conn-group:last-child .conn-row:last-child { border-radius: 0 0 20px 20px; }
.conn-row.is-reconnect::before, .conn-row.is-expiring::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 2px 2px 0; background: var(--amber); }
.conn-row.is-reconnect::before { background: var(--red); }
/* A fixed column so status pills line up down the list. */
.conn-state { flex: 0 0 142px; }
.conn-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.conn-reconnect.is-reconnect { color: #9a2e21; border-color: #f0c6bd; }
.conn-more-btn { width: 36px; padding: 0; justify-content: center; }
.conn-more .menu { min-width: 170px; }
.conn-more .menu button:focus-visible { outline: none; background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 2px rgba(224, 88, 58, .35); }
.conn-more .menu button.danger:focus-visible { background: var(--red-soft); color: var(--red); }
.conn-error { margin-top: 6px; font-size: 12.5px; }
.conn-error summary { display: inline-flex; align-items: center; gap: 6px; width: fit-content; border-radius: 6px; color: var(--muted); font-weight: 600; cursor: pointer; list-style: none; }
.conn-error summary::-webkit-details-marker { display: none; }
.conn-error summary::before { content: ""; width: 5px; height: 5px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease); }
.conn-error[open] summary::before { transform: rotate(45deg); }
.conn-row.is-reconnect .conn-error.is-flagged summary { color: #9a2e21; }
.conn-row.is-expiring .conn-error.is-flagged summary { color: #7a520c; }
.conn-error p { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--bg); color: var(--ink-2); overflow-wrap: anywhere; }
.conn-none { padding: 28px 20px; border: 1.5px dashed var(--line-2); border-radius: 20px; text-align: center; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.conn-empty { padding: 12px 0 4px; text-align: center; }
.conn-empty h2 { font-size: 22px; letter-spacing: -.02em; }
.conn-empty p { max-width: 460px; margin: 6px auto 0; color: var(--muted); }

/* Add a platform */
.conn-platforms { margin-top: 40px; }
.conn-section-head { margin-bottom: 14px; }
.conn-section-head h2 { font-size: 18px; letter-spacing: -.02em; }
.conn-section-head p { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.conn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.conn-tile { display: flex; flex-direction: column; gap: 3px; padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .3s var(--ease), border-color .2s; }
.conn-tile:not(.is-unset):hover { border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.conn-tile:not(.is-unset):hover .platform-icon { transform: rotate(-6deg) scale(1.05); }
.conn-tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.conn-tile .platform-icon { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; }
.conn-tile strong { font-size: 15px; }
.conn-tile > p { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.conn-tile-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-top: auto; padding-top: 14px; }
.conn-tile-count { font-size: 12px; font-weight: 600; color: var(--green); white-space: nowrap; }
.conn-tile-count.is-muted { margin-top: 6px; color: var(--muted); }
.conn-tile-badge { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px; background: #f1ede6; font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.conn-tile.is-unset { background: var(--surface-2); border-style: dashed; border-color: var(--line-2); box-shadow: none; }
.conn-tile.is-unset .platform-icon { filter: grayscale(1); opacity: .55; box-shadow: none; }
.conn-tile.is-unset strong { color: var(--ink-2); }
.conn-tile > .conn-tile-help { margin-top: auto; padding-top: 12px; font-size: 12px; color: var(--faint); }

/* Platform chooser (header button) */
.conn-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.conn-choice { width: 100%; }
.conn-choice .platform-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
.conn-choice > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.conn-choice.is-unset { background: var(--surface-2); border-style: dashed; cursor: default; }
.conn-choice.is-unset:hover { transform: none; box-shadow: none; border-color: var(--line); }
.conn-choice.is-unset .platform-icon { filter: grayscale(1); opacity: .55; box-shadow: none; }

/* Disconnect confirmation */
.conn-danger-icon { background: var(--red-soft); color: var(--red); }
.conn-consequences { list-style: none; margin: 16px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--bg); display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); }
.conn-consequences li { position: relative; padding-left: 16px; }
.conn-consequences li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--faint); }
.conn-confirm-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.btn-danger-fill { background: var(--red); color: #fff; box-shadow: 0 6px 14px -6px rgba(194, 59, 42, .55); }
.btn-danger-fill:hover:not(:disabled) { background: #a93222; }
.conn-confirm h2 { overflow-wrap: anywhere; padding-right: 36px; }

/* Sidebar status and composer picker warnings */
.conn-status.attention .conn-dot { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.conn-status.urgent .conn-dot { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.conn-status.attention .conn-name { color: #7a520c; font-weight: 600; }
.conn-status.urgent .conn-name { color: #9a2e21; }
.acct-warn { position: absolute; top: -4px; left: -4px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-size: 11px; font-style: normal; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--surface-2); }

@media (max-width: 720px), (pointer: coarse) {
  #view-connections .btn-sm, .conn-confirm .btn, .conn-choice { min-height: 44px; }
  #view-connections .btn-sm { height: auto; }
  .conn-more-btn { width: 44px; }
  .conn-group-head .conn-add-another { min-height: 44px; padding: 0 2px; }
  .conn-toolbar .filter { min-height: 36px; }
}
@media (max-width: 720px) {
  .conn-toolbar { flex-direction: column; align-items: stretch; }
  .conn-search { max-width: none; }
  .conn-toolbar .segmented { align-self: flex-start; max-width: 100%; }
  .conn-group-head { padding: 8px 16px; }
  .conn-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "avatar id more" ". state state" ". actions actions"; gap: 0 12px; align-items: start; padding: 14px 16px; }
  .conn-row > .account-avatar-wrap { grid-area: avatar; margin-top: 2px; }
  .conn-row > .conn-id { grid-area: id; }
  .conn-row > .conn-state { grid-area: state; margin-top: 6px; flex-basis: auto; }
  .conn-row > .conn-actions { grid-area: actions; flex-wrap: wrap; margin-top: 8px; }
  /* Negative margins keep the 44px menu button from stretching the name row. */
  .conn-row > .conn-more { grid-area: more; margin: -10px -10px -14px 0; }
  .conn-attention { padding: 14px 16px 4px; }
  .conn-attention-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 8px; }
  .conn-attention-list li > .account-avatar-wrap { align-self: start; margin-top: 2px; }
  .conn-attention-list .conn-id { grid-column: 2 / -1; }
  .conn-attention-list .conn-pill { grid-column: 2; justify-self: start; }
  .conn-attention-list .btn { grid-column: 3; }
  .conn-tiles { grid-template-columns: 1fr; }
  .conn-confirm-actions .btn { flex: 1; }
  #view-connections .view-head > .btn { align-self: stretch; }
}
@media (min-width: 721px) and (max-width: 900px) {
  .conn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* Agent permissions */
.perm-modal { width: min(560px, calc(100% - 24px)); }
.perm-modal .guide-head .avatar { flex: 0 0 auto; }
.perm-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.perm-preset { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; transition: border-color .2s, box-shadow .2s; }
.perm-preset strong { font-size: 13.5px; }
.perm-preset span { font-size: 11.5px; line-height: 1.35; color: var(--faint); }
.perm-preset:hover { border-color: var(--line-2); }
.perm-preset.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.perm-group { margin-top: 20px; }
.perm-group h3 { margin-bottom: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.perm-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; }
.perm-group .perm-row:last-child { border-bottom: 0; }
.perm-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.perm-text strong { font-size: 14.5px; font-weight: 600; }
.perm-text span { font-size: 12.5px; color: var(--muted); }
.perm-row .switch { pointer-events: none; }
.perm-row[aria-checked="true"] .switch { background: var(--green); }
.perm-row[aria-checked="true"] .switch::after { transform: translateX(16px); }
.perm-row.risky[aria-checked="true"] .switch { background: var(--amber); }
.perm-row.risky[aria-checked="true"] .perm-text strong { color: var(--amber); }
.perm-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.perm-row.locked { cursor: default; }
.perm-row.locked strong { color: var(--muted); }
.perm-lock { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--red-soft); color: var(--red); }
.perm-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.perm-choice { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; transition: border-color .2s, box-shadow .2s; }
.perm-choice:hover { border-color: var(--line-2); }
.perm-choice.active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.perm-choice i { flex: 0 0 16px; height: 16px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: border .2s var(--ease); }
.perm-choice.active i { border: 5px solid var(--ink); }
.perm-choice span { display: flex; flex-direction: column; min-width: 0; }
.perm-choice strong { font-size: 13.5px; }
.perm-choice small { font-size: 12px; line-height: 1.35; color: var(--faint); }
.perm-accounts { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding: 6px; border-radius: 14px; background: var(--bg); }
.perm-account { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.perm-account:hover { background: var(--surface); }
.perm-account input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink); }
.perm-account-photo { width: 26px; height: 26px; flex: 0 0 26px; font-size: 10.5px; }
.perm-ig { display: block; border-radius: 8px; overflow: hidden; }
.perm-ig svg { display: block; width: 100%; height: 100%; }
.perm-empty { font-size: 13px; color: var(--muted); }
.perm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
@media (max-width: 600px) {
  .perm-presets, .perm-choices { grid-template-columns: 1fr; }
}

/* Connect agent modal */
.agent-modal { width: min(560px, calc(100% - 24px)); }
.assistant-picks { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.assistant-pick { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: left; transition: border-color .2s, box-shadow .2s, transform .25s var(--ease); }
.assistant-pick:hover, .assistant-pick:focus-visible { border-color: var(--line-2); box-shadow: var(--shadow-sm); transform: translateX(2px); }
.assistant-pick > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.assistant-pick strong { font-size: 15px; }
.assistant-pick small { font-size: 12.5px; color: var(--faint); }
.assistant-pick .arrow { color: var(--faint); transition: transform .2s var(--ease), color .2s; }
.assistant-pick:hover .arrow { transform: translateX(3px); color: var(--ink); }
.modal-back { display: inline-block; margin-bottom: 14px; color: var(--muted); }
#agentStepName .center { text-align: center; }
.agent-schedule-choice { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; padding: 14px; border: 1px solid var(--line-2); border-radius: 14px; cursor: pointer; }
.agent-schedule-choice input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--green); flex: 0 0 18px; }
.agent-schedule-choice span { display: flex; flex-direction: column; gap: 3px; }
.agent-schedule-choice strong { font-size: 14px; }
.agent-schedule-choice small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.connect-features li.no::before { content: "✕"; background: var(--red-soft); color: var(--red); }
.guide-head { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.guide-head h2 { font-size: 22px; }
.guide-head p { margin-top: 2px; font-size: 14px; color: var(--muted); }
.guide-methods { margin-top: 18px; }
.guide-warn { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: var(--amber-soft); color: #7a520c; font-size: 13px; line-height: 1.45; }
.guide-steps { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; }
.guide-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; animation: item-in .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.guide-step:not(:last-child)::before { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 4px; width: 1px; background: var(--line-2); }
.guide-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.guide-body { min-width: 0; padding-top: 3px; }
.guide-body > strong { display: block; font-size: 14.5px; }
.guide-body > p { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.guide-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent); }
.guide-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.guide-field { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.guide-field span { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.guide-field code { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-code { position: relative; margin-top: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); }
.guide-code pre { margin: 0; padding: 12px 14px; padding-right: 70px; max-height: 180px; overflow: auto; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.guide-code .btn { position: absolute; top: 6px; right: 6px; height: 26px; padding: 0 10px; font-size: 11.5px; }
.btn.copied { color: var(--green); border-color: var(--green-soft); }
.guide-status { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg); transition: background .4s var(--ease), border-color .4s; }
.guide-status strong { display: block; font-size: 14px; }
.guide-status span { display: block; font-size: 12.5px; color: var(--muted); }
.gs-posy { flex: 0 0 44px; width: 44px; height: 44px; margin: -6px 0; }
.guide-status.just-connected .gs-posy { animation: pop .5s var(--ease); }
.gs-icon { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; background: var(--surface); border: 1px solid var(--line-2); color: var(--muted); }
.gs-icon svg { width: 16px; height: 16px; stroke-width: 2.4; }
.gs-icon b { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); animation: waiting 1.6s ease-in-out infinite; }
@keyframes waiting { 0%, 100% { box-shadow: 0 0 0 0 rgba(178,120,18,.35); } 60% { box-shadow: 0 0 0 7px rgba(178,120,18,0); } }
.guide-status.is-connected { background: var(--green-soft); border-color: #c9e7d4; }
.guide-status.is-connected .gs-icon { background: var(--green); border-color: var(--green); color: #fff; }
.guide-status.just-connected .gs-icon { animation: pop .5s var(--ease); }
#agentStepKey > .btn-block { margin-top: 16px; }

/* Connect modal */
.connect-hero { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 20px; }
.brand-mark.lg { width: 64px; height: 64px; }
.connect-link { display: flex; gap: 5px; }
.connect-link i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); animation: link-pulse 1.4s ease-in-out infinite; }
.connect-link i:nth-child(2) { animation-delay: .15s; } .connect-link i:nth-child(3) { animation-delay: .3s; }
@keyframes link-pulse { 0%, 100% { background: var(--line-2); transform: none; } 40% { background: var(--accent); transform: scale(1.3); } }
#connectBody h2 { text-align: center; }
#connectBody > p { text-align: center; }
.connect-features { list-style: none; margin: 18px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--bg); display: flex; flex-direction: column; gap: 9px; }
.connect-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); }
.connect-features li::before { content: "✓"; flex: 0 0 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 700; }
.type-options { display: flex; gap: 8px; flex-wrap: wrap; }
.type-option { flex: 1; min-width: 120px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.type-option.active { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(29,27,24,.08); }
.connect-note { margin-top: 14px; font-size: 13px; color: var(--muted); }
.connect-note.center { text-align: center; margin-top: 10px; }
#connectBody .btn-block { margin-top: 20px; height: 46px; }

@media (max-width: 1000px) {
  .assistants { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cal-layout { grid-template-columns: 1fr; }
  .cal-side { position: static; }
}
@media (max-width: 700px) {
  .cal-card { padding: 12px; }
  .cal-weekdays span { padding: 0 0 6px; text-align: center; font-size: 11px; }
  .cal-day { min-height: 58px; padding: 4px; align-items: center; }
  .cal-num { align-self: center; }
  .cal-items { display: none; }
  .cal-dots { display: flex; }
  .cal-dots .dot { width: 6px; height: 6px; }
  .dot-scheduled { background: var(--blue); } .dot-published { background: var(--green); }
}


/* Post preview */
.btn-icon { width: 16px; height: 16px; }
.preview-modal { width: min(620px, calc(100% - 24px)); padding: 26px 26px 22px; }
.preview-head h2 { font-size: 23px; }
.preview-head p { display: flex; align-items: center; gap: 7px; margin-top: 4px; color: var(--muted); font-size: 13.5px; }
.preview-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 18px 0 14px; }
.preview-controls .filter { display: inline-flex; align-items: center; gap: 6px; }
.preview-controls .filter svg { width: 15px; height: 15px; }
#previewDevices { margin-left: auto; }
.preview-stage { display: flex; justify-content: center; padding: 22px 12px; border-radius: 20px; background: radial-gradient(circle at 50% 0%, #fff 0%, var(--bg) 70%); border: 1px solid var(--line); align-items: flex-start; max-height: min(66vh, 700px); overflow-y: auto; }
.preview-stage.swap .pv-frame { animation: pv-in .45s var(--ease); }
@keyframes pv-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.preview-note { margin-top: 10px; font-size: 12px; color: var(--faint); text-align: center; }
.preview-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

.pv-frame { --fb-bg: #f0f2f5; --fb-text: #080809; --fb-muted: #65686c; --fb-line: #e4e6eb; --fb-link: #0064d1; width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--fb-text); }
/* Phone drawn at iPhone scale (390 x 812); JS zooms it to fit. */
.pv-mobile { position: relative; width: 390px; height: 812px; flex: 0 0 auto; padding: 12px; border-radius: 60px; background: linear-gradient(145deg, #2a2a2c, #0d0d0e); box-shadow: 0 40px 80px -30px rgba(29,27,24,.55), inset 0 0 0 1.5px #3a3a3c, inset 0 0 0 5px #111; }
.pv-mobile::before, .pv-mobile::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2a2a2c; }
.pv-mobile::before { left: -3px; top: 150px; height: 60px; box-shadow: 0 80px 0 #2a2a2c; }
.pv-mobile::after { right: -3px; top: 200px; height: 90px; }
.pv-screen { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 48px; overflow: hidden; background: var(--fb-bg); }
.pv-statusbar { flex: 0 0 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 30px 0; background: #fff; color: #080809; font-size: 16px; font-weight: 600; }
.pv-screen.is-dark { background: #000; }
.is-dark .pv-statusbar { background: #000; color: #fff; }
.pv-clock { justify-self: start; padding-left: 8px; letter-spacing: -.01em; }
.pv-island { width: 118px; height: 34px; border-radius: 20px; background: #000; }
.pv-sb { justify-self: end; display: flex; align-items: center; gap: 6px; }
.pv-bars { display: flex; align-items: flex-end; gap: 2px; }
.pv-bars i { width: 3.5px; border-radius: 1px; background: currentColor; }
.pv-bars i:nth-child(1) { height: 4px; } .pv-bars i:nth-child(2) { height: 6.5px; } .pv-bars i:nth-child(3) { height: 9px; } .pv-bars i:nth-child(4) { height: 11.5px; }
.pv-battery { position: relative; width: 25px; height: 12px; border-radius: 4px; border: 1.2px solid rgba(8,8,9,.4); padding: 1.5px; }
.is-dark .pv-battery { border-color: rgba(255,255,255,.45); }
.is-dark .pv-battery::after { background: rgba(255,255,255,.45); }
.pv-battery::after { content: ""; position: absolute; right: -3.5px; top: 3.5px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(8,8,9,.4); }
.pv-battery i { display: block; width: 75%; height: 100%; border-radius: 2px; background: currentColor; }
.pv-appbar { flex: 0 0 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--fb-line); }
.pv-appbar i { width: 96px; height: 14px; border-radius: 7px; background: #e4e6eb; margin-right: auto; }
.pv-appbar span { width: 32px; height: 32px; border-radius: 50%; background: #e4e6eb; }
.pv-mobile .pv-feed { flex: 1; overflow-y: auto; scrollbar-width: none; padding-top: 8px; }
.pv-mobile .pv-feed::-webkit-scrollbar { display: none; }
.pv-home { position: absolute; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #080809; opacity: .85; pointer-events: none; }
.is-dark .pv-home { background: #fff; }
.pv-desktop { max-width: 520px; }
.pv-desktop .pv-feed { background: var(--fb-bg); padding: 16px; border-radius: 14px; }
.pv-desktop .fb-post { border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }

.fb-post { background: #fff; overflow: hidden; }
.fb-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px 8px; }
.fb-avatar { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px; }
.fb-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fb-who strong { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-who span { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--fb-muted); }
.fb-who svg { width: 12px; height: 12px; stroke-width: 2; }
.fb-dots { display: flex; gap: 3px; padding: 8px; }
.fb-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--fb-muted); }
.fb-text { padding: 0 14px 10px; }
.fb-caption { font-size: 15px; line-height: 1.34; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: var(--lines); -webkit-box-orient: vertical; overflow: hidden; }
.fb-caption.expanded { display: block; -webkit-line-clamp: unset; }
.fb-caption.is-empty { color: var(--fb-muted); font-style: italic; }
.pv-link { color: var(--fb-link); }
.fb-more { border: 0; background: none; padding: 0; font: inherit; font-size: 15px; font-weight: 600; color: var(--fb-muted); cursor: pointer; }
.fb-more:hover { text-decoration: underline; }
.fb-media { background: #000; }
.fb-media img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #e4e6eb; transition: aspect-ratio .3s var(--ease); }
.fb-media-empty { aspect-ratio: 1.2; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #eef0f3 0 12px, #e7e9ed 12px 24px); color: var(--fb-muted); font-size: 14px; }
.fb-actions { display: flex; justify-content: space-around; margin: 0 12px; padding: 4px 0; border-top: 1px solid var(--fb-line); }
.fb-actions span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 14px; font-weight: 600; color: var(--fb-muted); }
.fb-actions svg { width: 19px; height: 19px; stroke-width: 1.8; }
.fb-ghost { margin-top: 8px; padding: 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.pv-desktop .fb-ghost { border-radius: 10px; }
.fb-ghost i { height: 10px; border-radius: 5px; background: #eceef1; }
.fb-ghost i:nth-child(1) { width: 40%; } .fb-ghost i:nth-child(2) { width: 90%; } .fb-ghost i:nth-child(3) { width: 70%; }

/* Reels and Stories */
.pv-fill, .pv-backdrop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-backdrop { display: none; filter: blur(28px) brightness(.7); transform: scale(1.2); }
.is-letterbox .pv-fill { object-fit: contain; }
.is-letterbox .pv-backdrop { display: block; }
.pv-fill-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px; text-align: center; font-size: 14px; color: rgba(255,255,255,.6); background: linear-gradient(160deg, #2b2b33, #121216); }
.pv-paused { position: absolute; left: 50%; top: 50%; z-index: 2; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: none; place-items: center; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; cursor: pointer; }
.pv-paused svg { width: 30px; height: 30px; fill: currentColor; stroke: none; margin-left: 4px; }
.is-paused .pv-paused { display: grid; }
video.pv-fill { cursor: pointer; }
.pv-sound { position: absolute; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; }
.pv-sound svg { width: 17px; height: 17px; }

.pv-reel-wrap { flex: 1; min-height: 0; display: flex; }
.pv-reel { position: relative; flex: 1; overflow: hidden; background: #000; color: #fff; }
.pv-reel-shade, .pv-story-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.4), transparent 16%, transparent 58%, rgba(0,0,0,.72)); }
.pv-reel-head { position: absolute; top: 10px; left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.pv-reel-head strong { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.pv-reel-head svg { width: 26px; height: 26px; }
.pv-reel .pv-sound { top: 50px; right: 12px; }
.pv-rail { position: absolute; right: 8px; bottom: 16px; display: flex; flex-direction: column; align-items: center; gap: 18px; pointer-events: none; }
.pv-rail span { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pv-rail svg { width: 28px; height: 28px; stroke-width: 1.7; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.pv-rail small { font-size: 11.5px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.pv-rail .ph.pv-audio-ph { width: 28px; height: 28px; border-radius: 7px; border: 2px solid #fff; font-size: 10px; }
.pv-reel-meta { position: absolute; left: 14px; right: 64px; bottom: 16px; display: flex; flex-direction: column; gap: 9px; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.pv-reel-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pv-reel-who strong { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph.pv-reel-ph { width: 32px; height: 32px; font-size: 12px; text-shadow: none; }
.pv-follow { flex: 0 0 auto; padding: 4px 11px; border: 1px solid rgba(255,255,255,.85); border-radius: 8px; font-size: 13px; font-weight: 600; }
.pv-reel-caption { font-size: 14px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.pv-reel-caption.expanded { display: block; white-space: pre-wrap; max-height: 260px; overflow-y: auto; scrollbar-width: none; }
.pv-reel-caption.is-empty { opacity: .65; font-style: italic; }
.pv-reel .pv-link, .pv-story .pv-link { color: inherit; font-weight: 600; }
.pv-reel-audio { display: flex; align-items: center; gap: 6px; font-size: 12.5px; min-width: 0; }
.pv-reel-audio svg { width: 14px; height: 14px; flex: 0 0 14px; }
.pv-reel-audio span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pv-tabbar { flex: 0 0 80px; display: flex; justify-content: space-around; align-items: flex-start; padding: 10px 8px 0; background: #fff; color: #080809; border-top: 1px solid var(--fb-line); }
.pv-tabbar.is-dark { background: #000; color: #fff; border-top-color: #1f1f1f; }
.pv-tabbar span { display: grid; place-items: center; width: 44px; height: 30px; opacity: .55; }
.pv-tabbar span.on { opacity: 1; }
.pv-tabbar svg { width: 26px; height: 26px; }
.pv-tabbar .ph.pv-tab-ph { width: 26px; height: 26px; font-size: 10px; }

.pv-story { flex: 1; min-height: 0; display: flex; flex-direction: column; color: #fff; }
.pv-story-card { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 10px; background: #1b1b22; }
.pv-progress { position: absolute; top: 8px; left: 8px; right: 8px; height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.pv-progress i { display: block; width: 35%; height: 100%; background: #fff; }
.pv-story-head { position: absolute; top: 20px; left: 12px; right: 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.pv-story-head strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-story-head span { flex: 0 0 auto; opacity: .75; }
.pv-story-head i { flex: 1; }
.pv-story-head svg { width: 22px; height: 22px; flex: 0 0 22px; }
.ph.pv-story-ph { width: 32px; height: 32px; font-size: 12px; text-shadow: none; }
.pv-story-card .pv-sound { top: 62px; right: 12px; }
.pv-story-reply { flex: 1; display: flex; align-items: flex-start; gap: 14px; padding: 12px 14px 0; }
.pv-story-reply span { flex: 1; height: 42px; display: flex; align-items: center; padding: 0 16px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; font-size: 14px; color: rgba(255,255,255,.85); }
.pv-story-reply svg { width: 26px; height: 26px; margin-top: 8px; }

.pv-desktop.pv-dark-stage { max-width: 520px; display: flex; justify-content: center; padding: 24px 16px; border-radius: 14px; background: #18191a; color: #fff; }
.pv-reel-desktop { display: flex; align-items: flex-end; gap: 14px; }
.pv-reel-desktop .pv-reel { flex: 0 0 300px; aspect-ratio: 9 / 16; border-radius: 12px; }
.pv-reel-desktop .pv-reel .pv-sound { top: 12px; }
.pv-reel-desktop > .pv-rail { position: static; }
.pv-reel-desktop > .pv-rail span > svg { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: #3a3b3c; filter: none; }
.pv-reel-desktop .pv-reel-meta { right: 14px; }
.pv-dark-stage .pv-story { flex: 0 0 300px; }
.pv-dark-stage .pv-story-reply { padding: 12px 0 0; }

/* Instagram feed */
.ig-appbar { flex: 0 0 48px; display: flex; align-items: center; gap: 20px; padding: 0 16px; background: #fff; }
.ig-appbar span { margin-right: auto; font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive; font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.ig-appbar svg { width: 25px; height: 25px; }
.pv-mobile .ig-feed { background: #fff; padding-top: 0; }
.ig-post { background: #fff; }
.ig-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 14px; }
.ig-head strong { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-head svg { width: 20px; height: 20px; }
.ig-ring { display: grid; place-items: center; padding: 2px; border-radius: 50%; background: conic-gradient(from 200deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); }
.ig-ring .ph.ig-avatar { width: 30px; height: 30px; font-size: 11px; box-shadow: 0 0 0 2px #fff; }
.ig-media { background: #efefef; }
.ig-media .ig-photos { position: relative; aspect-ratio: 4 / 5; background: #efefef; }
.ig-photos .tt-slide img { object-fit: cover; aspect-ratio: auto; }
.ig-photos .tt-count { top: 12px; color: #fff; }
.ig-photos .tt-nav { opacity: 1; background: rgba(22,24,35,.5); }
.ig-photos .tt-dots i { background: rgba(22,24,35,.3); }
.ig-photos .tt-dots i.on { background: #0095f6; }
.ig-actions { display: flex; align-items: center; gap: 15px; padding: 10px 12px 6px; }
.ig-actions svg { width: 25px; height: 25px; }
.ig-actions i { flex: 1; }
.ig-text { padding: 0 12px 14px; font-size: 14px; }
.ig-caption { font-size: 14px; line-height: 1.4; }
.ig-caption strong { font-weight: 600; }
.ig-caption:not(.expanded) { white-space: normal; }
.ig-caption.is-empty { font-style: normal; }
.ig-caption.is-empty strong { color: var(--fb-text); }
.ig-text .fb-more { font-size: 14px; font-weight: 400; }
.ig-text small { display: block; margin-top: 6px; font-size: 12px; color: var(--fb-muted); }
.ig-feed .fb-ghost { margin-top: 0; border-top: 1px solid #efefef; }
.pv-ig-desktop { max-width: 470px; }
.pv-ig-desktop .ig-post { border: 1px solid #dbdbdb; border-radius: 8px; overflow: hidden; }

@media (max-width: 600px) {
  .preview-modal { padding: 22px 14px 16px; }
  .preview-stage { padding: 14px 6px; }
}


/* Profile photos (initials underneath until the photo loads) */
.ph { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; overflow: hidden; color: #fff; font-weight: 700; line-height: 1; }
.ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.xs { width: 18px; height: 18px; font-size: 7.5px; }
.ph-badge { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 4px; box-shadow: 0 0 0 1.5px var(--surface); overflow: hidden; }
.ph-badge svg { width: 100%; height: 100%; display: block; }
.page-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.page-chip .ph-badge { left: 11px; right: auto; bottom: -2px; width: 10px; height: 10px; border-radius: 3px; }
.account-avatar-wrap { position: relative; flex: 0 0 34px; }
.account-avatar-wrap .ph-badge { width: 15px; height: 15px; }
.ph.account-avatar { width: 34px; height: 34px; font-size: 12.5px; }
.ph.fb-avatar { width: 40px; height: 40px; font-size: 14px; }

/* Account picker */
.field-row { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 10px; }
.field-row .field-label { margin: 0; }
.picker-meta { flex: 1; font-size: 12.5px; color: var(--faint); }
.link-btn { border: 0; background: none; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.account-picker { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.acct { position: relative; width: 50px; height: 50px; padding: 0; border: 0; background: none; border-radius: 50%; outline: none; }
.acct-photo { width: 50px; height: 50px; font-size: 15px; filter: grayscale(1); opacity: .42; transition: filter .3s var(--ease), opacity .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.acct:hover .acct-photo { opacity: .75; filter: grayscale(.4); transform: translateY(-2px); }
.acct.on .acct-photo { filter: none; opacity: 1; box-shadow: 0 0 0 2.5px var(--surface-2), 0 0 0 4.5px var(--accent); }
.acct:focus-visible .acct-photo { box-shadow: 0 0 0 2.5px var(--surface-2), 0 0 0 4.5px rgba(224, 88, 58, .45); }
.acct-badge { position: absolute; right: -3px; bottom: -3px; width: 20px; height: 20px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 2px var(--surface-2); filter: grayscale(1); opacity: .6; transition: filter .3s, opacity .3s, transform .3s var(--ease); }
.acct-badge svg { width: 100%; height: 100%; display: block; }
.acct.on .acct-badge { filter: none; opacity: 1; }
.acct-check { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; box-shadow: 0 0 0 2px var(--surface-2); transform: scale(0); transition: transform .35s var(--ease); }
.acct-check svg { width: 12px; height: 12px; stroke-width: 3; }
.acct.on .acct-check { transform: scale(1); }
.acct.pop .acct-photo { animation: acct-pop .4s var(--ease); }
@keyframes acct-pop { 40% { transform: scale(.9); } }
.acct-tip { position: absolute; z-index: 3; bottom: calc(100% + 10px); left: 50%; min-width: max-content; padding: 7px 10px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.3; pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity .2s, transform .25s var(--ease); }
.acct-tip small { display: block; font-weight: 500; color: #bdb6ab; font-size: 11px; }
.acct-tip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink); }
.acct:hover .acct-tip, .acct:focus-visible .acct-tip { opacity: 1; transform: translate(-50%, 0); }
.acct-add .acct-photo { filter: none; opacity: 1; background: var(--surface); border: 1.5px dashed var(--line-2); color: var(--muted); }
.acct-add .acct-photo svg { width: 20px; height: 20px; }
.acct-add:hover .acct-photo { border-color: var(--accent); color: var(--accent); }
.picker-soon { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--faint); }
.picker-soon span { margin-right: 2px; }
.picker-soon i { width: 18px; height: 18px; border-radius: 6px; overflow: hidden; filter: grayscale(1); opacity: .45; transition: filter .2s, opacity .2s; }
.picker-soon i:hover { filter: none; opacity: 1; }
.picker-soon svg { width: 100%; height: 100%; display: block; }

/* When */
.when-seg { display: flex; width: 100%; }
.when-seg .when { flex: 1; text-align: center; }
.when-time { margin-top: 8px; animation: item-in .3s var(--ease); }

/* Preview account switcher */
.preview-accounts { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-acct { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--muted); max-width: 200px; transition: border-color .2s, color .2s; }
.pv-acct span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-acct .ph.xs { width: 20px; height: 20px; }
.pv-acct.on { border-color: var(--ink); color: var(--ink); }

/* Brand guides: library */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.brand-grid > .empty { grid-column: 1 / -1; }
.guide-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 0 18px 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); text-align: left; overflow: hidden; transition: box-shadow .3s var(--ease), border-color .2s, transform .3s var(--ease); }
.guide-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.guide-card:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(224, 88, 58, .2); }
.gc-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gc-chips em { font-style: normal; }
.gc-meter { position: relative; display: inline-block; flex: 0 0 56px; width: 56px; height: 5px; border-radius: 999px; background: #efeae2; overflow: hidden; }
.gc-meter i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--green); transition: width .5s var(--ease); }
.brand-logo { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; display: grid; place-items: center; overflow: hidden; background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: 15px; letter-spacing: -.02em; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.brand-logo.is-initials { border-color: transparent; box-shadow: inset 0 0 0 1px rgba(29, 27, 24, .06); }
.brand-grid .add-card { min-height: 196px; }
.add-card small { font-size: 12.5px; font-weight: 500; color: var(--faint); }
.brand-empty { padding: 56px 24px; }
.brand-empty p { max-width: 440px; margin: 0 auto; }
.brand-empty-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 540px; margin: 18px auto 0; }
.brand-empty-tags span { padding: 4px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }
.brand-flow { margin-top: 40px; }
.brand-flow ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.brand-flow li { display: flex; gap: 12px; padding: 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--line); }
.brand-flow li > i { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; font-weight: 700; background: var(--accent-soft); color: var(--accent); }
.brand-flow strong { display: block; font-size: 14.5px; }
.brand-flow span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* Brand guides: editor */
.brand-editor { animation: view-in .45s var(--ease); }
.be-back { display: inline-block; margin-bottom: 18px; font-size: 13.5px; color: var(--muted); }
.be-back:hover { color: var(--ink); }
.be-notice { display: flex; align-items: center; gap: 14px 16px; margin: 0 0 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; line-height: 1.45; animation: view-in .35s var(--ease); }
.be-notice > div:first-of-type { flex: 1; min-width: 0; }
.be-notice strong { display: block; font-size: 14px; }
.be-notice span { color: var(--muted); }
.be-notice-actions { display: flex; gap: 8px; flex-shrink: 0; }
.be-notice.is-agent { background: var(--accent-soft); border-color: #f6d3c7; }
.be-notice.is-conflict { background: var(--amber-soft); border-color: #f0dcae; }
.be-notice.is-conflict span { color: #7a520c; }
.menu-wrap { position: relative; }
.menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; min-width: 190px; padding: 6px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: menu-in .25s var(--ease); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.menu button { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.menu button:hover { background: var(--bg); color: var(--ink); }
.menu button.danger { color: var(--red); }
.menu button.danger:hover { background: var(--red-soft); }

.be-hint { margin-top: 6px; font-size: 12.5px; color: var(--faint); }

.tag-input { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 8px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); cursor: text; transition: border-color .2s, box-shadow .2s; }
.tag-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(224, 88, 58, .12); }
.tag { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; min-height: 28px; padding: 3px 4px 3px 11px; border-radius: 999px; background: #f1ede6; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; animation: pop .3s var(--ease); }
.tag button { width: 20px; height: 20px; flex: 0 0 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--faint); transition: background .2s, color .2s; }
.tag button:hover { background: rgba(29, 27, 24, .08); color: var(--ink); }
.tag button svg { width: 12px; height: 12px; stroke-width: 2.2; }
.tag-input.tone-yes .tag { background: var(--green-soft); color: #1d6b40; }
.tag-input.tone-no .tag { background: var(--red-soft); color: #9a2e21; }
.tag-field { flex: 1; min-width: 120px; height: 28px; padding: 0 4px; border: 0; background: none; outline: none; font-size: 14px; }
.bk-control .suggestions { margin-top: 8px; }
.bk-control .suggestions:empty { display: none; }

.be-list { display: flex; flex-direction: column; gap: 8px; }
.be-row { display: flex; align-items: flex-start; gap: 4px; animation: item-in .3s var(--ease); }
.be-row .input { flex: 1; min-width: 0; }
.be-row textarea.input { min-height: 64px; }
.be-remove { width: 30px; height: 30px; flex: 0 0 30px; margin-top: 8px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--faint); transition: background .2s, color .2s; }
.be-remove:hover { background: var(--red-soft); color: var(--red); }
.be-remove svg { width: 14px; height: 14px; }
.be-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 1px dashed var(--line-2); border-radius: 999px; background: none; font-size: 13px; font-weight: 600; color: var(--muted); transition: border-color .2s, color .2s, background .2s; }
.be-add:hover { border-color: var(--accent); color: var(--accent); background: #fffaf8; }



.ref-add:hover, .ref-add.dragging { border-color: var(--accent); background-color: #fffaf8; }
.ref-add:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(224, 88, 58, .15); }
.is-uploading { pointer-events: none; }
.is-uploading::after { content: "Uploading…"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .8); font-size: 13px; font-weight: 600; color: var(--ink-2); animation: blink 1.2s ease-in-out infinite; }
.link-danger { margin-top: 10px; color: var(--red); }
.ref-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }
.ref-card { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; animation: item-in .4s var(--ease) both; }
.ref-img { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: #efeae2; }
.ref-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ref-card:hover .ref-img img { transform: scale(1.04); }
.ref-remove { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(29, 27, 24, .6); color: #fff; opacity: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: opacity .2s, background .2s; }
.ref-remove svg { width: 13px; height: 13px; stroke-width: 2.2; }
.ref-card:hover .ref-remove, .ref-remove:focus-visible { opacity: 1; }
.ref-remove:hover { background: var(--red); }
.ref-note { width: 100%; padding: 5px 8px; border: 1px solid transparent; border-radius: 9px; background: none; outline: none; font-size: 12.5px; color: var(--ink-2); transition: border-color .2s, background .2s; }
.ref-note:hover { background: var(--bg); }
.ref-note:focus { border-color: var(--line-2); background: var(--surface); }
.ref-add { position: relative; aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px; border: 1.5px dashed var(--line-2); border-radius: 14px; background: var(--surface-2); text-align: center; overflow: hidden; cursor: pointer; transition: border-color .2s, background .2s; }
.ref-add strong { font-size: 13.5px; }
.ref-add small { font-size: 11.5px; color: var(--faint); }
.ref-add .upload-icon { width: 34px; height: 34px; margin-bottom: 3px; border-radius: 11px; }
.ref-add .upload-icon svg { width: 16px; height: 16px; }
.example-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.example-card { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); animation: item-in .4s var(--ease) both; }
.example-img { aspect-ratio: 4 / 5; align-self: start; }
.example-card:hover .ref-remove { opacity: 1; }
.example-card:hover .ref-img img { transform: scale(1.04); }
.example-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.example-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.example-type { width: auto; padding: 5px 10px; font-size: 13px; font-weight: 600; }
.example-caption { min-height: 118px; resize: vertical; font-size: 13.5px; line-height: 1.45; }
.example-note { padding: 7px 10px; font-size: 13px; }
.example-add { aspect-ratio: auto; min-height: 112px; }
@media (hover: none) {
  .ref-remove { opacity: 1; }
}

.page-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 18px; }
.page-link { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: left; transition: border-color .2s, box-shadow .2s; }
.page-link:hover { border-color: var(--line-2); }
.page-link.on { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(29, 27, 24, .06); }
.pl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pl-text strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-text small { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-link.on .pl-text small { color: var(--green); font-weight: 600; }
.pl-check { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-2); color: transparent; transition: background .25s, border-color .25s, color .25s; }
.pl-check svg { width: 12px; height: 12px; stroke-width: 3; }
.page-link.on .pl-check { background: var(--ink); border-color: var(--ink); color: #fff; animation: pop .35s var(--ease); }
.default-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: var(--bg); }
.default-row strong { display: block; font-size: 14.5px; }
.default-row div span { display: block; margin-top: 1px; font-size: 13px; color: var(--muted); }
.default-row.is-default { background: #f1f8f3; }
.default-row .chip.published { background: var(--surface); }
.be-empty-note { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-top: 18px; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed var(--line-2); font-size: 13.5px; color: var(--muted); }


.brand-new-modal { width: min(460px, calc(100% - 24px)); }
.brand-agent-modal { width: min(680px, calc(100% - 24px)); }
.brand-agent-modal code { padding: 1px 6px; border-radius: 6px; background: var(--bg); font-family: var(--mono); font-size: 12.5px; }
.brand-agent-modes { margin-top: 16px; }
.brand-agent-code { margin-top: 12px; }
.brand-agent-code pre { max-height: min(52vh, 480px); }

@media (max-width: 1100px) {
  .brand-flow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .brand-flow ol { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .example-card { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .be-notice { flex-wrap: wrap; }
  .be-notice-actions { width: 100%; }
  .be-notice-actions .btn { flex: 1; }
  .brand-grid { grid-template-columns: minmax(0, 1fr); }
  .default-row { flex-direction: column; align-items: flex-start; }
}

/* Insights */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ins-sync { display: flex; align-items: center; gap: 12px; }
.ins-updated { color: var(--faint); font-size: 12.5px; white-space: nowrap; }
#insightsSync svg { width: 15px; height: 15px; }
#insightsSync.syncing svg { animation: spin .9s linear infinite; }
/* The filters stay in reach while you scroll, so every section can be re-cut without scrolling back up. */
.ins-filters { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -10px -12px 18px; padding: 10px 12px; background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.ins-filters:empty { display: none; }
.ins-filter-spacer { flex: 1; }
.ins-seg .filter { display: inline-flex; align-items: center; gap: 6px; }
.ins-plat { display: inline-flex; flex: 0 0 auto; width: 15px; height: 15px; }
.ins-plat svg { width: 100%; height: 100%; }
.ins-select-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.ins-select { width: auto; height: 36px; padding: 0 34px 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; background-color: var(--surface); }

.ins-section { margin-top: 44px; }
.ins-section:first-child { margin-top: 0; }
.ins-section-head { margin-bottom: 14px; }
.ins-section-head h2 { font-size: 20px; letter-spacing: -.03em; }
.ins-section-head p { margin-top: 3px; font-size: 13.5px; color: var(--muted); }
.ins-summary { max-width: 860px; margin-bottom: 20px; font-size: 18px; line-height: 1.55; letter-spacing: -.012em; color: var(--ink-2); }
.ins-summary b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.ins-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.ins-kpi { min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.ins-kpi-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.ins-kpi-value { font-size: 32px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ins-kpi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 20px; font-size: 12px; color: var(--faint); }
.ins-delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ins-delta svg { width: 12px; height: 12px; stroke-width: 2; }
.ins-delta.up { color: var(--green); background: var(--green-soft); }
.ins-delta.down { color: var(--red); background: var(--red-soft); }
.ins-delta.flat { color: var(--muted); background: #f1ede6; padding-left: 7px; }
.ins-spark { display: block; width: 100%; height: 30px; margin-top: 8px; }

.ins-note { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 14px; background: var(--surface); border: 1px solid #f0dfbd; color: var(--ink-2); font-size: 13px; line-height: 1.45; }
.ins-note > div { flex: 1; min-width: 0; }
.ins-note svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--amber); }
.ins-note .btn { flex-shrink: 0; }
.ins-note p + p { margin-top: 4px; }

.ins-takes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ins-take { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.ins-take:first-child { background: linear-gradient(160deg, #fff 45%, #fff3ed); border-color: #f4d8cc; }
.ins-take-kicker { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ins-take-icon { flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.ins-take-icon svg { width: 15px; height: 15px; }
.ins-take-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.ins-take-figure strong { font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.ins-take-figure span { font-size: 13px; font-weight: 500; color: var(--muted); }
.ins-take p { flex: 1; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.ins-take q { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--ink); font-weight: 600; }
.ins-take-action { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 32px; margin-top: 2px; padding: 0 13px 0 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink); transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.ins-take-action:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.ins-take-action:active { transform: scale(.97); }
.ins-take-action svg { flex: 0 0 15px; width: 15px; height: 15px; }
.ins-take-action:focus-visible, .ins-window-plan:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ins-take-empty { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1.5px dashed var(--line-2); color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.ins-take-empty svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; }
.ins-link { border: 0; padding: 0; background: none; color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ins-card { min-width: 0; padding: 18px 20px 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.ins-card.wide { grid-column: 1 / -1; }
.ins-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ins-card h3 { font-size: 16px; letter-spacing: -.02em; }
.ins-card-head p { margin-top: 2px; font-size: 12.5px; color: var(--faint); }
.ins-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); }
.ins-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ins-legend i { width: 10px; height: 10px; border-radius: 3px; }
.ins-legend .ins-legend-avg { width: 16px; height: 0; border-radius: 0; border-top: 1.5px dashed var(--muted); }
.ins-chart { position: relative; }
.ins-svg { display: block; max-width: 100%; overflow: visible; fill: none; stroke: none; }
.ins-svg text { fill: var(--faint); font-family: var(--sans); font-size: 11px; font-variant-numeric: tabular-nums; }
.ins-svg .ins-peak { fill: var(--ink-2); font-weight: 600; }
.ins-svg .ins-avg { stroke: var(--ink-2); stroke-width: 1.25; stroke-dasharray: 4 4; opacity: .5; pointer-events: none; }
.ins-hit { fill: transparent; outline: none; }
.ins-hit:hover, .ins-hit:focus-visible { fill: rgba(29, 27, 24, .05); }
.ins-hit:focus-visible { stroke: var(--ink); stroke-width: 1.5; }

.ins-bars { display: flex; flex-direction: column; gap: 2px; }
.ins-bar-row { display: grid; grid-template-columns: minmax(92px, 32%) minmax(0, 1fr) 64px; align-items: center; gap: 12px; margin: 0 -8px; padding: 5px 8px; border-radius: 10px; outline: none; transition: background .2s; }
.ins-bar-row:hover, .ins-bar-row:focus-visible { background: var(--bg); }
.ins-bar-row:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ins-bar-label { min-width: 0; display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); }
.ins-bar-label > span:not(.ins-plat) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-best { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; }
.ins-bar-track { display: block; height: 14px; }
.ins-bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #d9d2c7; transition: width .6s var(--ease); }
.ins-bars.wide-labels .ins-bar-row { grid-template-columns: minmax(120px, 44%) minmax(0, 1fr) 64px; }
.ins-bar-row.best .ins-bar-fill { background: var(--ink-2); }
.ins-bar-value { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; font-variant-numeric: tabular-nums; }
.ins-bar-value b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ins-bar-value small { font-size: 11px; color: var(--faint); }
.ins-card-foot { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.ins-card-foot svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; color: var(--accent); }

.ins-table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.ins-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 13.5px; }
.ins-table th { padding: 0 10px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--faint); }
.ins-table th:nth-child(2), .ins-table th.ins-rank { text-align: left; }
.ins-sort { display: inline-flex; align-items: center; gap: 3px; border: 0; padding: 0; background: none; font-weight: 600; color: inherit; transition: color .2s; }
.ins-sort:hover, .ins-sort.active { color: var(--ink); }
.ins-sort svg { width: 11px; height: 11px; stroke-width: 2.2; }
.ins-table td { padding: 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.ins-table tbody tr:last-child td { border-bottom: 0; }
.ins-table tbody tr { transition: background .2s; }
.ins-table tbody tr:hover { background: var(--surface-2); }
.ins-table td.sorted { color: var(--ink); font-weight: 600; }
.ins-table td.ins-na { color: var(--faint); }
.ins-rank { width: 28px; padding-left: 0 !important; text-align: left !important; color: var(--faint); }
.ins-post { width: 100%; min-width: 280px; text-align: left !important; white-space: normal !important; }
.ins-post-cell { display: flex; align-items: center; gap: 12px; }
.ins-thumb { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: #efeae2; color: var(--faint); transition: transform .2s var(--ease); }
.ins-thumb:hover { transform: scale(1.05); }
.ins-thumb img, .ins-thumb video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ins-thumb svg { width: 18px; height: 18px; }
.ins-post-text { min-width: 0; }
.ins-post-text p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--ink); line-height: 1.35; }
.ins-post-text small { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 3px; color: var(--faint); font-size: 12px; }
.ins-post-text .ins-plat { width: 13px; height: 13px; }
.ins-cellbar { display: block; height: 3px; margin: 5px 0 0 auto; border-radius: 2px; background: var(--ink-2); opacity: .3; }
.ins-open { padding-right: 0 !important; }
.ins-more { margin-top: 10px; }
.ins-table-card { padding-top: 16px; }

.ins-tip { position: fixed; top: 0; left: 0; z-index: 80; min-width: 150px; max-width: 260px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.4; box-shadow: var(--shadow-lg); pointer-events: none; }
.ins-tip-title { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .72); }
.ins-tip-row { display: flex; align-items: center; gap: 8px; }
.ins-tip-row + .ins-tip-row { margin-top: 3px; }
.ins-tip-row i { flex: 0 0 12px; height: 3px; border-radius: 2px; }
.ins-tip-row b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ins-tip-row span { color: rgba(255, 255, 255, .72); }
.ins-tip-foot { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .72); }

@media (max-width: 900px) {
  .ins-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 799px) {
  .ins-filters { position: static; margin: 0 0 18px; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-width: 900px) {
  .ins-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ins-sync { width: 100%; justify-content: space-between; }
  .ins-filters { gap: 8px; }
  .ins-summary { font-size: 16px; }
  .ins-card-head { flex-wrap: wrap; }
  .ins-card-head .ins-legend { flex-basis: 100%; }
  .ins-section { margin-top: 36px; }
  .ins-take-figure strong { font-size: 30px; }
  .ins-filters .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .ins-filter-spacer { display: none; }
  .ins-kpi { padding: 14px 14px 10px; }
  .ins-kpi-value { font-size: 25px; }
  .ins-card { padding: 16px; border-radius: 20px; }
  .ins-table-wrap { margin: 0 -16px; padding: 0 16px; }
  .ins-bar-row, .ins-bars.wide-labels .ins-bar-row { grid-template-columns: minmax(84px, 40%) minmax(0, 1fr) 56px; gap: 10px; }
}

/* Responsive */
@media (max-width: 1100px) {
  .desk-main { width: min(1120px, 100% - 48px); padding-top: 36px; }
}
@media (max-width: 799px) {
  .desk-main { width: calc(100% - 32px); padding-top: 22px; }
}
@media (max-width: 600px) {
  .view-head { flex-direction: column; align-items: flex-start; }
  .view-head h1 { font-size: 28px; }
  #refreshButton { display: none; }
  #view-schedule .view-head .segmented { align-self: stretch; }
  #view-schedule .view-head .mode { flex: 1; justify-content: center; }
  .connect-banner { flex-wrap: wrap; align-items: flex-start; }
  .connect-banner > div:nth-child(2) { flex: 1 1 calc(100% - 56px); }
  .connect-banner .btn { margin-left: 56px; }
  .slot { grid-template-columns: 56px minmax(0, 1fr); }
  .slot-time { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; }
  .slot-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .agents-grid { grid-template-columns: 1fr; }
  .assistants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistants .assistant-tile:last-child { grid-column: 1 / -1; }
  .guide-field span { display: none; }
  .modal { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Caption score (composer) */
.coach { margin-top: 12px; padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); transition: opacity .25s var(--ease); }
.coach.is-loading .coach-bars, .coach.is-loading .coach-flags, .coach.is-loading .coach-tip { opacity: .55; transition: opacity .25s; }
.coach.is-loading .ring-fill { animation: ring-pulse 1.2s ease-in-out infinite; }
@keyframes ring-pulse { 50% { opacity: .45; } }
.coach code { padding: 1px 5px; border-radius: 5px; background: #f1ede6; font-family: var(--mono); font-size: 11.5px; }
.coach-note { display: flex; align-items: flex-start; gap: 10px; }
.coach-note strong { display: block; font-size: 13.5px; }
.coach-note span:not(.coach-spark) { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.coach-spark { flex: 0 0 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.coach-spark svg { width: 15px; height: 15px; }
.coach-head { display: flex; align-items: center; gap: 12px; }
.coach-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.coach-title strong { font-size: 15px; letter-spacing: -.01em; }
.coach-title > span { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 12.5px; }
.coach-basis { color: var(--faint); }
.coach-outlook { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink-2); }
.coach-outlook i { width: 0; height: 0; border: 4.5px solid transparent; }
.coach-outlook[data-dir="up"] { color: var(--green); }
.coach-outlook[data-dir="up"] i { border-bottom: 6px solid currentColor; border-top-width: 0; }
.coach-outlook[data-dir="down"] { color: var(--amber); }
.coach-outlook[data-dir="down"] i { border-top: 6px solid currentColor; border-bottom-width: 0; }
.coach-outlook[data-dir="flat"] i { width: 7px; height: 2px; border: 0; border-radius: 1px; background: currentColor; }
.coach-by { flex: 0 0 auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--muted); cursor: help; }
.coach-by svg { width: 12px; height: 12px; color: var(--accent); }

.ring { position: relative; flex: 0 0 52px; width: 52px; height: 52px; display: grid; place-items: center; --ring: var(--ink); }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.2; }
.ring-track { stroke: #ece6dc; }
.ring-fill { stroke: var(--ring); stroke-linecap: round; transition: stroke-dasharray .7s var(--ease), stroke .3s; }
.ring strong { position: relative; font-size: 17px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ring[data-tone="strong"], .score-disclosure[data-tone="strong"] { --ring: var(--green); }
.ring[data-tone="good"], .score-disclosure[data-tone="good"] { --ring: var(--blue); }
.ring[data-tone="fair"], .score-disclosure[data-tone="fair"] { --ring: var(--amber); }
.ring[data-tone="weak"], .score-disclosure[data-tone="weak"] { --ring: var(--red); }

.coach-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.coach-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 100px; align-items: center; gap: 10px; font-size: 12.5px; }
.coach-bar > span { color: var(--ink-2); font-weight: 500; }
.coach-bar i, .bt-bar i { position: relative; height: 6px; border-radius: 999px; background: #ece6dc; overflow: hidden; }
.coach-bar b, .bt-bar b { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ink-2); transition: width .7s var(--ease); }
.coach-bar[data-band="high"] b { background: var(--green); }
.coach-bar[data-band="low"] b { background: var(--amber); }
.coach-bar em { font-style: normal; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coach-bar em.unsure { color: var(--faint); cursor: help; }
.coach-flags { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.coach-flags li { display: flex; gap: 9px; padding: 9px 11px; border-radius: 12px; background: var(--amber-soft); color: #7a520c; animation: item-in .35s var(--ease); }
.coach-flags li.bad { background: var(--red-soft); color: #9a2e21; }
.coach-flags i { flex: 0 0 18px; height: 18px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; font-style: normal; font-size: 10.5px; font-weight: 800; }
.coach-flags strong { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.coach-flags strong em { font-style: normal; font-weight: 500; font-size: 11.5px; opacity: .8; }
.coach-flags span { display: block; font-size: 12.5px; line-height: 1.4; }
.coach-tip { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.coach-tip b { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.coach-checks { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.coach-note + .coach-checks { margin-top: 12px; }
.coach-checks li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.coach-checks li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.coach-checks li.warn::before { background: var(--amber); }
.coach-checks li.bad { color: var(--red); }
.coach-checks li.bad::before { background: var(--red); }

.best-times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.best-times:empty { display: none; }
.best-label { margin-right: 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
.best-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 11px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); }
.best-chip:hover { border-color: #d0c8bb; transform: translateY(-1px); }
.best-chip em { padding: 2px 6px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-style: normal; font-size: 11.5px; }
.best-chip.on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.best-note { font-size: 12px; color: var(--faint); }

.score-disclosure { align-self: flex-start; width: min(100%, 520px); }
.score-chip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); cursor: pointer; list-style: none; }
.score-chip::-webkit-details-marker { display: none; }
.score-chip:hover, .score-chip:focus-visible, .score-disclosure[open] .score-chip { border-color: var(--ring); background: var(--bg); }
.score-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.score-chip strong { font-weight: 700; color: var(--ink); }
.score-grade { color: var(--ring); font-weight: 700; }
.score-flag-count { color: var(--red); font-weight: 700; }
.score-chevron { margin-left: 2px; font-size: 16px; line-height: .7; transition: transform .2s; }
.score-disclosure[open] .score-chevron { transform: rotate(180deg); }
.score-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ring); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--ring) 18%, transparent); }
.score-explanation { margin-top: 7px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink-2); font-size: 12.5px; line-height: 1.45; }
.score-explanation p + p { margin-top: 9px; }
.score-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 5px 16px; margin: 10px 0; padding: 0; list-style: none; }
.score-breakdown li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.score-breakdown strong { color: var(--ink); text-align: right; }
.score-focus { padding-left: 9px; border-left: 3px solid var(--ring); }
.score-legacy { color: var(--muted); }

/* Insights */
#insightsBody > .empty { margin-bottom: 16px; }
.jev-head p { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ins-card-label { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ins-muted { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ins-foot { margin-top: 14px; font-size: 12px; line-height: 1.45; color: var(--faint); }

.ins-timing-body { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 24px; align-items: start; }
.heat { display: grid; grid-template-columns: 38px repeat(5, minmax(0, 1fr)); gap: 4px; }
.heat-col { padding-bottom: 4px; font-size: 11.5px; font-weight: 600; text-align: center; color: var(--ink-2); line-height: 1.25; }
.heat-col small { display: block; font-weight: 500; font-size: 10.5px; color: var(--faint); }
.heat-row { display: flex; align-items: center; font-size: 12px; font-weight: 600; color: var(--muted); }
.heat-cell { height: 34px; display: grid; place-items: center; border-radius: 8px; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-2); background: color-mix(in srgb, var(--accent) calc(var(--heat, 0) * 88%), #f4f0ea); transition: transform .2s var(--ease); cursor: default; }
.heat-cell:hover { transform: scale(1.06); }
.heat-cell.is-hot { color: #fff; }
.heat-cell.is-thin { opacity: .6; }
.heat-cell.is-empty { background: repeating-linear-gradient(-45deg, #f6f3ee 0 5px, #efeae3 5px 10px); }
.ins-windows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ins-windows li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.ins-windows b { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 11.5px; }
.ins-windows li:not(:first-child) b { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line-2); }
.ins-windows div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ins-windows strong { font-size: 13.5px; }
.ins-windows span { font-size: 11.5px; color: var(--faint); }
.ins-windows em { font-style: normal; font-weight: 700; font-size: 13px; color: var(--green); font-variant-numeric: tabular-nums; }
.ins-window-plan { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); transition: background .2s, color .2s, border-color .2s; }
.ins-window-plan:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.ins-window-plan svg { width: 15px; height: 15px; }

.jev-head { display: flex; align-items: flex-start; gap: 12px; }
.jev-head > div { flex: 1; min-width: 0; }
.jev-head h3 { font-size: 17px; }
.jev-mark { flex: 0 0 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.jev-mark svg { width: 19px; height: 19px; }
.jev-card .guide-steps { margin-top: 20px; }
.jev-card > .ins-muted { margin-top: 16px; }
.jev-actions { display: flex; gap: 8px; margin-top: 16px; }
.bt-verdict { margin-top: 18px; }
.bt-verdict p { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.bt-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.bt-bar { display: grid; grid-template-columns: 104px minmax(0, 1fr) 40px; align-items: center; gap: 10px; font-size: 12.5px; }
.bt-bar span { color: var(--muted); }
.bt-bar i { height: 10px; }
.bt-bar b { background: #cfc6b8; }
.bt-bar.is-top b { background: var(--accent); }
.bt-bar em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.ins-patterns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ins-patterns li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ins-patterns li:last-child { border-bottom: 0; padding-bottom: 0; }
.ins-patterns li:first-child { padding-top: 0; }
.ins-patterns em { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; }
.ins-patterns em.up { background: var(--green-soft); color: var(--green); }
.ins-patterns em.down { background: var(--amber-soft); color: var(--amber); }
.ins-patterns strong { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.ins-patterns span { font-size: 12px; color: var(--faint); }

@media (max-width: 760px) {
  .ins-grid { grid-template-columns: minmax(0, 1fr); }
  .ins-timing-body { grid-template-columns: minmax(0, 1fr); }
  .heat { grid-template-columns: 30px repeat(5, minmax(0, 1fr)); gap: 3px; }
  .heat-col small { display: none; }
  .heat-cell { height: 30px; font-size: 10.5px; }
  .coach-bar { grid-template-columns: 84px minmax(0, 1fr) 86px; gap: 8px; }
}

.external-post-options { margin: 14px 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.external-post-options .field-label { display: block; margin-bottom: 7px; }
.external-consent { display: flex; align-items: flex-start; gap: 9px; margin-top: 12px; font-size: 13px; line-height: 1.4; }
.external-consent input { margin-top: 2px; }

.external-preview { width: min(100%, 380px); margin: auto; padding: 18px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.external-preview > strong { display: block; margin-bottom: 12px; }
.external-preview-media { display: block; width: 100%; max-height: 420px; object-fit: contain; border-radius: 12px; background: #111; }
.external-preview p { margin: 12px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Connector setup keeps authentication separate from instructions. */
.connection-status { margin: 8px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.guide-methods { max-width: 100%; overflow-x: auto; }
#agentConnectionMethod { width: 100%; }

/* Audience playbook — an editorial brief above the analytics. */
.audience-playbook { margin: 44px 0 0; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.pb-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 28px 20px; }
.pb-head h2 { margin: 7px 0; font-size: 26px; letter-spacing: -.035em; }
.pb-head p, .pb-placeholder p { color: var(--muted); font-size: 13px; line-height: 1.6; }
.pb-head .btn { flex-shrink: 0; }
.pb-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--accent); }
.pb-eyebrow span { margin-left: 10px; color: var(--faint); font-weight: 500; }
.pb-coverage { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 12px 28px; background: var(--bg); border-block: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.pb-coverage { align-items: center; }
.pb-coverage b { color: var(--ink); }
.pb-meter { flex: 0 0 64px; height: 6px; margin-right: -12px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.pb-meter i { display: block; height: 100%; border-radius: inherit; background: var(--green); transition: width .6s var(--ease); }
.pb-working { color: var(--accent); }
.pb-feature { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); }
.tiktok-posts-modal { width: min(720px, calc(100vw - 32px)); max-height: min(85vh, 850px); overflow-y: auto; }
.tiktok-posts-modal .modal-step { padding: 30px; }
.tiktok-posts-modal h2 { padding-right: 35px; }
.tiktok-posts-modal p { color: var(--muted); line-height: 1.5; }
#tiktokPostsRefresh { margin: 14px 0; }
.tt-history-card { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.tt-history-cover { width: 90px; height: 120px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: var(--bg); }
.tt-history-cover img { width: 100%; height: 100%; object-fit: cover; }
.tt-history-info { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.tt-history-info strong { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.tt-history-info > span { color: var(--muted); font-size: 12px; }
.tt-history-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tt-history-note, .tt-history-error { margin: 8px 0 18px; font-size: 13px; }
.tt-history-error { color: var(--red) !important; }
@media (max-width: 560px) { .tiktok-posts-modal .modal-step { padding: 22px; } .tt-history-cover { width: 70px; height: 96px; } }
.pb-finding { padding: 28px; }
.pb-status { display: inline-block; padding: 4px 8px; background: var(--amber-soft); color: var(--amber); border-radius: 5px; font-size: 11px; font-weight: 600; }
.pb-status[data-status="repeated"] { color: var(--green); background: var(--green-soft); }
.pb-finding h3 { margin: 13px 0; font-size: 23px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; max-width: 540px; }
.pb-lift { font-size: 48px; line-height: 1.2; font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.pb-lift span { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.pb-finding > p { margin: 12px 0 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.pb-experiment { padding: 30px 28px; background: #f2f4ec; border-left: 1px solid var(--line); }
.pb-experiment h3 { margin: 12px 0; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.pb-experiment p, .pb-experiment ol { color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.pb-experiment ol { padding-left: 18px; margin: 16px 0 20px; }
.pb-experiment li { margin-bottom: 7px; padding-left: 3px; }
.pb-experiment small { display: block; margin-top: 12px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.pb-placeholder { padding: 28px; max-width: 760px; }
.pb-placeholder h3 { font-size: 19px; margin-bottom: 8px; }
.pb-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.pb-placeholder p + p { margin-top: 8px; }
.pb-patterns { padding: 0 28px 20px; border-top: 1px solid var(--line); }
.pb-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 12px; }
.pb-section-head strong { font-size: 14px; }
summary.pb-section-head { cursor: pointer; }
/* One chevron style for every disclosure in the playbook. */
.audience-playbook summary { list-style: none; }
.audience-playbook summary::-webkit-details-marker { display: none; }
summary.pb-section-head strong::before, .pb-evidence > summary::before, .pb-method > summary::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 11px 2px 2px; border-right: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg); transition: transform .25s var(--ease); }
.pb-patterns[open] > summary strong::before, .pb-evidence[open] > summary::before, .pb-method[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.audience-playbook summary:hover { color: var(--ink); }
.pb-section-head > span { color: var(--faint); font-size: 11px; }
.pb-pattern { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(100px, .75fr) minmax(100px, .65fr); gap: 10px 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pb-pattern:last-child { border-bottom: 0; }
.pb-pattern small, .pb-pattern strong { display: block; }
.pb-pattern > div:first-child small { color: var(--faint); font-size: 10px; margin-bottom: 4px; }
.pb-pattern > div:first-child strong { font-size: 13px; font-weight: 600; }
.pb-mix { height: 28px; position: relative; border-radius: 4px; background: var(--bg); overflow: hidden; }
.pb-mix span { position: absolute; inset: 0 auto 0 0; background: #dce6d5; }
.pb-mix b { position: relative; padding: 0 9px; line-height: 28px; font-size: 11px; font-weight: 500; }
.pb-result { text-align: right; }
.pb-result strong { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pb-result > span { color: var(--muted); font-size: 10px; }
.pb-pattern > details, .pb-limited { grid-column: 1 / -1; }
.pb-limited { font-size: 11px; line-height: 1.5; color: var(--faint); }
.pb-evidence summary, .pb-method summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.pb-evidence summary span { margin-left: 8px; color: var(--faint); font-size: 10px; font-weight: 400; }
.pb-evidence-body { margin-top: 12px; padding: 16px; background: var(--bg); border-radius: 10px; }
.pb-evidence-body > p, .pb-method p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.pb-comparisons { list-style: none; margin: 12px 0; padding: 0; }
.pb-comparisons li { margin: 9px 0; font-size: 12px; }
.pb-comparisons strong, .pb-comparisons span { display: block; }
.pb-comparisons span { margin-top: 4px; color: var(--muted); }
.pb-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 18px 0; }
.pb-examples h4 { margin-bottom: 9px; font-size: 11px; }
.pb-examples blockquote { margin: 0 0 12px; padding: 0 0 0 10px; border-left: 2px solid var(--line-2); }
.pb-examples blockquote p { font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; white-space: pre-line; }
.pb-examples footer { margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.pb-examples a { color: var(--accent); }
.pb-method { border-top: 1px solid var(--line); padding: 18px 28px; }
.pb-method p { margin-top: 12px; max-width: 900px; }
.pb-error { margin: 0 28px 16px; padding: 12px; font-size: 13px; color: var(--red); background: var(--red-soft); border-radius: 8px; }
.pb-error button { margin-left: 6px; }
@media (max-width: 850px) {
  .pb-feature { grid-template-columns: 1fr; }
  .pb-experiment { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .pb-head { align-items: flex-start; flex-direction: column; gap: 16px; }
  .pb-head, .pb-finding, .pb-experiment, .pb-placeholder { padding: 20px; }
  .pb-eyebrow span { display: block; margin: 4px 0 0; }
  .pb-coverage { padding: 12px 20px; }
  .pb-patterns { padding: 0 20px 12px; }
  .pb-section-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .pb-pattern { grid-template-columns: minmax(100px, 1fr) 75px 90px; column-gap: 10px; }
  .pb-examples { grid-template-columns: 1fr; }
  .pb-method { padding: 16px 20px; }
}