* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: monospace;
    overflow: hidden;
    background: #ffffff;
    color: #000000;
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    position: relative;
}

.hidden {
    display: none !important;
}

.canvas {
    position: relative;
    background: #ffffff;
    margin: 0;
    padding: 0;
    overflow: visible;
    transform-origin: top left;
    display: block;
}

.image-modal {
    position: absolute;
    cursor: move;
    border: 1px solid rgba(0, 0, 0, 0.1);
    user-select: none;
    transition: border 0.2s, width 0.15s ease-out, height 0.15s ease-out;
    transform-origin: center center;
}

.image-modal.focused {
    border: 2px solid #000000;
    z-index: 1000;
}

.image-modal img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    display: block;
    pointer-events: none;
}

.image-manager-link {
    position: fixed;
    bottom: 16px;
    right: 16px;
    padding: 8px 16px;
    border: 1px solid #000000;
    background: #ffffff;
    color: #000000;
    text-decoration: none;
    font-family: monospace;
    font-size: 12px;
    z-index: 9999;
    transition: background 0.2s;
    pointer-events: auto;
}

.image-manager-link:hover {
    background: #000000;
    color: #ffffff;
}

.drag-over {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 2px dashed #000000 !important;
}

.uploading {
    opacity: 0.7;
    pointer-events: none;
}