*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  margin: 0;
  background: #070F18;
  color: #FFFFFF;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
#root { width: 100%; min-height: 100vh; }

/* Layout */
.app-root { display: flex; flex-direction: column; height: 100vh; width: 100%; background: #070F18; }
.app-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* TopNavbar */
.navbar { width: 100%; height: 80px; background: #070F18; border-bottom: 1px solid #172535; display: flex; align-items: center; gap: 24px; padding: 0 32px 0 36px; flex-shrink: 0; }
.navbar-logo { display: flex; align-items: center; gap: 20px; min-width: 300px; flex-shrink: 0; }
.navbar-logo h1 { color: #fff; font-size: 24px; font-weight: 700; line-height: 29px; margin: 0; white-space: nowrap; }
.navbar-beta { color: #CBD5E1; font-size: 15px; font-weight: 500; }
.navbar-tools { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.navbar-tools::-webkit-scrollbar { display: none; }
.navbar-group { display: flex; align-items: center; gap: 8px; padding-right: 10px; border-right: 1px solid rgba(43,58,76,0.72); flex-shrink: 0; }
.navbar-group:last-child { border-right: 0; padding-right: 0; }
.navbar-btn { height: 42px; border-radius: 6px; background: #0B1119; border: 1px solid #2B3A4C; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.navbar-btn:hover { background: #152030; }
.navbar-btn:disabled { cursor: not-allowed; }
.navbar-btn--undo, .navbar-btn--redo { width: 58px; }
.navbar-btn--danger { width: 68px; color: #8291A3; }
.navbar-btn--danger.is-active { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #EF4444; }
.navbar-btn--tool { width: 74px; }
.navbar-btn--preview, .navbar-btn--save { width: 76px; }
.navbar-btn--template { width: 70px; color: #8291A3; }
.navbar-btn--template.is-active { background: #0B65FF; border-color: #0B65FF; color: #fff; }
.navbar-export-group { display: flex; align-items: center; height: 42px; border: 1px solid #2B3A4C; border-radius: 8px; overflow: hidden; background: #0B1119; flex-shrink: 0; }
.navbar-export-select { width: 78px; height: 42px; border: 0; border-right: 1px solid #2B3A4C; border-radius: 0; background: #0B1119; color: #fff; font-size: 14px; padding: 0 8px; outline: none; cursor: pointer; }
.navbar-btn--export { width: 86px; height: 42px; border: 0; border-radius: 0; background: #0B65FF; }
.navbar-btn--export:hover { background: #095DFF; }

/* Canvas — responsive scaling */
.canvas-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-width: 0;
  overflow: hidden;
}
.canvas-outer {
  position: relative;
  overflow: hidden;
}
.canvas {
  width: 1672px;
  min-height: 941px;
  background:
    radial-gradient(circle at 50% 38%, rgba(20,72,142,0.26), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(12,85,190,0.24), transparent 28%),
    linear-gradient(180deg, #030912 0%, #06101c 50%, #030812 100%);
  border-radius: 12px;
  border: 1px solid #1D2B3A;
  position: relative;
  overflow: visible;
  transform-origin: top left;
}
.canvas-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, rgba(86,144,255,0.08), transparent 24%); pointer-events: none; }
.canvas.is-exporting * { outline: none !important; }
.canvas-cards { display: none; }
.canvas-image { position: absolute; right: 75px; top: 43px; }
.canvas-cta { position: absolute; left: 102px; bottom: 10px; }

/* ProductCard */
.card { box-sizing: border-box; position: relative; width: 260px; border-radius: 18px; padding: 14px; cursor: pointer; transition: all 0.15s; background: #080D14; border: 2px solid transparent; }
.card:hover { border-color: #2B3A4C; }
.card--selected { border-color: #2E72FF; }
.card-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.card-divider { height: 1px; background: #2B3A50; margin-bottom: 6px; }
.card-deposit { background: #095DFF; border: 1px solid #2B88FF; border-radius: 8px; padding: 8px 12px; text-align: center; margin-bottom: 7px; }
.card-final { display: flex; align-items: stretch; margin-bottom: 12px; }
.card-final-label { background: #075EFF; border-radius: 7px 0 0 7px; display: flex; align-items: center; justify-content: center; padding: 9px 12px; }
.card-final-price { background: #075EFF; border-radius: 0 7px 7px 0; display: flex; align-items: center; justify-content: center; padding: 6px 14px; flex: 1; }
.card-guarantee { background: #061326; border: 1px solid #1669FF; border-radius: 7px; padding: 9px 10px; margin-bottom: 9px; display: flex; justify-content: space-between; align-items: center; }
.card-warranty { margin-bottom: 9px; }
.card-gift { background: #095DFF; border-radius: 7px; padding: 8px 12px; text-align: center; }

/* ProductImage */
.pimg { width: 350px; height: 561px; border-radius: 26px; background: linear-gradient(to bottom right, #1a2a3a, #0d1a28, #162535); border: 1px solid #1669FF; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.pimg-body { position: absolute; width: 168px; height: 419px; top: 58px; left: 50%; transform: translateX(-50%); border-radius: 4px; background: linear-gradient(to bottom, #d0d5db, #b7c0ca); border: 1px solid #b7c0ca; }
.pimg-line { position: absolute; left: 50%; top: 2px; bottom: 0; width: 0; border-left: 1px solid #c2c8cf; }
.pimg-sep { position: absolute; left: 0; right: 0; top: 277px; height: 11px; background: #17191d; }
.pimg-drawer { position: absolute; left: 0; right: 0; top: 289px; height: 128px; background: #e7e9ec; border: 1px solid #c7ced7; border-radius: 0 0 4px 4px; }
.pimg-drawer-line { position: absolute; left: 0; right: 0; top: 68px; border-top: 1px solid #b8c0ca; }

/* CTA */
.cta { min-width: 200px; min-height: 63px; padding: 12px 32px; border-radius: 38px; background: #071322; border: 2px solid #1669FF; color: #fff; font-size: 36px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; }
.cta:hover { background: #0d1f35; }
.cta-v2 { width: 900px !important; height: 84px; border-radius: 18px; border-color: #2F83FF; box-shadow: 0 0 16px rgba(47,131,255,0.68), inset 0 0 22px rgba(30,104,255,0.2); background: rgba(6,19,38,0.92); letter-spacing: 0; }

.v2-bg-glow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.38), transparent 22%, transparent 78%, rgba(0,0,0,0.38)),
    radial-gradient(ellipse at 50% 88%, rgba(34,116,255,0.34), transparent 31%);
  pointer-events: none;
}
.v2-topline,
.v2-title-line {
  position: absolute;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #4CA0FF, #E5F2FF, #4CA0FF, transparent);
  box-shadow: 0 0 16px rgba(51,142,255,0.95);
  pointer-events: none;
  z-index: 3;
}
.v2-topline { top: 122px; width: 82px; }
.v2-topline-left { left: 578px; }
.v2-topline-right { left: 1014px; }
.v2-title-line { top: 226px; width: 88px; }
.v2-title-line-left { left: 680px; }
.v2-title-line-right { left: 904px; }
.v2-compare-panel {
  position: absolute;
  left: 646px;
  top: 262px;
  width: 380px;
  height: 430px;
  border: 1px solid rgba(123,153,192,0.62);
  border-radius: 12px;
  background: rgba(5,14,25,0.48);
  box-shadow: inset 0 0 24px rgba(48,111,206,0.09), 0 0 16px rgba(20,91,202,0.16);
  z-index: 4;
  overflow: hidden;
  display: grid;
  grid-template-columns: 90px 138px 150px;
  grid-template-rows: repeat(7, 1fr);
}
.v2-compare-cell {
  min-width: 0;
  padding: 0 8px;
  border-right: 1px solid rgba(131,153,182,0.42);
  border-bottom: 1px solid rgba(131,153,182,0.42);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.22;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.v2-compare-cell:nth-child(3n) { border-right: 0; }
.v2-compare-cell:nth-last-child(-n + 3) { border-bottom: 0; }
.v2-compare-label { font-weight: 800; }
.v2-compare-blue { color: #b9d8ff; }
.v2-editable-icon {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(185,216,255,0.72);
  border-radius: 10px;
  color: #eaf4ff;
  background: linear-gradient(145deg, rgba(18,55,105,0.92), rgba(5,18,34,0.92));
  box-shadow: inset 0 0 12px rgba(85,150,255,0.2), 0 0 8px rgba(87,151,255,0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  z-index: 3;
}
.v2-editable-icon span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -43%);
  font-size: 8px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}
.v2-editable-icon-chat {
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #78adff;
  filter: drop-shadow(0 0 10px rgba(63,135,255,0.72));
}

/* PropertiesPanel */
.panel { width: 400px; max-width: 400px; min-width: 360px; height: 100%; background: #08111A; border-left: 1px solid #243447; flex-shrink: 0; padding: 28px 32px; overflow-y: auto; }
.panel-title { color: #fff; font-size: 22px; font-weight: 700; line-height: 29px; margin: 0 0 10px 0; }
.panel-divider { height: 1px; background: #1E2B36; margin-bottom: 36px; }
.panel-field { margin-bottom: 36px; }
.panel-label { display: block; color: #D7E2EF; font-size: 16px; font-weight: 500; margin-bottom: 10px; }
.panel-input { width: 100%; height: 44px; background: #0B141E; border: 1px solid #334155; border-radius: 6px; color: #fff; font-size: 18px; padding: 0 14px; outline: none; box-sizing: border-box; }
.panel-input:focus { border-color: #0B65FF; }
.panel-input-wrap { position: relative; }
.panel-input-counter { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #7A8795; font-size: 14px; }
.panel-color-row { display: flex; align-items: center; gap: 12px; background: #0B141E; border: 1px solid #334155; border-radius: 6px; height: 44px; padding: 0 14px; }
.panel-color-swatch { width: 30px; height: 26px; border-radius: 4px; flex-shrink: 0; border: 1px solid #334155; }
.panel-color-input { background: transparent; color: #fff; font-size: 18px; outline: none; flex: 1; min-width: 0; border: 0; }
.panel-select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #8792A2; font-size: 20px; pointer-events: none; }
.panel-hint { color: #8291A3; font-size: 14px; margin-top: auto; padding-top: 24px; }

/* Toggle */
.toggle { position: relative; width: 56px; height: 28px; border-radius: 14px; cursor: pointer; border: 0; outline: none; transition: background 0.15s; }
.toggle-on { background: #0B65FF; }
.toggle-off { background: #1E293B; }
.toggle-dot { position: absolute; top: 2px; width: 24px; height: 24px; border-radius: 12px; background: #fff; transition: transform 0.15s; }
.toggle-dot-on { transform: translateX(30px); }
.toggle-dot-off { transform: translateX(2px); }

/* Card title */
.card-title { position: absolute; color: #fff; font-size: 24px; font-weight: 700; line-height: 29px; margin: 0; cursor: pointer; }