Refactor shared layouts and remove unused CSS

app/static/app.css

@@ -8,6 +8,7 @@
   --primary: #1f2937;
   --primary-strong: #0f172a;
   --success: #16a34a;
+  --danger: #b91c1c;
 }
 
 * {
@@ -26,15 +27,19 @@ body {
 }
 
 .topbar {
-  height: 64px;
   border-bottom: 1px solid var(--border);
   background: var(--surface);
+}
+
+.topbar-inner {
+  max-width: 1000px;
+  margin: 0 auto;
+  min-height: 64px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 12px;
   padding: 0 20px;
-  position: sticky;
-  top: 0;
 }
 
 .brand {
@@ -58,12 +63,7 @@ body {
   font-weight: 600;
 }
 
-.topnav a:hover {
-  color: var(--text);
-  background: var(--surface-soft);
-  border-color: var(--border);
-}
-
+.topnav a:hover,
 .topnav a.active {
   color: var(--text);
   background: var(--surface-soft);
@@ -76,18 +76,41 @@ body {
   padding: 7px 10px;
   font-size: 0.9rem;
   color: var(--muted);
+  border-radius: 4px;
 }
 
 .page-wrap {
-  max-width: 1080px;
+  max-width: 1000px;
   margin: 0 auto;
   padding: 24px 20px 30px;
 }
 
+h1,
+h2,
+h3 {
+  margin: 0;
+}
+
 h1 {
-  margin: 8px 0 10px;
-  font-size: clamp(1.6rem, 3vw, 2.25rem);
-  line-height: 1.15;
+  margin-bottom: 12px;
+  font-size: clamp(1.6rem, 3vw, 2.1rem);
+}
+
+h2 {
+  margin-bottom: 10px;
+  font-size: 1.25rem;
+}
+
+h3 {
+  margin: 14px 0 0;
+  font-size: 1rem;
+}
+
+.panel {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 8px;
+  padding: 16px;
 }
 
 .cta-row {
@@ -124,10 +147,8 @@ h1 {
 }
 
 .queue-layout {
-  margin-top: 14px;
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
+  grid-template-columns: 1fr;
 }
 
 .chip-row {
@@ -153,45 +174,103 @@ h1 {
   background: #eef2f6;
 }
 
-.friend-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.search-form {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 12px;
 }
 
-.friend-list li {
+.search-form input {
+  flex: 1;
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 9px 12px;
+  font: inherit;
+}
+
+.friends-section,
+.friends-search-panel {
+  margin-top: 14px;
+}
+
+.friends-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.friend-card {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface-soft);
+  padding: 10px;
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 7px 0;
-  border-top: 1px solid var(--border);
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.friend-main {
+  min-width: 0;
+}
+
+.friend-username {
+  font-weight: 600;
+}
+
+.friend-status {
+  font-size: 0.9rem;
   color: var(--muted);
 }
 
-.friend-list li:first-child {
-  border-top: 0;
+.status-online {
+  color: var(--success);
 }
 
-.dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-  background: var(--success);
+.status-offline {
+  color: var(--muted);
 }
 
-@media (max-width: 900px) {
-  .panel-grid {
-    grid-template-columns: 1fr;
-  }
+.friend-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
 
-  .queue-layout {
-    grid-template-columns: 1fr;
-  }
+.friend-note,
+.muted {
+  color: var(--muted);
+}
+
+.flash-stack {
+  margin-bottom: 14px;
+  display: grid;
+  gap: 8px;
+}
+
+.flash {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 6px;
+  padding: 10px 12px;
+  color: var(--text);
+}
+
+.flash.success {
+  border-color: #b7dfc3;
+  background: #ecfdf3;
+}
+
+.flash.error {
+  border-color: #f0c2c2;
+  background: #fef2f2;
+  color: var(--danger);
 }
 
 @media (max-width: 700px) {
-  .topbar {
-    height: auto;
+  .topbar-inner {
+    min-height: auto;
     flex-wrap: wrap;
     gap: 8px;
     padding: 10px 14px;
@@ -211,9 +290,12 @@ h1 {
     padding: 16px 14px 24px;
   }
 
-  .hero,
-  .stack-head,
-  .panel {
-    padding: 14px;
+  .search-form {
+    flex-direction: column;
+  }
+
+  .friend-card {
+    flex-direction: column;
+    align-items: flex-start;
   }
 }

app/static/style.css

@@ -1,9 +1,93 @@
-.link-button {
-  border: 1px solid black;
-  padding: 10px;
-  text-decoration: none;
-  border-radius: 5px;
-  background-color: lightgray;
-  color: black;
-  margin: 5px;
+:root {
+  --bg: #f4f6f8;
+  --surface: #ffffff;
+  --border: #dde2e8;
+  --text: #111827;
+  --muted: #5f6b7a;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Segoe UI", sans-serif;
+  color: var(--text);
+  background: var(--bg);
+}
+
+.public-wrap {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 24px 20px;
+}
+
+.public-card {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 8px;
+  padding: 18px;
+}
+
+h1 {
+  margin: 0 0 10px;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.public-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.auth-form {
+  display: grid;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+.auth-form input {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 9px 10px;
+  font: inherit;
+}
+
+.link-button {
+  display: inline-block;
+  border: 1px solid #111827;
+  padding: 8px 12px;
+  text-decoration: none;
+  border-radius: 4px;
+  color: #111827;
+  background: #f3f4f6;
+  cursor: pointer;
+  font: inherit;
+}
+
+.flash-stack {
+  margin-bottom: 10px;
+  display: grid;
+  gap: 8px;
+}
+
+.flash {
+  border: 1px solid var(--border);
+  background: var(--surface);
+  border-radius: 6px;
+  padding: 10px 12px;
+}
+
+.flash.error {
+  border-color: #f0c2c2;
+  background: #fef2f2;
+}
+
+.flash.success {
+  border-color: #b7dfc3;
+  background: #ecfdf3;
 }