:root {
--bg: #faf4ec;
--bg-warm: #f5ede0;
--surface: #ffffff;
--surface-2: #f3ece1;
--ink: #1a1916;
--ink-soft: #4a4640;
--ink-muted: #8a8478;
--line: #e6dccb;
--line-soft: #efe7d6;
--accent: #1a1916;
--accent-warm: #b8835a;
--accent-soft: #d9b89a;
--select: #e8a89a;
--select-strong: #d97777;
--select-glow: rgba(232, 168, 154, 0.25);
--snap: #ec4899;
--gold: #c8975a;
--serif: 'Frank Ruhl Libre', 'Fraunces', Georgia, serif;
--display: 'Suez One', 'Fraunces', Georgia, serif;
--sans: 'Assistant', 'Heebo', -apple-system, sans-serif;
--shadow-sm: 0 1px 2px rgba(26,25,22,0.06);
--shadow-md: 0 4px 12px rgba(26,25,22,0.08);
--shadow-lg: 0 12px 32px rgba(26,25,22,0.12);
--shadow-xl: 0 24px 48px rgba(26,25,22,0.15);
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-xl: 20px;
} .makeart-customizer-overlay * { box-sizing: border-box; }
.makeart-customizer-overlay {
font-family: var(--sans);
background: var(--bg);
color: var(--ink);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
user-select: none;
overscroll-behavior: none;
} .topbar {
position: fixed;
top: 0; left: 0; right: 0;
height: 60px;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid var(--line-soft);
z-index: 100;
display: flex;
align-items: center;
padding: 0 20px;
}
.topbar-left, .topbar-right {
flex: 1;
display: flex;
align-items: center;
gap: 6px;
}
.topbar-right { justify-content: flex-end; }
.topbar-left { justify-content: flex-start; }
.topbar-logo {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.topbar-logo-mark {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--gold), #8b6240);
display: grid; place-items: center;
color: #fff;
font-family: var(--display);
font-size: 17px;
box-shadow: 0 3px 10px rgba(184,131,90,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
position: relative;
}
.topbar-logo-mark::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
border: 1px solid var(--gold);
opacity: 0.25;
}
.topbar-logo-text {
display: flex;
flex-direction: column;
line-height: 1.1;
}
.topbar-logo-name {
font-family: var(--display);
font-weight: 400;
font-size: 18px;
letter-spacing: -0.3px;
color: var(--ink);
}
.topbar-logo-sub {
font-family: var(--sans);
font-size: 10px;
color: var(--accent-warm);
letter-spacing: 1.5px;
font-weight: 600;
}
.topbar-btn {
width: 38px; height: 38px;
border-radius: var(--radius-md);
background: transparent;
border: 1px solid transparent;
color: var(--ink-soft);
cursor: pointer;
display: grid; place-items: center;
transition: all .18s ease;
position: relative;
}
.topbar-btn:hover:not(:disabled) {
background: var(--bg-warm);
color: var(--ink);
}
.topbar-btn:active:not(:disabled) { transform: scale(0.94); }
.topbar-btn:disabled { opacity: .3; cursor: not-allowed; }
.topbar-btn svg { width: 18px; height: 18px; }
.topbar-btn.close {
background: var(--surface);
border-color: var(--line);
}
.topbar-btn.close:hover {
background: #fff5f5;
color: #c44;
border-color: #f0c4c4;
}
.topbar-divider {
width: 1px; height: 24px;
background: var(--line);
margin: 0 6px;
}
.crumbs {
font-size: 13px; color: var(--ink-muted);
display: flex; align-items: center; gap: 8px;
margin-right: 14px;
}
.crumbs strong {
color: var(--ink);
font-weight: 600;
font-family: var(--serif);
font-size: 14px;
}
.crumbs .sep { color: var(--line); } .app {
display: grid;
grid-template-columns: 84px 1fr 320px;
height: 100vh;
padding-top: 60px;
transition: grid-template-columns .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.app.panel-open { grid-template-columns: 84px 300px 1fr 320px;
} .rail {
background: linear-gradient(180deg, #1a1916 0%, #2a2724 100%);
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 0;
gap: 6px;
position: relative;
}
.rail::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(184,131,90,0.15), transparent 60%);
pointer-events: none;
}
.rail-tabs { display: flex; flex-direction: column; gap: 6px; width: 100%; position: relative; z-index: 1; }
.rail-tab {
background: none; border: none;
color: rgba(255,255,255,0.55);
padding: 16px 8px;
cursor: pointer;
display: flex; flex-direction: column;
align-items: center; gap: 7px;
font-family: var(--sans);
font-size: 11px; font-weight: 600;
transition: all .2s;
position: relative;
}
.rail-tab svg { width: 22px; height: 22px; transition: transform .2s ease; }
.rail-tab:hover { color: rgba(255,255,255,0.9); }
.rail-tab:hover svg { transform: scale(1.12); }
.rail-tab.active { color: #fff; }
.rail-tab.active::before {
content: '';
position: absolute;
right: 0; top: 12px; bottom: 12px;
width: 3px;
background: linear-gradient(180deg, var(--gold), var(--accent-warm));
border-radius: 3px 0 0 3px;
box-shadow: 0 0 8px rgba(200,151,90,0.4);
}
.rail-spacer { flex: 1; }
.rail-bottom-btn {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.7);
width: 44px; height: 44px;
border-radius: var(--radius-md);
cursor: pointer; display: grid; place-items: center;
margin: 4px 0; transition: all .2s;
position: relative; z-index: 1;
}
.rail-bottom-btn:hover {
background: rgba(255,255,255,0.12);
color: #fff;
border-color: rgba(255,255,255,0.15);
}
.rail-bottom-btn svg { width: 18px; height: 18px; } .panel {
background: var(--surface);
border-left: 1px solid var(--line);
display: flex; flex-direction: column;
overflow: hidden; position: relative;
box-shadow: 4px 0 24px rgba(26,25,22,0.04);
}
.panel-close {
position: absolute; top: 14px; left: 14px;
background: var(--bg);
border: 1px solid var(--line-soft);
color: var(--ink-muted);
cursor: pointer;
width: 30px; height: 30px;
border-radius: var(--radius-sm);
display: grid; place-items: center;
transition: all .15s;
z-index: 5;
}
.panel-close:hover {
background: var(--ink);
color: #fff;
border-color: var(--ink);
}
.panel-close svg { width: 14px; height: 14px; }
.panel-header {
padding: 20px 20px 14px;
border-bottom: 1px solid var(--line-soft);
background: linear-gradient(180deg, var(--bg-warm) 0%, var(--surface) 100%);
}
.panel-title {
font-family: var(--display);
font-weight: 400;
font-size: 22px;
letter-spacing: -0.4px;
line-height: 1.1;
}
.panel-sub {
color: var(--ink-muted);
font-size: 12px;
margin-top: 4px;
}
.panel-body {
flex: 1;
overflow-y: auto; padding: 16px 18px;
-webkit-overflow-scrolling: touch;
}
.panel-body::-webkit-scrollbar { width: 6px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }
.field-label {
font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1.4px; color: var(--ink-muted);
margin-bottom: 10px; display: block;
}
.field + .field { margin-top: 22px; } .el-actions {
display: flex; gap: 8px;
padding: 14px 22px;
border-bottom: 1px solid var(--line-soft);
background: var(--bg-warm);
}
.el-action {
flex: 1;
display: flex; align-items: center; justify-content: center; gap: 8px;
background: var(--surface);
border: 1px solid var(--line);
cursor: pointer;
color: var(--ink); font-size: 13px; font-weight: 500;
padding: 10px 12px;
border-radius: var(--radius-md);
transition: all .15s;
}
.el-action:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
border-color: var(--ink-soft);
}
.el-action svg { width: 16px; height: 16px; color: var(--ink-soft); }
.el-action:hover svg { color: var(--ink); }
.el-action.remove:hover {
border-color: #e8a8a8;
background: #fff5f5;
color: #c44;
}
.el-action.remove:hover svg { color: #c44; } .prop-row {
display: grid; grid-template-columns: 70px 1fr;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--line-soft);
}
.prop-row:last-child { border-bottom: none; }
.prop-label {
font-size: 13px;
color: var(--ink-soft);
font-weight: 500;
}
.prop-content { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.font-display {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface);
cursor: pointer;
flex: 1;
transition: all .15s;
min-height: 44px;
}
.font-display:hover { border-color: var(--ink-soft); background: var(--bg); }
.font-display-preview {
width: 32px; height: 32px;
background: var(--bg-warm);
border-radius: var(--radius-sm);
display: grid; place-items: center;
font-size: 18px;
font-weight: 500;
flex-shrink: 0;
}
.font-display-name {
flex: 1;
color: var(--ink);
font-size: 13px;
font-weight: 500;
}
.color-display {
width: 40px; height: 40px;
border-radius: var(--radius-sm);
border: 2px solid var(--surface);
cursor: pointer;
transition: all .15s;
box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
}
.color-display:hover { transform: scale(1.05); }
.seg-btn {
width: 40px; height: 40px;
border: 1px solid var(--line);
background: var(--surface);
border-radius: var(--radius-sm);
cursor: pointer;
display: grid; place-items: center;
color: var(--ink-soft);
transition: all .15s;
font-family: var(--serif);
font-size: 17px;
font-weight: 600;
}
.seg-btn:hover { background: var(--bg); border-color: var(--ink-soft); }
.seg-btn:active { transform: scale(0.95); }
.seg-btn.active {
background: var(--ink); color: #fff; border-color: var(--ink);
box-shadow: 0 2px 8px rgba(26,25,22,0.2);
}
.seg-btn.active svg { color: #fff; }
.seg-btn svg { width: 16px; height: 16px; }
.seg-btn.pink-active.active {
background: var(--surface);
color: var(--select-strong);
border-color: var(--select-strong);
box-shadow: 0 0 0 3px var(--select-glow);
}
.seg-btn.pink-active.active svg { color: var(--select-strong); } .range-wrap {
flex: 1;
position: relative;
padding: 12px 4px;
min-width: 120px;
}
.range-input {
width: 100%;
-webkit-appearance: none;
appearance: none;
height: 3px;
background: var(--line);
border-radius: 3px;
outline: none;
}
.range-input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--surface);
border: 1.5px solid var(--ink);
cursor: pointer;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
transition: transform .15s;
}
.range-input::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range-input::-moz-range-thumb {
width: 20px; height: 20px;
border-radius: 50%;
background: var(--surface);
border: 1.5px solid var(--ink);
cursor: pointer;
}
.range-ticks {
position: absolute;
inset: 12px 4px auto 4px;
height: 3px;
pointer-events: none;
}
.range-tick {
position: absolute;
top: -5px;
width: 1.5px; height: 13px;
background: var(--ink-soft);
border-radius: 2px;
opacity: 0.3;
}
.move-grid { display: grid; grid-template-columns: repeat(4, 40px); gap: 6px; }
.size-grid { display: grid; grid-template-columns: 40px 40px; gap: 6px; }
.mirror-grid { display: grid; grid-template-columns: 40px 40px; gap: 6px; } .subtabs-wrap {
display: flex;
border-bottom: 1px solid var(--line-soft);
background: var(--bg-warm);
}
.subtab {
flex: 1;
padding: 14px 8px;
background: none;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
color: var(--ink-soft);
font-size: 12px;
font-weight: 600;
border-bottom: 2px solid transparent;
transition: all .15s;
position: relative;
}
.subtab:hover { color: var(--ink); }
.subtab.active {
color: var(--select-strong);
border-bottom-color: var(--select-strong);
background: var(--surface);
}
.subtab svg { width: 22px; height: 22px; } .text-input-wrap {
position: relative;
}
.text-input {
width: 100%; padding: 14px 16px;
padding-left: 64px;
border: 1.5px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface);
font-family: var(--sans);
font-size: 15px;
color: var(--ink);
transition: all .15s;
}
.text-input:focus {
outline: none;
border-color: var(--ink);
box-shadow: 0 0 0 3px rgba(26,25,22,0.05);
}
.text-input::placeholder { color: var(--ink-muted); }
.text-counter {
position: absolute;
left: 12px; top: 50%; transform: translateY(-50%);
background: var(--bg-warm);
border-radius: 100px;
padding: 4px 10px;
font-size: 11px;
color: var(--ink-muted);
font-weight: 600;
pointer-events: none;
transition: all .15s;
}
.text-counter.warn {
color: #c44;
background: #fee;
} .upload-zone {
border: 2px dashed var(--line);
border-radius: var(--radius-lg);
padding: 36px 18px;
text-align: center;
cursor: pointer;
transition: all .25s;
background: var(--bg);
display: block;
position: relative;
overflow: hidden;
}
.upload-zone::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, var(--surface-2), transparent 70%);
opacity: 0;
transition: opacity .3s;
}
.upload-zone:hover {
border-color: var(--accent-warm);
transform: translateY(-1px);
}
.upload-zone:hover::before { opacity: 1; }
.upload-zone > * { position: relative; }
.upload-zone svg {
width: 36px; height: 36px;
color: var(--accent-warm);
margin-bottom: 10px;
}
.upload-zone-title {
font-family: var(--serif);
font-size: 17px;
font-weight: 600;
color: var(--ink);
}
.upload-zone-sub {
color: var(--ink-muted);
font-size: 12px;
margin-top: 4px;
} .toggle-row {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px;
background: var(--bg);
border-radius: var(--radius-md);
border: 1px solid var(--line-soft);
transition: all .15s;
}
.toggle-row:hover { border-color: var(--line); }
.toggle-info { display: flex; flex-direction: column; gap: 2px; }
.toggle-name { font-weight: 600; font-size: 13px; color: var(--ink); }
.toggle-desc { color: var(--ink-muted); font-size: 11px; }
.toggle {
width: 42px; height: 24px;
border-radius: 12px;
background: var(--line);
position: relative;
cursor: pointer;
transition: background .2s;
flex-shrink: 0;
}
.toggle::after {
content: '';
position: absolute;
width: 20px; height: 20px;
border-radius: 50%;
background: #fff;
top: 2px; right: 2px;
transition: transform .2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.toggle.on { background: var(--ink); }
.toggle.on::after { transform: translateX(-18px); } .font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.font-chip {
padding: 16px 10px;
border: 1.5px solid var(--line);
border-radius: var(--radius-md);
background: var(--surface);
cursor: pointer;
transition: all .15s;
text-align: center;
font-size: 17px;
color: var(--ink);
}
.font-chip:hover {
border-color: var(--ink-soft);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.font-chip.active {
border-color: var(--ink);
background: var(--bg-warm);
box-shadow: 0 0 0 3px rgba(26,25,22,0.06);
}
.font-chip-name {
font-size: 10px;
color: var(--ink-muted);
margin-top: 4px;
font-family: var(--sans);
display: block;
font-weight: 600;
letter-spacing: 0.3px;
} .swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.swatch {
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: transform .15s;
box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,0.08);
}
.swatch:hover { transform: scale(1.12); }
.swatch.active {
border-color: var(--ink);
transform: scale(1.12);
} .collapse {
overflow: hidden;
transition: max-height .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.collapse.closed { max-height: 0 !important; } .icon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.icon-tile {
aspect-ratio: 1;
background: var(--bg);
border: 1px solid var(--line-soft);
border-radius: var(--radius-md);
display: grid; place-items: center;
cursor: pointer;
transition: all .15s;
color: var(--ink-soft);
}
.icon-tile:hover {
background: var(--surface);
border-color: var(--accent-warm);
color: var(--ink);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.icon-tile svg { width: 26px; height: 26px; } .icon-sections { display: flex; flex-direction: column; gap: 18px; }
.icon-section { display: flex; flex-direction: column; gap: 8px; }
.icon-section-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2px;
}
.icon-section-title {
font-size: 13px;
font-weight: 700;
color: var(--ink);
}
.icon-section-toggle {
background: none;
border: 0;
padding: 4px 6px;
font-size: 12px;
font-weight: 600;
color: var(--accent-warm);
cursor: pointer;
display: inline-flex;
align-items: center;
border-radius: 6px;
transition: background .15s;
}
.icon-section-toggle:hover { background: var(--bg); }
.icon-section-track {
display: flex;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
padding: 2px 2px 6px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.icon-section-track .icon-tile {
flex: 0 0 auto;
width: 62px;
height: 62px;
aspect-ratio: 1;
scroll-snap-align: start;
}
.icon-section-track.is-expanded {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
overflow: visible;
}
.icon-section-track.is-expanded .icon-tile {
width: auto;
height: auto;
} .letter-upload-row { margin-bottom: 14px; }
.letter-upload-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 16px;
background: var(--surface); color: var(--ink);
border: 1px dashed var(--line);
border-radius: var(--radius-md);
font-size: 13px; font-weight: 600;
cursor: pointer; transition: all .15s;
}
.letter-upload-btn:hover { border-color: var(--accent-warm); background: var(--bg); }
.letter-upload-btn svg { width: 18px; height: 18px; }
.letter-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.letter-section-title {
grid-column: 1 / -1;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--ink-soft);
margin: 6px 0 -4px;
display: flex; align-items: center; gap: 8px;
}
.letter-section-title::after {
content: ''; flex: 1; height: 1px; background: var(--line-soft);
}
.letter-tile {
aspect-ratio: 1;
background: var(--surface);
border: 1.5px solid var(--line-soft);
border-radius: var(--radius-md);
display: grid; place-items: center;
cursor: pointer;
transition: all .18s ease;
color: var(--ink);
padding: 10px;
position: relative;
overflow: hidden;
}
.letter-tile:hover {
background: var(--bg);
border-color: var(--accent-warm);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(40, 28, 14, 0.10);
}
.letter-tile.active {
background: var(--bg-warm, #fef0e6);
border-color: var(--accent-warm, #ed6a26);
box-shadow: 0 0 0 3px rgba(237, 106, 38, 0.18);
}
.letter-tile img {
width: 100%; height: 100%;
object-fit: contain;
pointer-events: none;
}
.letter-tile svg { width: 100%; height: 100%; max-width: 56px; max-height: 56px; }
.letter-tile svg path { fill: var(--ink); transition: fill .15s; }
.letter-tile:hover svg path { fill: var(--accent-warm); }
.letter-tile-code {
position: absolute; bottom: 4px; right: 6px;
font-size: 10px; font-weight: 700;
color: var(--ink-soft); opacity: .55;
letter-spacing: 0.4px;
} .letter-related-links {
margin-top: 22px;
padding-top: 18px;
border-top: 1px dashed var(--line);
}
.letter-related-title {
font-size: 12px; font-weight: 700;
color: var(--ink-soft);
text-transform: uppercase; letter-spacing: 1px;
margin: 0 0 10px;
}
.letter-related-link {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px;
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius-md);
color: var(--ink);
text-decoration: none;
font-weight: 500;
transition: all .15s;
margin-bottom: 6px;
}
.letter-related-link:hover {
background: var(--bg-warm, #fef0e6);
border-color: var(--accent-warm);
transform: translateX(-2px);
}
.letter-related-link .lr-emoji { font-size: 18px; }
.letter-related-link .lr-text  { flex: 1; font-size: 13px; }
.letter-related-link .lr-arrow { color: var(--ink-soft); } .template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.template-card {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
background: var(--surface);
transition: all .25s;
}
.template-card:hover {
border-color: var(--accent-warm);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.template-preview {
aspect-ratio: 1;
background: linear-gradient(135deg, var(--bg) 0%, var(--bg-warm) 100%);
display: grid;
place-items: center;
border-bottom: 1px solid var(--line-soft);
position: relative;
}
.template-name {
padding: 12px 14px;
font-size: 12px;
font-weight: 600;
color: var(--ink);
} .search { position: relative; margin-bottom: 18px; }
.search input {
width: 100%; padding: 12px 16px 12px 40px;
border: 1.5px solid var(--line);
border-radius: var(--radius-md);
background: var(--bg);
font-family: var(--sans);
font-size: 14px;
transition: all .15s;
}
.search input:focus {
outline: none;
border-color: var(--ink);
background: var(--surface);
}
.search svg {
position: absolute;
left: 14px; top: 50%; transform: translateY(-50%);
width: 16px; height: 16px;
color: var(--ink-muted);
}
.icon-cats {
display: flex;
gap: 6px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.icon-cat {
padding: 6px 14px;
border-radius: 100px;
border: 1px solid var(--line);
background: var(--surface);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all .15s;
color: var(--ink-soft);
}
.icon-cat:hover { background: var(--bg); border-color: var(--ink-muted); }
.icon-cat.active {
background: var(--ink);
color: #fff;
border-color: var(--ink);
} .stage {
position: relative;
display: flex;
flex-direction: column;
background:
radial-gradient(ellipse at 30% 20%, rgba(184,131,90,0.06) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(232,168,154,0.05) 0%, transparent 50%),
var(--bg);
overflow: hidden;
}
.stage-canvas {
flex: 1;
display: grid;
place-items: center;
padding: 50px;
position: relative;
overflow: hidden;
} .stage-canvas::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 1px 1px, rgba(26,25,22,0.025) 1px, transparent 0);
background-size: 24px 24px;
pointer-events: none;
opacity: 0.6;
} .quick-toolbar {
position: absolute;
top: 50%;
left: 28px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 4px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 6px;
box-shadow: var(--shadow-lg);
z-index: 5;
}
.quick-btn {
width: 46px; height: 46px;
border-radius: var(--radius-md);
background: transparent;
border: none;
cursor: pointer;
display: grid; place-items: center;
color: var(--ink-soft);
transition: all .15s;
position: relative;
}
.quick-btn:hover {
background: var(--bg-warm);
color: var(--ink);
}
.quick-btn svg { width: 22px; height: 22px; }
.quick-btn::after {
content: attr(data-label);
position: absolute;
left: calc(100% + 14px);
top: 50%;
transform: translateY(-50%);
background: var(--ink);
color: #fff;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity .15s;
box-shadow: var(--shadow-md);
}
.quick-btn:hover::after { opacity: 1; } .zoom-controls {
position: absolute;
bottom: 110px;
right: 28px;
display: flex;
flex-direction: column;
gap: 4px;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: 4px;
box-shadow: var(--shadow-md);
z-index: 5;
}
.zoom-btn {
width: 38px; height: 38px;
border-radius: var(--radius-sm);
background: transparent;
border: none;
cursor: pointer;
display: grid; place-items: center;
color: var(--ink-soft);
transition: all .15s;
}
.zoom-btn:hover { background: var(--bg-warm); color: var(--ink); }
.zoom-btn svg { width: 16px; height: 16px; }
.zoom-btn.disabled {
opacity: 0.35;
cursor: not-allowed;
}
.zoom-display {
font-size: 11px;
color: var(--ink-soft);
text-align: center;
padding: 4px 0;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
font-weight: 700;
font-family: var(--serif);
letter-spacing: 0.5px;
} .cart-btn {
position: absolute;
bottom: 110px;
left: 28px;
width: 60px; height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--ink) 0%, #2a2724 100%);
color: #fff;
border: none;
cursor: pointer;
display: grid;
place-items: center;
box-shadow:
0 12px 28px rgba(26,25,22,0.3),
inset 0 1px 0 rgba(255,255,255,0.1);
transition: all .2s;
z-index: 5;
}
.cart-btn:hover {
transform: translateY(-3px);
box-shadow:
0 16px 36px rgba(26,25,22,0.4),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.cart-btn:active { transform: translateY(-1px); }
.cart-btn svg { width: 24px; height: 24px; }
.cart-badge {
position: absolute;
top: -2px; right: -2px;
background: var(--accent-warm);
color: #fff;
font-size: 11px;
font-weight: 700;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 11px;
display: grid; place-items: center;
border: 2px solid var(--bg);
} .product-wrap {
position: relative;
width: min(560px, 78%);
aspect-ratio: 1;
z-index: 2; cursor: grab;
}
.stage-canvas { overflow: auto !important; -webkit-overflow-scrolling: touch;
}
.product-wrap.drag-over::after {
content: 'שחררו תמונה כאן';
position: absolute;
inset: 0;
background: rgba(232,168,154,0.25);
border: 3px dashed var(--select-strong);
border-radius: var(--radius-lg);
display: grid;
place-items: center;
color: var(--select-strong);
font-family: var(--display);
font-size: 24px;
font-weight: 600;
z-index: 100;
pointer-events: none;
backdrop-filter: blur(2px);
}
.product {
position: absolute;
inset: 0;
background:
linear-gradient(145deg, #d4c4ad 0%, #b09775 60%, #98815c 100%);
border-radius: var(--radius-lg);
box-shadow:
0 30px 60px -20px rgba(26,25,22,0.35),
0 0 0 1px rgba(26,25,22,0.08),
inset 0 1px 0 rgba(255,255,255,0.4);
overflow: hidden;
}
.product::before {
content: '';
position: absolute;
inset: 0;
background:
repeating-linear-gradient(92deg, transparent 0px, rgba(101,67,33,0.1) 2px, transparent 4px, rgba(101,67,33,0.05) 8px, transparent 14px),
repeating-linear-gradient(88deg, transparent 0px, rgba(80,50,20,0.07) 1px, transparent 3px);
pointer-events: none;
}
.product::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 30% 30%, transparent 0%, rgba(0,0,0,0.18) 100%);
pointer-events: none;
border-radius: var(--radius-lg);
} .handles-layer {
position: absolute;
inset: 0;
pointer-events: none; z-index: 50; }
.handles-layer .selection-box-floating {
position: absolute;
pointer-events: none;
}
.handles-layer .handle {
pointer-events: auto; }
.design-area {
position: absolute; top:    12%;
left:   12%;
width:  76%;
height: 76%;
right:  auto;
bottom: auto;
border-radius: 6px;
overflow: visible;
} .element {
position: absolute;
cursor: move;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
transform-origin: center;
}
.element.selected { z-index: 10; }
.element-text {
width: 100%; height: 100%;
display: flex; align-items: center;
line-height: 1.1;
word-break: break-word;
padding: 4px;
}
.element-img { width: 100%; height: 100%; object-fit: contain; }
.element-svg { width: 100%; height: 100%; } .selection-box {
position: absolute; inset: 0;
border: 1.5px solid var(--select);
pointer-events: none;
border-radius: 2px;
box-shadow: 0 0 0 4px var(--select-glow);
}
.selection-box .handle {
position: absolute;
pointer-events: auto;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--bg-warm);
border: 1.5px solid var(--select);
display: grid; place-items: center;
color: var(--ink-soft);
box-shadow: 0 3px 8px rgba(0,0,0,0.1);
transition: all .15s;
}
.selection-box .handle:hover {
transform: scale(1.12);
color: var(--ink);
background: var(--surface);
}
.selection-box .handle svg { width: 13px; height: 13px; }
.handle.tl { top: -14px; left: -14px; cursor: move; }
.handle.tr { top: -14px; right: -14px; cursor: grab; }
.handle.bl { bottom: -14px; left: -14px; cursor: pointer; }
.handle.bl:hover {
color: #fff;
background: #c44;
border-color: #c44;
}
.handle.br { bottom: -14px; right: -14px; cursor: nwse-resize; } .snap-guide {
position: absolute;
background: var(--snap);
pointer-events: none;
z-index: 8;
box-shadow: 0 0 8px rgba(236,72,153,0.5);
}
.snap-guide.h { left: 0; right: 0; height: 1px; }
.snap-guide.v { top: 0; bottom: 0; width: 1px; } .add-hint {
position: absolute;
width: 70px; height: 70px;
border-radius: 50%;
background: rgba(255,255,255,0.95);
border: 2px dashed var(--ink-soft);
display: grid;
place-items: center;
cursor: pointer;
color: var(--ink-soft);
transition: all .25s;
z-index: 4;
backdrop-filter: blur(6px);
box-shadow: var(--shadow-md);
}
.add-hint:hover {
background: var(--ink);
color: #fff;
border-color: var(--ink);
transform: scale(1.08);
border-style: solid;
box-shadow: var(--shadow-lg);
}
.add-hint svg { width: 28px; height: 28px; }
.add-hint-label {
position: absolute;
bottom: -32px;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
font-weight: 700;
color: var(--ink);
background: rgba(255,255,255,0.95);
padding: 4px 12px;
border-radius: 100px;
white-space: nowrap;
pointer-events: none;
box-shadow: var(--shadow-sm);
} .stage-bottom {
padding: 16px 32px;
border-top: 1px solid var(--line-soft);
display: flex;
justify-content: space-between;
align-items: center;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
z-index: 10;
}
.price-tag { display: flex; flex-direction: column; }
.price-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--ink-muted);
font-weight: 600;
}
.price-val {
font-family: var(--display);
font-size: 26px;
font-weight: 400;
color: var(--ink);
line-height: 1.1;
}
.price-val .currency {
font-size: 18px;
color: var(--ink-muted);
margin-left: 2px;
margin-right: 2px; }
.stage-btns { display: flex; gap: 10px; }
.btn {
padding: 14px 24px;
border-radius: var(--radius-md);
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
font-family: var(--sans);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all .15s;
}
.btn:hover { background: var(--bg-warm); }
.btn-primary {
background: linear-gradient(135deg, var(--ink) 0%, #2a2724 100%);
color: #fff;
border-color: var(--ink);
box-shadow: 0 4px 12px rgba(26,25,22,0.2);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(26,25,22,0.3);
} .info {
background: var(--surface);
border-right: 1px solid var(--line);
display: flex;
flex-direction: column; overflow: hidden;
box-shadow: -4px 0 24px rgba(26,25,22,0.04);
} .info > .info-section:nth-child(2) { flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
.info > .info-section:nth-child(2) .layers { overflow: visible; }
.info > .info-section:nth-child(3),
.info > .info-section:nth-child(4) { flex: 0 0 auto;
background: var(--surface);
border-top: 1px solid var(--line-soft);
}
.info > .info-section:nth-child(3) {
box-shadow: 0 -4px 12px rgba(26,25,22,0.04);
}
.info-header {
padding: 26px 24px 20px;
border-bottom: 1px solid var(--line-soft);
background: linear-gradient(180deg, var(--bg-warm) 0%, var(--surface) 100%);
}
.info-cat {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1.8px;
color: var(--accent-warm);
font-weight: 700;
margin-bottom: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.info-cat::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent-warm);
}
.info-name {
font-family: var(--display);
font-size: 24px;
font-weight: 400;
line-height: 1.15;
margin-bottom: 8px;
letter-spacing: -0.3px;
}
.info-desc {
color: var(--ink-muted);
font-size: 12.5px;
line-height: 1.55;
}
.info-section {
padding: 20px 24px;
border-bottom: 1px solid var(--line-soft);
}
.info-section h4 {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.4px;
color: var(--ink-muted);
font-weight: 700;
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: space-between;
}
.info-section h4 .count {
color: var(--ink);
background: var(--bg-warm);
padding: 2px 8px;
border-radius: 100px;
font-size: 10px;
}
.layers { display: flex; flex-direction: column; gap: 6px; }
.layer {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: var(--bg);
border: 1px solid var(--line-soft);
border-radius: var(--radius-md);
font-size: 12px;
cursor: pointer;
transition: all .15s;
}
.layer:hover {
border-color: var(--ink-soft);
background: var(--surface);
}
.layer.active {
border-color: var(--select-strong);
background: rgba(232,168,154,0.08);
box-shadow: 0 0 0 3px var(--select-glow);
}
.layer-icon {
width: 30px; height: 30px;
background: var(--surface);
border-radius: var(--radius-sm);
display: grid; place-items: center;
color: var(--ink-soft);
flex-shrink: 0;
border: 1px solid var(--line-soft);
}
.layer-icon svg { width: 14px; height: 14px; }
.layer-name {
flex: 1;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12.5px;
}
.layer-actions { display: flex; gap: 2px; }
.layer-act {
background: none;
border: none;
color: var(--ink-muted);
cursor: pointer;
padding: 6px;
display: grid; place-items: center;
border-radius: var(--radius-sm);
transition: all .15s;
}
.layer-act:hover { color: var(--ink); background: rgba(0,0,0,0.05); }
.layer-act.del:hover { color: #c44; background: rgba(196,68,68,0.08); }
.layer-act svg { width: 14px; height: 14px; }
.empty-layers {
text-align: center;
padding: 24px 12px;
color: var(--ink-muted);
font-size: 12px;
background: var(--bg);
border-radius: var(--radius-md);
font-style: italic;
border: 1px dashed var(--line);
}
.layer-order-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
margin-top: 10px;
}
.layer-order-btn {
padding: 10px;
border: 1px solid var(--line);
background: var(--surface);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: 12px;
color: var(--ink-soft);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all .15s;
font-weight: 600;
}
.layer-order-btn:hover:not(:disabled) {
background: var(--bg-warm);
color: var(--ink);
}
.layer-order-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.layer-order-btn svg { width: 14px; height: 14px; }
.tab-content { display: none; }
.tab-content.active { display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.engraving-notice {
margin-top: 12px;
padding: 12px 14px;
background: rgba(184,131,90,0.08);
border: 1px solid rgba(184,131,90,0.25);
border-radius: var(--radius-md);
font-size: 12px;
color: var(--ink-soft);
line-height: 1.55;
display: none;
}
.engraving-notice.show { display: block; }
.engraving-notice strong { color: var(--accent-warm); font-weight: 700; }
.panel.hidden { display: none; } .mobile-bottombar { display: none; }
.mobile-info-trigger { display: none; }
.mobile-info-overlay { display: none; } @media (max-width: 768px) {
.topbar {
padding: 0 12px;
height: 56px;
}
.topbar-left .crumbs { display: none; }
.topbar-logo-text {
display: none;
}
.topbar-logo-mark { width: 32px; height: 32px; font-size: 15px; } .topbar-right .topbar-btn:not(.close):not(.mobile-keep) { display: none; }
.topbar-divider { display: none; }
.app, .app.panel-open {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "stage";
padding-top: 56px;
padding-bottom: 64px;
}
.rail { display: none; }
.info { display: none; }
.stage { grid-area: stage; height: 100%; }
.stage-canvas {
padding: 16px;
padding-bottom: 80px;
}
.product-wrap { width: 88%; } .quick-toolbar {
flex-direction: row;
top: auto;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
padding: 5px;
}
.quick-btn { width: 42px; height: 42px; }
.quick-btn svg { width: 20px; height: 20px; }
.quick-btn::after {
left: 50%;
bottom: calc(100% + 10px);
top: auto;
transform: translateX(-50%);
} .zoom-controls {
bottom: 80px;
right: 12px;
flex-direction: column;
padding: 3px;
}
.zoom-btn { width: 36px; height: 36px; }
.zoom-display { font-size: 10px; padding: 3px 0; } .cart-btn {
bottom: 80px;
left: 12px;
width: 50px; height: 50px;
}
.cart-btn svg { width: 20px; height: 20px; } .stage-bottom {
position: fixed;
bottom: 64px;
left: 0; right: 0;
z-index: 30;
padding: 10px 14px;
box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
}
.price-val { font-size: 22px; }
.price-val .currency { font-size: 14px; }
.btn { padding: 10px 16px; font-size: 13px; } .mobile-bottombar {
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
height: 64px;
background: var(--surface);
border-top: 1px solid var(--line);
z-index: 40;
padding: 0;
box-shadow: 0 -4px 16px rgba(0,0,0,0.05);
}
.mobile-tab {
flex: 1;
background: none;
border: none;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: var(--ink-muted);
font-size: 10px;
font-weight: 600;
transition: color .15s;
position: relative;
}
.mobile-tab svg { width: 22px; height: 22px; }
.mobile-tab.active { color: var(--ink); }
.mobile-tab.active::before {
content: '';
position: absolute;
top: 0;
left: 25%; right: 25%;
height: 2px;
background: var(--accent-warm);
border-radius: 0 0 2px 2px;
} .panel {
position: fixed;
bottom: 64px;
left: 0; right: 0;
max-height: 50vh;
border-left: none;
border-top: 1px solid var(--line);
border-radius: 20px 20px 0 0;
box-shadow: 0 -12px 40px rgba(0,0,0,0.15);
z-index: 45;
animation: slideUp .3s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
@keyframes slideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
} .panel::before {
content: '';
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
width: 56px; height: 5px;
background: var(--line);
border-radius: 3px;
}
.panel-close {
top: 18px;
left: 14px;
}
.panel-header {
padding: 24px 20px 14px;
padding-top: 28px;
}
.panel-title { font-size: 22px; }
.panel-body { padding: 18px 20px; padding-bottom: 24px; }
.add-hint { width: 56px; height: 56px; }
.add-hint svg { width: 22px; height: 22px; }
.add-hint-label { font-size: 10px; padding: 3px 9px; } .mobile-info-trigger {
display: grid;
place-items: center;
position: absolute;
top: 16px; right: 16px;
width: 38px; height: 38px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow-md);
cursor: pointer;
z-index: 5;
color: var(--ink-soft);
}
.mobile-info-trigger svg { width: 18px; height: 18px; } .mobile-info-overlay {
display: none;
position: fixed;
inset: 56px 0 64px 0;
background: var(--surface);
z-index: 50;
overflow-y: auto;
}
.mobile-info-overlay.show { display: block; }
.mobile-info-overlay .info {
display: flex;
box-shadow: none;
border-right: none;
}
.mobile-info-close {
position: absolute;
top: 14px; left: 14px;
width: 36px; height: 36px;
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
cursor: pointer;
display: grid; place-items: center;
z-index: 2;
}
.mobile-info-close svg { width: 16px; height: 16px; } .panel-open .quick-toolbar { display: none; }
.panel-open .zoom-controls { display: none; }
.panel-open .cart-btn { display: none; } .el-actions { padding: 12px 16px; }
.el-action { padding: 10px; font-size: 12px; } .prop-row {
grid-template-columns: 70px 1fr;
gap: 10px;
padding: 10px 0;
}
.move-grid, .size-grid, .mirror-grid {
grid-template-columns: repeat(4, 38px);
}
.seg-btn { width: 38px; height: 38px; }
.icon-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.template-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
} @media (max-width: 380px) {
.topbar { padding: 0 8px; }
.topbar-btn { width: 34px; height: 34px; }
.stage-canvas { padding: 12px; padding-bottom: 80px; }
.stage-bottom { padding: 8px 12px; }
.price-val { font-size: 20px; }
.btn { padding: 9px 14px; font-size: 12px; }
.quick-btn { width: 40px; height: 40px; }
.cart-btn { width: 46px; height: 46px; }
} .makeart-customizer-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: var(--bg);
overflow: hidden;
display: flex;
flex-direction: column;
}
.makeart-customizer-overlay[hidden] { display: none; }
body.makeart-customizer-open { overflow: hidden; } .makeart-customizer-overlay > .topbar { position: relative; }
.makeart-customizer-overlay > .app { padding-top: 0; height: calc(100vh - 60px); } .makeart-customizer-overlay .element[data-type="text"] { display: flex; align-items: center; justify-content: center; }
.makeart-customizer-overlay .element-text { white-space: nowrap !important; padding: 4px 6px; line-height: 1.15; } .makeart-customizer-overlay .product,
.product-wrap .product { background-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
.makeart-customizer-overlay .product::before,
.product-wrap .product::before,
.makeart-customizer-overlay .product::after,
.product-wrap .product::after { display: none !important; }
.makeart-customizer-overlay .product-wrap,
.stage-canvas .product-wrap { background: transparent !important; box-shadow: none !important; }
.makeart-customizer-overlay .stage-canvas { background: var(--bg) !important; }
.makeart-customizer-overlay .stage-canvas::before,
.stage-canvas::before { display: none !important; } body:not(.makeart-customizer-overlay) .stage-canvas { background: var(--bg, #faf4ec) !important; } .makeart-customizer-overlay .element[data-type="text"] {
min-width: 0;
min-height: 0;
overflow: visible;
}
.makeart-customizer-overlay .element[data-type="text"] .element-text {
display: inline-block;
white-space: nowrap;
word-break: keep-all;
flex: 0 0 auto;
} .makeart-customizer-overlay #product-wrap.product-selected {
outline: none;
box-shadow: 0 0 0 2px rgba(237, 106, 38, 0.18);
border-radius: 6px;
} .makeart-customizer-overlay .printing-box-frame {
border: 2px dashed #e11d48 !important;
border-radius: 4px !important;
background: rgba(225, 29, 72, 0.04);
box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.18);
pointer-events: auto; overflow: visible;
} .makeart-customizer-overlay .element > .element-content {
position: relative;
width: 100%; height: 100%;
clip-path: var(--print-clip, none);
-webkit-clip-path: var(--print-clip, none);
} .makeart-customizer-overlay .printing-box-frame .selection-box .handle {
z-index: 5;
}
.makeart-customizer-overlay .printing-box-frame::before {
content: 'אזור עיצוב';
position: absolute;
top: -22px; right: 0;
background: #e11d48; color: #fff;
font-size: 10px; font-weight: 700;
padding: 3px 8px; border-radius: 4px 4px 0 0;
letter-spacing: .3px;
} .makeart-customizer-overlay .printing-box-frame.makeart-zones-active {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.makeart-customizer-overlay .printing-box-frame.makeart-zones-active::before {
content: none;
} .makeart-template-product .makeart-customizer-overlay .printing-box-frame {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.makeart-template-product .makeart-customizer-overlay .printing-box-frame::before {
content: none !important;
}  .makeart-customizer-overlay .view-switcher {
position: absolute;
top: 16px;
right: 16px;
z-index: 12;
display: flex;
flex-direction: row;
gap: 8px;
padding: 6px;
background: rgba(255,255,255,0.94);
border: 1px solid var(--line, #e7dfd0);
border-radius: 12px;
box-shadow: 0 6px 22px rgba(40, 28, 14, 0.10);
backdrop-filter: blur(6px);
pointer-events: auto;
}
.makeart-customizer-overlay .view-switcher[hidden] { display: none; }
.makeart-customizer-overlay .view-thumb {
width: 52px;
height: 52px;
padding: 0;
border: 2px solid transparent;
background: #fff no-repeat center / contain;
border-radius: 8px;
cursor: pointer;
transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
overflow: hidden;
position: relative;
}
.makeart-customizer-overlay .view-thumb:hover {
border-color: var(--ink-soft, #b59a72);
transform: translateY(-1px);
}
.makeart-customizer-overlay .view-thumb.active {
border-color: var(--orange, #ed6a26);
box-shadow: 0 0 0 3px rgba(237,106,38,0.16);
}
.makeart-customizer-overlay .view-thumb .view-thumb-label {
position: absolute;
bottom: 2px; left: 0; right: 0;
font-size: 10px;
font-weight: 600;
text-align: center;
color: var(--ink, #2a1810);
background: rgba(255,255,255,0.85);
padding: 1px 0;
pointer-events: none;
}
@media (max-width: 720px) { .makeart-customizer-overlay .view-switcher {
top: 10px;
right: 10px;
gap: 6px;
padding: 4px;
}
.makeart-customizer-overlay .view-thumb { width: 44px; height: 44px; }
.makeart-customizer-overlay .view-thumb .view-thumb-label { font-size: 9px; }
} .makeart-customizer-overlay #product-wrap { isolation: isolate; }
.makeart-customizer-overlay .design-area  { mix-blend-mode: normal; } .makeart-customizer-overlay .element[data-type="text"]  .element-text { filter: contrast(1.1); }
.makeart-customizer-overlay .element[data-type="icon"]  .element-svg  { filter: contrast(1.1); } .makeart-customizer-overlay .element.makeart-pulse {
animation: makeart-pulse-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes makeart-pulse-shadow {
0%   { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0); }
40%  { box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.25); }
100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0); }
}
@media (prefers-reduced-motion: reduce) {
.makeart-customizer-overlay .element.makeart-pulse { animation: none; }
}
.makeart-customizer-overlay .selection-breadcrumb[hidden] { display: none; }
.makeart-customizer-overlay .selection-breadcrumb { position: fixed;
top: 68px; left: 50%;
transform: translateX(-50%);
padding: 6px 14px;
background: rgba(255,255,255,0.95);
backdrop-filter: blur(4px);
border: 1px solid var(--line, #e8dfc6);
border-radius: 9999px;
font-size: 13px;
color: var(--ink, #1a1410);
display: flex;
align-items: center;
gap: 8px;
max-width: 60vw;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 90; box-shadow: 0 4px 12px rgba(0,0,0,0.08);
animation: makeart-bc-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
pointer-events: none;
}
.makeart-customizer-overlay .selection-breadcrumb #selection-icon {
width: 16px;
height: 16px;
display: inline-block;
flex-shrink: 0;
}
.makeart-customizer-overlay .selection-breadcrumb .selection-hint {
color: var(--ink-muted, #8a8478);
font-size: 11px;
}
@keyframes makeart-bc-in {
from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.makeart-customizer-overlay #icon-color-swatches .swatch {
transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1), border-color 120ms;
}
.makeart-customizer-overlay #icon-color-swatches .swatch:hover {
transform: scale(1.12);
}
.makeart-customizer-overlay #icon-color-swatches .swatch.active {
border-color: var(--orange, #c2410c) !important;
transform: scale(1.05);
} @keyframes makeart-hint-in {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.makeart-edit-hint { animation: none !important; opacity: 1 !important; }
} .makeart-customizer-overlay .quick-btn.makeart-logo-btn {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 1px solid rgba(180,140,40,0.3);
box-shadow: 0 2px 6px rgba(180,140,40,0.15);
}
.makeart-customizer-overlay .quick-btn.makeart-logo-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(180,140,40,0.2);
} .makeart-onboarding[hidden] { display: none; }
.makeart-onboarding {
position: fixed; inset: 0; z-index: 9999;
display: flex; align-items: center; justify-content: center;
animation: makeart-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.makeart-onboarding-backdrop {
position: absolute; inset: 0;
background: rgba(28, 24, 18, 0.55);
backdrop-filter: blur(6px);
}
.makeart-onboarding-card {
position: relative;
background: #fff;
border-radius: 20px;
padding: 40px 32px 28px;
width: min(440px, 92vw);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28), 0 8px 16px rgba(0, 0, 0, 0.12);
text-align: center;
animation: makeart-onboard-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes makeart-onboard-in {
from { opacity: 0; transform: scale(0.92) translateY(8px); }
to   { opacity: 1; transform: scale(1) translateY(0); }
}
.makeart-onboarding-skip {
position: absolute; top: 12px; left: 12px;
width: 36px; height: 36px;
border: none; background: transparent;
border-radius: 50%;
display: grid; place-items: center;
cursor: pointer;
color: var(--ink-muted, #8a8478);
transition: background 150ms;
}
.makeart-onboarding-skip:hover { background: rgba(0,0,0,0.06); }
.makeart-onboarding-emoji { font-size: 56px; margin-bottom: 12px; line-height: 1; }
.makeart-onboarding-card h3 {
font-family: var(--display, 'Frank Ruhl Libre', serif);
font-size: 26px; font-weight: 700;
margin: 0 0 10px;
color: var(--ink, #1a1410);
letter-spacing: -0.01em;
}
.makeart-onboarding-card p {
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft, #5c544a);
margin: 0 0 28px;
}
.makeart-onboarding-controls {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
}
.makeart-onboarding-prev, .makeart-onboarding-next {
padding: 10px 18px;
border-radius: 9999px;
border: none;
font-family: inherit;
font-size: 14px; font-weight: 600;
cursor: pointer;
transition: transform 120ms, background 150ms;
}
.makeart-onboarding-prev[hidden] { visibility: hidden; pointer-events: none; }
.makeart-onboarding-prev {
background: var(--bg-soft, #f3eee2);
color: var(--ink, #1a1410);
}
.makeart-onboarding-prev:hover { background: rgba(0,0,0,0.08); }
.makeart-onboarding-next {
background: var(--orange, #c2410c);
color: #fff;
}
.makeart-onboarding-next:hover {
background: var(--orange-dark, #9a3409);
transform: translateY(-1px);
}
.makeart-onboarding-dots {
display: flex; gap: 6px;
}
.makeart-onboarding-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--line, #d9d0bc);
transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1), background 200ms;
}
.makeart-onboarding-dot.active {
width: 24px;
background: var(--orange, #c2410c);
border-radius: 9999px;
}
@media (prefers-reduced-motion: reduce) {
.makeart-onboarding,
.makeart-onboarding-card { animation: none; }
} .makeart-customizer-overlay .icon-color-block {
margin: 0 0 16px;
padding: 12px;
background: var(--bg-soft, #faf6ec);
border: 1px solid var(--line, #e8dfc6);
border-radius: 10px;
}
.makeart-customizer-overlay .icon-color-block[hidden] { display: none; }
.makeart-customizer-overlay .icon-color-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.makeart-customizer-overlay .icon-color-header input[type=color] {
width: 32px; height: 32px;
padding: 0;
border: 1px solid var(--line, #d9d0bc);
border-radius: 6px;
cursor: pointer;
background: transparent;
}
.makeart-customizer-overlay #icon-color-swatches {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.makeart-customizer-overlay #icon-color-swatches .swatch {
aspect-ratio: 1;
border: 2px solid transparent;
border-radius: 50%;
padding: 0;
cursor: pointer;
transition: transform 120ms cubic-bezier(0.16, 1, 0.3, 1), border-color 120ms;
}
.makeart-customizer-overlay #icon-color-swatches .swatch:hover { transform: scale(1.12); }
.makeart-customizer-overlay #icon-color-swatches .swatch.active {
border-color: var(--orange, #c2410c) !important;
transform: scale(1.05);
} @keyframes makeart-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.cutline-status-badge svg { animation: none !important; }
} .element-cutline {
filter: drop-shadow(0 0 1px rgba(255,255,255,0.9));
} .makeart-customizer-overlay.makeart-die-cut .product,
.makeart-customizer-overlay.makeart-die-cut .product::before,
.makeart-customizer-overlay.makeart-die-cut .product::after,
.makeart-customizer-overlay.makeart-die-cut #product-wrap > .product { display: none !important;
background: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
}
.makeart-customizer-overlay.makeart-die-cut #product-wrap {
background: transparent !important;
} .makeart-customizer-overlay.makeart-die-cut .design-area {
border: 1px dashed rgba(0,0,0,0.18) !important;
}
.makeart-customizer-overlay.makeart-die-cut .makeart-zone-overlay,
.makeart-customizer-overlay.makeart-die-cut .makeart-zone-overlay span {
display: none !important;
} .makeart-customizer-overlay.makeart-die-cut .design-area .add-hint,
.makeart-customizer-overlay.makeart-die-cut .design-area::after,
.makeart-customizer-overlay.makeart-die-cut .design-area::before,
.makeart-customizer-overlay.makeart-die-cut .design-area-label,
.makeart-customizer-overlay.makeart-die-cut .printing-box-frame::after {
display: none !important;
} .makeart-customizer-overlay .makeart-cm-label {
position: absolute;
font-size: 11px;
font-weight: 600;
color: var(--ink-muted, #8a8478);
background: var(--surface, #fdfaf6);
padding: 2px 8px;
border-radius: 4px;
border: 1px solid var(--line-soft, #efe7d3);
letter-spacing: 0.02em;
pointer-events: none;
z-index: 4;
white-space: nowrap;
}
.makeart-customizer-overlay .makeart-cm-label.cm-top { top: -8px;
left: 50%;
transform: translate(-50%, -100%);
}
.makeart-customizer-overlay .makeart-cm-label.cm-side { top: 50%;
left: -8px;
transform: translate(-100%, -50%) rotate(-90deg);
transform-origin: right center;
} .makeart-customizer-overlay .qep-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.makeart-customizer-overlay .qep-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.makeart-customizer-overlay .qep-label {
font-size: 12px;
font-weight: 600;
color: var(--ink-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.makeart-customizer-overlay .qep-input {
width: 100%;
padding: 10px 14px;
background: var(--surface);
border: 1.5px solid var(--line);
border-radius: var(--radius-md);
font-family: var(--sans);
font-size: 14px;
color: var(--ink);
transition: border-color 0.15s, box-shadow 0.15s;
outline: none; text-align: start;
direction: rtl;
}
.makeart-customizer-overlay .qep-input:focus {
border-color: var(--select);
box-shadow: 0 0 0 3px var(--select-glow);
}
.makeart-customizer-overlay .qep-input::placeholder {
color: var(--ink-muted);
opacity: 0.7;
} .makeart-customizer-overlay .qep-img-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: var(--surface);
border: 1.5px dashed var(--line);
border-radius: var(--radius-md);
cursor: pointer;
font-size: 14px;
color: var(--ink-soft);
transition: border-color 0.15s, background 0.15s;
width: 100%;
text-align: start;
}
.makeart-customizer-overlay .qep-img-btn:hover {
border-color: var(--select);
background: var(--bg-warm);
}
.makeart-customizer-overlay .qep-img-btn.has-img {
border-style: solid;
border-color: var(--line-soft);
gap: 12px;
}
.makeart-customizer-overlay .qep-img-thumb {
width: 44px;
height: 44px;
object-fit: contain;
border-radius: 6px;
background: var(--surface-2);
flex-shrink: 0;
}
.makeart-customizer-overlay .qep-img-label {
font-size: 13px;
color: var(--ink-soft);
} .makeart-customizer-overlay .qep-img-clear {
background: none;
border: none;
cursor: pointer;
font-size: 12px;
color: var(--ink-muted);
padding: 2px 6px;
border-radius: 4px;
align-self: flex-end;
transition: color 0.12s;
}
.makeart-customizer-overlay .qep-img-clear:hover { color: var(--select-strong); } .makeart-customizer-overlay .qep-tip {
display: flex;
align-items: center;
gap: 7px;
font-size: 12px;
color: var(--ink-muted);
background: var(--surface-2);
border-radius: var(--radius-md);
padding: 10px 14px;
margin-top: 4px;
line-height: 1.5;
}
.makeart-customizer-overlay .qep-tip svg { flex-shrink: 0; opacity: 0.6; } #design-area.shape-circle {
border-radius: 50% !important;
overflow: hidden !important;
}
#design-area.shape-oval {
border-radius: 60% / 45% !important;
overflow: hidden !important;
}
#design-area.shape-hexagon {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) !important;
overflow: hidden !important;
}
#design-area.shape-rounded,
#design-area.shape-jar {
border-radius: 20% !important;
overflow: hidden !important;
}
#design-area.shape-arch {
border-radius: 50% 50% 0 0 / 38% 38% 0 0 !important;
overflow: hidden !important;
}
#design-area.shape-speech-bubble {
border-radius: 20px !important;
overflow: hidden !important;
}
#design-area.shape-heart {
clip-path: path('M 50,85 C 50,85 10,58 10,32 C 10,18 21,8 34,8 C 41,8 47,12 50,18 C 53,12 59,8 66,8 C 79,8 90,18 90,32 C 90,58 50,85 50,85 Z') !important;
overflow: hidden !important;
}
#design-area.shape-star {
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%) !important;
overflow: hidden !important;
} #design-area.shape-circle::after,
#design-area.shape-oval::after,
#design-area.shape-hexagon::after,
#design-area.shape-heart::after,
#design-area.shape-star::after,
#design-area.shape-rounded::after,
#design-area.shape-arch::after,
#design-area.shape-jar::after,
#design-area.shape-speech-bubble::after {
content: '';
position: absolute;
inset: 1px;
border: 1.5px dashed rgba(225, 29, 72, 0.45);
pointer-events: none;
border-radius: inherit;
z-index: 1000;
} .makeart-customizer-overlay #design-area.shape-circle,
.makeart-customizer-overlay #design-area.shape-oval,
.makeart-customizer-overlay #design-area.shape-hexagon,
.makeart-customizer-overlay #design-area.shape-heart,
.makeart-customizer-overlay #design-area.shape-star,
.makeart-customizer-overlay #design-area.shape-rounded,
.makeart-customizer-overlay #design-area.shape-arch,
.makeart-customizer-overlay #design-area.shape-jar,
.makeart-customizer-overlay #design-area.shape-speech-bubble {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.makeart-customizer-overlay #design-area.shape-circle::before,
.makeart-customizer-overlay #design-area.shape-oval::before,
.makeart-customizer-overlay #design-area.shape-hexagon::before,
.makeart-customizer-overlay #design-area.shape-heart::before,
.makeart-customizer-overlay #design-area.shape-star::before,
.makeart-customizer-overlay #design-area.shape-rounded::before,
.makeart-customizer-overlay #design-area.shape-arch::before,
.makeart-customizer-overlay #design-area.shape-jar::before,
.makeart-customizer-overlay #design-area.shape-speech-bubble::before {
content: none !important;
} .sticker-shape-selector {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
}
.shape-chip {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 10px 10px 6px;
border: 1.5px solid var(--line, #e8dfc6);
border-radius: 10px;
background: #fff;
cursor: pointer;
min-width: 68px;
font-size: 11px;
font-weight: 600;
color: var(--ink, #2c2018);
transition: border-color 0.15s, background 0.15s, transform 0.12s;
text-align: center;
line-height: 1.2;
user-select: none;
} @media (hover: hover) {
.shape-chip:hover {
border-color: var(--accent-warm, #ed6a26);
transform: translateY(-1px);
}
}
.shape-chip.active {
border-color: var(--accent-warm, #ed6a26);
background: #fff8f4;
color: var(--accent-warm, #ed6a26); border-width: 2.5px;
font-weight: 700;
}
.shape-chip svg {
width: 32px;
height: 32px;
transition: transform 0.12s;
}
.shape-chip.active svg {
transform: scale(1.08);
} @media (max-width: 768px) { .selection-box .handle {
width: 36px !important;
height: 36px !important;
}
.handle.tl { top: -18px !important; left: -18px !important; }
.handle.tr { top: -18px !important; right: -18px !important; }
.handle.bl { bottom: -18px !important; left: -18px !important; }
.handle.br { bottom: -18px !important; right: -18px !important; }
.selection-box .handle svg { width: 16px !important; height: 16px !important; } .selection-box .handle::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
} .product-wrap {
width: 80% !important;
max-width: 340px;
} .stage-bottom .btn-primary {
min-height: 50px !important;
font-size: 15px !important;
font-weight: 700 !important;
} .template-grid {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.template-card .template-preview {
min-height: 90px;
}
.template-card .template-name {
font-size: 11px !important;
padding: 6px 4px !important;
} .quick-toolbar {
gap: 4px !important;
}
.quick-btn {
width: 44px !important;
height: 44px !important;
} .sticker-shape-selector {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
scrollbar-width: none;
}
.sticker-shape-selector::-webkit-scrollbar { display: none; }
.shape-chip {
flex-shrink: 0;
min-width: 62px;
}
}
@media (max-width: 380px) {
.product-wrap { width: 82% !important; }
.selection-box .handle { width: 32px !important; height: 32px !important; }
.handle.tl { top: -16px !important; left: -16px !important; }
.handle.tr { top: -16px !important; right: -16px !important; }
.handle.bl { bottom: -16px !important; left: -16px !important; }
.handle.br { bottom: -16px !important; right: -16px !important; }
} @media (max-width: 768px) { .element,
.handle,
.handles-layer .selection-box,
#product-wrap,
#design-area {
touch-action: none !important;
} .stage-canvas {
touch-action: pan-y;
} .stage-btns .btn:not(.btn-primary) { display: none !important; }
.price-label { display: none !important; }
.price-val { font-size: 19px !important; }
.stage-bottom { padding: 7px 14px !important; gap: 12px; align-items: center; }
.stage-bottom .btn-primary { min-height: 44px !important; padding: 0 20px !important; } .panel-drag-zone {
position: absolute;
top: 0; left: 0; right: 0;
height: 32px;
cursor: grab;
touch-action: none;
z-index: 2;
} .app.panel-open .stage-canvas {
padding-bottom: calc(50vh + 68px) !important;
} .panel-body { mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
} }
@media (max-width: 380px) {
.stage-bottom { padding: 6px 12px !important; }
.price-val { font-size: 17px !important; }
} .topbar-preview-toggle {
display: none;
}
body.has-canvas-preview .topbar-preview-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
}
body.has-canvas-preview .topbar-preview-toggle.active {
background: var(--accent-warm, #ed6a26);
color: #fff;
}
body.has-canvas-preview .topbar-preview-toggle.active svg {
stroke: #fff;
} body.has-canvas-preview #design-area::before {
content: '';
position: absolute;
inset: 5%;
border: 1.5px dashed rgba(237, 106, 38, 0.55);
border-radius: 2px;
pointer-events: none;
z-index: 1; }
@media (max-width: 480px) {
body.has-canvas-preview #design-area::before {
border-width: 1px;
inset: 4%;
}
} .stage-canvas.canvas-preview-mode {
background:
linear-gradient(180deg, #efe8da 0%, #e6dfd0 100%); }
.stage-canvas.canvas-preview-mode::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.08) 100%);
pointer-events: none;
z-index: 0;
}
.stage-canvas.canvas-preview-mode .product-wrap {
--canvas-wrap-depth: 18px; border: var(--canvas-wrap-depth) solid #f7f1e3;
border-top-color: #fdf8ec;
border-bottom-color: #e8dfca;
box-shadow:
0 16px 28px -10px rgba(0, 0, 0, 0.28),
0 8px 14px -6px rgba(0, 0, 0, 0.22);
transform: scale(0.92);
transition: transform 0.25s ease-out, border-width 0.25s ease-out, box-shadow 0.25s ease-out;
}
.stage-canvas.canvas-preview-mode.canvas-depth-thick .product-wrap {
--canvas-wrap-depth: 30px;
} .stage-canvas.canvas-preview-mode .selection-box,
.stage-canvas.canvas-preview-mode .snap-guide,
.stage-canvas.canvas-preview-mode .zone-overlay,
.stage-canvas.canvas-preview-mode #handles-layer {
display: none !important;
} .stage-canvas.canvas-preview-mode #design-area::before {
display: none;
} .stage-canvas.canvas-preview-mode #design-area {
pointer-events: none;
}
@media (max-width: 768px) {
.stage-canvas.canvas-preview-mode .product-wrap {
--canvas-wrap-depth: 12px;
transform: scale(0.96);
}
.stage-canvas.canvas-preview-mode.canvas-depth-thick .product-wrap {
--canvas-wrap-depth: 18px;
}
}