:root { color-scheme: light; --sidebar-width: 350px; --tool-size: 48px; /* Surfaces */ --bg: #eaeef2; --bg-grad-a: #eef2f6; --bg-grad-b: #e2e8ee; --panel: #ffffff; --panel-soft: #f7f9fb; --sidebar-bg: #fbfcfd; /* Text */ --ink: #14202b; --ink-soft: #3a4a57; --muted: #71808c; /* Lines */ --line: #e2e8ed; --line-strong: #cdd6dd; /* Brand — themeable button system. Each theme blends a light side into a dark side (diagonal face), with a soft same-hue glow underneath. Default: Violet. */ --accent-light: #a78bfa; --accent: #7c3aed; --accent-strong: #6d28d9; --accent-soft: #ede9fe; --accent-softer: #f5f3ff; --accent-ring: rgba(124, 58, 237, 0.22); --glow: rgba(124, 58, 237, 0.3); --glow-strong: rgba(124, 58, 237, 0.42); --danger: #c0392b; --danger-soft: #fdecea; /* Effects */ --radius: 12px; --radius-sm: 9px; --radius-xs: 7px; --shadow-sm: 0 1px 2px rgba(20, 32, 43, 0.06); --shadow-md: 0 4px 14px rgba(20, 32, 43, 0.08); --shadow-lg: 0 20px 56px rgba(20, 32, 43, 0.18); --shadow-page: 0 12px 40px rgba(20, 32, 43, 0.16), 0 2px 8px rgba(20, 32, 43, 0.08); --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ── Button style themes (set via data-btn-style on ) ── 3 light: sky, rose, cyan · 3 deeper: violet, indigo, teal */ :root[data-btn-style="sky"] { --accent-light: #7dd3fc; --accent: #3b82f6; --accent-strong: #2563eb; --accent-soft: #dbeafe; --accent-softer: #eff6ff; --accent-ring: rgba(59, 130, 246, 0.22); --glow: rgba(59, 130, 246, 0.3); --glow-strong: rgba(59, 130, 246, 0.42); } :root[data-btn-style="rose"] { --accent-light: #fbb6ce; --accent: #ec4899; --accent-strong: #db2777; --accent-soft: #fce7f3; --accent-softer: #fdf2f8; --accent-ring: rgba(236, 72, 153, 0.22); --glow: rgba(236, 72, 153, 0.3); --glow-strong: rgba(236, 72, 153, 0.42); } :root[data-btn-style="cyan"] { --accent-light: #67e8f9; --accent: #06b6d4; --accent-strong: #0891b2; --accent-soft: #cffafe; --accent-softer: #ecfeff; --accent-ring: rgba(6, 182, 212, 0.22); --glow: rgba(6, 182, 212, 0.3); --glow-strong: rgba(6, 182, 212, 0.42); } :root[data-btn-style="violet"] { --accent-light: #a78bfa; --accent: #7c3aed; --accent-strong: #6d28d9; --accent-soft: #ede9fe; --accent-softer: #f5f3ff; --accent-ring: rgba(124, 58, 237, 0.22); --glow: rgba(124, 58, 237, 0.3); --glow-strong: rgba(124, 58, 237, 0.42); } :root[data-btn-style="indigo"] { --accent-light: #818cf8; --accent: #4f46e5; --accent-strong: #4338ca; --accent-soft: #e0e7ff; --accent-softer: #eef2ff; --accent-ring: rgba(79, 70, 229, 0.22); --glow: rgba(79, 70, 229, 0.3); --glow-strong: rgba(79, 70, 229, 0.42); } :root[data-btn-style="teal"] { --accent-light: #2dd4bf; --accent: #0d9488; --accent-strong: #0f766e; --accent-soft: #ccfbf1; --accent-softer: #f0fdfa; --accent-ring: rgba(13, 148, 136, 0.22); --glow: rgba(13, 148, 136, 0.3); --glow-strong: rgba(13, 148, 136, 0.42); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; min-height: 100vh; background: linear-gradient(135deg, var(--bg-grad-a), var(--bg-grad-b)); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } button, input, textarea { font: inherit; } button { min-height: 34px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: linear-gradient(180deg, #ffffff, #eef2f5); color: var(--ink); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(20, 32, 43, 0.04), 0 1px 1.5px rgba(20, 32, 43, 0.12), 0 2px 4px rgba(20, 32, 43, 0.08); transition: border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.12s var(--ease), transform 0.08s var(--ease); } button:hover { border-color: #9aa8b2; background: linear-gradient(180deg, #ffffff, #e7edf1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(20, 32, 43, 0.05), 0 2px 3px rgba(20, 32, 43, 0.14), 0 4px 8px rgba(20, 32, 43, 0.1); } button:active { transform: translateY(1px); background: linear-gradient(180deg, #e7edf1, #f2f5f7); box-shadow: inset 0 2px 4px rgba(20, 32, 43, 0.16), inset 0 1px 0 rgba(20, 32, 43, 0.06), 0 1px 1px rgba(20, 32, 43, 0.06); } button:focus-visible { outline: none; border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 3px var(--accent-ring), 0 2px 4px rgba(20, 32, 43, 0.08); } button:disabled { cursor: not-allowed; opacity: 0.4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 1px rgba(20, 32, 43, 0.05); } button:disabled:active { transform: none; } .app-shell { position: relative; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: 100vh; } /* ── Sidebar ─────────────────────────────────────────────── */ .sidebar { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px 11px; border-right: 1px solid var(--line); background: var(--sidebar-bg); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.6) inset; container-type: inline-size; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .sidebar::-webkit-scrollbar { width: 8px; } .sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 2px solid var(--sidebar-bg); } .brand { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; padding: 2px 2px 6px; } .brand .swatch-row { margin-left: auto; gap: 7px; } .brand .swatch { width: 13px; height: 13px; border-width: 1.5px; box-shadow: 0 0 0 2px var(--sw-ring), 0 2px 6px var(--sw-glow); } .brand .swatch:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--sw-ring), 0 4px 9px var(--sw-glow); } .brand .swatch.selected { box-shadow: 0 0 0 2px var(--sw-ring), 0 0 0 3.5px var(--ink), 0 2px 7px var(--sw-glow); } .brand-mark { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 10px var(--glow)); } .brand h1, .brand p, .panel h2 { margin: 0; } .brand h1 { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; } .brand p { display: none; } .brand p, .hint, .file-drop small, .topbar span, .empty-state p { color: var(--muted); } .panel { padding: 11px 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); } .panel h2 { margin-bottom: 9px; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); } .file-drop { display: grid; gap: 5px; padding: 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); text-align: center; cursor: pointer; } .file-drop input { display: none; } .segmented, .pager, .grid-2 { display: grid; gap: 6px; } .segmented { grid-template-columns: repeat(4, 1fr); justify-items: center; } .segmented button.active { position: relative; overflow: hidden; border-color: var(--accent-strong); background: linear-gradient(125deg, var(--accent-light), var(--accent) 50%, var(--accent-strong)); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.16), 0 4px 10px -3px var(--glow); } .segmented button.active:hover { border-color: var(--accent-strong); background: linear-gradient(180deg, var(--accent-light), var(--accent) 45%, var(--accent-strong)); filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.16), 0 6px 13px -3px var(--glow-strong); } .segmented button.active:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28), 0 2px 5px var(--glow); } .icon-defs { display: none; } /* ── Icon panel ──────────────────────────────────────────── */ .icon-panel { /* Buttons scale fluidly with the sidebar's own width (container query), so they keep filling the bar perfectly as it is dragged smaller. */ --tool-size: clamp(30px, 14.5cqw, 54px); display: grid; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow-sm); } .icon-section { display: grid; gap: 7px; padding: 9px 9px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-soft); } .icon-section-label { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .icon-actions-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .icon-actions.icon-actions-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .icon-actions.icon-actions-center { grid-template-columns: 1fr; justify-items: center; } .icon-button { position: relative; display: inline-grid; place-items: center; width: var(--tool-size); min-width: var(--tool-size); height: var(--tool-size); min-height: var(--tool-size); padding: 0; overflow: hidden; border-radius: 999px; background: linear-gradient(180deg, #ffffff, #e4e9ee); font-size: 0; color: var(--ink-soft); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(20, 32, 43, 0.1), 0 2px 4px rgba(20, 32, 43, 0.12), 0 4px 9px rgba(20, 32, 43, 0.08); } .icon-button:hover { color: var(--accent-strong); border-color: var(--accent); background: linear-gradient(180deg, #ffffff, var(--accent-soft)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 var(--accent-ring), 0 2px 3px rgba(20, 32, 43, 0.12), 0 4px 11px var(--glow); } .icon-button svg { width: calc(var(--tool-size) * 0.52); height: calc(var(--tool-size) * 0.52); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } .file-row { display: flex; gap: 7px; align-items: center; } .file-row .file-button { flex: 1; min-width: 0; } .file-row .icon-button { flex: none; } .file-button { position: relative; display: grid; place-items: center; min-height: 46px; width: 100%; overflow: hidden; border: 1px solid var(--accent-strong); border-radius: 999px; background: linear-gradient(115deg, var(--accent-light), var(--accent) 50%, var(--accent-strong)); color: #fff; cursor: pointer; font-size: 12.5px; font-weight: 800; letter-spacing: 0.01em; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.14), 0 5px 12px -4px var(--glow), 0 1px 3px rgba(0, 0, 0, 0.08); transition: transform 0.14s var(--ease), box-shadow 0.18s var(--ease), filter 0.15s var(--ease); } /* Glossy sheen on the upper half */ .file-button::before, .icon-button::before { content: ""; position: absolute; left: 12%; right: 12%; top: 8%; height: 40%; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)); pointer-events: none; z-index: 0; } .file-button::before { left: 6%; right: 6%; } .icon-button svg { z-index: 1; } .file-button:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 5px rgba(0, 0, 0, 0.14), 0 7px 16px -4px var(--glow-strong), 0 2px 4px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } .file-button:active { transform: translateY(1px); filter: brightness(0.97); box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.28), 0 2px 5px -2px var(--glow); } .file-button input { display: none; } .icon-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; justify-items: center; } .icon-actions-2 .icon-button { width: 100%; min-width: unset; } .hint { margin: 7px 0 0; font-size: 12px; line-height: 1.45; } /* ── Controls ────────────────────────────────────────────── */ .controls { display: grid; gap: 9px; } .controls label { display: grid; gap: 5px; color: var(--ink-soft); font-size: 11px; font-weight: 700; } .controls input, .controls textarea, .controls select { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); padding: 7px 8px; background: #fff; color: var(--ink); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .controls select { height: 34px; cursor: pointer; } .controls input:hover, .controls textarea:hover, .controls select:hover { border-color: #b3bec6; } .controls input:focus, .controls textarea:focus, .controls select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .controls input[type="color"] { height: 34px; padding: 3px; cursor: pointer; } .shape-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; } .shape-thickness, .shape-row .narrow { width: 78px; flex: none; } .shape-row .tr-color { flex: 1; min-width: 116px; } .shape-row .checkbox { padding-bottom: 7px; } /* Compact color control: small native swatch + hex input */ .color-row { display: flex; gap: 6px; align-items: center; } .color-row input[type="color"] { flex: none; width: 34px; height: 32px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); background: #fff; cursor: pointer; } .color-row input[type="text"] { flex: 1; min-width: 0; height: 32px; text-transform: uppercase; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .controls textarea { resize: vertical; min-height: 48px; line-height: 1.4; } .checkbox { display: flex !important; grid-template-columns: auto 1fr; flex-direction: row; align-items: center; gap: 9px !important; padding: 3px 0; cursor: pointer; } .checkbox input { width: auto; accent-color: var(--accent); cursor: pointer; } .grid-2 { grid-template-columns: 1fr 1fr; } .pager { grid-template-columns: 1fr auto 1fr; align-items: center; } .pager span { min-width: 58px; text-align: center; color: var(--ink-soft); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .icon-pager { grid-template-columns: var(--tool-size) 1fr var(--tool-size); align-items: center; } /* ── Sidebar resize handle ───────────────────────────────── */ .sidebar-resize { position: absolute; z-index: 30; top: 0; left: var(--sidebar-width); transform: translateX(-50%); width: 10px; height: 100%; cursor: col-resize; } .sidebar-resize::after { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: transparent; border-radius: 99px; content: ""; transition: background 0.15s var(--ease); } .sidebar-resize:hover::after, .sidebar-resize.resizing::after { background: var(--accent); } .file-name { display: block; overflow: hidden; padding-top: 2px; color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; } /* ── Button-style switcher ───────────────────────────────── */ .swatch-row { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; } .swatch { width: 30px; height: 30px; min-height: 0; padding: 0; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(125deg, var(--sw-face1), var(--sw-face2)); box-shadow: 0 0 0 2.5px var(--sw-ring), 0 3px 9px var(--sw-glow); cursor: pointer; transition: transform 0.12s var(--ease), box-shadow 0.15s var(--ease); } .swatch:hover { transform: translateY(-2px); box-shadow: 0 0 0 2.5px var(--sw-ring), 0 6px 15px var(--sw-glow); } .swatch:active { transform: translateY(0); box-shadow: 0 0 0 2.5px var(--sw-ring), 0 2px 6px var(--sw-glow); } .swatch.selected { box-shadow: 0 0 0 2.5px var(--sw-ring), 0 0 0 4.5px var(--ink), 0 3px 11px var(--sw-glow); } /* 3 light */ .swatch[data-btn-style="sky"] { --sw-face1: #7dd3fc; --sw-face2: #2563eb; --sw-ring: #3b82f6; --sw-glow: rgba(59, 130, 246, 0.6); } .swatch[data-btn-style="rose"] { --sw-face1: #fbb6ce; --sw-face2: #db2777; --sw-ring: #ec4899; --sw-glow: rgba(236, 72, 153, 0.6); } .swatch[data-btn-style="cyan"] { --sw-face1: #67e8f9; --sw-face2: #0891b2; --sw-ring: #06b6d4; --sw-glow: rgba(6, 182, 212, 0.6); } /* 3 deeper */ .swatch[data-btn-style="violet"] { --sw-face1: #a78bfa; --sw-face2: #6d28d9; --sw-ring: #7c3aed; --sw-glow: rgba(124, 58, 237, 0.6); } .swatch[data-btn-style="indigo"] { --sw-face1: #818cf8; --sw-face2: #4338ca; --sw-ring: #4f46e5; --sw-glow: rgba(79, 70, 229, 0.6); } .swatch[data-btn-style="teal"] { --sw-face1: #2dd4bf; --sw-face2: #0f766e; --sw-ring: #0d9488; --sw-glow: rgba(13, 148, 136, 0.6); } /* ── Floating tooltip ────────────────────────────────────── */ .floating-tooltip { position: fixed; z-index: 9999; left: 0; top: 0; max-width: 210px; padding: 6px 10px; border-radius: var(--radius-xs); background: #1b2730; color: #fff; font-size: 11.5px; font-weight: 600; line-height: 1.2; opacity: 0; pointer-events: none; transform: translate(-50%, -100%); box-shadow: var(--shadow-md); transition: opacity 0.12s var(--ease), transform 0.12s var(--ease); white-space: nowrap; visibility: hidden; } .floating-tooltip.visible { opacity: 1; visibility: visible; } .primary { position: relative; overflow: hidden; border-color: var(--accent-strong); background: linear-gradient(125deg, var(--accent-light), var(--accent) 50%, var(--accent-strong)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.16), 0 4px 10px -3px var(--glow); } .primary:hover { border-color: var(--accent-strong); color: #fff; background: linear-gradient(180deg, var(--accent-light), var(--accent) 45%, var(--accent-strong)); filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.16), 0 6px 13px -3px var(--glow-strong); } .primary:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.28), 0 2px 5px var(--glow); } /* ── Workspace ───────────────────────────────────────────── */ .workspace { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; } .topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 22px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .topbar strong { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: -0.01em; } .topbar strong::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .topbar span { font-size: 12.5px; } .topbar-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .pc-download { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--accent-strong); border-radius: 999px; background: linear-gradient(125deg, var(--accent-light), var(--accent) 50%, var(--accent-strong)); color: #fff; font-size: 12px; font-weight: 800; text-decoration: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -2px 5px rgba(0, 0, 0, 0.16), 0 4px 10px -3px var(--glow); transition: transform 0.12s var(--ease), box-shadow 0.15s var(--ease), filter 0.15s var(--ease); } .pc-download:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 5px rgba(0, 0, 0, 0.16), 0 6px 14px -3px var(--glow-strong); } .pc-download:active { transform: translateY(1px); } .pc-download svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pc-download.is-hidden { display: none; } .viewer { position: relative; overflow: auto; padding: 36px 32px; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } .viewer::-webkit-scrollbar { width: 12px; height: 12px; } .viewer::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } .page-stage { position: relative; display: none; width: fit-content; margin: 0 auto; border-radius: 4px; box-shadow: var(--shadow-page); background: #fff; overflow: hidden; } .viewer.ready .page-stage { display: block; } .viewer.ready .empty-state { display: none; } #pdfCanvas { display: block; } .overlay-layer { position: absolute; inset: 0; overflow: hidden; cursor: crosshair; } .overlay-item { position: absolute; border: 0; user-select: none; } .overlay-item.selected:not(.erase) { border-color: var(--accent); border-style: solid; border-width: 1px; outline: 2px solid var(--accent-ring); outline-offset: 1px; border-radius: 2px; } /* Shapes: select with outline only (no border), so the inner SVG keeps its exact size and the stroke thickness never shifts when selecting/deselecting. */ .overlay-item.shape.selected { border-width: 0; outline: 2px solid var(--accent); outline-offset: 2px; } .overlay-item.erase { box-shadow: none; outline: 1px dashed rgba(15, 118, 110, 0.6); outline-offset: -1px; } /* Horizontal center line through each edit guide, for aligning text. */ .overlay-item.erase::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed rgba(15, 118, 110, 0.55); pointer-events: none; } .hide-guides .overlay-item.erase { outline: 0; } .hide-guides .overlay-item.erase::after { display: none; } .overlay-item.erase.selected { outline: 1.5px solid rgba(15, 118, 110, 0.9); } .hide-guides .overlay-item.erase.selected { outline: 0; } .overlay-item.text { display: flex; align-items: flex-start; min-width: 12px; min-height: 12px; white-space: pre; line-height: 1.15; cursor: move; } .overlay-item.shape { cursor: move; } .overlay-item.shape svg { position: absolute; inset: 0; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .resize-handle { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: #fff; border: 2px solid var(--accent); border-radius: 3px; cursor: se-resize; box-shadow: var(--shadow-sm); z-index: 1; transition: transform 0.1s var(--ease); } .resize-handle:hover { transform: scale(1.18); } .drawing-box { position: absolute; border: 1.5px solid var(--accent); background: rgba(15, 118, 110, 0.12); border-radius: 2px; pointer-events: none; } .draw-preview { position: absolute; inset: 0; overflow: visible; fill: none; stroke-linecap: round; pointer-events: none; } /* ── Empty state ─────────────────────────────────────────── */ .empty-state { display: grid; place-items: center; align-content: center; gap: 4px; min-height: calc(100vh - 110px); text-align: center; } .empty-logo { width: min(320px, 60%); height: auto; margin-bottom: 20px; filter: drop-shadow(0 10px 24px rgba(20, 32, 43, 0.14)); } .empty-state h2 { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; } .empty-state p { margin: 0; max-width: 340px; font-size: 13.5px; line-height: 1.5; } /* ── Responsive ──────────────────────────────────────────── */ @media (max-width: 880px) { .app-shell { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid var(--line); } .sidebar-resize { display: none; } .viewer { padding: 18px 14px; } }