/* Canvas Tool Styles */
.canvas-tools {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

/* Tool Palette Groups - smaller groups for better wrapping */
.tool-palette {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border-radius: 3px;
    background: transparent;
    border: none;
    gap: 2px;
}

.canvas-tool {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-button-bg);
    border: 1px solid var(--color-button-border);
    border-radius: 2px;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 0.8rem;
}

.canvas-tool:hover {
    background-color: var(--color-glass-bg-hover);
    color: var(--color-text-primary);
    border-color: var(--color-glass-border-hover);
}

.canvas-tool:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none;
}

.canvas-tool.active {
    background-color: var(--color-accent-blue);
    color: #ffffff;
    border-color: var(--color-accent-blue-light);
    box-shadow: 0 0 8px var(--color-accent-glow);
}

.canvas-tool.active:hover {
    background-color: var(--color-accent-blue-dark);
    border-color: var(--color-accent-blue);
}

/* Wider button for tools with text labels (e.g., Stencils) */
#stencilTool {
    width: auto;
    min-width: 36px;
    padding: 0 0.5rem;
}

/* Canvas container */
.canvas-container {
    position: relative;
    background-color: var(--color-bg-tertiary);
    border: 1px solid var(--color-glass-border);
    border-radius: 3px;
    overflow: hidden;
}

.canvas-container:fullscreen {
    background-color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-container:fullscreen #canvasElement {
    max-width: 100%;
    max-height: 100%;
}

/* Canvas element */
#canvasElement, #gridCanvas {
    display: block;
    touch-action: none;
    user-select: none;
}

/* Color picker styling */
#colorPicker {
    width: 30px;
    height: 30px;
    border: 2px solid var(--color-glass-border);
    border-radius: 2px;
    cursor: pointer;
    background-color: transparent;
    padding: 1px;
}

#colorPicker:hover {
    border-color: var(--color-glass-border-hover);
}

/* Brush size slider */
#brushSize, #opacity {
    appearance: none;
    background: var(--color-glass-bg);
    outline: none;
    height: 6px;
    border-radius: 3px;
    cursor: pointer;
}

#brushSize::-webkit-slider-thumb,
#opacity::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-accent-blue);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

#brushSize::-webkit-slider-thumb:hover,
#opacity::-webkit-slider-thumb:hover {
    background: var(--color-accent-blue-light);
    transform: scale(1.2);
}

#brushSize::-moz-range-thumb,
#opacity::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #2563eb;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

#brushSize::-moz-range-thumb:hover,
#opacity::-moz-range-thumb:hover {
    background: #3b82f6;
    transform: scale(1.2);
}

/* Text input for text tool */
#textInput {
    position: absolute;
    z-index: 10;
    background-color: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    color: var(--color-text-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    font-size: 0.875rem;
    min-width: 150px;
}

.cursor-preview {
    position: absolute;
    border: 1px dashed rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    pointer-events: none;
    display: none;
    z-index: 30;
}

.presence-overlay {
    font-family: 'Inter', sans-serif;
}

.presence-overlay .presence-viewport {
    box-sizing: border-box;
    border: 2px dashed var(--presence-accent, #3b82f6);
    background: var(--presence-fill, rgba(59, 130, 246, 0.08));
    border-radius: 8px;
    transition: left 100ms ease-out, top 100ms ease-out, width 100ms ease-out, height 100ms ease-out, opacity 120ms ease;
    z-index: 1;
}

.presence-overlay .presence-viewport-label {
    position: absolute;
    top: 6px;
    left: 6px;
    max-width: calc(100% - 12px);
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(2, 6, 23, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--presence-accent, #ffffff);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.presence-overlay .presence-cursor {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    z-index: 2;
}

#textInput:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 3px var(--color-accent-bg);
}

/* Divider in toolbar */
.canvas-tools .border-l {
    height: 24px;
    align-self: center;
}

/* Fullscreen button */
.canvas-container:fullscreen ~ .acme-button-secondary {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
}

/* Labels */
.canvas-tools label,
.text-xs.text-gray-400 {
    user-select: none;
    font-weight: 500;
}

/* Design system label utility for toolbar */
.toolbar-label {
    display: none;
}

/* Color chips for quick color selection */
.color-chip {
    width: 30px;
    height: 30px;
    border-radius: 2px;
    border: 2px solid var(--color-glass-border);
    transition: all var(--transition-fast);
}

.color-chip:hover {
    border-color: var(--color-glass-border-hover);
    box-shadow: 0 0 0 2px var(--color-white-overlay);
}

/* Toolbar layout helpers to improve wrapping on small screens */
.toolbar-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
}

.toolbar-section {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 2px;
    align-items: center;
}

.toolbar-divider {
    width: 1px;
    height: 18px;
    background: rgba(100, 110, 130, 0.2);
    align-self: center;
    flex-shrink: 0;
    margin: 0 1px;
}

.bg-toggle {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: #374151;
    border: 1px solid rgba(100, 110, 130, 0.25);
    border-radius: 3px;
    color: #9ca3af;
    font-size: 0.55rem;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.1;
}

.bg-toggle:hover {
    background: #4b5563;
    color: #e5e7eb;
}

.bg-toggle.active {
    background-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.5);
}

/* Compact responsive toolbar */
.canvas-toolbar-container {
    position: relative;
    z-index: 1200;
    /* 2px top/bottom kills the gap above the toolbox buttons that read as
       wasted whitespace on mobile; horizontal padding stays at 6px so
       buttons don't hug the panel edge. */
    padding: 2px 6px;
    overflow: visible;
}

.compact-toolbar {
    flex-wrap: nowrap;
    gap: 4px;
    overflow: visible;
    align-items: center;
}

.compact-toolbar .toolbar-section {
    position: relative;
    min-height: 38px;
    padding: 2px;
    border-radius: 6px;
    border: 1px solid rgba(100, 110, 130, 0.18);
    background: rgba(16, 20, 28, 0.88);
}

.toolbar-selection:not(.has-active-selection-actions) {
    display: none;
}

.toolbar-menu {
    position: relative;
    display: inline-flex;
}

.toolbar-menu-trigger {
    gap: 4px;
}

.toolbar-popover {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    /* Hug-content width with a small minimum. 180px was ~6× a 30px button and
       made every popover look comically wide. The .color-popover and
       .style-popover override these with their own larger widths because their
       content needs the room. */
    min-width: 96px;
    width: max-content;
    max-width: 240px;
    display: none;
    padding: 8px;
    border: 1px solid rgba(110, 120, 145, 0.32);
    border-radius: 8px;
    background: rgba(9, 12, 18, 0.96);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1600;
}

/* All buttons inside a popover stretch to the popover's content width so the
   icon-only canvas-tool and text bg-toggle don't render at different widths.
   !important is required because @media (max-width: 640px) below forces
   .compact-toolbar .canvas-tool to 44px which would otherwise win. */
.toolbar-popover .canvas-tool,
.toolbar-popover .bg-toggle {
    width: 100% !important;
    box-sizing: border-box;
}

.toolbar-menu.open > .toolbar-popover {
    display: flex;
    /* One item per row — vertical stack instead of inline flex. Was previously
       relying on the .toolbar-popover-grid override below to force columns. */
    flex-direction: column;
    gap: 4px;
}

.toolbar-popover-grid {
    /* Force ONE column. Each dropdown item gets a full row. Was previously
       3 columns which produced 2-or-more-per-row inconsistency. */
    grid-template-columns: 1fr;
    gap: 4px;
}

.toolbar-menu.open > .toolbar-popover-grid {
    display: grid;
}

/* Each item in a popover-grid stretches to fill the uniform popover width. */
.toolbar-popover-grid > * {
    width: 100%;
    box-sizing: border-box;
}

.color-menu-button {
    padding: 0;
}

.current-color-swatch {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.color-popover {
    /* width changed to accommodate the new functional HSL wheel + lightness slider */
    width: 220px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* Inherit position: absolute from .toolbar-popover so the picker overlays
       the page instead of taking flow space (which previously made the
       toolbar shove the picker's siblings sideways). The wheel marker is
       positioned relative to .color-wheel-control, not to .color-popover, so
       dropping `position: relative` here is safe. */
    /* Extra top padding so the absolutely-positioned close X doesn't
       overlap the color wheel below. .color-popover already inherits
       position: absolute from .toolbar-popover, so descendants with
       position: absolute (the close X) anchor correctly. */
    padding-top: 18px;
}

.toolbar-popover-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms, color 120ms, border-color 120ms;
    z-index: 1;
}

.toolbar-popover-close:hover,
.toolbar-popover-close:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    outline: none;
}

.color-wheel-control {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
}

.color-wheel-canvas {
    display: block;
    width: 160px;
    height: 160px;
    border-radius: 999px;
    cursor: crosshair;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    /* The canvas itself is opaque; its drawn pixels carry the gradient. The
       cursor changes to crosshair so users know they can click anywhere. */
}

/* Tiny circular indicator showing the currently-picked spot on the wheel. */
.color-wheel-marker {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: left 80ms linear, top 80ms linear;
}

.color-wheel-controls-row {
    display: grid;
    grid-template-columns: 70px 1fr 70px;
    gap: 6px;
    align-items: center;
    width: 100%;
}

.color-wheel-slider-label {
    font-size: 11px;
    color: rgba(220, 230, 245, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.color-wheel-controls-row #colorLightnessSlider {
    width: 100%;
    accent-color: #94a3b8;
}

.color-wheel-controls-row #colorHexInput {
    width: 100%;
    background: rgba(15, 18, 28, 0.8);
    color: #e2e8f0;
    border: 1px solid rgba(110, 120, 145, 0.4);
    border-radius: 4px;
    padding: 4px 6px;
    font-size: 11px;
    font-family: ui-monospace, SFMono-Regular, monospace;
    text-align: center;
}

.color-wheel-controls-row #colorHexInput:focus {
    outline: 1px solid rgba(96, 165, 250, 0.6);
    outline-offset: 1px;
}

.color-swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 28px);
    gap: 6px;
}

.style-popover {
    width: min(260px, calc(100vw - 24px));
    flex-direction: column;
    gap: 12px;
}

.toolbar-slider-row {
    display: grid;
    grid-template-columns: 54px 1fr 44px;
    align-items: center;
    gap: 10px;
    color: var(--color-text-secondary);
    font-size: 0.78rem;
}

.toolbar-slider-row input[type="range"] {
    width: 100%;
    height: 28px;
}

.toolbar-slider-value,
.toolbar-value {
    color: var(--color-text-primary);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.canvas-popover {
    grid-template-columns: repeat(2, minmax(44px, auto));
}

.canvas-popover .bg-toggle {
    min-width: 54px;
    padding: 0 6px;
}

.toolbar-utility .toolbar-popover {
    right: 0;
    left: auto;
}

.mobile-utility-action {
    display: none;
}

body.canvas-read-only .mobile-utility-action {
    display: none !important;
}

/* Pin to right edge so the popover (right: 0, line 580) opens leftward
   INSIDE the iframe. Without this, the read-only logic that hides every
   other .toolbar-section leaves the utility section at the left edge,
   and the leftward popover renders off-screen. */
body.canvas-read-only .toolbar-utility {
    margin-left: auto;
}

@media (max-width: 640px) {
    .toolbar-section {
        gap: 0.2rem;
    }
}

/* ============================================
   RESPONSIVE HEIGHT FIX
   Prevents the toolbar from consuming all vertical space
   and crushing the canvas to height=0 at small viewports.
   ============================================ */

/* Toolbar container: allow shrinking and scroll when needed */
.canvas-toolbar-container {
    flex-shrink: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #0a0a0a;
    border-bottom: 1px solid rgba(100, 110, 130, 0.15);
}

/* Canvas area: never collapse below a usable drawing height */
.canvas-area {
    flex-shrink: 0;
    min-height: 200px;
}

/* At very short viewports (under 600px height), cap the toolbar
   so the canvas always gets at least 60% of available height */
@media (max-height: 600px) {
    .canvas-toolbar-container {
        overflow-y: hidden;
        overflow-x: hidden;
    }

    .canvas-area {
        min-height: 55vh;
    }

    /* Tighten toolbar padding to save space */
    .canvas-toolbar-container.p-2 {
        padding: 0.25rem 0.5rem;
    }

    /* Horizontal scroll instead of wrap — prevents 3-row clipping */
    .toolbar-wrap {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.25rem;
    }
    .toolbar-wrap::-webkit-scrollbar {
        display: none;
    }

    .tool-palette {
        padding: 0.0625rem 0.25rem;
    }

    .canvas-tool {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    #colorPicker {
        width: 28px;
        height: 28px;
    }

    .color-chip {
        width: 28px;
        height: 28px;
    }

    #brushSize, #opacity {
        width: 50px;
    }
}

/* Embedded mode height fix: even more aggressive since header is hidden.
   The toolbar must NOT shrink — its rigid height (button rows + safe-area
   padding) is the source of truth. The canvas area is the squishy one and
   takes whatever vertical space remains. Previous behaviour set
   flex-shrink:1 + overflow-y:hidden on the toolbar, which clipped the
   bottom row of buttons whenever the iframe was a few pixels short. */
body.embedded-mode .canvas-toolbar-container {
    flex-shrink: 0;
    overflow-x: hidden;
}

body.embedded-mode .canvas-area {
    flex: 1 1 0%;
    min-height: 120px;
}

body.embedded-mode .toolbar-wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
body.embedded-mode .toolbar-wrap::-webkit-scrollbar {
    display: none;
}

body.embedded-mode .canvas-toolbar-container {
    overflow: visible;
}

body.embedded-mode .compact-toolbar {
    overflow: visible;
    flex-wrap: nowrap;
}

body.embedded-mode .toolbar-popover {
    top: calc(100% + 8px);
}

@media (max-height: 600px) {
    body.embedded-mode .canvas-area {
        min-height: 60vh;
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .canvas-toolbar-container {
        order: 2;
        border-top: 1px solid rgba(100, 110, 130, 0.15);
        border-bottom: 0;
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    }

    .canvas-area {
        order: 1;
        min-height: 0;
    }

    .compact-toolbar {
        justify-content: center;
        gap: 5px;
    }

    .compact-toolbar > .toolbar-section[aria-label="History"],
    .compact-toolbar > .toolbar-section[aria-label="Canvas actions"] {
        display: none;
    }

    .mobile-utility-action {
        display: flex;
    }

    .canvas-tool {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .compact-toolbar .toolbar-section {
        min-height: 48px;
    }

    .toolbar-popover,
    body.embedded-mode .toolbar-popover {
        top: auto;
        bottom: calc(100% + 8px);
    }

    .toolbar-popover-grid {
        /* Mobile override also uses one column for consistency. */
        grid-template-columns: 1fr;
    }

    .color-popover {
        left: 50%;
        width: min(240px, calc(100vw - 24px));
        transform: translateX(-50%);
    }

    .color-wheel-control {
        width: 168px;
        height: 168px;
    }

    .color-swatch-grid {
        grid-template-columns: repeat(6, 32px);
    }

    .color-chip {
        width: 32px;
        height: 32px;
    }

    .style-popover {
        right: 0;
        left: auto;
        transform: none;
    }

    .toolbar-utility .toolbar-popover {
        right: 0;
        left: auto;
        transform: none;
    }
}

.canvas-toolbar-container {
    overflow: visible;
}

.compact-toolbar {
    overflow: visible;
}

@media (max-height: 600px) {
    .compact-toolbar {
        overflow: visible;
    }

    .compact-toolbar .canvas-tool {
        width: 36px !important;
        height: 36px !important;
        font-size: 0.85rem;
    }

    .color-wheel-control #colorPicker {
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 640px) {
    .compact-toolbar .canvas-tool {
        width: 44px !important;
        height: 44px !important;
        font-size: 1rem;
    }
}

body.canvas-read-only .mobile-utility-action {
    display: none !important;
}

/* Dark theme adjustments */
.theme-dark .canvas-tool {
    background-color: #1f2937;
    border-color: #374151;
}

.theme-dark .canvas-tool:hover {
    background-color: #374151;
    border-color: #4b5563;
}

.theme-dark .canvas-container {
    border-color: #374151;
}

/* Prevent text selection when drawing */
.canvas-container * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Custom cursors for tools */
.canvas-container[data-tool="pen"] {
    cursor: crosshair;
}

.canvas-container[data-tool="text"] {
    cursor: text;
}

.canvas-container[data-tool="eraser"] {
    cursor: none; /* We'll show custom cursor */
}

.canvas-container[data-tool="stencil"] {
    cursor: copy;
}

/* Cursor preview circle */
.cursor-preview {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
    display: none;
}

.canvas-container[data-tool="eraser"] .cursor-preview {
    display: block;
    background-color: rgba(255, 255, 255, 0.1);
}

/* Help modal styles */
#helpModal {
    display: none;
}

#helpModal.flex {
    display: flex;
}

/* Stencil panel */
.stencil-panel {
    position: fixed;
    top: 120px;
    right: 16px;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 160px);
    z-index: 1400;
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    overflow: hidden;
}

.stencil-panel.hidden {
    display: none;
}

body.embedded-mode .stencil-panel {
    top: 16px;
    right: 12px;
    max-height: calc(100vh - 32px);
}

.stencil-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--color-glass-border);
}

.stencil-panel-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text-primary);
}

.stencil-panel-subtitle {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-top: 0.15rem;
}

.stencil-close {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid var(--color-glass-border);
    background: var(--color-glass-bg);
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stencil-close:hover {
    border-color: var(--color-glass-border-hover);
    color: var(--color-text-primary);
}

.stencil-panel-body {
    padding: 0.75rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: auto;
}

.stencil-controls {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.stencil-search {
    width: 100%;
    background: var(--color-input-bg);
    border: 1px solid var(--color-input-border);
    border-radius: 4px;
    padding: 0.45rem 0.6rem;
    color: var(--color-text-primary);
    font-size: 0.8rem;
}

.stencil-search:focus {
    outline: none;
    border-color: var(--color-accent-blue);
    box-shadow: 0 0 0 2px var(--color-accent-bg);
}

.stencil-control-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.stencil-control-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-tertiary);
}

.stencil-control-value {
    min-width: 48px;
    text-align: right;
    color: var(--color-text-primary);
}

#stencilSize {
    flex: 1;
    min-width: 120px;
    appearance: none;
    background: var(--color-glass-bg);
    outline: none;
    height: 6px;
    border-radius: 3px;
    cursor: pointer;
}

#stencilSize::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-accent-blue);
    border-radius: 50%;
    cursor: pointer;
}

#stencilSize::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--color-accent-blue);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.stencil-rotation {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.stencil-rotation-btn {
    border: 1px solid var(--color-glass-border);
    background: var(--color-glass-bg);
    color: var(--color-text-secondary);
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stencil-rotation-btn.active {
    border-color: var(--color-accent-blue);
    color: var(--color-text-primary);
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.35);
}

.stencil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.6rem;
}

.stencil-item {
    border: 1px solid var(--color-glass-border);
    background: var(--color-glass-bg);
    border-radius: 6px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stencil-item:hover {
    border-color: var(--color-glass-border-hover);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.stencil-item.active {
    border-color: var(--color-accent-blue);
    color: var(--color-text-primary);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.35);
}

.stencil-thumb {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.5);
}

.stencil-label {
    font-size: 0.7rem;
    text-align: center;
    color: inherit;
}

.stencil-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: 0.8rem;
    padding: 0.75rem 0;
}

/* Selection tool cursor */
.canvas-container[data-tool="select"] {
    cursor: default;
}

/* Selection overlay handles */
.selection-handle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border: 2px solid #3b82f6;
    border-radius: 1px;
    pointer-events: all;
    cursor: nwse-resize;
    z-index: 40;
}