/* Psicodigitale brand — see docs/psicodigitale-guida-stile.md
   Warm, human, hand-made: sage and terracotta, paper instead of white,
   crisp dark borders and flat offset shadows like paper cut-outs on a table. */

:root {
  --pd-green-deep: #3a4745;
  --pd-green: #4a5a58;
  --pd-ink: #2c3634;
  --pd-ink-soft: #55625f;
  --pd-mist: #eff2ef;
  --pd-paper: #fbf8f4;
  --pd-clay-strong: #a65c44;
  --pd-clay-hover: #8e4c37;
  --pd-clay-light: #edc4b3;
  --pd-clay-glow: #e8a68a;
  --pd-sage: #8fa89e;
  --pd-sage-light: #c9d6d0;
  --pd-line: rgba(58, 71, 69, 0.25);
  --pd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --border: 2px solid var(--pd-green-deep);
  --shadow-s: 3px 3px 0 var(--pd-green-deep);
  --shadow-m: 5px 5px 0 var(--pd-green-deep);
  --shadow-l: 10px 10px 0 var(--pd-green-deep);
  --serif: 'Fraunces', 'Newsreader', Georgia, serif;
  --sans: 'Inter', 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ig: #c13584;
  --fb: #1877f2;

  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--pd-ink);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--pd-mist); color: var(--pd-ink); }
a { color: var(--pd-clay-strong); text-underline-offset: 2px; }
a:hover { color: var(--pd-clay-hover); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
h1 { font-size: 30px; margin-bottom: 4px; }
h2 { font-size: 22px; }
h3 { font-size: 20px; margin-bottom: 12px; }
h4 { font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
p { margin: 0; }
.muted { color: var(--pd-ink-soft); }
.small { font-size: 13px; }
.err { color: var(--pd-clay-strong); font-weight: 600; }
.warn-text { color: var(--pd-clay-hover); }
.nowrap { white-space: nowrap; }
.center { text-align: center; margin: 18px 0; }
.grow { flex: 1; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
:focus-visible { outline: 3px solid var(--pd-clay-glow); outline-offset: 3px; }

/* ---- Shell ---- */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--pd-green); color: #fff; padding: 20px 16px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; gap: 11px; align-items: center; text-decoration: none; color: #fff; }
.brand:hover { color: #fff; }
.brand b { font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: -0.01em; }
.brand small { display: block; color: var(--pd-sage-light); font-size: 12px; font-weight: 600; }
.brand-mark { width: 38px; height: 38px; border-radius: 50%; background: var(--pd-clay-light); color: var(--pd-green-deep); border: 2px solid var(--pd-green-deep); box-shadow: 3px 3px 0 var(--pd-green-deep); display: grid; place-items: center; font-family: var(--serif); font-size: 20px; transform: rotate(-4deg); flex: none; }
.nav { display: flex; flex-direction: column; gap: 4px; }
.nav a { padding: 8px 14px; border-radius: 999px; color: #fff; text-decoration: none; font-weight: 500; border: 2px solid transparent; transition: background 0.2s var(--pd-ease); }
.nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.nav a.on { background: var(--pd-clay-light); color: var(--pd-green-deep); font-weight: 600; border-color: var(--pd-green-deep); }
.mode-badge { margin-top: auto; font-size: 13px; padding: 10px 14px; border-radius: 16px; font-weight: 600; border: var(--border); box-shadow: var(--shadow-s); color: var(--pd-green-deep); }
.mode-badge small { display: block; font-weight: 400; color: var(--pd-ink-soft); }
.mode-badge.dry { background: var(--pd-clay-light); }
.mode-badge.live { background: var(--pd-sage-light); }
.view { padding: 28px 32px 64px; min-width: 0; }

/* ---- Buttons ---- */
.btn {
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  border: var(--border); background: var(--pd-paper); color: var(--pd-green-deep);
  padding: 8px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-s);
  transition: transform 0.15s var(--pd-ease), box-shadow 0.15s var(--pd-ease), background 0.15s var(--pd-ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--pd-green-deep); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pd-green-deep); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: var(--shadow-s); }
.btn.primary { background: var(--pd-clay-strong); color: #fff; box-shadow: var(--shadow-m); }
.btn.primary:hover { background: var(--pd-clay-hover); box-shadow: 7px 7px 0 var(--pd-green-deep); }
.btn.primary:active { box-shadow: 2px 2px 0 var(--pd-green-deep); transform: translate(3px, 3px); }
.btn.ghost { background: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; padding-left: 8px; padding-right: 8px; }
.btn.ghost:hover, .btn.ghost:active { transform: none; box-shadow: none; color: var(--pd-ink); }
.btn.danger { color: var(--pd-clay-strong); }
.btn.small { padding: 5px 12px; font-size: 13px; }
.new-post { width: 100%; padding: 10px; }
.sidebar .btn.primary { box-shadow: 4px 4px 0 var(--pd-green-deep); }
.icon-btn { width: 36px; height: 36px; border: var(--border); background: var(--pd-paper); border-radius: 50%; font-size: 15px; cursor: pointer; color: var(--pd-green-deep); display: grid; place-items: center; transition: background 0.15s var(--pd-ease); }
.icon-btn:hover { background: var(--pd-clay-light); }
.link-btn { border: 0; background: none; color: var(--pd-clay-strong); cursor: pointer; padding: 0; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Forms ---- */
input, textarea, select {
  font: inherit; color: inherit; width: 100%;
  border: var(--border); border-radius: 12px; padding: 9px 12px; background: #fff;
  transition: border-color 0.15s var(--pd-ease), box-shadow 0.15s var(--pd-ease);
}
input::placeholder, textarea::placeholder { color: #8a948f; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--pd-clay-strong); box-shadow: 0 0 0 3px var(--pd-clay-glow); }
textarea { resize: vertical; line-height: 1.6; }
input[type='checkbox'] { width: auto; accent-color: var(--pd-clay-strong); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled { opacity: 0.7; }
.search { width: 280px; border-radius: 999px; padding-left: 16px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.gap { flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.inline { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--pd-ink-soft); margin-top: 6px; cursor: pointer; }

.tabs { display: inline-flex; background: var(--pd-paper); border: var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.tabs button { font: inherit; font-size: 14px; font-weight: 600; border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; cursor: pointer; color: var(--pd-ink-soft); transition: background 0.2s var(--pd-ease); }
.tabs button:hover { color: var(--pd-green-deep); }
.tabs button.on { background: var(--pd-green-deep); color: #fff; }
.tabs.filters { margin-bottom: 18px; flex-wrap: wrap; }

/* Status pills: scheduled = sage, in progress = clay light, needs action = clay */
.status { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1.5px solid var(--pd-green-deep); background: var(--pd-paper); color: var(--pd-ink-soft); white-space: nowrap; line-height: 1.4; }
.status.draft { border-style: dashed; }
.status.approved { background: var(--pd-sage-light); color: var(--pd-green-deep); }
.status.publishing { background: var(--pd-clay-light); color: var(--pd-green-deep); }
.status.published { background: var(--pd-green-deep); color: #fff; }
.status.partial { background: var(--pd-clay-light); color: var(--pd-clay-hover); }
.status.failed { background: var(--pd-clay-strong); color: #fff; }
.pchip { display: inline-block; font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1.5px solid var(--pd-green-deep); color: var(--pd-green-deep); margin-left: 3px; line-height: 1.5; }
.pchip.instagram { background: var(--pd-clay-light); }
.pchip.facebook { background: var(--pd-sage-light); }
.pchip.story { background: var(--pd-paper); border-style: dashed; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar .btn { height: 38px; min-width: 38px; display: inline-grid; place-items: center; }
.panel { background: var(--pd-paper); border: var(--border); border-radius: 22px; padding: 22px 24px; margin-bottom: 22px; box-shadow: 6px 6px 0 var(--pd-green-deep); }
.panel:nth-of-type(2n) { box-shadow: 6px 6px 0 var(--pd-sage); }

/* Empty / welcome states may use the decorative circles */
.empty-state { position: relative; overflow: hidden; text-align: center; padding: 70px 20px; color: var(--pd-ink-soft); display: grid; gap: 16px; justify-items: center; background: var(--pd-paper); border: var(--border); border-radius: 22px; box-shadow: 6px 6px 0 var(--pd-green-deep); }
.empty-state::before, .empty-state::after { content: ''; position: absolute; border-radius: 50%; z-index: 0; }
.empty-state::before { width: 220px; height: 220px; background: var(--pd-clay-light); opacity: 0.55; top: -90px; right: -60px; }
.empty-state::after { width: 160px; height: 160px; background: var(--pd-sage-light); opacity: 0.6; bottom: -70px; left: -40px; }
.empty-state > * { position: relative; z-index: 1; }
.empty-state p { font-family: var(--serif); font-size: 20px; color: var(--pd-ink); }

/* ---- Toasts ---- */
.toasts { position: fixed; bottom: 20px; right: 20px; display: grid; gap: 10px; z-index: 1000; }
.toast { background: var(--pd-green-deep); color: #fff; padding: 11px 18px; border-radius: 16px; border: var(--border); box-shadow: 4px 4px 0 var(--pd-sage); max-width: 400px; font-weight: 500; transition: opacity 0.3s var(--pd-ease), transform 0.3s var(--pd-ease); animation: rise 0.3s var(--pd-ease); }
.toast.ok { background: var(--pd-green-deep); }
.toast.warn { background: var(--pd-clay-light); color: var(--pd-green-deep); box-shadow: 4px 4px 0 var(--pd-green-deep); }
.toast.error { background: var(--pd-clay-strong); box-shadow: 4px 4px 0 var(--pd-green-deep); }
.toast.out { opacity: 0; transform: translateY(8px); }

/* ---- Thumbnails ---- */
.thumb { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: var(--pd-mist); flex: none; border: 1.5px solid var(--pd-green-deep); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.empty { display: grid; place-items: center; color: var(--pd-ink-soft); font-family: var(--serif); font-size: 18px; }
.thumb.sm { width: 46px; height: 46px; }
.thumb .play, .tile .play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); font-size: 16px; pointer-events: none; }
.thumb .count { position: absolute; top: 4px; right: 4px; background: var(--pd-paper); color: var(--pd-green-deep); border: 1.5px solid var(--pd-green-deep); font-style: normal; font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 999px; }

/* ---- Calendar ---- */
.cal-layout { display: grid; grid-template-columns: 1fr 240px; gap: 22px; align-items: start; }
.cal { min-width: 0; }
.cal .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.cal.month .grid { gap: 6px; }
.dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; color: var(--pd-ink-soft); font-size: 12px; font-weight: 600; padding: 0 8px; }
.day { background: var(--pd-paper); border: var(--border); border-radius: 16px; min-height: 440px; padding: 10px 8px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-s); transition: background 0.2s var(--pd-ease); }
.cal.month .day { min-height: 116px; padding: 6px; gap: 5px; border-radius: 12px; box-shadow: none; }
.day.past { background: transparent; box-shadow: none; border-color: var(--pd-line); }
.day.outside { opacity: 0.4; }
.day.today { box-shadow: 4px 4px 0 var(--pd-clay-strong); }
.cal.month .day.today { box-shadow: 3px 3px 0 var(--pd-clay-strong); }
.day.drop { background: var(--pd-clay-light); }
.day-head { display: flex; justify-content: space-between; align-items: center; color: var(--pd-ink-soft); font-size: 12px; font-weight: 600; padding: 0 2px; }
.day-head b { font-family: var(--serif); font-weight: 400; color: var(--pd-ink); font-size: 20px; margin-left: 3px; }
.day.today .day-head b { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 4px; border-radius: 50%; background: var(--pd-clay-strong); color: #fff; font-size: 17px; }
.cal.month .day.today .day-head b { min-width: 24px; height: 24px; font-size: 14px; }
.day-head .add { width: 26px; height: 26px; border: 1.5px solid var(--pd-green-deep); background: var(--pd-paper); color: var(--pd-green-deep); font-size: 16px; line-height: 1; cursor: pointer; border-radius: 50%; padding: 0; opacity: 0; transition: opacity 0.15s var(--pd-ease), background 0.15s var(--pd-ease); }
.day:hover .add, .day-head .add:focus-visible { opacity: 1; }
.day-head .add:hover { background: var(--pd-clay-light); }
.day-cards { display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* Post cards: dashed = draft (not glued down yet), solid with shadow = scheduled */
.card {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; width: 100%;
  background: #fff; border: var(--border); border-radius: 12px; padding: 7px; cursor: pointer; font-size: 12px;
  box-shadow: var(--shadow-s); transition: transform 0.15s var(--pd-ease), box-shadow 0.15s var(--pd-ease);
}
.card:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--pd-green-deep); }
.card:focus-visible { outline: 3px solid var(--pd-clay-glow); outline-offset: 3px; }
.card.draft { border-style: dashed; box-shadow: none; background: var(--pd-paper); }
.card.draft:hover { box-shadow: 3px 3px 0 var(--pd-sage); }
.card.published, .card.partial { background: var(--pd-mist); box-shadow: 3px 3px 0 var(--pd-sage); }
.card.publishing { box-shadow: 3px 3px 0 var(--pd-clay-light); }
.card.failed { border-color: var(--pd-clay-strong); box-shadow: 3px 3px 0 var(--pd-clay-strong); }
.card.dragging { opacity: 0.4; }
.card[draggable='true'] { cursor: grab; }
.card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-top { display: flex; align-items: center; gap: 1px; }
.card-top b { margin-right: auto; font-weight: 700; color: var(--pd-green-deep); }
.card-title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; color: var(--pd-ink); }
.card .status { align-self: flex-start; font-size: 11px; padding: 0 7px; }
.cal.month .card { padding: 3px 6px; gap: 0; font-size: 11px; border-radius: 8px; box-shadow: none; border-width: 1.5px; }
.cal.month .card:hover { transform: none; }
.cal.month .card-title { -webkit-line-clamp: 1; }
.drafts { background: var(--pd-paper); border: var(--border); border-radius: 20px; padding: 18px 16px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; box-shadow: 5px 5px 0 var(--pd-sage); }
.drafts h3 { font-size: 19px; margin-bottom: 4px; }
.draft-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.draft-list .card { flex-direction: row; align-items: center; }
.draft-list .card .thumb { width: 46px; }

/* ---- Tables ---- */
.table-wrap { overflow-x: auto; background: var(--pd-paper); border: var(--border); border-radius: 18px; box-shadow: 4px 4px 0 var(--pd-green-deep); }
table.list { width: 100%; border-collapse: collapse; }
.list th { text-align: left; font-size: 12px; color: var(--pd-ink-soft); font-weight: 600; padding: 11px 14px; background: var(--pd-mist); border-bottom: var(--border); }
.list td { padding: 11px 14px; border-bottom: 1.5px dashed var(--pd-line); vertical-align: middle; }
.list tr:last-child td { border-bottom: 0; }
.list tbody tr[data-open] { cursor: pointer; transition: background 0.15s var(--pd-ease); }
.list tbody tr[data-open]:hover { background: #fff; }
.list td small { display: block; max-width: 520px; }
.list td:nth-child(2) { min-width: 220px; }
.list.log td { padding: 8px 14px; font-size: 14px; }
.list.log td:last-child { min-width: 240px; }
.list.log tr.error td:last-child { color: var(--pd-clay-strong); }
.list.log tr.warn td:last-child { color: var(--pd-clay-hover); }

/* ---- Library ---- */
.import summary { cursor: pointer; font-family: var(--serif); font-size: 20px; list-style: none; display: flex; align-items: center; gap: 12px; }
.import summary::-webkit-details-marker { display: none; }
.import summary::after { content: '↓'; margin-left: auto; width: 32px; height: 32px; border: var(--border); border-radius: 50%; display: grid; place-items: center; font-family: var(--sans); font-size: 15px; transition: transform 0.25s var(--pd-ease), background 0.25s var(--pd-ease); }
.import[open] summary::after { transform: rotate(180deg); background: var(--pd-clay-strong); color: #fff; }
.import summary b { font-weight: 400; }
.import-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin-top: 18px; }
.import-grid form { display: grid; gap: 8px; align-content: start; }
.import-grid h4 { margin: 0; font-size: 14px; }
.import-progress { margin-top: 12px; min-height: 1em; }
.lib-tools { margin-bottom: 16px; }
.articles { list-style: none; margin: 0; padding: 4px 0; background: var(--pd-paper); border: var(--border); border-radius: 22px; box-shadow: 6px 6px 0 var(--pd-green-deep); counter-reset: art; }
.article { display: flex; gap: 16px; padding: 16px 22px; border-bottom: 1.5px dashed var(--pd-line); cursor: pointer; transition: background 0.15s var(--pd-ease); counter-increment: art; }
.article::before { content: counter(art, decimal-leading-zero); color: var(--pd-clay-strong); font-weight: 700; font-size: 13px; padding-top: 3px; min-width: 22px; }
.article:last-child { border-bottom: 0; }
.article:hover { background: #fff; }
.article-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.article-main b { font-family: var(--serif); font-weight: 400; font-size: 18px; line-height: 1.2; }
.article-main p { color: var(--pd-ink-soft); font-size: 14px; }
.article-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.used { font-size: 12px; font-weight: 600; color: #fff; background: var(--pd-green-deep); padding: 1px 9px; border-radius: 999px; border: 1.5px solid var(--pd-green-deep); }
.unused { font-size: 12px; font-weight: 600; color: var(--pd-green-deep); background: var(--pd-clay-light); padding: 1px 9px; border-radius: 999px; border: 1.5px solid var(--pd-green-deep); }
.angles { font-size: 12px; font-weight: 600; color: var(--pd-green-deep); background: var(--pd-sage-light); padding: 1px 9px; border-radius: 999px; border: 1.5px solid var(--pd-green-deep); }
.angles.none { background: transparent; border-style: dashed; color: var(--pd-ink-soft); }
.angles-list { list-style: none; padding: 0; margin: 0 0 12px; border: var(--border); border-radius: 16px; background: #fff; }
.angles-list li { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1.5px dashed var(--pd-line); counter-increment: ang; }
.angles-list li::before { content: counter(ang, decimal-leading-zero); color: var(--pd-clay-strong); font-weight: 700; font-size: 12px; min-width: 20px; }
.angles-list li:last-child { border-bottom: 0; }
.angles-list { counter-reset: ang; }
.angle-main { flex: 1; display: grid; gap: 2px; min-width: 0; }
.angle-main small.kw { color: var(--pd-clay-hover); font-size: 12px; }
.icon-btn.sm { width: 28px; height: 28px; font-size: 12px; border-width: 1.5px; }
.angle-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 8px; }
.angle-form input { padding: 7px 10px; font-size: 14px; }
@media (max-width: 760px) { .angle-form { grid-template-columns: 1fr; } .angles-list li { flex-wrap: wrap; } }
.article-text { line-height: 1.65; font-size: 15px; background: #fff; border: 1.5px solid var(--pd-line); border-radius: 14px; padding: 16px 18px; max-height: 55vh; overflow: auto; }
.mini { padding-left: 18px; margin: 0; display: grid; gap: 6px; }

/* ---- Reports ---- */
.report-note { margin-bottom: 18px; }
.report-note code { font-size: 13px; background: rgba(255, 255, 255, 0.6); padding: 1px 5px; border-radius: 6px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--pd-paper); border: var(--border); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow-s); display: grid; gap: 4px; }
.kpi span { font-size: 13px; font-weight: 600; color: var(--pd-ink-soft); }
.kpi b { font-family: var(--serif); font-weight: 400; font-size: 32px; color: var(--pd-ink); line-height: 1.1; }
.big-number { font-family: var(--serif); font-size: 44px; color: var(--pd-ink); }
.chart h3 small { font-family: var(--sans); font-size: 13px; font-weight: 500; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 22px; }
.metric-pick { margin: 4px 0 14px; }
.metric-pick label { font-weight: 600; font-size: 14px; color: var(--pd-green-deep); display: inline-flex; gap: 10px; align-items: center; }
.metric-pick select { width: auto; border-radius: 999px; padding: 6px 14px; }
.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 90px; gap: 10px; align-items: center; padding: 2px 0; }
.bar-row:hover .bar-fill { background: var(--pd-clay-hover); }
.bar-label { font-size: 13px; font-weight: 600; color: var(--pd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-label small { font-weight: 400; color: var(--pd-ink-soft); }
.bar-track { height: 14px; background: var(--pd-mist); border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--pd-clay-strong); border-radius: 0 4px 4px 0; transition: background 0.15s var(--pd-ease); }
.bar-value { font-size: 13px; font-weight: 600; color: var(--pd-ink); text-align: right; white-space: nowrap; }
.best { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pd-green-deep); background: var(--pd-sage-light); border: 1.5px solid var(--pd-green-deep); border-radius: 999px; padding: 0 5px; margin-left: 4px; }
svg.line { width: 100%; height: auto; display: block; }
svg.line .grid { stroke: var(--pd-line); stroke-width: 1; stroke-dasharray: 3 4; }
svg.line .axis { font-size: 11px; fill: var(--pd-ink-soft); font-family: var(--sans); }
svg.line .series { fill: none; stroke: var(--pd-clay-strong); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
svg.line .hit { fill: transparent; cursor: default; }
svg.line .hit:hover { fill: rgba(166, 92, 68, 0.15); }
svg.line .end { fill: var(--pd-clay-strong); stroke: var(--pd-paper); stroke-width: 2; }
.section-title { margin: 8px 0 12px; }
.section-title small { font-family: var(--sans); font-size: 13px; }
.th-sort { border: 0; background: none; font: inherit; font-weight: 600; color: var(--pd-ink-soft); cursor: pointer; padding: 0; white-space: nowrap; }
.th-sort.on { color: var(--pd-clay-strong); text-decoration: underline; text-underline-offset: 3px; }
.report-table td { font-size: 14px; }
.report-table .post-cell { min-width: 260px; max-width: 420px; }
.report-table .post-cell .status { margin-left: 6px; }
.tooltip { position: fixed; z-index: 1100; pointer-events: none; background: var(--pd-green-deep); color: #fff; font-size: 13px; font-weight: 500; padding: 6px 10px; border-radius: 8px; box-shadow: 3px 3px 0 var(--pd-sage); max-width: 320px; }
@media (max-width: 760px) { .bar-row { grid-template-columns: 110px 1fr 70px; } .chart-grid { grid-template-columns: 1fr; } }

/* ---- Settings ---- */
.conns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.conn { border: var(--border); border-radius: 16px; padding: 14px 16px; display: grid; gap: 8px; background: #fff; }
.conn b { font-family: var(--serif); font-weight: 400; font-size: 18px; }
.settings-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }

/* ---- Dialogs (editor, article drawer) ---- */
dialog { border: var(--border); padding: 0; border-radius: 24px; box-shadow: var(--shadow-l); color: var(--pd-ink); background: var(--pd-paper); overflow: hidden; }
dialog[open] { animation: rise 0.3s var(--pd-ease); }
dialog::backdrop { background: rgba(44, 54, 52, 0.5); }
dialog.editor { width: min(1180px, calc(100vw - 48px)); height: min(860px, calc(100vh - 48px)); }
.ed-wrap { display: flex; flex-direction: column; height: 100%; }
.ed-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: var(--border); background: var(--pd-paper); }
.ed-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 410px; min-height: 0; }
.ed-form { overflow: auto; padding: 22px; display: grid; gap: 18px; align-content: start; }
.ed-form fieldset { display: grid; gap: 18px; }
.ed-side { background: var(--pd-mist); border-left: var(--border); overflow: auto; padding: 18px; display: grid; gap: 16px; align-content: start; }
.ed-foot { display: flex; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: var(--border); flex-wrap: wrap; background: var(--pd-paper); }
.ed-foot .left, .ed-foot .right { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.field { display: grid; gap: 7px; }
.field > span { font-weight: 600; font-size: 14px; color: var(--pd-green-deep); }
.field > span small { font-weight: 400; color: var(--pd-ink-soft); }
.field.sub { padding-left: 14px; border-left: 3px solid var(--pd-clay-light); }
.counter { float: right; }
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.seg button { font: inherit; border: var(--border); background: #fff; border-radius: 14px; padding: 9px 11px; cursor: pointer; text-align: left; display: grid; gap: 1px; color: var(--pd-ink); transition: transform 0.15s var(--pd-ease), box-shadow 0.15s var(--pd-ease), background 0.15s var(--pd-ease); }
.seg button b { font-weight: 600; font-size: 14px; }
.seg button small { color: var(--pd-ink-soft); font-size: 12px; }
.seg button:hover { background: var(--pd-paper); }
.seg button.on { background: var(--pd-clay-light); box-shadow: var(--shadow-s); transform: translate(-1px, -1px); }
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 7px; border: var(--border); border-radius: 999px; padding: 6px 14px; cursor: pointer; font-weight: 600; font-size: 14px; background: #fff; color: var(--pd-ink-soft); transition: background 0.15s var(--pd-ease), box-shadow 0.15s var(--pd-ease); }
.chip:has(input:checked) { color: var(--pd-green-deep); box-shadow: var(--shadow-s); }
.chip:has(input:checked).instagram { background: var(--pd-clay-light); }
.chip:has(input:checked).facebook { background: var(--pd-sage-light); }
.chip.story { border-style: dashed; }
.chip.story:has(input:checked) { border-style: solid; }
.story-row { display: flex; gap: 16px; align-items: flex-start; }
.story-thumb { width: 90px; aspect-ratio: 9 / 16; border: var(--border); border-radius: 12px; overflow: hidden; background: var(--pd-mist); display: grid; place-items: center; flex: none; box-shadow: var(--shadow-s); }
.story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-thumb span { font-size: 11px; color: var(--pd-ink-soft); text-align: center; padding: 6px; }
.story-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.story-actions small { flex-basis: 100%; }
.story-frame { width: 100%; max-width: 270px; aspect-ratio: 9 / 16; border: 2px solid var(--pd-green-deep); border-radius: 16px; overflow: hidden; box-shadow: 5px 5px 0 var(--pd-green-deep); background: #000; }
.story-frame img, .story-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-frame .pv-empty { height: 100%; }
.linked { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.banner { border-radius: 16px; padding: 12px 16px; font-size: 14px; display: grid; gap: 6px; border: var(--border); }
.banner.info { background: var(--pd-sage-light); }
.banner.ok { background: var(--pd-sage-light); }
.banner.bad { background: var(--pd-clay-light); }
.results { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.tstatus { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pd-ink-soft); margin: 0 6px; }

.media-area { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.tile { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--pd-mist); border: var(--border); box-shadow: var(--shadow-s); }
.tile:nth-child(2n) { box-shadow: 3px 3px 0 var(--pd-clay-strong); }
.tile:nth-child(3n) { box-shadow: 3px 3px 0 var(--pd-sage); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .noimg { display: grid; place-items: center; height: 100%; color: var(--pd-ink-soft); }
.tile .pos { position: absolute; top: 5px; left: 5px; background: var(--pd-paper); color: var(--pd-clay-strong); border: 1.5px solid var(--pd-green-deep); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 0 6px; }
.tile .pos:empty { display: none; }
.tile .meta { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(44, 54, 52, 0.7)); color: #fff; font-size: 10px; padding: 12px 6px 4px; }
.tile-actions { position: absolute; top: 5px; right: 5px; display: flex; gap: 3px; opacity: 0; transition: opacity 0.15s var(--pd-ease); }
.tile:hover .tile-actions, .tile:focus-within .tile-actions { opacity: 1; }
.tile-actions button { border: 1.5px solid var(--pd-green-deep); background: var(--pd-paper); color: var(--pd-green-deep); border-radius: 50%; cursor: pointer; width: 24px; height: 24px; font-size: 12px; padding: 0; display: grid; place-items: center; }
.tile-actions button:hover { background: var(--pd-clay-light); }
.tile.add { all: unset; box-sizing: border-box; aspect-ratio: 1; border: 2px dashed var(--pd-green-deep); border-radius: 14px; display: grid; place-content: center; text-align: center; cursor: pointer; color: var(--pd-green-deep); gap: 2px; background: #fff; transition: background 0.15s var(--pd-ease); }
.tile.add b { font-size: 24px; font-weight: 400; font-family: var(--serif); }
.tile.add small { font-size: 12px; font-weight: 600; }
.tile.add:hover, .tile.add.over { background: var(--pd-clay-light); }
.tile.add.alt { background: var(--pd-paper); }
.tile.add.alt:hover { background: var(--pd-sage-light); }
.tile.uploading { display: grid; align-content: center; gap: 7px; padding: 12px; box-shadow: none; }
.tile.uploading small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pd-ink-soft); }
.bar { height: 8px; background: #fff; border: 1.5px solid var(--pd-green-deep); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--pd-clay-strong); transition: width 0.2s var(--pd-ease); }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; padding: 10px; background: var(--pd-mist); border: 1.5px dashed var(--pd-line); border-radius: 14px; max-height: 230px; overflow: auto; }
.picker-grid button { position: relative; aspect-ratio: 1; border: 1.5px solid var(--pd-green-deep); border-radius: 10px; overflow: hidden; padding: 0; cursor: pointer; background: #fff; transition: transform 0.15s var(--pd-ease), box-shadow 0.15s var(--pd-ease); }
.picker-grid button:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-s); }
.picker-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.picker-grid i.play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-style: normal; }

.alt-list details { margin-top: 4px; }
.alt-list summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--pd-green-deep); padding: 4px 0; }
.alt-list summary small { font-weight: 400; color: var(--pd-ink-soft); }
.alt-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
.alt-row span { font-weight: 700; font-size: 12px; color: var(--pd-clay-strong); min-width: 18px; }
.alt-row input { padding: 7px 10px; font-size: 14px; }

.checks { background: var(--pd-paper); border: var(--border); border-radius: 16px; padding: 14px 16px; }
.checks:empty { display: none; }
.checks h4 { margin-top: 0; }
.checks ul { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; counter-reset: chk; }
.checks li { display: flex; gap: 8px; counter-increment: chk; }
.checks li::before { content: counter(chk, decimal-leading-zero); font-weight: 700; font-size: 12px; padding-top: 2px; }
.errs li { color: var(--pd-ink); }
.errs li::before { color: var(--pd-clay-strong); }
.warns li { color: var(--pd-ink-soft); }
.warns li::before { color: var(--pd-sage); }
.ok-line { color: var(--pd-green-deep); font-weight: 600; margin-bottom: 8px; }

dialog.drawer { width: min(780px, calc(100vw - 48px)); max-height: calc(100vh - 48px); }
.drawer-body { padding: 18px 22px; overflow: auto; max-height: calc(100vh - 200px); }

/* ---- Previews: these imitate the real platforms, so they keep their native look ---- */
.pv { display: grid; justify-items: center; }
.pv-note { padding: 30px 16px; text-align: center; color: var(--pd-ink-soft); background: var(--pd-paper); border: 1.5px dashed var(--pd-green-deep); border-radius: 16px; width: 100%; }
.pv-empty { width: 100%; display: grid; place-items: center; background: #e7e9e6; color: var(--pd-ink-soft); font-size: 13px; }
.pv-frame { width: 100%; background: #000; overflow: hidden; position: relative; }
.pv-frame img, .pv-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--pd-green); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.tag { color: #00376b; }
.more { border: 0; background: none; color: #8e8e8e; padding: 0; cursor: pointer; font: inherit; }

.ig, .fb { box-shadow: 5px 5px 0 var(--pd-green-deep); }
.ig { width: 100%; max-width: 360px; background: #fff; border: 2px solid var(--pd-green-deep); border-radius: 14px; overflow: hidden; font-size: 13px; color: #000; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.4; }
.ig-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.ig-head .avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #d62976; width: 28px; height: 28px; font-size: 12px; }
.dots3 { margin-left: auto; letter-spacing: -1px; }
.ig-actions { display: flex; gap: 14px; padding: 9px 11px 4px; }
.ig-actions svg, .fb-actions svg { width: 22px; height: 22px; fill: none; stroke: #000; stroke-width: 1.8; stroke-linejoin: round; }
.ig-caption, .ig-comment { padding: 3px 11px; line-height: 1.4; word-wrap: break-word; }
.ig-comment { color: #333; }
.ig-time { padding: 4px 11px 11px; color: #8e8e8e; font-size: 10px; text-transform: uppercase; }
.slider .track { display: flex; height: 100%; transition: transform 0.3s var(--pd-ease); }
.slider .slide { flex: 0 0 100%; height: 100%; }
.slider .slide img, .slider .slide video { width: 100%; height: 100%; object-fit: cover; }
.slider .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.85); cursor: pointer; font-size: 17px; line-height: 1; padding: 0; display: grid; place-items: center; }
.slider .prev { left: 8px; }
.slider .next { right: 8px; }
.slider .counter { position: absolute; top: 10px; right: 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 99px; }
.dots { display: flex; justify-content: center; gap: 4px; padding-top: 8px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #c7c7c7; }
.dots i.on { background: #0095f6; }
.ig.reel { border: 0; background: transparent; box-shadow: none; }
.reel-frame { position: relative; aspect-ratio: 9 / 16; background: #000; border-radius: 16px; overflow: hidden; width: 100%; max-width: 300px; margin: 0 auto; border: 2px solid var(--pd-green-deep); box-shadow: 6px 6px 0 var(--pd-clay-strong); }
.reel-frame video { width: 100%; height: 100%; object-fit: cover; }
.reel-frame .pv-empty { height: 100%; background: #222; color: #aaa; }
.reel-overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 12px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: #fff; pointer-events: none; }
.reel-overlay .tag, .reel-overlay .more { color: #fff; }
.reel-overlay .more { pointer-events: auto; }
.reel-user { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.reel-user .avatar { width: 26px; height: 26px; }
.reel-caption { font-size: 12px; line-height: 1.35; pointer-events: auto; }

.fb { width: 100%; max-width: 400px; background: #fff; border: 2px solid var(--pd-green-deep); border-radius: 14px; overflow: hidden; color: #050505; font-size: 14px; font-family: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.35; }
.fb-head { display: flex; gap: 8px; padding: 11px 12px; align-items: center; }
.fb-head .avatar { width: 38px; height: 38px; }
.fb-head small { display: block; color: #65676b; font-size: 12px; }
.fb-text { padding: 0 12px 10px; line-height: 1.4; word-wrap: break-word; }
.fb .tag { color: #216fdb; }
.fb-grid { display: grid; gap: 2px; grid-template-columns: 1fr 1fr; }
.fb-grid .cell { position: relative; aspect-ratio: 1; background: #000; overflow: hidden; }
.fb-grid .cell img, .fb-grid .cell video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-grid.n3 .cell:first-child { grid-column: span 2; aspect-ratio: 2; }
.fb-grid .plus { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 26px; font-weight: 600; }
.fb-link { border-top: 1px solid #dddfe2; }
.fb-link-img { aspect-ratio: 1.91; background: linear-gradient(135deg, var(--pd-sage-light), var(--pd-clay-light)); }
.fb-link-meta { background: #f0f2f5; padding: 9px 12px; display: grid; gap: 2px; }
.fb-link-meta small { color: #65676b; font-size: 12px; }
.fb-actions { display: flex; justify-content: space-around; border-top: 1px solid #dddfe2; margin: 8px 12px 0; padding: 6px 0; color: #65676b; font-weight: 600; font-size: 13px; }
.fb-actions span { display: flex; align-items: center; gap: 5px; }
.fb-actions svg { width: 18px; height: 18px; stroke: #65676b; }

/* ---- Motion: content rises in gently, staggered ---- */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.view > * { animation: rise 0.35s var(--pd-ease) both; }
.view > *:nth-child(2) { animation-delay: 0.04s; }
.view > *:nth-child(3) { animation-delay: 0.08s; }
.view > *:nth-child(4) { animation-delay: 0.12s; }
.view > *:nth-child(n + 5) { animation-delay: 0.16s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:hover, .btn:active, .card:hover, .seg button.on { transform: none !important; }
}

/* ---- Smaller screens ---- */
@media (max-width: 1100px) {
  .cal-layout { grid-template-columns: 1fr; }
  .drafts { position: static; max-height: none; }
  .cal.week { overflow-x: auto; padding: 0 6px 8px 0; }
  .cal.week .grid { grid-template-columns: repeat(7, minmax(130px, 1fr)); }
  .ed-body { grid-template-columns: 1fr; overflow: auto; }
  .ed-form, .ed-side { overflow: visible; }
  .ed-side { border-left: 0; border-top: var(--border); }
}
@media (max-width: 760px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 10px; }
  .brand small { display: none; }
  .nav { flex-direction: row; overflow-x: auto; order: 3; width: 100%; min-width: 0; padding-bottom: 2px; }
  .nav a { white-space: nowrap; }
  .new-post { width: auto; margin-left: auto; }
  .mode-badge { display: none; }
  .view { padding: 20px 16px 48px; }
  h1 { font-size: 26px; }
  .day, .card { min-width: 0; }
  .card { overflow: hidden; }
  .cal.week .grid { grid-template-columns: 1fr; }
  .cal.week { overflow: visible; }
  .day { min-height: 0; }
  .cal.week .day { padding: 10px; }
  .cal.week .day-head .add { opacity: 1; }
  .cal.week .card { flex-direction: row; align-items: center; gap: 10px; }
  .cal.week .card .thumb { width: 56px; }
  .cal.month .day { min-height: 64px; padding: 3px; border-width: 1.5px; border-radius: 9px; }
  .cal.month .card { padding: 1px 3px; }
  .cal.month .card .pchip, .cal.month .card-title { display: none; }
  .cal.month .card-top b { font-size: 10px; }
  .day-head b { font-size: 16px; }
  .dow { padding: 0; font-size: 11px; text-align: center; }
  .seg { grid-template-columns: 1fr 1fr; }
  .conns, .settings-form { grid-template-columns: 1fr; }
  .search { width: 100%; }
  dialog.editor { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; border: 0; box-shadow: none; }
  .article { flex-direction: column; gap: 8px; padding: 14px 16px; }
  .article::before { padding: 0; }
  .article-side { flex-direction: row; align-items: center; justify-content: space-between; }
  .panel { padding: 18px; }
}

/* ---------- Comments and Radar ---------- */
.cmt-note { margin: 10px 0 18px; }
.cmt-post-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.cmt-post-head img, .cmt-thumb-ph { width: 64px; height: 80px; object-fit: cover; border-radius: 12px; border: var(--border); flex: none; background: var(--pd-sage-light); display: grid; place-items: center; font-weight: 700; color: var(--pd-green-deep); }
.cmt-post-head b { display: block; font-family: var(--serif); font-weight: 400; font-size: 20px; line-height: 1.2; }
.cmt { border-top: 2px dashed var(--pd-sage-light); padding: 14px 0 6px; }
.cmt.done { opacity: 0.85; }
.cmt-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cmt-head a { color: var(--pd-green-deep); text-decoration: none; }
.cmt-text { margin: 6px 0 10px; white-space: pre-wrap; }
.reply-box { width: 100%; font: inherit; font-size: 15px; padding: 10px 12px; border: var(--border); border-radius: 12px; background: #fff; resize: vertical; }
.reply-box:focus { outline: none; border-color: var(--pd-clay-strong); box-shadow: 0 0 0 3px var(--pd-clay-light); }
.cmt-actions { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; flex-wrap: wrap; }
.our-reply { background: var(--pd-sage-light); border-radius: 12px; padding: 10px 14px; margin: 6px 0; }
.our-reply p { margin: 4px 0 0; white-space: pre-wrap; }
.btn.primary-soft { background: var(--pd-clay-light); }
.radar-search { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; }
.radar-search label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--pd-ink-soft); }
.radar-search label.inline { display: inline-flex; font-weight: 500; }
.radar-search .grow-field { flex: 1; min-width: 240px; }
.radar-search input:not([type=checkbox]), .radar-search select, .acct-add input { font: inherit; padding: 8px 10px; border: var(--border); border-radius: 10px; background: #fff; }
.radar-search .search-result { flex-basis: 100%; margin: 0; }
.acct-list { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.acct-list li { display: inline-flex; gap: 8px; align-items: center; border: var(--border); border-radius: 999px; padding: 4px 8px 4px 14px; background: #fff; }
.acct-list li.has-error { border-color: var(--pd-clay-strong); }
.acct-list a { color: var(--pd-green-deep); font-weight: 600; text-decoration: none; }
.acct-add { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.acct-add input[name=usernames] { flex: 2; min-width: 220px; }
.acct-add input[name=note] { flex: 1; min-width: 180px; }
.radar-list { display: grid; gap: 0; margin-top: 16px; }
.radar-item { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; }
.radar-pic img, .radar-ph { width: 150px; height: 188px; object-fit: cover; border-radius: 14px; border: var(--border); display: grid; place-items: center; background: var(--pd-sage-light); color: var(--pd-green-deep); font-weight: 700; text-transform: capitalize; }
.radar-caption { margin: 8px 0 12px; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) {
  .radar-item { grid-template-columns: 1fr; }
  .radar-pic img, .radar-ph { width: 100%; height: 220px; }
}

/* ---------- Theme calendar (days and periods) ---------- */
.obs { display: block; width: 100%; text-align: left; font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.25; padding: 3px 7px; margin: 0 0 4px; border-radius: 7px; border: 1.5px solid var(--pd-green-deep); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pd-green-deep); background: var(--pd-sage-light); }
.obs.k-uni { background: var(--pd-clay-light); }
.obs.k-life { background: var(--pd-mist); border-style: dashed; }
.obs.k-care { background: #fff; border-color: var(--pd-clay-strong); color: var(--pd-clay-strong); }
.obs:hover { filter: brightness(0.96); }
.themes-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -8px 0 16px; }
.themes-strip .obs { display: inline-block; width: auto; margin: 0; font-size: 12.5px; }
.themes-toggle { margin: 0 0 0 6px; }
.obs-dialog { border: var(--border); border-radius: 22px; padding: 24px 26px; max-width: 460px; box-shadow: 6px 6px 0 var(--pd-green-deep); background: var(--pd-paper); }
.obs-dialog::backdrop { background: rgba(44, 54, 52, 0.35); }
.obs-dialog .obs { display: inline-block; width: auto; cursor: default; }
.obs-dialog h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; margin: 10px 0 4px; }

/* Followers line chart: a normal size instead of the full page width */
.followers-chart { max-width: 720px; }
.followers-chart svg.line { max-height: 230px; }

/* Published video whose file was removed from R2: cover + note */
.archived-video { position: relative; }
.archived-video img { width: 100%; display: block; }
.archived-video span { position: absolute; left: 10px; right: 10px; bottom: 10px; background: rgba(251,248,244,0.92); border: 2px solid var(--pd-green-deep); border-radius: 10px; padding: 6px 10px; font-size: 12px; line-height: 1.35; color: var(--pd-ink); }

/* ---------- Blog & SEO ---------- */
.seo-tabs { margin-bottom: 20px; flex-wrap: wrap; }
.row.between { justify-content: space-between; align-items: flex-start; gap: 12px; }
.row.wrap { flex-wrap: wrap; }
.kpi small { font-size: 12px; font-weight: 700; }
.kpi small.up { color: var(--pd-green-deep); }
.kpi small.down { color: var(--pd-clay-strong); }
.table-wrap.flat { box-shadow: none; border-width: 1.5px; border-radius: 14px; }
.list.compact td, .list.compact th { padding: 8px 10px; font-size: 13.5px; vertical-align: top; }
.list.compact select { padding: 4px 8px; font-size: 13px; width: auto; border-radius: 8px; }
.list tbody tr[data-blog] { cursor: pointer; }
.list tbody tr[data-blog]:hover { background: #fff; }
.issues { list-style: none; padding: 0; margin: 6px 0 12px; display: grid; gap: 6px; font-size: 14px; }
.issues li { display: flex; gap: 9px; align-items: baseline; }
.issues li > span { flex: none; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 700; border: 1.5px solid var(--pd-green-deep); }
.issues li.error > span { background: var(--pd-clay-strong); color: #fff; border-color: var(--pd-clay-strong); }
.issues li.warn > span { background: var(--pd-clay-light); color: var(--pd-green-deep); }
.issues li.info > span { background: #fff; color: var(--pd-ink-soft); border-style: dashed; font-style: italic; }
.issues li.ok > span { background: var(--pd-sage-light); color: var(--pd-green-deep); }
.issues li.ok { color: var(--pd-ink-soft); }
.badge { display: inline-block; min-width: 22px; text-align: center; font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; border: 1.5px solid var(--pd-green-deep); margin-right: 4px; }
.badge.err { background: var(--pd-clay-strong); color: #fff; border-color: var(--pd-clay-strong); }
.badge.warn { background: var(--pd-clay-light); color: var(--pd-green-deep); }
.badge.info { background: #fff; color: var(--pd-ink-soft); border-style: dashed; }
.banner + .banner, .banner { margin-bottom: 14px; }
.setup-card ol { margin: 12px 0 0; }
.setup-card code, .seo-body code { font-size: 12.5px; background: var(--pd-mist); padding: 1px 6px; border-radius: 6px; }
.todo-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.cluster-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cluster-chip { font: inherit; font-size: 13px; border: var(--border); background: #fff; border-radius: 999px; padding: 5px 12px; cursor: pointer; color: var(--pd-ink-soft); }
.cluster-chip b { color: var(--pd-green-deep); font-weight: 600; }
.cluster-chip:hover { background: var(--pd-clay-light); }
.serp-mini b { display: block; font-weight: 600; font-size: 13px; color: #1a0dab; }
.serp-mini small { display: block; color: var(--pd-ink-soft); max-width: 380px; }
.research-form { display: flex; gap: 10px; flex-wrap: wrap; }
.research-form input { flex: 1; min-width: 260px; }
.research-form select { width: auto; }
.research-results { margin-top: 14px; }
.research-results .table-wrap { max-height: 420px; overflow: auto; }
.q { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--pd-sage-light); font-size: 10px; font-weight: 700; color: var(--pd-green-deep); }
.kw-tools { margin: 10px 0 14px; }
.kw-tools select { width: auto; }
.kw-tools .search { width: 100%; max-width: 260px; }
.map-table td:first-child { min-width: 260px; }
dialog.seo-drawer { width: min(860px, calc(100vw - 32px)); }
.serp-preview { background: #fff; border: 1.5px solid var(--pd-line); border-radius: 12px; padding: 12px 14px; font-family: Arial, sans-serif; display: grid; gap: 3px; }
.serp-preview .serp-url { font-size: 12px; color: #4d5156; }
.serp-preview b { font-size: 18px; font-weight: 400; color: #1a0dab; line-height: 1.3; }
.serp-preview p { font-size: 13px; color: #4d5156; line-height: 1.45; }
.outline { list-style: none; padding: 0; margin: 6px 0 10px; font-size: 13.5px; display: grid; gap: 3px; }
.outline .l2 { font-weight: 600; }
.outline .l3 { padding-left: 16px; color: var(--pd-ink-soft); }
.outline .l4 { padding-left: 32px; color: var(--pd-ink-soft); font-size: 12.5px; }
.link-group { border-top: 2px dashed var(--pd-sage-light); padding-top: 12px; margin-top: 12px; }
.link-group h4 { margin: 0 0 6px; font-size: 15px; }
.link-sug { padding: 8px 0; }
.link-sug .snippet { font-size: 14px; color: var(--pd-ink-soft); background: #fff; border-radius: 10px; padding: 8px 12px; border: 1.5px solid var(--pd-line); }
.link-sug mark { background: var(--pd-clay-light); color: var(--pd-ink); padding: 0 2px; border-radius: 3px; font-weight: 600; }
.mini.cols { columns: 2 320px; column-gap: 28px; }
.mini.cols li { break-inside: avoid; margin-bottom: 6px; }
.mini li.err { color: var(--pd-clay-strong); }
.issue-group { border-top: 1.5px dashed var(--pd-line); padding: 10px 0; }
.issue-group summary { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.issue-group ul { margin-top: 10px; }
.w-board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; }
.w-col { background: var(--pd-paper); border: var(--border); border-radius: 18px; padding: 12px; display: grid; gap: 8px; box-shadow: var(--shadow-s); }
.w-col h4 { margin: 0; font-size: 15px; }
.w-card { all: unset; box-sizing: border-box; display: grid; gap: 3px; background: #fff; border: var(--border); border-radius: 12px; padding: 9px 10px; cursor: pointer; font-size: 13px; }
.w-card:hover { box-shadow: var(--shadow-s); transform: translate(-1px, -1px); }
.w-card b { font-weight: 600; line-height: 1.3; }
.w-card.update { border-style: dashed; }
.w-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pd-clay-strong); }
@media (max-width: 1100px) { .w-board { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .w-board { grid-template-columns: 1fr; } }
dialog.seo-editor .ed-title { font-family: var(--serif); font-weight: 400; font-size: 20px; margin-right: 10px; }
.md-input { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 14px; line-height: 1.6; min-height: 420px; }
.md-preview { background: #fff; border: 1.5px solid var(--pd-line); border-radius: 14px; padding: 22px 26px; line-height: 1.7; max-width: 760px; }
.md-preview h1 { font-size: 30px; margin-bottom: 14px; }
.md-preview h2 { font-size: 23px; margin: 26px 0 8px; }
.md-preview h3 { font-size: 18px; margin: 18px 0 6px; }
.md-preview p, .md-preview ul, .md-preview ol, .md-preview blockquote { margin: 0 0 12px; }
.md-preview blockquote { border-left: 4px solid var(--pd-clay-light); padding-left: 14px; color: var(--pd-ink-soft); }
.score { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.score b { font-family: var(--serif); font-weight: 400; font-size: 34px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: var(--border); }
.score.good b { background: var(--pd-sage-light); }
.score.mid b { background: var(--pd-clay-light); }
.score.bad b { background: var(--pd-clay-strong); color: #fff; }
.score span { font-weight: 600; font-size: 14px; }
.small-chips .chip { font-size: 12.5px; padding: 3px 10px; }
details.comp { border-top: 1.5px dashed var(--pd-line); padding: 6px 0; font-size: 14px; }
details.comp summary { cursor: pointer; }
.pane { display: grid; gap: 12px; }
.pane[hidden] { display: none; }

.bad-text { color: var(--pd-clay-strong); }

/* ---- Instagram music picker (reels) ---- */
.music-current { display: flex; align-items: center; gap: 10px; background: #fff; border: var(--border); border-radius: 14px; padding: 8px 10px; margin-bottom: 6px; }
.music-meta { flex: 1; min-width: 0; display: grid; gap: 1px; }
.music-meta b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-meta small { color: var(--pd-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: var(--border); background: var(--pd-clay-light); color: var(--pd-green-deep); font-size: 13px; cursor: pointer; display: grid; place-items: center; text-decoration: none; line-height: 1; }
.music-play:hover, .music-play.on { background: var(--pd-clay-glow); }
.music-play.off { background: var(--pd-mist); cursor: default; }
.music-picker:not(:empty) { margin-top: 10px; background: var(--pd-mist); border: var(--border); border-radius: 16px; padding: 12px; }
.music-search { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.music-search input { flex: 1; min-width: 180px; }
.music-search select { width: auto; }
.music-list { list-style: none; margin: 0; padding: 0; max-height: 330px; overflow: auto; display: grid; gap: 6px; }
.music-list li { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--pd-sage-light); border-radius: 12px; padding: 6px 8px; }
.music-picker h5 { margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--pd-green-deep); }
.music-picker h5:first-child { margin-top: 0; }
.music-picker h5 small { font-weight: 400; color: var(--pd-ink-soft); }
.music-list.short { max-height: none; overflow: visible; }
.music-list.short li { border-color: var(--pd-clay-light); }
.music-tag { flex: none; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--pd-mist); color: var(--pd-ink-soft); white-space: nowrap; }