#newton-app-container {
  --teal-500: #14b8a6; --teal-600: #0d9488; --teal-700: #0f766e;
  --orange-400: #fb923c; --slate-50: #f8fafc; --slate-200: #e2e8f0;
  --slate-500: #64748b; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a;
  
  font-family: 'Segoe UI', system-ui, sans-serif !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  background: white !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
  border-top: 4px solid var(--teal-600) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

#newton-app-container * { box-sizing: border-box !important; }

#newton-app-container .app-header { padding: 16px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 16px !important; border-bottom: 1px solid var(--slate-200) !important; }
#newton-app-container .status-badge { padding: 6px 24px !important; border-radius: 999px !important; font-size: 0.75rem !important; font-weight: bold !important; letter-spacing: 1px !important; border: 1px solid var(--slate-200) !important; background: var(--slate-50) !important; color: var(--slate-700) !important; text-transform: uppercase !important; }
#newton-app-container .status-flying { background: #ccfbf1 !important; color: #115e59 !important; border-color: #99f6e4 !important; }
#newton-app-container .status-crashed { background: #fee2e2 !important; color: #991b1b !important; border-color: #fecaca !important; }
#newton-app-container .status-escaped { background: #f3e8ff !important; color: #6b21a8 !important; border-color: #e9d5ff !important; }

#newton-app-container .hud-grid { width: 100% !important; display: grid !important; grid-template-columns: 1fr 1fr !important; background: var(--slate-50) !important; border-radius: 12px !important; border: 1px solid var(--slate-200) !important; position: relative !important; overflow: hidden !important; }
#newton-app-container .hud-grid::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 4px !important; background: linear-gradient(90deg, var(--teal-600), var(--orange-400)) !important; }
#newton-app-container .hud-box { padding: 12px !important; text-align: center !important; }
#newton-app-container .border-left { border-left: 1px solid var(--slate-200) !important; }
#newton-app-container .hud-label { font-size: 0.75rem !important; font-weight: bold !important; color: var(--slate-500) !important; text-transform: uppercase !important; margin-bottom: 4px !important; }
#newton-app-container .hud-value { font-size: 1.5rem !important; font-family: monospace !important; font-weight: bold !important; color: var(--slate-800) !important; }

#newton-app-container .canvas-container { position: relative !important; width: 100% !important; height: 60vh !important; min-height: 500px !important; background: var(--slate-900) !important; overflow: hidden !important; margin: 0 !important; }
#newton-app-container canvas { width: 100% !important; height: 100% !important; object-fit: contain !important; cursor: grab !important; display: block !important; }
#newton-app-container canvas:active { cursor: grabbing !important; }

#newton-app-container .left-overlay { position: absolute !important; left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; background: rgba(30, 41, 59, 0.8) !important; backdrop-filter: blur(4px) !important; padding: 12px !important; border-radius: 16px !important; border: 1px solid var(--slate-700) !important; display: flex !important; flex-direction: column !important; align-items: center !important; width: 80px !important; z-index: 10 !important; }
#newton-app-container .velocity-display { text-align: center !important; margin-bottom: 12px !important; width: 100% !important; }
#newton-app-container .v-label { font-size: 0.55rem !important; color: #94a3b8 !important; letter-spacing: 1px !important; }
#newton-app-container .v-val { font-size: 0.85rem !important; color: #2dd4bf !important; font-family: monospace !important; font-weight: bold !important; margin: 2px 0 !important; }
#newton-app-container .v-snap { font-size: 0.55rem !important; color: var(--orange-400) !important; font-weight: bold !important; height: 12px !important; }

#newton-app-container .slider-wrapper { position: relative !important; width: 100% !important; height: 180px !important; display: flex !important; justify-content: center !important; align-items: center !important; margin-bottom: 12px !important; }
#newton-app-container input[type=range] { -webkit-appearance: none !important; width: 160px !important; height: 6px !important; background: var(--slate-500) !important; border-radius: 4px !important; transform: rotate(-90deg) !important; outline: none !important; }
#newton-app-container input[type=range]::-webkit-slider-thumb { -webkit-appearance: none !important; width: 18px !important; height: 18px !important; border-radius: 50% !important; background: var(--teal-500) !important; cursor: pointer !important; border: 2px solid white !important; }

#newton-app-container .btn-primary { background: var(--teal-600) !important; color: white !important; border: 1px solid var(--teal-500) !important; width: 100% !important; padding: 12px 0 !important; border-radius: 12px !important; cursor: pointer !important; font-size: 1.2rem !important; display: flex !important; justify-content: center !important; align-items: center !important; transition: 0.2s !important; }
#newton-app-container .btn-primary:hover { background: var(--teal-500) !important; }
#newton-app-container .btn-primary:active { transform: scale(0.95) !important; }

#newton-app-container .right-overlay { position: absolute !important; right: 20px !important; top: 20px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; z-index: 10 !important; }
#newton-app-container .bottom-right-overlay { position: absolute !important; right: 20px !important; bottom: 20px !important; z-index: 10 !important; }
#newton-app-container .btn-icon { background: rgba(30, 41, 59, 0.8) !important; backdrop-filter: blur(4px) !important; color: var(--teal-500) !important; border: 1px solid var(--slate-700) !important; width: 44px !important; height: 44px !important; border-radius: 12px !important; cursor: pointer !important; font-size: 1.2rem !important; display: flex !important; justify-content: center !important; align-items: center !important; transition: 0.2s !important; font-weight: bold !important; }
#newton-app-container .btn-icon:hover { background: var(--slate-700) !important; color: white !important; }
#newton-app-container .btn-large { width: 50px !important; height: 50px !important; border-radius: 16px !important; font-size: 1.4rem !important; color: white !important; }