:root {
  color-scheme: light;
  --ink: #293b3c;
  --muted: #748484;
  --line: #dce6e3;
  --paper: #ffffff;
  --field: #f4f8f6;
  --green: #478a65;
  --green-dark: #326e51;
  --blue: #4d94a8;
  --coral: #d2785d;
  --purple: #514568;
  --shadow: 0 8px 28px rgba(44, 70, 67, .11);
  font-family: "Aptos", "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; color: var(--ink); background: #eef5f4; }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { width: 100%; height: 100%; display: flex; flex-direction: column; }
.topbar { height: 72px; flex: 0 0 72px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 20px 0 18px; background: #fff; border-bottom: 1px solid #dce6e3; z-index: 10; }
.brand-block { min-width: 238px; display: flex; align-items: center; gap: 11px; }
.logo-slot { width: 45px; height: 45px; flex: 0 0 45px; border: 1px dashed #a9b9b0; border-radius: 7px; background: #f3f8f4; display: grid; place-items: center; padding: 0; cursor: pointer; overflow: hidden; }
.logo-placeholder { display: flex; flex-direction: column; align-items: center; line-height: 1.05; color: #638274; }
.logo-placeholder b { font-size: 12px; font-weight: 700; }
.logo-placeholder small { font-size: 8px; margin-top: 3px; color: #8a9b92; }
.logo-slot img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.brand-copy .eyebrow { color: #668174; font-size: 11px; line-height: 1.2; }
.brand-title-row { display: flex; align-items: center; gap: 9px; }
.brand-copy h1 { margin: 2px 0 0; font-size: 17px; line-height: 1.2; font-weight: 700; letter-spacing: 0; }
.author-link { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border: 1px solid #cfe0d6; border-radius: 10px; background: #f2f8f4; color: #3d6f57; font-size: 11px; line-height: 1; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.author-link:hover { background: #e4f1e8; border-color: #b9d4c3; color: #2f6d4d; }
.author-link:focus-visible { outline: 2px solid #7fb895; outline-offset: 1px; }
.toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; }
.tool-btn, .icon-btn { height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 6px; padding: 0 10px; color: #4b5c59; background: transparent; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.tool-btn { font-size: 12px; }
.tool-btn:hover, .icon-btn:hover { background: #f0f5f2; border-color: #dce7e0; color: #2f6d4d; }
.tool-icon { color: #6c8a7b; font-size: 16px; line-height: 1; }
.toggle-btn.is-active { background: #eaf4ed; border-color: #cfe2d4; color: #366c4b; }
.toggle-btn.is-active .tool-icon { color: #3a8055; }
.toolbar-divider { width: 1px; height: 23px; margin: 0 3px; background: #e2e9e6; }
.icon-btn { width: 34px; padding: 0; font-size: 22px; line-height: 1; }
.primary-btn { background: #43875f; color: #fff; border-color: #43875f; }
.primary-btn .tool-icon { color: #e5f3e8; }
.primary-btn:hover { background: #34744f; color: #fff; border-color: #34744f; }
.clear-btn { color: #a45b4c; font-size: 18px; }
.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 244px minmax(0, 1fr); position: relative; overflow: hidden; }
.palette { position: relative; z-index: 5; display: flex; flex-direction: column; min-width: 0; background: #fbfcfa; border-right: 1px solid #dce6e3; transition: width .2s; }
.palette-head { flex: 0 0 58px; padding: 0 13px 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8eeeb; }
.palette-title { display: flex; align-items: center; gap: 9px; }
.title-mark { width: 4px; height: 19px; border-radius: 4px; background: #68a17a; }
.palette-title h2 { margin: 0; font-size: 14px; font-weight: 700; }
.collapse-btn, .expand-tab, .close-btn { display: grid; place-items: center; border: 1px solid #e0e8e4; border-radius: 5px; color: #70817a; background: #fff; cursor: pointer; }
.collapse-btn { width: 27px; height: 27px; font-size: 21px; line-height: 1; }
.collapse-btn:hover, .expand-tab:hover, .close-btn:hover { color: #356f4f; background: #eef5ef; }
.palette-body { min-height: 0; overflow-y: auto; padding: 12px 12px 18px; }
.palette-note { margin: 0 0 14px 2px; font-size: 11px; color: #81908a; }
.group-title { margin: 15px 2px 7px; color: #788982; font-size: 10px; font-weight: 700; letter-spacing: 0; }
.asset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.asset-card { min-width: 0; height: 91px; padding: 5px 6px 6px; border: 1px solid #e0e9e4; border-radius: 6px; background: #fff; cursor: grab; text-align: left; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.asset-card:hover { border-color: #91b69c; background: #f7fbf7; box-shadow: 0 3px 10px rgba(67, 113, 82, .1); transform: translateY(-1px); }
.asset-card:active { cursor: grabbing; }
.asset-preview { width: 100%; height: 55px; display: block; object-fit: contain; }
.asset-name { display: block; padding-left: 2px; color: #485a52; font-size: 11px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-footer { display: flex; gap: 8px; margin: 17px 1px 0; padding: 10px; border-radius: 6px; background: #eff5ef; color: #637970; }
.palette-footer p { margin: 0; font-size: 10px; line-height: 1.55; }
.tip-glyph { color: #bf8e44; font-size: 16px; }
.expand-tab { display: none; position: absolute; top: 50%; right: -1px; transform: translateY(-50%); width: 24px; height: 45px; border-radius: 0 5px 5px 0; font-size: 20px; }
.palette.is-collapsed { width: 48px; }
.palette.is-collapsed .palette-head { padding: 0; justify-content: center; }
.palette.is-collapsed .palette-title, .palette.is-collapsed .palette-body { display: none; }
.palette.is-collapsed .collapse-btn { display: none; }
.palette.is-collapsed .expand-tab { display: grid; }
.stage-wrap { min-width: 0; min-height: 0; position: relative; overflow: hidden; background-color: #cbd4b4; }
#stageContainer { position: absolute; inset: 0; z-index: 0; background: #cbd4b4; }
#stageContainer canvas { display: block; }
.stage-topline { position: absolute; z-index: 3; top: 13px; left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.canvas-caption, .zoom-controls { pointer-events: auto; height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid rgba(214, 228, 222, .95); border-radius: 6px; background: rgba(255,255,255,.92); box-shadow: 0 2px 7px rgba(47,79,72,.06); color: #5d7168; font-size: 10px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #64a779; box-shadow: 0 0 0 3px #e4f2e7; }
.caption-sep { color: #b2c0ba; }
.zoom-controls { gap: 6px; padding: 0 5px; }
.zoom-btn { width: 24px; height: 23px; border: 0; border-radius: 4px; background: transparent; color: #4e7162; font-size: 18px; line-height: 1; cursor: pointer; }
.zoom-btn:hover { background: #edf5ef; }
#zoomReadout { min-width: 37px; text-align: center; font-variant-numeric: tabular-nums; }
.labels-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.map-label { position: absolute; transform: translate(-50%, -100%); max-width: 180px; padding: 4px 8px 5px; border: 1px solid rgba(126,123,105,.58); border-radius: 3px; background: rgba(247,245,234,.96); box-shadow: 0 2px 5px rgba(55,62,51,.12); color: #4b5146; font-family: Georgia, \"Microsoft YaHei\", serif; font-size: 12px; line-height: 1.1; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: pointer; pointer-events: auto; user-select: none; }
.map-label:after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid rgba(126,123,105,.7); }
.map-label.is-selected { background: #e4ead9; border-color: #82927b; color: #3f5140; box-shadow: 0 0 0 1px #f8f7ee, 0 2px 5px rgba(35,58,42,.2); }
.map-label.is-selected:after { border-top-color: #82927b; }
.compass { position: absolute; z-index: 4; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid #d9e3da; border-radius: 7px; background: rgba(255,255,255,.94); box-shadow: 0 3px 12px rgba(45,71,63,.1); color: #65776c; font-size: 10px; pointer-events: none; }
.compass svg { width: 46px; height: 46px; overflow: visible; }
.compass text { font-family: "Microsoft YaHei", sans-serif; font-size: 7px; font-weight: 700; fill: #52645a; }
.compass .compass-s { fill: #b55343; font-size: 8px; }
.compass .compass-n { fill: #586861; }
.compass .compass-e, .compass .compass-w { font-size: 6px; }
.canvas-status { position: absolute; z-index: 4; right: 18px; bottom: 18px; display: flex; gap: 7px; align-items: center; padding: 7px 10px; border: 1px solid #d9e3da; border-radius: 6px; background: rgba(255,255,255,.9); color: #708179; font-size: 10px; pointer-events: none; }
.status-sep { color: #b1bdb7; }
.inspector { position: absolute; z-index: 6; top: 59px; right: 17px; width: 266px; padding: 15px; border: 1px solid #dce7e1; border-radius: 7px; background: rgba(255,255,255,.97); box-shadow: var(--shadow); }
.inspector[hidden] { display: none; }
.inspector-head { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 0 15px; }
.inspector-kicker { color: #84928c; font-size: 9px; }
.inspector-head h2 { margin: 3px 0 0; color: #344c40; font-size: 16px; }
.close-btn { width: 26px; height: 26px; font-size: 18px; }
.field-label { display: block; color: #64766d; font-size: 10px; font-weight: 600; }
.text-input { width: 100%; height: 35px; margin: 6px 0 10px; padding: 0 9px; border: 1px solid #dce6e0; border-radius: 5px; outline: none; color: #344840; background: #fbfdfb; font-size: 12px; }
.text-input:focus, .field-grid input:focus { border-color: #79a987; box-shadow: 0 0 0 2px rgba(98, 155, 112, .12); }
.text-input::placeholder { color: #a2aea8; }
.check-row { display: flex; align-items: center; gap: 8px; color: #61736a; font-size: 11px; cursor: pointer; }
.check-row input { width: 14px; height: 14px; margin: 0; accent-color: #4d8d62; }
.field-divider { height: 1px; margin: 14px 0; background: #e9efeb; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.field-grid .field-label { position: relative; }
.select-input { display:block; width:100%; height:34px; margin:6px 0 9px; padding:0 8px; border:1px solid #dce6e0; border-radius:4px; outline:none; color:#455249; background:#fbfcf8; font-size:11px; }
.select-input:focus { border-color:#8fa68a; box-shadow:0 0 0 2px rgba(128,151,113,.12); }
.image-replace-btn { width:100%; margin-bottom:8px; }
.tint-field { display:grid; grid-template-columns:1fr 42px; align-items:center; gap:8px; margin:7px 0 4px; }
.tint-field input { width:42px; height:27px; padding:2px; border:1px solid #dce6e0; border-radius:4px; background:#fff; }
.tint-field[hidden] { display:none; }
.draw-banner { position:absolute; z-index:7; top:56px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:10px; max-width:calc(100% - 24px); padding:7px 9px 7px 11px; border:1px solid #c8d4c9; border-radius:4px; background:rgba(249,248,240,.97); box-shadow:0 3px 10px rgba(48,64,54,.12); color:#4d5a4f; font-size:11px; white-space:nowrap; }
.draw-banner[hidden] { display:none; }
.draw-banner button { border:0; border-left:1px solid #e0e3d8; padding:0 0 0 9px; background:transparent; color:#647267; font-size:10px; cursor:pointer; }
.draw-banner kbd { font:inherit; color:#8a9286; }
.draw-live-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#9a765b; }
.draw-mode #stageContainer { cursor:crosshair; }
.draw-mode .labels-overlay { pointer-events:none; }
.asset-card.is-drawing { border-color:#8e9e78; background:#f1f2e8; box-shadow:0 0 0 1px rgba(142,158,120,.18); }
.field-grid .field-label > span { float: right; color: #a0aaa5; font-size: 9px; font-weight: 400; }
.field-grid input { display: block; width: 100%; height: 32px; margin-top: 5px; padding: 0 7px; border: 1px solid #dfe8e3; border-radius: 5px; outline: none; color: #42574c; background: #fbfdfb; font-size: 11px; }
.rotation-field { grid-column: 1 / -1; }
.inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.action-btn { height: 31px; border: 1px solid #dfe8e3; border-radius: 5px; background: #fff; color: #61736a; font-size: 10px; cursor: pointer; }
.action-btn span { margin-right: 4px; color: #638775; font-size: 13px; }
.action-btn:hover { border-color: #a8c8ae; background: #f4f9f4; }
.danger-action { color: #a65f52; }
.danger-action span { color: #b96050; }
.inspector-foot { margin-top: 13px; color: #95a19b; font-size: 9px; line-height: 1.45; }
.toast { position: absolute; z-index: 12; left: 50%; bottom: 22px; transform: translate(-50%, 12px); padding: 9px 15px; border: 1px solid #d8e6dc; border-radius: 6px; background: #fff; box-shadow: 0 5px 16px rgba(42,71,57,.16); color: #456651; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1120px) {
  .topbar { padding-right: 10px; gap: 8px; }
  .brand-block { min-width: 205px; }
  .toolbar { gap: 3px; }
  .tool-btn { padding: 0 7px; }
  .tool-btn span:not(.tool-icon) { font-size: 11px; }
  .workspace { grid-template-columns: 212px minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .topbar { height: auto; min-height: 65px; flex: 0 0 auto; flex-wrap: wrap; padding: 8px 10px; }
  .brand-block { min-width: auto; }
  .brand-copy h1 { font-size: 15px; }
  .author-link { height: 18px; padding: 0 6px; font-size: 10px; }
  .logo-slot { width: 39px; height: 39px; flex-basis: 39px; }
  .toolbar { flex: 1 1 100%; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .tool-btn, .icon-btn { flex: 0 0 auto; height: 32px; }
  .workspace { grid-template-columns: 190px minmax(0,1fr); }
}
@media (max-width: 620px) {
  .workspace { grid-template-columns: 44px minmax(0, 1fr); }
  .palette { overflow: visible; }
  .palette-head { padding: 0; justify-content: center; }
  .palette-title { display: none; }
  .collapse-btn { display: none; }
  .expand-tab { display: grid; right: -1px; }
  .palette-body { display: none; }
  .palette.is-open { position: absolute; inset: 0 auto 0 0; width: min(260px, 84vw); z-index: 8; box-shadow: 8px 0 24px rgba(38,59,53,.15); }
  .palette.is-open .palette-head { padding: 0 13px 0 18px; justify-content: space-between; }
  .palette.is-open .palette-title, .palette.is-open .palette-body { display: flex; }
  .palette.is-open .palette-title { align-items: center; }
  .palette.is-open .palette-title h2 { display: block; }
  .palette.is-open .collapse-btn { display: grid; }
  .palette.is-open .expand-tab { display: none; }
  .palette.is-open .palette-body { display: block; }
  .inspector { top: auto; right: 8px; bottom: 76px; width: min(266px, calc(100vw - 64px)); max-height: 70%; overflow-y: auto; }
  .compass { left: 8px; bottom: 8px; padding: 4px 7px 4px 4px; gap: 4px; }
  .compass svg { width: 38px; height: 38px; }
  .canvas-status { right: 8px; bottom: 8px; }
  .stage-topline { left: 8px; right: 8px; top: 8px; }
  .canvas-caption { padding: 0 7px; }
  .draw-banner { top: 48px; gap: 6px; padding: 6px 7px; font-size: 10px; }
  .draw-banner button { font-size: 9px; }
}