body {
    background-color: #0f172a;
    color: white;
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    user-select: none;
}

#app {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100dvh;
    display: flex; flex-direction: column;
}

.top-bar {
    height: 50px; background: #1e293b; border-bottom: 1px solid #334155;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 15px; z-index: 50; flex-shrink: 0;
}

.canvas-area {
    flex-grow: 1; position: relative; background: #0f172a; overflow: hidden;
}

canvas { display: block; width: 100%; height: 100%; }

.result-box {
    position: absolute; top: 20px; right: 20px; width: 280px;
    background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
    padding: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.5);
    z-index: 40; animation: slideInRight 0.3s ease-out;
}

.next-btn {
    position: absolute; bottom: 30px; right: 30px;
    background: #2563eb; color: white; padding: 12px 24px;
    border-radius: 50px; font-weight: bold; font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.5);
    z-index: 40; transition: transform 0.2s;
}
.next-btn:active { transform: scale(0.95); }

.summary-overlay {
    position: absolute; inset: 0; background: #0f172a;
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; z-index: 100;
}

@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }