/* Theme overrides, animations, and component styles for the dashboard. Adapted from the Once.Sport scheduler theme. Tailwind utilities (compiled into vendor/tailwind.css) reference the --color-* variables, so overriding those variables under html[data-theme="dark"] flips the whole UI. The app defaults to dark (set on in index.html); the toggle persists the choice. */ :root { color-scheme: light; /* Light palette - clean off-white surfaces, deep ink text, and a brand green darkened just enough to stay legible on white. */ --color-ink-950: #f5f7f6; --color-ink-900: #ffffff; --color-ink-800: #eef2f0; --color-ink-700: #dde3e0; --color-ink-500: #79817c; --color-ink-400: #586059; --color-ink-100: #16201b; --color-brand-300: #1f9e66; --color-brand-400: #1c8f5c; --color-brand-500: #15724a; --color-brand-700: #2d6941; --color-brand-900: #dbeee4; --color-danger-300: #c2333a; --color-danger-400: #d2444a; /* brand accent in rgb channels - drives the glow system (overridden in dark) */ --brand-rgb: 45, 105, 65; /* component tokens (light) */ --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.05); --skel-a: #e7ecf0; --skel-b: #f4f6f8; --focus-ring: rgba(45, 105, 65, 0.5); --toast-shadow: 0 10px 30px rgba(16, 24, 40, 0.18); --weekend-tint: rgba(0, 0, 0, 0.025); --warn-bg: rgba(234, 179, 8, 0.12); --warn-border: rgba(180, 120, 10, 0.4); --warn-text: #8a5a00; /* FullCalendar, derived from the palette so it follows the theme */ --fc-border-color: var(--color-ink-700); --fc-page-bg-color: var(--color-ink-900); --fc-neutral-bg-color: var(--color-ink-800); --fc-today-bg-color: rgba(45, 105, 65, 0.06); --fc-now-indicator-color: var(--color-brand-400); --fc-button-bg-color: var(--color-ink-800); --fc-button-border-color: var(--color-ink-700); --fc-button-hover-bg-color: var(--color-ink-700); --fc-button-hover-border-color: var(--color-ink-700); --fc-button-active-bg-color: var(--color-brand-400); --fc-button-active-border-color: var(--color-brand-400); --fc-button-text-color: #ffffff; --fc-event-text-color: var(--color-ink-100); --fc-list-event-hover-bg-color: var(--color-ink-800); --fc-highlight-color: rgba(45, 105, 65, 0.12); } html[data-theme="dark"] { color-scheme: dark; /* Premium dark palette - deeper, slightly cooler near-blacks for more contrast and layering; brand refreshed toward a more refined emerald. */ --color-ink-950: #0f100f; --color-ink-900: #161817; --color-ink-800: #1e211f; --color-ink-700: #2a2e2b; --color-ink-500: #757d78; --color-ink-400: #a6aea9; --color-ink-100: #f1f0ec; --color-brand-300: #3ee0a1; --color-brand-400: #1fcd86; --color-brand-500: #16b375; --color-brand-700: #2d6941; --color-brand-900: #11271b; --color-danger-300: #ff8a8d; --color-danger-400: #e5484d; /* brand accent in rgb channels - drives the refreshed glow system */ --brand-rgb: 31, 205, 134; --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); --skel-a: #1b1e1c; --skel-b: #2c302d; --focus-ring: rgba(35, 209, 134, 0.55); --toast-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); --weekend-tint: rgba(255, 255, 255, 0.015); --warn-bg: rgba(245, 195, 95, 0.1); --warn-border: rgba(245, 195, 95, 0.4); --warn-text: #f0c060; --fc-today-bg-color: rgba(35, 209, 134, 0.07); --fc-now-indicator-color: #23d186; --fc-highlight-color: rgba(35, 209, 134, 0.12); --fc-event-text-color: #f0efea; --fc-button-text-color: #08160f; } ::selection { background: rgba(var(--brand-rgb), 0.28); } /* Ambient page wash - a faint brand glow drifting down from the top, layered over the solid page color. Fixed so it stays put while content scrolls. */ body { background-image: radial-gradient(135% 90% at 50% -25%, rgba(var(--brand-rgb), 0.09), transparent 55%); background-attachment: fixed; } html[data-theme="dark"] body { background-image: radial-gradient(120% 80% at 50% -20%, rgba(var(--brand-rgb), 0.1), transparent 52%), radial-gradient(90% 60% at 85% 110%, rgba(var(--brand-rgb), 0.05), transparent 60%); } * { scrollbar-width: thin; scrollbar-color: var(--color-ink-700) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--color-ink-700); border-radius: 5px; border: 2px solid var(--color-ink-950); } ::-webkit-scrollbar-track { background: transparent; } button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* FullCalendar */ #app-logo, #login-logo { color: #15724a; } [data-theme="dark"] #app-logo, [data-theme="dark"] #login-logo { color: #3ee0a1; } .fc .fc-toolbar-title { font-size: 1.05rem; font-weight: 600; color: var(--color-ink-100); } .fc .fc-button { border-radius: 0.5rem; font-size: 0.8rem; font-weight: 500; text-transform: capitalize; box-shadow: none !important; color: var(--color-ink-100); border: 1px solid var(--color-ink-700); } .fc .fc-button-primary:not(:disabled):hover { color: var(--color-ink-100); } .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: var(--fc-button-text-color); } .fc .fc-button-primary:disabled { opacity: 1; background: transparent; border-color: var(--color-ink-700); color: var(--color-ink-500); } .fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color: var(--color-ink-400); font-size: 0.78rem; text-decoration: none; } .fc .fc-timegrid-slot-label-cushion, .fc .fc-timegrid-axis-cushion, .fc .fc-list-day-text, .fc .fc-list-day-side-text { color: var(--color-ink-500); font-size: 0.72rem; text-decoration: none; } .fc .fc-event { border-radius: 6px; font-size: 0.75rem; border-left-width: 3px; transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease; cursor: pointer; } .fc .fc-event:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.6); } .fc .fc-event.fc-event-enter { animation: evIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--ev-d, 0ms); } .fc .fc-day-sat:not(.fc-col-header-cell), .fc .fc-day-sun:not(.fc-col-header-cell) { background-color: var(--weekend-tint); } .fc .fc-timegrid-now-indicator-line { border-color: var(--color-brand-400); box-shadow: 0 0 12px rgba(var(--brand-rgb), 0.55); } .fc .fc-timegrid-now-indicator-arrow { border-color: var(--color-brand-400); } .fc a { color: inherit; } .view-fade { animation: viewFade 0.34s cubic-bezier(0.22, 1, 0.36, 1) both; } .ev-new { animation: evFlash 1.1s ease-out; } /* keyframes */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(3); opacity: 0; } } @keyframes rot { to { transform: rotate(360deg); } } @keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes shimmer { to { background-position: -200% 0; } } @keyframes attn { 0%, 100% { border-color: var(--warn-border); } 50% { border-color: var(--color-brand-400); } } @keyframes breathe { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.22), 0 0 20px rgba(var(--brand-rgb), 0.1); } 50% { box-shadow: 0 0 0 1px rgba(var(--brand-rgb), 0.5), 0 0 32px rgba(var(--brand-rgb), 0.2); } } @keyframes breatheRed { 0%, 100% { box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.2), 0 0 18px rgba(220, 53, 69, 0.08); } 50% { box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.45), 0 0 28px rgba(220, 53, 69, 0.16); } } @keyframes rowFlash { 0% { background-color: rgba(45, 105, 65, 0.14); } 100% { background-color: transparent; } } @keyframes drain { to { transform: scaleX(0); } } @keyframes slideBar { to { left: 100%; } } @keyframes evFlash { 0% { box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.6); } 100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0); } } @keyframes viewFade { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } @keyframes evIn { from { opacity: 0; transform: scale(0.965) translateY(3px); } to { opacity: 1; transform: none; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* components */ .pulse-dot { animation: pulse 1.6s ease-in-out infinite; } .ping-ring { position: relative; } .ping-ring::after { content: ""; position: absolute; inset: -3px; border-radius: 9999px; border: 2px solid var(--ring, var(--color-brand-400)); animation: ping 0.9s ease-out 2; } .card { box-shadow: var(--card-shadow); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.022), rgba(255, 255, 255, 0) 140px); transition: border-color 0.3s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .card:hover { border-color: rgba(var(--brand-rgb), 0.32); transform: translateY(-2px); box-shadow: var(--card-shadow), 0 14px 34px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--brand-rgb), 0.06); } .card.enter { animation: cardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0s); } .field-card.live { border-color: rgba(var(--brand-rgb), 0.42); animation: breathe 3.2s ease-in-out infinite; } .field-card.live-manual { border-color: rgba(220, 53, 69, 0.4); animation: breatheRed 3.2s ease-in-out infinite; } .site-header { position: relative; background-color: color-mix(in srgb, var(--color-ink-900) 80%, transparent); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); } .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 12%, rgba(var(--brand-rgb), 0.4), transparent 88%); pointer-events: none; } .skel { height: 46px; border-radius: 10px; background: linear-gradient(100deg, var(--skel-a) 40%, var(--skel-b) 50%, var(--skel-a) 60%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; } .skel-block { border-radius: 16px; background: linear-gradient(100deg, var(--skel-a) 38%, var(--skel-b) 50%, var(--skel-a) 62%); background-size: 200% 100%; animation: shimmer 1.25s linear infinite; } .fadeup { animation: fadeUp 0.4s ease-out; } .row-flash { animation: rowFlash 0.9s ease-out; } .livebar { position: relative; height: 2px; overflow: hidden; border-radius: 1px; background: rgba(var(--brand-rgb), 0.15); margin-top: 8px; } .livebar::after { content: ""; position: absolute; left: -30%; width: 30%; height: 100%; background: var(--color-brand-400); animation: slideBar 1.8s ease-in-out infinite; } .btn-anim:not(:disabled) { transition: transform 0.15s ease, box-shadow 0.25s ease, background-color 0.2s ease, filter 0.2s ease; } .btn-anim:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(var(--brand-rgb), 0.5); } .btn-anim:not(:disabled):active { transform: scale(0.97); } .btn-start:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(45, 105, 65, 0.25); } .btn-stop:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(220, 53, 69, 0.18); } .ic-spin { display: none; } button.loading .ic-main { display: none; } button.loading .ic-spin { display: inline-block; } .spinner { width: 14px; height: 14px; border-radius: 9999px; border: 2px solid currentColor; border-top-color: transparent; opacity: 0.75; animation: rot 0.7s linear infinite; } /* side nav active state (classes toggled in app.js) */ .side-link { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.16s ease; } .side-link:hover { transform: translateX(2px); } .side-link.active { background: var(--color-ink-800); color: var(--color-ink-100); border-left-color: var(--color-brand-400); box-shadow: inset 2px 0 0 0 var(--color-brand-400), -8px 0 18px -12px rgba(var(--brand-rgb), 0.8); } .side-link.active svg { color: var(--color-brand-400); } /* themeable warning box */ .warn-box { border: 1px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-text); } /* JSON config editor */ .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .json-invalid { border-color: var(--color-danger-400) !important; box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15); } .code-box { font-family: ui-monospace, Menlo, monospace; user-select: all; word-break: break-all; } /* Single source of truth for popup/modal animation speed. Change --popup-anim (mirrored by POPUP_ANIM_MS in app.js) to retune every modal's motion at once. */ :root { --popup-anim: 260ms; --popup-ease: cubic-bezier(0.22, 1, 0.36, 1); } .modal-wrap .modal-backdrop-el { opacity: 0; transition: opacity var(--popup-anim) ease; } .modal-wrap .modal-panel { opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity var(--popup-anim) ease, transform var(--popup-anim) var(--popup-ease); } .modal-wrap.open .modal-backdrop-el { opacity: 1; } .modal-wrap.open .modal-panel { opacity: 1; transform: none; } .toast { display: flex; align-items: center; gap: 9px; min-width: 230px; max-width: 360px; background: var(--color-ink-900); border: 1px solid var(--color-ink-700); border-radius: 12px; padding: 10px 14px; font-size: 13.5px; color: var(--color-ink-100); box-shadow: var(--toast-shadow); position: relative; overflow: hidden; cursor: pointer; transform: translateX(calc(100% + 28px)); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; } .toast.in { transform: none; } .toast.out { opacity: 0; transform: translateX(20%); } .toast .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; animation: drain var(--life, 3.2s) linear forwards; } .toast-success { border-color: rgba(45, 105, 65, 0.5); } .toast-success .bar { background: var(--color-brand-400); } .toast-error { border-color: rgba(220, 53, 69, 0.5); } .toast-error .bar { background: var(--color-danger-400); } .toast-warning { border-color: rgba(180, 120, 10, 0.45); } .toast-warning .bar { background: #d99a17; } .chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--color-ink-700); background: var(--color-ink-900); border-radius: 9999px; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--color-ink-400); cursor: pointer; transition: border-color 0.2s, color 0.2s, opacity 0.2s, transform 0.14s ease, background-color 0.2s; } .chip:hover { opacity: 1; border-color: var(--color-ink-500); } .chip:active { transform: scale(0.96); } .chip.active { color: var(--color-ink-100); border-color: var(--chip-color, var(--color-brand-400)); background: color-mix(in srgb, var(--chip-color, var(--color-brand-400)) 12%, var(--color-ink-900)); } .chip:not(.active) { opacity: 0.72; } .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chip-color, var(--color-ink-500)); } /* ============================================================ idea patterns */ /* (1) Go-live status badge in the header */ .live-badge { display: none; align-items: center; gap: 7px; border: 1px solid var(--color-ink-700); background: var(--color-ink-900); border-radius: 9999px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--color-ink-400); white-space: nowrap; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } .live-badge .lb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ink-500); transition: background-color 0.3s ease; } .live-badge.is-live { color: var(--color-brand-300); border-color: rgba(var(--brand-rgb), 0.5); background: color-mix(in srgb, var(--color-brand-400) 12%, var(--color-ink-900)); box-shadow: 0 0 18px -5px rgba(var(--brand-rgb), 0.6); } .live-badge.is-live .lb-dot { background: var(--color-brand-400); animation: pulse 1.6s ease-in-out infinite; } .live-badge.just-live { animation: goLive 0.7s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes goLive { 0% { transform: scale(0.82); } 42% { transform: scale(1.09); } 100% { transform: scale(1); } } /* (2) Start-stream button: hover glow, press, loading -> confirm */ .start-now-btn { border: 1px solid color-mix(in srgb, var(--color-brand-400) 50%, transparent); background: color-mix(in srgb, var(--color-brand-400) 12%, transparent); color: var(--color-brand-300); } .start-now-btn:not(:disabled):hover { background: color-mix(in srgb, var(--color-brand-400) 22%, transparent); box-shadow: 0 6px 20px -8px rgba(var(--brand-rgb), 0.5); } .start-btn .ic-main { display: inline-flex; align-items: center; gap: 8px; } .start-btn .ic-spin, .start-btn .ic-done { display: none; align-items: center; gap: 8px; } .start-btn.loading .ic-main { display: none; } .start-btn.loading .ic-spin { display: inline-flex; } .start-btn.loading { cursor: progress; } .start-btn.done .ic-main, .start-btn.done .ic-spin { display: none; } .start-btn.done .ic-done { display: inline-flex; } .start-btn.done { background: var(--color-brand-500); box-shadow: 0 0 26px -6px rgba(var(--brand-rgb), 0.7); animation: confirmPop 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .start-btn:not(:disabled):hover { box-shadow: 0 8px 26px -6px rgba(var(--brand-rgb), 0.6); } @keyframes confirmPop { 0% { transform: scale(0.97); } 55% { transform: scale(1.03); } 100% { transform: scale(1); } } .start-window svg { color: var(--color-brand-400); } /* (5) Mismatch banner: static, persistent - no entrance or pulse animation */ .mismatch-banner { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-text); border-radius: 14px; padding: 12px 16px; font-size: 13.5px; line-height: 1.45; } .mismatch-banner svg { flex-shrink: 0; margin-top: 1px; } /* (6) List/card state flash on status change */ @keyframes rowFlashBad { 0% { background-color: rgba(229, 72, 77, 0.16); } 100% { background-color: transparent; } } @keyframes cardFlash { 0% { box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.55), var(--card-shadow); } 100% { box-shadow: var(--card-shadow); } } @keyframes cardFlashBad { 0% { box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.55), var(--card-shadow); } 100% { box-shadow: var(--card-shadow); } } .row-flash-bad { animation: rowFlashBad 1s ease-out; } .card-flash { animation: cardFlash 1.1s ease-out; } .card-flash-bad { animation: cardFlashBad 1.1s ease-out; } /* Selects - consistent, intentional control styling. The native popup list that opens on click is drawn by the OS and cannot be styled/animated; this polishes the closed control: a custom caret (so it matches across browsers) plus smooth hover/focus transitions. A custom div-based dropdown would be needed to animate the open menu itself. */ select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23889088' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.65rem center; background-size: 15px 15px; padding-right: 2.1rem !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } select:hover { border-color: var(--color-ink-500); } select::-ms-expand { display: none; } /* Disabled form controls read as grayed-out (e.g. a pre-selected, locked field). */ select:disabled, input:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed; } /* Field accordion + preset sublist (Fields view) */ .field-acc { transition: border-color .25s ease, box-shadow .3s ease; } .field-acc.open { border-color: rgba(var(--brand-rgb), 0.35); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), 0.08); } .field-acc-head { cursor: pointer; } .field-acc-head:hover .field-chev { color: var(--color-ink-400); } .field-chev { color: var(--color-ink-500); flex-shrink: 0; transition: transform .25s ease, color .2s ease; } .field-acc.open .field-chev { transform: rotate(90deg); color: var(--color-brand-400); } .field-sub { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease, opacity .25s ease; } .field-acc.open .field-sub { opacity: 1; } .cfg-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--color-ink-700); background: var(--color-ink-950); border-radius: 8px; padding: 2px 8px; font-size: 12px; color: var(--color-ink-400); white-space: nowrap; } .cfg-chip b { color: var(--color-ink-100); font-weight: 600; } .lock-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px dashed var(--warn-border); background: var(--warn-bg); color: var(--warn-text); border-radius: 8px; padding: 2px 7px; font-size: 12px; white-space: nowrap; } /* Config editor (presets + events): grouped sections, segmented tabs, lock chips */ .cfg-group { border-top: 1px solid var(--color-ink-700); margin-top: 16px; padding-top: 14px; } .cfg-group:first-child { border-top: 0; margin-top: 0; padding-top: 0; } .cfg-group-h { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-ink-500); margin-bottom: 12px; } .cfg-cols { display: grid; gap: 12px; margin-bottom: 12px; } .cfg-cols-2 { grid-template-columns: 1fr 1fr; } .cfg-cols-3 { grid-template-columns: 1fr 1fr 1fr; } .cfg-cols > div { margin-bottom: 0; } .cfg-keyfield { position: relative; } .cfg-keyfield input { padding-right: 40px; } .cfg-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; background: transparent; color: var(--color-ink-500); cursor: pointer; border-radius: 8px; transition: color .2s ease, background-color .2s ease; } .cfg-eye:hover { color: var(--color-ink-100); background: var(--color-ink-800); } .cfg-eye.active { color: var(--color-brand-300); } .cfg-tabs { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--color-ink-950); border: 1px solid var(--color-ink-700); } .cfg-tab { border-radius: 7px; padding: 5px 14px; font-size: 13px; font-weight: 500; transition: background-color .2s ease, color .2s ease; } .cfg-tab.text-ink-100 { background: var(--color-ink-800); } .cfg-lock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--color-ink-500); cursor: pointer; user-select: none; } .cfg-lock input { accent-color: var(--color-brand-400); } .cfg-locked { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--warn-text); } .cfg-keytoggle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--color-ink-700); border-radius: 10px; color: var(--color-ink-400); background: var(--color-ink-950); cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; } .cfg-keytoggle:hover { color: var(--color-ink-100); border-color: var(--color-ink-500); } .cfg-keytoggle.active { color: var(--color-brand-300); border-color: rgba(var(--brand-rgb), 0.5); background: color-mix(in srgb, var(--color-brand-400) 12%, var(--color-ink-950)); } .mw-wide { max-width: 44rem; } /* Login split-screen: brand panel hidden on mobile, shown beside the form on wider screens. */ .login-brand { display: none; } @media (min-width: 768px) { .login-brand { display: flex; } } /* Dashboard stat highlight on change */ .stat-bump { animation: statBump .7s cubic-bezier(.22,1,.36,1); } @keyframes statBump { 0% { transform: scale(1); } 30% { transform: scale(1.16); text-shadow: 0 0 18px rgba(var(--brand-rgb), .7); } 100% { transform: scale(1); } } /* Live stream row progress bar (breathing) */ .stream-prog { position: relative; height: 3px; min-width: 90px; border-radius: 2px; background: rgba(var(--brand-rgb), .15); margin-top: 5px; overflow: hidden; } .stream-prog span { position: absolute; left: 0; top: 0; height: 100%; border-radius: 2px; background: var(--color-brand-400); animation: streamBreathe 2.2s ease-in-out infinite; } @keyframes streamBreathe { 0%, 100% { opacity: .55; box-shadow: 0 0 0 rgba(var(--brand-rgb), 0); } 50% { opacity: 1; box-shadow: 0 0 8px rgba(var(--brand-rgb), .6); } } /* First-run checklist step markers */ .step-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 1px solid var(--color-ink-700); color: var(--color-ink-400); } .step-dot.done { background: var(--color-brand-400); border-color: var(--color-brand-400); color: #08160f; } /* Empty-state icon badge */ .es-ic { width: 56px; height: 56px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-brand-300); background: rgba(var(--brand-rgb), .12); border: 1px solid rgba(var(--brand-rgb), .28); } .es-ic svg { width: 26px; height: 26px; } /* Config/event time grid + mobile stacking */ .ev-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .cfg-cols-2, .cfg-cols-3, .ev-grid3 { grid-template-columns: 1fr; } } @media (max-width: 767px) { #login > div { padding: 32px 22px !important; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }