/* ======================================================================
 *  牛马工作证生成器 /work-id-card.css
 *  门面工具：左侧控制台 + 右侧证件舞台（卡片投影悬浮）
 *  复用全局变量，自动支持 [data-theme="dark"] 黑夜模式。
 * ====================================================================== */

.wic-wrap {
    --wic-accent: #0ea5e9; --wic-accent-soft: rgba(14,165,233,0.12);
    --wic-surface: var(--c-surface); --wic-soft: var(--c-surface-soft);
    --wic-text: var(--c-text); --wic-sub: var(--c-text-sub); --wic-muted: var(--c-text-muted);
    --wic-line: var(--c-border); --wic-shadow: var(--shadow-sm);
    font-family: var(--font-sans, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif);
}
[data-theme="dark"] .wic-wrap { --wic-accent: #38bdf8; }
.wic-container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Hero */
.wic-hero { margin: 18px 0 22px; padding: 26px 28px; border-radius: 22px; position: relative; overflow: hidden;
    background: linear-gradient(120deg, rgba(14,165,233,0.14), rgba(239,68,68,0.07) 60%, rgba(52,211,153,0.10));
    border: 1px solid var(--wic-line); }
.wic-hero::after { content: "🐴"; position: absolute; right: 16px; top: 6px; font-size: 88px; opacity: .12; }
.wic-hero .wic-kicker { font-size: 12px; font-weight: 800; letter-spacing: 2px; color: var(--wic-accent); }
.wic-hero h1 { margin: 8px 0 8px; font-size: 27px; font-weight: 900; color: var(--wic-text); }
.wic-hero p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--wic-sub); max-width: 760px; }
.wic-tags { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 8px; }
.wic-tag { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: 99px; background: var(--wic-accent-soft); color: var(--wic-accent); border: 1px solid rgba(14,165,233,0.3); }

/* 舞台布局 */
.wic-stage { display: grid; grid-template-columns: 400px minmax(0,1fr); gap: 22px; align-items: start; }
@media (max-width: 940px) { .wic-stage { grid-template-columns: 1fr; } }

/* 控制台 */
.wic-panel { background: var(--wic-surface); border: 1px solid var(--wic-line); border-radius: 20px; padding: 20px; box-shadow: var(--wic-shadow); }
.wic-panel h2 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--wic-text); display: flex; align-items: center; gap: 8px; }
.wic-panel .wic-sub { margin: 0 0 15px; font-size: 12px; color: var(--wic-muted); }
.wic-field { margin-bottom: 14px; }
.wic-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wic-field > label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--wic-sub); }
.wic-input, .wic-select {
    width: 100%; padding: 10px 12px; font-size: 14px; border-radius: 12px;
    border: 1px solid var(--wic-line); background: var(--wic-soft); color: var(--wic-text);
}
.wic-input:focus, .wic-select:focus { outline: none; border-color: var(--wic-accent); box-shadow: 0 0 0 3px var(--wic-accent-soft); }
.wic-hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--wic-muted); }

.wic-group-label { font-size: 11.5px; font-weight: 800; color: var(--wic-sub); margin: 16px 0 8px; letter-spacing: .4px; }
.wic-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wic-chip { padding: 7px 11px; font-size: 12.5px; font-weight: 700; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--wic-line); background: var(--wic-soft); color: var(--wic-sub); transition: all .13s; }
.wic-chip:hover { border-color: var(--wic-accent); }
.wic-chip.active { background: var(--wic-accent); color: #04222d; border-color: var(--wic-accent); }
.wic-chip[data-wic-emoji] { font-size: 18px; padding: 6px 10px; }

.wic-file { display: flex; align-items: center; gap: 10px; }
.wic-file input[type=file] { font-size: 12px; color: var(--wic-sub); }

.wic-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.wic-btn { padding: 13px; font-size: 14.5px; font-weight: 800; border-radius: 14px; border: 1px solid transparent; cursor: pointer; transition: transform .1s, filter .15s; }
.wic-btn:active { transform: translateY(1px); }
.wic-btn-primary { background: linear-gradient(135deg, var(--wic-accent), #6366f1); color: #04222d; }
.wic-btn-primary:hover { filter: brightness(1.06); }
.wic-btn-second { background: var(--wic-soft); border-color: var(--wic-accent); color: var(--wic-accent); }
.wic-btn-ghost { background: var(--wic-soft); border-color: var(--wic-line); color: var(--wic-sub); }
.wic-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* 证件舞台 */
.wic-card-stage {
    background: linear-gradient(160deg, rgba(148,163,184,.14), rgba(148,163,184,.05));
    border: 1px dashed var(--wic-line); border-radius: 24px; padding: 26px;
    display: flex; flex-direction: column; align-items: center; gap: 14px; position: relative;
}
.wic-card-stage::before { content: ""; position: absolute; inset: 0; border-radius: 24px; pointer-events: none;
    background: radial-gradient(600px 200px at 50% 0%, rgba(14,165,233,.10), transparent 70%); }
.wic-canvas-shell { position: relative; border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(2,8,23,.4), 0 2px 8px rgba(2,8,23,.2); width: 375px; max-width: 100%; }
.wic-canvas-shell canvas { display: block; width: 100%; height: auto; }
.wic-stage-tip { font-size: 12px; color: var(--wic-muted); text-align: center; line-height: 1.6; }
.wic-generated { text-align: center; font-size: 13px; color: var(--wic-sub); }
.wic-generated b { color: var(--wic-accent); font-size: 15px; }

/* toast */
.wic-toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px);
    background: #0f172a; color: #fff; font-size: 14px; font-weight: 700; padding: 13px 20px; border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: all .22s; z-index: 99; }
.wic-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 示例墙 */
.wic-gallery { margin-top: 22px; }
.wic-gallery h3 { font-size: 16px; color: var(--wic-text); margin: 0 0 6px; }
.wic-gallery .wic-sub { font-size: 12.5px; color: var(--wic-muted); margin: 0 0 14px; }
.wic-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.wic-gal-item { border: 1px solid var(--wic-line); border-radius: 14px; padding: 12px; background: var(--wic-surface); text-align: center; text-decoration: none; color: var(--wic-text); transition: transform .12s, border-color .15s; }
.wic-gal-item:hover { transform: translateY(-3px); border-color: var(--wic-accent); }
.wic-gal-item .e { font-size: 26px; }
.wic-gal-item b { display: block; font-size: 13px; margin-top: 5px; }
.wic-gal-item small { font-size: 11.5px; color: var(--wic-muted); }

/* 信息 / tabs / faq / 相关 */
.wic-info { margin-top: 26px; }
.wic-info .wic-desc { font-size: 14px; line-height: 1.8; color: var(--wic-sub); }
.wic-info .wic-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; margin-top: 14px; }
.wic-info .wic-meta .item { background: var(--wic-soft); border: 1px solid var(--wic-line); border-radius: 12px; padding: 10px 12px; }
.wic-info .wic-meta .item .k { font-size: 11.5px; color: var(--wic-muted); }
.wic-info .wic-meta .item .v { font-size: 13px; font-weight: 700; color: var(--wic-text); margin-top: 3px; }

.wic-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 14px; border-bottom: 1px solid var(--wic-line); }
.wic-tabs button { padding: 9px 14px; font-size: 13.5px; font-weight: 700; border: none; background: none; color: var(--wic-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.wic-tabs button.active { color: var(--wic-accent); border-bottom-color: var(--wic-accent); }
.wic-panel-x { display: none; } .wic-panel-x.active { display: block; }
.wic-panel-x h4 { font-size: 15px; color: var(--wic-text); margin: 6px 0 12px; }
.wic-panel-x p, .wic-panel-x li { font-size: 13.5px; line-height: 1.8; color: var(--wic-sub); }
.wic-panel-x ol { padding-left: 20px; }
.wic-faq details { border: 1px solid var(--wic-line); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--wic-soft); }
.wic-faq summary { font-weight: 700; cursor: pointer; color: var(--wic-text); font-size: 13.5px; }
.wic-faq .wic-a { margin-top: 9px; font-size: 13px; line-height: 1.75; color: var(--wic-sub); }
.wic-changelog li { list-style: none; margin-bottom: 10px; font-size: 13px; color: var(--wic-sub); }
.wic-changelog .ver { font-weight: 800; color: var(--wic-accent); margin-right: 8px; }
.wic-changelog .date { color: var(--wic-muted); margin-right: 8px; font-size: 12px; }

.wic-related { margin-top: 24px; } .wic-related h3 { font-size: 16px; color: var(--wic-text); margin: 0 0 12px; }
.wic-rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; }
.wic-rel-item { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--wic-line); border-radius: 14px; background: var(--wic-surface); text-decoration: none; color: var(--wic-text); transition: border-color .15s, transform .1s; }
.wic-rel-item:hover { border-color: var(--wic-accent); transform: translateY(-2px); }
.wic-rel-item .wic-rel-ic { font-size: 22px; } .wic-rel-item b { font-size: 13.5px; display: block; } .wic-rel-item small { font-size: 11.5px; color: var(--wic-muted); }
.wic-rel-item .wic-rel-go { margin-left: auto; color: var(--wic-accent); font-weight: 800; }
.wic-disclaim { margin-top: 22px; font-size: 12px; line-height: 1.7; color: var(--wic-muted); background: var(--wic-soft); border: 1px dashed var(--wic-line); border-radius: 12px; padding: 12px 14px; }
.wic-back-top { position: fixed; right: 18px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wic-line); background: var(--wic-accent); color: #04222d; font-size: 18px; font-weight: 800; cursor: pointer; display: none; z-index: 50; }
@media (max-width: 620px) { .wic-hero { padding: 20px; } .wic-hero h1 { font-size: 22px; } .wic-canvas-shell { width: 100%; } }