Initial commit

files/styles.css

@@ -0,0 +1,105 @@
+/* Catppuccin Mocha / Latte. Local assets only; Dex forms/templates unchanged. */
+:root {
+  color-scheme: dark;
+  --base: #1e1e2e;
+  --mantle: #181825;
+  --surface: #313244;
+  --border: #585b70;
+  --text: #cdd6f4;
+  --muted: #a6adc8;
+  --accent: #cba6f7;
+  --accent-hover: #b4befe;
+  --error: #f38ba8;
+  --focus: #fab387;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    color-scheme: light;
+    --base: #eff1f5;
+    --mantle: #e6e9ef;
+    --surface: #fff;
+    --border: #9ca0b0;
+    --text: #4c4f69;
+    --muted: #5c5f77;
+    --accent: #8839ef;
+    --accent-hover: #7287fd;
+    --error: #d20f39;
+    --focus: #fe640b;
+  }
+}
+* { box-sizing: border-box; }
+.theme-body {
+  margin: 0;
+  min-height: 100vh;
+  background: var(--base);
+  color: var(--text);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  line-height: 1.6;
+}
+.theme-navbar {
+  background: var(--mantle);
+  border-bottom: 1px solid var(--border);
+  padding: 1.4rem;
+  text-align: center;
+}
+.theme-navbar__logo-wrap { display: inline-block; max-width: 100%; }
+.theme-navbar__logo { display: block; width: 240px; height: 72px; max-width: 100%; }
+.dex-container {
+  color: var(--text);
+  width: min(500px, calc(100% - 2rem));
+  min-width: 0;
+  margin: clamp(2rem, 8vh, 5rem) auto;
+}
+.theme-panel {
+  padding: clamp(1.4rem, 5vw, 2.6rem);
+  background: var(--mantle);
+  border: 1px solid var(--border);
+  border-radius: 1.25rem;
+  box-shadow: 0 12px 40px rgb(0 0 0 / 10%);
+}
+.theme-heading { font-size: 1.6rem; font-weight: 750; line-height: 1.25; margin: 0 0 1.2rem; }
+.theme-form-row { display: block; margin: 1.1rem auto; }
+.theme-form-label { display: block; text-align: left; width: 100%; max-width: 320px; margin: 0 auto .4rem; font-size: .95rem; font-weight: 600; }
+.theme-form-input {
+  display: block;
+  width: 100%;
+  max-width: 320px;
+  min-height: 48px;
+  margin: auto;
+  padding: .75rem 1rem;
+  background: var(--base);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: .65rem;
+  font: inherit;
+}
+.theme-form-input::placeholder { color: var(--muted); }
+.dex-btn { border-radius: .65rem; box-shadow: none; font: inherit; max-width: 100%; }
+.theme-btn--primary, .theme-btn--success, .theme-btn-provider {
+  background: var(--accent);
+  color: var(--mantle);
+  border: 1px solid transparent;
+  min-height: 48px;
+  min-width: 0;
+  width: 100%;
+  max-width: 320px;
+  padding: .5rem 1rem;
+  font-weight: 700;
+}
+.theme-btn-provider { background: var(--surface); color: var(--text); border-color: var(--border); }
+.theme-btn--primary:hover, .theme-btn--success:hover { background: var(--accent-hover); }
+.theme-btn-provider:hover { border-color: var(--accent); }
+.dex-btn-icon { border-radius: .3rem; margin: 0 .5rem 0 0; }
+.dex-btn-text { line-height: 2rem; padding: .2rem; }
+a { color: var(--accent); text-underline-offset: .2em; }
+a:hover { color: var(--accent-hover); }
+.theme-link-back { margin-top: 1rem; }
+.dex-subtle-text, .dex-separator, .dex-list { color: var(--muted); }
+.dex-error-box { background: var(--surface); color: var(--error); border: 1px solid var(--error); border-radius: .6rem; padding: .7rem; max-width: 100%; }
+.theme-form-input:focus-visible, .dex-btn:focus-visible, a:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 3px;
+}
+@media (prefers-color-scheme: light) {
+  .theme-btn--primary, .theme-btn--success { color: #fff; }
+}