/* ============================================================
   console.css — 演示配置平台控制台样式
   ============================================================ */
/* 配置页图标 */
.sec-ico { height: 30px; width: auto; object-fit: contain; vertical-align: middle; margin-right: 9px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.chk-ico { height: 20px; width: auto; object-fit: contain; vertical-align: middle; margin: 0 3px; }
.icogal { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.icogal figure { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0; width: 86px; padding: 10px 6px; border: 1px solid var(--line, #1d2530); border-radius: 10px; background: rgba(255,255,255,.02); }
.icogal img { height: 50px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.icogal figcaption { font-size: 10.5px; color: var(--dim, #9fb0c2); text-align: center; line-height: 1.3; }

/* 顶栏客户 logo */
.brand-logo { height: 30px; width: auto; max-width: 130px; object-fit: contain; margin-right: 12px; vertical-align: middle; }
/* 编辑器 logo 上传 */
.logo-up { display: flex; align-items: center; gap: 12px; }
.logo-up .prev { width: 90px; height: 46px; border: 1px dashed var(--line, #2a3848); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(255,255,255,.03); flex-shrink: 0; }
.logo-up .prev img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-up .prev .ph { font-size: 10px; color: var(--faint, #6b7b8d); }

/* 顶栏入口按钮（安静态：灰白；hover 才出 accent） */
.console-btn { font: inherit; font-size: 11.5px; font-weight: 500; color: var(--dim, #94a1b3); background: rgba(255,255,255,.05); border: 1px solid var(--bd, rgba(175,205,245,.12)); padding: 5px 12px; border-radius: 8px; cursor: pointer; margin-right: 10px; transition: color .15s, background-color .15s, border-color .15s; }
.console-btn:hover { background: color-mix(in srgb, var(--accent, #56cfe1) 22%, transparent); border-color: color-mix(in srgb, var(--accent, #56cfe1) 45%, transparent); color: #fff; }
.console-btn:active { transform: translateY(1px); }

#console.console { position: fixed; inset: 0; z-index: 200; background: rgba(6, 9, 14, .92); backdrop-filter: blur(14px); overflow: auto; color: var(--tx, #e8edf4); font-size: 13px; }
#console.hidden { display: none; }
.cs-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 26px 60px; }
.cs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 0 16px; border-bottom: 1px solid var(--line, #1d2530); margin-bottom: 18px; position: sticky; top: 0; background: linear-gradient(180deg, rgba(6,9,14,.98), rgba(6,9,14,.86)); z-index: 5; }
.cs-title { display: flex; flex-direction: column; gap: 2px; }
.cs-title b { font-size: 18px; font-weight: 600; letter-spacing: .02em; }
.cs-title span { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint, #5b6b7d); font-weight: 700; }
.cs-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 按钮 */
.pbtn { font: inherit; font-size: 12px; font-weight: 600; color: var(--dim, #aebccd); background: rgba(255,255,255,.05); border: 1px solid var(--line, #233040); padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: .15s; white-space: nowrap; }
.pbtn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: #3a4a5e; }
.pbtn.primary { background: color-mix(in srgb, var(--accent, #ff6a00) 24%, transparent); border-color: color-mix(in srgb, var(--accent, #ff6a00) 60%, transparent); color: #fff; }
.pbtn.primary:hover { background: color-mix(in srgb, var(--accent, #ff6a00) 40%, transparent); }
.pbtn.danger:hover { color: var(--red, #ff5a6a); border-color: var(--red, #ff5a6a); }
.pbtn.xs { padding: 3px 9px; font-size: 11px; }

/* 项目库 */
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 14px; }
.pj-card { background: rgba(255,255,255,.03); border: 1px solid var(--line, #1d2530); border-radius: 12px; padding: 15px 16px; display: flex; flex-direction: column; gap: 9px; transition: .15s; }
.pj-card:hover { border-color: #324356; background: rgba(255,255,255,.05); }
.pj-card.active { border-color: color-mix(in srgb, var(--accent, #ff6a00) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #ff6a00) 40%, transparent) inset; }
.pj-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pj-name { font-size: 15px; font-weight: 600; }
.pj-badge { font-size: 10px; font-weight: 700; color: var(--accent, #ff6a00); border: 1px solid color-mix(in srgb, var(--accent,#ff6a00) 50%, transparent); border-radius: 99px; padding: 1px 8px; }
.pj-meta { font-size: 11.5px; color: var(--dim, #9fb0c2); min-height: 16px; }
.pj-stats { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 11px; color: var(--faint, #6b7b8d); }
.pj-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pj-empty { grid-column: 1/-1; text-align: center; color: var(--faint, #6b7b8d); padding: 60px 0; font-size: 13px; }

/* 编辑器 */
.ed-name { font-size: 18px; font-weight: 600; background: transparent; border: none; border-bottom: 1px dashed var(--line, #2a3848); color: #fff; padding: 2px 2px 4px; outline: none; min-width: 280px; }
.ed-name:focus { border-bottom-color: var(--accent, #ff6a00); }
.ed-body { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: start; }
.ed-nav { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 84px; }
.ed-nav a { padding: 9px 12px; border-radius: 8px; cursor: pointer; color: var(--dim, #9fb0c2); font-size: 13px; font-weight: 600; }
.ed-nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.ed-nav a.on { background: color-mix(in srgb, var(--accent, #ff6a00) 18%, transparent); color: #fff; }
.ed-form { background: rgba(255,255,255,.02); border: 1px solid var(--line, #1d2530); border-radius: 12px; padding: 18px 20px; min-height: 360px; }
.ed-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.ed-field { display: flex; flex-direction: column; gap: 5px; }
.ed-field .lab { font-size: 12px; color: var(--dim, #aebccd); font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.ed-field .lab i { font-style: normal; font-size: 10.5px; color: var(--faint, #6b7b8d); font-weight: 400; }
.ed-form input, .ed-form select, .ed-form textarea { font: inherit; font-size: 13px; background: rgba(255,255,255,.04); border: 1px solid var(--line, #233040); border-radius: 7px; color: #fff; padding: 7px 9px; outline: none; width: 100%; }
.ed-form input:focus, .ed-form select:focus, .ed-form textarea:focus { border-color: color-mix(in srgb, var(--accent, #ff6a00) 60%, transparent); }
.ed-form input[type=color] { padding: 2px; height: 34px; }
.ed-form textarea { resize: vertical; line-height: 1.5; font-family: var(--mono, ui-monospace, monospace); }
.ed-json { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; }
.ed-sec-h { font-size: 13.5px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: baseline; gap: 10px; }
.ed-sec-h .muted, .muted { color: var(--faint, #6b7b8d); font-weight: 400; font-size: 11.5px; }
.ed-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ed-chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim, #aebccd); cursor: pointer; }
.ed-chk input { width: auto; }
/* 配色模板画廊 */
.theme-gal { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.theme-card { font: inherit; cursor: pointer; width: 132px; padding: 9px; border: 1px solid var(--bd, rgba(175,205,245,.12)); border-radius: 12px; background: rgba(255,255,255,.02); display: flex; flex-direction: column; gap: 8px; transition: border-color .15s, background-color .15s, transform .1s; text-align: left; }
.theme-card:hover { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.05); }
.theme-card:active { transform: translateY(1px); }
.theme-card.on { border-color: color-mix(in srgb, var(--accent, #56cfe1) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, #56cfe1) 45%, transparent) inset; }
.theme-card .tw { display: flex; height: 30px; border-radius: 7px; overflow: hidden; }
.theme-card .tw span { flex: 1; }
.theme-card .tw span:first-child { flex: 1.6; }
.theme-card .tn { line-height: 1.25; }
.theme-card .tn b { font-size: 12.5px; font-weight: 600; display: block; }
.theme-card .tn i { font-style: normal; font-size: 8px; letter-spacing: .14em; color: var(--faint, #6b7b8d); }

/* 批量导入 */
.imp-box { margin-top: 14px; border: 1px dashed var(--line, #2a3848); border-radius: 10px; padding: 10px 12px; }
.imp-box summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--dim, #aebccd); list-style: none; }
.imp-box summary::-webkit-details-marker { display: none; }
.imp-box summary:hover { color: #fff; }
.imp-box[open] summary { margin-bottom: 10px; }
.imp-box textarea { width: 100%; font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; }
.imp-msg { margin-top: 9px; font-size: 12px; color: var(--dim, #aebccd); background: rgba(86,207,225,.07); border: 1px solid rgba(86,207,225,.25); border-radius: 8px; padding: 7px 10px; line-height: 1.6; }

/* 表格 */
.ed-tbl { width: 100%; border-collapse: collapse; }
.ed-tbl th { text-align: left; font-size: 11px; color: var(--faint, #6b7b8d); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line, #1d2530); text-transform: uppercase; letter-spacing: .04em; }
.ed-tbl td { padding: 4px 8px; vertical-align: middle; }
.ed-tbl td.r { text-align: right; width: 1%; }
.ed-tbl td input, .ed-tbl td select { padding: 5px 8px; }
.ed-tbl tbody tr:hover { background: rgba(255,255,255,.02); }