:root {
  --pico-primary: #6b6aaf;
  --pico-primary-hover: #56559a;
  --pico-primary-background: #6b6aaf;
  --pico-primary-hover-background: #56559a;
  --pico-font-size: 95%;
  --navy: #141346;
}
.brand { color: var(--navy); letter-spacing: -0.02em; }
.brand span { color: #6b6aaf; }
.muted { color: var(--pico-muted-color); }
.thumb { width: 180px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.15); display: block; }
.preview { width: 100%; max-width: 531px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.18); background: #ddd; aspect-ratio: 1062 / 612; }
.grid-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 900px) { .grid-form { grid-template-columns: 1fr; } }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 1rem; font-size: .8rem; font-weight: 600; }
.badge.Pending { background: #fff3cd; color: #7a5b00; }
.badge.Ordered { background: #d1f0dc; color: #17603a; }
.badge.Shipped { background: #d6e4ff; color: #1d3f8a; }
.badge.Cancelled { background: #eee; color: #666; }
.shipto { white-space: pre-line; font-size: .85rem; }
.row-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.row-actions button, .row-actions a[role=button] { padding: .25rem .6rem; font-size: .8rem; margin: 0; }
.table-wrap { overflow-x: auto; }
td { vertical-align: top; }
.timeline article { margin-bottom: 1rem; }
.timeline .head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.error { color: #b3261e; }
.inline { display: flex; gap: .5rem; align-items: center; }
.inline input { margin: 0; }