:root {
  --bg: #060606;
  --panel: rgba(14,14,14,.88);
  --panel-2: rgba(20,20,20,.9);
  --gold: #c8a14e;
  --gold-2: #efd8a0;
  --line: rgba(200,161,78,.18);
  --text: #f5f2ea;
  --muted: #a99c83;
  --good: #35d7a3;
  --warn: #ffb649;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background:
    radial-gradient(circle at top right, rgba(200,161,78,.10), transparent 25%),
    linear-gradient(180deg, #080808 0%, #030303 100%);
  color: var(--text);
}
.topbar {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 22px 18px;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
.brand-wrap { display:flex; gap:16px; align-items:center; }
.brand-mark { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 0 24px rgba(200,161,78,.25); }
.eyebrow { color: var(--gold); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; }
h1 { margin: 6px 0 4px; font-size: 34px; font-weight: 300; }
.sub { margin: 0; color: var(--muted); }
.status-group { display:flex; gap:10px; flex-wrap: wrap; }
.pill {
  display:inline-flex; align-items:center; gap:8px; min-height: 40px;
  padding: 0 14px; border:1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,.02); color: var(--muted);
}
.shell { max-width: 1440px; margin: 0 auto; padding: 0 22px 32px; }
.card {
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(11,11,11,.96), rgba(8,8,8,.96));
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.hero {
  padding: 24px;
  display:flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
}
.card-title { font-size: 22px; color: var(--gold-2); margin-bottom: 10px; }
.hero p { max-width: 840px; margin: 0; color: #ddd1ba; line-height: 1.7; }
.hero-grid { display:grid; grid-template-columns: repeat(2, minmax(140px,1fr)); gap:12px; min-width: 360px; }
.hero-grid div, .embed-grid div { border:1px solid var(--line); border-radius: 18px; padding: 14px; background: rgba(255,255,255,.02); }
.hero-grid span, .embed-grid span { display:block; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.layout { display:grid; grid-template-columns: 1.06fr .94fr; gap: 18px; margin-top: 18px; }
.stack { display:grid; gap:18px; }
.panel-left { padding: 20px; }
.panel-head { display:flex; justify-content: space-between; align-items:center; margin-bottom: 14px; }
.field { display:block; margin-bottom: 14px; }
.field span { display:block; margin-bottom: 8px; color: var(--gold-2); font-size: 14px; }
textarea, select, input[type="file"] {
  width: 100%; border-radius: 16px; border:1px solid var(--line); background: var(--panel-2);
  color: var(--text); padding: 14px 16px; font: inherit;
}
textarea { min-height: 148px; resize: vertical; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap:14px; }
.thumbs { min-height: 132px; border:1px dashed var(--line); border-radius: 18px; padding: 12px; display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
.thumbs.empty, .output.empty, .variant-grid.empty { display:flex; align-items:center; justify-content:center; color: var(--muted); }
.thumb { position:relative; border-radius: 14px; overflow: hidden; border:1px solid var(--line); }
.thumb img { width:100%; height:112px; object-fit:cover; display:block; }
.thumb span { position:absolute; left:8px; bottom:8px; background: rgba(0,0,0,.58); padding:4px 8px; border-radius: 999px; font-size: 12px; color:#fff; }
.preset-row, .action-row { display:flex; flex-wrap:wrap; gap:10px; margin: 14px 0; }
.chip, .btn {
  border-radius: 999px; border:1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text);
  padding: 11px 16px; cursor:pointer; font: inherit;
}
.btn-primary { background: linear-gradient(135deg, #143b5d, #206f9f); }
.btn-accent { background: linear-gradient(135deg, #8b641b, #c8a14e); color:#111; font-weight: 600; }
.btn-ghost { background: transparent; color: var(--muted); }
.tip-box, .output { border:1px solid var(--line); border-radius: 18px; padding: 16px; background: rgba(255,255,255,.02); color:#e8dcc6; line-height: 1.7; }
.tip-box code { color: var(--gold-2); }
.stack > .card { padding: 18px; }
.variant-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; min-height: 160px; }
.variant-card { border:1px solid var(--line); border-radius: 18px; overflow:hidden; background: rgba(255,255,255,.02); }
.variant-card img { width:100%; height:200px; object-fit:cover; display:block; }
.variant-card .meta { padding: 10px 12px; color: var(--muted); font-size: 13px; }
.download-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:10px; margin-top:12px; }
.download-link { display:block; border:1px solid var(--line); border-radius: 16px; padding: 14px; color: var(--gold-2); text-decoration:none; background: rgba(255,255,255,.02); }
.footer-card { margin-top: 18px; padding: 18px; }
.embed-grid { display:grid; grid-template-columns: repeat(5,1fr); gap:12px; margin-top:12px; }
.success { color: var(--good); }
.warn { color: var(--warn); }
@media (max-width: 1100px) {
  .layout { grid-template-columns: 1fr; }
  .hero { flex-direction: column; align-items: flex-start; }
  .hero-grid, .embed-grid { grid-template-columns: repeat(2,1fr); min-width: 0; width:100%; }
}
@media (max-width: 720px) {
  .topbar { flex-direction: column; align-items:flex-start; }
  .grid-2, .variant-grid, .download-grid, .embed-grid, .hero-grid { grid-template-columns: 1fr; }
  .thumbs { grid-template-columns: repeat(2,1fr); }
  h1 { font-size: 28px; }
}