/* ============================================================
   3D Bead Patterns — Design System & Components
   Craft-warm · 3D-first · Step-guided
   ============================================================ */

:root {
  /* Brand */
  --color-primary:        #C46A4A;
  --color-primary-dark:   #A85538;
  --color-primary-light:  #E89A7A;
  --color-accent:         #2D6A4F;
  --color-accent-dark:    #1B4332;
  --color-warn:           #D4A24A;

  /* Surfaces */
  --color-bg:        #FAF6F0;
  --color-surface:   #FFFFFF;
  --color-surface-2: #F7F1E8;
  --color-surface-3: #F1E9DD;

  /* Text */
  --color-text:   #2B2320;
  --color-text-2: #7A6A60;
  --color-text-3: #A89A90;

  /* Lines */
  --color-border:   #E8DFD4;
  --color-border-2: #DDD0BF;

  /* Typography */
  --font: 'Avenir Next', 'Segoe UI Rounded', 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Spacing */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s8: 48px; --s10: 64px;

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(43,35,32,.06);
  --shadow-md: 0 4px 12px rgba(43,35,32,.08);
  --shadow-lg: 0 12px 32px rgba(43,35,32,.12);
  --shadow-xl: 0 24px 48px rgba(43,35,32,.14);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 200ms;
}

/* ===================== Base ===================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

img, canvas { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid rgba(196,106,74,.35); outline-offset: 3px; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 var(--s5); }

/* ===================== Header ===================== */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--s3); padding-bottom: var(--s3);
}
.brand {
  display: flex; align-items: center; gap: var(--s2);
  font-weight: 800; font-size: 1.1rem; color: var(--color-text);
}
.brand-dot {
  width: 26px; height: 26px; border-radius: 7px;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 70% 30%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 30% 70%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 70% 70%, #fff 0 2px, transparent 2.5px),
    linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.site-nav { display: flex; align-items: center; gap: var(--s4); }
.site-nav a { color: var(--color-text-2); font-size: .9rem; font-weight: 600; }
.site-nav a:hover { color: var(--color-primary); }
.lang-toggle {
  padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--color-border-2); background: var(--color-surface);
  color: var(--color-text); cursor: pointer; font-size: .8rem; font-weight: 700;
  transition: all var(--dur) var(--ease);
}
.lang-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ===================== Hero ===================== */
.hero {
  padding: var(--s10) 0 var(--s8);
  text-align: center;
  background:
    radial-gradient(1000px 400px at 50% -10%, rgba(196,106,74,.12), transparent 60%),
    var(--color-bg);
}
.hero-kicker {
  display: inline-block; padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--color-surface-2); color: var(--color-primary-dark);
  font-size: .8rem; font-weight: 700; letter-spacing: .02em; margin-bottom: var(--s4);
}
.hero h1 { font-size: clamp(1.8rem, 4.5vw, 2.9rem); margin-bottom: var(--s3); }
.hero p {
  max-width: 620px; margin: 0 auto var(--s5);
  color: var(--color-text-2); font-size: 1.05rem;
}
.home-hero { padding-bottom: var(--s6); }
.home-hero h1 { max-width: 820px; margin-left: auto; margin-right: auto; }
.hero-accent { color: var(--color-primary-dark); }
.shape-hero { padding-bottom: var(--s6); }
.content-hero { padding: var(--s8) 0 var(--s6); border-bottom: 1px solid var(--color-border); }
.content-hero p { margin-bottom: 0; }
.mode-switch-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mode-label {
  color: var(--color-text-2); font-size: .76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.hero-proof {
  display: flex; align-items: center; justify-content: center; gap: var(--s4);
  margin-top: var(--s4); color: var(--color-text-2); font-size: .82rem; font-weight: 700;
}

/* Mode switch — pill */
.mode-switch {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--color-surface-2); border-radius: var(--r-pill);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.mode-btn {
  padding: 10px 22px; border-radius: var(--r-pill); border: none;
  background: transparent; color: var(--color-text-2);
  font-family: var(--font); font-size: .92rem; font-weight: 700; cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.mode-btn.active {
  background: var(--color-primary); color: #fff;
  box-shadow: 0 4px 14px rgba(196,106,74,.35);
  transform: translateY(-1px);
}
.mode-btn:not(.active):hover { color: var(--color-text); }

/* ===================== Workspace layout ===================== */
.tool-shell { margin-top: var(--s6); }
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
  margin-bottom: var(--s8);
}

.preview-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: 2px; }
.preview-heading h2 { font-size: 1.28rem; margin-top: 5px; }
.step-label {
  color: var(--color-primary-dark); font-size: .73rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.live-badge {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  color: var(--color-accent); background: #EDF7F1; border: 1px solid #CDE8D7;
  border-radius: var(--r-pill); padding: 5px 10px; font-size: .72rem; font-weight: 800;
}
.live-badge span { width: 7px; height: 7px; border-radius: 50%; background: #36A269; box-shadow: 0 0 0 4px rgba(54,162,105,.12); }
.preview-card .preview-help { color: var(--color-text-2); font-size: .8rem; margin: 0 0 var(--s3); }
.preview-tips {
  display: flex; justify-content: center; gap: var(--s4); flex-wrap: wrap;
  padding-top: var(--s3); color: var(--color-text-3); font-size: .72rem; font-weight: 600;
}

/* 3D preview card — the hero of the tool */
.preview-card {
  background: var(--color-surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  padding: var(--s4);
  position: sticky; top: 76px; align-self: start; z-index: 2;
}
.preview-card h3 {
  font-size: .92rem; color: var(--color-text-2); font-weight: 700;
  margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2);
}
.preview-card h3 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.preview3d {
  width: 100%; height: 440px;
  border-radius: var(--r-lg);
  overflow: hidden; cursor: grab;
  background:
    radial-gradient(600px 300px at 50% 110%, rgba(196,106,74,.10), transparent 60%),
    #EFE7DC;
  box-shadow: inset 0 2px 12px rgba(43,35,32,.06);
  transition: box-shadow var(--dur) var(--ease);
}
.preview3d:hover { box-shadow: inset 0 2px 12px rgba(43,35,32,.06), 0 0 0 2px rgba(196,106,74,.15); }
.preview3d:active { cursor: grabbing; }
.preview-fallback { padding: 60px 20px; text-align: center; color: var(--color-text-3); font-size: .9rem; }
.preview-stage { position: relative; }
.preview-empty {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s2); text-align: center;
  padding: var(--s5); border-radius: var(--r-lg); color: var(--color-text-2);
  background: rgba(247,241,232,.96); backdrop-filter: blur(6px);
}
.preview-empty[hidden] { display: none; }
.preview-empty:hover,
.preview-empty:focus-visible {
  cursor: pointer;
  outline: none;
  box-shadow: inset 0 0 0 3px rgba(196,106,74,.24);
}
.preview-empty strong { color: var(--color-text); font-size: 1.05rem; }
.preview-empty > span:last-child { max-width: 320px; font-size: .8rem; }
.preview-empty-icon {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 15px; background: var(--color-surface); color: var(--color-primary);
  border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); font-size: 1.4rem;
}

/* Right column: stacked cards */
.side-col { display: flex; flex-direction: column; gap: var(--s4); }
.card {
  background: var(--color-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: var(--s4);
}
.hint { color: var(--color-text-2); font-size: .8rem; margin: -4px 0 var(--s3); }
.step-icon {
  width: 22px; height: 22px; border-radius: 7px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--color-surface-2);
  color: var(--color-primary-dark); font-size: .78rem;
}
.card-title {
  font-size: .92rem; font-weight: 800; color: var(--color-text);
  margin-bottom: var(--s3); display: flex; align-items: center; gap: var(--s2);
}
.card-title .step-badge {
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 7px; flex-shrink: 0;
  background: var(--color-surface-2); color: var(--color-primary-dark);
  font-size: .75rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ===================== Controls ===================== */
.controls { display: grid; grid-template-columns: 1fr; gap: var(--s3); }
.controls[disabled] { opacity: .45; }
fieldset.controls { border: 0; min-width: 0; }
.image-controls { grid-template-columns: 1fr 1fr; }
.image-controls .control:first-child,
.image-controls .checkbox-control { grid-column: 1 / -1; }
.checkbox-control label { display: flex; align-items: center; gap: 6px; margin: 0; }
.control label {
  display: block; font-size: .82rem; font-weight: 700; color: var(--color-text-2);
  margin-bottom: 6px;
}
.control output { float: right; color: var(--color-primary-dark); font-weight: 800; }
.control select,
.control input[type="number"] {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--color-border-2); border-radius: var(--r-sm);
  font-family: var(--font); font-size: .95rem; background: var(--color-surface);
  color: var(--color-text);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.control select:focus,
.control input:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(196,106,74,.18);
}
.control input[type="range"] { width: 100%; accent-color: var(--color-primary); }
.control input[type="checkbox"] { accent-color: var(--color-primary); width: 16px; height: 16px; }

/* Theme swatches */
.theme-swatches { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.theme-swatches button {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer; padding: 0;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow: var(--shadow-sm);
}
.theme-swatches button:hover { transform: scale(1.12); }
.theme-swatches button.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}

/* Panel colors */
.panel-colors { display: flex; flex-direction: column; gap: 4px; }
.panel-color-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; padding: 6px 8px; border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
}
.panel-color-row:hover { background: var(--color-surface-2); }
.panel-color-row.selected {
  background: rgba(196,106,74,.12);
  box-shadow: inset 3px 0 0 var(--color-primary);
}
.panel-color-row > span:first-child { cursor: pointer; font-weight: 700; }
.panel-color-control { display: inline-flex; align-items: center; gap: 8px; }
.panel-color-value { color: var(--color-text-3); font-size: .66rem; font-weight: 800; letter-spacing: .03em; }
.panel-color-row input[type="color"] {
  width: 46px; height: 30px; border: 1px solid var(--color-border-2);
  border-radius: var(--r-sm); padding: 2px; cursor: pointer; background: var(--color-surface);
}

/* Template library */
.template-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.template-section .template-bar { max-height: 188px; overflow-y: auto; padding: 2px; scrollbar-width: thin; }
.template-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px; border: 1px solid var(--color-border); border-radius: var(--r-sm);
  background: var(--color-surface); cursor: pointer; font-family: var(--font);
  font-size: .72rem; color: var(--color-text-2);
  transition: all var(--dur) var(--ease);
}
.template-btn:hover {
  border-color: var(--color-primary); transform: translateY(-2px);
  box-shadow: var(--shadow-md); color: var(--color-text);
}
.template-btn canvas { border-radius: 3px; image-rendering: pixelated; }

/* ===================== Editable face panels ===================== */
.edit-panel {
  margin-top: var(--s5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.side-col > .edit-panel { margin-top: 0; }
.side-col .edit-panel .panels { display: grid; grid-template-columns: 1fr; }
.side-col .edit-panel .panel-card { width: 100%; min-width: 0; }
.side-col .edit-panel .editable-panel { width: 100%; height: auto; image-rendering: pixelated; }
.edit-panel-header {
  padding: var(--s4) var(--s5);
  display: flex; align-items: center; gap: var(--s3);
  font-weight: 800; font-size: .95rem;
}
.edit-panel > summary {
  list-style: none; cursor: pointer;
  padding: var(--s4) var(--s5);
  display: flex; align-items: center; gap: var(--s3);
  font-weight: 800; font-size: .95rem;
  user-select: none;
  transition: background var(--dur) var(--ease);
}
.edit-panel > summary::-webkit-details-marker { display: none; }
.edit-panel > summary:hover { background: var(--color-surface-2); }
.edit-panel > summary .chev {
  margin-left: auto; transition: transform var(--dur) var(--ease);
  color: var(--color-text-3);
}
.step-number {
  width: 28px; height: 28px; border-radius: 9px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--color-primary);
  color: #fff; font-size: .8rem; box-shadow: 0 4px 12px rgba(196,106,74,.25);
}
.summary-note { color: var(--color-text-3); font-size: .75rem; font-weight: 700; }
.edit-panel[open] > summary .chev { transform: rotate(180deg); }
.edit-panel-body { padding: var(--s5); border-top: 1px solid var(--color-border); }
.editor-flow-step { margin-bottom: var(--s5); }
.editor-flow-heading { display: flex; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s3); }
.editor-flow-heading > span {
  width: 25px; height: 25px; flex: 0 0 25px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 8px; background: #F8E8E0;
  color: var(--color-primary-dark); font-weight: 900; font-size: .78rem;
}
.editor-flow-heading h3 { font-size: .96rem; line-height: 1.35; }
.editor-flow-heading p { margin-top: 2px; color: var(--color-text-2); font-size: .76rem; line-height: 1.45; }
.face-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.face-tab {
  min-width: 0; display: flex; align-items: center; gap: 9px; padding: 10px;
  border: 1px solid var(--color-border-2); border-radius: var(--r-sm);
  background: var(--color-surface); color: var(--color-text); text-align: left;
  font-family: var(--font); cursor: pointer; transition: all var(--dur) var(--ease);
}
.face-tab:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.face-tab.active {
  border-color: var(--color-primary); background: #F8E8E0;
  box-shadow: 0 0 0 2px rgba(196,106,74,.14);
}
.face-tab-color { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border-2); }
.face-tab > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.face-tab strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.face-tab small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-3); font-size: .68rem; }
.edit-method-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.edit-method-btn {
  padding: 11px 10px; border-radius: var(--r-sm); border: 1px solid var(--color-border-2);
  background: var(--color-surface); color: var(--color-text); font-family: var(--font);
  font-size: .8rem; font-weight: 800; cursor: pointer;
}
.edit-method-btn:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.edit-method-btn.active { border-color: var(--color-primary); background: var(--color-primary); color: #fff; box-shadow: 0 4px 12px rgba(196,106,74,.22); }
.edit-controls {
  padding: var(--s4); margin-bottom: var(--s5); border-radius: var(--r-md);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
}
.whole-face-controls {
  padding: var(--s4); margin-bottom: var(--s5); border-radius: var(--r-md);
  background: var(--color-surface-2); border: 1px solid var(--color-border);
}
.whole-face-controls p { margin: 3px 0 var(--s3); color: var(--color-text-2); font-size: .78rem; }
.face-color-palette { display: flex; flex-wrap: wrap; gap: 7px; }
.face-color-preset {
  width: 30px; height: 30px; padding: 0; border-radius: 9px; border: 2px solid transparent;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: transform var(--dur) var(--ease);
}
.face-color-preset:hover { transform: scale(1.1); }
.face-color-preset.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); }
.custom-face-color { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s3); font-size: .8rem; font-weight: 700; }
.custom-face-color input { width: 52px; height: 34px; border: 1px solid var(--color-border-2); border-radius: var(--r-sm); padding: 3px; background: var(--color-surface); }
.selected-face-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin: 2px 0 var(--s3); }
.selected-face-heading > div > span { color: var(--color-primary-dark); font-size: .68rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.selected-face-heading h3 { margin-top: 2px; font-size: 1.08rem; }
.selected-face-heading > span { color: var(--color-text-3); font-size: .72rem; font-weight: 700; text-align: right; }
.panel-editor { display: grid; grid-template-columns: 1fr; }
.panel-editor .panel-card {
  width: 100%; min-width: 0; animation: none; transform: none;
  transition: box-shadow var(--dur) var(--ease);
}
.panel-editor .panel-card:hover { transform: none; }
.panel-editor .editable-panel {
  width: 100%; height: auto; image-rendering: pixelated; touch-action: none;
}
.advanced-edit { margin-top: var(--s4); border-top: 1px solid var(--color-border); padding-top: var(--s3); }
.advanced-edit summary { color: var(--color-text-2); font-size: .76rem; font-weight: 700; cursor: pointer; }
.printable-panels-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s3); }
.printable-panels-heading h3 { font-size: 1.05rem; }
.printable-panels-heading p { color: var(--color-text-2); font-size: .78rem; text-align: right; }
.editable-panels-heading {
  display: flex; align-items: end; justify-content: space-between; gap: var(--s4);
  margin-bottom: var(--s3);
}
.editable-panels-heading h3 { font-size: 1.04rem; }
.editable-panels-heading p { color: var(--color-text-2); font-size: .8rem; text-align: right; }
.edit-panel .panels { align-items: flex-start; }

.edit-hint { font-size: .84rem; color: var(--color-text-2); display: block; margin-bottom: var(--s3); }
.tool-buttons { display: flex; gap: 8px; margin-bottom: var(--s3); flex-wrap: wrap; }
.tool-btn {
  padding: 8px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--color-border-2); background: var(--color-surface);
  font-family: var(--font); font-size: .84rem; font-weight: 700; color: var(--color-text);
  cursor: pointer; transition: all var(--dur) var(--ease);
}
.tool-btn:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-1px); }
.tool-btn.active {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(196,106,74,.3);
}
.tool-btn:active { transform: translateY(0) scale(.98); }

.palette { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: var(--s2); }
.palette-swatch {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; padding: 0; transition: transform var(--dur) var(--ease);
  box-shadow: var(--shadow-sm);
}
.palette-swatch:hover { transform: scale(1.15); }
.palette-swatch.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
}
.palette-custom {
  width: 34px; height: 30px; border: 1px solid var(--color-border-2);
  border-radius: var(--r-sm); padding: 2px; cursor: pointer; background: var(--color-surface);
}

.replace-row { display: flex; align-items: center; gap: 8px; margin-top: var(--s3); font-size: .84rem; flex-wrap: wrap; }
.replace-row input[type="color"] { width: 34px; height: 30px; border: 1px solid var(--color-border-2); border-radius: var(--r-sm); padding: 2px; }
.replace-label { color: var(--color-text-2); font-weight: 600; }

/* ===================== Upload (image mode) ===================== */
.upload-area {
  border: 2px dashed var(--color-border-2); border-radius: var(--r-lg);
  padding: 34px 20px; text-align: center;
  background: var(--color-surface-2); cursor: pointer; margin-bottom: var(--s4);
  transition: all var(--dur) var(--ease);
}
.upload-area:hover, .upload-area.dragover {
  border-color: var(--color-primary); background: rgba(196,106,74,.06);
}
.upload-area p { margin: 4px 0; }
.upload-link { color: var(--color-primary); font-weight: 800; text-decoration: underline; }
.upload-hint { font-size: .78rem; color: var(--color-text-3); }
.settings-hint {
  margin: 0 0 var(--s3); padding: 8px 10px; border-radius: var(--r-sm);
  background: #FFF9E6; color: #80651B; font-size: .78rem; font-weight: 700;
}
.settings-hint.ready { background: #EDF7F1; color: var(--color-accent-dark); }

/* ===================== Buttons & actions ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--color-primary); color: #fff; border: none;
  padding: 13px 28px; border-radius: var(--r-sm);
  font-family: var(--font); font-size: .95rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 14px rgba(196,106,74,.3);
  transition: all var(--dur) var(--ease);
  position: relative; overflow: hidden;
}
.btn:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(196,106,74,.38); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
.btn.secondary {
  background: var(--color-surface-2); color: var(--color-text);
  border: 1px solid var(--color-border-2); box-shadow: var(--shadow-sm);
}
.btn.secondary:hover { background: var(--color-surface-3); border-color: var(--color-primary); color: var(--color-primary); }
.btn.compact { width: 100%; margin-top: var(--s4); padding: 11px 20px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--s4); }

.btn.loading { pointer-events: none; opacity: .75; }
.btn.loading::after {
  content: ''; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== Output panels ===================== */
.output-panel {
  margin-top: var(--s5); padding: var(--s5); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}
.output-heading { display: flex; justify-content: space-between; gap: var(--s5); align-items: flex-end; }
.output-heading h2 { font-size: 1.4rem; margin-top: 4px; }
.output-heading p { max-width: 360px; color: var(--color-text-2); font-size: .86rem; text-align: right; }
.output-actions { padding-top: var(--s2); border-top: 1px solid var(--color-border); margin-top: var(--s5); }
.output { margin-top: var(--s6); }
.output > h2 { font-size: 1.2rem; margin-bottom: var(--s4); color: var(--color-text); }
.panels { display: flex; flex-wrap: wrap; gap: var(--s4); }
.panel-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-md); padding: var(--s3);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.panel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.panel-title {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; font-size: .88rem; font-weight: 700; color: var(--color-text);
}
.panel-role { font-size: .72rem; padding: 2px 10px; border-radius: var(--r-pill); color: #fff; background: var(--color-text-3); }
.panel-card canvas {
  display: block; max-width: 100%; height: auto;
  border: 1px dashed var(--color-border-2); border-radius: var(--r-sm);
  cursor: crosshair;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s5); }
.materials-list { list-style: none; }
.materials-list li {
  display: flex; align-items: center; gap: 8px; padding: 5px 0;
  border-bottom: 1px dashed var(--color-border); font-size: .9rem;
}
.swatch { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: 1px solid var(--color-border-2); }
.card ol { padding-left: 20px; }
.card ol li { margin-bottom: 6px; font-size: .9rem; }

.board-info {
  font-size: .8rem; color: var(--color-warn); background: #FFF9E6;
  border: 1px dashed #E6C94C; border-radius: var(--r-sm); padding: 7px 10px; margin-bottom: 10px;
}
.buy-note {
  margin-top: var(--s3); padding: 10px 12px; background: #FFF9E6;
  border: 1px dashed #E6C94C; border-radius: var(--r-sm); font-size: .86rem;
}
.buy-note a { color: #8A6D00; font-weight: 700; }
.buy-note small { display: block; margin-top: 4px; color: #8A7650; line-height: 1.4; }

.lib-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.library-bar { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.lib-item { display: flex; align-items: center; gap: 8px; font-size: .8rem; background: var(--color-surface-2); border-radius: var(--r-sm); padding: 4px 8px; }
.lib-item span { flex: 1; }
.lib-item .tool-btn { padding: 2px 8px; font-size: .75rem; }
.lib-empty { font-size: .78rem; color: var(--color-text-3); }

/* ===================== Status & toast ===================== */
.status-bar {
  padding: 9px 14px; border-radius: var(--r-sm); margin-bottom: var(--s3);
  font-size: .84rem; font-weight: 700;
}
.status-ok { background: #E8F5E9; color: var(--color-accent-dark); border: 1px solid #A5D6A7; }
.status-error { background: #FDECEA; color: #B71C1C; border: 1px solid #EF9A9A; white-space: pre-wrap; word-break: break-all; }

/* ===================== SEO content ===================== */
.seo-content { margin-top: var(--s10); padding-bottom: var(--s8); }
.content-article { max-width: 880px; margin-left: auto; margin-right: auto; }
.content-kicker {
  display: inline-flex; padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--color-surface-2); color: var(--color-primary-dark);
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.seo-content h2 { color: var(--color-text); margin: var(--s6) 0 var(--s3); font-size: 1.35rem; }
.seo-content h3 { color: var(--color-text); margin: var(--s4) 0 var(--s2); font-size: 1.08rem; }
.seo-content p { margin-bottom: var(--s4); color: var(--color-text-2); }
.inline-policy-action {
  border: 0; padding: 0; background: transparent; color: var(--color-primary);
  font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer;
}
.seo-content ul, .seo-content ol { color: var(--color-text-2); padding-left: 22px; margin-bottom: var(--s4); }
.shape-links { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--s4) 0; }
.shape-links a {
  background: var(--color-surface-2); color: var(--color-primary-dark);
  padding: 7px 15px; border-radius: var(--r-pill); font-size: .87rem; font-weight: 600;
  border: 1px solid var(--color-border);
  transition: all var(--dur) var(--ease);
}
.shape-links a:hover {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
  transform: translateY(-1px); box-shadow: var(--shadow-sm);
}
.size-table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: .9rem; }
.size-table th, .size-table td { border: 1px solid var(--color-border); padding: 9px 12px; text-align: left; }
.size-table th { background: var(--color-surface-2); color: var(--color-text); font-weight: 700; }
.size-table tr:nth-child(even) { background: var(--color-bg); }
.related-guides { font-size: .9rem; }
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin: var(--s5) 0 var(--s8); }
.benefit-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--r-lg); padding: var(--s5); box-shadow: var(--shadow-sm);
}
.benefit-card > span { color: var(--color-primary); font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.benefit-card h3 { margin-top: var(--s3); }
.benefit-card p { margin-bottom: 0; font-size: .88rem; }
.guide-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin: var(--s5) 0 var(--s8); }
.guide-steps > div { padding: var(--s4); border-left: 2px solid var(--color-border-2); }
.guide-steps strong {
  display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--color-primary); color: #fff; font-size: .75rem;
}
.guide-steps h3 { margin: var(--s3) 0 5px; font-size: .96rem; }
.guide-steps p { margin: 0; font-size: .82rem; }
.resource-list { columns: 2; column-gap: var(--s6); }
.resource-list li { break-inside: avoid; margin-bottom: 6px; }
.faq-list { border-top: 1px solid var(--color-border); margin-top: var(--s4); }
.faq-list details { border-bottom: 1px solid var(--color-border); }
.faq-list summary { list-style: none; cursor: pointer; padding: var(--s4) 36px var(--s4) 0; font-weight: 800; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; position: absolute; right: 4px; color: var(--color-primary); font-size: 1.25rem; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list p { padding: 0 var(--s6) var(--s4) 0; }
.converter-shell { max-width: 880px; margin: var(--s6) auto 0; padding: var(--s5); }
.converter-shell > .controls { grid-template-columns: repeat(2, 1fr); }

/* ===================== Product effect showcase ===================== */
.effect-showcase {
  margin: var(--s10) 0; padding: var(--s10) 0;
  background: var(--color-accent-dark); color: #F8F1E8;
  overflow: hidden;
}
.effect-grid {
  display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  align-items: center; gap: var(--s8);
}
.effect-copy .content-kicker { color: #F2B28D; }
.effect-copy h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.04; margin: var(--s3) 0 var(--s4); }
.effect-copy > p { color: #C7DDCD; max-width: 590px; }
.effect-steps { list-style: none; display: grid; gap: var(--s3); margin-top: var(--s5); padding: 0; }
.effect-steps li { display: flex; align-items: flex-start; gap: var(--s3); }
.effect-steps li > span {
  width: 27px; height: 27px; flex: 0 0 27px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--color-primary); color: #fff; font-size: .75rem; font-weight: 800;
}
.effect-steps strong { display: block; color: #fff; font-size: .9rem; }
.effect-steps small { display: block; margin-top: 2px; color: #AFC9B6; font-size: .78rem; line-height: 1.5; }
.effect-visual { margin: 0; }
.effect-visual img {
  display: block; width: 100%; height: auto; border-radius: var(--r-xl);
  box-shadow: 0 28px 70px rgba(18,43,30,.35); border: 1px solid rgba(255,255,255,.14);
}
.effect-visual figcaption { color: #94B49D; font-size: .72rem; margin-top: 10px; }

/* ===================== Footer ===================== */
.site-footer {
  background: var(--color-accent-dark); color: #B8D8C0;
  padding: var(--s8) 0 var(--s5); margin-top: var(--s8); font-size: .85rem;
}
.site-footer a { color: #D8F3DC; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s8); }
.footer-brand p { max-width: 420px; margin-top: var(--s3); line-height: 1.65; }
.footer-logo { color: #fff !important; width: fit-content; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.footer-links strong { color: #fff; margin-bottom: 4px; font-size: .82rem; }
.footer-links a { color: #B8D8C0; }
.footer-links a:hover { color: #fff; }
.footer-choice {
  border: 0; padding: 0; background: transparent; color: #B8D8C0;
  font: inherit; cursor: pointer; text-align: left;
}
.footer-choice:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: var(--s4); margin-top: var(--s6);
  padding-top: var(--s4); border-top: 1px solid rgba(216,243,220,.16); color: #8FB79A;
  font-size: .76rem;
}

.contact-form {
  display: grid; gap: 10px; max-width: 640px; margin-top: 24px; padding: 24px;
  border: 1px solid var(--color-border); border-radius: 18px; background: #fff;
}
.contact-form label { font-weight: 700; }
.contact-form input, .contact-form textarea {
  box-sizing: border-box; width: 100%; padding: 12px 14px;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: #fff; color: var(--color-text); font: inherit;
}
.contact-form textarea { resize: vertical; }
.contact-form button {
  justify-self: start; margin-top: 6px; padding: 12px 18px; border: 0;
  border-radius: 10px; background: var(--color-accent); color: #fff;
  font: inherit; font-weight: 800; cursor: pointer;
}
.contact-form button:disabled { opacity: .65; cursor: wait; }
.contact-honeypot {
  position: absolute !important; left: -10000px !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}
.contact-status { min-height: 1.5em; margin: 0; color: var(--color-text-2); }

/* ===================== Launch offer ===================== */
.launch-offer {
  margin: var(--s8) 0 0;
  padding: var(--s6) 0;
  background: #173D2B;
  color: #fff;
}
.launch-offer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr);
  align-items: center;
  gap: var(--s7);
}
.launch-offer h2 { margin: 5px 0 8px; color: #fff; }
.launch-offer p, .launch-offer small { color: #CBE4D2; }
.launch-offer .content-kicker { color: #FFB58C; }
.launch-offer-actions { display: flex; align-items: stretch; flex-direction: column; gap: 8px; text-align: center; }
.launch-offer-actions .btn { background: #F47745; }
.offer-summary {
  display: flex; justify-content: space-between; gap: var(--s4); margin: 0 0 var(--s6);
  padding: var(--s5); border-radius: var(--r-lg); background: #173D2B; color: #fff;
}
.offer-summary strong { font-size: 1.2rem; }
.offer-summary span { color: #CBE4D2; }
.offer-steps { display: grid; gap: var(--s3); padding-left: 1.25rem; }
.offer-steps li { padding-left: 6px; color: var(--color-text-2); }
.pack-preview { margin: 0 0 var(--s5); }
.pack-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.pack-preview figcaption { margin-top: 9px; color: var(--color-text-3); font-size: .78rem; text-align: center; }
.pack-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); margin: var(--s5) 0 var(--s7); }
.pack-stats div { display: grid; gap: 3px; padding: var(--s4); border: 1px solid var(--color-border); border-radius: var(--r-lg); background: var(--color-surface); text-align: center; }
.pack-stats strong { color: var(--color-primary-dark); font-size: 1.7rem; line-height: 1; }
.pack-stats span { color: var(--color-text-2); font-size: .76rem; }
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin: 0 0 var(--s7); }
.pack-item { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: var(--s3); border: 1px solid var(--color-border); border-radius: var(--r-md); background: var(--color-surface); }
.pack-item > span { grid-row: 1 / 3; align-self: center; color: var(--color-primary); font-size: .72rem; font-weight: 800; }
.pack-item strong { font-size: .88rem; }
.pack-item small { color: var(--color-text-3); font-size: .7rem; }
.checkout-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); align-items: center; gap: var(--s6); margin: var(--s7) 0; padding: var(--s6); border-radius: var(--r-xl); background: #173D2B; color: #fff; box-shadow: var(--shadow-lg); }
.checkout-card h2 { margin: 7px 0; color: #fff; }
.checkout-card p { margin: 0; color: #CBE4D2; }
.checkout-card .content-kicker { color: #FFB58C; }
.checkout-actions { display: grid; gap: 9px; text-align: center; }
.checkout-actions .btn { width: 100%; background: #F47745; }
.checkout-actions .btn.disabled { pointer-events: none; background: #78897E; color: #E8EFEA; box-shadow: none; }
.checkout-status { min-height: 2.4em; font-size: .72rem; }
.checkout-status.blocked { color: #FFE2D5; }
.delivery-shell { min-height: calc(100vh - 170px); display: grid; place-items: center; padding-top: var(--s7); padding-bottom: var(--s7); }
.delivery-card { width: min(680px, 100%); padding: clamp(28px, 6vw, 56px); border: 1px solid var(--line); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-lg); text-align: center; }
.delivery-card h1 { margin: var(--s3) 0; }
.delivery-message { color: var(--muted); font-size: 1.05rem; }
.delivery-progress { width: min(360px, 85%); height: 8px; margin: var(--s5) auto; overflow: hidden; border-radius: 999px; background: #E9DED1; }
.delivery-progress span { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--accent); animation: delivery-wait 1.2s ease-in-out infinite alternate; }
.delivery-card .btn { display: inline-flex; margin: var(--s4) auto; }
.delivery-note { margin-top: var(--s4); color: var(--muted); font-size: .82rem; }
.delivery-back { display: inline-block; margin-top: var(--s3); color: var(--ink); font-weight: 700; }
@keyframes delivery-wait { from { transform: translateX(-20%); } to { transform: translateX(170%); } }

/* ===================== Privacy choices ===================== */
.consent-banner {
  position: fixed; left: 50%; bottom: 20px; z-index: 1000; transform: translateX(-50%);
  width: min(920px, calc(100% - 32px)); display: flex; align-items: center;
  justify-content: space-between; gap: var(--s5); padding: var(--s4) var(--s5);
  border: 1px solid var(--color-border-2); border-radius: var(--r-lg);
  background: rgba(255,255,255,.97); box-shadow: var(--shadow-xl);
  backdrop-filter: blur(16px);
}
.consent-banner[hidden] { display: none; }
.consent-content { max-width: 650px; }
.consent-content strong { display: block; margin-bottom: 3px; font-size: .92rem; }
.consent-content p { color: var(--color-text-2); font-size: .78rem; line-height: 1.55; }
.consent-content a { font-weight: 800; text-decoration: underline; }
.consent-actions { display: flex; gap: 8px; flex-shrink: 0; }
.consent-btn {
  border: 1px solid var(--color-primary); border-radius: var(--r-sm); padding: 9px 14px;
  background: var(--color-primary); color: #fff; font-weight: 800; font-size: .78rem; cursor: pointer;
}
.consent-btn.secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-2); }
.consent-btn:hover { filter: brightness(.96); }

/* ===================== Motion: pattern reveal ===================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel-card, .card { animation: fadeUp 320ms var(--ease) backwards; }
.panel-card:nth-child(2) { animation-delay: 40ms; }
.panel-card:nth-child(3) { animation-delay: 80ms; }
.panel-card:nth-child(4) { animation-delay: 120ms; }
.panel-card:nth-child(5) { animation-delay: 160ms; }
.panel-card:nth-child(6) { animation-delay: 200ms; }

@keyframes popIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
.preview3d { animation: popIn 400ms var(--ease); }

/* ===================== Responsive ===================== */
@media (max-width: 1024px) {
  .workspace { grid-template-columns: 1fr; }
  .preview-card { position: static; }
  .preview3d { height: 340px; }
  .effect-grid { grid-template-columns: 1fr; }
  .effect-copy { max-width: 720px; }
}
@media (max-width: 700px) {
  .container { padding: 0 var(--s4); }
  .hero { padding: var(--s8) 0 var(--s6); }
  .preview3d { height: 280px; }
  .grid-2 { grid-template-columns: 1fr; }
  .site-header .container { padding-top: 10px; padding-bottom: 10px; }
  .brand { font-size: .96rem; }
  .site-nav { gap: 10px; }
  .site-nav a { font-size: .8rem; }
  .site-nav a:nth-of-type(2), .site-nav a:nth-of-type(3) { display: none; }
  .mode-btn { padding: 9px 14px; font-size: .85rem; }
  .mode-switch { width: 100%; max-width: 390px; }
  .mode-btn { flex: 1; }
  .btn { padding: 12px 20px; }
  .hero-proof { gap: var(--s2); flex-wrap: wrap; }
  .preview-heading { align-items: center; }
  .preview-heading h2 { font-size: 1.08rem; }
  .preview-tips span:nth-child(2), .preview-tips span:nth-child(3) { display: none; }
  .image-controls, .converter-shell > .controls { grid-template-columns: 1fr; }
  .image-controls .control:first-child, .image-controls .checkbox-control { grid-column: auto; }
  .output-panel { padding: var(--s4); border-radius: var(--r-lg); }
  .output-heading { align-items: flex-start; flex-direction: column; gap: var(--s2); }
  .output-heading p { text-align: left; }
  .output-actions .btn { width: 100%; }
  .editable-panels-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .editable-panels-heading p { text-align: left; }
  .edit-panel-header { align-items: flex-start; flex-wrap: wrap; }
  .edit-panel-header .summary-note { margin-left: 40px; margin-top: -8px; }
  .face-selector, .edit-method-switch { grid-template-columns: 1fr; }
  .selected-face-heading, .printable-panels-heading { align-items: flex-start; flex-direction: column; }
  .selected-face-heading > span, .printable-panels-heading p { text-align: left; }
  .effect-showcase { margin: var(--s8) 0; padding: var(--s8) 0; }
  .benefit-grid, .guide-steps { grid-template-columns: 1fr; }
  .guide-steps > div { border-left: 0; border-top: 2px solid var(--color-border); }
  .resource-list { columns: 1; }
  .size-table { display: block; overflow-x: auto; white-space: nowrap; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .launch-offer-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .offer-summary { align-items: flex-start; flex-direction: column; }
  .pack-stats, .pack-grid { grid-template-columns: repeat(2, 1fr); }
  .checkout-card { grid-template-columns: 1fr; padding: var(--s5); }
  .footer-bottom { flex-direction: column; }
  .consent-banner { align-items: stretch; flex-direction: column; bottom: 10px; gap: var(--s3); padding: var(--s4); }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===================== Print ===================== */
@media print {
  .site-header, .site-footer, .hero, .controls, .btn-row, .preview-card,
  .side-col, .mode-switch, .template-section, .upload-area,
  .edit-panel-header, .edit-controls, .replace-row, .lib-actions, .library-bar, .board-info,
  .buy-note, .status-bar, .lang-toggle, .effect-showcase, .seo-content { display: none !important; }
  .consent-banner { display: none !important; }
  body { background: #fff; }
  .workspace { display: block; }
  .edit-panel { margin: 0; border: 0; box-shadow: none; }
  .edit-panel-body { padding: 0; border: 0; }
  .panel-card { break-inside: avoid; border: none; padding: 6px; box-shadow: none; animation: none; }
  .panels { gap: 10px; }
  .grid-2 { margin-top: 10px; display: block; }
}