:root {
    --bg: #050508;
    --panel: rgba(20, 20, 35, 0.7);
    --neon: #00f2ff;
    --purple: #7000ff;
    --text: #e0e0e0;
    --orange: #ff8c00;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Arial', sans-serif; -webkit-tap-highlight-color: transparent; }

body {
    background: var(--bg);
    background-image: radial-gradient(circle at top, #1a1a2e 0%, #050508 100%);
    color: var(--text);
    height: 100vh;
    overflow: hidden;
}

/* Loading */
.loader-container { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.astro-icon svg { width: 60px; animation: rotate 3s linear infinite; filter: drop-shadow(0 0 5px var(--neon)); }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.progress-bar { width: 180px; height: 3px; background: #1a1a2e; border-radius: 10px; overflow: hidden; }
.progress-fill { width: 0%; height: 100%; background: var(--neon); box-shadow: 0 0 10px var(--neon); transition: 0.3s; }

/* Header & Nav */
#app { padding: 15px; display: flex; flex-direction: column; height: 100vh; }
.hidden { display: none !important; }
header { margin-bottom: 10px; }
.header-info { display: flex; justify-content: space-between; font-size: 11px; font-weight: bold; color: var(--purple); margin-bottom: 10px; }

.top-nav {
    display: flex; background: rgba(255,255,255,0.03); border: 1px solid rgba(112,0,255,0.2);
    border-radius: 12px; padding: 8px 5px;
}
.nav-item { flex: 1; background: none; border: none; color: #555; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: 0.3s; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item span { font-size: 9px; font-weight: bold; }
.nav-item.active { color: var(--neon); filter: drop-shadow(0 0 5px var(--neon)); }

/* Display */
.display-area {
    background: var(--panel); backdrop-filter: blur(10px); padding: 15px;
    border-radius: 15px; text-align: right; margin-bottom: 10px; min-height: 120px;
}
#prev-op { font-size: 14px; color: #777; height: 20px; }
#current-op { font-size: 2.2rem; color: var(--neon); overflow-x: auto; white-space: nowrap; }

/* Grid Kalkulator (5 Kolom) */
.calc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.calc-grid button { 
    background: none; border: none; color: white; padding: 15px 0; 
    border-radius: 50%; font-size: 1.1rem; transition: 0.2s;
}
.calc-grid button:active { background: rgba(255,255,255,0.1); }
.btn-op { color: var(--orange) !important; }
.btn-act { color: #ff5555 !important; }
.btn-eq { background: var(--orange) !important; color: white !important; box-shadow: 0 4px 10px rgba(255,140,0,0.3); }

/* Panels */
.astro-panel, .unit-panel, .notes-container {
    background: var(--panel); padding: 15px; border-radius: 15px; height: 60vh; overflow-y: auto;
}
input, select, textarea {
    width: 100%; background: rgba(0,0,0,0.3); border: 1px solid var(--purple);
    color: white; padding: 12px; margin: 8px 0; border-radius: 8px; outline: none;
}
.res-box { background: rgba(0,242,255,0.1); padding: 10px; border-radius: 5px; border-left: 3px solid var(--neon); margin-top: 10px; font-size: 13px; font-family: monospace; }
textarea { height: 250px; resize: none; font-family: monospace; }