/* * NecoEDU Admin design system — mirrors MinhBee Admin UI Framework v3.20 (tokens, style presets, shell, overlays). * Imported by app/admin/layout.tsx, but Next keeps route CSS loaded after client navigation, so every rule is scoped * to html[data-nx-admin], .nx-* or .nx-content. The attributes and inline --nx-accent/--nx-fs variables are * written by components/admin/platform/appearance.ts (init script + client). */ /* ── 1. Tokens · light ───────────────────────────────────────────────────────────────────── */ html[data-nx-admin] { color-scheme: light; --nx-fs: 13px; --nx-accent: #ef5b2a; --nx-accent-strong: #d94818; --nx-on-accent: #ffffff; --nx-bg: #f4f6fa; --nx-surface: #ffffff; --nx-surface-2: #f8fafc; --nx-surface-3: #f1f4f8; --nx-border: #e4e8ef; --nx-border-strong: #d8dee8; --nx-text: #172033; --nx-muted: #667085; --nx-subtle: #8a94a6; --nx-sidebar: #0a0f15; --nx-sidebar-2: #101822; --nx-success: #16a36a; --nx-warning: #d98b18; --nx-danger: #d64555; --nx-info: #4675e8; --nx-violet: #8b5cf6; --nx-success-ink: #0f7a4f; --nx-warning-ink: #a35f00; --nx-danger-ink: #b42336; --nx-info-ink: #2f5bd3; --nx-violet-ink: #6d3fd8; --nx-soft: 12%; --nx-success-soft: color-mix(in srgb, var(--nx-success) var(--nx-soft), transparent); --nx-warning-soft: color-mix(in srgb, var(--nx-warning) var(--nx-soft), transparent); --nx-danger-soft: color-mix(in srgb, var(--nx-danger) var(--nx-soft), transparent); --nx-info-soft: color-mix(in srgb, var(--nx-info) var(--nx-soft), transparent); --nx-violet-soft: color-mix(in srgb, var(--nx-violet) var(--nx-soft), transparent); --nx-accent-soft: color-mix(in srgb, var(--nx-accent) 12%, transparent); --nx-accent-soft-2: color-mix(in srgb, var(--nx-accent) 20%, transparent); --nx-accent-ink: color-mix(in srgb, var(--nx-accent) 82%, var(--nx-text)); --nx-focus: color-mix(in srgb, var(--nx-accent) 32%, transparent); --nx-hover: color-mix(in srgb, var(--nx-text) 4%, transparent); --nx-tooltip-bg: #101822; --nx-tooltip-text: #ffffff; --nx-backdrop: rgba(5, 9, 15, .72); --nx-scrim: rgba(5, 9, 15, .42); --nx-skeleton: #eef1f5; --nx-skeleton-2: #f8fafc; --nx-code-bg: #0e1729; --nx-code-text: #d9e3f5; --nx-shadow-sm: 0 1px 2px rgba(16, 24, 40, .035), 0 1px 5px rgba(16, 24, 40, .025); --nx-shadow: 0 6px 20px rgba(16, 24, 40, .07); --nx-shadow-lg: 0 18px 48px rgba(16, 24, 40, .16); --nx-radius-xs: 6px; --nx-radius-sm: 8px; --nx-radius-md: 12px; --nx-radius-lg: 18px; --nx-radius-xl: 22px; --nx-radius-btn: var(--nx-radius-sm); --nx-radius-control: var(--nx-radius-sm); --nx-radius-icon: calc(var(--nx-radius-sm) + 2px); --nx-density: 1; --nx-card-x: 18px; --nx-card-y: 16px; --nx-row-x: 16px; --nx-row-y: 12px; --nx-btn-x: 15px; --nx-btn-y: 9px; --nx-h-sm: 36px; --nx-h: 40px; --nx-h-lg: 44px; --nx-field-gap: 7px; --nx-section-gap: 14px; --nx-dur: 180ms; --nx-ease: cubic-bezier(.2, .8, .2, 1); --nx-sidebar-w: 232px; --nx-rail-w: 68px; --nx-topbar-h: 60px; --nx-workspace: 1440px; --nx-text-2xs: calc(var(--nx-fs) * .72); --nx-text-xs: calc(var(--nx-fs) * .8); --nx-text-sm: calc(var(--nx-fs) * .9); --nx-text-md: var(--nx-fs); --nx-text-lg: calc(var(--nx-fs) * 1.18); --nx-text-xl: calc(var(--nx-fs) * 1.45); --nx-text-2xl: calc(var(--nx-fs) * 1.75); --nx-text-3xl: calc(var(--nx-fs) * 2.15); --nx-chart-1: var(--nx-accent); --nx-chart-2: #2f80ed; --nx-chart-3: #12a594; --nx-chart-4: #8b5cf6; --nx-chart-5: #e09f1f; --nx-chart-6: #64748b; /* Sidebar tone (dark by default, see §6 for accent/light). */ --nx-sb-bg: var(--nx-sidebar); --nx-sb-bg-2: var(--nx-sidebar-2); --nx-sb-text: #9ba7b8; --nx-sb-muted: #687588; --nx-sb-strong: #f5f7fa; --nx-sb-hover: rgba(255, 255, 255, .055); --nx-sb-border: rgba(255, 255, 255, .07); --nx-sb-input: rgba(255, 255, 255, .05); --nx-sb-badge: rgba(255, 255, 255, .09); --nx-sb-badge-text: #d9e0e9; --nx-sb-scroll: rgba(255, 255, 255, .12); --nx-sb-btn: rgba(255, 255, 255, .05); --nx-sb-btn-border: rgba(255, 255, 255, .10); --nx-sb-btn-text: #b7c0ce; --nx-sb-active-text: #ffffff; --nx-sb-active-border: color-mix(in srgb, var(--nx-accent) 24%, transparent); --nx-sb-active-a: color-mix(in srgb, var(--nx-accent) 16%, transparent); --nx-sb-active-b: color-mix(in srgb, var(--nx-accent) 5%, transparent); --nx-sb-indicator: var(--nx-accent); --nx-sb-active-icon: var(--nx-accent); /* Public-site variables used by the legacy console styles in globals.css. */ --bg: var(--nx-bg); --surface: var(--nx-surface); --surface-2: var(--nx-surface-2); --ink: var(--nx-text); --muted: var(--nx-muted); --line: var(--nx-border); --brand: var(--nx-accent); --brand-strong: var(--nx-accent-strong); --success: var(--nx-success-ink); --success-bg: var(--nx-success-soft); --warning: var(--nx-warning-ink); --warning-bg: var(--nx-warning-soft); --neutral-bg: var(--nx-surface-3); --shadow: var(--nx-shadow-sm); } html[data-nx-admin], html[data-nx-admin] body { background: var(--nx-bg); color: var(--nx-text); } /* ── 2. Tokens · dark ────────────────────────────────────────────────────────────────────── */ html[data-nx-admin][data-nx-theme="dark"] { color-scheme: dark; --nx-bg: #080d13; --nx-surface: #0f151d; --nx-surface-2: #0c1219; --nx-surface-3: #111923; --nx-border: #28313c; --nx-border-strong: #394554; --nx-text: #f5f7fa; --nx-muted: #8993a0; --nx-subtle: #6f7a89; --nx-sidebar: #080d13; --nx-sidebar-2: #0a1017; --nx-success-ink: #4fd39a; --nx-warning-ink: #f2b04e; --nx-danger-ink: #ff7b88; --nx-info-ink: #86a6ff; --nx-violet-ink: #b69cff; --nx-soft: 16%; --nx-accent-soft: color-mix(in srgb, var(--nx-accent) 14%, transparent); --nx-hover: color-mix(in srgb, var(--nx-text) 6%, transparent); --nx-tooltip-bg: #eef2f8; --nx-tooltip-text: #172033; --nx-backdrop: rgba(0, 0, 0, .72); --nx-scrim: rgba(0, 0, 0, .55); --nx-skeleton: #202938; --nx-skeleton-2: #2a3444; --nx-code-bg: #070c14; --nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .28), 0 1px 6px rgba(0, 0, 0, .18); --nx-shadow: 0 8px 24px rgba(0, 0, 0, .34); --nx-shadow-lg: 0 20px 56px rgba(0, 0, 0, .5); } /* ── 3. Modifiers (radius · density · shadow · motion · sidebar · workspace) ─────────────── */ html[data-nx-admin][data-nx-radius="compact"] { --nx-radius-xs: 4px; --nx-radius-sm: 6px; --nx-radius-md: 8px; --nx-radius-lg: 12px; --nx-radius-xl: 16px; } html[data-nx-admin][data-nx-radius="rounded"] { --nx-radius-xs: 8px; --nx-radius-sm: 11px; --nx-radius-md: 16px; --nx-radius-lg: 22px; --nx-radius-xl: 28px; } html[data-nx-admin][data-nx-radius="pill"] { --nx-radius-xs: 12px; --nx-radius-sm: 14px; --nx-radius-md: 22px; --nx-radius-lg: 32px; --nx-radius-xl: 40px; --nx-radius-btn: 999px; --nx-radius-control: 999px; --nx-radius-icon: 999px; } html[data-nx-admin][data-nx-density="compact"] { --nx-density: .9; --nx-card-x: 14px; --nx-card-y: 12px; --nx-row-x: 12px; --nx-row-y: 10px; --nx-btn-x: 12px; --nx-btn-y: 8px; --nx-h-sm: 32px; --nx-h: 36px; --nx-h-lg: 42px; --nx-field-gap: 6px; --nx-section-gap: 12px; } html[data-nx-admin][data-nx-density="comfortable"] { --nx-density: 1.08; --nx-card-x: 22px; --nx-card-y: 20px; --nx-row-x: 18px; --nx-row-y: 14px; --nx-btn-x: 18px; --nx-btn-y: 10px; --nx-h-sm: 40px; --nx-h: 44px; --nx-h-lg: 48px; --nx-field-gap: 8px; --nx-section-gap: 16px; } html[data-nx-admin][data-nx-shadow="none"] { --nx-shadow-sm: none; --nx-shadow: none; --nx-shadow-lg: 0 18px 48px rgba(16, 24, 40, .14); } html[data-nx-admin][data-nx-shadow="medium"] { --nx-shadow-sm: 0 2px 8px rgba(16, 24, 40, .07); --nx-shadow: 0 10px 28px rgba(16, 24, 40, .11); --nx-shadow-lg: 0 22px 56px rgba(16, 24, 40, .2); } html[data-nx-admin][data-nx-shadow="strong"] { --nx-shadow-sm: 0 4px 14px rgba(16, 24, 40, .1); --nx-shadow: 0 14px 34px rgba(16, 24, 40, .15); --nx-shadow-lg: 0 26px 64px rgba(16, 24, 40, .24); } html[data-nx-admin][data-nx-theme="dark"][data-nx-shadow="none"] { --nx-shadow-sm: none; --nx-shadow: none; --nx-shadow-lg: 0 20px 56px rgba(0, 0, 0, .5); } html[data-nx-admin][data-nx-theme="dark"][data-nx-shadow="medium"] { --nx-shadow-sm: 0 2px 8px rgba(0, 0, 0, .34); --nx-shadow: 0 12px 30px rgba(0, 0, 0, .42); --nx-shadow-lg: 0 24px 60px rgba(0, 0, 0, .56); } html[data-nx-admin][data-nx-theme="dark"][data-nx-shadow="strong"] { --nx-shadow-sm: 0 4px 14px rgba(0, 0, 0, .42); --nx-shadow: 0 16px 38px rgba(0, 0, 0, .5); --nx-shadow-lg: 0 28px 70px rgba(0, 0, 0, .62); } html[data-nx-admin][data-nx-motion="none"] { --nx-dur: 0ms; } html[data-nx-admin][data-nx-motion="fast"] { --nx-dur: 100ms; } html[data-nx-admin][data-nx-motion="slow"] { --nx-dur: 400ms; } html[data-nx-admin][data-nx-sidebar="narrow"] { --nx-sidebar-w: 196px; } html[data-nx-admin][data-nx-sidebar="wide"] { --nx-sidebar-w: 264px; } html[data-nx-admin][data-nx-workspace="wide"] { --nx-workspace: 1720px; } html[data-nx-admin][data-nx-workspace="full"] { --nx-workspace: none; } /* ── 4. Style presets (palette only; accent/typography come from the settings) ───────────── */ html[data-nx-style="anthropic-warm"][data-nx-theme="light"] { --nx-bg: #f7f3ee; --nx-surface: #fffaf5; --nx-surface-2: #f1e7dc; --nx-surface-3: #eadbcf; --nx-border: #e0cdbf; --nx-border-strong: #cfb6a5; --nx-text: #2d211c; --nx-muted: #77665d; --nx-subtle: #927d71; --nx-sidebar: #2f2723; --nx-sidebar-2: #3a2f29; } html[data-nx-style="anthropic-warm"][data-nx-theme="dark"] { --nx-bg: #171310; --nx-surface: #211b17; --nx-surface-2: #2a211c; --nx-surface-3: #342820; --nx-border: #49382e; --nx-border-strong: #5b4638; --nx-text: #f7eee8; --nx-muted: #baa69a; --nx-subtle: #947f73; --nx-sidebar: #120f0d; --nx-sidebar-2: #1b1613; } html[data-nx-style="editorial-mono"][data-nx-theme="light"] { --nx-bg: #f5f5f2; --nx-surface: #ffffff; --nx-surface-2: #eeeeea; --nx-surface-3: #e5e5df; --nx-border: #d4d4ce; --nx-border-strong: #bdbdb6; --nx-text: #181817; --nx-muted: #666661; --nx-subtle: #85857f; --nx-sidebar: #171716; --nx-sidebar-2: #232321; } html[data-nx-style="editorial-mono"][data-nx-theme="dark"] { --nx-bg: #10100f; --nx-surface: #181817; --nx-surface-2: #222220; --nx-surface-3: #2b2b28; --nx-border: #383834; --nx-border-strong: #4a4a45; --nx-text: #f4f4ef; --nx-muted: #a5a59d; --nx-subtle: #7d7d76; --nx-sidebar: #0b0b0a; --nx-sidebar-2: #151514; } html[data-nx-style="graphite-shadow"][data-nx-theme="light"] { --nx-bg: #eef1f4; --nx-surface: #f9fafb; --nx-surface-2: #e5e9ed; --nx-surface-3: #dce1e6; --nx-border: #cdd4dc; --nx-border-strong: #b6c0ca; --nx-text: #20262d; --nx-muted: #62707d; --nx-subtle: #7f8a95; --nx-sidebar: #11161c; --nx-sidebar-2: #1a2129; } html[data-nx-style="graphite-shadow"][data-nx-theme="dark"] { --nx-bg: #0c0f13; --nx-surface: #12161b; --nx-surface-2: #181e25; --nx-surface-3: #202730; --nx-border: #2b343f; --nx-border-strong: #394552; --nx-text: #edf1f5; --nx-muted: #9aa5b1; --nx-subtle: #717d89; --nx-sidebar: #080a0d; --nx-sidebar-2: #0e1217; } html[data-nx-style="rose-garden"][data-nx-theme="light"] { --nx-bg: #fff7fa; --nx-surface: #ffffff; --nx-surface-2: #ffeaf0; --nx-surface-3: #ffdde7; --nx-border: #f5c7d3; --nx-border-strong: #eaaebf; --nx-text: #31151e; --nx-muted: #8d5969; --nx-subtle: #aa7888; --nx-sidebar: #29131b; --nx-sidebar-2: #351822; } html[data-nx-style="rose-garden"][data-nx-theme="dark"] { --nx-bg: #180e12; --nx-surface: #23141a; --nx-surface-2: #2e1921; --nx-surface-3: #3a1f29; --nx-border: #512c39; --nx-border-strong: #653748; --nx-text: #fff1f5; --nx-muted: #c19aaa; --nx-subtle: #9f7484; --nx-sidebar: #10090c; --nx-sidebar-2: #190d12; } html[data-nx-style="lagoon"][data-nx-theme="light"] { --nx-bg: #f2fbfa; --nx-surface: #ffffff; --nx-surface-2: #e2f6f3; --nx-surface-3: #d3f0ec; --nx-border: #b7e2dc; --nx-border-strong: #98d2c9; --nx-text: #123630; --nx-muted: #557a74; --nx-subtle: #789b96; --nx-sidebar: #0d2a27; --nx-sidebar-2: #103732; } html[data-nx-style="lagoon"][data-nx-theme="dark"] { --nx-bg: #071715; --nx-surface: #0d211e; --nx-surface-2: #112b27; --nx-surface-3: #173630; --nx-border: #234a43; --nx-border-strong: #2e5c53; --nx-text: #e9faf7; --nx-muted: #91b9b1; --nx-subtle: #6e958e; --nx-sidebar: #05100f; --nx-sidebar-2: #081916; } html[data-nx-style="sunset"][data-nx-theme="light"] { --nx-bg: #fff8f2; --nx-surface: #ffffff; --nx-surface-2: #ffeadf; --nx-surface-3: #ffdece; --nx-border: #f2c8b5; --nx-border-strong: #e5ad94; --nx-text: #3b2118; --nx-muted: #8a6254; --nx-subtle: #a97d6e; --nx-sidebar: #342019; --nx-sidebar-2: #43271d; } html[data-nx-style="sunset"][data-nx-theme="dark"] { --nx-bg: #1b100c; --nx-surface: #271710; --nx-surface-2: #321d14; --nx-surface-3: #40251a; --nx-border: #573326; --nx-border-strong: #6d4030; --nx-text: #fff2e9; --nx-muted: #c0a093; --nx-subtle: #9a786b; --nx-sidebar: #120a07; --nx-sidebar-2: #1a0e0a; } html[data-nx-style="forest-whisper"][data-nx-theme="light"] { --nx-bg: #f2f7f4; --nx-surface: #ffffff; --nx-surface-2: #e5f0e9; --nx-surface-3: #d9e8df; --nx-border: #c3d8cb; --nx-border-strong: #a9c4b4; --nx-text: #173128; --nx-muted: #5d786d; --nx-subtle: #789287; --nx-sidebar: #10251e; --nx-sidebar-2: #153128; } html[data-nx-style="forest-whisper"][data-nx-theme="dark"] { --nx-bg: #081512; --nx-surface: #0f211c; --nx-surface-2: #142b24; --nx-surface-3: #1b372e; --nx-border: #285044; --nx-border-strong: #356356; --nx-text: #eaf7f1; --nx-muted: #94b5a8; --nx-subtle: #709487; --nx-sidebar: #050e0c; --nx-sidebar-2: #091713; } html[data-nx-style="ocean-breeze"][data-nx-theme="light"] { --nx-bg: #f3f7ff; --nx-surface: #ffffff; --nx-surface-2: #e8efff; --nx-surface-3: #dce7ff; --nx-border: #c8d6f4; --nx-border-strong: #aec3ec; --nx-text: #17243f; --nx-muted: #60718f; --nx-subtle: #7f90ac; --nx-sidebar: #10203d; --nx-sidebar-2: #14294d; } html[data-nx-style="ocean-breeze"][data-nx-theme="dark"] { --nx-bg: #081225; --nx-surface: #0d1b33; --nx-surface-2: #122342; --nx-surface-3: #182d51; --nx-border: #27436d; --nx-border-strong: #345585; --nx-text: #edf4ff; --nx-muted: #9cb0d0; --nx-subtle: #7287aa; --nx-sidebar: #050b17; --nx-sidebar-2: #091226; } html[data-nx-style="aurora-dream"][data-nx-theme="light"] { --nx-bg: #f7f4ff; --nx-surface: #ffffff; --nx-surface-2: #eee8ff; --nx-surface-3: #e4dcfa; --nx-border: #d2c6ef; --nx-border-strong: #baabe1; --nx-text: #281f42; --nx-muted: #75698e; --nx-subtle: #9184a8; --nx-sidebar: #21183a; --nx-sidebar-2: #2a2046; } html[data-nx-style="aurora-dream"][data-nx-theme="dark"] { --nx-bg: #0f0d17; --nx-surface: #171420; --nx-surface-2: #211d2e; --nx-surface-3: #2b263c; --nx-border: #3b3453; --nx-border-strong: #4d4469; --nx-text: #f4efff; --nx-muted: #aaa1c1; --nx-subtle: #807696; --nx-sidebar: #09080e; --nx-sidebar-2: #100d18; } /* ── 5. High contrast ────────────────────────────────────────────────────────────────────── */ html[data-nx-admin][data-nx-contrast="high"] { --nx-border: color-mix(in srgb, var(--nx-text) 24%, var(--nx-surface)); --nx-border-strong: color-mix(in srgb, var(--nx-text) 40%, var(--nx-surface)); --nx-muted: color-mix(in srgb, var(--nx-text) 80%, var(--nx-surface)); --nx-subtle: color-mix(in srgb, var(--nx-text) 66%, var(--nx-surface)); --nx-accent-ink: color-mix(in srgb, var(--nx-accent) 62%, var(--nx-text)); --nx-focus: color-mix(in srgb, var(--nx-accent) 55%, transparent); --nx-sb-text: #c9d1dc; --nx-sb-muted: #9aa5b4; --nx-sb-border: rgba(255, 255, 255, .16); } /* ── 6. Sidebar tones ────────────────────────────────────────────────────────────────────── */ html[data-nx-admin][data-nx-sidebar-tone="accent"] { --nx-sb-bg: color-mix(in srgb, var(--nx-accent) 24%, #0a0f15); --nx-sb-bg-2: color-mix(in srgb, var(--nx-accent) 10%, #0a0f15); --nx-sb-text: rgba(255, 255, 255, .7); --nx-sb-muted: rgba(255, 255, 255, .46); --nx-sb-strong: #ffffff; --nx-sb-hover: rgba(255, 255, 255, .08); --nx-sb-border: rgba(255, 255, 255, .1); --nx-sb-input: rgba(255, 255, 255, .08); --nx-sb-badge: rgba(255, 255, 255, .14); --nx-sb-badge-text: #ffffff; --nx-sb-scroll: rgba(255, 255, 255, .18); --nx-sb-btn: rgba(255, 255, 255, .08); --nx-sb-btn-border: rgba(255, 255, 255, .14); --nx-sb-btn-text: rgba(255, 255, 255, .8); --nx-sb-active-text: #ffffff; --nx-sb-active-border: rgba(255, 255, 255, .16); --nx-sb-active-a: rgba(255, 255, 255, .16); --nx-sb-active-b: rgba(255, 255, 255, .06); --nx-sb-indicator: #ffffff; --nx-sb-active-icon: #ffffff; } html[data-nx-admin][data-nx-sidebar-tone="light"] { --nx-sb-bg: var(--nx-surface); --nx-sb-bg-2: var(--nx-surface); --nx-sb-text: var(--nx-muted); --nx-sb-muted: var(--nx-subtle); --nx-sb-strong: var(--nx-text); --nx-sb-hover: var(--nx-hover); --nx-sb-border: var(--nx-border); --nx-sb-input: var(--nx-surface-2); --nx-sb-badge: var(--nx-surface-3); --nx-sb-badge-text: var(--nx-muted); --nx-sb-scroll: var(--nx-border-strong); --nx-sb-btn: var(--nx-surface-2); --nx-sb-btn-border: var(--nx-border); --nx-sb-btn-text: var(--nx-muted); --nx-sb-active-text: var(--nx-accent-ink); --nx-sb-active-border: color-mix(in srgb, var(--nx-accent) 22%, transparent); --nx-sb-active-a: var(--nx-accent-soft); --nx-sb-active-b: color-mix(in srgb, var(--nx-accent) 4%, transparent); --nx-sb-indicator: var(--nx-accent); --nx-sb-active-icon: var(--nx-accent); } /* ── 7. Typography ───────────────────────────────────────────────────────────────────────── */ .nx-root { --nx-font-system: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --nx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --nx-font: var(--nx-font-inter, Inter), Inter, var(--nx-font-system); font-family: var(--nx-font); -webkit-font-smoothing: antialiased; } html[data-nx-font="jakarta"] .nx-root { --nx-font: var(--nx-font-jakarta, "Plus Jakarta Sans"), "Plus Jakarta Sans", var(--nx-font-system); } html[data-nx-font="manrope"] .nx-root { --nx-font: var(--nx-font-manrope, Manrope), Manrope, var(--nx-font-system); } html[data-nx-font="nunito"] .nx-root { --nx-font: var(--nx-font-nunito, Nunito), Nunito, var(--nx-font-system); } html[data-nx-font="roboto"] .nx-root { --nx-font: var(--nx-font-roboto, Roboto), Roboto, var(--nx-font-system); } html[data-nx-font="brand"] .nx-root { --nx-font: var(--font-be-vietnam-pro, "Be Vietnam Pro"), "Be Vietnam Pro", var(--nx-font-system); } html[data-nx-font="system"] .nx-root { --nx-font: var(--nx-font-system); } /* ── 8. Shell ────────────────────────────────────────────────────────────────────────────── */ :where(.nx-root) :where(button, input, select, textarea) { font: inherit; color: inherit; } :where(.nx-root) :where(button:not(:disabled)) { cursor: pointer; } .nx-root :is(button, a, summary, [tabindex]):focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; } .nx-root ::selection { background: var(--nx-accent-soft-2); } .nx-app { display: grid; grid-template-columns: var(--nx-sidebar-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; background: var(--nx-bg); color: var(--nx-text); font-size: var(--nx-text-md); line-height: 1.5; accent-color: var(--nx-accent); transition: grid-template-columns var(--nx-dur) var(--nx-ease); } .nx-skip { position: fixed; top: -60px; left: 12px; z-index: 100; padding: 9px 14px; border-radius: var(--nx-radius-sm); background: var(--nx-accent); color: var(--nx-on-accent); font-weight: 800; text-decoration: none; transition: top var(--nx-dur) var(--nx-ease); } .nx-skip:focus { top: 12px; } /* Sidebar */ .nx-sidebar { position: sticky; top: 0; z-index: 40; align-self: start; display: flex; flex-direction: column; min-width: 0; height: 100vh; height: 100dvh; overflow: hidden; border-right: 1px solid var(--nx-sb-border); background: linear-gradient(180deg, var(--nx-sb-bg), var(--nx-sb-bg-2)); color: var(--nx-sb-text); } .nx-sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: var(--nx-topbar-h); padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--nx-sb-border); } .nx-sidebar .nx-sidebar__close { display: none; } .nx-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; } .nx-brand__mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--nx-accent), var(--nx-accent-strong)); color: var(--nx-on-accent); font-size: 13px; font-weight: 900; letter-spacing: -.02em; box-shadow: 0 8px 20px color-mix(in srgb, var(--nx-accent) 32%, transparent); } .nx-brand__copy { min-width: 0; } .nx-brand__copy strong, .nx-brand__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-brand__copy strong { color: var(--nx-sb-strong); font-size: 13px; font-weight: 800; letter-spacing: -.01em; } .nx-brand__copy small { margin-top: 1px; color: var(--nx-sb-muted); font-size: 10px; font-weight: 600; } .nx-sidebar__search { display: flex; align-items: center; gap: 8px; height: 34px; margin: 12px 12px 0; padding: 0 8px 0 10px; border: 1px solid var(--nx-sb-border); border-radius: 9px; background: var(--nx-sb-input); color: var(--nx-sb-muted); transition: border-color var(--nx-dur) var(--nx-ease); } .nx-sidebar__search:focus-within { border-color: color-mix(in srgb, var(--nx-accent) 55%, var(--nx-sb-border)); } .nx-sidebar__search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--nx-sb-strong); font-size: 12px; } .nx-sidebar__search input::placeholder { color: var(--nx-sb-muted); } .nx-sidebar__search button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--nx-sb-muted); } .nx-sidebar__search button:hover { color: var(--nx-sb-strong); background: var(--nx-sb-hover); } .nx-sidebar__search .nx-kbd { border-color: var(--nx-sb-border); background: transparent; color: var(--nx-sb-muted); } .nx-sidebar__nav { flex: 1; min-height: 0; padding: 11px 9px 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--nx-sb-scroll) transparent; } .nx-sidebar__nav::-webkit-scrollbar { width: 6px; } .nx-sidebar__nav::-webkit-scrollbar-thumb { border-radius: 6px; background: var(--nx-sb-scroll); } .nx-nav-empty { padding: 16px 10px; color: var(--nx-sb-muted); font-size: var(--nx-text-xs); text-align: center; } .nx-nav-group { display: grid; gap: 2px; } .nx-nav-group + .nx-nav-group { margin-top: 10px; } .nx-nav-group__label { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 25px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: var(--nx-sb-muted); font-size: var(--nx-text-2xs); font-weight: 850; letter-spacing: .09em; text-transform: uppercase; } .nx-nav-group__label:hover { color: var(--nx-sb-text); } .nx-nav-group__label svg { transition: transform var(--nx-dur) var(--nx-ease); } .nx-nav-group[data-closed="true"] .nx-nav-group__label svg { transform: rotate(-90deg); } .nx-nav-group__items { display: grid; gap: 2px; } .nx-nav-group[data-closed="true"] .nx-nav-group__items { display: none; } .nx-nav-row { position: relative; } .nx-nav-link { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 7px 9px; border: 1px solid transparent; border-radius: 10px; color: var(--nx-sb-text); font-size: var(--nx-text-sm); font-weight: 650; text-decoration: none; transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease); } .nx-nav-link svg { flex: none; color: var(--nx-sb-muted); transition: color var(--nx-dur) var(--nx-ease); } .nx-nav-link:hover { background: var(--nx-sb-hover); color: var(--nx-sb-strong); } .nx-nav-link:hover svg { color: var(--nx-sb-strong); } .nx-nav-link.is-active { border-color: var(--nx-sb-active-border); background: linear-gradient(90deg, var(--nx-sb-active-a), var(--nx-sb-active-b)); color: var(--nx-sb-active-text); font-weight: 750; } .nx-nav-link.is-active::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: -1px; width: 2px; border-radius: 0 2px 2px 0; background: var(--nx-sb-indicator); } .nx-nav-link.is-active svg { color: var(--nx-sb-active-icon); } .nx-nav-link__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-nav-link__badge { flex: none; display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--nx-sb-badge); color: var(--nx-sb-badge-text); font-size: 9px; font-weight: 850; line-height: 1; } .nx-nav-link__badge.is-alert { background: var(--nx-danger); color: #ffffff; } .nx-nav-pin { position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--nx-sb-muted); opacity: 0; transform: translateY(-50%); transition: opacity var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-nav-row:hover .nx-nav-pin, .nx-nav-row:focus-within .nx-nav-pin { opacity: 1; } .nx-nav-pin:hover { background: var(--nx-sb-hover); color: var(--nx-sb-strong); } .nx-nav-pin[aria-pressed="true"] { color: var(--nx-warning); } .nx-nav-row:hover .nx-nav-link, .nx-nav-row:focus-within .nx-nav-link { padding-right: 36px; } .nx-nav-row:hover .nx-nav-link__badge, .nx-nav-row:focus-within .nx-nav-link__badge { display: none; } .nx-sidebar__foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--nx-sb-border); } .nx-sidebar__user { display: flex; flex: 1; align-items: center; gap: 9px; min-width: 0; } .nx-sidebar__user-copy { min-width: 0; } .nx-sidebar__user-copy strong, .nx-sidebar__user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-sidebar__user-copy strong { color: var(--nx-sb-strong); font-size: 12px; font-weight: 750; } .nx-sidebar__user-copy small { color: var(--nx-sb-muted); font-size: 10px; } .nx-sb-btn { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--nx-sb-btn-border); border-radius: 9px; background: var(--nx-sb-btn); color: var(--nx-sb-btn-text); transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-sb-btn:hover { background: var(--nx-sb-hover); color: var(--nx-sb-strong); } .nx-avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--nx-accent), var(--nx-accent-strong)); color: var(--nx-on-accent); font-size: 11px; font-weight: 850; letter-spacing: .02em; } .nx-rail-tip { position: fixed; left: calc(var(--nx-rail-w) + 8px); z-index: 95; padding: 6px 9px; border-radius: var(--nx-radius-sm); background: var(--nx-tooltip-bg); color: var(--nx-tooltip-text); font-size: var(--nx-text-xs); font-weight: 700; white-space: nowrap; pointer-events: none; transform: translateY(-50%); box-shadow: var(--nx-shadow); animation: nx-fade-in var(--nx-dur) var(--nx-ease); } .nx-rail-tip::before { content: ""; position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; background: inherit; transform: translateY(-50%) rotate(45deg); } .nx-overlay { display: none; } /* Collapsed rail (desktop only; mobile always uses the off-canvas drawer) */ @media (min-width: 961px) { html[data-nx-collapsed="true"] .nx-app { grid-template-columns: var(--nx-rail-w) minmax(0, 1fr); } html[data-nx-collapsed="true"] :is(.nx-brand__copy, .nx-nav-link__label, .nx-nav-link__badge:not(.is-alert), .nx-nav-pin, .nx-nav-group__label, .nx-sidebar__search, .nx-sidebar__user-copy, .nx-nav-group[data-pinned="true"]) { display: none; } html[data-nx-collapsed="true"] .nx-sidebar__head { justify-content: center; padding: 12px 0; } html[data-nx-collapsed="true"] .nx-sidebar__nav { padding: 10px 11px 18px; scrollbar-width: none; } html[data-nx-collapsed="true"] .nx-nav-group[data-closed="true"] .nx-nav-group__items { display: grid; } html[data-nx-collapsed="true"] .nx-nav-group + .nx-nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--nx-sb-border); } html[data-nx-collapsed="true"] .nx-nav-link, html[data-nx-collapsed="true"] .nx-nav-row:hover .nx-nav-link { justify-content: center; width: 44px; min-height: 40px; margin: 0 auto; padding: 0; } html[data-nx-collapsed="true"] .nx-nav-link__badge.is-alert, html[data-nx-collapsed="true"] .nx-nav-row:hover .nx-nav-link__badge.is-alert { position: absolute; top: 7px; right: 7px; display: block; width: 8px; min-width: 0; height: 8px; padding: 0; font-size: 0; box-shadow: 0 0 0 2px var(--nx-sb-bg); } html[data-nx-collapsed="true"] .nx-sidebar__foot { flex-direction: column; padding: 10px 0; } html[data-nx-collapsed="true"] .nx-sidebar__user { flex: none; } } /* Main column + topbar */ .nx-main { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; min-height: 100dvh; } .nx-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; min-height: var(--nx-topbar-h); padding: 10px 18px; border-bottom: 1px solid var(--nx-border); background: color-mix(in srgb, var(--nx-surface) 92%, transparent); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); } .nx-topbar__start { display: flex; flex: 1 1 0; align-items: center; gap: 10px; min-width: 0; } .nx-topbar__center { flex: 0 1 420px; min-width: 0; } .nx-topbar__actions { display: flex; flex: 1 1 0; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; } .nx-topbar__divider { flex: none; width: 1px; height: 22px; margin: 0 4px; background: var(--nx-border); } .nx-topbar :is(.nx-topbar__menu, .nx-topbar__search-mobile) { display: none; } .nx-topbar__crumbs { min-width: 0; } .nx-crumbs { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; padding: 0; list-style: none; color: var(--nx-muted); font-size: var(--nx-text-sm); font-weight: 600; white-space: nowrap; } .nx-crumbs li { display: flex; align-items: center; gap: 7px; min-width: 0; } .nx-crumbs li + li::before { content: "/"; color: var(--nx-subtle); font-weight: 400; } .nx-crumbs a { color: inherit; text-decoration: none; transition: color var(--nx-dur) var(--nx-ease); } .nx-crumbs a:hover { color: var(--nx-accent-ink); } .nx-crumbs [aria-current="page"] { max-width: 38vw; overflow: hidden; text-overflow: ellipsis; color: var(--nx-text); font-weight: 750; } .nx-search-trigger { display: flex; align-items: center; gap: 9px; width: 100%; height: 36px; padding: 0 8px 0 11px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-control); background: var(--nx-surface-2); color: var(--nx-subtle); font-size: var(--nx-text-sm); text-align: left; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-search-trigger > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-search-trigger:hover { border-color: var(--nx-border-strong); background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); } .nx-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--nx-border); border-bottom-width: 2px; border-radius: 6px; background: var(--nx-surface); color: var(--nx-muted); font: 800 10px/1 var(--nx-mono); white-space: nowrap; } .nx-icon-btn { position: relative; flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--nx-radius-icon); background: transparent; color: var(--nx-muted); transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease); } .nx-icon-btn:hover { border-color: var(--nx-border); background: var(--nx-hover); color: var(--nx-text); } .nx-icon-btn:is([aria-expanded="true"], [aria-pressed="true"]) { border-color: color-mix(in srgb, var(--nx-accent) 24%, transparent); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-icon-btn--sm { width: 30px; height: 30px; } .nx-icon-btn:disabled { opacity: .45; pointer-events: none; } .nx-count { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid var(--nx-surface); border-radius: 999px; background: var(--nx-danger); color: #ffffff; font-size: 9px; font-weight: 850; line-height: 1; } .nx-anchor { position: relative; } .nx-user-btn { display: flex; align-items: center; gap: 9px; height: 40px; padding: 3px 10px 3px 3px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--nx-text); transition: background var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease); } .nx-user-btn:is(:hover, [aria-expanded="true"]) { border-color: var(--nx-border); background: var(--nx-hover); } .nx-user-btn__copy { display: grid; line-height: 1.25; text-align: left; } .nx-user-btn__copy strong, .nx-user-btn__copy small { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-user-btn__copy strong { font-size: 12px; font-weight: 750; } .nx-user-btn__copy small { color: var(--nx-muted); font-size: 10px; } .nx-user-btn > svg { color: var(--nx-subtle); } /* Dropdown menu */ .nx-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 230px; max-width: min(320px, calc(100vw - 24px)); padding: 6px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); box-shadow: var(--nx-shadow-lg); transform-origin: top right; animation: nx-pop var(--nx-dur) var(--nx-ease); } .nx-menu__head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; padding: 8px 9px 11px; border-bottom: 1px solid var(--nx-border); } .nx-menu__head > span:last-child { min-width: 0; } .nx-menu__head strong, .nx-menu__head small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-menu__head strong { font-size: var(--nx-text-sm); font-weight: 800; } .nx-menu__head small { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-menu__roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .nx-menu__item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 34px; padding: 7px 9px; border: 0; border-radius: var(--nx-radius-sm); background: transparent; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 600; text-align: left; text-decoration: none; transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-menu__item svg { flex: none; color: var(--nx-muted); } .nx-menu__item:is(:hover, :focus-visible) { outline: 0; background: var(--nx-surface-2); color: var(--nx-accent-ink); } .nx-menu__item:hover svg { color: var(--nx-accent); } .nx-menu__item.is-danger, .nx-menu__item.is-danger:hover, .nx-menu__item.is-danger svg { color: var(--nx-danger-ink); } .nx-menu__item .nx-kbd { margin-left: auto; } .nx-menu__sep { height: 1px; margin: 5px 4px; background: var(--nx-border); } .nx-menu__label { padding: 6px 9px 4px; color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } /* Segmented control, buttons, badges */ .nx-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--nx-border); border-radius: calc(var(--nx-radius-control) + 3px); background: var(--nx-surface-2); } .nx-seg button { height: 28px; padding: 0 11px; border: 0; border-radius: var(--nx-radius-control); background: transparent; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; white-space: nowrap; transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-seg button:hover { color: var(--nx-text); } .nx-seg button:is([aria-pressed="true"], [aria-selected="true"], .is-active) { background: var(--nx-surface); color: var(--nx-text); box-shadow: 0 0 0 1px var(--nx-border), var(--nx-shadow-sm); } .nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: var(--nx-h-sm); padding: 0 var(--nx-btn-x); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-btn); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: var(--nx-text-sm); font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease); } .nx-btn:hover { border-color: color-mix(in srgb, var(--nx-accent) 62%, var(--nx-border)); color: var(--nx-accent-ink); } .nx-btn:active { transform: translateY(1px); } .nx-btn--primary { border-color: transparent; background: linear-gradient(135deg, var(--nx-accent), var(--nx-accent-strong)); color: var(--nx-on-accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--nx-accent) 22%, transparent); } .nx-btn--primary:hover { border-color: transparent; color: var(--nx-on-accent); filter: brightness(1.05); } .nx-btn--ghost { border-color: transparent; background: transparent; color: var(--nx-muted); } .nx-btn--ghost:hover { border-color: transparent; background: var(--nx-hover); color: var(--nx-text); } .nx-btn--danger { border-color: transparent; background: var(--nx-danger); color: #ffffff; } .nx-btn--danger:hover { border-color: transparent; color: #ffffff; filter: brightness(1.06); } .nx-btn--sm { min-height: 30px; padding: 0 10px; font-size: var(--nx-text-xs); } .nx-btn:disabled, .nx-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; } .nx-spin { animation: nx-spin .8s linear infinite; } .nx-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } html[data-nx-lock] { overflow: hidden; } .nx-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; line-height: 1.4; white-space: nowrap; } .nx-badge[data-tone] { border-color: color-mix(in srgb, var(--tone) 26%, transparent); background: color-mix(in srgb, var(--tone) 10%, var(--nx-surface)); color: var(--tone-ink); } .nx-app [data-tone="accent"] { --tone: var(--nx-accent); --tone-ink: var(--nx-accent-ink); } .nx-app [data-tone="success"] { --tone: var(--nx-success); --tone-ink: var(--nx-success-ink); } .nx-app [data-tone="warning"] { --tone: var(--nx-warning); --tone-ink: var(--nx-warning-ink); } .nx-app [data-tone="danger"] { --tone: var(--nx-danger); --tone-ink: var(--nx-danger-ink); } .nx-app [data-tone="info"] { --tone: var(--nx-info); --tone-ink: var(--nx-info-ink); } .nx-app [data-tone="violet"] { --tone: var(--nx-violet); --tone-ink: var(--nx-violet-ink); } .nx-app [data-tone="muted"] { --tone: var(--nx-subtle); --tone-ink: var(--nx-muted); } /* Content column, status bar, offline banner, bottom nav */ .nx-content { flex: 1; width: 100%; max-width: var(--nx-workspace); margin: 0 auto; padding: calc(22px * var(--nx-density)) calc(24px * var(--nx-density)) 48px; color: var(--nx-text); outline: 0; } .nx-content .shell { width: 100%; max-width: none; margin: 0; } .nx-offline { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid color-mix(in srgb, var(--nx-warning) 30%, transparent); background: var(--nx-warning-soft); color: var(--nx-warning-ink); font-size: var(--nx-text-xs); font-weight: 750; } .nx-statusbar { display: none; } html[data-nx-statusbar="true"] .nx-statusbar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 7px 16px; border-top: 1px solid var(--nx-border); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-statusbar__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .nx-statusbar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nx-success); box-shadow: 0 0 0 3px var(--nx-success-soft); } .nx-statusbar__dot.is-offline { background: var(--nx-warning); box-shadow: 0 0 0 3px var(--nx-warning-soft); } .nx-statusbar__spacer { flex: 1; } .nx-statusbar button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border: 0; border-radius: 6px; background: transparent; color: inherit; font-size: inherit; font-weight: 650; } .nx-statusbar button:hover { background: var(--nx-hover); color: var(--nx-text); } .nx-bottom-nav { display: none; } /* ── 9. Overlays: notifications · toasts · dialog · command palette ──────────────────────── */ .nx-notif { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; } .nx-notif__backdrop { position: absolute; inset: 0; background: var(--nx-scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: nx-fade-in var(--nx-dur) var(--nx-ease); } .nx-notif__panel { position: relative; display: flex; flex-direction: column; width: min(430px, calc(100vw - 20px)); height: 100%; border-left: 1px solid var(--nx-border); background: var(--nx-surface); box-shadow: -28px 0 80px rgba(0, 0, 0, .24); animation: nx-slide-in calc(var(--nx-dur) * 1.4) var(--nx-ease); } .nx-notif__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 17px 12px; } .nx-notif__head h2 { margin: 0; font-size: var(--nx-text-lg); font-weight: 800; letter-spacing: -.01em; } .nx-notif__head small { display: block; margin-top: 2px; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-notif__head-actions { display: flex; align-items: center; gap: 4px; } .nx-notif__filters { display: flex; gap: 6px; padding: 0 17px 12px; overflow-x: auto; border-bottom: 1px solid var(--nx-border); scrollbar-width: none; } .nx-notif__filters button { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border: 1px solid var(--nx-border); border-radius: 999px; background: transparent; color: var(--nx-muted); font-size: 11px; font-weight: 800; } .nx-notif__filters button:hover { color: var(--nx-text); } .nx-notif__filters button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--nx-accent) 30%, transparent); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-notif__filters b { min-width: 16px; padding: 0 4px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-text); font-size: 9px; text-align: center; } .nx-notif__list { flex: 1; min-height: 0; margin: 0; padding: 0; overflow-y: auto; list-style: none; } .nx-notif__item { position: relative; display: grid; grid-template-columns: 8px 36px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 13px 14px; border-bottom: 1px solid var(--nx-border); transition: background var(--nx-dur) var(--nx-ease); } .nx-notif__item:hover { background: var(--nx-hover); } .nx-notif__item.is-unread { background: color-mix(in srgb, var(--nx-accent) 5%, transparent); box-shadow: inset 3px 0 0 var(--nx-accent); } .nx-notif__dot { width: 8px; height: 8px; margin-top: 14px; border-radius: 50%; } .nx-notif__item.is-unread .nx-notif__dot { background: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); } .nx-notif__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--tone, var(--nx-info)) 13%, transparent); color: var(--tone-ink, var(--nx-info-ink)); } .nx-notif__body { min-width: 0; } .nx-notif__body strong { display: block; font-size: var(--nx-text-sm); font-weight: 800; line-height: 1.35; } .nx-notif__body p { margin: 3px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; overflow-wrap: anywhere; } .nx-notif__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: var(--nx-subtle); font-size: 10px; font-weight: 600; } .nx-notif__meta a { color: var(--nx-accent-ink); font-weight: 800; text-decoration: none; } .nx-notif__meta a:hover { text-decoration: underline; } .nx-notif__read { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--nx-subtle); } .nx-notif__read:hover { border-color: var(--nx-border); background: var(--nx-surface); color: var(--nx-success-ink); } .nx-notif__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 17px; border-top: 1px solid var(--nx-border); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; gap: 9px; width: min(400px, calc(100vw - 32px)); pointer-events: none; } .nx-toast { --tone: var(--nx-info); --tone-ink: var(--nx-info-ink); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 11px; padding: 13px 14px 13px 15px; border: 1px solid var(--nx-border); border-left: 3px solid var(--tone); border-radius: var(--nx-radius-lg); background: color-mix(in srgb, var(--nx-surface) 96%, var(--tone)); box-shadow: 0 14px 38px rgba(0, 0, 0, .18), var(--nx-shadow-sm); pointer-events: auto; animation: nx-toast-in calc(var(--nx-dur) * 1.3) var(--nx-ease); } .nx-toast__icon { margin-top: 1px; color: var(--tone); } .nx-toast strong { display: block; font-size: var(--nx-text-sm); font-weight: 800; line-height: 1.4; } .nx-toast p { margin: 2px 0 0; color: var(--nx-muted); font-size: calc(var(--nx-fs) * .88); line-height: 1.5; overflow-wrap: anywhere; } .nx-toast__close { display: grid; place-items: center; width: 28px; height: 28px; margin: -5px -6px 0 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--nx-subtle); } .nx-toast__close:hover { background: var(--nx-surface-3); color: var(--nx-text); } .nx-toast__action { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; color: var(--tone-ink); font-size: calc(var(--nx-fs) * .86); font-weight: 750; text-decoration: none; } .nx-toast__action:hover { text-decoration: underline; } .nx-dialog { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 18px; } .nx-dialog__backdrop { position: absolute; inset: 0; background: var(--nx-backdrop); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: nx-fade-in var(--nx-dur) var(--nx-ease); } .nx-dialog__panel { position: relative; display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(80vh, 720px); overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-xl); background: var(--nx-surface); box-shadow: var(--nx-shadow-lg); animation: nx-pop calc(var(--nx-dur) * 1.2) var(--nx-ease); } .nx-dialog__panel.is-wide { width: min(760px, 100%); } .nx-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--nx-border); } .nx-dialog__head h2 { margin: 0; font-size: var(--nx-text-lg); font-weight: 800; letter-spacing: -.01em; } .nx-dialog__head p { margin: 3px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-dialog__body { padding: 16px 18px; overflow-y: auto; } .nx-dialog__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--nx-border); background: var(--nx-surface-2); } .nx-dialog__foot > :first-child:not(:last-child) { margin-right: auto; } .nx-shortcuts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; } .nx-shortcuts h3 { margin: 0 0 8px; color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .nx-shortcuts dl { display: grid; margin: 0; } .nx-shortcuts dl > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--nx-border); } .nx-shortcuts dt { font-size: var(--nx-text-sm); } .nx-shortcuts dd { display: flex; flex: none; gap: 4px; margin: 0; } .nx-palette { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-start; justify-content: center; padding: clamp(72px, 10vh, 120px) 18px 28px; } .nx-palette__backdrop { position: absolute; inset: 0; background: var(--nx-backdrop); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: nx-fade-in var(--nx-dur) var(--nx-ease); } .nx-palette__panel { position: relative; display: flex; flex-direction: column; width: min(720px, calc(100vw - 36px)); max-height: min(72vh, 760px); overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-xl); background: var(--nx-surface); box-shadow: 0 34px 100px rgba(0, 0, 0, .34); animation: nx-palette-in calc(var(--nx-dur) * 1.2) var(--nx-ease); } .nx-palette__search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; margin: 12px 12px 0; padding: 0 10px 0 13px; border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); color: var(--nx-subtle); transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-palette__search:focus-within { border-color: color-mix(in srgb, var(--nx-accent) 62%, var(--nx-border)); box-shadow: 0 0 0 3px var(--nx-accent-soft); } .nx-palette__search input { width: 100%; min-width: 0; height: 46px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--nx-text); font-size: 15px; font-weight: 650; } .nx-palette__search input::placeholder { color: var(--nx-subtle); font-weight: 500; } .nx-palette__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 14px 2px; color: var(--nx-subtle); font-size: var(--nx-text-2xs); } .nx-palette__hint button { height: 22px; padding: 0 8px; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 750; } .nx-palette__hint button:hover { border-color: color-mix(in srgb, var(--nx-accent) 40%, var(--nx-border)); color: var(--nx-accent-ink); } .nx-palette__list { flex: 1; min-height: 0; padding: 8px 10px 10px; overflow-y: auto; overscroll-behavior: contain; } .nx-palette__group + .nx-palette__group { margin-top: 6px; } .nx-palette__label { display: flex; align-items: center; gap: 8px; padding: 8px 8px 5px; color: var(--nx-subtle); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .nx-palette__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid transparent; border-radius: 10px; color: var(--nx-text); cursor: pointer; } .nx-palette__item[aria-selected="true"] { border-color: color-mix(in srgb, var(--nx-accent) 22%, transparent); background: var(--nx-accent-soft); } .nx-palette__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--nx-surface-3); color: var(--nx-accent); } .nx-palette__item[aria-selected="true"] .nx-palette__icon { background: var(--nx-surface); } .nx-palette__copy { min-width: 0; } .nx-palette__copy strong, .nx-palette__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-palette__copy strong { font-size: var(--nx-text-md); font-weight: 800; } .nx-palette__copy small { margin-top: 1px; color: var(--nx-muted); font-size: calc(var(--nx-fs) * .85); } .nx-palette__copy mark { background: transparent; color: var(--nx-accent-ink); font-weight: 900; } .nx-palette__meta { color: var(--nx-subtle); font-size: 10px; font-weight: 700; white-space: nowrap; } .nx-palette__pin { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--nx-subtle); opacity: 0; } .nx-palette__item:is(:hover, [aria-selected="true"]) .nx-palette__pin, .nx-palette__pin[aria-pressed="true"] { opacity: 1; } .nx-palette__pin:hover { background: var(--nx-surface); color: var(--nx-text); } .nx-palette__pin[aria-pressed="true"] { color: var(--nx-warning); } .nx-palette__empty { display: grid; justify-items: center; gap: 6px; padding: 34px 20px; color: var(--nx-muted); text-align: center; } .nx-palette__empty strong { color: var(--nx-text); font-size: var(--nx-text-md); } .nx-palette__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--nx-border); background: var(--nx-surface-2); color: var(--nx-subtle); font-size: 10px; } .nx-palette__foot span { display: inline-flex; align-items: center; gap: 5px; } .nx-palette__foot .nx-kbd { min-width: 18px; height: 18px; font-size: 9px; } .nx-palette__foot span:last-child { margin-left: auto; } /* ── 10. Appearance drawer ───────────────────────────────────────────────────────────────── */ .nx-drawer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; } .nx-drawer__backdrop { position: absolute; inset: 0; background: rgba(5, 9, 15, .12); animation: nx-fade-in var(--nx-dur) var(--nx-ease); } .nx-drawer__panel { position: relative; display: flex; flex-direction: column; width: min(460px, calc(100vw - 16px)); height: 100%; border-left: 1px solid var(--nx-border); background: var(--nx-surface); box-shadow: -28px 0 80px rgba(0, 0, 0, .22); animation: nx-slide-in calc(var(--nx-dur) * 1.4) var(--nx-ease); } .nx-drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; } .nx-drawer__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--nx-text-lg); font-weight: 800; letter-spacing: -.01em; } .nx-drawer__head h2 svg { color: var(--nx-accent); } .nx-drawer__head p { margin: 3px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-drawer__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 0 18px; padding: 3px; border: 1px solid var(--nx-border); border-radius: calc(var(--nx-radius-control) + 3px); background: var(--nx-surface-2); } .nx-drawer__tabs button { height: 30px; padding: 0 6px; border: 0; border-radius: var(--nx-radius-control); background: transparent; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; white-space: nowrap; } .nx-drawer__tabs button:hover { color: var(--nx-text); } .nx-drawer__tabs button[aria-selected="true"] { background: var(--nx-surface); color: var(--nx-text); box-shadow: 0 0 0 1px var(--nx-border), var(--nx-shadow-sm); } .nx-drawer__body { display: grid; flex: 1; align-content: start; gap: 18px; min-height: 0; padding: 16px 18px 22px; overflow-y: auto; overscroll-behavior: contain; } .nx-drawer__foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--nx-border); background: var(--nx-surface-2); } .nx-drawer__foot .nx-save-state { margin-right: auto; } .nx-save-state { display: inline-flex; align-items: center; gap: 7px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-save-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--nx-success); box-shadow: 0 0 0 3px var(--nx-success-soft); } .nx-save-state[data-state="saving"] i { background: var(--nx-warning); box-shadow: 0 0 0 3px var(--nx-warning-soft); animation: nx-pulse-dot 1s ease-in-out infinite; } .nx-save-state[data-state="error"] { color: var(--nx-danger-ink); } .nx-save-state[data-state="error"] i { background: var(--nx-danger); box-shadow: 0 0 0 3px var(--nx-danger-soft); } .nx-save-state[data-state="dirty"] { color: var(--nx-warning-ink); } .nx-save-state[data-state="dirty"] i { background: var(--nx-warning); box-shadow: 0 0 0 3px var(--nx-warning-soft); } .nx-save-state[data-state="saved"] { color: var(--nx-success-ink); } .nx-ap-section { display: grid; gap: 10px; } .nx-ap-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .nx-ap-section__head h3 { margin: 0; font-size: var(--nx-text-sm); font-weight: 800; } .nx-ap-section__head small { color: var(--nx-muted); font-size: var(--nx-text-2xs); text-align: right; } .nx-ap-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 7px; } .nx-ap-options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-ap-options--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nx-ap-options--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nx-ap-option { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 7px; min-width: 0; min-height: 82px; padding: 10px 11px; border: 1px solid var(--nx-border); border-radius: 11px; background: var(--nx-surface-2); color: var(--nx-text); text-align: left; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease); } .nx-ap-option:hover { background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); transform: translateY(-1px); } .nx-ap-option[aria-pressed="true"] { border-color: color-mix(in srgb, var(--nx-accent) 42%, var(--nx-border)); background: linear-gradient(145deg, var(--nx-accent-soft), var(--nx-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx-accent) 20%, transparent); } .nx-ap-option__copy { display: grid; gap: 1px; min-width: 0; max-width: 100%; } .nx-ap-option__copy strong { overflow: hidden; font-size: var(--nx-text-xs); font-weight: 760; text-overflow: ellipsis; white-space: nowrap; } .nx-ap-option__copy small { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-2xs); text-overflow: ellipsis; white-space: nowrap; } .nx-ap-option__check, .nx-preset__check, .nx-swatch__check { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--nx-accent); color: var(--nx-on-accent); opacity: 0; transform: scale(.75); transition: opacity var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease); } [aria-pressed="true"] > :is(.nx-ap-option__check, .nx-preset__check, .nx-swatch__check) { opacity: 1; transform: scale(1); } /* Option demos */ .nx-demo { position: relative; flex: none; display: block; overflow: hidden; border: 1px solid var(--nx-border); border-radius: 7px; background: var(--nx-surface); } .nx-demo--theme { width: 55px; height: 34px; background: #f4f6fa; border-color: #d8dee8; } .nx-demo--theme i { position: absolute; inset: 0 auto 0 0; width: 13px; background: #0a0f15; } .nx-demo--theme b { position: absolute; top: 5px; left: 17px; right: 5px; height: 5px; border-radius: 3px; background: #ffffff; box-shadow: 0 0 0 1px #e4e8ef; } .nx-demo--theme em { position: absolute; top: 14px; left: 17px; right: 5px; bottom: 5px; border-radius: 3px; background: #ffffff; box-shadow: 0 0 0 1px #e4e8ef; } .nx-demo--theme small { position: absolute; top: 18px; left: 21px; width: 10px; height: 4px; border-radius: 2px; background: var(--nx-accent); } .nx-demo--theme.is-dark { background: #080d13; border-color: #394554; } .nx-demo--theme.is-dark :is(b, em) { background: #0f151d; box-shadow: 0 0 0 1px #28313c; } .nx-demo--theme.is-system { background: linear-gradient(135deg, #f4f6fa 50%, #080d13 50%); } .nx-demo--theme.is-system em { background: linear-gradient(135deg, #ffffff 50%, #0f151d 50%); } .nx-demo--font { display: grid; place-items: center; width: 44px; height: 32px; color: var(--nx-accent); font-size: 20px; font-weight: 780; line-height: 1; } .nx-demo--size { display: grid; place-items: center; width: 36px; height: 29px; border-color: transparent; background: var(--nx-accent-soft); color: var(--nx-accent-ink); font-family: var(--nx-mono); font-weight: 800; } .nx-demo--radius { width: 42px; height: 27px; border: 0; border-radius: var(--r); background: linear-gradient(135deg, var(--nx-accent), var(--nx-accent-strong)); } .nx-demo--density { display: grid; align-content: center; gap: var(--d); width: 45px; height: 30px; padding: 0 7px; } .nx-demo--density i { height: 3px; border-radius: 2px; background: var(--nx-border-strong); } .nx-demo--density i:first-child { background: var(--nx-accent); } .nx-demo--sidebar { width: 48px; height: 29px; } .nx-demo--sidebar i { position: absolute; inset: 0 auto 0 0; width: var(--sb); background: var(--sbc, #0a0f15); } .nx-demo--workspace { display: grid; place-items: center; width: 52px; height: 29px; } .nx-demo--workspace i { width: var(--w); height: 15px; border-radius: 3px; background: var(--nx-accent-soft-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx-accent) 40%, transparent); } .nx-demo--shadow { width: 43px; height: 26px; margin: 0 0 4px 2px; overflow: visible; border-color: var(--nx-border); border-radius: 6px; box-shadow: var(--sh); } .nx-demo--motion { width: 48px; height: 27px; } .nx-demo--motion b { position: absolute; top: 12px; left: 6px; width: var(--bw); height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--nx-accent-soft-2)); } .nx-demo--motion i { position: absolute; top: 9px; left: calc(6px + var(--bw)); width: 9px; height: 9px; border-radius: 50%; background: var(--nx-accent); } /* Presets */ .nx-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .nx-preset { position: relative; display: grid; gap: 8px; min-width: 0; padding: 8px; border: 1px solid var(--nx-border); border-radius: 12px; background: var(--nx-surface); color: var(--nx-text); text-align: left; transition: border-color var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-preset:hover { box-shadow: 0 7px 18px rgba(15, 23, 42, .07); transform: translateY(-2px); } .nx-preset[aria-pressed="true"] { border-color: color-mix(in srgb, var(--nx-accent) 48%, var(--nx-border)); background: color-mix(in srgb, var(--nx-accent) 4%, var(--nx-surface)); } .nx-preset__preview { position: relative; display: block; min-height: 54px; aspect-ratio: 1.9 / 1; overflow: hidden; border: 1px solid color-mix(in srgb, var(--nx-text) 10%, transparent); border-radius: 9px; background: linear-gradient(90deg, var(--p1) 0 25%, var(--p2) 25% 50%, var(--p3) 50% 75%, var(--p4) 75% 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24); } .nx-preset__preview::before { content: ""; position: absolute; inset: 8px 9px auto; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--p4) 78%, #ffffff); box-shadow: 0 12px 0 color-mix(in srgb, var(--p4) 55%, #ffffff); } .nx-preset__preview :is(i, b, em, small) { position: absolute; bottom: 7px; height: 12px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .nx-preset__preview i { left: 9px; width: 24%; background: var(--p1); } .nx-preset__preview b { left: 36%; width: 20%; background: var(--p2); } .nx-preset__preview em { left: 60%; width: 14%; background: var(--p3); } .nx-preset__preview small { right: 9px; width: 14%; background: var(--p4); } .nx-preset__copy { display: grid; gap: 2px; min-width: 0; padding: 0 2px 2px; } .nx-preset__copy strong { overflow: hidden; font-size: var(--nx-text-xs); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .nx-preset__copy small { display: -webkit-box; overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* Accent swatches + custom colour */ .nx-swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .nx-swatch { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 8px 10px; border: 1px solid var(--nx-border); border-radius: 10px; background: var(--nx-surface-2); color: var(--nx-text); text-align: left; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-swatch:hover { background: var(--nx-surface); } .nx-swatch[aria-pressed="true"] { border-color: color-mix(in srgb, var(--c) 48%, var(--nx-border)); background: color-mix(in srgb, var(--c) 6%, var(--nx-surface)); } .nx-swatch__dot { flex: none; width: 23px; height: 23px; border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 3px 8px color-mix(in srgb, var(--c) 30%, transparent); } .nx-swatch__copy { display: grid; min-width: 0; padding-right: 16px; } .nx-swatch__copy strong { overflow: hidden; font-size: var(--nx-text-xs); font-weight: 760; text-overflow: ellipsis; white-space: nowrap; } .nx-swatch__copy small { color: var(--nx-muted); font: 700 10px/1.4 var(--nx-mono); text-transform: uppercase; } .nx-custom-color { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; border: 1px dashed var(--nx-border-strong); border-radius: 10px; } .nx-custom-color input[type="color"] { width: 40px; height: 38px; padding: 2px; border: 1px solid var(--nx-border); border-radius: 9px; background: var(--nx-surface); cursor: pointer; } .nx-custom-color input[type="text"] { width: 112px; height: 38px; padding: 0 10px; border: 1px solid var(--nx-border-strong); border-radius: 9px; background: var(--nx-surface); color: var(--nx-text); font: 700 12px var(--nx-mono); text-transform: uppercase; } .nx-custom-color input[type="text"]:focus { outline: 0; border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-focus); } .nx-custom-color input[aria-invalid="true"] { border-color: var(--nx-danger); } .nx-custom-color small { flex-basis: 100%; color: var(--nx-muted); font-size: var(--nx-text-2xs); } .nx-range { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--nx-border); border-radius: 10px; background: var(--nx-surface-2); } .nx-range input { flex: 1; min-width: 0; accent-color: var(--nx-accent); } .nx-range output { min-width: 44px; padding: 3px 7px; border-radius: 6px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); font: 800 11px/1.4 var(--nx-mono); text-align: center; } .nx-range span { color: var(--nx-subtle); font-weight: 800; } .nx-switch-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 13px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); cursor: pointer; } .nx-switch-card strong { display: block; font-size: var(--nx-text-sm); font-weight: 750; } .nx-switch-card small { display: block; margin-top: 2px; color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.45; } .nx-switch { position: relative; flex: none; width: 38px; height: 21px; } .nx-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .nx-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--nx-border-strong); pointer-events: none; transition: background var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-switch span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 13px; height: 13px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform var(--nx-dur) var(--nx-ease); } .nx-switch input:checked + span { background: var(--nx-accent); } .nx-switch input:checked + span::after { transform: translateX(17px); } .nx-switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--nx-focus); } .nx-ap-actions { display: flex; flex-wrap: wrap; gap: 8px; } .nx-ap-note { margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--nx-info) 26%, transparent); border-radius: 10px; background: var(--nx-info-soft); color: var(--nx-info-ink); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-code { overflow: hidden; border: 1px solid #1f2733; border-radius: var(--nx-radius-md); background: #0f141b; } .nx-code__bar { display: flex; align-items: center; gap: 6px; height: 37px; padding: 0 12px; background: #171d25; color: #8995a7; font: 700 10px var(--nx-mono); } .nx-code__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; } .nx-code__bar i:nth-child(2) { background: #febc2e; } .nx-code__bar i:nth-child(3) { background: #28c840; } .nx-code__bar span { margin-left: 8px; } .nx-code textarea { display: block; width: 100%; min-height: 230px; padding: 12px 14px; border: 0; outline: 0; background: transparent; color: #d9e3f5; font: 500 10.5px/1.7 var(--nx-mono); resize: vertical; } /* ── 11. Dashboard ───────────────────────────────────────────────────────────────────────── */ .nx-dash { display: grid; gap: calc(var(--nx-section-gap) + 4px); } .nx-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--nx-accent-ink); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .nx-dash-hero { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 22px 24px; overflow: hidden; border-radius: var(--nx-radius-xl); background: linear-gradient(115deg, #0d1420 0%, #19202e 58%, color-mix(in srgb, var(--nx-accent) 40%, #19202e) 100%); color: #ffffff; box-shadow: 0 18px 44px rgba(15, 23, 42, .18); } .nx-dash-hero::before { content: ""; position: absolute; top: -285px; right: 8%; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--nx-accent) 28%, transparent), transparent 68%); pointer-events: none; } .nx-dash-hero > * { position: relative; } .nx-dash-hero__copy { min-width: 0; max-width: 720px; } .nx-dash-hero .nx-eyebrow { color: #b8c1cf; } .nx-dash-hero h1 { margin: 8px 0 6px; color: #ffffff; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; } .nx-dash-hero p { margin: 0; color: #aeb9c9; font-size: var(--nx-text-sm); line-height: 1.6; } .nx-dash-hero__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; color: #8995a7; font-size: var(--nx-text-2xs); font-weight: 700; } .nx-dash-hero__meta span { display: inline-flex; align-items: center; gap: 6px; } .nx-dash-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nx-dash-hero .nx-seg { border-color: rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .06); } .nx-dash-hero .nx-seg button { color: #aeb9c9; } .nx-dash-hero .nx-seg button:hover { color: #ffffff; } .nx-dash-hero .nx-seg button:is([aria-pressed="true"], .is-active) { background: rgba(255, 255, 255, .14); color: #ffffff; box-shadow: none; } .nx-dash-hero .nx-btn { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #e6ebf2; } .nx-dash-hero .nx-btn:hover { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .12); color: #ffffff; } .nx-live { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--nx-success); } .nx-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--nx-success); opacity: 0; animation: nx-pulse 2s ease-out infinite; } .nx-live.is-stale { background: var(--nx-warning); } .nx-live.is-stale::after { border-color: var(--nx-warning); } .nx-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; } .nx-section-head h2 { margin: 0; font-size: var(--nx-text-lg); font-weight: 800; letter-spacing: -.01em; } .nx-section-head small { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .nx-insight { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--nx-border)); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--tone) 7%, var(--nx-surface)); color: var(--nx-text); text-decoration: none; transition: transform var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-insight:hover { box-shadow: var(--nx-shadow); transform: translateY(-1px); } .nx-insight__icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone-ink); } .nx-insight__copy { display: grid; flex: 1; min-width: 0; } .nx-insight__copy strong { overflow: hidden; font-size: var(--nx-text-sm); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .nx-insight__copy small { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-xs); text-overflow: ellipsis; white-space: nowrap; } .nx-insight > svg:last-child { flex: none; color: var(--tone-ink); } .nx-all-clear { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--nx-success) 28%, var(--nx-border)); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--nx-success) 6%, var(--nx-surface)); color: var(--nx-success-ink); font-size: var(--nx-text-sm); font-weight: 700; } .nx-metric-group { display: grid; gap: 10px; } .nx-metric-group__head { display: flex; margin: 0; align-items: center; gap: 10px; color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; } .nx-metric-group__head::after { content: ""; flex: 1; height: 1px; background: var(--nx-border); } .nx-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--nx-section-gap); } .nx-metric { --tone: var(--nx-accent); --tone-ink: var(--nx-accent-ink); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px 17px 0; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); background: var(--nx-surface); color: var(--nx-text); text-decoration: none; box-shadow: var(--nx-shadow-sm); transition: transform var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-metric::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--tone); } .nx-metric:hover { border-color: color-mix(in srgb, var(--tone) 38%, var(--nx-border)); box-shadow: var(--nx-shadow); transform: translateY(-2px); } .nx-metric__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .nx-metric__label { min-width: 0; overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .075em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .nx-metric__icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--tone) 10%, transparent); color: var(--tone-ink); } .nx-metric__value { margin: 4px 0 2px; overflow: hidden; font-size: calc(var(--nx-fs) * 2); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-metric__note { min-height: 1.4em; overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-xs); text-overflow: ellipsis; white-space: nowrap; } .nx-metric__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px -17px 0; padding: 9px 17px; border-top: 1px solid var(--nx-border); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; transition: color var(--nx-dur) var(--nx-ease); } .nx-metric:hover .nx-metric__foot { color: var(--nx-accent-ink); } .nx-dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: var(--nx-section-gap); align-items: start; } .nx-card { min-width: 0; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); } .nx-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: var(--nx-card-y) var(--nx-card-x); border-bottom: 1px solid var(--nx-border); } .nx-card__head h2 { margin: 0; font-size: var(--nx-text-md); font-weight: 800; letter-spacing: -.01em; } .nx-card__head small { display: block; margin-top: 2px; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-card__head a { color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 750; text-decoration: none; } .nx-card__head a:hover { text-decoration: underline; } .nx-card__body { padding: var(--nx-card-y) var(--nx-card-x); } .nx-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-legend span { display: inline-flex; align-items: center; gap: 6px; } .nx-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .nx-chart-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .nx-chart-stats > div { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-chart-stats span { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-chart-stats strong { overflow: hidden; font-size: var(--nx-text-lg); font-weight: 800; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-chart-stats small { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 700; } .nx-chart { position: relative; height: 220px; } .nx-chart svg { display: block; width: 100%; height: 100%; overflow: visible; } .nx-chart svg * { vector-effect: non-scaling-stroke; } .nx-chart__grid { stroke: var(--nx-border); stroke-dasharray: 3 4; stroke-width: 1; } .nx-chart__area { fill: url(#nx-chart-fill); } .nx-chart__line { fill: none; stroke: var(--nx-chart-1); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .nx-chart__bar { fill: color-mix(in srgb, var(--nx-chart-2) 70%, transparent); } .nx-chart__bar.is-active { fill: var(--nx-chart-2); } .nx-chart__guide { stroke: var(--nx-border-strong); stroke-width: 1; } .nx-chart__hits { position: absolute; inset: 0; display: flex; } .nx-chart__hits span { flex: 1; } .nx-chart__point { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border: 2px solid var(--nx-surface); border-radius: 50%; background: var(--nx-chart-1); box-shadow: 0 0 0 3px var(--nx-accent-soft); pointer-events: none; } .nx-chart__tip { position: absolute; bottom: calc(100% + 8px); z-index: 2; min-width: 150px; padding: 8px 10px; border-radius: var(--nx-radius-sm); background: var(--nx-tooltip-bg); color: var(--nx-tooltip-text); font-size: var(--nx-text-xs); line-height: 1.5; white-space: nowrap; pointer-events: none; transform: translateX(-50%); box-shadow: var(--nx-shadow); } .nx-chart__tip strong { display: block; margin-bottom: 2px; font-weight: 800; } .nx-chart__tip span { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .nx-chart__tip i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--c); } .nx-chart__axis { display: flex; justify-content: space-between; gap: 6px; margin-top: 8px; color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 700; font-variant-numeric: tabular-nums; } .nx-chart-multi { position: relative; border-radius: var(--nx-radius-sm); outline-offset: 4px; } .nx-chart-panel + .nx-chart-panel { margin-top: 12px; } .nx-chart-panel__title { display: flex; align-items: center; gap: 7px; margin: 0 0 6px; color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; } .nx-chart-panel__title i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--c); } .nx-chart svg line.nx-chart__grid:first-of-type { stroke-dasharray: none; } .nx-chart__ytick { position: absolute; left: 0; width: 44px; color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 700; line-height: 1; text-align: right; font-variant-numeric: tabular-nums; transform: translateY(-50%); pointer-events: none; } .nx-chart__line.is-partial { stroke-dasharray: 4 4; } .nx-chart__bar.is-partial { opacity: .55; } .nx-chart-multi .nx-chart__tip { top: 22px; bottom: auto; } .nx-chart__tip em { display: inline-flex; align-items: center; font-style: normal; opacity: .8; } .nx-chart__tip b { font-weight: 800; font-variant-numeric: tabular-nums; } .nx-chart__axis--abs { position: relative; display: block; height: 16px; } .nx-chart__axis--abs span { position: absolute; top: 0; white-space: nowrap; transform: translateX(-50%); } .nx-chart-table-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-chart-table-wrap table { border-collapse: separate; border-spacing: 0; } .nx-chart-table-wrap thead th { position: sticky; top: 0; z-index: 1; } .nx-chart-table-wrap :is(th, td):not(:first-child) { text-align: right; } .nx-chart-table-wrap tfoot td { position: sticky; bottom: 0; border-top: 1px solid var(--nx-border); border-bottom: 0; background: var(--nx-surface-2); font-weight: 800; } .nx-chart-note { margin: 10px 0 0; color: var(--nx-subtle); font-size: var(--nx-text-2xs); } .nx-timeline { display: grid; margin: 0; padding: 0; list-style: none; } .nx-timeline li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 0 0 14px; } .nx-timeline li:last-child { padding-bottom: 0; } .nx-timeline li:not(:last-child)::after { content: ""; position: absolute; top: 30px; bottom: 2px; left: 13.5px; width: 1px; background: var(--nx-border); } .nx-timeline__marker { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--nx-info)) 12%, var(--nx-surface)); color: var(--tone-ink, var(--nx-info-ink)); box-shadow: 0 0 0 3px var(--nx-surface); } .nx-timeline__copy { display: grid; gap: 1px; min-width: 0; padding-top: 3px; } .nx-timeline__copy strong { overflow: hidden; font-size: var(--nx-text-sm); font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .nx-timeline__copy small { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-xs); text-overflow: ellipsis; white-space: nowrap; } .nx-timeline time { padding-top: 5px; color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 700; white-space: nowrap; } .nx-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 9px; } .nx-quick { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); color: var(--nx-text); text-decoration: none; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease); } .nx-quick:hover { border-color: color-mix(in srgb, var(--nx-accent) 40%, var(--nx-border)); background: color-mix(in srgb, var(--nx-accent) 3%, var(--nx-surface)); transform: translateY(-1px); } .nx-quick__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-quick__copy { display: grid; min-width: 0; } .nx-quick__copy strong { overflow: hidden; font-size: var(--nx-text-sm); font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .nx-quick__copy small { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-xs); text-overflow: ellipsis; white-space: nowrap; } .nx-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .nx-check-list label { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface-2); font-size: var(--nx-text-sm); cursor: pointer; } .nx-check-list label:has(input:checked) { border-color: color-mix(in srgb, var(--nx-accent) 35%, var(--nx-border)); background: color-mix(in srgb, var(--nx-accent) 5%, var(--nx-surface)); } .nx-check-list input { flex: none; width: 15px; height: 15px; margin: 0; } .nx-check-list span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-check-list small { margin-left: auto; color: var(--nx-subtle); font-size: var(--nx-text-2xs); } .nx-empty { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; color: var(--nx-muted); font-size: var(--nx-text-sm); text-align: center; } .nx-empty__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 4px; border-radius: 12px; background: var(--nx-surface-3); color: var(--nx-subtle); } .nx-empty strong { color: var(--nx-text); font-size: var(--nx-text-md); } .nx-skeleton { position: relative; overflow: hidden; border-radius: var(--nx-radius-md); background: var(--nx-skeleton); } .nx-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--nx-skeleton-2), transparent); transform: translateX(-100%); animation: nx-shimmer 1.4s ease-in-out infinite; } .nx-error-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--nx-danger) 30%, var(--nx-border)); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--nx-danger) 6%, var(--nx-surface)); color: var(--nx-danger-ink); font-size: var(--nx-text-sm); font-weight: 650; } .nx-error-card > span { flex: 1; min-width: 200px; } .nx-dash-section { display: grid; gap: 12px; } .nx-dash > * { transition: opacity var(--nx-dur) var(--nx-ease); } .nx-dash.is-refreshing > :not(.nx-dash-hero, .nx-error-card) { opacity: .6; } button.nx-insight { width: 100%; text-align: left; cursor: pointer; } div.nx-insight:hover { box-shadow: none; transform: none; } div.nx-metric:hover { border-color: var(--nx-border); box-shadow: var(--nx-shadow-sm); transform: none; } div.nx-metric:hover .nx-metric__foot { color: var(--nx-muted); } .nx-quick__pin { flex: none; display: inline-grid; place-items: center; margin-left: auto; color: var(--nx-subtle); } .nx-dialog__section + .nx-dialog__section { margin-top: 18px; } .nx-dialog__section h3 { margin: 0 0 8px; color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } /* Boot + access screens (rendered before the shell mounts) */ .nx-boot { display: grid; place-content: center; justify-items: center; gap: 18px; min-height: 100vh; min-height: 100dvh; background: var(--nx-bg); color: var(--nx-muted); font-size: 12px; font-weight: 650; } .nx-boot__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(135deg, var(--nx-accent), var(--nx-accent-strong)); color: var(--nx-on-accent); font-size: 18px; font-weight: 900; letter-spacing: -.02em; box-shadow: 0 14px 34px color-mix(in srgb, var(--nx-accent) 32%, transparent); animation: nx-breathe 1.8s ease-in-out infinite; } .nx-boot__bar { position: relative; width: 160px; height: 3px; overflow: hidden; border-radius: 3px; background: var(--nx-border); } .nx-boot__bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 3px; background: var(--nx-accent); animation: nx-indeterminate 1.1s ease-in-out infinite; } .nx-denied { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 20px; background: var(--nx-bg); color: var(--nx-text); } .nx-denied__card { display: grid; justify-items: center; gap: 10px; width: min(460px, 100%); padding: 28px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-xl); background: var(--nx-surface); box-shadow: var(--nx-shadow-lg); text-align: center; } .nx-denied__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px; background: var(--nx-warning-soft); color: var(--nx-warning-ink); } .nx-denied__card h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .nx-denied__card p { margin: 0 0 8px; color: var(--nx-muted); font-size: 13px; line-height: 1.6; } .nx-denied__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } /* ── 12. Content area: base controls + legacy console classes ────────────────────────────── */ .nx-content :where(h1, h2, h3, h4) { color: var(--nx-text); letter-spacing: -.015em; } .nx-content :where(code, kbd, samp, pre) { font-family: var(--nx-mono); } .nx-content :where(code) { font-size: .92em; } .nx-content :where(pre) { font-size: var(--nx-text-xs); } .nx-content :where(hr) { border: 0; border-top: 1px solid var(--nx-border); } /* * Unclassed buttons in the legacy consoles get the framework secondary button. Containers listed in :not() already * style their own buttons in globals.css. States only flip --nxb-* variables, which nothing else reads. */ .nx-content :where(button:is(:not([class]), [class=""], [class="is-active"], [class="is-on"], [class="danger"]):not(:is(.course-admin__items, .cms-page-list, .cms-reusable-list, .coaching-program-list, .delivery-products, .delivery-release-list, .license-list, .license-mapping-list, .admin-catalog__links, .cms-template-row, .cms-block-list header, .coaching-rule-list, .coaching-exception-list, .slot-grid, .lesson-note-list article, .commerce-item__actions, .coupon-applied, .role-chips, .admin-tabs, .admin-period, .license-row-actions, .coaching-admin-bookings, .nx-seg) button)) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--nxb-h, var(--nx-h-sm)); padding: 0 var(--nxb-px, 12px); border: 1px solid var(--nxb-border, var(--nx-border)); border-radius: var(--nx-radius-btn); background: var(--nxb-bg, var(--nx-surface)); color: var(--nxb-text, var(--nx-text)); box-shadow: var(--nxb-shadow, none); font-size: var(--nxb-fs, var(--nx-text-sm)); font-weight: 650; line-height: 1.2; white-space: nowrap; opacity: var(--nxb-opacity, 1); cursor: var(--nxb-cursor, pointer); transition: border-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-content button:not(:disabled):hover { --nxb-border: color-mix(in srgb, var(--nx-accent) 62%, var(--nx-border)); --nxb-text: var(--nx-accent-ink); } .nx-content button:is(.is-active, .is-on) { --nxb-border: color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); --nxb-bg: var(--nx-accent-soft); --nxb-text: var(--nx-accent-ink); } .nx-content button.danger { --nxb-text: var(--nx-danger-ink); } .nx-content button.danger:not(:disabled):hover { --nxb-border: color-mix(in srgb, var(--nx-danger) 50%, var(--nx-border)); --nxb-bg: var(--nx-danger-soft); --nxb-text: var(--nx-danger-ink); } .nx-content :is(button[type="submit"], form button:default) { --nxb-border: transparent; --nxb-bg: linear-gradient(135deg, var(--nx-accent), var(--nx-accent-strong)); --nxb-text: var(--nx-on-accent); --nxb-shadow: 0 6px 16px color-mix(in srgb, var(--nx-accent) 20%, transparent); } .nx-content :is(button[type="submit"], form button:default):not(:disabled):hover { --nxb-border: transparent; --nxb-bg: linear-gradient(135deg, var(--nx-accent-strong), var(--nx-accent-strong)); --nxb-text: var(--nx-on-accent); } .nx-content :is(td, .table-actions, .admin-table-actions) button { --nxb-h: 28px; --nxb-px: 9px; --nxb-fs: var(--nx-text-xs); } .nx-content button:disabled { --nxb-opacity: .55; --nxb-cursor: not-allowed; } .nx-content :is(.table-actions, .admin-table-actions) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .nx-content .button { gap: 7px; min-height: var(--nx-h); padding: 0 var(--nx-btn-x); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-btn); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: var(--nx-text-sm); font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-content .button:hover { border-color: color-mix(in srgb, var(--nx-accent) 62%, var(--nx-border)); color: var(--nx-accent-ink); transform: none; } .nx-content .button--primary { border-color: transparent; background: linear-gradient(135deg, var(--nx-accent), var(--nx-accent-strong)); color: var(--nx-on-accent); box-shadow: 0 8px 18px color-mix(in srgb, var(--nx-accent) 22%, transparent); } .nx-content .button--primary:hover { border-color: transparent; color: var(--nx-on-accent); filter: brightness(1.05); } .nx-content .button:disabled { opacity: .55; cursor: not-allowed; } .nx-content .button.is-saved { border-color: color-mix(in srgb, var(--nx-accent) 30%, transparent); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-content .text-button { padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--nx-accent-ink); font-size: inherit; font-weight: 750; transition: background var(--nx-dur) var(--nx-ease); } .nx-content .text-button:hover { background: var(--nx-accent-soft); } .nx-content .text-button.danger:hover { background: var(--nx-danger-soft); } .nx-content :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="hidden"], [type="image"]), select, textarea) { min-height: var(--nx-h-sm); max-width: 100%; padding: 0 11px; border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius-control); background: var(--nx-surface); color: var(--nx-text); font-size: var(--nx-text-sm); transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-content :where(textarea) { min-height: 88px; padding: 9px 11px; border-radius: var(--nx-radius-md); line-height: 1.55; resize: vertical; } .nx-content :where(input, textarea)::placeholder { color: var(--nx-subtle); } .nx-content :where(input[type="checkbox"], input[type="radio"]) { width: 15px; height: 15px; margin: 0; } .nx-content :where(input[type="file"]) { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-content :where(input[type="file"])::file-selector-button { margin-right: 10px; padding: 6px 10px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-btn); background: var(--nx-surface-2); color: var(--nx-text); font: inherit; font-weight: 650; cursor: pointer; } .nx-content :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea):focus { outline: 0; border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-focus); } .nx-content select:not([multiple]):not([size]) { -webkit-appearance: none; appearance: none; padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-position: right 10px center; background-repeat: no-repeat; background-size: 12px; } html[data-nx-theme="dark"] .nx-content select:not([multiple]):not([size]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238993a0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .nx-content :where(table) { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .nx-content :where(th) { padding: 10px var(--nx-row-x); border-bottom: 1px solid var(--nx-border); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; } .nx-content :where(td) { padding: var(--nx-row-y) var(--nx-row-x); border-bottom: 1px solid var(--nx-border); font-size: var(--nx-text-sm); vertical-align: middle; } .nx-content :where(tbody tr:last-child > td) { border-bottom: 0; } .nx-content :where(td > small) { display: block; margin-top: 2px; color: var(--nx-muted); font-size: var(--nx-text-xs); } html[data-nx-striped="true"] .nx-content tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--nx-text) 2.5%, transparent); } html[data-nx-admin] .nx-content tbody tr:hover > td { background: var(--nx-hover); } .nx-content :is(div.admin-table, .admin-table-wrap) { max-width: 100%; overflow-x: auto; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); } .nx-content table.admin-table { border: 0; } /* Page headers: every console gets the same compact title block. */ .nx-content :is(.admin-page-hero, .admin-page-head, .admin-catalog__hero) { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 18px; margin: 0 0 18px; padding: 0; } .nx-content .admin-page-hero.compact { align-items: center; } .nx-content .hero { display: grid; max-width: none; margin: 0 0 18px; padding: 0; } .nx-content :is(.admin-page-hero, .admin-page-head, .admin-catalog__hero, .hero) h1 { max-width: none; margin: 6px 0; font-size: clamp(22px, 2.2vw, 30px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; } .nx-content :is(.admin-page-hero, .admin-page-head, .admin-catalog__hero) p, .nx-content .hero > p { max-width: 780px; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-md); line-height: 1.6; } .nx-content .eyebrow, .nx-content .admin-page-head > div > span:first-child { display: inline-block; color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .nx-content .hero__actions { gap: 8px; margin-top: 12px; } .nx-content .admin-page-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; } .nx-content .admin-page-actions label { display: grid; gap: 4px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-content .admin-catalog { padding-bottom: 0; } .nx-content .admin-catalog__top { justify-content: flex-end; min-height: 0; margin: 0 0 12px; padding: 0; border: 0; } .nx-content .admin-catalog__top > .brand { display: none; } .nx-content .admin-catalog__links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--nx-border); border-radius: calc(var(--nx-radius-control) + 3px); background: var(--nx-surface-2); } .nx-content .admin-catalog__links :is(a, button) { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 11px; border: 0; border-radius: var(--nx-radius-control); background: transparent; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; text-decoration: none; transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-content .admin-catalog__links :is(a, button):hover { color: var(--nx-text); } .nx-content .admin-catalog__links :is(a, button).is-active { background: var(--nx-surface); color: var(--nx-text); box-shadow: 0 0 0 1px var(--nx-border), var(--nx-shadow-sm); } /* Cards */ .nx-content .section, .nx-content :is(.admin-card, .admin-panel) { min-width: 0; margin: 0 0 var(--nx-section-gap); padding: var(--nx-card-y) var(--nx-card-x); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); } .nx-content .section__heading { align-items: flex-end; gap: 14px; margin-bottom: 14px; } .nx-content .section h2, .nx-content .admin-card > h2 { margin: 4px 0 0; font-size: var(--nx-text-lg); font-weight: 800; letter-spacing: -.015em; } .nx-content .admin-card > h2 { margin: 0 0 12px; } .nx-content .muted { color: var(--nx-muted); font-size: var(--nx-text-sm); } .nx-content .admin-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin: 0 0 14px; } .nx-content .admin-panel__head h2 { margin: 0; font-size: var(--nx-text-lg); font-weight: 800; letter-spacing: -.01em; } .nx-content .admin-panel__head small { display: block; margin-top: 3px; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-content .admin-panel__head a { color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 750; text-decoration: none; } .nx-content .admin-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--nx-section-gap); align-items: start; margin-bottom: var(--nx-section-gap); } .nx-content .admin-dashboard-grid > * { margin-bottom: 0; } .nx-content :is(.order-table, .admin-order-table, .payment-admin-table) { border-radius: var(--nx-radius-lg); box-shadow: var(--nx-shadow-sm); } /* KPI + stat tiles (admin-kpi: span/strong/small · admin-stat-card: small/strong/span · admin-stat: span/strong/small) */ .nx-content :is(.admin-kpi-grid, .admin-stat-grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--nx-section-gap); margin: 0 0 var(--nx-section-gap); } .nx-content :is(.admin-kpi, .admin-stat-card, .admin-stat, .license-diagnostics article) { position: relative; display: grid; align-content: start; gap: 5px; min-width: 0; padding: 15px 16px 14px 18px; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); } .nx-content :is(.admin-kpi, .admin-stat-card, .admin-stat, .license-diagnostics article)::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--kpi-tone, var(--nx-accent)); } .nx-content :is(.admin-kpi, .admin-stat-card, .admin-stat, .license-diagnostics article):nth-child(4n+2) { --kpi-tone: var(--nx-success); } .nx-content :is(.admin-kpi, .admin-stat-card, .admin-stat, .license-diagnostics article):nth-child(4n+3) { --kpi-tone: var(--nx-warning); } .nx-content :is(.admin-kpi, .admin-stat-card, .admin-stat, .license-diagnostics article):nth-child(4n+4) { --kpi-tone: var(--nx-info); } .nx-content :is(.admin-kpi > span, .admin-stat-card > small, .admin-stat > span, .license-diagnostics article > small) { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .075em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .nx-content :is(.admin-kpi, .admin-stat-card, .admin-stat, .license-diagnostics article) > strong { margin: 2px 0 0; overflow: hidden; font-size: calc(var(--nx-fs) * 1.85); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-content :is(.admin-kpi > small, .admin-stat-card > span, .admin-stat > small, .license-diagnostics article > span) { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.45; text-overflow: ellipsis; } .nx-content .license-diagnostics { gap: var(--nx-section-gap); } .nx-content .catalog-stat { min-width: 120px; padding: 12px 16px; border-color: var(--nx-border); border-radius: var(--nx-radius-lg); background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); } .nx-content .catalog-stat strong { font-size: calc(var(--nx-fs) * 1.85); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .nx-content .catalog-stat span { font-size: var(--nx-text-2xs); } /* Tabs + filters */ .nx-content .admin-tabs { display: flex; flex-wrap: wrap; gap: 2px; width: fit-content; max-width: 100%; margin: 0 0 var(--nx-section-gap); padding: 3px; border: 1px solid var(--nx-border); border-radius: calc(var(--nx-radius-control) + 3px); background: var(--nx-surface-2); } .nx-content .admin-tabs button { min-height: 30px; padding: 0 13px; border: 0; border-radius: var(--nx-radius-control); background: transparent; color: var(--nx-muted); font-size: var(--nx-text-sm); font-weight: 700; transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-content .admin-tabs button:hover { color: var(--nx-text); } .nx-content .admin-tabs button.is-active { background: var(--nx-surface); color: var(--nx-text); box-shadow: 0 0 0 1px var(--nx-border), var(--nx-shadow-sm); } .nx-content .catalog-filters { gap: 6px; margin-bottom: var(--nx-section-gap); } .nx-content .catalog-filters a { padding: 6px 12px; border-color: var(--nx-border); background: var(--nx-surface); color: var(--nx-muted); font-size: var(--nx-text-xs); transition: border-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-content .catalog-filters a:hover { border-color: var(--nx-border-strong); color: var(--nx-text); } .nx-content .catalog-filters a.is-active { border-color: transparent; background: var(--nx-accent); color: var(--nx-on-accent); } /* Forms */ .nx-content .admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 12px 14px; } .nx-content .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end; gap: 12px 14px; margin-bottom: 12px; } .nx-content .admin-form-span-2 { grid-column: 1 / -1; } .nx-content :is(.admin-form-grid, .form-grid) > label, .nx-content label.admin-field { display: grid; gap: var(--nx-field-gap); min-width: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-content :is(.admin-form-grid, .form-grid) > label > :is(input:not([type="checkbox"], [type="radio"]), select, textarea), .nx-content label.admin-field > :is(input:not([type="checkbox"], [type="radio"]), select, textarea) { width: 100%; } .nx-content :is(.admin-form-grid, .form-grid) > label:has(> input[type="checkbox"]), .nx-content label.admin-field:has(> input[type="checkbox"]) { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: var(--nx-h-sm); padding: 0 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-control); background: var(--nx-surface-2); color: var(--nx-text); } .nx-content .admin-inline-message { padding: 9px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface-2); color: var(--nx-text); font-size: var(--nx-text-sm); } .nx-content .command-empty { padding: 38px 20px; color: var(--nx-muted); text-align: center; } .nx-content .command-empty small { display: block; margin-top: 4px; color: var(--nx-subtle); } /* Audit log */ .nx-content .audit-filter { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 9px; } .nx-content .audit-filter input { width: 100%; } .nx-content .audit-table-panel { margin-top: var(--nx-section-gap); overflow: hidden; padding: 0; } .nx-content .audit-table { display: grid; } .nx-content .audit-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 160px; align-items: center; gap: 12px; padding: 10px var(--nx-row-x); font-size: var(--nx-text-sm); } .nx-content .audit-row--head { background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-content .audit-row-wrap { border-top: 1px solid var(--nx-border); } .nx-content .audit-row-wrap summary { cursor: pointer; list-style: none; transition: background var(--nx-dur) var(--nx-ease); } .nx-content .audit-row-wrap summary::-webkit-details-marker { display: none; } .nx-content .audit-row-wrap summary:hover { background: var(--nx-hover); } .nx-content .audit-row-wrap[open] summary { background: var(--nx-accent-soft); } .nx-content .audit-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-content .audit-row strong, .nx-content .audit-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-content .audit-row small { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-content .audit-row-wrap pre { max-height: 300px; margin: 0 var(--nx-row-x) 12px; padding: 12px; overflow: auto; border-radius: var(--nx-radius-sm); background: var(--nx-code-bg); color: var(--nx-code-text); font-size: var(--nx-text-xs); line-height: 1.6; } /* System health, diagnostics, signals */ .nx-content .health-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--nx-section-gap); margin-bottom: var(--nx-section-gap); } .nx-content :is(.health-ok, .signal-ok) { color: var(--nx-success-ink); } .nx-content :is(.health-error, .health-warning, .signal-warn) { color: var(--nx-warning-ink); } .nx-content .diagnostic-list { margin: 0; } .nx-content .diagnostic-list > div { display: flex; justify-content: space-between; gap: 20px; padding: 9px 0; border-top: 1px solid var(--nx-border); font-size: var(--nx-text-sm); } .nx-content .diagnostic-list > div:first-child { border-top: 0; } .nx-content .diagnostic-list dt { color: var(--nx-muted); } .nx-content .diagnostic-list dd { margin: 0; overflow-wrap: anywhere; font-weight: 750; text-align: right; } /* Users & roles */ .nx-content .users-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: var(--nx-section-gap); align-items: start; } .nx-content .users-grid > * { margin-bottom: 0; } .nx-content .user-list > article { display: grid; grid-template-columns: 34px minmax(130px, .8fr) minmax(260px, 1.2fr); align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--nx-border); } .nx-content .user-list > article:first-child { border-top: 0; } .nx-content .user-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 850; } .nx-content .user-main { min-width: 0; } .nx-content .user-main strong, .nx-content .user-main small, .nx-content .user-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-content .user-main strong { font-size: var(--nx-text-sm); } .nx-content .user-main small, .nx-content .user-main span { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-content .role-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } .nx-content .role-chips button { padding: 4px 8px; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 750; transition: border-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-content .role-chips button:hover:not(:disabled) { border-color: var(--nx-border-strong); color: var(--nx-text); } .nx-content .role-chips button.is-on { border-color: color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-content .role-chips button:disabled { opacity: .55; cursor: not-allowed; } .nx-content .role-matrix details { padding: 9px 0; border-top: 1px solid var(--nx-border); } .nx-content .role-matrix details:first-of-type { border-top: 0; } .nx-content .role-matrix summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; font-size: var(--nx-text-sm); } .nx-content .role-matrix summary span { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-content .role-matrix details > div { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; } .nx-content .role-matrix code { padding: 2px 6px; border-radius: 5px; background: var(--nx-surface-3); color: var(--nx-muted); font-size: var(--nx-text-2xs); } /* Hard-coded colours from globals.css, re-expressed with tokens so dark mode and presets stay legible. */ .nx-content .form-message { border-color: color-mix(in srgb, var(--nx-info) 28%, transparent); border-radius: var(--nx-radius-sm); background: var(--nx-info-soft); color: var(--nx-info-ink); font-size: var(--nx-text-sm); } .nx-content .commerce-alert { border-color: color-mix(in srgb, var(--nx-warning) 34%, transparent); border-radius: var(--nx-radius-md); background: var(--nx-warning-soft); color: var(--nx-warning-ink); font-size: var(--nx-text-sm); } .nx-content :is(.danger, .commerce-error, .commerce-item__actions button, .coupon-applied button, .license-row-actions button.danger) { color: var(--nx-danger-ink); } .nx-content :is(.status-cancelled, .status-refunded, .status-expired) { background: var(--nx-surface-3); color: var(--nx-muted); } .nx-content :is(.payment-state--failed, .payment-state--cancelled, .payment-state--expired, .license-status--revoked, .license-status--error, .license-status--expired) { background: var(--nx-danger-soft); color: var(--nx-danger-ink); } .nx-content .license-warning { background: var(--nx-danger-soft); color: var(--nx-danger-ink); } .nx-content .cms-status--scheduled { background: var(--nx-warning-soft); color: var(--nx-warning-ink); } .nx-content .cms-template-row button.is-active { color: var(--nx-on-accent); } .nx-content :is(.release-file-table code, .release-files code) { color: var(--nx-muted); } .nx-content .slot-grid button:hover:not(:disabled) { box-shadow: 0 0 0 3px var(--nx-focus); } .nx-content .version { color: var(--nx-muted); font-family: var(--nx-mono); } .nx-content :is(.status-badge, .product-status, .order-status) { letter-spacing: .02em; } /* Striped div-based tables */ html[data-nx-striped="true"] .nx-content :is(.license-ledger article, .audit-row-wrap, .coaching-admin-bookings article, .download-event-table article, .entitlement-list article, .release-file-table article, .user-list > article, .admin-product-row, .admin-order-table article, .payment-admin-table article):nth-child(even) { background: color-mix(in srgb, var(--nx-text) 2.5%, transparent); } /* ── 13. Product studio ──────────────────────────────────────────────────────────────────── */ /* Form primitives (product-ui): field, input, input group, switch rows, thumb, confirm dialog */ .nx-field { display: grid; gap: var(--nx-field-gap); min-width: 0; } .nx-field__label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; } .nx-field__label > label { color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 700; } .nx-field__req { margin-left: 3px; color: var(--nx-danger-ink); } .nx-field__action { display: inline-flex; flex: none; align-items: center; gap: 4px; padding: 2px 4px; border: 0; border-radius: var(--nx-radius-xs); background: transparent; color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 750; cursor: pointer; transition: background var(--nx-dur) var(--nx-ease); } .nx-field__action:hover:not(:disabled) { background: var(--nx-accent-soft); } .nx-field__action:disabled { opacity: .5; cursor: not-allowed; } .nx-field__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; } .nx-field__hint, .nx-field__error { min-width: 0; margin: 0; font-size: var(--nx-text-xs); line-height: 1.45; } .nx-field__hint { color: var(--nx-muted); } .nx-field__error { display: flex; align-items: flex-start; gap: 5px; color: var(--nx-danger-ink); font-weight: 650; } .nx-field__error > svg { flex: none; margin-top: 1px; } .nx-field__count { flex: none; margin-left: auto; color: var(--nx-subtle); font-family: var(--nx-mono); font-size: var(--nx-text-2xs); font-variant-numeric: tabular-nums; } .nx-field__count[data-state="good"] { color: var(--nx-success-ink); } .nx-field__count[data-state="near"] { color: var(--nx-warning-ink); } .nx-field__count[data-state="over"] { color: var(--nx-danger-ink); font-weight: 800; } .nx-content .nx-input { width: 100%; min-height: var(--nx-h); padding: 0 12px; border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius-control); background-color: var(--nx-surface); color: var(--nx-text); font-size: var(--nx-text-sm); transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease), background-color var(--nx-dur) var(--nx-ease); } .nx-content .nx-input:hover:not(:disabled, :focus, [aria-invalid="true"]) { border-color: color-mix(in srgb, var(--nx-border-strong) 70%, var(--nx-text)); } .nx-content .nx-input:disabled { background-color: var(--nx-surface-2); color: var(--nx-muted); cursor: not-allowed; } .nx-content .nx-input[aria-invalid="true"] { border-color: var(--nx-danger); } .nx-content .nx-input[aria-invalid="true"]:focus { border-color: var(--nx-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-danger) 22%, transparent); } .nx-content .nx-input--lg { min-height: var(--nx-h-lg); font-size: var(--nx-text-md); font-weight: 650; } .nx-content .nx-input--mono { font-family: var(--nx-mono); font-size: calc(var(--nx-text-sm) * .95); } .nx-content .nx-input--money { font-weight: 700; font-variant-numeric: tabular-nums; } .nx-content .nx-textarea { min-height: 96px; padding: 10px 12px; border-radius: var(--nx-radius-md); line-height: 1.6; resize: vertical; } .nx-input-group { display: flex; align-items: stretch; width: 100%; min-width: 0; min-height: var(--nx-h); overflow: hidden; border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius-control); background: var(--nx-surface); transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-input-group:hover:not(:focus-within, [data-invalid], [data-disabled], :has([aria-invalid="true"])) { border-color: color-mix(in srgb, var(--nx-border-strong) 70%, var(--nx-text)); } .nx-input-group:focus-within { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-focus); } .nx-input-group:is([data-invalid], :has([aria-invalid="true"])) { border-color: var(--nx-danger); } .nx-input-group:is([data-invalid], :has([aria-invalid="true"])):focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-danger) 22%, transparent); } .nx-input-group[data-disabled] { background: var(--nx-surface-2); } .nx-content .nx-input-group .nx-input { flex: 1; min-width: 0; min-height: 0; border: 0; border-radius: 0; background-color: transparent; } .nx-content .nx-input-group .nx-input:focus { box-shadow: none; } .nx-input-group__addon { display: inline-flex; flex: none; align-items: center; padding: 0 11px; border-left: 1px solid var(--nx-border); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; white-space: nowrap; } .nx-input-group__addon.is-prefix { border-right: 1px solid var(--nx-border); border-left: 0; font-family: var(--nx-mono); font-weight: 600; } .nx-switch-row { align-items: flex-start; justify-content: flex-start; gap: 12px; background: var(--nx-surface); transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-switch-row:has(input:checked) { border-color: color-mix(in srgb, var(--nx-accent) 38%, var(--nx-border)); background: color-mix(in srgb, var(--nx-accent) 4%, var(--nx-surface)); } .nx-switch-row__icon { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: var(--nx-radius-sm); background: var(--nx-surface-3); color: var(--nx-muted); transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-switch-row:has(input:checked) .nx-switch-row__icon { background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-switch-row__copy { flex: 1; min-width: 0; } .nx-switch-row .nx-switch { margin-top: 1px; } .nx-switch-row.is-disabled { opacity: .6; cursor: not-allowed; } .nx-switch input:disabled { cursor: not-allowed; } .nx-inline-switch { display: inline-flex; align-items: center; gap: 8px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; white-space: nowrap; cursor: pointer; } .nx-inline-switch:has(input:checked) { color: var(--nx-text); } .nx-inline-switch.is-disabled { opacity: .55; cursor: not-allowed; } .nx-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .nx-seg button:disabled { opacity: .55; cursor: not-allowed; } .nx-status-badge i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .nx-thumb { position: relative; display: inline-grid; flex: none; place-items: center; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface-3); color: var(--nx-subtle); } .nx-thumb__img { object-fit: cover; } .nx-dialog__panel.nx-confirm { width: min(440px, 100%); } .nx-confirm__body { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 18px; } .nx-confirm__icon { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--tone, var(--nx-accent)) 12%, transparent); color: var(--tone-ink, var(--nx-accent-ink)); } .nx-confirm__copy { flex: 1; min-width: 0; padding-top: 2px; } .nx-confirm__copy h2 { margin: 0; font-size: var(--nx-text-lg); font-weight: 800; line-height: 1.35; } .nx-confirm__text { margin-top: 6px; color: var(--nx-muted); font-size: var(--nx-text-sm); line-height: 1.6; } .nx-confirm__text p { margin: 0; } .nx-confirm__text p + p { margin-top: 8px; } .nx-confirm__text strong { color: var(--nx-text); } .nx-confirm__copy > :not(h2, .nx-confirm__text) { margin-top: 12px; } .nx-ps-studio :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--nx-accent); } .nx-ps-danger { color: var(--nx-danger-ink); } :is(.nx-icon-btn, .nx-btn).nx-ps-danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--nx-danger) 35%, transparent); background: var(--nx-danger-soft); color: var(--nx-danger-ink); } .nx-icon-btn.nx-ps-star[aria-pressed="true"] { border-color: color-mix(in srgb, var(--nx-warning) 30%, transparent); background: var(--nx-warning-soft); color: var(--nx-warning-ink); } .nx-icon-btn.nx-ps-star[aria-pressed="true"] svg { fill: currentColor; } /* Product list: header, stat tiles, tabs, filters, bulk bar, table, pager */ .nx-ps-list { display: grid; gap: var(--nx-section-gap); } .nx-ps-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 18px; } .nx-ps-head__copy { display: grid; flex: 1 1 320px; gap: 6px; min-width: 0; } .nx-ps-head__copy h1 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; } .nx-ps-head__copy p { max-width: 640px; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-sm); line-height: 1.55; } .nx-ps-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nx-ps-kbd { margin-left: 2px; padding: 1px 5px; border: 1px solid color-mix(in srgb, var(--nx-on-accent) 35%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--nx-on-accent) 16%, transparent); font: 800 10px/1.3 var(--nx-mono); } .nx-ps-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } .nx-ps-stat { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 13px 14px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); color: var(--nx-text); text-align: left; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-ps-stat:hover:not(:disabled) { border-color: color-mix(in srgb, var(--tone) 35%, var(--nx-border)); box-shadow: var(--nx-shadow); } .nx-ps-stat[aria-pressed="true"] { border-color: color-mix(in srgb, var(--tone) 50%, var(--nx-border)); background: color-mix(in srgb, var(--tone) 6%, var(--nx-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--tone) 50%, transparent), var(--nx-shadow-sm); } .nx-ps-stat:disabled { cursor: progress; } .nx-ps-stat__icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone-ink); } .nx-ps-stat__copy { display: grid; gap: 1px; min-width: 0; } .nx-ps-stat__copy small { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .nx-ps-stat__copy strong { font-size: var(--nx-text-xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; } .nx-ps-stat__copy em { overflow: hidden; color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .nx-ps-stat__skeleton { display: block; width: 44px; height: 22px; margin: 2px 0; } .nx-ps-table-card { overflow: clip; } .nx-ps-toolbar { display: grid; gap: 12px; padding: 0 var(--nx-card-x) 12px; border-bottom: 1px solid var(--nx-border); } .nx-ps-tabs { display: flex; gap: 4px; margin: 0 calc(var(--nx-card-x) * -1); padding: 0 calc(var(--nx-card-x) - 10px); overflow-x: auto; box-shadow: inset 0 -1px 0 var(--nx-border); scrollbar-width: none; } .nx-ps-tabs::-webkit-scrollbar { display: none; } .nx-ps-tab { position: relative; display: inline-flex; flex: none; align-items: center; gap: 7px; height: 46px; padding: 0 10px; border: 0; background: transparent; color: var(--nx-muted); font-size: var(--nx-text-sm); font-weight: 700; white-space: nowrap; cursor: pointer; transition: color var(--nx-dur) var(--nx-ease); } .nx-ps-tab:hover, .nx-ps-tab[aria-selected="true"] { color: var(--nx-text); } .nx-ps-tab[aria-selected="true"]::after { content: ""; position: absolute; right: 10px; bottom: 0; left: 10px; height: 2px; border-radius: 2px 2px 0 0; background: var(--nx-accent); } .nx-root .nx-ps-tab:focus-visible { outline-offset: -3px; } .nx-ps-tab__count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; } .nx-ps-tab[aria-selected="true"] .nx-ps-tab__count { background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-ps-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nx-ps-search { position: relative; display: flex; flex: 1 1 260px; align-items: center; min-width: 200px; max-width: 420px; } .nx-ps-search > svg { position: absolute; left: 11px; color: var(--nx-subtle); pointer-events: none; } .nx-content .nx-ps-search input { width: 100%; min-height: var(--nx-h-sm); padding: 0 12px 0 34px; background-color: var(--nx-surface-2); -webkit-appearance: none; appearance: none; } .nx-content .nx-ps-search:has(.nx-ps-search__clear) input { padding-right: 36px; } .nx-content .nx-ps-search input:focus { background-color: var(--nx-surface); } .nx-ps-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .nx-ps-search__clear { position: absolute; right: 5px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: var(--nx-radius-xs); background: transparent; color: var(--nx-subtle); cursor: pointer; } .nx-ps-search__clear:hover { background: var(--nx-hover); color: var(--nx-text); } .nx-content .nx-ps-select select { min-height: var(--nx-h-sm); max-width: 220px; font-weight: 650; } .nx-ps-sort-select { margin-left: auto; } .nx-ps-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--nx-h-sm); padding: 0 12px; border: 1px dashed var(--nx-border-strong); border-radius: 999px; background: transparent; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; white-space: nowrap; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-ps-chip:hover { border-style: solid; color: var(--nx-text); } .nx-ps-chip[aria-pressed="true"] { border-style: solid; border-color: color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-ps-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px var(--nx-card-x); border-bottom: 1px solid var(--nx-border); background: color-mix(in srgb, var(--nx-accent) 7%, var(--nx-surface)); animation: nx-fade-in var(--nx-dur) var(--nx-ease); } .nx-ps-bulk > strong { font-size: var(--nx-text-sm); font-weight: 750; } .nx-ps-bulk__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; } .nx-ps-link { padding: 0; border: 0; background: transparent; color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .nx-ps-table-wrap { position: relative; overflow-x: auto; } .nx-ps-table { min-width: 760px; } .nx-content .nx-ps-table .nx-ps-col-check { width: 44px; padding-right: 0; } .nx-ps-tick { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px 0; border-radius: var(--nx-radius-xs); vertical-align: middle; cursor: pointer; transition: background var(--nx-dur) var(--nx-ease); } .nx-ps-tick:hover { background: color-mix(in srgb, var(--nx-accent) 12%, transparent); } .nx-content .nx-ps-tick input { width: 16px; height: 16px; margin: 0; cursor: pointer; } .nx-ps-sort { display: inline-flex; align-items: center; gap: 5px; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: var(--nx-radius-xs); background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-ps-sort:hover { background: var(--nx-hover); color: var(--nx-text); } .nx-ps-sort svg { opacity: .35; transition: opacity var(--nx-dur) var(--nx-ease); } .nx-ps-sort:hover svg { opacity: .7; } .nx-ps-sort[data-active] { color: var(--nx-text); } .nx-ps-sort[data-active] svg { opacity: 1; } .nx-content .nx-ps-table .nx-ps-col-price { text-align: right; } .nx-content .nx-ps-table td.nx-ps-col-type { white-space: nowrap; } .nx-content .nx-ps-table td.nx-ps-col-time { width: 1%; color: var(--nx-muted); font-size: var(--nx-text-xs); white-space: nowrap; } .nx-content .nx-ps-table .nx-ps-col-actions { width: 1%; text-align: right; white-space: nowrap; } .nx-ps-row { cursor: pointer; } .nx-ps-row:is([data-trash], .is-skeleton) { cursor: default; } html[data-nx-admin] .nx-content .nx-ps-table tbody tr.is-skeleton:hover > td { background: transparent; } html[data-nx-admin] .nx-content .nx-ps-table tbody .nx-ps-row[data-selected] > td { background: color-mix(in srgb, var(--nx-accent) 7%, var(--nx-surface)); } html[data-nx-admin] .nx-content .nx-ps-table tbody .nx-ps-row[data-selected]:hover > td { background: color-mix(in srgb, var(--nx-accent) 11%, var(--nx-surface)); } html[data-nx-admin] .nx-content .nx-ps-table tbody .nx-ps-row[data-selected] > td:first-child { box-shadow: inset 3px 0 0 var(--nx-accent); } .nx-ps-row[data-trash] .nx-thumb { opacity: .7; filter: grayscale(1); } .nx-ps-product { display: flex; align-items: center; gap: 12px; min-width: 240px; } .nx-ps-product__copy { display: grid; gap: 3px; min-width: 0; } .nx-ps-row.is-skeleton .nx-ps-product__copy { flex: 1; } .nx-ps-name { display: -webkit-box; overflow: hidden; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 750; line-height: 1.35; text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } a.nx-ps-name:hover { color: var(--nx-accent-ink); } .nx-ps-row[data-trash] .nx-ps-name { color: var(--nx-muted); } .nx-ps-product .nx-ps-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-ps-product .nx-ps-meta code { max-width: 180px; overflow: hidden; padding: 1px 5px; border-radius: 5px; background: var(--nx-surface-3); font-size: var(--nx-text-2xs); text-overflow: ellipsis; white-space: nowrap; } .nx-ps-gap { display: inline-flex; align-items: center; gap: 4px; color: var(--nx-warning-ink); font-weight: 700; } .nx-ps-skel-thumb { flex: none; width: 44px; height: 44px; border-radius: var(--nx-radius-sm); } .nx-ps-skel-line { display: block; width: 70%; min-width: 48px; height: 10px; border-radius: 999px; } .nx-ps-skel-line.is-short { width: 40%; } .nx-ps-col-price .nx-ps-skel-line { margin-left: auto; } .nx-ps-skel-pill { display: inline-block; width: 72px; height: 20px; border-radius: 999px; vertical-align: middle; } .nx-ps-type { display: inline-flex; align-items: center; gap: 6px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; white-space: nowrap; } .nx-ps-price { display: block; text-align: right; } .nx-ps-price strong { font-size: var(--nx-text-sm); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-ps-price__suffix { margin-left: 3px; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-ps-price small { display: block; margin-top: 2px; color: var(--nx-muted); font-size: var(--nx-text-2xs); white-space: nowrap; } .nx-ps-price s { color: var(--nx-subtle); } .nx-ps-price b { margin-left: 5px; color: var(--nx-danger-ink); font-weight: 800; } .nx-ps-price .nx-ps-price__off { color: var(--nx-warning-ink); } .nx-ps-price[data-inactive] strong { color: var(--nx-muted); } .nx-ps-muted { color: var(--nx-subtle); font-size: var(--nx-text-xs); font-style: italic; } .nx-ps-status { display: grid; justify-items: start; gap: 4px; } .nx-ps-status small { display: inline-flex; align-items: center; gap: 4px; color: var(--nx-muted); font-size: var(--nx-text-2xs); white-space: nowrap; } .nx-ps-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 2px; } @media (hover: hover) and (pointer: fine) { .nx-ps-row:not([data-trash]) .nx-ps-row-actions > * { opacity: var(--ps-reveal, 0); transition: opacity var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-ps-row:not([data-trash]) .nx-ps-row-actions > :disabled { opacity: calc(var(--ps-reveal, 0) * .45); } .nx-ps-row:is(:hover, :focus-within, [data-selected]) .nx-ps-row-actions, .nx-ps-row-actions > .nx-ps-star[aria-pressed="true"] { --ps-reveal: 1; } } .nx-ps-empty { padding: 48px 16px; } .nx-ps-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px var(--nx-card-x); border-top: 1px solid var(--nx-border); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-ps-foot strong { color: var(--nx-text); } .nx-ps-foot__pager { display: flex; align-items: center; gap: 6px; } .nx-ps-foot__page { min-width: 72px; color: var(--nx-text); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .nx-ps-size { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; } .nx-content .nx-ps-size select { min-height: 30px; font-size: var(--nx-text-xs); } /* Product editor: sticky action bar, section chips, notes, two-column layout */ .nx-ps-editor { display: grid; gap: var(--nx-section-gap); } .nx-ps-bar { --ps-gutter: calc(24px * var(--nx-density)); --ps-top: calc(22px * var(--nx-density)); position: sticky; top: var(--nx-topbar-h); z-index: 20; display: grid; gap: 10px; margin: calc(var(--ps-top) * -1) calc(var(--ps-gutter) * -1) 0; padding: 12px var(--ps-gutter) 10px; border-bottom: 1px solid var(--nx-border); background: color-mix(in srgb, var(--nx-bg) 88%, transparent); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); } .nx-ps-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; } .nx-ps-bar__back { flex: none; margin-left: -8px; } .nx-ps-bar__title { display: grid; flex: 1 1 180px; gap: 3px; min-width: 0; } .nx-ps-bar__title h1 { margin: 0; overflow: hidden; font-size: var(--nx-text-xl); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .nx-ps-bar__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .nx-ps-bar__actions { display: flex; flex: none; align-items: center; gap: 6px; margin-left: auto; } .nx-ps-bar__save { min-width: 116px; } .nx-ps-bar__save .nx-kbd { margin-left: 2px; border-color: color-mix(in srgb, var(--nx-on-accent) 35%, transparent); background: color-mix(in srgb, var(--nx-on-accent) 16%, transparent); color: inherit; } .nx-ps-sections { display: flex; align-items: center; gap: 6px; margin: -4px calc(var(--ps-gutter) * -1); padding: 4px var(--ps-gutter); overflow-x: auto; scrollbar-width: none; } .nx-ps-sections::-webkit-scrollbar { display: none; } .nx-ps-sections__chip { display: inline-flex; flex: none; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface); color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; white-space: nowrap; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-ps-sections__chip:hover { border-color: var(--nx-border-strong); color: var(--nx-text); } .nx-ps-sections__chip[aria-current="true"] { border-color: color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-ps-sections__chip[data-invalid] { border-color: color-mix(in srgb, var(--nx-danger) 40%, var(--nx-border)); color: var(--nx-danger-ink); } .nx-ps-sections__count { display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: var(--nx-danger); color: #ffffff; font-size: 10px; font-weight: 800; } .nx-ps-sections__total { display: inline-flex; flex: none; align-items: center; gap: 5px; margin-left: auto; padding-left: 8px; color: var(--nx-danger-ink); font-size: var(--nx-text-xs); font-weight: 750; white-space: nowrap; } .nx-ps-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--tone, var(--nx-info)) 28%, transparent); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--tone, var(--nx-info)) 8%, var(--nx-surface)); color: var(--nx-text); font-size: var(--nx-text-sm); line-height: 1.5; } .nx-ps-note > svg { flex: none; margin-top: 2px; color: var(--tone-ink, var(--nx-info-ink)); } .nx-ps-note > :not(svg, .nx-ps-note__actions) { flex: 1; min-width: 0; } .nx-ps-note strong { display: block; font-weight: 750; } .nx-ps-note p { margin: 2px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-ps-note code { padding: 1px 5px; border-radius: 5px; background: var(--nx-surface-3); } .nx-ps-note__actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; } .nx-ps-note__check { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--nx-text-xs); font-weight: 650; cursor: pointer; } .nx-ps-banner { align-items: center; } .nx-ps-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: var(--nx-section-gap); } .nx-ps-main, .nx-ps-aside { display: grid; gap: var(--nx-section-gap); min-width: 0; } .nx-ps-section { scroll-margin-top: calc(var(--nx-topbar-h) + 124px); } .nx-ps-section__head { display: flex; align-items: flex-start; gap: 12px; padding: var(--nx-card-y) var(--nx-card-x) 0; } .nx-ps-section__icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-ps-section__title { flex: 1; min-width: 0; } .nx-ps-section__title h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--nx-text-md); font-weight: 800; line-height: 1.3; } .nx-ps-section__title p { margin: 3px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-ps-section__issues { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--nx-danger-soft); color: var(--nx-danger-ink); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: 0; } .nx-ps-section__action { display: flex; flex: none; align-items: center; gap: 8px; margin-left: auto; } .nx-ps-section__body { display: grid; gap: 14px; padding: 14px var(--nx-card-x) var(--nx-card-y); } .nx-ps-section__meta { color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; white-space: nowrap; } .nx-ps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px 16px; } .nx-ps-span { grid-column: 1 / -1; } /* Basics: product type picker */ .nx-ps-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .nx-ps-fieldset > legend { margin-bottom: var(--nx-field-gap); padding: 0; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 700; } .nx-ps-fieldset > :is(.nx-field__error, .nx-field__hint) { margin-top: 8px; } .nx-ps-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(200px, calc((100% - 24px) / 4)), 1fr)); gap: 8px; } .nx-ps-type-card { position: relative; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 11px 34px 11px 11px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-ps-type-card:hover { border-color: var(--nx-border-strong); } .nx-ps-type-card[data-checked] { border-color: color-mix(in srgb, var(--nx-accent) 55%, var(--nx-border)); background: color-mix(in srgb, var(--nx-accent) 5%, var(--nx-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--nx-accent) 55%, transparent); } .nx-ps-type-card:has(input:focus-visible) { outline: 2px solid var(--nx-accent); outline-offset: 2px; } .nx-ps-type-card__icon { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--nx-surface-3); color: var(--nx-muted); transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-ps-type-card[data-checked] .nx-ps-type-card__icon { background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-ps-type-card__copy { display: grid; gap: 2px; min-width: 0; } .nx-ps-type-card__copy strong { font-size: var(--nx-text-sm); font-weight: 750; } .nx-ps-type-card__copy small { color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.4; } .nx-ps-type-card__check { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--nx-border-strong); border-radius: 50%; color: transparent; transition: background var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease); } .nx-ps-type-card[data-checked] .nx-ps-type-card__check { border-color: var(--nx-accent); background: var(--nx-accent); color: var(--nx-on-accent); } .nx-ps-fieldset:disabled .nx-ps-type-card { cursor: not-allowed; } .nx-ps-fieldset:disabled .nx-ps-type-card:not([data-checked]) { opacity: .5; } /* Description: markdown editor with live preview */ .nx-ps-md__modes { margin-left: auto; } .nx-ps-md { overflow: hidden; border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius-md); background: var(--nx-surface); transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-ps-md:focus-within { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-focus); } .nx-ps-md[data-invalid] { border-color: var(--nx-danger); } .nx-ps-md__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px 8px; border-bottom: 1px solid var(--nx-border); background: var(--nx-surface-2); } .nx-ps-md__tool { color: var(--nx-muted); } .nx-icon-btn.nx-ps-md__tool:hover { border-color: var(--nx-border); background: var(--nx-surface); color: var(--nx-text); } .nx-ps-md__template { margin-left: auto; } .nx-ps-md__panes { display: grid; min-height: 320px; } .nx-ps-md[data-mode="split"] .nx-ps-md__panes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .nx-content .nx-ps-md__input { display: block; width: 100%; min-height: 320px; padding: 14px 16px; border: 0; border-radius: 0; background-color: transparent; font-family: var(--nx-mono); font-size: calc(var(--nx-text-sm) * .95); line-height: 1.7; resize: vertical; } .nx-content .nx-ps-md .nx-ps-md__input:focus { box-shadow: none; } .nx-ps-md__preview { min-width: 0; max-height: 640px; padding: 14px 18px; overflow: auto; } .nx-ps-md[data-mode="split"] .nx-ps-md__preview { border-left: 1px solid var(--nx-border); background: var(--nx-surface-2); } .nx-ps-md[data-mode="preview"] .nx-ps-md__preview { max-height: none; } .nx-ps-md__empty { margin: 0; color: var(--nx-subtle); font-size: var(--nx-text-sm); font-style: italic; } .nx-ps-md__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 12px; border-top: 1px solid var(--nx-border); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-2xs); } .nx-ps-md__syntax { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .nx-ps-md__syntax code { padding: 1px 6px; border: 1px solid var(--nx-border); border-radius: 5px; background: var(--nx-surface-3); color: var(--nx-muted); font-size: 1em; } .nx-ps-md__stats { margin-left: auto; font-variant-numeric: tabular-nums; } .nx-ps-md__foot .nx-field__error { font-size: var(--nx-text-xs); } /* Storefront prose, re-expressed with admin tokens: portal.css is not loaded on admin routes. */ .nx-ps-prose .np-prose { max-width: none; color: var(--nx-text); font-size: var(--nx-text-md); line-height: 1.7; overflow-wrap: break-word; } .nx-ps-prose .np-prose :where(h2, h3, h4, p, ul, ol, li, blockquote, pre, hr) { margin: 0; } .nx-ps-prose .np-prose > * + *, .nx-ps-prose .np-prose blockquote > * + * { margin-top: 1em; } .nx-ps-prose .np-prose h2 { margin-top: 1.8em; font-size: 1.35em; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; } .nx-ps-prose .np-prose h3 { margin-top: 1.6em; font-size: 1.15em; font-weight: 700; line-height: 1.35; } .nx-ps-prose .np-prose h4 { margin-top: 1.4em; font-size: 1em; font-weight: 700; line-height: 1.4; } .nx-ps-prose .np-prose :where(h2, h3, h4) + * { margin-top: .6em; } .nx-ps-prose .np-prose > :first-child { margin-top: 0; } .nx-ps-prose .np-prose :is(ul, ol) { padding-left: 1.4em; } .nx-ps-prose .np-prose ul { list-style: disc; } .nx-ps-prose .np-prose ol { list-style: decimal; } .nx-ps-prose .np-prose li + li { margin-top: .35em; } .nx-ps-prose .np-prose li::marker { color: var(--nx-subtle); } .nx-ps-prose .np-prose strong { color: var(--nx-text); font-weight: 650; } .nx-ps-prose .np-prose a { color: var(--nx-accent-ink); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .nx-ps-prose .np-prose a:hover { text-decoration-thickness: 2px; } .nx-ps-prose .np-prose :not(pre) > code { padding: .12em .4em; border: 1px solid var(--nx-border); border-radius: 6px; background: var(--nx-surface-3); font-size: .86em; } .nx-ps-prose .np-prose pre { overflow-x: auto; padding: 14px 16px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-3); font-size: var(--nx-text-xs); line-height: 1.6; tab-size: 2; } .nx-ps-prose .np-prose pre code { font-size: inherit; } .nx-ps-prose .np-prose blockquote { padding: 2px 0 2px 16px; border-left: 3px solid color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); color: var(--nx-muted); } .nx-ps-prose .np-prose hr { height: 1px; margin: 2em 0; border: 0; background: var(--nx-border); } /* SEO: search result preview */ .nx-ps-serp { display: grid; gap: 4px; min-width: 0; padding: 14px 16px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-ps-serp__site { display: flex; align-items: center; gap: 10px; min-width: 0; } .nx-ps-serp__site > span:last-child { display: grid; min-width: 0; } .nx-ps-serp__site strong { font-size: var(--nx-text-xs); font-weight: 700; } .nx-ps-serp__site small { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-2xs); text-overflow: ellipsis; white-space: nowrap; } .nx-ps-serp__favicon { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nx-accent-soft); color: var(--nx-accent-ink); font-size: 12px; font-weight: 800; } .nx-ps-serp__title { margin: 4px 0 0; overflow: hidden; color: var(--nx-info-ink); font-size: calc(var(--nx-fs) * 1.38); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .nx-ps-serp__desc { display: -webkit-box; margin: 0; overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-sm); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .nx-ps-serp :is(.nx-ps-serp__title, .nx-ps-serp__desc).is-empty { color: var(--nx-subtle); font-style: italic; } /* Pricing: plan cards */ .nx-ps-plans { display: grid; gap: 12px; } .nx-ps-plans__empty { display: flex; align-items: center; gap: 10px; padding: 16px; border: 1px dashed var(--nx-border-strong); border-radius: var(--nx-radius-md); color: var(--nx-muted); font-size: var(--nx-text-sm); } .nx-ps-plans__empty > svg { flex: none; color: var(--nx-subtle); } .nx-ps-plan { border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-ps-plan[data-default] { border-color: color-mix(in srgb, var(--nx-accent) 50%, var(--nx-border)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--nx-accent) 50%, transparent); } .nx-ps-plan[data-inactive] { background: var(--nx-surface-2); } .nx-ps-plan[data-inactive] .nx-ps-plan__body { opacity: .8; } .nx-ps-plan__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px solid var(--nx-border); border-radius: calc(var(--nx-radius-md) - 1px) calc(var(--nx-radius-md) - 1px) 0 0; background: var(--nx-surface-2); } .nx-ps-plan__default { display: inline-flex; align-items: center; gap: 7px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; white-space: nowrap; cursor: pointer; } .nx-ps-plan[data-default] .nx-ps-plan__default { color: var(--nx-accent-ink); } .nx-ps-plan__name { flex: 1 1 200px; min-width: 0; } .nx-content .nx-ps-plan__name .nx-input { min-height: var(--nx-h-sm); font-weight: 700; } .nx-ps-plan__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; } .nx-ps-plan__error { padding: 8px 12px 0; } .nx-ps-plan__body { display: grid; gap: 14px; padding: 12px; } .nx-ps-plan__free { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--nx-radius-sm); background: var(--nx-success-soft); color: var(--nx-success-ink); font-size: var(--nx-text-xs); font-weight: 650; } .nx-ps-plan__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: start; gap: 12px 14px; } .nx-ps-plan__discount { display: inline-flex; align-items: center; margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--nx-danger-soft); color: var(--nx-danger-ink); font-weight: 750; } .nx-ps-plan__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 9px 12px; border-top: 1px solid var(--nx-border); border-radius: 0 0 calc(var(--nx-radius-md) - 1px) calc(var(--nx-radius-md) - 1px); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-ps-plan__summary > svg { flex: none; color: var(--nx-subtle); } .nx-ps-plan__summary strong { color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-ps-plan__summary s { color: var(--nx-subtle); } .nx-ps-every { display: flex; align-items: center; gap: 8px; } .nx-ps-every > span { color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-content .nx-ps-every input { flex: none; width: 84px; } .nx-content .nx-ps-every select { flex: 1; min-width: 0; } .nx-ps-advanced { padding-top: 10px; border-top: 1px dashed var(--nx-border); } .nx-ps-advanced > summary { display: inline-flex; align-items: center; gap: 6px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; list-style: none; cursor: pointer; } .nx-ps-advanced > summary::-webkit-details-marker { display: none; } .nx-ps-advanced > summary:hover { color: var(--nx-text); } .nx-ps-advanced > summary small { margin-left: 4px; color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 500; } .nx-ps-advanced > summary svg { transition: transform var(--nx-dur) var(--nx-ease); } .nx-ps-advanced[open] > summary { margin-bottom: 12px; } .nx-ps-advanced[open] > summary svg { transform: rotate(90deg); } .nx-ps-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .nx-ps-presets > span { margin-right: 2px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-ps-preset { border-style: dashed; border-color: var(--nx-border-strong); } .nx-ps-preset:hover { border-style: solid; } /* Media */ .nx-ps-media-panel { display: grid; gap: 12px; } .nx-ps-media-add { display: grid; gap: 6px; } .nx-ps-media-add__row { display: flex; gap: 8px; } .nx-ps-media-add__row > .nx-input-group { flex: 1; } .nx-ps-media-add__btn { flex: none; min-height: var(--nx-h); } .nx-ps-media-add__hint { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.5; } .nx-ps-media-add__notice { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; } .nx-ps-media-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .nx-ps-media { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); } .nx-ps-media[data-role="thumbnail"] { border-color: color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); background: color-mix(in srgb, var(--nx-accent) 3%, var(--nx-surface)); } .nx-ps-media__preview { position: relative; align-self: start; } .nx-ps-media__index { position: absolute; top: -6px; left: -6px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid var(--nx-surface); border-radius: 999px; background: var(--nx-text); color: var(--nx-surface); font-size: var(--nx-text-2xs); font-weight: 800; } .nx-ps-media__main { display: grid; gap: 10px; min-width: 0; } .nx-ps-media__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .nx-content .nx-ps-media__select { width: auto; min-height: 32px; font-size: var(--nx-text-xs); font-weight: 700; } .nx-ps-media__hint { flex: 1 1 140px; min-width: 0; color: var(--nx-muted); font-size: var(--nx-text-2xs); } .nx-ps-media__tools { display: flex; align-items: center; gap: 2px; margin-left: auto; } .nx-ps-media__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px 12px; } .nx-ps-media__warnings { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .nx-ps-media__warnings li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--nx-warning-ink); font-size: var(--nx-text-xs); font-weight: 650; } .nx-ps-media__warnings li[data-tone="danger"] { color: var(--nx-danger-ink); } .nx-ps-media-empty { display: grid; justify-items: center; gap: 6px; padding: 24px 16px; border: 1px dashed var(--nx-border-strong); border-radius: var(--nx-radius-md); color: var(--nx-muted); font-size: var(--nx-text-sm); text-align: center; } .nx-ps-media-empty svg { color: var(--nx-subtle); } .nx-ps-media-empty strong { color: var(--nx-text); } /* Aside: publishing, readiness, storefront card, categories, record details */ .nx-ps-publish { display: grid; gap: 12px; } .nx-ps-publish__status { display: flex; width: 100%; } .nx-ps-publish__status button { flex: 1; } .nx-ps-publish__hint { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 9px 11px; border-radius: var(--nx-radius-sm); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-ps-publish__hint[data-tone] { background: color-mix(in srgb, var(--tone) 10%, var(--nx-surface)); color: var(--tone-ink); } .nx-ps-publish__hint > svg { flex: none; margin-top: 1px; } .nx-ps-publish__cta { width: 100%; min-height: var(--nx-h); } .nx-ps-ready { display: grid; gap: 12px; } .nx-ps-ready__score { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--tone) 22%, transparent); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--tone) 8%, var(--nx-surface)); } .nx-ps-ring { position: relative; display: grid; flex: none; place-items: center; width: 56px; height: 56px; } .nx-ps-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .nx-ps-ring__track { fill: none; stroke: color-mix(in srgb, var(--tone) 18%, transparent); stroke-width: 6; } .nx-ps-ring__value { fill: none; stroke: var(--tone); stroke-linecap: round; stroke-width: 6; transition: stroke-dashoffset .6s var(--nx-ease); } .nx-ps-ring strong { position: relative; color: var(--tone-ink); font-size: var(--nx-text-sm); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-ps-ready__label { display: grid; gap: 2px; min-width: 0; } .nx-ps-ready__label strong { color: var(--tone-ink); font-size: var(--nx-text-md); font-weight: 800; } .nx-ps-ready__label small { color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.4; } .nx-ps-checks { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .nx-ps-check { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: var(--nx-radius-sm); background: transparent; color: var(--nx-text); text-align: left; cursor: pointer; transition: background var(--nx-dur) var(--nx-ease); } .nx-ps-check:hover { background: var(--nx-hover); } .nx-ps-check__mark { display: grid; flex: none; place-items: center; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--nx-border-strong); border-radius: 50%; color: transparent; } .nx-ps-check[data-done] .nx-ps-check__mark { border-color: var(--nx-success); background: var(--nx-success); color: #ffffff; } .nx-ps-check__copy { display: grid; gap: 1px; min-width: 0; } .nx-ps-check__copy strong { font-size: var(--nx-text-xs); font-weight: 700; } .nx-ps-check[data-done] .nx-ps-check__copy strong { color: var(--nx-muted); font-weight: 600; } .nx-ps-check__copy small { color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.4; } .nx-ps-card { overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); } .nx-ps-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--nx-surface-3); } .nx-ps-card__media img { object-fit: cover; } .nx-ps-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, var(--nx-surface-3), color-mix(in srgb, var(--nx-accent) 12%, var(--nx-surface-3))); color: var(--nx-subtle); } .nx-ps-card__flag { position: absolute; top: 10px; left: 10px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--nx-warning) 16%, var(--nx-surface)); box-shadow: var(--nx-shadow-sm); color: var(--nx-warning-ink); font-size: var(--nx-text-2xs); font-weight: 800; } .nx-ps-card__body { display: grid; gap: 6px; padding: 12px 14px 14px; } .nx-ps-card__type { display: inline-flex; align-items: center; gap: 5px; color: var(--nx-accent-ink); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-ps-card__title { display: -webkit-box; overflow: hidden; font-size: var(--nx-text-md); font-weight: 800; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .nx-ps-card__desc { display: -webkit-box; margin: 0; overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .nx-ps-card :is(.nx-ps-card__title, .nx-ps-card__desc).is-empty { color: var(--nx-subtle); font-style: italic; font-weight: 500; } .nx-ps-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: 4px; } .nx-ps-card__price strong { font-size: var(--nx-text-lg); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-ps-card__price s { color: var(--nx-subtle); font-size: var(--nx-text-xs); } .nx-ps-cats { display: grid; gap: 10px; } .nx-ps-cats__state { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 2px; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-ps-search.nx-ps-cats__search { flex: none; width: 100%; min-width: 0; max-width: none; } .nx-ps-cats__list { display: grid; gap: 1px; max-height: 260px; margin: 0; padding: 0; overflow: auto; overscroll-behavior: contain; list-style: none; } .nx-ps-cat { position: relative; display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--nx-radius-sm); font-size: var(--nx-text-sm); cursor: pointer; transition: background var(--nx-dur) var(--nx-ease); } .nx-ps-cat:hover { background: var(--nx-hover); } .nx-content .nx-ps-cat input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } .nx-ps-cat__box { display: grid; flex: none; place-items: center; width: 17px; height: 17px; border: 1.5px solid var(--nx-border-strong); border-radius: 5px; color: transparent; transition: background var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-ps-cat[data-checked] .nx-ps-cat__box { border-color: var(--nx-accent); background: var(--nx-accent); color: var(--nx-on-accent); } .nx-ps-cat:has(input:focus-visible) .nx-ps-cat__box { box-shadow: 0 0 0 3px var(--nx-focus); } .nx-ps-cat:has(input:disabled) { opacity: .6; cursor: not-allowed; } .nx-ps-cat__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-ps-cat small { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-variant-numeric: tabular-nums; } .nx-ps-cats__add { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; } .nx-ps-cats__add > .nx-field__error { grid-column: 1 / -1; } .nx-content .nx-ps-cats__add .nx-input { min-height: var(--nx-h-sm); } .nx-ps-cats__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; } dl.nx-ps-meta { margin: 0; } dl.nx-ps-meta > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--nx-border); } dl.nx-ps-meta > div:first-child { padding-top: 0; border-top: 0; } dl.nx-ps-meta > div:last-child { padding-bottom: 0; } dl.nx-ps-meta dt { color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; } dl.nx-ps-meta dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; margin: 0; font-size: var(--nx-text-xs); } dl.nx-ps-meta code { min-width: 0; overflow: hidden; padding: 1px 5px; border-radius: 5px; background: var(--nx-surface-3); text-overflow: ellipsis; white-space: nowrap; } dl.nx-ps-meta small { flex-basis: 100%; color: var(--nx-muted); font-size: var(--nx-text-2xs); } dl.nx-ps-meta .nx-icon-btn { width: 24px; height: 24px; } /* Category manager dialog */ .nx-dialog__panel.nx-cat { height: min(640px, calc(100dvh - 36px)); max-height: none; } .nx-dialog__panel.is-wide.nx-cat { width: min(820px, 100%); } .nx-cat__body { display: grid; flex: 1; grid-template-columns: 260px minmax(0, 1fr); min-height: 0; } .nx-cat__list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--nx-border); background: var(--nx-surface-2); } .nx-cat__tools { display: grid; gap: 8px; padding: 12px; border-bottom: 1px solid var(--nx-border); } .nx-ps-search.nx-cat__search { flex: none; min-width: 0; max-width: none; } .nx-cat__items { display: grid; flex: 1; align-content: start; gap: 2px; min-height: 0; margin: 0; padding: 8px; overflow: auto; list-style: none; } .nx-cat__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--nx-radius-sm); background: transparent; color: var(--nx-text); text-align: left; cursor: pointer; transition: background var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease); } .nx-cat__item:hover { background: var(--nx-hover); } .nx-cat__item[aria-current="true"] { border-color: color-mix(in srgb, var(--nx-accent) 40%, var(--nx-border)); background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); } .nx-cat__new { justify-content: flex-start; gap: 8px; border: 1px dashed color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); color: var(--nx-accent-ink); font-weight: 750; } .nx-cat__item-copy { display: grid; min-width: 0; } .nx-cat__item-copy strong { overflow: hidden; font-size: var(--nx-text-sm); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .nx-cat__item-copy small { overflow: hidden; color: var(--nx-muted); font-family: var(--nx-mono); font-size: var(--nx-text-2xs); text-overflow: ellipsis; white-space: nowrap; } .nx-cat__item-meta { display: flex; flex: none; align-items: center; gap: 6px; } .nx-cat__count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; } .nx-cat__loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-cat__none { margin: 0; padding: 20px 12px; color: var(--nx-muted); font-size: var(--nx-text-xs); text-align: center; } .nx-cat__form { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 16px 18px; overflow: auto; } .nx-cat__form-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .nx-cat__form-head h3 { margin: 0; font-size: var(--nx-text-md); font-weight: 800; } .nx-cat__usage { display: inline-flex; align-items: center; gap: 5px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; } .nx-cat__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: end; gap: 12px; } .nx-cat__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--nx-border); } .nx-cat__confirm { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--nx-danger-ink); font-size: var(--nx-text-xs); font-weight: 700; } .nx-cat__save { display: flex; gap: 6px; margin-left: auto; } .nx-cat__readonly { display: flex; align-items: center; gap: 8px; margin: auto 0 0; padding: 10px 12px; border-radius: var(--nx-radius-sm); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-xs); } /* Studio states: denied, missing, in trash, loading */ .nx-ps-state { display: grid; justify-items: center; gap: 8px; max-width: 560px; margin: 48px auto; padding: 32px 28px; text-align: center; } .nx-ps-state__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 4px; border-radius: 16px; background: color-mix(in srgb, var(--tone, var(--nx-accent)) 12%, transparent); color: var(--tone-ink, var(--nx-accent-ink)); } .nx-ps-state h1 { margin: 0; font-size: var(--nx-text-xl); font-weight: 800; } .nx-ps-state p { max-width: 440px; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-sm); line-height: 1.6; } .nx-ps-state code { padding: 1px 6px; border-radius: 5px; background: var(--nx-surface-3); } .nx-ps-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; } .nx-ps-state.is-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 240px; max-width: none; margin: 0; padding: 0; color: var(--nx-muted); font-size: var(--nx-text-sm); } /* ── 14. Payment settings ────────────────────────────────────────────────────────────────── */ /* Page frame, status tiles and field helpers */ .nx-pay { display: grid; gap: var(--nx-section-gap); } .nx-pay-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .nx-pay-tiles .nx-ps-stat__copy strong { font-size: var(--nx-text-md); letter-spacing: -.01em; line-height: 1.35; } .nx-ps-stat.is-static { cursor: default; } .nx-ps-stat.is-static:hover { border-color: var(--nx-border); box-shadow: var(--nx-shadow-sm); } .nx-pay .nx-field__label { flex-wrap: wrap; align-items: center; } .nx-pay-tools { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 6px; min-width: 0; margin-left: auto; } .nx-pay-dot { display: inline-block; width: 7px; height: 7px; margin: 0 0 1px 7px; border-radius: 50%; background: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); vertical-align: middle; } .nx-pay-group { display: grid; gap: 14px; padding-top: 16px; border-top: 1px dashed var(--nx-border); } .nx-pay-group h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-pay-group h3 svg { color: var(--nx-accent-ink); } .nx-pay-ttl { max-width: 360px; } .nx-pay .nx-ps-preset[aria-pressed="true"] { border-style: solid; border-color: color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-content .nx-input.nx-pay-upper { text-transform: uppercase; } .nx-content .nx-input.nx-pay-upper::placeholder { text-transform: none; } /* Write-only keys: saved-key row, edit box with its buttons, pending clear */ .nx-pay-secret { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: var(--nx-h); padding: 3px 4px 3px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-control); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-sm); } .nx-pay-secret > svg { flex: none; color: var(--nx-subtle); } .nx-pay-secret[data-state="set"] > svg { color: var(--nx-success-ink); } .nx-pay-secret.is-empty { border-style: dashed; background: var(--nx-surface); } .nx-pay-secret[data-state="clear"] { border-color: color-mix(in srgb, var(--nx-warning) 35%, var(--nx-border)); background: color-mix(in srgb, var(--nx-warning) 7%, var(--nx-surface)); color: var(--nx-text); } .nx-pay-secret[data-state="clear"] > svg { color: var(--nx-warning-ink); } .nx-pay-secret__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-pay-secret[data-state="clear"] .nx-pay-secret__value { padding: 6px 0; font-size: var(--nx-text-xs); line-height: 1.45; white-space: normal; } .nx-pay-secret code { color: var(--nx-text); font-family: var(--nx-mono); font-size: calc(var(--nx-text-sm) * .95); letter-spacing: .06em; } .nx-pay-secret[data-state="clear"] code { padding: 1px 5px; border-radius: 5px; background: var(--nx-surface-3); letter-spacing: .04em; } .nx-pay-secret__actions { display: flex; flex: none; align-items: center; gap: 6px; } .nx-pay-addon-btn { display: grid; flex: none; place-items: center; width: 36px; padding: 0; border: 0; border-left: 1px solid var(--nx-border); background: var(--nx-surface-2); color: var(--nx-muted); cursor: pointer; transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-pay-addon-btn:hover:not(:disabled) { background: var(--nx-hover); color: var(--nx-text); } .nx-pay-addon-btn[aria-pressed="true"] { color: var(--nx-accent-ink); } .nx-pay-addon-btn:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: -2px; } .nx-pay-addon-btn:disabled { opacity: .5; cursor: not-allowed; } .nx-content .nx-input.nx-pay-masked { -webkit-text-security: disc; } .nx-content .nx-input.nx-pay-masked::placeholder { -webkit-text-security: none; } .nx-pay-inline-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--tone-ink, var(--nx-muted)); font-size: var(--nx-text-xs); line-height: 1.45; } .nx-pay-inline-note > svg { flex: none; margin-top: 1px; } .nx-pay-inline-note code { padding: 0 4px; border-radius: 4px; background: var(--nx-surface-3); color: var(--nx-text); } /* Aside: transfer preview, notes */ .nx-pay-slip { display: grid; gap: 3px; padding: 14px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: linear-gradient(160deg, color-mix(in srgb, var(--nx-accent) 7%, var(--nx-surface)), var(--nx-surface) 65%); } .nx-pay-slip[data-off] { background: var(--nx-surface-2); } .nx-pay-slip[data-off] > :not(.nx-pay-slip__head) { opacity: .7; } .nx-pay-slip__head { display: flex; align-items: center; gap: 7px; min-width: 0; margin-bottom: 4px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; } .nx-pay-slip__head > svg { flex: none; color: var(--nx-accent-ink); } .nx-pay-slip__head > span:not(.nx-badge) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-pay-slip__head .nx-badge { margin-left: auto; } .nx-pay-slip__account { overflow-wrap: anywhere; font-family: var(--nx-mono); font-size: var(--nx-text-lg); font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; } .nx-pay-slip__holder { overflow-wrap: anywhere; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; } .nx-pay-slip dl { display: grid; gap: 6px; margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--nx-border); } .nx-pay-slip dl > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: baseline; gap: 8px; } .nx-pay-slip dt { color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; } .nx-pay-slip dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: var(--nx-text-xs); font-weight: 700; } .nx-pay-slip dd code { font-family: var(--nx-mono); font-size: var(--nx-text-xs); } .nx-pay-hint { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.55; } .nx-pay-hint code { padding: 0 4px; border-radius: 4px; background: var(--nx-surface-3); color: var(--nx-text); font-family: var(--nx-mono); } .nx-pay-notes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .nx-pay-notes li { display: flex; align-items: flex-start; gap: 9px; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-pay-notes svg { flex: none; margin-top: 2px; color: var(--nx-accent-ink); } /* Save confirmation: change list, warnings, password */ .nx-dialog__panel.nx-confirm:has(.nx-pay-confirm) { width: min(560px, 100%); } .nx-pay-confirm { display: grid; gap: 14px; } .nx-pay-changes { display: grid; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); list-style: none; } .nx-pay-changes li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 8px 12px; border-top: 1px solid var(--nx-border); font-size: var(--nx-text-xs); } .nx-pay-changes li:first-child { border-top: 0; } .nx-pay-changes__name { color: var(--nx-muted); font-weight: 700; } .nx-pay-diff { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; color: var(--nx-text); font-weight: 650; } .nx-pay-diff del { color: var(--nx-subtle); text-decoration-color: color-mix(in srgb, var(--nx-danger) 55%, transparent); overflow-wrap: anywhere; } .nx-pay-diff ins { color: var(--nx-success-ink); font-weight: 750; text-decoration: none; overflow-wrap: anywhere; } .nx-pay-diff em { font-style: normal; font-weight: 750; } .nx-pay-diff code { padding: 0 4px; border-radius: 4px; background: var(--nx-surface-3); font-family: var(--nx-mono); } .nx-pay-diff svg { flex: none; color: var(--nx-subtle); } .nx-pay-warnings { display: grid; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--nx-warning) 30%, transparent); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--nx-warning) 8%, var(--nx-surface)); list-style: none; } .nx-pay-warnings li { display: flex; align-items: flex-start; gap: 8px; color: var(--nx-text); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-pay-warnings svg { flex: none; margin-top: 2px; color: var(--nx-warning-ink); } /* ── 15. Workspaces ──────────────────────────────────────────────────────────────────────── */ /* Shared kit (workspace-ui): tile counts, view tabs, dialogs, meters, people, facts, user picker */ .nx-ps-stats[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nx-ps-stats[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nx-ps-stats[data-count="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } .nx-ps-stats[data-count="6"] .nx-ps-stat { padding: 12px; gap: 10px; } .nx-ws-views { display: flex; gap: 4px; width: max-content; max-width: 100%; padding: 4px; overflow-x: auto; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); scrollbar-width: none; } .nx-ws-views::-webkit-scrollbar { display: none; } .nx-ws-views .nx-ps-tab { height: 34px; padding: 0 12px; border-radius: var(--nx-radius-md); transition: color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-ws-views .nx-ps-tab:hover { background: var(--nx-hover); } .nx-ws-views .nx-ps-tab[aria-selected="true"] { background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-ws-views .nx-ps-tab[aria-selected="true"]::after { display: none; } .nx-ws-views .nx-ps-tab[aria-selected="true"] .nx-ps-tab__count { background: color-mix(in srgb, var(--nx-accent) 16%, transparent); } .nx-ws-dialog__form { display: contents; } .nx-dialog__head.nx-ws-dialog__head { justify-content: flex-start; } .nx-ws-dialog__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--tone, var(--nx-accent)) 12%, transparent); color: var(--tone-ink, var(--nx-accent-ink)); } .nx-ws-dialog__title { flex: 1; min-width: 0; padding-top: 1px; } .nx-ws-dialog__title h2 { line-height: 1.35; overflow-wrap: anywhere; } .nx-ws-dialog__head > .nx-icon-btn { flex: none; margin: -4px -6px 0 0; } .nx-dialog__body.nx-ws-dialog__body { display: grid; align-content: start; gap: 14px; } .nx-ws-dialog .nx-ps-grid { gap: 12px 14px; } .nx-ws-meter { display: inline-grid; gap: 4px; min-width: 64px; } .nx-ws-meter__text { font-size: var(--nx-text-sm); font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-ws-meter__text small { margin-left: 1px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; } .nx-ws-meter__bar { display: block; height: 4px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-3); } .nx-ws-meter__bar i { display: block; height: 100%; border-radius: inherit; background: var(--tone, var(--nx-accent)); } .nx-ws-avatar { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nx-accent-soft); color: var(--nx-accent-ink); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; } .nx-ws-avatar.is-sm { width: 26px; height: 26px; font-size: 10px; } .nx-ws-person { display: flex; align-items: center; gap: 9px; min-width: 0; } :is(.nx-ws-person__copy, .nx-ws-picked__copy, .nx-ws-picker__copy) { display: grid; gap: 1px; min-width: 0; } :is(.nx-ws-person__copy, .nx-ws-picked__copy, .nx-ws-picker__copy) strong { overflow: hidden; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } :is(.nx-ws-person__copy, .nx-ws-picked__copy, .nx-ws-picker__copy) small { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-xs); text-overflow: ellipsis; white-space: nowrap; } .nx-ws-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-border); } .nx-ws-facts > div { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 10px 12px; background: var(--nx-surface); } .nx-ws-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; } .nx-ws-facts dt { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-ws-facts dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: var(--nx-text-sm); font-weight: 650; } .nx-ws-facts dd code { font-family: var(--nx-mono); font-size: var(--nx-text-xs); } .nx-ws-picker { display: grid; gap: 6px; min-width: 0; } .nx-ps-search.nx-ws-picker__field { flex: none; width: 100%; min-width: 0; max-width: none; } .nx-content .nx-ws-picker__field input { min-height: var(--nx-h); background-color: var(--nx-surface); } .nx-ws-picker__list { display: grid; gap: 1px; max-height: 264px; margin: 0; padding: 4px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); box-shadow: var(--nx-shadow); list-style: none; } .nx-ws-picker__option { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 8px; border-radius: var(--nx-radius-sm); cursor: pointer; } .nx-ws-picker__option[aria-selected="true"] { background: var(--nx-accent-soft); } .nx-ws-picker__state { display: flex; align-items: center; gap: 8px; padding: 9px 10px; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-ws-picked { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: var(--nx-h); padding: 5px 6px 5px 8px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-control); background: var(--nx-surface-2); } .nx-ws-picked__copy { flex: 1; } .nx-ws-picked[data-disabled] { opacity: .75; } /* Table helpers: numbers, codes, secondary lines, skeletons */ .nx-ws-skel-stack { display: grid; gap: 6px; } .nx-ps-skel-line.nx-ws-skel-number { margin-left: auto; } .nx-content .nx-ps-table .nx-ws-col-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-content .nx-ps-table td.nx-ws-col-nowrap { white-space: nowrap; } .nx-ws-code { display: inline-block; max-width: 100%; padding: 1px 6px; overflow: hidden; border-radius: 5px; background: var(--nx-surface-3); color: var(--nx-text); font-family: var(--nx-mono); font-size: var(--nx-text-2xs); text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } .nx-ws-sub { display: block; margin-top: 2px; color: var(--nx-muted); font-size: var(--nx-text-2xs); white-space: nowrap; } .nx-ws-num { font-weight: 750; font-variant-numeric: tabular-nums; } .nx-ws-stack { display: grid; justify-items: start; gap: 4px; min-width: 0; } .nx-ws-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; } .nx-ws-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .nx-ws-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 220px; padding: 1px 7px; overflow: hidden; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } /* CopyChip: a code (coupon code, product key, license key) that copies itself on click */ .nx-cp-code { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; padding: 2px 8px; border: 1.5px dashed color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); border-radius: var(--nx-radius-xs); background: color-mix(in srgb, var(--nx-accent) 6%, var(--nx-surface)); color: var(--nx-accent-ink); font-family: var(--nx-mono); font-size: var(--nx-text-xs); font-weight: 800; letter-spacing: .04em; line-height: 1.4; text-align: left; vertical-align: middle; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-cp-code > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-cp-code > svg { flex: none; opacity: .65; } .nx-cp-code:hover { border-style: solid; background: var(--nx-accent-soft); } .nx-cp-code:hover > svg, .nx-cp-code[data-copied] > svg { opacity: 1; } .nx-cp-code[data-copied] { border-style: solid; border-color: color-mix(in srgb, var(--nx-success) 50%, var(--nx-border)); background: color-mix(in srgb, var(--nx-success) 9%, var(--nx-surface)); color: var(--nx-success-ink); } .nx-cp-code:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; } /* Coupons: row switch, type cards, scope pickers, summary ticket and discount calculator */ .nx-cp-switch { display: inline-flex; align-items: center; gap: 6px; padding: 0 5px; cursor: pointer; } .nx-cp-switch .nx-switch { width: 34px; height: 19px; } .nx-cp-switch .nx-switch span::after { width: 11px; height: 11px; } .nx-cp-switch .nx-switch input:checked + span::after { transform: translateX(15px); } .nx-cp-switch:has(input:disabled) { opacity: .55; cursor: not-allowed; } .nx-ps-row-actions > .nx-cp-switch { --ps-reveal: 1; } .nx-cp-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-cp-pick { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-cp-pick__head { display: flex; align-items: center; gap: 8px; min-height: 24px; } .nx-cp-pick__head strong { font-size: var(--nx-text-sm); font-weight: 750; } .nx-cp-pick__head span { color: var(--nx-muted); font-size: var(--nx-text-xs); font-variant-numeric: tabular-nums; } .nx-cp-pick__head .nx-field__action { margin-left: auto; } .nx-content .nx-cp-pick .nx-ps-cats__search input { background-color: var(--nx-surface); } .nx-cp-ticket { --cp-tone: var(--nx-accent); --cp-ink: var(--nx-accent-ink); --cp-line: color-mix(in srgb, var(--cp-tone) 32%, var(--nx-border)); position: relative; display: grid; gap: 12px; padding: 15px 16px 13px; border: 1px solid var(--cp-line); border-radius: var(--nx-radius-md); background: linear-gradient(140deg, color-mix(in srgb, var(--cp-tone) 11%, var(--nx-surface)) 0%, var(--nx-surface) 64%); } .nx-cp-ticket[data-state="exhausted"] { --cp-tone: var(--nx-warning); --cp-ink: var(--nx-warning-ink); } .nx-cp-ticket:is([data-state="expired"], [data-state="inactive"]) { --cp-tone: var(--nx-subtle); --cp-ink: var(--nx-muted); } .nx-cp-ticket__head { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-bottom: 13px; border-bottom: 1.5px dashed var(--cp-line); } /* Punched notches where the perforation meets the edges; the card surface shows through. */ .nx-cp-ticket__head::before, .nx-cp-ticket__head::after { content: ""; position: absolute; bottom: -8.75px; box-sizing: border-box; width: 16px; height: 16px; border: 1px solid var(--cp-line); border-radius: 50%; background: var(--nx-surface); } .nx-cp-ticket__head::before { left: -25px; clip-path: inset(0 0 0 50%); } .nx-cp-ticket__head::after { right: -25px; clip-path: inset(0 50% 0 0); } .nx-cp-ticket__value { color: var(--cp-ink); font-size: var(--nx-text-2xl); font-weight: 850; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .nx-cp-ticket__code { max-width: 100%; padding: 3px 9px; overflow: hidden; border: 1.5px dashed color-mix(in srgb, var(--cp-tone) 55%, transparent); border-radius: var(--nx-radius-xs); background: color-mix(in srgb, var(--cp-tone) 9%, var(--nx-surface)); color: var(--cp-ink); font-family: var(--nx-mono); font-size: var(--nx-text-xs); font-weight: 800; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; } .nx-cp-ticket__code[data-empty] { border-color: var(--nx-border-strong); background: var(--nx-surface-2); color: var(--nx-subtle); font-family: inherit; font-size: var(--nx-text-2xs); letter-spacing: .08em; } .nx-cp-ticket__terms { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .nx-cp-ticket__terms li { display: flex; align-items: flex-start; gap: 9px; min-width: 0; font-size: var(--nx-text-sm); line-height: 1.45; } .nx-cp-ticket__terms svg { flex: none; margin-top: 2px; color: var(--cp-ink); } .nx-cp-ticket__terms span { min-width: 0; overflow-wrap: anywhere; } .nx-cp-ticket__foot { display: flex; align-items: flex-start; gap: 7px; padding-top: 10px; border-top: 1px solid var(--nx-border); color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.45; } .nx-cp-ticket__foot svg { flex: none; margin-top: 2px; } .nx-cp-calc { display: grid; gap: 12px; } .nx-cp-calc__result { padding: 11px 13px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-cp-calc__result[data-tone] { border-color: color-mix(in srgb, var(--tone) 28%, var(--nx-border)); background: color-mix(in srgb, var(--tone) 7%, var(--nx-surface)); } .nx-cp-calc__result p { display: flex; align-items: flex-start; gap: 8px; margin: 0; } .nx-cp-calc__result p > svg { flex: none; margin-top: 2px; color: var(--tone-ink, var(--nx-muted)); } .nx-cp-calc__result[data-tone="warning"] p { color: var(--nx-text); } .nx-cp-calc__result dl { display: grid; gap: 6px; margin: 0; } .nx-cp-calc__result dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .nx-cp-calc__result dt { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-cp-calc__result dd { margin: 0; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .nx-cp-calc__result dl > div:nth-child(2) dd { color: var(--tone-ink, var(--nx-text)); } .nx-cp-calc__result .is-total { margin-top: 2px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--tone, var(--nx-border)) 32%, var(--nx-border)); } .nx-cp-calc__result .is-total dt { color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 750; } .nx-cp-calc__result .is-total dd { font-size: var(--nx-text-md); font-weight: 850; } /* Memberships: plan presets and benefit preview, member stats, benefit groups, plan usage, the subscription dialog */ .nx-mb-presets .nx-ps-preset[aria-pressed="true"] { border-style: solid; border-color: color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-mb-hint { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-mb-hint > svg { flex: none; margin-top: 2px; } .nx-mb-hint code { padding: 0 5px; border-radius: 4px; background: var(--nx-surface-3); color: var(--nx-text); font-family: var(--nx-mono); font-size: var(--nx-text-2xs); overflow-wrap: anywhere; } .nx-mb-state { display: flex; align-items: center; gap: 9px; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-sm); line-height: 1.5; } .nx-mb-plan-link { display: inline-block; max-width: 100%; min-width: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 700; line-height: 1.35; text-align: left; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; } .nx-mb-plan-link:hover { color: var(--nx-accent-ink); text-decoration: underline; text-underline-offset: 2px; } .nx-mb-plan-link:focus-visible { border-radius: 4px; } .nx-ps-link.nx-mb-fact-link { font-size: var(--nx-text-sm); text-align: left; overflow-wrap: anywhere; } .nx-mb-receive { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-mb-receive__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; min-height: 24px; } .nx-mb-receive__head strong { font-size: var(--nx-text-sm); font-weight: 750; } .nx-mb-receive__head span { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-mb-receive__groups { display: grid; gap: 8px; max-height: 330px; margin: 0; padding: 0; overflow: auto; overscroll-behavior: contain; list-style: none; } .nx-mb-receive__group { display: grid; gap: 6px; min-width: 0; padding: 9px 11px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface); } .nx-mb-receive__group[data-off] { border-style: dashed; background: transparent; } .nx-mb-receive__group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .nx-mb-receive__group-head .nx-badge { flex: none; } .nx-mb-receive__items { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .nx-mb-receive__items li { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--nx-text-xs); } .nx-mb-receive__items li > svg { flex: none; color: var(--nx-accent-ink); } .nx-mb-receive__items li > span { min-width: 0; overflow: hidden; color: var(--nx-text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .nx-mb-receive__items li > small { flex: none; margin-left: auto; color: var(--nx-muted); font-size: var(--nx-text-2xs); white-space: nowrap; } .nx-mb-receive__more { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-mb-members { display: grid; gap: 10px; } .nx-mb-members__actions { display: flex; flex-wrap: wrap; gap: 6px; } .nx-mb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; } .nx-mb-stats > div { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-mb-stats dt { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-mb-stats dd { margin: 0; font-size: var(--nx-text-xl); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; font-variant-numeric: tabular-nums; } .nx-mb-confirm-list { display: grid; gap: 6px; margin: 0; padding-left: 18px; } .nx-mb-confirm-list li { line-height: 1.5; } .nx-mb-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nx-mb-items { display: grid; gap: 14px; min-width: 0; } .nx-mb-items__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-variant-numeric: tabular-nums; } .nx-ps-search.nx-mb-items__search { flex: 0 1 280px; } .nx-mb-kind { display: grid; gap: 8px; min-width: 0; } .nx-mb-kind h3 { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; } .nx-mb-kind h3 span { padding: 0 7px; border-radius: 999px; background: var(--nx-surface-3); font-size: var(--nx-text-2xs); line-height: 1.6; font-variant-numeric: tabular-nums; } .nx-mb-benefits { display: grid; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); list-style: none; } .nx-mb-benefit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; padding: 9px 10px 9px 12px; background: var(--nx-surface); } .nx-mb-benefit + .nx-mb-benefit { border-top: 1px solid var(--nx-border); } .nx-mb-benefit__icon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: var(--nx-radius-sm); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-mb-benefit__copy { display: grid; flex: 1 1 180px; gap: 1px; min-width: 0; } .nx-mb-benefit__copy strong { overflow: hidden; font-size: var(--nx-text-sm); font-weight: 650; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .nx-mb-benefit__copy small { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.4; } .nx-mb-benefit > .nx-badge, .nx-mb-benefit__remove { flex: none; } .nx-mb-benefit[data-off] :is(.nx-mb-benefit__icon, .nx-mb-benefit__copy) { opacity: .6; } .nx-mb-uses { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .nx-mb-use { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface); text-align: left; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-mb-use:hover { border-color: var(--nx-border-strong); background: var(--nx-hover); } .nx-mb-use__copy { display: grid; flex: 1; gap: 1px; min-width: 0; } .nx-mb-use__copy strong { overflow: hidden; font-size: var(--nx-text-sm); font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .nx-mb-use__copy small { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-mb-use > .nx-badge { flex: none; } .nx-mb-period { display: grid; gap: 10px; padding: 13px 14px; border: 1px solid color-mix(in srgb, var(--tone, var(--nx-border)) 30%, var(--nx-border)); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--tone, var(--nx-surface-2)) 6%, var(--nx-surface)); } .nx-mb-period__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; } .nx-mb-period__left { color: var(--nx-text); font-size: var(--nx-text-md); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-mb-period__bar { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-3); } .nx-mb-period__bar i { display: block; height: 100%; border-radius: inherit; background: var(--tone, var(--nx-accent)); } .nx-mb-period__dates { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-mb-period__dates strong { color: var(--nx-text); font-weight: 700; font-variant-numeric: tabular-nums; } .nx-mb-section { display: grid; gap: 10px; } .nx-mb-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; } .nx-mb-section__head h3 { margin: 0; font-size: var(--nx-text-sm); font-weight: 800; } .nx-mb-section__head span { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-mb-grants { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-mb-grants > svg { flex: none; color: var(--nx-success-ink); } /* Licenses: key box, sync timeline, editor stats and environments, flags, bulk hint, sync log, connection, plugin routes, flow */ .nx-lc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-cp-code.nx-lc-key__value { flex: 1 1 260px; justify-content: space-between; padding: 7px 11px; font-size: var(--nx-text-sm); letter-spacing: .06em; } .nx-cp-code.nx-lc-key__value > span { white-space: normal; overflow-wrap: anywhere; } .nx-lc-key__hint { flex: 1 1 200px; min-width: 0; overflow: hidden; color: var(--nx-text); font-family: var(--nx-mono); font-size: var(--nx-text-sm); font-weight: 700; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; } .nx-lc-reason .nx-textarea { min-height: 76px; } .nx-lc-events { display: grid; margin: 0; padding: 0; list-style: none; } .nx-lc-event { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-bottom: 14px; } .nx-lc-event:last-child { padding-bottom: 0; } .nx-lc-event:not(:last-child)::before { content: ""; position: absolute; top: 32px; bottom: 4px; left: 13.5px; width: 1px; background: var(--nx-border); } .nx-lc-event__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--nx-subtle)) 13%, var(--nx-surface)); color: var(--tone-ink, var(--nx-muted)); } .nx-lc-event__copy { display: grid; gap: 3px; min-width: 0; padding-top: 3px; } .nx-lc-event__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .nx-lc-event__head strong { font-size: var(--nx-text-sm); font-weight: 750; line-height: 1.35; } .nx-lc-event__head time { margin-left: auto; color: var(--nx-muted); font-size: var(--nx-text-xs); white-space: nowrap; } .nx-lc-event p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; color: var(--nx-text); font-size: var(--nx-text-xs); line-height: 1.5; overflow-wrap: anywhere; } .nx-lc-event :is(p, small) code { padding: 0 5px; border-radius: 4px; background: var(--nx-surface-3); font-family: var(--nx-mono); font-size: var(--nx-text-2xs); } .nx-lc-event[data-tone="danger"] p code { background: var(--nx-danger-soft); color: var(--nx-danger-ink); } .nx-lc-event small { color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.6; overflow-wrap: anywhere; } .nx-lc-stack { display: grid; align-content: start; gap: 8px; min-width: 0; } .nx-ps-types.nx-lc-envs { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); } .nx-mb-stats.nx-lc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nx-lc-stats > div { padding: 9px 10px; } .nx-lc-stats > div[data-tone="danger"] { border-color: color-mix(in srgb, var(--nx-danger) 28%, var(--nx-border)); background: color-mix(in srgb, var(--nx-danger) 6%, var(--nx-surface)); } .nx-lc-stats > div[data-tone="danger"] dd { color: var(--nx-danger-ink); } .nx-lc-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; } .nx-mb-hint.nx-lc-bulk-hint { padding: 8px var(--nx-card-x); border-bottom: 1px solid var(--nx-border); background: color-mix(in srgb, var(--nx-accent) 4%, var(--nx-surface)); } .nx-lc-log tbody { transition: opacity var(--nx-dur) var(--nx-ease); } .nx-lc-log[aria-busy="true"] tbody { opacity: .6; } .nx-content .nx-ps-table td.nx-lc-log__time { width: 1%; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-lc-action { display: inline-flex; align-items: center; gap: 8px; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 700; } .nx-lc-action__icon { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-ps-row[data-tone="danger"] .nx-lc-action__icon { background: var(--nx-danger-soft); color: var(--nx-danger-ink); } .nx-lc-log__detail { min-width: 220px; } .nx-lc-log__detail p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; color: var(--nx-text); font-size: var(--nx-text-xs); line-height: 1.5; overflow-wrap: anywhere; } .nx-lc-log__detail p.nx-lc-log__quiet { color: var(--nx-muted); } .nx-lc-log__detail small { display: block; margin-top: 3px; color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.6; } .nx-lc-log__request { display: inline-flex; align-items: center; gap: 4px; } .nx-lc-log__request code { font-family: var(--nx-mono); color: var(--nx-text); } .nx-lc-log__request .nx-icon-btn { width: 24px; height: 24px; } .nx-lc-connection { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--tone, var(--nx-subtle)) 30%, var(--nx-border)); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--tone, var(--nx-subtle)) 7%, var(--nx-surface)); } .nx-lc-connection__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--nx-subtle)) 15%, var(--nx-surface)); color: var(--tone-ink, var(--nx-muted)); } .nx-lc-connection > div { display: grid; gap: 3px; min-width: 0; padding-top: 1px; } .nx-lc-connection strong { color: var(--tone-ink, var(--nx-text)); font-size: var(--nx-text-md); font-weight: 800; line-height: 1.3; } .nx-lc-connection p { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-lc-connection p.nx-lc-connection__missing { color: var(--nx-text); font-weight: 700; } .nx-lc-routes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-lc-routes li { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 9px 11px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface-2); } .nx-lc-routes code { color: var(--nx-accent-ink); font-family: var(--nx-mono); font-size: var(--nx-text-xs); font-weight: 800; overflow-wrap: anywhere; } .nx-lc-routes span { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.45; } .nx-lc-side { display: grid; justify-items: start; gap: 10px; } .nx-lc-side > p:not([class]) { margin: 0; font-size: var(--nx-text-sm); line-height: 1.55; } .nx-lc-side > .nx-ps-note { justify-self: stretch; } .nx-lc-flow { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .nx-lc-flow li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; } .nx-lc-flow li:not(:last-child)::before { content: ""; position: absolute; top: 32px; bottom: -10px; left: 13.5px; width: 1px; background: var(--nx-border); } .nx-lc-flow__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-lc-flow li > div { display: grid; gap: 2px; min-width: 0; padding-top: 4px; } .nx-lc-flow strong { font-size: var(--nx-text-sm); font-weight: 750; line-height: 1.35; } .nx-lc-flow p { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } /* Downloads: dropzone, picked file, file cards, user agent */ .nx-dl-upload { display: grid; gap: 14px; } .nx-dl-upload__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .nx-dl-drop { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; border: 1px dashed var(--nx-border-strong); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); color: var(--nx-text); text-align: center; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-dl-drop:hover, .nx-dl-drop[data-drag] { border-color: var(--nx-accent); background: var(--nx-accent-soft); } .nx-dl-drop[data-disabled] { opacity: .6; cursor: not-allowed; } .nx-dl-input:focus-visible + .nx-dl-drop { outline: 2px solid var(--nx-accent); outline-offset: 2px; } .nx-dl-drop__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--nx-surface); color: var(--nx-accent-ink); box-shadow: 0 0 0 1px var(--nx-border); } .nx-dl-drop__title { font-size: var(--nx-text-sm); font-weight: 700; } .nx-dl-drop__hint { max-width: 52ch; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-dl-picked { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-dl-picked[data-invalid] { border-color: var(--nx-danger); } .nx-dl-picked[data-drag] { border-color: var(--nx-accent); background: var(--nx-accent-soft); } .nx-dl-picked__icon, .nx-dl-file__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: var(--nx-radius-sm); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-dl-picked__copy { display: grid; flex: 1; gap: 2px; min-width: 0; } .nx-dl-picked__copy strong { overflow: hidden; font-size: var(--nx-text-sm); text-overflow: ellipsis; white-space: nowrap; } .nx-dl-picked__copy small { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-dl-files { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .nx-dl-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 14px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); } .nx-dl-file[data-primary] { border-color: color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); box-shadow: inset 3px 0 0 var(--nx-accent); } .nx-dl-file[data-status="disabled"] { opacity: .65; } .nx-dl-file[data-status="quarantined"] { border-color: color-mix(in srgb, var(--nx-danger) 45%, var(--nx-border)); } .nx-dl-file[data-status="quarantined"] .nx-dl-file__icon { background: var(--nx-danger-soft); color: var(--nx-danger-ink); } .nx-dl-file__main { display: grid; gap: 4px; min-width: 0; } .nx-dl-file__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; } .nx-dl-file__head strong { overflow: hidden; max-width: 100%; font-size: var(--nx-text-sm); text-overflow: ellipsis; white-space: nowrap; } .nx-dl-file__meta { display: flex; flex-wrap: wrap; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-dl-file__meta > span + span::before { content: "·"; margin: 0 6px; } .nx-dl-file__sha { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-dl-file__sha > span { flex: none; } .nx-dl-file__sha code { overflow: hidden; min-width: 0; color: var(--nx-text); font-family: var(--nx-mono); text-overflow: ellipsis; white-space: nowrap; } .nx-dl-file__sha .nx-icon-btn { width: 24px; height: 24px; } .nx-dl-file__actions { display: flex; align-items: center; gap: 6px; } .nx-dl-event-file { overflow: hidden; max-width: 260px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .nx-dl-device { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; color: var(--nx-text); font-size: var(--nx-text-sm); } .nx-dl-device > svg { flex: none; color: var(--nx-muted); } .nx-dl-ua { overflow: hidden; min-width: 0; text-overflow: ellipsis; white-space: nowrap; } /* Coaching: weekly hours, time windows, copy strip, special dates, linked product, session card, slot picker, bookings */ .nx-co-hours, .nx-co-dates { display: grid; gap: 12px; min-width: 0; } .nx-co-week { display: grid; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); list-style: none; } .nx-co-day { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: start; gap: 8px 14px; min-width: 0; padding: 10px 10px 10px 14px; background: var(--nx-surface); } .nx-co-day + .nx-co-day { border-top: 1px solid var(--nx-border); } .nx-co-day[data-empty] { background: var(--nx-surface-2); } .nx-co-day__name { display: grid; gap: 1px; min-width: 0; padding-top: 1px; } .nx-co-day__name strong { font-size: var(--nx-text-sm); font-weight: 750; line-height: 1.35; } .nx-co-day__name small { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 650; font-variant-numeric: tabular-nums; } .nx-co-day[data-empty] .nx-co-day__name strong { color: var(--nx-muted); } .nx-co-day__body { display: grid; gap: 8px; min-width: 0; } .nx-co-day__off { margin: 0; padding: 8px 0; color: var(--nx-subtle); font-size: var(--nx-text-xs); font-style: italic; } .nx-co-day__tools { display: flex; gap: 2px; padding-top: 3px; } .nx-co-windows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-co-window { display: grid; gap: 8px; min-width: 0; } .nx-co-window__main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; } .nx-co-times { display: inline-flex; flex: none; align-items: center; gap: 6px; color: var(--nx-muted); } .nx-content .nx-input.nx-co-time { width: 118px; min-height: var(--nx-h-sm); padding: 0 8px 0 10px; font-variant-numeric: tabular-nums; } .nx-co-window[data-overlap] .nx-co-time:not([aria-invalid="true"]) { border-color: color-mix(in srgb, var(--nx-warning) 55%, var(--nx-border-strong)); } .nx-co-window__info { display: inline-flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; } .nx-co-count { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 750; line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-co-count[data-tone] { background: color-mix(in srgb, var(--tone) 12%, var(--nx-surface)); color: var(--tone-ink); } .nx-co-window__tools { display: inline-flex; gap: 2px; margin-left: auto; } .nx-co-window__more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface-2); } .nx-co-window__more > .nx-field__hint { grid-column: 1 / -1; } .nx-co-mini { display: grid; gap: 4px; min-width: 0; } .nx-co-mini > span { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 750; } .nx-content .nx-co-mini .nx-input { min-height: var(--nx-h-sm); } .nx-co-copy { display: grid; gap: 8px; padding: 10px 12px; border: 1px dashed color-mix(in srgb, var(--nx-accent) 40%, var(--nx-border)); border-radius: var(--nx-radius-sm); background: color-mix(in srgb, var(--nx-accent) 5%, var(--nx-surface)); } .nx-co-copy__label { color: var(--nx-text); font-size: var(--nx-text-xs); font-weight: 750; } .nx-co-copy__days, .nx-co-copy__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .nx-co-copy__days .nx-ps-preset { min-width: 44px; } .nx-co-copy__days .nx-ps-preset[aria-pressed="true"] { border-style: solid; border-color: color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-co-hours__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .nx-co-total { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-co-total > svg { flex: none; color: var(--nx-accent-ink); } .nx-co-total strong { color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 750; font-variant-numeric: tabular-nums; } .nx-co-exceptions { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-co-exception { --co-kind: var(--nx-border-strong); display: grid; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid var(--nx-border); border-left: 3px solid var(--co-kind); border-radius: var(--nx-radius-md); background: var(--nx-surface); } .nx-co-exception[data-kind="off"] { --co-kind: var(--nx-danger); } .nx-co-exception[data-kind="partial"] { --co-kind: var(--nx-warning); } .nx-co-exception[data-kind="open"] { --co-kind: var(--nx-success); } .nx-co-exception[data-past] { background: var(--nx-surface-2); } .nx-co-exception[data-past] :is(.nx-co-exception__day, .nx-co-exception__body) { opacity: .7; } .nx-co-exception[data-invalid] { border-color: color-mix(in srgb, var(--nx-danger) 45%, var(--nx-border)); border-left-color: var(--nx-danger); } .nx-co-exception__head { display: flex; align-items: center; gap: 10px; min-width: 0; } .nx-content .nx-input.nx-co-date { flex: none; width: 152px; min-height: var(--nx-h-sm); font-variant-numeric: tabular-nums; } .nx-co-exception__day { display: grid; flex: 1; gap: 1px; min-width: 0; } .nx-co-exception__day strong { overflow: hidden; font-size: var(--nx-text-sm); font-weight: 750; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .nx-co-exception__day small { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-2xs); text-overflow: ellipsis; white-space: nowrap; } .nx-co-exception__body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; } .nx-seg.nx-co-kinds { flex-wrap: wrap; max-width: 100%; } .nx-content .nx-input.nx-co-zone { flex: 0 1 230px; width: auto; min-width: 160px; min-height: var(--nx-h-sm); } .nx-content .nx-input.nx-co-reason { flex: 1 1 200px; width: auto; min-width: 0; min-height: var(--nx-h-sm); } .nx-co-empty { margin: 0; padding: 14px; border: 1px dashed var(--nx-border-strong); border-radius: var(--nx-radius-md); color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; text-align: center; } .nx-co-dates__tools { display: flex; flex-wrap: wrap; gap: 6px; } .nx-co-linked { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-co-linked__icon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: var(--nx-radius-sm); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-co-linked__copy { display: grid; flex: 1; gap: 1px; min-width: 0; } .nx-co-linked__copy small { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-co-linked__copy strong { overflow: hidden; font-size: var(--nx-text-sm); font-weight: 750; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .nx-co-linked__copy span { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.45; } .nx-co-linked > .nx-badge { flex: none; } .nx-co-notices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px 16px; } .nx-co-actions { display: flex; flex-wrap: wrap; gap: 6px; } .nx-co-next { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 9px 11px; border-radius: var(--nx-radius-sm); background: var(--nx-accent-soft); color: var(--nx-text); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-co-next > svg { flex: none; margin-top: 2px; color: var(--nx-accent-ink); } .nx-co-next strong { font-weight: 750; font-variant-numeric: tabular-nums; } .nx-co-session { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 11px 13px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-co-session__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-co-session__copy { display: grid; flex: 1; gap: 1px; min-width: 0; } .nx-co-session__copy strong { overflow: hidden; font-size: var(--nx-text-sm); font-weight: 750; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .nx-co-session__copy span { overflow: hidden; color: var(--nx-text); font-size: var(--nx-text-xs); text-overflow: ellipsis; white-space: nowrap; } .nx-co-session__copy small { color: var(--nx-muted); font-size: var(--nx-text-xs); font-variant-numeric: tabular-nums; } .nx-co-session__credit { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface); color: var(--nx-text); font-size: var(--nx-text-2xs); font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-co-session__credit > svg { color: var(--nx-accent-ink); } .nx-seg.nx-co-seg { display: flex; flex-wrap: wrap; width: 100%; } .nx-co-seg button { flex: 1 1 auto; } .nx-co-when { display: flex; flex-wrap: wrap; gap: 8px; } .nx-content .nx-co-when .nx-input { flex: 1 1 150px; width: auto; min-width: 0; } .nx-co-slots { display: grid; gap: 10px; min-width: 0; } .nx-co-weeknav { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-co-weeknav__label { display: grid; flex: 1; gap: 1px; min-width: 0; text-align: center; } .nx-co-weeknav__label strong { font-size: var(--nx-text-sm); font-weight: 750; font-variant-numeric: tabular-nums; } .nx-co-weeknav__label small { color: var(--nx-muted); font-size: var(--nx-text-2xs); } .nx-co-slotdays { display: grid; margin: 0; padding: 0; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); list-style: none; } .nx-co-slotday { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: start; gap: 6px 12px; padding: 9px 12px; background: var(--nx-surface); } .nx-co-slotday + .nx-co-slotday { border-top: 1px solid var(--nx-border); } .nx-co-slotday[data-today] { background: color-mix(in srgb, var(--nx-accent) 4%, var(--nx-surface)); } .nx-co-slotday__name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding-top: 5px; font-size: var(--nx-text-xs); font-weight: 750; } .nx-co-slotday__name em { padding: 0 6px; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); font-size: var(--nx-text-2xs); font-style: normal; font-weight: 750; line-height: 1.6; } .nx-co-slotday__times { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; } .nx-co-slot { min-width: 64px; height: 30px; padding: 0 10px; border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius-control); background: var(--nx-surface); color: var(--nx-text); font-size: var(--nx-text-xs); font-weight: 750; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-co-slot:hover { border-color: var(--nx-accent); color: var(--nx-accent-ink); } .nx-co-slot[aria-pressed="true"] { border-color: transparent; background: var(--nx-accent); color: var(--nx-on-accent); } .nx-co-slot:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; } .nx-co-slot:disabled { opacity: .55; cursor: not-allowed; } .nx-co-slotday__empty { padding: 5px 0; color: var(--nx-subtle); font-size: var(--nx-text-xs); } .nx-skeleton.nx-co-slotday__skeleton { display: block; width: min(100%, 260px); height: 30px; border-radius: var(--nx-radius-control); } .nx-co-open { padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; } .nx-co-open:hover { color: var(--nx-accent-ink); } .nx-co-open:focus-visible { border-radius: 4px; } .nx-co-room { display: inline-flex; align-items: center; gap: 5px; max-width: 200px; color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 700; text-decoration: none; white-space: nowrap; } .nx-co-room:hover { text-decoration: underline; text-underline-offset: 2px; } .nx-co-room > svg { flex: none; } .nx-co-noroom { display: inline-flex; align-items: center; gap: 4px; color: var(--nx-warning-ink); font-size: var(--nx-text-xs); font-weight: 700; white-space: nowrap; } .nx-ps-status small.nx-co-status-note { max-width: 220px; } .nx-co-status-note > svg { flex: none; } .nx-co-status-note > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nx-co-booking-actions { display: flex; flex-wrap: wrap; gap: 6px; } .nx-co-roomline { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 6px 6px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-co-roomline__url { display: flex; flex: 1; align-items: center; gap: 7px; min-width: 0; color: var(--nx-accent-ink); font-size: var(--nx-text-sm); font-weight: 650; overflow-wrap: anywhere; text-decoration: none; } a.nx-co-roomline__url:hover { text-decoration: underline; text-underline-offset: 2px; } .nx-co-roomline__url > svg { flex: none; } .nx-co-roomline__url > span { min-width: 0; } code.nx-co-roomline__url { display: block; color: var(--nx-text); font-family: var(--nx-mono); font-size: var(--nx-text-xs); } .nx-co-notes { display: grid; gap: 10px; } .nx-co-quote { display: grid; gap: 5px; margin: 0; } .nx-co-quote figcaption { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-co-quote blockquote { margin: 0; padding: 9px 12px; border-left: 3px solid var(--nx-border-strong); border-radius: 0 var(--nx-radius-sm) var(--nx-radius-sm) 0; background: var(--nx-surface-2); color: var(--nx-text); font-size: var(--nx-text-sm); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } /* ── Course studio (nx-cs-*) ── */ .nx-cs-curriculum { display: grid; gap: 12px; min-width: 0; } .nx-cs-curriculum__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .nx-cs-curriculum__foot { display: flex; flex-wrap: wrap; gap: 8px; } .nx-cs-saving { display: inline-flex; align-items: center; gap: 5px; color: var(--nx-accent-ink); font-weight: 650; } .nx-cs-sections { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .nx-cs-section { min-width: 0; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); } .nx-cs-section[data-hidden] { border-style: dashed; } .nx-cs-section__head { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 10px 10px 8px; background: var(--nx-surface-2); } .nx-cs-section__copy { display: grid; flex: 1; gap: 1px; min-width: 0; } .nx-cs-section__copy small { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-cs-section__copy strong { overflow: hidden; font-size: var(--nx-text-sm); font-weight: 750; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .nx-cs-section__copy span { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-xs); text-overflow: ellipsis; white-space: nowrap; } .nx-cs-section[data-hidden] .nx-cs-section__copy strong { color: var(--nx-muted); } .nx-cs-section__empty { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--nx-border); color: var(--nx-subtle); font-size: var(--nx-text-xs); font-style: italic; } .nx-cs-tools { display: inline-flex; flex: none; gap: 2px; } .nx-cs-lessons { display: grid; margin: 0; padding: 0; list-style: none; } .nx-cs-lesson { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px 9px 14px; border-top: 1px solid var(--nx-border); } .nx-cs-lesson:hover { background: color-mix(in srgb, var(--nx-accent) 3%, var(--nx-surface)); } .nx-cs-lesson__icon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: var(--nx-radius-sm); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-cs-lesson.is-hidden .nx-cs-lesson__icon { background: var(--nx-surface-3); color: var(--nx-muted); } .nx-cs-lesson__copy { display: grid; flex: 1; gap: 3px; min-width: 0; } .nx-cs-lesson__title { overflow: hidden; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .nx-cs-lesson.is-hidden .nx-cs-lesson__title { color: var(--nx-muted); } .nx-cs-lesson__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 650; } .nx-cs-lesson__meta > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; } .nx-cs-flag { padding: 1px 7px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-muted); line-height: 1.5; } .nx-cs-flag[data-tone] { background: color-mix(in srgb, var(--tone) 12%, var(--nx-surface)); color: var(--tone-ink); } .nx-cs-switches { display: grid; gap: 8px; min-width: 0; } .nx-cs-group { display: grid; gap: 10px; min-width: 0; padding-top: 14px; border-top: 1px solid var(--nx-border); } .nx-cs-group > h3 { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 750; } .nx-cs-group > h3 > svg { color: var(--nx-accent-ink); } .nx-cs-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; } .nx-cs-type { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 10px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface); color: var(--nx-text); font-size: var(--nx-text-xs); font-weight: 700; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-cs-type > svg { flex: none; color: var(--nx-muted); } .nx-cs-type > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-cs-type:hover { border-color: var(--nx-border-strong); } .nx-cs-type[data-checked] { border-color: color-mix(in srgb, var(--nx-accent) 55%, var(--nx-border)); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-cs-type[data-checked] > svg { color: var(--nx-accent-ink); } .nx-cs-type:has(input:focus-visible) { outline: 2px solid var(--nx-accent); outline-offset: 2px; } fieldset:disabled .nx-cs-type { cursor: default; opacity: .75; } .nx-content .nx-textarea.nx-cs-content, .nx-cs-content { font-family: var(--nx-mono); font-size: var(--nx-text-xs); line-height: 1.6; } .nx-cs-dialog-left { margin-right: auto; } .nx-cs-resources { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-cs-resource { display: grid; gap: 4px; min-width: 0; } .nx-cs-resource__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } .nx-cs-resource .nx-input { min-height: var(--nx-h-sm); } .nx-cs-resource .nx-input.nx-cs-resource__type { flex: 0 0 104px; width: 104px; } .nx-cs-resource .nx-input.nx-cs-resource__title { flex: 1 1 160px; width: auto; min-width: 0; } .nx-cs-resource .nx-input.nx-cs-resource__url { flex: 2 1 220px; width: auto; min-width: 0; } .nx-cs-resource__tools { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; } .nx-cs-resource__dl { display: inline-flex; align-items: center; gap: 4px; padding: 0 6px; color: var(--nx-muted); cursor: pointer; } .nx-cs-resource__dl:has(input:checked) { color: var(--nx-accent-ink); } .nx-cs-students { display: grid; gap: 12px; min-width: 0; } .nx-mb-stats.nx-cs-students__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .nx-cs-students__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nx-cs-students__add { margin-left: auto; } .nx-cs-students__table { overflow-x: auto; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-cs-danger { display: grid; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--nx-border); } .nx-cs-danger > .nx-btn { justify-self: start; } /* ── Blog studio (nx-bl-*) ── */ .nx-bl-post { display: flex; align-items: center; gap: 12px; min-width: 0; } .nx-thumb.nx-bl-post__thumb { flex: none; width: 64px !important; height: 44px !important; border-radius: var(--nx-radius-sm); } .nx-bl-post__copy { display: grid; gap: 2px; min-width: 0; } .nx-bl-post__copy .nx-ps-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-bl-cats__bar { justify-content: space-between; } .nx-bl-cats__bar > .nx-field__hint { margin: 0; } .nx-bl-cats__actions { align-items: center; } .nx-content .nx-input.nx-bl-title { min-height: 48px; font-size: var(--nx-text-lg); font-weight: 700; } .nx-bl-cover { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; gap: 16px; } .nx-bl-cover__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-bl-cover__frame img { display: block; width: 100%; height: 100%; object-fit: cover; } .nx-bl-cover__frame[data-empty] { display: grid; place-items: center; border-style: dashed; } .nx-bl-cover__frame[data-empty] > span { display: grid; justify-items: center; gap: 6px; padding: 12px; color: var(--nx-muted); font-size: var(--nx-text-xs); text-align: center; } .nx-bl-organize { display: grid; gap: 14px; min-width: 0; } .nx-bl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--nx-h); padding: 6px 8px; border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius-control); background: var(--nx-surface); } .nx-bl-tags:focus-within { border-color: var(--nx-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nx-accent) 18%, transparent); } .nx-bl-tags[data-invalid] { border-color: var(--nx-danger); } .nx-bl-tags[data-disabled] { background: var(--nx-surface-2); } .nx-bl-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 700; line-height: 1.5; } .nx-bl-tag button { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .nx-bl-tag button:hover { background: color-mix(in srgb, var(--nx-accent) 18%, transparent); } .nx-bl-tags__input { flex: 1 1 120px; min-width: 80px; height: 26px; padding: 0 2px; border: 0; outline: 0; background: transparent; color: var(--nx-text); font: inherit; font-size: var(--nx-text-sm); } /* ── Media library (nx-md-*) ── */ .nx-md-card { padding: 16px; } .nx-md-browser { position: relative; display: grid; gap: 12px; min-width: 0; } .nx-md-toolbar { display: grid; gap: 10px; } .nx-md-kinds { display: flex; flex-wrap: wrap; gap: 6px; } .nx-md-filters { align-items: center; } .nx-md-upload { margin-left: auto; } .nx-md-count { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-md-count span { color: var(--nx-subtle); } .nx-md-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .nx-md-tile { position: relative; display: grid; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); color: var(--nx-text); text-align: left; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease); } .nx-md-tile:hover { border-color: var(--nx-border-strong); box-shadow: var(--nx-shadow-sm); transform: translateY(-1px); } .nx-md-tile:focus-visible { outline: 2px solid var(--nx-accent); outline-offset: 2px; } .nx-md-tile[aria-pressed="true"] { border-color: var(--nx-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--nx-accent) 45%, transparent); } .nx-md-tile__copy { display: grid; gap: 2px; min-width: 0; padding: 8px 10px 10px; } .nx-md-tile__copy strong { overflow: hidden; font-size: var(--nx-text-xs); font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .nx-md-tile__copy small { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-2xs); text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-md-tile__check { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--nx-surface); border-radius: 50%; background: color-mix(in srgb, var(--nx-text) 35%, transparent); color: transparent; box-shadow: var(--nx-shadow-sm); } .nx-md-tile[aria-pressed="true"] .nx-md-tile__check { background: var(--nx-accent); color: var(--nx-on-accent); } .nx-skeleton.nx-md-tile__skeleton { display: block; aspect-ratio: 1 / 1.1; border-radius: var(--nx-radius-md); } .nx-md-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: repeating-conic-gradient(var(--nx-surface-2) 0 25%, var(--nx-surface) 0 50%) 0 0 / 16px 16px; } .nx-md-thumb img { width: 100%; height: 100%; object-fit: cover; } .nx-md-thumb.is-lg { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--nx-radius-md); } .nx-md-thumb__icon { display: grid; justify-items: center; gap: 4px; color: var(--tone-ink, var(--nx-muted)); } .nx-md-thumb__icon small { padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--tone, var(--nx-subtle)) 14%, var(--nx-surface)); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .04em; } .nx-md-thumb[data-kind]:not([data-kind="image"]) { background: color-mix(in srgb, var(--nx-surface-2) 70%, var(--nx-surface)); } .nx-md-more { display: flex; justify-content: center; } .nx-md-uploads { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .nx-md-uploads li { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(90px, 200px) auto; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface-2); font-size: var(--nx-text-xs); } .nx-md-uploads li[data-state="done"] { color: var(--nx-success-ink); } .nx-md-uploads li[data-state="error"] { border-color: color-mix(in srgb, var(--nx-danger) 40%, var(--nx-border)); color: var(--nx-danger-ink); } .nx-md-uploads__name { overflow: hidden; color: var(--nx-text); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .nx-md-uploads__bar { height: 6px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-3); } .nx-md-uploads__bar i { display: block; height: 100%; border-radius: inherit; background: var(--nx-accent); transition: width 160ms linear; } .nx-md-uploads__msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-md-drop { position: absolute; inset: -6px; z-index: 5; display: grid; place-content: center; justify-items: center; gap: 8px; border: 2px dashed var(--nx-accent); border-radius: var(--nx-radius-lg, 14px); background: color-mix(in srgb, var(--nx-accent) 10%, color-mix(in srgb, var(--nx-surface) 88%, transparent)); color: var(--nx-accent-ink); pointer-events: none; } .nx-dialog__panel.nx-md-picker { width: min(1080px, calc(100vw - 32px)); } .nx-md-picker .nx-md-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } .nx-md-detail { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; } .nx-md-preview { display: grid; place-items: center; min-height: 200px; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: repeating-conic-gradient(var(--nx-surface-2) 0 25%, var(--nx-surface) 0 50%) 0 0 / 16px 16px; } .nx-md-preview__img { display: block; max-width: 100%; max-height: 420px; object-fit: contain; } .nx-md-preview__media { display: block; width: 100%; max-height: 420px; background: #000; } .nx-md-preview__audio { width: calc(100% - 24px); margin: 12px; } .nx-md-detail__side { display: grid; gap: 12px; min-width: 0; } .nx-md-link { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 4px 4px 10px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface-2); } .nx-md-link code { flex: 1; min-width: 0; overflow: hidden; font-family: var(--nx-mono); font-size: var(--nx-text-2xs); text-overflow: ellipsis; white-space: nowrap; } .nx-md-usage { display: grid; gap: 6px; } .nx-md-usage > strong { font-size: var(--nx-text-xs); font-weight: 750; } .nx-md-usage ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .nx-md-usage li { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--nx-text-xs); } .nx-md-usage li > span { color: var(--nx-muted); } .nx-md-usage a { overflow: hidden; color: var(--nx-accent-ink); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .nx-md-usage a:hover { text-decoration: underline; } .nx-md-field-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* Orders studio (nx-od-): list cells, progress steps, items, totals, payments, timeline and notes */ .nx-ps-table-wrap[data-refreshing] tbody { opacity: .6; transition: opacity var(--nx-dur) var(--nx-ease); } .nx-od-cell { display: grid; gap: 2px; min-width: 0; } .nx-od-cell.is-num { justify-items: end; } .nx-od-cell .nx-ws-sub { display: inline-flex; align-items: center; gap: 4px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; } .nx-od-number { font-family: var(--nx-mono); letter-spacing: -.01em; } .nx-ps-status small.is-warning { color: var(--nx-warning-ink); font-weight: 700; } .nx-od-bar-meta { display: inline-flex; align-items: center; gap: 6px; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-od-progress { padding: 16px var(--nx-card-x); } .nx-od-steps { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-od-step { position: relative; display: flex; flex: 1 1 0; align-items: flex-start; gap: 10px; min-width: 0; } .nx-od-step:not(:last-child)::after { content: ""; position: absolute; top: 16px; left: 40px; right: 8px; height: 2px; border-radius: 2px; background: var(--nx-border); } .nx-od-step[data-state="done"]:not(:last-child)::after { background: color-mix(in srgb, var(--nx-success) 55%, var(--nx-border)); } .nx-od-step__dot { position: relative; z-index: 1; display: grid; flex: none; place-items: center; width: 32px; height: 32px; border: 2px solid var(--nx-border); border-radius: 50%; background: var(--nx-surface); color: var(--nx-subtle); } .nx-od-step[data-state="done"] .nx-od-step__dot { border-color: var(--nx-success); background: var(--nx-success-soft); color: var(--nx-success-ink); } .nx-od-step[data-state="current"] .nx-od-step__dot { border-color: var(--nx-warning); background: var(--nx-warning-soft); color: var(--nx-warning-ink); box-shadow: 0 0 0 4px var(--nx-warning-soft); } .nx-od-step[data-state="stopped"] .nx-od-step__dot { border-color: var(--nx-danger); background: var(--nx-danger-soft); color: var(--nx-danger-ink); } .nx-od-step__copy { display: grid; gap: 2px; min-width: 0; padding: 6px 12px 0 0; background: var(--nx-surface); position: relative; z-index: 1; } .nx-od-step__copy strong { font-size: var(--nx-text-sm); font-weight: 750; line-height: 1.3; } .nx-od-step__copy small { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-2xs); text-overflow: ellipsis; white-space: nowrap; } .nx-od-step[data-state="todo"] .nx-od-step__copy strong { color: var(--nx-subtle); } .nx-od-items { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-od-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 14px; } .nx-od-item + .nx-od-item { border-top: 1px solid var(--nx-border); } .nx-od-item__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-od-item__copy { display: grid; gap: 2px; min-width: 0; } .nx-od-item__copy > strong { font-weight: 750; line-height: 1.35; } .nx-od-item__copy .nx-ws-sub { white-space: normal; } .nx-od-item__fulfil { margin-top: 6px; } .nx-od-item__money { display: grid; justify-items: end; gap: 2px; font-variant-numeric: tabular-nums; } .nx-od-item__money strong { font-weight: 800; } .nx-od-discount { color: var(--nx-success-ink) !important; } .nx-od-fulfil { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 9px; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface); color: var(--nx-muted); } .nx-content .nx-od-fulfil select { min-height: 28px; padding: 0 24px 0 2px; border: 0; background-color: transparent; box-shadow: none; color: var(--tone-ink, var(--nx-text)); font-size: var(--nx-text-xs); font-weight: 750; cursor: pointer; } .nx-od-fulfil:focus-within { border-color: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); } .nx-od-totals { display: grid; gap: 6px; justify-self: end; width: min(100%, 340px); margin: 0; } .nx-od-totals > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--nx-text-sm); } .nx-od-totals dt { display: inline-flex; align-items: center; gap: 6px; color: var(--nx-muted); } .nx-od-totals dt code { padding: 1px 6px; border-radius: 5px; background: var(--nx-surface-3); color: var(--nx-text); font-size: var(--nx-text-2xs); } .nx-od-totals dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; } .nx-od-totals .is-total { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--nx-border); } .nx-od-totals .is-total dt { color: var(--nx-text); font-weight: 750; } .nx-od-totals .is-total dd { font-size: var(--nx-text-lg); font-weight: 800; } .nx-od-totals .is-refund dt, .nx-od-totals .is-refund dd { color: var(--nx-danger-ink); } .nx-od-manual { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--nx-success) 30%, var(--nx-border)); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--nx-success) 6%, var(--nx-surface)); } .nx-od-manual__icon { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--nx-success-soft); color: var(--nx-success-ink); } .nx-od-manual strong { font-weight: 750; } .nx-od-manual p { margin: 2px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-od-manual code, .nx-od-code { padding: 1px 6px; border-radius: 5px; background: var(--nx-surface-3); font-family: var(--nx-mono); font-size: var(--nx-text-2xs); } .nx-od-quote { padding-left: 8px; border-left: 2px solid var(--nx-border-strong); white-space: pre-line; } .nx-od-subtable { border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-od-subtable .nx-ps-status small { max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .nx-od-timeline { display: grid; margin: 0; padding: 0; list-style: none; } .nx-od-timeline li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding-bottom: 14px; } .nx-od-timeline li:not(:last-child)::before { content: ""; position: absolute; top: 28px; bottom: 2px; left: 13px; width: 2px; background: var(--nx-border); } .nx-od-timeline__dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--tone, var(--nx-accent)) 14%, var(--nx-surface)); color: var(--tone-ink, var(--nx-accent-ink)); } .nx-od-timeline__body { display: grid; gap: 2px; min-width: 0; padding-top: 4px; } .nx-od-timeline__body strong { font-size: var(--nx-text-sm); font-weight: 750; } .nx-od-timeline__body p { margin: 0; color: var(--nx-text); font-size: var(--nx-text-xs); overflow-wrap: anywhere; } .nx-od-timeline__body small { color: var(--nx-muted); font-size: var(--nx-text-2xs); } .nx-od-action-copy { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-od-action-list { display: flex; flex-direction: column-reverse; gap: 8px; } .nx-od-action-list .nx-btn { justify-content: center; width: 100%; } .nx-od-action-list .nx-ps-bar__label { display: inline; } .nx-od-dialog-copy { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-sm); line-height: 1.55; } .nx-od-note-form { display: grid; gap: 8px; } .nx-od-note-form .nx-btn { justify-self: end; } .nx-od-notes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-od-notes li { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--nx-radius-sm); background: var(--nx-surface-2); } .nx-od-notes p { margin: 0; font-size: var(--nx-text-sm); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; } .nx-od-notes small { color: var(--nx-muted); font-size: var(--nx-text-2xs); } /* Users studio (nx-us-): people cells, role chips and cards, account detail, role matrix */ .nx-us-person { display: flex; align-items: center; gap: 10px; min-width: 0; } .nx-us-person__copy { display: grid; gap: 1px; min-width: 0; } .nx-us-person__copy .nx-ps-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-us-roles { display: flex; flex-wrap: wrap; gap: 4px; } .nx-us-role { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--tone, var(--nx-accent)) 12%, transparent); color: var(--tone-ink, var(--nx-accent-ink)); font-size: var(--nx-text-2xs); font-weight: 750; white-space: nowrap; } .nx-us-role.is-more { background: var(--nx-surface-3); color: var(--nx-muted); } .nx-ps-status small.is-danger { color: var(--nx-danger-ink); font-weight: 700; } .nx-us-counts { display: inline-flex; gap: 10px; color: var(--nx-text); font-size: var(--nx-text-xs); font-weight: 700; font-variant-numeric: tabular-nums; } .nx-us-counts > span { display: inline-flex; align-items: center; gap: 4px; } .nx-us-counts svg { color: var(--nx-subtle); } .nx-us-password { display: flex; align-items: center; gap: 6px; } .nx-us-password .nx-input { flex: 1; } .nx-us-switches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .nx-us-rolepick { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; } .nx-us-rolepick legend { margin-bottom: 8px; font-size: var(--nx-text-sm); font-weight: 750; } .nx-us-rolegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; } .nx-us-rolecard { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-us-rolecard:hover { border-color: var(--nx-border-strong); } .nx-us-rolecard[data-checked] { border-color: color-mix(in srgb, var(--nx-accent) 50%, var(--nx-border)); background: color-mix(in srgb, var(--nx-accent) 6%, var(--nx-surface)); } .nx-us-rolecard[data-disabled] { cursor: default; } .nx-us-rolecard[data-disabled]:not([data-checked]) { opacity: .65; } .nx-us-rolecard input { flex: none; width: 16px; height: 16px; margin-top: 8px; accent-color: var(--nx-accent); } .nx-us-rolecard__icon { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, var(--tone, var(--nx-accent)) 13%, transparent); color: var(--tone-ink, var(--nx-accent-ink)); } .nx-us-rolecard__copy { display: grid; flex: 1; gap: 1px; min-width: 0; } .nx-us-rolecard__copy strong { font-size: var(--nx-text-sm); font-weight: 750; } .nx-us-rolecard__copy small { color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.4; } .nx-us-rolecard__count { flex: none; min-width: 26px; height: 22px; padding: 0 7px; border: 0; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; cursor: pointer; } .nx-us-rolecard__count:hover { background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-us-hero { display: flex; align-items: center; gap: 12px; } .nx-us-hero .nx-ws-avatar { width: 48px; height: 48px; font-size: var(--nx-text-md); } .nx-us-hero strong { display: block; font-size: var(--nx-text-md); font-weight: 800; } .nx-us-hero .nx-ws-sub { white-space: normal; } .nx-us-verify { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--nx-warning) 35%, var(--nx-border)); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--nx-warning) 7%, var(--nx-surface)); color: var(--nx-warning-ink); } .nx-us-verify[data-verified] { border-color: color-mix(in srgb, var(--nx-success) 30%, var(--nx-border)); background: color-mix(in srgb, var(--nx-success) 6%, var(--nx-surface)); color: var(--nx-success-ink); } .nx-us-verify > span:not(.nx-us-verify__actions) { display: grid; flex: 1; gap: 1px; min-width: 180px; } .nx-us-verify strong { color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 750; } .nx-us-verify small { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-us-verify__actions { display: flex; flex-wrap: wrap; gap: 6px; } .nx-us-perms { display: flex; flex-wrap: wrap; gap: 6px; } .nx-us-perm { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 4px 0 9px; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 700; cursor: help; } .nx-us-perm b { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-text); font-size: 10px; } .nx-us-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .nx-us-stat { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-us-stat > svg { color: var(--nx-accent-ink); } .nx-us-stat small { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .nx-us-stat strong { font-size: var(--nx-text-lg); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-us-stat em { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-style: normal; } .nx-us-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .nx-us-subhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px; font-size: var(--nx-text-sm); font-weight: 750; } .nx-us-more { color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 700; } .nx-us-rows { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-us-rows li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; } .nx-us-rows li + li { border-top: 1px solid var(--nx-border); } .nx-us-rows__main { display: grid; flex: 1; gap: 1px; min-width: 0; color: inherit; } .nx-us-rows__main strong { overflow: hidden; font-size: var(--nx-text-sm); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .nx-us-rows__main:hover strong { color: var(--nx-accent-ink); } .nx-us-rows__main small { color: var(--nx-muted); font-size: var(--nx-text-2xs); } .nx-us-rows__side { display: grid; flex: none; justify-items: end; gap: 3px; font-size: var(--nx-text-xs); font-variant-numeric: tabular-nums; } .nx-us-progress { position: relative; flex: none; width: 90px; height: 18px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-3); } .nx-us-progress i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--nx-accent), color-mix(in srgb, var(--nx-accent) 70%, var(--nx-success))); } .nx-us-progress b { position: relative; display: grid; place-items: center; height: 100%; color: var(--nx-text); font-size: 10px; font-weight: 800; } .nx-us-status { display: grid; gap: 6px; } .nx-us-status p { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-us-block { justify-content: center; width: 100%; } .nx-us-facts { display: grid; gap: 0; margin: 0; } .nx-us-facts > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: var(--nx-text-xs); } .nx-us-facts > div + div { border-top: 1px solid var(--nx-border); } .nx-us-facts dt { color: var(--nx-muted); } .nx-us-facts dd { margin: 0; font-weight: 700; text-align: right; } .nx-us-sessions { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-us-sessions li { display: flex; align-items: center; gap: 10px; } .nx-us-sessions li > svg { flex: none; color: var(--nx-muted); } .nx-us-sessions span { display: grid; gap: 1px; min-width: 0; } .nx-us-sessions strong { font-size: var(--nx-text-sm); font-weight: 700; } .nx-us-sessions small { color: var(--nx-muted); font-size: var(--nx-text-2xs); } .nx-us-rolecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; } .nx-us-rolecard-skel { height: 128px; border-radius: var(--nx-radius-md); } .nx-us-roletile { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 14px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); } .nx-us-roletile__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--tone, var(--nx-accent)) 13%, transparent); color: var(--tone-ink, var(--nx-accent-ink)); } .nx-us-roletile__copy { display: grid; gap: 2px; min-width: 0; } .nx-us-roletile__copy strong { font-weight: 800; } .nx-us-roletile__copy small { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.4; } .nx-us-roletile__foot { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--nx-border); color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-us-roletile__foot > span, .nx-us-roletile__users { display: inline-flex; align-items: center; gap: 5px; } .nx-us-roletile__users { padding: 0; border: 0; background: none; color: var(--nx-accent-ink); font: inherit; font-weight: 750; cursor: pointer; } .nx-us-roletile__users:hover { text-decoration: underline; text-underline-offset: 3px; } .nx-us-matrix th:not(:first-child) { min-width: 84px; text-align: center; white-space: normal; } .nx-us-matrix thead th:not(:first-child) span { display: block; font-size: var(--nx-text-2xs); line-height: 1.25; } .nx-us-matrix__group th button { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: var(--nx-text); font: inherit; font-weight: 750; cursor: pointer; } .nx-us-matrix__group th small { padding: 1px 6px; border-radius: 999px; background: var(--nx-surface-3); color: var(--nx-muted); font-size: 10px; } .nx-us-matrix__perm th { padding-left: 42px; font-weight: 500; } .nx-us-matrix__perm th code { display: block; font-family: var(--nx-mono); font-size: var(--nx-text-2xs); } .nx-us-matrix__perm th small { color: var(--nx-muted); font-size: var(--nx-text-2xs); } .nx-us-matrix__perm { background: var(--nx-surface-2); } .nx-us-matrix__cell { text-align: center; } .nx-us-matrix__cell i { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; font-size: 10px; font-style: normal; font-weight: 800; } .nx-us-matrix__cell[data-state="all"] i { background: color-mix(in srgb, var(--nx-success) 16%, transparent); color: var(--nx-success-ink); } .nx-us-matrix__cell[data-state="some"] i { background: color-mix(in srgb, var(--nx-warning) 16%, transparent); color: var(--nx-warning-ink); } .nx-us-matrix__cell[data-state="none"] i { background: var(--nx-surface-3); opacity: .5; } /* Audit log studio (nx-au-): event cells, live indicator, detail dialog */ .nx-au-event { display: flex; align-items: center; gap: 10px; min-width: 0; } .nx-au-event__icon { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--tone, var(--nx-accent)) 13%, transparent); color: var(--tone-ink, var(--nx-accent-ink)); } .nx-au-event__copy { display: grid; gap: 1px; min-width: 0; } .nx-au-event__copy strong { font-size: var(--nx-text-sm); font-weight: 700; } .nx-au-event__copy code { overflow: hidden; color: var(--nx-subtle); font-family: var(--nx-mono); font-size: var(--nx-text-2xs); text-overflow: ellipsis; white-space: nowrap; } .nx-au-table tr[data-alert] > td:first-child { box-shadow: inset 3px 0 0 var(--nx-warning); } .nx-content a.nx-au-target { display: inline-flex; align-items: center; gap: 4px; color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 650; text-decoration: none; white-space: nowrap; } .nx-au-target.is-plain { display: inline-flex; font-size: var(--nx-text-xs); font-weight: 650; } .nx-content a.nx-au-target:hover { text-decoration: underline; text-underline-offset: 3px; } .nx-au-target.is-plain { color: var(--nx-text); } .nx-au-system { display: inline-flex; align-items: center; gap: 6px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; } .nx-au-ip { font-family: var(--nx-mono); font-size: var(--nx-text-2xs); color: var(--nx-muted); } .nx-au-actor { max-width: 240px; } .nx-au-live { width: 8px; height: 8px; border-radius: 50%; background: var(--nx-subtle); } .nx-au-live[data-on] { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); animation: nx-pulse-dot 1.4s ease-in-out infinite; } .nx-au-detail { display: grid; gap: 16px; } .nx-au-facts { display: grid; gap: 0; margin: 0; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-au-facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 12px; font-size: var(--nx-text-sm); } .nx-au-facts > div + div { border-top: 1px solid var(--nx-border); } .nx-au-facts dt { color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; } .nx-au-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; } .nx-au-facts code { font-family: var(--nx-mono); font-size: var(--nx-text-2xs); } .nx-au-inline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .nx-au-inline a { color: var(--nx-accent-ink); font-weight: 650; } .nx-au-block { display: grid; gap: 8px; } .nx-au-block h3 { margin: 0; font-size: var(--nx-text-sm); font-weight: 750; } .nx-au-meta { width: 100%; border-collapse: collapse; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); font-size: var(--nx-text-xs); } .nx-au-meta th, .nx-au-meta td { padding: 7px 10px; border-top: 1px solid var(--nx-border); text-align: left; vertical-align: top; } .nx-au-meta tr:first-child > * { border-top: 0; } .nx-au-meta th { width: 36%; background: var(--nx-surface-2); font-weight: 500; } .nx-au-meta th code { font-family: var(--nx-mono); font-size: var(--nx-text-2xs); } .nx-au-meta td { overflow-wrap: anywhere; } .nx-au-meta td.is-redacted { color: var(--nx-muted); font-style: italic; } .nx-au-meta td.is-redacted svg { margin-right: 4px; vertical-align: -1px; } .nx-au-related { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .nx-au-related button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface); color: inherit; text-align: left; cursor: pointer; } .nx-au-related button:hover { border-color: var(--nx-border-strong); background: var(--nx-hover, var(--nx-surface-2)); } .nx-au-related small { color: var(--nx-muted); font-size: var(--nx-text-2xs); } /* CMS builder (nx-cb-): full-screen visual page builder above the admin shell (dialogs and toasts stay on top) */ .nx-cb { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--nx-bg); color: var(--nx-text); } .nx-cb-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; height: 56px; padding: 0 12px; background: #0f172a; color: #e2e8f0; box-shadow: 0 1px 0 rgba(255, 255, 255, .06); } .nx-cb-bar__left, .nx-cb-bar__right { display: flex; align-items: center; gap: 6px; min-width: 0; } .nx-cb-bar__right { justify-content: flex-end; } .nx-cb-bar__center { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .06); } .nx-cb-bar__sep { width: 1px; height: 22px; margin: 0 4px; background: rgba(255, 255, 255, .14); } .nx-cb-bar__title { display: grid; gap: 2px; min-width: 0; margin-left: 6px; } .nx-cb-bar__title strong { overflow: hidden; color: #fff; font-size: var(--nx-text-sm); font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .nx-cb-bar__title > span { display: flex; align-items: center; gap: 8px; min-width: 0; } .nx-cb-bar__title em { overflow: hidden; color: #94a3b8; font-size: var(--nx-text-2xs); font-style: normal; text-overflow: ellipsis; white-space: nowrap; } .nx-cb-bar__title em[data-state="dirty"] { color: #fbbf24; } .nx-cb-barbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: #cbd5e1; font-size: var(--nx-text-xs); font-weight: 700; white-space: nowrap; cursor: pointer; transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease); } .nx-cb-barbtn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); color: #fff; } .nx-cb-barbtn:disabled { opacity: .4; cursor: default; } .nx-cb-barbtn.is-icon { width: 34px; justify-content: center; padding: 0; } .nx-cb-barbtn.is-flip svg { transform: scaleX(-1); } .nx-cb-barbtn[aria-pressed="true"] { background: #2563eb; color: #fff; } .nx-cb-barbtn.is-save { border: 1px solid rgba(255, 255, 255, .18); } .nx-cb-barbtn.is-primary { background: #2563eb; color: #fff; } .nx-cb-barbtn.is-primary:hover:not(:disabled) { background: #1d4ed8; } .nx-cb-publish { position: relative; display: inline-flex; gap: 1px; } .nx-cb-publish .nx-cb-barbtn.is-primary:first-child { border-radius: 8px 0 0 8px; } .nx-cb-barbtn.is-caret { width: 30px; justify-content: center; padding: 0; border-radius: 0 8px 8px 0; } .nx-cb-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; display: grid; min-width: 230px; padding: 6px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); box-shadow: var(--nx-shadow-lg); } .nx-cb-menu > * { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; } .nx-cb-menu > *:hover { background: var(--nx-surface-2); } .nx-cb-body { display: grid; flex: 1; grid-template-columns: 300px minmax(0, 1fr) 340px; min-height: 0; } .nx-cb-left, .nx-cb-right { display: flex; flex-direction: column; min-height: 0; background: var(--nx-surface); } .nx-cb-left { border-right: 1px solid var(--nx-border); } .nx-cb-right { overflow-y: auto; border-left: 1px solid var(--nx-border); } .nx-cb-left__body { flex: 1; overflow-y: auto; padding: 12px; } .nx-cb-tabs { display: flex; flex: none; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--nx-border); } .nx-cb-tab { position: relative; display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 4px; height: 36px; padding: 0 4px; border: 0; background: none; color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 750; white-space: nowrap; cursor: pointer; } .nx-cb-tab:hover { color: var(--nx-text); } .nx-cb-tab.is-active { color: var(--nx-accent-ink); } .nx-cb-tab.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--nx-accent); } .nx-cb-search { display: flex; align-items: center; gap: 8px; height: 36px; margin-bottom: 12px; padding: 0 10px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface-2); color: var(--nx-muted); } .nx-cb-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--nx-text); font: inherit; font-size: var(--nx-text-sm); } .nx-cb-group + .nx-cb-group { margin-top: 14px; } .nx-cb-group h3 { margin: 0 0 8px; color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-cb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .nx-cb-tile { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); color: var(--nx-text); cursor: grab; transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease); } .nx-cb-tile:hover:not(:disabled) { border-color: color-mix(in srgb, var(--nx-accent) 50%, var(--nx-border)); box-shadow: var(--nx-shadow-sm); transform: translateY(-1px); } .nx-cb-tile:active { cursor: grabbing; } .nx-cb-tile strong { font-size: var(--nx-text-2xs); font-weight: 750; text-align: center; } .nx-cb-tile__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-cb-insert-note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; padding: 8px 10px; border-radius: var(--nx-radius-sm); background: color-mix(in srgb, #2563eb 10%, var(--nx-surface)); color: #1d4ed8; font-size: var(--nx-text-xs); font-weight: 700; } .nx-cb-stack { display: grid; gap: 12px; } .nx-cb-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface); color: var(--nx-text); font-size: var(--nx-text-sm); text-align: left; cursor: pointer; } .nx-cb-row span { flex: 1; min-width: 0; overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .nx-cb-row small { color: var(--nx-muted); font-size: var(--nx-text-2xs); } .nx-cb-row:hover:not(:disabled) { border-color: var(--nx-border-strong); } .nx-cb-tree { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .nx-cb-tree > li { display: flex; align-items: center; gap: 2px; padding: 2px 4px; border: 1px solid transparent; border-radius: var(--nx-radius-sm); } .nx-cb-tree > li:hover { background: var(--nx-surface-2); } .nx-cb-tree > li[data-selected] { border-color: color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); background: var(--nx-accent-soft); } .nx-cb-tree > li[data-disabled] .nx-cb-tree__main { opacity: .5; text-decoration: line-through; } .nx-cb-tree > li[data-drop]:hover { box-shadow: inset 0 2px 0 #2563eb; } .nx-cb-tree__grip, .nx-cb-list__grip { display: grid; place-items: center; width: 22px; height: 28px; color: var(--nx-subtle); cursor: grab; } .nx-cb-tree__main { display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 4px; border: 0; background: none; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 600; text-align: left; cursor: pointer; } .nx-cb-tree__main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-cb-tree__end { justify-content: center; min-height: 40px; border: 1px dashed var(--nx-border) !important; color: var(--nx-subtle); font-size: var(--nx-text-xs); } .nx-cb-icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--nx-muted); cursor: pointer; } .nx-cb-icon:hover:not(:disabled) { background: var(--nx-surface-3); color: var(--nx-text); } .nx-cb-icon.is-danger:hover:not(:disabled) { background: var(--nx-danger-soft); color: var(--nx-danger-ink); } .nx-cb-mini { padding: 3px 8px; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface); color: var(--nx-accent-ink); font-size: var(--nx-text-2xs); font-weight: 750; cursor: pointer; } .nx-cb-mini:disabled { opacity: .5; cursor: default; } .nx-cb-mini.is-danger { color: var(--nx-danger-ink); } .nx-cb-empty { color: var(--nx-muted); font-size: var(--nx-text-sm); line-height: 1.5; } .nx-cb-subhead { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--nx-border); font-size: var(--nx-text-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--nx-muted); } .nx-cb-prefix { display: flex; align-items: center; } .nx-cb-prefix em { display: grid; place-items: center; height: 36px; padding: 0 9px; border: 1px solid var(--nx-border); border-right: 0; border-radius: var(--nx-radius-sm) 0 0 var(--nx-radius-sm); background: var(--nx-surface-2); color: var(--nx-muted); font-style: normal; } .nx-cb-prefix .nx-input { border-radius: 0 var(--nx-radius-sm) var(--nx-radius-sm) 0; } .nx-cb-themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .nx-cb-themes button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface); color: var(--nx-text); font-size: var(--nx-text-xs); font-weight: 700; cursor: pointer; } .nx-cb-themes button[aria-checked="true"] { border-color: var(--nx-accent); box-shadow: 0 0 0 2px var(--nx-accent-soft); } .nx-cb-themes i { width: 16px; height: 16px; border-radius: 50%; } .nx-cb-serp { display: grid; gap: 3px; padding: 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-cb-serp small { color: #15803d; font-size: var(--nx-text-2xs); } .nx-cb-serp strong { color: #1a0dab; font-size: var(--nx-text-md); font-weight: 500; } .nx-cb-serp p { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-cb-template { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); color: var(--nx-text); text-align: left; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); } .nx-cb-template:hover:not(:disabled), .nx-cb-template[aria-checked="true"], .nx-cb-template[data-active] { border-color: var(--nx-accent); box-shadow: 0 0 0 2px var(--nx-accent-soft); } .nx-cb-template span:last-child { display: grid; gap: 2px; min-width: 0; } .nx-cb-template strong { font-size: var(--nx-text-sm); font-weight: 750; } .nx-cb-template small { color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.4; } .nx-cb-templates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .nx-cb-stage { position: relative; display: flex; justify-content: center; min-width: 0; min-height: 0; padding: 14px; overflow: auto; background: repeating-conic-gradient(color-mix(in srgb, var(--nx-surface-3) 60%, transparent) 0% 25%, transparent 0% 50%) 50% / 22px 22px, var(--nx-surface-2); } .nx-cb-frame { position: relative; flex: none; max-width: 100%; height: 100%; overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 10px 40px rgba(15, 23, 42, .18); transition: width .25s var(--nx-ease); } .nx-cb[data-device="mobile"] .nx-cb-frame, .nx-cb[data-device="tablet"] .nx-cb-frame { border: 10px solid #111827; border-radius: 28px; } .nx-cb-frame iframe { display: block; width: 100%; height: 100%; border: 0; } .nx-cb-frame__wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--nx-muted); font-size: var(--nx-text-sm); font-weight: 650; } .nx-cb-inspector { display: flex; flex-direction: column; min-height: 0; } .nx-cb-inspector__head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 12px 10px 14px; } .nx-cb-inspector__head > div { display: grid; flex: 1; gap: 2px; min-width: 0; } .nx-cb-inspector__head strong { font-size: var(--nx-text-sm); font-weight: 800; } .nx-cb-inspector__head small { color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.4; } .nx-cb-inspector__icon { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: color-mix(in srgb, #2563eb 12%, transparent); color: #1d4ed8; } .nx-cb-inspector__body { display: grid; gap: 14px; padding: 14px; } .nx-cb-field { display: grid; gap: 6px; min-width: 0; } .nx-cb-field__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--nx-text-xs); font-weight: 750; } .nx-cb-field__label small { color: var(--nx-subtle); font-weight: 600; } .nx-cb-field__hint { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-2xs); line-height: 1.45; } .nx-cb-link__grid { display: grid; gap: 6px; } .nx-cb-media { display: flex; align-items: center; gap: 10px; } .nx-cb-media__preview { display: grid; flex: none; place-items: center; width: 64px; height: 48px; overflow: hidden; border: 1px solid var(--nx-border); border-radius: 8px; background: var(--nx-surface-2); color: var(--nx-subtle); } .nx-cb-media__preview img { width: 100%; height: 100%; object-fit: cover; } .nx-cb-media__side { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .nx-cb-media__url { font-size: var(--nx-text-2xs) !important; } .nx-cb-color { display: flex; align-items: center; gap: 8px; } .nx-cb-color input[type="color"] { flex: none; width: 40px; height: 36px; padding: 2px; border: 1px solid var(--nx-border); border-radius: 8px; background: var(--nx-surface); cursor: pointer; } .nx-cb-seg { display: flex; flex-wrap: wrap; width: 100%; } .nx-cb-seg button { flex: 1; padding: 0 6px; } .nx-cb-toggles { gap: 10px; } .nx-cb-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .nx-cb-list > li { border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); background: var(--nx-surface); } .nx-cb-list > li[data-open] { border-color: color-mix(in srgb, var(--nx-accent) 40%, var(--nx-border)); } .nx-cb-list > li[data-drag] { opacity: .5; } .nx-cb-list__head { display: flex; align-items: center; gap: 2px; padding: 2px 4px; } .nx-cb-list__title { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; height: 32px; padding: 0 6px; border: 0; background: none; color: var(--nx-text); font-size: var(--nx-text-xs); font-weight: 700; text-align: left; cursor: pointer; } .nx-cb-list__body { display: grid; gap: 12px; padding: 10px 12px 12px; border-top: 1px solid var(--nx-border); background: var(--nx-surface-2); } .nx-cb-rich { border: 1px solid var(--nx-border); border-radius: var(--nx-radius-sm); overflow: hidden; } .nx-cb-rich__tools { display: flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-bottom: 1px solid var(--nx-border); background: var(--nx-surface-2); } .nx-cb-rich__tools button { display: grid; place-items: center; min-width: 28px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--nx-muted); font-weight: 800; cursor: pointer; } .nx-cb-rich__tools button:hover { background: var(--nx-surface-3); color: var(--nx-text); } .nx-cb-rich__area { min-height: 160px; max-height: 360px; overflow-y: auto; padding: 10px 12px; outline: none; font-size: var(--nx-text-sm); line-height: 1.6; } .nx-cb-rich__area :is(h2, h3, h4) { margin: .6em 0 .3em; font-size: 1.1em; } .nx-cb-rich__area :is(ul, ol) { padding-left: 1.3em; } .nx-cb-rich__area blockquote { margin: .5em 0; padding-left: 10px; border-left: 3px solid var(--nx-border-strong); color: var(--nx-muted); } .nx-cb-rich__area a { color: var(--nx-accent-ink); } .nx-cb-hint { display: grid; justify-items: center; gap: 8px; padding: 36px 22px; color: var(--nx-muted); text-align: center; } .nx-cb-hint > svg { color: #2563eb; } .nx-cb-hint strong { color: var(--nx-text); font-size: var(--nx-text-md); } .nx-cb-hint p { margin: 0; font-size: var(--nx-text-sm); line-height: 1.55; } .nx-cb-hint ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; font-size: var(--nx-text-xs); } .nx-cb-hint kbd { padding: 1px 5px; border: 1px solid var(--nx-border); border-bottom-width: 2px; border-radius: 5px; background: var(--nx-surface-2); font-family: var(--nx-mono); font-size: 10px; } .nx-cb-hint__count { margin-top: 10px !important; font-weight: 700; } .nx-cb-open-section { margin: 0 14px 14px; } .nx-cb-revisions { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-cb-revisions li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-cb-revisions li > span { display: grid; gap: 3px; min-width: 0; } .nx-cb-revisions strong { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--nx-text-sm); } .nx-cb-revisions small { color: var(--nx-muted); font-size: var(--nx-text-2xs); } .nx-cb-listname { display: flex; align-items: center; gap: 10px; min-width: 0; } .nx-cb-listname > span:last-child { display: grid; gap: 1px; min-width: 0; } .nx-cb-listname__icon { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-cb-listname__icon.is-violet { background: color-mix(in srgb, #7c3aed 13%, transparent); color: #6d28d9; } @media (max-width: 1180px) { .nx-cb-body { grid-template-columns: 260px minmax(0, 1fr) 300px; } .nx-cb-bar__right .nx-cb-barbtn span { display: none; } .nx-cb-bar__right .nx-cb-barbtn.is-primary span { display: inline; } } @media (max-width: 900px) { .nx-cb-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } .nx-cb-left { display: none; } .nx-cb-right { max-height: 45vh; border-top: 1px solid var(--nx-border); border-left: 0; } .nx-cb-bar { grid-template-columns: minmax(0, 1fr) auto; } .nx-cb-bar__center { display: none; } } /* ── 16. Responsive ──────────────────────────────────────────────────────────────────────── */ @media (max-width: 1320px) { .nx-ps-layout { grid-template-columns: minmax(0, 1fr) 300px; } } @media (max-width: 1180px) { .nx-user-btn__copy { display: none; } .nx-user-btn { padding-right: 6px; } .nx-dash-grid { grid-template-columns: minmax(0, 1fr); } .nx-chart-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-content :is(.admin-dashboard-grid, .users-grid) { grid-template-columns: minmax(0, 1fr); } .nx-content .health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nx-content .user-list > article { grid-template-columns: 34px minmax(0, 1fr); } .nx-content .role-chips { grid-column: 1 / -1; justify-content: flex-start; padding-left: 44px; } .nx-ps-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); } .nx-ps-stat { grid-column: span 2; } .nx-ps-stat:nth-child(n + 4) { grid-column: span 3; } .nx-ps-layout { grid-template-columns: minmax(0, 1fr); } .nx-ps-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .nx-pay-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-pay-tiles > .nx-ps-stat { grid-column: auto; } .nx-ps-stats[data-count] { grid-template-columns: repeat(6, minmax(0, 1fr)); } .nx-ps-stats:is([data-count="3"], [data-count="6"]) > .nx-ps-stat { grid-column: span 2; } .nx-ps-stats[data-count="4"] > .nx-ps-stat { grid-column: span 3; } } @media (max-width: 960px) { .nx-app { grid-template-columns: minmax(0, 1fr); } .nx-sidebar { position: fixed; inset: 0 auto 0 0; width: min(88vw, 300px); height: 100%; transform: translateX(-104%); transition: transform calc(var(--nx-dur) * 1.4) var(--nx-ease), box-shadow calc(var(--nx-dur) * 1.4) var(--nx-ease); } .nx-app[data-mobile-open="true"] .nx-sidebar { transform: none; box-shadow: 24px 0 70px rgba(0, 0, 0, .35); } .nx-app[data-mobile-open="true"] .nx-overlay { position: fixed; inset: 0; z-index: 39; display: block; background: rgba(5, 9, 15, .58); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: nx-fade-in var(--nx-dur) var(--nx-ease); } .nx-sidebar .nx-sidebar__close { display: grid; } .nx-collapse-btn { display: none; } .nx-topbar { gap: 10px; padding: 10px 14px; } .nx-topbar .nx-topbar__menu { display: inline-grid; } } @media (max-width: 782px) { .nx-topbar__center { display: none; } .nx-topbar .nx-topbar__search-mobile { display: inline-grid; } .nx-topbar__actions { flex: none; } } @media (max-width: 760px) { .nx-content .health-grid, .nx-content .admin-form-grid, .nx-content .audit-filter, .nx-content .audit-row { grid-template-columns: minmax(0, 1fr); } .nx-content .audit-row { gap: 3px; } .nx-content .audit-row--head { display: none; } .nx-content :is(.admin-page-hero, .admin-page-head, .admin-catalog__hero) { align-items: flex-start; flex-direction: column; } .nx-check-list { grid-template-columns: minmax(0, 1fr); } .nx-ps-aside, .nx-ps-grid, .nx-ps-media__fields, .nx-cat__row { grid-template-columns: minmax(0, 1fr); } .nx-ps-table { min-width: 560px; } .nx-ps-table :is(.nx-ps-col-type, .nx-ps-col-time) { display: none; } .nx-ps-search { max-width: none; } .nx-ps-sort-select { margin-left: 0; } .nx-ps-kbd, .nx-ps-bar__save .nx-kbd { display: none; } .nx-ps-bar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .nx-ps-bar__save { min-width: 0; } .nx-ps-md[data-mode="split"] .nx-ps-md__panes { grid-template-columns: minmax(0, 1fr); } .nx-ps-md[data-mode="split"] .nx-ps-md__preview { border-top: 1px solid var(--nx-border); border-left: 0; } .nx-cat__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); } .nx-cat__list { max-height: 220px; border-right: 0; border-bottom: 1px solid var(--nx-border); } .nx-pay-changes li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .nx-pay-ttl { max-width: none; } .nx-mb-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-ps-search.nx-mb-items__search { flex: 1 1 100%; } .nx-co-window__more { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .nx-bottom-nav { position: sticky; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--nx-border); background: color-mix(in srgb, var(--nx-surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .nx-bottom-nav :is(a, button) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 0 2px; border: 0; background: transparent; color: var(--nx-muted); font-size: 10px; font-weight: 700; text-decoration: none; } .nx-bottom-nav :is(a, button) span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-bottom-nav .nx-anchor { display: inline-flex; max-width: none; overflow: visible; } .nx-bottom-nav .nx-anchor .nx-count { top: -6px; right: -10px; max-width: none; overflow: visible; } .nx-bottom-nav .is-active { color: var(--nx-accent-ink); } /* Search and notifications live in the bottom bar on phones. */ .nx-topbar :is(.nx-topbar__search-mobile, .nx-topbar__notif) { display: none; } html[data-nx-statusbar="true"] .nx-statusbar { display: none; } .nx-toasts { bottom: 76px; } .nx-shortcuts { grid-template-columns: minmax(0, 1fr); } .nx-dash-hero__actions { width: 100%; } } @media (max-width: 640px) { .nx-palette { align-items: flex-end; padding: 0; } .nx-palette__panel { width: 100%; max-height: 86vh; border-bottom: 0; border-radius: var(--nx-radius-xl) var(--nx-radius-xl) 0 0; } .nx-palette__foot { display: none; } .nx-ap-options--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .nx-crumbs li:not(:first-child):not(:last-child) { display: none; } .nx-topbar__divider { display: none; } .nx-content { padding: 14px 14px 32px; } .nx-dash-hero { padding: 18px; } .nx-ap-options--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-ps-bar { --ps-gutter: 14px; --ps-top: 14px; } .nx-ps-section { scroll-margin-top: calc(var(--nx-topbar-h) + 164px); } .nx-ps-bar__title { flex-basis: 100%; order: 3; } .nx-ps-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-ps-stats .nx-ps-stat { grid-column: auto; } .nx-ps-stats .nx-ps-stat:first-child { grid-column: 1 / -1; } .nx-ps-stats .nx-ps-stat:not(:first-child) { flex-direction: column; gap: 10px; } .nx-ps-stat__copy :is(small, em) { white-space: normal; } .nx-ps-head__actions { width: 100%; } .nx-ps-head__actions > .nx-btn--primary { flex: 1; justify-content: center; } .nx-ps-search { flex-basis: 100%; min-width: 0; } .nx-ps-types { grid-template-columns: minmax(0, 1fr); } .nx-ps-media { grid-template-columns: minmax(0, 1fr); } .nx-ps-media-add__row { flex-wrap: wrap; } .nx-ps-media-add__btn { flex: 1; justify-content: center; } .nx-ps-section__head { flex-wrap: wrap; } .nx-ps-foot { justify-content: center; } .nx-pay-tiles > .nx-ps-stat { flex-direction: column; gap: 10px; } .nx-pay-secret { flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; } .nx-pay-secret__actions { margin-left: auto; } .nx-ps-stats[data-count] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-ps-stats[data-count] > .nx-ps-stat { grid-column: auto; } .nx-ps-stats:is([data-count="3"], [data-count="5"]) > .nx-ps-stat:first-child { grid-column: 1 / -1; } .nx-ps-stats:is([data-count="4"], [data-count="6"]) > .nx-ps-stat:first-child { flex-direction: column; gap: 10px; } .nx-ws-views { width: 100%; } .nx-ws-facts { grid-template-columns: minmax(0, 1fr); } .nx-ws-facts > div:last-child:nth-child(odd) { grid-column: auto; } .nx-dl-file { grid-template-columns: auto minmax(0, 1fr); } .nx-dl-file__actions { grid-column: 2; } .nx-dl-picked { flex-wrap: wrap; } .nx-co-day { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 10px 10px 12px; } .nx-co-day__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-top: 6px; } .nx-co-day__body { grid-column: 1 / -1; grid-row: 2; } .nx-co-window__more { grid-template-columns: minmax(0, 1fr); } .nx-content .nx-input.nx-co-zone { flex-basis: 100%; } .nx-co-notices { grid-template-columns: minmax(0, 1fr); } .nx-co-linked, .nx-co-session { flex-wrap: wrap; } .nx-co-slotday { grid-template-columns: minmax(0, 1fr); } .nx-co-slotday__name { padding-top: 0; } .nx-cs-section__head, .nx-cs-lesson { flex-wrap: wrap; } .nx-bl-cover { grid-template-columns: minmax(0, 1fr); } .nx-md-detail { grid-template-columns: minmax(0, 1fr); } .nx-md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-md-uploads li { grid-template-columns: auto minmax(0, 1fr) auto; } .nx-md-uploads__bar, .nx-md-uploads__msg { grid-column: 2 / -1; } .nx-md-upload { margin-left: 0; } .nx-cb-templates { grid-template-columns: minmax(0, 1fr); } .nx-au-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .nx-au-actor { max-width: none; } .nx-us-switches, .nx-us-split { grid-template-columns: minmax(0, 1fr); } .nx-us-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-us-rolegrid, .nx-us-rolecards { grid-template-columns: minmax(0, 1fr); } .nx-od-steps { flex-direction: column; gap: 12px; } .nx-od-step:not(:last-child)::after { top: 34px; bottom: -12px; left: 15px; right: auto; width: 2px; height: auto; } .nx-od-item { grid-template-columns: auto minmax(0, 1fr); } .nx-od-item__money { grid-column: 2; justify-items: start; } .nx-od-totals { width: 100%; } .nx-cs-section__head .nx-cs-tools, .nx-cs-lesson .nx-cs-tools { flex-basis: 100%; justify-content: flex-end; } .nx-mb-stats.nx-cs-students__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-cs-students__add { flex-basis: 100%; justify-content: center; margin-left: 0; } .nx-cs-resource .nx-input.nx-cs-resource__type { flex-basis: 100%; width: 100%; } } /* ── 17. Motion, keyframes, print ────────────────────────────────────────────────────────── */ @keyframes nx-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes nx-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } @keyframes nx-slide-in { from { opacity: .4; transform: translateX(22px); } to { opacity: 1; transform: none; } } @keyframes nx-palette-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } } @keyframes nx-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } @keyframes nx-spin { to { transform: rotate(360deg); } } @keyframes nx-pulse { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } } @keyframes nx-pulse-dot { 50% { opacity: .35; } } @keyframes nx-shimmer { to { transform: translateX(100%); } } @keyframes nx-breathe { 50% { transform: scale(.94); box-shadow: 0 8px 20px color-mix(in srgb, var(--nx-accent) 22%, transparent); } } @keyframes nx-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } } html[data-nx-motion="none"] .nx-root *, html[data-nx-motion="none"] .nx-root *::before, html[data-nx-motion="none"] .nx-root *::after { animation-duration: 0s !important; transition-duration: 0s !important; } html[data-nx-motion="none"] .nx-root :is(.nx-spin, .nx-boot__bar i) { animation-duration: .8s !important; } @media (prefers-reduced-motion: reduce) { html[data-nx-admin] .nx-root *, html[data-nx-admin] .nx-root *::before, html[data-nx-admin] .nx-root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html[data-nx-admin] .nx-root :is(.nx-spin, .nx-boot__bar i) { animation-duration: .8s !important; animation-iteration-count: infinite !important; } } html[data-nx-switching] *, html[data-nx-switching] *::before, html[data-nx-switching] *::after { transition: none !important; } @media print { html[data-nx-admin] .nx-app { display: block; } .nx-sidebar, .nx-topbar, .nx-statusbar, .nx-bottom-nav, .nx-toasts, .nx-overlay, .nx-offline { display: none !important; } .nx-content { max-width: none; padding: 0; } } /* ── Notification centre (nx-nt-) ───────────────────────────────────────────────────────────────────────────── */ .nx-nt-chips { display: flex; gap: 6px; padding: 0 17px 10px; overflow-x: auto; scrollbar-width: none; } .nx-nt-chips button { --tone: var(--nx-accent); flex: none; display: inline-flex; align-items: center; gap: 5px; height: 29px; padding: 0 11px; border: 1px solid var(--nx-border); border-radius: 999px; background: transparent; color: var(--nx-muted); font-size: 11.5px; font-weight: 750; } .nx-nt-chips button:hover { color: var(--nx-text); border-color: var(--nx-border-strong); } .nx-nt-chips button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--tone) 38%, transparent); background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone-ink, var(--nx-accent-ink)); } .nx-nt-chips b { min-width: 17px; padding: 1px 5px; border-radius: 999px; background: var(--nx-danger); color: #fff; font-size: 9.5px; font-weight: 800; line-height: 1.4; text-align: center; } .nx-nt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 17px 10px; border-bottom: 1px solid var(--nx-border); } .nx-nt-switch { display: inline-flex; align-items: center; gap: 8px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; cursor: pointer; user-select: none; white-space: nowrap; } .nx-nt-switch input { position: absolute; opacity: 0; pointer-events: none; } .nx-nt-switch span { position: relative; width: 30px; height: 17px; border-radius: 999px; background: var(--nx-border-strong); transition: background var(--nx-dur) var(--nx-ease); } .nx-nt-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--nx-dur) var(--nx-ease); } .nx-nt-switch input:checked + span { background: var(--nx-accent); } .nx-nt-switch input:checked + span::after { transform: translateX(13px); } .nx-nt-switch input:focus-visible + span { box-shadow: 0 0 0 3px var(--nx-focus); } .nx-nt-list { padding-bottom: 8px; } .nx-nt-group h3 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 9px 17px 6px; background: color-mix(in srgb, var(--nx-surface) 94%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--nx-subtle); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-nt-group ul { margin: 0; padding: 0; list-style: none; } .nx-nt-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; border-bottom: 1px solid var(--nx-border); transition: background var(--nx-dur) var(--nx-ease); } .nx-nt-row.has-tick { grid-template-columns: auto minmax(0, 1fr) auto; } .nx-nt-row.has-tick > .nx-ps-tick { padding: 16px 0 0 14px; } .nx-nt-row:hover { background: var(--nx-hover); } .nx-nt-row.is-unread { background: color-mix(in srgb, var(--nx-accent) 5%, transparent); } .nx-nt-row.is-selected { background: var(--nx-accent-soft); } .nx-nt-row__dot { position: absolute; top: 50%; left: 5px; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--nx-accent); box-shadow: 0 0 0 3px var(--nx-accent-soft); } .nx-nt-row.has-tick .nx-nt-row__dot { display: none; } .nx-nt-row.has-tick.is-unread { box-shadow: inset 3px 0 0 var(--nx-accent); } .nx-nt-row__main { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; width: 100%; padding: 13px 8px 13px 17px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .nx-nt-row__main:disabled { cursor: default; } .nx-nt-row__main:focus-visible { outline: 2px solid var(--nx-focus); outline-offset: -2px; border-radius: 8px; } .nx-nt-row__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--tone, var(--nx-info)) 14%, transparent); color: var(--tone-ink, var(--nx-info-ink)); } .nx-nt-row__body { display: grid; gap: 3px; min-width: 0; } .nx-nt-row__title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; } .nx-nt-row__title strong { min-width: 0; font-size: var(--nx-text-sm); font-weight: 650; line-height: 1.38; overflow-wrap: anywhere; } .nx-nt-row.is-unread .nx-nt-row__title strong { font-weight: 800; } .nx-nt-amount { flex: none; color: var(--nx-success-ink); font-size: var(--nx-text-xs); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .nx-nt-amount[data-refund] { color: var(--nx-warning-ink); } .nx-nt-row__text { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; overflow-wrap: anywhere; } .nx-nt-row.is-compact .nx-nt-row__text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .nx-nt-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 2px; color: var(--nx-subtle); font-size: 10.5px; font-weight: 650; } .nx-nt-row__meta > * + *::before { content: "·"; margin-right: 10px; color: var(--nx-border-strong); } .nx-nt-sev { color: var(--nx-warning-ink); font-weight: 800; } .nx-nt-sev[data-severity="error"], .nx-nt-sev[data-severity="critical"] { color: var(--nx-danger-ink); } .nx-nt-row__actions { display: flex; gap: 2px; padding: 11px 10px 0 0; opacity: 0; transition: opacity var(--nx-dur) var(--nx-ease); } .nx-nt-row:hover .nx-nt-row__actions, .nx-nt-row:focus-within .nx-nt-row__actions { opacity: 1; } @media (hover: none) { .nx-nt-row__actions { opacity: 1; } } .nx-nt-page .nx-nt-inbox__head { display: flex; align-items: center; gap: 12px; padding: 10px 17px 10px 14px; border-bottom: 1px solid var(--nx-border); color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-nt-page .nx-nt-group h3 { top: 0; background: var(--nx-surface-2); border-bottom: 1px solid var(--nx-border); } .nx-nt-page .nx-nt-row__main { padding-left: 12px; } .nx-nt-page .nx-nt-row__title strong { font-size: var(--nx-text-md, var(--nx-text-sm)); } .nx-nt-clear { margin-left: auto; } .nx-nt-settings { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; } .nx-nt-settings__card { display: grid; gap: 14px; padding: 18px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg); background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); } .nx-nt-settings__card header h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--nx-text-md, 15px); font-weight: 800; } .nx-nt-settings__card header p { margin: 4px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-nt-settings__channels { display: grid; gap: 9px; } .nx-nt-settings__with-action { display: grid; gap: 6px; } .nx-nt-settings__with-action > .nx-btn { justify-self: end; } .nx-nt-settings__group { display: grid; gap: 8px; } .nx-nt-settings__group + .nx-nt-settings__group { padding-top: 14px; border-top: 1px dashed var(--nx-border); } .nx-nt-settings__group-head { display: flex; align-items: center; gap: 9px; } .nx-nt-settings__group-head > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone-ink); } .nx-nt-settings__group-head strong { flex: 1; font-size: var(--nx-text-sm); font-weight: 800; } .nx-nt-settings__group ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } @media (max-width: 900px) { .nx-nt-settings { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { .nx-notif__panel.nx-nt-panel { width: 100vw; } .nx-nt-row__main { padding-left: 13px; gap: 10px; grid-template-columns: 34px minmax(0, 1fr); } .nx-nt-row__icon { width: 34px; height: 34px; } .nx-nt-row__title { flex-direction: column; align-items: flex-start; gap: 2px; } .nx-nt-clear { margin-left: 0; } } .nx-nt-skeleton { display: grid; margin: 0; padding: 6px 0; list-style: none; } .nx-nt-skeleton li { display: grid; grid-template-columns: 38px minmax(0, 1fr) 90px; gap: 12px; align-items: center; padding: 14px 17px; border-bottom: 1px solid var(--nx-border); } .nx-nt-skeleton .nx-skeleton { height: 12px; border-radius: 6px; } .nx-nt-skeleton .nx-skeleton:first-child { height: 38px; border-radius: 11px; } .nx-nt-page .nx-ps-filters .nx-nt-switch { padding: 0 4px; } /* ── Payments studio (nx-pm-) ───────────────────────────────────────────────────────────────────────────────── */ .nx-pm-studio .nx-ps-stats[data-count="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } .nx-pm-overview { display: grid; gap: 14px; } .nx-pm-overview__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; align-items: stretch; } .nx-pm-panel { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; } .nx-pm-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .nx-pm-panel__head h2 { margin: 0; font-size: var(--nx-text-md, 15px); font-weight: 800; } .nx-pm-panel__head p { margin: 3px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-pm-chart { display: grid; gap: 10px; margin: 0; } .nx-pm-chart.is-loading .nx-skeleton { display: block; height: 170px; border-radius: 10px; } .nx-pm-chart__bars { display: flex; align-items: flex-end; gap: 3px; height: 170px; padding: 0 2px 20px; border-bottom: 1px solid var(--nx-border); } .nx-pm-chart__bar { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; min-width: 3px; } .nx-pm-chart__bar i { display: block; width: 100%; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--nx-success) 88%, #fff), var(--nx-success)); transition: filter var(--nx-dur) var(--nx-ease); } .nx-pm-chart__bar:hover i { filter: brightness(1.12); } .nx-pm-chart__bar[data-empty] i { height: 2px !important; background: var(--nx-border); } .nx-pm-chart__bar small { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); color: var(--nx-subtle); font-size: 9.5px; font-weight: 700; white-space: nowrap; } .nx-pm-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-pm-gateways { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .nx-pm-gateway { display: grid; gap: 10px; padding: 12px 13px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-pm-gateway.is-loading .nx-skeleton { display: block; height: 110px; } .nx-pm-gateway__head { display: flex; align-items: center; gap: 11px; } .nx-pm-gateway__head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; } .nx-pm-gateway__head strong { font-size: var(--nx-text-sm); font-weight: 800; } .nx-pm-gateway__logo { display: grid; place-items: center; flex: none; width: 46px; height: 32px; border-radius: 9px; background: #0f766e; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: -.02em; } .nx-pm-gateway__logo[data-gateway="payos"] { background: #1d4ed8; } .nx-pm-gateway dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; } .nx-pm-gateway dt { color: var(--nx-subtle); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; } .nx-pm-gateway dd { margin: 2px 0 0; font-size: var(--nx-text-sm); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-pm-gateway__foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; color: var(--nx-muted); font-size: 11px; } .nx-pm-gateway__foot span, .nx-pm-gateway__foot button { display: inline-flex; align-items: center; gap: 5px; } .nx-pm-link { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: var(--nx-accent-ink); font: inherit; font-weight: 750; text-decoration: none; cursor: pointer; } .nx-pm-link:hover { text-decoration: underline; } .nx-pm-link.is-danger { color: var(--nx-danger-ink); } .nx-pm-mono { font-family: var(--nx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .92em; letter-spacing: -.01em; } .nx-pm-order { display: grid; gap: 3px; min-width: 0; } .nx-pm-order > a { text-decoration: none; } .nx-pm-order > a:hover { text-decoration: underline; } .nx-pm-gw { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nx-text-xs); font-weight: 750; white-space: nowrap; } .nx-pm-gw::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: #0f766e; } .nx-pm-gw[data-gateway="payos"]::before { background: #1d4ed8; } .nx-pm-amount { font-variant-numeric: tabular-nums; white-space: nowrap; } .nx-pm-amount[data-refund] { color: var(--nx-warning-ink); } .nx-pm-table .nx-ps-status small.is-danger, .nx-pm-event .is-danger { color: var(--nx-danger-ink); } .nx-pm-table .nx-ps-status small { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-pm-event { display: grid; gap: 3px; min-width: 0; max-width: 340px; } .nx-pm-event .nx-ws-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-pm-hero { display: grid; grid-template-columns: minmax(170px, auto) minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 18px; } .nx-pm-hero__amount { display: grid; gap: 2px; padding-right: 18px; border-right: 1px solid var(--nx-border); } .nx-pm-hero__amount small { color: var(--nx-subtle); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .nx-pm-hero__amount strong { font-size: 26px; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .nx-pm-hero__amount span { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-pm-moves { display: grid; margin: 0; padding: 0; list-style: none; } .nx-pm-moves li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--nx-border); } .nx-pm-moves li:last-child { border-bottom: 0; } .nx-pm-moves__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--tone, var(--nx-info)) 14%, transparent); color: var(--tone-ink, var(--nx-info-ink)); } .nx-pm-moves strong { display: flex; align-items: center; gap: 4px; font-size: var(--nx-text-sm); font-weight: 750; } .nx-pm-moves small { display: block; margin-top: 2px; color: var(--nx-muted); font-size: 11px; overflow-wrap: anywhere; } .nx-pm-order-card { display: grid; gap: 10px; } .nx-pm-order-card ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .nx-pm-order-card li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; font-size: var(--nx-text-xs); } .nx-pm-order-card li svg { color: var(--nx-subtle); } .nx-pm-order-card li b { font-variant-numeric: tabular-nums; } .nx-pm-order-card p { display: flex; justify-content: space-between; margin: 0; padding-top: 9px; border-top: 1px dashed var(--nx-border); font-size: var(--nx-text-sm); } .nx-pm-others { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .nx-pm-others button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid var(--nx-border); border-radius: 9px; background: var(--nx-surface-2); color: var(--nx-text); font: inherit; font-size: var(--nx-text-xs); text-align: left; cursor: pointer; } .nx-pm-others button:hover { border-color: var(--nx-border-strong); } .nx-pm-webhook { display: grid; gap: 14px; } .nx-pm-webhook__badges { display: flex; flex-wrap: wrap; gap: 8px; } .nx-pm-payload { overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-pm-payload__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--nx-border); background: var(--nx-surface-2); font-size: var(--nx-text-xs); } .nx-pm-payload pre { max-height: 320px; margin: 0; padding: 12px; overflow: auto; background: var(--nx-surface); color: var(--nx-text); font-family: var(--nx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; } .nx-pm-studio .nx-ps-stats[data-count="5"] > .nx-ps-stat { grid-column: auto; } @media (max-width: 1280px) { .nx-pm-studio .nx-ps-stats[data-count="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1100px) { .nx-pm-overview__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 720px) { .nx-pm-studio .nx-ps-stats[data-count="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-pm-studio .nx-ps-stats[data-count="5"] > .nx-ps-stat:last-child { grid-column: 1 / -1; } .nx-pm-hero { grid-template-columns: minmax(0, 1fr); } .nx-pm-hero__amount { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid var(--nx-border); } .nx-pm-chart__bars { height: 130px; } } /* ── Backups (nx-bk-) ───────────────────────────────────────────────────────────────────────────────────────── */ .nx-bk-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 16px; align-items: start; } .nx-bk-aside { display: grid; gap: 14px; } .nx-bk-card { display: grid; gap: 12px; padding: 16px 18px; } .nx-bk-card header h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--nx-text-md, 15px); font-weight: 800; } .nx-bk-card header p { margin: 4px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-bk-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--nx-border); color: var(--nx-muted); font-size: 11.5px; } .nx-bk-schedule { display: grid; gap: 10px; } .nx-bk-schedule[aria-disabled] { opacity: .6; } .nx-bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .nx-bk-tips { display: grid; gap: 8px; margin: 0; padding: 0 0 0 18px; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.55; } .nx-bk-tips b { color: var(--nx-text); } .nx-bk-name { display: grid; gap: 4px; min-width: 0; } .nx-bk-name strong { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nx-text-sm); font-weight: 750; overflow-wrap: anywhere; } .nx-bk-name strong svg { color: var(--nx-success-ink); flex: none; } .nx-bk-name .nx-ws-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .nx-bk-content { display: grid; gap: 3px; color: var(--nx-muted); font-size: var(--nx-text-xs); white-space: nowrap; } .nx-bk-content span { display: inline-flex; align-items: center; gap: 5px; } .nx-bk-table .nx-ps-status small.is-danger { color: var(--nx-danger-ink); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-bk-table .nx-ps-row-actions.is-visible { --ps-reveal: 1; } .nx-bk-form { display: grid; gap: 13px; } .nx-bk-drop { position: relative; display: grid; justify-items: center; gap: 5px; padding: 22px 14px; border: 2px dashed var(--nx-border-strong); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); color: var(--nx-muted); text-align: center; cursor: pointer; } .nx-bk-drop:hover, .nx-bk-drop[data-selected] { border-color: var(--nx-accent); color: var(--nx-accent-ink); } .nx-bk-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .nx-bk-drop strong { color: var(--nx-text); font-size: var(--nx-text-sm); overflow-wrap: anywhere; } .nx-bk-drop span { font-size: 11.5px; } .nx-bk-progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-3); } .nx-bk-progress span { display: block; height: 100%; border-radius: inherit; background: var(--nx-accent); transition: width var(--nx-dur) var(--nx-ease); } .nx-bk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin: 0; overflow: hidden; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-border); } .nx-bk-facts div { padding: 10px 12px; background: var(--nx-surface); } .nx-bk-facts dt { color: var(--nx-subtle); font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .nx-bk-facts dd { margin: 3px 0 0; font-size: var(--nx-text-sm); font-weight: 750; } .nx-bk-options { display: grid; gap: 8px; } .nx-bk-checking { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-sm); } .nx-bk-restore { --tone: var(--nx-info); display: flex; gap: 12px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--tone) 35%, var(--nx-border)); border-left: 4px solid var(--tone); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--tone) 8%, var(--nx-surface)); } .nx-bk-restore[data-status="completed"] { --tone: var(--nx-success); } .nx-bk-restore[data-status="failed"] { --tone: var(--nx-danger); } .nx-bk-restore__icon { flex: none; color: var(--tone); margin-top: 2px; } .nx-bk-restore strong { font-size: var(--nx-text-sm); font-weight: 800; } .nx-bk-restore p { margin: 3px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-bk-restore p.is-warning { color: var(--nx-warning-ink); } .nx-bk-restore p.is-danger { color: var(--nx-danger-ink); } @media (max-width: 1180px) { .nx-bk-layout { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .nx-bk-label { display: none; } } /* ── SEO studio (nx-seo-) ───────────────────────────────────────────────────────────────────────────────────── */ .nx-seo-studio .nx-link-btn { padding: 0; border: 0; background: none; color: var(--nx-accent-ink); font: inherit; font-size: var(--nx-text-xs); font-weight: 750; cursor: pointer; } .nx-seo-studio .nx-link-btn:hover { text-decoration: underline; } .nx-seo-overview { display: grid; gap: 14px; } .nx-seo-hero { display: flex; align-items: center; gap: 22px; padding: 18px 22px; } .nx-seo-hero__copy h2 { margin: 0; font-size: var(--nx-text-lg, 18px); font-weight: 800; } .nx-seo-hero__copy p { margin: 5px 0 0; color: var(--nx-muted); font-size: var(--nx-text-sm); } .nx-seo-hero__audit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .nx-seo-ring { position: relative; flex: none; display: grid; place-items: center; --tone: var(--nx-success); } .nx-seo-ring[data-tone="warning"] { --tone: var(--nx-warning); } .nx-seo-ring[data-tone="danger"] { --tone: var(--nx-danger); } .nx-seo-ring[data-tone="muted"] { --tone: var(--nx-border-strong); } .nx-seo-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); } .nx-seo-ring circle { fill: none; stroke-width: 10; } .nx-seo-ring__track { stroke: var(--nx-surface-3); } .nx-seo-ring__value { stroke: var(--tone); stroke-linecap: round; transition: stroke-dashoffset .6s var(--nx-ease); } .nx-seo-ring span { position: relative; display: flex; align-items: baseline; gap: 1px; } .nx-seo-ring strong { font-size: 30px; font-weight: 850; letter-spacing: -.03em; } .nx-seo-ring small { color: var(--nx-subtle); font-size: 12px; font-weight: 700; } .nx-seo-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px; align-items: start; } .nx-seo-stack { display: grid; gap: 14px; } .nx-seo-panel { display: grid; gap: 12px; padding: 16px 18px; } .nx-seo-panel header h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--nx-text-md, 15px); font-weight: 800; } .nx-seo-panel header p { margin: 3px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-seo-checks { display: grid; margin: 0; padding: 0; list-style: none; } .nx-seo-checks li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--nx-border); } .nx-seo-checks li:last-child { border-bottom: 0; } .nx-seo-checks__icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--nx-danger-soft, color-mix(in srgb, var(--nx-danger) 14%, transparent)); color: var(--nx-danger-ink); } .nx-seo-checks li[data-ok] .nx-seo-checks__icon { background: color-mix(in srgb, var(--nx-success) 14%, transparent); color: var(--nx-success-ink); } .nx-seo-checks strong { display: block; font-size: var(--nx-text-sm); font-weight: 700; } .nx-seo-checks li[data-ok] strong { color: var(--nx-muted); font-weight: 600; } .nx-seo-checks small { display: block; margin-top: 2px; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.45; } .nx-seo-bars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .nx-seo-bars button { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; overflow: hidden; border: 1px solid var(--nx-border); border-radius: 9px; background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: var(--nx-text-xs); text-align: left; cursor: pointer; } .nx-seo-bars button:hover { border-color: var(--nx-border-strong); } .nx-seo-bars i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, var(--tone, var(--nx-info)) 12%, transparent); } .nx-seo-bars span, .nx-seo-bars b { position: relative; } .nx-seo-kv { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--nx-text-sm); } .nx-seo-kv li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--nx-border); } .nx-seo-mono { font-family: var(--nx-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: .92em; overflow-wrap: anywhere; } .nx-seo-page { display: flex; align-items: flex-start; gap: 9px; min-width: 0; } .nx-seo-page__icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--nx-surface-2); color: var(--nx-muted); } .nx-seo-page strong { display: block; font-size: var(--nx-text-sm); overflow-wrap: anywhere; } .nx-seo-page a { display: inline-flex; align-items: center; gap: 3px; color: var(--nx-muted); text-decoration: none; overflow-wrap: anywhere; } .nx-seo-page a:hover { color: var(--nx-accent-ink); } .nx-seo-snippet { display: grid; gap: 3px; max-width: 460px; font-size: var(--nx-text-xs); } .nx-seo-snippet b { color: #1a0dab; font-size: var(--nx-text-sm); font-weight: 600; } :root[data-theme="dark"] .nx-seo-snippet b, .nx-app[data-theme="dark"] .nx-seo-snippet b { color: #8ab4f8; } .nx-seo-snippet b small { color: var(--nx-subtle); font-weight: 600; } .nx-seo-snippet span { color: var(--nx-muted); line-height: 1.45; } .nx-seo-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 260px; } .nx-seo-score { display: inline-grid; place-items: center; min-width: 36px; height: 26px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--tone, var(--nx-info)) 14%, transparent); color: var(--tone-ink, var(--nx-info-ink)); font-weight: 850; font-variant-numeric: tabular-nums; } .nx-seo-form { display: grid; gap: 13px; } .nx-seo-serp { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: #fff; color: #202124; font-family: arial, sans-serif; } .nx-seo-serp__site { display: flex; align-items: center; gap: 10px; } .nx-seo-serp__favicon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; color: #5f6368; font-size: 12px; font-weight: 700; } .nx-seo-serp__site b { display: block; font-size: 14px; font-weight: 400; color: #202124; } .nx-seo-serp__site small { display: block; color: #4d5156; font-size: 12px; overflow-wrap: anywhere; } .nx-seo-serp__title { color: #1a0dab; font-size: 19px; font-weight: 400; line-height: 1.3; } .nx-seo-serp__desc { margin: 0; color: #4d5156; font-size: 13.5px; line-height: 1.58; } .nx-seo-serp__desc em { color: #70757a; } .nx-seo-social { overflow: hidden; border: 1px solid #dadde1; border-radius: 10px; background: #f0f2f5; color: #1c1e21; font-family: Helvetica, Arial, sans-serif; } .nx-seo-social__image { display: grid; place-items: center; aspect-ratio: 1.91 / 1; background: #e4e6eb; color: #65676b; font-size: 12px; } .nx-seo-social__image img { width: 100%; height: 100%; object-fit: cover; } .nx-seo-social__body { display: grid; gap: 3px; padding: 10px 12px; } .nx-seo-social__body small { color: #65676b; font-size: 12px; } .nx-seo-social__body strong { font-size: 15px; } .nx-seo-social__body p { margin: 0; color: #65676b; font-size: 13px; } .nx-seo-toolbar-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; } .nx-seo-dest { display: inline-flex; align-items: center; gap: 5px; color: var(--nx-muted); } .nx-seo-file { position: relative; justify-self: start; overflow: hidden; } .nx-seo-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .nx-seo-import-errors { display: grid; gap: 6px; max-height: 260px; margin: 0; padding: 0; overflow: auto; list-style: none; font-size: var(--nx-text-xs); } .nx-seo-import-errors li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; padding: 8px 10px; border-radius: 8px; background: var(--nx-surface-2); } .nx-seo-import-errors code { overflow-wrap: anywhere; } .nx-seo-import-errors span { grid-column: 2; color: var(--nx-danger-ink); } .nx-seo-audits { display: grid; gap: 14px; } .nx-seo-audit-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; } .nx-seo-audit-bar > div:first-child { display: grid; gap: 4px; } .nx-seo-audit-bar span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-seo-audit-bar small.is-danger { color: var(--nx-danger-ink); } .nx-seo-audit-bar__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .nx-seo-audit-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 14px; align-items: start; } .nx-seo-rules { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; } .nx-seo-rules button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--nx-text); font: inherit; font-size: var(--nx-text-xs); text-align: left; cursor: pointer; } .nx-seo-rules button:hover { background: var(--nx-hover); } .nx-seo-rules button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--nx-accent) 30%, transparent); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-seo-rules span { display: inline-flex; align-items: center; gap: 7px; } .nx-seo-rules i { width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--nx-info)); } .nx-seo-rules small { color: var(--nx-subtle); font-weight: 600; } .nx-seo-rule-fix { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-seo-issue { display: grid; gap: 3px; justify-items: start; } .nx-seo-issue strong { font-size: var(--nx-text-sm); } .nx-seo-issue small { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.45; } .nx-seo-table tr[data-resolved] { opacity: .6; } .nx-seo-table a.nx-seo-mono { display: inline-flex; align-items: center; gap: 3px; color: var(--nx-accent-ink); text-decoration: none; } .nx-seo-settings { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; } .nx-seo-settings__main { display: grid; gap: 14px; min-width: 0; } .nx-seo-sticky { position: sticky; top: 80px; display: grid; gap: 12px; } .nx-seo-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .nx-seo-code { max-height: 220px; margin: 0; padding: 12px; overflow: auto; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.6; white-space: pre-wrap; } .nx-seo-sitemap-types { display: grid; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); overflow: hidden; } .nx-seo-sitemap-types[aria-disabled] { opacity: .55; } .nx-seo-sitemap-types__head, .nx-seo-sitemap-type { display: grid; grid-template-columns: minmax(0, 1fr) 170px 150px; align-items: center; gap: 12px; padding: 10px 14px; } .nx-seo-sitemap-types__head { background: var(--nx-surface-2); color: var(--nx-subtle); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .nx-seo-sitemap-type { border-top: 1px solid var(--nx-border); } .nx-seo-sitemap-type[data-off] .nx-seo-sitemap-type__name strong { color: var(--nx-subtle); } .nx-seo-sitemap-type__name { display: flex; align-items: center; gap: 10px; cursor: pointer; } .nx-seo-sitemap-type__name strong { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nx-text-sm); } .nx-seo-sitemap-type__name small { display: block; margin-top: 2px; color: var(--nx-muted); font-size: 11px; } .nx-seo-priority { display: flex; align-items: center; gap: 8px; } .nx-seo-priority input { flex: 1; accent-color: var(--nx-accent); } .nx-seo-priority b { min-width: 26px; font-variant-numeric: tabular-nums; } .nx-seo-extras { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-seo-extras li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 130px auto; gap: 8px; align-items: center; } .nx-seo-urls { display: grid; max-height: 420px; margin: 0; padding: 0; overflow: auto; list-style: none; font-size: var(--nx-text-xs); } .nx-seo-urls li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 2px; border-bottom: 1px solid var(--nx-border); } .nx-seo-urls a { min-width: 0; color: var(--nx-accent-ink); text-decoration: none; overflow-wrap: anywhere; } .nx-seo-urls span { flex: none; color: var(--nx-subtle); } .nx-seo-edit-link { margin-right: auto; } @media (max-width: 1180px) { .nx-seo-settings, .nx-seo-grid, .nx-seo-audit-grid { grid-template-columns: minmax(0, 1fr); } .nx-seo-sticky { position: static; } } @media (max-width: 640px) { .nx-seo-hero { flex-direction: column; align-items: flex-start; } .nx-seo-sitemap-types__head { display: none; } .nx-seo-sitemap-type { grid-template-columns: minmax(0, 1fr); } .nx-seo-extras li { grid-template-columns: minmax(0, 1fr) 80px auto; } .nx-seo-extras li select:nth-of-type(2) { grid-column: 1 / 3; } .nx-seo-toolbar-actions { margin-left: 0; } } /* ── Analytics studio (nx-an-) ──────────────────────────────────────────────────────────────────────────────── */ .nx-an-studio { --nx-an-new: var(--nx-chart-3); --nx-an-returning: var(--nx-chart-2); } .nx-an-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; } .nx-an-presets { display: flex; flex-wrap: wrap; gap: 4px; } .nx-an-presets button { height: 30px; padding: 0 11px; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface); color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; white-space: nowrap; cursor: pointer; transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease); } .nx-an-presets button:hover { color: var(--nx-text); border-color: var(--nx-border-strong); } .nx-an-presets button[aria-pressed="true"] { border-color: var(--nx-accent); background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-an-custom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding-left: 14px; border-left: 1px solid var(--nx-border); } .nx-an-custom label { display: grid; gap: 2px; } .nx-an-custom label span { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .nx-an-custom input { height: 30px; padding: 0 8px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-control); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: var(--nx-text-xs); } .nx-an-custom[data-active] input { border-color: var(--nx-accent); } .nx-an-currency select { height: 30px; padding: 0 8px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-control); background: var(--nx-surface); color: var(--nx-text); font: inherit; font-size: var(--nx-text-xs); font-weight: 750; } .nx-an-toolbar__range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 0 auto; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-an-toolbar__range b { color: var(--nx-text); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-an-toolbar__range em { font-style: normal; font-weight: 750; } .nx-an-toolbar__range .is-danger { color: var(--nx-danger-ink); } .nx-an-overview, .nx-an-section { display: grid; gap: 14px; } .nx-an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: start; } .nx-an-grid--wide { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: stretch; } .nx-an-grid--side { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .nx-an-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 18px; } .nx-an-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; } .nx-an-panel__head h2 { margin: 0; font-size: var(--nx-text-md, 15px); font-weight: 800; } .nx-an-panel__head p { margin: 3px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-an-panel .nx-field__hint { margin: 0; } .nx-an-chart-skeleton .nx-skeleton { display: block; height: 260px; border-radius: 10px; } .nx-an-chart-skeleton.is-short .nx-skeleton { height: 150px; } .nx-an-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 18px 12px; border: 1px dashed var(--nx-border); border-radius: var(--nx-radius-md); color: var(--nx-muted); font-size: var(--nx-text-sm); } .nx-an-delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--tone-ink); font-size: var(--nx-text-2xs); font-style: normal; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-ps-stat__copy em .nx-an-delta { margin-right: 3px; } .nx-an-trend-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .nx-an-trend-stats > div { display: grid; gap: 3px; padding: 9px 12px; border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-an-trend-stats span { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-an-trend-stats strong { overflow: hidden; font-size: var(--nx-text-lg); font-weight: 800; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .nx-an-trend-stats strong .nx-an-delta { font-size: var(--nx-text-xs); padding: 2px 8px; } .nx-an-trend { cursor: crosshair; } .nx-an-trend__area { fill: url(#nx-an-fill); } .nx-an-trend__previous { fill: none; stroke: var(--nx-chart-6); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: .7; } .nx-an-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-an-legend li { display: inline-flex; align-items: center; gap: 6px; } .nx-an-legend i { width: 16px; height: 3px; border-radius: 2px; background: var(--c); } .nx-an-legend i[data-dashed] { background: repeating-linear-gradient(90deg, var(--c) 0 5px, transparent 5px 8px); } .nx-an-closing { display: flex; align-items: baseline; gap: 10px; } .nx-an-closing strong { font-size: 30px; font-weight: 850; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .nx-an-closing span { display: grid; color: var(--nx-muted); font-size: var(--nx-text-sm); font-weight: 750; } .nx-an-closing small { color: var(--nx-subtle); font-size: var(--nx-text-xs); font-weight: 650; } .nx-an-stack { display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-2); } .nx-an-stack.is-tall { height: 16px; } .nx-an-stack i { display: block; min-width: 0; height: 100%; } .nx-an-stack i + i { box-shadow: -2px 0 0 var(--nx-surface); } [data-status="completed"] { --s: var(--nx-success); } [data-status="pending_payment"] { --s: var(--nx-warning); } [data-status="refunded"] { --s: var(--nx-danger); } [data-status="cancelled"] { --s: var(--nx-subtle); } [data-status="expired"] { --s: color-mix(in srgb, var(--nx-subtle) 55%, var(--nx-border)); } [data-segment="new"] { --s: var(--nx-an-new); } [data-segment="returning"] { --s: var(--nx-an-returning); } .nx-an-stack i[data-status], .nx-an-stack i[data-segment] { background: var(--s); } .nx-an-status-list, .nx-an-segments { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .nx-an-status-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 80px; align-items: center; gap: 10px; font-size: var(--nx-text-sm); } .nx-an-status-list span, .nx-an-segments span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--nx-muted); font-weight: 700; } .nx-an-status-list span i, .nx-an-segments span i { flex: none; width: 9px; height: 9px; border-radius: 3px; background: var(--s); } .nx-an-status-list b { font-weight: 800; font-variant-numeric: tabular-nums; } .nx-an-status-list small { color: var(--nx-subtle); font-size: var(--nx-text-xs); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .nx-an-segments li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-an-segments strong { font-size: var(--nx-text-lg); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-an-segments small { grid-column: 1 / -1; color: var(--nx-subtle); font-size: var(--nx-text-xs); font-weight: 650; } .nx-an-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--nx-border); } .nx-an-facts div { display: grid; gap: 2px; } .nx-an-facts dt { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .nx-an-facts dd { margin: 0; font-size: var(--nx-text-md, 15px); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-an-bars { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .nx-an-bars li { display: grid; gap: 5px; min-width: 0; } .nx-an-bars__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; } .nx-an-bars__label { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--nx-text); font-size: var(--nx-text-sm); font-weight: 750; } .nx-an-bars__label > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-an-bars__label svg { flex: none; color: var(--nx-subtle); } .nx-an-bars__value { display: inline-flex; align-items: baseline; gap: 6px; flex: none; } .nx-an-bars__value b { font-weight: 800; font-variant-numeric: tabular-nums; } .nx-an-bars__value small { min-width: 42px; color: var(--nx-subtle); font-size: var(--nx-text-xs); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; } .nx-an-bars__track { display: block; height: 7px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-2); } .nx-an-bars__track i { display: block; height: 100%; border-radius: inherit; background: var(--c); } .nx-an-bars__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--nx-subtle); font-size: var(--nx-text-xs); font-weight: 650; } .nx-an-flow { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .nx-an-flow li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "bar bar"; gap: 5px 10px; } .nx-an-flow__label { grid-area: label; display: inline-flex; align-items: center; gap: 8px; color: var(--nx-muted); font-size: var(--nx-text-sm); font-weight: 700; } .nx-an-flow__label b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--nx-surface-2); color: var(--nx-subtle); font-size: 12px; } .nx-an-flow__bar { grid-area: bar; display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-2); } .nx-an-flow__bar i { display: block; height: 100%; border-radius: inherit; background: var(--nx-chart-2); } .nx-an-flow li[data-kind="discounts"] .nx-an-flow__bar i { background: var(--nx-warning); } .nx-an-flow li[data-kind="refunds"] .nx-an-flow__bar i { background: var(--nx-danger); } .nx-an-flow li[data-kind="net"] .nx-an-flow__bar i { background: var(--nx-success); } .nx-an-flow li[data-kind="net"] .nx-an-flow__label { color: var(--nx-text); font-weight: 800; } .nx-an-flow__value { grid-area: value; display: inline-flex; align-items: center; gap: 6px; } .nx-an-flow__value strong { font-weight: 800; font-variant-numeric: tabular-nums; } .nx-an-minis { display: grid; gap: 10px; } .nx-an-mini { display: grid; gap: 8px; padding: 12px 13px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); color: var(--nx-text); text-align: left; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease); } .nx-an-mini:hover { border-color: var(--nx-border-strong); } .nx-an-mini > span { display: inline-flex; align-items: center; gap: 6px; color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-an-mini dl { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; } .nx-an-mini dl div { display: grid; } .nx-an-mini dt { color: var(--nx-subtle); font-size: var(--nx-text-xs); font-weight: 700; } .nx-an-mini dd { margin: 0; font-size: var(--nx-text-lg); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-an-mini small { display: inline-flex; align-items: center; gap: 4px; color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 750; } .nx-an-table td strong { font-weight: 800; } .nx-an-col-share { width: 170px; } .nx-an-share { display: inline-flex; align-items: center; gap: 8px; width: 100%; } .nx-an-share > span { flex: 1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-2); } .nx-an-share > span i { display: block; height: 100%; border-radius: inherit; background: var(--nx-chart-1); } .nx-an-share[data-tone="success"] > span i { background: var(--nx-success); } .nx-an-share small { min-width: 44px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; } .nx-an-product { display: flex; align-items: center; gap: 10px; min-width: 0; } .nx-an-product > div { display: grid; min-width: 0; } .nx-an-product strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-an-rank { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-an-rank[data-top="1"] { background: color-mix(in srgb, #e0a91f 22%, transparent); color: #9a6a00; } .nx-an-rank[data-top="2"] { background: color-mix(in srgb, #94a3b8 26%, transparent); color: #475569; } .nx-an-rank[data-top="3"] { background: color-mix(in srgb, #c47a3d 22%, transparent); color: #8a4a17; } .nx-an-code { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px dashed var(--nx-border-strong); border-radius: 6px; font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: var(--nx-text-xs); font-weight: 750; } .nx-an-person { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .nx-an-person a { color: inherit; text-decoration: none; } .nx-an-person a:hover strong { text-decoration: underline; } .nx-an-link { color: inherit; text-decoration: none; } .nx-an-link:hover { text-decoration: underline; } .nx-an-table-note { padding: 10px 14px; } .nx-an-heat-wrap { overflow-x: auto; } .nx-an-heat { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 3px; font-size: var(--nx-text-xs); } .nx-an-heat th { padding: 6px 8px; color: var(--nx-muted); font-weight: 800; text-align: left; white-space: nowrap; } .nx-an-heat thead th { color: var(--nx-subtle); font-size: var(--nx-text-2xs); letter-spacing: .04em; text-transform: uppercase; } .nx-an-heat .is-num { text-align: right; font-variant-numeric: tabular-nums; } .nx-an-heat td { padding: 7px 8px; border-radius: 6px; font-weight: 750; } .nx-an-heat__cell { background: color-mix(in srgb, var(--nx-chart-1) calc(var(--a) * 100%), var(--nx-surface-2)); color: var(--nx-text); text-align: center; font-variant-numeric: tabular-nums; } .nx-an-heat__cell[data-future] { background: repeating-linear-gradient(135deg, var(--nx-surface-2) 0 5px, transparent 5px 10px); } .nx-an-funnel { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .nx-an-funnel li { display: grid; gap: 5px; } .nx-an-funnel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .nx-an-funnel__head span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--nx-text-sm); font-weight: 750; } .nx-an-funnel__head b { font-size: var(--nx-text-md, 15px); font-weight: 800; font-variant-numeric: tabular-nums; } .nx-an-funnel__bar { display: block; height: 12px; overflow: hidden; border-radius: 6px; background: var(--nx-surface-2); } .nx-an-funnel__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--nx-chart-4), var(--nx-chart-1)); } .nx-an-funnel li:last-child .nx-an-funnel__bar i { background: var(--nx-success); } .nx-an-funnel small { color: var(--nx-subtle); font-size: var(--nx-text-xs); font-weight: 650; } .nx-an-rates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; } .nx-an-rates div { display: grid; gap: 3px; padding: 12px; border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-an-rates dt { color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; } .nx-an-rates dd { margin: 0; font-size: 22px; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .nx-an-export-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .nx-an-export { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-content: start; padding: 16px; } .nx-an-export h3 { margin: 0 0 4px; font-size: var(--nx-text-md, 15px); font-weight: 800; } .nx-an-export p { margin: 0 0 8px; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; } .nx-an-export small { display: inline-flex; align-items: center; gap: 5px; color: var(--nx-subtle); font-size: var(--nx-text-xs); font-weight: 700; } .nx-an-export > .nx-btn { grid-column: 1 / -1; justify-self: start; } .nx-an-export__icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-an-export__icon.is-sm { width: 30px; height: 30px; border-radius: 9px; } .nx-an-file { display: flex; align-items: center; gap: 10px; min-width: 0; } .nx-an-file > div { display: grid; min-width: 0; } .nx-an-file strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1180px) { .nx-an-grid--wide, .nx-an-grid--side { grid-template-columns: minmax(0, 1fr); } .nx-an-export-cards { grid-template-columns: minmax(0, 1fr); } .nx-an-toolbar__range { margin-left: 0; } } @media (max-width: 640px) { .nx-an-custom { padding-left: 0; border-left: 0; } .nx-an-grid { grid-template-columns: minmax(0, 1fr); } .nx-an-trend-stats strong { font-size: var(--nx-text-md, 15px); } .nx-an-rates dd { font-size: 18px; } .nx-an-col-share { width: 120px; } } .nx-an-hash span { display: inline-block; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; } .nx-pay-tiles:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .nx-pay-manual { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; } .nx-pay-manual .np-qr { border-radius: 10px; background: #fff; } .nx-pay-manual__empty { display: grid; place-items: center; gap: 6px; width: 168px; height: 168px; padding: 12px; border: 1px dashed var(--nx-border-strong); border-radius: 10px; color: var(--nx-muted); font-size: var(--nx-text-xs); text-align: center; } .nx-pay-manual dl { display: grid; gap: 7px; margin: 0; } .nx-pay-manual dl div { display: grid; gap: 1px; } .nx-pay-manual dt { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .nx-pay-manual dd { margin: 0; overflow-wrap: anywhere; font-size: var(--nx-text-sm); font-weight: 700; } @media (max-width: 1180px) { .nx-pay-tiles:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { .nx-pay-tiles:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-pay-manual { grid-template-columns: minmax(0, 1fr); justify-items: center; } } /* Orders: manual bank transfer awaiting confirmation (nx-od-transfer) */ .nx-od-transfer { display: grid; gap: 14px; padding: 16px 18px; border-color: color-mix(in srgb, var(--nx-info) 30%, var(--nx-border)); } .nx-od-transfer[data-claimed] { border-color: color-mix(in srgb, var(--nx-warning) 45%, var(--nx-border)); background: color-mix(in srgb, var(--nx-warning) 5%, var(--nx-surface)); } .nx-od-transfer header { display: flex; align-items: flex-start; gap: 12px; } .nx-od-transfer header > div { flex: 1; min-width: 0; } .nx-od-transfer h2 { margin: 0; font-size: var(--nx-text-md, 15px); font-weight: 800; } .nx-od-transfer header p { margin: 3px 0 0; color: var(--nx-muted); font-size: var(--nx-text-sm); line-height: 1.5; } .nx-od-transfer__icon { display: inline-grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--nx-info-soft, color-mix(in srgb, var(--nx-info) 14%, transparent)); color: var(--nx-info-ink); } .nx-od-transfer[data-claimed] .nx-od-transfer__icon { background: color-mix(in srgb, var(--nx-warning) 16%, transparent); color: var(--nx-warning-ink); } .nx-od-transfer__body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; } .nx-od-transfer__body .np-qr { border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--nx-border); } .nx-od-transfer dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; } .nx-od-transfer dl div { display: grid; gap: 3px; min-width: 0; } .nx-od-transfer dt { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .nx-od-transfer dd { margin: 0; overflow-wrap: anywhere; font-size: var(--nx-text-sm); font-weight: 650; } .nx-od-transfer footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--nx-border); } @media (max-width: 640px) { .nx-od-transfer__body { grid-template-columns: minmax(0, 1fr); justify-items: start; } .nx-od-transfer dl { grid-template-columns: minmax(0, 1fr); } .nx-od-transfer header { flex-wrap: wrap; } } /* ── Marketing studio (nx-mk-) ──────────────────────────────────────────────────────────────────────────────── */ .nx-mk-studio .nx-link-btn, .nx-mk-editor .nx-link-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--nx-accent-ink); font: inherit; font-size: var(--nx-text-xs); font-weight: 750; cursor: pointer; } .nx-mk-studio .nx-btn--icon, .nx-mk-editor .nx-btn--icon { padding-inline: 8px; } .nx-mk-overview, .nx-mk-section, .nx-mk-report { display: grid; gap: 14px; } .nx-mk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; align-items: start; } .nx-mk-grid--wide { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: stretch; } .nx-mk-grid--side { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .nx-mk-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px 18px; } .nx-mk-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 12px; flex-wrap: wrap; } .nx-mk-panel__head h2 { margin: 0; font-size: var(--nx-text-md, 15px); font-weight: 800; } .nx-mk-panel__head p { margin: 3px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-mk-skeleton .nx-skeleton { display: block; height: 220px; border-radius: 10px; } .nx-mk-skeleton.is-short .nx-skeleton { height: 130px; } .nx-mk-empty { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 12px; border: 1px dashed var(--nx-border); border-radius: var(--nx-radius-md); color: var(--nx-muted); font-size: var(--nx-text-sm); } .nx-mk-chart { display: grid; gap: 10px; margin: 0; } .nx-mk-chart__bars { display: flex; align-items: flex-end; gap: 3px; height: 190px; overflow: hidden; padding: 6px 2px 20px; border-bottom: 1px solid var(--nx-border); } .nx-mk-chart__col { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; min-width: 3px; } .nx-mk-chart__stack { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; overflow: hidden; border-radius: 5px 5px 2px 2px; } .nx-mk-chart__stack i { display: block; width: 100%; } .nx-mk-chart__stack .is-sent { background: color-mix(in srgb, var(--nx-chart-2) 80%, transparent); } .nx-mk-chart__stack .is-failed { background: var(--nx-danger); } .nx-mk-chart__col:hover .nx-mk-chart__stack { filter: brightness(1.1); } .nx-mk-chart__click { position: absolute; left: 50%; width: 8px; height: 8px; margin: 0 0 -4px -4px; border: 2px solid var(--nx-surface); border-radius: 50%; background: var(--nx-chart-1); } .nx-mk-chart__col small { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); color: var(--nx-subtle); font-size: 9.5px; font-weight: 700; white-space: nowrap; } .nx-mk-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-mk-legend span { display: inline-flex; align-items: center; gap: 6px; } .nx-mk-legend i { width: 10px; height: 10px; border-radius: 3px; } .nx-mk-legend i[data-kind="sent"] { background: var(--nx-chart-2); } .nx-mk-legend i[data-kind="failed"] { background: var(--nx-danger); } .nx-mk-legend i[data-kind="click"] { border-radius: 50%; background: var(--nx-chart-1); } .nx-mk-reach { display: flex; align-items: baseline; gap: 10px; } .nx-mk-reach strong { font-size: 30px; font-weight: 850; letter-spacing: -.03em; } .nx-mk-reach span { display: grid; color: var(--nx-muted); font-size: var(--nx-text-sm); font-weight: 700; } .nx-mk-reach small { color: var(--nx-subtle); font-size: var(--nx-text-xs); font-weight: 650; } .nx-mk-reach__bar { height: 10px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-2); } .nx-mk-reach__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--nx-success), color-mix(in srgb, var(--nx-success) 60%, var(--nx-chart-3))); } .nx-mk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 0; } .nx-mk-facts div { display: grid; gap: 2px; min-width: 0; } .nx-mk-facts dt { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .nx-mk-facts dd { margin: 0; overflow-wrap: anywhere; font-size: var(--nx-text-sm); font-weight: 750; } .nx-mk-rows { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .nx-mk-rows button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); color: var(--nx-text); text-align: left; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-mk-rows button:hover { border-color: var(--nx-border-strong); background: var(--nx-surface-2); } .nx-mk-rows__icon { display: inline-grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-mk-rows__main { display: grid; flex: 1; min-width: 0; } .nx-mk-rows__main strong, .nx-mk-rows__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-mk-rows__main small { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-mk-rows__stat { display: grid; flex: none; text-align: right; } .nx-mk-rows__stat b { font-weight: 800; font-variant-numeric: tabular-nums; } .nx-mk-rows__stat small { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 700; } .nx-mk-scheduled { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--nx-border); } .nx-mk-scheduled h3 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--nx-text-xs); font-weight: 800; color: var(--nx-muted); text-transform: uppercase; letter-spacing: .05em; } .nx-mk-scheduled button { display: grid; gap: 1px; padding: 8px 10px; border: 0; border-radius: 8px; background: var(--nx-surface-2); color: var(--nx-text); text-align: left; cursor: pointer; } .nx-mk-scheduled span { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-mk-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; overflow: clip; overflow-clip-margin: 4px; } .nx-mk-presets button { min-width: 0; } .nx-mk-presets small, .nx-mk-presets strong { overflow-wrap: anywhere; } .nx-mk-presets.is-wide { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .nx-mk-presets button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 11px 12px; border: 1px dashed var(--nx-border-strong); border-radius: var(--nx-radius-md); background: var(--nx-surface); color: var(--nx-text); text-align: left; cursor: pointer; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-mk-presets button:hover { border-style: solid; border-color: var(--nx-accent); background: var(--nx-accent-soft); } .nx-mk-presets button > span { display: inline-grid; grid-row: span 2; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--nx-surface-2); color: var(--nx-accent-ink); } .nx-mk-presets strong { font-size: var(--nx-text-sm); font-weight: 800; } .nx-mk-presets small { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.4; } .nx-mk-cell { display: flex; align-items: center; gap: 10px; min-width: 0; } .nx-mk-cell > div { display: grid; min-width: 0; } .nx-mk-cell__icon { display: inline-grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--tone, var(--nx-accent)) 14%, transparent); color: var(--tone-ink, var(--nx-accent-ink)); } .nx-mk-cell__title { width: fit-content; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: none; color: var(--nx-text); font: inherit; font-weight: 750; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; } .nx-mk-cell__title:hover { color: var(--nx-accent-ink); text-decoration: underline; } .nx-mk-aud, .nx-mk-when, .nx-mk-source { display: inline-flex; align-items: center; gap: 5px; font-size: var(--nx-text-sm); } .nx-mk-aud small { color: var(--nx-subtle); font-weight: 700; } .nx-mk-error { max-width: 280px; overflow: hidden; color: var(--nx-danger-ink); text-overflow: ellipsis; white-space: nowrap; } .nx-mk-steps-mini { display: inline-flex; align-items: center; gap: 3px; } .nx-mk-steps-mini i { width: 16px; height: 6px; border-radius: 3px; background: var(--nx-chart-2); } .nx-mk-steps-mini small { margin-left: 6px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; } .nx-mk-funnel { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .nx-mk-funnel li { display: grid; gap: 5px; } .nx-mk-funnel span { display: flex; justify-content: space-between; font-size: var(--nx-text-sm); font-weight: 700; } .nx-mk-funnel b { font-weight: 800; font-variant-numeric: tabular-nums; } .nx-mk-funnel i { display: block; height: 12px; border-radius: 6px; background: var(--nx-chart-2); } .nx-mk-funnel i[data-step="2"] { background: var(--nx-chart-1); } /* Email editor & preview */ .nx-mk-email { display: grid; gap: 14px; } .nx-mk-tokens { display: inline-flex; gap: 8px; } .nx-mk-compose { display: grid; gap: 14px; } .nx-mk-compose[data-preview] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .nx-mk-compose__edit { display: grid; gap: 10px; min-width: 0; } .nx-mk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-mk-toolbar button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; cursor: pointer; } .nx-mk-toolbar button:hover:not(:disabled) { border-color: var(--nx-border); background: var(--nx-surface); color: var(--nx-text); } .nx-mk-toolbar button:disabled { opacity: .45; cursor: not-allowed; } .nx-mk-toolbar .is-token { color: var(--nx-accent-ink); font-family: var(--nx-font-mono, ui-monospace, monospace); } .nx-mk-toolbar__sep { width: 1px; height: 18px; margin: 0 4px; background: var(--nx-border); } .nx-mk-toolbar__toggle { margin-left: auto; } .nx-mk-code { font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 12.5px; line-height: 1.55; tab-size: 2; } .nx-mk-textswitch { width: fit-content; } .nx-mk-preview { display: grid; gap: 8px; min-width: 0; position: sticky; top: calc(var(--nx-topbar, 60px) + 70px); } .nx-mk-preview[data-compact] { position: static; } .nx-mk-preview__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .nx-mk-inbox { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1 1 220px; } .nx-mk-inbox > div { display: grid; min-width: 0; font-size: var(--nx-text-xs); } .nx-mk-inbox span { overflow: hidden; color: var(--nx-muted); text-overflow: ellipsis; white-space: nowrap; } .nx-mk-inbox b { color: var(--nx-text); } .nx-mk-inbox__avatar { display: inline-grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--nx-accent); color: #fff; font-size: 13px; font-weight: 800; } .nx-mk-preview__stage { display: grid; justify-items: center; padding: 10px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: repeating-linear-gradient(45deg, var(--nx-surface-2) 0 10px, var(--nx-surface) 10px 20px); } .nx-mk-preview__stage iframe { display: block; width: 100%; height: 520px; border: 0; border-radius: 8px; background: #f4f6fb; box-shadow: var(--nx-shadow); transition: width var(--nx-dur) var(--nx-ease); } .nx-mk-preview__stage[data-device="mobile"] iframe { width: 375px; max-width: 100%; height: 600px; border-radius: 20px; box-shadow: 0 0 0 8px #1f2937, var(--nx-shadow); } .nx-mk-preview[data-compact] .nx-mk-preview__stage iframe { height: 420px; } /* Editors */ .nx-mk-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; } .nx-mk-templates button { display: grid; gap: 2px; min-width: 0; white-space: normal; padding: 10px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); color: var(--nx-text); text-align: left; cursor: pointer; } .nx-mk-templates button:hover { border-color: var(--nx-accent); background: var(--nx-accent-soft); } .nx-mk-templates small { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.4; } .nx-mk-presets button, .nx-mk-triggers button { white-space: normal; } .nx-mk-audience, .nx-mk-estimate { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--nx-radius-md); background: var(--nx-accent-soft); } .nx-mk-audience > div, .nx-mk-estimate > div { display: grid; gap: 2px; min-width: 0; } .nx-mk-audience span, .nx-mk-estimate span { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-mk-audience__icon, .nx-mk-estimate__icon { display: inline-grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--nx-surface); color: var(--nx-accent-ink); } .nx-mk-send, .nx-mk-summary { display: grid; gap: 10px; padding: 16px; } .nx-mk-send h2, .nx-mk-summary h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--nx-text-md, 15px); font-weight: 800; } .nx-mk-send p, .nx-mk-summary p { margin: 0; color: var(--nx-muted); font-size: var(--nx-text-sm); line-height: 1.55; } .nx-mk-send__state { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px; background: var(--nx-info-soft, color-mix(in srgb, var(--nx-info) 12%, transparent)); color: var(--nx-info-ink) !important; } .nx-mk-triggers { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 14px; } .nx-mk-triggers button { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); color: var(--nx-text); text-align: left; cursor: pointer; } .nx-mk-triggers button > span { display: inline-grid; grid-row: span 2; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--nx-surface-2); color: var(--nx-muted); } .nx-mk-triggers button[aria-checked="true"] { border-color: var(--nx-accent); background: var(--nx-accent-soft); box-shadow: 0 0 0 1px var(--nx-accent); } .nx-mk-triggers button[aria-checked="true"] > span { background: var(--nx-accent); color: #fff; } .nx-mk-triggers strong { font-size: var(--nx-text-sm); font-weight: 800; } .nx-mk-triggers small { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.35; overflow-wrap: anywhere; } .nx-mk-reentry, .nx-mk-delay, .nx-mk-rule__num { display: flex; align-items: center; gap: 8px; } .nx-mk-reentry select { flex: 1 1 auto; min-width: 150px; } .nx-mk-reentry input { flex: 0 0 90px; width: 90px; } .nx-mk-delay input { width: 90px; } .nx-mk-delay select { width: 100px; } .nx-mk-timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0 0 0 18px; list-style: none; } .nx-mk-timeline::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: 13px; width: 2px; background: var(--nx-border); } .nx-mk-timeline__start, .nx-mk-timeline__end { position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: var(--nx-text-sm); } .nx-mk-timeline__start > span, .nx-mk-timeline__end > span { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: -18px; border-radius: 50%; background: var(--nx-accent); color: #fff; } .nx-mk-timeline__end > span { background: var(--nx-success); } .nx-mk-timeline__end small { color: var(--nx-muted); } .nx-mk-step { position: relative; display: grid; gap: 6px; padding: 8px 0; } .nx-mk-step__wait { position: relative; display: flex; align-items: center; gap: 6px; margin-left: -4px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; } .nx-mk-step__wait small { color: var(--nx-subtle); font-weight: 650; } .nx-mk-step__card { border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); box-shadow: var(--nx-shadow-sm); } .nx-mk-step[data-open] .nx-mk-step__card { border-color: var(--nx-accent); } .nx-mk-step[data-invalid] .nx-mk-step__card { border-color: var(--nx-danger); } .nx-mk-step__head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; color: var(--nx-text); text-align: left; cursor: pointer; } .nx-mk-step__num { display: inline-grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 800; } .nx-mk-step__title { display: grid; flex: 1; min-width: 0; } .nx-mk-step__title strong, .nx-mk-step__title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-mk-step__title small { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-mk-step__body { display: grid; gap: 12px; padding: 4px 14px 14px; border-top: 1px solid var(--nx-border); } .nx-mk-step__tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 10px; } .nx-mk-step__actions { display: flex; gap: 4px; } .nx-mk-stepstats { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .nx-mk-stepstats li { display: grid; gap: 7px; } .nx-mk-stepstats__head { display: flex; align-items: center; gap: 8px; min-width: 0; } .nx-mk-stepstats__head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-mk-stepstats__head small { flex: none; color: var(--nx-subtle); font-size: var(--nx-text-xs); } .nx-mk-stepstats__bar { display: flex; height: 10px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-2); } .nx-mk-stepstats__bar i[data-kind="sent"] { background: var(--nx-success); } .nx-mk-stepstats__bar i[data-kind="pending"] { background: var(--nx-warning); } .nx-mk-stepstats__bar i[data-kind="failed"] { background: var(--nx-danger); } .nx-mk-stepstats dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; } .nx-mk-stepstats dt { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; } .nx-mk-stepstats dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; } /* Segments */ .nx-mk-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; } .nx-mk-chip { display: inline-flex; padding: 2px 8px; border: 1px solid var(--nx-border); border-radius: 999px; background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 750; white-space: nowrap; } .nx-mk-chip b { margin-left: 2px; color: var(--nx-text); font-weight: 750; } .nx-mk-chip.is-more { color: var(--nx-accent-ink); } .nx-mk-rules { display: grid; gap: 8px; margin-top: 4px; padding: 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); } .nx-mk-rules__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .nx-mk-rules__head small { color: var(--nx-muted); font-weight: 650; } .nx-mk-rule { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--nx-border); border-radius: 10px; background: var(--nx-surface); } .nx-mk-rule[data-invalid] { border-color: var(--nx-danger); } .nx-mk-rule__and { color: var(--nx-accent-ink); font-size: var(--nx-text-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; text-align: center; } .nx-mk-rule__num input { flex: 1; min-width: 0; } .nx-mk-rule__num span { color: var(--nx-muted); font-size: var(--nx-text-sm); font-weight: 700; } .nx-mk-rule__hint { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-mk-rule__error { grid-column: 2 / -1; margin: 0; } .nx-mk-estimate { margin-top: 4px; } .nx-mk-import__bad { max-height: 160px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: var(--nx-surface-2); font-size: var(--nx-text-xs); } @media (max-width: 1180px) { .nx-mk-grid--wide, .nx-mk-grid--side, .nx-mk-compose[data-preview] { grid-template-columns: minmax(0, 1fr); } .nx-mk-preview { position: static; } } @media (max-width: 640px) { .nx-mk-grid { grid-template-columns: minmax(0, 1fr); } .nx-mk-presets { grid-template-columns: minmax(0, 1fr); } .nx-mk-rule { grid-template-columns: minmax(0, 1fr) auto; } .nx-mk-rule__and { display: none; } .nx-mk-rule > select:first-of-type { grid-column: 1; } .nx-mk-rule > :nth-child(3) { grid-column: 1 / -1; } .nx-mk-stepstats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nx-mk-preview__stage iframe { height: 440px; } .nx-mk-chart__bars { height: 150px; } } /* ── Affiliate studio (nx-af-) ─────────────────────────────────────────────────────────────────────────────── */ .nx-af-stack { display: grid; gap: 14px; min-width: 0; } .nx-af-code { font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 12.5px; font-weight: 750; letter-spacing: .02em; } a.nx-af-code { color: var(--nx-accent-ink); text-decoration: none; } a.nx-af-code:hover { text-decoration: underline; } .nx-af-struck { color: var(--nx-muted); text-decoration: line-through; } .nx-af-negative, .nx-af-entries b.is-negative { color: var(--nx-danger-ink); } .nx-af-reason { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nx-af-url { display: block; max-width: 280px; overflow: hidden; font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .nx-af-foot { margin: 0; padding: 10px 16px 14px; } .nx-af-inset { margin: 12px 16px 16px; } .nx-af-order { display: grid; min-width: 0; } .nx-af-partner { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; } .nx-af-partner .nx-af-code { flex: none; padding: 2px 7px; border-radius: 6px; background: var(--nx-surface-2); color: var(--nx-muted); } .nx-af-filter-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 10px; border: 1px solid var(--nx-accent); border-radius: 999px; background: var(--nx-accent-soft); color: var(--nx-accent-ink); font-size: var(--nx-text-xs); font-weight: 700; } .nx-af-filter-chip button { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; } .nx-af-filter-chip button:hover { background: color-mix(in srgb, var(--nx-accent) 18%, transparent); } .nx-af-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; } .nx-af-card-head h2 { margin: 0; font-size: var(--nx-text-md, 15px); font-weight: 800; } .nx-af-card-head small { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-af-studio .nx-mk-rows .nx-ws-person, .nx-af-profile .nx-mk-rows .nx-ws-person { flex: 1; min-width: 0; } .nx-af-toolbar-end { margin-left: auto; } /* Chart & money split */ .nx-af-chart__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .nx-af-chart__total { color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-af-chart__total b { color: var(--nx-text); font-variant-numeric: tabular-nums; } .nx-af-chart__fill { background: color-mix(in srgb, var(--nx-chart-2) 80%, transparent); } .nx-af-chart[data-measure="conversions"] .nx-af-chart__fill { background: color-mix(in srgb, var(--nx-chart-1) 85%, transparent); } .nx-af-chart[data-measure="revenue"] .nx-af-chart__fill { background: color-mix(in srgb, var(--nx-chart-3) 85%, transparent); } .nx-af-chart[data-measure="commission"] .nx-af-chart__fill { background: color-mix(in srgb, var(--nx-chart-5) 85%, transparent); } .nx-af-chart[data-compact] .nx-mk-chart__bars { height: 150px; } .nx-af-split { display: flex; height: 12px; overflow: hidden; border-radius: 999px; background: var(--nx-surface-2); } .nx-af-split i { display: block; height: 100%; } .nx-af-split i[data-kind="pending"], .nx-af-legend i[data-kind="pending"] { background: var(--nx-warning); } .nx-af-split i[data-kind="available"], .nx-af-legend i[data-kind="available"] { background: var(--nx-success); } .nx-af-split i[data-kind="reserved"], .nx-af-legend i[data-kind="reserved"] { background: var(--nx-chart-2); } .nx-af-legend i[data-kind="paid"] { background: var(--nx-chart-6); } .nx-af-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-af-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; } .nx-af-legend i { width: 10px; height: 10px; border-radius: 3px; } .nx-af-legend span { display: grid; min-width: 0; font-size: var(--nx-text-sm); font-weight: 700; } .nx-af-legend small { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 650; } .nx-af-legend b { font-weight: 800; font-variant-numeric: tabular-nums; } .nx-af-panel-foot { justify-self: start; } /* Leaderboard & bar lists */ .nx-af-rank { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 850; } .nx-af-rank[data-rank="1"] { background: color-mix(in srgb, var(--nx-chart-5) 22%, transparent); color: var(--nx-warning-ink, var(--nx-text)); } .nx-af-rank[data-rank="2"] { background: color-mix(in srgb, var(--nx-chart-6) 22%, transparent); color: var(--nx-text); } .nx-af-rank[data-rank="3"] { background: color-mix(in srgb, var(--nx-chart-4) 18%, transparent); color: var(--nx-text); } .nx-af-bars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .nx-af-bars li { display: grid; gap: 5px; min-width: 0; } .nx-af-bars span { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; min-width: 0; } .nx-af-bars strong { min-width: 0; overflow-wrap: anywhere; font-size: var(--nx-text-sm); font-weight: 750; } .nx-af-bars em { color: var(--nx-muted); font-style: normal; font-weight: 650; } .nx-af-bars small { color: var(--nx-muted); font-size: var(--nx-text-xs); font-variant-numeric: tabular-nums; } .nx-af-bars i { display: block; height: 8px; min-width: 4px; border-radius: 4px; background: var(--nx-chart-2); } /* Profile */ .nx-af-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 14px 16px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg, 14px); background: var(--nx-surface); } .nx-af-hero__code { display: inline-flex; align-items: center; gap: 8px; } .nx-af-hero__code small, .nx-af-hero__meta { color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; } .nx-af-hero__meta { margin-left: auto; } .nx-af-form { display: grid; gap: 12px; } .nx-af-form__actions { display: flex; justify-content: flex-end; gap: 8px; } .nx-af-narrow { max-width: 220px; } .nx-af-link { display: flex; align-items: center; gap: 14px; min-width: 0; } .nx-af-link > div { display: grid; gap: 6px; min-width: 0; } .nx-af-link small { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.45; } .nx-af-link .nx-ws-copy-chip, .nx-af-link button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .nx-af-method { display: flex; align-items: center; gap: 12px; min-width: 0; } .nx-af-method > div { display: grid; min-width: 0; } .nx-af-method strong { font-size: var(--nx-text-sm); font-weight: 800; } .nx-af-method span { color: var(--nx-muted); font-size: var(--nx-text-xs); overflow-wrap: anywhere; } /* Payout dialog */ .nx-af-payout-dialog.is-wide { max-width: 760px; } .nx-af-payout-dialog .nx-dialog__foot { flex-wrap: wrap; row-gap: 8px; } .nx-af-payout { display: grid; gap: 16px; } .nx-af-payout__amount { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 16px; border-radius: var(--nx-radius-md); background: var(--nx-accent-soft); } .nx-af-payout__amount > span:first-child { flex-basis: 100%; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; text-transform: uppercase; letter-spacing: .04em; } .nx-af-payout__amount strong { font-size: 28px; font-weight: 850; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .nx-af-payout__form { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--nx-border-strong); border-radius: var(--nx-radius-md); } .nx-af-payout__form .nx-field__hint { margin: 0; } .nx-af-payout__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; } .nx-af-payout__bank { display: grid; gap: 10px; min-width: 0; } .nx-af-payout__bank h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--nx-text-sm); font-weight: 800; } .nx-af-payout__bank .nx-field__hint { margin: 0; } .nx-af-payout__qr { display: grid; justify-items: center; gap: 8px; width: 200px; } .nx-af-payout__qr small { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.4; text-align: center; } .nx-af-kv { display: grid; gap: 8px; margin: 0; } .nx-af-kv div { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; } .nx-af-kv dt { color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-af-kv dd { display: grid; min-width: 0; margin: 0; font-size: var(--nx-text-sm); font-weight: 750; } .nx-af-kv dd small { color: var(--nx-muted); font-size: var(--nx-text-2xs); font-weight: 650; } .nx-af-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-af-timeline li { display: grid; gap: 2px; padding: 8px 10px 8px 12px; border-left: 3px solid var(--nx-border); border-radius: 4px; background: var(--nx-surface-2); } .nx-af-timeline li[data-done] { border-left-color: var(--nx-success); } .nx-af-timeline li[data-tone="danger"] { border-left-color: var(--nx-danger); } .nx-af-timeline b { font-size: var(--nx-text-xs); font-weight: 800; } .nx-af-timeline span { color: var(--nx-muted); font-size: var(--nx-text-2xs); overflow-wrap: anywhere; } .nx-af-reason-box { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--nx-danger-soft, color-mix(in srgb, var(--nx-danger) 10%, transparent)); color: var(--nx-danger-ink); font-size: var(--nx-text-sm); } .nx-af-entries summary { cursor: pointer; color: var(--nx-accent-ink); font-size: var(--nx-text-sm); font-weight: 750; } .nx-af-entries ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; } .nx-af-entries li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--nx-surface-2); font-size: var(--nx-text-sm); } .nx-af-entries li span { display: grid; min-width: 0; } .nx-af-entries li small { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-xs); text-overflow: ellipsis; white-space: nowrap; } .nx-af-entries b { font-variant-numeric: tabular-nums; } /* Rules & programme */ .nx-af-rules-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .nx-af-howto ol { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: var(--nx-text-sm); line-height: 1.5; } .nx-af-howto .nx-field__hint { margin: 0; } .nx-af-programme { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } .nx-af-programme li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-af-programme li > span:nth-child(2) { display: grid; min-width: 0; } .nx-af-programme small { color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-af-programme strong { font-size: var(--nx-text-md, 15px); font-weight: 850; } .nx-af-programme em { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-style: normal; } .nx-af-programme code { grid-column: 2; justify-self: start; max-width: 100%; overflow: hidden; padding: 1px 6px; border-radius: 5px; background: var(--nx-surface-2); color: var(--nx-muted); font-size: 11px; overflow-wrap: anywhere; } @media (max-width: 1180px) { .nx-af-rules-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .nx-af-payout__grid { grid-template-columns: minmax(0, 1fr); } .nx-af-payout__qr { width: 100%; } .nx-af-kv div { grid-template-columns: minmax(0, 1fr); gap: 2px; } .nx-af-timeline { grid-template-columns: minmax(0, 1fr); } .nx-af-hero__meta { margin-left: 0; } .nx-af-link { flex-direction: column; align-items: flex-start; } .nx-af-entries li { grid-template-columns: auto minmax(0, 1fr) auto; } .nx-af-entries li .nx-badge { display: none; } .nx-af-partner { flex-wrap: wrap; } } /* ── Security Center (nx-sc-) ──────────────────────────────────────────────────────────────────────────────── */ .nx-sc-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .nx-sc-score { display: flex; align-items: center; gap: 16px; } .nx-sc-score > div:last-child { display: grid; gap: 2px; } .nx-sc-score strong { font-size: var(--nx-text-lg, 18px); font-weight: 850; } .nx-sc-score span { color: var(--nx-muted); font-size: var(--nx-text-sm); } .nx-sc-ring { --tone: var(--nx-success); display: grid; flex: none; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: conic-gradient(var(--tone) calc(var(--score) * 1%), var(--nx-surface-2) 0); } .nx-sc-ring[data-tone="warning"] { --tone: var(--nx-warning); } .nx-sc-ring[data-tone="danger"] { --tone: var(--nx-danger); } .nx-sc-ring > div { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--nx-surface); line-height: 1; } .nx-sc-ring strong { font-size: 26px; font-weight: 850; letter-spacing: -.03em; } .nx-sc-ring small { color: var(--nx-subtle); font-size: var(--nx-text-2xs); font-weight: 700; } .nx-sc-checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-sc-checks li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 10px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-sc-checks li[data-status="fail"] { border-color: color-mix(in srgb, var(--nx-danger) 45%, var(--nx-border)); background: color-mix(in srgb, var(--nx-danger) 5%, transparent); } .nx-sc-checks li[data-status="warn"] { border-color: color-mix(in srgb, var(--nx-warning) 45%, var(--nx-border)); } .nx-sc-checks__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--tone, var(--nx-accent)) 14%, transparent); color: var(--tone-ink, var(--tone, var(--nx-accent))); } .nx-sc-checks strong { display: block; font-size: var(--nx-text-sm); font-weight: 800; } .nx-sc-checks p { margin: 2px 0 0; color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.5; overflow-wrap: anywhere; } .nx-sc-checks code { display: inline-block; margin-top: 5px; padding: 1px 6px; border-radius: 5px; background: var(--nx-surface-2); color: var(--nx-muted); font-size: 11px; overflow-wrap: anywhere; } .nx-sc-checks .nx-sc-checks__done { display: flex; align-items: center; gap: 8px; border-style: dashed; color: var(--nx-success-ink, var(--nx-success)); font-size: var(--nx-text-sm); font-weight: 700; } .nx-sc-bar--ok { background: color-mix(in srgb, var(--nx-success) 75%, transparent); } .nx-sc-bar--failed { background: var(--nx-danger); } .nx-sc-bar__alert, .nx-mk-legend i.nx-sc-dot { position: absolute; top: 0; left: 50%; width: 8px; height: 8px; margin-left: -4px; border: 2px solid var(--nx-surface); border-radius: 50%; background: var(--nx-warning); } .nx-mk-legend i.nx-sc-dot { position: static; margin: 0; } .nx-mk-legend i.nx-sc-bar--ok, .nx-mk-legend i.nx-sc-bar--failed { width: 10px; height: 10px; border-radius: 3px; } .nx-sc-ip { font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 12.5px; } .nx-sc-ip.is-strong { font-weight: 800; } button.nx-sc-ip { padding: 0; } .nx-sc-events { display: grid; margin: 0; padding: 0; list-style: none; } .nx-sc-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--nx-border); } .nx-sc-event:last-child { border-bottom: 0; } .nx-sc-event__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nx-info); } .nx-sc-event[data-tone="success"] .nx-sc-event__dot { background: var(--nx-success); } .nx-sc-event[data-tone="warning"] .nx-sc-event__dot { background: var(--nx-warning); } .nx-sc-event[data-tone="danger"] .nx-sc-event__dot { background: var(--nx-danger); } .nx-sc-event > div { display: grid; min-width: 0; } .nx-sc-event strong { font-size: var(--nx-text-sm); font-weight: 750; } .nx-sc-event span { overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-xs); text-overflow: ellipsis; white-space: nowrap; } .nx-sc-event small { color: var(--nx-subtle); font-size: var(--nx-text-xs); white-space: nowrap; } .nx-sc-roles { display: flex; flex-wrap: wrap; gap: 4px; } .nx-sc-roles span { padding: 2px 8px; border-radius: 999px; background: var(--nx-surface-2); font-size: var(--nx-text-xs); font-weight: 700; } .nx-sc-roles span[data-super] { background: color-mix(in srgb, var(--nx-danger) 12%, transparent); color: var(--nx-danger-ink); } .nx-sc-warn { color: var(--nx-danger-ink) !important; } .nx-sc-agent { display: block; max-width: 180px; overflow: hidden; color: var(--nx-muted); font-size: var(--nx-text-sm); text-overflow: ellipsis; white-space: nowrap; } .nx-sc-myip { display: inline-flex; align-items: center; gap: 6px; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 700; } .nx-sc-myip code { color: var(--nx-text); } .nx-sc-expiry { flex-wrap: wrap; } .nx-sc-ips .nx-ps-col-time { width: auto; min-width: 90px; } @media (max-width: 1180px) { .nx-sc-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .nx-sc-checks li { grid-template-columns: auto minmax(0, 1fr); } .nx-sc-checks li .nx-badge { grid-column: 2; justify-self: start; } .nx-sc-event { grid-template-columns: auto minmax(0, 1fr); } .nx-sc-event small { grid-column: 2; } } /* ── Performance Center (nx-pf-) ───────────────────────────────────────────────────────────────────────────── */ .nx-pf-mono { font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 12.5px; } .nx-pf-chart .nx-mk-chart__bars { position: relative; } .nx-pf-chart__line { position: absolute; right: 0; left: 0; z-index: 1; border-top: 1px dashed color-mix(in srgb, var(--nx-danger) 70%, transparent); pointer-events: none; } .nx-pf-chart .nx-mk-chart__stack i, .nx-pf-sw, .nx-pf-bar { background: var(--nx-success); } .nx-pf-chart .nx-mk-chart__stack i[data-tone="warning"], .nx-pf-sw[data-tone="warning"], .nx-pf-bar[data-tone="warning"] { background: var(--nx-warning); } .nx-pf-chart .nx-mk-chart__stack i[data-tone="danger"], .nx-pf-sw[data-tone="danger"], .nx-pf-bar[data-tone="danger"] { background: var(--nx-danger); } .nx-mk-legend i.nx-pf-sw { width: 10px; height: 10px; border-radius: 3px; } .nx-pf-dist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-pf-dist li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: var(--nx-text-xs); } .nx-pf-dist span { color: var(--nx-muted); font-weight: 700; font-variant-numeric: tabular-nums; } .nx-pf-dist i { display: block; height: 10px; border-radius: 5px; background: var(--nx-success); } .nx-pf-dist li[data-tone="warning"] i { background: var(--nx-warning); } .nx-pf-dist li[data-tone="danger"] i { background: var(--nx-danger); } .nx-pf-dist b { text-align: right; font-variant-numeric: tabular-nums; } .nx-pf-route { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 460px; } .nx-pf-route b { flex: none; padding: 1px 6px; border-radius: 5px; background: var(--nx-info-soft, color-mix(in srgb, var(--nx-info) 14%, transparent)); color: var(--nx-info-ink, var(--nx-info)); font-size: 10.5px; font-weight: 850; letter-spacing: .03em; } .nx-pf-route b[data-method="POST"], .nx-pf-route b[data-method="PUT"], .nx-pf-route b[data-method="PATCH"] { background: color-mix(in srgb, var(--nx-warning) 16%, transparent); color: var(--nx-warning-ink, var(--nx-text)); } .nx-pf-route b[data-method="DELETE"] { background: color-mix(in srgb, var(--nx-danger) 14%, transparent); color: var(--nx-danger-ink); } .nx-pf-route code { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; } .nx-pf-routes { display: grid; gap: 2px; } .nx-pf-routes code { max-width: 280px; overflow: hidden; color: var(--nx-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; } .nx-pf-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; } .nx-pf-cardhead { padding: 14px 16px 4px; } .nx-pf-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .nx-pf-facts > div { display: grid; gap: 2px; min-width: 0; padding: 14px 16px; border: 1px solid var(--nx-border); border-left: 4px solid var(--nx-border-strong); border-radius: var(--nx-radius-md); background: var(--nx-surface); } .nx-pf-facts > div[data-tone="success"] { border-left-color: var(--nx-success); } .nx-pf-facts > div[data-tone="warning"] { border-left-color: var(--nx-warning); } .nx-pf-facts span { color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 750; text-transform: uppercase; letter-spacing: .04em; } .nx-pf-facts strong { overflow: hidden; font-size: 22px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .nx-pf-facts small { color: var(--nx-subtle); font-size: var(--nx-text-xs); } .nx-pf-alert { border-color: color-mix(in srgb, var(--nx-warning) 45%, var(--nx-border)); } .nx-pf-alert h2 { display: inline-flex; align-items: center; gap: 6px; } .nx-pf-scan { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .nx-pf-scan li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--nx-text-sm); } .nx-pf-scan code { font-weight: 800; } .nx-pf-scan span { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-pf-size { display: grid; grid-template-columns: minmax(40px, 1fr) auto; align-items: center; gap: 8px; min-width: 140px; } .nx-pf-size i { display: block; height: 8px; min-width: 3px; border-radius: 4px; background: var(--nx-chart-2); } .nx-pf-size b { font-size: var(--nx-text-sm); font-weight: 700; font-variant-numeric: tabular-nums; } .nx-pf-ns { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .nx-pf-ns li { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .nx-pf-ns label { display: flex; align-items: center; gap: 10px; min-width: 0; cursor: pointer; } .nx-pf-ns label > span:last-child { display: grid; min-width: 0; } .nx-pf-ns strong { font-size: var(--nx-text-sm); font-weight: 800; } .nx-pf-ns small { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-pf-ns code { flex: none; max-width: 110px; overflow: hidden; color: var(--nx-subtle); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .nx-pf-ring { width: 64px; height: 64px; } .nx-pf-ring > div { width: 50px; height: 50px; } .nx-pf-ring strong { font-size: 18px; } @media (max-width: 640px) { .nx-pf-dist li { grid-template-columns: 92px minmax(0, 1fr) 44px; } .nx-pf-route { max-width: 240px; } } .nx-pf-slowlist__row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); } .nx-pf-slowlist .nx-pf-route { max-width: 100%; } .nx-pf-slowlist .nx-mk-rows__main small { white-space: normal; } /* ── Blog block editor (nx-be-) ────────────────────────────────────────────────────────────────────────────── */ .nx-ps-prose .np-prose__callout { --tone: var(--nx-accent); padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--nx-border)); border-left: 4px solid var(--tone); border-radius: 10px; background: color-mix(in srgb, var(--tone) 7%, var(--nx-surface)); } .nx-ps-prose .np-prose__callout[data-tone="tip"], .nx-be__callout[data-tone="tip"] { --tone: var(--nx-success); } .nx-ps-prose .np-prose__callout[data-tone="warning"], .nx-be__callout[data-tone="warning"] { --tone: var(--nx-warning); } .nx-ps-prose .np-prose__callout[data-tone="important"], .nx-be__callout[data-tone="important"] { --tone: var(--nx-danger); } .nx-ps-prose .np-prose__callout-title { display: block; color: var(--tone); font-size: .8em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .nx-ps-prose .np-prose a.np-prose__button { display: inline-flex; padding: 10px 20px; border-radius: 999px; background: var(--nx-accent); color: #fff; font-weight: 700; text-decoration: none; } .nx-ps-prose .np-prose__video { position: relative; overflow: hidden; border-radius: 12px; background: #000; aspect-ratio: 16 / 9; } .nx-ps-prose .np-prose__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .nx-be { display: grid; gap: 10px; } .nx-be__bar { position: sticky; top: calc(var(--nx-topbar, 60px) + 64px); z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: color-mix(in srgb, var(--nx-surface) 92%, transparent); backdrop-filter: blur(8px); } .nx-be__history { display: inline-flex; gap: 2px; } .nx-be__redo svg { transform: scaleX(-1); } .nx-be__stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; color: var(--nx-muted); font-size: var(--nx-text-xs); font-weight: 650; } .nx-be__outline-wrap { position: relative; } .nx-be__outline { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10; display: grid; gap: 2px; width: min(320px, 80vw); max-height: 360px; overflow: auto; padding: 6px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface); box-shadow: var(--nx-shadow-lg, var(--nx-shadow)); } .nx-be__outline button { padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--nx-text); font: inherit; font-size: var(--nx-text-sm); text-align: left; cursor: pointer; } .nx-be__outline button:hover { background: var(--nx-surface-2); } .nx-be__outline button[data-level="3"] { padding-left: 22px; color: var(--nx-muted); } .nx-be__outline button[data-level="4"] { padding-left: 36px; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-be__outline p { margin: 0; padding: 8px; color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-be__canvas { display: grid; padding: 22px clamp(12px, 4vw, 56px) 18px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg, 14px); background: var(--nx-surface); min-height: 280px; } .nx-be__slot { position: relative; } .nx-be__block { position: relative; padding: 6px 10px; border: 1px solid transparent; border-radius: 10px; transition: border-color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease); } .nx-be__block:hover { border-color: var(--nx-border); } .nx-be__block:focus-within { border-color: color-mix(in srgb, var(--nx-accent) 55%, var(--nx-border)); background: color-mix(in srgb, var(--nx-accent) 3%, transparent); } .nx-be__toolbar { position: absolute; bottom: calc(100% - 4px); left: 6px; z-index: 3; display: none; align-items: center; gap: 2px; max-width: calc(100% - 12px); padding: 3px; border: 1px solid var(--nx-border-strong); border-radius: 9px; background: var(--nx-surface); box-shadow: var(--nx-shadow); } .nx-be__block:focus-within .nx-be__toolbar { display: flex; } .nx-be__handle { display: inline-grid; place-items: center; width: 22px; height: 26px; color: var(--nx-subtle); cursor: grab; } .nx-be__type, .nx-be__type-label { height: 26px; padding: 0 6px; border: 0; border-radius: 6px; background: var(--nx-surface-2); color: var(--nx-text); font: inherit; font-size: var(--nx-text-xs); font-weight: 750; } .nx-be__type-label { display: inline-flex; align-items: center; gap: 5px; } .nx-be__levels { display: inline-flex; gap: 1px; padding-left: 4px; margin-left: 2px; border-left: 1px solid var(--nx-border); } .nx-be__levels button, .nx-be__tool { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; border: 0; border-radius: 6px; background: none; color: var(--nx-muted); font: inherit; font-size: var(--nx-text-xs); font-weight: 800; cursor: pointer; } .nx-be__levels button:hover, .nx-be__tool:hover:not(:disabled) { background: var(--nx-surface-2); color: var(--nx-text); } .nx-be__levels button[aria-pressed="true"] { background: var(--nx-accent-soft); color: var(--nx-accent-ink); } .nx-be__tool:disabled { opacity: .35; cursor: default; } .nx-be__spacer { flex: 1 1 8px; } .nx-be__text { display: block; width: 100%; min-height: 1.75em; padding: 0; border: 0; outline: 0; background: transparent; color: var(--nx-text); font: inherit; font-size: 16px; line-height: 1.75; resize: none; field-sizing: content; overflow: hidden; } .nx-be__text::placeholder { color: var(--nx-subtle); } .nx-be__text:focus, .nx-be__text:focus-visible { outline: 0; border: 0; box-shadow: none; } .nx-be__heading .nx-be__text { font-weight: 800; letter-spacing: -.015em; line-height: 1.3; } .nx-be__heading[data-level="2"] .nx-be__text { font-size: 1.45em; } .nx-be__heading[data-level="3"] .nx-be__text { font-size: 1.2em; } .nx-be__heading[data-level="4"] .nx-be__text { font-size: 1.05em; } .nx-be__block[data-type="heading"] { margin-top: 10px; } .nx-be__list { position: relative; padding-left: 22px; } .nx-be__list::before { content: "•"; position: absolute; left: 6px; top: 0; color: var(--nx-subtle); line-height: 1.75; } .nx-be__list[data-ordered]::before { content: "1."; left: 0; font-size: 13px; font-weight: 700; } .nx-be__quote { padding-left: 14px; border-left: 3px solid color-mix(in srgb, var(--nx-accent) 45%, var(--nx-border)); color: var(--nx-muted); font-style: italic; } .nx-be__callout { --tone: var(--nx-accent); display: grid; gap: 4px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--nx-border)); border-left: 4px solid var(--tone); border-radius: 10px; background: color-mix(in srgb, var(--tone) 7%, var(--nx-surface)); } .nx-be__callout strong { color: var(--tone); font-size: 11px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .nx-be__code { padding: 10px 12px; border-radius: 8px; background: var(--nx-surface-2); font-family: var(--nx-font-mono, ui-monospace, monospace); font-size: 13px; line-height: 1.6; } .nx-be__divider { height: 1px; margin: 14px 0; border: 0; background: var(--nx-border-strong); } .nx-be__media { display: grid; gap: 8px; } .nx-be__media figure { margin: 0; } .nx-be__media img { display: block; max-width: 100%; max-height: 420px; margin: 0 auto; border-radius: 10px; } .nx-be__placeholder { display: grid; justify-items: center; gap: 8px; padding: 22px; border: 1px dashed var(--nx-border-strong); border-radius: 10px; background: var(--nx-surface-2); color: var(--nx-muted); font-size: var(--nx-text-sm); text-align: center; } .nx-be__video { position: relative; overflow: hidden; border-radius: 10px; background: #000; aspect-ratio: 16 / 9; } .nx-be__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .nx-be__fields { display: flex; flex-wrap: wrap; gap: 8px; } .nx-be__fields .nx-input { flex: 1 1 220px; min-width: 0; } .nx-be__button { display: grid; justify-items: start; gap: 8px; } .nx-be__button-preview { display: inline-flex; padding: 10px 20px; border-radius: 999px; background: var(--nx-accent); color: #fff; font-weight: 700; } .nx-be__button-preview::after { content: " →"; white-space: pre; } .nx-be__between { position: relative; z-index: 2; height: 10px; } .nx-be__between button { position: absolute; top: -7px; left: 50%; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-left: -12px; padding: 0; border: 0; border-radius: 50%; background: var(--nx-accent); color: #fff; opacity: 0; cursor: pointer; transition: opacity var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease); } .nx-be__between:hover button, .nx-be__between button:focus-visible { opacity: 1; transform: scale(1.08); } .nx-be__between::before { content: ""; position: absolute; top: 4px; right: 10px; left: 10px; height: 2px; border-radius: 2px; background: var(--nx-accent); opacity: 0; } .nx-be__between:hover::before { opacity: .35; } .nx-be__drop { height: 3px; margin: 2px 10px; border-radius: 3px; background: var(--nx-accent); } .nx-be__append { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px dashed var(--nx-border); border-radius: 10px; background: none; color: var(--nx-subtle); font: inherit; font-size: var(--nx-text-sm); text-align: left; cursor: text; } .nx-be__append:hover { border-color: var(--nx-accent); color: var(--nx-accent-ink); } .nx-be__patterns-start { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 12px; } .nx-be__patterns-start button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 11px 12px; border: 1px solid var(--nx-border); border-radius: var(--nx-radius-md); background: var(--nx-surface-2); color: var(--nx-text); text-align: left; white-space: normal; cursor: pointer; } .nx-be__patterns-start button:hover { border-color: var(--nx-accent); background: var(--nx-accent-soft); } .nx-be__patterns-start span { display: inline-grid; grid-row: span 2; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--nx-surface); color: var(--nx-accent-ink); } .nx-be__patterns-start strong { font-size: var(--nx-text-sm); font-weight: 800; } .nx-be__patterns-start small { color: var(--nx-muted); font-size: var(--nx-text-xs); } .nx-be__preview { padding: 22px clamp(12px, 4vw, 56px); border: 1px solid var(--nx-border); border-radius: var(--nx-radius-lg, 14px); background: var(--nx-surface); } .nx-be__help { margin: 0; } .nx-be__inserter { width: min(560px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 80px)); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; } .nx-be__inserter-search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--nx-border); color: var(--nx-muted); } .nx-be__inserter-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--nx-text); font: inherit; font-size: var(--nx-text-md, 15px); } .nx-be__inserter-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; overflow: auto; padding: 10px; } .nx-be__inserter-list button { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 10px; align-items: center; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--nx-text); text-align: left; white-space: normal; cursor: pointer; } .nx-be__inserter-list button[aria-selected="true"] { border-color: var(--nx-accent); background: var(--nx-accent-soft); } .nx-be__inserter-list button > span { display: inline-grid; grid-row: span 2; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--nx-surface-2); color: var(--nx-accent-ink); } .nx-be__inserter-list button[data-pattern] > span { background: color-mix(in srgb, var(--nx-chart-4) 14%, transparent); color: var(--nx-chart-4); } .nx-be__inserter-list strong { display: flex; align-items: center; gap: 6px; font-size: var(--nx-text-sm); font-weight: 800; } .nx-be__inserter-list em { padding: 0 6px; border-radius: 999px; background: var(--nx-surface-2); color: var(--nx-muted); font-size: 10px; font-style: normal; font-weight: 800; } .nx-be__inserter-list small { color: var(--nx-muted); font-size: var(--nx-text-xs); line-height: 1.35; } @media (max-width: 640px) { .nx-be__bar { position: static; } .nx-be__stats { margin-left: 0; } .nx-be__inserter-list { grid-template-columns: minmax(0, 1fr); } .nx-be__toolbar { position: static; display: flex; flex-wrap: wrap; margin-bottom: 4px; box-shadow: none; } .nx-be__block:not(:focus-within) .nx-be__toolbar { display: none; } }