:root {
    /* --- UI Panel Design System --- */
    --ui-background: rgba(242, 242, 247, 0.8);
    --ui-backdrop-blur: 20px;
    --ui-border-color: rgba(0, 0, 0, 0.1);
    --ui-border-radius: 16px;
    --ui-box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    --ui-padding: 1rem;
    --ui-screen-margin: 10px;
}

/* --- Reusable UI Panel Class --- */
.ui-panel {
    background: var(--ui-background);
    backdrop-filter: blur(var(--ui-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--ui-backdrop-blur));
    border: 1px solid var(--ui-border-color);
    border-radius: var(--ui-border-radius);
    box-shadow: var(--ui-box-shadow);
    padding: var(--ui-padding);
}