body {
    margin:0; padding:20px;
    background:#111; color:#fff; font-family:Lato, sans-serif;
}
#nullmath { max-width:550px; margin:0 auto; }
h1 { text-align:center; margin-bottom:10px; }

#tabs { display:flex; margin-bottom:10px; justify-content:space-between; }
.tab-btn {
    flex:1; padding:10px; margin:0 2px;
    background:#222; border:none; border-radius:5px;
    cursor:pointer; transition:0.1s; color:#fff;
}
.tab-btn.active { background:#0f0; color:#000; }
.tab-btn:hover { background:#333; }

.tab-content { display:none; margin-top:10px; }
.tab-content.active { display:block; }

#calc-display {
    background:#111; color:#0f0; font-family:monospace;
    border-radius:8px; padding:10px; min-height:50px; margin-bottom:10px;
}
#calc-prev { font-size:14px; color:#888; }
#calc-current { font-size:24px; }

#calc-buttons { display:grid; grid-template-columns:repeat(4,1fr); grid-gap:10px; }

button { background:#333; color:#fff; border:none; border-radius:5px; padding:15px; font-size:16px; cursor:pointer; transition:0.1s; }
button:hover { background:#444; }
.operator { background:#0f0; color:#000; }
.operator:hover { background:#0c0; }
.func-btn { background:#555; }
.func-btn:hover { background:#666; }

/* Graph */
#graph input { width:100%; padding:8px; margin-bottom:10px; background:#222; border:1px solid #fff; color:#fff; border-radius:5px; }
#graph-canvas { border:1px solid #555; background:#111; border-radius:5px; }

/* Base Conversion Inputs */
#base input { width:100%; padding:8px; margin:5px 0; background:#222; color:#fff; border:1px solid #fff; border-radius:5px; }

/* Matrix/Stats */
#matrix textarea, #stats textarea { width:100%; background:#222; color:#fff; border:1px solid #fff; border-radius:5px; padding:8px; margin-bottom:5px; }
#matrix-output, #stats-output { background:#111; padding:10px; border:1px solid #fff; border-radius:5px; min-height:50px; }