Adjusted name ux

wwwroot/styles.css

@@ -10,10 +10,8 @@ body {
 }
 
 .status-bar {
-  display: flex;
+  display: block;
   align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
   background: rgba(15, 23, 42, 0.8);
   border: 1px solid #1f2937;
   border-radius: 10px;
@@ -31,18 +29,20 @@ body {
 .counts {
   color: #9ca3af;
   font-size: 13px;
+  margin-left: 12px;
 }
 
-.name-bar {
+.phase-bar {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 12px;
-  margin-top: 8px;
-  background: rgba(15, 23, 42, 0.8);
-  border: 1px solid #1f2937;
-  border-radius: 10px;
-  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
+}
+.name-bar {
+  display: flex;
+  gap: 10px;
+  padding: 10px 12px;
+  align-items: center;
 }
 .name-bar input { width: 180px; }
 .name-bar .hint { margin: 0; }
@@ -139,6 +139,10 @@ button.ghost {
   min-height: 220px;
 }
 
+.subcard {
+  margin-top: 16px;
+}
+
 .card-visual {
   height: 200px;
   background: linear-gradient(135deg, #1d4ed8, #22c55e);