/*
 * ShipPost — AutoSend "Crisp White Canvas" design system
 * Light theme. Violet primary action. Geist + Playfair Display.
 * Existing class names preserved so all views render with the new look.
 */

/* ─────────── Tokens ─────────── */
:root {
  /* Surfaces & ink */
  --color-ink: #292524;
  --color-paper: #fafaf9;
  --color-whisper: #e7e5e4;
  --color-snow: #ffffff;
  --color-graphite: #79716b;
  --color-stone: #a6a09b;
  --color-ebony: #0c0a09;

  /* Action / accents */
  --color-violet-action: #615fff;
  --color-violet-action-hover: #4f4dff;
  --color-violet-accent: #4f39f6;
  --color-sunset-orange: #d97757;
  --color-emerald-green: #5ea500;
  --color-alert-red: #ff0000;
  --color-ocean-teal: #22b8cd;
  --color-sky-blue: #007ebb;
  --color-lime-accent: #9ae600;

  /* Status (kept supportive) */
  --status-success-bg: #f1f8eb;
  --status-success-text: #3f6f0c;
  --status-error-bg: #fef2f2;
  --status-error-text: #991b1b;
  --status-warning-bg: #fff8e6;
  --status-warning-text: #8a5a00;
  --status-info-bg: #e8f7fb;
  --status-info-text: #006487;

  /* TikTok brand (platform indicator only, never chrome) */
  --tiktok-pink: #ff0050;

  /* Type */
  --font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-display: 'Playfair Display', Georgia, "Times New Roman", serif;

  /* Type scale */
  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading: 40px;
  --text-display: 80px;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 16px;
  --element-gap: 24px;

  /* Radii */
  --radius-button: 8px;
  --radius-input: 8px;
  --radius-tag: 12px;
  --radius-card: 16px;

  /* Elevation */
  --shadow-card: rgba(0, 0, 0, 0.08) 0px 20px 25px -5px, rgba(0, 0, 0, 0.06) 0px 8px 10px -6px;
  --shadow-soft: rgba(0, 0, 0, 0.04) 0px 1px 2px, rgba(0, 0, 0, 0.04) 0px 4px 8px -4px;

  /* ── Legacy aliases ────────────────────────────────────────────
     Older view code references these names. Mapping them here
     means all those views inherit the new system without edits. */
  --primary-green: var(--color-violet-action);
  --primary-green-hover: var(--color-violet-action-hover);
  --accent-green: var(--color-violet-accent);
  --background: var(--color-snow);
  --sidebar-bg: var(--color-paper);
  --text-primary: var(--color-ink);
  --text-secondary: var(--color-graphite);
  --text-muted: var(--color-stone);
  --border-color: var(--color-whisper);
  --border-light: #f0eeec;
  --card-shadow: var(--shadow-soft);
  --card-shadow-hover: var(--shadow-card);
  --success-bg: var(--status-success-bg);
  --success-text: var(--status-success-text);
  --error-bg: var(--status-error-bg);
  --error-text: var(--status-error-text);
  --warning-bg: var(--status-warning-bg);
  --warning-text: var(--status-warning-text);
}

/* ─────────── Reset / base ─────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-geist);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--color-ink);
  background-color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-violet-accent); }

img, svg, video { display: block; max-width: 100%; }

code, pre, kbd, samp {
  font-family: var(--font-geist-mono);
  font-size: 0.9em;
}

::selection { background: rgba(97, 95, 255, 0.18); color: var(--color-ink); }

/* ─────────── App shell ─────────── */
.app-layout { display: flex; flex-direction: column; min-height: 100vh; }
.app-container { display: flex; flex: 1; min-height: 100vh; }

/* ─────────── Sidebar ─────────── */
.sidebar {
  width: 240px;
  background-color: var(--color-snow);
  border-right: 1px solid var(--color-whisper);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-header { padding: 20px 16px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon { font-size: 20px; color: var(--color-violet-action); }
.brand-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.sidebar-section { padding: 0 16px; margin-bottom: 16px; }

.section-label {
  font-family: var(--font-geist-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.workspace-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-snow);
  border: 1px solid var(--color-whisper);
  border-radius: var(--radius-button);
  cursor: pointer;
  font-size: 14px;
  color: var(--color-ink);
}
.workspace-selector i:first-child { color: var(--color-graphite); }
.workspace-selector i:last-child { margin-left: auto; font-size: 10px; color: var(--color-stone); }

/* Create Post button */
.create-post-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 16px 20px;
  padding: 10px 20px;
  background-color: var(--color-violet-action);
  color: var(--color-snow);
  border: none;
  border-radius: var(--radius-button);
  font-family: var(--font-geist);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.create-post-btn:hover { background-color: var(--color-violet-action-hover); color: var(--color-snow); }

/* Sidebar nav */
.sidebar-nav { flex: 1; padding: 0 8px; }
.nav-section { margin-bottom: 20px; }
.nav-section-title {
  font-family: var(--font-geist-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-stone);
  padding: 8px 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  color: var(--color-graphite);
  text-decoration: none;
  border-radius: var(--radius-button);
  font-size: 14px;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background-color: var(--color-paper); color: var(--color-ink); }
.nav-item.active {
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-weight: 500;
}
.nav-item i { width: 16px; text-align: center; font-size: 14px; }

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--color-whisper);
  margin-top: auto;
}
.user-profile { display: flex; align-items: center; gap: 10px; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.user-avatar-placeholder {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-violet-action);
  color: var(--color-snow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.user-info { flex: 1; min-width: 0; }
.user-name {
  display: block; font-weight: 500; color: var(--color-ink);
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-plan { display: block; font-size: 12px; color: var(--color-stone); }
.user-plan a { color: var(--color-violet-accent); text-decoration: none; }

.logout-icon {
  background: none; border: none; color: var(--color-stone);
  cursor: pointer; padding: 8px; border-radius: var(--radius-button);
  transition: background 0.15s, color 0.15s;
}
.logout-icon:hover { background: var(--color-paper); color: var(--color-ink); }

/* ─────────── Main content ─────────── */
.main-content {
  flex: 1;
  margin-left: 240px;
  background-color: var(--color-paper);
  min-height: 100vh;
  padding: 32px 40px;
}

.page-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 24px;
}

/* Compose / create post form */
.create-post-container {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  max-width: 1100px;
}
.create-post-main { display: flex; flex-direction: column; gap: 24px; }

/* Account selector */
.account-selector {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-whisper);
}
.account-selector-label { font-size: 13px; color: var(--color-graphite); }
.account-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.account-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--color-snow);
  border: 1px solid var(--color-whisper);
  border-radius: 999px;
  font-size: 13px;
  color: var(--color-ink);
}
.account-chip.connected { border-color: var(--color-violet-action); }
.account-chip img { width: 22px; height: 22px; border-radius: 50%; }
.account-chip i { font-size: 16px; }

/* Upload area */
.upload-area {
  border: 1px dashed var(--color-stone);
  border-radius: var(--radius-card);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  background: var(--color-snow);
}
.upload-area:hover, .upload-area.dragover {
  border-color: var(--color-violet-action);
  background: rgba(97, 95, 255, 0.03);
}
.upload-area.has-file {
  border-style: solid;
  border-color: var(--color-violet-action);
  padding: 24px;
}
.upload-icon {
  width: 48px; height: 48px;
  margin: 0 auto 16px;
  background: rgba(97, 95, 255, 0.08);
  border-radius: var(--radius-tag);
  display: flex; align-items: center; justify-content: center;
}
.upload-icon i { font-size: 20px; color: var(--color-violet-action); }
.upload-title { font-size: 15px; font-weight: 600; color: var(--color-ink); margin-bottom: 4px; }
.upload-subtitle { font-size: 13px; color: var(--color-stone); margin-bottom: 12px; }
.upload-type {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-geist-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--color-graphite);
  padding: 4px 12px;
  background: var(--color-paper);
  border-radius: var(--radius-tag);
}
.upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.video-preview-container {
  margin-top: 16px;
  border-radius: var(--radius-button);
  overflow: hidden;
  background: #000;
}
.video-preview-container video { width: 100%; max-height: 300px; display: block; }

.file-info {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  background: var(--color-paper);
  border-radius: var(--radius-button);
  margin-top: 12px;
}
.file-info i { color: var(--color-violet-action); }
.file-name { font-weight: 500; flex: 1; }
.file-size { color: var(--color-stone); font-size: 13px; }
.remove-file {
  background: none; border: none; color: var(--color-stone);
  cursor: pointer; padding: 4px;
}
.remove-file:hover { color: var(--status-error-text); }

/* Caption */
.caption-group { display: flex; flex-direction: column; gap: 8px; }
.caption-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--color-ink);
}
.caption-label i { color: var(--color-stone); font-size: 12px; }
.caption-textarea {
  width: 100%; min-height: 140px;
  padding: 12px 14px;
  border: 1px solid var(--color-whisper);
  border-radius: var(--radius-input);
  font-family: var(--font-geist);
  font-size: 14px; line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-snow);
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.caption-textarea:focus {
  outline: none;
  border-color: var(--color-violet-action);
  box-shadow: 0 0 0 3px rgba(97, 95, 255, 0.12);
}
.caption-textarea::placeholder { color: var(--color-stone); }
.character-count { text-align: right; font-size: 12px; color: var(--color-stone); }
.character-count.warning { color: var(--status-warning-text); }
.character-count.over-limit { color: var(--status-error-text); font-weight: 500; }

/* Schedule panel */
.schedule-panel {
  background: var(--color-snow);
  border: none;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  padding: 20px;
  position: sticky;
  top: 32px;
}
.schedule-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px;
}
.schedule-title { font-size: 14px; font-weight: 600; color: var(--color-ink); }

/* Toggle switch */
.toggle-switch { position: relative; width: 40px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer; inset: 0;
  background-color: var(--color-whisper);
  border-radius: 22px;
  transition: background-color 0.2s;
}
.toggle-slider:before {
  position: absolute; content: "";
  height: 16px; width: 16px;
  left: 3px; bottom: 3px;
  background-color: var(--color-snow);
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.toggle-switch input:checked + .toggle-slider { background-color: var(--color-violet-action); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }

/* Schedule options */
.schedule-options { display: flex; gap: 8px; margin-bottom: 16px; }
.schedule-option { flex: 1; cursor: pointer; }
.schedule-option input { position: absolute; opacity: 0; pointer-events: none; }
.schedule-option .option-content {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  background: var(--color-paper);
  border: 1px solid var(--color-whisper);
  border-radius: var(--radius-button);
  font-size: 13px; font-weight: 500;
  color: var(--color-graphite);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.schedule-option .option-content i { font-size: 15px; }
.schedule-option input:checked + .option-content {
  background: rgba(97, 95, 255, 0.06);
  border-color: var(--color-violet-action);
  color: var(--color-violet-action);
}
.schedule-option:hover .option-content { border-color: var(--color-violet-accent); }

/* Datetime */
.datetime-picker { margin-bottom: 20px; }
.datetime-label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--color-graphite); margin-bottom: 8px;
}
.datetime-inputs { display: flex; gap: 8px; }
.datetime-input {
  flex: 1; padding: 10px 12px;
  border: 1px solid var(--color-whisper);
  border-radius: var(--radius-input);
  font-family: var(--font-geist);
  font-size: 14px; color: var(--color-ink);
  background: var(--color-snow);
}
.datetime-input.date-input { flex: 1.2; }
.datetime-input.time-input { flex: 0.8; }
.datetime-input:focus {
  outline: none; border-color: var(--color-violet-action);
  box-shadow: 0 0 0 3px rgba(97, 95, 255, 0.12);
}

/* Action buttons */
.action-buttons { display: flex; flex-direction: column; gap: 12px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-geist);
  font-size: 16px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn-primary {
  background-color: var(--color-violet-action);
  color: var(--color-snow);
  border-color: var(--color-violet-action);
}
.btn-primary:hover:not(:disabled) {
  background-color: var(--color-violet-action-hover);
  color: var(--color-snow);
}
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
  font-weight: 400;
}
.btn-secondary:hover { background-color: var(--color-ink); color: var(--color-snow); }
.btn-ghost {
  background-color: transparent;
  color: var(--color-ink);
  border-color: transparent;
  font-weight: 400;
  padding: 4px 16px;
  font-size: 14px;
}
.btn-ghost:hover { color: var(--color-graphite); }
.btn-danger {
  background-color: transparent;
  color: var(--status-error-text);
  border-color: var(--status-error-text);
}
.btn-danger:hover { background-color: var(--status-error-text); color: var(--color-snow); }
.btn-success {
  background-color: var(--color-emerald-green);
  color: var(--color-snow);
  border-color: var(--color-emerald-green);
}
.btn-sm { padding: 6px 16px; font-size: 13px; font-weight: 500; }
.btn-lg { padding: 12px 28px; font-size: 16px; }
.btn-full { width: 100%; }

/* Posts grid */
.posts-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}

.view-toggle {
  display: flex;
  border: 1px solid var(--color-whisper);
  border-radius: var(--radius-button);
  overflow: hidden;
  background: var(--color-snow);
}
.view-toggle-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border: none; background: transparent;
  font-family: var(--font-geist);
  font-size: 13px; font-weight: 500;
  color: var(--color-graphite);
  text-decoration: none; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.view-toggle-btn:not(:last-child) { border-right: 1px solid var(--color-whisper); }
.view-toggle-btn:hover { background: var(--color-paper); color: var(--color-ink); }
.view-toggle-btn.active { background: var(--color-violet-action); color: var(--color-snow); }

.posts-filters { display: flex; gap: 12px; }
.filter-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  background: var(--color-snow);
  border: 1px solid var(--color-whisper);
  border-radius: var(--radius-button);
  font-size: 13px;
  color: var(--color-graphite);
  cursor: pointer;
}
.filter-btn:hover { border-color: var(--color-ink); color: var(--color-ink); }

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

.post-card {
  background: var(--color-snow);
  border: none;
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.post-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.post-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-whisper);
}
.post-date { font-size: 13px; color: var(--color-graphite); }
.post-time { font-size: 13px; color: var(--color-stone); }
.post-type-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--color-paper);
  border-radius: var(--radius-tag);
  font-family: var(--font-geist-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-graphite);
}
.post-card-body { padding: 16px; }
.post-caption {
  font-size: 14px; color: var(--color-ink); line-height: 1.5;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-thumbnail {
  background: #000;
  border-radius: var(--radius-button);
  overflow: hidden;
  margin-bottom: 12px;
  position: relative;
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
}
.post-thumbnail i { font-size: 32px; color: rgba(255, 255, 255, 0.85); }

.post-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--color-whisper);
}
.post-platform { display: flex; align-items: center; gap: 8px; }
.post-platform i { font-size: 18px; color: var(--tiktok-pink); }

.post-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-tag);
  font-family: var(--font-geist-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em;
}
.status-queued { background: var(--status-info-bg); color: var(--status-info-text); }
.status-uploading { background: var(--status-warning-bg); color: var(--status-warning-text); }
.status-posted { background: var(--status-success-bg); color: var(--status-success-text); }
.status-failed { background: var(--status-error-bg); color: var(--status-error-text); }
.status-cancelled { background: var(--color-paper); color: var(--color-stone); }
.status-draft { background: var(--status-warning-bg); color: var(--status-warning-text); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 80px 40px;
}
.empty-state-icon { font-size: 56px; color: var(--color-whisper); margin-bottom: 24px; }
.empty-state-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400;
  color: var(--color-ink); margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.empty-state-text { font-size: 15px; color: var(--color-graphite); margin-bottom: 24px; }

/* Connect prompt (TikTok / IG / Pinterest connect cards) */
.connect-prompt {
  max-width: 480px;
  margin: 80px auto;
  text-align: center;
  padding: 48px 40px;
  background: var(--color-snow);
  border: none;
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
}
.connect-icon {
  width: 64px; height: 64px;
  margin: 0 auto 24px;
  background: var(--color-paper);
  border-radius: var(--radius-tag);
  display: flex; align-items: center; justify-content: center;
}
.connect-icon i { font-size: 28px; color: var(--color-violet-action); }
.connect-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.connect-text { color: var(--color-graphite); margin-bottom: 24px; line-height: 1.6; }
.connect-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 28px;
  background: var(--color-violet-action);
  color: var(--color-snow);
  border: none;
  border-radius: var(--radius-button);
  font-family: var(--font-geist);
  font-size: 16px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.connect-btn:hover { background: var(--color-violet-action-hover); color: var(--color-snow); }

/* Toast */
.toast {
  position: fixed;
  top: 20px; right: 20px; left: 20px;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  font-size: 14px;
  z-index: 9999;
  background: var(--color-snow);
  box-shadow: var(--shadow-card);
  animation: slideIn 0.3s ease;
}
@media (min-width: 500px) { .toast { left: auto; max-width: 400px; } }
.toast-success { border-left: 3px solid var(--color-emerald-green); color: var(--status-success-text); }
.toast-error { border-left: 3px solid var(--status-error-text); color: var(--status-error-text); }
.toast-close {
  background: none; border: none;
  font-size: 20px; line-height: 1; cursor: pointer; opacity: 0.5;
  margin-left: auto; padding: 8px;
  min-width: 36px; min-height: 36px;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.toast-close:hover, .toast-close:active { opacity: 1; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(80px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(80px); }
}

/* Post detail */
.post-detail { max-width: 800px; }
.post-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 24px;
  border-bottom: 1px solid var(--color-whisper);
}
.back-link {
  display: flex; align-items: center; gap: 8px;
  color: var(--color-graphite);
  text-decoration: none; font-size: 14px;
}
.back-link:hover { color: var(--color-ink); }
.detail-section { margin-bottom: 32px; }
.detail-section-title {
  font-family: var(--font-geist-mono);
  font-size: 11px; font-weight: 500;
  color: var(--color-graphite);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.detail-content { font-size: 15px; line-height: 1.6; }
.detail-row {
  display: flex; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-whisper);
}
.detail-label {
  width: 140px; font-weight: 500;
  color: var(--color-graphite); flex-shrink: 0;
}
.detail-value { flex: 1; color: var(--color-ink); }
.detail-actions {
  display: flex; gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--color-whisper);
}

/* Post type selection grid */
.post-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin-bottom: 32px;
}
.post-type-card {
  display: flex; flex-direction: column; align-items: center;
  padding: 40px 24px;
  background: var(--color-snow);
  border: 1px dashed var(--color-stone);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s;
  position: relative;
}
.post-type-card:hover:not(.disabled) {
  border-color: var(--color-violet-action);
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.post-type-card.active {
  border-color: var(--color-violet-action);
  border-style: solid;
}
.post-type-card.disabled { opacity: 0.6; cursor: not-allowed; }
.post-type-icon {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.post-type-icon i { font-size: 32px; color: var(--color-stone); }
.post-type-card.active .post-type-icon i,
.post-type-card:hover:not(.disabled) .post-type-icon i { color: var(--color-violet-action); }
.post-type-name {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink); margin-bottom: 16px;
}
.post-type-platforms { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.post-type-platforms i { font-size: 18px; color: var(--color-stone); }
.post-type-platforms i.active { color: var(--tiktok-pink); }

.coming-soon-badge {
  position: absolute; top: 12px; right: 12px;
  padding: 4px 10px;
  background: var(--color-paper);
  border-radius: var(--radius-tag);
  font-family: var(--font-geist-mono);
  font-size: 10px; font-weight: 500;
  color: var(--color-stone);
  text-transform: uppercase; letter-spacing: 0.08em;
}

.connect-accounts-hint {
  display: flex; align-items: center; gap: 8px;
  color: var(--color-graphite);
  font-size: 13px;
}
.connect-accounts-hint i { color: var(--color-violet-action); }
.connect-accounts-hint strong { color: var(--color-ink); }

/* Section header */
.section-header { margin-bottom: 20px; margin-top: 40px; }
.section-header h2 {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  display: flex; align-items: center; gap: 10px;
}
.section-header h2 i { color: var(--color-stone); font-size: 18px; }

.no-caption { color: var(--color-stone); font-style: italic; }

/* Form errors */
.form-errors {
  display: flex; gap: 12px;
  padding: 16px;
  background: var(--status-error-bg);
  border-radius: var(--radius-button);
  margin-bottom: 24px;
  color: var(--status-error-text);
  border-left: 3px solid var(--status-error-text);
}
.form-errors i { font-size: 18px; flex-shrink: 0; }
.form-errors ul { margin: 8px 0 0; padding-left: 20px; }
.form-errors li { margin-bottom: 4px; }

.video-preview-wrapper { width: 100%; }

/* Responsive */
@media (max-width: 1024px) {
  .create-post-container { grid-template-columns: 1fr; }
  .schedule-panel { position: static; }
  .post-type-grid { grid-template-columns: 1fr; max-width: 400px; }
}
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.3s; z-index: 100; }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; padding: 20px; }
  .posts-grid { grid-template-columns: 1fr; }
  .posts-header { flex-direction: column; gap: 16px; align-items: flex-start; }
  .post-type-grid { grid-template-columns: 1fr; }
}

/* Connections page */
.connections-grid { display: flex; flex-direction: column; gap: 24px; }
.platform-section {
  background: var(--color-snow);
  border: none;
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-card);
  padding: 24px;
}
.platform-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.platform-info { display: flex; align-items: center; gap: 12px; }
.platform-icon { font-size: 24px; color: var(--tiktok-pink); }
.platform-info h3 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 400;
  letter-spacing: -0.01em;
}
.connection-status {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-geist-mono);
  font-size: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-tag);
}
.connection-status.connected { background: var(--status-success-bg); color: var(--status-success-text); }
.connected-accounts { margin-top: 16px; }

.account-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px;
  background: var(--color-paper);
  border-radius: var(--radius-button);
}
.account-info { display: flex; align-items: center; gap: 12px; }
.account-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.account-avatar-placeholder {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-violet-action);
  color: var(--color-snow);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.account-details { display: flex; flex-direction: column; }
.account-name { font-weight: 500; }
.account-id {
  font-family: var(--font-geist-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-stone);
}
.account-actions { display: flex; align-items: center; gap: 12px; }

.token-status {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-geist-mono);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-tag);
}
.token-status.active { background: var(--status-success-bg); color: var(--status-success-text); }
.token-status.expired { background: var(--status-error-bg); color: var(--status-error-text); }

.no-connections { text-align: center; padding: 20px; color: var(--color-stone); }

.missing-connections {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 8px 12px;
  background: var(--status-warning-bg);
  border-radius: var(--radius-button);
  font-size: 12px;
  color: var(--status-warning-text);
}

/* Admin */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--color-snow);
  border: none;
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex; align-items: center; gap: 16px;
}
.stat-icon {
  width: 44px; height: 44px;
  background: rgba(97, 95, 255, 0.08);
  border-radius: var(--radius-tag);
  display: flex; align-items: center; justify-content: center;
}
.stat-icon i { font-size: 18px; color: var(--color-violet-action); }
.stat-content { display: flex; flex-direction: column; }
.stat-value {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.stat-label {
  font-family: var(--font-geist-mono);
  font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-stone);
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}
.admin-section {
  background: var(--color-snow);
  border: none;
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-bottom: 24px;
}
.admin-section .section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; margin-top: 0;
}
.admin-section .section-header h2 {
  font-family: var(--font-geist);
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.admin-section .section-header h2 i { color: var(--color-stone); }

.status-breakdown, .platform-breakdown {
  display: flex; flex-direction: column; gap: 8px;
}
.status-row, .platform-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-whisper);
}
.status-row:last-child, .platform-row:last-child { border-bottom: none; }
.status-count, .platform-count { font-weight: 600; color: var(--color-ink); }

.admin-table { overflow-x: auto; }
.admin-table table { width: 100%; border-collapse: collapse; }
.admin-table th {
  text-align: left; padding: 12px;
  font-family: var(--font-geist-mono);
  font-size: 11px; font-weight: 600;
  color: var(--color-graphite);
  text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-whisper);
}
.admin-table td { padding: 12px; border-bottom: 1px solid var(--color-whisper); }
.admin-table tr:hover { background: var(--color-paper); }

.account-cell { display: flex; align-items: center; gap: 8px; }
.account-avatar-sm {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--color-violet-action);
  color: var(--color-snow);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
.admin-badge {
  padding: 2px 8px;
  background: var(--color-violet-action);
  color: var(--color-snow);
  border-radius: var(--radius-tag);
  font-family: var(--font-geist-mono);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}

.no-data { text-align: center; color: var(--color-stone); padding: 20px; }

.connection-warning {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--status-warning-bg);
  border-radius: var(--radius-button);
  font-size: 13px; color: var(--status-warning-text);
  margin-top: 12px;
}
.connection-warning a { color: var(--status-warning-text); font-weight: 600; }

.schedule-note {
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 10px 14px;
  background: var(--color-paper);
  border-radius: var(--radius-button);
  font-size: 12px; color: var(--color-graphite);
}
.schedule-note i { color: var(--color-stone); }

/* Edit post page */
.edit-post-container { max-width: 1100px; }
.edit-post-header { margin-bottom: 24px; }
.edit-post-header .page-title { margin-bottom: 0; }
.edit-post-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
}
.edit-post-main { display: flex; flex-direction: column; gap: 24px; }
.edit-section {
  background: var(--color-snow);
  border: none;
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-card);
  padding: 20px;
}
.edit-section-title {
  font-family: var(--font-geist-mono);
  font-size: 11px; font-weight: 600;
  color: var(--color-graphite);
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.current-video-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px;
  background: var(--color-paper);
  border-radius: var(--radius-button);
}
.video-info { display: flex; align-items: center; gap: 12px; }
.video-info i { font-size: 22px; color: var(--color-violet-action); }
.video-name { display: block; font-weight: 500; }
.video-meta { display: block; font-size: 12px; color: var(--color-stone); }
.video-note { font-size: 12px; color: var(--color-stone); }

.scheduled-for {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: var(--status-success-bg);
  border-radius: var(--radius-button);
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--status-success-text);
}
.scheduled-for i { font-size: 16px; }

.danger-zone {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--color-whisper);
}

@media (max-width: 900px) {
  .edit-post-grid { grid-template-columns: 1fr; }
}

/* Calendar */
.calendar-container { max-width: 1200px; }
.calendar-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap; gap: 16px;
}
.calendar-nav { display: flex; align-items: center; gap: 12px; }
.calendar-nav-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--color-whisper);
  background: var(--color-snow);
  border-radius: var(--radius-button);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, color 0.15s;
}
.calendar-nav-btn:hover { border-color: var(--color-ink); color: var(--color-ink); }

.calendar-title {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 400;
  letter-spacing: -0.01em;
  min-width: 180px; text-align: center;
}

.calendar-view-toggle {
  display: flex;
  border: 1px solid var(--color-whisper);
  border-radius: var(--radius-button);
  overflow: hidden;
}
.view-btn {
  padding: 8px 16px; border: none;
  background: var(--color-snow);
  font-family: var(--font-geist);
  font-size: 13px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.view-btn:not(:last-child) { border-right: 1px solid var(--color-whisper); }
.view-btn.active { background: var(--color-violet-action); color: var(--color-snow); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-whisper);
  border: 1px solid var(--color-whisper);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.calendar-day-header {
  background: var(--color-paper);
  padding: 12px 8px; text-align: center;
  font-family: var(--font-geist-mono);
  font-size: 11px; font-weight: 600;
  color: var(--color-graphite);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.calendar-day {
  background: var(--color-snow);
  min-height: 120px; padding: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.calendar-day:hover { background: var(--color-paper); }
.calendar-day.other-month { background: var(--color-paper); opacity: 0.6; }
.calendar-day.today { background: rgba(97, 95, 255, 0.04); }

.day-number { font-size: 14px; font-weight: 500; color: var(--color-ink); margin-bottom: 8px; }
.calendar-day.today .day-number {
  background: var(--color-violet-action);
  color: var(--color-snow);
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.day-posts { display: flex; flex-direction: column; gap: 4px; }
.calendar-post {
  font-family: var(--font-geist-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 6px;
  border-radius: 4px;
  background: var(--status-info-bg);
  color: var(--status-info-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.calendar-post.status-posted { background: var(--status-success-bg); color: var(--status-success-text); }
.calendar-post.status-failed { background: var(--status-error-bg); color: var(--status-error-text); }
.calendar-post.status-draft { background: var(--status-warning-bg); color: var(--status-warning-text); }

.more-posts { font-size: 10px; color: var(--color-stone); text-align: center; margin-top: 4px; }

@media (max-width: 768px) {
  .calendar-grid { display: none; }
  .calendar-list { display: block; }
  .calendar-list-day { margin-bottom: 16px; }
  .calendar-list-date {
    font-size: 14px; font-weight: 600;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-whisper);
    display: flex; align-items: center; gap: 8px;
  }
  .calendar-list-date.today { color: var(--color-violet-action); }
  .calendar-list-posts { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
  .calendar-list-post {
    display: flex; align-items: center; gap: 12px;
    padding: 12px;
    background: var(--color-snow);
    border: 1px solid var(--color-whisper);
    border-radius: var(--radius-button);
    text-decoration: none; color: inherit;
  }
  .list-post-time { font-size: 13px; font-weight: 600; color: var(--color-ink); min-width: 60px; }
  .list-post-content { flex: 1; min-width: 0; }
  .list-post-caption { font-size: 13px; color: var(--color-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .list-post-type { font-size: 11px; color: var(--color-stone); display: flex; align-items: center; gap: 4px; }
}
@media (min-width: 769px) { .calendar-list { display: none; } }

/* Auth pages */
.auth-container {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
  background: var(--color-paper);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--color-snow);
  border: none;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 40px;
}
.auth-header { text-align: center; margin-bottom: 32px; }
.auth-icon {
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  background: var(--color-paper);
  border-radius: var(--radius-tag);
  display: flex; align-items: center; justify-content: center;
}
.auth-icon i { font-size: 24px; color: var(--color-violet-action); }
.auth-title {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-ink);
  margin-bottom: 8px;
}
.auth-subtitle { font-size: 14px; color: var(--color-graphite); }

.auth-form { display: flex; flex-direction: column; gap: 20px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label { font-size: 14px; font-weight: 500; color: var(--color-ink); }
.form-hint { font-size: 12px; color: var(--color-stone); font-weight: 400; margin-left: 4px; }

.form-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-whisper);
  border-radius: var(--radius-input);
  font-family: var(--font-geist);
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-snow);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-violet-action);
  box-shadow: 0 0 0 3px rgba(97, 95, 255, 0.12);
}
.form-input::placeholder { color: var(--color-stone); }

.form-group-inline { display: flex; align-items: center; gap: 8px; }
.form-checkbox { width: 16px; height: 16px; accent-color: var(--color-violet-action); }
.form-checkbox-label { font-size: 14px; color: var(--color-graphite); cursor: pointer; }
.form-actions { margin-top: 8px; }

.auth-links {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 24px; padding-top: 24px;
  border-top: 1px solid var(--color-whisper);
}
.auth-link { color: var(--color-violet-accent); text-decoration: none; font-size: 14px; font-weight: 500; }
.auth-link:hover { text-decoration: underline; }
.auth-separator { color: var(--color-whisper); }
.auth-text { font-size: 14px; color: var(--color-graphite); }
.auth-errors {
  display: flex; gap: 12px;
  padding: 14px;
  background: var(--status-error-bg);
  border-left: 3px solid var(--status-error-text);
  border-radius: var(--radius-button);
  color: var(--status-error-text);
  font-size: 14px;
}
.auth-errors i { font-size: 18px; flex-shrink: 0; }
.auth-errors p { margin: 0 0 4px; }
.auth-errors p:last-child { margin-bottom: 0; }

/* Footer */
.app-footer {
  margin-top: auto;
  padding: 32px 0 24px;
  border-top: 1px solid var(--color-whisper);
  text-align: center;
}
.footer-links {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 12px;
}
.footer-links a {
  color: var(--color-graphite);
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--color-violet-accent); text-decoration: underline; }
.footer-separator { color: var(--color-whisper); font-size: 12px; }
.footer-company {
  font-family: var(--font-geist-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--color-stone);
}

/* TikTok compliance UI */
.privacy-group { margin-top: 8px; }
.privacy-group .form-label { margin-bottom: 8px; }
.privacy-group .required { color: var(--status-error-text); margin-left: 4px; }

.privacy-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-whisper);
  border-radius: var(--radius-input);
  font-family: var(--font-geist);
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-snow);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2379716b' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.privacy-select:focus {
  outline: none;
  border-color: var(--color-violet-action);
  box-shadow: 0 0 0 3px rgba(97, 95, 255, 0.12);
}
.privacy-select option[value=""] { color: var(--color-stone); }

.interaction-group { margin-top: 8px; }
.interaction-group .form-label { margin-bottom: 12px; }
.checkbox-row { display: flex; gap: 24px; flex-wrap: wrap; }
.checkbox-item { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.checkbox-item input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--color-violet-action);
  cursor: pointer;
}
.checkbox-label { font-size: 14px; color: var(--color-ink); user-select: none; }
.checkbox-item.disabled { opacity: 0.5; pointer-events: none; }
.disabled-hint { font-size: 11px; color: var(--color-stone); font-style: italic; }

.disclosure-group {
  margin-top: 8px; padding: 16px;
  background: var(--color-paper);
  border-radius: var(--radius-card);
}
.disclosure-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.disclosure-header .form-label { margin: 0; }
.disclosure-description {
  font-size: 13px; color: var(--color-graphite);
  line-height: 1.5; margin: 0;
}

.brand-options {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--color-whisper);
}
.brand-option { padding: 12px 0; }
.brand-option:not(:last-child) { border-bottom: 1px solid var(--color-whisper); }
.brand-option .checkbox-item { margin-bottom: 4px; }
.brand-description {
  font-size: 12px; color: var(--color-stone);
  margin: 4px 0 0 24px; line-height: 1.4;
}
.brand-label-preview {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; margin-left: 24px;
  padding: 6px 12px;
  background: var(--status-info-bg);
  border-radius: var(--radius-button);
  font-size: 12px;
  color: var(--status-info-text);
}
.brand-label-preview i { font-size: 14px; }

.disclosure-warning {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 12px;
  background: var(--status-warning-bg);
  border-radius: var(--radius-button);
  font-size: 13px;
  color: var(--status-warning-text);
}
.disclosure-warning i { font-size: 14px; }

.consent-declaration {
  margin-bottom: 16px; padding: 12px;
  background: var(--color-paper);
  border-radius: var(--radius-button);
}
.consent-declaration p {
  font-size: 12px; color: var(--color-graphite);
  margin: 0; line-height: 1.5;
}
.consent-declaration a { color: var(--color-violet-accent); text-decoration: none; }
.consent-declaration a:hover { text-decoration: underline; }

.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-whisper);
  border-radius: var(--radius-input);
  font-family: var(--font-geist);
  font-size: 14px;
  color: var(--color-ink);
  background: var(--color-snow);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-select:focus {
  outline: none;
  border-color: var(--color-violet-action);
  box-shadow: 0 0 0 3px rgba(97, 95, 255, 0.12);
}

.posting-limit-warning {
  background: var(--status-warning-bg);
  border-left: 3px solid var(--status-warning-text);
  border-radius: var(--radius-button);
  padding: 12px 16px;
  margin-bottom: 16px;
  color: var(--status-warning-text);
  font-size: 14px;
}
.posting-limit-warning i { color: var(--status-warning-text); margin-right: 8px; }

.upload-info {
  font-size: 13px;
  color: var(--color-graphite);
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--status-info-bg);
  border-radius: var(--radius-button);
}
.upload-info i { color: var(--status-info-text); margin-right: 6px; }

.video-duration-error {
  background: var(--status-error-bg);
  border-left: 3px solid var(--status-error-text);
  border-radius: var(--radius-button);
  padding: 12px 16px;
  margin-top: 8px;
  color: var(--status-error-text);
  font-size: 14px;
}
.video-duration-error i { color: var(--status-error-text); margin-right: 8px; }

.processing-notice {
  font-size: 12px;
  color: var(--color-graphite);
  padding: 8px 12px;
  background: var(--status-info-bg);
  border-radius: var(--radius-button);
  margin-bottom: 12px;
}
.processing-notice i { color: var(--status-info-text); margin-right: 6px; }

.processing-banner {
  background: var(--status-info-bg);
  border-left: 3px solid var(--status-info-text);
  border-radius: var(--radius-button);
  padding: 16px;
  margin-bottom: 16px;
  color: var(--status-info-text);
  font-size: 14px;
  display: flex; align-items: center; gap: 12px;
}

.posted-notice {
  background: var(--status-success-bg);
  border-left: 3px solid var(--color-emerald-green);
  border-radius: var(--radius-button);
  padding: 16px;
  margin-bottom: 16px;
  color: var(--status-success-text);
  font-size: 14px;
}
.posted-notice i { color: var(--color-emerald-green); margin-right: 8px; }

/* Utility */
.hidden { display: none !important; }
.text-mono { font-family: var(--font-geist-mono); }
.text-display { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.01em; }

/* Badges */
.badge {
  display: inline-flex; align-items: center;
  padding: 6px 16px;
  background: var(--color-paper);
  color: var(--color-ink);
  border-radius: var(--radius-tag);
  font-family: var(--font-geist-mono);
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.04em;
}
.badge-violet { background: rgba(97, 95, 255, 0.08); color: var(--color-violet-accent); }
.badge-success { background: var(--status-success-bg); color: var(--status-success-text); }
.badge-warning { background: var(--status-warning-bg); color: var(--status-warning-text); }
.badge-error { background: var(--status-error-bg); color: var(--status-error-text); }