:root { --bg: #050a15; --accent: #00d4ff; --glass: rgba(255, 255, 255, 0.03); --border: rgba(255, 255, 255, 0.1); }
body { margin: 0; background: var(--bg); color: #e2e8f0; font-family: 'Segoe UI', sans-serif; overflow: hidden; }

/* 3D Animated Mesh */
.background-container { position: fixed; width: 100%; height: 100%; z-index: -1; perspective: 1000px; background: radial-gradient(circle at center, #0a1931 0%, #050a15 100%); }
.mesh-grid { position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background-image: linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px); background-size: 50px 50px; transform: rotateX(60deg); animation: meshMove 15s linear infinite; }
@keyframes meshMove { from { transform: rotateX(60deg) translateY(0); } to { transform: rotateX(60deg) translateY(50px); } }

.glass { background: var(--glass); backdrop-filter: blur(25px); border: 1px solid var(--border); border-radius: 12px; }
.app-shell { height: 100vh; display: grid; grid-template-rows: 100px 1fr; padding: 25px; box-sizing: border-box; gap: 20px; }

header { display: flex; align-items: center; justify-content: space-between; padding: 0 40px; }
.logo { font-size: 1.8rem; font-weight: 800; color: #fff; }
.logo span { color: var(--accent); text-shadow: 0 0 10px var(--accent); }

.dashboard-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; grid-template-rows: 1fr 1.5fr; gap: 20px; overflow: hidden; }
.module-card { padding: 20px; display: flex; flex-direction: column; position: relative; }
.module-id { font-size: 0.7rem; font-weight: 900; color: var(--accent); letter-spacing: 1px; margin-bottom: 15px; }

.cyber-btn, .action-btn { background: transparent; border: 1.2px solid var(--accent); color: var(--accent); padding: 10px; border-radius: 4px; cursor: pointer; font-weight: 700; width: 100%; }

.heritage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; overflow-y: auto; }
.h-node { background: rgba(255,255,255,0.02); border-radius: 10px; overflow: hidden; border: 1px solid var(--border); transition: 0.3s; }
.h-node img { width: 100%; height: 110px; object-fit: cover; }
.h-label { padding: 8px; font-size: 0.75rem; font-weight: 600; text-align: center; }

#qrcode img { margin: 0 auto; width: 120px; filter: invert(1) hue-rotate(180deg) brightness(1.5); }
.map-viewport { flex-grow: 1; background: rgba(0,0,0,0.5); position: relative; display: flex; align-items: center; justify-content: center; border-radius: 8px; }