Initial commit

static/css/app.css

@@ -0,0 +1,209 @@
+/* Veola — Sega-blue palette and component overrides for Tailwind play CDN. */
+
+:root {
+  --bg:        #1a2b6d;
+  --surface:   #1f3380;
+  --surface-2: #243a93;
+  --accent:    #00a4e4;
+  --yellow:    #f5c400;
+  --text:      #ffffff;
+  --text-2:    #a8c0f0;
+  --danger:    #e84040;
+  --success:   #00e4a4;
+  --border:    rgba(255, 255, 255, 0.12);
+  --shadow:    0 4px 16px rgba(0, 0, 80, 0.4);
+}
+
+html, body {
+  background: var(--bg);
+  color: var(--text);
+  font-family: 'Outfit', system-ui, sans-serif;
+}
+
+.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
+
+a { color: var(--accent); }
+a:hover { text-decoration: underline; }
+
+.v-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+}
+
+.v-card-flat {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.v-divider { border-top: 1px solid var(--border); }
+
+.v-btn {
+  background: var(--accent);
+  color: white;
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  font-weight: 600;
+  transition: filter 0.1s ease;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.v-btn:hover { filter: brightness(1.1); }
+.v-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
+
+.v-btn-ghost {
+  background: transparent;
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+.v-btn-ghost:hover { background: rgba(255,255,255,0.05); }
+
+.v-btn-danger {
+  background: var(--danger);
+  color: white;
+  border-radius: 6px;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.v-input, .v-select, .v-textarea {
+  background: rgba(0, 0, 0, 0.25);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.5rem 0.75rem;
+  width: 100%;
+  font-family: inherit;
+}
+.v-input:focus, .v-select:focus, .v-textarea:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px rgba(0, 164, 228, 0.25);
+}
+
+.v-label {
+  display: block;
+  color: var(--text-2);
+  font-size: 0.85rem;
+  margin-bottom: 0.3rem;
+  letter-spacing: 0.01em;
+}
+
+.v-pill {
+  display: inline-block;
+  padding: 0.15rem 0.55rem;
+  border-radius: 999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.v-pill-active  { background: var(--accent); color: white; }
+.v-pill-paused  { background: rgba(255,255,255,0.1); color: var(--text-2); }
+.v-pill-error   { background: var(--danger); color: white; }
+
+.v-price        { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.5rem; }
+.v-price-target { color: var(--yellow); }
+.v-price-deal   { color: var(--success); }
+
+.v-side-nav {
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  width: 220px;
+  min-height: 100vh;
+  position: sticky;
+  top: 0;
+}
+
+.v-side-nav a {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.7rem 1rem;
+  color: var(--text-2);
+  text-decoration: none;
+  border-left: 3px solid transparent;
+}
+.v-side-nav a.active {
+  background: var(--surface-2);
+  border-left-color: var(--accent);
+  color: white;
+}
+.v-side-nav a:hover { color: white; }
+
+.v-veola-portrait {
+  background: #f3ead8;
+  border-radius: 12px;
+  padding: 1rem;
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+}
+.v-veola-portrait img { display: block; max-width: 100%; height: auto; }
+
+.v-badge {
+  display: inline-block;
+  padding: 0.2rem 0.55rem;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+.v-badge-low    { background: var(--success); color: #053b2c; }
+.v-badge-avg    { background: var(--accent); color: white; }
+.v-badge-target { background: var(--yellow); color: #2a2200; }
+
+table.v-table { width: 100%; border-collapse: collapse; }
+table.v-table th {
+  text-align: left;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--text-2);
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+}
+table.v-table td {
+  padding: 0.7rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: middle;
+}
+table.v-table tr:hover td { background: rgba(255,255,255,0.03); }
+
+.v-error-text { color: var(--danger); font-size: 0.85rem; }
+.v-muted { color: var(--text-2); }
+
+.v-flash {
+  background: rgba(0, 164, 228, 0.15);
+  border: 1px solid var(--accent);
+  border-radius: 6px;
+  padding: 0.6rem 0.9rem;
+  margin-bottom: 1rem;
+}
+.v-flash-error {
+  background: rgba(232, 64, 64, 0.15);
+  border: 1px solid var(--danger);
+  border-radius: 6px;
+  padding: 0.6rem 0.9rem;
+  margin-bottom: 1rem;
+}
+
+/* htmx indicator: hidden by default, visible during in-flight requests. */
+.htmx-indicator { display: none; }
+.htmx-request .htmx-indicator,
+.htmx-request.htmx-indicator { display: inline-flex; }
+
+.v-spinner {
+  display: inline-block;
+  width: 14px; height: 14px;
+  border: 2px solid rgba(255,255,255,0.2);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: v-spin 0.8s linear infinite;
+}
+@keyframes v-spin { to { transform: rotate(360deg); } }