@charset "UTF-8";

:root {
  color-scheme: light;
  --canvas: #f4f5f2;
  --sidebar: #fafbf8;
  --surface: #ffffff;
  --ink: #163139;
  --ink-soft: #425a60;
  --muted: #78868a;
  --line: #e3e9e4;
  --line-strong: #cfdad3;
  --green: #28694f;
  --green-dark: #20563f;
  --mint: #dcefe3;
  --mint-light: #f0f7f1;
  --warm: #fbf2df;
  --warm-ink: #957032;
  --danger: #b6504b;
  --danger-light: #fff2ef;
  --nav-width: 216px;
  --radius: 16px;
  --shadow-card: 0 3px 14px rgb(25 49 42 / 3%);
  --shadow-float: 0 14px 45px rgb(26 45 36 / 10%), 0 2px 7px rgb(26 45 36 / 4%);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--canvas);
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 360px; background: var(--canvas); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:disabled { cursor: not-allowed; opacity: .45; }
button, a { touch-action: manipulation; }
button, input, textarea, select { outline-offset: 3px; }
:focus-visible { outline: 3px solid #8dbca5; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
svg { flex-shrink: 0; vertical-align: middle; }
button svg, .nav-item svg, .badge svg { width: 18px; height: 18px; }
input[type="checkbox"] { accent-color: var(--green); width: 18px; height: 18px; cursor: pointer; }
input, select { min-width: 0; }
[hidden], .hidden { display: none !important; }
::selection { background: #d7eadd; color: var(--ink); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5ce; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

.app-shell { min-height: 100vh; }
.sidebar {
  width: var(--nav-width);
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  padding: 30px 18px 20px;
  z-index: 30;
}
.brand { display: flex; gap: 9px; align-items: center; padding: 0 12px; }
.brand-mark, .brand-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--green-dark);
  background: var(--mint);
  border-radius: 10px;
}
.brand-name, .brand strong { font-size: 23px; font-weight: 750; letter-spacing: -.85px; }
.brand-caption, .brand-subtitle { margin: 7px 0 34px 12px; font-size: 11px; color: var(--muted); letter-spacing: .8px; }
.brand { color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark { font-size: 23px; font-weight: 650; letter-spacing: -6px; padding-right: 6px; }
.brand-mark > span { color: #65a17b; }
.brand-name .brand-subtitle { display: block; margin: 4px 0 0; font-size: 7px; font-weight: 500; letter-spacing: 1.65px; line-height: 1.4; }
.workspace-switch { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 9px; padding: 10px 9px; margin: 29px 0 0; font-size: 10px; color: #536a59; font-weight: 550; }
.workspace-switch small { display: block; font-size: 8px; color: #9ba796; font-weight: 400; margin-top: 4px; }
.workspace-avatar { width: 24px; height: 27px; border-radius: 5px; background: #ecf3e6; color: #69905c; display: grid; place-items: center; font-size: 11px; }
.switch-chevron { margin-left: auto; color: #9eac96; }
.demo-note { padding: 13px 11px; background: #f0f5e9; border: 1px solid #e4ebdc; border-radius: 9px; color: #718566; }
.demo-note strong { margin-left: 5px; font-size: 10px; font-weight: 550; }
.demo-note p { font-size: 9px; line-height: 1.8; color: #94a28a; margin: 6px 0 0; }
.profile { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 10px; color: #607256; }
.profile small { display: block; font-size: 8px; color: #a2ad99; margin-top: 4px; }
.profile-avatar { display: grid; place-items: center; flex-shrink: 0; width: 29px; height: 29px; background: #e8eddf; border: 2px solid #fff; border-radius: 50%; font-size: 10px; color: #637853; }
.profile-menu { margin-left: auto; color: #a1ac98; font-size: 10px; }
.sidebar nav { display: grid; gap: 6px; }
.nav-label, .nav-section-label {
  margin: 28px 12px 11px;
  color: #99a49f;
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 650;
  text-transform: uppercase;
}
.nav-item, .nav-link, .sidebar nav > button, .sidebar nav > a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 45px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #72807b;
  font-size: 13px;
  font-weight: 550;
  text-align: left;
  transition: background .16s ease, color .16s ease;
  text-decoration: none;
}
.nav-item:hover, .nav-link:hover, .sidebar nav > button:hover { background: #eef2eb; color: var(--ink); }
.nav-item.active, .nav-link.active, .sidebar nav > .active, .sidebar [aria-current="page"] {
  background: #e9f0e6;
  color: var(--green-dark);
  font-weight: 650;
}
.nav-count { margin-left: auto; font-size: 10px; background: #fff; padding: 2px 6px; border-radius: 5px; color: var(--green); }
.sidebar-bottom, .sidebar-footer { margin-top: auto; padding: 22px 9px 0; }
.workspace-note, .sidebar-note { border: 1px solid var(--line); border-radius: 11px; padding: 13px; background: #f3f6ef; font-size: 11px; line-height: 1.7; color: #829083; }
.workspace-note strong, .sidebar-note strong { color: #4c6856; font-size: 11px; }
.user-profile, .user-row { display: flex; gap: 9px; align-items: center; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 19px; font-size: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #e7ece4; font-size: 11px; color: var(--green-dark); font-weight: 650; }
.user-role { font-size: 10px; color: var(--muted); margin-top: 3px; }
.workspace { margin-left: var(--nav-width); min-height: 100vh; padding: 0 38px 126px; }
.topbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.breadcrumbs { display: flex; gap: 9px; align-items: center; }
.breadcrumbs strong { color: var(--ink-soft); font-weight: 500; }
.breadcrumb { display: flex; gap: 12px; align-items: center; }
.breadcrumb span { color: #bbc4b7; }
.breadcrumb strong { color: #6b7b61; font-weight: 500; }
.topbar-date { color: #95a08c; font-size: 10px; }
.badge-outline { border: 1px solid #d9e3d1; color: #899a7c; background: transparent; padding: 3px 6px; font-size: 8px; letter-spacing: .8px; }
.topbar-actions { display: flex; gap: 15px; align-items: center; }
.demo-label, .demo-badge { color: #88938d; background: #ebeee8; border-radius: 5px; padding: 5px 9px; font-size: 10px; letter-spacing: .1px; }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin: 34px 0 24px; }
.eyebrow { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 650; color: #819383; margin: 0 0 10px; }
h1 { margin: 0; font-size: clamp(26px, 2.3vw, 34px); font-weight: 680; letter-spacing: -1.1px; line-height: 1.32; }
.page-subtitle, .page-description, .page-header p { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.page-header-actions, .header-actions { display: flex; gap: 9px; align-items: center; flex-shrink: 0; }
.date-label { font-size: 12px; color: #87928d; }
.stats-row, .summary-row { display: flex; align-items: center; gap: 26px; margin: 16px 0 25px; }
.stat-item { display: flex; gap: 7px; align-items: baseline; font-size: 11px; color: var(--muted); }
.stat-item strong { font-size: 21px; font-weight: 650; color: var(--ink); letter-spacing: -.6px; }
.stat-divider { width: 1px; height: 23px; background: var(--line); }
.generation-banner, .generation-summary {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  background: #eaf1e8;
  border: 1px solid #dce7db;
  border-radius: 12px;
  padding: 15px 18px;
  margin-bottom: 24px;
  font-size: 12px;
  color: #53695a;
}
.generation-banner strong, .generation-summary strong { font-weight: 600; color: #325c43; }
.generation-banner p { margin: 5px 0 0; color: #7c8b7a; font-size: 11px; line-height: 1.6; }
.generation-progress { display: flex; align-items: center; gap: 9px; flex-shrink: 0; font-size: 11px; }
.status-dot { display: inline-block; width: 6px; height: 6px; background: #67a17e; border-radius: 50%; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 21px; flex-wrap: wrap; }
.filter-group, .filter-tabs, .filter-row, .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.filter-button, .filter-chip {
  padding: 8px 12px;
  font-size: 11px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  transition: .15s ease;
}
.filter-button:hover, .filter-chip:hover { background: #e9ede6; color: var(--ink); }
.filter-button.active, .filter-chip.active, .filter-tabs [aria-selected="true"] { color: var(--green-dark); background: #fff; border-color: var(--line); box-shadow: 0 2px 4px rgb(30 50 34 / 3%); font-weight: 600; }
.search-field, .search-input { width: 218px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font-size: 11px; background: #fff; }
.search-field::placeholder, .search-input::placeholder { color: #a4ada5; }
select { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 9px 28px 9px 11px; color: var(--ink-soft); font-size: 11px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin: 26px 0 16px; gap: 12px; }
.section-heading h2 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -.2px; }
.section-heading small { font-size: 11px; color: var(--muted); }
.content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.content-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 13px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.content-card:hover { border-color: #c7d6c9; box-shadow: 0 8px 23px rgb(30 56 40 / 7%); transform: translateY(-2px); }
.content-card.selected, .content-card.is-selected, .content-card[data-selected="true"] { border-color: #75aa86; box-shadow: 0 0 0 1px #75aa86, 0 5px 16px rgb(47 87 59 / 5%); }
.card-cover, .card-image, .cover-image, .cover-wrap { position: relative; aspect-ratio: 1.58; background: #dce8e3; overflow: hidden; }
.card-cover img, .card-image img, .cover-wrap img, .cover-image img, .content-card > img { width: 100%; height: 100%; object-fit: cover; }
.cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(15 43 34 / 3%), rgb(15 43 34 / 4%) 25%, rgb(15 43 34 / 57%) 100%); pointer-events: none; }
.content-card > img { aspect-ratio: 1.58; height: auto; }
.card-cover::after, .cover-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(12 40 34 / 2%), rgb(12 40 34 / 6%) 48%, rgb(12 40 34 / 40%)); pointer-events: none; }
.cover-headline, .cover-title { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 21px; color: #fff; font-size: clamp(19px, 1.6vw, 25px); font-weight: 650; line-height: 1.35; letter-spacing: -.5px; text-shadow: 0 1px 8px rgb(0 0 0 / 10%); }
.cover-eyebrow { display: block; font-size: 9px; letter-spacing: 1.2px; font-weight: 500; color: #e1eee7; margin-bottom: 8px; }
.cover-credit, .image-credit { position: absolute; bottom: 8px; right: 9px; z-index: 2; font-size: 8px; color: rgb(255 255 255 / 75%); }
.card-select, .select-button, .card-checkbox {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 3;
  width: 25px;
  height: 25px;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 7px;
  background: rgb(255 255 255 / 92%);
  color: transparent;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgb(0 0 0 / 5%);
  padding: 0;
}
.selected .card-select, .selected .select-button, .is-selected .card-select, .card-select[aria-pressed="true"], .select-button[aria-pressed="true"] { background: var(--green); border-color: #fff; color: #fff; }
.card-select svg, .select-button svg { width: 15px; height: 15px; }
.card-cover .badge, .card-image .badge, .cover-wrap > .badge { position: absolute; top: 13px; left: 13px; z-index: 2; background: rgb(250 252 248 / 92%); color: #3c6750; }
.card-body, .card-content { padding: 19px 19px 15px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.card-meta { display: flex; gap: 7px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; font-size: 10px; color: var(--muted); }
.content-card h2, .content-card h3, .card-title { margin: 0 0 10px; font-size: 15px; font-weight: 620; line-height: 1.65; letter-spacing: -.15px; color: var(--ink); }
.card-excerpt, .card-summary { color: #86918a; font-size: 11px; line-height: 1.85; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-reason, .recommendation { font-size: 10px; line-height: 1.75; color: #708170; background: #f5f8f2; padding: 9px 10px; border-radius: 7px; margin-top: auto; }
.card-reason strong, .recommendation strong { color: #4b7053; font-weight: 550; }
.card-footer, .card-actions { display: flex; justify-content: space-between; align-items: center; gap: 9px; border-top: 1px solid #edf0ea; padding: 12px 19px; font-size: 10px; color: #96a099; }
.card-actions .btn, .card-footer .btn { min-height: 29px; padding: 5px 9px; font-size: 10px; }
.card-platforms { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #9aa69c; }
.platform-dot { width: 17px; height: 17px; display: grid; place-items: center; font-size: 8px; border: 1px solid #e0e7e0; border-radius: 4px; background: #fff; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 9px; font-weight: 550; line-height: 1.45; padding: 4px 7px; border-radius: 5px; background: #eef2ed; color: #77857b; white-space: nowrap; }
.badge-green { background: #e8f3e9; color: #4b7b58; }
.badge-warm { background: var(--warm); color: var(--warm-ink); }
.badge-blue { background: #ecf1f6; color: #607b93; }
.badge svg { width: 11px; height: 11px; }
.muted, .text-muted { color: var(--muted); }
.text-small { font-size: 11px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 550;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); box-shadow: 0 2px 3px rgb(27 74 44 / 9%); }
.btn-primary:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); }
.btn-secondary { background: #fff; border-color: var(--line); color: #566d5d; }
.btn-secondary:hover:not(:disabled) { background: #f7faf5; border-color: #becfc1; }
.btn-ghost { background: transparent; color: #6c8071; }
.btn-ghost:hover:not(:disabled) { background: #edf3e9; }
.btn-danger { background: var(--danger-light); color: var(--danger); border-color: #f2d7d1; }
.btn-sm { min-height: 30px; padding: 6px 10px; font-size: 10px; }
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #78897b;
  padding: 6px;
  transition: background .15s ease, color .15s ease;
}
.icon-button:hover:not(:disabled) { background: #eaf0e6; color: var(--green-dark); }
.icon-button.danger:hover, .icon-button[title*="删除"]:hover { background: var(--danger-light); color: var(--danger); }
.icon-button svg { width: 17px; height: 17px; }
.selection-bar {
  position: fixed;
  left: calc(var(--nav-width) + 26px);
  right: 26px;
  bottom: 20px;
  z-index: 45;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 72px;
  padding: 13px 20px;
  background: #fff;
  border: 1px solid #dce6db;
  border-radius: 12px;
  box-shadow: var(--shadow-float);
}
.selection-info, .selection-left, .selection-actions { display: flex; align-items: center; gap: 13px; }
.selection-info strong, .selection-left strong { font-size: 12px; font-weight: 600; }
.selection-info small, .selection-left small, .selection-hint { font-size: 10px; color: var(--muted); }
.selection-count { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; background: var(--mint); color: var(--green-dark); font-size: 14px; font-weight: 650; }
.selected-thumbnails, .selected-preview { display: flex; gap: 5px; }
.selected-thumbnails img, .selected-preview img { width: 36px; height: 37px; border-radius: 5px; object-fit: cover; border: 2px solid #fff; }
.selected-thumbnails img + img { margin-left: -9px; }
.selection-bar .btn-primary { padding: 11px 19px; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 240px; padding: 35px; color: var(--muted); border: 1px dashed #cddad0; background: #f7faf5; border-radius: 12px; }
.empty-state h3 { font-size: 15px; color: var(--ink-soft); margin: 12px 0 8px; }
.empty-state p { font-size: 12px; line-height: 1.8; margin: 0 0 16px; }

.drawer-backdrop, .modal-backdrop { position: fixed; inset: 0; background: rgb(19 39 34 / 35%); z-index: 70; display: flex; justify-content: flex-end; }
.detail-drawer { width: min(1160px, calc(100vw - 54px)); height: 100dvh; max-height: 100dvh; background: #fff; box-shadow: -20px 0 70px rgb(10 34 26 / 12%); display: flex; flex-direction: column; overflow: hidden; animation: drawer-in .2s ease; }
.detail-header { flex-shrink: 0; padding: 23px 28px 0; border-bottom: 1px solid var(--line); background: #fff; }
.detail-heading, .detail-title-row { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.detail-header h2 { font-size: 19px; letter-spacing: -.5px; line-height: 1.5; margin: 0 0 6px; font-weight: 630; }
.detail-header p { margin: 0; font-size: 11px; color: var(--muted); line-height: 1.7; }
.detail-header .badge { vertical-align: middle; }
.detail-meta { display: flex; align-items: center; gap: 9px; margin: 8px 0 17px; font-size: 11px; color: var(--muted); }
.save-status, .autosave-status { color: #7f9480; font-size: 10px; display: inline-flex; align-items: center; gap: 5px; }
.platform-tabs { display: flex; gap: 19px; margin-top: 20px; min-height: 45px; overflow-x: auto; }
.tab-button { display: inline-flex; justify-content: center; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #8b958c; min-height: 43px; padding: 0 3px 12px; font-size: 12px; white-space: nowrap; }
.tab-button.active, .tab-button[aria-selected="true"] { border-bottom-color: var(--green); color: var(--green-dark); font-weight: 650; }
.tab-button:hover { color: var(--green); }
.tab-button .badge { padding: 2px 5px; font-size: 8px; }
.detail-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); overflow: hidden; }
.editor-pane { padding: 25px 28px 38px; overflow-y: auto; min-width: 0; scrollbar-gutter: stable; }
.preview-pane { background: #f2f5ef; border-left: 1px solid var(--line); padding: 24px 25px 35px; overflow-y: auto; min-width: 0; }
.pane-heading { display: flex; justify-content: space-between; gap: 9px; align-items: center; margin-bottom: 17px; color: #728573; font-size: 10px; letter-spacing: .25px; }
.pane-heading strong { color: var(--ink-soft); font-size: 12px; font-weight: 550; }
.field, .form-field, .field-group { margin-bottom: 20px; }
.field > label, .form-field > label, .field-label { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; color: #546d5b; margin-bottom: 9px; }
.field > label small, .field-count, .char-count { font-size: 10px; color: #a0aaa1; font-weight: 400; }
.field input, .field textarea, .form-field input, .form-field textarea, .editor-pane input[type="text"], .editor-pane textarea, .modal input[type="text"], .modal textarea {
  width: 100%;
  border: 1px solid #dfe6dc;
  border-radius: 8px;
  background: #fff;
  padding: 12px 13px;
  color: #405b49;
  font-size: 12px;
  line-height: 1.9;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .editor-pane input:focus, .editor-pane textarea:focus, .modal input:focus, .modal textarea:focus { border-color: #8eb598; box-shadow: 0 0 0 3px #eef5ed; outline: none; }
.editor-pane textarea { min-height: 175px; }
.editor-pane textarea.title-input { min-height: 70px; font-weight: 600; }
.field-hint, .help-text { color: #9aa599; font-size: 10px; line-height: 1.7; margin-top: 7px; }
.rewrite-actions, .quick-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 20px; }
.rewrite-actions button, .quick-actions button { padding: 5px 9px; border: 1px solid var(--line); background: #f7faf4; color: #72846e; font-size: 10px; border-radius: 6px; }
.rewrite-actions button:hover, .quick-actions button:hover { background: #eaf2e4; border-color: #c8d8c6; }
.editor-section { margin-top: 25px; padding-top: 22px; border-top: 1px solid var(--line); }
.editor-section h3 { font-size: 12px; font-weight: 600; margin: 0 0 12px; color: #45604d; }
.evidence-panel, .source-panel { margin-top: 20px; border: 1px solid var(--line); border-radius: 9px; background: #fafcf8; overflow: hidden; }
.evidence-panel summary, .source-panel summary { padding: 12px 14px; font-size: 11px; color: #5e775c; cursor: pointer; }
.evidence-panel[open] summary, .source-panel[open] summary { border-bottom: 1px solid var(--line); }
.evidence-body, .source-content { padding: 14px; font-size: 11px; line-height: 1.9; color: #7a8b77; }
.evidence-body h4 { margin: 12px 0 5px; color: #55714f; font-size: 11px; }
.evidence-body h4:first-child { margin-top: 0; }
.evidence-body p { margin: 0 0 8px; }
.evidence-body a, .source-content a { overflow-wrap: anywhere; }
.image-strip { display: flex; gap: 9px; align-items: flex-start; padding: 4px 2px 12px; overflow-x: auto; scrollbar-width: thin; }
.image-thumb { flex: 0 0 86px; position: relative; border: 1px solid #dce4d8; border-radius: 8px; background: #fff; overflow: hidden; padding: 0; }
.image-thumb.active, .image-thumb.selected, .image-thumb[aria-selected="true"] { border-color: #6ba27a; box-shadow: 0 0 0 1px #6ba27a; }
.image-thumb img { width: 100%; height: 97px; object-fit: cover; }
.image-thumb-label { font-size: 9px; padding: 5px; text-align: center; color: #7b8977; }
.image-thumb > span { display: block; font-size: 9px; padding: 5px; }
.image-thumb .thumb-number { position: absolute; top: 5px; left: 5px; background: rgb(255 255 255 / 90%); font-size: 8px; padding: 2px 4px; border-radius: 3px; }
.thumb-actions { display: flex; justify-content: center; gap: 0; background: #fff; border-top: 1px solid var(--line); padding: 3px 1px; }
.thumb-actions .icon-button { width: 25px; height: 25px; padding: 4px; }
.thumb-actions .icon-button svg { width: 13px; height: 13px; }
.add-image, .add-image-button { min-height: 100px; flex: 0 0 78px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; background: #f7faf4; color: #8b9c84; border: 1px dashed #bfd1bb; border-radius: 8px; font-size: 10px; padding: 10px; }
.add-image:hover, .add-image-button:hover { color: var(--green); background: #edf5e9; border-color: #83ad82; }
.image-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.image-empty, .image-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 150px; padding: 20px; border: 1px dashed #c5d7bd; border-radius: 9px; background: #f8fbf5; text-align: center; color: #819477; font-size: 11px; line-height: 1.8; gap: 10px; }
.phone-preview, .post-preview, .preview-card { max-width: 326px; margin: 0 auto; border: 1px solid #e1e7da; border-radius: 14px; background: #fff; overflow: hidden; box-shadow: 0 9px 25px rgb(42 68 34 / 5%); }
.preview-account { display: flex; align-items: center; gap: 8px; padding: 12px 13px; font-size: 10px; color: #566b50; border-bottom: 1px solid #eef2ea; }
.preview-account .avatar { width: 25px; height: 25px; font-size: 8px; }
.preview-account small { display: block; color: #9ca995; font-size: 8px; margin-top: 2px; }
.preview-media, .preview-image { position: relative; background: #e4ede0; }
.preview-media img, .preview-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.preview-media .cover-title, .preview-image .cover-title { bottom: 30px; font-size: 27px; }
.preview-caption, .preview-text { padding: 16px 15px 20px; font-size: 11px; line-height: 1.95; color: #65745e; overflow-wrap: anywhere; white-space: pre-wrap; }
.preview-caption h3, .preview-text h3 { font-size: 13px; color: var(--ink); margin: 0 0 9px; line-height: 1.65; }
.preview-caption p, .preview-text p { margin: 0 0 9px; }
.preview-hashtags { color: #7c9870; font-size: 10px; margin-top: 10px; }
.preview-disclaimer { max-width: 326px; margin: 13px auto 0; color: #9bab91; font-size: 9px; text-align: center; line-height: 1.7; }
.preview-pagination { position: absolute; bottom: 10px; right: 10px; background: rgb(30 50 29 / 50%); color: white; border-radius: 10px; font-size: 9px; padding: 3px 7px; }
.detail-footer, .editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 26px; border-top: 1px solid var(--line); background: #fff; flex-shrink: 0; }
.detail-footer small, .editor-footer small { color: var(--muted); font-size: 10px; line-height: 1.65; }
.detail-footer-actions { display: flex; gap: 8px; align-items: center; }

.modal-backdrop { z-index: 100; justify-content: center; align-items: center; padding: 28px; }
.modal { background: #fff; border: 1px solid #e0e7dc; border-radius: 16px; width: min(720px, 100%); max-height: calc(100dvh - 56px); overflow-y: auto; box-shadow: 0 25px 90px rgb(16 42 26 / 20%); animation: modal-in .15s ease; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; padding: 24px 26px 18px; border-bottom: 1px solid var(--line); }
.modal-header h2, .modal > h2 { font-size: 18px; font-weight: 620; margin: 0; letter-spacing: -.4px; }
.modal-header p { font-size: 11px; line-height: 1.7; color: var(--muted); margin: 7px 0 0; }
.modal-body { padding: 22px 26px; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 16px 26px; background: #fcfdfb; border-top: 1px solid var(--line); }
.gallery-grid, .image-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gallery-item { position: relative; border: 1px solid var(--line); border-radius: 10px; padding: 0; overflow: hidden; background: #fff; text-align: left; transition: .15s ease; }
.gallery-item:hover { border-color: #8db493; box-shadow: 0 3px 12px rgb(33 74 39 / 7%); }
.gallery-item.selected, .gallery-item.active, .gallery-item[aria-pressed="true"] { border-color: var(--green); box-shadow: 0 0 0 1px var(--green); }
.gallery-item img { width: 100%; aspect-ratio: 1.3; object-fit: cover; }
.gallery-item span, .gallery-item p { display: block; padding: 8px 9px; font-size: 10px; color: #7b8c73; margin: 0; }
.gallery-check { position: absolute; top: 8px; right: 8px; width: 21px; height: 21px; border-radius: 50%; background: var(--green); color: #fff; display: grid !important; place-items: center; padding: 0 !important; }
.upload-area { border: 1px dashed #c6d8bf; border-radius: 9px; padding: 20px; margin-top: 18px; text-align: center; color: #819675; font-size: 11px; background: #f8fbf5; }
.upload-area input { max-width: 100%; font-size: 10px; margin-top: 9px; }
.export-summary { border: 1px solid var(--line); border-radius: 9px; background: #f8faf6; padding: 15px; font-size: 11px; line-height: 1.9; color: #74826d; }
.export-item { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.export-item:last-child { border-bottom: none; }
.export-item img { width: 45px; height: 51px; border-radius: 5px; object-fit: cover; }
.export-item strong { font-size: 12px; color: var(--ink-soft); line-height: 1.7; }
.export-item small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
.toast { position: fixed; left: 50%; bottom: 108px; transform: translateX(-50%); z-index: 160; display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: min(90vw, 540px); padding: 13px 18px; border-radius: 10px; background: #213d30; color: #f3f9ef; box-shadow: 0 8px 28px rgb(20 48 29 / 18%); font-size: 12px; line-height: 1.6; animation: toast-in .18s ease; }
.toast button { border: none; background: transparent; padding: 0; color: #c0e6ae; font-size: 11px; font-weight: 600; white-space: nowrap; }
.toast.success { background: #28543c; }
.toast.error { background: #795446; }
.loading { opacity: .65; pointer-events: none; }
.spinner { display: inline-block; width: 13px; height: 13px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .65s linear infinite; }
.skeleton { background: linear-gradient(90deg, #eef2ea, #f7faf3, #eef2ea); background-size: 200% 100%; animation: shimmer 1.8s linear infinite; border-radius: 7px; }
.table-wrapper { overflow: auto; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { color: #809078; font-size: 10px; font-weight: 550; background: #f8faf5; text-align: left; }
td, th { padding: 14px 17px; border-bottom: 1px solid #eaf0e4; }
tbody tr:last-child td { border-bottom: none; }
td { color: #65765c; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.settings-card { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 23px; }
.settings-card h3 { font-size: 14px; margin: 0 0 18px; }

@keyframes drawer-in { from { transform: translateX(32px); opacity: .7; } to { transform: translateX(0); opacity: 1; } }
@keyframes modal-in { from { transform: translateY(9px); opacity: .5; } to { transform: translateY(0); opacity: 1; } }
@keyframes toast-in { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (min-width: 1600px) {
  .workspace { padding-left: 50px; padding-right: 50px; }
  .content-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .selection-bar { left: calc(var(--nav-width) + 38px); right: 38px; }
}
@media (max-width: 1180px) {
  :root { --nav-width: 190px; }
  .sidebar { padding-left: 13px; padding-right: 13px; }
  .workspace { padding-left: 25px; padding-right: 25px; }
  .content-grid { gap: 16px; }
  .card-body, .card-content { padding: 16px 15px 13px; }
  .card-footer, .card-actions { padding: 10px 15px; }
  .content-card h2, .content-card h3, .card-title { font-size: 14px; }
  .cover-title, .cover-headline { left: 16px; right: 16px; font-size: 20px; }
  .detail-drawer { width: calc(100vw - 35px); }
  .detail-header { padding-left: 23px; padding-right: 23px; }
  .editor-pane { padding-left: 23px; padding-right: 23px; }
  .preview-pane { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 980px) {
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-header { align-items: flex-start; }
  .page-header-actions { flex-direction: column; align-items: flex-end; gap: 8px; }
  .stats-row { gap: 17px; }
  .detail-body { grid-template-columns: minmax(0, 1.1fr) minmax(265px, .9fr); }
  .preview-pane { padding: 20px 13px; }
  .preview-media .cover-title, .preview-image .cover-title { font-size: 23px; }
  .selection-hint { display: none; }
  .gallery-grid { gap: 9px; }
}
@media (max-width: 720px) {
  :root { --nav-width: 66px; }
  .sidebar { padding: 23px 9px 14px; align-items: center; }
  .brand { padding: 0; gap: 0; }
  .brand-name, .brand strong, .brand-caption, .brand-subtitle, .nav-label, .nav-section-label, .nav-item > span, .nav-link > span, .nav-count, .sidebar-note, .workspace-note, .user-role, .user-profile > div:not(.avatar), .user-row > div:not(.avatar), .workspace-switch, .demo-note, .profile > span:not(.profile-avatar) { display: none; }
  .sidebar nav { width: 100%; margin-top: 33px; }
  .nav-item, .nav-link, .sidebar nav > button, .sidebar nav > a { justify-content: center; padding: 12px; width: 46px; font-size: 0; gap: 0; }
  .nav-item svg, .nav-link svg, .sidebar nav > button svg { width: 20px; height: 20px; }
  .sidebar-bottom, .sidebar-footer { padding-left: 0; padding-right: 0; }
  .user-profile, .user-row { border: none; padding-top: 0; }
  .workspace { padding: 0 18px 125px; }
  .topbar { min-height: 53px; font-size: 10px; }
  .topbar-actions { gap: 7px; }
  .topbar-actions .date-label { display: none; }
  .page-header { margin-top: 25px; gap: 14px; }
  h1 { font-size: 26px; }
  .page-subtitle, .page-description, .page-header p { font-size: 11px; }
  .generation-banner { padding: 12px; gap: 10px; }
  .generation-progress { font-size: 9px; }
  .stats-row, .summary-row { flex-wrap: wrap; gap: 12px 18px; }
  .stat-item strong { font-size: 18px; }
  .stat-divider { display: none; }
  .toolbar { gap: 12px; }
  .toolbar-right { width: 100%; }
  .search-field, .search-input { width: 100%; }
  .content-grid { gap: 13px; }
  .cover-title, .cover-headline { font-size: 17px; left: 13px; right: 13px; bottom: 16px; }
  .card-body, .card-content { padding: 13px 12px; }
  .card-footer, .card-actions { padding: 10px 12px; }
  .card-platforms { display: none; }
  .selection-bar { left: calc(var(--nav-width) + 12px); right: 12px; bottom: 12px; padding: 11px 12px; gap: 10px; min-height: 65px; }
  .selection-info, .selection-left, .selection-actions { gap: 8px; }
  .selected-thumbnails { display: none; }
  .selection-info small, .selection-left small { font-size: 9px; }
  .selection-bar .btn { padding: 9px 10px; }
  .selection-bar .btn-ghost { display: none; }
  .detail-drawer { width: 100vw; }
  .detail-header { padding: 17px 18px 0; }
  .detail-header h2 { font-size: 16px; }
  .detail-body { display: block; overflow-y: auto; }
  .editor-pane { overflow: visible; padding: 20px 18px; }
  .preview-pane { border-left: none; border-top: 1px solid var(--line); padding: 23px 20px; overflow: visible; }
  .detail-footer, .editor-footer { padding: 12px 16px max(12px, env(safe-area-inset-bottom)); gap: 8px; }
  .detail-footer small, .editor-footer small { max-width: 125px; font-size: 9px; }
  .detail-footer .btn, .editor-footer .btn { padding: 9px 10px; }
  .platform-tabs { margin-top: 15px; }
  .modal-backdrop { padding: 15px; }
  .modal { max-height: calc(100dvh - 30px); border-radius: 12px; }
  .modal-header { padding: 19px 19px 15px; }
  .modal-body { padding: 18px 19px; }
  .modal-footer { padding: 14px 19px; }
  .settings-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .workspace { padding-left: 13px; padding-right: 13px; }
  .content-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .page-header { flex-direction: column; gap: 14px; margin-bottom: 18px; }
  .page-header-actions { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  .generation-banner, .generation-summary { flex-direction: column; align-items: flex-start; }
  .cover-title, .cover-headline { font-size: 23px; left: 20px; bottom: 22px; }
  .card-body, .card-content { padding: 17px; }
  .card-footer, .card-actions { padding: 11px 17px; }
  .card-title, .content-card h2, .content-card h3 { font-size: 15px; }
  .card-excerpt, .card-summary { font-size: 12px; }
  .selection-bar { min-height: 68px; }
  .selection-count { width: 29px; height: 29px; }
  .selection-info strong, .selection-left strong { font-size: 11px; }
  .selection-info small, .selection-left small { display: none; }
  .detail-footer small, .editor-footer small { display: none; }
  .detail-footer, .editor-footer { justify-content: flex-end; }
  .gallery-grid, .image-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toast { font-size: 11px; padding: 11px 14px; bottom: 95px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Final integration for the actual demo markup. */
.icon { width: 18px; height: 18px; flex: 0 0 18px; }
body.drawer-open, body.modal-open { overflow: hidden; }
.page-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.demo-banner { display: flex; align-items: center; gap: 10px; padding: 14px 16px; margin: 0 0 24px; border: 1px solid #dce7df; background: #eef4ee; border-radius: 10px; font-size: 12px; line-height: 1.8; color: #637a6c; }
.demo-banner > span { flex: 1; }
.demo-banner strong { color: #355f48; font-weight: 600; }
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 0; padding: 5px 0; font-size: 12px; line-height: 1.5; color: var(--green); cursor: pointer; }
.text-button:hover { color: #163c2b; text-decoration: underline; text-underline-offset: 4px; }
.summary-strip { display: flex; align-items: center; gap: 24px; background: white; border: 1px solid var(--line); padding: 19px 22px; border-radius: 12px; margin-bottom: 30px; }
.summary-item { display: flex; align-items: center; gap: 12px; }
.summary-icon { display: grid; place-items: center; width: 38px; height: 38px; background: #f0f5ef; border-radius: 10px; color: #669075; }
.summary-item strong { display: block; font-size: 25px; font-weight: 650; letter-spacing: -.7px; }
.summary-item strong > span { font-size: 12px; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.summary-item small { display: block; margin-top: 4px; font-size: 11px; color: var(--muted); }
.summary-divider { width: 1px; height: 33px; background: var(--line); }
.batch-status { margin-left: auto; font-size: 12px; color: #547861; }
.batch-status .status-dot { margin-right: 6px; }
.batch-status small { display: block; color: var(--muted); font-size: 10px; margin-top: 7px; }
.section-description { display: inline-block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.count-label { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; padding: 2px 6px; background: #e9eee7; border-radius: 5px; margin-left: 8px; color: #6b7e69; font-size: 11px; font-weight: 500; }
.platform-filter { display: flex; align-items: center; gap: 10px; }
.platform-filter label { font-size: 12px; color: var(--muted); }
.search-field { display: flex; align-items: center; gap: 8px; width: 290px; }
.search-field input { width: 100%; padding: 0; border: 0; outline: none; background: transparent; font-size: 12px; color: var(--ink); }
.search-field:focus-within { border-color: #83a993; box-shadow: 0 0 0 3px #e4eee6; }
.card-header { position: absolute; top: 13px; left: 14px; right: 14px; z-index: 3; display: flex; align-items: center; justify-content: space-between; }
.cover-category { display: inline-block; background: #fffffff0; color: #365f48; padding: 5px 9px; border-radius: 5px; font-size: 11px; font-weight: 550; }
.card-select { position: relative; inset: auto; width: 28px; height: 28px; cursor: pointer; }
.card-select input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; z-index: 1; }
.card-select > span { display: grid; place-items: center; pointer-events: none; }
.card-select:focus-within { outline: 3px solid #8dbca5; outline-offset: 3px; }
.cover-title { display: flex; flex-direction: column; gap: 8px; width: calc(100% - 40px); border: 0; background: transparent; text-align: left; padding: 0; }
.cover-title strong { font-size: inherit; font-weight: 650; line-height: 1.45; }
.cover-overline { font-size: 10px; font-weight: 400; letter-spacing: 1.2px; opacity: .9; }
.cover-brand { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; margin-top: 2px; }
.cover-brand > span { font-size: 9px; font-weight: 400; opacity: .75; }
.cover-shade { background: linear-gradient(180deg, #092a2420, #092a2425 20%, #092a24be); }
.card-title { background: none; border: 0; padding: 0; text-align: left; font-size: 16px; line-height: 1.7; }
.card-title:hover { color: var(--green); }
.audience-tag { font-size: 11px; color: #758477; }
.content-status { margin-left: auto; font-size: 10px; color: #929b91; }
.content-status.confirmed { color: #34784e; }
.card-description { font-size: 12px; color: #7d8b80; line-height: 1.8; margin: 0 0 14px; }
.recommendation { display: flex; gap: 6px; font-size: 11px; min-height: 65px; line-height: 1.8; }
.recommendation .icon { width: 14px; height: 14px; flex-basis: 14px; margin-top: 3px; color: #8aa087; }
.card-footer { margin-top: 14px; padding: 13px 0 0; }
.source-label { display: inline-flex; gap: 5px; align-items: center; font-size: 10px; }
.source-label .icon { width: 12px; height: 12px; flex-basis: 12px; }
.card-footer .text-button { font-size: 11px; }
.no-cover { height: 100%; display: grid; place-items: center; color: #64786a; }
.empty-state { grid-column: 1 / -1; }
.selection-check { display: grid; place-items: center; background: var(--mint); width: 35px; height: 35px; border-radius: 10px; color: var(--green); }
.selection-info small { display: block; margin-top: 5px; }
.page-footer { display: flex; justify-content: space-between; gap: 14px; font-size: 10px; color: #9aa498; margin-top: 35px; }
.detail-drawer { position: fixed; z-index: 80; right: 0; top: 0; }
.detail-header { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 12px; }
.detail-drawer > .platform-tabs { padding: 0 28px; margin-top: 0; min-height: 55px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.tab-button { padding-bottom: 0; gap: 9px; font-size: 14px; }
.tab-button > span { font-size: 10px; font-weight: 400; color: #91a08e; }
.detail-meta { flex-wrap: wrap; }
.autosave-label { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; color: #7c9380; }
.autosave-label .icon { width: 13px; height: 13px; flex-basis: 13px; }
.field-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 12px; font-size: 12px; color: #58705c; }
.field-heading h3 { margin: 0; font-size: 14px; font-weight: 600; }
.field-heading label { font-weight: 600; }
.field-heading > span { color: var(--muted); font-size: 11px; }
.form-field > label { font-size: 13px; }
.form-field input, .form-field textarea { font-size: 14px; line-height: 1.8; }
.form-field input { min-height: 44px; }
.form-field textarea { min-height: 240px; resize: vertical; }
.quick-actions { margin: -9px 0 20px; }
.small-button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; background: #fff; color: #5a765d; }
.small-button:hover:not(:disabled) { background: #f0f5ee; border-color: #abc4ae; }
.small-button .icon { width: 14px; height: 14px; flex-basis: 14px; }
.image-editor { padding-top: 15px; border-top: 1px solid var(--line); margin-top: 22px; }
.image-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; margin-bottom: 9px; }
.image-actions [data-action="delete-image"] { color: var(--danger); }
.field-hint { display: block; font-size: 11px; }
.evidence-details { margin-top: 25px; border: 1px solid var(--line); border-radius: 10px; background: #fcfdfb; }
.evidence-details summary { display: flex; align-items: center; gap: 7px; padding: 14px 13px; cursor: pointer; font-size: 12px; color: #557359; list-style: none; }
.evidence-details summary > span { margin-left: auto; color: #8d9b88; font-size: 10px; }
.evidence-details[open] summary > .icon:last-child { transform: rotate(90deg); }
.evidence-content { padding: 0 15px 15px; font-size: 12px; line-height: 1.9; color: #6c7d6a; }
.evidence-content h4 { font-size: 12px; margin-bottom: 5px; color: #45684d; }
.evidence-warning { border-radius: 8px; padding: 11px 13px; background: #faf3e6; color: #947540; font-size: 12px; line-height: 1.8; margin: 8px 0 15px; }
.preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 20px; color: #788970; }
.preview-menu { margin-left: auto; color: #9aa593; }
.preview-art { position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: #dee9df; }
.preview-art > img { width: 100%; height: 100%; object-fit: cover; }
.preview-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #0818161f 0%, #0818162e 35%, #081816e0); }
.preview-label { position: absolute; top: 7%; left: 7%; color: #fff; font-size: 10px; letter-spacing: 1px; }
.preview-art > strong { position: absolute; left: 7%; right: 7%; bottom: 18%; color: #fff; font-size: 23px; line-height: 1.6; letter-spacing: -.4px; overflow-wrap: anywhere; }
.preview-brand { position: absolute; left: 7%; right: 7%; bottom: 5%; color: white; font-size: 14px; font-weight: 600; }
.preview-brand small { display: block; margin-top: 5px; opacity: .7; font-size: 9px; font-weight: 400; }
.preview-no-image { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #71856f; font-size: 12px; }
.preview-caption { font-size: 12px; }
.preview-caption h3 { font-size: 14px; }
#preview-tags { color: #6c9664; }
.preview-footnote { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 10px; margin: 13px 0 17px; color: #8c9b85; }
.preview-footnote .icon { width: 12px; height: 12px; flex-basis: 12px; }
.preview-copy { display: flex; margin: 0 auto; }
.confirmation-status { font-size: 11px; color: #81917b; display: inline-flex; gap: 5px; align-items: center; }
.modal { position: fixed; z-index: 110; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100vw - 40px)); animation: none; }
.modal-header { position: sticky; top: 0; background: #fff; z-index: 1; }
.modal-body { font-size: 13px; color: #667a67; line-height: 1.9; }
.modal-body p { margin: 0 0 15px; }
.modal-description { font-size: 13px; }
.gallery-item > strong { display: block; font-size: 12px; padding: 11px 10px 0; }
.gallery-item > img { width: 100%; height: 130px; object-fit: cover; }
.gallery-item span { font-size: 10px; line-height: 1.6; }
.selected-list, .source-demo-list, .version-list { display: grid; gap: 9px; }
.selected-list-item, .version-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: 100%; text-align: left; background: #f8faf6; border: 1px solid var(--line); border-radius: 8px; padding: 13px; font-size: 13px; }
.selected-list-item:hover, .version-row:hover { border-color: #9ebca2; }
.selected-list-item small, .version-row small { display: block; font-size: 10px; color: #87967e; }
.version-row strong { font-size: 12px; }
.version-row small { margin-top: 5px; }
.record-copy { white-space: pre-wrap; }
.history-list, .usage-list { display: grid; gap: 12px; }
.history-row { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.history-row > div { flex: 1; min-width: 0; }
.history-row strong { font-size: 14px; }
.history-row p { color: var(--muted); font-size: 12px; margin-bottom: 0; }
.history-icon { width: 36px; height: 36px; display: grid; place-items: center; background: var(--mint-light); color: var(--green); border-radius: 10px; }
.usage-list { margin-top: 25px; }
.settings-panel { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 25px; margin-bottom: 20px; max-width: 760px; }
.settings-panel h2 { font-size: 17px; margin: 0 0 23px; }
.settings-panel p, .settings-panel small { font-size: 12px; line-height: 1.8; color: var(--muted); }
.settings-panel small { display: block; margin-top: 7px; }
.platform-chips { display: flex; gap: 8px; margin: 20px 0; }
.danger-button { color: var(--danger); }
.btn-primary.danger-button { background: var(--danger); border-color: var(--danger); color: white; }
.page-actions .btn, .selection-actions .btn, .detail-footer .btn { font-size: 12px; }
@media (max-width: 1100px) {
  .summary-strip { gap: 16px; padding: 17px; }
  .batch-status { display: none; }
  .page-header { align-items: flex-start; }
  .page-actions { flex-direction: column; align-items: stretch; }
}
@media (max-width: 760px) {
  .demo-banner { align-items: flex-start; flex-wrap: wrap; }
  .demo-banner .text-button { margin-left: 27px; }
  .summary-strip { flex-wrap: wrap; gap: 15px; }
  .summary-divider { display: none; }
  .summary-item { gap: 6px; }
  .summary-icon { width: 29px; height: 29px; }
  .summary-item strong { font-size: 20px; }
  .summary-item small { font-size: 10px; }
  .summary-item strong > span { font-size: 10px; }
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-drawer { width: 100vw; }
  .detail-drawer > .platform-tabs { padding-left: 18px; padding-right: 18px; gap: 15px; }
  .detail-body { display: block; overflow-y: auto; }
  .editor-pane, .preview-pane { overflow: visible; }
  .detail-footer { flex-wrap: wrap; }
  .detail-footer-actions { margin-left: auto; }
  .detail-footer .btn { font-size: 11px; }
  .selection-info > .text-button { display: none; }
  .selection-bar .selection-actions > .btn-secondary { display: none; }
  .page-footer { flex-direction: column; }
  .history-row { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .content-grid { grid-template-columns: 1fr; }
  .page-actions { flex-direction: row; flex-wrap: wrap; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .toolbar .filter-group { width: 100%; }
  .filter-group select { flex: 1; }
  .selection-bar { left: calc(var(--nav-width) + 8px); right: 8px; }
  .selection-info { gap: 6px; }
  .selection-check { width: 27px; height: 27px; }
  .confirmation-status { font-size: 10px; }
  .modal { width: calc(100vw - 22px); }
  .tab-button { font-size: 12px; gap: 5px; }
  .tab-button > span { font-size: 9px; }
}

/* Content categories, generation calendar, and final image proofing. */
.content-type-tabs {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 49px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: thin;
}
.content-type-tabs > .tab-button {
  min-height: 49px;
  padding: 0 3px 11px;
  font-size: 13px;
  flex-shrink: 0;
}
.content-type-tabs > .tab-button.active { border-bottom-color: var(--green); }
.content-type-tabs .count-label { margin-left: 4px; font-size: 10px; min-width: 19px; }
.badge-hot { color: #977140; background: #fbf0dd; }
.badge-professional { color: #5b7985; background: #edf3f4; }
.date-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  margin: -4px 0 21px;
  background: #fbfcf9;
  border: 1px solid var(--line);
  border-radius: 10px;
  flex-wrap: wrap;
}
.date-mode-tabs { display: flex; gap: 3px; align-items: center; flex-shrink: 0; }
.date-mode-tabs .small-button {
  border-color: transparent;
  background: transparent;
  min-height: 32px;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 450;
  color: #85917d;
}
.date-mode-tabs .small-button:hover { background: #eff4e9; }
.date-mode-tabs .small-button.active,
.date-mode-tabs [aria-pressed="true"],
.date-mode-tabs [aria-selected="true"] {
  background: #e7efe2;
  color: var(--green-dark);
  font-weight: 600;
}
.date-navigation { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.date-navigation .icon-button {
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
  width: 29px;
  height: 30px;
  border: 1px solid #e1e8da;
  background: #fff;
  padding: 0 0 3px;
}
.date-navigation input[type="date"] {
  width: 137px;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid #dfe6d8;
  border-radius: 6px;
  color: #5e7556;
  background: #fff;
  font-size: 11px;
  line-height: 1.5;
}
.date-navigation input[type="date"]::-webkit-calendar-picker-indicator { opacity: .45; cursor: pointer; }
.date-navigation input:disabled { color: #a5afa0; background: #f2f5ee; opacity: .65; }
.date-navigation > span { font-size: 11px; line-height: 1.6; color: #6b7e60; margin-left: 4px; white-space: nowrap; }
.date-toolbar > small { font-size: 9px; color: #9aa78e; margin-left: auto; }
.image-title-field { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e9eee4; }
.image-title-field input { font-size: 12px; }

.modal:has(.page-preview-grid),
.modal:has(.export-summary) {
  width: min(1080px, calc(100vw - 54px));
  max-height: calc(100dvh - 44px);
  background: #f8faf6;
}
.modal:has(.page-preview-grid) .modal-header,
.modal:has(.export-summary) .modal-header { background: #fff; }
.modal:has(.page-preview-grid) .modal-footer,
.modal:has(.export-summary) .modal-footer { position: sticky; bottom: 0; z-index: 2; background: #fff; }
.export-summary {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 16px 18px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.8;
  color: #7b8a70;
}
.export-summary > div { min-width: 0; }
.export-summary strong { color: var(--ink); font-size: 14px; font-weight: 630; }
.export-summary small { display: block; color: #92a086; font-size: 10px; line-height: 1.6; }
.export-summary p { margin: 0; }
.export-summary .summary-count { color: var(--green-dark); font-size: 24px; font-weight: 650; letter-spacing: -.6px; }
.export-summary .badge { margin-left: auto; }
.export-preset {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 9px 12px;
  color: #6b8061;
  background: #eef4e9;
  border: 1px solid #dfe9d7;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.7;
}
.export-preset strong { font-size: 12px; color: #42683d; }
.export-preset select { background: #fff; border-color: #d5e2cb; min-height: 32px; font-size: 11px; }
.export-preset input[type="radio"], .export-preset input[type="checkbox"] { accent-color: var(--green); width: 15px; height: 15px; }
.export-preset label { display: inline-flex; align-items: center; gap: 5px; }
.export-preview-heading,
.page-preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 23px 0 13px; }
.export-preview-heading h3,
.page-preview-heading h3 { font-size: 14px; color: #4b6744; margin: 0; font-weight: 600; }
.export-preview-heading small,
.page-preview-heading small { font-size: 10px; color: #99a58f; }
.page-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
  margin: 18px 0 6px;
}
.rendered-page {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 9px;
  background: #fff;
  border: 1px solid #dfe7d9;
  border-radius: 10px;
  box-shadow: 0 3px 12px rgb(32 63 32 / 3%);
  overflow: hidden;
}
button.rendered-page { cursor: zoom-in; text-align: left; }
.rendered-page img,
.rendered-page canvas { display: block; max-width: 100%; width: 100%; height: auto; background: #eef3e9; border-radius: 5px; }
.rendered-page > a { display: block; cursor: zoom-in; }
.rendered-page > button {
  display: block;
  width: 100%;
  border: none;
  border-radius: 5px;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
}
.rendered-page > figcaption,
.rendered-page .page-caption,
.rendered-page > .page-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 11px 3px 3px;
  color: #738769;
  font-size: 11px;
  line-height: 1.6;
}
.rendered-page > figcaption strong,
.rendered-page .page-caption strong { font-size: 11px; font-weight: 550; }
.rendered-page > figcaption small,
.rendered-page .page-caption small { font-size: 10px; color: #9aaa90; white-space: nowrap; }
.rendered-page .page-dimensions,
.rendered-page .page-size { font-size: 10px; color: #91a281; font-variant-numeric: tabular-nums; }
.rendered-page:hover { border-color: #b0c5a2; }
.rendered-page.is-expanded,
.rendered-page[data-expanded="true"] { grid-column: 1 / -1; width: min(100%, 860px); justify-self: center; }
.page-preview-grid.is-expanded { grid-template-columns: 1fr; }
.page-full-preview,
.full-image-preview { margin: 0 auto; max-width: 860px; }
.page-full-preview img,
.full-image-preview img { display: block; width: 100%; height: auto; border-radius: 6px; }
.modal:has(.page-full-preview),
.modal:has(.full-image-preview) { width: min(940px, calc(100vw - 36px)); }
.export-note { font-size: 11px; line-height: 1.8; color: #92a084; }
.preview-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 200px; color: #7c9270; font-size: 12px; }
.preview-loading .spinner { width: 16px; height: 16px; }

@media (max-width: 1180px) {
  .date-toolbar { gap: 10px 14px; }
  .date-toolbar > small { width: 100%; margin-left: 0; text-align: right; }
}
@media (max-width: 760px) {
  .content-type-tabs { gap: 20px; margin-bottom: 17px; }
  .content-type-tabs > .tab-button { font-size: 12px; }
  .date-toolbar { align-items: flex-start; padding: 11px; }
  .date-mode-tabs { width: 100%; }
  .date-navigation { width: 100%; gap: 5px; }
  .date-navigation > span { font-size: 10px; margin-left: 0; }
  .date-toolbar > small { font-size: 9px; text-align: left; }
  .modal:has(.page-preview-grid),
  .modal:has(.export-summary) { width: calc(100vw - 24px); max-height: calc(100dvh - 28px); }
  .export-summary { padding: 13px; gap: 11px 18px; }
  .page-preview-grid { gap: 12px; }
  .rendered-page { padding: 6px; border-radius: 8px; }
  .rendered-page > figcaption,
  .rendered-page .page-caption { flex-wrap: wrap; padding: 9px 2px 3px; font-size: 10px; }
  .rendered-page > figcaption small,
  .rendered-page .page-caption small { font-size: 9px; }
  .export-preset { width: 100%; }
}
@media (max-width: 480px) {
  .date-mode-tabs { gap: 1px; }
  .date-mode-tabs .small-button { padding: 6px 8px; }
  .date-navigation > span { width: 100%; margin-top: 4px; }
  .page-preview-grid { grid-template-columns: 1fr; gap: 18px; }
  .rendered-page { max-width: 420px; width: 100%; justify-self: center; }
  .export-summary { align-items: flex-start; }
}
/* V3: deep reading and connected professional series */
.depth-meta{font-size:11px;color:#73816c;letter-spacing:.2px;margin:10px 0 12px;padding:7px 9px;background:#f3f6ef;border-radius:6px;}
.card-footer{flex-wrap:wrap;gap:9px;}.card-footer .source-label{flex:1 0 100%;}
.series-panel{padding:27px 30px;background:#fff;border:1px solid #e1e7dc;border-radius:15px;margin:22px 0;}
.series-panel>h2{font-size:21px;margin:0 0 9px;color:#243e2f;}.series-panel>p{color:#798574;font-size:13px;line-height:1.8;margin:0 0 23px;}
.series-route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;}
.series-node{border:1px solid #dfe6da;border-radius:12px;padding:20px;background:#f9faf6;text-align:left;display:flex;flex-direction:column;gap:12px;transition:.16s;min-height:250px;}
.series-node:hover{border-color:#78946c;transform:translateY(-2px);box-shadow:0 6px 18px #23462f0a;}.series-step{font-size:28px;color:#a3b295;font-weight:600;}.series-node strong{font-size:15px;line-height:1.65;color:#243f30;}.series-node small{font-size:10px;color:#72846b;}.series-node>span:last-child{font-size:12px;line-height:1.8;color:#7c8975;}
.modal:has(.article-reader){width:min(1000px,calc(100vw - 48px));}.modal:has(.article-reader) .modal-body{padding:32px 54px;}.modal:has(.article-reader) .modal-header,.modal:has(.article-reader) .modal-footer{position:sticky;z-index:3;background:#fff;}.modal:has(.article-reader) .modal-header{top:0;}.modal:has(.article-reader) .modal-footer{bottom:0;}
.article-reader{max-width:820px;margin:auto;color:#334738;}.article-kicker{font-size:12px;letter-spacing:1px;color:#829374;margin-bottom:13px;}.article-reader h1{font-size:29px;line-height:1.55;color:#1d3a2b;letter-spacing:-.4px;margin:0 0 18px;}.article-deck{font-size:16px;line-height:1.9;color:#71816b;}.article-meta{font-size:11px;color:#8b9585;border-bottom:1px solid #e4e8e0;padding-bottom:24px;}.article-reading-body{padding-top:5px;}.article-reading-body h2,.article-reader section>h2{font-size:20px;line-height:1.65;color:#244530;margin:33px 0 17px;}.article-reading-body p{font-size:15px;line-height:2.05;white-space:pre-wrap;margin:18px 0;color:#41523f;overflow-wrap:anywhere;}
.figure-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;}.figure-grid figure{margin:0;}.figure-grid img{display:block;width:100%;height:auto;border-radius:9px;border:1px solid #e0e5da;}.figure-grid figcaption{font-size:11px;line-height:1.7;margin:9px 0 0;color:#7a8971;}
.related-reading{margin:35px 0;padding:24px;background:#f4f7ef;border:1px solid #e0e8d8;border-radius:12px;}.related-reading h3{font-size:19px;line-height:1.6;margin:0 0 8px;color:#2f4c30;}.related-reading>p{font-size:12px;color:#859277;}.related-grid{display:grid;gap:10px;}.related-grid button{display:flex;flex-direction:column;gap:7px;border:1px solid #dfe6d7;background:#fff;padding:16px;border-radius:9px;text-align:left;}.related-grid button:hover{border-color:#8b9e76;}.related-grid small{color:#9aa586;font-size:10px;}.related-grid strong{font-size:14px;color:#315035;line-height:1.7;}.related-grid span{color:#87937b;font-size:11px;line-height:1.8;}
@media(max-width:1000px){.series-route{grid-template-columns:repeat(2,minmax(0,1fr));}.modal:has(.article-reader) .modal-body{padding:24px 28px;}}
@media(max-width:600px){.series-route{grid-template-columns:1fr;}.series-panel{padding:20px;}.series-node{min-height:0;}.article-reader h1{font-size:23px;}.article-reading-body p{font-size:14px;}.figure-grid{grid-template-columns:1fr;}.modal:has(.article-reader) .modal-body{padding:20px;}}

/* Topic map: source article -> researched follow-up angles */
.topic-map-layout{display:grid;grid-template-columns:minmax(270px,330px) minmax(0,1fr);gap:22px;align-items:start;margin-top:22px}
.topic-map-roots,.topic-map-extensions{background:#fff;border:1px solid #e1e7dc;border-radius:16px;padding:25px}
.topic-map-roots .section-heading,.topic-map-extensions .section-heading{margin-bottom:18px}
.topic-root{display:block;width:100%;text-align:left;border:1px solid #e4e9df;border-radius:12px;background:#fbfcf8;padding:17px 18px;margin:0 0 10px;cursor:pointer;transition:.16s}
.topic-root:hover{border-color:#94ab88}.topic-root.active{background:#eef5e9;border-color:#73916b;box-shadow:inset 3px 0 #49765b}
.topic-root span{display:block;color:#6e8a69;font-size:11px;margin-bottom:8px}.topic-root strong{display:block;color:#233e2c;font-size:14px;line-height:1.55}.topic-root small{display:block;color:#7f8b7c;font-size:11px;line-height:1.6;margin-top:7px}
.topic-map-intro{color:#67756a;line-height:1.7;font-size:13px;margin:0 0 20px}.topic-angle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.topic-angle{border:1px solid #e3e9dd;background:#fbfcf8;border-radius:13px;padding:20px;display:flex;flex-direction:column;min-height:260px}.topic-angle-top{display:flex;justify-content:space-between;gap:10px;color:#63815f;font-size:11px}.topic-planned{color:#2e694e;font-weight:700}
.topic-angle h3{font-size:17px;line-height:1.5;color:#253f2d;margin:14px 0 10px}.topic-angle p{font-size:12px;line-height:1.75;color:#677668;margin:0 0 9px}.topic-angle small{font-size:11px;color:#8a9786;line-height:1.6}.topic-angle-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:20px}.topic-angle-actions .btn{font-size:11px;padding:9px 12px}
.topic-plan-summary{border-top:1px solid #e6ebe2;margin-top:22px;padding-top:16px;font-size:12px;color:#648066}.topic-detail{color:#314839}.topic-detail h2{font-size:22px;line-height:1.5}.topic-detail h3{font-size:15px;margin:23px 0 8px}.topic-detail p,.topic-detail li{line-height:1.8;font-size:13px}.topic-detail ol,.topic-detail ul{padding-left:25px}.topic-detail a{color:#276249;text-decoration:underline}.topic-map-caveat{background:#f4f7ed;padding:13px 16px;border-radius:8px;color:#637365}
@media(max-width:950px){.topic-map-layout{grid-template-columns:1fr}.topic-map-roots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.topic-map-roots .section-heading{grid-column:1/-1}.topic-root{margin:0}}
@media(max-width:650px){.topic-map-roots,.topic-map-extensions{padding:18px}.topic-map-roots,.topic-angle-grid{grid-template-columns:1fr}}
.custom-cover-preview{display:block;width:min(100%,420px);max-height:420px;object-fit:cover;border-radius:12px;border:1px solid #dfe7dc;margin:14px 0}
.customize-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:4px 0 20px}.customize-tab{text-align:left;border:1px solid #dfe8db;background:#fff;border-radius:14px;padding:18px 20px;cursor:pointer}.customize-tab.active{border-color:#61896a;background:#edf5ec;box-shadow:inset 0 3px #527b5e}.customize-tab strong{display:block;font-size:16px;color:#284831;margin-bottom:6px}.customize-tab span{display:block;color:#738575;font-size:12px;line-height:1.55}@media(max-width:650px){.customize-tabs{grid-template-columns:1fr}}

/* Content borrowing workspace */
.borrow-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;margin:22px 0 50px;align-items:start}.borrow-main{display:grid;gap:20px}.borrow-panel{background:#fff;border:1px solid #e6e8e3;border-radius:18px;padding:26px;box-shadow:0 12px 32px rgba(20,46,37,.045)}.borrow-panel h2,.borrow-panel h3{margin:0 0 16px;color:#173d32}.borrow-panel .section-heading{margin-bottom:14px}.borrow-panel .form-field{margin:15px 0}.borrow-panel textarea,.borrow-panel input{width:100%;box-sizing:border-box}.borrow-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px}.borrow-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:12px 0}.borrow-actions small,.borrow-panel small{color:#65746a;line-height:1.5}.borrow-status{padding:12px 16px;background:#f0f5f1;border-radius:10px;color:#2a5241;line-height:1.6;margin:14px 0 0}.borrow-side{display:grid;gap:20px}.borrow-side ol{padding-left:20px;color:#526458;line-height:1.85}.borrow-saved{display:block;width:100%;text-align:left;background:#f6f8f3;border:1px solid #e4ece2;border-radius:12px;padding:13px 15px;margin:10px 0;cursor:pointer;color:#173d32}.borrow-saved strong,.borrow-saved small{display:block}.borrow-saved small{margin-top:5px}.borrow-saved:hover{border-color:#7dab8d;background:#edf5ed}
@media(max-width:960px){.borrow-layout{grid-template-columns:1fr}.borrow-side{grid-template-columns:1fr 1fr}}@media(max-width:640px){.borrow-columns,.borrow-side{grid-template-columns:1fr}.borrow-panel{padding:18px}}