* {
	content:none
}
*,::after,::before {
	box-sizing:border-box
}
/* Enforce the HTML 'hidden' attribute — must beat .seg and other display rules */
[hidden] {
	display:none!important
}
:root {
	--bg:#f5f7fb;
	--panel:#ffffff;
	--ink:#1b1f2a;
	--muted:#4a5568;
	--accent:#4f46e5;
	--accent-2:#22c55e;
	--danger:#ef4444;
	--focus:#ffbf47;
	--success:#0B6E4F;
	--warning:#92400e;
	--active-ring:var(--accent);
	--active-ring-offset:2px;
	--active-ring-width:3px;
	--topbar-h:56px;
	--bottombar-h:72px;
	--side-w:76px;
	--radius:14px;
	--min-touch-target:44px;
	--vhfix:100vh;
	--tool-icon:40px;
	--tool-inner:36px;
	--transition-fast:0.15s ease;
	--transition-normal:0.25s ease;
	--transition-slow:0.35s ease;
	--z-dropdown:1000;
	--z-modal:2000;
	--z-notification:3000;
	--z-tooltip:4000;
	--dynamic-tool-size:56px;
	--dynamic-tool-icon:42px;
	--dynamic-tool-gap:12px;
	--tool-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--sd-current-color:#007aff;
	--grid-line:rgba(79,70,229,0.15);
	--grid-major-line:rgba(79,70,229,0.3)
}
@supports (height:100svh) {
	:root {
		--vhfix:100svh
	}
}
@supports (height:100dvh) {
	:root {
		--vhfix:min(100svh, 100dvh)
	}
}
@media (prefers-reduced-motion:reduce) {
	:root {
		--transition-fast:0.01ms;
		--transition-normal:0.01ms;
		--transition-slow:0.01ms;
		--tool-transition:none
	}
	*,::after,::before {
		animation-duration:0s!important;
		animation-iteration-count:1!important;
		transition-duration:0s!important
	}
}
body,html {
	height:100%;
	margin:0;
	padding:0;
	background:var(--bg);
	color:var(--ink);
	-webkit-text-size-adjust:100%;
	font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
	line-height:1.5;
	overflow-x:hidden
}
.sd-touch-capable body {
	overscroll-behavior:none;
	-webkit-tap-highlight-color:#fff0
}
.app {
	display:grid;
	grid-template-rows:var(--topbar-h) 1fr var(--bottombar-h);
	grid-template-columns:var(--side-w) 1fr;
	grid-template-areas:"topbar topbar" "left canvas" "bbar bbar";
	height:var(--vhfix);
	width:100%;
	contain:layout style paint;
	will-change:scroll-position;
	max-height:100vh;
	max-height:100dvh;
	overflow:hidden
}
@supports (-webkit-touch-callout:none) {
	.app {
		height:-webkit-fill-available;
		min-height:-webkit-fill-available
	}
	.left-panel {
		padding-bottom:max(8px,env(safe-area-inset-bottom,0px));
		touch-action:pan-y
	}
	.tools {
		-webkit-overflow-scrolling:touch
	}
}
.tools,.workspace {
	min-height:0;
	min-width:0;
	contain:layout style paint
}
.topbar {
	grid-area:topbar;
	position:sticky;
	top:env(safe-area-inset-top,0);
	z-index:3;
	display:grid;
	grid-template-columns:auto 1fr auto;
	align-items:center;
	gap:12px;
	padding:0 max(12px,env(safe-area-inset-left,0px)) 0 max(12px,env(safe-area-inset-right,0px));
	background:var(--panel);
	border-bottom:1px solid #e6e8ee;
	user-select:none;
	backdrop-filter:blur(8px)
}
.logo {
	font-weight:800;
	letter-spacing:.2px;
	font-size:18px;
	color:var(--ink)
}
.sysmsg {
	justify-self:center;
	color:var(--success);
	font-size:16px;
	min-height:1.2em;
	opacity:0;
	transform:translateY(-10px);
	transition:opacity var(--transition-normal),transform var(--transition-normal);
	text-align:center;
	max-width:300px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap
}
.sysmsg.show {
	opacity:1;
	transform:translateY(0)
}
.top-actions {
	display:flex;
	align-items:center;
	gap:8px
}
.left-panel {
	grid-area:left;
	padding:8px;
	background:var(--panel);
	border-right:1px solid #e6e8ee;
	overscroll-behavior:contain;
	display:flex;
	flex-direction:column;
	min-height:0;
	max-height:100%;
	overflow:hidden
}
.panel-header {
	display:none;
	margin-bottom:6px;
	padding:8px;
	font-weight:600;
	font-size:14px;
	color:var(--muted)
}
.tools {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	flex:1;
	overflow-y:auto;
	overflow-x:hidden;
	scrollbar-width:thin;
	scrollbar-color:var(--muted) #fff0;
	padding:var(--dynamic-tool-gap,12px) 0;
	gap:var(--dynamic-tool-gap,12px);
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
	overscroll-behavior:contain;
	min-height:0;
	max-height:100%
}
.tools:not(.needs-scroll) {
	justify-content:space-evenly
}
.tools::after {
	content:'';
	position:sticky;
	bottom:0;
	left:0;
	right:0;
	height:40px;
	background:linear-gradient(to top,var(--panel) 0,transparent 100%);
	pointer-events:none;
	opacity:0;
	transition:opacity .3s ease;
	margin-top:-40px
}
.tools.needs-scroll::before {
	content:'';
	position:sticky;
	top:0;
	left:0;
	right:0;
	height:20px;
	background:linear-gradient(to bottom,var(--panel) 0,transparent 100%);
	pointer-events:none;
	z-index:1;
	margin-bottom:-20px
}
.tools.needs-scroll::after {
	opacity:1;
	height:30px;
	margin-top:-30px
}
.tools::-webkit-scrollbar {
	width:6px
}
.tools::-webkit-scrollbar-track {
	background:#fff0
}
.tools::-webkit-scrollbar-thumb {
	background:var(--muted);
	border-radius:3px
}
.tools::-webkit-scrollbar-thumb:hover {
	background:var(--ink)
}
.icon-btn,.tool-btn {
	display:inline-grid;
	place-items:center;
	width:52px;
	height:52px;
	min-width:var(--min-touch-target);
	min-height:var(--min-touch-target);
	border-radius:12px;
	border:1px solid #e6e8ee;
	background:#fff;
	cursor:pointer;
	transition:all var(--transition-fast);
	user-select:none;
	touch-action:manipulation;
	will-change:transform,box-shadow;
	position:relative
}
.icon-btn:hover,.tool-btn:hover {
	transform:translateY(-2px);
	box-shadow:0 4px 12px rgb(0 0 0 / .15);
	border-color:var(--accent)
}
.tools .tool-btn {
	width:var(--dynamic-tool-size,50px);
	height:var(--dynamic-tool-size,50px);
	min-width:var(--dynamic-tool-size,50px);
	min-height:var(--dynamic-tool-size,50px);
	border-radius:calc(var(--dynamic-tool-size,50px) * .23);
	flex-shrink:0;
	padding:0;
	display:flex;
	align-items:center;
	justify-content:center
}
.tools .tool-btn.size-transition {
	transition:var(--tool-transition),transform var(--transition-fast),box-shadow var(--transition-fast)
}
.tools .tool-btn svg {
	width:var(--dynamic-tool-icon,36px);
	height:var(--dynamic-tool-icon,36px);
	transition:var(--tool-transition);
	flex-shrink:0;
	pointer-events:none
}
.tools .tool-btn:hover svg {
	transform:scale(1.1)
}
.icon-btn.primary,.tool-btn[aria-pressed=true] {
	outline:var(--active-ring-width) solid var(--active-ring);
	outline-offset:var(--active-ring-offset);
	border-color:#fff0;
	background:rgb(79 70 229 / .05);
	transform:translateY(-1px);
	box-shadow:0 2px 8px rgb(79 70 229 / .2)
}
#btnGridToggle[aria-pressed=true],#btnSnapToggle[aria-pressed=true] {
	outline:var(--active-ring-width) solid var(--accent);
	outline-offset:var(--active-ring-offset);
	border-color:#fff0;
	background:rgb(79 70 229 / .1)
}
.btn:focus-visible,.icon-btn:focus-visible,.tool-btn:focus-visible,input:focus-visible,select:focus-visible {
	outline:3px solid var(--focus);
	outline-offset:2px;
	position:relative;
	z-index:1
}
.btn:disabled,.icon-btn:disabled,.tool-btn:disabled {
	opacity:.5;
	cursor:not-allowed;
	transform:none!important;
	box-shadow:none!important
}
.icon-btn svg {
	width:28px;
	height:28px;
	transition:transform var(--transition-fast)
}
.icon-btn:focus-visible svg,.icon-btn:hover svg {
	transform:scale(1.06)
}
.tool-btn[data-tool=select] svg {
	color:#0891b2
}
.tool-btn[data-tool=rect] svg {
	color:#dc2626
}
.tool-btn[data-tool=circle] svg {
	color:#0284c7
}
.tool-btn[data-tool=ellipse] svg {
	color:#059669
}
.tool-btn[data-tool=shape] svg {
	color:#0284c7
}
.tool-btn[data-tool=polygon] svg {
	color:#7c3aed
}
.tool-btn[data-tool=pencil] svg {
	color:#ea580c
}
.tool-btn[data-tool=eraser] svg {
	color:#6b7280
}
.tool-btn[data-tool=fill] svg {
	color:#be185d
}
.tool-btn[data-tool=text] svg {
	color:#1d4ed8
}
.tool-btn[data-tool=undo] svg {
	color:#374151
}
.tool-btn[data-tool=history] svg {
	color:#374151
}
.tool-btn[data-tool=delete] svg {
	color:#dc2626
}
.tool-btn[data-tool=zoom] svg {
	color:#059669
}
.tool-btn[data-tool=grid] svg {
	color:#4f46e5
}
.tool-btn[data-tool=colours] svg {
	color:#9333ea
}
.tool-btn[data-tool=gradient] svg {
	color:#db2777
}

/* Circle/Ellipse pop-out submenu (matches School Draw behavior) */
.tool-submenu {
	position:fixed!important;
	display:flex;
	flex-direction:column;
	gap:4px;
	padding:4px;
	background:#fff;
	border:1px solid #e6e8ee;
	border-radius:12px;
	box-shadow:0 4px 16px rgb(0 0 0 / .12),0 2px 8px rgb(0 0 0 / .08);
	opacity:0;
	transform:translateX(-8px) scale(.95);
	pointer-events:none;
	transition:opacity .2s ease,transform .2s ease;
	z-index:1000
}
.tool-submenu.show {
	opacity:1;
	transform:translateX(0) scale(1);
	pointer-events:all
}
.tool-submenu-btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	border-radius:8px;
	border:1px solid transparent;
	background:#fff;
	cursor:pointer;
	transition:all .15s ease;
	position:relative
}
.tool-submenu-btn:hover {
	background:#f0f2f5;
	border-color:#e6e8ee
}
.tool-submenu-btn.active {
	background:#f0f9ff;
	border-color:#0ea5e9
}
.tool-submenu-btn.active::before {
	content:'';
	position:absolute;
	inset:-1px;
	border-radius:8px;
	padding:1px;
	background:linear-gradient(135deg,#0ea5e9,#06b6d4);
	-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
	mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
	-webkit-mask-composite:xor;
	mask-composite:exclude;
	opacity:.3
}
.tool-submenu-btn svg {
	width:20px;
	height:20px;
	color:#5b657a;
	transition:color .15s ease
}
.tool-submenu-btn:hover svg {
	color:var(--ink,#1f2937)
}
.tool-submenu-btn.active svg {
	color:#0ea5e9
}
@media (max-width:640px) {
	.tool-submenu {
		flex-direction:row
	}
	.tool-submenu.show {
		transform:translateX(0) scale(1)
	}
}
@media (prefers-color-scheme:dark) {
	.tool-submenu {
		background:#1f2937;
		border-color:#374151;
		box-shadow:0 4px 12px rgb(0 0 0 / .3)
	}
	.tool-submenu-btn {
		background:#1f2937
	}
	.tool-submenu-btn:hover {
		background:#374151;
		border-color:#4b5563
	}
	.tool-submenu-btn.active {
		background:#1e3a5f;
		border-color:#0ea5e9
	}
}
@media (prefers-contrast:high) {
	.tool-submenu {
		border-width:2px
	}
	.tool-submenu-btn.active {
		outline:2px solid currentColor
	}
}

/* ── History submenu (matches SchoolDrwFire look & feel) ───────────────────── */
.tool-btn[data-tool="history"] {
	position:relative;
	user-select:none;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation
}
.tool-btn[data-tool="history"].has-submenu::after {
	content:'';
	position:absolute;
	bottom:6px;
	right:6px;
	width:4px;
	height:4px;
	background:#5b657a;
	border-radius:50%;
	transition:all .2s ease;
	pointer-events:none
}
.tool-btn[data-tool="history"][aria-expanded="true"]::after {
	width:0;
	height:0;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
	border-top:4px solid #5b657a;
	background:transparent;
	border-radius:0
}
.tool-btn[data-tool="history"]:active {
	background:#e8eaf0;
	transform:scale(.95)
}
.tool-btn[data-tool="history"].is-disabled {
	opacity:.5
}

/* ── Eye dropper active state (matches SchoolDrwFire) ──────────────────────── */
#btnEyeDropper.is-active,
.tool-btn[data-tool="eyedropper"].is-active {
	background:#eff6ff;
	border-color:#3b82f6;
	box-shadow:0 0 0 2px rgb(59 130 246 / .25)
}
#btnEyeDropper.is-active svg,
.tool-btn[data-tool="eyedropper"].is-active svg {
	color:#3b82f6
}
/* ── end eye dropper ──────────────────────────────────────────────────────── */

.history-submenu {
	position:absolute;
	left:calc(100% + 8px);
	top:50%;
	transform:translateY(-50%) translateX(-8px) scale(.95);
	display:flex;
	flex-direction:column;
	gap:6px;
	padding:8px;
	background:#fff;
	border:1px solid #e6e8ee;
	border-radius:12px;
	box-shadow:0 4px 16px rgb(0 0 0 / .12),0 2px 8px rgb(0 0 0 / .08);
	opacity:0;
	pointer-events:none;
	transition:opacity .2s ease,transform .2s ease;
	z-index:10000;
	min-width:160px;
	user-select:none;
	touch-action:manipulation
}
.history-submenu-absolute {
	position:fixed !important;
	transform:translateY(-50%) !important
}
.history-submenu.show {
	opacity:1;
	transform:translateY(-50%) translateX(0) scale(1);
	pointer-events:all
}
.history-submenu-btn {
	display:inline-flex;
	align-items:center;
	justify-content:flex-start;
	gap:10px;
	padding:10px 12px;
	border-radius:10px;
	border:1.5px solid transparent;
	background:#fff;
	cursor:pointer;
	transition:all .15s ease;
	font-size:14px;
	font-family:system-ui,-apple-system,sans-serif;
	color:#1b1f2a;
	white-space:nowrap;
	min-height:44px;
	min-width:44px;
	user-select:none;
	-webkit-tap-highlight-color:transparent;
	touch-action:manipulation
}
.history-submenu-btn:hover:not(:disabled) {
	background:#f0f2f5;
	border-color:#e6e8ee;
	transform:translateX(2px)
}
.history-submenu-btn:active:not(:disabled) {
	transform:scale(.96);
	background:#e8eaf0;
	border-color:#d1d5db
}
.history-submenu-btn:disabled {
	opacity:.4;
	cursor:not-allowed;
	color:#9ca3af
}
.history-submenu-btn.has-content:not(:disabled) {
	background:#f0f9ff;
	border-color:#bae6fd;
	color:#0c4a6e
}
.history-submenu-btn.has-content:not(:disabled):hover {
	background:#e0f2fe;
	border-color:#7dd3fc
}
.history-submenu-btn svg {
	width:20px;
	height:20px;
	flex-shrink:0;
	color:currentColor;
	pointer-events:none
}
.history-submenu-btn .label {
	flex:1;
	text-align:left;
	font-weight:500;
	pointer-events:none
}
.history-submenu-btn .shortcut {
	font-size:11px;
	color:#6b7280;
	margin-left:auto;
	padding:3px 6px;
	background:#f3f4f6;
	border-radius:4px;
	font-family:'SF Mono','Monaco','Inconsolata','Consolas',monospace;
	flex-shrink:0;
	pointer-events:none
}
.history-submenu-btn:hover .shortcut {
	background:#e5e7eb
}
.history-submenu-btn.has-content .shortcut {
	background:#dbeafe;
	color:#1e40af
}
.history-submenu-btn:focus-visible {
	outline:3px solid #3b82f6;
	outline-offset:2px
}
@media (prefers-color-scheme:dark) {
	.history-submenu {
		background:#1f2937;
		border-color:#374151;
		box-shadow:0 4px 12px rgb(0 0 0 / .3)
	}
	.history-submenu-btn {
		background:#1f2937;
		color:#f3f4f6
	}
	.history-submenu-btn:hover:not(:disabled) {
		background:#374151;
		border-color:#4b5563
	}
	.history-submenu-btn.has-content:not(:disabled) {
		background:#1e3a5f;
		border-color:#1d4ed8;
		color:#bfdbfe
	}
	.history-submenu-btn .shortcut {
		background:#374151;
		color:#9ca3af
	}
}
/* ── end history submenu ──────────────────────────────────────────────────── */

/* ── Zoom tool context panel (matches SchoolDrwFire) ──────────────────────── */
.toolctx-zoom {
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:6px 10px;
	background:#fff;
	border:1px solid #e6e8ee;
	border-radius:10px;
	box-shadow:0 2px 8px rgb(0 0 0 / .08);
	min-height:var(--min-touch-target,44px)
}
.zoom-btn {
	width:32px;
	height:32px;
	display:grid;
	place-items:center;
	border:1px solid transparent;
	border-radius:8px;
	background:#f0f2f5;
	cursor:pointer;
	transition:all .15s ease;
	padding:0;
	color:#374151;
	flex-shrink:0
}
.zoom-btn svg {
	width:18px;
	height:18px;
	pointer-events:none;
	transition:transform .15s ease
}
.zoom-btn:hover:not(:disabled) {
	background:rgb(59 130 246 / .1);
	border-color:#e6e8ee;
	transform:translateY(-1px)
}
.zoom-btn:hover:not(:disabled) svg {
	transform:scale(1.1)
}
.zoom-btn:active:not(:disabled) {
	transform:scale(.96) translateY(0)
}
.zoom-btn:focus-visible {
	outline:3px solid #3b82f6;
	outline-offset:2px
}
.zoom-slider-wrap {
	display:flex;
	align-items:center;
	padding:0 4px
}
.zoom-slider {
	-webkit-appearance:none;
	appearance:none;
	width:240px;
	height:4px;
	border-radius:2px;
	background:#e6e8ee;
	outline:none;
	cursor:pointer
}
.zoom-slider::-webkit-slider-thumb {
	-webkit-appearance:none;
	appearance:none;
	width:14px;
	height:14px;
	border-radius:50%;
	background:#3b82f6;
	cursor:pointer;
	border:2px solid #fff;
	box-shadow:0 1px 3px rgb(0 0 0 / .2)
}
.zoom-slider::-moz-range-thumb {
	width:14px;
	height:14px;
	border-radius:50%;
	background:#3b82f6;
	cursor:pointer;
	border:2px solid #fff;
	box-shadow:0 1px 3px rgb(0 0 0 / .2)
}
.zoom-display {
	display:flex;
	align-items:center
}
.zoom-input {
	width:54px;
	padding:4px 6px;
	font-size:.8125rem;
	font-weight:600;
	font-variant-numeric:tabular-nums;
	text-align:center;
	border:1px solid #e6e8ee;
	border-radius:6px;
	background:#f0f2f5;
	color:#1b1f2a;
	cursor:pointer;
	transition:all .15s ease;
	outline:0
}
.zoom-input:hover:not(:focus) {
	background:#fff;
	border-color:#d1d5db
}
.zoom-input:focus {
	background:#fff;
	border-color:#3b82f6;
	box-shadow:0 0 0 3px rgb(59 130 246 / .1);
	cursor:text
}
.zoom-sep {
	width:1px;
	height:22px;
	background:#e6e8ee;
	margin:0 2px;
	flex-shrink:0;
	opacity:.7
}
@media (max-width:640px) {
	.zoom-slider-wrap { display:none }
	.zoom-input { width:46px }
}
@media (prefers-color-scheme:dark) {
	.toolctx-zoom {
		background:#1f2937;
		border-color:#374151
	}
	.zoom-btn {
		background:#374151;
		color:#f3f4f6
	}
	.zoom-btn:hover:not(:disabled) {
		background:rgb(59 130 246 / .2)
	}
	.zoom-slider {
		background:#374151
	}
	.zoom-input {
		background:#374151;
		border-color:#4b5563;
		color:#f3f4f6
	}
	.zoom-input:focus {
		background:#1f2937;
		border-color:#3b82f6
	}
	.zoom-sep { background:#4b5563 }
}
/* ── end zoom tool ────────────────────────────────────────────────────────── */

.icon-btn.loading,.tool-btn.loading {
	position:relative;
	overflow:hidden
}
.icon-btn.loading::after,.tool-btn.loading::after {
	content:'';
	position:absolute;
	top:0;
	left:-100%;
	width:100%;
	height:100%;
	background:linear-gradient(90deg,transparent,rgb(255 255 255 / .7),transparent);
	animation:loading-shimmer 1.5s infinite
}
@keyframes loading-shimmer {
	to {
		left:100%
	}
}
.workspace {
	grid-area:canvas;
	position:relative;
	overflow:hidden;
	background:var(--bg);
	contain:layout style paint;
	overscroll-behavior:contain;
	touch-action:none;
	-webkit-user-select:none;
	user-select:none
}
#canvasWrapper,
#gridCanvas,
#selectionCanvas,
.overlay-canvas {
	touch-action:none;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	user-select:none;
	/* Promote overlay canvases to their own compositor layer.
	   The selection canvas repaints every animation frame (marching ants) and
	   the grid canvas repaints on every zoom/pan.  Keeping them on separate
	   layers prevents those repaints from invalidating the main paint canvas. */
	will-change:transform
}
#paintCanvas {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	background:#fff;
	cursor:crosshair;
	display:block;
	/* Prevent the browser intercepting single-finger touches for scroll/pinch.
	   Without this, pointer events are NOT reliably delivered on iOS/Android
	   while the user is drawing — strokes break mid-gesture. */
	touch-action:none;
	/* Suppress the iOS long-press context menu (Save Image / Copy) on canvas */
	-webkit-touch-callout:none;
	/* Prevent accidental text/image selection during a drawing drag */
	-webkit-user-select:none;
	user-select:none
}
.overlay-canvas {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	pointer-events:none;
	display:block
}

/* Canvas wrapper — zoom CSS transform is applied to this element */
#canvasWrapper {
	position:absolute;
	inset:0;
	transform-origin:center center;
	will-change:transform;
	transition:transform .1s ease
}
.bottombar {
	grid-area:bbar;
	position:sticky;
	bottom:0;
	z-index:4;
	display:grid;
	grid-template-columns:1fr auto;
	align-items:center;
	gap:8px;
	padding:8px max(10px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-right,0px));
	background:var(--panel);
	border-top:1px solid #e6e8ee;
	backdrop-filter:blur(8px);
	overflow:visible
}
.context {
	display:flex;
	align-items:center;
	gap:8px;
	min-height:var(--min-touch-target);
	position:relative;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-behavior:smooth;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
	padding:2px 0
}
.context::-webkit-scrollbar {
	display:none
}
.context::after,.context::before {
	content:'';
	position:sticky;
	top:0;
	bottom:0;
	width:30px;
	pointer-events:none;
	z-index:1;
	opacity:0;
	transition:opacity .3s ease
}
.context::before {
	left:0;
	background:linear-gradient(to right,var(--panel) 0,transparent 100%);
	margin-right:-30px
}
.context::after {
	right:0;
	background:linear-gradient(to left,var(--panel) 0,transparent 100%);
	margin-left:-30px
}
.context.has-scroll-left::before {
	opacity:1
}
.context.has-scroll-right::after {
	opacity:1
}
.context>* {
	flex-shrink:0
}
.right-actions {
	display:flex;
	align-items:center;
	gap:8px;
	flex-shrink:0;
	overflow:visible
}
.btn {
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:8px 12px;
	border-radius:10px;
	border:1px solid #e6e8ee;
	background:#fff;
	cursor:pointer;
	font-size:14px;
	font-weight:500;
	color:var(--ink);
	text-decoration:none;
	min-height:var(--min-touch-target);
	transition:all var(--transition-fast);
	touch-action:manipulation
}
.btn:hover {
	background:var(--bg);
	border-color:var(--accent);
	transform:translateY(-1px)
}
.btn.primary {
	background:var(--accent);
	color:#fff;
	border-color:var(--accent)
}
.btn.primary:hover {
	background:#4338ca;
	border-color:#4338ca
}
.btn.danger {
	background:var(--danger);
	color:#fff;
	border-color:var(--danger)
}
.btn.danger:hover {
	background:#dc2626;
	border-color:#dc2626
}
.seg {
	display:inline-flex;
	align-items:center;
	gap:6px;
	border:1px solid #e6e8ee;
	border-radius:10px;
	padding:6px;
	background:#fff;
	min-height:var(--min-touch-target)
}
.seg>* {
	margin:0 2px
}
.toolctx-select {
	display:flex;
	align-items:center;
	gap:8px;
	padding:8px 12px;
	background:#fff;
	border:0;
	border-radius:8px;
	box-shadow:0 2px 8px rgb(0 0 0 / .1);
	flex-wrap:nowrap;
	overflow-x:auto;
	overflow-y:hidden
}
.toolctx-select>* {
	margin:0
}
.toolctx-select .iconbtn,.toolctx-select .icon-btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:36px;
	height:36px;
	min-width:36px;
	padding:0;
	border:0;
	background:transparent;
	border-radius:6px;
	cursor:pointer;
	transition:all .15s ease;
	color:#374151;
	flex-shrink:0
}
.toolctx-select .iconbtn:hover:not(:disabled),.toolctx-select .icon-btn:hover:not(:disabled) {
	background:#f3f4f6;
	color:#1f2937
}
.toolctx-select .iconbtn:active:not(:disabled),.toolctx-select .icon-btn:active:not(:disabled) {
	background:#e5e7eb;
	transform:scale(.95)
}
.toolctx-select .iconbtn:disabled,.toolctx-select .icon-btn:disabled {
	opacity:.4;
	cursor:not-allowed
}
.toolctx-select .iconbtn.active,.toolctx-select .icon-btn.active {
	background:#dbeafe;
	color:#3b82f6
}
.toolctx-select .iconbtn svg,.toolctx-select .icon-btn svg {
	width:20px;
	height:20px;
	fill:currentColor
}
.toolctx-select .sep {
	width:1px;
	height:24px;
	background:#e5e7eb;
	margin:0 4px;
	flex-shrink:0
}
.toolctx-select__size {
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:0 4px;
	white-space:nowrap
}
.toolctx-select__text {
	display:inline-flex;
	align-items:center;
	gap:6px;
	white-space:nowrap
}
.toolctx-select__textlabel {
	font-size:12px;
	font-weight:600;
	color:#6b7280
}
.toolctx-select__textfont {
	width:auto;
	min-width:124px;
	max-width:160px;
	text-align:left
}
.toolctx-select__textsize {
	width:74px;
	text-align:center
}
.toolctx-select #selDelete {
	color:#d92d20
}
.toolctx-select .iconbtn:focus-visible,.toolctx-select .icon-btn:focus-visible {
	outline:2px solid #3b82f6;
	outline-offset:2px
}
.label {
	font-size:13px;
	color:var(--muted);
	font-weight:500
}
.num {
	width:68px;
	padding:6px;
	border-radius:8px;
	border:1px solid #d9dfea;
	font-size:14px;
	text-align:center;
	background:#fff;
	min-height:var(--min-touch-target)
}
.num:focus-visible {
	border-color:var(--accent);
	outline:3px solid var(--focus);
	outline-offset:2px;
	box-shadow:0 0 0 2px rgb(79 70 229 / .2)
}
.slider {
	width:clamp(160px,24vw,360px);
	height:var(--min-touch-target)
}
.left-panel[data-collapsed=true] .tools {
	display:none
}
.left-panel[data-collapsed=true] .panel-header {
	display:block
}
@media (min-width:1920px) {
	:root {
		--side-w:84px;
		--dynamic-tool-size:64px;
		--dynamic-tool-icon:48px;
		--dynamic-tool-gap:16px
	}
	.tools {
		padding:20px 0
	}
}
@media (min-width:1441px) and (max-width:1919px) {
	:root {
		--side-w:80px;
		--dynamic-tool-size:60px;
		--dynamic-tool-icon:44px;
		--dynamic-tool-gap:14px
	}
	.tools {
		padding:18px 0
	}
}
@media (min-width:1025px) and (max-width:1440px) {
	:root {
		--side-w:76px;
		--dynamic-tool-size:56px;
		--dynamic-tool-icon:42px;
		--dynamic-tool-gap:12px
	}
	.tools {
		padding:16px 0
	}
}
@media (max-width:1024px) and (min-width:821px) {
	:root {
		--side-w:68px;
		--dynamic-tool-size:42px;
		--dynamic-tool-icon:32px;
		--dynamic-tool-gap:6px
	}
	.tools {
		padding:8px 0
	}
}
@media (max-width:820px) and (min-width:641px) {
	:root {
		--side-w:64px;
		--dynamic-tool-size:38px;
		--dynamic-tool-icon:30px;
		--dynamic-tool-gap:5px
	}
	.tools {
		padding:6px 0
	}
}
@media (max-width:1024px) and (orientation:landscape) and (max-height:768px) {
	:root {
		--side-w:60px;
		--topbar-h:50px;
		--bottombar-h:60px;
		--dynamic-tool-size:34px;
		--dynamic-tool-icon:28px;
		--dynamic-tool-gap:3px
	}
	.tools {
		padding:3px 0
	}
}
@media (max-width:640px) and (min-width:401px) {
	:root {
		--side-w:58px;
		--dynamic-tool-size:36px;
		--dynamic-tool-icon:28px;
		--dynamic-tool-gap:4px
	}
	.tools {
		padding:5px 0
	}
}
@media (max-width:400px) and (min-width:361px) {
	:root {
		--side-w:54px;
		--dynamic-tool-size:34px;
		--dynamic-tool-icon:27px;
		--dynamic-tool-gap:3px
	}
	.tools {
		padding:4px 0
	}
}
@media (max-width:360px) {
	:root {
		--side-w:52px;
		--dynamic-tool-size:32px;
		--dynamic-tool-icon:26px;
		--dynamic-tool-gap:2px
	}
	.tools {
		padding:3px 0
	}
	.topbar {
		padding:0 6px
	}
}
@media (max-height:500px) and (orientation:landscape) and (max-width:900px) {
	:root {
		--side-w:56px;
		--topbar-h:48px;
		--bottombar-h:56px;
		--dynamic-tool-size:32px;
		--dynamic-tool-icon:26px;
		--dynamic-tool-gap:2px
	}
	.tools {
		padding:2px 0;
		overflow-y:auto!important
	}
}
@media (min-height:1080px) and (min-width:1025px) {
	:root {
		--dynamic-tool-size:54px;
		--dynamic-tool-icon:40px
	}
}
@media (max-width:920px) {
	.panel-header {
		display:block
	}
	.left-panel[data-collapsed=true] .tools {
		display:none
	}
	.bottombar {
		grid-template-columns:1fr auto;
		padding:6px 8px max(6px,env(safe-area-inset-bottom,0px)) 8px
	}
	.context {
		gap:6px;
		max-width:calc(100vw - 200px)
	}
	.context::after,.context::before {
		width:40px
	}
}
@media (max-width:640px) {
	.topbar {
		padding:0 8px;
		gap:8px
	}
	.logo {
		font-size:16px
	}
	.sysmsg {
		font-size:12px;
		max-width:200px
	}
	.context {
		max-width:calc(100vw - 150px)
	}
	.context::after,.context::before {
		width:50px
	}
}
.sr-only {
	position:absolute!important;
	width:1px!important;
	height:1px!important;
	margin:-1px!important;
	padding:0!important;
	overflow:hidden!important;
	clip:rect(0 0 0 0)!important;
	white-space:nowrap!important;
	border:0!important
}
.skip-link {
	position:absolute;
	top:-40px;
	left:6px;
	background:var(--accent);
	color:#fff;
	padding:8px;
	text-decoration:none;
	border-radius:4px;
	z-index:var(--z-tooltip)
}
.skip-link:focus {
	top:6px
}
@media (prefers-contrast:high) {
	:root {
		--bg:#ffffff;
		--panel:#ffffff;
		--ink:#000000;
		--muted:#666666;
		--accent:#0000ff;
		--focus:#ffff00
	}
	.btn,.icon-btn,.tool-btn {
		border-width:2px
	}
	.icon-btn.primary,.tool-btn[aria-pressed=true] {
		outline-width:4px
	}
	.tools .tool-btn {
		min-width:44px;
		min-height:44px
	}
}
@media (prefers-color-scheme:dark) {
	:root {
		--bg:#1a1a1a;
		--panel:#2d2d2d;
		--ink:#ffffff;
		--muted:#a0a0a0;
		--accent:#6366f1;
		--focus:#fbbf24
	}
	.btn,.icon-btn,.num,.seg,.tool-btn {
		background:var(--panel);
		border-color:#404040;
		color:var(--ink)
	}
	.btn:hover,.icon-btn:hover,.tool-btn:hover {
		background:#404040
	}
	.tools.needs-scroll::after,.tools.needs-scroll::before {
		background:linear-gradient(to bottom,var(--panel) 0,transparent 100%)
	}
	.tools.needs-scroll::after {
		background:linear-gradient(to top,var(--panel) 0,transparent 100%)
	}
	.context::before {
		background:linear-gradient(to right,var(--panel) 0,transparent 100%)
	}
	.context::after {
		background:linear-gradient(to left,var(--panel) 0,transparent 100%)
	}
}
.toolbar.file-actions {
	display:inline-flex;
	gap:8px;
	align-items:center;
	overflow:visible
}
.toolbar.file-actions .iconbtn {
	width:50px;
	height:50px;
	border-radius:12px;
	border:1px solid #e6e8ee;
	background:#fff;
	cursor:pointer;
	display:inline-grid;
	place-items:center;
	transition:all var(--transition-fast);
	min-width:var(--min-touch-target);
	min-height:var(--min-touch-target)
}
.toolbar.file-actions .iconbtn:hover {
	transform:translateY(-2px);
	box-shadow:0 4px 12px rgb(0 0 0 / .15);
	border-color:var(--accent)
}
.toolbar.file-actions .iconbtn svg {
	width:28px;
	height:28px
}
.sd-dialog {
	padding:0;
	border:none;
	border-radius:24px;
	background:#fff0;
	max-width:min(560px,95vw);
	width:90vw;
	overflow:visible;
	max-height:90vh;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
}
.sd-dialog::backdrop {
	background:rgb(0 0 0 / .5);
	backdrop-filter:blur(4px);
	pointer-events:auto
}
.sd-dialog {
	animation:modalSlideIn var(--transition-normal)
}
@keyframes modalSlideIn {
	from {
		opacity:0;
		transform:translate(-50%,-60%)
	}
	to {
		opacity:1;
		transform:translate(-50%,-50%)
	}
}
.sd-modal-header {
	background:linear-gradient(135deg,#7c3aed 0,#a78bfa 50%,#c4b5fd 100%);
	padding:32px 24px 24px;
	border-radius:24px 24px 0 0;
	position:relative;
	color:#fff;
	text-align:center;
	text-shadow:0 2px 4px rgb(0 0 0 / .3)
}
.sd-modal-icon {
	font-size:48px;
	margin-bottom:16px;
	display:inline-block;
	filter:drop-shadow(0 4px 6px rgb(0 0 0 / .2));
	user-select:none
}
.sd-modal-title {
	font-size:clamp(24px, 5vw, 32px);
	font-weight:700;
	margin:0 0 8px 0;
	color:#fff;
	text-shadow:0 2px 4px rgb(0 0 0 / .3)
}
.sd-modal-subtitle {
	font-size:clamp(14px, 3vw, 18px);
	font-weight:400;
	color:rgb(255 255 255 / .95);
	margin:0
}
.sd-modal-close {
	position:absolute;
	top:20px;
	right:20px;
	width:var(--min-touch-target);
	height:var(--min-touch-target);
	border-radius:50%;
	background:rgb(255 255 255 / .3);
	border:none;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all var(--transition-fast);
	z-index:1
}
.sd-modal-close:focus-visible,.sd-modal-close:hover {
	background:rgb(255 255 255 / .4);
	transform:scale(1.1);
	outline:2px solid var(--focus);
	outline-offset:2px
}
.sd-modal-close svg {
	width:24px;
	height:24px;
	stroke:#fff;
	stroke-width:3
}
.sd-modal-body {
	background:#f8f9fa;
	padding:32px 24px;
	border-radius:0 0 24px 24px;
	max-height:60vh;
	overflow-y:auto;
	overflow-x:hidden;
	scroll-behavior:smooth;
	overscroll-behavior:contain
}
.sd-modal-body::-webkit-scrollbar {
	width:8px
}
.sd-modal-body::-webkit-scrollbar-track {
	background:#f1f5f9
}
.sd-modal-body::-webkit-scrollbar-thumb {
	background:#cbd5e1;
	border-radius:4px
}
.sd-modal-body::-webkit-scrollbar-thumb:hover {
	background:#94a3b8
}
.sd-option-card {
	background:#fff;
	border-radius:20px;
	padding:20px;
	margin-bottom:16px;
	border:2px solid #e5e7eb;
	cursor:pointer;
	transition:all var(--transition-normal);
	display:flex;
	align-items:center;
	gap:20px;
	position:relative;
	overflow:hidden;
	min-height:var(--min-touch-target)
}
.sd-option-card:hover:not(.disabled) {
	border-color:#3b82f6;
	transform:translateY(-2px);
	box-shadow:0 8px 16px rgb(0 0 0 / .08)
}
.sd-option-card:focus-within {
	border-color:var(--accent);
	outline:2px solid var(--focus);
	outline-offset:2px
}
.sd-option-card.disabled {
	opacity:.6;
	cursor:not-allowed;
	background:#f9fafb
}
.sd-option-card.disabled:hover {
	transform:none;
	border-color:#e5e7eb;
	box-shadow:none
}
.sd-btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:16px 40px;
	border-radius:12px;
	font-size:16px;
	font-weight:600;
	cursor:pointer;
	transition:all .2s;
	border:none;
	min-width:160px
}
.sd-btn-primary {
	background:linear-gradient(135deg,#3b82f6 0,#1d4ed8 100%);
	color:#fff;
	border:2px solid #fff0
}
.sd-btn-primary:hover {
	background:linear-gradient(135deg,#1d4ed8 0,#1e40af 100%);
	transform:translateY(-2px);
	box-shadow:0 6px 16px rgb(59 130 246 / .3)
}
.sd-btn-primary:active {
	transform:translateY(0);
	box-shadow:0 2px 8px rgb(59 130 246 / .3)
}
.sd-btn:focus-visible {
	outline:3px solid #60a5fa;
	outline-offset:2px
}
.sd-btn.loading {
	position:relative;
	color:#fff0
}
.sd-btn.loading::after {
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:20px;
	height:20px;
	border:2px solid #fff0;
	border-top:2px solid currentColor;
	border-radius:50%;
	animation:spin 1s linear infinite
}
@keyframes spin {
	0% {
		transform:translate(-50%,-50%) rotate(0)
	}
	100% {
		transform:translate(-50%,-50%) rotate(360deg)
	}
}
@media print {
	.bottombar,.left-panel,.topbar {
		display:none
	}
	.app {
		grid-template-rows:1fr;
		grid-template-columns:1fr;
		grid-template-areas:"canvas"
	}
	.workspace {
		position:static;
		overflow:visible
	}
}
.btn,.icon-btn,.sd-option-card,.tool-btn {
	backface-visibility:hidden;
	perspective:1000px
}
@media (hover:none) and (pointer:coarse) {
	.tool-btn:active {
		transform:scale(.95)
	}
	.tools .tool-btn {
		min-width:44px;
		min-height:44px;
		-webkit-tap-highlight-color:rgba(79,70,229,0.1)
	}
	.context {
		-webkit-overflow-scrolling:touch;
		scroll-padding:0 20px
	}
}
.stc-btn,.stc-close-btn,.stgd-btn,.stgd-close,.stl-btn,.stl-close-btn,.stod-btn,.stod-close {
	touch-action:manipulation;
	-webkit-tap-highlight-color:#fff0
}
@media (hover:none) and (pointer:coarse) {
	.stc-btn:active::after,.stgd-btn:active::after,.stl-btn:active::after,.stod-btn:active::after {
		content:'';
		position:absolute;
		top:50%;
		left:50%;
		width:100px;
		height:100px;
		background:rgb(255 255 255 / .5);
		border-radius:50%;
		transform:translate(-50%,-50%) scale(0);
		animation:ripple .6s ease-out
	}
	@keyframes ripple {
		to {
			transform:translate(-50%,-50%) scale(2);
			opacity:0
		}
	}
}
.stc-body,.stgd-body,.stl-body,.stod-body {
	-webkit-overflow-scrolling:touch;
	overscroll-behavior:contain
}
.stc-modal,.stgd-modal,.stl-modal,.stod-modal {
	-webkit-user-select:none;
	user-select:none
}
.stc-name-input,.stgd-name-input,.stl-name-input,.stod-name-input {
	-webkit-user-select:text;
	user-select:text
}
@media (max-width:640px) {
	.stc-modal-content,.stgd-container,.stl-modal,.stod-container {
		width:100%;
		max-width:100%;
		height:100%;
		max-height:100%;
		border-radius:0
	}
	.stc-close-btn,.stgd-close,.stl-close-btn,.stod-close {
		position:fixed;
		top:10px;
		right:10px;
		z-index:100
	}
}
@media (hover:none) and (pointer:coarse) {
	.stc-name-input:focus,.stgd-name-input:focus,.stl-name-input:focus,.stod-name-input:focus {
		font-size:16px;
		border-width:3px
	}
	.num:focus {
		font-size:16px
	}
	select:focus,textarea:focus {
		font-size:16px
	}
}
.menu-toggle {
	display:none;
	width:50px;
	height:50px;
	min-width:var(--min-touch-target);
	min-height:var(--min-touch-target);
	border-radius:12px;
	border:1px solid #e6e8ee;
	background:#fff;
	cursor:pointer;
	position:relative;
	transition:all var(--transition-fast);
	padding:0;
	align-items:center;
	justify-content:center
}
.menu-toggle:hover {
	transform:translateY(-2px);
	box-shadow:0 4px 12px rgb(0 0 0 / .15);
	border-color:var(--accent)
}
.menu-toggle:focus-visible {
	outline:3px solid var(--focus);
	outline-offset:2px
}
.menu-toggle svg {
	width:24px;
	height:24px;
	pointer-events:none
}
.menu-dropdown {
	position:absolute;
	bottom:calc(100%+8px);
	right:0;
	background:#fff;
	border-radius:16px;
	box-shadow:0 8px 32px rgb(0 0 0 / .15);
	border:1px solid #e5e7eb;
	padding:8px;
	min-width:200px;
	max-width:280px;
	z-index:10000;
	display:none;
	opacity:0;
	visibility:hidden;
	transform:translateY(10px);
	transition:opacity var(--transition-fast),transform var(--transition-fast),visibility 0s var(--transition-fast)
}
.menu-dropdown.is-open,.menu-dropdown.show {
	display:block!important;
	opacity:1!important;
	visibility:visible!important;
	transform:translateY(0)!important;
	transition:opacity var(--transition-fast),transform var(--transition-fast)
}
.menu-dropdown::after {
	content:'';
	position:absolute;
	bottom:-8px;
	right:20px;
	width:16px;
	height:16px;
	background:#fff;
	border-right:1px solid #e5e7eb;
	border-bottom:1px solid #e5e7eb;
	transform:rotate(45deg);
	z-index:-1
}
.menu-divider {
	height:1px;
	background:#e5e7eb;
	margin:4px 0
}
@media (max-width:1024px) {
	.file-actions .iconbtn:not(#btnPrintPreview):not(#btnPrint) {
		display:none!important
	}
	.file-actions #btnPrint,.file-actions #btnPrintPreview {
		display:none!important
	}
	.file-actions-menu {
		display:inline-flex!important
	}
}
@media (min-width:1025px) {
	.file-actions-menu {
		display:none!important
	}
}
.file-actions-menu {
	position:relative;
	display:inline-flex
}
.file-actions-menu .menu-dropdown {
	pointer-events:auto!important
}
.context-tools-menu {
	position:relative;
	margin-left:auto
}
.context-tools-menu .menu-toggle {
	background:linear-gradient(135deg,#a78bfa 0,#c4b5fd 100%);
	border-color:#7c3aed
}
.context-tools-menu .menu-toggle svg {
	color:#fff
}
@media (prefers-color-scheme:dark) {
	.menu-dropdown {
		background:var(--panel);
		border-color:#404040
	}
	.menu-dropdown::after {
		background:var(--panel);
		border-color:#404040
	}
	.menu-divider {
		background:#404040
	}
}
#contextMenuToggle,#fileMenuToggle {
	position:relative!important;
	z-index:1000!important;
	pointer-events:auto!important;
	cursor:pointer!important
}
.menu-item {
	display:flex!important;
	align-items:center;
	gap:12px;
	padding:12px 16px;
	border:none;
	background:0 0;
	width:100%;
	text-align:left;
	cursor:pointer!important;
	pointer-events:auto!important;
	transition:background .15s ease;
	font-size:15px;
	color:var(--ink);
	border-radius:8px;
	position:relative;
	z-index:1
}
.menu-item>svg {
	width:20px!important;
	height:20px!important;
	flex-shrink:0;
	pointer-events:none!important
}
.menu-item:hover {
	background:rgba(0,0,0,.05)
}
.menu-item:active {
	background:rgba(0,0,0,.1);
	transform:scale(.98)
}
.menu-icon-wrapper {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:24px;
	height:24px;
	flex-shrink:0;
	pointer-events:none!important
}
.menu-icon-wrapper svg {
	width:20px!important;
	height:20px!important;
	pointer-events:none!important;
	fill:currentColor;
	stroke:currentColor
}
.menu-item-text {
	flex:1;
	pointer-events:none!important;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis
}
#menuBackdrop {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,.3);
	z-index:9999;
	display:none;
	opacity:0;
	transition:opacity .2s ease
}
#menuBackdrop.is-visible,#menuBackdrop.show {
	display:block!important;
	opacity:1
}
@media (hover:none) and (pointer:coarse) {
	.menu-item {
		min-height:48px;
		padding:14px 16px
	}
	.menu-icon-wrapper {
		width:28px;
		height:28px
	}
	.menu-icon-wrapper svg {
		width:24px!important;
		height:24px!important
	}
}
@media (max-width:1024px) {
	#contextMenuToggle,#fileMenuToggle {
		display:inline-flex!important
	}
}
@media (prefers-color-scheme:dark) {
	.menu-item:hover {
		background:rgba(255,255,255,.1)
	}
	.menu-item:active {
		background:rgba(255,255,255,.15)
	}
}
:is(body .toolbar.file-actions,body) button:is(#btnSave,#btnOpen,#btnImport,#btnPrintPreview,#btnPrint).auth-disabled {
	opacity:.4!important;
	filter:grayscale(100%) brightness(.7)!important;
	pointer-events:auto!important;
	cursor:pointer!important;
	background-color:#e5e5e5!important;
	border-color:#d0d0d0!important;
	color:#888!important;
	position:relative!important;
	transition:all .2s ease!important
}
:is(body .toolbar.file-actions,body) button:is(#btnSave,#btnOpen,#btnImport,#btnPrintPreview,#btnPrint).auth-disabled::before {
	content:''!important;
	position:absolute!important;
	top:-2px!important;
	right:-2px!important;
	background-color:#ef4444!important;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")!important;
	background-repeat:no-repeat!important;
	background-size:10px 10px!important;
	background-position:center!important;
	border-radius:50%!important;
	width:16px!important;
	height:16px!important;
	display:block!important;
	border:1px solid #fff!important;
	z-index:10!important
}
:is(body .toolbar.file-actions,body) button:is(#btnSave,#btnOpen,#btnImport,#btnPrintPreview,#btnPrint):not(.auth-disabled):hover {
	transform:translateY(-2px)!important;
	box-shadow:0 4px 12px rgba(0,0,0,.15)!important
}
.menu-item[data-action=import].auth-disabled,.menu-item[data-action=open].auth-disabled,.menu-item[data-action=printPreview].auth-disabled,.menu-item[data-action=print].auth-disabled,.menu-item[data-action=save].auth-disabled {
	opacity:.5!important;
	filter:grayscale(100%)!important;
	pointer-events:auto!important;
	cursor:pointer!important;
	position:relative!important
}
.menu-item[data-action=import].auth-disabled::after,.menu-item[data-action=open].auth-disabled::after,.menu-item[data-action=printPreview].auth-disabled::after,.menu-item[data-action=print].auth-disabled::after,.menu-item[data-action=save].auth-disabled::after {
	content:'';
	display:inline-block;
	margin-left:auto;
	width:14px;
	height:14px;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
	opacity:.7;
	vertical-align:middle;
	flex-shrink:0
}
:is(body .toolbar.file-actions,body) button:is(#btnSave,#btnOpen,#btnImport,#btnPrintPreview,#btnPrint).auth-disabled:focus {
	outline:2px solid #ef4444!important;
	outline-offset:2px!important
}
:is(body .toolbar.file-actions,body) button:is(#btnSave,#btnOpen,#btnImport,#btnPrintPreview,#btnPrint).auth-disabled * {
	pointer-events:none!important
}
:is(body .toolbar.file-actions,body) button:is(#btnSave,#btnOpen,#btnImport,#btnPrintPreview,#btnPrint).auth-disabled[title]:hover::after {
	content:attr(title);
	position:absolute;
	bottom:-30px;
	left:50%;
	transform:translateX(-50%);
	background:rgba(0,0,0,.8);
	color:#fff;
	padding:4px 8px;
	border-radius:4px;
	font-size:12px;
	white-space:nowrap;
	z-index:1000
}
#btnPrint.btn-disabled,#btnSave.btn-disabled {
	opacity:.3!important;
	filter:grayscale(100%)!important;
	border:3px solid red!important;
	pointer-events:none!important
}
.svg-sprite {
	position:absolute;
	width:0;
	height:0;
	overflow:hidden
}

/* ═══════════════════════════════════════════════════════════════
   GRADIENT OVERLAY — #sdGradientOverlay
   A fixed full-screen backdrop that slides in when the gradient
   tool is activated.  Hidden by default via visibility:hidden.
═══════════════════════════════════════════════════════════════ */
.sd-btn {
	appearance:none;
	border:1px solid #e3e5e8;
	background:#fff;
	color:#222;
	border-radius:10px;
	padding:8px 12px;
	font-weight:600;
	cursor:pointer;
	transition:all .2s;
	-webkit-user-select:none;
	user-select:none;
	text-align:center
}
.sd-btn:hover:not(:disabled) {
	background:#f6f7f9;
	transform:translateY(-1px);
	box-shadow:0 2px 4px rgb(0 0 0 / .06)
}
.sd-btn:active:not(:disabled) {
	transform:translateY(0)
}
.sd-btn:focus-visible {
	outline:2px solid #3b82f6;
	outline-offset:2px
}
.sd-btn.primary {
	background:#3b82f6;
	color:#fff;
	border-color:#3b82f6
}
.sd-btn.primary:hover:not(:disabled) {
	background:#2563eb;
	border-color:#2563eb
}
.sd-btn:disabled {
	opacity:.5;
	cursor:not-allowed;
	transform:none
}
.spacer {
	flex:1
}

/* School Draw style colour picker modal */
#sdColorPickerOverlay {
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff0;
	z-index:9999;
	visibility:hidden;
	opacity:0;
	transition:opacity .2s ease-out,background .2s ease-out,visibility .2s;
	pointer-events:none
}
#sdColorPickerOverlay.active {
	visibility:visible;
	opacity:1;
	background:rgb(0 0 0 / .35);
	pointer-events:auto
}
.sd-cp-panel {
	width:min(92vw,920px);
	background:#fff;
	border-radius:16px;
	box-shadow:0 24px 80px rgb(0 0 0 / .25);
	overflow:hidden;
	display:grid;
	grid-template-rows:auto 1fr auto;
	margin:auto;
	position:relative;
	transform:scale(.95);
	opacity:0;
	transition:transform .3s ease-out,opacity .3s ease-out
}
#sdColorPickerOverlay.active .sd-cp-panel {
	transform:scale(1);
	opacity:1
}
.sd-cp-header {
	display:flex;
	align-items:center;
	gap:12px;
	padding:14px 16px;
	border-bottom:1px solid #eee;
	font-weight:600
}
.sd-cp-header button {
	appearance:none;
	border:0;
	background:#fff0;
	width:44px;
	height:44px;
	border-radius:8px;
	display:grid;
	place-items:center;
	cursor:pointer;
	transition:all .2s ease
}
.sd-cp-header button:hover {
	background:#f1f3f5
}
.sd-cp-header button:focus-visible {
	outline:2px solid #3b82f6;
	outline-offset:-2px
}
.sd-cp-body {
	padding:16px;
	display:grid;
	gap:14px;
	overflow-y:auto;
	overflow-x:hidden;
	overscroll-behavior:contain
}
.sd-cp-body::-webkit-scrollbar {
	width:8px
}
.sd-cp-body::-webkit-scrollbar-track {
	background:#f3f4f6;
	border-radius:4px
}
.sd-cp-body::-webkit-scrollbar-thumb {
	background:#d1d5db;
	border-radius:4px
}
.sd-cp-body::-webkit-scrollbar-thumb:hover {
	background:#9ca3af
}
.sd-cp-grid {
	--cols:18;
	display:grid;
	grid-template-columns:repeat(var(--cols),1fr);
	gap:6px;
	-webkit-user-select:none;
	user-select:none
}
.sd-cp-swatch {
	position:relative;
	width:100%;
	aspect-ratio:1/1;
	border-radius:6px;
	box-shadow:inset 0 0 0 1px rgb(0 0 0 / .08);
	cursor:pointer;
	transition:all .15s ease
}
.sd-cp-swatch:hover {
	transform:scale(1.15);
	box-shadow:0 4px 8px rgb(0 0 0 / .15);
	z-index:1
}
.sd-cp-swatch:active {
	transform:scale(1.05)
}
.sd-cp-swatch:focus-visible {
	outline:2px solid #06f;
	outline-offset:2px
}
.sd-cp-readout {
	display:grid;
	grid-template-columns:auto 1fr;
	align-items:center;
	gap:12px
}
.sd-cp-chip {
	width:44px;
	height:28px;
	border-radius:6px;
	box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1)
}
.sd-cp-lines {
	display:flex;
	flex-wrap:wrap;
	gap:12px 18px;
	font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
	font-size:13px;
	color:#333
}
.sd-cp-footer {
	padding:12px 16px;
	border-top:1px solid #eee;
	display:flex;
	justify-content:flex-end;
	gap:8px
}
@media (pointer:coarse) {
	.sd-cp-swatch {
		min-width:44px!important;
		min-height:44px!important;
		cursor:pointer;
		-webkit-tap-highlight-color:rgba(0,0,0,0.1)
	}
	.sd-cp-swatch:active {
		transform:scale(.95);
		transition:transform .1s ease
	}
	.sd-cp-grid {
		scroll-behavior:smooth
	}
	#sd-cp-close {
		width:48px;
		height:48px
	}
	#sd-cp-cancel {
		min-height:48px;
		padding:12px 24px
	}
}
#sdGradientOverlay {
	position:fixed;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff0;
	-webkit-backdrop-filter:blur(0);
	backdrop-filter:blur(0);
	z-index:9999;
	visibility:hidden;
	opacity:0;
	transition:opacity .2s ease-out,background .2s ease-out,visibility .2s,backdrop-filter .2s ease-out,-webkit-backdrop-filter .2s ease-out;
	pointer-events:none
}
#sdGradientOverlay.active {
	visibility:visible;
	opacity:1;
	background:rgb(0 0 0 / .35);
	-webkit-backdrop-filter:blur(2px);
	backdrop-filter:blur(2px);
	pointer-events:auto
}
.sd-grad-panel {
	width:min(92vw,480px);
	max-height:90vh;
	background:#fff;
	border-radius:16px;
	box-shadow:0 24px 80px rgb(0 0 0 / .25);
	overflow:hidden;
	display:grid;
	grid-template-rows:auto 1fr auto;
	margin:auto;
	position:relative;
	transform:scale(.95);
	opacity:0;
	transition:transform .3s ease-out,opacity .3s ease-out
}
#sdGradientOverlay.active .sd-grad-panel {
	transform:scale(1);
	opacity:1
}
.sd-grad-header {
	display:flex;
	align-items:center;
	gap:12px;
	padding:14px 16px;
	border-bottom:1px solid #e5e7eb;
	background:#fafafa;
	-webkit-user-select:none;
	user-select:none
}
.sd-grad-title {
	margin:0;
	font-weight:600;
	font-size:16px;
	line-height:1.2;
	color:inherit
}
.sd-grad-header button {
	appearance:none;
	border:0;
	background:#fff0;
	width:44px;
	height:44px;
	border-radius:8px;
	display:grid;
	place-items:center;
	cursor:pointer;
	transition:all .2s ease
}
.sd-grad-header button:hover {
	background:#e5e7eb
}
.sd-grad-header button:focus-visible {
	outline:2px solid #3b82f6;
	outline-offset:-2px
}
.sd-grad-body {
	padding:20px;
	display:flex;
	flex-direction:column;
	gap:20px;
	overflow-y:auto;
	overscroll-behavior:contain
}
.sd-grad-body::-webkit-scrollbar {
	width:8px
}
.sd-grad-body::-webkit-scrollbar-track {
	background:#f3f4f6;
	border-radius:4px
}
.sd-grad-body::-webkit-scrollbar-thumb {
	background:#d1d5db;
	border-radius:4px
}
.sd-grad-body::-webkit-scrollbar-thumb:hover {
	background:#9ca3af
}
.sd-grad-preview {
	width:100%;
	height:60px;
	border-radius:12px;
	box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1);
	background:linear-gradient(to right,#3b82f6,#ef4444);
	transition:background .3s ease;
	position:relative;
	overflow:hidden
}
.sd-grad-preview::after {
	content:'';
	position:absolute;
	top:0;
	left:-100%;
	width:100%;
	height:100%;
	background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);
	animation:shimmer 3s infinite
}
.sd-grad-colors {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px
}
.sd-grad-color-box {
	display:flex;
	flex-direction:column;
	gap:8px
}
.sd-grad-color-label {
	font-size:13px;
	font-weight:600;
	color:#374151;
	text-transform:uppercase;
	letter-spacing:.5px;
	-webkit-user-select:none;
	user-select:none
}
.sd-grad-color-select {
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px;
	border:1px solid #e5e7eb;
	border-radius:10px;
	background:#fff;
	cursor:pointer;
	transition:all .2s;
	position:relative
}
.sd-grad-color-select:hover {
	border-color:#3b82f6;
	box-shadow:0 2px 4px rgb(0 0 0 / .06);
	transform:translateY(-1px)
}
.sd-grad-color-select:active {
	transform:translateY(0)
}
.sd-grad-color-select:focus-visible {
	outline:2px solid #3b82f6;
	outline-offset:2px
}
.sd-grad-color-chip {
	width:32px;
	height:32px;
	border-radius:8px;
	box-shadow:inset 0 0 0 1px rgb(0 0 0 / .1);
	flex-shrink:0;
	transition:transform .2s ease;
	background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);
	background-size:8px 8px;
	background-position:0 0,0 4px,4px -4px,-4px 0
}
.sd-grad-color-select:hover .sd-grad-color-chip {
	transform:scale(1.05)
}
.sd-grad-color-hex {
	font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
	font-size:14px;
	color:#111827;
	flex:1;
	-webkit-user-select:all;
	user-select:all;
	text-transform:uppercase
}
.sd-grad-steps {
	display:flex;
	flex-direction:column;
	gap:8px
}
.sd-grad-steps-label {
	font-size:13px;
	font-weight:600;
	color:#374151;
	text-transform:uppercase;
	letter-spacing:.5px;
	-webkit-user-select:none;
	user-select:none
}
.sd-grad-steps-control {
	display:flex;
	align-items:center;
	gap:12px
}
.sd-grad-slider {
	flex:1;
	height:6px;
	border-radius:3px;
	background:#e5e7eb;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	outline:0;
	cursor:pointer
}
.sd-grad-slider:hover {
	background:#d1d5db
}
.sd-grad-slider:focus-visible {
	outline:2px solid #3b82f6;
	outline-offset:4px
}
.sd-grad-slider::-webkit-slider-thumb {
	-webkit-appearance:none;
	appearance:none;
	width:18px;
	height:18px;
	border-radius:50%;
	background:#3b82f6;
	cursor:pointer;
	box-shadow:0 2px 4px rgb(0 0 0 / .2);
	transition:all .2s ease
}
.sd-grad-slider::-webkit-slider-thumb:hover {
	transform:scale(1.2);
	background:#2563eb
}
.sd-grad-slider::-moz-range-thumb {
	width:18px;
	height:18px;
	border-radius:50%;
	background:#3b82f6;
	cursor:pointer;
	box-shadow:0 2px 4px rgb(0 0 0 / .2);
	border:none;
	transition:all .2s ease
}
.sd-grad-slider::-moz-range-thumb:hover {
	transform:scale(1.2);
	background:#2563eb
}
.sd-grad-steps-value {
	min-width:32px;
	text-align:center;
	font-weight:600;
	color:#111827;
	font-size:15px;
	-webkit-user-select:none;
	user-select:none
}
.sd-grad-direction {
	display:flex;
	align-items:center;
	gap:12px;
	flex-wrap:wrap
}
.sd-grad-direction-label {
	font-size:13px;
	font-weight:600;
	color:#374151;
	text-transform:uppercase;
	letter-spacing:.5px;
	-webkit-user-select:none;
	user-select:none
}
.sd-grad-direction-toggle {
	display:flex;
	gap:8px;
	padding:6px;
	background:#f3f4f6;
	border-radius:10px
}
.sd-grad-dir-btn {
	padding:8px;
	border:none;
	background:#fff0;
	border-radius:8px;
	cursor:pointer;
	transition:all .2s;
	-webkit-user-select:none;
	user-select:none;
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:48px;
	min-height:48px;
	position:relative
}
.sd-grad-dir-btn:hover {
	background:rgb(255 255 255 / .7);
	transform:scale(1.05)
}
.sd-grad-dir-btn:focus-visible {
	outline:2px solid #3b82f6;
	outline-offset:-2px
}
.sd-grad-dir-btn.active {
	background:#fff;
	box-shadow:0 2px 6px rgb(0 0 0 / .12);
	transform:scale(1)
}
.sd-grad-dir-btn.active svg {
	filter:drop-shadow(0 1px 2px rgb(0 0 0 / .1))
}
.sd-grad-dir-icon {
	width:48px;
	height:32px;
	display:block
}
.sd-grad-footer {
	padding:12px 16px;
	border-top:1px solid #e5e7eb;
	display:flex;
	justify-content:space-between;
	gap:8px;
	background:#fafafa
}
.sd-grad-footer .sd-btn {
	min-width:80px
}
.sd-gradient-message {
	position:fixed;
	bottom:20px;
	left:50%;
	transform:translateX(-50%);
	padding:12px 20px;
	border-radius:8px;
	box-shadow:0 4px 12px rgb(0 0 0 / .15);
	z-index:10001;
	display:none;
	font-size:14px;
	font-weight:500;
	max-width:320px;
	text-align:center;
	pointer-events:none
}
.sd-gradient-message--error { background:#ef4444;color:#fff }
.sd-gradient-message--warning { background:#f59e0b;color:#fff }
.sd-gradient-message--info { background:#3b82f6;color:#fff }
.sd-gradient-message--success { background:#10b981;color:#fff }
@keyframes shimmer {
	100% { left:100% }
}
.sd-grad-panel.is-loading {
	pointer-events:none
}
.sd-grad-panel.is-loading .sd-grad-body {
	opacity:.5;
	filter:blur(1px)
}
.sd-grad-panel.is-loading::after {
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:40px;
	height:40px;
	border:3px solid #e5e7eb;
	border-top-color:#3b82f6;
	border-radius:50%;
	animation:spin .8s linear infinite
}
@keyframes spin {
	to { transform:rotate(360deg) }
}
@media (prefers-contrast:high) {
	.sd-grad-panel {
		border:2px solid currentColor
	}
	.sd-grad-color-select,.sd-grad-dir-btn,.sd-grad-slider {
		border-width:2px
	}
	.sd-grad-dir-btn.active {
		outline:2px solid currentColor;
		outline-offset:-2px
	}
}
@media (prefers-reduced-motion:reduce) {
	.sd-grad-preview::after {
		display:none
	}
	.sd-grad-dir-btn,.sd-grad-dir-btn::after {
		transition:none
	}
}
@media (max-width:480px) {
	.sd-grad-panel {
		width:95vw;
		max-height:95vh
	}
	.sd-grad-body {
		padding:16px
	}
	.sd-grad-colors {
		grid-template-columns:1fr
	}
	.sd-grad-direction {
		flex-direction:column;
		align-items:stretch
	}
	.sd-grad-direction-toggle {
		width:100%
	}
	.sd-grad-footer {
		flex-direction:column
	}
	.sd-grad-footer .sd-btn {
		width:100%
	}
}
@media (hover:none) and (pointer:coarse) {
	.sd-grad-dir-btn,.sd-grad-footer .sd-btn {
		min-height:44px;
		min-width:44px
	}
	.sd-grad-color-select:hover,.sd-grad-dir-btn:hover,.sd-grad-footer .sd-btn:hover {
		transform:none;
		box-shadow:none
	}
	.sd-grad-slider::-webkit-slider-thumb {
		width:24px;
		height:24px
	}
	.sd-grad-slider::-moz-range-thumb {
		width:24px;
		height:24px
	}
}
@media print {
	#sdGradientOverlay,.sd-gradient-message {
		display:none\!important
	}
}
@media (prefers-color-scheme:dark) {
	#sdGradientOverlay .sd-grad-panel {
		background:#1e1e2e;
		color:#cdd6f4
	}
	#sdGradientOverlay .sd-grad-header {
		background:#181825;
		border-color:#313244
	}
	#sdGradientOverlay .sd-grad-header button:hover {
		background:#313244
	}
	#sdGradientOverlay .sd-grad-color-select {
		background:#181825;
		border-color:#313244;
		color:#cdd6f4
	}
	#sdGradientOverlay .sd-grad-color-hex {
		color:#cdd6f4
	}
	#sdGradientOverlay .sd-grad-color-label,
	#sdGradientOverlay .sd-grad-steps-label,
	#sdGradientOverlay .sd-grad-direction-label {
		color:#a6adc8
	}
	#sdGradientOverlay .sd-grad-slider {
		background:#313244
	}
	#sdGradientOverlay .sd-grad-steps-value {
		color:#cdd6f4
	}
	#sdGradientOverlay .sd-grad-direction-toggle {
		background:#181825
	}
	#sdGradientOverlay .sd-grad-dir-btn.active {
		background:#313244
	}
	#sdGradientOverlay .sd-grad-footer {
		background:#181825;
		border-color:#313244
	}
	#sdGradientOverlay .sd-btn {
		background:#313244;
		color:#cdd6f4;
		border-color:#45475a
	}
	#sdGradientOverlay .sd-btn.primary {
		background:#3b82f6;
		color:#fff;
		border-color:#3b82f6
	}
}

/* Progressive web app install prompt */
.pwa-install-open {
	overflow:hidden
}
.pwa-install {
	position:fixed;
	inset:0;
	z-index:3500;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(17,24,39,.55);
	backdrop-filter:blur(6px);
	opacity:0;
	transition:opacity .2s ease
}
.pwa-install.is-visible {
	opacity:1
}
.pwa-install__card {
	position:relative;
	width:min(500px,100%);
	max-height:calc(100vh - 40px);
	overflow:auto;
	padding:28px;
	border:1px solid rgba(148,163,184,.28);
	border-radius:12px;
	background:#fff;
	color:#111827;
	box-shadow:0 24px 80px rgba(15,23,42,.3);
	text-align:center
}
.pwa-install__close {
	position:absolute;
	top:12px;
	right:12px;
	width:40px;
	height:40px;
	border:0;
	border-radius:8px;
	background:transparent;
	color:#64748b;
	font-size:28px;
	line-height:1;
	cursor:pointer;
	touch-action:manipulation
}
.pwa-install__close:hover,
.pwa-install__close:focus-visible {
	background:#f1f5f9;
	color:#0f172a;
	outline:none
}
.pwa-install__icon {
	display:grid;
	place-items:center;
	width:84px;
	height:84px;
	margin:0 auto 18px;
	border-radius:20px;
	background:linear-gradient(135deg,#dbeafe,#ede9fe)
}
.pwa-install__icon svg {
	width:64px;
	height:64px
}
.pwa-install__title {
	margin:0 0 10px;
	color:#111827;
	font-size:1.7rem;
	font-weight:800;
	line-height:1.15;
	letter-spacing:0
}
.pwa-install__text {
	margin:0 auto;
	max-width:40ch;
	color:#475569;
	font-size:1rem;
	line-height:1.45
}
.pwa-install__guide {
	margin:18px auto 0;
	padding:16px;
	border:1px solid #e2e8f0;
	border-radius:10px;
	background:#f8fafc;
	color:#334155;
	text-align:left
}
.pwa-install__guide:focus {
	outline:none
}
.pwa-install__guide-title {
	margin:0 0 10px;
	color:#0f172a;
	font-size:1rem;
	font-weight:800;
	line-height:1.25;
	letter-spacing:0
}
.pwa-install__steps {
	margin:0;
	padding-left:22px
}
.pwa-install__steps li {
	margin:8px 0 0;
	padding-left:3px;
	line-height:1.4
}
.pwa-install__steps li:first-child {
	margin-top:0
}
.pwa-install__note {
	margin:12px 0 0;
	color:#475569;
	font-size:.93rem;
	font-weight:700;
	line-height:1.4
}
.pwa-install__actions {
	display:flex;
	gap:12px;
	justify-content:center;
	margin-top:24px
}
.pwa-install__btn {
	min-width:120px;
	min-height:44px;
	padding:10px 18px;
	border:1px solid #cbd5e1;
	border-radius:8px;
	font:inherit;
	font-weight:800;
	cursor:pointer;
	touch-action:manipulation
}
.pwa-install__btn-secondary {
	background:#fff;
	color:#334155
}
.pwa-install__btn-secondary:hover,
.pwa-install__btn-secondary:focus-visible {
	background:#f8fafc;
	border-color:#94a3b8;
	outline:none
}
.pwa-install__btn-primary {
	border-color:#4f46e5;
	background:#4f46e5;
	color:#fff;
	box-shadow:0 8px 20px rgba(79,70,229,.28)
}
.pwa-install__btn-primary:hover,
.pwa-install__btn-primary:focus-visible {
	background:#4338ca;
	border-color:#4338ca;
	outline:none
}
@media (max-width:480px) {
	.pwa-install {
		align-items:flex-end;
		padding:12px
	}
	.pwa-install__card {
		max-height:calc(100vh - 24px);
		padding:26px 18px 18px;
		border-radius:12px
	}
	.pwa-install__actions {
		flex-direction:column
	}
	.pwa-install__btn {
		width:100%
	}
}
@media (prefers-reduced-motion:reduce) {
	.pwa-install {
		transition:none
	}
}
@media (prefers-color-scheme:dark) {
	.pwa-install__card {
		border-color:#334155;
		background:#0f172a;
		color:#e2e8f0
	}
	.pwa-install__close {
		color:#cbd5e1
	}
	.pwa-install__close:hover,
	.pwa-install__close:focus-visible {
		background:#1e293b;
		color:#fff
	}
	.pwa-install__title {
		color:#f8fafc
	}
	.pwa-install__text,
	.pwa-install__note {
		color:#cbd5e1
	}
	.pwa-install__guide {
		border-color:#334155;
		background:#1e293b;
		color:#dbeafe
	}
	.pwa-install__guide-title {
		color:#f8fafc
	}
	.pwa-install__btn-secondary {
		background:#0f172a;
		color:#e2e8f0;
		border-color:#475569
	}
	.pwa-install__btn-secondary:hover,
	.pwa-install__btn-secondary:focus-visible {
		background:#1e293b;
		border-color:#64748b
	}
}