/* ================================================================
   AWDesigner Pro v7.2 — PrintOracle-inspired sidebar tab design
   Dark tab rail · White panel · Clean buttons · Proper contrast
   ================================================================ */

/* ── Design tokens ─────────────────────────────────────────────── */
.awd-studio {
  /* Dark chrome */
  --chrome:   #111318;
  --rail:     #1A1D24;   /* tab rail bg */
  --rail-h:   #23272F;   /* tab hover */
  --rail-a:   #2D3140;   /* tab active */
  /* Panels */
  --panel:    #FFFFFF;
  --panel-bg: #F7F8FA;   /* subtle panel bg */
  --bord:     #E4E7EC;   /* light border */
  --bord-d:   #2C3040;   /* dark border */
  /* Text */
  --txt:      #111827;
  --txt-s:    #6B7280;
  /* Accent */
  --gold:     #C8960C;   /* brand accent — label/decoration ONLY */
  --navy:     #0B1728;
  --green:    #16A34A;
  /* Interaction */
  --t: .13s ease;
  --r: 6px;
  --sh: 0 8px 32px rgba(0,0,0,.35);

  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 12px;
  color: var(--txt);
  background: var(--chrome);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sh);
  margin: 20px auto;
  max-width: 1540px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 40px);
  min-height: 660px;
}

/* ── TOP BAR ───────────────────────────────────────────────────── */
.awd-topbar {
  height: 50px;
  background: var(--rail);
  border-bottom: 1px solid var(--bord-d);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  gap: 10px;
  flex-shrink: 0;
}
.awd-topbar-left  { display:flex; align-items:center; gap:10px; }
.awd-topbar-logo  { font-family:Georgia,serif; font-size:13px; font-weight:700; color:var(--gold); white-space:nowrap; }
.awd-topbar-logo em { font-style:normal; font-weight:400; font-size:10px; color:rgba(255,255,255,.35); text-transform:uppercase; letter-spacing:.06em; margin-left:5px; }
.awd-topbar-product { padding:4px 10px; background:rgba(255,255,255,.06); border:1px solid var(--bord-d); border-radius:5px; font-size:11px; color:rgba(255,255,255,.45); max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.awd-topbar-center { display:flex; align-items:center; justify-content:center; gap:6px; flex:1; }
.awd-topbar-right  { display:flex; align-items:center; gap:5px; }
.awd-autosave-status { font-size:10px; color:rgba(255,255,255,.25); margin-right:4px; }

/* Zoom pill */
.awd-zoom-pill { display:flex; align-items:center; background:rgba(255,255,255,.07); border:1px solid var(--bord-d); border-radius:var(--r); overflow:hidden; }
.awd-zoom-pill button { width:26px; height:26px; background:none; border:none; color:rgba(255,255,255,.55); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.awd-zoom-pill button:hover { background:rgba(255,255,255,.1); color:#fff; }
.awd-zoom-pill span { font-size:11px; color:rgba(255,255,255,.5); padding:0 7px; min-width:40px; text-align:center; }

/* Top bar action buttons */
.awd-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
  line-height: 1;
}
.awd-btn:hover { background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.2); }
.awd-btn:disabled { opacity:.32; cursor:not-allowed; pointer-events:none; }
/* ONE primary CTA — green */
.awd-btn.primary { background:#16A34A; color:#fff; border-color:#15803D; font-weight:700; }
.awd-btn.primary:hover { background:#15803D; }
.awd-btn-divider { width:1px; height:18px; background:rgba(255,255,255,.1); margin:0 3px; }

/* ── MAIN LAYOUT ───────────────────────────────────────────────── */
.awd-layout {
  display: grid;
  grid-template-columns: 360px 1fr 268px;  /* sidebar | canvas | right */
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── UNIFIED SIDEBAR ───────────────────────────────────────────── */
.awd-sidebar {
  display: flex;
  flex-direction: row;   /* tab-rail left, panel-content right */
  border-right: 1px solid var(--bord-d);
  overflow: hidden;
}

/* ── TAB RAIL (PrintOracle left column) ────────────────────────── */
.awd-tab-rail {
  width: 72px;
  flex-shrink: 0;
  background: var(--rail);
  border-right: 1px solid var(--bord-d);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 1px;
  overflow-y: auto;
  scrollbar-width: none;
}
.awd-tab-rail::-webkit-scrollbar { display: none; }

/* Tab rail buttons — PrintOracle style */
.awd-icon-btn {
  width: 64px;
  min-height: 54px;
  background: none;
  border: none;
  border-radius: 8px;
  color: rgba(255,255,255,.48);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  transition: all var(--t);
  position: relative;
  padding: 6px 2px;
  font-family: inherit;
}
.awd-icon-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 1.8px;
}
.awd-icon-lbl {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(255,255,255,.42);
  line-height: 1;
  text-align: center;
}
/* Hover */
.awd-icon-btn:hover { background: var(--rail-h); color: rgba(255,255,255,.85); }
.awd-icon-btn:hover .awd-icon-lbl { color: rgba(255,255,255,.65); }
/* Active / selected tab */
.awd-icon-btn.active { background: var(--rail-a); color: #fff; }
.awd-icon-btn.active .awd-icon-lbl { color: rgba(255,255,255,.8); font-weight: 700; }
.awd-icon-btn.active::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--gold);
  border-radius: 0 3px 3px 0;
}
/* Danger tabs */
.awd-icon-btn.danger { color: rgba(255,100,100,.5); }
.awd-icon-btn.danger:hover { background: rgba(220,38,38,.15); color: #FCA5A5; }
.awd-icon-btn.danger .awd-icon-lbl { color: rgba(255,100,100,.45); }
.awd-icon-btn.danger:hover .awd-icon-lbl { color: #FCA5A5; }

.awd-toolbar-sep { width:40px; height:1px; background:var(--bord-d); margin:5px 0; flex-shrink:0; }

/* ── PANEL CONTENT (right of tab rail) ─────────────────────────── */
.awd-panel-content {
  flex: 1;
  background: var(--panel);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #CBD5E1 transparent;
  min-width: 0;
}
.awd-panel-content::-webkit-scrollbar { width: 3px; }
.awd-panel-content::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:3px; }

/* Legacy .awd-tabs — hidden */
.awd-tabs { display:none; }
/* Legacy .awd-icon-toolbar standalone — hidden if used outside sidebar */
.awd-icon-toolbar:not(.awd-tab-rail) { display:none; }

/* Panel show/hide */
.awd-panel { display:none; flex:1; flex-direction:column; }
.awd-panel.active { display:flex; }

/* Panel header */
.awd-panel-header {
  padding: 13px 16px 10px;
  border-bottom: 1px solid var(--bord);
  flex-shrink: 0;
  background: var(--panel);
}
.awd-panel-header h3 {
  font-size: 11px;
  font-weight: 700;
  color: var(--txt);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.awd-panel-header h3::before {
  content: '';
  width: 3px;
  height: 13px;
  background: var(--gold);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Panel body */
.awd-panel-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  overflow-y: auto;
  background: var(--panel);
}

/* ── FORM CONTROLS ─────────────────────────────────────────────── */
.awd-panel label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--txt-s);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0 0 4px;
}
.awd-panel input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),
.awd-panel select,
.awd-panel textarea {
  width: 100%;
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 7px 9px;
  font-size: 12px;
  font-family: inherit;
  color: var(--txt);
  background: #FAFAFA;
  outline: none;
  transition: border-color var(--t);
  margin: 0;
  box-sizing: border-box;
}
.awd-panel input:focus, .awd-panel select:focus, .awd-panel textarea:focus {
  border-color: #94A3B8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(148,163,184,.12);
}
.awd-panel textarea { resize:vertical; min-height:55px; }
.awd-panel input[type=range] { width:100%; accent-color:var(--navy); margin:3px 0; cursor:pointer; }
.awd-panel input[type=color] { width:100%; height:32px; border:1px solid var(--bord); border-radius:var(--r); padding:2px; cursor:pointer; background:#fff; }
.awd-field { display:flex; flex-direction:column; gap:4px; }
.awd-range-row { display:flex; align-items:center; gap:5px; }
.awd-range-row input[type=range] { flex:1; }
.awd-range-val { font-size:10px; color:var(--txt-s); min-width:30px; text-align:right; font-weight:700; }
.awd-color-row { display:flex; gap:5px; align-items:center; }
.awd-color-row input[type=color] { width:32px; height:30px; flex-shrink:0; }
.awd-color-row input[type=text]  { flex:1; font-family:monospace; font-size:11px; }
.awd-section-title {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #9CA3AF;
  padding: 8px 0 3px;
  border-top: 1px solid var(--bord);
  margin-top: 3px;
}

/* ── ADD-ELEMENT BUTTONS ───────────────────────────────────────── */
.awd-add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.awd-add-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 64px;
  border: 1.5px solid var(--bord);
  border-radius: 8px;
  background: #fff;
  color: var(--txt);
  cursor: pointer;
  transition: all var(--t);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
}
.awd-add-btn .awd-add-icon { font-size: 20px; line-height: 1; }
.awd-add-btn:hover { background: var(--panel-bg); border-color: #94A3B8; color: var(--navy); }

/* ── PANEL TOOL BUTTONS ────────────────────────────────────────── */
.awd-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--bord);
  background: #fff;
  color: var(--txt);
  border-radius: var(--r);
  font-size: 11px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--t);
  white-space: nowrap;
}
.awd-tool:hover { background:var(--panel-bg); border-color:#94A3B8; color:var(--navy); }
.awd-tool.active, .awd-tool[aria-pressed=true] { background:var(--navy); border-color:var(--navy); color:#fff; }
.awd-tool:disabled { opacity:.35; cursor:not-allowed; pointer-events:none; }

/* Mini grids */
.awd-mini-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.awd-mini-grid .awd-tool { height:28px; font-size:10px; padding:0 4px; }
.awd-mini-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:5px; }

/* ── DROPZONE ──────────────────────────────────────────────────── */
.awd-dropzone {
  border: 1.5px dashed #D1D5DB;
  border-radius: 8px;
  padding: 16px 12px;
  text-align: center;
  color: var(--txt-s);
  background: var(--panel-bg);
  cursor: pointer;
  transition: all var(--t);
  font-size: 11px;
  line-height: 1.65;
}
.awd-dropzone:hover, .awd-dropzone.drag { border-color:#94A3B8; background:#EFF2F7; color:var(--navy); }
.awd-dropzone-icon { font-size:22px; display:block; margin-bottom:4px; opacity:.55; }

/* ── COLOUR PALETTE ────────────────────────────────────────────── */
.awd-palette { display:flex; flex-wrap:wrap; gap:6px; }
.awd-palette button { width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.12); cursor:pointer; transition:transform var(--t), box-shadow var(--t); }
.awd-palette button:hover { transform:scale(1.18); box-shadow:0 0 0 2px var(--navy); }

/* ── CLIPART ───────────────────────────────────────────────────── */
.awd-clipart-browser { display:flex; flex-direction:column; gap:8px; }
.awd-clipart-toolbar { display:flex; flex-direction:column; gap:6px; }
.awd-clipart-status  { font-size:10px; color:var(--txt-s); }
.awd-cliparts, .awd-cliparts-browser {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 5px;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.awd-clipart-item, .awd-cliparts button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid var(--bord);
  border-radius: 6px;
  background: #fff;
  padding: 7px 3px;
  cursor: pointer;
  transition: all var(--t);
  aspect-ratio: 1;
}
.awd-clipart-item img, .awd-cliparts img { width:28px; height:28px; object-fit:contain; }
.awd-clipart-item span { font-size:9px; color:var(--txt-s); text-align:center; font-weight:500; }
.awd-clipart-item:hover, .awd-cliparts button:hover { border-color:#94A3B8; background:var(--panel-bg); }
.awd-clipart-heading { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--txt-s); padding:5px 7px; background:var(--panel-bg); border-radius:5px; margin-bottom:5px; }

/* ── LAYERS ────────────────────────────────────────────────────── */
.awd-aligns, .awd-layer-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.awd-aligns button, .awd-layer-actions button { height:28px; border:1px solid var(--bord); border-radius:5px; background:#fff; font-size:10px; font-weight:500; cursor:pointer; font-family:inherit; color:var(--txt); transition:all var(--t); }
.awd-aligns button:hover, .awd-layer-actions button:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
#awd-layers { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:3px; }
.awd-layer-row { display:flex; align-items:center; gap:5px; padding:7px 8px; border:1px solid var(--bord); border-radius:6px; cursor:pointer; background:#fff; font-size:11px; transition:all var(--t); }
.awd-layer-row:hover { border-color:#94A3B8; background:var(--panel-bg); }
.awd-layer-row.selected { border-color:var(--navy); background:#F0F4FF; }
.awd-layer-row .awd-layer-icon { font-size:13px; flex-shrink:0; }
.awd-layer-row .awd-layer-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.awd-layer-row button { font-size:10px; padding:1px 5px; border:1px solid var(--bord); border-radius:4px; background:none; color:var(--txt-s); cursor:pointer; font-family:inherit; transition:all var(--t); }
.awd-layer-row button:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.awd-layer-row.is-hidden { opacity:.38; }

/* ── CANVAS ────────────────────────────────────────────────────── */
.awd-canvas-wrap { background:var(--chrome); overflow:hidden; display:flex; flex-direction:column; }
.awd-sides {
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  padding: 7px 14px;
  background: var(--rail);
  border-bottom: 1px solid var(--bord-d);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.awd-sides button {
  height: 26px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.55) !important;
  border-radius: 13px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--t);
  font-family: inherit;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: none !important;
}
.awd-sides button:hover { background:rgba(255,255,255,.12)!important; color:rgba(255,255,255,.9)!important; }
.awd-sides button.active { background:rgba(255,255,255,.18)!important; border-color:rgba(255,255,255,.35)!important; color:#fff!important; }

.awd-canvas-inner { flex:1; overflow:auto; display:flex; align-items:flex-start; justify-content:center; padding:28px; scroll-behavior:smooth; position:relative; }
.awd-stage-shell { position:relative; filter:drop-shadow(0 16px 52px rgba(0,0,0,.52)); overflow:visible; }
.awd-stage { position:relative; background:#fff; width:850px; height:1050px; overflow:hidden; touch-action:none; }
.awd-canvas-statusbar { height:28px; background:var(--rail); border-top:1px solid var(--bord-d); display:flex; align-items:center; padding:0 14px; gap:16px; flex-shrink:0; }
.awd-status-chip { font-size:10px; color:rgba(255,255,255,.3); display:flex; align-items:center; gap:3px; }
.awd-status-chip b { color:rgba(255,255,255,.58); font-weight:600; }
#awd-canvas { display:block; background:#fff; }
.awd-mobile-actions { display:none; }

/* ── RIGHT BAR ─────────────────────────────────────────────────── */
.awd-rightbar { background:var(--panel); border-left:1px solid var(--bord); overflow-y:auto; scrollbar-width:thin; scrollbar-color:#CBD5E1 transparent; display:flex; flex-direction:column; }
.awd-rightbar::-webkit-scrollbar { width:3px; }
.awd-rightbar::-webkit-scrollbar-thumb { background:#CBD5E1; border-radius:3px; }
.awd-rcard { padding:11px 13px; border-bottom:1px solid var(--bord); }
.awd-rcard-title { font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--txt-s); margin-bottom:8px; display:flex; align-items:center; justify-content:space-between; }
.awd-rcard-toggle { font-size:10px; color:var(--navy); cursor:pointer; font-weight:600; text-decoration:none; }
.awd-rcard-toggle:hover { text-decoration:underline; }

/* Right panel buttons */
.awd-export {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin: 2px 0;
  background: #fff;
  color: var(--txt);
  border: 1px solid var(--bord);
  border-radius: var(--r);
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t);
  font-family: inherit;
}
.awd-export:hover { background:var(--panel-bg); border-color:#94A3B8; color:var(--navy); }
.awd-export.primary { background:#16A34A; color:#fff; border-color:#15803D; font-weight:700; }
.awd-export.primary:hover { background:#15803D; }

.awd-open-link { display:inline-flex; align-items:center; justify-content:center; gap:5px; background:var(--navy); color:#fff; border-radius:var(--r); padding:6px 10px; font-size:11px; font-weight:500; text-decoration:none; cursor:pointer; border:none; font-family:inherit; transition:all var(--t); }
.awd-open-link:hover { background:#1C2D45; }

/* Right panel cards */
.awd-product-rules-card { background:linear-gradient(135deg,#0B1728 0%,#1C2D45 100%); border-radius:8px; padding:11px 13px; color:#fff; }
.awd-product-rules-card strong { display:block; font-size:12px; color:#fff; margin-bottom:5px; }
.awd-product-rules-card span { display:block; font-size:10px; color:rgba(255,255,255,.45); margin-bottom:1px; }
.awd-product-rules-card .awd-prc-badge { display:inline-block; background:var(--gold); color:var(--navy); font-size:9px; font-weight:700; padding:2px 7px; border-radius:20px; margin-top:5px; }

.awd-price-line { display:flex; justify-content:space-between; padding:4px 0; font-size:11px; border-bottom:1px dashed var(--bord); color:var(--txt); }
.awd-price-line:last-child { border:none; }
.awd-price-line em { font-size:9px; color:var(--txt-s); font-style:normal; }
.awd-price-total { font-size:20px; font-weight:800; color:var(--navy); text-align:right; margin-top:4px; }

.awd-pricing-controls { display:flex; flex-direction:column; gap:6px; }
.awd-pricing-controls label { font-size:10px; font-weight:700; color:var(--txt-s); text-transform:uppercase; letter-spacing:.05em; display:flex; flex-direction:column; gap:3px; }

/* Status / info boxes */
.awd-active-area-spec { background:#FFFBEB; border:1px solid #FDE68A; border-radius:6px; padding:7px 9px; font-size:10px; color:#78350F; line-height:1.7; }
.awd-active-area-spec span { display:block; }
.awd-template-summary { background:#EFF6FF; border:1px solid #BFDBFE; border-radius:6px; padding:7px 9px; font-size:10px; color:#1E40AF; margin-bottom:7px; line-height:1.7; }
.awd-template-summary span { display:block; }
.awd-help-text { font-size:10px; color:var(--txt-s); background:var(--panel-bg); border-left:2px solid #D1D5DB; padding:6px 8px; border-radius:5px; line-height:1.55; }
.awd-cart-save-status { background:#ECFDF5; border:1px solid #A7F3D0; border-radius:6px; padding:7px 9px; font-size:11px; color:#065F46; }
.awd-quality-panel { background:#FFFBEB; border:1px solid #FDE68A; border-radius:6px; padding:7px 9px; font-size:10px; color:#78350F; line-height:1.55; }
.awd-product-box { background:#FFFBEB; border:1px solid #FDE68A; border-radius:8px; padding:10px; margin:5px 0; }
.awd-product-warnings { display:flex; flex-direction:column; gap:4px; }
.awd-product-warnings p { margin:0; background:#FFFBEB; border-left:2px solid var(--gold); padding:5px 7px; border-radius:5px; font-size:10px; color:#78350F; }
.awd-preflight-score { border-radius:6px; padding:8px 10px; font-size:11px; font-weight:600; display:flex; align-items:center; gap:6px; margin-bottom:7px; }
.awd-preflight-score.ok   { background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46; }
.awd-preflight-score.warn { background:#FFFBEB; border:1px solid #FDE68A; color:#78350F; }
.awd-preflight-score.bad  { background:#FEF2F2; border:1px solid #FECACA; color:#7F1D1D; }
.awd-preflight-score:not(.ok):not(.warn):not(.bad) { background:var(--panel-bg); border:1px solid var(--bord); color:var(--txt-s); }
.awd-preflight-panel { display:flex; flex-direction:column; gap:4px; }
.awd-preflight-item { border:1px solid var(--bord); border-radius:6px; padding:7px 9px; cursor:pointer; background:#fff; }
.awd-preflight-item:hover { box-shadow:0 1px 4px rgba(0,0,0,.07); }
.awd-preflight-item strong { font-size:9px; letter-spacing:.07em; text-transform:uppercase; display:block; margin-bottom:2px; }
.awd-preflight-item span { font-size:11px; line-height:1.4; display:block; }
.awd-preflight-item.warning { border-color:#FDE68A; background:#FFFBEB; }
.awd-preflight-item.warning strong { color:#78350F; }
.awd-preflight-item.critical { border-color:#FECACA; background:#FEF2F2; }
.awd-preflight-item.critical strong { color:#7F1D1D; }
.awd-preflight-ok { background:#ECFDF5; border:1px solid #A7F3D0; border-radius:6px; padding:8px; font-weight:600; font-size:11px; color:#065F46; }
.acpro-design-preview { max-width:72px; border:1px solid var(--bord); border-radius:6px; margin-top:5px; }
.acpro-design-chip { display:inline-block; background:#FEF3C7; border:1px solid #FDE68A; border-radius:999px; padding:2px 6px; margin:1px 2px; font-size:9px; font-weight:700; color:#78350F; }
.awd-clear-attached-design { background:none; border:1px solid var(--bord); border-radius:5px; padding:3px 7px; font-size:10px; cursor:pointer; color:var(--txt-s); font-family:inherit; }
.awd-clear-attached-design:hover { background:#FEE2E2; color:#991B1B; border-color:#FCA5A5; }
.awd-attached-status { color:#16A34A; font-weight:600; font-size:10px; }
.awd-qr { display:flex; gap:4px; }
.awd-qr input { flex:1; }
.awd-qr .awd-tool { flex-shrink:0; }
.awd-proof .awd-field { margin-bottom:6px; }

/* ── CANVAS Z-INDEX (critical — do not change) ─────────────────── */
.awd-stage .canvas-container { position:relative!important; z-index:10!important; pointer-events:auto!important; touch-action:none!important; user-select:none!important; background:transparent!important; outline:0!important; }
.awd-stage .lower-canvas { position:absolute!important; left:0!important; top:0!important; z-index:11!important; pointer-events:none!important; background:#fff!important; background-color:#fff!important; }
.awd-stage .lower-canvas[style] { background:#fff!important; background-color:#fff!important; }
.awd-stage .upper-canvas { position:absolute!important; left:0!important; top:0!important; z-index:12!important; pointer-events:auto!important; touch-action:none!important; background:transparent!important; background-color:transparent!important; }
.awd-stage .upper-canvas[style] { background:transparent!important; background-color:transparent!important; }
.awd-print-line, .awd-safe-line, .awd-bleed-line { pointer-events:none!important; position:absolute!important; z-index:20!important; }
.awd-no-print-layer { pointer-events:none!important; position:absolute!important; inset:0; z-index:21!important; }
.awd-mockup-guide { pointer-events:none!important; position:absolute!important; inset:0; z-index:5!important; opacity:.12; }
.awd-stage canvas { background-color:#fff!important; }
.awd-stage .upper-canvas { background-color:transparent!important; }

/* ── GUIDE OVERLAYS ────────────────────────────────────────────── */
.awd-print-line { display:none; }
.awd-safe-line  { display:none; }
.awd-bleed-line { display:none; }
/* guide ::before labels removed — DOM guides no longer exist */
.awd-no-print-zone { position:absolute; border:1.5px solid rgba(190,39,39,.65); background:repeating-linear-gradient(45deg,rgba(190,39,39,.08),rgba(190,39,39,.08) 7px,rgba(190,39,39,.02) 7px,rgba(190,39,39,.02) 14px); border-radius:6px; box-sizing:border-box; }
.awd-no-print-zone span { position:absolute; left:5px; top:4px; background:rgba(255,255,255,.93); border-radius:5px; padding:2px 5px; font-size:9px; font-weight:700; color:#7a1515; }
.awd-mockup-guide { background-repeat:no-repeat; background-position:center; background-size:78% auto; }
.awd-mockup-guide[data-template*="tshirt-front"],.awd-mockup-guide[data-template*="tshirt-back"] { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 760'%3E%3Cpath d='M185 65 L245 35 L300 62 L355 35 L415 65 L540 150 L485 250 L430 215 L430 700 L170 700 L170 215 L115 250 L60 150 Z' fill='none' stroke='%23071827' stroke-width='14' stroke-linejoin='round'/%3E%3Cpath d='M245 35 Q300 115 355 35' fill='none' stroke='%23071827' stroke-width='10'/%3E%3C/svg%3E"); }
.awd-mockup-guide[data-template*="hoodie"] { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 760'%3E%3Cpath d='M230 105 Q300 20 370 105 L430 160 L520 240 L475 330 L430 300 L430 705 L170 705 L170 300 L125 330 L80 240 L170 160 Z' fill='none' stroke='%23071827' stroke-width='14' stroke-linejoin='round'/%3E%3Cpath d='M230 105 Q300 185 370 105' fill='none' stroke='%23071827' stroke-width='10'/%3E%3C/svg%3E"); }
.awd-mockup-guide[data-template*="sleeve"] { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 760'%3E%3Cpath d='M90 45 H210 L245 700 H55 Z' fill='none' stroke='%23071827' stroke-width='13'/%3E%3C/svg%3E"); background-size:42% auto; }
.awd-mockup-guide[data-template*="cap"] { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 420'%3E%3Cpath d='M120 240 Q160 90 300 90 Q440 90 480 240 L120 240 Z' fill='none' stroke='%23071827' stroke-width='14'/%3E%3Cpath d='M480 240 Q545 245 580 275 Q525 305 470 292' fill='none' stroke='%23071827' stroke-width='12'/%3E%3C/svg%3E"); background-size:70% auto; }

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media(max-width:1100px) {
  .awd-layout { grid-template-columns: 360px 1fr 0; }
  .awd-rightbar { display:none; }
}
@media(max-width:820px) {
  .awd-studio { height:auto; min-height:100vh; border-radius:0; margin:0; }
  .awd-layout { grid-template-columns: 1fr; }
  .awd-sidebar { display:none; position:fixed; top:50px; left:0; bottom:28px; z-index:999; width:360px; box-shadow:4px 0 20px rgba(0,0,0,.3); }
  .awd-sidebar.mob-open { display:flex; }
  .awd-mobile-actions { display:flex; gap:5px; padding:6px 10px; background:var(--rail); border-bottom:1px solid var(--bord-d); flex-wrap:wrap; justify-content:center; flex-shrink:0; }
  .awd-mobile-actions button { height:28px; padding:0 10px; background:rgba(255,255,255,.07); border:1px solid var(--bord-d); color:rgba(255,255,255,.65); border-radius:var(--r); font-size:11px; font-weight:500; cursor:pointer; font-family:inherit; }
  .awd-canvas-inner { padding:14px; }
}

/* ── Status bar zoom slider (bottom-right) ─────────────────
   Figma / Chrome DevTools style — percentage label + range
   slider + icon buttons, all in the existing status bar.    */

.awd-canvas-statusbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

.awd-zoom-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;          /* pushes to the far right     */
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.1);
}

.awd-zoom-bar #awd-zoom-label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  min-width: 34px;
  text-align: right;
  letter-spacing: .02em;
}

.awd-zb {
  border: none !important;
  background: none !important;
  color: rgba(255,255,255,.5) !important;
  cursor: pointer;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: inherit;
  flex-shrink: 0;
  display: inline;
}
.awd-zb:hover { color: #fff !important; background: none !important; }

/* Zoom range slider */
#awd-zoom-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 88px;
  height: 3px;
  background: rgba(255,255,255,.18);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
}
#awd-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  transition: transform .13s ease;
}
#awd-zoom-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
#awd-zoom-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* Hide old zoom elements */
.awd-zoom-pill   { display: none !important; }
.awd-zoom-float  { display: none !important; }
.awd-topbar-center { display: none; }

/* Canvas inner — no longer needs relative for floating element */
.awd-canvas-inner { position: static; }


/* Hard-kill any cached gold zoom buttons from old plugin versions */
.awd-studio .awd-zoom-pill button,
.awd-studio button[data-action="zoom-in"]:not(.awd-zb),
.awd-studio button[data-action="zoom-out"]:not(.awd-zb) {
  background: none !important;
  border: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 2px 4px !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  color: rgba(255,255,255,.5) !important;
  box-shadow: none !important;
}


/* ================================================================
   AWDesigner Pro 8.0.1/8.0.2 hotfixes
   Canvas interaction and theme-width hardening.
   ================================================================ */
body.page-template-page-designer .content-wrap,
body.page-template-page-designer main > .content-wrap,
body.page-id-designer .content-wrap,
.awd-designer-page .content-wrap {
  max-width: none !important;
  width: 100% !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.awd-studio,
.awd-studio * { box-sizing: border-box; }
.awd-studio {
  width: min(100%, 1540px) !important;
  max-width: 1540px !important;
  isolation: isolate;
}
.awd-stage { position: relative !important; overflow: hidden !important; }
.awd-stage .canvas-container {
  position: relative !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  background: transparent !important;
  display: block !important;
}
.awd-stage .lower-canvas {
  z-index: 31 !important;
  pointer-events: none !important;
  background: #fff !important;
}
.awd-stage .upper-canvas {
  z-index: 32 !important;
  pointer-events: auto !important;
  background: transparent !important;
}
.awd-print-line, .awd-safe-line, .awd-bleed-line, .awd-no-print-layer {
  z-index: 40 !important;
  pointer-events: none !important;
}
.awd-no-print-zone, .awd-no-print-zone * { pointer-events: none !important; }
.awd-mockup-guide { z-index: 5 !important; pointer-events: none !important; }
.awd-canvas-inner { position: relative !important; }
.awd-stage-shell { min-width: min-content; }


/* ================================================================
   AWDesigner Pro 8.0.2 canvas stacking correction
   Keeps Fabric's editable layer pinned to the top-left of the stage.
   The guide/no-print overlays remain visual only and can never become
   the layer that receives new artwork.
   ================================================================ */
.awd-stage {
  position: relative !important;
  overflow: hidden !important;
}
.awd-stage .canvas-container {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  background: transparent !important;
}
.awd-stage .canvas-container canvas,
.awd-stage canvas.lower-canvas,
.awd-stage canvas.upper-canvas {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  margin: 0 !important;
}
.awd-stage .lower-canvas {
  z-index: 31 !important;
  pointer-events: none !important;
  background: #fff !important;
}
.awd-stage .upper-canvas {
  z-index: 32 !important;
  pointer-events: auto !important;
  background: transparent !important;
}
.awd-mockup-guide {
  z-index: 1 !important;
  pointer-events: none !important;
}
.awd-no-print-layer {
  z-index: 6 !important;
  pointer-events: none !important;
}
.awd-print-line,
.awd-safe-line,
.awd-bleed-line {
  z-index: 40 !important;
  pointer-events: none !important;
}


/* ================================================================
   AWDesigner Pro 8.0.4 object-placement correction
   Fabric is the editable artwork layer. Guides remain visual only.
   ================================================================ */
.awd-stage .canvas-container,
.awd-stage .canvas-container canvas,
.awd-stage canvas.lower-canvas,
.awd-stage canvas.upper-canvas {
  transform: none !important;
  transform-origin: 0 0 !important;
}
.awd-stage .canvas-container { z-index: 60 !important; }
.awd-stage .lower-canvas { z-index: 61 !important; }
.awd-stage .upper-canvas { z-index: 62 !important; }
.awd-mockup-guide { z-index: 1 !important; pointer-events:none !important; }
.awd-no-print-layer { z-index: 2 !important; pointer-events:none !important; }
.awd-print-line,.awd-safe-line,.awd-bleed-line { z-index: 70 !important; pointer-events:none !important; }


/* ================================================================
   AWDesigner Pro 8.0.5 ghost no-print zone suppression
   No-print areas are optional guide overlays only. Hidden by default
   so they cannot appear as pale ghost rectangles over customer artwork.
   ================================================================ */
.awd-no-print-layer{display:none;pointer-events:none!important;z-index:2!important;}
.awd-no-print-layer[style*="display: block"],
.awd-no-print-layer[style*="display: inline"]{pointer-events:none!important;}
.awd-no-print-zone{box-shadow:none!important;opacity:.55!important;}


/* ================================================================
   AWDesigner Pro 8.0.6 hard ghost-overlay lock fix
   No-print and mockup guide overlays are disabled at CSS level because
   they were reappearing after canvas clicks and blocking editing.
   ================================================================ */
.awd-no-print-layer,
.awd-no-print-zone,
.awd-mockup-guide{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
  opacity:0!important;
}
.awd-print-line,.awd-safe-line,.awd-bleed-line{
  pointer-events:none!important;
}
.awd-stage .canvas-container{z-index:90!important;pointer-events:auto!important;}
.awd-stage .lower-canvas{z-index:91!important;}
.awd-stage .upper-canvas{z-index:92!important;pointer-events:auto!important;}
#awd-show-noprint:disabled{opacity:.45;}


/* ================================================================
   AWDesigner Pro 8.0.8 DOM guide isolation fix
   DOM guide rectangles are completely removed from interaction.
   Production guides are drawn inside Fabric as passive non-export objects.
   ================================================================ */
.awd-print-line,
.awd-safe-line,
.awd-bleed-line,
.awd-no-print-layer,
.awd-no-print-zone,
.awd-mockup-guide{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
  opacity:0!important;
}
.awd-stage .canvas-container{
  position:absolute!important;
  left:0!important;
  top:0!important;
  z-index:100!important;
  pointer-events:auto!important;
}
.awd-stage .lower-canvas{z-index:101!important;pointer-events:none!important;background:#fff!important;}
.awd-stage .upper-canvas{z-index:102!important;pointer-events:auto!important;background:transparent!important;}
#awd-show-noprint:disabled{opacity:.45;}


/* ================================================================
   AWDesigner Pro 8.0.10 side-button isolation fix
   Side tabs are pure UI controls and must never submit forms, target the canvas,
   or become part of the editable Fabric layer.
   ================================================================ */
.awd-sides{position:relative!important;z-index:500!important;pointer-events:auto!important;}
.awd-sides button[data-awd-side-tab="1"]{pointer-events:auto!important;user-select:none!important;touch-action:manipulation!important;}
.awd-sides button[data-awd-side-tab="1"]:focus{outline:2px solid rgba(255,255,255,.35)!important;outline-offset:2px!important;}


/* ================================================================
   AWDesigner Pro 8.0.11 side switch canvas isolation fix
   The side tabs must never regenerate guide rectangles. Only Fabric's two
   canvas elements may sit inside the editable stage.
   ================================================================ */
.awd-stage > .awd-print-line,
.awd-stage > .awd-safe-line,
.awd-stage > .awd-bleed-line,
.awd-stage > .awd-no-print-layer,
.awd-stage > .awd-no-print-zone,
.awd-stage > .awd-mockup-guide{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
  opacity:0!important;
}
.awd-stage{position:relative!important;overflow:hidden!important;background:#fff!important;}
.awd-stage > .canvas-container{position:absolute!important;left:0!important;top:0!important;z-index:100!important;pointer-events:auto!important;}
.awd-stage > .canvas-container > canvas{position:absolute!important;left:0!important;top:0!important;margin:0!important;}
.awd-sides, .awd-sides *{pointer-events:auto!important;}
.awd-sides button{type:button;}


/* ── Sides tab buttons — hard override for cached gold styles ── */
.awd-studio .awd-sides button,
.awd-studio .awd-sides button:not(.active) {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.55) !important;
  border-radius: 13px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  height: 26px !important;
  padding: 0 14px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  transition: all .13s ease !important;
}
.awd-studio .awd-sides button:hover {
  background: rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.85) !important;
}
.awd-studio .awd-sides button.active {
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.32) !important;
  color: #fff !important;
}