/* 证件照制作：规格裁剪 + 背景替换 + 压缩导出 + 排版打印（全部本地处理） */

.ip-hero {
    margin: 18px 0 26px;
    background: linear-gradient(135deg, #eef4ff 0%, #f7f9ff 55%, #eef7f4 100%);
    border: 1px solid #e3ebf7;
    border-radius: 18px;
    padding: 22px 22px 18px;
}
.ip-inner { max-width: 1080px; margin: 0 auto; }

.ip-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.ip-brand { display: flex; align-items: center; gap: 12px; }
.ip-logo {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(64, 108, 190, .16);
}
.ip-title { font-size: 20px; font-weight: 800; color: #1f2b45; letter-spacing: .3px; }
.ip-tagline { font-size: 13px; color: #6b7a96; margin-top: 2px; }

.ip-privacy {
    font-size: 12px;
    color: #2f7d55;
    background: #e8f7ef;
    border: 1px solid #c6ead8;
    border-radius: 999px;
    padding: 6px 12px;
    white-space: nowrap;
}

/* ---------- 上传区 ---------- */
.ip-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    border: 2px dashed #c9d8ee;
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .2s, background .2s, transform .2s;
}
.ip-drop:hover, .ip-drop.is-drag {
    border-color: #4b7bec;
    background: #f5f9ff;
}
.ip-drop.is-drag { transform: scale(1.005); }
.ip-drop-icon { font-size: 40px; line-height: 1; }
.ip-drop-title { font-size: 16px; font-weight: 700; color: #22304d; }
.ip-drop-desc { font-size: 13px; color: #7b89a3; line-height: 1.7; }
.ip-drop-btn {
    margin-top: 4px;
    padding: 10px 26px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #4b7bec, #3867d6);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(75, 123, 236, .3);
}
.ip-drop-btn:hover { filter: brightness(1.05); }

/* ---------- 工作区 ---------- */
.ip-workspace {
    display: grid;
    grid-template-columns: minmax(260px, 380px) 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 6px;
}
.ip-preview-card {
    background: #fff;
    border: 1px solid #e6edf7;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(38, 66, 122, .06);
}
.ip-preview-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-conic-gradient(#f4f6fa 0% 25%, #eaeef5 0% 50%) 50% / 18px 18px;
    border-radius: 12px;
    padding: 12px;
    min-height: 260px;
}
#ipPreview {
    max-width: 100%;
    max-height: 420px;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(28, 48, 92, .18);
    cursor: grab;
    touch-action: none;
    background: #fff;
}
#ipPreview.is-grabbing { cursor: grabbing; }
.ip-preview-tip { margin: 10px 0 0; font-size: 12px; color: #8895ad; line-height: 1.6; }

/* ---------- 控制面板 ---------- */
.ip-panel { display: flex; flex-direction: column; gap: 14px; }
.ip-group {
    background: #fff;
    border: 1px solid #e6edf7;
    border-radius: 14px;
    padding: 14px 16px;
}
.ip-group-title {
    font-size: 14px;
    font-weight: 800;
    color: #22304d;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ip-group-title small { font-weight: 500; color: #93a0b8; font-size: 12px; }

.ip-specs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}
.ip-spec-btn {
    border: 1px solid #e0e8f4;
    background: #fbfcfe;
    border-radius: 10px;
    padding: 9px 6px;
    cursor: pointer;
    text-align: center;
    transition: all .16s;
}
.ip-spec-btn b { display: block; font-size: 13.5px; color: #24324f; }
.ip-spec-btn span { display: block; font-size: 11px; color: #98a4bb; margin-top: 2px; }
.ip-spec-btn:hover { border-color: #9db8e8; background: #f4f8ff; }
.ip-spec-btn.active {
    border-color: #4b7bec;
    background: #eef4ff;
    box-shadow: 0 0 0 2px rgba(75, 123, 236, .14) inset;
}
.ip-spec-btn.active b { color: #2b62d9; }

.ip-spec-info { margin-top: 10px; font-size: 12.5px; color: #66748d; line-height: 1.6; }

.ip-bgs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ip-bg-btn {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 2px solid #dfe6f2;
    cursor: pointer;
    position: relative;
    transition: transform .15s, box-shadow .15s;
    padding: 0;
}
.ip-bg-btn:hover { transform: translateY(-2px); }
.ip-bg-btn.active {
    border-color: #4b7bec;
    box-shadow: 0 0 0 3px rgba(75, 123, 236, .18);
}
.ip-bg-btn::after {
    content: attr(data-name);
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    font-size: 10.5px;
    color: #8895ad;
    white-space: nowrap;
    margin-top: 3px;
    pointer-events: none;
}
.ip-bg-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 12.5px;
    color: #66748d;
}
.ip-bg-custom input[type="color"] {
    width: 38px; height: 30px;
    padding: 0;
    border: 1px solid #dfe6f2;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.ip-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ip-field { flex: 1 1 200px; }
.ip-field label { display: block; font-size: 12.5px; color: #66748d; margin-bottom: 6px; }
.ip-slider { display: flex; align-items: center; gap: 10px; }
.ip-slider input[type="range"] { flex: 1; accent-color: #4b7bec; }
.ip-slider b { font-size: 13px; color: #2b62d9; min-width: 34px; text-align: right; }

.ip-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #4c5a75;
    cursor: pointer;
    user-select: none;
}
.ip-check input { accent-color: #4b7bec; width: 15px; height: 15px; }

.ip-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #4c5a75;
    background: #f5f8fd;
    border: 1px solid #e4ebf6;
    border-radius: 999px;
    padding: 5px 11px;
}
.ip-chip i {
    width: 14px; height: 14px;
    border-radius: 4px;
    border: 1px solid #d3dcea;
    display: inline-block;
}

.ip-select {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #dfe6f2;
    border-radius: 10px;
    background: #fbfcfe;
    font-size: 13.5px;
    color: #24324f;
    cursor: pointer;
}
.ip-hint { margin-top: 8px; font-size: 12px; color: #8895ad; line-height: 1.6; }

.ip-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ip-btn {
    flex: 1 1 160px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid #dfe6f2;
    background: #fff;
    color: #333f58;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .16s;
}
.ip-btn:hover { border-color: #9db8e8; background: #f6faff; }
.ip-btn.primary {
    border: 0;
    background: linear-gradient(135deg, #4b7bec, #3867d6);
    color: #fff;
    box-shadow: 0 6px 16px rgba(75, 123, 236, .28);
}
.ip-btn.primary:hover { filter: brightness(1.05); }
.ip-btn.ghost { flex: 0 0 auto; padding: 12px 18px; }

.ip-status {
    margin-top: 4px;
    font-size: 13px;
    color: #66748d;
    background: #f7f9fd;
    border: 1px solid #e8eef8;
    border-radius: 10px;
    padding: 10px 13px;
    line-height: 1.6;
    min-height: 20px;
}
.ip-status.is-ok { color: #2f7d55; background: #eefaf3; border-color: #cdeedd; }
.ip-status.is-warn { color: #a15c11; background: #fff8ec; border-color: #f6e2c0; }

/* ---------- 说明区块 ---------- */
.ip-disclaim {
    margin: 18px 0 26px;
    font-size: 13px;
    line-height: 1.8;
    color: #6b7a96;
    background: #f7f9fd;
    border-left: 4px solid #9db8e8;
    border-radius: 0 12px 12px 0;
    padding: 13px 16px;
}
.ip-info-block { margin-bottom: 26px; }

/* ---------- 黑夜模式 ---------- */
[data-theme="dark"] .ip-hero {
    background: linear-gradient(135deg, #1b2333 0%, #1a2130 55%, #182a26 100%);
    border-color: #2b3648;
}
[data-theme="dark"] .ip-logo { background: #232c3d; box-shadow: none; }
[data-theme="dark"] .ip-title { color: #e8eefb; }
[data-theme="dark"] .ip-tagline { color: #93a2bb; }
[data-theme="dark"] .ip-privacy { color: #7fd0a6; background: #1d2f27; border-color: #2c4a3c; }
[data-theme="dark"] .ip-drop,
[data-theme="dark"] .ip-group,
[data-theme="dark"] .ip-preview-card { background: #1f2735; border-color: #2e3949; }
[data-theme="dark"] .ip-drop:hover,
[data-theme="dark"] .ip-drop.is-drag { background: #232f42; border-color: #4b7bec; }
[data-theme="dark"] .ip-drop-title { color: #e8eefb; }
[data-theme="dark"] .ip-drop-desc { color: #8e9cb4; }
[data-theme="dark"] .ip-preview-stage { background: repeating-conic-gradient(#232c3b 0% 25%, #1c2431 0% 50%) 50% / 18px 18px; }
[data-theme="dark"] .ip-group-title { color: #e2e9f6; }
[data-theme="dark"] .ip-spec-btn { background: #232c3b; border-color: #313d4f; }
[data-theme="dark"] .ip-spec-btn b { color: #dbe4f3; }
[data-theme="dark"] .ip-spec-btn:hover { background: #28344a; border-color: #4b7bec; }
[data-theme="dark"] .ip-spec-btn.active { background: #22304a; border-color: #4b7bec; }
[data-theme="dark"] .ip-spec-btn.active b { color: #8fb4ff; }
[data-theme="dark"] .ip-spec-info,
[data-theme="dark"] .ip-field label,
[data-theme="dark"] .ip-check,
[data-theme="dark"] .ip-chip,
[data-theme="dark"] .ip-bg-custom { color: #9aa8c0; }
[data-theme="dark"] .ip-chip { background: #232c3b; border-color: #313d4f; }
[data-theme="dark"] .ip-select,
[data-theme="dark"] .ip-btn { background: #232c3b; border-color: #313d4f; color: #dbe4f3; }
[data-theme="dark"] .ip-btn:hover { background: #28344a; border-color: #4b7bec; }
[data-theme="dark"] .ip-btn.primary { background: linear-gradient(135deg, #4b7bec, #3867d6); color: #fff; }
[data-theme="dark"] .ip-status { background: #232c3b; border-color: #313d4f; color: #9aa8c0; }
[data-theme="dark"] .ip-status.is-ok { color: #7fd0a6; background: #1d2f27; border-color: #2c4a3c; }
[data-theme="dark"] .ip-status.is-warn { color: #e0ac63; background: #33291a; border-color: #4d3d24; }
[data-theme="dark"] .ip-disclaim { color: #93a2bb; background: #1d2531; border-left-color: #3d5b96; }
[data-theme="dark"] .ip-bg-btn { border-color: #3a4658; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
    .ip-workspace { grid-template-columns: 1fr; }
    #ipPreview { max-height: 340px; }
    .ip-preview-stage { min-height: 200px; }
}
@media (max-width: 560px) {
    .ip-hero { padding: 16px 14px 14px; border-radius: 14px; }
    .ip-topbar { gap: 8px; }
    .ip-privacy { white-space: normal; }
    .ip-specs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .ip-btn { flex: 1 1 100%; }
    .ip-drop { padding: 28px 14px; }
}