/* 同航IP工作台 · 换装搭配系统 —— 界面主色调取自IP形象（生机绿/活力橙/天空蓝/明黄） */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --brand: #7BC142; --brand-deep: #4E8F31; --brand-ink: #2A5B33;
  --sidebar: #1E4426; --sidebar-2: #2C5A34; --sidebar-line: rgba(255,255,255,.09);
  --orange: #F5A623; --yellow: #F5D547; --blue: #4A90D9; --cyan: #4ECDC4;
  --bg: #F2F7EF; --card: #FFFFFF; --ink: #223226; --muted: #67796B; --line: #DCE7D8;
  --danger: #D95040; --danger-bg: #FDEEEC; --ok: #3E9B4F; --ok-bg: #EAF6E4;
  --warn: #B97D0F; --warn-bg: #FDF4DC; --ref: #5C6B8A; --ref-bg: #EBF0F8;
  --radius: 12px; --shadow: 0 2px 10px rgba(42, 74, 46, .08);
}
html, body { height: 100%; }
body { font: 14px/1.65 -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; color: var(--ink); background: var(--bg); }
img { -webkit-user-drag: none; }
a { color: var(--brand-deep); }
::selection { background: #CFE8BC; }

.boot-loading { display: grid; place-items: center; height: 100vh; color: var(--muted); }

/* ---------- 通用组件 ---------- */
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 10px; padding: 8px 14px; font-size: 14px; cursor: pointer; transition: .15s; white-space: nowrap; }
.btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); border-color: transparent; color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); color: #fff; }
.btn.orange { background: linear-gradient(135deg, #FFB84D, var(--orange)); border-color: transparent; color: #fff; font-weight: 600; }
.btn.danger { color: var(--danger); border-color: #F0C8C2; }
.btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--muted); }
.btn.ghost:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.btn.sm { padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }
.btn.lg { padding: 12px 22px; font-size: 15.5px; border-radius: 12px; }
.btn svg { width: 15px; height: 15px; flex: none; }

.input, select.input, textarea.input { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 8px 12px; font-size: 14px; color: var(--ink); outline: none; font-family: inherit; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(123, 193, 66, .18); }
textarea.input { width: 100%; resize: vertical; }
label.fl { display: block; font-size: 12.5px; color: var(--muted); margin: 10px 0 5px; }

.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 5px 13px; font-size: 13px; cursor: pointer; color: var(--muted); transition: .12s; }
.chip:hover { color: var(--brand-ink); border-color: var(--brand); }
.chip.on { background: var(--brand-ink); color: #fff; border-color: var(--brand-ink); font-weight: 600; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; font-size: 12px; border-radius: 999px; background: #EDF2EA; color: var(--muted); white-space: nowrap; }
.badge.std { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.badge.ref { background: var(--ref-bg); color: var(--ref); }
.badge.unv { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.org { background: #FDEBD2; color: #A3660C; }
.badge.blue { background: #E7F0FB; color: var(--blue); }
.badge.dark { background: #2F3B33; color: #D9E9CF; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.empty { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty .big { font-size: 15px; margin-bottom: 6px; color: var(--ink); }

.toast-wrap { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: center; max-width:calc(100vw - 32px);pointer-events:none; }
.toast { background: #26352B; color: #F0F7EC; padding: 10px 18px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.25);
  max-width: 560px; display: flex; gap: 8px; align-items: center; animation: pop .18s ease; }
.toast.err { background: #8C2F23; } .toast.ok { background: #2C5A34; }
@keyframes pop { from { transform: translateY(-8px); opacity: 0; } }

.modal-mask { position: fixed; inset: 0; background: rgba(24, 38, 27, .45); z-index: 200; display: grid; place-items: center; padding: 24px; }
.modal { background: #fff; border-radius: 16px; width: min(560px, 100%); max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal .m-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 8px; }
.modal .m-head b { font-size: 16.5px; }
.modal .m-body { padding: 8px 20px 20px; }
.modal .m-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 20px 20px; }

/* ---------- 登录 ---------- */
.login-page { min-height: 100vh; display: grid; grid-template-columns: 1.15fr 1fr; }
.login-hero { background: linear-gradient(160deg, #1E4426 0%, #2C5A34 55%, #3D7A3A 100%); color: #EAF4E2; padding: 60px 56px;
  display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }
.login-hero::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(168,217,106,.35), transparent 65%); }
.login-hero .brand-line { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.login-hero .logo { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #A8D96A, #5FA842); display: grid; place-items: center; }
.login-hero h1 { font-size: 30px; letter-spacing: 1px; }
.login-hero p.sub { font-size: 15px; color: #BCD8AB; margin: 4px 0 34px; }
.login-hero .feat { display: flex; flex-direction: column; gap: 14px; }
.login-hero .feat .f { display: flex; gap: 12px; align-items: flex-start; max-width: 460px; }
.login-hero .feat .fi { width: 34px; height: 34px; flex: none; border-radius: 10px; background: rgba(255,255,255,.12); display: grid; place-items: center; }
.login-hero .feat b { display: block; font-size: 15px; color: #fff; }
.login-hero .feat span { font-size: 13px; color: #A9C79A; }
.login-hero .chips { margin-top: 38px; display: flex; gap: 10px; flex-wrap: wrap; }
.login-hero .chips span { font-size: 12.5px; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: #D8EACB; }
.login-panel { display: grid; place-items: center; padding: 40px; }
.login-card { width: min(420px, 100%); }
.login-card h2 { font-size: 22px; margin-bottom: 4px; }
.login-card .hint { color: var(--muted); font-size: 13.5px; margin-bottom: 26px; }
.login-row { display: flex; gap: 10px; }
.login-row .input { flex: 1; }
.demo-box { margin-top: 22px; background: var(--warn-bg); border: 1px solid #F0DFAE; border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: #7A5B12; }
.login-note { margin-top: 20px; font-size: 12.5px; color: var(--muted); line-height: 1.8; }
@media (max-width: 900px) { .login-page { grid-template-columns: 1fr; } .login-hero { display: none; } }

/* ---------- 应用框架 ---------- */
.shell { display: grid; grid-template-columns: 218px 1fr; min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, var(--sidebar), var(--sidebar-2)); color: #D5E6C9; padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.sidebar .s-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; }
.sidebar .s-brand .logo { width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(135deg, #A8D96A, #5FA842); display: grid; place-items: center; flex: none; }
.sidebar .s-brand b { color: #fff; font-size: 15.5px; display: block; line-height: 1.25; }
.sidebar .s-brand span { font-size: 11.5px; color: #9DBd8E; color: #9DBD8E; }
.nav-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: #C4D9B6; cursor: pointer; font-size: 14.5px; transition: .14s; text-decoration: none; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.on { background: rgba(168,217,106,.18); color: #fff; font-weight: 600; }
.nav-item.on svg { color: #A8D96A; }
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.nav-item .cnt { margin-left: auto; font-size: 11px; background: var(--orange); color: #fff; border-radius: 999px; padding: 1px 7px; }
.sidebar .s-foot { margin-top: auto; border-top: 1px solid var(--sidebar-line); padding-top: 12px; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 26px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.topbar h1 { font-size: 18px; font-weight: 700; }
.topbar .crumb { color: var(--muted); font-size: 13px; }
.topbar .spacer { flex: 1; }
.user-chip { display: flex; align-items: center; gap: 10px; }
.user-chip .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--cyan)); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.user-chip .u-name { font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.user-chip .u-role { font-size: 11.5px; color: var(--muted); }
.content { padding: 24px 26px 48px; flex: 1; }
.page-h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.page-h h2 { font-size: 20px; }
.page-h .desc { color: var(--muted); font-size: 13px; }
.page-h .grow { flex: 1; }

/* ---------- 工作台 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.stat .v { font-size: 26px; font-weight: 800; color: var(--brand-ink); }
.stat .k { font-size: 12.5px; color: var(--muted); }
.stat .v small { font-size: 13px; font-weight: 500; color: var(--muted); }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.quick .q { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: .15s; box-shadow: var(--shadow); }
.quick .q:hover { transform: translateY(-2px); border-color: var(--brand); }
.quick .q .qi { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 10px; }
.quick .q b { font-size: 15px; display: block; }
.quick .q span { font-size: 12.5px; color: var(--muted); }
.home-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
.rule-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.rule-card h3 { font-size: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.rule-card h3 svg { width: 20px; height: 20px; flex: none; }
.rule-card ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.rule-card li { font-size: 13px; color: #48594C; display: flex; gap: 8px; line-height: 1.6; }
.rule-card li > b { flex: none; white-space: nowrap; }
.rule-card li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); margin-top: 8px; flex: none; }
.mini-plan { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: .12s; }
.mini-plan:hover { border-color: var(--brand); background: #FAFDF8; }
.mini-plan img, .mini-plan .ph { width: 84px; height: 56px; border-radius: 7px; object-fit: cover; background: #EAF0E7; flex: none; display: grid; place-items: center; color: var(--muted); font-size: 11px; }

/* ---------- 素材库 ---------- */
.lib-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.lib-bar .search { position: relative; }
.lib-bar .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }
.lib-bar .search input { padding-left: 32px; width: 240px; }
.lib-sec { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.lib-sec .lbl { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.asset-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: .14s; box-shadow: var(--shadow); }
.asset-card:hover { border-color: var(--brand); }
.asset-card .thumb { height: 150px; flex: 0 0 150px; min-width: 0; overflow: hidden; background: repeating-conic-gradient(#F4F8F2 0 25%, #fff 0 50%) 0 0/16px 16px; display: grid; place-items: center; position: relative; cursor: zoom-in; }
.asset-card .thumb img { display: block; width: 100%; height: 150px; max-width: 100%; max-height: 150px; min-width: 0; min-height: 0; object-fit: contain; }
.asset-card .thumb .flag { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.asset-card .thumb .z-flag { position: absolute; top: 8px; right: 8px; }
.asset-card .body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.asset-card .name { font-weight: 600; font-size: 13.5px; line-height: 1.4; }
.asset-card .meta { font-size: 12px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.asset-card .ops { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; }
.asset-card .note { font-size: 11.5px; color: var(--muted); background: #F6F9F4; border-radius: 7px; padding: 5px 8px; line-height: 1.5; max-height: 52px; overflow: hidden; }
.review-box { border-top: 1px dashed var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.review-box .rb-row { display: flex; gap: 6px; }
.up-zone { border: 2px dashed #BCD5AC; border-radius: 12px; padding: 26px; text-align: center; cursor: pointer; transition: .15s; background: #FAFDF8; }
.up-zone:hover, .up-zone.drag { border-color: var(--brand); background: #F0F7EB; }
.up-zone svg { width: 30px; height: 30px; color: var(--brand-deep); margin-bottom: 6px; }
.up-zone b { display: block; font-size: 14.5px; }
.up-zone span { font-size: 12.5px; color: var(--muted); }
.up-preview { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.up-preview img { max-height: 120px; max-width: 160px; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.check-line { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: #58685C; background: var(--warn-bg); border-radius: 9px; padding: 9px 11px; margin-top: 8px; }
.check-line input { margin-top: 3px; }

/* ---------- 画布编辑器 ---------- */
.editor { display: grid; grid-template-columns: 250px minmax(0, 1fr) 272px; grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 63px); margin: -24px -26px -48px; }
.ed-toolbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ed-toolbar .title-input { font-weight: 700; font-size: 15px; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 5px 9px; width: 160px; }
.save-status { color:#607264; font-size:11px; }
.starter-banner { display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#eaf4e4;border:1px solid #c9dfbe;border-radius:14px;padding:20px;margin-bottom:20px; }
.starter-banner>div { flex:1;min-width:220px; }.starter-banner h2 { font-size:22px;margin:0 0 6px; }.starter-banner p { font-size:13px;color:#5f745e;margin:0;line-height:1.7; }
.starter-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.starter-card { border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;align-items:flex-start; }.starter-card h3 { margin:0 0 6px;font-size:16px; }.starter-card p { margin:0 0 12px;font-size:13px;line-height:1.7;flex:1; }.starter-card button { margin-top:auto; }
.starter-modal .modal { width:min(920px,100%); }
.starter-visual { width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#f1f5ee;position:relative;display:grid;place-items:center;margin-bottom:12px; }
.starter-visual canvas,#example-full { width:100%;height:auto;display:block; }
.example-state { position:absolute;bottom:0;left:0;right:0;padding:4px 8px;font-size:11px;background:rgba(255,255,255,.88);color:#3d5941; }
.example-wait { text-align:center;color:var(--muted);font-size:13px;line-height:1.7; }
.starter-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto; }
.job-catalog-modal .modal,.fusion-modal .modal { width:min(980px,100%);display:flex;flex-direction:column;overflow:hidden; }
.job-catalog-modal .m-head,.job-catalog-modal .m-foot { flex-shrink:0; }
.job-catalog-modal .m-body { overflow:auto;min-height:0; }
.job-catalog-modal .m-foot { border-top:1px solid var(--line);padding-top:14px;background:#fff;flex-wrap:wrap; }
.fusion-modal .m-head,.fusion-modal .m-foot { flex-shrink:0; }
.fusion-modal .m-body { overflow:auto;min-height:0; }
.fusion-modal .m-foot { border-top:1px solid var(--line);padding-top:14px;background:#fff;flex-wrap:wrap; }
.fusion-compare { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px; }
.fusion-compare img { display:block;width:100%;height:300px;object-fit:contain;background:#eef3ed;margin:8px 0;border-radius:8px; }
.fusion-compare>div {min-width:0}
.fusion-compare>div>b {display:block;min-height:2.9em;line-height:1.45}
.image-compare-controls {display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.image-compare-controls[hidden],.image-compare-controls label[hidden] {display:none}
.image-compare-controls button[aria-pressed="true"] {background:var(--ok-bg);border-color:var(--brand-deep)}
.image-compare-controls label {display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex-basis:100%;font-size:13px;color:var(--brand-ink)}
.image-compare-controls input[type="range"] {flex:1;min-width:120px;max-width:320px;accent-color:var(--brand-deep)}
.image-compare-controls output {font-variant-numeric:tabular-nums}
.fusion-compare[data-view="wipe"] {display:block;position:relative;height:clamp(220px,48vw,460px);overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#EEF3ED}
.fusion-compare[data-view="wipe"]>div {position:absolute;inset:0}
.fusion-compare[data-view="wipe"]>div>b {position:absolute;width:1px;height:1px;min-height:0;overflow:hidden;clip-path:inset(50%)}
.fusion-compare[data-view="wipe"] img {width:100%;height:100%;object-fit:contain;margin:0;border-radius:0;background:none}
.fusion-compare[data-view="wipe"]>div:last-child {clip-path:inset(0 0 0 var(--compare-original,50%));background:#EEF3ED}
.fusion-compare[data-view="wipe"]::after {content:"";position:absolute;top:0;bottom:0;left:var(--compare-original,50%);width:2px;background:var(--brand-deep);pointer-events:none}
.fusion-compare[data-view="wipe"].compare-endpoint::after {display:none}
.fusion-history { margin-top:16px; }.fusion-history button { margin:8px 4px 0 0; }
@media(max-width:640px){.fusion-compare{grid-template-columns:1fr}.fusion-compare img{height:220px}}
.job-catalog-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0; }
.job-catalog-card { border:1px solid var(--line);padding:10px;border-radius:10px;display:flex;flex-direction:column;gap:8px;min-width:0; }
.job-catalog-image { width:100%;height:210px;border:0;border-radius:8px;cursor:pointer;overflow:hidden; }
.job-catalog-image img { width:100%;height:100%;object-fit:contain; }
.job-catalog-card p { flex:1; }
.job-compare { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.job-compare img { width:100%;height:360px;object-fit:contain;display:block; }
@media(max-width:650px){.job-catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.job-catalog-image{height:170px;}.job-compare img{height:230px;}}
.kimi-history { border-top:1px solid var(--line);padding-top:14px;margin-top:16px; }
.kimi-history summary { cursor:pointer; }.kimi-record { margin:10px 8px 0 0; }
.draft-row { display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:12px 0;flex-wrap:wrap; }.draft-row>div { flex:1;min-width:150px; }.draft-row p { margin:4px 0 0; }
.home-rules summary { cursor:pointer;font-weight:700;display:flex;align-items:center;gap:8px; }.home-rules summary svg { width:18px;height:18px; }.home-rules ul { margin-top:14px; }
.help-steps { padding-left:24px;line-height:1.9; }.help-steps li { margin-bottom:14px; }
.ed-guide { width:100%;display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:12px;padding-top:5px;color:#667969; }.ed-guide .done { color:#358144;font-weight:700; }.ed-guide small { margin-left:auto; }
.delivery-tools { position:relative; }.delivery-tools summary { font-size:12px;cursor:pointer;padding:7px 10px;border:1px solid var(--line);border-radius:8px;list-style:none; }.delivery-tools>div { position:absolute;right:0;top:38px;z-index:100;width:340px;display:flex;flex-wrap:wrap;gap:8px;background:#fff;box-shadow:0 6px 24px #1a302322;border:1px solid var(--line);border-radius:12px;padding:12px; }.delivery-tools summary::after { content:' ▾'; }
@media(max-width:1100px) { .editor { grid-template-columns:210px minmax(0,1fr) 240px; }.starter-banner { padding:14px; }.ed-toolbar .title-input { width:130px; } }
@media(max-width:700px) { .starter-grid { grid-template-columns:1fr; }.delivery-tools>div { width:280px;right:0; }.ed-guide { gap:8px; } }
.library-note { padding:12px 16px; border:1px solid #cfdfcd; background:#f1f7ee; border-radius:10px; margin-bottom:14px; font-size:13px; line-height:1.7; color:#385942; }
.usage-tabs { width:100%; flex-wrap:wrap; }
.aspect-option { display:flex; gap:6px; font-size:11px; color:#607264; align-items:center; margin:8px 0; }
.asset-compare { display:flex; gap:12px; }
.asset-compare figure { flex:1; min-width:0; margin:0; }
.asset-compare figcaption { font-weight:600; font-size:13px; margin-bottom:8px; }
.asset-preview-check { background:conic-gradient(#e1e7e0 25%,#fff 0 50%,#e1e7e0 0 75%,#fff 0) 0 0/20px 20px; border:1px solid #ccd6c9; border-radius:8px; overflow:hidden; }
.asset-preview-check img { display:block; object-fit:contain; width:100%; max-height:55vh; }
.asset-preview-modal .modal { display:flex; flex-direction:column; overflow:hidden; }
.asset-preview-modal .m-head, .asset-preview-modal .m-foot { flex-shrink:0; }
.asset-preview-modal .m-body { overflow:auto; min-height:0; }
.asset-preview-modal .m-foot { align-items:center; flex-wrap:wrap; padding-top:14px; border-top:1px solid var(--line); background:#fff; }
.preview-grade { display:flex; align-items:center; gap:8px; margin-right:auto; font-size:12.5px; }
.preview-grade select { padding:6px 8px; }
.small { font-size:12px; line-height:1.6; }
.muted { color:var(--muted); }
.ed-item .t span { white-space:normal; }
.ed-item .badge { font-size:10px; margin-top:3px; }
.asset-card .thumb, .up-preview img { background-color:#fff; background-image:conic-gradient(#e8ede7 25%,transparent 0 50%,#e8ede7 0 75%,transparent 0); background-size:16px 16px; }
.ed-toolbar .title-input:hover, .ed-toolbar .title-input:focus { border-color: var(--line); background: #fff; outline: none; }
.ed-toolbar .spacer { flex: 1; }
.grade-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 5px 13px; cursor: default; }
.grade-chip.standard { background: var(--ok-bg); color: var(--ok); }
.grade-chip.reference { background: var(--ref-bg); color: var(--ref); }
.grade-chip.unverified { background: var(--danger-bg); color: var(--danger); animation: none; }
.ed-panel { background: #fff; border-right: 1px solid var(--line); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.ed-panel.right { border-right: none; border-left: 1px solid var(--line); }
.ed-tabs { display: flex; gap: 4px; background: #EFF4EC; padding: 3px; border-radius: 9px; }
.ed-tabs button { flex: 1; border: none; background: transparent; padding: 6px 0; border-radius: 7px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.ed-tabs button.on { background: #fff; color: var(--brand-ink); font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.ed-search { position: relative; }
.ed-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; color: var(--muted); }
.ed-search input { width: 100%; padding: 7px 10px 7px 28px; font-size: 13px; border: 1px solid var(--line); border-radius: 9px; outline: none; }
.ed-list { display: flex; flex-direction: column; gap: 7px; }
.ed-item { display: flex; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; cursor: pointer; transition: .12s; background: #fff; }
.ed-item:hover { border-color: var(--brand); background: #FAFDF8; }
.ed-item.disabled { opacity: .55; cursor: not-allowed; }
.ed-item img { width: 44px; height: 44px; object-fit: contain; border-radius: 7px; background: #F1F6EE; flex: none; }
.ed-item .t { flex: 1; min-width: 0; }
.ed-item .t b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-item .t span { font-size: 11px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-item .add-ic { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-ink); color: #fff; display: grid; place-items: center; font-size: 15px; flex: none; }
.ed-group-title { font-size: 12px; color: var(--muted); font-weight: 700; margin: 4px 2px -2px; display: flex; align-items: center; gap: 6px; }
.ed-group-title .line { flex: 1; height: 1px; background: var(--line); }
.stage-wrap { position: relative; min-width: 0; min-height: 0; overflow: auto; background: #26332B radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0) 0 0/22px 22px; }
.stage-outer { display: grid; place-items: center; min-width: 100%; min-height: 100%; }
.stage-sizer { position: relative; flex: none; }
.stage { position: absolute; left: 34px; top: 34px; transform-origin: top left; box-shadow: 0 6px 40px rgba(0,0,0,.45); }
.stage .cv-img { position: absolute; user-select: none; }
.stage .cv-img img { width: 100%; height: 100%; pointer-events: none; }
.stage .cv-img.image-error { background: #FDEEEC; outline: 2px dashed #D95040; }
.stage .cv-img.sel { outline: 2px solid var(--orange); outline-offset: 0; }
.stage .cv-img.locked { outline: 1.5px dashed #8FA68F; pointer-events: none; }
.stage .cv-img .tag-char { position: absolute; top: -20px; left: 0; font-size: 11px; background: var(--brand-ink); color: #fff; padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.handle-box { position: absolute; pointer-events: none; outline: 1.5px solid var(--orange); outline-offset: 0; }
.handle { position: absolute; width: 11px; height: 11px; background: #fff; border: 1.5px solid var(--orange); border-radius: 3px; pointer-events: auto; }
.handle.rot { border-radius: 50%; top: -26px; left: 50%; transform: translateX(-50%); border-color: var(--blue); background: var(--blue); cursor: grab; }
.handle.rot::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 14px; background: var(--blue); transform: translateX(-50%); }
.handle.nw { left: -6px; top: -6px; cursor: nwse-resize; } .handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; } .handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.guide { position: absolute; background: #FF7A59; z-index: 40; pointer-events: none; }
.guide.v { width: 1px; top: 0; bottom: 0; } .guide.h { height: 1px; left: 0; right: 0; }
.stage-empty { position: absolute; inset: 0; display: grid; place-items: center; color: #67796B; font-size: 13.5px; pointer-events: none; text-align: center; }
.zoom-bar { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; background: rgba(20,30,22,.85); border-radius: 10px; padding: 4px; z-index: 30; }
.zoom-bar button { border: none; background: transparent; color: #D8E6CE; width: 32px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.zoom-bar button:hover { background: rgba(255,255,255,.14); }
.zoom-bar .zval { color: #D8E6CE; font-size: 12px; width: 48px; display: grid; place-items: center; }
.prop-sec { border-bottom: 1px solid var(--line); padding-bottom: 11px; margin-bottom: 11px; }
.prop-sec:last-child { border-bottom: none; }
.prop-sec h4 { font-size: 12.5px; color: var(--brand-ink); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.prop-row { display: flex; gap: 7px; align-items: center; margin-bottom: 7px; }
.prop-row .lbl { width: 52px; font-size: 12px; color: var(--muted); flex: none; }
.prop-row .input { flex: 1; min-width: 0; padding: 5px 9px; font-size: 12.5px; }
.prop-row select.input { padding: 5px 7px; }
.warn-box { font-size: 12px; border-radius: 9px; padding: 8px 10px; line-height: 1.55; margin-top: 6px; }
.warn-box.err { background: var(--danger-bg); color: #8C2F23; }
.warn-box.unv { background: var(--warn-bg); color: #7A5B12; }
.warn-box.info { background: #EFF5EC; color: #44603C; }
.layer-list { display: flex; flex-direction: column; gap: 4px; }
.layer-row { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font-size: 12.5px; cursor: pointer; }
.layer-row.on { border-color: var(--orange); background: #FFF8EE; }
.layer-row img { width: 26px; height: 26px; object-fit: contain; border-radius: 4px; background: #F1F6EE; }
.layer-row .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer-row .ic { border: none; background: transparent; cursor: pointer; color: var(--muted); width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; font-size: 12px; }
.layer-row .ic:hover { background: #EFF4EC; color: var(--ink); }
.no-sel { color: var(--muted); font-size: 12.5px; text-align: center; padding: 18px 6px; }

/* ---------- 方案库 ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.plan-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.plan-card .cover { height: 148px; background: repeating-conic-gradient(#F4F8F2 0 25%, #fff 0 50%) 0 0/16px 16px; position: relative; display: grid; place-items: center; cursor: pointer; }
.plan-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.plan-card .cover .g-flag { position: absolute; top: 10px; left: 10px; }
.plan-card .cover .v-flag { position: absolute; top: 10px; right: 10px; }
.plan-card .p-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.plan-card b { font-size: 14.5px; line-height: 1.45; }
.plan-card .p-meta { font-size: 12px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.plan-card .p-ops { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.p-tabs { display: flex; gap: 8px; margin-bottom: 16px; }

/* ---------- AI / 管理后台 ---------- */
.ai-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ai-form .full { grid-column: 1 / -1; }
.prompt-box { background: #202B23; color: #CFE6BC; border-radius: 12px; padding: 14px 16px; font-size: 12.5px; line-height: 1.8; white-space: pre-wrap; font-family: inherit; max-height: 320px; overflow: auto; }
.ai-steps { display: flex; flex-direction: column; gap: 0; margin: 14px 0; }
.ai-steps .st { display: flex; gap: 12px; }
.ai-steps .st .no { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-ink); color: #fff; display: grid; place-items: center; font-size: 12.5px; flex: none; }
.ai-steps .st .tx { font-size: 13px; padding-bottom: 14px; }
.ai-steps .st .tx b { display: block; }
.ai-steps .st .tx span { color: var(--muted); font-size: 12.5px; }
.req-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; font-size: 13px; flex-wrap: wrap; }
.req-row .grow { flex: 1; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.tbl th { color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
table.tbl tr:hover td { background: #FAFDF8; }
.admin-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .two-col, .home-grid, .ai-form { grid-template-columns: 1fr; } .stats, .quick { grid-template-columns: repeat(2, 1fr); } }

/* 合规说明弹层 / 导出 */
.stamp-note { display: flex; gap: 10px; align-items: flex-start; background: var(--danger-bg); border-radius: 10px; padding: 12px; font-size: 12.5px; color: #8C2F23; margin-top: 10px; line-height: 1.6; }
.fileio-help { position: fixed; inset: 0; z-index: 500; background: #1E4426; color: #E7F2DC; display: grid; place-items: center; padding: 30px; text-align: center; }
.fileio-help .code { background: rgba(0,0,0,.35); border-radius: 10px; padding: 12px 18px; font-family: ui-monospace, Menlo, monospace; font-size: 15px; margin: 14px 0; color: #A8D96A; }
.review-batch-bar{position:sticky;top:0;z-index:15;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px;margin-bottom:14px;background:var(--paper,#fff);border:1px solid var(--line,#d9e4d4);border-radius:12px;box-shadow:0 2px 8px #14331c12}
[hidden]{display:none!important}
.creative-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.creative-card{padding:18px}.creative-card h3{margin-bottom:8px}
.creative-reference-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:240px;overflow:auto;border:1px solid var(--line);padding:12px}
.creative-reference-list label{display:flex;align-items:baseline;gap:6px}
.creative-result{display:grid;grid-template-columns:minmax(200px,45%) 1fr;gap:18px;margin-top:16px}
.creative-result img{width:100%;max-height:480px;object-fit:contain;background:repeating-conic-gradient(#e5eae3 0% 25%,#fff 0% 50%) 50% /20px 20px}
.creative-history{padding:18px;margin-top:16px}
@media(max-width:760px){.creative-reference-list,.creative-result{grid-template-columns:1fr}}
.creative-card,.creative-history,.creative-result>div,.creative-card .ai-form>div{min-width:0;overflow-wrap:anywhere}
.creative-card .input{width:100%;max-width:100%;min-width:0}.creative-reference-list{min-width:0}
.creative-reference-list label,.creative-reference-list span{min-width:0;overflow-wrap:anywhere}
.creative-result img{max-width:100%;min-width:0}.creative-history .btn{white-space:normal;text-align:left}
.creative-result{grid-template-columns:minmax(0,45%) minmax(0,1fr)}
.asset-preview-modal dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 12px}.asset-preview-modal dd{margin:0;overflow-wrap:anywhere}
@media(max-width:760px){.creative-result{grid-template-columns:1fr}}
@media(max-width:480px){
  .shell{grid-template-columns:68px minmax(0,1fr)}
  .sidebar{padding:14px 6px}.sidebar .s-brand{padding:6px 6px 14px;gap:0}
  .sidebar .s-brand .logo{width:32px;height:32px}.sidebar .s-brand>div:last-child{display:none}
  .sidebar .nav-item{font-size:0;justify-content:center;padding:12px 8px;position:relative;gap:0}
  .sidebar .nav-label{display:none}
  .sidebar .nav-item svg{width:22px;height:22px}.sidebar .nav-item .cnt{position:absolute;right:0;top:3px;font-size:10px;margin:0}
  .content{padding:16px 12px 32px}
  .main,.content,.topbar{min-width:0}
  .topbar{flex-wrap:wrap;height:auto;min-height:72px;gap:6px;padding:12px}
  .topbar .crumb{display:none}.topbar .spacer{display:none}
  .topbar .user-chip{min-width:0;max-width:100%;margin-left:auto}
  .user-chip>div:last-child{min-width:0}.user-chip .u-role{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .creative-tabs .btn,.creative-card .btn,.creative-result .btn,.creative-history .btn{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;margin-bottom:6px}
  .creative-tabs .btn{flex:1 1 100%;justify-content:center}
  .creative-card,.creative-history{padding:12px}
}