/* Fraunces/Parisienne/Inter are Buranchi's own client-output design system (post mockups,
   .headline-block, .script) — kept exactly as before. Albura (below, self-hosted) is Sakara/
   Wonderland's own UI typeface and is unrelated to that client-facing system. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600&family=Parisienne&display=swap');

/* Sakara brand typeface — self-hosted (see app/static/fonts/albura/LICENSE-*.txt, commercial use
   licensed). Used for the whole UI, not just client-facing output — see Master Config > Brand
   Visual Identity for the source deck and color/logo rationale. */
@font-face{font-family:'Albura'; src:url('fonts/albura/Albura-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Albura'; src:url('fonts/albura/Albura-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap;}
@font-face{font-family:'Albura'; src:url('fonts/albura/Albura-SemiBold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap;}
@font-face{font-family:'Albura'; src:url('fonts/albura/Albura-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap;}
@font-face{font-family:'Albura'; src:url('fonts/albura/Albura-Black.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap;}

:root{
  /* Clean/minimal-premium palette: warm neutral paper instead of a tinted blue-white, near-black
     ink instead of pure #000, and a single restrained deep-navy accent instead of an electric
     #0000FE — agency-premium reads as "confident but quiet," not loud. */
  --canvas:#F7F6F2;
  --surface:#FFFFFF;
  --border:#E7E4DC;
  --fg:#1C1B19;
  --fg-muted:#6B6860;
  --fg-soft:#9A968C;
  --accent:#21304A;
  --accent-50:#EEF1F5;
  --accent-dark:#141D2E;
  --accent-hover:#2C3E5F;
  --accent-border:#C9D0DC;
  --on-accent:#FFFFFF;
  --success:#1F7A4D;
  --success-bg:#EAF4EC;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;
  --shadow-card:0 1px 2px rgba(28,27,25,.04), 0 2px 10px rgba(28,27,25,.05);
  --shadow-pop:0 10px 30px rgba(28,27,25,.10);

  /* Buranchi brand tokens — used only inside .mockup post previews, never theme-swapped */
  --b-taupe:#726654; --b-espresso:#2B221B; --b-yellow:#FFF256; --b-green:#CBE55E;
  --b-sage:#8B9B5E; --b-cream:#FCFBF7; --b-sky:#91D2FC;
}

:root[data-theme="dark"]{
  /* Night mode keeps the brand's green hue (per the deck's dark cover slide) but muted to a
     desaturated sage instead of neon #89FF00 — same premium-quiet intent as the light palette. */
  --canvas:#16181B;
  --surface:#1E2124;
  --border:#2C2F33;
  --fg:#EDEEEC;
  --fg-muted:#A3A79E;
  --fg-soft:#6D7169;
  --accent:#6FB583;
  --accent-50:#182420;
  --accent-dark:#8FCC9F;
  --accent-hover:#5B9C6D;
  --accent-border:#33473A;
  --on-accent:#0E1210;
  --success:#4ADE80;
  --success-bg:#132A20;
  --shadow-card:0 1px 2px rgba(0,0,0,.35), 0 1px 8px rgba(0,0,0,.3);
  --shadow-pop:0 10px 32px rgba(0,0,0,.5);
}
*{box-sizing:border-box;}
body{margin:0; font-family:'Inter', ui-sans-serif, system-ui, sans-serif; background:var(--canvas); color:var(--fg); -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

/* ---------- login ---------- */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh;}
.login-card{width:360px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-pop); padding:32px 28px;}
.login-mark{display:flex; align-items:center; gap:10px; font-family:'Albura', ui-sans-serif, sans-serif; font-size:19px; font-weight:700; color:var(--fg);}
.login-mark .brand-mark{width:26px; height:auto;}
.login-sub{font-size:13px; color:var(--fg-muted); margin:6px 0 22px;}
.login-card label{display:block; font-size:12px; font-weight:600; color:var(--fg-muted); margin:14px 0 6px;}
.login-card input{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; background:var(--canvas);}
.login-card input:focus{outline:none; border-color:var(--accent); background:var(--surface);}
.login-error{color:#DC2626; font-size:12.5px; margin-top:10px; min-height:16px;}

/* ---------- buttons / pills ---------- */
.btn{border-radius:999px; padding:9px 18px; font-size:13px; font-weight:600; border:1px solid var(--border); background:var(--surface); color:var(--fg-muted); transition:all .15s;}
.btn:hover{color:var(--fg); background:var(--canvas);}
.btn-accent{background:var(--accent); color:var(--on-accent); border-color:var(--accent); box-shadow:0 1px 3px rgba(0,0,254,.3); font-weight:700;}
.btn-accent:hover{background:var(--accent-hover); color:var(--on-accent);}
.btn-outline{background:var(--surface); border-color:var(--border); color:var(--fg);}
.btn-sm{padding:6px 12px; font-size:12px;}

/* ---------- app shell ---------- */
.app-shell{display:flex; min-height:100vh;}
.sidebar{
  width:230px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border);
  position:sticky; top:0; height:100vh; padding:20px 0; display:flex; flex-direction:column;
}
#btn-hamburger{display:none;}
.sidebar .brand{display:flex; align-items:center; gap:8px; font-family:'Albura', ui-sans-serif, sans-serif; font-size:16px; font-weight:700; padding:0 20px 4px; color:var(--fg);}
.sidebar .brand .brand-mark{width:20px; height:auto; flex-shrink:0;}
.org-badge{padding:0 20px 18px;}
.org-badge span{font-size:12px; font-weight:600; color:var(--fg-muted); background:var(--canvas); border:1px solid var(--border); border-radius:999px; padding:3px 10px; display:inline-block;}
.sidebar nav{flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;}
.sidebar nav a{
  display:flex; align-items:center; gap:10px; margin:2px 12px; padding:9px 12px; border-radius:var(--radius-sm);
  font-size:13.5px; font-weight:500; color:var(--fg-muted);
}
.sidebar nav a svg{width:16px; height:16px; flex-shrink:0;}
.sidebar nav a:hover{background:var(--canvas); color:var(--fg);}
.sidebar nav a.active{background:var(--accent-50); color:var(--accent-dark); font-weight:600;}
.nav-group:first-child .nav-group-label{padding-top:0;}
.nav-group-label{
  display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg-soft); font-weight:700; padding:16px 20px 6px;
}
.nav-group-label:hover{color:var(--fg-muted);}
.nav-chev{width:12px; height:12px; flex-shrink:0; transition:transform .15s; opacity:.7;}
.nav-group.collapsed .nav-group-body{display:none;}
.nav-group.collapsed .nav-chev{transform:rotate(-90deg);}
.sidebar .foot{padding:14px 20px 0; font-size:11px; color:var(--fg-soft); border-top:1px solid var(--border); margin-top:10px;}

.main{flex:1; min-width:0;}
.topbar{
  background:var(--surface); border-bottom:1px solid var(--border); padding:14px 32px;
  display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5;
}
.topbar .title{font-size:14px; font-weight:600;}
.avatar{
  width:34px; height:34px; border-radius:999px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:13px;
  background:linear-gradient(135deg, #FBBF24, #F97316);
}
.topbar .who{display:flex; align-items:center; gap:10px;}

.page{padding:28px 32px 60px;}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-bottom:22px;}
.page-head h1{font-size:26px; margin:0 0 4px; font-weight:700;}
.page-head .sub{color:var(--fg-muted); font-size:13.5px; margin:0;}
.page-head .date{color:var(--fg-soft); font-size:13px;}
.page-head .actions{display:flex; gap:10px;}

/* ---------- kpi cards ---------- */
.kpi-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:28px;}
.kpi-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 18px; box-shadow:var(--shadow-card); transition:box-shadow .15s;}
.kpi-card:hover{box-shadow:var(--shadow-pop);}
.kpi-card .top-row{display:flex; justify-content:space-between; align-items:flex-start;}
.kpi-card .lab{font-size:13px; color:var(--fg-muted); font-weight:500;}
.kpi-icon{width:34px; height:34px; border-radius:999px; display:grid; place-items:center; font-size:15px;}
.kpi-card .val{font-size:28px; font-weight:800; margin-top:10px;}
.kpi-card .cap{font-size:12px; color:var(--fg-soft); margin-top:2px;}

/* ---------- section cards ---------- */
.section{margin-bottom:28px;}
.page-view{display:none;}
.page-view.active-page{display:block;}
.manual-details-body{margin-top:4px;}
.section-head{margin-bottom:14px;}
.section-head h2{font-size:16px; font-weight:700; margin:0 0 3px;}
.section-head .sub{font-size:12.5px; color:var(--fg-muted); margin:0;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:22px 24px;}
.grid-2{display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:start;}
@media (max-width:1080px){ .grid-2{grid-template-columns:1fr;} }

/* ---------- generate / how-to card ---------- */
.how-card{background:linear-gradient(180deg, var(--accent-50), var(--surface) 60%);}
.how-steps{display:flex; flex-direction:column; gap:14px;}
.how-step{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; line-height:1.5; color:var(--fg-muted);}
.how-step b{color:var(--fg);}
.how-num{
  flex-shrink:0; width:24px; height:24px; border-radius:999px; background:var(--accent); color:var(--on-accent);
  font-size:12px; font-weight:700; display:grid; place-items:center; margin-top:1px;
}
.how-example{
  margin-top:16px; font-size:12.5px; color:var(--accent-dark); background:var(--accent-50);
  border:1px solid var(--accent-border); border-radius:var(--radius-sm); padding:10px 14px;
}
.how-example em{font-style:normal; font-weight:600;}

/* ---------- collapsible manual-add ---------- */
.manual-details summary{
  cursor:pointer; list-style:none; padding:14px 0; border-top:1px solid var(--border);
}
.manual-details summary::-webkit-details-marker{display:none;}
.manual-details summary::before{
  content:"▸"; display:inline-block; margin-right:8px; color:var(--fg-soft); transition:transform .15s;
}
.manual-details[open] summary::before{transform:rotate(90deg);}

/* ---------- moodboard studio ---------- */
.mbs-section{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); margin-top:14px; overflow:hidden;}
.mbs-section summary{cursor:pointer; list-style:none; padding:16px 20px; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:space-between;}
.mbs-section summary::-webkit-details-marker{display:none;}
.mbs-section summary::after{content:"▸"; color:var(--fg-soft); transition:transform .15s; font-weight:400;}
.mbs-section[open] summary::after{transform:rotate(90deg);}
.mbs-section[open] summary{border-bottom:1px solid var(--border);}
.mbs-section-body{padding:18px 20px 20px;}
.mbs-deck-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:16px 18px; margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer;}
.mbs-deck-card:hover{border-color:var(--accent);}
.mbs-deck-title{font-weight:700; font-size:14.5px;}
.mbs-deck-meta{font-size:12px; color:var(--fg-soft); margin-top:2px;}
.mbs-repeat-card{background:var(--surface-2, var(--canvas)); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:12px;}
.mbs-repeat-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.mbs-repeat-head b{font-size:13px;}
.mbs-row{display:flex; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
.mbs-row .field{flex:1; min-width:120px; margin-bottom:0;}
.mbs-booking-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); margin-bottom:6px; font-size:12.5px;}
.mbs-booking-row .mbs-booking-label{color:var(--fg-muted);}

/* ---------- form ---------- */
label.f-label{display:block; font-size:12px; font-weight:600; color:var(--fg-muted); margin-bottom:6px;}
.field{margin-bottom:15px;}
input[type=text], select, textarea{
  width:100%; font-family:inherit; font-size:13.5px; padding:9px 12px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--canvas); color:var(--fg);
}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px var(--accent-50);}
textarea{resize:vertical; min-height:64px;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.chiprow{display:flex; gap:8px; flex-wrap:wrap;}
.chip{font-size:12px; font-weight:600; padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:var(--canvas); color:var(--fg-muted);}
.chip.active{background:var(--fg); color:#fff; border-color:var(--fg);}

/* ---------- rules checklist ---------- */
.rule-item{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.45; margin-bottom:12px;}
.rule-item .mark{flex-shrink:0; width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; margin-top:1px;}
.rule-item.ok .mark{background:var(--success-bg); color:var(--success);}
.rule-item.pending .mark{background:var(--canvas); color:var(--fg-soft);}
.rule-item span.txt{color:var(--fg-muted);}
.rule-item.ok span.txt{color:var(--fg);}

.intel-card{background:var(--accent-50); border:1px solid var(--accent-border); border-radius:var(--radius-lg); padding:16px 18px; font-size:12.5px; line-height:1.6; color:var(--accent-dark); margin-top:16px;}
.intel-card b{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; color:var(--accent-dark);}

/* ---------- calendar table ---------- */
.table-wrap{overflow-x:auto;}
table.plan-table{width:100%; border-collapse:collapse; min-width:680px; font-size:13px;}
table.plan-table th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-soft); padding:10px 12px; border-bottom:1px solid var(--border); font-weight:600;}
table.plan-table td{padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.plan-table tr:last-child td{border-bottom:none;}
table.plan-table tr:hover td{background:var(--canvas);}
.fmt-pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px;}
.fmt-pill.feed{background:#FFF4CC; color:#8A6D00;}
.fmt-pill.story{background:#E4F0FF; color:#1C5EA6;}
.event-flag{display:inline-block; font-size:10px; font-weight:700; color:#fff; background:var(--b-sage); padding:2px 8px; border-radius:999px; margin-left:6px;}

/* Side-by-side layout in the post detail modal: spec content on the left, Directory A
   reference photo as its own column on the right — big enough to actually judge the match,
   still a clickable link out to the real file in Drive. */
.detail-grid.has-compare{gap:4px;}
.detail-compare-collapse{margin-bottom:0;}
.detail-compare-collapse summary{cursor:pointer; font-size:12px; font-weight:600; color:var(--fg-muted); padding:0 0 4px; list-style:none;}
.detail-compare-collapse summary::-webkit-details-marker{display:none;}
.detail-compare-collapse summary::before{content:'▸ '; color:var(--fg-soft);}
.detail-compare-collapse[open] summary::before{content:'▾ ';}
.detail-compare-collapse[open] summary{margin-bottom:10px; border-bottom:1px solid var(--border); padding-bottom:12px;}
.detail-content-row{display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start;}
.detail-content-row.no-dira{grid-template-columns:1fr;}
@media (max-width:820px){ .detail-content-row{grid-template-columns:1fr;} }

.dira-ref-block{background:var(--canvas); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px; position:sticky; top:0;}
.dira-ref-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-soft); margin-bottom:10px;}
.dira-ref-photo{display:block; width:100%; aspect-ratio:4/5; border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); border:1px solid var(--border);}
.dira-ref-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s;}
.dira-ref-photo:hover img{transform:scale(1.04);}
.dira-ref-name{font-size:12.5px; font-weight:600; color:var(--fg); margin-top:10px;}
.dira-ref-path{font-size:11px; color:var(--fg-muted); margin-top:2px;}

/* ---------- creative chat: rich per-post recommendation card ---------- */
.intel-post-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px 18px; margin-bottom:12px;}
.intel-post-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px;}
.intel-post-approve{display:flex; align-items:center;}
.intel-post-approve input{width:16px; height:16px; cursor:pointer;}
.intel-refine-btn{font-size:11px; padding:3px 10px;}
.intel-post-num{font-size:10.5px; font-weight:700; letter-spacing:.04em; color:var(--fg-soft); text-transform:uppercase;}
.intel-post-date{font-size:12px; color:var(--fg-muted);}
.intel-post-headline{font-family:'Fraunces', serif; font-size:16px; font-weight:600; color:var(--fg);}
.intel-post-sub{font-size:13px; color:var(--fg-muted); margin-top:2px;}
.intel-post-meta-row{display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--fg-muted); margin:8px 0; padding-bottom:8px; border-bottom:1px solid var(--border);}
.intel-post-meta-row b{color:var(--fg); font-weight:600; margin-right:4px;}
.intel-post-section{margin-top:10px;}
.intel-post-section-label{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-soft); margin-bottom:5px;}

/* ---------- competitors ---------- */
.comp-row{display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 14px; margin-bottom:6px;}
.comp-row-info{display:flex; align-items:center; gap:10px;}
.comp-swatch{width:12px; height:12px; border-radius:999px; flex-shrink:0;}
.comp-row-name{font-weight:600; font-size:13.5px;}
.comp-row-handle{font-size:12px; color:var(--fg-muted);}

/* ---------- directory a ---------- */
.dira-client-row{display:flex; align-items:center; justify-content:space-between; gap:14px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:8px;}
.dira-client-name{font-family:'Fraunces', serif; font-size:15px; font-weight:600; color:var(--fg);}
.dira-client-meta{font-size:12px; color:var(--fg-muted); margin-top:3px;}
.dira-client-actions{display:flex; align-items:center; gap:8px; flex-shrink:0;}
.dira-client-actions input{width:220px; padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12.5px;}
.dira-folder{margin-bottom:24px;}
.dira-folder h3{font-size:13px; font-weight:700; color:var(--fg-muted); margin:0 0 10px; text-transform:none;}
.dira-folder h3 .dira-count{font-weight:500; color:var(--fg-soft);}
.dira-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px;}
.dira-thumb{position:relative; display:block; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden; background:var(--canvas); border:1px solid var(--border);}
.dira-thumb-badge{position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,.65); color:#fff; font-size:9.5px; font-weight:700; padding:1px 6px; border-radius:999px;}
.dira-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.dira-thumb.no-thumb{display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--fg-soft); text-align:center; padding:6px;}

/* ---------- client picker ---------- */
.client-switch-hint{opacity:.55; font-size:11px;}
.org-badge{cursor:pointer; border:none; background:none; text-align:left; width:100%; font:inherit; transition:background .15s;}
.org-badge:hover{background:var(--canvas);}
.client-pick-item{display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-bottom:8px; cursor:pointer; transition:border-color .15s, background .15s;}
.client-pick-item:hover{border-color:var(--accent); background:var(--accent-50);}
.client-pick-name{font-family:'Fraunces', serif; font-size:15px; font-weight:600; color:var(--fg);}
.client-pick-arrow{color:var(--fg-soft);}

/* ---------- agency overview ---------- */
.status-pill{display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px;}
.status-pill.ok{background:var(--success-bg); color:var(--success);}
.status-pill.risk{background:#FDECEC; color:#DC2626;}

/* ---------- pill-style toggle (mode pickers) ---------- */
.pill-toggle{margin-bottom:0; border-bottom:none;}
.pill-toggle .tab-btn{padding:6px 14px; border:1px solid var(--border); border-radius:999px; margin-right:6px;}
.pill-toggle .tab-btn.active{background:var(--accent-50); border-color:var(--accent); color:var(--accent-dark);}

.cal-today-banner{display:flex; align-items:center; gap:10px; background:#FFF4CC; border:1px solid #F0DA8C; color:#7A5D00; border-radius:var(--radius-sm); padding:10px 16px; font-size:13px; margin-bottom:14px;}
.cal-banner-icon{font-size:15px;}

.cal-grid-nav{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.cal-grid-month{font-family:'Fraunces', serif; font-size:16px; font-weight:600; color:var(--fg);}
.cal-grid-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:6px;}
.cal-grid-weekdays div{text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-soft);}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px;}
.cal-cell{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); min-height:64px; padding:5px; display:flex; flex-direction:column; gap:3px;}
.cal-cell-out{background:var(--canvas); opacity:.55;}
.cal-cell-today{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset;}
.cal-cell-date{font-size:11px; font-weight:700; color:var(--fg-muted); display:flex; align-items:center; gap:4px;}
.cal-cell-today .cal-cell-date{color:var(--accent-dark);}
.cal-today-dot{width:6px; height:6px; border-radius:999px; background:var(--accent); display:inline-block;}
.cal-cell-posts{display:flex; flex-direction:column; gap:3px; overflow:hidden;}
.cal-chip{font-size:9.5px; font-weight:600; padding:2px 5px; border-radius:5px; background:var(--canvas); border-left:3px solid var(--fg-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cal-chip.agent-gemini{border-left-color:#1C5EA6; background:#E4F0FF;}
.cal-chip.agent-gemini-chat{border-left-color:#0E7A5F; background:#E0F7F0;}
.cal-chip.agent-claude{border-left-color:#7C3AED; background:#F3E8FF;}
.cal-chip.agent-manual{border-left-color:var(--fg-soft); background:var(--canvas);}
.cal-chip.agent-intelligence{border-left-color:#B5560C; background:#FDEBD8;}
.cal-chip-more{font-size:10px; color:var(--fg-soft); padding:2px 6px;}

/* ---------- post preview cards (Buranchi brand — intentionally distinct) ---------- */
.post-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:6px;}
.post-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-card); cursor:pointer; transition:box-shadow .15s, transform .15s;}
.post-card:hover{box-shadow:var(--shadow-pop); transform:translateY(-2px);}
.mockup{position:relative; overflow:hidden; background-size:cover; font-family:'Inter',sans-serif;}
.mockup.light{background-color:#FBF6E9; background-image:repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0px, rgba(0,0,0,.02) 1px, transparent 1px, transparent 6px);}
.mockup.dark{background-color:var(--b-espresso); background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 6px);}
.mockup.ratio-feed{aspect-ratio:4/5;}
.mockup.ratio-story{aspect-ratio:9/16;}
.photo-card{position:absolute; left:50%; top:36%; transform:translate(-50%,-50%); width:70%; aspect-ratio:1/1; background:#fff; border-radius:2px; padding:8px 8px 18px; box-shadow:0 6px 18px rgba(0,0,0,.25);}
.photo-card.yellow-frame{padding:8px;}
.photo-card.yellow-frame .photo-inner{border:4px solid var(--b-yellow);}
.photo-inner{width:100%; height:100%; background:repeating-linear-gradient(135deg, #D9D2C2 0px, #D9D2C2 8px, #CFC7B4 8px, #CFC7B4 16px); display:flex; align-items:center; justify-content:center; text-align:center; padding:6px;}
.photo-inner span{font-size:8px; line-height:1.3; color:#6b6252; font-weight:600; text-transform:uppercase;}
.badge{position:absolute; font-size:7px; font-weight:700; text-transform:uppercase; padding:3px 7px; border-radius:999px; background:var(--b-sage); color:#fff; box-shadow:0 3px 8px rgba(0,0,0,.2); max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; z-index:2;}
.badge.top{top:7px; right:7px;} .badge.bottom{bottom:7px; left:7px;}
.headline-block{position:absolute; left:7%; right:7%; z-index:1; max-height:34%; overflow:hidden;}
.headline-block.pos-top{top:6%;} .headline-block.pos-bottom{bottom:0; padding:22px 0 8px; background:linear-gradient(0deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.42) 55%, transparent 100%);}
.mockup.light .headline-block.pos-bottom{background:linear-gradient(0deg, rgba(252,251,247,.85) 0%, rgba(252,251,247,.85) 55%, transparent 100%);}
.headline-block .h{font-family:'Fraunces', serif; font-weight:500; line-height:1.15; font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.headline-block .h.script{font-family:'Parisienne', cursive; font-weight:400; font-size:17px;}
.headline-block .h.sans{font-family:'Inter', sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.02em; font-size:11.5px;}
.headline-block .s{font-size:9px; margin-top:4px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.mockup.light .headline-block.pos-top .h, .mockup.light .headline-block.pos-bottom .h{color:var(--b-espresso);}
.mockup.light .headline-block.pos-top .s, .mockup.light .headline-block.pos-bottom .s{color:#4A4033;}
.mockup.dark .headline-block .h{color:var(--b-cream); text-shadow:0 1px 6px rgba(0,0,0,.35);}
.mockup.dark .headline-block .s{color:#E7E1D2;}
.mockup.dark .headline-block.pos-bottom{background:linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.6) 55%, transparent 100%);}
.post-card .meta{padding:13px 15px;}
.post-card .meta .kicker{font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--b-sage); font-weight:700;}
.post-card .meta .cap{font-size:11.5px; margin-top:5px; color:#5a5040; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.post-card .meta .row-actions{margin-top:9px; display:flex; gap:8px;}
.row-actions button{padding:5px 11px; font-size:11px; background:var(--canvas); border:1px solid var(--border); border-radius:var(--radius-sm);}
.row-actions button:hover{background:#eef1f6;}

.empty{padding:48px 20px; text-align:center; color:var(--fg-soft); background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-lg);}
.empty .big{font-size:15px; font-weight:700; color:var(--fg); margin-bottom:5px;}

.paste-block{margin-top:18px;}
.paste-block textarea{min-height:110px; font-family:'SFMono-Regular',Consolas,monospace; font-size:11.5px;}

.moodboard-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px; margin-top:16px; align-items:start;}
.moodboard-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:16px; display:flex; flex-direction:column; gap:10px;}
.moodboard-card img{width:100%; height:140px; object-fit:cover; border-radius:var(--radius-md); background:var(--canvas);}
.moodboard-card h3{margin:0; font-size:14.5px; font-weight:700;}
.moodboard-card p{margin:0; font-size:12.5px; color:var(--fg-muted); line-height:1.5;}
.moodboard-swatches{display:flex; gap:6px;}
.moodboard-swatch{width:22px; height:22px; border-radius:6px; border:1px solid rgba(0,0,0,.08); flex-shrink:0;}
.moodboard-tags{display:flex; flex-wrap:wrap; gap:6px;}
.moodboard-tag{font-size:11px; font-weight:600; padding:4px 9px; border-radius:999px; background:var(--canvas); color:var(--fg-muted);}
.moodboard-card-actions{display:flex; justify-content:flex-end;}

.ai-rec-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin-top:10px;}
.ai-rec-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;}
.ai-rec-meta{font-size:11.5px; color:var(--fg-soft); display:flex; align-items:center; gap:8px;}
.ai-rec-headline{font-weight:700; font-size:14px; margin:0 0 2px;}
.ai-rec-sub{font-style:italic; color:var(--fg-muted); font-size:12.5px; margin:0 0 8px;}
.ai-rec-caption{font-size:12.5px; color:var(--fg-muted); line-height:1.6; white-space:pre-wrap; margin:0;}

/* Master Config: list (left) + selected entry (right) above a full-width AI summary */
.mc-split{display:grid; grid-template-columns:300px 1fr; gap:16px; align-items:start; margin-bottom:20px;}
@media (max-width:1080px){ .mc-split{grid-template-columns:1fr;} }
.mc-list-card{padding:12px; max-height:620px; overflow-y:auto;}
.mc-list-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px;}
.mc-detail-card{min-height:520px;}
.mc-entry-item{display:flex; gap:10px; align-items:flex-start; padding:10px; border-radius:var(--radius-sm); cursor:pointer; border:1px solid transparent;}
.mc-entry-item:hover{background:var(--canvas);}
.mc-entry-item.active{background:var(--accent-50); border-color:var(--accent);}
.mc-entry-item .mc-entry-icon{flex-shrink:0; font-size:13px; line-height:1.5;}
.mc-entry-item .mc-entry-name{font-weight:600; font-size:13px; word-break:break-word;}
.mc-entry-item .mc-entry-time{font-size:11.5px; color:var(--fg-muted);}
.mc-entry-thumb{width:34px; height:34px; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); flex-shrink:0;}
.mc-detail-textarea{min-height:400px;}
.mc-summary-points{margin:6px 0 0; padding-left:20px; font-size:13.5px; line-height:1.7;}

.brief-ref-img-card{position:relative; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border); background:var(--canvas);}
.brief-ref-img-card img{width:100%; height:120px; object-fit:cover; display:block;}
.brief-ref-img-card button{position:absolute; top:6px; right:6px; width:22px; height:22px; border:none; border-radius:999px; background:rgba(23,23,23,.65); color:#fff; cursor:pointer; font-size:13px; line-height:1;}
.ai-rec-card.selectable{cursor:pointer; transition:border-color .15s;}
.ai-rec-card.selectable:hover{border-color:var(--accent);}
.ai-rec-card.selected{border-color:var(--accent); background:var(--accent-50);}
.brief-saved-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:16px 18px; margin-bottom:12px;}
.brief-saved-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:6px;}
.brief-saved-title{font-weight:700; font-size:14.5px; margin:0;}
.brief-saved-meta{font-size:12px; color:var(--fg-soft); margin-top:2px;}
.brief-saved-actions{display:flex; gap:8px; flex-shrink:0;}

.vizref-card{position:relative; border-radius:var(--radius-md); overflow:hidden; border:2px solid var(--border); background:var(--canvas); cursor:pointer;}
.vizref-card img{width:100%; height:120px; object-fit:cover; display:block;}
/* Instagram posts are usually portrait (4:5) or square, rarely landscape — detected from the
   loaded image's own naturalWidth/naturalHeight (see the onload handler where this card is
   built) so the crop matches what the post actually looks like instead of a fixed square box
   cutting off real content. Every portrait card gets the same taller height, not an arbitrary
   per-image size, so the grid still lines up. */
.vizref-card.is-portrait img{height:200px;}
.vizref-card .vizref-label{font-size:10.5px; padding:5px 8px 0; color:var(--fg-muted); background:var(--surface); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vizref-card .vizref-date{font-size:9.5px; padding:0 8px 6px; color:var(--fg-soft); background:var(--surface);}

/* Thumbnail density for the Campaign Brief reference picker specifically — fewer items per page
   means each one gets shown bigger, more items means smaller, so "how many results" and "how big
   each result is" are the same one control instead of two unrelated settings. Medium matches the
   grid's original base size (unscoped .vizref-card rules above). */
#brief-vizref-grid.density-large{grid-template-columns:repeat(auto-fill, minmax(280px,1fr));}
#brief-vizref-grid.density-large .vizref-card img{height:240px;}
#brief-vizref-grid.density-large .vizref-card.is-portrait img{height:340px;}
#brief-vizref-grid.density-small{grid-template-columns:repeat(auto-fill, minmax(140px,1fr));}
#brief-vizref-grid.density-small .vizref-card img{height:80px;}
#brief-vizref-grid.density-small .vizref-card.is-portrait img{height:130px;}
#brief-vizref-grid.density-small .vizref-card .vizref-label{font-size:9.5px;}
#brief-vizref-grid.density-xsmall{grid-template-columns:repeat(auto-fill, minmax(100px,1fr)); gap:8px;}
#brief-vizref-grid.density-xsmall .vizref-card img{height:60px;}
#brief-vizref-grid.density-xsmall .vizref-card.is-portrait img{height:95px;}
#brief-vizref-grid.density-xsmall .vizref-card .vizref-label{font-size:9px; padding:3px 5px 0;}
#brief-vizref-grid.density-xsmall .vizref-card .vizref-date{display:none;}
.vizref-filter-bar{background:var(--canvas);}
.vizref-filter-row{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:12px;}
.vizref-filter-group{display:flex; align-items:center; gap:6px; flex-wrap:nowrap;}
.vizref-filter-group .f-label{font-size:11px; white-space:nowrap;}
.vizref-sort-group{margin-left:auto;}
.vizref-filter-group select, .vizref-filter-group input[type="date"]{padding:5px 7px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:11.5px; background:var(--surface); color:var(--fg); font-family:inherit;}
.vizref-filter-group select{width:auto;}
.vizref-card.selected{border-color:var(--accent);}
.vizref-card.selected::after{content:"✓"; position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:999px; background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font-size:11px; font-weight:700;}

/* ---------- campaign board ---------- */
.board-split{display:grid; grid-template-columns:320px 1fr; gap:24px; align-items:start;}
@media (max-width:1000px){ .board-split{grid-template-columns:1fr;} }
.board-split-left{position:sticky; top:16px;}
.board-card-title{font-family:'Fraunces', serif; font-size:15px; font-weight:600; color:var(--fg); margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border);}
/* User Input stays neutral (plain card); AI Recommendation gets an accent tint + left stripe so
   it visually reads as "this is the one AI made," not just more text in an identical box. */
.board-card-ai{background:var(--accent-50); border-color:var(--accent-border); border-left:3px solid var(--accent); box-shadow:var(--shadow-pop);}
.board-card-ai .board-card-title{color:var(--accent-dark); border-bottom-color:var(--accent-border);}
.board-brief-row{margin-bottom:14px;}
.board-brief-row:last-child{margin-bottom:0;}
.board-brief-label{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-soft); margin-bottom:3px;}
.board-brief-val{font-size:13px; color:var(--fg); line-height:1.5; white-space:pre-wrap;}
.board-ref-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; align-items:start;}
@media (max-width:900px){ .board-ref-grid{grid-template-columns:repeat(2, 1fr);} }
@media (max-width:1100px){ .board-ref-grid{grid-template-columns:repeat(2, 1fr);} }
.board-ref-col{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:12px;}
.board-ref-col-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--fg-soft); margin-bottom:10px;}
.board-ref-cards{display:grid; grid-template-columns:1fr; gap:8px;}
.board-ref-cards .vizref-card img{height:220px;}
.board-ref-empty{grid-column:1/-1; font-size:12px; color:var(--fg-muted); padding:10px 0;}
.board-ref-chosen{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-50);}
.board-ext-search{display:flex; flex-direction:column; gap:6px; margin-bottom:10px;}
.board-ext-search select, .board-ext-search input{padding:7px 9px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:12.5px; background:var(--canvas); color:var(--fg);}
.board-version-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; flex:1;}
.board-version-card.board-version-active{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent);}
.board-version-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.board-version-diff{width:100%; margin-top:6px; font-family:'SFMono-Regular',Consolas,monospace; font-size:11.5px; line-height:1.5; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--canvas); color:var(--fg-muted); white-space:pre-wrap; word-break:break-word;}

/* ---------- icon button ---------- */
.icon-btn{
  width:34px; height:34px; display:grid; place-items:center; border-radius:var(--radius-sm);
  background:transparent; border:1px solid transparent; color:var(--fg-muted); padding:0; flex-shrink:0;
}
.icon-btn:hover{background:var(--canvas); color:var(--fg);}
.icon-btn svg{width:18px; height:18px;}

/* ---------- overlay (used behind the mobile sidebar and the post-detail modal) ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(23,23,23,.4); opacity:0; pointer-events:none;
  transition:opacity .18s; z-index:40;
}
.overlay.open{opacity:1; pointer-events:auto;}

/* ---------- master config editor (inline section) ---------- */
.config-textarea{width:100%; min-height:52vh; font-family:'SFMono-Regular',Consolas,monospace; font-size:12px; line-height:1.6; padding:14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--canvas);}
.config-explainer{background:var(--accent-50); border:1px solid var(--accent-border); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:14px;}
.config-explainer-row{margin-bottom:10px;}
.config-explainer-row:last-child{margin-bottom:0;}
.config-explainer-row b{display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-dark); margin-bottom:3px;}
.config-explainer-row p{margin:0; font-size:12.5px; line-height:1.55; color:var(--accent-dark);}

/* ---------- post detail modal ---------- */
.modal{
  position:fixed; top:0; left:0; right:0; margin:0 auto; width:min(1180px, 94vw); max-height:88vh;
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:0 20px 60px rgba(23,23,23,.25);
  z-index:42; overflow-y:auto; opacity:0; pointer-events:none; transform:translateY(-12px) scale(.98);
  transition:opacity .18s, transform .18s; top:6vh;
}
.modal.open{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);}
.modal-inner{padding:26px 28px 30px; position:relative;}
.modal-close{position:absolute; top:16px; right:16px; z-index:1;}

#lightbox-overlay{z-index:50;}
.lightbox{
  position:fixed; top:4vh; left:50%; transform:translateX(-50%) scale(.98); width:min(1100px, 94vw); max-height:92vh;
  background:var(--surface); border-radius:var(--radius-lg); box-shadow:0 24px 70px rgba(23,23,23,.3);
  z-index:51; overflow-y:auto; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s;
  padding:30px 34px 34px;
}
.lightbox.open{opacity:1; pointer-events:auto; transform:translateX(-50%) scale(1);}
.lightbox .modal-close{position:absolute; top:16px; right:16px;}
.lightbox-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin-top:10px;}
@media (max-width:800px){ .lightbox-grid{grid-template-columns:1fr;} }
.lightbox-col{display:flex; flex-direction:column; align-items:center; text-align:center;}
.lightbox-dims{font-size:11.5px; color:var(--fg-soft); margin:8px 0 14px;}
.lightbox-mockup{width:100%; max-width:420px;}
.lightbox-ref-img{width:100%; max-width:420px; max-height:70vh; object-fit:contain; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--canvas);}

.detail-grid{display:grid; grid-template-columns:280px 1fr; gap:26px;}
.detail-grid.has-compare{grid-template-columns:1fr;}
@media (max-width:700px){ .detail-grid{grid-template-columns:1fr;} }

.compare-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--border);}
@media (max-width:640px){ .compare-grid{grid-template-columns:1fr;} }
.compare-col{display:flex; flex-direction:column; align-items:center; text-align:center;}
.compare-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; padding:4px 12px; border-radius:999px; margin-bottom:12px;}
.compare-label.ours{background:var(--accent-50); color:var(--accent-dark);}
.compare-label.theirs{background:#FFF4CC; color:#8A6D00;}
.compare-ref-photo{width:100%; max-width:280px; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; background:var(--canvas); border:1px solid var(--border);}
.compare-ref-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.compare-ref-noimg{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:11.5px; color:var(--fg-soft); padding:10px;}
.compare-ref-meta{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:10px;}
.compare-ref-caption{font-size:12px; color:var(--fg-muted); margin:10px 0 6px; line-height:1.5;}
.compare-ref-empty{width:100%; max-width:280px; padding:24px 18px; background:var(--canvas); border:1px dashed var(--border); border-radius:var(--radius-md); text-align:center;}
.compare-ref-empty p{font-size:12.5px; color:var(--fg-muted); margin:0 0 12px;}
.compare-ref-empty select{width:100%; font-size:12.5px;}
.detail-mockup-wrap{display:flex; justify-content:center;}
.compare-col .detail-mockup-wrap{display:block; width:100%; max-width:280px;}
.detail-tags{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px;}
.detail-row{margin-bottom:16px;}
.detail-lab{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fg-soft); font-weight:700; margin-bottom:5px;}
.detail-val{font-size:13.5px; line-height:1.55; color:var(--fg);}
.detail-val.serif-val{font-family:'Fraunces', serif; font-size:19px; font-weight:600;}
.detail-list{margin:2px 0 0; padding-left:18px;}
.detail-list li{margin-bottom:5px; font-size:13px; line-height:1.5; color:var(--fg-muted);}
.detail-empty{font-size:12.5px; color:var(--fg-soft); font-style:italic;}
.caption-box{background:var(--canvas); border:1px solid var(--border); border-left:3px solid var(--b-yellow); border-radius:var(--radius-sm); padding:12px 14px; white-space:pre-wrap;}
.cta-box{display:inline-block; background:var(--fg); color:#fff; font-size:12.5px; font-weight:600; padding:7px 13px; border-radius:var(--radius-sm);}

/* ---------- competitor analytics ---------- */
.analytics-toolbar{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:14px; margin-bottom:18px;}
.analytics-filters{display:flex; gap:14px; flex-wrap:wrap;}
.rescrape-block{display:flex; align-items:center; gap:10px;}
.rescrape-status{font-size:12px; color:var(--fg-muted);}
.rescrape-status.error{color:#DC2626;}
.rescrape-status.ok{color:var(--success);}

.agent-badge{display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 9px; border-radius:999px;}
.agent-badge.agent-gemini{background:#E4F0FF; color:#1C5EA6;}
.agent-badge.agent-gemini-chat{background:#E0F7F0; color:#0E7A5F;}
.agent-badge.agent-claude{background:#F3E8FF; color:#7C3AED;}
.agent-badge.agent-claude-chat{background:#EAE2FB; color:#6D28D9;}
.agent-badge.agent-gpt-chat{background:#E8F5E9; color:#1B7A3D;}
.agent-badge.agent-kimi-chat{background:#FDE8EE; color:#C0246E;}
.agent-badge.agent-manual{background:var(--canvas); color:var(--fg-muted);}
.agent-badge.agent-intelligence{background:#FDEBD8; color:#B5560C;}

.guardrails-link{color:var(--accent-dark); font-weight:600; text-decoration:none;}
.guardrails-link:hover{text-decoration:underline;}

.nav-beta{font-size:9px; font-weight:800; letter-spacing:.05em; background:#FDEBD8; color:#B5560C; padding:2px 6px; border-radius:999px; margin-left:6px; vertical-align:middle;}

/* ---------- creative intelligence ---------- */
.intel-shell{padding:0; display:flex; height:calc(100vh - 220px); min-height:520px; overflow:hidden;}
.intel-session-list{width:280px; flex-shrink:0; border-right:1px solid var(--border); padding:16px; overflow-y:auto;}
.intel-session-heading{font-size:11px; font-weight:700; color:var(--fg-soft); text-transform:uppercase; letter-spacing:.04em; margin:16px 0 8px;}
.intel-session-item{padding:9px 10px; border-radius:8px; cursor:pointer; margin-bottom:4px; font-size:12.5px;}
.intel-session-item:hover{background:var(--canvas);}
.intel-session-item.active{background:var(--accent-50); color:var(--accent-dark);}
.intel-session-item .convo-title{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.intel-session-item .convo-time{display:block; font-size:11px; color:var(--fg-soft); margin-top:2px;}
.intel-main{flex:1; display:flex; flex-direction:column; min-width:0; padding:20px; overflow-y:auto;}
.intel-panel{font-size:13.5px; line-height:1.7; white-space:pre-wrap;}
.intel-brief-card{background:var(--canvas); border:1px solid var(--border); border-radius:10px; padding:14px 16px; margin-bottom:12px;}
.intel-brief-card h4{margin:0 0 8px; font-size:14px;}
.intel-brief-row{font-size:12.5px; margin-bottom:5px;}
.intel-brief-row b{color:var(--fg-muted); font-weight:600;}
.intel-evidence-group{margin-bottom:14px;}
.intel-evidence-group h4{margin:0 0 6px; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--fg-muted);}
.intel-tag-list{display:flex; flex-wrap:wrap; gap:6px;}
.intel-tag{background:var(--canvas); border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:12px;}

/* ---------- agent behavior ---------- */
.agent-behavior-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px;}
.agent-behavior-card{padding:18px;}
.agent-behavior-head{margin-bottom:14px;}
.agent-behavior-head .sub-inline{display:block; font-size:12px; color:var(--fg-muted); margin-top:6px;}
.agent-cond-block{margin-top:14px;}
.agent-cond-label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--fg-soft); margin-bottom:8px;}
.agent-cond-label .lock-note{font-weight:400; text-transform:none; letter-spacing:0; color:var(--fg-soft);}
.agent-cond-list{margin:0; padding-left:18px; font-size:12.5px; color:var(--fg-muted); line-height:1.7;}
.agent-cond-list li{margin-bottom:4px;}

/* ---------- chat ai agent guardrails ---------- */
.guardrails-head{display:flex; justify-content:space-between; align-items:center; padding:16px 18px; cursor:pointer;}
.guardrails-head b{font-size:14px;}
.guardrails-head .sub-inline{display:block; font-size:12px; color:var(--fg-muted); font-weight:400; margin-top:2px;}
.guardrails-head .chev{color:var(--fg-soft); transition:transform .15s;}
.guardrails-head .chev.open{transform:rotate(180deg);}
.guardrails-body{padding:0 18px 18px;}
.gr-rules-list{display:flex; flex-direction:column; gap:8px;}
.gr-rule-row{display:flex; gap:8px; align-items:center;}
.gr-rule-row input{flex:1; border:1px solid var(--border); border-radius:8px; padding:8px 11px; font-size:13px; font-family:inherit;}
.gr-rule-row .gr-rule-remove{flex-shrink:0; width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--fg-muted); cursor:pointer; font-size:15px; line-height:1;}
.gr-rule-row .gr-rule-remove:hover{background:#FDECEC; color:#DC2626; border-color:#FDECEC;}
.gr-rules-empty{font-size:12px; color:var(--fg-soft); padding:4px 0;}

/* ---------- chat ai agent ---------- */
.chat-shell{padding:0; display:flex; height:calc(100vh - 220px); min-height:480px; overflow:hidden;}
.chat-convo-list{width:220px; flex-shrink:0; border-right:1px solid var(--border); padding:14px; overflow-y:auto;}
.chat-convo-item{padding:9px 10px; border-radius:8px; cursor:pointer; margin-bottom:4px;}
.chat-convo-item:hover{background:var(--canvas);}
.chat-convo-item.active{background:var(--accent-50); color:var(--accent-dark);}
.chat-convo-item .convo-title{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-convo-item .convo-time{display:block; font-size:11px; color:var(--fg-soft); margin-top:2px;}
.chat-convo-empty{font-size:12px; color:var(--fg-soft); padding:8px 2px; line-height:1.5;}
.chat-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.chat-toolbar{display:flex; justify-content:flex-end; align-items:center; padding:12px 18px; border-bottom:1px solid var(--border);}
#creativechat .chat-toolbar{justify-content:space-between;}
#cc-session-tokens{font-weight:600; color:var(--fg-muted);}
.chat-log{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px;}
.chat-empty{color:var(--fg-soft); font-size:13px; text-align:center; margin:auto; max-width:360px; line-height:1.6;}
.chat-row{display:flex;}
.chat-row.user{justify-content:flex-end;}
.chat-row.model{justify-content:flex-start;}
.chat-bubble{max-width:72%; padding:11px 16px; border-radius:16px; font-size:13.5px; line-height:1.6; white-space:pre-wrap;}
.chat-row.user .chat-bubble{background:var(--accent); color:var(--on-accent); border-bottom-right-radius:4px;}
.chat-row.model .chat-bubble{background:var(--surface); color:var(--fg); border:1px solid var(--border); border-bottom-left-radius:4px; box-shadow:var(--shadow-card);}
.chat-row.error .chat-bubble{background:#FDECEC; color:#DC2626;}
.chat-token-row{margin-top:-8px;}
.chat-token-meta{font-size:10.5px; color:var(--fg-soft); padding:0 6px;}
/* Content/post cards (a proposed post, or a full Market->Brand->Judge result) get a distinct
   accent-tinted treatment so they never get mistaken for a plain chat bubble at a glance. */
.chat-proposal{max-width:88%; background:var(--accent-50); border:1px solid var(--accent); border-left:4px solid var(--accent); border-radius:12px; padding:12px 14px; margin-top:6px;}
.intel-card-inline{width:100%; background:var(--accent-50); border:1px solid var(--accent); border-left:4px solid var(--accent); border-radius:12px; padding:14px 16px;}
.content-card-eyebrow{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-dark); background:var(--surface); border:1px solid var(--accent); border-radius:999px; padding:3px 10px; margin-bottom:10px;}
.intel-card-inline .tab-row{margin-bottom:12px;}
.chat-proposal-head{font-size:12px; font-weight:700; color:var(--fg-muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:8px;}
.chat-proposal-item{font-size:12.5px; padding:6px 0; border-top:1px solid var(--border);}
.chat-proposal-item:first-child{border-top:none;}
.chat-proposal-item b{display:block; font-size:13px;}
.chat-input-row{display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--border);}
.chat-input-row textarea{flex:1; resize:none; border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13.5px; font-family:inherit;}
.chat-input-row .btn, .chat-input-row .icon-btn{align-self:flex-end;}

.cc-attachments{display:flex; flex-wrap:wrap; gap:8px; padding:0 18px; margin-top:10px;}
.cc-attachments:empty{display:none;}
.cc-attachment-chip{display:flex; align-items:center; gap:6px; background:var(--canvas); border:1px solid var(--border); border-radius:999px; padding:5px 6px 5px 12px; font-size:12px; color:var(--fg-muted);}
.cc-attachment-chip button{width:18px; height:18px; display:grid; place-items:center; border:none; background:var(--border); border-radius:999px; color:var(--fg); cursor:pointer; font-size:12px; line-height:1; padding:0;}

.tab-row{display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:20px;}
.tab-btn{
  background:none; border:none; border-bottom:2px solid transparent; padding:10px 4px; margin-right:18px;
  font-size:13.5px; font-weight:600; color:var(--fg-muted); cursor:pointer;
}
.tab-btn:hover{color:var(--fg);}
.tab-btn.active{color:var(--accent-dark); border-bottom-color:var(--accent);}

.pagination{display:flex; align-items:center; justify-content:center; gap:14px; padding:16px; border-top:1px solid var(--border);}
.pagination button{padding:6px 14px; font-size:12.5px;}
.pagination button:disabled{opacity:.4; cursor:default;}
.pagination .page-info{font-size:12.5px; color:var(--fg-muted);}

.recs-card{margin-top:20px; border-top:3px solid var(--accent);}
.rec-item{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--fg); padding:9px 0; border-bottom:1px solid var(--border);}
.rec-item:last-child{border-bottom:none;}
.rec-item .rec-icon{flex-shrink:0; width:20px; height:20px; border-radius:999px; background:var(--accent-50); color:var(--accent-dark); display:grid; place-items:center; font-size:11px; font-weight:700; margin-top:1px;}
.rec-item.compact{font-size:12px; padding:5px 0; border-bottom:none;}
.chart-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px;}
@media (max-width:900px){ .chart-grid{grid-template-columns:1fr;} }
.chart-card h3{margin:0 0 3px; font-size:14.5px; font-weight:700;}
.chart-card .sub{margin:0 0 12px;}
.chart-wrap{position:relative; height:260px;}
.chart-wrap canvas{max-height:260px;}
.rank-pill{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; background:var(--accent-50); font-weight:700; font-size:11px; color:var(--accent-dark);}
.competitor-badge{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600;}
a.post-link{color:var(--accent-dark); text-decoration:none; font-weight:600;}
a.post-link:hover{text-decoration:underline;}
.caption-cell{max-width:280px; color:var(--fg-muted); font-size:12.5px;}

/* ---------- mobile: sidebar collapses behind the hamburger ---------- */
@media (max-width:900px){
  #btn-hamburger{display:grid;}
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:41;
    transform:translateX(-100%); transition:transform .2s; box-shadow:8px 0 30px rgba(23,23,23,.15);
  }
  .sidebar.mobile-open{transform:translateX(0);}
  .page{padding:22px 18px 50px;}
  .topbar{padding:12px 18px;}
}

/* Plan-from-brief panel (Campaign Brief page) */
.brief-plan-panel{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--canvas)}
.brief-plan-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.brief-plan-grid .f-label{display:flex;flex-direction:column;gap:4px;font-size:11.5px}
.brief-plan-grid input,.brief-plan-grid select{width:100%;min-width:0;padding:7px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--fg);font:inherit;font-size:13px}
.brief-plan-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
@media (max-width:860px){.brief-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.brief-plan-grid{grid-template-columns:1fr 1fr}}