heavylifting

breaking the trend to say that i fully let AI do the work here im not touching Shit

lowk idek how this thing works. There was an initial different style for the paste pad,

 but idk man thats what you get for AI works. you dont know everything.
 You dont need to.

static/css/pages/index.css

@@ -0,0 +1,9 @@
+.hero {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  width: 100%;
+  max-width: 1000px;
+  margin-bottom: 20px;
+}

static/css/pages/pastepad.css

@@ -0,0 +1,52 @@
+.pastepad-container {
+  width: 100%;
+  max-width: 1000px; /* Increased from 800px */
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.editor {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.editor-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.paste-list {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.paste-item {
+  background: var(--surface-color);
+  padding: 15px;
+  border-radius: var(--border-radius);
+  text-align: left; /* Override card's center alignment */
+}
+
+.paste-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #333;
+  padding-bottom: 10px;
+  width: 100%; /* Ensure full width */
+}
+
+.paste-item pre {
+  background: #111;
+  padding: 10px;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 0;
+  white-space: pre-wrap;
+  width: 100%; /* Ensure full width */
+  box-sizing: border-box;
+}

static/css/pages/queue.css

@@ -0,0 +1,67 @@
+.route-list {
+  display: grid;
+  gap: 10px;
+  width: 800px;
+  padding: 15px;
+  box-sizing: border-box;
+}
+
+.route-item {
+  background-color: var(--surface-color);
+  padding: 15px;
+  border-radius: var(--border-radius);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: monospace;
+  gap: 2em;
+}
+
+.queue-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 800px;
+  margin-bottom: 20px;
+}
+
+.queue-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  align-items: flex-start;
+  width: 800px;
+  padding-inline: 0;
+}
+
+.queue-grid li {
+  flex: 1 1 300px;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  /* Visual styles moved from components.css */
+  background-color: var(--surface-color);
+  margin-bottom: 10px;
+  padding: 15px;
+  border-radius: var(--border-radius);
+  word-break: break-all;
+}
+
+.queue-grid li a {
+  align-items: center;
+  word-break: break-word;
+}
+
+/* Specific override for the queue input form */
+.queue-form {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.queue-form textarea {
+  resize: vertical;
+}

static/css/pages/reader.css

@@ -0,0 +1,5 @@
+.reader-btn {
+  font-size: 1.5rem;
+  padding: 20px 40px;
+  margin-top: 20px;
+}

static/css/pages/trail.css

@@ -0,0 +1,21 @@
+.trail-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 80dvh;
+  width: 100%;
+  cursor: pointer;
+  text-align: center;
+}
+
+.trail-count {
+  font-size: 5rem;
+  font-weight: bold;
+  color: var(--secondary-color);
+}
+
+.trail-hint {
+  color: #666;
+  margin-top: 20px;
+}