/* ═══════════════════════════════════════════════════════════════
   Pixoto — Professional Photo & Pixel Art Editor
   style.css — Complete styles, CSS variables, responsive breakpoints
   Mobile-first design: base = mobile, breakpoints add desktop
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ─── */
:root {
    /* Brand Colors */
    --bg:             #141418;
    --panel-bg:       #1e1e26;
    --panel-border:   #2a2a36;
    --active:         #00d4ff;
    --active-dim:     rgba(0, 212, 255, 0.15);
    --accent-orange:  #ff6b35;
    --danger:         #ff3860;
    --success:        #23d160;
    --text:           #e8e8f0;
    --text-muted:     #6b6b80;
    --text-dim:       #44445a;

    /* Surfaces */
    --surface-hover:  rgba(255, 255, 255, 0.06);
    --surface-active: rgba(255, 255, 255, 0.10);
    --overlay:        rgba(0, 0, 0, 0.6);
    --overlay-heavy:  rgba(0, 0, 0, 0.8);

    /* Layout */
    --top-bar-h:      44px;
    --status-bar-h:   28px;
    --sidebar-w:      48px;
    --right-panel-w:  260px;
    --bottom-bar-h:   56px;
    --ruler-size:     20px;

    /* Typography */
    --font-ui:        'Syne', system-ui, -apple-system, sans-serif;
    --font-mono:      'DM Mono', 'SF Mono', 'Fira Code', monospace;

    /* Transitions */
    --t-fast:         120ms ease;
    --t-normal:       200ms ease;
    --t-slide:        300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Misc */
    --radius:         6px;
    --radius-sm:      4px;
    --radius-lg:      12px;
    --shadow:         0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.3);

    /* Checkerboard */
    --checker-size:   12px;
    --checker-light:  #3a3a44;
    --checker-dark:   #2a2a34;
}


/* ─── Reset & Base ─── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    user-select: none;
    -webkit-user-select: none;
}

/* Prevent pull-to-refresh and overscroll */
body {
    overscroll-behavior: none;
}


/* ─── Typography ─── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--text);
}

small {
    font-size: 10px;
    color: var(--text-muted);
    display: block;
    margin-top: 2px;
}

kbd {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    padding: 1px 5px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
}


/* ─── Scrollbar ─── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--text-dim);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}


/* ─── SVG Sprites (hidden) ─── */
.svg-sprites {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}


/* ─── Icon Sizes ─── */
.icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: currentColor;
}
.icon-sm {
    width: 14px;
    height: 14px;
}
.icon-xs {
    width: 12px;
    height: 12px;
}
.icon-lg {
    width: 28px;
    height: 28px;
}


/* ─── Buttons ─── */
button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    transition: background var(--t-fast), opacity var(--t-fast);
    min-height: 36px;
}
.btn-primary {
    background: var(--active);
    color: #000;
}
.btn-primary:hover {
    background: #33ddff;
}
.btn-secondary {
    background: var(--surface-hover);
    color: var(--text);
}
.btn-secondary:hover {
    background: var(--surface-active);
}
.btn-danger {
    background: var(--danger);
    color: #fff;
}
.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    min-height: 28px;
    border-radius: var(--radius-sm);
}

.btn-group {
    display: flex;
    gap: 2px;
}
.btn-group .btn-sm {
    background: var(--surface-hover);
    border-radius: 0;
}
.btn-group .btn-sm:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.btn-group .btn-sm:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.btn-group .btn-sm.active {
    background: var(--active);
    color: #000;
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.icon-btn-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn-sm:hover {
    background: var(--surface-hover);
    color: var(--text);
}


/* ─── Form Elements ─── */
input[type="text"],
input[type="number"] {
    background: var(--bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 4px 8px;
    outline: none;
    transition: border-color var(--t-fast);
    min-height: 28px;
}
input[type="text"]:focus,
input[type="number"]:focus {
    border-color: var(--active);
}

select {
    background: var(--bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 12px;
    padding: 4px 8px;
    outline: none;
    cursor: pointer;
    min-height: 28px;
    -webkit-appearance: none;
    appearance: none;
}
.select-sm {
    width: 100%;
}

/* Range Slider */
.slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: var(--panel-border);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--active);
    cursor: pointer;
    border: 2px solid var(--panel-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--active);
    cursor: pointer;
    border: 2px solid var(--panel-bg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}
.slider-row label {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 52px;
    flex-shrink: 0;
}
.slider-row .slider {
    flex: 1;
    min-width: 60px;
}
.slider-val {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════ */
#top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--top-bar-h);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--panel-border);
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.logo-icon {
    width: 22px;
    height: 28px;
    fill: var(--active);
}

.app-name {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 16px;
    color: var(--text);
    letter-spacing: 0.5px;
}

.top-bar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Mode Toggle Button */
.mode-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface-hover);
    transition: background var(--t-fast), color var(--t-fast);
}
.mode-btn:hover {
    background: var(--surface-active);
    color: var(--text);
}
.mode-btn.pixel-mode {
    color: var(--accent-orange);
    background: rgba(255, 107, 53, 0.15);
}

/* Desktop Menu Bar */
.menu-bar {
    display: none; /* shown at desktop breakpoint */
    align-items: center;
    gap: 0;
    margin-left: 12px;
}
.menu-trigger {
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: background var(--t-fast), color var(--t-fast);
}
.menu-trigger:hover,
.menu-trigger.open {
    background: var(--surface-hover);
    color: var(--text);
}


/* ═══════════════════════════════════════════════════════════════
   DROPDOWN MENUS (Desktop)
   ═══════════════════════════════════════════════════════════════ */
.dropdown-menu {
    position: fixed;
    top: var(--top-bar-h);
    z-index: 200;
    min-width: 220px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
    padding: 4px 0;
}
.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--text);
    text-align: left;
    transition: background var(--t-fast);
}
.dropdown-item:hover {
    background: var(--active-dim);
}
.dropdown-item span {
    flex: 1;
}
.dropdown-item kbd {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-dim);
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--surface-hover);
}
.dropdown-item .menu-toggle-indicator {
    margin-left: 8px;
    flex-shrink: 0;
}
.dropdown-divider {
    height: 1px;
    background: var(--panel-border);
    margin: 4px 0;
}
.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 199;
}


/* ═══════════════════════════════════════════════════════════════
   MAIN WORKSPACE
   ═══════════════════════════════════════════════════════════════ */
#workspace {
    position: fixed;
    top: var(--top-bar-h);
    left: 0;
    right: 0;
    bottom: var(--bottom-bar-h); /* Mobile: above bottom toolbar */
    display: flex;
    overflow: hidden;
}


/* ─── Tool Sidebar (hidden on mobile) ─── */
#tool-sidebar {
    display: none; /* shown at tablet+ breakpoint */
    flex-direction: column;
    width: var(--sidebar-w);
    background: var(--panel-bg);
    border-right: 1px solid var(--panel-border);
    padding: 4px;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
}

.tool-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--panel-border);
}
.tool-group:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#tool-sidebar .tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast);
    position: relative;
}
#tool-sidebar .tool-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
}
#tool-sidebar .tool-btn.active {
    background: var(--active-dim);
    color: var(--active);
}

/* Sidebar Color Swatches */
.sidebar-color {
    margin-top: auto;
    padding: 8px 4px;
    display: flex;
    justify-content: center;
    position: relative;
}
.color-swatch {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid var(--panel-border);
    cursor: pointer;
    transition: transform var(--t-fast);
}
.color-swatch:hover {
    transform: scale(1.15);
}
.color-swatch.fg {
    position: relative;
    z-index: 2;
}
.color-swatch.bg {
    position: absolute;
    bottom: 4px;
    right: 0;
    z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════
   CANVAS CONTAINER
   ═══════════════════════════════════════════════════════════════ */
#canvas-container {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
    position: relative;
    background: var(--bg);
}

/* Rulers (hidden by default) */
.ruler {
    display: none;
    background: var(--panel-bg);
    border: none;
}
.ruler-corner {
    display: none;
    background: var(--panel-bg);
    border-right: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
}

/* When rulers are visible (toggled by JS) */
.rulers-visible #canvas-container {
    grid-template-columns: var(--ruler-size) 1fr;
    grid-template-rows: var(--ruler-size) 1fr;
}
.rulers-visible .ruler-corner {
    display: block;
    grid-column: 1;
    grid-row: 1;
}
.rulers-visible .ruler-h {
    display: block;
    grid-column: 2;
    grid-row: 1;
    height: var(--ruler-size);
    border-bottom: 1px solid var(--panel-border);
}
.rulers-visible .ruler-v {
    display: block;
    grid-column: 1;
    grid-row: 2;
    width: var(--ruler-size);
    border-right: 1px solid var(--panel-border);
}
.rulers-visible #canvas-viewport {
    grid-column: 2;
    grid-row: 2;
}


/* Canvas Viewport */
#canvas-viewport {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    overflow: hidden;
    position: relative;
    cursor: crosshair;
    touch-action: none; /* Prevent browser gestures on canvas */
}

/* Canvas Wrapper — positioned by JS for zoom/pan */
#canvas-wrapper {
    position: absolute;
    transform-origin: 0 0;
    will-change: transform;
    /* Checkerboard transparency pattern */
    background-image:
        linear-gradient(45deg, var(--checker-dark) 25%, transparent 25%),
        linear-gradient(-45deg, var(--checker-dark) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--checker-dark) 75%),
        linear-gradient(-45deg, transparent 75%, var(--checker-dark) 75%);
    background-size: calc(var(--checker-size) * 2) calc(var(--checker-size) * 2);
    background-position:
        0 0,
        0 var(--checker-size),
        var(--checker-size) calc(-1 * var(--checker-size)),
        calc(-1 * var(--checker-size)) 0;
    background-color: var(--checker-light);
    image-rendering: pixelated;
}

/* Canvas elements — stacked on top of each other inside wrapper */
#main-canvas,
#ui-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
#main-canvas {
    z-index: 1;
}
#ui-canvas {
    z-index: 3;
    pointer-events: none;
}

/* Grid canvas — lives in viewport space, not wrapper (not CSS-scaled) */
#grid-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
    display: block;
}


/* ═══════════════════════════════════════════════════════════════
   RIGHT PANEL (hidden on mobile)
   ═══════════════════════════════════════════════════════════════ */
#right-panel {
    display: none; /* shown at desktop breakpoint */
    flex-direction: column;
    width: var(--right-panel-w);
    background: var(--panel-bg);
    border-left: 1px solid var(--panel-border);
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
}

.panel-section {
    border-bottom: 1px solid var(--panel-border);
}
.panel-section:last-child {
    border-bottom: none;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    min-height: 36px;
}
.panel-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.panel-actions {
    display: flex;
    gap: 2px;
}


/* ─── Layers Panel ─── */
.layer-controls {
    padding: 4px 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.layers-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 0 6px 6px;
}

.layer-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--t-fast);
    min-height: 44px;
}
.layer-item:hover {
    background: var(--surface-hover);
}
.layer-item.active {
    background: var(--active-dim);
}

.layer-visibility {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    border-radius: 3px;
}
.layer-visibility:hover {
    color: var(--text);
}

.layer-thumb {
    width: 40px;
    height: 40px;
    border-radius: 3px;
    border: 1px solid var(--panel-border);
    background: var(--bg);
    flex-shrink: 0;
    image-rendering: pixelated;
}

.layer-name {
    flex: 1;
    font-size: 12px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.layer-name[contenteditable="true"] {
    background: var(--bg);
    padding: 2px 4px;
    border-radius: 3px;
    outline: 1px solid var(--active);
    user-select: text;
    -webkit-user-select: text;
}

.layer-lock {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-dim);
    border-radius: 3px;
}
.layer-lock:hover {
    color: var(--text-muted);
}
.layer-lock.locked {
    color: var(--accent-orange);
}


/* ─── Tool Options Panel ─── */
.tool-options-content {
    padding: 4px 10px 10px;
}

.tool-option-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tool-option-group[hidden] {
    display: none;
}

.option-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.option-row label {
    font-size: 11px;
    color: var(--text-muted);
}
.option-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* Fill contiguous checkbox */
#fill-contiguous {
    margin-right: 6px;
    accent-color: var(--active);
}


/* ─── Color Section ─── */
#color-section {
    padding: 10px;
}
.color-preview-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.color-preview {
    width: 36px;
    height: 36px;
    border-radius: var(--radius);
    border: 2px solid var(--panel-border);
    cursor: pointer;
    flex-shrink: 0;
    transition: transform var(--t-fast);
}
.color-preview:hover {
    transform: scale(1.1);
}
.hex-input {
    width: 80px;
    font-family: var(--font-mono);
    font-size: 12px;
    text-transform: uppercase;
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.swatch {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    border: 1px solid var(--panel-border);
    cursor: pointer;
    transition: transform var(--t-fast);
}
.swatch:hover {
    transform: scale(1.2);
    z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE BOTTOM TOOLBAR
   ═══════════════════════════════════════════════════════════════ */
#bottom-toolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-bar-h);
    z-index: 100;
    background: var(--panel-bg);
    border-top: 1px solid var(--panel-border);
    display: flex;
    align-items: center;
}

.toolbar-scroll {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
}
.toolbar-scroll::-webkit-scrollbar {
    display: none;
}

#bottom-toolbar .tool-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: var(--radius);
    color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast);
    flex-shrink: 0;
}
#bottom-toolbar .tool-btn:active {
    background: var(--surface-active);
}
#bottom-toolbar .tool-btn.active {
    background: var(--active-dim);
    color: var(--active);
}


/* ═══════════════════════════════════════════════════════════════
   STATUS BAR
   ═══════════════════════════════════════════════════════════════ */
#status-bar {
    position: fixed;
    bottom: var(--bottom-bar-h); /* Above mobile toolbar */
    left: 0;
    right: 0;
    height: var(--status-bar-h);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    background: var(--panel-bg);
    border-top: 1px solid var(--panel-border);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    gap: 12px;
}

.status-left,
.status-center,
.status-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-left {
    min-width: 0;
}
.status-center {
    flex-shrink: 0;
}
.status-right {
    justify-content: flex-end;
    min-width: 0;
}

.status-zoom {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--text-muted);
    transition: background var(--t-fast);
}
.status-zoom:hover {
    background: var(--surface-hover);
}

.status-zoom-btns {
    display: none; /* shown at tablet+ */
    gap: 2px;
}
.status-btn {
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 3px;
    color: var(--text-dim);
    transition: background var(--t-fast), color var(--t-fast);
}
.status-btn:hover {
    background: var(--surface-hover);
    color: var(--text-muted);
}

.status-color {
    display: flex;
    align-items: center;
    gap: 4px;
}
.status-color-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid var(--panel-border);
    display: inline-block;
}


/* ═══════════════════════════════════════════════════════════════
   MOBILE DRAWERS & OVERLAYS
   ═══════════════════════════════════════════════════════════════ */

/* Bottom Sheet Drawer (tool options) */
.drawer {
    position: fixed;
    bottom: var(--bottom-bar-h);
    left: 0;
    right: 0;
    z-index: 150;
    background: var(--panel-bg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-top: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    transform: translateY(100%);
    transition: transform var(--t-slide);
    max-height: 75vh;
    overflow-y: auto;
}
.drawer.open {
    transform: translateY(0);
}
.drawer-handle {
    width: 40px;
    height: 4px;
    background: var(--text-dim);
    border-radius: 2px;
    margin: 8px auto;
    cursor: grab;
}
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px 8px;
}
.drawer-header h3 {
    font-size: 14px;
}
.drawer-content {
    padding: 0 14px 14px;
}

/* Side Drawer (layers, hamburger) */
.side-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 250;
    width: min(300px, 85vw);
    background: var(--panel-bg);
    border-left: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    transform: translateX(100%);
    transition: transform var(--t-slide);
    display: flex;
    flex-direction: column;
}
.side-drawer.open {
    transform: translateX(0);
    visibility: visible;
}
.side-drawer:not(.open) {
    visibility: hidden;
    pointer-events: none;
}
.side-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--panel-border);
    min-height: var(--top-bar-h);
}
.side-drawer-header h3 {
    font-size: 16px;
}
.side-drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}
.side-drawer-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--panel-border);
}

/* Left-side drawer (hamburger menu opens from left) */
#hamburger-menu {
    left: 0;
    right: auto;
    border-left: none;
    border-right: 1px solid var(--panel-border);
    transform: translateX(-100%);
}
#hamburger-menu.open {
    transform: translateX(0);
}

/* Drawer Backdrop */
.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 240;
    background: var(--overlay);
    opacity: 0;
    transition: opacity var(--t-slide);
    pointer-events: none;
}
.drawer-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}


/* ─── Mobile Menu Actions ─── */
.menu-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--panel-border);
}
.menu-section:last-child {
    border-bottom: none;
}
.menu-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    padding: 4px 10px 6px;
}
.menu-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px;
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text);
    text-align: left;
    min-height: 44px;
    transition: background var(--t-fast);
}
.menu-action:active {
    background: var(--surface-active);
}
.menu-action .icon {
    color: var(--text-muted);
}
.menu-toggle-indicator {
    margin-left: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
}
.menu-toggle-indicator.on {
    background: var(--active);
}


/* ═══════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════ */
.modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal[hidden] {
    display: none !important;
}
.modal-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-heavy);
}
.modal-content {
    position: relative;
    z-index: 1;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--panel-border);
}
.modal-header h3 {
    font-size: 16px;
}
.modal-body {
    padding: 16px;
}
.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--panel-border);
}

/* ─── Export Filename Row ─── */
.export-filename-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.export-filename-row label {
    font-size: 12px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.export-filename-row input[type="text"] {
    flex: 1;
    min-width: 0;
}

/* ─── Clear Data Modal ─── */
.clear-data-content {
    max-width: 380px;
}

/* ─── Resize Modals ─── */
.resize-content {
    max-width: 380px;
}
.resize-current-size {
    font-size: 12px;
    color: var(--text-dim);
    margin: 0 0 12px;
}
.resize-current-size span {
    font-family: var(--font-mono);
    color: var(--text-muted);
}
.resize-lock-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--surface-hover);
    color: var(--text-dim);
    transition: background var(--t-fast), color var(--t-fast);
    align-self: flex-end;
    margin-bottom: 2px;
}
.resize-lock-btn:hover {
    background: var(--surface-active);
}
.resize-lock-btn.active {
    background: var(--active-dim);
    color: var(--active);
}
.resize-lock-btn .icon {
    width: 14px;
    height: 14px;
}
.resize-option-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}
.resize-option-row > label {
    font-size: 11px;
    color: var(--text-muted);
}

/* Anchor Grid (Resize Canvas) */
.anchor-grid {
    display: grid;
    grid-template-columns: repeat(3, 28px);
    grid-template-rows: repeat(3, 28px);
    gap: 3px;
    width: max-content;
}
.anchor-cell {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: var(--surface-hover);
    border: 2px solid transparent;
    transition: background var(--t-fast), border-color var(--t-fast);
    cursor: pointer;
    position: relative;
}
.anchor-cell::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: background var(--t-fast);
}
.anchor-cell:hover {
    background: var(--surface-active);
}
.anchor-cell.active {
    border-color: var(--active);
    background: var(--active-dim);
}
.anchor-cell.active::after {
    background: var(--active);
}

/* ─── About Modal ─── */
.about-content {
    max-width: 320px;
    text-align: center;
}
.about-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 24px 16px 28px;
}
.about-logo svg {
    color: var(--active);
}
.about-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--text);
    margin: 4px 0 0;
}
.about-subtitle {
    font-size: 13px;
    color: var(--text-muted);
}
.about-year {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 4px;
}
.about-version {
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--font-mono, monospace);
}


/* ─── New Canvas Dialog ─── */
.splash-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.splash-logo {
    width: 28px;
    height: 34px;
    fill: var(--active);
}
.splash-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.dialog-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.canvas-presets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px;
    margin-bottom: 16px;
}
.preset-btn {
    padding: 8px;
    border-radius: var(--radius);
    background: var(--surface-hover);
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text);
    text-align: center;
    transition: background var(--t-fast), border-color var(--t-fast);
    border: 1px solid transparent;
    min-height: 44px;
}
.preset-btn:hover,
.preset-btn:active {
    background: var(--active-dim);
    border-color: var(--active);
}

.custom-size-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 16px;
}
.input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.input-group label {
    font-size: 11px;
    color: var(--text-muted);
}
.input-group input {
    width: 100%;
}
.input-suffix {
    font-size: 11px;
    color: var(--text-dim);
    position: absolute;
    right: 8px;
    /* hidden for simplicity */
    display: none;
}
.size-x {
    font-size: 16px;
    color: var(--text-dim);
    padding-bottom: 6px;
}

.bg-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bg-options > label {
    font-size: 11px;
    color: var(--text-muted);
}


/* ─── Color Picker Modal ─── */
.color-picker-content {
    max-width: 340px;
}
.color-picker-area {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 280px;
    margin: 0 auto 12px;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
}
.color-picker-area canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.picker-cursor {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.3);
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.hue-slider-wrap,
.alpha-slider-wrap {
    position: relative;
    width: 100%;
    max-width: 280px;
    margin: 0 auto 8px;
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    touch-action: none;
}
.hue-slider-wrap canvas,
.alpha-slider-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.slider-thumb {
    position: absolute;
    top: 0;
    width: 6px;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 3px;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.color-values {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.color-value-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.color-value-row label {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 16px;
}
.color-value-row input {
    flex: 1;
    min-width: 0;
}

.color-preview-compare {
    display: flex;
    border-radius: var(--radius);
    overflow: hidden;
    height: 32px;
}
.color-half {
    flex: 1;
}


/* ─── Export Dialog ─── */
.export-formats {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.format-btn {
    flex: 1;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--surface-hover);
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    text-align: center;
    transition: background var(--t-fast), border-color var(--t-fast);
    border: 1px solid transparent;
    min-height: 44px;
}
.format-btn:hover {
    background: var(--surface-active);
}
.format-btn.active {
    background: var(--active-dim);
    border-color: var(--active);
    color: var(--active);
}


/* ═══════════════════════════════════════════════════════════════
   BANNERS (Install, Restore)
   ═══════════════════════════════════════════════════════════════ */
.banner {
    position: fixed;
    bottom: calc(var(--bottom-bar-h) + var(--status-bar-h) + 8px);
    left: 8px;
    right: 8px;
    z-index: 180;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: slideUp 300ms ease;
}
.banner[hidden] {
    display: none !important;
}
.banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.banner-icon {
    width: 28px;
    height: 28px;
    fill: var(--active);
    flex-shrink: 0;
}
.banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.banner-text strong {
    font-size: 14px;
}
.banner-text span {
    font-size: 12px;
    color: var(--text-muted);
}
.banner-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}


/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Tool selection ripple */
.tool-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--active);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 200ms ease, transform 200ms ease;
    pointer-events: none;
}
.tool-btn.ripple::after {
    opacity: 0.2;
    transform: scale(1);
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE: Hide/Show helpers
   ═══════════════════════════════════════════════════════════════ */
.desktop-only {
    display: none !important;
}
/* .mobile-only is shown by default (base = mobile) */


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE: TABLET (768px – 1199px)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    :root {
        --bottom-bar-h: 0px; /* No bottom toolbar on tablet+ */
    }

    /* Hide mobile-only elements */
    .mobile-only {
        display: none !important;
    }

    /* Show tool sidebar */
    #tool-sidebar {
        display: flex;
    }

    /* Workspace fills full height (no bottom bar) */
    #workspace {
        bottom: var(--status-bar-h);
    }

    /* Status bar at true bottom */
    #status-bar {
        bottom: 0;
    }

    /* Show status bar zoom buttons */
    .status-zoom-btns {
        display: flex;
    }

    /* Right panel: slides over canvas on tablet */
    #right-panel {
        display: none; /* toggled by JS */
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 50;
        box-shadow: var(--shadow);
    }
    #right-panel.open {
        display: flex;
    }
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE: DESKTOP (≥ 1200px)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    /* Show desktop-only elements */
    .desktop-only {
        display: flex !important;
    }

    /* Menu bar visible */
    .menu-bar {
        display: flex !important;
    }

    /* Right panel: always visible, part of flex layout */
    #right-panel {
        display: flex;
        position: static;
        box-shadow: none;
    }

    /* Wider sidebar for desktop */
    :root {
        --sidebar-w: 52px;
    }

    /* App name visible */
    .app-name {
        display: inline;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PIXEL ART MODE INDICATOR
   ═══════════════════════════════════════════════════════════════ */
/* image-rendering on canvases is managed by CanvasEngine */

body.pixel-art-mode .mode-btn {
    color: var(--accent-orange);
    background: rgba(255, 107, 53, 0.15);
}


/* ═══════════════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════════════ */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

[hidden] {
    display: none !important;
}

/* Safe area insets for notch devices */
@supports (padding: env(safe-area-inset-bottom)) {
    #bottom-toolbar {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));
    }
    #status-bar {
        bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));
    }
    .banner {
        bottom: calc(var(--bottom-bar-h) + var(--status-bar-h) + env(safe-area-inset-bottom) + 8px);
    }
    .drawer {
        bottom: calc(var(--bottom-bar-h) + env(safe-area-inset-bottom));
    }
}

@media (min-width: 768px) {
    @supports (padding: env(safe-area-inset-bottom)) {
        #bottom-toolbar {
            padding-bottom: 0;
        }
    }
}


/* ═══════════════════════════════════════════════════════════════
   CROP TOOL OVERLAY (Phase 5d)
   ═══════════════════════════════════════════════════════════════ */

.crop-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.crop-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   BTN-GROUP WRAP (multi-row button groups for crop aspect, etc.)
   ═══════════════════════════════════════════════════════════════ */

.btn-group-wrap {
    flex-wrap: wrap;
}

.btn-group-wrap .btn-sm {
    margin-bottom: 4px;
}


/* ═══════════════════════════════════════════════════════════════
   LAYER ITEM DRAG STATES
   ═══════════════════════════════════════════════════════════════ */

.layer-item.dragging {
    opacity: 0.4;
}

.layer-item.drag-over {
    border-top: 2px solid var(--active);
}

.layer-item .layer-lock.locked .icon {
    color: var(--accent-orange);
}


/* ═══════════════════════════════════════════════════════════════
   COLOR PICKER CURSOR (Phase 6)
   ═══════════════════════════════════════════════════════════════ */

.color-picker-area {
    position: relative;
    user-select: none;
    touch-action: none;
}

.picker-cursor {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.3);
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.hue-slider-wrap,
.alpha-slider-wrap {
    position: relative;
    margin-top: 8px;
    user-select: none;
    touch-action: none;
}

.hue-slider-wrap canvas,
.alpha-slider-wrap canvas {
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: block;
    width: 100%;
}

.slider-thumb {
    position: absolute;
    top: 50%;
    width: 6px;
    height: calc(100% + 4px);
    background: #fff;
    border: 1px solid rgba(0,0,0,0.4);
    border-radius: 2px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.color-preview-compare {
    display: flex;
    margin-top: 12px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    height: 36px;
}

.color-half {
    flex: 1;
}

.color-values {
    margin-top: 12px;
}

.color-value-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.color-value-row label {
    font-size: 11px;
    color: var(--text-muted);
    min-width: 18px;
    text-align: center;
}

.color-value-row input[type="text"],
.color-value-row input[type="number"] {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--panel-border);
    color: var(--text);
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12px;
    min-width: 0;
}

.color-value-row input[type="number"] {
    max-width: 52px;
    -moz-appearance: textfield;
}

.color-value-row input[type="number"]::-webkit-inner-spin-button,
.color-value-row input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}