/* Isolated, server-owned card faces. Personal content remains real text. */
.card-face{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:14px;box-sizing:border-box;width:100%;min-width:0;min-height:230px;padding:26px;background:#fff;color:#17252f;border-radius:12px;container-type:inline-size;text-align:left;font-family:Arial,"Noto Sans TC",sans-serif;line-height:1.45}
.card-face *{box-sizing:border-box}.card-face :is(h2,p){position:relative;z-index:2;margin:0!important;padding:0!important;color:inherit!important;border:0!important;background:none!important;overflow-wrap:anywhere}.card-face .face-name{font-size:clamp(22px,7cqi,38px)!important;font-weight:750!important;line-height:1.22!important;letter-spacing:.02em!important}.card-face .face-english{font-size:clamp(11px,3.3cqi,17px)!important;letter-spacing:.12em;min-height:0}.face-english:empty,.face-headline:empty{display:none}.card-face .face-role{font-size:clamp(12px,3.7cqi,18px)!important;margin-top:10px!important}.face-role>span{display:block}.card-face .face-headline{font-size:12px!important;margin-top:8px!important}.face-rule{height:2px;width:35px;background:currentColor;opacity:.65;margin:12px 0}.face-copy,.face-contact{position:relative;z-index:2;min-width:0}.face-contact{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:clamp(11px,3.1cqi,14px);line-height:1.6}.face-contact-item{display:flex;align-items:baseline;gap:6px;min-width:0;overflow-wrap:anywhere}.face-contact-item[hidden]{display:none!important}.face-contact-item>span{min-width:0;overflow-wrap:anywhere}.face-contact-item b{font-size:12px;font-weight:400}.face-art{position:absolute;inset:0;z-index:0;pointer-events:none}.face-art i{position:absolute;display:block}.face-monogram{position:absolute;right:3%;bottom:-12%;font:800 clamp(100px,44cqi,250px)/1 Arial,sans-serif;letter-spacing:-.1em;opacity:1;z-index:1}.face-photo{display:none}.card-face .face-photo img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;border-radius:0!important;margin:0!important;position:static!important}.card-face .face-photo>span{display:grid;place-items:center;font:700 64px/1 Georgia,serif;width:100%;height:100%}
/* 01 Swiss typographic split */
.face-design_01{padding-left:42%;border-radius:2px;color:#141414;background:#fff}.face-design_01 .face-monogram{left:3%;right:auto;top:28px;font-size:clamp(60px,30cqi,150px);letter-spacing:-.12em}.face-design_01 .face-art i:first-child{width:18px;height:18px;background:#ef1735;right:24px;bottom:62px}.face-design_01 .face-rule{display:none}.face-design_01 .face-contact{grid-column:1/-1;margin-left:-64%;border-top:1px solid #555;padding-top:12px;margin-top:14px}
/* 02 Gold arch */
.face-design_02{background:#141515;color:#e4bd78;text-align:center;border:1px solid #b49358;border-radius:2px;padding:34px 26px}.face-design_02:after{content:"";position:absolute;inset:9px;border:1px solid #c6a05e;z-index:0}.face-design_02 .face-art{inset:14px 8px 0;border:1px solid #b49358;border-radius:50% 50% 0 0}.face-design_02 :is(.face-name,.face-english){font-family:Georgia,"Noto Serif TC",serif}.face-design_02 .face-monogram{display:none}.face-design_02 .face-rule{margin:12px auto;width:20px}.face-design_02 .face-contact{justify-content:center}
/* 03 Tiffany blocks */
.face-design_03{padding-left:45%;background:linear-gradient(90deg,#43c7c1 0 39%,#fff 39%);border-radius:2px;color:#172b2b}.face-design_03 .face-art i:first-child{width:48%;aspect-ratio:1;border-radius:50%;background:#fff;left:-18%;top:10%}.face-design_03 .face-monogram{font-size:clamp(36px,14cqi,74px);color:#208f8b;top:40%;left:3%;right:65%;bottom:auto;text-align:center}.face-design_03 .face-rule{background:#43c7c1;opacity:1}.face-design_03 .face-contact{flex-direction:column}
/* 04 Engineering blueprint */
.face-design_04{background:#042845;color:#f3fbff;border-radius:2px;padding-right:36%}.face-design_04 .face-art{background-image:linear-gradient(#24709940 1px,transparent 1px),linear-gradient(90deg,#24709940 1px,transparent 1px);background-size:18px 18px}.face-design_04 .face-art i{border:1px solid #2caed1;border-radius:50%;width:55%;aspect-ratio:1;right:-17%;top:15%}.face-design_04 .face-art i:nth-child(2){width:38%;right:-8%;top:30%}.face-design_04 .face-art i:nth-child(3){width:1px;height:100%;background:#2caed1;border:0;transform:rotate(35deg);right:12%;top:0}.face-design_04 .face-contact{font-family:monospace;flex-direction:column}.face-design_04 .face-monogram{display:none}.face-design_04 .face-rule{background:#36d0de;opacity:1}
/* 05 Botanical stationery */
.face-design_05{background:#f6f3e9 url('../img/card-designs/botanical.svg') center/cover;color:#3e543a;padding-left:26%;text-align:center;border-radius:2px}.face-design_05 :is(.face-name,.face-english){font-family:Georgia,"Noto Serif TC",serif}.face-design_05 .face-monogram{display:none}.face-design_05 .face-rule{margin:12px auto;background:#6b8452}.face-design_05 .face-contact{justify-content:center}
/* 06 Editorial initials */
.face-design_06{background:#fbf6ef;color:#750f25;padding-right:38%;border-radius:2px}.face-design_06 .face-monogram{right:-3%;bottom:-8%;font-family:Georgia,serif;font-size:clamp(120px,53cqi,270px);letter-spacing:-.18em}.face-design_06 :is(.face-name,.face-english){font-family:Georgia,"Noto Serif TC",serif}.face-design_06 .face-rule{width:100%}.face-design_06 .face-contact{flex-direction:column}
/* 07 Panoramic landscape, separate readable footer */
.face-design_07{padding:150px 22px 22px;background:#f8f3e9;color:#142e44;border-radius:12px;gap:10px;min-height:300px}.face-design_07 .face-art{height:140px;background:url('../img/card-designs/mountains.svg') center/cover}.face-design_07 .face-monogram{display:none}.face-design_07 .face-copy{display:grid;grid-template-columns:1fr 1fr;column-gap:14px}.face-design_07 .face-name{grid-column:1}.face-design_07 .face-english{grid-column:1;grid-row:2}.face-design_07 .face-role{grid-column:2;grid-row:1/3;border-left:1px solid #8c9699!important;padding-left:14px!important;margin:0!important}.face-design_07 .face-rule{display:none}.face-design_07 .face-headline{grid-column:1/-1}
/* 08 Pop geometry */
.face-design_08{background:#0348db;color:#fff;border-radius:14px;padding-right:18%}.face-design_08 .face-art i{width:48%;aspect-ratio:1;background:#ffe625;border-radius:50%;right:-14%;top:-35%}.face-design_08 .face-art i:nth-child(2){width:35%;top:auto;bottom:20%;left:-25%;right:auto}.face-design_08 .face-art i:nth-child(3){width:40%;right:-22%;top:35%;background:#fff3d3}.face-design_08 .face-monogram{display:none}.face-design_08 .face-name{font-family:Arial,"Noto Sans TC",sans-serif;font-weight:950!important}.face-design_08 .face-rule{background:#ffe625;opacity:1;width:5px;height:24px;float:left;margin:10px 10px 0 0}.face-design_08 .face-contact{background:#ffe625;color:#123069;border-radius:30px;padding:10px 14px;justify-content:center;grid-column:1/-1;margin-right:-12%}
/* 09 Modular black and white */
.face-design_09{background:linear-gradient(#111 0 73%,#fff 73%);color:#fff;border:1px solid #111;border-radius:2px;padding-right:39%;padding-bottom:62px}.face-design_09 .face-art{left:66%;bottom:27%;background:repeating-linear-gradient(90deg,#fff 0 11px,#111 11px 22px)}.face-design_09 .face-art:after{content:"";position:absolute;background:#111;border-radius:0 100% 100% 0;width:70%;height:100%;left:0;top:0}.face-design_09 .face-monogram{display:none}.face-design_09 .face-contact{position:relative;margin-right:-55%;color:#111;background:#fff;padding:10px 0 0;margin-bottom:-52px;min-height:38px}.face-design_09 .face-rule{background:#fff}
/* 10 Iridescent ribbon */
.face-design_10{background:#f3effe url('../img/card-designs/aurora.svg') center/cover;color:#2e174e;padding-right:37%;border:1px solid #d8c9e6}.face-design_10 .face-monogram{display:none}.face-design_10 :is(.face-name,.face-english){font-family:Georgia,"Noto Serif TC",serif}.face-design_10 .face-contact{flex-direction:column}
/* 11 Ink landscape */
.face-design_11{background:#f3eee1 url('../img/card-designs/ink.svg') center/cover;color:#252822;padding-left:39%;border-radius:2px}.face-design_11 .face-monogram{display:none}.face-design_11 :is(.face-name,.face-english){font-family:Georgia,"Noto Serif TC",serif}.face-design_11 .face-art i:first-child{height:24px;width:24px;border:3px double #a42b26;bottom:22px;right:16px}.face-design_11 .face-contact{flex-direction:column}
/* 12 Terracotta arch */
.face-design_12{background:#fce8d2 url('../img/card-designs/terracotta.svg') center/cover;color:#542719;padding-right:39%}.face-design_12 .face-monogram{display:none}.face-design_12 .face-name{font-weight:900!important}.face-design_12 .face-contact{grid-column:1/-1;background:#fff1dfd9;padding:9px 12px;border-radius:22px;margin-right:-55%}
/* 13 Portrait photo layout */
.face-design_13{max-width:360px;margin-inline:auto;min-height:430px;padding:245px 22px 22px;border-left:7px solid #1557e9;border-radius:2px;background:#fff;color:#101f3d}.face-design_13 .face-photo{display:block;position:absolute;inset:0 0 auto;height:225px;background:linear-gradient(140deg,#b6c6d7,#e6ebf1);color:#244668}.face-design_13 .face-monogram{display:none}.face-design_13 .face-rule{display:none}.face-design_13 .face-contact{flex-direction:column}.face-design_13 :is(.face-name,.face-english){font-family:Georgia,"Noto Serif TC",serif}
/* 14 Product window */
.face-design_14{background:#fff url('../img/card-designs/product.svg') right center/46% 100% no-repeat;color:#17273c;border-radius:2px;padding-right:49%}.face-design_14 .face-monogram{display:none}.face-design_14 .face-rule{background:#168ba3;opacity:1}.face-design_14 .face-contact{flex-direction:column}.face-design_14 .face-role>span:first-child{display:inline-block;border-radius:20px;background:#178aa1;color:#fff;padding:3px 9px;margin-bottom:5px;font-size:12px}
/* 15 Architectural diagonals */
.face-design_15{background:#faf8f0 url('../img/card-designs/architecture.svg') right center/cover;color:#152b44;padding-right:36%;border-radius:2px}.face-design_15 .face-monogram{display:none}.face-design_15 .face-contact{flex-direction:column}.face-design_15 :is(.face-name,.face-english){font-family:Georgia,"Noto Serif TC",serif}
/* 16 Neon frame with solid readable center */
.face-design_16{background:#08090f;color:#fff;text-align:center;padding:34px 38px;min-height:280px}.face-design_16 .face-art i{border:3px solid #00cafa;border-radius:50%;width:130%;height:180%;right:-15%;top:-40%;box-shadow:0 0 12px #00ceff,inset 0 0 12px #00ceff;transform:rotate(-30deg)}.face-design_16 .face-art i:nth-child(2){border-color:#e323f4;right:35%;box-shadow:0 0 12px #df23f4,inset 0 0 12px #df23f4}.face-design_16 .face-copy{background:#08090fe8;border-radius:14px;padding:10px}.face-design_16 .face-monogram{display:none}.face-design_16 .face-rule{width:34px;margin:12px auto;background:linear-gradient(90deg,#f436ed,#0ff);opacity:1}.face-design_16 .face-contact{justify-content:center;background:#08090fe8;padding:5px}.face-design_16 :is(.face-name,.face-english){font-family:Georgia,"Noto Serif TC",serif}
/* 17 Portrait art poster */
.face-design_17{max-width:340px;margin-inline:auto;min-height:430px;padding:205px 24px 25px;background:#fff;color:#173363;border-radius:2px}.face-design_17 .face-art{height:185px;background:#f9d6b6 url('../img/card-designs/line-art.svg') center/cover}.face-design_17 .face-monogram{display:none}.face-design_17 .face-english{font:700 clamp(22px,8cqi,40px)/1.05 Georgia,serif!important;letter-spacing:0}.face-design_17 .face-copy{display:flex;flex-direction:column;gap:8px}.face-design_17 .face-english{order:-1}.face-design_17 .face-rule{display:none}.face-design_17 .face-contact{flex-direction:column}
/* 18 Navy monogram */
.face-design_18{background:linear-gradient(90deg,#fffdf8 0 68%,#183959 68%);color:#142d49;padding-right:36%;border-radius:2px;border-right:1px solid #173651}.face-design_18 .face-art{left:67%;border-left:2px solid #b67b4e}.face-design_18 .face-monogram{display:grid;place-items:center;right:4%;top:30%;bottom:auto;width:24%;aspect-ratio:1;border:3px double #fff;border-radius:50%;font:400 clamp(24px,12cqi,62px)/1 Georgia,serif;color:#fff;letter-spacing:-.1em;padding-right:8px}.face-design_18 .face-rule{background:#b67b4e;opacity:1}.face-design_18 :is(.face-name,.face-english){font-family:Georgia,"Noto Serif TC",serif}.face-design_18 .face-contact{flex-direction:column}
/* Preserve the original five and saved intermediate layouts. */
.card-face.face-legacy{background:transparent;color:inherit;min-height:170px;padding:8px;border-radius:0;gap:10px}.face-legacy .face-art,.face-legacy .face-monogram{display:none}.face-legacy .face-photo{display:block;width:56px;height:56px;border-radius:50%;overflow:hidden;background:#ffffff20}.face-legacy .face-photo>span{font-size:28px}.face-legacy .face-rule{display:none}.face-legacy .face-contact{font-size:13px}.face-legacy :is(.face-name,.face-english){font-family:inherit}
/* Host rules keep page UI separate from card artwork and neutralize old positioning. */
:is(.builder-preview,.digital-card)[class*="card-template-design_"]{background:transparent!important;color:var(--text,#eff9fa)!important;border:0!important;padding:0!important;box-shadow:none!important;min-height:0!important}.card-editor-page #builderPreview:has(.card-face) .template-top{display:none}.card-manager-page .manager-card-preview:has(.card-face){padding:0!important;background:transparent!important}.share-card-page .selected-card-preview .digital-card:has(.card-face){padding:0!important}.share-card-page .selected-card-preview img{max-height:none}.card-face img{max-height:none!important}.card-face :is(p,small){opacity:1!important}.card-face .face-copy strong{display:inline!important}.card-face.face-design_13 .face-photo img,.card-face.face-design_17 .face-photo img{object-position:center 30%}
@media(max-width:360px){.card-face{padding:20px;gap:12px}.face-design_01{padding-left:40%}.face-design_03{padding-left:43%}.face-design_04,.face-design_06,.face-design_10,.face-design_12,.face-design_15,.face-design_18{padding-right:35%}.face-design_05{padding-left:24%}.face-design_11{padding-left:35%}.face-design_07{padding-top:150px}.face-design_13{padding-top:240px}.face-design_14{padding-right:48%}.face-design_17{padding-top:200px}.face-design_16{padding:30px}}

/* Narrow-card finishing: preserve full decorative compositions and avoid contact overlap. */
.face-design_01 .face-art i:first-child{width:12px;height:12px;top:16px;bottom:auto;right:16px}
.face-design_05,.face-design_11,.face-design_12{background-size:100% 100%}

/* 09: a full-width flow footer must grow with long international contact fields. */
.face-design_09{padding:24px 24px 0;background:#111;align-content:stretch;grid-template-rows:1fr auto;min-height:250px}
.face-design_09 .face-copy{padding-right:35%;align-self:center}
.face-design_09 .face-contact{position:relative;grid-column:1/-1;flex-direction:column;align-items:flex-start;gap:5px;margin:0 -24px;width:calc(100% + 48px);min-height:64px;padding:12px 18px;background:#fff;color:#111}
.face-design_09 .face-contact-item{width:100%}
.face-design_09 .face-art{bottom:60px}

/* Uploaded portraits are never overwritten by live name changes. */
.card-face .face-monogram.has-avatar{width:clamp(52px,26cqi,130px);height:clamp(52px,26cqi,130px);top:30px;bottom:auto;letter-spacing:normal;padding:0}
.card-face .face-monogram.has-avatar img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;border-radius:50%!important;margin:0!important;position:static!important}
.card-face .face-avatar-placeholder{display:block;width:65%;height:65%;margin:auto;fill:none;stroke:currentColor;stroke-width:2.5;opacity:.7;align-self:center;justify-self:center}
.card-face:is(.face-legacy,.face-design_13) .face-photo:has(.face-avatar-placeholder){display:grid;place-items:center}

.face-design_06 .face-monogram.has-avatar{right:5%}