:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #1d2939; background: #f4f6f9; font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; transition: background .15s, border .15s; }
button:disabled { opacity: .42; cursor: not-allowed; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible { outline: 2px solid #537aff; outline-offset: 2px; }
.topbar { min-height: 76px; padding: 13px 24px; background: #fff; border-bottom: 1px solid #e3e8ee; display: flex; align-items:center; justify-content:space-between; gap:15px; }
.identity,.top-actions,.row-between,.canvas-toolbar,.toolbar-actions,.drawing-toolbar { display:flex; align-items:center; gap: 10px; }
.identity { gap: 13px; }
.identity strong { display:block; font-size: 16px; letter-spacing: -.02em; }
.identity small { display:block; color:#8b96a8; font-size:12px; margin-top:4px; }
.logo { display:grid;place-items:center;background:#263d78;color:#fff;font-weight:800;font-size:15px;width:42px;height:42px;border-radius:11px;letter-spacing:-.5px; }
.status { color:#596878; font-size: 12px; margin-right: 6px; max-width: 310px; overflow:hidden; white-space:nowrap;text-overflow:ellipsis; }
.status.error { color:#bc3b3b; }
.status.success { color:#198665; }
.primary,.ghost,.square,.tool { border-radius: 9px; border: 1px solid transparent; padding: 9px 13px; font-weight:600; font-size:12px; white-space:nowrap; }
.primary { color:white; background:#345bce; }
.primary:hover:not(:disabled) { background:#284dbb; }
.ghost,.square,.tool { color:#334155; background:white; border-color:#dce2ea; }
.ghost:hover:not(:disabled),.square:hover:not(:disabled),.tool:hover:not(:disabled) {background:#f1f5f9}
.full { width:100%; padding:12px; }
.workspace { display:grid; grid-template-columns: 285px minmax(360px,1fr) 310px; height:calc(100vh - 76px); overflow:hidden; }
.left-panel,.right-panel { overflow-y:auto; background:white; }
.left-panel { border-right: 1px solid #e2e7ec; }
.right-panel { border-left: 1px solid #e2e7ec; }
.panel-section { padding:22px 19px; }
.panel-section + .panel-section { border-top:1px solid #e6eaf1; }
.eyebrow { color:#77879a; font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; margin-bottom:7px; }
h2 { font-size: 15px; margin:0 0 17px; letter-spacing:-.015em; }
h3 { margin: 0 0 8px; }
label {display:block; font-size:12px; font-weight:650; margin:14px 0 7px;}
input:not([type=checkbox]),textarea,select { padding:10px 11px;width:100%;border:1px solid #d8e0e8;border-radius:8px;background:#fff;color:#24344c;min-width:0; }
textarea {resize:vertical;line-height:1.4;}
input::placeholder, textarea::placeholder {color:#a8b0ba;}
.upload-zone { cursor:pointer;display:flex; flex-direction:column; align-items:center;justify-content:center; gap:5px; min-height:124px;border:1.5px dashed #b5c5e8;border-radius:11px;background:#f8faff;margin:0 0 15px;text-align:center;padding:18px 12px;color:#345b9b; }
.upload-zone span:not(.upload-icon) {color:#9aa8b9;font-size:11px;font-weight:400;}
.upload-icon {font-size:25px;line-height:1;margin-bottom:4px;}
.upload-options {margin: 8px 0 15px;}
.upload-options label { margin-top:8px; }
.checkline {display:flex; align-items:center;gap:8px;cursor:pointer;font-weight:500;font-size:12px;line-height:1.4;}
.checkline input[type=checkbox] {accent-color:#345bce;width:15px;height:15px;flex-shrink:0;}
.helper,.muted { color:#8b99a8;font-size:12px;line-height:1.5;margin:10px 0 0; }
.row-between {justify-content:space-between;align-items:baseline;}
.row-between h2 {margin-bottom:12px;}
.counter {font-size:11px;color:#64748b;background:#f3f6fa;border:1px solid #e5e9ef;padding:4px 7px;border-radius:6px; }
.page-list { display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px; }
.page-btn {min-width:35px;height:33px;border:1px solid #dbe3ee;background:white;border-radius:7px;color:#607086;font-size:12px;font-weight:600;}
.page-btn.active {background:#eaf0ff;color:#3157b7;border-color:#adbeef;}
.divider {height:1px;background:#edf0f3;margin:18px 0;}
.offers-list {display:flex;flex-direction:column;gap:7px;}
.offer-card {text-align:left;border:1px solid #e0e6ed; background:#fff;border-radius:9px;padding:11px; display:flex;flex-direction:column;gap:5px;white-space:normal; }
.offer-card.active {border-color:#6a8fe8;background:#f4f7ff;box-shadow:inset 3px 0 #476bd7;}
.offer-card strong { font-size:13px;color:#25384e; }
.offer-card .detail { font-size:11px;color:#7e8d9c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:226px; }
.price-tag {background:#ffefe3;color:#a84920;font-weight:700;border-radius:5px;padding:3px 6px;font-size:11px;}
.validated-tag {color:#168361;font-size:11px;font-weight:600;}
.canvas-panel {display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.canvas-toolbar { padding:22px 24px 17px;justify-content:space-between;background:#fff;border-bottom:1px solid #e4e9ee; }
.canvas-toolbar h2 {margin:0;font-size:17px;}
.canvas-toolbar .muted {margin-top:3px;}
.toolbar-actions { align-self:center;}
.square {width:35px;height:35px; padding:0;font-size:18px;}
.drawing-toolbar {padding:11px 20px;flex-wrap:wrap;background:#fff;border-bottom:1px solid #e4e9ee;gap:7px;}
.tool {padding:8px 10px;font-size:11px;}
.tool.active {border-color:#3e6ada;background:#eaf0ff;color:#2f55af;}
.tool-divider {height:25px;width:1px;background:#e5e9ef;margin:0 3px;}
.tool.warn {color:#ac481d;}
.canvas-outer { flex:1; min-height:0; overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:24px; }
.empty-state {text-align:center;max-width:360px;margin:auto;color:#43556e;}
.empty-state p {font-size:13px;color:#8494a6;line-height:1.75;}
.empty-symbol {font-size:56px;color:#98acd7;margin-bottom:15px;}
.page-stage {position:relative;max-width:900px;width:100%;border:1px solid #e2e6ec;box-shadow:0 6px 24px #23304413;background:#fff;}
.page-stage[hidden] {display:none;}
.page-stage img {display:block;width:100%;height:auto;pointer-events:none;user-select:none;}
.page-stage svg {position:absolute;inset:0;width:100%;height:100%;touch-action:none;}
.page-stage svg.drawing {cursor:crosshair;}
.legend {background:#fff;border-top:1px solid #e4e9ee;min-height:48px;display:flex;align-items:center;gap:16px;padding:10px 20px;flex-wrap:wrap;color:#6d7c8f;font-size:11px;}
.legend span {display:flex;align-items:center;gap:6px;}
#drawHint {margin-left:auto;color:#8c9db0;}
.dot {width:9px;height:9px;border-radius:3px;display:inline-block;}
.dot.orange {background:#f6a23e;} .dot.red {background:#eb6d6a;} .dot.green {background:#28aa80;}
.editor-form {margin-top:15px;}
.editor-form fieldset {border:0; margin:0;padding:0;min-width:0;}
.editor-form fieldset:disabled {opacity:.5;}
.editor-form label {margin-top:12px;}
.form-grid {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.check-validated {margin:21px 0 !important;background:#eaf8f2;color:#166d50;padding:10px;border-radius:8px;}
.danger-link {background:transparent;border:0;color:#bd4951;margin-top:12px;padding:9px 0;width:100%;font-size:12px;}
.image-card {margin:26px 0 10px;border:1px solid #e3e9f0;border-radius:10px;padding:13px;background:#f9fafc;}
.image-card strong {font-size:12px;}
.image-card small {font-size:10px;color:#9aa6b5;}
.image-card img {display:block;max-width:100%;max-height:230px;object-fit:contain;margin:14px auto 3px;border-radius:5px;}
.image-card img[hidden] {display:none;}
.notice {background:#fff7e9;border:1px solid #f5e4c3;border-radius:8px;color:#91672d;font-size:11px;line-height:1.6;padding:11px;margin-top:18px;}
@media (max-width:1200px) {
  .workspace {grid-template-columns:240px minmax(300px,1fr) 270px;}
  .panel-section {padding:16px 14px;}
}
@media (max-width:900px) {
  .workspace {display:flex;flex-direction:column;height:auto;overflow:visible;}
  .left-panel,.right-panel {overflow:visible;border:0;border-bottom:1px solid #e2e7ec;}
  .canvas-panel {min-height:650px;}
  .canvas-outer {min-height:460px;flex:unset;}
  .topbar {flex-wrap:wrap;}
  .top-actions {flex-wrap:wrap;}
  .status {max-width:none;}
}