:root{
  --bg:#071523;
  --panel:#0b1f33;
  --panel2:#0a2238;
  --border:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.65);
  --btn:#17344e;
  --btn2:#1d4160;
  --accent:#3b82f6;
  --accent2:#2563eb;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 20% 0%, #0d2a45 0%, var(--bg) 50%, #04101b 100%);
  color:var(--text);
}

/* ── Topbar ──────────────────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 20px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,0));
}
.brand-title{ font-weight:700; font-size:16px; }
.brand-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.status{ display:flex; align-items:center; gap:10px; }
.badge{
  display:inline-flex; align-items:center; padding:6px 10px;
  border-radius:999px; border:1px solid var(--border);
  background:rgba(0,0,0,.18); color:var(--muted); font-size:12px;
}

/* ── Layout: left panel + right preview ─────────────────────────── */
.wrap{
  display:grid;
  width:100%;
  padding:14px;
  gap:14px;
  /* Left: fixed 420px for controls + analysis. Right: everything else */
  grid-template-columns: 420px 1fr;
  grid-template-rows: auto;
  align-items:start;
}

/* Upload card left, preview card takes all right space */
#uploadCard   { grid-column:1; grid-row:1; }
#previewCard  { grid-column:2; grid-row:1; }

@media (max-width:1000px){
  .wrap{ grid-template-columns:1fr; }
  #uploadCard, #analysisCard, #previewCard { grid-column:1; grid-row:auto; }
  #previewCard{ display:block; }
}

/* ── Cards ───────────────────────────────────────────────────────── */
.card{
  border:1px solid var(--border); border-radius:16px; padding:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  min-width:0;
}
.card-title{ font-weight:700; font-size:15px; margin:2px 0 12px; }

/* ── Preview grid: tile + pattern side by side ───────────────────── */
.preview-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  min-width:0;
}
@media (max-width:700px){
  .preview-grid{ grid-template-columns:1fr; }
}

.preview-card{
  border:1px solid var(--border); border-radius:14px; padding:14px;
  background:rgba(0,0,0,.14); min-width:0;
}
.preview-title{
  font-weight:700; font-size:13px; color:var(--muted); margin-bottom:10px;
}

/* ── Canvas shells ───────────────────────────────────────────────── */
.canvas-shell{
  position:relative; width:100%; height:280px;
  border-radius:14px; border:1px solid var(--border);
  background:rgba(0,0,0,.18); overflow:hidden;
}
#sourceShell{ height:220px; }
#tileShell, #patternShell{ height:480px; }

canvas{ width:100%; height:100%; display:block; }

.empty{
  position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center;
  color:rgba(255,255,255,.45); font-size:13px; pointer-events:none;
  background:radial-gradient(700px 400px at 50% 40%,rgba(255,255,255,.04),rgba(255,255,255,0));
}

/* ── Rows ────────────────────────────────────────────────────────── */
.row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0; }
.row-tight{ margin:7px 0; gap:7px; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn{
  appearance:none; border:1px solid var(--border); border-radius:10px;
  padding:9px 14px; background:linear-gradient(180deg,var(--btn2),var(--btn));
  color:var(--text); cursor:pointer; font-weight:600; font-size:13px;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-small{ padding:7px 11px; font-size:12px; border-radius:9px; }
.btn-primary{
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  border-color:rgba(255,255,255,.18);
}
.btn-ghost{ background:rgba(0,0,0,.18); }

/* ── File input ──────────────────────────────────────────────────── */
.file{
  display:flex; align-items:center; gap:10px;
  border:1px dashed rgba(255,255,255,.18); border-radius:12px;
  padding:8px 12px; background:rgba(0,0,0,.10);
}
.file input{ display:none; }

/* ── Form fields ─────────────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:4px; min-width:170px; }
.field-inline{ flex-direction:row; align-items:center; gap:8px; min-width:auto; }
.field-label{ font-size:12px; color:var(--muted); }
.select, input[type="range"], input[type="color"]{
  border:1px solid var(--border); border-radius:10px;
  background:rgba(0,0,0,.18); color:var(--text); padding:8px 10px;
}
input[type="range"]{ padding:0; height:28px; }

.tip{ font-size:12px; color:var(--muted); margin:10px 0; line-height:1.4; }
.muted{ color:var(--muted); }
.small{ font-size:12px; }
.footer{ padding:10px 20px 16px; color:var(--muted); }