* { box-sizing: border-box; }
body { background: #0b0f15; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #e0e0e0; margin: 0; padding-bottom: 30px; }

/* Materialize Overrides for Piek theme */
.container { max-width: 900px; }
.card { background: #0f1e2b!important; border-radius: 24px; padding: 20px; margin-bottom: 20px; border: 1px solid #2b5877; }
h6 { color: #afd6ff; font-weight: 600; letter-spacing: 1.5px; border-bottom: 1px solid #1a4a63; padding-bottom: 10px; margin-top: 0; }

/* Flow Area */
.flow-wrapper { background: #0b1620; border-radius: 36px; padding: 20px 10px; border: 1px solid #1e5775; margin-bottom: 24px; position: relative; }
.canvas-container { position: relative; width: 100%; aspect-ratio: 4/3; min-height: 380px; max-height: 450px; margin: 0 auto; }
canvas.flow-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.node-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* The Nodes */
.flow-node { background: #0e202fcc; backdrop-filter: blur(4px); border-radius: 28px; padding: 10px; border: 2px solid #2b7b9e; text-align: center; pointer-events: auto; min-width: 120px; color: #bfdefa; display: flex; flex-direction: column; align-items: center; }
.node-gauge-wrapper { position: relative; width: 90px; height: 90px; margin-bottom: 5px; }
.node-gauge-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.node-emoji { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; }
.node-title { font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 0.8rem; }
.node-power { font-size: 1.25rem; font-weight: 700; color: #d6ebff; letter-spacing: 0.5px; }

/* Mobile tweaks voor de flow nodes in portrait */
@media (max-width: 450px) { 
    .flow-node { min-width: 100px; padding: 8px; border-radius: 20px; } 
    .node-gauge-wrapper { width: 75px; height: 75px; } 
    .node-power { font-size: 1.1rem; } 
}

/* Table details */
.detail-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #1a3a4e; }
.detail-row:last-child { border-bottom: none; }
.money-pos { color: #4CAF50; font-weight: bold; }
.money-neg { color: #F44336; font-weight: bold; }
.ip-link { color: #888 !important; text-decoration: none; font-size: 0.75rem !important; display: flex; align-items: center; margin-top: 4px; transition: 0.3s; }
.ip-link:hover { color: #2196F3 !important; }

/* Buttons */
.btn.blue { background: #1a4a63 !important; border: 1px solid #2b7b9e; border-radius: 40px; font-weight: bold; letter-spacing: 1px; }
.btn.blue:hover { background: #266b8f !important; }

/* Settings / Config Page Specifics */
.card-panel { background: #0f1e2b!important; border-radius: 12px; border-top: 2px solid #2b5877; }
input { color: white!important; }
label { color: #2196F3!important; }
select.browser-default { background: #1e1e1e; color: white; border: 1px solid #555; border-radius: 4px; padding: 5px; width: 100%; }