improved a lot of things

packages/app/src/components/canvas/Canvas.tsx

@@ -350,6 +350,8 @@ function ZonePromptOverlay({
               fontFamily: 'inherit', resize: 'none', outline: 'none',
               marginBottom: 8,
             }}
+            onFocus={e => (e.currentTarget.style.borderColor = '#3385FF')}
+            onBlur={e => (e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)')}
           />
           {status === 'error' && (
             <p style={{ fontSize: '0.625rem', color: '#FF8080', margin: '0 0 6px' }}>Request failed — try again</p>

packages/app/src/components/chrome/AppChrome.tsx

@@ -110,6 +110,8 @@ export function AppChrome({ workspaceId, projectId, workspaceName, projectName }
           borderBottom: '1px solid rgba(255,255,255,0.06)',
           display: 'flex', alignItems: 'center',
           padding: '0 14px', gap: 0,
+          zIndex: 10,
+          position: 'relative',
         }}>
           {/* Logo */}
           <Link href="/workspaces" style={{ textDecoration: 'none', display: 'flex', alignItems: 'center', marginRight: 4 }}>

packages/app/src/components/inspector/Inspector.tsx

@@ -40,6 +40,7 @@ export function Inspector() {
 
   return (
     <div
+      className="dark-panel"
       style={{
         gridColumn: 3,
         gridRow: 2,
@@ -79,8 +80,8 @@ export function Inspector() {
         ))}
       </div>
 
-      {/* Content */}
-      <div style={{ flex: 1, overflow: 'auto' }}>
+      {/* Content — minHeight:0 is required so this flex child can actually shrink and scroll */}
+      <div style={{ flex: 1, overflow: 'auto', minHeight: 0 }}>
         {!selectedArtboardId ? (
           <div
             style={{
@@ -373,17 +374,19 @@ function PropsTab({
             marginTop: 8,
             padding: '8px 10px',
             background: 'rgba(0,0,0,0.35)',
-            border: '1px solid rgba(255,255,255,0.06)',
+            border: '1px solid rgba(255,255,255,0.08)',
             borderRadius: 6,
             maxHeight: 220,
-            overflow: 'auto',
+            overflowY: 'auto',
             fontSize: '0.5875rem',
             fontFamily: "'Inter', sans-serif",
             color: 'rgba(255,255,255,0.62)',
             lineHeight: 1.65,
             whiteSpace: 'pre-wrap',
             wordBreak: 'break-word',
-          }}>
+            scrollbarWidth: 'thin',
+            scrollbarColor: 'rgba(255,255,255,0.18) transparent',
+          } as React.CSSProperties}>
             {driftReport}
           </div>
         )}

packages/app/src/components/navigator/ArtboardNavigator.tsx

@@ -81,6 +81,7 @@ export function ArtboardNavigator() {
 
   return (
     <div
+      className="dark-panel"
       style={{
         gridColumn: 1,
         gridRow: 2,

packages/app/src/components/shell/ProjectSettingsForm.tsx

@@ -35,7 +35,6 @@ const INPUT: React.CSSProperties = {
   padding: '9px 12px',
   border: '1px solid rgba(0,0,0,0.12)',
   borderRadius: 9,
-  outline: 'none',
   fontFamily: "'Inter', -apple-system, sans-serif",
   color: '#0A0A0A',
   background: '#FAFAFA',

packages/app/src/components/shell/WorkspaceSettingsForm.tsx

@@ -31,7 +31,6 @@ const INPUT: React.CSSProperties = {
   padding: '9px 12px',
   border: '1px solid rgba(0,0,0,0.12)',
   borderRadius: 9,
-  outline: 'none',
   fontFamily: "'Inter', -apple-system, sans-serif",
   color: '#0A0A0A',
   background: '#FAFAFA',