/* ───────────────────────────────────────────────────────────────────────── C2C design system — ported from Resource/Design/C2C.html ───────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: 'IBM Plex Sans', system-ui, sans-serif; background: var(--bg-page); color: var(--text); transition: background 0.2s, color 0.2s; } /* ── Light theme (default) ── */ :root { --bg-page: #f4f5f7; --bg-surface: #ffffff; --bg-soft: #f8f9fb; --text: #161a20; --text-muted: #697586; --border: #e4e7ec; --border-focus: #2563eb; --accent: #2563eb; --accent-dim: #eaf1ff; --accent-text: #1d4ed8; --err: #dc2626; --err-bg: #fef2f2; --warn: #d97706; --warn-bg: #fffbeb; --ok: #16a34a; --ok-bg: #f0fdf4; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 8px rgba(0,0,0,.04); --shadow-lg: 0 4px 16px rgba(0,0,0,.10); } /* ── Dark theme ── */ [data-theme="dark"] { --bg-page: #0e1420; --bg-surface: #151c2a; --bg-soft: #1a2333; --text: #e6edf6; --text-muted: #8595ab; --border: #26324a; --border-focus: #4d8dff; --accent: #4d8dff; --accent-dim: #1a2c4d; --accent-text: #93bbff; --err: #ff6b6b; --err-bg: #2a1010; --warn: #f5a623; --warn-bg: #2a1f08; --ok: #3fd08a; --ok-bg: #0d2318; --shadow: 0 1px 3px rgba(0,0,0,.3); --shadow-lg: 0 4px 20px rgba(0,0,0,.4); } /* ── Accent overrides (set via [data-accent] on ) ── */ [data-accent="green"] { --accent: #059669; --accent-dim: #ecfdf5; --accent-text: #047857; --border-focus: #059669; } [data-accent="violet"] { --accent: #7c3aed; --accent-dim: #f3f0ff; --accent-text: #6d28d9; --border-focus: #7c3aed; } [data-theme="dark"][data-accent="green"] { --accent-dim: #06281c; } [data-theme="dark"][data-accent="violet"] { --accent-dim: #241640; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; color: inherit; } a { color: var(--accent); } @keyframes spin { to { transform: rotate(360deg); } } /* ── Boot loader (shown until Blazor starts) ── */ .app-loading { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .app-loading__spinner { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: spin .8s linear infinite; } .app-loading__text { color: var(--text-muted); font-size: 14px; } /* ── Blazor error UI ── */ #blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; padding: 12px 20px; background: var(--err-bg); color: var(--err); border-top: 1px solid var(--err); box-shadow: var(--shadow-lg); font-size: 14px; } #blazor-error-ui .dismiss { cursor: pointer; float: right; } .notfound { max-width: 680px; margin: 80px auto; text-align: center; } .notfound h1 { margin-bottom: 8px; } /* File inputs rendered by are hidden globally (scoped CSS does not reliably reach the child component's root element). The parent .uz / .addmore element provides the visible affordance. */ .uz__input, .addmore__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }