/* ============================================================
   自建拼图工作台（/create，2026-09-20）
   配色：白色底 + 深色字（2026-09-20 由深色卡反转为浅色卡；强调色仍用品牌蓝/粉）。
   依赖 pg.css 的设计令牌（--pg-*），两主题共用（theme_asset() 回退 default）。
   ============================================================ */

/* 页面白底：body 背色由 create.blade.php 内本页专属的 <style> 输出（create.css 全站共享，
   不适合直接写 body 规则）；本容器再显式保证白底，两主题一致。 */
.create-app { background: #fff; }

.create-app {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px 60px;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    color: var(--pg-text);
}

/* 面板：白卡 + 浅边框 + 极轻投影（白底上靠边框与阴影分层） */
.create-panel,
.create-privacy {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: var(--pg-radius-card);
    box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
    padding: 22px;
    margin: 0 0 18px;
    color: var(--pg-text);
}

/* 选图区：点击 label 触发隐藏 file；拖放高亮 */
.create-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 190px;
    padding: 22px;
    border: 2px dashed #dcdcdc;
    border-radius: calc(var(--pg-radius-card) - 4px);
    background: #fcfcfd;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s ease, background .2s ease;
}
.create-drop:hover,
.create-drop.is-over { border-color: var(--pg-primary); background: rgba(13, 110, 227, .06); }
.create-drop__icon { width: 40px; height: 40px; stroke: var(--pg-primary); }
.create-drop__title { font-size: 18px; font-weight: 700; color: var(--pg-text); }
/* 次要文字统一 #6e6e6e（白底对比度 ≈5.1:1）——原深色卡上用的 #9e9e9e 反转后仅 2.6:1 不够读 */
.create-drop__hint { font-size: 13px; color: #6e6e6e; }

/* 已选图预览 */
.create-preview { position: relative; margin: 0; text-align: center; }
.create-preview img {
    width: 100%;
    max-width: 420px;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border: 1px solid #ececec;
    border-radius: calc(var(--pg-radius-card) - 4px);
    display: block;
    margin: 0 auto;
}
.create-preview figcaption { margin-top: 10px; font-size: 13px; color: #6e6e6e; }
.create-preview figcaption b { color: var(--pg-text); margin-right: 8px; }
/* 删除按钮叠在图片上，保留深底白字保证可读 */
.create-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    line-height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}
.create-remove:hover { background: var(--pg-danger); }

.create-error { margin: 12px 0 0; color: var(--pg-danger); font-size: 14px; }

/* 参数区 */
.create-field { margin: 0 0 18px; }
.create-label { display: block; font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--pg-text); }
.create-count { margin-top: 8px; font-size: 14px; color: #5a5a5a; }
.create-count b { color: var(--pg-primary); font-size: 17px; }
.create-grid { margin-left: 8px; font-size: 13px; color: #6e6e6e; }
.create-hint { margin: 8px 0 0; font-size: 12px; color: #6e6e6e; }

.create-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.create-chip,
.create-shape {
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #5a5a5a;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
}
.create-chip:hover,
.create-shape:hover { border-color: var(--pg-primary); color: var(--pg-primary); }
/* 选中态保持「蓝底白字」（与全站胶囊/按钮的激活态一致，白底上对比度足够） */
.create-chip.is-active,
.create-shape.is-active {
    background: var(--pg-primary);
    border-color: var(--pg-primary);
    color: #fff;
    font-weight: 700;
}

/* 形状选择：SVG 预览 + 名称 */
.create-shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.create-shape {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-radius: calc(var(--pg-radius-card) - 6px);
    padding: 10px 6px;
    font-size: 12px;
    min-width: 0;
}
.create-shape svg { width: 40px; height: 40px; }
/* 预览 SVG 异步补齐，先占位同高避免 chip 跳动 */
.create-shape__ico { display: flex; align-items: center; justify-content: center; height: 40px; color: currentColor; }

/* 旋转开关 */
.create-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; color: var(--pg-text); }
.create-switch input { width: 16px; height: 16px; accent-color: var(--pg-primary); }

/* 行动区 */
.create-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 20px; }
.pg-btn[disabled] { opacity: .5; cursor: not-allowed; }
.pg-btn--ghost {
    background: transparent;
    border: 1px solid var(--pg-primary);
    color: var(--pg-primary);
}
.pg-btn--ghost:hover { background: var(--pg-primary); color: #fff; }
.create-text-btn {
    border: 0;
    background: none;
    color: var(--pg-primary);
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
}
.create-text-btn:hover { color: var(--pg-second); }
.create-note { width: 100%; text-align: center; font-size: 13px; color: #6e6e6e; }

/* 隐私说明（本功能的核心承诺） */
.create-privacy__title { margin: 0 0 8px; font-size: 17px; color: var(--pg-second); }
.create-privacy p { margin: 0 0 10px; font-size: 14px; line-height: 1.8; color: #5a5a5a; }
.create-privacy__list { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.9; color: #6e6e6e; }

/* 窄屏：形状两列、面板留白收紧 */
@media (max-width: 900px) {
    .create-shapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .create-panel,
    .create-privacy { padding: 16px; }
}