:root {
  color-scheme: light;
  --ink:#172033;
  --muted:#6c778c;
  --subtle:#8e98aa;
  --line:#dfe4eb;
  --line-strong:#ccd3de;
  --wine:#421a26;
  --wine-hover:#582535;
  --wine-soft:#f6eef1;
  --bg:#f4f5f7;
  --panel:#fff;
  --ok:#17633f;
  --ok-bg:#eaf7f0;
  --bad:#a12828;
  --bad-bg:#fff0f0;
  --warn:#815900;
  --warn-bg:#fff6df;
  --info:#31567d;
  --info-bg:#edf5ff;
  --shadow:0 10px 30px rgba(23,32,51,.055);
  --radius:16px;
}

* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:14px/1.45 Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select,textarea { font:inherit; }
button { color:inherit; }
[hidden] { display:none!important; }

.app-frame { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.app-sidebar { position:sticky; top:0; height:100vh; padding:18px 14px; display:flex; flex-direction:column; background:#fff; border-right:1px solid var(--line); z-index:20; }
.brand { display:flex; align-items:center; gap:11px; padding:4px 8px 18px; }
.brand__mark { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--wine); color:#fff; font-family:Georgia,serif; font-size:21px; font-weight:800; }
.brand strong,.brand span { display:block; }
.brand strong { font-size:15px; }
.brand span { color:var(--muted); font-size:11px; }
.sidebar-state { display:flex; align-items:flex-start; gap:9px; margin:0 5px 13px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#fafbfc; }
.state-dot { width:9px; height:9px; margin-top:5px; flex:0 0 auto; border-radius:50%; background:#aab2bf; box-shadow:0 0 0 4px rgba(170,178,191,.13); }
.sidebar-state.is-ready .state-dot { background:#2d9b65; box-shadow:0 0 0 4px rgba(45,155,101,.13); }
.sidebar-state.is-warning .state-dot { background:#d39a20; box-shadow:0 0 0 4px rgba(211,154,32,.14); }
.sidebar-state.is-error .state-dot { background:#c94a4a; box-shadow:0 0 0 4px rgba(201,74,74,.13); }
.sidebar-state strong,.sidebar-state small { display:block; }
.sidebar-state strong { font-size:11px; }
.sidebar-state small { margin-top:2px; color:var(--muted); font-size:9px; line-height:1.35; }
.app-nav { display:flex; flex-direction:column; gap:2px; overflow:auto; padding-right:2px; }
.nav-item { width:100%; min-height:39px; padding:0 10px; display:flex; align-items:center; gap:10px; border:0; border-radius:9px; background:transparent; color:#536075; text-align:left; font-size:12px; font-weight:650; cursor:pointer; }
.nav-item span { width:18px; color:#8b95a7; font-size:15px; text-align:center; }
.nav-item:hover { background:#f4f5f7; color:var(--ink); }
.nav-item.is-active { background:var(--wine-soft); color:var(--wine); }
.nav-item.is-active span { color:var(--wine); }
.sidebar-footer { margin-top:auto; padding:14px 8px 2px; border-top:1px solid var(--line); color:var(--muted); }
.sidebar-footer span,.sidebar-footer small { display:block; }
.sidebar-footer span { font-weight:750; font-size:11px; }
.sidebar-footer small { margin-top:2px; font-size:9px; }

.app-workspace { min-width:0; }
.topbar { position:sticky; top:0; z-index:15; min-height:104px; padding:19px 28px 17px; display:flex; align-items:center; justify-content:space-between; gap:22px; border-bottom:1px solid var(--line); background:rgba(244,245,247,.94); backdrop-filter:blur(12px); }
.topbar__heading { min-width:0; display:flex; align-items:flex-start; gap:12px; }
.eyebrow { margin:0 0 3px; color:#7e2949; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }
h1 { margin:0; font-size:26px; line-height:1.18; letter-spacing:-.02em; }
#pageSubtitle { margin:4px 0 0; color:var(--muted); font-size:12px; }
.topbar__actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.save-state { max-width:220px; margin-right:3px; color:var(--muted); font-size:10px; text-align:right; }
.save-state.is-dirty { color:var(--warn); font-weight:700; }
.save-state.is-saved { color:var(--ok); }
.mobile-nav-button { display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; }

.app-main { max-width:1620px; margin:0 auto; padding:24px 28px 56px; }
.loading-screen { min-height:55vh; display:grid; place-items:center; align-content:center; text-align:center; color:var(--muted); }
.loading-screen strong { margin-top:14px; color:var(--ink); font-size:16px; }
.loading-screen p { max-width:460px; margin:6px 0 0; font-size:12px; }
.spinner { width:28px; height:28px; border:3px solid #e1e5eb; border-top-color:var(--wine); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.panel { margin-bottom:16px; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); box-shadow:var(--shadow); }
.panel--flush { padding:0; overflow:hidden; }
.panel--soft { background:#fafbfc; box-shadow:none; }
.panel__head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:15px; }
.panel__head h2,.panel__head h3 { margin:0; line-height:1.25; }
.panel__head h2 { font-size:18px; }
.panel__head h3 { font-size:15px; }
.panel__head p { margin:4px 0 0; color:var(--muted); font-size:11px; }
.panel__actions { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.section-title { margin:0 0 12px; font-size:16px; }
.section-note { margin:-7px 0 14px; color:var(--muted); font-size:11px; }
.divider { height:1px; margin:18px 0; background:var(--line); }

.button { min-height:38px; padding:0 13px; border:1px solid var(--line-strong); border-radius:9px; background:#fff; color:var(--ink); font-size:11px; font-weight:750; cursor:pointer; white-space:nowrap; }
.button:hover:not(:disabled) { border-color:#aeb7c5; background:#fafbfc; }
.button-primary { border-color:var(--wine); background:var(--wine); color:#fff; }
.button-primary:hover:not(:disabled) { border-color:var(--wine-hover); background:var(--wine-hover); }
.button-danger { border-color:#e5baba; color:var(--bad); background:#fff8f8; }
.button-quiet { border-color:transparent; background:transparent; color:var(--muted); }
.button-small { min-height:32px; padding:0 10px; font-size:10px; }
.button:disabled { opacity:.42; cursor:not-allowed; }
.icon-button { width:34px; height:34px; padding:0; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:#fff; cursor:pointer; }

.metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:11px; margin-bottom:16px; }
.metric { padding:15px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 6px 20px rgba(23,32,51,.035); }
.metric strong { display:block; font-size:25px; line-height:1; }
.metric span { display:block; margin-top:7px; color:var(--muted); font-size:10px; }
.metric small { display:block; margin-top:5px; color:var(--subtle); font-size:9px; }

.message-stack { display:grid; gap:8px; }
.message { margin:0; padding:10px 12px; border-radius:10px; font-size:11px; }
.message--warn { color:var(--warn); background:var(--warn-bg); }
.message--bad { color:var(--bad); background:var(--bad-bg); }
.message--ok { color:var(--ok); background:var(--ok-bg); }
.message--info { color:var(--info); background:var(--info-bg); }

.grid { display:grid; gap:14px; }
.grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px 15px; }
.form-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.form-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.field { min-width:0; }
.field--full { grid-column:1/-1; }
.field label,.field-label { display:block; margin-bottom:6px; color:#59657a; font-size:10px; font-weight:750; letter-spacing:.02em; }
.field small { display:block; margin-top:5px; color:var(--muted); font-size:9px; }
input,select,textarea { width:100%; min-height:39px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:9px; background:#fff; color:var(--ink); outline:none; }
textarea { min-height:100px; resize:vertical; line-height:1.45; }
input:focus,select:focus,textarea:focus { border-color:#8e6673; box-shadow:0 0 0 3px rgba(66,26,38,.08); }
input[type="color"] { min-height:39px; padding:4px; }
input[type="checkbox"] { width:17px; min-height:17px; accent-color:var(--wine); }
.checkbox-row { display:flex; align-items:flex-start; gap:9px; }
.checkbox-row span { font-size:11px; }
.checkbox-row small { display:block; margin-top:2px; color:var(--muted); font-size:9px; }
.input-row { display:flex; gap:8px; align-items:center; }
.input-row > *:first-child { flex:1; }
.code-input,code,pre { font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace; }

.split-editor { display:grid; grid-template-columns:minmax(230px,330px) minmax(0,1fr); gap:16px; align-items:start; }
.entity-list { max-height:calc(100vh - 235px); min-height:460px; overflow:auto; padding:7px; border:1px solid var(--line); border-radius:14px; background:#fafbfc; }
.entity-list__head { position:sticky; top:-7px; z-index:2; padding:7px 5px 10px; background:#fafbfc; }
.entity-card { width:100%; margin-bottom:5px; padding:10px; display:flex; align-items:center; gap:10px; border:1px solid transparent; border-radius:10px; background:transparent; text-align:left; cursor:pointer; }
.entity-card:hover { background:#fff; border-color:var(--line); }
.entity-card.is-active { background:#fff; border-color:#bea7af; box-shadow:0 4px 12px rgba(23,32,51,.05); }
.entity-card__swatch { width:30px; height:30px; flex:0 0 auto; border:1px solid rgba(0,0,0,.12); border-radius:9px; background:#eee; }
.entity-card__thumb { width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:9px; background:#fff; }
.entity-card__thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.entity-card__text { min-width:0; flex:1; }
.entity-card__text strong,.entity-card__text span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.entity-card__text strong { font-size:11px; }
.entity-card__text span { margin-top:2px; color:var(--muted); font-size:9px; }
.entity-card__state { width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:#aab2bf; }
.entity-card__state.is-on { background:#2d9b65; }
.editor-pane { min-width:0; }
.editor-tabs { display:flex; gap:3px; margin-bottom:14px; padding:4px; overflow:auto; border:1px solid var(--line); border-radius:10px; background:#f6f7f9; }
.editor-tab { min-height:32px; padding:0 11px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:10px; font-weight:750; cursor:pointer; white-space:nowrap; }
.editor-tab.is-active { background:#fff; color:var(--wine); box-shadow:0 2px 6px rgba(23,32,51,.07); }

.asset-preview { min-height:180px; display:grid; place-items:center; padding:12px; overflow:hidden; border:1px solid var(--line); border-radius:13px; background:linear-gradient(45deg,#f6f6f6 25%,transparent 25%),linear-gradient(-45deg,#f6f6f6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f6f6f6 75%),linear-gradient(-45deg,transparent 75%,#f6f6f6 75%); background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0; }
.asset-preview img { max-width:100%; max-height:340px; object-fit:contain; }
.asset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.asset-card { min-width:0; padding:9px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; }
.asset-card:hover,.asset-card.is-active { border-color:#a88994; box-shadow:0 6px 18px rgba(23,32,51,.06); }
.asset-card__image { height:105px; display:grid; place-items:center; overflow:hidden; border-radius:8px; background:#f7f8fa; }
.asset-card__image img { max-width:100%; max-height:100%; object-fit:contain; }
.asset-card strong,.asset-card span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asset-card strong { margin-top:7px; font-size:10px; }
.asset-card span { margin-top:2px; color:var(--muted); font-size:8px; }

.table-wrap { max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:separate; border-spacing:0; font-size:10px; }
th,td { padding:9px 10px; border-bottom:1px solid #eceff3; vertical-align:middle; text-align:left; }
th { position:sticky; top:0; z-index:2; background:#f7f8fa; color:#526075; font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
tr:last-child td { border-bottom:0; }
td input,td select { min-width:110px; min-height:32px; padding:5px 7px; font-size:10px; }
.table-status { display:inline-flex; align-items:center; gap:5px; padding:4px 7px; border-radius:999px; font-size:8px; font-weight:800; text-transform:uppercase; }
.table-status--mapped { color:var(--ok); background:var(--ok-bg); }
.table-status--missing { color:var(--bad); background:var(--bad-bg); }
.table-status--inactive { color:#687386; background:#eef0f3; }
.stock-zero { color:var(--bad); font-weight:800; }
.stock-ok { color:var(--ok); font-weight:800; }

.toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.toolbar__filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.toolbar input,.toolbar select { width:auto; min-width:150px; }
.search-input { min-width:240px!important; }

.zone-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:16px; align-items:start; }
.zone-canvas-wrap { position:sticky; top:128px; padding:12px; border:1px solid var(--line); border-radius:14px; background:#f8f9fb; }
.zone-canvas { width:100%; max-height:70vh; display:block; border:1px solid #d8dde6; border-radius:11px; background:#fff; touch-action:none; }
.zone-shape { fill:rgba(255,255,255,.68); stroke:#8794a8; stroke-width:2; vector-effect:non-scaling-stroke; cursor:move; }
.zone-shape:hover { fill:rgba(66,26,38,.12); stroke:var(--wine); }
.zone-shape.is-selected { fill:rgba(126,41,73,.16); stroke:#7e2949; stroke-width:3; }
.zone-shape[data-type="special_charm"] { stroke:#a66d2d; }
.zone-shape[data-type="chain"] { stroke:#367195; }
.zone-shape[data-type="ribbon_top"],.zone-shape[data-type="spring_top"] { stroke:#6b4e9a; }
.zone-label { fill:#293448; font-size:13px; font-weight:800; pointer-events:none; text-anchor:middle; dominant-baseline:middle; }
.zone-editor { position:sticky; top:128px; }
.zone-list-mini { max-height:260px; overflow:auto; margin-top:12px; border:1px solid var(--line); border-radius:10px; }
.zone-list-row { width:100%; padding:8px 9px; display:flex; justify-content:space-between; gap:8px; border:0; border-bottom:1px solid #edf0f3; background:#fff; font-size:9px; text-align:left; cursor:pointer; }
.zone-list-row:last-child { border-bottom:0; }
.zone-list-row.is-active { background:var(--wine-soft); color:var(--wine); }

.requirement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.requirement-card { padding:13px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.requirement-card label { display:flex; gap:9px; align-items:flex-start; cursor:pointer; }
.requirement-card strong,.requirement-card span { display:block; }
.requirement-card strong { font-size:11px; }
.requirement-card span { margin-top:3px; color:var(--muted); font-size:9px; }

.language-tabs { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.language-tab { min-height:34px; padding:0 12px; border:1px solid var(--line); border-radius:999px; background:#fff; font-size:10px; font-weight:750; cursor:pointer; }
.language-tab.is-active { border-color:var(--wine); background:var(--wine); color:#fff; }
.translation-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px; }
.translation-row { padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.translation-row label { display:block; margin-bottom:5px; color:var(--muted); font-size:9px; font-weight:700; }
.translation-row input { min-height:34px; font-size:10px; }

.inventory-group + .inventory-group { margin-top:18px; }
.inventory-quantity { width:86px!important; min-width:86px!important; text-align:center; }
.inventory-location { color:var(--muted); font-size:9px; }

.order-list { display:grid; gap:12px; }
.order-card { border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden; }
.order-card__head { padding:12px 14px; display:flex; justify-content:space-between; gap:16px; align-items:center; background:#fafbfc; border-bottom:1px solid var(--line); }
.order-card__head strong,.order-card__head span { display:block; }
.order-card__head span { margin-top:2px; color:var(--muted); font-size:9px; }
.order-design { padding:13px 14px; }
.order-design + .order-design { border-top:1px solid var(--line); }
.order-design__id { margin-bottom:9px; color:var(--wine); font-size:10px; font-weight:800; }
.order-line { display:grid; grid-template-columns:minmax(180px,1.3fr) minmax(80px,.4fr) minmax(0,1.2fr); gap:12px; padding:7px 0; border-top:1px dashed #e7e9ed; font-size:10px; }
.order-line:first-of-type { border-top:0; }
.order-line__props { color:var(--muted); }

.json-editor { min-height:460px; font:11px/1.5 "SFMono-Regular",Consolas,monospace; white-space:pre; }
.backup-card { padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.backup-card strong,.backup-card span { display:block; }
.backup-card span { margin-top:4px; color:var(--muted); font-size:10px; }

.empty-state { padding:38px 20px; text-align:center; color:var(--muted); }
.empty-state strong { display:block; color:var(--ink); font-size:14px; }
.empty-state p { max-width:520px; margin:5px auto 0; font-size:11px; }

.toast-region { position:fixed; right:18px; bottom:18px; z-index:10000; display:grid; gap:8px; pointer-events:none; }
.toast { min-width:260px; max-width:420px; padding:11px 13px; border:1px solid var(--line); border-radius:11px; background:#fff; box-shadow:0 14px 40px rgba(23,32,51,.17); font-size:11px; animation:toast-in .18s ease-out; }
.toast--ok { border-left:4px solid #2d9b65; }
.toast--bad { border-left:4px solid #c94a4a; }
.toast--warn { border-left:4px solid #d39a20; }
@keyframes toast-in { from { transform:translateY(6px); opacity:0; } }

.modal-root:not(:empty) { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:18px; background:rgba(19,24,35,.55); }
.modal { width:min(760px,100%); max-height:90vh; overflow:auto; padding:18px; border-radius:16px; background:#fff; box-shadow:0 28px 90px rgba(0,0,0,.28); }
.modal__head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:14px; }
.modal__head h2 { margin:0; font-size:18px; }
.modal__footer { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }

.busy-overlay { position:fixed; inset:0; z-index:9998; display:grid; place-items:center; background:rgba(244,245,247,.72); backdrop-filter:blur(2px); }
.busy-card { min-width:260px; padding:20px; display:flex; align-items:center; gap:13px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:var(--shadow); }
.busy-card strong,.busy-card span { display:block; }
.busy-card span { margin-top:2px; color:var(--muted); font-size:10px; }

@media(max-width:1180px) {
  .metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid--4,.form-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .translation-list { grid-template-columns:1fr; }
}

@media(max-width:900px) {
  .app-frame { display:block; }
  .app-sidebar { position:fixed; left:0; top:0; width:270px; transform:translateX(-102%); transition:transform .2s ease; box-shadow:20px 0 50px rgba(23,32,51,.18); }
  body.nav-open .app-sidebar { transform:translateX(0); }
  .mobile-nav-button { display:grid; place-items:center; }
  .topbar { padding:15px 16px; align-items:flex-start; }
  .topbar__actions { max-width:300px; }
  .app-main { padding:18px 16px 42px; }
  .split-editor,.zone-layout { grid-template-columns:1fr; }
  .entity-list { max-height:320px; min-height:0; }
  .zone-canvas-wrap,.zone-editor { position:relative; top:auto; }
  .form-grid,.form-grid--3 { grid-template-columns:1fr; }
  .field--full { grid-column:auto; }
  .grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:620px) {
  .topbar { display:block; min-height:0; }
  .topbar__actions { margin-top:12px; justify-content:flex-start; }
  .save-state { width:100%; max-width:none; text-align:left; }
  h1 { font-size:22px; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--2,.grid--3,.grid--4,.form-grid--4 { grid-template-columns:1fr; }
  .requirement-grid { grid-template-columns:1fr; }
  .toolbar { display:block; }
  .toolbar__filters { margin-bottom:9px; }
  .toolbar input,.toolbar select,.search-input { width:100%!important; min-width:0!important; }
  .asset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .order-line { grid-template-columns:1fr; gap:3px; }
}