/* ========================================================================== Ricochet web UI LuciRift blue-glass product skin ========================================================================== */ :root { /* ── Lumen system — same tokens as lucirift.com (main.css). The console inherits the public brand instead of running its own palette; accent stays runtime-overridable on for future white-label instances. ── */ --accent-color: #00318a; --accent-rgb: 0, 49, 138; --accent-strong: color-mix(in srgb, var(--accent-color) 70%, #ffffff); --accent-soft: color-mix(in srgb, var(--accent-color) 45%, #aab8ff); --accent-dark: color-mix(in srgb, var(--accent-color) 70%, #000000); --success: #4ade80; --success-rgb: 74, 222, 128; --warning: #fbbf24; --warning-rgb: 251, 191, 36; --danger: #f87171; --danger-rgb: 248, 113, 113; --info: #60a5fa; --info-rgb: 96, 165, 250; /* Surfaces — lifted, blue-shifted blacks */ --bg: #05060d; --bg-2: #070912; --bg-3: #0b0e18; --surface: #0b0e18; --surface-elevated: #10141f; --surface-2: #161b29; --surface-3: #1c2233; --panel: rgba(16, 20, 31, .88); --panel-solid: #10141f; --panel-raised: #161b29; --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .24); --text-primary: #f6f8ff; --text-secondary: #c5cddf; --text-muted: #8b95aa; --text-faint: #5b6478; /* Console-only layout dimensions (no public-site equivalent) */ --radius-card: .875rem; --radius-card-lg: 1.125rem; --nav-h: 64px; --sidebar-w: 260px; --page-pad-x: clamp(1rem, 3vw, 2rem); --content-max: 1488px; --shadow-1: 0 3px 6px rgba(0, 0, 0, .26), 0 22px 56px -14px rgba(0, 0, 0, .60); --shadow-2: 0 4px 10px rgba(0, 0, 0, .26), 0 34px 80px -16px rgba(0, 0, 0, .65); --inset-1: inset 0 1px 0 rgba(255, 255, 255, .055); --blue-glow: 0 0 34px rgba(var(--accent-rgb), .16); --blue-edge: inset 0 1px 0 rgba(255, 255, 255, .065), inset 0 0 0 1px rgba(var(--accent-rgb), .09); /* ── Lumen's own names, so new/shared components can be written exactly like main.css instead of translating through the console aliases above. ── */ --bg-base: var(--bg); --bg-dark: var(--bg-2); --bg-surface: var(--bg-3); --bg-card: var(--surface-elevated); --bg-raised: var(--surface-2); --bg-elevated: var(--surface-3); --bg-overlay: rgba(4, 6, 14, .72); --glass-1: rgba(255, 255, 255, .045); --glass-2: rgba(255, 255, 255, .075); --glass-3: rgba(255, 255, 255, .11); --glass-border: rgba(var(--accent-rgb), .12); --glass-blur-sm: 10px; --glass-blur-md: 18px; --glass-blur-lg: 28px; --mesh-page: radial-gradient(900px 600px at 85% -10%, rgba(var(--accent-rgb), .10), transparent 60%), radial-gradient(700px 500px at -10% 30%, rgba(var(--accent-rgb), .06), transparent 55%), radial-gradient(1200px 800px at 50% 110%, rgba(var(--accent-rgb), .05), transparent 60%); --border-subtle: rgba(255, 255, 255, .09); --border-moderate: rgba(var(--accent-rgb), .2); --border-accent: 1px solid rgba(var(--accent-rgb), .28); --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 22px; --radius-3xl: 26px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px -12px rgba(0, 0, 0, .50); --shadow-md: 0 2px 4px rgba(0, 0, 0, .28), 0 14px 36px -12px rgba(0, 0, 0, .55); --shadow-lg: var(--shadow-1); --shadow-xl: var(--shadow-2); --glow-sm: 0 0 24px rgba(var(--accent-rgb), .10); --glow-md: 0 0 40px rgba(var(--accent-rgb), .22); --glow-lg: 0 0 70px rgba(var(--accent-rgb), .22), 0 0 140px rgba(var(--accent-rgb), .10); --shadow-heat: var(--glow-md); --shadow-forge-lift: var(--shadow-lg), var(--glow-sm); --shadow-accent: 0 0 40px rgba(var(--accent-rgb), .18), 0 4px 24px rgba(0, 0, 0, .55); --shadow-glow-lg: var(--glow-lg); /* Tailwind utility channels (rgb triplets so tailwind-config.js's /alpha modifiers work) */ --util-dark-rgb: 5 6 13; --util-dark-lighter-rgb: 11 14 24; --util-dark-card-rgb: 16 20 31; --util-dark-border-rgb: 42 48 66; --util-text-primary-rgb: 246 248 255; --util-text-secondary-rgb: 197 205 223; --util-text-muted-rgb: 139 149 170; --util-bone-rgb: 248 251 255; --util-radius-3xl: var(--radius-3xl); --ease-smooth: cubic-bezier(.22, .61, .36, 1); --ease-decelerate: cubic-bezier(.16, 1, .3, 1); --ease-spring: cubic-bezier(.2, .9, .27, 1); --transition-fast: .15s var(--ease-smooth); --transition-base: .22s var(--ease-smooth); --transition-slow: .38s var(--ease-decelerate); --font-body: "Instrument Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-display: "Instrument Sans", Inter, system-ui, sans-serif; --font-ui: "Instrument Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; } * { box-sizing: border-box; } html { min-height: 100%; overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: stable; } html, body { min-height: 100%; visibility: visible !important; opacity: 1 !important; } body { margin: 0; color: var(--text-primary); background: var(--mesh-page), linear-gradient(180deg, var(--bg-base) 0%, #04050b 48%, var(--bg-dark) 100%); font-family: var(--font-body); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2 { font-family: var(--font-display); letter-spacing: -.01em; } h3, h4, h5, h6 { font-family: var(--font-ui); letter-spacing: -.01em; } h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid rgba(var(--accent-rgb), .7); outline-offset: 3px; border-radius: 6px; } .tabular-nums { font-variant-numeric: tabular-nums; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 10% 16%, rgba(var(--accent-rgb), .8) 0 1px, transparent 1.6px), radial-gradient(circle at 31% 84%, rgba(var(--accent-rgb), .7) 0 1px, transparent 1.7px), radial-gradient(circle at 73% 32%, rgba(var(--accent-rgb), .72) 0 1px, transparent 1.6px), radial-gradient(circle at 88% 76%, rgba(var(--accent-rgb), .54) 0 1px, transparent 1.7px), linear-gradient(rgba(var(--accent-rgb), .024) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), .018) 1px, transparent 1px); background-size: 520px 520px, 620px 620px, 740px 740px, 680px 680px, 64px 64px, 64px 64px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .95), rgba(0, 0, 0, .68) 72%, transparent 100%); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(var(--accent-rgb), .20), transparent 17%, transparent 83%, rgba(var(--accent-rgb), .18)), radial-gradient(ellipse at center top, rgba(var(--accent-rgb), .09), transparent 42rem); opacity: .72; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font-family: inherit; } button { cursor: pointer; } img, svg { display: block; max-width: 100%; } code, pre, kbd { font-family: var(--font-mono); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), .82); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent-strong); } ::selection { background: rgba(var(--accent-rgb), .32); color: #fff; } /* Compatibility utilities */ .container, .container-xl { width: 100%; max-width: var(--content-max); margin-left: auto; margin-right: auto; } .container-xl, .container { padding-left: var(--page-pad-x); padding-right: var(--page-pad-x); } .page { min-height: 100vh; display: flex; flex-direction: column; } .page-wrapper { flex: 1; min-width: 0; display: flex; flex-direction: column; } .page-body { flex: 1; padding: 1.35rem 0 2rem; animation: page-enter .4s var(--ease-decelerate) both; } .downloads-page-body { padding-bottom: 2.75rem; } @keyframes page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .page-body { animation: none; } } .text-accent { color: var(--accent-strong) !important; } .bg-accent { background-color: var(--accent-color) !important; } .bg-primary { background-color: var(--accent-color) !important; } .text-success { color: var(--success) !important; } .text-danger { color: var(--danger) !important; } .text-muted { color: var(--text-muted) !important; } .small { font-size: .8125rem; } .rounded-card { border-radius: var(--radius-card); } .rounded-card-lg { border-radius: var(--radius-card-lg); } .list-unstyled { list-style: none; margin: 0; padding: 0; } .font-weight-medium { font-weight: 700; } .text-nowrap, .whitespace-nowrap { white-space: nowrap; } .text-end { text-align: right; } .w-1 { width: 2.5rem; } .w-100 { width: 100% !important; } .h-100 { height: 100%; } .relative { position: relative; } .icon { width: 1.15rem; height: 1.15rem; } /* Brand mark */ .brand-mark { width: 42px; height: 42px; flex: 0 0 auto; color: var(--accent-strong); filter: drop-shadow(0 0 16px rgba(var(--accent-rgb), .42)); } .brand-mark--mini { width: 29px; height: 29px; } .brand-mark--nav { width: 38px; height: 38px; } .brand-mark--footer { width: 40px; height: 40px; } .brand-mark--hero { width: clamp(9.25rem, 15vw, 13.75rem); height: auto; } .brand-mark__body { fill: rgba(var(--accent-rgb), .07); stroke-width: 5; } .brand-mark__shackle, .brand-mark__key, .brand-mark__key-bow { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; } .brand-mark__key-wrap { filter: drop-shadow(0 0 7px rgba(var(--accent-rgb), .28)); } .brand-mark__shackle { stroke-linecap: butt; } .brand-mark__soft-glow { fill: none; stroke: rgba(var(--accent-rgb), .28); stroke-width: 7.5; stroke-linecap: round; stroke-linejoin: round; opacity: .38; } .brand-mark__soft-glow rect { fill: rgba(var(--accent-rgb), .08); } .brand-mark__shine { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 2.25; stroke-linecap: round; opacity: .36; } /* Shared primitives */ .card-surface, .modal-content, .docs-section { position: relative; color: var(--text-primary); background: linear-gradient(180deg, rgba(255, 255, 255, .078), rgba(255, 255, 255, .018) 48%, rgba(255, 255, 255, .028)), linear-gradient(135deg, rgba(var(--accent-rgb), .095), transparent 42%), rgba(11, 17, 29, .90); border: 1px solid rgba(var(--accent-rgb), .18); border-radius: var(--radius-card-lg); box-shadow: var(--blue-edge), var(--shadow-1); } .card-surface::before, .docs-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .045), transparent 42%), linear-gradient(90deg, rgba(var(--accent-rgb), .07), transparent 28%, transparent 72%, rgba(var(--accent-rgb), .035)); opacity: .72; } .card-surface::after, .docs-section::after { content: ""; position: absolute; left: 1.25rem; right: 1.25rem; top: -1px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .55), transparent); opacity: .48; } .card-surface > *, .docs-section > * { position: relative; z-index: 1; } .card-surface-hover { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .card-surface-hover:hover { border-color: rgba(var(--accent-rgb), .45); box-shadow: var(--blue-edge), var(--shadow-2), 0 0 48px rgba(var(--accent-rgb), .18); transform: translateY(-2px); } .section-heading { margin: 0; color: #fff; font-size: clamp(2rem, 4.2vw, 3.45rem); font-weight: 900; letter-spacing: 0; line-height: 1.02; text-wrap: balance; text-shadow: 0 16px 42px rgba(0, 0, 0, .42); } .section-subheading { max-width: 680px; margin: .8rem auto 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.65; } .section-label, .eyebrow-pill { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 26px; padding: .24rem .72rem; color: var(--accent-strong); border: 1px solid rgba(var(--accent-rgb), .26); border-radius: var(--radius-full); background: rgba(var(--accent-rgb), .1); font-family: var(--font-ui); font-size: .68rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 0 24px rgba(var(--accent-rgb), .08); } .eyebrow-pill { margin-bottom: .9rem; } .eyebrow-pill i { font-size: .68rem; } .section-label-dot { width: 4px; height: 4px; border-radius: .78rem; background: var(--accent-strong); box-shadow: 0 0 14px rgba(var(--accent-rgb), .72); } /* Owner bootstrap — lightweight first-run notice (login page only; no gate) */ .owner-claim-note { max-width: 360px; margin: 0 auto 1.1rem; text-align: center; } .owner-claim-note .eyebrow-pill { margin-bottom: .6rem; } .owner-claim-note p { margin: 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.5; } /* Buttons */ .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-danger, .nav-signin { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .52rem; border-radius: 999px; padding: .7rem 1.08rem; border: 1px solid transparent; font-size: .82rem; font-weight: 900; letter-spacing: 0; text-transform: none; line-height: 1; white-space: nowrap; transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease, box-shadow .16s ease; } .btn:hover, .btn-primary:hover, .btn-secondary:hover, .btn-outline:hover, .btn-danger:hover, .nav-signin:hover { transform: translateY(-1px); } .btn:active, .btn-primary:active, .btn-secondary:active, .btn-outline:active, .btn-danger:active, .nav-signin:active { transform: scale(.97); } .btn-primary, .btn.btn-primary, .nav-signin { color: #fff; border-color: rgba(255, 255, 255, .13); background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, 0) 42%), linear-gradient(180deg, var(--accent-strong), var(--accent-dark)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(var(--accent-rgb), .2), 0 12px 30px rgba(var(--accent-rgb), .28); } .btn-primary:hover, .btn.btn-primary:hover, .nav-signin:hover { border-color: rgba(255, 255, 255, .22); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .24), 0 16px 36px rgba(var(--accent-rgb), .32); } .nav-signin { min-height: 38px; padding: .58rem .86rem; font-size: .78rem; } .nav-signin i { font-size: .82rem; } .btn-secondary, .btn-outline, .btn.btn-outline { color: #f2f3f4; border-color: var(--border); background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .022)), rgba(19, 22, 28, .78); box-shadow: var(--inset-1); } .btn-secondary:hover, .btn-outline:hover, .btn.btn-outline:hover { color: #fff; border-color: var(--border-strong); background: rgba(255, 255, 255, .07); } .btn-danger, .btn.btn-danger { color: #fff; border-color: rgba(255, 255, 255, .14); background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 42%), linear-gradient(180deg, #ff3944, #a8060e); box-shadow: 0 14px 34px rgba(255, 40, 50, .22); } .btn-sm, .btn.btn-sm { min-height: 32px; padding: .43rem .58rem; font-size: .7rem; border-radius: 999px; } .btn-icon { width: 38px; padding-left: 0; padding-right: 0; } .btn.disabled, .btn:disabled, button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; } /* Public navigation */ .public-nav { padding-top: .75rem; background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; } .public-nav .container { max-width: 1320px; } .public-nav-inner { position: relative; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .42rem .5rem .42rem .72rem; border: 1px solid rgba(var(--accent-rgb), .20); border-radius: .95rem; background: linear-gradient(180deg, rgba(23, 32, 49, .84), rgba(7, 11, 19, .82)), rgba(4, 8, 15, .70); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 16px 42px rgba(0, 0, 0, .36), 0 0 0 1px rgba(var(--accent-rgb), .045); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .public-brand, .console-brand, .console-mobile-brand { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; } .public-brand strong, .console-brand strong, .footer-brand strong, .console-mobile-brand span { display: block; color: #fff; font-size: .94rem; font-weight: 850; letter-spacing: 0; text-transform: none; line-height: 1; } .public-brand small, .console-brand small, .footer-brand small { display: block; margin-top: .22rem; color: var(--accent-strong); font-size: .52rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .console-menu-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .018)), rgba(12, 15, 20, .78); color: var(--text-secondary); } .console-menu-btn:hover { color: #fff; border-color: var(--border-strong); background: rgba(255, 255, 255, .07); } .console-mobile-drawer { display: grid; grid-template-rows: 0fr; height: 0; overflow: hidden; pointer-events: none; visibility: hidden; transition: grid-template-rows .22s var(--ease-smooth); } .console-mobile-drawer.open { grid-template-rows: 1fr; height: auto; overflow: visible; pointer-events: auto; visibility: visible; } .console-mobile-panel { overflow: hidden; border-top: 1px solid var(--border); padding: .55rem 0 .8rem; } body.menu-open { overflow: hidden; } /* Console shell */ .console-shell-nav { display: contents; } .console-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--sidebar-w); display: flex; flex-direction: column; background: radial-gradient(circle at 0 15%, rgba(var(--accent-rgb), .14), transparent 13rem), var(--bg-dark); border-right: 1px solid var(--border); box-shadow: 18px 0 50px rgba(0, 0, 0, .38); transition: width var(--transition-base); } .console-brand { min-height: 76px; padding: 1rem 1rem .9rem; border-bottom: 1px solid var(--border); } .console-sidebar-status { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; margin: .8rem .75rem 0; padding: .72rem; border: 1px solid rgba(var(--accent-rgb), .14); border-radius: .78rem; background: rgba(var(--accent-rgb), .07); } .console-sidebar-status div { min-width: 0; } .console-sidebar-status strong { display: block; overflow: hidden; color: #fff; font-size: .78rem; font-weight: 900; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .console-sidebar-status small { display: block; margin-top: .14rem; color: var(--text-muted); font-size: .68rem; font-weight: 800; text-transform: capitalize; } .console-nav-list { flex: 1; display: flex; flex-direction: column; gap: .18rem; padding: .85rem .75rem; overflow-y: auto; } .console-nav-section, .mobile-menu-section { margin: .74rem .58rem .28rem; color: var(--accent-soft); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .console-nav-section:first-child, .mobile-menu-section:first-child { margin-top: .22rem; } .console-nav-link span { min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .console-nav-link strong { overflow: hidden; color: inherit; font-size: .8rem; font-weight: 900; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; } .console-nav-link small { overflow: hidden; color: var(--text-muted); font-size: .65rem; font-weight: 750; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; } .console-nav-link, .mobile-link { position: relative; min-height: 42px; display: flex; align-items: center; gap: .72rem; padding: .62rem .75rem; border-radius: .66rem; color: var(--text-secondary); font-size: .8rem; font-weight: 850; letter-spacing: .02em; line-height: 1; transition: color .16s var(--ease-smooth), background .16s var(--ease-smooth), box-shadow .16s var(--ease-smooth), transform .12s var(--ease-smooth); } .console-nav-link i, .mobile-link i { width: 1.1rem; color: var(--text-muted); text-align: center; font-size: .82rem; transition: color .16s var(--ease-smooth); } .console-nav-link:hover, .mobile-link:hover { color: #fff; background: rgba(255, 255, 255, .052); } .console-nav-link:active, .mobile-link:active { transform: scale(.98); } .console-nav-link.active, .mobile-link.active { color: #fff; background: linear-gradient(90deg, rgba(var(--accent-rgb), .28), rgba(var(--accent-rgb), .06)); } .console-nav-link.active::before { content: ""; position: absolute; left: -.75rem; top: .3rem; bottom: .3rem; width: 3px; border-radius: var(--radius-full); background: var(--accent-strong); box-shadow: 0 0 12px rgba(var(--accent-rgb), .6); } .console-nav-link.active i, .mobile-link.active i { color: var(--accent-strong); } .console-sidebar-foot { padding: .75rem; border-top: 1px solid var(--border); } .console-collapse { width: 100%; min-height: 36px; display: inline-flex; align-items: center; gap: .68rem; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font-size: .8rem; font-weight: 800; } .console-collapse:hover { color: #fff; background: rgba(255, 255, 255, .055); } .console-topbar { position: sticky; top: 0; z-index: 55; margin-left: var(--sidebar-w); padding: .65rem var(--page-pad-x); background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; transition: margin-left var(--transition-base); } .console-topbar-inner { min-height: 50px; display: flex; align-items: center; gap: .85rem; padding: .32rem .42rem .32rem .85rem; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: .95rem; background: linear-gradient(180deg, rgba(20, 29, 45, .86), rgba(7, 11, 19, .80)), rgba(3, 7, 13, .72); box-shadow: 0 16px 42px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .06); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .console-context { min-width: 150px; min-height: 42px; display: flex; flex-direction: column; justify-content: center; gap: .08rem; } .console-context span { color: var(--accent-soft); font-size: .62rem; font-weight: 900; letter-spacing: .1em; line-height: 1; text-transform: uppercase; } .console-context strong { color: #fff; font-size: .95rem; font-weight: 900; line-height: 1.05; } .console-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .55rem; } .console-user-btn { min-height: 42px; display: inline-flex; align-items: center; gap: .62rem; padding: .36rem .55rem; border: 1px solid var(--border); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .018)), rgba(13, 16, 20, .82); color: #fff; } .console-user-btn:hover { border-color: var(--border-strong); background: rgba(255, 255, 255, .065); } .console-user-copy { display: flex; flex-direction: column; align-items: flex-start; gap: .08rem; } .console-user-copy strong { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; line-height: 1.05; } .console-user-copy small { color: var(--text-muted); font-size: .67rem; font-weight: 800; text-transform: capitalize; } .console-mobile-brand { display: none; } .page:has(.console-shell-nav) .page-wrapper { margin-left: var(--sidebar-w); min-height: calc(100vh - var(--nav-h)); transition: margin-left var(--transition-base); } @media (prefers-reduced-motion: reduce) { .console-sidebar, .console-topbar, .page:has(.console-shell-nav) .page-wrapper { transition: none; } } .page:has(.console-shell-nav) .page-wrapper > .page-body .container, .page:has(.console-shell-nav) .page-wrapper > .sub-page-hero .container { max-width: none; } body.console-collapsed { --sidebar-w: 78px; } body.console-collapsed .console-brand span, body.console-collapsed .console-nav-link span, body.console-collapsed .console-collapse span, body.console-collapsed .console-sidebar-status, body.console-collapsed .console-nav-section { display: none; } body.console-collapsed .console-brand, body.console-collapsed .console-nav-link, body.console-collapsed .console-collapse { justify-content: center; } @media (max-width: 1023px) { .console-sidebar { display: none; } .console-topbar { margin-left: 0; } .page:has(.console-shell-nav) .page-wrapper { margin-left: 0; } .console-context { display: none; } .console-mobile-brand { display: inline-flex; } } @media (max-width: 639px) { .console-user-copy, .hidden-sm { display: none; } } /* Landing */ .landing-hero { min-height: calc(100vh - var(--nav-h)); position: relative; display: flex; align-items: flex-start; overflow: hidden; padding: clamp(6.4rem, 9vw, 8.4rem) 0 clamp(2.6rem, 4vw, 4rem); border-bottom: 1px solid var(--border); } .landing-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(var(--accent-rgb), .12), transparent 22%, transparent 78%, rgba(var(--accent-rgb), .09)), radial-gradient(circle at 56% 34%, rgba(var(--accent-rgb), .18), transparent 19rem); } .landing-hero > .container { max-width: var(--content-max); } .hero-grid { background-image: linear-gradient(rgba(255, 255, 255, .024) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px); background-size: 58px 58px; } .landing-hero-grid { display: grid; grid-template-columns: minmax(0, 520px) minmax(520px, 1fr); align-items: center; gap: clamp(2.4rem, 6vw, 7rem); } .hero-copy { min-width: 0; } .hero-title { max-width: 500px; margin: 0; color: #fff; font-size: clamp(2.85rem, 4.2vw, 5.15rem); font-weight: 900; letter-spacing: 0; line-height: 1.04; text-wrap: balance; text-shadow: 0 20px 54px rgba(0, 0, 0, .56); } .hero-lead { max-width: 500px; color: var(--text-secondary); font-size: clamp(1rem, 1.16vw, 1.16rem); line-height: 1.62; } .hero-emblem-frame { position: relative; min-height: 390px; display: grid; place-items: center; isolation: isolate; } .hero-emblem-frame::before { content: ""; position: absolute; width: min(72%, 410px); aspect-ratio: 1; z-index: -1; border-radius: 999px; background: radial-gradient(circle, rgba(var(--accent-rgb), .24), rgba(var(--accent-rgb), .08) 38%, transparent 70%); filter: blur(8px); } .hero-emblem { position: relative; z-index: 2; display: grid; place-items: center; } .hero-dashboard-ghost { position: absolute; inset: 0; width: min(100%, 610px); height: 306px; margin: auto; z-index: 1; overflow: hidden; opacity: .72; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 1.1rem; background: linear-gradient(90deg, transparent 0 42%, rgba(4, 5, 7, .74) 72%), linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01)), repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 34px), #0a0d12; box-shadow: var(--blue-edge), 0 22px 58px rgba(0, 0, 0, .54); transform: perspective(980px) rotateY(-10deg) rotateX(3deg) translateX(2.2rem); } .hero-dashboard-ghost::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(var(--accent-rgb), .12), transparent 40%), radial-gradient(circle at 31% 45%, rgba(var(--accent-rgb), .24), transparent 11rem); } .hero-dashboard-top { position: relative; z-index: 1; height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 .9rem; border-bottom: 1px solid rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .52); font-size: .65rem; font-weight: 850; } .hero-dashboard-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; padding: .8rem .9rem .6rem; margin-left: 13.5rem; } .hero-metric { min-height: 58px; padding: .55rem; border: 1px solid rgba(255, 255, 255, .075); background: rgba(0, 0, 0, .22); } .hero-metric small { display: block; color: rgba(255, 255, 255, .38); font-size: .58rem; font-weight: 850; } .hero-metric strong { display: block; margin-top: .28rem; color: rgba(255, 255, 255, .72); font-size: .92rem; } .hero-chart-line { position: relative; z-index: 1; height: 72px; margin: .2rem .9rem .7rem 15rem; border: 1px solid rgba(255, 255, 255, .065); background: linear-gradient(140deg, transparent 0 20%, rgba(var(--accent-rgb), .18) 21% 22%, transparent 23% 36%, rgba(var(--accent-rgb), .22) 37% 38%, transparent 39% 55%, rgba(var(--accent-rgb), .2) 56% 57%, transparent 58%), linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .08)); } .hero-table-lines { position: relative; z-index: 1; display: grid; gap: .55rem; margin: 0 .9rem 0 15rem; } .hero-table-lines span { height: 9px; border-radius: 99px; background: linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04)); } .hero-table-lines span:nth-child(2) { width: 83%; } .hero-table-lines span:nth-child(3) { width: 92%; } .hero-table-lines span:nth-child(4) { width: 70%; } .landing-preview-row { position: relative; margin-top: clamp(1.3rem, 2.4vw, 2rem); } .landing-preview-title { margin: 0 0 .85rem; color: #fff; text-align: center; font-size: .98rem; font-weight: 900; letter-spacing: .01em; } .landing-feature-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .landing-feature-strip .card-surface { min-height: 96px; display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.25rem; } .landing-feature-strip h3 { margin: 0 0 .28rem; color: #fff; font-size: .94rem; font-weight: 850; } .landing-feature-strip p { margin: 0; color: var(--text-secondary); font-size: .8rem; line-height: 1.45; } .landing-feature-grid { max-width: 1120px; margin-left: auto; margin-right: auto; } .landing-feature-grid .feature-card { min-height: 156px; padding: 1.35rem !important; } .landing-feature-grid .feature-icon { width: 2.55rem; height: 2.55rem; border-radius: .72rem; } .landing-feature-grid h3 { margin-bottom: .45rem !important; font-size: .98rem; } .landing-audience-grid { max-width: 1040px; margin-left: auto; margin-right: auto; } .landing-audience-grid .card-surface { min-height: 216px; padding: 1.55rem !important; } .landing-feature-strip .card-surface, .landing-feature-grid .card-surface { opacity: 0; animation: stagger-in .5s var(--ease-decelerate) forwards; } .landing-feature-strip .card-surface:nth-child(1), .landing-feature-grid .card-surface:nth-child(1) { animation-delay: .05s; } .landing-feature-strip .card-surface:nth-child(2), .landing-feature-grid .card-surface:nth-child(2) { animation-delay: .11s; } .landing-feature-strip .card-surface:nth-child(3), .landing-feature-grid .card-surface:nth-child(3) { animation-delay: .17s; } .landing-feature-grid .card-surface:nth-child(4) { animation-delay: .23s; } .landing-feature-grid .card-surface:nth-child(5) { animation-delay: .29s; } .landing-feature-grid .card-surface:nth-child(6) { animation-delay: .35s; } @keyframes stagger-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .landing-feature-strip .card-surface, .landing-feature-grid .card-surface { animation: none; opacity: 1; } } /* Page headers */ .hero-bg, .sub-page-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(var(--accent-rgb), .055), transparent 70%), var(--bg); } .sub-page-hero { min-height: auto; padding: clamp(1.65rem, 3vw, 2.4rem) 0 clamp(1.1rem, 2vw, 1.65rem) !important; border-bottom: 1px solid var(--border); } .sub-page-hero::before, .sub-page-hero::after { content: ""; position: absolute; pointer-events: none; } .sub-page-hero::before { inset: 0; background: linear-gradient(rgba(var(--accent-rgb), .026) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), .02) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .65), transparent 82%); } .sub-page-hero::after { left: var(--page-pad-x); right: var(--page-pad-x); bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .58), transparent); opacity: .55; } .sub-page-hero .container { position: relative; z-index: 1; } .sub-page-hero .section-heading, .sub-page-hero h1 { font-size: clamp(1.85rem, 4vw, 3rem); line-height: 1.03; } .sub-page-hero p { max-width: 760px; color: var(--text-secondary); } .page:has(.console-shell-nav) .sub-page-hero { background: radial-gradient(ellipse 48rem 16rem at 50% 0%, rgba(var(--accent-rgb), .12), transparent 72%), linear-gradient(180deg, rgba(8, 13, 23, .68), rgba(4, 7, 13, .44)); } .page:has(.console-shell-nav) .console-page-hero { padding: 1.35rem 0 1rem !important; } .console-page-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; } .console-page-title p { margin: .45rem 0 0; color: var(--text-muted); font-size: .95rem; } .page:has(.console-shell-nav) .page-body { padding-top: 1rem; } /* Auth and error shells */ .auth-shell, .error-shell { position: relative; flex: 1; display: flex; align-items: center; min-height: calc(100vh - var(--nav-h)); padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 5vw, 4rem); overflow: hidden; } .auth-shell::before, .error-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 20%, rgba(var(--accent-rgb), .18), transparent 18rem), linear-gradient(rgba(var(--accent-rgb), .026) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), .018) 1px, transparent 1px); background-size: auto, 64px 64px, 64px 64px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .86), transparent 92%); } .auth-layout, .error-card { position: relative; z-index: 1; } .auth-layout { width: min(100%, 980px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(280px, .78fr); gap: 1rem; align-items: stretch; } .auth-focused { position: relative; z-index: 1; width: min(100%, 390px); margin: 0 auto; text-align: center; } .auth-hero-mark { width: 88px; height: 88px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 1.05rem; background: rgba(var(--accent-rgb), .08); box-shadow: 0 0 36px rgba(var(--accent-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .06); } .auth-hero-mark .brand-mark { width: 64px; height: 64px; } .auth-focused h1 { margin: 0; color: #fff; font-size: clamp(2rem, 7vw, 2.65rem); font-weight: 950; line-height: 1; } .auth-focused > p { margin: .75rem 0 1.8rem; color: var(--text-secondary); font-size: .95rem; font-weight: 750; } .auth-panel, .error-card { padding: clamp(1.25rem, 3vw, 2rem); } .auth-focused .auth-panel { padding: 2rem; text-align: left; } .auth-panel { display: flex; flex-direction: column; justify-content: center; } .auth-brand { display: inline-flex; align-items: center; gap: .8rem; margin-bottom: 1.6rem; } .auth-brand strong { display: block; color: #fff; font-size: 1.08rem; font-weight: 900; line-height: 1; } .auth-brand small { display: block; margin-top: .24rem; color: var(--accent-soft); font-size: .6rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .auth-panel h1, .error-copy h1 { margin: 0; color: #fff; font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 950; line-height: .98; letter-spacing: 0; } .auth-panel p, .error-copy p { margin: .85rem 0 0; color: var(--text-secondary); font-size: .96rem; line-height: 1.65; } .auth-discord-btn { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: .65rem; margin-top: 1.55rem; padding: .8rem 1rem; border: 1px solid rgba(88, 101, 242, .54); border-radius: .75rem; background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02)), rgba(88, 101, 242, .20); color: #fff; font-weight: 900; box-shadow: 0 16px 38px rgba(88, 101, 242, .14); } .auth-focused .auth-discord-btn { width: 100%; min-height: 58px; margin-top: 0; border-radius: .95rem; background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .02)), #5865f2; box-shadow: 0 18px 40px rgba(88, 101, 242, .22); } .auth-discord-btn:hover { border-color: rgba(139, 149, 255, .78); background: rgba(88, 101, 242, .28); } .auth-discord-btn i { color: #9aa3ff; font-size: 1.25rem; } .error-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; } .auth-legal { text-align: center; color: var(--text-muted) !important; font-size: .75rem !important; } .auth-legal a { color: var(--accent-soft); font-weight: 900; } .auth-back-link { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.35rem; color: var(--text-muted); font-size: .82rem; font-weight: 850; } .auth-back-link:hover { color: #fff; } .error-rail a { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); gap: .72rem; align-items: center; padding: .72rem; border: 1px solid rgba(var(--accent-rgb), .14); border-radius: .74rem; background: rgba(255, 255, 255, .035); } .error-rail i { width: 2.35rem; height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--accent-rgb), .2); border-radius: .64rem; background: rgba(var(--accent-rgb), .1); color: var(--accent-soft); } .error-card { width: min(100%, 1040px); margin: 0 auto; display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1fr) minmax(190px, .42fr); gap: 1.25rem; align-items: center; } .error-visual { position: relative; min-height: 240px; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb), .12); border-radius: .85rem; background: radial-gradient(circle at 50% 46%, rgba(var(--accent-rgb), .18), transparent 11rem), rgba(255, 255, 255, .025); overflow: hidden; } .error-visual .brand-mark { opacity: .62; transform: translateY(-.9rem); } .error-code { position: absolute; bottom: 1.1rem; color: rgba(255, 255, 255, .96); font-size: clamp(3.5rem, 10vw, 6.5rem); font-weight: 950; line-height: .82; text-shadow: 0 0 34px rgba(var(--accent-rgb), .28); } .error-copy { min-width: 0; } .error-actions .btn-primary, .error-actions .btn-secondary { min-width: 128px; } .error-rail { display: grid; gap: .62rem; } .error-rail a { grid-template-columns: 2.15rem minmax(0, 1fr); color: var(--text-secondary); font-size: .82rem; font-weight: 900; } .error-rail a:hover { color: #fff; border-color: rgba(var(--accent-rgb), .24); background: rgba(var(--accent-rgb), .1); } .error-rail i { width: 2.15rem; height: 2.15rem; } /* Stats, feature, empty states */ .stat-card { position: relative; min-height: 128px; display: flex; flex-direction: column; transition: border-color .18s var(--ease-smooth), transform .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth); } .stat-card:hover { border-color: rgba(var(--accent-rgb), .32); transform: translateY(-1px); } .stat-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .stat-card__icon, .feature-icon, .empty-state-icon { width: 2.35rem; height: 2.35rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: .6rem; color: var(--accent-strong); background: linear-gradient(180deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .08)), rgba(var(--accent-rgb), .1); border: 1px solid rgba(var(--accent-rgb), .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); font-size: .85rem; } .feature-icon, .empty-state-icon { width: 3rem; height: 3rem; font-size: 1rem; } .stat-card__value { margin-top: .85rem; color: #fff; font-size: 2.1rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } .stat-card__label { color: var(--text-muted); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; padding-top: .15rem; } .stat-card__trend { display: inline-flex; align-items: center; gap: .3rem; width: fit-content; margin-top: .65rem; padding: .15rem .5rem; border-radius: var(--radius-full); background: rgba(var(--success-rgb), .12); color: #86efac; font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; } .feature-card { min-height: 180px; } .feature-card h3 { letter-spacing: .015em; text-transform: uppercase; } .empty-state { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1rem; } .empty-state-icon { width: 4rem; height: 4rem; margin-bottom: 1rem; font-size: 1.35rem; } .empty-state-title { margin: 0 0 .35rem; color: #fff; font-size: 1.1rem; font-weight: 850; } .empty-state-text { margin: 0; color: var(--text-secondary); } /* Forms */ .form-fieldset { margin: 0; padding: 0; border: 0; } .form-label { display: block; margin: 0 0 .42rem; color: #e6e8eb; font-size: .76rem; font-weight: 850; } .form-label.required::after { content: " *"; color: var(--accent-strong); } .form-hint { color: var(--text-muted); font-size: .78rem; } .form-control, .form-select, textarea.form-control { width: 100%; min-height: 40px; display: block; padding: .62rem .75rem; border: 1px solid rgba(112, 154, 239, .18); border-radius: .72rem; background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .012)), rgba(2, 5, 12, .66); color: #f5f6f7; font-size: .84rem; line-height: 1.35; outline: none; box-shadow: var(--inset-1); transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; } textarea.form-control { min-height: 78px; resize: vertical; } .form-control::placeholder { color: #545c68; } .form-control:focus, .form-select:focus, textarea.form-control:focus { border-color: rgba(var(--accent-rgb), .72); background: rgba(5, 7, 9, .8); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14), var(--inset-1); } .form-control:disabled, .form-control[readonly], .form-select:disabled { color: var(--text-muted); background: rgba(255, 255, 255, .025); } .form-control[type="file"] { min-height: 46px; padding: .38rem .5rem; color: var(--text-secondary); line-height: 1.7; cursor: pointer; } .form-control[type="file"]::file-selector-button { margin: -.1rem .7rem -.1rem -.15rem; min-height: 34px; padding: 0 .85rem; border: 1px solid rgba(var(--accent-rgb), .36); border-radius: .65rem; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)), linear-gradient(180deg, var(--accent-strong), var(--accent-dark)); color: #fff; font: inherit; font-size: .72rem; font-weight: 950; letter-spacing: .055em; text-transform: uppercase; box-shadow: 0 10px 26px rgba(var(--accent-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .22); cursor: pointer; transition: transform .16s ease, border-color .16s ease, filter .16s ease; } .form-control[type="file"]::-webkit-file-upload-button { margin: -.1rem .7rem -.1rem -.15rem; min-height: 34px; padding: 0 .85rem; border: 1px solid rgba(var(--accent-rgb), .36); border-radius: .65rem; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02)), linear-gradient(180deg, var(--accent-strong), var(--accent-dark)); color: #fff; font: inherit; font-size: .72rem; font-weight: 950; letter-spacing: .055em; text-transform: uppercase; box-shadow: 0 10px 26px rgba(var(--accent-rgb), .22), inset 0 1px 0 rgba(255, 255, 255, .22); cursor: pointer; transition: transform .16s ease, border-color .16s ease, filter .16s ease; } .form-control[type="file"]:hover::file-selector-button, .form-control[type="file"]:hover::-webkit-file-upload-button { border-color: rgba(var(--accent-rgb), .62); filter: brightness(1.08); } .form-control-sm, .form-select-sm { min-height: 32px; padding: .42rem .55rem; font-size: .76rem; } .input-icon { position: relative; display: block; } .input-icon-addon { position: absolute; inset: 0 auto 0 0; width: 2.85rem; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); pointer-events: none; z-index: 2; } .input-icon-addon .icon { width: 1.05rem; height: 1.05rem; } .input-icon .form-control, .input-icon .form-select { padding-left: 2.85rem; } .input-icon .form-control:focus + .input-icon-addon, .input-icon:focus-within .input-icon-addon { color: var(--accent-strong); } .input-group { display: flex; align-items: stretch; width: 100%; } .input-group > .form-control, .input-group > .form-select { flex: 1 1 auto; min-width: 0; width: auto; } .input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group-text { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .75rem; color: var(--text-muted); border: 1px solid var(--border); border-right: 0; border-radius: .72rem 0 0 .72rem; background: rgba(255, 255, 255, .045); } .form-footer { margin-top: 1.1rem; } .form-check { display: inline-flex; align-items: center; gap: .5rem; } .form-check-input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent-color); } .form-switch .form-check-input { width: 2.15rem; height: 1.15rem; } .form-selectgroup { display: grid; gap: .62rem; } .form-selectgroup-item { display: block; margin: 0; } .form-selectgroup-input { position: absolute; opacity: 0; pointer-events: none; } .form-selectgroup-label { display: flex; align-items: center; gap: .7rem; min-height: 54px; padding: .76rem .85rem; border: 1px solid var(--border); border-radius: .85rem; background: linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .018)), rgba(255, 255, 255, .026); color: var(--text-secondary); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease; } .form-selectgroup-label:hover { border-color: rgba(var(--accent-rgb), .34); background: linear-gradient(180deg, rgba(255, 255, 255, .072), rgba(255, 255, 255, .022)), rgba(255, 255, 255, .036); } .form-selectgroup-input:checked + .form-selectgroup-label { border-color: rgba(var(--accent-rgb), .55); background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .08)), rgba(255, 255, 255, .035); color: #fff; box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .1), 0 12px 30px rgba(var(--accent-rgb), .08); } .form-selectgroup-input:focus-visible + .form-selectgroup-label { box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .14), 0 12px 30px rgba(var(--accent-rgb), .08); } .form-selectgroup-check { width: .75rem; height: .75rem; border-radius: 50%; border: 1px solid var(--border-strong); } .form-selectgroup-input:checked + .form-selectgroup-label .form-selectgroup-check { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); } .form-selectgroup-title { color: #fff; font-weight: 900; font-size: .84rem; text-transform: capitalize; } .form-selectgroup-label-content { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .form-selectgroup--products .form-selectgroup-label-content { justify-content: flex-start; } .user-role-block { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: .9rem; align-items: end; margin-bottom: 1.05rem; } .user-role-block .avatar { box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .22), 0 0 24px rgba(var(--accent-rgb), .16); } .user-role-block__field { min-width: 0; } .user-role-options { margin-top: .3rem; } .modal .form-selectgroup--roles, .modal .form-selectgroup--products { max-height: min(46vh, 22rem); overflow: auto; padding-right: .15rem; } /* Tables */ .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; min-width: 680px; margin: 0; border-collapse: collapse; color: var(--text-secondary); } .table-compact { min-width: 0; } .table th, .table td { padding: .82rem .9rem; border-bottom: 1px solid rgba(255, 255, 255, .065); vertical-align: middle; font-size: .82rem; font-variant-numeric: tabular-nums; } .table th { color: var(--text-muted); font-size: .66rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; background: rgba(var(--accent-rgb), .055); } .table tbody tr { transition: background .14s ease; } .table tbody tr:hover { background: rgba(var(--accent-rgb), .065); } .table-striped tbody tr:nth-child(even) { background: rgba(255, 255, 255, .012); } .td-truncate, .text-truncate { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card-table { border: 1px solid var(--border); border-radius: .55rem; overflow: hidden; } .table code { color: var(--accent-soft); font-size: .77rem; } /* DataTables */ .dataTables_wrapper { color: var(--text-secondary); } .dataTables_wrapper .row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 0 0 .9rem; } .dataTables_wrapper .row > div { flex: 1 1 220px; } .dataTables_length label, .dataTables_filter label, .dataTables_info { color: var(--text-muted); font-size: .8rem; font-weight: 750; } .dataTables_length select, .dataTables_filter input { min-height: 34px; margin: 0 .4rem; padding: .42rem .55rem; border: 1px solid var(--border); border-radius: .4rem; background: rgba(0, 0, 0, .32); color: #fff; outline: none; } .dataTables_filter { text-align: right; } .dataTables_paginate { display: flex; justify-content: flex-end; gap: .28rem; } .dataTables_paginate .paginate_button, .page-link { min-width: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border) !important; border-radius: .38rem !important; background: rgba(255, 255, 255, .035) !important; color: var(--text-secondary) !important; font-size: .76rem; font-weight: 800; } .dataTables_paginate .paginate_button.current, .page-item.active .page-link { color: #fff !important; border-color: rgba(var(--accent-rgb), .52) !important; background: rgba(var(--accent-rgb), .22) !important; } .dataTables_paginate .paginate_button.disabled { opacity: .42; cursor: not-allowed; } .dt-bottom-row { margin-top: .9rem !important; } /* Badges */ .badge { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 1.45rem; padding: .25rem .5rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .05); color: #d7dbe1; font-size: .68rem; font-weight: 900; letter-spacing: .025em; line-height: 1; } .badge-sm { min-height: 1.25rem; padding: .18rem .42rem; font-size: .62rem; } .badge-green, .bg-success-lt { color: #8ff0b9; border-color: rgba(var(--success-rgb), .28); background: rgba(var(--success-rgb), .12); } .badge-red, .bg-danger-lt { color: #ff9096; border-color: rgba(var(--danger-rgb), .3); background: rgba(var(--danger-rgb), .12); } .bg-yellow-lt { color: #ffd071; border-color: rgba(var(--warning-rgb), .32); background: rgba(var(--warning-rgb), .12); } .bg-azure-lt { color: #8cdcff; border-color: rgba(var(--info-rgb), .28); background: rgba(var(--info-rgb), .12); } .bg-violet-lt { color: #c6b7ff; border-color: rgba(139, 92, 246, .28); background: rgba(139, 92, 246, .12); } .bg-red-lt { color: #ff9096; border-color: rgba(var(--danger-rgb), .3); background: rgba(var(--danger-rgb), .12); } .bg-green-lt { color: #8ff0b9; border-color: rgba(var(--success-rgb), .28); background: rgba(var(--success-rgb), .12); } .bg-white-lt, .badge-perm { color: #d7dbe1; border-color: var(--border); background: rgba(255, 255, 255, .06); } .tag-list { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; } .tag-pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .42rem .56rem; border: 1px solid rgba(var(--accent-rgb), .20); border-radius: .58rem; background: rgba(var(--accent-rgb), .08); color: var(--text-secondary); font-size: .76rem; font-weight: 800; } .badge-glow-danger { box-shadow: 0 0 18px rgba(var(--danger-rgb), .18); } .badge-glow-success { box-shadow: 0 0 18px rgba(var(--success-rgb), .18); } .method-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 22px; padding: 0 .42rem; border-radius: 999px; font-size: .65rem; font-weight: 900; letter-spacing: .04em; } .method-get { color: #84d9ff; background: rgba(var(--info-rgb), .13); border: 1px solid rgba(var(--info-rgb), .28); } .method-post { color: #8ff0b9; background: rgba(var(--success-rgb), .13); border: 1px solid rgba(var(--success-rgb), .28); } .method-patch { color: #ffd071; background: rgba(var(--warning-rgb), .13); border: 1px solid rgba(var(--warning-rgb), .3); } .method-delete { color: #ff9096; background: rgba(var(--danger-rgb), .13); border: 1px solid rgba(var(--danger-rgb), .3); } /* Avatars */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; flex: 0 0 auto; border: 1px solid var(--border); border-radius: .5rem; background-color: var(--surface-3); background-size: cover; background-position: center; color: #fff; font-weight: 850; } .avatar-sm { width: 1.75rem; height: 1.75rem; border-radius: .4rem; } .avatar-lg { width: 3rem; height: 3rem; } .avatar-xl { width: 4.5rem; height: 4.5rem; } .avatar-rounded { border-radius: 999px; } /* Dropdowns and modal */ .dropdown { position: relative; } .dropdown.w-full { width: 100%; } .dropdown-toggle::after { content: ""; display: inline-block; margin-left: .35rem; border: .25em solid transparent; border-top-color: currentColor; transform: translateY(.12rem); } .dropdown-menu, .user-dropdown-menu { position: absolute; top: calc(100% + .45rem); left: 0; z-index: 1000; min-width: 12rem; max-height: 18rem; overflow-y: auto; padding: .38rem; border: 1px solid var(--border); border-radius: .74rem; background: linear-gradient(180deg, rgba(255, 255, 255, .064), rgba(255, 255, 255, .014)), rgba(5, 10, 18, .98); box-shadow: var(--blue-edge), var(--shadow-2), 0 0 38px rgba(var(--accent-rgb), .10); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px) scale(.96); transform-origin: top left; transition: opacity .16s var(--ease-smooth), transform .16s var(--ease-smooth), visibility .16s; } .dropdown-menu-end { right: 0; left: auto; transform-origin: top right; } .nav-dropdown-menu { min-width: 14.75rem; } .nav-dropdown-menu::before, .user-dropdown-menu::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(90deg, rgba(var(--accent-rgb), .08), transparent 45%); } .user-dropdown-menu { left: auto; right: 0; min-width: 150px; transform-origin: top right; } .dropdown-menu.show, .user-dropdown-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); } @media (prefers-reduced-motion: reduce) { .dropdown-menu, .user-dropdown-menu { transition: opacity .16s var(--ease-smooth), visibility .16s; transform: none !important; } } .dropdown-header { display: block; padding: .45rem .55rem .35rem; color: var(--text-muted); font-size: .64rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; } .dropdown-item, .user-dropdown-menu a { position: relative; display: flex; align-items: center; gap: .55rem; padding: .62rem .65rem; border: 1px solid transparent; border-radius: .55rem; color: var(--text-secondary); font-size: .8rem; font-weight: 800; } .nav-dropdown-menu .dropdown-item { min-height: 38px; } .nav-dropdown-menu .dropdown-item span, .user-dropdown-menu a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropdown-item i, .user-dropdown-menu a i { width: 1rem; color: var(--accent-soft); text-align: center; font-size: .78rem; } .dropdown-item:hover, .user-dropdown-menu a:hover { color: #fff; border-color: rgba(var(--accent-rgb), .16); background: rgba(var(--accent-rgb), .11); } .modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .modal.show { display: flex !important; } .modal-dialog { width: min(100%, 36rem); margin: 0 auto; } .modal-dialog-centered { display: flex; align-items: center; min-height: calc(100vh - 2rem); } .modal-content { overflow: hidden; } .modal-header, .modal-footer { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); } .modal-footer { justify-content: flex-end; border-top: 1px solid var(--border); border-bottom: 0; background: rgba(0, 0, 0, .18); } .modal-title { margin: 0; color: #fff; font-size: .98rem; font-weight: 900; letter-spacing: .01em; } .modal-body { padding: 1.15rem; color: var(--text-secondary); } .btn-close { margin-left: auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: .72rem; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018)), rgba(255, 255, 255, .04); color: var(--text-muted); } .btn-close::before { content: "x"; font-size: .9rem; font-weight: 850; } .btn-close:hover { color: #fff; border-color: var(--border-strong); } .modal-backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, .55); } .modal-open { overflow: hidden; } /* Alerts */ .alert { position: relative; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: .55rem; background: rgba(255, 255, 255, .04); } .alert-danger { color: #ff9096; border-color: rgba(var(--danger-rgb), .28); background: rgba(var(--danger-rgb), .11); } .alert-warning { color: #fcd67f; border-color: rgba(var(--warning-rgb), .3); background: rgba(var(--warning-rgb), .11); } .alert-success { color: #86efac; border-color: rgba(var(--success-rgb), .3); background: rgba(var(--success-rgb), .11); } .alert-info { color: #93c5fd; border-color: rgba(var(--info-rgb), .3); background: rgba(var(--info-rgb), .11); } .alert-dismissible { padding-right: 3rem; } .alert-title { color: inherit; font-weight: 850; } /* Docs */ .docs-hero { position: relative; overflow: hidden; padding: clamp(4.8rem, 8vw, 7.2rem) 0 clamp(2.3rem, 4vw, 3.5rem); border-bottom: 1px solid rgba(var(--accent-rgb), .12); } .docs-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 45rem 24rem at 22% 15%, rgba(var(--accent-rgb), .18), transparent 72%), radial-gradient(ellipse 30rem 20rem at 84% 20%, rgba(var(--accent-rgb), .13), transparent 74%); } .docs-hero .container { position: relative; max-width: 1320px; } .docs-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; } @media (min-width: 1024px) { .docs-hero-grid { grid-template-columns: minmax(0, .9fr) minmax(420px, .72fr); } } .docs-hero-copy { max-width: 720px; } .docs-hero-title { margin: 0; color: #fff; font-size: clamp(2.7rem, 5.6vw, 5.8rem); font-weight: 900; letter-spacing: 0; line-height: .96; text-wrap: balance; text-shadow: 0 22px 58px rgba(0, 0, 0, .58); } .docs-hero-title span { color: var(--accent-color); text-shadow: 0 0 38px rgba(var(--accent-rgb), .42); } .docs-hero-lead { max-width: 650px; margin: 1.05rem 0 0; color: var(--text-secondary); font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.65; } .docs-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.55rem; } .docs-hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; } .docs-hero-tags span { min-height: 30px; display: inline-flex; align-items: center; padding: .38rem .7rem; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: 999px; background: rgba(var(--accent-rgb), .08); color: var(--text-secondary); font-size: .76rem; font-weight: 850; } .docs-command-panel { position: relative; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .21); border-radius: 1rem; background: linear-gradient(180deg, rgba(255, 255, 255, .078), rgba(255, 255, 255, .018)), linear-gradient(135deg, rgba(var(--accent-rgb), .14), transparent 46%), rgba(6, 10, 18, .86); box-shadow: var(--blue-edge), 0 30px 90px rgba(0, 0, 0, .46), 0 0 52px rgba(var(--accent-rgb), .12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .docs-command-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(var(--accent-rgb), .10), transparent 35%), linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 40%); } .docs-command-topline, .docs-hero-meter { position: relative; z-index: 1; } .docs-command-topline { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid rgba(var(--accent-rgb), .15); color: var(--text-secondary); font-size: .78rem; font-weight: 850; } .docs-command-topline i { color: var(--success); font-size: .48rem; filter: drop-shadow(0 0 8px rgba(var(--success-rgb), .56)); } .docs-command-topline code { color: var(--accent-soft); font-size: .76rem; } .docs-command-body { position: relative; z-index: 1; } .docs-command-body pre { margin: 0; padding: 1.1rem; overflow-x: auto; color: #dbe7ff; font-size: clamp(.72rem, 1.3vw, .84rem); line-height: 1.65; } .docs-command-body code { color: inherit; } .docs-hero-meter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(var(--accent-rgb), .15); } .docs-hero-meter div { min-width: 0; padding: .9rem 1rem; border-right: 1px solid rgba(var(--accent-rgb), .12); } .docs-hero-meter div:last-child { border-right: 0; } .docs-hero-meter strong { display: block; color: #fff; font-size: 1.25rem; font-weight: 900; line-height: 1; } .docs-hero-meter span { display: block; margin-top: .28rem; color: var(--text-muted); font-size: .7rem; font-weight: 800; } .docs-layout { display: grid; grid-template-columns: 1fr; gap: 1.2rem; } @media (min-width: 1024px) { .docs-layout { grid-template-columns: 288px minmax(0, 1fr); align-items: start; gap: 1.5rem; } } .docs-sidebar { position: sticky; top: calc(var(--nav-h) + 1rem); align-self: start; max-height: calc(100vh - var(--nav-h) - 2rem); overflow: auto; padding: .75rem; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 1rem; background: linear-gradient(180deg, rgba(255, 255, 255, .056), rgba(255, 255, 255, .014)), rgba(7, 12, 22, .78); box-shadow: var(--blue-edge), 0 18px 50px rgba(0, 0, 0, .28); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .docs-sidebar-head { padding: .35rem .5rem .75rem; border-bottom: 1px solid rgba(var(--accent-rgb), .13); margin-bottom: .45rem; } .docs-sidebar-head strong { display: block; color: #fff; font-size: .92rem; font-weight: 900; } .docs-sidebar-head span { display: block; margin-top: .16rem; color: var(--text-muted); font-size: .72rem; font-weight: 750; } .docs-nav { display: flex; flex-direction: column; gap: .14rem; } .docs-nav-section { margin: .8rem .55rem .34rem; color: var(--accent-soft); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .docs-nav-section:first-child { margin-top: .25rem; } .docs-nav-link { min-height: 36px; display: flex; align-items: center; gap: .48rem; padding: .48rem .55rem; border: 1px solid transparent; border-radius: .72rem; color: var(--text-secondary); font-size: .78rem; font-weight: 850; line-height: 1.2; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease; } .docs-nav-link:hover, .docs-nav-link.active { color: #fff; border-color: rgba(var(--accent-rgb), .20); background: linear-gradient(90deg, rgba(var(--accent-rgb), .24), rgba(var(--accent-rgb), .08)); } .docs-nav-link:hover { transform: translateX(2px); } .docs-content { min-width: 0; display: flex; flex-direction: column; } .docs-section { scroll-margin-top: calc(var(--nav-h) + 1.25rem); margin-bottom: 1.1rem; padding: clamp(1.05rem, 2.2vw, 1.65rem); } .docs-section p, .docs-section li { color: var(--text-secondary); font-size: .94rem; line-height: 1.68; } .docs-section p { margin: 0 0 .85rem; } .docs-section p:last-child { margin-bottom: 0; } .docs-heading { margin: 0 0 .8rem; color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 900; letter-spacing: 0; line-height: 1.08; text-transform: none; } .docs-subheading { margin: 1.25rem 0 .55rem; color: #fff; font-size: 1rem; font-weight: 900; } .docs-flow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; } .docs-mini-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; min-width: 0; padding: 1rem; border: 1px solid rgba(var(--accent-rgb), .15); border-radius: .85rem; background: linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .014)), rgba(5, 10, 18, .58); } .docs-card-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--accent-rgb), .20); border-radius: .72rem; color: var(--accent-strong); background: rgba(var(--accent-rgb), .10); } .docs-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; color: #fff; font-weight: 900; } .docs-mini-card p { margin: .35rem 0 0; font-size: .84rem; line-height: 1.55; } .docs-endpoint-header { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; width: fit-content; max-width: 100%; margin-bottom: .8rem; padding: .38rem .48rem; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: .72rem; background: rgba(var(--accent-rgb), .07); } .docs-endpoint-path { color: var(--accent-soft); font-size: .84rem; overflow-wrap: anywhere; } .docs-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: .85rem; margin-top: .95rem; } .docs-split .docs-code-block { margin: 0; } .docs-code-block { position: relative; margin: .85rem 0; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .16); border-radius: .9rem; background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent), radial-gradient(circle at 18% 0, rgba(var(--accent-rgb), .10), transparent 16rem), #030711; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 44px rgba(0, 0, 0, .22); } .docs-code-block pre { margin: 0; padding: 1.05rem; padding-right: 4.5rem; overflow-x: auto; color: #d7e2f6; font-size: .78rem; line-height: 1.58; } .docs-code-block code { color: #d7e2f6; } .docs-code-label { padding: .58rem .95rem; padding-right: 4.5rem; border-bottom: 1px solid rgba(var(--accent-rgb), .13); color: var(--accent-soft); font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .copy-btn { position: absolute; top: .55rem; right: .55rem; z-index: 2; min-height: 30px; padding: .35rem .62rem; border: 1px solid rgba(var(--accent-rgb), .18); border-radius: 999px; background: rgba(8, 15, 28, .88); color: var(--text-secondary); font-size: .72rem; font-weight: 900; letter-spacing: 0; text-transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); } .copy-btn:hover, .copy-btn:focus-visible { color: #fff; border-color: rgba(var(--accent-rgb), .38); background: rgba(var(--accent-rgb), .16); } .docs-callout { margin-top: .9rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: .85rem; color: var(--text-secondary); background: rgba(255, 255, 255, .035); } .docs-callout-info { border-color: rgba(var(--info-rgb), .32); background: linear-gradient(90deg, rgba(var(--info-rgb), .12), rgba(var(--info-rgb), .045)); } .docs-callout-warning { border-color: rgba(var(--warning-rgb), .32); background: linear-gradient(90deg, rgba(var(--warning-rgb), .13), rgba(var(--warning-rgb), .045)); } .docs-divider { display: flex; align-items: center; gap: .8rem; margin: 1.55rem 0 1.05rem; color: var(--accent-soft); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .docs-divider::before, .docs-divider::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .34), transparent); } .lang-tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin: .85rem 0; } .lang-tab { min-height: 36px; padding: .45rem .78rem; border: 1px solid rgba(var(--accent-rgb), .17); border-radius: .72rem; background: rgba(255, 255, 255, .035); color: var(--text-secondary); font-size: .78rem; font-weight: 850; letter-spacing: 0; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; } .lang-tab:hover, .lang-tab.active { color: #fff; border-color: rgba(var(--accent-rgb), .42); background: rgba(var(--accent-rgb), .16); } .lang-tab:hover { transform: translateY(-1px); } /* Compact API docs */ .docs-hero--compact { padding: clamp(2.6rem, 5vw, 4.35rem) 0 clamp(1.35rem, 3vw, 2.15rem); } .docs-hero--compact .docs-hero-grid { gap: clamp(1rem, 3vw, 2rem); } @media (min-width: 1024px) { .docs-hero--compact .docs-hero-grid { grid-template-columns: minmax(0, .82fr) minmax(360px, .58fr); } } .landing-live-hero { min-height: clamp(36rem, 86vh, 52rem); align-items: center; padding: 5rem 0 4rem; text-align: center; } .landing-live-copy { width: min(100%, 48rem); display: flex; align-items: center; flex-direction: column; margin-inline: auto; } .landing-live-copy .brand-mark--hero { width: clamp(7.5rem, 26vw, 11.5rem); margin-bottom: 1.4rem; } .landing-live-copy .eyebrow-pill { margin-bottom: 1.2rem; } .landing-live-copy .hero-title { max-width: 14ch; margin: 0; font-size: clamp(2.35rem, 10vw, 4.75rem); line-height: .98; } .landing-live-copy .hero-lead { max-width: 42rem; margin: 1.3rem auto 0; } .landing-live-actions { width: 100%; display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 1.8rem; } .landing-live-actions a { justify-content: center; } .landing-scroll-hint { min-height: 44px; display: inline-flex; align-items: center; flex-direction: column; justify-content: center; gap: .25rem; margin-top: 1.5rem; color: var(--text-muted); font-size: .75rem; font-weight: 700; } .landing-scroll-hint:hover { color: var(--accent-strong); } @media (min-width: 640px) { .landing-live-actions { width: auto; display: flex; } .landing-live-actions a { min-width: 10rem; } } .docs-hero--compact .docs-hero-title { font-size: clamp(2.35rem, 4.5vw, 4.35rem); line-height: .98; } .docs-hero--compact .docs-hero-lead { max-width: 700px; font-size: clamp(.94rem, 1.05vw, 1.05rem); line-height: 1.58; } .docs-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-top: 1.25rem; max-width: 680px; } .docs-quick-actions a { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .48rem; padding: .55rem .72rem; border: 1px solid rgba(var(--accent-rgb), .17); border-radius: .7rem; background: linear-gradient(180deg, rgba(255, 255, 255, .052), rgba(255, 255, 255, .014)), rgba(6, 12, 22, .68); color: var(--text-secondary); font-size: .78rem; font-weight: 900; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); } .docs-quick-actions a:hover, .docs-quick-actions a:focus-visible { color: #fff; border-color: rgba(var(--accent-rgb), .38); background: rgba(var(--accent-rgb), .16); transform: translateY(-1px); } .docs-quick-actions i { color: var(--accent-soft); font-size: .8rem; } .docs-body { padding: 1.05rem 0 1.6rem; } .docs-body .container { max-width: 1320px; } .docs-top-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr); gap: 1rem; margin-bottom: 1rem; } .docs-section--tight { margin-bottom: 0; } .docs-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: 1rem; } .docs-section-head > div { min-width: 0; } .docs-section-head > p, .docs-section-head p { max-width: 740px; margin: .15rem 0 0; } .docs-step-grid, .docs-key-grid { display: grid; gap: .72rem; } .docs-step-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .docs-step, .docs-key-card, .docs-endpoint-card { min-width: 0; border: 1px solid rgba(var(--accent-rgb), .15); border-radius: .82rem; background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)), rgba(5, 10, 18, .54); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045); } .docs-step { padding: .92rem; } .docs-step span { width: 30px; height: 30px; display: inline-grid; place-items: center; margin-bottom: .62rem; border: 1px solid rgba(var(--accent-rgb), .25); border-radius: .62rem; background: rgba(var(--accent-rgb), .12); color: #fff; font-weight: 950; } .docs-step strong, .docs-key-card strong { display: block; color: #fff; font-size: .9rem; font-weight: 950; } .docs-step p, .docs-key-card p { margin: .42rem 0 0; font-size: .82rem; line-height: 1.55; } .docs-step code { display: block; margin-top: .42rem; overflow-wrap: anywhere; color: var(--accent-soft); font-size: .8rem; } .docs-key-grid { grid-template-columns: 1fr; } .docs-key-card { padding: .95rem; } .docs-key-card .method-badge { margin-bottom: .55rem; } .docs-reference-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .82fr); gap: 1rem; align-items: start; } .docs-endpoint-groups { display: grid; gap: 1rem; } .docs-endpoint-group { overflow: hidden; border: 1px solid rgba(var(--accent-rgb), .15); border-radius: .95rem; background: rgba(5, 10, 18, .38); } .docs-group-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .92rem 1rem; border-bottom: 1px solid rgba(var(--accent-rgb), .12); background: rgba(var(--accent-rgb), .075); } .docs-group-title strong { display: block; color: #fff; font-size: .96rem; font-weight: 950; } .docs-group-title span { display: block; margin-top: .18rem; color: var(--text-muted); font-size: .78rem; font-weight: 800; } .docs-group-title code { flex: 0 0 auto; color: var(--accent-soft); font-size: .78rem; } .docs-endpoint-list { display: grid; gap: .65rem; padding: .78rem; } .docs-endpoint-card { display: grid; grid-template-columns: minmax(250px, .62fr) minmax(0, 1fr); gap: .9rem; padding: .85rem; } .docs-endpoint-card-main { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .75rem; } .docs-endpoint-card-main strong { display: block; color: #fff; font-size: .9rem; font-weight: 950; } .docs-endpoint-card-main code, .docs-endpoint-meta code { color: var(--accent-soft); } .docs-endpoint-card-main code { display: block; margin-top: .18rem; overflow-wrap: anywhere; font-size: .8rem; } .docs-endpoint-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; } .docs-endpoint-meta span { min-width: 0; color: var(--text-secondary); font-size: .76rem; line-height: 1.42; } .docs-endpoint-meta b { display: block; margin-bottom: .18rem; color: var(--text-muted); font-size: .6rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; } .docs-table--compact th, .docs-table--compact td { padding: .72rem .85rem; font-size: .78rem; vertical-align: top; } .docs-table--compact td:last-child { min-width: 240px; } .copy-btn.copied { color: #63e6a6; border-color: rgba(99, 230, 166, .4); background: rgba(29, 185, 105, .14); } /* Downloads and media */ .card-img-top { min-height: 9rem; background-size: cover; background-position: center; background-color: var(--surface-3); border-bottom: 1px solid var(--border); } .download-product-card { overflow: hidden; } .download-product-card .card-img-top, .card-img-top--download { min-height: 7.5rem; } .card-body { padding: 1rem; } .card-title { margin: 0; color: #fff; font-weight: 850; } .card-stamp { position: absolute; top: 1rem; right: 1rem; opacity: .32; } .card-stamp-icon { width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: .65rem; color: #fff; font-size: 1.5rem; } .ribbon { position: absolute; top: .75rem; right: .75rem; z-index: 2; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: .45rem; box-shadow: var(--shadow-1); } /* Footer */ .site-footer { border-top: 1px solid var(--border); background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent), radial-gradient(circle at 50% 0, rgba(var(--accent-rgb), .12), transparent 26rem), rgba(3, 7, 13, .92); } .site-footer--console { background: rgba(3, 6, 11, .72); } .footer-grid { display: grid; grid-template-columns: minmax(280px, 1fr) repeat(2, minmax(150px, .35fr)); gap: 1rem; align-items: start; } .footer-grid > * { min-width: 0; padding: .25rem 0; } .footer-brand p { max-width: 440px; margin: 0; color: var(--text-muted); font-size: .86rem; line-height: 1.6; } .footer-links { display: flex; flex-direction: column; gap: .35rem; } .footer-heading { display: block; margin-bottom: .38rem; color: #fff; font-size: .82rem; font-weight: 900; } .footer-links a { min-height: 28px; display: flex; align-items: center; gap: .48rem; padding: 0; border-radius: .48rem; color: var(--text-secondary); font-size: .8rem; font-weight: 800; transition: color .16s ease, background .16s ease; } .footer-links a i { width: 1rem; color: var(--accent-soft); text-align: center; font-size: .75rem; } .footer-links a:hover { color: #fff; } .footer-bottom { border-top: 1px solid var(--border); } .footer-bottom .container { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .footer-bottom--console .container { min-height: 56px; } .footer-bottom p { margin: 0; color: var(--text-muted); font-size: .78rem; } .footer-secure { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-secondary); font-size: .78rem; font-weight: 800; } .footer-secure i { color: var(--accent-strong); } .version-pill { color: var(--text-muted); } /* Grid compatibility */ .row { display: flex; flex-wrap: wrap; margin-left: -.5rem; margin-right: -.5rem; } .row > * { padding-left: .5rem; padding-right: .5rem; } .row-cards { row-gap: 1rem; } .col-12, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-9, .col-sm-12 { width: 100%; } @media (min-width: 768px) { .col-md-3 { flex: 0 0 25%; max-width: 25%; } .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; } .col-md-5 { flex: 0 0 41.666%; max-width: 41.666%; } .col-md-6 { flex: 0 0 50%; max-width: 50%; } .col-md-7 { flex: 0 0 58.333%; max-width: 58.333%; } .col-md-9 { flex: 0 0 75%; max-width: 75%; } } hr { height: 1px; border: 0; margin: 1.1rem 0; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .34), transparent); } /* Placeholders */ .placeholder { display: block; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .11), rgba(255, 255, 255, .05)); background-size: 200% 100%; animation: placeholder-shimmer 1.4s infinite linear; } .placeholder-xs { min-height: .55rem; } @keyframes placeholder-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Responsive */ @media (max-width: 1279px) { .footer-grid { grid-template-columns: minmax(260px, 1fr) repeat(2, minmax(140px, .4fr)); } } @media (max-width: 1023px) { .landing-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; } .error-card { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); } .error-rail { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } .hero-title { max-width: 680px; } .hero-emblem-frame { min-height: 280px; } .hero-dashboard-ghost { transform: none; opacity: .46; } .docs-split { grid-template-columns: 1fr; } } @media (max-width: 767px) { :root { --nav-h: 62px; } .auth-shell, .error-shell { align-items: flex-start; min-height: auto; padding-top: 2.4rem; } .auth-layout, .error-card { grid-template-columns: 1fr; } .error-visual { min-height: 190px; } .error-rail { grid-template-columns: 1fr; } .error-actions .btn-primary, .error-actions .btn-secondary, .auth-discord-btn { width: 100%; } .landing-hero { min-height: auto; padding-top: 3rem; } .hero-title { max-width: 100%; font-size: clamp(2.05rem, 9vw, 2.75rem); } .hero-dashboard-ghost { height: 248px; max-width: 100%; } .hero-dashboard-grid, .hero-chart-line, .hero-table-lines { margin-left: .9rem; } .hero-emblem-frame { min-height: 258px; } .landing-feature-strip { grid-template-columns: 1fr; } .landing-feature-strip .card-surface { align-items: flex-start; } .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .footer-grid .footer-brand { grid-column: 1 / -1; } .footer-bottom .container { align-items: flex-start; flex-direction: column; padding-top: 1rem; padding-bottom: 1rem; } .dataTables_filter { text-align: left; } .docs-sidebar { position: relative; top: auto; max-height: 360px; } .docs-hero { padding-top: 3.2rem; } .docs-hero-title { font-size: clamp(2.25rem, 12vw, 3.35rem); } .docs-hero-actions { align-items: stretch; flex-direction: column; } .docs-hero-actions .btn-primary, .docs-hero-actions .btn-secondary { width: 100%; justify-content: center; } .docs-command-topline { align-items: flex-start; flex-direction: column; } .docs-hero-meter div { padding: .75rem .65rem; } .docs-hero-meter strong { font-size: 1.05rem; } .docs-hero-meter span { font-size: .64rem; } .docs-flow-grid { grid-template-columns: 1fr; } .docs-command-body pre { padding: .9rem; font-size: .68rem; } .docs-code-block pre { padding-right: 1rem; } .docs-code-block:has(.copy-btn) pre { padding-top: 3rem; } .docs-top-grid, .docs-reference-grid { grid-template-columns: 1fr; } .docs-step-grid { grid-template-columns: 1fr; } .docs-section-head { display: block; } .docs-endpoint-card { grid-template-columns: 1fr; } .docs-endpoint-meta { grid-template-columns: 1fr; } .docs-group-title { align-items: flex-start; flex-direction: column; } } @media (max-width: 639px) { .footer-grid { grid-template-columns: 1fr; } .footer-grid .footer-brand { grid-column: auto; } .docs-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .public-brand small, .console-brand small, .footer-brand small { display: none; } .brand-mark--nav { width: 34px; height: 34px; } .nav-signin span { display: none; } .btn-primary, .btn-secondary, .btn-outline, .btn { white-space: normal; } .card-surface, .docs-section { border-radius: .9rem; } .docs-command-panel, .docs-sidebar { border-radius: .9rem; } .docs-mini-card { grid-template-columns: 1fr; } .docs-nav-link { min-height: 40px; } .docs-hero--compact { padding-top: 2.2rem; } .docs-quick-actions { grid-template-columns: 1fr; } .docs-quick-actions a { justify-content: flex-start; } .docs-table--compact td:last-child { min-width: 180px; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Setup wizard */ .setup-page .page-wrapper { background: linear-gradient(180deg, rgba(3, 8, 18, .16), rgba(3, 8, 18, .66)), radial-gradient(ellipse 36rem 22rem at 18% 8%, rgba(var(--accent-rgb), .12), transparent 70%); } .setup-shell { flex: 1; padding: clamp(1.4rem, 3vw, 2.45rem) 0 2.35rem; } .setup-shell .container { max-width: 1320px; } .setup-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .setup-hero-copy { min-width: 0; max-width: 780px; } .setup-hero h1, .setup-success h1 { margin: .65rem 0 .55rem; color: #fff; font-size: clamp(2.15rem, 4.4vw, 4.1rem); font-weight: 950; letter-spacing: 0; line-height: .98; } .setup-hero p, .setup-success p { max-width: 720px; margin: 0; color: var(--text-secondary); font-size: clamp(.95rem, 1.1vw, 1.08rem); line-height: 1.58; } .setup-hero-meta { display: grid; gap: .55rem; min-width: min(100%, 340px); } .setup-hero-meta span, .setup-aside-card, .setup-command-row { border: 1px solid rgba(var(--accent-rgb), .15); background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .014)), rgba(5, 10, 18, .56); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045); } .setup-hero-meta span { display: flex; align-items: center; gap: .55rem; min-width: 0; min-height: 42px; padding: .65rem .8rem; border-radius: .72rem; color: var(--text-secondary); font-size: .78rem; font-weight: 900; } .setup-hero-meta i { flex: 0 0 auto; color: var(--accent-soft); } .setup-hero-meta strong { min-width: 0; overflow-wrap: anywhere; color: #fff; font-weight: 900; } .setup-alert { max-width: 1320px; margin: 0 auto 1rem; } .setup-layout { display: grid; grid-template-columns: minmax(250px, .34fr) minmax(0, 1fr); gap: 1rem; align-items: start; } .setup-aside { position: sticky; top: calc(var(--nav-h) + 1rem); display: grid; gap: .75rem; } .setup-aside-card { min-width: 0; padding: 1rem; border-radius: .9rem; } .setup-aside-card h2 { margin: 0 0 .8rem; color: #fff; font-size: .98rem; font-weight: 950; letter-spacing: 0; } .setup-checklist { display: grid; gap: .72rem; margin: 0; padding: 0; list-style: none; } .setup-checklist li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .7rem; align-items: start; color: var(--text-secondary); font-size: .84rem; line-height: 1.45; } .setup-checklist i { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb), .22); border-radius: .62rem; background: rgba(var(--accent-rgb), .12); color: var(--accent-soft); font-size: .78rem; } .setup-aside-card--code span { display: block; margin-bottom: .42rem; color: var(--text-muted); font-size: .76rem; font-weight: 900; } .setup-aside-card--code code { display: block; overflow-wrap: anywhere; color: var(--accent-soft); font-size: .78rem; line-height: 1.45; } .setup-panel { min-width: 0; overflow: hidden; } .setup-section { position: relative; padding: clamp(1rem, 2vw, 1.25rem); border-bottom: 1px solid rgba(var(--accent-rgb), .11); } .setup-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; margin-bottom: .9rem; } .setup-section-head > div { display: flex; align-items: center; gap: .7rem; min-width: 0; } .setup-section-head span { width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(var(--accent-rgb), .25); border-radius: .68rem; background: rgba(var(--accent-rgb), .12); color: #fff; font-size: .78rem; font-weight: 950; } .setup-section-head h2 { margin: 0; color: #fff; font-size: 1rem; font-weight: 950; letter-spacing: 0; } .setup-section-head p { max-width: 430px; margin: .12rem 0 0; color: var(--text-muted); font-size: .82rem; line-height: 1.5; text-align: right; } .setup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .82rem; } .setup-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .setup-grid--secret { grid-template-columns: minmax(130px, .32fr) minmax(0, 1fr); } .setup-field { min-width: 0; } .setup-field--full { grid-column: 1 / -1; } .setup-field .form-label { margin-bottom: .38rem; color: var(--text-primary); font-size: .8rem; font-weight: 900; letter-spacing: 0; text-transform: none; } .setup-field small { display: block; margin-top: .42rem; color: var(--text-muted); font-size: .78rem; line-height: 1.45; } .setup-field .form-control, .setup-command-permissions .form-control { min-width: 0; width: 100%; } .setup-command-grid { display: grid; gap: .58rem; } .setup-command-row { display: grid; grid-template-columns: minmax(170px, .75fr) minmax(105px, auto) minmax(220px, 1fr); gap: .85rem; align-items: center; min-width: 0; padding: .74rem; border-radius: .82rem; } .setup-command-copy { min-width: 0; } .setup-command-copy strong { display: block; color: #fff; font-size: .9rem; font-weight: 950; } .setup-command-copy span { display: block; margin-top: .12rem; color: var(--text-muted); font-size: .76rem; line-height: 1.35; } .setup-command-toggle { display: inline-flex; align-items: center; justify-content: flex-start; gap: .5rem; color: var(--text-secondary); font-size: .8rem; font-weight: 900; white-space: nowrap; } .setup-command-permissions { min-width: 0; } .setup-actions { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 2vw, 1.25rem); border-top: 1px solid rgba(var(--accent-rgb), .12); background: linear-gradient(180deg, rgba(11, 17, 29, .82), rgba(5, 9, 16, .96)), rgba(5, 9, 16, .96); backdrop-filter: blur(12px); } .setup-actions p { margin: 0; color: var(--text-muted); font-size: .82rem; line-height: 1.45; } .setup-actions .btn { flex: 0 0 auto; } .setup-shell--success { display: grid; place-items: center; min-height: calc(100vh - var(--nav-h) - 220px); } .setup-success { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 1.15rem; max-width: 820px; margin: 0 auto; padding: clamp(1.25rem, 3vw, 2rem); } .setup-success-icon { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid rgba(var(--success-rgb), .4); border-radius: 1rem; background: rgba(var(--success-rgb), .14); color: var(--success); font-size: 1.65rem; box-shadow: 0 0 32px rgba(var(--success-rgb), .18); } .setup-success .setup-muted { margin-top: .7rem; color: var(--text-muted); font-size: .9rem; } @media (max-width: 1023px) { .setup-hero { align-items: flex-start; flex-direction: column; } .setup-hero-meta { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); } .setup-layout { grid-template-columns: 1fr; } .setup-aside { position: static; grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr); } } @media (max-width: 767px) { .setup-hero-meta, .setup-aside, .setup-grid, .setup-grid--3, .setup-grid--secret, .setup-command-row, .setup-success { grid-template-columns: 1fr; } .setup-section-head { display: block; } .setup-section-head p { max-width: none; margin-top: .5rem; text-align: left; } .setup-actions { position: static; align-items: stretch; flex-direction: column; } .setup-actions .btn { width: 100%; } } .logout-form { margin: 0; } .logout-action { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: flex; font: inherit; gap: .55rem; padding: .65rem .8rem; text-align: left; width: 100%; } .logout-action:disabled { cursor: wait; opacity: .65; } /* ========================================================================== LuciRift parity, themes, and mobile-first accessibility ========================================================================== */ .skip-to-content { position: fixed; top: .75rem; left: 50%; z-index: 1000; min-height: 44px; display: inline-flex; align-items: center; padding: .65rem 1rem; border: 1px solid var(--border-strong); border-radius: .75rem; background: var(--panel-solid); color: var(--text-primary); font-weight: 800; transform: translate(-50%, -200%); transition: transform var(--transition-fast); } .skip-to-content:focus { transform: translate(-50%, 0); } .brand-mark { object-fit: contain; border-radius: 22%; } .brand-mark--hero { filter: drop-shadow(0 0 1.5rem rgba(var(--accent-rgb), .48)) drop-shadow(0 1rem 2.5rem rgba(0, 0, 0, .44)); } .theme-toggle-btn, .console-theme-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .045); color: var(--text-secondary); transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); } .public-brand, .footer-links a, .setup-command-toggle { min-height: 44px; } .footer-links a { display: flex; align-items: center; } .theme-toggle-btn:hover, .console-theme-toggle:hover { color: var(--text-primary); background: rgba(var(--accent-rgb), .12); border-color: rgba(var(--accent-rgb), .34); } .console-theme-toggle { width: 100%; justify-content: flex-start; padding: .55rem .75rem; background: transparent; font-size: .8rem; font-weight: 800; } .console-sidebar-foot { display: grid; gap: .25rem; } .form-control, .form-select, .btn, .btn-primary, .btn-secondary, .btn-outline, .nav-signin, .auth-discord-btn, .mobile-link, .console-nav-link { min-height: 44px; } .table-responsive { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; } .table-responsive table { min-width: 42rem; } .console-mobile-backdrop { position: fixed; inset: 0; z-index: 56; visibility: hidden; background: rgba(2, 5, 12, .72); opacity: 0; backdrop-filter: blur(3px); transition: opacity var(--transition-base), visibility var(--transition-base); } .console-mobile-backdrop.open { visibility: visible; opacity: 1; } .console-mobile-drawer { position: fixed; top: 4.7rem; bottom: 0; left: 0; z-index: 57; width: min(88vw, 21rem); height: auto; display: block; padding: .5rem; overflow-y: auto; visibility: hidden; pointer-events: none; background: var(--bg-dark); border-right: 1px solid var(--border); box-shadow: 1.5rem 0 4rem rgba(0, 0, 0, .48); transform: translateX(-105%); transition: transform var(--transition-base), visibility var(--transition-base); } .console-mobile-drawer.open { height: auto; overflow-y: auto; visibility: visible; pointer-events: auto; transform: translateX(0); } .console-mobile-panel { overflow: visible; } /* Light palette keeps the same LuciRift blue hierarchy without inverted glare. */ html[data-theme="light"] { --bg: #eef3fb; --bg-2: #e7edf7; --bg-3: #f6f8fc; --surface: #f8faff; --surface-elevated: #ffffff; --surface-2: #edf2fa; --surface-3: #e3eaf5; --panel: rgba(255, 255, 255, .90); --panel-solid: #ffffff; --panel-raised: #f4f7fc; --border: rgba(20, 44, 82, .13); --border-strong: rgba(20, 44, 82, .27); --text-primary: #101827; --text-secondary: #34445e; --text-muted: #61708a; --text-faint: #8792a7; --util-dark-rgb: 246 249 253; --util-dark-lighter-rgb: 238 243 250; --util-dark-card-rgb: 255 255 255; --util-dark-border-rgb: 207 218 233; --util-text-primary-rgb: 16 24 39; --util-text-secondary-rgb: 52 68 94; --util-text-muted-rgb: 97 112 138; --util-bone-rgb: 16 24 39; --mesh-page: radial-gradient(58rem 38rem at 85% -10%, rgba(var(--accent-rgb), .13), transparent 60%), radial-gradient(44rem 32rem at -10% 30%, rgba(var(--accent-rgb), .07), transparent 55%); --shadow-1: 0 1rem 2.5rem rgba(34, 61, 100, .12); --shadow-2: 0 1.5rem 3.5rem rgba(34, 61, 100, .16); } html[data-theme="light"] body { background: var(--mesh-page), linear-gradient(180deg, #f8faff, #edf3fb); } html[data-theme="light"] body::before { opacity: .24; } html[data-theme="light"] body::after { opacity: .16; } html[data-theme="light"] .card-surface, html[data-theme="light"] .modal-content, html[data-theme="light"] .docs-section { background: linear-gradient(145deg, rgba(var(--accent-rgb), .055), transparent 44%), rgba(255, 255, 255, .94); } html[data-theme="light"] .public-nav-inner, html[data-theme="light"] .console-topbar-inner, html[data-theme="light"] .console-user-btn { background: rgba(255, 255, 255, .90); box-shadow: 0 .8rem 2.4rem rgba(34, 61, 100, .10); } html[data-theme="light"] .console-sidebar, html[data-theme="light"] .console-mobile-drawer { background: radial-gradient(circle at 0 15%, rgba(var(--accent-rgb), .10), transparent 13rem), #f7f9fd; } html[data-theme="light"] .public-brand strong, html[data-theme="light"] .console-brand strong, html[data-theme="light"] .footer-brand strong, html[data-theme="light"] .console-mobile-brand span, html[data-theme="light"] .console-context strong, html[data-theme="light"] .console-sidebar-status strong, html[data-theme="light"] .console-user-btn, html[data-theme="light"] .console-nav-link.active, html[data-theme="light"] .mobile-link.active, html[data-theme="light"] .text-white { color: var(--text-primary) !important; } html[data-theme="light"] .text-white\/90 { color: rgba(16, 24, 39, .90) !important; } html[data-theme="light"] .text-white\/80 { color: rgba(16, 24, 39, .80) !important; } html[data-theme="light"] .text-white\/70 { color: rgba(16, 24, 39, .70) !important; } html[data-theme="light"] .text-white\/60 { color: rgba(16, 24, 39, .60) !important; } html[data-theme="light"] .text-white\/50 { color: rgba(16, 24, 39, .58) !important; } html[data-theme="light"] .text-white\/40 { color: rgba(16, 24, 39, .48) !important; } html[data-theme="light"] .text-white\/30 { color: rgba(16, 24, 39, .40) !important; } html[data-theme="light"] .form-control, html[data-theme="light"] .form-select, html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { color: var(--text-primary); background-color: rgba(255, 255, 255, .88); border-color: var(--border); } html[data-theme="light"] .table, html[data-theme="light"] table { color: var(--text-primary); } html[data-theme="light"] .table th, html[data-theme="light"] .table td { border-color: var(--border); } html[data-theme="light"] .hero-dashboard-ghost { background: rgba(255, 255, 255, .88); } @media (min-width: 640px) { .console-mobile-drawer { width: min(78vw, 22rem); } } @media (min-width: 768px) { .table-responsive table { min-width: 100%; } } @media (min-width: 1024px) { .console-mobile-drawer, .console-mobile-backdrop { display: none !important; } } @media (min-width: 1280px) { .page:has(.console-shell-nav) .page-wrapper > .page-body .container, .page:has(.console-shell-nav) .page-wrapper > .sub-page-hero .container { padding-inline: 2rem; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } html[data-theme="light"] .page:has(.console-shell-nav) .sub-page-hero { background: radial-gradient(ellipse 48rem 16rem at 50% 0%, rgba(var(--accent-rgb), .10), transparent 72%), linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(235, 241, 250, .84)); } html[data-theme="light"] .stat-card__value, html[data-theme="light"] .card-title, html[data-theme="light"] .section-heading, html[data-theme="light"] .docs-hero-title, html[data-theme="light"] .modal-title, html[data-theme="light"] .footer-heading { color: var(--text-primary); text-shadow: none; } html[data-theme="light"] .site-footer, html[data-theme="light"] .site-footer--console { background: linear-gradient(180deg, rgba(var(--accent-rgb), .035), transparent), rgba(247, 249, 253, .94); } html[data-theme="light"] .footer-links a:hover, html[data-theme="light"] .dropdown-item:hover, html[data-theme="light"] .user-dropdown-menu a:hover { color: var(--text-primary); }