Improve dashboard look

src/main/resources/static/css/styles.css

@@ -230,6 +230,121 @@ body {
     flex-direction: column;
 }
 
+.dashboard-body {
+    min-height: 100vh;
+    background: radial-gradient(circle at 0% 30%, rgba(59, 130, 246, 0.14), transparent 30%),
+                radial-gradient(circle at 90% 10%, rgba(124, 58, 237, 0.12), transparent 28%),
+                #0f172a;
+    padding: 36px 18px 64px;
+}
+
+.dashboard-shell {
+    max-width: 1100px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.dashboard-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 22px;
+    background: rgba(15, 23, 42, 0.8);
+    border: 1px solid #1f2937;
+    border-radius: 16px;
+    box-shadow: 0 18px 50px rgba(0,0,0,0.35);
+}
+
+.dashboard-header h1 {
+    margin: 6px 0 10px;
+}
+
+.header-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    align-items: flex-end;
+}
+
+.chip-row {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-top: 10px;
+}
+
+.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 10px;
+    border-radius: 999px;
+    background: rgba(124, 58, 237, 0.15);
+    color: #c4b5fd;
+    border: 1px solid rgba(124, 58, 237, 0.25);
+    font-weight: 600;
+}
+
+.chip.subtle {
+    background: rgba(148, 163, 184, 0.12);
+    color: #e2e8f0;
+    border-color: rgba(148, 163, 184, 0.3);
+}
+
+.card-grid {
+    display: grid;
+    gap: 16px;
+}
+
+.card-grid.two-col {
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+}
+
+.card {
+    background: #0b1220;
+    border: 1px solid #1f2937;
+    border-radius: 14px;
+    padding: 18px;
+    box-shadow: 0 14px 40px rgba(0,0,0,0.35);
+}
+
+.card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.pill {
+    padding: 6px 10px;
+    border-radius: 999px;
+    background: rgba(59, 130, 246, 0.15);
+    color: #bfdbfe;
+    border: 1px solid rgba(59, 130, 246, 0.25);
+    font-weight: 600;
+    font-size: 13px;
+}
+
+.inline-form {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+
+.inline-form input {
+    flex: 1;
+    min-width: 220px;
+    padding: 10px;
+    border-radius: 10px;
+    border: 1px solid #1f2937;
+    background: #111827;
+    color: #e2e8f0;
+}
+
 .container {
     max-width: 960px;
     margin: 40px auto;
@@ -435,3 +550,27 @@ body {
 .landing-footer .muted {
     font-size: 12px;
 }
+
+.stacked-list {
+    list-style: none;
+    padding: 0;
+    margin: 12px 0 0;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.stacked-list-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 14px;
+    border-radius: 12px;
+    background: #111827;
+    border: 1px solid #1f2937;
+}
+
+.stacked-list-item .list-title {
+    margin: 0;
+    font-weight: 700;
+}