/* ============================================================
   电子名片 H5 样式（前台名片页 + 创建页）
   WEB 访问时内容居中，微信 H5 全宽自适应
   ============================================================ */
:root {
    --card-brand: #0f2b4a;
    --card-accent: #ff8f1f;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { -webkit-text-size-adjust: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    background: #eef1f6;
    color: #2f3b4a;
    min-height: 100vh;
}

.page-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 14px 14px 22px;
    min-height: 100vh;
}
@media (min-width: 768px) {
    body { padding-top: 28px; }
}

/* ---------- 名片卡体（横版，标准名片比例 90×54mm = 5:3） ---------- */
.biz-card {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 3;
    border-radius: 18px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 18px 44px rgba(15, 43, 74, .28);
    /* 彩带装饰默认色（深色模板用白色系） */
    --deco-1: rgba(255,255,255,.20);
    --deco-2: rgba(255,255,255,.10);
    --deco-ring: rgba(255,255,255,.20);
}
.biz-card .card-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    z-index: 0;
}
.biz-card .card-mask {
    position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.30) 100%);
    z-index: 1;
}
.biz-card .card-inner {
    position: relative; z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 左侧加宽留白（头像/职位不贴边），右侧约 1 个字（联系方式不贴边也不偏远） */
    padding: 14px 18px 14px 26px;
    gap: 9px;
}
/* 上排：头像/姓名 与 联系方式并排（联系方式不越过下方职位行） */
.biz-card .card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}
.card-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* 联系方式：随上排垂直居中，按内容自适应宽度；
   72% 上限之外再按「姓名至少 4 字（96px）+ 间距」硬性封顶，
   地址过长时联系方式框不再把姓名挤到省略号，地址自动换行 */
.biz-card .card-contact {
    flex: 0 0 auto;
    max-width: min(72%, calc(100% - 106px));
    align-self: center;
    margin-top: 0;
}
/* 头衔与一句话介绍：左右两栏（左=头衔列，右=介绍列），同行排布、互不堆叠；
   头衔列不收缩保持原样，剩余宽度给介绍列；flex-shrink:0 防止整行被 .card-inner 压塌 */
.biz-card .card-foot { display: flex; align-items: flex-end; gap: 10px; width: 100%; flex-shrink: 0; }
.biz-card .card-titles { flex: 0 0 auto; min-width: 0; margin-top: 0; }

/* 一句话介绍：右栏、楷体手写感、无底色，20 字内恰好两行放下 */
.biz-card .card-bio {
    flex: 0 1 auto;
    min-width: 96px;
    max-width: 46%;
    align-self: flex-end;
    text-align: right;
    font-family: 'KaiTi', 'STKaiti', '楷体', 'DFKai-SB', 'Noto Serif SC', serif;
    font-size: 12px;
    line-height: 1.5;
    /* 两行截断：优先 -webkit-line-clamp（末尾省略号） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-wrap: balance;   /* 两行时均衡断句，避免尾行只剩一两个字 */
}
/* 超窄屏兜底：收回留白，避免姓名/地址挤压（同样保证姓名至少 4 字） */
@media (max-width: 359px) {
    .biz-card .card-inner { padding: 12px 20px 12px 18px; }
    .biz-card .card-contact { max-width: min(58%, calc(100% - 106px)); }
}

/* ---------- 右下角淡色飘带装饰（填充空白，层次感） ---------- */
.card-deco {
    position: absolute; inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}
.card-deco .rb {
    position: absolute;
    display: block;
    border-radius: 999px;
}
.card-deco .rb1 {
    width: 80%; height: 104px;
    right: -22%; bottom: -50px;
    transform: rotate(-13deg);
    background: linear-gradient(90deg, transparent 0%, var(--deco-1) 42%, var(--deco-2) 76%, transparent 100%);
}
.card-deco .rb2 {
    width: 58%; height: 26px;
    right: -14%; bottom: 54px;
    transform: rotate(-13deg);
    background: linear-gradient(90deg, transparent 0%, var(--deco-2) 48%, transparent 100%);
}
.card-deco .rb3 {
    width: 150px; height: 150px;
    right: -48px; bottom: -62px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, var(--deco-1), transparent 68%);
}
.card-deco .ring {
    width: 126px; height: 126px;
    right: -30px; bottom: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--deco-ring);
}
.card-deco .ring2 {
    width: 62px; height: 62px;
    right: 22px; bottom: 96px;
    border-radius: 50%;
    border: 1px solid var(--deco-ring);
    opacity: .6;
}

/* 头像 */
.card-avatar {
    width: 68px; height: 68px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.85);
    object-fit: cover;
    background: #fff center/cover no-repeat;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    flex: 0 0 auto;
}
.card-avatar-placeholder {
    width: 68px; height: 68px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,.85);
    background: #fff;
    color: var(--card-brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 27px; font-weight: 600;
    flex: 0 0 auto;
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
}

/* 联系行 */
.card-contact { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.card-contact li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; min-width: 0; }
.card-contact .ct-line {
    display: flex; align-items: center; gap: 6px;
    width: 100%; min-width: 0;
    color: inherit; text-decoration: none;
    -webkit-tap-highlight-color: rgba(255, 143, 31, .18);
}
.card-contact .ct { min-width: 0; overflow-wrap: anywhere; }
.card-contact .ci {
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(255,255,255,.18);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; flex: 0 0 20px;
}

/* 名片文字 */
.card-name { font-size: 22px; font-weight: 700; letter-spacing: 1px; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-shadow: 0 1px 6px rgba(0,0,0,.28); }

/* 多头衔（名片底部整行，最多 3 行，不换行） */
.card-titles { display: flex; flex-direction: column; gap: 4px; max-width: 100%; }
.card-title-line { font-size: 12px; line-height: 1.6; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- 五款模板：2 深色 + 2 浅色 + 1 极简白（简洁纹理） ---------- */
/* t1 商务蓝（深）：斜向细织纹 */
.t1 .card-bg {
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px),
        linear-gradient(160deg, #16406b 0%, #0f2b4a 52%, #0a1f38 100%);
}
.t1 .card-accent-bar { background: linear-gradient(90deg, #ff8f1f, #ffc46b); }
.t1 { --deco-1: rgba(255,168,86,.20); --deco-2: rgba(255,255,255,.13); --deco-ring: rgba(255,255,255,.20); }

/* t2 黑金质感（深）：细网格 */
.t2 .card-bg {
    background:
        repeating-linear-gradient(0deg, rgba(212,175,106,.07) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, rgba(212,175,106,.07) 0 1px, transparent 1px 26px),
        linear-gradient(160deg, #262a32 0%, #17191e 55%, #0e1013 100%);
}
.t2 .card-accent-bar { background: linear-gradient(90deg, #d4af6a, #f2dca8); }
.t2 .card-name { color: #f2dca8; }
.t2 { --deco-1: rgba(212,175,106,.24); --deco-2: rgba(255,255,255,.09); --deco-ring: rgba(212,175,106,.28); }

/* t3 浅青（浅色）：淡青底 + 波点 */
.t3 .card-bg {
    background:
        radial-gradient(rgba(13,110,96,.10) 1.1px, transparent 1.2px),
        linear-gradient(160deg, #f2fbf8 0%, #e3f4ef 58%, #d3ebe4 100%);
    background-size: 17px 17px, auto;
}
.t3 .card-accent-bar { background: linear-gradient(90deg, #0d9a86, #5fd2bd); }
.t3 { --deco-1: rgba(13,154,134,.16); --deco-2: rgba(13,154,134,.07); --deco-ring: rgba(13,154,134,.18); }

/* t4 浅杏（浅色）：暖白底 + 斜向柔纹 */
.t4 .card-bg {
    background:
        repeating-linear-gradient(115deg, rgba(201,120,60,.07) 0 10px, rgba(255,255,255,0) 10px 30px),
        linear-gradient(160deg, #fffaf4 0%, #fdf0e3 58%, #f8e4d0 100%);
}
.t4 .card-accent-bar { background: linear-gradient(90deg, #e8853c, #f5b97e); }
.t4 { --deco-1: rgba(232,133,60,.18); --deco-2: rgba(232,133,60,.08); --deco-ring: rgba(232,133,60,.20); }

/* t5 极简白（白）：微点纸面 */
.t5 .card-bg {
    background:
        radial-gradient(rgba(15,43,74,.05) 1px, transparent 1.1px),
        linear-gradient(160deg, #ffffff 0%, #f7f9fc 60%, #eef2f7 100%);
    background-size: 16px 16px, auto;
}
.t5 .card-accent-bar { background: linear-gradient(90deg, #0f2b4a, #4a6b93); }
.t5 { --deco-1: rgba(15,43,74,.07); --deco-2: rgba(15,43,74,.035); --deco-ring: rgba(15,43,74,.10); }

/* 浅色模板通用（深色文字） */
.t3, .t4, .t5 { color: #243447; }
.t3 .card-mask, .t4 .card-mask, .t5 .card-mask { background: none; }
.t3 .card-contact .ci, .t4 .card-contact .ci, .t5 .card-contact .ci { background: rgba(15, 43, 74, .08); }
.t3 .card-avatar, .t4 .card-avatar, .t5 .card-avatar { border-color: #fff; box-shadow: 0 6px 18px rgba(15,43,74,.18); }
.t3 .card-avatar-placeholder, .t4 .card-avatar-placeholder, .t5 .card-avatar-placeholder { border-color: #d8e0ec; background: #f0f3f8; color: #8a97ab; }
.t3 .card-name, .t4 .card-name, .t5 .card-name { text-shadow: none; }
.card-accent-bar { height: 4px; width: 46px; border-radius: 2px; margin-top: 8px; }

/* 背景图上的模板遮罩增强文字可读性 */
.biz-card.has-bg .card-mask { background: linear-gradient(120deg, rgba(8,20,34,.34) 0%, rgba(8,20,34,.18) 55%, rgba(8,20,34,.42) 100%); }
.biz-card.has-bg { --deco-1: rgba(255,255,255,.18); --deco-2: rgba(255,255,255,.09); --deco-ring: rgba(255,255,255,.20); }

/* ---------- 二维码区（居中纵排：二维码 → 提示 → 姓名） ---------- */
.qr-section { text-align: center; margin-top: 16px; }
.qr-box {
    display: inline-block;
    background: #fff;
    padding: 14px 14px 12px;
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(15, 43, 74, .16);
    position: relative;
}
.qr-box::before {
    content: "";
    position: absolute; inset: 6px;
    border: 1.5px dashed #d9e2ee;
    border-radius: 13px;
    pointer-events: none;
}
#cardQrcode { width: 176px; height: 176px; display: flex; align-items: center; justify-content: center; }
#cardQrcode img, #cardQrcode canvas { width: 176px; height: 176px; display: block; }
.qr-badge {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(15,43,74,.28);
    background: #fff center/cover no-repeat;
    z-index: 2;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; font-weight: 700; color: #fff;
    background-color: var(--card-brand);
}
.qr-tip { font-size: 12.5px; color: #7c8aa0; margin-top: 12px; }
/* 二维码下方姓名（姓名高亮强调） */
.qr-name { margin-top: 9px; font-size: 13.5px; color: #7c8aa0; letter-spacing: .3px; }
.qr-name em {
    font-style: normal;
    font-size: 17px; font-weight: 700;
    color: #e8752a;
    padding: 0 3px;
    background: linear-gradient(180deg, transparent 60%, rgba(255,143,31,.26) 60%);
}

/* ---------- 底部创建入口 ---------- */
.create-entry {
    margin-top: 16px;
    text-align: center;
    padding: 20px 18px 22px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(15, 43, 74, .08);
}
.create-entry .ce-title { font-size: 15px; font-weight: 600; color: #243447; }
.create-entry .ce-sub { font-size: 12.5px; color: #8a97ab; margin-top: 5px; }
.btn-create {
    display: inline-block;
    margin-top: 12px;
    padding: 10px 32px;
    background: linear-gradient(135deg, #ff9d33, #ff8f1f);
    color: #fff;
    font-size: 14px; font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 8px 18px rgba(255, 143, 31, .32);
}
.btn-create:active { transform: scale(.97); }
/* 了解产品功能入口（跳转 /card 落地页） */
.create-entry .ce-link {
    display: block; width: fit-content; margin: 11px auto 0; font-size: 12.5px; color: #6b7c93;
    text-decoration: none; border-bottom: 1px dashed rgba(107, 124, 147, .45); padding-bottom: 1px;
}
.create-entry .ce-link .ce-arrow { font-size: 14px; margin-left: 1px; color: #ff8f1f; }
.create-entry .ce-link:active { opacity: .7; }

/* ---------- 创建/编辑表单页 ---------- */
.form-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px 18px;
    box-shadow: 0 8px 22px rgba(15, 43, 74, .08);
    margin-bottom: 16px;
}
.form-card h2 { font-size: 16px; color: #243447; margin-bottom: 4px; }
.form-card .fc-sub { font-size: 12.5px; color: #8a97ab; margin-bottom: 16px; }
.f-item { margin-bottom: 14px; }
.f-item label { display: block; font-size: 13px; color: #51617a; margin-bottom: 7px; font-weight: 500; }
.f-item label em { color: #e2543f; font-style: normal; margin-left: 2px; }
.f-item input[type="text"], .f-item input[type="tel"], .f-item input[type="email"], .f-item textarea {
    width: 100%;
    border: 1px solid #dde5ef;
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 14.5px;
    color: #2f3b4a;
    outline: none;
    background: #fbfcfe;
    transition: .18s;
    font-family: inherit;
}
.f-item input:focus, .f-item textarea:focus { border-color: var(--card-accent); box-shadow: 0 0 0 3px rgba(255,143,31,.12); background: #fff; }
.f-item textarea { min-height: 84px; resize: vertical; line-height: 1.7; }
/* 一句话介绍：两行小输入框 */
.f-item textarea.bio-input { min-height: 0; height: 62px; resize: none; line-height: 1.6; }
.f-row { display: flex; gap: 12px; }
.f-row .f-item { flex: 1; }
.f-help { font-size: 11.5px; color: #9aa7ba; margin-top: 6px; }

/* 手机号检查提示 */
.phone-check { min-height: 0; margin: -4px 0 12px; }
.phone-check .pc-loading, .phone-check .pc-free, .phone-check .pc-exists, .phone-check .pc-ok {
    display: inline-block; font-size: 12px; line-height: 1.6; padding: 5px 10px; border-radius: 8px;
}
.phone-check .pc-loading { color: #8a97ab; background: #f0f3f8; }
.phone-check .pc-free { color: #1e7e46; background: #e8f7ee; border: 1px solid #bfe6cd; }
.phone-check .pc-exists { color: #a2641f; background: #fff8f0; border: 1px solid #ffe3c2; }
.phone-check .pc-exists b { color: #c0392b; }
.phone-check .pc-ok { color: #1e7e46; background: #e8f7ee; border: 1px solid #bfe6cd; }

/* 认领码校验提示语 */
.claim-msg { font-size: 12px; line-height: 1.6; margin-top: 7px; }
.claim-msg:empty { display: none; }
.claim-msg.loading { color: #8a97ab; }
.claim-msg.ok { color: #1e7e46; }
.claim-msg.err { color: #c0392b; }
.claim-msg.warn { color: #a2641f; }

/* 已存在未认领：其余项灰化锁定 */
.is-locked {
    opacity: .45;
    filter: grayscale(1);
    pointer-events: none;
    user-select: none;
}
.is-locked input,
.is-locked textarea,
.is-locked .upload-tile,
.is-locked .btn-add-title {
    background: #f2f4f8 !important;
    border-color: #e3e8f0 !important;
    color: #9aa7ba !important;
}

/* 头衔多行（职位+公司） */
.title-row {
    display: flex; gap: 9px; align-items: center;
    margin-bottom: 10px;
}
.title-row input {
    flex: 1; min-width: 0;
    border: 1px solid #dde5ef; border-radius: 10px;
    padding: 10px 12px; font-size: 13.5px; color: #2f3b4a;
    outline: none; background: #fbfcfe; transition: .18s; font-family: inherit;
}
.title-row input:focus { border-color: var(--card-accent); box-shadow: 0 0 0 3px rgba(255,143,31,.12); background: #fff; }
.title-row .tr-del { color: #c0c9d6; font-size: 15px; padding: 6px 8px; text-decoration: none; flex: 0 0 auto; }
.title-row .tr-del:active { color: #e2543f; }
.title-row .tr-company { flex: 1.6; }
.title-row .tr-job { flex: 1; }
.btn-add-title {
    padding: 9px 18px;
    border: 1.5px dashed #c9d5e4; border-radius: 10px;
    background: #fbfcfe; color: #51617a;
    font-size: 13px; cursor: pointer;
}
.btn-add-title:active { background: #f2f6fc; }

/* 上传框 */
.upload-tile {
    display: flex; align-items: center; gap: 14px;
    border: 1.5px dashed #c9d5e4;
    border-radius: 12px;
    padding: 13px 14px;
    cursor: pointer;
    background: #fbfcfe;
    transition: .18s;
}
.upload-tile:active { background: #f2f6fc; }
.upload-thumb {
    width: 56px; height: 56px;
    border-radius: 10px;
    background: #eef2f8 center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    color: #aab6c8; font-size: 22px;
    flex: 0 0 56px;
    overflow: hidden;
}
.upload-tile .ut-text { font-size: 13.5px; color: #51617a; }
.upload-tile .ut-text .sub { display: block; font-size: 11.5px; color: #9aa7ba; margin-top: 3px; }
.upload-tile.has-img { border-style: solid; border-color: #bfe3cd; background: #f6fcf8; }
.upload-tile .ut-clear {
    margin-left: auto;
    color: #c0c9d6; font-size: 18px;
    padding: 4px 8px;
    text-decoration: none;
}

/* 模板选择（缩略图与名片同比例 5:3） */
.tpl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tpl-item {
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    padding-top: 5px;
}
.tpl-chip {
    aspect-ratio: 5 / 3;
    border-radius: 7px;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; font-size: 0; font-weight: 600;
}
.tpl-chip i { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,.35); margin-bottom: 3px; }
.tpl-chip s { width: 18px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.55); text-decoration: none; }
.tpl-item input { display: none; }
.tpl-item .tpl-name { display: block; text-align: center; font-size: 10.5px; color: #7c8aa0; padding: 5px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-item.checked { border-color: var(--card-accent); background: #fff8f0; }
.tpl-item.checked::after {
    content: "✓";
    position: absolute; top: 8px; right: 6px;
    width: 14px; height: 14px;
    background: var(--card-accent); color: #fff;
    border-radius: 50%;
    font-size: 9px; line-height: 14px; text-align: center;
}
.tpl-chip.c1 { background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 8px), linear-gradient(160deg, #16406b, #0a1f38); }
.tpl-chip.c2 { background: repeating-linear-gradient(0deg, rgba(212,175,106,.09) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, rgba(212,175,106,.09) 0 1px, transparent 1px 12px), linear-gradient(160deg, #262a32, #0e1013); }
.tpl-chip.c3 { background: radial-gradient(rgba(13,110,96,.12) 1px, transparent 1.1px), linear-gradient(160deg, #f2fbf8, #d3ebe4); background-size: 10px 10px, auto; }
.tpl-chip.c3 i { background: rgba(13,110,96,.25); }
.tpl-chip.c3 s { background: #0d9a86; }
.tpl-chip.c4 { background: repeating-linear-gradient(115deg, rgba(201,120,60,.08) 0 6px, rgba(255,255,255,0) 6px 18px), linear-gradient(160deg, #fffaf4, #f8e4d0); }
.tpl-chip.c4 i { background: rgba(232,133,60,.25); }
.tpl-chip.c4 s { background: #e8853c; }
.tpl-chip.c5 { background: radial-gradient(rgba(15,43,74,.06) 1px, transparent 1.1px), linear-gradient(160deg, #ffffff, #eef2f7); background-size: 9px 9px, auto; }
.tpl-chip.c5 i { background: rgba(15,43,74,.15); }
.tpl-chip.c5 s { background: #0f2b4a; }
.tpl-chip.c5 i { background: #d3dce8; }
.tpl-chip.c5 s { background: #ff8f1f; }

/* 提交按钮（预览 + 生成 组合） */
.btn-group { display: flex; gap: 10px; }
.btn-preview {
    flex: 0 0 38%;
    padding: 14px;
    background: #fff;
    color: #243447;
    font-size: 15px; font-weight: 600;
    border: 1.5px solid #d8e0ec; border-radius: 12px;
    cursor: pointer;
}
.btn-preview:active { transform: scale(.98); background: #f4f7fb; }
.btn-submit {
    flex: 1;
    padding: 14px;
    background: linear-gradient(135deg, #ff9d33, #ff8f1f);
    color: #fff;
    font-size: 16px; font-weight: 600;
    border: 0; border-radius: 12px;
    box-shadow: 0 8px 20px rgba(255, 143, 31, .32);
    cursor: pointer;
}
.btn-submit:active { transform: scale(.98); }
.btn-submit[disabled] { opacity: .6; }

/* 页面顶部说明 */
.page-tip {
    background: #fff8f0;
    border: 1px solid #ffe3c2;
    color: #a2641f;
    font-size: 12.5px; line-height: 1.7;
    border-radius: 12px;
    padding: 11px 14px;
    margin-bottom: 16px;
}
.form-alert-err {
    background: #fdeeee; border: 1px solid #f5c6c6; color: #c0392b;
    font-size: 13px; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}

/* ---------- 裁剪弹层 ---------- */
.crop-mask {
    position: fixed; inset: 0;
    background: rgba(10, 20, 33, .72);
    z-index: 99;
    display: none;
    align-items: center; justify-content: center;
    padding: 20px;
}
.crop-mask.show { display: flex; }
.crop-dialog { background: #fff; border-radius: 14px; width: 100%; max-width: 420px; padding: 16px; }
.crop-dialog h3 { font-size: 15px; color: #243447; margin-bottom: 12px; }
.crop-stage { width: 100%; height: 300px; background: #f0f2f6; overflow: hidden; border-radius: 10px; }
.crop-stage img { display: block; max-width: 100%; }
.crop-actions { display: flex; gap: 10px; margin-top: 14px; }
.crop-actions button {
    flex: 1; padding: 11px;
    border: 0; border-radius: 10px;
    font-size: 14.5px; cursor: pointer;
}
.crop-cancel { background: #eef2f7; color: #51617a; }
.crop-ok { background: var(--card-accent); color: #fff; font-weight: 600; }

/* ---------- 名片预览弹层 ---------- */
.view-dialog {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 460px;
    padding: 16px;
}
.view-dialog h3 { font-size: 15px; color: #243447; margin-bottom: 12px; }
.view-stage {
    width: 100%;
    border-radius: 10px;
    background: #f0f2f6;
    padding: 12px;
    overflow: hidden;
}
.view-stage .biz-card { box-shadow: 0 8px 20px rgba(15, 43, 74, .18); }
.view-note { font-size: 11.5px; color: #9aa7ba; margin-top: 10px; text-align: center; }

/* ---------- 提示页 ---------- */
.tip-wrap {
    min-height: 70vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 30px 20px;
}
.tip-wrap .tip-ico {
    width: 64px; height: 64px; border-radius: 50%;
    background: #f0f3f8; color: #8a97ab;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; margin-bottom: 18px;
}
.tip-wrap h1 { font-size: 18px; color: #243447; }
.tip-wrap p { font-size: 13.5px; color: #8a97ab; margin-top: 10px; }
.tip-wrap .btn-create { margin-top: 24px; }

/* 成功提示卡（创建/更新后，紧凑居中：标题 + 右上角分享提示） */
.created-panel {
    background: linear-gradient(135deg, #eefaf2 0%, #e4f6ec 100%);
    border: 1px solid #bfe6cd;
    border-radius: 14px;
    padding: 10px 14px;
    margin-bottom: 12px;
    text-align: center;
}
.created-panel .cp-title { font-size: 14.5px; font-weight: 700; color: #1e7e46; line-height: 1.4; }
.created-panel .cp-sub { font-size: 11.5px; line-height: 1.5; color: #4d7b60; margin-top: 2px; }
.created-panel .cp-sub b { color: #1e7e46; font-weight: 700; letter-spacing: .5px; }

/* 页脚 */
.card-footer { text-align: center; font-size: 11.5px; color: #a6b2c5; margin-top: 26px; }