@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { --color-bg: #ffffff; --color-bg-elevated: #ffffff; --color-bg-soft: #fafafa; --color-surface: #efefef; --color-accent: #3897f0; --color-accent-deep: #1864ab; --color-accent-soft: #79b8f5; --color-text: #262626; --color-text-muted: #8e8e8e; --color-border: #dbdbdb; --color-danger: #ed4956; --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08); --radius-lg: 1.5rem; --radius-md: 1rem; --radius-sm: 0.65rem; --font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Theme-aware overlay tints - hover/selected states need the opposite tint on a dark background (white-ish instead of black-ish) to stay visible, so these are redefined in [data-theme="dark"] below rather than hardcoded at each call site. */ --overlay-hover: rgba(0, 0, 0, 0.05); --overlay-tint: rgba(56, 151, 240, 0.1); --overlay-on-surface: rgba(0, 0, 0, 0.04); --overlay-focus-ring: rgba(56, 151, 240, 0.2); } /* Cool modern dark theme - a dark slate/blue-gray, not nearly-black, toggled via ThemeService setting data-theme on and persisted to localStorage. */ [data-theme="dark"] { --color-bg: #15171c; --color-bg-elevated: #1c1f26; --color-bg-soft: #20232b; --color-surface: #262a33; --color-accent: #4f9eff; --color-accent-deep: #2f6fd1; --color-accent-soft: #8cc0ff; --color-text: #eef1f6; --color-text-muted: #9aa1ad; --color-border: #2c3038; --color-danger: #f3596a; --shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.55); --overlay-hover: rgba(255, 255, 255, 0.08); --overlay-tint: rgba(79, 158, 255, 0.18); --overlay-on-surface: rgba(255, 255, 255, 0.06); --overlay-focus-ring: rgba(79, 158, 255, 0.28); } * { box-sizing: border-box; } html, body { margin: 0; overflow-x: hidden; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); /* Installed as a PWA, pinch-zoom and the double-tap-to-zoom gesture feel like a bug, not a feature - manipulation keeps panning/scrolling but drops both zoom gestures. Belt-and-suspenders with the viewport meta tag's user-scalable=no, since some browsers weigh one signal more than the other. */ touch-action: manipulation; } h1, h2, h3 { font-weight: 600; margin: 0; } button { font-family: inherit; } a, .btn-link { color: var(--color-accent-soft); } .btn { font-family: inherit; font-size: 0.95rem; font-weight: 500; border: none; border-radius: var(--radius-sm); padding: 0.6rem 1.15rem; cursor: pointer; transition: filter 0.15s ease, transform 0.1s ease; } .btn:active { transform: scale(0.97); } .btn:disabled { cursor: not-allowed; opacity: 0.55; } .btn-primary { background: linear-gradient(135deg, var(--color-accent), var(--color-accent-deep)); color: #fff; } .btn-primary:hover:not(:disabled) { filter: brightness(1.08); } .btn-link { background: none; padding: 0.4rem 0.6rem; text-decoration: none; font-weight: 500; } .btn-link:hover { text-decoration: underline; } .btn-danger { font-family: inherit; font-size: 0.95rem; font-weight: 500; border: none; border-radius: var(--radius-sm); padding: 0.6rem 1.15rem; cursor: pointer; background: var(--color-danger); color: #fff; transition: filter 0.15s ease, transform 0.1s ease; } .btn-danger:hover { filter: brightness(1.08); } .btn-danger:active { transform: scale(0.97); } .form-control { width: 100%; font-family: inherit; font-size: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); padding: 0.7rem 0.95rem; } .form-control::placeholder { color: var(--color-text-muted); } .form-control:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--overlay-focus-ring); } .text-danger { color: var(--color-danger); } .status-text { text-align: center; color: var(--color-text-muted); } #blazor-error-ui { color-scheme: dark; background: #3a1d1d; color: #ffd9d9; bottom: 0; box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.35); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: #3a1d1d; padding: 1rem 1rem 1rem 1rem; color: #ffd9d9; border-radius: var(--radius-sm); } .blazor-error-boundary::after { content: "An error has occurred." } .splash { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.35rem; background: var(--color-bg); } .splash-logo { width: 4.5rem; height: 4.5rem; border-radius: var(--radius-md); filter: drop-shadow(0 10px 26px rgba(41, 82, 200, 0.35)); animation: splash-breathe 1.8s ease-in-out infinite; } .splash-bar { width: 7.5rem; height: 0.2rem; border-radius: 999px; background: var(--color-surface); overflow: hidden; } .splash-bar-fill { display: block; height: 100%; width: var(--blazor-load-percentage, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-deep)); transition: width 0.2s ease-out; } .splash-text { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); } .splash-text:after { content: var(--blazor-load-percentage-text, "Loading"); } @keyframes splash-breathe { 0%, 100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.06); opacity: 1; } }