Refine premium workbench UX

frontend/src/components/project/AreaPanel.tsx

@@ -49,8 +49,8 @@ export function AreaPanel({
         <small>{selectedArea?.area_m2 ? `${selectedArea.area_m2.toFixed(2)} m2` : 'Select an AOI with geometry for spatial review.'}</small>
       </div>
 
-      <div className="data-panel-form-block">
-        <p className="data-section-label">Create spatial scope</p>
+      <details className="data-panel-form-block">
+        <summary>Create spatial scope</summary>
         <form className="compact-form" onSubmit={onCreateArea}>
           <label>
             AOI name
@@ -80,7 +80,7 @@ export function AreaPanel({
             Create area
           </button>
         </form>
-      </div>
+      </details>
 
       {loadingAreas ? <p>Loading areas...</p> : null}
       {areas.length === 0 ? <p>No areas yet</p> : null}

frontend/src/components/project/ProjectPanel.tsx

@@ -45,8 +45,8 @@ export function ProjectPanel({
         <small>{selectedProject?.region ?? 'Create or load a project to start the workbench.'}</small>
       </div>
 
-      <div className="data-panel-form-block">
-        <p className="data-section-label">Create context</p>
+      <details className="data-panel-form-block">
+        <summary>Create project</summary>
         <form className="compact-form" onSubmit={onCreateProject}>
           <label>
             Name
@@ -76,7 +76,7 @@ export function ProjectPanel({
             Create project
           </button>
         </form>
-      </div>
+      </details>
 
       <div className="demo-actions">
         <button className="secondary-action" type="button" onClick={onLoadDemoWorkflow} disabled={loadingDemoWorkflow} data-testid="load-demo-workflow">