/* =====================================================
   海报拼图 - Poster Collage Tool Styles
   ===================================================== */

/* 主容器：撑满剩余视口高度，紧凑布局 */
.pc-container { display:flex; flex-direction:column; height:calc(100vh - 148px); min-height:540px; }

/* ---------- 顶部工具栏 ---------- */
.pc-toolbar {
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    padding:5px 10px; background:#f5f6f7; border-bottom:1px solid #dde;
    flex-shrink:0;
}
.tb-group { display:flex; align-items:center; gap:4px; }
.tb-group label { font-size:12px; color:#555; white-space:nowrap; }
.tb-sep { width:1px; height:18px; background:#ddd; margin:0 2px; }
.tb-x { font-size:12px; color:#888; }
.tb-val { font-size:11px; color:#666; min-width:30px; display:inline-block; }
.tb-group input[type="range"] { width:68px; height:4px; cursor:pointer; accent-color:#4285f4; }
.tb-group input[type="number"] { width:55px; padding:2px 4px; border:1px solid #ddd; border-radius:3px; font-size:12px; }
.tb-group select { padding:2px 5px; border:1px solid #ddd; border-radius:3px; font-size:12px; background:#fff; }
.tb-group input[type="color"] { width:28px; height:22px; padding:1px; border:1px solid #ccc; border-radius:3px; cursor:pointer; }
.pc-export-btn { padding:4px 12px !important; font-size:12px !important; transition:all .15s; }
.pc-export-btn:hover { transform:scale(1.02); }

/* ---------- 三栏主区域 ---------- */
.pc-main { display:flex; flex:1; overflow:hidden; }

/* --- 左侧面板 --- */
.pc-left {
    width:178px; min-width:158px; border-right:1px solid #e0e0e0;
    overflow-y:auto; background:#fafafa; display:flex; flex-direction:column;
    flex-shrink:0;
}

/* --- 中间画布区 --- */
.pc-center {
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; background:#dfe2e6; overflow:auto;
    padding:8px 6px 5px;
}
.canvas-outer { display:flex; align-items:center; justify-content:center; flex:1; width:100%; }
.canvas-wrapper {
    position:relative; background:#fff;
    box-shadow:0 3px 16px rgba(0,0,0,.28);
    overflow:hidden; transition:box-shadow .2s;
}
#collageCanvas { display:block; }
.canvas-placeholder {
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px; pointer-events:none;
}
.ph-icon { font-size:44px; line-height:1; color:#c0c4cc; }
.ph-text { font-size:14px; color:#aaa; font-weight:500; }
.ph-sub { font-size:11px; color:#c0c4cc; }
.canvas-info { font-size:11px; color:#888; margin-top:4px; text-align:center; flex-shrink:0; }

/* --- 右侧面板 --- */
.pc-right {
    width:178px; min-width:158px; border-left:1px solid #e0e0e0;
    overflow-y:auto; background:#fafafa; flex-shrink:0;
}

/* ---------- 面板通用 ---------- */
.panel-section { padding:7px 8px; border-bottom:1px solid #eee; }
.section-title { font-size:11px; font-weight:700; color:#444; margin-bottom:5px; border-left:3px solid #4285f4; padding-left:6px; }

/* ---------- 布局模板选择器 ---------- */
.layout-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; }
.layout-item {
    display:flex; flex-direction:column; align-items:center; cursor:pointer;
    padding:3px 2px; border-radius:4px; border:2px solid transparent;
    transition:all .15s; user-select:none; position:relative;
}
.layout-item:hover { background:#e8f0fe; border-color:#c5d8f8; transform:scale(1.02); }
.layout-item.active { border-color:#4285f4; background:#dce8fd; box-shadow:0 0 0 1px #4285f4 inset; }
.layout-item.active::after { content:'✓'; position:absolute; top:2px; right:3px; font-size:8px; color:#4285f4; font-weight:900; line-height:1; }
.layout-item canvas { border-radius:2px; display:block; }
.layout-name { font-size:9px; color:#777; margin-top:2px; text-align:center; line-height:1.2; }

/* ---------- 图片槽位 ---------- */
.slot-list { display:flex; flex-direction:column; gap:3px; margin-bottom:5px; }
.slot-item {
    display:flex; align-items:center; gap:5px; padding:4px;
    border-radius:4px; background:#fff; border:1.5px solid #eee;
    cursor:pointer; transition:all .15s;
}
.slot-item:hover { border-color:#4285f4; background:#f0f5ff; }
.slot-item.drop-over { border-color:#34a853 !important; background:#e6f4ea !important; }
.slot-item.assign-target { border-color:#ff9800; background:#fff8e1; animation:slot-pulse 1.2s ease-in-out infinite; }
.slot-thumb {
    width:34px; height:34px; background:#f0f0f0; border-radius:3px;
    overflow:hidden; flex-shrink:0; display:flex; align-items:center;
    justify-content:center; font-size:12px; color:#bbb; font-weight:700;
}
.slot-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.slot-info { flex:1; min-width:0; }
.slot-label { font-size:11px; color:#444; }
.slot-img-name { font-size:10px; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slot-clear {
    background:none; border:none; color:#d0d0d0; cursor:pointer;
    font-size:11px; padding:2px 3px; border-radius:2px; line-height:1; transition:all .15s;
    flex-shrink:0;
}
.slot-clear:hover { color:#f44336; transform:scale(1.1); }
.slot-actions { display:flex; gap:4px; flex-wrap:wrap; }

/* ---------- 上传区域 ---------- */
.upload-area {
    border:2px dashed #ccc; border-radius:5px; padding:10px 6px;
    text-align:center; cursor:pointer; transition:all .2s; margin-bottom:5px;
    position:relative;
}
.upload-area input[type="file"] { display:none; }
.upload-area:hover, .upload-area.drag-over { border-color:#4285f4; background:#e8f0fe; }
.upload-hint {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    color:#aaa; font-size:11px; pointer-events:none;
}
.upload-icon { font-size:22px; line-height:1; margin-bottom:2px; }
.upload-tip { font-size:9px; color:#ccc; line-height:1.4; }

/* ---------- 图片库 ---------- */
.image-library {
    display:grid; grid-template-columns:repeat(2,1fr); gap:4px;
    margin-bottom:4px; max-height:360px; overflow-y:auto;
}
.lib-img-item {
    position:relative; aspect-ratio:1/1; border-radius:4px; overflow:hidden;
    cursor:pointer; border:2px solid transparent; transition:all .15s;
    background:#eee;
}
.lib-img-item:hover { border-color:#4285f4; transform:scale(1.02); }
.lib-img-item.selected { border-color:#4285f4; outline:2px solid rgba(66,133,244,.4); }
.lib-img-item.dragging { opacity:.5; cursor:grabbing; }
.lib-img-item.assign-mode-active { outline:2px dashed #ff9800; }
.lib-img-item img { width:100%; height:100%; object-fit:cover; pointer-events:none; display:block; }
.lib-img-del {
    position:absolute; top:2px; right:2px; background:rgba(0,0,0,.55);
    color:#fff; border:none; border-radius:50%; width:16px; height:16px;
    font-size:9px; cursor:pointer; display:none; align-items:center;
    justify-content:center; line-height:1; padding:0; transition:all .15s;
}
.lib-img-item:hover .lib-img-del { display:flex; }
.lib-img-del:hover { background:rgba(220,50,50,.85); }
.library-footer { display:flex; justify-content:space-between; align-items:center; padding:2px 0; }
#libCount { font-size:10px; color:#888; }

/* ---------- 使用说明 ---------- */
.pc-usage-tips {}
.tips-list { margin:0; padding-left:16px; }
.tips-list li { font-size:10px; color:#888; line-height:1.8; }
.tips-list li b { color:#555; }

/* ---------- 通用按钮 ---------- */
.btn-sm { font-size:11px; padding:3px 8px; border-radius:3px; border:1px solid #ddd; cursor:pointer; background:#fff; transition:all .15s; white-space:nowrap; }
.btn-sm:hover { background:#f0f0f0; transform:scale(1.02); }
.btn-primary { background:#4285f4; color:#fff; border-color:#4285f4; }
.btn-primary:hover { background:#3275e4; transform:scale(1.02); }
.btn-danger { background:#fff0f0; color:#f44336; border-color:#ffcdd2; }
.btn-danger:hover { background:#ffcdd2; transform:scale(1.02); }

/* ---------- Toast通知 ---------- */
.pc-toast {
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,.76); color:#fff; padding:7px 20px;
    border-radius:20px; font-size:13px; z-index:99999; display:none;
    cursor:pointer; white-space:nowrap; max-width:360px;
}
.pc-toast.error   { background:rgba(211,47,47,.9); }
.pc-toast.success { background:rgba(46,125,50,.9); }
.pc-toast.info    { background:rgba(25,118,210,.88); }
.pc-toast.warning { background:rgba(230,126,34,.92); }

/* ---------- 隐藏工具类 ---------- */
.pc-hidden { display:none !important; }

/* ---------- 输入框聚焦微缩放（统一规范）---------- */
.tb-group input[type="number"]:focus {
    transform:scale(1.01); outline:none;
    box-shadow:0 0 0 2px rgba(66,133,244,.25);
}
.tb-group select:focus {
    transform:scale(1.01); outline:none;
    box-shadow:0 0 0 2px rgba(66,133,244,.25);
}
.tb-group input[type="range"]:focus { outline:none; }

/* ---------- Canvas 拖拽悬停高亮 ---------- */
.canvas-wrapper.drag-over {
    box-shadow:0 0 0 3px #4285f4, 0 3px 16px rgba(0,0,0,.28);
}

/* ---------- 响应式布局 ---------- */
@media (max-width:768px) {
    .pc-left, .pc-right { width:140px; min-width:116px; }
    .image-library { max-height:240px; }
}
@media (max-width:640px) {
    .pc-container { height:auto; min-height:unset; }
    .pc-main { flex-direction:column; }
    .pc-left {
        width:100%; min-width:unset; max-height:190px;
        border-right:none; border-bottom:1px solid #e0e0e0;
    }
    .pc-right {
        width:100%; min-width:unset; max-height:220px;
        border-left:none; border-top:1px solid #e0e0e0;
    }
    .image-library { max-height:110px; grid-template-columns:repeat(4,1fr); }
    .layout-grid { grid-template-columns:repeat(6,1fr); }
}

/* ---------- 槽位辅助CSS类（替代内联样式）---------- */
.slot-clear-hidden { visibility:hidden; }
.slot-img-name.no-img { color:#ccc; }
.slot-img-name.has-img { color:#888; }
.slot-item.slot-filled { border-color:#b8dfc4; background:#f6fdf7; }
.slot-item.slot-filled:hover { border-color:#4285f4; background:#f0f5ff; }
.slot-item.slot-filled .slot-thumb { background:#e3f6e8; color:#4caf50; }

/* ---------- 分配模式脉冲动画 ---------- */
@keyframes slot-pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(255,152,0,.5); }
    50%      { box-shadow:0 0 0 5px rgba(255,152,0,0); }
}

/* ---------- 自定义细滚动条 ---------- */
.pc-left::-webkit-scrollbar,
.pc-right::-webkit-scrollbar,
.image-library::-webkit-scrollbar { width:4px; height:4px; }
.pc-left::-webkit-scrollbar-track,
.pc-right::-webkit-scrollbar-track,
.image-library::-webkit-scrollbar-track { background:transparent; }
.pc-left::-webkit-scrollbar-thumb,
.pc-right::-webkit-scrollbar-thumb,
.image-library::-webkit-scrollbar-thumb { background:#ccc; border-radius:2px; }
.pc-left::-webkit-scrollbar-thumb:hover,
.pc-right::-webkit-scrollbar-thumb:hover,
.image-library::-webkit-scrollbar-thumb:hover { background:#aaa; }

/* ---------- 槽位进度徽标 ---------- */
.slot-progress { font-size:9px; font-weight:normal; color:#bbb; margin-left:2px; vertical-align:middle; }
.slot-progress.all-filled { color:#4caf50; font-weight:700; }