: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;
}

* { 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; } }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 68px; padding: 0 24px; background: rgba(250, 248, 244, .82); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--line); }
.topbar-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.tabs { position: relative; display: flex; padding: 4px; border-radius: 999px; background: #f1ede6; }
.tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--muted); transition: color .25s; }
.tab.active { color: var(--ink); }
.tab-indicator, .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); }
.tab-badge { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; display: inline-grid; place-items: center; animation: pop .4s var(--ease); }
@keyframes pop { 40% { transform: scale(1.2); } }
.conn-pill { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 5px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; max-width: 290px; }
.conn-dot { 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); }
.conn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.conn-action { border: 0; background: #f3efe8; border-radius: 999px; height: 26px; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--ink-2); transition: background .2s; }
.conn-action:hover { background: #ebe5dc; }

/* Layout */
.desk-main { width: min(1040px, 100% - 32px); margin: 0 auto; padding: 36px 0 80px; }
.view { display: none; }
.view.active { display: block; animation: view-in .5s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.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; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 28px; }
.stat { text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat.active { border-color: var(--ink); }
.stat-label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); font-weight: 500; }
.stat strong { font-size: 30px; letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.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; }
.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; }

/* Posts */
.posts-list, .recent-list { display: flex; flex-direction: column; gap: 10px; }
.post-card { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: box-shadow .3s var(--ease), border-color .2s; }
.post-card:hover { box-shadow: var(--shadow-lg); border-color: var(--line-2); }
.post-card.is-rejected { opacity: .6; }
.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; } }
.post-thumb { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; background: #efeae2; }
.post-body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.post-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-meta { color: var(--faint); font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.post-meta .sep::before { content: "·"; }
.by-agent { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 500; }
.post-caption { font-size: 15px; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.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.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-size: 18px; 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; }
.muted-note { color: var(--faint); font-size: 14px; padding: 6px 2px; }

/* Agents */
.perm-note { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.perm { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.perm i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 700; }
.perm-yes { background: var(--green-soft); color: var(--green); }
.perm-no { background: var(--red-soft); color: var(--red); }
.agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.agent-card { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: box-shadow .3s var(--ease), opacity .3s; }
.agent-card:hover { box-shadow: var(--shadow-lg); }
.agent-card.paused .avatar { filter: grayscale(1); opacity: .55; }
.agent-top { display: flex; align-items: center; gap: 12px; }
.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: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-name span { font-size: 12.5px; color: var(--faint); }
.agent-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border-radius: 14px; background: var(--bg); }
.agent-stats div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agent-stats span { font-size: 11.5px; color: var(--faint); }
.agent-stats strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-stats code { font-family: var(--mono); font-size: 12.5px; }
.agent-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.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); }
.subhead.first { margin-top: 0; }
.assistants { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.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; }
.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 .field-label:first-child { margin-top: 12px; }
.drawer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; padding-top: 18px; }
.upload-area { position: relative; height: 200px; 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: 50%; 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; }
.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; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 10px) scale(.97); } }


/* Connection pill (topbar) */
button.conn-pill { padding: 0 14px 0 12px; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
button.conn-pill:hover { border-color: var(--line-2); box-shadow: var(--shadow-sm); }

/* 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-origin { align-self: flex-start; color: var(--muted); font-size: 11px; font-weight: 600; }
.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); }
.history-item .side-item-body { display: flex; flex-direction: column; }
.history-item .side-item-body img { width: 100%; height: auto; max-height: 220px; object-fit: contain; background: var(--surface); }
.history-item .side-item-body p { display: block; overflow: visible; white-space: pre-wrap; }
.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: 88px; 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: 8px; 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-item-body { display: flex; gap: 10px; align-items: flex-start; }
.side-item-body img, .side-item-body video { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 9px; object-fit: cover; background: #efeae2; }
.side-item-body p { font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.side-item-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); }
.side-item .post-actions { margin-top: 0; }
.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 */
.conn-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.summary-stat { display: flex; align-items: baseline; gap: 8px; padding: 12px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.summary-stat strong { font-size: 24px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.summary-stat span { color: var(--muted); font-size: 13.5px; }
.summary-note { flex: 1; min-width: 240px; color: var(--muted); font-size: 13.5px; }
.platforms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.platform { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.platform:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.platform-wide { grid-column: 1 / -1; background: linear-gradient(150deg, #fff 55%, #f2f6fe); }
.platform-top { display: flex; align-items: center; gap: 12px; }
.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:hover .platform-icon { transform: rotate(-6deg) scale(1.05); }
.platform-icon.lg { width: 56px; height: 56px; flex-basis: 56px; border-radius: 16px; }
.platform-name { flex: 1; min-width: 0; }
.platform-name strong { display: block; font-size: 16px; }
.platform-name span { font-size: 13px; color: var(--muted); }
.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); }
.platform-empty { font-size: 13.5px; color: var(--faint); padding: 12px 14px; border-radius: 12px; border: 1.5px dashed var(--line); }
.platform-add { align-self: flex-start; margin-top: auto; }
.accounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.account { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); animation: item-in .4s var(--ease) both; }
.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; }
.account-name { flex: 1; min-width: 0; }
.account-name strong { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-name span { font-size: 12px; color: var(--faint); }

/* 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: 900px) {
  .tab { padding: 7px 8px; font-size: 13.5px; }
}
@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); }
  .platforms, .accounts { grid-template-columns: 1fr; }
}


/* 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-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: #080809; }
.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; }
.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: #080809; }
.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; }
.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%; }

.pv-vertical-frame.pv-mobile { width: 320px; }
.pv-vertical-frame.pv-desktop { width: 330px; }
.pv-vertical { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 24px; background: #1b1b22; color: #fff; }
.pv-vertical > img, .pv-vertical > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-vertical-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.48), transparent 28%, transparent 65%, rgba(0,0,0,.65)); }
.pv-vertical-top { position: absolute; top: 18px; left: 15px; right: 15px; display: flex; gap: 8px; align-items: center; font-size: 13px; text-shadow: 0 1px 4px #000; }
.pv-vertical-top .fb-avatar { width: 30px; height: 30px; flex-basis: 30px; font-size: 11px; text-shadow: none; }
.pv-vertical-top strong { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pv-vertical-top > span:last-child { font-size: 11px; opacity: .8; }
.pv-vertical-caption { position: absolute; bottom: 18px; left: 17px; right: 17px; max-height: 5em; overflow: hidden; font-size: 13px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; text-shadow: 0 1px 4px #000; }
.pv-vertical-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 25px; text-align: center; font-size: 13px; color: #ccc; }

@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-strip { display: flex; height: 10px; margin: 0 -18px; }
.gc-strip i { flex: 1; transition: flex .4s var(--ease); }
.guide-card:hover .gc-strip i:hover { flex: 2.2; }
.gc-strip.is-empty { background: repeating-linear-gradient(-45deg, #f3efe8 0 8px, #ece6dc 8px 16px); }
.gc-top { display: flex; align-items: center; gap: 12px; }
.gc-top em { font-style: normal; }
.gc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gc-name strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-name small { font-size: 12.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.gc-chips em { font-style: normal; }
.gc-summary { min-height: 2.9em; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gc-summary.is-empty { color: var(--faint); }
.gc-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; font-size: 12px; font-weight: 500; color: var(--faint); }
.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); }
.gc-refs::before { content: "·"; margin-right: 10px; }
.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-logo.lg { width: 64px; height: 64px; flex-basis: 64px; border-radius: 18px; font-size: 22px; }
.brand-logo.lg img { padding: 8px; }
.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 h2 { font-size: 17px; margin-bottom: 14px; }
.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-head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.be-logo { position: relative; flex: 0 0 64px; padding: 0; border: 0; border-radius: 18px; background: none; }
.be-logo-edit { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 18px; background: rgba(29, 27, 24, .5); color: #fff; opacity: 0; transition: opacity .2s; }
.be-logo-edit svg { width: 20px; height: 20px; }
.be-logo:hover .be-logo-edit, .be-logo:focus-visible .be-logo-edit, .be-logo.dragging .be-logo-edit { opacity: 1; }
.be-title { flex: 1; min-width: 0; }
.be-name { width: calc(100% + 8px); margin-left: -8px; padding: 2px 8px; border: 0; border-radius: 10px; background: none; outline: none; font-size: 32px; font-weight: 700; letter-spacing: -.035em; text-overflow: ellipsis; transition: background .2s, box-shadow .2s; }
.be-name:hover { background: rgba(29, 27, 24, .04); }
.be-name:focus { background: var(--surface); box-shadow: 0 0 0 1px var(--line-2), 0 0 0 4px rgba(224, 88, 58, .12); }
.be-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; font-size: 13px; color: var(--faint); }
.be-progress { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.be-status.is-dirty { color: var(--amber); font-weight: 600; }
.be-actions { display: flex; align-items: center; gap: 8px; }
.be-lock.is-locked { background: var(--ink); border-color: var(--ink); color: #fff; }
.be-lock.is-locked:hover:not(:disabled) { border-color: var(--ink); background: var(--ink-2); }
.be-notice { display: flex; align-items: center; gap: 14px 16px; margin: -12px 0 24px; 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-icon { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--ink); color: #fff; }
.be-notice-icon svg { width: 17px; height: 17px; }
.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-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 32px; align-items: start; }
.be-nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; }
.be-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 13.5px; font-weight: 500; color: var(--muted); transition: background .2s, color .2s, box-shadow .2s; }
.be-nav-item:hover { background: rgba(29, 27, 24, .04); color: var(--ink); }
.be-nav-item.active { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-sm); }
.be-dot { flex: 0 0 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background .3s, border-color .3s; }
.be-nav-item.done .be-dot { background: var(--green); border-color: var(--green); }

.be-form { display: flex; flex-direction: column; gap: 16px; padding-bottom: 48px; }
.be-section { scroll-margin-top: 92px; padding: 24px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.be-section-head h2 { font-size: 19px; }
.be-section-head p { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.be-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.be-field { min-width: 0; }
.be-field.wide { grid-column: 1 / -1; }
.be-field textarea.input { min-height: 84px; max-height: 360px; field-sizing: content; }
.be-hint { margin-top: 6px; font-size: 12.5px; color: var(--faint); }
.tone-label { display: flex; align-items: center; gap: 7px; }
.tone-label i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; }
.tone-label.tone-yes i { background: var(--green-soft); color: var(--green); }
.tone-label.tone-no i { background: var(--red-soft); color: var(--red); }

.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; }
.be-field .suggestions { margin-top: 8px; }
.be-field .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; }

.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px; }
.color-card { position: relative; display: flex; align-items: stretch; gap: 10px; padding: 8px 34px 8px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); transition: border-color .2s, background .2s; animation: item-in .35s var(--ease); }
.color-card:focus-within { border-color: var(--line-2); background: var(--surface); }
.color-card.invalid { border-color: var(--red); }
.color-swatch { position: relative; flex: 0 0 60px; min-height: 60px; border-radius: 11px; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(29, 27, 24, .08); overflow: hidden; cursor: pointer; transition: transform .25s var(--ease); }
.color-swatch:hover { transform: scale(1.04); }
.color-swatch input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.color-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.color-line { display: flex; gap: 4px; }
.color-fields input { width: 100%; min-width: 0; padding: 3px 6px; border: 0; border-radius: 7px; background: none; outline: none; font-size: 13px; transition: background .2s; }
.color-fields input:hover, .color-fields input:focus { background: var(--bg); }
.color-fields .color-name { font-size: 14px; font-weight: 600; }
.color-fields .color-hex { flex: 0 0 78px; font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; }
.color-card.invalid .color-hex { color: var(--red); }
.color-fields .color-usage { color: var(--muted); }
.color-card .be-remove { position: absolute; top: 6px; right: 4px; width: 26px; height: 26px; flex-basis: 26px; margin: 0; }
.color-add { min-height: 78px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: none; font-size: 13.5px; font-weight: 600; color: var(--muted); transition: border-color .2s, color .2s, background .2s; }
.color-add:hover { border-color: var(--accent); color: var(--accent); background: #fffaf8; }

.type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.type-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); cursor: text; transition: border-color .2s, background .2s, box-shadow .2s; }
.type-card:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px rgba(224, 88, 58, .12); }
.type-sample { flex: 0 0 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 24px; font-weight: 600; line-height: 1; }
.type-sample[data-type-sample="heading"] { font-family: var(--serif); font-size: 30px; font-weight: 400; }
.type-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.type-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.type-input { width: 100%; min-width: 0; padding: 2px 0; border: 0; background: none; outline: none; font-size: 15px; font-weight: 600; }
.type-notes { margin-top: 10px; }

.asset-grid { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 24px; }
.asset-logo { display: flex; flex-direction: column; align-items: flex-start; }
.logo-drop { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; border: 1.5px dashed var(--line-2); border-radius: 18px; background: var(--surface-2); overflow: hidden; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.logo-drop.has-logo { border-style: solid; border-color: var(--line); background: conic-gradient(#f5f2ec 25%, #fff 0 50%, #f5f2ec 0 75%, #fff 0) 0 0 / 16px 16px; }
.logo-drop img { max-width: 78%; max-height: 78%; object-fit: contain; animation: fade .4s var(--ease); }
.logo-drop .upload-prompt { padding: 12px; }
.logo-drop:hover, .logo-drop.dragging, .ref-add:hover, .ref-add.dragging { border-color: var(--accent); background-color: #fffaf8; }
.logo-drop:focus-visible, .ref-add:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(224, 88, 58, .15); }
.drop-hover { position: absolute; inset: auto 10px 10px; padding: 6px; border-radius: 10px; background: rgba(29, 27, 24, .75); color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .25s var(--ease); }
.logo-drop:hover .drop-hover, .logo-drop:focus-visible .drop-hover { opacity: 1; transform: none; }
.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; }
  .drop-hover { opacity: 1; transform: none; }
}

.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); }

.be-savebar { position: fixed; left: 50%; bottom: 20px; z-index: 35; display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 18px; border-radius: 999px; background: var(--ink); color: #fff; box-shadow: 0 16px 40px -12px rgba(29, 27, 24, .55); opacity: 0; pointer-events: none; transform: translate(-50%, calc(100% + 40px)); transition: transform .45s var(--ease), opacity .3s var(--ease); }
.be-savebar.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.be-savebar-text { display: inline-flex; align-items: center; gap: 9px; margin-right: 10px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.be-savebar-text i { flex: 0 0 8px; height: 8px; border-radius: 50%; background: #f0b44c; box-shadow: 0 0 0 3px rgba(240, 180, 76, .25); }
.be-savebar .btn-ghost { color: #d4cdc2; }
.be-savebar .btn-ghost:hover:not(:disabled) { color: #fff; background: rgba(255, 255, 255, .1); }
.be-save { background: #fff; color: var(--ink); }
.be-save:hover:not(:disabled) { background: #f3efe8; }
.has-savebar .toast { bottom: 88px; }
.has-savebar .be-form { padding-bottom: 104px; }

.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: 960px) {
  .be-layout { grid-template-columns: minmax(0, 1fr); }
  .be-nav { display: none; }
}
@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); }
  .be-section { scroll-margin-top: 132px; }
}
@media (max-width: 700px) {
  .be-fields, .type-grid, .asset-grid { grid-template-columns: minmax(0, 1fr); }
  .asset-logo .logo-drop { width: 168px; }
  .example-card { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .be-head { flex-wrap: wrap; gap: 14px 16px; }
  .be-title { flex: 1 1 calc(100% - 82px); }
  .be-actions { width: 100%; }
  .be-actions > .btn { flex: 1; }
  .be-notice { flex-wrap: wrap; }
  .be-notice-actions { width: 100%; }
  .be-notice-actions .btn { flex: 1; }
  .be-name { font-size: 26px; }
  .be-section { padding: 18px 16px 20px; border-radius: 20px; }
  .brand-grid { grid-template-columns: minmax(0, 1fr); }
  .default-row { flex-direction: column; align-items: flex-start; }
  .be-savebar { left: 16px; right: 16px; transform: translateY(calc(100% + 40px)); }
  .be-savebar.show { transform: none; }
  .be-savebar-text { flex: 1; margin-right: 0; }
}

/* Responsive */
@media (max-width: 900px) {
  .topbar { grid-template-columns: auto 1fr; height: auto; padding: 12px 16px; row-gap: 12px; }
  .tabs { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .tab { flex: 1; justify-content: center; }
  .conn-pill { max-width: 180px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .brand-name, .conn-name { display: none; }
  .conn-pill { padding-left: 10px; }
  .desk-main { padding-top: 24px; }
  .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; }
  .post-card { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
  .post-thumb { width: 68px; height: 68px; }
  .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; }
}