/* ============================================================
   Hub Dashboard — Dark Theme
   ============================================================ */

:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #111118;
  --bg-card: #16161e;
  --bg-hover: #1c1c28;
  --bg-input: #1a1a24;
  --border: #222233;
  --border-light: #2a2a3a;
  --text-primary: #f0f0f5;
  --text-secondary: #888899;
  --text-muted: #555566;
  --accent: #8b5cf6;
  --accent-rgb: 139, 92, 246;
  --accent-hover: #7c4ff0;
  --accent-dim: rgba(var(--accent-rgb),  0.15);
  --vinted: #09b1ba;
  --etsy: #f1641e;
  --green: #22c55e;
  --green-dim: rgba(34, 197, 94, 0.15);
  --red: #ef4444;
  --red-dim: rgba(239, 68, 68, 0.15);
  --yellow: #f59e0b;
  --yellow-dim: rgba(245, 158, 11, 0.15);
  --sidebar-width: 240px;
  --radius: 10px;
  --radius-sm: 6px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ============ SCROLLBAR ============ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ============ SIDEBAR ============ */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  flex-shrink: 0;
  overflow-y: auto;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 16px;
}

.logo {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.logo-accent { color: var(--accent); }

.version {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
}

.nav-section { margin-bottom: 16px; }

.nav-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-muted);
  padding: 0 8px;
  margin-bottom: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
}

.badge {
  position: absolute;
  right: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

/* Account list */
.account-list { padding: 0 4px; }

.account-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 2px;
}

.account-item:hover { background: var(--bg-hover); }

.account-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.account-dot.vinted { background: var(--vinted); }
.account-dot.etsy { background: var(--etsy); }

.account-name {
  font-size: 12px;
  color: var(--text-secondary);
}

.account-status {
  font-size: 10px;
  color: var(--text-muted);
}

.account-delete-btn:hover {
  color: #ff4444 !important;
  opacity: 1 !important;
}

/* Sidebar footer */
.sidebar-footer {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}

.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.user-name { font-size: 13px; font-weight: 600; }
.user-plan { font-size: 11px; color: var(--accent); }

/* ============ MAIN CONTENT ============ */
.main {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

.page { display: none; }
.page.active { display: block; }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 24px;
  font-weight: 700;
}

/* Date filters */
.date-filters { display: flex; gap: 4px; }

.filter-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: inherit;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
}

.filter-btn:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ============ STATS GRID ============ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon.vinted { background: rgba(9, 177, 186, 0.15); color: var(--vinted); }
.stat-icon.etsy { background: rgba(241, 100, 30, 0.15); color: var(--etsy); }
.stat-icon.revenue { background: var(--green-dim); color: var(--green); }
.stat-icon.messages { background: var(--accent-dim); color: var(--accent); }

.stat-label { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }

.stat-value { font-size: 22px; font-weight: 700; }

.stat-trend {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

.stat-trend.up { color: var(--green); }
.stat-trend.down { color: var(--red); }

/* ============ CHARTS ============ */
.charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.chart-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  min-height: 0;
}

.chart-canvas-wrap {
  position: relative;
  height: 260px;
  width: 100%;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.chart-header h3 { font-size: 14px; font-weight: 600; }

.chart-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--text-secondary);
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.legend-dot.vinted { background: var(--vinted); }
.legend-dot.etsy { background: var(--etsy); }

/* ============ TABLE ============ */
.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.table-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.table-header h3 { font-size: 14px; font-weight: 600; }

.table-wrapper { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
}

th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

tr:last-child td { border-bottom: none; }

tr:hover td { background: var(--bg-hover); }

.platform-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.platform-badge.vinted { background: rgba(9,177,186,0.15); color: var(--vinted); }
.platform-badge.etsy { background: rgba(241,100,30,0.15); color: var(--etsy); }

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.status-badge.completed { background: var(--green-dim); color: var(--green); }
.status-badge.shipped { background: var(--yellow-dim); color: var(--yellow); }
.status-badge.pending { background: var(--accent-dim); color: var(--accent); }

/* ============ CHATBOX LAYOUT ============ */
.chatbox-layout {
  display: flex;
  height: calc(100vh - 48px);
  margin: -24px -28px;
  border-top: 1px solid var(--border);
}

/* Conversation list */
.conv-list-panel {
  width: 340px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.conv-list-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.conv-list-header h2 { font-size: 16px; margin-bottom: 10px; }

.conv-filters { display: flex; gap: 4px; }

.conv-filter {
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 11px;
  font-family: inherit;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.conv-filter:hover { color: var(--text-secondary); border-color: var(--border-light); }
.conv-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.conv-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
}

.conv-search input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

.conv-list {
  flex: 1;
  overflow-y: auto;
}

.conv-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.conv-item:hover { background: var(--bg-hover); }
.conv-item.active { background: var(--accent-dim); }

.conv-item.unread .conv-preview { color: var(--text-primary); font-weight: 500; }

.conv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
  position: relative;
}

.conv-avatar .platform-indicator {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg-secondary);
  font-size: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
}

.conv-avatar .platform-indicator.vinted { background: var(--vinted); }
.conv-avatar .platform-indicator.etsy { background: var(--etsy); }

.conv-content { flex: 1; min-width: 0; }

.conv-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.conv-name { font-size: 13px; font-weight: 600; }

.conv-time { font-size: 10px; color: var(--text-muted); }

.conv-preview {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conv-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 4px;
}

/* Chat panel */
.chat-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  font-size: 14px;
}

.chat-active {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}

.chat-user-info { display: flex; align-items: center; gap: 10px; }

.chat-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.chat-username { font-size: 14px; font-weight: 600; }
.chat-item-info { font-size: 11px; color: var(--text-muted); }

.chat-actions { display: flex; gap: 4px; }

.chat-action-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.chat-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* Messages */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.message {
  max-width: 70%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
}

.message.received {
  align-self: flex-start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.message.sent {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.message.system {
  align-self: center;
  background: var(--yellow-dim);
  color: var(--yellow);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 20px;
}

.message-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

.message.sent .message-time { color: rgba(255,255,255,0.6); }

/* AI toolbar */
.ai-toolbar { border-top: 1px solid var(--border); }

.ai-suggestion {
  padding: 12px 20px;
  background: var(--accent-dim);
  border-bottom: 1px solid var(--border);
}

.ai-suggestion-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin-bottom: 6px;
}

.ai-suggestion-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  margin-bottom: 8px;
}

.ai-suggestion-actions { display: flex; gap: 6px; }

.ai-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.ai-btn.send { background: var(--accent); color: #fff; }
.ai-btn.send:hover { background: var(--accent-hover); }
.ai-btn.edit { background: var(--bg-card); color: var(--text-secondary); border: 1px solid var(--border); }
.ai-btn.edit:hover { color: var(--text-primary); }
.ai-btn.discard { background: none; color: var(--text-muted); }
.ai-btn.discard:hover { color: var(--red); }

/* Chat input */
.chat-input-area {
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.chat-input-tools { display: flex; flex-direction: column; gap: 4px; }

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  width: 48px;
}

.tool-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.tool-btn.lightning:hover { border-color: var(--yellow); color: var(--yellow); background: var(--yellow-dim); }

.tool-label { font-size: 9px; font-weight: 600; }

.chat-input-wrapper {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  transition: border-color 0.15s;
}

.chat-input-wrapper:focus-within { border-color: var(--accent); }

#chat-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  resize: none;
  outline: none;
  max-height: 100px;
  line-height: 1.5;
}

.send-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.send-btn:hover { background: var(--accent-hover); }

/* ============ ITEM DETAIL PANEL (chatbox sidebar) ============ */
.item-detail-panel {
  width: 360px;
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background: var(--bg-secondary);
  overflow: hidden;
}

.item-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.item-detail-header h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.item-detail-close {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.item-detail-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.item-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.item-detail-photo-wrap {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-detail-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.item-detail-no-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.item-detail-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.4;
}

.item-detail-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.item-detail-price {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
}

.item-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: all 0.15s;
}

.item-detail-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

.item-detail-section {
  margin-bottom: 16px;
}

.item-detail-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.item-detail-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-height: 200px;
  overflow-y: auto;
  padding: 8px 10px;
  background: var(--bg-card);
  border-radius: 8px;
  border: 1px solid var(--border);
  white-space: pre-wrap;
  word-break: break-word;
}

.item-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.item-detail-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.item-detail-field .field-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}

.item-detail-field .field-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.item-detail-field .field-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text-primary);
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.item-detail-field .field-input:focus {
  border-color: var(--accent);
}

.item-detail-field .field-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.item-detail-field .field-input-wrap .field-input {
  flex: 1;
  min-width: 0;
}

.item-detail-field .field-suffix {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}

.item-detail-save {
  width: 100%;
  padding: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  margin-bottom: 16px;
}

.item-detail-save:hover { background: var(--accent-hover); }

.item-detail-offers {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item-detail-offer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
}

.item-detail-offer-price {
  font-weight: 700;
  color: var(--text-primary);
}

.item-detail-offer-status {
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}

/* ============ SETTINGS ============ */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.settings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.settings-card h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.setting-row + .setting-row { border-top: 1px solid var(--border); }

.setting-label { font-size: 13px; font-weight: 500; }
.setting-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.setting-select {
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.setting-select:focus { outline: none; border-color: var(--accent); }

.setting-input {
  padding: 6px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12px;
  font-family: inherit;
  border-radius: var(--radius-sm);
  width: 70px;
  text-align: center;
}

.setting-input:focus { outline: none; border-color: var(--accent); }

.setting-input-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.setting-unit { font-size: 12px; color: var(--text-muted); }

.setting-status { font-size: 12px; margin-top: 4px; }

/* Toggle */
.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.toggle input { display: none; }

.toggle-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.3s;
}

.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* Buttons */
.btn-primary {
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  padding: 8px 16px;
  background: none;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-secondary:hover { color: var(--text-primary); border-color: var(--border-light); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1200px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .charts-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
}

/* ancien 768px remplace par le bloc responsive complet en bas du fichier */

/* ============ LOGIN OVERLAY ============ */
.login-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-primary);
  display: flex; align-items: center; justify-content: center;
}
.login-overlay.hidden { display: none; }
.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  width: 380px; max-width: 90vw;
  text-align: center;
}
.login-logo { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.login-subtitle { color: var(--text-secondary); font-size: 13px; margin-bottom: 24px; }
.login-tabs { display: flex; gap: 0; margin-bottom: 20px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }
.login-tab {
  flex: 1; padding: 8px; background: transparent; border: none;
  color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.login-tab.active { background: var(--accent); color: #fff; }
.form-group { text-align: left; margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; font-weight: 600; }
.form-group input {
  width: 100%; padding: 10px 12px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus { border-color: var(--accent); }
.login-btn { width: 100%; padding: 10px; margin-top: 6px; font-size: 14px; font-weight: 600; }
.login-error { color: var(--red); font-size: 12px; margin-top: 10px; min-height: 16px; }

/* ============ LOGOUT BUTTON ============ */
.logout-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  padding: 4px; border-radius: 4px; transition: color 0.2s;
  margin-left: auto;
}
.logout-btn:hover { color: var(--red); }
.user-card { display: flex; align-items: center; gap: 10px; }

/* ============ SETTINGS TABS ============ */
.settings-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.settings-tab {
  background: none; border: none; color: var(--text-muted);
  padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 500;
  border-bottom: 2px solid transparent; transition: all 0.2s;
}
.settings-tab:hover { color: var(--text-primary); }
.settings-tab.active { color: var(--purple); border-bottom-color: var(--purple); }
.settings-tab-content { display: none; }
.settings-tab-content.active { display: block; }

/* ============ PERSONA (IA PAR COMPTE) ============ */
.persona-account-selector {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  padding: 12px 16px; background: var(--card); border-radius: 8px;
  border: 1px solid var(--border);
}
.persona-account-selector label {
  font-weight: 600; color: var(--text-primary); white-space: nowrap;
}
.persona-account-selector .setting-select {
  flex: 1; max-width: 300px;
}
.persona-save-status {
  font-size: 12px; margin-left: auto; min-width: 100px; text-align: right;
}

/* Sous-onglets persona */
.persona-subtabs {
  display: flex; gap: 4px; margin-bottom: 16px;
}
.persona-subtab {
  background: var(--card); border: 1px solid var(--border); color: var(--text-muted);
  padding: 8px 16px; cursor: pointer; font-size: 13px; font-weight: 500;
  border-radius: 6px; transition: all 0.2s;
}
.persona-subtab:hover { color: var(--text-primary); border-color: var(--text-muted); }
.persona-subtab.active {
  color: var(--purple); border-color: var(--purple); background: rgba(var(--accent-rgb), 0.08);
}
.persona-panel { display: none; }
.persona-panel.active { display: block; }

.persona-intro {
  padding: 12px 16px; background: rgba(var(--accent-rgb), 0.06);
  border-radius: 8px; margin-bottom: 16px; border-left: 3px solid var(--purple);
}
.persona-intro p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }

/* Bagou Q&A */
.bagou-list { display: flex; flex-direction: column; gap: 16px; }
.bagou-item {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; transition: border-color 0.2s;
}
.bagou-item:hover { border-color: var(--purple); }
.bagou-item .bagou-number {
  font-size: 11px; font-weight: 700; color: var(--purple);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.bagou-item .bagou-question {
  font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px;
  line-height: 1.4;
}
.bagou-item textarea {
  width: 100%; min-height: 60px; padding: 10px 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-primary);
  font-size: 13px; font-family: inherit; resize: vertical; transition: border-color 0.2s;
}
.bagou-item textarea:focus {
  outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.15);
}
.bagou-item textarea::placeholder { color: var(--text-muted); }

/* Scripted responses */
.scripted-item {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px; margin-bottom: 12px; position: relative;
}
.scripted-item:hover { border-color: var(--orange); }
.scripted-row { display: flex; gap: 12px; margin-bottom: 10px; align-items: flex-start; }
.scripted-row label {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  min-width: 90px; padding-top: 8px;
}
.scripted-row input, .scripted-row textarea {
  flex: 1; padding: 8px 12px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text-primary);
  font-size: 13px; font-family: inherit;
}
.scripted-row textarea { min-height: 50px; resize: vertical; }
.scripted-row input:focus, .scripted-row textarea:focus {
  outline: none; border-color: var(--purple);
}
.scripted-delete {
  position: absolute; top: 8px; right: 8px;
  background: none; border: none; color: var(--text-muted);
  cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: 4px;
}
.scripted-delete:hover { color: var(--red); background: rgba(239,68,68,0.1); }

/* Save actions */
.persona-actions {
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--border); text-align: right;
}

/* ============ COMMANDES PAGE ============ */
.orders-header-actions {
  display: flex; align-items: center; gap: 8px;
}

.orders-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px;
}

.order-stat-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; text-align: center;
}

.order-stat-card.accent {
  border-color: var(--accent); background: var(--accent-dim);
}

.order-stat-value {
  font-size: 24px; font-weight: 700; margin-bottom: 2px;
}

.order-stat-card.accent .order-stat-value { color: var(--accent); }

.order-stat-label {
  font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;
}

.orders-list {
  display: flex; flex-direction: column; gap: 8px;
}

.orders-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px; color: var(--text-muted); text-align: center; gap: 8px;
}

.orders-empty p { font-size: 15px; font-weight: 600; color: var(--text-secondary); }
.orders-empty .text-muted { font-size: 12px; }

.order-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color 0.15s;
}

.order-card:hover { border-color: var(--accent); }

.order-photo {
  width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0;
  background: var(--bg-hover); display: flex; align-items: center; justify-content: center;
}

.order-photo img { width: 100%; height: 100%; object-fit: cover; }

.order-photo-placeholder {
  color: var(--text-muted); font-size: 20px;
}

.order-info { flex: 1; min-width: 0; }

.order-title {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px;
}

.order-buyer {
  font-size: 11px; color: var(--text-secondary); margin-bottom: 2px;
}

.order-meta {
  font-size: 10px; color: var(--text-muted); display: flex; gap: 8px; align-items: center;
}

.order-price {
  font-size: 15px; font-weight: 700; color: var(--green); white-space: nowrap;
}

.order-shipping-status {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 80px;
}

.order-status-badge {
  padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;
}

.order-status-badge.paid { background: var(--yellow-dim); color: var(--yellow); }
.order-status-badge.shipped { background: rgba(59,130,246,0.15); color: #3b82f6; }
.order-status-badge.delivered { background: var(--green-dim); color: var(--green); }
.order-status-badge.completed { background: var(--accent-dim); color: var(--accent); }

.order-expiry {
  font-size: 10px; font-weight: 600;
}

.order-expiry.urgent { color: var(--red); }
.order-expiry.warning { color: var(--yellow); }
.order-expiry.ok { color: var(--text-muted); }

.order-actions {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}

.order-action-btn {
  padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border);
  background: none; color: var(--text-secondary); font-size: 10px; font-weight: 600;
  cursor: pointer; transition: all 0.15s; white-space: nowrap;
}

.order-action-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

.order-action-btn.prolong { border-color: var(--yellow); color: var(--yellow); }
.order-action-btn.prolong:hover { background: var(--yellow-dim); }

.prolong-status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px;
}

.prolong-status-dot.gray { background: var(--text-muted); }
.prolong-status-dot.orange { background: var(--yellow); }
.prolong-status-dot.green { background: var(--green); }

/* ============ DRESSING PAGE ============ */
.dressing-header-actions {
  display: flex; align-items: center; gap: 8px;
}

.dressing-search-wrap {
  display: flex; align-items: center; gap: 6px; background: var(--bg-input);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0 10px;
}

.dressing-search-wrap input {
  background: none !important; border: none !important; padding: 6px 0 !important;
}

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

.dressing-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: all 0.2s; position: relative;
}

.dressing-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.15); }

.dressing-card-photo {
  width: 100%; aspect-ratio: 1; background: var(--bg-hover); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}

.dressing-card-photo img { width: 100%; height: 100%; object-fit: cover; }

.dressing-card-body { padding: 10px 12px; }

.dressing-card-title {
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; margin-bottom: 4px; color: var(--text-primary);
}

.dressing-card-price {
  font-size: 14px; font-weight: 700; color: var(--accent); margin-bottom: 6px;
}

.dressing-card-stats {
  display: flex; gap: 10px; font-size: 10px; color: var(--text-muted);
}

.dressing-card-stat {
  display: flex; align-items: center; gap: 3px;
}

.dressing-card-actions {
  position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px;
  opacity: 0; transition: opacity 0.2s;
}

.dressing-card:hover .dressing-card-actions { opacity: 1; }

.dressing-card-action {
  width: 28px; height: 28px; border-radius: 6px; border: none;
  background: rgba(0,0,0,0.7); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background 0.15s;
}

.dressing-card-action:hover { background: var(--accent); }

.dressing-card-badge {
  position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 8px;
  font-size: 10px; font-weight: 700; color: #fff;
}

.dressing-card-badge.sold { background: var(--green); }
.dressing-card-badge.reserved { background: var(--yellow); }

/* ============ PROLONGATION PAGE ============ */
.prolong-header-actions {
  display: flex; align-items: center; gap: 8px;
}

.prolong-config-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 20px;
}

.prolong-config-row {
  display: flex; align-items: center; justify-content: space-between; padding: 12px 0;
}

.prolong-config-row + .prolong-config-row { border-top: 1px solid var(--border); }

.prolong-messages-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin-bottom: 20px;
}

.prolong-messages-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}

.prolong-messages-header h3 { font-size: 14px; font-weight: 600; }

.btn-sm { padding: 5px 10px; font-size: 11px; }

.prolong-messages-list {
  display: flex; flex-direction: column; gap: 8px;
}

.prolong-msg-item {
  display: flex; gap: 8px; align-items: flex-start;
}

.prolong-msg-input {
  flex: 1; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: 12px;
  font-family: inherit; resize: vertical; outline: none; transition: border-color 0.15s;
}

.prolong-msg-input:focus { border-color: var(--accent); }

.prolong-msg-delete {
  width: 28px; height: 28px; border: 1px solid var(--border); background: none;
  color: var(--text-muted); border-radius: 6px; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center; transition: all 0.15s;
  flex-shrink: 0;
}

.prolong-msg-delete:hover { color: var(--red); border-color: var(--red); background: var(--red-dim); }

.prolong-section-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}

.prolong-section-header h3 { font-size: 14px; font-weight: 600; }

.prolong-legend {
  display: flex; gap: 14px; font-size: 11px; color: var(--text-secondary);
}

.prolong-legend-item {
  display: flex; align-items: center; gap: 4px;
}

.prolong-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}

.prolong-dot.gray { background: var(--text-muted); }
.prolong-dot.orange { background: var(--yellow); }
.prolong-dot.green { background: var(--green); }

.prolong-orders-list {
  display: flex; flex-direction: column; gap: 8px;
}

.prolong-order-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color 0.15s;
}

.prolong-order-card:hover { border-color: var(--accent); }

.prolong-order-info { flex: 1; min-width: 0; }

.prolong-order-title {
  font-size: 13px; font-weight: 600; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.prolong-order-meta {
  font-size: 11px; color: var(--text-muted); display: flex; gap: 8px;
}

.prolong-order-status {
  display: flex; align-items: center; gap: 6px; min-width: 120px;
}

.prolong-order-actions {
  display: flex; gap: 6px;
}

.prolong-btn {
  padding: 6px 14px; border-radius: 6px; border: none; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}

.prolong-btn.primary { background: var(--accent); color: #fff; }
.prolong-btn.primary:hover { background: var(--accent-hover); }
.prolong-btn.secondary { background: none; border: 1px solid var(--border); color: var(--text-secondary); }
.prolong-btn.secondary:hover { border-color: var(--accent); color: var(--accent); }

.dmfav-range-inputs {
  display: flex; align-items: center; gap: 8px;
}

/* Commandes extra statuses */
.order-status-badge.dispute { background: var(--red-dim); color: var(--red); }
.order-status-badge.cancelled { background: rgba(100,100,120,0.15); color: #888899; }

.order-stat-card.red { border-color: var(--red); background: var(--red-dim); }
.order-stat-card.red .order-stat-value { color: var(--red); }

@media (max-width: 1200px) {
  .orders-stats { grid-template-columns: repeat(2, 1fr); }
  .dressing-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* ancien 768px orders remplace par le bloc responsive complet en bas du fichier */

/* ============================================================
   PHOTO GHOST v6
   ============================================================ */

.pg-v-badge {
  font-size: 10px; color: var(--accent);
  background: rgba(var(--accent-rgb), 0.15); padding: 2px 8px;
  border-radius: 4px; margin-left: 8px;
}

.pg-layout { display: flex; gap: 0; height: calc(100vh - 120px); }

.pg-sidebar {
  width: 380px; flex-shrink: 0; overflow-y: auto;
  background: var(--bg-card); border-right: 1px solid var(--border);
  padding: 0;
}

/* Sidebar sections */
.pg-sb-sec { border-bottom: 1px solid var(--border); padding: 14px 16px; }
.pg-sb-lbl {
  font-size: 11px; color: var(--text-muted); letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 10px; display: block; font-weight: 600;
}

/* API */
.pg-api-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pg-api-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-muted); flex-shrink: 0; transition: all 0.3s;
}
.pg-api-dot.ok { background: var(--green); box-shadow: 0 0 6px var(--green); }
.pg-api-dot.err { background: var(--red); }
.pg-api-txt { font-size: 12px; color: var(--text-muted); }

/* Fields */
.pg-field { margin-bottom: 12px; }
.pg-field label {
  font-size: 11px; color: var(--text-muted); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 5px; display: block;
}
.pg-field input, .pg-field select {
  width: 100%; background: var(--bg-primary);
  border: 1px solid var(--border); color: var(--text-primary);
  padding: 9px 12px; border-radius: 6px; font-size: 13px;
  outline: none; transition: border-color 0.15s;
}
.pg-field input:focus, .pg-field select:focus { border-color: var(--accent); }
.pg-field-row { display: flex; gap: 6px; }
.pg-field-row .pg-field { flex: 1; }

/* Profiles */
.pg-profile-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.pg-profile-item {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid transparent; transition: all 0.15s;
}
.pg-profile-item:hover { background: var(--bg-hover); }
.pg-profile-item.active { background: var(--accent-dim); border-color: rgba(var(--accent-rgb), 0.3); }
.pg-profile-avatar {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0;
}
.pg-profile-info { flex: 1; min-width: 0; }
.pg-profile-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-profile-sub { font-size: 11px; color: var(--text-muted); }
.pg-profile-del {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 13px; opacity: 0; transition: all 0.15s; padding: 2px 4px; flex-shrink: 0;
}
.pg-profile-item:hover .pg-profile-del { opacity: 1; }
.pg-profile-del:hover { color: var(--red); }
.pg-btn-new {
  width: 100%; padding: 9px;
  background: rgba(var(--accent-rgb), 0.1); border: 1px dashed rgba(var(--accent-rgb), 0.3);
  color: var(--accent); border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; transition: all 0.15s;
}
.pg-btn-new:hover { background: rgba(var(--accent-rgb), 0.2); }

/* Toggle */
.pg-toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.pg-toggle-row:last-child { border-bottom: none; }
.pg-tl { font-size: 13px; font-weight: 600; }
.pg-td { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pg-toggle { position: relative; width: 38px; height: 20px; flex-shrink: 0; }
.pg-toggle input { display: none; }
.pg-ts {
  position: absolute; inset: 0; background: var(--bg-hover);
  border-radius: 10px; cursor: pointer; transition: background 0.2s;
}
.pg-ts::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  background: var(--text-muted); border-radius: 50%;
  top: 3px; left: 3px; transition: all 0.2s;
}
.pg-toggle input:checked + .pg-ts { background: rgba(var(--accent-rgb), 0.3); }
.pg-toggle input:checked + .pg-ts::after { background: var(--accent); transform: translateX(18px); }

/* Slider */
.pg-sl-row { padding: 6px 0; }
.pg-sl-row label {
  font-size: 11px; color: var(--text-muted); letter-spacing: 1px;
  text-transform: uppercase; display: flex; justify-content: space-between; margin-bottom: 4px;
}
.pg-sl-row label span { color: var(--accent); font-weight: 700; }
.pg-sl-row input[type=range] { width: 100%; accent-color: var(--accent); }
.pg-sl-wrap { transition: opacity 0.2s; }

/* Main area */
.pg-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.pg-main-header {
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.pg-badge { display: flex; align-items: center; gap: 12px; }
.pg-bdot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); transition: all 0.3s; }
.pg-btext { font-size: 15px; font-weight: 600; }
.pg-bsub { font-size: 11px; color: var(--text-muted); }
.pg-acts { display: flex; gap: 10px; }
.pg-btn-sm { font-size: 13px; padding: 8px 16px; }
.pg-btn-process { font-size: 13px; padding: 9px 18px; }
.pg-btn-process:disabled { opacity: 0.4; cursor: not-allowed; }

/* Drop zone */
.pg-drop-zone {
  margin: 16px 20px; border: 2px dashed var(--border);
  border-radius: 12px; padding: 36px; text-align: center;
  cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.pg-drop-zone:hover, .pg-drop-zone.drag-over {
  border-color: var(--accent); background: var(--accent-dim);
}
.pg-di { font-size: 32px; margin-bottom: 8px; }
.pg-dt { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.pg-ds { font-size: 12px; color: var(--text-muted); }

/* File grid */
.pg-file-grid {
  flex: 1; overflow-y: auto; padding: 0 24px 24px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px; align-content: start;
}
.pg-fc {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; position: relative; transition: border-color 0.2s;
}
.pg-fc.done { border-color: var(--green); }
.pg-fc.error { border-color: var(--red); }
.pg-fc.processing { border-color: var(--yellow); }
.pg-fc img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--bg-primary); }
.pg-fc-ov {
  position: absolute; top: 0; left: 0; right: 0; bottom: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.2s;
}
.pg-fc.done .pg-fc-ov, .pg-fc.error .pg-fc-ov, .pg-fc.processing .pg-fc-ov { opacity: 1; }
.pg-fc-info { padding: 8px 10px; }
.pg-fc-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.pg-fc-meta { font-size: 11px; color: var(--text-muted); }
.pg-fc-dl {
  display: none; width: 100%; padding: 5px;
  background: rgba(34,197,94,0.15); border: none;
  border-top: 1px solid rgba(34,197,94,0.2);
  color: var(--green); font-size: 9px; font-weight: 700;
  cursor: pointer; letter-spacing: 1px;
}
.pg-fc-dl:hover { background: rgba(34,197,94,0.25); }
.pg-fc.done .pg-fc-dl { display: block; }
.pg-fc-rm {
  position: absolute; top: 5px; right: 5px; width: 18px; height: 18px;
  background: rgba(0,0,0,0.7); border: none; color: white;
  border-radius: 4px; cursor: pointer; font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.15s;
}
.pg-fc:hover .pg-fc-rm { opacity: 1; }
.pg-fc-rm:hover { background: var(--red); }

/* Progress & Log */
.pg-prog-bar { height: 3px; background: var(--border); flex-shrink: 0; display: none; }
.pg-prog-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent)); transition: width 0.3s; width: 0%; }
.pg-log-bar {
  background: var(--bg-card); border-top: 1px solid var(--border);
  padding: 6px 20px; font-size: 9px; color: var(--text-muted);
  flex-shrink: 0; display: none; max-height: 70px; overflow-y: auto;
}
.pg-log-e { line-height: 1.8; }
.pg-log-e.ok { color: var(--green); }
.pg-log-e.err { color: var(--red); }
.pg-log-e.info { color: var(--yellow); }

/* Modal */
.pg-modal-ov {
  position: fixed; inset: 0; background: rgba(0,0,0,0.75);
  display: none; align-items: center; justify-content: center; z-index: 100;
}
.pg-modal-ov.open { display: flex; }
.pg-modal {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 24px; width: 400px;
  max-width: 95vw; max-height: 90vh; overflow-y: auto;
}
.pg-modal-title { font-size: 17px; font-weight: 700; margin-bottom: 18px; }
.pg-modal-acts { display: flex; gap: 8px; margin-top: 18px; justify-content: flex-end; }

/* GPS preview */
.pg-gps-preview {
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px 10px; margin-top: 6px;
  font-size: 10px; color: var(--accent);
  display: flex; justify-content: space-between; align-items: center;
}
.pg-gps-regen {
  background: none; border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent); border-radius: 4px; cursor: pointer;
  font-size: 10px; padding: 3px 8px; transition: all 0.15s;
}
.pg-gps-regen:hover { background: rgba(var(--accent-rgb), 0.2); }


/* ============================================================
   GUIDE VINTED
   ============================================================ */

.guide-badge-tag {
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 4px 12px;
  border-radius: 100px;
  font-weight: 600;
}

.guide-content {
  padding: 0 24px 60px;
  max-width: 900px;
  overflow-y: auto;
  height: calc(100vh - 80px);
}

.guide-warning {
  background: var(--red-dim);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin: 20px 0 32px;
  display: flex; gap: 12px; align-items: flex-start;
}
.guide-warning-icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.guide-warning-text { font-size: 13px; color: #fca5a5; line-height: 1.6; }
.guide-warning-text strong { color: #f87171; }

.guide-section { margin-bottom: 48px; }
.guide-section-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 24px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.guide-section-num {
  width: 36px; height: 36px;
  background: var(--accent);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: white; flex-shrink: 0;
}
.guide-section-title { font-size: 18px; font-weight: 700; }
.guide-section-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.guide-steps { display: flex; flex-direction: column; gap: 12px; }

.guide-step {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex; gap: 14px;
}
.guide-step.good { border-color: rgba(34,197,94,0.2); }
.guide-step.danger { border-color: rgba(239,68,68,0.2); }

.guide-step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--accent);
  flex-shrink: 0; margin-top: 2px;
}
.guide-step.good .guide-step-num { background: var(--green-dim); border-color: rgba(34,197,94,0.3); color: var(--green); }
.guide-step.danger .guide-step-num { background: var(--red-dim); border-color: rgba(239,68,68,0.3); color: var(--red); }

.guide-step-body { flex: 1; }
.guide-step-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.guide-step-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

.guide-tag {
  display: inline-flex; padding: 2px 8px;
  border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
}
.guide-tag.green { background: var(--green-dim); color: var(--green); }
.guide-tag.red { background: var(--red-dim); color: var(--red); }
.guide-tag.yellow { background: var(--yellow-dim); color: var(--yellow); }

.guide-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 10px; }
.guide-table th { background: var(--bg-hover); padding: 8px 12px; text-align: left; font-weight: 600; color: var(--text-muted); border-bottom: 1px solid var(--border); font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; }
.guide-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: top; }
.guide-table tr:last-child td { border-bottom: none; }
.guide-table tr:hover td { background: rgba(255,255,255,0.02); }

/* Timeline */
.guide-timeline { display: flex; flex-direction: column; gap: 0; margin-top: 16px; }
.guide-tl-item { display: flex; gap: 16px; }
.guide-tl-left { display: flex; flex-direction: column; align-items: center; }
.guide-tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 16px; }
.guide-tl-line { width: 2px; background: var(--border); flex: 1; min-height: 16px; }
.guide-tl-item:last-child .guide-tl-line { display: none; }
.guide-tl-content { flex: 1; padding: 10px 0 20px; }
.guide-tl-time { font-size: 10px; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.guide-tl-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.guide-tl-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

/* Cards grid anti-patterns */
.guide-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; margin-top: 16px; }
.guide-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.guide-card.bad { border-color: rgba(239,68,68,0.2); background: rgba(239,68,68,0.03); }
.guide-card-icon { font-size: 22px; margin-bottom: 8px; }
.guide-card-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.guide-card-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* Checklist finale */
.guide-checklist-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 13px;
  line-height: 2;
}
.guide-checklist-label { font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 1px; margin-bottom: 8px; }
.guide-check { padding-left: 4px; }
.guide-check.ok::before { content: "\2713  "; color: var(--green); font-weight: 700; }
.guide-check.bad::before { content: "\2717  "; color: var(--red); font-weight: 700; }

/* ============================================================
   MOBILE TOPBAR + OVERLAY (hidden on desktop)
   ============================================================ */
.mobile-topbar {
  display: none;
  position: fixed; top: 0; left: 0; right: 0;
  height: 48px; z-index: 1001;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  align-items: center; gap: 12px;
  padding: 0 16px;
}
.mobile-menu-btn {
  background: none; border: none; color: var(--text-primary);
  font-size: 22px; cursor: pointer; padding: 4px 8px;
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* ============================================================
   RESPONSIVE — TABLETTE (max 768px)
   ============================================================ */
@media (max-width: 768px) {
  body { flex-direction: column; }

  .mobile-topbar { display: flex; }

  .sidebar {
    position: fixed; left: -260px; top: 0; bottom: 0;
    width: 240px; z-index: 1000;
    transition: left 0.25s ease;
    padding-top: 12px;
  }
  .sidebar.mobile-open { left: 0; }

  .main {
    margin-top: 48px;
    padding: 16px 14px;
    height: calc(100vh - 48px);
  }

  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .page-header h1 { font-size: 20px; }
  .date-filters { flex-wrap: wrap; }

  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .charts-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }

  /* Chatbox */
  .chatbox-layout {
    flex-direction: column;
    height: calc(100vh - 48px);
    margin: -16px -14px;
  }
  .conv-list-panel { width: 100%; height: 45%; border-right: none; border-bottom: 1px solid var(--border); }
  .chat-panel { height: 55%; }
  .chat-header { padding: 8px 12px; }
  .chat-messages { padding: 12px; }
  .chat-input-area { padding: 8px 12px; }

  /* Orders */
  .orders-stats { grid-template-columns: 1fr 1fr; }
  .order-card { flex-wrap: wrap; }

  /* Photo Ghost */
  .pg-layout { flex-direction: column; height: auto; }
  .pg-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); max-height: 40vh; }
  .pg-main { height: 60vh; }
}

/* ============================================================
   RESPONSIVE — TELEPHONE (max 480px)
   ============================================================ */
@media (max-width: 480px) {
  .main { padding: 12px 10px; }

  .page-header h1 { font-size: 18px; }
  .date-filters { gap: 3px; }
  .filter-btn { padding: 5px 10px; font-size: 11px; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr; gap: 8px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 22px; }

  /* Chatbox — fullscreen */
  .chatbox-layout {
    flex-direction: column;
    margin: -12px -10px;
    height: calc(100vh - 48px);
  }
  .conv-list-panel {
    width: 100%; height: 50%;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .conv-list-header { padding: 8px 10px; }
  .conv-list-header h3 { font-size: 14px; }
  .conv-search { padding: 6px 10px; }
  .conv-search input { font-size: 12px; }
  .conv-item { padding: 8px 10px; }
  .conv-avatar { width: 36px; height: 36px; font-size: 12px; }
  .conv-name { font-size: 12px; }

  .chat-panel { height: 50%; }
  .chat-header { padding: 8px 10px; gap: 6px; }
  .chat-avatar { width: 30px; height: 30px; }
  .chat-messages { padding: 8px; gap: 6px; }
  .msg-bubble { padding: 8px 10px; font-size: 12px; max-width: 85%; }
  .chat-input-area { padding: 6px 8px; }
  .chat-input-area input { font-size: 12px; padding: 8px 10px; }
  .chat-send-btn { width: 34px; height: 34px; font-size: 14px; }

  /* Item detail sidebar */
  .item-detail-panel { width: 100% !important; position: absolute; right: 0; top: 0; bottom: 0; z-index: 10; }

  /* Orders */
  .orders-stats { grid-template-columns: 1fr; }
  .orders-header-actions { flex-direction: column; gap: 6px; }
  .order-card { padding: 10px; }
  .order-item-img { width: 40px; height: 40px; }
  .order-info { font-size: 12px; }

  /* Settings */
  .setting-group { padding: 14px; }
  .setting-label { font-size: 12px; }
  .setting-input { font-size: 12px; padding: 8px 10px; }

  /* DM Fav */
  .dmfav-msg-card { padding: 10px; }

  /* Dressing */
  .dressing-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .dressing-card { padding: 8px; }
  .dressing-img { height: 140px; }

  /* Photo Ghost */
  .pg-layout { flex-direction: column; height: auto; min-height: calc(100vh - 80px); }
  .pg-sidebar { width: 100%; max-height: 35vh; border-right: none; border-bottom: 1px solid var(--border); }
  .pg-main { min-height: 50vh; }
  .pg-sb-sec { padding: 8px 10px; }
  .pg-field label { font-size: 10px; }
  .pg-field input, .pg-field select, .pg-field textarea { font-size: 12px; padding: 6px 8px; }
  .pg-btn { padding: 8px 12px; font-size: 12px; }

  /* Guide */
  .guide-cards-grid { grid-template-columns: 1fr; }

  /* Login */
  .login-card { padding: 24px 20px; width: 95vw; }
  .login-logo { font-size: 24px; }

  /* Prolongation */
  .prolong-order-card { flex-wrap: wrap; }
  .prolong-order-img { width: 40px; height: 40px; }
  .prolong-actions { min-width: 100%; justify-content: flex-start; margin-top: 6px; }

  /* Tables generiques */
  table { font-size: 11px; }
  th, td { padding: 6px 8px; }
}

/* ============================================================
   Page Extension — Download & Install
   ============================================================ */

.extension-page {
  max-width: 760px;
}

.extension-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  margin-bottom: 24px;
}

.extension-icon-large {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}

.extension-hero-text h2 {
  margin: 0 0 4px 0;
  font-size: 22px;
  color: var(--text-primary);
}

.extension-version {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}

.extension-desc {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.extension-actions {
  margin-bottom: 28px;
}

.extension-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  transition: all 0.2s;
}

.extension-download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),  0.3);
}

.extension-instructions {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}

.extension-instructions h3 {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: var(--text-primary);
}

.install-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.install-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.step-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-content strong {
  display: block;
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 2px;
}

.step-content p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.step-content code {
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--accent);
}

.extension-info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.extension-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.extension-info-card h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--text-primary);
}

.ext-file-list, .ext-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ext-file-list li, .ext-feature-list li {
  padding: 6px 0;
  font-size: 13px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

.ext-file-list li:last-child, .ext-feature-list li:last-child {
  border-bottom: none;
}

.ext-file-list code {
  color: var(--accent);
  font-size: 12px;
  background: var(--bg-input);
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
}

.ext-feature-list li::before {
  content: "\2713 ";
  color: var(--green);
  font-weight: 700;
  margin-right: 6px;
}

@media (max-width: 768px) {
  .extension-hero { flex-direction: column; text-align: center; }
  .extension-info-cards { grid-template-columns: 1fr; }
  .extension-download-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   DEBANNISSEMENT TOOL (.ub-)
   ============================================================ */

/* Status badge */
.ub-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--red-dim);
  color: var(--red);
}
.ub-status-badge.active {
  background: var(--green-dim);
  color: var(--green);
}

/* Sub-tabs */
.ub-tabs {
  display: flex;
  gap: 4px;
  padding: 0 0 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  overflow-x: auto;
}
.ub-tab {
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.ub-tab:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.ub-tab.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Panels */
.ub-panel {
  display: none;
}
.ub-panel.active {
  display: block;
}

/* Stats grid */
.ub-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.ub-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  transition: all 0.2s;
}
.ub-stat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),  0.1);
}
.ub-stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.2;
}
.ub-stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
  font-weight: 600;
}

/* Section titles */
.ub-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Campaign cards */
.ub-camp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  transition: all 0.2s;
}
.ub-camp-card:hover {
  border-color: var(--border-light);
}
.ub-camp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ub-camp-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.ub-camp-status {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}
.ub-camp-status.running {
  background: var(--green-dim);
  color: var(--green);
}
.ub-camp-status.stopped {
  background: var(--red-dim);
  color: var(--red);
}
.ub-camp-reason {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.ub-camp-stats {
  display: flex;
  gap: 20px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.ub-camp-stat {
  text-align: center;
  flex: 1;
}
.ub-camp-stat-val {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}
.ub-camp-stat-lbl {
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ub-camp-actions {
  display: flex;
  gap: 8px;
}
.ub-camp-actions button {
  flex: 1;
  padding: 7px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-primary);
}
.ub-camp-actions button:hover {
  border-color: var(--accent);
}
.ub-camp-actions .ub-btn-danger {
  background: var(--red-dim);
  color: var(--red);
  border-color: var(--red);
}

/* Form elements */
.ub-form-group {
  margin-bottom: 12px;
}
.ub-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 6px;
}
.ub-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  transition: all 0.2s;
}
.ub-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb),  0.15);
}
.ub-input::placeholder {
  color: var(--text-muted);
}
.ub-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Language toggle */
.ub-lang-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ub-lang-btn {
  padding: 10px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}
.ub-lang-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Result */
.ub-result {
  background: var(--green-dim);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 12px;
}
.ub-result-title {
  font-weight: 700;
  color: var(--green);
  font-size: 12px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ub-result-detail {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 3px 0;
}
.ub-result-detail strong {
  color: var(--text-primary);
}

/* Filter buttons */
.ub-filter-btn {
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.ub-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Response cards */
.ub-resp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
  transition: all 0.2s;
}
.ub-resp-card:hover {
  border-color: var(--border-light);
}
.ub-resp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ub-resp-from {
  font-size: 12px;
  color: var(--text-secondary);
}
.ub-resp-date {
  font-size: 10px;
  color: var(--text-muted);
}
.ub-resp-subject {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 6px 0;
}
.ub-resp-preview {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category badges */
.ub-cat-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ub-cat-badge.pending {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.ub-cat-badge.refused {
  background: var(--red-dim);
  color: var(--red);
}
.ub-cat-badge.unbanned {
  background: var(--green-dim);
  color: var(--green);
}

/* Account items */
.ub-acc-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ub-acc-email {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.ub-acc-sub {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.ub-acc-actions {
  display: flex;
  gap: 6px;
}
.ub-acc-actions button {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-secondary);
  transition: all 0.2s;
}
.ub-acc-actions button:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

/* Cards */
.ub-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.ub-card-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

/* Secondary button */
.ub-btn-secondary {
  padding: 8px 14px;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.ub-btn-secondary:hover {
  border-color: var(--accent);
}

/* API status */
.ub-api-status {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}
.ub-api-status.ok {
  color: var(--green);
}
.ub-api-status.err {
  color: var(--red);
}

/* Empty state */
.ub-empty {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Guide styles */
.ub-guide-step {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.ub-guide-step:last-child {
  border-bottom: none;
}
.ub-guide-step-num {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.ub-guide-step-content {
  flex: 1;
}
.ub-guide-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.ub-guide-step-content p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 6px;
}
.ub-code {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 11px;
  color: var(--green);
  margin: 8px 0;
  line-height: 1.6;
}
.ub-guide-warning {
  background: var(--yellow-dim);
  border: 1px solid var(--yellow);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11px;
  color: var(--yellow);
  margin: 8px 0;
  font-weight: 500;
}
.ub-guide-tip {
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11px;
  color: var(--accent);
  margin: 8px 0;
  font-weight: 500;
}
.ub-guide-categories {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 2;
  margin: 8px 0;
}

@media (max-width: 768px) {
  .ub-stats-grid { grid-template-columns: 1fr 1fr; }
  .ub-form-row { grid-template-columns: 1fr; }
  .ub-tabs { gap: 2px; }
  .ub-tab { padding: 6px 10px; font-size: 11px; }
}

/* ============================================================
   STUDIO IA (.sia-)
   ============================================================ */

.sia-credits-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.05));
  border: 1px solid rgba(var(--accent-rgb), 0.3);
  color: var(--accent);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 16px;
}
.sia-mode-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.sia-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.sia-mode:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.sia-mode.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.sia-layout {
  display: flex;
  gap: 24px;
  min-height: calc(100vh - 200px);
}
.sia-left {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.sia-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.sia-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.sia-upload-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  margin-top: 12px;
}
.sia-upload-zone {
  position: relative;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-card);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sia-upload-zone:hover, .sia-upload-zone.dragover {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.05);
}
.sia-upload-zone.has-file {
  border-style: solid;
  border-color: var(--green);
  padding: 8px;
}
.sia-upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
}
.sia-upload-placeholder svg { opacity: 0.4; }
.sia-upload-placeholder p {
  margin: 0;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
}
.sia-preview-img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 6px;
  object-fit: contain;
}
.sia-btn-browse {
  padding: 4px 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.sia-btn-browse:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.sia-credit-tag {
  font-size: 9px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.sia-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  font-size: 12px;
  color: var(--text-secondary);
}
.sia-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
}
.sia-switch input { opacity: 0; width: 0; height: 0; }
.sia-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 20px;
  transition: all 0.2s;
}
.sia-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: all 0.2s;
}
.sia-switch input:checked + .sia-slider {
  background: var(--accent);
}
.sia-switch input:checked + .sia-slider::before {
  transform: translateX(16px);
}
.sia-collapsible { margin: 10px 0; }
.sia-collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.sia-collapsible-header:hover { border-color: var(--accent); }
.sia-collapsible-header svg { transition: transform 0.2s; }
.sia-collapsible.open .sia-collapsible-header svg { transform: rotate(180deg); }
.sia-collapsible-body { display: none; padding: 10px 0; }
.sia-collapsible.open .sia-collapsible-body { display: block; }
.sia-fond-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sia-fond-item {
  padding: 8px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.sia-fond-item:hover { border-color: var(--accent); color: var(--text-primary); }
.sia-fond-item.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
/* Multi-images mode */
.sia-mode-panel { margin-top: 4px; }
.sia-multi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}
.sia-multi-slot {
  aspect-ratio: 1;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}
.sia-multi-slot:hover { border-color: var(--accent); color: var(--accent); }
.sia-multi-slot.has-img { border-style: solid; padding: 0; }
.sia-multi-slot.has-img img { width: 100%; height: 100%; object-fit: cover; }
.sia-multi-slot-del {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 18px;
  height: 18px;
  background: rgba(239,68,68,0.9);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.sia-multi-slot:hover .sia-multi-slot-del { opacity: 1; }
.sia-multi-count {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.sia-multi-count span { color: var(--accent); }

/* Création mannequin mode */
.sia-crea-style-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sia-crea-style {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-muted);
}
.sia-crea-style span { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.sia-crea-style:hover { border-color: var(--accent); color: var(--text-primary); }
.sia-crea-style.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.sia-crea-cadrage-grid {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sia-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.sia-prompt-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.sia-prompt-save-btn:hover { border-color: var(--accent); color: var(--accent); }
.sia-saved-prompts-area {
  margin-top: 6px;
  padding: 8px;
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sia-saved-prompts-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.sia-saved-prompts-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sia-saved-prompt {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.sia-saved-prompt:hover { border-color: var(--accent); }
.sia-saved-prompt-name {
  flex: 1;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sia-saved-prompt-del {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 0.15s;
}
.sia-saved-prompt:hover .sia-saved-prompt-del { opacity: 1; }
.sia-saved-prompt-del:hover { color: #ef4444; }
.sia-fond-custom-area {
  margin-top: 8px;
  padding: 8px;
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.sia-fond-custom-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.sia-fond-custom-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sia-fond-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
}
.sia-fond-thumb:hover { border-color: var(--accent); }
.sia-fond-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.sia-fond-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sia-fond-thumb-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: rgba(239,68,68,0.9);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.sia-fond-thumb:hover .sia-fond-thumb-del { opacity: 1; }
.sia-fond-add-btn {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  border: 2px dashed var(--border);
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sia-fond-add-btn:hover { border-color: var(--accent); color: var(--accent); }
.sia-mannequin-section { display: none; }
.sia-mannequin-section.visible { display: block; }
.sia-mannequin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.sia-mannequin-thumb {
  position: relative;
  border: 2px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  aspect-ratio: 3/4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
}
.sia-mannequin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sia-mannequin-thumb:hover { border-color: var(--accent); }
.sia-mannequin-thumb.active {
  border-color: var(--green);
  box-shadow: 0 0 0 2px rgba(16,185,129,0.25);
}
.sia-add-mannequin {
  font-size: 20px;
  color: var(--text-secondary);
  border-style: dashed;
}
.sia-add-mannequin:hover { color: var(--accent); border-color: var(--accent); }
.sia-form-group { margin-bottom: 14px; }
.sia-input {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.sia-input:focus { outline: none; border-color: var(--accent); }
.sia-input::placeholder { color: var(--text-secondary); opacity: 0.6; }
.sia-textarea { min-height: 70px; resize: vertical; }
.sia-textarea-lg { min-height: 100px; resize: vertical; }
.sia-gen-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.sia-gen-counter span { font-size: 12px; color: var(--text-secondary); }
.sia-gen-counter input[type="number"] {
  width: 50px;
  padding: 4px 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 13px;
  text-align: center;
}
.sia-btn-plus {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}
.sia-btn-plus:hover { border-color: var(--accent); color: var(--accent); }
.sia-btn-generate {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, var(--accent), #6d28d9);
  border: none;
  border-radius: var(--radius);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sia-btn-generate:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.4);
}
.sia-btn-generate:disabled { opacity: 0.4; cursor: not-allowed; }
.sia-gen-notice {
  text-align: center;
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
  margin-top: 6px;
}
.sia-result-area {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  transition: all 0.2s;
}
.sia-result-area.has-result {
  border-style: solid;
  border-color: var(--green);
  padding: 12px;
}
.sia-result-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  opacity: 0.5;
}
.sia-result-placeholder svg { opacity: 0.3; }
.sia-result-placeholder p { margin: 0; font-size: 12px; }
.sia-result-img {
  max-width: 100%;
  max-height: 400px;
  border-radius: 8px;
  object-fit: contain;
}
.sia-details-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.sia-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sia-details-header .sia-section-title { margin: 0; padding: 0; border: 0; }
.sia-form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.sia-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.sia-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.sia-gender-toggle { display: flex; gap: 4px; }
.sia-gender-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.sia-gender-btn:hover { border-color: var(--accent); }
.sia-gender-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.sia-colis-toggle { display: flex; gap: 4px; }
.sia-colis-btn {
  padding: 6px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.sia-colis-btn:hover { border-color: var(--accent); }
.sia-colis-btn.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.sia-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  margin-top: 6px;
}
.sia-check-row input[type="checkbox"] { accent-color: var(--accent); }
.sia-char-count {
  font-size: 11px;
  color: var(--text-secondary);
  opacity: 0.7;
}
.sia-cat-selected {
  padding: 8px 12px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sia-cat-picker {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sia-cat-breadcrumb {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(var(--accent-rgb), 0.05);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  min-height: 32px;
}
.sia-cat-crumb {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.15s;
  white-space: nowrap;
}
.sia-cat-crumb:hover { background: rgba(var(--accent-rgb), 0.15); }
.sia-cat-crumb-current { color: var(--text-primary); cursor: default; font-weight: 600; }
.sia-cat-crumb-current:hover { background: none; }
.sia-cat-crumb-sep { color: var(--text-muted); font-size: 10px; user-select: none; }
.sia-cat-crumb-home { display: flex; align-items: center; }
.sia-cat-search-input {
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  padding: 7px 10px !important;
  background: transparent !important;
}
.sia-cat-search-input:focus { border-bottom-color: var(--accent) !important; }
.sia-cat-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow-y: auto;
}
.sia-cat-list::-webkit-scrollbar { width: 4px; }
.sia-cat-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.sia-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.sia-cat-item:last-child { border-bottom: none; }
.sia-cat-item:hover { background: rgba(var(--accent-rgb), 0.08); color: var(--text-primary); }
.sia-cat-item.active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}
.sia-cat-item-arrow {
  font-size: 14px;
  color: var(--text-muted);
  transition: color 0.15s;
}
.sia-cat-item:hover .sia-cat-item-arrow { color: var(--accent); }
.sia-cat-item-leaf { padding-left: 16px; }
.sia-cat-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
}
.sia-label-lock { display: flex; align-items: center; gap: 6px; }
.sia-lock-btn {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--text-muted);
  opacity: 0.5;
  transition: all 0.2s;
  border-radius: 3px;
  line-height: 1;
}
.sia-lock-btn:hover { opacity: 0.8; color: var(--text-secondary); }
.sia-lock-btn.locked {
  opacity: 1;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
}
.sia-color-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.sia-color-pill {
  padding: 4px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}
.sia-color-pill:hover { border-color: var(--accent); color: var(--text-primary); }
.sia-color-pill.active {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.sia-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sia-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: rgba(var(--accent-rgb), 0.1);
  border: 1px solid var(--accent);
  border-radius: 14px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}
.sia-tag-remove { cursor: pointer; font-size: 13px; line-height: 1; opacity: 0.7; }
.sia-tag-remove:hover { opacity: 1; }
.sia-info-box {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.5;
  margin-top: 6px;
}
.sia-info-box.warning {
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  color: #f59e0b;
}
.sia-info-box.info {
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.2);
  color: #60a5fa;
}
.sia-action-bar {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.sia-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.sia-btn-secondary:hover { border-color: var(--accent); color: var(--text-primary); }
.sia-btn-publish {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: linear-gradient(135deg, var(--vinted), #07959c);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
}
.sia-btn-publish:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(9,177,186,0.3);
}
.sia-btn-publish:disabled { opacity: 0.4; cursor: not-allowed; }

/* Modal Preferences IA */
.sia-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.sia-modal {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 520px;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.sia-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.sia-modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 600;
}
.sia-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s;
}
.sia-modal-close:hover { color: var(--text-primary); }
.sia-modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}
.sia-modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sia-modal-tab:hover { color: var(--text-secondary); }
.sia-modal-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.sia-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.sia-pref-panel { display: none; }
.sia-pref-panel.active { display: block; }
.sia-pref-group { margin-bottom: 16px; }
.sia-pref-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.sia-pref-options {
  display: flex;
  gap: 6px;
}
.sia-pref-opt {
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.sia-pref-opt:hover { border-color: var(--accent); color: var(--text-primary); }
.sia-pref-opt.active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.sia-pref-toggles { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sia-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
  .sia-layout { flex-direction: column; }
  .sia-left { flex: none; width: 100%; }
  .sia-form-row-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sia-mode-tabs { flex-wrap: wrap; }
  .sia-form-row-3, .sia-form-row-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   GUIDE MODAL (overlay global)
   ============================================================ */
.guide-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(var(--accent-rgb), 0.08);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  border-radius: 50%;
  color: var(--accent);
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  margin-left: 10px;
}
.guide-modal-btn:hover {
  background: rgba(var(--accent-rgb), 0.18);
  border-color: var(--accent);
  transform: scale(1.1);
}
.guide-modal-btn-sm {
  width: 24px;
  height: 24px;
}

.guide-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.guide-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.guide-modal {
  background: var(--bg-secondary, #16161e);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 560px;
  max-width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--accent-rgb), 0.1);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.guide-modal-overlay.active .guide-modal {
  transform: translateY(0) scale(1);
}

.guide-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border);
}
.guide-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.guide-modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
}
.guide-modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
  border-radius: 6px;
}
.guide-modal-close:hover {
  color: #fff;
  transform: scale(1.15);
}

.guide-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.guide-modal-body h3 {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  margin: 20px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.guide-modal-body h3:first-child { margin-top: 0; }
.guide-modal-body h4 {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  margin: 18px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.guide-modal-body h4:first-child { margin-top: 0; }
.guide-modal-body p {
  color: var(--text-secondary);
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 8px;
}
.guide-modal-body p strong {
  color: #e0e0e0;
}
.guide-modal-body p:last-child { margin-bottom: 0; }

/* Scrollbar for guide modal body */
.guide-modal-body::-webkit-scrollbar { width: 5px; }
.guide-modal-body::-webkit-scrollbar-track { background: transparent; }
.guide-modal-body::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.3); border-radius: 4px; }
.guide-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.5); }

@media (max-width: 600px) {
  .guide-modal {
    width: 100%;
    max-width: 100vw;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    margin-top: auto;
  }
  .guide-modal-overlay {
    align-items: flex-end;
  }
}

/* ============================================================
   CENTRE D'AIDE (page globale)
   ============================================================ */
#page-centre-aide .page-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 4px 0 0;
}

.aide-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  margin-bottom: 24px;
}
.aide-search-bar svg { color: var(--text-secondary); flex-shrink: 0; }
.aide-search-input {
  background: none;
  border: none;
  color: #fff;
  font-size: 14px;
  width: 100%;
  outline: none;
}
.aide-search-input::placeholder { color: var(--text-secondary); }

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

.aide-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.aide-card:hover {
  border-color: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 4px 20px rgba(var(--accent-rgb), 0.08);
}
.aide-card-important {
  border-color: rgba(var(--accent-rgb), 0.3);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(var(--accent-rgb), 0.06) 100%);
}
.aide-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--accent);
}
.aide-card h3 {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 8px;
}
.aide-card > p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 12px;
}
.aide-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s;
  opacity: 0;
}
.aide-card.expanded .aide-details {
  max-height: 1000px;
  opacity: 1;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.aide-details h4 {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  margin: 12px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.aide-details h4:first-child { margin-top: 0; }
.aide-details p {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 6px;
}
.aide-details p strong { color: #d4d4d4; }

.aide-expand-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}
.aide-expand-btn:hover { opacity: 0.8; }
.aide-card.expanded .aide-expand-btn::after { content: ''; }
.aide-card:not(.expanded) .aide-expand-btn::after { content: ''; }

@media (max-width: 600px) {
  .aide-grid { grid-template-columns: 1fr; }
}

/* ===== Studio IA — resultats generation (v2.5.0) ===== */
.sia-result-area .sia-res-status { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:10px; background:var(--bg-card,#12121a); border:1px solid var(--border,#26263a); color:var(--text-secondary,#a1a1aa); font-size:13px; margin-bottom:12px; width:100%; box-sizing:border-box; }
.sia-result-area .sia-res-status.error { border-color:rgba(239,68,68,.4); color:#fca5a5; background:rgba(239,68,68,.08); }
.sia-res-spinner { width:18px; height:18px; flex:0 0 18px; border:2px solid var(--border,#26263a); border-top-color:var(--accent,var(--accent)); border-radius:50%; animation:spin 1s linear infinite; }
.sia-res-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; width:100%; }
.sia-res-item { position:relative; border-radius:10px; overflow:hidden; background:#000; border:1px solid var(--border,#26263a); }
.sia-res-item img { display:block; width:100%; aspect-ratio:3/4; object-fit:cover; cursor:zoom-in; }
.sia-res-bar { display:flex; align-items:center; gap:6px; padding:6px 8px; font-size:11px; color:var(--text-secondary,#a1a1aa); background:var(--bg-card,#12121a); }
.sia-res-bar span { flex:1; }
.sia-res-dl, .sia-res-del { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; border:1px solid var(--border,#26263a); background:transparent; color:var(--text-primary,#fff); text-decoration:none; cursor:pointer; font-size:14px; line-height:1; }
.sia-res-dl:hover { border-color:var(--accent,var(--accent)); color:var(--accent,var(--accent)); }
.sia-res-del:hover { border-color:#ef4444; color:#ef4444; }
.sia-res-actions { display:flex; gap:8px; margin-top:10px; width:100%; }
.sia-result-area.sia-res-mode { flex-direction:column; align-items:stretch; justify-content:flex-start; padding:12px; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Studio IA v2.6.0 — selecteur moteur + resultats 9:16 */
.sia-engine-row { display:flex; align-items:center; gap:10px; margin:0 0 14px; max-width:520px; }
.sia-engine-row .sia-input { flex:1; }
.sia-res-item img { aspect-ratio:auto; max-height:460px; object-fit:contain; background:#000; }
/* Studio IA v2.7.0 — statut extension Photoroom */
.sia-prm-status { font-size:12px; color:var(--text-secondary,#a1a1aa); margin:-6px 0 14px; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.sia-prm-dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:#ef4444; }
.sia-prm-dot.on { background:var(--green,#10b981); }
.sia-prm-space { padding:2px 8px; border-radius:999px; border:1px solid var(--border,#26263a); color:var(--text-primary,#fff); }
.sia-prm-space i { font-style:normal; opacity:.6; margin-left:2px; }
.sia-prm-space.dead { opacity:.45; text-decoration:line-through; }
.sia-prm-reset { font-size:11px; padding:2px 8px; border-radius:6px; border:1px solid var(--border,#26263a); background:transparent; color:var(--text-secondary,#a1a1aa); cursor:pointer; }

/* =============================================================
   STUDIO IA v3  (prefixe .st-)
   ============================================================= */
#page-studio-ia, .st-portal { --st-gap: 16px; }
#page-studio-ia svg, .st-portal svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.st-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.st-title h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.st-title p { color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
.st-views { display: inline-flex; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.st-view { background: none; border: 0; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.st-view:hover { color: var(--text-primary); }
.st-view.active { background: var(--bg-hover); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-light); }
.st-pill { font-size: 10px; font-weight: 600; color: var(--text-secondary); background: var(--bg-input); border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; }
.st-pill:empty { display: none; }
.st-pane { display: none; }
.st-pane.active { display: block; }

/* modes */
.st-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.st-mode { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.st-mode:hover { color: var(--text-primary); border-color: var(--border-light); }
.st-mode.active { color: var(--text-primary); border-color: var(--accent); background: var(--accent-dim); }
.st-mode.active svg { stroke: var(--accent); }
.st-mode-desc { color: var(--text-muted); font-size: 12px; margin: 10px 0 18px; min-height: 16px; }

/* grille 3 colonnes */
.st-grid { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.05fr) minmax(320px, 1.25fr); gap: var(--st-gap); align-items: start; }
.st-col { display: flex; flex-direction: column; gap: var(--st-gap); min-width: 0; }
.st-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.st-card[hidden] { display: none; }
.st-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-card-head h3 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); }
.st-muted { color: var(--text-muted); font-size: 12px; }
.st-grow { flex: 1; }
.st-head-actions { display: flex; gap: 10px; }
.st-link { background: none; border: 0; color: var(--accent); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; padding: 0; }
.st-link:hover { text-decoration: underline; }

/* sources */
.st-src-single { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-src-single[hidden], .st-src-multi[hidden] { display: none; }
.st-drop { position: relative; aspect-ratio: 3 / 4; border: 1.5px dashed var(--border-light); border-radius: 10px; background: var(--bg-secondary); cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color .15s, background .15s; }
.st-drop[hidden] { display: none; }
.st-drop:hover, .st-drop.over { border-color: var(--accent); background: var(--accent-dim); }
.st-drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.st-drop.filled { border-style: solid; border-color: var(--border); }
.st-drop.filled img { display: block; }
.st-drop.filled .st-drop-empty { display: none; }
.st-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-secondary); text-align: center; padding: 10px; }
.st-drop-empty svg { width: 22px !important; height: 22px !important; stroke: var(--accent) !important; }
.st-drop-empty b { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.st-drop-empty span { font-size: 11px; color: var(--text-muted); }
.st-drop-clear { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 6px; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: none; }
.st-drop.filled .st-drop-clear, .st-multi-item .st-drop-clear { display: block; }
.st-src-multi { display: flex; flex-direction: column; gap: 10px; border-radius: 10px; }
.st-src-multi.over { outline: 1.5px dashed var(--accent); outline-offset: 4px; }
.st-multi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.st-multi-grid:empty { display: none; }
.st-multi-item { position: relative; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.st-multi-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-multi-n { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 600; background: rgba(0,0,0,.6); color: #fff; padding: 1px 6px; border-radius: 4px; }
.st-multi-add { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border: 1.5px dashed var(--border-light); border-radius: 10px; color: var(--text-secondary); font-size: 13px; cursor: pointer; }
.st-multi-add:hover { border-color: var(--accent); color: var(--text-primary); }

/* champs */
.st-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.st-field[hidden] { display: none; }
.st-field > label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.st-field-row { display: flex; gap: 10px; }
.st-input { width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; padding: 9px 11px; font: inherit; font-size: 13px; outline: none; transition: border-color .15s; }
.st-input:focus { border-color: var(--accent); }
.st-input-sm { width: auto; padding: 7px 10px; }
.st-textarea { resize: vertical; line-height: 1.5; min-height: 90px; }
.st-textarea[hidden] { display: none; }
.st-check { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.st-check input { accent-color: var(--accent); }
.st-seg { display: flex; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 2px; }
.st-seg button { flex: 1; background: none; border: 0; color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 500; padding: 7px 8px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.st-seg button.active { background: var(--bg-hover); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--border-light); }

/* moteurs */
.st-engines { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-engine { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--bg-secondary); transition: border-color .15s, background .15s; }
.st-engine input { margin-top: 2px; accent-color: var(--accent); }
.st-engine b { display: block; font-size: 13px; font-weight: 600; }
.st-engine span { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.35; }
.st-engine:hover { border-color: var(--border-light); }
.st-engine.active { border-color: var(--accent); background: var(--accent-dim); }
.st-engine.disabled { opacity: .4; cursor: not-allowed; }
.st-engine-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.st-engine-status:empty { display: none; }
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: 0 0 auto; }
.st-dot.on { background: var(--green); }
.st-spaces { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.st-space { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-light); color: var(--text-primary); }
.st-space.dead { opacity: .45; text-decoration: line-through; }

/* barre generer */
.st-gen-bar { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 12px 16px; position: sticky; bottom: 0; z-index: 2; }
.st-summary { flex: 1; font-size: 12px; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* boutons */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; white-space: nowrap; }
.st-btn-sm { padding: 6px 11px; font-size: 12px; }
.st-btn-primary { background: var(--accent); color: #fff; }
.st-btn-primary:hover { background: var(--accent-hover); }
.st-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.st-btn-primary.loading { pointer-events: none; opacity: .7; }
.st-btn-primary.loading svg { animation: spin 1s linear infinite; }
.st-btn-ghost { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); }
.st-btn-ghost:hover, .st-btn-ghost.active { border-color: var(--border-light); background: var(--bg-hover); }
.st-btn-danger { background: transparent; color: var(--red); border-color: rgba(239,68,68,.35); }
.st-btn-danger:hover { background: var(--red-dim); }
.st-btn[hidden] { display: none; }
.st-mr-auto { margin-right: auto; }
.st-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); cursor: pointer; font-size: 18px; line-height: 1; text-decoration: none; }
.st-icon-btn:hover { border-color: var(--border-light); background: var(--bg-hover); }

/* resultats */
.st-col-results { position: sticky; top: 0; }
.st-card-fill { min-height: 420px; }
.st-status { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; }
.st-status[hidden] { display: none; }
.st-status.error { color: #fca5a5; border-color: rgba(239,68,68,.35); background: var(--red-dim); }
.st-status.ok { color: #86efac; border-color: rgba(34,197,94,.3); background: var(--green-dim); }
.st-spin { width: 14px; height: 14px; margin-top: 1px; border: 2px solid var(--border-light); border-top-color: var(--accent); border-radius: 50%; animation: spin 1s linear infinite; flex: 0 0 auto; }
.st-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.st-res { margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #000; }
.st-res img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; cursor: zoom-in; }
.st-res figcaption { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 10px; background: var(--bg-secondary); font-size: 11px; color: var(--text-secondary); }
.st-res figcaption span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-res .st-icon-btn { width: 26px; height: 26px; }
.st-save-state { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.st-save-state.ok { background: var(--green); }
.st-save-state.ko { background: var(--red); }
.st-save-state.wait { background: var(--yellow); animation: stpulse 1s ease-in-out infinite; }
@keyframes stpulse { 50% { opacity: .3; } }
.st-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--text-muted); font-size: 13px; min-height: 320px; border: 1.5px dashed var(--border); border-radius: 10px; }
.st-empty svg { width: 34px !important; height: 34px !important; stroke-width: 1.3 !important; }
.st-empty-block { color: var(--text-muted); font-size: 13px; padding: 40px 0; text-align: center; grid-column: 1 / -1; }

/* bibliotheque */
.st-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.st-search { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; padding: 0 11px; color: var(--text-muted); }
.st-search:focus-within { border-color: var(--accent); }
.st-search input { flex: 1; background: none; border: 0; outline: none; color: var(--text-primary); font: inherit; font-size: 13px; padding: 9px 0; }
.st-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--accent); background: var(--accent-dim); border-radius: 10px; font-size: 13px; }
.st-selbar[hidden] { display: none; }
.st-selbar span { margin-right: auto; font-weight: 600; }
.st-lib-msg { font-size: 13px; color: var(--text-secondary); background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.st-lib-msg[hidden] { display: none; }
.st-lib-msg code { background: var(--bg-input); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.st-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.st-lib-day { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: capitalize; margin-top: 8px; }
.st-lib-day:first-child { margin-top: 0; }
.st-lib-item { position: relative; margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--bg-card); cursor: pointer; transition: border-color .15s, transform .15s; }
.st-lib-item:hover { border-color: var(--border-light); transform: translateY(-1px); }
.st-lib-item img, .st-lib-ph { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--bg-secondary); }
.st-lib-item figcaption { font-size: 11px; color: var(--text-secondary); padding: 7px 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-lib-item.used img { opacity: .55; }
.st-lib-used { position: absolute; left: 8px; top: 8px; font-size: 10px; font-weight: 600; background: rgba(0,0,0,.65); color: #fff; padding: 2px 7px; border-radius: 5px; }
.st-lib-fav { position: absolute; right: 8px; top: 8px; color: var(--yellow); }
.st-lib-fav svg { fill: var(--yellow) !important; stroke: none !important; width: 15px !important; height: 15px !important; }
.st-lib-check { position: absolute; left: 8px; bottom: 36px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #fff; background: rgba(0,0,0,.35); display: none; }
.st-lib-grid.selecting .st-lib-check { display: block; }
.st-lib-item.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.st-lib-item.sel .st-lib-check { background: var(--accent); border-color: var(--accent); }
.st-lib-more { display: flex; justify-content: center; margin-top: 16px; }

/* prompts */
.st-prompts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.st-prompt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.st-prompt-card header { display: flex; align-items: center; gap: 8px; }
.st-prompt-card h4 { font-size: 14px; font-weight: 600; flex: 1; }
.st-prompt-meta { font-size: 11px; color: var(--text-muted); }
.st-prompt-meta:empty { display: none; }
.st-prompt-card p { font-size: 12px; color: var(--text-secondary); line-height: 1.55; flex: 1; }
.st-prompt-card footer { display: flex; gap: 6px; margin-top: 4px; }
.st-tag { font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-dim); padding: 2px 7px; border-radius: 999px; }

/* modales */
.st-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(5,5,10,.72); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.st-modal[hidden] { display: none; }
.st-modal-box { width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; }
.st-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.st-modal-head h3 { font-size: 15px; font-weight: 600; }
.st-modal-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.st-modal-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); }
.st-lb-box { position: relative; display: grid; grid-template-columns: 1fr 300px; width: min(1100px, 100%); height: min(88vh, 900px); background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; }
.st-lb-img { display: flex; align-items: center; justify-content: center; background: #000; min-height: 0; }
.st-lb-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.st-lb-close { position: absolute; top: 10px; left: 10px; z-index: 2; }
.st-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; }
.st-lb-prev { left: 10px; }
.st-lb-next { right: 310px; }
.st-lb-info { padding: 18px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; border-left: 1px solid var(--border); }
.st-lb-info h4 { font-size: 15px; font-weight: 600; }
.st-lb-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 12px; margin-top: 10px; }
.st-lb-info dt { color: var(--text-muted); }
.st-lb-info dd { color: var(--text-primary); }
.st-lb-prompt { font-size: 12px; line-height: 1.55; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-top: 12px; max-height: 180px; overflow-y: auto; }
.st-lb-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }

/* toast */
.st-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; z-index: 2000; background: var(--bg-hover); border: 1px solid var(--border-light); color: var(--text-primary); font-size: 13px; padding: 10px 16px; border-radius: 9px; transition: opacity .2s, transform .2s; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.st-toast.show { opacity: 1; transform: translate(-50%, 0); }
.st-toast.ok { border-color: rgba(34,197,94,.5); }
.st-toast.error { border-color: rgba(239,68,68,.5); }

/* responsive */
@media (max-width: 1280px) {
  .st-grid { grid-template-columns: 1fr 1fr; }
  .st-col-results { grid-column: 1 / -1; position: static; }
  .st-card-fill { min-height: 0; }
}
@media (max-width: 760px) {
  .st-header { align-items: flex-start; }
  .st-views { width: 100%; }
  .st-view { flex: 1; justify-content: center; padding: 8px 6px; }
  .st-modes { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .st-mode { flex: 0 0 auto; }
  .st-grid { grid-template-columns: 1fr; }
  .st-engines { grid-template-columns: 1fr 1fr; }
  .st-field-row { flex-direction: column; }
  .st-gen-bar { position: sticky; bottom: 8px; box-shadow: 0 -6px 24px rgba(0,0,0,.45); }
  .st-results, .st-lib-grid { grid-template-columns: repeat(2, 1fr); }
  .st-prompts { grid-template-columns: 1fr; }
  .st-lb-box { grid-template-columns: 1fr; grid-template-rows: 1fr auto; height: 92vh; }
  .st-lb-info { border-left: 0; border-top: 1px solid var(--border); max-height: 42vh; }
  .st-lb-next { right: 10px; }
  .st-lb-actions { flex-direction: row; flex-wrap: wrap; }
}

/* Creation d'annonce (page en preparation) */
.an-sub { color: var(--text-secondary); font-size: 13px; margin-top: 4px; max-width: 720px; }
.an-badge { font-size: 11px; font-weight: 600; color: var(--yellow); background: var(--yellow-dim); padding: 4px 10px; border-radius: 999px; }
.an-wrap { max-width: 980px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.st-engine-status > span:not(.st-dot) { flex: 1; min-width: 0; }
/* Studio v3.1 — modes paralleles, selection, visionneuse */
.st-mode { position: relative; }
.st-mode.running::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); animation: stpulse 1.2s ease-in-out infinite; }
.st-link-muted { color: var(--text-muted); }
.st-res-note { margin-top: -4px; }
.st-res { position: relative; }
.st-res.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.st-res-check { position: absolute; top: 8px; left: 8px; z-index: 1; width: 22px; height: 22px; border-radius: 6px; border: 2px solid rgba(255,255,255,.85); background: rgba(0,0,0,.35); cursor: pointer; padding: 0; opacity: 0; transition: opacity .15s; }
.st-res:hover .st-res-check, .st-res.sel .st-res-check, .st-results:has(.st-res.sel) .st-res-check { opacity: 1; }
.st-res.sel .st-res-check { background: var(--accent); border-color: var(--accent); }
.st-res.sel .st-res-check::after { content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.st-space i { font-style: normal; color: var(--accent); margin-left: 4px; }
.st-space.busy { border-color: var(--accent); }
.st-viewer { flex-direction: column; padding: 24px 70px; }
.st-vw-fig { margin: 0; height: 100%; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; }
.st-vw-fig img { flex: 1; min-height: 0; max-width: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.st-vw-fig figcaption { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-secondary); }
.st-vw-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; }
.st-vw-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; }
.st-vw-prev { left: 16px; }
.st-vw-next { right: 16px; }
@media (max-width: 760px) { .st-viewer { padding: 56px 10px 16px; } .st-vw-nav { top: auto; bottom: 18px; transform: none; } .st-res-check { opacity: 1; } }
/* v3.2 — Super fast, qualites, espaces */
.st-seg button.disabled, .st-seg button:disabled { opacity: .35; cursor: not-allowed; }
.st-fast { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary); cursor: pointer; }
.st-fast[hidden] { display: none; }
.st-fast input { margin-top: 3px; accent-color: var(--accent); }
.st-fast b { display: block; font-size: 13px; }
.st-fast em { display: block; font-style: normal; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.st-fast:has(input:checked) { border-color: var(--accent); background: var(--accent-dim); }
.st-space.idle { opacity: .4; border-style: dashed; }
.st-space.use { border-color: var(--border-light); }
.st-space.use.busy { border-color: var(--accent); }
.st-space i.pct { color: var(--text-muted); }
/* v3.3 — panneau credits Photoroom */
.st-credits { width: 100%; margin-top: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary); padding: 0 12px; }
.st-credits summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 9px 0; list-style: none; }
.st-credits summary::-webkit-details-marker { display: none; }
.st-credits summary::after { content: '▾'; float: right; color: var(--text-muted); }
.st-credits:not([open]) summary::after { content: '▸'; }
.st-cr-row { padding: 8px 0; border-top: 1px solid var(--border); }
.st-cr-row.dead { opacity: .55; }
.st-cr-top { display: flex; justify-content: space-between; font-size: 12px; }
.st-cr-top b { font-weight: 600; color: var(--text-primary); }
.st-cr-top span { color: var(--text-secondary); }
.st-cr-bar { height: 5px; border-radius: 3px; background: var(--bg-input); margin: 6px 0 5px; overflow: hidden; }
.st-cr-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.st-cr-row.dead .st-cr-bar i { background: var(--red); }
.st-cr-sub { font-size: 11px; color: var(--text-muted); }
.st-cr-cost { font-size: 11px; color: var(--text-muted); padding: 8px 0 10px; border-top: 1px solid var(--border); }
.st-cr-note { opacity: .7; }
/* Compte de l'extension (isolation des donnees) */
.xa-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 14px; border: 1px solid rgba(245,158,11,.45); background: var(--yellow-dim); border-radius: 10px; }
.xa-text { flex: 1 1 340px; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.xa-text b { color: var(--text-primary); font-weight: 600; }
.xa-text span { color: var(--text-secondary); font-size: 12px; }
.xa-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.xa-pass { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; min-width: 220px; }
.xa-btn { background: var(--accent); color: #fff; border: 0; border-radius: 8px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.xa-btn:disabled { opacity: .6; }
.xa-close { background: none; border: 0; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.xa-msg { width: 100%; font-size: 12px; color: var(--red); }
.xa-msg:empty { display: none; }
.xa-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3000; background: var(--bg-hover); border: 1px solid rgba(34,197,94,.5); color: var(--text-primary); font-size: 13px; padding: 10px 16px; border-radius: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }

/* ===== Chatbox+ : evenements Vinted, commande, performance article ===== */
.cp-event { align-self: center; max-width: 78%; margin: 6px auto; padding: 10px 14px; border: 1px solid var(--border-light); border-radius: 10px; background: var(--bg-card); text-align: center; font-size: 12px; color: var(--text-secondary); }
.cp-event.red { border-color: rgba(239, 68, 68, .45); background: var(--red-dim); }
.cp-event.red .cp-ev-title { color: var(--red); }
.cp-ev-title { font-weight: 600; color: var(--text-primary); }
.cp-ev-sub { margin-top: 4px; white-space: pre-line; }
.cp-ev-time { margin-top: 6px; font-size: 10px; color: var(--text-muted); }
.cp-ev-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.cp-vaction { border-style: dashed; }
.cp-st { color: var(--text-secondary); }
.cp-st.ok { color: var(--green); }
.cp-st.ko { color: var(--red); }
.cp-btn { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--bg-hover); color: var(--text-primary); font: 600 12px/1.2 inherit; cursor: pointer; text-decoration: none; white-space: nowrap; }
.cp-btn:hover { border-color: var(--accent); }
.cp-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.cp-btn:disabled { opacity: .6; cursor: default; }
#cp-order-bar { display: none; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--border); background: var(--green-dim); font-size: 12px; color: var(--text-primary); flex-wrap: wrap; }
.cp-order-info { flex: 1; min-width: 0; }
.cp-dot { margin: 0 6px; color: var(--text-muted); }
.cp-order-err { width: 100%; color: var(--red); font-size: 11px; }
.cp-order-err:empty { display: none; }
.cp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp-tile { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); }
.cp-tile-v { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.cp-tile-l { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.cp-tile-h { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.cp-muted { font-size: 11px; color: var(--text-muted); }
.cp-full { grid-column: 1 / -1; }
.item-detail-grid.cp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; }
.cp-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cp-col-h { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.cp-col .field-value { overflow-wrap: anywhere; }
.cp-select { width: 100%; }
.cp-notes { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.cp-notes textarea { width: 100%; resize: vertical; min-height: 44px; font: inherit; font-size: 12px; }
.cp-stats-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cp-stats-head .item-detail-label { margin: 0; }
.cp-seg { display: inline-flex; border: 1px solid var(--border-light); border-radius: 8px; overflow: hidden; }
.cp-seg button { border: 0; background: transparent; color: var(--text-secondary); font: 600 10px/1 inherit; padding: 5px 8px; cursor: pointer; }
.cp-seg button.active { background: var(--accent); color: #fff; }
/* Parametres IA : mesures */
.pp-add-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.pp-status { font-size: 12px; color: var(--text-muted); }
.pp-cat { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 14px; background: var(--bg-card); }
.pp-cat-head { display: flex; gap: 8px; align-items: center; }
.pp-cat-name { flex: 1; background: transparent; border: 0; color: var(--text-primary); font: 700 14px/1.3 inherit; padding: 4px 0; }
.pp-cat-match { font-size: 11px; color: var(--text-muted); margin: 4px 0 10px; display: flex; gap: 6px; align-items: center; }
.pp-cat-match input { flex: 1; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); padding: 4px 8px; font-size: 11px; }
.pp-del { border: 0; background: transparent; color: var(--text-muted); font-size: 20px; cursor: pointer; }
.pp-del:hover { color: var(--red); }
.pp-cut { margin-top: 10px; }
.pp-cut-h { font-size: 11px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.pp-table-wrap { overflow-x: auto; }
.pp-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.pp-table th { text-align: left; font-weight: 600; color: var(--text-muted); padding: 4px 6px; white-space: nowrap; font-size: 11px; }
.pp-table td { padding: 3px 4px; }
.pp-table td:first-child { font-weight: 700; color: var(--text-primary); width: 34px; }
.pp-table input { width: 64px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); padding: 5px 6px; font: inherit; }
/* Mesures v2 */
.pp-tabs { display: inline-flex; border: 1px solid var(--border-light); border-radius: 10px; overflow: hidden; margin: 14px 0 10px; }
.pp-tab { border: 0; background: transparent; color: var(--text-secondary); font: 600 13px/1 inherit; padding: 9px 18px; cursor: pointer; }
.pp-tab.active { background: var(--accent); color: #fff; }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pp-chip { border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text-secondary); border-radius: 999px; padding: 7px 13px; font: 600 12px/1 inherit; cursor: pointer; }
.pp-chip.small { padding: 6px 11px; font-size: 11px; font-weight: 500; }
.pp-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.pp-chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--text-primary); }
.pp-items { padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.pp-dot-ed { color: var(--accent); font-size: 9px; }
.pp-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--bg-card); }
.pp-card-h { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.pp-card-t { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.pp-card-s { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.pp-cuts { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.pp-cut-btn { border: 1px solid var(--border-light); background: transparent; color: var(--text-secondary); border-radius: 8px; padding: 6px 12px; font: 600 12px/1 inherit; cursor: pointer; }
.pp-cut-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pp-table input.ed { border-color: var(--accent); background: var(--accent-dim); }
.pp-hint { font-size: 11px; color: var(--text-muted); margin-top: 10px; }
/* Avatar : badge plateforme lisible + guide centre dans l'en-tete du chat */
.conv-avatar img { display: block; }
.conv-avatar .platform-indicator { width: 17px; height: 17px; bottom: -3px; right: -3px; font-size: 9px; z-index: 2; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.chat-header-center { flex: 1; display: flex; justify-content: center; }
.pp-card .pp-table { width: auto; min-width: 420px; } .pp-card .pp-table th { padding-right: 14px; }
/* ===== Dashboard / Commandes Vinted reels ===== */
.vd-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.vd-toolbar .pp-tabs, .vd-toolbar .pp-chips { margin: 0; }
.vd-muted { font-size: 12px; color: var(--text-muted); }
.vd-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.vd-kpis.small { grid-template-columns: repeat(2, 1fr); margin: 0; }
.vd-kpi { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
.vd-kpi-l { font-size: 12px; color: var(--text-secondary); }
.vd-kpi-v { font-size: 22px; font-weight: 700; color: var(--text-primary); margin-top: 4px; letter-spacing: -.01em; }
.vd-kpis.small .vd-kpi-v { font-size: 18px; }
.vd-kpi-h { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.vd-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin-bottom: 12px; }
.vd-grid + .vd-grid { grid-template-columns: 1fr 1fr; }
.vd-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; min-width: 0; }
.vd-grid .vd-card { margin-bottom: 0; }
.vd-card-h { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.vd-chart { position: relative; height: 240px; }
.vd-top { display: flex; flex-direction: column; gap: 8px; }
.vd-top-row { display: grid; grid-template-columns: 34px 1fr auto auto; gap: 10px; align-items: center; font-size: 12px; }
.vd-top-row img, .vd-ph { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: var(--bg-hover); display: block; }
.vd-top-t { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-top-n { color: var(--text-secondary); }
.vd-top-ca { color: var(--text-primary); font-weight: 600; }
.vd-orders { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
.vd-order { display: grid; grid-template-columns: 48px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.vd-order:last-child { border-bottom: 0; }
.vd-order img, .vd-order .vd-ph { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.vd-o-main { min-width: 0; }
.vd-o-t { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-o-s { margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vd-o-p { text-align: right; font-weight: 700; color: var(--text-primary); font-size: 13px; white-space: nowrap; }
.vd-o-a { display: flex; gap: 6px; }
.vd-badge { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--bg-hover); color: var(--text-secondary); }
.vd-badge.ok { background: var(--green-dim); color: var(--green); }
.vd-badge.ko { background: var(--red-dim); color: var(--red); }
.vd-badge.todo { background: rgba(245,158,11,.15); color: var(--yellow); }
.vd-badge.wait { background: var(--accent-dim); color: #b9a2ff; }
.vd-count { opacity: .7; font-weight: 500; margin-left: 2px; }
.vd-search { flex: 1; min-width: 180px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); padding: 8px 12px; font: inherit; font-size: 13px; }
.vd-sum { margin-bottom: 10px; }
.vd-more { margin: 12px auto 0; display: block; }
@media (max-width: 1100px) { .vd-grid, .vd-grid + .vd-grid { grid-template-columns: 1fr; } .vd-order { grid-template-columns: 40px 1fr auto; } .vd-o-a { grid-column: 2 / -1; } }
.pp-sub { padding: 0 0 14px; margin-top: -4px; font-size: 12px; color: var(--text-secondary); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pp-sub input[type=number], .pp-sub input[type=time], .pp-sub select { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); padding: 4px 6px; font: inherit; width: auto; }
.pp-sub input[type=number] { width: 58px; }
.pp-day { display: inline-flex; gap: 3px; align-items: center; margin-right: 4px; }
.pp-notes { width: 100%; margin-top: 8px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); padding: 8px; font: inherit; font-size: 13px; resize: vertical; }
/* ===== Automatisations ===== */
#au-root { max-width: 920px; }
.au-top { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.au-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 14px; }
.au-h { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 6px; }
.au-t { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.au-d { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.au-d code { background: var(--bg-hover); padding: 1px 5px; border-radius: 4px; color: var(--text-secondary); }
.au-sub { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); margin: 18px 0 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.au-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 8px 0; }
.au-l { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.au-c { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-secondary); flex-shrink: 0; }
.au-num, .au-sel { background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); padding: 5px 7px; font: inherit; font-size: 13px; }
.au-tpls { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.au-tpl { display: flex; gap: 6px; align-items: flex-start; }
.au-tpl textarea, .au-ign { flex: 1; width: 100%; background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); padding: 8px 10px; font: inherit; font-size: 13px; resize: vertical; }
.au-x { border: 0; background: transparent; color: var(--text-muted); font-size: 20px; cursor: pointer; padding: 2px 6px; }
.au-x:hover { color: var(--red); }
.au-add { align-self: flex-start; }
.au-actions { display: flex; gap: 12px; align-items: center; margin-top: 16px; }
.au-log { display: flex; flex-direction: column; max-height: 420px; overflow: auto; margin-top: 8px; }
.au-log-r { display: grid; grid-template-columns: 92px auto 120px 1fr; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.au-log-d { color: var(--text-muted); }
.au-log-b { color: var(--text-primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-log-m { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ===== Dressing / complements commandes ===== */
.dr-cats { margin: -4px 0 14px; }
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.dr-card { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.dr-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.dr-img { position: relative; aspect-ratio: 3 / 4; background: var(--bg-hover); }
.dr-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-b { position: absolute; top: 8px; left: 8px; }
.dr-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.dr-t { font-size: 12px; font-weight: 600; color: var(--text-primary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 32px; }
.dr-p { font-size: 14px; font-weight: 700; color: var(--accent); }
.dr-p s { color: var(--text-muted); font-weight: 400; font-size: 11px; margin-left: 4px; }
.dr-s { display: flex; gap: 10px; font-size: 11px; color: var(--text-muted); }
.vd-order { grid-template-columns: 48px 1fr auto auto auto; }
.vd-cost { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: var(--text-muted); }
.vd-cost input { width: 64px; background: var(--bg-input); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); padding: 4px 6px; font: inherit; font-size: 12px; }
.vd-sum { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.vd-sum b { color: var(--text-primary); }
button.vd-top-row { background: transparent; border: 0; border-radius: 8px; padding: 4px; cursor: pointer; text-align: left; color: inherit; font: inherit; width: 100%; }
button.vd-top-row:hover { background: var(--bg-hover); }
.vd-bar { height: 4px; background: var(--bg-hover); border-radius: 2px; margin-top: 4px; }
.vd-bar span { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.vd-cat-h { font-size: 12px; font-weight: 700; color: var(--text-primary); margin: 14px 0 8px; }
.vd-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.vd-gal-i img, .vd-gal-i .vd-ph { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px; display: block; }
.vd-gal-t { font-size: 11px; color: var(--text-primary); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-gal-p { font-size: 10px; color: var(--text-muted); }
.au-hours { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.au-ranges { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.au-range { display: flex; gap: 6px; align-items: center; }
.pp-tpls { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pp-warn { font-size: 12px; color: var(--yellow); margin-top: 10px; }
.persona-intro code { background: var(--bg-hover); padding: 1px 5px; border-radius: 4px; }

/* Dressing v2 : selection, fiche detaillee */
.dr-note { font-size: 11px; margin-top: 14px; }
.dr-card { cursor: pointer; }
.dr-card.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.dr-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 6px; border: 2px solid #fff; background: rgba(0,0,0,.35); }
.dr-card.sel .dr-check { background: var(--accent); border-color: var(--accent); }
.dr-card.sel .dr-check::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dr-buy { font-size: 10px; font-weight: 500; color: var(--text-muted); margin-left: 4px; }
.dr-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; margin-bottom: 14px; background: var(--bg-card); border: 1px solid var(--accent); border-radius: 12px; font-size: 13px; }
.dr-bulk input { width: 90px; margin-left: 6px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-hover); color: var(--text-primary); }
.dr-bulk-sep { width: 1px; height: 22px; background: var(--border); }
.dr-bulk .vd-muted { flex-basis: 100%; font-size: 11px; }
.dr-ov { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.dr-modal { position: relative; display: grid; grid-template-columns: minmax(220px, 320px) 1fr; width: min(820px, 100%); max-height: 90vh; overflow: auto; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; }
.dr-m-img { background: var(--bg-hover); }
.dr-m-img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 320px; }
.dr-m-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.dr-m-t { font-size: 16px; font-weight: 700; color: var(--text-primary); padding-right: 24px; }
.dr-m-sub { font-size: 12px; color: var(--text-secondary); }
.dr-m-sec { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 12px; }
.dr-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); padding: 3px 0; }
.dr-row > span:first-child { flex: 1; }
.dr-row b { color: var(--text-primary); }
.dr-row b.pos { color: var(--green); } .dr-row b.neg { color: var(--red); }
.dr-row input { width: 90px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-hover); color: var(--text-primary); }
.dr-cmp { font-size: 11px; color: var(--text-muted); } .dr-cmp.up { color: var(--green); } .dr-cmp.down { color: var(--red); }
.dr-m-actions { margin-top: 16px; display: flex; gap: 10px; }
.dr-m-actions a { text-decoration: none; }
.dr-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--text-secondary); font-size: 24px; cursor: pointer; z-index: 2; }
@media (max-width: 640px) { .dr-modal { grid-template-columns: 1fr; } .dr-m-img img { min-height: 220px; max-height: 300px; } }
.au-neg-ex { margin: 6px 0 10px; padding: 12px 14px; border-radius: 10px; background: var(--bg-hover); }
.au-neg-t { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.au-neg-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.au-neg-c { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.au-neg-h { font-weight: 600; color: var(--text-primary); }
.au-neg-w { margin-top: 8px; font-size: 12px; color: var(--yellow); }
.vd-rel { width: 100%; border-collapse: collapse; font-size: 13px; }
.vd-rel th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.vd-rel td { padding: 8px; border-bottom: 1px solid var(--border); color: var(--text-primary); }
.vd-rel td:not(:first-child), .vd-rel th:not(:first-child) { text-align: right; }
.msg-tr { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.15); font-size: 12px; color: var(--text-secondary); font-style: italic; }
.msg-tr-l { font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--purple, var(--accent-soft, #a78bfa)); margin-right: 4px; }
.msg-seen { font-weight: 600; } .msg-seen.no { opacity: .6; }
.dr-bulk { flex-direction: column; align-items: stretch; }
.dr-bk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dr-bk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dr-bk-row input, .dr-bk-row select, .dr-bulk textarea, .dr-ed input, .dr-ed select, .dr-ed textarea { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-hover); color: var(--text-primary); font: inherit; font-size: 13px; }
.dr-bk-row input { min-width: 160px; flex: 1; max-width: 260px; }
.dr-bk-row input[type=number] { min-width: 0; width: 100px; flex: none; }
.dr-bk-row select { max-width: 380px; }
.dr-bulk textarea { width: 100%; resize: vertical; }
.dr-bk-h { font-size: 11px; color: var(--text-muted); }
.dr-jobs { padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dr-job-f { flex-basis: 100%; font-size: 12px; color: var(--red); }
.dr-ed { display: flex; flex-direction: column; gap: 8px; }
.dr-ed label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.dr-ed textarea { resize: vertical; }
.dr-ed-a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-danger { background: var(--red-dim); color: var(--red); border: 1px solid var(--red); border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; }
.btn-danger:disabled { opacity: .5; cursor: default; }
/* Dressing v3 : galerie photos, detail des modifications */
.dr-modal { grid-template-columns: minmax(280px, 420px) 1fr; }
.dr-m-img { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: #0d0d10; }
.dr-m-img img { min-height: 0; }
.dr-g-main { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 360px; max-height: 70vh; border-radius: 10px; overflow: hidden; background: #000; }
.dr-g-main img { width: 100%; height: 100%; max-height: 70vh; object-fit: contain; display: block; }
.dr-g-th { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.dr-g-t { position: relative; flex: 0 0 56px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .65; }
.dr-g-t.on { border-color: var(--accent); opacity: 1; }
.dr-g-t img { width: 100%; height: 100%; object-fit: cover; }
.dr-g-t span { position: absolute; right: 3px; bottom: 2px; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.dr-g-n { font-size: 11px; color: var(--text-muted); text-align: center; }
.dr-jobs { flex-direction: column; align-items: stretch; }
.dr-jobs-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; text-align: left; }
.dr-jobs-n { font-size: 11px; }
.dr-jobs-l { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; margin-top: 6px; }
.dr-job { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: var(--bg-hover); font-size: 12px; }
.dr-job img, .dr-job-ph { width: 32px; height: 42px; object-fit: cover; border-radius: 6px; background: var(--bg-card); flex: none; }
.dr-job-t { flex: 1; min-width: 0; }
.dr-job-t > div:first-child { color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-job .btn-secondary { padding: 4px 10px; font-size: 12px; }
#dr-tnew, #dr-dnew { width: 100%; }
.au-state { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.au-state .au-d { flex-basis: 100%; }
.au-st { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); }
.au-st.on { background: var(--green-dim); color: var(--green); border-color: var(--green); }
.au-st.off { color: var(--text-muted); }
/* Dressing v4 : fiche article large (3/4 de l'ecran), cartes uniformes */
.dr-ov { padding: 3vh 3vw; }
.dr-modal { width: min(1500px, 94vw); height: 92vh; max-height: 92vh; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); overflow: hidden; }
.dr-m-img { height: 100%; min-height: 0; }
.dr-g-main { min-height: 0; max-height: none; flex: 1; }
.dr-g-main img { max-height: 100%; }
.dr-m-body { min-width: 0; overflow-y: auto; padding: 24px 28px; }
.dr-m-t { font-size: 18px; }
.dr-m-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; margin-top: 6px; }
.dr-m-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dr-ed input, .dr-ed select, .dr-ed textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.dr-ed textarea#dr-e-desc { min-height: 220px; }
.dr-ed select option { white-space: normal; }
.dr-g-t { flex: 0 0 64px; height: 84px; }
@media (max-width: 1000px) { .dr-modal { grid-template-columns: 1fr; height: auto; overflow: auto; } .dr-m-img { height: 60vh; } .dr-m-cols { grid-template-columns: 1fr; } }
.dr-img { aspect-ratio: auto; height: 0; padding-bottom: 133%; overflow: hidden; }
.dr-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dr-card { height: 100%; }
.dr-grid { align-items: stretch; }
.dr-cmpb { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); }
.dr-cmpb-l { font-size: 12px; color: var(--text-secondary); }
.dr-cmpb-bars { display: flex; flex-direction: column; gap: 4px; }
.dr-cmpb-r { display: grid; grid-template-columns: 82px 1fr 70px; gap: 8px; align-items: center; font-size: 11px; color: var(--text-muted); }
.dr-cmpb-r b { text-align: right; color: var(--text-primary); font-size: 12px; }
.dr-cmpb-t { height: 8px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; }
.dr-cmpb-t i { display: block; height: 100%; border-radius: 4px; background: var(--text-muted); opacity: .5; }
.dr-cmpb-t i.me { background: var(--accent); opacity: 1; }
.dr-rank { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.dr-rank > div { padding: 10px 12px; border-radius: 10px; background: var(--bg-hover); display: flex; flex-direction: column; gap: 2px; }
.dr-rank b { font-size: 20px; color: var(--text-primary); }
.dr-rank span { font-size: 11px; color: var(--text-muted); }
/* Statistiques */
.st-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.st-tab th { text-align: left; font-size: 11px; font-weight: 600; color: var(--text-muted); padding: 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.st-tab td { padding: 9px 8px; border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; }
.st-tab td:not(:first-child), .st-tab th:not(:first-child) { text-align: right; }
.st-g { cursor: pointer; } .st-g:hover td { background: var(--bg-hover); }
.st-chev { color: var(--text-muted); width: 20px; }
.st-open > td { background: rgba(var(--accent-rgb), .04); padding: 12px 14px; }
.st-tab.sub { margin-top: 12px; font-size: 12px; }
.st-tab.sub td { padding: 6px 8px; }
.st-best-h { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.st-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-ic { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; background: var(--bg-hover); text-decoration: none; color: inherit; min-width: 0; }
.st-ic img, .st-ic > span { width: 46px; height: 60px; object-fit: cover; border-radius: 6px; flex: none; background: var(--bg-card); }
.st-ic > div { min-width: 0; }
.st-ic-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--accent); }
.st-ic-t { font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ic-s { font-size: 11px; color: var(--text-muted); }
.st-ic.empty { justify-content: center; color: var(--text-muted); }
.st-list { display: flex; flex-direction: column; gap: 8px; }
.st-mini { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text-muted); font-size: 11px; }
.st-mini img { width: 26px; height: 34px; object-fit: cover; border-radius: 4px; }
.st-note { font-size: 11px; margin-top: 10px; }
.au-drops { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.au-drop { display: grid; grid-template-columns: 28px 1fr auto 60px; gap: 10px; align-items: center; font-size: 12px; color: var(--text-secondary); }
.au-drop img { width: 28px; height: 36px; object-fit: cover; border-radius: 4px; }
.au-drop-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.au-drop b { color: var(--green); }
/* Automatisations : onglets + archives */
.au-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; padding: 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.au-tab { flex: 1 1 auto; padding: 10px 14px; border: 0; border-radius: 8px; background: none; color: var(--text-secondary); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.au-tab:hover { background: var(--bg-hover); color: var(--text-primary); }
.au-tab.on { background: var(--accent); color: #fff; }
.au-at { width: 100%; border-collapse: collapse; font-size: 12px; }
.au-at th { text-align: left; font-size: 11px; color: var(--text-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.au-at td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-secondary); }
.au-at td b { color: var(--text-primary); }
.au-at-d { white-space: nowrap; color: var(--text-muted); }
.au-nth { display: inline-block; margin-top: 4px; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: var(--accent-dim); color: #b9a2ff; font-size: 11px; font-weight: 600; }
.au-reason { margin-top: 4px; font-size: 11px; color: var(--red); max-width: 280px; }
.au-more { margin-top: 10px; }
/* En direct */
.lv-st { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); margin-bottom: 16px; }
.lv-st b { color: var(--text-primary); font-size: 14px; }
.lv-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--green); flex: none; }
.lv-st.off .lv-dot { background: var(--red); }
.lv-dot.pulse { animation: lvp 1.2s infinite; }
@keyframes lvp { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 100% { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }
.lv-q, .lv-act { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.lv-q b, .lv-act b { color: var(--text-primary); white-space: nowrap; }
.lv-qm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-logs { max-height: 420px; overflow: auto; }
.lv-log { font-family: ui-monospace, monospace; font-size: 11px; color: var(--text-secondary); padding: 3px 0; border-bottom: 1px dashed var(--border); }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.rp-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; font-size: 11px; }
.rp-card img, .rp-card > span { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 10px; background: var(--bg-hover); }
.rp-t { font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Republication */
.rp-warn { padding: 12px 14px; border-radius: 10px; background: rgba(245,158,11,.12); color: var(--yellow); font-size: 13px; margin-bottom: 12px; }
.rp-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.rp-msg { display: none; padding: 10px 14px; border-radius: 10px; background: var(--accent-dim); color: var(--text-primary); font-size: 13px; margin-bottom: 12px; }
.rp-selbar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--accent); }
.rp-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.rp-c { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; }
.rp-c.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.rp-c-img { position: relative; height: 0; padding-bottom: 133%; background: var(--bg-hover); }
.rp-c-img > img:first-child, .rp-c-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rp-c-ph { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; text-align: center; padding: 10px; }
.rp-c-old { position: absolute; left: 8px; bottom: 8px; width: 46px; height: 62px; object-fit: cover; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.rp-check { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #fff; background: rgba(0,0,0,.35); }
.rp-c.sel .rp-check { background: var(--accent); border-color: var(--accent); }
.rp-c-b { position: absolute; top: 8px; left: 8px; }
.rp-c-t { padding: 8px 10px 0; font-size: 12px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-c-s { padding: 2px 10px 10px; font-size: 11px; color: var(--text-muted); }
.rp-c-e { padding: 0 10px 10px; font-size: 11px; color: var(--red); }
.rp-modal { grid-template-columns: minmax(0, 55%) minmax(0, 1fr); }
.rp-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; background: #0d0d10; align-content: start; overflow: auto; }
.rp-cmp img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 10px; background: #000; }
.rp-cmp .rp-c-ph { position: static; height: 300px; border-radius: 10px; background: var(--bg-hover); }
.rp-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.rp-hist { grid-column: 1 / -1; }
.rp-hl { display: flex; gap: 8px; }
.rp-h { position: relative; width: 64px; height: 84px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; }
.rp-h.on { border-color: var(--accent); }
.rp-h img { width: 100%; height: 100%; object-fit: cover; max-height: none; border-radius: 0; }
.rp-h span { position: absolute; right: 3px; bottom: 2px; font-size: 10px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000; }
.rp-desc { white-space: pre-wrap; font-size: 12px; color: var(--text-secondary); max-height: 220px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: var(--bg-hover); }
.st-pager { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.st-pg { min-width: 30px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: none; color: var(--text-secondary); cursor: pointer; font-size: 12px; }
.st-pg.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rp-cmp > div:not(.rp-hist):not(.rp-slots) { display: flex; flex-direction: column; }
.rp-cmp > div:not(.rp-hist):not(.rp-slots) img, .rp-cmp > div:not(.rp-hist):not(.rp-slots) .rp-c-ph { height: 64vh; width: 100%; object-fit: contain; background: #000; }
.rp-gh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: 12px; }
.rp-gh.ok { background: var(--green-dim); color: var(--green); }
.rp-gh.ko { background: var(--red-dim); color: var(--red); }
.rp-gh.off { background: rgba(245,158,11,.12); color: var(--yellow); }
.rp-gh .btn-secondary, .rp-gh .btn-primary { margin-left: auto; padding: 5px 10px; font-size: 12px; }
.rp-gh .btn-secondary + .btn-secondary, .rp-gh .btn-primary + .btn-secondary { margin-left: 0; }

/* Automatisations : reglages a gauche, archives de l'onglet a droite (v399) */
.au-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.au-left, .au-right { min-width: 0; }
.au-right { position: sticky; top: 12px; }
.au-right .au-log { max-height: calc(100vh - 170px); }
.au-split.solo { grid-template-columns: minmax(0, 1fr); }
.au-split.solo .au-left { display: none; }
.au-split.solo .au-right { position: static; }
.au-right .au-log-r { grid-template-columns: 78px auto minmax(70px, 110px) 1fr; gap: 8px; }
@media (max-width: 1200px) { .au-split { grid-template-columns: minmax(0, 1fr); } .au-right { position: static; } }
#au-root { max-width: 1720px; }
#au-root .au-top, #au-root .au-state, #au-root .au-tabs { max-width: 920px; }
.au-right .au-arch { max-height: calc(100vh - 150px); overflow: auto; }
.au-split.solo .au-right .au-arch { max-height: none; }

/* Actions de vente : bordereau / telechargement / prolongation (v403) */
.cp-btn svg { flex-shrink: 0; }
.cp-btn.oa-label { gap: 6px; background: var(--vinted); border-color: var(--vinted); color: #fff; }
.cp-btn.oa-label:hover { filter: brightness(1.1); border-color: var(--vinted); }
.cp-btn.oa-dl { padding: 6px 8px; color: var(--vinted); border-color: var(--vinted); background: transparent; }
.cp-btn.oa-pro { gap: 6px; color: var(--yellow, #f5b041); border-color: rgba(245,176,65,.5); background: transparent; }
.vd-o-a { flex-wrap: wrap; justify-content: flex-end; }
.oa-m { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 18px; width: min(440px, 100%); display: flex; flex-direction: column; gap: 10px; }
.oa-h { display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: var(--text-primary); }
.oa-d, .oa-l { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.oa-k { display: flex; gap: 8px; }
.oa-k .oa-r { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.oa-r { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.oa-e { color: var(--red); font-size: 12px; min-height: 14px; }
.oa-a { display: flex; justify-content: flex-end; gap: 8px; }
#oa-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; background: var(--bg-card); border: 1px solid var(--green); color: var(--text-primary); padding: 10px 16px; border-radius: 10px; font-size: 13px; display: none; max-width: 90vw; }
#oa-toast.bad { border-color: var(--red); }

/* Commandes : colonnes fixes alignees (v404) */
.vd-order { grid-template-columns: 48px minmax(0, 1fr) 96px 118px auto !important; }
.vd-orders.compact .vd-order { grid-template-columns: 48px minmax(0, 1fr) 96px auto !important; }
.vd-o-c { display: flex; justify-content: flex-end; }
.vd-o-a { display: grid !important; grid-template-columns: 112px 34px 200px 112px 70px; gap: 6px; align-items: center; justify-content: end; flex-wrap: nowrap; }
.vd-o-a > * { justify-content: center; min-width: 0; }
.vd-o-a .cp-btn { width: 100%; justify-content: center; }
.cp-btn.oa-label:disabled, .cp-btn.oa-dl:disabled, .cp-btn.oa-pro:disabled { background: transparent; border-color: var(--border); color: var(--text-muted); opacity: .45; cursor: not-allowed; }
.oa-st { display: inline-flex; align-items: center; gap: 5px; justify-content: center; font-size: 11px; font-weight: 600; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); white-space: nowrap; }
.oa-st.wait { color: var(--yellow, #f5b041); border-color: rgba(245,176,65,.5); }
.oa-st.ok { color: var(--green); border-color: var(--green); }
.oa-st.ko { color: var(--red); border-color: var(--red); }
@media (max-width: 1500px) { .vd-order { grid-template-columns: 48px minmax(0, 1fr) 96px !important; } .vd-o-c { grid-column: 3; } .vd-o-a { grid-column: 2 / -1; justify-content: start; } }
/* Creation d'annonce (v407) */
#page-annonce .ls-tabs { margin: 4px 0 14px; flex-wrap: wrap; }
.ls-msg { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--green); background: var(--bg-card); font-size: 13px; color: var(--text-primary); }
.ls-msg.bad { border-color: var(--red); }
.ls-presetbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.ls-l { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin: 12px 0 6px; }
.ls-presetbar .ls-l { margin: 0 4px 0 0; }
.ls-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ls-grid { grid-template-columns: 1fr; } }
.ls-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.ls-h { font-size: 14px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.ls-card .muted, .ls-adv.muted, #page-annonce .muted { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.ls-card textarea { resize: vertical; }
.ls-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ls-ph { position: relative; width: 96px; height: 128px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.ls-ph:first-child { outline: 2px solid var(--accent); }
.ls-ph img { width: 100%; height: 100%; object-fit: cover; }
.ls-ph button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; cursor: pointer; font-size: 14px; line-height: 22px; padding: 0; }
.ls-ph button.l { right: auto; left: 4px; font-size: 11px; }
.ls-add { width: 96px; height: 128px; border-radius: 8px; border: 1px dashed var(--border-light); background: transparent; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; cursor: pointer; padding: 6px; }
.ls-add:hover { border-color: var(--accent); color: var(--text-primary); }
.ls-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ls-cat-res { display: flex; flex-direction: column; max-height: 220px; overflow: auto; margin-top: 4px; }
.ls-cat-res button { text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--border); color: var(--text-secondary); padding: 7px 4px; cursor: pointer; font: inherit; font-size: 12px; }
.ls-cat-res button:hover { color: var(--text-primary); background: var(--bg-hover); }
.ls-cat b { color: var(--text-primary); font-size: 13px; }
.ls-brand .ok { color: var(--green); font-weight: 700; }
.ls-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.ls-col-p { display: inline-flex; gap: 6px; align-items: center; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; cursor: pointer; }
.ls-col-p i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: inline-block; }
.ls-col-p.on { border-color: var(--accent); color: var(--text-primary); background: rgba(var(--accent-rgb), .15); }
.ls-adv { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-hover); font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.ls-adv b { color: var(--green); }
.ls-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ls-queue { display: flex; gap: 6px; align-items: center; }
.ls-queue input { width: 200px; }
.ls-plist { display: flex; flex-direction: column; gap: 8px; }
.ls-pi { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); }
.ls-pi b { color: var(--text-primary); }
.ls-pa, .ls-ja { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ls-job { grid-template-columns: auto 48px minmax(0, 1fr) 96px auto !important; }
.ls-job:not(:has(.ls-sel)) { grid-template-columns: 48px minmax(0, 1fr) 96px auto !important; }
.ls-bulk { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ls-bulk input { width: 200px; }
.ls-imp { display: flex; flex-direction: column; max-height: 60vh; overflow: auto; gap: 4px; }
.ls-imp-i { display: flex; gap: 10px; align-items: center; text-align: left; background: transparent; border: 1px solid var(--border); border-radius: 8px; padding: 6px; color: var(--text-primary); cursor: pointer; font: inherit; font-size: 12px; }
.ls-imp-i img { width: 40px; height: 52px; object-fit: cover; border-radius: 6px; }
.ls-imp-i:hover { border-color: var(--accent); }
.ls-lib { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; }
.ls-lib-i { padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: transparent; cursor: pointer; aspect-ratio: 3/4; }
.ls-lib-i img { width: 100%; height: 100%; object-fit: cover; }
.ls-lib-i.on { border-color: var(--accent); }
/* Creation d'annonce v411 : photos plus grandes, cartes plus lisibles, barre d'actions fixe */
#page-annonce .ls-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
#page-annonce .ls-card { padding: 20px; border-radius: 14px; }
#page-annonce .ls-h { font-size: 15px; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
#page-annonce .ls-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
#page-annonce .ls-ph, #page-annonce .ls-add { width: auto; height: auto; aspect-ratio: 3 / 4; }
#page-annonce .ls-ph:first-child::after { content: 'Couverture'; position: absolute; left: 8px; bottom: 8px; font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
#page-annonce .ls-add { flex-direction: column; gap: 6px; font-size: 13px; border-width: 2px; }
#page-annonce .ls-ghost { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
#page-annonce .ls-ghost select { width: auto; min-width: 220px; }
#page-annonce .ls-card input.sia-input, #page-annonce .ls-card select.sia-input, #page-annonce .ls-card textarea.sia-input { border-radius: 10px; padding: 10px 12px; font-size: 13px; }
#page-annonce #ls-title { font-size: 14px; font-weight: 600; }
#page-annonce .ls-mats { max-height: 180px; overflow: auto; padding: 2px; }
#page-annonce .ls-actions { position: sticky; bottom: 12px; z-index: 5; box-shadow: 0 10px 30px rgba(0,0,0,.35); border-color: var(--accent); }
#page-annonce .ls-actions .btn-primary { padding: 10px 18px; font-size: 14px; }
#page-annonce .ls-draftg { display: inline-flex; align-items: center; gap: 8px; }
#page-annonce .ls-presetbar { padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
#page-annonce .ls-presetbar .pp-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* v412 : matieres logiques + brouillons lies a Vinted */
.ls-mats .ls-mat-all { border-style: dashed; opacity: .85; }
.ls-vlink { font-size: 12px; margin-left: 8px; }

/* v413 : journal de l'extension lisible */
.lv-log { color: var(--text-primary); font-size: 12px; padding: 4px 0 4px 8px; border-left: 3px solid transparent; display: flex; gap: 10px; }
.lv-log .lv-t { color: var(--text-secondary); opacity: .7; flex: none; }
.lv-log.bad { color: #ff7b7b; border-left-color: #ff5c5c; }
.lv-log.good { color: #5fe0a0; border-left-color: #2ecc71; }
.lv-log.info { color: #b9a6ff; border-left-color: var(--accent, var(--accent)); }

/* v414 : l'ancien dashboard (HTML d'origine) n'apparait plus au chargement ; le dashboard actuel (vd-dash) le remplace */
#page-dashboard > .stats-grid, #page-dashboard > .charts-grid, #page-dashboard > .table-card { display: none !important; }
#page-dashboard:not(:has(#vd-dash))::after { content: 'Chargement du dashboard…'; display: block; padding: 40px 0; color: var(--text-secondary); font-size: 13px; }

/* v438 : republication multi-photos */
.rp-slots { grid-column: 1 / -1; }
.rp-sl { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px; }
.rp-s { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border: 0; cursor: pointer; color: var(--text-secondary, #aab); text-align: left; }
.rp-s-im { position: relative; display: block; width: 92px; height: 122px; border-radius: 10px; overflow: hidden; background: #000; border: 2px solid rgba(255,255,255,.08); transition: border-color .2s, transform .2s, box-shadow .2s; }
.rp-s:hover .rp-s-im { transform: translateY(-2px); }
.rp-s.on .rp-s-im { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 139,92,246), .25), 0 6px 18px rgba(var(--accent-rgb, 139,92,246), .3); }
.rp-s-im img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-s-im .rp-s-old { position: absolute; left: 5px; bottom: 5px; width: 30px; height: 40px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.85); box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.rp-s-t { font-size: 11px; font-weight: 600; color: var(--text-primary, #fff); }
.rp-s-st { font-size: 10px; font-weight: 600; }
.rp-s.ok .rp-s-st { color: var(--green, #34d399); } .rp-s.warn .rp-s-st { color: #fbbf24; } .rp-s.err .rp-s-st { color: var(--red, #f87171); } .rp-s.todo .rp-s-st, .rp-s.gen .rp-s-st { color: var(--accent); }
.rp-s.todo .rp-s-im img { opacity: .45; filter: grayscale(.4); }
.rp-s-spin, .rp-wait .rp-s-spin { position: absolute; inset: 0; margin: auto; width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--accent); animation: rpspin .8s linear infinite; }
.rp-wait { position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30%; color: var(--text-secondary, #aab); font-size: 13px; }
@keyframes rpspin { to { transform: rotate(360deg); } }

/* v449 : bordereaux groupes par transporteur */
.oa-bulk { width: min(620px, 100%); max-height: 88vh; overflow: auto; }
.oa-groups { margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.oa-g { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.oa-gh { font-size: 13.5px; }
.oa-it { padding-left: 22px; font-size: 12.5px; }
.oa-it input:disabled + * { opacity: .5; }
.oa-prev { display: flex; gap: 8px; overflow-x: auto; }
.oa-prev img { height: 220px; border-radius: 6px; border: 1px solid var(--border); background: #fff; }
.oa-bulk-btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) { .oa-prev img { height: 160px; } }

/* v450 : Dashboard Aujourd'hui / Hier */
.vd-dayhead { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(9,177,186,.14), rgba(139,92,246,.10)); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; margin-bottom: 14px; }
.vd-day-v { font-size: 34px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; margin: 4px 0; }
.vd-day-cmp { font-size: 16px; font-weight: 700; color: var(--text-secondary); }
.vd-day-cmp.up { color: var(--green); } .vd-day-cmp.down { color: var(--red); }
.vd-day-cmp span { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-secondary); margin-top: 3px; }
.vd-day-up { margin-left: auto; font-size: 11.5px; }
.vd-live { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--green); text-transform: none; margin-left: 6px; }
.vd-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: vdLive 1.4s infinite; }
@keyframes vdLive { 0%,100% { opacity: 1; } 50% { opacity: .25; } }
.vd-daylist { margin-bottom: 14px; }
.vd-dl { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border); }
.vd-dl img, .vd-dl .vd-ph { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.vd-dl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; } .vd-dl-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vd-dl-t span { font-size: 11.5px; }
.vd-dl-p { font-weight: 700; } .vd-dl-p.ko { text-decoration: line-through; color: var(--red); }
#date-filters { flex-wrap: wrap; }

/* v452 : etiquettes thermiques (visionneuse + bouton Preparer les colis) */
.oa-view { width: min(560px, 100%); max-height: 92vh; overflow: auto; }
.oa-vimg { display: flex; justify-content: center; background: #2a2b33; border-radius: 10px; padding: 12px; }
.oa-vcanvas { max-width: 100%; max-height: 62vh; width: auto; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.oa-view .oa-a a { text-decoration: none; display: inline-flex; align-items: center; }
.oa-view .oa-a .btn-primary { display: inline-flex; align-items: center; gap: 6px; }
.pk-sumrow { align-items: stretch; }
.pk-labels { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

/* Apprentissage IA : nouveautes du dernier passage (v473) */
.ln-news { margin: 10px 0 12px; padding: 12px 14px; border: 1px solid rgba(139,92,246,.35); background: rgba(139,92,246,.08); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.ln-news > b { font-size: 13px; } .ln-news > span { font-size: 12px; color: var(--text-muted, #9a9aa8); }
.ln-news ul { margin: 2px 0 0 0; padding-left: 4px; list-style: none; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; }
.ln-news .ln-add li { color: var(--green, #22c55e); } .ln-news .ln-gone li { color: #f87171; opacity: .8; text-decoration: line-through; }
.ln-news .ln-q { font-size: 12px; color: var(--text-muted, #9a9aa8); }

/* v485 : IA par compte — selecteur de compte et sous-onglets modernises (demande SHINO) */
.persona-account-selector { padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--accent-rgb,139,92,246),.10), rgba(255,255,255,.02)); border: 1px solid rgba(var(--accent-rgb,139,92,246),.25); gap: 14px; }
.persona-account-selector label { font-size: 13px; letter-spacing: .3px; text-transform: uppercase; color: var(--text-secondary); font-weight: 700; }
.persona-account-selector .setting-select { max-width: 340px; border-radius: 10px; padding: 9px 12px; font-weight: 600; }
.persona-subtabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 5px; margin-bottom: 18px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid var(--border); }
.persona-subtab { background: transparent !important; border: 0 !important; color: var(--text-secondary) !important; opacity: 1 !important; padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; letter-spacing: .1px; transition: background .18s, color .18s, box-shadow .18s; }
.persona-subtab:hover { color: var(--text-primary) !important; background: rgba(255,255,255,.05) !important; }
.persona-subtab.active { color: #0d0e14 !important; background: #fff !important; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
:root[data-theme="light"] .persona-subtab.active { color: #fff !important; background: var(--purple) !important; }

/* v486 : onglets / filtres lisibles (Liens fournisseurs + Dressing) — demande SHINO : « gris sur gris, on ne voit rien » */
#page-supplier .sl-bar { gap: 8px; }
#page-supplier .sl-tab { height: 38px !important; padding: 0 14px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.10) !important; background: rgba(255,255,255,.04) !important; color: #d6d6e0 !important; opacity: 1 !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, border-color .15s, color .15s; }
#page-supplier .sl-tab:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
#page-supplier .sl-tab i { font-style: normal; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.10); color: #fff; opacity: 1 !important; }
#page-supplier .sl-tab.on { background: var(--accent, #8b5cf6) !important; border-color: var(--accent, #8b5cf6) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(139,92,246,.35); }
#page-supplier .sl-tab.on i { background: rgba(255,255,255,.25); }
#page-supplier .sl-tab[data-tab="ready"] i { background: rgba(245,158,11,.25); color: #fbbf24; }
#page-supplier .sl-tab[data-tab="pb"] i { background: rgba(239,68,68,.22); color: #fca5a5; }
#page-supplier .sl-cat { height: 30px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.10) !important; background: rgba(255,255,255,.03) !important; color: #c9c9d4 !important; opacity: 1 !important; font-weight: 600; }
#page-supplier .sl-cat:hover { color: #fff !important; border-color: rgba(255,255,255,.22) !important; }
#page-supplier .sl-cat.on { background: rgba(139,92,246,.18) !important; border-color: var(--accent, #8b5cf6) !important; color: #fff !important; }
#page-supplier #sl-q { height: 38px; border-radius: 12px; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.10); color: #fff; }
#page-supplier #sl-multi { height: 38px; border-radius: 12px; }

/* v487 : Dressing = meme style que Liens fournisseurs (valide par SHINO) */
#page-dressing .vd-toolbar .pp-chip { height: 38px !important; padding: 0 14px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.10) !important; background: rgba(255,255,255,.04) !important; color: #d6d6e0 !important; opacity: 1 !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center; gap: 8px; }
#page-dressing .vd-toolbar .pp-chip:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
#page-dressing .vd-toolbar .pp-chip .vd-count { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700; background: rgba(255,255,255,.10) !important; color: #fff !important; opacity: 1 !important; }
#page-dressing .vd-toolbar .pp-chip.active { background: var(--accent, #8b5cf6) !important; border-color: var(--accent, #8b5cf6) !important; color: #fff !important; }
#page-dressing .vd-toolbar .pp-chip.active .vd-count { background: rgba(255,255,255,.25) !important; }
#page-dressing .dr-cats .pp-chip { height: 30px !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.10) !important; background: rgba(255,255,255,.03) !important; color: #c9c9d4 !important; opacity: 1 !important; font-size: 12px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center; gap: 6px; }
#page-dressing .dr-cats .pp-chip:hover { color: #fff !important; border-color: rgba(255,255,255,.22) !important; }
#page-dressing .dr-cats .pp-chip.active { background: rgba(139,92,246,.18) !important; border-color: var(--accent, #8b5cf6) !important; color: #fff !important; }
#page-dressing .dr-cats .pp-chip .vd-count { color: inherit !important; opacity: .75 !important; background: none !important; }
#page-dressing .vd-toolbar .setting-select, #page-dressing .vd-search { height: 38px; border-radius: 12px; }
.vd-ful.vd-ful-cancel { border-color: rgba(239,68,68,.6) !important; color: #fca5a5 !important; background: rgba(239,68,68,.08) !important; font-weight: 700; }
.ls-qwhy { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 14px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(139,92,246,.35); background: rgba(139,92,246,.08); }
.ls-qwhy > div { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 3px; }
.ls-qwhy b { font-size: 13.5px; color: var(--text-primary); }
.ls-qwhy span { font-size: 12.5px; color: var(--text-secondary); line-height: 1.45; }
/* v493 : ordre des photos par glisser-deposer */
.ls-ph[draggable="true"] { cursor: grab; position: relative; transition: transform .12s, box-shadow .12s, opacity .12s; }
.ls-ph.drag { opacity: .4; }
.ls-ph.over { transform: scale(1.04); box-shadow: 0 0 0 2px var(--accent, #8b5cf6); border-radius: 10px; }
.ls-cover { position: absolute; left: 6px; bottom: 6px; z-index: 2; font-size: 10px; font-weight: 800; padding: 3px 7px; border-radius: 999px; background: rgba(139,92,246,.9); color: #fff; pointer-events: none; }

/* v497 : filtres des archives */
.au-arh { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.au-arh .au-t { margin-bottom:0; }
.au-af { display:inline-flex; gap:2px; padding:3px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); }
.au-af button { border:0; background:transparent; color:var(--text-secondary); font:inherit; font-size:12px; font-weight:600; padding:5px 11px; border-radius:7px; cursor:pointer; }
.au-af button:hover { color:var(--text-primary); }
.au-af button.on { background:var(--accent,#8b5cf6); color:#fff; }

/* v497 : credits Photoroom epuises en rouge */
.st-cr-row.dead { opacity: 1; }
.st-cr-row.dead .st-cr-top b { text-decoration: line-through; color: var(--text-secondary); }
.st-cr-row.dead .st-cr-top span { color: #f87171; font-weight: 700; }
.st-space.dead { opacity: .7; text-decoration: line-through; border-color: rgba(239,68,68,.5) !important; color: #f87171 !important; }
.st-space.dead i.pct { text-decoration: none; color: #f87171; }

/* v497 : Ce que l'IA apprend */
.ln-learn { display:flex; flex-direction:column; gap:14px; }
.ln-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.ln-top b { display:block; font-size:15px; color:var(--text-primary); }
.ln-top span { font-size:12.5px; color:var(--text-secondary); }
.ln-mode { display:inline-flex; gap:2px; padding:3px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.ln-mode button { border:0; background:transparent; color:var(--text-secondary); font:inherit; font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:7px; cursor:pointer; }
.ln-mode button.on { background:var(--accent,#8b5cf6); color:#fff; }
.ln-legend { display:flex; flex-wrap:wrap; gap:8px 14px; font-size:12px; color:var(--text-secondary); padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); }
.ln-legend .add { color:#4ade80; } .ln-legend .gone { color:#f87171; text-decoration:line-through; } .ln-legend .kept { color:#a78bfa; }
.ln-sec { padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.02); }
.ln-rl { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ln-rl li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.05); font-size:13px; color:var(--text-primary); }
.ln-rl li em { font-style:normal; font-size:11px; color:var(--text-secondary); margin-left:4px; }
.ln-rl li.add { border-color:rgba(74,222,128,.35); background:rgba(74,222,128,.06); } .ln-rl li.add > span { color:#86efac; }
.ln-rl li.gone > span { color:#f87171; text-decoration:line-through; } .ln-rl li.gone em { text-decoration:none; display:inline-block; }
.ln-rl li.gone { border-color:rgba(239,68,68,.3); background:rgba(239,68,68,.05); }
.ln-rl li.kept { border-color:rgba(167,139,250,.35); background:rgba(139,92,246,.07); }
.ln-rl li.pend { border-style:dashed; border-color:rgba(245,158,11,.4); }
.ln-rl li > div { display:flex; gap:6px; flex-shrink:0; }
.ln-rl button { border:1px solid rgba(255,255,255,.12); background:transparent; color:var(--text-secondary); font:inherit; font-size:11.5px; padding:4px 9px; border-radius:7px; cursor:pointer; }
.ln-rl button:hover { color:var(--text-primary); border-color:rgba(255,255,255,.25); }
.ln-rl button.ok { border-color:rgba(74,222,128,.4); color:#4ade80; }
@media (max-width:640px) { .ln-rl li { flex-direction:column; align-items:flex-start; } }

.xd-retry { margin-left:6px; border:1px solid rgba(139,92,246,.45); background:rgba(139,92,246,.1); color:#c4b5fd; font:inherit; font-size:11px; font-weight:600; padding:3px 8px; border-radius:7px; cursor:pointer; }
.xd-retry:hover { background:rgba(139,92,246,.2); }