/* ── Variables ── */
:root {
  --bg:      #f6f4ef;
  --bg2:     #edeae2;
  --bg3:     #e3dfd6;
  --surf:    #ffffff;
  --border:  #d6d1c6;
  --border2: #c2bbae;
  --ink:     #1a1814;
  --ink2:    #48433a;
  --ink3:    #8a8278;
  --red:     #c0392b;
  --orange:  #d35400;
  --green:   #1a7a3e;
  --blue:    #1a4f7a;
  --teal:    #167a6a;
  --gold:    #8a6200;
  --radius:  3px;
  --shadow:  0 1px 3px rgba(0,0,0,0.07);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--bg);
  color: var(--ink2);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
}

/* ── Nav ── */
.nav {
  position: sticky; top:0; z-index:100;
  background: rgba(246,244,239,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  height: 52px;
  display: flex; align-items: center;
  padding: 0 24px; gap: 0;
}

.nav-logo {
  font-family: 'Instrument Serif', serif;
  font-size: 19px; font-style: italic;
  color: var(--ink); text-decoration: none;
  padding-right: 20px; margin-right: 12px;
  border-right: 1px solid var(--border);
  white-space: nowrap; letter-spacing: -.01em;
}
.nav-logo span { color: var(--red); font-style: normal; }

.nav-links { display:flex; gap:0; flex:1; }

.nav-link {
  color: var(--ink3); text-decoration: none;
  font-size: 11px; letter-spacing:.1em; text-transform:uppercase;
  padding: 0 16px; height: 52px;
  display: flex; align-items: center;
  border-right: 1px solid var(--border);
  transition: color .15s;
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--red); }

.nav-actions { margin-left:auto; }

.btn-run {
  background: var(--ink); color: #f6f4ef;
  border: none; padding: 8px 16px;
  font-family: 'DM Mono', monospace; font-size: 12px;
  cursor: pointer; display:flex; align-items:center; gap:6px;
  transition: background .2s;
}
.btn-run:hover { background: var(--red); }
.btn-run:disabled { opacity:.5; cursor:not-allowed; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Page layout ── */
.page-content { max-width: 1100px; margin: 0 auto; padding: 32px 24px 80px; }

.page-header {
  display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 28px;
  padding-bottom: 20px; border-bottom: 1px solid var(--border);
}

.page-header h1 {
  font-family: 'Instrument Serif', serif;
  font-size: 28px; font-weight: 400;
  color: var(--ink); letter-spacing: -.02em; margin-bottom: 4px;
}

.page-sub { font-size: 12px; color: var(--ink3); }
.breadcrumb { font-size: 11px; color: var(--ink3); margin-bottom: 6px; }
.breadcrumb a { color: var(--ink3); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

.header-actions { display:flex; gap:8px; align-items:center; }

/* ── Buttons ── */
.btn-secondary {
  background: var(--surf); color: var(--ink2);
  border: 1px solid var(--border); padding: 8px 14px;
  font-family: 'DM Mono', monospace; font-size: 12px;
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap:6px;
  transition: border-color .15s, color .15s;
}
.btn-secondary:hover { border-color: var(--ink2); color: var(--ink); }

.btn-secondary-sm {
  background: var(--surf); color: var(--ink3);
  border: 1px solid var(--border); padding: 5px 10px;
  font-family: 'DM Mono', monospace; font-size: 11px;
  cursor: pointer; transition: all .15s;
}
.btn-secondary-sm:hover { border-color: var(--ink2); color: var(--ink); }

.btn-view {
  background: var(--bg2); color: var(--ink2);
  border: 1px solid var(--border); padding: 6px 12px;
  font-size: 11px; text-decoration: none; white-space: nowrap;
  transition: all .15s;
}
.btn-view:hover { background: var(--ink); color: var(--surf); }

.btn-view-sm {
  font-size: 11px; color: var(--blue); text-decoration: none;
  padding: 3px 8px; border: 1px solid rgba(26,79,122,.2);
  background: rgba(26,79,122,.05);
}
.btn-view-sm:hover { background: rgba(26,79,122,.12); }

.btn-publish {
  background: var(--ink); color: #f6f4ef;
  border: none; padding: 7px 14px;
  font-family: 'DM Mono', monospace; font-size: 12px;
  cursor: pointer; transition: background .15s;
}
.btn-publish:hover { background: var(--teal); }

.btn-reject {
  background: rgba(192,57,43,.08); color: var(--red);
  border: 1px solid rgba(192,57,43,.2); padding: 7px 12px;
  font-family: 'DM Mono', monospace; font-size: 12px;
  cursor: pointer; transition: all .15s;
}
.btn-reject:hover { background: rgba(192,57,43,.15); }

.btn-edit {
  background: rgba(26,79,122,.07); color: var(--blue);
  border: 1px solid rgba(26,79,122,.2); padding: 7px 12px;
  font-family: 'DM Mono', monospace; font-size: 12px;
  cursor: pointer; transition: all .15s;
}
.btn-edit:hover { background: rgba(26,79,122,.14); }

.btn-save {
  background: var(--green); color: #fff;
  border: none; padding: 7px 14px;
  font-family: 'DM Mono', monospace; font-size: 12px;
  cursor: pointer;
}

/* ── Badges & pills ── */
.status-pill {
  display: inline-block; font-size: 10px; letter-spacing:.08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 2px;
}
.status-pending       { background: rgba(138,130,120,.1);  color: var(--ink3); border: 1px solid var(--border); }
.status-generated     { background: rgba(26,79,122,.08);   color: var(--blue); border: 1px solid rgba(26,79,122,.2); }
.status-done          { background: rgba(26,122,62,.08);   color: var(--green); border: 1px solid rgba(26,122,62,.2); }
.status-error         { background: rgba(192,57,43,.08);   color: var(--red);  border: 1px solid rgba(192,57,43,.2); }
.status-pending_review { background: rgba(211,84,0,.07);   color: var(--orange); border: 1px solid rgba(211,84,0,.2); }
.status-approved      { background: rgba(22,122,106,.08);  color: var(--teal); border: 1px solid rgba(22,122,106,.2); }
.status-rejected      { background: rgba(192,57,43,.07);   color: var(--red);  border: 1px solid rgba(192,57,43,.15); }
.status-posted        { background: rgba(26,122,62,.08);   color: var(--green); border: 1px solid rgba(26,122,62,.2); }

.source-badge {
  display: inline-block; font-size: 10px; letter-spacing:.08em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 2px;
}
.source-new      { background: rgba(26,122,62,.08);  color: var(--green); border: 1px solid rgba(26,122,62,.2); }
.source-recent   { background: rgba(26,79,122,.07);  color: var(--blue);  border: 1px solid rgba(26,79,122,.2); }
.source-backfill { background: rgba(138,130,120,.1); color: var(--ink3);  border: 1px solid var(--border); }

.badge-ok   { font-size:11px; color:var(--green); }
.badge-warn { font-size:11px; color:var(--orange); background:rgba(211,84,0,.08); padding:2px 8px; border:1px solid rgba(211,84,0,.2); }
.badge-dim  { font-size:11px; color:var(--ink3); }

.ext-link { color: var(--blue); text-decoration: none; font-size: 12px; }
.ext-link:hover { text-decoration: underline; }

/* ── Filter bar ── */
.filter-bar { display:flex; gap:4px; margin-bottom:16px; }
.filter-btn {
  background: var(--surf); color: var(--ink3);
  border: 1px solid var(--border); padding: 5px 12px;
  font-family: 'DM Mono', monospace; font-size: 11px;
  cursor: pointer; transition: all .15s;
}
.filter-btn:hover { border-color: var(--ink3); color: var(--ink); }
.filter-btn.active { background: var(--ink); color: #f6f4ef; border-color: var(--ink); }

/* ── Article cards ── */
.article-list { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }

.article-card {
  background: var(--surf);
  display: flex; align-items: center; gap:0;
  padding: 16px 20px; transition: background .15s;
}
.article-card:hover { background: var(--bg); }

.article-card-main { flex:1; }

.article-meta { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.date-str { font-size:11px; color:var(--ink3); }

.article-title { font-size:14px; font-weight:500; color:var(--ink); margin-bottom:10px; }
.article-title a { color:inherit; text-decoration:none; }
.article-title a:hover { color:var(--red); }

.article-stats { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }

.progress-bar {
  width:120px; height:6px; background:var(--bg3);
  border-radius:3px; overflow:hidden; display:flex;
}
.progress-posted  { background:var(--green); height:100%; transition: width .3s; }
.progress-pending { background:var(--orange); height:100%; transition: width .3s; }

.progress-label { font-size:11px; color:var(--ink3); }

.next-post { font-size:11px; color:var(--ink2); }
.next-post em { color:var(--blue); font-style:normal; }

.article-card-aside {
  display:flex; flex-direction:column; align-items:flex-end;
  gap:8px; padding-left:20px; min-width:120px;
}

.empty-state {
  text-align:center; padding:48px 24px;
  background:var(--surf); border:1px solid var(--border);
  color:var(--ink3); font-size:13px; line-height:2;
}
.empty-state strong { color:var(--ink); }

/* ── Variants ── */
.variants-grid { display:flex; flex-direction:column; gap:16px; }

.variant-card {
  background: var(--surf); border: 1px solid var(--border);
  padding:0; overflow:hidden;
}

.status-border-pending_review { border-left:3px solid var(--orange); }
.status-border-approved       { border-left:3px solid var(--teal); }
.status-border-posted         { border-left:3px solid var(--green); }
.status-border-rejected       { border-left:3px solid var(--border2); opacity:.65; }

.variant-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px 10px; border-bottom:1px solid var(--bg2);
  background:var(--bg);
}
.variant-title { display:flex; align-items:center; gap:10px; font-size:14px; }
.fmt-icon { font-size:18px; }
.variant-meta-right { font-size:11px; color:var(--ink3); }
.char-count { font-size:11px; color:var(--ink3); }
.char-count.over-limit { color:var(--red); font-weight:600; }

.variant-note { font-size:11px; color:var(--ink3); padding:8px 20px 0; }

.variant-body { padding:14px 20px; }

.variant-content {
  white-space:pre-wrap; font-size:13px; color:var(--ink2);
  line-height:1.8; background:var(--bg);
  padding:14px 16px; border-left:2px solid var(--border2);
}

.thread-tweets { display:flex; flex-direction:column; gap:12px; }
.tweet-item { display:flex; gap:12px; align-items:flex-start; }
.tweet-num { font-size:11px; color:var(--ink3); min-width:28px; padding-top:2px; }
.tweet-text { font-size:13px; color:var(--ink2); line-height:1.7; white-space:pre-wrap; flex:1; }

.variant-schedule {
  font-size:12px; color:var(--blue);
  padding:8px 20px 0;
}
.days-str { color:var(--ink3); font-style:normal; margin-left:6px; }

.variant-actions {
  display:flex; gap:8px; align-items:center;
  padding:14px 20px; flex-wrap:wrap;
}

.posted-label { font-size:12px; color:var(--green); }

/* Zone édition */
.edit-zone { padding:0 20px 16px; border-top:1px solid var(--bg2); background:var(--bg); }
.edit-textarea {
  width:100%; min-height:120px; padding:12px;
  font-family:'DM Mono',monospace; font-size:13px;
  border:1px solid var(--border); background:var(--surf); color:var(--ink);
  resize:vertical; margin-top:12px; margin-bottom:10px;
  outline:none; line-height:1.7;
}
.edit-textarea:focus { border-color:var(--blue); }
.edit-actions { display:flex; gap:8px; }

/* ── Schedule ── */
.schedule-weeks { display:flex; flex-direction:column; gap:20px; }

.week-block { background:var(--surf); border:1px solid var(--border); }

.week-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 20px; background:var(--bg); border-bottom:1px solid var(--border);
}
.week-label {
  font-family:'Instrument Serif',serif; font-size:17px;
  font-weight:400; color:var(--ink);
}
.week-stats { display:flex; align-items:center; gap:12px; }
.week-count  { font-size:12px; color:var(--ink3); }
.week-link-count { font-size:11px; color:var(--orange); }

.week-bar {
  width:80px; height:5px; background:var(--bg3);
  border-radius:3px; overflow:hidden;
}
.week-bar-fill { background:var(--ink); height:100%; transition:width .3s; }

.week-posts { padding:0; }

.post-row {
  display:grid; grid-template-columns:160px 160px 1fr 60px;
  gap:16px; align-items:center;
  padding:11px 20px; border-bottom:1px solid var(--bg2);
  font-size:12px;
}
.post-row:last-child { border-bottom:none; }
.post-row:hover { background:var(--bg); }

.post-datetime { color:var(--blue); font-size:12px; }
.post-format { color:var(--ink2); }
.link-badge {
  font-size:10px; color:var(--orange);
  background:rgba(211,84,0,.08); border:1px solid rgba(211,84,0,.2);
  padding:1px 6px; border-radius:2px; margin-left:6px;
}
.post-article { color:var(--ink3); }
.post-actions { text-align:right; }

/* ── Buffer ── */
.buffer-status-card {
  display:flex; align-items:flex-start; gap:16px;
  padding:20px 24px; border:1px solid var(--border);
  background:var(--surf); margin-bottom:24px;
}
.buffer-status-card.connected { border-left:3px solid var(--green); }
.buffer-status-card.disconnected { border-left:3px solid var(--red); }
.buffer-status-icon { font-size:22px; font-weight:700; }
.connected .buffer-status-icon { color:var(--green); }
.disconnected .buffer-status-icon { color:var(--red); }
.buffer-status-card strong { display:block; font-size:14px; color:var(--ink); margin-bottom:4px; }
.buffer-status-card p { font-size:12px; color:var(--ink3); }

.section-title {
  font-family:'Instrument Serif',serif; font-size:20px;
  font-weight:400; color:var(--ink); margin:28px 0 14px;
  display:flex; align-items:center; gap:10px;
}

.count-badge {
  font-family:'DM Mono',monospace; font-size:13px;
  background:var(--bg2); border:1px solid var(--border);
  padding:1px 8px; border-radius:2px; color:var(--ink3);
}

.channels-table table { width:100%; border-collapse:collapse; }
.channels-table th {
  text-align:left; padding:8px 14px; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink3); background:var(--bg2);
  border-bottom:1px solid var(--border);
}
.channels-table td {
  padding:11px 14px; border-bottom:1px solid var(--border);
  font-size:12px; background:var(--surf);
}
.channels-table tr:last-child td { border-bottom:none; }
.active-channel td { background:rgba(26,122,62,.04); }

.service-badge {
  font-size:10px; padding:2px 8px; border-radius:2px;
  text-transform:uppercase; letter-spacing:.08em;
}
.service-twitter  { background:rgba(26,79,122,.08); color:var(--blue); border:1px solid rgba(26,79,122,.2); }
.service-linkedin { background:rgba(26,79,122,.12); color:#0a3d62; }
.service-instagram { background:rgba(192,57,43,.08); color:var(--red); }

.small-code { font-size:11px; color:var(--ink3); }

.queue-list { display:flex; flex-direction:column; gap:1px; background:var(--border); border:1px solid var(--border); }
.queue-item {
  display:grid; grid-template-columns:160px 1fr 100px;
  gap:16px; padding:12px 20px; background:var(--surf);
  font-size:12px; align-items:center;
}
.queue-time  { color:var(--blue); }
.queue-text  { color:var(--ink2); }
.queue-status { color:var(--ink3); text-align:right; }

.empty-state-sm { font-size:12px; color:var(--ink3); padding:16px 0; }

.config-block { background:var(--surf); border:1px solid var(--border); margin-bottom:20px; }
.config-row {
  display:flex; gap:16px; padding:11px 20px;
  border-bottom:1px solid var(--border); font-size:12px;
}
.config-row:last-child { border-bottom:none; }
.config-key { color:var(--ink3); min-width:200px; }
.config-val { color:var(--ink); font-family:'DM Mono',monospace; }

/* ── Callout ── */
.callout {
  border:1px solid var(--border); border-left:3px solid var(--blue);
  background:var(--surf); padding:14px 18px; margin:14px 0;
  font-size:12px; line-height:1.8;
}
.callout-warn { border-left-color:var(--orange); background:#fffbf6; }
.callout strong { color:var(--ink); display:block; margin-bottom:4px; }
.callout code { background:var(--bg2); padding:1px 6px; font-size:11px; }
.callout a { color:var(--blue); }

/* ── Modal ── */
.modal-backdrop {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(26,24,20,0.5);
  align-items:center; justify-content:center;
}
.modal-backdrop.open { display:flex; }

.modal {
  background:var(--surf); border:1px solid var(--border);
  width:520px; max-width:calc(100vw - 40px);
  max-height:85vh; overflow-y:auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
}

.modal-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 20px; border-bottom:1px solid var(--border);
  background:var(--bg);
}
.modal-header h3 {
  font-family:'Instrument Serif',serif; font-size:17px;
  font-weight:400; color:var(--ink);
}
.modal-close {
  background:none; border:none; font-size:16px;
  color:var(--ink3); cursor:pointer; padding:4px 8px;
}
.modal-close:hover { color:var(--ink); }

.modal-body { padding:20px; }
.modal-footer {
  padding:14px 20px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:8px;
  background:var(--bg);
}

.field-group { margin-bottom:18px; }
.field-label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink3); margin-bottom:8px; }

.textarea {
  width:100%; padding:10px 12px;
  font-family:'DM Mono',monospace; font-size:12px;
  border:1px solid var(--border); background:var(--bg);
  color:var(--ink); resize:vertical; outline:none; line-height:1.7;
}
.textarea:focus { border-color:var(--blue); }

.char-count { font-size:11px; color:var(--ink3); text-align:right; margin-top:4px; }

.radio-group { display:flex; flex-direction:column; gap:8px; }
.radio-opt { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:12px; }
.radio-opt input { cursor:pointer; }

.input-datetime {
  width:100%; padding:8px 10px;
  font-family:'DM Mono',monospace; font-size:12px;
  border:1px solid var(--border); background:var(--bg); color:var(--ink);
  outline:none;
}
.input-datetime:focus { border-color:var(--blue); }

.btn-publish-confirm {
  background:var(--ink); color:#f6f4ef;
  border:none; padding:9px 18px;
  font-family:'DM Mono',monospace; font-size:12px;
  cursor:pointer; transition:background .15s;
}
.btn-publish-confirm:hover { background:var(--teal); }
.btn-publish-confirm:disabled { opacity:.5; cursor:not-allowed; }

/* ── Toast ── */
#toast-container {
  position:fixed; bottom:24px; right:24px;
  display:flex; flex-direction:column; gap:8px; z-index:1000;
}

.toast {
  background:var(--ink); color:#f6f4ef;
  padding:11px 18px; font-size:12px; font-family:'DM Mono',monospace;
  border-radius:2px; opacity:0; transform:translateY(8px);
  transition:all .25s; max-width:360px;
}
.toast.toast-err { background:var(--red); }
.toast.toast-ok  { background:var(--teal); }
.toast.show { opacity:1; transform:none; }

/* ── Code ── */
code {
  background:var(--bg2); border:1px solid var(--border);
  padding:1px 5px; font-size:11px; color:var(--red);
  font-family:'DM Mono',monospace;
}

/* ── Responsive ── */
@media (max-width:700px) {
  .page-header { flex-direction:column; gap:12px; }
  .article-card { flex-direction:column; align-items:flex-start; gap:12px; }
  .article-card-aside { flex-direction:row; padding-left:0; }
  .post-row { grid-template-columns:1fr 1fr; }
  .queue-item { grid-template-columns:1fr 1fr; }
}

/* ══════════════════════════════════════════════════════
   PLAN — Planning avec cases à cocher
   ══════════════════════════════════════════════════════ */

/* Barre d'actions sticky */
.action-bar {
  position: sticky; top: 52px; z-index: 50;
  background: rgba(246,244,239,0.97);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--ink);
  padding: 10px 16px;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
  gap: 12px;
}

.action-bar-left  { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink2); }
.action-bar-right { display:flex; gap:8px; }

.btn-select-all, .btn-select-none {
  background: none; border: 1px solid var(--border);
  padding: 4px 10px; font-family:'DM Mono',monospace; font-size:11px;
  color: var(--ink3); cursor: pointer; transition: all .15s;
}
.btn-select-all:hover, .btn-select-none:hover { border-color:var(--ink2); color:var(--ink); }

.btn-approve-sel {
  background: rgba(26,122,62,.08); color: var(--green);
  border: 1px solid rgba(26,122,62,.25); padding: 7px 14px;
  font-family:'DM Mono',monospace; font-size:12px; cursor:pointer;
  transition: all .15s;
}
.btn-approve-sel:hover:not(:disabled) { background: rgba(26,122,62,.16); }
.btn-approve-sel:disabled { opacity:.4; cursor:not-allowed; }

.btn-publish-sel {
  background: var(--ink); color: #f6f4ef;
  border: none; padding: 7px 14px;
  font-family:'DM Mono',monospace; font-size:12px; cursor:pointer;
  transition: background .15s;
}
.btn-publish-sel:hover:not(:disabled) { background: var(--teal); }
.btn-publish-sel:disabled { opacity:.4; cursor:not-allowed; }

.btn-reject-sel {
  background: rgba(192,57,43,.07); color: var(--red);
  border: 1px solid rgba(192,57,43,.2); padding: 7px 14px;
  font-family:'DM Mono',monospace; font-size:12px; cursor:pointer;
  transition: all .15s;
}
.btn-reject-sel:hover:not(:disabled) { background: rgba(192,57,43,.14); }
.btn-reject-sel:disabled { opacity:.4; cursor:not-allowed; }

/* Semaines */
.plan-weeks { display:flex; flex-direction:column; gap:20px; }

.plan-week { background:var(--surf); border:1px solid var(--border); }

.plan-week-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; background:var(--bg); border-bottom:1px solid var(--border);
}
.plan-week-title { display:flex; align-items:center; gap:12px; }
.plan-week-title h3 {
  font-family:'Instrument Serif',serif; font-size:17px;
  font-weight:400; color:var(--ink);
}

.week-load {
  font-size:11px; padding:2px 9px; border-radius:2px;
  background:rgba(138,130,120,.1); color:var(--ink3); border:1px solid var(--border);
}
.week-load.mid  { background:rgba(211,84,0,.08);  color:var(--orange); border-color:rgba(211,84,0,.2); }
.week-load.full { background:rgba(192,57,43,.08); color:var(--red);    border-color:rgba(192,57,43,.2); }

.week-ratio { font-size:11px; color:var(--ink3); display:flex; gap:10px; }
.ratio-link    { color:var(--orange); }
.ratio-nolink  { color:var(--green); }

/* Posts */
.plan-posts { display:flex; flex-direction:column; gap:0; }

.plan-post {
  display:flex; align-items:flex-start; gap:0;
  border-bottom:1px solid var(--bg2); transition:background .1s;
}
.plan-post:last-child { border-bottom:none; }
.plan-post:hover { background:var(--bg); }
.plan-post.selected { background:rgba(26,79,122,.03); border-left:3px solid var(--blue); }

.plan-post-check {
  padding:14px 12px 14px 16px;
  display:flex; align-items:flex-start; padding-top:15px;
}
.plan-post-check input[type="checkbox"] {
  width:15px; height:15px; cursor:pointer; accent-color:var(--blue);
}

.plan-post-body { flex:1; padding:12px 16px 12px 0; }

.plan-post-header {
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:6px; gap:12px;
}

.plan-post-meta {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  cursor:pointer; flex:1;
}

.plan-datetime { font-size:12px; color:var(--blue); min-width:130px; }

.plan-fmt {
  font-size:11px; font-weight:500; padding:2px 8px; border-radius:2px;
}
.fmt-teaser { background:rgba(211,84,0,.08);  color:var(--orange); border:1px solid rgba(211,84,0,.2); }
.fmt-thread { background:rgba(26,79,122,.07); color:var(--blue);   border:1px solid rgba(26,79,122,.2); }
.fmt-solo_1, .fmt-solo_2 { background:rgba(26,122,62,.07); color:var(--green); border:1px solid rgba(26,122,62,.2); }
.fmt-provoc { background:rgba(192,57,43,.07); color:var(--red);    border:1px solid rgba(192,57,43,.2); }

.link-tag {
  font-size:10px; color:var(--orange); background:rgba(211,84,0,.07);
  padding:1px 6px; border:1px solid rgba(211,84,0,.2); border-radius:2px;
}

.plan-article { font-size:12px; color:var(--ink3); }

.plan-post-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.btn-expand {
  background:none; border:1px solid var(--border); padding:3px 8px;
  font-size:13px; color:var(--ink3); cursor:pointer; transition:all .15s;
}
.btn-expand:hover { border-color:var(--ink2); color:var(--ink); }

/* Aperçu */
.plan-preview {
  font-size:12px; color:var(--ink3); line-height:1.6;
  cursor:pointer; padding:4px 0;
}
.plan-preview:hover { color:var(--ink2); }

/* Zone édition */
.plan-edit-zone { margin-top:10px; }

.plan-textarea {
  width:100%; padding:10px 12px; min-height:100px;
  font-family:'DM Mono',monospace; font-size:12px;
  border:1px solid var(--border); background:var(--bg); color:var(--ink);
  resize:vertical; outline:none; line-height:1.7;
}
.plan-textarea:focus { border-color:var(--blue); }

.edit-footer {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:6px;
}

.btn-save-inline {
  background:var(--teal); color:#fff;
  border:none; padding:5px 12px;
  font-family:'DM Mono',monospace; font-size:11px; cursor:pointer;
}
.btn-save-inline:hover { opacity:.85; }

.char-count { font-size:11px; color:var(--ink3); }

.thread-preview-list { display:flex; flex-direction:column; gap:6px; padding:8px 0; }
.thread-line { display:flex; gap:8px; font-size:12px; color:var(--ink2); }
.thread-bullet { color:var(--ink3); flex-shrink:0; }

.edit-hint { font-size:11px; color:var(--ink3); margin-top:8px; }
.edit-hint a { color:var(--blue); }

/* Toast warn */
.toast.toast-warn { background:var(--orange); }

/* Bouton Tout publier */
.btn-publish-all {
  background: var(--teal); color: #ffffff;
  border: none; padding: 9px 18px;
  font-family: 'DM Mono', monospace; font-size: 13px;
  font-weight: 500; cursor: pointer;
  transition: opacity .2s;
}
.btn-publish-all:hover:not(:disabled) { opacity: .85; }
.btn-publish-all:disabled { opacity: .5; cursor: not-allowed; }

.btn-retry {
  background: rgba(211,84,0,.1); color: var(--orange);
  border: 1px solid rgba(211,84,0,.3); padding: 9px 14px;
  font-family: 'DM Mono', monospace; font-size: 12px;
  cursor: pointer; transition: all .2s;
}
.btn-retry:hover:not(:disabled) { background: rgba(211,84,0,.2); }
.btn-retry:disabled { opacity: .5; cursor: not-allowed; }

/* Indicateur d'erreur Buffer sur un post */
.buffer-error-badge {
  font-size: 10px; color: var(--red);
  background: rgba(192,57,43,.08); border: 1px solid rgba(192,57,43,.2);
  padding: 2px 8px; border-radius: 2px;
}

.btn-import-csv {
  background: var(--surf); color: var(--blue);
  border: 1px solid rgba(26,79,122,.3); padding: 8px 14px;
  font-family: 'DM Mono', monospace; font-size: 12px;
  cursor: pointer; transition: all .15s; display: inline-block;
}
.btn-import-csv:hover { background: rgba(26,79,122,.06); }

/* Bouton Générer (par article) */
.btn-generate {
  background: rgba(26,122,62,.08); color: var(--green);
  border: 1px solid rgba(26,122,62,.25); padding: 6px 12px;
  font-family: 'DM Mono', monospace; font-size: 11px;
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.btn-generate:hover:not(:disabled) { background: rgba(26,122,62,.16); }
.btn-generate:disabled { opacity: .5; cursor: not-allowed; }

/* Bouton Générer tout (header) */
.btn-generate-all {
  background: var(--green); color: #ffffff;
  border: none; padding: 9px 16px;
  font-family: 'DM Mono', monospace; font-size: 12px;
  font-weight: 500; cursor: pointer; transition: opacity .2s;
}
.btn-generate-all:hover { opacity: .85; }
/* ═══════════════════════════════════════════════════════════════════════════
   MULTI-COMPTES — Sélecteur, badges, page accounts, flag over_limit
   À AJOUTER À LA FIN DE static/style.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Sélecteur de compte dans la nav ──────────────────────────────────── */
.account-switcher {
  display: flex;
  gap: 4px;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  padding: 4px;
  border-radius: 6px;
  margin: 0 16px;
}

.acc-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  color: #8a8278;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.15s;
}

.acc-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #c9c2b6;
}

.acc-tab.active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-weight: 500;
}

.acc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #888;
}

/* ── Badge compte (réutilisable partout) ──────────────────────────────── */
.acc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  color: var(--acc-color, #888);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

.dim-tag {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: #6a6358;
  font-weight: normal;
}

.dim-meta {
  color: #8a8278;
  font-size: 13px;
  margin: 4px 0;
}

/* ── Flag over_limit ───────────────────────────────────────────────────── */
.over-limit-flag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  color: #c0392b;
  background: rgba(192, 57, 43, 0.1);
  border: 1px solid rgba(192, 57, 43, 0.3);
  border-radius: 3px;
  margin-left: 6px;
}

.variant-card.over-limit-card {
  border-left: 3px solid #c0392b;
  background: rgba(192, 57, 43, 0.02);
}

.over-limit-banner {
  padding: 8px 12px;
  margin: 8px 0;
  background: rgba(192, 57, 43, 0.08);
  border-left: 3px solid #c0392b;
  border-radius: 3px;
  color: #c0392b;
  font-size: 13px;
}

/* ── Page Comptes (/accounts) ─────────────────────────────────────────── */
.account-edit-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  padding: 24px;
  margin-bottom: 24px;
}

.account-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.account-edit-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Instrument Serif', serif;
}

.enabled-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: #c9c2b6;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.field-group {
  margin-bottom: 16px;
}

.field-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  font-family: 'DM Mono', monospace;
  color: #8a8278;
  margin-bottom: 6px;
}

.field-label .hint {
  text-transform: none;
  font-family: inherit;
  font-size: 11px;
  color: #6a6358;
}

.input-text,
.input-color {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: #e8e2d6;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  box-sizing: border-box;
}

.input-text:focus,
.input-color:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
}

.input-narrow {
  max-width: 120px;
}

.input-color {
  height: 38px;
  padding: 4px;
  cursor: pointer;
}

.textarea-prompt {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  color: #e8e2d6;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  box-sizing: border-box;
  resize: vertical;
}

.textarea-prompt:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.2);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Page Buffer multi-comptes ────────────────────────────────────────── */
.account-buffer-block {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 16px;
}

.account-buffer-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-left: 12px;
  margin-bottom: 12px;
}

.account-buffer-header h3 {
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Instrument Serif', serif;
}

/* ── Plan post : badge compte ─────────────────────────────────────────── */
.plan-account-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  margin-right: 6px;
  font-size: 10px;
  font-family: 'DM Mono', monospace;
  text-transform: uppercase;
  color: var(--acc-color, #888);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
}

/* ── Article card : ligne de meta avec compte ─────────────────────────── */
.article-card .acc-badge {
  margin-right: 8px;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
  .account-switcher {
    margin: 8px 0;
    flex-wrap: wrap;
  }
}

/* ─── Preview image article (PATCH images v6.2) ──────────────────────── */
.article-image-preview {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surf, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 4px;
  padding: 12px;
  margin: 16px 0;
}
.article-image-preview img {
  max-width: 280px;
  max-height: 180px;
  object-fit: cover;
  border-radius: 3px;
  background: #1a1814;
}
.article-image-preview .image-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.article-image-preview .image-meta code {
  font-size: 11px;
  word-break: break-all;
}

/* Multi-checkbox formats sur /accounts */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 0;
}
.checkbox-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink2, #c9c2b6);
  text-transform: none;
  font-family: 'DM Mono', monospace;
}
.checkbox-opt input[type="checkbox"] {
  margin: 0;
} 

.image-edit-form {
  background: var(--surf, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 4px;
  padding: 12px 16px;
  margin: 8px 0 16px;
}
.image-edit-form .input-text {
  margin: 6px 0 10px;
}
.image-edit-form .edit-actions {
  display: flex;
  gap: 8px;
}


/* ─── Cards de stats par compte sur le dashboard ──────────────────────── */
.account-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 16px 0 24px;
}

.account-stat-card {
  display: block;
  background: var(--surf, rgba(255,255,255,0.02));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-left: 3px solid var(--acc-color);
  border-radius: 4px;
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}

.account-stat-card:hover {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--acc-color) 8%, transparent),
    transparent 70%
  );
  border-color: var(--acc-color);
}

.acs-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.06));
}

.acs-header strong {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--acc-color);
}

.acs-header .dim-meta {
  margin-left: auto;
  font-size: 11px;
}

.acs-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.acs-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}

.acs-num {
  font-family: 'Instrument Serif', serif;
  font-size: 22px;
  line-height: 1;
  min-width: 36px;
  text-align: right;
  color: var(--ink, #e8e2d6);
}

.acs-num.ok    { color: #1a7a3e; }
.acs-num.warn  { color: #d35400; }
.acs-num.err   { color: #c0392b; }

.acs-lbl {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink3, #8a8278);
}
/* ════════════════════════════════════════════════════════════════════════
   LinkedIn first_comment block
   À appender à static/style.css
   ════════════════════════════════════════════════════════════════════════ */

/* Bordure colorée LinkedIn pour les variants linkedin_post */
.variant-card.variant-linkedin {
  border-color: rgba(10, 102, 194, 0.4);
}

.variant-card.variant-linkedin .variant-header {
  background: rgba(10, 102, 194, 0.05);
}

/* Bloc du premier commentaire LinkedIn */
.first-comment-block {
  margin: 12px 0;
  padding: 12px 14px;
  background: rgba(10, 102, 194, 0.08);
  border-left: 3px solid #0a66c2;
  border-radius: 3px;
}

.first-comment-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0a66c2;
}

.first-comment-label strong {
  font-weight: 600;
  flex: 1;
}

.first-comment-label .dim-meta {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink2, #a89e8a);
}

.first-comment-label .li-icon {
  font-size: 14px;
}

.first-comment-content {
  margin: 0 0 8px 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink, #f4eee0);
  white-space: pre-wrap;
  word-break: break-word;
}

.first-comment-hint {
  margin: 0;
  font-size: 11px;
  color: var(--ink2, #a89e8a);
  font-style: italic;
  line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════════════
   Notes Substack — page /notes
   ════════════════════════════════════════════════════════════════════════ */

.notes-article-list {
  margin-top: 20px;
}

.notes-article-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.notes-article-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.notes-article-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-generate-notes {
  flex-shrink: 0;
  background: rgba(192, 57, 43, 0.15);
  color: #e08b7d;
  border: 1px solid rgba(192, 57, 43, 0.35);
  padding: 8px 16px;
  border-radius: 3px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  cursor: pointer;
}
.btn-generate-notes:hover:not(:disabled) {
  background: rgba(192, 57, 43, 0.25);
}
.btn-generate-notes:disabled {
  opacity: 0.6;
  cursor: wait;
}

.notes-output {
  margin: 4px 0 20px 0;
  padding: 16px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.note-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #888;
  border-radius: 4px;
}
.note-card.note-type-valeur    { border-left-color: #d49b3d; }
.note-card.note-type-graine    { border-left-color: #5fa84e; }
.note-card.note-type-diffusion { border-left-color: #4e7fa8; }

.note-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.note-type-badge {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink2, #b8b0a0);
}

.note-char-count {
  font-size: 11px;
  color: var(--ink2, #a89e8a);
}

.note-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 12px;
  color: var(--ink, #f4eee0);
}

.btn-copy-note {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink, #f4eee0);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 12px;
  border-radius: 3px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  cursor: pointer;
}
.btn-copy-note:hover {
  background: rgba(255, 255, 255, 0.12);
}
.btn-copy-note.copied {
  background: rgba(95, 168, 78, 0.2);
  color: #7fc46a;
  border-color: rgba(95, 168, 78, 0.4);
}
/* ════════════════════════════════════════════════════════════════════════
   Notes Substack — page /notes
   ════════════════════════════════════════════════════════════════════════ */
 
.notes-article-list {
  margin-top: 20px;
}
 
.notes-article-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.02);
}
 
.notes-article-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}
 
.notes-article-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
.btn-generate-notes {
  flex-shrink: 0;
  background: rgba(192, 57, 43, 0.15);
  color: #e08b7d;
  border: 1px solid rgba(192, 57, 43, 0.35);
  padding: 8px 16px;
  border-radius: 3px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  cursor: pointer;
}
.btn-generate-notes:hover:not(:disabled) {
  background: rgba(192, 57, 43, 0.25);
}
.btn-generate-notes:disabled {
  opacity: 0.6;
  cursor: wait;
}
 
.notes-output {
  margin: 4px 0 20px 0;
  padding: 16px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}
 
.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
 
.note-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid #888;
  border-radius: 4px;
}
.note-card.note-type-valeur    { border-left-color: #d49b3d; }
.note-card.note-type-graine    { border-left-color: #5fa84e; }
.note-card.note-type-diffusion { border-left-color: #4e7fa8; }
 
.note-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
 
.note-type-badge {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink2, #b8b0a0);
}
 
.note-char-count {
  font-size: 11px;
  color: var(--ink2, #a89e8a);
}
 
.note-content {
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 12px;
  color: var(--ink, #f4eee0);
}
 
.btn-copy-note {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink, #f4eee0);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 12px;
  border-radius: 3px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  cursor: pointer;
}
.btn-copy-note:hover {
  background: rgba(255, 255, 255, 0.12);
}
.btn-copy-note.copied {
  background: rgba(95, 168, 78, 0.2);
  color: #7fc46a;
  border-color: rgba(95, 168, 78, 0.4);
}
 
 
/* ── Notes : bouton "générer pour l'ensemble" + barre de progression ── */
 
.btn-generate-all-notes {
  background: rgba(212, 155, 61, 0.18);
  color: #d49b3d;
  border: 1px solid rgba(212, 155, 61, 0.4);
  padding: 10px 18px;
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  cursor: pointer;
}
.btn-generate-all-notes:hover:not(:disabled) {
  background: rgba(212, 155, 61, 0.28);
}
.btn-generate-all-notes:disabled {
  opacity: 0.6;
  cursor: wait;
}
 
.notes-batch-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(212, 155, 61, 0.08);
  border-left: 3px solid #d49b3d;
  border-radius: 4px;
}
 
.batch-progress-bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  overflow: hidden;
}
 
.batch-progress-fill {
  height: 100%;
  background: #d49b3d;
  border-radius: 4px;
  transition: width 0.3s ease;
}
 
.batch-progress-label {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: var(--ink2, #b8b0a0);
  white-space: nowrap;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.notes-article-row.row-processing {
  background: rgba(212, 155, 61, 0.1);
  border-color: rgba(212, 155, 61, 0.3);
}