@font-face {
    font-family: 'Gentle Hearts';
    src: url('../fonts/GentleHearts-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Breathing';
    src: url('../fonts/Breathing%20Personal%20Use%20Only.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Keep Calm';
    src: url('../fonts/KeepCalm-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Adelia';
    src: url('../fonts/ADELIA.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Edo SZ';
    src: url('../fonts/edosz.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Grinched';
    src: url('../fonts/GrinchedRegular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Candy Fruits';
    src: url('../fonts/Candy%20Fruits.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.jzgc-app,
.jzgc-app * { box-sizing: border-box; }

.jzgc-app {
    --brown: #352015;
    --brown-2: #4a2a1b;
    --gold: #b88748;
    --cream: #fbf7f1;
    --line: #eadfd2;
    --muted: #6f6863;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 32px 18px 42px;
    color: #281d17;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.jzgc-main-grid, .jzgc-main-grid > *, .jzgc-form-panel, .jzgc-preview-column, .jzgc-preview-sticky, .jzgc-card-stage { min-width: 0; }

.jzgc-hero { text-align: center; margin: 0 auto 28px; }
.jzgc-hero-board {
    position: relative;
    padding: 18px 22px;
    border-radius: 22px;
    border: 1px solid rgba(197, 147, 77, .78);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 10px 26px rgba(55,31,18,.13);
    background:
        linear-gradient(180deg, rgba(22,9,4,.12), rgba(22,9,4,.20)),
        url('../images/header-waktu-solat-wood.jpg') center center / cover no-repeat;
    overflow: hidden;
}
.jzgc-hero-board::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 18px;
    border: 1px solid rgba(197, 147, 77, .62);
    pointer-events: none;
}
.jzgc-hero-board::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.025), transparent 24%, transparent 76%, rgba(255,255,255,.025));
    pointer-events: none;
}
.jzgc-hero h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: Georgia, serif;
    font-size: clamp(30px, 4.4vw, 54px);
    line-height: 1.12;
    color: #fffaf4;
    letter-spacing: -.02em;
    text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.jzgc-hero p { margin: 14px 0 0; color: #5f5853; font-size: 16px; }

.jzgc-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 1fr); gap: 28px; align-items: start; }
.jzgc-panel, .jzgc-info-box { background: #fff; border: 1px solid #eee7df; border-radius: 16px; box-shadow: 0 8px 28px rgba(54,32,21,.07); }
.jzgc-form-panel { padding: 24px; }
.jzgc-section + .jzgc-section { margin-top: 24px; padding-top: 2px; }
.jzgc-section-title, .jzgc-section-title > div { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.jzgc-section-title > span, .jzgc-section-title > div > span {
    width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center;
    background: linear-gradient(135deg, #dcb77f, #a97335); color: #fff; font-weight: 800; font-size: 13px; flex: 0 0 auto;
}
.jzgc-section-title h3 { margin: 0; font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }
.jzgc-section-title-row { justify-content: space-between; }
.jzgc-section-title-row small { color: var(--muted); }

.jzgc-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jzgc-category {
    min-height: 82px; padding: 10px 8px; border: 1px solid #e8e0d8; border-radius: 10px; background: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    color: #3b302a; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: .2s ease;
}
.jzgc-category:hover { transform: translateY(-2px); border-color: #cfa76e; box-shadow: 0 6px 14px rgba(53,32,21,.07); }
.jzgc-category.is-active { border-color: #b88748; background: #fffaf3; box-shadow: inset 0 0 0 1px #b88748; color: #7d4d22; }
.jzgc-category-icon { width: 29px; height: 29px; display: grid; place-items: center; color: #9c542f; }
.jzgc-category-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jzgc-category span:last-child { display: block; max-width: 100%; text-align: center; line-height: 1.25; overflow-wrap: anywhere; }

.jzgc-field { margin-top: 14px; }
.jzgc-field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 800; color: #443832; }
.jzgc-field input, .jzgc-field textarea {
    width: 100%; border: 1px solid #dfd9d3; border-radius: 8px; background: #fff; padding: 12px 13px;
    color: #2d2622; font: inherit; font-size: 14px; outline: none; transition: .2s ease;
}
.jzgc-field input:focus, .jzgc-field textarea:focus { border-color: #b88748; box-shadow: 0 0 0 3px rgba(184,135,72,.13); }
.jzgc-field textarea { resize: vertical; min-height: 112px; padding-bottom: 28px; }
.jzgc-textarea-wrap { position: relative; }
.jzgc-counter { position: absolute; right: 10px; bottom: 9px; color: #8b8179; font-size: 11px; }
.jzgc-counter b { font-weight: 500; }

.jzgc-font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.jzgc-font-grid label { display: block; color: #443832; font-size: 11px; font-weight: 800; }
.jzgc-font-grid select {
    width: 100%; margin-top: 7px; min-height: 42px; padding: 9px 34px 9px 11px;
    border: 1px solid #dfd9d3; border-radius: 8px; background: #fff;
    color: #2d2622; font: 500 13px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer; outline: none;
}
.jzgc-font-grid select:focus { border-color: #b88748; box-shadow: 0 0 0 3px rgba(184,135,72,.13); }
.jzgc-heading-style-select {
    width: 100%; margin-top: 7px; min-height: 42px; padding: 9px 34px 9px 11px;
    border: 1px solid #dfd9d3; border-radius: 8px; background: #fff;
    color: #2d2622; font: 500 13px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer; outline: none;
}
.jzgc-heading-style-select:focus { border-color: #b88748; box-shadow: 0 0 0 3px rgba(184,135,72,.13); }

.jzgc-design-category-field {
    display: block; margin: 0 0 13px; color: #443832; font-size: 11px; font-weight: 800;
}
.jzgc-design-category-select {
    width: 100%; margin-top: 7px; min-height: 42px; padding: 9px 34px 9px 11px;
    border: 1px solid #dfd9d3; border-radius: 8px; background: #fff;
    color: #2d2622; font: 500 13px Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer; outline: none;
}
.jzgc-design-category-select:focus { border-color: #b88748; box-shadow: 0 0 0 3px rgba(184,135,72,.13); }
.jzgc-template.is-category-hidden { display: none !important; }
.jzgc-template-empty {
    padding: 20px 14px; border: 1px dashed #d9c8b5; border-radius: 10px;
    background: #fffaf4; color: #806f61; font-size: 12px; text-align: center;
}
.jzgc-template-empty[hidden] { display: none !important; }

.jzgc-template-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.jzgc-template, .jzgc-example-row button {
    border: 0; background: transparent; padding: 0; font: inherit; color: #5a5049; cursor: pointer;
}
.jzgc-template .thumb { border: 2px solid transparent; }
.jzgc-template.is-active .thumb { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184,135,72,.17); }
.jzgc-template span, .jzgc-example-row span { display: block; margin-top: 5px; font-size: 10px; font-weight: 700; }
.thumb { display: block; aspect-ratio: 4/5; width: 100%; min-height: 74px; border-radius: 7px; overflow: hidden; position: relative; box-shadow: 0 3px 8px rgba(30,20,15,.12); }
.thumb::before, .thumb::after { content: ""; position: absolute; }
.thumb::before { inset: 8px; border: 1px solid rgba(255,255,255,.72); opacity: .92; border-radius: 4px; }
.thumb::after { display: none; }
.thumb-botanical { background: radial-gradient(circle at 12% 12%, rgba(176,137,77,.22), transparent 24%), linear-gradient(145deg, #fffdf7, #efe5d3); color: #9f773e; }
.thumb-midnight { background: radial-gradient(circle at 12% 14%, rgba(255,255,255,.82), transparent 22%), linear-gradient(145deg, #f5f9ff, #cfe0f6); color: #4b6f99; }
.thumb-blush { background: radial-gradient(circle at 15% 85%, rgba(210,106,137,.34), transparent 28%), linear-gradient(145deg, #fff9fa, #f5dce3); color: #b85f79; }
.thumb-emerald { background: radial-gradient(circle at 84% 12%, rgba(255,255,255,.66), transparent 24%), linear-gradient(145deg, #f7fbe7, #dceb99); color: #7f9a24; }
.thumb-modern { background: linear-gradient(135deg, #f3e8dc 0 33%, #7c302c 33% 68%, #f8f2ea 68%); color: #6c2b29; }

.jzgc-color-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding: 4px 4px 6px;
    scrollbar-width: thin;
}
.jzgc-color,
.jzgc-color:hover,
.jzgc-color:focus,
.jzgc-color:focus-visible,
.jzgc-color.is-active {
    flex: 0 0 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 2px solid #fff !important;
    background: var(--swatch) !important;
    background-color: var(--swatch) !important;
    background-image: none !important;
    cursor: pointer;
    box-shadow: 0 0 0 1px #cfc7be !important;
    outline: none !important;
    transition: transform .18s ease, box-shadow .18s ease;
}
.jzgc-color:hover { transform: scale(1.06); }
.jzgc-color::before,
.jzgc-color::after { display: none !important; content: none !important; }
.jzgc-color.is-active {
    transform: none;
    box-shadow: 0 0 0 1px #cfc7be, 0 0 0 4px rgba(30,30,30,.22) !important;
}

.jzgc-border-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.jzgc-border-option { border: 0; background: transparent; padding: 0; color: #5a5049; font: inherit; cursor: pointer; }
.jzgc-border-option span { display: block; margin-top: 6px; font-size: 9px; line-height: 1.2; font-weight: 800; }
.jzgc-border-thumb {
    position: relative; display: block; width: 100%; aspect-ratio: 4/5; min-height: 72px;
    border-radius: 7px; background: linear-gradient(145deg, #fffdf8, #eee4d6);
    color: #b88748; box-shadow: 0 3px 8px rgba(30,20,15,.12); overflow: hidden;
    border: 2px solid transparent; transition: .2s ease;
}
.jzgc-border-option:hover .jzgc-border-thumb { transform: translateY(-2px); }
.jzgc-border-option.is-active .jzgc-border-thumb { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(184,135,72,.17), 0 4px 10px rgba(30,20,15,.12); }
.jzgc-border-thumb::before, .jzgc-border-thumb::after { content: ""; position: absolute; pointer-events: none; }
.border-thumb-floral::before { inset: 10% 11%; border: 1.5px solid currentColor; border-radius: 48% 48% 8% 8% / 18% 18% 7% 7%; }
.border-thumb-floral::after { width: 16px; height: 8px; left: 8%; top: 14%; border-top: 2px solid currentColor; border-radius: 50%; box-shadow: 55px 67px 0 -1px currentColor; transform: rotate(-28deg); opacity: .75; }
.border-thumb-royal::before { inset: 10%; border: 2px solid currentColor; border-radius: 8px; box-shadow: 0 0 0 4px rgba(184,135,72,.20), inset 0 0 0 3px rgba(184,135,72,.16); }
.border-thumb-royal::after { width: 8px; height: 8px; top: 8%; left: 50%; background: currentColor; transform: translateX(-50%) rotate(45deg); box-shadow: 0 65px 0 currentColor; }
.border-thumb-vine::before { inset: 11%; background:
    linear-gradient(currentColor,currentColor) left top/38% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) left top/1.5px 30% no-repeat,
    linear-gradient(currentColor,currentColor) right top/38% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) right top/1.5px 30% no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/38% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) left bottom/1.5px 30% no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/38% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) right bottom/1.5px 30% no-repeat; }
.border-thumb-vine::after { width: 17px; height: 17px; left: 7%; top: 8%; border: 2px solid currentColor; border-radius: 70% 0 70% 0; box-shadow: 58px 58px 0 -2px currentColor; transform: rotate(-12deg); opacity: .65; }
.border-thumb-deco::before { inset: 9%; border: 2px solid currentColor; clip-path: polygon(14% 0,86% 0,100% 14%,100% 86%,86% 100%,14% 100%,0 86%,0 14%); }
.border-thumb-deco::after { inset: 15%; border: 1px solid currentColor; clip-path: polygon(11% 0,89% 0,100% 11%,100% 89%,89% 100%,11% 100%,0 89%,0 11%); opacity: .55; }
.border-thumb-modern::before { left: 12%; right: 12%; top: 14%; bottom: 14%; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.border-thumb-modern::after { width: 7px; height: 7px; left: 50%; top: 11%; background: currentColor; transform: translateX(-50%) rotate(45deg); box-shadow: 0 66px 0 currentColor; }

.jzgc-form-actions { display: grid; grid-template-columns: 1.4fr .8fr; gap: 10px; margin-top: 24px; }
.jzgc-btn { min-height: 47px; border-radius: 8px; border: 1px solid transparent; padding: 11px 15px; font: inherit; font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .01em; cursor: pointer; transition: .2s ease; }
.jzgc-btn:hover { transform: translateY(-1px); }
.jzgc-btn:disabled { opacity: .55; cursor: wait; transform: none; }
.jzgc-btn-primary { background: linear-gradient(135deg, #4b2b1c, #27150e); color: #fff; box-shadow: 0 8px 18px rgba(53,32,21,.19); }
.jzgc-btn-light { background: #fff; border-color: #ded8d2; color: #3d332d; }

.jzgc-preview-sticky { position: sticky; top: 20px; }
.jzgc-card-stage { display: flex; justify-content: center; padding: 10px; border-radius: 16px; background: linear-gradient(145deg, #f8f2ea, #fff); border: 1px solid #eee5da; box-shadow: 0 10px 30px rgba(56,36,23,.08); }
.jzgc-card {
    --card-text: #4b3224;
    --font-heading: 'Playfair Display', serif;
    --font-recipient: 'Cormorant Garamond', serif;
    --font-message: 'Lora', serif;
    --font-sender: 'Allura', cursive;
    width: min(100%, 480px); aspect-ratio: 4/5; position: relative; overflow: hidden;
    color: var(--card-text); background: #f7efe3; border-radius: 9px; box-shadow: 0 14px 30px rgba(44,28,17,.19);
}
.jzgc-card-inner { position: absolute; inset: 0; overflow: hidden; padding: 0; }
.jzgc-card-inner::before { content: none; }
.jzgc-card-content { position: absolute; z-index: 3; inset: 0; width: 100%; margin: 0; text-align: center; }
.jzgc-text-panel { position: absolute; z-index: 1; pointer-events: none; overflow: hidden; isolation: isolate; left: 8.5%; top: 7.2%; width: 83%; height: 84.6%; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.09)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 10px 24px rgba(108,80,53,.04); }
.jzgc-text-panel::before, .jzgc-text-panel::after { content: ""; position: absolute; pointer-events: none; }
.jzgc-text-panel::before { inset: -12%; background: radial-gradient(ellipse at center, rgba(255,255,255,.54) 0%, rgba(255,255,255,.34) 40%, rgba(255,255,255,.18) 62%, rgba(255,255,255,.07) 76%, rgba(255,255,255,0) 100%); }
.jzgc-text-panel::after { inset: 0; border-radius: inherit; box-shadow: inset 0 0 46px 14px rgba(255,255,255,.20), inset 0 0 84px 24px rgba(255,255,255,.08); }
.jzgc-card-heading {
    position: absolute; top: 13.2%; left: 11%; width: 78%; height: 14.8%; margin: 0; overflow: visible;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    color: var(--accent); line-height: 1; overflow-wrap: anywhere; text-align: center;
}
.jzgc-card-heading.is-style-1 { gap: 5px; }
.jzgc-card-heading .jzgc-heading-script { display: block; font-family: 'Great Vibes', cursive; font-size: clamp(24px, 4vw, 43px); line-height: .78; font-weight: 400; }
.jzgc-card-heading .jzgc-heading-main { display: block; margin-top: 0; font-family: 'Keep Calm', sans-serif; font-size: clamp(20px, 3.85vw, 40px); line-height: .88; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.jzgc-card-heading .jzgc-heading-main.is-long { font-size: clamp(16px, 3.05vw, 31px); letter-spacing: .025em; }
.jzgc-card-heading .jzgc-heading-main.is-very-long { font-size: clamp(13px, 2.45vw, 25px); letter-spacing: .015em; line-height: .92; }
.jzgc-card-heading.is-style-2 { gap: 5px; }
.jzgc-card-heading.is-style-2 .jzgc-heading-main { margin-top: 0; font-size: clamp(15px, 2.7vw, 28px); line-height: .94; font-weight: 700; letter-spacing: .05em; }
.jzgc-card-heading.is-style-2 .jzgc-heading-main.is-long { font-size: clamp(13px, 2.35vw, 24px); letter-spacing: .035em; }
.jzgc-card-heading.is-style-2 .jzgc-heading-main.is-very-long { font-size: clamp(11px, 2vw, 20px); letter-spacing: .018em; line-height: .96; }
.jzgc-card-heading.is-style-2 .jzgc-heading-script { margin-top: 0; font-family: 'Dancing Script', cursive; font-size: clamp(30px, 5.4vw, 60px); line-height: .82; font-weight: 700; }
.jzgc-card-heading.is-style-3 { gap: 0; }
.jzgc-card-heading.is-style-3 .jzgc-heading-doodle-lead {
    display: block; font-family: 'Candy Fruits', cursive; font-size: clamp(19px, 3.15vw, 35px); line-height: .96;
    font-weight: 400; letter-spacing: .02em; text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(255,255,255,.78), 2px 0 0 rgba(255,255,255,.78), -2px 0 0 rgba(255,255,255,.78), 0 -2px 0 rgba(255,255,255,.78);
}
.jzgc-card-heading.is-style-3 .jzgc-heading-doodle-main {
    display: block; margin-top: -2px; font-family: 'Candy Fruits', cursive; font-size: clamp(24px, 4.35vw, 48px); line-height: .92;
    font-weight: 800; letter-spacing: .015em; text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(255,255,255,.86), 2px 0 0 rgba(255,255,255,.86), -2px 0 0 rgba(255,255,255,.86), 0 -2px 0 rgba(255,255,255,.86), 3px 3px 0 rgba(0,0,0,.08);
}
.jzgc-card-heading.is-style-3 .jzgc-heading-doodle-main.is-long { font-size: clamp(21px, 3.85vw, 41px); }
.jzgc-card-heading.is-style-3 .jzgc-heading-doodle-main.is-very-long { font-size: clamp(17px, 3.05vw, 34px); line-height: .95; }
.jzgc-card-heading.is-style-4 { gap: 0; }
.jzgc-card-heading.is-style-4 .jzgc-heading-brush-lead {
    display: block; font-family: 'Edo SZ', cursive; font-size: clamp(17px, 2.8vw, 31px); line-height: .9;
    font-weight: 400; letter-spacing: .025em; text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,.62);
}
.jzgc-card-heading.is-style-4 .jzgc-heading-brush-main {
    display: block; margin-top: -2px; font-family: 'Edo SZ', cursive; font-size: clamp(25px, 4.65vw, 50px); line-height: .9;
    font-weight: 400; letter-spacing: .015em; text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,.68);
}
.jzgc-card-heading.is-style-4 .jzgc-heading-brush-main.is-long { font-size: clamp(21px, 3.85vw, 42px); }
.jzgc-card-heading.is-style-4 .jzgc-heading-brush-main.is-very-long { font-size: clamp(17px, 3.1vw, 34px); line-height: .93; }
.jzgc-card-heading.is-style-5 { gap: 4px; }
.jzgc-card-heading.is-style-5 .jzgc-heading-script { display: block; font-family: 'Breathing', cursive; font-size: clamp(17px, 3vw, 31px); line-height: .84; font-weight: 400; }
.jzgc-card-heading.is-style-5 .jzgc-heading-main { display: block; margin-top: -1px; font-family: 'Gentle Hearts', cursive; font-size: clamp(24px, 4.25vw, 45px); line-height: .9; font-weight: 400; letter-spacing: .018em; text-transform: uppercase; }
.jzgc-card-heading.is-style-5 .jzgc-heading-main.is-long { font-size: clamp(20px, 3.5vw, 36px); letter-spacing: .018em; }
.jzgc-card-heading.is-style-5 .jzgc-heading-main.is-very-long { font-size: clamp(16px, 2.85vw, 29px); letter-spacing: .01em; line-height: .94; }
.jzgc-card-recipient {
    position: absolute; top: 33.6%; left: 10%; width: 80%; height: 13.5%; margin: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-recipient); font-size: clamp(23px, 4vw, 43px); line-height: 1.06; font-weight: 600; overflow-wrap: anywhere;
}
.jzgc-card-message {
    position: absolute; top: 47%; left: 12%; width: 76%; height: 24%; margin: 0; max-width: none; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-message); font-size: clamp(13px, 1.85vw, 19px); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere;
}
.jzgc-card-symbol { position: absolute; top: 73.5%; left: 0; width: 100%; margin: 0; color: var(--accent); font-size: clamp(15px, 2vw, 23px); line-height: 1; }
.jzgc-card-from { position: absolute; top: 79.2%; left: 0; width: 100%; margin: 0; font-size: clamp(11px, 1.4vw, 15px); line-height: 1; }
.jzgc-card-sender {
    position: absolute; top: 83%; left: 12%; width: 76%; height: 9%; margin: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-sender); font-size: clamp(21px, 3.5vw, 34px); line-height: 1.05; color: var(--accent); overflow-wrap: anywhere;
}
.jzgc-card-brand { position: absolute; z-index: 4; left: 50%; bottom: 2.35%; transform: translateX(-50%); width: 94%; color: var(--accent); text-align: center; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.jzgc-card-brand-logo { display: block; width: clamp(16px, 2.2vw, 23px); height: clamp(15px, 2vw, 21px); background: currentColor; opacity: .88; filter: drop-shadow(0 0 1px rgba(255,255,255,.26)); -webkit-mask-image: var(--brand-logo); mask-image: var(--brand-logo); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.jzgc-card-brandline { display: block; font-family: Arial, sans-serif; font-size: clamp(6px, .74vw, 8.8px); font-weight: 800; letter-spacing: .045em; line-height: 1; opacity: .88; white-space: nowrap; text-transform: uppercase; text-shadow: 0 0 1px rgba(255,255,255,.22); }
.jzgc-border-art { display: none !important; }


.jzgc-border-art i { position: absolute; display: none; color: inherit; }
.border-floral .jzgc-border-art { inset: 4.5%; border: 1.5px solid color-mix(in srgb, var(--accent) 76%, transparent); border-radius: 48% 48% 7% 7% / 17% 17% 6% 6%; opacity: .86; }
.border-floral .jzgc-border-art i { display: block; width: 34px; height: 15px; border-top: 2px solid currentColor; border-radius: 50%; opacity: .72; }
.border-floral .jzgc-border-art .tl { left: -5px; top: 8%; transform: rotate(-30deg); }
.border-floral .jzgc-border-art .tr { right: -5px; top: 8%; transform: scaleX(-1) rotate(-30deg); }
.border-floral .jzgc-border-art .bl { left: -5px; bottom: 5%; transform: rotate(30deg); }
.border-floral .jzgc-border-art .br { right: -5px; bottom: 5%; transform: scaleX(-1) rotate(30deg); }

.border-royal .jzgc-border-art { inset: 5%; border: 2px solid color-mix(in srgb, var(--accent) 88%, transparent); border-radius: 13px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 15%, transparent), inset 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.border-royal .jzgc-border-art::before, .border-royal .jzgc-border-art::after { content: ""; position: absolute; left: 50%; width: 11px; height: 11px; background: var(--accent); transform: translateX(-50%) rotate(45deg); }
.border-royal .jzgc-border-art::before { top: -7px; }
.border-royal .jzgc-border-art::after { bottom: -7px; }

.border-vine .jzgc-border-art { inset: 5%; background:
    linear-gradient(var(--accent),var(--accent)) left top/34% 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left top/1.5px 25% no-repeat,
    linear-gradient(var(--accent),var(--accent)) right top/34% 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right top/1.5px 25% no-repeat,
    linear-gradient(var(--accent),var(--accent)) left bottom/34% 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) left bottom/1.5px 25% no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom/34% 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) right bottom/1.5px 25% no-repeat; opacity: .82; }
.border-vine .jzgc-border-art i { display: block; width: 28px; height: 28px; border: 2px solid currentColor; border-radius: 70% 0 70% 0; opacity: .55; }
.border-vine .jzgc-border-art .tl { left: -3px; top: -3px; transform: rotate(-10deg); }
.border-vine .jzgc-border-art .tr { right: -3px; top: -3px; transform: scaleX(-1) rotate(-10deg); }
.border-vine .jzgc-border-art .bl { left: -3px; bottom: -3px; transform: scaleY(-1) rotate(-10deg); }
.border-vine .jzgc-border-art .br { right: -3px; bottom: -3px; transform: scale(-1) rotate(-10deg); }

.border-deco .jzgc-border-art { inset: 4.6%; border: 2px solid color-mix(in srgb, var(--accent) 86%, transparent); clip-path: polygon(8% 0,92% 0,100% 7%,100% 93%,92% 100%,8% 100%,0 93%,0 7%); box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--accent) 11%, transparent); }
.border-deco .jzgc-border-art::before { content: ""; position: absolute; inset: 11px; border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent); clip-path: inherit; }

.border-modern-luxe .jzgc-border-art { inset: 6%; border-top: 2px solid color-mix(in srgb, var(--accent) 82%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--accent) 82%, transparent); }
.border-modern-luxe .jzgc-border-art::before, .border-modern-luxe .jzgc-border-art::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; background: var(--accent); transform: translateX(-50%) rotate(45deg); }
.border-modern-luxe .jzgc-border-art::before { top: -5px; }
.border-modern-luxe .jzgc-border-art::after { bottom: -5px; }
.border-modern-luxe .jzgc-border-art i { display: block; width: 1px; height: 17%; background: var(--accent); opacity: .68; }
.border-modern-luxe .jzgc-border-art .tl { left: 0; top: 0; }
.border-modern-luxe .jzgc-border-art .tr { right: 0; top: 0; }
.border-modern-luxe .jzgc-border-art .bl { left: 0; bottom: 0; }
.border-modern-luxe .jzgc-border-art .br { right: 0; bottom: 0; }

.jzgc-deco { position: absolute; z-index: 1; width: 38%; height: 38%; border-radius: 60% 40% 65% 35%; opacity: .48; pointer-events: none; }

.template-botanical { background: radial-gradient(circle at 48% 45%, rgba(255,255,255,.92), transparent 44%), linear-gradient(145deg, #fffdf7, #eee2cf); }
.template-botanical::before, .template-botanical::after {
    content: ""; position: absolute; width: 42%; height: 64%; z-index: 1; opacity: .42;
    background:
        radial-gradient(ellipse at 20% 20%, var(--accent) 0 5%, transparent 6%),
        radial-gradient(ellipse at 38% 35%, var(--accent) 0 7%, transparent 8%),
        radial-gradient(ellipse at 26% 52%, var(--accent) 0 6%, transparent 7%),
        radial-gradient(ellipse at 48% 70%, var(--accent) 0 7%, transparent 8%),
        linear-gradient(72deg, transparent 48%, var(--accent) 49% 51%, transparent 52%);
}
.template-botanical::before { left: -7%; top: 2%; transform: rotate(-19deg); }
.template-botanical::after { right: -8%; bottom: -4%; transform: rotate(164deg); }
.template-botanical .jzgc-deco-one { left: -16%; bottom: 12%; background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 26%, transparent), transparent 64%); }
.template-botanical .jzgc-deco-two { right: -12%; top: 6%; background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%); }

.template-midnight { --card-text: #2f4768; background: radial-gradient(circle at 28% 12%, rgba(255,255,255,.90), transparent 24%), linear-gradient(160deg, #f6faff, #d7e6f7); }
.template-midnight::before, .template-midnight::after { content: "✦"; position: absolute; color: var(--accent); font-size: 96px; opacity: .10; }
.template-midnight::before { left: -18px; top: -26px; }
.template-midnight::after { right: -10px; bottom: -24px; transform: rotate(25deg); }
.template-midnight .jzgc-deco-one, .template-midnight .jzgc-deco-two { width: 42%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .42; }
.template-midnight .jzgc-deco-one { top: 10%; left: 7%; }
.template-midnight .jzgc-deco-two { bottom: 11%; right: 7%; }

.template-blush { --card-text: #573b3f; background: radial-gradient(circle at 18% 10%, #fff, transparent 30%), linear-gradient(160deg, #fffafa, #f3d6df); }
.template-blush::before, .template-blush::after {
    content: ""; position: absolute; width: 48%; height: 48%; z-index: 1; opacity: .33;
    background: radial-gradient(circle at 50% 50%, var(--accent) 0 8%, transparent 9%), radial-gradient(circle at 30% 40%, var(--accent) 0 6%, transparent 7%), radial-gradient(circle at 68% 32%, var(--accent) 0 7%, transparent 8%), radial-gradient(circle at 58% 66%, var(--accent) 0 7%, transparent 8%);
}
.template-blush::before { left: -12%; bottom: -10%; }
.template-blush::after { right: -10%; top: -10%; }

.template-emerald { --card-text: #495c1d; background: radial-gradient(circle at 18% 10%, rgba(255,255,255,.85), transparent 28%), linear-gradient(160deg, #fbfeef, #deef9e); }
.template-emerald::before, .template-emerald::after { content: ""; position: absolute; width: 44%; height: 68%; opacity: .12; z-index: 1; background: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 14px, var(--accent) 15px 17px, transparent 18px 28px); }
.template-emerald::before { left: -17%; top: -8%; transform: rotate(28deg); }
.template-emerald::after { right: -17%; bottom: -8%; transform: rotate(-152deg); }

.template-modern { --card-text: #38201d; background: linear-gradient(145deg, #f7eee3 0 26%, #fff 26% 72%, #f1e0d1 72%); }
.template-modern::before { content: ""; position: absolute; width: 34%; height: 100%; right: 0; top: 0; background: color-mix(in srgb, var(--accent) 18%, transparent); clip-path: polygon(54% 0,100% 0,100% 100%,0 100%); }

.jzgc-ready { text-align: center; padding: 16px 0 0; }
.jzgc-ready h3 { margin: 0 0 3px; font-size: 17px; text-transform: uppercase; }
.jzgc-ready > p { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.jzgc-share-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jzgc-action-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    color: #fff; border: 0; min-height: 50px;
    box-shadow: 0 8px 18px rgba(34, 27, 21, .14);
}
.jzgc-action-btn svg {
    width: 18px; height: 18px; flex: 0 0 18px;
    fill: none; stroke: currentColor; stroke-width: 1.9;
    stroke-linecap: round; stroke-linejoin: round;
}
.jzgc-action-btn:hover { filter: brightness(1.04); box-shadow: 0 10px 22px rgba(34, 27, 21, .18); }
.jzgc-btn-download { background: linear-gradient(135deg, #d7ad55, #ae7830); }
.jzgc-btn-share { background: linear-gradient(135deg, #3f91ec, #225fbd); }
.jzgc-btn-whatsapp { background: linear-gradient(135deg, #31d86f, #128c5c); }
.jzgc-new-card { margin-top: 10px; border: 0; background: transparent; color: #34698b; font: inherit; font-weight: 800; font-size: 12px; cursor: pointer; text-transform: uppercase; }
.jzgc-status { min-height: 18px; margin: 8px 0 0 !important; font-size: 12px !important; color: #4f7652 !important; }

.jzgc-softsell { margin-top: 14px; border-radius: 12px; background: linear-gradient(135deg, #faf1e4, #fff); border: 1px solid #f0e2d1; padding: 16px; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.jzgc-softsell > span { color: var(--gold); font-size: 22px; }
.jzgc-softsell strong { display: block; margin-bottom: 3px; }
.jzgc-softsell p { margin: 0; color: #71675f; font-size: 12px; line-height: 1.45; }
.jzgc-softsell a { background: var(--brown); color: #fff !important; text-decoration: none !important; border-radius: 7px; padding: 11px 13px; font-size: 10px; font-weight: 850; text-transform: uppercase; text-align: center; }

.jzgc-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.jzgc-info-box { padding: 22px; }
.jzgc-info-box h3 { margin: 0 0 17px; text-transform: uppercase; font-size: 15px; }
.jzgc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.jzgc-steps > div { text-align: center; }
.jzgc-steps b { display: grid; place-items: center; width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 50%; background: #f7eee3; color: #9a682e; }
.jzgc-steps strong { display: block; font-size: 11px; text-transform: uppercase; }
.jzgc-steps span { display: block; margin-top: 5px; color: #766d66; font-size: 11px; line-height: 1.45; }
.jzgc-example-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.jzgc-example-row button:hover .thumb { transform: translateY(-2px); }
.jzgc-example-row .thumb { min-height: 105px; transition: .2s ease; }

.jzgc-benefits { margin-top: 24px; padding: 18px 20px; background: #faf5ef; border-radius: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.jzgc-benefits > div { display: flex; align-items: center; gap: 10px; }
.jzgc-benefits b { width: 31px; height: 31px; border-radius: 50%; background: #fff; color: #9b6a34; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(58,35,22,.08); }
.jzgc-benefits span { color: #766b63; font-size: 10px; line-height: 1.4; }
.jzgc-benefits strong { display: block; color: #3d312b; font-size: 11px; text-transform: uppercase; }

@media (max-width: 980px) {
    .jzgc-main-grid { grid-template-columns: 1fr; }
    .jzgc-preview-sticky { position: static; }
    .jzgc-card { width: min(100%, 540px); }
}

@media (max-width: 720px) {
    .jzgc-app { width: 100%; max-width: 100%; padding: 22px 10px 32px; overflow-x: hidden; }
    .jzgc-main-grid { width: 100%; gap: 18px; }
    .jzgc-hero-board { padding: 16px 14px; border-radius: 18px; }
    .jzgc-hero-board::before { inset: 10px; border-radius: 14px; }
    .jzgc-hero p { margin-top: 12px; font-size: 14px; }
    .jzgc-form-panel { width: 100%; padding: 14px; overflow: hidden; }
    .jzgc-font-grid { grid-template-columns: 1fr; }
    .jzgc-border-list { display: grid; grid-auto-flow: column; grid-auto-columns: 76px; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; scrollbar-width: thin; }
    .jzgc-border-option { min-width: 0; width: 76px; }

    .jzgc-template-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
        padding: 4px 4px 12px;
        scrollbar-width: thin;
    }
    .jzgc-template {
        display: block;
        flex: 0 0 104px !important;
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        margin: 0 !important;
        padding: 0 !important;
        scroll-snap-align: start;
        overflow: visible;
    }
    .jzgc-template .thumb {
        width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 5;
        border-radius: 9px;
    }
    .jzgc-template > span {
        display: block;
        width: 100%;
        min-height: 30px;
        margin-top: 7px;
        padding: 0 2px;
        font-size: 10px;
        line-height: 1.25;
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .jzgc-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .jzgc-category { min-width: 0; min-height: 82px; font-size: 11px; padding: 10px 6px; }
    .jzgc-category span:last-child { font-size: 11px; }
    .jzgc-form-actions { grid-template-columns: 1fr; }
    .jzgc-share-actions { grid-template-columns: 1fr; gap: 9px; }
    .jzgc-action-btn { min-height: 48px; }
    .jzgc-softsell { grid-template-columns: auto 1fr; }
    .jzgc-softsell a { grid-column: 1 / -1; }
    .jzgc-bottom-grid { grid-template-columns: 1fr; }
    .jzgc-benefits { grid-template-columns: 1fr 1fr; }
    .jzgc-card-stage { width: 100%; padding: 6px; overflow: hidden; }
    .jzgc-card { width: 100%; max-width: 100%; }

    /* Saiz tajuk responsif untuk telefon sahaja. Desktop kekal tanpa perubahan. */
    .jzgc-card-heading .jzgc-heading-script { font-size: clamp(27px, 8.5vw, 35px); }
    .jzgc-card-heading .jzgc-heading-main { font-size: clamp(25px, 7.8vw, 33px); }
    .jzgc-card-heading .jzgc-heading-main.is-long { font-size: clamp(19px, 5.9vw, 25px); }
    .jzgc-card-heading .jzgc-heading-main.is-very-long { font-size: clamp(16px, 5vw, 21px); }

    .jzgc-card-heading.is-style-2 .jzgc-heading-main { font-size: clamp(18px, 5.8vw, 23px); }
    .jzgc-card-heading.is-style-2 .jzgc-heading-main.is-long { font-size: clamp(16px, 5vw, 20px); }
    .jzgc-card-heading.is-style-2 .jzgc-heading-main.is-very-long { font-size: clamp(14px, 4.3vw, 18px); }
    .jzgc-card-heading.is-style-2 .jzgc-heading-script { font-size: clamp(34px, 11vw, 46px); }

    .jzgc-card-heading.is-style-3 .jzgc-heading-doodle-lead { font-size: clamp(22px, 7vw, 28px); }
    .jzgc-card-heading.is-style-3 .jzgc-heading-doodle-main { font-size: clamp(29px, 9.5vw, 39px); }
    .jzgc-card-heading.is-style-3 .jzgc-heading-doodle-main.is-long { font-size: clamp(22px, 7vw, 29px); }
    .jzgc-card-heading.is-style-3 .jzgc-heading-doodle-main.is-very-long { font-size: clamp(19px, 6vw, 25px); }

    .jzgc-card-heading.is-style-4 .jzgc-heading-brush-lead { font-size: clamp(20px, 6.5vw, 26px); }
    .jzgc-card-heading.is-style-4 .jzgc-heading-brush-main { font-size: clamp(29px, 9.3vw, 38px); }
    .jzgc-card-heading.is-style-4 .jzgc-heading-brush-main.is-long { font-size: clamp(25px, 8vw, 32px); }
    .jzgc-card-heading.is-style-4 .jzgc-heading-brush-main.is-very-long { font-size: clamp(21px, 6.7vw, 27px); }

    .jzgc-card-heading.is-style-5 .jzgc-heading-script { font-size: clamp(20px, 6.5vw, 26px); }
    .jzgc-card-heading.is-style-5 .jzgc-heading-main { font-size: clamp(27px, 8.6vw, 35px); }
    .jzgc-card-heading.is-style-5 .jzgc-heading-main.is-long { font-size: clamp(23px, 7.3vw, 30px); }
    .jzgc-card-heading.is-style-5 .jzgc-heading-main.is-very-long { font-size: clamp(19px, 6vw, 25px); }
}

@media (max-width: 440px) {
    .jzgc-app { padding-inline: 8px; }
    .jzgc-template { flex-basis: 96px !important; width: 96px !important; min-width: 96px !important; max-width: 96px !important; }
    .jzgc-hero h2 { font-size: clamp(24px, 10vw, 42px); }
    .jzgc-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jzgc-category-icon { width: 24px; height: 24px; }
    .jzgc-category-icon svg { width: 23px; height: 23px; }
    .jzgc-card-stage { padding: 4px; }
    .jzgc-card-message { line-height: 1.55; }
    .jzgc-steps { grid-template-columns: 1fr; gap: 18px; }
    .jzgc-benefits { grid-template-columns: 1fr; }
}


/* v0.1.7 uploaded premium background templates */
.thumb-botanical { background: url('../images/bg-goldflora-2026.png?v=0141') center center / cover no-repeat; color: #bc9658; }
.thumb-midnight { background: url('../images/bg-skyblue.png') center center / cover no-repeat; color: #5c84bf; }
.thumb-blush { background: url('../images/bg-blush.png') center center / cover no-repeat; color: #d46d8e; }
.thumb-emerald { background: url('../images/bg-lime.png') center center / cover no-repeat; color: #86ab2a; }
.thumb-modern { background: url('../images/bg-burgundy.png') center center / cover no-repeat; color: #8c2f47; }

.thumb-sapphire { background: url('../images/bg-sapphire-night-2026.png?v=0141') center center / cover no-repeat; color: #3d4f86; }
.thumb-turquoise { background: url('../images/bg-turquoise-tropica.png') center center / cover no-repeat; color: #3d7c7a; }
.thumb-lavender { background: url('../images/bg-lavender-mist.png') center center / cover no-repeat; color: #7f72a4; }
.thumb-peach { background: url('../images/bg-peach-pop.png') center center / cover no-repeat; color: #d27b76; }
.thumb-frost { background: url('../images/bg-frost-blue.png') center center / cover no-repeat; color: #7a8fb7; }


.thumb-abstract-rose-copper { background: url('../images/bg-abstract-rose-copper.png?v=0146') center center / cover no-repeat; color: #9d786e; }
.thumb-abstract-gold-noir { background: url('../images/bg-abstract-gold-noir.png?v=0146') center center / cover no-repeat; color: #b08d40; }
.thumb-abstract-ruby-prism { background: url('../images/bg-abstract-ruby-prism.png?v=0146') center center / cover no-repeat; color: #8a4d5b; }
.thumb-abstract-terra-arc { background: url('../images/bg-abstract-terra-arc.png?v=0146') center center / cover no-repeat; color: #9c6b3f; }
.thumb-abstract-aqua-flow { background: url('../images/bg-abstract-aqua-flow.png?v=0146') center center / cover no-repeat; color: #2d89a0; }
.thumb-abstract-coral-glow { background: url('../images/bg-abstract-coral-glow.png?v=0146') center center / cover no-repeat; color: #d37b63; }
.thumb-abstract-indigo-ember { background: url('../images/bg-abstract-indigo-ember.png?v=0146') center center / cover no-repeat; color: #5d5ab8; }
.thumb-abstract-emerald-aura { background: url('../images/bg-abstract-emerald-aura.png?v=0146') center center / cover no-repeat; color: #4a8755; }
.thumb-abstract-dream-lilac { background: url('../images/bg-abstract-dream-lilac.png?v=0146') center center / cover no-repeat; color: #8c7bd2; }
.thumb-abstract-noir-deco { background: url('../images/bg-abstract-noir-deco.png?v=0146') center center / cover no-repeat; color: #9c7b44; }

.thumb-kids-rainbow { background: url('../images/bg-kids-rainbow-party.png?v=0141') center center / cover no-repeat; color: #8a7fe0; }
.thumb-kids-unicorn { background: url('../images/bg-kids-unicorn-galaxy.png?v=0141') center center / cover no-repeat; color: #8d6dff; }
.thumb-kids-truck { background: url('../images/bg-kids-mighty-truck.png?v=0141') center center / cover no-repeat; color: #f3a533; }
.thumb-kids-racer { background: url('../images/bg-kids-speed-racer.png?v=0141') center center / cover no-repeat; color: #39a1ff; }
.thumb-kids-hero { background: url('../images/bg-kids-hero-city.png?v=0141') center center / cover no-repeat; color: #4a67ff; }
.thumb-kids-bricks { background: url('../images/bg-kids-brick-world.png?v=0141') center center / cover no-repeat; color: #3b8cff; }
.thumb-kids-space { background: url('../images/bg-kids-space-adventure.png?v=0141') center center / cover no-repeat; color: #8168ff; }
.thumb-kids-sweet { background: url('../images/bg-kids-sweet-party.png?v=0141') center center / cover no-repeat; color: #ff7aa0; }
.thumb-kids-dino { background: url('../images/bg-kids-dino-land.png?v=0141') center center / cover no-repeat; color: #78b84f; }
.thumb-kids-jungle { background: url('../images/bg-kids-jungle-buddies.png?v=0141') center center / cover no-repeat; color: #8dbb5c; }
.thumb-premium-minimalist-teal-curve { background: url('../images/bg-premium-minimalist-teal-curve.png?v=0148') center center / cover no-repeat; color: #1a5d66; }
.thumb-premium-minimalist-cobalt-glass { background: url('../images/bg-premium-minimalist-cobalt-glass.png?v=0148') center center / cover no-repeat; color: #204dbe; }
.thumb-premium-minimalist-sage-curve { background: url('../images/bg-premium-minimalist-sage-curve.png?v=0148') center center / cover no-repeat; color: #7f8467; }
.thumb-premium-minimalist-navy-ivory { background: url('../images/bg-premium-minimalist-navy-ivory.png?v=0148') center center / cover no-repeat; color: #435c89; }
.thumb-premium-minimalist-mauve-arch { background: url('../images/bg-premium-minimalist-mauve-arch.png?v=0148') center center / cover no-repeat; color: #8d6a79; }


.template-botanical,
.template-midnight,
.template-blush,
.template-emerald,
.template-modern,
.template-sapphire,
.template-turquoise,
.template-lavender,
.template-peach,
.template-frost,
.template-abstract-rose-copper,
.template-abstract-gold-noir,
.template-abstract-ruby-prism,
.template-abstract-terra-arc,
.template-abstract-aqua-flow,
.template-abstract-coral-glow,
.template-abstract-indigo-ember,
.template-abstract-emerald-aura,
.template-abstract-dream-lilac,
.template-kids-rainbow,
.template-kids-unicorn,
.template-kids-truck,
.template-kids-racer,
.template-kids-hero,
.template-kids-bricks,
.template-kids-space,
.template-kids-sweet,
.template-kids-dino,
.template-kids-jungle {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
.template-botanical { --card-text: #4d3728; background-image: url('../images/bg-goldflora-2026.png?v=0141'); }
.template-midnight  { --card-text: #36577e; background-image: url('../images/bg-skyblue.png'); }
.template-blush     { --card-text: #6a4455; background-image: url('../images/bg-blush.png'); }
.template-emerald   { --card-text: #506225; background-image: url('../images/bg-lime.png'); }
.template-modern    { --card-text: #5a2533; background-image: url('../images/bg-burgundy.png'); }
.template-sapphire { --card-text: #273f73; background-image: url('../images/bg-sapphire-night-2026.png?v=0141'); }
.template-turquoise { --card-text: #2e6765; background-image: url('../images/bg-turquoise-tropica.png'); }
.template-lavender { --card-text: #6b5c85; background-image: url('../images/bg-lavender-mist.png'); }
.template-peach { --card-text: #8e5566; background-image: url('../images/bg-peach-pop.png'); }
.template-frost { --card-text: #506388; background-image: url('../images/bg-frost-blue.png'); }

.template-abstract-rose-copper { --card-text: #6a514d; background-image: url('../images/bg-abstract-rose-copper.png?v=0146'); }
.template-abstract-gold-noir { --card-text: #554737; background-image: url('../images/bg-abstract-gold-noir.png?v=0146'); }
.template-abstract-ruby-prism { --card-text: #6d4955; background-image: url('../images/bg-abstract-ruby-prism.png?v=0146'); }
.template-abstract-terra-arc { --card-text: #6f533d; background-image: url('../images/bg-abstract-terra-arc.png?v=0146'); }
.template-abstract-aqua-flow { --card-text: #2c6c74; background-image: url('../images/bg-abstract-aqua-flow.png?v=0146'); }
.template-abstract-coral-glow { --card-text: #8f665e; background-image: url('../images/bg-abstract-coral-glow.png?v=0146'); }
.template-abstract-indigo-ember { --card-text: #56548b; background-image: url('../images/bg-abstract-indigo-ember.png?v=0146'); }
.template-abstract-emerald-aura { --card-text: #476649; background-image: url('../images/bg-abstract-emerald-aura.png?v=0146'); }
.template-abstract-dream-lilac { --card-text: #6f6097; background-image: url('../images/bg-abstract-dream-lilac.png?v=0146'); }

.template-kids-rainbow { --card-text: #5f5b86; background-image: url('../images/bg-kids-rainbow-party.png?v=0141'); }
.template-kids-unicorn { --card-text: #493f71; background-image: url('../images/bg-kids-unicorn-galaxy.png?v=0141'); }
.template-kids-truck { --card-text: #534235; background-image: url('../images/bg-kids-mighty-truck.png?v=0141'); }
.template-kids-racer { --card-text: #314f6d; background-image: url('../images/bg-kids-speed-racer.png?v=0141'); }
.template-kids-hero { --card-text: #2e457a; background-image: url('../images/bg-kids-hero-city.png?v=0141'); }
.template-kids-bricks { --card-text: #345a75; background-image: url('../images/bg-kids-brick-world.png?v=0141'); }
.template-kids-space { --card-text: #51407f; background-image: url('../images/bg-kids-space-adventure.png?v=0141'); }
.template-kids-sweet { --card-text: #8a5a66; background-image: url('../images/bg-kids-sweet-party.png?v=0141'); }
.template-kids-dino { --card-text: #49644b; background-image: url('../images/bg-kids-dino-land.png?v=0141'); }
.template-kids-jungle { --card-text: #6a5b37; background-image: url('../images/bg-kids-jungle-buddies.png?v=0141'); }

.template-botanical::before,
.template-botanical::after,
.template-midnight::before,
.template-midnight::after,
.template-blush::before,
.template-blush::after,
.template-emerald::before,
.template-emerald::after,
.template-modern::before,
.template-modern::after,
.template-sapphire::before,
.template-sapphire::after,
.template-turquoise::before,
.template-turquoise::after,
.template-lavender::before,
.template-lavender::after,
.template-peach::before,
.template-peach::after,
.template-frost::before,
.template-frost::after,
.template-abstract-rose-copper::before,
.template-abstract-rose-copper::after,
.template-abstract-gold-noir::before,
.template-abstract-gold-noir::after,
.template-abstract-ruby-prism::before,
.template-abstract-ruby-prism::after,
.template-abstract-terra-arc::before,
.template-abstract-terra-arc::after,
.template-abstract-aqua-flow::before,
.template-abstract-aqua-flow::after,
.template-abstract-coral-glow::before,
.template-abstract-coral-glow::after,
.template-abstract-indigo-ember::before,
.template-abstract-indigo-ember::after,
.template-abstract-emerald-aura::before,
.template-abstract-emerald-aura::after,
.template-abstract-dream-lilac::before,
.template-abstract-dream-lilac::after,
.template-kids-rainbow::before,
.template-kids-rainbow::after,
.template-kids-unicorn::before,
.template-kids-unicorn::after,
.template-kids-truck::before,
.template-kids-truck::after,
.template-kids-racer::before,
.template-kids-racer::after,
.template-kids-hero::before,
.template-kids-hero::after,
.template-kids-bricks::before,
.template-kids-bricks::after,
.template-kids-space::before,
.template-kids-space::after,
.template-kids-sweet::before,
.template-kids-sweet::after,
.template-kids-dino::before,
.template-kids-dino::after,
.template-kids-jungle::before,
.template-kids-jungle::after,
.template-botanical .jzgc-deco,
.template-midnight .jzgc-deco,
.template-blush .jzgc-deco,
.template-emerald .jzgc-deco,
.template-modern .jzgc-deco,
.template-abstract-rose-copper .jzgc-deco,
.template-abstract-gold-noir .jzgc-deco,
.template-abstract-ruby-prism .jzgc-deco,
.template-abstract-terra-arc .jzgc-deco,
.template-abstract-aqua-flow .jzgc-deco,
.template-abstract-coral-glow .jzgc-deco,
.template-abstract-indigo-ember .jzgc-deco,
.template-abstract-emerald-aura .jzgc-deco,
.template-abstract-dream-lilac .jzgc-deco,
.template-botanical .jzgc-card-inner::before,
.template-midnight .jzgc-card-inner::before,
.template-blush .jzgc-card-inner::before,
.template-emerald .jzgc-card-inner::before,
.template-modern .jzgc-card-inner::before {
    display: none !important;
}


.jzgc-border-list, .jzgc-section-title-row:has(+ .jzgc-border-list) { display:none !important; }


/* v0.1.50: live-preview backgrounds for newly added design templates */
.template-abstract-noir-deco,
.template-premium-minimalist-teal-curve,
.template-premium-minimalist-cobalt-glass,
.template-premium-minimalist-sage-curve,
.template-premium-minimalist-navy-ivory,
.template-premium-minimalist-mauve-arch {
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}
.template-abstract-noir-deco {
    --card-text: #5b4935;
    background-image: url('../images/bg-abstract-noir-deco.png?v=0150') !important;
}
.template-premium-minimalist-teal-curve {
    --card-text: #32575f;
    background-image: url('../images/bg-premium-minimalist-teal-curve.png?v=0150') !important;
}
.template-premium-minimalist-cobalt-glass {
    --card-text: #3450a6;
    background-image: url('../images/bg-premium-minimalist-cobalt-glass.png?v=0150') !important;
}
.template-premium-minimalist-sage-curve {
    --card-text: #687057;
    background-image: url('../images/bg-premium-minimalist-sage-curve.png?v=0150') !important;
}
.template-premium-minimalist-navy-ivory {
    --card-text: #44557a;
    background-image: url('../images/bg-premium-minimalist-navy-ivory.png?v=0150') !important;
}
.template-premium-minimalist-mauve-arch {
    --card-text: #7f5a68;
    background-image: url('../images/bg-premium-minimalist-mauve-arch.png?v=0150') !important;
}
.template-abstract-noir-deco::before,
.template-abstract-noir-deco::after,
.template-premium-minimalist-teal-curve::before,
.template-premium-minimalist-teal-curve::after,
.template-premium-minimalist-cobalt-glass::before,
.template-premium-minimalist-cobalt-glass::after,
.template-premium-minimalist-sage-curve::before,
.template-premium-minimalist-sage-curve::after,
.template-premium-minimalist-navy-ivory::before,
.template-premium-minimalist-navy-ivory::after,
.template-premium-minimalist-mauve-arch::before,
.template-premium-minimalist-mauve-arch::after,
.template-abstract-noir-deco .jzgc-deco,
.template-premium-minimalist-teal-curve .jzgc-deco,
.template-premium-minimalist-cobalt-glass .jzgc-deco,
.template-premium-minimalist-sage-curve .jzgc-deco,
.template-premium-minimalist-navy-ivory .jzgc-deco,
.template-premium-minimalist-mauve-arch .jzgc-deco,
.template-abstract-noir-deco .jzgc-card-inner::before,
.template-premium-minimalist-teal-curve .jzgc-card-inner::before,
.template-premium-minimalist-cobalt-glass .jzgc-card-inner::before,
.template-premium-minimalist-sage-curve .jzgc-card-inner::before,
.template-premium-minimalist-navy-ivory .jzgc-card-inner::before,
.template-premium-minimalist-mauve-arch .jzgc-card-inner::before {
    display: none !important;
}