.card-layout {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(to bottom, var(--water-top), var(--water-bottom));
    overflow: hidden;
    height: calc(100vh - var(--header-height));
    position: relative;
    transition: filter 2s ease;
}

.night-mode {
    filter: brightness(0.5) contrast(1.2);
    background: linear-gradient(to bottom, #2c4a6b, #112d4e);
}


.controls {
    position:absolute; top:15px; left:15px; z-index:10;
    display:flex; flex-wrap: wrap; gap:10px;
    background: rgba(10,15,35,0.6);
    padding:10px; border-radius:12px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.controls button, .controls select {
    display: flex; align-items: center; justify-content: center;
    border:none; border-radius:10px; cursor:pointer;
    padding: 8px;
    background: royalblue; color:white;
    transition: background 0.2s ease;
}
.controls button:hover, .controls select:hover { background: dodgerblue; }
.controls button svg { width: 24px; height: 24px; stroke-width: 2; stroke: currentColor; }
.controls select {
    padding: 8px; font-size: 14px; width: 120px;
}