/* Aesthetics: Deep Slate & Neon */
:root {
    --bg-color: #0b0c10;
    --panel-bg: #1f2833;
    --text-color: #c5c6c7;
    --accent-cyan: #66fcf1;
    --accent-cyan-dim: #45a29e;
    --accent-crimson: #ff007f;
    --accent-gold:     #ffc300;
}

body { 
    margin: 0; background-color: var(--bg-color); color: var(--text-color); 
    overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex; height: 100vh;
}

/* 20% Sidebar Panel */
#sidebar {
    width: 300px; min-width: 300px;
    background: var(--panel-bg); 
    box-shadow: 2px 0 15px rgba(0,0,0,0.8); z-index: 10;
    display: flex; flex-direction: column; gap: 15px; padding: 20px; box-sizing: border-box;
    overflow-y: auto;
}

/* 40% Middle 3D Area */
#middle-3d {
    flex-grow: 1; position: relative;
}

/* 40% Right Stereogram Area */
#right-2d {
    width: 40%; min-width: 400px;
    background: var(--bg-color); border-left: 2px solid var(--panel-bg);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}

/* Wulff Net Styling */
#wulff-container {
    width: 80%; aspect-ratio: 1; max-width: 500px; 
    background: #ffffff; /* White background is standard for Wulff nets */
    border-radius: 50%; 
    box-shadow: 0 0 40px rgba(102, 252, 241, 0.15); 
    border: 4px solid var(--accent-cyan-dim);
    position: relative;
}
#wulff { width: 100%; height: 100%; border-radius: 50%; }

.panel-heading { text-align: center; color: var(--accent-cyan); font-weight: bold; letter-spacing: 2px; margin-bottom: 20px;}

h2 { margin: 0; color: var(--accent-cyan); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #333; padding-bottom: 5px; }

.control-group { display: flex; flex-direction: column; gap: 6px; }
label { font-size: 0.8rem; color: #88929b; text-transform: uppercase; letter-spacing: 1px;}
input, select { background: #11151c; color: #fff; border: 1px solid #333; padding: 8px; border-radius: 4px; font-family: inherit; outline: none;}
input:focus, select:focus { border-color: var(--accent-cyan); }

button { 
    background: var(--accent-cyan); color: #000; font-weight: bold; 
    cursor: pointer; transition: 0.2s; padding: 10px; border-radius: 4px; border: none;
    text-transform: uppercase; letter-spacing: 1px; margin-top: 10px;
}
button:hover { background: #b0fdf8; box-shadow: 0 0 10px var(--accent-cyan); }

#btn-reset { background: #3a4b60; color: white; margin-top: auto;}
#btn-reset:hover { background: #ff5555; box-shadow: 0 0 10px #ff5555;}

#status { font-size: 0.75rem; text-align: center; padding-top: 10px; border-top: 1px solid #333; color: #88929b;}
.success { color: var(--accent-cyan); font-weight: bold;} .error { color: #ff5555; }
.coord-inputs { display: flex; gap: 5px; }
.coord-inputs input { width: 100%; }

#group-inventory { font-size: 0.85rem; color: var(--accent-gold); white-space: pre-wrap;}