Config page for adding tokens and settings

static/styles.css

@@ -133,9 +133,71 @@ body {
 }
 
 .faction-card.small h2 { color: #66ccff; margin: 0; }
-.faction-card .controls { display:flex; gap: 0.5rem; align-items:center; margin-bottom: 6px; }
+
+/* Controls row - wraps both populate and status controls */
+.faction-card .controls-row {
+    display: flex;
+    gap: 0.3rem;
+    align-items: center;
+    margin-bottom: 6px;
+    flex-wrap: nowrap;
+}
+
+.faction-card .controls {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+}
 .faction-card .controls input { padding: 0.5rem; border-radius:6px; border: none; }
 
+/* Status controls section */
+.faction-card .status-controls {
+    display: flex;
+    gap: 0.3rem;
+    align-items: center;
+    background-color: #3a3a4d;
+    padding: 0.3rem 0.5rem;
+    border-radius: 6px;
+}
+.faction-card .status-controls label {
+    color: #ffcc66;
+    font-size: 0.75rem;
+    white-space: nowrap;
+}
+.faction-card .status-controls input {
+    width: 38px;
+    padding: 2px 3px;
+    border-radius: 4px;
+    border: none;
+    text-align: center;
+    font-size: 0.85rem;
+    appearance: textfield;
+    -moz-appearance: textfield;
+}
+
+/* Hide spinner buttons in Chrome, Safari, Edge */
+.faction-card .status-controls input::-webkit-outer-spin-button,
+.faction-card .status-controls input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0;
+}
+
+/* Status button */
+.status-btn {
+    padding: 0.5rem 1rem;
+    min-width: 60px;
+    background-color: #4CAF50;
+    color: white;
+    transition: background-color 0.3s;
+}
+.status-btn:hover {
+    opacity: 0.9;
+}
+.status-btn[data-running="true"] {
+    background-color: #ff6b6b;
+}
+
 /* member list in left column */
 .member-list {
     max-height: 380px;
@@ -237,3 +299,92 @@ button:hover { background-color: #3399ff; }
 /* scrollbar niceties for drop zones and lists */
 .member-list::-webkit-scrollbar, .drop-zone::-webkit-scrollbar { width: 8px; height: 8px; }
 .member-list::-webkit-scrollbar-thumb, .drop-zone::-webkit-scrollbar-thumb { background: #66ccff; border-radius: 4px; }
+
+/* =============================
+   Config Page Styles
+   ============================= */
+
+/* Navigation link */
+.nav-link {
+    color: #66ccff;
+    text-decoration: none;
+    font-weight: bold;
+    padding: 0.6rem 1rem;
+    border-radius: 8px;
+    transition: background-color 0.3s;
+}
+
+.nav-link:hover {
+    background-color: rgba(102, 204, 255, 0.1);
+}
+
+/* Config page layout */
+.config-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.config-section {
+    width: 100%;
+}
+
+.config-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.config-group:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.config-group label {
+    color: #66ccff;
+    font-weight: bold;
+    font-size: 1rem;
+}
+
+.config-description {
+    color: #99a7bf;
+    font-size: 0.85rem;
+    margin: 0;
+    font-style: italic;
+}
+
+.config-input {
+    padding: 0.6rem;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background-color: #1a1a26;
+    color: #f0f0f0;
+    font-size: 0.95rem;
+}
+
+.config-input:focus {
+    outline: none;
+    border-color: #66ccff;
+}
+
+.config-save-btn {
+    align-self: flex-start;
+    padding: 0.5rem 1.5rem;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.config-save-btn:hover {
+    background-color: #45a049;
+}