* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font: 12px 'Segoe UI', Tahoma, Arial, sans-serif; color: #1e395b; background: #b5c9df; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: default; border: 1px solid transparent; background: transparent; padding: 3px 5px; outline: none; border-radius: 2px; }
button:focus-visible { outline: 1px dotted #222; outline-offset: -4px; }
button:hover:not(:disabled) { border-color: #dbce99; background: linear-gradient(#fffcf0, #fff3c7 50%, #ffe9a3 51%, #fff5cf); }
button:active:not(:disabled), button.selected, button.open { border-color: #c2a25f; background: linear-gradient(#fbdb9a, #fed683 45%, #fdc85d 46%, #fee6a8); box-shadow: inset 0 1px 2px #8a6a2b50; }
button:disabled { opacity: .45; }
button:disabled svg { filter: grayscale(1); }
svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }
.hidden { display: none !important; }
small { font-size: 8px; line-height: 9px; color: #3e5b7e; }

/* ---------------------------------------------------------------- window */
#paint { position: relative; height: 100%; display: flex; flex-direction: column; border: 1px solid #6f8db2; border-top: 0; box-shadow: inset 0 0 0 1px #e6f4ff; background: #dfe9f5; }
.titlebar { height: 30px; min-height: 30px; display: flex; align-items: center; position: relative; background: linear-gradient(#dbe8f6 0%, #c9dcf1 45%, #b9d1ec 47%, #cfe1f4 100%); color: #1e1e1e; }
.quick { display: flex; align-items: center; height: 26px; padding-left: 6px; z-index: 1; gap: 0; }
.quick button { height: 22px; width: 22px; padding: 2px; display: flex; align-items: center; justify-content: center; }
.quick button svg { width: 16px; height: 16px; }
#quick-menu { width: 13px; padding: 0; }
#quick-menu small { font-size: 9px; color: #1e395b; }
.quick-divider { height: 18px; border-left: 1px solid #93aac6; border-right: 1px solid #f0f7ff; margin: 0 4px 0 3px; }
#app-icon svg { width: 16px; height: 16px; margin: 0 2px; }
#document-title { position: absolute; left: 50%; white-space: nowrap; font-size: 12px; text-shadow: 0 0 8px #fff, 0 0 4px #fff; pointer-events: none; }

/* ------------------------------------------------------------------ tabs */
.tabs { height: 25px; min-height: 25px; display: flex; align-items: stretch; background: linear-gradient(#d9e6f5, #d5e3f3); padding-left: 0; gap: 2px; position: relative; z-index: 2; }
.tabs .tab { min-width: 52px; height: 24px; margin-top: 1px; border-radius: 3px 3px 0 0; padding: 2px 12px 3px; color: #1e395b; }
.tabs .tab:hover:not(.active) { background: linear-gradient(#f3f8fd, #e2edf8); border-color: #b8cbe2; border-bottom-color: transparent; box-shadow: none; }
.tabs .tab.active { background: linear-gradient(#fff, #f5f9fd); border: 1px solid #a9bfd6; border-bottom: 1px solid #f5f9fd; height: 25px; box-shadow: none; }
.tab-spacer { flex: 1; }
#file-tab { width: 56px; height: 22px; margin: 2px 0 0 1px; border: 1px solid #16457d; border-radius: 3px 3px 0 0; background: linear-gradient(#5d9ad8, #3d7cc2 50%, #2a68ad 51%, #3a7cc7); color: #fff; display: flex; justify-content: center; align-items: center; gap: 6px; box-shadow: inset 0 1px 0 #ffffff60; }
#file-tab:hover { background: linear-gradient(#77b2ee, #4d90d8 50%, #3577c2 51%, #4a93dd); border-color: #16457d; }
#file-tab svg { width: 16px; }
#file-tab .arrow, #file-menu-tab .arrow { font-size: 8px; }
#help { border: 0; padding: 0; margin: 4px 7px 0 2px; width: 17px; height: 17px; background: none; box-shadow: none; display: flex; align-items: center; justify-content: center; font: bold 11px Arial; color: #fff; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #8ec2f5, #2f73c0 70%); border: 1px solid #2c5e9c; }
#help:hover { filter: brightness(1.12); }
#collapse { padding: 0 3px; margin-top: 3px; height: 19px; color: #39557a; }
#collapse .chev { display: inline-block; font-size: 11px; line-height: 10px; }
.ribbon-collapsed #collapse .chev { transform: rotate(180deg); }
.contextual { position: relative; display: flex; align-items: flex-end; margin-left: 4px; padding: 0 1px; }
.contextual-title { position: absolute; left: 0; right: 0; top: -27px; height: 26px; background: linear-gradient(#ccdcbb00, #b8d39e); border-top: 3px solid #78a44c; text-align: center; font-size: 11px; color: #1d3a0e; line-height: 22px; white-space: nowrap; padding: 0 6px; pointer-events: none; }
#text-tab { background: linear-gradient(#f2f8ec, #e2efd6); border-color: #9eb98a; border-bottom: 0; }
#text-tab.active { background: linear-gradient(#fff, #f3f8ee); border-color: #9eb98a; border-bottom: 1px solid #f3f8ee; }
.titlebar:has(+ .tabs #text-context:not(.hidden)) #document-title { left: auto !important; right: 130px; }

/* ---------------------------------------------------------------- ribbon */
#ribbon-host { position: relative; z-index: 1; }
.ribbon-collapsed #ribbon-host { display: none; }
.ribbon-collapsed #ribbon-host.peek { display: block; position: absolute; left: 0; right: 0; top: 55px; z-index: 20; box-shadow: 0 3px 6px #0004; }
.ribbon { display: flex; align-items: stretch; height: 93px; min-height: 93px; overflow-x: auto; overflow-y: hidden; background: linear-gradient(#f5f9fd, #dce7f4 80%, #d8e4f2); border-top: 1px solid #a9bfd6; border-bottom: 1px solid #8ba7c8; box-shadow: inset 0 1px 0 #fff; padding: 2px 2px 0; white-space: nowrap; scrollbar-width: none; }
#text-ribbon { background: linear-gradient(#f7fbf3, #e2ecd8 80%, #dce8d1); }
.group { display: flex; flex-direction: column; padding: 0 4px; margin-right: 2px; border-right: 1px solid #b5c7dd; box-shadow: 1px 0 0 #ffffffa0; flex-shrink: 0; }
.group-body { height: 72px; display: flex; align-items: flex-start; gap: 2px; padding-top: 1px; }
.group-label { text-align: center; color: #3e5b7e; height: 16px; font-size: 11px; line-height: 15px; }
.vertical { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.vertical button { display: flex; align-items: center; gap: 4px; text-align: left; height: 22px; padding: 1px 4px 1px 3px; }
.vertical button small { margin-left: 2px; }
.large-button { display: flex; align-items: center; flex-direction: column; height: 70px; padding: 2px 3px 0; min-width: 40px; line-height: 13px; text-align: center; gap: 0; }
.large-button > span[data-icon] > svg { width: 32px; height: 32px; margin: 0 0 3px; }
.large-button small { display: block; margin-top: 1px; }
.split-big { display: flex; flex-direction: column; align-items: stretch; height: 70px; width: 44px; }
.split-big.wide { width: 54px; }
.split-big .big-icon { height: 40px; display: flex; justify-content: center; align-items: center; padding: 3px; border-radius: 2px 2px 0 0; }
.split-big .split-label { flex: 1; line-height: 12px; padding: 1px 1px 0; display: flex; flex-direction: column; align-items: center; border-radius: 0 0 2px 2px; }
.split-big:hover > button:not(:hover):not(:disabled) { border-color: #dbce99; background: linear-gradient(#fffdf6, #fff8e3); }
.big-icon svg { width: 32px; height: 32px; }
.tools { display: grid; grid-template-columns: repeat(3, 23px); grid-template-rows: 22px 22px; gap: 1px 1px; padding: 9px 2px 0; }
.tools button { width: 23px; height: 22px; padding: 2px; display: flex; align-items: center; justify-content: center; }
.tools svg { width: 16px; height: 16px; }
.brushes-group { padding: 0 3px; }
.transparency-group .split-big.wide { width: 74px; }
.shape-gallery-wrap { display: flex; margin-top: 2px; height: 68px; border: 1px solid #a9bcd3; background: #fff; }
.shape-gallery { width: 163px; display: grid; grid-template-columns: repeat(7, 23px); grid-auto-rows: 22px; overflow: hidden; scroll-behavior: smooth; padding: 0 0 0 1px; }
.shape-gallery button { padding: 2px; width: 23px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 0; }
.shape-gallery svg, .shape-grid svg { width: 17px; height: 17px; fill: none; stroke: #1c3a5c; stroke-width: 5; vector-effect: non-scaling-stroke; }
.shape-gallery svg path, .shape-grid svg path { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.gallery-scroll { display: flex; flex-direction: column; width: 13px; border-left: 1px solid #c9d6e6; background: linear-gradient(90deg, #eef3f9, #dfe8f3); }
.gallery-scroll button { flex: 1; padding: 0; font-size: 8px; line-height: 8px; border-radius: 0; color: #3e5b7e; }
.shape-options { padding: 2px 0 0 2px; }
.size-icon { width: 32px; height: 36px; display: flex; flex-direction: column; justify-content: space-around; padding: 3px 1px 4px; margin-bottom: 1px; }
.size-icon i { display: block; background: #1c3a5c; height: 1px; }
.size-icon i:nth-child(2) { height: 2px; }
.size-icon i:nth-child(3) { height: 3px; }
.size-icon i:nth-child(4) { height: 5px; }
.color-button { width: 42px; padding: 2px 2px 0; height: 70px; white-space: normal; line-height: 12px; }
.color-preview { display: block; width: 32px; height: 32px; border: 1px solid #8d9fb8; background: #fff; padding: 3px; margin: 1px auto 4px; }
.color-preview span { display: block; width: 100%; height: 100%; border: 1px solid #0003; }
#color2 .color-preview { width: 24px; height: 24px; padding: 2px; margin: 5px auto 8px; }
.colors-group { border-right: 0; box-shadow: none; padding-right: 2px; }
.colors-group .group-body { gap: 2px; }
#palette { display: grid; grid-template-columns: repeat(10, 21px); grid-template-rows: repeat(3, 21px); gap: 1px; margin: 3px 4px 0; }
#palette button { width: 21px; height: 21px; padding: 2px; border: 1px solid #a1b3cb; background: #fff; border-radius: 0; }
#palette button:hover { border-color: #e9b54f; background: #ffe79e; box-shadow: none; }
#palette button span { width: 15px; height: 15px; display: block; border: 1px solid #0002; }
#palette button.empty { border-color: #c9d4e2; background: #f6f9fc; }
#palette button.empty span { border-color: transparent; }
.edit-colors { padding-left: 2px; padding-right: 2px; min-width: 42px; }
.spectrum { width: 32px; height: 32px; margin: 0 0 3px; border: 1px solid #8292aa; box-shadow: inset 0 0 0 2px #fff; background: linear-gradient(0deg, #fff, transparent 60%), linear-gradient(90deg, #f33, #ff3, #3f3, #3ff, #33f, #f3f, #f33); display: block; }
.view-checks { justify-content: flex-start; gap: 3px; padding: 4px 8px 0 4px; }
.view-checks label { display: flex; align-items: center; height: 20px; }
input[type=checkbox], input[type=radio] { margin: 0 5px 0 0; accent-color: #3a76b8; }
#text-ribbon .group-body { padding-top: 3px; }
.font-body { gap: 4px; padding: 4px 4px 0; }
.font-row { display: flex; gap: 3px; align-items: center; }
#font-family { width: 165px; height: 22px; }
#font-size { width: 50px; height: 22px; }
.font-buttons button { width: 26px; height: 23px; padding: 0; text-align: center; font-family: 'Times New Roman', serif; font-size: 14px; }
.font-buttons #font-strike { width: 32px; font-size: 11px; font-family: inherit; }
.text-bg { gap: 2px; padding: 4px 2px 0; }
.text-bg button { height: 24px; }
select, input[type=number], input[type=text] { border: 1px solid #abadb3; border-top-color: #898c95; background: #fff; padding: 2px 3px; border-radius: 0; }
select:hover, input[type=number]:hover, input[type=text]:hover { border-color: #7eb4ea; }

/* -------------------------------------------------- workspace & canvas */
#workspace-outer { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 0 1fr; grid-template-rows: 0 1fr; }
#workspace-outer.with-rulers { grid-template-columns: 20px 1fr; grid-template-rows: 20px 1fr; }
#ruler-corner { grid-column: 1; grid-row: 1; }
#horizontal-ruler { grid-column: 2; grid-row: 1; width: 100%; height: 20px; }
#vertical-ruler { grid-column: 1; grid-row: 2; width: 20px; height: 100%; }
.ruler { display: block; }
#workspace { grid-column: 2; grid-row: 2; position: relative; overflow: auto; background: #abbbd2; background: #c5d3e6; padding: 5px 15px 15px 5px; min-height: 0; touch-action: none; }
#canvas-wrap { position: relative; width: 1000px; height: 650px; box-shadow: 1px 1px 3px #6f86a6; background: #fff; }
#canvas-wrap.transparent-doc, #canvas-wrap { background-color: #fff; background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
canvas { display: block; }
#canvas, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
#canvas.pixelated, #overlay { image-rendering: pixelated; }
#overlay { touch-action: none; cursor: crosshair; z-index: 2; }
#grid { position: absolute; inset: 0; pointer-events: none; z-index: 1; background-image: linear-gradient(to right, #80808070 1px, transparent 1px), linear-gradient(to bottom, #80808070 1px, transparent 1px); }
#frame { position: absolute; z-index: 3; pointer-events: none; outline: 1px dashed #000; outline-offset: 0; box-shadow: 0 0 0 1px #fff; }
#frame.inverted { outline-color: transparent; box-shadow: none; }
#frame.inverted i { display: none; }
#frame i { position: absolute; width: 5px; height: 5px; background: #fff; border: 1px solid #5d7a9e; pointer-events: auto; }
#frame i[data-dir="nw"] { left: -4px; top: -4px; cursor: nwse-resize; }
#frame i[data-dir="n"] { left: calc(50% - 2px); top: -4px; cursor: ns-resize; }
#frame i[data-dir="ne"] { right: -4px; top: -4px; cursor: nesw-resize; }
#frame i[data-dir="e"] { right: -4px; top: calc(50% - 2px); cursor: ew-resize; }
#frame i[data-dir="se"] { right: -4px; bottom: -4px; cursor: nwse-resize; }
#frame i[data-dir="s"] { left: calc(50% - 2px); bottom: -4px; cursor: ns-resize; }
#frame i[data-dir="sw"] { left: -4px; bottom: -4px; cursor: nesw-resize; }
#frame i[data-dir="w"] { left: -4px; top: calc(50% - 2px); cursor: ew-resize; }
.canvas-handle { position: absolute; width: 5px; height: 5px; background: #fff; border: 1px solid #5d7a9e; z-index: 4; }
.canvas-handle.passive { background: #d5dfec; border-color: #9fb2cb; pointer-events: none; }
.canvas-handle.nw { left: -5px; top: -5px; }
.canvas-handle.n { left: calc(50% - 2px); top: -5px; }
.canvas-handle.ne { right: -5px; top: -5px; }
.canvas-handle.w { left: -5px; top: calc(50% - 2px); }
.canvas-handle.sw { left: -5px; bottom: -5px; }
.canvas-handle.right { right: -5px; top: calc(50% - 2px); cursor: ew-resize; }
.canvas-handle.bottom { bottom: -5px; left: calc(50% - 2px); cursor: ns-resize; }
.canvas-handle.corner { bottom: -5px; right: -5px; cursor: nwse-resize; }
#resize-ghost { position: absolute; border: 1px dashed #000; pointer-events: none; z-index: 5; }
.text-editor { position: absolute; z-index: 4; border: 1px dashed #000; outline: 1px solid #fff; outline-offset: -2px; background: transparent; padding: 1px 2px; margin: 0; resize: both; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; transform-origin: top left; }

/* ---------------------------------------------------------- status bar */
#status { height: 24px; min-height: 24px; background: linear-gradient(#f1f5fb, #dce6f4); border-top: 1px solid #a8bad0; display: flex; align-items: center; padding-left: 2px; gap: 0; font-size: 11px; color: #1e395b; }
.status-cell { height: 20px; min-width: 150px; border-right: 1px solid #b8c8dc; box-shadow: 1px 0 0 #fff; display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.status-cell svg { width: 16px; height: 16px; }
#selection-size { min-width: 150px; }
#file-size.empty svg { visibility: hidden; }
.status-grow { flex: 1; }
#zoom-value { min-width: 40px; text-align: right; margin-right: 6px; }
.zoom-step { width: 15px; height: 15px; padding: 0; border: 1px solid #7b93b4; border-radius: 50%; color: #284a72; background: linear-gradient(#fff, #d8e4f2); line-height: 11px; font-size: 13px; display: flex; align-items: center; justify-content: center; }
#zoom { width: 110px; height: 16px; margin: 0 4px; cursor: default; appearance: none; background: transparent; }
#zoom::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(#8c9db4, #c7d3e3); border-radius: 1px; }
#zoom::-webkit-slider-thumb { appearance: none; width: 9px; height: 15px; margin-top: -6px; border: 1px solid #576f92; border-radius: 2px 2px 5px 5px; background: linear-gradient(90deg, #f6f9fd, #c9d7ea); }
#zoom::-moz-range-track { height: 3px; background: #8c9db4; }
#zoom::-moz-range-thumb { width: 8px; height: 14px; border: 1px solid #576f92; border-radius: 2px; background: #e8eef7; }

/* --------------------------------------------------------------- menus */
.popup { position: fixed; z-index: 50; background: #fafafa; border: 1px solid #979797; box-shadow: 2px 2px 3px #0005; padding: 2px; min-width: 170px; }
.popup::before { content: ''; position: absolute; left: 30px; top: 2px; bottom: 2px; border-left: 1px solid #e2e3e3; border-right: 1px solid #fff; pointer-events: none; }
.popup button { width: 100%; display: flex; align-items: center; gap: 8px; text-align: left; min-height: 24px; padding: 2px 6px 2px 4px; white-space: nowrap; position: relative; }
.popup button:hover:not(:disabled) { border-color: #a8d8eb; background: linear-gradient(#f2f9fd, #d6edfa); box-shadow: none; }
.popup button.selected { border-color: #e3bd6a; background: linear-gradient(#fdf1d0, #fbe1a1); box-shadow: none; }
.popup button svg { width: 20px; height: 20px; }
.popup .icon-space { width: 20px; flex-shrink: 0; }
.popup .check { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid transparent; border-radius: 2px; }
.popup .check.on { border-color: #e3bd6a; background: #fcecbd; }
.popup .check.on:empty::after { content: '✓'; color: #1e395b; font-size: 12px; }
.popup kbd { margin-left: auto; font: inherit; color: #6d6d6d; padding-left: 18px; }
.popup .sub-arrow { margin-left: auto; padding-left: 14px; font-size: 9px; }
.popup .label { flex: 1; }
.popup hr { border: 0; border-top: 1px solid #e0e0e0; margin: 2px 0 2px 32px; }
.menu-heading { background: #dde7f2; color: #1e395b; font-weight: bold; padding: 4px 8px; margin: -2px -2px 2px; border-bottom: 1px solid #c5d3e3; position: relative; z-index: 1; }
.menu-heading:not(:first-child) { margin-top: 2px; }
.popup.menu-brushes, .popup.menu-size, .popup.shape-grid { min-width: 0; }
.popup.menu-brushes::before, .popup.menu-size::before, .popup.shape-grid::before { display: none; }
.popup.menu-brushes { display: grid; grid-template-columns: repeat(3, 56px); gap: 1px; padding: 3px; }
.menu-brushes button { height: 56px; width: 56px; justify-content: center; padding: 2px; }
.menu-brushes button img { display: block; border: 1px solid #c8d4e2; }
.popup.menu-size { padding: 6px; width: 176px; }
.size-preview { display: block; width: 160px; height: 56px; margin: 0 auto 6px; border: 1px solid #c8d4e2; background: #fff; }
.size-row { display: flex; align-items: center; gap: 6px; }
#size-slider { flex: 1; min-width: 0; margin: 0; accent-color: #3a76b8; }
#size-value { width: 34px; text-align: right; color: #1e395b; }
.popup.shape-grid { display: grid; grid-template-columns: repeat(7, 24px); padding: 3px; }
.shape-grid button { width: 24px; height: 23px; padding: 2px; justify-content: center; }
.popup.menu-quick { min-width: 240px; }

/* ----------------------------------------------------------- file menu */
#file-menu { position: fixed; left: 1px; top: 30px; z-index: 51; display: flex; flex-direction: column; filter: drop-shadow(2px 4px 6px #0005); }
.file-menu-top { height: 26px; display: flex; align-items: flex-end; }
#file-menu-tab { width: 56px; height: 25px; margin-left: 1px; border: 1px solid #16457d; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#3a7cc7, #2a68ad); color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; }
.file-menu-body { display: flex; background: linear-gradient(#e8f0fa, #dbe6f4); border: 1px solid #6f8db2; padding: 4px; width: 540px; min-height: 420px; border-radius: 0 3px 3px 3px; }
.file-commands { width: 236px; display: flex; flex-direction: column; padding-right: 3px; }
.file-commands button { height: 40px; width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; padding: 3px 6px; white-space: nowrap; position: relative; }
.file-commands button.has-sub { padding-right: 16px; }
.file-commands button.has-sub::after { content: '▸'; position: absolute; right: 5px; font-size: 9px; color: #1e395b; }
.file-commands button.sub-open { border-color: #dbce99; background: linear-gradient(#fffcf0, #fff3c7 50%, #ffe9a3 51%, #fff5cf); }
.file-commands svg { width: 32px; height: 32px; }
.file-commands hr { width: 100%; border: 0; border-top: 1px solid #c2d0e2; border-bottom: 1px solid #fff; margin: 2px 0; }
.file-side { flex: 1; background: #fff; border: 1px solid #b6c8de; padding: 0 0 6px; overflow: hidden; }
.side-title { font-weight: bold; padding: 6px 10px 5px; border-bottom: 1px solid #c5d3e3; margin-bottom: 4px; background: linear-gradient(#f4f8fc, #e6eef8); }
.side-subtitle { padding: 2px 10px 6px; color: #444; }
.file-side button { width: calc(100% - 8px); margin: 0 4px; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 5px 6px; white-space: normal; line-height: 15px; }
.file-side button svg { width: 32px; height: 32px; }
.file-side button span { color: #444; }
.file-side button b { color: #1e1e1e; font-weight: bold; }

/* --------------------------------------------------------------- dialogs */
dialog { padding: 0; border: 1px solid #435f84; border-radius: 7px; background: linear-gradient(#c2d6ee, #b0c8e6 30px, #b0c8e6); box-shadow: 0 8px 30px #0007, inset 0 0 0 1px #ffffff80; min-width: 300px; max-width: calc(100vw - 20px); color: #000; }
dialog::backdrop { background: transparent; }
.dialog-title { height: 28px; display: flex; align-items: center; justify-content: space-between; padding-left: 9px; text-shadow: 0 0 8px #fff, 0 0 4px #fff; }
.dialog-close { width: 43px; height: 18px; margin: -10px 5px 0 0; padding: 0; border: 1px solid #6b2a20 !important; border-top: 0 !important; border-radius: 0 0 4px 4px; background: linear-gradient(#e8a493, #d5735d 45%, #c4442b 50%, #d26a4c) !important; color: #fff; font: bold 10px Arial; text-shadow: 0 0 1px #5a1408; }
.dialog-close:hover { background: linear-gradient(#f7b2a2, #ec7b62 45%, #e04d2f 50%, #f17c5c) !important; }
#dialog-body { margin: 0 7px; padding: 14px 14px 10px; background: #f0f0f0; border: 1px solid #8ea4c1; border-bottom: 0; line-height: 1.5; max-height: calc(100vh - 120px); overflow: auto; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 7px; padding: 4px 14px 12px; margin: 0 7px 7px; background: #f0f0f0; border: 1px solid #8ea4c1; border-top: 0; }
.dialog-actions:has(.left) { justify-content: flex-start; }
.dialog-actions button, #dialog-body button.cc-add, #dialog-body button.cc-define { min-width: 73px; height: 23px; padding: 0 10px; background: linear-gradient(#f2f2f2, #ebebeb 50%, #dddddd 51%, #cfcfcf); border: 1px solid #707070; border-radius: 3px; box-shadow: inset 0 0 0 1px #fffc; }
.dialog-actions button:hover, #dialog-body button.cc-add:hover { background: linear-gradient(#eaf6fd, #d9f0fc 50%, #bee6fd 51%, #a7d9f5); border-color: #3c7fb1; }
.dialog-actions button.default { border-color: #3c7fb1; box-shadow: inset 0 0 0 1px #48d4ff90; }
#dialog-body p:first-child { margin-top: 0; }
#dialog-body p:last-child { margin-bottom: 0; }
#dialog-body .fields { display: grid; grid-template-columns: auto 90px; align-items: center; gap: 7px 12px; }
#dialog-body .fields.wide { grid-template-columns: auto 260px; }
#dialog-body input[type=number] { width: 70px; }
#dialog-body fieldset { border: 1px solid #d5dfe5; border-radius: 3px; margin: 0 0 10px; padding: 6px 10px 10px; }
#dialog-body legend { padding: 0 3px; color: #1e395b; }
#dialog-body label { display: block; }
#dialog-body .inline { display: flex; align-items: center; margin: 3px 0; }
.msg { display: flex; align-items: flex-start; gap: 12px; margin: 4px 6px 8px 0 !important; max-width: 420px; }
.msg.big { font-size: 15px; color: #1a3e8c; margin: 4px 0 18px !important; }
.msg-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: bold 20px Georgia, serif; color: #fff; }
.msg-icon.info { background: radial-gradient(circle at 40% 30%, #8fc3f2, #1f63b4); }
.msg-icon.info::after { content: 'i'; }
.msg-icon.warn { border-radius: 0; background: linear-gradient(#ffe36b, #f2b300); clip-path: polygon(50% 2%, 100% 98%, 0 98%); color: #000; font: bold 18px Arial; padding-top: 8px; }
.msg-icon.warn::after { content: '!'; }
.msg-icon.error { background: radial-gradient(circle at 40% 30%, #ff8a7a, #c9251a); font: bold 18px Arial; }
.msg-icon.error::after { content: '✕'; }
.rs { width: 300px; }
.rs-by { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.rs-grid { display: grid; grid-template-columns: 24px 80px 70px; gap: 6px 6px; align-items: center; }
.rs-icon svg { width: 22px; height: 22px; }
.rs-keep { margin-left: 30px !important; }
.props { width: 360px; }
.props-grid { display: grid; grid-template-columns: 110px auto; gap: 2px 8px; }
.props-row { display: flex; gap: 10px; }
.props-row fieldset { flex: 1; }
.props-size { margin: 4px 0 10px; grid-template-columns: auto 90px auto 90px !important; }
.about { width: 380px; }
.about-banner { display: flex; align-items: center; gap: 16px; padding: 4px 4px 10px; font: 30px 'Segoe UI', sans-serif; color: #1e395b; }
.about-banner small { font-size: 16px; color: #567; }
.about hr { border: 0; border-top: 1px solid #c8c8c8; margin: 0 0 10px; }
.help { width: 520px; }
.help h3 { font-size: 14px; color: #1a3e8c; font-weight: normal; margin: 6px 0 4px; }
.help table { border-collapse: collapse; width: 100%; }
.help td { padding: 2px 6px; border-bottom: 1px solid #e2e2e2; vertical-align: top; }
.help td:first-child { white-space: nowrap; color: #1e395b; }
.page-setup { width: 400px; }
.ps-preview { display: flex; justify-content: center; padding: 6px 0 10px; }
.ps-page { background: #fff; border: 1px solid #888; box-shadow: 3px 3px 0 #999; display: flex; align-items: flex-start; justify-content: center; padding: 8px; overflow: hidden; }
.ps-page.portrait { width: 78px; height: 100px; }
.ps-page.landscape { width: 100px; height: 78px; }
.ps-page img { max-width: 100%; max-height: 100%; }
.ps-page.big.portrait { width: 340px; height: 440px; padding: 30px; }
.ps-page.big.landscape { width: 520px; height: 400px; padding: 30px; }
.ps-row { display: flex; gap: 10px; }
.ps-row fieldset { flex: 1; }
.print-preview { background: #808080; padding: 20px; display: flex; justify-content: center; }

/* Classic Windows color chooser */
.cc { display: flex; gap: 14px; }
.cc-left { width: 222px; }
.cc-label { margin: 2px 0 3px; }
.cc-swatches { display: grid; grid-template-columns: repeat(8, 25px); gap: 2px 3px; margin-bottom: 10px; }
.cc-swatches button { width: 24px; height: 20px; padding: 2px; border: 1px solid transparent; border-radius: 0; background: transparent; box-shadow: none; }
.cc-swatches button::after { content: ''; display: block; width: 100%; height: 100%; background: var(--c); border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px 0 #404040; }
.cc-swatches button.picked, .cc-swatches button:hover { border: 1px dotted #000 !important; background: transparent !important; }
.cc-define { width: 100%; margin-top: 8px; }
.cc-right { width: 250px; }
.cc-pickers { display: flex; gap: 6px; align-items: stretch; }
.cc-spectrum { position: relative; width: 176px; height: 187px; border: 1px solid; border-color: #808080 #fff #fff #808080; cursor: crosshair; background: linear-gradient(to bottom, transparent, #808080), linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
#cc-cross { position: absolute; width: 19px; height: 19px; margin: -9px 0 0 -9px; pointer-events: none; background: linear-gradient(#000, #000) 9px 0 / 1px 6px no-repeat, linear-gradient(#000, #000) 9px 13px / 1px 6px no-repeat, linear-gradient(#000, #000) 0 9px / 6px 1px no-repeat, linear-gradient(#000, #000) 13px 9px / 6px 1px no-repeat; }
.cc-lum { width: 12px; height: 187px; border: 1px solid; border-color: #808080 #fff #fff #808080; cursor: pointer; }
.cc-arrow-track { position: relative; width: 10px; height: 187px; cursor: pointer; }
#cc-arrow { position: absolute; left: 0; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; border-right-color: #000; border-left: 0; }
.cc-values { display: flex; gap: 8px; margin-top: 8px; }
.cc-preview { width: 66px; text-align: center; }
.cc-preview span { display: block; width: 64px; height: 42px; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.cc-fields { display: grid; grid-template-columns: 34px 42px 40px 42px; gap: 3px 4px; align-items: center; text-align: right; }
.cc-fields input { width: 42px !important; padding: 1px 2px; }
.cc-add { width: 100%; margin-top: 8px; }

/* ---------------------------------------------------------- misc windows */
#toast { position: fixed; bottom: 34px; left: 50%; transform: translateX(-50%); background: #ffffe1; border: 1px solid #767676; box-shadow: 2px 2px 3px #0003; padding: 5px 10px; z-index: 70; pointer-events: none; opacity: 0; transition: opacity .15s; max-width: 70vw; }
#toast.show { opacity: 1; }
#thumbnail { position: fixed; right: 30px; top: 180px; z-index: 30; background: linear-gradient(#c2d6ee, #b0c8e6); border: 1px solid #435f84; border-radius: 6px; padding: 0 6px 6px; box-shadow: 0 4px 16px #0005; }
.thumb-title { height: 22px; display: flex; align-items: center; justify-content: space-between; text-shadow: 0 0 6px #fff; }
.thumb-title button { width: 30px; height: 16px; padding: 0; margin-top: -6px; border: 1px solid #6b2a20; border-top: 0; border-radius: 0 0 3px 3px; background: linear-gradient(#e8a493, #c4442b 50%, #d26a4c); color: #fff; font: bold 9px Arial; }
#thumbnail-canvas { display: block; background: #c5d3e6; border: 1px solid #8ea4c1; }
#fullscreen-view { position: fixed; inset: 0; z-index: 90; background: #000; display: flex; align-items: center; justify-content: center; overflow: auto; cursor: default; }
#fullscreen-view canvas { max-width: none; image-rendering: auto; }
#print-area { display: none; }
#desktop { position: absolute; inset: 0; background: radial-gradient(ellipse at 25% 75%, #9bc2c4, transparent 65%), linear-gradient(140deg, #224963, #648daf 65%, #aed1d8); display: flex; align-items: flex-start; justify-content: flex-start; padding: 12px; }
#restore-app { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; text-shadow: 0 1px 3px #000; padding: 8px 10px; }
#restore-app:hover { background: #ffffff30; border-color: #ffffff80; }

@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; }
  html, body { overflow: visible; height: auto; background: #fff; }
}

@media (max-width: 700px) {
  #document-title { display: none; }
  .status-cell { min-width: 96px; }
  #selection-size, #file-size, .status-grow { display: none; }
  #zoom { width: 70px; }
  .file-menu-body { width: 96vw; }
  .file-side { display: none; }
  .file-commands { width: 100%; }
}