/* TAHOGRAF GENESIS Design System */
:root { --bg: #0d1117; --bg-card: #12121a; --green: #1a4d3a; --gold: #d4af37; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: #e8e8f0; font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif; min-height: 100vh; }
#app { display: flex; flex-direction: column; min-height: 100vh; }
.screen { display: flex; flex-direction: column; min-height: 100vh; }
.screen[hidden] { display: none !important; }
#login-screen { justify-content: center; align-items: center; padding: 2rem 1.5rem; background: radial-gradient(ellipse at 50%, rgba(26,77,58,0.3) 0%, transparent 70%); }
.login-inner { width: 100%; max-width: 360px; text-align: center; }
.login-logo { font-size: 4rem; margin-bottom: 0.5rem; }
.login-title { font-size: 1.5rem; font-weight: 700; color: var(--gold); margin-bottom: 0.25rem; }
.genesis-btn { width: 100%; padding: 1rem 1.5rem; background: linear-gradient(135deg, var(--green) 0%, #1f6b50 100%); color: var(--gold); border: 1px solid rgba(212,175,55,0.25); border-radius: 14px; font-weight: 600; cursor: pointer; }
#dashboard { background: var(--bg); }
.dash-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.dash-logo { font-size: 1.4rem; font-weight: 700; color: var(--gold); }
.status-card { margin: 0.5rem 1.25rem 0; background: var(--bg-card); border: 1px solid rgba(212,175,55,0.25); border-radius: 14px; padding: 1rem 1.25rem; }
.status-meters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.meter { text-align: center; }
.meter-value { font-size: 1.1rem; font-weight: 700; color: #e8e8f0; }
.cards-section { padding: 1rem 1.25rem 0; }
.card-primary { width: 100%; background: linear-gradient(135deg, var(--green) 0%, #0f3828 100%); border: 1px solid rgba(212,175,55,0.25); border-radius: 14px; padding: 1.25rem; cursor: pointer; display: flex; align-items: center; gap: 1rem; min-height: 80px; }
.card-sec { background: var(--bg-card); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 1rem; cursor: pointer; display: flex; flex-direction: column; min-height: 90px; }
.cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.card-full { width: 100%; background: var(--bg-card); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 1rem 1.25rem; cursor: pointer; display: flex; align-items: center; gap: 1rem; }
.sync-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.25rem; margin: 0.5rem 1.25rem 1.5rem; background: var(--bg-card); border-radius: 8px; }
.sync-dot { width: 6px; height: 6px; border-radius: 50%; background: #2ecc71; }
.sync-dot.offline { background: #f39c12; }
.hidden { display: none !important; }
@media (min-width: 480px) { .login-inner { padding: 2rem; background: var(--bg-card); border-radius: 20px; } .cards-grid { grid-template-columns: repeat(3, 1fr); } }