:root{
  --blue:#3b82f6;
  --indigo:#6574cd;
  --purple:#9561e2;
  --pink:#f66d9b;
  --red:#dc2626;
  --orange:#f6993f;
  --yellow:#ffed4a;
  --green:#22c55e;
  --teal:#4dc0b5;
  --cyan:#6cb2eb;
  --white:#fff;
  --gray:#475569;
  --gray-dark:#1e293b;
  --primary:#3b82f6;
  --secondary:#64748b;
  --success:#22c55e;
  --info:#6cb2eb;
  --warning:#ffed4a;
  --danger:#dc2626;
  --light:#f1f5f9;
  --dark:#1e293b;

  --page:#f1f5f9;
  --panel:#ffffff;
  --line:#e2e8f0;
  --text:#1e293b;
  --muted:#64748b;
  --shadow:0 10px 35px rgba(15,23,42,.08);

  --font-family-sans-serif:"Figtree", sans-serif;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  font-family:var(--font-family-sans-serif), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--page);
  color:var(--text);
}
body{overflow-x:hidden}

.topbar{
  min-height:70px;
  padding:12px 22px;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:sticky;
  top:0;
  z-index:20;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:#111827;color:#fff;font-weight:900;
}
.brand-text strong,.brand-text span{display:block}
.brand-text strong{font-size:14px}
.brand-text span{font-size:11px;color:var(--muted);margin-top:2px}
.top-actions{display:flex;gap:10px}
.top-btn{
  border:1px solid var(--line);background:#fff;color:#344054;border-radius:999px;
  padding:10px 14px;cursor:pointer;font:inherit;font-size:12px;
}
.primary-top{
  background:var(--primary);color:#fff;border-color:var(--primary);font-weight:700;
}

.workspace{
  min-height:calc(100vh - 70px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 540px;
}
.viewer-panel{
  min-width:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.97), rgba(255,255,255,0) 42%),
    linear-gradient(180deg,#f2f2f2 0%,#e9e9e9 100%);
  display:flex;
  flex-direction:column;
}
.viewer-wrap{
  position:relative;
  flex:1;
  min-height:720px;
}
.viewer-wrap canvas{
  width:100%;
  height:100%;
  display:block;
}
.loading{
  position:absolute;inset:0;display:grid;place-items:center;z-index:2;
  color:var(--muted);font-size:13px;
}
.viewer-footer{
  padding:12px 18px 16px;
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  color:var(--muted);font-size:11px;
}

.editor-panel{
  background:#fff;
  border-left:1px solid var(--line);
  padding:20px 22px 30px;
  overflow:auto;
  max-height:calc(100vh - 70px);
}
.editor-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:12px;
}
.eyebrow{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.editor-head h1{margin:0;font-size:18px}
.size-chip{
  white-space:nowrap;border:1px solid var(--line);padding:7px 10px;border-radius:999px;
  font-size:11px;background:#fafafa;
}
.editor-tabs{
  display:flex;padding:4px;border-radius:999px;background:#f3f4f6;margin-bottom:14px;
}
.tab{
  flex:1;border:0;background:transparent;padding:8px 10px;border-radius:999px;
  font:inherit;font-size:12px;cursor:pointer;
}
.tab.active{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.canvas-label-row{
  display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px;font-size:11px;
}
.canvas-label-row span{color:var(--muted)}

.design-stage{
  width:100%;
  border:1px solid #cfd4dc;
  background:#f8f9fb;
  padding:12px;
}
.canvas-shell{
  width:100%;
  aspect-ratio:906 / 462;
  position:relative;
  border:1px solid #dadde3;
  background:#fff;
  overflow:hidden;
}
.canvas-shell .canvas-container{
  width:100% !important;
  height:100% !important;
}
.canvas-shell canvas{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
}
.toolbar{
  display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 0 10px;
}
.toolbar button{
  width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:#fff;
  cursor:pointer;font-size:18px;
}
.toolbar button:hover{background:#f5f7fa}
.toolbar .danger{color:var(--danger)}
.toolbar-sep{width:1px;height:25px;background:var(--line);margin:0 3px}

.upload-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 14px;
  cursor:pointer;font-weight:700;font-size:13px;
}
.upload-btn input{display:none}

.info-box{
  margin-top:12px;
  padding:12px 14px;
  border:1px dashed #c9d2df;
  background:#fafbfd;
  border-radius:14px;
}
.info-box strong{display:block;font-size:12px;margin-bottom:4px}
.info-box span{display:block;font-size:12px;color:var(--muted);line-height:1.45}

.editor-section{
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line);
}
.editor-section h2{margin:0 0 12px;font-size:13px}
.fields-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.fields-grid label span{
  display:block;color:var(--muted);font-size:10px;margin-bottom:5px;
}
.fields-grid input{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 10px;
  font:inherit;font-size:12px;
}
.field-action{
  align-self:end;min-height:38px;border:1px solid var(--line);background:#f8f9fb;border-radius:10px;
  cursor:pointer;font:inherit;font-size:12px;
}
.color-row{
  display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px;
}
.color-row input{
  width:54px;height:34px;padding:0;border:0;background:transparent;
}
.preset-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;
}
.preset{
  position:relative;border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:10px 10px 10px 34px;text-align:left;cursor:pointer;font:inherit;font-size:11px;
}
.preset:before{
  content:"";position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--sw);border:1px solid rgba(0,0,0,.08);
}

@media (max-width:1050px){
  .workspace{grid-template-columns:1fr}
  .viewer-wrap{min-height:540px}
  .editor-panel{
    border-left:0;border-top:1px solid var(--line);max-height:none;
  }
}
@media (max-width:620px){
  .topbar{padding:10px 12px}
  .brand-text span{display:none}
  .top-actions .top-btn:first-child{display:none}
  .viewer-wrap{min-height:430px}
  .editor-panel{padding:16px 12px 24px}
  .fields-grid{grid-template-columns:1fr}
}