:root {
  /* Shiva Light Palette */
  --bg-void: #f4f5f7;       /* Ash - Page bg */
  --bg-surface: #ffffff;    /* Surface - Cards/Sidebar */
  --bg-elevated: #f1f5f9;   /* Hover/Active states */
  --text-main: #1f2937;     /* High contrast text */
  --text-muted: #64748b;    /* Secondary text */
  
  --neelkanth: #1a365d;     /* Primary / Headers / Brand */
  --saffron: #e65100;       /* Staged / Accents / Pending */
  
  --tandava-red: #ef4444;   /* Failed / Delete / Error */
  --shakti-teal: #10b981;   /* Executed / Done / Stock OK */
  
  --border: 1px solid #b0bec5; /* Silver */
  --radius: 6px;
  --motion: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --touch: 48px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-void); color: var(--text-main);
  line-height: 1.5; font-size: 16px;
  overflow-x: hidden; display: flex; flex-direction: column; height: 100vh;
}

/* Network State */
#offline-indicator {
  display: none; background: var(--tandava-red); color: #ffffff;
  text-align: center; padding: 4px; font-size: 12px; font-weight: bold;
}
body.is-offline #offline-indicator { display: block; }
body.is-offline .requires-net { opacity: 0.5; pointer-events: none; }

/* Layout: Phone First, Tablet Sidebar (768px) */
.app-container { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.sidebar { display: none; background: var(--bg-surface); border-right: var(--border); width: 280px; flex-shrink: 0; }
.main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

@media (min-width: 768px) {
  .app-container { flex-direction: row; }
  .sidebar { display: flex; flex-direction: column; }
  .mobile-nav { display: none; }
}

/* Touch Targets & Buttons */
button {
  background: var(--bg-elevated); color: var(--text-main); border: var(--border);
  border-radius: var(--radius); min-height: var(--touch); padding: 0 16px;
  font-size: 16px; cursor: pointer; transition: background var(--motion), border-color var(--motion);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
button:active { transform: scale(0.98); }
button.primary { background: var(--neelkanth); color: #ffffff; border-color: var(--neelkanth); }
button.approve { background: rgba(16, 185, 129, 0.1); color: var(--shakti-teal); border-color: var(--shakti-teal); }
button.reject { background: transparent; color: var(--text-muted); border-color: transparent; }

/* Forms */
input, textarea {
  background: var(--bg-surface); border: var(--border); color: var(--text-main);
  border-radius: var(--radius); min-height: var(--touch); padding: 0 16px; font-size: 16px;
  transition: border-color var(--motion); width: 100%;
}
input:focus, textarea:focus { outline: none; border-color: var(--saffron); }
textarea { padding: 12px 16px; line-height: 1.5; }
button.mic-btn { background: var(--neelkanth); color: #ffffff; border: none; border-radius: var(--radius); min-width: 48px; min-height: 48px; }
button.mic-btn.listening { background: var(--saffron); color: #ffffff; }

/* Skeletons */
.skeleton { background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-elevated) 50%, var(--bg-surface) 75%); background-size: 200% 100%; animation: pulse 1.5s infinite linear; border-radius: var(--radius); }
@keyframes pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.badge.staged { background: rgba(230, 81, 0, 0.15); color: var(--saffron); }
.badge.executed { background: rgba(16, 185, 129, 0.15); color: var(--shakti-teal); }