:root {
  --bg: #f5f7fb;
  --panel: #ffffff;
  --ink: #0f1b2a;
  --muted: #5f7086;
  --brand: #0f7bff;
  --brand-2: #15b6a6;
  --line: #d6dfeb;
  --radius: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Manrope, sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 10% 10%, #e7f2ff 0, #f5f7fb 38%),
              linear-gradient(180deg, #f5f7fb 0%, #ecf2f8 100%);
}
a { color: inherit; text-decoration: none; }
.tw-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
}
.tw-brand { font-family: Syne, sans-serif; font-size: 20px; font-weight: 700; }
.tw-nav { display: flex; gap: 16px; font-weight: 600; }
main { max-width: 1220px; margin: 0 auto; padding: 24px; }
.hero {
  border: 1px solid var(--line); border-radius: 20px; padding: 36px;
  background: linear-gradient(135deg,#ffffff 0%,#f0f8ff 55%,#ebfff9 100%);
}
.eyebrow { text-transform: uppercase; letter-spacing: 1px; color: var(--brand); font-weight: 700; }
h1,h2,h3 { font-family: Syne, sans-serif; margin-top: 0; }
.grid { margin-top: 24px; display:grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card-media { height: 170px; background: #f0f4fa; display: flex; align-items:center; justify-content:center; }
.card-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.placeholder { color: var(--muted); font-size: 14px; }
.card-body { padding: 14px; }
.price { color: var(--brand); font-weight: 800; }
.btn,.btn-outline {
  display:inline-block; border-radius:12px; padding:10px 16px; font-weight:700; border:1px solid var(--brand);
}
.btn { background: var(--brand); color: #fff; }
.btn-outline { color: var(--brand); background: #fff; }
.product-wrap { display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; }
.product-form label { display:block; margin-top:12px; margin-bottom:6px; font-weight:700; }
input,select,textarea,button { font: inherit; }
input,select,textarea {
  width:100%; border:1px solid var(--line); border-radius:10px; padding:10px; background:#fff;
}
.size-rows { border:1px solid var(--line); border-radius:10px; padding:8px; background:#fff; }
.size-row { display:flex; justify-content:space-between; align-items:center; padding:6px 4px; gap:8px; }
.size-row input { width:80px; }
.coord-grid { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.shirt-preview { background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; display:grid; gap:12px; }
.shirt-outline { border:1px dashed #9bb0c5; border-radius:12px; padding:16px; min-height:180px; position:relative; }
.logo-zone { border:1px solid #15b6a6; color:#15b6a6; border-radius:8px; padding:8px; margin-top:16px; }
.content.narrow { max-width: 840px; margin: 0 auto; }
.table { width:100%; border-collapse: collapse; background:#fff; border:1px solid var(--line); }
.table th,.table td { border-bottom:1px solid var(--line); padding:10px; text-align:left; }
.summary { margin-top:16px; }
.summary.boxed { border:1px solid var(--line); background:#fff; border-radius:10px; padding:12px; }
.actions { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }
.error { color:#d12b2b; font-weight:700; }
.tw-footer { margin-top:32px; padding:18px 24px; color:var(--muted); text-align:center; }
@media (max-width: 900px) {
  .product-wrap { grid-template-columns: 1fr; }
  main { padding: 16px; }
}