/* Paint (mspaint.exe) — Windows XP Paint look. All selectors are prefixed with .app-mspaint*. */
.app-mspaint {
  --mp-shadow: #ACA899;
  --mp-dark: #716F64;
  --mp-light: #FFFFFF;
  --mp-work: #808080;
  --mp-hi: #316AC5;
  --mp-cur-zoom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='11' cy='11' r='7' fill='%23fff' fill-opacity='.35' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M16 16l8 8' stroke='%23000' stroke-width='3'/%3E%3C/svg%3E") 11 11, zoom-in;
  --mp-cur-spray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M9 7h6v11H9z' fill='%23C0C0C0' stroke='%23000'/%3E%3Cpath d='M10 3h4v4h-4z' fill='%23000'/%3E%3Cpath d='M3 2h1v1H3zM1 4h1v1H1zM5 4h1v1H5zM3 6h1v1H3zM1 1h1v1H1z' fill='%23000'/%3E%3C/svg%3E") 2 2, crosshair;
}
.app-mspaint .window-body { background: var(--xp-face); }
.app-mspaint .mp-root { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; user-select: none; -webkit-user-select: none; }
.app-mspaint .mp-main { flex: 1; min-height: 0; display: flex; position: relative; }

/* ---------- tool box ---------- */
.app-mspaint .mp-toolbox { flex: none; width: 56px; padding: 4px 3px 4px 4px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-right: 1px solid var(--mp-shadow); box-shadow: inset -1px 0 var(--mp-light); overflow: hidden; }
.app-mspaint .mp-toolbox[hidden] { display: none; }
.app-mspaint .mp-tools { display: grid; grid-template-columns: repeat(2, 25px); grid-auto-rows: 25px; gap: 0; }
.app-mspaint .mp-tool { width: 25px; height: 25px; padding: 0; margin: 0; border: 1px solid transparent; background: transparent; display: grid; place-items: center; cursor: var(--cur-arrow); border-radius: 0; }
.app-mspaint .mp-tool:hover { border-color: var(--mp-light) var(--mp-dark) var(--mp-dark) var(--mp-light); }
.app-mspaint .mp-tool.active { border-color: var(--mp-dark) var(--mp-light) var(--mp-light) var(--mp-dark);
  background: repeating-conic-gradient(#fff 0 25%, var(--xp-face) 0 50%) 0 0 / 2px 2px; }
.app-mspaint .mp-tool.active svg { transform: translate(1px, 1px); }
.app-mspaint .mp-tool:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }

/* ---------- options box ---------- */
.app-mspaint .mp-options { width: 41px; height: 66px; flex: none; border: 1px solid; border-color: var(--mp-shadow) var(--mp-light) var(--mp-light) var(--mp-shadow);
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-around; padding: 1px; box-sizing: border-box; overflow: hidden; }
.app-mspaint .mp-opt { display: flex; align-items: center; justify-content: center; min-height: 0; flex: 1; cursor: var(--cur-arrow); }
.app-mspaint .mp-opt.on { background: var(--mp-hi); }
.app-mspaint .mp-opt.on svg, .app-mspaint .mp-opt.on i { filter: invert(1); }
.app-mspaint .o-sel .mp-opt.on svg { filter: none; }
.app-mspaint .mp-opt.on b { color: #fff; }
.app-mspaint .mp-opt i { display: block; background: #000; }
.app-mspaint .o-width .mp-opt i { width: 30px; }
.app-mspaint .o-brush, .app-mspaint .o-air { flex-flow: row wrap; align-content: space-around; }
.app-mspaint .o-brush .mp-opt { flex: 0 0 33.33%; height: 25%; }
.app-mspaint .o-air .mp-opt { flex: 0 0 50%; height: 50%; }
.app-mspaint .o-zoom .mp-opt { justify-content: flex-start; padding-left: 4px; font-size: 11px; }
.app-mspaint .o-sel .mp-opt svg { width: 34px; height: 24px; }

/* ---------- work area + canvas ---------- */
.app-mspaint .mp-work { flex: 1; min-width: 0; min-height: 0; overflow: auto; background: var(--mp-work);
  border: 1px solid; border-color: var(--mp-dark) var(--mp-light) var(--mp-light) var(--mp-dark); position: relative; }
.app-mspaint .mp-stage { display: inline-block; padding: 3px 12px 12px 3px; vertical-align: top; }
.app-mspaint .mp-canvaswrap { position: relative; background: #fff; touch-action: none; }
.app-mspaint .mp-canvaswrap canvas.mp-doc, .app-mspaint .mp-canvaswrap canvas.mp-over { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.app-mspaint .mp-canvaswrap[data-cursor=cross] { cursor: var(--cur-cross); }
.app-mspaint .mp-canvaswrap[data-cursor=pen] { cursor: var(--cur-pen); }
.app-mspaint .mp-canvaswrap[data-cursor=bucket] { cursor: var(--cur-bucket); }
.app-mspaint .mp-canvaswrap[data-cursor=picker] { cursor: var(--cur-picker); }
.app-mspaint .mp-canvaswrap[data-cursor=zoom] { cursor: var(--mp-cur-zoom); }
.app-mspaint .mp-canvaswrap[data-cursor=spray] { cursor: var(--mp-cur-spray); }
.app-mspaint .mp-canvaswrap[data-cursor=none] { cursor: none; }
.app-mspaint .mp-grid { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(128,128,128,.9) 1px, transparent 1px), linear-gradient(to bottom, rgba(128,128,128,.9) 1px, transparent 1px); }
.app-mspaint .mp-grid[hidden] { display: none; }

/* canvas resize handles: 3 live (navy), 5 hollow */
.app-mspaint .mp-ch { position: absolute; width: 3px; height: 3px; border: 1px solid #000080; background: #fff; box-sizing: content-box; }
.app-mspaint .mp-ch.act { background: #000080; }
.app-mspaint .mp-ch.act::after { content: ''; position: absolute; inset: -8px; }
.app-mspaint .mp-ch.nw { left: -5px; top: -5px; } .app-mspaint .mp-ch.n { left: calc(50% - 2px); top: -5px; } .app-mspaint .mp-ch.ne { left: 100%; top: -5px; }
.app-mspaint .mp-ch.w { left: -5px; top: calc(50% - 2px); } .app-mspaint .mp-ch.sw { left: -5px; top: 100%; }
.app-mspaint .mp-ch.e { left: 100%; top: calc(50% - 2px); cursor: var(--cur-ew); }
.app-mspaint .mp-ch.s { left: calc(50% - 2px); top: 100%; cursor: var(--cur-ns); }
.app-mspaint .mp-ch.se { left: 100%; top: 100%; cursor: var(--cur-nwse); }
.app-mspaint .mp-ch:not(.act) { border-color: #000080; }
.app-mspaint .mp-rsz { position: absolute; left: 0; top: 0; border: 1px dotted #000; outline: 1px dotted #fff; outline-offset: -2px; pointer-events: none; box-sizing: border-box; }
.app-mspaint .mp-rsz[hidden] { display: none; }

/* selection */
.app-mspaint .mp-selbox { position: absolute; box-sizing: border-box; cursor: var(--cur-move);
  background-image: linear-gradient(90deg, #000 50%, transparent 0), linear-gradient(90deg, #000 50%, transparent 0), linear-gradient(0deg, #000 50%, transparent 0), linear-gradient(0deg, #000 50%, transparent 0);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
  background-position: 0 0, 0 100%, 0 0, 100% 0; animation: mp-ants .6s linear infinite; }
.app-mspaint .mp-selbox[hidden] { display: none; }
.app-mspaint .mp-selbox.creating { animation: none; cursor: inherit; pointer-events: none; }
.app-mspaint .mp-selbox.creating .mp-sh { display: none; }
@keyframes mp-ants { to { background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px; } }
.app-mspaint .mp-sh { position: absolute; width: 4px; height: 4px; background: #000080; }
.app-mspaint .mp-sh::after { content: ''; position: absolute; inset: -7px; }
.app-mspaint .mp-sh.nw { left: -3px; top: -3px; cursor: var(--cur-nwse); } .app-mspaint .mp-sh.n { left: calc(50% - 2px); top: -3px; cursor: var(--cur-ns); }
.app-mspaint .mp-sh.ne { right: -3px; top: -3px; cursor: var(--cur-nesw); } .app-mspaint .mp-sh.e { right: -3px; top: calc(50% - 2px); cursor: var(--cur-ew); }
.app-mspaint .mp-sh.se { right: -3px; bottom: -3px; cursor: var(--cur-nwse); } .app-mspaint .mp-sh.s { left: calc(50% - 2px); bottom: -3px; cursor: var(--cur-ns); }
.app-mspaint .mp-sh.sw { left: -3px; bottom: -3px; cursor: var(--cur-nesw); } .app-mspaint .mp-sh.w { left: -3px; top: calc(50% - 2px); cursor: var(--cur-ew); }

/* text box */
.app-mspaint .mp-textbox { position: absolute; margin: 0; padding: 0; border: 0; outline: 1px dashed #000; outline-offset: 0; resize: none; overflow: hidden;
  white-space: pre-wrap; overflow-wrap: break-word; box-sizing: border-box; cursor: var(--cur-text); user-select: text; -webkit-user-select: text; min-width: 0; }

/* ---------- floating panels (Fonts toolbar, Thumbnail) ---------- */
.app-mspaint .mp-panel { position: absolute; z-index: 5; background: var(--xp-face); border: 1px solid #0831D9; border-radius: 3px 3px 0 0;
  box-shadow: 2px 2px 4px rgba(0,0,0,.35); }
.app-mspaint .mp-panel[hidden] { display: none; }
.app-mspaint .mp-ptitle { display: flex; align-items: center; justify-content: space-between; height: 15px; padding: 0 1px 0 4px; cursor: var(--cur-arrow);
  background: linear-gradient(to bottom, #0A5FF0, #0842C9); color: #fff; font: bold 11px Tahoma, sans-serif; touch-action: none; }
.app-mspaint .mp-pclose { width: 13px; height: 13px; padding: 0; line-height: 10px; font-size: 11px; font-weight: bold; color: #fff; background: #D5421F;
  border: 1px solid #fff; border-radius: 2px; cursor: var(--cur-arrow); }
.app-mspaint .mp-fonts { left: 70px; bottom: 8px; }
.app-mspaint .mp-frow { display: flex; align-items: center; gap: 3px; padding: 4px; flex-wrap: wrap; max-width: calc(100vw - 30px); }
.app-mspaint .mp-fname { width: 150px; }
.app-mspaint .mp-fsize { width: 52px; }
.app-mspaint .mp-fscript { width: 90px; }
.app-mspaint .mp-fbtn { height: 22px; width: 23px; padding: 0; justify-content: center; font-size: 12px; font-family: "Times New Roman", serif; }
.app-mspaint .mp-fbtn.on { border-color: #9D9D92 #fff #fff #9D9D92; background: #E3E1D5; }
.app-mspaint .mp-thumb { right: 22px; top: 6px; }
.app-mspaint .mp-thumb canvas { display: block; width: 160px; height: 120px; image-rendering: pixelated; border: 2px solid var(--xp-face); }

/* ---------- colour box ---------- */
.app-mspaint .mp-colorbox { flex: none; display: flex; align-items: center; gap: 3px; padding: 3px 3px 4px; border-top: 1px solid var(--mp-light); }
.app-mspaint .mp-colorbox[hidden] { display: none; }
.app-mspaint .mp-cur { position: relative; flex: none; width: 30px; height: 31px; border: 1px solid; border-color: var(--mp-dark) var(--mp-light) var(--mp-light) var(--mp-dark);
  background: repeating-conic-gradient(#fff 0 25%, var(--xp-face) 0 50%) 0 0 / 2px 2px; box-sizing: border-box; }
.app-mspaint .mp-cur-fg, .app-mspaint .mp-cur-bg { position: absolute; width: 13px; height: 13px; box-sizing: border-box;
  border: 1px solid; border-color: var(--mp-light) var(--mp-dark) var(--mp-dark) var(--mp-light); box-shadow: 0 0 0 1px #D4D0C8; }
.app-mspaint .mp-cur-fg { left: 4px; top: 4px; z-index: 1; }
.app-mspaint .mp-cur-bg { left: 11px; top: 12px; }
.app-mspaint .mp-palette { display: grid; grid-template-columns: repeat(14, 16px); grid-auto-rows: 16px; gap: 0; min-width: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 1px; }
.app-mspaint .mp-sw { width: 16px; height: 16px; box-sizing: border-box; border: 1px solid; border-color: var(--mp-dark) var(--mp-light) var(--mp-light) var(--mp-dark);
  box-shadow: inset 1px 1px #404040; cursor: var(--cur-arrow); touch-action: manipulation; }

/* status bar parts */
.app-mspaint .xp-statusbar .part.mp-sb-pos, .app-mspaint .xp-statusbar .part.mp-sb-size { min-width: 90px; width: 90px; flex: 0 0 90px; }

/* ---------- print preview ---------- */
.app-mspaint .mp-preview { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; background: var(--xp-face); }
.app-mspaint .mp-pv-bar { display: flex; gap: 4px; padding: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--mp-shadow); }
.app-mspaint .mp-pv-bar .xp-btn { min-width: 0; padding: 0 8px; }
.app-mspaint .mp-pv-view { flex: 1; min-height: 0; overflow: auto; background: var(--mp-work); display: flex; align-items: flex-start; justify-content: center; padding: 12px; }
.app-mspaint .mp-pv-page { box-shadow: 3px 3px 0 #000; background: #fff; line-height: 0; }
.app-mspaint .mp-pv-page canvas { display: block; width: auto; max-width: calc(100vw - 40px); object-fit: contain; }
.app-mspaint .mp-pv-view.big .mp-pv-page canvas { width: 816px; max-width: none; height: auto; }

/* ---------- narrow (phone) layout: tool box becomes a strip on top ---------- */
.app-mspaint .mp-narrow .mp-main { flex-direction: column; }
.app-mspaint .mp-narrow .mp-toolbox { width: auto; flex-direction: row; align-items: center; justify-content: flex-start; padding: 3px 4px; gap: 6px;
  border-right: 0; border-bottom: 1px solid var(--mp-shadow); box-shadow: 0 1px var(--mp-light); overflow-x: auto; }
.app-mspaint .mp-narrow .mp-tools { grid-template-columns: repeat(8, 30px); grid-auto-rows: 30px; }
.app-mspaint .mp-narrow .mp-tool { width: 30px; height: 30px; }
.app-mspaint .mp-narrow .mp-options { width: 76px; height: 62px; flex-flow: row wrap; }
.app-mspaint .mp-narrow .mp-options .mp-opt { flex: 1 0 45%; }
.app-mspaint .mp-narrow .o-brush .mp-opt { flex: 0 0 25%; height: 33.3%; }
.app-mspaint .mp-narrow .o-sel .mp-opt, .app-mspaint .mp-narrow .o-fill .mp-opt, .app-mspaint .mp-narrow .o-air .mp-opt { flex: 1 0 45%; height: auto; }
.app-mspaint .mp-narrow .mp-palette { grid-template-columns: repeat(14, 22px); grid-auto-rows: 22px; }
.app-mspaint .mp-narrow .mp-sw { width: 22px; height: 22px; }
.app-mspaint .mp-narrow .mp-cur { width: 36px; height: 44px; }
.app-mspaint .mp-narrow .mp-cur-fg, .app-mspaint .mp-narrow .mp-cur-bg { width: 17px; height: 17px; }
.app-mspaint .mp-narrow .mp-cur-bg { left: 13px; top: 20px; }
.app-mspaint .mp-narrow .mp-fonts { left: 4px; bottom: 4px; }
.app-mspaint .mp-narrow .mp-fname { width: 120px; }
.app-mspaint.mp-narrow-win .xp-statusbar .part.mp-sb-size { display: none; }
.app-mspaint.mp-narrow-win .xp-statusbar .part.mp-sb-pos { min-width: 64px; width: 64px; flex-basis: 64px; }

/* ---------- dialogs ---------- */
.app-mspaint-dlg .mp-dlg { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app-mspaint-dlg .mp-stack { display: flex; flex-direction: column; gap: 6px; }
.app-mspaint-dlg .mp-indent { padding-left: 22px; }
.app-mspaint-dlg .xp-radio.disabled { color: #A19F92; }
.app-mspaint-dlg .mp-field { display: grid; grid-template-columns: 80px 56px auto; align-items: center; gap: 6px; margin: 4px 0; }
.app-mspaint-dlg .mp-num { width: 56px; box-sizing: border-box; }
.app-mspaint-dlg .mp-row { display: flex; gap: 14px; flex-wrap: wrap; }
.app-mspaint-dlg .mp-attr-info { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-bottom: 8px; }
.app-mspaint-dlg .mp-attr-size { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 6px; }
.app-mspaint-dlg .mp-attr-size .mp-field { grid-template-columns: auto 60px; margin: 0; }
.app-mspaint-dlg .mp-zoomcur { margin: 2px 0 8px; }
.app-mspaint-dlg .mp-zoomgrid { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 16px; }
.app-mspaint-dlg.mp-ask .custom-dlg { padding: 12px 11px 11px !important; }

/* Edit Colors */
.app-mspaint-dlg .mp-ec { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.app-mspaint-dlg .mp-ec-left { display: flex; flex-direction: column; gap: 4px; width: 216px; }
.app-mspaint-dlg .mp-ec-grid { display: grid; grid-template-columns: repeat(8, 22px); grid-auto-rows: 18px; gap: 5px 5px; margin-bottom: 8px; }
.app-mspaint-dlg .mp-ec-sw { width: 22px; height: 18px; padding: 0; border: 1px solid; border-color: #808080 #fff #fff #808080; box-shadow: inset 1px 1px #404040; cursor: var(--cur-arrow); border-radius: 0; }
.app-mspaint-dlg .mp-ec-sw.sel { outline: 1px solid #000; outline-offset: 2px; }
.app-mspaint-dlg .mp-ec-define { width: 100%; }
.app-mspaint-dlg .mp-ec-right[hidden] { display: none; }
.app-mspaint-dlg .mp-ec-right { display: flex; flex-direction: column; gap: 8px; }
.app-mspaint-dlg .mp-ec-pick { display: flex; gap: 8px; }
.app-mspaint-dlg .mp-ec-spec, .app-mspaint-dlg .mp-ec-lum { position: relative; border: 1px solid; border-color: #808080 #fff #fff #808080; touch-action: none; line-height: 0; cursor: var(--cur-cross); }
.app-mspaint-dlg .mp-ec-spec canvas { width: 176px; height: 150px; display: block; }
.app-mspaint-dlg .mp-ec-lum { margin-right: 10px; }
.app-mspaint-dlg .mp-ec-lum canvas { width: 10px; height: 150px; display: block; }
.app-mspaint-dlg .mp-ec-cross { position: absolute; width: 19px; height: 19px; margin: -10px 0 0 -10px; pointer-events: none;
  background: linear-gradient(#000, #000) center / 3px 19px no-repeat, linear-gradient(#000, #000) center / 19px 3px no-repeat;
  -webkit-mask: radial-gradient(circle, transparent 3px, #000 3.5px); mask: radial-gradient(circle, transparent 3px, #000 3.5px); }
.app-mspaint-dlg .mp-ec-arrow { position: absolute; left: 12px; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; border-right: 6px solid #000; border-left: 0; pointer-events: none; }
.app-mspaint-dlg .mp-ec-lower { display: flex; gap: 8px; align-items: flex-start; }
.app-mspaint-dlg .mp-ec-solidwrap { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.app-mspaint-dlg .mp-ec-solid { width: 48px; height: 32px; border: 1px solid; border-color: #808080 #fff #fff #808080; }
.app-mspaint-dlg .mp-ec-fields { display: grid; grid-template-columns: repeat(2, auto); gap: 3px 8px; }
.app-mspaint-dlg .mp-ec-f { display: grid; grid-template-columns: 32px 38px; align-items: center; gap: 4px; }
.app-mspaint-dlg .mp-ec-num { width: 38px; box-sizing: border-box; }

/* View Bitmap (Ctrl+F): full screen, black */
.app-mspaint-viewbitmap { position: fixed; inset: 0; z-index: 2147483000; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: var(--cur-arrow); }
.app-mspaint-viewbitmap canvas { flex: none; image-rendering: pixelated; }
.app-mspaint-dlg.mp-ask .mb-main { min-width: 250px; }