:root {
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-soft: #f0f5f5;
  --text: #172026;
  --muted: #6d7882;
  --border: #dce3e7;
  --line: #e9eef1;
  --nav: #10202b;
  --nav-2: #162b38;
  --teal: #14938b;
  --teal-2: #dff4f1;
  --red: #dc4f4f;
  --red-2: #ffe8e8;
  --amber: #d39219;
  --amber-2: #fff3d8;
  --green: #2b9f67;
  --green-2: #e2f5e9;
  --shadow: 0 12px 28px rgba(24, 39, 48, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 176px 1fr;
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100vh;
  padding: 16px 10px;
  color: #d9e6ec;
  background: linear-gradient(180deg, var(--nav), var(--nav-2));
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 10px 10px;
  color: #fff;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #111820;
  background: #fff;
  border-radius: 4px;
  font-weight: 800;
}

.nav-list {
  display: grid;
  gap: 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  color: #d9e6ec;
  background: transparent;
  border: 0;
  border-radius: 6px;
  text-align: left;
}

.nav-item.active,
.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.summary-box {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.summary-box div:not(.summary-title) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.summary-title {
  color: #fff;
  font-weight: 700;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot.pending {
  background: var(--red);
}

.dot.queued {
  background: #16a6a0;
}

.dot.approved {
  background: var(--green);
}

.dot.risk {
  background: #f2b12a;
}

.workspace {
  min-width: 0;
}

.topbar,
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topbar-spacer {
  flex: 1;
}

.operator {
  padding-left: 8px;
  color: var(--muted);
}

.account-select {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

select,
input,
textarea {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

select,
input {
  height: 36px;
  padding: 0 10px;
}

textarea {
  width: 100%;
  min-height: 172px;
  padding: 16px;
  resize: vertical;
  border: 0;
  outline: 0;
  line-height: 1.65;
}

.toolbar {
  gap: 10px;
  min-height: 66px;
}

.toolbar input[type="search"] {
  min-width: 220px;
}

.last-updated {
  margin-right: auto;
  color: var(--muted);
}

.columns {
  display: grid;
  grid-template-columns: minmax(310px, 0.9fr) minmax(420px, 1.1fr) minmax(360px, 1fr);
  height: calc(100vh - 124px);
  min-height: 660px;
}

.panel {
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

h1,
h2,
h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

h3 {
  font-size: 14px;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.tab {
  height: 32px;
  padding: 0 10px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 4px;
}

.tab.active {
  color: var(--teal);
  background: var(--teal-2);
  font-weight: 700;
}

.topic-list,
.review-list {
  height: calc(100% - 146px);
  overflow: auto;
}

.topic-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  width: 100%;
  padding: 14px 12px;
  color: inherit;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.topic-item.active {
  background: linear-gradient(90deg, rgba(20, 147, 139, 0.12), rgba(20, 147, 139, 0.03));
  box-shadow: inset 3px 0 0 var(--teal);
}

.topic-check {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.topic-main {
  min-width: 0;
}

.topic-meta,
.tag-row,
.review-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.topic-title {
  margin: 7px 0 4px;
  font-weight: 700;
  line-height: 1.35;
}

.topic-summary,
.review-text {
  color: #3d4952;
  line-height: 1.5;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  color: #4e5961;
  background: #eef2f4;
  font-size: 12px;
}

.pill.hot,
.pill.weibo {
  color: #c44141;
  background: var(--red-2);
}

.pill.douyin {
  color: #246fc2;
  background: #e7f0ff;
}

.pill.xiaohongshu {
  color: #a85c14;
  background: #fff0df;
}

.pill.manual {
  color: #246d65;
  background: var(--teal-2);
}

.pill.low {
  color: var(--green);
  background: var(--green-2);
}

.pill.medium {
  color: var(--amber);
  background: var(--amber-2);
}

.pill.high {
  color: var(--red);
  background: var(--red-2);
}

.topic-time {
  color: var(--muted);
  font-size: 12px;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  height: 44px;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.composer-panel {
  padding-bottom: 14px;
}

.topic-context,
.editor-shell,
.voice-box,
.risk-box,
.schedule-box {
  margin: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.topic-context {
  padding: 12px;
  color: var(--muted);
  background: var(--surface-soft);
}

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
}

.editor-toolbar span:last-child {
  margin-left: auto;
  color: var(--muted);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 12px 12px;
}

.risk-box,
.voice-box,
.schedule-box {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.voice-box textarea {
  min-height: 86px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fbfcfd;
}

.risk-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.risk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.risk-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.schedule-box label {
  display: grid;
  gap: 6px;
}

.radio-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.radio-row label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.radio-row input[type="datetime-local"] {
  flex: 1;
  min-width: 190px;
}

.review-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.review-tools select {
  max-width: 120px;
}

.review-tools label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
}

.review-card {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
}

.review-card-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.avatar {
  display: grid;
  flex: 0 0 34px;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #fff;
  background: #65717a;
  border-radius: 50%;
  font-weight: 700;
}

.review-body {
  min-width: 0;
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 10px;
}

.status-approved {
  color: var(--green);
}

.status-rejected {
  color: var(--red);
}

.status-queued {
  color: var(--teal);
}

.primary-button,
.secondary-button,
.icon-button,
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  border-radius: 6px;
  white-space: nowrap;
}

.primary-button {
  padding: 0 13px;
  color: #fff;
  background: var(--teal);
  border: 1px solid var(--teal);
  font-weight: 700;
}

.primary-button:hover {
  background: #117c75;
}

.secondary-button {
  padding: 0 12px;
  color: #27635e;
  background: #fff;
  border: 1px solid #bddad7;
}

.secondary-button:hover {
  background: var(--teal-2);
}

.secondary-button.danger {
  color: var(--red);
  border-color: #f1c4c4;
}

.secondary-button.danger:hover {
  background: var(--red-2);
}

.secondary-button.compact {
  height: 32px;
  padding: 0 10px;
}

.primary-button.full {
  width: 100%;
}

.icon-button {
  width: 34px;
  color: #35424b;
  background: transparent;
  border: 0;
}

.icon-button:hover {
  background: #eef3f5;
}

.link-button {
  height: 28px;
  padding: 0;
  color: var(--teal);
  background: transparent;
  border: 0;
}

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.icon.home { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 10.5 12 3l9 7.5V21h-6v-6H9v6H3z'/%3E%3C/svg%3E"); }
.icon.rss { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 5v3a11 11 0 0 1 11 11h3A14 14 0 0 0 5 5Zm0 6v3a5 5 0 0 1 5 5h3a8 8 0 0 0-8-8Zm0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E"); }
.icon.wand { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m19.5 2 1 2.7L23 6l-2.5 1.3-1 2.7-1-2.7L16 6l2.5-1.3zM4 20.5 15.5 9l-2.5-2.5L1.5 18 4 20.5Zm11-16 1 2 2 1-2 1-1 2-1-2-2-1 2-1z'/%3E%3C/svg%3E"); }
.icon.check { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.2 16.6 4.9 12.3l-1.8 1.8 6.1 6.1L21.4 8l-1.8-1.8z'/%3E%3C/svg%3E"); }
.icon.send { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 21 23 12 2 3v7l15 2-15 2z'/%3E%3C/svg%3E"); }
.icon.book { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 4h11a3 3 0 0 1 3 3v14H7a3 3 0 0 1-3-3V5a1 1 0 0 1 1-1Zm2 13h10V7a1 1 0 0 0-1-1H7v11Z'/%3E%3C/svg%3E"); }
.icon.menu { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E"); }
.icon.bell { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22Zm7-6V11a7 7 0 0 0-14 0v5l-2 2v1h18v-1z'/%3E%3C/svg%3E"); }
.icon.gear { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m19.4 13.5.1-1.5-.1-1.5 2-1.5-2-3.5-2.4 1a7 7 0 0 0-2.6-1.5L14 2h-4l-.4 3A7 7 0 0 0 7 6.5l-2.4-1-2 3.5 2 1.5L4.5 12l.1 1.5-2 1.5 2 3.5 2.4-1a7 7 0 0 0 2.6 1.5l.4 3h4l.4-3a7 7 0 0 0 2.6-1.5l2.4 1 2-3.5-2-1.5ZM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z'/%3E%3C/svg%3E"); }
.icon.refresh { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.7 6.3A8 8 0 1 0 20 12h-3a5 5 0 1 1-1.5-3.5L13 11h8V3z'/%3E%3C/svg%3E"); }
.icon.download { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 3h2v10l3-3 1.4 1.4L12 16.8l-5.4-5.4L8 10l3 3zM5 19h14v2H5z'/%3E%3C/svg%3E"); }
.icon.plus { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E"); }
.icon.hash { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 3h2L9 8h5l1-5h2l-1 5h4v2h-4.4l-.8 4H19v2h-4.6l-1 5h-2l1-5h-5l-1 5h-2l1-5H2v-2h3.8l.8-4H3V8h4z'/%3E%3C/svg%3E"); }
.icon.smile { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20ZM8 9a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm8 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-8 6a5 5 0 0 0 8 0z'/%3E%3C/svg%3E"); }
.icon.spark { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 2 2.2 6.1L20 10l-5.8 1.9L12 18l-2.2-6.1L4 10l5.8-1.9zM19 15l1 2.5 2 1-2 1-1 2.5-1-2.5-2-1 2-1z'/%3E%3C/svg%3E"); }
.icon.scissors { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 9a3 3 0 1 1 1.8-5.4L13 8l6-5h3L10.8 12 22 21h-3l-6-5-3.2 4.4A3 3 0 1 1 8 15a3 3 0 0 1 2.3 1.1L11 15l-1.8-1.5A3 3 0 0 1 8 14a3 3 0 0 1 0-5Z'/%3E%3C/svg%3E"); }
.icon.shuffle { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3h5v5h-2V6.4l-4.7 4.7-1.4-1.4L18.6 5H17zM3 7h3.6l10.7 10.6H20V16h2v5h-5v-2h1.6L5.8 9H3zm0 10h3.6l2.5-2.5 1.4 1.4L7.4 19H3z'/%3E%3C/svg%3E"); }
.icon.chevron-left { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15.4 5.4 1.2 1.2L11.2 12l5.4 5.4-1.2 1.2L8.8 12z'/%3E%3C/svg%3E"); }
.icon.chevron-right { mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m8.6 18.6-1.2-1.2 5.4-5.4-5.4-5.4 1.2-1.2 6.6 6.6z'/%3E%3C/svg%3E"); }

#topicDialog {
  width: min(520px, calc(100vw - 28px));
  border: 0;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

#topicDialog::backdrop {
  background: rgba(20, 32, 38, 0.38);
}

.dialog-form {
  display: grid;
  gap: 14px;
}

.dialog-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  min-width: 220px;
  max-width: 360px;
  padding: 12px 14px;
  color: #fff;
  background: #172026;
  border-radius: 6px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 68px 1fr;
  }

  .brand span,
  .nav-item {
    font-size: 0;
  }

  .nav-item {
    justify-content: center;
  }

  .summary-box {
    display: none;
  }

  .columns {
    grid-template-columns: 1fr;
    height: auto;
  }

  .panel {
    min-height: 520px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    min-height: auto;
    flex-direction: row;
    overflow-x: auto;
  }

  .brand,
  .summary-box {
    display: none;
  }

  .nav-list {
    display: flex;
  }

  .toolbar {
    flex-wrap: wrap;
    padding: 10px;
  }

  .last-updated {
    width: 100%;
    margin-right: 0;
  }

  .toolbar input,
  .toolbar select,
  .toolbar button {
    flex: 1 1 150px;
  }

  .topbar {
    padding: 0 10px;
  }
}