.wtm-dashboard {
  display: grid;
  gap: 24px;
  padding-block: 8px 28px;
}

.wtm-dashboard__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  color: white;
  border-radius: 20px;
  background:
    radial-gradient(circle at 86% 22%, rgb(255 255 255 / 18%) 0 4px, transparent 5px),
    radial-gradient(circle at 96% 120%, rgb(239 131 84 / 55%) 0 120px, transparent 121px),
    linear-gradient(135deg, #4141a8, #6d6ddc 60%, #9b73ce);
  box-shadow: 0 20px 50px rgb(65 65 168 / 20%);
}

.wtm-dashboard__hero h1 {
  max-width: 700px;
  margin: 5px 0 7px;
  color: white;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.wtm-dashboard__hero p { max-width: 680px; margin: 0; color: rgb(255 255 255 / 76%); font-size: 14px; }
.wtm-dashboard__hero .wtm-eyebrow { color: rgb(255 255 255 / 72%); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.wtm-dashboard__hero > a { flex: 0 0 auto; border-color: rgb(255 255 255 / 30%); background: white; color: #4141a8; }
.wtm-dashboard__hero > a:hover { background: #f5f3ff; }

.wtm-metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.wtm-metric-card { min-height: 138px; }
.wtm-metric-card__value { display: block; color: var(--color-font-important-light); font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.dark .wtm-metric-card__value { color: var(--color-font-important-dark); }
.wtm-metric-card__label { display: block; margin-top: 10px; color: var(--color-font-important-light); font-size: 13px; font-weight: 700; }
.dark .wtm-metric-card__label { color: var(--color-font-important-dark); }
.wtm-metric-card__detail { display: block; margin-top: 2px; color: var(--color-base-500); font-size: 11px; }

.wtm-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(270px, .75fr); gap: 20px; align-items: start; }
.wtm-dashboard-side { display: grid; gap: 20px; }
.wtm-post-list { margin: -6px 0; }
.wtm-post-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; color: inherit; border-bottom: 1px solid var(--color-base-200); transition: background .15s ease; }
.dark .wtm-post-row { border-color: var(--color-base-800); }
.wtm-post-row:last-child { border-bottom: 0; }
.wtm-post-row:hover { text-decoration: none; }
.wtm-post-row__main { min-width: 0; }
.wtm-post-row__main strong { display: block; overflow: hidden; color: var(--color-font-important-light); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dark .wtm-post-row__main strong { color: var(--color-font-important-dark); }
.wtm-post-row__main > span { display: block; margin-top: 3px; color: var(--color-base-500); font-size: 11px; }
.wtm-post-row__meta { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; color: var(--color-base-500); font-size: 11px; }
.wtm-post-row__meta .material-symbols-outlined { font-size: 18px; }
.wtm-state { padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.wtm-state--live { color: #176044; background: #e8f8f0; }
.wtm-state--draft { color: #59616d; background: #f0f1f2; }
.wtm-state--scheduled { color: #87520e; background: #fff2dc; }
.dark .wtm-state--live { color: #77d6ad; background: rgb(23 96 68 / 28%); }
.dark .wtm-state--draft { color: #c7ccd3; background: rgb(255 255 255 / 8%); }
.dark .wtm-state--scheduled { color: #f1c57c; background: rgb(135 82 14 / 30%); }
.wtm-card-footer { margin: 18px -24px -24px; padding: 12px 24px; border-top: 1px solid var(--color-base-200); }
.dark .wtm-card-footer { border-color: var(--color-base-800); }
.wtm-card-footer a { color: var(--color-primary-600); font-size: 12px; font-weight: 700; }

.wtm-quick-actions { display: grid; gap: 5px; }
.wtm-quick-actions a { display: flex; align-items: center; gap: 11px; padding: 9px; color: inherit; border-radius: 10px; }
.wtm-quick-actions a:hover { text-decoration: none; background: var(--color-base-50); }
.dark .wtm-quick-actions a:hover { background: var(--color-base-800); }
.wtm-quick-actions .material-symbols-outlined { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; color: var(--color-primary-600); font-size: 19px; border-radius: 10px; background: var(--color-primary-50); }
.dark .wtm-quick-actions .material-symbols-outlined { background: rgb(91 91 214 / 16%); }
.wtm-quick-actions strong { display: block; color: var(--color-font-important-light); font-size: 12px; }
.dark .wtm-quick-actions strong { color: var(--color-font-important-dark); }
.wtm-quick-actions small { display: block; margin-top: 1px; color: var(--color-base-500); font-size: 10px; }
.wtm-queue { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wtm-queue > div { padding: 13px; border-radius: 10px; background: var(--color-base-50); }
.dark .wtm-queue > div { background: var(--color-base-800); }
.wtm-queue span { display: block; color: var(--color-base-500); font-size: 10px; }
.wtm-queue strong { display: block; margin-top: 2px; color: var(--color-font-important-light); font-size: 20px; }
.dark .wtm-queue strong { color: var(--color-font-important-dark); }
.wtm-queue-note { margin: 14px 0 0; color: var(--color-base-500); font-size: 11px; line-height: 1.5; }
.wtm-dashboard-empty { display: grid; justify-items: center; padding: 44px 20px; text-align: center; }
.wtm-dashboard-empty .material-symbols-outlined { color: var(--color-primary-600); font-size: 34px; }
.wtm-dashboard-empty strong { margin-top: 9px; color: var(--color-font-important-light); }
.dark .wtm-dashboard-empty strong { color: var(--color-font-important-dark); }
.wtm-dashboard-empty p { margin: 4px 0 10px; color: var(--color-base-500); font-size: 12px; }
.wtm-dashboard-empty a { color: var(--color-primary-600); font-size: 12px; font-weight: 700; }

.model-post.change-form textarea#id_body { min-height: 430px; font-size: 15px; line-height: 1.7; }
.model-post.change-form input#id_title { font-size: 16px; font-weight: 650; }
.wtm-field-meter { width: min(100%, 896px); margin-top: 6px; color: var(--color-base-500); font-size: 10px; text-align: right; }
.wtm-field-meter.is-near-limit { color: #b76b08; font-weight: 700; }

@media (max-width: 1180px) {
  .wtm-metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .wtm-dashboard-grid { grid-template-columns: 1fr; }
  .wtm-dashboard-side { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .wtm-dashboard { gap: 16px; }
  .wtm-dashboard__hero { align-items: flex-start; flex-direction: column; padding: 22px; border-radius: 16px; }
  .wtm-dashboard__hero > a { width: 100%; }
  .wtm-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wtm-metric-card { min-height: 124px; }
  .wtm-dashboard-side { grid-template-columns: 1fr; }
  .wtm-post-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  .wtm-post-row__main { width: 100%; }
  .wtm-post-row__meta { width: 100%; flex-wrap: wrap; }
  .wtm-post-row__meta .material-symbols-outlined { margin-left: auto; }
  .model-post.change-form textarea#id_body { min-height: 320px; }
}