:root {
    --primary-color: #00fff2;
    --bg-dark: #050508;
    --glass-bg: rgba(20, 20, 25, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
}
body { margin: 0; overflow: hidden; background-color: var(--bg-dark); font-family: sans-serif; -webkit-font-smoothing: antialiased; }
canvas { display: block; position: absolute; top:0; left:0; z-index: 1; }
.input_video { display: none; }

/* UI Panel - Glassmorphism Style */
#ui-container {
    position: absolute; top: 20px; right: 20px; width: 260px;
    z-index: 100;
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    color: #eee;
    transition: opacity 0.3s;
}
#ui-container:hover { opacity: 1; }

h3 { margin: 0 0 16px 0; font-weight: 600; letter-spacing: 1px; font-size: 14px; text-transform: uppercase; color: var(--primary-color); }

.control-section { margin-bottom: 24px; }
.label-txt { display: block; margin-bottom: 10px; font-size: 12px; opacity: 0.7; }

/* Shape Grid */
.shape-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shape-btn {
    background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
    color: #ccc; padding: 12px; border-radius: 8px; cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 13px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
}
.shape-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.shape-btn.active {
    background: rgba(0, 255, 242, 0.15);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 0 15px rgba(0, 255, 242, 0.2);
}

/* Color Picker */
.color-picker-wrapper {
    position: relative; height: 40px; border-radius: 8px; overflow: hidden;
    border: 1px solid var(--glass-border); cursor: pointer;
}
input[type="color"] {
    position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    cursor: pointer; border: none; padding: 0; margin: 0;
}

/* Status & Loader */
#loader {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: var(--primary-color); font-size: 14px; z-index: 200; pointer-events: none;
    text-align: center; text-shadow: 0 0 10px rgba(0,255,242,0.5);
}
#status-debug {
    position: absolute; bottom: -30px; left: 0; width: 100%;
    text-align: center; font-size: 12px; opacity: 0.6;
}