Settings

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

@@ -140,6 +140,151 @@ body {
     margin-top: 6px;
 }
 
+.settings-hero {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+    align-items: center;
+}
+
+.settings-layout {
+    display: grid;
+    grid-template-columns: 2fr minmax(260px, 1fr);
+    gap: 18px;
+    align-items: start;
+}
+
+@media (max-width: 900px) {
+    .settings-layout {
+        grid-template-columns: 1fr;
+    }
+}
+
+.settings-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.settings-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+}
+
+.hero-copy h1 {
+    margin: 8px 0 6px;
+}
+
+.stat-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 12px;
+}
+
+.stat-grid.compact {
+    gap: 10px;
+}
+
+.stat {
+    border: 1px solid #1f2937;
+    border-radius: 12px;
+    padding: 14px;
+    background: rgba(255, 255, 255, 0.02);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+}
+
+.stat-label {
+    color: #cbd5e1;
+    font-size: 13px;
+    margin: 0 0 4px;
+}
+
+.stat-value {
+    font-size: 22px;
+    font-weight: 700;
+    margin: 0;
+}
+
+.stat-subtitle {
+    margin: 6px 0 0;
+    color: #94a3b8;
+    font-size: 12px;
+}
+
+.field-hint {
+    color: #94a3b8;
+    font-size: 13px;
+    margin: 6px 0 0;
+}
+
+.form-section {
+    border: 1px solid #1f2937;
+    border-radius: 12px;
+    padding: 14px;
+    background: rgba(255, 255, 255, 0.01);
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.form-heading h3 {
+    margin: 4px 0 0;
+}
+
+.form-heading .muted {
+    margin-top: 2px;
+}
+
+.form-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin-top: 4px;
+}
+
+.status-chip {
+    padding: 8px 12px;
+    border-radius: 999px;
+    background: rgba(148, 163, 184, 0.1);
+    border: 1px solid rgba(148, 163, 184, 0.3);
+    color: #e2e8f0;
+    font-size: 14px;
+    margin: 0;
+}
+
+.status-chip.status-success {
+    background: rgba(34, 197, 94, 0.12);
+    border-color: rgba(34, 197, 94, 0.35);
+    color: #bbf7d0;
+}
+
+.status-chip.status-warning {
+    background: rgba(251, 191, 36, 0.12);
+    border-color: rgba(251, 191, 36, 0.4);
+    color: #fef3c7;
+}
+
+.info-card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.info-card.subtle {
+    background: rgba(15, 23, 42, 0.75);
+}
+
+.hint-list {
+    margin: 0;
+    padding-left: 16px;
+    color: #cbd5e1;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
 .channels-footer {
     display: flex;
     align-items: center;