:root {
  --bg: #0d1016;
  --panel: #161b24;
  --panel-2: #1e2530;
  --line: #303947;
  --text: #eef2f6;
  --muted: #8e9aaa;
  --accent: #ff493f;
  --accent-2: #ff765e;
  --gold: #f4b942;
  --green: #74d68c;
  --danger: #ff6b6b;
  --shadow: rgba(0,0,0,.38);
  --checker-a: #202733;
  --checker-b: #29313e;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -10%, rgba(255,73,63,.12), transparent 33rem),
    radial-gradient(circle at 110% 10%, rgba(244,185,66,.07), transparent 32rem),
    var(--bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .42; }

.app-shell { width: min(1480px, calc(100% - 32px)); margin: 0 auto; padding: 36px 0 28px; }
.hero { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 22px; }
.eyebrow { color: var(--accent-2); font-size: 12px; letter-spacing: .18em; font-weight: 800; }
h1 { margin: 6px 0 8px; font-size: clamp(38px, 6vw, 68px); line-height: .95; letter-spacing: -.06em; }
h1 span { color: var(--accent); }
.hero p { max-width: 780px; margin: 0; color: var(--muted); line-height: 1.55; }
.status-chip { white-space: nowrap; border: 1px solid var(--line); background: rgba(22,27,36,.82); padding: 9px 12px; border-radius: 999px; color: #bfc8d4; font-size: 12px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; background: var(--green); box-shadow:0 0 0 3px rgba(116,214,140,.12); margin-right:7px; }

.panel { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(30,37,48,.95), rgba(20,25,33,.97)); box-shadow: 0 18px 40px var(--shadow); border-radius: 14px; }
.upload-panel { min-height: 116px; padding: 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-style:dashed; transition:.15s ease; margin-bottom:20px; }
.upload-panel.dragover { border-color: var(--accent); background: rgba(255,73,63,.07); transform: translateY(-1px); }
.upload-panel p { margin:8px 0 2px; color: var(--muted); font-size:12px; }
.upload-panel small { color:#687586; }
.upload-button, .primary, .export, .ghost-button { border:0; border-radius:8px; padding:11px 14px; font-weight:800; color:white; }
.upload-button, .primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow:0 7px 18px rgba(255,73,63,.2); }
.upload-button:hover:not(:disabled), .primary:hover:not(:disabled) { filter:brightness(1.08); }
.export { width:100%; background:linear-gradient(180deg,#e6a936,#bb7622); color:#18120a; box-shadow:0 7px 18px rgba(244,185,66,.15); }
.ghost-button { padding:8px 10px; background:#252e3a; color:#c8d0db; border:1px solid #3b4655; font-size:12px; }

.workspace-grid { display:grid; grid-template-columns: 330px minmax(0,1fr); gap:20px; align-items:start; }
.controls { padding:20px; position:sticky; top:12px; }
h2 { margin:0; font-size:17px; letter-spacing:-.02em; }
.controls h2 { margin-bottom:14px; color:#f6f7fa; }
.section-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.section-title-row h2 { margin-bottom:0; }
.section-title-row .ghost-button { padding:6px 8px; font-size:10px; }
.controls hr { border:0; border-top:1px solid var(--line); margin:22px 0; }
.field { display:flex; flex-direction:column; gap:7px; margin:12px 0; color:#b9c3cf; font-size:12px; }
.field > span { display:flex; justify-content:space-between; gap:8px; }
.field em { color:#6f7d8f; font-style:normal; font-size:10px; }
.field b { color:var(--gold); }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
input[type="text"], input[type="number"], select, textarea { width:100%; border:1px solid #374252; background:#11161e; color:var(--text); border-radius:7px; padding:9px 10px; outline:none; }
input:focus, select:focus, textarea:focus { border-color:#67768b; box-shadow:0 0 0 2px rgba(103,118,139,.12); }
textarea { resize:vertical; min-height:76px; line-height:1.4; }
input[type="range"] { width:100%; accent-color:var(--accent); }
.color-row { display:grid; grid-template-columns:46px 1fr; gap:8px; }
input[type="color"] { width:46px; height:38px; border:1px solid #374252; border-radius:7px; background:#11161e; padding:3px; }
.primary { width:100%; margin-top:7px; }
.hint { color:#748193; font-size:10px; line-height:1.45; margin:7px 0 12px; }
code { color:#d5b36b; }

.stage-column { display:grid; gap:20px; min-width:0; }
.stage-panel, .results-panel { padding:18px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.step-label { display:block; color:#667487; font-size:10px; letter-spacing:.14em; margin-bottom:4px; }
.canvas-wrap { min-height:340px; border:1px solid #303947; border-radius:10px; overflow:auto; display:flex; align-items:center; justify-content:center; background-color:#202733; }
.checker { background-image: linear-gradient(45deg,var(--checker-b) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-b) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-b) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-b) 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
#sourceCanvas { image-rendering:pixelated; max-width:100%; max-height:620px; object-fit:contain; }
.summary-badge { background:#11161e; border:1px solid #303947; color:#9ca8b7; padding:7px 10px; border-radius:999px; font-size:11px; }
.empty-state { min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#697587; gap:7px; text-align:center; }
.empty-state strong { color:#9aa7b7; }
.empty-state span { font-size:11px; }
.pixel-icon { font-size:34px; color:#596779; }
.sprite-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.sprite-card { overflow:hidden; border:1px solid #303947; border-radius:10px; background:#11161e; }
.sprite-preview { height:170px; display:flex; align-items:center; justify-content:center; border-bottom:1px solid #303947; }
.sprite-preview canvas { image-rendering:pixelated; max-width:150px; max-height:150px; }
.sprite-card-body { padding:10px; }
.asset-name { font-size:11px; }
.metrics { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; color:#8290a1; font-size:9px; }
.metric { border:1px solid #2e3744; background:#171d26; padding:4px 6px; border-radius:999px; }
.validation { margin-top:8px; font-size:10px; font-weight:800; }
.validation.pass { color:var(--green); }
.validation.fail { color:var(--danger); }

.floor-pack-panel { padding:18px; margin-bottom:20px; }
.floor-pack-actions { display:grid; grid-template-columns:auto auto 1fr; gap:10px; align-items:center; }
.floor-pack-actions .primary { width:auto; margin-top:0; }
.floor-pack-actions small { color:#748193; justify-self:end; }
.floor-pack-results { display:grid; grid-template-columns:220px minmax(0,1fr); gap:14px; margin-top:14px; align-items:start; }
.floor-seam-wrap { min-height:194px; width:194px; }
#floorSeamCanvas { width:192px; height:192px; image-rendering:pixelated; }
.floor-report { margin:18px 0 0; min-height:194px; max-height:280px; overflow:auto; border:1px solid #303947; border-radius:10px; background:#11161e; padding:12px; color:#b9c3cf; font-size:10px; line-height:1.5; white-space:pre-wrap; }
.floor-report.pass { border-color:rgba(116,214,140,.45); color:#a8e8b8; }
.floor-report.fail { border-color:rgba(255,107,107,.45); color:#ffaaaa; }

footer { display:flex; justify-content:space-between; gap:20px; color:#5f6b7a; font-size:10px; padding:18px 4px 0; }

@media (max-width: 900px) {
  .hero { align-items:flex-start; flex-direction:column; }
  .workspace-grid { grid-template-columns:1fr; }
  .controls { position:static; }
  .canvas-wrap { min-height:260px; }
  .floor-pack-actions { grid-template-columns:1fr; }
  .floor-pack-actions small { justify-self:start; }
  .floor-pack-results { grid-template-columns:1fr; }
}

@media (max-width: 520px) {
  .app-shell { width:min(100% - 18px,1480px); padding-top:20px; }
  .field-row { grid-template-columns:1fr; gap:0; }
  .sprite-grid { grid-template-columns:1fr 1fr; }
  .sprite-preview { height:130px; }
}